:root {
  color-scheme: dark;
  --bg:#0b0f14; --panel:#111821; --panel2:#17212d; --line:#263444;
  --text:#f4f7fb; --muted:#95a4b6; --accent:#5ed49b; --danger:#ff6b78;
  --warn:#ffd166; --blue:#70a5ff; --shadow:0 12px 40px rgba(0,0,0,.24);
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at top,#16202b 0,#0b0f14 42%);color:var(--text);font:15px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input,select{font:inherit} button{cursor:pointer}
.app-shell{width:min(1180px,100%);margin:auto;padding:16px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.2px}.brand-mark{font-size:20px}.muted{color:var(--muted)}
.icon-btn,.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:10px 14px}.btn:hover,.icon-btn:hover{filter:brightness(1.08)}
.btn.primary{background:var(--accent);border-color:transparent;color:#062317;font-weight:800}.btn.danger{background:#34181d;color:#ffd8dc;border-color:#5a272e}.btn.ghost{background:transparent}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.small{padding:7px 10px;border-radius:10px;font-size:13px}
.hero{display:grid;place-items:center;min-height:74vh;text-align:center}.hero-card{width:min(640px,100%);padding:26px;border:1px solid var(--line);background:rgba(17,24,33,.88);backdrop-filter:blur(10px);border-radius:24px;box-shadow:var(--shadow)}
.suits{font-size:34px;letter-spacing:9px;margin-bottom:6px}.heart,.diamond{color:#ff6f7d}.hero h1{font-size:clamp(34px,8vw,60px);line-height:1;margin:8px 0}.hero p{color:var(--muted);margin:10px auto 22px;max-width:440px}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.menu-card{border:1px solid var(--line);border-radius:18px;background:var(--panel2);padding:20px;text-align:left;color:var(--text);min-height:132px}.menu-card strong{display:block;font-size:21px;margin-bottom:4px}.menu-card span{color:var(--muted)}.menu-card:hover{transform:translateY(-1px);border-color:#3d5269}
.panel{border:1px solid var(--line);background:rgba(17,24,33,.94);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.setup{width:min(700px,100%);margin:30px auto}.setup h2{margin:0 0 4px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.field label{display:block;color:var(--muted);font-size:13px;margin-bottom:5px}.field input,.field select{width:100%;border:1px solid var(--line);background:#0d141d;color:var(--text);border-radius:11px;padding:11px 12px;outline:none}.field input:focus,.field select:focus{border-color:var(--blue)}.player-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px 12px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{font-size:15px}.game-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);gap:12px}.table-area{position:relative;min-height:520px}.table-felt{background:radial-gradient(circle at center,#153829,#0d241a 72%);border:1px solid #28513f;border-radius:22px;min-height:520px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.opponents{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.player-chip{background:rgba(6,17,12,.72);border:1px solid rgba(255,255,255,.13);padding:8px 10px;border-radius:12px;text-align:center;min-width:90px}.player-chip.active{outline:2px solid var(--warn)}.player-chip .bid{color:var(--warn);font-size:12px}.player-chip .tricks{color:var(--accent);font-size:12px}.trick-area{display:flex;align-items:center;justify-content:center;gap:10px;min-height:156px;flex-wrap:wrap}.played-card-wrap{text-align:center}.played-card-wrap small{display:block;color:#dce6df;margin-top:4px}.hand-wrap{margin-top:10px}.hand{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.card{width:64px;height:92px;background:#f8fafc;color:#101418;border:0;border-radius:10px;box-shadow:0 5px 14px rgba(0,0,0,.26);padding:7px;text-align:left;font-weight:800;position:relative}.card.red{color:#d9283d}.card .rank{font-size:18px}.card .suit{font-size:21px}.card .corner{position:absolute;right:7px;bottom:5px;font-size:25px}.card.playable:hover{transform:translateY(-5px)}.card.disabled{opacity:.42;cursor:not-allowed}.hand-label{text-align:center;margin-bottom:8px;color:#dce6df}.side-panel{display:flex;flex-direction:column;gap:12px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.section-title h3{margin:0;font-size:16px}.score-list{display:grid;gap:7px}.score-row{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:7px 8px;border-radius:10px;background:#0d141d}.score-row.me{border:1px solid #315849}.score-row .rank-num{color:var(--muted)}.score-row strong{font-variant-numeric:tabular-nums}.phase-box{padding:12px;border-radius:13px;background:#0d141d;border:1px solid var(--line)}.phase-box h3{margin:0 0 7px}.phase-box p{margin:5px 0;color:var(--muted)}.bid-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.bid-btn{width:44px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:800}.bid-btn.selected{background:var(--accent);color:#052116;border-color:transparent}.tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.tip-cell{background:#17212d;border-radius:10px;padding:7px;text-align:center}.tip-cell strong{display:block}.notice{padding:9px 10px;border-radius:10px;background:#18261f;color:#bce8d2;border:1px solid #294738;font-size:13px}.notice.warn{background:#2a2414;color:#f8dfa1;border-color:#4c4020}.round-end{display:grid;gap:8px}.round-result{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:8px 9px;border-radius:10px;background:#0d141d}.plus{color:var(--accent)}.zero{color:var(--muted)}
.score-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.45fr);gap:12px}.score-table-wrap{overflow:auto;max-height:calc(100vh - 150px);border-radius:14px}.score-table{border-collapse:separate;border-spacing:0;width:100%;min-width:540px;font-variant-numeric:tabular-nums}.score-table th,.score-table td{padding:8px 9px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#111821}.score-table th{position:sticky;top:0;z-index:2;background:#17212d}.score-table th:first-child,.score-table td:first-child{position:sticky;left:0;z-index:1;background:#17212d}.score-table th:first-child{z-index:3}.score-table tr.active td{background:#17251e}.score-table td.hit{color:#96e6bd}.score-table td.miss{color:#ffa3ad}.score-table tfoot td{position:sticky;bottom:0;background:#17212d;font-weight:900}.score-table td.editable{cursor:pointer}.score-table td.editable:hover{outline:1px solid #48617a}.round-editor{display:grid;gap:8px}.counter-row{display:grid;grid-template-columns:1fr auto auto auto;gap:7px;align-items:center;padding:9px;background:#0d141d;border-radius:11px}.counter{display:flex;align-items:center;gap:6px}.counter button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:900}.counter strong{min-width:25px;text-align:center}.result-toggle{display:flex;gap:5px}.result-toggle button{padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}.result-toggle .hit.sel{background:#164b35;border-color:#2d8c62}.result-toggle .miss.sel{background:#4c2027;border-color:#8f3744}.sticky-actions{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(transparent,#111821 24%)}.leader-inline{display:flex;gap:7px;overflow:auto;padding-bottom:2px}.leader-pill{white-space:nowrap;background:#0d141d;border:1px solid var(--line);padding:6px 8px;border-radius:999px}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:16px;z-index:20}.modal{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.modal h2{margin:0 0 8px}.rule-list{padding-left:20px;color:var(--muted)}.footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:14px}
@media(max-width:820px){.app-shell{padding:10px}.game-grid,.score-layout{grid-template-columns:1fr}.side-panel{order:-1}.table-felt{min-height:430px}.table-area{min-height:430px}.status-strip{grid-template-columns:repeat(2,1fr)}.score-table-wrap{max-height:48vh}.player-fields{grid-template-columns:repeat(2,1fr)}.menu-grid{grid-template-columns:1fr}.hero{min-height:82vh}.hero-card{padding:20px}.card{width:56px;height:82px}.tip-grid{grid-template-columns:repeat(3,1fr)}.score-layout .side-panel{order:-1}.counter-row{grid-template-columns:1fr auto}.result-toggle{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:480px){body{font-size:14px}.topbar{margin-bottom:8px}.panel{padding:12px}.form-grid{grid-template-columns:1fr}.player-fields{grid-template-columns:1fr 1fr}.status-strip{gap:6px}.stat{padding:8px 9px}.table-felt{padding:10px;min-height:410px}.card{width:50px;height:74px;padding:5px}.card .rank{font-size:16px}.card .suit{font-size:18px}.card .corner{font-size:20px}.hand{gap:4px}.player-chip{min-width:76px;padding:6px 8px}.trick-area{min-height:130px}.phase-box{padding:10px}.score-table th,.score-table td{padding:6px}.btn{padding:9px 11px}}

/* Game-table usability additions */
.table-felt{position:relative}
.felt-trump{position:absolute;top:12px;left:14px;z-index:3;display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(6,17,12,.82);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.felt-trump span:first-child{font-size:10px;letter-spacing:.08em;color:#aebcb5;font-weight:800}
.felt-trump strong{font-size:18px;line-height:1}.red-suit{color:#ff7886}
.pace-toggle{position:absolute;top:12px;right:14px;z-index:3;border:1px solid rgba(255,255,255,.16);background:rgba(6,17,12,.82);color:var(--text);border-radius:11px;padding:7px 9px;font-weight:800;cursor:pointer}
.pace-toggle:hover{filter:brightness(1.12)}
.opponents{padding-inline:88px}
.player-chip{position:relative}
.player-chip.dealer{border-color:#5c8fff;box-shadow:inset 0 0 0 1px rgba(92,143,255,.65)}
.dealer-badge{position:absolute;right:-6px;top:-8px;display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#5c8fff;color:#07111d;font-size:11px;font-weight:900;border:2px solid #0d241a}
.hand-wrap.dealer{border:1px solid rgba(92,143,255,.65);border-radius:14px;padding:8px;background:rgba(21,42,48,.32)}
.dealer-inline{display:inline-block;margin-right:6px;padding:2px 6px;border-radius:999px;background:#5c8fff;color:#07111d;font-size:10px;font-weight:900;vertical-align:1px}
.mini-actions{display:flex;gap:6px;align-items:center}
.trump-reminder{display:inline-block;padding:6px 8px;border-radius:9px;background:#15271f;border:1px solid #2d4b3c;color:#d9e8e0!important}
.tip-explain{margin-top:10px;padding:10px 11px;border-radius:11px;background:#17251e;border:1px solid #2d4b3c;color:#dce9e2}
.tip-explain p{margin:5px 0 3px!important;color:#b9c8c0!important}.tip-explain small{color:#8fa096}
.play-tip strong{font-size:16px;color:#9aebc2}
.card.suggested{outline:3px solid #67dfa8;transform:translateY(-6px);box-shadow:0 8px 22px rgba(0,0,0,.36),0 0 0 5px rgba(103,223,168,.14)}
.modal.wide{width:min(820px,100%)}
.history-wrap{overflow:auto;max-height:65vh;border:1px solid var(--line);border-radius:12px}
.history-table{width:100%;border-collapse:separate;border-spacing:0;min-width:520px;font-variant-numeric:tabular-nums}
.history-table th,.history-table td{padding:9px 10px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#111821}
.history-table th{position:sticky;top:0;background:#17212d;z-index:1}.history-table tfoot td{position:sticky;bottom:0;background:#17212d;font-weight:900}.history-table .history-points{color:#96e6bd;font-weight:800}
@media(max-width:620px){.opponents{padding-inline:0;padding-top:42px}.felt-trump{top:8px;left:8px}.pace-toggle{top:8px;right:8px}.felt-trump strong{font-size:16px}.pace-toggle{font-size:12px;padding:6px 8px}.hand-wrap.dealer{padding:6px}}
.score-bid-row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;align-items:center;padding:8px 9px;background:#0d141d;border-radius:11px}
.score-bid-options{display:flex;gap:5px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.score-bid-btn{flex:0 0 34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:900}
.score-bid-btn.sel{background:var(--accent);border-color:transparent;color:#062317}
.score-stepper{display:grid;grid-template-columns:42px 54px 42px;align-items:center;justify-content:end;gap:7px}
.score-stepper-btn{width:42px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:22px;font-weight:900;line-height:1;cursor:pointer}
.score-stepper-btn:active:not(:disabled){transform:scale(.96)}
.score-stepper-btn:disabled{opacity:.32;cursor:not-allowed}
.score-stepper-value{height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#17212d;border:1px solid var(--line);font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
@media(max-width:480px){.score-bid-row{grid-template-columns:52px minmax(0,1fr);padding:7px}.score-bid-btn{flex-basis:32px;width:32px;height:32px}.score-stepper{grid-template-columns:40px 48px 40px;gap:6px}.score-stepper-btn{width:40px;height:38px}.score-stepper-value{height:38px}}

/* Mobile-first polish for phones opened from GitHub Pages */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{overflow-x:hidden;min-height:100dvh;overscroll-behavior-y:none}
button,.btn,.icon-btn,.menu-card,.card,.bid-btn,.score-bid-btn,.score-stepper-btn,.result-toggle button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.app-shell{padding-top:max(16px,env(safe-area-inset-top));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left))}

@media(max-width:820px){
  .app-shell{width:100%;padding-top:max(10px,env(safe-area-inset-top));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left))}
  .topbar{position:relative;z-index:8;gap:8px}
  .topbar>div:last-child{display:flex;gap:6px;flex:0 0 auto}
  .brand{min-width:0;font-size:15px}.brand-mark{font-size:18px}
  .topbar .btn{padding:7px 9px;font-size:12px}

  /* On phones the action panel comes first, then the table, then the full standings. */
  .game-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .game-side-panel{display:contents}
  .game-phase-panel{order:1;box-shadow:none}
  .table-area{order:2;min-width:0;min-height:0}
  .standing-panel{order:3;box-shadow:none}

  .status-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:8px}
  .stat{padding:7px 8px;min-width:0;border-radius:10px}
  .stat span{font-size:10px;white-space:nowrap}.stat strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .table-felt{min-height:0;height:auto;padding:9px 8px 10px;border-radius:17px;gap:10px;overflow:visible}
  .felt-trump,.pace-toggle{position:static}
  .felt-trump{grid-area:trump;justify-self:start;padding:5px 7px}.felt-trump strong{font-size:15px}
  .pace-toggle{grid-area:pace;justify-self:end;padding:6px 8px;font-size:11px}
  .table-felt{display:grid;grid-template-columns:1fr auto;grid-template-areas:"trump pace" "opponents opponents" "trick trick" "hand hand";align-items:start}
  .opponents{grid-area:opponents;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding:4px 3px 2px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .opponents::-webkit-scrollbar{display:none}
  .player-chip{flex:0 0 auto;min-width:72px;padding:6px 7px;border-radius:10px;scroll-snap-align:start;font-size:12px}
  .player-chip .muted,.player-chip .bid,.player-chip .tricks{font-size:10px;line-height:1.3}
  .dealer-badge{width:19px;height:19px;right:-4px;top:-7px;font-size:9px}

  .trick-area{grid-area:trick;min-height:110px;gap:5px;align-content:center;padding:3px 0}
  .played-card-wrap small{font-size:10px;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hand-wrap{grid-area:hand;margin-top:0;min-width:0}
  .hand-label{margin-bottom:6px;font-size:12px}
  .hand{gap:4px;align-items:flex-end}
  .card{width:clamp(43px,11.8vw,55px);height:clamp(64px,17.5vw,81px);padding:5px;border-radius:8px;flex:0 0 auto}
  .card .rank{font-size:15px}.card .suit{font-size:17px}.card .corner{font-size:19px;right:5px;bottom:4px}
  .card.playable:active{transform:translateY(-4px)}
  .card.suggested{outline-width:2px;transform:translateY(-4px);box-shadow:0 6px 15px rgba(0,0,0,.34),0 0 0 3px rgba(103,223,168,.14)}

  .game-phase-panel{padding:10px 11px}
  .game-phase-panel .section-title{margin-bottom:5px}
  .game-phase-panel h3{font-size:15px}
  .game-phase-panel p{font-size:12px;margin:3px 0}
  .trump-reminder{padding:4px 7px!important}
  .bid-buttons{gap:5px;margin:7px 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bid-buttons::-webkit-scrollbar{display:none}
  .bid-btn{flex:0 0 38px;width:38px;height:38px;border-radius:9px}
  .game-phase-panel .actions{margin-top:8px}
  .game-phase-panel .btn{min-height:40px}
  .tip-explain{padding:8px 9px;margin-top:8px}.tip-explain p{font-size:11px!important}.tip-explain small{font-size:10px}
  .tip-grid{display:flex;overflow-x:auto;gap:5px;scrollbar-width:none}.tip-grid::-webkit-scrollbar{display:none}.tip-cell{min-width:68px;flex:0 0 auto;padding:6px}

  .standing-panel .score-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .standing-panel .score-row{padding:6px 7px;grid-template-columns:20px minmax(0,1fr) auto;font-size:12px}

  /* Scorekeeper: entry controls first, table second; both remain compact. */
  .score-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .score-side-panel{display:contents}
  .score-side-panel>section:not(.score-standing-panel){order:1}
  .score-standing-panel{order:2}
  .score-main-panel{order:3}
  .score-table-wrap{max-height:none;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  .score-table{min-width:max(430px,100%)}
  .score-table th,.score-table td{padding:7px 6px;min-width:56px}
  .score-table th:first-child,.score-table td:first-child{min-width:48px}
  .score-bid-options{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .score-bid-btn{scroll-snap-align:start}
  .leader-inline{-webkit-overflow-scrolling:touch;scrollbar-width:none}.leader-inline::-webkit-scrollbar{display:none}

  .modal-backdrop{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));align-items:end}
  .modal,.modal.wide{width:100%;max-height:90dvh;overflow:auto;border-radius:18px 18px 10px 10px;padding:13px}
  .history-wrap{max-height:70dvh;-webkit-overflow-scrolling:touch}
}

@media(max-width:480px){
  body{font-size:13px}
  .hero{min-height:calc(100dvh - 20px);align-items:center}
  .hero-card{padding:18px 14px;border-radius:19px}
  .suits{font-size:27px;letter-spacing:6px}.hero h1{font-size:38px}.hero p{margin:8px auto 16px;font-size:13px}
  .menu-card{min-height:98px;padding:14px;border-radius:14px}.menu-card strong{font-size:18px}.menu-card span{font-size:12px}
  .setup{margin:8px auto}.setup.panel{padding:13px}.setup h2{font-size:20px}
  .field input,.field select{min-height:43px;padding:9px 10px}
  .actions{gap:6px}.actions .btn{min-height:42px}
  .status-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat{padding:6px}.stat span{font-size:9px}.stat strong{font-size:12px}
  .standing-panel{padding:10px}.standing-panel .section-title{margin-bottom:6px}
  .standing-panel .score-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .round-result{padding:6px 7px;font-size:11px}
  .score-main-panel{padding:10px}.score-main-panel .section-title .muted{font-size:11px}
  .score-table{font-size:12px}
  .score-table th,.score-table td{padding:6px 5px}
  .counter-row{padding:7px;gap:5px}.result-toggle button{min-height:38px;padding:6px 8px}
}

@media(max-width:360px){
  .brand{font-size:13px}.topbar .btn{padding:6px 7px}
  .status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .standing-panel .score-list{grid-template-columns:1fr 1fr}
  .card{width:42px;height:62px}
  .player-chip{min-width:68px}
}

.sequence-preview{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  margin:5px 0 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  font-weight:800;
  letter-spacing:.02em;
}