/* =========================================================
   Age of Doubloons - sys.css
   やり込み要素（航海メニュー・港・各パネル）の共通部品。
   各モジュールの細かい見た目は css/sys-<name>.css に置く。
   ========================================================= */

/* ---------------- パネル ---------------- */
/* 中身が長い時は中身だけをスクロールし、閉じるボタンは常に下に見せる
   （箱ごとスクロールさせると、はみ出た中身がボタンの下に潜り込んで重なった） */
.sys-box{display:flex;flex-direction:column;overflow:hidden}
.sys-box.wide{width:min(900px,95vw)}
.sys-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:3px;
  scrollbar-width:thin;scrollbar-color:#5a4626 transparent}
.sys-body::-webkit-scrollbar{width:7px}
.sys-body::-webkit-scrollbar-thumb{background:#5a4626;border-radius:4px}
.sys-foot{flex:0 0 auto;margin-top:12px}

/* ---------------- 航海メニューのタブ ---------------- */
.sys-tabs{
  /* 中身のスクロール枠（.sys-body）の上端で切れないよう、上に余白を持たせる。
     以前は margin-top:-2px で、1段目のタブの上辺と数字の札が欠けていた（2026-09-12） */
  display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;padding-top:7px;
  border-bottom:1px solid rgba(232,194,92,.22);padding-bottom:10px;
}
.sys-tab{
  position:relative;appearance:none;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:7px;font-size:max(var(--fs-min),calc(12px*var(--fs)));font-weight:700;color:#cbbf9f;
  background:linear-gradient(180deg,#3a2c18,#1d160b);
  border:1px solid rgba(232,194,92,.28);
  transition:.12s;
}
.sys-tab .i{font-size:max(var(--fs-min),calc(14px*var(--fs)))}
.sys-tab:hover{color:#ffeec0;border-color:rgba(232,194,92,.6)}
/* お知らせのあるタブ：数字をタブの中（名前の右）に入れ、縁を赤く光らせる。
   角にはみ出す印は隣のタブに付いているように見えた（2026-09-18 オーナー） */
.sys-tab.has{border-color:rgba(240,110,90,.85);box-shadow:inset 0 0 0 1px rgba(240,110,90,.35),0 0 10px rgba(240,90,70,.35)}
.sys-tab.has .dot{position:static;margin-left:2px;flex:0 0 auto}
.sys-tab.on{
  color:#2a1c05;background:linear-gradient(180deg,#f3d27a,#b88a2c);
  border-color:#ffe9a8;box-shadow:0 0 14px rgba(255,205,90,.35);
}
.sys-tab .dot{
  position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;
  font-size:9.5px;font-style:normal;line-height:16px;padding:0 4px;text-align:center;
  background:#d2452c;color:#fff;border:1px solid #ffc2a8;
}
.sys-tabbody{min-height:220px}

/* ---------------- 部品 ---------------- */
.sys-h{font-size:max(var(--fs-min),calc(13px*var(--fs)));color:var(--gold);margin:14px 0 7px;letter-spacing:.06em;font-weight:800}
.sys-h:first-child{margin-top:0}
/* 小見出し（装飾の種類など。2026-09-21） */
.sys-h2{font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#e8d9ae;margin:12px 0 5px;font-weight:800;letter-spacing:.04em}
.sys-h2 small{color:#a2937a;font-weight:700;margin-left:4px}
.sys-note{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#b7a987;line-height:1.8}
.sys-empty{font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#ab9e7e;text-align:center;padding:26px 0}
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.sys-grid.small{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.sys-card{
  position:relative;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:9px 11px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));color:#cdc2a4;
}
.sys-card.on{border-color:rgba(255,215,110,.75);box-shadow:0 0 12px rgba(255,205,90,.18) inset}
.sys-card.locked{opacity:.45;filter:grayscale(.7)}
.sys-card .ic{font-size:calc(22px*var(--fs-big));line-height:1;margin-bottom:4px}
.sys-card .nm{font-weight:800;color:#f1e4c0;font-size:max(var(--fs-min),calc(12.5px*var(--fs)))}
.sys-card .ds{color:#c4b795;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));line-height:1.6;margin-top:3px}
.sys-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.sys-row .grow{flex:1;min-width:0}
/* 港の画面などの「説明＋値段＋ボタン」の行：説明は最低 160px を目安にし、入りきらない時は値段とボタンを次の行の右へ回す
   （2026-09-13 スマホで説明が 1 行 5〜6 文字に潰れていた。「通商院の窓口」「相場を取り寄せる」など） */
.sys-row{flex-wrap:wrap}
.sys-row > .grow{flex:1 1 160px}
.sys-row > .grow + *{margin-left:auto}
.sys-tag{white-space:nowrap}
.sys-price{font-weight:800;color:#ffe08a;font-variant-numeric:tabular-nums;white-space:nowrap}
.sys-price.bad{color:#e59a8a}
.sys-price.good{color:#7fe3a0}
.sys-tag{
  display:inline-block;font-size:max(var(--fs-min),calc(9.5px*var(--fs)));padding:1px 6px;border-radius:9px;margin-right:4px;
  background:rgba(232,194,92,.14);color:#e8c25c;border:1px solid rgba(232,194,92,.3);
}
.sys-tag.r1{color:#c9c2b0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.sys-tag.r2{color:#8fe3a0;border-color:rgba(127,227,160,.35);background:rgba(127,227,160,.08)}
.sys-tag.r3{color:#8fd0ff;border-color:rgba(143,208,255,.35);background:rgba(143,208,255,.08)}
.sys-tag.r4{color:#d6a0ff;border-color:rgba(214,160,255,.35);background:rgba(214,160,255,.08)}
.sys-tag.r5{color:#ffd166;border-color:rgba(255,209,102,.5);background:rgba(255,209,102,.12)}
.sys-btn{
  appearance:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  padding:5px 11px;border-radius:6px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));font-weight:800;color:#ffeec0;
  background:linear-gradient(180deg,#7a5c1c,#3d2c0c);border:1px solid rgba(232,194,92,.5);
}
.sys-btn:hover:not(:disabled){background:linear-gradient(180deg,#9d7626,#543d10)}
.sys-btn:disabled{opacity:.3;cursor:not-allowed}
.sys-btn.ghost{background:transparent;color:#cbbf9f;border-color:rgba(255,255,255,.18)}
.sys-bar{height:6px;border-radius:3px;background:#0a0e16;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.sys-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6416,#e8c25c 70%,#fff0be);transition:width .3s}
/* 右の欄は 1fr だと中身より小さくなれず、長い文が窓の外へはみ出して切れていた
   （2026-09-25 オーナー「文字が切れてる」）。minmax(0,1fr) にして折り返せるようにする */
/* 左の名前の欄も、長い名前（「この周回で訪れた海域」など）で幅を取りすぎないよう、最大 55% で折り返す
   （2026-09-25 点検：320px で名声の「新たな航海へ」の表が 78px はみ出していた） */
.sys-kv{display:grid;grid-template-columns:fit-content(55%) minmax(0,1fr);gap:4px 12px;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.sys-kv .k{min-width:0;overflow-wrap:anywhere}
.sys-kv .k{color:#b7a987}
.sys-kv .v{text-align:right;color:#dfd4b4;font-weight:700;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}

/* ---------------- 選択肢つきの確認 ---------------- */
.sys-dialog{font-size:max(var(--fs-min),calc(12.5px*var(--fs)));line-height:1.9;color:#d8cdae}
.sys-dialog b{color:#ffe08a}
.sys-dialog-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sys-dialog-btns .cbtn{flex:1 1 140px;min-width:0;white-space:normal;line-height:1.25;
  padding-left:10px;padding-right:10px;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.sys-dialog-btns .cbtn > span{display:block;min-width:0}
.sys-foot .sys-dialog-btns{margin-top:0}

@media (max-width:820px){
  .sys-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .sys-tab{padding:5px 8px;font-size:max(var(--fs-min),calc(11px*var(--fs)))}
  /* 狭い画面では、列の多い表（造船所の性能比較など）を横にスクロールさせる。
     しないと右の列（価格・購入）がはみ出して見えなくなった */
  .sys-body table{display:block;overflow-x:auto;max-width:100%}
}

/* ---------------- 残るお知らせ（Sys.ui.notice・2026-09-12） ----------------
   宝の新発見・品物の入手など。右上のレベルの板の下にカードで出し、× で閉じるまで最長 30 秒残す */
.sys-notices{position:fixed;right:12px;top:96px;z-index:55;display:flex;flex-direction:column;gap:6px;
  /* 幅 250px だと文が 2 行に折れて背が伸び、かえって広く覆った（300×99 → 250×150）。1 行に収まる 300px にする */
  width:min(300px,calc(100vw - 24px));pointer-events:none}
.sys-notices.under-notify{visibility:hidden;opacity:0}   /* 真ん中のお知らせと重なる間は隠す（2026-09-26） */
.sys-notice{pointer-events:auto;display:flex;align-items:flex-start;gap:8px;
  padding:8px 8px 8px 12px;border-radius:9px;
  background:linear-gradient(180deg,rgba(52,38,18,.95),rgba(24,17,8,.95));
  border:1px solid rgba(255,214,120,.75);box-shadow:0 0 16px rgba(255,200,90,.35),0 6px 16px rgba(0,0,0,.55);
  color:#fff0c8;font-size:max(var(--fs-min),calc(12.5px*var(--fs)));font-weight:700;line-height:1.45;
  animation:snIn .28s ease-out}
.sys-notice.jp{border-color:#ffe29a;box-shadow:0 0 22px rgba(255,210,100,.55),0 6px 16px rgba(0,0,0,.55)}
.sys-notice.warn{border-color:rgba(160,180,200,.7);color:#dfe6ee;box-shadow:0 6px 16px rgba(0,0,0,.55)}
.sys-notice .sn-t{flex:1;min-width:0;word-break:break-word;padding-top:3px}
.sys-notice .sn-x{flex:none;position:relative;width:28px;height:28px;border-radius:50%;cursor:pointer;padding:0;font-family:inherit;
  display:block;font-size:0;line-height:0;color:#f3e2b0;
  background:linear-gradient(180deg,#4a3a22,#1e160b);border:1px solid rgba(232,194,92,.6)}
.sys-notice .sn-x:hover{color:#fff;border-color:#ffe29a}
.sys-notice.out{opacity:0;transform:translateX(24px);transition:.2s}
/* 押すと該当の画面へ行けるカード（2026-09-15）。文の終わりに「›」 */
.sys-notice.tap{cursor:pointer}
.sys-notice.tap .sn-t::after{content:' ›';color:#ffd98a;font-weight:900}
.sys-notice.tap:active{filter:brightness(1.15)}
/* お知らせから飛んだ先の項目を光らせる（Sys.ui.focus） */
.sys-flash{animation:sysFlash 1.1s ease-out 2;border-radius:8px}
@keyframes sysFlash{0%{box-shadow:0 0 0 3px rgba(255,220,120,.95),0 0 18px rgba(255,210,100,.8)}100%{box-shadow:0 0 0 0 rgba(255,220,120,0),0 0 0 rgba(255,210,100,0)}}
/* 押すと説明が出る品物（依頼の報酬など） */
[data-item]{cursor:pointer;text-decoration:underline dotted rgba(255,220,140,.65);text-underline-offset:3px}
@keyframes snIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* 買い物の確認（Sys.ui.spendCheck。2026-09-14）：所持・代金・買った後の残り */
.spend-kv .v.minus{color:#ff9d7a}
.spend-kv .v.left{color:#bff0c0;font-weight:800}
.spend-kv .v.warn{color:#ffb4a0;font-weight:800}
.spend-note{color:#ffb4a0;margin-top:8px}

/* 船ごとの台の特色・船団・船ごとの依頼の条件（2026-09-15） */
.shp-gim{margin-top:6px;padding:6px 9px;border-radius:8px;background:rgba(255,215,120,.08);border:1px solid rgba(255,215,120,.28);
  color:#f3e6c2;font-size:max(var(--fs-min),calc(12px*var(--fs)));line-height:1.5}
.shp-gim b{display:block;color:#ffe29a;margin-bottom:2px}
.shp-fleet{margin-top:4px;color:#bfe8c8;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.shp-fleet b{color:#e6ffd0}
.sq-ship{margin:5px 0;padding:5px 9px;border-radius:7px;background:rgba(120,170,255,.10);border:1px solid rgba(140,190,255,.40);
  color:#d6e6ff;font-size:max(var(--fs-min),calc(12px*var(--fs)));line-height:1.5}
.sq-ship.ok{background:rgba(110,230,150,.10);border-color:rgba(110,230,150,.5);color:#d6ffe6}

/* 画面の右がはみ出さないように（2026-09-15 オーナー「右側が切れる・横スクロールしないように」）：
   グリッドのカードは中身より狭くなれる（既定の min-width:auto だと長い物に引っぱられて広がる）、長い語は折り返す */
.sys-grid>*{min-width:0}
.sys-card,.sys-row .grow{overflow-wrap:anywhere}

/* 窓（Sys.ui.dialog）の見出しは折り返す。切らない（「このデータで上…」と切れていた。2026-09-16 オーナー） */
#sysDialog .modal-head{align-items:flex-start}
#sysDialog .modal-head h2{white-space:normal;overflow:visible;text-overflow:clip;flex-shrink:1;line-height:1.35}

/* 語の途中で折り返さない短いまとまり（港名・事件名など。2026-09-17） */
.nw{white-space:nowrap}

/* 海の事件で選ぶ札が出ている間はお知らせカードを隠す（events.js uiShowCard。2026-09-17） */
body.ev-choosing .sys-notices{opacity:0;pointer-events:none;transition:opacity .2s}
/* 背の低い画面（スマホの横向き）では、お知らせカードは新しい 2 枚だけ見せる（4 枚で盤面の右半分が隠れた。2026-09-17） */
@media (max-height:500px){ .sys-notices > .sys-notice:nth-child(n+3){display:none} }

/* アップデート情報（js/updates.js） */
.upd-b{margin:10px 0}
.upd-h{font-weight:800;color:#ffe08a;display:flex;gap:8px;align-items:baseline}
.upd-h small{color:#b9a77a;font-weight:500}
.upd-b ul{margin:4px 0 0;padding-left:1.2em;display:grid;gap:4px;line-height:1.55}
/* 横スクロールが出た（9/18 オーナー・iPhone）：格子の列が長い語の幅まで広がらないように。どうしても入らない語は折る */
.upd-b{min-width:0;max-width:100%}
.upd-b ul{grid-template-columns:minmax(0,1fr)}
.upd-b li{min-width:0;overflow-wrap:anywhere}

/* セーブデータの控え（js/saveslots.js） */
.ss-list{display:grid;gap:8px;margin-top:8px}
.ss-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(232,194,92,.3);border-radius:8px;background:rgba(0,0,0,.25)}
.ss-no{font-weight:900;color:#ffe08a;text-align:center;font-size:18px}
.ss-info{line-height:1.4;min-width:0}
.ss-info small{color:#b9a77a}
.ss-empty{color:#8e8168}
.ss-btns{grid-column:2;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.ss-btns .cbtn{padding:6px 10px;font-size:max(var(--fs-min),calc(12px*var(--fs)))}

/* 指で触る端末では、押すボタンを少し大きく（高さ 26px → 32px。2026-09-22 表示の点検で「小さい」が多く出た）。
   押し間違いが減る。並びが崩れないよう、文字の大きさは変えずに上下の余白だけ足す */
@media (pointer:coarse){
  .sys-btn{min-height:32px;padding-top:6px;padding-bottom:6px}
}

/* まとめたタブの中の切り替え（2026-09-22 メニュー整理 案C。js/sys/core.js の GROUPS） */
.sys-subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px;padding:4px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(232,194,92,.22)}
.sys-subtab{position:relative;appearance:none;cursor:pointer;font-family:inherit;flex:1 1 auto;min-width:0;
  padding:7px 10px;border-radius:7px;border:1px solid transparent;background:transparent;color:#cbbf9f;
  font-size:max(var(--fs-min),calc(12.5px*var(--fs)));font-weight:800;white-space:nowrap}
.sys-subtab.on{background:linear-gradient(180deg,#8a6a22,#5a4212);color:#fff3cf;border-color:#ffe29a}
.sys-subtab .dot{position:absolute;top:-6px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#d33;color:#fff;font-size:10px;line-height:16px;font-style:normal}
.sys-subbody{min-height:200px}
/* 借りてきた窓の中身（能力・数字・出来事）の余白 */
.sys-borrow .sp-left{margin:0 0 8px;color:#cbbf9f;font-weight:700}
.sys-borrow .modal-note{margin-top:12px}

/* ---------------- 窓の下端に固定する帯（航海メニューのタブ／港の施設）----------------
   2026-09-25 オーナー「下の方にコンパクトに固定」「文字とアイコンは揃えて」
   → 同日「航海メニューは文字が小さい」「市場メニューは文字が切れてる」「下に隙間があるので2行にしても良い」
     「文字とアイコンサイズのバランスも考えて作り直して」。
   ・6つ以上は 2 段の格子にする（列の数は JS が --cols に入れる＝半分を切り上げ）。1 つの幅が倍になり、名前を縮めずに入る
   ・下の余白：窓は画面の下端に接していないので、iPhone の安全域（約34px）を足す必要はなかった。やめた
   ・絵 24px の枠のまん中＋名前 1 行。どの項目も同じ形
   ・港の帯は、施設を開くと付く .vy-tiles.compact（sys-voyage.css・後から読まれる）に負けないよう、クラスを 1 つ多くしている */
.sys-box > .sys-tabbar,
.sys-box > .vy-tiles.vy-tilebar{
  order:8;flex:0 0 auto;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:3px;
  margin:8px -14px -10px;padding:6px 8px 7px;
  border-top:1px solid rgba(232,194,92,.32);border-bottom:none;
  background:linear-gradient(180deg,rgba(28,19,7,.94),rgba(12,8,3,.99));
}
.sys-box > .sys-tabbar > .sys-tab,
.sys-box > .vy-tiles.vy-tilebar > .vy-tile{
  position:relative;min-width:0;min-height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:3px 2px;border-radius:8px;border:1px solid transparent;background:rgba(255,235,190,.035);box-shadow:none;
  color:#d6c8a3;text-align:center;
}
.sys-box > .sys-tabbar > .sys-tab > .i,
.sys-box > .vy-tiles.vy-tilebar > .vy-tile > .kp{
  flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;overflow:hidden;border-radius:5px;
}
.sys-box > .sys-tabbar > .sys-tab > .i img,
.sys-box > .vy-tiles.vy-tilebar > .vy-tile > .kp img{max-width:100%;max-height:100%;object-fit:contain}
/* 名前：12px（文字の大きさ「大」でも 13.5px まで）。高さは文字なり */
.sys-box > .sys-tabbar > .sys-tab > span:not(.i),
.sys-box > .vy-tiles.vy-tilebar > .vy-tile > .tx{
  display:block;width:100%;line-height:1.15;
  font-size:min(13.5px,max(10.5px,calc(11.5px*var(--fs))));font-weight:800;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sys-box > .vy-tiles.vy-tilebar > .vy-tile > .tx > .nm{font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit}
.sys-box > .vy-tiles.vy-tilebar > .vy-tile > .tx > .hint{display:none}
.sys-box > .sys-tabbar > .sys-tab.on,
.sys-box > .vy-tiles.vy-tilebar > .vy-tile.on{
  background:linear-gradient(180deg,#f3d27a,#b88a2c);color:#2a1c05;border-color:#ffe9a8;
}
.sys-box > .sys-tabbar > .sys-tab.has{border-color:transparent;box-shadow:none}
.sys-box > .sys-tabbar > .sys-tab > .dot{
  position:absolute;top:2px;right:4px;min-width:15px;height:15px;line-height:15px;font-size:9.5px;padding:0 4px;border-width:1px;
}
.sys-box > .vy-tiles.vy-tilebar > .vy-tile.off{opacity:.42;filter:grayscale(.6)}
/* 横に広い画面（パソコン・横向きのスマホ）は 1 段で足りる。2 段だと、背の低い横向き（844×390）で
   帯が 118px を取り、中身が 140px しか残らなかった（2026-09-25 実測） */
@media (min-width:600px),(max-height:520px){
  .sys-box > .sys-tabbar,
  .sys-box > .vy-tiles.vy-tilebar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}
@media (max-height:520px){
  .sys-box > .sys-tabbar > .sys-tab,
  .sys-box > .vy-tiles.vy-tilebar > .vy-tile{min-height:40px;gap:1px}
}

/* ---------------- 折り返さない短いまとまり（.nw）が窓からはみ出さないように（2026-09-25）----------------
   オーナー「切れてるところが多すぎです。徹底的に調べてください」。iPhone と同じ WebKit で全画面を点検したら、
   文字の大きさ「大」で .nw（港名・事件名・「（船の基本容量の50%）」など）が 6〜11px 窓の外へ出ていた。
   丸ごと 1 つの箱（inline-block）にして、行に入らない時は次の行へ送り、窓より長い時だけ中で折る。切らずに全部読める */
.nw,html.jw .nw,.tr-sub .nw,.notify .nw,.ch-sp .ch-spn{display:inline-block;max-width:100%;white-space:normal;vertical-align:baseline}
/* 窓の見出しの右の英字（build 494 など）は、狭い時は下の行へ（切らない） */
.modal-box > .modal-head{flex-wrap:wrap;row-gap:0}
.modal-head .sp-left{white-space:normal;overflow:visible;text-overflow:clip}
/* 設定の中の［配当表］のボタンは、狭い時は 2 行に */
#btnPayCfg{white-space:normal;line-height:1.3}
#btnPayCfg > span{white-space:normal}
/* 言葉の説明の語（点線。読みが付くと「造船所（ぞうせんじょ）」と長くなる）も同じ扱い。glossary.js の nowrap より強く */
html .gl-word{display:inline-block;max-width:100%;white-space:normal}
html .gl-word .gl-yomi{white-space:nowrap}
/* 長い船名が入る札・造船所の「〇〇で買えます」は、語の途中でも折ってよい（切れるよりよい） */
.sq-ship,.shp-why,.shp-dim{overflow-wrap:anywhere}
/* 港の施設の札（占い・寄進・契約など）は文が長いので、スマホでは 1 列に（2 列だと 1 行 5〜6 文字で縦に並び読みづらかった。
   2026-09-25 オーナー「縦に並ぶと読みづらい」） */
@media (max-width:560px){ .sys-grid.px-cards{grid-template-columns:1fr} }

/* 改行崩れ（最後の行に 1〜2 文字だけ落ちる）を防ぐ（2026-09-25 オーナー「改行崩れがないかもチェックしておいてください」）。
   iPhone と同じ WebKit で全画面を点検したら、402px で 29 件・320px で 49 件あった。
   text-wrap-style: pretty は、段落の最後の行が短くなりすぎないよう、前の行から言葉を送って組み直す（Safari 26・Chrome 117 から）。
   text-wrap-mode（折り返す／折り返さない）は変えない（.nw などの nowrap を壊さない） */
.modal-box,.sys-dialog,.notify,#guideCard,.st-box,.tr-open-card,.gl-pop{text-wrap-style:pretty}
/* とても狭い画面（360px 以下）では、名前と値の表を「名前の下に値」の縦並びにする。
   横並びだと値の欄が 5〜6 文字ぶんしかなく、「リスボンの教会」「（使った・売った）」が 1 文字だけ次の行に落ちた */
@media (max-width:360px){
  .sys-kv{grid-template-columns:1fr;row-gap:0}
  .sys-kv .v{text-align:left;padding:0 0 5px 12px}
}
/* 短い値・札の説明は、行を均等に割る（balance）。2 行になる時に「る」だけが下に落ちない */
.sys-kv .v,.vy-tile .hint,.gd-card .gd-sub,.sys-tag,.shp-dim,.nw{text-wrap-style:balance}

/* ---------------- 見本 ?tidy（2026-09-27 要望112「港・航海メニュー・ステータスがごちゃごちゃして見づらい」）----------------
   実測（402×874・Lv34）：船長の画面を開くと赤い数字の印が 10 個、そのうち「40」（残りの能力ポイント）が 5 か所に出ていた。
   ・数字は「どこで使うか」の 1 か所（船長の中の［能力］）と、画面下の［船長］だけに残す
   ・ほかの印（航海メニューの帯・機能・Lv の輪・航海）は数字の無い小さな点にする（何かあることだけ分かる）
   ・航海メニューの見出しの英字（VOYAGE）を出さず、見出しの下の余白を詰める（中身の高さを増やす） */
html.tidy .sys-box > .sys-tabbar > .sys-tab > .dot,
html.tidy #btnMenuI .badge,
html.tidy #btnHub .badge,
html.tidy .hud-pill.hp-lv .badge{
  min-width:0;width:9px;height:9px;padding:0;font-size:0;line-height:0;border-radius:50%;border-width:1px;
}
html.tidy .sys-box > .sys-tabbar > .sys-tab > .dot{top:5px;right:calc(50% - 20px)}
html.tidy #sysHub .modal-head .sp-left{display:none}
html.tidy #sysHub .modal-head{margin-bottom:6px;padding-bottom:6px}

/* ---------------- 見本 ?tidy1・?tidy2・?tidy5（2026-09-27 要望112。旗なしは今のまま。core.js の説明を参照）----------------
   ?tidy1：能力のポイントの数字は下のバーの［船長］だけ。ほかの印は数字の無い小さな点（見たら消える） */
html.tidy1 .sys-box > .sys-tabbar > .sys-tab > .dot,
html.tidy1 .sys-tab .dot,
html.tidy1 .sys-subtab .dot,
html.tidy1 .sq-sub .dot,
html.tidy1 #btnMenuI .badge.has,
html.tidy1 #btnHub .badge.has,
html.tidy1 .hud-pill.hp-lv .badge.has{
  min-width:0;width:10px;height:10px;padding:0;font-size:0;line-height:0;border-radius:50%;border-width:1px;
}
html.tidy1 .sys-box > .sys-tabbar > .sys-tab > .dot{top:6px;right:calc(50% - 22px)}
html.tidy1 .sys-subtab .dot{top:-3px;right:-3px}
/* ?tidy5：記録の切り替えを 1 段にしたので、中の 2 段目（名声・実績・称号・統計）は出さない */
html.tidy5 .sq-subs{display:none}
.tidy-num-stats{margin-bottom:10px}
/* ?tidy2：港の画面の入口に並べる施設の説明（航海メニューの［港］タブにあった物）。下の帯とは別の並び */
.vy-tiles.vy-hintlist{margin-top:8px}
html.tidy1 .p2-sp .sp-n{min-width:0;width:10px;height:10px;padding:0;font-size:0;line-height:0;border-radius:50%}

/* 見本 ?snclear（2026-09-28 オーナー「お知らせがたくさん出た時もっさりする。背景を透過させたら重くなる？」）：
   お知らせの札の地を 95% → 70% の透け具合に。文字は縁取りの影で読みやすさを保つ。
   重さ：透けるだけなら描く手間はほぼ同じ。すりガラス（backdrop-filter の blur）は iPhone で重いので使わない。
   代わりに、札ごとの大きな光の影（16〜22px のぼかし）をやめて軽くする */
html.snclear .sys-notice{background:linear-gradient(180deg,rgba(40,29,14,.72),rgba(20,14,6,.72));
  box-shadow:0 2px 6px rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}
html.snclear .sys-notice.jp{box-shadow:0 0 0 1px rgba(255,226,154,.5),0 2px 6px rgba(0,0,0,.45)}
html.snclear .sys-notice.warn{box-shadow:0 2px 6px rgba(0,0,0,.45)}