:root{color-scheme:dark;--bg:#070c18;--card:#121b2d;--line:#293b58;--muted:#a9bad1;--accent:#4df6ca}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#14324b,transparent 55%),var(--bg);color:#f5f9ff;font:16px system-ui,sans-serif;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:22px max(5vw,18px);border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none;font-size:26px;font-weight:900;letter-spacing:3px}a span{display:inline-block;margin-left:12px;font-size:11px;color:var(--accent);letter-spacing:2px}main{max-width:1300px;margin:auto;padding:36px 24px}h1{font-size:clamp(32px,5vw,60px);line-height:1.08;margin:15px 0 20px}h2{font-size:21px}p{color:var(--muted);line-height:1.6}.eyebrow{font-size:12px;color:var(--accent);font-weight:800;letter-spacing:2px}.panels{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.panels>*,aside{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:22px}label{display:block;color:var(--muted);font-size:13px;margin:15px 0}input,select,button{font:inherit;border-radius:12px;border:1px solid var(--line);padding:13px 16px;color:inherit;background:#0b1423}input,select{display:block;width:100%;margin-top:7px}button{cursor:pointer;font-weight:700;transition:background .2s,transform .2s}button:hover{background:#1a3048}button:disabled{opacity:.45;cursor:wait}.primary{background:var(--accent);color:#06251e;border:0}.primary:hover{background:#91ffe1}.row{display:flex;gap:16px}.row>*{flex:1;min-width:0}form>button{width:100%;margin-top:12px}#rooms button{display:block;width:100%;text-align:left;margin-top:10px}#message{min-height:28px;color:var(--accent);font-weight:650}.error{color:#ff9c9c!important}.matchhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.matchhead h1{font-size:32px}.playgrid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(250px,.7fr);gap:24px}.boardwrap{max-width:640px;width:100%;margin:auto;text-align:center}canvas{width:100%;aspect-ratio:4/5;max-height:65vh;object-fit:contain;touch-action:none;border-radius:20px;background:#091526;border:1px solid #304c6a}#turn{font-size:20px;font-weight:850;padding:14px;color:var(--accent)}.player{padding:16px;margin:10px 0;border-radius:14px;background:#0a1322;border:2px solid transparent;display:flex;justify-content:space-between;gap:12px}.player.active{border-color:var(--accent);box-shadow:0 0 18px #4df6ca18}.player strong{font-size:25px}.player small{display:block;color:var(--muted);margin-top:5px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}#stats{font-size:20px;font-weight:700}footer{text-align:center;font-size:12px;color:var(--muted);padding:25px}[hidden]{display:none!important}@media(max-width:700px){.panels,.playgrid{grid-template-columns:1fr}main{padding:22px 15px}header{padding:15px}header button{font-size:12px;padding:10px}.panels>*,aside{padding:18px}canvas{max-height:60vh}.matchhead{align-items:flex-start}.matchhead h1{font-size:24px}}

/* Calibrated board: the artwork, depth map and path use the same coordinates. */
.boardwrap{max-width:900px}canvas{aspect-ratio:4/3;max-height:none;object-fit:fill}#launch-ball{width:100%;touch-action:none;user-select:none;background:#183d55;color:white;margin-top:10px}#launch-ball:disabled{opacity:.45}#launch-ball.held{opacity:.4}
#grip{position:fixed;z-index:1000;pointer-events:none;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 32% 25%,white,#b2c7d4 35%,#293c4a 90%);box-shadow:0 5px 9px #0007;transform:translate(calc(var(--gx,0px) - 50%),calc(var(--gy,0px) - 50%))}#grip.releasing{transition:transform .18s ease-out,opacity .18s;transform:translate(calc(var(--rx,0px) - 50%),calc(var(--ry,0px) - 50%));opacity:0}
@media(max-width:700px){canvas{max-height:none}.boardwrap{max-width:100%}}

/* Player cards stay below the board, including in landscape. */
.playgrid{grid-template-columns:minmax(0,1fr)}.playgrid>aside{min-width:0;padding:0;background:transparent;border:0;border-radius:0}#stats{font-size:14px;color:var(--muted)}.cards-heading{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px;font-size:14px;font-weight:900;letter-spacing:1px}.cards-heading span{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}
#players{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:5px 3px 14px;scrollbar-width:thin;scrollbar-color:#435d78 transparent;overscroll-behavior-x:contain}
.orbix-card{--player-color:#00baff;position:relative;flex:0 0 clamp(160px,25%,230px);min-width:0;overflow:hidden;isolation:isolate;border:3px solid var(--player-color);border-radius:22px;background:#020a10;scroll-snap-align:start;box-shadow:0 5px 18px #0006}
.card-portrait{position:relative;height:112px;background:radial-gradient(ellipse at 50% 100%,#020a10 0%,transparent 75%),linear-gradient(135deg,#112c3b,var(--player-color));overflow:hidden}
.card-portrait:after{content:'';position:absolute;inset:0;opacity:.2;background:repeating-linear-gradient(135deg,transparent 0 30px,#fff5 31px 32px,transparent 33px 64px);pointer-events:none}
.card-rank{position:absolute;left:9px;top:9px;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#000b;color:#ffe33c;font-size:27px;font-weight:950;z-index:2}
.card-turn{position:absolute;right:7px;top:11px;max-width:calc(100% - 64px);border-radius:20px;background:#020a10e8;padding:6px 7px;font-size:9px;font-weight:900;line-height:1.2;color:white;text-align:center;z-index:2;overflow-wrap:anywhere}
.card-emblem{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:57px;font-weight:950;font-style:italic;letter-spacing:-4px;color:#ffffffba;text-shadow:0 4px 10px #0007;z-index:1}
.card-name{position:relative;margin:0;min-height:45px;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 7px;text-align:center;font-size:14px;font-weight:900;font-style:italic;background:linear-gradient(90deg,transparent,#020a10 20% 80%,transparent);overflow-wrap:anywhere;line-height:1.15}.card-you{font-style:normal;font-size:8px;color:#8be9d4;flex-shrink:0}
.card-score{position:relative;margin:1px 7px 9px;border-radius:15px;padding:7px 3px;min-height:73px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 130%,var(--player-color),transparent 68%),#00050a;color:#d9edf8;font-size:clamp(35px,7vw,54px);font-weight:950;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1.15}
.card-remaining{display:flex;justify-content:space-between;gap:5px;padding:0 11px;font-size:12px;font-weight:850;color:#b8cad5}.card-remaining strong{color:#ffe43b}.card-progress{height:8px;margin:7px 11px 10px;border:1px solid #97b9cc;border-radius:999px;background:#07121c;overflow:hidden}.card-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#00e9b4,#7affc6);transition:width .25s}
.card-balls{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:0 11px 11px}.card-ball{width:clamp(15px,3.6vw,23px);aspect-ratio:1;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff 0 5%,#a0b4c0 15%,#576e7c 57%,#162732 90%);box-shadow:0 2px 3px #000a}.card-ball.used{background:radial-gradient(circle at 30% 24%,#c9ffd4 0 5%,#19d457 18%,#087d2c 60%,#043d19 90%)}
.orbix-card.active .card-turn{color:#33ffc3}.orbix-card.active .card-score{color:#ffcf31}.orbix-card.active:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 5%,#faff00a0,transparent 70%);animation:cardPulse 1.1s ease-in-out infinite alternate;pointer-events:none}.orbix-card.active .card-portrait{background:radial-gradient(ellipse at 50% 0,#faff00c0,transparent 85%),linear-gradient(135deg,#112c3b,var(--player-color))}@keyframes cardPulse{from{opacity:.35}to{opacity:1}}
@media(max-width:700px){.orbix-card{flex-basis:calc((100% - 12px)/2);min-width:148px}.playgrid{gap:14px}.card-score{font-size:46px}.matchhead h1{font-size:20px}.cards-heading{font-size:12px}}@media(prefers-reduced-motion:reduce){.orbix-card.active:before{animation:none}.card-progress span{transition:none}}

.avatar-picker{margin-top:25px;padding:20px;border:1px solid var(--line);border-radius:22px;background:#101a2b}.avatar-picker h2{margin:0;font-size:18px}.avatar-picker p{font-size:13px;margin:8px 0 14px}.avatar-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.avatar-choice{padding:0;aspect-ratio:1;border:3px solid transparent;overflow:hidden;border-radius:15px;background:linear-gradient(145deg,#233a55,#0a1424);position:relative;touch-action:manipulation}.avatar-choice img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}.avatar-choice.selected{border-color:#e5ff00;box-shadow:0 0 0 2px #e5ff0030;background:linear-gradient(145deg,#365358,#153444)}.avatar-choice.selected:after{content:'✓';position:absolute;right:3px;bottom:3px;width:22px;height:22px;border-radius:50%;background:#e5ff00;color:#07121c;display:grid;place-items:center;font-weight:900}.avatar-choice:focus-visible{outline:3px solid white;outline-offset:2px}.card-avatar{position:absolute;inset:4px 0 0;width:100%;height:calc(100% - 4px);object-fit:contain;object-position:center bottom;z-index:1}.card-portrait:after{z-index:0}.card-rank,.card-turn{z-index:3}
@media(max-width:700px){.avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.avatar-picker{padding:14px}.avatar-choice{border-radius:12px}}

.solo-option{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.solo-option h2{margin:0;font-size:18px}.solo-option p{font-size:13px;margin:8px 0}.solo-option button{width:100%;margin-top:8px;background:#e5ff00;color:#132002}.solo-option small{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:10px}

/* One viewport arena: controls and scoreboard remain visible without page scrolling. */
#match-dialog{width:min(92vw,420px);max-height:88dvh;overflow:auto;border:1px solid #46607e;border-radius:22px;padding:22px;background:#0a1727;color:white;box-shadow:0 20px 80px #000b}#match-dialog::backdrop{background:#000b}#match-dialog h2{margin-top:0}#match-dialog>button,#match-settings>button{display:block;width:100%;margin:9px 0}#match-dialog p{font-size:12px}#leave{border-color:#ff657c;color:#ffbcc7}#resume-match{width:100%;margin-top:20px}.parked .panels,.parked .avatar-picker{display:none}#cards-prev,#cards-next{padding:0;width:28px;height:24px;line-height:20px;margin-left:6px}
body.in-match{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}body.in-match>header,body.in-match>footer{display:none}body.in-match main{width:100%;height:100%;max-width:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow:hidden}
body.in-match #match{height:100%;display:grid;grid-template-rows:38px minmax(0,1fr);gap:0;background:#020a13;overflow:hidden}body.in-match .matchhead{margin:0;padding:3px 10px;min-width:0;gap:8px;border-bottom:1px solid #21364b}body.in-match .matchhead>div{min-width:0}body.in-match .matchhead h1{font-size:13px;line-height:1.1;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.in-match #roomkind,body.in-match #invite{display:none}#match-menu{padding:6px 10px;font-size:12px;border-radius:10px;flex-shrink:0}
body.in-match .playgrid{height:100%;min-height:0;gap:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 172px;overflow:hidden}body.in-match .boardwrap{min-height:0;max-width:none;height:100%;display:grid;grid-template-rows:25px minmax(0,1fr) 43px 31px;overflow:hidden;margin:0}body.in-match #turn{padding:4px 8px;font-size:13px;line-height:17px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body.in-match canvas{display:block;min-height:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;border:0;border-radius:0;background:#020a13;touch-action:none}body.in-match #launch-ball{border-radius:12px;width:calc(100% - 16px);margin:2px 8px;padding:5px;font-size:12px;line-height:16px;min-height:36px}body.in-match #hint{margin:0;padding:2px 10px;font-size:10px;line-height:13px;overflow:hidden;color:#bfd3de}
body.in-match aside{min-height:0;height:100%;padding:0 7px 4px;overflow:hidden;display:grid;grid-template-rows:23px minmax(0,1fr)}body.in-match #stats,body.in-match #last{display:none}body.in-match .cards-heading{margin:0;font-size:10px;line-height:20px}body.in-match #players{gap:8px;overflow:hidden;scroll-snap-type:none;padding:0 0 2px;min-height:0;touch-action:none;scrollbar-width:none}body.in-match .orbix-card{flex:0 0 calc((100% - 8px)/2);min-width:0;max-width:260px;border-width:2px;border-radius:15px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:53px 24px 23px 7px 17px;column-gap:4px;padding-bottom:3px}body.in-match .card-portrait{height:53px;grid-column:1;grid-row:1/3}body.in-match .card-avatar{height:73px;inset:1px 0 auto;object-position:center bottom}body.in-match .card-portrait{height:77px}body.in-match .card-rank{left:4px;top:4px;width:25px;height:25px;font-size:17px;border-radius:7px}body.in-match .card-turn{top:auto;bottom:2px;right:2px;left:2px;max-width:none;font-size:7px;padding:3px;z-index:4}body.in-match .card-emblem{font-size:30px;bottom:12px}body.in-match .card-name{grid-column:2;grid-row:1;margin:0;padding:4px 3px;font-size:10px;min-height:0;align-self:start;min-width:0;display:block}body.in-match .card-you{display:block;font-size:7px}body.in-match .card-score{grid-column:2;grid-row:2;margin:-20px 3px 0 0;min-height:0;font-size:29px;letter-spacing:-1px;line-height:1;padding:3px}body.in-match .card-remaining{grid-column:1/3;grid-row:3;padding:4px 7px 0;font-size:10px;line-height:15px}body.in-match .card-progress{grid-column:1/3;grid-row:4;height:6px;margin:0 7px}body.in-match .card-balls{grid-column:1/3;grid-row:5;padding:4px 7px 0}.in-match .card-ball{width:12px;max-height:12px}body.in-match .actions{display:none}body.in-match .lobby .playgrid{grid-template-rows:minmax(0,1fr) 222px}body.in-match .lobby aside{grid-template-rows:23px minmax(0,1fr) 45px}body.in-match .lobby .actions{display:flex;margin:2px 0;gap:8px}body.in-match .lobby .actions button{padding:7px 12px;font-size:12px}body.in-match #message{display:none}body.in-match #message.error:not(:empty){display:block;position:fixed;z-index:20;top:42px;left:10px;right:10px;font-size:12px;padding:8px;background:#401824f0;border:1px solid #b1485e;border-radius:12px;max-height:65px;overflow:hidden;margin:0}
@media(max-height:520px) and (orientation:landscape){body.in-match .playgrid{grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:minmax(0,1fr)}body.in-match aside{grid-template-rows:23px minmax(0,1fr)}body.in-match #players{flex-direction:column;gap:6px}.in-match .orbix-card{flex-basis:132px;min-height:132px;max-width:none;width:100%}body.in-match .lobby .playgrid{grid-template-rows:minmax(0,1fr)}body.in-match .lobby aside{grid-template-rows:23px minmax(0,1fr) 45px}}

body.in-match{min-height:0}

/* ORBIX app entry and profile */
.nav-logo{width:150px;height:auto;display:block}header a{display:flex;align-items:center}body.onboarding-open>header,body.onboarding-open>footer{display:none}body.onboarding-open main{padding:max(22px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));max-width:580px}.onboarding{width:100%;margin:auto}.onboard-brand{text-align:center;margin:12px auto 20px}.onboard-brand img{display:block;width:min(85%,330px);height:auto;margin:0 auto 18px;filter:drop-shadow(0 8px 22px #00aaff35)}.onboard-brand .eyebrow{font-size:9px;letter-spacing:2px}.install-app{width:100%;font-size:12px;padding:13px 8px;margin:0 0 20px;border:1px solid #38789b;background:linear-gradient(110deg,#10354d,#112239);color:#d6f7ff;border-radius:15px}.onboard-panel{padding:24px 20px;border:1px solid #2b4360;border-radius:26px;background:linear-gradient(145deg,#15263ce8,#0b1422f0);box-shadow:0 22px 70px #0005}.step-number{font-size:10px;font-weight:850;letter-spacing:2px;color:#72e7ff}.onboard-panel h1{font-size:clamp(27px,7vw,38px);margin:15px 0 10px;letter-spacing:-1px}.onboard-panel p{font-size:13px}.onboard-panel input{min-height:52px;font-size:17px;background:#050f1d;border-color:#345272}.onboard-panel button.primary{width:100%;padding:16px;margin-top:15px;font-size:13px;background:#dcff00;color:#112001;border-radius:14px}.onboard-panel .step-back{display:block;width:100%;border:0;background:transparent;color:#a7bbce;font-size:12px;margin-top:12px;padding:10px}#access-code{text-align:center;font-size:30px;letter-spacing:10px;border-radius:16px}.identity-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.identity-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:175px;background:linear-gradient(135deg,#173b58,#101c30);border:1px solid #3286b8;border-radius:22px;padding:16px 10px}.identity-options button:last-child{background:linear-gradient(135deg,#352655,#132139);border-color:#7654a7}.identity-options button>span{font-size:46px;line-height:1;color:#84edff}.identity-options strong{font-size:17px}.identity-options small{font-size:10px;font-weight:450;color:#b4c8d8}#avatar-step .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}.photo-preview{width:min(100%,240px);aspect-ratio:1;margin:20px auto;border-radius:25px;overflow:hidden;border:2px solid #5a91ae;background:radial-gradient(circle,#1a3c52,#081521);display:grid;place-items:center}.photo-preview img{width:100%;height:100%;object-fit:cover}.photo-preview>span{font-size:85px;color:#80d9ee}#take-photo{width:100%;font-size:12px}.profile-chip{font-size:12px;padding:9px 14px;color:#a6ecff}.room-options{border-top:1px solid #2c415c;margin-top:18px;padding-top:8px}.room-options small{font-size:11px;color:#a9bed1}.card-photo{object-fit:cover!important;object-position:center!important;border-radius:11px;inset:0!important;width:100%!important;height:100%!important}.card-portrait{border-radius:15px 15px 0 0}.orbix-card.active{animation:activeGlow 1.2s ease-in-out infinite alternate}.orbix-card.active:before{opacity:.9;background:radial-gradient(ellipse at 50% 0%,#faff00d9,transparent 85%)}@keyframes activeGlow{from{box-shadow:0 0 4px var(--player-color),inset 0 0 4px var(--player-color)}to{box-shadow:0 0 20px var(--player-color),inset 0 0 18px var(--player-color)}}body.in-match .card-portrait{border-radius:10px;margin:3px 0 0 3px;height:72px}.install-logo{display:block;width:100%;height:auto}#install-dialog{background:#0c1b2c;color:white;border:1px solid #36668a;border-radius:24px;width:min(90vw,400px);padding:24px}#install-dialog::backdrop{background:#000b}#install-dialog p{font-size:14px}#install-close{width:100%}
/* Server-confirmed points; never capture a throwing gesture. */
#score-feedback{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;place-items:center;text-align:center}.feedback-shade{position:absolute;inset:0;background:radial-gradient(ellipse,#06101dbb,transparent 70%)}.feedback-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;animation:scorePop .4s cubic-bezier(.18,.9,.2,1.3)}#feedback-label{font-size:14px;font-weight:900;letter-spacing:2px;color:#dbf7ff}#feedback-value{font-size:clamp(70px,24vw,140px);font-weight:950;font-style:italic;line-height:1;color:#fff332;text-shadow:0 3px 0 #b96500,0 0 30px #ffce0066}.negative #feedback-value{color:#ff626e;text-shadow:0 3px 0 #790d39,0 0 30px #ff356766}#roulette-wheel{position:relative;width:220px;height:220px;margin-bottom:8px}.wheel-pointer{position:absolute;left:0;right:0;top:-19px;z-index:2;color:#fff;font-size:27px;filter:drop-shadow(0 2px 4px black)}.wheel-disc{width:100%;height:100%;border-radius:50%;border:7px solid #ffd95a;box-shadow:0 0 30px #ffd30055;background:conic-gradient(#0869b0 0deg 60deg,#243b74 60deg 120deg,#066d7f 120deg 180deg,#2c407e 180deg 240deg,#a4387f 240deg 300deg,#146cad 300deg);position:relative}.wheel-disc span{position:absolute;left:calc(50% - 24px);top:calc(50% - 9px);width:48px;line-height:18px;font-size:14px;font-weight:950;color:white;text-shadow:0 2px 3px black}.has-wheel #feedback-value{font-size:64px;animation:resultReveal 1.7s both}@keyframes scorePop{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes wheelSpin{from{transform:rotate(0)}to{transform:rotate(var(--wheel-end,1800deg))}}@keyframes resultReveal{0%,85%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.orbix-card.active,.feedback-content,.wheel-disc,.has-wheel #feedback-value{animation:none!important}}

.match-logo{display:block;width:70px;height:26px;object-fit:contain;flex-shrink:0}body.in-match .matchhead>div{flex:1}body.in-match .matchhead h1{font-size:11px}

body.onboarding-open #message{display:none}

/* Install action is the primary invitation, not a utility link. */
.install-app{position:relative;min-height:57px!important;border:2px solid #73dbff!important;background:linear-gradient(120deg,#087bfa,#1258cf)!important;color:#f4fbff!important;font-size:14px!important;font-weight:950;box-shadow:0 0 0 5px #189eff16,0 8px 30px #088cff50;animation:installGlow 1.8s ease-in-out infinite alternate;letter-spacing:.1px}.install-app:before{content:'⬇';display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e0f6ff;color:#0859b8;margin-right:8px;font-size:17px}.install-app:hover{transform:translateY(-1px);background:#168dff!important}@keyframes installGlow{to{box-shadow:0 0 0 6px #2abaff28,0 8px 36px #149aff88}}
/* Personalized lobby header and room slides. */
.lobby-hero{position:relative;isolation:isolate;overflow:hidden;border:1px solid #345a77;border-radius:28px;text-align:center;padding:22px 18px 20px;background:radial-gradient(ellipse at 50% 0%,#1b78a3aa,transparent 68%),linear-gradient(140deg,#182d47,#09111f 80%);box-shadow:0 12px 38px #0004;margin:4px 0 26px}.lobby-hero:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.35;background:repeating-linear-gradient(135deg,transparent 0 70px,#39d6ff2a 71px 73px,transparent 74px 145px)}.welcome-banner{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}.welcome-banner span{font-size:9px;font-weight:850;letter-spacing:3px;color:#9eeaff}.welcome-banner strong{font-size:20px;font-weight:950;letter-spacing:1px;color:white}.welcome-portrait{width:130px;height:130px;margin:auto;border:3px solid #69dcff;border-radius:30px;background:radial-gradient(ellipse at center,#2378a8,#071321);box-shadow:0 0 0 7px #7bdcff10,0 10px 28px #0008;overflow:hidden;display:grid;place-items:center;font-size:45px;font-weight:950}.welcome-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.welcome-portrait img.is-photo{object-fit:cover}.lobby-hero h1{font-size:26px;letter-spacing:-.8px;line-height:1.15;margin:20px 0 8px;overflow-wrap:anywhere}.lobby-hero p{font-size:12px;margin:0 0 12px}.public-rooms-section{margin-bottom:26px}.rooms-section-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}.rooms-section-heading h2{font-size:13px;font-weight:950;letter-spacing:1px;margin:0}.rooms-section-heading button{padding:5px 8px;font-size:11px;min-height:29px}#rooms.rooms-carousel{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;overscroll-behavior-x:contain}.public-room-card{flex:0 0 min(80vw,300px);scroll-snap-align:start;border:1px solid #34789b;border-radius:24px;padding:22px;background:radial-gradient(ellipse at 100% 0%,#08698e77,transparent 75%),#102237;box-shadow:0 6px 20px #0004}.public-room-card .room-badge{font-size:9px;font-weight:900;letter-spacing:1.6px;color:#80eaff}.public-room-card h3{font-size:22px;line-height:1.1;min-height:48px;margin:16px 0;overflow-wrap:anywhere}.room-meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;line-height:18px;color:#bed0de;margin-bottom:14px}.room-meta strong{color:#e2ff33}.public-room-card button{font-size:12px;padding:13px}.empty-room-card{width:100%;border:1px dashed #3d6b88;border-radius:23px;padding:25px;background:#0d2034}.empty-room-card h3{font-size:19px;margin:10px 0}.empty-room-card p{font-size:12px;margin:0}.room-orbit{font-size:32px;color:#54d6ff}
/* A real touch target with a metallic finish, positioned on the board. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.in-match .boardwrap{position:relative;grid-template-rows:25px minmax(0,1fr) 0px 31px}body.in-match #launch-ball.metal-ball{position:absolute;left:50%;bottom:45px;transform:translateX(-50%);width:64px;height:64px;min-height:64px;max-height:64px;aspect-ratio:1;border-radius:50%;margin:0;padding:0;z-index:8;touch-action:none;user-select:none;border:1px solid #def7ff;background:radial-gradient(ellipse at 28% 22%,#fff 0 3%,#d9f1ff 4%,#9ab3c6 13%,transparent 28%),radial-gradient(ellipse at 55% 70%,#0b1727 0%,#46647e 23%,#bdd1df 44%,#405469 60%,#0b1424 82%,#a4cfe7 100%);box-shadow:inset -8px -10px 15px #000b,inset 4px 4px 8px #fff7,0 12px 10px #0009,0 0 0 7px #1dbee31c,0 0 22px #21c7ff77;transition:opacity .15s,box-shadow .2s}body.in-match #launch-ball.metal-ball:after{content:'';position:absolute;inset:8px 5px 16px;border-top:2px solid #f0fbff90;border-radius:50%;transform:rotate(-25deg);pointer-events:none}body.in-match #launch-ball.metal-ball:disabled{opacity:.55;cursor:default;box-shadow:inset -8px -10px 15px #000b,inset 4px 4px 8px #fff7,0 9px 12px #0008}body.in-match #launch-ball.metal-ball.held{opacity:.08}body.in-match #launch-ball.metal-ball:focus-visible{outline:3px solid #eaff00;outline-offset:6px}#grip{width:56px;height:56px;background:radial-gradient(circle at 30% 23%,white 0 5%,#bacedd 20%,#263f56 65%,#080e19 90%);box-shadow:inset -5px -7px 10px #0008,inset 2px 2px 5px #fff8,0 8px 14px #0009}
.card-ball.missed{background:radial-gradient(circle at 30% 24%,#fff4eb 0 6%,#ff5d59 15%,#d0082d 50%,#59031a 90%);box-shadow:0 0 9px #ff294ac0,inset -2px -2px 3px #6a0011}.card-ball.used{box-shadow:0 0 7px #19e75b99,inset -2px -2px 3px #005c1e}.card-ball.in-flight{animation:flightBall .65s ease-in-out infinite alternate}@keyframes flightBall{to{box-shadow:0 0 14px #3bff7d;filter:brightness(1.3)}}
/* Broadcast turn ribbon, layered independently of the ball renderer. */
#turn-announcement{position:fixed;inset:0;z-index:110;display:grid;place-items:center;pointer-events:none;background:linear-gradient(transparent,#010918aa,transparent)}.turn-ribbon{display:flex;align-items:center;gap:14px;padding:17px max(18px,env(safe-area-inset-left));width:100%;min-height:156px;border-top:2px solid #6de7ff;border-bottom:2px solid #6de7ff;background:linear-gradient(105deg,#06213bf5,#124768f5 55%,#071525f5);box-shadow:0 0 35px #00b9ff50;animation:ribbonIn .35s cubic-bezier(.18,.8,.25,1)}.turn-portrait{width:91px;height:112px;border:2px solid #7deaff;border-radius:19px;overflow:hidden;background:#081725;display:grid;place-items:center;font-size:35px;font-weight:950;flex-shrink:0}.turn-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.turn-portrait img.is-photo{object-fit:cover}.turn-ribbon-text{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}.turn-ribbon-text small{font-size:10px;font-weight:900;letter-spacing:2px;color:#85edff}.turn-ribbon-text strong{font-size:clamp(21px,6vw,35px);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.turn-ribbon-text>span{font-size:9px;font-weight:850;letter-spacing:.8px;color:#e3ff64}.ribbon-chevrons{font-size:24px;font-weight:900;color:#65e8ff;letter-spacing:-7px;flex-shrink:0;padding-right:4px}@keyframes ribbonIn{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
/* Premium roulette with a fixed metal hub and illuminated outer ring. */
#roulette-wheel{width:min(75vw,285px);height:auto;aspect-ratio:1;margin-bottom:10px;isolation:isolate}.wheel-disc{border:11px solid #c28d22;box-shadow:inset 0 0 0 2px #fff1a2,inset 0 0 20px #0009,0 0 0 3px #fff0a6,0 0 0 10px #5c340e,0 0 36px #ffd63188}.discount-wheel .wheel-disc{border-color:#bf5662;box-shadow:inset 0 0 0 2px #ffb7bd,inset 0 0 20px #0009,0 0 0 3px #ffd1db,0 0 0 10px #4e1226,0 0 35px #ff3b6877}.wheel-disc span{font-size:17px;line-height:22px;top:calc(50% - 11px);text-shadow:0 2px 3px #000e;letter-spacing:-.5px}.wheel-pointer{top:-22px;font-size:31px;color:#fff9ca;filter:drop-shadow(0 3px 2px #3b1c00);z-index:5}.wheel-hub{position:absolute;left:50%;top:50%;width:91px;height:91px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#35586c,#071323 72%);border:5px solid #e5b64e;box-shadow:0 3px 12px #000e,inset 0 0 0 2px #fff3a060;z-index:3}.wheel-hub img{width:90%;height:auto}.wheel-lights{position:absolute;inset:-11px;border-radius:50%;border:5px dotted #fff1ab;box-shadow:0 0 20px #ffd63588;z-index:4;pointer-events:none;animation:wheelLights .6s ease-in-out infinite alternate}.discount-wheel .wheel-lights{border-color:#ffbdcc;box-shadow:0 0 25px #ff3b6855}@keyframes wheelLights{to{filter:brightness(1.6);opacity:.65}}
/* End-of-match positions are accessible after the final replay. */
#results-dialog{width:min(94vw,540px);max-height:92dvh;overflow:auto;border:1px solid #ab8d40;border-radius:27px;background:radial-gradient(ellipse at 50% 0%,#77551088,transparent 60%),#081523;color:white;padding:26px 18px;text-align:center;box-shadow:0 20px 90px #000c}#results-dialog::backdrop{background:#01060de8}.results-eyebrow{font-size:9px;font-weight:900;letter-spacing:2.5px;color:#dfcc95}#results-title{font-size:24px;margin:12px 0 18px;letter-spacing:-.6px}.champion-portrait{width:120px;height:135px;margin:auto;border:3px solid #f8d46f;border-radius:25px;overflow:hidden;background:radial-gradient(ellipse,#c79528,#13283e);box-shadow:0 0 0 7px #e9ca5812,0 0 35px #e6bc3f33;display:grid;place-items:center;font-size:50px;font-weight:950}.champion-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.champion-portrait img.is-photo{object-fit:cover}#result-name{font-size:25px;color:#ffe89e;margin:15px 0 22px;overflow-wrap:anywhere}#result-positions{display:flex;flex-direction:column;gap:9px}.result-row{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid #294b65;background:#102238;border-radius:15px;padding:9px}.result-row.winner{border-color:#e4c65b;background:linear-gradient(110deg,#70581777,#102238)}.result-rank{font-size:21px;font-weight:950;color:#ffe394;min-width:25px}.result-portrait{width:43px;height:49px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#16374d;display:grid;place-items:center;font-size:17px;font-weight:900}.result-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.result-portrait img.is-photo{object-fit:cover}.result-player{min-width:0;flex:1}.result-player strong{display:block;font-size:12px;overflow-wrap:anywhere}.result-player small{display:block;color:#99b1c4;font-size:9px;margin-top:3px}.result-score{font-size:24px;letter-spacing:-.7px;color:#e8f4ff}#result-exit{display:block;width:100%;margin:22px 0 9px}#result-close{width:100%;font-size:12px;padding:10px;background:transparent;color:#a3bdd0;border:0}@media(max-height:520px){.turn-ribbon{min-height:120px;padding-top:8px;padding-bottom:8px}.turn-portrait{height:90px;width:75px}}@media(prefers-reduced-motion:reduce){.install-app,.card-ball.in-flight,.turn-ribbon,.wheel-lights{animation:none!important}}
body.in-match #turn{grid-row:1}body.in-match canvas{grid-row:2}body.in-match #hint{grid-row:4}
.profile-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}.profile-actions>button{flex:1;max-width:200px;min-height:43px;font-size:12px;padding:10px 12px;border-radius:13px}.practice-button{background:linear-gradient(120deg,#cfff1b,#9bea39);color:#112300;font-weight:950;border:1px solid #e7ff9d;box-shadow:0 4px 17px #bcff0022}.practice-button:hover{background:#dfff64}#practice-dialog{width:min(92vw,420px);max-height:90dvh;overflow:auto;padding:25px;border-radius:25px;background:linear-gradient(145deg,#18314a,#081322);border:1px solid #3e7c9e;color:white;box-shadow:0 20px 80px #000b}#practice-dialog::backdrop{background:#000b}#practice-dialog h2{font-size:24px;margin:13px 0}#practice-dialog p{font-size:12px}#practice-dialog>button{display:block;width:100%;margin-top:12px}#practice-close{border:0;background:transparent;color:#a9c3d5;font-size:12px}#practice-status{color:#ffbaba}.orbix-card.disqualified{border-style:dashed}.orbix-card.disqualified .card-turn{color:#ff9daa;background:#3f0c21}.orbix-card.disqualified .card-score{color:#a8b5c7}.result-dq{color:#ff8d9d!important}body.in-match #launch-ball.metal-ball.spent{opacity:0;pointer-events:none}

/* Same steel image used by the machine cellphone controller. The outer ring is the dock. */
body.in-match #launch-ball.metal-ball{border:0;background:transparent;box-shadow:none;isolation:isolate}
body.in-match #launch-ball.metal-ball:before{content:'';position:absolute;inset:6px;border-radius:50%;background:url('./art/acero.png?v=515') center/contain no-repeat;filter:drop-shadow(0 6px 5px #000c);pointer-events:none}
body.in-match #launch-ball.metal-ball:after{inset:-5px;border:2px solid #3ceaff;border-radius:50%;transform:none;background:radial-gradient(circle,transparent 57%,#10baff25 70%,transparent 74%);box-shadow:0 0 7px #25eaff,0 0 19px #008dffb0,inset 0 0 9px #20dcff70;z-index:-1}
body.in-match #launch-ball.metal-ball:disabled{box-shadow:none;opacity:.55}
#grip{background:url('./art/acero.png?v=515') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 6px 5px #000a)}

/* Touch-friendly score editor: editable keyboard input and explicit 100-point controls. */
.room-meta-row{flex-wrap:wrap}.room-meta-row>label{flex:1 1 120px}.room-meta-row>.goal-label{flex:1 1 190px}
.goal-control{display:flex;align-items:center;gap:6px;margin-top:7px;min-width:0}
.goal-control input{flex:1;min-width:0;width:0;margin:0;text-align:center;font-size:18px;line-height:24px;padding:10px 4px;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.goal-control button{flex:0 0 44px;width:44px;height:46px;padding:0;font-size:25px;line-height:1;border:1px solid #3c7599;background:#123856;color:#b9f6ff;touch-action:manipulation}
.goal-control button:active{background:#1667a3}.goal-control button:disabled{cursor:default}

/* A dedicated waiting room keeps readiness controls outside the clipped match cards. */
body.in-match #match.lobby .playgrid{display:none}
#room-lobby{min-height:0;height:100%;overflow:hidden;display:flex;flex-direction:column;gap:10px;margin:0 8px 8px;padding:18px;border:1px solid #2e7693;border-radius:23px;background:linear-gradient(155deg,#132c43,#0a1425)}
.lobby-status{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#aeeaff}.lobby-status span{color:#dfff35;font-weight:850;text-align:right}
#room-lobby h2{margin:2px 0;font-size:23px}#lobby-instructions{margin:0;font-size:13px;line-height:1.4;flex:none}
#lobby-players{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;touch-action:pan-y}
.lobby-player{display:flex;align-items:center;gap:10px;min-height:67px;flex:none;padding:8px;border:1px solid #31506c;border-radius:15px;background:#102035}.lobby-player.is-ready{border-color:#2fc4a5;background:#123d3a}
.lobby-player-image{width:44px;height:49px;flex:none;overflow:hidden;border-radius:10px;background:#203448}.lobby-player-image img{width:100%;height:100%;object-fit:contain}.lobby-player-image img.is-photo{object-fit:cover}
.lobby-player strong{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}.lobby-player>span{font-size:10px;font-weight:850;color:#b6c7da;white-space:nowrap}.lobby-player.is-ready>span{color:#59f7c6}
#lobby-engine{margin:0;font-size:11px;line-height:1.3;flex:none}#lobby-actions{display:flex;gap:8px;flex-wrap:wrap;flex:none}#lobby-actions button{flex:1 1 140px;min-height:48px;padding:10px;font-size:13px;touch-action:manipulation}
@media(orientation:landscape) and (max-height:550px){#room-lobby{padding:10px;gap:6px}#room-lobby h2{font-size:17px}#lobby-instructions{font-size:11px}.lobby-player{min-height:54px}.lobby-player-image{height:38px;width:35px}#lobby-actions button{min-height:42px}}

/* Match information stays at the top; cards use native touch scrolling. */
body.in-match #match{grid-template-rows:38px 49px minmax(0,1fr)}
#match-rules{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 8px;background:#020b16;min-width:0}
.match-rule{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:5px 12px;border:1px solid #285273;border-radius:12px;background:linear-gradient(120deg,#123951,#0a192a);overflow:hidden}
.match-rule:before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;background:#46e9ff;border-radius:3px;box-shadow:0 0 8px #2dcfff}
.match-rule small{font-size:8px;font-weight:850;letter-spacing:.8px;color:#a8cddd}.match-rule strong{font-size:15px;font-weight:950;line-height:17px;color:#dfff35;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.rule-discount{border-color:#53395e;background:linear-gradient(120deg,#301d3f,#13172b)}.rule-discount:before{background:#ee6dff;box-shadow:0 0 8px #eb4fff}.rule-discount strong{color:#f4bcff}
body.in-match #players{overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#players .card-avatar{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
@media(max-height:520px) and (orientation:landscape){body.in-match #players{overflow-x:hidden;overflow-y:auto;touch-action:pan-y;scroll-snap-type:y proximity;overscroll-behavior-y:contain}}

/* Strong turn emphasis with opacity animation instead of animated shadow repainting. */
.orbix-card.active{animation:none;border-color:#faff00;box-shadow:0 0 12px #faff0090,inset 0 0 13px #faff0040;background:#102719}
.orbix-card.active:before{background:radial-gradient(ellipse at 50% 5%,#faff00ff,#d5ec0066 48%,transparent 92%);animation:turnLight .65s ease-in-out infinite alternate;will-change:opacity}
.orbix-card.active .card-portrait{background:radial-gradient(ellipse at 50% 10%,#faff00f0,#91aa0066 75%),linear-gradient(135deg,#112c3b,var(--player-color))}
.orbix-card.active .card-turn{background:#061b12;color:#65ffd2;font-weight:950}
@keyframes turnLight{from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.orbix-card.active:before{animation:none;opacity:1}}

/* Salas públicas: navegación táctil y avatar de sala. */
.rooms-section-heading #refresh{min-height:44px;padding:11px 17px;border:1px solid #62bbff;border-radius:14px;background:linear-gradient(135deg,#258eff,#0750d4);color:#fff;font-size:13px;font-weight:850;box-shadow:0 5px 18px #0878ff44;white-space:nowrap}
.rooms-section-heading #refresh:active{transform:scale(.97)}
.rooms-swipe-hint{font-size:12px;color:#a7c4dc;margin:0 0 9px}
#rooms.rooms-carousel{touch-action:pan-x pan-y;scroll-padding-inline:2px;-webkit-overflow-scrolling:touch}
.room-emoji{width:84px;height:84px;display:grid;place-items:center;margin-bottom:18px;border-radius:24px;border:1px solid #55aeeb88;background:radial-gradient(circle at 30% 20%,#2878b8,#0b1932);font-size:48px;line-height:1;box-shadow:inset 0 1px 0 #ffffff22,0 7px 18px #0004}
#room-emoji{font-size:28px;min-height:58px}

/* Tarjetas compactas de sala. */
.public-room-card{padding:16px;display:flex;flex-direction:column;gap:14px}
.public-room-header{display:flex;align-items:center;gap:12px;min-width:0}
.public-room-header .room-emoji{width:64px;height:64px;flex:0 0 64px;margin:0;border-radius:19px;font-size:38px}
.public-room-heading{min-width:0;flex:1}
.public-room-card .public-room-heading h3{font-size:20px;line-height:1.15;min-height:0;margin:7px 0 0;overflow-wrap:anywhere}
.public-room-card .room-badge{font-size:9px;letter-spacing:1px}
.public-room-card .room-meta{align-items:center;margin:0;gap:10px}
.room-players{display:flex;flex-direction:column;gap:4px;flex:1}
.public-room-card .room-players strong{font-size:25px;line-height:1;color:#f3f8ff;font-weight:900}
.room-players span{font-size:10px;letter-spacing:1px;font-weight:800;color:#b7d4e9}
.room-goal{padding:10px 12px;border:1px solid #62b7ff77;border-radius:13px;background:linear-gradient(130deg,#174b7f,#102b49);text-align:center}
.room-goal small{display:block;font-size:8px;line-height:1.3;font-weight:850;letter-spacing:.5px;color:#b9e4ff}
.public-room-card .room-goal strong{display:block;font-size:23px;line-height:1.2;margin-top:3px;color:#e2ff33}
.public-room-card>button{width:100%;margin-top:auto}

.rooms-section-heading>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rooms-section-heading #create-room-open{min-height:44px;padding:11px 13px;border-radius:14px;border:1px solid #59dcbd;background:linear-gradient(135deg,#123e46,#102d3b);color:#a5ffe5;font-size:13px;font-weight:850}
#create-room-dialog{width:min(94vw,480px);max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;padding:22px;border:1px solid #4d91bd;border-radius:25px;background:linear-gradient(145deg,#17334d,#081322);color:#f5f9ff;box-shadow:0 24px 80px #000b}
#create-room-dialog::backdrop{background:#020916d9;backdrop-filter:blur(5px)}
.create-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.create-dialog-heading h2{font-size:24px;margin:0}.create-dialog-heading button{min-width:44px;min-height:44px;padding:8px;border-radius:13px}
#create-room-status{font-size:13px;color:#ffbec7;margin-bottom:0}#create-room-status:empty{display:none}
.panels.invitation-panel{grid-template-columns:minmax(0,1fr)}
@media(max-width:420px){.rooms-section-heading{flex-wrap:wrap;gap:12px}.rooms-section-heading>div{margin-left:auto}#create-room-dialog{padding:18px}}

/* Perfil y tienda de monedas. */
#lobby-profile{position:relative;width:130px;margin:auto}.coin-badge{position:absolute;right:-22px;bottom:-9px;display:flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid #ffdf79;border-radius:18px;background:linear-gradient(130deg,#715014,#2a210c);box-shadow:0 4px 16px #0008;color:#ffe59b;font-size:16px}.coin-icon{font-size:23px;line-height:1}.coin-badge strong{font-variant-numeric:tabular-nums}
.shop-banner{display:flex;align-items:center;gap:14px;width:100%;padding:18px;margin:0 0 24px;border-radius:22px;border:1px solid #e6c460;background:radial-gradient(ellipse at 10% 10%,#a36f2366,transparent 65%),linear-gradient(110deg,#18314d,#1f2338);box-shadow:0 8px 22px #0003;text-align:left;color:#ffe4a1}.shop-banner-icon{font-size:34px}.shop-banner>span:nth-child(2){flex:1}.shop-banner strong,.shop-banner small{display:block}.shop-banner strong{font-size:21px;letter-spacing:1px}.shop-banner small{font-size:12px;color:#e3cfac;margin-top:5px}
#shop-dialog{width:min(94vw,740px);max-height:91dvh;overflow:auto;padding:22px;border-radius:25px;border:1px solid #ba9650;background:linear-gradient(145deg,#17314a,#081322);color:#f5f9ff;box-shadow:0 24px 80px #000b}#shop-dialog::backdrop{background:#020916df;backdrop-filter:blur(5px)}.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.shop-heading h2{font-size:22px}.shop-heading button{min-width:44px;min-height:44px}.shop-balance{display:flex;align-items:center;gap:7px;color:#ffe295}.shop-balance strong{font-size:25px}.shop-balance button{margin-left:auto;font-size:12px}.shop-heading button,.shop-balance button{padding:10px}#shop-status{font-size:13px}#shop-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.shop-product{min-width:0;padding:14px;border:1px solid #3a6585;border-radius:19px;background:#10263b;display:flex;flex-direction:column;gap:8px}.shop-product-photo{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:13px;background:#1b3851;font-size:48px}.shop-product-photo img{width:100%;height:100%;object-fit:contain}.shop-product h3{margin:4px 0 0;font-size:17px;overflow-wrap:anywhere}.shop-product p{font-size:12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.shop-price{color:#ffe28e;font-size:15px}.shop-product small{color:#a5c3da;font-size:11px}.shop-product button{margin-top:auto;padding:12px 8px;font-size:12px;min-height:44px}.shop-empty{grid-column:1/-1}.shop-order{padding:13px;margin-bottom:10px;border:1px solid #3b6584;border-radius:14px;background:#10253b}.shop-order strong,.shop-order span,.shop-order code{display:block}.shop-order span{font-size:12px;color:#adc8dc;margin:6px 0}.shop-order code{font-size:16px;color:#ffe39a;overflow-wrap:anywhere}@media(max-width:360px){#shop-products{grid-template-columns:1fr}#shop-dialog{padding:17px}.shop-banner strong{font-size:18px}}

.shop-upgrade-note{font-size:12px}.shop-owned{display:flex;align-items:center;gap:12px;padding:12px;margin:10px 0;border:1px solid #497699;border-radius:16px;background:#112b43}.shop-owned img{width:54px;height:68px;object-fit:contain;border-radius:10px;background:#183f5b}.shop-owned>div{flex:1;min-width:0}.shop-owned strong,.shop-owned small{display:block;overflow-wrap:anywhere}.shop-owned small{color:#b1cee2;font-size:11px;margin-top:5px}.shop-owned button{padding:10px;font-size:11px;min-height:44px}.upgrade-orb{font-size:42px;color:#8adeff;text-shadow:0 0 14px #2388ff}#shop-inventory>button{margin:6px 8px 6px 0;font-size:12px}

#launch-ball[data-effect="aura_blue"]{filter:drop-shadow(0 0 10px #19adff)}#launch-ball[data-effect="aura_gold"]{filter:drop-shadow(0 0 10px #ffc314)}#launch-ball[data-effect="aura_violet"]{filter:drop-shadow(0 0 10px #bc4dff)}

/* Tienda a pantalla completa con tarjetas adaptables. */
body.shop-open{overflow:hidden}
#shop-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:0 max(18px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(ellipse at 20% 0,#163a56,transparent 55%),#071321;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
#shop-dialog::backdrop{background:#071321;backdrop-filter:none}
#shop-dialog>.shop-heading{position:sticky;top:0;z-index:2;margin:0 -18px 16px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;background:#0b1d30f5;border-bottom:1px solid #35516a;backdrop-filter:blur(12px)}
#shop-dialog .shop-heading h2{font-size:clamp(18px,4.7vw,26px);margin:0;letter-spacing:.3px}
#shop-dialog #shop-close{min-width:95px;min-height:44px;font-size:14px;white-space:nowrap;padding:10px 14px;border:1px solid #5798c5;border-radius:13px;color:#d2eeff;background:#15334d}
#shop-dialog .shop-balance{padding:12px 14px;border:1px solid #816a35;border-radius:17px;background:linear-gradient(115deg,#57431a55,#10273d);font-size:14px}
#shop-dialog .shop-balance strong{font-size:27px}#shop-dialog #shop-status{font-size:12px;line-height:1.5;margin:14px 0 18px}
#shop-dialog #shop-products{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;align-items:stretch}
#shop-dialog .shop-product{padding:12px;gap:9px;border:1px solid #355b7c;border-radius:22px;background:linear-gradient(145deg,#18324c,#0b1c2e);box-shadow:0 8px 22px #0003}
#shop-dialog .shop-product-photo{aspect-ratio:4/3;border-radius:14px;background:radial-gradient(ellipse,#234767,#0a1829);overflow:hidden}
#shop-dialog .shop-product-photo img{object-fit:contain;width:100%;height:100%}
.shop-product-kind{font-size:9px;font-weight:850;letter-spacing:1.3px;color:#79d4ff;margin-top:3px}
#shop-dialog .shop-product h3{font-size:19px;line-height:1.2;margin:0}
#shop-dialog .shop-product p{font-size:12px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#shop-dialog .shop-price{padding:9px 10px;background:#5b461e55;border:1px solid #9c7e3b66;border-radius:12px;font-size:17px;line-height:1.3}
#shop-dialog .shop-product small{font-size:10px;line-height:1.4}
#shop-dialog .shop-product button{min-height:44px;font-size:12px;border-radius:12px}
#shop-dialog>h3{font-size:21px;margin:28px 0 10px}
@media(min-width:540px){#shop-dialog #shop-products{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}#shop-dialog> :not(.shop-heading){max-width:1180px;margin-left:auto;margin-right:auto}#shop-dialog>.shop-heading{padding-left:max(22px,calc((100vw - 1180px)/2));padding-right:max(22px,calc((100vw - 1180px)/2))}}
@media(min-width:370px) and (max-width:539px){#shop-dialog #shop-products:has(>.shop-product:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}#shop-dialog #shop-products:has(>.shop-product:nth-child(2)) .shop-product h3{font-size:16px}#shop-dialog #shop-products:has(>.shop-product:nth-child(2)) .shop-price{font-size:15px}}

/* Portadas de productos ajustadas al marco completo. */
#shop-dialog .shop-product-photo{position:relative;isolation:isolate}
#shop-dialog .shop-product-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}

.result-coins{display:inline-block;margin-top:7px;padding:5px 9px;border-radius:10px;border:1px solid #c7a65188;background:linear-gradient(110deg,#72541d99,#302b1855);color:#ffe491;font-size:13px;font-weight:900;line-height:1.25}.result-row.winner .result-coins{border-color:#ffe28e;box-shadow:0 0 14px #e9c15b22}

/* Interpolación suave para avatares y portadas HD. */
.card-avatar,.welcome-portrait img,.turn-portrait img,.result-portrait img,.champion-portrait img,.shop-owned img,.shop-product-photo img,.avatar-choice img{image-rendering:auto}

/* Avatares exclusivos completos, con su recurso HD actualizado. */
#shop-dialog .shop-product-photo[data-kind="avatar"]{background:radial-gradient(ellipse at 50% 30%,#28577b,#0b1b2d);aspect-ratio:1}
#shop-dialog .shop-product-photo[data-kind="avatar"] img{object-fit:contain;object-position:center center;padding:6px;image-rendering:auto}
#lobby-profile .welcome-portrait img{object-fit:contain;object-position:center bottom;image-rendering:auto;filter:none;max-width:100%;max-height:100%}

/* Caja definida: evita que la imagen en la cuadrícula exceda la altura del perfil. */
#lobby-profile .welcome-portrait{position:relative;display:block}
#lobby-profile .welcome-portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center bottom}
#lobby-profile .welcome-portrait img.is-photo{object-fit:cover}

/* Account access uses the same mobile layout as onboarding. */
.legacy-link{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:#afc9dc}.legacy-link input{width:22px;height:22px;flex-shrink:0}.account-help{font-size:.82rem;color:#afc9dc}.account-progress{color:#9fe9ff;font-size:.9rem}.lobby-hero #account-logout{margin-top:12px}
#access-code{font-size:1rem;letter-spacing:normal;text-align:left;min-height:52px}
.marquee-editor{border:1px solid #2f657c;border-radius:18px;padding:18px;grid-column:1/-1;background:#11283a}.marquee-editor label,.marquee-editor small{display:block}.marquee-editor input{width:100%;margin:9px 0;padding:12px;border:1px solid #438aa8;border-radius:10px;background:#071725;color:white;font:inherit}.marquee-actions{display:flex;gap:10px;margin-top:12px}.marquee-actions button{flex:1}@keyframes marqueeEnter{from{opacity:0;transform:translate(-50%,-15px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes marqueeSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media(prefers-reduced-motion:reduce){.marquee-in,.marquee-in:before{animation:none}}

.shop-product-photo[data-kind=launch_banner]{background:linear-gradient(120deg,#083f66,#291448);border:1px solid #47d8ed;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#9ef5ff}.shop-product-photo[data-kind=launch_banner] strong{font-size:22px;color:white;letter-spacing:2px}.shop-product-photo[data-kind=launch_banner] small{font-size:12px}

/* Metallic launch marquee lives below the canvas, over the cards, never over the track. */
body.in-match .playgrid>aside{position:relative;overflow:visible}
.launch-marquee{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:min(96%,760px);height:clamp(110px,25vw,154px);z-index:16;pointer-events:none;text-align:center;background:url('./brand/marquee-frame.svg?v=569') center/100% 100% no-repeat;filter:drop-shadow(0 3px 3px #000c) drop-shadow(0 0 6px #12b9ff65);isolation:isolate;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible}
.marquee-copy{position:absolute;left:23%;right:9%;top:20%;height:63%;display:grid;grid-template-rows:60% 40%;gap:2px;min-width:0}
.launch-marquee strong{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;min-width:0;overflow:hidden;margin:0;padding:0 4px;font:italic 950 clamp(24px,5.3vw,40px)/1.02 system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.7px;color:#effaff;text-shadow:0 1px #fff,0 2px #a8c4e0,0 4px #075bad,1px 6px 3px #000;overflow-wrap:anywhere}
.marquee-gold{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;transform:skewX(-8deg);padding:0 5px}
.launch-marquee p{height:100%;width:100%;display:flex;align-items:center;justify-content:center;margin:0;font:italic 950 clamp(19px,4vw,29px)/1.05 system-ui,sans-serif;color:#05101e;text-transform:uppercase;text-shadow:0 1px #ffe99d;overflow:hidden;overflow-wrap:anywhere;letter-spacing:-.5px}
.marquee-orb{position:absolute;left:1%;top:12%;height:82%;aspect-ratio:1;border-radius:50%;background:url('./art/acero.png?v=515') center/contain no-repeat;filter:drop-shadow(0 0 4px #d3f9ff) drop-shadow(0 0 9px #00aaff);z-index:2}
.marquee-orb:before,.marquee-orb:after{content:'';position:absolute;inset:19% -10%;border:2px solid #37eaff;border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 6px #00c8ff,inset 0 0 4px #00d9ff}
.marquee-orb:after{inset:8% -2%;transform:rotate(35deg);border-width:1px;border-left-color:transparent;border-bottom-color:transparent}
.launch-marquee.marquee-preview{position:fixed;top:auto;bottom:max(18px,env(safe-area-inset-bottom));width:min(94vw,760px);z-index:20000}
.launch-marquee.marquee-in{animation:marqueeMetalEnter .25s ease-out}.launch-marquee:before{content:none}
@keyframes marqueeMetalEnter{from{opacity:0;transform:translate(-50%,12px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-height:520px) and (orientation:landscape){.launch-marquee:not(.marquee-preview){width:98%;height:106px;top:4px;left:50%;bottom:auto}.launch-marquee:not(.marquee-preview) strong{font-size:18px}.launch-marquee:not(.marquee-preview) p{font-size:13px}.launch-marquee:not(.marquee-preview) .marquee-orb{height:58%;top:24%}}

@media(prefers-reduced-motion:reduce){.launch-marquee.marquee-in{animation:none}}

#launch-ball[data-effect="aura_mint"]{filter:drop-shadow(0 0 11px #00ffc2)}#launch-ball[data-effect="aura_black"]{filter:drop-shadow(0 0 2px #ffffff80) drop-shadow(0 0 11px #000)}#launch-ball[data-effect="aura_white"]{filter:drop-shadow(0 0 11px #fff)}

/* Separate store catalog, owned upgrades and redemption history. */
.shop-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 18px;padding:5px;background:#061321;border:1px solid #254963;border-radius:17px}.shop-tabs button{min-width:0;min-height:46px;padding:10px 5px;border:1px solid transparent;border-radius:12px;background:transparent;color:#aac6d9;font-size:13px;font-weight:800;white-space:normal;line-height:1.2}.shop-tabs button[aria-selected=true]{color:#fff;background:linear-gradient(120deg,#087df4,#1854bd);border-color:#5bcfff;box-shadow:0 2px 12px #087df42b}.shop-tabs button:focus-visible{outline:2px solid #9cf9ff;outline-offset:2px}.shop-panel>h3{font-size:22px;margin:12px 0 16px}.shop-panel{min-width:0}#shop-dialog .shop-panel[hidden]{display:none!important}@media(min-width:540px){.shop-tabs button{font-size:15px}}

#room-tools{position:fixed;right:12px;top:calc(env(safe-area-inset-top,0px) + 65px);z-index:70;display:flex;gap:6px}#room-tools[hidden]{display:none}#room-tools button{padding:8px 10px;font-size:12px;background:#102638eb;border:1px solid #2484b0;border-radius:14px;color:white;min-height:36px}#chat-dialog{width:min(94vw,530px);max-height:calc(100dvh - 24px);box-sizing:border-box;padding:20px;background:linear-gradient(140deg,#142d47,#07121f);color:white;border:1px solid #3db9ee;border-radius:23px;overflow:auto}#chat-dialog::backdrop{background:#000b}.comms-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.comms-heading h2{font-size:20px}.comms-heading button{padding:10px}.voice-panel{background:#091c2e;padding:14px;border:1px solid #264d69;border-radius:16px}.voice-panel button{width:100%;min-height:44px;margin:4px 0;font-size:14px}#talk-button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border:1px solid #22c5e6;background:#123f60;color:white;border-radius:14px}#talk-button.talking{background:#ba1747;box-shadow:0 0 20px #ff326780}#voice-status{font-size:13px;color:#80edd5;min-height:32px}.voice-panel small{font-size:11px;color:#abc1d5}#chat-messages{list-style:none;padding:0;margin:12px 0;max-height:28dvh;min-height:100px;overflow:auto;overscroll-behavior:contain}#chat-messages li{padding:9px 12px;background:#142c47;margin:6px 0;border-radius:12px;overflow-wrap:anywhere}#chat-messages strong{display:block;color:#76dfff;font-size:12px;margin-bottom:4px}#chat-messages span{font-size:14px;white-space:pre-wrap}.chat-compose{display:flex;gap:8px}.chat-compose input{min-width:0;flex:1}.chat-compose button{background:#137ce7;color:white}#chat-status{font-size:13px;color:#ff9d9d}@media(max-width:600px){#room-tools{top:calc(env(safe-area-inset-top,0px) + 54px);right:6px}#room-tools button{font-size:11px;padding:6px 8px}}

#talk-quick{touch-action:none;user-select:none;-webkit-touch-callout:none}#talk-quick.talking{background:#b81746;box-shadow:0 0 15px #ff3276}#room-tools button:disabled{opacity:.45}

#room-tools{position:static;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:0 8px;min-width:0}#room-tools button{min-height:28px;padding:4px 10px;font-size:11px}body.in-match #match{grid-template-rows:38px 34px 49px minmax(0,1fr)}#room-tools[hidden]{display:none}

/* Room notifications stay anchored to the turn label without resizing the canvas. */
#message-banner{position:absolute;left:8px;right:76px;top:29px;z-index:22;min-height:76px;display:flex;align-items:center;gap:10px;padding:11px 13px;text-align:left;border:1px solid #298bd0;border-left:4px solid #40e2ff;border-radius:14px;background:linear-gradient(115deg,#103e66f5,#0a2038f5);box-shadow:0 7px 22px #0008;color:white;cursor:pointer;max-width:680px;animation:roomNotice .2s ease-out}#message-banner[hidden]{display:none}#message-banner>div:last-child{min-width:0;flex:1}#message-banner strong{display:block;font-size:13px;color:#7aeaff;margin-bottom:4px}#message-banner span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.notice-avatar{flex:0 0 43px;width:43px;height:43px;border-radius:12px;overflow:hidden;background:#193f5c;display:grid;place-items:center}.notice-avatar img{width:100%;height:100%;object-fit:contain}.notice-avatar img.is-photo{object-fit:cover}@keyframes roomNotice{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
body.in-match .boardwrap #talk-quick{position:absolute;right:12px;top:36px;z-index:24;width:54px;height:54px;min-height:54px;padding:0;border-radius:50%;display:grid;place-items:center;white-space:nowrap;font-size:12px;color:white;border:2px solid #74e9ff;background:linear-gradient(145deg,#137fc9,#084476);box-shadow:0 4px 15px #0008,0 0 15px #00b5ff50;touch-action:none}body.in-match .boardwrap #talk-quick.talking{background:#cf174e;border-color:#ffb4ca;box-shadow:0 0 22px #ff3276}body.in-match #match{grid-template-rows:38px 34px 49px minmax(0,1fr)}
/* Full-screen conversation, with the history taking the available height. */
#chat-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;box-sizing:border-box;padding:0;border:0;border-radius:0;background:#071622;overflow:hidden}#chat-dialog[open]{display:flex;flex-direction:column}#chat-dialog .comms-heading{flex:none;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(110deg,#123a55,#102c42);border-bottom:1px solid #28536b}#chat-title{margin:0;font-size:20px}#chat-room-name{margin:4px 0 0;font-size:12px;color:#9ddff4}#chat-close{border-radius:12px;background:#193f59;min-height:42px}#chat-dialog .voice-panel{flex:none;margin:0;border:0;border-radius:0;background:#0a2133;padding:0 18px;max-height:40dvh;overflow:auto}#chat-dialog .voice-panel summary{padding:12px 0;font-size:13px;color:#92d7ec;cursor:pointer}#chat-dialog .voice-panel[open]{padding-bottom:12px}#chat-dialog .chat-history-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#chat-messages{flex:1;min-height:0;max-height:none;margin:0;padding:18px 14px;overflow-y:auto;background:radial-gradient(ellipse at top right,#10475a35,transparent 65%),#071622;scrollbar-width:thin}#chat-messages:empty:before{content:'Aquí aparecerán los mensajes de tu sala.';display:block;text-align:center;color:#8caebf;font-size:14px;margin:25px 0}#chat-messages li.chat-row{display:flex;align-items:flex-end;gap:9px;background:none;padding:0;margin:0 0 14px;border-radius:0}#chat-messages li.mine{flex-direction:row-reverse}.chat-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:12px;overflow:hidden;background:#16394c;display:grid;place-items:center;color:#81deee;font-size:12px}.chat-avatar img{width:100%;height:100%;object-fit:contain}.chat-avatar img.is-photo{object-fit:cover}.chat-bubble{max-width:min(78%,600px);min-width:75px;padding:11px 14px;background:#163044;border:1px solid #28495e;border-radius:17px 17px 17px 3px;box-shadow:0 2px 5px #0003}.mine .chat-bubble{background:linear-gradient(120deg,#075265,#0b4259);border-color:#1a6d7b;border-radius:17px 17px 3px 17px}#chat-messages .chat-bubble strong{font-size:12px;color:#7fe7e8;margin-bottom:5px}#chat-messages .chat-bubble span{display:block;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.chat-bubble time{display:block;font-size:10px;text-align:right;color:#94bdca;margin-top:6px}#chat-form{flex:none;padding:12px max(14px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));border-top:1px solid #203e50;background:#0d2637}#chat-form>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#chat-form .chat-compose{margin:0;align-items:center;gap:10px}#chat-input{border-radius:24px;background:#17394d;border:1px solid #2d5c73;min-height:48px;font-size:16px;margin:0}#chat-send{min-height:48px;border-radius:24px;padding:10px 20px;font-size:14px;background:#008cad}#chat-status:empty{display:none}#chat-status{margin:5px 0 0}@media(prefers-reduced-motion:reduce){#message-banner{animation:none}}
#chat-older{flex:none;align-self:center;border:1px solid #28536b;background:#123247;color:#a6e8f5;border-radius:18px;padding:7px 18px;margin:8px;font-size:12px}#chat-older[hidden]{display:none}

/* Vector icon: no selectable emoji or native long-press menu. */
#talk-quick,#talk-quick *,#talk-button,#talk-button *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none!important;touch-action:none!important}body.in-match .boardwrap #talk-quick{top:44%;right:36px;width:60px;height:60px;min-height:60px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:4px;background:radial-gradient(circle at 30% 20%,#40bcf0,#0878b3 50%,#063958);border:2px solid #91ecff;box-shadow:inset 0 2px 5px #ffffff50,0 6px 18px #0009,0 0 20px #00b5ff50}#talk-quick svg{width:28px;height:28px;display:block;pointer-events:none}#talk-quick::after{content:attr(data-hint);position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);width:116px;padding:5px 0;border-radius:8px;background:#061a2eea;color:#c5f5ff;font-size:8px;line-height:1.2;font-weight:800;letter-spacing:.3px;pointer-events:none}body.in-match .boardwrap #talk-quick.talking{background:radial-gradient(circle at 30% 20%,#ff749d,#d21654 65%,#7e0e36);border-color:#ffd6e3;box-shadow:inset 0 2px 5px #fff4,0 0 24px #ff3276}#talk-quick.talking::after{color:white;background:#981441}

.emerald-icon{display:inline-block;width:24px;height:27px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 0 5px #19efa555)}.wallet-pill{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;background:#102a41;border:1px solid #2a536d;border-radius:16px;font-size:14px;white-space:nowrap}.wallet-pill.gem-pill{background:#063f32;border-color:#168a62;color:#a9ffdb}.gem-pill img{width:24px;height:27px}.shop-balance{flex-wrap:wrap!important;gap:8px!important}.shop-balance #buy-gems{background:linear-gradient(120deg,#079968,#076747);color:white;border:1px solid #59dcaa;border-radius:14px;font-size:12px;padding:10px 13px}.shop-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}.shop-tabs button{font-size:12px}.gem-badge{position:absolute;bottom:-8px;left:-15px;z-index:3;display:flex;align-items:center;gap:5px;background:linear-gradient(130deg,#076947,#052a24);border:1px solid #73f3b8;box-shadow:0 4px 14px #0007;border-radius:24px;padding:7px 10px;color:#bcffdc;font-size:15px;min-width:60px;justify-content:center}.gem-badge .emerald-icon{width:24px;height:27px}#shop-panel-gems>p{font-size:14px;color:#b6cddc;line-height:1.5}#gem-packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.gem-package{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;border-radius:20px;border:1px solid #16845e;background:radial-gradient(ellipse at top,#105d42,#0b2030 80%);padding:20px 14px}.gem-pack-icon{width:65px;height:75px;filter:drop-shadow(0 0 15px #08ec8960)}.gem-package h4{margin:0;font-size:17px}.gem-package strong{font-size:18px;color:#b9ffda}.gem-package del{font-size:12px;color:#a4bab0}.gem-promo{background:#b1ff37;color:#174b22;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:800}.gem-package button{margin-top:auto;width:100%;font-size:12px;padding:12px 6px}.gem-instructions{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;padding:16px;background:#102c3f;border-radius:14px;line-height:1.5}.shop-price .emerald-icon{margin-right:3px}#gem-purchases .shop-order{margin-top:12px}@media(max-width:420px){.shop-tabs button{font-size:11px;padding:8px 3px}.shop-balance{font-size:13px!important}.wallet-pill{font-size:12px}.gem-badge{font-size:14px}}

#match-dialog{padding:clamp(14px,4vw,22px)}
#match-dialog h2{font-size:clamp(20px,5vw,26px);margin:0 0 14px}
#menu-invitation{margin-bottom:12px;padding:10px;border:1px solid #4384a0;border-radius:12px;background:#0b283b}
#menu-invitation>div{display:flex;align-items:center;gap:8px}
#menu-invitation input{min-width:0;flex:1;font-size:16px;letter-spacing:.12em}
#match-dialog #menu-copy-code{width:auto;margin:0}
#menu-status:empty{display:none}
#menu-status{margin:8px 0 0;color:#aeeaff}

#lobby-profile {
 display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;
 justify-items:center;width:max-content;max-width:100%;gap:9px 12px;
}
#lobby-profile .welcome-portrait {grid-column:1/-1;margin:0}
#lobby-profile :is(.coin-badge,.gem-badge) {
 position:static;display:inline-flex;align-items:center;gap:6px;
 padding:5px 10px;min-height:30px;font-size:14px;
}
#lobby-profile .gem-badge {grid-column:1;grid-row:2}
#lobby-profile .coin-badge {grid-column:2;grid-row:2}
#lobby-profile .emerald-icon {width:14px;height:16px}
#lobby-profile .coin-icon {font-size:17px}
#shop-panel-gems #buy-gems {
 display:inline-flex;margin:0 0 12px;padding:10px 14px;
 border:1px solid #59dcaa;border-radius:14px;background:#09634e;color:#fff;
}

#lobby-invitation{flex:none;padding:8px 12px;border:1px solid #4384a0;border-radius:12px;background:#0b283b}#lobby-invitation>div{display:flex;gap:8px;align-items:center}#lobby-invite-code{flex:1;min-width:0;font-size:clamp(20px,6vw,34px);font-weight:800;letter-spacing:.12em;color:#e9ff93}#lobby-copy-status:empty{display:none}

body.in-match #match.lobby {grid-template-rows:38px auto minmax(0,1fr)}
body.in-match #match.lobby #room-tools {display:none}
body.in-match #match.lobby #room-lobby {
 box-sizing:border-box;height:auto;min-height:0;overflow:auto;
 gap:12px;padding:clamp(12px,3vw,22px);border-radius:20px;
}
.room-wait-head,.room-lobby-heading {
 display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;
}
.room-wait-head .eyebrow {margin:0 0 4px;color:#9cecff;font-size:11px}
.room-lobby-heading h3 {margin:0;font-size:16px}
#lobby-exit,#lobby-config {min-height:40px;padding:8px 12px;font-size:13px}
#lobby-exit {color:#ffc2cd;border-color:#a64e64}
#lobby-settings:not([hidden]) {
 flex:none;padding:12px;border:1px solid #315b75;border-radius:12px;background:#091a2a;
}
#lobby-settings input,#lobby-settings select {font-size:16px}
#room-lobby #lobby-players {min-height:62px;flex:1 0 auto}
#room-lobby #lobby-actions {flex:none}

#account-action-dialog {
 width:min(92vw,460px);max-height:85dvh;overflow:auto;
 padding:22px;border:1px solid #46607e;border-radius:22px;
 background:#0a1727;color:#f0f6ff;
}
#account-action-dialog::backdrop {background:#020916c9}
#account-action-dialog h2 {margin:0 0 16px}
#account-action-dialog label {display:block;margin-bottom:12px}
#account-action-dialog :is(input,textarea) {
 display:block;width:100%;margin-top:6px;padding:11px;
 font:inherit;color:inherit;background:#071120;border:1px solid #46607e;border-radius:10px;
}
#account-action-dialog textarea {resize:vertical}
#account-action-status:empty {display:none}

#lobby-profile {
 display:grid;grid-template-columns:auto auto;justify-content:center;
 justify-items:center;align-items:center;width:max-content;max-width:100%;gap:10px 14px;
}
#lobby-profile .welcome-portrait {grid-column:1/-1;margin:0}
#lobby-profile :is(.coin-badge,.gem-badge) {
 position:static;display:inline-flex;align-items:center;gap:7px;
 padding:5px 10px;font-size:14px;min-height:30px;
}
#lobby-profile .coin-icon {font-size:16px}
#lobby-profile .emerald-icon {width:15px;height:16px}
.account-progress {
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:7px;margin:15px 0 12px;
}
.account-progress:empty {display:none}
.account-progress div {
 display:flex;flex-direction:column;justify-content:center;gap:4px;
 padding:10px 4px;border:1px solid #31536c;border-radius:12px;background:#0b1a2c;
}
.account-progress strong {font-size:clamp(16px,5vw,26px);color:#fff;overflow-wrap:anywhere}
.account-progress span {font-size:clamp(11px,3vw,14px)}
.account-menu {display:grid;gap:9px;margin-bottom:14px}
.account-menu button {min-height:44px;text-align:left}

/* iOS zooms when a text field is focused below 16 CSS pixels. */
@media (pointer:coarse), (max-width:768px) {
 body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  font-size:16px !important;
 }
}
#shop-panel-gems #buy-gems {
 display:inline-flex;margin:0 0 12px;padding:10px 14px;
 border:1px solid #59dcaa;border-radius:14px;background:#09634e;color:#fff;
}

#support-dialog[open] {
 position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;
 box-sizing:border-box;border:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
 display:flex;flex-direction:column;background:#0b1821;color:#edf8f5;overflow:hidden;
}
#support-dialog::backdrop {background:#0b1821}
#support-dialog [hidden] {display:none!important}
#support-dialog .support-header {
 position:static;display:flex;align-items:center;gap:10px;padding:12px 14px;
 background:#10382f;border:0;
}
.support-header h2 {flex:1;min-width:0;margin:0;font-size:clamp(16px,4vw,22px);overflow-wrap:anywhere}
.support-actions {padding:8px 14px}
#support-threads,#support-messages,#support-create {min-height:0;overflow:auto;padding:12px 14px}
#support-messages {flex:1;background:radial-gradient(ellipse at top,#12352f,#0b1821 72%)}
#support-threads button {
 display:flex;justify-content:space-between;gap:10px;width:100%;margin-bottom:8px;text-align:left;overflow-wrap:anywhere;
}
.support-bubble {
 width:fit-content;max-width:84%;margin:0 auto 10px 0;padding:9px 13px;
 background:#233642;border-radius:14px 14px 14px 4px;overflow-wrap:anywhere;
}
.support-bubble.mine {margin-left:auto;margin-right:0;background:#075341;border-radius:14px 14px 4px 14px}
.support-bubble p {margin:4px 0;white-space:pre-wrap}
.support-bubble small {color:#bddece}
#support-reply {display:flex;align-items:end;gap:8px;padding:10px 14px;background:#102b29}
#support-reply textarea {flex:1;min-width:0;max-height:100px}
#support-dialog textarea {
 display:block;width:100%;resize:vertical;padding:10px;color:inherit;
 background:#10232e;border:1px solid #41685f;border-radius:12px;font:inherit;
}
#support-create label {display:block;margin-bottom:12px}
#support-status {margin:0;padding:8px 14px}
#support-status:empty {display:none}

#support-dialog #support-reply {
 display:grid;grid-template-columns:minmax(0,1fr) auto;
 align-items:center;gap:8px;flex:none;box-sizing:border-box;
}
#support-dialog #support-reply textarea {
 grid-column:1/-1;grid-row:1;display:block;box-sizing:border-box;
 width:100%;min-width:0;min-height:58px;max-height:100px;
 margin:0;resize:none;font-size:16px;line-height:1.35;
 background:#0b1e29;color:#fff;border-color:#6c9f92;
}
#support-dialog #support-reply textarea::placeholder {color:#b6cec9}
#support-dialog #support-reply button[type="submit"] {
 grid-column:2;grid-row:2;width:auto;min-width:88px;padding:10px 14px;margin:0;
}
#support-dialog #support-reply .support-attach {
 grid-column:1;grid-row:2;justify-self:start;position:relative;overflow:hidden;
 display:grid;place-items:center;min-height:44px;padding:0 12px;
 border:1px solid #41685f;border-radius:10px;cursor:pointer;
}
#support-dialog #support-reply .support-attach input {
 position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
#support-file-name {grid-column:1/-1;overflow-wrap:anywhere;color:#bddece}
#support-file-name:empty {display:none}