:root{
  --bg:#0b1210; --felt:#12463a; --felt2:#0e3a30; --line:#1e3b34;
  --ink:#e9f3ee; --muted:#93a8a0; --gold:#e8c46a; --tile:#f7f2e4;
}
*{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{
  background:radial-gradient(1200px 700px at 50% -10%,#17342c,#0a100e 70%),var(--bg);
  color:var(--ink);font-family:"Segoe UI","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
}

/* ---------- tiles ---------- */
.tile{
  position:relative;
  width:46px;height:62px;border-radius:7px;background:linear-gradient(178deg,#fdf9ee,#e8dfcb);
  color:#1d1d1d;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 3px 0 #b9ad92,0 4px 9px rgba(0,0,0,.45);flex:0 0 auto;user-select:none;line-height:1;
  transition:transform .12s,box-shadow .12s;
}
.tile .num{font-size:19px;font-weight:700}
.tile .suit{font-size:10px;font-weight:700;opacity:.85;margin-top:1px}
.tile .hon{font-size:23px;font-weight:700}
.tile[data-suit="0"] .num,.tile[data-suit="0"] .suit{color:#b03a2e}
.tile[data-suit="1"] .num,.tile[data-suit="1"] .suit{color:#1f4e8c}
.tile[data-suit="2"] .num,.tile[data-suit="2"] .suit{color:#1f6b4a}
.tile[data-suit="z"] .hon{color:#222}
.tile.sm{width:19px;height:26px;border-radius:3px;box-shadow:0 1px 0 #b9ad92,0 2px 4px rgba(0,0,0,.4)}
.tile.sm .num{font-size:10px}
.tile.sm .suit{font-size:6px}
.tile.sm .hon{font-size:12px}
.tile.back{background:linear-gradient(160deg,#2b6b57,#123a2e);box-shadow:0 3px 0 #08201a,0 4px 9px rgba(0,0,0,.5)}
.tile.back.sm{box-shadow:0 1px 0 #08201a}
.tile.pick{cursor:pointer}
.tile.pick:hover{transform:translateY(-6px);box-shadow:0 9px 0 #b9ad92,0 14px 18px rgba(0,0,0,.5)}
.tile.active{outline:2px solid var(--gold);outline-offset:2px}
.tile.drawn{margin-left:12px;box-shadow:0 3px 0 #b9ad92,0 0 0 2px var(--gold),0 8px 16px rgba(0,0,0,.5)}
.tile.dim{opacity:.45}
.tile.same-hl{outline:2px solid #3ecf8e !important;outline-offset:2px;box-shadow:0 0 16px rgba(62,207,142,.9),0 3px 0 #b9ad92 !important;z-index:9}

/* ---------- lobby ---------- */
.lobby{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px}
.lobby h1{font-size:30px;margin:0;letter-spacing:.02em}
.lobby .sub{color:var(--muted);margin:0 0 12px;font-size:13px}
.card{background:#0f1c18;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;width:min(420px,92vw);display:flex;flex-direction:column;gap:8px}
.card label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
input{background:#0a1512;border:1px solid #22463c;color:var(--ink);border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;width:100%}
input:focus{outline:none;border-color:#3d8f74}
button{
  font:inherit;font-size:13px;color:var(--ink);background:#16261f;border:1px solid #28483d;
  padding:9px 14px;border-radius:9px;cursor:pointer;transition:.15s;
}
button:hover:not(:disabled){background:#1d342b;border-color:#35604f}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:linear-gradient(160deg,#2f8062,#1c5340);border-color:#3b9a76}
button.primary:hover:not(:disabled){background:linear-gradient(160deg,#37926f,#215f49)}
.seg{display:flex;gap:6px}
.seg button{flex:1}
.seg button.on{background:#25674e;border-color:#43a981;color:#eafff5}
.joinRow{display:flex;gap:6px;margin-top:4px}
.joinRow input{flex:1;text-transform:uppercase;letter-spacing:.3em;text-align:center}
.hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(420px,92vw);margin:10px 0}
.seatCard{background:#0f1c18;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.seatCard span{font-size:11px;color:var(--muted)}
.seatCard.bot{border-style:dashed}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#3a1b18;border:1px solid #7a3b33;
  color:#ffd9d1;padding:10px 16px;border-radius:10px;font-size:13px;z-index:50}

/* ---------- game ---------- */
.game{height:100vh;display:flex;flex-direction:column;padding:10px 14px 14px;gap:8px;overflow:hidden}
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.roundInfo{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:#12241e;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:#bcd3c9}
.pill.gold{color:var(--gold);border-color:#4a3f22}
.pill.furiten{background:#631818;border-color:#b53a3a;color:#ffd9d1;font-weight:700;animation:pulseFuriten 2s infinite ease-in-out}
@keyframes pulseFuriten{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(1.03)}}
button.soundToggle{background:#14231d;border:1px solid #2b4f43;color:#9dc0b2;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;transition:.15s}
button.soundToggle:hover{background:#1d352c;border-color:#3d7261}
button.soundToggle.on{color:#5fd1a8;border-color:#3b9a76}
.dora{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-left:auto}
.roomTag{font-size:12px;color:var(--muted);letter-spacing:.12em}

.tableArea{
  flex:1;min-height:0;display:grid;grid-template-columns:248px minmax(0,1fr) 248px;
  grid-template-rows:auto 1fr;grid-template-areas:"left top right" "left core right";gap:10px;align-items:start;
  background:
    radial-gradient(closest-side,rgba(255,255,255,.04),transparent) , linear-gradient(180deg,var(--felt),var(--felt2));
  border:1px solid #1b4b3d;border-radius:18px;padding:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.45);
}
.sideCol{grid-area:left;align-self:center}
.sideCol.right{grid-area:right;align-self:center}
.topRow{grid-area:top;min-width:0}
.coreWrap{grid-area:core;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-height:0}
/* 自己的牌河放在中央事件卡下面（貼近實體：自己的牌河在面前） */
.myRiverWrap{display:flex;flex-direction:column;gap:4px;align-items:center;width:min(720px,68vw);min-width:0}
.selfTop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.selfLeft{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.selfLeft .meldZone{align-self:flex-start}
.myRiver{width:100%;max-height:64px;justify-content:center;flex-wrap:wrap}

.seat{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 9px;display:flex;flex-direction:column;gap:6px}
.seat.active{border-color:#5fd1a8;box-shadow:0 0 0 1px rgba(95,209,168,.35),0 0 22px rgba(95,209,168,.18)}
.seatHead{display:flex;align-items:center;gap:6px;font-size:12px}
.seatHead .wind{background:#1d3b32;color:#cfe9df;border-radius:6px;padding:1px 6px;font-size:11px}
.seatHead .name{font-weight:600}
.seatHead .score{margin-left:auto;font-variant-numeric:tabular-nums;color:#cfe6dc}
.tag{font-size:9.5px;background:#243b33;color:#9dc0b2;border-radius:999px;padding:1px 6px;letter-spacing:.05em}
.tag.riichi{background:#6d1f1f;color:#ffd9cf}
.tag.off{background:#3a3a3a;color:#bbb}
.seatBody{display:flex;flex-direction:column;gap:5px}
.melds{min-height:0}
.meld{display:flex;gap:2px;background:rgba(255,255,255,.06);border-radius:5px;padding:2px}
.discards{display:flex;flex-wrap:wrap;gap:2px;max-height:88px;overflow:hidden}
.center{display:grid;place-items:center;padding:6px 0}
.core{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px 34px;min-width:260px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.coreEvent{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#eafff5;line-height:1.3}
.coreFoot{display:flex;align-items:center;gap:14px;margin-top:2px}
.coreRemain{font-size:11.5px;color:var(--muted);white-space:nowrap}
.coreDora{display:flex;align-items:center;gap:5px;font-size:10px;color:#8fb3a4;margin-top:2px}
.coreLabel{font-size:10px;letter-spacing:.16em;color:#8fb3a4}
.coreValue{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.coreSub{font-size:10px;color:#8fb3a4}
.lastTile{display:flex;align-items:center;gap:6px;font-size:10px;color:#8fb3a4;margin-top:6px}

.selfHead{display:flex;align-items:center;gap:8px;font-size:12px}
.selfHead .wind{background:#1d3b32;color:#cfe9df;border-radius:6px;padding:1px 6px;font-size:11px}
.selfHead .name{font-weight:700;font-size:13px}
.selfHead .score{margin-left:6px;color:#cfe6dc;font-variant-numeric:tabular-nums}
.myRiverLabel{font-size:10px;color:#7f978c;letter-spacing:.08em}
.myRiver{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;max-width:min(880px,82%);max-height:70px;overflow:hidden}
.myRiver .tile.sm{width:25px;height:34px;border-radius:4px}
.myRiver .tile.sm .num{font-size:13px}
.myRiver .tile.sm .suit{font-size:7px}
.myRiver .tile.sm .hon{font-size:16px}
.selfArea{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.selfArea .seat{background:transparent;border:none;padding:0}
.handRow{display:flex;gap:4px;flex-wrap:nowrap;align-items:flex-end;justify-content:center;min-height:66px;overflow-x:auto}
.myMelds{display:flex;gap:6px;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:38px}
.actions button.big{font-size:15px;padding:10px 22px;font-weight:700}
.actions button.riichi{background:#5c1f1f;border-color:#a45353;color:#ffd9d1}
.actions button.riichi.on{background:#a03a3a;border-color:#e08a8a}
.actions button.ghost{background:transparent}
.waiting{font-size:12.5px;color:#8fb3a4}

.logBox div{background:rgba(0,0,0,.35);border-radius:6px;padding:3px 7px;backdrop-filter:blur(2px)}

/* ---------- result ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,10,8,.78);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:40}
.resultCard{background:linear-gradient(180deg,#12241e,#0c1a16);border:1px solid #2b4f43;border-radius:18px;padding:22px;width:min(460px,92vw);display:flex;flex-direction:column;gap:10px}
.resultCard h2{margin:0;font-size:22px;color:var(--gold)}
.resultCard .sub{color:#a9c4b8;font-size:13px;margin-top:-4px}
.yaku{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.yaku li{display:flex;justify-content:space-between;font-size:12.5px;color:#b7d2c7;border-bottom:1px dashed rgba(255,255,255,.08);padding-bottom:3px}
.yaku li b{color:#fff}
.deltas{display:flex;flex-direction:column;gap:3px;font-size:12px;margin-top:4px}
.deltas div{display:grid;grid-template-columns:1fr 64px 70px;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.deltas .up b{color:#6fe0b0}
.deltas .down b{color:#ff9c8a}
.deltas em{font-style:normal;text-align:right;color:#93a8a0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.tight{gap:2px}

@media (max-width:820px){
  .tableArea{grid-template-columns:1fr}
  .logBox{display:none}
}

.roomTag{display:flex;align-items:center;gap:8px}
button.mini{font-size:11px;padding:4px 9px;border-radius:999px;background:#16261f;border-color:#2c4f42}
.takeUrl{background:#0a1512;border:1px dashed #35604f;border-radius:9px;padding:10px 12px;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#9fe0c4;word-break:break-all}

/* ---------- 實體機 Flow Simulation ---------- */
.viewSwitch{display:flex;gap:4px;background:#12241e;border:1px solid #28483d;border-radius:999px;padding:2px}
.viewSwitch button{border:none;background:transparent;font-size:11.5px;padding:5px 12px;border-radius:999px;color:#9dc0b2}
.viewSwitch button.on{background:#2f8062;color:#eafff5}

.consoleView{height:100vh;display:flex;flex-direction:column;gap:10px;padding:12px 16px 14px;overflow:hidden}
.cvTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cvTop h2{font-size:18px;margin:0}
.cvTop p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.cvTopRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cvCount{font-size:12px;color:#bcd3c9}
.cvCount b{color:#eafff5;font-size:15px;font-variant-numeric:tabular-nums}
.cvWarn{font-size:11px;color:#ffb4a3;border:1px solid #7a3b33;border-radius:999px;padding:3px 8px}

.cvFlow{display:flex;align-items:center;gap:10px;background:#12241e;border:1px solid #2b4f43;border-radius:12px;padding:10px 14px;font-size:12.5px;color:#c9ded4}
.cvFlow b{color:#fff;font-size:13.5px}
.cvStep{background:#2f8062;color:#eafff5;border-radius:6px;padding:2px 8px;font-size:11px}

.cvBody{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:12px;align-items:start;padding-right:2px}
@media (max-width:1160px){.cvBody{grid-template-columns:1fr}}

/* ---------- 實體機 7 大分區 Chassis Layout ---------- */
.consoleChassis{display:flex;flex-direction:column;gap:10px;background:#0d1814;border:2px solid #1c3c32;border-radius:18px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(0,0,0,.5);min-width:0}

/* Region 3: Yellow Region (Game Info Screen & Phone Stand) */
.regionYellow{background:linear-gradient(180deg,#121e1a,#09120f);border:1px solid #3c3b1e;border-radius:14px;padding:9px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 0 20px rgba(0,0,0,.55)}
.phoneStandNotch{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(232,196,106,.2);padding-bottom:5px;font-size:11px;color:#dec77d}
.phoneStandNotch .notchLabel{display:flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.03em}
.yellowScreenHeader{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px}
.screenPill{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:2px 8px;font-size:11px;color:#bcd3c9}
.screenPill.gold{color:var(--gold);border-color:#4a3f22}
.screenPill.furiten{background:#631818;border-color:#b53a3a;color:#ffd9d1;font-weight:700;animation:pulseFuriten 2s infinite ease-in-out}
.screenDora{display:flex;align-items:center;gap:5px;font-size:11px;color:#8fb3a4;margin-left:auto}

.yellowScreenGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:760px){.yellowScreenGrid{grid-template-columns:1fr}}
.oppScreenCard{background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;gap:5px;min-height:92px}
.oppScreenCard.activeTurn{border-color:#5fd1a8;box-shadow:0 0 10px rgba(95,209,168,.25)}
.oppScreenHead{display:flex;align-items:center;gap:5px;font-size:11px}
.oppScreenHead .wind{background:#1a382e;color:#cfe8dd;border-radius:4px;padding:1px 5px;font-size:10px}
.oppScreenHead .name{font-weight:600;color:#e8f4ee;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oppScreenHead .roleTag{font-size:9.5px;color:#8aa69a;background:rgba(255,255,255,.05);padding:1px 4px;border-radius:4px}
.oppScreenHead .score{margin-left:auto;font-variant-numeric:tabular-nums;color:#cfe6dc}
.oppScreenMelds{display:flex;gap:3px;flex-wrap:wrap;min-height:0}
.oppScreenRiver{flex:1;min-height:36px;overflow:hidden}
.oppScreenRiver .discards{max-height:56px}

/* Middle Deck: Grey (Sorting) + Purple (Draw) + Green (Belt) + Red (X Slot & Keys) */
.consoleMidDeck{display:grid;grid-template-columns:220px minmax(0,1fr) 210px;gap:10px;align-items:stretch}
@media (max-width:1040px){.consoleMidDeck{grid-template-columns:1fr}}

.greyAndPurpleCol{display:flex;flex-direction:column;gap:8px}
.regionGrey{background:rgba(120,130,140,.10);border:1px solid rgba(140,150,160,.32);border-radius:12px;padding:7px 9px}
.regionHeader{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;color:#8fa89e;margin-bottom:6px}
.regionHeader b{color:#d5e6df;font-size:11px}
.regionHeader em{font-style:normal;color:#7f978c}
.sorterBay{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22);border-radius:8px;padding:6px 8px}
.sorterIcon{font-size:18px;animation:spinSorter 8s linear infinite}
@keyframes spinSorter{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.sorterDesc{display:flex;flex-direction:column;font-size:11px;color:#b2c5bc}
.sorterDesc small{font-size:9.5px;color:#788f85}

.regionPurple{background:rgba(139,108,240,.11);border:1px solid rgba(139,108,240,.38);border-radius:12px;padding:7px 9px;flex:1;display:flex;flex-direction:column}
.purpleChute{flex:1;min-height:76px;display:flex;gap:8px;align-items:center;justify-content:center;background:rgba(0,0,0,.22);border:1px dashed rgba(139,108,240,.35);border-radius:8px;padding:6px}
.emptyChute{font-size:11px;color:#8f85b8;text-align:center}

/* Green Conveyor Belt */
.regionGreen{background:rgba(47,160,106,.09);border:1px solid rgba(47,160,106,.38);border-radius:12px;padding:7px 9px;display:flex;flex-direction:column}
.beltFlowHint{font-size:10px;color:#5fd1a8;letter-spacing:.02em}
.conveyorBeltLane{flex:1;min-height:96px;background:repeating-linear-gradient(-45deg,#0e261f,#0e261f 14px,#091c16 14px,#091c16 28px);border:1px solid #1a4235;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:8px;position:relative;overflow:hidden}
.beltTrackMarks{position:absolute;inset:0;opacity:.15;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 50%,transparent);animation:beltMove 2.5s linear infinite}
@keyframes beltMove{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.beltTilesWrap{position:relative;z-index:2;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.beltEmptyText{font-size:11px;color:#6d9484;text-align:center}

/* Red Region: Live Discard "X" Slot & Physical Keys */
.regionRed{background:rgba(224,85,69,.09);border:1px solid rgba(224,85,69,.35);border-radius:12px;padding:7px 9px;display:flex;flex-direction:column;gap:6px}
.xSlotBay{display:flex;flex-direction:column;align-items:center;gap:3px}
.xSlotFrame{position:relative;width:64px;height:82px;display:grid;place-items:center;border:1px dashed rgba(224,85,69,.5);border-radius:9px;background:rgba(0,0,0,.28)}
.xLetter{position:absolute;font-size:42px;font-weight:900;color:rgba(224,85,69,.22);pointer-events:none}
.xWait{font-size:10px;color:#b37d77;text-align:center;padding:0 4px}
.xSlotSub{font-size:10px;color:#bfa09c;text-align:center}

.physicalButtonsContainer{display:flex;flex-direction:column;gap:5px}
.buttonGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.physBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 4px;border-radius:8px;background:#15221d;border:1px solid #274238;color:#7e978e;cursor:not-allowed;opacity:.5;transition:.15s}
.physBtn .btnKey{font-size:14px;font-weight:800;font-family:ui-monospace,monospace;line-height:1}
.physBtn .btnTxt{font-size:10px;margin-top:2px}
.physBtn.lit{opacity:1;cursor:pointer;transform:translateY(-1px)}
.physBtn.lit-pon{background:#29200b;border-color:#d69e2e;color:#fbd38d;box-shadow:0 0 12px rgba(214,158,46,.45)}
.physBtn.lit-chi{background:#0e2920;border-color:#38a169;color:#9ae6b4;box-shadow:0 0 12px rgba(56,161,105,.45)}
.physBtn.lit-kan{background:#21172b;border-color:#805ad5;color:#d6bcfa;box-shadow:0 0 12px rgba(128,90,213,.45)}
.physBtn.lit-win{background:#381313;border-color:#e53e3e;color:#feb2b2;box-shadow:0 0 16px rgba(229,62,62,.75);animation:pulseWin 1.2s infinite alternate}
@keyframes pulseWin{0%{transform:scale(1);box-shadow:0 0 10px rgba(229,62,62,.5)}100%{transform:scale(1.03);box-shadow:0 0 18px rgba(229,62,62,.9)}}
.subChoiceTray{display:flex;flex-direction:column;gap:3px;background:rgba(0,0,0,.35);padding:5px;border-radius:6px;font-size:10px;color:#bcd3c9}
.subChoiceBtn{background:#18362b;border:1px solid #3d8067;color:#eafff5;padding:4px 6px;border-radius:5px;font-size:10.5px;cursor:pointer}
.subChoiceBtn:hover{background:#234e3e}
.passBtn{background:transparent;border:1px solid #364841;color:#8ca69c;font-size:11px;padding:5px;border-radius:6px;cursor:pointer;width:100%}
.passBtn:hover{background:#1b2a24;color:#cfe2d8}
.riichiBtn{background:#541d1d;border:1px solid #9c4141;color:#ffcec4;font-size:11px;padding:5px;border-radius:6px;cursor:pointer;width:100%}
.riichiBtn.on{background:#8c2929;border-color:#d45d5d}

/* Bottom Deck: Blue (Melds) & Orange (Hand) */
.consoleBottomDeck{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:10px}
@media (max-width:900px){.consoleBottomDeck{grid-template-columns:1fr}}
.regionBlue{background:rgba(59,125,216,.11);border:1px solid rgba(59,125,216,.38);border-radius:12px;padding:7px 10px;display:flex;flex-direction:column}
.meldSlotsTray{flex:1;min-height:76px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:rgba(0,0,0,.2);border-radius:8px;padding:6px}
.emptyTrayText{font-size:11px;color:#7d96b8;margin:auto}

.regionOrange{background:rgba(224,139,47,.09);border:1px solid rgba(224,139,47,.36);border-radius:12px;padding:7px 10px;display:flex;flex-direction:column}
.handRack{flex:1;min-height:76px;display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:nowrap;overflow-x:auto;background:rgba(0,0,0,.2);border-radius:8px;padding:6px 8px}

/* Smart Tile Bay */
.smartTileBar{background:#0a1411;border:1px solid #1a382e;border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.smartTileBarHead{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#8fa89e}
.smartTileBarHead b{color:#cce2d7}
.smartCountInfo b{color:#5fd1a8;font-size:12px}
.smartTileChips{display:flex;flex-wrap:wrap;gap:4px}
.smartChip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;background:#12211c;border:1px solid #234338;color:#9ebbb0;font-size:10.5px;cursor:pointer;font-family:ui-monospace,monospace}
.smartChip:hover,.smartChip.sel{background:#1d392f;border-color:#489c7d;color:#eafff5}
.smartChip .cId{font-weight:700}
.smartChip .cFace{color:#dfede7}

.cvAlertBanner{background:#3b1c19;border:1px solid #7d3e36;color:#ffd9d2;border-radius:8px;padding:6px 10px;font-size:11.5px;margin-bottom:6px;animation:fadeAlert .2s ease-in}
@keyframes fadeAlert{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.tile.big{width:54px;height:72px;border-radius:9px}
.tile.big .num{font-size:23px}
.tile.big .suit{font-size:11px}
.tile.big .hon{font-size:27px}
.tile.led-white{outline:2px solid #eef4f8;outline-offset:2px;box-shadow:0 0 16px rgba(238,244,248,.55),0 3px 0 #b9ad92}
.tile.led-green{outline:2px solid rgba(62,207,142,.8);outline-offset:2px;box-shadow:0 0 9px rgba(62,207,142,.28),0 3px 0 #b9ad92}
.tile.led-yellow{outline:2px solid #f2c14e;outline-offset:2px;box-shadow:0 0 16px rgba(242,193,78,.6),0 3px 0 #b9ad92}
.tile.led-red{outline:2px solid #ff5c4d;outline-offset:2px;box-shadow:0 0 18px rgba(255,92,77,.75),0 3px 0 #b9ad92}
.tile.led-off{outline:2px dashed #3a4a44;outline-offset:2px;opacity:.5;box-shadow:0 3px 0 #b9ad92}

.cvBottom{display:flex;flex-direction:column;gap:8px;border-top:1px dashed rgba(255,255,255,.1);padding-top:10px}
.cvActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:36px}
.cvActions button.big{font-size:15px;padding:10px 22px;font-weight:700}
.cvLegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:#9dc0b2}
.cvLegend span{display:flex;align-items:center;gap:5px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.l-green{background:#3ecf8e;color:#3ecf8e}
.l-white{background:#eef4f8;color:#eef4f8}
.l-yellow{background:#f2c14e;color:#f2c14e}
.l-red{background:#ff5c4d;color:#ff5c4d}
.l-off{background:#3a4a44;color:#3a4a44;box-shadow:none}
.cvHint{font-size:11px;color:#7f978c}

.cvBody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;align-items:start}
@media (max-width:1000px){.cvBody{grid-template-columns:1fr}}
.cvZones{display:flex;flex-direction:column;gap:8px;min-width:0}
.cvSide{display:flex;flex-direction:column;gap:8px;position:sticky;top:0}
.cvSideCard{background:#0f1c18;border:1px solid #24463c;border-radius:12px;padding:10px 12px}
.cvSideCard h4{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8fb3a4;margin:0 0 8px}
.cvSteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cvSteps li{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:#8aa69a;line-height:1.45}
.cvSteps li b{flex:0 0 18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:#1b3a30;color:#9dc0b2}
.cvSteps li.done{color:#6f9a89}
.cvSteps li.done b{background:#2f8062;color:#eafff5}
.cvSteps li.on{color:#eafff5;font-weight:600}
.cvSteps li.on b{background:#3ecf8e;color:#0b1210}
.cvLegendCol{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:#b7d2c7}
.cvLegendCol span{display:flex;align-items:center;gap:7px}
.cvKV{display:flex;justify-content:space-between;font-size:11.5px;color:#9dc0b2;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.cvKV b{color:#eafff5;font-weight:600}

.tile.empty{background:linear-gradient(160deg,#1a2a24,#101c18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);opacity:.75}
.tile.empty::after{content:"";width:38%;height:38%;border-radius:50%;background:rgba(255,255,255,.05)}
.cvEmpty{font-size:11.5px;color:#6f8a7d;padding:6px 2px}
.cvBody{flex:1 1 auto;min-height:0}

.tid{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:10.5px;line-height:1;font-weight:600;
  font-family:ui-monospace,Consolas,monospace;color:rgba(15,15,15,.62);letter-spacing:.02em;pointer-events:none}
.tile.led-off .tid,.tile.empty .tid{color:rgba(200,230,215,.45)}
.tile.sm .tid{font-size:7px;bottom:1px}

.cvTopRight button.on{background:#2f8062;border-color:#43a981;color:#eafff5}
.cvInspect{background:#2a2418;border:1px solid #6b5a2a;color:#f0dcae;border-radius:10px;padding:8px 12px;font-size:12px}
.tlPanel{position:fixed;right:14px;top:90px;bottom:90px;width:330px;background:linear-gradient(180deg,#101d19,#0b1512);
  border:1px solid #2b4f43;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;z-index:30}
.tlHead{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid #1e3a31}
.tlHead b{font-size:13.5px;color:#eafff5}
.tlNow{font-size:11px;color:#8fb3a4;margin-left:auto;margin-right:6px;text-align:right}
.tlClose{background:transparent;border:none;color:#8fb3a4;font-size:18px;line-height:1;padding:0 4px;cursor:pointer}
.tlList{flex:1;overflow:auto;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.tlRow{display:grid;grid-template-columns:38px 82px 52px 12px 10px;align-items:center;gap:6px;font-size:11.5px;padding:4px 2px;border-bottom:1px dashed rgba(255,255,255,.05)}
.tlTime{color:#7f978c;font-family:ui-monospace,Consolas,monospace;font-size:10.5px}
.tlZone{font-size:10px;border-radius:5px;padding:2px 5px;text-align:center;color:#cfe8dd;background:#1b3a30}
.tlZone.z-staging{background:rgba(139,108,240,.28)}
.tlZone.z-hand{background:rgba(224,139,47,.25)}
.tlZone.z-meld{background:rgba(59,125,216,.25)}
.tlZone.z-belt{background:rgba(47,160,106,.28)}
.tlZone.z-xslot{background:rgba(224,85,69,.25)}
.tlZone.z-idle{background:rgba(106,118,134,.22);color:#93a8a0}
.tlKind{color:#e6f2ec;font-size:11.5px}
.tlFace{color:#f2c14e;font-size:11px}
.tlFoot{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid #1e3a31;font-size:11px;color:#8fb3a4}

.countdown{display:flex;align-items:center;gap:7px;font-size:12px;color:#bcd3c9;font-variant-numeric:tabular-nums;margin-right:6px}
.countdown .cdBar{display:block;width:88px;height:5px;border-radius:3px;background:#17342c;overflow:hidden}
.countdown .cdBar i{display:block;height:100%;background:#3ecf8e;transition:width .25s linear}
.countdown.warn .cdBar i{background:#ff7a5c}
.countdown.warn{color:#ff9d90}
.countdown.compact{font-size:10.5px;gap:4px;margin-right:0}
.countdown.compact .cdBar{width:34px;height:4px}

.cvFlowCd{margin-left:auto}

.replayBar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:9px 14px;background:rgba(10,20,16,.94);border-top:1px solid #2b4f43;z-index:40;backdrop-filter:blur(6px)}
.replayBar button{font-size:12px;padding:6px 11px}
.replayBar input[type=range]{flex:1;accent-color:#3ecf8e;min-width:120px}
.replayBar select{background:#14211c;color:#cfe8dd;border:1px solid #2b4f43;border-radius:8px;padding:6px 8px;font-size:12px}
.replayCount{font-size:12px;color:#9dc0b2;font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.replayAction{font-size:12px;color:#eafff5;min-width:180px}
.replayId{font-size:11px;color:#6f8a7d;font-family:ui-monospace,monospace}

.replayDrop{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:10px;padding:12px;
  border:1px dashed #2b4f43;border-radius:12px;background:rgba(47,160,106,.05)}
.replayDrop span{font-size:11px;color:#7f978c}
.fileBtn{display:inline-block;font-size:12.5px;color:#eafff5;background:#16261f;border:1px solid #28483d;
  padding:8px 14px;border-radius:9px;cursor:pointer;transition:.15s}
.fileBtn:hover{background:#1d342b;border-color:#35604f}
.fileBtn input{display:none}

.handTabs{position:fixed;left:14px;bottom:58px;display:flex;gap:6px;z-index:41;flex-wrap:wrap;max-width:72vw}
.handTabs button{font-size:11.5px;padding:5px 10px;border-radius:999px;background:#14211c;border:1px solid #2b4f43;
  color:#9dc0b2;display:flex;gap:6px;align-items:center;cursor:pointer}
.handTabs button.on{background:#2f8062;color:#eafff5;border-color:#43a981}
.handTabs em{font-style:normal;font-size:10px;opacity:.75}
.replayBar button:disabled{opacity:.35;cursor:not-allowed}

/* ---------- 狀態條（連線／Phase／錯誤歷史） ---------- */
.statusBar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;
  padding:5px 10px;font-size:12px;background:rgba(9,17,15,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.statusBar.ok .sbDot{background:#3fbf6f;box-shadow:0 0 8px #3fbf6f}
.statusBar.wait .sbDot{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.statusBar.bad .sbDot{background:#e2574c;box-shadow:0 0 8px #e2574c}
.sbDot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.sbConn{white-space:nowrap}
.sbPhase{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.sbSpacer{flex:1}
.sbBtn{background:#14261f;border:1px solid var(--line);color:var(--ink);font-size:11px;padding:2px 8px;border-radius:6px;cursor:pointer}
.sbBtn.has{border-color:#e2574c;color:#ffb4ac}
.sbErrors{position:absolute;right:10px;top:34px;width:min(460px,86vw);background:#0d1a16;border:1px solid var(--line);border-radius:10px;padding:8px;max-height:46vh;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.sbErr{display:flex;gap:8px;font-size:11.5px;padding:3px 0;border-bottom:1px dashed #1b322b}
.sbErr b{font-weight:500;color:#ffd7d1}
.sbErr span{color:var(--muted);flex:0 0 auto}
.sbEmpty{color:var(--muted);font-size:12px;padding:6px}

/* ---------- ErrorBoundary ---------- */
.crash{min-height:100vh;display:grid;place-items:center;padding:24px}
.crashCard{max-width:720px;background:#101d19;border:1px solid #3a2a26;border-radius:14px;padding:22px}
.crashMsg{color:#ffb4ac;font-family:ui-monospace,monospace;font-size:13px}
.crashHint{color:var(--muted);font-size:13px;line-height:1.7}
.crashStack{background:#0a1411;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:11px;color:#9fb6ad;max-height:200px;overflow:auto;white-space:pre-wrap}

/* ---------- 黃區結算卡 ---------- */
.yellowResult{margin:8px 0}
.resultCard.inYellow{background:linear-gradient(180deg,#15271f,#0e1c17);border:1px solid #2b4a3d;box-shadow:none;max-width:none;padding:12px}
.rcHead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rcHead h2{margin:0;font-size:18px}
.rcLabel{color:var(--gold);font-size:13px}
.rcHand{display:flex;gap:2px;flex-wrap:wrap;margin:8px 0}
.rcYaku{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px}
.rcYaku li{display:flex;justify-content:space-between;font-size:12.5px;border-bottom:1px dashed #1e3b34;padding:2px 0}
.rcYaku b{color:var(--gold)}
.rcDeltas{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin:10px 0}
.rcDeltas>div{background:#0d1a15;border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.rcDeltas .up{border-color:#2f6b4f}.rcDeltas .down{border-color:#6b2f2f}
.rcDeltas .up b{color:#7fe0a6}.rcDeltas .down b{color:#ff9c92}
.rcDeltas b{font-size:15px}.rcDeltas em{color:var(--muted);font-style:normal;font-size:11.5px}
.rcName{font-size:12px}
.rcActions{margin-top:8px}

/* ---------- 鳴牌 3 步 ---------- */
.meldFlow{display:flex;align-items:center;gap:10px;margin:6px 10px 10px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(90deg,#1b2f26,#14241d);border:1px solid #2f5a45}
.mfTag{background:#2f5a45;color:#d7f5e4;font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.mfBody{display:flex;flex-direction:column;gap:2px;font-size:12.5px;min-width:0}
.mfBody b{color:#cfeadd}.mfBody span{color:var(--muted)}
.mfNext{margin-left:auto;background:#2f5a45;border:1px solid #3f7a5c;color:#e9f3ee;padding:5px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}

/* ---------- 手冊 4 phase 步驟條 ---------- */
.cvSteps.four li{flex:1}
.cvPhaseHint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}

/* ---------- 60 秒導覽 ---------- */
.guideMask{position:fixed;inset:0;background:rgba(4,9,8,.78);z-index:80;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.guideCard{width:min(980px,96vw);max-height:88vh;overflow:auto;background:#0f1d18;border:1px solid #27473a;border-radius:16px;padding:20px 22px}
.guideHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.guideHead h2{margin:0 0 4px;font-size:20px}
.guideHead p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.guideClose{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;width:30px;height:30px;cursor:pointer}
.guideCard h3{font-size:14px;margin:16px 0 8px;color:#cfeadd}
.guideRegions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.guideRegion{display:flex;gap:10px;background:#0c1814;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.guideRegion i{width:10px;border-radius:3px;flex:0 0 auto}
.guideRegion b{display:block;font-size:12.5px;margin-bottom:2px}
.guideRegion span{color:var(--muted);font-size:12px;line-height:1.55}
.guideLeds{width:100%;border-collapse:collapse;font-size:12.5px}
.guideLeds td{padding:5px 8px;border-bottom:1px dashed #1e3b34;vertical-align:top}
.guideLeds td:first-child{white-space:nowrap;width:170px}
.guideLeds .dot{margin-right:6px}
.guidePhases{margin:0;padding-left:20px;font-size:12.5px;line-height:1.7}
.guidePhases b{margin-right:8px}
.guidePhases span{color:var(--muted)}
.guideFoot{margin-top:16px}

/* ---------- 牌桌：手冊 4 phase 指引（預設視圖也要看得到流程） ---------- */
.tablePhaseHint{display:flex;align-items:baseline;gap:10px;margin:0 12px 6px;padding:6px 12px;
  background:#0f1d18;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.tablePhaseHint b{color:#cfeadd;white-space:nowrap}
.tablePhaseHint span{color:var(--muted)}

/* 狀態條會佔 26px；主體改成 flex 欄，避免 100vh + 26px 被推出畫面 */
.appCol{height:100vh;display:flex;flex-direction:column;min-height:0}
.appCol > .consoleView{flex:1;min-height:0;height:auto}

/* 結算 overlay 要蓋過狀態條（z-index 40），但不能蓋過導覽（80） */
.overlay{z-index:60}
.tableMeldFlow{margin:0 12px 6px}

/* ---------- 主頁三分流（開房／進房／回放） ---------- */
.menuCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;width:min(780px,92vw);margin:6px auto 0}
.menuCard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:18px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(180deg,#12211b,#0e1a16);color:var(--ink);
  cursor:pointer;text-align:left;transition:transform .12s,border-color .12s}
.menuCard:hover{transform:translateY(-2px);border-color:#3f7a5c}
.menuCard b{font-size:17px}
.menuCard span{color:var(--muted);font-size:12.5px;line-height:1.5}
.menuCard:disabled{opacity:.45;cursor:not-allowed;transform:none}
.lobby .card h2{font-size:16px;margin:0 0 10px}
.lobby .card .row{align-items:center}
.roomCode{display:flex;align-items:center;gap:12px;margin:4px 0 16px;padding:10px 18px;border:1px dashed #3f7a5c;
  border-radius:12px;background:#0f1d18}
.roomCode span{font-size:30px;letter-spacing:.22em;font-weight:700;color:var(--gold)}
.copyBtn{background:#2f5a45;border:1px solid #3f7a5c;color:#e9f3ee;padding:5px 12px;border-radius:8px;cursor:pointer;font-size:12px}
.seatCard.me{border-color:#3f7a5c;background:#12211b}

/* ---------- 副露區 / 牌海：讓「碰吃槓」與「打出去的牌」分得開 ---------- */
.seatZone{position:relative;border-radius:7px;padding:3px 5px 4px;display:flex;flex-direction:column;gap:3px}
.seatZone .zoneTag{font-size:9px;letter-spacing:.1em;color:#8fb7a8;opacity:.9;line-height:1}
.seatZone .zoneTag b{font-weight:600;color:#cfe9df}
/* 手冊 Blue 區＝副露（吃碰槓組成的一組） */
.meldZone{background:rgba(74,134,232,.16);border:1px solid rgba(74,134,232,.45);align-self:flex-start;max-width:100%}
.meldZone .zoneTag{color:#a8c6ff}
.meldZone .meld{background:rgba(255,255,255,.09)}
/* 河＝內凹的深色底，和手牌/副露分開 */
.riverZone{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
/* 牌太多時可捲動（原本 overflow:hidden 會讓第 5 行以後直接消失） */
.discards{max-height:96px;overflow-y:auto;scrollbar-width:thin}
.discards::-webkit-scrollbar{width:6px}
.discards::-webkit-scrollbar-thumb{background:#2b4a3d;border-radius:3px}

/* 硬體模擬的對手卡也套同一組語義 */
.oppScreenMelds{background:rgba(74,134,232,.14);border:1px solid rgba(74,134,232,.4);border-radius:6px;padding:2px 4px}
.oppScreenRiver{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:2px}
.oppScreenRiver{overflow-y:auto;scrollbar-width:thin}

/* ---------- 紫色暫存佇列（4 秒 FIFO 模擬） ---------- */
.stagingQueue{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:6px 8px;border-radius:8px;
  background:rgba(155,107,255,.1);border:1px solid rgba(155,107,255,.35)}
.sqTag{font-size:10.5px;letter-spacing:.04em;color:#c9b6ff}
.sqTiles{display:flex;gap:3px;flex-wrap:wrap;min-height:20px;align-items:center}
.sqTile{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:20px;padding:0 4px;
  border-radius:4px;background:rgba(255,255,255,.9);color:#1d1d1d;font-size:10.5px;font-weight:600}
.sqTile.sorting{background:rgba(242,193,78,.85);color:#2a2100}
.sqTile.head{outline:2px solid #3ecf8e;outline-offset:1px}
.sqEmpty{color:#7f978c;font-size:11px}
.sqNote{font-size:9.5px;color:#8aa69a}

/* 鳴牌流程的「上一步」 */
.mfPrev{margin-left:auto;background:#14261f;border:1px solid var(--line);color:#cfe9df;padding:5px 10px;
  border-radius:8px;cursor:pointer;white-space:nowrap}
.mfPrev + .mfNext{margin-left:6px}

/* ---------- 回放：切換玩家視角（看別人的決策） ---------- */
.replaySeatPick{position:fixed;right:14px;bottom:64px;z-index:70;display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  max-width:min(560px,92vw);background:rgba(15,29,24,.92);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.replaySeatPick>span{font-size:11px;color:var(--muted);margin-right:2px}
.replaySeatPick button{font-size:11.5px;padding:3px 8px;border-radius:7px;border:1px solid var(--line);
  background:#14261f;color:var(--ink);cursor:pointer}
.replaySeatPick button.on{background:#2f8062;border-color:#43a981;color:#eafff5;font-weight:600}

/* ---------- 動作列：倒數在右上角，按鈕置中於手牌上方 ---------- */
.selfClock{display:flex;align-items:center;margin-left:auto}
.selfArea .actions{justify-content:center;min-height:34px}
.selfArea .actions button{min-width:64px}
.selfArea .actions button:not(.ghost){background:#1c3a2f;border-color:#2f6b52;
  box-shadow:0 0 0 1px rgba(62,207,142,.18),0 3px 10px rgba(0,0,0,.35)}
.selfArea .actions button.primary{background:#2f8062;border-color:#43a981;
  box-shadow:0 0 18px rgba(62,207,142,.35),0 3px 10px rgba(0,0,0,.35)}

/* ---------- 牌面素材：FluffyStuff/riichi-mahjong-tiles（CC0） ----------
   這個 repo 的 PNG/SVG 只有「花色符號」與「完整牌背」，沒有牌身，
   所以象牙色牌身仍由 .tile 的 CSS 提供，符號疊在上面。 */
.tile.art{position:relative;overflow:hidden}
.tile.art .tf{position:absolute;left:6%;top:5%;width:88%;height:90%;object-fit:contain;pointer-events:none}
.tile.art.back{background:transparent;box-shadow:0 3px 0 #7d1b1b,0 4px 9px rgba(0,0,0,.5)}
.tile.art.back .tf{left:0;top:0;width:100%;height:100%;object-fit:fill}
.tile.art.blank::after{content:"";width:34%;height:20%;border-radius:3px;background:rgba(0,0,0,.10)}
.tile.art.drawn{box-shadow:0 0 0 2px var(--gold),0 8px 16px rgba(0,0,0,.5)}
.tile.art.same-hl{box-shadow:0 0 16px rgba(62,207,142,.9),0 3px 0 #b9ad92}

/* ---------- 吃／碰／槓：hover 預覽組成的牌 ---------- */
.actWrap{position:relative;display:inline-flex}
.actPop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;
  background:#0f1d18;border:1px solid #2f5a45;box-shadow:0 12px 28px rgba(0,0,0,.6);
  z-index:60;white-space:nowrap}
.actPop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#2f5a45}
.comboTiles{display:inline-flex;gap:3px}
.comboTiles .tile.sm{width:26px;height:35px;border-radius:4px}
.comboChoices{display:flex;flex-direction:column;gap:6px}
.comboChoice{background:#14261f;border:1px solid #2f5a45;border-radius:8px;padding:4px 6px;cursor:pointer}
.comboChoice:hover{background:#1e3a2f;border-color:#43a981}
.comboLabel{font-size:10px;color:var(--muted);letter-spacing:.08em;margin-right:2px;align-self:center}
.rcMatchOver{margin:2px 0 6px;padding:6px 10px;border-radius:9px;background:#3a2f12;border:1px solid #7a6224;
  color:#ffe9b0;font-size:12px;font-weight:600;text-align:center}

/* ---------- 牌河（含三家）放大：原本 19×26 太小看不清 -------------------- */
.riverZone .discards .tile.sm,
.seatZone .discards .tile.sm{width:27px;height:36px;border-radius:4px}
.myRiver .tile.sm{width:33px;height:44px;border-radius:4px}
.discards{gap:3px}
/* 牌河區跟著放大，直向可以滾動，不會把 seat 卡撐爆 */
.riverZone .discards{max-height:112px}
.myRiver{max-height:96px}

/* ---------- 彈性思考時間（每回合 5 秒用完才扣） ---------- */
.clockBank{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.selfClock .clockBank{margin-left:8px}

/* ---------- 自己的副露：一套一列，垂直排在左下 ---------- */
.myMelds .row.tight.melds{flex-direction:column;align-items:flex-start;gap:4px}
.myMelds .meld{display:flex;gap:2px;white-space:nowrap}
.myMelds .seatZone .zoneTag,
.myMelds .zoneTag{margin-bottom:2px}
/* 副露的牌比之前在 console 用的 19×26 大一點，桌面上看得清 */
.myMelds .tile.sm{width:26px;height:35px;border-radius:4px}

/* ---------- 對家副露：放在點數左邊，不搶卡片高度 ---------- */
.seatHead{min-width:0}
.seatHead .meldStrip{margin-left:auto;display:flex;gap:4px;align-items:center;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;max-width:65%}
.seatHead .meldStrip::-webkit-scrollbar{display:none}
.seatHead .meldStrip .meld{display:flex;gap:1px;flex:0 0 auto}
.seatHead .meldStrip .tile.sm{width:15px;height:20px;border-radius:2px}
.seatHead .score{margin-left:6px;flex:0 0 auto}
/* 座位卡表頭不能被子元素撐破：副露超出就裁剪（不外溢） */
.seatHead{overflow:hidden}
.seatHead .meldStrip{flex:0 1 auto}
/* 副露小牌尺寸：側邊座位 16×21（空間有限），上方座位 20×26（橫向有餘裕） */
.seatHead .meldStrip .tile.sm{width:16px;height:21px;border-radius:2px}
.topRow .seatHead .meldStrip .tile.sm{width:20px;height:26px;border-radius:3px}
/* 左右座位加寬後，副露可以放大到看得清 */
.sideCol .seatHead .meldStrip .tile.sm{width:19px;height:25px;border-radius:3px}

/* ---------- 牌背改成粉藍色（素材原本是紅色背，用濾鏡轉色） ---------- */
.tile.art.back .tf{filter:hue-rotate(196deg) saturate(.48) brightness(1.3)}
.tile.art.back{box-shadow:0 3px 0 #2b4a63,0 4px 9px rgba(0,0,0,.5)}
.tile.art.back.sm{box-shadow:0 1px 0 #2b4a63}

/* 不能這樣打：游標說明「不行」，也不再假裝可以抬起來 */
.tile.pick.no{cursor:not-allowed}
.tile.pick.no:hover{transform:none;box-shadow:0 3px 0 #b9ad92,0 4px 9px rgba(0,0,0,.45)}
.toast.hintToast{background:#1d2f46;border-color:#3c5b7d;color:#dbe9f7}

/* hover 面板與按鈕之間有 8px 空隙：補一條透明橋，滑鼠斜移不會把它關掉 */
.actPop::before{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
/* 鍵盤操作時要看得見焦點 */
.tile.pick:focus-visible{outline:2px solid #7fd0ff;outline-offset:2px}