@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,var(--glow) 0,transparent 65%);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:disabled{opacity:.45;cursor:default}main{max-width:480px;margin:auto;padding:22px 24px 14px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.brand{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;letter-spacing:-1.3px;color:inherit;text-decoration:none}.brand span{color:var(--accent);margin-left:5px}.icon{display:inline-flex;justify-content:center;align-items:center;flex:none;width:44px;height:44px;padding:0;line-height:1;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--muted);font-size:20px}.eyebrow{color:var(--muted);font-size:9px;letter-spacing:1.9px;font-weight:700}h1{font-family:'Space Grotesk',sans-serif;font-size:49px;line-height:1.06;letter-spacing:-2.7px;margin:23px 0 0}h1 span{color:var(--accent)}.hero-cards{height:208px;display:flex;justify-content:center;padding-top:24px}.mini-card{border-radius:17px;background:#f5f4eb;color:#20251c;width:112px;height:155px;padding:15px;font-size:24px;font-weight:700;transform:rotate(-14deg);box-shadow:0 14px 35px #0006}.mini-card span{display:block;text-align:center;font-size:64px}.mini-card.ace{transform:rotate(12deg);margin-top:14px;margin-left:-15px;background:var(--accent)}.lede{font-size:16px;color:var(--muted);line-height:1.6;margin:4px 0 23px}.primary,.secondary,.danger,.sign-in{display:flex;justify-content:center;align-items:center;gap:10px;min-height:54px;min-width:0;padding:12px 18px;border-radius:14px;width:100%;font-weight:700;font-size:15px;line-height:1.4;text-align:center;white-space:normal;overflow-wrap:anywhere}.primary{background:var(--accent);color:var(--accent-ink)}.secondary{background:var(--surface-raised);color:var(--text);border:1px solid var(--border)}.start-actions{display:grid;gap:10px}.footnote{font-size:8px;letter-spacing:1px;color:var(--subtle);margin-top:20px;text-align:center}footer{text-align:center;font-size:8px;letter-spacing:2.4px;color:var(--subtle);margin-top:28px}.match-info{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:var(--subtle);margin-bottom:23px;text-transform:uppercase}.text-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:6px 0;line-height:1.4;text-align:center;background:none;color:var(--muted);font-size:11px}.player{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:14px}.avatar{width:38px;height:38px;background:var(--surface-raised);border-radius:50%;display:grid;place-items:center;font-size:23px}.avatar.you{background:var(--accent);color:var(--accent-ink);font-size:15px}.player strong{font-size:14px}.player small{display:block;font-size:10px;color:var(--subtle);margin-top:4px}.count{margin-left:auto;text-align:right}.count strong{font-family:'Space Grotesk',system-ui,sans-serif;font-size:25px;line-height:1}.count small{margin-top:1px}.arena{padding:26px 0 23px;text-align:center}.round{color:var(--subtle);font-size:9px;letter-spacing:2px;margin-bottom:20px}.cards{display:flex;align-items:center;justify-content:center;gap:13px}.card-wrap small{display:block;margin-top:12px;font-size:9px;letter-spacing:1.8px;color:var(--subtle)}.card{position:relative;width:122px;height:172px;background:#f7f5ed;border-radius:16px;color:#242b20;box-shadow:0 9px 25px #0004;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}.card.red{color:#b34b47}.card.lead{box-shadow:0 0 0 2px var(--accent),0 8px 25px #0006;transform:translateY(-5px)}.card.back{background:repeating-linear-gradient(45deg,var(--back-a),var(--back-a) 6px,var(--back-b) 6px,var(--back-b) 12px);border:5px solid var(--back-edge);color:var(--back-ink)}.back .pip{font-size:40px}.corner{position:absolute;top:12px;left:13px;font-size:20px;font-weight:700;line-height:1.05}.corner span{display:block;font-size:17px}.corner.bottom{transform:rotate(180deg);top:auto;left:auto;bottom:12px;right:13px}.pip{font-size:60px}.versus{font-size:9px;color:var(--subtle);letter-spacing:1px}.pot{display:inline-flex;align-items:center;gap:5px;background:var(--surface-raised);border:1px solid var(--border);border-radius:40px;padding:9px 15px;font-size:11px;color:var(--muted);margin-top:24px}.pot strong{color:var(--text)}.stack-icon{font-size:20px;line-height:10px;color:var(--accent);margin-right:4px}.message{min-height:43px;padding:18px 9px 0;font-size:13px;line-height:1.5;color:var(--muted)}.controls{display:flex;gap:10px;margin-top:23px}.controls .primary{flex:1;min-width:0}.controls .secondary{flex:0 0 32%;min-width:0;width:auto}.save-note{text-align:center;color:var(--subtle);font-size:10px;margin:17px 0 0}.save-note button{font-size:10px}dialog{max-width:430px;width:calc(100% - 30px);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:24px;padding:30px 25px;max-height:86svh}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.close{float:right}h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:30px;letter-spacing:-1px;line-height:1.1}ol{padding-left:20px;font-size:13px;line-height:1.6;color:var(--muted)}li{padding:0 0 12px 5px}li b{color:var(--text)}.prototype{background:var(--surface-raised);padding:16px;border-radius:12px;color:var(--muted);font-size:11px;line-height:1.6}.prototype b{color:var(--accent)}.prototype p{margin-bottom:0}.muted{font-size:11px;color:var(--muted);line-height:1.6}[hidden]{display:none!important}@media(max-height:740px){header{margin-bottom:20px}.arena{padding:18px 0}.round{margin-bottom:15px}.card{height:150px;width:108px}.pot{margin-top:18px}.controls{margin-top:17px}footer{margin-top:17px}h1{font-size:43px}.hero-cards{height:182px}.mini-card{height:137px;width:100px}.lede{font-size:14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Challenge cards sit over the prior face, leaving its rank and suit visible. */
.card-stage{position:relative;width:clamp(100px,calc((100vw - 87px)/2),138px);height:202px}
.card-stage .card{position:absolute;width:calc(100% - 16px);height:172px;left:8px;top:15px}
.card-stage .current{z-index:2}
.card-stage.stacked .previous{left:0;top:0;z-index:1;box-shadow:0 4px 14px #0005}
.card-stage.stacked .previous .corner{top:8px;left:9px;font-size:16px;display:flex;align-items:center;gap:4px}
.card-stage.stacked .previous .corner span{font-size:15px}
.card-stage.stacked .previous .bottom{display:none}
.card-stage.stacked .current{left:16px;top:30px}
.card-stage.stacked .current.lead{transform:none}
@media(max-height:740px){.card-stage{height:180px}.card-stage .card{height:150px}}
.online-lobby{margin-top:32px;padding:24px 18px;border:1px solid var(--border);border-radius:18px;text-align:left;background:var(--surface)}.online-lobby h2{font-size:1.4rem;margin:0 0 12px}.online-lobby p,.online-match p{line-height:1.5;font-size:14px}.online-lobby label{display:block;margin:14px 0 6px}.online-lobby input,.online-match input{box-sizing:border-box;max-width:100%;width:100%;padding:12px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);background:var(--bg);font:inherit}.online-lobby .primary{width:100%;margin-top:12px}.sign-in{background:var(--accent);color:var(--accent-ink);text-decoration:none}.online-match{padding:12px 16px;margin:12px 0;background:var(--surface);border-radius:12px}.online-match .secondary{width:100%}.recent-match{display:block;margin:14px 0;text-align:left}.online-lobby [hidden],.online-match [hidden]{display:none!important}.online-lobby .muted{color:var(--muted);font-size:12px}#connection{color:var(--accent)}.player strong{overflow-wrap:anywhere}#cardName0,#cardName1{overflow-wrap:anywhere}

/* Persistent backs fan beneath the live card, including repeated wars. */
.deck-marker{position:relative;flex:none;width:27px;height:38px;margin:0 8px 0 3px;border:2px solid var(--back-edge);border-radius:5px;background:repeating-linear-gradient(45deg,var(--back-a),var(--back-a) 3px,var(--back-b) 3px,var(--back-b) 6px);box-shadow:-3px 2px 0 var(--back-shadow),-4px 3px 0 var(--back-edge),-6px 4px 0 var(--back-shadow),-7px 5px 0 var(--back-edge)}
.card-stage{perspective:900px;--deal-x:0px;--deal-y:-110px}
.war-pile{position:absolute;inset:0;pointer-events:none;z-index:1}
.card-stage .war-down{left:var(--fan-offset,0px);top:var(--fan-offset,0px);z-index:1;border-color:var(--back-edge);box-shadow:0 2px 4px #0005}
.card-stage.war-stack .current{left:20px;top:30px;z-index:3}
.card-stage.war-stack .current.lead{transform:none}
.card-stage.war-with-previous .previous{left:8px;top:17px;z-index:2}
.card-stage.war-with-previous .current{top:45px}
.card-stage.war-with-previous{height:217px}
.war-deal,.war-final-deal{animation:war-deal .42s cubic-bezier(.18,.72,.22,1) both}
.war-flip-out{animation:war-flip-out .23s cubic-bezier(.55,.06,.8,.45) both}
.war-flip-in{animation:war-flip-in .3s cubic-bezier(.16,.7,.25,1) both}
@keyframes war-deal{0%{opacity:.25;transform:translate(var(--deal-x),var(--deal-y)) scale(.25) rotate(-9deg)}75%{opacity:1;transform:translateY(-5px) scale(1.015) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes war-flip-out{to{transform:rotateY(90deg) translateY(-4px)}}
@keyframes war-flip-in{from{transform:rotateY(-90deg) translateY(-4px)}to{transform:rotateY(0)}}
@media(max-height:740px){.card-stage.war-with-previous{height:195px}}
@media(prefers-reduced-motion:reduce){.war-deal,.war-final-deal,.war-flip-out,.war-flip-in{animation:none!important}}

.auth-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.auth-actions .account-create{background:var(--surface-raised);color:var(--text);border:1px solid var(--border-strong)}.password-help{margin-top:6px}

.match-list{margin-top:28px;border-top:1px solid var(--border);padding-top:18px}.match-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.match-list h3{margin:0;font-size:18px}.match-list h3 span{color:var(--muted);font-size:14px}.recent-match{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;padding:16px;margin:10px 0;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);text-align:left;font:inherit;cursor:pointer}.recent-match strong{overflow-wrap:anywhere}.recent-match span{font-size:12px;color:var(--muted);align-self:center}.recent-match small{grid-column:1/-1;font-size:12px;color:var(--muted)}.recent-match.your-turn{border-color:var(--selected-border)}.recent-match.your-turn span{color:var(--accent)}.recent-match:hover,.recent-match:focus-visible{border-color:var(--accent)}.recent-match:disabled{opacity:.6;cursor:wait}@media(max-width:360px){.recent-match{grid-template-columns:1fr}.recent-match small{grid-column:1}}

.recent-match-row{margin:10px 0 16px}.recent-match-row .recent-match{margin:0}.cancel-invite{display:block;min-height:44px;padding:10px 6px;background:none;color:var(--danger);font-size:13px;text-align:left}.online-match .cancel-invite{margin:4px 0}.cancel-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}.cancel-actions button{min-height:54px;padding:12px}.danger{background:var(--danger-bg);color:#fff}.cancel-actions .secondary{width:auto}#cancelDialog h2{margin-top:0}#cancelDescription{line-height:1.6}#cancelError{color:var(--danger);font-size:14px;line-height:1.5}

/* Account names and mutual match ending stay separate from game actions. */
.name-edit-row{display:flex;gap:8px;align-items:stretch}.name-edit-row input{min-width:0;flex:1}.name-edit-row .secondary{width:auto;min-height:44px;padding:8px 12px;font-size:13px;white-space:nowrap}.match-tools{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}.match-tools .text-btn,.end-request .text-btn{min-height:44px;font-size:13px}.end-request{margin-top:8px;border-top:1px solid var(--border);padding-top:4px}.end-request p{color:var(--text)}.end-request-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.end-request-actions .secondary{min-height:44px}.end-request-actions .text-btn{padding:4px 0;color:var(--muted)}#nameDialog h2,#endDialog h2{margin-top:0}#nameDialog input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);background:var(--bg);font:inherit}#endDescription{line-height:1.6}#endError,#nameError{color:var(--danger);font-size:14px;line-height:1.5}.cancel-actions .primary{width:auto}@media(max-width:360px){.name-edit-row{flex-wrap:wrap}.name-edit-row .secondary{width:100%}}

/* Viewer-relative table: original server IDs stay intact. */
.game-table{display:flex;flex-direction:column;gap:0;position:relative}
.game-table>.player[data-side="top"]{order:0}.game-table>.arena{order:1}.game-table>.player[data-side="bottom"]{order:2}
.game-table .player{padding:10px 12px;min-height:60px}.game-table .player>div:nth-child(2){min-width:0}.game-table .count{flex:none}
.arena{padding:8px 0}.cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;position:relative}
.card-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0}
.card-wrap[data-side="top"]{grid-column:2;grid-row:1}.card-wrap[data-side="bottom"]{grid-column:1;grid-row:1;padding-top:110px}
.card-wrap>small{order:-1;display:block;margin:0 0 2px;max-width:100%;font-size:10px;line-height:1.4;letter-spacing:.8px;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.table-center{position:absolute;left:0;top:15px;width:calc(50% - 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:28px}
.table-center .round{margin:0;font-size:9px;letter-spacing:1px}.table-center .pot{margin:0;padding:5px 10px;font-size:10px}
.card-stage{flex:none;width:126px;height:170px}.card-stage .card{height:140px;border-radius:12px}.card-stage.war-with-previous{height:185px}
.card-stage .corner{font-size:18px;top:10px;left:10px}.card-stage .corner.bottom{top:auto;left:auto;bottom:10px;right:10px}.card-stage .pip{font-size:48px}
.message{padding:10px 4px 0;min-height:30px;font-size:12px}.controls{margin-top:12px}.match-info{margin-bottom:10px}
body:has(#game:not([hidden])) header{margin-bottom:14px}body:has(#game:not([hidden])) footer{margin-top:16px}
.card.current.lead{box-shadow:0 0 0 4px #4ba8ff,0 0 0 7px #163f70,0 0 24px 5px #1686f880;transform:none}
.card.current.trail{box-shadow:0 0 0 4px #ff6268,0 0 0 7px #702a34,0 0 20px 3px #f8344859}
/* Every revealed face and war back is retained; the gallery scrolls rather than truncates. */
.battle-history{display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;width:128px;max-height:164px;overflow-y:auto;padding:3px 4px 5px;scrollbar-width:thin;scrollbar-color:var(--back-edge) transparent;overscroll-behavior:contain}
.battle-history .history-title{display:block;width:100%;margin:0 0 2px;font-size:9px;letter-spacing:0;color:var(--muted)}
.battle-history .history-card{position:relative;flex:none;width:35px;height:43px;border-radius:5px;box-shadow:0 2px 5px #0004;transition:none}
.history-card .corner{top:3px;left:4px;font-size:13px;line-height:1}.history-card .corner span{font-size:12px}.history-card .corner.bottom,.history-card>.pip{display:none}
.history-card.back{border-width:2px}.history-card.back>.pip{display:block;font-size:19px}
.online-match{padding:0;margin:0 0 10px;background:none;border-radius:0}.connection-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:36px}
.online-match #connection{font-size:11px;line-height:1.35;margin:0;min-width:0}.match-options{position:relative;flex:none}
.match-options summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;line-height:1.4;padding:6px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:11px;cursor:pointer;list-style:none}
.match-options summary::-webkit-details-marker{display:none}.match-options summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.match-options[open] summary span{transform:rotate(180deg)}
.options-panel{position:absolute;right:0;top:calc(100% + 6px);width:min(252px,calc(100vw - 48px));padding:8px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-raised);box-shadow:0 15px 40px #000a;z-index:20;text-align:left}
.options-panel .match-tools{display:flex;flex-direction:column;gap:0}
.options-panel button,.options-panel .secondary,.options-panel .text-btn,.options-panel .cancel-invite{display:flex;justify-content:flex-start;align-items:center;width:100%;min-height:44px;padding:10px 9px;margin:0;font-size:13px;line-height:1.4;text-align:left;background:transparent;border:0;border-radius:6px}
.options-panel button:hover{background:var(--surface-hover)}.options-panel #endMatch,.options-panel .cancel-invite{color:var(--danger)}.options-panel #shareStatus:empty{display:none}
.options-panel #shareStatus{font-size:11px;margin:4px 9px;overflow-wrap:anywhere}.options-panel #inviteLink{font-size:11px;margin-top:6px}
.end-request{padding:8px 10px;background:var(--surface-raised);border:1px solid var(--border);border-radius:10px}.end-request p{font-size:12px;margin:0 0 6px}
.player-wins{display:inline-block;font-size:10px;color:var(--muted);margin-left:7px;line-height:1.5}.career-stats{color:var(--muted);font-size:13px;font-weight:700}
/* Celebrate, sweep the completed battle into the winning deck, then flip the next pair. */
.win-banner{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);z-index:8;width:max-content;max-width:90%;padding:12px 18px;border:2px solid #7bc4ff;border-radius:14px;background:#123c63f2;color:#fff;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;box-shadow:0 8px 35px #0009,0 0 25px #218be84d;pointer-events:none;animation:win-arrive .42s ease-out}
.celebrating .current.lead{animation:battle-win-card 1.7s ease-in-out}.round-flip-out{animation:round-flip-out .18s ease-in both}.round-flip-in{animation:war-flip-in .28s ease-out both}
.collecting .card-stage,.collecting .battle-history{animation:collect-battle .65s cubic-bezier(.5,.05,.8,.5) both;pointer-events:none}.collect-target{animation:deck-receive .8s ease-out both}
@keyframes win-arrive{from{opacity:0;transform:translate(-50%,-35%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes battle-win-card{0%,100%{transform:scale(1)}25%,65%{transform:scale(1.06) rotate(-2deg)}45%{transform:scale(1.04) rotate(2deg)}}
@keyframes round-flip-out{from{transform:rotateY(0)}to{transform:rotateY(90deg)}}
@keyframes collect-battle{0%{opacity:1;transform:none}85%{opacity:.9}100%{opacity:0;transform:translate(var(--collect-x,0px),var(--collect-y,0px)) scale(.14)}}
@keyframes deck-receive{0%,55%,100%{transform:none}75%{transform:scale(1.22);filter:drop-shadow(0 0 10px #4ba8ff)}}
@media(max-height:740px){main{padding-top:14px}.card-stage{height:154px}.card-stage .card{height:124px}.card-stage.war-with-previous{height:169px}.card-stage .pip{font-size:42px}.battle-history{max-height:150px}.game-table .player{padding:8px 11px;min-height:56px}.cards{gap:10px}.arena{padding:6px 0}.save-note{margin-top:12px}}
@media(max-width:359px){main{padding-right:16px;padding-left:16px}.card-wrap{gap:7px}.battle-history{width:123px}.table-center{gap:8px}}
@media(max-width:380px){.card-stage{width:118px}.battle-history{width:120px;gap:4px;padding-left:3px;padding-right:3px}.history-card .corner{left:3px}.table-center .pot{font-size:9px;padding:5px 7px}.table-center .stack-icon{display:none}}
@media(prefers-reduced-motion:reduce){.win-banner,.celebrating .current.lead,.round-flip-out,.round-flip-in,.collecting .card-stage,.collecting .battle-history,.collect-target{animation:none!important}.collecting .card-stage,.collecting .battle-history{opacity:.55}}

/* Compact floating glass dock. Keep the safe area outside the visible bar. */
body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.bottom-nav{position:fixed;z-index:30;inset:auto 0 calc(8px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:calc(100% - 32px);max-width:360px;margin:auto;padding:4px;border:1px solid var(--nav-line);border-radius:30px;background:var(--nav);box-shadow:0 6px 24px #0005,inset 0 1px 0 var(--surface-hover)}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;min-width:44px;padding:4px 8px;border-radius:24px;background:transparent;color:var(--muted);font-size:10px;font-weight:600;line-height:1.3;text-align:center;transition:background .15s ease,color .15s ease}
.bottom-nav button[aria-current="page"]{color:var(--selected-text);background:var(--selected);box-shadow:inset 0 1px 0 var(--highlight)}
.bottom-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bottom-nav button:active{background:var(--surface-hover)}
.bottom-nav svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#navPlay svg{fill:currentColor;stroke:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bottom-nav{background:linear-gradient(180deg,var(--nav-glass),var(--nav-glass));-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%)}}
@media(hover:hover){.bottom-nav button:hover{background:var(--surface-hover)}.bottom-nav button[aria-current="page"]:hover{background:var(--selected)}}
@media(prefers-reduced-transparency:reduce){.bottom-nav{background:var(--nav);-webkit-backdrop-filter:none;backdrop-filter:none}.bottom-nav button[aria-current="page"]{background:var(--selected)}}
@media(prefers-contrast:more){.bottom-nav{background:var(--nav);border-color:var(--border-strong);-webkit-backdrop-filter:none;backdrop-filter:none}.bottom-nav button{color:var(--text)}.bottom-nav button[aria-current="page"]{color:var(--selected-text);background:var(--selected);box-shadow:inset 0 0 0 1px var(--selected-text)}}
.online-lobby{margin-top:0}.online-lobby>.eyebrow{margin-bottom:12px}.online-lobby h2,.settings-view h2{margin:0 0 12px;font-size:30px}
.settings-view{padding:8px 0}.settings-view>.eyebrow{margin-bottom:12px}.settings-intro{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 24px}
.settings-view label,.avatar-fieldset legend{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--accent)}
.settings-view input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:16px}
.profile-preview{display:flex;gap:14px;align-items:center;min-width:0;margin:0 0 26px}.profile-preview>div{min-width:0}.profile-preview strong{overflow-wrap:anywhere;font-size:18px}.profile-preview p{margin:4px 0 0}
.avatar-preview,.player-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--accent);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:50%}.avatar-preview{width:64px;height:64px}.avatar-preview svg{width:34px;height:34px}.player-avatar{width:25px;height:25px;margin-right:7px;vertical-align:middle}.player-avatar svg{width:15px;height:15px}
.avatar-fieldset{border:0;padding:0;margin:24px 0}.avatar-fieldset legend{padding:0}.avatar-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.avatar-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:80px;min-width:0;padding:12px 6px;border:1px solid var(--border);border-radius:14px;background:var(--surface-raised);color:var(--muted);font-size:11px;line-height:1.4;text-align:center}
.avatar-choice svg{width:28px;height:28px}.avatar-choice[aria-pressed="true"]{background:var(--selected);color:var(--selected-text);border:2px solid var(--selected-border);padding:11px 5px;box-shadow:0 0 0 1px var(--selected-border)}
.settings-view form{margin-top:18px;border-top:1px solid var(--border);padding-top:8px}.settings-view .text-btn{width:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* A decorative deal → reveal → win → collect loop, independent of real games. */
.hero-cards{perspective:900px;overflow:visible}
.hero-cards .mini-card{position:relative;animation:demo-challenger 8s ease-in-out infinite;transform-style:preserve-3d}
.hero-cards .mini-card.ace{animation-name:demo-winner}
.hero-cards .mini-card::after{content:"";position:absolute;inset:0;border:5px solid var(--back-edge);border-radius:inherit;background:repeating-linear-gradient(45deg,var(--back-a),var(--back-a) 6px,var(--back-b) 6px,var(--back-b) 12px);animation:demo-card-back 8s step-end infinite}
@keyframes demo-challenger{0%,100%{opacity:0;transform:translate(-16px,-12px) rotate(-14deg) scale(.9)}10%,22%{opacity:1;transform:rotate(-14deg)}27%{transform:rotate(-14deg) rotateY(90deg)}32%,68%{opacity:1;transform:rotate(-14deg)}80%,90%{opacity:0;transform:translate(64px,-22px) rotate(10deg) scale(.75)}}
@keyframes demo-winner{0%,100%{opacity:0;transform:translate(16px,-12px) rotate(12deg) scale(.9);box-shadow:0 14px 35px #0006}10%,22%{opacity:1;transform:rotate(12deg)}27%{transform:rotate(12deg) rotateY(90deg)}32%,42%{transform:rotate(12deg);box-shadow:0 14px 35px #0006}48%,68%{opacity:1;transform:rotate(8deg) translateY(-5px);box-shadow:0 0 0 3px #7bc4ff,0 10px 35px #1686f866}80%,90%{opacity:0;transform:translate(15px,-22px) rotate(10deg) scale(.75);box-shadow:0 14px 35px #0006}}
@keyframes demo-card-back{0%,24%,91%,100%{opacity:1}25%,90%{opacity:0}}
.page-paused .hero-cards .mini-card,.page-paused .hero-cards .mini-card::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-cards .mini-card,.hero-cards .mini-card::after{animation:none!important}.hero-cards .mini-card::after{display:none}}


/* One compact glass top bar; mode and connection status stay below it. */
main{padding-top:max(14px,env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-bar{position:relative;z-index:40;display:flex;align-items:center;gap:8px;min-height:56px;margin-bottom:24px;padding:5px 6px 5px 14px;border:1px solid var(--nav-line);border-radius:20px;background:var(--nav);box-shadow:0 5px 20px #0003,inset 0 1px 0 var(--surface-hover)}
.top-bar .brand{display:flex;align-items:center;flex:1;min-width:0;min-height:44px;font-size:22px;letter-spacing:-1.1px;white-space:nowrap}
.top-bar-actions{display:flex;align-items:center;flex:none;gap:2px}
.top-bar #new{min-height:44px;min-width:44px;padding:6px 8px;border-radius:12px;color:var(--muted);font-size:11px;white-space:nowrap}
.top-bar .icon,.top-bar .match-options summary{width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--muted)}
.top-bar .icon{font-size:20px}.top-bar .match-options summary svg{width:22px;height:22px;fill:currentColor}
.top-bar .match-options[open] summary{background:var(--surface-hover);color:var(--text)}
.top-bar .options-panel{right:-46px;width:min(252px,calc(100vw - 48px));top:calc(100% + 12px);border-color:var(--nav-line);background:var(--nav);box-shadow:0 12px 34px #0008}
body:has(#game:not([hidden])) .top-bar{margin-bottom:8px}
.match-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:3px 10px;min-height:24px;margin-bottom:10px;font-size:9px;letter-spacing:.8px}
.match-info #connection{margin:0;color:var(--muted);font-size:11px;line-height:1.5;letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
.online-match:has(.end-request[hidden]){display:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top-bar{background:linear-gradient(180deg,var(--nav-glass),var(--nav-glass));-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%)}}
@media(hover:hover){.top-bar #new:hover,.top-bar .icon:hover,.top-bar .match-options summary:hover{background:var(--surface-hover)}}
@media(prefers-reduced-transparency:reduce){.top-bar{background:var(--nav);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){.top-bar,.top-bar .options-panel{background:var(--nav);border-color:var(--border-strong);-webkit-backdrop-filter:none;backdrop-filter:none}.top-bar #new,.top-bar .icon,.top-bar .match-options summary{color:var(--text)}}


/* The table is a fixed viewport slot. Battles grow inward as compressed stacks. */
body:has(#game:not([hidden])){padding-bottom:0;overflow-x:hidden}
body:has(#game:not([hidden])) main{height:100svh;display:flex;flex-direction:column;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
body:has(#game:not([hidden])) .top-bar{flex:none}
body:has(#game:not([hidden])) footer{display:none}
#game{--card-h:clamp(88px,calc((100svh - 390px)*.36),140px);--card-w:calc(var(--card-h)*.72);display:grid;grid-template-rows:24px minmax(0,1fr) 36px 48px 18px;gap:6px;flex:1;min-height:0}
#game .match-info{min-height:0;height:24px;margin:0;flex-wrap:nowrap;overflow:hidden}
#game #modeLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game .match-info #connection{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game .online-match{margin:0}
#game .game-table{min-height:0;display:grid;grid-template-rows:58px minmax(0,1fr) 58px}
#game .game-table>.player{min-height:0;height:58px;padding:7px 10px;gap:10px;overflow:hidden}
.game-table .player>div:nth-child(2){flex:1;min-width:0;line-height:1.2}
.game-table .player>div:nth-child(2)>strong{display:inline-block;max-width:calc(100% - 36px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:12px}
.game-table .player>div:nth-child(2)>small{display:inline-block;margin:1px 0 0;font-size:9px;line-height:1.4}
.game-table .player-wins{margin:1px 6px 0 0;font-size:9px;line-height:1.4}
.game-table .player-avatar{width:23px;height:23px;margin-right:5px}
.game-table .count{min-width:34px}.game-table .count strong{font-size:23px}
#game .arena{min-height:0;padding:7px 0}
#game .cards{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px}
#game .card-wrap{position:absolute;width:calc(50% - 5px);gap:3px;max-height:100%}
#game .card-wrap[data-side="top"]{top:0;right:0;padding:0}
#game .card-wrap[data-side="bottom"]{bottom:0;left:0;padding:0}
#game .card-wrap>small{flex:none;height:14px;line-height:14px;max-width:100%;margin:0;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#game .card-stage,#game .card-stage.war-with-previous{width:calc(var(--card-w) + 24px);height:calc(var(--card-h) + 24px);max-width:100%}
#game .card-stage .card{width:var(--card-w);height:var(--card-h);max-width:calc(100% - 24px);border-radius:10px;left:24px;top:24px}
#game .card-stage .current{z-index:4}
#game .card-stage .previous{display:none}
#game .card-stage .corner{font-size:clamp(13px,calc(var(--card-h)*.13),18px);top:7px;left:8px}
#game .card-stage .corner.bottom{top:auto;left:auto;bottom:7px;right:8px}
#game .card-stage .corner span{font-size:12px}
#game .card-stage .pip{font-size:calc(var(--card-h)*.34)}
#game .war-pile{z-index:2}
#game .card-stage .war-down{left:var(--fan-offset,0px);top:var(--fan-offset,0px);border-width:3px}
#game .battle-history{position:absolute;inset:0;display:block;width:100%;max-height:none;padding:0;overflow:visible;pointer-events:none;z-index:1}
#game .battle-history .history-card{position:absolute;left:var(--history-offset,0px);top:var(--history-offset,0px);z-index:var(--history-layer,1);transition:none;box-shadow:0 1px 4px #0006}
#game .history-card .corner{display:flex;gap:3px;align-items:center;font-size:12px;top:4px;left:5px}
#game .history-card .corner span{font-size:11px}
#game .history-card .corner.bottom,#game .history-card>.pip{display:none}
#game .table-center{top:9px;left:0;width:calc(50% - 5px);gap:7px}
#game .message{height:36px;min-height:0;margin:0;padding:2px 1px;font-size:11px;line-height:1.45;overflow:auto;scrollbar-width:thin}
#game .controls{height:48px;min-height:0;margin:0;gap:8px}
#game .controls .primary,#game .controls .secondary{min-height:44px;padding:8px 10px;font-size:13px}
#game .save-note{height:18px;line-height:18px;margin:0;font-size:9px;white-space:nowrap}
#game .save-note .text-btn{min-width:0;min-height:0;padding:0;font-size:9px;line-height:18px}
#game .end-request{margin:0;padding:5px 8px;max-height:92px;overflow:auto}
#game .end-request p{font-size:11px;margin:0}
#game .end-request-actions{gap:6px}.end-request-actions .secondary,.end-request-actions .text-btn{min-height:36px;padding:5px 8px}
#game:has(.end-request:not([hidden])){--card-h:clamp(76px,calc((100svh - 440px)*.3),120px)}
@media(max-height:620px){#game{grid-template-rows:20px minmax(0,1fr) 30px 44px 16px;gap:4px;--card-h:88px}#game .game-table{grid-template-rows:48px minmax(0,1fr) 48px}#game .game-table>.player{height:48px;padding:4px 8px}#game .arena{padding:4px 0}#game .message{height:30px;font-size:10px}#game .controls{height:44px}#game .table-center{gap:3px;top:2px}#game .save-note{height:16px;line-height:16px}#game:has(.end-request:not([hidden])){--card-h:64px}}
@media(max-height:520px){body:has(#game:not([hidden])) main{min-height:520px}#game{--card-h:72px}#game:has(.end-request:not([hidden])){--card-h:58px}}

#game{position:relative}#game>.match-info{grid-row:1}#game>.online-match{position:absolute;top:30px;left:0;right:0;z-index:12}#game>.game-table{grid-row:2}#game>.message{grid-row:3}#game>.controls{grid-row:4}#game>.save-note{grid-row:5}
#game:has(.end-request:not([hidden])){--card-h:clamp(88px,calc((100svh - 390px)*.36),140px)}
#game .collecting .battle-history{animation:none!important;opacity:1}
@media(max-height:620px){#game:has(.end-request:not([hidden])){--card-h:88px}}
@media(max-height:520px){#game:has(.end-request:not([hidden])){--card-h:72px}}

.top-bar .options-panel input{display:block;width:100%;max-width:100%;min-width:0;padding:10px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);background:var(--bg);font:inherit}
#game .card-wrap[data-side="top"],#game .card-wrap[data-side="bottom"]{grid-column:auto;grid-row:auto}
#game .player[data-side="top"] .deck-marker{order:3;margin-right:3px;margin-left:8px}
#game .player>div:nth-child(2)>small{margin-left:6px}

/* Labels follow the viewer's edge; compact fans keep spacing even as stacks grow. */
#game .card-wrap{gap:8px}
#game .card-wrap[data-side="top"]>small{order:-1}
#game .card-wrap[data-side="bottom"]>small{order:1}
#game .card-wrap>small{transform:translateX(12px);max-width:calc(100% - 24px);font-size:10px;letter-spacing:.5px}
#game .card-stage,#game .card-stage.war-with-previous{height:calc(var(--card-h) + 8px)}
#game .card-stage .current{top:8px}
#game .card-stage .war-down{top:calc(var(--fan-offset,0px)*.3)}
#game .battle-history .history-card{top:calc(var(--history-offset,0px)*.3)}

/* Invitation action remains prominent at the foot of the game board. */
#game .controls .send-invitation{width:100%;min-height:44px;border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:800;padding:10px 16px;box-shadow:0 4px 18px #adf07822}
#game .controls .send-invitation:disabled{opacity:.65}
.waiting-opponent{width:100%;margin:0;align-self:center;text-align:center;color:var(--muted);font-size:15px;font-weight:650}

/* Theme-aware navigation: quiet chrome, clear active states and comfortable touch targets. */
.top-bar{border-radius:22px;background:var(--nav-glass);border-color:var(--nav-line);box-shadow:0 8px 24px var(--shadow),inset 0 1px 0 var(--highlight);padding:5px 7px 5px 13px}
.top-bar .brand{gap:9px;font-size:23px;letter-spacing:-1.15px}
.brand .brand-word{margin:0;color:var(--text)}
.brand-mark{flex:none;width:27px;height:27px;fill:var(--surface-raised);stroke:var(--accent);stroke-width:1.4}
.brand-mark rect:nth-child(2){fill:var(--accent)}
.brand-mark path{fill:var(--accent-ink);stroke:none}
.top-bar .icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.top-bar-actions{gap:3px}
.top-bar #new{font-size:11px;font-weight:700;padding-inline:10px;color:var(--text);background:var(--highlight);border:1px solid var(--nav-line);border-radius:13px}
.top-bar .icon,.top-bar .match-options summary{color:var(--muted);border-radius:13px;transition:background .16s ease,color .16s ease}
.top-bar .match-options[open] summary{color:var(--selected-text);background:var(--selected)}
.top-bar .options-panel{padding:7px;border-radius:18px;background:var(--surface);border-color:var(--border);box-shadow:0 18px 48px var(--shadow)}
.options-panel button,.options-panel .secondary,.options-panel .text-btn,.options-panel .cancel-invite{border-radius:11px;padding:11px 12px;font-weight:600}
.options-panel .match-tools{border-top:1px solid var(--border);margin-top:5px;padding-top:5px}
.options-panel #shareStatus{color:var(--muted)}
.bottom-nav{width:calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));max-width:368px;gap:4px;padding:5px;border-radius:25px;border-color:var(--nav-line);background:var(--nav-glass);box-shadow:0 8px 30px var(--shadow),inset 0 1px 0 var(--highlight)}
.bottom-nav button{gap:4px;border-radius:19px;font-size:10px;font-weight:700;letter-spacing:.1px;color:var(--muted)}
.bottom-nav button[aria-current="page"]{color:var(--selected-text);background:var(--selected);box-shadow:inset 0 0 0 1px var(--nav-line)}
.bottom-nav button:focus-visible{outline-color:var(--selected-border)}
.bottom-nav svg{stroke-width:1.8}
#navSettings svg circle{fill:var(--nav)}
#navSettings[aria-current="page"] svg circle{fill:var(--selected)}
.primary,.secondary,.sign-in{transition:background .16s ease,box-shadow .16s ease;border-radius:15px}
.primary,.sign-in{box-shadow:0 3px 12px var(--shadow)}
.mini-card.ace{color:var(--accent-ink)}
.player,.online-lobby{box-shadow:inset 0 1px 0 var(--highlight)}
.online-lobby{padding:22px 18px;border-radius:22px}
.lobby-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.lobby-title-row h2{margin:0;font-size:28px}
.lobby-title-row .secondary{width:auto;flex:none;min-height:44px;padding:8px 12px;font-size:11px;gap:5px;border-radius:12px}
.lobby-title-row svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.recent-match{border-radius:16px;background:var(--bg);padding:17px 15px;box-shadow:0 2px 8px var(--shadow)}
.recent-match.your-turn{background:var(--surface-raised);border-color:var(--selected-border)}
.recent-match.your-turn span{color:var(--selected-text)}
.match-list h3 span{color:var(--subtle)}
.auth-actions{margin-top:22px}
.settings-view>h2{margin-bottom:8px}
.settings-intro{margin-bottom:22px}
#settingsGuest,#settingsAccount{padding:20px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
#settingsGuest>.muted{margin-top:0;font-size:13px}
#settingsGuest .primary{margin-top:16px}
#settingsAccount .profile-preview{margin-bottom:22px}
.settings-view label{color:var(--text)}
.settings-view form .text-btn{color:var(--muted)}
.theme-fieldset{padding:0;margin:0 0 28px;border:0;min-width:0}
.theme-fieldset legend{padding:0;font-size:16px;font-weight:700;color:var(--text)}
.theme-fieldset>p{margin:8px 0 14px;max-width:38ch;font-size:12px}
.theme-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.settings-view .theme-choice{position:relative;min-width:0;margin:0;cursor:pointer;line-height:1.4}
.theme-choice input{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;overflow:hidden;clip-path:inset(50%)}
.theme-swatch{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/.94;border:1px solid var(--border);border-radius:16px;background:var(--swatch-bg);box-shadow:0 4px 12px var(--shadow);overflow:hidden;transition:box-shadow .16s ease}
.theme-swatch::after{content:"";position:absolute;bottom:8px;left:25%;width:50%;height:7px;border-radius:5px;background:var(--swatch-accent);opacity:.6}
.swatch-classic{--swatch-bg:#1c2531;--swatch-accent:#d4deec}
.swatch-dark{--swatch-bg:#0b1418;--swatch-accent:#b9e7da}
.swatch-light{--swatch-bg:#f4f1ea;--swatch-accent:#2857a3}
.swatch-pink{--swatch-bg:#513044;--swatch-accent:#f4bad6}
.swatch-cards{position:relative;width:27px;height:38px;margin-bottom:6px;border-radius:5px;background:#f7f5ed;box-shadow:0 2px 8px #0003;transform:translateX(-7px) rotate(-13deg)}
.swatch-cards::after{content:"";position:absolute;inset:0;border-radius:5px;background:var(--swatch-accent);transform:translate(14px,2px) rotate(25deg);box-shadow:0 2px 8px #0003}
.theme-check{position:absolute;display:grid;place-items:center;right:5px;top:5px;z-index:1;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:800;background:var(--accent);color:var(--accent-ink);opacity:0;transform:scale(.8);transition:opacity .16s ease,transform .16s ease}
.theme-label{display:block;margin-top:9px;font-size:12px;font-weight:700;color:var(--text)}
.theme-label small{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:2px}
.theme-choice input:checked+.theme-swatch{border-color:var(--selected-border);box-shadow:0 0 0 2px var(--selected-border)}
.theme-choice input:checked+.theme-swatch .theme-check{opacity:1;transform:scale(1)}
.theme-choice input:focus-visible+.theme-swatch{outline:3px solid var(--accent);outline-offset:5px}
#themeStatus{margin:14px 0 0;min-height:20px;font-size:11px}
#game .opening-deal-card{border-color:var(--back-edge);background:repeating-linear-gradient(45deg,var(--back-a),var(--back-a) 3px,var(--back-b) 3px,var(--back-b) 6px)}
#game .controls .send-invitation{background:var(--invite);color:var(--invite-ink);box-shadow:0 4px 18px var(--shadow)}
dialog{border-color:var(--border);box-shadow:0 24px 80px var(--shadow)}
input::placeholder{color:var(--subtle);opacity:1}
@media(hover:hover){.top-bar #new:hover,.top-bar .icon:hover,.top-bar .match-options summary:hover,.bottom-nav button:hover{background:var(--surface-hover)}.bottom-nav button[aria-current="page"]:hover{background:var(--selected)}.theme-choice:hover .theme-swatch{border-color:var(--selected-border)}.primary:hover,.sign-in:hover{filter:brightness(1.06)}.secondary:hover{background:var(--surface-hover)}}
@media(max-width:360px){.top-bar .brand{font-size:19px;gap:5px}.brand-mark{width:20px;height:20px}.top-bar{padding-left:10px}.top-bar #new{padding-inline:6px;font-size:10px}.top-bar-actions{gap:1px}.theme-choices{gap:8px}.theme-label small{font-size:8px}.lobby-title-row{align-items:flex-start}.lobby-title-row h2{font-size:25px}.lobby-title-row .secondary{padding-inline:9px}#settingsGuest,#settingsAccount{padding:16px}}
@media(prefers-reduced-transparency:reduce){.top-bar,.bottom-nav{background:var(--nav);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){.top-bar,.bottom-nav,.top-bar .options-panel{background:var(--nav);border-color:var(--text);-webkit-backdrop-filter:none;backdrop-filter:none}.bottom-nav button,.top-bar .icon,.top-bar .match-options summary{color:var(--text)}.bottom-nav button[aria-current="page"]{outline:1px solid var(--selected-border);outline-offset:-1px}}

/* Every exposed FlipFeud pot card owns a cell, including the third card.
   Keep the existing fixed-height arena; longer battles use compact face tiles. */
#game .card-stage.pot-spread {
  display:grid; grid-template-columns:repeat(var(--pot-columns,2),minmax(0,1fr));
  grid-template-rows:repeat(var(--pot-rows,1),minmax(0,1fr));
  align-items:center; justify-items:center; gap:6px;
  width:100%; padding:8px 4px 2px;
}
#game .card-stage.pot-spread .battle-history { display:contents; }
#game .card-stage.pot-spread :is(.history-card,.current) {
  position:relative; inset:auto; z-index:3; width:100%; height:auto;
  max-width:var(--card-w); max-height:100%; min-width:0; min-height:0;
  aspect-ratio:18/25; border-radius:7px; margin:0;
}
#game .card-stage.pot-spread .current { z-index:4; }
#game .card-stage.pot-spread .corner {
  display:block; top:4px; left:4px; font-size:13px; line-height:1;
}
#game .card-stage.pot-spread .corner span { display:block; font-size:11px; }
#game .card-stage.pot-spread .corner.bottom { display:none; }
#game .card-stage.pot-spread .pip { display:block; font-size:24px; }
#game .card-stage.pot-spread .current.lead { box-shadow:0 0 0 2px #4ba8ff,0 3px 10px #1686f880; }
#game .card-stage.pot-spread .current.trail { box-shadow:0 0 0 2px #ff6268,0 3px 10px #f8344859; }
#game .card-stage.pot-dense { gap:3px; }
#game .card-stage.pot-dense :is(.history-card,.current) { border-radius:4px; max-width:none; }
#game .card-stage.pot-dense .corner {
  position:static; display:flex; align-items:center; justify-content:center;
  gap:2px; font-size:13px; white-space:nowrap;
}
#game .card-stage.pot-dense .corner span { font-size:13px; }
#game .card-stage.pot-dense .corner.bottom,#game .card-stage.pot-dense .pip { display:none; }

/* The existing pot chip opens a readable, complete view without adding a play row. */
#game .table-center .pot { position:relative; min-height:44px; max-width:100%; display:flex; flex-wrap:wrap; justify-content:center; column-gap:4px; row-gap:1px; padding:4px 7px; border-radius:12px; }
#game .table-center .pot:disabled { opacity:1; cursor:default; }
#game .table-center .pot .stack-icon { display:none; }
#game .table-center .pot > small { flex-basis:100%; font-size:10px; line-height:1.2; color:var(--accent); text-decoration:underline; }
#game .table-center .pot:disabled > small { color:var(--muted); text-decoration:none; }
.pot-details-dialog { width:min(640px,calc(100vw - 24px)); max-width:640px; max-height:calc(100dvh - 24px); padding:12px; border-radius:18px; overflow:auto; overscroll-behavior:contain; }
.pot-details-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pot-details-heading h2 { font-size:20px; line-height:1.2; margin:0; }
.pot-details-heading button { width:auto; min-width:60px; min-height:44px; padding:8px 12px; font-size:13px; }
#potDetailsNote { font-size:12px; line-height:1.35; color:var(--muted); margin:8px 0 12px; }
.pot-details-players { display:grid; gap:12px; }
.pot-detail-player { min-width:0; }
.pot-detail-player h3 { font-size:13px; line-height:1.2; overflow-wrap:anywhere; margin:0 0 6px; }
.pot-detail-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(36px,1fr)); gap:4px; }
.pot-detail-cards .pot-detail-card { position:relative; inset:auto; width:100%; height:28px; min-height:28px; border-radius:5px; box-shadow:none; }
.pot-detail-card .corner { position:static; display:flex; align-items:center; justify-content:center; gap:2px; font-size:14px; line-height:1; }
.pot-detail-card .corner span { display:inline; font-size:14px; }
.pot-detail-card .corner.bottom,.pot-detail-card > .pip { display:none; }
.pot-detail-backs { font-size:11px; color:var(--muted); margin:5px 0 0; }
@media(min-width:540px) { .pot-details-players { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Measured space keeps the larger pot control clear of both card rows. */
body.pf-playing #game:has(#inspectPot) { --card-h:clamp(48px,calc(var(--pf-play-arena-height,200px) - var(--pot-reserve,92px)),150px); }
#game .table-center .pot > small { white-space:nowrap; }