@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;
}
/* Hand Coach — "paper card" palette. Same colors as the in-game card overlay
   (cream stock, navy section bars, blue/red/green suit ink) so the coach reads
   like the printed card a player holds at a real table. */
:root{
  --bg:#efe7d3;
  --panel:#f9f4e6;
  --panel-2:#f1e9d4;
  --panel-3:#e9dfc6;
  --line:#d8cdb2;
  --line-soft:#e6ddc6;
  --ink:#20242e;
  --text:#20242e;
  --text-dim:#6d6350;
  --text-faint:#8d8268;
  --title:#3b2f16;
  --navy:#243b63;
  --navy-2:#1b2d4d;
  --cream:#f6f1e2;
  --accent:#243b63;
  --accent-soft:rgba(36,59,99,.09);
  --link:#1d4ed8;
  --pin-active:#b7791f;
  --crak:#b91c1c;
  --bam:#15803d;
  --dot:#1d4ed8;
  --soap:#0e7490;
  --ok:#15803d;
  --rack2:#8b2fc9;
  --tile-bg:#fffdf8;
  --t-wind:#6a5cc0;
  --t-flower:#cf4f86;
  --badge-bg:#e9dfc6;
  --radius-lg:14px;
  --radius-md:10px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --tw:44px;
  --sticky-h:0px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);}
button{font-family:inherit;}
.app{max-width:760px;margin:0 auto;padding:10px 14px 56px;}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:10px;padding:4px 2px 10px;}
.topbar-left{display:flex;gap:8px;}
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--title);
  font-size:15px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;flex:none;
}
.icon-btn:hover{background:var(--panel-3);}
.topbar-title{flex:1;min-width:0;}
.topbar-title h1{font-size:17px;margin:0;font-weight:800;letter-spacing:.1px;color:var(--title);}
.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(--link);text-decoration:none;}
.topbar-right a:hover{text-decoration:underline;}

