@font-face{
  font-family:'MahjongGlyphs';
  src:url('https://cdn.hedyassist.com/public/hedy/7740ccf3fe6a43cb98a99b1bce456d1e/projects/proj_93134ad3203647c7baa17c321b2dde92/app/v2/objects/sha256/7a/7a14566c95c4d41665d997821b3d328da95d505ef5eb6e244ed8130026ad46dd') format('woff2');
  font-display:swap;
}
:root{
  --bg:#11141d;
  --panel:#1b202c;
  --panel-2:#242b3b;
  --panel-3:#2c3447;
  --tile-bg:#fbfaf7;
  --text:#edeff5;
  --text-dim:#8b92a8;
  --text-faint:#5b6276;
  --accent:#5b8def;
  --accent-soft:rgba(91,141,239,.16);
  --gold:#e8c869;
  --gold-deep:#c9a234;
  --pin-active:#f0b94d;
  --crak:#e0524d;
  --bam:#3fa66b;
  --dot:#3b82d8;
  --wind:#8577c9;
  --flower:#e8799f;
  --danger:#e2675c;
  --badge-bg:#2a3142;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--bg);
  background:radial-gradient(120% 90% at 50% -10%,#1a2236 0%,#11141d 45%,#0a0c12 100%);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  min-height:100vh;
}
.app{max-width:760px;margin:0 auto;padding:14px 14px 90px;min-height:100vh;}
.boot-spin{width:30px;height:30px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--gold);border-radius:50%;animation:rot 1s linear infinite;margin:80px auto;}
@keyframes rot{to{transform:rotate(360deg);}}

a{color:var(--accent);text-decoration:none;}
button{font-family:inherit;}
::selection{background:rgba(232,200,105,.3);}

