/* 17ARJ: 艦影を維持し、所属色とは別のレーダー光で海上防衛を識別する。 */
.cell.fleet.sea-defence17ard::before,
.gs17aii-fleet.sea-defence17ard::before {
  content: ""; position: absolute; top: 20%; right: 8%; z-index: 2;
  width: clamp(9px, .8vw, 12px); height: clamp(9px, .8vw, 12px);
  border: 1px solid #b9f3ff; border-radius: 50%;
  background: radial-gradient(circle, #e7fbff 0 12%, #43d8f0 14% 22%, transparent 24%),
    conic-gradient(from -35deg, rgba(126,232,255,.9) 0 18%, rgba(126,232,255,.12) 18% 47%, transparent 47% 100%);
  box-shadow: 0 0 0 1px rgba(2,35,55,.75), 0 0 5px rgba(92,226,255,.8);
  pointer-events: none;
}
/* 17AQW: 本番の艦カードと同じ緑/低HP赤/索敵外グレー。割合自体も圏外は出さない。 */
.gs17aqw-hp{display:block;min-width:180px;height:7px;margin:5px 0 7px;border-radius:999px;overflow:hidden;background:#07131f}
.gs17aqw-hp i{display:block;height:100%;background:linear-gradient(90deg,#40b96a,#8ae68b)}
.gs17aqw-hp.low i{background:#ef6f76}
.gs17aqw-hp-unknown i{width:100%;background:#8895a5}
  :root {
    color-scheme: dark;
    /* 17AB7: 本文＝**端末に入っている書体だけ**を使う（Webフォントの取り寄せをやめた）。
       やめた理由: Google Fonts の Noto Sans JP は「使った文字が入っている塊」を単位に配られるため、
       実測で **トップ画面を開くだけで 1.0〜1.4MB**（ルール・図鑑・お知らせまで見ると 4〜5MB）落ちてくる。
       ゲーム本体（HTML＋CSS＋JS＋画像・brotli後）が約320KB なので、**本体の3〜4倍**を書体に使っていた。
       ⚠️ 端末の標準和文書体は太さの段数が少なく（多くの環境で「並」と「太」の2段だけ）、
          800・900 を指定しても「太」1種類で描かれる。それを小さな文字に当てると画数の多い漢字が
          潰れるので、**このファイル全体の font-weight を2段下げてある**（900→700 / 800→600 /
          700→500 / 600→400）。太さを戻すときは書体も一緒に戻すこと。片方だけ戻すと潰れる。 */
    --font-ui: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
               "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
    /* 数値・座標など桁を揃えたい箇所用。⚠️ ここに ui-monospace を先に置くと等幅（SF Mono 等）に
       化けて字面が変わるので、本文と同じ書体のまま **数字だけ等幅** にする（tabular-nums）。 */
    --font-num: var(--font-ui);

    /* ===== デザイントークン（ダーク青系）=====
       色相は従来のまま、役割ごとに整理。散在していたハードコード値の置き換え先。 */
    --bg: #0b1622;            /* ページ背景 */
    --panel: #13243a;         /* パネル面 */
    --panel-2: #0e1b2c;       /* 入力欄・小カードなど一段沈んだ面 */
    --panel-3: #12243a;       /* モーダルなど一段浮いた面 */
    --border: #25405f;        /* パネルの境界 */
    --border-2: #2c4a6e;      /* 入力・チップ・小物の境界 */
    --border-strong: #3a6396; /* ホバー時・強調の境界 */
    --text: #e8eef5;          /* 本文 */
    --text-strong: #f2f7fc;   /* 見出し・強調 */
    --text-2: #9fb6cf;        /* サブテキスト */
    --muted: #8aa0b4;         /* 補助・説明 */
    --accent: #4a8bff;        /* アクセント（見出しバー等） */
    --accent-btn: #2f6df0;    /* 主ボタン */
    --gold: #e8a13a;          /* 資金・注意のゴールド */
    --gold-soft: #ffe9b0;     /* 島名などの淡ゴールド */
    --ok: #7fd18a;            /* 成功・自分 */
    --warn: #e0a13a;          /* 警告 */
    --danger: #e0402f;        /* 危険 */
    --radius-s: 8px;
    --radius: 10px;
    --radius-l: 12px;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3);                    /* カードの薄い影 */
    --shadow-pop: 0 10px 28px rgba(0,0,0,.55);               /* ポップアップ */
    --shadow-modal: 0 20px 60px rgba(0,0,0,.6);              /* モーダル */
    --head-grad: linear-gradient(90deg, rgba(74,139,255,.22), rgba(74,139,255,.03)); /* 見出しチップ */
    --head-border: #2c527c;   /* 見出しチップの境界 */
    --focus: #7fc1ff;         /* フォーカスリング */
  }
  ::selection { background: rgba(74,139,255,.38); color: #f2f8ff; }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--font-ui);
         font-size: 14px; line-height: 1.65;
         -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
         text-rendering: optimizeLegibility;
         /* 日本語の改行制御: 単語途中の不自然な折り返しを避ける */
         word-break: normal; overflow-wrap: break-word; line-break: strict;
         background: var(--bg); color: var(--text); display: flex; justify-content: center; }
  /* キーボード操作時のフォーカスリング（マウスクリックでは出ない） */
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  input:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--border-strong); }
  /* 内側スクロール領域は細い控えめなスクロールバーに統一 */
  .chatlog, .news, .queue, .mapframe, #cellmenu, .animalpick,
  #rankModal .rm-body, #allianceModal .rm-body, #replayBar .rev, .statusbar {
    scrollbar-width: thin; scrollbar-color: #2c4a6e transparent; }
  .chatlog::-webkit-scrollbar, .news::-webkit-scrollbar, .queue::-webkit-scrollbar,
  .mapframe::-webkit-scrollbar, #cellmenu::-webkit-scrollbar, .animalpick::-webkit-scrollbar,
  #rankModal .rm-body::-webkit-scrollbar, #allianceModal .rm-body::-webkit-scrollbar, .statusbar::-webkit-scrollbar { width: 8px; height: 8px; }
  .chatlog::-webkit-scrollbar-thumb, .news::-webkit-scrollbar-thumb, .queue::-webkit-scrollbar-thumb,
  .mapframe::-webkit-scrollbar-thumb, #cellmenu::-webkit-scrollbar-thumb, .animalpick::-webkit-scrollbar-thumb,
  #rankModal .rm-body::-webkit-scrollbar-thumb, #allianceModal .rm-body::-webkit-scrollbar-thumb, .statusbar::-webkit-scrollbar-thumb {
    background: #2c4a6e; border-radius: 4px; }
  /* 短いラベル系（ボタン・チップ・見出しラベル・表頭）は語の途中で折り返さない。
     日本語(CJK)の連なりも1語として扱い、はみ出す時だけ折り返す。 */
  button, .pill, .tag, .opbtn, .statusrow .ttl, .qhead, .legend, .mapcrumb,
  .fleetpick button, .fchip, .ranktbl th, table th, .chattabs button,
  .info, .navlink, #btnHelp, .sectitle, label {
    word-break: keep-all; }
  /* 数値をタブ揃え＆整った字面に（ステータス・ランキング・座標） */
  .statusbar .sc .v, .statusbar .sc .sub, .ranktbl, .stat .v, .pill, .sel,
  #replayBar .rturn, .queue, table td, .tkchip .tk-ct {
    font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
  /* ノッチ(safe-area)を避ける。デスクトップでは env()=0 なので実質16px。 */
  .wrap { width: 100%; max-width: 1760px;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  h1 { font-size: 20.5px; margin: 0 0 2px; font-weight: 600; letter-spacing: .01em;
       display: flex; align-items: center; gap: 9px; }
  /* 17AQS: 採用ロゴは横長版だけをヘッダーに使い、登録前の大型バナーは増やさない。 */
  h1.brand-title17aqs { margin: 0; min-width: 0; line-height: 1; }
  .brand-title17aqs img { display: block; width: 216px; height: 72px; max-width: 100%; object-fit: contain; }
  .brand-title17aqs + .sub { display: none; }
  @media (max-width:760px) {
    .brand-title17aqs img { width: 192px; height: 64px; }
  }
  /* タイトル横の海域バッジ（αテスト海域の表示）。控えめなアクセント色のタグ */
  h1 .worldtag, .worldtag { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .08em;
       padding: 4px 8px 3px; border-radius: 999px; color: #9fd0ff;
       background: rgba(74,139,255,.16); border: 1px solid #3a6396;
       flex: 0 0 auto; white-space: nowrap; align-self: center; }
  /* 見出し: グラデのチップ＋左アクセントバー＋太字で目立たせる */
  h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; color: var(--text-strong);
       display: flex; align-items: center; gap: 8px; letter-spacing: .02em;
       padding: 8px 11px; border-radius: var(--radius);
       background: linear-gradient(90deg, rgba(74,139,255,.26), rgba(74,139,255,.03));
       border: 1px solid #305b8c; box-shadow: inset 3px 0 0 var(--accent); }
  h2 .pill { margin-left: auto; }
  /* 17AB4: 💬チャットの見出しに置く、公式Discordへの小さな導線。
     🔴 h2 は flex・折り返し無しなので、**この要素が伸びると「↻ 更新」が押し出される**。
        flex: 0 1 auto（伸びない・縮む）＋ min-width:0 ＋ ellipsis で、狭い枠では自分から縮む。
        長い一言（「も盛り上がってます！」）は .only-wide なので狭い画面では最初から出ない。 */
  /* 🔴 見出しの文字は縮ませない。これが無いと、チップに押されて「💬 チャット」自体が
     折り返し、見出しが2〜3行に膨らむ（実測 46px→102px）。縮むのはチップだけにする。 */
  h2 .h2t { flex: 0 0 auto; white-space: nowrap; }
  h2 .dchip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
       display: inline-flex; align-items: center; gap: 4px;
       font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-decoration: none;
       color: #e6e9ff; background: linear-gradient(90deg, rgba(88,101,242,.45), rgba(88,101,242,.14));
       border: 1px solid #5865f2; border-radius: 999px; padding: 3px 10px; line-height: 1.5;
       box-shadow: 0 0 8px 0 rgba(88, 101, 242, .45);
       transition: background .15s ease, color .15s ease; }
  h2 .dchip .di { font-size: 12px; flex: 0 0 auto; }
  h2 .dchip:hover, h2 .dchip:focus-visible { background: #5865f2; color: #fff; }
  /* 「盛り上がってます」の気配。控えめに脈打たせる（動きを嫌う設定では止める）。
     🔴 17AB6: **box-shadow を動かしてはいけない**。塗り直しの要るプロパティを 60fps で
        動かすと、その要素だけでは済まず、同じ描画レイヤ（＝地図キャンバス 1076×740 を
        2枚かかえるページ本体）が丸ごと毎フレーム描き直される。実測（CPU4倍・ログイン済み・
        何も操作せず放置）で **メインスレッド占有率 2% → 50%**。このチップ1個が全ログイン
        ユーザーの端末でCPUと電池を焼いていた。
        グローは上の box-shadow に**静止**で持たせ、脈動は合成できる opacity だけで作る。 */
  h2 .dchip { animation: dchipGlow 3.2s ease-in-out infinite; }
  /* 見出しの直下に置く細い帯。ここは幅いっぱいなので、一言を切らずに出せる。 */
  .dstrip { display: flex; align-items: center; gap: 6px; margin: -4px 0 8px;
       padding: 5px 10px; border-radius: 999px; text-decoration: none;
       font-size: 11.5px; line-height: 1.6; color: #dfe3ff;
       background: linear-gradient(90deg, rgba(88,101,242,.30), rgba(88,101,242,.06));
       border: 1px solid #4a55c8; transition: background .15s ease; }
  .dstrip b { color: #fff; font-weight: 600; min-width: 0; overflow: hidden;
       text-overflow: ellipsis; white-space: nowrap; }
  .dstrip .di { flex: 0 0 auto; font-size: 12px; }
  .dstrip .go { flex: 0 0 auto; margin-left: auto; color: #aab4ff; font-weight: 600; white-space: nowrap; }
  .dstrip:hover, .dstrip:focus-visible { background: linear-gradient(90deg, rgba(88,101,242,.55), rgba(88,101,242,.18)); }
  @keyframes dchipGlow {
    0%, 100% { opacity: .74; }
    50% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) { h2 .dchip { animation: none; } }
  /* 17RL: 見出しの右端に置く小さな更新ボタン（💬チャットの「↻ 更新」）。
     ⚠️ h2 の文字は 17px/800 なので、そのままだと見出しと同じ大きさの塊になる。小さく落とす。 */
  h2 .chatreload { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 500;
       padding: 3px 9px; border-radius: 999px; line-height: 1.5; }
  /* 情報アイコン（ホバー/タップで説明ツールチップ） */
  .info { display: inline-flex; align-items: center; justify-content: center;
       width: 17px; height: 17px; border-radius: 50%; background: #26456a; color: #cfe2f5;
       font-size: 12.5px; font-weight: 600; font-style: normal; cursor: help; border: 1px solid #3a6396;
       flex: 0 0 auto; user-select: none; }
  .info:hover { background: #2f6df0; color: #fff; }
  /* ツールチップ本体 */
  #tip { position: fixed; z-index: 9999; max-width: 270px; background: #0b1a2c; color: #dbe8f5;
       border: 1px solid #2f5a8f; border-radius: 9px; padding: 9px 11px; font-size: 14px; line-height: 1.55;
       box-shadow: var(--shadow-pop); pointer-events: none; display: none; }
  /* 画面モード帯（未ログイン / 観戦） */
  #modeBanner.modebanner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
       margin: 8px 0 0; padding: 10px 14px; border-radius: 11px; font-size: 15px; font-weight: 400; }
  #modeBanner.modebanner button { margin-left: auto; }
  #modeBanner.guest { background: linear-gradient(90deg, #3a2f10, #241d09); color: #ffe6a8; border: 1px solid #6d5720; }
  #modeBanner.other { background: linear-gradient(90deg, #10314f, #0b2136); color: #cfe6ff; border: 1px solid #2c527c; }
  /* 17AAX: ログイン済みなのに島がまだ無い人 — 登録の最後の一歩。いちばん強い色で1本だけ出す */
  #modeBanner.needisland { background: linear-gradient(90deg, #3d1f10, #26140a); color: #ffdcc2;
       border: 1px solid #8a4a1f; box-shadow: 0 0 0 1px rgba(255,160,80,.18) inset; }
  #modeBanner.needisland b { color: #fff1e2; }
  /* 17AB6: 広がる輪は「box-shadow の spread を伸ばす」＝毎フレーム塗り直し（ページ全体が
     60fps で再描画される）。輪そのものは ::after に静止で持たせ、**広がって消える**動きは
     合成できる transform: scale ＋ opacity で作る。見え方は同じ、コストはほぼゼロ。 */
  #modeBanner.needisland #mbNeedIsland { position: relative; }
  #modeBanner.needisland #mbNeedIsland::after {
    content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
    border-radius: inherit; box-shadow: 0 0 0 7px rgba(255, 150, 70, .55);
    animation: needisland 2.4s ease-in-out infinite; }
  @keyframes needisland {           /* 輪が外へ広がりながら消える（元の box-shadow 版と同じ見え方） */
    0% { opacity: .9; transform: scale(.94); }
    70%, 100% { opacity: 0; transform: scale(1.07); }
  }
  @media (prefers-reduced-motion: reduce) {
    #modeBanner.needisland #mbNeedIsland::after { animation: none; opacity: 0; }
  }
  /* おためし島（登録前でも自由に試せる体験）— 前向きなグリーン系で誘う */
  #modeBanner.demo { background: linear-gradient(90deg, #12351f, #0c2417); color: #c9f5d6; border: 1px solid #2f7a49; }
  #modeBanner.demo b { color: #eafff0; }
  #modeBanner.testsea { background:linear-gradient(90deg,#12264d,#1e1647);color:#dce9ff;border:1px solid #7568d8;box-shadow:0 0 18px rgba(117,104,216,.16); }
  #modeBanner.testsea b { color:#fff1a8; }
  #modeBanner.testsea button,#modeBanner.testsea a { margin-left:0; }
  #modeBanner.testsea .testsea-diff-open { margin-left:auto; }
  .testsea-diff-open { position:relative; }
  .tsdiff-new { display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:1px 5px;border-radius:999px;
    background:#ff4f72;color:#fff;font-size:9px;font-weight:600;line-height:1.4;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,79,114,.15); }
  .tsdiff-new[hidden] { display:none; }
  /* 17Q5: おためし島バナーは2段構成（説明＋CTA / やってみようチップ列） */
  #modeBanner.modebanner.demo { display: block; }
  #modeBanner.demo .mb-demo-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  #modeBanner.demo .mb-demo-main button { margin-left: auto; }
  #modeBanner.demo .mb-demo-try { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap;
    margin-top: 9px; padding-top: 9px; border-top: 1px dashed #2f7a49; font-size: 12.5px; font-weight: 400; }
  #modeBanner.demo .mb-demo-try .lbl { color: #8fd8a6; font-weight: 600; }
  #modeBanner.demo .mb-demo-try .chip { background: rgba(58,170,96,.14); border: 1px solid #2f7a49;
    border-radius: 999px; padding: 4px 11px; color: #d9fbe4; white-space: nowrap; }
  #modeBanner.demo .mb-demo-try .chip b { color: #ffffff; }
  /* 17Q5: 未ログイン帯にボタンが2つ並ぶので、右寄せは先頭のボタンだけに効かせる */
  #modeBanner.guest button { margin-left: 0; }
  #modeBanner.guest #mbDemo { margin-left: auto; }
  /* 17Q5: 「おためし島で遊ぶ」押下時にマップ枠を2秒ハイライトして視線を誘導 */
  #mapPanel.demo-flash { animation: demoflash 1.3s ease-out 2; }
  @keyframes demoflash {
    0% { box-shadow: 0 0 0 0 rgba(88, 214, 133, .75); }
    70% { box-shadow: 0 0 0 10px rgba(88, 214, 133, 0); }
    100% { box-shadow: 0 0 0 0 rgba(88, 214, 133, 0); }
  }
  /* マップ下セクション（索敵順・戦況ボード）— 17P4でどちらもフル幅に */
  .scanwrap { margin-bottom: 14px; }
  .rboardwrap { margin-top: 14px; }
  /* 17RJ: 🤝 この海域の外交（📮目安箱 #15）。戦況ボードと同じ「マップ下のフル幅」に置く。
     ⚠️ 自島パネル(#diploPanel)の中には置かない——あちらは .ownonly で観戦者に隠れるが、
        ここに出しているのは公開ビューの情報なので誰にでも見せてよい（見せるべき）。 */
  .dipwrap { margin-top: 14px; }
  .dipover { display: flex; flex-wrap: wrap; gap: 10px; align-items: start; }
  .dipover .dbox { flex: 1 1 260px; min-width: 0; align-self: start;
       border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); padding: 8px 10px; }
  .dipover .dbt { font-size: 12.5px; font-weight: 600; color: #cfe2f5; margin-bottom: 6px; }
  .dipover .drow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
       font-size: 12.5px; color: var(--text-2); padding: 4px 0; border-top: 1px solid #1b3350; }
  .dipover .drow:first-of-type { border-top: 0; }
  .dipover .dn { color: #cfe2f5; font-weight: 500; min-width: 0;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12em; }
  .dipover .dn.dclick { cursor: pointer; }
  .dipover .dn.dclick:hover { color: #9fd0ff; text-decoration: underline; }
  .dipover .dop { flex: none; font-weight: 600; }
  .dipover .dop.war { color: #ff8a72; }
  .dipover .dop.pend { color: var(--gold-soft); }
  .dipover .dop.amity { color: #7fd1ff; }
  .dipover .dnote { flex: none; font-size: 11.5px; color: var(--muted); }
  .dipover .dnote.hot { color: var(--gold-soft); font-weight: 500; }
  /* 同盟のメンバー名は行を折り返して全部出す（誰が入っているかが本題なので省略しない） */
  .dipover .dmem { flex: 1 1 100%; font-size: 11.5px; color: var(--muted);
       display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
  .dipover .dmem .dn { font-weight: 400; max-width: 10em; }
  .dipover .dnone { font-size: 12px; color: var(--muted); }
  .dipover .dfoot { flex: 1 1 100%; font-size: 11.5px; color: var(--muted); }
  /* 17RU: カード/表の切替トグル＋島ごとの外交まとめ表 */
  .dipover .diptoggle { flex: 1 1 100%; display: flex; gap: 6px; margin-bottom: 2px; }
  .dipover .dipseg { font: inherit; font-size: 12px; font-weight: 500; padding: 3px 13px; border-radius: 999px;
       border: 1px solid #34608f; background: transparent; color: #bfe0ff; cursor: pointer; }
  .dipover .dipseg.on { background: rgba(74,139,255,.18); border-color: #4a8bff; color: #eaf3ff; }
  .dipover.has-table { display: block; }   /* 表のときは flex をやめてブロック（横スクロール枠のため） */
  .dipover .diptbl-scroll { overflow-x: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; }
  .dipover .diptbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
  .dipover .diptbl th, .dipover .diptbl td { border: 1px solid #1b3350; padding: 5px 8px;
       text-align: left; vertical-align: top; }
  .dipover .diptbl th { background: var(--panel-2); color: #cfe2f5; font-weight: 600; font-size: 12px; white-space: nowrap; }
  .dipover .diptbl td.dtc-isl { white-space: nowrap; }
  .dipover .diptbl .dn { display: inline-block; margin: 1px 8px 1px 0; max-width: 11em; }
  .dipover .diptbl td .dnote { margin-left: 2px; }
  .dipover .dpill { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 9px; border-radius: 999px;
       border: 1px solid #34608f; color: #bfe0ff; text-decoration: none; white-space: nowrap; }
  .dipover .dnul { color: var(--muted); }
  .dipover .dmore { font-size: 11px; color: var(--muted); margin-left: 2px; white-space: nowrap; }
  .dipover .dprot { margin-right: 2px; }
  /* 17P4: 戦況ボード見出し（タイトル＋メタ情報＋そのほかの項目セレクタ） */
  .rbhead { flex-wrap: wrap; row-gap: 5px; }
  .rbhead .rbtitle { flex: none; }
  .rbhead .rbmeta { font-size: 12px; font-weight: 400; color: var(--text-2); letter-spacing: .2px; }
  .rbhead .rbspacer { flex: 1 1 auto; min-width: 0; }
  .rbetc { max-width: 210px; font-size: 12.5px; font-weight: 400; padding: 3px 6px;
       border-radius: 7px; background: #16324e; color: #cfe2f5; border: 1px solid #274a6e; }
  .rbetc:hover { border-color: var(--border-strong); }
  .rbetc option { background: #12243a; color: #e8eef5; }
  /* 自島の順位カード（クリックで下の表を切り替え） */
  /* auto-fit: 画面幅ではなくパネルの実幅で列数が決まる（マップ幅が変わっても崩れない） */
  .rbcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; }
  .rbcard { text-align: left; font: inherit; padding: 7px 9px; border-radius: 10px; min-width: 0;
       background: var(--panel-2); border: 1px solid var(--border); cursor: pointer;
       display: flex; flex-direction: column; gap: 2px; }
  .rbcard:hover { border-color: var(--border-strong); background: #142943; }
  .rbcard.on { border-color: var(--accent); background: linear-gradient(180deg, #1b3a63, #132743);
       box-shadow: inset 0 0 0 1px rgba(74,139,255,.25); }
  .rbcard .rbc-l { font-size: 11.5px; font-weight: 500; color: var(--text-2);
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rbcard.on .rbc-l { color: #cfe2f5; }
  .rbcard .rbc-r { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; row-gap: 0; }
  .rbcard .rbc-r b { font-size: 20px; font-weight: 600; color: var(--text-strong); line-height: 1.1; }
  .rbcard .rbc-r .u { font-size: 11px; color: var(--text-2); }
  .rbcard .rbc-r .out { font-size: 14px; font-weight: 600; color: var(--muted); }
  .rbcard .rbc-v { font-size: 11.5px; color: var(--muted);
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 表（左）と補助情報（右）の2カラム */
  .rbmain { display: flex; flex-wrap: wrap; gap: 14px; align-items: start; margin-top: 12px; }
  .rbtable { flex: 1 1 420px; min-width: 0; }
  /* 表の横に置けるときは縦積み、折り返して1段になったときは横並びになる（余白を作らない） */
  .rbside { flex: 1 1 250px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
  .rbbox { flex: 1 1 210px; min-width: 0; align-self: start;
       border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); padding: 8px 10px; }
  .rbbox .rbb-t { font-size: 12.5px; font-weight: 600; color: #cfe2f5; margin-bottom: 6px; }
  .rbbox .rbb-r { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px;
       color: var(--text-2); padding: 3px 0; border-top: 1px solid #1b3350; }
  .rbbox .rbb-r:first-of-type { border-top: 0; }
  .rbbox .rbb-r .nm { flex: 1 1 auto; min-width: 0; color: #cfe2f5;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rbbox .rbb-r .df { flex: none; font-weight: 500; color: var(--text-strong); }
  .rbbox .rbb-n { font-size: 12px; color: var(--muted); }
  .rbbox .rbb-pct { font-size: 12px; color: var(--gold-soft); font-weight: 500; margin-top: 5px;
       border-top: 1px solid #1b3350; padding-top: 5px; }
  /* 順位変動（▲▼） */
  .rkup { color: var(--ok); font-weight: 500; }
  .rkdn { color: #e07a6f; font-weight: 500; }
  .rkfl { color: #63788d; }
  /* 1位を100%とした量の目安バー */
  .rkbarwrap { height: 3px; border-radius: 2px; background: #1b3350; margin-top: 3px; overflow: hidden; }
  .rkbar { display: block; height: 100%; border-radius: 2px; background: var(--accent); opacity: .6; }
  tr.me .rkbar { background: var(--ok); opacity: .75; }
  .ranktbl tr.rksep td { text-align: center; color: #46607d; letter-spacing: 3px;
       padding: 1px 5px; font-size: 11px; }
  .ranktbl tr.rksep:hover td { background: none; }
  .ranktbl td.rkpos { width: 42px; white-space: nowrap; font-weight: 500; }
  .ranktbl td.rkdelta { width: 46px; text-align: right; white-space: nowrap; font-size: 12.5px; }
  .ranktbl td.rkval { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rbfoot { margin-top: 10px; }
  @media (max-width: 720px) {
    .rbcards { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .rbside { flex-basis: 100%; }
    .rbetc { max-width: 100%; flex: 1 1 140px; }
  }
  .sectitle { font-size: 16px; font-weight: 600; color: #eaf3fb; margin: 0 0 10px;
       display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px;
       background: var(--head-grad);
       border: 1px solid var(--head-border); box-shadow: inset 3px 0 0 var(--accent); }
  /* 17F3: 折りたたみ見出し（索敵順・外交）。▶/▼で開閉が分かる。タップ/クリックで開閉 */
  .collhead { cursor: pointer; user-select: none; -webkit-user-select: none; }
  .collhead:hover { filter: brightness(1.12); }
  .collhead .caret { font-size: 11px; color: var(--accent, #4da3ff); width: 14px; flex: none;
       display: inline-block; text-align: center; }
  .collhead.closed { opacity: .92; margin-bottom: 2px; }
  /* 17P4: 索敵順パネル（左=設定 / 右=艦艇一覧）。フル幅になったので2カラムに */
  .scangrid { display: flex; flex-wrap: wrap; gap: 14px; align-items: start; }
  .scanset { flex: 1 1 330px; min-width: 0; }
  .scanships { flex: 1 1 380px; min-width: 0; }
  .scanlbl { font-size: 12px; font-weight: 500; color: var(--text-2); margin: 2px 0 5px;
       display: flex; align-items: center; gap: 5px; }
  .scandirty { font-size: 11.5px; font-weight: 500; color: var(--warn); align-self: center; }
  .scanshead { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
  .scanshead .t { font-size: 12.5px; font-weight: 600; color: #cfe2f5; }
  .scanshead .n { font-size: 11.5px; color: var(--muted); flex: 1 1 auto; }
  .scanshead .sc-all { font-size: 11.5px; padding: 2px 8px; flex: none; }
  .scanshead .sc-assign, .scanshead .sc-assign-cancel, .scanshead .sc-assign-save {
    font-size: 11.5px; padding: 3px 8px; flex: none; }
  .sc-assign-note { margin: 0 0 6px; padding: 6px 8px; border-radius: 7px;
    background: rgba(47,109,240,.10); border: 1px solid rgba(77,143,214,.28);
    color: #a9c4df; font-size: 11.5px; line-height: 1.5; }
  .sc-assign-bulk { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; margin: 0 0 8px;
    padding: 9px; border: 1px solid rgba(255,215,106,.42); border-radius: 9px;
    background: linear-gradient(135deg,rgba(255,215,106,.10),rgba(47,109,240,.08)); }
  .sc-assign-bulk > b { align-self: center; color: #ffe49a; margin-right: 3px; }
  .sc-assign-bulk label { display: grid; gap: 3px; color: #9fb7ce; font-size: 10.5px; }
  .sc-pick17bc8 { width: 18px; height: 18px; margin: 0 5px 0 0; vertical-align: middle; accent-color: #ffd76a; }
  .sc-assign-bulk select { min-width: 135px; max-width: 200px; padding: 5px 7px; border-radius: 6px;
    border: 1px solid #496986; background: #10263b; color: #edf6ff; }
  .sc-assign-bulk .sc-assign-arrow { align-self: center; color: #ffd76a; font-size: 18px; }
  .sc-assign-bulk button { min-height: 31px; }
  @media (max-width: 560px) {
    .sc-assign-bulk { align-items: stretch; }
    .sc-assign-bulk > b { width: 100%; }
    .sc-assign-bulk label { flex: 1 1 120px; }
    .sc-assign-bulk select { width: 100%; min-width: 0; max-width: none; }
    .sc-assign-bulk button { width: 100%; }
  }
  .scantbl { width: 100%; font-size: 12px; border-collapse: collapse; }
  .scantbl th { color: #8fb0cc; font-weight: 500; text-align: left; padding: 2px 5px; }
  .scantbl td { padding: 2px 5px; border-top: 1px solid #1b3350; color: #cfe0f2; }
  .scantbl td.sc-c { white-space: nowrap; color: var(--text-2); width: 4.5em; }
  .scantbl td.sc-n { min-width: 0; }
  .scantbl td.sc-p { white-space: nowrap; color: var(--text-2); }
  .scantbl td.sc-h { white-space: nowrap; text-align: right; width: 3.5em; }
  .scantbl td.sc-a { width: 4.8em; white-space: nowrap; }
  .scantbl td.sc-a select { width: 100%; min-width: 62px; padding: 3px 4px; font-size: 11.5px;
    color: #e3f0fc; background: #152f4b; border: 1px solid #37648e; border-radius: 6px; }
  .scantbl td.sc-a select:disabled { opacity: .45; }
  .scantbl tr.sc-g td { background: #16304c; color: #cfe2f5; font-weight: 600;
       padding: 3px 6px; border-top: 1px solid var(--head-border); }
  .scantbl tr.sc-g.on td { background: #1d4270; box-shadow: inset 3px 0 0 var(--accent); }
  .scantbl tr.sc-g .cnt { font-weight: 400; color: #9fc0e0; margin-left: 6px; }
  .scantbl tr.sc-g .cur { font-size: 10.5px; font-weight: 500; color: var(--gold-soft);
       border: 1px solid #6d5720; background: #3a2f10; border-radius: 5px; padding: 0 5px; margin-left: 6px; }
  .fleetpick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .fleetpick button { padding: 4px 9px; font-size: 14px; background: #16324e; color: #bcd2e8; border: 1px solid #274a6e; }
  .fleetpick button:hover:not(.on) { background: #1e4571; border-color: var(--border-strong); }
  .fleetpick button.on { background: var(--accent-btn); color: #fff; border-color: var(--accent-btn); }
  /* 17AMX: 命名済みをまとめて確認できる艦隊名一覧。 */
  .fleet-name-directory17amx { margin: 0 0 10px; padding: 9px; border: 1px solid #31577d;
    border-radius: 10px; background: linear-gradient(135deg,rgba(38,91,139,.22),rgba(11,29,47,.72)); }
  .fleet-name-directory-title17amx { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px;
    color: #dceeff; font-size: 13px; font-weight: 700; }
  .fleet-name-directory-title17amx small { color: #8fa9c0; font-size: 10.5px; font-weight: 400; }
  .fleet-name-directory-grid17amx { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
  .fleet-name-directory-grid17amx > span { min-width: 0; display: grid; gap: 1px; padding: 5px 7px;
    border: 1px solid #263f5a; border-radius: 7px; background: rgba(9,27,44,.78); }
  .fleet-name-directory-grid17amx b { color: #91abc3; font-size: 9.5px; }
  .fleet-name-directory-grid17amx em { overflow: hidden; color: #e8f3fc; font-size: 12px;
    font-style: normal; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .fleet-name-directory-grid17amx .unnamed em { color: #657f98; font-weight: 400; }
  @media (max-width: 680px) {
    .fleet-name-directory-grid17amx { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .fleet-name-directory-title17amx { align-items: flex-start; flex-direction: column; gap: 2px; }
  }
  /* 上部ステータス行: 左(島操作)と右(ターン操作)を分けて整理 */
  .statusrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .statusrow .grp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .statusspace { flex: 1 1 24px; min-width: 12px; }
  .statusrow .ttl { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600;
       color: #dbe8f5; padding: 4px 10px 4px 9px; border-radius: var(--radius-s); white-space: nowrap;
       background: var(--head-grad);
       border: 1px solid var(--head-border); box-shadow: inset 3px 0 0 var(--accent); }
  .statusrow .ttl .muted { font-weight: 400; margin-left: 3px; }
  /* 観戦グループは色を変えて「他の島を見にいく」導線を区別 */
  .statusrow .ttl.obs { background: linear-gradient(90deg, rgba(90,200,170,.20), rgba(90,200,170,.02));
       border-color: #2c7c6a; box-shadow: inset 3px 0 0 #3fbf9a; color: #cdeee2; }
  /* ===== トップ（未ログイン時）のランディング ===== */
  .hero-panel { background:
      radial-gradient(1200px 300px at 15% -10%, rgba(74,139,255,.18), transparent 60%),
      var(--panel); }
  .hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  /* 17RV: バナーを <picture>（WebP＋PNGフォールバック）で包んだ。flex の子が
     img→picture に変わっても寸法が同じになるよう、picture 側にも幅を明示する */
  .hero > picture { display: block; width: 100%; }
  .herobanner { display: block; width: 100%; height: auto; border-radius: 14px;
    border: 1px solid #2c4a6e; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
  .hero-copy { flex: 1 1 300px; min-width: 0; }
  .hero-tag { display: inline-block; font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
    color: #bfe0ff; background: rgba(74,139,255,.16); border: 1px solid #34608f;
    padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
  /* 17E4: タグ内の語句(.ht)は途中で折らない。区切りの／は余白で従来の見た目を再現 */
  .hero-tag .ht { white-space: nowrap; }
  .hero-tag .ht-sep { margin: 0 6px; opacity: .8; }
  .hero-title { font-size: 27px; line-height: 1.25; font-weight: 600; margin: 0 0 8px;
    color: #f2f7fc; letter-spacing: .01em; word-break: keep-all; }
  .hero-sub { font-size: 14px; line-height: 1.7; color: #c4d4e6; margin: 0 0 12px; }
  .hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  /* 17E4: アイコン(.ic)＋本文(.tx)の2子構成。本文を1つのspanにまとめて自然な位置でだけ折り返す */
  .hero-points li { font-size: 13.5px; color: #d7e4f2; display: flex; align-items: baseline; gap: 8px; }
  .hero-points li .ic { flex: 0 0 auto; }
  .hero-points li .tx { flex: 1 1 auto; min-width: 0; }
  .hero-points b { color: #fff; }
  /* 新規登録カード（主役） */
  .signup { margin-top: 18px; max-width: 520px; background: #10233a;
    border: 1px solid #2f5686; border-radius: 14px; padding: 16px 16px 14px;
    box-shadow: 0 6px 22px rgba(0,0,0,.28); }
  /* 17AFV: 「登録フォームの下にログインボタン」ではなく、入口から明確に二分する。 */
  .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: -3px 0 16px;
    padding: 4px; border: 1px solid #284868; border-radius: 12px; background: #0a192a; }
  .auth-tabs button { min-width: 0; padding: 9px 8px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: #91abc4; font-size: 11.5px; line-height: 1.35; cursor: pointer; }
  .auth-tabs button b { display: inline-block; margin-top: 1px; color: inherit; font-size: 14px; }
  .auth-tabs button[aria-selected="true"] { color: #eef7ff; border-color: #4179b0;
    background: linear-gradient(150deg, #214d79, #173858); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
  .auth-tabs button:focus-visible { outline: 2px solid #71b2f0; outline-offset: 2px; }
  .auth-pane[hidden] { display: none !important; }
  .login-lead { margin: -3px 0 14px; color: #b4c8dc; font-size: 13px; line-height: 1.65; }
  .login-recovery { padding: 10px 11px; border: 1px solid #31597a; border-radius: 9px;
    background: rgba(49,89,122,.18); color: #bcd5e9; font-size: 12.5px; line-height: 1.6; }
  .login-help { border-top: 1px solid #21385a; padding-top: 9px; color: #91abc4; font-size: 12.5px; }
  .login-help summary { cursor: pointer; color: #b9d3ec; }
  .login-help p { margin: 7px 0 0; line-height: 1.65; }
  .signup-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: #eaf3fb; }
  .signup .loginform { max-width: none; }
  .lf-row label .opt { font-size: 11px; color: #7f96ae; font-weight: 500; margin-left: 6px; }
  .signup-cta { width: 100%; margin-top: 4px; padding: 12px 14px; font-size: 15.5px; font-weight: 600;
    border-radius: 11px; box-shadow: 0 4px 16px rgba(47,109,240,.4); }
  .signin-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid #21385a;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #9fb6cf; }
  .signin-row .b3 { padding: 6px 16px; }
  /* 17AQN: 特長は短い3項目を固定グリッドにし、PCでもスマホでも1行で把握できるようにする。 */
  .signup-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:-4px 0 12px}
  .signup-trust span{display:grid;min-width:0;place-items:center;padding:6px 4px;border:1px solid rgba(86,169,132,.32);border-radius:8px;background:rgba(38,116,81,.14);color:#a9e8bd;font-size:12px;font-weight:500;white-space:nowrap}
  .demo-cta { margin-top: 12px; font-size: 13px; color: #9fb6cf; text-align: center; }
  .demo-note { margin-top: 6px; font-size: 12px; color: #7e97b3; }
  /* 17Q5: はじめかたの3ステップ（ヒーローと登録フォームの間） */
  .startsteps { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px;
    background: rgba(23, 48, 80, .45); border: 1px solid #24466e; }
  .startsteps .ss-item { flex: 1 1 180px; min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
  .startsteps .ss-no { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: #2f6df0; color: #fff; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; margin-top: 1px; }
  .startsteps .ss-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .startsteps .ss-tx b { font-size: 13.5px; color: #fff; }
  .startsteps .ss-tx span { font-size: 12px; color: #9fb6cf; line-height: 1.5; }
  .startsteps .ss-arrow { align-self: center; color: #4d84b8; font-weight: 600; flex: 0 0 auto; }
  @media (max-width: 760px) {
    /* 17QC: 縦積みでは flex-basis が「高さ」に効くため、そのままだと各ステップが
       180px の背丈になって間延びしていた（実測 3項目で586px）。縦では内容なりの高さに戻す。 */
    .startsteps { flex-direction: column; gap: 10px; }
    .startsteps .ss-item { flex: 0 0 auto; }
    .startsteps .ss-arrow { display: none; }
  }
  /* 「おためし島で遊んでみる」を控えめなアウトラインボタン調に（登録CTAより一段弱く） */
  .demo-btn { display: inline-block; margin-top: 6px; padding: 9px 16px; border-radius: 999px;
    background: rgba(127,209,255,.08); color: #bfe6ff; font-weight: 600; text-decoration: none;
    border: 1px solid #35618a; transition: background .15s, border-color .15s, transform .05s; }
  .demo-btn:hover { background: rgba(127,209,255,.16); border-color: #4d84b8; }
  .demo-btn:active { transform: translateY(1px); }
  .only-narrow { display: none; }
  .only-wide { display: none; }
  /* PC（760px超）: バナーとコピーを横並び、改行を活かす */
  @media (min-width: 761px) {
    /* 17RV: flex の子は <picture>（WebP化の包み）なので、横並びの寸法は picture 側にも指定する。
       .herobanner（中の img）への max-width も残す＝picture 未対応の古いブラウザでも同じ見た目 */
    .hero > picture { max-width: 440px; flex: 0 0 auto; }
    .herobanner { max-width: 440px; flex: 0 0 auto; }
    .only-wide { display: inline; }
  }
  .specgrp { padding-left: 4px; }
  /* 上部「次の更新」一覧（ターンの横）。直近の更新時刻を光らせて強調表示 */
  .turnsched { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 2px; }
  .turnsched .tslabel { color: #8fb0cc; font-size: 11.5px; margin-right: 2px; }
  .turnsched .tschip { font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: #12283f;
    border: 1px solid #29486a; color: #bcd3ea; font-variant-numeric: tabular-nums; }
  .turnsched .tschip.past { opacity: .42; }
  /* 「翌」＝日をまたぐスロットの目印 */
  .turnsched .tschip .tsday { font-size: 9.5px; font-weight: 500; color: #ffcf3a; margin-right: 3px;
    padding: 0 3px; border-radius: 4px; background: rgba(255,207,58,.16); }
  /* 直近の更新: 明るい青＋脈打つグロー（font-weightで詰まらないよう少し広めに） */
  .turnsched .tschip.next { background: linear-gradient(180deg, #2f7de0, #1f5aa0); border-color: #7fc1ff;
    color: #ffffff; font-weight: 600; padding: 2px 9px; box-shadow: 0 0 0 2px rgba(127,193,255,.35), 0 0 10px rgba(74,139,255,.5);
    animation: tschipglow 1.8s ease-in-out infinite; }
  .turnsched .tschip.next .tsday { color: #fff2c2; background: rgba(255,255,255,.2); }
  /* 17AB6: グローの強弱を box-shadow で往復させると毎フレーム塗り直しになる（ページ全体が
     再描画される）。影は上の静止値で持ち、脈動は合成できる opacity で作る。
     ⚠️ 「直近の更新」チップは**常に画面にある**ので、ここが塗り直しだと放置中もずっと重い。 */
  @keyframes tschipglow {
    0%,100% { opacity: .78; }
    50%     { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .turnsched .tschip.next { animation: none; } }
  /* 世界地図ボタン横の「最新かいせんニュース」1件（横長ティッカー。1行省略表示） */
  .latestnews { display: inline-flex; align-items: center; gap: 7px; max-width: 460px; overflow: hidden;
    white-space: nowrap; font-size: 14.5px; font-weight: 400; color: #dcebf9; background: #0e2036; border: 1px solid #2a4a6b;
    border-radius: 999px; padding: 5px 13px; cursor: pointer; vertical-align: middle; font-family: inherit; text-align: left; }
  .latestnews .lncat { font-size: 15.5px; }
  .latestnews:hover { background: #143050; border-color: #315a80; }
  /* 外交・戦争の最新ニュースは上部でも目立たせる（金色枠＋淡いパルス） */
  .latestnews.big { border-color: #d9b24a; background: #2a2412; color: #ffe9a8; box-shadow: 0 0 0 3px rgba(217,178,74,.3); animation: bignewspulse 2.2s ease-in-out infinite; }
  /* 17RC: 「視差を減らす」設定では脈動を止める（金色の枠と色は残す＝目立ち方は保つ）。
     周囲の .tkchip.tk-urgent / .prm-sec::after / .shopOpenBtn::after は対応済みで、ここだけ漏れていた。
     ※ 2400行台の `.latestnews.big { animation: none }` は **@media (max-width:760px)**（スマホ軽量化）
       の中なので、PCで「視差を減らす」を入れている人には効いていなかった。 */
  @media (prefers-reduced-motion: reduce) { .latestnews.big { animation: none; } }
  /* 17AB6: 同上。金枠は .latestnews.big の box-shadow に静止で持たせ、脈動は opacity で。 */
  @keyframes bignewspulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
  .latestnews .lncat { flex: 0 0 auto; }
  .latestnews .lntx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 島の運営: アイコン付きのボタングリッド */
  .opgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .opbtn { display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left;
       background: #16324e; border: 1px solid #274a6e; color: #d3e2f2; padding: 9px 11px; border-radius: 9px;
       font-size: 15px; font-weight: 500; transition: background .12s, border-color .12s, transform .06s; }
  .opbtn:hover { background: #1e4571; border-color: var(--border-strong); }
  .opbtn .ic { font-size: 17px; line-height: 1; filter: saturate(1.1); }
  .opbtn[hidden] { display: none; }   /* 🔴 17B84: 新人期間を終える・10月期の全面降伏（hidden 属性で出し入れ） */
  .opbtn.danger { grid-column: 1 / -1; background: #3a1f1c; border-color: #7a3a30; color: #f1cbc3; }
  .opbtn.danger:hover { background: #4e2620; border-color: #9a4638; }
  /* 開発者向け設定の折りたたみ。通常プレイヤーには見せない（display:none）。
     ?dev=1 付きで開く（localStorage hako_dev に記憶。?dev=0 で解除）と boot.js が .devshow を付けて表示する。 */
  .devtools { margin-top: 10px; display: none; }
  .devtools.devshow { display: block; }
  .devtools > summary { cursor: pointer; color: #7f93a8; font-size: 14px; list-style: none;
       padding: 6px 10px; border: 1px dashed #2a3f5c; border-radius: 8px; width: fit-content; user-select: none; }
  .devtools > summary:hover { color: #b9c8d8; border-color: #3a5a7f; }
  .devtools[open] > summary { color: #cfe0f2; }
  /* 説明の出せる用語（点線下線＋ヘルプカーソル） */
  .term { border-bottom: 1px dotted #6f93b8; cursor: help; }
  .term:hover { color: #eaf3fb; border-bottom-color: #9cc0e6; }
  .pill.term { border-bottom: 0; } /* ピルは点線下線を出さない（ヘルプカーソルのみ） */
  /* 世界地図: ホバー中の島の範囲を強調（3カテゴリ色が白飛びしない程度に明るく） */
  /* 世界地図のホバー強調: 下地はcanvas(#worldbase)なので filter は効かない。半透明の金色オーバーレイ＋金縁で示す */
  .cell.flat.hl { background: rgba(255,224,130,.24); box-shadow: 0 0 0 1px rgba(255,224,130,.95) inset; z-index: 4; }
  /* 世界地図: 島にホバーしたとき島名を出す小ポップアップ */
  #mapNameTip { position: fixed; z-index: 9998; display: none; pointer-events: auto;
       background: #0b1a2c; color: #eaf3fb; border: 1px solid var(--border-strong); border-radius: var(--radius-s);
       padding: 5px 10px; font-size: 13px; font-weight: 400; white-space: nowrap;
       box-shadow: var(--shadow-pop); }
  #mapNameTip .who { color: #8fb0cc; font-weight: 400; margin-left: 4px; }
  .cmd-trophy { display: inline-flex; align-items: center; justify-content: center; gap: 3px;
       vertical-align: 1px; margin-left: 5px; padding: 1px 6px 2px; min-height: 24px;
       border-radius: 999px; border: 1px solid #c7942b; color: #fff1b9; background: linear-gradient(180deg, #6a4b15, #3c2a0a);
       box-shadow: 0 1px 6px rgba(255, 201, 75, .28), inset 0 1px rgba(255,255,255,.16); font: inherit; font-size: 12px;
       font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
  .cmd-trophy:hover { filter: brightness(1.18); border-color: #ffe09a; }
  .cmd-trophy:active { transform: translateY(1px); }
  .cmd-trophy.compact { min-height: 21px; min-width: 22px; margin-left: 5px; padding: 1px 4px 2px; font-size: 13px; }
  .cmd-trophy-tx { font-size: 11px; }
  /* 島マップ: マスにホバーしたとき規模・艦の経験値などを出す小ポップアップ（17BP。表示のみ） */
  #cellInfoTip { position: fixed; z-index: 9998; display: none; pointer-events: none;
       background: #0b1a2c; color: #eaf3fb; border: 1px solid var(--border-strong); border-radius: var(--radius-s);
       padding: 5px 10px; font-size: 12.5px; line-height: 1.6; white-space: nowrap;
       box-shadow: var(--shadow-pop); }
  #cellInfoTip b { color: #ffe9a8; font-weight: 500; }
  #cellInfoTip .ci-xy { color: #8fb0cc; font-weight: 500; margin-right: 6px; }
  /* ランキング表: 島名＋ハンドル、自分の島を強調 */
  .ranktbl { width: 100%; font-size: 14.5px; border-collapse: collapse; }
  .ranktbl th { color: #8fb0cc; font-weight: 500; text-align: left; padding: 3px 5px; }
  .ranktbl td { padding: 3px 5px; border-top: 1px solid #1b3350; }
  .ranktbl tbody tr:hover td { background: rgba(74,139,255,.07); }
  .ranktbl tr.rkgo { cursor: pointer; }               /* 行クリックでその島を観光 */
  .ranktbl tr.rkgo:hover td { background: rgba(74,139,255,.12); }
  .ranktbl tr.me td { color: var(--ok); font-weight: 500; background: rgba(127,209,138,.06); }
  .ranktbl .hn { color: #8fb0cc; font-size: 12.5px; font-weight: 400; }
  /* 海域名タグ（別海域の島の出所表示。ランキング・チャット共通。17EA 世界横断集約） */
  .seatag { display: inline-block; font-size: 10.5px; font-weight: 500; line-height: 1.5;
    padding: 0 7px; border-radius: 999px; background: rgba(74,139,255,.14); color: #9cc4ef;
    border: 1px solid #2c4f7c; white-space: nowrap; vertical-align: middle; }
  /* 🌏 統合ランキングへのリンク（この海域のランキング見出し内） */
  .ranklink { cursor: pointer; font-size: 12px; font-weight: 500; margin-left: 6px;
    padding: 1px 9px; border-radius: 999px; background: rgba(74,139,255,.14); color: #9cc4ef;
    border: 1px solid #2c4f7c; white-space: nowrap; vertical-align: middle; text-decoration: none; }
  .ranklink:hover { background: rgba(74,139,255,.28); color: #d6e8ff; }
  /* 全順位モーダル */
  /* 17NM: モーダル類の重なり順について。スマホ表示(body.mmode)ではボトムシート(.msheet=241)と
     下部ナビ(.mnav=242)が常に前面にある。モーダルの z-index がそれより小さいと、シートを開いた
     ままそこから開いたポップアップ（個別チャット・目安箱など）がシートの裏に隠れてしまう
     （ユーザー報告: スマホではチャットの下に個人チャット用のポップが出現する）。
     そのため画面全体を覆うモーダルは 250 以上に揃える（.upd-ov=250 / .launch-ov=260 /
     .shop-ov=300 / #buyQtyModal=320 / #ynModal=330 / .tkuse-pop=340 / .toast=350）。 */
  #rankModal, #allianceModal, #visitorModal { position: fixed; inset: 0; z-index: 250; background: rgba(4,10,18,.62);
       backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  #rankModal .rm-box, #allianceModal .rm-box, #visitorModal .rm-box { background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
       width: min(540px, 97vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-modal); }
  #rankModal .rm-head, #allianceModal .rm-head, #visitorModal .rm-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #24405f; }
  #rankModal .rm-title, #allianceModal .rm-title, #visitorModal .rm-title { font-weight: 600; color: #eaf3fb; flex: 1; }
  #rankModal .rm-close, #allianceModal .rm-close, #visitorModal .rm-close { background: #2a3b53; color: #cdd9e6; border-radius: var(--radius-s); padding: 4px 10px; }
  #rankModal .rm-close:hover, #allianceModal .rm-close:hover, #visitorModal .rm-close:hover { background: #344a68; }
  #rankModal .rm-body, #allianceModal .rm-body, #visitorModal .rm-body { overflow: auto; padding: 8px 14px 14px; }
  /* 📮 17B04 観光者通信。島に貼りついて残る短い伝言。 */
  #visitorModal .vp-form textarea { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px;
       border-radius: 8px; border: 1px solid #2c4b6c; background: #0d1e33; color: #eaf3fb; resize: vertical; }
  #visitorModal .vp-form textarea:focus { outline: none; border-color: #4ea1ff; box-shadow: 0 0 0 2px rgba(78,161,255,.2); }
  #visitorModal .vp-row { padding: 9px 0; border-bottom: 1px solid #1b3049; }
  #visitorModal .vp-row:last-child { border-bottom: none; }
  #visitorModal .vp-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
  #visitorModal .vp-from { color: #ffe9a8; font-weight: 600; font-size: 13.5px; }
  #visitorModal .vp-at { margin-left: auto; }
  #visitorModal .vp-t { color: #e4f2ff; font-size: 14px; margin-top: 3px; overflow-wrap: anywhere; }
  #visitorModal .vp-x { background: transparent; border: none; color: #7f94a8; cursor: pointer; padding: 0 2px; font-size: 13px; }
  #visitorModal .vp-x:hover { color: #ff9c9c; }
  .ibanner .vp-open, .ibanner .vp-edit { cursor: pointer; border: 1px solid #2c4b6c; background: #14273e; color: #bcd9f7; }
  .ibanner .vp-open:hover, .ibanner .vp-edit:hover { background: #1b3454; border-color: #4ea1ff; }
  /* かいせんニュース詳細モーダル（3タブ・各1日分スクロール） */
  #newsHeader.clickable { cursor: pointer; }
  #newsHeader.clickable:hover { color: #eaf3fb; }
  .newsmore { font-size: 12px; font-weight: 400; color: #7db4ff; margin-left: 4px; }
  #newsHeader.clickable:hover .newsmore { text-decoration: underline; }
  #newsModal { position: fixed; inset: 0; z-index: 250; background: rgba(4,10,18,.62); /* 17NM: スマホのシート(241)/ナビ(242)より前面へ */
       backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  #newsModal .nm-box { background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
       width: min(700px, 97vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-modal); }
  #newsModal .nm-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #24405f; }
  #newsModal .nm-title { font-weight: 600; color: #eaf3fb; }
  #newsModal .nm-next { flex: 1; text-align: right; margin: 0 10px; color: #9fc0dd; font-size: 12.5px; white-space: nowrap; }
  #newsModal .nm-close { background: #2a3b53; color: #cdd9e6; border-radius: var(--radius-s); padding: 4px 10px; }
  #newsModal .nm-close:hover { background: #344a68; }
  #newsModal .nm-tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
  #newsModal .nm-tab { flex: 1; background: #1b2c42; color: #9fb6cf; border: 1px solid #24405f;
       border-radius: var(--radius-s); padding: 8px 6px; font-weight: 500; font-size: 13px; cursor: pointer; }
  #newsModal .nm-tab:hover { background: #223954; }
  #newsModal .nm-tab.on { background: #2f5c8a; color: #eaf3fb; border-color: #3a6fa5; }
  #newsModal .nm-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 14px; }
  #newsModal .nm-list { max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 6px; }
  #newsModal .nm-empty { color: var(--tx3); padding: 22px 6px; text-align: center; }
  #newsModal .nm-foot { padding: 8px 14px 12px; border-top: 1px solid #24405f; text-align: center; }
  #newsModal .nm-foot a { font-size: 12.5px; }
  /* ログイン/登録フォーム（ラベル＋入力の縦積み） */
  .loginform { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
  .lf-row { display: flex; align-items: center; gap: 10px; }
  .lf-row label { flex: 0 0 96px; font-size: 13px; color: #9fb6cf; font-weight: 400; text-align: right; }
  .lf-row input { flex: 1 1 auto; min-width: 0; }
  .animalpick { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 6px; max-height: 216px; overflow-y: auto; padding: 4px; }
  .animalpick .apitem { padding: 3px; border: 1px solid #2c4a6e; border-radius: 8px; background: #eaf2fb;
    cursor: pointer; line-height: 0; }
  .animalpick .apitem:hover { border-color: #3b6ea8; }
  .animalpick .apitem.on { border-color: #4d8fd6; box-shadow: 0 0 0 2px #2f6db0; background: #dbe9fb; }
  .animalpick .apitem svg { width: 34px; height: 34px; display: block; }
  .animalpick .apauto { display: inline-block; width: 34px; height: 34px; font-size: 22px; line-height: 34px; text-align: center; }
  .news .ne .tx b.nm.goto { cursor: pointer; text-decoration: underline dotted; }
  .news .ne .tx b.nm.goto:hover { color: #cfe6ff; }
  /* 発言ごとの表情ピッカー */
  .chatexprbtn { flex: 0 0 auto; width: 42px; height: 42px; padding: 3px; border: 1px solid #2c4a6e;
    border-radius: 8px; background: #10233a; cursor: pointer; line-height: 0; }
  .chatexprbtn:hover { border-color: #3b6ea8; }
  .chatexprbtn svg, .chatexprpop .cxitem svg { width: 30px; height: 30px; background: #eaf2fb; border-radius: 50%; }
  .chatexprbtn .auto, .chatexprpop .auto { display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; font-size: 20px; }
  .chatexprpop { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin-bottom: 6px;
    background: #0c1c30; border: 1px solid #1d3148; border-radius: 10px; }
  .chatexprpop .cxitem { width: 42px; height: 42px; padding: 3px; border: 1px solid #2c4a6e; border-radius: 8px;
    background: #10233a; cursor: pointer; line-height: 0; }
  .chatexprpop .cxitem:hover { border-color: #3b6ea8; }
  .chatexprpop .cxitem.on { border-color: #4d8fd6; box-shadow: 0 0 0 2px #2f6db0; }
  .lf-reg { border: 1px dashed #2c4a6e; border-radius: 10px; padding: 10px 12px; display: flex;
       flex-direction: column; gap: 10px; background: rgba(30,56,90,.18); }
  .lf-note { font-size: 12.5px; color: #8aa8c8; }
  .lf-hint { font-size: 12.5px; color: #8296ac; }
  /* 17KA: 新規登録フォームの磨き込み——入力ごとのライブ検証ノート・パスワード表示切替・フォーカスリング */
  .lf-row .lf-in { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  /* 17QC: 入力欄は枠いっぱいに。全体既定の input{width:130px} が効いてしまい、
     スマホ幅（.lf-row が縦積みになる）で「ログインID・ハンドルネーム・島の名前」だけが
     130pxの短い箱のままになっていた（パスワードは .lf-pw のflexで偶然フル幅だった）。 */
  .lf-row .lf-in > input { width: 100%; }
  .lf-in .lf-note { margin-left: 2px; line-height: 1.45; transition: color .15s; }
  .lf-in .lf-note.ok { color: #8fd9a8; }
  .lf-in .lf-note.err { color: #ff9d8f; }
  .lf-in input[aria-invalid="true"] { border-color: #a04036; box-shadow: 0 0 0 2px rgba(160,64,54,.22); }
  .signup input:focus-visible { border-color: #4d8fd6; box-shadow: 0 0 0 2px rgba(77,143,214,.28); outline: none; }
  .lf-pw { position: relative; display: flex; }
  .lf-pw input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding-right: 48px; }
  .pw-eye{min-width:44px;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:44px;height:44px;padding:0;border:none;border-radius:7px;
    background: transparent; color: #8aa8c8; font-size: 16px; line-height: 1; cursor: pointer; }
  .pw-eye:hover, .pw-eye[aria-pressed="true"] { color: #dceeff; background: rgba(74,139,255,.14); }
  .signup-cta:disabled { opacity: .6; cursor: wait; }
  @media (max-width: 560px) {
    .lf-row { flex-direction: column; align-items: stretch; gap: 3px; }
    .lf-row label { flex-basis: auto; text-align: left; }
    .auth-tabs { width: 100%; gap: 4px; margin-bottom: 13px; }
    .auth-tabs button { width: 100%; min-height: 54px; padding: 8px 5px; }
    .auth-pane, .auth-pane .loginform, .auth-pane .lf-in, .auth-pane input { width: 100%; }
    .login-lead { font-size: 12.5px; }
  }
  /* 自分の島チップ（選択式ではなく現在の島名を表示） */
  .myisland { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9px;
       font-weight: 600; font-size: 14px; color: #ffe9b0; white-space: nowrap;
       background: linear-gradient(90deg, rgba(224,193,74,.16), rgba(224,193,74,.03)); border: 1px solid #6d5a26; }
  .myisland.has { cursor: pointer; }
  .myisland.has:hover { filter: brightness(1.12); }
  .myisland.empty { color: #8aa0b4; font-weight: 400; background: #12243a; border-color: #2c4a6e; }
  /* 設定モーダル */
  #settingsModal { position: fixed; inset: 0; z-index: 250; background: rgba(4,10,18,.62); /* 17NM: スマホのシート(241)/ナビ(242)より前面へ */
       backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  #settingsModal .sm-box { background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
       width: min(500px, 97vw); box-shadow: var(--shadow-modal); }
  #settingsModal .sm-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #24405f; }
  #settingsModal .sm-title { font-weight: 600; color: #eaf3fb; flex: 1; }
  #settingsModal .sm-close { background: #2a3b53; color: #cdd9e6; border-radius: var(--radius-s); padding: 4px 10px; }
  #settingsModal .sm-close:hover { background: #344a68; }
  #settingsModal .sm-body { padding: 14px; display: flex; flex-direction: column; gap: 10px;
       max-height: min(78vh, 640px); overflow-y: auto; }
  /* 設定モーダルのセクション（プロフィール / 島の設定 / 危険ゾーン） */
  #settingsModal .sm-sec { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
       background: rgba(16,32,52,.4); border: 1px solid #22405f; border-radius: var(--radius-m, 10px); }
  #settingsModal .sm-sechead { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #9fb6cf; }
  #settingsModal .testsea-sec { border-color:#655ec7;background:radial-gradient(circle at 100% 0,rgba(112,92,230,.18),transparent 45%),#101c31; }
  #settingsModal .testsea-sec .sm-sechead { color:#d7d0ff;font-size:14px; }
  #settingsModal .testsea-lead { color:#e8f1ff;line-height:1.65;font-size:13px; }
  #settingsModal .testsea-lead b { color:#ffe695; }
  /* 本人認証セクション: 方式ごとに 認証済み / 操作ボタン / 準備中 を並べる */
  /* 本人認証の特典アピール（設定画面の目立つ誘導文） */
  .vf-cta { font-size: 13px; line-height: 1.6; color: #ffe9a8; background: rgba(74,58,0,.35);
    border: 1px solid #8a6d1f; border-radius: 10px; padding: 9px 11px; }
  .vf-cta b { color: #ffd98a; }
  .verifybox { display: flex; flex-direction: column; gap: 6px; }
  .vf-bonus { font-size: 12.5px; color: #9fb6cf; padding: 2px 0; }
  .vf-bonus.ok { color: #8fe0a6; font-weight: 500; }
  .vf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
       padding: 7px 9px; background: rgba(16,32,52,.5); border: 1px solid #22405f; border-radius: 8px; }
  .vf-row.col { flex-direction: column; align-items: stretch; }
  .vf-name { flex: 1 1 auto; font-size: 13px; font-weight: 500; color: #cfe2f5; }
  .vf-ok { color: #8fe0a6; font-weight: 600; font-size: 12.5px; }
  .vf-na { color: #7c90a6; font-size: 12px; }
  .vf-mail { display: flex; gap: 6px; }
  .vf-mail input { flex: 1 1 auto; min-width: 0; }
  /* 危険ゾーン: 取り消せない操作（島の放棄・アカウント削除）。赤系の枠で明確に分離 */
  #settingsModal .sm-danger { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
       border: 1px solid #7a3a30; background: rgba(42,22,19,.5); border-radius: var(--radius-m, 10px); }
  #settingsModal .sm-danger .sm-sechead { color: #f0a89b; }
  #settingsModal .sm-drow { display: flex; align-items: center; gap: 10px; }
  #settingsModal .sm-dtxt { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.5; color: #d8c4be; }
  #settingsModal .sm-dtxt b { color: #f1cbc3; }
  #settingsModal .sm-confirm { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
       font-size: 12px; line-height: 1.6; color: #f4d7d0; background: #3a1f1c;
       border: 1px solid #9a4638; border-radius: var(--radius-s, 6px); }
  #settingsModal .sm-confirm input { flex: 1 1 auto; min-width: 0; }
  #settingsModal #rediscoverConfirm { font-size: 15px; line-height: 1.7; }
  #settingsModal #rediscoverConfirm p { margin: 0 0 10px; overflow-wrap: anywhere; }
  #settingsModal #rediscoverInput { width: 100%; box-sizing: border-box; font-size: 16px; min-height: 44px; }
  #settingsModal #rediscoverConfirm .row { flex-wrap: wrap; }
  #settingsModal #rediscoverConfirm button { min-height: 44px; }
  .bdanger { background: #5a241c; color: #ffd9d3; border: 1px solid #9a4638; border-radius: var(--radius-s, 6px);
       padding: 6px 10px; font-weight: 500; white-space: nowrap; cursor: pointer; }
  .bdanger:hover:not(:disabled) { background: #742b20; }
  .bdanger:disabled { opacity: .5; cursor: not-allowed; }
  @media (max-width: 560px) {
    #settingsModal .sm-drow { flex-direction: column; align-items: stretch; }
  }
  /* チケット一覧 */
  /* チケットはステータスカード(.sc)と同じ背丈・同じ質感のミニカード型チップ（上=アイコン/下=枚数）。
     チップ自体が「使う」ボタン（billing.js が click を結線）。名称・効果はツールチップ（ホバー/タップ）、
     0枚は淡色(.zero・押すと購入確認)、操作不可時は .off。 */
  .ticketlist { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .tkchip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
       min-width: 46px; padding: 5px 8px 6px; border-radius: 10px; cursor: pointer;
       background: linear-gradient(160deg, #14263c, #0e1c2e); border: 1px solid #274468;
       box-shadow: inset 2px 0 0 #b08fe0, 0 1px 2px rgba(0,0,0,.3);
       transition: border-color .15s, background .15s, opacity .15s;
       user-select: none; -webkit-user-select: none; }
  .tkchip:hover { border-color: var(--border-strong); background: linear-gradient(160deg, #1a3350, #12233a); }
  .tkchip .tk-ic { font-size: 14px; line-height: 1.2; filter: saturate(1.1); }
  .tkchip .tk-ct { font-size: 17px; font-weight: 600; color: #f2f8ff; line-height: 1.2;
       min-width: 14px; text-align: center; }
  .tkchip .tk-free { font-size: 10px; margin-left: 1px; vertical-align: super; } /* 17KH: 期限つき無料ぶんあり */
  /* 17KQ: 期限が24時間を切った無料チケットの注意喚起（ゆっくり点滅）。
     対象: チケット欄のヘッダ（格納タブ）・スマホの🎫タブ・該当チップ。
     動きが苦手な設定(prefers-reduced-motion)では点滅を止めて金色の縁取りだけ残す。 */
  @keyframes tkUrgentBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
  .tkchip.tk-urgent { border-color: #ffd76a; box-shadow: 0 0 7px rgba(255, 215, 106, .45);
       animation: tkUrgentBlink 2.6s ease-in-out infinite; }
  #tkAcc > summary.tk-urgent { animation: tkUrgentBlink 2.6s ease-in-out infinite; }
  .mnav button.tk-urgent { animation: tkUrgentBlink 2.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    .tkchip.tk-urgent, #tkAcc > summary.tk-urgent, .mnav button.tk-urgent { animation: none; }
  }
  .tkchip.zero { opacity: .55; }
  .tkchip.zero .tk-ct { color: #8aa0b4; font-weight: 500; }
  .tkchip.zero:hover { opacity: .85; }
  .tkchip.off { opacity: .35; cursor: default; }
  .tkchip.off:hover { border-color: #274468; background: linear-gradient(160deg, #14263c, #0e1c2e); }
  /* 購入枚数の選択モーダル（0枚のチップをタップ→ 1/5/10枚。まとめ買いは少し割引） */
  #buyQtyModal { position: fixed; inset: 0; z-index: 320; background: rgba(4,10,18,.62); /* 17N1: ショップ(.shop-ov=300)より手前に */
       backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  #buyQtyModal .bq-box { background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
       width: min(360px, 96vw); box-shadow: var(--shadow-modal); }
  #buyQtyModal .bq-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #24405f; }
  #buyQtyModal .bq-title { font-weight: 600; color: #eaf3fb; flex: 1; }
  #buyQtyModal .bq-close { background: #2a3b53; color: #cdd9e6; border-radius: var(--radius-s); padding: 4px 10px; cursor: pointer; border: 0; }
  #buyQtyModal .bq-close:hover { background: #344a68; }
  #buyQtyModal .bq-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
  #buyQtyModal .bq-opt { display: grid; grid-template-columns: 56px auto; grid-template-rows: auto auto;
       align-items: center; column-gap: 10px; text-align: left; padding: 9px 12px; cursor: pointer;
       background: linear-gradient(160deg, #162941, #0e1c2e);
       border: 1px solid #2c4a6e; border-radius: 10px; color: #e8f1fa;
       transition: border-color .15s, background .15s; }
  #buyQtyModal .bq-opt:hover { border-color: #4d8fd6; background: linear-gradient(160deg, #1c3552, #12233a); }
  #buyQtyModal .bq-opt.bq-bulk { border-color: #b8934a;
    background: linear-gradient(160deg, #3b3012, #17243a 72%); box-shadow: inset 0 0 18px rgba(255,215,106,.08); }
  #buyQtyModal .bq-opt.bq-bulk:hover { border-color: #ffd76a;
    background: linear-gradient(160deg, #4b3b12, #1c3150 72%); }
  #buyQtyModal .bq-qty { grid-row: 1 / span 2; font-size: 17px; font-weight: 600; color: #ffe9b0; }
  #buyQtyModal .bq-price { font-size: 15px; font-weight: 600; }
  #buyQtyModal .bq-sub { font-size: 12px; color: #8fa8c2; }
  #buyQtyModal .bq-sub .bq-off { color: #7fd18a; font-weight: 600; }
  #buyQtyModal .bq-note { font-size: 12px; color: #8296ac; margin-top: 2px; }
  /* ---------- 17PD 島の紋章 ---------- */
/* 紋章は「小さく添える」もの。島名より目立つと画面がうるさくなるので、行の高さに収まる大きさに固定する。 */
.emb { display: inline-flex; vertical-align: middle; line-height: 0; margin-right: 5px; }
.emb svg { display: block; border-radius: 3px; }
.emb.sm svg { box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* 設定画面の紋章エディタ */
.emblembox { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.em-preview { flex: 0 0 auto; width: 104px; text-align: center; }
.em-preview svg { border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.em-label { font-size: 11px; color: #8296ac; margin-top: 6px; line-height: 1.4; }
.em-parts { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.em-loading { font-size: 12px; color: #8296ac; padding: 8px 0; }
.em-row { display: flex; align-items: flex-start; gap: 8px; }
.em-rl { flex: 0 0 5.5em; font-size: 12px; color: #9fb3c6; padding-top: 6px; }
.em-bs { display: flex; flex-wrap: wrap; gap: 4px; }
.em-b { background: #16222e; border: 1px solid #2a3a49; border-radius: 6px; padding: 3px; line-height: 0; cursor: pointer; }
.em-b:hover:not(:disabled) { border-color: #4d7ea8; }
.em-b.on { border-color: #7fd1ff; box-shadow: 0 0 0 1px #7fd1ff inset; }
.em-b:disabled { opacity: .5; cursor: default; }
.em-sw { display: block; width: 28px; height: 28px; border-radius: 4px; }
/* 非購読者向けの案内。買わせる圧を出さないよう、枠は控えめな青にする。 */
.em-lock { margin-top: 10px; padding: 8px 10px; border: 1px solid #2a4a66; border-radius: 6px;
  background: #12202c; font-size: 12px; color: #a9c2d8; line-height: 1.6; }
.em-lock a { color: #7fd1ff; }
/* 17QK: 紋章のすぐ下に置く保存ボタン。設定の一番下の「保存する」まで 2,300px あり、
   スマホでは選んだ紋章がそのまま捨てられていた（確認も出なかった）。 */
.em-saverow { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.em-saverow .b1 { min-height: 44px; padding: 0 18px; }
.em-saved { font-size: 12px; color: #7fd1ff; }
@media (max-width: 560px) {
  .em-rl { flex-basis: 4.5em; font-size: 11px; }
  .em-preview { width: 88px; }
  /* 17QK: スクロールしてもプレビューが見えるようにする。パーツを選ぶ列は 658px あって、
     「縁取り」を触っているときプレビューは画面の 336px 上に消えていた。 */
  .emblembox { position: relative; }
  .em-preview { position: sticky; top: 0; z-index: 2; align-self: flex-start;
    background: #101a24; padding: 6px 4px; border-radius: 8px; }
  /* パーツのボタンは 36px 幅しかなく、指ではとなりを押しやすかった（色は12個並ぶ）。 */
  .em-b { padding: 3px 7px; }
  .em-saverow .b1 { flex: 1 1 100%; }
}

/* 17PC: 特商法表記への導線。義務なので置くが、購入の邪魔をしないよう小さく控えめに。 */
  #buyQtyModal .bq-legal { margin-top: 8px; text-align: right; }
  #buyQtyModal .bq-legal a { font-size: 11px; color: #6b7c8f; text-decoration: none; }
  #buyQtyModal .bq-legal a:hover { color: #8fb6d6; text-decoration: underline; }
  /* はい/いいえ 確認ダイアログ（core.js askYesNo。confirm() 代替。チケット併用の問いかけ等） */
  #ynModal { position: fixed; inset: 0; z-index: 330; background: rgba(4,10,18,.62); /* 17N1: ショップ/購入ダイアログより手前に */
       backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  body.gate-sea-confirm17aob #ynModal { z-index: 1860; }
  #ynModal .yn-box { position: relative; background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
       width: min(460px, 97vw); box-shadow: var(--shadow-modal); padding: 18px 18px 16px; }
  #ynModal .yn-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0;
       border: none; border-radius: var(--radius-s); background: #2a3b53; color: #cdd9e6; font-size: 14px;
       line-height: 1; cursor: pointer; }
  #ynModal .yn-x:hover { background: #3a4f6e; }
  #ynModal .yn-msg { color: #eaf3fb; font-size: 15px; line-height: 1.75; white-space: pre-line; margin: 4px 22px 16px 0; }
  #ynModal .yn-btns { display: flex; gap: 8px; }
  /* 17QK 有料の申し込み時だけ出る法定表記リンク（購入の邪魔をしないよう小さく右寄せ）。 */
  #ynModal .yn-legal { margin-top: 8px; text-align: right; }
  #ynModal .yn-legal a { font-size: 11px; color: #6b7c8f; text-decoration: none; }
  #ynModal .yn-legal a:hover { color: #8fb6d6; text-decoration: underline; }
  #ynModal .yn-btns button { flex: 1; padding: 9px 10px; border-radius: 10px; cursor: pointer;
       font-weight: 600; font-size: 13px; border: 1px solid #2c4a6e; color: #e8f1fa;
       background: linear-gradient(160deg, #162941, #0e1c2e);
       transition: border-color .15s, background .15s; }
  #ynModal .yn-btns .yn-yes { border-color: #3f6ea6; background: linear-gradient(160deg, #1d3d63, #14284a); }
  #ynModal .yn-btns .yn-yes:hover { border-color: #4d8fd6; background: linear-gradient(160deg, #24507f, #182f55); }
  #ynModal .yn-btns .yn-no:hover { border-color: #4d8fd6; background: linear-gradient(160deg, #1c3552, #12233a); }
  /* 数量のリスト選択ダイアログ（core.js askQty。prompt() の数値打ち込み代替。#ynModal と同系） */
  #qtyModal { position: fixed; inset: 0; z-index: 250; background: rgba(4,10,18,.62); /* 17NM: スマホのシート(241)/ナビ(242)より前面へ */
       backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  #qtyModal .yn-box { position: relative; background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
       width: min(460px, 97vw); box-shadow: var(--shadow-modal); padding: 18px 18px 16px; }
  #qtyModal .yn-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0;
       border: none; border-radius: var(--radius-s); background: #2a3b53; color: #cdd9e6; font-size: 14px;
       line-height: 1; cursor: pointer; }
  #qtyModal .yn-x:hover { background: #3a4f6e; }
  #qtyModal .yn-msg { color: #eaf3fb; font-size: 15px; line-height: 1.75; white-space: pre-line; margin: 4px 22px 12px 0; }
  /* 16px 以上にして iOS の自動ズームを防ぐ。指で押しやすい高さに */
  #qtyModal .qty-sel { width: 100%; font-size: 16px; padding: 11px 12px; margin-bottom: 14px; }
  #qtyModal .yn-btns { display: flex; gap: 8px; }
  #qtyModal .yn-btns button { flex: 1; padding: 9px 10px; border-radius: 10px; cursor: pointer;
       font-weight: 600; font-size: 13px; border: 1px solid #2c4a6e; color: #e8f1fa;
       background: linear-gradient(160deg, #162941, #0e1c2e);
       transition: border-color .15s, background .15s; }
  #qtyModal .yn-btns .yn-yes { border-color: #3f6ea6; background: linear-gradient(160deg, #1d3d63, #14284a); }
  #qtyModal .yn-btns .yn-yes:hover { border-color: #4d8fd6; background: linear-gradient(160deg, #24507f, #182f55); }
  #qtyModal .yn-btns .yn-no:hover { border-color: #4d8fd6; background: linear-gradient(160deg, #1c3552, #12233a); }
  /* 17K9: ダイアログ（はい/いいえ・数量/チケット選択・購入枚数・命名）のスマホ最適化。
     どの端末でも画面からはみ出さない（高さ上限＋内部スクロール）。狭い画面では中央ではなく
     親指の届きやすい下寄せ（ボトムシート風）で表示し、ボタンは44px以上のタップ領域にする。 */
  #ynModal .yn-box, #qtyModal .yn-box, #txtModal .yn-box, #buyQtyModal .bq-box {
       max-height: 86vh; max-height: 86dvh; overflow: auto; overscroll-behavior: contain; }
  @media (max-width: 480px) {
    #ynModal, #qtyModal, #txtModal, #buyQtyModal { align-items: flex-end; padding: 10px;
         padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    #ynModal .yn-box, #qtyModal .yn-box, #txtModal .yn-box { width: 100%; padding: 14px 14px 12px;
         max-height: 76vh; max-height: 76dvh; }
    #buyQtyModal .bq-box { width: 100%; max-height: 76vh; max-height: 76dvh; }
    #ynModal .yn-msg, #qtyModal .yn-msg, #txtModal .yn-msg { font-size: 14px; line-height: 1.6; }
    #ynModal .yn-btns button, #qtyModal .yn-btns button, #txtModal .yn-btns button {
         min-height: 46px; font-size: 14px; }
    #buyQtyModal .bq-opt { padding: 11px 12px; min-height: 52px; }
    #buyQtyModal .bq-close { min-width: 40px; min-height: 36px; }
  }
  /* テキスト入力ダイアログ（艦の命名など。#txtModal は askText） */
  #txtModal .yn-box { position: relative; background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
       width: min(460px, 97vw); box-shadow: var(--shadow-modal); padding: 18px 18px 16px; }
  #txtModal .yn-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: none;
       border-radius: var(--radius-s); background: #2a3b53; color: #cdd9e6; font-size: 14px; line-height: 1; cursor: pointer; }
  #txtModal .yn-msg { color: #eaf3fb; font-size: 15px; line-height: 1.7; white-space: pre-line; margin: 4px 22px 12px 0; }
  #txtModal .txt-in { width: 100%; font-size: 16px; padding: 11px 12px; margin-bottom: 14px; box-sizing: border-box;
       border-radius: 10px; border: 1px solid #2c4a6e; background: #0e1c2e; color: #eaf3fb; }
  #txtModal .yn-btns { display: flex; gap: 8px; }
  #txtModal .yn-btns button { flex: 1; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px;
       border: 1px solid #2c4a6e; color: #e8f1fa; background: linear-gradient(160deg, #162941, #0e1c2e); }
  #txtModal .yn-btns .yn-yes { border-color: #3f6ea6; background: linear-gradient(160deg, #1d3d63, #14284a); }
  /* プレミアム欄（命名・建造チケット・発進ライセンス）。
     17LW: 独立アコーディオンをやめ、🎫チケット欄(#tkAcc)の中に統合表示。
     通常チケット(青)と一目で区別できる金色の「豪華」セクション＝金枠二重＋光彩＋ゆっくり流れる光（シマー）。 */
  .premlist { margin: 8px 8px 8px; }
  .prm-sec { position: relative; overflow: hidden; border: 1px solid #a8842e; border-radius: 10px;
       background: linear-gradient(160deg, rgba(190,142,44,.26), rgba(105,76,20,.14) 55%, rgba(58,42,10,.22));
       box-shadow: 0 0 0 1px rgba(255,215,106,.30) inset, 0 0 13px rgba(255,207,63,.18); }
  /* 斜めにゆっくり流れる光。豪華さの演出（reduced-motion では停止） */
  /* 17AB6: `left` を動かすと**毎フレーム再レイアウト＋塗り直し**（ページ全体が再描画される）。
     位置は left で固定し、移動は合成できる transform: translateX に置き換える。
     幅は親の 34% なので、元の「親の -45% → 135%（＝親幅の180%ぶん）」は
     自分の幅に直すと 180/34 ≒ 529%。開始が親の -45%（＝自分の -132%）なので -132% → 397%。 */
  .prm-sec::after { content: ''; position: absolute; top: -60%; bottom: -60%; left: 0; width: 34%;
       background: linear-gradient(105deg, transparent, rgba(255,236,170,.10) 40%, rgba(255,248,214,.26) 50%, rgba(255,236,170,.10) 60%, transparent);
       transform: translateX(-132%) rotate(8deg); animation: prmShine 5.6s ease-in-out infinite; pointer-events: none; }
  @keyframes prmShine {
    0%, 55% { transform: translateX(-132%) rotate(8deg); }
    90%, 100% { transform: translateX(397%) rotate(8deg); }
  }
  @media (prefers-reduced-motion: reduce) { .prm-sec::after { animation: none; display: none; } }
  .prm-head { padding: 7px 11px 4px; font-size: 13px; font-weight: 700; letter-spacing: .05em;
       display: flex; align-items: center; gap: 7px; user-select: none; }
  .prm-head .prm-ttl { background: linear-gradient(90deg, #f3d98c, #ffd76a 38%, #fff3cf 50%, #ffd76a 62%, #f3d98c);
       -webkit-background-clip: text; background-clip: text; color: transparent; }
  .prm-head .prm-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #241a06;
       background: linear-gradient(90deg, #ffe27a, #ffcf3f); border-radius: 999px; padding: 2px 9px;
       box-shadow: 0 1px 4px rgba(0,0,0,.35); }
  .prm-list { padding: 2px 7px 7px; }
  .prm-row { display: flex; align-items: center; gap: 7px; padding: 3px 5px; border-radius: 7px; }
  .prm-row:nth-child(odd) { background: rgba(255,215,90,.07); }
  .prm-row:hover { background: rgba(255,215,90,.13); }
  .prm-ic { font-size: 14px; flex: 0 0 auto; filter: drop-shadow(0 0 3px rgba(255,215,106,.35)); }
  .prm-nm { flex: 1 1 auto; font-size: 12px; color: #f4e9cf; min-width: 0;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prm-ct { font-size: 11px; color: #e2cd94; flex: 0 0 auto; min-width: 14px; text-align: right; }
  .prm-live { font-size: 10.5px; font-weight: 600; color: #7fe0a0; flex: 0 0 auto; }
  .prm-use, .prm-buy { flex: 0 0 auto; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 600; cursor: pointer;
       border: 1px solid #a8842e; color: #ffe9b0; background: linear-gradient(160deg, #4a3810, #2a1e08);
       box-shadow: 0 0 0 1px rgba(255,215,106,.14) inset; }
  .prm-use { border-color: #3f8f6a; color: #d6ffe6; background: linear-gradient(160deg, #16412e, #0e2a1e); box-shadow: none; }
  .prm-buy:hover, .prm-use:hover { filter: brightness(1.22); }
  .prm-note { margin: 4px 6px 6px; font-size: 11px; }
  .prm-row { cursor: help; } /* 17M2: ホバー/タップで図鑑ポップアップが出ることを示す */
  /* 17M2: プレミアム各項目の図鑑ポップアップ（艦艇画像＋説明。premium.js showPremPopup） */
  .prm-pop { position: fixed; z-index: 251; width: min(320px, 92vw); max-height: 80vh; overflow-y: auto; /* 17NM: ショップ等の上に出す小ポップ。シート(241)/ナビ(242)より前面 */
       background: linear-gradient(165deg, #12233a, #0c1826); border: 1px solid #a8842e; border-radius: 12px;
       box-shadow: 0 0 0 1px rgba(255,215,106,.28) inset, 0 10px 30px rgba(0,0,0,.55); padding: 11px 13px 13px;
       pointer-events: none; /* ホバー時にちらつかない（自身にはマウス判定を与えない） */ }
  .prm-pop-top { display: flex; align-items: center; gap: 11px; }
  .prm-pop-img { width: 56px; height: 56px; flex: 0 0 auto; image-rendering: pixelated; object-fit: contain;
       background: linear-gradient(160deg, #3b86c8, #2a6fb0); border: 1px solid #274468; border-radius: 10px; padding: 4px; }
  .prm-pop-htxt { min-width: 0; }
  .prm-pop-nm { font-weight: 700; font-size: 14.5px; color: #ffe6a8; line-height: 1.3; }
  .prm-pop-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .prm-pop-role { font-size: 10.5px; font-weight: 500; padding: 1px 7px; border-radius: 999px;
       background: #26456a; color: #cfe2f5; border: 1px solid #3a6396; }
  .prm-pop-stats { margin: 9px 0 6px; font-size: 11.5px; color: #cfe0f2; font-variant-numeric: tabular-nums;
       border-top: 1px solid rgba(255,215,106,.18); padding-top: 7px; }
  .prm-pop-lv1 { margin: -2px 0 7px; font-size: 10.5px; line-height: 1.5; color: #9fb2c6; }
  .prm-pop-desc { font-size: 12.5px; line-height: 1.65; color: #e6eef6; }
  .prm-pop-lic { margin-top: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.6; color: #d6ffe6;
       background: rgba(30,90,60,.30); border: 1px solid #2f6d4a; border-radius: 8px; }
  .prm-pop-lic b { color: #9dffc4; }
  /* 新機能お知らせの特別ポップアップ（かなり目立つ） — boot.js showLaunchPopups */
  .launch-ov { position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center;
       background: rgba(4,10,20,.72); backdrop-filter: blur(2px); padding: 16px; }
  .launch-box { position: relative; width: min(560px, 96vw); max-height: 88vh; overflow: auto; text-align: center;
       border-radius: 18px; padding: 30px 26px 24px; color: #fff;
       background: linear-gradient(150deg, #123a68, #0d2444 60%, #10203e);
       border: 2px solid #ffd94a; box-shadow: 0 0 0 4px rgba(255,217,74,.18), 0 18px 60px rgba(0,0,0,.6);
       animation: launchPop .35s cubic-bezier(.2,1.2,.35,1); }
  @keyframes launchPop { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .launch-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #0e1c2e;
       background: linear-gradient(90deg, #ffe27a, #ffcf3f); border-radius: 999px; padding: 5px 14px; margin-bottom: 12px;
       box-shadow: 0 2px 10px rgba(255,207,63,.5); }
  .launch-ic { font-size: 46px; line-height: 1; margin: 4px 0 8px; }
  .launch-title { font-size: 23px; font-weight: 700; margin: 2px 0 8px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
  .launch-title b { color: #ffe27a; }
  .launch-desc { font-size: 14px; line-height: 1.75; color: #dCe9f5; margin: 0 auto 16px; max-width: 460px; }
  .launch-price { display: inline-block; font-weight: 600; color: #ffe27a; border: 1px solid rgba(255,226,122,.5);
       border-radius: 10px; padding: 5px 12px; margin-bottom: 16px; font-size: 13px; }
  .launch-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .launch-ok, .launch-next, .launch-shop { padding: 11px 22px; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; border: none; }
  .launch-ok { background: linear-gradient(160deg, #ffe27a, #ffcf3f); color: #10203e; }
  .launch-next { background: #1d3d63; color: #eaf3fb; border: 1px solid #3f6ea6; }
  .launch-shop { background: linear-gradient(145deg,#fff0a8,#e4b94f); color:#162338; box-shadow:0 5px 16px rgba(229,184,72,.28); }
  .launch-ok:hover, .launch-next:hover, .launch-shop:hover { filter: brightness(1.08); }
  .launch-dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0 2px; }
  .launch-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
  .launch-dots i.on { background: #ffd94a; }
  /* 17N0: 金色の豪華版（新艦艇＋チケット大刷新のお披露目） */
  .launch-box.launch-gold {
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(255,215,106,.16), transparent 55%),
      linear-gradient(155deg, #2c2110, #1a1408 55%, #241a06);
    border: 2px solid #ffd76a;
    /* 17AB6: 光彩の強弱を box-shadow で往復させていたが、これは毎フレームの塗り直し＝
       **ページ全体（地図キャンバス2枚を含む）が 60fps で再描画**になる。しかもこの箱は
       .launch-box の overflow:auto の中なので、::after の外向きの影は切られてしまい、
       合成できる形に置き換えられない。→ 強めの値で**静止**させる（見た目の豪華さは保つ）。 */
    box-shadow: 0 0 0 4px rgba(255,215,106,.24), 0 18px 60px rgba(0,0,0,.65), 0 0 52px rgba(232,163,58,.48);
    animation: launchPop .35s cubic-bezier(.2,1.2,.35,1);
  }
  /* 17AB6: 見出しの流れる光沢は background-position のアニメ＝合成できない（塗り直し）。
     グラデーションの金文字はそのまま、光の移動だけを止める。 */
  .launch-box.launch-gold .launch-title {
    background: linear-gradient(90deg, #fff3cf, #ffd76a 45%, #f3b13c);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .launch-box.launch-gold .launch-title b { color: transparent; }
  .launch-box.launch-gold .launch-desc { color: #f0e6cf; }
  .launch-box.launch-gold .launch-desc b { color: #ffd76a; }
  .launch-box.launch-gold .launch-price { color: #ffe9ad; border-color: rgba(255,215,106,.6);
    background: rgba(255,215,106,.08); }
  .launch-box.launch-gold .launch-price b { color: #ffd76a; }
  .launch-box.launch-gold .launch-next { background: #3a2c12; color: #ffe9bd; border: 1px solid #a8843c; }
  /* 17ACQ: ボーダ級。公開お知らせの艦影つき特集と同じ青海＋金の秘密兵器テーマ。 */
  .launch-box.launch-borda {
    background:
      radial-gradient(95% 70% at 50% 0%,rgba(61,206,239,.22),transparent 58%),
      linear-gradient(150deg,#061a30 0%,#0b3349 54%,#21180a 100%);
    border:2px solid #73d8ef;
    box-shadow:0 0 0 4px rgba(77,202,231,.2),0 18px 60px rgba(0,0,0,.68),0 0 50px rgba(55,193,225,.36);
  }
  .launch-box.launch-borda .launch-badge { color:#132032;background:linear-gradient(90deg,#76e1f4,#fff0a8 60%,#e5b84b);box-shadow:0 2px 13px rgba(97,219,241,.45); }
  .launch-box.launch-borda .launch-title { color:#e6fbff;text-shadow:0 0 14px rgba(86,219,244,.7); }
  .launch-box.launch-borda .launch-title b { color:#fff0a8; }
  .launch-box.launch-borda .launch-desc { color:#d6edf4; }
  .launch-box.launch-borda .launch-desc b { color:#ffe297; }
  .launch-box.launch-borda .launch-price { display:block;color:#d9f7ff;border-color:rgba(120,220,241,.55);background:linear-gradient(135deg,rgba(8,50,69,.72),rgba(65,48,11,.7));line-height:1.55; }
  .launch-box.launch-borda .launch-dots i.on { background:#76e1f4;box-shadow:0 0 7px rgba(118,225,244,.8); }
  .launch-box.launch-borda .launch-ok { background:linear-gradient(145deg,#75dff3,#3ab3d4);color:#062034; }
  .launch-box.launch-borda .launch-next { background:#113f58;color:#d9f7ff;border:1px solid #54bcd5; }
  .launch-borda-hero { margin:3px 0 12px;padding:10px 12px 12px;border:1px solid rgba(255,224,139,.46);border-radius:13px;background:linear-gradient(145deg,rgba(4,35,54,.88),rgba(49,37,10,.72));box-shadow:inset 0 1px rgba(255,255,255,.08);text-align:center; }
  .launch-borda-ribbon { margin:-10px -12px 8px;padding:5px 8px;border-bottom:1px solid rgba(255,224,139,.38);color:#fff0a8;background:linear-gradient(90deg,rgba(39,152,181,.3),rgba(159,107,20,.31));font-size:10px;font-weight:700;letter-spacing:.12em; }
  .launch-ship-xl { display:block;width:90px;height:90px;margin:2px auto 6px;image-rendering:pixelated;filter:drop-shadow(0 0 16px rgba(91,226,250,.86)) drop-shadow(0 0 6px rgba(255,222,125,.55)); }
  .launch-borda-role { color:#ffe29a;font-size:13px;font-weight:700;letter-spacing:.04em; }
  .launch-borda-ticket { margin:13px auto 2px;padding:10px 12px;max-width:390px;border:1px solid #e6bf63;border-radius:10px;color:#ffe29a;background:linear-gradient(135deg,rgba(71,52,13,.82),rgba(28,22,7,.9));box-shadow:inset 0 1px rgba(255,240,181,.14); }
  .launch-borda-ticket span { color:#f1d584;font-size:12px; }
  /* 17ADK: ナグルファル級。深海の青・紫と就役式の金を重ねた新艦専用の大型演出。 */
  .launch-box.launch-naglfar {
    max-width:680px;
    background:
      radial-gradient(100% 66% at 50% 0%,rgba(68,220,255,.28),transparent 58%),
      radial-gradient(75% 65% at 92% 90%,rgba(99,64,255,.24),transparent 64%),
      linear-gradient(155deg,#071a38 0%,#020817 58%,#130a2d 100%);
    border:2px solid #66e8ff;
    box-shadow:0 0 0 4px rgba(102,232,255,.2),0 22px 72px rgba(0,0,0,.82),
      0 0 58px rgba(53,195,255,.48),0 0 92px rgba(94,52,255,.27);
  }
  .launch-box.launch-naglfar .launch-badge { color:#03152d;background:linear-gradient(90deg,#67e8f9,#fef3c7 52%,#a78bfa);box-shadow:0 3px 18px rgba(103,232,249,.6);letter-spacing:.08em;font-weight:700; }
  .launch-box.launch-naglfar .launch-ic { font-size:38px;filter:drop-shadow(0 0 12px rgba(103,232,249,.8)); }
  .launch-box.launch-naglfar .launch-title { color:#e9fbff;font-size:clamp(21px,4vw,29px);line-height:1.25;text-shadow:0 0 14px rgba(103,232,249,.85),0 0 32px rgba(92,64,255,.55); }
  .launch-box.launch-naglfar .launch-title b { color:#fff0a8; }
  .launch-box.launch-naglfar .launch-desc { color:#d6eff8;font-size:14px;line-height:1.75; }
  .launch-box.launch-naglfar .launch-desc b { color:#fff0a8; }
  .launch-box.launch-naglfar .launch-price { color:#dffbff;border:1px solid rgba(103,232,249,.62);background:linear-gradient(90deg,rgba(8,75,105,.5),rgba(54,34,112,.5));font-weight:700;letter-spacing:.03em; }
  .launch-box.launch-naglfar .launch-next,.launch-box.launch-naglfar .launch-ok { color:#041729;background:linear-gradient(145deg,#9bf4ff,#62d8f2 58%,#a78bfa);border:1px solid #d7fbff;font-weight:700;box-shadow:0 4px 18px rgba(69,205,238,.35); }
  .launch-box.launch-naglfar .launch-dots i.on { width:18px;border-radius:5px;background:#7deaff;box-shadow:0 0 10px rgba(125,234,255,.95); }
  .naglfar-abyss { margin:4px auto 15px;padding:14px 14px 16px;border:1px solid rgba(103,232,249,.56);border-radius:16px;background:radial-gradient(circle at 50% 43%,rgba(63,200,255,.25),transparent 34%),linear-gradient(160deg,rgba(8,45,78,.88),rgba(2,8,23,.96));box-shadow:inset 0 0 35px rgba(34,211,238,.12);text-align:center;overflow:hidden; }
  .naglfar-project { color:#8cecff;font-size:11px;font-weight:700;letter-spacing:.24em; }
  .naglfar-rings { width:190px;height:150px;margin:2px auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(147,237,255,.28),rgba(48,90,255,.12) 38%,transparent 66%);border-top:1px solid rgba(133,236,255,.36);border-bottom:1px solid rgba(157,132,255,.28); }
  .naglfar-ship { display:block;width:132px;height:132px;image-rendering:pixelated;filter:drop-shadow(0 0 9px #99f6ff) drop-shadow(0 0 30px rgba(72,111,255,.95)); }
  .naglfar-ship-small { width:82px;height:82px;flex:0 0 auto; }
  .naglfar-debut { display:inline-block;padding:4px 12px;border:1px solid rgba(255,226,151,.55);border-radius:999px;color:#fff0ad;background:rgba(49,34,9,.62);font-size:11px;font-weight:700;letter-spacing:.1em; }
  .naglfar-dual { display:flex;align-items:center;justify-content:center;gap:16px;margin:5px auto 15px;padding:14px 10px;border:1px solid rgba(103,232,249,.5);border-radius:14px;background:rgba(3,17,39,.74); }
  .naglfar-dual>div { min-width:120px;display:flex;flex-direction:column;align-items:center; }
  .naglfar-dual span { color:#fff0a8;font-size:31px;font-weight:700;line-height:1; }
  .naglfar-dual b { margin-top:5px;color:#9af2ff!important; }
  .naglfar-dual small { margin-top:4px;color:#9ebdcb;font-size:10px; }
  .naglfar-mission { display:flex;align-items:center;justify-content:center;gap:18px;margin:5px auto 8px;padding:15px;border:1px solid rgba(255,224,139,.58);border-radius:14px;background:linear-gradient(135deg,rgba(4,41,69,.88),rgba(56,38,10,.72)); }
  .naglfar-mission strong { color:#fff0a8;font-size:16px;letter-spacing:.13em;text-shadow:0 0 11px rgba(255,218,111,.5); }
  @media(max-width:520px){.naglfar-dual{gap:7px}.naglfar-dual>div{min-width:0;flex:1}.naglfar-dual span{font-size:25px}.naglfar-dual small{font-size:9px}.naglfar-ship-small{width:64px;height:64px}.naglfar-rings{width:160px;height:132px}.naglfar-ship{width:112px;height:112px}}
  /* 17ADX: 八雲型。艦影の橙を主役に、雷撃の深海青と就役式の金を重ねる。 */
  .launch-box.launch-yakumo { max-width:680px;background:radial-gradient(90% 68% at 50% 0%,rgba(255,188,79,.3),transparent 58%),radial-gradient(72% 62% at 92% 88%,rgba(24,142,190,.3),transparent 65%),linear-gradient(150deg,#192434 0%,#071a2b 55%,#251505 100%);border:2px solid #ffc95f;box-shadow:0 0 0 4px rgba(255,196,80,.18),0 22px 72px rgba(0,0,0,.82),0 0 62px rgba(255,159,43,.42),0 0 94px rgba(26,159,210,.2); }
  .launch-box.launch-yakumo .launch-badge { color:#291600;background:linear-gradient(90deg,#ffe8a4,#ffb347 48%,#8ee8ff);box-shadow:0 3px 18px rgba(255,180,70,.58);letter-spacing:.08em;font-weight:700; }
  .launch-box.launch-yakumo .launch-ic { font-size:38px;filter:drop-shadow(0 0 12px rgba(255,193,87,.9)); }
  .launch-box.launch-yakumo .launch-title { color:#fff5d0;font-size:clamp(21px,4vw,29px);line-height:1.25;text-shadow:0 0 14px rgba(255,183,69,.8),0 0 32px rgba(31,151,199,.45); }
  .launch-box.launch-yakumo .launch-title b,.launch-box.launch-yakumo .launch-desc b { color:#ffe49a; }
  .launch-box.launch-yakumo .launch-desc { color:#dceef5;font-size:14px;line-height:1.75; }
  .launch-box.launch-yakumo .launch-price { color:#fff1c7;border:1px solid rgba(255,201,95,.66);background:linear-gradient(90deg,rgba(92,48,8,.58),rgba(8,75,105,.52));font-weight:700;letter-spacing:.02em; }
  .launch-box.launch-yakumo .launch-next,.launch-box.launch-yakumo .launch-ok { color:#291700;background:linear-gradient(145deg,#fff0ae,#ffc35c 58%,#8ce8ff);border:1px solid #fff3c5;font-weight:700;box-shadow:0 4px 18px rgba(255,179,66,.35); }
  .launch-box.launch-yakumo .launch-dots i.on { width:18px;border-radius:5px;background:#ffc65f;box-shadow:0 0 10px rgba(255,198,95,.95); }
  .yakumo-stage { margin:4px auto 15px;padding:14px 14px 16px;border:1px solid rgba(255,201,95,.58);border-radius:16px;background:radial-gradient(circle at 50% 45%,rgba(255,174,65,.23),transparent 35%),linear-gradient(155deg,rgba(43,30,10,.88),rgba(3,27,43,.96));box-shadow:inset 0 0 35px rgba(48,190,226,.1);text-align:center;overflow:hidden; }
  .yakumo-code { color:#ffd778;font-size:11px;font-weight:700;letter-spacing:.24em; }
  .yakumo-wake { width:200px;height:150px;margin:2px auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,180,66,.28),rgba(30,153,197,.13) 40%,transparent 67%);border-top:1px solid rgba(255,209,112,.42);border-bottom:1px solid rgba(87,207,236,.3); }
  .yakumo-ship { display:block;width:132px;height:132px;image-rendering:pixelated;filter:drop-shadow(0 0 9px #ffd37a) drop-shadow(0 0 30px rgba(39,170,218,.8)); }
  .yakumo-ship-small { width:82px;height:82px;flex:0 0 auto; }
  .yakumo-debut { display:inline-block;padding:4px 12px;border:1px solid rgba(255,219,139,.62);border-radius:999px;color:#ffe4a0;background:rgba(59,37,7,.7);font-size:11px;font-weight:700;letter-spacing:.1em; }
  .yakumo-stats { display:flex;align-items:center;justify-content:center;gap:16px;margin:5px auto 15px;padding:14px 10px;border:1px solid rgba(255,201,95,.52);border-radius:14px;background:rgba(4,26,42,.77); }
  .yakumo-stats>div { min-width:120px;display:flex;flex-direction:column;align-items:center; }
  .yakumo-stats span { color:#ffd06c;font-size:31px;font-weight:700;line-height:1; }
  .yakumo-stats b { margin-top:5px;color:#8ce8ff!important; }
  .yakumo-stats small { margin-top:4px;color:#a9c3cf;font-size:10px; }
  .yakumo-mission { display:flex;align-items:center;justify-content:center;gap:18px;margin:5px auto 8px;padding:15px;border:1px solid rgba(255,204,100,.6);border-radius:14px;background:linear-gradient(135deg,rgba(5,51,70,.88),rgba(69,40,6,.74)); }
  .yakumo-mission strong { color:#ffe09a;font-size:16px;letter-spacing:.13em;text-shadow:0 0 11px rgba(255,190,75,.55); }
  @media(max-width:520px){.yakumo-stats{gap:7px}.yakumo-stats>div{min-width:0;flex:1}.yakumo-stats span{font-size:25px}.yakumo-stats small{font-size:9px}.yakumo-ship-small{width:64px;height:64px}.yakumo-wake{width:164px;height:132px}.yakumo-ship{width:112px;height:112px}}
  /* 17AB6 以降、金版はもともと launchPop（1回だけ）しか持たないので reduce 用の上書きは不要。 */
  /* 17ST: 紫の凶兆版（前兆ポップ「紫の空が、震えている」。8/4 19:00 解禁の予告。boot.js LAUNCH_POPUPS_OMEN が使う） */
  .launch-box.launch-omen {
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(168,85,247,.2), transparent 55%),
      linear-gradient(155deg, #1b1030, #120a22 55%, #0a0416);
    border: 2px solid #a855f7;
    /* 17AB6: 金版と同じ理由（box-shadow の往復＝ページ全体の毎フレーム再描画）で静止させる。 */
    box-shadow: 0 0 0 4px rgba(168,85,247,.26), 0 18px 60px rgba(0,0,0,.7), 0 0 54px rgba(147,51,234,.5);
    animation: launchPop .35s cubic-bezier(.2,1.2,.35,1);
  }
  .launch-box.launch-omen .launch-badge { color: #f5ecff; background: linear-gradient(90deg, #7c3aed, #a855f7);
    box-shadow: 0 2px 12px rgba(147,51,234,.6); }
  .launch-box.launch-omen .launch-title { color: #e9d5ff; text-shadow: 0 0 14px rgba(168,85,247,.8); }
  .launch-box.launch-omen .launch-title b { color: #d8b4fe; }
  .launch-box.launch-omen .launch-desc { color: #d5c4ee; }
  .launch-box.launch-omen .launch-desc b { color: #e9d5ff; }
  .launch-box.launch-omen .launch-ok { background: linear-gradient(160deg, #a855f7, #7c3aed); color: #f8f2ff; }
  .launch-box.launch-omen .launch-next { background: #2a1548; color: #e5d4ff; border: 1px solid #7c3aed; }
  .launch-box.launch-omen .launch-dots i.on { background: #c084fc; }
  @media (prefers-reduced-motion: reduce) { .launch-box.launch-omen { animation: launchPop .35s cubic-bezier(.2,1.2,.35,1); } }
  /* 17TJ: 正体不明艦の能力は索敵時まで伏せる。毒々しく軽妙な「観測不能」カード。 */
  .launch-box.launch-mystery {
    background:
      radial-gradient(90% 65% at 12% 6%, rgba(34,211,153,.24), transparent 54%),
      radial-gradient(80% 70% at 92% 20%, rgba(244,114,182,.22), transparent 58%),
      repeating-linear-gradient(-45deg, rgba(192,132,252,.045) 0 9px, rgba(34,211,153,.045) 9px 18px),
      linear-gradient(155deg, #18112e, #091a20 57%, #10091f);
    border: 2px solid #c084fc;
    /* 17AB6: 同上（box-shadow の往復をやめて静止。緑と桃の光をどちらも少し残す）。 */
    box-shadow: 0 0 0 4px rgba(192,132,252,.2), 0 18px 60px rgba(0,0,0,.72),
                0 0 30px rgba(34,211,153,.3), 0 0 52px rgba(244,114,182,.36);
  }
  .launch-box.launch-mystery .launch-badge { color: #fff4fd; background: linear-gradient(90deg, #db2777, #7c3aed 55%, #0f9f7d); box-shadow: 0 2px 12px rgba(192,132,252,.55); }
  .launch-box.launch-mystery .launch-title { color: #f5e9ff; text-shadow: 0 0 14px rgba(192,132,252,.88); }
  .launch-box.launch-mystery .launch-title b { color: #99f6d5; }
  .launch-box.launch-mystery .launch-desc { color: #d9e7ec; }
  .launch-box.launch-mystery .launch-desc b { color: #f5b9df; }
  .launch-box.launch-mystery .launch-price { color: #c8fff0; border-color: rgba(94,234,212,.55); background: rgba(34,211,153,.08); }
  .launch-box.launch-mystery .launch-ok { background: linear-gradient(150deg, #db2777, #7c3aed); color: #fff7fe; }
  .launch-box.launch-mystery .launch-next { background: #182b37; color: #c8fff0; border: 1px solid #36d9b1; }
  .launch-box.launch-mystery .launch-dots i.on { background: #5eead4; }
  .mystery-signal { margin: 11px auto 3px; padding: 8px 10px; border: 1px dashed rgba(94,234,212,.7); border-radius: 8px; background: rgba(17,94,89,.18); color: #b8fff0; font-size: 12px; text-align: center; transform: rotate(-.5deg); }
  .mystery-signal b { color: #f9a8d4 !important; text-shadow: 0 0 9px rgba(244,114,182,.9); }
  @media (prefers-reduced-motion: reduce) { .launch-box.launch-mystery { animation: launchPop .35s cubic-bezier(.2,1.2,.35,1); } }
  .sub { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
  .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-l);
           padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow-1); }
  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .row > * { min-width: 0; }
  label { font-size: 14px; color: var(--muted); }
  input, select { background: var(--panel-2); border: 1px solid #2a3f5c;
          color: var(--text); border-radius: var(--radius-s); padding: 8px 10px; font-size: 15px;
          transition: border-color .15s, box-shadow .15s; }
  input:hover, select:hover { border-color: var(--border-2); }
  input:focus, select:focus { border-color: var(--border-strong); box-shadow: 0 0 0 2px rgba(127,193,255,.18); outline: none; }
  input::placeholder { color: #5f7891; }
  input { width: 130px; }
  button { border: 0; border-radius: 9px; padding: 9px 12px; font-size: 15px; font-weight: 500; cursor: pointer;
           transition: background .15s, border-color .15s, color .15s, filter .15s, transform .06s; }
  button:active:not(:disabled) { transform: translateY(1px); }
  /* 17R8 <a> にボタンのクラスを付けたときも button と同じ形にする。padding・角丸・太字は
     `button` セレクタにしか当たっていなかったため、リンクだけ細い帯に見えていた
     （「💳 いま支払う（請求書を開く）」「📖 紹介ページ」など）。 */
  a.b1, a.b2, a.b3, a.b4 { display: inline-block; border: 0; border-radius: 9px; padding: 9px 12px;
    font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; }
  .b1 { background: var(--accent-btn); color: #fff; }
  .b1:hover:not(:disabled) { background: #3f7dff; }
  .b2 { background: var(--gold); color: #15233a; }
  .b2:hover:not(:disabled) { background: #f2b14e; }
  .b3 { background: #2a3b53; color: #cdd9e6; }
  .b3:hover:not(:disabled) { background: #344a68; color: #e0ebf6; }
  /* 「⚙ 設定」を一時的に光らせて注目を集める（Discord未認証の人への誘導。約3秒＝3回点滅で自動停止）。 */
  .glow-attn { animation: glowAttn 1s ease-in-out 3; }
  @keyframes glowAttn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88,164,255,0); }
    50%      { box-shadow: 0 0 0 4px rgba(88,164,255,.55), 0 0 18px 4px rgba(74,139,255,.75); }
  }
  .b4 { background: #c0392b; color: #fff; }
  .b4:hover:not(:disabled) { background: #d24537; }
  button:disabled { opacity: .45; cursor: not-allowed; }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
  .stat { background: var(--panel-2); border-radius: var(--radius-s); padding: 7px 9px; }
  .stat .k { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  .stat .v { font-size: 19.5px; font-weight: 500; white-space: nowrap; }
  /* 3カラム: マップ(左中央) | チャット | コマンド(右) */
  /* 3カラム: 中央=マップ（内容ぴったりの幅=auto）／左右=可変(1fr)で、余った横幅は
     左（コマンド予約・島の運営）と右（チャット・チケット）に回して広く使う。 */
  .grid2 { display: grid; grid-template-columns: 360px minmax(0,1fr) 380px;
    gap: 14px; align-items: start; }
  .grid2 > * { min-width: 0; }   /* 列がコンテンツ幅で膨らんでページが横に伸びるのを防ぐ */
  .leftcol { display: flex; flex-direction: column; gap: 14px; }
  .opsrow:empty { display: none; margin: 0; }
  /* タブレット以下は1カラムに畳み、マップを最上部に */
  @media (max-width: 1200px) {
    .grid2 { grid-template-columns: 1fr; }
    .midcol { order: -1; }
  }
  /* チャット */
  .chattabs { display: flex; gap: 4px; margin-bottom: 8px; }
  .chattabs button { flex: 1; padding: 6px 4px; border-radius: var(--radius-s); border: 1px solid var(--border-2);
    background: var(--panel-2); color: #9fc0dd; cursor: pointer; font-size: 14.5px; }
  .chattabs button:hover:not(.on) { background: #14273d; border-color: var(--border-strong); color: #cfe6ff; }
  .chattabs button.on { background: #1d4f8c; color: #eaf3fb; border-color: #3b6ea8; font-weight: 500; }
  /* 🔴 17BC0: DM・同盟の未読数バッジ */
  .chattabs button { position: relative; }
  .chbadge17bc0 { position: absolute; top: -7px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #e0563c; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px #0f1d2e; pointer-events: none; }
  .chatlog { height: clamp(420px, 62vh, 720px); overflow-y: auto; background: #1a2c44; border: 1px solid #33557d;
    border-radius: 8px; padding: 8px; font-size: 14.5px; line-height: 1.55; margin-bottom: 8px; }
  /* チャット: 送信者ごとに「動物の顔」アバターを表示（別海戦アプリ風） */
  .chatlog .cm { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .chatlog .cm .av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #eaf2fb; border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 1px 3px rgba(0,0,0,.4); user-select: none; }
  .chatlog .cm .av svg { width: 34px; height: 34px; display: block; }
  .chatlog .cm .cmbody { flex: 1 1 auto; min-width: 0;
    background: #223954; border: 1px solid #3a5c84; border-radius: 10px;
    border-top-left-radius: 3px; padding: 5px 10px 7px; }
  .chatlog .cm.me .cmbody { background: #1c5342; border-color: #2e7157; }
  .chatlog .cm .cmhead { display: flex; align-items: baseline; gap: 6px; }
  .chatlog .cm .who { color: #7fd1ff; font-weight: 500; }
  .chatlog .cm .who.me { color: #8fe0a0; }
  .chatlog .cm .who .arrow { color: #6d8aa8; font-weight: 400; }
  .chatlog .cm .tn { color: #90aecb; font-size: 11.5px; margin-left: auto; white-space: nowrap; }
  /* 発言時刻（24時間以内は HH:MM、以降は「N日前」/「1週間以上前」）。控えめに右端へ */
  .chatlog .cm .tm { color: #86a0ba; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .chatlog .cm .tx { display: block; color: #e4eef8; word-break: break-word; margin-top: 2px; }
  .chatlog .cm.dm .who { color: #e8c13a; }
  .chatlog .cm.dm .cmbody { background: #43391a; border-color: #6a5a2a;
    border-left: 3px solid #e8c13a; border-top-left-radius: 3px; }
  .chatlog .cm.dm.me .cmbody { background: #3c3a1f; }
  /* 個別メッセージの目印（全体タブでも普通の発言と一目で区別できるように） */
  .chatlog .cm .dmtag { font-size: 10.5px; font-weight: 500; color: #ffe6a8;
    background: rgba(232,193,58,.18); border: 1px solid #6a5a2a; border-radius: 999px;
    padding: 0 7px; line-height: 1.5; white-space: nowrap; }
  /* タップで個別メッセージを送れる名前 */
  .chatlog .cm .nm.dmable { cursor: pointer; text-decoration: underline dotted rgba(127,209,255,.6); text-underline-offset: 2px; }
  .chatlog .cm .nm.dmable:hover { color: #cfe6ff; text-decoration-style: solid; }
  /* 17NJ: チャット発言の👍good */
  .chatlog .cm .cmfoot { margin-top: 3px; display: flex; }
  .chatlog .cm .cgood { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; line-height: 1.4;
    color: #bcd2e6; background: rgba(127,209,255,.08); border: 1px solid #2e4762; border-radius: 999px;
    padding: 1px 9px; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .chatlog .cm .cgood:hover { background: rgba(127,209,255,.16); border-color: #47709c; color: #e6f2ff; }
  .chatlog .cm .cgood.on { background: rgba(255,138,138,.16); border-color: #a3534f; color: #ffd0cc; }
  .chatlog .cm .cgood .cgoodn { font-weight: 600; }
  .chatlog .cm .cgood.static { cursor: default; background: transparent; border-color: transparent; padding-left: 2px; color: #93a9bf; }
  .chatlog .cm .cgood[disabled] { opacity: .6; cursor: default; }
  /* 17ACT: チャットをタイムライン型の「はこったー」へ再編。 */
  .hakotter { --ht-blue:#4ca6ff; --ht-green:#3ecf8e; --ht-pink:#ff718d; padding-left:10px; padding-right:10px; }
  .hakotter h2 .ht-subtitle { color:#7896b4; font-size:10.5px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hakotter-tools { margin:0 -2px 9px; padding:8px; border:1px solid #2e5278; border-radius:10px;
    background:linear-gradient(145deg,rgba(24,58,91,.9),rgba(13,34,56,.94)); }
  .hakotter-tabs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; margin-bottom:7px; }
  .hakotter-tabs button { min-height:34px; border:0; border-bottom:2px solid transparent; border-radius:7px;
    background:transparent; color:#9fb8d1; font:600 13px var(--font-ui); cursor:pointer; }
  .hakotter-tabs button:hover { background:rgba(76,166,255,.1); color:#d9edff; }
  .hakotter-tabs button.on { color:#fff; border-color:var(--ht-blue); background:rgba(76,166,255,.13); }
  .ht-searchrow { display:flex; gap:5px; }
  .ht-searchrow input { min-width:0; flex:1; height:34px; border-radius:999px; border:1px solid #31577d;
    background:#0b1d31; color:#edf6ff; padding:0 12px; font:inherit; }
  .ht-searchrow input:focus { outline:0; border-color:var(--ht-blue); box-shadow:0 0 0 2px rgba(76,166,255,.18); }
  .ht-searchrow button { min-height:34px; padding:5px 10px; }
  .ht-trends { display:flex; gap:5px; align-items:center; overflow-x:auto; margin-top:7px; scrollbar-width:thin; }
  .ht-trends:empty { display:none; }
  .ht-trends > span { flex:0 0 auto; color:#829fbb; font-size:10px; }
  .ht-trends button, .ht-tag { border:0; background:transparent; color:#75bdff; padding:0; font:inherit; cursor:pointer; }
  .ht-trends button { flex:0 0 auto; padding:3px 8px; border:1px solid #2d557b; border-radius:999px; font-size:10.5px; }
  .ht-trends button:hover, .ht-tag:hover, .ht-mention:hover { color:#b9dfff; text-decoration:underline; }
  /* 17AJS: 本文中の @島名。#タグと同じ見え方に揃える（押せることが一目で分かる）。 */
  .ht-mention { border:0; background:transparent; color:#75bdff; padding:0; font:inherit; cursor:pointer; }
  .ht-trends button b { color:#7f9bb6; font-weight:400; }
  .ht-scope-label { margin:0 2px 4px; color:#7691ad; font-size:10px; letter-spacing:.04em; }
  .ht-restriction { margin:0 2px 8px; padding:9px 10px; border:1px solid #a66c35; border-radius:9px;
    background:linear-gradient(135deg,rgba(111,52,28,.82),rgba(76,34,30,.82)); color:#ffe0bf;
    font-size:11.5px; line-height:1.55; box-shadow:inset 3px 0 0 #ef9a4d; }
  .ht-restriction[hidden] { display:none; }
  .ht-restriction b { color:#fff0dc; }
  .hakotter .chattabs { margin-bottom:7px; }
  .hakotter .chattabs button { font-size:12px; padding:5px 3px; }
  .hakotter .chatlog { padding:0; background:#0e2136; border-color:#31577d; scroll-behavior:smooth; }
  .ht-post { border-bottom:1px solid rgba(94,137,177,.28); padding:10px 11px; color:#dcecff; transition:background .15s ease; }
  .ht-post:hover { background:rgba(70,124,177,.07); }
  .ht-post:last-child { border-bottom:0; }
  /* 🔴 17AJS: Xに寄せる（もりたつ指定 2026-08-26）。
     ① 再投稿は左に緑の帯。JSは以前から .is-repost を出していたのに、対応するCSSが無かった。
     ② タイムラインのカードはどこを押しても会話が開くので、押せることを見た目で示す。 */
  .ht-post.is-repost { box-shadow:inset 3px 0 0 var(--ht-green); }
  .hakotter .chatlog .ht-post[data-open-id] { cursor:pointer; }
  .ht-reposted { margin:0 0 4px 49px; color:#69cf9c; font-size:10.5px; font-weight:600; }
  .ht-postrow { display:flex; gap:9px; align-items:flex-start; }
  .ht-avatar { flex:0 0 42px; width:42px; height:42px; overflow:hidden; border-radius:50%; background:#eaf2fb;
    box-shadow:0 0 0 2px #274e73,0 2px 8px rgba(0,0,0,.35); }
  .ht-avatar svg, .ht-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .ht-content { flex:1 1 auto; min-width:0; }
  .ht-head { display:flex; align-items:center; gap:5px; min-width:0; }
  .ht-identity { min-width:0; display:inline-flex; align-items:center; gap:3px; }
  .ht-account { min-width:0; display:inline-flex; align-items:center; gap:3px; border:0; padding:0; background:transparent;
    color:#edf7ff; cursor:pointer; font:inherit; text-align:left; }
  .ht-account b { max-width:112px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .ht-account:hover b { text-decoration:underline; }
  .ht-island-link, .ht-island-gone { max-width:96px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    color:#7f9ab5; font:10.5px var(--font-ui); }
  .ht-island-link { border:0; padding:0; background:transparent; cursor:pointer; }
  .ht-island-link:hover { color:#b9dfff; text-decoration:underline; }
  .ht-island-gone { opacity:.65; }
  .ht-sea { flex:0 0 auto; color:#6ca7d7; border:1px solid #2e5679; border-radius:999px; padding:0 5px; font-size:9.5px; }
  .ht-time { margin-left:auto; flex:0 0 auto; color:#718ba4; font-size:9.5px; white-space:nowrap; }
  .ht-text { margin-top:4px; color:#e6f1fb; font-size:13.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
  .ht-official-link { color:#7ec8ff; text-decoration:underline; text-decoration-color:rgba(126,200,255,.55);
    text-underline-offset:2px; overflow-wrap:anywhere; }
  .ht-official-link:hover, .ht-official-link:focus-visible { color:#c1e7ff; text-decoration-color:currentColor; }
  /* 🔴 17AJS: 公開投稿の添付画像（もりたつ指定 2026-08-26）。
     1枚は大きく、2枚以上はXと同じ等分タイル。角丸で1つのまとまりに見せる。 */
  .ht-media { display:grid; gap:2px; margin-top:8px; border-radius:14px; overflow:hidden;
    border:1px solid #2f5578; background:#08182a; }
  .ht-media a { display:block; min-width:0; line-height:0; }
  .ht-media img { width:100%; height:100%; display:block; object-fit:cover; background:#0b1d31; }
  .ht-media.n1 img { max-height:340px; height:auto; object-fit:contain; }
  .ht-media.n2 { grid-template-columns:1fr 1fr; }
  .ht-media.n2 img, .ht-media.n4 img { aspect-ratio:1/1; }
  .ht-media.n3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .ht-media.n3 a:first-child { grid-row:span 2; }
  .ht-media.n3 img { aspect-ratio:1/1; }
  .ht-media.n3 a:first-child img { aspect-ratio:1/2; }
  .ht-media.n4 { grid-template-columns:1fr 1fr; }
  /* 添付の操作（コンポーザー側）。掲示板と同じ見た目に揃える。 */
  .ht-attach { flex:0 0 auto; width:34px; height:34px; padding:0; border:1px solid #31577d; border-radius:9px;
    background:#0b1d31; color:#bcd3e8; font-size:15px; line-height:1; cursor:pointer; }
  .ht-attach:hover { background:#16324f; color:#fff; }
  .ht-strip { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
  .ht-strip:empty { display:none; }
  .ht-strip .imgchip { position:relative; width:74px; height:74px; border-radius:9px; overflow:hidden;
    border:1px solid #2c4a6e; background:#0b1a2c; }
  .ht-strip .imgchip img { width:100%; height:100%; object-fit:cover; display:block; }
  .ht-strip .imgchip .rm { position:absolute; top:2px; right:2px; width:22px; height:22px; padding:0;
    display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid #4a6a90;
    background:rgba(10,20,34,.86); color:#fff; font-size:12px; line-height:1; cursor:pointer; }
  .ht-strip .imgchip.up { opacity:.55; }
  .ht-quoted { margin-top:7px; padding:8px 9px; border:1px solid #345a7c; border-radius:10px; background:rgba(8,24,40,.62); }
  .ht-qhead { display:flex; align-items:center; gap:6px; color:#7896b2; font-size:10px; }
  .ht-qhead > span { margin-left:auto; }
  .ht-qtext { margin-top:4px; color:#cfe0ef; font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
  /* 17AJS: 等幅4分割をやめ、Xと同じ左寄せの並びにする（いちばん押す返信が左端に来る）。 */
  .ht-actions { display:flex; flex-wrap:wrap; gap:2px; margin-top:7px; }
  .ht-actions button { min-width:0; min-height:28px; display:flex; justify-content:center; align-items:center; gap:3px; border:0;
    border-radius:999px; background:transparent; color:#88a2bb; padding:3px 10px; cursor:pointer; font:11px var(--font-ui); }
  .ht-actions button:hover:not(:disabled) { background:rgba(76,166,255,.11); color:#80c1ff; }
  .ht-actions .ht-reply:hover:not(:disabled) { color:var(--ht-blue); background:rgba(76,166,255,.13); }
  .ht-actions .ht-repost:hover:not(:disabled), .ht-actions .ht-repost.on { color:var(--ht-green); background:rgba(62,207,142,.1); }
  .ht-actions .ht-like:hover:not(:disabled), .ht-actions .ht-like.on { color:var(--ht-pink); background:rgba(255,113,141,.1); }
  .ht-actions button:disabled { opacity:.35; cursor:not-allowed; }
  /* 17AJS: 「…」メニュー。右端に置いて、Xと同じ位置感覚にする。 */
  .ht-actions .ht-more-btn { margin-left:auto; font-size:14px; line-height:1; letter-spacing:1px; }
  .ht-menu { position:fixed; z-index:100001; min-width:206px; padding:5px; border:1px solid #35618f;
    border-radius:12px; background:#12263c; box-shadow:0 14px 38px rgba(0,0,0,.55); }
  .ht-menu button { display:block; width:100%; min-height:38px; padding:8px 11px; border:0; border-radius:8px;
    background:transparent; color:#dcecff; font:12.5px var(--font-ui); text-align:left; cursor:pointer; }
  .ht-menu button:hover { background:rgba(76,166,255,.14); }
  .ht-menu button.danger { color:#ff9d8a; }
  .ht-menu button.danger:hover { background:rgba(227,61,85,.16); }
  .ht-menu button:focus-visible { outline:2px solid var(--ht-blue); outline-offset:-2px; }
  .ht-menu .ht-menu-note { padding:8px 11px; color:#8aa4bd; font-size:11.5px; }
  .ht-thread { border:0; background:none; color:#70bdf2; padding:5px 0 0; font:600 11px var(--font-ui); cursor:pointer; }
  .ht-thread:hover { color:#b9dfff; text-decoration:underline; }
  /* 17ACV: 過去ログの閲覧位置は保ったまま、新着があることだけを上端で知らせる。 */
  .ht-new { position:sticky; top:0; z-index:4; display:flex; justify-content:center; height:0; overflow:visible; }
  .ht-new button { transform:translateY(7px); border:1px solid #78c2ff; border-radius:999px; padding:6px 14px;
    background:linear-gradient(180deg,#1979bf,#105889); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.42);
    font:600 12px var(--font-ui); cursor:pointer; }
  .ht-new button:hover { background:linear-gradient(180deg,#2491dd,#166aa3); }
  .ht-more { padding:10px; text-align:center; }
  .ht-more button { width:100%; }
  .ht-fold { padding:5px 12px 11px 64px; }
  .ht-fold button { width:100%; min-height:38px; border:1px dashed #355a7a; border-radius:10px; background:#0d2133;
    color:#9dc5df; cursor:pointer; font:inherit; font-size:12px; }
  .ht-fold button:hover { background:#13304a; color:#d5ecfb; }
  .ht-compose .dm-count { margin-right:auto; color:#7d98b2; font-size:11px; }
  .dm-ov .ht-profile { width:min(590px,97vw); max-height:min(760px,92vh); overflow:auto; padding:0 0 14px; }
  .ht-profile > .dm-head { position:sticky; top:0; z-index:2; margin:0; padding:12px 46px 11px 14px; background:rgba(16,38,61,.96); border-bottom:1px solid #315675; }
  .ht-profile-cover { height:120px; background:linear-gradient(125deg,#1c5585,#168b82 58%,#d4a33f) center/cover no-repeat; }
  .ht-profile-head { min-height:45px; display:flex; justify-content:flex-end; align-items:center; padding:4px 14px; position:relative; }
  .ht-profile-avatar { position:absolute; left:16px; bottom:0; width:70px; height:70px; overflow:hidden; border-radius:50%;
    background:#eaf2fb; border:4px solid #122a43; box-shadow:0 2px 12px rgba(0,0,0,.45); }
  .ht-profile-avatar svg, .ht-profile-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .ht-profile-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:5px; margin-left:82px; }
  .ht-profile-actions button { min-height:32px; border-radius:999px; padding:4px 10px; }
  .ht-follow { min-width:112px; border-radius:999px; }
  .ht-follow.on { background:#263d56; color:#d3e3f1; }
  .ht-mute.on { color:#ffcf8a; border-color:#7d6738; }
  .ht-profile-name { display:flex; align-items:center; gap:5px; padding:8px 16px 0; }
  .ht-profile-name b { font-size:18px; color:#edf7ff; }
  .ht-profile-name span { color:#809bb5; font-size:11px; }
  .ht-profile-sea { padding:3px 16px; color:#82a4c2; font-size:12px; }
  .ht-profile-bio { padding:7px 16px 3px; color:#d6e7f5; font-size:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
  .ht-profile-stats { display:flex; gap:18px; padding:8px 16px 12px; color:#88a2ba; font-size:11px; border-bottom:1px solid #31516f; }
  .ht-profile-stats b { color:#e8f3fc; font-size:13px; }
  .ht-profile-stats button { border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
  .ht-profile-stats button:hover { color:#9fdcff; text-decoration:underline; }
  .ht-user-row { width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-bottom:1px solid #24425e; background:transparent; color:#e8f3fc; text-align:left; cursor:pointer; }
  .ht-user-row:hover { background:#17324b; }
  .ht-user-row small { display:block; margin-top:2px; color:#8fa9bf; font-size:11px; white-space:normal; }
  #hakotterUnreadBadge { display:inline-flex; min-width:18px; height:18px; align-items:center; justify-content:center; padding:0 5px; border-radius:999px; background:#e33d55; color:#fff; font-size:10px; font-weight:700; }
  #hakotterUnreadBadge[hidden] { display:none; }
  .ht-profile-posts .ht-post { padding-left:16px; padding-right:16px; }
  .ht-profile-posts .ht-avatar { flex-basis:34px; width:34px; height:34px; }
  .ht-thread-modal { width:min(650px,97vw) !important; }
  .ht-thread-body { max-height:min(72vh,720px); overflow:auto; }
  .ht-thread-root { background:rgba(44,141,201,.06); }
  /* 17AJS: 返信は親からぶら下がって見えるように、左に寄せて縦線を引く。
     .ht-thread-root の中のカードは親なので対象外（直下の子だけを狙う）。 */
  .ht-thread-body > .ht-post { position:relative; padding-left:26px; }
  .ht-thread-body > .ht-post::before { content:''; position:absolute; left:13px; top:0; bottom:0; width:2px;
    border-radius:2px; background:linear-gradient(180deg,rgba(76,166,255,.42),rgba(76,166,255,.12)); }
  .ht-thread-body > .ht-post:last-child::before { bottom:auto; height:26px; }
  .ht-thread-sep { padding:9px 14px; border-top:1px solid #29465e; border-bottom:1px solid #29465e;
    color:#9db5c8; font-size:12px; font-weight:600; }
  /* 🔴 17AJS: 投稿欄を複数行に（Enter=投稿 / Shift+Enter=改行）。高さは入力に応じて伸びる。 */
  .hakotter-compose { align-items:flex-end; }
  .hakotter-compose #chatInput { min-height:34px; max-height:132px; box-sizing:border-box; resize:none;
    padding:7px 10px; line-height:1.5; overflow-y:auto; }
  .ht-count { flex:0 0 auto; align-self:flex-end; padding-bottom:8px; color:#7791aa;
    font:10.5px var(--font-ui); font-variant-numeric:tabular-nums; }
  .ht-count.near { color:#e8c13a; }
  .ht-count.full { color:#ff8a72; font-weight:600; }
  .ht-mute-list { padding:5px 12px; }
  .ht-mute-row { display:flex; align-items:center; gap:9px; padding:10px 3px; border-bottom:1px solid #294a67; }
  .ht-mute-account { flex:1; min-width:0; display:flex; align-items:center; gap:10px; border:0; padding:0; background:transparent; color:#eaf5ff; text-align:left; cursor:pointer; }
  .ht-mute-account > span:last-child { min-width:0; display:flex; flex-direction:column; }
  .ht-mute-account b, .ht-mute-account small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ht-mute-account small { color:#7896b2; }
  .ht-mute-avatar { flex:0 0 42px; width:42px; height:42px; overflow:hidden; border-radius:50%; background:#eaf2fb; }
  .ht-mute-avatar img, .ht-mute-avatar svg { width:100%; height:100%; object-fit:cover; display:block; }
  .ht-profile-edit .ht-edit-form { display:grid; gap:13px; padding:16px; }
  .ht-edit-form > label, .ht-edit-media > label { display:grid; gap:5px; color:#b8cee0; font-size:12px; font-weight:600; }
  .ht-edit-form input[type="text"], .ht-edit-form input:not([type]), .ht-edit-form textarea { width:100%; box-sizing:border-box; border:1px solid #345b7d; border-radius:8px; background:#0b1d31; color:#edf6ff; padding:9px 10px; font:13px var(--font-ui); }
  .ht-edit-form textarea { resize:vertical; min-height:84px; }
  .ht-edit-count { justify-self:end; color:#7793ad; font-weight:400; }
  .ht-edit-media { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; border-top:1px solid #294a67; padding-top:12px; }
  .ht-edit-preview { display:block; background:linear-gradient(125deg,#1c5585,#168b82 58%,#d4a33f) center/cover no-repeat; border:1px solid #426885; }
  .ht-edit-preview.avatar { width:72px; height:72px; border-radius:50%; }
  .ht-edit-preview.header { width:min(360px,70vw); aspect-ratio:3/1; border-radius:8px; }
  .ht-edit-media input[type="file"] { max-width:min(360px,70vw); color:#9db6cc; font-size:11px; }
  @media (max-width:520px) {
    .hakotter h2 .ht-subtitle { display:none; }
    .ht-post { padding:10px 8px; }
    .ht-actions button { min-height:36px; font-size:11px; }
    .ht-actions .ht-quote { font-size:0; }
    .ht-actions .ht-quote::before { content:'❝'; font-size:14px; }
    .ht-actions button { padding:3px 8px; }
    .ht-media.n1 img { max-height:260px; }
    .ht-strip .imgchip { width:64px; height:64px; }
    .ht-thread-body > .ht-post { padding-left:20px; }
    .ht-thread-body > .ht-post::before { left:9px; }
    .ht-count { font-size:10px; padding-bottom:9px; }
    .ht-account b { max-width:92px; }
    .ht-island-link, .ht-island-gone { max-width:72px; }
    .ht-sea { display:none; }
    .ht-profile-cover { height:96px; }
    .ht-profile-actions { margin-left:78px; gap:4px; }
    .ht-profile-actions button { min-height:34px; padding:4px 8px; font-size:10.5px; }
  }
  /* 🔴 17AJU: 新規登録・ログイン画面のGoogleボタン（もりたつ指定 2026-08-26）。
     Googleのブランド指定に沿って白地・濃い文字にし、既存の青いCTAとは別物だと分かるようにする。 */
  .auth-or { display:flex; align-items:center; gap:10px; margin:12px 0 10px; color:#7f9ab5; font-size:11.5px; }
  .auth-or::before, .auth-or::after { content:''; flex:1; height:1px; background:#2e5278; }
  .gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:46px;
    padding:10px 14px; border:1px solid #dadce0; border-radius:10px; background:#fff; color:#3c4043;
    font:600 14px var(--font-ui); cursor:pointer; transition:background .12s, box-shadow .12s; }
  .gbtn:hover { background:#f6f8fc; box-shadow:0 1px 6px rgba(0,0,0,.28); }
  .gbtn:focus-visible { outline:3px solid rgba(76,166,255,.45); outline-offset:2px; }
  .gbtn[hidden] { display:none; }
  .gbtn .gmark { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
    border-radius:50%; background:conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
    color:#fff; font:700 12px var(--font-ui); text-shadow:0 0 2px rgba(0,0,0,.35); }
  .lf-hint.gnote { margin-top:7px; }
  /* 17M7: メンテナンス中のフルスクリーン・ブロッキング表示 */
  .mnt-ov { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(6, 12, 20, 0.86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .mnt-ov .mnt-box { max-width: 440px; width: 100%; text-align: center; padding: 26px 22px 22px;
    background: linear-gradient(180deg, #16283d, #0f1b2b); border: 1px solid #35618f; border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); color: #eaf3fb; }
  .mnt-ov .mnt-ic { font-size: 44px; line-height: 1; margin-bottom: 8px; }
  .mnt-ov .mnt-ti { font-size: 19px; font-weight: 600; letter-spacing: .02em; margin-bottom: 10px; color: #ffe1a6; }
  .mnt-ov .mnt-msg { font-size: 14px; line-height: 1.7; color: #dbe7f3; }
  .mnt-ov .mnt-until { margin-top: 12px; font-size: 13px; font-weight: 500; color: #9fe0c0; }
  .mnt-ov .mnt-sub { margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: #8fa6bd; }
  /* 17MQ: メンテ/更新中のロード演出——「大和級巨大戦艦」が右上から左下へぷかぷか航行する。 */
  .mnt-ov .mnt-sail { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .mnt-ov .mnt-box { position: relative; z-index: 1; } /* 船より前面に（本文を確実に読めるように） */
  .mnt-ov .mnt-ship { position: absolute; top: 0; left: 0; will-change: transform;
    animation: mntSail 30s linear infinite; }
  .mnt-ov .mnt-ship-img { display: block; width: 84px; height: 84px; image-rendering: pixelated;
    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.45)); animation: mntBob 2.8s ease-in-out infinite; }
  /* 画面上部（メンテ表示に被らない位置）を、右（画面外）→ 左（画面外）へゆっくり横断してループ。
     縦のレーンは各艦ごとに --lane（既定8vh）で指定。速度・大きさ・揺れは各艦の inline style でばらつかせる。 */
  @keyframes mntSail {
    0%   { transform: translate(82vw, var(--lane, 8vh)); }
    100% { transform: translate(-30vw, var(--lane, 8vh)); }
  }
  /* しっかりぷかぷか上下に揺れつつ、舳先を少し揺らす（大和は左向きの絵）。 */
  @keyframes mntBob {
    0%, 100% { transform: rotate(15deg) translateY(9px); }
    50%      { transform: rotate(27deg) translateY(-15px); }
  }
  /* 端末のモーション低減設定を尊重（酔い対策）。動かさず中央付近に静止表示。 */
  @media (prefers-reduced-motion: reduce) {
    .mnt-ov .mnt-ship { animation: none; transform: translate(40vw, var(--lane, 8vh)); }
    .mnt-ov .mnt-ship-img { animation: none; transform: rotate(20deg); }
  }
  /* 17M6: 「名前@島名」の島名チップ（タップで観光）と @ 区切り。名前(青)と区別して島名は緑系に。 */
  .chatlog .cm .cmhead .atmark { color: #6d8aa8; font-weight: 400; margin: 0 1px; }
  .chatlog .cm .nm.goto { cursor: pointer; color: #7fe0b0; font-weight: 500;
    text-decoration: underline dotted rgba(127,224,176,.6); text-underline-offset: 2px; }
  .chatlog .cm .nm.goto:hover { color: #b6f5d3; text-decoration-style: solid; }
  /* 個別メッセージ送信ポップアップ（17NL: セレクタを #dmModal 限定から .dm-ov 共通へ変更。
     ID限定だと同じ体裁で作った別のモーダル＝目安箱などが素のHTMLのまま表示されてしまうため） */
  /* 17NM: z-index 240 → 250。スマホではボトムシート(.msheet=241)と下部ナビ(.mnav=242)が前面にあり、
     チャットはシートの中に入る。240 のままだとシートを開いたまま名前をタップして開いたこのポップアップが
     シートの裏に隠れてしまっていた（ユーザー報告: スマホではチャットの下に個人チャット用のポップが出る）。
     同じ .dm-ov を使う目安箱(#suggestModal)も併せて直る。 */
  .dm-ov { position: fixed; inset: 0; z-index: 250; background: rgba(4,10,18,.62);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
  .dm-ov .dm-box { position: relative; width: min(440px, 97vw); background: var(--panel-3);
    border: 1px solid var(--head-border); border-radius: var(--radius-l); box-shadow: var(--shadow-modal);
    padding: 14px 14px 12px; }
  .dm-ov .dm-head { font-weight: 600; color: #ffe6a8; font-size: 15px; margin-bottom: 10px; padding-right: 26px; }
  .dm-ov .dm-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: none;
    border-radius: var(--radius-s); background: #2a3b53; color: #cdd9e6; font-size: 14px; cursor: pointer; }
  .dm-ov .dm-x:hover { background: #3a4f6e; }
  .dm-ov .dm-ta { width: 100%; resize: vertical; background: #0b1a2c; color: #eaf3fb;
    border: 1px solid var(--border-strong); border-radius: var(--radius-s); padding: 8px 10px; font: inherit; }
  .dm-ov .dm-note { font-size: 12px; color: #9fb6cf; margin: 8px 2px 12px; }
  .dm-ov .dm-expr-label { margin: 9px 2px 5px; color: #cfe2f5; font-size: 12px; font-weight: 600; }
  .dm-ov .dm-expr-label span { color: #8fa8c1; font-weight: 400; }
  .dm-ov .dm-expr-list { display: flex; gap: 5px; overflow-x: auto; padding: 2px 1px 6px; scrollbar-width: thin; }
  .dm-ov .dm-expr-btn { flex: 0 0 48px; min-width: 48px; padding: 4px 2px 3px; border: 1px solid #2c4a6e;
    border-radius: 8px; background: #102138; color: #9fb6cf; cursor: pointer; font: inherit; font-size: 9px; line-height: 1.25; }
  .dm-ov .dm-expr-btn svg { display: block; width: 30px; height: 30px; margin: 0 auto 2px; background: #eaf2fb; border-radius: 50%; }
  .dm-ov .dm-expr-btn span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dm-ov .dm-expr-btn:hover { border-color: #3b6ea8; }
  .dm-ov .dm-expr-btn.on { border-color: #4d8fd6; background: #183557; box-shadow: 0 0 0 2px #2f6db0; color: #eaf3fb; }
  .dm-ov .dm-btns { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
  .dm-ov .dm-btns button { padding: 8px 16px; border-radius: 9px; cursor: pointer; border: 1px solid var(--border-2); }
  .dm-ov .dm-btns button[disabled] { opacity: .5; cursor: default; }
  /* 目安箱（17NL）: 長文を書くので一回り大きく。文字数カウンタを左端に置く。 */
  #suggestModal .dm-box { width: min(560px, 97vw); }
  #suggestModal .dm-ta { min-height: 132px; }
  #suggestModal .dm-count { margin-right: auto; font-size: 12px; color: #7f97b1; }
  #suggestModal .dm-count.over { color: #ff9d9d; font-weight: 500; }
  .chatempty { color: #5a7691; text-align: center; margin-top: 40px; }
  /* チャットの過去ログ読み込み（ログ最上部の「もっと見る」） */
  .chatmore { text-align: center; margin: 0 0 8px; }
  .chatmore button { width: 100%; font-size: 12.5px; padding: 6px 8px; }
  /* 同盟・友好の管理（🤝 外交パネル内 #allyBar。宣戦布告 #warOps と同居） */
  .ally { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: #0e1b2c;
    border: 1px solid #1d3148; border-radius: 8px; margin-bottom: 4px; font-size: 14.5px; }
  .ally .nm { flex: 1; color: #dbe7f3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ally .ally-island-link17amx { color: #a9dcff; text-decoration: underline dotted rgba(125,193,255,.7);
    text-underline-offset: 3px; }
  .ally .ally-island-link17amx:hover { color: #e5f5ff; text-decoration-style: solid; }
  .ally .st { font-size: 12.5px; color: #9fc0dd; white-space: nowrap; }
  /* 🔴 17BDA 友好国の行: 狭いときはボタンを次の行へ送り、島名をつぶさない。申請が届いている行は2行で目立たせる */
  .ally.amity17bda { flex-wrap: wrap; row-gap: 4px; }
  .ally.amity17bda .nm { flex: 1 1 140px; }
  .ally.amity-in17bda { border-left: 3px solid #ffd76a; background: #1d2a1c; }
  .ally.amity-in17bda .nm { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; font-weight: 700; color: #fff3c4; }
  .ally.amity-in17bda .st { color: #ffd76a; margin-right: auto; }
  /* 17BEB: 長い島名・戦争のT情報をスマホでも全文読めるようにする。 */
  .ally.dip-row17beb { flex-wrap: wrap; row-gap: 6px; }
  .ally.dip-row17beb .nm { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
  .ally.dip-row17beb .st { flex: 1 1 180px; white-space: normal; overflow-wrap: anywhere; }
  .dip-note17beb { font-size: 12px; margin: 6px 0; overflow-wrap: anywhere; }
  .ally button { padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border-2); cursor: pointer;
    background: #14304e; color: #cfe6ff; font-size: 13px; }
  .ally button:hover { background: #1d4066; border-color: var(--border-strong); }
  .ally button.off { background: #3a2020; color: #f0c8c0; border-color: #5a3030; }
  .ally button.off:hover { background: #4a2828; border-color: #7a4040; }
  /* 同盟パネル */
  .alh { font-size: 13.5px; font-weight: 600; color: #eaf3fb; margin: 6px 0 5px;
         padding: 5px 9px; border-radius: var(--radius-s);
         background: var(--head-grad); border: 1px solid var(--head-border); }
  .alrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
  .alrow input, .alrow select { flex: 1 1 auto; min-width: 0; }
  .almembers { margin-bottom: 4px; }
  canvas { width: 100%; image-rendering: pixelated; border-radius: 8px; display: block; background: #06101c; cursor: crosshair; }
  .legend { font-size: 12.5px; color: var(--muted); margin-top: 8px; display: flex; gap: 4px 10px; flex-wrap: wrap; }
  .legend span { display: inline-flex; align-items: center; gap: 4px; }
  .legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
              box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  /* 17AJN: 表示件数は #queueRows で切り替える（--queue-rows。0=すべて＝上限なし）。
     1件ぶんの高さ 86px は .queue li の padding+2行本文+操作行の実測。 */
  .queue { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px;
           --queue-rows: 3; max-height: calc(var(--queue-rows) * 86px); overflow: auto; }
  .queue.qrows-all { max-height: none; }
  .qhead .qrows-lbl { float: right; font-size: 11px; font-weight: normal; color: #8fb0cc; }
  .qhead .qrows-lbl select { font-size: 11px; margin-left: 4px; }
  .qhead .qhead-controls17awg { float:right; display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:5px 9px; }
  .qhead .qhead-controls17awg .qrows-lbl { float:none; white-space:nowrap; }
  .queue .qsel { flex: 0 0 auto; margin: 0 2px 0 0; cursor: pointer; }
  /* 予約コマンドは明るいカードで表示: 番号 / コマンド名・座標・費用 / ▲▼(並べ替え)・×(取消) */
  .queue li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
              background: linear-gradient(180deg, #f4f8fd, #dde9f6); color: #182c42;
              border: 1px solid #9db8d4; border-radius: 9px;
              padding: 6px 8px; margin-bottom: 6px; box-shadow: var(--shadow-1); }
  .queue li:hover { border-color: #6f95bf; }
  .queue li.qempty { background: transparent; border: 0; box-shadow: none; padding: 2px 0; }
  .queue .qno { flex: 0 0 auto; min-width: 22px; height: 22px; display: inline-flex; align-items: center;
              justify-content: center; background: var(--accent-btn); color: #fff; font-weight: 600;
              font-size: 12.5px; border-radius: 999px; padding: 0 5px; }
  .queue .qbody { flex: 1 1 220px; min-width: min(220px, 100%); display: flex; flex-direction: column; line-height: 1.35; }
  /* 予約カードの本文は、日本語が語の途中で無意味に折り返さないようにする
     （CJKは基本折らず＝keep-all、どうしても入らない時だけ anywhere で緊急改行）。 */
  .queue .qname { font-weight: 500; color: #14293f; word-break: keep-all; overflow-wrap: anywhere; }
  .queue .qmeta { font-size: 12.5px; color: #47617c; word-break: keep-all; overflow-wrap: anywhere; }
  .queue .qcost { color: #7c5a12; font-weight: 500; }
  .queue .qops { flex: 1 0 100%; display: inline-flex; gap: 3px; align-items: center; justify-content: flex-end; }
  .queue .qmove-desktop, .queue .qreorder-controls { display: inline-flex; gap: 3px; align-items: center; }
  .queue .qreorder { display: none; }
  .queue .qmv { width: 26px; height: 24px; padding: 0; border: 1px solid #a9c0d8; border-radius: 6px;
              background: #fff; color: #2c527c; font-size: 11px; line-height: 1; cursor: pointer; }
  .queue .qmv:hover:not(:disabled) { background: #e6f0fb; border-color: #6f95bf; color: #163a63; }
  .queue .qmv:disabled { opacity: .35; cursor: default; }
  @media (max-width: 560px) {
    /* 予約本文とチケットを優先。四つの並べ替えボタンは必要なときだけ開く。 */
    .queue li { flex-wrap: wrap; }
    .queue .qops { flex: 1 0 100%; justify-content: flex-end; }
    .queue .qmove-desktop { display: none; }
    .queue .qreorder { display: inline-block; position: relative; }
    .queue .qreorder summary { list-style: none; min-height: 24px; display: inline-flex; align-items: center;
                              padding: 0 8px; border: 1px solid #a9c0d8; border-radius: 6px;
                              background: #fff; color: #2c527c; font-size: 11px; cursor: pointer; }
    .queue .qreorder summary::-webkit-details-marker { display: none; }
    .queue .qreorder[open] { flex: 1 0 100%; }
    .queue .qreorder[open] summary { margin-left: auto; }
    .queue .qreorder-controls { display: flex; justify-content: flex-end; margin-top: 5px; }
  }
  .queue .x { width: 26px; height: 24px; padding: 0; display: inline-flex; align-items: center;
              justify-content: center; color: #c22a55; cursor: pointer; font-weight: 600; font-size: 14px;
              line-height: 1; border: 1px solid #d8aebc; border-radius: 6px; background: #fff; }
  .queue .x:hover { color: #fff; background: #e0446e; border-color: #e0446e; }
  .queue .tk-disc { color: #9c6a00; font-weight: 500; }  /* 割引チケット付き予約（半額/無料）。明色カード上の濃アンバー */
  /* ターン非消費(turnCost0)コマンドの実行ターン番号は緑系にして「消費なし」を直感的に */
  .queue .qno.qno-zero { background: #2e9e5b; }
  .queue .qzero { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 500; color: #1c7a45;
                  background: #d9f3e2; border: 1px solid #8fd6a8; border-radius: 999px; padding: 0 7px; vertical-align: middle; }
  /* 17NV: 一括整地が展開した「荒地限定の整地」予約の注記（実行時に荒地でなければスキップ） */
  .queue .qwaste { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 500; color: #8a5a1c;
                  background: #fdf0d8; border: 1px solid #e0bd7e; border-radius: 999px; padding: 0 7px; vertical-align: middle; }
  /* 17BP: 予約へのチケット適用ボタン（⚡即実行 / 🏷️半額 / 🎁無料。所持している種類だけ表示） */
  .queue .qtk { width: 26px; height: 24px; padding: 0; display: inline-flex; align-items: center;
              justify-content: center; border: 1px solid #cbb478; border-radius: 6px;
              background: #fffbe9; font-size: 12px; line-height: 1; cursor: pointer; }
  .queue .qtk:hover { background: #ffefc2; border-color: #a8853a; }
  .island-profile-link { appearance: none; border: 1px solid #2f587d; cursor: pointer; font: inherit; }
  .island-profile-link:hover { color: #b9e8ff; border-color: #5797ca; background: #173956; }
  /* 17F7: 予約カードのドラッグ＆ドロップ並べ替え。
     ⠿ハンドルだけを掴む（カード本体はスクロール・ボタン操作を邪魔しない）。
     touch-action:none でスマホのスクロールと競合させない。 */
  .queue .qgrab { flex: 0 0 auto; align-self: stretch; display: inline-flex; align-items: center;
              justify-content: center; min-width: 22px; margin: -6px 0 -6px -4px; padding: 0 2px;
              color: #7d97b2; font-size: 15px; line-height: 1; cursor: grab;
              touch-action: none; user-select: none; -webkit-user-select: none; }
  .queue .qgrab:hover { color: #2c527c; }
  .queue li.qdragging { position: relative; z-index: 5; opacity: .95; cursor: grabbing;
              border-color: #4d8fd6; box-shadow: 0 8px 20px rgba(8,20,36,.45); }
  .queue li.qdragging .qgrab { cursor: grabbing; }
  /* 挿入位置のインジケータ（青いバー）。カード間 gap があるので box-shadow で線を出す */
  .queue li.qdrop-before { box-shadow: 0 -4px 0 -1px #3b82f6, var(--shadow-1); }
  .queue li.qdrop-after  { box-shadow: 0  4px 0 -1px #3b82f6, var(--shadow-1); }
  .muted { color: var(--muted); font-size: 14px; }
  .toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(8px); background: #1d3553;
           border: 1px solid #2f5380; padding: 10px 16px; border-radius: var(--radius); font-size: 15px;
           opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 90%;
           box-shadow: var(--shadow-pop); z-index: 350; /* 17N1: モーダル群より手前（メンテ画面100000の下） */ }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  /* 17AAV: チュートリアルの実況は1文が長いので、狭い画面でも折り返して全部読めるようにする。 */
  .toast { line-height: 1.6; text-align: center; }
  @media (max-width: 700px) { .toast { font-size: 14px; padding: 9px 13px; max-width: 94%; } }
  .toast.errc { background: #4a1f23; border-color: #7c2d33; }
  /* 17AOI: 大海洋マップのAPI失敗も、モーダルの背後ではなく画面内に表示する。 */
  body.gate-sea-open17aoi .toast { z-index: 1880; }
  /* 17ARP: 大海洋モーダルの背後で本海域の地図（アニメGIFの地形）を描き続けない。
     モーダルは半透明で本来は透けて見えるが、静止5秒で本海域の再描画が大海洋側と同程度あった（計測）。
     visibility なので配置は変わらず、閉じれば元に戻る。 */
  body.gate-sea-open17aoi #mapstage { visibility: hidden; }
  .pill { font-size: 12.5px; background: var(--panel-2); border: 1px solid #22374f;
          border-radius: 20px; padding: 2px 10px; color: #b9c8d8; }
  /* 現在のターン表示（「ターンNN」）は上部で見やすいよう大きく・はっきりと。 */
  #turnPill { font-size: 15.5px; font-weight: 600; color: #eaf3fb; background: #16304e;
          border-color: #315a80; padding: 4px 13px; }
  /* 17RI: 所属同盟のピル（📮目安箱 #9）。色は render.js が --alc（同盟ごとの安定色）で渡す。
     同盟名はプレイヤーの自由入力（最大24文字）なので、長い名前は「…」で省略して
     ヘッダの他のピル（🕊国連保護国・🎖保護国送り）を押し出さないようにする。
     ⚠️ z-index は書かない（17RC で直した「選択中の艦が下に隠れる」の再発防止）。 */
  .pill.alpill { color: var(--alc, #7db4ff); border-color: color-mix(in srgb, var(--alc, #7db4ff) 55%, #22374f);
          background: color-mix(in srgb, var(--alc, #7db4ff) 14%, var(--panel-2));
          max-width: 15em; display: inline-flex; align-items: baseline; gap: 3px; vertical-align: bottom; }
  .pill.alpill .alnm { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 自分と同じ同盟は「味方＝青」で固定して、どの同盟に居ても同じ読み方ができるようにする。 */
  .pill.alpill.mine { color: #cfe6ff; background: #1b3f6b; border-color: #4a7fb5; font-weight: 500; }
  /* color-mix 非対応ブラウザ向けの下支え（色が付かないだけで文字は読める） */
  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .pill.alpill { background: var(--panel-2); }
  }
  /* タイトル横の海域バッジが複数海域モードのときは、枠なしのチップ並びにする（α海域/β海域…）。 */
  .worldtag.multi { background: none; border: none; padding: 0; display: inline-flex; gap: 5px;
          align-items: center; letter-spacing: normal; flex-wrap: wrap; }
  .worldtag.multi .wt-chip { font-size: 11px; font-weight: 600; line-height: 1; color: #9fd0ff;
          background: rgba(74,139,255,.16); border: 1px solid #3a6396; border-radius: 999px;
          padding: 4px 9px 3px; cursor: pointer; white-space: nowrap; font-family: inherit;
          transition: background .12s, border-color .12s, color .12s; }
  .worldtag.multi .wt-chip:hover { background: rgba(74,139,255,.3); color: #eaf3fb; }
  .worldtag.multi .wt-chip.active { background: #1f6feb; border-color: #7fc1ff; color: #fff; }
  .hide { display: none; }
  .sel { font-family: monospace; font-size: 14px; color: #e8a13a; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #1d3148; }
  th { color: #8aa0b4; font-weight: 400; }
  .topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 8px; padding-right: 52px; }
  /* 右上に常時固定する「⚙ 設定」ボタン（#btnGear）。PC・スマホ共通で押しやすい位置に。 */
  .gearfix { position: fixed; top: 10px; right: 12px; z-index: 245;
             width: 40px; height: 40px; padding: 0; border-radius: 10px;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: 20px; line-height: 1; cursor: pointer;
             color: #dbe9f7; background: #16324f; border: 1px solid #34608f;
             box-shadow: 0 2px 8px rgba(0,0,0,.4); }
  .gearfix:hover { filter: brightness(1.15); }
  /* 開発用の説明サブ文はマップ表示領域を稼ぐため非表示 */
  .topbar .sub { display: none; }
  /* 上部の操作パネルはコンパクトに（マップをスクロールなしで見せるため縦を詰める） */
  #statusPanel { padding: 9px 12px; margin-bottom: 9px; }
  #statusPanel .topline { margin-bottom: 8px; }
  #statusPanel .statusbar { margin-bottom: 0; }
  .statusrow { row-gap: 6px; }
  #mapPanel { padding: 10px; }
  /* 島バナー（原典寄せ・コンパクト化）。17BZ: 帯の見た目（背景/枠）は .topline へ移し、
     #ibanner 自身は枠なしの中身（島名・島主・天気…）だけにして、右のターン情報と1行に並ぶ。 */
  .topline { background: linear-gradient(#1b3a5c,#122a44); border: 1px solid #2f5380; border-radius: 10px;
             padding: 5px 10px; margin-bottom: 8px; display: flex; align-items: center;
             gap: 6px 10px; flex-wrap: wrap; }
  .ibanner { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
             flex: 1 1 auto; min-width: 0; }
  /* ターン情報（turn N・本日の更新時刻・カウントダウン）は右端に寄せ、狭幅では折り返す */
  .topline .turninfo { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
             margin-left: auto; }
  .ibanner .nm { font-size: 19px; font-weight: 600; letter-spacing: .02em; color: #ffe9b0;
                 text-shadow: 0 1px 0 #000; white-space: nowrap; }
  .ibanner .ow { font-size: 13.5px; color: #9fc0dd; }
  .ibanner .cm { font-size: 13.5px; color: #c7d6e6; margin-left: auto; font-style: italic; }

  /* ===== 17NQ: PC版ヘッダーの整理（4段 → 2段）＝「上部がごちゃごちゃ」への対応 =====
     ・ガイド系リンク7本      → ☰ メニュー（#navPop）
     ・観戦セレクト/海域/リプレイ → 🔭 他の島 / 海域（#specPop）
     ・更新時刻チップ8個      → 🕒 更新時刻（#turnSchedule をポップオーバー化）
     ・.topline（島名＋ターン）と .statusrow（操作）を .hdrmain で1本の帯に束ねる
     要素と id は一切消していない（既存JSの参照を壊さないため）。畳んでいるのは CSS だけなので、
     body.mmode（スマホ）では下の mmode セクションですべて従来の「並べる」表示へ戻している。 */

  /* --- 汎用ポップオーバー --- */
  .popwrap { position: relative; display: inline-flex; align-items: center; }
  .popwrap > .pop { position: absolute; top: calc(100% + 7px); left: 0; z-index: 120; display: none;
        min-width: 236px; background: var(--panel-3); border: 1px solid var(--border-strong);
        border-radius: var(--radius-l); box-shadow: var(--shadow-pop); padding: 7px; }
  .popwrap.open > .pop { display: block; }
  .pop .poph { font-size: 10.5px; letter-spacing: .1em; font-weight: 500; color: var(--muted);
        padding: 7px 9px 3px; }
  .pop .popitem { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
        padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--text);
        background: none; border: 0; text-decoration: none; cursor: pointer; font-family: inherit;
        white-space: nowrap; }
  .pop .popitem:hover { background: #1b3050; }
  .pop .popitem .ic { width: 20px; text-align: center; flex: 0 0 auto; }
  /* #btnHelp は独自の枠付きボタン指定(#btnHelp{})を持つので、ポップオーバー内では打ち消す */
  .pop .popitem#btnHelp { background: none; border: 0; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
  .pop .popitem#btnHelp:hover { background: #1b3050; border: 0; }
  .popbtn { display: inline-flex; align-items: center; gap: 4px; }
  .popbtn .cav, .navmenu-btn .cav { font-size: 9px; opacity: .8; }

  /* --- ☰ メニュー（トップバー右） --- */
  .navmenu-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; line-height: 1;
        padding: 7px 12px; border-radius: var(--radius-s); background: #14304e; color: #cfe6ff;
        border: 1px solid var(--border-2); cursor: pointer; font-family: inherit; }
  .navmenu-btn .lb { font-size: 14px; font-weight: 500; }
  .navmenu-btn:hover { background: #1d4066; border-color: var(--border-strong); }
  #navWrap > .pop { left: auto; right: 0; }

  /* --- 🔭 他の島 / 海域 --- */
  #specPop { min-width: 272px; }
  #specPop .worldtag.multi { padding: 2px 5px 4px; }
  #specPop #spectateSel { width: calc(100% - 8px); margin: 0 4px 6px; min-width: 0; }
  #specPop #btnReplay { width: calc(100% - 8px); margin: 0 4px 2px; display: flex;
        align-items: center; justify-content: center; }

  /* --- 🕒 更新時刻（チップ列をポップオーバーへ） --- */
  #btnTurnSched { font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
        background: #12283f; border: 1px solid var(--border-2); color: #cfe0f2;
        cursor: pointer; font-family: inherit; white-space: nowrap; }
  #btnTurnSched:hover { background: #143050; border-color: var(--border-strong); }
  body:not(.mmode) #tsWrap > .turnsched { position: absolute; top: calc(100% + 7px); right: 0; left: auto;
        z-index: 120; max-width: 330px; padding: 8px 10px; background: var(--panel-3);
        border: 1px solid var(--border-strong); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); }
  body:not(.mmode) #tsWrap:not(.open) > .turnsched { display: none !important; }
  body:not(.mmode) #tsWrap > .turnsched .tslabel { flex-basis: 100%; margin: 0 0 3px; white-space: nowrap; }
  /* 絶対配置の inline-flex は shrink-to-fit で幅が潰れ、時刻チップが1列に縦積みになる。
     チップが3〜4個ずつ横に並ぶ幅を明示しておく。 */
  body:not(.mmode) #tsWrap > .turnsched { min-width: 306px; }

  /* --- 1段目の帯（.topline ＋ .statusrow を1行に束ねる） --- */
  body:not(.mmode) #statusPanel .hdrmain { display: flex; align-items: center; flex-wrap: wrap;
        gap: 6px 14px; background: linear-gradient(#1b3a5c,#122a44); border: 1px solid #2f5380;
        border-radius: 10px; padding: 5px 10px; margin-bottom: 9px; }
  body:not(.mmode) #statusPanel .hdrmain > .topline { flex: 1 1 400px; min-width: 0; margin: 0;
        padding: 0; background: none; border: 0; border-radius: 0; }
  body:not(.mmode) #statusPanel .hdrmain > .statusrow { flex: 0 1 auto; margin: 0; row-gap: 6px;
        justify-content: flex-end; }
  body:not(.mmode) #statusPanel .hdrmain .latestnews { flex: 0 1 auto; max-width: 320px; }
  /* 帯の中では「島名 → 島主 → 天気 → ターン情報」を左から詰めて並べる。
     素の .topline は1段組み前提で .turninfo に margin-left:auto（右端寄せ）、.ibanner .cm にも
     margin-left:auto が入っており、そのままだと帯の中で島名とターン情報が2行に割れてしまう。 */
  body:not(.mmode) #statusPanel .hdrmain > .topline > .ibanner { flex: 0 1 auto; }
  body:not(.mmode) #statusPanel .hdrmain > .topline > .ibanner .cm { margin-left: 0; }
  body:not(.mmode) #statusPanel .hdrmain > .topline .turninfo { margin-left: 0; }
  /* 17AQJ: Retinaの横長画面は画像上の横幅ほどCSS表示幅が広くない。中間幅で島情報と
     操作列を左右へ押し込むと、両方が内部折返しして大きな空白が生じるため、明確な2段へ戻す。 */
  @media (min-width:761px) and (max-width:1700px) {
    body:not(.mmode) #statusPanel .hdrmain { display: grid; grid-template-columns: minmax(0, 1fr);
      align-items: start; gap: 7px; }
    body:not(.mmode) #statusPanel .hdrmain > .topline { width: 100%; }
    body:not(.mmode) #statusPanel .hdrmain > .statusrow { width: 100%; justify-content: flex-start; }
    body:not(.mmode) #statusPanel .statusrow .specgrp { min-width: 0; flex: 0 1 auto; }
    body:not(.mmode) #statusPanel .statusrow button { white-space: nowrap; }
    body:not(.mmode) #statusPanel .hdrmain .latestnews { margin-left: auto; max-width: min(420px, 35vw); }
  }
  /* 17AQJ end */
  /* ステータスは独立したミニカードを並べる（角丸・微グラデ・左アクセント） */
  /* align-items:start にしないと、レート(サブ行あり)の高さに他カードが引き伸ばされ、数値の下に余白が出る */
  /* 上部: ステータス（コンパクト）＋ その右にチケット使用パネル。
     左（7枚のカード）と右（チケット）で幅を分け合い、カードは自ゾーン内で均等に伸びて
     余白が偏らないようにする。チケット側は枠を持たず、.sc と同サイズのミニカード群として同じ行に溶け込ませる。 */
  .statustop { display: flex; gap: 10px 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 10px; }
  .statustop .statusbar { flex: 999 1 560px; min-width: 0; margin-bottom: 0; align-content: flex-start; }
  .statustop .statusbar .sc { flex: 1 1 96px; }   /* カードがゾーン幅いっぱいに均等配分（左寄り・間延び防止） */
  /* チケットは枠・見出し帯を持たず、「ラベルカード＋チップ6枚」が資金カードと同じ行リズムで並ぶ。
     幅が足りない時は #ticketTop ごと（あるいはチップ列だけ）次の行へ折り返す。 */
  /* PC: チケット枠は「🎫 チケット / ✨ プレミアム」の2本の格納バーを縦に積んだコンパクトな列にする。
     格納することで横幅を取らず、ステータスカード（資金〜次ターン予想）が1行に収まる。 */
  /* PC: 🎫チケット（左）と ✨プレミアム（右）を横並びにして高さを1段に抑え、
     ステータスカードとマップの間の余白を詰める。開いたカードは横幅いっぱいで下へ伸ばす。 */
  .statustop #ticketTop { flex: 0 0 372px; min-width: 0; display: flex; }
  /* 17LW: プレミアムが #tkAcc 内へ統合され、パネルの子は 🎫チケット カード1枚だけになった（2列グリッド廃止） */
  .statustop #ticketTop .panel { margin: 0; flex: 1 1 auto; width: 100%; box-shadow: none; background: none;
       border: none; border-radius: 0; padding: 0; min-width: 0; }
  .statustop #ticketTop > .panel > .tk-acc { min-width: 0; margin: 0; }
  .statustop #ticketTop .tk-sum, .statustop #ticketTop .prm-head { padding: 7px 9px; gap: 5px; white-space: nowrap; }
  .statustop #ticketTop .tk-sum .pill { padding: 1px 6px; }
  .statustop #ticketTop .ticketlist { gap: 8px; align-content: flex-start; }
  #billingNote { margin-top: 8px; font-size: 11px; }
  .statustop #ticketTop #billingNote { margin: 2px 8px 6px; }
  .statustop #ticketTop #billingNote:empty { display: none; }
  .statustop #ticketTop #premiumProducts { margin: 6px 8px 8px; }
  /* 通常チケットの折りたたみ（青系・控えめ）。開くとチップが下に出る。 */
  .tk-acc { border: 1px solid #274468; border-radius: 10px; background: linear-gradient(160deg, #14263c, #0e1c2e);
       box-shadow: inset 2px 0 0 #3a6ea8; }
  .tk-sum { list-style: none; cursor: pointer; padding: 7px 11px; display: flex; align-items: center; gap: 8px; user-select: none; }
  .tk-sum::-webkit-details-marker { display: none; }
  .tk-sum::before { content: '▶'; font-size: 9px; color: #7fa0bd; transition: transform .15s; flex: 0 0 auto; }
  .tk-acc[open] .tk-sum::before { transform: rotate(90deg); }
  .tk-sum .tk-hd { font-size: 12.5px; font-weight: 600; color: #b9cbe0; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .tk-sum .pill { margin-left: auto; font-size: 11px; padding: 1px 8px; }
  .tk-acc .ticketlist { padding: 2px 8px 8px; }
  /* スマホ: 通常チケットは🎫タブ内で常に開く（格納しない・見出しタップで閉じない・キャレット非表示） */
  body.mmode .tk-acc .tk-sum { pointer-events: none; }
  body.mmode .tk-acc .tk-sum::before { display: none; }
  .statusbar { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin-bottom: 10px; }
  .statusbar .sc { flex: 0 0 auto; min-width: 84px; padding: 6px 10px 7px; border-radius: 10px;
                   background: linear-gradient(160deg, #14263c, #0e1c2e);
                   border: 1px solid #274468; box-shadow: inset 2px 0 0 #3a6ea8, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc .k { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #93aac4;
                      font-weight: 400; white-space: nowrap; }
  .statusbar .sc .k .ic { font-size: 13px; filter: saturate(1.1); }
  /* 数値はフル桁＋カンマ表示（K/M圧縮なし）。桁が増えても崩れないよう、少し締めたサイズ・字間にする */
  .statusbar .sc .v { font-size: 16.5px; font-weight: 600; color: #f2f8ff; white-space: nowrap;
                      margin-top: 1px; line-height: 1.25; letter-spacing: 0; }
  .statusbar .sc .v .lv { font-size: 11.5px; font-weight: 500; color: #9fc0dd; margin-left: 3px; }
  /* 指標ごとのアクセント色 */
  .statusbar .sc-money  { box-shadow: inset 2px 0 0 #e0c14a, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc-food   { box-shadow: inset 2px 0 0 #8fd06a, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc-pop    { box-shadow: inset 2px 0 0 #5aa0e0, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc-area   { box-shadow: inset 2px 0 0 #7f8ca0, 0 1px 2px rgba(0,0,0,.3); }
  /* 面積が上限に達したら赤字で警告（これ以上広げると地盤沈下で沈む）。近いときは黄色。 */
  .statusbar .sc-area.atlimit { box-shadow: inset 2px 0 0 #ff5a5a, 0 0 0 1px rgba(255,90,90,.5); }
  .statusbar .sc-area.atlimit .v { color: #ff6b6b; }
  .statusbar .sc-area.near .v { color: #ffcf3a; }
  /* 17AFV: 資金・食料の現在値が上限を超え、次ターンに変換・消滅する状態。 */
  .statusbar .sc.overcap { border-color: rgba(255,90,90,.72);
    box-shadow: inset 3px 0 0 #ff5a5a, 0 0 0 1px rgba(255,90,90,.24), 0 0 16px rgba(255,66,66,.12); }
  .statusbar .sc.overcap .v { color: #ff7b72; }
  .statusbar .sc.overcap .k::after { content: '上限超過'; margin-left: auto; padding: 1px 5px;
    border-radius: 999px; background: rgba(181,47,47,.25); color: #ffaaa2; font-size: 9.5px; font-weight: 600; }
  .statusbar .sc-farm   { box-shadow: inset 2px 0 0 #9ac44a, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc-rubber { box-shadow: inset 2px 0 0 #4eb87a, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc-factory{ box-shadow: inset 2px 0 0 #9aa0a8, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc-mining { box-shadow: inset 2px 0 0 #b3825a, 0 1px 2px rgba(0,0,0,.3); }
  /* 17AMR: 開発工廠の4資源を1枚へ集約。通常7指標の読みやすさを保ちつつ、所持数を常時確認できる。 */
  .statustop .statusbar .sc-materials { flex: 2 1 260px; min-width: 245px; }
  .statusbar .sc-materials { box-shadow: inset 2px 0 0 #54b8d8, 0 1px 2px rgba(0,0,0,.3);
    background: linear-gradient(145deg, #102c43, #181d3b); border-color: #345c7e; }
  .statusbar .sc-materials .materials-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px 11px;margin-top:4px;color:#b9cde2;font-size:10.5px;line-height:1.35; }
  .statusbar .sc-materials .materials-grid span { min-width:0;white-space:nowrap;display:flex;gap:4px;align-items:center; }
  .statusbar .sc-materials .materials-grid b { margin-left:auto;color:#f5fbff;font-size:12px;font-variant-numeric:tabular-nums; }
  body.mmode .statusbar .sc-materials { min-width:min(100%,270px); }
  .mres-factory { color:#aee9ff; }
  /* 🔴 17AZN 島のマス目の内訳（自島のみ・折りたたみ）。工廠資源カードと同じ見た目に合わせる。 */
  .statustop .statusbar .sc-cells17azn { flex: 2 1 260px; min-width: 245px; }
  .statusbar .sc-cells17azn { box-shadow: inset 2px 0 0 #7fd18a, 0 1px 2px rgba(0,0,0,.3); }
  .statusbar .sc-cells17azn > summary { cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px; }
  .statusbar .sc-cells17azn > summary::-webkit-details-marker { display:none; }
  .statusbar .sc-cells17azn > summary::after { content:'▾';margin-left:auto;opacity:.75;font-size:11px; }
  .statusbar .sc-cells17azn[open] > summary::after { content:'▴'; }
  .statusbar .sc-cells17azn .cellgrid17azn { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px 11px;margin-top:4px;color:#b9cde2;font-size:10.5px;line-height:1.35; }
  .statusbar .sc-cells17azn .cellgrid17azn span { min-width:0;white-space:nowrap;display:flex;gap:4px;align-items:center; }
  .statusbar .sc-cells17azn .cellgrid17azn b { margin-left:auto;color:#f5fbff;font-size:12px;font-variant-numeric:tabular-nums; }
  .statusbar .sc-cells17azn .cellwarn17azn { margin-top:5px;padding:3px 6px;border-radius:5px;
    background:rgba(200,60,60,.16);border:1px solid rgba(220,90,90,.45);color:#ffd9d9;
    font-size:10.5px;line-height:1.4;white-space:normal; }
  .statusbar .sc-cells17azn .cellok17azn { margin-top:5px;color:#9fe0b0;font-size:10.5px;line-height:1.4;white-space:normal; }
  .statusbar .sc-cells17azn .cellnote17azn { margin-top:4px;color:#9fb4c8;font-size:10px;line-height:1.4;white-space:normal; }
  body.mmode .statusbar .sc-cells17azn { min-width:min(100%,270px); }
  .statusbar .sc-rate   { min-width: 128px;
                          box-shadow: inset 2px 0 0 #e8a13a, 0 1px 2px rgba(0,0,0,.3); }
  /* 建造Lvは見出し行の空きを使う。新しい行を足さず、ほかのカードと同じ高さを保つ。 */
  .statusbar .sc-rate .buildlv { margin-left: auto; padding: 1px 5px; border-radius: 999px;
                                  border: 1px solid rgba(232,161,58,.42);
                                  background: rgba(232,161,58,.12); color: #ffd27d;
                                  font-size: 10px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
  /* 次ターン予想（概算の収支見込み。値は少し控えめなトーンにする）
     17E7: 「資金 +99,999$ 食料 +9,999t」が nowrap のままだとカードの最小幅が縮まらず
     枠(パネル)からはみ出すため、このカードだけ折り返し可にする。資金・食料の各セグメントは
     nowrap の inline-block にして「数値の途中」で折れない（折れるのはセグメント間だけ）。 */
  .statusbar .sc-forecast { box-shadow: inset 2px 0 0 #b57ee0, 0 1px 2px rgba(0,0,0,.3);
                            min-width: 0; max-width: 100%; }
  .statusbar .sc-forecast .v { color: #dcd2f0; font-size: 14.5px; white-space: normal; }
  .statusbar .sc-forecast .v .fm, .statusbar .sc-forecast .v .lv { white-space: nowrap; display: inline-block; }
  /* 面積上限（engine MAX_AREA=120）の警告帯。ステータスの直下・自島のみ（render.js renderStats）。
     通常のブロック要素なので長文でも折り返し、スマホの横スクロール行（.statusbar nowrap）にも影響しない。
     warn=上限が近い（控えめな琥珀色）、crit=到達（強めの赤）。 */
  .areawarn { margin: -2px 0 10px; padding: 6px 10px; border-radius: 8px;
              font-size: 12.5px; font-weight: 400; line-height: 1.5; }
  .areawarn.warn { background: #34290e; border: 1px solid #6b5518; color: #ffd97a; }
  .areawarn.crit { background: #431414; border: 1px solid #8c2f2f; color: #ffb9b9; }
  .mapframe { border: 3px solid #274262; border-radius: 8px; padding: 4px; background: #06101c;
    width: fit-content; max-width: 100%; margin: 0 auto; overflow: auto; }
  /* 17AFH: マウスを備えたPCだけ、地図を「つかめる」カーソルにする。
     touch端末には適用せず、既存のタップ・スワイプ・ピンチ操作を保つ。 */
  @media (hover: hover) and (pointer: fine) {
    .mapframe.pc-map-drag,
    .mapframe.pc-map-drag #map,
    .mapframe.pc-map-drag #mapstage { cursor: grab; }
    .mapframe.map-dragging,
    .mapframe.map-dragging #map,
    .mapframe.map-dragging #mapstage {
      cursor: grabbing;
      user-select: none;
      -webkit-user-select: none;
    }
    /* 17AFI: Windows全画面で縦横バーが地図の枠から突き出して見えるため、
       左ドラッグ・ホイール・トラックパッドによるスクロール機能は残し、バーだけを隠す。 */
    body.mapfull .mapframe.pc-map-drag {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    body.mapfull .mapframe.pc-map-drag::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
  }
  /* 世界地図など、枠からはみ出す時の方向ボタン（十字キー） */
  .mappan { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px auto 0; }
  .mappan .mprow { display: flex; gap: 4px; }
  .mappan button { width: 42px; height: 32px; border: 1px solid #2c4a6e; border-radius: 8px;
    background: #10233a; color: #cfe0f2; cursor: pointer; font-size: 15px; line-height: 1; }
  .mappan button:hover { background: #1e4571; border-color: #3b6ea8; }
    /* width:fit-content で枠をマップにぴったり沿わせ、左右の暗い余白（隙間）を無くす。
       max-width:100%＋overflow:auto でパネル幅を超えたら内部スクロール（ページは横に伸びない）。 */
  /* 海の背景。島の外の外洋や六角の隙間が「続く海」として見える（世界地図の広がり表現）。
     以前は海タイルGIFを敷き詰めていたが、広い盤面で常時アニメが走り重かったため、
     静的な海色グラデーションに変更（島マスの波アニメは従来どおり）。 */
  /* 17R6: 「世界の外（外洋）」の色。ここは canvas に描かないので、この背景がそのまま見える。
     17R5 までは #worldbase の不透過背景 #06101c が実際に見えていた色だったので、
     見た目を変えないためにその色をここに移した（下の海グラデーションは
     worldbase に覆われて一度も見えていなかった）。 */
  #mapstage { position: relative; margin: 0 auto; border-radius: 8px;
    background: #06101c; }
  /* 海の明色化: 島マップの海タイル(land0.gif)は画像なので、CSSフィルタで明るい青に寄せる。
     海マス本体(t0)・陸タイルの海下地・艦スプライトの海下地のすべてに効く（凡例 TERRAIN[0]=#2a6fb0 と同調）。
     ※艦GIF(navyN)は背景の海が画像に焼き込まれていたため、下地が見えず艦の周りだけ暗かった。
       画像側で背景海を透過化済み（下の land0/land14 下地＝このフィルタの明るさがそのまま見える）。 */
  #mapstage img[src$="land0.gif"], .arc-tiles img[src$="land0.gif"] { filter: brightness(1.35) saturate(1.1); }
  /* 浅瀬(land14.gif)は海(land0)よりさらに明るく鮮やかな水色に（sea,value1。深海<浅瀬の明度関係を島マップでも保つ。
     浅瀬マス本体・艦スプライトの浅瀬下地の両方に効く。世界地図の WORLD_COLORS.shallow=#5fc8f0 と同調）。 */
  #mapstage img[src$="land14.gif"], .arc-tiles img[src$="land14.gif"] { filter: brightness(1.6) saturate(1.3) hue-rotate(-12deg); }
  /* 平地の明色化: 平地タイル(land2.gif)も明るい海/浅瀬に釣り合う明るい緑へ
     （凡例 TERRAIN[2]=#4caf50 と同調。海=1.35/浅瀬=1.6 との中間的な持ち上げ）。 */
  #mapstage img[src$="land2.gif"], .arc-tiles img[src$="land2.gif"] { filter: brightness(1.3) saturate(1.15); }
  /* 農場land7 / 工場land8は平地に合わせて明るくし、町・都市は原典画像の陰影を保つ。 */
  #mapstage img[src$="land7.gif"], #mapstage img[src$="land8.gif"],
  .arc-tiles img[src$="land7.gif"], .arc-tiles img[src$="land8.gif"] { filter: brightness(1.28) saturate(1.18); }
  #mapstage img[src*="landtown"], .arc-tiles img[src*="landtown"] { filter: none; }
  /* 森(land6)は「濃い緑」の性格を残しつつ一段明るく */
  #mapstage img[src$="land6.gif"], .arc-tiles img[src$="land6.gif"] { filter: brightness(1.22) saturate(1.15); }
  /* 荒地(land1)は陸地全体の統一感のため控えめに持ち上げる（開発済みマスより暗い、の関係は保つ） */
  #mapstage img[src$="land1.gif"], .arc-tiles img[src$="land1.gif"] { filter: brightness(1.16) saturate(1.1); }
  /* 海底資源の明色化: 漁礁(land26) / 海底鉱床(land12＝海底基地と共用) / 海底油田(land16) は
     背景の海が画像に焼き込まれた不透明GIF（透過なし）で、明るくした海(land0=1.35)より暗く沈んで見えた。
     海ピクセルは land0 と同一パレットなので、海と同じフィルタを当てるだけで背景海の明るさが
     周囲の深海と完全に揃う（資源アイコン部分も同率で持ち上がるが、他の陸タイルと同じ扱い）。 */
  #mapstage img[src$="land26.gif"], #mapstage img[src$="land12.gif"],
  #mapstage img[src$="land16.gif"],
  .arc-tiles img[src$="land26.gif"], .arc-tiles img[src$="land12.gif"],
  .arc-tiles img[src$="land16.gif"] { filter: brightness(1.35) saturate(1.1); }
  #tiles { position: absolute; left: 0; top: 0; }
  /* 単色ヘックスの下地を canvas に一括描画（DOMマス数千個ぶんの負荷を1描画に）。
     世界地図では全域、島ビューでは「外側（周囲マージン）」だけを描く。使わない時は透明にクリア。
     #tiles/#fleetlayer/#map の下(z:0)。 */
  /* 17R6: **背景・角丸・width を必ず打ち消す**。全体指定 `canvas { width:100%; background:#06101c;
     border-radius:8px }` を受け継ぐと、可視窓ぶんの canvas（地図の途中に置かれる）が
     ・不透過の色板になって窓の縁が「色の継ぎ目」として見える（慣性スクロールが描き直しより速いとき）
     ・角丸8pxで四隅の絵が欠ける
     ・インラインの寸法指定が入る前はステージ幅いっぱいに引き伸ばされる
     17R5 までは worldbase がステージ全面だったので、この不透過色がそのまま「世界の外の海」の
     色になっていた。同じ見た目を保つため、その色は #mapstage 側（下）へ移した。 */
  #mapstage canvas#worldbase { position: absolute; left: 0; top: 0; z-index: 0; display: block;
    pointer-events: none; width: auto; background: transparent; border-radius: 0; }
  #mapstage canvas#map { position: absolute; left: 0; top: 0; z-index: 2; width: auto;
    background: transparent; border-radius: 0; cursor: crosshair; }
  .cell { position: absolute; pointer-events: none; overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    /* 17E4: 各タイルを独立した描画領域に（GIFアニメの毎フレーム再描画が周囲へ波及せず、
       スクロール・ズーム中の再レイアウト/再ペイントが軽くなる）。寸法はJSが明示指定済み */
    contain: strict; }
  /* 世界地図（軽量モード）: アニメを止め、単色ヘックスに細い縁だけ付ける */
  #mapstage.flatworld .cell img { animation: none !important; }
  /* 17R5: 世界地図では**滑走移動のトランジションも止める**。世界地図の艦は全島ぶん（80島の海域で
     実測1,499隻）並ぶので、ターン更新のたびに1,500要素が0.7秒いっせいに合成レイヤ化して、
     スマホでは固まる／落ちる原因になっていた。世界地図の艦は小さなマーカーなので、
     滑らかに動く必要もない（島マップでは今までどおり滑走する）。 */
  #mapstage.flatworld .cell.fleet { transition: none !important; }
  #mapstage.flatworld .cell .smoke { display: none; }
  #mapstage.flatworld .cell.flat { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
  /* フォーカス島の外周マス（隣島の“ふち”）。少し沈めて島本体と区別し、海マスは移動先の目印を出す。 */
  .cell.margincell { opacity: .78; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
  .cell.margincell.movetarget { box-shadow: inset 0 0 0 1.5px rgba(127,225,160,.4); }
  /* 世界地図: 艦のいるマスの下地は水色（海/浅瀬）のまま、金縁（WORLD_COLORS.fleet=#ffcf3a）
     ＋内側の白縁のマーカーで「艦がいる」ことを示す（艦影はその上に重なる）。 */
  #mapstage.flatworld .cell.flat.fcell {
    box-shadow: inset 0 0 0 2px #ffcf3a, inset 0 0 0 3.5px rgba(255,255,255,.85); z-index: 3; }
  /* 世界地図: 艦スプライトの下地(海GIF)は隠し、水色のヘックスの上に艦影だけ載せる */
  #mapstage.flatworld #fleetlayer .cell img.base { display: none; }
  .cell img.til { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
  /* 森のそよぎ */
  .cell.t4 img.top { transform-origin: 50% 88%; animation: sway 3.4s ease-in-out infinite; }
  @keyframes sway { 0%,100%{transform:skewX(0deg)} 25%{transform:skewX(2.2deg)} 75%{transform:skewX(-2.2deg)} }
  /* 農場ドームのゆらぎ（弱め） */
  .cell.t5 img.top { transform-origin: 50% 80%; animation: sway 4.2s ease-in-out infinite; }
  /* 工場の煙 */
  .cell.t6 .smoke, .cell.t6 .smoke::before, .cell.t6 .smoke::after {
    position: absolute; left: 46%; top: 30%; width: 20%; height: 20%; border-radius: 50%;
    background: radial-gradient(circle, rgba(220,225,230,.75), rgba(220,225,230,0) 70%); content: ''; }
  .cell.t6 .smoke { animation: smoke 2.6s linear infinite; }
  .cell.t6 .smoke::before { animation: smoke 2.6s linear infinite; animation-delay: .9s; }
  .cell.t6 .smoke::after  { animation: smoke 2.6s linear infinite; animation-delay: 1.8s; }
  @keyframes smoke { 0%{opacity:0; transform:translate(0,10%) scale(.5)} 25%{opacity:.9}
    100%{opacity:0; transform:translate(-30%,-70%) scale(1.6)} }
  /* 艦船の揺れ（建造中は揺れない）と、ターン進行時の滑走移動 */
  #fleetlayer { position: absolute; left: 0; top: 0; z-index: 1; }
  .cell.fleet { transition: left .7s cubic-bezier(.35,.9,.35,1), top .7s cubic-bezier(.35,.9,.35,1); }
  .cell.fleet img.til { animation: bob 2.8s ease-in-out infinite; }
  /* 17ACA/17AVS: 能力値は同じままの色違いユニット。従来色を --rare-tone に集約し、
     通常表示・潜航・選択演出・canvas書き出しで同じ色を使う。 */
  img.rare-color {
    --rare-tone: hue-rotate(145deg) saturate(1.7);
    filter: var(--rare-tone) brightness(1.08);
  }
  /* 霞級の水雷型と対地型は、4型を並べても判別できる別系統の色へ。 */
  img.rare-color.rare-color-k107 { --rare-tone: hue-rotate(215deg) saturate(2.2) contrast(1.08); }
  img.rare-color.rare-color-k109 { --rare-tone: hue-rotate(250deg) saturate(2.2) contrast(1.08); }
  /* 大和は鮮烈な青緑、無彩色寄りのミラーは sepia を起点に強く発色させる。 */
  img.rare-color.rare-color-k120 { --rare-tone: hue-rotate(185deg) saturate(3) contrast(1.15); }
  img.rare-color.rare-color-k121 { --rare-tone: sepia(.95) saturate(6) hue-rotate(185deg) contrast(1.15); }
  /* 17B35: ホーネット級はほぼ無彩色の艦影で、共通フィルタでは色が乗らない（変化量4.7%）。
     就役前（9/24 19:00）にだけ決められるので、もりたつさんの選んだ桃（変化量20.5%）を入れる。
     ⚠️ 就役後の艦の色は変えないこと。線や影がわずかに違うだけでも愛着を持っている提督がいる。 */
  img.rare-color.rare-color-k164 { --rare-tone: sepia(.9) saturate(1.5) hue-rotate(275deg); }
  /* 17B36: ミッシェル爆撃機は共通フィルタだと変化量42.8%。就役前（9/27 19:00）に、もりたつさんの選んだ
     控えめな「参考B」（黄土色→珊瑚色・変化量17.8%）を入れる。⚠️ 就役後は変えないこと。 */
  img.rare-color.rare-color-k165 { --rare-tone: hue-rotate(-40deg) saturate(1.4); }
  /* 17B44: 秋月級は灰色の艦影で、共通フィルタでは赤い線しか変わらない（変化量11.1%）。就役前（10/1 19:00）に、
     もりたつさんの選んだ「C 紫」（変化量19.6%）を入れる。⚠️ 就役後は変えないこと。 */
  img.rare-color.rare-color-k166 { --rare-tone: sepia(.55) saturate(1.8) hue-rotate(250deg); }
  /* 17B58: シャルンホルスト級は灰色と白の艦影で、共通フィルタでは変化量6.1%。就役前（10/4 19:00）に、
     もりたつさんの選んだ「B 黒金」（変化量19.2%）を入れる。⚠️ 就役後は変えないこと。 */
  img.rare-color.rare-color-k168 { --rare-tone: sepia(1) saturate(3) hue-rotate(-12deg) contrast(1.25) brightness(.92); }
  /* 17B59: テェイサー級はこげ茶の艦影で、共通フィルタでは変化量7.3%。就役前（10/8 19:00）に、
     もりたつさんの選んだ「D 毒緑」（変化量9.2%）を入れる。常時潜航なので地図では紫がかって見える。⚠️ 就役後は変えないこと。 */
  img.rare-color.rare-color-k169 { --rare-tone: sepia(.7) saturate(3.5) hue-rotate(60deg) brightness(1.4); }
  /* 17B86: 土佐級対潜空母・ハウンド対潜哨戒機はどちらも桃色の艦影で、共通フィルタは緑（変化量41.7%・55.4%）。就役前（10/11 19:00）に、
     もりたつさんの選んだ 土佐級「B 蒼」（40.3%）・ハウンド「G 橙」（22.5%）を入れる。⚠️ 就役後は変えないこと。 */
  img.rare-color.rare-color-k170 { --rare-tone: hue-rotate(215deg) saturate(1.5); }
  img.rare-color.rare-color-k171 { --rare-tone: hue-rotate(38deg) saturate(1.7); }
  .cell.fleet.building img.til { animation: none; }
  .cell.fleet.building { pointer-events: none; }
  /* 航空機: 影を落として飛行感を出す */
  .cell.fleet.airborne img.til:last-child { filter: drop-shadow(3px 5px 3px rgba(0,0,0,.5)); }
  .cell.fleet.airborne img.til.rare-color:last-child {
    filter: var(--rare-tone) brightness(1.08) drop-shadow(3px 5px 3px rgba(0,0,0,.5)); }
  /* 半壊(漂流)艦: モノクロで傾く */
  .cell.fleet.wrecked img.til:last-child {
    filter: grayscale(1) brightness(.75) sepia(.3); transform: rotate(12deg); animation: none; }
  /* 潜航中の潜水艦: 半透明+青みがかった表示で海中にいることを表す */
  .cell.fleet.submerged img.til:last-child {
    opacity: .55; filter: brightness(.8) hue-rotate(190deg) saturate(1.3); }
  .cell.fleet.submerged img.til.rare-color:last-child {
    filter: var(--rare-tone) brightness(.86) hue-rotate(190deg) saturate(1.3); }
  /* 17B59: テェイサー級の色違い（毒緑）は常時潜航。共通の潜航色（hue-rotate(190deg)）だと紫に化けるため、
     もりたつさんの指定で潜航中も緑のまま（半透明・暗めはそのまま）にする。 */
  .cell.fleet.submerged img.til.rare-color.rare-color-k169:last-child {
    filter: var(--rare-tone) brightness(.86) saturate(1.3); }
  /* 17B60: 自分の潜水艦を選んでいる間だけ、図鑑と同じ姿を見せる（見た目だけ。潜航状態・判定は不変）。
     色は選択の明滅アニメ（shipsel / shipselRare）が通常色・色違いの色で上書きするので、半透明だけ解く。 */
  .cell.fleet.submerged.subpeek17b60 img.til:last-child { opacity: 1; }
  /* 17RI: 艦の所属をひと目で（📮目安箱 #9/#25「同盟や友好の島の艦が一目で分かるように」）。
     🟢自島 / 🔵同盟 / 🩵友好(不可侵) を、マスの内側の細い縁だけで示す。
     ⚠️ **他島（敵）には縁を付けない。** 世界地図には1,000隻以上並ぶので、他島にも縁を描くと
        画面が輪で埋まって「味方が一目で分かる」という目的そのものが消える。数の少ないほうを光らせる。
     ⚠️ 年代記の `.arc-tiles .cell.fleet.arc-foe` と同じ手（inset box-shadow のみ）に揃えている:
        ・z-index を書かない（applyStackTick が style で前面制御している。17RC の再発防止）
        ・子要素を足さない（艦の innerHTML は毎フレーム差し替えられる）
        ・隻数などの集計は出さない（数の差で隠れた艦が漏れる。17RA と同じ型）
     ⚠️ 色を変えたら **mapshot.js の FLEET_RING も直すこと**（📸の書き出しは box-shadow を写せないので、
        あちらが同じ色でヘックスの縁を描き足している）。
     🔴 **`.cell.fleet` 自身に box-shadow を書いてはいけない**（17RI の監査で判明）。
        艦のマスには下地の海タイル `<img class="til base" src="img/land0.gif">` が入る。この GIF は
        **全面不透明**（透過ピクセルが1つも無い）ので、要素の inset box-shadow は**子要素より下**に
        描かれる決まりにより**完全に隠れて見えなくなる**。世界地図(flatworld)だけは
        `#fleetlayer .cell img.base { display:none }` のおかげで見えていた＝島マップでは無反応だった。
        そこで **`::after` の重ね板**にしている（子要素の**あと**に描かれるので確実に見える）。
        ::after は innerHTML の差し替えで消えないので「子要素を足さない」規約も守れる。
        17AFA の初稿は四角い inset shadow を親の clip-path で切っていたため、左右の縦線だけが強く
        六角形に見えなかった。現在は、6辺を均等に描いた透過SVGを重ねている。艦影を隠さない薄い面色と
        2pxの輪郭だけにし、スマホの縮小表示でも所属色を読み取れるようにする。 */
  .cell.fleet.fl-own::after, .cell.fleet.fl-ally::after, .cell.fleet.fl-war::after {
    content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
    background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
  .cell.fleet.fl-own::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,2 98,26 98,74 50,98 2,74 2,26' fill='rgba(75,224,130,.09)' stroke='rgba(75,224,130,.98)' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 1px rgba(75,224,130,.42)); }
  .cell.fleet.fl-ally::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,2 98,26 98,74 50,98 2,74 2,26' fill='rgba(255,215,80,.09)' stroke='rgba(255,215,80,.98)' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 1px rgba(255,215,80,.42)); }
  .cell.fleet.fl-war::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,2 98,26 98,74 50,98 2,74 2,26' fill='rgba(255,74,74,.11)' stroke='rgba(255,74,74,.98)' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 1px rgba(255,74,74,.42)); }
  /* 選択中の艦: 明滅ハイライト */
  .cell.fleet.selship img.top, .cell.fleet.selship img.til:last-child { animation: shipsel 1.1s ease-in-out infinite; }
  .cell.fleet.selship img.til.rare-color:last-child { animation-name: shipselRare; }
  @keyframes shipsel { 0%,100%{ filter: brightness(1) drop-shadow(0 0 2px #7fd1ff); }
                       50%{ filter: brightness(1.55) drop-shadow(0 0 7px #9fe1ff); } }
  @keyframes shipselRare {
    0%,100%{ filter: var(--rare-tone) brightness(1.08) drop-shadow(0 0 2px #d6a8ff); }
    50%{ filter: var(--rare-tone) brightness(1.62) drop-shadow(0 0 7px #d6a8ff); }
  }
  /* 🔴 17B88: 近代化改修した「改」。通常色・色違いとは別の第3の色（ブロンズ）＋金の縁取り（ワンポイント）。
     色違いの艦を改にすると「改の色違い」（色違いの色＋銀青の縁取り）。建造中は付かない（core.js rareColorClasses）。 */
  img.kai {
    --kai-tone: sepia(.45) saturate(1.7) hue-rotate(-20deg) contrast(1.08);
    --kai-edge: drop-shadow(0 0 1px #ffd24a) drop-shadow(0 0 1px #ffd24a);
    filter: var(--kai-tone) brightness(1.04) var(--kai-edge);
  }
  img.rare-color.kai {
    --kai-edge: drop-shadow(0 0 1px #a8f4ff) drop-shadow(0 0 1px #a8f4ff);
    filter: var(--rare-tone) brightness(1.08) var(--kai-edge);
  }
  .cell.fleet.airborne img.til.kai:last-child {
    filter: var(--kai-tone) brightness(1.04) var(--kai-edge) drop-shadow(3px 5px 3px rgba(0,0,0,.5)); }
  .cell.fleet.airborne img.til.rare-color.kai:last-child {
    filter: var(--rare-tone) brightness(1.08) var(--kai-edge) drop-shadow(3px 5px 3px rgba(0,0,0,.5)); }
  .cell.fleet.submerged img.til.kai:last-child {
    filter: var(--kai-tone) brightness(.86) hue-rotate(190deg) saturate(1.3) var(--kai-edge); }
  .cell.fleet.submerged img.til.rare-color.kai:last-child {
    filter: var(--rare-tone) brightness(.86) hue-rotate(190deg) saturate(1.3) var(--kai-edge); }
  .cell.fleet.selship img.til.kai:last-child { animation-name: shipselKai; }
  .cell.fleet.selship img.til.rare-color.kai:last-child { animation-name: shipselRareKai; }
  @keyframes shipselKai {
    0%,100%{ filter: var(--kai-tone) brightness(1.04) var(--kai-edge); }
    50%{ filter: var(--kai-tone) brightness(1.55) var(--kai-edge) drop-shadow(0 0 6px #ffd24a); }
  }
  @keyframes shipselRareKai {
    0%,100%{ filter: var(--rare-tone) brightness(1.08) var(--kai-edge); }
    50%{ filter: var(--rare-tone) brightness(1.62) var(--kai-edge) drop-shadow(0 0 6px #a8f4ff); }
  }
  .kai-spec-17b88 b { color: #ffd24a; }
  .kai-hint-17b88 { margin: 6px 0 0; font-size: 12px; color: #ffe6a0; }
  .kai-count-17bc5 { display: inline-block; padding: 2px 6px; font-size: 12px; color: #e6d2a0; border: 1px dashed #6b5a3a; border-radius: 6px; }
  /* 🔴 17B88: 工廠限定・ミッション限定の券の分解は強い警告（赤い枠・赤いボタン） */
  #ynModal.kai-danger-17b88 .yn-box { border: 2px solid #ff5a4a; box-shadow: 0 0 0 4px rgba(255,90,74,.25), 0 10px 30px #000a; }
  #ynModal.kai-danger-17b88 .yn-msg { color: #ffe1dc; }
  #ynModal.kai-danger-17b88 .yn-yes { background: #b3261e; border-color: #ff5a4a; color: #fff; }
  .prm-use.kai-precious-17b88 { background: #5a1a14; border-color: #ff5a4a; color: #ffd6d0; }
  @keyframes bob { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6%) rotate(1.2deg)} }
  @media (prefers-reduced-motion: reduce) {
    .cell img, .cell .smoke { animation: none !important; }
    * { transition-duration: .01ms !important; }
    button:active:not(:disabled) { transform: none; }
  }
  /* マスクリックのコマンドメニュー（原典風） */
  /* マスをタップした時のポップアップ。背景がうっすら透ける（すりガラス）が、視認性優先で
     不透明度は高め＋ぼかし＋濃い縁・影・高コントラスト文字で読みやすさを確保する。 */
  #cellmenu { position: fixed; z-index: 60; min-width: 210px; max-height: 360px; overflow: auto;
    max-width: min(94vw, 400px); overscroll-behavior: contain;
    background: rgba(14, 28, 49, 0.9); border: 1px solid #4a6d97; border-radius: var(--radius-s);
    -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
    box-shadow: var(--shadow-pop), 0 0 0 1px rgba(0,0,0,.35); font-size: 15.5px; display: none; }
  #cellmenu .hd { padding: 6px 10px; background: rgba(23, 48, 78, 0.92); color: #eaf3fb; font-weight: 500;
    border-bottom: 1px solid #34557c; position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px; }
  #cellmenu .hd .sub { font-weight: 400; color: #8fb0cc; font-size: 12.5px; }
  #cellmenu .hd .cm-x { margin-left: auto; background: #2a3b53; color: #cdd9e6; border: none;
    border-radius: var(--radius-s); width: 26px; height: 26px; line-height: 1; font-size: 14px;
    cursor: pointer; padding: 0; flex: 0 0 auto; }
  #cellmenu .hd .cm-x:hover { background: #3a4f6e; }
  /* 17PV: 🎯索敵ピン（✕の左隣。オン中は金色で点灯） */
  #cellmenu .hd .cm-pin { margin-left: auto; background: #2a3b53; border: 1px solid transparent;
    border-radius: var(--radius-s); min-width: 26px; height: 26px; line-height: 1; font-size: 13px;
    cursor: pointer; padding: 0; flex: 0 0 auto; filter: grayscale(1) brightness(1.15); }
  /* 17QK: 絵文字だけだと何のボタンか分からない（スマホでは title が出ない）。
     余白のあるPCでは短い語を添え、狭い画面では従来どおり🎯だけにする。 */
  #cellmenu .hd .cm-pin .lb { font-size: 11px; margin: 0 6px 0 3px; vertical-align: 1px; }
  @media (max-width: 420px) { #cellmenu .hd .cm-pin .lb { display: none; } }
  #cellmenu .hd .cm-pin + .cm-x { margin-left: 6px; }
  /* 17QR: 重なったマスでは艦ごとにピンが並ぶ。まとめ枠を右寄せし、ピン自体の右寄せは解除する
     （個々に margin-left:auto のままだと flex が余白を分配してバラバラに散らばる）。 */
  #cellmenu .hd .cm-pins { margin-left: auto; display: inline-flex; gap: 4px;
    flex: 0 0 auto; align-items: center; }
  #cellmenu .hd .cm-pins .cm-pin { margin-left: 0; }
  #cellmenu .hd .cm-pins + .cm-x { margin-left: 6px; }
  /* 17QV: 就役直後（次の戦闘は攻撃も防衛も見送り）のしるし。🎯ピンの左に並べる。 */
  #cellmenu .hd .cm-fresh { margin-left: auto; flex: 0 0 auto; font-size: 11px; line-height: 1;
    padding: 4px 7px; border-radius: var(--radius-s); background: #3d2f10; border: 1px solid #b8934a;
    color: #ffd76a; white-space: nowrap; cursor: help; }
  #cellmenu .hd .cm-fresh + .cm-pins { margin-left: 6px; }
  #cellmenu .hd .cm-fresh + .cm-x { margin-left: 6px; }
  #cellmenu .hd .cm-pin:hover { background: #3a4f6e; }
  #cellmenu .hd .cm-pin.on { background: #3d2f10; border-color: #b8934a; filter: none;
    box-shadow: 0 0 8px rgba(255,215,106,.35); }
  /* 17NR: 見出し直下の🎫チケット帯（所持枚数＋🛒ショップ）。「コマンドを選ぶ画面」の中に
     チケットの在庫と購入導線を置くことで、🎫タブを廃しても迷わず辿り着けるようにする。 */
  #cellmenu .tkstrip { display: flex; flex-direction: column; gap: 5px; padding: 6px 10px;
    background: linear-gradient(180deg, rgba(58,45,12,.96), rgba(40,32,10,.96));
    border-bottom: 1px solid #6d5720; color: #ffe6a8; font-size: 12.5px; }
  #cellmenu .tkstrip .tks-h { font-weight: 600; letter-spacing: .02em; }
  #cellmenu .tkstrip .tks-list { display: inline-flex; flex-wrap: wrap; gap: 5px; }
  #cellmenu .tkstrip .tks-c { display: inline-flex; align-items: center; gap: 3px;
    background: #4a3a10; border: 1px solid #6d5720; border-radius: 999px; padding: 2px 8px; }
  #cellmenu .tkstrip .tks-c b { font-size: 13.5px; font-weight: 600; color: #ffd76a; }
  #cellmenu .tkstrip .tks-c.z { opacity: .48; }
  #cellmenu .tkstrip .tks-none { color: #d9c48c; }
  #cellmenu .tkstrip .tks-r1 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; }
#cellmenu .tkstrip .tks-r2 { display: flex; align-items: center; gap: 8px; }
#cellmenu .tkstrip .tks-buy { margin-left: auto; flex: 0 0 auto; cursor: pointer;
    border: 1px solid #ffd76a; border-radius: 8px; padding: 4px 10px; min-height: 30px;
    background: linear-gradient(180deg, #ffd76a, #e8b23c); color: #2a1c05;
    font-size: 12.5px; font-weight: 600; line-height: 1; }
  #cellmenu .tkstrip .tks-buy:hover { filter: brightness(1.08); }
  #cellmenu .tkstrip .tks-buy:active { filter: brightness(.92); }
  #cellmenu .tkstrip .tks-hint { flex: 1 1 auto; min-width: 0; color: #cbb28a; font-size: 11.5px; line-height: 1.35; }
  /* 17F8: セルメニュー見出しの地形タイル画像（タップで維持費ポップアップ） */
  #cellmenu .hd .cm-tile { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain;
    image-rendering: pixelated; border-radius: 5px; border: 1px solid #2c4a6e;
    background: #0b1a2e; cursor: pointer; }
  #cellmenu .hd .cm-tile:hover { border-color: var(--accent, #4a8bff); }
  /* 17AUQ: 艦名と諸元の幅を先に確保し、🎯範囲固定の追加後も日本語名を縦1列にしない。 */
  #cellmenu .hd .cm-ident17auq { flex: 1 1 9rem; min-width: 8rem; display: flex;
    flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  #cellmenu .hd .cm-ident17auq .sub { min-width: 0; overflow-wrap: anywhere; }
  /* 見出しの名前（「軍港」など）もタップで詳細を開ける。アイコンより目立つチップにして誘導する。 */
  #cellmenu .hd .cm-name { cursor: pointer; font-weight: 600; color: #dceeff;
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
    background: rgba(74,139,255,.20); border: 1px solid #3f6ea6;
    min-width: 0; max-width: 100%; white-space: normal; word-break: normal; overflow-wrap: anywhere;
    text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: #6f9fd6;
    transition: background .12s, border-color .12s, color .12s; }
  #cellmenu .hd .cm-name:hover, #cellmenu .hd .cm-name:focus-visible {
    background: rgba(74,139,255,.38); border-color: #7db4ff; color: #fff; outline: none; }
  #cellmenu .hd .cm-name .mag { font-size: .82em; opacity: .85; }
  /* 17AGR: 航空・水上・海底などが同じマスにいる場合、全艦を個別に開ける切替列。 */
  #cellmenu .cm-stack-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 9px;
    background: rgba(10,25,43,.96); border-bottom: 1px solid #304d70; }
  #cellmenu .cm-stack-detail { display: inline-flex; align-items: center; gap: 4px; min-width: 0;
    padding: 4px 8px; border: 1px solid #365a82; border-radius: 999px; cursor: pointer;
    background: #142b46; color: #d8e9f8; font: inherit; font-size: 11.5px; line-height: 1.25;
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #cellmenu .cm-stack-detail:hover, #cellmenu .cm-stack-detail:focus-visible {
    background: #21466e; border-color: #74b1ee; color: #fff; }
  #cellmenu .cm-stack-detail.current { border-color: #d7b85d; color: #ffe8a5;
    background: #3a3219; }
  #cellmenu .cm-stack-detail .mag { flex: 0 0 auto; font-size: .82em; opacity: .8; }
  /* 17QR: チケットの対象を選ぶポップアップの見出し。艦名チップ(.cm-name)と違い「押せる」意味は
     持たせない（下線もポインタも付けない）。ラベルが途中で折り返さないようにする。 */
  #cellmenu .hd .cmp-ttl { font-weight: 600; color: #ffe6a8; white-space: nowrap; }
  /* スマホでは 🎫チケットモードのバナー(.tkbanner=241)が前面にあり、選択肢の行が隠れてしまう。
     対象選びのあいだだけ、このポップアップをバナーより前に出す（下部ナビ=242 の高さは
     positionMapPopup が可用域から除いているので、ナビに被ることはない）。 */
  #cellmenu[data-tkpickmenu="1"] { z-index: 243; }
  /* 17M5: 同じマスに重なった艦の Lv・HP を、切替行に小さく併記する。 */
  #cellmenu .it .cm-stk-info { color: #9fb8d0; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* 艦カードの艦名もタップ可能なことを示す（点線下線＋ポインタ）。 */
  #fcName.fc-name-tap { cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 3px; text-decoration-color: #6f9fd6; }
  #fcName.fc-name-tap:hover { color: #ffffff; text-decoration-color: #7db4ff; }
  /* 17F8: 維持費ポップアップ（地形画像タップで表示。セルメニューより手前） */
  #upkeepTip { position: fixed; z-index: 260; max-width: min(320px, 92vw);
    background: #10213a; border: 1px solid #3b5a80; border-radius: var(--radius-s);
    box-shadow: var(--shadow-pop); padding: 9px 11px; color: #e6eef6;
    font-size: 13px; line-height: 1.6; }
  #upkeepTip .uk-hd { display: flex; align-items: center; gap: 7px; font-weight: 500;
    color: #cfe3f5; margin-bottom: 5px; }
  #upkeepTip .uk-hd img { width: 22px; height: 22px; image-rendering: pixelated;
    border-radius: 4px; border: 1px solid #2c4a6e; background: #0b1a2e; }
  #upkeepTip .uk-line { margin: 2px 0; }
  #upkeepTip .uk-line b { color: #ffd479; }
  #upkeepTip .uk-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid #24405f;
    color: #8fb0cc; font-size: 11.5px; line-height: 1.55; }
  /* アップデートのお知らせポップアップ（.upd-ov 系はデイリーボーナス #dailyBonusModal でも共用） */
  .upd-ov { position: fixed; inset: 0; z-index: 250; background: rgba(4,10,18,.66);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
  .upd-ov .upd-box { position: relative; width: min(520px, 96vw); max-height: 86vh; overflow: auto;
    background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
    box-shadow: var(--shadow-modal); padding: 16px 16px 14px; }
  .upd-ov .upd-head { font-weight: 600; font-size: 17px; color: #eaf3fb; margin-bottom: 12px; padding-right: 30px; }
  .upd-ov .upd-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border: none;
    border-radius: var(--radius-s); background: #2a3b53; color: #cdd9e6; font-size: 15px; cursor: pointer; }
  .upd-ov .upd-x:hover { background: #3a4f6e; }
  .upd-ov .upd-list { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px;
    color: #d7e4f2; font-size: 14px; line-height: 1.65; }
  .upd-ov .upd-list > .cmd-announcement-item { list-style:none; margin-left:-20px; }
  .cmd-announcement { overflow:hidden; border:1px solid rgba(217,183,255,.7); border-radius:14px;
    background:linear-gradient(135deg,rgba(61,35,91,.92),rgba(17,54,82,.94)); box-shadow:0 0 22px rgba(196,125,255,.2); }
  .cmd-announcement-title { padding:12px 15px 4px; color:#ffe5a0; font-size:20px; font-weight:700; letter-spacing:.02em; text-shadow:0 0 12px rgba(255,218,119,.45); }
  .cmd-announcement-lead { padding:0 15px 11px; color:#d8c5ff; font-size:13.5px; font-weight:500; }
  .cmd-announcement-row { display:grid; grid-template-columns:142px minmax(0,1fr); gap:9px; padding:10px 14px; border-top:1px solid rgba(210,186,255,.22); font-size:12.5px; line-height:1.5; }
  .cmd-announcement-row b { color:#ffe8ad; } .cmd-announcement-row span { color:#d7e8f8; }
  @media (max-width: 420px) { .cmd-announcement-row { grid-template-columns:1fr; gap:2px; } }
  .upd-ov .upd-btns { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  .upd-ov .upd-more { color: #7fd1ff; font-weight: 500; text-decoration: none; font-size: 13.5px; margin-right: auto; }
  .upd-ov .upd-more:hover { text-decoration: underline; }
  .upd-ov .upd-ok { padding: 9px 22px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border-2); }
  /* デイリーボーナスの補足文（リストの下・ボタンの上） */
  .upd-ov .upd-note { margin: -4px 0 12px; color: #c7d6e6; font-size: 13px; line-height: 1.6; }
  /* 地図の拡大縮小コントロール（マップ右下に浮かせる） */
  .mapwrap { position: relative; }
  /* 17ADO: 初回の遅延バンドル取得中に黒い canvas だけを見せない。
     読込失敗時は同じ面で再試行でき、海域選択を一度変える回避操作を要求しない。 */
  .maploading { position: absolute; inset: 0; z-index: 70; min-height: 260px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 24px; border: 2px solid #2e547b; border-radius: 10px;
    background: radial-gradient(circle at 50% 42%, rgba(25,68,105,.96), rgba(5,16,29,.98) 68%);
    color: #d9ecff; text-align: center; font-size: 14px; line-height: 1.7; }
  .maploading.error { border-color: #9c6640; color: #ffe0c5; }
  #mapZoom.mapzoom { position: absolute; right: 12px; bottom: 12px; z-index: 55;
    display: flex; align-items: stretch; gap: 1px; background: rgba(10,22,36,.82);
    border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); backdrop-filter: blur(2px); }
  #mapZoom button { border: none; background: transparent; color: #dbe8f5; cursor: pointer;
    font-size: 18px; font-weight: 600; line-height: 1; padding: 0; width: 40px; height: 36px; }
  #mapZoom #mzPct { width: 58px; font-size: 13px; font-weight: 500; color: #cfe6ff;
    border-left: 1px solid #24405f; border-right: 1px solid #24405f; }
  #mapZoom .winzoom { display: none; }
  body.windows-pc-mapzoom #mapZoom .winzoom { display: block; }
  body.windows-pc-mapzoom #mapZoom #mzFit { width: 48px; font-size: 17px; border-right: 1px solid #24405f; }
  body.windows-pc-mapzoom #mapZoom #mzFixed { width: 68px; min-height: 36px; padding: 0 5px;
    border: 0; border-left: 1px solid #24405f; border-radius: 0; background: transparent;
    color: #cfe6ff; font: inherit; font-size: 12px; cursor: pointer; }
  body.windows-pc-mapzoom #mapZoom #mzFixed:hover { background: #1d3a5c; }
  #mapZoom button:hover { background: #1d3a5c; }
  #mapZoom button:active { background: #26507c; }
  /* 17AMX: すべて／水上／水中／空中の艦影表示フィルター。 */
  #fleetLayerFilter17amx.fleet-layer-filter17amx { position: absolute; left: 126px; top: 12px; z-index: 56;
    display: flex; align-items: stretch; gap: 1px; overflow: hidden; border: 1px solid var(--border-strong);
    border-radius: 10px; background: rgba(10,22,36,.86); box-shadow: 0 4px 14px rgba(0,0,0,.4);
    backdrop-filter: blur(2px); }
  #fleetLayerFilter17amx button { min-width: 48px; height: 36px; padding: 0 9px; border: 0;
    border-right: 1px solid #24405f; border-radius: 0; background: transparent; color: #a9bed2;
    font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; }
  #fleetLayerFilter17amx button:last-child { border-right: 0; }
  #fleetLayerFilter17amx button:hover { background: #1d3a5c; color: #edf7ff; }
  #fleetLayerFilter17amx button.on { background: linear-gradient(180deg,#2765a0,#1b4e7e); color: #fff;
    box-shadow: inset 0 -2px #7fd8ff; }
  @media (max-width: 760px) {
    /* 狭いPC窓ではスクショ・全画面の下段、スマホ専用UIでは空いている左上に置く。 */
    #fleetLayerFilter17amx.fleet-layer-filter17amx { left: auto; right: 12px; top: 60px; }
    #fleetLayerFilter17amx button { min-width: 44px; height: 42px; padding: 0 7px; font-size: 11.5px; }
    body.mmode #fleetLayerFilter17amx.fleet-layer-filter17amx { left: 12px; right: auto; top: 12px; }
  }
  @media (max-width: 760px) {
    #mapZoom button { width: 46px; height: 42px; } #mapZoom #mzPct { width: 62px; }
    body.windows-pc-mapzoom #mapZoom .winzoom { display: none; }
  }
  /* 海域マップの全画面表示トグルボタン（マップ右上に浮かせる。ズームと同じ質感） */
  #mapFullBtn.mapfullbtn { position: absolute; right: 12px; top: 12px; z-index: 56;
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
    background: rgba(10,22,36,.82); border: 1px solid var(--border-strong); border-radius: 10px;
    color: #dbe8f5; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); backdrop-filter: blur(2px); }
  #mapFullBtn.mapfullbtn:hover { background: #1d3a5c; border-color: #3b6ea8; }
  #mapFullBtn.mapfullbtn:active { background: #26507c; }
  @media (max-width: 760px) { #mapFullBtn.mapfullbtn { height: 42px; font-size: 15px; } }
  /* スマホ全画面UI(mmode)ではマップが既にほぼ全画面のため、このボタンは隠す */
  body.mmode #mapFullBtn.mapfullbtn { display: none; }
  /* 📷 スクショボタン（左上。全画面ボタンと対角に置いて重ならないように） */
  #mapShotBtn.mapshotbtn { position: absolute; left: 12px; top: 12px; z-index: 56;
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
    background: rgba(10,22,36,.82); border: 1px solid var(--border-strong); border-radius: 10px;
    color: #dbe8f5; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); backdrop-filter: blur(2px); }
  #mapShotBtn.mapshotbtn:hover { background: #1d3a5c; border-color: #3b6ea8; }
  #mapShotBtn.mapshotbtn:active { background: #26507c; }
  #mapShotBtn.mapshotbtn:disabled { opacity: .55; cursor: default; }
  @media (max-width: 760px) { #mapShotBtn.mapshotbtn { height: 42px; font-size: 15px; } }
  /* 17PU: 🎯 索敵まとめ表示トグル（購読特典）。スクショボタンの下に浮かせる */
  #rangeAllBtn.rangeallbtn { position: absolute; left: 12px; top: 54px; z-index: 56;
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
    background: rgba(10,22,36,.82); border: 1px solid var(--border-strong); border-radius: 10px;
    color: #dbe8f5; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); backdrop-filter: blur(2px); }
  #rangeAllBtn.rangeallbtn:hover { background: #1d3a5c; border-color: #3b6ea8; }
  #rangeAllBtn.rangeallbtn:active { background: #26507c; }
  /* オン中は「表示中」を縁色で示す（複数=金 / 1つだけならそのグループの色＝--gc） */
  #rangeAllBtn.rangeallbtn.on { background: #3d2f10; border-color: #b8934a; color: #ffe9a8; }
  #rangeAllBtn.rangeallbtn.on:hover { background: #4a3a14; }
  #rangeAllBtn.rangeallbtn.on.on1 { background: #14263a; border-color: var(--gc, #b8934a); color: #eaf3fb; }
  #rangeAllBtn.rangeallbtn.on.on1:hover { background: #1d3352; }
  /* 現在のモードと表示中のグループ数（例: 勢力別・全て / 同盟別・2 / 島別・オフ） */
  #rangeAllBtn .md:not(:empty) { font-size: 11px; font-weight: 600; border-radius: 999px;
    padding: 1px 7px; background: rgba(255,255,255,.14); }
  /* 17R2: コマンドポップアップの「🎯 このマスに届く艦」帯（購読特典）。
     マップの色の濃さ・等高線が“だいたい”なのに対し、こちらが正確な数を answers する。 */
  #cellmenu .cm-cover { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 5px 10px; margin: 0; background: rgba(12,26,42,.7); border-bottom: 1px solid var(--border);
    font-size: 12px; color: #b7c8da; }
  #cellmenu .cm-cover .cvg.cvmore { border-color: #3d556f; color: #9fb2c6; }
  #cellmenu .cm-cover .cvh { font-weight: 500; color: #8fa6bd; }
  #cellmenu .cm-cover .cvg { display: inline-flex; align-items: center; gap: 5px;
    background: #14283f; border: 1px solid var(--gc, #4f86c6); border-radius: 999px;
    padding: 1px 9px; color: #e3eefa; white-space: nowrap; }
  #cellmenu .cm-cover .cvg i { width: 8px; height: 8px; border-radius: 2px; background: var(--gc, #8a97a8);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
  #cellmenu .cm-cover .cvg b { font-weight: 600; color: #fff; margin-left: 1px; }
  @media (max-width: 760px) { #cellmenu .cm-cover { font-size: 12.5px; padding: 6px 10px; } }
  /* 17PW/17R1: グループごとのオン/オフパネル（🎯ボタンの下に開く。同時表示ができる）。
     上段＝色分けの単位（勢力別/同盟別/島別）、中段＝そのモードのグループ一覧（動的生成）。 */
  #rangeAllPanel.rangeallpanel { position: absolute; left: 12px; top: 96px; z-index: 57;
    display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 176px; max-width: 260px;
    background: rgba(10,22,36,.94); border: 1px solid var(--border-strong); border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0,0,0,.5); backdrop-filter: blur(3px); }
  #rangeAllPanel button { font: inherit; font-size: 13px; font-weight: 500; text-align: left;
    color: #dbe8f5; background: #14283f; border: 1px solid var(--border-strong);
    border-radius: 9px; padding: 6px 12px; cursor: pointer; }
  #rangeAllPanel button:hover { background: #1d3a5c; }
  /* 色分けの単位のタブ */
  #rangeAllPanel .rap-modes { display: flex; gap: 4px; }
  #rangeAllPanel .rap-modes button { flex: 1; text-align: center; font-size: 12px; padding: 5px 6px; opacity: .7; }
  #rangeAllPanel .rap-modes button.on { opacity: 1; background: #1f3d63; border-color: #4f86c6; color: #eaf3fb; }
  /* 🔴 17BCX 範囲の種類（すべて／警戒圏だけ） */
  #rangeAllPanel .rap-kinds { display: flex; gap: 4px; }
  #rangeAllPanel .rap-kinds button { flex: 1; text-align: center; font-size: 12px; padding: 5px 6px; opacity: .7; }
  #rangeAllPanel .rap-kinds button.on { opacity: 1; background: #1f3d63; border-color: #4f86c6; color: #eaf3fb; }
  /* グループ一覧（島が多い海域では長くなるのでスクロールさせる） */
  #rangeAllPanel .rap-list { display: flex; flex-direction: column; gap: 5px;
    max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
  #rangeAllPanel [data-fac] { display: flex; align-items: center; gap: 7px; opacity: .58; filter: grayscale(.5); }
  #rangeAllPanel [data-fac].on { opacity: 1; filter: none; border-color: var(--gc, #4f86c6); color: #f2f7fc; }
  #rangeAllPanel [data-fac] .sw { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px;
    background: var(--gc, #8a97a8); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
  #rangeAllPanel [data-fac] .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #rangeAllPanel .rap-empty { color: #8fa3b8; font-size: 12px; padding: 6px 4px; }
  #rangeAllPanel .rap-row2 { display: flex; gap: 6px; }
  #rangeAllPanel .rap-row2 button { flex: 1; text-align: center; font-size: 12px; padding: 5px 8px; }
  @media (max-width: 760px) { #rangeAllPanel.rangeallpanel { top: 106px; max-width: 66vw; }
    #rangeAllPanel button { font-size: 14.5px; padding: 8px 14px; }
    #rangeAllPanel .rap-modes button { font-size: 12.5px; padding: 7px 4px; }
    #rangeAllPanel .rap-row2 button { font-size: 12.5px; padding: 7px 8px; } }
  @media (max-width: 760px) { #rangeAllBtn.rangeallbtn { height: 42px; font-size: 15px; top: 60px; } }
  /* 全画面表示中: 海域マップパネルをビューポート全面に広げる（他UIの上に重ねる） */
  body.mapfull #mapPanel { position: fixed; inset: 0; z-index: 400; margin: 0;
    width: 100vw; height: 100vh; height: 100dvh; max-width: none;
    border-radius: 0; overflow: auto; padding: 8px 10px; box-shadow: none; }
  body.mapfull #mapFullBtn.mapfullbtn { background: #1b3f66; border-color: #3b6ea8; }
  /* 艦艇移動の選択中バー（案内＋キャンセル） */
  #moveBar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 8px; padding: 7px 10px; border-radius: var(--radius-s);
    background: #163455; border: 1px solid #2c65a0; color: #cfe3f5; font-size: 13px; }
  #moveBar #moveBarText { flex: 1 1 auto; min-width: 0; }
  #moveBar #moveCancelBtn { flex: 0 0 auto; }
  /* 17K9: 幅上限(max-width)内に必ず収まるよう、はみ出す行は折り返す（名前側を優先して縮める）。 */
  #cellmenu .it { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px;
    color: #e6eef6; cursor: pointer; white-space: nowrap; }
  #cellmenu .it > span:first-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #cellmenu .it:hover { background: #1d3a5c; }
  #cellmenu .it .c { color: #9fc08f; display: inline-flex; align-items: center; gap: 6px;
    flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; text-align: right; white-space: normal; }
  #cellmenu .it .cm-command-note17avx { display: block; margin-top: 2px; color: #91abc1;
    font-size: 10.5px; font-weight: 400; line-height: 1.3; }
  #cellmenu .it.dis .cm-command-note17avx { color: #8494a4; }
  /* 🎫 コマンド費用横のチケットボタン（17IF: PC・スマホ共通）。タップで消費して実行/割引予約。金色で目立たせ、押しやすく。 */
  #cellmenu .tkq { flex: 0 0 auto; border: 1px solid #6d5720; background: #4a3a10; color: #ffe6a8;
    border-radius: 7px; padding: 3px 9px; font-size: 15px; line-height: 1; cursor: pointer; }
  #cellmenu .tkq:hover { background: #6d5720; }
  #cellmenu .tkq:active { background: #856a26; }
  #cellmenu .it.dis .tkq { color: #ffe6a8; opacity: 1; }  /* 資金不足の行でも🎫は有効（半額/無料で使える） */
  /* 17IH: 艦カード（艦艇タップ時ポップアップ）の軍事系チケットチップ（先制/ダメコン/防衛強化/2回攻撃） */
  #fleetCard .tkrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
  #fleetCard .tkrow .tklabel { color: #ffe6a8; font-size: 11px; }
  #fleetCard .tkrow button { border: 1px solid #6d5720; background: #4a3a10; color: #ffe6a8;
    border-radius: 7px; padding: 3px 8px; font-size: 12px; line-height: 1.2; cursor: pointer; }
  #fleetCard .tkrow button:hover { background: #6d5720; }
  #fleetCard .tkrow button:active { background: #856a26; }
  #cellmenu .it.danger { color: #ff9db0; }
  #cellmenu .it.danger:hover { background: #3a1622; }
  #cellmenu .it.dis { color: #6c7f92; cursor: default; }
  #cellmenu .it.dis:hover { background: transparent; }
  #cellmenu .it.dis .c { color: #6c7f92; }
  /* 地形的に不可のコマンド（terrainBan）: 理由をサブテキストで示す“できない表示” */
  #cellmenu .it.ban .why { display: block; font-size: 10.5px; line-height: 1.3;
    color: #a97f6d; white-space: normal; }
  #cellmenu .it.ban .c { color: #a9705c; }
  #cellmenu .sep { height: 1px; background: #24405f; margin: 3px 0; }
  .qhead { font-size: 15px; font-weight: 500; margin: 10px 0 2px; color: #9fc0dd; }
  /* 17AXM: 数量・ミサイル用の手動入力と、通常のマップ操作を混同させない。 */
  .cmd-manual-guide17axm { display: flex; align-items: center; gap: 10px; margin-top: 8px;
       padding: 9px 10px; border: 1px solid #315878; border-radius: 9px; background: rgba(24,56,78,.48); }
  .cmd-manual-guide17axm > span { flex: 1 1 240px; min-width: 0; color: #d7e7f5; font-size: 12px; line-height: 1.45; }
  .cmd-manual-guide17axm b, .cmd-manual-guide17axm small { display: block; }
  .cmd-manual-guide17axm small { margin-top: 2px; color: #91abc1; font-size: 11px; }
  .cmd-manual-guide17axm button { flex: 0 0 auto; font-size: 12px; padding: 7px 9px; }
  .cmd-manual-navy17axm { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
       color: #a9bfd2; font-size: 12px; cursor: pointer; }
  .cmd-manual-navy17axm input { width: auto; margin: 0; accent-color: #4a8bff; }
  @media (max-width: 520px) {
    .cmd-manual-guide17axm { align-items: stretch; flex-direction: column; }
    .cmd-manual-guide17axm > span { flex-basis: auto; }
    .cmd-manual-guide17axm button { width: 100%; min-height: 40px; }
  }
  /* 艦カード（艦を選択すると出る） */
  #fleetCard { display: none; margin-top: 8px; background: linear-gradient(135deg, #10233c, #0c1a2c);
    border: 1px solid #2f5a78; border-radius: var(--radius); padding: 10px 12px; gap: 12px; align-items: center;
    box-shadow: var(--shadow-1); }
  #fleetCard.show { display: flex; }
  /* 艦GIFは背景透過（マップの明色化対応）なので、カードでは明るい海色を敷いて「海上の艦」に見せる */
  #fleetCard .pic { width: 56px; height: 56px; image-rendering: pixelated;
    background: linear-gradient(160deg, #3b86c8, #2a6fb0);
    border-radius: 8px; border: 1px solid #345a80; padding: 4px; }
  #fleetCard .info { flex: 1; min-width: 0; }
  /* 🔴 17BA1: 汎用の「i」アイコン（.info＝17pxの丸）の見た目を引き継いで、スマホで艦名・状態・性能が横一列に潰れて重なっていた */
  #fleetCard .info { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none;
    color: inherit; font-size: inherit; font-weight: inherit; cursor: auto; user-select: auto; }
  #fleetCard .nm { font-weight: 500; color: #eaf3fb; font-size: 16px; }
  #fleetCard .st { font-size: 13px; color: #9fc0dd; margin-top: 2px; }
  #fleetCard .hpbar { height: 8px; background: #16283e; border-radius: 4px; margin-top: 6px; overflow: hidden; }
  #fleetCard .hpbar .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg,#43d17f,#a5e34f); transition: width .4s; }
  #fleetCard .hpbar .fill.low { background: linear-gradient(90deg,#e0402f,#e8a13a); }
  #fleetCard .specs { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 5px; font-size: 12.5px; color: #cfe0f0; }
  #fleetCard .specs b { color: #ffe9a8; }
  #fleetCard .act { display: flex; flex-direction: column; gap: 6px; }
  /* 範囲攻撃（絨毯爆撃）バッジ。艦カード(fcSpecs)と艦メニュー(cellmenu .hd)で使用。
     控えめな赤系の小タグ。data-tip で説明ポップアップ（core.js setupTips） */
  .area-tag { display: inline-block; font-size: 11px; font-weight: 500; line-height: 1.5;
    padding: 1px 7px; border-radius: 999px; background: #4a1d1d; color: #ffb4a4;
    border: 1px solid #7a3a30; white-space: nowrap; cursor: help; vertical-align: middle; }
  /* 17AEY: テスト海域の新しい兵装表示。範囲攻撃という分類ではなく、散布半径を数値で示す。 */
  .impact-error-tag { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.5;
    padding: 1px 7px; border-radius: 999px; background: #173b55; color: #9be4ff;
    border: 1px solid #32799d; white-space: nowrap; cursor: help; vertical-align: middle; }
  /* 17NW: かいせんニュースの内容別フィルタ（戦闘・外交・島運営など）。
     ニュース欄の見出し直下に置くチップ列。件数0の内容は出ないので行が伸びすぎない。
     スマホでは横スクロールにして、ニュース本体の高さを削らない。 */
  .newsfilter { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 7px; }
  .newsfilter .ncflab { flex: none; font-size: 11px; font-weight: 500; color: #8ea3b8; padding-right: 1px; }
  .newsfilter .ncf { flex: none; font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.5;
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
    background: #16273c; border: 1px solid #2c4a6e; color: #cfe2f5; white-space: nowrap; }
  .newsfilter .ncf:hover { background: #1d3350; }
  .newsfilter .ncf b { font-size: 10px; font-weight: 600; opacity: .7; }
  .newsfilter .ncf.on { background: #2c68b6; border-color: #6aa4ff; color: #fff; box-shadow: 0 0 0 1px rgba(106,164,255,.25); }
  .newsfilter .ncf.on b { opacity: .95; }
  /* かいせんニュース: 遊び心のある丸ゴシック＋カテゴリ・チップで視認性UP */
  .news { max-height: 300px; overflow: auto; font-size: 14px; line-height: 1.5;
    font-family: "Noto Sans JP", sans-serif; } /* 17SA: Zen Maru Gothic撤去（軽量化）。見出しは Noto Sans JP に統一 */
  /* ターンごとの見出し（ニュースをターン単位でまとめる）。スクロール中も上端に貼り付く。
     17E8: 番号を金色バッジ(.ne-tno)で大きく・はっきり表示。
     17EB: さらに大型化し、左右いっぱいのディバイダ（帯＋右へ伸びる罫線）にして
     「ここからが次のターン」という区切りとして機能させる。バッジは nowrap・帯は flex なので
     PC/スマホとも折り返し崩れしない（内容は「🕒 ターン N」だけで短い）。 */
  .news .ne-turnhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 9px;
    margin: 18px 0 6px; padding: 6px 10px;
    font-size: 15px; font-weight: 600; color: #cfe4f8; letter-spacing: .04em;
    background: linear-gradient(180deg, #1c3552, #10203a);
    border-top: 1px solid #35577f; border-bottom: 2px solid #3a679c;
    border-left: 5px solid #4a8bff; border-radius: 6px; }
  /* 右へ伸びる罫線＝左右いっぱいのセパレータ */
  .news .ne-turnhead::after { content: ''; flex: 1 1 auto; min-width: 12px; height: 2px;
    background: linear-gradient(90deg, #3a679c, rgba(58,103,156,0)); border-radius: 1px; }
  .news .ne-turnhead:first-child { margin-top: 2px; }
  .news .ne-turnhead .ne-tno { flex: 0 0 auto; display: inline-block; font-size: 17px; font-weight: 600;
    line-height: 1.35; color: #0a1626; background: linear-gradient(180deg, #ffd76a, #e7b93c);
    padding: 2px 14px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.35); }
  .news .ne { display: flex; align-items: center; gap: 8px; padding: 7px 8px;
    border-bottom: 1px solid #14263c; border-left: 3px solid transparent; }
  .news .ne:hover { background: #0e2036; }
  /* 外交・戦争・新島発見は大きく取り上げる（太字・金色の左帯・淡い背景） */
  .news .ne.big { background: #1b1a10; border-left-width: 5px; border-left-color: #d9b24a; padding-top: 9px; padding-bottom: 9px; }
  .news .ne.big .tx { font-weight: 500; font-size: 14.5px; color: #ffe9bf; }
  .news .ne.big .ncat { background: #4a3a10; color: #ffe6a8; border-color: #6d5720; }
  .news .ne .ncat { flex: 0 0 auto; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
    white-space: nowrap; letter-spacing: .02em; background: #16324e; color: #cfe6ff; border: 1px solid #2c4a6e; }
  .news .ne .tn { color: #6d8aa8; font-size: 12px; white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  .news .ne .tx { flex: 1 1 auto; min-width: 0; color: #dbe8f5; }
  .news .ne .tx b.num { color: #ffe08a; font-weight: 500; font-variant-numeric: tabular-nums; }
  .news .ne .tx b.nm { color: #9fd3ff; font-weight: 500; }
  .news .ne .tx .kw { color: #ff9db0; font-weight: 500; }
  /* 17AFS: 箱庭諸島風の意味別色分け。背景色だけに頼らず、本文の要点を拾いやすくする。 */
  .news .ne .tx .island-name { color: #f0a46b; font-weight: 650; text-decoration-color: rgba(240,164,107,.65); }

/* 🔴 17B02 同盟マーク。ログ・一覧で島名の直前に1文字だけ添える識別子。
   橘ミコト氏 2026-09-19「ログや表示名からは同盟を識別できないケースが多い」。 */
.almk { display: inline-block; margin-right: 3px; padding: 0 4px; border-radius: 4px;
  background: rgba(120,180,255,.14); border: 1px solid rgba(140,195,255,.35);
  color: #a9d2ff; font-weight: 700; font-size: .92em; line-height: 1.35; vertical-align: baseline; }

  .news .ne .tx .unit-name { color: #78ead0; font-weight: 700; text-shadow: 0 0 8px rgba(61,224,190,.2); }
  .news .ne .tx .coord { color: #71d8e8; font-weight: 600; font-variant-numeric: tabular-nums; }
  .news .ne .tx .nword { font-weight: 650; }
  .news .ne .tx .nword.action { color: #f2a65e; }
  .news .ne .tx .nword.danger { color: #ff7777; }
  .news .ne .tx .nword.gain { color: #7fd89b; }
  .news .ne .tx .nword.diplo { color: #c7a6ff; }
  /* カテゴリ色に応じて本文の強調色も少し寄せる */
  .news .ne.gold .tx b.num { color: #ffd76a; }
  .news .ne.war .tx .kw { color: #ffb4b4; }
  .news .ne.grow .tx b.num { color: #b8f0c8; }
  .news .ne.war  { border-left-color: #d05a5a; }  .news .ne.war  .ncat { background: #3a1616; color: #ffc9c9; border-color: #6a2c2c; } .news .ne.war .tx { color: #f4d3cf; }
  /* 17AHG: クリスタル奪取は通常の撃ち合いと区別できる赤紫＋金の発光カード。 */
  .news .ne.crystal { border: 1px solid rgba(255,100,145,.72); border-left: 6px solid #ff3f72;
    background: linear-gradient(105deg, rgba(112,16,58,.82), rgba(60,20,72,.64) 58%, rgba(31,18,38,.35));
    box-shadow: inset 0 0 26px rgba(255,58,118,.18), 0 0 12px rgba(255,64,122,.16); }
  .news .ne.crystal .ncat { background: linear-gradient(135deg,#8e1749,#54206f); color: #fff3bd;
    border-color: #ff9cbe; font-weight: 700; text-shadow: 0 0 8px rgba(255,220,120,.7); }
  .news .ne.crystal .tx { color: #fff0f5; font-size: 1.06em; font-weight: 700;
    text-shadow: 0 0 9px rgba(255,94,146,.22); }
  /* 17KF: 宣戦布告・開戦（kind 'declare'）は世界ニュースの中でもひときわ大きく・赤く */
  .news .ne.declare { border-left: 4px solid #ff5d5d; background: linear-gradient(90deg, rgba(122,26,26,.38), rgba(122,26,26,0) 75%); }
  .news .ne.declare .ncat { background: #5a1414; color: #ffd0d0; border-color: #8a3030; font-weight: 700; }
  .news .ne.declare .tx { color: #ffe2dc; font-weight: 600; font-size: 1.07em; }
  .news .ne.declare .tx b.nm, .news .ne.declare .tx b.num { color: #ffd76a; }
  .news .ne.mon  { border-left-color: #b06ad0; }  .news .ne.mon  .ncat { background: #2e1740; color: #e6c8ff; border-color: #573a70; }
  /* 17UK: BFに現れる正体不明ユニット。紫の海図と電光色で、通常の海域情報から明確に浮かせる。 */
  .news .ne.anomaly { border-left: 5px solid #cf79ff; background: linear-gradient(90deg, rgba(84,22,110,.62), rgba(26,16,65,.48) 58%, rgba(10,22,38,0) 100%); box-shadow: inset 0 0 24px rgba(192,88,255,.13); }
  .news .ne.anomaly .ncat { background: linear-gradient(135deg, #52156c, #202060); color: #f1d7ff; border-color: #ca7cff; font-weight: 700; text-shadow: 0 0 8px rgba(214,130,255,.8); }
  .news .ne.anomaly .tx { color: #f3e1ff; font-weight: 600; font-size: 1.05em; text-shadow: 0 0 10px rgba(143,96,255,.2); }
  .news .ne.anomaly .tx b.nm { color: #8ff7df; text-shadow: 0 0 8px rgba(91,244,214,.45); }
  .news .ne.anomaly .tx b.num { color: #ffe28b; }
  .news .ne.anomaly .tx .kw { color: #ffb6f0; }
  .news .ne.gold { border-left-color: #e7c765; }  .news .ne.gold .ncat { background: #4a3a10; color: #ffe6a8; border-color: #6d5720; } .news .ne.gold .tx { color: #ffeec2; font-weight: 500; }
  .news .ne.navy { border-left-color: #4a8bff; }  .news .ne.navy .ncat { background: #123458; color: #bfe0ff; border-color: #2c527c; }
  .news .ne.warn { border-left-color: #e0a13a; }  .news .ne.warn .ncat { background: #3a2f10; color: #ffe0a8; border-color: #6d5720; }
  .news .ne.grow { border-left-color: #8fd06a; }  .news .ne.grow .ncat { background: #143a24; color: #b8f0c8; border-color: #2c6a45; }
  .news .ne.calm { border-left-color: #5aa0e0; }
  .news .ne.ng   { border-left-color: #7a5a5a; }  .news .ne.ng   .ncat { background: #33262a; color: #e6b8b0; border-color: #5a4040; } .news .ne.ng .tx { color: #e6c3bd; }
  .news .ne.ok   { border-left-color: #3a5a7f; }
  /* チュートリアル・オーバーレイ */
  #tutorial { position: fixed; inset: 0; z-index: 1000; background: rgba(4,10,20,.78);
    display: none; align-items: center; justify-content: center; padding: 16px; }
  #tutorial.show { display: flex; }
  #tutorial .card { background: linear-gradient(160deg, #10233c, #0b1728); border: 1px solid #2f5a78;
    border-radius: 14px; max-width: 560px; width: 100%; padding: 20px 24px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
  /* 進捗バー（カード上部）: ステップに応じて伸びる */
  #tutorial .tprog { height: 4px; border-radius: 999px; background: #16304e; overflow: hidden; margin: 0 0 16px; }
  #tutorial .tprog span { display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #4a9bff, #7fe0ff); transition: width .3s ease; }
  /* 見出し行: アイコンチップ＋STEP＋タイトル */
  #tutorial .thead { display: flex; align-items: center; gap: 13px; }
  #tutorial .tic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; font-size: 25px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #1c3f63, #16304e); border: 1px solid #34618c; }
  #tutorial .tstep { color: #6d8aa8; font-size: 13px; letter-spacing: .05em; }
  #tutorial h3 { margin: 2px 0 0; color: #eaf3fb; font-size: 21px; }
  #tutorial .body { margin-top: 14px; }
  #tutorial .body { color: #cfe0f0; font-size: 16px; line-height: 1.75; min-height: 130px; }
  #tutorial .body b { color: #7fd1ff; }
  #tutorial .body .k { display: inline-block; background: #1d3450; border: 1px solid #345a80;
    border-radius: 5px; padding: 0 7px; font-size: 14.5px; color: #cfe6ff; }
  #tutorial .dots { display: flex; gap: 6px; justify-content: center; margin: 16px 0; }
  #tutorial .dots span { width: 8px; height: 8px; border-radius: 50%; background: #2c4a6e; }
  #tutorial .dots span.on { background: #7fd1ff; }
  #tutorial .nav { display: flex; gap: 8px; align-items: center; }
  #tutorial .nav .grow { flex: 1; }
  #tutorial .skip { background: none; border: none; color: #6d8aa8; cursor: pointer; font-size: 14.5px; }
  #tutorial .tguide { text-decoration: none; margin-left: 12px; color: #7db4ff; }
  #tutorial .tguide:hover { color: #a8ceff; text-decoration: underline; }
  #btnHelp { background: #14304e; color: #cfe6ff; border: 1px solid var(--border-2); border-radius: var(--radius-s);
    padding: 6px 10px; cursor: pointer; font-size: 15px; }
  #btnHelp:hover { background: #1d4066; border-color: var(--border-strong); }
  /* ヘッダ/詳細設定のページ内リンク（ルール・管理画面） */
  .navlink { display: inline-flex; align-items: center; background: #14304e; color: #cfe6ff;
    border: 1px solid var(--border-2); border-radius: var(--radius-s); padding: 6px 10px; font-size: 15px;
    font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s; }
  .navlink:hover { background: #1d4066; border-color: var(--border-strong); }
  /* 17NS: 利用頻度の高い3つ（掲示板・攻略wiki・目安箱）はヘッダーに直接出す。
     button 要素にも .navlink を使うため、ブラウザ既定のフォントを打ち消しておく。 */
  button.navlink { font-family: inherit; line-height: inherit; cursor: pointer; }
  .navlink .ic { flex: 0 0 auto; margin-right: 5px; font-size: 15px; line-height: 1; }
  /* サイトフッター */
  .sitefoot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 20px 0 8px;
    padding-top: 14px; border-top: 1px solid #1d3148; font-size: 12.5px; color: #9fb2c6; }
  .sitefoot a { color: #7db4ff; text-decoration: none; }
  .sitefoot a:hover { text-decoration: underline; }
  .sitefoot .muted { margin-left: auto; }
  .footbrand { display: inline-flex; align-items: center; gap: 7px; color: #cfe0f5; font-weight: 500; }
  .footbrand img { border-radius: 5px; }
  /* リプレイ（巻き戻し／観戦）バー */
  #replayBar { display: none; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
    background: linear-gradient(160deg, #141d33, #0d1526); border: 1px solid #33507a; }
  #replayBar.show { display: block; }
  #replayBar .rrow { display: flex; align-items: center; gap: 8px; }
  #replayBar .tag { background: #5a2d82; color: #e9d5ff; border-radius: 6px; padding: 2px 8px;
    font-size: 14px; font-weight: 500; }
  #replayBar .rturn { color: #eaf3fb; font-weight: 500; font-size: 16px; min-width: 84px; }
  #replayBar button { background: #22375a; color: #cfe6ff; padding: 6px 10px; }
  #replayBar button:hover { background: #2c4670; }
  #replayBar button.play { background: var(--accent-btn); color: #fff; }
  #replayBar button.play:hover { background: #3f7dff; }
  #replayBar #rSlider { flex: 1; accent-color: #7fd1ff; }
  /* 表示切替（🌏全体 / 🏝自島）のセグメント */
  #replayBar .rview { display: inline-flex; gap: 0; border: 1px solid #33507a; border-radius: 8px; overflow: hidden; }
  #replayBar .rview button { border-radius: 0; padding: 6px 9px; }
  #replayBar .rview button.on { background: var(--accent-btn); color: #fff; }
  #replayBar .rview button.on:hover { background: #3f7dff; }
  #replayBar .close { margin-left: auto; background: #3a2330; color: #f0c9d6; }
  #replayBar .rev { margin-top: 7px; color: #9fb6cf; font-size: 14px; min-height: 16px;
    line-height: 1.5; max-height: 46px; overflow: auto; }
  /* マップ上部のパンくず（世界地図⇔島マップの行き来） */
  .mapcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 15px; color: #9fb6cf; }
  .mapcrumb .lnk { background: #14304e; color: #cfe6ff; border: 1px solid var(--border-2); border-radius: var(--radius-s);
    padding: 5px 10px; cursor: pointer; font-weight: 500; transition: background .15s, border-color .15s; }
  .mapcrumb .lnk:hover { background: #1d4066; border-color: var(--border-strong); }
  .mapcrumb .sep { color: #5a7691; }
  .mapcrumb .cur { color: #eaf3fb; font-weight: 500; }
  .mapcrumb .hint { color: #6d8aa8; font-size: 14px; margin-left: 2px; }
  /* リプレイ中はマップ操作を封じる透明ブロッカー */
  #replayBlock { position: absolute; inset: 0; z-index: 50; display: none; cursor: default; }
  #replayBlock.show { display: block; }

  /* ===== スマホ / タッチ最適化 ===== */
  /* タップ遅延(300ms)と不用意なダブルタップズームを抑える。タップ時の青いハイライトも消す。 */
  button, select, .cell, .chattabs button, .ally button, #cellmenu button, #replayBar button {
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  /* iOSでの慣性スクロール & 端でのバウンス連鎖を抑制 */
  .mapframe { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* 17ME: マップのタップを機敏に（ダブルタップズーム・約300msのタップ遅延を抑制）。
     1本指パン（.mapframeのスクロール）と2本指ピンチ（JS側でpreventDefault）は維持される。 */
  #map, .mapframe, #mapstage { touch-action: manipulation; }
  .chatlog { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* チャットや入力欄以外のUI文字は誤選択させない（マップのドラッグ操作を安定させる） */
  .topbar, .statusbar, .legend, .chattabs, #replayBar, .ibanner, .topline { user-select: none; -webkit-user-select: none; }

  /* 指で押しやすいタップ領域（マウスではなく指=coarseポインタのときだけ拡大） */
  @media (pointer: coarse) {
    button, .b1, .b2, .b3, .b4 { min-height: 44px; padding: 10px 14px; }
    select, input { min-height: 44px; }
    .chattabs button { min-height: 40px; }
    #cellmenu button { min-height: 42px; }         /* マスメニューの各項目を押しやすく */
    #replayBar button { min-height: 40px; }
    .ally button { min-height: 34px; }
    .tkchip { min-height: 44px; min-width: 48px; }            /* チケットチップ（チップ＝使うボタン） */
    .mappan button { width: 48px; height: 40px; min-height: 40px; padding: 0; } /* 世界地図の十字パン */
    .fchip .mv { min-height: 28px; min-width: 28px; }         /* 索敵順の並べ替え */
    /* 17K9: ✨プレミアム欄——行間とボタンを指向けに（詰まって押しづらい/文字が小さすぎるのを解消） */
    .prm-head { padding: 9px 11px 4px; }
    .prm-row { padding: 7px 6px; gap: 8px; }
    .prm-nm { font-size: 12.5px; }
    .prm-use, .prm-buy { min-height: 38px; padding: 6px 12px; font-size: 12.5px; }
  }

  /* スマホ幅（縦積みは既存の760pxブレークポイントで実施済み。ここは詰め物と可読性の調整） */
  @media (max-width: 760px) {
    .wrap { padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right)); }
    .panel { padding: 12px; margin-bottom: 10px; }
    h1 { font-size: 19.5px; }
    /* iOSは入力欄のfont-sizeが16px未満だとフォーカス時に自動ズームする → 16pxで固定 */
    input, select, textarea, #chatInput, #apiBase { font-size: 16px; }
    /* ステータスは横スクロールで全項目を保持（折り返しで縦に伸びすぎないように） */
    .statusbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .statusbar .sc, .statustop .statusbar .sc { flex: 0 0 auto; }
    /* スマホでは縦積みなので、チケット枠の最大幅制限は外して全幅を使う */
    .statustop #ticketTop { max-width: none; min-width: 0; flex-basis: 100%; }
    /* チャット欄はスマホでは低めに（マップに画面を譲る） */
    .chatlog { height: 240px; }
    /* トップバーは縦に積んで、狭くても崩れないように */
    .topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* リプレイバーのコントロールが折り返せるように */
    #replayBar .rrow { flex-wrap: wrap; }
    #replayBar #rSlider { flex: 1 1 100%; order: 5; }
    /* 17BZ: 上部1行（島名/島主/天気＋turn/更新時刻/カウントダウン）はスマホでは2段に折り返す。
       時刻チップ .tschip は flex-wrap で崩れず並び、次の更新の強調(.next)はそのまま。 */
    .topline { row-gap: 4px; }
    .topline .turninfo { margin-left: 0; flex-basis: 100%; }
    .ibanner .nm { font-size: 17px; }
    .turnsched .tschip { padding: 2px 6px; }
    /* 未ログイン時のスマホ: 一番上は登録（ログインパネル）のまま、そのすぐ下にマップを出して
       すぐ触れるようにする。ステータス等はマップの下へ回す（順序を order で入れ替え）。 */
    body.preauth .wrap { display: flex; flex-direction: column; }
    body.preauth .wrap > * { order: 5; }        /* 既定は後方（開発者設定・フッターなど） */
    body.preauth .topbar { order: 0; }
    body.preauth #loginPanel { order: 1; }
    body.preauth .grid2 { order: 2; }           /* マップをログイン直後に */
    body.preauth #modeBanner { order: 3; }
    body.preauth #statusPanel { order: 4; }
    /* 登録パネルのバナーは縦の場所を取りすぎないよう控えめに（クロップ表示） */
    #loginPanel .herobanner { max-height: 132px; object-fit: cover; object-position: center; }
    /* ===== 17E0: 未ログイン時（新規登録画面）のスマホ最適化 ===== */
    /* トップバーの操作行（BGM・ヘルプ・遊び方/図鑑/ルール・ログイン枠）は登録前は不要なので隠す。
       #bgmBtn は bgm.js が .topbar .row に差し込むため、行ごと隠せばまとめて消える。
       ログイン導線は登録カード内の #btnLogin があるので問題ない。 */
    body.preauth .topbar .row { display: none; }
    body.preauth .topbar { margin-bottom: 4px; gap: 4px; }
    /* 改行崩れ対策＋縦詰め（幅360〜390pxの実機を想定） */
    #loginPanel .hero { gap: 10px; }
    /* 17E4: タグは語句ごとの2チップに分解（「／ 登録カンタン」だけが2行目に落ちる不自然さを解消）。
       11px なら360px幅でも2チップが1行に並ぶ。極端に狭い端末は keep-all＋anywhere で語中折れを最小化 */
    .hero-tag { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 8px;
      border: 0; background: none; padding: 0; letter-spacing: 0; max-width: 100%; }
    .hero-tag .ht { white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
      font-size: 11px; line-height: 1.5; background: rgba(74,139,255,.16);
      border: 1px solid #34608f; border-radius: 999px; padding: 3px 9px; }
    .hero-tag .ht-sep { display: none; }
    .hero-title { font-size: 21.5px; margin-bottom: 6px; letter-spacing: .02em; }  /* 360px幅でも1行に収まる大きさ。折れても「、」の後で自然に折れる(keep-all) */
    .hero-sub { display: none; }  /* 価値説明は3ポイント（.hero-points）に集約し、登録フォームを1画面目に寄せる */
    .hero-points { gap: 6px; }
    .hero-points li { font-size: 13px; line-height: 1.6; }
    /* 17E4: 3ポイントの本文は「、」「。」と <wbr> の位置でだけ折り返す（文節の途中で折れない）。
       それでも入り切らない極端な狭さでは anywhere で救済（はみ出しゼロ） */
    .hero-points li .tx { word-break: keep-all; overflow-wrap: anywhere; }
    /* 登録カード: 余白を詰めてCTAまでの距離を短く */
    .signup { margin-top: 12px; padding: 14px 13px 12px; }
    .only-narrow { display: inline; }              /* 狭幅ではおためし導線を2行に */
    .signup-trust { gap: 4px 10px; margin-bottom: 10px; }
    .signup-trust span { font-size: 12px; }
    .signup-title { font-size: 16px; margin-bottom: 10px; }
    .signup .loginform { gap: 8px; }
    /* 長いプレースホルダが途中で切れないよう少し小さく（入力文字自体は16px以上を維持=iOS自動ズーム回避） */
    .signup input::placeholder { font-size: 13.5px; }
    .signup-cta { margin-top: 6px; font-size: 16px; padding: 13px 14px; }
    .signin-row { margin-top: 10px; padding-top: 10px; }
    /* 「おためし島で遊ぶ」等が語の途中で折れないように */
    .signin-row, .demo-cta { word-break: keep-all; }
  }

/* 艦隊パネルの索敵順チップ */
.fchips { display: flex; flex-wrap: wrap; gap: 4px; }
.fchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px;
  background: #12314f; border: 1px solid #24466b; border-radius: 6px; font-size: 14px; }
.fchip.empty { opacity: .45; }
.fchip .cnt { color: #8fb0cc; font-size: 11.5px; }
.fchip .mv { background: #1b3a5c; border: 1px solid var(--head-border); color: #cfe2f5;
  border-radius: 4px; cursor: pointer; padding: 0 4px; line-height: 18px; }
.fchip .mv:hover:not(:disabled) { background: #26507c; border-color: var(--border-strong); }
.fchip .mv:disabled { opacity: .35; cursor: default; }
/* 17LR: 索敵ON/OFFトグル。区分ごとに、その艦隊が絶対に狙わない対象を指定できる（索敵順とは独立）。 */
.fchip .scan-toggle { border: 1px solid var(--head-border); border-radius: 4px; cursor: pointer;
  padding: 0 5px; line-height: 18px; font-size: 10.5px; font-weight: 500;
  background: #1b3a5c; color: #8fd6a8; }
.fchip .scan-toggle:hover { border-color: var(--border-strong); }
.fchip.scan-off { border-color: #7a3838; background: #2c1a1a; }
.fchip.scan-off .scan-toggle { background: #4a2323; color: #f0a0a0; }
.fchip.scan-off b, .fchip.scan-off .cnt { opacity: .55; text-decoration: line-through; }

/* ---------- BGMプレイヤー（js/bgm.js。トップバーの♪ボタン＋小パネル） ---------- */
#bgmBtn { background: #14304e; color: #cfe6ff; border: 1px solid var(--border-2);
  border-radius: var(--radius-s); padding: 4px 10px; cursor: pointer; font-size: 13px;
  word-break: keep-all; }
#bgmBtn:hover { background: #1d4066; border-color: var(--border-strong); }
#bgmBtn.on { color: var(--gold-soft); border-color: var(--head-border);
  background: linear-gradient(180deg, #1d4066, #14304e); }
#bgmPanel { display: none; position: fixed; z-index: 300; width: 232px;
  background: var(--panel-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow-pop); }
#bgmPanel .bgm-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
#bgmPanel .bgm-row button { background: #1b3a5c; color: #cfe2f5; border: 1px solid var(--head-border);
  border-radius: var(--radius-s); padding: 3px 8px; cursor: pointer; font-size: 12px; }
#bgmPanel .bgm-row button:hover { background: #26507c; border-color: var(--border-strong); }
#bgmPanel .bgm-row .bgm-play { flex: 1; background: var(--accent-btn); color: #fff; border-color: transparent; }
#bgmPanel .bgm-row .bgm-play:hover { background: #3f7dff; }
#bgmPanel .bgm-row input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
#bgmPanel .bgm-row select { flex: 1; min-width: 0; }
#bgmPanel .bgm-ic { font-size: 13px; }
#bgmPanel .bgm-note { color: var(--muted); font-size: 10.5px; line-height: 1.5; margin: 0; }

/* ---------- 前回からの島の変化アニメ（js/changes.js。#mapstage 上のオーバーレイ） ---------- */
/* 17R6: **背景を必ず透過にする**。全体の `canvas { background: #06101c }` を受け継ぐと、
   この canvas は #tiles/#map より上（z-index:3）なので、変化アニメが出ている 5.2 秒のあいだ
   島マップ全体が濃紺一色で塗り潰され、光るマスだけが宙に浮いて見えていた（#map は
   `background: transparent` で同じ罠を避けている。ここが漏れていた）。
   併せて角丸も切る（可視窓ぶんの canvas を地図の途中に置くので、角が欠けて見えないように）。 */
#changeAnim { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  background: transparent; border-radius: 0; }
.mapchanges { position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  z-index: 12; max-width: calc(100% - 16px); cursor: pointer;
  background: rgba(10,26,44,.92); border: 1px solid var(--border-strong);
  border-radius: var(--radius-s); padding: 5px 10px; font-size: 12px; line-height: 1.6;
  color: var(--text); box-shadow: var(--shadow-pop); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; animation: mcIn .35s ease-out; }
.mapchanges .mc-b { color: var(--ok); font-weight: 500; }
.mapchanges .mc-d { color: #ff8a76; font-weight: 500; }
.mapchanges .mc-t { color: #9fc6ff; }
.mapchanges .mc-x { margin-left: 8px; color: var(--muted); }
.mapchanges .mc-x:hover { color: var(--text-strong); }
@keyframes mcIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== スマホ: マップ全画面＋ボトムシート（mobileui.js が body.mmode を付与した時のみ有効） ===== */
/* 既定は非表示。mmode（スマホ×ログイン時）だけ下部ナビ／シートを出す。PC・未ログインは一切不変。 */
.mnav, .msheet, .mresbar { display: none; }
/* 17NR「下に集約」: 下部ナビ(--mnavh)と資源バー(--mresh)の高さを1か所で持ち、
   マップの下余白・シート・チケットバナーの位置をすべてこの2つから算出する。 */
body.mmode { overflow: hidden; --mnavh: calc(58px + env(safe-area-inset-bottom)); --mresh: 44px; }
body.mmode .wrap {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; gap: 0; max-width: none;
  padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
}
body.mmode .topbar, body.mmode #loginPanel, body.mmode .devtools, body.mmode .sitefoot { display: none; }
body.mmode #modeBanner { flex: 0 0 auto; margin: 0 0 4px; }
/* 17NR: ヘッダー(#statusPanel)は ☰メニュータブ（シート内）へ移設した。画面上部には出ないので、
   横スクロールで詰める必要がなくなり、素直に折り返して読める見た目に戻す。 */
body.mmode #statusPanel { flex: 0 0 auto; margin: 0 0 8px; padding: 9px 10px; }
body.mmode #statusPanel .statusrow { flex-wrap: wrap; overflow: visible; gap: 6px; margin-bottom: 4px; }
body.mmode #statusPanel .topline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.mmode #statusPanel .statusrow .grp { flex: 0 0 auto; }
/* 17QK: 🔭「他の島・海域」の一群だけは縮められるようにして、行を折り返す。
   flex:0 0 auto のままだと中身（リプレイ／観戦などのリンク列）の幅そのままに広がり、実測で
   ☰メニュータブが 608px になって「🔭 他の島を見にいく」「▶ リプレイ / 観戦」が画面右へ
   218px はみ出していた（横になぞる手掛かりも無い＝事実上たどり着けない）。 */
body.mmode #statusPanel .statusrow .grp.specgrp { flex: 1 1 100%; min-width: 0; }
body.mmode #specPop { min-width: 0; max-width: 100%; }
body.mmode #statusPanel .statusrow .statusspace { display: none; }
body.mmode #statusPanel .topline { margin-bottom: 3px; }
body.mmode #statusPanel .statustop { margin: 0; }
/* 17NQ: PCで畳んだ3つのポップオーバー（☰ メニュー / 🔭 他の島・海域 / 🕒 更新時刻）は、
   スマホでは畳まずに従来どおり全項目を並べる。トリガーボタンを隠し、ラッパーを display:contents に
   することで、中身が元どおり親の行（情報タブのリンク列・.statusrow の横スクロール行）へ流れ込む。 */
body.mmode #btnNavMenu, body.mmode #btnSpecMenu, body.mmode #btnTurnSched { display: none; }
body.mmode #navWrap, body.mmode #specWrap, body.mmode #tsWrap { display: contents; }
body.mmode .popwrap > .pop { position: static; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
body.mmode .pop .poph { display: none; }
body.mmode .pop .popitem { width: auto; border: 1px solid var(--border-2); border-radius: var(--radius-s);
  background: #14304e; color: #cfe6ff; padding: 6px 10px; font-size: 15px; font-weight: 500; gap: 5px; }
body.mmode #specPop { flex: 1 1 100%; width: 100%; min-width: 0; }
/* 17ASZ: チップ列を画面幅に収め、その中を横スクロール。親を内容幅へ広げない。 */
body.mmode #specPop .worldtag.multi {
  flex: 0 1 100%; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; padding-block: 5px 8px;
}
body.mmode #specPop .wt-chip { flex: 0 0 auto; min-height: 32px; }
.cm .av img { display: block; object-fit: cover; border-radius: 50%; }
body.mmode #specPop #spectateSel { width: auto; min-width: 150px; margin: 0; }
body.mmode #specPop #btnReplay { width: auto; margin: 0; }
body.mmode #areaWarn { flex: 0 0 auto; }
/* 17ADT: まだ開いていない3ページは元のDOM位置で休止する。初回に全要素を移動・再計算せず、
   タブを開いた時だけ mobileui.js が対応する .mgroup へ接続する。 */
body.mmode .grid2 > .leftcol, body.mmode .grid2 > .chatcol,
body.mmode .midcol > #belowMap, body.mmode #mapPanel > #legend,
body.mmode .wrap > #statusPanel { display: none; }
/* マップを残り全高いっぱいに（下部ナビぶんの余白を確保） */
body.mmode .grid2 { flex: 1 1 auto; min-height: 0; display: block; margin: 0;
  padding-bottom: calc(var(--mnavh) + var(--mresh)); }
body.mmode .midcol { height: 100%; display: flex; flex-direction: column; min-height: 0; }
body.mmode #mapPanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  margin: 0; border-radius: 10px; padding: 6px; }
body.mmode #mapPanel .mapwrap { flex: 1 1 auto; min-height: 0; }
body.mmode #mapPanel .mapframe { height: 100% !important; max-height: none; }
/* 17NR: 島名パンくずは1行に圧縮（説明文は畳む）。上の1行ぶんもマップに回す。 */
body.mmode #mapPanel .mapcrumb { margin-bottom: 4px; font-size: 13px; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mmode #mapPanel .mapcrumb .hint { display: none; }
body.mmode #mapPanel .mapcrumb .lnk { padding: 4px 9px; font-size: 12.5px; }
/* 17NR: 面積上限の警告帯はマップの真上（シートに隠さない） */
body.mmode #mapPanel > .areawarn { margin: 0 0 4px; }
/* 17NR「下に集約」: 画面の隅の操作系を、片手で届く下端へ寄せる。
   ⚙ 設定は左下（固定）、📷 スクショはそのすぐ上、ズームは従来どおり右下。 */
body.mmode .gearfix { top: auto; right: auto; left: calc(max(8px, env(safe-area-inset-left)) + 19px);
  bottom: calc(var(--mnavh) + var(--mresh) + 72px); }
/* 🔴 17BA1: 艦のカードが地図の下に出ている間は、⚙ をカードの高さぶん上へ（カードの艦の絵に重なっていた） */
body.mmode .gearfix { bottom: calc(var(--mnavh) + var(--mresh) + 72px + var(--fclift17ba1, 0px)); }
/* シート展開中は⚙を隠す（fixed なのでシートの上に浮いてしまう） */
body.mmode.msheet-open .gearfix { display: none; }
body.mmode #mapShotBtn.mapshotbtn { top: auto; bottom: 12px; left: 12px;
  width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 18px; }
body.mmode #mapShotBtn.mapshotbtn .lb { display: none; }
/* スマホ軽量化: ステータス（資金・食料・人口…）をコンパクトにしてマップの表示領域を広げる。 */
body.mmode .statusbar .sc { min-width: 0; padding: 3px 8px 4px; }
body.mmode .statusbar .sc .k { font-size: 10px; gap: 3px; margin-bottom: 1px; }
body.mmode .statusbar .sc .k .ic { font-size: 11px; }
body.mmode .statusbar .sc .v { font-size: 13.5px; }
body.mmode .statusbar .sc-rate { min-width: 122px; }
body.mmode .statusbar .sc-rate .buildlv { padding: 0 4px; font-size: 9px; }
/* 下部ナビ（🗺マップ / 📋操作 / 💬交流 / ⚙情報） */
body.mmode .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 242;
  height: var(--mnavh); padding-bottom: env(safe-area-inset-bottom);
  background: var(--panel-3); border-top: 1px solid var(--border-strong); }
body.mmode .mnav button { flex: 1; min-height: 0; padding: 5px 0; border: none; background: none; cursor: pointer;
  position: relative;
  color: #9fb2c6; font-size: 10.5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.mmode .mnav button .ic { font-size: 21px; line-height: 1; }
body.mmode .mnav button.on { color: var(--gold-soft); }
/* 17AOH: マップに居たまま次回更新と予約漏れを確認できる。 */
body.mmode .mnav-quick17aoh { display: block; max-width: 24vw; overflow: hidden; text-overflow: ellipsis;
  color: #7695b2; font-size: 8.5px; line-height: 1; font-weight: 500; white-space: nowrap; }
body.mmode .mnav button.on .mnav-quick17aoh { color: #d8c882; }
body.mmode .mnav-badge17aoh { position: absolute; top: 3px; left: calc(50% + 8px); display: grid;
  place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--panel-3);
  border-radius: 999px; background: #e34858; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; }
body.mmode .mnav-badge17aoh[hidden] { display: none; }
body.mmode .mnav.mrefreshing17aoh .mnav-quick17aoh::before { content: "↻ "; color: #8fdcff; }
/* 17NR: 資源バー（💰資金 / 🌾食料 / 👥人口）。下部ナビの直上＝親指がいちばん届く位置に置き、
   タップで☰メニュー（島の詳しい状況）が開く。値は #statusbar のカードを mobileui.js が鏡写しする。 */
body.mmode #mResBar.mresbar { display: flex; position: fixed; left: 0; right: 0; bottom: var(--mnavh);
  z-index: 240; align-items: center; gap: 10px;
  height: var(--mresh); min-height: var(--mresh); max-height: var(--mresh); padding: 0 12px;
  border: none; border-top: 1px solid var(--border-2); background: var(--panel-3);
  color: #eaf3fb; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; overflow: hidden; }
body.mmode #mResBar.mresbar.empty { display: none; }
#mResBar .mres-items { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 13px;
  white-space: nowrap; overflow: hidden; }
#mResBar .mres-i { display: inline-flex; align-items: baseline; gap: 4px; }
#mResBar .mres-ic { font-size: 13px; font-weight: 400; }
#mResBar .mres-more { flex: none; color: #7f9cba; font-size: 17px; line-height: 1; }
#mResBar:active { background: #16304c; }
/* チケットタブの使い方ガイド（スマホのみ表示） */
body.mmode #mgTicket .tk-guide { display: block; background: #10233a; border-left: 3px solid var(--gold-soft);
  padding: 8px 11px; border-radius: 6px; font-size: 12.5px; line-height: 1.7; color: #cfe2f5; margin-top: 8px; }
/* 17MD: チケットモード中に常時表示するバナー（スマホ）。下部ナビのすぐ上に固定し、
   「今どのチケットモードか」と「マスをタップ」の案内＋ワンタップ解除を大きめのタップ領域で出す。 */
body.mmode .tkbanner { position: fixed; left: 8px; right: 8px;
  bottom: calc(var(--mnavh) + var(--mresh) + 8px); z-index: 241;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,215,106,.97), rgba(240,178,66,.97)); color: #2a1c05;
  box-shadow: 0 6px 22px rgba(0,0,0,.42); border: 1px solid #ffe9a8; animation: tkbIn .18s ease-out; }
.tkbanner .tkb-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.tkbanner .tkb-tag { font-weight: 600; font-size: 15px; white-space: nowrap; }
.tkbanner .tkb-how { font-size: 12.5px; line-height: 1.35; font-weight: 400; }
.tkbanner .tkb-hint { font-weight: 500; opacity: .82; font-size: 11.5px; }
.tkbanner .tkb-x { flex: none; border: none; border-radius: 9px; cursor: pointer; background: rgba(42,28,5,.16);
  color: #2a1c05; font-weight: 600; font-size: 13px; padding: 8px 13px; min-height: 42px; white-space: nowrap; }
.tkbanner .tkb-x:active { background: rgba(42,28,5,.30); }
@keyframes tkbIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* タッチ端末では下部ナビを 62px に（.mnav の pointer:coarse 指定）。変数を上書きするだけで
   シート・資源バー・チケットバナーの位置がまとめて追従する。 */
@media (pointer: coarse) {
  body.mmode { --mnavh: calc(62px + env(safe-area-inset-bottom)); --mresh: 44px; }
}
/* 17ME: 長押しインスペクト（タッチでマス・ユニット・島名を情報表示）のパネル。 */
#mapInspect { position: fixed; z-index: 245; display: none; max-width: min(80vw, 320px);
  background: rgba(8,18,30,.97); color: #e6f0fb; border: 1px solid var(--gold-soft); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.55); font-size: 13px; line-height: 1.55; overflow: hidden; }
#mapInspect .mi-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px;
  background: rgba(255,215,106,.15); border-bottom: 1px solid rgba(255,215,106,.28); }
#mapInspect .mi-xy { font-family: ui-monospace, monospace; font-size: 12px; color: #ffd76a; font-weight: 500; }
#mapInspect .mi-x { margin-left: auto; border: none; background: rgba(255,255,255,.12); color: #dbe8f5;
  border-radius: 7px; min-width: 36px; min-height: 32px; font-size: 14px; cursor: pointer; }
#mapInspect .mi-x:active { background: rgba(255,255,255,.24); }
#mapInspect .mi-body { padding: 8px 11px; }
#mapInspect .mi-body .who { color: #9fd0ff; }
/* 17ME: スマホでのみ、操作案内行(#selInfo)の内容をマップ上部の帯に鏡写しする（数秒で自動的に消える）。
   17NR で ⚙（.gearfix）を画面下へ移したため、右のゆとりは不要になった。 */
#selInfoMap { display: none; }
body.mmode #selInfoMap { display: none; position: fixed; left: 8px; right: 8px;
  top: calc(env(safe-area-inset-top) + 6px); z-index: 60;
  background: rgba(9,20,34,.94); color: #dbe8f5; border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 13px; font-size: 12px; line-height: 1.4; pointer-events: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mmode #mgTicket #billingProducts { gap: 10px; }
/* 17K9: 拡大(scale)はぼやけ・はみ出しの原因になるためやめ、実寸で押しやすい大きさにする。 */
body.mmode #mgTicket .tkchip { transform: none; margin: 0; min-width: 52px; min-height: 48px; padding: 6px 10px 7px; }
body.mmode #mgTicket .tkchip .tk-ic { font-size: 16px; }
body.mmode #mgTicket .tkchip .tk-ct { font-size: 18px; }
/* 17ADL/17ADM: コマンド／はこったー／メニューは、巨大なボトムシートをGPUで上下させず、
   下部ナビと資源バーを共有する独立した全画面ページとして即時切替する。
   display:none は再表示時に長い内容の全レイアウトをやり直すため使わず、描画状態を保持したまま休止する。 */
body.mmode .msheet { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 239;
  bottom: calc(var(--mnavh) + var(--mresh)); max-height: none;
  visibility: hidden; pointer-events: none; content-visibility: hidden; overflow: hidden; background: var(--bg);
  border: none; border-radius: 0; box-shadow: none;
  padding: max(4px, env(safe-area-inset-top)) 0 0; transform: none; transition: none; }
body.mmode .msheet.open { visibility: visible; pointer-events: auto; content-visibility: visible; }
/* ページ表示中は背面の巨大な地図を合成・描画対象から外す。DOMと選択状態はそのまま保持する。 */
body.mmode.msheet-open .grid2 { visibility: hidden; pointer-events: none; content-visibility: hidden; }
/* 各ページの固定見出し。戻る矢印または下部の「マップ」から即座に地図へ戻れる。 */
body.mmode .msheet .mgrip { position: absolute; top: max(4px, env(safe-area-inset-top)); left: 0; right: 0;
  z-index: 2; width: 100%; min-height: 48px; padding: 10px 14px; margin: 0;
  cursor: pointer; touch-action: manipulation; text-align: left; color: #eaf3fb; font-size: 16px; font-weight: 600;
  background: rgba(10,25,42,.98); border: none; border-bottom: 1px solid var(--border-strong); display: flex;
  align-items: center; gap: 10px; }
body.mmode .msheet .mgrip::before { content: "‹"; color: #8fdcff; font-size: 28px; font-weight: 400; line-height: 1; }
body.mmode .msheet .mgrip::after { content: attr(data-title); }
/* 各タブを別々のスクロールページにする。切替時に共通コンテナのscrollTopを書き換えないため、
   長いはこったー／メニューの同期レイアウトが発生せず、各ページの閲覧位置もそのまま残る。 */
body.mmode .msheet .mgroup { position: absolute; top: calc(max(4px, env(safe-area-inset-top)) + 48px);
  left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 10px 18px; visibility: hidden; pointer-events: none; content-visibility: hidden; }
body.mmode .msheet .mgroup.on { visibility: visible; pointer-events: auto; content-visibility: visible; }
body.mmode .m-surface-loading { min-height: 54px; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: #9fc0dd; font-size: 13px; }
body.mmode .m-surface-loading span { width: 16px; height: 16px; border: 2px solid rgba(143,220,255,.25);
  border-top-color: #8fdcff; border-radius: 50%; animation: mSurfaceSpin .65s linear infinite; }
@keyframes mSurfaceSpin { to { transform: rotate(360deg); } }
body.mmode .msheet .panel { margin-bottom: 8px; }
body.mmode .msheet .leftcol, body.mmode .msheet .chatcol { display: block; }
/* 17AOH: コマンド／メニューの長いパネルは、画面に入るまで描画しない。 */
body.mmode #mgOps .leftcol > .panel,
body.mmode #mgInfo > .panel { content-visibility: auto; contain-intrinsic-size: auto 280px; }
/* 17ACZ: 長いはこったーは画面外の投稿をブラウザに描画させない。
   iOS/Androidのスクロール中に smooth の追加アニメーションを重ねない。非対応端末は通常描画へ自然にフォールバックする。 */
body.mmode .ht-post { content-visibility: auto; contain-intrinsic-size: auto 126px; }
body.mmode .hakotter .chatlog { scroll-behavior: auto; overscroll-behavior: contain; }
/* 情報タブに入れた上部メニュー行（遊び方/図鑑/ルール/掲示板/ヘルプ/BGM/ログイン・設定）を折り返し表示 */
body.mmode #mgInfo .row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 2px 10px; }
/* 情報タブに移したターン情報（turn / 本日の更新時刻 / カウントダウン）を見出し付きで表示 */
body.mmode #mgInfo .turninfo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 8px 2px 10px; border-bottom: 1px solid var(--border-2); }
body.mmode #mgInfo .turninfo::before { content: "🕒 ターン情報"; flex-basis: 100%;
  font-weight: 500; font-size: 13px; color: #9fc0dd; margin-bottom: 2px; }
/* ターン情報を抜いた上部の島名バナー行（.topline）は詰める */
body.mmode #statusPanel .topline .turninfo { margin-left: 0; }
/* 17NR: マップから外した凡例は☰メニュータブの末尾に置く（見出し付き） */
body.mmode #mgInfo #legend { margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--border-2); }
body.mmode #mgInfo #legend::before { content: "🗺 マップの凡例"; flex-basis: 100%;
  font-weight: 500; font-size: 13px; color: #9fc0dd; margin-bottom: 2px; }

/* 17AOH: マス操作はタップ位置の上に小さく浮かせず、親指が届く画面下の操作シートにする。 */
body.mmode #cellmenu { position: fixed !important;
  bottom: calc(var(--mnavh) + var(--mresh) + 8px); left: 8px !important; right: 8px !important;
  top: auto !important; width: auto !important; min-width: 0; max-width: none;
  max-height: min(64dvh, calc(100dvh - var(--mnavh) - var(--mresh) - 24px)) !important;
  z-index: 243; border-radius: 15px 15px 10px 10px; overscroll-behavior: contain;
  box-shadow: 0 -8px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(143,220,255,.12); }
body.mmode #cellmenu .hd { position: sticky; top: 0; z-index: 3; border-radius: 14px 14px 0 0; }

/* ===== タッチ端末の操作性（指で押しやすいタップ領域） ===== */
/* 画面幅ではなく入力方式(coarse=指)で判定するので、スマホ/タブレットに広く効きPCには影響しない。 */
@media (pointer: coarse) {
  /* マスや艦をタップした時のメニュー: 項目・見出しを大きく、文字も詰まらない大きさに。 */
  /* 17K9: 大きすぎ対策——文字は15pxに抑え、幅は画面内(最大360px)、高さはJS側で画面の約6割に制限。
     タップ領域は44px以上を維持（iOS/Androidのガイドライン準拠）。 */
  #cellmenu { min-width: 232px; font-size: 15px; max-height: 60vh; max-height: 60dvh;
    max-width: min(92vw, 360px); }
  #cellmenu .it { padding: 10px 12px; min-height: 44px; align-items: center; }
  #cellmenu .it .why { font-size: 11.5px; }
  #cellmenu .it .cm-command-note17avx { font-size: 11.5px; }
  #cellmenu .hd { padding: 8px 10px; font-size: 14.5px; }
  #cellmenu .hd .cm-x { width: 36px; height: 36px; font-size: 17px; }
  #cellmenu .hd .cm-pin { width: 36px; height: 36px; font-size: 16px; }
  #cellmenu .hd .cm-tile { width: 30px; height: 30px; }
  #cellmenu .cm-stack-list { gap: 7px; padding: 8px 10px; }
  #cellmenu .cm-stack-detail { min-height: 38px; padding: 7px 10px; font-size: 12.5px; }
  #cellmenu .sep { margin: 4px 0; }
  #cellmenu .tkq { min-width: 44px; min-height: 40px; }
  /* 移動先の説明バー・キャンセルなどマップ下の操作ボタンも押しやすく。 */
  #moveBar { padding: 10px 12px; }
  #moveBar button { min-height: 42px; padding: 8px 14px; }
  /* 17AED: スマホの移動バーは通常の並びに戻す。フロートは航続T・戦術チケットの
     艦カードを覆い、Androidの拡大表示で操作不能にしていた。マップの高さは変えず、重なりだけを無くす。 */
  body.mmode #mapPanel { position: relative; }
  body.mmode #moveBar { position: static; z-index: auto;
    margin: 0 0 8px; background: rgba(10,20,33,.96); border: 1px solid var(--border-strong);
    border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.55); padding: 10px 12px; }
  body.mmode #moveBar #moveBarText { flex: 1 1 100%; font-size: 13.5px; margin-bottom: 2px; }
  /* 🔴 17BA1: 案内は2行ぶんの高さに固定。1回目のタップで文が1行に縮むと地図が上へずれ、
     同じ所をもう一度タップしても隣のマスを選び直していた（「もう一度タップで確定」が外れる） */
  body.mmode #moveBar #moveBarText { flex: 1 1 100%; min-height: 2.8em; max-height: 2.8em; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  body.mmode #moveBar #moveConfirmBtn { flex: 1 1 auto; min-height: 48px; font-size: 15px; font-weight: 600; }
  body.mmode #moveBar #moveCancelBtn { flex: 0 0 auto; min-height: 48px; }
  #fcTickets .tkactive { flex: 1 1 100%; display: block; padding: 7px 9px; border: 1px solid rgba(255,215,106,.48);
    border-radius: 9px; background: rgba(91,64,8,.34); color: #ffe9a8; line-height: 1.45; }
  /* ボトムシート内の主要ボタン（コマンド予約・外交など）と下部ナビは指で押しやすい高さに。 */
  body.mmode .mnav { height: calc(62px + env(safe-area-inset-bottom)); }
  body.mmode .mnav button { font-size: 12px; }
  body.mmode .mnav button .ic { font-size: 23px; }
  body.mmode .msheet .b1, body.mmode .msheet .b2, body.mmode .msheet .b3 { min-height: 42px; }
  /* 17RL: 見出しの中の小さな更新ボタンは対象外。42px にすると💬チャットの見出しが
     2倍近くに膨らみ、スマホでいちばん惜しい縦の余白を食う（タップ領域は十分にある）。 */
  body.mmode .msheet h2 .chatreload { min-height: 0; }
  /* ズームの＋/−ボタンも大きめのタッチ領域に。 */
  .mapzoom button { min-width: 40px; min-height: 40px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .mapchanges { animation: none; } }

/* 同盟ページ（17JL）: 規約の表示枠 */
#allianceModal .al-charter { background: rgba(10,22,38,.6); border: 1px solid #24405f; border-radius: 8px;
     padding: 8px 10px; white-space: normal; line-height: 1.6; font-size: 13px; }
#allianceModal .alh { font-weight: 500; color: #cfe3f5; margin: 6px 0 4px; }
/* 🔴 17B02 同盟マーク。海域でひとつだけの1文字。盟主が候補から選ぶ。 */
#allianceModal .al-mark-now { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
#allianceModal .al-mark-glyph { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid #3f6f9c; background: rgba(14,32,54,.9);
  color: #ffe9a8; font-size: 20px; font-weight: 700; line-height: 1; text-shadow: 0 0 10px rgba(255,214,120,.35); }
#allianceModal .al-mark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px; margin: 4px 0; }
#allianceModal .al-mark { height: 38px; border-radius: 9px; border: 1px solid #2c4b6c; background: #0f2036;
  color: #dcecfb; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
#allianceModal .al-mark:hover:not(:disabled) { border-color: #6fb2ec; background: #14304f; }
#allianceModal .al-mark.on { border-color: #ffd76a; color: #ffe9a8; background: #1c2f28;
  box-shadow: 0 0 0 1px rgba(255,215,106,.45) inset; }
#allianceModal .al-mark.taken { opacity: .32; cursor: not-allowed; }
@media (max-width: 420px) { #allianceModal .al-mark-grid { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); } }
/* 🎨 17B05 マークの色。盟主が選ぶ。⚠️ 色数は 17RI の予約色を避けた6色から増やさないこと。 */
#allianceModal .al-color-grid { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 2px; align-items: center; }
#allianceModal .al-color { width: 34px; height: 34px; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid #2c4b6c; background: #0f2036; display: inline-flex; align-items: center; justify-content: center; }
#allianceModal .al-color span { display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--alcol, #888); box-shadow: 0 0 8px var(--alcol, #888); }
#allianceModal .al-color:hover { border-color: #6fb2ec; }
#allianceModal .al-color.on { border-color: #ffd76a; box-shadow: 0 0 0 1px rgba(255,215,106,.45) inset; }
#allianceModal .al-color.auto { width: auto; padding: 0 12px; font: inherit; font-size: 12.5px; color: #bcd9f7; }

/* 外交パネルの3分割（17JN: 同盟・友好・宣戦布告の折りたたみ） */
#diploBody details.dsec { margin: 2px 0 6px; border: 1px solid #24405f; border-radius: 8px; padding: 2px 8px 4px; }
#diploBody details.dsec > summary { cursor: pointer; font-weight: 500; color: #cfe3f5; padding: 5px 2px; user-select: none; }
#diploBody details.dsec > summary:hover { color: #eaf3fb; }
#diploBody details.dsec[open] > summary { border-bottom: 1px dashed #24405f; margin-bottom: 4px; }

  /* 17MU: チケットショップ・ポップアップ（🎫パネルの置き換え）／17MW: プレミアム調に刷新
     深紺×金の「海軍工廠」調。カテゴリ別アクセント(--sacc)・ホバーで浮くカード・金の購入ボタン。 */
  .shop-ov { position: fixed; inset: 0; z-index: 300;
    background: radial-gradient(120% 120% at 50% 0%, rgba(8,18,34,.62), rgba(2,6,14,.88));
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
  .shop-ov .shop-box { width: min(860px, 100%); max-height: 92vh; display: flex; flex-direction: column;
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(47,109,240,.13), transparent 60%),
      linear-gradient(180deg, #101f34, #0a1524 58%, #0c1a2c);
    border: 1px solid rgba(255,207,90,.42); border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(8,16,32,.9), 0 24px 70px rgba(0,0,0,.65), 0 0 44px rgba(47,109,240,.16);
    overflow: hidden; }
  .shop-ov .shop-hd { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 20px 13px;
    background: linear-gradient(90deg, rgba(122,13,30,.30), rgba(20,36,60,.35) 45%, rgba(232,163,58,.18));
    border-bottom: 1px solid rgba(255,207,90,.36); }
  .shop-ov .shop-hd::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,215,106,.85), transparent); }
  .shop-ov .shop-hd .shop-em { font-size: 24px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
  .shop-ov .shop-ttl { display: flex; flex-direction: column; gap: 1px; }
  .shop-ov .shop-hd h2 { font-size: 19px; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
    margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; display: block;
    background: linear-gradient(90deg, #ffe6ad, #ffd76a 45%, #f3b13c);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .shop-ov .shop-sub { font-size: 9.5px; font-weight: 600; letter-spacing: .32em; color: #8fa6bd; }
  .shop-ov .shop-x { margin-left: auto; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; background: rgba(10,20,36,.6); color: #cdd9e6; font-size: 16px; cursor: pointer;
    transition: background .15s, color .15s; }
  .shop-ov .shop-x:hover { background: #22364f; color: #fff; }
  .shop-ov .shop-bal { margin: 14px 18px 2px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(24,42,68,.85), rgba(15,28,47,.85));
    border: 1px solid rgba(120,160,210,.26); border-radius: 13px; padding: 11px 15px;
    font-size: 13px; color: #dbe7f3; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  .shop-ov .shop-bal b { color: #ffd76a; font-size: 15px; }
  .shop-ov .shop-bal .sp { color: #9fb6cd; font-size: 12px; }
  .shop-ov .shop-bal .sp b { color: #bfe0ff; font-size: 12.5px; }
  .shop-ov .shop-bal .acc { margin-left: auto; color: #9fb6cd; font-size: 12px; }
  .shop-ov .shop-bal .acc b { color: #eaf3fb; font-size: 12.5px; }
  .shop-ov .shop-disc { margin: 8px 18px 0; font-size: 12px; color: #ffe9c2;
    background: linear-gradient(90deg, rgba(232,163,58,.16), rgba(255,215,106,.07));
    border: 1px solid rgba(255,207,90,.38); border-radius: 11px; padding: 8px 13px; }
  .shop-ov .shop-disc b { color: #ffd76a; }
  .shop-ov .shop-body { overflow: auto; padding: 8px 18px 18px; }
  /* 17ABH: 使える支払い方法の案内（購読の枠とチケットの枠のあいだ）。 */
  .shop-ov .shop-pay { display: flex; gap: 9px; align-items: center; margin-top: 16px; padding: 9px 12px;
    border: 1px solid #2f5a8f; border-radius: 10px; background: rgba(47,90,143,.16);
    font-size: 12.5px; line-height: 1.6; color: #cfe0f2; }
  .shop-ov .shop-pay-ic { font-size: 17px; flex: none; }
  .shop-ov .shop-pay-sub { opacity: .75; }
  .shop-ov .shop-sec { margin-top: 16px; --sacc: #7db4ff; }
  .shop-ov .shop-sec h3 { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600;
    color: #eaf3fb; margin: 0 2px 10px; }
  .shop-ov .shop-sec h3::before { content: ''; width: 4px; height: 16px; border-radius: 3px; flex: none;
    background: var(--sacc); box-shadow: 0 0 10px var(--sacc); }
  .shop-ov .shop-sec h3::after { content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--sacc), transparent); opacity: .3; }
  .shop-ov .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .shop-ov .shop-card { position: relative; overflow: hidden;
    background: linear-gradient(180deg, #162942, #101f35);
    border: 1px solid rgba(120,160,210,.22); border-radius: 14px;
    padding: 12px 12px 11px; display: flex; flex-direction: column; gap: 7px;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
  .shop-ov .shop-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--sacc), transparent 85%); opacity: .85; }
  .shop-ov .shop-card:hover { transform: translateY(-3px); border-color: var(--sacc);
    box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 18px -3px var(--sacc); }
  .shop-ov .shop-card.prem { background: linear-gradient(180deg, #1b2c4a, #131f38);
    border-color: rgba(255,207,90,.28); }
  .shop-ov .sc-ic { width: 46px; height: 46px; border-radius: 12px; flex: none;
    background: radial-gradient(120% 120% at 30% 20%, #144770, #0a2740 72%);
    border: 1px solid rgba(140,190,255,.25);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    box-shadow: inset 0 0 14px rgba(80,160,255,.22); }
  .shop-ov .sc-ic img { width: 38px; height: 38px; image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
  .shop-ov .sc-badge { position: absolute; top: 9px; right: 10px; font-size: 10.5px; font-weight: 600;
    color: #9fe0c0; background: rgba(23,64,47,.78); border: 1px solid #2f6f52; border-radius: 999px;
    padding: 2px 9px; }
  .shop-ov .sc-badge b { color: #c8ffe0; }
  .shop-ov .sc-badge.zero { color: #8fa6bd; background: rgba(28,44,66,.72); border-color: #33465f; }
  .shop-ov .sc-badge.zero b { color: #b6c6d8; }
  .shop-ov .sc-nm { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #f2f7fc; }
  .shop-ov .sc-ds { font-size: 11px; color: #a7bdd4; line-height: 1.5; flex: 1; }
  .shop-ov .sc-hold { font-size: 11px; color: #ffd76a; font-weight: 500; }
  .shop-ov .sc-note { font-size: 10.5px; color: #8fa6bd; line-height: 1.45; }
  .shop-ov .sc-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
  .shop-ov .sc-use { border: 1px solid #2f8f62; background: linear-gradient(180deg, #1b5038, #143b29);
    color: #d9ffe9; border-radius: 10px; font-weight: 600; font-size: 12px; padding: 7px 13px;
    cursor: pointer; transition: filter .15s; }
  .shop-ov .sc-use:hover { filter: brightness(1.15); }
  .shop-ov .sc-buy { border: none; background: linear-gradient(90deg, #e8a33a, #ffd76a); color: #3a1206;
    margin-left: auto; border-radius: 10px; font-weight: 700; font-size: 12px; padding: 8px 13px;
    cursor: pointer; box-shadow: 0 3px 10px rgba(232,163,58,.32); transition: filter .15s, box-shadow .15s; }
  .shop-ov .sc-buy:hover { filter: brightness(1.07); box-shadow: 0 4px 14px rgba(232,163,58,.5); }
  .shop-ov .shop-single-build { --sacc:#ffd76a; border:1px solid rgba(255,215,106,.3); border-radius:14px; padding:12px; background:linear-gradient(135deg,rgba(255,215,106,.08),rgba(88,184,255,.05)); }
  .shop-ov .shop-product-focus { border-color:#ffd76a!important; box-shadow:0 0 0 2px rgba(255,215,106,.5),0 0 30px rgba(255,199,64,.55)!important; animation:shopProductFocus .9s ease-in-out 3; }
  @keyframes shopProductFocus { 50% { transform:translateY(-4px) scale(1.015); filter:brightness(1.18); } }
  .upd-shop-cta { display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:9px 15px;border:1px solid #ffe08a;border-radius:999px;background:linear-gradient(90deg,#9a5712,#f0b93f,#ffe596);color:#321700!important;font-weight:700;text-decoration:none;box-shadow:0 4px 16px rgba(255,190,58,.35); }
  .upd-shop-cta:hover { filter:brightness(1.08);transform:translateY(-1px); }
  .shop-ov .sc-buy.off { background: #33465f; color: #9fb6cd; cursor: default; box-shadow: none; }
  .shop-ov .shop-foot { font-size: 10.5px; color: #8fa6bd; line-height: 1.5; padding: 10px 18px;
    border-top: 1px solid rgba(255,207,90,.18); background: #0c1727; }
  .shopOpenBtn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 14px; border: 1px solid rgba(255,207,90,.55); border-radius: 13px;
    background: linear-gradient(135deg, #17335c, #0f2444 55%, #2c1a12);
    color: #ffe9bd; font-weight: 600; font-size: 15px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.35), inset 0 0 18px rgba(255,207,90,.07); }
  /* 17AB6: `left` の移動をやめ、ボタン幅いっぱいの帯の中を transform: translateX で流す
     （translateX の % は自分の幅＝ボタン幅が基準なので、どの幅でも同じ速さ・同じ通り道になる）。 */
  .shopOpenBtn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255,235,180,.32) 50%, transparent 60%);
    transform: translateX(-100%); animation: shopSheen 3.4s ease-in-out infinite; }
  @keyframes shopSheen { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
  .shopOpenBtn:hover { filter: brightness(1.1); }
  @media (prefers-reduced-motion: reduce) {
    .shopOpenBtn::after { animation: none; }
    .shop-ov .shop-card, .shop-ov .shop-card:hover { transition: none; transform: none; }
  }
  /* 17MX: パネルの2ボタン（🎫チケット=所持の確認・使用 / 🛒ショップ=購入専用） */
  .tkShopBtns { display: flex; gap: 9px; }
  /* 17QC: 2ボタン並びでは幅が足りず「🛒 かいせんショップ」の末尾が切れていた
     （.shopOpenBtn は光沢アニメのため overflow:hidden＝はみ出した字が消える）。
     文字を1行のまま少しだけ詰めて必ず収まるようにする。 */
  /* 17QC: 2ボタン並びでは幅が足りず「🛒 かいせんショップ」の末尾が切れていた
     （.shopOpenBtn は光沢アニメのため overflow:hidden＝はみ出した字が消える）。
     ラベルが長いほうへ幅を多く配り（flex 1.5 : 1）、1行のまま必ず収まるようにする。 */
  .tkShopBtns .shopOpenBtn { width: auto; flex: 1.5; padding: 13px 6px; font-size: 14px;
    white-space: nowrap; letter-spacing: -.01em; gap: 5px; }
  .tkOpenBtn { flex: 1; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 8px; border: 1px solid #3f6fa0; border-radius: 13px;
    background: linear-gradient(135deg, #14314f, #10263f 60%, #0f2d33);
    color: #d9ecff; font-weight: 600; font-size: 14.5px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.3); }
  .tkOpenBtn:hover { filter: brightness(1.12); }
  /* 17MY: チケット消費コメントのポップアップ（画面上部中央・自動で消える） */
  .tkuse-pop { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 340;
    max-width: min(500px, 92vw); padding: 12px 20px; border-radius: 14px; cursor: pointer;
    background: linear-gradient(160deg, #2c1a10, #1a0f0a 60%, #241408);
    border: 1.5px solid #ffcf5a; box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 26px rgba(232,163,58,.35);
    animation: tkupIn .3s cubic-bezier(.2,.9,.3,1.3); text-align: center; }
  .tkuse-pop.out { opacity: 0; transform: translateX(-50%) translateY(-10px); transition: opacity .5s, transform .5s; }
  .tkuse-pop .tkup-ttl { font-weight: 700; font-size: 15.5px; color: #ffd76a; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .tkuse-pop .tkup-sub { margin-top: 4px; font-size: 12px; color: #e8dcc8; line-height: 1.55; }
  @keyframes tkupIn { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.92); } }
  @media (prefers-reduced-motion: reduce) { .tkuse-pop { animation: none; } }
  @media (max-width: 760px) { .tkuse-pop { top: 54px; } }
  /* 17MX: チケットポップアップ（所持一覧）はショップよりひと回り小さく */
  .shop-ov .shop-box.tk-pop { width: min(700px, 100%); }
  .shop-ov .tkpop-empty { padding: 34px 12px; text-align: center; color: #8fa6bd; font-size: 13px; line-height: 2; }
  @media (max-width: 760px) {
    .shop-ov { padding: 8px; }
    .shop-ov .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .shop-ov .shop-bal .acc { margin-left: 0; width: 100%; }
  }
  @media (max-width: 420px) { .shop-ov .shop-grid { grid-template-columns: 1fr; } }
  /* 17N4: スマホでは ショップ/チケットポップアップを「画面下から出るシート」型に。
     片手の親指で届き、ゲームの他のモバイルUI（下部シート）と操作感が揃う。 */
  body.mmode .shop-ov { align-items: flex-end; padding: 0;
    /* 17N6: シートは下部ナビの上で止める＝ナビが見え、🎫タブの再タップで閉じられる（ハイライト・枚数バッジも見える） */
    bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.mmode .shop-ov .shop-box { width: 100%; max-width: none; max-height: 88vh; max-height: 88dvh;
    border-radius: 18px 18px 0 0; border-bottom: none; animation: shopSheetUp .22s ease-out; }
  @keyframes shopSheetUp { from { transform: translateY(28px); opacity: .55; } to { transform: none; opacity: 1; } }
  body.mmode .shop-ov .shop-box.tk-pop { width: 100%; }
  body.mmode .shop-ov .shop-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body.mmode .shop-ov .shop-x { width: 40px; height: 40px; font-size: 18px; }
  body.mmode .shop-ov .sc-use, body.mmode .shop-ov .sc-buy { padding: 11px 16px; font-size: 13.5px; min-height: 44px; }
  body.mmode .tkShopBtns { gap: 10px; }
  /* 17QC: スマホでも2ボタンが1行に収まるように（15pxでは「かいせんショップ」の末尾が
     切れていた＝.shopOpenBtn は光沢アニメのため overflow:hidden）。 */
  body.mmode .tkShopBtns .tkOpenBtn, body.mmode .tkShopBtns .shopOpenBtn { min-height: 52px; font-size: 13.5px; }
  body.mmode .tkShopBtns .tkOpenBtn { padding-left: 6px; padding-right: 6px; }
  body.mmode .tkShopBtns .shopOpenBtn { flex: 1.6; padding-left: 4px; padding-right: 4px;
    letter-spacing: -.02em; gap: 4px; }
  @media (prefers-reduced-motion: reduce) { body.mmode .shop-ov .shop-box { animation: none; } }
  /* 17N6: シートのグリップ（下へなぞって閉じられる目印）＋ドラッグ追従・🎫タブの所持枚数バッジ */
  body.mmode .shop-ov .shop-box { transition: transform .18s ease-out; }
  body.mmode .shop-ov .shop-hd { padding-top: 20px; touch-action: none; }
  body.mmode .shop-ov .shop-hd::before { content: ''; position: absolute; top: 7px; left: 50%;
    transform: translateX(-50%); width: 44px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.30); }
  .mnav button { position: relative; }
  .mnav-tkn { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: linear-gradient(90deg, #e8a33a, #ffd76a); color: #2a1c05;
    font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
  /* 17N5: スマホ軽量化 — 高コストな装飾を一括で落とす（見た目への影響は最小限）。
     ①backdrop-filter(背景ぼかし)は全面禁止: 常時再描画されるマップの上に重なると、モーダルを開くたび
       毎フレームぼかし合成が走りタップ応答まで巻き込んで固まる（マスメニューは blur(10px) だった）。
       各オーバーレイは元々 rgba の暗幕を持つので、ぼかしが無くても視認性は保たれる。
     ②大面積のbox-shadowを毎フレーム動かす無限アニメ（金ポップアップの鼓動グロー・シーズンポップアップ）
       と、光沢スイープ・ツリーの揺れなど常時アニメを停止（1回きりの出現アニメは残す）。 */
  @media (max-width: 760px) {
    * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .launch-box.launch-gold { animation: launchPop .35s cubic-bezier(.2,1.2,.35,1); }
    .launch-box.launch-gold .launch-title { animation: none; }
    #shufModal .upd-box { animation: none !important; }
    #shufModal .upd-box div { animation: none !important; } /* タイトルのきらめき（インラインstyle）も停止 */
    .shopOpenBtn::after { animation: none; display: none; }
    .prm-badge::after, .prmshine, .prm-pop::after { animation: none !important; }
    .cell img.top { animation: none !important; }           /* 木の揺れ（多数の常時アニメ）を停止 */
    .latestnews.big { animation: none; }
    .upd-ov .upd-x { width: 42px; height: 42px; font-size: 19px; } /* 閉じる✕を指サイズに */
    #shufModal .upd-x { min-width: 42px; min-height: 42px; }
  }

  /* ---------- 17NT 島の年代記（全ターン・永久アーカイブ） ---------- */
  /* 右カラムの小さな案内パネル（購読状況＋入口） */
  #archivePanel .arc-p { display: flex; flex-direction: column; gap: 4px; }
  .arc-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .arc-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
  .arc-badge.on { background: rgba(67,209,127,.16); color: #6ee7a5; border: 1px solid rgba(67,209,127,.42); }
  .arc-badge.off { background: rgba(150,160,170,.14); color: #a8b6c4; border: 1px solid rgba(150,160,170,.36); }
  .arc-figs { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #8fb0cc; }
  .arc-figs b { color: #cfe3f5; }

  /* 全画面オーバーレイ（マップ＋タイムライン＋成長グラフ）。z-index は .upd-ov(250) と同じ帯。 */
  .arc-ov { position: fixed; inset: 0; z-index: 255; background: rgba(4,10,18,.72);
    display: flex; align-items: center; justify-content: center; padding: 14px; }
  .arc-ov .arc-box { width: min(1160px, 98vw); height: min(860px, 94vh); display: flex; flex-direction: column;
    background: var(--panel-3); border: 1px solid var(--head-border); border-radius: var(--radius-l);
    box-shadow: var(--shadow-modal); overflow: hidden; }
  .arc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #24405f; flex-wrap: wrap; }
  .arc-title { font-weight: 600; font-size: 16px; color: #eaf3fb; }
  .arc-head select { max-width: 44vw; }
  /* .grow は #tutorial 配下にしか定義が無いので、ここで自前に持つ（✕を右端へ寄せる隙間） */
  .arc-head .grow { flex: 1 1 auto; }
  .arc-meta { font-size: 12px; color: #8fb0cc; }
  .arc-x { width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-s);
    background: #2a3b53; color: #cdd9e6; font-size: 15px; cursor: pointer; }
  .arc-x:hover { background: #3a4f6e; }
  .arc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 1fr); gap: 10px; padding: 10px; }
  .arc-left, .arc-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  /* 17P6: 盤面はライブと同じ実画像タイルで描くので、下地もライブのマップ(#mapstage)と同じ海色にする
     （島の外＝外洋のマスは描かないため、この背景がそのまま「海が続く」表現になる）。 */
  .arc-mapwrap { position: relative; flex: 1; min-height: 200px;
    background: linear-gradient(160deg, #1d69a8, #124a7c);
    border: 1px solid var(--border-2); border-radius: var(--radius-m); overflow: hidden; }
  .arc-mapwrap canvas { display: block; }
  /* 年代記の盤面タイル層。中の .cell / .til は styles.css のライブ用の指定をそのまま使う。 */
  .arc-tiles { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .arc-tiles .arc-t, .arc-tiles .arc-f { position: absolute; left: 0; top: 0; }
  .arc-tiles .arc-f { z-index: 1; }
  /* 過去の盤面なので艦は滑走させない（コマ送りで無関係な艦のあいだを滑って見えるため） */
  .arc-tiles .cell.fleet { transition: none; }
  /* 他島の艦（＝当時攻め込まれていた艦）。実画像だと敵味方が付かないので赤い縁で区別する。 */
  .arc-tiles .cell.fleet.arc-foe { box-shadow: inset 0 0 0 2px rgba(224,64,47,.9); }
  /* 17QU: 重なったマス（航空機・水上艦・潜水艦の同居）のしるし。
     年代記・来歴は自動再生と動画書き出しがあるのでライブの1秒交互だけに頼れない。
     停止中は交互表示、再生中・録画中はこのしるしだけで「下にもいる」ことを伝える。
     ⚠️ **この指定は styles.css（年代記）と history.html（来歴）の2か所にある。**
        来歴ページは styles.css を読まないので写しが要る。直すときは必ず両方。
     ※ .cell を付けないのは、六角のクリップに切られて角のチップが欠けるのを避けるため。 */
  .pst-stk { position: absolute; pointer-events: none; z-index: 2; }
  .pst-stk b { position: absolute; right: 6%; top: 4%;
    min-width: 44%; height: 44%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(11,22,34,.82); border: 1px solid rgba(226,238,250,.9);
    color: #eaf3fb; font-size: 11px; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: auto; }   /* しるしの上だけホバーを通す（説明のツールチップを出すため） */
  .arc-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 12px; padding: 16px; text-align: center; overflow-wrap: anywhere;
    background: rgba(11,22,34,.55); color: #cfe3f5; font-size: 13px; font-weight: 500; pointer-events: none; }
  .arc-retry17arn { pointer-events: auto; flex: 0 0 auto; }
  .arc-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .arc-ctl button { background: #22364e; color: #dbe8f5; border: 1px solid var(--border-2);
    border-radius: var(--radius-s); padding: 5px 10px; cursor: pointer; font-size: 13px; }
  .arc-ctl button:hover { background: #2d4664; }
  .arc-ctl button:disabled { opacity: .45; cursor: default; }
  .arc-ctl button.play { min-width: 78px; font-weight: 600; }
  /* 17P9 再生速度。押した瞬間から効く（再生中・録画中も）。 */
  .arc-spd { display: inline-flex; gap: 0; border: 1px solid var(--border-2); border-radius: var(--radius-s); overflow: hidden; }
  .arc-ctl .arc-spd button { border: none; border-left: 1px solid var(--border-2); border-radius: 0;
    padding: 5px 9px; font-size: 12.5px; font-family: var(--font-num); font-variant-numeric: tabular-nums; background: #1b2c40; color: #8fb0cc; }
  .arc-ctl .arc-spd button:first-child { border-left: none; }
  .arc-ctl .arc-spd button.on { background: var(--accent); color: #06121f; font-weight: 600; }
  .arc-ctl button.vid { margin-left: auto; font-weight: 500; }
  .arc-ctl button.vid.on { background: var(--accent); border-color: var(--accent); color: #06121f; }

  /* ---------- 17P9 目盛り付きタイムライン ---------- */
  /* つまみだけのスライダーでは「いま何日目か」が読めなかったので、下に実際の日付を並べる。
     日付は押すとその日へ飛ぶ。動画パネルを開くと ▲▲ の範囲ハンドルが出る。 */
  .arc-tl { position: relative; padding: 2px 2px 0; }
  .arc-tl.busy { opacity: .6; pointer-events: none; }
  .arc-tl-bar { position: relative; height: 26px; cursor: pointer; touch-action: none; outline: none; }
  .arc-tl-bar:focus-visible .arc-tl-head { box-shadow: 0 0 0 3px rgba(120,200,255,.5); }
  .arc-tl-rail { position: absolute; left: 0; right: 0; top: 11px; height: 5px; border-radius: 3px;
    background: #1b2c40; border: 1px solid var(--border-2); }
  .arc-tl-fill { position: absolute; left: 0; top: 11px; height: 5px; border-radius: 3px;
    background: linear-gradient(90deg, #2a6fb0, #58b6f0); pointer-events: none; }
  /* 動画にする範囲 */
  .arc-tl-sel { position: absolute; top: 8px; height: 11px; border-radius: 3px;
    background: rgba(255,207,58,.28); border: 1px solid rgba(255,207,58,.75); pointer-events: none; }
  .arc-tl-ticks { position: absolute; left: 0; right: 0; top: 17px; height: 9px; pointer-events: none; }
  .arc-tl-ticks i { position: absolute; top: 0; width: 1px; height: 4px; background: #37536f; }
  .arc-tl-ticks i.on { height: 8px; background: #5c7f9f; }
  .arc-tl-head { position: absolute; top: 6px; width: 13px; height: 15px; margin-left: -6.5px;
    border-radius: 3px; background: #eaf3fb; border: 1px solid #0b1622;
    box-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }
  .arc-tl-h { position: absolute; top: 3px; width: 0; height: 0; margin-left: -6px;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 9px solid #ffcf3a; pointer-events: none; }
  .arc-tl-labs { position: relative; height: 15px; margin-top: 1px; }
  .arc-tl-labs b { position: absolute; top: 0; font-size: 10.5px; font-weight: 500; color: #8fb0cc;
    white-space: nowrap; cursor: pointer; padding: 0 2px; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .arc-tl-labs b:hover { color: #eaf3fb; text-decoration: underline; }
  /* ドラッグ中の日付の吹き出し */
  .arc-tl-bub { position: absolute; bottom: 100%; margin-bottom: 2px; z-index: 2;
    background: #0b1622; border: 1px solid var(--accent); border-radius: var(--radius-s);
    padding: 3px 8px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-modal); }
  .arc-tl-bub b { display: block; font-size: 12.5px; font-weight: 600; color: #eaf3fb; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .arc-tl-bub span { font-size: 10.5px; color: #8fb0cc; }

  /* ---------- 17P9 動画パネル ---------- */
  .arc-vid { display: flex; flex-direction: column; gap: 6px; background: var(--panel-2);
    border: 1px solid var(--border-2); border-radius: var(--radius-m); padding: 8px; }
  .arc-vid[hidden] { display: none; }
  .arc-vid-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #cfe3f5; }
  .arc-vid-row.end { justify-content: flex-end; }
  .arc-vid-row .k { flex: 0 0 34px; font-size: 11px; font-weight: 600; color: #7f9dba; }
  .arc-vid-row .muted { font-size: 11.5px; }
  .arc-vid-row button { background: #22364e; color: #dbe8f5; border: 1px solid var(--border-2);
    border-radius: var(--radius-s); padding: 5px 10px; cursor: pointer; font-size: 12.5px; }
  .arc-vid-row button:hover { background: #2d4664; }
  .arc-vid-row button:disabled { opacity: .45; cursor: default; }
  .arc-vid-row button.go { background: var(--accent); border-color: var(--accent); color: #06121f; font-weight: 600; }
  .arc-vid-rg { font-size: 12px; color: #cfe3f5; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .arc-vid-rg b { color: #ffcf3a; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .arc-vid-rg .d { font-size: 11px; color: #7f9dba; }
  .arc-vid-st { flex: 1; min-width: 0; font-size: 11.5px; color: #8fb0cc; }
  .arc-vid-st b.rec { color: #ff6b5e; }
  .arc-vid-dl { color: var(--accent); }
  /* ---------- 17QA: 「📖 航海日誌」近日開始の告知ポップアップ ---------- */
  /* 17QK: align-items は flex-start にすること。center のままだと、ポップが画面より高いときに
     **上へはみ出した分がスクロールで戻せない**（flex中央寄せの既知の罠）。実測 360x640 では
     ✕ ボタンが top -171px に出て、最大までスクロールしても届かなかった（＝閉じられない）。
     上端そろえなら、開いた瞬間に必ずタイトルと ✕ が見えて、下のボタンへはスクロールで届く。 */
  /* 17QQ 紹介ページ（logbook.html）をゲーム内に全画面で1回だけ見せるオーバーレイ。
     ページそのものを iframe で出すので、内容の二重管理が起きない。
     閉じるとその場でゲームに戻る（ページ遷移をしないので、遊びに来た人の足を止めない）。 */
  .lbtour-ov { position: fixed; inset: 0; z-index: 1300; background: rgba(5, 11, 18, .92);
    display: flex; flex-direction: column; }
  .lbtour-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: linear-gradient(180deg, #16283f, #0f1e30);
    border-bottom: 1px solid #2c4a6e; color: #e8eef5; font-size: 13px; }
  .lbtour-bar .ttl { font-weight: 700; color: #ffd76a; }
  .lbtour-bar .sp { margin-left: auto; }
  .lbtour-x { border: 1px solid #2c4a6e; background: #0e2036; color: #e8eef5; border-radius: 999px;
    padding: 7px 16px; font-size: 13px; font-weight: 500; cursor: pointer; }
  .lbtour-x:hover { background: #14304f; }
  .lbtour-ov iframe { flex: 1 1 auto; width: 100%; border: 0; background: #0b1622; }
  @media (max-width: 480px) {
    .lbtour-bar { font-size: 12px; padding: 7px 10px; }
    .lbtour-bar .hide-sp { display: none; }
    .lbtour-x { padding: 6px 12px; }
  }
  .lb-ov { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center;
    padding: 30px 12px 20px; overflow: auto; background: rgba(7, 14, 23, .72); backdrop-filter: blur(3px); }
  .lb-pop { width: min(620px, 96vw); border-radius: 16px; position: relative;
    background: linear-gradient(180deg, #13253c 0%, #0f1e30 34%, #0d1a2b 100%);
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,215,106,.25);
    animation: lb-in .38s cubic-bezier(.2,.9,.3,1.15); }
  @keyframes lb-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
  .lb-pop::before { content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1.5px;
    background: linear-gradient(140deg, #ffe9a8, #b8860b 30%, #ffd76a 55%, #7a5b12 80%, #ffe9a8);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    animation: lb-ring 3.4s ease-in-out infinite; }
  /* 17AB6: filter は塗り直しが要る（ページ全体が毎フレーム再描画になる）。opacity だけで
     同じ「金の縁がゆっくり明滅する」見え方を作る（下限を落として強弱の幅を保つ）。 */
  @keyframes lb-ring { 0%,100% { opacity: .62; } 50% { opacity: 1; } }
  .lb-x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: none;
    border-radius: 10px; background: rgba(255,255,255,.08); color: #cdd9e6; font-size: 16px; cursor: pointer; z-index: 3; }
  .lb-x:hover { background: rgba(255,255,255,.16); }
  .lb-head { position: relative; text-align: center; padding: 26px 22px 2px; overflow: hidden; }
  .lb-ribbon { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em;
    color: #06121f; background: linear-gradient(180deg, #ffe9a8, #f0b429);
    padding: 4px 16px; border-radius: 999px; box-shadow: 0 2px 10px rgba(240,180,41,.4); }
  .lb-book { font-size: 48px; line-height: 1; margin: 10px 0 2px;
    filter: drop-shadow(0 6px 16px rgba(255,215,106,.4)); animation: lb-bob 4.5s ease-in-out infinite; }
  @keyframes lb-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  /* 17AB6: background-position のアニメは合成できない（＝毎フレームの塗り直し）。
     金のグラデーション文字はそのまま、光の移動だけ止める。 */
  .lb-title { margin: 0 0 2px; font-size: 28px; letter-spacing: .03em;
    background: linear-gradient(100deg, #fff7dd 15%, #ffd76a 38%, #fff3c4 50%, #d99e1b 68%, #ffe9a8 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .lb-slog { color: #cfe2f5; font-size: 12px; letter-spacing: .3em; margin: -2px 0 6px; }
  .lb-tag { color: #9fb2c6; font-size: 13.5px; margin: 0 auto 4px; max-width: 30em; line-height: 1.65; }
  .lb-tag b { color: #ffe9a8; }
  .lb-spark { position: absolute; width: 7px; height: 7px; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, #fff 0 25%, rgba(255,231,168,.9) 45%, transparent 70%);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: lb-tw 3.6s ease-in-out infinite; }
  @keyframes lb-tw { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: .95; transform: scale(1.25) rotate(22deg); } }
  .lb-perks { display: flex; flex-direction: column; gap: 7px; padding: 10px 22px 4px; }
  .lb-perk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #9fb2c6;
    background: linear-gradient(180deg, #122439, #0e1f33); border: 1px solid #2c4a6e;
    border-radius: 11px; padding: 9px 12px; line-height: 1.55; }
  .lb-perk b { color: #ffe9a8; }
  .lb-perk .ic { flex: 0 0 auto; font-size: 19px; line-height: 1.2; }
  /* 17QC: .hero はランディング用の既存クラスと衝突するため lb-hero に。あわせて
     このポップアップ内では折り返し・並びを自前で確定させる（外部CSSの影響を受けない）。 */
  .lb-perk { flex-wrap: nowrap; }
  .lb-perk.lb-hero { background: linear-gradient(120deg, #1c3550, #14283f 55%, #1a2f1f); border-color: #b8934a; }
  .lb-price { text-align: center; padding: 8px 22px 0; }
  .lb-price .yen { font-size: 30px; font-weight: 700; color: #fff; }
  .lb-price .per { color: #9fb2c6; font-size: 12.5px; margin-left: 8px; }
  .lb-free { margin: 6px auto 0; max-width: 36em; font-size: 12.5px; color: #a8e8ff; text-align: center;
    background: rgba(56,200,240,.08); border: 1px solid rgba(56,200,240,.4); border-radius: 10px; padding: 7px 12px; }
  .lb-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 22px 6px; }
  .lb-main { font-weight: 700; font-size: 15.5px; letter-spacing: .04em; cursor: pointer; text-decoration: none;
    color: #241a02; background: linear-gradient(180deg, #ffe9a8, #ffd76a 45%, #f0b429);
    border: 1px solid #8a6d1f; border-radius: 999px; padding: 12px 40px;
    box-shadow: 0 8px 26px rgba(240,180,41,.35), inset 0 1px 0 rgba(255,255,255,.7);
    position: relative; overflow: hidden; }
  .lb-main:hover { filter: brightness(1.06); }
  /* 17QE 受付開始版の CTA は <button>（その場でショップを開く）。<a> と同じ見た目に揃える。 */
  button.lb-main { font-family: inherit; line-height: 1.3; }
  /* 17AB6: 同上（left → transform）。skew は移動と一緒に持たせる。 */
  .lb-main::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
    transform: translateX(-100%) skewX(-18deg); animation: lb-sheen 3.2s ease-in-out infinite; }
  @keyframes lb-sheen {
    0%, 55% { transform: translateX(-100%) skewX(-18deg); }
    85%, 100% { transform: translateX(100%) skewX(-18deg); }
  }
  .lb-later { font: inherit; font-size: 12.5px; color: #9fb2c6; background: none; border: none;
    cursor: pointer; text-decoration: underline dotted; }
  .lb-later:hover { color: #e8eef5; }
  .lb-fine { color: #7c90a6; font-size: 11.5px; line-height: 1.7; padding: 4px 26px 18px; text-align: center; }
  .lb-fine b { color: #ffd9a8; }
  /* 17QC: 狭い画面（360px級）ではCTAの文字が「紹介ペー／ジ」で泣き別れていた。
     左右の余白を詰めて1行に収める。 */
  @media (max-width: 400px) {
    .lb-main { padding: 12px 20px; font-size: 14.5px; white-space: nowrap; }
    .lb-perks { padding-left: 14px; padding-right: 14px; }
    .lb-head { padding-left: 14px; padding-right: 14px; }
    .lb-fine { padding-left: 16px; padding-right: 16px; }
  }
  /* 17Q8: 書き出し完了後の「来歴ページで公開」ボタン＋状態表示 */
  .arc-vid-pubrow { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; flex-wrap: wrap; }
  .arc-vid-pub { background: #143a24; color: #a9e8bd; border: 1px solid #2f7a49; border-radius: 999px;
    padding: 4px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
  .arc-vid-pub:hover { background: #1a4a2e; }
  .arc-vid-pub:disabled { opacity: .55; cursor: default; }
  .arc-vid-pubst { font-size: 12.5px; color: #9fb6cf; }
  .arc-vid-pubst a { color: var(--accent); }
  /* 録画されている絵をそのまま小さく映す（何が保存されるか分かるように） */
  .arc-vid-cv { width: 108px; height: auto; border: 1px solid var(--border-2); border-radius: var(--radius-s); display: block; }
  .arc-vid-cv[hidden] { display: none; }
  .arc-turn { font-size: 12.5px; color: #8fb0cc; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .arc-turn b { color: #eaf3fb; font-size: 14px; }
  .arc-turn .sep { color: #3f5a78; }
  .arc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* 17AJE: 基礎3指標＋通算フラッグ獲得 */
  .arc-cell { background: var(--panel-2); border: 1px solid var(--border-2); border-radius: var(--radius-s); padding: 5px 7px; }
  .arc-cell .k { font-size: 10.5px; color: #7f9dba; }
  .arc-cell .v { font-size: 13.5px; font-weight: 600; color: #eaf3fb; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .arc-cell .s { font-size: 10.5px; color: #8fb0cc; }
  .arc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .arc-chip { background: var(--panel-2); color: #8fb0cc; border: 1px solid var(--border-2);
    border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
  .arc-chip.on { color: #0b1622; background: var(--mc, #43d17f); border-color: var(--mc, #43d17f); font-weight: 600; }
  .arc-chart-caption { padding: 7px 9px; border: 1px solid rgba(255,215,106,.28); border-radius: var(--radius-s);
    background: rgba(255,215,106,.07); color: #b9cee1; font-size: 11.5px; line-height: 1.45; }
  .arc-chart-caption b { color: #ffe29a; }
  .arc-chartwrap { flex: 1; min-height: 150px; background: var(--panel-2);
    border: 1px solid var(--border-2); border-radius: var(--radius-m); padding: 4px; }
  .arc-chartwrap canvas { display: block; width: 100%; height: 100%; }
  .arc-event-legend { display:flex; flex-wrap:wrap; gap:4px 10px; padding:1px 3px; color:#9db8d0; font-size:10.5px; line-height:1.35; }
  .arc-events { color:#ffe1a0; font-weight:600; }
  .arc-note { font-size: 11.5px; line-height: 1.6; }
  /* 17WI: 無料で年代記を実際に見た人へだけ、記録を残す価値を短く案内する。 */
  .arc-upgrade-cta { margin-top: 8px; padding: 10px; border: 1px solid rgba(255,215,106,.58); border-radius: 11px;
    background: linear-gradient(125deg, rgba(83,59,16,.78), rgba(20,44,67,.82)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
  .arc-upgrade-cta h3 { margin: 0 0 5px; color: #ffe9a8; font-size: 13px; line-height: 1.4; }
  .arc-upgrade-cta p { margin: 0 0 8px; color: #d4e0ec; font-size: 11.5px; line-height: 1.6; }
  .arc-upgrade-cta .b1 { width: 100%; min-height: 38px; font-size: 12.5px; }
  /* 17P8 スマホ用のタブ（マップ / グラフ）。PCでは出さない（左右2カラムのまま）。 */
  .arc-tabs { display: none; grid-column: 1 / -1; gap: 6px; }
  .arc-tabs button { flex: 1; background: var(--panel-2); color: #8fb0cc; border: 1px solid var(--border-2);
    border-radius: var(--radius-s); padding: 10px 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .arc-tabs button.on { background: var(--accent); border-color: var(--accent); color: #06121f; }
  .arc-hint { display: none; font-size: 11.5px; color: #7f9dba; }
  .arc-era1 { font-size: 13px; font-weight: 500; color: #cfe3f5; }
  /* スマホ・狭い画面。17P8 からはマップとグラフをタブで出し分け、片方を画面いっぱいに使う。 */
  @media (max-width: 900px) {
    /* 17P8 スマホ: 枠いっぱいに開く（余白ぶん下がはみ出して閉じるボタンが押せない事故を防ぐ） */
    .arc-ov { padding: 0; }
    .arc-ov .arc-box { width: 100%; height: 100%; border-radius: 0; border: none; }
    /* 17P8: マップとグラフはタブで出し分け。片方だけを画面いっぱいに使う。 */
    .arc-tabs { display: flex; }
    .arc-hint { display: block; }
    .arc-body.tab-map .arc-right { display: none; }
    .arc-body.tab-chart .arc-left { display: none; }
    .arc-mapwrap { flex: 0 0 auto; height: 56vh; min-height: 240px; }
    .arc-chartwrap { flex: 0 0 auto; height: 50vh; min-height: 200px; }
    /* 指で押せる大きさに（既定は5px×10pxで38px高＝小さい） */
    .arc-ctl { gap: 6px; row-gap: 6px; }
    .arc-ctl button { padding: 10px 12px; font-size: 14px; min-height: 44px; }
    .arc-ctl button.play { min-width: 86px; }
    /* 17P9 スマホ: 速度は1行に収める。◀ ▶ 再生 と ／ 0.5x〜4x ／ 🎬 の3かたまり。 */
    .arc-spd { flex: 1 1 100%; order: 5; }
    .arc-ctl .arc-spd button { flex: 1; padding: 10px 4px; font-size: 13.5px; min-height: 44px; }
    .arc-ctl button.vid { order: 4; }
    /* 17P9 スマホ: タイムラインは指で掴める高さに。日付も1段大きく。 */
    .arc-tl-bar { height: 34px; }
    .arc-tl-rail, .arc-tl-fill { top: 15px; height: 6px; }
    .arc-tl-sel { top: 11px; height: 14px; }
    .arc-tl-ticks { top: 22px; }
    .arc-tl-head { top: 8px; width: 16px; height: 20px; margin-left: -8px; }
    .arc-tl-h { top: 3px; border-left-width: 8px; border-right-width: 8px; border-bottom-width: 11px; margin-left: -8px; }
    .arc-tl-labs { height: 16px; }
    .arc-tl-labs b { font-size: 11px; }
    .arc-vid-row button { padding: 9px 12px; min-height: 40px; font-size: 13px; }
    .arc-vid-cv { width: 84px; }
    .arc-turn { font-size: 12px; gap: 5px; }
    /* 見出しは2段に収める: 1段目=タイトル＋状態＋✕ / 2段目=まとまり選択＋件数 */
    .arc-head { padding: 8px 10px; row-gap: 6px; }
    .arc-head .arc-title { order: 1; }
    .arc-head .arc-badge { order: 2; }
    .arc-head .arc-x { order: 3; margin-left: auto; }
    /* 17P8: 高さ0の全幅ダミーで確実に改行させる（margin-left:auto の✕のあとに
       まとまり名が回り込んで、✕の右に並んでしまうのを防ぐ） */
    .arc-head .grow { display: block; flex: 1 0 100%; height: 0; order: 4; }
    /* min-width:auto（既定）のままだと中身の幅ぶん縮まないので 0 にして2段目に収める */
    .arc-head select { order: 5; flex: 1 1 40%; min-width: 0; max-width: none; }
    .arc-era1 { order: 5; }
    .arc-meta { order: 6; }
    .arc-turn .arc-pc { display: none; }   /* 島名は見出しに出ているので、狭い画面では省く */
    /* 上下に積む。行は中身なりの高さにして（既定の stretch だと2行が等分され、
       マップ側の中身がはみ出して統計パネルと重なる）、全体をスクロールさせる。 */
    .arc-body { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; overflow: auto; }
    .arc-left, .arc-right { align-self: start; }
    .arc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .arc-x { width: 42px; height: 42px; font-size: 19px; }
  }

  /* ---------- 17PE 月次年報カード ---------- */
  /* ポップアップの外枠は .upd-ov / .upd-box を共用（アップデート告知・マップ共有と同じ見た目）。
     中身は「月を選ぶ → 大きな縦長カードを見る → 保存/共有」の一本道なので、装飾は最小限にする。 */
  /* 17WE 提督司令室。実績は全員に公開し、航海日誌の月次年報だけを購読中の自島に添える。 */
  .cmd-box { width: min(720px, 96vw); }
  .cmd-hero { display: flex; align-items: center; gap: 12px; margin: -2px 0 13px; padding: 11px 13px;
    background: linear-gradient(120deg, #3c2b0c, #1d2d45 62%, #10243b); border: 1px solid #8f6a26; border-radius: 12px; }
  .cmd-medal { flex: 0 0 auto; font-size: 31px; filter: drop-shadow(0 3px 5px rgba(255,205,87,.42)); }
  .cmd-hero b { display: block; color: #fff0bd; font-size: 17px; line-height: 1.35; }
  .cmd-hero span { display: block; color: #b7c9dc; font-size: 11.5px; letter-spacing: .08em; }
  .cmd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .cmd-card { min-width: 0; padding: 10px; background: #0d1e31; border: 1px solid #2d4d70; border-radius: 11px; }
  .cmd-card h3, .cmd-logbook h3 { margin: 0 0 7px; color: #ffe9a8; font-size: 13px; line-height: 1.45; }
  .cmd-rows { display: grid; gap: 5px; }
  .cmd-row { display: flex; justify-content: space-between; gap: 7px; align-items: flex-start; border-top: 1px solid #1d3854; padding-top: 5px; font-size: 12px; }
  .cmd-row:first-child { border-top: 0; padding-top: 0; }
  .cmd-row b { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; color: #dbe9f6; }
  .cmd-row span { flex: none; color: #9eb9d5; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cmd-boss-row { min-height: 29px; }
  .cmd-boss-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 27px;
    padding: 2px; border: 1px solid #6f4b9c; border-radius: 7px; background: #1e1733; cursor: pointer; }
  .cmd-boss-icon:hover, .cmd-boss-icon:focus-visible, .cmd-boss-icon.show-name { border-color: #d8b4fe; background: #2b1d46; }
  .cmd-boss-icon img { display: block; width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
  .cmd-boss-tip { position: absolute; z-index: 2; left: 0; bottom: calc(100% + 6px); width: max-content; max-width: min(230px, 70vw);
    padding: 5px 8px; border: 1px solid #7651a7; border-radius: 7px; background: #130d23; color: #f0e4ff; font-size: 11.5px;
    font-weight: 500; line-height: 1.45; box-shadow: 0 5px 14px rgba(0,0,0,.48); opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity .12s, transform .12s; }
  .cmd-boss-icon:hover .cmd-boss-tip, .cmd-boss-icon:focus-visible .cmd-boss-tip, .cmd-boss-icon.show-name .cmd-boss-tip { opacity: 1; visibility: visible; transform: translateY(0); }
  .cmd-empty { color: #8198af; font-size: 11.5px; line-height: 1.6; }
  .cmd-logbook { margin-top: 10px; padding: 10px 12px; border: 1px solid #806320; border-radius: 11px; background: linear-gradient(100deg, #35280f, #162a42); }
  .cmd-logbook p { margin: 0 0 8px; color: #d4e0ec; font-size: 12.5px; line-height: 1.6; }
  .cmd-logbook-free { border-color: #806320; background: linear-gradient(110deg, #30240e, #1a3550 68%, #132942); }
  .cmd-logbook-free .b1 { min-height: 40px; }
  .cmd-roster-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 11px 12px;
    border: 1px solid #3b7698; border-radius: 11px; background: linear-gradient(105deg, #0c2b3e, #13273d); }
  .cmd-roster-cta h3 { margin: 0 0 3px; color: #bfeeff; font-size: 13.5px; }
  .cmd-roster-cta p { margin: 0; color: #b8cadb; font-size: 11.5px; line-height: 1.55; }
  .cmd-roster-cta .b1 { flex: 0 0 auto; min-height: 40px; }
  .cmd-roster-box { width: min(960px, 97vw); }
  .cmd-roster-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding: 10px 12px;
    border: 1px solid #386685; border-radius: 10px; background: linear-gradient(100deg, #0d2d42, #13243a); }
  .cmd-roster-summary b { color: #c9f2ff; font-size: 16px; }
  .cmd-roster-summary span, .cmd-roster-help { color: #a9c0d4; font-size: 11.5px; }
  .cmd-roster-help { margin: 0 0 8px; line-height: 1.55; }
  .cmd-roster-heading { margin: 10px 0 6px; color: #bfeeff; font-size: 13px; line-height: 1.45; }
  .cmd-roster-heading small { margin-left: 7px; color: #7899b5; font-size: 10.5px; font-weight: 400; }
  .cmd-roster-kind-scroll { max-height: 225px; overflow: auto; overscroll-behavior: contain; border: 1px solid #36516b; border-radius: 10px; background: #0b1928; }
  .cmd-roster-kind-table { width: 100%; min-width: 530px; border-collapse: collapse; color: #dce9f5; font-size: 12px; }
  .cmd-roster-kind-table th { position: sticky; top: 0; z-index: 1; padding: 8px; text-align: left; white-space: nowrap; color: #b9ddf3; background: #183047; border-bottom: 1px solid #436582; }
  .cmd-roster-kind-table td { padding: 7px 8px; border-bottom: 1px solid #1a3349; font-variant-numeric: tabular-nums; }
  .cmd-roster-kind-table td:not(:first-child), .cmd-roster-kind-table th:not(:first-child) { text-align: right; }
  .cmd-roster-kind-table tr:last-child td { border-bottom: 0; }
  .cmd-roster-kind-table b { color: #fff0ad; }
  .cmd-roster-detail-heading { margin-top: 12px; }
  .cmd-roster-scroll { max-height: min(62vh, 620px); overflow: auto; overscroll-behavior: contain; border: 1px solid #294a68; border-radius: 10px; background: #091828; }
  .cmd-roster-table { width: 100%; min-width: 720px; border-collapse: collapse; color: #dce9f5; font-size: 12px; }
  .cmd-roster-table th { position: sticky; top: 0; z-index: 1; padding: 9px 8px; text-align: left; white-space: nowrap; color: #b9ddf3; background: #142d45; border-bottom: 1px solid #436582; }
  .cmd-roster-table td { padding: 8px; border-bottom: 1px solid #18344e; vertical-align: middle; font-variant-numeric: tabular-nums; }
  .cmd-roster-table tr:last-child td { border-bottom: 0; }
  .cmd-roster-row { cursor: pointer; }
  .cmd-roster-row:hover, .cmd-roster-row:focus-within { background: #12334d; }
  .cmd-roster-ship { display: flex; align-items: center; gap: 7px; min-width: 190px; }
  .cmd-roster-ship img { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; }
  .cmd-roster-ship span { overflow-wrap: anywhere; }
  .cmd-roster-status { display: inline-block; padding: 3px 6px; border: 1px solid #3b6380; border-radius: 999px; background: #102b41; color: #c4e6f8; white-space: nowrap; }
  .cmd-roster-table small { display: block; margin-top: 2px; color: #7999b5; font-size: 10.5px; white-space: nowrap; }
  .cmd-share-actions { flex-wrap: wrap; gap: 8px; justify-content: flex-start !important; }
  @media (max-width: 620px) {
    .cmd-grid { grid-template-columns: 1fr; gap: 7px; }
    .cmd-card { padding: 9px 10px; }
    .cmd-roster-cta, .cmd-roster-summary { align-items: stretch; flex-direction: column; }
    .cmd-roster-cta .b1 { width: 100%; }
    .cmd-roster-kind-scroll { max-height: 190px; }
    .cmd-roster-scroll { max-height: 64vh; }
  }
  .rep-box { width: min(560px, 96vw); }
  .rep-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
  .rep-pick label { color: #8fb0cc; font-size: 13px; }
  .rep-pick select { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-radius: 8px;
                     background: #16283c; color: #eaf3fb; border: 1px solid var(--border-2); }
  .rep-st { color: #7fd1ff; font-size: 12.5px; min-width: 4em; text-align: right; }
  /* カードは縦長（720×1120）。横幅いっぱいに収めつつ、縦は画面の半分強までに抑えて
     下の説明とボタンが必ず見えるようにする。 */
  .rep-cvwrap { display: flex; justify-content: center; background: rgba(0,0,0,.25);
                border: 1px solid var(--border-2); border-radius: 12px; padding: 8px; margin-bottom: 12px; }
  #repCv { width: 100%; height: auto; max-height: 56vh; object-fit: contain; border-radius: 8px; display: block; }
  /* パネルの「新しい年報が届いている」しるし。文字の右に小さく添えるだけ。 */
  .rep-new { color: #ffcf3a; margin-left: 6px; font-size: 11px; vertical-align: 1px; }
  @media (max-width: 560px) {
    .rep-box { width: 96vw; }
    .cmd-box .cmd-share-actions button { flex: 1 1 46%; min-height: 44px; }
    .rep-pick { flex-wrap: wrap; }
    /* 17QK スマホの実測で分かったこと2つ。
       ① 幅ではなく **max-height が先に効いて** カードが 271×422px（縮尺0.377）まで縮み、
          枠の左右に 34.7px の空白ができていた（360px 端末では 206×320・縮尺0.286）。
          高さの上限をやめて幅いっぱいに描かせる。カードの中の注記が 5.3px → 7.7px になる。
       ② Web Share が使える端末（＝実機の iPhone）ではボタンが1行増えて「画像を保存」「閉じる」が
          箱の外へ出ていた（実測: 閉じるが y=796、箱の底が 724）。ボタン行を箱の下に貼り付ける。 */
    /* flex:0 0 auto を付けないと、下の .rep-cvwrap（flex コンテナ）が縦に縮むぶんだけ
       カードも押し潰される（実測 360x640 で 276x181 まで縮んだ）。カードは実寸のまま置いて、
       入りきらない分は枠の中をスクロールさせる。 */
    #repCv { max-height: none; flex: 0 0 auto; }
    .rep-box { max-height: 92vh; display: flex; flex-direction: column; }
    .rep-box .rep-cvwrap { flex: 1 1 auto; min-height: 0; overflow: auto; align-items: flex-start; }
    .rep-box .upd-btns { position: sticky; bottom: 0; margin: 0 -4px -4px; padding: 8px 4px 4px;
      background: linear-gradient(180deg, rgba(16,26,36,0), #101a24 22%); }
    .rep-box .upd-btns button { flex: 1 1 46%; min-height: 44px; }
  }
  /* ---------- 17PJ PCでは年報カードを大きく出す ---------- */
  /* 縦長（720×1120＝縦横比1.56）なので、幅で合わせるかぎり画面の縦が余っていても大きくならない。
     広い画面では「カードを縦いっぱいに置き、月選び・説明・ボタンは右の細い列へ逃がす」形にして、
     高さでサイズを決める。DOMの並びは触らないので、狭い画面の見え方は今までと1バイトも変わらない。 */
  @media (min-width: 900px) {
    /* 外枠の幅は .upd-ov .upd-box（=520px固定）が持っているので、同じ強さの指定で上書きする。 */
    .upd-ov .rep-box {
      width: auto; max-width: calc(100vw - 32px); max-height: 94vh;
      display: grid;
      grid-template-columns: minmax(0, auto) minmax(250px, 300px);
      grid-template-rows: auto auto auto 1fr;
      column-gap: 16px; align-content: start;
    }
    .upd-ov .rep-box .upd-head { grid-column: 1 / -1; }
    /* カードは左の列を2〜4行ぶん占める（右列の3ブロックと背比べする形）。 */
    .rep-cvwrap { grid-column: 1; grid-row: 2 / span 3; margin-bottom: 0; align-self: start; }
    /* 右列は幅が狭いので、月のプルダウンと状態表示を上下に分ける（「できました」が折り返さないように）。 */
    .rep-pick { grid-column: 2; grid-row: 2; flex-wrap: wrap; }
    .upd-ov .rep-box .rep-st { flex: 1 1 100%; text-align: right; min-width: 0; }
    .upd-ov .rep-box .upd-note { grid-column: 2; grid-row: 3; margin: 0 0 12px; }
    .upd-ov .rep-box .upd-btns { grid-column: 2; grid-row: 4; flex-direction: column; align-items: stretch; align-self: start; }
    /* 幅ではなく高さで決める。縦横比 720:1120 は幅を vh で書いて手で保つ（0.642857×78vh = 50.14vh）。
       canvas は本来の 720×1120 を「内在サイズ」として持つので width:auto に任せると縮みすぎる。
       720×1120 を超えて引き伸ばすとぼやけるのでそこで頭打ち。横に細い画面では右列ぶんを引いて溢れさせない。 */
    #repCv { flex: 0 0 auto; max-height: none;
             height: min(78vh, 1120px, calc((100vw - 360px) * 1.5556));
             width:  min(50.14vh, 720px, calc(100vw - 360px)); }
  }

  /* ── 常設「🏅 提督ミッション」 ── */
  #missionPanel.missionpanel { border-color: #6e58a8; background: linear-gradient(160deg,#17172b,#10253b); }
  #missionPanel h2 { color: #ddd0ff; }
  #missionPanel .qp-count { margin-left: 6px; color: #ad99e6; font-size: 12px; }
  #missionPanel.has-ready { border-color: #d5a935; box-shadow: 0 0 0 1px rgba(255,215,106,.18), 0 8px 24px rgba(0,0,0,.28); }
  .mission-summary { display:flex; flex-direction:column; gap:2px; margin:2px 0 9px; font-size:12px; color:#93abc2; }
  .mission-summary b { color:#dcecff; font-size:13px; }
  #missionPanel.has-ready .mission-summary b { color:#ffe39a; }
  .mission-open { width:100%; min-height:38px; }
  #missionModal { position:fixed; inset:0; z-index:1200; align-items:center; justify-content:center; padding:16px; background:rgba(2,8,15,.78); }
  .mission-box { width:min(900px,96vw); height:min(820px,92vh); display:flex; flex-direction:column; overflow:hidden; border:1px solid #405b78; border-radius:15px; background:#0d1a29; box-shadow:0 20px 70px rgba(0,0,0,.68); }
  .mission-head { display:flex; align-items:center; gap:10px; flex:none; padding:13px 16px; color:#ffe9a8; font-size:17px; font-weight:600; background:linear-gradient(90deg,#302711,#18314a); border-bottom:1px solid #334c67; }
  .mission-x { margin-left:auto; width:34px; height:34px; border:0; border-radius:8px; background:#263d55; color:#cfe2f5; cursor:pointer; font-size:16px; }
  .mission-tools { display:flex; align-items:center; gap:9px; flex-wrap:wrap; flex:none; padding:10px 14px; border-bottom:1px solid #263d55; background:#101f30; }
  .mission-tabs { display:flex; gap:5px; flex-wrap:wrap; }
  .mission-tabs button { border:1px solid #34526f; border-radius:999px; padding:6px 11px; background:#14283c; color:#aac0d3; cursor:pointer; font-size:12px; }
  .mission-tabs button.on { border-color:#c69c35; background:#4b3913; color:#ffe9a8; }
  .mission-check { margin-left:auto; color:#9fb6cd; font-size:12px; white-space:nowrap; }
  /* 17B48: スマホの入力欄の共通指定（幅・高さ44px）で、チェックボックスが大きな四角になっていた。 */
  #missionModal .mission-check { display:inline-flex; align-items:center; gap:6px; }
  #missionModal .mission-check input[type="checkbox"] { width:18px; height:18px; min-height:0; min-width:0; margin:0; padding:0; flex:none; }
  .mission-claimall { min-height:34px; padding:6px 12px; font-size:12px; }
  .mission-claimall:disabled { opacity:.45; cursor:default; }
  .mission-list { flex:1; min-height:0; overflow:auto; display:grid; align-content:start; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px 14px 16px; }
  .mission-card { min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:8px; align-items:start; padding:10px; border:1px solid #29425c; border-radius:11px; background:#102238; }
  .mission-card.ready { border-color:#a9852f; background:linear-gradient(145deg,#322711,#14263a); }
  .mission-card.claimed { opacity:.62; }
  .mission-ic { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:#1b334b; font-size:19px; }
  .mission-main { min-width:0; display:block; }
  .mission-main > b { display:block; overflow-wrap:anywhere; color:#e2edf7; font-size:13px; line-height:1.45; }
  .mission-desc { display:block; margin-top:1px; color:#849db5; font-size:10.5px; line-height:1.4; }
  .mission-bar { height:5px; margin-top:7px; overflow:hidden; border-radius:999px; background:#24384d; }
  .mission-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4c9bd0,#66d7c1); }
  .mission-card.ready .mission-bar i,.mission-card.claimed .mission-bar i { background:linear-gradient(90deg,#d59c31,#ffe27d); }
  .mission-prog { display:inline-block; margin-top:3px; color:#a8c1d6; font-size:10.5px; font-variant-numeric:tabular-nums; }
  .mission-reward { display:block; margin-top:5px; color:#ffe39a; font-size:11px; font-weight:600; }
  .mission-claim { align-self:center; min-height:34px; padding:6px 10px; font-size:11.5px; white-space:nowrap; }
  .mission-got { align-self:center; color:#7fa38c; font-size:11px; white-space:nowrap; }
  .mission-empty { grid-column:1/-1; padding:32px 12px; text-align:center; color:#7f98af; font-size:13px; }
  @media(max-width:700px) {
    #missionModal { padding:0; }
    .mission-box { width:100%; height:100%; max-height:none; border:0; border-radius:0; }
    .mission-tools { align-items:stretch; }
    .mission-tabs { width:100%; display:grid; grid-template-columns:repeat(3,1fr); }
    .mission-tabs button { padding:8px 2px; font-size:11px; }
    .mission-check { margin-left:0; flex:1; align-self:center; }
    .mission-list { grid-template-columns:1fr; padding:10px; }
    .mission-card { grid-template-columns:34px minmax(0,1fr) auto; }
  }

  /* 17BGF: 既存の海域色で目標探し。静的CSSのみ、画像/アニメーション/外部フォントなし。 */
  #missionModal .mission-search-label17bgf,#missionModal .mission-mode-label17bgf { display:flex; align-items:center; gap:6px; color:#aac0d3; font-size:12px; }
  #missionModal .mission-search-label17bgf { flex:1 1 260px; }
  #missionModal .mission-search17bgf { flex:1; min-width:0; width:100%; padding:8px 10px; background:#0d1a29; color:#e2edf7; border:1px solid #405b78; border-radius:8px; }
  #missionModal .mission-mode17bgf { max-width:100%; padding:8px; background:#0d1a29; color:#e2edf7; border:1px solid #405b78; border-radius:8px; }
  #missionModal .mission-tabs { width:100%; }
  #missionModal button:focus-visible,#missionModal input:focus-visible,#missionModal select:focus-visible { outline:2px solid #ffe39a; outline-offset:2px; }
  #missionModal .mission-ready-count17bgf { display:inline-block; min-width:17px; padding:1px 4px; border-radius:10px; background:#ffe39a; color:#302711; font-weight:700; }
  #missionModal .mission-category17bgf { display:block; margin-bottom:3px; color:#aac0d3; font-size:10px; }
  #missionModal .mission-desc { color:#a5bbcf; font-size:12px; overflow-wrap:anywhere; }
  #missionModal .mission-status-row17bgf { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:8px 14px; border-bottom:1px solid #263d55; }
  #missionModal .mission-status17bgf { flex:1 1 280px; color:#aac0d3; font-size:12px; overflow-wrap:anywhere; }
  #missionModal .mission-pages17bgf { display:flex; justify-content:center; align-items:center; gap:16px; padding:8px; border-top:1px solid #263d55; }
  #missionModal .mission-page-label17bgf { color:#aac0d3; font-variant-numeric:tabular-nums; }
  #missionModal .mission-x,#missionModal .mission-claim,#missionModal .mission-claimall,#missionModal .mission-tabs button,#missionModal .mission-status-row17bgf button,#missionModal .mission-pages17bgf button { min-height:44px; }
  #missionModal .mission-x { min-width:44px; }
  #missionModal button:disabled { opacity:.5; cursor:default; }
  @media(max-height:650px) {
    #missionModal .mission-tools { max-height:40vh; overflow:auto; }
    #missionModal .mission-status-row17bgf { max-height:20vh; overflow:auto; }
  }
  @media(max-width:700px) {
    #missionModal .mission-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; padding:2px; }
    #missionModal .mission-tabs button { flex:none; padding:8px 11px; white-space:nowrap; }
    #missionModal .mission-tools { gap:7px; padding:8px 10px; }
    #missionModal .mission-search-label17bgf { flex-basis:100%; }
    #missionModal .mission-search17bgf,#missionModal .mission-mode17bgf { min-height:44px; font-size:16px; }
    #missionModal .mission-claimall { width:100%; white-space:normal; }
    #missionModal .mission-status-row17bgf { padding:6px 10px; }
    #missionModal .mission-status17bgf { flex-basis:100%; }
    #missionModal .mission-check { min-height:44px; }
  }

  /* ── 17PZ 初日クエスト「🎓 提督デビュー訓練」 ── */
  #questPanel.questpanel { border-color: #b8934a; box-shadow: 0 0 0 1px rgba(255,215,106,.15), 0 10px 30px rgba(0,0,0,.35); }
  #questPanel h2 { color: #ffe9a8; }
  #questPanel .qp-count { font-size: 12px; color: #b8934a; font-weight: 600; margin-left: 6px; }
  #questPanel #qpHead { cursor: pointer; user-select: none; }
  #questPanel #qpHead .caret { display: inline-block; margin-right: 6px; color: #b8934a; transition: transform .15s; }
  #questPanel.folded #qpBody { display: none; }
  #questPanel.folded #qpHead .caret { transform: rotate(-90deg); }

  .qp-item { display: flex; gap: 8px; align-items: flex-start; padding: 7px 4px; border-bottom: 1px dashed #22374f; }
  .qp-item:last-child { border-bottom: none; }
  .qp-item .qc { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; border: 2px solid #3b5878;
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; margin-top: 2px; }
  .qp-item.done .qc { background: #1d5c36; border-color: #43d17f; color: #d6ffe4; }
  .qp-item .qt { font-size: 13px; line-height: 1.5; }
  .qp-item .qt b { color: #dbe8f5; font-weight: 500; }
  .qp-item.done .qt b { color: #7fa38c; text-decoration: line-through; }
  .qp-item .qd { display: block; color: #8ea3b8; font-size: 11.5px; }
  .qp-item.done .qd { display: none; }
  .qp-item .qr { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #ffe9a8;
    background: rgba(255,215,106,.1); border: 1px solid rgba(255,215,106,.35); border-radius: 999px; padding: 0 8px; }
  .qp-item.done .qr { opacity: .55; }
  .dq-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:2px 0 7px; padding:3px; border-radius:10px; background:#0b1827; }
  .dq-tabs button { min-height:34px; border:1px solid transparent; border-radius:8px; background:transparent; color:#8fa7bc; font:inherit; font-size:12px; cursor:pointer; }
  .dq-tabs button.on { border-color:#426484; background:#17304a; color:#f3dd9b; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.2); }
  .rq-progress { display:inline-block; width:min(130px,45vw); height:6px; margin:6px 7px 1px 0; overflow:hidden; border-radius:999px; background:#25394d; vertical-align:middle; }
  .rq-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#48a3d7,#65dbaf); }
  .qp-item.done .rq-progress i { background:linear-gradient(90deg,#c99530,#ffe17a); }
  .rq-count { color:#a9c1d5; font-size:11px; font-variant-numeric:tabular-nums; vertical-align:middle; }
  .qp-hint { margin-top: 8px; font-size: 12px; color: #a8e8ff; background: rgba(56,200,240,.08);
    border: 1px solid rgba(56,200,240,.35); border-radius: 9px; padding: 7px 10px; display: none; }
  .qp-hint:not(:empty) { display: block; }
  /* 達成トースト（既存 toast とは別に、報酬を目立たせる） */
  .quest-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 76px; z-index: 300;
    background: linear-gradient(160deg, #2d2610, #1c1a10); color: #ffe9a8; font-weight: 500; font-size: 14px;
    border: 1px solid #b8934a; border-radius: 12px; padding: 10px 18px; box-shadow: 0 10px 32px rgba(0,0,0,.5);
    animation: qt-in .3s ease-out; max-width: min(92vw, 560px); }
  .quest-toast .qh { font-size: 12px; color: #cfe2f5; font-weight: 400; margin-top: 2px; }
  @keyframes qt-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }

  /* ── 17Q2: 艦艇一覧の見やすさ改善（アイコン・Lv・HPバー・行タップでマップへ） ── */
  .scantbl .sc-row { cursor: pointer; }
  .scantbl .sc-row:hover td { background: rgba(125,180,255,.08); }
  .scantbl .sc-row:active td { background: rgba(125,180,255,.14); }
  .scantbl .sicon { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated;
    vertical-align: -4px; margin-right: 5px; }
  .scantbl .sc-n { font-weight: 400; }
  .scantbl .sc-l { white-space: nowrap; color: #cfe2f5; font-size: 11.5px; }
  .scantbl .hpmax { color: #7c90a6; font-size: 10.5px; }
  .scantbl .hpbar { display: block; width: 52px; height: 4px; margin-top: 3px; border-radius: 999px;
    background: rgba(255,255,255,.12); overflow: hidden; }
  .scantbl .hpbar i { display: block; height: 100%; border-radius: 999px; }

  /* ---------- 17QE 定期購読「📖 航海日誌」 ---------- */
  /* 命名は sub- 接頭辞で統一する。素の .sub はグローバルに存在する（.sub{font-size:14px}）ので
     単独の .sub は絶対に使わない（17QC の .hero 衝突と同じ事故を繰り返さない）。 */
  .shop-ov .sub-card { position: relative; overflow: hidden; border-radius: 16px; padding: 15px 16px 14px;
    background: linear-gradient(160deg, #23324f 0%, #16233c 48%, #2b2013 100%);
    border: 1.5px solid rgba(255,207,90,.42);
    box-shadow: 0 10px 30px rgba(0,0,0,.42), inset 0 0 26px rgba(255,207,90,.06); }
  .shop-ov .sub-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .shop-ov .sub-book { flex: none; width: 52px; height: 52px; border-radius: 14px; font-size: 27px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 30% 20%, #3a2a12, #1a1208 74%);
    border: 1px solid rgba(255,207,90,.4); box-shadow: inset 0 0 16px rgba(255,207,90,.16); }
  .shop-ov .sub-nm { font-size: 19px; font-weight: 700; color: #ffe9bd; letter-spacing: .06em;
    text-shadow: 0 2px 8px rgba(0,0,0,.5); line-height: 1.25; }
  .shop-ov .sub-slog { font-size: 10.5px; color: #c8a86a; letter-spacing: .18em; }
  .shop-ov .sub-price { margin-left: auto; text-align: right; white-space: nowrap; }
  .shop-ov .sub-price b { font-size: 22px; font-weight: 700; color: #ffd76a; }
  .shop-ov .sub-price span { display: block; font-size: 10.5px; color: #a7bdd4; }
  .shop-ov .sub-perks { margin: 12px 0 0; display: grid; gap: 6px; }
  .shop-ov .sub-perk { display: flex; align-items: flex-start; gap: 9px; flex-wrap: nowrap;
    font-size: 12px; color: #d7e6f5; line-height: 1.55; }
  .shop-ov .sub-perk .ic { flex: none; width: 22px; text-align: center; font-size: 14px; }
  .shop-ov .sub-perk b { color: #ffe1a3; }
  .shop-ov .sub-free { margin-top: 11px; font-size: 11.5px; color: #bde5cd; line-height: 1.55;
    background: rgba(29,74,53,.4); border: 1px solid rgba(90,190,140,.34); border-radius: 10px; padding: 7px 11px; }
  .shop-ov .sub-free b { color: #d8ffe8; }
  .shop-ov .sub-row { margin-top: 12px; display: flex; }
  .shop-ov .sub-cta { width: 100%; min-height: 46px; border: none; border-radius: 12px; cursor: pointer;
    padding: 12px 14px; font-size: 14.5px; font-weight: 700; line-height: 1.3;
    background: linear-gradient(90deg, #e8a33a, #ffd76a); color: #3a1206;
    box-shadow: 0 4px 16px rgba(232,163,58,.36); transition: filter .15s, box-shadow .15s; }
  .shop-ov .sub-cta:hover { filter: brightness(1.07); box-shadow: 0 6px 20px rgba(232,163,58,.5); }
  .shop-ov .sub-cta.off { background: #33465f; color: #b6c6d8; cursor: default; box-shadow: none; }
  .shop-ov .sub-cta.on { background: linear-gradient(90deg, #1f7a52, #35b47c); color: #eafff4; cursor: default; }
  .shop-ov .sub-note { margin-top: 8px; font-size: 11px; color: #a7bdd4; line-height: 1.6; }
  .shop-ov .sub-note b { color: #ffd76a; }
  .shop-ov .sub-note a { color: #7fd1ff; }
  @media (max-width: 420px) {
    .shop-ov .sub-price { margin-left: 0; text-align: left; width: 100%; }
    .shop-ov .sub-price span { display: inline; margin-left: 6px; }
  }
  /* ⚙設定のセクション（#subBody）。設定モーダルの他セクションと同じ落ち着いた見た目にする。 */
  .subbox { background: rgba(10,22,38,.55); border: 1px solid #24405f; border-radius: 10px; padding: 11px 13px; }
  .subbox .sub-state { font-size: 13px; color: #cfe3f5; line-height: 1.6; }
  .subbox .sub-state.on { color: #bde5cd; }
  /* 17R8 お支払いが確認できていない（カードの期限切れ等）ときの枠。加入中の案内より目立たせる。 */
  .subbox .sub-state.warn { color: #ffd7c2; background: rgba(255,120,80,.10);
    border: 1px solid rgba(255,140,100,.45); border-radius: var(--radius-s); padding: 9px 11px; margin-bottom: 8px; }
  .subbox .sub-state.warn b { color: #ffb27a; }
  .subbox .sub-state b { color: #ffd76a; }
  .subbox .sub-line { margin-top: 7px; font-size: 11.5px; color: #9fb6cd; line-height: 1.7; }
  .subbox .sub-line b { color: #cfe3f5; }
  .subbox .sub-line a, .subbox .sub-state a { color: #7fd1ff; }
  .subbox .row { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .subbox .row .b1, .subbox .row .b2 { white-space: nowrap; }

  /* ---------- 17AAT: おすすめの次の一手（登録直後の「待つだけ」を減らす） ---------- */
  /* おすすめの次の一手: 予約が空のときだけ、予約リストの中に出る提案カード。 */
  .queue li.qsuggest { background: linear-gradient(180deg, #14304a, #12283c); border: 1px solid #23547d;
    border-radius: 10px; padding: 10px 12px; display: block; box-shadow: none; }
  .queue li.qsuggest .sg-head { font-weight: 500; color: #9fe0ff; font-size: 13px; }
  .queue li.qsuggest .sg-why { color: #9fb6cd; font-size: 11.5px; margin: 3px 0 8px; line-height: 1.6; }
  .queue li.qsuggest .sg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .queue li.qsuggest .sg-chip { background: #1b4a6e; color: #dff1ff; border: 1px solid #2f6f9f;
    border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
  .queue li.qsuggest .sg-chip:hover { background: #24618f; }
  .queue li.qsuggest .sg-chip:disabled { opacity: .5; cursor: default; }
  .queue li.qsuggest .sg-at { color: #9fb6cd; font-size: 11px; }

  /* ---------- 17AAU: 体験型チュートリアル「はじめての海戦」 ---------- */
  .panel.tutpanel { background: linear-gradient(180deg, #13324e, #102a40); border: 1px solid #2a6b9c; }
  .panel.tutpanel h2 { color: #9fe0ff; }
  .panel.tutpanel .tut-count { font-size: 12px; color: #9fb6cd; margin-left: 6px; }
  .tut-focus-bar17awn { display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 9px;border:1px solid #3e7194;
    border-radius:8px;background:#0b2336;color:#bcd9ea;font-size:11px;line-height:1.45; }
  .tut-focus-bar17awn[hidden] { display:none; }
  .tut-focus-bar17awn span { flex:1; }
  .tut-focus-bar17awn button { flex:0 0 auto;min-height:34px;padding:5px 9px;font-size:10.5px; }
  .tut-paused17aqy > :not(h2):not(.tut-resume17aqy):not(.tut-exit17aqz),
  .tut-graduated17aqy > :not(h2):not(.rookie-next17aqy) { display: none !important; }
  .tut-resume17aqy p, .rookie-next17aqy p { font-size: 13px; line-height: 1.7; margin: 8px 0; }
  .rookie-next17aqy h3 { font-size: 16px; margin: 6px 0; color: #ecf6ff; }
  .rookie-next17aqy .rookie-kicker17aqy { color: #95e8ba; font-weight: 600; }
  .rookie-next17aqy details { margin-top: 12px; border-top: 1px solid #38536d; padding-top: 10px; }
  .rookie-next17aqy summary { cursor: pointer; font-size: 13px; color: #b8def7; }
  .rookie-links17aqy { display: grid; gap: 8px; margin-top: 10px; }
  .rookie-links17aqy a { color: #acd9ff; font-size: 13px; padding: 8px; border-radius: 6px; background: #0c2338; }
  body.mmode #mapPanel > #tutorialPanel { flex: 0 0 auto; max-height: 38dvh; overflow-y: auto;
    overscroll-behavior: contain; padding: 10px 12px; margin: 0 0 6px; }
  body.mmode #tutorialPanel h2 { font-size: 15px; margin: 0 0 5px; }
  body.mmode #tutorialPanel .tut-step { font-size: 11px; }
  body.mmode #tutorialPanel button, body.mmode #tutorialPanel summary { min-height: 44px; }
  body.mmode #tutorialPanel.tut-graduated17aqy > h2 { display: none; }
  body.mmode #rookieNext17aqy .tut-row { display: flex; flex-wrap: wrap; gap: 6px; }
  body.mmode #rookieNext17aqy .tut-row button { flex: 1 1 auto; width: auto; min-width: 0; padding: 8px; font-size: 13px; }
  .rookie-more17awn { display:none; }
  /* 17B55: アプリ内ブラウザで遊んでいる人への「ブラウザで開く」案内 */
  .inapp-bar17b55 { position: relative; z-index: 5; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
    padding: 8px 10px; border: 1px solid #b98a2e; border-radius: 8px; background: #2b2410; color: #ffe7a8;
    font-size: 12.5px; line-height: 1.5; }
  .inapp-bar17b55 span { flex: 1; min-width: 0; }
  .inapp-bar17b55 .b1 { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
  .inapp-x17b55 { flex: 0 0 auto; min-width: 36px; min-height: 36px; border: 0; background: transparent; color: #ffe7a8; font-size: 16px; cursor: pointer; }
  #inAppGuide17b55 { z-index: 320; }   /* 達成表示（トースト）より前に出し、ボタンを隠さない */
  .inapp-guide17b55 .upd-note p { margin: 0 0 8px; line-height: 1.7; }
  .inapp-id17b55 { padding: 8px 10px; border-radius: 6px; background: #0c2338; font-size: 14px; }
  .inapp-guide17b55 .upd-btns { flex-wrap: wrap; }
  .inapp-chrome17b55 { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  @media (min-width:1201px) {
    body.tutorial-focus17awn:not(.tutorial-focus-expanded17awn) .grid2 { grid-template-columns:minmax(0,1fr) 380px; }
    body.tutorial-focus17awn:not(.tutorial-focus-expanded17awn) .grid2 > .leftcol { display:none; }
    body.tutorial-focus17awn:not(.tutorial-focus-expanded17awn) #belowMap { display:none; }
    body.tutorial-focus17awn:not(.tutorial-focus-expanded17awn) .chatcol > :not(#tutorialPanel) { display:none!important; }
  }
  body.mmode #rookieNext17aqy .rookie-more17awn { display:block;width:100%;margin-top:8px; }
  body.mmode #rookieNext17aqy:not(.rookie-expanded17awn) .rookie-secondary17awn { display:none; }
  body.mmode #rookieNext17aqy .rookie-return17avr { margin-top:6px; }
  body.mmode #rookieNext17aqy h3 { margin-bottom:4px; }
  .tutorial-command-lock-notice17anm { margin: 0 0 12px; padding: 11px 12px; border: 1px solid #d7a93d;
    border-radius: 9px; background: linear-gradient(135deg, #3a2c10, #17314a); color: #e9f5ff;
    font-size: 12px; line-height: 1.6; }
  .tutorial-command-lock-notice17anm b { display: block; color: #ffd76a; font-size: 14px; }
  .tutorial-command-lock-notice17anm span { display: block; margin-top: 2px; }
  #cmdPanel.tutorial-command-locked17anm > :not(.tutorial-command-lock-notice17anm) {
    opacity: .42; pointer-events: none; user-select: none;
  }
  .tut-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 8px; }
  #tutOutline17aqz > summary { cursor: pointer; color: #acd9ff; font-size: 12px; padding: 7px 0; }
  .tut-exit17aqz { border-top: 1px solid #38536d; margin-top: 10px; }
  .tut-exit17aqz p { font-size: 12px; line-height: 1.7; }
  .tut-choice17aqz #tutOutline17aqz, .tut-choice17aqz #tutNote, .tut-choice17aqz #btnTutSkip { display: none; }
  .tut-step { font-size: 11.5px; color: #7e94aa; white-space: nowrap; }
  .tut-step.now { color: #ffd76a; font-weight: 500; }
  .tut-step.done { color: #7CFC9A; text-decoration: line-through; opacity: .8; }
  .tut-arrow { color: #40566c; font-size: 11px; }
  .tut-hint { font-size: 12.5px; color: #cfe3f5; line-height: 1.75; }
  .tut-hint b { color: #ffd76a; }
  .tut-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .tut-note { margin-top: 8px; font-size: 11.5px; color: #9fb6cd; line-height: 1.6; }
  .tut-note b { color: #ff9a9a; }
  .tut-next-hero { margin: 4px 0 12px; padding: 13px 14px; border: 1px solid #2a6b9c; border-radius: 11px;
    background: linear-gradient(135deg, #123451, #10283e); color: #dceefa; line-height: 1.65; }
  .tut-next-hero b { display: block; color: #ffd76a; font-size: 17px; }
  .tut-next-hero span { display: block; margin-top: 3px; font-size: 12.5px; color: #b8cee1; }
  .tut-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tut-next-choice { min-height: 92px; padding: 11px; text-align: left; border: 1px solid #31597b; border-radius: 10px;
    background: #10253a; color: #dceaf6; cursor: pointer; }
  .tut-next-choice:hover { background: #173652; border-color: #58a6d7; }
  .tut-next-choice b { display: block; color: #9fe0ff; font-size: 14px; }
  .tut-next-choice span { display: block; margin-top: 5px; color: #a8bfd2; font-size: 11.5px; line-height: 1.55; }
  @media (max-width: 700px) {
    .tut-row button { min-height: 44px; flex: 1 1 100%; }
    .tut-next-grid { grid-template-columns: 1fr; }
    .tut-next-choice { min-height: 68px; }
  }
  /* 17AAU: チュートリアルの「おすすめの場所」案内 */
  .tut-spot { margin-top: 8px; padding: 8px 10px; background: #1a2b3d; border: 1px solid #3b6d99;
    border-radius: 8px; font-size: 12px; color: #ffd76a; line-height: 1.7; }
  .tut-spot .tut-spot-why { color: #cfe3f5; font-size: 11.5px; }
  .tut-spot .tut-spot-why b { color: #9fe0ff; }
  .tut-spot .tut-spot-go { margin-top: 6px; font-size: 11.5px; padding: 4px 10px; }
  /* 17AAW: チュートリアルの「次にやること」ポップアップ（.upd-ov を共用） */
  /* 17AAY: クエスト達成ポップ（軍港完成＝食料ゲット）。段の案内より一段お祝いの見た目にする */
  #tutQuestModal .upd-box.tut-quest { border-color: #8a6a1f;
    background: linear-gradient(160deg, #2b2410, #14203a 62%); }
  #tutQuestModal .upd-head { color: #ffd76a; }
  #tutQuestModal .tut-quest-emoji { text-align: center; font-size: 34px; line-height: 1.35; margin: 6px 0 2px; }
  #tutQuestModal .tut-quest-gain { text-align: center; font-size: 19px; font-weight: 700; color: #9fffd0;
    text-shadow: 0 0 12px rgba(80, 240, 170, .55); margin-bottom: 10px; }
  #tutQuestModal .tut-quest-gain b { color: #eaffef; font-size: 23px; }
  #tutQuestModal .tut-pop-body { font-size: 13.5px; line-height: 1.9; color: #dbe9f7; }
  #tutQuestModal .tut-pop-body b { color: #ffd76a; }
  #tutQuestModal .tut-pop-body .k { color: #9fb6cd; font-size: 12px; }
  #tutQuestModal .upd-btns { display: flex; justify-content: center; margin-top: 14px; }
  #tutQuestModal .upd-box.tut-quest { animation: tutQuestPop .34s cubic-bezier(.2,.9,.3,1.3); }
  @keyframes tutQuestPop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { #tutQuestModal .upd-box.tut-quest { animation: none; } }
  #tutStepModal .upd-head { color: #9fe0ff; }
  #tutStepModal .tut-pop-body { font-size: 13.5px; line-height: 1.9; color: #dbe9f7; }
  #tutStepModal .tut-pop-body b { color: #ffd76a; }
  #tutStepModal .tut-pop-spot { margin-top: 10px; padding: 9px 11px; background: #16304e;
    border: 1px solid #2f5f8a; border-radius: 8px; font-size: 12.5px; color: #ffd76a; line-height: 1.8; }
  #tutStepModal .tut-pop-spot span { color: #cfe3f5; font-size: 11.5px; }
  #tutStepModal .tut-pop-spot span b { color: #9fe0ff; }
  #tutStepModal .upd-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* 17AEI テスト海域・応募艦図鑑 */
.testsea-dex-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0 4px; }
.testsea-dex-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px 12px;
  border: 1px solid #365d78; border-radius: 10px; background: #102638; color: #dcebf4; text-decoration: none; cursor: pointer; text-align: left; }
.testsea-dex-choice.test { border-color: #987329; background: linear-gradient(145deg,#33280e,#142c40); }
.testsea-dex-choice b { color: #f2f8fc; font-size: 12.5px; }.testsea-dex-choice.test b { color: #ffe08a; }
.testsea-dex-choice span { color: #8faabc; font-size: 10.5px; line-height: 1.45; }
.testsea-dex-choice:hover,.testsea-dex-choice:focus-visible { border-color: #69b8e5; filter: brightness(1.08); }
.tsdex-ov { z-index: 1700; padding: 14px; background: rgba(1,7,14,.9); }
.tsdex-box { width: min(1180px,98vw); max-height: 94vh; overflow: auto; border: 1px solid #3c6c91;
  border-radius: 16px; background: radial-gradient(circle at 50% -20%,#173c5d,#091827 45%); box-shadow: 0 24px 80px #000c; }
.tsdex-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 17px;
  border-bottom: 1px solid #315875; background: rgba(10,28,44,.96); backdrop-filter: blur(10px); }
.tsdex-head b { display: block; color: #e8f7ff; font-size: 19px; }.tsdex-head span { display: block; color: #8fb3cb; font-size: 11.5px; }
.tsdex-head .dm-x { margin-left: auto; }.tsdex-note { margin: 13px 15px 8px; padding: 10px 12px; border: 1px solid #755f27;
  border-radius: 10px; color: #d9e5ee; background: #33290f99; font-size: 12px; line-height: 1.65; }.tsdex-note b{color:#ffe08a}
.tsdex-tools { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 8px 15px 12px; }
.tsdex-tools input { min-width: min(280px,100%); padding: 9px 12px; border: 1px solid #315875; border-radius: 9px; background: #071421; color: #e8f3fb; }
.tsdex-cats { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }.tsdex-cats button { border: 1px solid #315875; border-radius: 999px;
  padding: 5px 9px; background: #10283c; color: #a9c4d6; font-size: 11px; cursor: pointer; }.tsdex-cats button.on { background:#246ca2;color:#fff;border-color:#5db8eb }
.tsdex-count { color: #86a8bd; font-size: 11px; }.tsdex-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 11px; padding: 0 15px 18px; }
.tsdex-card { min-width: 0; padding: 12px; border: 1px solid #294e6b; border-radius: 12px; background: linear-gradient(150deg,#102a40,#0b1c2c); box-shadow: inset 0 1px #ffffff0c; }
.tsdex-card[hidden] { display:none }.tsdex-top { display:flex; gap:11px; align-items:center }.tsdex-top img { width:62px;height:62px;object-fit:contain;image-rendering:pixelated;
  border:1px solid #376987;border-radius:10px;padding:4px;background:linear-gradient(145deg,#398ac1,#164a71); }.tsdex-name { color:#f0f8fd;font-size:14px;font-weight:700;line-height:1.35 }
.tsdex-tags { display:flex;flex-wrap:wrap;gap:4px;margin-top:5px }.tsdex-tags span { padding:2px 6px;border-radius:999px;background:#173c58;color:#bfe4f7;font-size:9.5px;border:1px solid #2b6489 }
.tsdex-tags .tuning { background:#503b0d;color:#ffe08a;border-color:#866821 }.tsdex-stat { margin-top:9px;color:#9fbbce;font-size:10.5px;line-height:1.7 }.tsdex-stat b { color:#e5f4fd;font-weight:600 }
.tsdex-dot { color:#41647c }.tsdex-desc { margin-top:6px;color:#c5d5df;font-size:11px;line-height:1.6 }.tsdex-src { margin-top:7px;color:#66869b;font-size:9.5px;text-align:right }
@media(max-width:600px){.testsea-dex-split{grid-template-columns:1fr}.tsdex-ov{padding:0}.tsdex-box{width:100%;height:100%;max-height:none;border:0;border-radius:0}.tsdex-head{padding:11px 12px;flex-wrap:wrap}.tsdex-head b{font-size:16px}.tsdex-head .b2{margin-left:auto}.tsdex-grid{grid-template-columns:1fr;padding:0 10px 15px}.tsdex-note{margin:10px}.tsdex-tools{padding:7px 10px 10px}.tsdex-tools input{width:100%}}

/* 17AEU テスト海域と本海域の仕様差（テスト海域でだけ表示） */
.testsea-sec > .testsea-diff-open { width:100%;margin:10px 0 5px;border-color:#8c78da;background:linear-gradient(90deg,#1f2852,#332253);color:#f0ecff; }
.tsdiff-ov { z-index:1750;padding:14px;background:rgba(1,5,13,.9); }
.tsdiff-box { width:min(1040px,98vw);max-height:94vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid #7568d8;border-radius:16px;
  background:radial-gradient(circle at 50% -15%,#24235f,#0b1728 45%);box-shadow:0 26px 90px #000d,0 0 30px rgba(117,104,216,.18); }
.tsdiff-head { flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 17px;border-bottom:1px solid #494887;background:rgba(15,24,52,.96); }
.tsdiff-head > div { min-width:0; }.tsdiff-head b { display:block;color:#fff3bd;font-size:19px;line-height:1.35; }.tsdiff-head span { display:block;margin-top:2px;color:#a9b6da;font-size:11px; }
.tsdiff-head .dm-x { position:static;margin-left:auto;flex:0 0 32px;width:32px;height:32px; }
.tsdiff-body { overflow:auto;padding:14px 16px 18px;scrollbar-width:thin; }
.tsdiff-lead { padding:13px 15px;border:1px solid #77632d;border-radius:12px;background:linear-gradient(135deg,#3b310fbb,#18284bcc); }
.tsdiff-lead strong { display:inline-flex;padding:4px 9px;border-radius:999px;background:#69541a;color:#ffe99b;font-size:12px; }.tsdiff-lead p { margin:8px 0 0;color:#dce6f4;font-size:13px;line-height:1.7; }.tsdiff-lead p b{color:#fff0bd}
.tsdiff-section { margin-top:17px; }.tsdiff-section h3 { margin:0 0 8px;color:#e9efff;font-size:15px; }.tsdiff-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.tsdiff-card { min-width:0;padding:11px;border:1px solid #334c70;border-radius:11px;background:linear-gradient(145deg,#10263d,#101a31); }.tsdiff-card h4 { margin:0 0 8px;color:#f5f8ff;font-size:13px; }
.tsdiff-side { display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px;padding:7px 8px;border-radius:8px;font-size:11px;line-height:1.55; }.tsdiff-side + .tsdiff-side { margin-top:5px; }
.tsdiff-side b { font-size:10.5px; }.tsdiff-side span { color:#ccd8e6; }.tsdiff-side.test { background:#292151;border:1px solid #574d98; }.tsdiff-side.test b { color:#dfd6ff; }
.tsdiff-side.main { background:#0f3044;border:1px solid #285a70; }.tsdiff-side.main b { color:#b9e8f8; }
.tsdiff-note { display:grid;gap:5px;padding:12px 14px;border:1px solid #4b548a;border-radius:11px;background:#171f40;color:#ccd9ea;font-size:12px;line-height:1.65; }.tsdiff-note b{color:#ffe69b;font-size:13px}
.tsdiff-preview { display:grid;gap:7px;margin:0;padding:0;list-style:none; }.tsdiff-preview li { display:grid;gap:3px;padding:10px 12px;border:1px solid #6f5930;border-radius:10px;background:#30260f99; }.tsdiff-preview b{color:#ffe195;font-size:12px}.tsdiff-preview span{color:#d6e1ee;font-size:11px;line-height:1.6}
.tsdiff-caption { margin:7px 2px 0;color:#8fa4bd;font-size:10.5px; }.tsdiff-chips { display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none; }.tsdiff-chips li { padding:6px 9px;border:1px solid #40597c;border-radius:999px;background:#142943;color:#c9daeb;font-size:10.5px; }
.tsdiff-common { display:grid;gap:5px;margin-top:18px;padding:11px 13px;border:1px solid #397257;border-radius:11px;background:#102e24;color:#cde7dc;font-size:11.5px;line-height:1.65; }.tsdiff-common b{color:#a8efc9;font-size:12.5px}
.tsdiff-foot { flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid #39466c;background:#0e1b30; }.tsdiff-foot span { flex:1;color:#91a7c0;font-size:10.5px; }.tsdiff-foot button { flex:0 0 auto; }
@media(max-width:700px){#modeBanner.testsea .testsea-diff-open{margin-left:0}.tsdiff-ov{padding:0}.tsdiff-box{width:100%;height:100%;max-height:none;border:0;border-radius:0}.tsdiff-head{padding:11px 12px}.tsdiff-head b{font-size:16px}.tsdiff-body{padding:11px 10px 15px}.tsdiff-grid{grid-template-columns:1fr}.tsdiff-side{grid-template-columns:112px minmax(0,1fr)}.tsdiff-foot{padding:9px 10px}.tsdiff-foot span{display:none}.tsdiff-foot button{width:100%}}

/* 17AMR: テスト海域限定の開発工廠。配合の内部ルールは伏せ、所持量と投入量だけを明瞭にする。 */
.factory-ov-17amr { padding:14px;background:rgba(2,7,15,.86); }
.factory-box-17amr { position:relative;width:min(680px,96vw);max-height:94vh;overflow:auto;padding:20px;border:1px solid #4f87aa;
  border-radius:17px;background:radial-gradient(circle at 85% 0,#203259 0,transparent 38%),linear-gradient(150deg,#112b3d,#10172c 67%);
  box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 42px rgba(54,145,184,.07); }
.factory-box-17amr .factory-x-17amr { top:12px;right:12px; }
.factory-head-17amr { display:flex;align-items:center;gap:13px;padding-right:36px; }
.factory-mark-17amr { display:grid;place-items:center;width:52px;height:52px;border:1px solid #6ca2bc;border-radius:13px;
  background:linear-gradient(145deg,#173b52,#1b2444);font-size:28px;box-shadow:inset 0 0 18px rgba(106,215,255,.13); }
.factory-head-17amr b { display:block;color:#f6fbff;font-size:23px;letter-spacing:.04em; }
.factory-head-17amr small { display:block;margin-top:2px;color:#7fd8f3;font-size:11px; }
.factory-lead-17amr { margin:14px 0;color:#c9d9e8;font-size:13px;line-height:1.7; }
.factory-lead-17amr b { color:#ffe492; }
.factory-basic-guide17awn { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 12px;padding:10px;
  border:1px solid #3f6f85;border-radius:11px;background:linear-gradient(135deg,#0b2633,#102239); }
.factory-basic-guide17awn span { display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:6px;color:#c9dce8;font-size:10px;line-height:1.45; }
.factory-basic-guide17awn b { grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#23617c;color:#fff;font-size:11px; }
.factory-basic-guide17awn strong { color:#f1f8fc;font-size:11px; }
.factory-basic-guide17awn small { grid-column:2;color:#8fb1c4;font-size:9.5px; }
.factory-basic-note17awn { margin:0 0 12px;color:#a9c8d7;font-size:10.5px;line-height:1.55; }
.factory-basic-note17awn b { color:#9fe2bf; }
.factory-stock-17amr { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0 0 14px; }
.factory-stock-17amr span { display:grid;gap:3px;padding:9px 8px;border:1px solid #355b78;border-radius:10px;background:#0b2032;color:#a9c4d9;font-size:10.5px; }
.factory-stock-17amr b { color:#fff;font-size:16px;font-variant-numeric:tabular-nums; }
.factory-store-17avw{margin:0 0 14px;padding:13px;border:1px solid #6a668e;border-radius:13px;background:radial-gradient(circle at 100% 0,rgba(125,105,191,.18),transparent 45%),linear-gradient(145deg,#17223b,#10192d)}
.factory-store-head-17avw{display:grid;gap:2px}.factory-store-head-17avw>small{color:#9c93df;font-size:8.5px;font-weight:700;letter-spacing:.14em}.factory-store-head-17avw>b{color:#f4f0ff;font-size:15px}.factory-store-head-17avw>span{color:#aebbd0;font-size:10px;line-height:1.55}
.factory-store-grid-17avw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.factory-store-grid-17avw button{display:grid;gap:7px;min-width:0;padding:11px;text-align:left;border:1px solid #596f92;border-radius:10px;background:#101f35;color:#edf6ff;cursor:pointer}.factory-store-grid-17avw button:hover{border-color:#91c8ec;filter:brightness(1.1)}.factory-store-grid-17avw button span{display:grid;gap:2px}.factory-store-grid-17avw button b{font-size:12px}.factory-store-grid-17avw button small{color:#9eb5ca;font-size:9px}.factory-store-grid-17avw button em{color:#ffe59a;font-size:10px;font-style:normal;font-variant-numeric:tabular-nums}.factory-store-note-17avw{display:block;margin-top:9px;color:#9caac0;font-size:9.5px;line-height:1.55}
.factory-cost-17atj { margin-top:12px;padding:12px;border:1px solid #456c65;border-radius:12px;background:#0b232b;color:#cae8de;font-size:12px; }
.factory-cost-17atj>div { display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px;margin-top:9px; }
.factory-cost-17atj span { display:grid;gap:4px;color:#a8c6c0;font-size:11px; }
.factory-cost-17atj strong { color:#e1fff1;font-size:15px;font-variant-numeric:tabular-nums; }
.factory-precision-17apq.factory-support-17atj>label small { font-size:12px;line-height:1.6; }
.factory-precision-17apq.factory-support-17atj>label b { font-size:13px; }
.factory-priority-support-17awa{border-color:#b69a4b;background:radial-gradient(circle at 100% 0,rgba(255,215,105,.14),transparent 48%),#151f31}
.factory-priority-support-17awa>label b{color:#ffe7a0}.factory-priority-support-17awa>label small{color:#d2c79f}
.factory-support-shop-17atj { min-height:44px;padding:6px 12px;margin-left:6px; }
.factory-inputs-17amr { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.factory-inputs-17amr label { display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #344e71;border-radius:10px;background:#0c192c; }
.factory-inputs-17amr label span { flex:1;color:#d6e4f2;font-size:12px;font-weight:600; }
.factory-inputs-17amr label span small { display:block;margin-top:4px;color:#a9c4d9;font-weight:400; }
.factory-inputs-17amr label span small b { color:#fff;font-variant-numeric:tabular-nums; }
.factory-inputs-17amr input { min-height:44px;box-sizing:border-box; }
.factory-guide17azk { margin:10px 0;border:1px solid #355b78;border-radius:10px;padding:0 12px; }
.factory-guide17azk>summary { cursor:pointer;min-height:44px;align-content:center;color:#bddff4;font-weight:600; }
.factory-warning17azk { color:#c1d7e8;font-size:12px;line-height:1.6; }
.factory-warning17azk b { display:block;color:#ffd68c; }
.factory-box-17amr .factory-x-17amr { width:44px;height:44px; }
.factory-inputs-17amr input { width:96px;padding:8px 9px;border:1px solid #4b7394;border-radius:8px;background:#071321;color:#fff;
  text-align:right;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums; }
.factory-analysis-17axo{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:center;margin:9px 0 0;padding:10px 12px;border:1px solid #355976;border-radius:10px;background:linear-gradient(110deg,rgba(22,56,76,.88),rgba(20,31,55,.9));color:#dbeeff}
.factory-analysis-17axo>b{grid-row:1/3;color:#9edfff;white-space:nowrap}.factory-analysis-17axo>span{font-size:12px}.factory-analysis-17axo>span strong{color:#fff0ad}.factory-analysis-17axo>small{color:#8faabd;font-size:9px;line-height:1.45}
.factory-result-17amr { display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 0;padding:13px;border:1px solid #9d7930;
  border-radius:11px;background:linear-gradient(90deg,#352912,#2b203e); }
.factory-result-17amr[hidden] { display:none; }.factory-result-17amr > span{font-size:30px}.factory-result-17amr small{display:block;color:#dcbf79;font-size:10px}.factory-result-17amr b{display:block;color:#fff3bd;font-size:17px}
.factory-receipt-17axn{margin:10px 0 0;padding:13px;border:1px solid #3e716d;border-radius:12px;background:linear-gradient(145deg,rgba(12,40,45,.96),rgba(15,27,47,.96));box-shadow:inset 0 1px rgba(255,255,255,.04);color:#dffbf1}.factory-receipt-17axn[hidden]{display:none}.factory-receipt-17axn header{display:flex;align-items:center;justify-content:space-between;gap:12px}.factory-receipt-17axn header small{display:block;color:#78b8ad;font-size:8px;letter-spacing:.13em}.factory-receipt-17axn header b{display:block;margin-top:2px;color:#effff8;font-size:14px}.factory-receipt-17axn header em{flex:0 0 auto;padding:4px 8px;border:1px solid #477f79;border-radius:999px;color:#9ed8cb;font-size:9px;font-style:normal}.factory-receipt-resources-17axn{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}.factory-receipt-resources-17axn>span{min-width:0;padding:8px;border-radius:8px;background:rgba(6,22,29,.62)}.factory-receipt-resources-17axn b{display:block;color:#bfe7dc;font-size:9px;white-space:nowrap}.factory-receipt-resources-17axn small{display:flex;justify-content:space-between;gap:4px;margin-top:4px;color:#7fa8a1;font-size:8px}.factory-receipt-resources-17axn strong{color:#f3fff9;font-size:10px;font-variant-numeric:tabular-nums}.factory-receipt-extras-17axn{display:grid;gap:5px;margin-top:9px}.factory-receipt-extras-17axn span{display:flex;justify-content:space-between;gap:10px;padding-top:5px;border-top:1px solid rgba(125,188,177,.15);font-size:9px}.factory-receipt-extras-17axn b{color:#aacfc5}.factory-receipt-extras-17axn strong{color:#e9fff6}.factory-receipt-17axn footer{display:grid;gap:3px;margin-top:9px;padding-top:8px;border-top:1px dashed rgba(132,198,187,.26);color:#91bcb3;font-size:8px}.factory-receipt-17axn code{color:#d7eee8;font-size:8px;overflow-wrap:anywhere}.factory-receipt-17axn footer small{color:#769e97;font-size:8px}
.factory-journal-17axo{margin:12px 0;border:1px solid #385b78;border-radius:12px;background:linear-gradient(150deg,rgba(12,29,47,.96),rgba(19,25,46,.96));overflow:hidden}.factory-journal-17axo>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;color:#dff3ff;cursor:pointer;list-style:none}.factory-journal-17axo>summary::-webkit-details-marker{display:none}.factory-journal-17axo>summary span{display:grid}.factory-journal-17axo>summary small{color:#71b9dd;font-size:8px;letter-spacing:.14em}.factory-journal-17axo>summary b{font-size:14px}.factory-journal-17axo>summary em{margin-left:auto;color:#9bb3c7;font-size:10px;font-style:normal}.factory-journal-17axo>summary::after{content:'▾';color:#7bc8eb;transition:transform .16s}.factory-journal-17axo:not([open])>summary::after{transform:rotate(-90deg)}.factory-journal-17axo>p{margin:0;padding:0 14px 10px;color:#91a9bc;font-size:10px;line-height:1.55}.factory-journal-list-17axo{display:grid;gap:7px;max-height:390px;padding:0 10px 12px;overflow:auto}.factory-journal-empty-17axo{padding:18px;text-align:center;color:#7892a8;font-size:11px}.factory-journal-entry-17axo{padding:10px;border:1px solid #2d4a65;border-left:3px solid #6bc2e8;border-radius:9px;background:#0b1929}.factory-journal-entry-17axo.is-failed{border-left-color:#d66c55}.factory-journal-entry-17axo.is-pending{border-left-color:#d9b755}.factory-journal-entry-17axo header{display:flex;align-items:center;justify-content:space-between;gap:10px}.factory-journal-entry-17axo header>span{display:grid;min-width:0}.factory-journal-entry-17axo header small{color:#7899b1;font-size:8.5px}.factory-journal-entry-17axo header b{margin-top:2px;color:#ecf8ff;font-size:12px;overflow-wrap:anywhere}.factory-journal-entry-17axo.is-failed header b{color:#ffb7a3}.factory-journal-entry-17axo header button{flex:0 0 auto;padding:6px 9px;font-size:9px}.factory-journal-entry-17axo>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:8px}.factory-journal-entry-17axo>div span{display:flex;align-items:baseline;justify-content:center;gap:2px;min-width:0;padding:5px 3px;border-radius:6px;background:#101f32;color:#d6e8f5;font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace}.factory-journal-entry-17axo>div small{color:#7fc5a8;font-size:7px}
.factory-cinematic-17aqc{position:fixed;z-index:2147483000;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 48%,rgba(17,61,101,.68),rgba(1,5,13,.96) 64%);backdrop-filter:blur(8px)}
.factory-cinematic-17aqc[hidden]{display:none}.factory-cinematic-stage-17aqc{position:relative;isolation:isolate;width:min(540px,92vw);height:min(430px,72vh);min-height:330px;overflow:hidden;border:1px solid rgba(117,211,255,.65);border-radius:24px;background:radial-gradient(circle at 50% 43%,rgba(48,175,212,.24),transparent 29%),repeating-linear-gradient(90deg,rgba(112,201,233,.035) 0 1px,transparent 1px 32px),repeating-linear-gradient(0deg,rgba(112,201,233,.03) 0 1px,transparent 1px 32px),linear-gradient(155deg,#0b2639,#07101f 70%);box-shadow:0 0 70px rgba(53,188,238,.25),inset 0 0 75px rgba(20,142,187,.12)}
.factory-cinematic-stage-17aqc::before,.factory-cinematic-stage-17aqc::after{content:"";position:absolute;z-index:-1;inset:11%;border:1px solid rgba(109,218,255,.2);border-radius:50%;animation:factoryCore17aqc 1.6s linear infinite}.factory-cinematic-stage-17aqc::after{inset:23%;border-color:rgba(240,194,92,.26);animation-direction:reverse;animation-duration:1.15s}
.factory-core-17aqc{position:absolute;left:50%;top:43%;width:142px;height:142px;transform:translate(-50%,-50%);border:2px solid #91eaff;border-radius:50%;background:radial-gradient(circle,#fff8b0 0 5%,#69dcff 7% 15%,rgba(30,131,180,.45) 17% 34%,rgba(6,16,31,.78) 36%);box-shadow:0 0 24px #72ddff,0 0 80px rgba(89,211,255,.55),inset 0 0 28px rgba(255,255,255,.34);animation:factoryCorePulse17aqc .72s ease-in-out infinite alternate}
.factory-core-17aqc i{position:absolute;inset:-18px;border:1px dashed rgba(141,229,255,.74);border-radius:50%;animation:factoryCore17aqc 2.4s linear infinite}.factory-core-17aqc i:nth-child(2){inset:-38px;border-color:rgba(255,210,107,.58);animation-direction:reverse;animation-duration:3.2s}.factory-core-17aqc i:nth-child(3){inset:-62px;border-style:solid;border-color:rgba(112,189,255,.22);animation-duration:5s}.factory-core-17aqc span{position:absolute;inset:0;display:grid;place-items:center;color:#08243b;font-size:34px;filter:drop-shadow(0 0 8px #fff);animation:factoryGear17aqc 1.5s linear infinite}
.factory-materials-17aqc i{position:absolute;left:50%;top:43%;display:grid;place-items:center;width:48px;height:48px;margin:-24px;border:1px solid var(--c);border-radius:50%;color:var(--c);background:rgba(6,18,34,.94);font-size:20px;font-style:normal;box-shadow:0 0 18px color-mix(in srgb,var(--c) 58%,transparent);animation:factoryMaterial17aqc 2.14s cubic-bezier(.6,.02,.36,1) both;animation-delay:calc(var(--i)*70ms)}
.factory-sparks-17aqc i{position:absolute;left:50%;top:43%;width:5px;height:5px;border-radius:50%;background:#e7faff;box-shadow:0 0 10px #79dbff;animation:factorySpark17aqc 1.1s ease-out infinite;animation-delay:calc(var(--i)*67ms);transform:rotate(calc(var(--i)*22.5deg)) translateX(62px)}
.factory-scanline-17aqc{position:absolute;z-index:3;left:8%;right:8%;top:14%;height:2px;background:linear-gradient(90deg,transparent,#b8f3ff,transparent);box-shadow:0 0 18px #75dcff;opacity:.7;animation:factoryScan17aqc 1.5s ease-in-out infinite alternate}
.factory-cinematic-copy-17aqc{position:absolute;z-index:4;left:20px;right:20px;bottom:28px;text-align:center;text-shadow:0 2px 10px #000}.factory-cinematic-copy-17aqc small{display:block;color:#7ee3ff;font-size:9px;font-weight:700;letter-spacing:.22em}.factory-cinematic-copy-17aqc b{display:block;margin-top:5px;color:#fff2bd;font-size:clamp(20px,5vw,30px);letter-spacing:.08em}.factory-cinematic-copy-17aqc span{display:block;margin-top:5px;color:#bdd8e9;font-size:11px}.factory-cinematic-17aqc.is-precision .factory-cinematic-stage-17aqc{border-color:#8cf4c7;background:radial-gradient(circle at 50% 43%,rgba(65,211,164,.22),transparent 29%),repeating-linear-gradient(90deg,rgba(129,238,199,.035) 0 1px,transparent 1px 32px),repeating-linear-gradient(0deg,rgba(129,238,199,.03) 0 1px,transparent 1px 32px),linear-gradient(155deg,#0a302e,#07101f 70%)}
.factory-cinematic-17aqc.is-failed .factory-cinematic-stage-17aqc{border-color:#ef835e;background:radial-gradient(circle at 50% 43%,rgba(198,62,40,.24),transparent 31%),repeating-linear-gradient(90deg,rgba(255,137,96,.04) 0 1px,transparent 1px 32px),repeating-linear-gradient(0deg,rgba(255,137,96,.035) 0 1px,transparent 1px 32px),linear-gradient(155deg,#351810,#120d17 70%);box-shadow:0 0 70px rgba(217,68,40,.25),inset 0 0 75px rgba(183,53,32,.16);animation:factoryFailureShake17aqd .22s linear 5}.factory-cinematic-17aqc.is-failed .factory-core-17aqc{border-color:#ff9876;background:radial-gradient(circle,#fff0c0 0 5%,#ff775d 7% 15%,rgba(139,40,35,.58) 17% 34%,rgba(22,9,15,.84) 36%);box-shadow:0 0 22px #ff7257,0 0 70px rgba(255,86,51,.45)}.factory-cinematic-17aqc.is-failed .factory-core-17aqc span{color:#43120e;animation:factoryFailureGear17aqd .24s ease-in-out infinite alternate}.factory-cinematic-17aqc.is-failed .factory-materials-17aqc i{animation-direction:reverse;filter:grayscale(.35)}.factory-cinematic-17aqc.is-failed .factory-sparks-17aqc i{background:#ff9b78;box-shadow:0 0 10px #ff573f}.factory-cinematic-17aqc.is-failed .factory-cinematic-copy-17aqc small,.factory-cinematic-17aqc.is-failed .factory-cinematic-copy-17aqc b{color:#ffb28f}
.factory-result-art-17aqc{position:relative;display:grid;place-items:center;flex:0 0 92px;width:92px;height:92px}.factory-result-art-17aqc i{position:absolute;inset:4px;border:1px solid rgba(255,226,136,.6);border-radius:50%;background:radial-gradient(circle,rgba(255,229,145,.28),transparent 62%);box-shadow:0 0 30px rgba(255,206,93,.25);animation:factoryCore17aqc 6s linear infinite}.factory-result-image-17aqc{position:relative;width:76px;height:76px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 9px rgba(131,224,255,.8)) drop-shadow(0 10px 12px rgba(0,0,0,.5))}.factory-result-copy-17aqc{min-width:0}.factory-result-17amr.factory-reveal-17aqc{animation:factoryReveal17aqc .62s cubic-bezier(.18,.75,.18,1) both}.factory-result-17amr.is-jackpot,.factory-result-17amr.is-target-hit{border-color:#ffe078;background:radial-gradient(circle at 15% 50%,rgba(255,226,92,.25),transparent 40%),linear-gradient(90deg,#47330c,#392044);box-shadow:0 0 34px rgba(255,210,85,.2)}.factory-result-17amr.is-jackpot .factory-result-image-17aqc,.factory-result-17amr.is-target-hit .factory-result-image-17aqc{filter:drop-shadow(0 0 12px #fff3a5) drop-shadow(0 0 25px rgba(255,190,58,.85))}
.factory-result-17amr.factory-failed-17aqd{justify-content:flex-start;border-color:#c95842;background:radial-gradient(circle at 12% 50%,rgba(202,66,42,.22),transparent 42%),linear-gradient(100deg,#35150f,#231524);box-shadow:inset 0 0 24px rgba(213,76,47,.13)}.factory-result-17amr.factory-failed-17aqd small{color:#ff9f7b}.factory-result-17amr.factory-failed-17aqd b{color:#ffd3bd}.factory-result-17amr.factory-failed-17aqd .factory-result-copy-17aqc span{display:block;margin-top:4px;color:#d8ada0;font-size:10px;line-height:1.5}.factory-failure-art-17aqd{position:relative;display:grid;place-items:center;flex:0 0 74px;width:74px;height:74px}.factory-failure-art-17aqd span{color:#ff8c69;font-size:38px;filter:drop-shadow(0 0 8px rgba(255,92,57,.72));transform:rotate(-18deg)}.factory-failure-art-17aqd i{position:absolute;inset:7px;border:2px dashed rgba(255,130,92,.48);border-radius:50%;animation:factoryFailureRing17aqd 1.2s ease-out infinite}
.factory-note-17amr { margin:12px 2px;color:#8fa9bf;font-size:10.5px;line-height:1.6; }
.factory-actions-17amr { display:flex;justify-content:flex-end;gap:8px; }.factory-actions-17amr button{min-height:40px}
/* 17APQ: 数字の確率を公開せず、重点研究の蓄積・研究部品・精密開発の選択状態を見失わない構成。 */
.factory-research-17apq,.factory-precision-17apq{margin-top:12px;padding:12px;border:1px solid #365873;border-radius:12px;background:linear-gradient(145deg,rgba(10,31,48,.92),rgba(15,25,47,.92))}
.factory-research-17apq{border-color:#4f6f99;background:radial-gradient(circle at 100% 0,rgba(75,120,178,.18),transparent 44%),linear-gradient(145deg,#0b2234,#121a31)}
.factory-research-head-17apq{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.factory-research-head-17apq>div small,.factory-choice-head-17apq small{display:block;color:#7fa9cc;font-size:8.5px;font-weight:700;letter-spacing:.14em}.factory-research-head-17apq>div b{display:block;color:#ecf7ff;font-size:15px}
.factory-research-state-17apq{display:grid;gap:1px;text-align:right}.factory-research-state-17apq b{color:#ffe69a;font-size:11px}.factory-research-state-17apq small{color:#9db5ca;font-size:9px}
.factory-target-17apq{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px;margin-top:9px;color:#b9cce0;font-size:11px}.factory-target-17apq select{min-width:0;width:100%;padding:8px 9px;border:1px solid #527697;border-radius:8px;background:#081724;color:#f0f7fb}.factory-target-17apq select:disabled{opacity:.55}
.factory-research-17apq>p{margin:8px 0;color:#9bb2c5;font-size:10px;line-height:1.55}.factory-boost-17apq,.factory-precision-17apq>label{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid #3a5a75;border-radius:9px;background:#0a1d2d;color:#dbe9f3;cursor:pointer}.factory-boost-17apq.disabled,.factory-precision-17apq>label.disabled{opacity:.48;cursor:not-allowed}.factory-boost-17apq input,.factory-precision-17apq input{width:18px;height:18px;margin:1px 0 0;accent-color:#6ed4a4}.factory-boost-17apq span,.factory-precision-17apq label span{display:grid;gap:2px}.factory-boost-17apq b,.factory-precision-17apq label b{font-size:11.5px}.factory-boost-17apq small,.factory-precision-17apq label small{color:#94adbf;font-size:9.5px;line-height:1.45}
.factory-precision-17apq{border-color:#477a67;background:radial-gradient(circle at 0 0,rgba(74,182,139,.14),transparent 48%),#0a1e28}.factory-precision-stock-17apq{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:7px;color:#9fb9b0;font-size:10px}.factory-precision-stock-17apq b{color:#c8ffe4;font-size:13px}.factory-precision-shop-17apq{min-height:30px;margin-left:5px;padding:4px 9px;font-size:9.5px}
.factory-result-17amr.factory-pending-17apq{display:block;padding:14px}.factory-choice-head-17apq{text-align:center}.factory-choice-head-17apq b{display:block;color:#effff7;font-size:16px}.factory-choice-head-17apq span{display:block;margin-top:3px;color:#a7beb5;font-size:9.5px}.factory-choices-17apq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}.factory-choices-17apq button{display:grid;justify-items:center;gap:3px;min-width:0;min-height:140px;padding:10px 7px;border:1px solid #4f826d;border-radius:10px;background:linear-gradient(155deg,#153a38,#12243a);color:#ecfff5;cursor:pointer;opacity:0;animation:factoryReveal17aqc .48s cubic-bezier(.18,.75,.18,1) forwards;animation-delay:calc(var(--factory-choice-index)*110ms);transition:transform .14s,border-color .14s,filter .14s}.factory-choices-17apq button:hover{transform:translateY(-2px);border-color:#90e1bd;filter:brightness(1.12)}.factory-choices-17apq button:disabled{opacity:.5;transform:none;cursor:wait}.factory-choice-image-17aqc{width:58px;height:58px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 7px rgba(128,232,200,.65))}.factory-choices-17apq button>small{color:#9bc5b3;font-size:8.5px}.factory-choices-17apq button>b{max-width:100%;color:#fff;font-size:12px;overflow-wrap:anywhere}.factory-choices-17apq button>em{margin-top:3px;color:#9ff1c7;font-size:9px;font-style:normal}.factory-duplicate-17apq{margin-top:3px!important;color:#a9f1c9!important}
@keyframes factoryCore17aqc{to{transform:rotate(360deg)}}
@keyframes factoryCorePulse17aqc{from{transform:translate(-50%,-50%) scale(.94);opacity:.88}to{transform:translate(-50%,-50%) scale(1.04);opacity:1}}
@keyframes factoryGear17aqc{to{transform:rotate(-360deg)}}
@keyframes factoryMaterial17aqc{0%{opacity:0;transform:rotate(calc(var(--i)*72deg)) translateX(215px) rotate(calc(var(--i)*-72deg)) scale(.7)}18%{opacity:1}72%{opacity:1;transform:rotate(calc(var(--i)*72deg + 230deg)) translateX(118px) rotate(calc(var(--i)*-72deg - 230deg)) scale(1)}100%{opacity:0;transform:rotate(calc(var(--i)*72deg + 420deg)) translateX(12px) rotate(calc(var(--i)*-72deg - 420deg)) scale(.2)}}
@keyframes factorySpark17aqc{0%{opacity:0;transform:rotate(calc(var(--i)*22.5deg)) translateX(55px) scale(.2)}35%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--i)*22.5deg)) translateX(142px) scale(1.2)}}
@keyframes factoryScan17aqc{from{transform:translate3d(0,0,0);opacity:.2}to{transform:translate3d(0,240px,0);opacity:.9}}
@keyframes factoryReveal17aqc{0%{opacity:0;transform:translateY(18px) scale(.9);filter:brightness(2.2) blur(5px)}55%{opacity:1;transform:translateY(-3px) scale(1.025);filter:brightness(1.35) blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes factoryFailureShake17aqd{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes factoryFailureGear17aqd{from{transform:rotate(-22deg)}to{transform:rotate(12deg)}}
@keyframes factoryFailureRing17aqd{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.25)}}
@media(max-width:620px){.factory-ov-17amr{padding:0}.factory-box-17amr{width:100%;height:100%;max-height:none;border:0;border-radius:0;padding:16px 12px}.factory-basic-guide17awn{grid-template-columns:1fr}.factory-stock-17amr{grid-template-columns:repeat(2,minmax(0,1fr))}.factory-store-grid-17avw{grid-template-columns:1fr}.factory-store-grid-17avw button{min-height:64px}.factory-inputs-17amr{grid-template-columns:1fr}.factory-actions-17amr{position:sticky;z-index:2;bottom:0;padding:10px 0;background:linear-gradient(transparent,#10172c 28%)}.factory-actions-17amr .factory-run-17amr{flex:1}.factory-research-head-17apq{display:grid}.factory-research-state-17apq{text-align:left}.factory-choices-17apq{grid-template-columns:1fr}.factory-choices-17apq button{grid-template-columns:auto 1fr auto;justify-items:start;align-items:center;min-height:82px;text-align:left}.factory-choice-image-17aqc{grid-row:1/4;width:58px;height:58px}.factory-choices-17apq button>em{grid-column:3;grid-row:1/4}.factory-precision-shop-17apq{min-height:38px}.factory-cinematic-stage-17aqc{height:72vh;min-height:310px;border-radius:18px}.factory-core-17aqc{top:42%;width:112px;height:112px}.factory-materials-17aqc i,.factory-sparks-17aqc i{top:42%}.factory-cinematic-copy-17aqc{bottom:24px}.factory-result-art-17aqc{flex-basis:74px;width:74px;height:74px}.factory-result-image-17aqc{width:62px;height:62px}.factory-receipt-resources-17axn{grid-template-columns:repeat(2,minmax(0,1fr))}.factory-receipt-17axn header{align-items:flex-start}.factory-receipt-extras-17axn span{align-items:flex-start}.factory-receipt-extras-17axn strong{text-align:right}}
/* 17B51: 研究対象を変えると蓄積が半分になる注意は、目立つ色と枠で出す（全画面幅共通）。 */
.factory-research-17apq>p.factory-research-warn-17b51{margin:8px 0;padding:8px 10px;border:1px solid #b9853a;border-radius:8px;background:rgba(90,58,14,.35);color:#ffe2a8;font-size:12px;font-weight:600;line-height:1.6}
.factory-research-warn-17b51 b{color:#fff3cf}
.factory-research-state-17apq small.factory-research-carry-17b51{color:#ffc978}
/* 17B51: PCの開発工廠は文字が小さく、説明・数値や大事な注意（研究対象の変更で蓄積が減る等）を見落としやすかった
   （びーでれ氏要望 2026-09-22）。PC幅（スマホ用の全画面表示より広い幅）だけ、小さい文字を読みやすい大きさへ底上げし、枠も広げる。 */
@media (min-width:621px){
  #factoryModal17amr .factory-box-17amr{width:min(820px,96vw)}
  #factoryModal17amr .factory-head-17amr small{font-size:14.5px}
  #factoryModal17amr .factory-lead-17amr{font-size:16px}
  #factoryModal17amr .factory-basic-guide17awn span{font-size:13.5px}
  #factoryModal17amr .factory-basic-guide17awn b{font-size:14.5px}
  #factoryModal17amr .factory-basic-guide17awn strong{font-size:14.5px}
  #factoryModal17amr .factory-basic-guide17awn small{font-size:13px}
  #factoryModal17amr .factory-basic-note17awn{font-size:14px}
  #factoryModal17amr .factory-stock-17amr span{font-size:14px}
  #factoryModal17amr .factory-store-head-17avw>small{font-size:12px}
  #factoryModal17amr .factory-store-head-17avw>span{font-size:13.5px}
  #factoryModal17amr .factory-store-grid-17avw button b{font-size:16px}
  #factoryModal17amr .factory-store-grid-17avw button small{font-size:12.5px}
  #factoryModal17amr .factory-store-grid-17avw button em{font-size:13.5px}
  #factoryModal17amr .factory-store-note-17avw{font-size:13px}
  #factoryModal17amr .factory-cost-17atj{font-size:16px}
  #factoryModal17amr .factory-cost-17atj span{font-size:14.5px}
  #factoryModal17amr .factory-precision-17apq.factory-support-17atj>label small{font-size:16px}
  #factoryModal17amr .factory-precision-17apq.factory-support-17atj>label b{font-size:16px}
  #factoryModal17amr .factory-inputs-17amr label span{font-size:16px}
  #factoryModal17amr .factory-warning17azk{font-size:16px}
  #factoryModal17amr .factory-analysis-17axo>span{font-size:16px}
  #factoryModal17amr .factory-analysis-17axo>small{font-size:12.5px}
  #factoryModal17amr .factory-result-17amr small{font-size:13.5px}
  #factoryModal17amr .factory-receipt-17axn header small{font-size:12px}
  #factoryModal17amr .factory-receipt-17axn header em{font-size:12.5px}
  #factoryModal17amr .factory-receipt-resources-17axn b{font-size:12.5px}
  #factoryModal17amr .factory-receipt-resources-17axn small{font-size:12px}
  #factoryModal17amr .factory-receipt-resources-17axn strong{font-size:13.5px}
  #factoryModal17amr .factory-receipt-extras-17axn span{font-size:12.5px}
  #factoryModal17amr .factory-receipt-17axn footer{font-size:12px}
  #factoryModal17amr .factory-receipt-17axn code{font-size:12px}
  #factoryModal17amr .factory-receipt-17axn footer small{font-size:12px}
  #factoryModal17amr .factory-journal-17axo>summary small{font-size:12px}
  #factoryModal17amr .factory-journal-17axo>summary em{font-size:13.5px}
  #factoryModal17amr .factory-journal-17axo>p{font-size:13.5px}
  #factoryModal17amr .factory-journal-empty-17axo{font-size:14.5px}
  #factoryModal17amr .factory-journal-entry-17axo header small{font-size:12px}
  #factoryModal17amr .factory-journal-entry-17axo header b{font-size:16px}
  #factoryModal17amr .factory-journal-entry-17axo header button{font-size:12.5px}
  #factoryModal17amr .factory-journal-entry-17axo>div small{font-size:12px}
  #factoryModal17amr .factory-cinematic-copy-17aqc small{font-size:12.5px}
  #factoryModal17amr .factory-cinematic-copy-17aqc span{font-size:14.5px}
  #factoryModal17amr .factory-result-17amr.factory-failed-17aqd .factory-result-copy-17aqc span{font-size:13.5px}
  #factoryModal17amr .factory-note-17amr{font-size:14px}
  #factoryModal17amr .factory-research-head-17apq>div small,#factoryModal17amr .factory-choice-head-17apq small{font-size:12px}
  #factoryModal17amr .factory-research-state-17apq b{font-size:14.5px}
  #factoryModal17amr .factory-research-state-17apq small{font-size:12.5px}
  #factoryModal17amr .factory-target-17apq{font-size:14.5px}
  #factoryModal17amr .factory-research-17apq>p{font-size:13.5px}
  #factoryModal17amr .factory-boost-17apq b,#factoryModal17amr .factory-precision-17apq label b{font-size:15.5px}
  #factoryModal17amr .factory-boost-17apq small,#factoryModal17amr .factory-precision-17apq label small{font-size:13px}
  #factoryModal17amr .factory-precision-stock-17apq{font-size:13.5px}
  #factoryModal17amr .factory-precision-stock-17apq b{font-size:16px}
  #factoryModal17amr .factory-precision-shop-17apq{font-size:13px}
  #factoryModal17amr .factory-choice-head-17apq span{font-size:13px}
  #factoryModal17amr .factory-choices-17apq button>small{font-size:12px}
  #factoryModal17amr .factory-choices-17apq button>b{font-size:16px}
  #factoryModal17amr .factory-choices-17apq button>em{font-size:12.5px}
  #factoryModal17amr .factory-resource-showcase-17aqi figure>b{font-size:14.5px}
  #factoryModal17amr .factory-resource-map-17aqi i{font-size:14.5px}
  #factoryModal17amr .factory-resource-showcase-17aqi figcaption{font-size:12.5px}
}
@media(max-width:620px){.factory-analysis-17axo{grid-template-columns:1fr;gap:4px}.factory-analysis-17axo>b{grid-row:auto}.factory-journal-entry-17axo header{align-items:flex-start}.factory-journal-entry-17axo>div{grid-template-columns:repeat(2,minmax(0,1fr))}.factory-journal-entry-17axo>div span:last-child{grid-column:1/3}.factory-journal-list-17axo{max-height:330px}}
@media (prefers-reduced-motion:reduce){.factory-cinematic-17aqc *,.factory-result-17amr.factory-reveal-17aqc,.factory-choices-17apq button{animation:none!important;transition:none!important}.factory-cinematic-stage-17aqc::before,.factory-cinematic-stage-17aqc::after{animation:none}.factory-choices-17apq button{opacity:1}}

/* 17AHH シャッフル後のレッド・クリスタル正式仕様公開 */
.crystal-reveal-loading17ahh { padding:22px 14px;text-align:center;border:1px solid #9c3048;border-radius:13px;
  color:#ffc2ca;background:linear-gradient(135deg,rgba(121,19,42,.5),rgba(29,38,65,.78)); }
.crystal-reveal-hero17ahh { display:flex;align-items:center;gap:15px;padding:15px;border:1px solid #e05a70;border-radius:15px;
  background:radial-gradient(circle at 8% 0,rgba(255,72,100,.3),transparent 45%),linear-gradient(135deg,#471321,#17273d 72%);
  box-shadow:inset 0 0 24px rgba(255,91,112,.08),0 9px 28px rgba(0,0,0,.3); }
.crystal-reveal-gem17ahh { flex:0 0 auto;width:68px;height:68px;image-rendering:pixelated;
  filter:drop-shadow(0 0 11px rgba(255,61,91,.92)) drop-shadow(0 0 24px rgba(255,196,93,.32)); }
.crystal-reveal-kicker17ahh { color:#ffd47a;font-size:10.5px;font-weight:700;letter-spacing:.16em; }
.crystal-reveal-title17ahh { margin-top:2px;color:#ffd8dd;font-size:20px;font-weight:700;line-height:1.35;text-shadow:0 0 15px rgba(255,85,111,.48); }
.crystal-reveal-hero17ahh p { margin:7px 0 0;color:#e9f0f7;font-size:13px;line-height:1.72; }
.crystal-reveal-grid17ahh { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px; }
.crystal-reveal-grid17ahh section { min-width:0;padding:11px 12px;border:1px solid #3d536e;border-radius:11px;background:linear-gradient(145deg,#12283d,#101b2c); }
.crystal-reveal-grid17ahh section:nth-child(1),.crystal-reveal-grid17ahh section:nth-child(2) { border-color:#a34758;background:linear-gradient(145deg,#351522,#11263a); }
.crystal-reveal-grid17ahh b { display:block;color:#ffd28b;font-size:12.5px; }.crystal-reveal-grid17ahh p { margin:5px 0 0;color:#dbe8f3;font-size:11.5px;line-height:1.65; }
.crystal-reveal-grid17ahh strong { display:block;margin-top:7px;color:#ffb4bf;font-size:11px;line-height:1.6; }
.crystal-reveal-grid17ahh small { display:block;margin-top:7px;color:#9db4c9;font-size:10.5px;line-height:1.55; }
.crystal-reveal-footer17ahh { margin-top:11px;padding:9px 12px;text-align:center;border:1px solid rgba(255,210,111,.48);border-radius:10px;
  color:#ffe09a;font-size:13px;font-weight:700;letter-spacing:.03em;background:rgba(89,54,15,.28); }
@media(max-width:650px){.crystal-reveal-hero17ahh{align-items:flex-start;padding:12px}.crystal-reveal-gem17ahh{width:52px;height:52px}.crystal-reveal-title17ahh{font-size:16px}.crystal-reveal-grid17ahh{grid-template-columns:1fr}}

/* 17ANT: 月末シャッフル後の受賞者・賞品を、表彰式として一度だけ大きく見せる。 */
.upd-ov .upd-box.season-ceremony-modal17ant{width:min(800px,94vw);max-height:90vh;overflow:auto;border:3px solid #e9c96b!important;box-shadow:0 0 0 5px rgba(231,194,87,.13),0 32px 100px rgba(0,0,0,.78)!important;background:radial-gradient(circle at 50% -10%,rgba(255,213,90,.22),transparent 38%),linear-gradient(150deg,#112d46,#0c1828 62%,#241b18)!important}
.season-resume-banner17ant{margin:5px 0 13px;padding:12px 15px;text-align:center;border:1px solid #79d5ff;border-radius:12px;color:#d7f5ff;background:linear-gradient(90deg,rgba(25,105,151,.38),rgba(41,71,123,.4));font-size:15px}.season-resume-banner17ant small{color:#a9c9db}
/* 🔴 17BDW: シャッフル完了の案内「あなたの配置」と、最上位の海域だけの特徴 */
.season-place17bdw{margin:4px 0 12px}.season-place-line17bdw{margin:0 0 6px;padding:9px 13px;border:1px solid #79d5ff;border-radius:10px;background:rgba(25,82,116,.33);color:#e3f4ff;font-size:14.5px}
.season-alpha17bdw{padding:9px 13px;border:1px solid #e7b94f;border-radius:10px;background:linear-gradient(135deg,rgba(120,80,10,.32),rgba(60,40,8,.28));color:#ffe9b8;font-size:13.5px}.season-alpha17bdw ul{margin:5px 0 0;padding-left:1.25em}.season-alpha17bdw li{margin:2px 0}
.season-honors-loading17ant{padding:28px 14px;text-align:center;border:1px solid #b8953c;border-radius:13px;color:#ffe4a0;background:rgba(96,67,13,.25)}
.season-honor-ceremony17ant{position:relative;overflow:hidden;padding:17px;border:1px solid #d5af4c;border-radius:16px;background:radial-gradient(circle at 90% 0,rgba(255,216,105,.18),transparent 34%),linear-gradient(145deg,rgba(45,55,70,.96),rgba(23,28,43,.98))}
.season-honor-ceremony17ant:before{content:'✦';position:absolute;right:19px;top:8px;color:#ffe598;font-size:32px;text-shadow:-35px 20px 0 rgba(255,229,152,.5),-74px 4px 0 rgba(255,229,152,.25)}
.season-honor-kicker17ant{text-align:center;color:#eecf79;font-size:10px;font-weight:600;letter-spacing:.18em}.season-honor-ceremony17ant h2{margin:2px 0 13px;text-align:center;color:#fff1b6;font-size:25px;text-shadow:0 0 18px rgba(255,210,88,.38)}
.season-grand-champion17ant{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:15px;border:1px solid #f0cf71;border-radius:14px;background:linear-gradient(110deg,rgba(111,72,10,.53),rgba(52,35,30,.78),rgba(37,44,66,.85));box-shadow:inset 0 0 26px rgba(255,204,84,.08)}
.season-grand-crown17ant{font-size:42px;filter:drop-shadow(0 0 9px rgba(255,211,80,.6))}.season-grand-champion17ant small,.season-grand-champion17ant span{display:block;color:#ddc98d}.season-grand-champion17ant strong{display:block;color:#fff4c2;font-size:22px;line-height:1.35}.season-grand-champion17ant img{width:60px;height:60px;image-rendering:pixelated;filter:drop-shadow(0 0 13px rgba(255,61,88,.9))}
.season-honor-intro17ant{margin:13px 0;text-align:center;color:#dfe8ef}.season-honor-seas17ant{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.season-next-prize17ant{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin:13px 0;padding:14px;border:1px solid #50bfff;border-radius:14px;background:radial-gradient(circle at 0 50%,rgba(76,191,255,.28),transparent 46%),linear-gradient(110deg,rgba(14,65,112,.88),rgba(18,40,70,.9));box-shadow:inset 0 0 24px rgba(68,185,255,.1)}.season-next-prize17ant img{width:64px;height:64px;image-rendering:pixelated;filter:hue-rotate(220deg) saturate(1.65) brightness(1.18) drop-shadow(0 0 10px rgba(48,166,255,.9))}.season-next-prize17ant small,.season-next-prize17ant strong,.season-next-prize17ant span{display:block}.season-next-prize17ant small{color:#a9dbf6}.season-next-prize17ant strong{color:#75d4ff;font-size:21px}.season-next-prize17ant p{margin:4px 0;color:#e1f5ff}.season-next-prize17ant span{color:#b6d7e8;font-size:11px}
.season-honor-sea17ant{min-width:0;border:1px solid #536b82;border-radius:11px;background:rgba(10,24,39,.62);overflow:hidden}.season-honor-sea17ant summary{display:flex;justify-content:space-between;gap:8px;padding:9px 11px;cursor:pointer;color:#dcecff}.season-honor-sea17ant summary b{color:#e8ca75;font-size:11px}.season-honor-winners17ant{padding:0 8px 8px}
.season-honor-row17ant{display:grid;grid-template-columns:38px minmax(92px,.8fr) minmax(0,1.8fr);gap:7px;align-items:center;padding:7px 3px;border-top:1px solid rgba(98,122,145,.28);font-size:11.5px}.season-honor-row17ant strong{min-width:0;color:#f3f6f9;overflow-wrap:anywhere}.season-honor-rank17ant{color:#c6d5e2;font-weight:700}.season-honor-prizes17ant{display:flex!important;flex-wrap:wrap;gap:3px}.season-honor-prize17ant{display:inline-block!important;padding:2px 5px;border:1px solid #47647d;border-radius:999px;color:#cfe3f2!important;background:#173047;font-size:9.5px}.season-honor-prize17ant.is-crystal{border-color:#ff7388;color:#ffd6dc!important;background:#4a1723;box-shadow:0 0 8px rgba(255,78,105,.23)}
.season-shuffle-safe17ant{margin:12px 0 10px;padding:10px 12px;border-left:3px solid #75d6aa;color:#c9ddd6;background:rgba(29,82,65,.2)}
/* 🟡 17B68 シーズン・クリスタル一覧（シャッフル完了ポップアップ） */
.crystal-seasons17b68{margin-top:10px;padding:12px;border:1px solid #4a5f7a;border-radius:13px;background:linear-gradient(150deg,rgba(20,38,60,.9),rgba(14,24,40,.95))}.crystal-seasons-head17b68{font-weight:700;font-size:15px;color:#ffd76a;margin-bottom:9px}.crystal-seasons-grid17b68{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.crystal-seasons-grid17b68 section{display:flex;gap:9px;align-items:flex-start;min-width:0;padding:10px;border-radius:11px;border:1px solid #3d536e;background:rgba(10,20,34,.6)}.crystal-seasons-grid17b68 img{width:36px;height:36px;flex:none;image-rendering:pixelated}.crystal-seasons-grid17b68 small{display:block;color:#9db4c9;font-size:10.5px}.crystal-seasons-grid17b68 b{display:block;font-size:13px;margin:1px 0 4px}.crystal-seasons-grid17b68 p{margin:0;color:#e1eaf4;font-size:11.5px;line-height:1.6}.crystal-seasons-grid17b68 .tone-r{border-color:#a34758}.crystal-seasons-grid17b68 .tone-r b{color:#ff9aa8}.crystal-seasons-grid17b68 .tone-r img{filter:drop-shadow(0 0 6px rgba(255,80,110,.8))}.crystal-seasons-grid17b68 .tone-b{border-color:#3a86c8}.crystal-seasons-grid17b68 .tone-b b{color:#7fd0ff}.crystal-seasons-grid17b68 .tone-b img{filter:hue-rotate(220deg) saturate(1.65) brightness(1.18) drop-shadow(0 0 6px rgba(48,166,255,.8))}.crystal-seasons-grid17b68 .tone-y{border-color:#c9a020}.crystal-seasons-grid17b68 .tone-y b{color:#ffd84a}.crystal-seasons-grid17b68 .tone-y img{filter:sepia(1) saturate(6) hue-rotate(15deg) brightness(1.9) drop-shadow(0 0 6px rgba(255,210,60,.8))}.crystal-seasons-foot17b68{margin-top:9px;color:#b6c8da;font-size:11px;line-height:1.6}@media(max-width:650px){.crystal-seasons-grid17b68{grid-template-columns:1fr}}
/* 🟡 17B68 イエロー・クリスタルの次回賞品 */
.season-grand-champion17ant img.b17b68{filter:hue-rotate(220deg) saturate(1.65) brightness(1.18) drop-shadow(0 0 10px rgba(48,166,255,.9))}.season-grand-champion17ant img.y17b68{filter:sepia(1) saturate(6) hue-rotate(15deg) brightness(1.9) drop-shadow(0 0 10px rgba(255,210,60,.9))}
.season-next-prize17ant.y17b68{border-color:#e0b020;background:radial-gradient(circle at 0 50%,rgba(255,214,80,.28),transparent 46%),linear-gradient(110deg,rgba(96,72,10,.88),rgba(46,38,16,.92))}.season-next-prize17ant.y17b68 img{filter:sepia(1) saturate(6) hue-rotate(15deg) brightness(1.9) drop-shadow(0 0 10px rgba(255,210,60,.9))}.season-next-prize17ant.y17b68 small{color:#f3dc9a}.season-next-prize17ant.y17b68 strong{color:#ffd84a}
@media(max-width:650px){.upd-ov .upd-box.season-ceremony-modal17ant{width:96vw}.season-honor-ceremony17ant{padding:12px}.season-honor-ceremony17ant h2{font-size:21px}.season-grand-champion17ant{grid-template-columns:auto 1fr}.season-grand-champion17ant img{display:none}.season-grand-crown17ant{font-size:32px}.season-grand-champion17ant strong{font-size:18px}.season-next-prize17ant{grid-template-columns:48px 1fr;gap:9px}.season-next-prize17ant img{width:46px;height:46px}.season-next-prize17ant strong{font-size:18px}.season-honor-seas17ant{grid-template-columns:1fr}.season-honor-row17ant{grid-template-columns:36px minmax(90px,.85fr) minmax(0,1.5fr)}}

/* 17AII 運用フラグ開放後だけ遅延表示する特別海域画面 */
.gs17aii-settings{border-color:#6658ab;background:radial-gradient(circle at 0 0,rgba(106,76,189,.2),transparent 52%),#101d2c}
.gs17aii-settings .sm-sechead{color:#e8dcff}.gs17aii-lead{display:grid;gap:4px;padding:11px 12px;border:1px solid #61559b;border-radius:11px;background:#251d49aa}
.gs17aii-lead b{color:#fff1c5;font-size:13px}.gs17aii-lead span{color:#b9c9de;font-size:11px;line-height:1.55}
.gs17aii-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:9px}.gs17aii-status span{padding:8px 9px;border:1px solid #314b68;border-radius:9px;background:#10263a;color:#91a9bd;font-size:10px}
.gs17aii-status b{display:block;margin-top:2px;color:#eef8ff;font-size:13px}.gs17aii-warning{margin-top:8px;padding:8px 10px;border:1px solid #8b6332;border-radius:9px;background:#3b2a13;color:#ffd595;font-size:11px}
/* 17AQR: 派遣前後に、次の専用ターンで本国が負担する額を常に見える位置へ。 */
.gs17aqr-upkeep{display:grid;grid-template-columns:minmax(170px,1fr) repeat(2,minmax(100px,.55fr));align-items:center;gap:8px;margin-top:9px;padding:9px 10px;border:1px solid #4f78a0;border-radius:10px;background:linear-gradient(120deg,rgba(18,57,82,.94),rgba(22,31,63,.94));box-shadow:inset 3px 0 #65c8e8;color:#d9ecf8}
.gs17aqr-upkeep>div{display:grid;gap:2px;min-width:0}.gs17aqr-upkeep>div>b{color:#dff7ff;font-size:12px}.gs17aqr-upkeep>div>small{color:#8fabbd;font-size:9px}.gs17aqr-upkeep>span{display:grid;gap:1px;padding-left:9px;border-left:1px solid #45627c}.gs17aqr-upkeep>span small{color:#8eabc0;font-size:9px}.gs17aqr-upkeep strong{color:#fff1b0;font-size:16px;font-variant-numeric:tabular-nums}.gs17aqr-upkeep strong i{margin-left:2px;color:#bdd6e4;font-size:9px;font-style:normal;font-weight:500}.gs17aqr-upkeep>p{grid-column:1/-1;margin:0;color:#8eacbf;font-size:8.5px;text-align:right}
.gs17aqr-upkeep.is-broke{border-color:#c65362;box-shadow:inset 3px 0 #ff6475,0 0 0 1px #8f334155;background:linear-gradient(120deg,rgba(83,24,38,.96),rgba(35,27,58,.96))}.gs17aqr-upkeep>p.gs17arn-finance-alert{padding:7px 8px;border-radius:7px;background:#421722;color:#ffdbe0;font-size:10px;font-weight:600;line-height:1.5;text-align:left}
#gs17aqrUpkeepM .gs17aqr-upkeep{grid-template-columns:1fr 1fr;margin-top:9px}#gs17aqrUpkeepM .gs17aqr-upkeep>div{grid-column:1/-1}#gs17aqrUpkeepM .gs17aqr-upkeep>span:first-of-type{border-left:0;padding-left:0}
.gs17aii-send{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-top:10px}.gs17aii-send label,.gs17aii-return label,.gs17ail-actions label{display:grid;gap:3px;color:#90a9bd;font-size:10px}.gs17aii-send select,.gs17aii-return select,.gs17aii-tools select,.gs17ail-actions select{min-width:112px;padding:7px;border:1px solid #375875;border-radius:8px;background:#0b1b2b;color:#e8f3fb}
.gs17axc-dispatch-note{flex:1 0 100%;color:#9fb7c9;font-size:10px;line-height:1.5}
/* 🔴 17AJY: 仮想海域の常設の入口（もりたつ指定 2026-08-26「設定からではなく分かりやすい動線に」）。
   マップ上部のボタン＋☰メニューの項目。派遣中は隻数バッジを出す。 */
.gs-entry{position:relative;background:linear-gradient(140deg,#3a3184,#1b2a58);border-color:#6559b0;color:#e6ecff}
.gs-entry:hover{background:linear-gradient(140deg,#4a3fa6,#22346b);color:#fff}
.gs-entry .gs-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  margin-left:5px;padding:0 4px;border-radius:999px;background:#e33d55;color:#fff;
  font:700 10px var(--font-ui);font-variant-numeric:tabular-nums}
.gs-entry .gs-badge[hidden]{display:none}
#navGateSea17aii{color:#cfd3ff}
/* 🌫️ 17B63 霧の大海洋: 入口は夜の海の色、海図の見出しに「所属不明の海」の注記を出す */
.gs-entry.gs-dark17b63{background:linear-gradient(140deg,#15172b,#050712);border-color:#3b3f66;color:#d9dcf5}
.gs-entry.gs-dark17b63:hover{background:linear-gradient(140deg,#23264a,#0b0e22);color:#fff}
#navDarkSea17b63{color:#b9bde6}
.gs17b63-note{display:none;margin-left:8px;color:#aab0dc;font-size:11px}
.gs17b63-dark .gs17b63-note{display:inline}
.gs17b63-cool{display:block;margin-top:4px;color:#9fd8ff;font-size:12px}.gs17b63-fog{display:none}.gs17b63-dark .gs17b63-fog{display:inline}.gs17b63-dark .gs17b63-main,.gs17b63-dark .gs17aii-legend .friendly{display:none}
.gs17b63-dark .gs17aii-box{border-color:#3b3f66;box-shadow:0 0 0 1px #20233f,0 18px 60px rgba(0,0,0,.7)}
/* モーダル内の派遣操作。帰還操作と同じ形にして、迷わず対で見えるようにする。 */
.gs17aii-send-inline{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;padding:9px;
  border:1px solid #55499c;border-radius:9px;background:#1a1b3d}
.gs17aii-send-inline>b,.gs17aii-send-inline>small,.gs17aii-send-inline .b2{grid-column:1/-1}
.gs17aii-send-inline>b{color:#dfeeff;font-size:12px}
.gs17aii-send-inline small{color:#9aa6c8;font-size:9.5px;line-height:1.5}
.gs17aii-send-inline label{display:grid;gap:3px;color:#9aa6c8;font-size:10px}
.gs17aii-send-inline select{min-width:0;width:100%;padding:7px;border:1px solid #4a4790;border-radius:8px;
  background:#0d1030;color:#e8f3fb}
.gs17aii-modal{z-index:1820;padding:12px;background:rgba(2,6,16,.92)}.gs17aii-box{display:flex;flex-direction:column;width:min(1240px,98vw);height:min(92vh,920px);overflow:hidden;border:1px solid #6559b0;border-radius:16px;background:radial-gradient(circle at 40% -20%,#28225a,#081421 48%);box-shadow:0 28px 100px #000e}
.gs17aii-box>header{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid #3b426c;background:#111d37}.gs17aii-box>header>div{min-width:0;display:grid;gap:2px}.gs17aii-box>header b{color:#f5edff;font-size:18px}.gs17aii-box>header span{color:#93a9c2;font-size:10.5px}.gs17aii-box>header .dm-x{position:static;margin-left:auto;flex:0 0 auto}
.gs17aii-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid #263b53;background:#0c1b2c}.gs17aii-tools button{padding:6px 9px;border:1px solid #3d5874;border-radius:8px;background:#142c41;color:#d6e7f2;cursor:pointer}.gs17aii-tools button[aria-pressed="true"]{border-color:#65bdeb;background:#194c69;color:#f4fbff}.gs17aii-tools label{display:flex;align-items:center;gap:5px;margin-left:auto;color:#8fa8bc;font-size:10px}
.gs17aii-legend{display:flex;gap:12px;flex-wrap:wrap;padding:6px 12px;border-bottom:1px solid #24364b;color:#93a7b8;font-size:10px}.gs17aii-legend .self{color:#4be082}.gs17aii-legend .friendly{color:#ffe36d}.gs17aii-legend .other{color:#ff7d83}.gs17aii-legend .gate{color:#c1a5ff}
.gs17aii-main{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:0;flex:1}.gs17aii-stage{position:relative;min-width:0;min-height:0;overflow:auto;padding:18px;background:linear-gradient(145deg,#071522,#0a2031);scrollbar-width:thin}.gs17aii-loading{position:absolute;z-index:5;inset:18px;display:grid;place-items:center;border:1px solid #4f4b83;border-radius:12px;background:#101b30e8;color:#d9d1ff}.gs17aii-loading[hidden]{display:none}
.gs17aii-legend .bf17aro{color:#ffd166}
.gs17aii-fleet{position:absolute;z-index:3;left:5px;top:6px;width:24px;height:21px;padding:0;border:2px solid currentColor;border-radius:999px;background:#091522d9;color:#ff7d83;cursor:pointer;box-shadow:0 1px 5px #000}.gs17aii-fleet>span{font-size:12px;line-height:15px}.gs17aii-fleet>small{display:none}.gs17aii-fleet.self{color:#4be082}.gs17aii-fleet.friendly{color:#ffe36d}.gs17aii-fleet.other{color:#ff7d83}.gs17aii-fleet.selected{background:#fff;color:#17243a;box-shadow:0 0 0 3px #76dfff,0 0 12px #8fe7ff}
.gs17aii-main>aside{min-height:0;overflow:auto;padding:10px;border-left:1px solid #2d4058;background:#0c1928;scrollbar-width:thin}.gs17aii-selected{display:grid;gap:3px;padding:9px;border:1px solid #455378;border-radius:9px;background:#17213e;color:#b5c5d6;font-size:10.5px;line-height:1.5}.gs17aii-selected b{color:#fff0b7;font-size:12px}.gs17aii-return{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;padding:9px;border:1px solid #3d526b;border-radius:9px;background:#112437}.gs17aii-return>b,.gs17aii-return>small{grid-column:1/-1}.gs17aii-return>b{color:#dfeeff;font-size:12px}.gs17aii-return .b2{grid-column:1/-1}.gs17aii-return small{color:#8ca5b8;font-size:9.5px;line-height:1.5}
/* 17ARN: 艦影を探さなくても、参加者・届いた友好申請・公開導線をひとつの欄で扱う。 */
.gs17arn-people{display:grid;gap:7px;margin-top:9px;padding:9px;border:1px solid #4a6683;border-radius:9px;background:#102238}.gs17arn-people[hidden]{display:none}.gs17arn-people>b{color:#deefff;font-size:12px}.gs17arn-people .gs17arn-incoming{margin:-2px -2px 1px;padding:7px;border-radius:7px;background:#493715;color:#ffe29a}.gs17arn-people>select{min-width:0;width:100%;padding:7px;border:1px solid #436581;border-radius:8px;background:#0a1928;color:#e8f3fb;font-size:10px}.gs17arn-people>small{overflow-wrap:anywhere;color:#9db4c6;font-size:9.5px}.gs17arn-person-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.gs17arn-person-actions button{min-width:0;padding:6px 5px;font-size:9px}.gs17arn-person-actions button:last-child:nth-child(odd){grid-column:1/-1}.gs17aro-same-world{grid-column:1/-1;display:block;padding:6px 7px;border:1px dashed #3b5a73;border-radius:7px;color:#9fb6cc;font-size:9px;line-height:1.45}
.gs17ail-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;padding:9px;border:1px solid #42577a;border-radius:9px;background:#101f35}.gs17ail-actions>b,.gs17ail-actions>small{grid-column:1/-1}.gs17ail-actions>b{color:#dfeeff;font-size:12px}.gs17ail-actions small{min-height:2.8em;color:#91a9bd;font-size:9.5px;line-height:1.45}.gs17ail-tickets{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.gs17ail-tickets>b{flex:1 0 100%;font-size:10px}.gs17ail-tickets button{padding:4px 6px;border:1px solid #4a5e78;border-radius:6px;background:#122c42;color:#cfe1ed;font-size:8.5px;cursor:pointer}.gs17ail-tickets button.armed{border-color:#d4a941;background:#3b3116;color:#ffe8a0}.gs17ail-tickets button:disabled{opacity:.45;cursor:not-allowed}
.gs17aii-fleetlist{display:grid;gap:6px;margin-top:11px}.gs17aii-fleetlist>b{color:#d9e8f2;font-size:11px}.gs17aii-fleetlist>div{display:flex;gap:5px}.gs17aii-focus{display:grid;flex:1;min-width:0;padding:7px 8px;text-align:left;border:1px solid #334d65;border-radius:8px;background:#10263a;color:#e5f2f9;cursor:pointer}.gs17aii-focus span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px}.gs17aii-focus small{color:#8ea8bb;font-size:8.5px}.gs17aii-cancel{flex:0 0 auto;padding:5px;border:1px solid #80514e;border-radius:7px;background:#341d20;color:#f4b0aa;font-size:8.5px;cursor:pointer}
.gs17aii-fleetlist>.gs17axc-list-tools{display:grid;grid-template-columns:1fr;gap:7px;padding:7px;border:1px solid #334d65;border-radius:8px;background:#0b1b2b}.gs17axc-list-tools label{display:grid;gap:3px;color:#9fb7c9;font-size:9px}.gs17axc-list-tools select{min-width:0;width:100%;padding:6px;border:1px solid #375875;border-radius:7px;background:#10263a;color:#e5f2f9;font-size:9.5px}.gs17axc-list-tools .gs17axc-follow-layer{display:flex;align-items:center;gap:4px;white-space:normal}.gs17axc-follow-layer input{width:16px;height:16px;margin:0;accent-color:#59bfe8}
/* 17AOO: 派遣中の自艦を開かなくても、損耗・残り航続と即時操作が分かる。 */
.gs17aoo-ownrow{align-items:stretch}.gs17aoo-vitals{display:flex;justify-content:space-between;gap:5px;margin-top:3px}.gs17aoo-vitals b{color:#cfe8f5;font-size:8.5px;font-weight:500}.gs17aoo-hpbar{display:block;overflow:hidden;height:4px;margin-top:4px;border-radius:999px;background:#07131f;box-shadow:inset 0 0 0 1px #2e4355}.gs17aoo-hpbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#40b96a,#8ae68b)}.gs17aoo-quickremove{flex:0 0 auto;min-width:56px;padding:5px;border:1px solid #4c7790;border-radius:7px;background:#15344a;color:#bfe9ff;font-size:8.5px;cursor:pointer}.gs17aoo-quickremove:hover{background:#1c4864}
/* 17AOC: 大海洋マップのマスタップも、本海域 #cellmenu と同じ視覚・操作構造にする。 */
.gs17amm-pop{position:fixed;z-index:1830;display:block;min-width:210px;width:max-content;max-width:min(94vw,400px);max-height:min(60vh,360px);overflow:auto;overscroll-behavior:contain;padding:0;border:1px solid #4a6d97;border-radius:var(--radius-s);background:rgba(14,28,49,.9);-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);box-shadow:var(--shadow-pop),0 0 0 1px rgba(0,0,0,.35);color:#e6eef6;font-size:15.5px;scrollbar-width:thin}
.gs17amm-pop .hd{position:sticky;z-index:1;top:0;display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid #34557c;background:rgba(23,48,78,.92);color:#eaf3fb;font-weight:500}
.gs17amm-pop .hd .sub{color:#8fb0cc;font-size:12.5px;font-weight:400}.gs17amm-pop .cm-tile{width:26px;height:26px;flex:0 0 auto;object-fit:contain;border:1px solid #2c4a6e;border-radius:4px;background:#0b1a2e;image-rendering:pixelated;cursor:pointer}.gs17amm-pop .cm-name{min-width:0;color:#dceeff;font-weight:600;overflow-wrap:anywhere;cursor:pointer}.gs17amm-pop .cm-name .mag{font-size:.82em;opacity:.85}.gs17amm-pop .cm-x{width:26px;height:26px;flex:0 0 auto;margin-left:auto;padding:0;border:0;border-radius:var(--radius-s);background:#2a3b53;color:#cdd9e6;font-size:14px;line-height:1;cursor:pointer}.gs17amm-pop .cm-x:hover{background:#3a4f6e}
.gs17amm-pop .cm-stack-list{display:flex;flex-wrap:wrap;gap:5px;padding:6px 9px;border-bottom:1px solid #24405f;background:#0d2036}.gs17amm-pop .cm-stack-detail{display:inline-flex;align-items:center;gap:4px;min-width:0;padding:5px 7px;border:1px solid #334d65;border-radius:7px;background:#10263a;color:#cfe1ed;font-size:11.5px;cursor:pointer}.gs17amm-pop .cm-stack-detail.current{border-color:#d7b85d;color:#ffe8a5}.gs17amm-pop .cm-stack-detail .mag{font-size:.82em;opacity:.8}
.gs17amm-pop .it{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;color:#e6eef6;cursor:pointer;white-space:nowrap}.gs17amm-pop .it>span:first-child{min-width:0;white-space:normal;overflow-wrap:anywhere}.gs17amm-pop .it:hover{background:#1d3a5c}.gs17amm-pop .it .c{display:inline-flex;align-items:center;justify-content:flex-end;flex:0 1 auto;flex-wrap:wrap;gap:6px;color:#9fc08f;text-align:right;white-space:normal}.gs17amm-pop .it.dis{color:#6c7f92;cursor:default}.gs17amm-pop .it.dis:hover{background:transparent}.gs17amm-pop .it.dis .c{color:#6c7f92}.gs17amm-pop .sep{height:1px;margin:3px 0;background:#24405f}.gs17amm-pop .gs17aoc-note{padding:7px 10px;border-top:1px solid #24405f;background:#0c1b2c;color:#8ca5b8;font-size:11px;line-height:1.5}
.gs17aoc-detail{position:fixed;z-index:1840;max-width:min(320px,92vw);padding:9px 11px;border:1px solid #3b5a80;border-radius:var(--radius-s);background:#10213a;box-shadow:var(--shadow-pop);color:#e6eef6;font-size:13px;line-height:1.6}.gs17aoc-detail .uk-hd{display:flex;align-items:center;gap:7px;margin-bottom:5px;color:#cfe3f5;font-weight:500}.gs17aoc-detail .uk-hd img{width:22px;height:22px;border:1px solid #2c4a6e;border-radius:4px;background:#0b1a2e;image-rendering:pixelated}.gs17aoc-detail .uk-line{margin:2px 0}.gs17aoc-detail .uk-line b{color:#ffd479}
@media(max-width:760px){.gs17aii-status{grid-template-columns:repeat(2,minmax(0,1fr))}.gs17aqr-upkeep{grid-template-columns:1fr 1fr}.gs17aqr-upkeep>div{grid-column:1/-1}.gs17aqr-upkeep>span:first-of-type{border-left:0;padding-left:0}.gs17aii-send>*{flex:1 1 125px}.gs17aii-modal{padding:0}.gs17aii-box{width:100%;height:100%;max-height:none;border:0;border-radius:0}.gs17aii-box>header{padding:9px 11px}.gs17aii-box>header b{font-size:15px}.gs17aii-tools{padding:6px}.gs17aii-tools label{margin-left:0}.gs17aii-main{grid-template-columns:1fr;grid-template-rows:minmax(240px,50vh) minmax(170px,1fr);overflow-y:auto}.gs17aii-stage{padding:10px}.gs17aii-main>aside{border-left:0;border-top:1px solid #2d4058}.gs17aii-fleet{left:4px;top:7px;width:22px;height:20px}
  .gs17aii-cancel,.gs17aoo-quickremove{min-width:64px;min-height:44px;font-size:10px}
  /* 17AOH: 大海洋マップのマス操作も、本海域と同じ下部シートで表示する。 */
  .gs17amm-pop{left:8px!important;right:8px!important;bottom:calc(env(safe-area-inset-bottom) + 8px)!important;top:auto!important;width:auto;min-width:0;max-width:none;max-height:min(64dvh,calc(100dvh - 24px));border-radius:15px 15px 10px 10px;font-size:15px}
  .gs17amm-pop .it{min-height:44px;align-items:center;padding:10px 12px}
}

/* 17AIM/17ANG 新規登録を最初に見せる。17ANG以降、登録中はこのカード以外を出さない。 */
.auth-first-panel{padding:clamp(12px,2.2vw,24px);background:radial-gradient(circle at 50% -30%,rgba(55,125,210,.22),transparent 56%),linear-gradient(145deg,#0e2033,#0a1726);border-color:#31567c}
.signup.signup-first{width:min(640px,100%);max-width:none;margin:0 auto;padding:clamp(14px,2.4vw,22px);border-color:#477caf;background:linear-gradient(155deg,#122b46,#0d1d30);box-shadow:0 14px 42px rgba(0,0,0,.32)}
.signup-first-head{display:flex;align-items:center;gap:12px;margin:0 0 15px;padding:0 2px 14px;border-bottom:1px solid #2b4c6c}
.signup-first-mark{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border:1px solid #4a83bb;border-radius:14px;background:linear-gradient(145deg,#265f91,#153c62);font-size:25px;box-shadow:inset 0 1px rgba(255,255,255,.12)}
.signup-first-head h2{display:block;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#f5f9fd;font-size:clamp(19px,2.1vw,25px);line-height:1.3}
.signup-first-head p{margin:4px 0 0;color:#a9bfd3;font-size:12.5px;line-height:1.6}
/* 17ARB: 実画面を見せながら、スマホの登録フォームを下へ追いやらない。常時描画/動画なし。 */
.signup-scene17arb{margin:0;min-width:0;flex:0 0 110px}
.signup-scene17arb img{display:block;width:100%;height:80px;object-fit:cover;border-radius:9px}
.signup-scene17arb figcaption{display:none}
.signup-first-head .signup-install17arb{color:#a9e8bd;font-size:11px}
.rookie-goals17arb{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.rookie-goals17arb button{flex:1 1 80px;min-height:44px;padding:8px 6px;border:1px solid #45647d;border-radius:8px;background:#132b40;color:#cbe0ef;font:inherit;font-size:12px;cursor:pointer}
.rookie-goals17arb button[aria-pressed="true"]{border-color:#74d7b0;background:#173c3b;color:#c0ffe5}
.rookie-goals17arb button:focus-visible{outline:2px solid #ffe18f;outline-offset:2px}
.rookie-goal-copy17arb{border-left:2px solid #74d7b0;padding-left:10px}
.tut-choice-actions17avr{padding:11px;border:1px solid #547a99;border-radius:10px;background:#10283e}
.tut-choice-actions17avr .tut-choice-heading17avr{margin:0 0 5px;color:#ffd76a;font-size:14px;font-weight:700}
.tut-choice-actions17avr #btnTutGraduate17aqz{width:100%;min-height:44px}
.tut-choice-actions17avr .tut-choice-note17avr{margin-bottom:0;color:#a9bfd3}
.rookie-return17avr{display:grid;gap:4px;margin:11px 0;padding:11px 12px;border:1px solid #c79735;border-radius:9px;background:linear-gradient(135deg,#352a12,#132d42);line-height:1.55}
.rookie-return17avr b{color:#ffe18f;font-size:13px}.rookie-return17avr strong{color:#f4f9fd;font-size:14px}.rookie-return17avr span{color:#bdd0df;font-size:12px}
.rookie-news-result17aws{outline:2px solid #ffd66b;outline-offset:-2px;border-radius:6px;background:linear-gradient(90deg,rgba(255,201,72,.18),rgba(46,130,196,.1))!important;box-shadow:0 0 18px rgba(255,205,90,.24)}
body.mmode .tut-choice-actions17avr{padding:9px}body.mmode .rookie-return17avr{padding:9px 10px}
@media(min-width:1100px){
  .signup.signup-first{width:min(1060px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);column-gap:30px;align-items:start}
  .signup-first-head{grid-column:1;grid-row:1/5;flex-direction:column;align-items:stretch;border:0;padding:25px 0 0;gap:22px}
  .signup-scene17arb{flex:auto}.signup-scene17arb img{height:auto;aspect-ratio:2/1}
  .signup-scene17arb figcaption{display:block;color:#93b6cb;font-size:12px;margin-top:10px}
  .signup-first-head h2{font-size:26px}.signup-first-head p{font-size:14px}
  .signup-first-head .signup-install17arb{font-size:13px;margin-top:12px}
  .signup-first>.auth-tabs,.signup-first>.auth-pane,.signup-first>.signup-mobile-links17anh{grid-column:2}
}
@media(max-width:480px){.signup-scene17arb{flex-basis:76px}.signup-scene17arb img{height:76px}.signup-first-head h2{font-size:16px!important}.signup-first-head p{font-size:11px!important}}
body.preauth #statusPanel,body.preauth #modeBanner,body.preauth #belowMap,body.preauth .devtools,body.preauth .sitefoot{display:none!important}
body.preauth .topbar .row{display:none!important}
/* JS側も全ポップアップを認証で止めるが、読みかけ・古いキャッシュに対する表示上の最後の防壁。 */
body.preauth #tutorial{display:none!important}
body.preauth dialog,body.preauth [role="dialog"],
body.preauth .upd-ov,body.preauth .launch-ov,body.preauth .bnews,
body.preauth .lbtour-ov,body.preauth .lb-ov,body.preauth .dm-ov,
body.preauth .shop-ov,body.preauth .mnt-ov,body.preauth .arc-ov,
body.preauth .community-report-ov,body.preauth #ynModal,body.preauth #qtyModal,
body.preauth #txtModal,body.preauth #buyQtyModal{display:none!important}
.guest-map-return17anh{display:none}
/* 17AOK: PCもスマホも登録カード＋公開はこったーだけ。観光を選ぶまで本編UIを描画しない。 */
body.preauth:not(.guest-map17anh) .grid2{display:block!important;order:2}
body.preauth:not(.guest-map17anh) .grid2>.leftcol,
body.preauth:not(.guest-map17anh) .grid2>.midcol,
body.preauth:not(.guest-map17anh) .grid2>.chatcol~*{display:none!important}
body.preauth:not(.guest-map17anh) .chatcol>:not(.hakotter){display:none!important}
body.preauth:not(.guest-map17anh) .chatcol{display:block!important;max-width:760px;margin:0 auto}
body.preauth:not(.guest-map17anh) .hakotter{content-visibility:auto;contain-intrinsic-size:auto 520px;margin-top:0}
body.preauth:not(.guest-map17anh) .hakotter-compose,
body.preauth:not(.guest-map17anh) .ht-scope-label,
body.preauth:not(.guest-map17anh) .chattabs,
body.preauth:not(.guest-map17anh) #chatToRow,
body.preauth:not(.guest-map17anh) #chatExprPop,
body.preauth:not(.guest-map17anh) #chatImgPreview{display:none!important}
.preauth-hakotter-load17aqn{display:none}
body.preauth:not(.guest-map17anh) .preauth-hakotter-load17aqn{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:11px 12px;border:1px solid #315b82;border-radius:10px;background:#0b1d2f;color:#a9bfd3;font-size:12px;line-height:1.55}
body.preauth:not(.guest-map17anh) .preauth-hakotter-load17aqn button{flex:0 0 auto;min-height:44px;white-space:nowrap}
body.preauth:not(.guest-map17anh) #preauthHakotterLoad17aqn:not([hidden])+#chatLog{display:none!important}
.signup-privacy17aqn{padding-top:6px;border-top:1px solid rgba(61,91,119,.45)}
.signup-mobile-links17anh{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px;padding-top:12px;border-top:1px solid #294662}
.signup-mobile-links17anh a{padding:9px 7px;text-align:center;text-decoration:none;border:1px solid #315b82;border-radius:9px;background:#122a41;color:#cfe6f8;font-size:12.5px}
body.preauth.guest-map17anh #loginPanel{display:none!important}
body.preauth.guest-map17anh .grid2{display:block!important;order:2}
body.preauth.guest-map17anh .grid2>.leftcol,
body.preauth.guest-map17anh .grid2>.chatcol,
body.preauth.guest-map17anh .grid2>.chatcol~*{display:none!important}
body.preauth.guest-map17anh .grid2>.midcol{display:block!important}
body.preauth.guest-map17anh .guest-map-return17anh{display:flex;order:1;gap:8px;margin:0 0 9px}
body.preauth.guest-map17anh .guest-map-return17anh a{flex:1;text-align:center}
@media (max-width:760px){
  .auth-first-panel{padding:8px;margin-bottom:9px}.signup.signup-first{padding:12px 11px}.signup-first-head{gap:9px;margin-bottom:11px;padding-bottom:11px}.signup-first-mark{width:40px;height:40px;border-radius:11px;font-size:21px}.signup-first-head h2{font-size:18px}.signup-first-head p{font-size:11.5px;line-height:1.5}
  body.preauth:not(.guest-map17anh) .preauth-hakotter-load17aqn{align-items:stretch;flex-direction:column}.signup-privacy17aqn{font-size:11.5px}
}
.ts-airpilot{margin:0 0 12px;padding:11px;border:1px solid #3975a7;border-radius:11px;background:linear-gradient(135deg,rgba(15,55,88,.96),rgba(16,35,60,.96));box-shadow:inset 0 0 22px rgba(43,151,255,.08)}
.ts-airpilot-head,.ts-airpilot-row,.ts-airpilot-target{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.ts-airpilot-head{justify-content:space-between;margin-bottom:9px;color:#d9f1ff}.ts-airpilot-head span{font-size:11px;color:#8ed8ff}.ts-airpilot-row label{display:flex;align-items:center;gap:6px}.ts-airpilot-row select{min-width:108px}.ts-airpilot-target{margin-top:9px;justify-content:space-between}.ts-airpilot-target>span{color:#bfe6ff;font-size:12px}.ts-airpilot small{display:block;color:#8fb0cc;margin-top:8px;line-height:1.55}
.ts-airpilot-switch{cursor:pointer;user-select:none}.ts-airpilot-switch input{position:absolute;opacity:0;pointer-events:none}.ts-airpilot-switch span{position:relative;width:42px;height:23px;border-radius:999px;background:#516174;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:.18s}.ts-airpilot-switch span:after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.4);transition:.18s}.ts-airpilot-switch input:checked+span{background:#1ea6e8}.ts-airpilot-switch input:checked+span:after{transform:translateX(19px)}
@media(max-width:700px){.ts-airpilot-target button{width:100%}.ts-airpilot-head{align-items:flex-start}}

/* 17AOB: 大海洋マップを本海域と同じ画像表現へ。APIは現在地周辺だけを返し、DOMも一括生成する。 */
.gate-sea-hero17aob{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:8px 0 12px;padding:12px 14px;border:1px solid #5e8fdf;border-radius:13px;background:radial-gradient(circle at 0 0,rgba(61,169,255,.28),transparent 48%),linear-gradient(120deg,#102b49,#151f45);box-shadow:0 7px 24px #0005}
.gate-sea-hero17aob[hidden]{display:none}.gate-sea-hero-mark17aob{font-size:30px;filter:drop-shadow(0 0 8px #72caff)}.gate-sea-hero17aob>div:nth-child(2){display:grid;gap:3px}.gate-sea-hero17aob b{color:#f0f8ff;font-size:15px}.gate-sea-hero17aob span{color:#bdd8ee;font-size:11px;line-height:1.55}.gate-sea-hero17aob button{white-space:nowrap}.gs-entry-summary17aqe{margin-left:5px;color:#bfe7ff;font-size:9px;font-weight:500;white-space:nowrap}
/* 17AOD: 大海洋マップを本海域と同じドラッグ・ズーム・階層切替で操作する。 */
#opPanel .gate-sea-hero17aob{margin:0 0 12px}.gs17aod-zoom,.gs17aod-layers{display:inline-flex;align-items:center;gap:3px}.gs17aod-zoom{margin-left:auto}.gs17aod-zoom button{min-width:32px}.gs17aod-zoom #gs17aodZoomPct{min-width:52px;color:#fff0a7}.gs17aod-layers button{padding-inline:7px}.gs17aod-layers button.on{border-color:#76c9ff;background:#17466b;color:#f4fbff;box-shadow:inset 0 0 0 1px rgba(118,201,255,.22)}
.gs17aii-stage.gs17aod-map-drag{cursor:grab;overscroll-behavior:contain;touch-action:pan-x pan-y}.gs17aii-stage.gs17aod-dragging{cursor:grabbing;user-select:none}.gs17aii-stage.gs17aod-dragging *{cursor:grabbing!important}
.gs17aii-fleet{z-index:4;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#ff7d83;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transform:translate(calc(var(--gs-stack,0) * 1px),calc(var(--gs-stack,0) * -1px))}.gs17aii-fleet.selected{background:transparent;color:inherit;box-shadow:none}.gs17aii-fleet>img{display:block;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;animation:bob 2.8s ease-in-out infinite;filter:drop-shadow(0 1px 1px #000)}.gs17aii-fleet>img.rare-color{filter:var(--rare-tone) brightness(1.08) drop-shadow(0 1px 1px #000)}.gs17aii-fleet.building>img{animation:none}.gs17aii-fleet.airborne>img{filter:drop-shadow(3px 5px 3px rgba(0,0,0,.5))}.gs17aii-fleet.airborne>img.rare-color{filter:var(--rare-tone) brightness(1.08) drop-shadow(3px 5px 3px rgba(0,0,0,.5))}.gs17aii-fleet.submerged>img{opacity:.55;filter:brightness(.8) hue-rotate(190deg) saturate(1.3)}.gs17aii-fleet.submerged>img.rare-color{filter:var(--rare-tone) brightness(.86) hue-rotate(190deg) saturate(1.3)}.gs17aii-fleet.submerged>img.rare-color.rare-color-k169{filter:var(--rare-tone) brightness(.86) saturate(1.3)}.gs17aii-fleet.self.selected.submerged>img{opacity:1;filter:none}.gs17aii-fleet.self.selected.submerged>img.rare-color{filter:var(--rare-tone) brightness(1.08)}
/* 🔴 17B88: 大海洋でも「改」の色（第3の色・改の色違い）。 */
.gs17aii-fleet>img.kai{filter:var(--kai-tone) brightness(1.04) var(--kai-edge)}
.gs17aii-fleet>img.rare-color.kai{filter:var(--rare-tone) brightness(1.08) var(--kai-edge)}
.gs17aii-fleet.airborne>img.kai{filter:var(--kai-tone) brightness(1.04) var(--kai-edge) drop-shadow(3px 5px 3px rgba(0,0,0,.5))}
.gs17aii-fleet.airborne>img.rare-color.kai{filter:var(--rare-tone) brightness(1.08) var(--kai-edge) drop-shadow(3px 5px 3px rgba(0,0,0,.5))}
.gs17aii-fleet.submerged>img.kai{filter:var(--kai-tone) brightness(.86) hue-rotate(190deg) saturate(1.3) var(--kai-edge)}
.gs17aii-fleet.submerged>img.rare-color.kai{filter:var(--rare-tone) brightness(.86) hue-rotate(190deg) saturate(1.3) var(--kai-edge)}.gs17aii-fleet.wrecked>img{opacity:1;filter:grayscale(1) brightness(.75) sepia(.3);transform:rotate(12deg);animation:none}.gs17aii-fleet::after{content:"";position:absolute;inset:0;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}.gs17aii-fleet.self::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,2 98,26 98,74 50,98 2,74 2,26' fill='rgba(255,255,255,.07)' stroke='rgba(255,255,255,.98)' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}.gs17aii-fleet.friendly::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,2 98,26 98,74 50,98 2,74 2,26' fill='rgba(255,215,80,.09)' stroke='rgba(255,215,80,.98)' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}.gs17aii-fleet.other::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,2 98,26 98,74 50,98 2,74 2,26' fill='rgba(255,74,74,.11)' stroke='rgba(255,74,74,.98)' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}.gs17aii-fleet.selected::after{filter:drop-shadow(0 0 4px #76dfff) brightness(1.35)}
/* 17AOG: 色枠だけに頼らず、各艦影の所属島をマップ上で常時読めるようにする。 */
.gs17aii-fleet::after{z-index:1}.gs17aii-fleet>img{position:relative;z-index:0}.gs17aog-owner{position:absolute;z-index:3;left:9%;right:9%;bottom:8%;display:block;overflow:hidden;padding:0 2px;border-radius:3px;background:rgba(5,15,27,.9);color:#f4f8fb;font-size:clamp(5px,.42em,7px);font-weight:700;line-height:1.25;text-align:center;text-overflow:ellipsis;text-shadow:0 1px 1px #000;white-space:nowrap;pointer-events:none}.gs17aog-owner b{display:inline-grid;place-items:center;min-width:1.35em;margin-right:1px;border-radius:50%;background:#f4f8fb;color:#102033;font-size:.9em;text-shadow:none}.gs17aii-fleet.friendly .gs17aog-owner{color:#ffe36d}.gs17aii-fleet.other .gs17aog-owner{color:#ff9a9e}.gs17amm-pop .cm-stack-detail .cm-owner{max-width:120px;overflow:hidden;color:#8fb0cc;text-overflow:ellipsis;white-space:nowrap}.gs17amm-pop .cm-stack-detail.current .cm-owner{color:#d8c475}
/* 17AWF: 小さい艦影を優先したい人は、マップ内設定で所属文字だけを隠せる。 */
.gs17aii-modal.owner-labels-off17awf .gs17aog-owner{display:none}
/* 17AQE: 本海域と大海洋で自艦の所属色を緑へ統一する。 */
.gs17aii-fleet.self::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,2 98,26 98,74 50,98 2,74 2,26' fill='rgba(75,224,130,.09)' stroke='rgba(75,224,130,.98)' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}.gs17aii-fleet.self .gs17aog-owner{color:#70ed9f}.gs17aii-fleet.self .gs17aog-owner b{background:#70ed9f;color:#071e12}.gs17aii-fleet.friendly .gs17aog-owner b{background:#ffe36d;color:#2c2400}.gs17aii-fleet.other .gs17aog-owner b{background:#ff9a9e;color:#2b080a}
/* 17AOI: 本海域と同じ重なり数の印。艦影はJSが1秒ごとに切り替える。 */
.gs17aoi-stack-count{position:absolute;z-index:6;right:2px;top:3px;display:grid;place-items:center;min-width:13px;height:12px;padding:0 2px;border:1px solid #dff6ff;border-radius:999px;background:rgba(7,23,38,.9);color:#fff;font-size:7px;font-weight:700;line-height:1;pointer-events:none;text-shadow:0 1px 1px #000}

/* 17ARR: 大海洋マップを Canvas 描画へ。地形は Canvas 1枚、艦影は DOM（マスごとの薄いラッパー）、海面のきらめきは合成だけの transform アニメ。
   見た目は「夜の海図」: 深い海のグラデーション、淡い六角格子、砂色の海岸線、光る浅瀬、金色の区画境界（線は Canvas 側）。 */
.gs17aii-stage.gs17arr-stage{display:grid;grid-template-columns:minmax(100%,max-content);grid-template-rows:minmax(100%,max-content)}
.gs17aii-map.gs17arr{position:relative;display:block;width:auto;min-width:0;min-height:0;margin:auto;padding:0;contain:layout style;will-change:transform;outline:0;-webkit-tap-highlight-color:transparent}
.gs17aii-map.gs17arr:focus-visible{outline:2px solid #9fe1ff;outline-offset:2px}
.gs17arr-sea{position:absolute;z-index:0;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 50% 42%,#13618f 0%,#0b4a75 45%,#072f4f 100%);box-shadow:inset 0 0 48px 8px rgba(3,16,30,.75),0 0 0 1px rgba(120,190,240,.18);pointer-events:none}
.gs17arr-sea::before{content:"";position:absolute;left:0;top:0;width:calc(100% + 240px);height:calc(100% + 180px);background-image:radial-gradient(ellipse 70px 26px at 25% 35%,rgba(200,240,255,.13),rgba(200,240,255,0) 70%),radial-gradient(ellipse 110px 34px at 70% 72%,rgba(190,235,255,.10),rgba(190,235,255,0) 70%),radial-gradient(ellipse 50px 18px at 85% 20%,rgba(220,245,255,.09),rgba(220,245,255,0) 70%);background-size:240px 180px;will-change:transform;animation:gs17arr-drift 18s linear infinite}
@keyframes gs17arr-drift{from{transform:translate(0,0)}to{transform:translate(-240px,-180px)}}
@media (prefers-reduced-motion: reduce){.gs17arr-sea::before{animation:none}}
.gs17arr-terrain,.gs17arr-anim{position:absolute;z-index:1;left:0;top:0;pointer-events:none;background:transparent;border-radius:0;image-rendering:auto;cursor:inherit}
.gs17arr-anim{will-change:transform}
.gs17arr-fleets{position:absolute;z-index:2;inset:0}
.gs17arr-cell{position:absolute;z-index:2}
.gs17arr-cell>.gs17aii-fleet{inset:0;width:100%;height:100%}
.gs17arr-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}
.gs17arr-cursor>svg{display:block;width:100%;height:100%;overflow:visible}
.gs17arr-cursor polygon{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.92);stroke-width:2;stroke-linejoin:round}
.gs17arr-cursor.focus polygon{fill:rgba(159,225,255,.16);stroke:#9fe1ff;stroke-width:3}
.gs17arr-tip{position:absolute;left:0;top:0;z-index:7;max-width:220px;padding:4px 7px;border:1px solid rgba(160,205,240,.5);border-radius:7px;background:rgba(6,18,32,.94);color:#e8f4ff;font-size:10px;line-height:1.35;white-space:pre-line;pointer-events:none;will-change:transform;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.gs17arr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){.gate-sea-hero17aob{grid-template-columns:auto 1fr}.gate-sea-hero17aob button{grid-column:1/-1;width:100%}.gs-entry-summary17aqe{display:block;margin:1px 0 0;font-size:8px}.gs17aod-zoom{margin-left:0}.gs17aod-layers{order:2;width:100%}.gs17aod-layers button{flex:1}.gs17aii-stage.gs17aod-map-drag{cursor:auto}}
/* 17AQB: 登録前の動線を増やさず、ログイン後の「島の運営」にだけ友だち招待を置く。 */
.referral-card17aqb{display:grid;gap:11px;margin:0 0 12px;padding:13px;border:1px solid #5aa7dc;border-radius:13px;background:radial-gradient(circle at 0 0,rgba(70,184,255,.18),transparent 46%),linear-gradient(140deg,rgba(13,51,76,.96),rgba(15,32,57,.96));box-shadow:0 7px 22px #0004}
.referral-card17aqb[hidden]{display:none}.referral-head17aqb{display:flex;align-items:center;gap:10px}.referral-mark17aqb{display:grid;place-items:center;width:38px;height:38px;border:1px solid #77d5ff;border-radius:11px;background:#133f61;font-size:21px;box-shadow:0 0 16px rgba(70,184,255,.2)}.referral-head17aqb>div{display:grid;gap:2px}.referral-head17aqb b{color:#f4fbff;font-size:14px}.referral-head17aqb small{color:#a8c9df;font-size:10.5px;line-height:1.5}
.referral-actions17aqb{display:flex;gap:7px;flex-wrap:wrap}.referral-url17aqb{width:100%;min-width:0;padding:8px 9px;border:1px solid #345f7d;border-radius:8px;background:#091b2b;color:#bad9ed;font-size:10.5px}.referral-count17aqb,.referral-progress17aqb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.referral-count17aqb span,.referral-progress17aqb span{padding:7px 8px;border:1px solid #325b78;border-radius:8px;background:rgba(5,24,39,.72);color:#b9d2e3;font-size:10px;line-height:1.4;text-align:center}.referral-progress17aqb{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:7px}.referral-progress17aqb span.done{border-color:#3ea578;background:rgba(28,101,77,.24);color:#9ff2ca}.referral-progress17aqb span.done::before{content:"✓ ";font-weight:700}.referral-invited17aqb{padding:9px 10px;border:1px solid #4a7d9e;border-radius:9px;background:rgba(8,31,49,.72);color:#cce3f1;font-size:10.5px;line-height:1.55}.referral-invited17aqb>b{color:#fff1ad}.referral-note17aqb{min-height:1.4em;color:#93eec1;font-size:10.5px}
@media(max-width:620px){.referral-card17aqb{padding:11px}.referral-actions17aqb button{flex:1;min-height:42px}.referral-count17aqb{grid-template-columns:1fr}.referral-progress17aqb{grid-template-columns:repeat(2,minmax(0,1fr))}}
.season-honor-effect17aob{display:block;flex:1 1 100%;margin:3px 0 6px;color:#ffeaa2;font-size:10.5px;line-height:1.5}

/* 17AQI: 工廠公開告知で、5資源と実際の取得施設マップ画像を対応づける。 */
.factory-resource-showcase-17aqi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 5px}
.factory-resource-showcase-17aqi figure{min-width:0;margin:0;padding:8px 6px 7px;border:1px solid rgba(105,166,207,.42);border-radius:10px;background:linear-gradient(155deg,rgba(14,45,68,.94),rgba(8,25,42,.96));text-align:center;box-shadow:inset 0 1px rgba(255,255,255,.06)}
.factory-resource-showcase-17aqi figure>b{display:block;overflow:hidden;margin-bottom:5px;color:#f2f8ff;font-size:11px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.factory-resource-map-17aqi{display:flex;align-items:center;justify-content:center;gap:2px;min-height:47px;padding:3px;border-radius:8px;background:radial-gradient(circle at 50% 42%,rgba(74,169,225,.28),rgba(4,18,31,.86) 72%)}
.factory-resource-map-17aqi.is-land{background:radial-gradient(ellipse at 50% 72%,rgba(139,180,65,.72),transparent 55%),linear-gradient(165deg,#38552b,#1b301f 58%,#101d18);box-shadow:inset 0 0 0 1px rgba(156,207,91,.22)}
.factory-resource-map-17aqi img{display:block;width:40px;height:40px;max-width:43%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.65))}
.factory-resource-map-17aqi.is-solo img{max-width:none}
.factory-resource-map-17aqi i{color:#ffe08a;font-size:11px;font-style:normal}
.factory-resource-showcase-17aqi figcaption{margin-top:5px;color:#9dbad0;font-size:9px;line-height:1.35}
@media(max-width:650px){.factory-resource-showcase-17aqi{grid-template-columns:repeat(2,minmax(0,1fr))}.factory-resource-showcase-17aqi figure:last-child{grid-column:1/-1}.factory-resource-showcase-17aqi figure>b{font-size:11.5px}.factory-resource-showcase-17aqi figcaption{font-size:9.5px}}

/* 17AQK: ゲーム画面を「夜の司令室に浮かぶ海図」として再整理する。
   情報量・配置・機能は変えず、面の高低と光の向きだけで視線をマップへ導く。
   常時アニメーションや backdrop-filter は足さず、地図描画とスマホの軽さを守る。 */
body:not(.preauth) #statusPanel {
  position: relative;
  background: radial-gradient(85% 180% at 5% -80%,rgba(64,164,220,.25),transparent 65%),linear-gradient(145deg,#142d49,#0d1f34 68%,#0b192a);
  border-color: #376087;
  box-shadow: 0 12px 30px rgba(1,9,18,.30),inset 0 1px rgba(185,226,255,.08);
}
body:not(.preauth) #statusPanel .topline {
  background: radial-gradient(75% 150% at 4% -55%,rgba(92,190,239,.22),transparent 66%),linear-gradient(125deg,#1a3c60,#102741);
  border-color: #39678f;
  box-shadow: inset 0 1px rgba(218,240,255,.08),0 5px 14px rgba(0,8,17,.20);
}
body:not(.preauth) .statusbar .sc {
  background: linear-gradient(155deg,#17304b,#0c1c2f 76%);
  border-color: #315273;
}
body:not(.preauth) .statusbar .sc .k { color: #a5bad0; }
body:not(.preauth) .statusbar .sc .v { text-shadow: 0 1px 8px rgba(137,207,255,.10); }
body:not(.preauth) .grid2 > .leftcol > .panel,
body:not(.preauth) .grid2 > .midcol > .panel,
body:not(.preauth) .grid2 > .chatcol > .panel {
  background: radial-gradient(100% 80% at 0 0,rgba(45,103,151,.12),transparent 62%),linear-gradient(155deg,#14273e,#0f1e31);
  border-color: #2d4c6b;
  box-shadow: 0 9px 24px rgba(1,8,16,.24),inset 0 1px rgba(191,226,255,.045);
}
body:not(.preauth) #mapPanel {
  position: relative;
  background: radial-gradient(90% 70% at 50% -20%,rgba(55,165,220,.20),transparent 68%),linear-gradient(155deg,#142d48,#0a1a2c 72%);
  border-color: #4177a0;
  box-shadow: 0 15px 38px rgba(0,7,15,.38),0 0 0 1px rgba(93,180,226,.08),inset 0 1px rgba(218,242,255,.09);
}
body:not(.preauth) #mapPanel::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 11%;
  right: 11%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,#79d6f3 24%,#ffe29b 50%,#79d6f3 76%,transparent);
  opacity: .66;
  pointer-events: none;
}
body:not(.preauth) #mapPanel .mapframe {
  border-color: #345f82;
  background: #040d17;
  box-shadow: 0 12px 28px rgba(0,5,12,.44),0 0 0 1px rgba(122,205,242,.10),inset 0 0 28px rgba(3,12,22,.64);
}
body:not(.preauth) .grid2 .panel > h2 {
  border-color: #35658e;
  background: linear-gradient(90deg,rgba(47,125,181,.28),rgba(26,59,91,.12) 70%,transparent);
  box-shadow: inset 3px 0 #69bfe9,inset 0 1px rgba(215,240,255,.05);
}
body:not(.preauth) .chatlog {
  background: linear-gradient(180deg,#192e47,#13263d);
  border-color: #3a6084;
  box-shadow: inset 0 1px 10px rgba(0,7,14,.30);
}
body:not(.preauth) .statusrow button,
body:not(.preauth) .topbar button,
body:not(.preauth) .grid2 button,
body:not(.preauth) .grid2 a.b1,
body:not(.preauth) .grid2 a.b2,
body:not(.preauth) .grid2 a.b3,
body:not(.preauth) .grid2 a.b4 {
  box-shadow: inset 0 1px rgba(255,255,255,.07),0 2px 6px rgba(0,6,13,.22);
}
@media (hover:hover) and (pointer:fine) {
  body:not(.preauth) .statusrow button:hover:not(:disabled),
  body:not(.preauth) .topbar button:hover:not(:disabled),
  body:not(.preauth) .grid2 button:hover:not(:disabled),
  body:not(.preauth) .grid2 a.b1:hover,
  body:not(.preauth) .grid2 a.b2:hover,
  body:not(.preauth) .grid2 a.b3:hover,
  body:not(.preauth) .grid2 a.b4:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px rgba(255,255,255,.12),0 5px 12px rgba(0,7,15,.32);
  }
  body:not(.preauth) .statusrow button:active:not(:disabled),
  body:not(.preauth) .topbar button:active:not(:disabled),
  body:not(.preauth) .grid2 button:active:not(:disabled) { transform: translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  body:not(.preauth) .statusrow button,
  body:not(.preauth) .topbar button,
  body:not(.preauth) .grid2 button,
  body:not(.preauth) .grid2 a { transition: none!important; transform: none!important; }
}
@media (max-width:760px) {
  body:not(.preauth) #statusPanel,
  body:not(.preauth) .grid2 > .leftcol > .panel,
  body:not(.preauth) .grid2 > .midcol > .panel,
  body:not(.preauth) .grid2 > .chatcol > .panel { box-shadow: 0 5px 14px rgba(0,7,15,.24),inset 0 1px rgba(191,226,255,.04); }
  body:not(.preauth) #mapPanel { box-shadow: 0 7px 18px rgba(0,7,15,.30),inset 0 1px rgba(218,242,255,.07); }
  body:not(.preauth) #mapPanel .mapframe { box-shadow: inset 0 0 18px rgba(3,12,22,.55); }
}
/* 17AQK end */

/* 17AQL: 日常操作から全予約取消を離し、誤タップしにくい危険操作として扱う。 */
.queue-clear-row-17aql { justify-content: flex-end; }
.queue-clear-all-17aql {
  align-self: flex-end;
  min-height: 40px;
  padding: 6px 10px;
  font-size: 11px;
  color: #d5a8a8;
  background: rgba(72,31,39,.56);
  border-color: rgba(174,79,91,.48);
}
.queue-clear-all-17aql:hover { color: #ffd6d6; background: rgba(105,39,49,.72); }
@media (max-width:760px) {
  .queue-clear-all-17aql { min-height: 44px; }
}
/* 17AQL end */

/* ===== 🔴 17ARS はこったーの見た目（X 風の洗練。もりたつ指定 2026-09-07）=====
   紺の下地は本体に合わせたまま、余白・階層・ホバー色（返信=青／再投稿=緑／いいね=桃／保存=青）を X に寄せる。
   古い規則より後ろに置いて上書きする。 */
.hakotter{--ht-blue:#4ca6ff;--ht-green:#3ecf8e;--ht-pink:#ff718d;--ht-gold:#ffd166;--ht-ink:#e9f2fb;--ht-muted:#7f9ab5;--ht-line:rgba(94,137,177,.22)}
/* 見出し */
.hakotter h2 .ht-subtitle{color:var(--ht-muted)}
/* 上部の道具（タブ・検索・話題）: 枠を外して余白で区切る */
.hakotter-tools{margin:0 -2px 8px;padding:0;border:0;border-radius:0;background:transparent}
.hakotter-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 8px;border-bottom:1px solid var(--ht-line)}
.hakotter-tabs button{position:relative;min-height:40px;padding:0 2px;border:0;border-radius:0;background:transparent;color:var(--ht-muted);font-weight:600;font-size:12px;white-space:nowrap;transition:color .15s,background .15s}
.hakotter-tabs button:hover{background:rgba(76,166,255,.07);color:#d9edff}
.hakotter-tabs button.on{background:transparent;color:#fff;border:0}
.hakotter-tabs button.on::after{content:"";position:absolute;left:50%;bottom:-1px;width:min(56px,70%);height:3px;border-radius:3px;background:var(--ht-blue);transform:translateX(-50%)}
#hakotterUnreadBadge{margin-left:2px}
.ht-searchrow input{height:36px;background:#0b1d31;border-color:#2b4c6f}
.ht-searchrow input:focus{background:#0d2238}
.ht-searchrow button{min-height:36px;border-radius:999px}
/* いまの話題: X のトレンド一覧（順位・#タグ・件数） */
.ht-trends{display:block;overflow:visible;margin-top:8px}
.ht-trends-list{display:grid;gap:0;border:1px solid var(--ht-line);border-radius:14px;background:rgba(9,25,42,.55);overflow:hidden}
.ht-trends-title{padding:7px 12px 3px;color:#e6f1fb;font-size:12px;font-weight:700}
.ht-trends-list button{display:flex;align-items:center;gap:8px;width:100%;padding:5px 12px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .12s}
.ht-trends-list button:hover{background:rgba(76,166,255,.08);text-decoration:none}
.ht-trend-rank{flex:0 0 18px;color:var(--ht-muted);font-size:11px;font-variant-numeric:tabular-nums}
.ht-trend-body{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex:1;min-width:0}
.ht-trend-body b{color:#ecf5ff;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-trend-body small{flex:0 0 auto;color:var(--ht-muted);font-size:10.5px}
.ht-scope-label{color:var(--ht-muted)}
/* 作成欄 */
.ht-compose17ars{display:grid;gap:6px;padding:10px 10px 8px;border:1px solid var(--ht-line);border-radius:16px;background:linear-gradient(180deg,rgba(12,30,50,.9),rgba(9,24,40,.9))}
.ht-compose17ars:focus-within{border-color:rgba(76,166,255,.45);box-shadow:0 0 0 3px rgba(76,166,255,.10)}
.ht-compose-main{position:relative}
.ht-compose17ars #chatInput{width:100%;box-sizing:border-box;min-height:44px;max-height:132px;padding:8px 4px;border:0;border-radius:0;background:transparent;color:var(--ht-ink);font-size:14.5px;line-height:1.5;resize:none}
.ht-compose17ars #chatInput:focus{outline:0;box-shadow:none}
.ht-compose17ars #chatInput::placeholder{color:#6f8aa6}
.ht-compose-bar{display:flex;align-items:center;gap:2px;padding-top:6px;border-top:1px solid var(--ht-line)}
.ht-compose-bar .chatexprbtn{width:34px;height:34px;padding:2px;border:0;border-radius:50%;background:transparent}
.ht-compose-bar .chatexprbtn svg{width:28px;height:28px}
.ht-compose-bar .chatexprbtn:hover{background:rgba(76,166,255,.12)}
.ht-tool{flex:0 0 auto;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ht-blue);font-size:16px;line-height:1;cursor:pointer;transition:background .12s}
.ht-tool:hover{background:rgba(76,166,255,.12);color:#8fcaff}
.ht-tool.on{background:rgba(76,166,255,.18);color:#fff}
.ht-count-ring{flex:0 0 auto;width:22px;height:22px;margin-left:auto}
.ht-count-ring svg{width:22px;height:22px;transform:rotate(-90deg)}
.ht-count-ring circle{fill:none;stroke-width:2.4}
.ht-count-ring .bg{stroke:#2b4c6f}
.ht-count-ring .fg{stroke:var(--ht-blue);stroke-dasharray:62.83;stroke-dashoffset:62.83;stroke-linecap:round;transition:stroke-dashoffset .15s,stroke .15s}
.ht-count-ring.near .fg{stroke:#e8c13a}
.ht-count-ring.full .fg{stroke:#ff6b6b}
.ht-count-ring.empty{opacity:.55}
.ht-compose-bar .ht-count{align-self:center;padding:0 4px 0 2px;font-size:10.5px}
.ht-send{min-height:34px;padding:5px 16px;border-radius:999px;font-weight:700}
.ht-send:disabled{opacity:.5}
/* 入力候補（@島名・#タグ） */
.ht-suggest{position:absolute;z-index:30;left:0;top:100%;min-width:220px;max-width:100%;margin-top:2px;padding:4px;border:1px solid #35618f;border-radius:12px;background:#0f2540;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.ht-suggest[hidden]{display:none}
.ht-suggest button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:8px;background:transparent;color:#e4eef8;font:inherit;text-align:left;cursor:pointer}
.ht-suggest button.on,.ht-suggest button:hover{background:rgba(76,166,255,.16)}
.ht-suggest-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(76,166,255,.18);color:var(--ht-blue);font-weight:700}
.ht-suggest button b{display:block;font-size:12.5px}
.ht-suggest button small{display:block;color:var(--ht-muted);font-size:10.5px}
/* 絵文字ピッカー */
.ht-emoji-pop{position:absolute;z-index:30;left:0;top:calc(100% + 4px);display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:min(300px,86vw);padding:6px;border:1px solid #35618f;border-radius:12px;background:#0f2540;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.ht-compose-bar{position:relative}
.ht-emoji-pop button{width:100%;aspect-ratio:1;padding:0;border:0;border-radius:8px;background:transparent;font-size:18px;line-height:1;cursor:pointer}
.ht-emoji-pop button:hover{background:rgba(76,166,255,.16)}
/* アンケート作成欄 */
.ht-poll-editor{display:grid;gap:6px;padding:8px;border:1px solid #2f5478;border-radius:12px;background:rgba(8,22,38,.7)}
.ht-poll-editor[hidden]{display:none}
.ht-poll-editor-head{display:flex;align-items:center;justify-content:space-between;color:#dbe9f6;font-size:12px}
.ht-poll-close{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ht-muted);cursor:pointer}
.ht-poll-close:hover{background:rgba(255,255,255,.08);color:#fff}
.ht-poll-options{display:grid;gap:5px}
.ht-poll-options input{width:100%;box-sizing:border-box;min-height:34px;padding:6px 10px;border:1px solid #2f5478;border-radius:8px;background:#0b1d31;color:#e6f1fb;font:inherit;font-size:13px}
.ht-poll-options input:focus{outline:0;border-color:var(--ht-blue);box-shadow:0 0 0 2px rgba(76,166,255,.18)}
.ht-poll-editor-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ht-poll-editor-foot label{display:inline-flex;align-items:center;gap:6px;color:var(--ht-muted);font-size:11px}
.ht-poll-editor-foot select{min-height:30px;border-radius:8px}
.ht-poll-add{min-height:30px;border-radius:999px;font-size:11px}
/* カード */
.hakotter .chatlog{background:#0b1d31;border-color:#2b4c6f;border-radius:14px}
.ht-post{padding:11px 12px 8px;border-bottom:1px solid var(--ht-line);transition:background .12s}
.ht-post:hover{background:rgba(76,166,255,.045)}
.ht-post.is-repost{box-shadow:none}
.ht-reposted,.ht-pinned{margin:0 0 3px 51px;color:var(--ht-muted);font-size:11px;font-weight:600}
.ht-reposted{color:#69cf9c}
.ht-pinned{color:var(--ht-muted)}
.ht-avatar{flex-basis:42px;width:42px;height:42px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.ht-head{gap:4px;flex-wrap:nowrap}
.ht-account b{max-width:132px;color:#f2f8ff;font-size:13.5px;font-weight:700}
.ht-island-link,.ht-island-gone{font-size:11.5px;color:var(--ht-muted)}
.ht-sea{border:0;padding:0;color:var(--ht-muted);font-size:10.5px}
.ht-sea::before{content:"·";margin-right:4px}
.ht-time{font-size:10.5px;color:var(--ht-muted)}
.ht-text{margin-top:3px;font-size:14px;line-height:1.55;color:var(--ht-ink)}
.ht-tag,.ht-mention,.ht-official-link{color:var(--ht-blue);text-decoration:none}
.ht-tag:hover,.ht-mention:hover{color:#8fcaff;text-decoration:underline}
.ht-media{margin-top:9px;border:1px solid #2b4c6f;border-radius:16px}
.ht-media-open{display:block;width:100%;min-width:0;padding:0;border:0;background:#0b1d31;line-height:0;cursor:zoom-in}
.ht-media-open img{width:100%;height:100%;display:block;object-fit:cover;transition:opacity .15s}
.ht-media-open:hover img{opacity:.92}
.ht-media.n1 .ht-media-open img{max-height:340px;height:auto;object-fit:contain}
.ht-media.n2 .ht-media-open img,.ht-media.n4 .ht-media-open img,.ht-media.n3 .ht-media-open img{aspect-ratio:1/1}
.ht-media.n3 .ht-media-open:first-child{grid-row:span 2}
.ht-media.n3 .ht-media-open:first-child img{aspect-ratio:1/2}
.ht-quoted{margin-top:8px;border-radius:14px;border-color:#2f5478;background:rgba(8,22,38,.55)}
.ht-quoted:hover{background:rgba(8,22,38,.8)}
/* アンケート */
.ht-poll{display:grid;gap:5px;margin-top:9px}
.ht-poll-option{display:block;width:100%;min-height:36px;padding:6px 12px;border:1px solid var(--ht-blue);border-radius:999px;background:transparent;color:#8fcaff;font:inherit;font-size:13px;font-weight:700;text-align:center;cursor:pointer;transition:background .12s}
.ht-poll-option:hover:not(:disabled){background:rgba(76,166,255,.14)}
.ht-poll-option:disabled{opacity:.5}
.ht-poll-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;padding:5px 10px;border-radius:6px;overflow:hidden;color:#e6f1fb;font-size:13px}
.ht-poll-bar{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:rgba(76,166,255,.22);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ht-poll-row.top .ht-poll-bar{background:rgba(76,166,255,.42)}
.ht-poll-row.mine .ht-poll-label{font-weight:700}
.ht-poll-label,.ht-poll-pct{position:relative;z-index:1}
.ht-poll-pct{font-variant-numeric:tabular-nums}
.ht-poll-foot{display:flex;gap:6px;color:var(--ht-muted);font-size:11px;padding:2px 2px 0}
/* アクション行 */
.ht-actions{display:flex;justify-content:space-between;gap:0;margin:6px 0 0 -6px}
.ht-actions button{min-width:0;min-height:30px;padding:3px 7px;border:0;border-radius:999px;background:transparent;color:var(--ht-muted);font-size:11.5px;transition:background .12s,color .12s}
.ht-actions button span{font-variant-numeric:tabular-nums}
.ht-actions button:hover:not(:disabled){background:rgba(76,166,255,.11);color:var(--ht-blue)}
.ht-actions .ht-reply:hover:not(:disabled){color:var(--ht-blue);background:rgba(76,166,255,.13)}
.ht-actions .ht-repost:hover:not(:disabled),.ht-actions .ht-repost.on{color:var(--ht-green);background:rgba(62,207,142,.12)}
.ht-actions .ht-repost.on:not(:hover){background:transparent}
.ht-actions .ht-like:hover:not(:disabled),.ht-actions .ht-like.on{color:var(--ht-pink);background:rgba(255,113,141,.12)}
.ht-actions .ht-like.on:not(:hover){background:transparent}
.ht-actions .ht-bookmark:hover:not(:disabled), .ht-actions .ht-bookmark.on{color:var(--ht-blue);background:rgba(76,166,255,.13)}
.ht-actions .ht-bookmark{font-size:13px}
.ht-actions .ht-bookmark:not(.on){opacity:.75}
.ht-actions .ht-more-btn{margin-left:0}
/* いいねの弾み（押した瞬間だけ。定期再描画では動かない。動きを減らす設定では止める） */
@keyframes ht-like-pop{0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.ht-like{position:relative}
.ht-like.pop::before{content:"";position:absolute;left:8px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px solid rgba(255,113,141,.7);opacity:0;animation:ht-like-burst .55s ease-out;pointer-events:none}
@keyframes ht-like-burst{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.ht-like.pop span{display:inline-block;animation:ht-like-pop .45s ease-out}
@media (prefers-reduced-motion: reduce){.ht-like.pop span,.ht-like.pop::before{animation:none}}
.ht-thread{padding:6px 0 0;font-weight:600;font-size:11.5px}
/* 骨組み（読み込み中） */
.ht-skeleton{display:grid;gap:14px;padding:14px 12px}
.ht-skeleton i{position:relative;display:block;height:58px;border-radius:12px;overflow:hidden;background:rgba(94,137,177,.12)}
.ht-skeleton i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(94,137,177,.22),transparent);transform:translateX(-100%);animation:ht-shimmer 1.3s linear infinite}
@keyframes ht-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){.ht-skeleton i::after{animation:none}}
/* 新着ボタン・さらに読み込む */
.ht-new button{border-color:var(--ht-blue);background:var(--ht-blue);color:#07213a;font-weight:700;box-shadow:0 6px 18px rgba(76,166,255,.35)}
.ht-new button:hover{background:#6fb8ff}
.ht-more button{border-radius:999px}
/* ライトボックス */
.ht-lightbox{position:fixed;inset:0;z-index:100010;display:grid;place-items:center;background:rgba(2,8,16,.92);animation:ht-fade .15s ease-out}
@keyframes ht-fade{from{opacity:0}to{opacity:1}}
.ht-lb-figure{margin:0;max-width:min(96vw,1100px);max-height:94vh;display:grid;gap:8px;justify-items:center}
.ht-lightbox img{max-width:96vw;max-height:84vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;transform:scale(.98);transition:opacity .18s,transform .18s}
.ht-lightbox img.in{opacity:1;transform:none}
.ht-lightbox figcaption{display:flex;gap:14px;align-items:center;color:#bcd2e6;font-size:12px}
.ht-lightbox figcaption a{color:#8fcaff}
.ht-lb-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.ht-lb-x:hover{background:rgba(255,255,255,.22)}
.ht-lb-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.ht-lb-nav:hover{background:rgba(255,255,255,.24)}
.ht-lb-nav.prev{left:12px}.ht-lb-nav.next{right:12px}
/* プロフィール */
.ht-profile-cover{height:132px}
.ht-profile-avatar{width:76px;height:76px;border:3px solid #0f2540;bottom:-4px}
.ht-profile-name b{font-size:19px}
.ht-profile-stats{gap:16px;padding-bottom:10px}
.ht-profile-actions button{font-weight:600}
.ht-follow{background:#eaf3ff;color:#0b1d31;border-color:#eaf3ff}
.ht-follow:hover{background:#d6e8ff}
.ht-follow.on{background:transparent;color:#d3e3f1;border-color:#4b6f94}
.ht-follow.on:hover{color:#ff9d8a;border-color:#a3534f}
/* 通知・一覧の行 */
.ht-user-row{padding:11px 14px}
.ht-user-row small{color:var(--ht-muted)}
@media (max-width:520px){
  .hakotter-tabs button{font-size:10.5px;min-height:38px}
  .ht-compose17ars{padding:8px 8px 6px;border-radius:14px}
  .ht-actions button{min-height:34px;padding:3px 6px;font-size:11px}
  .ht-actions .ht-quote{font-size:0}
  .ht-actions .ht-quote::before{content:'❝';font-size:14px}
  .ht-reposted,.ht-pinned{margin-left:46px}
  .ht-emoji-pop{grid-template-columns:repeat(7,1fr)}
  .ht-lb-nav{width:40px;height:40px;margin-top:-20px}
}
/* 17ARS end */

/* ===== 17ARU 戦況ボード（夜の海図）: 表彰台・範囲チップ・検索・順位推移・共有 ===== */
.rboardwrap .rboard{border-radius:12px}
.rk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 10px}
.rk-chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rk-chips::-webkit-scrollbar{display:none}
.rk-chip{font:inherit;font-size:12px;font-weight:500;padding:4px 12px;border-radius:999px;border:1px solid #2f5a86;background:rgba(11,36,62,.6);color:#bfe0ff;cursor:pointer;white-space:nowrap;line-height:1.4}
.rk-chip:hover{border-color:#4ea1ff}
.rk-chip.on{background:linear-gradient(180deg,#1d4f7e,#153b61);border-color:#4ea1ff;color:#eef7ff;box-shadow:inset 0 0 0 1px rgba(120,190,255,.25)}
.rk-chip:disabled{opacity:.45;cursor:not-allowed}
.rk-search{flex:1 1 160px;min-width:120px;font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid #2f5a86;background:#0b1a2c;color:#eaf3fb}
.rk-search::placeholder{color:#63788d}
.rk-search:focus{outline:none;border-color:#4ea1ff;box-shadow:0 0 0 2px rgba(78,161,255,.22)}
.rk-hits{font-size:12px;color:var(--text-2);margin:0 0 6px}
/* 表彰台: 2位・1位・3位の順に並べ、1位を一段高く */
.rk-podium{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:8px;align-items:end;margin:2px 0 10px}
.rk-pd{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;text-align:center;padding:10px 8px 9px;border-radius:12px;min-width:0;cursor:pointer;color:#e9f2fb;background:linear-gradient(180deg,#123458,#0c243d);border:1px solid #27507a;box-shadow:inset 0 1px 0 rgba(180,220,255,.08)}
.rk-pd.p1{padding-top:18px;padding-bottom:14px;border-color:#c9a24a;background:linear-gradient(180deg,#2b3f55 0%,#1b2f48 55%,#132844 100%);box-shadow:inset 0 1px 0 rgba(255,225,150,.28),0 8px 20px -10px rgba(255,209,102,.5)}
.rk-pd.p2{border-color:#8fa5bb}
.rk-pd.p3{border-color:#a8744f}
.rk-pd.empty{visibility:hidden}
.rk-pd:hover{border-color:#6fb2ff}
.rk-pd.me{box-shadow:0 0 0 2px rgba(127,209,138,.55)}
.rk-pd-m{font-size:20px;line-height:1}
.rk-pd.p1 .rk-pd-m{font-size:26px}
.rk-pd-n{font-weight:600;font-size:13.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gold-soft)}
.rk-pd.p1 .rk-pd-n{font-size:15px;color:#ffe9a8}
.rk-pd-h{font-size:11px;color:#9fb6cf;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-pd-v{font-size:13px;font-variant-numeric:tabular-nums;color:#f2f7fc;margin-top:2px}
.rk-pd .seatag{font-size:10px}
.rk-pd-e{display:inline-flex;line-height:0}
.rk-pd-e svg{display:block;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
/* 表: 上位3行の順位を金銀銅に、自島に札 */
.ranktbl td{padding:5px 6px}
.ranktbl tr.rk-top1 td.rkpos{color:#ffd166}
.ranktbl tr.rk-top2 td.rkpos{color:#cfd9e3}
.ranktbl tr.rk-top3 td.rkpos{color:#d9a074}
.ranktbl td.rkname{min-width:0}
.ranktbl .rkn{min-width:0;overflow-wrap:anywhere}   /* 島名は折り返す（nowrap にすると表がスマホ幅を超える） */
.rkbar{background:linear-gradient(90deg,#2f7fd6,#7fd1ff);opacity:.8}
.rk-me{display:inline-block;font-size:10px;line-height:1.5;padding:0 6px;border-radius:999px;background:rgba(127,209,138,.16);color:var(--ok);margin-left:4px;vertical-align:1px;font-weight:500}
.rk-share{display:flex;gap:6px;margin-top:8px}
.rk-share .b3{flex:1 1 auto;font-size:12px;padding:5px 8px;white-space:nowrap}
/* 自島カード: 値と順位推移（この端末の記録）を横並び */
.rbcard .rbc-b{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.rbcard .rbc-b .rbc-v{flex:1 1 auto}
.rk-spark{flex:none;overflow:visible;opacity:.95}
.rk-spark path{fill:none;stroke:#7fd1ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rk-spark circle{fill:#ffd166}
.rk-banner{background:#4a3a00;color:#ffe9a8;border:1px solid #8a6d1f;border-radius:8px;padding:8px 10px;margin-bottom:10px;font-weight:500}
/* 「自島へ」で飛んだ行を一瞬だけ光らせる（1回きり・有限） */
@keyframes rk-flash{0%{background-color:rgba(255,209,102,.35)}100%{background-color:transparent}}
.ranktbl tr.rk-flash td,.rk-pd.rk-flash{animation:rk-flash 1.2s ease-out}
@media (prefers-reduced-motion: reduce){.ranktbl tr.rk-flash td,.rk-pd.rk-flash{animation:none}}
/* 全順位モーダルの道具列 */
#rankModal .rm-tools{padding:8px 14px 8px;margin:0;display:flex;gap:8px;align-items:center;border-bottom:1px solid #24405f}
#rankModal .rm-tools .rk-search{flex:1 1 auto}
#rankModal .rk-jump{flex:none;font-size:12px;white-space:nowrap}
@media (max-width: 720px){
  /* スマホ: 自島カード 8 枚を縦に積むと表彰台まで 2 画面ぶん下がる → 横スワイプの 1 段に */
  .rboard .rbcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rboard .rbcards::-webkit-scrollbar{display:none}
  .rboard .rbcards .rbcard{flex:0 0 46%;scroll-snap-align:start}
  .rk-tools{gap:6px}
  .rk-search{flex-basis:100%}
  .rk-podium{gap:6px}
  .rk-pd{padding:8px 4px 7px;border-radius:10px}
  .rk-pd.p1{padding-top:11px;padding-bottom:9px}
  .rk-pd-n{font-size:12.5px}
  .rk-pd.p1 .rk-pd-n{font-size:13.5px}
  .rk-pd-v{font-size:12px}
  .ranktbl{font-size:13.5px}
  .ranktbl td.rkdelta{width:40px;font-size:12px}
  .ranktbl td.rkpos{width:36px}
}
/* 17ARY: 本文と無機的な海図だけの予告。外部画像・音・無限アニメなし。 */
.upd-ov .upd-list>.signal-item-17ary{list-style:none;margin-left:-20px}
.signal-notice-17ary{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;min-height:320px;margin:12px 0;padding:180px clamp(18px,5vw,36px) 32px;border:1px solid #405d6a;border-radius:12px;background:radial-gradient(ellipse at 50% 35%,#203d49 0,transparent 60%),#07131e;color:#eef4ee;text-align:left}
.signal-notice-17ary::before{content:"";position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(0deg,transparent 0 38px,#b5d6d30c 39px 40px),repeating-linear-gradient(90deg,transparent 0 38px,#b5d6d30c 39px 40px);mask-image:linear-gradient(#000,transparent 82%)}
.signal-chart-17ary{position:absolute;z-index:-1;width:236px;height:236px;top:-42px;left:calc(50% - 118px);border:1px solid #9acabd44;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 38px,#b5d6d325 39px 40px);opacity:.7}
.signal-chart-17ary::after{content:"";position:absolute;inset:32%;border-top:1px solid #d6ece877;border-bottom:1px solid #d6ece833;transform:rotate(-24deg);animation:signal-arrival-17ary 1600ms ease-out 1}
.signal-notice-17ary>b{display:block;font:600 clamp(23px,3.3vw,31px)/1.6 "Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.06em;text-wrap:balance;color:#f0ebdc}
.signal-notice-17ary>p{position:relative;margin:20px 0 0!important;font-size:14px;line-height:2!important;letter-spacing:.09em;color:#a8c0c4;max-width:32em;overflow-wrap:anywhere}
@keyframes signal-arrival-17ary{from{opacity:0;transform:translateX(-14px) rotate(-24deg)}to{opacity:1;transform:translateX(0) rotate(-24deg)}}
.signal-notice-17ary>b{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:320px){.signal-notice-17ary>b{font-size:19px!important;letter-spacing:0!important}}
@media(prefers-reduced-motion:reduce){.signal-chart-17ary::after{animation:none}}
@media(max-width:390px){.signal-notice-17ary{padding:150px 18px 26px;min-height:300px}.signal-notice-17ary>b{font-size:23px;letter-spacing:.02em}.signal-notice-17ary>p{font-size:13px;letter-spacing:.02em}}
/* The shell is inert until authenticated availability is confirmed. */
#sharedEventEntry17atd[hidden] { display: none; }
#sharedEventEntry17atd { min-height: 44px; margin: 8px 0; }
.shared-event-dialog { box-sizing: border-box; width: min(960px, calc(100% - 16px)); max-width: none; max-height: calc(100dvh - 24px); padding: 16px; overflow: auto; color: #e4eef7; background: #101f30; border: 1px solid #4b657d; border-radius: 14px; }
.shared-event-dialog::backdrop { background: #020913db; }
.shared-event-close { position: sticky; top: 0; z-index: 2; display: block; margin-left: auto; min-height: 44px; min-width: 72px; color: inherit; background: #243c54; border: 1px solid #7690a9; border-radius: 8px; box-shadow: 0 4px 14px #02091399; cursor: pointer; }
@media (max-width: 480px) { .shared-event-dialog { padding: 12px; } }

/* 17ATV: BEGIN — 本海域のコマンドと所持チケット。ゲーム判定・販売画面は変更しない。 */
#tkPopModal .tk-pop { min-height: 0; max-height: min(88dvh, 100%); }
#tkPopModal .shop-hd, #tkPopModal .shop-bal, #tkPopModal .tk-filter17atv { flex: none; }
#tkPopModal .shop-ttl { min-width: 0; }
#tkPopModal .shop-x { width: 44px; height: 44px; flex: none; }
#tkPopModal .tk-filter17atv { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 8px 18px; background: #102239; border-bottom: 1px solid #355271; }
#tkPopModal .tk-filter17atv label { font-size: 14px; color: #eaf3fb; }
#tkPopModal .tk-filter17atv select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px; font-size: 16px; color: #eaf3fb; background: #172f4b; border: 1px solid #6485a6; border-radius: 8px; }
#tkPopModal #tkFilterStatus17atv { grid-column: 2; font-size: 12px; color: #b7cbe0; }
#tkPopModal .tk-scroll17atv { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#tkPopModal [hidden] { display: none !important; }
#tkPopModal .tk-help17atv { margin: 16px 0 8px; color: #c5d9ee; }
#tkPopModal .tk-help17atv summary { min-height: 44px; padding: 10px 0; box-sizing: border-box; cursor: pointer; font-size: 14px; }
#tkPopModal .tk-help17atv .shop-foot { font-size: 14px; line-height: 1.7; padding: 12px; }
#tkPopModal .tk-expiry17awg { margin:12px 0; padding:10px 12px; border:1px solid #54755f; border-radius:10px; background:#102d25; color:#dff6e8; }
#tkPopModal .tk-expiry17awg>b { display:block; margin-bottom:6px; font-size:14px; }
#tkPopModal .tk-expiry17awg ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
#tkPopModal .tk-expiry17awg li { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; font-size:13px; line-height:1.45; }
#tkPopModal .tk-expiry17awg time { min-width:86px; font-variant-numeric:tabular-nums; color:#fff; }
#tkPopModal .tk-expiry17awg strong { color:#ffe18a; }
#tkPopModal .tk-expiry17awg span { color:#bcd7c5; }
#tkPopModal :is(button, select, summary):focus-visible, #cellmenu button:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
@media (max-width: 760px) {
  /* inline maxWidth を確実に上書き。画面下部と地図を両立する大海洋式の幅。 */
  #cellmenu { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(env(safe-area-inset-bottom) + 8px); width: auto !important; min-width: 0; max-width: none !important; max-height: min(60dvh, calc(100dvh - 24px)) !important; box-sizing: border-box; background: #10243a; border: 1px solid #527392; border-radius: 14px; overflow: auto; overscroll-behavior: contain; font-size: 16px; }
  body.mmode #cellmenu { z-index: 246; bottom: calc(var(--mnavh) + var(--mresh) + 8px); max-height: min(60dvh, calc(100dvh - var(--mnavh) - var(--mresh) - 24px)) !important; }
  #cellmenu .hd { position: sticky; top: 0; z-index: 2; background: #142d48; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 64px 10px 10px; }
  #cellmenu .hd .cm-ident17auq { min-width: 8rem; flex-basis:calc(100% - 86px); }
  #cellmenu .hd .cm-name { min-width: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
  #cellmenu .hd .cm-x, #cellmenu .hd .cm-pin { min-width: 44px; min-height: 44px; flex: none; }
  #cellmenu .hd .cm-x { position: absolute; top: 10px; right: 10px; margin: 0; }
  #cellmenu .hd .cm-ident17auq .sub { flex: 1 0 100%; font-size: 13px; overflow-wrap: anywhere; }
  #cellmenu .hd .cm-pins { min-width: 0; max-width: 100%; flex-wrap: wrap; margin-left: 0; }
  #cellmenu .hd .cmp-ttl { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #cellmenu .cm-stack-detail { min-height: 44px; font-size: 14px; white-space: normal; }
  #cellmenu .tkstrip .tks-hint { font-size: 13px; line-height: 1.5; }
  #cellmenu .it { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-height: 48px; padding: 12px; white-space: normal; line-height: 1.5; border-bottom: 1px solid #2a435d; }
  #cellmenu .it .c { width: 100%; justify-content: flex-start; text-align: left; font-size: 14px; overflow-wrap: anywhere; }
  #cellmenu .it.dis, #cellmenu .it.dis .c { color: #acbac8; }
  #cellmenu .it.ban .why { color: #e3b69e; font-size: 13px; line-height: 1.5; }
  #cellmenu .tkq { min-height: 44px; padding: 8px 12px; font-size: 14px; line-height: 1.4; margin-left: auto; }
  #cellmenu .tkq[data-tkc]::after { content: " チケット"; }
  #tkPopModal { align-items: flex-end; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #tkPopModal .tk-pop { width: 100%; max-width: none; max-height: 100%; border-radius: 16px; }
  #tkPopModal .shop-hd { padding: 14px 12px 10px; }
  #tkPopModal .shop-sub { font-size: 12px; letter-spacing: normal; }
  #tkPopModal .shop-bal { margin: 8px 12px; padding: 8px 12px; font-size: 16px; gap: 6px 12px; }
  #tkPopModal .shop-bal span { font-size: 13px; }
  #tkPopModal .tk-filter17atv { padding: 8px 12px; }
  #tkPopModal .tk-scroll17atv { padding: 0 12px 12px; }
  #tkPopModal .shop-grid { grid-template-columns: minmax(0, 1fr); }
  #tkPopModal .shop-sec h3 { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  #tkPopModal .shop-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px 12px; padding: 12px; transform: none; }
  #tkPopModal .sc-ic { grid-column: 1; grid-row: 1 / span 2; }
  #tkPopModal .sc-badge { position: static; grid-column: 2; grid-row: 1; justify-self: start; font-size: 13px; white-space: normal; }
  #tkPopModal .sc-nm { grid-column: 2; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
  #tkPopModal .sc-ds, #tkPopModal .sc-hold, #tkPopModal .sc-note, #tkPopModal .sc-row { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  #tkPopModal .sc-note { color: #b7cbe0; }
  #tkPopModal .sc-use { min-height: 48px; width: 100%; font-size: 16px; }
  /* メッセージのみスクロール。長文でも取消・決定・閉じるを画面内に保つ。 */
  #ynModal, #qtyModal, #txtModal { align-items: flex-end; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #ynModal .yn-box, #qtyModal .yn-box, #txtModal .yn-box { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); padding: 12px; overflow: hidden; }
  #ynModal .yn-x, #qtyModal .yn-x, #txtModal .yn-x { position: static; align-self: flex-end; flex: none; width: 44px; height: 44px; margin-bottom: 8px; }
  #ynModal .yn-msg, #qtyModal .yn-msg, #txtModal .yn-msg { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 0 12px; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
  #ynModal .yn-btns, #qtyModal .yn-btns, #txtModal .yn-btns { flex: none; flex-direction: column; gap: 8px; }
  #ynModal .yn-btns button, #qtyModal .yn-btns button, #txtModal .yn-btns button { flex: none; min-height: 48px; font-size: 16px; white-space: normal; }
  #qtyModal .qty-sel, #txtModal .txt-in, #ynModal .yn-legal { flex: none; }
  #ynModal .yn-legal a { font-size: 13px; color: #b7cbe0; }
}
/* 17ATV: END */

/* 17ATX: 用途別メニューと現地自艦チケット */
#cellmenu .it[hidden] { display: none !important; }
.cm-filters-17atx { display:grid; gap:8px; padding:12px; border-bottom:1px solid #395775; background:#122b43; }
.cm-filters-17atx label { display:grid; gap:4px; font-size:13px; color:#b7cde1; }
.cm-filters-17atx select,.cm-filters-17atx input { min-width:0; width:100%; box-sizing:border-box; min-height:44px; font-size:16px; border:1px solid #456782; border-radius:8px; background:#081e31; color:#eef7ff; padding:8px; }
.cm-filters-17atx .cm-ready-only17aur { display:flex; align-items:center; gap:9px; min-height:44px; padding:7px 10px; border:1px solid #395b79; border-radius:8px; background:#0d2438; cursor:pointer; }
.cm-filters-17atx .cm-ready-only17aur input { width:20px; min-height:20px; height:20px; margin:0; padding:0; accent-color:#4a8bff; flex:0 0 auto; }
.cm-filters-17atx small { color:#b7cde1; }
.cm-fleet-tickets-17atx { padding:12px; border-bottom:1px solid #395775; background:#142c42; overflow-wrap:anywhere; }
.cm-fleet-tickets-17atx>b,.cm-fleet-tickets-17atx>small { display:block; margin-bottom:7px; }
.cm-fleet-tickets-17atx>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:8px; }
.cm-fleet-tickets-17atx button { min-width:0; min-height:58px; padding:8px; white-space:normal; border:1px solid #547492; border-radius:9px; background:#1b3b58; color:#eff8ff; text-align:left; font-size:15px; }
.cm-fleet-tickets-17atx button small { display:block; color:#c1d9eb; margin-top:3px; font-size:12px; }
.cm-fleet-tickets-17atx button:disabled { opacity:.5; cursor:default; }
.cm-fleet-tickets-17atx>small { color:#b7cde1; font-size:12px; line-height:1.5; }
.cm-fleet-tickets-17atx .active { color:#83e8b1; }
/* 17AUR: 他島・BFの艦艇一覧を所属で即座に見分け、スマホでは横スクロールで列を保つ。 */
.public-roster-tools17aur { display:flex; gap:6px; max-width:100%; margin:0 0 8px; overflow-x:auto; scrollbar-width:thin; }
.public-roster-tools17aur button { flex:0 0 auto; min-height:38px; padding:6px 13px; border:1px solid #3b6287; border-radius:999px; background:#102841; color:#c4d9ec; font:inherit; font-size:12.5px; cursor:pointer; }
.public-roster-tools17aur button[aria-pressed="true"] { border-color:#67a8ee; background:#22588c; color:#fff; box-shadow:inset 0 0 0 1px #8bc5ff3d; }
.public-roster-tools17aur button:disabled { opacity:.45; cursor:default; }
.public-roster-tools17aur button span { margin-left:3px; color:#9fc7ec; font-variant-numeric:tabular-nums; }
.public-roster-table17aur { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.public-roster-table17aur .scantbl { min-width:620px; }
.public-roster-table17aur .sc-o { min-width:116px; white-space:nowrap; color:#b9cee2; }
.public-roster-table17aur .sc-o span { display:inline-block; margin-right:5px; padding:0 5px; border:1px solid #4c6680; border-radius:999px; color:#9fb5ca; font-size:10px; line-height:1.55; }
.public-roster-table17aur .sc-o span.mine { border-color:#3d8d63; background:#163c2a; color:#a9edc5; }
.public-roster-table17aur tr.roster-mine17aur td { background:#18352852; }
.public-roster-empty17aur { padding:14px 10px; border:1px dashed #345270; border-radius:8px; font-size:12px; text-align:center; }
@media(max-width:520px) {
  .public-roster-tools17aur button { min-height:44px; padding:8px 15px; font-size:13px; }
}
/* A quiet gold silhouette: no extra layer or animation obscures stacked units. */
.cell.fleet.commemorative17aue > img.til:not(.base) { filter:sepia(.35) drop-shadow(0 0 2px #f1cf77); }
/* 17AXP: 工廠の余剰資源交換と標準小型建造券の近代化改修 */

/* 17AZI: 派遣状況・帰還先・検索条件を操作のそばに表示 */
.fleet-status17azi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;margin:8px 0;border:1px solid #35576d;border-radius:9px;background:#102535;font-size:12px}
.fleet-status17azi>div{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.fleet-status17azi>div>span{padding:3px 7px;border-radius:5px;background:#1c3a50;color:#e0edf6}
.fleet-status17azi small{flex:1 1 100%;color:#b6cad8;line-height:1.6}
.fleet-status17azi select{max-width:100%;font-size:12px}
.fleet-state17azi{display:block;color:#9ccee5;font-size:11px;white-space:normal}
.gs-recall-guide17azi{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px;font-size:12px;line-height:1.6;padding-top:8px}
.gs-recall-guide17azi span,.gs-recall-guide17azi small{flex:1 1 100%;white-space:normal}
.ht-search-status17azi:not([hidden]){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:8px 0;padding:8px 10px;border-radius:8px;background:#173348;font-size:13px}
.ht-search-status17azi span{overflow-wrap:anywhere;min-width:0;flex:1}
.gs17aii-return{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gs17aii-return label{min-width:0}
.gs17aii-return select{min-width:0;max-width:100%;width:100%}
.gs-recall-guide17azi{grid-column:1/-1;min-width:0}
.gs-recall-guide17azi button{max-width:100%;white-space:normal}

/* 17AZK: 目的別メニュー。隠れた欄はレイアウト・描画対象から外す。 */
body.mmode #mgInfo [data-menu-pane][hidden] { display:none !important; }
body.mmode .m-menu-home17azk>p { margin:2px 0 14px;color:var(--muted);font-size:13px; }
body.mmode .m-menu-grid17azk { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
body.mmode .m-menu-grid17azk button { display:grid;align-content:center;justify-items:start;gap:7px;min-height:102px;padding:14px 12px;border:1px solid #35556c;border-radius:14px;background:linear-gradient(140deg,#19354a,#102335);color:#e3f1ff;text-align:left;font-size:20px; }
body.mmode .m-menu-grid17azk b { font-size:14px; }
body.mmode .m-menu-grid17azk small { font-size:11px;color:#aac6db;line-height:1.4; }
body.mmode .m-menu-grid17azk button:focus-visible { outline:2px solid #80cbff;outline-offset:2px; }
body.mmode #mInfo-missions { display:grid;gap:10px; }
body.mmode #mInfo-missions>.panel { margin:0; }
body.mmode #mgInfo [data-menu-pane] { min-width:0; }
/* 艦名を広く、状態と位置を次の行へ。列を押し潰さず、編成セレクトも残す。 */
body.mmode .scantbl { width:100%;table-layout:auto; }
body.mmode .scantbl tr:has(>th) { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
body.mmode .scantbl tbody { display:block; }
body.mmode .scantbl tr.sc-row { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:12px 9px;border-bottom:1px solid #30485d; }
body.mmode .scantbl tr.sc-row td { border:0;padding:0;width:auto;min-width:0;text-align:left;white-space:normal; }
body.mmode .scantbl tr.sc-row .sc-n { grid-column:1/4;grid-row:1;font-size:14px;line-height:1.6;overflow-wrap:anywhere; }
body.mmode .scantbl tr.sc-row .sc-n img { width:32px;height:32px;vertical-align:middle;margin-right:8px; }
body.mmode .scantbl tr.sc-row .sc-c { font-size:11px;color:#acc4d5; }
body.mmode .scantbl tr.sc-row .sc-l { font-size:12px; }
body.mmode .scantbl tr.sc-row .sc-h { text-align:right;font-size:12px; }
body.mmode .scantbl tr.sc-row .sc-p { grid-column:1/4;font-size:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center; }
body.mmode .scantbl tr.sc-row .sc-o { grid-column:1/4;max-width:none;font-size:12px; }
body.mmode .scantbl tr.sc-row .sc-a { grid-column:1/4; }
body.mmode .scantbl tr.sc-row .sc-a select { min-height:44px;width:100%; }
body.mmode .scantbl .sc-g { display:block; }
/* 大海洋の主要操作は常設し、補助操作と凡例だけを展開する。 */
#gs17azkSettings { display:none; }
@media(max-width:760px) {
  #gs17azkSettings { display:inline-flex;align-items:center;min-height:40px; }
  .gs17aii-box:not(.gs-settings-open17azk) .gs17aii-tools [data-pan],
  .gs17aii-box:not(.gs-settings-open17azk) #gs17aszRoutes,
  .gs17aii-box:not(.gs-settings-open17azk) #gs17awfOwnerLabels,
  .gs17aii-box:not(.gs-settings-open17azk) #gs17aiiReload,
  .gs17aii-box:not(.gs-settings-open17azk) .gs17aii-legend { display:none; }
  .gs17aii-tools { gap:6px; }
  .gs17aii-tools #gs17aiiCenter { order:-3; }
  .gs17aii-tools .gs17aod-zoom { order:-2; }
  .gs17aii-tools #gs17azkSettings { order:-1;margin-left:auto; }
  .gs17aii-tools .gs17aod-layers { flex-basis:100%; }
}
body.mmode .fleet-directory17azk, body.mmode #mobileScanDetails17azk { margin:8px 0;border:1px solid #35556c;border-radius:10px;padding:0 10px; }
body.mmode .fleet-directory17azk>summary, body.mmode #mobileScanDetails17azk>summary { min-height:44px;align-content:center;cursor:pointer;color:#bddff4;font-size:13px; }
body.mmode .fleet-directory17azk .fleet-name-directory-title17amx { display:none; }
body.mmode .fleet-directory17azk .fleet-name-directory17amx { border:0;padding:0; }
body.mmode .scanshead { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
body.mmode .scanshead .t, body.mmode .scanshead .n, body.mmode .scanshead .sc-dispatch17axc { grid-column:1/-1; }
body.mmode .scanshead .t { min-width:0;white-space:normal; }
body.mmode .scanshead button { min-height:44px;margin:0; }
body.mmode #cellmenu .cm-secondary17azk>summary { padding:12px;min-height:44px;box-sizing:border-box;cursor:pointer;color:#bddff4;font-size:13px; }
body.mmode #cellmenu .cm-secondary17azk { border-top:1px solid #35556c; }

/* 17AZO: 確認ダイアログの「次回から確認しない」。押し間違えないよう本文とボタンの間に置く。 */
.yn-remember { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0;
  font-size: 12px; color: #a9bdd4; cursor: pointer; line-height: 1.4; }
.yn-remember input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #3d7fd6; cursor: pointer; }
body.mmode .yn-remember { font-size: 12.5px; }

/* 🔴 17B73 スマホ情報メニューの隠した入口（霧の大海洋の公開前など） */
.m-menu-grid17azk button[hidden]{display:none!important}
/* 🔴 17B73 スマホのコマンド画面: 「予約済み」見出しの右の表示件数（float）が下の予約一覧に食い込み、
   一覧が幅143pxに押しつぶされていた（「次の一手」が細長く折り返す）。一覧は見出しの float の下から始める。 */
ol.queue#queue{clear:both}
/* 🔴 17B75 大海洋の派遣・帰還欄: 2列だと選択肢（「第1艦隊・対象2（水2 潜0 空0）」「ゲートA（出口周囲まで最大6マス）」）が
   途中で切れていた。欄の幅が足りないとき（おおむね420px未満）は1列に並べる。 */
.gs17aii-send-inline,.gs17aii-return{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gs17aii-send-inline select,.gs17aii-return select{text-overflow:ellipsis}

/* 🔴 17B76 スマホのはこったー: 検索・投稿欄は折りたたみ、タイムラインを画面いっぱいに（PCは変えない） */
.ht-mtoggle17b76{display:none}
body.mmode .ht-mtoggle17b76{display:flex;gap:8px;margin:0 0 8px}
body.mmode .ht-mtoggle17b76 button{flex:1 1 0;min-height:40px}
body.mmode .hakotter.ht-compact17b76 .dstrip,
body.mmode .hakotter.ht-compact17b76 .ht-scope-label,
body.mmode .hakotter.ht-compact17b76:not(.ht-search-open17b76) .ht-searchrow,
body.mmode .hakotter.ht-compact17b76:not(.ht-search-open17b76) #hakotterTrends,
body.mmode .hakotter.ht-compact17b76:not(.ht-compose-open17b76) .hakotter-compose,
body.mmode .hakotter.ht-compact17b76:not(.ht-compose-open17b76) #chatExprPop{display:none!important}
body.mmode .hakotter .chatlog{height:max(300px,calc(100vh - 380px));height:max(300px,calc(100dvh - 380px))}
/* 🔴 17B76 友だち招待の実績: スマホでも3列1行（数字を大きく、ラベルは下に小さく） */
@media(max-width:620px){.referral-count17aqb{grid-template-columns:repeat(3,minmax(0,1fr))}}
.referral-count17aqb span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 4px}
.referral-count17aqb span b{font-size:15px;color:#eaf6ff;font-variant-numeric:tabular-nums}
/* 🔴 17B76 招待リンクの登録画面の帯 */
.referral-landing17b76{display:grid;gap:4px;margin:0 0 10px;padding:10px 12px;border:1px solid #d9a441;border-radius:10px;background:linear-gradient(180deg,#3a2c10,#2a2110);color:#f4e6c4;font-size:12.5px;line-height:1.6}
.referral-landing17b76[hidden]{display:none}
.referral-landing17b76 b{color:#ffd98a;font-size:14px}

/* 🔴 17B79 PCの大海洋・霧の大海洋を小窓で（本海域の地図を見ながら使う。移動・大きさ変更・位置を覚える）。
   小窓は本体のダイアログ（.dm-ov 250・確認 330・トースト 350）より奥。クリックした側を手前（238）にする。
   枠の外は素通し（本海域をそのまま操作できる）。スマホ・狭い画面は従来の全画面のまま（JSが切り替える）。 */
body.gate-sea-float17b79 #mapstage{visibility:visible}
.gs17aii-modal.gs17b79-float{z-index:58;padding:0;background:transparent;pointer-events:none}
.gs17aii-modal.gs17b79-float.gs17b79-front{z-index:238}
.gs17b79-float .gs17aii-box{position:absolute;pointer-events:auto;resize:both;min-width:600px;min-height:400px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.6),0 0 0 1px #20233f}
.gs17b79-float.gs17b79-front .gs17aii-box{box-shadow:0 18px 60px rgba(0,0,0,.72),0 0 0 2px #7d6fd6}
.gs17b79-float .gs17aii-box>header{cursor:move;user-select:none;-webkit-user-select:none;padding:8px 12px}
.gs17b79-float .gs17aii-box>header b{font-size:15px}
.gs17b79-float .gs17aii-box>header button{cursor:pointer}
.gs17b79-float .gs17aii-main{grid-template-columns:minmax(0,1fr) 240px}
.gs17b79-float .gs17aii-stage{padding:10px}
.gs17b79-float-toggle{margin-left:auto;flex:0 0 auto;padding:5px 9px;border:1px solid #4a5b8a;border-radius:8px;background:#18264a;color:#dfe7ff;font-size:12px;white-space:nowrap}
.gs17b79-float-toggle:hover{background:#22346a}
.gs17b79-float-toggle[hidden]{display:none}
.gs17b79-float-toggle:not([hidden])+.dm-x{margin-left:6px!important}
/* 小窓では補助操作と凡例を「海図の設定」の中へ（スマホと同じ詰め方） */
.gs17b79-float #gs17azkSettings{display:inline-flex;align-items:center}
.gs17b79-float .gs17aii-box:not(.gs-settings-open17azk) .gs17aii-tools [data-pan],
.gs17b79-float .gs17aii-box:not(.gs-settings-open17azk) #gs17aszRoutes,
.gs17b79-float .gs17aii-box:not(.gs-settings-open17azk) #gs17awfOwnerLabels,
.gs17b79-float .gs17aii-box:not(.gs-settings-open17azk) #gs17aiiReload,
.gs17b79-float .gs17aii-box:not(.gs-settings-open17azk) .gs17aii-legend{display:none}
.gs17b79-float .gs17aii-tools{padding:6px 8px}
.gs17b79-float .gs17aii-tools #gs17aiiCenter{order:-3}
.gs17b79-float .gs17aii-tools .gs17aod-zoom{order:-2}
.gs17b79-float .gs17aii-tools #gs17azkSettings{order:-1;margin-left:auto}
/* 🔴 17B80 手前の窓だけ動かす: 小窓が手前なら本海域の動きを止め、奥なら小窓の動きを止める（地図そのものは見せたまま） */
body.gate-sea-front17b80 #mapstage *,body.gate-sea-front17b80 #mapstage *::before,body.gate-sea-front17b80 #mapstage *::after{animation-play-state:paused!important}
.gs17aii-modal.gs17b79-float:not(.gs17b79-front) *,.gs17aii-modal.gs17b79-float:not(.gs17b79-front) *::before,.gs17aii-modal.gs17b79-float:not(.gs17b79-front) *::after{animation-play-state:paused!important}
/* 🔴 17B79 ここまで */
/* 🔴 17B99: 新着のお知らせは見出しだけ・押すと本文 */
.upd-ov .upd-fold-17b99>summary{cursor:pointer;list-style:none;padding:2px 0;line-height:1.6}
.upd-ov .upd-fold-17b99>summary::-webkit-details-marker{display:none}
.upd-ov .upd-fold-17b99>summary::after{content:' ▼';color:#7fd1ff;font-size:11px}
.upd-ov .upd-fold-17b99[open]>summary::after{content:' ▲'}
.upd-ov .upd-fold-body-17b99{margin-top:6px;color:#c9d8e6;font-size:13.5px;line-height:1.75}
/* 🔴 17B99: 画面の「詳しく」（押したときだけ説明を出す） */
.ui-more-17b99{display:block;margin-top:3px}
.ui-more-17b99>summary{cursor:pointer;color:#7fd1ff;font-size:11.5px;list-style:none;display:inline-block}
.ui-more-17b99>summary::-webkit-details-marker{display:none}
.ui-more-17b99>summary::after{content:' ▼'}
.ui-more-17b99[open]>summary::after{content:' ▲'}
.ui-more-17b99[open]>summary{margin-bottom:3px}
/* 🔴 17B99: 画面上部の整理（もりたつ 2026-09-24「上部がごちゃごちゃしすぎ」）。 */
/* 島の情報 ▾（島主・戦績・ひとこと・観光者通信） */
.islinfo-17b99 > .popbtn { cursor: pointer; border: 1px solid #2c4b6c; background: #14273e; color: #bcd9f7; font-family: inherit; }
.islinfo-17b99 > .popbtn:hover { background: #1b3454; border-color: #4ea1ff; }
.islinfo-17b99 > .islinfopop-17b99 { min-width: 260px; max-width: min(420px, 92vw); }
.popwrap.open > .islinfopop-17b99 { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; }
.islinfopop-17b99 .cm { margin-left: 0 !important; white-space: normal; }
/* 👤 名前 ▾（ログアウト） */
.acct-17b99 > .popbtn { cursor: pointer; font-family: inherit; border: 1px solid var(--border-2); }
.acct-17b99 > .acctpop-17b99 { left: auto; right: 0; min-width: 200px; }
/* スマホは従来どおり全部並べる（トリガーを隠して中身を行へ流す） */
body.mmode .islinfo-17b99 > .popbtn, body.mmode .acct-17b99 > .popbtn { display: none; }
body.mmode .islinfo-17b99, body.mmode .acct-17b99 { display: contents; }
/* 次ターン予想は資金・食料のカードの中に */
.statusbar .sc .nx17b99 { font-size: 11px; color: #9fc0dd; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.statusbar .sc .nx17b99.neg { color: #ff9a9a; }
.statusbar .sc .nx17b99.pos { color: #9ee6a8; }
/* 産業（農業・ゴム農園・工場・採掘）を1枚に */
.statusbar .sc-industry17b99 { box-shadow: inset 2px 0 0 #b58a4a, 0 1px 2px rgba(0,0,0,.3); }
.statusbar .sc-industry17b99 .industry-grid17b99 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 11px;
  margin-top: 4px; color: #b9cde2; font-size: 10.5px; line-height: 1.35; }
.statusbar .sc-industry17b99 .industry-grid17b99 span { white-space: nowrap; display: flex; gap: 4px; align-items: center; }
.statusbar .sc-industry17b99 .industry-grid17b99 b { margin-left: auto; color: #f5fbff; font-size: 12px; font-variant-numeric: tabular-nums; }
.statusbar .industry-details17bfl { display:block; margin-top:5px; padding:4px 8px; border:1px solid #6d654e; border-radius:6px; background:#203044; color:#ffe2a3; font:inherit; cursor:pointer; }
.industry-details17bfl:focus-visible { outline:2px solid #ffe2a3; outline-offset:2px; }
.industry-box17bfl { width:min(620px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:20px; background:#122534; border:1px solid #35546a; border-radius:14px; color:#e7f2fb; box-sizing:border-box; }
.industry-box17bfl header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.industry-box17bfl header h2 { margin:0; font-size:18px; }
.industry-box17bfl p { line-height:1.6; }
.industry-table17bfl { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.industry-table17bfl caption { text-align:left; margin:12px 0; color:#bdd4e6; }
.industry-table17bfl th,.industry-table17bfl td { padding:9px 5px; border-bottom:1px solid #3d5366; overflow-wrap:anywhere; text-align:right; }
.industry-table17bfl th:first-child { text-align:left; }
.industry-table17bfl .industry-idle17bfl { color:#ffe2a3; }
#cellmenu .cm-repair-note17bfl { display:grid; gap:4px; padding:10px 12px; color:#d4e5f1; background:#1e3142; border-bottom:1px solid #3a5369; font-size:12px; line-height:1.55; white-space:normal; }
#cellmenu .cm-repair-note17bfl b { color:#ffe2a3; }
body.mmode .industry-details17bfl { min-height:44px; }
@media(max-width:620px) { .industry-details17bfl { min-height:44px; } .industry-box17bfl { padding:14px; } .industry-table17bfl { font-size:12px; } .industry-box17bfl header button { min-height:44px; } }

/* 🔴 17B99: 産業カードは中身が読める幅に。マスの内訳は閉じている間は小さなボタン幅にする。 */
.statustop .statusbar .sc-industry17b99 { flex: 1.6 1 196px; min-width: 196px; }
body.mmode .statusbar .sc-industry17b99 { min-width: min(100%, 230px); }
/* 🔴 17B99: 工廠資源はアイコンと数字の1行 */
.statusbar .sc-materials .materials-line17b99 { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; color: #b9cde2; font-size: 12px; }
.statusbar .sc-materials .materials-line17b99 span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.statusbar .sc-materials .materials-line17b99 b { color: #f5fbff; font-size: 13px; font-variant-numeric: tabular-nums; }
/* 🔴 17BA0: 取り消せない操作の確認は「はい」を赤く */
#ynModal .yn-yes.yn-danger { background: #b83a3a; border-color: #e06a6a; color: #fff; }
#ynModal .yn-yes.yn-danger:hover { background: #c94848; }
/* 🔴 17BA0: 予約できたマスが一瞬光る */
.resv-pulse17ba0 { position: absolute; border-radius: 50%; border: 4px solid #ffd84a; box-shadow: 0 0 0 2px rgba(10,20,35,.75), 0 0 14px rgba(255,216,74,.9);
  pointer-events: none; z-index: 6; animation: resvPulse17ba0 .8s ease-out forwards; }
@keyframes resvPulse17ba0 { from { transform: scale(.45); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .resv-pulse17ba0 { animation-duration: .01s; } }
/* 🔴 17BA0: ターン更新の結果まとめ（邪魔にならない小さなカード） */
.turn-summary17ba0 { position: fixed; right: 16px; bottom: 16px; z-index: 240; width: min(340px, calc(100vw - 32px));
  background: var(--panel-3, #13263d); border: 1px solid var(--border-strong, #3a5f86); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45); padding: 10px 12px 12px; color: #e6f0fb; animation: tsIn17ba0 .25s ease-out; }
@keyframes tsIn17ba0 { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.turn-summary17ba0 .ts-hd { display: flex; align-items: center; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.turn-summary17ba0 .ts-x { margin-left: auto; background: none; border: 0; color: #9fc0dd; font-size: 15px; cursor: pointer; padding: 2px 6px; }
.turn-summary17ba0 .ts-nums, .turn-summary17ba0 .ts-cats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.turn-summary17ba0 .ts-cats { color: #c7d6e6; font-size: 12.5px; }
.turn-summary17ba0 .pos { color: #9ee6a8; } .turn-summary17ba0 .neg { color: #ff9a9a; }
.turn-summary17ba0 .ts-log { margin-top: 3px; width: 100%; }
body.mmode .turn-summary17ba0 { right: 8px; left: 8px; width: auto; bottom: calc(var(--mnavh, 64px) + var(--mresh, 44px) + 10px); }
@media (prefers-reduced-motion: reduce) { .turn-summary17ba0 { animation: none; } }
/* 🔴 17BA0: スマホ下の資源バーに次ターンの増減 */
.mresbar .mres-nx { margin-left: 3px; font-size: 11px; color: #9fc0dd; font-variant-numeric: tabular-nums; }
.mresbar .mres-nx.neg { color: #ff9a9a; } .mresbar .mres-nx.pos { color: #9ee6a8; }

/* 🔴 17BA0: スマホで押しにくかった小さなボタンを押しやすく（44px前後に） */
body.mmode .queue .qmv, body.mmode .queue .qtk, body.mmode .queue .x { min-width: 34px; }
body.mmode .upd-ov .upd-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
body.mmode #btnChatReload { min-height: 36px; padding: 0 12px; }
body.mmode h2 .dchip { min-height: 32px; }
/* 🔴 17BA0: 工廠資源とマスの内訳を小さく畳むのは、PCの広い画面だけにする。
   こいしさんの報告（2026-09-24）: スマホの縦持ちで、細く縮んだ「工廠資源」に「マスの内訳」が重なっていた（17B99の整理で起きた）。
   スマホ・狭い画面では、縮ませずに決まった幅を取る。 */
@media (min-width: 901px) {
  body:not(.mmode) .statustop .statusbar .sc-materials { flex: 0 1 auto; min-width: 0; }
  body:not(.mmode) .statustop .statusbar .sc-cells17azn:not([open]) { flex: 0 1 auto; min-width: 0; }
}
/* スマホの資源欄は横スクロール（折り返さない）ので、縮ませず幅を固定する */
body.mmode .statusbar .sc-materials, body.mmode .statusbar .sc-cells17azn { flex: 0 0 auto; min-width: 250px; }
body.mmode .statusbar .sc-industry17b99 { flex: 0 0 auto; min-width: 210px; }
@media (max-width: 900px) {
  .statusbar .sc-materials, .statusbar .sc-cells17azn { flex: 0 0 auto; min-width: 250px; }
  .statusbar .sc-industry17b99 { flex: 0 0 auto; min-width: 210px; }
}

/* 🔴 17BA1 スマホの操作性（もりたつ「スマホの操作性や操作感をさらに向上できる？」→「順に改善して欲しい」） */
/* ④ Esc の案内（キーボード）はスマホでは出さない */
body.mmode #cellmenu .it[data-act="close"] > .c, body.mmode #cellmenu .it[data-mvpick="cancel"] > .c, body.mmode #cellmenu .it[data-tkpick="cancel"] > .c { display: none; }
/* ⑤ 案内（トースト）は下のタブ・資源バーに被せず、その上に。確認の画面やマスのメニューが出ている間は画面の上へ */
body.mmode .toast { bottom: calc(var(--mnavh) + var(--mresh) + 10px); }
body.mmode:has(#ynModal) .toast, body.mmode:has(#qtyModal) .toast, body.mmode:has(#cellmenu[style*="block"]) .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 12px); }
/* ⑥ 艦・マスのメニュー: 「▶」（次の画面へ）や空の欄を別の行にしない（1行ずつ縦に長くなって地図が隠れていた） */
@media (max-width: 760px) {
  #cellmenu .it > .c:empty { display: none; }
  #cellmenu .it:is([data-act="move"], [data-act="dispatch"], [data-act="menu"], [data-act="warp"], [data-act="close"], [data-sub], [data-move], [data-pick]) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  #cellmenu .it:is([data-act="move"], [data-act="dispatch"], [data-act="menu"], [data-act="warp"], [data-act="close"], [data-sub], [data-move], [data-pick]) > .c { width: auto; }
}
/* ⑨ 予約一覧: 1件を「選択・⠿・T番号・名前と座標・操作」の1段に（従来は3段で1件150px、3件ほどしか見えなかった） */
body.mmode .queue li:not(.qempty):not(.qsuggest) { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  column-gap: 7px; row-gap: 4px; align-items: center; padding: 8px 10px; }
body.mmode .queue li:not(.qempty):not(.qsuggest) .qsel { width: 20px; height: 20px; min-height: 0; margin: 0; }
body.mmode .queue li:not(.qempty):not(.qsuggest) .qbody { min-width: 0; }
body.mmode .queue li:not(.qempty):not(.qsuggest) .qops { flex: none; gap: 4px; flex-wrap: nowrap; }
body.mmode .queue .qreorder .qrl { display: none; }
body.mmode .queue .qreorder summary { min-width: 34px; min-height: 34px; justify-content: center; }
/* ⑩ 左下の「更新まで」を読める大きさに */
body.mmode .mnav-quick17aoh { font-size: 10px; }
/* ① 艦のカード（スマホ）: 上の段に「絵・名前・状態・HP｜ボタン」、下の段に性能を横並び。
   従来は性能が縦1列に並んでカードが240pxになり、地図がそのぶん狭くなっていた */
body.mmode #fleetCard.show { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
  align-items: center; padding: 8px 10px; }
body.mmode #fleetCard .info { display: contents; }
body.mmode #fleetCard .pic { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; }
body.mmode #fleetCard .nm { grid-column: 2; grid-row: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
body.mmode #fleetCard .st { grid-column: 2; grid-row: 2; min-width: 0; font-size: 12.5px; }
body.mmode #fleetCard .hpbar { grid-column: 2; grid-row: 3; margin-top: 3px; }
body.mmode #fleetCard .act { grid-column: 3; grid-row: 1 / span 3; }
body.mmode #fleetCard .act button { min-height: 40px; padding: 6px 12px; }
body.mmode #fleetCard .specs { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; gap: 3px 12px; font-size: 12px; }
body.mmode #fleetCard .tkrow { grid-column: 1 / -1; grid-row: 5; }
/* 🔴 17BA1-2 実際に触って見つけたこと */
/* クエスト達成の知らせ: スマホでは資源バーの裏に半分隠れ、予約の案内とも重なっていた → 資源バーと案内の上に積む */
body.mmode .quest-toast { bottom: calc(var(--mnavh) + var(--mresh) + 76px + var(--qi, 0) * 92px) !important; }
/* 移動の案内（#moveBar）が出ている間は、上の帯（同じ内容）を重ねない */
body.mmode:has(#moveBar[style*="flex"]) #selInfoMap { display: none !important; }
/* 予約の並べ替え（↕）: 開くと行が崩れて「×」が見えなくなっていた → ボタンは行の上に横並びで重ねる */
body.mmode .queue li:not(.qempty):not(.qsuggest) { position: relative; }
body.mmode .queue .qreorder, body.mmode .queue .qreorder[open] { position: static; flex: none; }
body.mmode .queue .qreorder[open] summary { margin-left: 0; background: #dbeafe; border-color: #3b82f6; }
body.mmode .queue .qreorder-controls { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); margin-top: 0;
  display: flex; gap: 4px; padding: 4px; z-index: 4; background: #f4f8ff; border: 1px solid #9db8d8; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28); }
/* 🔴 17BAC スマホで地図を広く（こいし 2026-09-25「マップが殆ど見えないため移動指示が出しにくい」）。
   390×844 で他島BFの自艦を選ぶと、観戦中の帯152px・移動の案内118px・地図189px・艦のカード233px だった。
   地図の上下の3つを詰めて、そのぶんを地図へ回す（地図は残り全高を取る＝ここを詰めれば地図が伸びる）。 */
.mb-short17bac { display: none; }
/* 観戦中の帯: 1行。島主と補足は畳み、文は省略記号で切る。ボタンは「🏝 自島へ戻る」で縮めない */
body.mmode #modeBanner.other { flex-wrap: nowrap; gap: 8px; margin: 4px 0 0; padding: 5px 6px 5px 12px;
  border-radius: 10px; font-size: 13.5px; }
body.mmode #modeBanner.other > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mmode #modeBanner .mb-sub17bac, body.mmode #modeBanner .mb-long17bac { display: none; }
body.mmode #modeBanner .mb-short17bac { display: inline; }
body.mmode #modeBanner.other button { flex: 0 0 auto; margin-left: 0; min-height: 38px; padding: 6px 12px; font-size: 13.5px; }
/* 移動の案内: 文とボタンを1段に。文は17BA1のとおり2行ぶんの高さ固定（1回目のタップで地図がずれない） */
body.mmode #moveBar { flex-wrap: nowrap; gap: 6px; margin: 0 0 6px; padding: 6px 6px 6px 12px; }
body.mmode #moveBar #moveBarText { flex: 1 1 auto; font-size: 12.5px; margin-bottom: 0; }
body.mmode #moveBar button, body.mmode #moveBar #moveConfirmBtn, body.mmode #moveBar #moveCancelBtn { flex: 0 0 auto; min-height: 44px;
  padding: 6px 11px; font-size: 14px; white-space: nowrap; }
/* 艦のカード: 性能とチケットは折り返さず1行の横スクロール（縦に伸ばさない） */
body.mmode #fleetCard.show { margin-top: 6px; padding: 7px 10px; }
body.mmode #fleetCard .specs, body.mmode #fleetCard .tkrow { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 2px; }
body.mmode #fleetCard .specs > *, body.mmode #fleetCard .tkrow > * { flex: 0 0 auto; white-space: nowrap; }
body.mmode #fleetCard .tkrow { margin-top: 5px; }
body.mmode #fleetCard .tkrow button { min-height: 36px; padding: 4px 10px; }
body.mmode #fcTickets .tkactive { flex: 0 0 min(85%, 320px); white-space: normal; }
/* 島名パンくず・移動の案内は地図に押しつぶされない（パンくずが4pxに潰れて途中で切れていた） */
body.mmode #mapPanel .mapcrumb { flex: 0 0 auto; }
body.mmode #mapPanel > #moveBar { flex: 0 0 auto; }
/* 観戦中は帯が「観戦中・自島へ戻る」を出しているので、同じ内容のパンくずは畳んで地図へ回す */
body.mmode:has(#modeBanner.other:not([style*="none"])) #mapPanel .mapcrumb { display: none; }
/* 🔴 17BAD 総点検の第1弾（重さ・操作性・わかりやすさ） */
/* A: 告知帯は大きな画面より下（panels.js z-index:240）。PCでは右上の⚙（固定）と✕が重ならないよう内側へ */
body:not(.mmode) #shuffleNoticeBanner { padding-right: 60px !important; }
/* B5: スマホでは艦の上下の揺れ・工場の煙の常時アニメを止める（木の揺れと同じ扱い） */
body.mmode .cell.fleet img.til { animation: none; }
body.mmode .cell.t6 .smoke, body.mmode .cell.t6 .smoke::before, body.mmode .cell.t6 .smoke::after { animation: none; opacity: .5; }
/* C1: スマホで艦のメニューが開いている間は「移動先をタップ」の案内を隠す（高さは保つ＝地図がずれない） */
body.mmode:has(#cellmenu:not([style*="none"]) [data-act="move"]) #moveBar { visibility: hidden; }
/* C6: 艦カードの横スクロールに続きがあるときだけ右端をぼかす（mobileui.js syncScrollFade17bad） */
body.mmode #fleetCard .more17bad { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
/* D1: 次のターンで資金・食料が尽きる見込み */
.nx17b99.short17bad, .mres-nx.short17bad { color: #ffb4a8; font-weight: 600; }
/* 🔴 17BC8: 大海洋の一覧で所属艦隊を変える */
.gs17bc8-assign{margin-left:auto;padding:4px 8px;border:1px solid #4c7790;border-radius:7px;background:#15344a;color:#dff1ff;font-size:11px}
.gs17bc8-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0;padding:7px;border:1px solid rgba(255,215,106,.42);border-radius:8px;background:rgba(255,215,106,.08);font-size:11px;color:#cfe0ee}
.gs17bc8-tools>span{flex:1 1 100%;color:#a9c4df}
.gs17bc8-tools select,.gs17bc8-pick select{padding:3px 4px;border:1px solid #496986;border-radius:6px;background:#10263b;color:#edf6ff}
.gs17bc8-tools button{padding:4px 8px;border:1px solid #4c7790;border-radius:7px;background:#15344a;color:#dff1ff}
.gs17bc8-tools .gs17bc8-save:not(:disabled){border-color:#ffd76a;color:#ffe49a}
.gs17bc8-row{align-items:center}
.gs17bc8-pick{display:flex;flex:0 0 auto;align-items:center;gap:4px;margin-right:4px}
.gs17bc8-pick input{width:18px;height:18px;accent-color:#ffd76a}
/* 🔴 17BC8: 他島・BFの現地一覧で自軍の所属艦隊を変える */
.roster-fleet17bc8{display:block;margin-top:3px;padding:2px 4px;border:1px solid #496986;border-radius:6px;background:#10263b;color:#edf6ff;font-size:11px}
small.roster-fleet17bc8{border:0;background:none;padding:0;color:#9fb7ce}
.roster-fleet-save17bc8{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:6px 0;padding:7px 9px;border:1px solid rgba(255,215,106,.42);border-radius:8px;background:rgba(255,215,106,.08);color:#ffe49a;font-size:12px}
/* 🔴 17BC9: フラッグの称号（島名の横） */
.flag-title17bc9{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;border:1px solid rgba(255,196,94,.45);background:rgba(255,196,94,.12);color:#ffd98a;font-size:.8em;font-weight:700;line-height:1.5;vertical-align:baseline;white-space:nowrap}
/* 🔴 17BC9: 艦を選んだメニューで、チケット帯と戦術チケットを下にたたむ */
#cellmenu .cm-tkfold17bc9{margin:4px 6px 6px;border:1px solid rgba(255,215,106,.32);border-radius:8px;background:rgba(255,215,106,.05)}
#cellmenu .cm-tkfold17bc9>summary{cursor:pointer;padding:7px 10px;color:#ffe49a;font-size:12.5px;font-weight:600;list-style:none}
#cellmenu .cm-tkfold17bc9>summary::-webkit-details-marker{display:none}
#cellmenu .cm-tkfold17bc9>summary::after{content:' ▼';font-size:10px}
#cellmenu .cm-tkfold17bc9[open]>summary::after{content:' ▲'}
/* 🔴 17BC9: 自分の艦を選んだメニューは、スマホでは画面の約半分まで（地図と移動先を広く残す） */
body.mmode #cellmenu.ship17bc9 { max-height: min(46dvh, calc(100dvh - var(--mnavh) - var(--mresh) - 24px)) !important; }

/* 🔴 17BCA: 海域シャッフル告知カード（notice-pipeline presentation:"shuffle"）。ゲーム styles.css と page.css に同じものを置く。 */
.upd-ov .upd-list>li:has(>.shf17bca){list-style:none;margin-left:-20px}
.shf17bca{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;margin:10px 0;border:1px solid #3f86bd;border-radius:14px;background:linear-gradient(180deg,#0f3257 0,#0a1f36 46%,#07131f 100%);color:#e6f1fa;text-align:left;box-shadow:0 0 0 3px #4fb4ff17,0 16px 40px #0009;font-size:14px;line-height:1.65}
.shf17bca-hero{position:relative;z-index:0;overflow:hidden;contain:paint;padding:18px 16px 62px;text-align:center;background:radial-gradient(ellipse at 50% 0,#3aa6ff55 0,transparent 62%)}
.shf17bca-hero::before,.shf17bca-hero::after{content:"";position:absolute;z-index:-1;left:-48px;right:-48px;bottom:0;height:40px;background:radial-gradient(circle at 24px -6px,transparent 22px,#1b6aa8 23px) 0 0/48px 40px repeat-x;opacity:.45;animation:shf17bca-wave 7s linear infinite}
.shf17bca-hero::after{bottom:-8px;background:radial-gradient(circle at 24px -6px,transparent 22px,#0a1f36 23px) 24px 0/48px 40px repeat-x;opacity:1;animation-duration:4.6s;animation-direction:reverse}
.shf17bca-badge{display:inline-block;padding:3px 14px;border-radius:999px;background:linear-gradient(90deg,#ff6a3d,#ffc646);color:#2a1400;font-weight:700;font-size:12.5px;letter-spacing:.1em;position:relative}.shf17bca-badge::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid #ff8a4a;animation:shf17bca-pulse 1.8s ease-out infinite}
.shf17bca-title{display:block;margin:10px auto 0;max-width:22em;font-size:clamp(18px,4.4vw,24px);font-weight:700;line-height:1.45;letter-spacing:.03em;color:#fff;text-shadow:0 2px 14px #2d9bff99;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.shf17bca-tiles{display:flex;justify-content:center;gap:10px;margin:22px 0 0}
.shf17bca-tiles i{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;font:700 19px/1 system-ui,sans-serif;font-style:normal;color:#07233d;background:linear-gradient(160deg,#d8f0ff,#62b5ee);box-shadow:0 3px 0 #2a6b99,0 0 16px #58b4ff66;animation:shf17bca-a 3.6s ease-in-out infinite}
.shf17bca-tiles i:nth-child(2){background:linear-gradient(160deg,#fff4c9,#f2c14e);box-shadow:0 3px 0 #a5781c,0 0 16px #ffd35a66;animation-name:shf17bca-b}
.shf17bca-tiles i:nth-child(3){background:linear-gradient(160deg,#dcffe9,#5fd39a);box-shadow:0 3px 0 #2c8a5c,0 0 16px #5fe3a066;animation-name:shf17bca-c}
@keyframes shf17bca-a{0%,22%{transform:none}38%{transform:translate(48px,-30px) rotate(12deg)}52%,74%{transform:translateX(96px)}88%{transform:translate(48px,14px) rotate(-6deg)}100%{transform:none}}
@keyframes shf17bca-b{0%,30%{transform:none}44%{transform:translateY(-12px) scale(1.14)}58%,80%{transform:none}90%{transform:translateY(-6px)}100%{transform:none}}
@keyframes shf17bca-c{0%,22%{transform:none}38%{transform:translate(-48px,26px) rotate(-12deg)}52%,74%{transform:translateX(-96px)}88%{transform:translate(-48px,-14px) rotate(6deg)}100%{transform:none}}
@keyframes shf17bca-wave{to{transform:translateX(48px)}}
@keyframes shf17bca-pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.25,1.7);opacity:0}}
.shf17bca-sec{padding:12px 16px 14px;border-top:1px solid #ffffff12}
.shf17bca h4{margin:0 0 8px;font-size:15px;font-weight:700;color:#9fdcff;letter-spacing:.04em}
.shf17bca ol,.shf17bca ul{margin:0!important;padding:0!important;list-style:none}
.shf17bca-time{position:relative}
.shf17bca-time::before{content:"";position:absolute;left:74px;top:12px;bottom:12px;width:2px;background:linear-gradient(#4fb4ff,#ffc646,#5fe3a0);border-radius:2px}
.shf17bca-time li{position:relative;display:grid;grid-template-columns:62px 1fr;gap:26px;align-items:start;padding:5px 0}
.shf17bca-time li::after{content:"";position:absolute;left:68px;top:11px;width:10px;height:10px;border-radius:50%;background:#0a1f36;border:2px solid #7cc8ff}
.shf17bca-time b{font:700 17px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cfeaff;text-align:right;white-space:nowrap}.shf17bca-time small{display:block;font:600 11px/1.2 system-ui,sans-serif;color:#9fbcd4}
.shf17bca-time li.is-hot{margin:2px -8px;padding:7px 8px;border-radius:10px;background:linear-gradient(90deg,#ff8a4a2e,#ffc64614 70%,transparent)}
.shf17bca-time li.is-hot b{color:#ffd66b;font-size:19px;text-shadow:0 0 12px #ffb34799}
.shf17bca-time li.is-hot::after{left:76px;top:15px;background:#ffc646;border-color:#fff3c4;box-shadow:0 0 10px #ffc646}
.shf17bca-time li.is-hot span{font-weight:700;color:#fff}
.shf17bca-list li{position:relative;padding:2px 0 2px 16px;font-size:13.5px;color:#cfe0ee}
.shf17bca-list li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;transform:rotate(45deg);background:#5fb8f5}
.shf17bca-list li.is-warn{margin:8px 0 4px;padding:8px 12px;border:1px solid #ffb347;border-radius:10px;background:#ff9d2e1f;color:#ffe2a8;font-weight:700}
.shf17bca-list li.is-warn::before{display:none}
.shf17bca-prize li{display:grid;grid-template-columns:minmax(92px,auto) 1fr;gap:8px 12px;align-items:start;padding:8px 10px;margin:0 0 6px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff08}
.shf17bca-prize b{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#bfe3ff;white-space:nowrap}
.shf17bca-prize span{display:flex;flex-wrap:wrap;gap:5px}
.shf17bca-prize em{font-style:normal;font-size:12.5px;padding:2px 8px;border-radius:999px;background:#2b5f8a55;border:1px solid #4d8fc255;color:#e5f2fb}
.shf17bca-prize em u{text-decoration:none;font-weight:700;color:#ffd66b;margin-right:4px}
.shf17bca-prize li.is-crystal{border-color:#e8c768;background:linear-gradient(100deg,#e8c7682a,#3aa6ff1f 60%,#ffffff05);box-shadow:0 0 0 3px #e8c76818,0 0 22px #3aa6ff33}
.shf17bca-prize li.is-crystal b{color:#ffe08a;font-size:14.5px}
.shf17bca-prize li.is-crystal em{font-size:13.5px;font-weight:700;background:#0f3257;border-color:#7cc8ff}.shf17bca-prize li.is-crystal em.is-gem{color:#08223a;background:linear-gradient(135deg,#e9f8ff,#7fd0ff 55%,#3a8fe0);border-color:#e9f8ff;box-shadow:0 0 12px #63c4ff99}
.shf17bca-gem{display:inline-block;width:14px;height:14px;transform:rotate(45deg);border-radius:3px;background:linear-gradient(135deg,#e9f8ff 0,#63c4ff 40%,#1d6fd6 100%);box-shadow:0 0 10px #63c4ffcc;animation:shf17bca-shine 2.4s ease-in-out infinite}
@keyframes shf17bca-shine{50%{transform:rotate(45deg) scale(1.22);opacity:.8}}
@media(max-width:420px){.shf17bca-sec{padding:12px 12px 14px}.shf17bca-prize li{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.shf17bca *,.shf17bca-hero::before,.shf17bca-hero::after{animation:none!important}}
/* 🔴 17BCR 自艦が持っているフラッグ（旗の色） */
.gs17bcr-flagbadge{position:absolute;z-index:6;right:-6%;top:-22%;height:58%;display:flex;align-items:flex-end;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(255,255,255,.45))}.gs17bcr-flagbadge svg{height:100%;width:auto;margin-left:-14%}.gs17bcr-flagbadge svg:first-child{margin-left:0}.gs17bcr-flagbadge b{align-self:flex-start;color:#fff;font-size:9px;text-shadow:0 1px 2px #000}
/* 🌫️ 17BDO: 到着クールタイムの残り回数（自艦のマスの左上・赤字） */
.gs17bdo-cool{position:absolute;z-index:6;left:-2px;top:-3px;color:#ff4a4a;font-size:9px;font-weight:700;line-height:1;letter-spacing:-.02em;pointer-events:none;text-shadow:0 0 2px #000,0 0 2px #000,0 1px 2px #000}
/* 🌫️ 17BDT: 霧の大海洋のきまり（初回だけ）と、見えない相手から撃たれたマスの ❓ */
.gs17bdt-intro{margin:0 0 8px;padding:8px 10px;border:1px solid #6d74b8;border-radius:8px;background:#1b1f3a;color:#dfe3ff;font-size:12px;line-height:1.5}
.gs17bdt-intro ul{margin:4px 0 6px;padding-left:1.2em}
.gs17bdt-intro li{margin:2px 0}
.gs17bdt-hit{position:absolute;z-index:5;display:grid;place-items:center;pointer-events:none;font-size:13px;line-height:1;text-shadow:0 0 3px #000,0 0 3px #000;opacity:.9}
/* 🔴 17BCS/17BCW 自軍とそれ以外は「枠」だけで見分ける（塗り・足元の光・札の色はつけない。明るさは控えめ）。色が分かりにくい人向けに形も変える：自軍＝二重線、友好＝一重線、それ以外＝破線 */
.gs17aii-fleet.self::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,3 97,27 97,73 50,97 3,73 3,27' fill='none' stroke='rgba(78,200,122,.88)' stroke-width='3' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3Cpolygon points='50,12 88,31 88,69 50,88 12,69 12,31' fill='none' stroke='rgba(190,235,205,.45)' stroke-width='1' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}.gs17aii-fleet.friendly::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,3 97,27 97,73 50,97 3,73 3,27' fill='none' stroke='rgba(214,180,72,.88)' stroke-width='2.6' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}.gs17aii-fleet.other::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,3 97,27 97,73 50,97 3,73 3,27' fill='none' stroke='rgba(214,72,72,.9)' stroke-width='2.6' stroke-dasharray='5 3' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gs17aii-fleet.self .gs17aog-owner,.gs17aii-fleet.friendly .gs17aog-owner,.gs17aii-fleet.other .gs17aog-owner{background:rgba(5,15,27,.9);color:#f4f8fb}
.gs17arr-cell>.gs17aii-fleet{min-width:0;min-height:0;max-height:none}/* 🔴 17BCT スマホの「押しやすいボタン」最小高さで艦影が縦に伸びていた */
/* 🔴 17BCU 注意してほしい艦だけ、ゆっくり脈打つ（自艦の近くの「それ以外」は枠の濃さだけ・霧のフラッグ持ちは旗の光。濃さと拡大だけ＝描き直しが起きず軽い。動きを減らす設定では止める） */
@keyframes gsBlink17bcu{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes gsPulse17bcu{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.3)}}
.gs17arr-cell.near17bcu>.gs17aii-fleet.other::after{animation:gsBlink17bcu 1.6s ease-in-out infinite;will-change:opacity}
.gs17bcu-pulse-cell{position:absolute;z-index:1;pointer-events:none}.gs17bcu-pulse-cell::before{content:"";position:absolute;left:-45%;right:-45%;top:-45%;bottom:-45%;border-radius:50%;background:radial-gradient(closest-side,var(--gs-flag),rgba(0,0,0,0));opacity:.45;animation:gsPulse17bcu 1.8s ease-in-out infinite;will-change:opacity,transform}
@media (prefers-reduced-motion:reduce){.gs17arr-cell.near17bcu>.gs17aii-fleet.other::after,.gs17bcu-pulse-cell::before{animation:none;opacity:.85}}

/* 🔴 17BDB はこったー通知の絞り込みタブ・外交の通知を目立たせる */
.ht-notif-tabs17bdb{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.ht-notif-tabs17bdb button{padding:4px 9px;border-radius:999px;border:1px solid #33506e;background:#10223a;color:#cfe2f5;font-size:12px;cursor:pointer}
.ht-notif-tabs17bdb button.on{background:#1f4f7d;border-color:#69a7e0;color:#fff}
.ht-notif-tabs17bdb button i{font-style:normal;margin-left:4px;padding:0 5px;border-radius:999px;background:#e0464f;color:#fff;font-size:10.5px}
.ht-user-row.ht-notif-dip17bdb{border-left:3px solid #ffb84d}
/* 🔴 17BDG: 島の放棄の予約中に出す帯（js/abandon-17bdg.js） */
.abandon-bar17bdg{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:900;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 24px);box-sizing:border-box;padding:8px 10px 8px 14px;border:1px solid #b85a4a;border-radius:10px;background:#3a1814;color:#ffd9cf;font-size:13px;line-height:1.4;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.abandon-bar17bdg[hidden]{display:none}
.abandon-bar17bdg button{flex:0 0 auto;padding:5px 12px;border:1px solid #ffd9cf;border-radius:8px;background:transparent;color:#ffd9cf;font-weight:700;cursor:pointer;min-height:0}
/* 🔴 17BDI: 通知が新人航海課程のボタンに重なるときは画面の上へ（js/api.js toastAvoidActions17bdi） */
body .toast.top17bdi,body.mmode .toast.top17bdi{top:calc(env(safe-area-inset-top,0px) + 12px);bottom:auto!important}
body .quest-toast.top17bdi,body.mmode .quest-toast.top17bdi{top:calc(env(safe-area-inset-top,0px) + 12px + var(--qi,0) * 92px);bottom:auto!important}
/* 🔴 17BDJ: 艦艇建造メニューの維持（資金・食料）と、いまの食料の収支 */
#cellmenu .it .cm-upkeep17bdj{display:block;margin-top:2px;font-size:11.5px;color:#9fb6c9;font-weight:400}
#cellmenu .it.cm-food17bdj{opacity:1;cursor:default}
#cellmenu .it.cm-food17bdj>span:first-child{color:#cfe3f3;font-size:12.5px;white-space:normal}
#cellmenu .it.cm-food17bdj.minus>span:first-child{color:#ffcf9a}
#cellmenu .it:has(.cm-outlook17bek){flex-wrap:wrap}
#cellmenu .cm-outlook17bek{font-size:11px;padding:5px 8px;margin-top:4px;min-height:32px}
#cellmenu .cm-complete17bek{flex-basis:100%;white-space:normal;line-height:1.6}
.rank-help17bek{font-size:12px;line-height:1.7;margin:10px 0}
.rescue17bek{flex-wrap:wrap;gap:8px}.rescue17bek small{flex-basis:100%;font-size:12px;line-height:1.7}.rescue17bek button{min-height:36px}
/* 🔴 17BDL: 👁 観光表示のボタン（階層の絞り込みの段のすぐ下。絞り込みとは独立して点く） */
#btnPublicView17bdl.pv17bdl{position:absolute;left:126px;top:54px;z-index:56;height:30px;min-height:0;padding:0 10px;
  border:1px solid var(--border-strong);border-radius:9px;background:rgba(10,22,36,.86);color:#a9bed2;
  font-size:12px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#btnPublicView17bdl.pv17bdl:hover{background:#1d3a5c;color:#edf7ff}
#btnPublicView17bdl.pv17bdl.on{background:linear-gradient(180deg,#7a5a1e,#5a4114);box-shadow:inset 0 -2px #ffd36a;color:#fff;border-color:#c9a24a}
@media (max-width:760px){
  #btnPublicView17bdl.pv17bdl{left:auto;right:12px;top:108px;height:34px}
  body.mmode #btnPublicView17bdl.pv17bdl{left:12px;right:auto;top:60px}
}
/* 🔴 17BDL: 未ログイン（観光）はもともと他の人から見える表示なので、👁 観光ボタンは出さない */
body.preauth #btnPublicView17bdl,#btnPublicView17bdl[hidden]{display:none}
/* 🔴 17BDV: 適用中の戦闘チケットの取り消しボタン（次の更新の前まで） */
button.tkcancel17bdv, .cm-fleet-tickets-17atx button.tkcancel17bdv { min-height:0; margin:0 6px 6px 0; padding:4px 10px; border:1px solid #c98a3a; border-radius:8px; background:#3a2a14; color:#ffe2b0; font-size:12px; font-weight:700; text-align:center; }
/* 🔴 17BDX: 登録前画面の下部に、あそびポータルの応援バナー（控えめに） */
.asobiportal17bdx{margin:16px 0 4px;text-align:center;line-height:0}.asobiportal17bdx a{display:inline-block;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .15s}.asobiportal17bdx a:hover,.asobiportal17bdx a:focus-visible{transform:translateY(-1px)}.asobiportal17bdx img{max-width:100%;height:auto;vertical-align:top;border-radius:8px}
/* フッターの先頭に応援バナー・☰メニューの最後に小さいバナー */
.sitefoot .ap17bdx{flex-basis:100%;order:-1;line-height:0}.sitefoot .ap17bdx img{max-width:100%;height:auto;border-radius:8px}
.pop .popitem.ap-menu17bdx{justify-content:center;padding:8px 6px;line-height:0}.pop .popitem.ap-menu17bdx img{max-width:100%;height:auto;border-radius:6px}
/* 🔴 17BDX: ゲーム画面の左カラム（島の運営の上）の応援バナー */
.ap-game17bdx{margin:0;text-align:center;line-height:0}.ap-game17bdx a{display:inline-block;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.35)}.ap-game17bdx img{max-width:100%;height:auto;border-radius:8px;vertical-align:top}
body.mmode .ap-game17bdx{margin:0 0 12px}
/* 🔴 17BDY: 大海洋の派遣中の自艦一覧・艦種の内訳 */
.gs17bdy-mix{margin:4px 0 6px;padding:5px 8px;border:1px solid #2d4760;border-radius:7px;background:#0b1b2b;color:#cfe3f1;font-size:10px}.gs17bdy-mix summary{cursor:pointer;color:#9fd0f0}.gs17bdy-mix div{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px}.gs17bdy-mix b{color:#ffd76a}

/* 17BEN: 観光では地図を読む操作だけ残す。狭い画面でも切替と案内を見失わない。 */
.gs17ben-tour .gs17ail-actions,.gs17ben-tour .gs17aii-send-inline,.gs17ben-tour .gs17aii-return{display:none!important}
#gs17benTourNote{margin:4px 12px;padding:8px;border:1px solid #467484;border-radius:6px;background:#102631;color:#d7edf2;font-size:12px}
#gs17benTour[aria-pressed="true"]{background:#234b58;color:#e8f8ff}

/* 17BEO: Account recipes and explicit own-state guidance. */
.factory-notebook-17beo{padding:14px;border:1px solid var(--border);border-radius:10px;margin:14px 0;background:rgba(15,38,51,.4)}
.factory-notebook-17beo p,[data-recipe-summary] p{font-size:12px;line-height:1.7;color:var(--text-2)}
.factory-notebook-name17beo{display:flex;gap:8px;flex-wrap:wrap}.factory-notebook-name17beo input{flex:1;min-width:150px}
.factory-notebook-17beo article{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border)}
.factory-notebook-17beo article>span{flex:1;min-width:140px;overflow-wrap:anywhere}.factory-notebook-17beo small,[data-recipe-summary] small{display:block;color:var(--text-2)}
[data-recipe-summary] article{display:grid;gap:4px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}
.voyage-open17beo{align-self:center;white-space:normal;max-width:100%}.voyage-ov17beo{z-index:2200;padding:12px}
.voyage-box17beo{width:min(850px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:20px;background:#122534;border:1px solid #35546a;border-radius:14px;color:#e7f2fb;box-sizing:border-box}
.voyage-box17beo header{display:flex;justify-content:space-between;align-items:center;gap:12px}.voyage-box17beo header h2{font-size:20px;margin:0}
.voyage-box17beo nav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.voyage-box17beo nav [aria-pressed=true]{outline:2px solid #6ebde0}
.voyage-box17beo p,.voyage-box17beo li{font-size:13px;line-height:1.8}.voyage-box17beo small{display:block;font-size:11px;color:#b5c9d5}
.voyage-summary17beo{padding:8px 14px;background:#1a3549;border-radius:8px}.voyage-warning17beo{padding:10px;border:1px solid #c3a558;border-radius:8px;color:#ffe8ac}
.voyage-table17beo{overflow-x:auto}.voyage-table17beo table{width:100%;font-size:12px;border-collapse:collapse}.voyage-table17beo th,.voyage-table17beo td{text-align:left;padding:9px;border-bottom:1px solid #35546a;min-width:70px}
[data-voyage-ships] article{padding:12px 0;border-bottom:1px solid #35546a}[data-voyage-ships] h4{margin:0}[data-voyage-ships] p{margin:6px 0}
@media(max-width:640px){.voyage-box17beo{padding:14px}.voyage-box17beo nav button{flex:1 1 120px}.factory-notebook-17beo article .b2{font-size:11px}.factory-notebook-name17beo input{width:100%}}

.voyage-guide-actions17beo{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.cmd-favorites17bep { margin:8px 0; padding:10px; border:1px solid #31516a; border-radius:8px; background:#102232; }
.cmd-favorites17bep > small { display:block; margin-top:6px; line-height:1.5; }
.cmd-favorite-list17bep { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; font-size:12px; }
.cmd-favorite-list17bep > span { display:flex; max-width:100%; }
.cmd-favorite-list17bep button { min-height:36px; white-space:normal; overflow-wrap:anywhere; }
.cmd-favorite-list17bep button:first-child { border-radius:6px 0 0 6px; }
.cmd-favorite-list17bep button:last-child { min-width:36px; border-radius:0 6px 6px 0; }
.cmd-picker17bfj { max-height:85dvh; overflow:auto; }
.cmd-picker17bfj p { line-height:1.7; font-size:13px; }
.cmd-picker17bfj [data-favorite-choices] { display:grid; gap:10px; }
.cmd-picker17bfj [data-favorite-choices] button { min-height:44px; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.cmd-picker17bfj .dm-x { width:44px; height:44px; }
.cmd-favorites17bep [data-command-picker17bfj] { min-height:44px; }
.war-help17bep { margin-top:10px; font-size:12px; line-height:1.6; }
.war-help17bep summary { cursor:pointer; color:#afcee4; }
.voyage-defence17bep { margin:8px 0 0; color:#b9dbea; font-size:12px; }
/* 17BFN: 配合の移行は工廠を開いた時だけ。狭い画面でも内容と確定操作を読み取れる。 */
.factory-transfer17bfn{margin-top:14px;padding:12px;border:1px solid #45627c;border-radius:10px;min-width:0}
.factory-transfer17bfn summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.factory-transfer17bfn fieldset{min-width:0;margin:10px 0;border:1px solid #45627c}
.factory-transfer17bfn label{display:flex;gap:10px;align-items:center;min-height:44px;overflow-wrap:anywhere;margin:8px 0}
.factory-transfer17bfn label span{min-width:0}.factory-transfer17bfn small{display:block;color:#a5bcd0}
.factory-transfer17bfn label:has(textarea),.factory-transfer17bfn label:has(input[type=file]){display:block}
.factory-transfer17bfn textarea,.factory-transfer17bfn input[type=file]{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:8px}
.factory-transfer-actions17bfn{display:flex;gap:8px;flex-wrap:wrap}.factory-transfer17bfn button,.voyage-locate17bfn{min-height:44px;max-width:100%;white-space:normal}
/* 17BFR: 完成券を工廠で使う。所持品だけ・スマホでも操作の意味を表示。 */
.kai-owned17bfr summary { font-weight: 700; cursor: pointer; }
.kai-ticket-guide17bfr { padding: 0 10px; border-left: 3px solid #60a8c8; }
.kai-ticket-guide17bfr p { line-height: 1.6; }
.kai-owned-list17bfr { display: grid; gap: 8px; }
.kai-owned-row17bfr { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid #577284; border-radius: 8px; }
.kai-owned-row17bfr > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.kai-owned-row17bfr small { display: block; color: #adc5d1; }
.kai-owned-row17bfr button { min-height: 40px; white-space: normal; }
.kai-ticket-entry17bfr { margin: 8px 0; max-width: 100%; white-space: normal; }
/* 17BHH: 既存の予約欄で結果を確認。閉じている間は明細を描かない。 */
.command-results17bhh{margin-top:12px;border-top:1px solid #45627c;padding-top:6px;min-width:0}
.command-results17bhh summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:#b9dbea}
.command-results17bhh summary::before{content:'▸';margin-right:6px}.command-results17bhh[open] summary::before{content:'▾'}
body.mmode .queue li:not(.qempty):not(.qsuggest){grid-template-columns:20px 18px auto minmax(0,1fr)}
body.mmode .queue li:not(.qempty):not(.qsuggest) .qops{grid-column:1/-1;justify-content:flex-end}
body.mmode .queue .qops :is(button,.qreorder summary){min-height:34px;min-width:34px}
.result-row17bhh{padding:10px 0;border-top:1px solid #2f4e65;overflow-wrap:anywhere}
.result-row17bhh>div{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#a7c4d8;font-size:12px}
.result-row17bhh strong{display:block;margin-top:6px;font-size:13px}.result-row17bhh p{margin:6px 0 0;font-size:12px;line-height:1.6}
.connection-status17bhh{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border:1px solid #967243;border-radius:8px;color:#ffe2ae;background:#302a20;line-height:1.6;font-size:13px}
.connection-status17bhh span{flex:1;min-width:0;overflow-wrap:anywhere}.connection-status17bhh button{min-height:44px;flex:none}
body.mmode>.connection-status17bhh{position:fixed;z-index:244;left:8px;right:8px;bottom:calc(var(--mnavh) + var(--mresh) + 8px);margin:0;max-height:180px;overflow:auto}
@media(max-width:600px){.connection-status17bhh{align-items:flex-start;gap:8px;font-size:12px}.command-results17bhh summary{font-size:13px}}

/* 17BHR: 開幕予告への入口。ゲーム操作・参加処理は行わない。 */
.kasumin-opening-banner17bhr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:12px 16px;margin:0 0 12px;border:1px solid #839261;border-left:5px solid #c4f65c;border-radius:12px;background:#172b35;color:#eaf5d9;text-decoration:none;font:700 15px/1.5 system-ui;min-height:48px;box-sizing:border-box}
.kasumin-opening-banner17bhr[hidden]{display:none!important}
.kasumin-opening-banner17bhr strong{color:#f1cb6b}.kasumin-opening-banner17bhr small{font-size:12px;font-weight:500;color:#d2e3dd}.kasumin-opening-banner17bhr:focus-visible{outline:3px solid #f1cb6b;outline-offset:2px}
.asset-list17bib article{border:1px solid var(--line,#345);border-radius:10px;padding:12px;margin:12px 0}
.asset-list17bib h4{margin:0 0 6px}.asset-list17bib dl{display:grid;grid-template-columns:7em 1fr;gap:6px;margin:10px 0}
.asset-list17bib dd{margin:0;overflow-wrap:anywhere}.asset-list17bib dt{color:var(--muted,#abc)}
.asset-warning17bib{border-left:3px solid #efbd66;padding:6px 10px;background:rgba(239,189,102,.08)}