/* ---- pattern text (shared by pins, closest list, card) ---- */
.grp{font-family:var(--serif);font-weight:700;letter-spacing:.05em;white-space:nowrap;color:var(--ink);}
.grp.num-dot{color:var(--dot);}
.grp.num-bam{color:var(--bam);}
.grp.num-crak{color:var(--crak);}
.grp.dragon-R{color:var(--crak);}
.grp.dragon-G{color:var(--bam);}
.grp.dragon-W{color:var(--soap);}
.grp.joker{color:#a16207;}
.grp.done{
  background:rgba(21,128,61,.11);
  box-shadow:inset 0 0 0 1px rgba(21,128,61,.38);
  border-radius:5px;padding:0 4px 0 4px;margin:0 -1px;
}
.grp.done::after{content:'\2713';font-family:var(--sans);font-size:.62em;font-weight:900;color:var(--ok);margin-left:2px;vertical-align:1px;letter-spacing:0;}

/* ---- pinned target hands ---- */
.pinned-stack{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.pinned-bar{
  display:flex;align-items:center;gap:10px;
  background:#fdf6df;
  border:1px solid #e3c98a;
  border-radius:var(--radius-md);
  padding:8px 12px;
}
.pin-ico{font-size:13px;flex-shrink:0;}
.pinned-pattern{flex:1;min-width:0;font-size:14px;display:flex;flex-wrap:wrap;gap:3px 9px;}
.pin-concealed-tag{flex:none;font-size:10px;letter-spacing:.03em;color:#7c2d12;border:1px solid rgba(124,45,18,.4);border-radius:999px;padding:2px 8px;white-space:nowrap;}
@media (max-width:420px){.pin-concealed-tag{display:none;}}
.pinned-away{font-size:11.5px;font-weight:700;background:var(--badge-bg);color:var(--title);padding:4px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.pinned-bar.pinned-dead{opacity:.62;}
.pinned-away.dead{background:rgba(185,28,28,.12);color:#b91c1c;}
.link-btn{background:none;border:none;color:var(--text-dim);font-size:11.5px;cursor:pointer;text-decoration:underline;flex-shrink:0;padding:0;}
.link-btn:hover{color:var(--ink);}

/* ---- the rack (hand tray) ---- */
.rack{display:contents;}
.tray-stick{position:sticky;top:0;z-index:5;background:var(--bg);padding:4px 0 8px;}
.hand-tray{
  display:flex;gap:6px;flex-wrap:wrap;
  background:linear-gradient(180deg,#e6dbbf,#dccfae);
  border:1px solid #cabb97;border-radius:var(--radius-lg);
  padding:10px 12px;min-height:62px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(80,60,20,.12);
}
.app .tray-stick .hand-tray{--tw:min(44px,calc((100vw - 28px - 26px - 36px) / 7));}
.tray-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;flex-wrap:wrap;}
.tray-hint{font-size:11.5px;color:var(--text-dim);flex:1;min-width:140px;}
.tray-btns{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.shuffle-btn{
  background:var(--panel);color:var(--title);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:12.5px;font-weight:700;cursor:pointer;flex-shrink:0;
}
.shuffle-btn:hover{background:var(--panel-3);}
.shuffle-btn.setup-primary{background:var(--navy);border-color:var(--navy);color:var(--cream);}
.shuffle-btn.setup-primary:hover{background:var(--navy-2);}
.shuffle-btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---- tiles ---- */
.tile{
  width:var(--tw);height:calc(var(--tw) * 1.364);border-radius:calc(var(--tw) * .2);background:var(--tile-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(60,47,22,.16),0 2px 0 rgba(60,47,22,.22),0 4px 8px rgba(60,47,22,.16);
  position:relative;transition:transform .15s ease,box-shadow .15s ease;flex-shrink:0;overflow:hidden;
}
.tile .sprite{position:absolute;inset:0;display:block;background-repeat:no-repeat;}
.tile .pict{font-family:'MahjongGlyphs',sans-serif;font-size:calc(var(--tw) * .86);line-height:1;font-weight:400;}
.tile .num{font-size:calc(var(--tw) * .41);font-weight:800;line-height:1;}
.tile .sub{font-size:calc(var(--tw) * .2);margin-top:3px;opacity:.85;letter-spacing:.1px;white-space:nowrap;max-width:calc(var(--tw) - 6px);overflow:hidden;}
.tile .idx{position:absolute;top:3px;left:5px;font-size:calc(var(--tw) * .3);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(--t-wind);font-size:calc(var(--tw) * .43);}
.tile.dragon-R .pict,.tile.dragon-R .num{color:var(--crak);font-size:calc(var(--tw) * .43);}
.tile.dragon-G .pict,.tile.dragon-G .num{color:var(--bam);font-size:calc(var(--tw) * .43);}
.tile.dragon-W .pict,.tile.dragon-W .num{color:#7c8699;font-size:calc(var(--tw) * .43);}
.tile.flower{background:linear-gradient(160deg,#fff,#fbe3ec);}
.tile.flower .pict,.tile.flower .num{color:var(--t-flower);font-size:calc(var(--tw) * .43);}
.tile.joker{background:linear-gradient(160deg,#fff8e1,#fde9a8);}
.tile.joker .num{font-size:calc(var(--tw) * .43);color:#a16207;}

.tile.match{box-shadow:0 0 0 2.5px var(--navy),0 5px 10px rgba(36,59,99,.35);transform:translateY(-3px);}
.tile.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(60,47,22,.3);border:none;outline:none;}
.tile.ghost{background-image:none;}
.tile.ghost .pict,.tile.ghost .num,.tile.ghost .sub,.tile.ghost .idx{opacity:.4;}
.tile.ghost .sprite{opacity:.3;}
.tile.joker-sub{box-shadow:0 0 0 2.5px var(--pin-active),0 3px 6px rgba(60,47,22,.18);}

/* ---- toolbar: view switch + concealed toggle ---- */
.toolbar{display:flex;align-items:center;gap:10px;margin:0 0 10px;}
.seg{display:inline-flex;background:var(--panel-3);border:1px solid var(--line);border-radius:999px;padding:3px;}
.seg button{
  border:none;background:none;font-size:12.5px;font-weight:700;color:var(--text-dim);
  padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.seg button[aria-selected="true"]{background:var(--navy);color:var(--cream);}
.toolbar-title{display:none;margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.toggle-btn{
  margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--text-dim);font-size:11.5px;font-weight:600;padding:6px 11px;cursor:pointer;white-space:nowrap;
}
.toggle-btn:hover{color:var(--ink);background:var(--panel);}
.toggle-btn[aria-pressed="true"]{background:var(--panel);color:var(--ink);border-color:#bfb18c;}

/* ---- panes ---- */
.pane{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:0 6px 18px rgba(80,60,20,.10),inset 0 0 44px rgba(120,90,30,.05);
  overflow:hidden;
}
.app[data-view="closest"] .pane-card{display:none;}
.app[data-view="card"] .pane-closest{display:none;}

/* ---- away badges ---- */
.away-badge{
  font-size:11.5px;font-weight:700;background:var(--badge-bg);color:var(--text-dim);
  padding:5px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0;
}
.away-badge.near{color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(36,59,99,.45);background:transparent;}
.away-badge.best{background:var(--navy);color:var(--cream);}
.away-badge.ready{background:var(--ok);color:#fff;}

/* ---- closest-first list ---- */
.list-count{padding:8px 14px;font-size:11.5px;color:var(--text-dim);border-bottom:1px solid var(--line-soft);background:#fbf7ec;}
.list-count b{color:var(--title);}
.suggestion-row{
  display:flex;align-items:center;gap:8px;padding:9px 12px 9px 8px;
  border-top:1px solid var(--line-soft);cursor:pointer;
}
.suggestions-list > .suggestion-row:first-child,.list-count + .suggestion-row{border-top:none;}
.suggestion-row:nth-of-type(even){background:rgba(120,90,30,.035);}
.suggestion-row:hover{background:rgba(36,59,99,.05);}
.suggestion-row.selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--navy);}
.pin-toggle{background:none;border:none;font-size:14px;cursor:pointer;flex-shrink:0;padding:6px 4px;line-height:1;opacity:.3;filter:grayscale(1);transition:opacity .15s ease,filter .15s ease;}
.pin-toggle.pinned{opacity:1;filter:none;}
.pin-toggle:hover{opacity:.7;}
.pin-toggle.pinned:hover{opacity:1;}
.suggestion-main{flex:1;min-width:0;}
.suggestion-meta{display:flex;gap:4px 8px;align-items:center;margin-bottom:3px;flex-wrap:wrap;}
.section-label{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--navy);text-transform:uppercase;}
.note{font-size:11.5px;color:var(--text-dim);font-style:italic;font-family:var(--serif);}
.suggestion-tiles{font-size:15.5px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pc-pts{font-weight:800;font-size:11px;background:var(--title);color:var(--cream);border-radius:999px;padding:1px 7px;flex:none;}
.pc-c{font-weight:900;font-size:10.5px;color:#7c2d12;border:1.5px solid #7c2d12;border-radius:4px;padding:0 4px;flex:none;line-height:1.35;}

.suggestion-detail{padding:6px 12px 12px 38px;display:flex;flex-wrap:wrap;gap:6px;--tw:34px;background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--navy);}
.suggestion-detail .tile .idx{top:2px;left:3px;}
.detail-legend{padding:0 12px 12px 38px;display:flex;gap:14px;font-size:10.5px;color:var(--text-dim);flex-wrap:wrap;background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--navy);}
.detail-legend span{display:flex;align-items:center;gap:5px;}
.legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;}
.legend-dot.have{box-shadow:inset 0 0 0 2px var(--navy);background:#fff;}
.legend-dot.joker{box-shadow:inset 0 0 0 2px var(--pin-active);background:#fff;}
.legend-dot.missing{box-shadow:inset 0 0 0 1.5px rgba(60,47,22,.35);}

.empty{padding:24px 16px;text-align:center;color:var(--text-dim);font-size:13px;}
.footnote{font-size:10.5px;color:var(--text-faint);text-align:center;margin-top:16px;}

/* ---- the card, in printed order ---- */
.paper-card{color:var(--ink);padding:14px 10px 12px;font-family:var(--serif);}
.pc-title{text-align:center;font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--title);}
.pc-sub{text-align:center;font-size:11.5px;color:var(--text-dim);margin:4px 0 10px;font-family:var(--sans);line-height:1.55;}
.pc-sub .k1{color:var(--dot);font-weight:700;}
.pc-sub .k2{color:var(--crak);font-weight:700;}
.pc-sub .k3{color:var(--bam);font-weight:700;}
.pc-jump{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin:0 -2px;scrollbar-width:none;}
.pc-jump::-webkit-scrollbar{display:none;}
.pc-jump button{
  flex:none;border:1px solid var(--line);background:#fbf7ec;color:var(--navy);border-radius:999px;
  font-family:var(--sans);font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer;white-space:nowrap;
}
.pc-jump button:hover{background:var(--panel-3);}
.pc-section{margin-bottom:12px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fbf7ec;scroll-margin-top:calc(var(--sticky-h) + 8px);break-inside:avoid;}
.pc-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--navy);color:var(--cream);font-family:var(--sans);font-weight:800;font-size:11.5px;letter-spacing:.12em;padding:6px 10px;
}
.pc-section-best{font-weight:600;font-size:10.5px;letter-spacing:.02em;opacity:.85;white-space:nowrap;}
.pc-hand{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:8px;row-gap:1px;align-items:center;
  padding:7px 10px 7px 7px;border-top:1px solid var(--line-soft);cursor:pointer;scroll-margin-top:calc(var(--sticky-h) + 40px);
}
.pc-section-head + .pc-hand{border-top:none;}
.pc-hand.alt{background:#f5efdd;}
.pc-hand:hover{background:rgba(36,59,99,.06);}
.pc-hand.t-best{background:#fbf0cf;}
.pc-hand.selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--navy);}
.pc-hand.dim{opacity:.36;}
.pc-hand.flash{animation:pcflash 1.1s ease-out;}
@keyframes pcflash{0%{background:#f6d77a;}100%{}}
.pc-away{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:11.5px;font-weight:800;color:var(--text-dim);background:var(--badge-bg);
}
.pc-away.near{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(36,59,99,.5);}
.pc-away.best{background:var(--navy);color:var(--cream);}
.pc-away.ready{background:var(--ok);color:#fff;}
.pc-pattern{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-or{font-family:var(--sans);font-size:11px;font-style:italic;font-weight:600;color:var(--text-dim);align-self:center;}
.pc-hand.pc-or-row{border-top:none;padding-top:1px;}
.pc-n{color:var(--ink);}
.pc-s1{color:var(--dot);}
.pc-s2{color:var(--crak);}
.pc-s3{color:var(--bam);}
.pc-r{color:var(--crak);}
.pc-g{color:var(--bam);}
.pc-b{color:var(--soap);}
.pc-side{display:flex;align-items:center;gap:6px;font-family:var(--sans);}
.pc-side .pc-pts{font-size:12px;padding:2px 8px;}
.pc-side .pc-c{font-size:11px;}
.pc-pinmark{font-size:12px;}
.pc-note{grid-column:2 / -1;font-style:italic;font-size:12px;color:var(--text-dim);}
.pc-detail{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--navy);padding:8px 10px 10px 41px;font-family:var(--sans);}
.pc-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--text-dim);margin-bottom:6px;}
.pc-detail-head b{color:var(--navy);}
.mini-btn{border:1px solid var(--line);background:var(--panel);color:var(--title);border-radius:999px;font-size:11px;font-weight:700;padding:4px 10px;cursor:pointer;white-space:nowrap;}
.mini-btn.on{background:#fdf0c4;border-color:#e3c98a;}
.pc-detail .suggestion-tiles{margin-bottom:8px;}
.pc-detail .suggestion-detail,.pc-detail .detail-legend{padding:0;background:none;box-shadow:none;}
.pc-detail .detail-legend{margin-top:8px;}
.pc-foot{margin-top:6px;text-align:center;font-size:11px;color:var(--text-dim);font-family:var(--sans);line-height:1.5;}

/* ---- sheets (settings, set up hand) ---- */
.settings-section{padding:2px 2px 4px;}
.settings-label{font-size:13.5px;margin:0 0 6px;font-weight:800;color:var(--title);}
.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);border:2px solid var(--line);cursor:pointer;text-align:left;width:100%;color:inherit;}
.theme-card:hover{background:var(--panel-2);}
.theme-card.selected{border-color:var(--navy);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(--navy);font-weight:800;}
.theme-blurb{font-size:12px;color:var(--text-dim);margin-top:2px;}
.sheet-backdrop{position:fixed;inset:0;background:rgba(40,30,10,.45);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(40,30,10,.35);}
.sheet-head{position:sticky;top:0;background:var(--bg);display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);z-index:2;}
.sheet-head h2{flex:1;margin:0;font-size:15px;font-weight:800;color:var(--title);}
.sheet-body{padding:14px 16px 24px;}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--title);border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;}
.btn:hover{background:var(--panel-3);}
.btn-block{display:block;width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.muted{color:var(--text-dim);}

@media (max-width:380px){
  :root{--tw:38px;}
  .topbar-title p{display:none;}
  .seg button{padding:7px 11px;}
}

/* ---- 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:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:inherit;font:inherit;cursor:pointer;}
.card-row.selected{border-color:var(--navy);background:var(--accent-soft);}
.card-row .card-radio{font-size:14px;color:var(--navy);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;color:var(--text-dim);}
.card-row .card-del{flex:none;opacity:.8;width:30px;height:30px;}
.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:var(--panel);border:1px solid var(--line);}
.scan-status.ok{border-color:rgba(21,128,61,.5);background:rgba(21,128,61,.09);}
.scan-status.err{border-color:rgba(185,28,28,.5);background:rgba(185,28,28,.08);}
.scan-status .scan-skipped{margin-top:8px;font-size:11.5px;opacity:.85;}

/* ---- Set up hand (table-hand picker) ---- */
.setup-sheet{max-height:92vh;}
.setup-body{padding-bottom:28px;}
.setup-lead{margin:0 0 12px;font-size:12.5px;color:var(--text-dim);line-height:1.45;}
.setup-draft-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.setup-count{font-size:12.5px;font-weight:700;color:var(--text-dim);}
.setup-count.ready{color:var(--ok);}
.setup-draft{min-height:74px;margin-bottom:8px;}
.setup-draft-empty{width:100%;padding:10px 4px;font-size:12.5px;color:var(--text-dim);}
.setup-error{margin:0 0 10px;font-size:12px;color:#b91c1c;}
.setup-palette{display:flex;flex-direction:column;gap:14px;margin:14px 0 18px;}
.setup-row-label{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--navy);margin-bottom:8px;}
.setup-row-tiles{display:flex;flex-wrap:wrap;gap:8px;}
.setup-pick{position:relative;padding:0;border:none;background:transparent;cursor:pointer;border-radius:10px;line-height:0;}
.setup-pick:hover:not(.disabled) .tile{transform:translateY(-2px);box-shadow:0 0 0 2px var(--navy),0 5px 10px rgba(36,59,99,.3);}
.setup-pick.disabled{opacity:.35;cursor:not-allowed;}
.setup-pick.used .tile{box-shadow:0 0 0 2px rgba(36,59,99,.6),0 3px 6px rgba(60,47,22,.16);}
.setup-used-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--navy);color:var(--cream);font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.setup-draft .tile.setup-removable{cursor:pointer;}
.setup-draft .tile.setup-removable:hover{box-shadow:0 0 0 2px #b91c1c,0 3px 6px rgba(60,47,22,.16);}
.setup-actions{display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;padding-top:10px;background:linear-gradient(180deg,transparent,var(--bg) 28%);}
.setup-actions .setup-apply,.setup-confirm-actions .setup-apply{background:var(--navy);border-color:var(--navy);color:var(--cream);}
.setup-actions .setup-apply:hover,.setup-confirm-actions .setup-apply:hover{background:var(--navy-2);}
.setup-confirm{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(40,30,10,.5);}
.setup-confirm-box{width:100%;max-width:380px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;box-shadow:0 12px 40px rgba(40,30,10,.4);}
.setup-confirm-box h3{margin:0 0 6px;font-size:16px;font-weight:800;color:var(--title);}
.setup-confirm-box p{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--text);}
.setup-confirm-actions{display:flex;flex-direction:column;gap:8px;}
.setup-confirm-actions .shuffle-btn{width:100%;justify-content:center;text-align:center;padding:12px 16px;font-size:14px;}
.setup-confirm-actions .setup-discard{color:#b91c1c;border-color:rgba(185,28,28,.45);}
.setup-confirm-actions .setup-discard:hover{background:rgba(185,28,28,.08);}
@media (orientation:landscape) and (max-height:480px){
  .setup-confirm-box{max-width:560px;padding:14px 16px;}
  .setup-confirm-box p{margin-bottom:12px;}
  .setup-confirm-actions{flex-direction:row-reverse;}
  .setup-confirm-actions .shuffle-btn{width:auto;flex:1 1 0;min-width:0;padding:10px 12px;font-size:13px;white-space:nowrap;}
}
.setup-photo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.setup-photo-hint{font-size:11.5px;color:var(--text-dim);}
.setup-scan-status{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;background:var(--panel);border:1px solid var(--line);}
.setup-scan-status.ok{border-color:rgba(21,128,61,.5);background:rgba(21,128,61,.09);}
.setup-scan-status.err{border-color:rgba(185,28,28,.5);background:rgba(185,28,28,.08);}
.setup-scan-notes{display:block;margin-top:6px;font-size:11.5px;opacity:.85;}

/* ==========================================================================
   Landscape / wide: the table view. Your rack runs across the top in one row;
   underneath, the closest hands sit beside the full card, the way you'd keep
   the printed card next to your rack. Both lists are always visible, so the
   Closest/Card switch is not needed here.
   ========================================================================== */
@media (orientation:landscape) and (min-width:700px){
  html,body{height:100%;overflow:hidden;}
  .app{
    max-width:1760px;height:100vh;height:100dvh;padding:6px 12px 8px;
    display:grid;column-gap:12px;
    grid-template-columns:minmax(290px,38%) minmax(0,1fr);
    grid-template-rows:auto auto auto auto minmax(0,1fr);
    grid-template-areas:"top top" "rack rack" "pins card" "tools card" "closest card";
  }
  .topbar{grid-area:top;padding:0 2px 6px;}
  .rack{grid-area:rack;display:flex;align-items:stretch;gap:10px;margin-bottom:8px;min-width:0;}
  .tray-stick{position:static;flex:1;min-width:0;padding:0;background:none;}
  .app .tray-stick .hand-tray{
    flex-wrap:nowrap;overflow-x:auto;padding:8px 12px;gap:5px;min-height:0;height:100%;align-items:center;
    --tw:clamp(30px,calc((100vw - 24px - 26px - 65px - 150px) / 14),46px);
  }
  .tray-actions{margin:0;flex:none;flex-direction:column;justify-content:center;align-items:stretch;gap:6px;}
  .tray-hint{display:none;}
  .tray-btns{flex-direction:column;gap:6px;}
  .shuffle-btn{padding:6px 14px;}
  .pinned-stack{grid-area:pins;margin-bottom:8px;max-height:26vh;overflow-y:auto;}
  .toolbar{grid-area:tools;margin-bottom:6px;min-height:30px;}
  .seg{display:none;}
  .toolbar-title{display:block;}
  .pane{min-height:0;overflow-y:auto;overscroll-behavior:contain;}
  .pane-closest{grid-area:closest;}
  .pane-card{grid-area:card;}
  .app[data-view="closest"] .pane-card,.app[data-view="card"] .pane-closest{display:block;}
  .footnote{display:none;}
  .paper-card{padding:10px 10px 10px;}
  .pc-title{font-size:15px;}
  .pc-sub{margin-bottom:8px;}
  .pc-section,.pc-hand{scroll-margin-top:6px;}
  .suggestion-tiles{font-size:14.5px;}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:520px){
  .topbar{padding-bottom:4px;}
  .topbar-title{display:flex;align-items:baseline;gap:10px;}
  .topbar-title h1{font-size:15px;}
  .topbar-title p{margin:0;}
  .icon-btn{width:30px;height:30px;font-size:13px;}
  .app .tray-stick .hand-tray{padding:6px 10px;--tw:clamp(28px,calc((100vw - 24px - 22px - 65px - 150px) / 14),38px);}
  .rack{margin-bottom:6px;}
  .shuffle-btn{padding:5px 12px;font-size:12px;}
  .toolbar{margin-bottom:4px;}
  .pc-jump,.pc-sub-hint,.list-count{display:none;}
  .pc-sub{margin-bottom:6px;}
}
/* Wide screens: the card unfolds into columns like the printed tri-fold. */
@media (orientation:landscape) and (min-width:1180px){
  .pc-sections{columns:2;column-gap:12px;}
}
@media (orientation:landscape) and (min-width:1640px){
  .app{grid-template-columns:minmax(320px,30%) minmax(0,1fr);}
  .pc-sections{columns:3;}
}

/* ==========================================================================
   Two-hand mode (two-player game: two racks each, finish both hands)
   ========================================================================== */
.topbar{flex-wrap:wrap;}
.topbar-title{flex:1 1 0;}
.mode-switch{order:9;flex:0 0 100%;display:flex;margin-top:8px;}
.mode-switch button{flex:1;padding:7px 10px;}
.mode-sub{font-weight:500;opacity:.8;}
.app[data-mode="two"] .pinned-stack{display:none !important;}
.app[data-mode="two"] .tray-stick .hand-tray{gap:5px;--tw:min(40px,calc((100vw - 28px - 26px - 40px) / 9));}
.tile.match.r2{box-shadow:0 0 0 2.5px var(--rack2),0 5px 10px rgba(134,47,201,.3);}
.rack-no{
  flex:none;width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:11px;font-weight:800;color:#fff;background:var(--navy);margin-top:1px;
}
.rack-no.r2{background:var(--rack2);}
.rack-no.spare{background:var(--badge-bg);color:var(--text-dim);}
.plan-row{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 10px;border-top:1px solid var(--line-soft);cursor:pointer;}
.list-count + .plan-row{border-top:none;}
.plan-row:hover{background:rgba(36,59,99,.05);}
.plan-row.selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--navy);}
.plan-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.plan-hand{display:flex;align-items:flex-start;gap:8px;}
.plan-hand-main{flex:1;min-width:0;}
.plan-away{flex:none;min-width:16px;text-align:right;font-size:11.5px;font-weight:800;color:var(--text-dim);padding-top:1px;}
.plan-detail{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--navy);padding:2px 12px 12px;}
.plan-detail .suggestion-detail,.plan-detail .detail-legend{padding:0;background:none;box-shadow:none;}
.plan-detail .suggestion-detail{--tw:32px;gap:5px;}
.plan-detail .detail-legend{margin-top:10px;}
.rack-block{margin-top:8px;}
.rack-head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--title);margin-bottom:6px;}
.rack-head .rack-no{margin-top:0;}
.list-count.anchor{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pc-hand.anchored{box-shadow:inset 3px 0 0 var(--pin-active);}
.pc-hand.selected.anchored{box-shadow:inset 3px 0 0 var(--navy);}
.pc-side .rack-no{margin-top:0;}
@media (max-width:380px){
  .app[data-mode="two"] .tray-stick .hand-tray{--tw:min(36px,calc((100vw - 28px - 26px - 40px) / 9));}
}
@media (orientation:landscape) and (min-width:700px){
  .mode-switch{order:0;flex:0 0 auto;margin:0;}
  .mode-switch button{flex:none;padding:5px 12px;}
  .mode-sub{display:none;}
  .app[data-mode="two"] .tray-stick .hand-tray{
    flex-wrap:wrap;align-content:center;overflow-x:visible;
    --tw:clamp(24px,calc((100vw - 24px - 26px - 65px - 150px) / 14),38px);
  }
}
@media (orientation:landscape) and (min-width:700px) and (max-height:520px){
  .app[data-mode="two"] .tray-stick .hand-tray{--tw:clamp(22px,calc((100vw - 24px - 22px - 65px - 150px) / 14),30px);}
}