/* ---- buttons ---- */
.btn{border:none;border-radius:999px;font-weight:700;font-size:14px;padding:11px 18px;cursor:pointer;transition:transform .06s ease,filter .15s ease,opacity .15s ease;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn:disabled{opacity:.4;cursor:default;}
.btn-gold{background:linear-gradient(180deg,#f0d685,var(--gold));color:#2b2106;box-shadow:0 3px 0 var(--gold-deep);}
.btn-gold:active:not(:disabled){box-shadow:0 1px 0 var(--gold-deep);}
.btn-accent{background:linear-gradient(180deg,#76a0f4,var(--accent));color:#0b1530;box-shadow:0 3px 0 #3f64ad;}
.btn-accent:active:not(:disabled){box-shadow:0 1px 0 #3f64ad;}
.btn-ghost{background:var(--panel-2);color:var(--text);border:1px solid rgba(255,255,255,.08);}
.btn-ghost:hover{background:var(--panel-3);}
.btn-danger{background:rgba(226,103,92,.14);color:var(--danger);border:1px solid rgba(226,103,92,.35);}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:999px;}
.btn-block{width:100%;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;}
.icon-btn{
  width:36px;height:36px;border-radius:50%;background:var(--panel);border:none;color:var(--text-dim);
  font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;flex-shrink:0;
}
.icon-btn:hover{background:var(--panel-2);color:var(--text);}

/* ---- generic layout ---- */
.topbar{display:flex;align-items:center;gap:10px;padding:6px 2px 18px;}
.topbar-left{display:flex;gap:8px;}
.topbar-title{flex:1;min-width:0;}
.topbar-title h1{font-size:17px;margin:0;font-weight:800;letter-spacing:.1px;}
.topbar-title p{margin:2px 0 0;font-size:11.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{font-size:12px;color:var(--text-dim);text-align:right;white-space:nowrap;}
.topbar-right a{color:var(--accent);}

.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:16px;margin:0 0 14px;}
.card h2{font-size:14px;margin:0 0 10px;font-weight:800;}
.muted{color:var(--text-dim);font-size:13px;line-height:1.5;}
.faint{color:var(--text-faint);font-size:11.5px;}
.center{text-align:center;}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.brand{display:flex;align-items:center;gap:12px;margin:6px 2px 16px;}
.brand .logo{font-size:34px;line-height:1;}
.brand h1{font-size:22px;margin:0;font-weight:800;}
.brand p{margin:2px 0 0;color:var(--text-dim);font-size:12.5px;}

.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(232,200,105,.12);border:1px solid rgba(232,200,105,.28);color:#f0dca0;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;}
.pill-row{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px;}
.stat-box{background:var(--panel-2);border-radius:var(--radius-md);padding:10px 6px;text-align:center;}
.stat-box .n{font-size:18px;font-weight:800;}
.stat-box .l{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}

.list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:13px;background:var(--panel-2);border:1px solid rgba(255,255,255,.06);margin-top:9px;cursor:pointer;}
.list-item:hover{background:var(--panel-3);}
.list-item b{font-size:14.5px;display:block;}
.list-item .meta{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.empty-state{padding:28px 16px;text-align:center;color:var(--text-faint);font-size:13px;}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.toggle-row:last-child{border-bottom:none;}
.toggle-row .lbl{font-size:13.5px;font-weight:600;}
.toggle-row .sub{font-size:11px;color:var(--text-dim);margin-top:1px;}
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--panel-3);border:none;cursor:pointer;flex-shrink:0;transition:background .15s ease;}
.switch.on{background:var(--gold-deep);}
.switch .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s ease;}
.switch.on .knob{transform:translateX(18px);}

.seg{display:flex;gap:6px;}
.seg .opt{flex:1;text-align:center;padding:9px;border-radius:11px;background:var(--panel-2);font-size:12.5px;font-weight:700;border:1px solid transparent;cursor:pointer;color:var(--text-dim);}
.seg .opt.on{background:rgba(232,200,105,.14);border-color:rgba(232,200,105,.32);color:#f0dca0;}

/* ---- seats grid (lobby) ---- */
.seats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
.seat{padding:13px;border-radius:14px;background:var(--panel-2);border:1px solid rgba(255,255,255,.08);min-height:68px;}
.seat.filled{border-color:rgba(232,200,105,.35);background:rgba(232,200,105,.06);}
.seat.you{border-color:rgba(91,141,239,.5);background:var(--accent-soft);}
.seat .wind{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.5px;text-transform:uppercase;}
.seat .nm{font-size:14.5px;font-weight:700;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seat .tag{font-size:11px;color:var(--text-dim);margin-top:1px;}
.seat.empty{display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:12.5px;border-style:dashed;}

/* ---- Charleston direction tracker ---- */
.charl-track{display:flex;align-items:center;justify-content:space-between;margin:4px 4px 22px;position:relative;}
.charl-track::before{content:'';position:absolute;left:14px;right:14px;top:13px;height:2px;background:rgba(255,255,255,.1);z-index:0;}
.charl-stop{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:2px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--text-faint);}
.charl-stop.done{background:var(--panel-3);border-color:rgba(232,200,105,.4);color:var(--text-dim);}
.charl-stop.now{background:var(--accent);border-color:var(--accent);color:#0b1530;box-shadow:0 0 0 4px var(--accent-soft);}

.select-hint{font-size:12px;color:var(--text-dim);text-align:center;margin:6px 0 2px;}

/* ---- tiles (shared by practice + live game) ---- */
.hand-tray{display:flex;gap:6px;flex-wrap:wrap;background:var(--panel);border-radius:var(--radius-lg);padding:14px;min-height:62px;}
.tile{
  width:44px;height:60px;border-radius:9px;background:var(--tile-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(0,0,0,.3),0 5px 9px rgba(0,0,0,.28);
  position:relative;transition:transform .12s ease,box-shadow .12s ease;flex-shrink:0;cursor:default;overflow:hidden;
}
.tile .sprite{position:absolute;inset:0;display:block;background-repeat:no-repeat;}
.tile .pict{font-family:'MahjongGlyphs',sans-serif;font-size:38px;line-height:1;font-weight:400;}
.tile .num{font-size:18px;font-weight:800;line-height:1;}
.tile .sub{font-size:9px;margin-top:3px;opacity:.85;letter-spacing:.1px;white-space:nowrap;max-width:38px;overflow:hidden;}
.tile .idx{position:absolute;top:3px;left:5px;font-size:13px;font-weight:800;line-height:1;letter-spacing:-.3px;}
.tile.num-crak .pict,.tile.num-crak .num,.tile.num-crak .sub,.tile.num-crak .idx{color:var(--crak);}
.tile.num-bam .pict,.tile.num-bam .num,.tile.num-bam .sub,.tile.num-bam .idx{color:var(--bam);}
.tile.num-dot .pict,.tile.num-dot .num,.tile.num-dot .sub,.tile.num-dot .idx{color:var(--dot);}
.tile.wind .pict,.tile.wind .num{color:var(--wind);font-size:19px;}
.tile.dragon-R .pict,.tile.dragon-R .num{color:var(--crak);font-size:19px;}
.tile.dragon-G .pict,.tile.dragon-G .num{color:var(--bam);font-size:19px;}
.tile.dragon-W .pict,.tile.dragon-W .num{color:#9aa4bd;font-size:19px;}
.tile.blank{background:#f7f7f4;box-shadow:inset 0 0 0 1.5px rgba(40,45,60,.22);}
.tile.blank .num,.tile.blank .pict{color:#6b7280;font-size:18px;font-weight:800;}
.tile.blank .sub{color:#8b92a8;}
.blank-pick-list{display:flex;flex-direction:column;gap:8px;}
.blank-pick-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;color:inherit;font:inherit;cursor:pointer;}
.blank-pick-row:hover{border-color:rgba(201,162,39,.45);background:rgba(201,162,39,.08);}
.blank-pick-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.blank-pick-meta b{font-size:13.5px;}
.tile.flower{background:linear-gradient(160deg,#fff,#fbe3ec);}
.tile.flower .pict,.tile.flower .num{color:var(--flower);font-size:19px;}
.tile.joker{background:linear-gradient(160deg,#fff8e1,#fde9a8);}
.tile.joker .num{font-size:19px;color:#c9881a;text-shadow:0 0 8px rgba(240,185,77,.5);}
.tile.match{box-shadow:0 0 0 2px var(--accent),0 5px 12px rgba(91,141,239,.45);transform:translateY(-3px);}
.tile.ghost{background:transparent;border:2px dashed rgba(255,255,255,.16);box-shadow:none;}
.tile.ghost .pict,.tile.ghost .num,.tile.ghost .sub,.tile.ghost .idx{color:rgba(255,255,255,.28);}
.tile.ghost .sprite{opacity:.28;}
.tile.joker-sub{outline:2px solid var(--pin-active);outline-offset:1px;}
.tile.pickable{cursor:pointer;}
.tile.pickable:hover{transform:translateY(-2px);}
.tile.sel{transform:translateY(-12px);box-shadow:0 0 0 2px var(--gold),0 6px 12px rgba(0,0,0,.45);}
.tile.new-draw{box-shadow:0 0 0 2px var(--bam),0 5px 12px rgba(63,166,107,.4);}
.tile.sm{--w:24px;width:30px;height:42px;border-radius:6px;}
.tile.sm .pict{font-size:25px;}
.tile.sm .num{font-size:13px;}
.tile.sm .sub{font-size:6.5px;margin-top:1px;max-width:24px;}
.tile.sm .idx{font-size:9px;top:2px;left:3px;}

/* ---- live game screen ---- */
.opp{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:13px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);margin-bottom:7px;}
.opp.turn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(232,200,105,.2);background:rgba(232,200,105,.06);}
.opp .windbadge{flex:none;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;background:linear-gradient(180deg,#3a4566,#252d44);color:#cdd6ee;}
.opp .info{flex:1;min-width:0;}
.opp .nm{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.opp .meta{font-size:11px;color:var(--text-dim);margin-top:1px;}
.opp .opp-melds{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px;}
.bot-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);display:inline-block;}
.bot-dot.beginner{background:#7fb88a;}
.bot-dot.intermediate{background:#e0a64c;}
.bot-dot.advanced{background:#e2675c;}

.table-center{margin:8px 0 10px;padding:13px;border-radius:16px;background:radial-gradient(80% 120% at 50% 0%,rgba(91,141,239,.12),rgba(0,0,0,.22));border:1px solid rgba(255,255,255,.08);min-height:64px;}
.table-center .lbl{font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px;display:flex;justify-content:space-between;}
.pending-row{display:flex;align-items:center;gap:10px;}

/* Portrait game: the rack below docks to the bottom via position:sticky, but
   sticky bottom:0 pins to the *layout* viewport, whose bottom sits under the
   mobile toolbar — so the Discard bar gets clipped until you nudge-scroll.
   Make .app the scroll container at the VISIBLE viewport height (100dvh) only
   while the game (its .hand-wrap) is mounted, so the dock lands above the
   toolbar and Discard is never cut off. :has() degrades gracefully; engines
   without it keep the old body-scroll behavior. */
.app:has(.hand-wrap){height:100vh;height:100dvh;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;padding-top:max(14px,env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:0;}
/* Lock the document behind the portrait game: body keeps min-height:100vh (the
   TALLER layout viewport) while .app is 100dvh, so without this the page itself
   scrolls/overscrolls by the toolbar height — that's the drag that revealed
   content past the bottom and sides. Mirrors the .ls-stage lock below. */
html:has(.hand-wrap),body:has(.hand-wrap){overflow:hidden;}
.hand-wrap{position:sticky;bottom:0;padding-top:6px;background:linear-gradient(180deg,transparent,var(--bg) 30%);margin:0 -14px;padding-left:14px;padding-right:14px;padding-bottom:calc(10px + max(env(safe-area-inset-bottom),20px));}
.your-melds{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;min-height:2px;}
.meld-grp{display:flex;gap:2px;padding:3px;border-radius:8px;background:rgba(255,255,255,.06);}
.turnflag{text-align:center;font-size:12.5px;margin:6px 0 8px;min-height:16px;color:var(--gold);font-weight:700;}
.dead-hand-notice{background:rgba(226,103,92,.12);border:1px solid rgba(226,103,92,.3);color:#f0a89f;font-size:11.5px;padding:8px 12px;border-radius:10px;margin-bottom:8px;text-align:center;}
.dead-tag{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--danger);background:rgba(226,103,92,.15);padding:2px 6px;border-radius:999px;letter-spacing:.3px;}
.actionbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px;min-height:10px;}

.suggest-btn-float{position:fixed;top:14px;right:max(14px,calc(50% - 380px + 14px));z-index:20;}
.coach-fab{position:fixed;bottom:max(28px,calc(18px + env(safe-area-inset-bottom)));right:max(18px,calc(50% - 380px + 18px));width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,#f0d685,var(--gold));box-shadow:0 4px 14px rgba(232,200,105,.4);border:none;font-size:24px;cursor:pointer;z-index:25;display:flex;align-items:center;justify-content:center;}

/* ---- suggestions panel (Hand Coach, reused inside Charleston/Game) ---- */
.suggestions-panel{background:var(--panel);border-radius:var(--radius-lg);overflow:hidden;}
.suggestions-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);}
.bulb{font-size:14px;}
.suggestions-header h2{font-size:13.5px;margin:0;font-weight:800;flex:1;letter-spacing:.1px;}
.toggle-btn{background:none;border:none;color:var(--text-dim);font-size:11.5px;cursor:pointer;white-space:nowrap;}
.toggle-btn:hover{color:var(--text);}
.suggestion-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;}
.suggestion-row:hover{background:rgba(255,255,255,.025);}
.suggestion-row.selected{background:var(--accent-soft);}
.pin-toggle{background:none;border:none;color:var(--text-faint);font-size:14px;cursor:pointer;flex-shrink:0;padding:2px;line-height:1;opacity:.4;transform:scale(.9);transition:opacity .15s ease,transform .15s ease,filter .15s ease;}
.pin-toggle.pinned{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 3px rgba(240,185,77,.7));}
.pin-toggle:hover{opacity:.75;}
.suggestion-main{flex:1;min-width:0;}
.suggestion-meta{display:flex;gap:8px;align-items:baseline;margin-bottom:4px;flex-wrap:wrap;}
.section-label{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--text-dim);text-transform:uppercase;}
.note{font-size:11px;color:var(--text-faint);font-style:italic;}
.suggestion-tiles{font-size:13px;font-weight:700;color:var(--text);display:flex;flex-wrap:wrap;gap:4px 8px;}
.suggestion-tiles .grp.num-dot{color:var(--dot);}
.suggestion-tiles .grp.num-bam{color:var(--bam);}
.suggestion-tiles .grp.num-crak{color:var(--crak);}
.suggestion-tiles .grp.wind{color:var(--wind);}
.suggestion-tiles .grp.dragon-R{color:var(--crak);}
.suggestion-tiles .grp.dragon-G{color:var(--bam);}
.suggestion-tiles .grp.dragon-W{color:#9aa4bd;}
.suggestion-tiles .grp.flower{color:var(--flower);}
.suggestion-tiles .grp.joker{color:#c9881a;}
.suggestion-tiles .grp.done,.pinned-pattern .grp.done{
  text-decoration:none;font-weight:700;
  background:rgba(94,197,140,.16);
  box-shadow:inset 0 0 0 1px rgba(94,197,140,.4);
  border-radius:6px;padding:0 5px 0 4px;margin:0 1px;
}
.suggestion-tiles .grp.done::after,.pinned-pattern .grp.done::after{
  content:'\2713';font-size:.68em;font-weight:900;color:#4fbc85;margin-left:3px;vertical-align:1px;
}
.away-badge{font-size:11.5px;background:var(--badge-bg);color:var(--text-dim);padding:5px 11px;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.suggestion-row.selected .away-badge{background:var(--accent);color:#0b1020;font-weight:800;}
.away-badge.ready{background:var(--bam);color:#0b1020;font-weight:800;}
.suggestion-detail{padding:2px 16px 16px 40px;display:flex;flex-wrap:wrap;gap:6px;}
.suggestion-detail .tile{width:34px;height:46px;border-radius:7px;}
.suggestion-detail .tile .pict{font-size:28px;}
.suggestion-detail .tile .num{font-size:14px;}
.suggestion-detail .tile .sub{font-size:7.5px;margin-top:1px;max-width:28px;}
.suggestion-detail .tile .idx{font-size:10px;top:2px;left:3px;}
.detail-legend{padding:0 16px 14px 40px;display:flex;gap:14px;font-size:10.5px;color:var(--text-faint);flex-wrap:wrap;}
.detail-legend span{display:flex;align-items:center;gap:5px;}
.legend-dot{width:9px;height:9px;border-radius:3px;display:inline-block;}
.legend-dot.have{background:var(--accent);}
.legend-dot.joker{background:var(--pin-active);}
.legend-dot.missing{border:1.5px dashed rgba(255,255,255,.3);}
.empty{padding:24px 16px;text-align:center;color:var(--text-faint);font-size:13px;}

.pinned-bar{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid rgba(240,185,77,.35);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:12px;}
.pin-ico{color:var(--pin-active);font-size:14px;flex-shrink:0;}
.pinned-pattern{flex:1;min-width:0;font-size:12.5px;font-weight:700;display:flex;flex-wrap:wrap;gap:5px 8px;}
.pinned-pattern .grp{color:var(--text);}
.pinned-pattern .grp.num-dot{color:var(--dot);}
.pinned-pattern .grp.num-bam{color:var(--bam);}
.pinned-pattern .grp.num-crak{color:var(--crak);}
.pinned-pattern .grp.wind{color:var(--wind);}
.pinned-pattern .grp.dragon-R{color:var(--crak);}
.pinned-pattern .grp.dragon-G{color:var(--bam);}
.pinned-pattern .grp.dragon-W{color:#9aa4bd;}
.pinned-pattern .grp.flower{color:var(--flower);}
.pinned-pattern .grp.joker{color:#c9881a;}

.pinned-away{font-size:11px;background:var(--badge-bg);color:var(--text-dim);padding:4px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.link-btn{background:none;border:none;color:var(--text-dim);font-size:11.5px;cursor:pointer;text-decoration:underline;flex-shrink:0;padding:0;}

/* ---- overlay sheet (suggestions / coach) ---- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(5,7,12,.6);z-index:30;display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:var(--bg);width:100%;max-width:760px;max-height:85vh;border-radius:20px 20px 0 0;overflow-y:auto;box-shadow:0 -8px 30px rgba(0,0,0,.5);}
.sheet-head{position:sticky;top:0;background:var(--bg);display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);z-index:2;}
.sheet-head h2{flex:1;margin:0;font-size:15px;font-weight:800;}
.sheet-body{padding:14px 16px 24px;}

/* ---- coach chat ---- */
.chat-log{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.chat-msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;}
.chat-msg.user{align-self:flex-end;background:var(--accent);color:#0b1530;border-bottom-right-radius:4px;}
.chat-msg.coach{align-self:flex-start;background:var(--panel-2);color:var(--text);border-bottom-left-radius:4px;}
.chat-msg.coach b{color:var(--gold);}
.chat-input-row{display:flex;gap:8px;position:sticky;bottom:0;background:var(--bg);padding-top:6px;}
.chat-input{flex:1;background:var(--panel-2);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:11px 16px;color:var(--text);font-size:13.5px;font-family:inherit;}
.chat-input:focus{outline:none;border-color:var(--accent);}
.chat-suggest-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.chat-suggest-chip{background:var(--panel-2);border:1px solid rgba(255,255,255,.08);color:var(--text-dim);font-size:11.5px;padding:7px 12px;border-radius:999px;cursor:pointer;}
.chat-suggest-chip:hover{background:var(--panel-3);color:var(--text);}
.chat-loading{align-self:flex-start;display:flex;gap:4px;padding:10px 13px;}
.chat-loading span{width:6px;height:6px;border-radius:50%;background:var(--text-faint);animation:bounce 1.2s infinite ease-in-out;}
.chat-loading span:nth-child(2){animation-delay:.15s;}
.chat-loading span:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

/* ---- hand-over / scoreboard ---- */
.result-banner{text-align:center;padding:18px 10px 6px;}
.result-banner .ico{font-size:40px;}
.result-banner h2{font-size:19px;margin:8px 0 2px;}
.result-banner p{color:var(--text-dim);font-size:13px;margin:0;}
.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px;}
.sc{padding:10px 6px;border-radius:11px;background:var(--panel-2);text-align:center;border:1px solid rgba(255,255,255,.06);}
.sc.win{border-color:var(--gold);background:rgba(232,200,105,.1);}
.sc .nm{font-size:10.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc .pts{font-size:17px;font-weight:800;margin-top:3px;}
.standings{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.strow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:var(--panel-2);}
.strow.lead{background:rgba(232,200,105,.1);border:1px solid rgba(232,200,105,.3);}
.strow .rank{width:20px;text-align:center;font-weight:800;color:var(--text-dim);font-size:12px;}
.strow .snm{flex:1;font-size:13px;font-weight:600;}
.strow .spts{font-weight:800;font-size:13.5px;}

/* ---- toast ---- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--panel-2);color:var(--text);border:1px solid rgba(232,200,105,.35);padding:11px 18px;border-radius:12px;font-size:13.5px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.45);max-width:88%;text-align:center;}

.footnote{font-size:10.5px;color:var(--text-faint);text-align:center;margin-top:18px;}
.spin-sm{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--gold);border-radius:50%;animation:rot .8s linear infinite;display:inline-block;vertical-align:middle;}

@media (max-width:380px){
  .tile{width:38px;height:52px;}
  .tile .num{font-size:16px;}
  .topbar-title p{display:none;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- settings / theme picker ---- */
.settings-section{padding:2px 2px 4px;}
.settings-label{font-size:13.5px;margin:0 0 6px;font-weight:800;}
.theme-grid{display:flex;flex-direction:column;gap:10px;}
.theme-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:var(--panel-2);border:2px solid transparent;cursor:pointer;text-align:left;width:100%;}
.theme-card:hover{background:var(--panel-3);}
.theme-card.selected{border-color:var(--accent);background:var(--accent-soft);}
.theme-preview{flex-shrink:0;}
.theme-info{min-width:0;}
.theme-name{font-size:14px;font-weight:800;}
.theme-check{color:var(--accent);font-weight:800;}
.theme-blurb{font-size:12px;color:var(--text-dim);margin-top:2px;}

/* ---- Card manager + photo scan (settings sheet) ---- */
.card-list{display:flex;flex-direction:column;gap:8px;}
.card-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;color:inherit;font:inherit;cursor:pointer;}
.card-row.selected{border-color:#c9a227;background:rgba(201,162,39,.1);}
.card-row .card-radio{font-size:14px;color:#c9a227;flex:none;}
.card-row .card-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.card-row .card-name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-row .card-meta{font-size:11.5px;opacity:.65;}
.card-row .card-del{flex:none;opacity:.7;}
.card-row .card-del:hover{opacity:1;}
.scan-status{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.scan-status.ok{border-color:rgba(80,200,120,.5);background:rgba(80,200,120,.1);}
.scan-status.err{border-color:rgba(230,90,90,.55);background:rgba(230,90,90,.12);}
.scan-status .scan-skipped{margin-top:8px;font-size:11.5px;opacity:.8;}
.scan-status a{color:#c9a227;}

/* ---- "Paper card" reference view ---- */
.sheet-tall{max-height:94vh;height:94vh;display:flex;flex-direction:column;}
.sheet-tall .sheet-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.paper-wrap{padding:10px 10px 22px;background:#efe7d3;}
.paper-card{background:#f9f4e6;border:1px solid #d8cdb2;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 0 44px rgba(120,90,30,.07);color:#20242e;padding:14px 12px 12px;font-family:Georgia,'Times New Roman',serif;}
.pc-title{text-align:center;font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#3b2f16;}
.pc-sub{text-align:center;font-size:11.5px;color:#6d6350;margin:4px 0 12px;font-family:Inter,system-ui,sans-serif;}
.pc-section{margin-bottom:12px;border:1px solid #d8cdb2;border-radius:6px;overflow:hidden;background:#fbf7ec;}
.pc-section-head{background:#243b63;color:#f6f1e2;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.12em;padding:6px 10px;}
.pc-hand{position:relative;padding:8px 10px 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;border-top:1px solid #e6ddc6;}
.pc-hand:nth-child(even){background:#f5efdd;}
.pc-pattern{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 10px;}
.pc-tk{font-weight:700;font-size:15.5px;letter-spacing:.05em;white-space:nowrap;}
.pc-n{color:#20242e;}
.pc-s1{color:#1d4ed8;}
.pc-s2{color:#b91c1c;}
.pc-s3{color:#15803d;}
.pc-r{color:#b91c1c;}
.pc-g{color:#15803d;}
.pc-b{color:#0e7490;}
.pc-side{flex:none;display:flex;align-items:center;gap:6px;margin-left:auto;}
.pc-pts{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:12px;background:#3b2f16;color:#f6f1e2;border-radius:999px;padding:2px 8px;}
.pc-c{font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:11px;color:#7c2d12;border:1.5px solid #7c2d12;border-radius:4px;padding:0 4px;}
.pc-note{width:100%;font-style:italic;font-size:12px;color:#6d6350;margin-top:1px;}
.pc-foot{margin-top:6px;text-align:center;font-size:11px;color:#6d6350;font-family:Inter,system-ui,sans-serif;}
.view-card-cta{border-color:rgba(201,162,39,.45);}
.view-card-cta:active{transform:scale(.995);}

/* ===========================================================================
   LANDSCAPE TABLE MODE — "The Parlor" (v1 experiment).
   Everything below is additive and prefixed ls-. Safe to delete wholesale.
   =========================================================================== */
.ls-stage{
  /* Fluid tile scale — everything on the felt grows with screen height, so
     tablets/large phones get readable tiles while small phones keep v1 sizes. */
  --ls-xs:clamp(22px,5vh,44px);      /* discard-river tiles */
  --ls-back:clamp(11px,2.6vh,21px);  /* opponent hidden-tile backs */
  --ls-tray:clamp(36px,9.5vh,58px);  /* your rack tiles */
  --ls-meld:clamp(26px,5.6vh,42px);  /* your exposed melds */
  position:fixed;inset:0 0 auto 0;z-index:5;
  height:100vh;      /* fallback for engines without dvh */
  height:100dvh;     /* size to the VISIBLE viewport so the felt never hides under the mobile toolbar */
  display:grid;
  grid-template-columns:clamp(46px,6vw,80px) 1fr clamp(46px,6vw,80px);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top top" "left felt right" "rack rack rack";
  gap:2px;
  padding:calc(2px + env(safe-area-inset-top)) calc(3px + env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) calc(3px + env(safe-area-inset-left));
  background:radial-gradient(120% 90% at 50% -10%,#1a2236 0%,#11141d 45%,#0a0c12 100%);
  overflow:hidden;
}
/* The Parlor stage is position:fixed and self-contained, but the SPA's .app
   scroll box behind it keeps min-height:100vh + 90px bottom padding, leaving
   the page ~104px scrollable under the mobile toolbar — that's the "small
   nudge to reveal the Discard compass" bug. Collapse the scroll box (and lock
   the root) whenever a stage is mounted so the document is exactly viewport-
   height and can't scroll. :has() is a progressive enhancement; engines
   without it still get the dvh-sized stage above. */
.app:has(.ls-stage){padding:0;min-height:0;}
html:has(.ls-stage),body:has(.ls-stage){overflow:hidden;}
.ls-toprow{grid-area:top;display:flex;align-items:center;gap:6px;min-height:34px;}
.ls-corner{display:flex;gap:6px;align-items:center;flex:none;}
.ls-corner .pill{font-size:10.5px;padding:4px 9px;}

/* --- player plates --- */
.ls-plate{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:5px 6px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden;}
.ls-plate-left{grid-area:left;}
.ls-plate-right{grid-area:right;}
.ls-plate-left,.ls-plate-right{gap:4px;padding:5px 3px;cursor:pointer;}
.ls-plate-left{align-items:flex-start;}
.ls-plate-right{align-items:flex-end;}
.ls-plate-left:hover,.ls-plate-right:hover{border-color:rgba(232,200,105,.35);}
.ls-plate-left .ls-plate-melds,.ls-plate-right .ls-plate-melds{cursor:pointer;}
.ls-plate-left .ls-plate-head,.ls-plate-right .ls-plate-head{flex-direction:row;gap:3px;align-items:center;width:auto;}

/* Side players show ONE narrow column of tile backs, sized so a full
   13/14-tile hand always fits without wrapping into a second column. */
.ls-plate-left .ls-backs,.ls-plate-right .ls-backs{flex:1;min-height:0;flex-flow:column nowrap;overflow:hidden;justify-content:flex-start;gap:2px;}
.ls-plate-left .ls-backs{align-items:flex-start;}
.ls-plate-right .ls-backs{align-items:flex-end;}
.ls-plate-left .ls-back,.ls-plate-right .ls-back{width:clamp(14px,3.6vh,26px);height:clamp(5px,2.9vh,11px);border-radius:3px;}
.ls-plate-left .ls-plate-melds,.ls-plate-right .ls-plate-melds{flex-direction:column;align-items:center;--ls-xs:clamp(17px,3.4vh,27px);gap:3px;}

.ls-plate-top{flex:1;flex-direction:row;align-items:center;gap:12px;padding:5px 12px;min-height:0;}
.ls-plate.turn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(232,200,105,.28);background:rgba(232,200,105,.05);}
.ls-plate-head{display:flex;align-items:center;gap:6px;min-width:0;}
.ls-wind{flex:none;width:clamp(22px,4.2vh,30px);height:clamp(22px,4.2vh,30px);border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(10.5px,2vh,13.5px);background:linear-gradient(180deg,#3a4566,#252d44);color:#cdd6ee;}
.ls-nm{font-weight:700;font-size:clamp(12px,2.3vh,15px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px;min-width:0;}
.ls-score{font-size:clamp(9.5px,1.9vh,12px);color:var(--text-dim);white-space:nowrap;}
.ls-plate-left .ls-score,.ls-plate-right .ls-score{margin-top:auto;padding-top:3px;font-size:10px;}
.ls-backs{display:flex;flex-wrap:wrap;gap:2px;}
.ls-back{width:var(--ls-back,13px);height:calc(var(--ls-back,13px)*1.45);border-radius:max(3px,calc(var(--ls-back,13px)*.2));display:inline-block;flex:none;
  background:linear-gradient(160deg,#eda49d,#d4655e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.35);}
.ls-plate-melds{display:flex;gap:4px;flex-wrap:wrap;--ls-xs:clamp(20px,4.2vh,34px);}
.ls-plate-top .ls-backs,.ls-plate-top .ls-plate-melds{flex-wrap:nowrap;}
.ls-plate-top{--ls-back:clamp(11px,2vh,16px);}
.ls-plate-top .ls-plate-melds{--ls-xs:clamp(18px,3.4vh,26px);}

/* --- the felt --- */
.ls-felt{grid-area:felt;position:relative;border-radius:13px;min-height:0;
  background:radial-gradient(95% 115% at 50% 42%,#2b6b4f 0%,#1c4f39 55%,#123626 100%);
  border:1px solid rgba(232,200,105,.32);
  box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.4);
  overflow:hidden;}

.ls-turn-bot{box-shadow:inset 0 -30px 44px -24px rgba(232,200,105,.8),inset 0 0 46px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.4);}
.ls-turn-top{box-shadow:inset 0 30px 44px -24px rgba(232,200,105,.8),inset 0 0 46px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.4);}
.ls-turn-left{box-shadow:inset 30px 0 44px -24px rgba(232,200,105,.8),inset 0 0 46px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.4);}
.ls-turn-right{box-shadow:inset -30px 0 44px -24px rgba(232,200,105,.8),inset 0 0 46px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.4);}
.ls-felt-grid{position:absolute;inset:4px;display:grid;gap:2px;
  grid-template-columns:minmax(56px,24%) 1fr minmax(56px,24%);
  grid-template-rows:minmax(30px,auto) 1fr minmax(30px,auto);
  grid-template-areas:"t t t" "l m r" "b b b";}
.ls-zone{min-width:0;min-height:0;overflow:hidden;}
.ls-zone-top{grid-area:t;display:flex;justify-content:center;align-items:flex-start;}
.ls-zone-bot{grid-area:b;display:flex;align-items:flex-end;justify-content:center;}
.ls-zone-left{grid-area:l;display:flex;justify-content:flex-end;}
.ls-zone-right{grid-area:r;display:flex;justify-content:flex-start;}
.ls-zone-mid{grid-area:m;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}

/* discard rivers */
.ls-river{display:flex;flex-wrap:wrap;gap:calc(var(--ls-xs,22px)*.12);align-content:flex-start;align-items:flex-start;max-height:100%;height:fit-content;width:fit-content;max-width:100%;border-radius:9px;padding:2px 3px;}
.ls-river.filled{background:rgba(0,0,0,.17);box-shadow:inset 0 1px 6px rgba(0,0,0,.28);}
.ls-river.dense{--ls-xs:clamp(19px,3.9vh,32px);}
.ls-river.xdense{--ls-xs:clamp(15px,3.1vh,25px);}
/* Top & bottom rivers run edge-to-edge as ONE row (density steps shrink the
   tiles instead of stacking a second row). */
.ls-zone-top .ls-river,.ls-zone-bot .ls-river{flex-wrap:nowrap;width:100%;justify-content:center;overflow:hidden;}
/* Side rivers stack vertically and push toward the center of the table:
   columns fill top-to-bottom and the pile hugs the inner edge of its zone. */
.ls-zone-left .ls-river,.ls-zone-right .ls-river{flex-flow:column wrap;height:100%;max-height:100%;width:fit-content;gap:calc(var(--ls-xs,22px)*.1);}
.ls-zone-left .ls-river{align-content:flex-end;}
.ls-zone-right .ls-river{align-content:flex-start;}

.ls-river-tag{flex:none;align-self:flex-start;width:calc(var(--ls-xs,22px)*.82);height:calc(var(--ls-xs,22px)*.82);margin:calc(var(--ls-xs,22px)*.1) 2px 0 0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:calc(var(--ls-xs,22px)*.42);font-weight:800;color:rgba(240,220,160,.6);border:1px dashed rgba(240,220,160,.35);text-shadow:0 1px 2px rgba(0,0,0,.5);}
.ls-zone-left .ls-river-tag,.ls-zone-right .ls-river-tag{margin:0 0 2px;}
.tile.xs{width:var(--ls-xs,22px);height:calc(var(--ls-xs,22px)*1.36);border-radius:max(4px,calc(var(--ls-xs,22px)*.15));box-shadow:0 1px 0 rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.3);}
.tile.xs .pict{font-size:calc(var(--ls-xs,22px)*.86);}
.tile.xs .num{font-size:calc(var(--ls-xs,22px)*.48);}
.tile.xs .idx{font-size:calc(var(--ls-xs,22px)*.34);top:1px;left:2px;}
.tile.xs .sub{display:none;}
.tile.ls-hot{box-shadow:0 0 0 2px var(--gold),0 0 12px rgba(232,200,105,.7);animation:ls-hotpulse 1.1s ease-in-out infinite;}
@keyframes ls-hotpulse{0%,100%{transform:translateY(0) scale(1.12);}50%{transform:translateY(-3px) scale(1.12);}}
.tile.ls-hot{z-index:1;}

/* tap-to-peek magnifier: floats over the felt, dismisses on any tap or 6s */
.ls-peek{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  --ls-xs:clamp(34px,7.5vh,54px);
  max-width:min(86%,640px);max-height:88%;overflow-y:auto;scrollbar-width:none;
  display:flex;flex-direction:column;gap:5px;padding:12px 15px 13px;border-radius:16px;
  background:rgba(10,14,22,.88);border:1px solid rgba(232,200,105,.4);
  box-shadow:0 10px 34px rgba(0,0,0,.55);backdrop-filter:blur(3px);cursor:pointer;
  animation:lsPeekIn .16s ease both;}
.ls-peek::-webkit-scrollbar{display:none;}
@keyframes lsPeekIn{from{opacity:0;transform:translate(-50%,-50%) scale(.92);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.ls-peek-head{display:flex;align-items:center;gap:8px;font-size:clamp(12px,2.4vh,15px);color:var(--text);}
.ls-peek-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ls-peek-x{flex:none;color:var(--text-faint);font-size:12px;}
.ls-peek-lbl{font-size:clamp(8.5px,1.7vh,10.5px);font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:rgba(240,220,160,.75);margin-top:2px;}
.ls-peek-row{display:flex;flex-wrap:wrap;gap:calc(var(--ls-xs)*.12);align-items:flex-start;}
.ls-peek-row .meld-grp{background:rgba(255,255,255,.07);padding:4px;border-radius:10px;}
.ls-peek-none{font-size:clamp(11px,2.2vh,13px);color:var(--text-dim);}
.ls-peek .tile.xs{box-shadow:0 2px 0 rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.35);}
@media (prefers-reduced-motion:reduce){.ls-peek{animation:none;}}
/* rivers/melds invite the tap without shouting about it */
.ls-river[data-act]{cursor:zoom-in;transition:box-shadow .15s ease;}
.ls-river.filled[data-act]:hover{box-shadow:inset 0 1px 6px rgba(0,0,0,.28),0 0 0 1px rgba(232,200,105,.3);}
.ls-plate-melds[data-act]{cursor:zoom-in;border-radius:8px;}
.ls-plate-melds[data-act]:hover{outline:1px solid rgba(232,200,105,.3);}

/* compass */
.ls-compass{width:clamp(60px,15vh,112px);height:clamp(60px,15vh,112px);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(circle at 35% 30%,#3b4a6e,#232c45 72%);
  border:2px solid rgba(232,200,105,.5);box-shadow:0 3px 12px rgba(0,0,0,.45);}
.ls-round{font-size:clamp(17px,4.4vh,32px);font-weight:800;color:var(--gold);line-height:1;}
.ls-wall{font-size:clamp(9px,1.9vh,12.5px);color:#cdd6ee;letter-spacing:.4px;text-transform:uppercase;}
.ls-center-act{cursor:pointer;transition:transform .1s ease, box-shadow .12s ease;}
.ls-compass.ls-center-act{width:auto;min-width:clamp(58px,13vh,100px);height:clamp(58px,13vh,100px);border-radius:clamp(16px,3.6vh,26px);padding:0 clamp(10px,2.2vh,18px);}
.ls-center-act:active{transform:scale(.94);}
.ls-compass.ls-center-act.draw{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,200,105,.55),0 0 24px rgba(232,200,105,.4),0 3px 12px rgba(0,0,0,.45);animation:lca-pulse 1.8s ease-in-out infinite;}
.ls-compass.ls-center-act.discard{border-color:rgba(255,255,255,.25);}
.ls-compass.ls-center-act.discard:disabled{opacity:.6;cursor:default;animation:none;}
.ls-compass.ls-center-act.discard.armed{border-color:#8fd7ff;box-shadow:0 0 0 2px rgba(143,215,255,.55),0 0 24px rgba(143,215,255,.35),0 3px 12px rgba(0,0,0,.45);animation:lca-pulse 1.8s ease-in-out infinite;}
.lca-main{font-weight:900;font-size:clamp(11px,2.5vh,15px);color:#ffe9ab;letter-spacing:.03em;text-shadow:0 1px 3px rgba(0,0,0,.6);line-height:1.1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.ls-compass.discard .lca-main{color:#dff2ff;}
.ls-round.dim{opacity:.4;}
.lca-tile{pointer-events:none;margin-bottom:1px;}
.ls-center-stack{display:flex;flex-direction:column;align-items:center;gap:7px;}
@keyframes lca-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
.felt-claim:disabled{background:rgba(255,255,255,.10);color:rgba(255,255,255,.38);border-color:rgba(255,255,255,.14);box-shadow:none;cursor:default;transform:none;}
.ls-turnflag{text-align:center;font-size:clamp(11px,2.3vh,15.5px);color:var(--gold);font-weight:700;min-height:clamp(13px,2.5vh,18px);text-shadow:0 1px 3px rgba(0,0,0,.65);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* claim window */
.ls-claim{display:flex;flex-direction:column;align-items:center;gap:6px;}
.ls-claim-lbl{font-size:10.5px;color:#d9e2f5;text-transform:uppercase;letter-spacing:.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.tile.ls-claim-tile{--ct:clamp(50px,11.5vh,78px);width:var(--ct);height:calc(var(--ct)*1.36);box-shadow:0 0 0 3px var(--gold),0 8px 20px rgba(232,200,105,.45);animation:ls-pop .22s ease;}
.tile.ls-claim-tile .pict{font-size:calc(var(--ct)*.84);}
.ls-claim-lbl{font-size:clamp(10.5px,2.1vh,13.5px) !important;}
@keyframes ls-pop{from{transform:scale(.6);}to{transform:scale(1);}}
.ls-drain{width:clamp(112px,24vh,168px);height:clamp(5px,1vh,7px);border-radius:999px;background:rgba(0,0,0,.45);overflow:hidden;}
.ls-drain span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#f0d685);transform-origin:left;animation:ls-drainanim 15s linear forwards;}
@keyframes ls-drainanim{from{transform:scaleX(1);}to{transform:scaleX(0);}}

/* --- your rack --- */
.ls-rack{grid-area:rack;position:relative;padding:0 2px 3px;min-width:0;}
.ls-rack .dead-hand-notice{padding:3px 10px;margin:0 0 3px;font-size:10px;}
.ls-rack-row{display:flex;align-items:center;gap:10px;min-width:0;}
.ls-mymelds{display:flex;gap:6px;flex:none;}
.ls-mymelds .tile{width:var(--ls-meld,26px);height:calc(var(--ls-meld,26px)*1.38);border-radius:max(5px,calc(var(--ls-meld,26px)*.15));}
.ls-mymelds .tile .pict{font-size:calc(var(--ls-meld,26px)*.85);}
.ls-mymelds .tile .num{font-size:calc(var(--ls-meld,26px)*.44);}
.ls-mymelds .tile .sub{display:none;}
.ls-tray{display:flex;gap:5px;overflow-x:auto;overflow-y:visible;padding:11px 3px 1px;flex:1;justify-content:center;min-width:0;scrollbar-width:none;}
.ls-tray::-webkit-scrollbar{display:none;}
.ls-tray .tile{width:var(--ls-tray,40px);height:calc(var(--ls-tray,40px)*1.375);}
.ls-tray .tile .pict{font-size:calc(var(--ls-tray,40px)*.85);}
.ls-tray .tile.sel{transform:translateY(-10px);}
.ls-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:36%;}
.ls-actions .btn{padding:9px 15px;font-size:clamp(13px,2.5vh,15px);white-space:nowrap;}

/* very short landscape screens (small phones): tighten everything a notch */
@media (max-height:380px){
  .ls-toprow{min-height:38px;}
  .ls-plate{padding:5px 7px;gap:3px;}
  .ls-rack-row{gap:7px;}
}

/* --- Charleston on the Parlor table --- */
.ls-charl-center{position:absolute;inset:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;}
.ls-charltrack{display:flex;gap:5px;}
.ls-charltrack span{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;color:rgba(255,255,255,.35);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);}
.ls-charltrack span.done{color:rgba(240,220,160,.75);border-color:rgba(232,200,105,.4);}
.ls-charltrack span.now{background:var(--gold);border-color:var(--gold);color:#2b2106;box-shadow:0 0 8px rgba(232,200,105,.6);}
.ls-charl-title{font-size:12.5px;font-weight:800;color:#eef2fb;letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.ls-charl-sub{font-size:10.5px;color:#cfe4d8;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6);max-width:92%;}
.ls-arrowwrap{height:46px;display:flex;align-items:center;justify-content:center;}
.ls-arrow{display:flex;gap:2px;font-size:30px;font-weight:800;color:var(--gold);line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
.ls-arrow span{animation:ls-chev 1.15s ease-in-out infinite;}
.ls-arrow span:nth-child(2){animation-delay:.18s;}
.ls-arrow span:nth-child(3){animation-delay:.36s;}
@keyframes ls-chev{0%,100%{opacity:.25;transform:translateX(0);}50%{opacity:1;transform:translateX(3px);}}
.ls-dir-right{transform:rotate(0deg);}
.ls-dir-across{transform:rotate(-90deg);}
.ls-dir-left{transform:rotate(180deg);}
.ls-swap{font-size:34px;color:var(--gold);line-height:1;animation:ls-swappulse 1.4s ease-in-out infinite;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
@keyframes ls-swappulse{0%,100%{transform:scaleY(1);opacity:.7;}50%{transform:scaleY(1.12);opacity:1;}}
.ls-arrowwrap.sent .ls-arrow,.ls-swap.sent{color:#7fd6a2;animation:none;}
.ls-arrowwrap.sent .ls-arrow span{animation:none;opacity:.85;}
.ls-pass-preview{display:flex;gap:4px;padding:5px 8px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);}
.ls-pass-preview.sent{opacity:.6;}
.ls-ready{flex:none;font-size:10px;font-weight:800;color:#7fd6a2;background:rgba(127,214,162,.14);border:1px solid rgba(127,214,162,.4);border-radius:999px;padding:1px 6px;}
.ls-waitdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);animation:ls-waitblink 1.2s ease-in-out infinite;}
@keyframes ls-waitblink{0%,100%{opacity:.25;}50%{opacity:.95;}}

/* ---- Concealed pinned-hand whisper -------------------------------------
   Appears only during a claim window when the pinned hand plays concealed.
   A slim gilded ribbon: hairline gold rules above and below, a softly
   breathing lock. Informative, never blocking. */
.concealed-warn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;margin:4px auto 8px;padding:8px 16px;max-width:560px;font-size:12px;line-height:1.4;color:#e9cd8a;text-align:left;background:linear-gradient(90deg,rgba(240,185,77,0) 0%,rgba(240,185,77,.09) 18%,rgba(240,185,77,.09) 82%,rgba(240,185,77,0) 100%);animation:cwIn .45s ease both;}
.concealed-warn::before,.concealed-warn::after{content:'';position:absolute;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,185,77,.5),transparent);}
.concealed-warn::before{top:0;}
.concealed-warn::after{bottom:0;}
.concealed-warn em{font-style:normal;font-weight:600;color:#f0b94d;}
.cw-lock{flex:none;font-size:14px;filter:drop-shadow(0 0 6px rgba(240,185,77,.45));animation:cwBreath 2.8s ease-in-out infinite;}
@keyframes cwIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@keyframes cwBreath{0%,100%{opacity:.7;}50%{opacity:1;}}
/* Landscape rack: same voice, tighter meter */
.concealed-warn.compact{margin:0 auto 3px;padding:3px 12px;font-size:10px;line-height:1.3;max-width:none;gap:6px;}
.concealed-warn.compact .cw-lock{font-size:11px;}
/* Persistent cue on the pinned bar */
.pin-concealed-tag{flex:none;font-size:10px;letter-spacing:.03em;color:#e9cd8a;border:1px solid rgba(240,185,77,.35);border-radius:999px;padding:2px 8px;white-space:nowrap;}
@media (max-width:420px){.pin-concealed-tag{display:none;}}
@media (prefers-reduced-motion:reduce){.concealed-warn{animation:none;}.cw-lock{animation:none;}}

/* ---- PWA install invitation ---------------------------------------------
   Shown on the welcome screen, below "Create a table", and (compact) in the
   waiting room — only when the app isn't installed and the browser offers a
   path (native prompt, or Share-sheet steps on iOS). */
.pwa-card{position:relative;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid rgba(232,200,105,.28);border-radius:var(--radius-md,14px);padding:14px 34px 14px 14px;margin:0 0 14px;}
.pwa-tile{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--tile-bg);border-radius:9px;box-shadow:0 2px 0 var(--gold-deep);}
.pwa-copy{flex:1;min-width:0;}
.pwa-title{font-weight:700;font-size:13.5px;color:var(--text);}
.pwa-sub{color:var(--text-dim);font-size:12px;margin-top:2px;line-height:1.4;}
.pwa-card .btn{flex:none;}
.pwa-ios-steps{margin-top:7px;font-size:12px;color:var(--gold);display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.pwa-ios-steps b{color:var(--text);font-weight:600;}
.pwa-share-ico{vertical-align:-2px;color:var(--accent);}
.pwa-dismiss{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--text-faint);font-size:12px;cursor:pointer;padding:5px;line-height:1;}
.pwa-dismiss:hover{color:var(--text-dim);}
.pwa-card.compact{padding:10px 32px 10px 12px;margin:0 0 10px;}
.pwa-card.compact .pwa-tile{width:30px;height:30px;font-size:18px;border-radius:7px;}
.pwa-card.compact .pwa-title{font-size:12.5px;}

/* --- LS additions: pinned-hand strip + drawn-tile callout ------------------
   Shown only in the landscape "Parlor" layout. The pinned strip reuses the
   portrait .pinned-bar markup (same #pinnedBarHost id, so the suggestion
   refresh path updates it for free) with a compact translucent skin. */
.ls-pinhost{min-width:0;}
.ls-pinhost:empty{display:none;}
.ls-pinhost .pinned-bar{margin:0 0 4px;padding:3px 10px;border-radius:8px;background:rgba(8,12,22,.55);border-color:rgba(240,185,77,.35);}
.ls-pinhost .pinned-pattern{font-size:11.5px;gap:4px 7px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;}
.ls-pinhost .pinned-away{font-size:10px;padding:2px 8px;}
.ls-pinhost .pin-concealed-tag{white-space:nowrap;}
.ls-drawflag{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;max-width:100%;
  font-size:clamp(12.5px,2.5vh,16.5px);font-weight:700;color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,.65);text-align:center;}
.ls-drawflag b{color:var(--gold);}
.ls-drawflag .tile.ls-drawtile{box-shadow:0 0 0 2px var(--gold),0 2px 6px rgba(0,0,0,.5);}
.ls-drawflag-tail{color:var(--gold);font-size:11px;font-weight:700;}

/* --- Landscape install modal ------------------------------------------------
   Centered dialog offered once per session when a mobile session rotates to
   landscape without the app installed. Reuses .sheet-backdrop dimming and the
   .pwa-tile / .pwa-ios-steps skins from the inline install cards. */
.pwa-modal-backdrop{align-items:center;z-index:60;padding:18px;}
.pwa-modal{position:relative;background:var(--bg);border:1px solid rgba(232,200,105,.28);border-radius:18px;
  max-width:360px;width:100%;padding:22px 20px 14px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;gap:8px;}
.pwa-modal .pwa-modal-tile{width:46px;height:46px;font-size:27px;}
.pwa-modal h2{margin:0;font-size:17px;}
.pwa-modal p{margin:0;font-size:12.5px;color:var(--text-dim);line-height:1.45;}
.pwa-modal .pwa-ios-steps{justify-content:center;margin-top:2px;}
.pwa-modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.pwa-modal-never{margin-top:2px;font-size:11px;}
@media (orientation: landscape) and (max-height: 460px){
  .pwa-modal{max-width:420px;padding:16px 18px 10px;gap:6px;}
  .pwa-modal .pwa-modal-tile{width:36px;height:36px;font-size:21px;}
}

/* ===========================================================================
   LANDSCAPE WAITING ROOM — "Setting the Table". Additive, prefixed lsl-.
   The lobby on the Parlor felt: seat plates around the table, the felt
   center is the setup console, the rack carries Start + a persistent Undo.
   UNDO of this feature: restore revision "pre-lobby-parlor" or delete this
   block + the lsl-/renderLobbyLandscape sections of app.js.
   =========================================================================== */

/* seat plates around the table */
.lsl-seat{align-items:center;justify-content:center;text-align:center;gap:3px;position:relative;min-height:92px;padding:10px 9px;}
.lsl-seat.ls-plate-top{flex:none;flex-direction:column;margin:0 auto;min-width:200px;max-width:290px;min-height:0;padding:7px 18px;gap:2px;}
.lsl-seat .ls-wind{width:26px;height:26px;font-size:12px;border:1px solid rgba(232,200,105,.35);}
.lsl-wind-dim{opacity:.45;border-color:rgba(255,255,255,.14) !important;}
.lsl-nm{font-weight:700;font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:5px;justify-content:center;}
.lsl-tag{font-size:10px;color:var(--text-dim);}
.lsl-filled{border-color:rgba(232,200,105,.3);background:rgba(232,200,105,.05);}
.lsl-you{border-color:rgba(91,141,239,.55);background:var(--accent-soft);box-shadow:0 0 14px rgba(91,141,239,.18);}
.lsl-remove{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(226,103,92,.5);
  background:rgba(226,103,92,.14);color:#f0a09a;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lsl-remove:hover{background:rgba(226,103,92,.3);}

/* open seat: dashed, gently breathing invitation */
.lsl-open{border-style:dashed;border-color:rgba(255,255,255,.16);background:rgba(0,0,0,.14);}
.lsl-open[data-act]{cursor:pointer;animation:lslBreath 3.2s ease-in-out infinite;}
.lsl-open[data-act]:hover{border-color:rgba(232,200,105,.5);background:rgba(232,200,105,.05);}
@keyframes lslBreath{0%,100%{border-color:rgba(255,255,255,.14);}50%{border-color:rgba(232,200,105,.4);}}
.lsl-open-lbl{font-size:12px;font-weight:700;color:var(--text-dim);}
.lsl-open-sub{font-size:10px;color:var(--text-faint);}
.lsl-open[data-act] .lsl-open-sub{color:#d8c489;}

/* in-plate bot-level picker */
.lsl-open.picking{border-style:solid;border-color:rgba(232,200,105,.5);background:rgba(232,200,105,.06);animation:none;gap:6px;}
.lsl-pick-title{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--gold);}
.lsl-pick-row{display:flex;flex-direction:column;gap:4px;width:100%;}
.lsl-seat.ls-plate-top .lsl-pick-row{flex-direction:row;justify-content:center;}
.lsl-lvl{border:1px solid rgba(232,200,105,.35);background:rgba(0,0,0,.3);color:#f0dca0;font-weight:700;font-size:11.5px;
  border-radius:9px;padding:6px 8px;cursor:pointer;white-space:nowrap;}
.lsl-lvl:hover{background:rgba(232,200,105,.16);}
.lsl-cancel{border:none;background:none;color:var(--text-faint);font-size:10.5px;cursor:pointer;padding:2px 6px;}
.lsl-cancel:hover{color:var(--text-dim);}

/* the setup console on the felt */
.lsl-felt{display:flex;align-items:center;justify-content:center;}
.lsl-console{position:relative;z-index:1;width:min(92%,560px);max-height:100%;overflow-y:auto;scrollbar-width:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 14px;text-align:center;}
.lsl-console::-webkit-scrollbar{display:none;}
.lsl-title{font-size:16px;font-weight:800;color:#f2f5fc;text-shadow:0 2px 6px rgba(0,0,0,.6);letter-spacing:.2px;}
.lsl-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.lsl-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#e6ecf7;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 10px;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.lsl-chip.lsl-warn{color:#f2b3ab;border-color:rgba(226,103,92,.45);}
.lsl-chip-btn{cursor:pointer;}
.lsl-chip-btn:hover{border-color:rgba(232,200,105,.5);}
.lsl-chip-x{border:none;background:none;color:#f0a09a;font-size:10px;cursor:pointer;padding:0 0 0 2px;line-height:1;}

/* labelled setting rows */
.lsl-row{display:flex;align-items:center;gap:9px;width:100%;justify-content:center;flex-wrap:wrap;}
.lsl-lbl{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:rgba(240,220,160,.8);
  text-shadow:0 1px 2px rgba(0,0,0,.6);width:44px;text-align:right;}
.lsl-seg,.lsl-rules{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;}
.lsl-mh{border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.32);color:#cfd7e6;font-weight:700;font-size:11px;
  border-radius:999px;padding:5px 12px;cursor:pointer;transition:all .12s ease;}
.lsl-mh.on{background:linear-gradient(180deg,rgba(240,214,133,.95),rgba(232,200,105,.95));color:#2b2106;border-color:var(--gold);
  box-shadow:0 2px 8px rgba(232,200,105,.35);}
.lsl-mh:disabled{cursor:default;opacity:.85;}
.lsl-rule{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.32);
  color:#9aa3b8;font-weight:700;font-size:11px;border-radius:999px;padding:5px 11px;cursor:pointer;transition:all .12s ease;}
.lsl-rule .lsl-rule-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .12s ease;}
.lsl-rule.on{color:#f0dca0;border-color:rgba(232,200,105,.45);background:rgba(232,200,105,.1);}
.lsl-rule.on .lsl-rule-dot{background:var(--gold);box-shadow:0 0 6px rgba(232,200,105,.7);}
.lsl-rule:disabled{cursor:default;}

/* invite strip */
.lsl-invite{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px;}
.lsl-invite-lbl{font-size:11px;color:#dbe4f2;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* the rack: your seat, Undo, status, Start */
.lsl-rack .ls-rack-row{align-items:center;padding-top:6px;gap:9px;}
.lsl-seat.ls-plate-me,.lsl-stage .ls-plate-me{flex:none;}
.lsl-rack .lsl-seat{min-height:0;flex-direction:row;gap:8px;padding:7px 12px;max-width:230px;}
.lsl-rack .lsl-seat .lsl-nm{font-size:12px;}
.lsl-rack .lsl-open{display:none;} /* your seat is never open; belt-and-braces */
.lsl-status{flex:1;min-width:0;text-align:center;font-size:11.5px;font-weight:700;color:var(--gold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lsl-undo{flex:none;display:inline-flex;align-items:center;gap:6px;max-width:230px;
  border:1px solid rgba(255,255,255,.18);background:var(--panel-2);color:var(--text);
  font-weight:700;font-size:11.5px;border-radius:11px;padding:8px 12px;cursor:pointer;transition:all .12s ease;}
.lsl-undo:hover:not(:disabled){border-color:rgba(232,200,105,.5);}
.lsl-undo:disabled{opacity:.4;cursor:default;}
.lsl-undo-what{font-weight:600;font-size:10px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}

/* short screens */
@media (max-height:380px){
  .lsl-seat{min-height:78px;padding:7px 7px;}
  .lsl-console{gap:6px;}
  .lsl-title{font-size:14px;}
  .lsl-undo-what{display:none;}
}
@media (prefers-reduced-motion:reduce){.lsl-open[data-act]{animation:none;}}

/* === Landscape home — "The Parlor Hall" ====================================
   Additive, prefixed lsh-. Reuses the lsl- console skin on the felt so the
   create screen and the waiting room read as one continuous space.
   UNDO of this feature: restore revision "lobby-parlor-v1". */
.lsh-stage{grid-template-columns:minmax(198px,27%) 1fr minmax(186px,25%);grid-template-rows:auto 1fr;grid-template-areas:"top top top" "left felt right";}
.lsh-brand{gap:8px;}
.lsh-logo{font-size:22px;line-height:1;}
.lsh-brandtxt{display:flex;flex-direction:column;line-height:1.15;}
.lsh-brandtxt b{font-size:14px;}
.lsh-brandtxt span{font-size:10.5px;color:var(--text-dim);}
.lsh-topfill{flex:1;}
.lsh-signout{font-size:11.5px;color:var(--accent);text-decoration:none;margin-left:4px;white-space:nowrap;}

.lsh-col{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 10px 8px;
  min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;}
.lsh-left{grid-area:left;}
.lsh-right{grid-area:right;}
.lsh-h{font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:rgba(240,220,160,.8);}
.lsh-h-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.lsh-mini{border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.3);color:#cfd7e6;font-size:9.5px;font-weight:700;
  border-radius:999px;padding:3px 8px;cursor:pointer;letter-spacing:normal;text-transform:none;}
.lsh-mini:hover{border-color:rgba(232,200,105,.4);}
.lsh-list{display:flex;flex-direction:column;gap:5px;}
.lsh-item{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:7px 9px;cursor:pointer;}
.lsh-item:hover{border-color:rgba(232,200,105,.4);}
.lsh-item-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.lsh-item-main b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lsh-item-main span{font-size:10px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lsh-go{flex:none;font-size:10px;font-weight:800;color:var(--gold);border:1px solid rgba(232,200,105,.35);border-radius:999px;padding:3px 9px;}
.lsh-empty{font-size:11px;color:var(--text-faint);padding:6px 2px;}

.lsh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.lsh-stats div{background:var(--panel-2);border-radius:9px;padding:6px 2px;text-align:center;display:flex;flex-direction:column;line-height:1.2;}
.lsh-stats b{font-size:14px;}
.lsh-stats span{font-size:8.5px;color:var(--text-dim);letter-spacing:.6px;}
.lsh-standings .strow{font-size:11px;}
.lsh-coach{margin-top:auto;}

.lsh-cards{max-width:100%;}
.lsh-card{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lsh-create{margin-top:2px;padding:10px 28px;}
.lsh-note{font-size:10px;color:#cfe0d6;text-shadow:0 1px 3px rgba(0,0,0,.6);max-width:430px;}

@media (max-height:380px){
  .lsh-note{display:none;}
  .lsh-col{padding:7px;gap:4px;}
  .lsh-create{padding:8px 22px;}
}

/* Pinned-instance fix: a pin whose exact instance can no longer be completed
   (blocked by an exposure, or not on this table's card) renders dimmed with a
   clear badge instead of silently vanishing or morphing. */
.pinned-bar.pinned-dead{opacity:.62;}
.pinned-away.dead{background:rgba(220,80,80,.16);color:#d47070;}

/* --- Pass on the felt (claim windows) ------------------------------------ */
/* An elegant porcelain pill sitting with the discarded tile, in both the
   landscape center claim card and the portrait table center. */
.felt-pass{
  margin-top:10px;
  background:linear-gradient(180deg,#ffffff,#f2f4f8);
  color:#1d3557;
  border:1px solid rgba(29,53,87,.18);
  border-radius:999px;
  padding:6px 18px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.22), inset 0 1px 0 #fff;
  transition:transform .08s ease, box-shadow .08s ease;
}
.felt-pass:hover{box-shadow:0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 #fff;}
.felt-pass:active{transform:scale(.95);}
.felt-pass-sm{margin-top:8px;padding:7px 24px;font-size:12.5px;}
.ls-claim-wait{
  margin-top:9px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.03em;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.22);
  border-radius:999px;
  padding:5px 14px;
}
.pending-row .ls-claim-wait{color:#5a6b85;background:rgba(29,53,87,.08);}

/* --- Landscape claim row: [Claim] tile [Pass] ---------------------------- */
.ls-claim-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.3vw,12px);max-width:100%;}
.ls-claim-side{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ls-claim-side.left{align-items:flex-end;}
.ls-claim-side.right{align-items:flex-start;}
.ls-claim-side .felt-pass{margin-top:0;}
.felt-claim{
  background:linear-gradient(180deg,#ffd97a,#eab348);
  color:#4a3200;
  border:1px solid rgba(122,84,10,.35);
  border-radius:999px;
  padding:6px 18px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .08s ease, box-shadow .08s ease;
  white-space:nowrap;
}
.felt-claim:hover{box-shadow:0 4px 15px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.55);}
.felt-claim:active{transform:scale(.95);}
.felt-claim.gold{box-shadow:0 0 0 2px rgba(255,215,120,.5), 0 3px 14px rgba(232,200,105,.5), inset 0 1px 0 rgba(255,255,255,.6);}
.felt-claim-pick{display:flex;flex-direction:column;gap:6px;animation:ls-pop .18s ease;}
.felt-claim-type{padding:5px 15px;font-size:11.5px;}


/* --- Suggested-hands sheet: handlebar close + edge-to-edge content -------- */
.sheet-grab{position:sticky;top:0;z-index:3;display:flex;justify-content:center;padding:10px 0 6px;cursor:pointer;background:var(--bg);border-radius:20px 20px 0 0;}
.sheet-grab span{width:48px;height:5px;border-radius:999px;background:rgba(255,255,255,.26);transition:background .15s ease,width .15s ease;}
.sheet-grab:hover span,.sheet-grab:active span{background:rgba(255,255,255,.5);width:58px;}
.sheet-tools{display:flex;justify-content:flex-end;align-items:center;padding:0 8px 4px;}
.sheet-tools .toggle-btn{font-size:11px;padding:4px 10px;}
.sheet-body-suggest{padding:0 4px 22px;}
.sheet-body-suggest .suggestions-panel{background:transparent;border-radius:0;}
.sheet-body-suggest .suggestion-row{padding:11px 8px;gap:8px;}
.sheet-body-suggest .suggestion-tiles{font-size:15px;gap:4px 9px;}
.sheet-body-suggest .suggestion-detail{padding:2px 8px 14px 30px;}

/* --- portrait discards: per-player rivers + tap-to-enlarge peek --------- */
.disc-river{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin-top:5px;padding:3px 4px;border-radius:8px;background:rgba(0,0,0,.2);box-shadow:inset 0 1px 5px rgba(0,0,0,.25);cursor:pointer;max-width:100%;--ls-xs:18px;}
.disc-river:hover{background:rgba(0,0,0,.28);}
.disc-river .disc-more{font-size:10px;font-weight:800;color:var(--text-dim);margin-right:3px;align-self:center;flex:none;}
.opp .disc-river{--ls-xs:17px;}
.opp.turn .disc-river{background:rgba(232,200,105,.12);}
.my-river-wrap{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.my-river-lbl{font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--text-dim);flex:none;}
.my-river-wrap .disc-river{--ls-xs:20px;flex:1 1 auto;min-width:0;margin-top:0;}
.pt-drain{width:100%;margin-top:10px;}
.pt-peek-backdrop{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:20px;animation:ptFade .14s ease both;}
.pt-peek-backdrop .ls-peek{position:relative;left:auto;top:auto;transform:none;max-width:min(94%,560px);max-height:82vh;animation:ptPeekIn .16s ease both;}
@keyframes ptFade{from{opacity:0;}to{opacity:1;}}
@keyframes ptPeekIn{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.pt-peek-backdrop,.pt-peek-backdrop .ls-peek{animation:none;}}