/* 文字の大きさ（⚙ 設定の「文字の大きさ」で 小・中・大。既定は 中。端末ごとに localStorage の dk_fs に覚える）。
   各 CSS の font-size は「max(下限, 元の大きさ × 倍率)」で書いてある（2026-09-11 に一括で変換。元は 8〜11.5px が半数以上で小さかった）。
   20px 以上の見出し・数字は --fs-big で控えめに大きくする。丸い数の札（badge）・キーの印（kbd）などは変えない */
:root{--fs:1.2;--fs-big:1.06;--fs-min:12px}
html.fs-s{--fs:1;--fs-big:1;--fs-min:8px}
html.fs-l{--fs:1.4;--fs-big:1.12;--fs-min:14px}

/* =========================================================
   Age of Doubloons - style.css
   画面いっぱいの情景に、真鍮の銘板と操作卓だけを重ねる
   ========================================================= */
:root{
  --gold:#e8c25c;
  --gold-lt:#ffe9a8;
  --gold-dk:#8a6416;
  --brass:#c79a35;
  --wood:#3a2814;
  --wood-lt:#6b4d26;
}
*{box-sizing:border-box;margin:0;padding:0}
/* スマホ：ダブルタップ・2本指での拡大、引っぱって更新、長押しの選択メニュー、タップ時の灰色の四角を止める */
:root{--sab:env(safe-area-inset-bottom, 0px)}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  background:#05080e;
  color:#e9e2cf;
  font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;   /* 読みやすさ重視のUD書体（2026-09-20 オーナー「ゲームもCが良い」） */
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}

/* 画面の高さ：iPhone のブラウザは下のアドレスバーが出入りして高さが変わる。100% だと操作盤がバーの下に隠れたので、
   実際に見えている高さ（dvh）で測る。対応していないブラウザは今までどおり 100%（2026-09-16 オーナー） */
#stage{position:fixed;left:0;right:0;top:0;bottom:0}
/* dvh はブラウザ版だけ。ホーム画面版（pwa）は画面いっぱい（inset:0）のままにする。
   ホーム画面版に dvh を使うと、下に黒い帯が出た（2026-09-16 オーナーのスマホの写真） */
