/* ============================================================
   カタン 挑戦者AI 対局サイト — テーマ & 1画面レイアウト（PC / スマホ）
   盤面クラス(.hexface/.token/.tokennum/.pipdot/.edge/.edgeink/.vtx/.settle)は
   engine.js の render() が使うため、名称と役割を維持している。
   ============================================================ */
:root{
  --bg:#0f1319; --panel:#1a2029; --panel2:#222a35; --line:#2c3542;
  --text:#e8ecf2; --muted:#98a4b4; --faint:#6b7583;
  --wood:#3f7d4e; --brick:#b0603a; --sheep:#8fb84e; --wheat:#e0b53f; --ore:#6b7684; --desert:#d8c9a3;
  --gold:#e6bd4a; --good:#57b368; --bad:#e0655f;
  --p1:#e0524f; --p2:#4a90e2; --p3:#e8933a; --p4:#eef1f5; --p5:#7d5a3c; --p6:#4aa564;
  --radius:12px;
}

/* オンラインロビー */
#mpOverlay{position:fixed;inset:0;z-index:3000;background:rgba(9,14,20,.86);display:none;align-items:center;justify-content:center;padding:16px}
#mpOverlay.show{display:flex}
.mpcard{position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.mpcard h2{margin:0 36px 6px 0}.mplead{color:var(--muted);margin:0 0 20px}
.mpclose{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--text);font-size:28px;cursor:pointer}
.mpcard label{display:grid;gap:6px;margin:12px 0;color:var(--muted);font-size:13px}
.mpcard input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);padding:12px;font-size:16px}
.mpcard select{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);padding:11px 12px;font-size:15px}
.mpcard .mpdebug-create{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.mpcard .mpdebug-create input{width:17px;height:17px;padding:0;margin:0;accent-color:var(--gold)}
.mpbuttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.mpor{text-align:center;color:var(--muted);margin:18px 0}
.mpcode{font-size:15px;margin:10px 0 16px}.mpcode b{font-size:26px;letter-spacing:.14em;color:var(--gold)}
#mpSeats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mpseat{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:11px;border:1px dashed var(--line);border-radius:11px;opacity:.65}
.mpseat.ready{border-style:solid;opacity:1}.mpseat.mine{box-shadow:inset 0 0 0 1px var(--gold)}
.mpseat b{grid-row:1/3;font-size:19px}.mpseat span{font-weight:700}.mpseat small{color:var(--muted)}
#mpWait{color:var(--muted)}.mpinvite{font-size:12px!important}.mplink{margin-top:16px;border:0;background:transparent;color:var(--muted);text-decoration:underline;cursor:pointer}
.mpstatus{min-height:20px;margin-top:10px;color:var(--gold);font-size:13px}
body.multiplayer #pauseBtn{display:none}
.mpdebugdock{position:fixed;z-index:2200;left:12px;top:62px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 24px);padding:8px 10px;border:2px solid #dc8e32;border-radius:11px;background:rgba(27,22,16,.96);color:#fff4df;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:12px}
.mpdebugdock[hidden]{display:none}.mpdebugdock label{display:flex;align-items:center;gap:5px}.mpdebugdock input{accent-color:#f2b451}.mpdebugdock select{width:auto;padding:4px 7px}.mpdebugdock span{color:#efc77b}
.mpsyncbadge{position:fixed;z-index:2300;left:50%;top:62px;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:8px 13px;border:1px solid #efb85e;border-radius:999px;background:rgba(44,30,13,.96);color:#ffe4a6;box-shadow:0 6px 20px rgba(0,0,0,.35);font-size:12px;font-weight:800;text-align:center}.mpsyncbadge.ok{border-color:#6fc99a;background:rgba(15,49,35,.96);color:#bff4d6}.mpsyncbadge[hidden]{display:none}
@media(max-width:600px){.mpcard{padding:18px}.mpbuttons .btn{flex:1}#mpSeats{grid-template-columns:1fr}.mpdebugdock{top:54px;left:6px;right:6px;max-width:none}}
*{box-sizing:border-box}
/* 実機モバイルでは 100vh がアドレスバー裏に隠れて下端が切れるため、
   動的ビューポート単位(dvh)を使う。100vh は非対応ブラウザ向けのフォールバック。 */
html,body{margin:0; height:100vh; height:100dvh; overflow:hidden}
body{
  background:radial-gradient(1200px 700px at 30% -10%, #1b2430 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column;
}
button{font-family:inherit}
h1,h2,h3{margin:0}

/* ---------- 上部バー ---------- */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(26,32,41,.96),rgba(15,19,25,.85));
}
.brand{display:flex; align-items:baseline; gap:9px; min-width:0}
.brand h1{font-size:17px; font-weight:800; letter-spacing:.01em}
.brand .tag,.brand h1 .tag{color:var(--gold)}
.brand .sub{color:var(--muted); font-size:12px}
.spacer{flex:1}
.ctrl{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ctrl .grp{display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:4px 9px}
.ctrl label{color:var(--muted); font-size:12px}
.speedval{width:44px; text-align:right; color:var(--muted); font-size:12px}
input[type=range]{accent-color:var(--gold); width:104px; vertical-align:middle}

/* 二次操作メニュー: PCでは display:contents で従来通りインライン展開（レイアウト不変）。
   スマホでは「⋯」ボタン＋ドロップダウンに切替（下のスマホ用ルールで上書き）。 */
.menuwrap{display:contents}
.menu{display:contents}
.btn.menubtn{display:none}   /* .icbtn より高い詳細度で確実に隠す（PCでは非表示）*/

/* ---------- ボタン ---------- */
.btn{border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:9px;
  padding:7px 12px; font-size:13px; cursor:pointer; transition:.15s; white-space:nowrap}
.btn:hover{border-color:#3c4756; background:#28313d}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.primary{background:var(--gold); color:#241f10; border-color:var(--gold); font-weight:800}
.btn.primary:hover{background:#f0c95c}
.btn.good{background:var(--good); border-color:var(--good); color:#08240f; font-weight:700}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 9px; font-size:12px; border-radius:8px}
.btn.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; color:#fff}
.icbtn{width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0; font-size:15px}
select{background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; font-size:13px; max-width:100%}

/* ---------- 本体グリッド ---------- */
.appmain{flex:1; min-height:0; display:grid; overflow:hidden}
body[data-mode="pc"] .appmain{
  grid-template-columns:minmax(0,1fr) 388px;
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"board panels" "hand panels";
  gap:12px; padding:12px;
}
body[data-mode="mobile"] .appmain{
  grid-template-columns:1fr;
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"board" "hand" "panels";
  gap:8px;
  /* 下端に safe-area を確保: 固定された手札/操作が iOS ホームインジケータに隠れないように */
  padding:8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}

/* ---------- 盤面 ---------- */
#boardRegion{grid-area:board; min-width:0; min-height:0; display:flex; flex-direction:column}
.boardwrap{position:relative; background:linear-gradient(180deg,#0e2233,#0a1a28);
  border:1px solid var(--line); border-radius:var(--radius); padding:8px;
  box-shadow:0 8px 30px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; overflow:hidden}
svg#board{display:block}
body[data-mode="pc"] .boardwrap{flex:1; min-width:0; min-height:0}
body[data-mode="pc"] svg#board{width:100%; height:100%}
body[data-mode="mobile"] .boardwrap{flex:0 0 auto; width:100%}
body[data-mode="mobile"] svg#board{width:100%; height:auto; max-height:40vh; max-height:40dvh}

.hexface{stroke:#0b0e12; stroke-width:1.2}
.token{fill:#f2ead2; stroke:#0b0e12; stroke-width:1}
.tokennum{font-family:"Yu Gothic UI",system-ui,sans-serif; font-weight:800; text-anchor:middle; dominant-baseline:central; fill:#20242b}
.tokennum.hot{fill:#b23a2e}
.pipdot{fill:#20242b}
.pipdot.hot{fill:#b23a2e}
.edge{stroke:transparent; stroke-width:9; cursor:pointer; stroke-linecap:round}
.edge:hover{stroke:rgba(255,255,255,.18)}
.edgeink{stroke-width:6; stroke-linecap:round; pointer-events:none}
.vtx{cursor:pointer; fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.30); stroke-width:1}
.vtx:hover{fill:var(--gold); stroke:#fff}
.settle{pointer-events:none}
.placement-preview-line{stroke-width:11;stroke-linecap:round;stroke-dasharray:10 5;opacity:.72;filter:drop-shadow(0 0 5px #fff)}
.placement-preview-piece{stroke:#fff4bd;stroke-width:3;stroke-dasharray:5 3;opacity:.72;filter:drop-shadow(0 0 5px rgba(255,255,255,.9))}
.placement-preview-label{font-size:10px;font-weight:900;fill:#fff4bd;paint-order:stroke;stroke:#17202a;stroke-width:3px;stroke-linejoin:round}
.vlabel{font-size:8px; fill:var(--faint); text-anchor:middle; dominant-baseline:central; pointer-events:none}

/* ---------- パネル領域 ---------- */
#panelRegion{grid-area:panels; min-height:0; min-width:0; display:flex; flex-direction:column; gap:6px; overflow-y:auto; overscroll-behavior:contain}
.tabbar{display:none; gap:6px}
.tabbtn{flex:1; border:1px solid var(--line); background:var(--panel2); color:var(--muted); border-radius:9px; padding:8px 3px; font-size:12px; font-weight:700; cursor:pointer}
.tabbtn.on{border-color:var(--gold); color:#fff; box-shadow:0 0 0 1px var(--gold) inset}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px 11px}
.panel > h2{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:7px; font-weight:700; display:flex; gap:8px; align-items:baseline}
.panel > h2 .mini{color:var(--faint); font-size:10.5px; text-transform:none; letter-spacing:0; margin-left:auto}

/* PCモード: パネルを縦積み。ログだけが伸縮し、他は自然高さを保持（潰れて重ならないように） */
body[data-mode="pc"] .tabpanel{display:flex; flex-direction:column; min-height:0}
body[data-mode="pc"] .tabpanel:not(.tp-log){flex:0 0 auto}
body[data-mode="pc"] .tabpanel.tp-log{flex:1 1 0; min-height:64px}
body[data-mode="pc"] .tp-log .panel{height:100%; display:flex; flex-direction:column; min-height:0}
body[data-mode="pc"] #gameLog{flex:1; min-height:0}
body[data-mode="pc"] #evalList{max-height:122px; overflow:auto}

/* スマホモード: タブで1枚だけ表示 */
body[data-mode="mobile"] .tabbar{display:flex}
body[data-mode="mobile"] .tabpanel{display:none; min-height:0}
body[data-mode="mobile"] .tabpanel.active{display:flex; flex-direction:column; flex:1; min-height:0}
body[data-mode="mobile"] .tabpanel.active > *{min-height:0}
body[data-mode="mobile"] .tabpanel.active .panel,
body[data-mode="mobile"] .tabpanel.active #evalPanel{height:100%; display:flex; flex-direction:column; min-height:0}
body[data-mode="mobile"] #gameLog,
body[data-mode="mobile"] #evalList{flex:1; min-height:0; overflow:auto}
/* 状況/銀行/相手タブも内部スクロール（ページはスクロールさせない） */
body[data-mode="mobile"] .tp-status.active .statusbar{flex:1; min-height:0; overflow:auto}
body[data-mode="mobile"] .tp-bank.active .panel,
body[data-mode="mobile"] .tp-opp.active .panel{overflow:auto}

/* 状況 */
.statusbar{background:linear-gradient(90deg,var(--panel),var(--panel2)); border:1px solid var(--line);
  border-radius:var(--radius); padding:8px 11px; font-size:13px}
.statusbar .stline{margin-bottom:5px}
.statusbar .badges{display:flex; gap:5px; flex-wrap:wrap}
.badge{font-size:10.5px; background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:2px 8px; color:var(--muted)}
.badge.sm{font-size:10px; padding:2px 7px}
.wintag{display:inline-block; background:var(--gold); color:#241f10; font-weight:800; border-radius:8px; padding:2px 9px; margin-left:6px}

/* AI評価値 */
#evalPanel{background:var(--panel); border:1px solid var(--gold); border-radius:var(--radius); padding:9px 12px}
#evalPanel h3{font-size:12px; font-weight:800; margin-bottom:2px; color:var(--gold)}
#evalPanel .plan{font-size:11.5px; color:var(--muted); margin-bottom:7px}
.evrow{display:grid; grid-template-columns:56px 1fr; align-items:center; gap:9px; padding:3px 8px; border-radius:8px; margin-bottom:2px; background:var(--panel2)}
.evrow.na{opacity:.55}
.evrow .pts{font-weight:800; font-size:16px; text-align:right; font-variant-numeric:tabular-nums}
.evrow .pts.pos{color:var(--good)} .evrow .pts.neg{color:var(--bad)} .evrow .pts.zero{color:var(--muted)}
.evrow .lab{font-size:12.5px}
.evrow .lab small{color:var(--faint)}
.evbar{height:5px; border-radius:3px; margin-top:4px; background:var(--line); overflow:hidden}
.evbar > i{display:block; height:100%; background:var(--good)}

/* ログ */
#gameLog{font-size:12.5px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:4px}
body[data-mode="mobile"] #gameLog{min-height:120px}
#gameLog > div{padding:2px 0; border-bottom:1px solid rgba(255,255,255,.03)}
#gameLog::-webkit-scrollbar,#evalList::-webkit-scrollbar{width:8px}
#gameLog::-webkit-scrollbar-thumb,#evalList::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}

/* 銀行 */
.bankgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:7px}
.bankcell{text-align:center; border:1px solid var(--line); border-radius:8px; padding:3px 2px; background:var(--panel2)}
.bankcell .lb{font-size:10.5px; color:var(--muted)}
.bankcell .nv{font-size:16px; font-weight:800}
.bankmeta{display:flex; gap:7px; flex-wrap:wrap; font-size:11.5px; align-items:center}
.bankmeta .m{background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:3px 8px}
.bankmeta .m b{color:var(--gold)}
.devplayed{display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; align-items:center}
.devplayed .dp-title{color:var(--faint); font-size:11px; margin-right:2px}
.devplayed .d{font-size:11.5px; background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:3px 8px}
.devplayed .d b{color:var(--gold)}

/* 相手（コンパクト） */
.opp{display:flex; align-items:center; gap:6px; flex-wrap:wrap; border:1px solid var(--line);
  border-radius:9px; padding:5px 9px; margin-bottom:5px; background:var(--panel2)}
.opp:last-child{margin-bottom:0}
.opp.turn{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.opp .dot{width:12px; height:12px; border-radius:50%; border:2px solid rgba(0,0,0,.4); flex:0 0 auto}
.opp .nm{font-weight:800; font-size:13px}
.opp .ai{font-size:10px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:1px 6px}
.opp .vp{margin-left:auto; font-weight:800; color:var(--gold); font-size:15px}
.opp .vp small{font-size:9.5px; color:var(--muted); font-weight:600; margin-left:2px}
.opp .ministat{flex-basis:100%; color:var(--muted); font-size:11px; margin-top:1px}
.opp .ministat b{color:var(--text); margin:0 3px 0 2px; font-weight:700}

/* ---------- 手札 + 操作 ---------- */
#handRegion{grid-area:hand; min-width:0}
.handbar{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:9px 12px}
.handhead{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.handhead .ht{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
#meStat{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); flex-wrap:wrap}
#meStat .dot{width:13px; height:13px; border-radius:50%; border:2px solid rgba(0,0,0,.4)}
#meStat .vpn{color:var(--gold); font-size:16px; margin:0 1px 0 3px}
#meStat small{font-size:10px}
#meStat .sep{margin-left:8px}
#meStat b{color:var(--text); margin-left:3px}
.cards{display:flex; gap:8px; flex-wrap:wrap}
.rescard{width:58px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel2); user-select:none}
.rescard .top{height:28px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#12151b; font-size:12px}
.rescard .cnt{text-align:center; font-size:18px; font-weight:800; padding:3px 0}
.rescard.click{cursor:pointer}
.rescard.click:hover{outline:2px solid var(--gold); outline-offset:-2px}
.devcards{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px}
.devchip{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:5px 9px; font-size:12px}
.devchip b{color:var(--gold)}
.actions{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:9px}
.trade{display:flex; gap:5px; align-items:center; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:4px 7px}
.trade .arw{color:var(--muted)}
.prompt{margin-top:9px; background:#20242b; border:1px solid var(--line); border-radius:10px; padding:8px 11px; font-size:12.5px}
.prompt.hot{border-color:var(--gold); background:#2a2616}
#winMeter{display:none; flex:0 0 auto; padding:7px 14px 8px; background:rgba(15,19,25,.97); border-bottom:1px solid var(--line)}
#winMeter.on{display:block}
.wmhead{display:flex; align-items:baseline; gap:8px; margin-bottom:5px}
.wmhead b{font-size:12px; color:var(--gold)}
.wmhead span{font-size:10px; color:var(--muted)}
#winMeterMeta{font-variant-numeric:tabular-nums}
#winMeterBar{height:18px; display:flex; overflow:hidden; border-radius:9px; background:#252a31; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.wmseg{height:100%; min-width:0; transition:width .35s ease; border-right:1px solid rgba(0,0,0,.35)}
#winMeterLabels{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:4px; font-size:11px}
.wmlabel{display:flex; justify-content:center; gap:4px; white-space:nowrap}
.wmlabel b{font-size:12px}
body[data-mode="mobile"] #winMeter{padding:6px 8px}
body[data-mode="mobile"] .wmhead span{display:none}
body[data-mode="mobile"] #winMeterLabels{gap:2px;font-size:10px}
#liveNoteBox{margin-top:9px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel2)}
.liveNoteHead{display:flex; align-items:center; gap:8px; margin-bottom:5px}
.liveNoteHead label{font-size:12px; font-weight:800; color:var(--gold)}
#liveNoteTarget{margin-left:auto; color:var(--muted); font-size:10.5px}
#liveTurnNote{display:block; width:100%; box-sizing:border-box; resize:vertical; min-height:42px; max-height:110px;
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:#171b21; color:var(--text); font:12.5px inherit}
#liveTurnNote:focus{outline:none; border-color:var(--gold)}
#liveNoteStatus{text-align:right; margin-top:3px; color:var(--muted); font-size:10.5px}
#liveNoteStatus.saved{color:var(--gold)}
body.replaying #liveNoteBox{display:none}
body[data-mode="mobile"] .actions .btn{padding:6px 9px; font-size:12px}
body[data-mode="mobile"] .rescard{width:50px}
body[data-mode="mobile"] .rescard .cnt{font-size:16px}

/* ---------- 開始画面 ---------- */
#startScreen{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(8,12,17,.72); backdrop-filter:blur(4px)}
#startScreen.hidden{display:none}
.startcard{width:min(560px,96%); max-height:94vh; max-height:94dvh; overflow:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.startseg{display:flex; align-items:center; gap:6px; margin-bottom:8px}
.startseg .sl{color:var(--muted); font-size:12px; width:52px}
.segb{border:1px solid var(--line); background:var(--panel2); color:var(--muted); border-radius:8px; padding:6px 13px; cursor:pointer; font-weight:700; font-size:13px}
.segb.on{border-color:var(--gold); color:#fff; box-shadow:0 0 0 1px var(--gold) inset}
.startcard h2{font-size:19px; font-weight:800; margin:10px 0 4px}
.start-heading{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-bottom:12px}
.start-heading h2{margin:0}
.user-milestone{color:var(--gold); font-size:14px; font-weight:700}
#welcomePanel{display:none}
#startScreen[data-view="welcome"]:not(.hidden){
  display:block; overflow:auto; overscroll-behavior:contain;
  padding:0 clamp(20px,6vw,88px); color:#f7f3e8;
  background:radial-gradient(ellipse at 88% 45%,#17485b 0%,#0e2a38 40%,#0a1c27 80%);
  backdrop-filter:none;
}
#startScreen[data-view="welcome"] .startcard{display:none}
#startScreen[data-view="welcome"] #welcomePanel{display:flex; flex-direction:column; max-width:1180px; min-height:100%; margin:auto}
body:has(#startScreen[data-view="welcome"]:not(.hidden)) > :is(.topbar,.appmain,#winMeter){visibility:hidden}
.welcome-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 0; border-bottom:1px solid #54717a}
.welcome-brand{display:flex; align-items:center; gap:10px; font-size:clamp(15px,1.7vw,20px); font-weight:750}
.welcome-bar button,.welcome-links button{font:inherit; color:#eef2ed; cursor:pointer}
.welcome-bar button{background:transparent; border:1px solid #759099; border-radius:6px; padding:7px 12px}
.welcome-hero{flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(26px,5vw,82px); align-items:center; padding:clamp(32px,7vh,85px) 0}
.welcome-copy .user-milestone{margin:0 0 16px; font:700 17px/1.3 system-ui,sans-serif; color:#f3ce82}
#welcomeTitle{font-family:Georgia,"Hiragino Mincho ProN","Yu Mincho",serif; font-size:clamp(48px,6.5vw,89px); font-weight:550; line-height:1.02; letter-spacing:-.045em; text-wrap:balance}
html[lang="ja"] #welcomeTitle{font-size:clamp(40px,5.1vw,73px); line-height:1.2; letter-spacing:-.025em}
.welcome-description{font-size:clamp(16px,1.5vw,19px); line-height:1.65; color:#d1e1e1; max-width:40ch; margin:22px 0 25px}
.welcome-play{display:inline-flex; align-items:center; justify-content:space-between; gap:34px; min-height:50px; padding:11px 22px; border:0; border-radius:8px; background:#f2c872; color:#27231b; font-size:18px; font-weight:750; cursor:pointer}
.welcome-play:hover{background:#ffdc94}
.welcome-links{display:flex; flex-wrap:wrap; gap:0 24px; margin-top:10px}
.welcome-links button{padding:9px 0; background:none; border:0; text-decoration:underline; text-underline-offset:4px}
.welcome-data{font-size:12px; color:#b9ced0; margin:14px 0 0; max-width:53ch}
.welcome-data summary{cursor:pointer; width:fit-content; padding:4px 0}
.welcome-data p{margin:7px 0}
.welcome-island{margin:0; min-width:0}
.welcome-island video{display:block; width:100%; aspect-ratio:5/4; background:#07557d; border:1px solid #597b82; border-radius:14px; box-shadow:0 14px 34px #07182055}
.welcome-island figcaption{margin-top:8px; font-size:13px; color:#c1d4d6}
#welcomePanel :focus-visible{outline:2px solid #ffe3ac; outline-offset:4px}
@media(max-width:700px){
  .welcome-bar{padding:14px 0}
  .welcome-hero{grid-template-columns:minmax(0,1fr); align-content:start; gap:24px; padding:32px 0 26px}
  #welcomeTitle{font-size:clamp(42px,11vw,62px)}
  .welcome-copy .user-milestone{font-size:15px; margin-bottom:10px}
  .welcome-description{margin:14px 0 18px}
  .welcome-data{margin-top:6px}
}
.startcard .lead{color:var(--muted); font-size:13px; margin-bottom:14px}
.startcard .researchnotice{color:var(--muted); font-size:12px; line-height:1.45; margin:0 0 14px; padding:8px 10px; border-left:3px solid var(--accent); background:rgba(25,118,210,.06)}
.startcard .sublabel{color:var(--muted); font-size:13px; margin-bottom:8px}
.seatpick{display:flex; gap:6px; margin-bottom:14px}
.seatpick button{border:1px solid var(--line); background:var(--panel2); color:var(--muted); width:40px; height:36px; border-radius:9px; cursor:pointer; font-weight:800}
.seatpick button.on{color:#fff}
.seatgrid{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.seatrow{display:grid; grid-template-columns:70px 1fr; align-items:center; gap:12px; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:9px 11px}
.seatrow.me{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.seatrow .who{display:flex; align-items:center; gap:8px; font-weight:700}
.seatrow .dot{width:15px; height:15px; border-radius:50%; border:2px solid rgba(0,0,0,.4)}
.seatrow .youtag{color:var(--gold); font-weight:800; font-size:13px}
.startrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ---------- リプレイバー（盤面の下にドッキング。盤面を覆わない） ---------- */
#replayBar{display:none; flex:0 0 auto; margin-top:8px; max-height:42vh; overflow:auto;
  background:rgba(16,21,28,.95); border:1px solid var(--gold); border-radius:12px; padding:9px 11px; box-shadow:0 10px 30px rgba(0,0,0,.5)}
#replayBar .rvtop{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#replayBar .rvtop .spacer{flex:1}
#replayBar .rvtop b{font-size:13px}
#rvCount{color:var(--muted); font-size:12px}
#rvHands{margin-top:7px; max-height:118px; overflow:auto}
.rvtable{width:100%; border-collapse:collapse; font-size:12px}
.rvtable th{color:var(--muted); font-weight:600; padding:2px 3px}
.rvtable td{text-align:center; padding:2px 3px}
.rvtable tr.rvt{background:rgba(255,255,255,.05)}
#rvEvents{margin-top:6px; font-size:12px; color:var(--muted); max-height:70px; overflow:auto}
#rvEvents > div{padding:1px 0}
/* リプレイ中はスマホの盤面を縮めて、盤面＋リプレイバーが両方収まるように */
/* リプレイ中は盤面を主役にする: 手札バー・タブを畳み、盤面を大きく取る */
body.replaying #handRegion{display:none}
body.replaying #tabBar{display:none}
body[data-mode="mobile"].replaying svg#board{max-height:52vh; max-height:52dvh}
body[data-mode="mobile"].replaying #replayBar{max-height:44vh; overflow-y:auto}
body[data-mode="pc"].replaying svg#board{max-height:70vh}
/* コメント欄 */
#rvNotes{margin-top:8px; display:flex; flex-direction:column; gap:4px}
#rvNotes .rvnl{font-size:11px; color:var(--muted)}
#rvNotes textarea{width:100%; box-sizing:border-box; background:var(--panel2); color:var(--fg);
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12.5px; font-family:inherit; resize:vertical}
#rvNotes textarea:focus{outline:none; border-color:var(--accent, #e0b341)}
.rvnoted{color:var(--accent, #e0b341)}
/* 手動配置モード */
#composerBar{display:none; flex:0 0 auto; margin-top:8px; max-height:44vh; overflow:auto;
  background:rgba(16,21,28,.95); border:1px solid var(--gold); border-radius:12px; padding:9px 11px; box-shadow:0 10px 30px rgba(0,0,0,.5)}
#composerBar .rvtop{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#composerBar .rvtop .spacer{flex:1}
#composerBar .cpseg{display:inline-flex; gap:4px}
#composerBar .cpp{padding:4px 9px; font-size:12px}
#cpStat{margin-top:7px; font-size:12px; color:var(--muted)}
#composerBar .cpsec{margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
#composerBar .pickrow{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px}
.swatch{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--panel2); color:#e8eaed; border-radius:7px; padding:4px 8px; cursor:pointer; font-size:12px; font-weight:600}
.swatch.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.swatch .sw{width:12px; height:12px; border-radius:3px; display:inline-block}
.numbtn{min-width:28px; border:1px solid var(--line); background:var(--panel2); color:#e8eaed; border-radius:6px; padding:4px 7px; cursor:pointer; font-size:12px; font-weight:700}
.numbtn.hot{color:#e0564b}
.numbtn.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.numbtn:disabled{opacity:.4; cursor:default}
body[data-mode="mobile"].composing svg#board{max-height:26vh; max-height:26dvh}
body[data-mode="mobile"].composing #composerBar{max-height:42vh}
/* 手札見出しの手番注記 */
.handhead .ht .turnnote{color:var(--gold); font-weight:600; font-size:11px; margin-left:6px}

/* ---------- トースト ---------- */
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background:#20283a; color:#eaf0fb; border:1px solid var(--gold); padding:10px 17px; border-radius:12px;
  font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:60; max-width:82vw; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.hidden{display:none !important}
.hint{color:var(--faint); font-size:12px}

/* ============================================================
   スマホモード: コンパクトなトップバー / 下部固定の手札・操作
   ============================================================ */

/* --- トップバー: 主要操作（一時停止・AI速度・AI評価値）は常時表示。
       二次操作（棋譜/新規/表示/言語）は「⋯」メニューに格納。横スクロールなし。 --- */
body[data-mode="mobile"] .topbar{
  flex-wrap:nowrap; overflow:visible; gap:8px;
  padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));
}

/* 盤面・タブ・手札を固定高へ押し込めず、ページとして縦に辿れるようにする。 */
body[data-mode="mobile"]{height:auto; min-height:100vh; min-height:100dvh; overflow-y:auto; display:block}
body[data-mode="mobile"] .appmain{
  /* 操作を情報タブより先に置く。390x844では旧順序だとサイコロが y=885 へ押し出されていた。 */
  grid-template-rows:auto auto minmax(260px,42dvh);
  min-height:0; overflow:visible; align-content:start;
}
body[data-mode="mobile"] #panelRegion{min-height:260px; height:42dvh; overflow:hidden}
body[data-mode="mobile"] #handRegion{min-height:max-content}

/* PC右カラムは状況・ログ・銀行・相手を含む一覧全体をスクロール可能にする。 */
body[data-mode="pc"] #panelRegion{overflow-y:auto; padding-right:3px; scrollbar-gutter:stable}
#panelRegion::-webkit-scrollbar{width:9px}
#panelRegion::-webkit-scrollbar-thumb{background:var(--line); border-radius:5px}
body[data-mode="mobile"] .brand{display:none}
body[data-mode="mobile"] .topbar .spacer{display:none}
body[data-mode="mobile"] .ctrl{flex:1; flex-wrap:nowrap; gap:6px; min-width:0}
body[data-mode="mobile"] .ctrl .grp{flex:0 0 auto; padding:3px 8px; gap:5px}
body[data-mode="mobile"] .ctrl .grp label{display:none}   /* 「AI速度」ラベルは省略（スライダー＝速度）*/
body[data-mode="mobile"] input[type=range]{width:74px}
body[data-mode="mobile"] .speedval{width:38px; font-size:11px}
body[data-mode="mobile"] .icbtn{width:40px; height:40px; font-size:16px}
body[data-mode="mobile"] #evalBtn{flex:0 0 auto; min-height:40px; padding:6px 10px; font-size:12px; white-space:nowrap}

/* 「⋯」メニュー（スマホのみドロップダウン化） */
body[data-mode="mobile"] .menuwrap{display:flex; position:relative; margin-left:auto; flex:0 0 auto}
body[data-mode="mobile"] .menubtn{display:inline-flex}
body[data-mode="mobile"] .menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:45;
  display:none; flex-direction:column; align-items:stretch; gap:6px;
  min-width:196px; padding:8px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,.55);
}
body[data-mode="mobile"] .menu.open{display:flex}
body[data-mode="mobile"] .menu .btn{width:100%; text-align:left; min-height:40px}

/* --- 盤面: 幅にフィット、高さは svh でツールバー表示時も常に収める --- */
body[data-mode="mobile"] svg#board{max-height:40vh; max-height:36svh}

/* --- タブ: タップしやすく --- */
body[data-mode="mobile"] .tabbtn{min-height:40px; padding:6px 4px; font-size:12px}

/* --- 手札バー（コンパクト・下部固定） --- */
body[data-mode="mobile"] .handbar{padding:8px 10px}
body[data-mode="mobile"] .handhead{margin-bottom:6px; gap:6px}
body[data-mode="mobile"] .handhead .ht{display:none}          /* 「あなたの手札」見出しは省略（meStatにP#表示あり）*/
body[data-mode="mobile"] #meStat{font-size:11px; gap:3px}
body[data-mode="mobile"] #meStat .vpn{font-size:14px}
body[data-mode="mobile"] #meStat .sep{margin-left:6px}
body[data-mode="mobile"] .cards{gap:6px; flex-wrap:nowrap; justify-content:space-between}
body[data-mode="mobile"] .rescard{width:52px}
body[data-mode="mobile"] .rescard .top{height:22px; font-size:11px}
body[data-mode="mobile"] .rescard .cnt{font-size:15px; padding:2px 0}
body[data-mode="mobile"] .devcards{flex-wrap:nowrap; overflow-x:auto; margin-top:6px; gap:6px}
body[data-mode="mobile"] .devcards > *{flex:0 0 auto}
body[data-mode="mobile"] .devchip{padding:4px 8px; font-size:11px}

/* --- 操作ボタン: 横スクロール可・主要（サイコロ／ターン終了）を先頭に --- */
body[data-mode="mobile"] .actions{flex-wrap:nowrap; overflow-x:auto; margin-top:7px; padding-bottom:3px; gap:6px}
body[data-mode="mobile"] .actions::-webkit-scrollbar{height:5px}
body[data-mode="mobile"] .actions::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
body[data-mode="mobile"] .actions > *{flex:0 0 auto; order:5}
body[data-mode="mobile"] .actions .btn{min-height:40px; padding:8px 12px; font-size:12.5px}
body[data-mode="mobile"] .actions #rollBtnU{order:1}
body[data-mode="mobile"] .actions #endTurnU{order:2}
body[data-mode="mobile"] .trade{flex:0 0 auto; padding:3px 6px; gap:4px}
/* スマホ: 交易UIは横スクロール列の外に出し、独立した行として常に見える位置に置く */
body[data-mode="mobile"] .trade.traderow{display:flex; width:100%; margin-top:6px; padding:6px 8px; gap:6px; align-items:center; box-sizing:border-box}
body[data-mode="mobile"] .trade.traderow select{flex:1 1 auto; min-width:0; min-height:38px}
body[data-mode="mobile"] .trade.traderow .btn{flex:0 0 auto; min-height:38px}
body[data-mode="mobile"] .trade select{padding:5px 6px; font-size:12px}
body[data-mode="mobile"] .prompt{margin-top:7px; max-height:48px; overflow:auto; font-size:11.5px; padding:6px 9px}

/* --- 縦が短い端末（例: 360x640 / 390x664）向けの追い込み: 盤面と手札を少し詰め、
       情報パネル(タブ内容)に確実に高さを残す --- */
@media (max-height:720px){
  body[data-mode="mobile"] svg#board{max-height:34svh}
  body[data-mode="mobile"] .handbar{padding:6px 10px}
  body[data-mode="mobile"] .handhead{margin-bottom:4px}
  body[data-mode="mobile"] .rescard .top{height:20px}
  body[data-mode="mobile"] .rescard .cnt{font-size:14px; padding:1px 0}
  body[data-mode="mobile"] .devcards{margin-top:4px}
  body[data-mode="mobile"] .actions{margin-top:6px}
  body[data-mode="mobile"] .prompt{margin-top:6px; max-height:34px; padding:5px 9px}
}

/* ---------- AIチューニング ドロワー ---------- */
.tune-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:.2s; z-index:60}
.tune-backdrop.show{opacity:1; pointer-events:auto}
.tunepanel{position:fixed; top:0; right:0; height:100vh; height:100dvh; width:366px; max-width:92vw;
  background:var(--panel); border-left:1px solid var(--line); box-shadow:-8px 0 26px rgba(0,0,0,.45);
  transform:translateX(103%); transition:transform .22s ease; z-index:61; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
.tunepanel.open{transform:none}
.tune-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line)}
.tune-head b{font-size:15px}
.tune-scroll{flex:1; min-height:0; overflow-y:scroll; overscroll-behavior:contain; padding:10px 12px 10px 14px; scrollbar-width:auto; scrollbar-color:var(--gold) var(--panel2)}
.tune-scroll::-webkit-scrollbar{width:14px}
.tune-scroll::-webkit-scrollbar-track{background:var(--panel2); border-radius:8px; margin:4px}
.tune-scroll::-webkit-scrollbar-thumb{background:var(--gold); border-radius:8px; border:3px solid var(--panel2)}
.tune-scroll::-webkit-scrollbar-thumb:hover{background:#f0c95c}
.tune-note{color:var(--muted); font-size:11.5px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:7px 9px; margin-bottom:11px}
.tune-grp{margin-bottom:15px}
.tune-gt{font-size:12px; font-weight:800; color:var(--gold); margin:2px 0 6px; letter-spacing:.02em}
.tune-hint{color:var(--faint); font-size:11px; line-height:1.35; margin:-2px 0 7px}
.tune-row{display:flex; align-items:center; gap:8px; margin:6px 0}
.tune-row .en{flex:0 0 15px; width:15px; height:15px; accent-color:var(--gold); cursor:pointer; margin:0}
.tune-row .en-spacer{flex:0 0 15px}
.tune-row label{flex:0 0 38%; font-size:12px; color:var(--text); cursor:default}
.tune-row input[type=range]{flex:1; width:auto; min-width:0; touch-action:pan-y}
.tune-row.off{opacity:.42}
.tune-row.off input[type=range]{filter:grayscale(1)}
.tune-val{flex:0 0 36px; text-align:right; font-size:12px; color:var(--gold); font-variant-numeric:tabular-nums}
.tune-row.off .tune-val{color:var(--faint)}
.tune-row.tog{justify-content:space-between}
.tune-row.tog input[type=checkbox]{width:18px; height:18px; accent-color:var(--gold); cursor:pointer}
.tune-foot{display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--line)}
.tune-foot .btn{flex:1}
.tune-copybox{width:100%; height:96px; margin-top:8px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; font-size:11px; font-family:ui-monospace,Menlo,Consolas,monospace; padding:6px}
body[data-mode="mobile"] .tunepanel{width:100vw; max-width:100vw}

/* ============================================================
   2026-08-27 盤面中心UI
   大きな盤面 / 右ログ列 / 下部アクションドックのゲーム卓レイアウト。
   ============================================================ */
:root{
  --wood:#16884d; --brick:#e06a35; --sheep:#9acb38; --wheat:#f2bf2e; --ore:#94a2aa; --desert:#d9c992;
}
body{
  background:linear-gradient(145deg,#096897 0%,#075681 58%,#06476d 100%) fixed;
}

/* 上部はゲーム中に場所を取らない一列ツールバー */
.topbar{
  min-height:52px; padding:6px 10px; flex-wrap:nowrap; gap:9px;
  background:linear-gradient(180deg,rgba(9,82,124,.98),rgba(7,65,100,.98));
  border-bottom:2px solid rgba(111,204,234,.65); box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.brand h1{font-size:15px}.brand .sub{color:#c3e4ef}
body[data-mode="pc"] .ctrl{flex-wrap:nowrap; min-width:0}
body[data-mode="pc"] .ctrl .grp{padding:3px 7px; background:rgba(0,30,50,.28); border-color:rgba(255,255,255,.18)}
body[data-mode="pc"] .ctrl .grp label{display:none}
body[data-mode="pc"] input[type=range]{width:82px}
body[data-mode="pc"] .menuwrap{display:flex; position:relative; flex:0 0 auto}
body[data-mode="pc"] .btn.menubtn{display:inline-flex}
body[data-mode="pc"] .menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:55; display:none;
  flex-direction:column; gap:6px; width:210px; padding:9px;
  background:#f7f2e9; border:1px solid #d4c9b9; border-radius:12px;
  box-shadow:0 16px 38px rgba(0,0,0,.34);
}
body[data-mode="pc"] .menu.open{display:flex}
body[data-mode="pc"] .menu .btn{width:100%; text-align:left; color:#20262d; background:#ece6dc; border-color:#d4c9b9}

/* PC: 盤面へ可能な限り高さを渡し、右側だけを情報列にする */
body[data-mode="pc"] .appmain{
  grid-template-columns:minmax(0,1fr) 356px;
  grid-template-rows:minmax(0,1fr) auto;
  gap:8px; padding:8px;
}
.boardwrap{
  padding:0; border:2px solid rgba(95,190,222,.72); border-radius:15px;
  background:radial-gradient(circle at 50% 44%,#1686b6 0%,#0870a4 58%,#05537f 100%);
  box-shadow:0 10px 34px rgba(0,0,0,.28),inset 0 0 70px rgba(0,40,70,.18);
}
svg#board{filter:drop-shadow(0 12px 12px rgba(0,27,45,.28))}
.hexface{stroke:#735e31; stroke-width:2; filter:drop-shadow(0 2px 1px rgba(0,0,0,.24))}
.token{fill:#fffdf4; stroke:#6e6656; stroke-width:1.4}
.edge{stroke-width:13}.edgeink{stroke-width:8}
.vtx{stroke-width:1.7}
.boardfocus{
  position:absolute; z-index:10; top:10px; left:10px; width:42px; height:42px;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:11px;
  background:rgba(245,250,250,.9); color:#075681; font-size:24px; font-weight:900;
  box-shadow:0 5px 16px rgba(0,0,0,.22); cursor:pointer;
}
.boardfocus:hover{background:#fff; transform:translateY(-1px)}

/* 右列は参考UI同様、明るい紙面にログとプレイヤー情報を積む */
#panelRegion{
  --panel:#fffaf1; --panel2:#eee8dd; --line:#d5cbbb; --text:#20252a;
  --muted:#5e6469; --faint:#7d817e; --gold:#a56f00; --good:#258754; --bad:#c7453e;
  color:var(--text); background:#f7f1e7; border:2px solid rgba(255,255,255,.48);
  border-radius:15px; padding:8px; gap:7px; box-shadow:0 10px 28px rgba(0,0,0,.2);
}
#panelRegion .panel,#panelRegion .statusbar,#panelRegion #evalPanel{box-shadow:0 2px 7px rgba(64,48,25,.08)}
#gameLog{gap:5px; font-size:13px; line-height:1.35}
#gameLog>div{padding:7px 8px; border:0; border-radius:8px; background:#f0ebe2}
#gameLog>div:nth-child(even){background:#e6e0d6}
body[data-mode="pc"] .tabpanel.tp-log{min-height:150px}
body[data-mode="pc"] #evalList{max-height:92px}

/* 下部は手札と主要操作を横並びにしたアクションドック */
#handRegion{
  --panel:#fbf7ef; --panel2:#ece7de; --line:#d1c8ba; --text:#20252a;
  --muted:#62686d; --faint:#828581; --gold:#a87000; --good:#2a9a68; --bad:#c7453e;
  color:var(--text);
}
.handbar{background:var(--panel); border:2px solid rgba(255,255,255,.52); box-shadow:0 9px 26px rgba(0,0,0,.22)}
body[data-mode="pc"] .handbar{
  display:grid; grid-template-columns:minmax(450px,.9fr) minmax(400px,1.1fr);
  grid-template-rows:auto auto;
  grid-template-areas:"head actions" "cards actions" "note note";
  column-gap:14px; row-gap:5px; padding:8px 11px;
  position:relative; align-content:start;
}
body[data-mode="pc"] .handhead{grid-area:head; margin:0; align-self:center; min-height:26px}
body[data-mode="pc"] .cards{grid-area:cards; flex-wrap:nowrap}
body[data-mode="pc"] .devcards{
  grid-area:cards; align-self:center; margin:0 0 0 330px; z-index:2;
  max-width:calc(100% - 330px); flex-wrap:nowrap; overflow-x:auto;
}
body[data-mode="pc"] .actions{grid-area:actions; margin:0; align-content:center; align-self:center}
body[data-mode="pc"] #liveNoteBox{grid-area:note}
body[data-mode="pc"] .prompt{
  position:absolute; right:14px; top:-52px; z-index:12; min-width:220px; max-width:62%;
  margin:0; padding:9px 14px; text-align:center; font-weight:800;
  background:rgba(250,247,239,.96); color:#20252a; border:2px solid #d4a827;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
#handRegion .rescard{background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.1)}
#handRegion .rescard .cnt{color:#20252a}
#handRegion .devchip{background:#fff}
#handRegion .actions>.btn{
  min-height:44px; background:#58bfd2; border-color:#3298ae; color:#073845;
  font-weight:800; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
#handRegion .actions>.btn.primary{background:#f1bd38; border-color:#d59a13; color:#30250b}
#handRegion .actions>.btn.good{background:#4fc487; border-color:#29975f; color:#07351f}
#handRegion .actions>.btn:disabled{background:#d6d5d1; border-color:#c2c0bb; color:#8b8b87; box-shadow:none}
#handRegion .trade{background:#e2f3f5; border-color:#9ccbd4}
.notetoggle{margin-left:auto; color:#4e555a!important; background:transparent!important; min-height:30px!important; box-shadow:none!important}
#liveNoteBox{display:none}
#liveNoteBox.open{display:block}

/* 盤面だけを見たい時は参考UIの拡大表示と同様に画面全体を使用 */
body.board-focus .topbar,body.board-focus #winMeter,body.board-focus #panelRegion,body.board-focus #handRegion{display:none!important}
body.board-focus .appmain{display:block; width:100vw; height:100vh; height:100dvh; padding:0!important}
body.board-focus #boardRegion,body.board-focus .boardwrap{width:100%; height:100%; border:0; border-radius:0}
body.board-focus svg#board{width:100%!important; height:100%!important; max-height:none!important}
body.board-focus .boardfocus{position:fixed; top:calc(12px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left))}

/* スマホも盤面を幅いっぱいまで戻し、操作はその直下に置く */
body[data-mode="mobile"] .appmain{gap:6px; padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
body[data-mode="mobile"] .boardwrap{border-radius:12px}
body[data-mode="mobile"] svg#board{width:100%; height:auto; max-height:52svh}
body[data-mode="mobile"] .boardfocus{width:38px; height:38px; top:7px; left:7px; font-size:21px}
body[data-mode="mobile"] .handbar{padding:7px 8px; border-radius:12px}
body[data-mode="mobile"] #panelRegion{height:48dvh; min-height:300px; border-radius:12px; padding:6px}
body[data-mode="mobile"] #liveNoteBox.open{margin-top:7px}
body[data-mode="mobile"] .notetoggle{min-height:30px!important; padding:4px 7px!important; font-size:11px!important}
body[data-mode="mobile"] .actions .btn{background:#58bfd2; border-color:#3298ae; color:#073845; font-weight:800}
body[data-mode="mobile"] .actions .btn.primary{background:#f1bd38; border-color:#d59a13}
body[data-mode="mobile"] .actions .btn.good{background:#4fc487; border-color:#29975f}
body[data-mode="mobile"] .actions .btn:disabled{background:#d6d5d1; border-color:#c2c0bb; color:#8b8b87}
body[data-mode="mobile"] .speedval{display:none}
body[data-mode="mobile"] #winMeterBtn{flex:0 0 auto; min-height:40px; padding:6px 9px; font-size:12px}

@media(max-width:980px) and (min-width:760px){
  body[data-mode="pc"] .appmain{grid-template-columns:minmax(0,1fr) 320px}
  body[data-mode="pc"] .handbar{grid-template-columns:minmax(390px,.85fr) minmax(330px,1.15fr)}
  .brand .sub{display:none}
}

/* ---------- ホットシート: 席の担当セレクタ / AI手番の手札枠 ---------- */
.seatseg{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; flex:1}
.seatrow .seatseg .segb{padding:6px 10px; font-size:12px}
.handai{color:var(--muted); font-size:13px; padding:16px 8px; text-align:center; width:100%}