:root { color-scheme: dark; --bg:#050907; --surface:#0d1210; --surface2:#141b17; --line:#364139; --gold:#ddb35f; --green:#69bd68; --cream:#f2e8d4; --muted:#aab1ac; --danger:#ef7e72; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:fixed;left:12px;top:-80px;z-index:100;background:var(--gold);color:#111;padding:12px 16px;border-radius:8px;font-weight:800}.skip-link:focus{top:12px}.update-banner{flex-shrink:0;width:min(calc(100% - 8px),436px);margin:0 auto 8px;background:#25210f;border:1px solid var(--gold);border-radius:14px;padding:8px 10px;display:flex;gap:10px;align-items:center}.update-banner div{display:grid;flex:1}.update-banner small{color:var(--muted);margin-top:3px}.update-banner button{width:auto;margin:0}
html { background:#020503; }
html,body,.app-shell{touch-action:pan-x pan-y}body { margin:0; min-height:100dvh; background:radial-gradient(circle at 50% 0%, #14231a 0, #050907 46%, #020403 100%); color:var(--cream); }
button,input,select{font:inherit;min-width:0;max-width:100%}
button{color:inherit;white-space:normal;overflow-wrap:anywhere}
.app-shell { width:min(100%,460px);height:100dvh;height:calc(var(--vvh,1vh)*100);max-height:100dvh;max-height:calc(var(--vvh,1vh)*100);margin:auto;padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));position:relative;background:linear-gradient(180deg,rgba(4,10,7,.34),rgba(2,5,3,.7));display:flex;flex-direction:column;overflow:hidden }
.app-shell>main,.app-shell>main.deck-edit-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden}.app-shell>main.start-card{overflow:auto;-webkit-overflow-scrolling:touch}
.brand{display:flex;justify-content:center;align-items:center;gap:8px;padding:4px 0 10px;text-align:center;flex-shrink:0}.brand-seven{width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font:700 32px Georgia,serif;color:#fff;box-shadow:0 0 20px #b7893033}.brand strong{display:block;font:700 18px Georgia,serif;letter-spacing:.05em}.brand small{color:var(--gold);letter-spacing:.35em;font-size:11px}.brand i{color:#be5748;font-style:normal}
h1 { font:600 clamp(31px,9vw,43px)/1.05 Georgia,serif; margin:10px 0 22px; } h2{font:600 24px Georgia,serif;margin:0 0 18px}.eyebrow{color:var(--gold);text-transform:uppercase;font-size:12px;letter-spacing:.15em}.start-card{padding-top:6vh}
label { display:grid; gap:8px; color:var(--muted); font-size:13px; margin:14px 0; }
input,select { width:100%; padding:15px; border:1px solid var(--line); border-radius:12px; background:#0b110e; color:#fff; outline:none; } input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px #ddb35f22}
button { border:0; cursor:pointer; min-height:48px; border-radius:12px; font-weight:700; letter-spacing:.02em; }button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}button:disabled{opacity:.42;cursor:not-allowed}
.primary,.secondary { width:100%; padding:13px 16px; margin:7px 0; }.primary{background:linear-gradient(135deg,#2d7938,#1a5126);border:1px solid #74cc75}.secondary{background:#0e1411;border:1px solid var(--line)}.compact{width:auto;min-height:39px;padding:7px 15px}.text-button{background:transparent;color:var(--green);width:100%;font-size:13px}.danger{color:var(--danger)}
.divider{height:31px;display:flex;align-items:center;color:#6f7772;font-size:12px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#273029}.divider span{padding:0 12px}.demo-note{text-align:center;color:#747d77;font-size:11px;padding-top:18px}.mode-badge{display:inline-block;color:#08110b;background:var(--gold);border-radius:999px;padding:3px 7px;margin-right:4px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.statusbar,.invite,.panel,.task,.limits,.score-strip{background:#090e0bcc;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;backdrop-filter:blur(15px)}
.resume-card,.control-banner{background:#151c17;border:1px solid var(--gold);border-radius:16px;margin-bottom:18px;padding:16px}.resume-card{display:grid;gap:8px}.resume-card>small{color:var(--gold);text-transform:uppercase;letter-spacing:.1em}.resume-card>strong{font-size:20px}.resume-card p{color:var(--muted);font-size:13px;margin:0}.control-banner{display:flex;align-items:center;gap:12px}.control-banner>div{display:grid;flex:1}.control-banner strong{color:var(--gold)}.control-banner small{color:var(--muted);margin-top:3px}.control-banner button{width:auto;margin:0}
.statusbar{display:grid;grid-template-columns:.7fr 1.3fr 1.1fr;margin-bottom:8px;flex-shrink:0}.statusbar>div{padding:8px 10px;border-right:1px solid var(--line);display:grid;gap:1px}.statusbar>div:last-child{border:0}.statusbar small,.task small,.limits small,.invite small{color:var(--muted)}.statusbar strong{color:var(--gold);font-size:14px}.connected{display:flex!important;align-items:center;gap:7px;font-size:12px}.connected span{width:9px;height:9px;background:var(--green);border-radius:50%}.connected strong{color:var(--muted)}.connected.connecting span,.connected.reconnecting span{background:var(--gold);animation:pulse 1s ease infinite}.connected.offline span{background:var(--danger)}@keyframes pulse{50%{opacity:.25}}
.connected{flex-wrap:wrap}.connected .sync-label{width:100%;font-size:9px}.sync-summary{display:grid;gap:4px;background:#19221c;border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:12px}.sync-summary span,.sync-summary small{color:var(--muted)}.sync-summary strong{color:var(--green)}
.invite{text-align:center;padding:22px}.invite>strong{display:block;font-size:32px;letter-spacing:.2em;color:var(--gold);margin:8px}.panel{padding:18px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title span{color:var(--muted);font-size:12px}.player{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #273029}.player:last-child{border:0}.avatar{width:40px;height:40px;border-radius:50%;background:#1d2b22;display:grid;place-items:center;color:var(--gold)}.player div{display:grid;flex:1}.player small{color:var(--muted);margin-top:3px}.ready{color:var(--green)}
.utility{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-top:6px;flex-shrink:0}.utility button{background:transparent;color:var(--muted);font-size:10px;min-height:42px;padding:4px 2px}.score-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.score-strip button{background:transparent;border-radius:0;border-right:1px solid var(--line);display:grid;padding:8px 2px;overflow:hidden}.score-strip button:last-child{border:0}.score-strip small{color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis}.score-strip strong{font-size:17px}.score-strip .mine{color:var(--green)}
.task{padding:15px;display:grid;gap:3px}.task strong{color:var(--gold)}.hand-title{text-align:center;display:grid;margin:6px 0}.hand-title small{color:var(--muted)}.hand-title strong{color:var(--green);font-size:22px}.sort-row{display:flex;justify-content:flex-end}.sort-row label{grid-template-columns:auto 145px;align-items:center;margin:0 0 10px}.sort-row select{padding:8px}
.deck-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}.deck-stats div{display:grid;background:#101713;border:1px solid var(--line);border-radius:11px;padding:9px}.deck-stats small{color:var(--muted);font-size:10px}.deck-stats strong{color:var(--gold);font-size:20px}.upgrade-grid{display:grid;gap:7px;flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.upgrade-card{display:grid;text-align:left;gap:6px;padding:11px;background:#0e1511;border:1px solid var(--line);min-height:auto}.upgrade-card>span{color:var(--gold);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.upgrade-card>strong{font:600 15px Georgia,serif}.upgrade-card>small{color:var(--muted);font-weight:400;line-height:1.35}.upgrade-card.selected{border-color:var(--gold);background:#1d2116;box-shadow:0 0 0 2px #ddb35f22}.upgrade-preview{background:#141c16;border:1px solid var(--gold);border-radius:14px;padding:14px;margin:10px 0}.upgrade-preview h2{font-size:18px;margin-bottom:10px}.upgrade-preview>div{display:grid;grid-template-columns:1fr 35px 20px 35px;gap:5px;padding:5px 0}.upgrade-preview del{color:var(--muted)}.upgrade-preview ins{color:var(--green);text-decoration:none;font-weight:800}.upgrade-preview small,.selection-hint{color:var(--muted);font-size:11px}.selection-hint{text-align:center;padding:12px}
.deck-edit-main{display:flex;flex-direction:column}.deck-edit-counter{display:flex;justify-content:space-between;align-items:center;background:#131a16;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:10px}.deck-edit-counter span{color:var(--muted)}.deck-edit-counter strong{color:var(--gold);font-size:20px}.deck-edit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1;min-height:0;max-height:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 8px}.mini-card{position:relative;aspect-ratio:.72;background:#f0e8d9;color:#171916;border:2px solid transparent;min-height:0;font:700 16px Georgia,serif}.mini-card.red{color:#a7352d}.mini-card.selected{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 14px #d9a84988}.mini-card span{position:absolute;right:-5px;top:-7px;background:#151a17;color:var(--gold);border:2px solid var(--gold);border-radius:50%;width:23px;height:23px;display:grid;place-items:center}.permanent-warning{color:var(--muted);font-size:11px;text-align:center;margin:9px 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px;flex:1;min-height:0;align-content:start;overflow:auto;-webkit-overflow-scrolling:touch}.card{aspect-ratio:.68;min-height:0;background:#f2eadc;color:#121411;border:2px solid transparent;position:relative;padding:5px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;box-shadow:0 6px 14px #0008}.card .rank{font:700 20px Georgia,serif}.card .suit{font-size:28px;align-self:center}.card .red{color:#a7352d}.card.best{box-shadow:inset 0 0 0 3px #4f9e60,0 7px 16px #0008}.card.selected{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 0 18px #d9a84999}.card.best.selected{box-shadow:inset 0 0 0 3px #4f9e60,0 0 18px #d9a84999}.card.locked{opacity:.77;justify-content:center;align-items:center}.card.locked .rank{font:600 14px Georgia,serif}.best-mark{position:absolute;left:5px;bottom:4px;color:#367b43;font-size:16px}.remove{position:absolute;right:-7px;top:-10px;background:#141a16;color:var(--gold);border:2px solid var(--gold);border-radius:50%;width:25px;height:25px;display:grid;place-items:center}.limits{display:grid;grid-template-columns:1fr 1fr}.limits div{display:grid;padding:8px 14px;border-right:1px solid var(--line)}.limits div:last-child{border:0}.limits strong{font-size:18px;color:var(--green)}.actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;flex-shrink:0;margin-top:auto}.actions button{font-size:12px}
.result-hero{text-align:center;padding:30px 0}.result-hero span{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.result-hero h1{margin:8px}.result-hero p{color:var(--green)}.ranking div{display:grid;grid-template-columns:30px 1fr 50px 55px;gap:8px;align-items:center;padding:13px 0;border-bottom:1px solid #273029}.ranking div:last-child{border:0}.ranking b{color:var(--gold)}.ranking span{color:var(--green)}.ranking em{font-style:normal;color:var(--muted);text-align:right}
.ranking-name{display:grid!important;color:var(--cream)!important}.ranking-name small{color:var(--muted);font-weight:400}.result-hero.match{padding-bottom:18px}.showdown-list{display:grid;gap:9px;margin-bottom:18px}.showdown-list article{background:#0e1511;border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:10px}.showdown-list article>div:first-child{display:flex;justify-content:space-between}.showdown-list small{color:var(--green)}.showdown-cards{display:flex;gap:5px}.showdown-cards span{background:#eee5d5;color:#151714;border-radius:5px;padding:6px 4px;min-width:38px;text-align:center;font:700 13px Georgia,serif}.showdown-cards span.red{color:#a7352d}.ranking,.showdown-list{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.backdrop{position:fixed;inset:0;background:#000b;z-index:10;display:flex;align-items:flex-end;justify-content:center;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.sheet{position:relative;width:min(100%,436px);margin-inline:auto;max-height:min(82dvh,calc(var(--vvh,1vh)*100 - 24px));overflow:auto;background:#101713;border:1px solid var(--line);border-radius:22px;padding:25px 20px max(20px,env(safe-area-inset-bottom));box-shadow:0 16px 60px #000}.close{position:absolute;right:14px;top:14px;width:38px;min-height:38px;background:#1b241e;font-size:24px}.history-row{display:grid;grid-template-columns:1fr 1fr auto;padding:15px 0;border-bottom:1px solid var(--line)}.history-row span{color:var(--muted)}.history-row b{color:var(--green)}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-grid div{background:#19221c;border-radius:12px;padding:16px;display:grid}.stat-grid strong{font-size:28px;color:var(--gold)}.stat-grid small,.muted{color:var(--muted)}.toggle{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.toggle input{width:auto}.toast{position:fixed;left:50%;bottom:35px;transform:translateX(-50%);z-index:30;background:#f3e9d5;color:#111;padding:12px 18px;border-radius:10px;box-shadow:0 8px 30px #0009;white-space:nowrap}
@media (min-width:720px){body{padding:30px 0}.app-shell{height:calc(100dvh - 60px);max-height:calc(100dvh - 60px);min-height:calc(100dvh - 60px);border:1px solid #29332c;border-radius:28px;box-shadow:0 20px 80px #000}.backdrop{align-items:center}.sheet{border-radius:22px}}
@media (prefers-reduced-motion:no-preference){.card,.sheet{transition:.2s ease}.toast{animation:rise .25s ease}@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}}
.reduce-motion *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
.high-contrast{--bg:#000;--surface:#050505;--surface2:#101010;--line:#f2e8d4;--gold:#ffd86b;--green:#8cff8a;--cream:#fff;--muted:#e1e1e1}.high-contrast button:focus-visible,.high-contrast input:focus,.high-contrast select:focus{outline:4px solid #fff;outline-offset:3px}.large-text{font-size:118%}.large-text .utility button{font-size:12px}.large-text .statusbar{grid-template-columns:1fr 1.25fr 1.2fr}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}.metric-grid div{display:grid;gap:3px;background:#19221c;border:1px solid var(--line);border-radius:12px;padding:10px}.metric-grid small,.metric-grid span{color:var(--muted);font-size:9px}.metric-grid strong{color:var(--gold);font-size:18px}.assessment{background:#111a14;border:1px solid var(--green);border-radius:14px;padding:14px;margin:12px 0}.assessment small{color:var(--muted);display:block}.assessment strong{display:block;color:var(--green);margin:5px 0}.assessment p{font-size:12px;margin:0;color:var(--muted);line-height:1.45}
.upgrade-confirm>p{color:var(--muted);line-height:1.45}.upgrade-confirm h2{padding-right:40px;margin-top:5px}.upgrade-confirm h3{font:600 16px Georgia,serif;color:var(--gold);margin:14px 0 8px}.upgrade-confirm .deck-stats{grid-template-columns:repeat(3,1fr)}

/* --- Mobile Fit (iPhone 12/14) --- */
@media (max-height:780px){.cards{grid-template-columns:repeat(5,1fr);gap:5px}.card .rank{font-size:16px}.card .suit{font-size:22px}.brand-seven{width:38px;height:38px;font-size:28px}.brand strong{font-size:16px}.hand-title strong{font-size:20px}.statusbar>div{padding:6px 8px}.task{padding:10px 12px}.result-hero{padding:16px 0}}
.compact .brand{padding:2px 0 6px}.compact .brand-seven{width:34px;height:34px;font-size:24px}.compact .cards{grid-template-columns:repeat(5,1fr);gap:4px}.compact .card .rank{font-size:15px}.compact .card .suit{font-size:20px}.compact .hand-title strong{font-size:18px}.compact .mini-card{font-size:14px}.large-text.compact .cards{grid-template-columns:repeat(4,1fr)}.large-text .card .rank{font-size:18px}.large-text .card .suit{font-size:24px}.toast{bottom:max(20px,env(safe-area-inset-bottom))}button,.card,.mini-card,.upgrade-card{touch-action:pan-x pan-y}

/* --- Width containment and public deck panels --- */
.actions{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.actions>button,.upgrade-card,.primary,.secondary{min-width:0;max-width:100%}.deck-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.deck-stats>div{min-width:0;padding:8px}.deck-stats small{font-size:9px;overflow-wrap:anywhere}.deck-stats strong{font-size:19px}.own-deck-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-shrink:0}.own-deck-heading strong{color:var(--gold)}.own-deck-heading small{color:var(--muted);font-size:10px;text-align:right}.player{min-width:0}.player>div{min-width:0}.deck-link{width:auto;min-width:54px;min-height:36px;padding:5px 8px;background:#17231b;border:1px solid var(--line);color:var(--green);font-size:11px}.player-deck-panel h2{padding-right:42px}.privacy-note{background:#241713;border:1px solid var(--danger);border-radius:12px;padding:12px}.privacy-note p{color:var(--muted);margin-bottom:0}
.result-hero.merged{padding:12px 0}.merged-result-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.merged-result-scroll>h2{font-size:16px;color:var(--gold);margin:10px 0 6px}.merged-result-scroll .ranking,.merged-result-scroll .showdown-list{flex:none;overflow:visible}.merged-hands{gap:6px;margin-bottom:10px}.merged-hands article{padding:8px;gap:6px}.merged-hands .showdown-cards span{min-width:31px;padding:4px 3px;font-size:11px}

/* --- Selection states stay inside scroll containers --- */
.cards,.deck-edit-grid,.upgrade-grid{padding:4px;scroll-padding:4px}.card.selected,.mini-card.selected,.upgrade-card.selected{border-color:transparent;transform:none;box-shadow:inset 0 0 0 3px var(--gold)}.card.best.selected{box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 6px #4f9e60}.upgrade-card.selected{position:relative;background:#1d2116}.upgrade-card.selected::after{content:"✓";position:absolute;right:9px;top:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:#111;font-weight:900}.cards button:focus-visible,.deck-edit-grid button:focus-visible,.upgrade-grid button:focus-visible{outline:3px solid var(--cream);outline-offset:-5px}

/* --- Compact draw cards and centered combined result --- */
.cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.card{padding:4px;overflow:hidden}.card .rank{font-size:17px}.card .suit{font-size:23px}.remove{right:4px;top:4px;width:20px;height:20px;border-width:1px;font-size:13px}.best-mark{left:4px;bottom:3px;font-size:13px}.combined-results{width:min(100%,436px);margin-inline:auto;display:grid;gap:8px}.combined-result{background:#0e1511;border:1px solid var(--line);border-radius:14px;padding:10px}.combined-result.mine{border-color:var(--green);box-shadow:inset 0 0 0 1px #69bd6844}.combined-result header{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center}.result-rank{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#20291f;color:var(--gold)}.result-identity{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}.result-identity strong{overflow:hidden;text-overflow:ellipsis}.result-identity span{color:var(--green);font-size:12px;overflow:hidden;text-overflow:ellipsis}.result-points{display:grid;text-align:right}.result-points strong{color:var(--green);font-size:18px}.result-points small{color:var(--muted);font-size:9px}.result-cards{display:flex;justify-content:center;gap:5px;margin-top:8px}.result-cards span{min-width:34px;background:#eee5d5;color:#151714;border-radius:6px;padding:5px 3px;text-align:center;font:700 12px Georgia,serif}.result-cards span.red{color:#a7352d}
@media(max-height:780px){.cards{grid-template-columns:repeat(6,minmax(0,1fr))}.result-cards span{min-width:30px;font-size:11px}}
.large-text .cards,.large-text.compact .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.live-notice,.mode-switch{background:#152018;border:1px solid var(--gold);border-radius:14px;padding:12px;margin-bottom:12px}.live-notice strong,.mode-switch strong{color:var(--gold)}.live-notice p{color:var(--muted);font-size:12px;margin-bottom:0}.live-notice code{color:var(--cream)}.mode-switch{display:grid;grid-template-columns:1fr auto;gap:5px}.mode-switch span{color:var(--muted)}.mode-switch a{grid-column:1/-1;color:var(--green);font-size:12px}
.start-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.start-tools button{min-width:0;margin:0}.start-error,.report-error{background:#281715;border:1px solid #be5748;border-radius:14px;padding:12px;margin-bottom:12px}.start-error strong,.report-error strong{color:#ee897a}.start-error p,.report-error p{color:var(--cream);font-size:12px;line-height:1.4}.start-error>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.start-error button{min-width:0;margin:0}.report-hub{display:grid;gap:8px}.report-hub h2{margin-bottom:6px}.report-hub .sync-summary{margin-bottom:0}.report-hub button{margin:0}