/* ==========================================================================
   CityChase Web (Mini) — Refactored CSS
   - Single source of truth for sizes/colors
   - Deterministic order via Cascade Layers
   - No duplicate selectors / no contradictory overrides
   - Keep existing HTML/JS unchanged
   ========================================================================== */

/* Declare layer order (lowest → highest) */
@layer reset, tokens, base, layout, components, utilities, overrides;

/* ---------- Reset -------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
}

/* ---------- Design Tokens ------------------------------------------------ */
@layer tokens {
  :root {
    /* Sizes */
    --cell: 60px;               /* board cell size */
    --side-w: 240px;            /* right sidebar width */

    /* Colors */
    --c-road:       #d9d9d9;
    --c-building:   #90caf9;
    --c-building-hi:#b3e5fc;
    --c-reveal-now: #ffcdd2;
    --c-badge-pol:  #E8F0FE;
    --c-badge-thf:  #FCE4EC;
    --c-ui-border:  #ccc;
    --c-text-muted: #666;
    --c-ok-green:   #66bb6a;
    --c-ok-orange:  #ffb74d;

    /* Chip palette rule (same logic as JS colorForTurn) */
    --chip-other:   #9e9e9e;
    --chip-1:       #FDD835;
    --chip-6:       #FB8C00;

    /* Z-order */
    --z-menu:     5000;
    --z-center:   9998;
    --z-win:      9999;
    --z-toast:   10000;

    --brand-police: #1a73e8;
    --brand-thief:  #ec407a;

    --grid-gap: 2px; /* #grid の gap と一致させる */
    --grid-w: calc(11 * var(--cell) + 10 * var(--grid-gap)); /* 11列の幅＋10本の隙間 */
  }
}

