:root {
    color-scheme: dark;
    /* 本文＝日本語も欧文も読みやすいモダン・サンセリフ。数字は Inter で字面を整える。 */
    --font-ui: "Inter", "Noto Sans JP", -apple-system, "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
    /* 数値・座標など等幅で揃えたい箇所用 */
    --font-num: "Inter", "Noto Sans JP", ui-monospace, system-ui, sans-serif;
  }
  * { 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: #0b1622; color: #e8eef5; display: flex; justify-content: center; }
  /* 短いラベル系（ボタン・チップ・見出しラベル・表頭）は語の途中で折り返さない。
     日本語(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, .ticket .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: 800; letter-spacing: .01em;
       display: flex; align-items: center; gap: 9px; }
  .applogo { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
       box-shadow: 0 1px 3px rgba(0,0,0,.4); }
  /* 見出し: グラデのチップ＋左アクセントバー＋太字で目立たせる */
  h2 { font-size: 17px; font-weight: 800; margin: 0 0 12px; color: #f2f7fc;
       display: flex; align-items: center; gap: 8px; letter-spacing: .02em;
       padding: 8px 11px; border-radius: 10px;
       background: linear-gradient(90deg, rgba(74,139,255,.26), rgba(74,139,255,.03));
       border: 1px solid #305b8c; box-shadow: inset 3px 0 0 #4a8bff; }
  h2 .pill { margin-left: auto; }
  /* 情報アイコン（ホバー/タップで説明ツールチップ） */
  .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: 800; 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: 0 10px 28px rgba(0,0,0,.55); 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: 600; }
  #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; }
  /* マップ下セクション（索敵順・ランキング） */
  .belowgrid { display: flex; flex-wrap: wrap; gap: 16px; align-items: start; }
  .belowgrid > div { flex: 1 1 300px; min-width: 0; }
  @media (max-width: 720px) { .belowgrid > div { flex-basis: 100%; } }
  .sectitle { font-size: 16px; font-weight: 800; color: #eaf3fb; margin: 0 0 10px;
       display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px;
       background: linear-gradient(90deg, rgba(74,139,255,.20), rgba(74,139,255,.02));
       border: 1px solid #2c527c; box-shadow: inset 3px 0 0 #4a8bff; }
  .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.on { background: #2f6df0; color: #fff; border-color: #2f6df0; }
  /* 上部ステータス行: 左(島操作)と右(ターン操作)を分けて整理 */
  .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: 800;
       color: #dbe8f5; padding: 4px 10px 4px 9px; border-radius: 8px; white-space: nowrap;
       background: linear-gradient(90deg, rgba(74,139,255,.20), rgba(74,139,255,.02));
       border: 1px solid #2c527c; box-shadow: inset 3px 0 0 #4a8bff; }
  .statusrow .ttl .muted { font-weight: 600; 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; }
  .specgrp { padding-left: 4px; }
  /* 島の運営: アイコン付きのボタングリッド */
  .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: 700; transition: background .12s, border-color .12s; }
  .opbtn:hover { background: #1e4571; border-color: #3a6396; }
  .opbtn .ic { font-size: 17px; line-height: 1; filter: saturate(1.1); }
  .opbtn.danger { grid-column: 1 / -1; background: #3a1f1c; border-color: #7a3a30; color: #f1cbc3; }
  .opbtn.danger:hover { background: #4e2620; border-color: #9a4638; }
  /* 開発者向け設定の折りたたみ（ふだん非表示） */
  .devtools { margin-top: 10px; }
  .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; } /* ピルは点線下線を出さない（ヘルプカーソルのみ） */
  /* 世界地図: ホバー中の島の範囲を強調 */
  .cell.flat.hl { filter: brightness(1.7) saturate(1.35); box-shadow: 0 0 0 1px rgba(255,224,130,.9) inset; z-index: 4; }
  /* 世界地図: 島にホバーしたとき島名を出す小ポップアップ */
  #mapNameTip { position: fixed; z-index: 9998; display: none; pointer-events: none;
       background: #0b1a2c; color: #eaf3fb; border: 1px solid #3a6396; border-radius: 8px;
       padding: 5px 10px; font-size: 13px; font-weight: 600; white-space: nowrap;
       box-shadow: 0 8px 22px rgba(0,0,0,.5); }
  #mapNameTip .who { color: #8fb0cc; font-weight: 400; margin-left: 4px; }
  /* ランキング表: 島名＋ハンドル、自分の島を強調 */
  .ranktbl { width: 100%; font-size: 14.5px; border-collapse: collapse; }
  .ranktbl th { color: #8fb0cc; font-weight: 700; text-align: left; padding: 2px 4px; }
  .ranktbl td { padding: 3px 4px; border-top: 1px solid #1b3350; }
  .ranktbl tr.me td { color: #7fd18a; font-weight: 700; }
  .ranktbl .hn { color: #8fb0cc; font-size: 12.5px; font-weight: 400; }
  /* 全順位モーダル */
  #rankModal { position: fixed; inset: 0; z-index: 200; background: rgba(4,10,18,.6);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  #rankModal .rm-box { background: #12243a; border: 1px solid #2c527c; border-radius: 12px;
       width: min(460px, 96vw); max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
  #rankModal .rm-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #24405f; }
  #rankModal .rm-title { font-weight: 800; color: #eaf3fb; flex: 1; }
  #rankModal .rm-close { background: #2a3b53; color: #cdd9e6; border-radius: 8px; padding: 4px 10px; }
  #rankModal .rm-body { overflow: auto; padding: 8px 14px 14px; }
  /* ログイン/登録フォーム（ラベル＋入力の縦積み） */
  .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: 600; text-align: right; }
  .lf-row input { flex: 1 1 auto; min-width: 0; }
  .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; }
  @media (max-width: 560px) {
    .lf-row { flex-direction: column; align-items: stretch; gap: 3px; }
    .lf-row label { flex-basis: auto; text-align: left; }
  }
  /* 自分の島チップ（選択式ではなく現在の島名を表示） */
  .myisland { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9px;
       font-weight: 800; 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: 600; background: #12243a; border-color: #2c4a6e; }
  /* 設定モーダル */
  #settingsModal { position: fixed; inset: 0; z-index: 200; background: rgba(4,10,18,.6);
       display: flex; align-items: center; justify-content: center; padding: 20px; }
  #settingsModal .sm-box { background: #12243a; border: 1px solid #2c527c; border-radius: 12px;
       width: min(440px, 96vw); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
  #settingsModal .sm-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #24405f; }
  #settingsModal .sm-title { font-weight: 800; color: #eaf3fb; flex: 1; }
  #settingsModal .sm-close { background: #2a3b53; color: #cdd9e6; border-radius: 8px; padding: 4px 10px; }
  #settingsModal .sm-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  /* チケット一覧 */
  .ticketlist { display: flex; flex-direction: column; gap: 6px; }
  /* 幅が足りないときは名前を割らず、数量・ボタンを次の行へ折り返す */
  .ticket { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; background: #12314f;
       border: 1px solid #24466b; border-radius: 9px; padding: 7px 9px; }
  .ticket .tk-ic { font-size: 18px; width: 20px; text-align: center; flex: 0 0 auto; }
  .ticket .tk-nm { flex: 1 1 8em; min-width: 0; font-size: 13.5px; font-weight: 700; color: #dbe8f5;
       word-break: keep-all; line-height: 1.3; }
  .ticket .tk-ct { font-size: 13.5px; color: #8fb0cc; min-width: 30px; text-align: right; flex: 0 0 auto; white-space: nowrap; }
  .ticket .tk-use { padding: 5px 12px; font-size: 13.5px; flex: 0 0 auto; }
  .ticket .tk-buy { padding: 5px 9px; font-size: 15px; line-height: 1; flex: 0 0 auto; }
  .sub { color: #8aa0b4; font-size: 14px; margin-bottom: 14px; }
  .panel { background: #13243a; border: 1px solid #25405f; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .row > * { min-width: 0; }
  label { font-size: 14px; color: #8aa0b4; }
  input, select { background: #0e1b2c; border: 1px solid #2a3f5c;
          color: #e8eef5; border-radius: 8px; padding: 8px 10px; font-size: 15px; }
  input { width: 130px; }
  button { border: 0; border-radius: 9px; padding: 9px 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
  .b1 { background: #2f6df0; color: #fff; }
  .b2 { background: #e8a13a; color: #15233a; }
  .b3 { background: #2a3b53; color: #cdd9e6; }
  .b4 { background: #c0392b; color: #fff; }
  button:disabled { opacity: .45; cursor: not-allowed; }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
  .stat { background: #0e1b2c; border-radius: 8px; padding: 7px 9px; }
  .stat .k { font-size: 12.5px; color: #8aa0b4; white-space: nowrap; }
  .stat .v { font-size: 19.5px; font-weight: 700; white-space: nowrap; }
  /* 3カラム: マップ(左中央) | チャット | コマンド(右) */
  .grid2 { display: grid; grid-template-columns: minmax(0,1fr) 300px 330px; gap: 14px; align-items: start; }
  @media (max-width: 1280px) { .grid2 { grid-template-columns: minmax(0,1fr) 320px; }
    .chatcol { grid-column: 1 / -1; } }
  @media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } .chatcol { grid-column: auto; } }
  /* チャット */
  .chattabs { display: flex; gap: 4px; margin-bottom: 8px; }
  .chattabs button { flex: 1; padding: 6px 4px; border-radius: 8px; border: 1px solid #2c4a6e;
    background: #0e1b2c; color: #9fc0dd; cursor: pointer; font-size: 14.5px; }
  .chattabs button.on { background: #1d4f8c; color: #eaf3fb; border-color: #3b6ea8; font-weight: 700; }
  .chatlog { height: clamp(420px, 62vh, 720px); overflow-y: auto; background: #0a1624; border: 1px solid #1d3148;
    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: #10233a; border: 1px solid #1b334d; border-radius: 10px;
    border-top-left-radius: 3px; padding: 5px 10px 7px; }
  .chatlog .cm.me .cmbody { background: #123a2e; border-color: #1d5040; }
  .chatlog .cm .cmhead { display: flex; align-items: baseline; gap: 6px; }
  .chatlog .cm .who { color: #7fd1ff; font-weight: 700; }
  .chatlog .cm .who.me { color: #8fe0a0; }
  .chatlog .cm .who .arrow { color: #6d8aa8; font-weight: 400; }
  .chatlog .cm .tn { color: #5a7691; font-size: 11.5px; margin-left: auto; white-space: nowrap; }
  .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: #2a2410; border-color: #4a3f1a; }
  .chatempty { color: #5a7691; text-align: center; margin-top: 40px; }
  /* 同盟状況（同盟タブ上部） */
  .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 .st { font-size: 12.5px; color: #9fc0dd; white-space: nowrap; }
  .ally button { padding: 3px 10px; border-radius: 6px; border: 1px solid #2c4a6e; cursor: pointer;
    background: #14304e; color: #cfe6ff; font-size: 13px; }
  .ally button.off { background: #3a2020; color: #f0c8c0; border-color: #5a3030; }
  /* 同盟パネル */
  .alh { font-size: 13.5px; font-weight: 800; color: #eaf3fb; margin: 6px 0 5px;
         padding: 5px 9px; border-radius: 8px;
         background: linear-gradient(90deg, rgba(74,139,255,.20), rgba(74,139,255,.02)); border: 1px solid #2c527c; }
  .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: #8aa0b4; margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
  .legend span { display: inline-flex; align-items: center; gap: 4px; }
  .legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
  .queue { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; max-height: 220px; overflow: auto; }
  .queue li { display: flex; justify-content: space-between; gap: 6px; background: #0e1b2c; border-radius: 6px;
              padding: 5px 8px; margin-bottom: 4px; align-items: center; }
  .queue .x { color: #e08; cursor: pointer; font-weight: 700; }
  .muted { color: #8aa0b4; font-size: 14px; }
  .toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #1d3553;
           border: 1px solid #2f5380; padding: 10px 16px; border-radius: 10px; font-size: 15px;
           opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90%; }
  .toast.show { opacity: 1; }
  .toast.errc { background: #4a1f23; border-color: #7c2d33; }
  .pill { font-size: 12.5px; background: #0e1b2c; border-radius: 20px; padding: 3px 10px; color: #b9c8d8; }
  .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: 600; }
  .topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 8px; }
  /* 開発用の説明サブ文はマップ表示領域を稼ぐため非表示 */
  .topbar .sub { display: none; }
  /* 上部の操作パネルはコンパクトに（マップをスクロールなしで見せるため縦を詰める） */
  #statusPanel { padding: 9px 12px; margin-bottom: 9px; }
  #statusPanel .ibanner { margin-bottom: 8px; }
  #statusPanel .statusbar { margin-bottom: 0; }
  .statusrow { row-gap: 6px; }
  #mapPanel { padding: 10px; }
  /* 島バナー（原典寄せ・コンパクト化） */
  .ibanner { 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 .nm { font-size: 19px; font-weight: 800; 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; }
  /* ステータスは独立したミニカードを並べる（角丸・微グラデ・左アクセント） */
  /* align-items:start にしないと、レート(サブ行あり)の高さに他カードが引き伸ばされ、数値の下に余白が出る */
  .statusbar { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin-bottom: 10px; }
  .statusbar .sc { flex: 1 1 96px; min-width: 96px; 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: 600; white-space: nowrap; }
  .statusbar .sc .k .ic { font-size: 13px; filter: saturate(1.1); }
  .statusbar .sc .v { font-size: 18px; font-weight: 800; color: #f2f8ff; white-space: nowrap;
                      margin-top: 1px; line-height: 1.2; letter-spacing: .01em; }
  .statusbar .sc .v .lv { font-size: 11.5px; font-weight: 700; 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-farm   { box-shadow: inset 2px 0 0 #9ac44a, 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-rate   { box-shadow: inset 2px 0 0 #e8a13a, 0 1px 2px rgba(0,0,0,.3); }
  .mapframe { border: 3px solid #274262; border-radius: 8px; padding: 4px; background: #06101c; }
  /* 海の背景。島の外の外洋や六角の隙間が「続く海」として見える（世界地図の広がり表現）。
     以前は海タイルGIFを敷き詰めていたが、広い盤面で常時アニメが走り重かったため、
     静的な海色グラデーションに変更（島マスの波アニメは従来どおり）。 */
  #mapstage { position: relative; margin: 0 auto; border-radius: 8px;
    background: linear-gradient(160deg, #0c2c4b, #071d33); }
  #tiles { position: absolute; left: 0; top: 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%); }
  /* 世界地図（軽量モード）: アニメを止め、単色ヘックスに細い縁だけ付ける */
  #mapstage.flatworld .cell img { animation: 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 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; }
  .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.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.selship img.top, .cell.fleet.selship img.til:last-child { animation: shipsel 1.1s ease-in-out infinite; }
  @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 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; } }
  /* マスクリックのコマンドメニュー（原典風） */
  #cellmenu { position: absolute; z-index: 10; min-width: 168px; max-height: 320px; overflow: auto;
    background: #10213a; border: 1px solid #3b5a80; border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.55); font-size: 14.5px; display: none; }
  #cellmenu .hd { padding: 6px 10px; background: #17304e; color: #cfe3f5; font-weight: 700;
    border-bottom: 1px solid #2c4a6e; position: sticky; top: 0; }
  #cellmenu .hd .sub { font-weight: 400; color: #8fb0cc; font-size: 12.5px; }
  #cellmenu .it { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px;
    color: #e6eef6; cursor: pointer; white-space: nowrap; }
  #cellmenu .it:hover { background: #1d3a5c; }
  #cellmenu .it .c { color: #9fc08f; }
  #cellmenu .it.dis { color: #6c7f92; cursor: default; }
  #cellmenu .it.dis:hover { background: transparent; }
  #cellmenu .it.dis .c { color: #6c7f92; }
  #cellmenu .sep { height: 1px; background: #24405f; margin: 3px 0; }
  .qhead { font-size: 15px; margin: 10px 0 2px; color: #9fc0dd; }
  /* 艦カード（艦を選択すると出る） */
  #fleetCard { display: none; margin-top: 8px; background: linear-gradient(135deg, #10233c, #0c1a2c);
    border: 1px solid #2f5a78; border-radius: 10px; padding: 10px 12px; gap: 12px; align-items: center; }
  #fleetCard.show { display: flex; }
  #fleetCard .pic { width: 56px; height: 56px; image-rendering: pixelated; background: #0a2a47;
    border-radius: 8px; border: 1px solid #345a80; padding: 4px; }
  #fleetCard .info { flex: 1; min-width: 0; }
  #fleetCard .nm { font-weight: 700; 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; gap: 10px; margin-top: 5px; font-size: 12.5px; color: #cfe0f0; }
  #fleetCard .specs b { color: #ffe9a8; }
  #fleetCard .act { display: flex; flex-direction: column; gap: 6px; }
  /* はこにわニュース: 遊び心のある丸ゴシック＋カテゴリ・チップで視認性UP */
  .news { max-height: 300px; overflow: auto; font-size: 14px; line-height: 1.5;
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif; }
  .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 .ncat { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; 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: 700; font-variant-numeric: tabular-nums; }
  .news .ne .tx b.nm { color: #9fd3ff; font-weight: 700; }
  .news .ne .tx .kw { color: #ff9db0; font-weight: 700; }
  /* カテゴリ色に応じて本文の強調色も少し寄せる */
  .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; }
  .news .ne.mon  { border-left-color: #b06ad0; }  .news .ne.mon  .ncat { background: #2e1740; color: #e6c8ff; border-color: #573a70; }
  .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: 700; }
  .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: 22px 24px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
  #tutorial .tstep { color: #6d8aa8; font-size: 14px; letter-spacing: .05em; }
  #tutorial h3 { margin: 6px 0 12px; color: #eaf3fb; font-size: 23px; }
  #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; }
  #btnHelp { background: #14304e; color: #cfe6ff; border: 1px solid #2c4a6e; border-radius: 8px;
    padding: 6px 10px; cursor: pointer; font-size: 15px; }
  /* ヘッダ/詳細設定のページ内リンク（ルール・管理画面） */
  .navlink { display: inline-flex; align-items: center; background: #14304e; color: #cfe6ff;
    border: 1px solid #2c4a6e; border-radius: 8px; padding: 6px 10px; font-size: 15px;
    font-weight: 700; text-decoration: none; }
  .navlink:hover { background: #1c4066; }
  /* サイトフッター */
  .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: 700; }
  .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: 700; }
  #replayBar .rturn { color: #eaf3fb; font-weight: 700; font-size: 16px; min-width: 84px; }
  #replayBar button { background: #22375a; color: #cfe6ff; padding: 6px 10px; }
  #replayBar button.play { background: #2f6df0; color: #fff; }
  #replayBar #rSlider { flex: 1; accent-color: #7fd1ff; }
  #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 #2c4a6e; border-radius: 8px;
    padding: 5px 10px; cursor: pointer; font-weight: 700; }
  .mapcrumb .lnk:hover { background: #1d4066; }
  .mapcrumb .sep { color: #5a7691; }
  .mapcrumb .cur { color: #eaf3fb; font-weight: 700; }
  .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; }
  .chatlog { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* チャットや入力欄以外のUI文字は誤選択させない（マップのドラッグ操作を安定させる） */
  .topbar, .statusbar, .legend, .chattabs, #replayBar, .ibanner { 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; }
  }

  /* スマホ幅（縦積みは既存の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: 18.5px; }
    /* ステータスは横スクロールで全項目を保持（折り返しで縦に伸びすぎないように） */
    .statusbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .statusbar .sc { flex: 0 0 auto; }
    /* チャット欄はスマホでは低めに（マップに画面を譲る） */
    .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; }
  }

/* 艦隊パネルの索敵順チップ */
.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 #2c527c; color: #cfe2f5;
  border-radius: 4px; cursor: pointer; padding: 0 4px; line-height: 18px; }
.fchip .mv:disabled { opacity: .35; cursor: default; }