@supports (height:100dvh){ html.inbrowser #stage{bottom:auto;height:100dvh} }
#cv{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}

/* ---------------- 真鍮の銘板 ---------------- */
/* iPhone の切り欠き（ノッチ）や角の丸みを避ける（env(safe-area-inset-*)。viewport-fit=cover の時だけ 0 でなくなる） */
.plate{
  position:absolute;top:calc(16px + env(safe-area-inset-top, 0px));
  padding:9px 15px 10px;
  border-radius:8px;
  background:
    linear-gradient(160deg, rgba(58,40,20,.92), rgba(20,14,7,.94));
  border:1px solid rgba(232,194,92,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,235,190,.22),
    inset 0 -14px 22px rgba(0,0,0,.35),
    0 8px 26px rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
}
.plate::after{
  content:'';position:absolute;inset:4px;border-radius:5px;
  border:1px solid rgba(232,194,92,.22);pointer-events:none;
}
.plate.tl{left:calc(16px + env(safe-area-inset-left, 0px))}
.plate.tr{right:calc(16px + env(safe-area-inset-right, 0px));min-width:230px}

.pl-cap{
  font-size:max(var(--fs-min),calc(9.5px*var(--fs)));letter-spacing:.20em;color:#b39a58;font-weight:700;
  text-transform:uppercase;
}
.pl-credit{
  font-family:"DIN Alternate","Helvetica Neue",sans-serif;
  font-size:calc(34px*var(--fs-big));font-weight:800;line-height:1.05;
  color:#ffe9a8;font-variant-numeric:tabular-nums;
  text-shadow:0 0 20px rgba(255,205,90,.55), 0 2px 3px rgba(0,0,0,.7);
  display:flex;align-items:baseline;gap:4px;
}
.pl-credit em{font-size:max(var(--fs-min),calc(12px*var(--fs)));font-style:normal;color:#c3a05a}
/* 手持ちのダブロン金貨（所持メダルの下）。金貨のまわりの輪が、次のダブロン・ラッシュまでの進み（--p：0〜1） */
.pl-dbl{display:flex;align-items:center;gap:6px;margin-top:4px;font-weight:800;font-variant-numeric:tabular-nums;
  font-size:max(var(--fs-min),calc(13px*var(--fs)));color:#ffb89a;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.85)}
.pl-dbl .dbl-ic{width:1.8em;height:1.8em;border-radius:50%;flex:0 0 auto;
  background:var(--dbl-ic, radial-gradient(circle,#b8391c 0 42%,#e9b53a 44% 100%)) center/76% no-repeat,
    conic-gradient(#ff5a3c calc(var(--p, 0) * 360deg), rgba(255,255,255,.14) 0)}
/* 枚数と「ラッシュまで」は、金貨の絵の横に 2 段で置く（横に並べると、狭い窓で手持ち 999 枚の時に「ラッシュま…」と切れた） */
.pl-dbl .dbl-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.pl-dbl .dbl-next{font-size:.62em;font-weight:600;color:#c9b27a;letter-spacing:.02em}
.pl-dbl.bump .dbl-ic{animation:dblBump .5s ease-out}
@keyframes dblBump{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}}
/* 取ったダブロン金貨が画面の真ん中で回って「ダブロン ○枚」へ飛ぶ（items.js の dblFly が動かす） */
.dbl-fly{position:fixed;left:0;top:0;width:96px;height:96px;z-index:55;pointer-events:none;
  background:center/contain no-repeat;filter:drop-shadow(0 0 14px rgba(255,60,40,.8)) drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.pl-sub{display:flex;justify-content:space-between;gap:10px;font-size:max(var(--fs-min),calc(9px*var(--fs)));color:#8b7f5f;margin-top:4px;letter-spacing:.08em}

.rank-line{display:flex;align-items:baseline;gap:8px}
.lv{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#b39a58;font-weight:700;letter-spacing:.08em}
.lv b{font-size:calc(20px*var(--fs-big));color:#ffe9a8;margin-left:2px;font-variant-numeric:tabular-nums}
.rank-jp{
  font-size:max(var(--fs-min),calc(16px*var(--fs)));font-weight:800;color:#f0dfae;
  font-family:"Hiragino Mincho ProN",serif;letter-spacing:.05em;
}

.bar{height:6px;border-radius:4px;overflow:hidden;background:#0a0e16;
  border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 3px rgba(0,0,0,.8);margin-top:6px}
.bar i{display:block;height:100%;border-radius:3px;transition:width .3s ease}
.bar.exp i{background:linear-gradient(90deg,#3d8f5c,#7fe3a0 70%,#c9ffdd)}
.bar.fever i{background:linear-gradient(90deg,#ff5722,#ffb300 60%,#fff176);
  box-shadow:0 0 14px rgba(255,140,40,.9)}

/* ---------------- 通知 ---------------- */
.notify{
  position:absolute;top:11%;left:50%;transform:translate(-50%,-14px) scale(.9);
  padding:12px 34px;border-radius:9px;
  background:linear-gradient(180deg,rgba(30,22,8,.94),rgba(12,9,4,.94));
  border:1px solid rgba(255,215,120,.7);
  color:#ffeec0;font-size:calc(22px*var(--fs-big));font-weight:900;letter-spacing:.05em;
  opacity:0;pointer-events:none;transition:.28s cubic-bezier(.2,1.4,.4,1);
  text-shadow:0 0 18px rgba(255,200,80,.85);white-space:nowrap;z-index:5;
}
.notify.show{opacity:1;transform:translate(-50%,0) scale(1)}
.notify.jp{border-color:#8fe6ff;box-shadow:0 0 46px rgba(110,215,255,.7);color:#d8f6ff;font-size:calc(26px*var(--fs-big))}
.notify.sjp{border-color:#fff;box-shadow:0 0 64px rgba(255,255,200,.9);font-size:calc(30px*var(--fs-big))}
.notify.fever{border-color:#ff8a3d;box-shadow:0 0 46px rgba(255,110,40,.8);color:#ffd9b0}
.notify.tower{border-color:#ffd166;color:#ffeab8;box-shadow:0 0 36px rgba(255,200,90,.6)}
.notify.lvup{border-color:#7fe3a0;color:#d6ffe6;box-shadow:0 0 34px rgba(90,230,150,.6)}
.notify.warn{border-color:#8b93a3;color:#c6cedb;font-size:max(var(--fs-min),calc(16px*var(--fs)));box-shadow:none}
/* タップで該当の画面へ行ける通知（2026-09-15）。見えている間だけ押せる。右に「›」 */
.notify.show.tap{pointer-events:auto;cursor:pointer}
.notify.tap::after{content:'›';display:inline-block;margin-left:.45em;opacity:.85}

/* ---------------- 操作コンソール ---------------- */
.console{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1080px, calc(96vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  padding:0;
}
/* フィーバー表示は独立した行を持たず、操作卓の上辺に細く重ねる */
.fever-strip{
  display:flex;align-items:center;gap:8px;
  height:12px;padding:0 14px;
  opacity:.3;transition:opacity .3s;
}
.fever-strip.active{opacity:1}
.fv-label{font-size:8px;letter-spacing:.22em;color:#ff9d5c;font-weight:800;white-space:nowrap}
.fever-strip .bar{flex:1;margin-top:0;height:5px}
.fv-time{font-size:max(var(--fs-min),calc(9px*var(--fs)));color:#ff9d5c;font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.fever-strip.active .fv-label{animation:blink .5s infinite alternate}
@keyframes blink{from{opacity:.5}to{opacity:1}}

.console-body{
  display:flex;align-items:center;gap:9px;
  padding:7px 14px calc(8px + env(safe-area-inset-bottom, 0px));   /* iPhone の画面下のバーの分だけ上げる */
  border-radius:12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(64,45,22,.94), rgba(26,18,9,.97));
  border:1px solid rgba(232,194,92,.45);
  border-bottom:none;
  box-shadow:
    inset 0 1px 0 rgba(255,235,190,.22),
    0 -8px 30px rgba(0,0,0,.6);
}
.cgroup{display:flex;align-items:center;gap:8px}
/* 投入位置は盤面のドラッグで動かす（2026-09-12）。スライダーは値の受け皿として残し、画面には出さない（空いた場所を UI に使う） */
.slider-group{display:none!important;flex:1;min-width:150px}
  .slider-group label{font-size:max(var(--fs-min),calc(9.5px*var(--fs)));color:#b39a58;letter-spacing:.10em;white-space:nowrap;font-weight:700}

input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;
  background:linear-gradient(90deg,#2a2013,#4a3a20);outline:none;
  border:1px solid rgba(0,0,0,.5);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffeeb8,#c79a35 60%,#6d4d0c);
  border:1px solid rgba(0,0,0,.6);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.7);
}

.cbtn{
  appearance:none;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 15px;border-radius:7px;
  font-size:max(var(--fs-min),calc(12.5px*var(--fs)));font-weight:800;letter-spacing:.04em;
  color:#e9dfc4;
  background:linear-gradient(180deg,#4a3a22,#241a0e);
  border:1px solid rgba(232,194,92,.40);
  box-shadow:inset 0 1px 0 rgba(255,235,190,.18), 0 3px 8px rgba(0,0,0,.5);
  transition:.13s;white-space:nowrap;
}
.cbtn:hover{background:linear-gradient(180deg,#5e4a2c,#2e2212);transform:translateY(-1px)}
.cbtn:active{transform:translateY(1px)}
.cbtn.main{
  background:linear-gradient(180deg,#9a7526,#4f3810);
  border-color:rgba(255,225,140,.65);color:#fff2cc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(0,0,0,.55), 0 0 18px rgba(255,190,60,.16);
}
.cbtn.main:hover{background:linear-gradient(180deg,#b98d30,#5f4514)}
.cbtn.auto.on{
  background:linear-gradient(180deg,#1f6b4a,#0f3d29);
  border-color:rgba(120,240,180,.65);color:#c8ffe4;
  box-shadow:0 0 18px rgba(60,220,150,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.cbtn.danger{border-color:rgba(200,70,50,.55);color:#e5a99c}
.cbtn.danger:hover{background:linear-gradient(180deg,#5a2a1c,#2a120c)}
.cbtn.wide{width:100%;margin-top:14px}
kbd{
  font-family:inherit;font-size:9px;background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:1px 4px;color:#bfae87;
}

.icons{gap:6px}
.ico{
  position:relative;cursor:pointer;font-family:inherit;
  width:34px;height:34px;border-radius:7px;font-size:max(var(--fs-min),calc(15px*var(--fs)));
  display:flex;align-items:center;justify-content:center;
  color:#e0d3ae;
  background:linear-gradient(180deg,#3d3020,#1c150b);
  border:1px solid rgba(232,194,92,.32);
  box-shadow:inset 0 1px 0 rgba(255,235,190,.14);
  transition:.13s;
}
.ico:hover{background:linear-gradient(180deg,#54432c,#261d10);transform:translateY(-1px)}
.badge{
  position:absolute;top:-5px;right:-5px;
  min-width:17px;height:17px;border-radius:9px;padding:0 4px;
  font-size:10px;font-style:normal;font-weight:800;line-height:17px;
  background:#2c2418;color:#7e7259;border:1px solid rgba(255,255,255,.14);
}
.badge.has{
  background:linear-gradient(180deg,#e8c25c,#8a6416);color:#2a1c05;
  border-color:#ffe9a8;animation:pulseSP 1.3s infinite;
}
/* 数が無い時は丸を出さない（2026-09-23 オーナー「何もない時はつけないで」）。
   航海・港の大きなボタンだけ css/sys-hud.css の :empty の指定から外れていて、空の丸が出ていた */
.badge:empty{display:none}
@keyframes pulseSP{0%,100%{box-shadow:0 0 0 rgba(255,210,90,0)}50%{box-shadow:0 0 14px rgba(255,210,90,.9)}}

/* ---------------- モーダル ---------------- */
.modal{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;
  background:rgba(4,7,12,.78);backdrop-filter:blur(7px);
}
.modal.open{display:flex;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  width:min(560px,92vw);max-height:86vh;overflow-y:auto;overflow-x:hidden;  /* 9/18 iPhone で窓に横スクロールが出た */
  background:linear-gradient(160deg,#241a0e 0%,#120d07 100%);
  border:1px solid rgba(232,194,92,.5);border-radius:12px;
  padding:20px 22px;box-shadow:0 22px 70px rgba(0,0,0,.75);
  scrollbar-width:thin;scrollbar-color:#5a4626 transparent;
}
.modal-box::-webkit-scrollbar{width:7px}
.modal-box::-webkit-scrollbar-thumb{background:#5a4626;border-radius:4px}
.modal-head{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;
  border-bottom:1px solid rgba(232,194,92,.28);padding-bottom:10px;
}
.modal-head h2{font-size:max(var(--fs-min),calc(18px*var(--fs)));color:var(--gold-lt);font-family:"Hiragino Mincho ProN",serif;letter-spacing:.06em}
/* 見出しは途中で折らない（スマホで「船長の能／力」になっていた）。横の小さな字（残りスキルポイント）の方が折れる */
/* 港の名前など、プログラムが入れる長い見出しは、はみ出さずに「…」で切る */
.modal-head h2{white-space:nowrap;flex-shrink:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:8px}
.sp-left{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#8e8168;letter-spacing:.10em;word-break:keep-all}
.sp-left b{color:#ffe08a;font-size:max(var(--fs-min),calc(16px*var(--fs)));margin-left:4px}
.modal-note{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#b7a987;line-height:1.8;margin:12px 0 0}

.skill-list{display:flex;flex-direction:column;gap:10px}
.skill-row{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:9px 11px}
.skill-head{display:flex;align-items:center;gap:8px}
.skill-icon{font-size:max(var(--fs-min),calc(15px*var(--fs)))}
.skill-name{font-weight:800;font-size:max(var(--fs-min),calc(13px*var(--fs)));color:#e4d9b8;flex:1}
.skill-val{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#9a8f76;font-variant-numeric:tabular-nums}
.skill-btn{
  width:27px;height:27px;border-radius:6px;border:1px solid rgba(232,194,92,.5);
  background:linear-gradient(180deg,#7a5c1c,#3d2c0c);color:#ffeec0;
  font-size:max(var(--fs-min),calc(15px*var(--fs)));font-weight:800;cursor:pointer;line-height:1;font-family:inherit;
}
.skill-btn:hover:not(:disabled){background:linear-gradient(180deg,#9d7626,#543d10)}
.skill-btn:disabled{opacity:.28;cursor:not-allowed}
.skill-bar{height:6px;border-radius:3px;background:#0a0e16;margin:7px 0 5px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.skill-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6416,#e8c25c 70%,#fff0be);transition:width .3s}
.skill-desc{font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#83795f}

.stat-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.stat-grid .k{color:#b7a987}
.stat-grid .v{text-align:right;color:#dfd4b4;font-weight:700;font-variant-numeric:tabular-nums}
.stat-grid .v.good{color:#7fe3a0}
.stat-grid .v.bad{color:#e59a8a}

.pay{width:100%;border-collapse:collapse;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.pay td{padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
/* 名前は語の途中で折らない（狭い画面で「羅針盤 揃／い」「クラーケ／ン」になっていた。空白の所でだけ折れる） */
.pay td{word-break:keep-all}
.pay td.p{text-align:right;font-weight:800;color:#dcc98f;white-space:nowrap}
.pay td.p.sjp{color:#fff0a0;text-shadow:0 0 10px rgba(255,220,90,.7)}
.pay td.p.fever{color:#ff9d5c}
.pay td.p.tower{color:#ffd166}
.pay td.p.ball{color:#8fe6ff}

.log-list{
  max-height:46vh;overflow-y:auto;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));line-height:1.8;color:#a49a83;
  scrollbar-width:thin;scrollbar-color:#5a4626 transparent;
}
.log-list::-webkit-scrollbar{width:6px}
.log-list::-webkit-scrollbar-thumb{background:#5a4626;border-radius:3px}
.log-item{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.log-item.new{color:#ffe6a8;animation:logIn .5s ease}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

.help h3{font-size:max(var(--fs-min),calc(12.5px*var(--fs)));color:var(--gold);margin:14px 0 5px;letter-spacing:.06em}
.help p{font-size:max(var(--fs-min),calc(11.5px*var(--fs)));line-height:1.9;color:#a99f89}
.help b{color:#ffe08a}
/* ボタンが増えた時は折り返す。min-width:0 が無いと、長い文字のボタンが縮まず右へはみ出した（2026-09-16 オーナー） */
.cfg-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.cfg-row .cbtn{flex:1 1 auto;min-width:0}
.cfg-row .cbtn > span{overflow:hidden;text-overflow:ellipsis}
.vol{display:flex;align-items:center;gap:8px;flex:1;min-width:0;white-space:nowrap;font-size:max(var(--fs-min),calc(13px*var(--fs)))}

/* ---------------- 起動画面 ---------------- */
.boot{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 600px at 50% 40%, #1c3350 0%, #0a1220 55%, #04070c 100%);
  transition:opacity .7s, transform .7s;
}
.boot.hide{opacity:0;transform:scale(1.06);pointer-events:none}
.boot-inner{text-align:center;padding:20px}
.boot-crest{font-size:calc(52px*var(--fs-big));margin-bottom:6px;filter:drop-shadow(0 0 22px rgba(255,210,100,.6))}
.boot h1{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(30px,6vw,50px);letter-spacing:.10em;font-weight:800;
  background:linear-gradient(180deg,#fff8dc,#e8c25c 50%,#8a6416);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 26px rgba(255,190,60,.28);
}
.boot-sub{font-size:max(var(--fs-min),calc(10px*var(--fs)));letter-spacing:.24em;color:#8b96aa;margin:12px 0 30px}
.boot-load{width:300px;margin:0 auto}
.boot-bar{height:5px;border-radius:3px;background:#0d1420;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a6416,#ffe9a8);transition:width .15s}
.boot-txt{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#7f8b9e;margin-top:9px;letter-spacing:.10em}
.btn.start{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:max(var(--fs-min),calc(17px*var(--fs)));padding:14px 44px;letter-spacing:.20em;border-radius:9px;
  background:linear-gradient(180deg,#8a6416,#4a3410);
  border:1px solid rgba(255,225,140,.7);color:#fff2cc;font-weight:800;
  box-shadow:0 0 34px rgba(255,190,60,.35), inset 0 1px 0 rgba(255,255,255,.2);
  animation:startPulse 2s infinite;
}
@keyframes startPulse{0%,100%{box-shadow:0 0 24px rgba(255,190,60,.3), inset 0 1px 0 rgba(255,255,255,.2)}
  50%{box-shadow:0 0 46px rgba(255,190,60,.65), inset 0 1px 0 rgba(255,255,255,.2)}}
.boot-note{font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#68738a;margin-top:18px;letter-spacing:.08em}

/* ---------------- 狭い画面 ---------------- */
@media (max-width:820px){
  .plate.tr{min-width:170px}
  .pl-credit{font-size:calc(26px*var(--fs-big))}
  .rank-jp{font-size:max(var(--fs-min),calc(13px*var(--fs)))}
  .console-body{flex-wrap:wrap;gap:7px;padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px))}
  .slider-group{order:-1;flex:1 1 100%}
  .cbtn{padding:9px 12px;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
  .cbtn kbd{display:none}
  .ico{width:36px;height:36px;font-size:max(var(--fs-min),calc(14px*var(--fs)))}
  .notify{font-size:max(var(--fs-min),calc(17px*var(--fs)));padding:10px 22px}
}

/* 設定：文字の大きさ・揺れ・画質・省電力の段
   2026-09-24 オーナー「表示のバランスがおかしいです。無駄に大きいサイズなものが多すぎ」。
   折り返すと「小」だけが 1 行を占めて、残りが次の行…と段がばらけていた。
   選択肢は折り返さず、同じ幅で 1 行に並べる。ボタンの高さも設定の窓だけ少し詰める */
/* 設定の段は、どれも「左に名前（同じ幅）・右に同じ幅の 4 マス」の格子にし、ボタンの大きさを全部そろえる
   （2026-09-25 オーナー「設定と遊び方のボタンサイズがバラバラなのが気になります」。段ごとに名前の長さと数が違い、
   幅も高さもばらばらだった）。3 つの段は右の 1 マスが空く */
.cfg-row.fs-row{display:grid;grid-template-columns:6.3em repeat(4,minmax(0,1fr));align-items:center;gap:6px}
.cfg-row.fs-row .cfg-lbl{grid-column:1}
/* 音の段：［音あり］［BGM］は 2 マスずつ、［音を立て直す］は次の行に 4 マスぶん */
.cfg-row.snd-row #btnMute,.cfg-row.snd-row #btnBgm{grid-column:span 2}
.cfg-row.snd-row .cfg-wide{grid-column:2 / span 4}
/* スマホ：名前はボタンの上の行に。ボタンは横いっぱいの 4 マス（名前の欄に幅を取られて 47px しかなかった） */
@media (max-width:560px){
  .cfg-row.fs-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:3px;margin:10px 0}
  .cfg-row.fs-row .cfg-lbl{grid-column:1 / -1;margin:0}
  .cfg-row.snd-row .cfg-wide{grid-column:1 / -1}
}
.cfg-row.fs-row .cbtn,html.panel2 .cfg-row.fs-row .cbtn{height:36px;min-height:36px;padding:0 4px!important;min-width:0;width:100%;
  font-size:max(var(--fs-min),min(13px,calc(11.5px*var(--fs))));line-height:1.1;letter-spacing:0;white-space:nowrap}
.cfg-row.fs-row .cbtn > span{overflow:hidden;text-overflow:clip}
.cfg-row.fs-row .cfg-lbl{flex:0 1 auto;min-width:0;white-space:nowrap;color:#cbbf9f;font-weight:800;
  font-size:max(var(--fs-min),calc(11.5px*var(--fs)));margin-right:2px}
/* html.panel2 .cbtn{min-width:132px} が後ろにあるので、クラス3つで上書きする（これが無いと縮まず、
   「大」「軽量」が窓の外へはみ出していた） */
.cfg-row.fs-row .cbtn{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;
  font-size:max(var(--fs-min),calc(11.5px*var(--fs)));letter-spacing:0}
.cfg-row .cbtn{padding-top:7px;padding-bottom:7px}
/* 選んでいる物は、「音あり」と同じ光る金のボタンにする。細い縁の色だけだと、絵のボタン（border-image）の上では
   まったく見分けられなかった（2026-09-25 オーナー「どの設定がアクティブなのかわからんです」） */
.fs-btn.on,.cfg-row .cbtn.fs-btn.on,html.panel2 .cfg-row .cbtn.fs-btn.on{
  border-image-source:url(../assets/sys/ui_btn_on.webp);background:none;
  color:#2c1702;text-shadow:0 1px 0 rgba(255,236,180,.55);font-weight:900;
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 16px rgba(255,190,60,.45)}

/* ---------------- 航海メニューのボタン（操作卓の右端に大きく・2026-09-12） ---------------- */
.console-body .ico.hub-big{
  margin-left:auto;flex:none;flex-direction:column;gap:1px;
  width:62px;height:62px;margin-top:-20px;border-radius:50%;
  font-size:max(var(--fs-min),calc(24px*var(--fs)));line-height:1;color:#fff3cf;
  background:radial-gradient(circle at 40% 30%,#c79a3c 0%,#8a6418 45%,#4a3208 100%);
  border:2px solid #ffe29a;
  box-shadow:0 0 0 3px rgba(40,26,8,.9),0 0 18px rgba(255,205,90,.55),0 4px 10px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.3);
  animation:hubGlow 2.6s ease-in-out infinite;
}
.console-body .ico.hub-big:hover{background:radial-gradient(circle at 40% 30%,#dcb050 0%,#9c741f 45%,#5a3e0c 100%);transform:translateY(-2px)}
.hub-lbl{font-size:max(var(--fs-min),calc(10px*var(--fs)));font-weight:900;letter-spacing:.12em;color:#fff3cf;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.console-body .ico.hub-big .badge{top:-2px;right:-2px}
@keyframes hubGlow{0%,100%{box-shadow:0 0 0 3px rgba(40,26,8,.9),0 0 14px rgba(255,205,90,.4),0 4px 10px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 0 0 3px rgba(40,26,8,.9),0 0 26px rgba(255,205,90,.75),0 4px 10px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.3)}}
@media (max-width:820px){
  .console-body .ico.hub-big{width:56px;height:56px;margin-top:-16px;font-size:max(var(--fs-min),calc(21px*var(--fs)))}
}

/* ---------------- 台と操作盤の絵（ASSET_PROMPTS 7.10・2026-09-12） ----------------
   操作盤・ボタンは、四隅だけに飾りのある絵を 9 分割で貼る（border-image。どの横幅でも隅の飾りが歪まない）。
   切り分けの幅 190 は、隅の宝石と唐草が収まる大きさを絵の画素で測った値（絵を差し替えたら測り直す）。
   上の札は唐草が絵の高さいっぱいまであり 9 分割にすると同じ飾りが並ぶので、札の形に近い絵をそのまま伸ばして貼る */
.console-body{
  background:none;border:1px solid transparent;border-bottom:none;
  border-image-source:url(../assets/sys/ui_panel_console.webp);
  border-image-slice:126.7 fill;border-image-width:18px 18px 0 18px;border-image-repeat:round stretch;
  box-shadow:0 -8px 30px rgba(0,0,0,.6);
}
.cbtn{
  background:none;border:1px solid transparent;
  border-image:url(../assets/sys/ui_btn.webp) 126.7 fill / 10px / 0 round stretch;
  box-shadow:0 3px 8px rgba(0,0,0,.45);
  padding:9px 16px;text-shadow:0 1px 2px rgba(0,0,0,.85);
}
.cbtn:hover{background:none;filter:brightness(1.14)}
/* 光るボタン（投入・オートのオン）は真ん中が明るい金なので、文字は濃い茶 */
.cbtn.main,.cbtn.auto.on{
  background:none;border-image-source:url(../assets/sys/ui_btn_on.webp);
  color:#2c1702;text-shadow:0 1px 0 rgba(255,236,180,.55);
}
.cbtn.main{box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 18px rgba(255,190,60,.28)}
.cbtn.main:hover,.cbtn.danger:hover{background:none}
.cbtn.auto.on{box-shadow:0 0 18px rgba(60,220,150,.55),0 3px 8px rgba(0,0,0,.45)}
/* 小さなアイコンのボタン・航海のボタンは正方形の絵なので、そのまま貼る */
.ico{
  background:url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat;
  border:none;box-shadow:none;
}
.ico:hover{background:url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat;filter:brightness(1.15)}
/* 航海：舷窓の輪（外の 8 つの握り）は丸いボタンより一回り大きく、::before で外へはみ出して描く。
   isolation で重なりの箱を作らないと、z-index:-1 の輪が操作盤の板の後ろに回って見えなくなる */
.console-body .ico.hub-big{
  background:none;border:none;box-shadow:none;isolation:isolate;
  animation:hubGlow2 2.6s ease-in-out infinite;
}
.console-body .ico.hub-big::before{
  content:'';position:absolute;inset:-9px;z-index:-1;
  background:url(../assets/sys/ui_btn_hub.webp) center/100% 100% no-repeat;
}
.console-body .ico.hub-big:hover{background:none;filter:brightness(1.12)}
@keyframes hubGlow2{0%,100%{filter:drop-shadow(0 0 4px rgba(255,205,90,.35)) drop-shadow(0 3px 5px rgba(0,0,0,.6))}
  50%{filter:drop-shadow(0 0 11px rgba(255,205,90,.75)) drop-shadow(0 3px 5px rgba(0,0,0,.6))}}
/* 上の札も 9 分割。そのまま伸ばすと札（縦横 2.1:1）が絵（3:1）より縦長なので枠が太くなり、下の行（Deckhand の経験値）に掛かった。
   隅の唐草は絵の高さの半分近く（縦 250・横 260px）まであるので、切り分けをそこまで取り、真ん中の平らな縁だけを伸ばす */
.plate{
  background:none;border:1px solid transparent;backdrop-filter:none;box-shadow:0 8px 26px rgba(0,0,0,.6);
  border-image:url(../assets/sys/ui_plate_hud.webp) 166.7 173.3 fill / 16px 17px / 0 round stretch;
  padding:11px 19px 12px;
}
.plate::after{display:none}

/* ---------------- スクロールのお知らせ（js/scrollhint.js・2026-09-12） ---------------- */
.scroll-hints{position:fixed;left:0;top:0;width:0;height:0;z-index:9999;pointer-events:none}
.scroll-hints .sh{
  position:fixed;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:rgba(20,14,6,.82);border:1px solid rgba(255,226,154,.75);
  box-shadow:0 0 10px rgba(255,205,90,.45);
}
.scroll-hints .sh::before{
  content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:2px solid #ffe29a;border-bottom:2px solid #ffe29a;
}
.scroll-hints .sh.dn::before{transform:translate(-50%,-70%) rotate(45deg)}
.scroll-hints .sh.up::before{transform:translate(-50%,-25%) rotate(-135deg)}
.scroll-hints .sh.rt::before{transform:translate(-70%,-50%) rotate(-45deg)}
.scroll-hints .sh.lt::before{transform:translate(-25%,-50%) rotate(135deg)}
.scroll-hints .sh.dn{animation:shDn 1s ease-in-out infinite}
.scroll-hints .sh.up{animation:shUp 1s ease-in-out infinite}
.scroll-hints .sh.rt{animation:shRt 1s ease-in-out infinite}
.scroll-hints .sh.lt{animation:shLt 1s ease-in-out infinite}
@keyframes shDn{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes shUp{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
@keyframes shRt{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes shLt{0%,100%{transform:translateX(3px)}50%{transform:translateX(-3px)}}

/* ---------------- 窓の右上の × （2026-09-12） ----------------
   下の大きな「閉じる」は横画面で場所を取りすぎたので、右上の × に替えた。
   モーダルの箱ごとスクロールする窓では、スクロールしても × が上に残るよう sticky にする */
.modal-box{position:relative}
/* 置き方（2026-09-12 調整）：丸の中心を見出しの文字の中心に、丸の右端を見出しの下線の右端にそろえる＝上から・右から 23px。
   以前は上 23px・右 11px で下に寄って見え、航海メニュー（.sys-box）は上 13px で見出しより 10px 上だった（実測）。
   × は文字だと書体の都合で 2px 下にずれたので、線 2 本（::before / ::after）で描いて丸の真ん中に置く */
.x-close{
  /* 下の余白を −37px にして、丸が場所を取らないようにする（取ると見出しが丸の手前で縮み、下線が丸の 46px 手前で切れた） */
  float:right;position:sticky;top:3px;z-index:5;margin:3px 1px -37px 12px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-family:inherit;padding:0;
  display:block;font-size:0;line-height:0;color:#f3e2b0;
  background:linear-gradient(180deg,#4a3a22,#1e160b);border:1px solid rgba(232,194,92,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,235,190,.18);
  transition:.12s;
}
.x-close:hover{color:#fff;border-color:#ffe29a;background:linear-gradient(180deg,#5e4a2c,#2e2212)}
.x-close[hidden]{display:none}
.sys-box > .x-close{position:absolute;top:23px;right:23px;float:none;margin:0}
.modal-box > .modal-head{padding-right:46px}   /* 見出しの文字（右の英字も）が丸に掛からないように */
/* × の線（窓の × と、残るお知らせの ×） */
.x-close::before,.x-close::after,.sys-notice .sn-x::before,.sys-notice .sn-x::after{
  content:'';position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:currentColor}
.x-close::before,.sys-notice .sn-x::before{transform:rotate(45deg)}
.x-close::after,.sys-notice .sn-x::after{transform:rotate(-45deg)}
/* 大きな「閉じる」は出さない（港の「出港する」など、ほかのボタンは残す） */
.modal-box > .cbtn.wide[data-close], .cfg-row > .cbtn[data-close], .sys-foot > [data-sysclose]{display:none}
.sys-foot:has(> [data-sysclose]:only-child){display:none}

/* ---------------- クレジット（js/credits.js・2026-09-12） ---------------- */
#creditModal{z-index:110}   /* 起動画面（z-index 100）から開いた時も上に出す */
.credit-body h3{margin-top:12px}
.credit-body h3:first-child{margin-top:0}
/* 左の列は幅を決めて折り返す（中身に合わせると「そのほか」の長い項目名で左の列が広がり、右が細く折れた） */
.credit-list{display:grid;grid-template-columns:10em 1fr;gap:5px 14px;margin:4px 0 8px;
  font-size:max(var(--fs-min),calc(12px*var(--fs)));line-height:1.6}
/* 名前の途中で折り返さない（「DOVA-／SYNDROME」「株式会社／しくみデザイン」と切れて読みにくかった）。
   入手先は名前の後ろに並べず、名前の下に小さく出す */
.credit-list dt{color:#c9ba90;word-break:keep-all;overflow-wrap:anywhere}
.credit-list dd{margin:0;color:#e6d9b5;word-break:keep-all;overflow-wrap:anywhere}
.credit-list .who{display:block}
.credit-list a{color:#ffd98a;text-decoration:underline;text-underline-offset:2px}
.credit-list .cw{display:block;color:#b7a987;font-size:.9em;line-height:1.4}
@media (max-width:480px){ .credit-list{grid-template-columns:1fr} .credit-list dt{margin-top:4px} }
.boot-credit{margin-top:14px;appearance:none;cursor:pointer;font-family:inherit;
  background:none;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:4px 16px;
  color:#8f9ab0;font-size:max(var(--fs-min),calc(11px*var(--fs)));letter-spacing:.1em}
.boot-credit:hover{color:#dfe6ee;border-color:rgba(255,255,255,.4)}

/* ---------------- メニュー・窓の枠の絵（ui_panel_modal・ASSET_PROMPTS 7.10・2026-09-12） ----------------
   四隅だけに飾りのある枠を 9 分割で貼る。切り分け 230 は隅の唐草と宝石が収まる大きさを絵の画素で測った値。
   枠は箱の外へ 8px はみ出して描き（outset）、中身の並びは変えない。隅の飾りが題名に掛からないよう余白を 6px 足し、
   右上の × も同じだけ内へ（題名の中心に合わせた位置を保つ） */
.modal-box{
  background:#150f08;border:1px solid transparent;
  border-image:url(../assets/sys/ui_panel_modal.webp) 230 fill / 30px / 8px round;
  padding:26px 28px;
}
.sys-box > .x-close{top:29px;right:29px}

/* ---------------- 操作盤のアイコン（ui_ico_*・ASSET_PROMPTS 7.11・2026-09-13） ----------------
   絵文字の代わりに、描いたアイコンを真鍮のボタン（ui_btn_icon）の上に重ねる。id の指定なので .ico:hover より強く、乗せても消えない。
   絵文字の文字は大きさ 0 で隠す（数の札 .badge は自分で 10px を持っているので消えない） */
#btnSkill,#btnStats,#btnPay,#btnLog,#btnCfg,#btnChara{font-size:0}
#btnSkill{background:url(../assets/sys/ui_ico_skill.webp) center/68% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
#btnStats{background:url(../assets/sys/ui_ico_stats.webp) center/68% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
#btnPay{background:url(../assets/sys/ui_ico_pay.webp) center/68% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
#btnLog{background:url(../assets/sys/ui_ico_log.webp) center/68% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
#btnCfg{background:url(../assets/sys/ui_ico_cfg.webp) center/68% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
#btnChara{background:url(../assets/sys/ui_ico_chara.webp) center/68% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
/* 航海のボタンの錨（ui_ico_anchor）：絵文字 ⚓ を大きさ 0 で隠し、錨の絵を青いエナメルの上に置く。「航海」の字は下へ */
.console-body .ico.hub-big{font-size:0;justify-content:flex-end;padding-bottom:8px;
  background:url(../assets/sys/ui_ico_anchor.webp) center 30%/50% no-repeat}
.console-body .ico.hub-big:hover{background:url(../assets/sys/ui_ico_anchor.webp) center 30%/50% no-repeat}

/* ---------------- タイトル画面の絵（ui_boot_bg / ui_boot_crest・ASSET_PROMPTS 7.11・2026-09-13） ----------------
   背景は夕日の港を出る船の絵。題名と文字の後ろだけ暗くして読めるようにする。紋章は絵文字 ⚓ の代わり。
   「出航する」は光る真鍮のボタン（ui_btn_on）で、真ん中が明るい金なので文字は濃い茶 */
.boot{
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(4,7,12,.72) 0%, rgba(4,7,12,.45) 60%, rgba(4,7,12,.25) 100%),
    url(../assets/sys/ui_boot_bg.webp) center/cover no-repeat, #04070c;
}
.boot-crest{font-size:0;width:112px;height:150px;margin:0 auto 4px;
  background:url(../assets/sys/ui_boot_crest.webp) center/contain no-repeat}
.boot-sub{color:#c9bfa6;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.boot-note,.boot-txt{color:#b9ae94;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.btn.start{
  background:none;border:1px solid transparent;
  border-image:url(../assets/sys/ui_btn_on.webp) 126.7 fill / 14px / 0 round stretch;
  color:#2c1702;text-shadow:0 1px 0 rgba(255,236,180,.55);
}

/* ---------------- 大きなお知らせの札（ui_banner_notify・ASSET_PROMPTS 7.11・2026-09-13） ----------------
   札の両端（左右 265px：宝石・唐草・上下の飾り玉）はそのまま、上下の縁は並べて横に伸ばす（9 分割）。
   絵の上下は飾り玉の分だけ透明なので（上 88px・下 87px）、その分は箱の外へ出して（outset 18px）縁を箱の上下にそろえる */
.notify{
  background:none;border:1px solid transparent;border-radius:0;
  border-image:url(../assets/sys/ui_banner_notify.webp) 100 176.7 fill / 31px 54px / 18px 10px round stretch;
  padding:12px 66px;
}
/* 錨は輪と同じ ::before に重ねる（ボタン自身の背景に置くと、isolation で作った重なりの中で z-index:-1 の輪の下になって見えなかった） */
.console-body .ico.hub-big,.console-body .ico.hub-big:hover{background:none}
.console-body .ico.hub-big::before{
  background:url(../assets/sys/ui_ico_anchor.webp) center 37%/44% no-repeat,url(../assets/sys/ui_btn_hub.webp) center/100% 100% no-repeat}
/* タイトル画面：題名と英字の後ろ（明るい帆の上）をもっと暗くする */
.boot{
  background:
    radial-gradient(ellipse 72% 50% at 50% 48%, rgba(4,7,12,.84) 0%, rgba(4,7,12,.62) 55%, rgba(4,7,12,.3) 100%),
    url(../assets/sys/ui_boot_bg.webp) center/cover no-repeat, #04070c;
}
/* タイトル画面の英字と注意書き：明るい帆の上でも読めるよう、濃い縁取りの影を付け、字間を詰めて 1 行に収める */
.boot-sub{color:#f3e6c2;letter-spacing:.14em;
  text-shadow:0 0 4px #000,0 0 10px rgba(0,0,0,.95),0 1px 2px #000}
.boot-note,.boot-txt{color:#e6dbc0;text-shadow:0 0 4px #000,0 0 10px rgba(0,0,0,.95),0 1px 2px #000}
/* 英字は前半・後半をそれぞれ 1 まとまりにし、狭い画面では「·」の所だけで折り返す（字の間で切れて「PUS / HER」になった） */
.boot-sub span{display:inline-block;white-space:nowrap}
/* 題名「Age of Doubloons」と副題（2026-09-13 改題。旧「Age of Doubloons」）。英字は古風な書体（iPhone・Mac にある Baskerville。無ければ明朝）、
   副題は明朝で少し大きく。狭い画面では「を」の後だけで折り返す */
/* 題名はロゴの絵（ui_boot_logo・ASSET_PROMPTS 7.14）。文字は読み上げ用に残して見えなくする（大きさ 0）。
   h1 の金のグラデーション（文字の形で切り抜く）を解いてから絵を貼る。影は絵に無いので CSS で付ける */
.boot h1.boot-title{width:min(90vw,560px);aspect-ratio:1536/649;margin:0 auto;
  font-size:0;color:transparent;text-shadow:none;
  background:url(../assets/sys/ui_boot_logo.webp) center/contain no-repeat;
  -webkit-background-clip:border-box;background-clip:border-box;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.75))}
/* ロゴの金貨の「o」（左から 24%・上から 57%）が、ときどきキラッと光る（4.2 秒ごと） */
.boot h1.boot-title{position:relative}
.boot h1.boot-title::after{content:"";position:absolute;left:22.5%;top:50%;width:15%;aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(circle,rgba(255,255,240,.95) 0 5%,rgba(255,240,180,.5) 13%,rgba(255,220,120,0) 38%),
    linear-gradient(90deg,transparent 48%,rgba(255,250,220,.85) 50%,transparent 52%),
    linear-gradient(0deg,transparent 48%,rgba(255,250,220,.85) 50%,transparent 52%);
  -webkit-mask:radial-gradient(circle,#000 0 30%,transparent 50%);mask:radial-gradient(circle,#000 0 30%,transparent 50%);
  animation:dblGlint 4.2s ease-in-out 1.2s infinite}
@keyframes dblGlint{
  0%,80%,100%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}
  86%{transform:translate(-50%,-50%) scale(1) rotate(20deg);opacity:1}
  93%{transform:translate(-50%,-50%) scale(.35) rotate(45deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.boot h1.boot-title::after{animation:none}}
/* タイトル画面：これまでに手に入れたダブロン金貨の枚数（1 枚以上の時だけ出す） */
.boot-dbl{display:inline-flex;align-items:center;gap:6px;margin:-18px auto 18px;color:#f3e6c2;
  font-size:max(var(--fs-min),calc(12px*var(--fs)));letter-spacing:.08em;text-shadow:0 0 4px #000,0 0 10px rgba(0,0,0,.95)}
.boot-dbl b{color:#ffd24a;font-size:1.15em}
.boot-dbl i{display:inline-block;width:1.5em;height:1.5em;background:url(../assets/sys/coin_doubloon_obv.webp) center/contain no-repeat}
.boot-sub.boot-tag{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;letter-spacing:.12em;
  font-size:max(var(--fs-min),calc(14px*var(--fs)))}
/* タイトル画面の「画質」（高画質／標準／軽量。⚙ 設定にも同じボタン。2026-09-13） */
.boot-gfx{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:16px}
.boot-gfx-lbl{color:#f3e6c2;font-weight:800;letter-spacing:.1em;margin-right:4px;
  font-size:max(var(--fs-min),calc(12px*var(--fs)));text-shadow:0 0 4px #000,0 0 10px rgba(0,0,0,.95)}
.boot-gfx .gfx-btn{appearance:none;cursor:pointer;font-family:inherit;font-weight:700;
  background:rgba(8,6,3,.62);border:1px solid rgba(255,225,140,.35);border-radius:8px;padding:6px 14px;
  color:#e6dbc0;font-size:max(var(--fs-min),calc(12px*var(--fs)));letter-spacing:.06em}
.boot-gfx .gfx-btn.on{border-color:#ffe9a8;background:rgba(90,62,14,.82);color:#fff4d0;
  box-shadow:0 0 0 1px #ffe9a8 inset,0 0 12px rgba(255,210,100,.45)}
.boot-hint{font-size:max(var(--fs-min),calc(10px*var(--fs)));margin-top:8px;letter-spacing:.06em;
  color:#e6dbc0;text-shadow:0 0 4px #000,0 0 10px rgba(0,0,0,.95),0 1px 2px #000}
.boot-hint span{display:inline-block;white-space:nowrap}   /* 折り返すのは「に」と「（」の間だけ */

/* ---------------- 上の札・航海の帯を透かす（2026-09-13 オーナー「背景を透過させたら文字も見やすいし後ろの帆とかも見やすくなる」） ----------------
   枠の絵はそのまま、真ん中の地（border-image の fill）をやめて薄い影だけにし、後ろの帆・旗・空を透かして見せる。
   文字は濃い影で縁取って、明るい空や白い帆の上でも読めるようにする */
.plate{
  border-image:url(../assets/sys/ui_plate_hud.webp) 166.7 173.3 / 16px 17px / 0 round stretch;
  background:rgba(14,9,4,.30);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.plate .pl-cap,.plate .pl-sub,.plate .lv,.plate .rank-jp,.plate .sq-title-hud{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.85)}
.plate .pl-credit{text-shadow:0 0 16px rgba(255,205,90,.5),0 1px 2px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.85)}
/* 上の 2 つの窓（所持メダル・階級）は、文字の大きさの設定で大きくしない（2026-09-13 オーナー「文字のサイズを変えると上の窓が重なる。
   元々大きい文字は大きくする必要ない」）。窓の中だけ、文字の大きさの変数を「中」の値に戻す */
.plate{--fs:1.2;--fs-big:1.06;--fs-min:12px}
/* 窓の中の文字は折り返さない（入りきらない時だけ末尾を「…」）。狭い画面では左右の窓の幅を、画面の半分より少し狭く固定して重ならないようにする */
.plate .pl-cap,.plate .rank-jp,.plate .sq-title-hud,.plate .pl-sub span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate .rank-line,.plate .rank-jp,.plate .pl-sub span{min-width:0}
.plate .pl-credit,.plate .pl-dbl{white-space:nowrap}
.plate .pl-dbl .dbl-next{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){
  .plate.tl,.plate.tr{box-sizing:border-box;width:calc(50% - 22px);min-width:0}
  /* 狭い窓：英語の階級名（Deckhand など）は出さず、経験値だけを右に（日本語の階級名はすぐ上にある）。
     入れたままだと「Deck… 1,117 / …」と両方が切れた */
  .plate #rankEn{display:none}
  .plate .pl-sub{justify-content:flex-end}
  .plate .pl-dbl{gap:5px}
}
.vy-bar.vy-bar{
  background:rgba(14,9,4,.32);box-shadow:0 4px 14px rgba(0,0,0,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.8);
}
/* 透かした札の上では、薄い色の小さな文字（経験値の行）と地の無いボタン（出港）が明るい空に溶けて読みにくかったので、
   文字を明るくし、地の無いボタンに薄い影の地を付ける（画像を重ねた金色のボタンはそのまま） */
.plate .pl-sub{color:#e2d3aa}
.vy-bar.vy-bar .vy-hbtn{background-color:rgba(14,9,4,.5)}

/* 矢印は押せる（押すと端まで送る。2026-09-16 オーナー）。指で押しやすいよう、当たり判定を丸の外へ広げる */
.scroll-hints .sh{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scroll-hints .sh::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
.scroll-hints .sh:active{filter:brightness(1.3)}
/* 下にボタンがある間は押せない（scrollhint.js overButton）。見た目も少し薄くして、ボタンの文字を読めるようにする */
.scroll-hints .sh.pass{pointer-events:none;opacity:.55}

/* ---------------- ホーム画面版とブラウザ版で、操作盤の下の余白を変える（2026-09-16 オーナー） ----------------
   ホーム画面版（pwa）：画面の下のバーの分（env）だけでよい。足しすぎると余白が空いて見える
   ブラウザ版（inbrowser）：アドレスバーに近いので、指がかりの余白を少し多めに取る */
html.pwa .console-body{padding-bottom:calc(2px + env(safe-area-inset-bottom, 0px))}
html.inbrowser .console-body{padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}

/* 引き継ぎコード（js/transfer.js・2026-09-16）：長い文字を貼り付ける箱 */
.xf-area{width:100%;box-sizing:border-box;resize:vertical;font:12px/1.4 "SF Mono",Menlo,monospace;
  color:#f1e4c0;background:rgba(10,7,3,.75);border:1px solid rgba(232,194,92,.5);border-radius:8px;padding:8px;word-break:break-all}
.xf-note{font-size:max(var(--fs-min),calc(12.5px*var(--fs)));line-height:1.6;color:#eadfbf;margin:0 0 8px}
.xf-sub{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#c4b795;margin:6px 0 0}
.xf-err{margin-top:8px;font-size:max(var(--fs-min),calc(12px*var(--fs)));line-height:1.6;color:#ffb39a;min-height:1em}
/* 設定の下に小さく出す確認用の数字（開き方・画面の下の余白・高さ） */
.cfg-diag{margin:10px 2px 0;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#9d916f;letter-spacing:.02em}

/* 長いお知らせは折り返す。画面の幅に収める（「積荷がいっぱい（売るか捨てると空きます）」が左右にはみ出した。2026-09-16 オーナー） */
/* left:50% から右へ伸びるため、指定しないと幅が半分までしか取れない。max-content で内容の幅を取り、画面幅で止める */
.notify{white-space:normal;width:max-content;max-width:min(88vw,560px);text-align:center;line-height:1.4;box-sizing:border-box;word-break:keep-all;overflow-wrap:break-word}
.notify .nw{white-space:nowrap}
/* 日本語は語の切れ目（js/util.js autoWrap が入れる <wbr>）だけで折る。1 語が長すぎる時だけ語の途中で折る */
html.jw body{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
html.jw .nw{white-space:nowrap}
@media (max-width:480px){
  .notify{padding-left:62px;padding-right:62px;font-size:calc(19px*var(--fs-big))}   /* 9/19 オーナー「文字の左右にスペースがない」：両端の飾り（54px）の内側に 8px 空ける */
  .notify.jp{font-size:calc(23px*var(--fs-big))}
  .notify.sjp{font-size:calc(26px*var(--fs-big))}
}

/* お知らせの閉じるボタン（2026-09-26）：右上の角に丸いボタン。お知らせは右上の残る札（z 55）・入港の札（58）より上、窓（60）より下に出す
   （札の下に隠れて押せないことがないように） */
.notify{z-index:59}
.notify .nt-x{position:absolute;top:-12px;right:-8px;width:32px;height:32px;border-radius:50%;padding:0;cursor:pointer;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#4a3a22,#1a130a 70%);border:2px solid #d9b45c;box-shadow:0 2px 6px rgba(0,0,0,.6);z-index:2}
.notify.show .nt-x{pointer-events:auto}
.notify .nt-x::before,.notify .nt-x::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2.5px;border-radius:2px;background:#ffe7b0;
  transform:translate(-50%,-50%) rotate(45deg)}
.notify .nt-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.notify.mini .nt-x{top:-10px;right:-10px;width:24px;height:24px;border-width:1.5px}
.notify.mini .nt-x::before,.notify.mini .nt-x::after{width:10px;height:2px}
.notify .nt-x:focus-visible{outline:2px solid #ffe7b0}

/* 小さいお知らせ（資材箱の中身。2026-09-25 要望127）：飾りの札を使わず、細い丸い帯で短く出す */
.notify.mini,html .notify.mini{border-image:none;border:1px solid rgba(255,209,102,.55);border-radius:999px;
  background:rgba(14,11,6,.82);padding:5px 16px;font-size:max(var(--fs-min),calc(14px*var(--fs)));
  letter-spacing:.02em;text-shadow:none;box-shadow:0 2px 8px rgba(0,0,0,.45);color:#ffeab8}

/* 翔の報告 7・10・11（2026-09-18）
   7：題名の横の小さな字（海域名など）は［×］の手前で止め、長い時は「…」で切る
   10：長い窓を下へ送った時、題名の行ごと上に残す（［×］だけが残って本文の文字に重なっていた）
   11：配当表の役の名前は 1 行に（絵柄の下の行に落ちていた） */
.modal-head .sp-left{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:42px}
.modal-head .sp-left.hide{display:none}   /* 横が足りない端末では、題名の横の小さな字を出さない */
.modal-box > .x-close{position:absolute;top:18px;right:18px;float:none;margin:0}   /* 本文と一緒に上へ流す */
.modal-head h2.long{font-size:max(var(--fs-min),calc(15px*var(--fs)))}
.pay td:first-child{white-space:nowrap;font-size:max(var(--fs-min),calc(11.5px*var(--fs)))}
.pay .psym{flex:0 0 auto}
.pay td.p{font-size:max(var(--fs-min),calc(11px*var(--fs)))}

/* 設定の見出しの build 番号は切らない（9/19 巡回：iPhone の幅で「build 3…」になっていた）。見出しの方を詰める */
#buildTag{flex-shrink:0;overflow:visible;text-overflow:clip}

/* 港の大きなボタン（9/19）：航海の左に同じ大きさで。家並みの絵を輪の中に。航海の方は左の余白を詰める */
.console-body .ico.hub-big.hub-port::before{
  background:url(../assets/sys/ui_ico_port.webp) center 37%/50% no-repeat,url(../assets/sys/ui_btn_hub.webp) center/100% 100% no-repeat}
html.has-portbig .console-body #btnHub.hub-big{margin-left:14px}
.console-body .ico.hub-big.hub-port.off{filter:grayscale(.7) brightness(.75)}
.console-body .ico.hub-big.hub-port{animation:none}
/* 2 つ並べると、輪（::before の -9px）が上の段のボタン（オート投入）に重なった。並べる時は上へはみ出さず、少しだけ小さく */
html.has-portbig .console-body .ico.hub-big{margin-top:6px;width:52px;height:52px}
html.has-portbig .console-body .ico.hub-big .hub-lbl{font-size:max(var(--fs-min),calc(10px*var(--fs)))}
#btnPortBig .badge:empty,#btnPortBig .badge:not(.has){display:none}

/* タイトル画面：音を出すかの確認（2026-09-22 オーナー「タイトル画面から始める前に音を出すか聞く」） */
.boot-snd{margin:10px auto 2px;max-width:min(92vw,380px);background:rgba(10,16,24,.55);
  border:1px solid rgba(199,154,66,.55);border-radius:12px;padding:12px 14px}
.boot-snd[hidden]{display:none}
.boot-snd .bs-q{color:#ffe8a8;font-weight:800;font-size:max(var(--fs-min),calc(14px*var(--fs)));margin-bottom:9px}
.boot-snd .bs-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.boot-snd .bs-btns .cbtn{min-width:132px}
.boot-snd .bs-never{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:10px;
  color:#c9bda0;font-size:max(var(--fs-min),calc(11.5px*var(--fs)))}
.boot-snd .bs-note{margin-top:8px;color:#a2937a;font-size:max(var(--fs-min),calc(11px*var(--fs)));line-height:1.7}
.boot-snd .bs-note b{color:#d9c48e}

/* タイトル画面：公式サイトへ戻る（2026-09-22 オーナー「タイトル画面にホームページに戻るボタン」） */
.boot-links{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px}
.boot-home{color:#d9c48e;font-size:max(var(--fs-min),calc(12px*var(--fs)));text-decoration:none;
  border:1px solid rgba(199,154,66,.5);border-radius:999px;padding:6px 14px;background:rgba(10,16,24,.4)}
.boot-home:hover{color:#ffe8a8;border-color:rgba(199,154,66,.9)}

/* タイトル画面の並び（2026-09-22 オーナー「ダブロン金貨の枚数と出航するボタンが並んでしまっています」）。
   金貨の枚数は inline-flex で、横幅の広い画面では［出航する］と同じ行に並んでいた → 1 行を占めるようにする。
   ［公式サイトへ］と［クレジット］は高さと上の余白をそろえる */
.boot-dbl{display:flex;width:fit-content;margin:-10px auto 14px}
.boot-dbl[hidden]{display:none}
.boot-links .boot-credit{margin-top:0;padding:6px 14px;font-size:max(var(--fs-min),calc(12px*var(--fs)));line-height:1.5}
.boot-links .boot-home{line-height:1.5}

/* 音の確認は小さく（2026-09-22 オーナー「タイトルの音量の確認はもっと小さくて良いです」） */
.boot-snd{max-width:min(88vw,300px);padding:8px 10px;margin:8px auto 0;border-radius:10px}
.boot-snd .bs-q{font-size:max(var(--fs-min),calc(12px*var(--fs)));margin-bottom:6px}
.boot-snd .bs-btns{gap:6px}
.boot-snd .bs-btns .cbtn{min-width:0;padding:5px 12px;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.boot-snd .bs-never{margin-top:6px;font-size:max(var(--fs-min),calc(10.5px*var(--fs)))}
.boot-snd .bs-note{margin-top:4px;font-size:max(var(--fs-min),calc(10px*var(--fs)));line-height:1.5}
.boot-snd .bs-note{display:none}     /* 下の「※ iPhone はマナーモード中は鳴りません」と同じなので出さない */

/* 省電力の説明（2026-09-22） */
.cfg-note{color:#a9b4c2;font-size:max(var(--fs-min),calc(11px*var(--fs)));line-height:1.6;margin:-2px 0 8px;padding:0 4px}
.cfg-diag[hidden]{display:none}
/* 省電力の段：ラベルが長い分、ボタンを少し詰めて 1 行に収める（2026-09-22） */
.cfg-row.eco-row .eco-btn{min-width:0;flex:1 1 0;padding-left:6px;padding-right:6px;white-space:nowrap}

/* ================= 横向きのスマホなど、背の低い画面（高さ 520px 以下）＝2026-09-22 表示の点検 =================
   844×390 で、窓の見出しと下のボタンに高さを取られて中身が 100〜150px しか見えなかった。航海メニューのタブは 2 段で、さらに狭い。
   タイトルは音の確認が画面の下で切れていた */
@media (max-height:520px) and (orientation:landscape){
  /* 窓：縁の飾りと余白を詰め、ほぼ画面いっぱいに */
  .modal-box{max-height:96vh;padding:12px 18px}
  .sys-box > .x-close{top:10px;right:14px}
  .modal-head{margin-bottom:4px}
  .modal-head h2{font-size:max(var(--fs-min),calc(15px*var(--fs)))}
  .sys-foot{margin-top:6px}
  .sys-foot .cbtn{min-height:0;padding-top:5px;padding-bottom:5px}
  /* 航海メニューのタブ：1 段に並べて横にすべらせる */
  .sys-box .sys-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-bottom:6px;padding-top:4px;padding-bottom:6px}
  .sys-box .sys-tabs::-webkit-scrollbar{display:none}
  .sys-box .sys-tab{flex:0 0 auto;padding:4px 9px}
  /* タイトル：縦に積むと入らないので、全体をすべらせられるようにして、飾りを小さく */
  .boot{align-items:flex-start;overflow-y:auto}
  .boot-inner{padding:8px 16px 14px}
  .boot .boot-crest{display:none}
  .boot h1.boot-title{width:min(44vw,300px)}
  .boot .boot-sub{margin-top:0;margin-bottom:6px}
}
/* タイトルの［クレジット］：文字が空の色に溶けて読みにくかったので、［公式サイトへ］と同じ見た目に（2026-09-22） */
.boot-links .boot-credit{color:#d9c48e;border:1px solid rgba(199,154,66,.5);background:rgba(10,16,24,.4);letter-spacing:.04em}
.boot-links .boot-credit:hover{color:#ffe8a8;border-color:rgba(199,154,66,.9)}

/* 宣伝の動画を撮る時（?film）：知らせ・案内・上の札を出さない（2026-09-22） */
html.film #notify, html.film #guideCard, html.film .sys-notices, html.film #tutWrap,
html.film .hb-pill, html.film [class*="hb-next"], html.film .hud-pill{display:none!important}
@media (max-width:400px){
  .cfg-row.eco-row .eco-btn{padding-left:2px;padding-right:2px;font-size:max(var(--fs-min),calc(11px*var(--fs)));letter-spacing:0}
  .cfg-row.eco-row .cfg-lbl{margin-right:2px}
}
/* 幅 380px 以下では窓の見出しを詰める（幅 320 で「⚓ 沈んだ王都アトランティカ」が切れた。2026-09-22） */
@media (max-width:380px){
  .modal-head h2{letter-spacing:0}
  .modal-head h2.long{font-size:max(var(--fs-min),calc(13px*var(--fs)));white-space:normal;overflow:visible;text-overflow:clip;flex-shrink:1;line-height:1.3}
}

/* 省電力で 1 秒 30 回以下の間は、ずっと続く光の明滅を止める（影やぼかしの明滅は毎回塗り直しで熱のもと。2026-09-22。js/game.js の loop） */
html.eco-still .badge.has, html.eco-still .ch-sp.has, html.eco-still #btnHub, html.eco-still .hp-quest,
html.eco-still .vy-hbtn.glow, html.eco-still .ico.hub-big{animation-play-state:paused}
/* 窓の後ろのぼかしは、盤面が描き変わるたびに全画面をぼかし直す（重い）。省電力が「切る」以外ならぼかさず、少し濃くして見た目を合わせる（js/game.js の syncEco） */
html.eco-nb .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,7,12,.86)}
/* 幅 300px 以下（折りたたみスマホの外画面など）：窓の枠の内側の余白を詰める（幅 280 で中身が細く折れていた。2026-09-22） */
@media (max-width:300px){
  .modal-box{width:96vw;padding:24px 14px}
  .sys-box > .x-close{right:15px}
}

/* メニュー整理 案C（2026-09-22）：［まとめ投入］は［投入］の長押しへ（js/game.js）。?oldmenu で前の形 */
html.menu-c #btnDropN{display:none}
#btnDrop1 .lp-hint{display:none}
html.menu-c #btnDrop1{flex-direction:column;gap:0;line-height:1.1;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
html.menu-c #btnDrop1 .lp-hint{display:block;font-size:max(9px,calc(9.5px*var(--fs)));font-weight:600;opacity:.8;letter-spacing:0;white-space:nowrap}
html.menu-c #btnDrop1.lp{filter:brightness(1.25);box-shadow:0 0 0 2px #ffe9a8 inset,0 0 16px rgba(255,210,100,.6)}
html.menu-c #btnDrop1 kbd{display:none}

/* ダブロン・ラッシュの演出（2026-09-23 要望 27。js/sys/items.js の rushFx） */
#rushFx{position:fixed;inset:0;z-index:54;pointer-events:none;overflow:hidden}
#rushFx .rf-rays{position:absolute;left:50%;top:40%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,110,.34) 0deg 7deg,rgba(255,214,110,0) 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 12%,transparent 46%);mask:radial-gradient(circle,#000 0,#000 12%,transparent 46%);
  animation:rfSpin 6s linear infinite,rfRaysIn .35s ease-out both}
#rushFx .rf-edge{position:absolute;inset:0;box-shadow:inset 0 0 38px 10px rgba(255,190,60,.55);animation:rfEdge .5s ease-in-out infinite alternate;opacity:0;transition:opacity .4s}
#rushFx .rf-logo{position:absolute;left:50%;top:40%;width:min(86vw,440px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  animation:rfSlam .55s cubic-bezier(.2,1.6,.4,1) both;transition:top .5s ease-in-out,width .5s ease-in-out}
#rushFx .rf-logo img{width:100%;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,170,40,.6))}
#rushFx .rf-logo b{font-family:Baskerville,'Hiragino Mincho ProN',serif;font-weight:900;letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#fffbe0 0%,#ffd86a 38%,#c8861e 62%,#ffe7a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1.5px #5a2a06;filter:drop-shadow(0 3px 0 #3a1a02) drop-shadow(0 0 16px rgba(255,160,40,.75));font-size:min(11vw,52px)}
#rushFx .rf-logo .rf-big{font-size:min(19vw,92px);transform:rotate(-4deg)}
#rushFx .rf-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);
  mix-blend-mode:overlay;background-size:250% 100%;animation:rfShine 1.1s .45s ease-in-out 2 both;
  pointer-events:none}
#rushFx.rf-run .rf-rays{opacity:0;transition:opacity .5s}
#rushFx.rf-run .rf-edge{opacity:1}
#rushFx.rf-run .rf-logo{top:29%;width:min(60vw,290px)}
#rushFx.rf-out{opacity:0;transition:opacity .5s}
@keyframes rfSpin{to{transform:rotate(360deg)}}
@keyframes rfRaysIn{from{opacity:0;transform:scale(.4)}}
@keyframes rfSlam{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes rfShine{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes rfEdge{from{box-shadow:inset 0 0 26px 6px rgba(255,190,60,.4)}to{box-shadow:inset 0 0 48px 14px rgba(255,210,90,.7)}}
@media (prefers-reduced-motion:reduce){#rushFx .rf-rays,#rushFx .rf-edge,#rushFx .rf-shine{animation:none}}
/* ジャックポットチャンス（2026-09-25 要望117）。ラッシュ（#rushFx）と同じ動きで、光を青白くする */
#jcFx{position:fixed;inset:0;z-index:54;pointer-events:none;overflow:hidden}
#jcFx .rf-rays{position:absolute;left:50%;top:40%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;
  background:repeating-conic-gradient(from 0deg,rgba(150,210,255,.34) 0deg 6deg,rgba(255,226,140,.18) 6deg 9deg,rgba(150,210,255,0) 9deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 12%,transparent 46%);mask:radial-gradient(circle,#000 0,#000 12%,transparent 46%);
  animation:rfSpin 5s linear infinite,rfRaysIn .35s ease-out both}
#jcFx .rf-edge{position:absolute;inset:0;box-shadow:inset 0 0 38px 10px rgba(90,170,255,.55);animation:jcEdge .45s ease-in-out infinite alternate;opacity:0;transition:opacity .4s}
#jcFx .rf-logo{position:absolute;left:50%;top:40%;width:min(86vw,440px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  animation:rfSlam .55s cubic-bezier(.2,1.6,.4,1) both;transition:top .5s ease-in-out,width .5s ease-in-out}
#jcFx .rf-logo img{width:100%;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(110,190,255,.65))}
#jcFx .rf-logo b{font-family:Baskerville,'Hiragino Mincho ProN',serif;font-weight:900;letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#cfe8ff 38%,#3b78c8 62%,#ffe7a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1.5px #0b2250;filter:drop-shadow(0 3px 0 #06163a) drop-shadow(0 0 16px rgba(110,190,255,.8));font-size:min(11vw,52px)}
#jcFx .rf-logo .rf-big{font-size:min(16vw,80px);transform:rotate(-4deg)}
#jcFx .rf-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%);
  mix-blend-mode:overlay;background-size:250% 100%;animation:rfShine 1.1s .45s ease-in-out 2 both;pointer-events:none}
#jcFx.rf-run .rf-rays{opacity:0;transition:opacity .5s}
#jcFx.rf-run .rf-edge{opacity:1}
#jcFx.rf-run .rf-logo{top:22%;width:min(56vw,270px)}
#jcFx.rf-out{opacity:0;transition:opacity .5s}
@keyframes jcEdge{from{box-shadow:inset 0 0 26px 6px rgba(90,170,255,.4)}to{box-shadow:inset 0 0 50px 14px rgba(140,205,255,.72)}}
@media (prefers-reduced-motion:reduce){#jcFx .rf-rays,#jcFx .rf-edge,#jcFx .rf-shine{animation:none}}
@media (orientation:landscape) and (max-height:520px){#jcFx.rf-run .rf-logo{top:52%;left:84%;width:min(28vw,220px)}}
/* 横向きのスマホ：上に退くとお知らせの札と重なるので、右の町の上へ（2026-09-23） */
@media (orientation:landscape) and (max-height:520px){
  #rushFx.rf-run .rf-logo{top:52%;left:84%;width:min(28vw,220px)}
}
/* とても狭い横向き（小さい iPhone を横にした時。高さ380px以下）：操作盤を細くして盤面を広げる（2026-09-23） */
@media (orientation:landscape) and (max-height:380px){
  .console-body{gap:5px;padding:4px 8px calc(4px + env(safe-area-inset-bottom, 0px))}
  .cbtn{padding:5px 10px}
  .cbtn .lp-hint{display:none}
  .ico{width:30px;height:30px}
  .ico .lbl{font-size:max(var(--fs-min),calc(8px*var(--fs)))}
}
/* 宝箱の窓が出ている間、演出を待たせている札（2026-09-23 オーナー「保留中と分かるように」） */
#fxHold{position:fixed;left:50%;transform:translateX(-50%);top:calc(52px + env(safe-area-inset-top,0px));z-index:9000;white-space:nowrap;width:max-content;max-width:94vw;overflow:hidden;text-overflow:ellipsis;
  padding:7px 14px;border-radius:999px;border:1px solid rgba(232,194,92,.8);color:#ffe9a8;
  background:linear-gradient(180deg,rgba(40,28,12,.95),rgba(20,14,6,.95));box-shadow:0 6px 18px rgba(0,0,0,.55);
  font-size:max(var(--fs-min),calc(12px*var(--fs)));font-weight:800;letter-spacing:.04em;cursor:pointer;animation:fxHoldB 1.4s ease-in-out infinite}
#fxHold[hidden]{display:none!important}
@keyframes fxHoldB{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.55)}50%{box-shadow:0 6px 22px rgba(255,200,90,.45)}}

/* ================= 操作盤の作り直し（2026-09-23 オーナー。?oldpanel で前の形） ================= */
html.panel2 #btnDrop1{display:none!important}                 /* 1 枚ずつは盤面タップで */
html.panel2 #btnDropN{display:flex!important}                 /* まとめ投入＝［連続投入］のボタンに戻す */
html.panel2 .console-body{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;box-shadow:none;border-radius:0;
  padding:0 10px calc(6px + env(safe-area-inset-bottom, 0px));
}
html.panel2 .p2-top{display:none}
html.panel2 .p2-icons{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin-top:2px;position:relative;padding-bottom:15px}
/* 文字はどのボタンも同じ高さに揃える（2026-09-23 オーナー） */
html.panel2 .p2-icons .ico,html.panel2 .p2-icons .cbtn{position:relative;overflow:visible}
html.panel2 .p2-icons .hi-l,html.panel2 .p2-icons .hub-lbl{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-15px;white-space:nowrap;
  font-size:max(9px,calc(9.5px*var(--fs)));font-weight:900;letter-spacing:.02em;color:#fff3cf;text-shadow:0 1px 2px rgba(0,0,0,.85)}
html.panel2 .p2-icons .hi-e{line-height:1}
html.panel2 .p2-side{display:flex;gap:10px;align-items:flex-end}
/* 中央の［航海］は半円（2026-09-23 オーナー） */
html.panel2 .console-body .ico.hub-half{
  width:124px;height:67px;margin:0 6px 0;border-radius:124px 124px 0 0;
  flex-direction:column;justify-content:center;gap:0;
  background:radial-gradient(ellipse at 50% 100%,#c79a3c 0%,#8a6418 55%,#4a3208 100%);
  border:2px solid #ffe29a;border-bottom:none;box-shadow:0 0 0 3px rgba(40,26,8,.85),0 0 18px rgba(255,205,90,.5),inset 0 2px 0 rgba(255,255,255,.28);
  font-size:max(var(--fs-min),calc(22px*var(--fs)));
}
html.panel2 .console-body .ico.hub-half::before{display:none}
/* 半円の［航海］は専用の絵（舵輪）を上に置く（2026-09-23 オーナー） */
html.panel2 .console-body .ico.hub-half,html.panel2 .console-body .ico.hub-half:hover{
  background:url(../assets/sys/ui_ico_voyage.webp) center 40%/48% no-repeat,
    radial-gradient(ellipse at 50% 100%,#c79a3c 0%,#8a6418 55%,#4a3208 100%)}
/* 数の札は小さく、金の縁にそろえる（大きな白丸が浮いて見えた） */
html.panel2 .console-body .ico.hub-half .badge{
  top:-4px;right:6px;min-width:15px;height:15px;line-height:13px;font-size:9.5px;
  border:1px solid #ffe9a8;box-shadow:0 1px 4px rgba(0,0,0,.6)}
html.panel2 .console-body .ico.hub-half .hub-lbl{font-size:max(var(--fs-min),calc(11px*var(--fs)))}
/* ［連続投入］［オート］もアイコンと同じ大きさの丸に */
html.panel2 .cbtn.p2-btn{
  width:52px;height:52px;min-width:0;padding:0;border-radius:50%;flex-direction:column;gap:0;
  font-size:max(var(--fs-min),calc(20px*var(--fs)));line-height:1;text-align:center;letter-spacing:0;
}
html.panel2 .cbtn.p2-btn kbd{display:none}
html.panel2 .cbtn.p2-btn .p2-n{position:absolute;top:-2px;right:-4px;padding:0 4px;height:15px;border-radius:9px;
  background:rgba(24,16,6,.92);border:1px solid rgba(255,214,120,.85);color:#ffe6ab;font-size:9px;font-weight:900;font-style:normal;line-height:13px}
html.panel2 .cbtn.p2-btn span{white-space:pre-line}
/* 航海の螺旋メニュー */
.p2-spiral{position:fixed;z-index:9500;width:0;height:0}
.p2-spiral .p2-sp{
  position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  background:radial-gradient(circle at 40% 30%,#3d3020,#151009);border:1px solid rgba(232,194,92,.75);
  color:#f1e4c0;font-family:inherit;font-size:max(var(--fs-min),calc(17px*var(--fs)));
  box-shadow:0 6px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,235,190,.2);
  opacity:0;transform:translate(0,0) scale(.3) rotate(-160deg);
  animation:spIn .42s cubic-bezier(.2,1.5,.4,1) forwards;
}
.p2-spiral .p2-sp .sp-l{font-size:max(9px,calc(8.5px*var(--fs)));font-weight:800;letter-spacing:.02em}
/* 描いた丸アイコンが届いていれば、絵文字の代わりに貼る（文字は下に重ねる） */
.p2-spiral .p2-sp.img{background:var(--ico) center 38%/62% no-repeat,radial-gradient(circle at 40% 30%,#3d3020,#151009)}
.p2-spiral .p2-sp.img .sp-e{display:none}
.p2-spiral .p2-sp.img .sp-l{position:absolute;left:50%;transform:translateX(-50%);bottom:4px;
  text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap}
html.panel2 .cbtn.p2-btn.img,html.panel2 .cbtn.p2-btn.img:hover{
  border-image:none;border:none;box-shadow:none;
  background:var(--ico) center 36%/56% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
html.panel2 .cbtn.p2-btn.img .hi-e{display:none}
/* オートが入っている時は、板の代わりに緑の光の輪で分かるようにする */
html.panel2 .cbtn.p2-btn.img.auto.on{box-shadow:0 0 0 2px rgba(60,220,150,.9),0 0 16px rgba(60,220,150,.6);color:#d9ffe9}
html.panel2 .cbtn.p2-btn.img.main{box-shadow:0 0 0 2px rgba(255,205,90,.9),0 0 16px rgba(255,190,60,.45)}
.p2-spiral .p2-sp .sp-n{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px;border-radius:9px;
  background:#c8322a;border:1px solid #ffe0a8;color:#fff;font-size:9px;font-weight:900;font-style:normal;line-height:13px;text-align:center}
.p2-spiral.out .p2-sp{animation:spOut .22s ease-in forwards}
@keyframes spIn{to{opacity:1;transform:translate(var(--x),var(--y)) scale(1) rotate(0)}}
@keyframes spOut{from{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}to{opacity:0;transform:translate(0,0) scale(.4)}}
@media (prefers-reduced-motion:reduce){.p2-spiral .p2-sp{animation-duration:.01s}}
html.panel2 .cgroup.icons{display:none}                        /* 元の小さい列は使わない */
html.panel2 .console-body .ico{
  width:56px;height:56px;border-radius:50%;flex-direction:column;gap:1px;margin-top:0;
  font-size:max(var(--fs-min),calc(21px*var(--fs)));
}
html.panel2 .console-body .ico.hub-big{margin-left:0;margin-top:0;width:56px;height:56px;font-size:max(var(--fs-min),calc(21px*var(--fs)))}
html.panel2 .console-body .ico .hi-l{font-size:max(var(--fs-min),calc(10px*var(--fs)));font-weight:900;letter-spacing:.08em;color:#fff3cf;text-shadow:0 1px 2px rgba(0,0,0,.8)}
html.panel2 .console-body .ico .hi-e{line-height:1}
/* 船長は #btnChara の指定（四角い真鍮板）が勝っていたので、新しい操作盤では丸い金の縁に上書きする */
html.panel2 .console-body #btnChara,html.panel2 .console-body #btnChara:hover{
  background-image:url(../assets/sys/ui_ico_chara.webp),url(../assets/sys/ui_btn_hub.webp);
  background-position:center 37%,center;background-size:52%,100% 100%;background-repeat:no-repeat;
  border:none;box-shadow:none}
/* 港だけ輪が外に 9px はみ出して大きく見えていた。新しい操作盤では他と同じ大きさに */
html.panel2.has-portbig .console-body .ico.hub-big.hub-port{width:56px;height:56px;margin-top:0}
html.panel2 .console-body .ico.hub-big.hub-port::before{inset:0}
html.panel2.has-portbig .console-body #btnHub.hub-big{margin-left:6px}

/* 板の形を港のボタンと同じ丸い金の縁にそろえる（2026-09-23） */
html.panel2 .console-body .ico.hud-ico.img,html.panel2 .console-body .ico.hud-ico.img:hover,
html.panel2 .cbtn.p2-btn.img,html.panel2 .cbtn.p2-btn.img:hover{
  background-image:var(--ico,none),url(../assets/sys/ui_btn_hub.webp);
  background-position:center 37%,center;background-size:52%,100% 100%;background-repeat:no-repeat}
html.panel2 .cbtn{min-width:132px;justify-content:center}
/* 横に 7 つ並ぶので、狭い画面では小さくして収める */
@media (max-width:440px){
  html.panel2 .p2-icons{gap:4px}
  html.panel2 .p2-side{gap:4px}
  html.panel2 .console-body .ico{width:44px;height:44px;font-size:max(var(--fs-min),calc(16px*var(--fs)))}
  html.panel2.has-portbig .console-body .ico.hub-big.hub-port{width:44px;height:44px}
  html.panel2 .console-body .ico .hi-l{font-size:max(9px,calc(8.5px*var(--fs)));letter-spacing:0}
  html.panel2 .console-body .ico.hub-half{width:94px;height:55px;margin:0 2px 0;font-size:max(var(--fs-min),calc(19px*var(--fs)))}
  html.panel2 .cbtn.p2-btn{width:44px;height:44px;font-size:max(9px,calc(8.5px*var(--fs)))}
  html.panel2 .console-body{padding-left:4px;padding-right:4px}
}
/* 幅 381〜440px：44px 固定だと 393px（今の iPhone）で合計が画面より広く、右端の［オート／停止］が切れた
   （2026-09-27 オーナーのスクショ。実測で右端 402px＞画面 393px）。
   6 つの丸ボタンの大きさを、画面の幅から［航海］（94px＋余白）とすき間・オート中の緑の輪のぶん（計 148px）を引いた 1/6 に抑える */
@media (min-width:381px) and (max-width:440px){
  html.panel2 .console-body .ico,
  html.panel2.has-portbig .console-body .ico.hub-big.hub-port,
  html.panel2 .cbtn.p2-btn{width:min(44px,calc((100vw - 148px) / 6));height:min(44px,calc((100vw - 148px) / 6))}
  html.panel2 .console-body .ico.hub-half{width:94px;height:55px}
}

/* 幅 380px 以下：7 つ並ぶと右の［オート］がはみ出していたので、もう一段小さくする（2026-09-23 点検） */
@media (max-width:380px){
  html.panel2 .p2-icons{gap:3px}
  html.panel2 .p2-side{gap:3px}
  html.panel2 .console-body .ico{width:38px;height:38px;font-size:max(var(--fs-min),calc(14px*var(--fs)))}
  html.panel2.has-portbig .console-body .ico.hub-big.hub-port{width:38px;height:38px}
  html.panel2 .console-body .ico.hub-half{width:80px;height:48px;margin:0 2px 0;font-size:max(var(--fs-min),calc(16px*var(--fs)))}
  html.panel2 .cbtn.p2-btn{width:38px;height:38px}
  html.panel2 .p2-icons .hi-l,html.panel2 .p2-icons .hub-lbl{font-size:max(8px,calc(8px*var(--fs)));bottom:-13px}
  html.panel2 .p2-icons{padding-bottom:13px}
  html.panel2 .console-body{padding-left:3px;padding-right:3px}
}
@media (max-width:334px){
  html.panel2 .console-body .ico{width:34px;height:34px}
  html.panel2.has-portbig .console-body .ico.hub-big.hub-port{width:34px;height:34px}
  html.panel2 .console-body .ico.hub-half{width:70px;height:42px}
  html.panel2 .cbtn.p2-btn{width:34px;height:34px}
  html.panel2 .p2-icons,html.panel2 .p2-side{gap:2px}
}

/* 操作盤の空いた帯の見本（?band=a／?band=b・2026-09-23） */
html.panel2 .p2-band{display:flex;align-items:center;gap:8px;margin:0 auto 3px;max-width:520px;width:100%;
  padding:3px 10px;border-radius:9px;background:linear-gradient(180deg,rgba(28,19,8,.82),rgba(12,8,3,.86));
  border:1px solid rgba(232,194,92,.38);box-shadow:0 2px 8px rgba(0,0,0,.5)}
html.panel2 .p2-band .bd-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:max(9px,calc(10px*var(--fs)));font-weight:800;color:#ffe6ab;
  letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.8)}
html.panel2 .p2-band .bd-dots{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:3px}
html.panel2 .p2-band .bd-logo{flex:0 0 auto;width:42px;height:14px;margin-right:4px;
  background-position:center;background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
html.panel2 .p2-band .bd-logo.bd-txt{width:auto;font:900 9px/14px "Helvetica Neue",sans-serif;letter-spacing:.08em;color:#ffdf9b}
html.panel2 .p2-band .bd-dots i{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.5);
  border:1px solid rgba(232,194,92,.45)}
html.panel2 .p2-band .bd-dots i.on{background:radial-gradient(circle at 35% 30%,#fff0bd,#e8c25c 55%,#8a6418);
  border-color:#ffe6ab;box-shadow:0 0 6px rgba(255,205,90,.7)}
@media (max-width:440px){
  html.panel2 .p2-band{padding:2px 8px;gap:6px}
  html.panel2 .p2-band .bd-dots i{width:6px;height:6px}
  html.panel2 .p2-band .bd-dots{gap:2px}
  html.panel2 .p2-band .bd-logo{width:34px;height:12px;margin-right:3px}
}

/* 画面のいちばん下の帯（iPhone のホームインジケータの安全域）の使い方の見本（?strip=a／b／c・2026-09-23）
   A：甲板の板の絵を敷いて黒をなくす／B：余分な余白 10px を削る／C：両方 */
html.panel2:not(.oldstrip) .console::after{
  content:'';position:absolute;left:calc(-2vw);right:calc(-2vw);bottom:0;pointer-events:none;z-index:-1;
  height:calc(4px + env(safe-area-inset-bottom, 0px));
  background:#150e05 url(../assets/sys/ui_panel_console.webp) center bottom/100% 220% no-repeat;
  border-top:1px solid rgba(232,194,92,.35);box-shadow:inset 0 3px 8px rgba(0,0,0,.5)}
html.panel2:not(.oldstrip).inbrowser .console-body{
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px))}

/* 船団が戻った知らせ（2026-09-23 オーナー「お知らせとイラスト」） */
.fleet-card{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:57;width:min(340px,calc(100vw - 28px));box-sizing:border-box;overflow:hidden;cursor:pointer;
  border-radius:14px;border:2px solid #e8c25c;background:linear-gradient(180deg,rgba(38,28,12,.97),rgba(16,11,5,.97));
  box-shadow:0 10px 30px rgba(0,0,0,.6);animation:fcIn .32s ease-out;transition:opacity .25s}
.fleet-card.out{opacity:0}
.fleet-card .fc-art{height:104px;background-position:center 42%;background-size:cover;
  box-shadow:inset 0 -26px 26px -18px rgba(16,11,5,.98)}
.fleet-card .fc-body{padding:8px 12px 10px}
.fleet-card .fc-h{font:900 max(14px,calc(15px*var(--fs))) serif;color:#fff0b8}
.fleet-card .fc-sum{font:900 max(22px,calc(26px*var(--fs))) serif;color:#ffe08a;line-height:1.1;
  text-shadow:0 2px 6px rgba(0,0,0,.7)}
.fleet-card .fc-sum small{font-size:max(11px,calc(12px*var(--fs)));color:#d8c9a4}
.fleet-card .fc-list{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px}
.fleet-card .fc-list span{font-size:max(10px,calc(11px*var(--fs)));color:#d8c9a4;font-weight:700}
.fleet-card .fc-note{margin-top:5px;font-size:max(9px,calc(10px*var(--fs)));color:#9c8c68}
@keyframes fcIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.fleet-card{animation-duration:.01s}}

/* 交易品の名前をタップした時の説明（2026-09-23 オーナー「仕入れ先が分かるように」） */
.tr-nm[data-ginfo]{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;text-decoration-color:rgba(232,194,92,.6)}
.gi-top{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}
.gi-d{font-size:max(var(--fs-min),calc(12.5px*var(--fs)));color:#e2d5b4;line-height:1.5}
.gi-ports{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.gi-ports .gi-p{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;
  background:rgba(60,45,22,.7);border:1px solid rgba(232,194,92,.4);color:#f0e2bd;
  font-size:max(10px,calc(11.5px*var(--fs)));font-weight:700;white-space:nowrap}
.gi-ports .gi-p.now{background:linear-gradient(180deg,#b9902f,#6b4f13);color:#2a1c05;border-color:#ffe9a8}
.gi-ports .gi-p.dim{opacity:.62}
.gi-ports .gi-p i{font-style:normal;font-size:9px;color:#c8a85e}

/* 市場の「噂で分かる高騰は入っていません」の案内（2026-09-23 オーナー） */
.tr-rumor-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 10px;padding:9px 11px;border-radius:9px;
  background:linear-gradient(180deg,rgba(44,33,14,.85),rgba(22,16,7,.9));border:1px solid rgba(232,194,92,.42)}
/* ボタンが縮まないので、狭い画面では文字の幅が 1 文字ずつまで潰れていた（2026-09-24 オーナー
   「噂を聞くが表示おかしいです」）。文字に最低 200px を与え、入らなければボタンを次の行へ送る */
.tr-rumor-note .grow{flex:1 1 200px;min-width:0;font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#efe2c2;line-height:1.6}
.tr-rumor-note b{color:#ffe6ab}
.tr-rumor-note .sys-btn{flex:0 0 auto;max-width:100%;margin:0 auto}

/* タイトル画面の動き（2026-09-23 要望96）。背景の絵の上に薄い層を重ねる */
#bootFx{position:absolute;inset:0;pointer-events:none;z-index:0}
.boot-inner{position:relative;z-index:1}
/* 題字の金に、ゆっくり光が走る */
.boot h1{position:relative;overflow:hidden}
.boot h1::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,252,230,.85) 50%,transparent 62%);
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);
  transform:translateX(-120%);animation:bootShine 6.5s ease-in-out 1.2s infinite;mix-blend-mode:screen}
@keyframes bootShine{0%{transform:translateX(-120%)}22%{transform:translateX(120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.boot h1::after{animation:none;opacity:0}}
/* タイトルの絵を canvas 側で描けた時は、CSS の背景の絵を消す（二重に出さない・寄りを効かせる） */
.boot.bootfx-on{background-image:
  radial-gradient(ellipse 72% 50% at 50% 48%, rgba(4,7,12,.84) 0%, rgba(4,7,12,.62) 55%, rgba(4,7,12,.3) 100%)}

/* パソコンで［航海］が半円でなく「つぶれた丸」になっていた（2026-09-23 オーナー「PC版のこれダサい」
   「スマホと同じようにできないの？」）。同じ強さの .hub-big（56×56）が後ろにあって勝っていたため。
   .hub-half を強い指定で最後に置き直し、どの画面でもスマホと同じ半円にそろえる */
html.panel2 .console-body .ico.hub-big.hub-half{
  /* 下端はほかのアイコンとそろえる（2026-09-24 オーナー「下揃えにして」）。margin-bottom は 0 */
  width:124px;height:67px;margin:0 6px 0;border-radius:124px 124px 0 0;
  font-size:max(var(--fs-min),calc(22px*var(--fs)))}
@media (max-width:440px){
  html.panel2 .console-body .ico.hub-big.hub-half{width:94px;height:55px;margin:0 2px 0;
    font-size:max(var(--fs-min),calc(19px*var(--fs)))}
}
@media (max-width:380px){
  html.panel2 .console-body .ico.hub-big.hub-half{width:80px;height:48px;
    font-size:max(var(--fs-min),calc(16px*var(--fs)))}
}
@media (max-width:334px){
  html.panel2 .console-body .ico.hub-big.hub-half{width:70px;height:42px}
}

/* ↓ ?newhub 用（生成した紺のラピスの絵。build 474〜475 で既定にしていた版）。
   2026-09-24 オーナー「スマフォは前のやつのがよかった。何故PC版に合わせてしまったのか？
   PC版をスマフォ版のようにして欲しかった」→ 既定は下の金色の半円に戻した。
   絵そのものは捨てず、?newhub で見られるように残してある（縦横比 1.691 に合わせた大きさ） */
html.newhub.panel2 .console-body .ico.hub-big.hub-half,
html.newhub.panel2 .console-body .ico.hub-big.hub-half:hover{
  /* 下端はほかのアイコンとそろえる（2026-09-24 オーナー「位置が他のアイコンに比べて下にある。下揃えにして」）。
     描いた半円の時は縁の光のぶん -2px 下げていたが、絵になって要らなくなった */
  width:104px;height:62px;margin:0 6px 0;border:none;border-radius:0;box-shadow:none;
  background:url(../assets/sys/ui_ico_voyage.webp) center 54%/40% no-repeat,
    url(../assets/sys/ui_btn_hub_arch.webp) center bottom/100% 100% no-repeat;
}
html.newhub.panel2 .console-body .ico.hub-big.hub-half::before,
html.newhub.panel2 .console-body .ico.hub-big.hub-half::after{display:none}
/* 数の札は絵の外に出ないよう、弧の右上に寄せる */
html.newhub.panel2 .console-body .ico.hub-big.hub-half .badge{top:2%;right:2%}
@media (max-width:440px){
  html.newhub.panel2 .console-body .ico.hub-big.hub-half,
  html.newhub.panel2 .console-body .ico.hub-big.hub-half:hover{width:78px;height:46px;margin:0 2px 0}
}
@media (max-width:380px){
  html.newhub.panel2 .console-body .ico.hub-big.hub-half,
  html.newhub.panel2 .console-body .ico.hub-big.hub-half:hover{width:66px;height:39px;margin:0 2px 0}
}
@media (max-width:334px){
  html.newhub.panel2 .console-body .ico.hub-big.hub-half,
  html.newhub.panel2 .console-body .ico.hub-big.hub-half:hover{width:58px;height:34px;margin:0 2px 0}
}

/* 既定：金色の半円（スマホでずっと使っていた見た目）。弧に真鍮の鋲＋内側の二重の金線＋下辺の飾り。
   パソコンも同じ見た目になる（2026-09-23「スマホと同じようにできないの？」）*/
html:not(.newhub).panel2 .console-body .ico.hub-big.hub-half{
  box-shadow:0 0 0 3px rgba(40,26,8,.85),0 0 18px rgba(255,205,90,.5),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 0 0 5px rgba(90,60,14,.55),
    inset 0 0 0 6px rgba(255,226,154,.75);
}
html:not(.newhub).panel2 .console-body .ico.hub-big.hub-half::after{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  border-radius:inherit;display:block;
  background:
    radial-gradient(circle at  8.7% 61.5%, #fff3d0 0 1.1px, #dcae43 1.9px, #6d4a10 2.9px, transparent 3.2px),
    radial-gradient(circle at 28.6% 19.7%, #fff3d0 0 1.1px, #dcae43 1.9px, #6d4a10 2.9px, transparent 3.2px),
    radial-gradient(circle at 71.4% 19.7%, #fff3d0 0 1.1px, #dcae43 1.9px, #6d4a10 2.9px, transparent 3.2px),
    radial-gradient(circle at 91.3% 61.5%, #fff3d0 0 1.1px, #dcae43 1.9px, #6d4a10 2.9px, transparent 3.2px);
}
/* 下辺の飾り（::before）はやめた。丸ボタン用の古い指定（.ico.hub-big::before の負の top）が
   効いたままで、下ではなく半円の上に細い金の棒として出ていた（2026-09-24 オーナー
   「航海ボタンの上の謎の金の棒はなんですか？いらないと思います」）。
   消すと .hub-half::before{display:none} が効いて、何も描かれない */

/* 試しに見る（2026-09-25 要望118）：UI を全部隠して、盤面と船だけにする。
   visibility で隠す（display:none だと操作盤の高さが変わり、盤面の置き方がずれるため） */
html.dk-preview #stage > :not(canvas),
html.dk-preview body > .modal,
html.dk-preview body > .hud-menu,
html.dk-preview .p2-spiral,
html.dk-preview .gl-pop{visibility:hidden!important}
#pvBar{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:13000;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;border-radius:12px;max-width:calc(100vw - 32px);
  background:rgba(14,10,4,.78);border:1px solid rgba(232,194,92,.6);box-shadow:0 6px 18px rgba(0,0,0,.5);
  color:#ffe6ab;text-align:center;pointer-events:none;animation:pvIn .3s ease-out both}
#pvBar b{font-size:13px;letter-spacing:.04em}
#pvBar span{font-size:12px;color:#fff3d0;font-weight:800}
#pvBar em{font-style:normal;font-size:10.5px;color:#cdbf98}
@keyframes pvIn{from{opacity:0;transform:translate(-50%,10px)}}

/* 見本 ?portsail（2026-09-27 要望135）：港にいる間だけ、右の組（港・連続投入・オート）の上にくっつける［出航］。ほかのボタンより少し大きく（1.2 倍） */
html.panel2 .p2-right{position:relative}
html.panel2 #btnSailOut{position:absolute;right:0;bottom:calc(100% + 18px);width:54px;height:54px;z-index:3}
html.panel2 #btnSailOut[hidden]{display:none}
html.panel2 #btnSailOut .hi-l{font-size:max(10px,calc(10px*var(--fs)));color:#ffe6a0}
@media (max-width:440px){ html.panel2 #btnSailOut{width:min(52px,calc((100vw - 148px) / 6 * 1.2));height:min(52px,calc((100vw - 148px) / 6 * 1.2))} }
@media (max-width:380px){ html.panel2 #btnSailOut{width:46px;height:46px} html.panel2.sailout-on .p2-band{margin-right:52px} }
@media (max-width:334px){ html.panel2 #btnSailOut{width:41px;height:41px} html.panel2.sailout-on .p2-band{margin-right:47px} }
/* ［出航］が出ている間は、帯（停泊中・進み具合）の右をボタンの幅だけ空ける（重なって丸が隠れた） */
html.panel2.sailout-on .p2-band{width:auto;margin-left:0;margin-right:62px}

/* 見本 ?jplogo（2026-09-27 要望140）：ジャックポットの当たり。チャンス（#jcFx）より大きく・長く・金色に */
#jwFx{position:fixed;inset:0;z-index:56;pointer-events:none;overflow:hidden}
#jwFx .rf-rays{position:absolute;left:50%;top:38%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,110,.42) 0deg 7deg,rgba(255,250,220,.22) 7deg 10deg,rgba(255,200,80,0) 10deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 14%,transparent 50%);mask:radial-gradient(circle,#000 0,#000 14%,transparent 50%);
  animation:rfSpin 4s linear infinite,rfRaysIn .3s ease-out both}
#jwFx .jw-r2{animation:rfSpin 7s linear infinite reverse,rfRaysIn .3s ease-out both;opacity:.6}
#jwFx .rf-edge{position:absolute;inset:0;animation:rfEdge .35s ease-in-out infinite alternate}
#jwFx .jw-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(255,250,220,.95),rgba(255,210,120,.4) 35%,transparent 70%);animation:jwFlash .8s ease-out both}
/* 9/28 実機「スーパージャックポットの最後の文字がはみ出てた」：幅 96vw に、叩きつける時の拡大と脈打つ 1.04 倍が重なり、右端の「!」が画面の外へ出ていた → 84vw に */
#jwFx .rf-logo{position:absolute;left:50%;top:38%;width:min(84vw,480px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  animation:rfSlam .6s cubic-bezier(.2,1.6,.4,1) both,jwPulse 1.2s .7s ease-in-out infinite}
#jwFx .rf-logo img{width:100%;height:auto;filter:drop-shadow(0 5px 12px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(255,210,100,.85))}
#jwFx .rf-logo b{font-family:Baskerville,'Hiragino Mincho ProN',serif;font-weight:900;letter-spacing:.05em;line-height:1;
  background:linear-gradient(180deg,#fffbe8 0%,#ffe08a 35%,#c8860f 62%,#fff1b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px #5a2c05;filter:drop-shadow(0 4px 0 #3a1a02) drop-shadow(0 0 22px rgba(255,200,80,.95));font-size:min(12vw,58px)}
#jwFx .rf-logo .rf-big{font-size:min(13.5vw,72px);transform:rotate(-4deg)}   /* 9/28 絵が届く前の金の文字「JACKPOT!」が 19vw で画面の外へ出ていた */
#jwFx .rf-logo b{white-space:nowrap}
#jwFx .rf-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%);
  mix-blend-mode:overlay;background-size:250% 100%;animation:rfShine .9s .5s ease-in-out 3 both;pointer-events:none}
#jwFx .jw-coin{position:absolute;top:-8%;width:calc(26px * var(--s));height:calc(26px * var(--s));border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c8 0,#ffd45a 30%,#c98a14 70%,#7a4c06 100%);box-shadow:0 0 8px rgba(255,210,90,.8);
  animation-name:jwCoin;animation-timing-function:cubic-bezier(.3,.1,.7,1);animation-fill-mode:both}
#jwFx.jw-sjp .rf-rays{background:repeating-conic-gradient(from 0deg,rgba(255,120,90,.40) 0deg 7deg,rgba(255,235,160,.28) 7deg 10deg,rgba(255,120,90,0) 10deg 18deg)}
#jwFx.jw-sjp .rf-logo img{filter:drop-shadow(0 5px 12px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(255,120,90,.9))}
#jwFx.rf-out{opacity:0;transition:opacity .6s}
@keyframes jwFlash{from{opacity:1}to{opacity:0}}
@keyframes jwPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.04)}}
@keyframes jwCoin{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(118vh) rotate(720deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){#jwFx .rf-rays,#jwFx .rf-edge,#jwFx .rf-shine,#jwFx .jw-coin,#jwFx .rf-logo{animation:none}}
@media (orientation:landscape) and (max-height:520px){#jwFx .rf-logo{width:min(60vw,440px)}}

/* 見本 ?bootmove（2026-09-28 #96 タイトルの動き。js/bootmove.js）：絵は WebGL で描き、文字の後ろを暗くする膜だけ上に重ねる */
.boot.bootmv{background:#04070c}
.bootmv-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.bootmv-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 72% 50% at 50% 48%, rgba(4,7,12,.84) 0%, rgba(4,7,12,.62) 55%, rgba(4,7,12,.3) 100%);
  transition:opacity .5s}
.boot.bootmv .boot-inner{position:relative;z-index:1;transition:opacity .35s}
.boot.bootmv-leave .boot-inner,.boot.bootmv-leave .bootmv-shade{opacity:0}
.boot.bootmv.bootmv-leave.hide{transition:opacity .45s 1.0s;transform:none}
/* c：ロゴの金の文字の上を、斜めの光が左から右へ走る（6 秒ごと。文字の形の中だけ） */
.bootmv-c .boot h1.boot-title::before{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(../assets/sys/ui_boot_logo.webp) center/contain no-repeat;mask:url(../assets/sys/ui_boot_logo.webp) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(255,250,225,.0) 42%,rgba(255,250,225,.85) 50%,rgba(255,250,225,0) 58%,transparent 60%) no-repeat;
  background-size:250% 100%;background-position:130% 0;mix-blend-mode:screen;
  animation:bootMvSweep 6s ease-in-out 0.6s infinite}
@keyframes bootMvSweep{0%{background-position:130% 0}28%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.bootmv-c .boot h1.boot-title::before{animation:none}}

/* 窓（.modal）を画面の上の端から離す（10/5 オーナー「上の方が黒くぼやけて文字と×ボタンが見にくい」iPhone のスクショ）。
   iPhone では窓の上の端がダイナミックアイランドのすぐ下まで来て、iOS が画面の上の端に重ねるぼかしと暗さに題名と × が入っていた。
   上の安全な余白（safe-area）の 2.4 倍だけ下げる（アイランドの機種で約 140px・パソコンは 0 のまま）。?oldmodaltop で前の形 */
html:not(.oldmodaltop) .modal{box-sizing:border-box;padding-top:calc(env(safe-area-inset-top,0px) * 2.4);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
html:not(.oldmodaltop) .modal-box{max-height:min(86vh,100%)}

/* 数字・括弧の続きを折らない（10/5 U.joinNums の塊） */
.vy-bill .nw,.upd-b .nw,.fe-ds .nw,.hb-adv .nw{white-space:nowrap}
/* 窓の後ろのすりガラス（ぼかし）をやめ、暗くするだけにする（10/5 オーナー「Lv とかコイン枚数のあたりがボケてます」。583 で窓を下げたので、窓の上にぼけた画面が見えていた）。?oldmodaltop で前の形 */
html:not(.oldmodaltop) .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,7,12,.84)}