/* ---------- Base --------------------------------------------------------- */
@layer base {
  html { font-size: 16px; }
  body {
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    margin: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .badge       { font-size: 16px; line-height: 1.25; }
  .controls,
  fieldset,
  legend,
  button,
  #who         { font-size: 14px; }
  .hint        { font-size: 12px; color: var(--c-text-muted); }
}

/* ---------- Layout ------------------------------------------------------- */
@layer layout {
  .top {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px;
  }
  .badge {
    min-width: 180px; padding: 6px 10px; border-radius: 8px; font-weight: 700; text-align: center;
  }
  body.police .badge { background: var(--c-badge-pol); }
  body.thief  .badge { background: var(--c-badge-thf); }

  .boardWrap {
    display: flex; align-items: flex-start; gap: 12px;
  }

  /* Right column */
  .side {
    width: var(--side-w); flex: 0 0 var(--side-w);
    display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  }
  .side > *, .side .controls, .side .controls > fieldset, .legend {
    width: 100%; box-sizing: border-box;
  }

  .controls { display: flex; flex-direction: column; gap: 10px; margin: 0; }
  fieldset  { border: 1px solid var(--c-ui-border); border-radius: 8px; padding: 8px 10px; }
  legend    { padding: 0 6px; color: #555; }
  button    { padding: 8px 12px; border-radius: 8px; border: 1px solid #bbb; background: #fff; cursor: pointer; }
  button.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
  button[disabled]{ opacity: .5; cursor: not-allowed; }
}

/* ---------- Board -------------------------------------------------------- */
@layer components {
  #grid {
    position: relative;
    display: grid; gap: 2px;
    grid-template-columns: repeat(11, var(--cell));
  }
  .cell {
    position: relative;
    width: var(--cell); height: var(--cell);
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; user-select: none; cursor: pointer; white-space: nowrap;
  }
  .road     { background: var(--c-road); }
  .building { background: var(--c-building); }
  .building.bldhighlight { background: var(--c-building-hi); }
  .cell.reveal-now { background: var(--c-reveal-now) !important; }

  /* legal move highlight */
  .cell.move-ok    { box-shadow: inset 0 0 0 3px var(--c-ok-green); }
  .cell.move-ok-th { box-shadow: inset 0 0 0 3px var(--c-ok-orange); }

  /* Pieces (centered) */
  .copter, .thief {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: calc(var(--cell) * .45); line-height: 1; z-index: 2;
  }

  /* Copter look (color by border) */
  .copter { background: #fff; border: 2px solid transparent; border-radius: 8px; padding: 0 4px; cursor: pointer; }
  .copter.cop1 { border-color: #EC407A; color: #EC407A; }
  .copter.cop2 { border-color: #FBC02D; color: #FBC02D; }
  .copter.cop3 { border-color: #66BB6A; color: #66BB6A; }
  .copter.used-turn { filter: grayscale(1) brightness(.85); opacity: .9; }
  .copter.selected  { outline: 2px solid #1a73e8; background: rgba(26,115,232,.08); border-radius: 6px; }

  /* Mini chip shown on board when a trace is revealed to police */
  .chipMini {
    display: inline-flex; width: 28px; height: 28px; border-radius: 50%;
    align-items: center; justify-content: center; font-weight: 800;
    background: #fff; border: 2px solid var(--chip-other); color: var(--chip-other);
    line-height: 1;
  }

  /* Sidebar "Trace Tray" */
  .legend {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 8px 10px; border: 1px solid var(--c-ui-border); border-radius: 8px;
    margin-top: auto;
  }
  .legend h4 { margin: 6px 0 8px; width: 100%; text-align: center; }

  .chipTray { display: flex; flex-direction: column; gap: 6px; align-items: center; }
  .chipRow  { display: flex; justify-content: center; align-items: center; gap: 6px; }
  .chipWrap { position: relative; width: 32px; height: 32px; }
  .chipBase, .chipTop {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 800; user-select: none; line-height: 1;
  }
  .chipBase { background: #fff; border: 2px solid #9e9e9e; color: #616161; font-size: 14px; }
  .chipTop  { background: #fff; border: 2px solid #e57373; color: #e53935; font-size: 16px; }
  .chipTop.off { display: none; }

  /* Thief-side numbering / revealed coloring */
  .traceNum { font-weight: 700; color: #222; }
  .traceNum.revealed { color: #1e88e5; }
}

/* ---------- Menus & Overlays -------------------------------------------- */
@layer components {
  /* Heli action menu */
  #heliMenu, #placeMenu { position: absolute; display: none; z-index: var(--z-menu); }
  #heliMenu .menu, #placeMenu .menu {
    display: flex; gap: 8px; align-items: center;
    background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }
  #heliMenu .title, #placeMenu .title { font-weight: 800; margin-right: 4px; }
  #heliMenu .menu button, #placeMenu .menu button {
    padding: 6px 10px; border-radius: 8px; border: 1px solid #bbb; background: #fff; cursor: pointer;
  }
  #heliMenu .menu button:disabled { opacity: .5; cursor: not-allowed; }

  /* Small colored badges used in menus */
  .heliBadge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid; border-radius: 8px;
    padding: 0 6px; font-size: 18px; line-height: 1;
  }
  .heliBadge.cop1 { border-color: #EC407A; color: #EC407A; }
  .heliBadge.cop2 { border-color: #FBC02D; color: #FBC02D; }
  .heliBadge.cop3 { border-color: #66BB6A; color: #66BB6A; }

  /* Win overlay */
  #winOverlay {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); z-index: var(--z-win);
  }
  #winOverlay .banner {
    background: #fff; padding: 24px 32px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 28px; font-weight: 800; text-align: center;
  }
  #winOverlay .actions { margin-top: 12px; display: flex; gap: 12px; justify-content: center; }
  #winOverlay .actions button { font-size: 16px; padding: 10px 16px; border-radius: 10px; }
  #winOverlay .hint { margin-top: 8px; font-size: 12px; color: #666; }

  /* Center overlay (e.g., "あなたのターン") */
  #centerOverlay {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35); z-index: var(--z-center);
  }
  #centerOverlay .card {
    background: #fff; padding: 20px 24px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 20px; font-weight: 800; text-align: center; min-width: 260px;
  }
  #centerOverlay .actions { margin-top: 12px; display: flex; justify-content: center; }
  #centerOverlay .actions button { font-size: 16px; padding: 8px 14px; border-radius: 8px; }

  /* Toast */
  #toast {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    background: #333; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 14px;
    opacity: 0; pointer-events: none; z-index: var(--z-toast);
    transition: opacity .18s ease, transform .18s ease;
  }
  #toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(-8px); }
}

/* ---------- Utilities ---------------------------------------------------- */
@layer utilities {
  /* Hide the old "Turn" badge without touching JS */
  #badgeTurn { display: none !important; }
}

/* ---------- Overrides (keep empty unless necessary) --------------------- */
@layer overrides {
  /* レイアウト芯：左右センター＆縦は上12px。ヘッダー行は使わない */
  .top{ display:none !important; margin:0 !important; padding:0 !important; height:0 !important; }
  .boardWrap{ width:max-content !important; margin:12px auto 0 !important; }

  /* オーバーレイは常に全画面（祖先transformの影響を受けない） */
  #centerOverlay,#winOverlay{ position:fixed !important; inset:0 !important; transform:none !important; z-index:10000 !important; }

  /* 右カラムの基本、犯人には痕跡枠を出さない */
  .side{ gap:10px !important; }
  .side .legend{ margin:0 !important; padding-top:6px; }
  body.thief .side .legend{ display:none !important; }

  /* フェーズ/モードのバッジを右カラム先頭に縦積み（間隔を復活） */
  #sideHeader{
    display:flex; flex-direction:column; gap:8px;
    align-items:stretch; width:100%;
    margin-bottom:2px;
  }
  #sideHeader .badge{ width:100%; text-align:center; }

  /* ステッパー：警察枠の中（手番渡しボタンの直前）/ 犯人ターン非表示 */
  .side #stepper{ position:static !important; margin:0 0 8px 0; }
  .side #stepper .stepper{
    display:flex; gap:6px; align-items:center;
    background:#fff; border:1px solid var(--c-ui-border);
    border-radius:999px; padding:4px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
  }
  .side #stepper .dot{
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--brand-police); font-size:12px; line-height:1; opacity:.35;
  }
  .side #stepper .dot.on{ opacity:1; }
  body.thief #stepper{ display:none !important; }

  /* 痕跡トレイ：右カラムで“縦2列・上詰め・1-5 / 6-11” */
  .side .chipTray{ display:block; column-count:2; column-gap:6px; margin-top:0 !important; }
  .side .chipRow{ display:block; margin:0 0 4px; break-inside:avoid; }
  .side .chipWrap{ display:inline-block; vertical-align:top; }
  .side .chipRow:nth-child(5){ break-after:column; }

  /* 演出：MISS「×」 */
  .cell.reveal-miss::before{
    content:"×"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:calc(var(--cell)*0.6); color:#e53935; opacity:0; transform:scale(.85);
    pointer-events:none; animation:missPulse .28s ease-out forwards;
  }
  @keyframes missPulse{ 0%{opacity:0;transform:scale(.85)} 40%{opacity:1;transform:scale(1.02)} 100%{opacity:0;transform:scale(1.12)} }

  /* 演出：トレイの「!」がスッと消える */
  .chipTop.off.animOut{ display:flex !important; animation:chipOut .25s ease forwards; }
  @keyframes chipOut{ from{transform:translateY(0);opacity:1} to{transform:translateY(-10px);opacity:0} }

  /* 演出：ミニチップ“ポン” */
  .chipMini{ will-change:transform,opacity; }
  .chipMini.trace-pop{ animation: chipPopSnappy .22s cubic-bezier(.2,.9,.25,1.3) both; }
  @keyframes chipPopSnappy{ 0%{transform:scale(.78);opacity:0} 60%{transform:scale(1.16);opacity:1} 82%{transform:scale(.98)} 100%{transform:scale(1)} }

  /* 演出：犯人の薄い軌跡 */
  #trailLayer{ position: absolute; inset:0; pointer-events:none; }
  .trailDot{
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(236,64,122,.65);      /* ← 65 → .65 に修正 */
    transform: translate(-50%,-50%);
    transition: transform .3s ease-out, opacity .35s ease;
    opacity: 1;
  }
  .trailDot.fade{ opacity: 0; }            /* ← 閉じカッコを追加 */

  body{ margin:0 !important; padding-top:12px !important; } /* 上だけ12pxに統一 */
  .top{ display:none !important; height:0 !important; }      /* 古い帯は完全無効化 */
  .boardWrap{ margin-top:0 !important; margin-left:auto !important; margin-right:auto !important; }

  html, body { height: 100%; }                       /* 余白計算の揺れを封じる */
  body{
    margin: 0 !important;
    padding: 12px 0 0 !important;                    /* 上だけ 12px に統一        */
    display: grid !important;                        /* ← ここを親グリッドにする */
    align-content: start !important;                 /* 常に上詰め                */
    justify-items: center !important;                /* 横は中央                   */
  }
  .top{ display: none !important; }                  /* バッジ行は使わない前提     */
  .boardWrap{
    width: max-content !important;
    margin: 0 !important;                            /* 余白は body 側だけで管理   */
  }

  /* 成功公開のやさしい波紋。今ターンに公開されたセルに .reveal-now が付く前提 */
  .cell.reveal-now::after{
    content:""; position:absolute; inset:0; border-radius:4px;
    background: radial-gradient(circle at center, rgba(255,160,0,.35) 0%, rgba(255,160,0,0) 60%);
    transform: scale(.6); opacity: 0; pointer-events:none;
    animation: ccRipple .45s ease-out forwards;
  }
  @keyframes ccRipple{
    0%   { transform: scale(.6);  opacity: 0; }
    30%  { transform: scale(.9);  opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  /* ステッパーの視認性UP：未使用=枠だけ、使用済み=塗り */
  .side #stepper .dot{
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--brand-police);
    background: transparent;           /* 未使用は透明 */
    color: var(--brand-police);
    opacity: .45;
    transition: background-color .15s, color .15s, opacity .15s, border-color .15s;
  }
  .side #stepper .dot.on{
    background: var(--brand-police);   /* 使用済みは塗り */
    color: #fff;
    border-color: var(--brand-police);
    opacity: 1;
  }
  /* 残り表示のラベルを少し強調 */
  .side #stepper .end{
    margin-left: 6px;
    font-size: 12px;
    color: var(--c-text-muted);
  }

  .side #stepper .end.done { color: var(--c-text); font-weight: 600; }

  /* ヘリの状態表現 */
  .copter{
    transition: transform .16s ease, opacity .2s ease, filter .2s ease;
  }
  /* 選択中の“微パルス”。
     既存の選択クラスが .selected / .sel / data-sel など何でも掛かるようにしておく */
  .copter.selected,
  .copter.sel,
  .copter[aria-selected="true"],
  .copter[data-sel="1"]{
    animation: copPulse 1.2s ease-in-out infinite;
  }
  @keyframes copPulse{
    0%   { transform: translate(-50%,-50%) scale(1.00); }
    50%  { transform: translate(-50%,-50%) scale(1.02); }
    100% { transform: translate(-50%,-50%) scale(1.00); }
  }

  /* 今ターン“使用済み”は少しだけ減光（でも見える） */
  .copter.used{
    opacity: .45;
    filter: saturate(.3);
  }

  .thief{ will-change: transform; } /* スライドを滑らかに */

  /* スライド中は盤面の入力を一時停止（誤操作防止） */
  #grid.animating { pointer-events: none; cursor: default; }

  /* 動きに弱い設定のユーザーにはスライドを即時に */
  @media (prefers-reduced-motion: reduce){
    .thief{ transition: none !important; }
  }

  @media (max-width: 900px){
    .boardWrap{ display: grid; gap: 10px; }
    .boardWrap > .side{ order: 2; }
    .boardWrap > #board,
    .boardWrap > #grid{ order: 1; }
    .side{ width: 100% !important; }
  }
  
  #coordLayer{ position:absolute; inset:0; pointer-events:none; }
  #coordLayer .col, #coordLayer .row{
    position:absolute; font-size:12px; color:rgba(0,0,0,.45);
  }
  #coordLayer .col{ top:-18px; transform:translateX(-50%); }  /* 上辺の外に少し出す */
  #coordLayer .row{ left:-22px; transform:translateY(-50%); } /* 左辺の外に少し出す */

  /* ラベルのためのガター（上/左）を確保 */
  #grid {
    padding-top: 14px;   /* ← A〜K が -12px なら +2px くらい余裕を足す */
    padding-left: 24px;  /* ← 1〜11 が -22px なら +2px くらい余裕を足す */
  }
  /* グリッド内に“内側余白”を作って、ラベルがかぶらないようにする */
  #grid{
    padding: 22px 16px 16px 26px !important; /* 上/右/下/左（お好みで微調整） */
    overflow: visible !important;            /* ラベルはみ出し対策 */
  }

  /* ラベルは“負の位置”をやめて、余白内の原点から置く */
  #coordLayer .col{ top: 0 !important; }
  #coordLayer .row{ left: 0 !important; }





}