.page-arcade{--arcade-cyan:#8bd7ee}.arcade-header{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:auto;padding:8px 36px;border-bottom:1px solid #ffffff16;min-height:84px}.arcade-header>a:first-child>img{width:110px;height:62px;object-fit:contain}.arcade-wordmark{font-size:.64rem;letter-spacing:.18em;color:#8ea9c4}.arcade-wordmark b{color:#efd49e}.arcade-account{display:flex;gap:10px;align-items:center}.arcade-account>span{font-size:.8rem;color:#e5cea4}.arcade-account button{font-size:.72rem}.arcade-shell{width:min(1240px,calc(100% - 64px));margin:auto}.online-status{font-size:.66rem;color:#829bb5;min-height:1.6em;margin:16px 0}.online-status.online:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#84c5aa;margin-right:7px}.online-status.offline{color:#e5be88}.arcade-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:27px 0 40px}.arcade-hero h1{font-size:clamp(3.2rem,5.2vw,5rem);line-height:.98}.arcade-hero h1 em{color:#f1d18e}.arcade-hero>div>p:not(.guess-kicker){margin:22px 0;font-size:.87rem;color:#a0b7d0;line-height:1.8}.arcade-facts{display:flex;gap:25px;flex-wrap:wrap}.arcade-facts span{font-size:.67rem;color:#95adc7}.arcade-facts b{font-size:1.15rem;color:#deebfa;margin-right:5px}.arcade-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:25px 10px;transform:rotate(3deg);position:relative}.arcade-art:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#2a5b7044,transparent 68%);z-index:-1}.arcade-art img{width:100%;height:250px;object-fit:cover;border-radius:12px;border:1px solid #ffffff26;filter:saturate(.65);box-shadow:0 12px 30px #0005}.arcade-art img:nth-child(2){transform:translateY(-20px)}.arcade-art span{grid-column:1/-1;font-size:.54rem;letter-spacing:.14em;color:#a0b7d0;text-align:center;margin-top:16px}.arcade-navigation{display:flex;gap:8px;border-bottom:1px solid #ffffff1c;padding:6px 0 14px;margin:10px 0 26px;overflow-x:auto}.arcade-navigation button{white-space:nowrap;background:none;color:#8ca4bf;border:1px solid transparent;border-radius:7px;padding:12px 18px;min-height:48px;font-size:.84rem}.arcade-navigation button[aria-selected=true]{background:#183045;color:#e4f5ff;border-color:#4b738c}.arcade-navigation small{font-size:.59rem;padding:3px 5px;margin-left:5px;background:#ffffff08;border-radius:3px}.arcade-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:30px 0 23px}.arcade-section-head h2{font-size:2.5rem}.arcade-section-head>p{font-size:.75rem;color:#8fa7c3}.arcade-game-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.arcade-card{min-width:0;position:relative;background:linear-gradient(145deg,#152637,#0e1928);border:1px solid #334b64;border-radius:11px;padding:22px;display:flex;flex-direction:column;gap:15px;color:#e9f3ff;text-align:left;transition:transform .2s,border-color .2s}.arcade-card:hover{transform:translateY(-4px);border-color:#91bdd3}.arcade-card>span:first-child{font-size:.51rem;letter-spacing:.1em;color:#91b0cc}.arcade-card .card-mark{font:700 3.1rem/1 var(--display);width:65px;height:67px;display:grid;place-items:center;border:1px solid #8cb2ca33;border-radius:11px;color:#9bd6ef;background:#07142166}.arcade-card[data-game=race] .card-mark{color:#d7baf4;border-color:#c49de133}.arcade-card[data-game=kmk] .card-mark{color:#edc98d;border-color:#edc98d44}.arcade-card strong{font:700 2.1rem/1 var(--display)}.arcade-card p{color:#9ab0c9;font-size:.75rem;line-height:1.75}.arcade-card small{font-size:.53rem;color:#88a7c5;margin-top:auto}.arcade-card b{display:flex;justify-content:space-between;gap:8px;padding-top:15px;border-top:1px solid #ffffff12;font-size:.76rem;color:#efd293}.arcade-casual{margin:22px 0;font-size:.74rem;color:#879fb9;line-height:1.8}.arcade-casual a{color:#c4ddef;text-decoration:underline;text-underline-offset:4px}#join-form label{display:block;font-size:.65rem;color:#a6bfd8;margin-bottom:7px}#join-form>div{display:flex;gap:8px}#join-code{width:115px;min-width:0;letter-spacing:.1em;text-transform:uppercase}.page-arcade input,.page-arcade select{color:#ecf4ff;background:#0b192a;border:1px solid #3c5571;border-radius:6px;padding:10px 12px;min-height:44px;font-size:16px;min-width:0}.page-arcade label{color:#a2b9d0;font-size:.75rem}.board-filters{display:flex;gap:10px;flex-wrap:wrap}.board-filters label{display:grid;gap:5px;font-size:.6rem}.board-filters select{font-size:.75rem}.board-filters>button{align-self:end}.arcade-table{display:grid;gap:8px}.board-row,.history-row{display:flex;align-items:center;gap:18px;background:#102033;border:1px solid #2c435a;border-radius:8px;padding:15px 20px;color:#dce9f8}.board-row>strong:first-child{font:700 1.4rem/1 var(--display);color:#d9ba7c;min-width:24px}.board-row .row-grow,.history-row .row-grow{flex:1;min-width:0}.board-row span,.history-row small{font-size:.68rem;color:#8da6c2}.board-row b{font:600 1.6rem/1 var(--display);color:#edd39d}.history-row{text-align:left;width:100%;font-size:.85rem}.history-row small{display:block;margin-top:4px}.history-row>b{color:#e8ca8c;font-size:.75rem}.arcade-subtitle{font-size:1.7rem;margin:30px 0 18px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.stats-grid>div{border:1px solid #36516b;background:#102034;padding:22px;border-radius:10px}.stats-grid small{display:block;color:#8fa8c3;font-size:.61rem}.stats-grid strong{font:700 2.5rem/1.4 var(--display);color:#f1d293}.coverage-note{font-size:.79rem;color:#b1c9e0;margin:20px 0}.hero-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:360px;overflow:auto}.hero-stat-grid>div{display:flex;gap:10px;align-items:center;padding:10px;background:#0f1f31;border:1px solid #263e56;border-radius:6px}.hero-stat-grid img{width:30px;height:36px;object-fit:cover;border-radius:4px}.hero-stat-grid span{font-size:.69rem}.hero-stat-grid small{display:block;color:#88a6c6;font-size:.6rem}.room-topbar{display:flex;align-items:center;gap:25px;border-bottom:1px solid #ffffff18;padding:10px 0 22px;margin-bottom:22px}.room-topbar h1{font-size:2.6rem;letter-spacing:.05em}.room-topbar .guess-kicker{margin-bottom:5px}.room-actions{display:flex;gap:9px;margin-left:auto}.room-topbar>p{font-size:.64rem;color:#88aecc;max-width:155px}.room-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:22px;align-items:start}.room-scoreboard{position:sticky;top:15px;background:#101e2e;border:1px solid #2c455e;border-radius:11px;padding:17px}.scoreboard-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.scoreboard-head h2{font-size:1.6rem}.scoreboard-head>span{font-size:.6rem;color:#89a7c4}.player-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;border-top:1px solid #ffffff0b;padding:14px 0}.player-row>span{font:700 1.1rem/1 var(--display);color:#8fa8c2}.player-row strong{font-size:.76rem;overflow-wrap:anywhere;display:block}.player-row small{font-size:.55rem;color:#7394b5;display:block;margin-top:3px}.player-row>b{font:600 1.2rem/1 var(--display);color:#dfc18a}.player-row.is-me strong{color:#9ee1f6}.player-row button{grid-column:2/4;justify-self:end;background:none;border:0;color:#aa8c90;font-size:.6rem;min-height:32px}.room-scoreboard>p{font-size:.66rem;color:#89a2bf;line-height:1.8;border-top:1px solid #ffffff14;padding-top:14px}.room-main{min-width:0}#room-lobby{border:1px solid #35506a;background:linear-gradient(140deg,#15283b,#0b1726);border-radius:12px;padding:30px}#room-lobby>h2{font-size:2.7rem}#host-label{font-size:.75rem;margin:14px 0 28px;color:#91adc9}.room-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px;align-items:end}.room-settings-grid label,.settings-save-cell{display:grid;grid-template-rows:22px 55px;gap:8px;min-width:0}.room-settings-grid label{font-size:.67rem}.setting-label{display:flex;align-items:flex-end;gap:5px;min-width:0;color:#a2b9d0;font-size:.67rem;line-height:1.1;white-space:nowrap}.setting-label small{font-size:.55rem;color:#8fa8c3;font-weight:400}.room-settings-grid select,.room-settings-grid input,.settings-save-cell>button{width:100%;height:55px;min-height:55px;font-size:.8rem}.settings-save-cell>button{align-self:end}.room-settings-grid :disabled{opacity:.58}.room-rule-note{font-size:.72rem;line-height:1.8;color:#8fa8c3;margin-top:23px}.ready-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.round-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border:1px solid #36526c;background:#122439;border-radius:10px 10px 0 0}.round-strip h2{font-size:1.8rem}.round-strip .guess-kicker{margin:0 0 6px}.round-strip>div:nth-child(2){font-size:.65rem;letter-spacing:.1em;color:#9bb8d3}.round-timer{display:flex;flex-direction:column;align-items:center;min-width:64px}.round-timer strong{font:700 2.7rem/1 var(--display);color:#f1d08f;font-variant-numeric:tabular-nums}.round-timer span{font-size:.45rem;letter-spacing:.12em;color:#95b1ce;margin-top:4px}.time-track{height:3px;background:#294159;margin-bottom:16px}.time-track>span{display:block;height:100%;background:#efd08f;width:100%;transition:width .1s linear}.time-track.is-reveal>span{background:#9ad4df}.live-question{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:20px;padding:22px;background:#0d1b2b;border:1px solid #2c455f;border-radius:10px;align-items:center}.live-image-wrap{position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:1;border:1px solid #ffffff16;border-radius:12px;padding:18px;background:radial-gradient(circle at 50% 22%,#8bd7ee14,transparent 36%),linear-gradient(180deg,#0b1828,#091423);box-shadow:inset 0 0 0 1px #ffffff05,inset 0 -60px 90px #02060d55}.live-image-wrap:before{content:"";position:absolute;inset:12px;border-radius:10px;border:1px solid #ffffff12;background:linear-gradient(180deg,#ffffff05,#ffffff02);pointer-events:none}.live-image-wrap img{position:relative;z-index:1;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 30px #0008)}.live-image-wrap.is-answer-reveal img{max-height:calc(100% - 12px)}.live-image-wrap>#live-mystery{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-shadow:0 4px 20px #000;z-index:2;pointer-events:none}.live-image-wrap>#live-mystery strong{font:700 5rem/1 var(--display)}.live-image-wrap>#live-mystery span{font-size:.51rem;letter-spacing:.13em}.live-prompt{min-width:0;align-self:center}.live-prompt h3{font-family:var(--body);font-size:1.05rem;font-weight:500;line-height:1.7;color:#dbe9f9;margin-bottom:24px}.live-prompt .guess-kicker{font-size:.49rem}.live-prompt form>label{display:block;font-size:.7rem;margin-bottom:8px}#live-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#live-options button{padding:13px 11px;min-height:50px;border:1px solid #3e5c79;border-radius:7px;background:#162b42;color:#dbeafb;font-size:.77rem;text-align:left;overflow-wrap:anywhere}#live-options button:hover{background:#284861;border-color:#94bcd7}#live-options button.is-selected{background:#364b58;border-color:#efd293;color:#ffe5ad}#live-options button:disabled{opacity:.6;cursor:default}#live-options button.is-correct{border-color:#8bd5af;background:#173d36;color:#c3f2d8;opacity:1}#live-answer-state{min-height:2em;font-size:.7rem;margin-top:16px;color:#b4cde3}#round-reveal{padding:22px;border:1px solid #756346;border-radius:10px;background:#29251b70;margin-top:15px}#round-reveal h3{font-size:2rem;color:#f0d296;margin-bottom:15px}.reveal-row{display:grid;grid-template-columns:minmax(85px,.7fr) minmax(0,1.5fr) 65px;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #ffffff13;font-size:.72rem}.reveal-row strong{overflow-wrap:anywhere}.reveal-row span{color:#a9bfd5;overflow-wrap:anywhere}.reveal-row b{color:#e8cd94;justify-self:end}.room-notice{min-height:2em;margin:16px 0;font-size:.76rem;color:#e9c98c}.reaction-row{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin:10px 0}.reaction-row>span{font-size:.62rem;color:#6f8eae;margin-right:auto}.reaction-row button{min-height:40px;font-size:.67rem;padding:8px 12px;color:#a7c4df;border:1px solid #2d4b67;border-radius:6px;background:#0c1c2e}#live-kmk{padding:25px;border:1px solid #45516b;background:#131e2e;border-radius:10px}#live-kmk>h3{font-size:2.3rem}#live-kmk>p{font-size:.8rem;margin:10px 0 20px}#kmk-heroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#kmk-heroes>div{min-width:0;border:1px solid #43516a;border-radius:7px;overflow:hidden;background:#18283b}#kmk-heroes img{width:100%;height:190px;object-fit:cover}#kmk-heroes strong{display:block;padding:10px;font-size:.84rem}#kmk-selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}#kmk-selects label{display:grid;gap:8px;font-size:.75rem}#kmk-selects select{width:100%;font-size:.8rem}#room-finish{padding:28px;border:1px solid #5c594b;border-radius:12px;background:radial-gradient(ellipse at 50% 0,#ad8a3830,transparent 55%),#102033}#room-finish>h2{font-size:3.7rem;color:#f3d69e}#finish-note{font-size:.76rem;color:#afc4dc;margin:14px 0 25px}#winner-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:25px 0}#winner-podium>div{padding:24px 16px;border:1px solid #756647;border-radius:11px;background:#ac8a3410;display:flex;flex-direction:column;text-align:center;gap:12px}#winner-podium>div:first-child{border-color:#d5b976;background:#d7b45d16}#winner-podium b{font:700 3rem/1 var(--display);color:#f1d08e}#winner-podium strong{font-size:.88rem;overflow-wrap:anywhere}#winner-podium span{font-size:.74rem;color:#a7bed6}.finish-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.finish-actions button{font-size:.75rem}#finish-stats{font-size:.8rem;color:#aac3dd}#match-summary{max-height:400px;overflow:auto}.summary-round{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-top:1px solid #ffffff13;font-size:.74rem}.summary-round span{color:#91afca}.summary-round b{color:#d9bd85;white-space:nowrap}#race-track{padding:18px;border:1px solid #494464;background:#1d213833;border-radius:8px;margin:0 0 16px;display:grid;gap:11px}.racer{display:grid;grid-template-columns:100px minmax(0,1fr) 42px;align-items:center;gap:12px;font-size:.64rem}.racer>span{overflow-wrap:anywhere}.racer>div{height:8px;background:#2d3f55;border-radius:8px;overflow:hidden}.racer b{display:block;height:100%;width:0;background:#bea0ed;border-radius:8px;transition:width .4s}.racer small{text-align:right;color:#d2b8f3}.arcade-rulebook{margin:48px 0 25px;padding-top:30px;border-top:1px solid #ffffff14;display:grid;grid-template-columns:1fr 1.8fr;gap:0 50px}.arcade-rulebook>.guess-kicker{grid-column:1/-1}.arcade-rulebook h2{font-size:2.7rem;max-width:300px}.arcade-rulebook>div{display:grid;gap:14px}.arcade-rulebook p:not(.guess-kicker){font-size:.75rem;line-height:1.85;color:#8faac5}.arcade-rulebook strong{color:#bcd3e8}.arcade-dialog{width:min(530px,calc(100% - 28px));color:#e7f3ff;background:#0f2134;border:1px solid #4b6b87;border-radius:13px;padding:25px;max-height:92dvh;overflow:auto}.arcade-dialog::backdrop{background:#020b17cc;backdrop-filter:blur(6px)}.dialog-title{display:flex;gap:18px;align-items:center;justify-content:space-between}.dialog-title h2{font-size:2.3rem}.dialog-title>button{font-size:1.1rem;padding:7px 13px}.auth-tabs{display:flex;gap:10px;margin:24px 0}.auth-tabs button{min-height:40px;font-size:.75rem;color:#9cbcd8;border:1px solid #3f607b;background:#132b42;border-radius:6px;padding:8px 12px}.auth-tabs button.is-active{color:#f0d18f;border-color:#d2b070}#auth-form{display:grid;gap:17px}#auth-form label{display:grid;gap:8px;font-size:.7rem}#auth-password-label>span{font-size:.6rem}.guest-entry{margin-top:24px;padding-top:22px;border-top:1px solid #ffffff17;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}.guest-entry label{display:grid;gap:8px;font-size:.63rem}.guest-entry button{font-size:.7rem}.guest-entry p{grid-column:1/-1;font-size:.67rem;color:#8daac5;line-height:1.8}#auth-error{min-height:2em;color:#e6b6a5;font-size:.75rem;margin-top:15px}#recovery-save p{font-size:.85rem;line-height:1.8;margin:20px 0}#new-recovery-code{width:100%;font-family:monospace;margin:0 0 17px}#arcade-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:12px 20px;border:1px solid #65829b;border-radius:8px;background:#172d43;max-width:calc(100% - 30px);color:#e8f3ff;font-size:.8rem;z-index:200;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s}#arcade-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:1050px){.arcade-game-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.arcade-hero{grid-template-columns:1.2fr .8fr;gap:20px}.arcade-art img{height:210px}.room-layout{grid-template-columns:195px minmax(0,1fr);gap:15px}.room-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-question{grid-template-columns:1fr;padding:18px}.live-image-wrap{max-width:300px;width:100%;margin:auto;aspect-ratio:1.3}.live-prompt h3{font-size:.96rem}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.arcade-section-head{align-items:flex-start;flex-wrap:wrap}#winner-podium{gap:8px}#winner-podium>div{padding:18px 9px}}
@media(max-width:700px){.arcade-header{min-height:70px;padding:7px 16px;gap:13px;flex-wrap:wrap}.arcade-header>a:first-child>img{width:92px;height:52px}.arcade-wordmark{display:none}.arcade-account{margin-left:auto;gap:8px}.arcade-account>span{font-size:.67rem;max-width:100px;overflow-wrap:anywhere}.arcade-account button{font-size:.6rem;min-height:44px;padding:8px 10px}.arcade-shell{width:calc(100% - 30px)}.online-status{font-size:.59rem;margin:13px 0}.arcade-hero{display:block;padding:18px 0 27px}.arcade-hero h1{font-size:clamp(2.65rem,10.7vw,4.2rem)}.arcade-hero>div>p:not(.guess-kicker){font-size:.78rem;margin-block:17px}.arcade-art{display:none}.arcade-facts{gap:18px}.arcade-facts span{font-size:.6rem}.arcade-facts b{font-size:1rem}.arcade-navigation{gap:5px;margin:0 0 24px}.arcade-navigation button{padding:10px 12px;font-size:.73rem}.arcade-navigation small{display:none}.arcade-section-head{gap:17px;margin-top:24px}.arcade-section-head h2{font-size:2rem}.arcade-section-head>p{font-size:.68rem}.arcade-game-cards{gap:10px}.arcade-card{padding:16px;gap:12px}.arcade-card strong{font-size:1.85rem}.arcade-card p{font-size:.69rem}.arcade-card .card-mark{height:52px;width:52px;font-size:2.5rem}.arcade-card>span:first-child{font-size:.43rem;letter-spacing:.04em}.arcade-card b{font-size:.65rem}.arcade-card small{font-size:.47rem}.arcade-casual{font-size:.67rem}.arcade-section-head #join-form{width:100%}#join-form input{flex:1;width:100%}.board-filters{width:100%;gap:8px}.board-filters label{flex:1 1 90px}.board-row,.history-row{padding:13px;gap:10px;font-size:.75rem}.board-row span{font-size:.58rem}.board-row b{font-size:1.3rem}.room-topbar{flex-wrap:wrap;gap:13px}.room-topbar h1{font-size:2.2rem}.room-actions{gap:7px}.room-actions button{font-size:.62rem;padding:8px 11px}.room-topbar>p{max-width:none;width:100%;font-size:.62rem}.room-layout{grid-template-columns:1fr;gap:16px}.room-scoreboard{position:static;padding:13px}.scoreboard-head{margin-bottom:5px}.scoreboard-head h2{font-size:1.35rem}#room-player-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 15px}.player-row{gap:6px;padding:10px 0;grid-template-columns:17px minmax(0,1fr) auto}.player-row strong{font-size:.65rem}.player-row small{font-size:.48rem}.player-row>b{font-size:1.05rem}.player-row button{font-size:.56rem;min-height:32px}.room-scoreboard>p{font-size:.62rem}#room-lobby{padding:21px}#room-lobby>h2{font-size:2.2rem}#host-label{font-size:.67rem}.room-settings-grid{gap:16px 11px}.room-settings-grid label{font-size:.6rem}.setting-label{font-size:.6rem}.setting-label small{font-size:.51rem}.room-settings-grid input,.room-settings-grid select,.settings-save-cell>button{font-size:.78rem;padding-inline:9px}.room-settings-grid label:first-child{grid-column:1/-1}.room-rule-note{font-size:.66rem}.round-strip{padding:14px 16px;gap:10px}.round-strip h2{font-size:1.5rem}.round-strip>div:nth-child(2){font-size:.52rem}.round-timer strong{font-size:2.2rem}.live-question{padding:16px;gap:19px}.live-image-wrap{max-width:260px;aspect-ratio:1.45}.live-prompt h3{font-size:.88rem;margin-bottom:19px}#live-options button{font-size:.72rem;min-height:47px}#live-text-form .guess-btn{padding-inline:13px;font-size:.72rem}.reveal-row{grid-template-columns:75px minmax(0,1fr) 45px;font-size:.64rem;gap:8px}#round-reveal{padding:17px}#round-reveal h3{font-size:1.7rem}.room-notice{font-size:.69rem}.reaction-row{gap:7px}.reaction-row>span{font-size:.53rem}.reaction-row button{font-size:.57rem;min-height:40px;padding:8px}.racer{grid-template-columns:80px minmax(0,1fr) 35px;font-size:.59rem;gap:8px}#live-kmk{padding:18px}#live-kmk>h3{font-size:1.9rem}#live-kmk>p{font-size:.7rem}#kmk-heroes{gap:7px}#kmk-heroes img{height:125px}#kmk-heroes strong{font-size:.68rem;padding:7px 5px}#kmk-selects{gap:7px}#kmk-selects label{font-size:.63rem}#kmk-selects select{font-size:.68rem;padding-inline:5px}#room-finish{padding:21px}#room-finish>h2{font-size:2.8rem}#winner-podium{gap:6px}#winner-podium>div{padding:18px 7px;gap:10px}#winner-podium b{font-size:2.4rem}#winner-podium strong{font-size:.65rem}#winner-podium span{font-size:.58rem}.finish-actions button{font-size:.67rem}.summary-round{font-size:.68rem}.arcade-rulebook{grid-template-columns:1fr;gap:18px;margin-top:30px}.arcade-rulebook h2{font-size:2.2rem}.arcade-rulebook p:not(.guess-kicker){font-size:.7rem}.hero-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{gap:9px}.stats-grid>div{padding:16px}.stats-grid strong{font-size:2.2rem}.stats-grid small{font-size:.54rem}.coverage-note{font-size:.72rem}.arcade-dialog{padding:20px}.dialog-title h2{font-size:2rem}.auth-tabs{gap:7px}.auth-tabs button{font-size:.68rem;padding:8px 10px}.guest-entry{grid-template-columns:1fr}.guest-entry p{grid-column:1}.guest-entry button{min-height:44px}}
@media(max-width:350px){.arcade-game-cards{grid-template-columns:1fr}.arcade-hero h1{font-size:2.65rem}.room-actions{margin-left:0}.room-topbar h1{font-size:2rem}.room-settings-grid{grid-template-columns:1fr}.room-settings-grid label:first-child{grid-column:1}.arcade-account>span{max-width:80px}}
@media(max-width:700px){.arcade-account>span{display:none}.arcade-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.arcade-navigation button{white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){.page-arcade *{transition:none!important;scroll-behavior:auto!important}}

#winner-heading,.board-row strong,.history-row strong{overflow-wrap:anywhere}.summary-round>span{min-width:0;overflow-wrap:anywhere}

@media(max-width:700px){#winner-podium{grid-template-columns:1fr}#winner-podium>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px 12px;text-align:left;padding:15px}#winner-podium b{grid-row:span 2;align-self:center;font-size:2.3rem}#winner-podium strong{font-size:.8rem}#winner-podium span{font-size:.7rem}}

/* Portrait choices and a dedicated single-player KMK card. */
#live-options button{display:flex;align-items:center;gap:10px}
#live-options .answer-hero-icon{display:block;width:34px;height:40px;object-fit:cover;flex:0 0 34px;border-radius:4px;border:1px solid #ffffff25;background:#0a1828}
#live-options .answer-hero-name{min-width:0;overflow-wrap:anywhere}
.arcade-game-cards[data-queue=multiplayer]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.arcade-game-cards[data-queue=multiplayer]{grid-template-columns:1fr}}


/* v111 — unified hub, active-room return path, and embedded KMK. */
.arcade-header{position:sticky;top:0;z-index:90;background:linear-gradient(180deg,#07111df4,#08121eea);backdrop-filter:blur(18px);box-shadow:0 12px 34px #0003}
.arcade-header-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.arcade-home-link,.arcade-return-active{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:8px 13px;font:600 .67rem/1 var(--body);letter-spacing:.02em;text-decoration:none}
.arcade-home-link{border:1px solid #3c536b;background:#0c1a29;color:#aec3d8}.arcade-home-link:hover{border-color:#6f8da8;color:#eef8ff;background:#13273a}
.arcade-return-active{border:1px solid #b99b5f;background:linear-gradient(180deg,#2e2819,#1a1b19);color:#f2d38e;box-shadow:0 0 0 1px #e7c16a0d,0 8px 22px #0003}.arcade-return-active:hover{border-color:#e4c277;background:#3a301c}
.active-pulse{width:7px;height:7px;border-radius:50%;background:#efc667;box-shadow:0 0 0 0 #efc66766;animation:active-room-pulse 2s ease-out infinite}
@keyframes active-room-pulse{0%{box-shadow:0 0 0 0 #efc66766}70%{box-shadow:0 0 0 8px #efc66700}100%{box-shadow:0 0 0 0 #efc66700}}
.arcade-hero{position:relative}.arcade-hero:after{content:'';position:absolute;inset:8% 2% auto 45%;height:60%;background:radial-gradient(circle,#56b7d218,transparent 68%);pointer-events:none}
.arcade-navigation{position:sticky;top:84px;z-index:60;background:#08121ee8;backdrop-filter:blur(15px);border:1px solid #ffffff0b;border-radius:12px;padding:7px;margin-bottom:30px;box-shadow:0 12px 26px #0002}
.arcade-navigation button{flex:1}.arcade-navigation button[aria-selected=true]{box-shadow:inset 0 0 0 1px #72b4d222,0 8px 18px #0002}
.arcade-game-cards{gap:16px}.arcade-card{isolation:isolate;overflow:hidden;min-height:315px;border-color:#35516b;background:linear-gradient(145deg,#172b3f 0%,#0e1928 64%,#0b1420 100%);box-shadow:0 16px 34px #0002}.arcade-card:before{content:'';position:absolute;inset:-45% -20% auto 35%;height:170px;background:radial-gradient(circle,#65c8e519,transparent 68%);z-index:-1;transition:transform .25s,opacity .25s}.arcade-card:hover:before{transform:translate(-8px,10px);opacity:1.4}.arcade-card[data-game=kmk]:before{background:radial-gradient(circle,#e5b75d24,transparent 68%)}.arcade-card[data-game=race]:before{background:radial-gradient(circle,#b68be624,transparent 68%)}
.arcade-card .card-mark{box-shadow:inset 0 0 20px #69c9e20a}.arcade-card[data-game=kmk] .card-mark{box-shadow:inset 0 0 20px #efc36f12}.arcade-card b{margin-top:2px}
.room-topbar{position:sticky;top:84px;z-index:55;background:#08121ef2;backdrop-filter:blur(14px);padding-top:14px}.room-actions #browse-arcade{border-color:#55738c;color:#cfe4f6}
.room-topbar{scroll-margin-top:84px}.room-actions{flex-shrink:0}.room-topbar>p{flex-shrink:0}
.kmk-screen[hidden]{display:none!important}.kmk-screen{padding:10px 0 30px}.kmk-hubbar{position:sticky;top:84px;z-index:65;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin:0 0 16px;padding:12px 14px;border:1px solid #334b64;border-radius:12px;background:#091522ed;backdrop-filter:blur(18px);box-shadow:0 15px 32px #0004}.kmk-hubbar-copy{display:flex;align-items:center;gap:9px;min-width:0}.kmk-hubbar-copy>span{font-size:.48rem;letter-spacing:.14em;color:#e3bd72;border:1px solid #8b713f;padding:4px 6px;border-radius:999px}.kmk-hubbar-copy strong{font:700 1.05rem/1 var(--display);color:#e7eef8}.kmk-hubbar-copy small{font-size:.61rem;color:#819ab4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kmk-embedded-shell{max-width:none;padding:14px 0 0}.kmk-screen .kmk-intro{padding:16px 0 4px}.kmk-screen .kmk-panel{box-shadow:0 18px 44px #0002}.kmk-inline-rules{margin-top:28px;border:1px solid #2b4058;border-radius:10px;background:#0c1725}.kmk-inline-rules summary{cursor:pointer;padding:15px 18px;font-weight:700;color:#dce8f5}.kmk-inline-rules>div{padding:0 18px 18px;color:#92a9c0;font-size:.75rem;line-height:1.75}.kmk-inline-rules ol{margin:10px 0 0;padding-left:20px}.kmk-inline-rules li+li{margin-top:5px}
.page-arcade .kmk-choice{box-shadow:0 12px 24px #0002}.page-arcade .kmk-hero{box-shadow:0 10px 24px #0003}.page-arcade .kmk-hero[aria-pressed=true]{box-shadow:0 0 0 2px #ffda7b,0 12px 30px #0005}
@media(max-width:900px){.arcade-header-tools{order:3;width:100%;margin:0;justify-content:flex-end}.arcade-header{padding-bottom:10px}.arcade-navigation{top:118px}.room-topbar,.kmk-hubbar{top:118px}.kmk-hubbar-copy small{display:none}}
@media(max-width:700px){.arcade-header{position:relative}.arcade-header-tools{width:auto;order:initial;margin-left:auto}.arcade-home-link{display:none}.arcade-return-active{min-height:42px;padding:8px 11px;font-size:.61rem}.arcade-navigation{position:relative;top:auto}.room-topbar,.kmk-hubbar{position:relative;top:auto}.kmk-hubbar{grid-template-columns:auto 1fr;gap:10px}.kmk-hubbar #kmk-return-active{grid-column:1/-1;width:100%}.kmk-hubbar-copy{justify-content:flex-end}.kmk-hubbar-copy>span{display:none}.kmk-hubbar-copy strong{font-size:.9rem}.arcade-card{min-height:285px}}
@media(prefers-reduced-motion:reduce){.active-pulse{animation:none}}

/* v112: portrait autocomplete for cropped-image hero guesses */
.hero-autocomplete{position:relative;z-index:20}
.hero-suggestions{position:absolute;left:0;right:0;top:calc(100% + 7px);max-height:min(360px,42vh);overflow:auto;padding:6px;background:#091522;border:1px solid #425a73;border-radius:8px;box-shadow:0 18px 45px #020711cc;scrollbar-width:thin}
.hero-suggestions[hidden]{display:none}
.hero-suggestion{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:#e8f0f9;cursor:pointer;font:600 .78rem/1.2 var(--body,DM Sans,sans-serif)}
.hero-suggestion:hover,.hero-suggestion.is-active{background:#17293d;color:#fff;outline:none}
.hero-suggestion img{width:38px;height:46px;flex:0 0 38px;object-fit:cover;object-position:top center;border-radius:5px;border:1px solid #ffffff18;background:#101f30}
.hero-suggestion span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-suggestion-prefix{color:#f0cf8f}
.hero-suggestion-empty{padding:12px 10px;color:#8fa6bd;font-size:.72rem;line-height:1.45}
@media(max-width:700px){.hero-suggestions{max-height:min(310px,38vh)}.hero-suggestion{min-height:52px;padding:6px 8px;font-size:.76rem}.hero-suggestion img{width:36px;height:44px;flex-basis:36px}}
/* v116 — compact no-scroll live match layout; player avatars removed */
.player-row{grid-template-columns:22px minmax(0,1fr) auto}
.player-row button{grid-column:2/4}
@media(min-width:1000px) and (min-height:720px){
 body.is-room-playing{overflow:hidden}
 body.is-room-playing .arcade-header{min-height:64px;height:64px;padding-top:4px;padding-bottom:4px}
 body.is-room-playing .arcade-header>a:first-child img{width:86px;height:48px}
 body.is-room-playing .online-status{display:none}
 body.is-room-playing .arcade-shell{height:calc(100dvh - 64px);display:block;overflow:hidden}
 body.is-room-playing #room-screen{height:100%;display:grid;grid-template-rows:68px minmax(0,1fr) 28px;gap:10px;padding-top:6px;overflow:hidden}
 body.is-room-playing .room-topbar{position:relative;top:auto;height:68px;margin:0;padding:5px 0 9px;gap:14px}
 body.is-room-playing .room-topbar h1{font-size:2.05rem}
 body.is-room-playing .room-topbar .guess-kicker{margin-bottom:2px;font-size:.48rem}
 body.is-room-playing .room-actions button{min-height:40px;padding:8px 13px;font-size:.67rem}
 body.is-room-playing .room-topbar>p{font-size:.56rem;line-height:1.35}
 body.is-room-playing .room-layout{height:100%;min-height:0;grid-template-columns:215px minmax(0,1fr);gap:16px;align-items:stretch}
 body.is-room-playing .room-scoreboard{position:relative;top:auto;height:100%;min-height:0;overflow:hidden;padding:13px;display:flex;flex-direction:column}
 body.is-room-playing .scoreboard-head{margin-bottom:7px}.scoreboard-head h2{font-size:1.35rem}
 body.is-room-playing #room-player-list{min-height:0;overflow:auto;scrollbar-width:thin}
 body.is-room-playing .player-row{padding:8px 0;gap:6px;grid-template-columns:18px minmax(0,1fr) auto}
 body.is-room-playing .player-row>span{font-size:.92rem}.player-row strong{font-size:.66rem}.player-row small{font-size:.48rem}.player-row>b{font-size:1rem}
 body.is-room-playing .room-scoreboard>p{font-size:.55rem;line-height:1.45;padding-top:8px;margin:7px 0 0}
 body.is-room-playing .room-main{height:100%;min-height:0;overflow:hidden}
 body.is-room-playing #room-game{height:100%;min-height:0;display:grid;grid-template-rows:auto 3px minmax(0,1fr);position:relative;overflow:hidden}
 body.is-room-playing #room-game[hidden]{display:none!important}
 body.is-room-playing .round-strip{padding:10px 16px;min-height:64px}
 body.is-room-playing .round-strip h2{font-size:1.55rem}.round-strip .guess-kicker{margin-bottom:3px;font-size:.47rem}.round-timer strong{font-size:2.15rem}
 body.is-room-playing .time-track{margin:0;height:3px}
 body.is-room-playing #race-track{position:absolute;z-index:5;left:16px;right:16px;top:69px;padding:7px 10px;max-height:74px;overflow:auto;background:#081522e8;backdrop-filter:blur(8px);border-radius:0 0 8px 8px}
 body.is-room-playing .live-question{height:100%;min-height:0;grid-template-columns:minmax(300px,.78fr) minmax(0,1fr);gap:16px;padding:16px;overflow:hidden;align-items:center}
 body.is-room-playing .live-image-wrap{align-self:center;justify-self:center;width:min(100%,430px);height:auto;max-height:min(54vh,460px);aspect-ratio:1;min-height:min(320px,48vh)}
 body.is-room-playing .live-prompt{height:100%;min-height:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;overflow:visible}
 body.is-room-playing .live-prompt h3{font-size:.9rem;line-height:1.55;margin:8px 0 12px;max-height:7.2em;overflow:auto}
 body.is-room-playing #live-options{gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.is-room-playing #live-options button{min-height:44px;padding:7px 9px;font-size:.68rem}
 body.is-room-playing #live-options .answer-hero-icon{width:30px;height:34px;flex-basis:30px}
 body.is-room-playing #live-answer-state{margin-top:9px;min-height:1.6em;font-size:.62rem}
 body.is-room-playing #live-text-form .guess-input-row input{min-height:46px}.hero-suggestions{max-height:min(270px,34vh)}
 body.is-room-playing #round-reveal:not([hidden]){position:absolute;z-index:12;right:16px;bottom:16px;width:min(560px,52%);max-width:560px;max-height:46%;overflow:auto;margin:0;padding:13px 15px;background:#171b1eeF;backdrop-filter:blur(14px);box-shadow:0 18px 45px #0009}
 body.is-room-playing #round-reveal h3{font-size:1.45rem;margin-bottom:7px}
 body.is-room-playing #reveal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
 body.is-room-playing .reveal-row{grid-template-columns:minmax(60px,.8fr) minmax(0,1.3fr) 45px;gap:6px;padding:5px 0;font-size:.58rem}
 body.is-room-playing .room-notice{margin:0;min-height:0;display:flex;align-items:center;font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.is-room-playing .reaction-row{position:absolute;right:0;bottom:0;margin:0;gap:5px;height:28px}
 body.is-room-playing .reaction-row>span{display:none}.reaction-row button{min-height:26px;padding:3px 8px;font-size:.53rem}
}
/* v115 — host match controls */
.room-actions .end-game-button{border-color:#a95e64;color:#ffc4c7;background:#35171c66}
.room-actions .end-game-button:hover{border-color:#df8389;color:#ffe2e4;background:#4a1d24}

/* v118 — profiles, leaderboard alignment, fixed default icon, full image stage */
.board-row{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(90px,140px);align-items:center;gap:16px;padding:13px 18px;text-decoration:none}
.board-row>.board-rank{font:700 1.35rem/1 var(--display);color:#d9ba7c;min-width:0}
.board-player{min-width:0;display:flex;align-items:center;gap:12px}
.board-player-copy{min-width:0;display:grid;gap:2px;align-content:center}
.board-player-copy strong{font-size:.82rem;color:#e6eef8;white-space:nowrap}
.board-player-copy span{display:block;font-size:.62rem;color:#8da6c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-score{justify-self:end;font:600 1.6rem/1 var(--display);color:#edd39d;font-variant-numeric:tabular-nums}
.board-profile-link:hover{border-color:#6283a0;background:#142840}
.arcade-profile-icon,.board-profile-icon,.player-default-profile,.account-default-profile{display:block;object-fit:contain;border-radius:9px;background:#0a1624;border:1px solid #31506c}
.board-profile-icon{width:38px;height:38px;flex:0 0 38px;padding:2px}
.account-default-profile{width:32px;height:32px;flex:0 0 32px;padding:2px;border-radius:8px}
.arcade-account>span{display:flex;align-items:center;gap:8px}
.player-default-profile{width:28px;height:28px;padding:2px;border-radius:7px}
.player-row{grid-template-columns:18px 28px minmax(0,1fr) auto}
.player-row button{grid-column:3/5}
/* Full image treatment: one clean frame, no inset/nested card. Server images are square, so they can fill without crop. */
.live-image-wrap{padding:0;border-radius:11px;background:#081522;box-shadow:inset 0 0 0 1px #ffffff05,0 14px 34px #0004}
.live-image-wrap:before{display:none}
.live-image-wrap img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none}
.live-image-wrap.is-answer-reveal img{max-height:none;object-fit:cover}
@media(min-width:1000px) and (min-height:720px){
 body.is-room-playing .live-question{grid-template-columns:minmax(400px,1fr) minmax(0,1.12fr);align-items:center}
 body.is-room-playing .live-image-wrap{align-self:center;justify-self:center;width:min(100%,560px);height:auto;max-height:100%;min-height:0;aspect-ratio:1}
}
@media(max-width:700px){.board-row{grid-template-columns:40px minmax(0,1fr) auto;gap:9px;padding:11px}.board-player-copy{grid-template-columns:1fr}.board-player-copy span{white-space:normal}.board-profile-icon{width:34px;height:34px;flex-basis:34px}.board-score{font-size:1.25rem}}

.page-arcade-profile .arcade-public-profile{padding:32px 0 70px}.profile-back{display:inline-block;margin:6px 0 24px;color:#9fb8d0;text-decoration:none}.public-profile-hero{display:flex;align-items:center;gap:24px;padding:26px;border:1px solid #36516b;border-radius:14px;background:linear-gradient(145deg,#14283c,#0b1726);margin-bottom:18px}.public-profile-hero>img{width:112px;height:112px;object-fit:contain;padding:5px;border-radius:20px;border:1px solid #456782;background:#091522}.public-profile-hero h1{font-size:clamp(2.8rem,7vw,4.8rem);line-height:.95}.public-profile-hero p:last-child{margin-top:9px;color:#8fa8c3;font-size:.75rem}.public-profile-heroes{margin-top:30px}@media(max-width:600px){.public-profile-hero{align-items:flex-start;gap:15px;padding:18px}.public-profile-hero>img{width:76px;height:76px;border-radius:15px}}

/* v119 — persistent one-click reconnect to the last room */
.arcade-reconnect-last{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #5e809b;border-radius:999px;padding:8px 13px;background:linear-gradient(180deg,#14283a,#0d1b29);color:#cfe9f8;font:600 .67rem/1 var(--body);letter-spacing:.02em;box-shadow:0 8px 22px #0003}
.arcade-reconnect-last:hover{border-color:#8fb9d3;background:#1a3348;color:#fff}
.arcade-reconnect-last>span:first-child{font-size:.9rem;color:#efcf8b}
@media(max-width:700px){.arcade-reconnect-last{min-height:42px;padding:8px 11px;font-size:.61rem}}


/* v120 — compact scoreboard + in-place answer reveal */
.player-row{grid-template-columns:22px 30px minmax(0,1fr) auto;gap:8px;align-items:center}
.player-rank{grid-column:1}.player-default-profile{grid-column:2;width:28px;height:28px}.player-copy{grid-column:3;min-width:0}.player-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-score{grid-column:4;display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap;min-width:62px}.player-score-total{font:600 1.12rem/1 var(--display);color:#dfc18a}.player-score-gain{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:4px 6px;border-radius:999px;font:700 .58rem/1 var(--body);animation:scoreGainIn .28s ease-out both}.player-score-gain.is-positive{color:#85e9b2;background:#153b31;border:1px solid #4fa77c}.player-score-gain.is-zero{color:#9aafc2;background:#172536;border:1px solid #314860}@keyframes scoreGainIn{from{opacity:0;transform:translateX(8px) scale(.9)}to{opacity:1;transform:none}}
.player-row button{grid-column:3/5}
#live-options button{position:relative;display:flex;align-items:center;gap:9px;overflow:visible;padding-right:12px;transition:background .18s,border-color .18s,opacity .18s,transform .18s}
#live-options button.is-correct{border-color:#63d9a2;background:#164837;color:#e4fff1;opacity:1;box-shadow:0 0 0 1px #63d9a228 inset}
#live-options button.is-wrong-answer{border-color:#d36a72;background:#55262c;color:#ffe6e8;opacity:1;box-shadow:0 0 0 1px #d36a7225 inset}
#live-options button:disabled:not(.is-correct):not(.is-wrong-answer){opacity:.48}
.answer-result-badge{position:absolute;right:8px;top:-11px;z-index:4;padding:4px 8px;border-radius:6px;font:800 .57rem/1 var(--body);letter-spacing:.01em;box-shadow:0 4px 12px #0005}.answer-result-badge.is-correct{color:#062218;background:#70e5ad;border:1px solid #c4ffe1}.answer-result-badge.is-wrong{color:#2d070a;background:#ff858d;border:1px solid #ffd4d7}
.answer-player-stack{position:absolute;right:8px;bottom:-15px;z-index:5;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:92%}.answer-player-chip{display:inline-flex;align-items:center;gap:4px;height:27px;padding:2px 7px 2px 3px;border-radius:999px;background:#091523;border:1px solid #44617c;box-shadow:0 4px 12px #0008;white-space:nowrap}.answer-player-chip.is-correct{border-color:#4fa77c}.answer-player-chip.is-wrong{border-color:#a7535b}.answer-player-icon{width:21px;height:21px;flex:0 0 21px;object-fit:contain;border-radius:50%;background:#07111d;border:1px solid #365a7c;padding:1px}.answer-player-chip strong{font:700 .56rem/1 var(--body);max-width:92px;overflow:hidden;text-overflow:ellipsis}.answer-player-chip small{font:700 .52rem/1 var(--body);color:#9bb5cb}
body.is-room-playing #live-options{gap:17px 9px}
body.is-room-playing #live-options button{min-height:52px;padding-top:8px;padding-bottom:8px}
#round-reveal{display:none!important}
.crop-reveal-board{display:grid;gap:10px;margin-top:10px}.crop-correct-answer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;border:1px solid #56c997;border-radius:8px;background:#153d32}.crop-correct-answer>span{font-size:.58rem;letter-spacing:.12em;color:#8ce7bb}.crop-correct-answer>strong{font:700 1.45rem/1 var(--display);color:#eafff3}.crop-player-results{display:grid;gap:6px;max-height:190px;overflow:auto}.crop-player-result{display:grid;grid-template-columns:minmax(120px,.85fr) minmax(0,1.3fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid #334b63;border-radius:7px;background:#0d1a29;font-size:.66rem}.crop-player-result.is-correct{border-color:#346e58}.crop-player-result.is-wrong{border-color:#70434a}.crop-player-who{display:flex;align-items:center;gap:7px;min-width:0}.crop-player-who strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crop-player-result>span:nth-child(2){color:#b7cadc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crop-result-meta{color:#e7cb91!important;font-weight:700;text-align:right;white-space:nowrap!important}
@media(max-width:700px){.player-row{grid-template-columns:17px 26px minmax(0,1fr) auto}.player-default-profile{width:24px;height:24px}.player-score{gap:4px;min-width:52px}.player-score-total{font-size:1rem}.player-score-gain{min-width:29px;padding:3px 5px;font-size:.52rem}.answer-player-chip strong{max-width:64px}.crop-player-result{grid-template-columns:minmax(95px,.8fr) minmax(0,1fr);gap:6px}.crop-result-meta{grid-column:2;text-align:left}}

/* v122 — reduce header profile icon size to better match surrounding controls */
.account-default-profile{width:22px;height:22px;flex:0 0 22px;padding:1px;border-radius:6px;object-fit:contain}
.arcade-account>span{gap:10px;min-height:44px}
@media(max-width:700px){.account-default-profile{width:20px;height:20px;flex-basis:20px}}

/* v123 — slimmer header icon, remove lineup avatar, and preserve no-reconnect after ended game */
.account-default-profile{width:18px;height:18px;flex:0 0 18px;padding:1px;border-radius:5px}
.arcade-account>span{gap:8px;min-height:40px}
.player-row{grid-template-columns:18px minmax(0,1fr) auto}
.player-copy{grid-column:2;min-width:0}
.player-score{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap;min-width:62px}
.player-row button{grid-column:2/4}
@media(max-width:700px){.account-default-profile{width:17px;height:17px;flex-basis:17px}.player-row{grid-template-columns:17px minmax(0,1fr) auto}}


/* v124 — dedicated compact mobile Arcade header */
.account-username{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){
 .arcade-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 10px;min-height:62px;padding:7px 12px;flex-wrap:nowrap}
 .arcade-header>a:first-child{grid-column:1;grid-row:1;display:flex;align-items:center}
 .arcade-header>a:first-child>img{width:76px;height:44px;object-fit:contain}
 .arcade-wordmark{display:none}
 .arcade-account{grid-column:3;grid-row:1;margin:0;gap:6px;min-width:0;align-items:center;justify-self:end}
 .arcade-account>span{display:flex;align-items:center;gap:0;min-height:38px;max-width:none}
 .arcade-account .account-username{display:none}
 .arcade-header .account-default-profile{width:24px;height:24px;min-width:24px;flex:0 0 24px;padding:1px;border-radius:6px;object-fit:contain}
 .arcade-account button{min-height:38px;padding:7px 10px;font-size:.61rem;white-space:nowrap}
 .arcade-header-tools{grid-column:1/-1;grid-row:2;width:100%;margin:0;order:initial;justify-content:flex-end;gap:7px;min-width:0}
 .arcade-header-tools button,.arcade-header-tools a{max-width:100%}
}
@media(max-width:700px){
 .arcade-header{grid-template-columns:auto 1fr auto;padding:6px 10px;gap:6px 8px}
 .arcade-header>a:first-child>img{width:68px;height:40px}
 .arcade-header .account-default-profile{width:22px;height:22px;min-width:22px;flex-basis:22px}
 .arcade-account{gap:5px}
 .arcade-account button{min-height:36px;padding:6px 8px;font-size:.57rem}
 .arcade-account>span{display:flex;min-height:36px}
 .arcade-home-link{display:none}
 .arcade-header-tools:has(.arcade-return-active[hidden]):has(.arcade-reconnect-last[hidden]){display:none}
 .arcade-return-active,.arcade-reconnect-last{width:100%;min-height:38px;font-size:.6rem}
}
@media(max-width:430px){
 .arcade-header{grid-template-columns:auto minmax(0,1fr);}
 .arcade-account{grid-column:2;justify-self:end}
 .arcade-header .account-default-profile{display:none}
 .arcade-account button{padding-inline:7px}
 #account-open{max-width:88px;overflow:hidden;text-overflow:ellipsis}
}

/* v126 — isolate header logo sizing from account profile icon */
.arcade-header .account-default-profile{width:18px;height:18px;min-width:18px;flex:0 0 18px;padding:1px;border-radius:5px;object-fit:contain}
@media(max-width:900px){.arcade-header .account-default-profile{width:18px;height:18px;min-width:18px;flex-basis:18px}}
@media(max-width:430px){.arcade-header .account-default-profile{display:none}}


/* v127 — polished account header + prevent reveal score row horizontal scrollbar */
/* The player list may scroll vertically with a full room, but round-score chips must never create x-overflow. */
#room-player-list{overflow-x:hidden;max-width:100%}
body.is-room-playing #room-player-list{overflow-y:auto;overflow-x:hidden}
.player-row{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.player-copy{min-width:0;overflow:hidden}
.player-score{min-width:0;max-width:88px;gap:5px}
.player-score-total{min-width:0}
.player-score-gain{flex:0 0 auto;min-width:0;padding:3px 5px}

/* Treat the signed-in identity as one compact control-sized group. */
.arcade-account{gap:8px}
.arcade-account>span{
 display:inline-flex;align-items:center;gap:7px;min-height:40px;
 padding:4px 10px 4px 5px;margin:0;
 border:1px solid #2f4b65;border-radius:999px;
 background:linear-gradient(180deg,#102236,#0b1928);
 box-shadow:inset 0 1px 0 #ffffff08;
 color:#e9cf99;
}
.arcade-header .account-default-profile{
 width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;
 flex:0 0 24px!important;padding:0!important;border-radius:50%!important;
 object-fit:contain;background:#071522;border:1px solid #52718b;
 box-shadow:0 0 0 2px #091827;
}
.arcade-account .account-username{font-size:.72rem;font-weight:600;line-height:1;max-width:120px}
.arcade-account button{min-height:40px;height:40px;padding:8px 13px;border-radius:8px}
#account-logout{background:#0b1928;color:#aebfd0;border-color:#2d465e}
#account-logout:hover{color:#fff;border-color:#52718b;background:#10243a}

@media(max-width:900px){
 .arcade-account>span{min-height:36px;padding:4px;border-radius:999px}
 .arcade-header .account-default-profile{width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;flex-basis:22px!important}
 .arcade-account .account-username{display:none}
 .arcade-account button{min-height:36px;height:36px;padding:6px 9px}
}
@media(max-width:430px){
 .arcade-header .account-default-profile{display:block!important;width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;flex-basis:20px!important}
 .arcade-account>span{min-height:34px;padding:3px}
 .arcade-account button{min-height:34px;height:34px;padding:5px 7px;font-size:.55rem}
 #account-open{max-width:82px}
}

/* v128 — competitive profiles, MHQ podium trophies, visual history */
.mhq-trophy{--metal:#f0c866;position:relative;width:48px;height:52px;display:inline-grid;place-items:start center;flex:0 0 48px;padding-top:6px;isolation:isolate}
.mhq-trophy:before{content:"";position:absolute;z-index:-1;top:3px;left:8px;width:32px;height:32px;border:2px solid var(--metal);border-radius:7px 7px 15px 15px;background:linear-gradient(145deg,color-mix(in srgb,var(--metal) 32%,#0e1c2c),#0b1725 72%);box-shadow:-8px 3px 0 -5px #0a1624,-8px 3px 0 -3px var(--metal),8px 3px 0 -5px #0a1624,8px 3px 0 -3px var(--metal),inset 0 1px 0 #ffffff35,0 7px 18px #0006}
.mhq-trophy:after{content:"";position:absolute;bottom:4px;left:11px;width:26px;height:5px;border-radius:4px;background:var(--metal);box-shadow:0 -6px 0 -1px var(--metal),0 3px 10px #0007}
.mhq-trophy-logo{position:relative;z-index:2;width:23px;height:23px!important;min-width:23px!important;max-width:23px!important;object-fit:contain;border-radius:50%;margin-top:4px;padding:0!important;border:1px solid color-mix(in srgb,var(--metal) 76%,white);background:#071522}
.mhq-trophy-place{position:absolute;z-index:3;bottom:10px;left:50%;transform:translateX(-50%);font:800 .53rem/1 var(--body);color:#06111e;background:var(--metal);border-radius:999px;padding:2px 5px;min-width:17px;text-align:center}
.trophy-2{--metal:#c8d1dc}.trophy-3{--metal:#c78352}.placement-number{display:inline-flex;align-items:center;justify-content:center;min-width:42px;font:700 1.2rem/1 var(--display);color:#8fa8c2}

/* Leaderboard podium treatment */
.board-row{grid-template-columns:62px minmax(0,1fr) minmax(90px,140px)}
.board-top-1{border-color:#a98540;background:linear-gradient(90deg,#4b3a171c,#102033 35%);box-shadow:inset 3px 0 0 #e9c563}
.board-top-2{border-color:#68798c;background:linear-gradient(90deg,#bec9d414,#102033 35%);box-shadow:inset 3px 0 0 #bdc8d3}
.board-top-3{border-color:#725340;background:linear-gradient(90deg,#b9754615,#102033 35%);box-shadow:inset 3px 0 0 #bd7a4e}
.board-placement{justify-self:center;transform:scale(.86);transform-origin:center}
.board-top-1 .board-score{color:#f1d28d}.board-top-2 .board-score{color:#dbe3ec}.board-top-3 .board-score{color:#dda77e}

/* Profile dashboard */
.profile-overview{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px;align-items:stretch;margin-bottom:14px;padding:18px;border:1px solid #36516b;border-radius:14px;background:radial-gradient(circle at 8% 10%,#7fcbe91a,transparent 35%),linear-gradient(145deg,#12253a,#0c1928);box-shadow:0 18px 45px #0002}
.profile-overview-identity{display:flex;align-items:center;gap:14px;min-width:0}.profile-overview-icon{width:58px;height:58px;flex:0 0 58px;object-fit:contain;border-radius:50%;border:1px solid #55748f;background:#071522;padding:3px}.profile-overview-copy{display:grid;gap:3px;min-width:0}.profile-overview-copy small{font-size:.52rem;letter-spacing:.13em;color:#8bd7ee}.profile-overview-copy strong{font:700 1.8rem/1 var(--display);color:#edf6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-overview-copy span{font-size:.67rem;color:#8ea9c4}
.profile-headline-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.profile-headline-stats>div{display:grid;align-content:center;text-align:center;padding:10px;border:1px solid #2d475f;border-radius:9px;background:#09182799}.profile-headline-stats small{font-size:.48rem;letter-spacing:.08em;color:#89a7c2}.profile-headline-stats strong{font:700 1.65rem/1.2 var(--display);color:#f0d18f;font-variant-numeric:tabular-nums}
.profile-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 22px}.profile-stat-card{min-width:0;padding:15px 16px;border:1px solid #2d475e;border-radius:10px;background:#0f1f31;display:grid;gap:4px}.profile-stat-card small{font-size:.49rem;letter-spacing:.09em;color:#89a6c1}.profile-stat-card strong{font:700 1.65rem/1.2 var(--display);color:#e8f3ff;font-variant-numeric:tabular-nums}.profile-stat-card span{font-size:.58rem;color:#7795b2}
.profile-hero-performance{margin-top:24px}.profile-section-title{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:12px}.profile-section-title small{font-size:.5rem;letter-spacing:.12em;color:#8bd7ee}.profile-section-title h3{font:700 1.7rem/1 var(--display);margin-top:4px}.profile-section-title>span{font-size:.63rem;color:#829fbb}.profile-hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.profile-hero-card{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border:1px solid #2c435a;border-radius:8px;background:#0e1d2d}.profile-hero-card>img{width:42px;height:50px;flex:0 0 42px;object-fit:cover;border-radius:5px}.profile-hero-copy{display:grid;gap:4px;min-width:0;flex:1}.profile-hero-copy strong{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-hero-copy small{font-size:.55rem;color:#819eb8}.profile-hero-bar{height:4px;border-radius:8px;background:#263b50;overflow:hidden}.profile-hero-bar i{display:block;height:100%;background:linear-gradient(90deg,#66a9cf,#83d8b0);border-radius:8px}

/* Visual match history */
#match-history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.history-card{display:grid;grid-template-columns:54px 42px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-width:0;padding:13px 14px;text-align:left;color:#e6f0fb;border:1px solid #304960;border-radius:10px;background:linear-gradient(145deg,#102034,#0d1b2b);transition:transform .16s,border-color .16s,background .16s}.history-card:hover{transform:translateY(-2px);border-color:#6686a1;background:#13263a}.history-placement{transform:scale(.78);transform-origin:center}.history-card.place-1{border-color:#76643d}.history-card.place-2{border-color:#566576}.history-card.place-3{border-color:#6b4c39}.history-mode-mark{width:36px;height:36px;display:grid;place-items:center;border:1px solid #38536d;border-radius:8px;background:#0a1725;font:700 1.35rem/1 var(--display);color:#8bd7ee}.history-card-copy{display:grid;gap:3px;min-width:0}.history-card-copy strong{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-card-copy span{font-size:.57rem;color:#829fbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-card-copy small{font-size:.55rem;color:#a9bfd3}.history-card-score{text-align:right;display:grid;gap:3px}.history-card-score b{font:700 1.25rem/1 var(--display);color:#efd08f;white-space:nowrap}.history-card-score span{font-size:.49rem;letter-spacing:.08em;color:#84c9a8}
#history-detail{margin-top:18px;padding:18px;border:1px solid #36516b;border-radius:12px;background:#0c1928}.history-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding-bottom:14px;border-bottom:1px solid #ffffff12}.history-detail-head small{font-size:.5rem;letter-spacing:.12em;color:#8bd7ee}.history-detail-head h3{font:700 1.9rem/1 var(--display);margin:4px 0}.history-detail-head span{font-size:.61rem;color:#819db7}.history-result-banner{display:flex;align-items:center;gap:14px;margin:14px 0;padding:12px 15px;border:1px solid #495e72;border-radius:10px;background:#112235}.history-result-banner>div{display:grid;gap:2px}.history-result-banner small{font-size:.48rem;letter-spacing:.12em;color:#e8c777}.history-result-banner strong{font:700 1.3rem/1 var(--display)}.history-result-banner span{font-size:.6rem;color:#91aac2}.history-detail-trophy{transform:scale(.82)}
.history-standings{display:grid;gap:5px;margin:16px 0}.history-standings h4{font:700 1.15rem/1 var(--display);margin-bottom:4px}.history-standing-row{display:grid;grid-template-columns:45px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid #263d52;border-radius:7px;background:#0b1826}.history-standing-place{transform:scale(.62);transform-origin:left center}.history-standing-row strong{font-size:.68rem}.history-standing-row span{font-size:.57rem;color:#87a2bc}.history-standing-row b{font-size:.66rem;color:#e7c987;white-space:nowrap}
.history-round-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.history-round-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid #31495f;border-radius:8px;background:#0d1b2a}.history-round-card.is-correct{border-left:3px solid #65c997}.history-round-card.is-wrong{border-left:3px solid #b85f67}.history-round-hero{width:44px;height:48px;border-radius:5px;overflow:hidden;background:#101f30}.history-round-hero img{width:100%;height:100%;object-fit:cover}.history-round-copy{min-width:0;display:grid;gap:2px}.history-round-copy small{font-size:.46rem;letter-spacing:.09em;color:#7395b3}.history-round-copy strong{font-size:.67rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-round-copy span{font-size:.54rem;color:#9bb1c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-round-meta{display:grid;text-align:right;gap:2px}.history-round-meta b{font-size:.69rem;color:#e9c97f}.history-round-meta span{font-size:.51rem;color:#84a0bb}

/* End-of-match podium + remaining standings */
#winner-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;margin:32px 0 14px}.podium-card{min-width:0;display:grid;justify-items:center;gap:7px;padding:20px 14px 16px;border:1px solid #526275;border-radius:13px;background:linear-gradient(180deg,#14283b,#0b1725);text-align:center;box-shadow:0 16px 34px #0003}.podium-card.place-1{transform:translateY(-16px);border-color:#b28b3e;background:radial-gradient(circle at 50% 0,#e8c35b24,transparent 42%),linear-gradient(180deg,#1b2b39,#0c1825);box-shadow:0 22px 45px #0005,0 0 0 1px #e5c36418 inset}.podium-card.place-2{border-color:#73808d}.podium-card.place-3{border-color:#815d46}.podium-trophy{transform:scale(1.18);margin-bottom:4px}.podium-card.place-1 .podium-trophy{transform:scale(1.38)}.podium-label{font-size:.48rem;letter-spacing:.13em;color:#86a3bd}.podium-card.place-1 .podium-label{color:#e9c96f}.podium-name{max-width:100%;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.podium-score{font:700 1.7rem/1 var(--display);color:#f0d28e}.podium-detail{font-size:.58rem;color:#849fb8}
#finish-standings{display:grid;gap:6px;margin:10px 0 18px}.finish-standing-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 12px;border:1px solid #2b4258;border-radius:8px;background:#0d1a29}.finish-place{transform:scale(.62);transform-origin:left center}.finish-standing-row strong{font-size:.7rem}.finish-standing-row span{font-size:.58rem;color:#829db7}.finish-standing-row b{font-size:.69rem;color:#e5c987;white-space:nowrap}
#finish-stats{display:flex;align-items:center;gap:10px;margin:15px 0;padding:11px 13px;border:1px solid #3a536a;border-radius:9px;background:#102033;color:#9bb1c6;font-size:.62rem}#finish-stats>span:first-child{font-size:.48rem;letter-spacing:.12em;color:#8bd7ee}#finish-stats strong{font:700 1.1rem/1 var(--display);color:#f0d18f}.finish-me-place{transform:scale(.62);margin:-8px -7px}

/* Public profile recent form */
.public-profile-overview{margin-top:18px}.public-profile-history{margin-top:32px}.public-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.public-history-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #2d465d;border-radius:9px;background:#0e1d2d}.public-history-main{display:flex;align-items:center;gap:8px;min-width:0}.public-history-place{transform:scale(.68)}.public-history-main>div{display:grid;gap:2px;min-width:0}.public-history-main strong{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-history-main span{font-size:.55rem;color:#829db7}.public-history-score{text-align:right}.public-history-score b{display:block;font:700 1.1rem/1 var(--display);color:#edce8b}.public-history-score small{font-size:.49rem;color:#7793ad}

@media(max-width:900px){
 .profile-overview{grid-template-columns:1fr}.profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#match-history-list,.history-round-grid,.public-history-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
 .board-row{grid-template-columns:48px minmax(0,1fr) auto;gap:9px;padding:10px}.board-placement{transform:scale(.68)}.board-profile-icon{display:none}.board-player{gap:0}.board-player-copy span{font-size:.54rem}.board-score{font-size:1.25rem}
 .profile-overview{padding:13px}.profile-overview-icon{width:46px;height:46px;flex-basis:46px}.profile-overview-copy strong{font-size:1.45rem}.profile-headline-stats strong{font-size:1.3rem}.profile-stat-grid{gap:7px}.profile-stat-card{padding:11px}.profile-stat-card strong{font-size:1.35rem}.profile-hero-grid{grid-template-columns:1fr}
 .history-card{grid-template-columns:44px 34px minmax(0,1fr) auto;padding:10px;gap:7px}.history-placement{transform:scale(.62)}.history-mode-mark{width:30px;height:30px;font-size:1rem}.history-card-copy span{display:none}.history-card-score b{font-size:1.05rem}
 #history-detail{padding:13px}.history-standing-row,.finish-standing-row{grid-template-columns:40px minmax(0,1fr) auto}.history-standing-row>span,.finish-standing-row>span{display:none}.history-round-grid{grid-template-columns:1fr}
 #winner-podium{gap:6px;margin-top:30px}.podium-card{padding:15px 7px 12px}.podium-card.place-1{transform:translateY(-10px)}.podium-trophy{transform:scale(.9)}.podium-card.place-1 .podium-trophy{transform:scale(1.05)}.podium-name{font-size:.66rem}.podium-score{font-size:1.3rem}.podium-detail{font-size:.49rem}
}
#winner-podium:has(.podium-card:only-child){grid-template-columns:minmax(220px,360px);justify-content:center}#winner-podium:has(.podium-card:only-child) .podium-card.place-1{transform:none}

/* v129 — never render an empty signed-out identity pill */
.arcade-account>span[hidden]{display:none!important}


/* v131 — modern Arcade rulebook / gameplay guide */
.arcade-rulebook{margin:56px 0 30px;padding:0;border:1px solid #284158;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.7fr);gap:0;background:linear-gradient(145deg,#0d1b2b,#091522 72%);box-shadow:0 24px 60px #02081255;isolation:isolate}
.rulebook-intro{position:relative;min-height:100%;padding:34px 32px 30px;border-right:1px solid #ffffff12;background:radial-gradient(circle at 50% 72%,#2f6f8b22,transparent 40%),linear-gradient(180deg,#102237,#0b1725);overflow:hidden}
.rulebook-intro>.guess-kicker{margin:0 0 15px;color:#9dbad2}
.rulebook-intro h2{font-size:clamp(2.55rem,3.3vw,3.55rem);line-height:.94;max-width:330px;color:#edf5ff}
.rulebook-lead{max-width:300px;margin:18px 0 0;color:#91aac2;font-size:.76rem;line-height:1.65}
.rulebook-watermark{position:relative;margin-top:34px;min-height:185px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px;border:1px solid #8bd7ee12;border-radius:16px;background:linear-gradient(180deg,#07111d22,#07111dbb);overflow:hidden;text-align:center}
.rulebook-watermark:before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;border:1px solid #8bd7ee18;box-shadow:0 0 0 28px #8bd7ee06,0 0 0 56px #8bd7ee035;top:50%;left:50%;transform:translate(-50%,-50%)}
.rulebook-watermark img{position:absolute;width:160px;height:100px;object-fit:contain;top:20px;left:50%;transform:translateX(-50%);opacity:.16;filter:saturate(.7)}
.rulebook-watermark span{position:relative;font:700 1.15rem/1 var(--display);letter-spacing:.08em;color:#b9d9e733}
.rulebook-watermark small{position:relative;margin-top:7px;font-size:.47rem;letter-spacing:.16em;color:#88a7bc55}
.rulebook-content{padding:26px;min-width:0}
.rulebook-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rule-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:start;min-height:150px;padding:18px;border:1px solid #2b455f;border-radius:13px;background:linear-gradient(145deg,#11253a,#0d1c2d);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.rule-card:hover{transform:translateY(-2px);border-color:#5d839e;background:linear-gradient(145deg,#142a41,#0f2033)}
.rule-card-mark{width:52px;height:52px;display:grid;place-items:center;border:1px solid #7ab5d044;border-radius:12px;background:#071725;color:#9ee1f6;font:700 2rem/1 var(--display)}
.rule-card-kmk .rule-card-mark{color:#efc98f;border-color:#d4ae6a44}
.rule-card small{display:block;margin:2px 0 6px;font-size:.47rem;letter-spacing:.14em;color:#819fba}
.rule-card h3{font-size:1.08rem;color:#edf5ff;margin:0 0 7px}
.rule-card p{font-size:.69rem;line-height:1.65;color:#91aac3;margin:0}
.rulebook-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.rulebook-details article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:17px 15px;border-top:1px solid #ffffff13;background:#08152255;border-radius:10px}
.rulebook-details article>span{font:700 1.5rem/1 var(--display);color:#e8c981}
.rulebook-details h3{font-size:.76rem;color:#dceafa;margin:0 0 6px}
.rulebook-details p{font-size:.61rem;line-height:1.6;color:#829db8;margin:0}
.rulebook-details strong{color:#bbd7e9}
@media(max-width:1000px){.arcade-rulebook{grid-template-columns:1fr}.rulebook-intro{border-right:0;border-bottom:1px solid #ffffff12;display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:24px;align-items:center}.rulebook-intro>.guess-kicker,.rulebook-intro h2,.rulebook-lead{grid-column:1}.rulebook-watermark{grid-column:2;grid-row:1/4;margin:0;min-height:180px}.rulebook-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.arcade-rulebook{margin-top:34px;border-radius:14px}.rulebook-intro{display:block;padding:24px 20px}.rulebook-intro h2{font-size:2.5rem}.rulebook-lead{font-size:.7rem}.rulebook-watermark{margin-top:22px;min-height:120px;padding:15px}.rulebook-watermark img{width:125px;height:75px;top:8px}.rulebook-watermark:before{width:180px;height:180px}.rulebook-watermark span{font-size:.9rem}.rulebook-content{padding:15px}.rulebook-modes{grid-template-columns:1fr;gap:9px}.rule-card{grid-template-columns:46px minmax(0,1fr);min-height:0;padding:15px}.rule-card-mark{width:44px;height:44px;font-size:1.65rem}.rule-card h3{font-size:1rem}.rule-card p{font-size:.66rem}.rulebook-details{grid-template-columns:1fr}.rulebook-details article{padding:15px}.rulebook-details p{font-size:.64rem}}

/* v133 — modern live-game visual pass */
/* Match chrome */
.room-topbar{
  border-bottom:0;
  padding:10px 0 14px;
  margin-bottom:10px;
}
.room-topbar>div:first-child{min-width:0}
.room-topbar h1{letter-spacing:.035em}
.room-actions{
  padding:4px;
  border:1px solid #29445b;
  border-radius:12px;
  background:#081522a8;
  box-shadow:inset 0 1px 0 #ffffff07;
}
.room-actions button{
  border-radius:8px;
  border-color:transparent;
  background:transparent;
}
.room-actions button:hover{background:#14283b;border-color:#385a74}
.room-actions .end-game-button{background:#2b141966;border-color:#864e55}
.room-topbar>p{
  padding:7px 10px;
  border:1px solid #29445b;
  border-radius:999px;
  background:#08152299;
  white-space:nowrap;
  max-width:none;
}

/* Scoreboard */
.room-scoreboard{
  border-color:#31516b;
  border-radius:15px;
  background:
    radial-gradient(circle at 20% 0,#4b9fc01a,transparent 34%),
    linear-gradient(180deg,#10243a,#0b1928 76%);
  box-shadow:0 18px 42px #0003,inset 0 1px 0 #ffffff08;
}
.scoreboard-head{
  padding-bottom:11px;
  margin-bottom:4px;
  border-bottom:1px solid #ffffff10;
}
.scoreboard-head h2{color:#eff7ff}
.scoreboard-head>span{
  padding:4px 7px;
  border:1px solid #2d4a61;
  border-radius:999px;
  background:#071522;
}
.player-row{
  margin:5px 0;
  padding:9px 8px;
  border:1px solid transparent;
  border-radius:10px;
  transition:background .18s ease,border-color .18s ease;
}
.player-row.is-me{
  background:linear-gradient(90deg,#15334a99,#0e203266);
  border-color:#3d6580;
}
.player-row.is-me strong{color:#a6e8fa}
.player-rank{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:7px;
  background:#071522;
  border:1px solid #27455d;
}
.player-score-total{
  padding:5px 7px;
  border-radius:8px;
  background:#081522;
  border:1px solid #2b465d;
}

/* Round status */
.round-strip{
  min-height:72px;
  padding:10px 14px 10px 16px;
  border-color:#34546e;
  border-radius:15px 15px 0 0;
  background:
    linear-gradient(90deg,#132b43,#10243a 62%,#0b1b2c),
    #10243a;
  box-shadow:inset 0 1px 0 #ffffff08;
}
.round-strip>div:first-child{min-width:180px}
.round-strip h2{color:#f2f7fc;letter-spacing:.015em}
#live-phase{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:116px;
  min-height:30px;
  padding:7px 12px;
  border:1px solid #3b5c75;
  border-radius:999px;
  background:#081725b8;
  color:#9edcf1;
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 #ffffff08;
}
.round-timer{
  min-width:82px;
  padding:7px 10px 6px;
  border:1px solid #4b6273;
  border-radius:11px;
  background:#071522c7;
  box-shadow:inset 0 1px 0 #ffffff0a;
}
.round-timer strong{color:#f3ce79}
.time-track{
  height:4px;
  margin:0;
  background:#172e43;
  overflow:hidden;
}
.time-track>span{
  border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#f0c86f,#f2d993);
  box-shadow:0 0 12px #e8c66c44;
}
.time-track.is-reveal>span{
  background:linear-gradient(90deg,#67bdd8,#9ce4ec);
  box-shadow:0 0 12px #82d5e455;
}

/* Main question stage */
.live-question{
  position:relative;
  gap:24px;
  padding:22px;
  border-color:#2e4d65;
  border-radius:0 0 16px 16px;
  background:
    radial-gradient(circle at 28% 48%,#2f78971b,transparent 30%),
    radial-gradient(circle at 83% 28%,#a9853210,transparent 26%),
    linear-gradient(145deg,#0c1c2c,#091624 72%);
  box-shadow:inset 0 1px 0 #ffffff05,0 18px 50px #0002;
}
.live-image-wrap{
  border-radius:16px;
  border-color:#355a74;
  background:#071522;
  box-shadow:0 18px 42px #0005,0 0 0 1px #ffffff05 inset;
}
.live-image-wrap:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px #ffffff08,inset 0 -40px 80px #02071233;
}
.live-image-wrap>#live-mystery{
  background:radial-gradient(circle at 50% 50%,transparent 0 26%,#06111d18 58%,#06111d55 100%);
}
.live-image-wrap>#live-mystery strong{
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  margin-bottom:11px;
  border:1px solid #ffffff2c;
  border-radius:50%;
  background:#07152266;
  backdrop-filter:blur(6px);
  box-shadow:0 14px 35px #0004,inset 0 1px 0 #ffffff1a;
  font-size:4.6rem;
}
.live-image-wrap>#live-mystery span{
  padding:6px 10px;
  border:1px solid #ffffff1c;
  border-radius:999px;
  background:#07152288;
  backdrop-filter:blur(5px);
}

/* Prompt + answers */
.live-prompt{
  width:100%;
  max-width:680px;
  justify-self:center;
  padding:26px;
  border:1px solid #314f68;
  border-radius:16px;
  background:
    linear-gradient(145deg,#11273bdf,#0b1b2bdd),
    #0d1e2f;
  box-shadow:0 18px 44px #0003,inset 0 1px 0 #ffffff08;
}
.live-prompt .guess-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:27px;
  margin:0 0 12px;
  padding:6px 9px;
  border:1px solid #385970;
  border-radius:999px;
  background:#081725;
  color:#8ed6ed;
  letter-spacing:.14em;
}
.live-prompt h3{
  margin:0 0 20px;
  color:#f1f6fc;
  font-size:1.08rem;
  line-height:1.55;
  font-weight:600;
}
#live-options{gap:10px}
#live-options button{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:58px;
  padding:8px 11px;
  border:1px solid #35546d;
  border-radius:11px;
  background:linear-gradient(180deg,#162d45,#12273c);
  color:#e2eefb;
  box-shadow:inset 0 1px 0 #ffffff07;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
#live-options button:not(:disabled):hover{
  transform:translateY(-2px);
  border-color:#6d9ab7;
  background:linear-gradient(180deg,#1c3853,#173149);
  box-shadow:0 8px 22px #0003,inset 0 1px 0 #ffffff0b;
}
#live-options button.is-selected{
  border-color:#ddb96b;
  background:linear-gradient(180deg,#3d392d,#2a302f);
  color:#ffe2a6;
  box-shadow:0 0 0 1px #ddb96b22 inset,0 8px 24px #0003;
}
#live-options button.is-correct{
  border-color:#69d3a4;
  background:linear-gradient(180deg,#174738,#12372e);
  color:#d2f8e4;
  box-shadow:0 0 0 1px #69d3a42a inset,0 8px 24px #0003;
}
#live-options button.is-wrong{
  border-color:#d26e76;
  background:linear-gradient(180deg,#4a232a,#351c22);
  color:#ffd9dc;
}
#live-options .answer-hero-icon{
  width:40px;
  height:44px;
  flex:0 0 40px;
  border:1px solid #ffffff18;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 5px 14px #0004;
}
#live-options .answer-hero-name{font-weight:650}
#live-answer-state{
  min-height:0;
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px solid #ffffff0e;
  color:#91abc2;
}
#live-text-form{
  padding-top:2px;
}
#live-text-form>label{
  margin-bottom:8px;
  color:#a5bdd2;
}
#live-text-form .guess-input-row{
  padding:5px;
  border:1px solid #35546d;
  border-radius:11px;
  background:#071522;
}
#live-text-form .guess-input-row input{
  border:0;
  background:transparent;
  box-shadow:none;
}
#live-text-form .guess-btn{border-radius:8px}

/* Reveal should feel like a result state, not an extra floating report card. */
#room-game.is-reveal .round-strip{border-color:#477287}
#room-game.is-reveal #live-phase{border-color:#66aabf;color:#b8ecf3;background:#0a2835}
#room-game.is-reveal .live-prompt{border-color:#3a6677}
body.is-room-playing #round-reveal:not([hidden]){
  border-color:#6c5a37;
  border-radius:12px;
  background:#111a20f2;
  box-shadow:0 18px 45px #0008,inset 0 1px 0 #ffffff08;
}

/* Desktop no-scroll tuning */
@media(min-width:1000px) and (min-height:720px){
 body.is-room-playing #room-screen{grid-template-rows:62px minmax(0,1fr) 28px;gap:8px}
 body.is-room-playing .room-topbar{height:62px;padding:3px 0 7px}
 body.is-room-playing .room-layout{grid-template-columns:205px minmax(0,1fr);gap:14px}
 body.is-room-playing .room-scoreboard{padding:12px}
 body.is-room-playing .round-strip{min-height:66px;padding:7px 12px 7px 15px}
 body.is-room-playing .round-strip h2{font-size:1.55rem}
 body.is-room-playing #live-phase{min-height:28px;padding:6px 10px}
 body.is-room-playing .round-timer{padding:5px 9px;min-width:76px}
 body.is-room-playing .round-timer strong{font-size:1.95rem}
 body.is-room-playing .live-question{
   grid-template-columns:minmax(320px,.88fr) minmax(420px,1.12fr);
   gap:22px;
   padding:18px 22px;
 }
 body.is-room-playing .live-image-wrap{
   width:min(100%,440px);
   min-height:min(330px,49vh);
   max-height:min(56vh,470px);
 }
 body.is-room-playing .live-prompt{
   height:auto;
   max-height:100%;
   align-self:center;
   padding:22px;
 }
 body.is-room-playing .live-prompt h3{
   margin:0 0 16px;
   max-height:none;
   overflow:visible;
   font-size:.98rem;
   line-height:1.5;
 }
 body.is-room-playing #live-options{gap:9px}
 body.is-room-playing #live-options button{min-height:54px;padding:7px 10px;font-size:.7rem}
 body.is-room-playing #live-options .answer-hero-icon{width:38px;height:40px;flex-basis:38px}
 body.is-room-playing #live-answer-state{margin-top:9px;padding-top:8px}
}

/* Tablet / mobile */
@media(max-width:1050px){
 .live-question{gap:16px}
 .live-prompt{max-width:620px;padding:20px}
}
@media(max-width:700px){
 .room-topbar{padding-bottom:10px}
 .room-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px}
 .room-actions button{width:100%}
 .room-topbar>p{width:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .room-scoreboard{border-radius:12px}
 .live-question{padding:12px;border-radius:0 0 13px 13px}
 .live-image-wrap{max-width:300px;border-radius:13px}
 .live-prompt{padding:16px;border-radius:13px}
 .live-prompt .guess-kicker{min-height:24px;margin-bottom:10px}
 .live-prompt h3{font-size:.92rem;line-height:1.5;margin-bottom:15px}
 #live-options{grid-template-columns:1fr;gap:8px}
 #live-options button{min-height:54px}
 #live-options .answer-hero-icon{width:38px;height:42px;flex-basis:38px}
 .round-strip{min-height:64px;padding:9px 11px}
 #live-phase{display:none}
 .round-timer{min-width:70px;padding:5px 8px}
}

/* v135 — live game layout polish from v133 baseline */
#room-screen{
  padding-bottom:10px;
}
.room-topbar{
  align-items:stretch;
  gap:16px;
  padding:0 0 18px;
  margin-bottom:18px;
}
.room-topbar>div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1 1 280px;
  min-height:94px;
  padding:18px 22px;
  border:1px solid #2e516b;
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0,#53a4c21f,transparent 34%),
    linear-gradient(135deg,#10273f,#0b1726 72%);
  box-shadow:0 18px 44px #00000026,inset 0 1px 0 #ffffff08;
}
.room-topbar .guess-kicker{
  margin:0 0 7px;
  color:#86d9ec;
}
.room-topbar h1{
  font-size:clamp(2.45rem,4.2vw,3.75rem);
  line-height:.95;
}
.room-actions{
  margin-left:0;
  flex:0 1 auto;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
  padding:8px;
  border-radius:16px;
}
.room-actions button{
  min-height:44px;
  padding:10px 14px;
}
.room-topbar>p{
  align-self:center;
  margin-left:auto;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.room-layout{
  grid-template-columns:260px minmax(0,1fr);
  gap:20px;
}
.room-main{
  display:grid;
  gap:18px;
  min-width:0;
}
.room-scoreboard{
  min-height:100%;
}
#room-game{
  position:relative;
  overflow:hidden;
  border:1px solid #31536e;
  border-radius:18px;
  background:
    radial-gradient(circle at 22% 20%,#3c8bac12,transparent 24%),
    radial-gradient(circle at 82% 18%,#c6a05c10,transparent 18%),
    linear-gradient(145deg,#0f2236,#081421 76%);
  box-shadow:0 20px 46px #0000002b,inset 0 1px 0 #ffffff08;
}
#room-game::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0,rgba(114,202,231,.04) 45%,transparent 100%);
}
.round-strip{
  position:relative;
  z-index:1;
  min-height:88px;
  padding:18px 24px 16px;
  border:0;
  border-bottom:1px solid #ffffff12;
  border-radius:0;
  background:linear-gradient(180deg,#132b43,#10253b 74%,#0f2236);
}
.round-strip>div:first-child{
  min-width:210px;
}
.round-strip h2{
  font-size:2rem;
}
#live-phase{
  min-width:142px;
  min-height:34px;
  padding:8px 16px;
  font-size:.6rem;
}
.round-timer{
  min-width:90px;
  padding:9px 12px 8px;
  border-radius:14px;
}
.round-timer strong{
  font-size:3rem;
}
.time-track{
  position:relative;
  z-index:1;
  height:5px;
  background:#19364b;
}
.live-question{
  position:relative;
  z-index:1;
  min-height:520px;
  grid-template-columns:minmax(380px,.92fr) minmax(430px,1.08fr);
  gap:28px;
  padding:28px;
  border:0;
  border-radius:0;
  background:transparent;
  align-items:center;
}
.live-image-wrap{
  width:min(100%,540px);
  min-height:470px;
  max-height:560px;
  margin-inline:auto;
  padding:16px;
}
#live-image{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
}
.live-prompt{
  align-self:stretch;
  justify-self:stretch;
  width:100%;
  max-width:none;
  min-height:470px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px;
}
.live-prompt h3{
  font-size:1.22rem;
  line-height:1.55;
  margin-bottom:24px;
}
#live-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#live-options button{
  min-height:72px;
  padding:10px 12px;
  border-radius:13px;
}
#live-options .answer-hero-icon{
  width:46px;
  height:50px;
  flex-basis:46px;
  border-radius:10px;
}
#live-answer-state{
  margin-top:16px;
  padding-top:12px;
  font-size:.8rem;
}
#live-text-form{
  margin-top:4px;
}
#live-text-form .guess-input-row{
  min-height:58px;
}
#live-text-form .guess-input-row input{
  min-height:46px;
}
#room-game.is-reveal .live-prompt{
  border-color:#477287;
}
body.is-room-playing .room-layout{
  grid-template-columns:260px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
body.is-room-playing .room-scoreboard{
  position:sticky;
  top:15px;
  height:auto;
  overflow:visible;
  padding:17px;
}
body.is-room-playing .player-row{
  padding:9px 8px;
  gap:8px;
}
body.is-room-playing .room-scoreboard>p{
  font-size:.63rem;
  line-height:1.65;
  padding-top:13px;
  margin-top:10px;
}
body.is-room-playing #room-game{
  height:auto;
  min-height:0;
  display:block;
  overflow:hidden;
}
body.is-room-playing .round-strip{
  min-height:88px;
  padding:18px 24px 16px;
}
body.is-room-playing .round-strip h2{
  font-size:2rem;
}
body.is-room-playing .round-timer strong{
  font-size:3rem;
}
body.is-room-playing .live-question{
  height:auto;
  min-height:520px;
  grid-template-columns:minmax(360px,.92fr) minmax(430px,1.08fr);
  gap:28px;
  padding:28px;
  overflow:visible;
  align-items:center;
}
body.is-room-playing .live-image-wrap{
  width:min(100%,540px);
  min-height:470px;
  max-height:560px;
}
body.is-room-playing .live-prompt{
  height:auto;
  max-height:none;
  align-self:stretch;
  padding:28px;
}
body.is-room-playing .live-prompt h3{
  font-size:1.14rem;
  line-height:1.55;
  margin-bottom:22px;
  max-height:none;
}
body.is-room-playing #live-options{
  gap:12px;
}
body.is-room-playing #live-options button{
  min-height:72px;
  font-size:.78rem;
}
body.is-room-playing #live-options .answer-hero-icon{
  width:46px;
  height:50px;
  flex-basis:46px;
}
body.is-room-playing #live-answer-state{
  margin-top:16px;
  padding-top:12px;
}
@media(max-width:1180px){
  .room-layout,
  body.is-room-playing .room-layout{
    grid-template-columns:230px minmax(0,1fr);
    gap:16px;
  }
  .live-question,
  body.is-room-playing .live-question{
    grid-template-columns:minmax(320px,.88fr) minmax(0,1fr);
    gap:20px;
    padding:22px;
  }
  .live-image-wrap,
  body.is-room-playing .live-image-wrap{
    width:min(100%,460px);
    min-height:400px;
    max-height:480px;
  }
  .live-prompt,
  body.is-room-playing .live-prompt{
    min-height:400px;
    padding:22px;
  }
}
@media(max-width:930px){
  .room-topbar{
    flex-wrap:wrap;
  }
  .room-topbar>div:first-child{
    flex-basis:100%;
  }
  .room-actions{
    width:100%;
  }
  .room-layout,
  body.is-room-playing .room-layout{
    grid-template-columns:1fr;
  }
  .room-scoreboard,
  body.is-room-playing .room-scoreboard{
    position:static;
  }
  .live-question,
  body.is-room-playing .live-question{
    min-height:0;
    grid-template-columns:1fr;
    padding:20px;
  }
  .live-image-wrap,
  body.is-room-playing .live-image-wrap,
  .live-prompt,
  body.is-room-playing .live-prompt{
    width:100%;
    max-width:640px;
    min-height:0;
    max-height:none;
    margin-inline:auto;
  }
}
@media(max-width:700px){
  .room-topbar>div:first-child{
    min-height:0;
    padding:15px 16px;
    border-radius:15px;
  }
  .room-topbar h1{
    font-size:2.05rem;
  }
  .room-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .room-actions button{
    width:100%;
  }
  .room-topbar>p{
    width:100%;
    justify-content:center;
  }
  .room-layout,
  body.is-room-playing .room-layout{
    gap:14px;
  }
  .live-question,
  body.is-room-playing .live-question{
    gap:16px;
    padding:14px;
  }
  .live-image-wrap,
  body.is-room-playing .live-image-wrap{
    width:100%;
    max-width:360px;
    min-height:280px;
    padding:10px;
    border-radius:14px;
  }
  .live-prompt,
  body.is-room-playing .live-prompt{
    padding:16px;
    border-radius:14px;
  }
  .live-prompt h3,
  body.is-room-playing .live-prompt h3{
    font-size:.97rem;
    margin-bottom:16px;
  }
  #live-options,
  body.is-room-playing #live-options{
    grid-template-columns:1fr;
    gap:8px;
  }
  #live-options button,
  body.is-room-playing #live-options button{
    min-height:60px;
    font-size:.72rem;
  }
  .round-strip,
  body.is-room-playing .round-strip{
    min-height:68px;
    padding:10px 12px;
  }
  .round-strip h2,
  body.is-room-playing .round-strip h2{
    font-size:1.45rem;
  }
  .round-timer strong,
  body.is-room-playing .round-timer strong{
    font-size:2.2rem;
  }
}

/* v136 — cleaner menu and distinct arcade mode icons */
.arcade-navigation{
  align-items:stretch;
  gap:10px;
  padding:8px;
  border-radius:16px;
  border-color:#294862;
  background:linear-gradient(180deg,#0b1726ee,#09121ddd);
  box-shadow:0 18px 34px #0000002b, inset 0 1px 0 #ffffff05;
}
.arcade-navigation button{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
  text-align:left;
  color:#a9bfd7;
  background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,0));
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.arcade-navigation button:hover{
  border-color:#3f627f;
  background:#112134;
  transform:translateY(-1px);
}
.arcade-navigation button[aria-selected=true]{
  color:#edf7ff;
  border-color:#5682a1;
  background:linear-gradient(180deg,#1a3248,#112235);
  box-shadow:inset 0 0 0 1px #8bd7ee1a,0 12px 24px #00000024;
}
.arcade-navigation .nav-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.arcade-navigation .nav-title{font-size:.92rem;font-weight:700;color:inherit;display:flex;align-items:center;gap:6px;min-width:0}
.arcade-navigation .nav-meta{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#7d9ab8}
.arcade-navigation small{font-size:.58rem;padding:2px 5px;margin-left:2px;background:#ffffff0b;border-radius:999px}
.nav-icon{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border-radius:12px;border:1px solid #75b9d428;
  background:linear-gradient(180deg,#0f2637,#0b1725);
  box-shadow:inset 0 1px 0 #ffffff0a;
}
.nav-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;color:#92d9f0}
.nav-icon-multi svg{color:#9dcff7}
.nav-icon-board svg{color:#f1d18e}
.nav-icon-stats svg{color:#c5b3ff}
.arcade-navigation button[aria-selected=true] .nav-meta{color:#b9d8ea}
.arcade-navigation button[aria-selected=true] .nav-icon{border-color:#8bd7ee40;background:linear-gradient(180deg,#123249,#0c1f31)}

.arcade-card .card-tag{font-size:.51rem;letter-spacing:.11em;color:#92afca}
.arcade-card .arcade-card-title{display:flex;align-items:center;gap:14px;min-width:0}
.arcade-card .arcade-card-title strong{margin:0;line-height:.98}
.icon-badge{
  width:66px;height:66px;display:grid;place-items:center;flex:0 0 66px;
  border:1px solid #82bfd63a;border-radius:16px;
  background:radial-gradient(circle at 50% 28%,rgba(139,215,238,.14),transparent 58%),linear-gradient(180deg,#0a1827,#0b1725);
  box-shadow:inset 0 1px 0 #ffffff08,0 12px 22px #00000018;
}
.icon-badge svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#98def3}
.icon-badge.facts{color:#98def3}
.icon-badge.crop{color:#9fd5f7}
.icon-badge.race{color:#cfb6ff;border-color:#b899ef3d;background:radial-gradient(circle at 50% 28%,rgba(207,182,255,.16),transparent 58%),linear-gradient(180deg,#12182d,#0d1525)}
.icon-badge.kmk{color:#efcf93;border-color:#ddb26c42;background:radial-gradient(circle at 50% 28%,rgba(239,207,147,.18),transparent 58%),linear-gradient(180deg,#1a1621,#0f1523)}
.arcade-card .card-mark{font:inherit}
.arcade-card p{margin-top:2px}
.arcade-card small{letter-spacing:.04em;line-height:1.6}
.rule-card .icon-badge{width:52px;height:52px;flex-basis:52px;border-radius:12px}
.rule-card .icon-badge svg{width:28px;height:28px;stroke-width:1.75}

@media(max-width:900px){
  .arcade-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .arcade-navigation button{min-height:60px}
}
@media(max-width:700px){
  .arcade-navigation button{padding:10px 11px;gap:10px;min-height:56px}
  .nav-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .nav-icon svg{width:19px;height:19px}
  .arcade-navigation .nav-title{font-size:.82rem;line-height:1.05}
  .arcade-navigation .nav-meta{font-size:.54rem}
  .icon-badge{width:58px;height:58px;flex-basis:58px;border-radius:14px}
  .icon-badge svg{width:30px;height:30px}
  .arcade-card .arcade-card-title{gap:12px}
  .arcade-card .arcade-card-title strong{font-size:1.85rem}
  .rule-card .icon-badge{width:44px;height:44px;flex-basis:44px}
  .rule-card .icon-badge svg{width:24px;height:24px}
}
@media(max-width:520px){
  .arcade-navigation{grid-template-columns:1fr}
  .arcade-navigation button{min-height:54px}
}

/* v137 — room header alignment + centered live question stage */
@media(min-width:1101px){
  #room-screen .room-topbar{
    display:grid;
    grid-template-columns:260px minmax(0,1fr) auto auto;
    grid-template-areas:"spacer title actions status";
    align-items:center;
    gap:14px 20px;
    padding:0 0 16px;
    margin:0 0 18px;
    border-bottom:0;
  }
  #room-screen .room-topbar>div:first-child{
    grid-area:title;
    min-width:0;
    min-height:78px;
    padding:14px 20px;
    border-radius:16px;
  }
  #room-screen .room-topbar>div:first-child .guess-kicker{
    margin-bottom:5px;
  }
  #room-screen .room-topbar>div:first-child h1{
    margin:0;
    font-size:clamp(2.15rem,3.3vw,3.25rem);
    line-height:.95;
  }
  #room-screen .room-actions{
    grid-area:actions;
    align-self:center;
    display:flex;
    align-items:center;
    gap:6px;
    width:max-content;
    max-width:100%;
    min-height:50px;
    margin:0;
    padding:5px;
    border-radius:13px;
  }
  #room-screen .room-actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:40px;
    height:40px;
    padding:0 14px;
    margin:0;
    line-height:1;
    white-space:nowrap;
  }
  #room-screen .room-topbar>p{
    grid-area:status;
    align-self:center;
    justify-self:end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    height:44px;
    margin:0;
    padding:0 14px;
    white-space:nowrap;
  }
}

#room-game .live-question,
body.is-room-playing #room-game .live-question{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  justify-content:center;
  align-items:stretch;
  gap:24px;
  padding:26px 28px 30px;
}
#room-game .live-image-wrap,
body.is-room-playing #room-game .live-image-wrap{
  width:100%;
  max-width:none;
  min-height:430px;
  max-height:none;
  margin:0;
  aspect-ratio:1/1;
  align-self:stretch;
}
#room-game .live-prompt,
body.is-room-playing #room-game .live-prompt{
  width:100%;
  max-width:none;
  min-height:430px;
  height:auto;
  margin:0;
  align-self:stretch;
  justify-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#room-game .live-image-wrap #live-image{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
}
#room-game .live-image-wrap.is-crop-round #live-image{
  object-fit:cover;
}
#room-game .live-image-wrap.is-answer-reveal #live-image{
  object-fit:contain;
  background:#071522;
}

@media(max-width:1100px){
  #room-screen .room-topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "title title"
      "actions status";
    gap:10px 12px;
    align-items:center;
    padding-bottom:14px;
    margin-bottom:16px;
  }
  #room-screen .room-topbar>div:first-child{
    grid-area:title;
    min-height:0;
    padding:14px 18px;
  }
  #room-screen .room-actions{
    grid-area:actions;
    margin:0;
  }
  #room-screen .room-topbar>p{
    grid-area:status;
    margin:0;
    justify-self:end;
    width:auto;
  }
  #room-game .live-question,
  body.is-room-playing #room-game .live-question{
    max-width:860px;
    grid-template-columns:1fr;
    padding:22px;
  }
  #room-game .live-image-wrap,
  body.is-room-playing #room-game .live-image-wrap,
  #room-game .live-prompt,
  body.is-room-playing #room-game .live-prompt{
    max-width:620px;
    min-height:0;
    margin-inline:auto;
  }
  #room-game .live-image-wrap,
  body.is-room-playing #room-game .live-image-wrap{
    aspect-ratio:1/1;
  }
}

@media(max-width:700px){
  #room-screen .room-topbar{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "actions"
      "status";
    gap:8px;
  }
  #room-screen .room-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  #room-screen .room-actions button{
    width:100%;
    min-height:42px;
  }
  #room-screen .room-topbar>p{
    justify-self:stretch;
    width:100%;
    justify-content:center;
  }
  #room-game .live-question,
  body.is-room-playing #room-game .live-question{
    padding:14px;
    gap:14px;
  }
  #room-game .live-image-wrap,
  body.is-room-playing #room-game .live-image-wrap{
    max-width:360px;
  }
}

/* v138 — align MHQ Arcade with the main mhqsquad.com design system */
.page-arcade{
  --arcade-site-bg:#070b12;
  --arcade-site-panel:#0d1520;
  --arcade-site-panel-light:#121d2b;
  --arcade-site-line:#213246;
  --arcade-site-blue:#00bdf2;
  --arcade-site-blue-hover:#269cff;
  --arcade-site-blue-light:#55d9ff;
  --arcade-site-gold:#ffc43d;
  --arcade-site-muted:#a5afbd;
  background:var(--arcade-site-bg);
}

/* Header: same flatter, structural language as the main MHQ header. */
.page-arcade .arcade-header{
  max-width:none;
  min-height:88px;
  padding:0 max(36px,calc((100vw - 1280px)/2));
  border:0;
  border-bottom:1px solid #ffffff10;
  border-radius:0;
  background:#080c13ed;
  box-shadow:none;
  backdrop-filter:blur(12px);
}
.page-arcade .arcade-header>a:first-child>img{width:112px;height:64px}
.page-arcade .arcade-wordmark{font-size:.72rem;letter-spacing:.18em;color:#a5afbd}
.page-arcade .arcade-wordmark b{color:var(--arcade-site-gold)}
.page-arcade .arcade-header-tools{gap:8px}
.page-arcade .arcade-home-link,
.page-arcade .arcade-return-active,
.page-arcade .arcade-reconnect-last,
.page-arcade .arcade-account button{
  min-height:44px;
  padding:10px 17px;
  border-radius:4px;
  border:1px solid #384759;
  background:transparent;
  color:#d6dce6;
  font-weight:700;
  transition:background .2s,border-color .2s,transform .2s,color .2s;
  box-shadow:none;
}
.page-arcade .arcade-home-link:hover,
.page-arcade .arcade-reconnect-last:hover,
.page-arcade .arcade-account button:hover{
  background:#172639;
  border-color:var(--arcade-site-blue);
  color:#fff;
  transform:translateY(-1px);
}
.page-arcade .arcade-return-active{
  border-color:#6e5820;
  background:#1b1810;
  color:#ffe17c;
}
.page-arcade .arcade-return-active:hover{
  background:#272015;
  border-color:var(--arcade-site-gold);
  transform:translateY(-1px);
}
.page-arcade .arcade-account>span{
  min-height:44px;
  padding:8px 11px;
  border:1px solid #26384c;
  border-radius:4px;
  background:#0b121c;
  box-shadow:none;
}
.page-arcade .arcade-header .account-default-profile{
  border-radius:50%!important;
  border:1px solid #314a63;
  background:#0b1520;
}

/* Main arcade section selector: closer to the main site's navigation, not an app pill bar. */
.page-arcade .arcade-navigation{
  position:sticky;
  top:88px;
  z-index:60;
  gap:0;
  padding:0;
  margin:12px 0 34px;
  border:1px solid var(--arcade-site-line);
  border-radius:5px;
  background:#0b111aee;
  box-shadow:none;
  overflow:hidden;
}
.page-arcade .arcade-navigation button{
  position:relative;
  flex:1;
  min-height:62px;
  padding:11px 18px;
  gap:11px;
  border:0;
  border-right:1px solid #ffffff0b;
  border-radius:0;
  background:transparent;
  color:#99a7ba;
  transform:none;
}
.page-arcade .arcade-navigation button:last-child{border-right:0}
.page-arcade .arcade-navigation button:hover{
  border-color:#ffffff0b;
  background:#101925;
  color:#fff;
  transform:none;
}
.page-arcade .arcade-navigation button[aria-selected=true]{
  background:#111c29;
  color:#fff;
  border-color:#ffffff0b;
  box-shadow:none;
}
.page-arcade .arcade-navigation button[aria-selected=true]:after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:2px;
  background:var(--arcade-site-blue);
}
.page-arcade .arcade-navigation .nav-icon{
  width:38px;
  height:38px;
  flex-basis:38px;
  border:1px solid #2c4055;
  border-radius:4px;
  background:#0b1520;
  box-shadow:none;
}
.page-arcade .arcade-navigation button[aria-selected=true] .nav-icon{
  border-color:#376494;
  background:#102033;
}
.page-arcade .arcade-navigation .nav-icon svg{color:var(--arcade-site-blue-light)}
.page-arcade .arcade-navigation .nav-title{font-size:.86rem}
.page-arcade .arcade-navigation .nav-meta{color:#7f8fa3;font-size:.58rem}

/* Reuse the main-site card language. */
.page-arcade .arcade-card,
.page-arcade .rule-card,
.page-arcade .rulebook-details article,
.page-arcade .profile-stat-card,
.page-arcade .profile-hero-card,
.page-arcade .history-card,
.page-arcade .history-round-card,
.page-arcade .history-standing-row,
.page-arcade .board-row,
.page-arcade .history-row{
  border:1px solid var(--arcade-site-line);
  border-radius:5px;
  background:linear-gradient(125deg,#111d2d,var(--arcade-site-panel));
  box-shadow:none;
}
.page-arcade .arcade-card{
  min-height:300px;
  padding:27px 28px 24px;
}
.page-arcade .arcade-card:hover{
  transform:translateY(-4px);
  border-color:#376494;
}
.page-arcade .arcade-card:after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:0;
  height:2px;
  background:var(--arcade-site-blue);
}
.page-arcade .arcade-card[data-game=race]:after{background:#a98bd3}
.page-arcade .arcade-card[data-game=kmk]:after{background:#d4ab6d}
.page-arcade .arcade-card .icon-badge,
.page-arcade .rule-card .icon-badge{
  border-radius:5px;
  background:#0b1520;
  border-color:#2c4055;
  box-shadow:none;
}
.page-arcade .arcade-card .icon-badge svg{color:var(--arcade-site-blue-light)}
.page-arcade .arcade-card .icon-badge.race svg{color:#c7b3e6}
.page-arcade .arcade-card .icon-badge.kmk svg{color:#d4ab6d}
.page-arcade .arcade-card p,
.page-arcade .rule-card p,
.page-arcade .rulebook-details p{color:var(--arcade-site-muted)}

/* Buttons: share the main site's square 4px button system. */
.page-arcade .guess-btn{
  min-height:54px;
  padding:14px 24px;
  border:1px solid var(--arcade-site-blue);
  border-radius:4px;
  background:var(--arcade-site-blue);
  color:#fff;
  font-weight:700;
  box-shadow:none;
  transition:background .2s,border-color .2s,transform .2s;
}
.page-arcade .guess-btn:hover:not(:disabled){
  background:var(--arcade-site-blue-hover);
  border-color:var(--arcade-site-blue-hover);
  transform:translateY(-2px);
}
.page-arcade .guess-btn:disabled{
  background:#343a42;
  border-color:#343a42;
  color:#818894;
  opacity:1;
}
.page-arcade .guess-quiet,
.page-arcade .room-actions .guess-quiet,
.page-arcade .board-filters button,
.page-arcade .reaction-row button,
.page-arcade .finish-actions .guess-quiet{
  min-height:44px;
  border:1px solid #384759;
  border-radius:4px;
  background:transparent;
  color:#d6dce6;
  box-shadow:none;
  transition:background .2s,border-color .2s,transform .2s,color .2s;
}
.page-arcade .guess-quiet:hover:not(:disabled),
.page-arcade .room-actions .guess-quiet:hover:not(:disabled),
.page-arcade .board-filters button:hover:not(:disabled),
.page-arcade .reaction-row button:hover:not(:disabled),
.page-arcade .finish-actions .guess-quiet:hover:not(:disabled){
  background:#172639;
  border-color:var(--arcade-site-blue);
  color:#fff;
  transform:translateY(-1px);
}
.page-arcade .room-actions .end-game-button,
.page-arcade #end-game{
  background:#201217;
  border-color:#713744;
  color:#ffb6c1;
}
.page-arcade .room-actions .end-game-button:hover,
.page-arcade #end-game:hover{
  background:#2f1820;
  border-color:#b95b70;
}

/* Forms and settings. */
.page-arcade input,
.page-arcade select,
.page-arcade textarea,
.page-arcade .hero-autocomplete .guess-input-row{
  border-radius:4px;
  border-color:#384759;
  background:#0b1520;
}
.page-arcade input:focus,
.page-arcade select:focus,
.page-arcade textarea:focus{
  border-color:var(--arcade-site-blue);
  outline:none;
  box-shadow:0 0 0 2px #00bdf21f;
}

/* Room/lobby panels. */
.page-arcade .room-topbar>div:first-child,
.page-arcade .room-actions,
.page-arcade .room-topbar>p,
.page-arcade .room-scoreboard,
.page-arcade #room-lobby,
.page-arcade #room-game,
.page-arcade #room-finish{
  border-radius:5px;
  background:var(--arcade-site-panel);
  border-color:var(--arcade-site-line);
  box-shadow:none;
}
.page-arcade .room-topbar>div:first-child{
  background:linear-gradient(125deg,#111d2d,var(--arcade-site-panel));
}
.page-arcade .room-actions{padding:5px;background:#0a111a}
.page-arcade .room-topbar>p{
  background:#0a111a;
  border-color:#2b3e52;
}
.page-arcade .room-scoreboard{
  background:linear-gradient(145deg,#101b29,#0b141e);
}
.page-arcade .player-row{
  border-radius:4px;
}
.page-arcade .player-row.is-me{
  background:#101d2b;
  border-color:#315577;
}
.page-arcade .player-rank,
.page-arcade .player-score-total{
  border-radius:4px;
}
.page-arcade #room-lobby{
  background:linear-gradient(125deg,#111d2d,var(--arcade-site-panel));
}
.page-arcade .settings-save-cell>button{border-radius:4px}

/* Live-game surfaces: keep hierarchy, remove the disconnected app-like rounding. */
.page-arcade .round-strip{
  border-radius:0;
  background:#101c2a;
  border-color:#263a4f;
  box-shadow:none;
}
.page-arcade #live-phase,
.page-arcade .round-timer{
  border-radius:4px;
  background:#0a111a;
}
.page-arcade .live-question{
  background:#0b121c;
  border-radius:0;
  box-shadow:none;
}
.page-arcade .live-image-wrap,
.page-arcade .live-prompt{
  border-radius:5px;
  border-color:#314157;
  background:linear-gradient(145deg,#101c2a,#0b141e);
  box-shadow:none;
}
.page-arcade .live-prompt .guess-kicker{border-radius:4px;background:#0b1520}
.page-arcade #live-options button{
  border-radius:4px;
  background:#111d2d;
  border-color:#314157;
  box-shadow:none;
}
.page-arcade #live-options button:not(:disabled):hover{
  background:#172639;
  border-color:#376494;
}
.page-arcade #live-options button.is-selected{
  background:#262116;
  border-color:#9d7a34;
  color:#ffe17c;
}
.page-arcade #live-options button.is-correct{
  background:#123126;
  border-color:#2e9d69;
}
.page-arcade #live-options button.is-wrong,
.page-arcade #live-options button.is-wrong-answer{
  background:#351820!important;
  border-color:#a6485d!important;
  color:#ffdbe1!important;
}
.page-arcade #live-options .answer-hero-icon{border-radius:4px}
.page-arcade .answer-result-badge,
.page-arcade .answer-player-chip,
.page-arcade .crop-player-result,
.page-arcade .reaction-row button{border-radius:4px}

/* Boards, stats and history. */
.page-arcade .board-filters,
.page-arcade .profile-overview,
.page-arcade .profile-headline-stats,
.page-arcade .history-detail{
  border-radius:5px;
}
.page-arcade .mhq-trophy{border-radius:4px}
.page-arcade .podium-card,
.page-arcade .finish-standing-row{
  border-radius:5px;
  box-shadow:none;
}

/* Dialogs and toasts also follow the site's flatter controls. */
.page-arcade .arcade-dialog{
  border-radius:6px;
  border-color:#314157;
  background:#0d1520;
  box-shadow:0 20px 60px #0008;
}
.page-arcade .auth-tabs button{border-radius:4px}
.page-arcade #arcade-toast{
  border-radius:4px;
  background:#101c2a;
  border-color:#384759;
}

@media(max-width:900px){
  .page-arcade .arcade-header{
    padding:8px 18px;
  }
  .page-arcade .arcade-navigation{
    top:auto;
    position:relative;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-arcade .arcade-navigation button:nth-child(2){border-right:0}
  .page-arcade .arcade-navigation button:nth-child(-n+2){border-bottom:1px solid #ffffff0b}
}
@media(max-width:700px){
  .page-arcade .arcade-header{padding:7px 12px}
  .page-arcade .arcade-navigation{grid-template-columns:1fr}
  .page-arcade .arcade-navigation button{
    border-right:0;
    border-bottom:1px solid #ffffff0b;
  }
  .page-arcade .arcade-navigation button:last-child{border-bottom:0}
  .page-arcade .arcade-navigation button[aria-selected=true]:after{left:12px;right:auto;width:3px;top:10px;bottom:10px;height:auto}
  .page-arcade .arcade-card{border-radius:5px}
}

/* v139 — unify room identity, controls and connection state into one aligned bar */
@media(min-width:1101px){
  #room-screen .room-topbar,
  body.is-room-playing #room-screen .room-topbar{
    display:grid;
    grid-template-columns:minmax(250px,1fr) auto auto;
    grid-template-areas:"title actions status";
    align-items:stretch;
    gap:0;
    width:calc(100% - 280px);
    margin:0 0 18px 280px;
    padding:0;
    min-height:92px;
    height:auto;
    border:1px solid var(--arcade-site-line,#29384a);
    border-radius:5px;
    background:linear-gradient(125deg,#111d2d,#0d1520 68%);
    box-shadow:none;
    overflow:hidden;
  }
  #room-screen .room-topbar>div:first-child,
  body.is-room-playing #room-screen .room-topbar>div:first-child{
    grid-area:title;
    min-width:0;
    min-height:92px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:16px 22px;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  #room-screen .room-topbar>div:first-child .guess-kicker,
  body.is-room-playing #room-screen .room-topbar>div:first-child .guess-kicker{
    margin:0 0 5px;
  }
  #room-screen .room-topbar>div:first-child h1,
  body.is-room-playing #room-screen .room-topbar>div:first-child h1{
    margin:0;
    font-size:clamp(2.15rem,3vw,3rem);
    line-height:.95;
  }
  #room-screen .room-actions,
  body.is-room-playing #room-screen .room-actions{
    grid-area:actions;
    display:flex;
    align-items:center;
    align-content:center;
    flex-wrap:wrap;
    gap:6px;
    width:auto;
    min-height:92px;
    margin:0;
    padding:14px 12px;
    border:0;
    border-left:1px solid var(--arcade-site-line,#29384a);
    border-radius:0;
    background:#0a111a;
    box-shadow:none;
  }
  #room-screen .room-actions button,
  body.is-room-playing #room-screen .room-actions button{
    min-height:42px;
    height:42px;
    margin:0;
    padding:0 14px;
    white-space:nowrap;
  }
  #room-screen .room-topbar>p,
  body.is-room-playing #room-screen .room-topbar>p{
    grid-area:status;
    align-self:stretch;
    justify-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:190px;
    min-height:92px;
    height:auto;
    margin:0;
    padding:0 16px;
    border:0;
    border-left:1px solid var(--arcade-site-line,#29384a);
    border-radius:0;
    background:#0a111a;
    box-shadow:none;
    text-align:center;
    line-height:1.45;
    white-space:normal;
  }
}

@media(max-width:1100px){
  #room-screen .room-topbar,
  body.is-room-playing #room-screen .room-topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "title title"
      "actions status";
    gap:0;
    width:100%;
    height:auto;
    margin:0 0 16px;
    padding:0;
    border:1px solid var(--arcade-site-line,#29384a);
    border-radius:5px;
    background:linear-gradient(125deg,#111d2d,#0d1520 68%);
    overflow:hidden;
  }
  #room-screen .room-topbar>div:first-child,
  body.is-room-playing #room-screen .room-topbar>div:first-child{
    grid-area:title;
    min-height:80px;
    padding:14px 18px;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
  }
  #room-screen .room-actions,
  body.is-room-playing #room-screen .room-actions{
    grid-area:actions;
    min-height:58px;
    margin:0;
    padding:8px 10px;
    border:0;
    border-top:1px solid var(--arcade-site-line,#29384a);
    border-radius:0;
    background:#0a111a;
  }
  #room-screen .room-topbar>p,
  body.is-room-playing #room-screen .room-topbar>p{
    grid-area:status;
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
    width:auto;
    margin:0;
    padding:0 14px;
    border:0;
    border-top:1px solid var(--arcade-site-line,#29384a);
    border-left:1px solid var(--arcade-site-line,#29384a);
    border-radius:0;
    background:#0a111a;
    white-space:normal;
    text-align:center;
  }
}

@media(max-width:700px){
  #room-screen .room-topbar,
  body.is-room-playing #room-screen .room-topbar{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "actions"
      "status";
  }
  #room-screen .room-actions,
  body.is-room-playing #room-screen .room-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:6px;
    border-left:0;
  }
  #room-screen .room-actions button,
  body.is-room-playing #room-screen .room-actions button{
    width:100%;
  }
  #room-screen .room-topbar>p,
  body.is-room-playing #room-screen .room-topbar>p{
    min-height:48px;
    border-left:0;
  }
}

/* v140 — repair live-game geometry after unified v139 room header */
@media(min-width:1101px){
  /* The v139 header is 92px+ tall. Do not force it into the old 62px live-game row. */
  body.is-room-playing #room-screen{
    height:auto;
    min-height:0;
    display:block;
    padding-top:0;
    overflow:visible;
  }

  /* Keep the room identity/actions/status as one full-width header above the match. */
  #room-screen .room-topbar,
  body.is-room-playing #room-screen .room-topbar{
    width:100%;
    margin:0 0 18px 0;
    grid-template-columns:minmax(300px,1fr) auto minmax(190px,230px);
    min-height:92px;
  }

  /* The lineup and live game start on the same baseline below the header. */
  #room-screen .room-layout,
  body.is-room-playing #room-screen .room-layout{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:18px;
    align-items:start;
    height:auto;
    min-height:0;
  }
  body.is-room-playing .room-scoreboard{
    position:sticky;
    top:84px;
    align-self:start;
    height:auto;
    min-height:0;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    overflow-x:hidden;
  }
  body.is-room-playing .room-main{
    min-width:0;
    width:100%;
  }
  body.is-room-playing #room-game{
    width:100%;
    height:auto;
    min-height:0;
    overflow:hidden;
  }

  /* Match status should be a clean single header, never under the room header. */
  body.is-room-playing .round-strip{
    display:grid;
    grid-template-columns:minmax(220px,1fr) auto 104px;
    align-items:center;
    gap:18px;
    min-height:86px;
    padding:14px 18px;
  }
  body.is-room-playing .round-strip>div:first-child{min-width:0}
  body.is-room-playing #live-phase{justify-self:center}
  body.is-room-playing .round-timer{justify-self:end}

  /* Center the gameplay content and keep image/question panels balanced. */
  body.is-room-playing .live-question{
    display:grid;
    grid-template-columns:minmax(360px,1fr) minmax(420px,1fr);
    gap:24px;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:560px;
    height:auto;
    padding:24px;
    overflow:visible;
  }
  body.is-room-playing .live-image-wrap{
    justify-self:center;
    align-self:center;
    width:min(100%,500px);
    min-height:0;
    max-height:none;
    aspect-ratio:1/1;
    margin:0;
    padding:14px;
  }
  body.is-room-playing .live-prompt{
    justify-self:stretch;
    align-self:center;
    width:100%;
    max-width:none;
    min-height:0;
    height:auto;
    padding:24px;
  }
  body.is-room-playing #live-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Notices/reactions belong below the match, not pinned into the viewport. */
  body.is-room-playing .room-notice{
    margin:12px 0 0;
  }
  body.is-room-playing .reaction-row{
    position:static;
    width:auto;
    margin:12px 0 0;
    justify-content:flex-end;
  }
}

@media(min-width:1101px) and (max-height:820px){
  body.is-room-playing .live-question{
    min-height:470px;
    padding:18px 20px;
    gap:20px;
  }
  body.is-room-playing .live-image-wrap{
    width:min(100%,430px);
  }
  body.is-room-playing .live-prompt{
    padding:20px;
  }
}

@media(max-width:1100px){
  body.is-room-playing #room-screen{
    height:auto;
    display:block;
    overflow:visible;
  }
  body.is-room-playing .room-layout{
    height:auto;
    min-height:0;
  }
  body.is-room-playing #room-game{
    height:auto;
    overflow:hidden;
  }
  body.is-room-playing .live-question{
    height:auto;
    overflow:visible;
  }
}

@media(max-width:900px){
  body.is-room-playing .room-layout{
    grid-template-columns:1fr;
  }
  body.is-room-playing .room-scoreboard{
    position:static;
    max-height:none;
  }
  body.is-room-playing .live-question{
    grid-template-columns:1fr;
    min-height:0;
  }
  body.is-room-playing .live-image-wrap{
    width:min(100%,440px);
    margin-inline:auto;
  }
}

/* v144 — final hero reveal sizing fix from v140 baseline.
   Must come after the v137/v140 live-game overrides so reveal cannot fall back to contain. */
#room-game .live-image-wrap.is-answer-reveal #live-image,
body.is-room-playing #room-game .live-image-wrap.is-answer-reveal #live-image{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center;
  background:transparent;
}


/* v145 — Arcade header links + sticky tab positioning */
.page-arcade .arcade-header>a:first-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.page-arcade .arcade-header>a:first-child>img{
  width:118px;
  height:68px;
  object-fit:contain;
}
.page-arcade .arcade-navigation{
  scroll-margin-top:100px;
}
#solo-panel,#multi-panel,#boards-panel,#profile-panel{
  scroll-margin-top:178px;
}
@media(max-width:900px){
  .page-arcade .arcade-navigation{scroll-margin-top:18px;}
  #solo-panel,#multi-panel,#boards-panel,#profile-panel{scroll-margin-top:18px;}
}

/* v146 — unify Arcade data pages, public profiles, rulebook hero and back-to-top */
.page-arcade .arcade-data-panel{
  position:relative;
  margin:8px 0 34px;
  padding:0 0 24px;
  border:1px solid var(--arcade-site-line,#29384a);
  border-radius:5px;
  background:linear-gradient(180deg,#0d1622,#0a121c 74%);
  overflow:hidden;
}
.page-arcade .arcade-data-panel:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,var(--arcade-site-blue,#00bdf2),#8bd7ee 52%,transparent 86%);
}
.page-arcade .arcade-data-panel>.arcade-section-head{
  margin:0;
  padding:25px 26px 22px;
  border-bottom:1px solid #ffffff12;
  background:linear-gradient(125deg,#111d2d,#0c151f 72%);
}
.page-arcade .arcade-data-panel>.arcade-section-head h2{
  margin-top:5px;
  color:#edf5ff;
}
.page-arcade .arcade-board-panel>.arcade-casual{
  margin:0;
  padding:14px 26px;
  border-bottom:1px solid #ffffff0d;
  background:#09111a;
  color:#849ab1;
}
.page-arcade .arcade-board-panel .arcade-table{
  padding:18px 20px 0;
  gap:9px;
}
.page-arcade .board-filters{
  display:flex;
  align-items:end;
  justify-content:flex-end;
  gap:8px;
  padding:8px;
  border:1px solid #2b3d50;
  border-radius:4px;
  background:#0a121b;
}
.page-arcade .board-filters label{gap:4px;color:#7f94aa}
.page-arcade .board-filters select{
  min-height:38px;
  height:38px;
  padding:7px 28px 7px 9px;
  font-size:.68rem;
}
.page-arcade .board-filters>button{
  min-height:38px;
  height:38px;
  padding:0 13px;
}
.page-arcade .board-row{
  position:relative;
  min-height:72px;
  padding:12px 15px;
  border-color:#2b3d50;
  background:#0d1825;
  transition:background .18s,border-color .18s,transform .18s;
}
.page-arcade .board-row:before{
  content:"";
  position:absolute;
  left:0;top:8px;bottom:8px;
  width:2px;
  background:#38526a;
}
.page-arcade .board-row:hover{
  transform:translateY(-1px);
  border-color:#3f6682;
  background:#111f2e;
}
.page-arcade .board-row.board-top-1:before{background:#e3bd64}
.page-arcade .board-row.board-top-2:before{background:#aebdcd}
.page-arcade .board-row.board-top-3:before{background:#b87955}
.page-arcade .board-score{color:#efd08f}
.page-arcade .board-profile-icon{
  border-radius:4px;
  background:#07111b;
  border-color:#334c62;
}

.page-arcade .arcade-stats-panel>.arcade-section-head{
  align-items:center;
}
.page-arcade .arcade-stats-panel>#profile-content,
.page-arcade .arcade-stats-panel>#match-history-list,
.page-arcade .arcade-stats-panel>#history-detail,
.page-arcade .arcade-stats-panel>.arcade-subtitle{
  margin-left:20px;
  margin-right:20px;
}
.page-arcade .arcade-stats-panel>#profile-content{margin-top:20px}
.page-arcade .arcade-stats-panel>.arcade-subtitle{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:26px;
  margin-bottom:13px;
  font-size:1.65rem;
}
.page-arcade .arcade-stats-panel>.arcade-subtitle:after{
  content:"";
  flex:1;
  height:1px;
  background:#ffffff10;
}
.page-arcade .profile-overview{
  border-radius:5px;
  border-color:#2f465c;
  background:linear-gradient(125deg,#101d2c,#0b151f 70%);
}
.page-arcade .profile-overview:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--arcade-site-blue,#00bdf2);
}
.page-arcade .profile-overview{position:relative;overflow:hidden}
.page-arcade .profile-stat-grid{gap:8px}
.page-arcade .profile-stat-card{
  min-height:88px;
  border-color:#293d50;
  background:#0c1824;
}
.page-arcade .profile-stat-card strong{color:#f2f7ff}
.page-arcade .profile-stat-card:nth-child(3n+1) strong{color:#bfefff}
.page-arcade .profile-hero-performance{
  padding-top:19px;
  border-top:1px solid #ffffff10;
}
.page-arcade .profile-hero-card{
  border-color:#293e52;
  background:#0c1824;
}
.page-arcade .profile-hero-card:hover{border-color:#3c617d;background:#101f2e}
.page-arcade .profile-hero-bar{border-radius:1px;background:#223448}
.page-arcade .profile-hero-bar i{border-radius:1px;background:linear-gradient(90deg,#00bdf2,#73d5b0)}
.page-arcade .history-card{
  border-color:#2b4054;
  background:#0c1824;
}
.page-arcade .history-card:hover{border-color:#3d6684;background:#102030}
.page-arcade .history-mode-mark{border-radius:4px;background:#08131e}
.page-arcade .history-detail{
  margin-top:18px;
  padding:20px;
  border:1px solid #2b4054;
  background:#0a141f;
}

/* Public profile now uses the same Arcade data-page language. */
.page-arcade-profile{
  background:#07101a;
}
.page-arcade-profile .arcade-header{
  border-bottom-color:#243446;
  background:#080f18f2;
}
.page-arcade-profile .arcade-header-tools{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.page-arcade-profile .profile-hub-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 15px;
  text-decoration:none;
}
.page-arcade-profile .arcade-public-profile{
  width:min(1180px,calc(100% - 48px));
  padding:26px 0 74px;
}
.public-profile-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
  padding:10px 0;
  border-bottom:1px solid #ffffff10;
}
.public-profile-toolbar>span{
  font-size:.55rem;
  letter-spacing:.15em;
  color:#718ba4;
}
.page-arcade-profile .profile-back{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  margin:0;
  padding:0 12px;
  border:1px solid #33475b;
  border-radius:4px;
  color:#c7d8e8;
  background:#0b1520;
  text-decoration:none;
}
.page-arcade-profile .profile-back:hover{border-color:#376494;background:#111f2e;color:#fff}
.page-arcade-profile .public-profile-hero{
  position:relative;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:center;
  gap:22px;
  margin-bottom:18px;
  padding:24px 26px;
  border:1px solid #2f465c;
  border-radius:5px;
  background:linear-gradient(125deg,#111d2d,#0b151f 72%);
  overflow:hidden;
}
.page-arcade-profile .public-profile-hero:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,#00bdf2,#8bd7ee 55%,transparent 90%);
}
.page-arcade-profile .public-profile-hero>img{
  width:82px;
  height:82px;
  padding:5px;
  border:1px solid #34516a;
  border-radius:4px;
  background:#07121d;
}
.page-arcade-profile .public-profile-hero h1{
  font-size:clamp(2.7rem,6vw,4.3rem);
  color:#eef7ff;
}
.page-arcade-profile .public-profile-hero p:last-child{color:#819ab2}
.page-arcade-profile .public-profile-overview,
.page-arcade-profile .profile-stat-card,
.page-arcade-profile .profile-hero-card,
.page-arcade-profile .public-history-card{
  border-radius:5px;
  border-color:#2c4155;
  background:#0c1824;
  box-shadow:none;
}
.page-arcade-profile .public-profile-overview{
  position:relative;
  overflow:hidden;
  background:linear-gradient(125deg,#101d2c,#0b151f);
}
.page-arcade-profile .public-profile-overview:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:#00bdf2;
}
.page-arcade-profile .public-profile-heroes,
.page-arcade-profile .public-profile-history{
  margin-top:24px;
  padding:0 0 18px;
  border:1px solid #293d50;
  border-radius:5px;
  background:#0a141f;
  overflow:hidden;
}
.page-arcade-profile .public-profile-heroes .arcade-section-head,
.page-arcade-profile .public-profile-history .arcade-section-head{
  margin:0 0 16px;
  padding:20px 22px 17px;
  border-bottom:1px solid #ffffff10;
  background:#0e1a28;
}
.page-arcade-profile .public-profile-heroes .profile-hero-grid,
.page-arcade-profile .public-profile-history .public-history-grid{
  padding:0 18px;
}
.page-arcade-profile .public-history-card:hover{border-color:#3c617d;background:#101f2e}

/* Rulebook left hero: use a clean Arcade crest instead of a clipped watermark. */
.page-arcade .rulebook-intro{
  background:linear-gradient(180deg,#102237,#0b1725);
}
.page-arcade .rulebook-watermark{
  position:relative;
  min-height:210px;
  margin-top:32px;
  padding:24px 22px 20px;
  justify-content:flex-end;
  border:1px solid #2a4054;
  border-radius:5px;
  background:
    linear-gradient(135deg,#0a1521 0 48%,#0c1a28 48% 52%,#09131e 52% 100%);
  overflow:hidden;
}
.page-arcade .rulebook-watermark:before{
  content:"";
  position:absolute;
  inset:14px;
  width:auto;
  height:auto;
  border:1px solid #ffffff08;
  border-radius:3px;
  box-shadow:none;
  transform:none;
  top:14px;left:14px;
}
.page-arcade .rulebook-crest{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:180px;
  height:116px;
}
.page-arcade .rulebook-crest:before{
  content:"";
  position:absolute;
  width:128px;
  height:128px;
  border:1px solid #00bdf21c;
  transform:rotate(45deg);
  background:#00bdf206;
}
.page-arcade .rulebook-watermark img{
  position:relative;
  z-index:1;
  width:170px;
  height:108px;
  top:auto;left:auto;
  transform:none;
  object-fit:contain;
  opacity:.31;
  filter:saturate(.82) brightness(1.05);
}
.page-arcade .rulebook-watermark span{
  color:#a9c6d855;
  font-size:1rem;
  letter-spacing:.13em;
}
.page-arcade .rulebook-watermark small{
  color:#7f9ab655;
  letter-spacing:.18em;
}

/* One Arcade-native back-to-top control for hub and public profile. */
.arcade-backtop{
  position:fixed;
  z-index:150;
  right:22px;
  bottom:22px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:1px;
  padding:0;
  border:1px solid #36506a;
  border-radius:4px;
  background:#0c1824ee;
  color:#dcecf8;
  box-shadow:0 12px 30px #0007;
  cursor:pointer;
  transition:transform .18s,background .18s,border-color .18s,color .18s;
  backdrop-filter:blur(8px);
}
.arcade-backtop[hidden]{display:none!important}
.arcade-backtop span{font-size:1.3rem;line-height:1;color:#8bd7ee}
.arcade-backtop b{font-size:.44rem;letter-spacing:.13em;color:#869db3}
.arcade-backtop:hover{
  transform:translateY(-2px);
  background:#112437;
  border-color:#00bdf2;
  color:#fff;
}
.arcade-backtop:focus-visible{outline:2px solid #8bd7ee;outline-offset:3px}

@media(max-width:900px){
  .page-arcade .arcade-data-panel>.arcade-section-head{align-items:flex-start;flex-direction:column}
  .page-arcade .board-filters{width:100%;justify-content:flex-start;overflow-x:auto}
  .page-arcade-profile .arcade-public-profile{width:min(100%,calc(100% - 28px))}
  .page-arcade-profile .arcade-header-tools{width:100%;justify-content:flex-end}
  .page-arcade .rulebook-watermark{min-height:176px}
  .page-arcade .rulebook-crest{top:15px;width:150px;height:96px}
  .page-arcade .rulebook-crest:before{width:104px;height:104px}
  .page-arcade .rulebook-watermark img{width:145px;height:90px}
}
@media(max-width:700px){
  .page-arcade .arcade-data-panel>.arcade-section-head{padding:19px 16px 16px}
  .page-arcade .arcade-board-panel>.arcade-casual{padding:12px 16px}
  .page-arcade .arcade-board-panel .arcade-table{padding:14px 12px 0}
  .page-arcade .arcade-stats-panel>#profile-content,
  .page-arcade .arcade-stats-panel>#match-history-list,
  .page-arcade .arcade-stats-panel>#history-detail,
  .page-arcade .arcade-stats-panel>.arcade-subtitle{margin-left:12px;margin-right:12px}
  .page-arcade-profile .public-profile-toolbar{align-items:flex-start;flex-direction:column;gap:8px}
  .page-arcade-profile .public-profile-hero{grid-template-columns:64px minmax(0,1fr);gap:13px;padding:18px 16px}
  .page-arcade-profile .public-profile-hero>img{width:58px;height:58px}
  .page-arcade-profile .public-profile-hero h1{font-size:2.5rem}
  .page-arcade-profile .public-profile-heroes .profile-hero-grid,
  .page-arcade-profile .public-profile-history .public-history-grid{padding:0 10px}
  .arcade-backtop{right:12px;bottom:12px;width:46px;height:46px}
}

/* v147 — clearer room action icons */
.page-arcade .room-actions .room-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  white-space:nowrap;
}
.page-arcade .room-action-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:grid;
  place-items:center;
  border-radius:4px;
  color:#9fdcf0;
}
.page-arcade .room-action-icon svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-arcade .room-action-copy .room-action-icon{color:#b8d9ed}
.page-arcade .room-action-leave .room-action-icon{color:#d5e1ec}
.page-arcade .room-action-end .room-action-icon{color:#ff9aac}
.page-arcade .room-action-end:hover .room-action-icon{color:#ffc0cb}
@media(max-width:700px){
  .page-arcade .room-actions .room-action{gap:7px}
  .page-arcade .room-action-icon{width:18px;height:18px;flex-basis:18px}
  .page-arcade .room-action-icon svg{width:16px;height:16px}
}

/* v148 — header action icons */
.page-arcade .header-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.page-arcade .header-action-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-grid;
  place-items:center;
  color:#8fdcf3;
}
.page-arcade .header-action-icon svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-arcade .header-action-external{
  margin-left:1px;
  color:#a9c4d8;
  font-size:.76em;
}
.page-arcade #account-open .header-action-icon{color:#a7dff1}
.page-arcade .arcade-home-link:hover .header-action-icon,
.page-arcade #account-open:hover .header-action-icon{color:#d8f5ff}
@media(max-width:700px){
  .page-arcade .header-action{gap:7px}
  .page-arcade .header-action-icon{width:16px;height:16px;flex-basis:16px}
  .page-arcade .header-action-icon svg{width:15px;height:15px}
}

/* v150 — auth tab icons */
.auth-tabs button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
}
.auth-tab-icon{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:currentColor;
}
.auth-tab-icon svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.auth-tabs button.is-active .auth-tab-icon{color:#efd18f}
@media(max-width:560px){
  .auth-tabs{display:grid;grid-template-columns:1fr;gap:8px}
  .auth-tabs button{justify-content:flex-start;width:100%}
}

/* v151 — stable tab switch anchor; prevents panel-height jump/clamp */
#arcade-tab-anchor{height:0;scroll-margin-top:0;pointer-events:none;}

/* v153 — mobile polish + red Arcade branding */
.page-arcade{
  overflow-x:hidden;
}
.page-arcade .arcade-header>a:first-child>img{
  width:96px;
  height:64px;
  object-fit:contain;
}
.page-arcade .arcade-brand-hero{
  position:relative;
  display:block;
  transform:none;
  padding:0;
  overflow:hidden;
  border:1px solid #2d4962;
  border-radius:8px;
  background:#07111b;
  box-shadow:0 18px 42px #0006;
}
.page-arcade .arcade-brand-hero:before{
  content:none;
}
.page-arcade .arcade-brand-hero>img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border:0;
  border-radius:0;
  filter:none;
  box-shadow:none;
  transform:none;
}

/* Rulebook hero becomes a real contained image, never an overlapping watermark. */
.page-arcade .rulebook-watermark{
  position:relative;
  display:block;
  width:100%;
  min-height:0;
  aspect-ratio:4/3;
  margin-top:28px;
  padding:0;
  border:1px solid #2d4962;
  border-radius:6px;
  background:#07111b;
  overflow:hidden;
}
.page-arcade .rulebook-watermark:before,
.page-arcade .rulebook-watermark:after{
  content:none;
  display:none;
}
.page-arcade .rulebook-watermark .rulebook-hero-image{
  position:static;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  opacity:1;
  filter:none;
  transform:none;
}

@media(max-width:700px){
  .page-arcade .arcade-shell{
    width:calc(100% - 22px);
    max-width:100%;
  }
  .page-arcade .arcade-header{
    padding-inline:12px;
  }
  .page-arcade .arcade-header>a:first-child>img{
    width:78px;
    height:54px;
  }

  /* Keep the new homepage hero visible and proportionate on phones. */
  .page-arcade .arcade-hero{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:20px;
  }
  .page-arcade .arcade-brand-hero{
    display:block!important;
    width:100%;
    margin:2px 0 0;
    border-radius:6px;
  }
  .page-arcade .arcade-brand-hero>img{
    aspect-ratio:4/3;
    object-position:center;
  }

  /* Mode cards: never force two desktop columns on phone widths. */
  .page-arcade .arcade-game-cards,
  .page-arcade .arcade-game-cards[data-queue=solo],
  .page-arcade .arcade-game-cards[data-queue=multiplayer]{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px;
    width:100%;
  }
  .page-arcade .arcade-card{
    width:100%;
    min-width:0;
    min-height:0;
    padding:18px;
    gap:14px;
    overflow:hidden;
  }
  .page-arcade .arcade-card .arcade-card-title{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    gap:14px;
    width:100%;
    min-width:0;
  }
  .page-arcade .arcade-card .card-mark,
  .page-arcade .arcade-card .icon-badge{
    width:56px;
    height:56px;
    min-width:56px;
    flex-basis:56px;
  }
  .page-arcade .arcade-card .arcade-card-title strong,
  .page-arcade .arcade-card strong{
    min-width:0;
    max-width:100%;
    font-size:clamp(1.85rem,10vw,2.5rem);
    line-height:.98;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }
  .page-arcade .arcade-card p{
    font-size:.78rem;
    line-height:1.65;
  }
  .page-arcade .arcade-card small{
    font-size:.56rem;
    line-height:1.55;
  }
  .page-arcade .arcade-card b{
    font-size:.76rem;
  }

  /* Lobby settings: predictable full-width action controls on mobile. */
  .page-arcade .room-settings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px;
  }
  .page-arcade .room-settings-grid label:first-child,
  .page-arcade .settings-save-cell{
    grid-column:1/-1;
  }
  .page-arcade .settings-save-cell>button{
    width:100%;
  }
  .page-arcade .ready-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    gap:10px;
  }
  .page-arcade .ready-actions .guess-btn{
    width:100%;
    min-height:58px;
    margin:0;
  }

  /* Prevent native fields/selects from pushing the lobby wider than the viewport. */
  .page-arcade .room-settings-grid label,
  .page-arcade .room-settings-grid input,
  .page-arcade .room-settings-grid select,
  .page-arcade .settings-save-cell{
    min-width:0;
    max-width:100%;
  }
  .page-arcade .room-settings-grid select{
    width:100%;
    text-overflow:ellipsis;
  }

  /* Rulebook mobile layout: text first, branded hero second, no overlap/cropping. */
  .page-arcade .arcade-rulebook{
    display:block!important;
    width:100%;
    margin-top:30px;
    overflow:hidden;
  }
  .page-arcade .rulebook-intro{
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    padding:22px 18px 20px;
    overflow:hidden;
  }
  .page-arcade .rulebook-intro>.guess-kicker,
  .page-arcade .rulebook-intro h2,
  .page-arcade .rulebook-lead{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .page-arcade .rulebook-intro h2{
    margin:10px 0 0;
    font-size:clamp(2.3rem,12vw,3.15rem);
    line-height:.98;
    overflow-wrap:normal;
    word-break:normal;
  }
  .page-arcade .rulebook-lead{
    margin-top:18px;
    font-size:.8rem;
    line-height:1.65;
  }
  .page-arcade .rulebook-watermark{
    position:relative!important;
    width:100%;
    aspect-ratio:4/3;
    margin:22px 0 0;
    min-height:0!important;
  }
  .page-arcade .rulebook-watermark .rulebook-hero-image{
    position:static!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .page-arcade .rulebook-content{
    width:100%;
    padding:14px;
  }
  .page-arcade .rulebook-modes{
    grid-template-columns:1fr!important;
  }
  .page-arcade .rule-card{
    grid-template-columns:46px minmax(0,1fr);
    width:100%;
    min-width:0;
  }
  .page-arcade .rule-card>div{
    min-width:0;
  }
  .page-arcade .rule-card h3,
  .page-arcade .rule-card p{
    overflow-wrap:anywhere;
  }
}

@media(max-width:420px){
  .page-arcade .room-settings-grid{
    grid-template-columns:1fr;
  }
  .page-arcade .room-settings-grid label:first-child,
  .page-arcade .settings-save-cell{
    grid-column:1;
  }
  .page-arcade .arcade-card .arcade-card-title{
    grid-template-columns:50px minmax(0,1fr);
    gap:12px;
  }
  .page-arcade .arcade-card .card-mark,
  .page-arcade .arcade-card .icon-badge{
    width:50px;
    height:50px;
    min-width:50px;
    flex-basis:50px;
  }
  .page-arcade .arcade-card .arcade-card-title strong,
  .page-arcade .arcade-card strong{
    font-size:clamp(1.65rem,9.5vw,2.15rem);
  }
}

/* v154 stable tab-switch anchor */
.arcade-tabs-anchor{display:block;height:0;scroll-margin-top:0;pointer-events:none}

/* v157 — dedicated mobile UX pass */
@media(max-width:700px){
  html{scroll-padding-top:118px}
  .page-arcade{overflow-x:hidden}
  .page-arcade .arcade-shell{width:calc(100% - 24px)}

  /* Compact header: logo + essential actions, no clipped account text. */
  .page-arcade .arcade-header{
    min-height:64px;
    padding:6px 12px;
    gap:8px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
  }
  .page-arcade .arcade-header>a:first-child>img{width:64px;height:46px}
  .page-arcade .arcade-wordmark{display:none}
  .page-arcade .arcade-header-tools{margin-left:auto;gap:6px}
  .page-arcade #mhq-home-link{
    width:38px;min-width:38px;height:38px;padding:0;justify-content:center;
  }
  .page-arcade #mhq-home-link>span:not(.header-action-icon){display:none}
  .page-arcade .arcade-return-active,
  .page-arcade .arcade-reconnect-last{
    min-height:38px;padding:7px 10px;font-size:.62rem;max-width:150px;
  }
  .page-arcade .arcade-account{gap:5px;min-width:0}
  .page-arcade .arcade-account>span{display:none!important}
  .page-arcade #account-open{
    max-width:none!important;width:auto!important;min-width:112px!important;
    height:38px!important;min-height:38px!important;padding:7px 10px!important;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    white-space:nowrap;overflow:visible;font-size:.66rem!important;
  }
  .page-arcade #account-open .header-action-label{white-space:nowrap;overflow:visible;text-overflow:clip}
  .page-arcade #account-logout{display:none!important}

  /* Hero is content-first on phones; decorative art is removed to save a full screen of scrolling. */
  .page-arcade .online-status{margin:10px 0 14px;font-size:.62rem}
  .page-arcade .arcade-hero{display:block;padding:12px 0 22px}
  .page-arcade .arcade-hero h1{font-size:clamp(2.55rem,12vw,3.4rem);line-height:.96;margin:8px 0 0}
  .page-arcade .arcade-hero>div>p:not(.guess-kicker){margin:16px 0;font-size:.78rem;line-height:1.65}
  .page-arcade .arcade-facts{gap:18px}
  .page-arcade .arcade-facts b{font-size:1.08rem}
  .page-arcade .arcade-art{display:none!important}

  /* One compact, horizontally-scrollable tab rail instead of four tall stacked rows. */
  .page-arcade .arcade-navigation{
    position:sticky;top:64px;z-index:70;
    display:flex!important;grid-template-columns:none!important;
    gap:6px;margin:0 -12px 18px;padding:7px 12px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;
    background:#08111bea;border:1px solid #274158;border-left:0;border-right:0;
    backdrop-filter:blur(14px);
  }
  .page-arcade .arcade-navigation::-webkit-scrollbar{display:none}
  .page-arcade .arcade-navigation button{
    flex:0 0 auto;width:auto;min-width:142px;min-height:50px;
    padding:8px 10px!important;border:1px solid #243d54!important;border-radius:6px!important;
    display:flex!important;align-items:center;gap:9px;text-align:left;
    scroll-snap-align:start;background:#0b1826!important;
  }
  .page-arcade .arcade-navigation button[aria-selected=true]{background:#14283b!important;border-color:#4c7590!important}
  .page-arcade .arcade-navigation button[aria-selected=true]:after{left:0!important;right:0!important;top:auto!important;bottom:-1px!important;width:auto!important;height:3px!important}
  .page-arcade .arcade-navigation .nav-icon{width:32px;height:32px;flex:0 0 32px;border-radius:5px}
  .page-arcade .arcade-navigation .nav-icon svg{width:18px;height:18px}
  .page-arcade .arcade-navigation .nav-title{font-size:.74rem;line-height:1.05}
  .page-arcade .arcade-navigation .nav-meta{font-size:.48rem;margin-top:2px}

  .page-arcade .arcade-section-head{display:block;margin:18px 0 14px}
  .page-arcade .arcade-section-head h2{font-size:2rem;line-height:1}
  .page-arcade .arcade-section-head>p{margin-top:10px;font-size:.68rem;line-height:1.55}

  /* Game mode cards become a snap carousel: clear cards without four screens of vertical scrolling. */
  .page-arcade .arcade-game-cards,
  .page-arcade .arcade-game-cards[data-queue=solo],
  .page-arcade .arcade-game-cards[data-queue=multiplayer]{
    display:flex!important;grid-template-columns:none!important;
    gap:10px;width:calc(100% + 12px);overflow-x:auto;overflow-y:hidden;
    padding:2px 12px 10px 0;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .page-arcade .arcade-game-cards::-webkit-scrollbar{display:none}
  .page-arcade .arcade-card{
    flex:0 0 min(82vw,300px);width:min(82vw,300px);min-height:230px;
    padding:16px;gap:11px;scroll-snap-align:start;
  }
  .page-arcade .arcade-card .arcade-card-title{grid-template-columns:46px minmax(0,1fr);gap:11px}
  .page-arcade .arcade-card .card-mark,.page-arcade .arcade-card .icon-badge{width:46px;height:46px;min-width:46px;flex-basis:46px}
  .page-arcade .arcade-card .arcade-card-title strong,.page-arcade .arcade-card strong{font-size:1.65rem;line-height:.98}
  .page-arcade .arcade-card p{font-size:.72rem;line-height:1.55}
  .page-arcade .arcade-card small{font-size:.51rem}
  .page-arcade .arcade-card b{font-size:.7rem;padding-top:11px}
  .page-arcade .arcade-casual{margin:10px 0 20px;font-size:.67rem}

  /* Room header is compact and action-first. */
  #room-screen .room-topbar,
  body.is-room-playing #room-screen .room-topbar{
    display:grid!important;grid-template-columns:1fr!important;gap:0!important;
    padding:0!important;margin:0 0 12px!important;border:1px solid #2d485f!important;
    border-radius:8px!important;overflow:hidden;background:#0d1a29!important;
  }
  #room-screen .room-topbar>div:first-child,
  body.is-room-playing #room-screen .room-topbar>div:first-child{
    min-height:0!important;padding:14px 16px!important;border:0!important;border-radius:0!important;background:#102238!important;
  }
  #room-screen .room-topbar>div:first-child h1,
  body.is-room-playing #room-screen .room-topbar>div:first-child h1{font-size:2.2rem!important;line-height:1!important}
  #room-screen .room-actions,
  body.is-room-playing #room-screen .room-actions{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;width:100%!important;padding:8px!important;margin:0!important;
    border:0!important;border-top:1px solid #263f55!important;border-radius:0!important;background:#091522!important;
  }
  #room-screen .room-actions button,
  body.is-room-playing #room-screen .room-actions button{
    width:100%!important;min-width:0!important;min-height:44px!important;padding:8px 5px!important;
    justify-content:center;font-size:.6rem!important;gap:5px!important;
  }
  #room-screen .room-action-icon svg{width:16px;height:16px}
  #room-screen .room-topbar>p,
  body.is-room-playing #room-screen .room-topbar>p{
    width:100%!important;min-height:36px!important;margin:0!important;padding:9px 12px!important;
    border:0!important;border-top:1px solid #263f55!important;border-radius:0!important;
    justify-content:center!important;text-align:center!important;font-size:.58rem!important;white-space:normal!important;
  }

  #room-screen .room-layout,
  body.is-room-playing #room-screen .room-layout{display:flex!important;flex-direction:column!important;gap:12px!important}
  #room-screen .room-scoreboard,
  body.is-room-playing #room-screen .room-scoreboard{
    position:static!important;width:100%!important;min-height:0!important;padding:12px!important;border-radius:8px!important;
  }
  #room-screen .scoreboard-head{margin:0 0 6px;padding:0 0 7px}
  #room-screen .scoreboard-head h2{font-size:1.45rem}
  #room-screen .player-row{min-height:42px;margin:3px 0;padding:6px 7px}
  #room-screen .player-row strong{font-size:.67rem}
  #room-screen .player-row small{font-size:.5rem}
  #room-screen .player-row>b{font-size:1rem}
  #room-screen .room-scoreboard>p{margin:6px 0 0;padding-top:7px;font-size:.58rem;line-height:1.45}

  /* Lobby: dense but readable 2-column settings on common phone widths. */
  .page-arcade #room-lobby{padding:18px 14px;border-radius:8px}
  .page-arcade #room-lobby>h2{font-size:2.05rem;line-height:1}
  .page-arcade #host-label{margin:10px 0 18px;font-size:.69rem}
  .page-arcade .room-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px 9px!important}
  .page-arcade .room-settings-grid label:first-child{grid-column:1/-1!important}
  .page-arcade .room-settings-grid label,.page-arcade .settings-save-cell{grid-template-rows:auto 46px!important;gap:5px!important}
  .page-arcade .setting-label{font-size:.59rem;white-space:normal}
  .page-arcade .setting-label small{font-size:.49rem}
  .page-arcade .room-settings-grid input,.page-arcade .room-settings-grid select,.page-arcade .settings-save-cell>button{
    height:46px!important;min-height:46px!important;padding:8px 10px!important;font-size:.72rem!important;
  }
  .page-arcade .settings-save-cell{grid-column:1/-1!important}
  .page-arcade .room-rule-note{margin-top:14px;font-size:.62rem;line-height:1.55}
  .page-arcade .ready-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:15px!important}
  .page-arcade .ready-actions .guess-btn{min-height:50px!important;font-size:.8rem!important}

  /* Playing state: compact round chrome, shorter image, 2-column choices. */
  body.is-room-playing .room-scoreboard{order:2}
  body.is-room-playing .room-main{order:1;width:100%}
  body.is-room-playing .round-strip{min-height:68px!important;padding:10px 12px!important;display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important}
  body.is-room-playing .round-strip>div:first-child{min-width:0!important}
  body.is-room-playing .round-strip h2{font-size:1.55rem!important}
  body.is-room-playing #live-phase{grid-column:1/2;grid-row:2;justify-self:start;min-width:0!important;min-height:24px!important;padding:5px 8px!important;font-size:.5rem!important}
  body.is-room-playing .round-timer{grid-column:2;grid-row:1/3;min-width:70px!important;padding:6px 8px!important}
  body.is-room-playing .round-timer strong{font-size:2.3rem!important}
  body.is-room-playing .live-question{grid-template-columns:1fr!important;gap:12px!important;padding:12px!important}
  body.is-room-playing .live-image-wrap{width:100%!important;max-width:420px!important;min-height:0!important;height:auto!important;aspect-ratio:4/5!important;margin:auto!important;padding:8px!important}
  body.is-room-playing .live-prompt{width:100%!important;min-height:0!important;padding:15px!important;border-radius:9px!important}
  body.is-room-playing .live-prompt h3{font-size:.92rem!important;line-height:1.45!important;margin-bottom:13px!important}
  body.is-room-playing #live-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  body.is-room-playing #live-options button{min-height:58px!important;padding:7px!important;font-size:.65rem!important;gap:7px!important}
  body.is-room-playing #live-options .answer-hero-icon{width:38px!important;height:42px!important;flex-basis:38px!important}
  body.is-room-playing #live-answer-state{font-size:.64rem!important;margin-top:9px!important}

  /* Rulebook is compressed substantially on mobile. */
  .page-arcade .arcade-rulebook{margin-top:22px}
  .page-arcade .rulebook-intro{padding:18px 15px 14px!important}
  .page-arcade .rulebook-intro h2{font-size:2.15rem!important}
  .page-arcade .rulebook-lead{margin-top:12px!important;font-size:.72rem!important}
  .page-arcade .rulebook-watermark{aspect-ratio:16/9!important;margin-top:14px!important}
  .page-arcade .rulebook-content{padding:10px!important}
  .page-arcade .rulebook-modes{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .page-arcade .rule-card{grid-template-columns:34px minmax(0,1fr)!important;gap:8px!important;padding:11px!important}
  .page-arcade .rule-card .icon-badge{width:34px!important;height:34px!important;min-width:34px!important}
  .page-arcade .rule-card h3{font-size:1rem!important;line-height:1.05!important}
  .page-arcade .rule-card p{font-size:.61rem!important;line-height:1.45!important}
  .page-arcade .rule-card small{font-size:.45rem!important}
  .page-arcade .rulebook-details{grid-template-columns:1fr!important;gap:7px!important}
  .page-arcade .rulebook-details article{padding:10px!important}

  /* Back-to-top should not cover primary controls. */
  .page-arcade .arcade-backtop{right:12px!important;bottom:78px!important;width:48px!important;height:48px!important;padding:4px!important}
  .page-arcade .arcade-backtop span{font-size:1.35rem!important}
  .page-arcade .arcade-backtop b{font-size:.44rem!important}

  /* Auth is a real mobile sheet: always starts at the top and scrolls internally. */
  .page-arcade .arcade-dialog{
    position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;
    height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;overflow-y:auto!important;overscroll-behavior:contain;
    background:#0b1624!important;
  }
  .page-arcade .arcade-dialog::backdrop{background:#02060bcc!important}
  .page-arcade .arcade-dialog .dialog-title{
    position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
    min-height:62px;padding:12px 16px;border-bottom:1px solid #29445b;background:#0b1624f5;backdrop-filter:blur(12px);
  }
  .page-arcade .arcade-dialog .dialog-title h2{font-size:1.8rem;margin:0}
  .page-arcade #auth-entry,.page-arcade #recovery-save,.page-arcade #auth-error{display:block;margin-inline:16px}
  .page-arcade .auth-tabs{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;
    margin:14px 0!important;
  }
  .page-arcade .auth-tabs button{
    width:100%!important;min-width:0!important;min-height:48px!important;padding:7px 5px!important;
    justify-content:center!important;gap:5px!important;font-size:.58rem!important;text-align:center!important;
  }
  .page-arcade .auth-tab-icon{width:17px;height:17px;flex-basis:17px}
  .page-arcade #auth-form{display:grid;gap:12px}
  .page-arcade #auth-form label,.page-arcade .guest-entry label{font-size:.66rem}
  .page-arcade #auth-form input,.page-arcade .guest-entry input{min-height:48px!important;padding:10px 12px!important}
  .page-arcade #auth-submit,.page-arcade #guest-continue{width:100%!important;min-height:50px!important}
  .page-arcade .guest-entry{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding-top:14px!important;margin-top:14px!important}
  .page-arcade .guest-entry label{grid-column:1/-1!important}
  .page-arcade .guest-entry button{grid-column:1/-1!important}
  .page-arcade .guest-entry p{grid-column:1/-1!important;font-size:.62rem!important;line-height:1.5!important}
  body.arcade-auth-open{overflow:hidden!important}
}

@media(max-width:370px){
  .page-arcade #account-open{min-width:96px!important;font-size:.58rem!important}
  .page-arcade .arcade-navigation button{min-width:128px}
  .page-arcade .room-settings-grid{grid-template-columns:1fr!important}
  .page-arcade .room-settings-grid label:first-child,.page-arcade .settings-save-cell{grid-column:1!important}
  .page-arcade .ready-actions{grid-template-columns:1fr!important}
  body.is-room-playing #live-options{grid-template-columns:1fr!important}
  .page-arcade .rulebook-modes{grid-template-columns:1fr!important}
}

/* v159 — repair mobile header/account and compact tab content */
@media(max-width:700px){
  /* The main header scrolls away on phone, so the sticky tab rail belongs at the viewport top. */
  .page-arcade .arcade-navigation{
    top:0!important;
    margin-bottom:14px!important;
  }
  .page-arcade #solo-panel,
  .page-arcade #multi-panel,
  .page-arcade #boards-panel,
  .page-arcade #profile-panel{
    padding-top:2px;
  }
  .page-arcade .arcade-section-head{margin-top:12px!important}
  .page-arcade .arcade-section-head h2{font-size:1.72rem!important;line-height:1.02!important}

  /* Mobile header: identity first row, destination/actions second row. */
  .page-arcade .arcade-header{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:
      "logo account"
      "tools tools"!important;
    align-items:center!important;
    min-height:0!important;
    height:auto!important;
    padding:8px 12px!important;
    gap:8px 10px!important;
  }
  .page-arcade .arcade-header>a:first-child{
    grid-area:logo;
    align-self:center;
  }
  .page-arcade .arcade-header>a:first-child>img{width:66px!important;height:48px!important}
  .page-arcade .arcade-account{
    grid-area:account;
    justify-self:end;
    width:auto!important;
    max-width:100%;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    min-width:0;
  }
  .page-arcade .arcade-account.is-authenticated>span{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    min-height:38px!important;
    max-width:130px!important;
    padding:5px 8px!important;
    border:1px solid #31506a;
    border-radius:6px;
    background:#0c1927;
    color:#e7f3ff;
  }
  .page-arcade .arcade-account.is-authenticated .account-default-profile{
    display:block!important;
    width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;flex-basis:24px!important;
  }
  .page-arcade .arcade-account.is-authenticated .account-username{
    display:block!important;
    max-width:86px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.62rem!important;
  }
  .page-arcade .arcade-account.is-authenticated #account-open{
    width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;
    padding:0!important;
  }
  .page-arcade .arcade-account.is-authenticated #account-open .header-action-label{display:none!important}
  .page-arcade .arcade-account.is-authenticated #account-logout{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:58px!important;
    height:38px!important;min-height:38px!important;
    padding:6px 8px!important;
    font-size:.58rem!important;
    white-space:nowrap!important;
  }
  .page-arcade .arcade-account:not(.is-authenticated)>span{display:none!important}
  .page-arcade .arcade-account:not(.is-authenticated) #account-open{
    width:auto!important;min-width:116px!important;max-width:none!important;
  }

  .page-arcade .arcade-header-tools{
    grid-area:tools;
    width:100%!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0;
  }
  .page-arcade #mhq-home-link{
    display:inline-flex!important;
    width:auto!important;min-width:88px!important;height:38px!important;
    padding:0 9px!important;
    flex:0 0 auto;
  }
  .page-arcade #mhq-home-link>span:nth-child(2){display:inline!important;font-size:.58rem!important}
  .page-arcade #mhq-home-link .header-action-external{display:none!important}
  .page-arcade .arcade-return-active,
  .page-arcade .arcade-reconnect-last{
    flex:1 1 auto!important;
    width:auto!important;max-width:none!important;min-width:0!important;
    min-height:38px!important;height:38px!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .page-arcade .arcade-return-active .return-active-label,
  .page-arcade .arcade-reconnect-last .reconnect-last-label{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* Replace the cut-off sideways card carousel with a compact 2-column grid. */
  .page-arcade .arcade-game-cards,
  .page-arcade .arcade-game-cards[data-queue=solo],
  .page-arcade .arcade-game-cards[data-queue=multiplayer]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .page-arcade .arcade-card{
    width:100%!important;
    min-width:0!important;
    min-height:210px!important;
    flex:none!important;
    padding:12px!important;
    gap:9px!important;
  }
  .page-arcade .arcade-card .arcade-card-title{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
  }
  .page-arcade .arcade-card .card-mark,
  .page-arcade .arcade-card .icon-badge{
    width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important;
  }
  .page-arcade .arcade-card .card-mark svg,
  .page-arcade .arcade-card .icon-badge svg{width:22px!important;height:22px!important}
  .page-arcade .arcade-card .arcade-card-title strong,
  .page-arcade .arcade-card strong{
    font-size:1.28rem!important;
    line-height:1!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .page-arcade .arcade-card p{font-size:.62rem!important;line-height:1.42!important}
  .page-arcade .arcade-card small{font-size:.43rem!important;line-height:1.35!important}
  .page-arcade .arcade-card b{font-size:.62rem!important;padding-top:8px!important}

  /* Join form is a clean full-width row and cannot push content off-screen. */
  .page-arcade #join-form{width:100%!important;margin-top:10px!important}
  .page-arcade #join-form>div{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important}
  .page-arcade #join-code{width:100%!important;min-width:0!important}
  .page-arcade #join-form .guess-btn{min-width:112px!important;padding-inline:10px!important}
}

@media(max-width:380px){
  .page-arcade .arcade-game-cards,
  .page-arcade .arcade-game-cards[data-queue=solo],
  .page-arcade .arcade-game-cards[data-queue=multiplayer]{grid-template-columns:1fr!important}
  .page-arcade .arcade-card{min-height:190px!important}
  .page-arcade .arcade-account.is-authenticated>span{max-width:105px!important}
  .page-arcade .arcade-account.is-authenticated .account-username{max-width:60px!important}
  .page-arcade .arcade-account.is-authenticated #account-logout{min-width:50px!important;font-size:.53rem!important}
  .page-arcade #mhq-home-link{min-width:42px!important;width:42px!important;padding:0!important;justify-content:center!important}
  .page-arcade #mhq-home-link>span:nth-child(2){display:none!important}
}

/* v160 — remove mismatched dark patches behind hero cards and rulebook branding */
.page-arcade .arcade-art{
  background:transparent!important;
  isolation:isolate;
}
.page-arcade .arcade-art:before,
.page-arcade .arcade-art:after{
  content:none!important;
  display:none!important;
}

.page-arcade .rulebook-intro{
  background:#0f2135!important;
}
.page-arcade .rulebook-watermark{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:180px!important;
  height:auto!important;
  aspect-ratio:auto!important;
  margin-top:26px!important;
  padding:12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.page-arcade .rulebook-watermark:before,
.page-arcade .rulebook-watermark:after{
  content:none!important;
  display:none!important;
}
.page-arcade .rulebook-watermark .rulebook-hero-image{
  position:static!important;
  display:block!important;
  width:min(230px,78%)!important;
  height:auto!important;
  max-width:100%!important;
  max-height:170px!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:.68!important;
  filter:saturate(.9) brightness(.9)!important;
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
}

@media(max-width:700px){
  .page-arcade .rulebook-watermark{
    min-height:120px!important;
    margin-top:14px!important;
    padding:4px!important;
  }
  .page-arcade .rulebook-watermark .rulebook-hero-image{
    width:min(180px,72%)!important;
    max-height:115px!important;
  }
}

/* v161 — mobile header/auth repair + clearer MLBB mode cards */
.page-arcade .icon-badge{
  position:relative;
  overflow:hidden;
  border-radius:8px!important;
  background:linear-gradient(155deg,#10263a,#07131f)!important;
  box-shadow:inset 0 1px 0 #ffffff10,0 8px 18px #00000026!important;
}
.page-arcade .icon-badge:before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid currentColor;
  opacity:.12;
  clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);
}
.page-arcade .icon-badge svg{position:relative;z-index:1}
.page-arcade .icon-badge.facts{color:#65d9ff!important;border-color:#3a8ca9!important;background:linear-gradient(155deg,#10344a,#081723)!important}
.page-arcade .icon-badge.crop{color:#70c9ff!important;border-color:#3c77a7!important;background:linear-gradient(155deg,#102b45,#091724)!important}
.page-arcade .icon-badge.race{color:#c7a4ff!important;border-color:#7959a5!important;background:linear-gradient(155deg,#211a3a,#0c1424)!important}
.page-arcade .icon-badge.kmk{color:#f0c46f!important;border-color:#a67f3f!important;background:linear-gradient(155deg,#302515,#111723)!important}
.page-arcade .arcade-card[data-game=facts]{background:linear-gradient(145deg,#14283a,#0d1928)!important}
.page-arcade .arcade-card[data-game=crop]{background:linear-gradient(145deg,#132638,#0c1827)!important}
.page-arcade .arcade-card[data-game=race]{background:linear-gradient(145deg,#191d35,#0e1828)!important}
.page-arcade .arcade-card[data-game=kmk]{background:linear-gradient(145deg,#211f2b,#101826)!important}

@media(max-width:700px){
  /* One clean mobile header row. Website shortcut is intentionally hidden on phones. */
  .page-arcade .arcade-header{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:52px!important;
    height:52px!important;
    padding:5px 8px!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  .page-arcade .arcade-header>a:first-child{
    order:0;
    flex:0 0 52px!important;
    width:52px!important;
    height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .page-arcade .arcade-header>a:first-child>img{
    width:52px!important;
    height:40px!important;
    object-fit:contain!important;
  }
  .page-arcade .arcade-wordmark{display:none!important}
  .page-arcade .arcade-header-tools{
    order:1!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  .page-arcade #mhq-home-link{display:none!important}
  .page-arcade .arcade-return-active,
  .page-arcade .arcade-reconnect-last{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:66px!important;
    max-width:104px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 8px!important;
    border-radius:5px!important;
    font-size:.58rem!important;
    white-space:nowrap!important;
  }
  .page-arcade .arcade-return-active .return-active-label,
  .page-arcade .arcade-reconnect-last .reconnect-last-label{
    font-size:0!important;
    overflow:visible!important;
  }
  .page-arcade .arcade-return-active .return-active-label:after{
    content:"Return";
    font-size:.58rem;
  }
  .page-arcade .arcade-reconnect-last .reconnect-last-label:after{
    content:"Reconnect";
    font-size:.58rem;
  }
  .page-arcade .arcade-account{
    order:2!important;
    flex:0 1 auto!important;
    width:auto!important;
    max-width:190px!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  .page-arcade .arcade-account.is-authenticated>span{
    display:inline-flex!important;
    flex:0 1 78px!important;
    width:auto!important;
    min-width:0!important;
    max-width:78px!important;
    height:36px!important;
    min-height:36px!important;
    padding:4px 6px!important;
    gap:5px!important;
    border-radius:5px!important;
  }
  .page-arcade .arcade-account.is-authenticated .account-default-profile{
    width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;flex-basis:22px!important;
  }
  .page-arcade .arcade-account.is-authenticated .account-username{
    display:block!important;
    min-width:0!important;
    max-width:44px!important;
    font-size:.56rem!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .page-arcade .arcade-account.is-authenticated #account-open{
    display:inline-flex!important;
    width:34px!important;min-width:34px!important;max-width:34px!important;
    height:36px!important;min-height:36px!important;
    padding:0!important;
    border-radius:5px!important;
  }
  .page-arcade .arcade-account.is-authenticated #account-open .header-action-icon{margin:0!important}
  .page-arcade .arcade-account.is-authenticated #account-open .header-action-label{display:none!important}
  .page-arcade .arcade-account.is-authenticated #account-logout{
    display:inline-flex!important;
    width:auto!important;min-width:48px!important;max-width:52px!important;
    height:36px!important;min-height:36px!important;
    padding:0 6px!important;
    font-size:.52rem!important;
    white-space:nowrap!important;
    border-radius:5px!important;
  }
  .page-arcade .arcade-account:not(.is-authenticated){margin-left:auto!important}
  .page-arcade .arcade-account:not(.is-authenticated) #account-open{
    width:auto!important;
    min-width:112px!important;
    max-width:138px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 9px!important;
    border-radius:5px!important;
  }

  /* Mode icons read as compact game cards on phone. */
  .page-arcade .arcade-card .card-mark,
  .page-arcade .arcade-card .icon-badge{
    width:44px!important;
    height:52px!important;
    min-width:44px!important;
    flex-basis:44px!important;
    border-radius:7px!important;
  }
  .page-arcade .arcade-card .card-mark svg,
  .page-arcade .arcade-card .icon-badge svg{
    width:25px!important;
    height:25px!important;
    stroke-width:1.75!important;
  }
  .page-arcade .rule-card .icon-badge{
    width:46px!important;
    height:54px!important;
    flex-basis:46px!important;
  }
}

@media(max-width:380px){
  .page-arcade .arcade-header{padding-inline:6px!important;gap:3px!important}
  .page-arcade .arcade-header>a:first-child{flex-basis:46px!important;width:46px!important}
  .page-arcade .arcade-header>a:first-child>img{width:46px!important;height:36px!important}
  .page-arcade .arcade-return-active,.page-arcade .arcade-reconnect-last{min-width:58px!important;max-width:78px!important;padding-inline:5px!important}
  .page-arcade .arcade-account.is-authenticated>span{max-width:64px!important;flex-basis:64px!important;padding-inline:4px!important}
  .page-arcade .arcade-account.is-authenticated .account-username{max-width:32px!important;font-size:.51rem!important}
  .page-arcade .arcade-account.is-authenticated #account-open{width:31px!important;min-width:31px!important;max-width:31px!important}
  .page-arcade .arcade-account.is-authenticated #account-logout{min-width:43px!important;max-width:43px!important;font-size:.48rem!important;padding-inline:4px!important}
}

/* v162 — cinematic MLBB mode cards, based on the visual direction of the reference cards */
.page-arcade .arcade-card{
  --mode-accent:#55d8ff;
  --mode-art:url('/assets/mlbb-heroes/carmilla.webp');
  isolation:isolate;
  overflow:hidden;
  min-height:258px;
  padding:20px 20px 18px;
  gap:12px;
  border:1px solid color-mix(in srgb,var(--mode-accent) 34%,#29445e 66%)!important;
  border-radius:10px!important;
  background:
    linear-gradient(180deg,rgba(5,12,22,.18) 0%,rgba(6,15,26,.62) 42%,rgba(7,16,28,.96) 82%,#091522 100%),
    linear-gradient(90deg,rgba(4,13,24,.82),rgba(4,13,24,.16) 70%),
    var(--mode-art) center 22%/cover no-repeat!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.18);
}
.page-arcade .arcade-card[data-game=facts]{
  --mode-accent:#51d8ff;
  --mode-art:url('/assets/mlbb-heroes/carmilla.webp');
  background-position:center 17%!important;
}
.page-arcade .arcade-card[data-game=crop]{
  --mode-accent:#58d6ff;
  --mode-art:url('/assets/mlbb-heroes/hayabusa.webp');
  background-size:145% auto!important;
  background-position:55% 18%!important;
}
.page-arcade .arcade-card[data-game=race]{
  --mode-accent:#c49aff;
  --mode-art:url('/assets/mlbb-heroes/ling.webp');
  background-position:center 20%!important;
}
.page-arcade .arcade-card[data-game=kmk]{
  --mode-accent:#f2c667;
  --mode-art:url('/assets/mlbb-heroes/kagura.webp');
  background-position:center 14%!important;
}
.page-arcade .arcade-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(12,29,48,.26),transparent 42%),
    radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--mode-accent) 18%,transparent),transparent 34%);
}
.page-arcade .arcade-card:after{
  content:""!important;
  position:absolute!important;
  left:20px!important;
  right:20px!important;
  bottom:0!important;
  width:auto!important;
  height:2px!important;
  border:0!important;
  opacity:1!important;
  background:var(--mode-accent)!important;
  clip-path:none!important;
}
.page-arcade .arcade-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--mode-accent) 68%,#fff 8%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 38px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--mode-accent) 12%,transparent);
}
.page-arcade .arcade-card .card-tag{
  position:relative;
  z-index:2;
  margin-bottom:auto;
  color:#a8bfd6!important;
  font-size:.5rem!important;
  letter-spacing:.13em!important;
  text-shadow:0 1px 10px #000;
}
.page-arcade .arcade-card .arcade-card-title{
  position:relative;
  z-index:2;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:26px;
}
.page-arcade .arcade-card .card-mark,
.page-arcade .arcade-card .icon-badge{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  flex-basis:54px!important;
  border-radius:9px!important;
  color:var(--mode-accent)!important;
  border:1px solid color-mix(in srgb,var(--mode-accent) 54%,transparent)!important;
  background:rgba(5,18,31,.82)!important;
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--mode-accent) 9%,transparent),0 8px 20px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(5px);
}
.page-arcade .arcade-card .card-mark:before,
.page-arcade .arcade-card .icon-badge:before{display:none!important}
.page-arcade .arcade-card .card-mark svg,
.page-arcade .arcade-card .icon-badge svg{
  width:27px!important;
  height:27px!important;
  color:var(--mode-accent)!important;
  stroke-width:1.8!important;
}
.page-arcade .arcade-card .arcade-card-title strong,
.page-arcade .arcade-card strong{
  font-size:1.8rem!important;
  line-height:.94!important;
  color:#f3f7ff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.82);
}
.page-arcade .arcade-card p{
  position:relative;
  z-index:2;
  max-width:92%;
  margin:0!important;
  color:#c1cee0!important;
  font-size:.7rem!important;
  line-height:1.55!important;
  text-shadow:0 1px 8px #000;
}
.page-arcade .arcade-card small{
  position:relative;
  z-index:2;
  margin-top:2px!important;
  color:#9bb2cc!important;
  font-size:.47rem!important;
  letter-spacing:.035em!important;
  text-shadow:0 1px 7px #000;
}
.page-arcade .arcade-card b{
  position:relative;
  z-index:2;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-top:2px!important;
  padding-top:11px!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  color:#f4d891!important;
  font-size:.72rem!important;
  text-shadow:0 1px 7px #000;
}
.page-arcade .arcade-card b>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 30px;
  border:1px solid color-mix(in srgb,var(--mode-accent) 66%,transparent);
  border-radius:50%;
  color:var(--mode-accent);
  background:rgba(5,18,31,.76);
  font-size:.92rem;
  line-height:1;
  box-shadow:0 0 18px color-mix(in srgb,var(--mode-accent) 10%,transparent);
}

@media(max-width:700px){
  .page-arcade .arcade-card{
    min-height:204px!important;
    padding:13px 13px 12px!important;
    gap:8px!important;
    border-radius:8px!important;
    background-size:cover!important;
  }
  .page-arcade .arcade-card[data-game=crop]{background-size:155% auto!important}
  .page-arcade .arcade-card:after{left:13px!important;right:13px!important}
  .page-arcade .arcade-card .card-tag{
    font-size:.42rem!important;
    line-height:1.15!important;
    min-height:18px;
  }
  .page-arcade .arcade-card .arcade-card-title{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:8px!important;
    margin-top:12px!important;
  }
  .page-arcade .arcade-card .card-mark,
  .page-arcade .arcade-card .icon-badge{
    width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important;
  }
  .page-arcade .arcade-card .card-mark svg,
  .page-arcade .arcade-card .icon-badge svg{width:22px!important;height:22px!important}
  .page-arcade .arcade-card .arcade-card-title strong,
  .page-arcade .arcade-card strong{font-size:1.22rem!important;line-height:.95!important}
  .page-arcade .arcade-card p{
    max-width:100%;
    font-size:.58rem!important;
    line-height:1.4!important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .page-arcade .arcade-card small{font-size:.39rem!important;line-height:1.3!important}
  .page-arcade .arcade-card b{font-size:.6rem!important;padding-top:8px!important}
  .page-arcade .arcade-card b>span{width:25px;height:25px;flex-basis:25px;font-size:.76rem}
}

@media(max-width:390px){
  .page-arcade .arcade-card{min-height:188px!important}
  .page-arcade .arcade-card .arcade-card-title strong,
  .page-arcade .arcade-card strong{font-size:1.08rem!important}
  .page-arcade .arcade-card p{-webkit-line-clamp:2}
  .page-arcade .arcade-card small{display:none!important}
}


/* v163 — use the full MHQ Arcade artwork in the rulebook intro */
.page-arcade .rulebook-watermark{
  width:100%!important;
  min-height:0!important;
  margin-top:28px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(139,215,238,.18)!important;
  border-radius:10px!important;
  background:#07111d!important;
}
.page-arcade .rulebook-watermark .rulebook-hero-image{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
@media(max-width:700px){
  .page-arcade .rulebook-watermark{
    margin-top:16px!important;
    border-radius:8px!important;
  }
  .page-arcade .rulebook-watermark .rulebook-hero-image{
    width:100%!important;
    max-height:none!important;
  }
}


/* v164 — blurred MLBB hero art cards + separate main-site mobile shortcut */
.page-arcade .arcade-card{
  --mode-pos:center 18%;
  --mode-size:cover;
  background:
    linear-gradient(180deg,rgba(7,17,29,.22) 0%,rgba(7,17,29,.52) 38%,rgba(7,17,29,.88) 74%,#08131f 100%),
    linear-gradient(90deg,rgba(5,14,24,.72),rgba(5,14,24,.30) 68%,rgba(5,14,24,.46))!important;
}
.page-arcade .arcade-card[data-game=facts]{--mode-pos:center 16%;--mode-size:cover}
.page-arcade .arcade-card[data-game=crop]{--mode-pos:55% 18%;--mode-size:145% auto}
.page-arcade .arcade-card[data-game=race]{--mode-pos:center 18%;--mode-size:cover}
.page-arcade .arcade-card[data-game=kmk]{--mode-pos:center 13%;--mode-size:cover}
.page-arcade .arcade-card:before{
  content:""!important;
  position:absolute!important;
  inset:-10px!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(6,15,26,.08),rgba(6,15,26,.30) 36%,rgba(6,15,26,.78) 83%,rgba(6,15,26,.94)),
    var(--mode-art) var(--mode-pos)/var(--mode-size) no-repeat!important;
  filter:blur(3.4px) brightness(.78) saturate(.92)!important;
  transform:scale(1.055)!important;
  opacity:.92!important;
}
.page-arcade .arcade-card>*{position:relative;z-index:2}
.page-arcade .arcade-card:after{z-index:3!important}
.page-arcade .arcade-card:hover:before{
  filter:blur(2.7px) brightness(.84) saturate(1.02)!important;
  transform:scale(1.07)!important;
}

@media(max-width:700px){
  /* Arcade logo always remains Arcade home. The globe is the separate main-site shortcut. */
  .page-arcade #mhq-home-link{
    display:inline-flex!important;
    flex:0 0 36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:5px!important;
    overflow:hidden!important;
  }
  .page-arcade #mhq-home-link>span:not(.header-action-icon){display:none!important}
  .page-arcade #mhq-home-link .header-action-icon{
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
    margin:0!important;
  }
  .page-arcade #mhq-home-link .header-action-icon svg{width:17px!important;height:17px!important}
  .page-arcade .arcade-card:before{
    inset:-8px!important;
    filter:blur(3px) brightness(.76) saturate(.9)!important;
    transform:scale(1.06)!important;
  }
}

/* v166 — one consistent mode-icon system across cards + rulebook, including mobile */
.page-arcade .arcade-card .icon-badge,
.page-arcade .rule-card .icon-badge{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  flex:0 0 54px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  border:1px solid color-mix(in srgb,currentColor 54%,transparent)!important;
  background:rgba(5,18,31,.84)!important;
  box-shadow:inset 0 0 18px color-mix(in srgb,currentColor 9%,transparent),0 8px 20px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(5px)!important;
  overflow:hidden!important;
}
.page-arcade .arcade-card .icon-badge:before,
.page-arcade .rule-card .icon-badge:before{display:none!important}
.page-arcade .arcade-card .icon-badge svg,
.page-arcade .rule-card .icon-badge svg{
  width:27px!important;
  height:27px!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.page-arcade .arcade-card .icon-badge.facts,
.page-arcade .rule-card .icon-badge.facts{color:#51d8ff!important}
.page-arcade .arcade-card .icon-badge.crop,
.page-arcade .rule-card .icon-badge.crop{color:#58d6ff!important}
.page-arcade .arcade-card .icon-badge.race,
.page-arcade .rule-card .icon-badge.race{color:#c49aff!important}
.page-arcade .arcade-card .icon-badge.kmk,
.page-arcade .rule-card .icon-badge.kmk{color:#f2c667!important}
.page-arcade .rule-card{
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.page-arcade .rule-card .rule-card-mark{margin:0!important}

@media(max-width:700px){
  .page-arcade .arcade-card .card-mark,
  .page-arcade .arcade-card .icon-badge,
  .page-arcade .rule-card .icon-badge{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    flex:0 0 42px!important;
    border-radius:8px!important;
  }
  .page-arcade .arcade-card .card-mark svg,
  .page-arcade .arcade-card .icon-badge svg,
  .page-arcade .rule-card .icon-badge svg{
    width:22px!important;
    height:22px!important;
    stroke-width:1.8!important;
  }
  .page-arcade .arcade-card .arcade-card-title{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
  }
  .page-arcade .rule-card{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    padding:12px!important;
  }
  .page-arcade .rule-card small{margin-top:1px!important}
  .page-arcade .rule-card h3{line-height:1.08!important}
}

@media(max-width:390px){
  .page-arcade .arcade-card .card-mark,
  .page-arcade .arcade-card .icon-badge,
  .page-arcade .rule-card .icon-badge{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    flex-basis:38px!important;
  }
  .page-arcade .arcade-card .card-mark svg,
  .page-arcade .arcade-card .icon-badge svg,
  .page-arcade .rule-card .icon-badge svg{
    width:20px!important;
    height:20px!important;
  }
  .page-arcade .arcade-card .arcade-card-title,
  .page-arcade .rule-card{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
}

/* v173 — in-game background music: Between the Moves */
.page-arcade .arcade-bgm{
  position:fixed;
  z-index:86;
  left:max(18px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  width:min(430px,calc(100vw - 36px));
  min-height:58px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 12px 9px 15px;
  border:1px solid #355775;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(10,25,41,.97),rgba(7,17,29,.97));
  box-shadow:0 14px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(139,215,238,.08);
}
.page-arcade .arcade-bgm[hidden]{display:none!important}
.page-arcade .arcade-bgm:before{
  content:"";
  width:5px;
  align-self:stretch;
  flex:0 0 5px;
  border-radius:999px;
  background:#e5322d;
  box-shadow:0 0 16px rgba(229,50,45,.34);
}
.page-arcade .arcade-bgm-copy{min-width:0;flex:1;display:grid;gap:1px}
.page-arcade .arcade-bgm-copy span{font-size:.47rem;letter-spacing:.16em;color:#8bd7ee;font-weight:800}
.page-arcade .arcade-bgm-copy strong{font:700 1rem/1.15 var(--display);color:#eef7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-arcade .arcade-bgm-actions{display:flex;align-items:center;gap:7px;min-width:0}
.page-arcade .arcade-bgm-button{
  width:38px;height:38px;min-width:38px;padding:0;display:grid;place-items:center;
  border:1px solid #3a5a77;border-radius:8px;background:#0c1c2d;color:#d9efff;
}
.page-arcade .arcade-bgm-button:hover{border-color:#73bad8;background:#10273d}
.page-arcade .arcade-bgm-speaker{width:19px;height:19px}
.page-arcade .arcade-bgm-volume{display:grid;grid-template-columns:minmax(72px,110px) 34px;gap:6px;align-items:center;margin:0}
.page-arcade .arcade-bgm-volume>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page-arcade .arcade-bgm-volume input{width:100%;min-width:72px;height:20px;padding:0;margin:0;accent-color:#8bd7ee;background:transparent;border:0}
.page-arcade .arcade-bgm-volume output{font-size:.55rem;color:#9eb8d0;text-align:right;font-variant-numeric:tabular-nums}
.page-arcade .arcade-bgm.is-muted:before{background:#71879b;box-shadow:none}
.page-arcade .arcade-bgm.has-error{opacity:.65}
.page-arcade .arcade-bgm audio{display:none}

@media(max-width:700px){
  .page-arcade .arcade-bgm{
    left:max(10px,env(safe-area-inset-left));
    bottom:max(10px,env(safe-area-inset-bottom));
    width:calc(100vw - 20px);
    min-height:52px;
    padding:7px 9px 7px 11px;
    gap:9px;
    border-radius:10px;
  }
  .page-arcade .arcade-bgm:before{width:4px;flex-basis:4px}
  .page-arcade .arcade-bgm-copy span{font-size:.42rem}
  .page-arcade .arcade-bgm-copy strong{font-size:.86rem}
  .page-arcade .arcade-bgm-button{width:34px;height:34px;min-width:34px;border-radius:7px}
  .page-arcade .arcade-bgm-volume{grid-template-columns:minmax(54px,82px) 30px;gap:4px}
  .page-arcade .arcade-bgm-volume input{min-width:54px}
  .page-arcade .arcade-bgm-volume output{font-size:.5rem}
  .page-arcade .arcade-backtop{bottom:76px!important}
}
@media(max-width:410px){
  .page-arcade .arcade-bgm-copy span{display:none}
  .page-arcade .arcade-bgm-copy strong{font-size:.78rem}
  .page-arcade .arcade-bgm-volume{grid-template-columns:56px}
  .page-arcade .arcade-bgm-volume output{display:none}
}

/* v175 — smaller in-game music controls + reliable repeat */
.page-arcade .arcade-bgm{
  width:min(332px,calc(100vw - 32px));
  min-height:44px;
  gap:9px;
  padding:6px 8px 6px 10px;
  border-radius:10px;
}
.page-arcade .arcade-bgm:before{width:3px;flex-basis:3px}
.page-arcade .arcade-bgm-copy{max-width:112px}
.page-arcade .arcade-bgm-copy span{font-size:.39rem;letter-spacing:.13em}
.page-arcade .arcade-bgm-copy strong{font-size:.78rem;line-height:1.05}
.page-arcade .arcade-bgm-actions{gap:5px}
.page-arcade .arcade-bgm-button{
  width:30px;height:30px;min-width:30px;border-radius:7px;font-size:.72rem;
}
.page-arcade .arcade-bgm-speaker{width:16px;height:16px}
.page-arcade .arcade-bgm-volume{grid-template-columns:72px 30px;gap:4px}
.page-arcade .arcade-bgm-volume input{min-width:72px;height:16px}
.page-arcade .arcade-bgm-volume output{font-size:.48rem}
@media(max-width:700px){
  .page-arcade .arcade-bgm{
    left:max(8px,env(safe-area-inset-left));
    bottom:max(8px,env(safe-area-inset-bottom));
    width:min(286px,calc(100vw - 16px));
    min-height:40px;
    padding:5px 7px 5px 8px;
    gap:6px;
    border-radius:9px;
  }
  .page-arcade .arcade-bgm-copy{max-width:88px}
  .page-arcade .arcade-bgm-copy span{display:none}
  .page-arcade .arcade-bgm-copy strong{font-size:.7rem}
  .page-arcade .arcade-bgm-button{width:28px;height:28px;min-width:28px;border-radius:6px}
  .page-arcade .arcade-bgm-volume{grid-template-columns:58px;gap:0}
  .page-arcade .arcade-bgm-volume input{min-width:58px;height:14px}
  .page-arcade .arcade-bgm-volume output{display:none}
  .page-arcade .arcade-backtop{bottom:60px!important}
}
@media(max-width:360px){
  .page-arcade .arcade-bgm{width:min(254px,calc(100vw - 12px))}
  .page-arcade .arcade-bgm-copy{max-width:72px}
  .page-arcade .arcade-bgm-copy strong{font-size:.64rem}
  .page-arcade .arcade-bgm-volume{grid-template-columns:46px}
  .page-arcade .arcade-bgm-volume input{min-width:46px}
}

/* v178 — phone game UI: keep background music, remove the in-game controller. */
@media(max-width:700px){
  .page-arcade .arcade-bgm{display:none!important}
  .page-arcade .arcade-backtop{bottom:max(10px,env(safe-area-inset-bottom))!important}
}

/* v179 — phones do not load/play Arcade game music; desktop music behavior is unchanged. */
@media(max-width:700px){.page-arcade .arcade-bgm{display:none!important}}

/* v180 — compact lobby moderation/host-transfer controls */
.page-arcade .player-row.has-admin-actions{
  grid-template-columns:18px minmax(0,1fr) auto auto;
  gap:7px;
}
.page-arcade .player-row.has-admin-actions .player-copy{grid-column:2}
.page-arcade .player-row.has-admin-actions .player-score{grid-column:3}
.page-arcade .player-admin-actions{
  grid-column:4;
  display:flex;
  align-items:center;
  gap:5px;
}
.page-arcade .player-row .room-player-action{
  grid-column:auto;
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #36546e;
  border-radius:6px;
  background:#0a1724;
  color:#b7d7ea;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.page-arcade .player-row .room-player-action:hover,
.page-arcade .player-row .room-player-action:focus-visible{transform:translateY(-1px);border-color:#69bfe0;background:#10273a;color:#e5f8ff}
.page-arcade .player-row .room-player-action.is-host{color:#e9c86f;border-color:#6d5b32;background:#1b180f}
.page-arcade .player-row .room-player-action.is-host:hover,
.page-arcade .player-row .room-player-action.is-host:focus-visible{border-color:#d6ad4f;background:#28200e;color:#ffe39a}
.page-arcade .player-row .room-player-action.is-remove{color:#e18b95;border-color:#633a43;background:#1d1116}
.page-arcade .player-row .room-player-action.is-remove:hover,
.page-arcade .player-row .room-player-action.is-remove:focus-visible{border-color:#cf6672;background:#32161d;color:#ffc7cd}
.page-arcade .room-player-action-icon{width:15px;height:15px;display:block}
@media(max-width:700px){
  .page-arcade .player-row.has-admin-actions{grid-template-columns:17px minmax(0,1fr) auto auto;gap:5px}
  .page-arcade .player-row .room-player-action{width:28px;height:28px;min-width:28px;min-height:28px}
  .page-arcade .room-player-action-icon{width:14px;height:14px}
}

/* ===== v181 MLBB Sketch — multiplayer drawing mode ===== */
.page-arcade .arcade-card[data-game=sketch]{
  --mode-accent:#ff625b;
  --mode-art:url('/assets/mlbb-heroes/zetian.webp');
  background-position:center 18%!important;
}
.page-arcade .arcade-card[data-game=sketch]:before{
  background:
    linear-gradient(180deg,rgba(6,15,26,.08),rgba(6,15,26,.28) 36%,rgba(6,15,26,.78) 83%,rgba(6,15,26,.94)),
    linear-gradient(115deg,rgba(16,21,38,.34),transparent 48%),
    repeating-linear-gradient(145deg,transparent 0 28px,rgba(255,98,91,.045) 28px 30px),
    radial-gradient(circle at 84% 18%,rgba(255,98,91,.2),transparent 34%),
    url('/assets/mlbb-heroes/zetian.webp') center 18%/cover no-repeat!important;
}
.page-arcade .icon-badge.sketch{color:#ff7871!important;border-color:#a94c4a!important;background:linear-gradient(155deg,#321b25,#101723)!important}
.page-arcade .icon-badge.sketch svg{color:#ff8c86!important}

.page-arcade .sketch-game{min-width:0}
.page-arcade .sketch-pick{
  min-height:430px;
  display:grid;
  align-content:center;
  gap:28px;
  padding:38px;
  border:1px solid #36526c;
  border-radius:0 0 13px 13px;
  background:
    radial-gradient(circle at 72% 16%,rgba(255,91,80,.11),transparent 31%),
    linear-gradient(145deg,#12263a,#0a1725 72%);
}
.page-arcade .sketch-pick[hidden]{display:none!important}
.page-arcade .sketch-pick-copy{max-width:680px}
.page-arcade .sketch-pick-copy h3{font:700 clamp(2rem,4vw,3.4rem)/1 var(--display);color:#f3f7ff;margin:8px 0 10px}
.page-arcade .sketch-pick-copy>p:last-child{color:#94abc3;font-size:.78rem;line-height:1.7}
.page-arcade .sketch-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.page-arcade .sketch-choice{min-width:0;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px;padding:14px;border:1px solid #34516d;border-radius:12px;background:#0c1a2a;color:#eef7ff;text-align:left;transition:.18s transform,.18s border-color,.18s background}
.page-arcade .sketch-choice:hover{transform:translateY(-3px);border-color:#ff7770;background:#132336}
.page-arcade .sketch-choice img{width:96px;height:96px;object-fit:cover;border-radius:9px;background:#08131f;border:1px solid #ffffff18}
.page-arcade .sketch-choice span{min-width:0;display:grid;gap:5px}
.page-arcade .sketch-choice small{font-size:.5rem;letter-spacing:.13em;color:#86cfe5}
.page-arcade .sketch-choice strong{font:700 1.55rem/1 var(--display);overflow-wrap:anywhere}

.page-arcade .sketch-play{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.65fr);gap:16px;align-items:start}
.page-arcade .sketch-play[hidden]{display:none!important}
.page-arcade .sketch-board-column,.page-arcade .sketch-side{min-width:0}
.page-arcade .sketch-board-column{border:1px solid #36526c;border-radius:12px;background:#0d1b2b;padding:14px}
.page-arcade .sketch-board-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.page-arcade .sketch-board-head>div:first-child{display:grid;gap:2px}
.page-arcade .sketch-board-head span{font-size:.48rem;letter-spacing:.14em;color:#7ebbd4}
.page-arcade .sketch-board-head strong{font-size:.9rem;color:#eef7ff}
.page-arcade .sketch-category-pill{border:1px solid #554448;background:#24151b;color:#ff9a94;border-radius:999px;padding:6px 10px;font-size:.49rem;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.page-arcade .sketch-canvas-shell{position:relative;width:100%;aspect-ratio:25/18;overflow:hidden;border-radius:10px;border:1px solid #41617d;background:#f8fbff;box-shadow:inset 0 0 0 1px #ffffff11,0 12px 25px #0004}
.page-arcade #sketch-canvas{display:block;width:100%;height:100%;background:#f8fbff;touch-action:none;cursor:crosshair}
.page-arcade .sketch-canvas-wait{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:5px;background:rgba(9,20,32,.9);color:#eaf4ff}
.page-arcade .sketch-canvas-wait[hidden]{display:none!important}
.page-arcade .sketch-canvas-wait strong{font:700 1.6rem/1 var(--display)}
.page-arcade .sketch-canvas-wait span{font-size:.68rem;color:#8faac4}
.page-arcade .sketch-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:8px;border:1px solid #2b465f;border-radius:9px;background:#091625}
.page-arcade .sketch-tools[hidden]{display:none!important}
.page-arcade .sketch-tool-group,.page-arcade .sketch-colors{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.page-arcade .sketch-tools button{min-width:34px;height:34px;border:1px solid #334e68;border-radius:7px;background:#0d1d2d;color:#dcecff;font-size:.75rem;font-weight:800}
.page-arcade .sketch-tools button.is-active{border-color:#79d8f3;background:#12324a;color:#8de4fb}
.page-arcade .sketch-colors button{width:24px!important;height:24px!important;min-width:24px!important;border-radius:50%!important;padding:0!important;background:var(--swatch)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.page-arcade .sketch-colors button.is-active{outline:2px solid #dcecff;outline-offset:2px}
.page-arcade .sketch-brush-size{display:flex;align-items:center;gap:6px;font-size:.48rem;font-weight:800;letter-spacing:.1em;color:#829fba;white-space:nowrap}
.page-arcade .sketch-brush-size input{width:90px;min-width:70px;min-height:20px;padding:0;border:0;background:transparent;accent-color:#ff625b}

.page-arcade .sketch-side{display:grid;gap:10px;position:sticky;top:12px}
.page-arcade .sketch-reference,.page-arcade .sketch-guess-card,.page-arcade .sketch-chat,.page-arcade .sketch-guess-form{border:1px solid #34506a;border-radius:10px;background:#0d1b2b}
.page-arcade .sketch-reference{padding:10px;display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:center}
.page-arcade .sketch-reference[hidden]{display:none!important}
.page-arcade .sketch-reference-image{grid-row:1/3;width:78px;height:78px;border-radius:9px;overflow:hidden;border:1px solid #ffffff18;background:#08131f}
.page-arcade .sketch-reference-image img{width:100%;height:100%;object-fit:cover}
.page-arcade .sketch-reference>div:nth-child(2){display:grid;gap:2px}
.page-arcade .sketch-reference span,.page-arcade .sketch-guess-card>span{font-size:.44rem;letter-spacing:.13em;color:#8bd7ee;font-weight:800}
.page-arcade .sketch-reference strong{font:700 1.35rem/1 var(--display);color:#fff;overflow-wrap:anywhere}
.page-arcade .sketch-reference small{font-size:.48rem;color:#ff8f87;font-weight:800;letter-spacing:.1em}
.page-arcade .sketch-reference p{grid-column:1/-1;margin:0;font-size:.58rem;color:#91a9c1}
.page-arcade .sketch-guess-card{padding:13px;display:grid;gap:6px;background:linear-gradient(145deg,#11263a,#0b1726)}
.page-arcade .sketch-guess-card strong{font:700 1.5rem/1 var(--display);letter-spacing:.12em;color:#f3f7ff;overflow-wrap:anywhere}
.page-arcade .sketch-guess-card small{font-size:.58rem;color:#8fa8c1;line-height:1.5}
.page-arcade .sketch-chat{height:270px;overflow:auto;padding:8px;display:grid;align-content:start;gap:5px}
.page-arcade .sketch-message{display:flex;gap:6px;align-items:baseline;padding:6px 7px;border-radius:6px;background:#ffffff04;font-size:.64rem;line-height:1.45}
.page-arcade .sketch-message b{color:#8bd7ee;flex:0 0 auto}
.page-arcade .sketch-message span{color:#c5d4e4;overflow-wrap:anywhere}
.page-arcade .sketch-message.is-correct{background:#123525;color:#83e6a8}
.page-arcade .sketch-message.is-system{background:#2a2113;color:#f1cf8b}
.page-arcade .sketch-message.is-correct strong,.page-arcade .sketch-message.is-system strong{font-size:.62rem}
.page-arcade .sketch-guess-form{padding:8px}
.page-arcade .sketch-guess-form label{display:block;font-size:.48rem;margin:0 0 5px;color:#8aa5bf}
.page-arcade .sketch-guess-form>div{display:flex;gap:6px}
.page-arcade .sketch-guess-form input{flex:1;min-width:0}
.page-arcade .sketch-guess-form button{min-width:74px;padding-inline:10px}
.page-arcade .sketch-reveal{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:center;margin-top:12px;padding:14px;border:1px solid #6f5740;border-radius:10px;background:linear-gradient(145deg,#211b17,#111927)}
.page-arcade .sketch-reveal[hidden]{display:none!important}
.page-arcade .sketch-reveal-image{width:110px;height:110px;border-radius:10px;overflow:hidden;background:#08131f;border:1px solid #ffffff1a}
.page-arcade .sketch-reveal-image img{width:100%;height:100%;object-fit:cover}
.page-arcade .sketch-reveal h3{font:700 2.2rem/1 var(--display);color:#fff;margin:4px 0 7px}
.page-arcade .sketch-reveal p:last-child{font-size:.68rem;color:#aebed0}

@media(max-width:900px){
  .page-arcade .sketch-play{grid-template-columns:1fr}
  .page-arcade .sketch-side{position:static;grid-template-columns:1fr 1fr}
  .page-arcade .sketch-chat,.page-arcade .sketch-guess-form{grid-column:1/-1}
  .page-arcade .sketch-chat{height:190px}
}
@media(max-width:700px){
  .page-arcade .sketch-pick{min-height:auto;padding:18px 12px;gap:18px}
  .page-arcade .sketch-pick-copy h3{font-size:2rem}
  .page-arcade .sketch-choice-grid{grid-template-columns:1fr;gap:8px}
  .page-arcade .sketch-choice{grid-template-columns:60px minmax(0,1fr);padding:8px;gap:10px;border-radius:9px}
  .page-arcade .sketch-choice img{width:60px;height:60px;border-radius:7px}
  .page-arcade .sketch-choice strong{font-size:1.2rem}
  .page-arcade .sketch-board-column{padding:7px;border-radius:9px}
  .page-arcade .sketch-board-head{margin:3px 2px 7px}
  .page-arcade .sketch-canvas-shell{aspect-ratio:4/3;border-radius:7px}
  .page-arcade .sketch-tools{position:sticky;bottom:4px;z-index:5;display:grid;grid-template-columns:1fr;gap:7px;padding:7px}
  .page-arcade .sketch-tool-group,.page-arcade .sketch-colors{justify-content:center}
  .page-arcade .sketch-brush-size{justify-content:center}
  .page-arcade .sketch-side{grid-template-columns:1fr;gap:8px}
  .page-arcade .sketch-chat,.page-arcade .sketch-guess-form{grid-column:auto}
  .page-arcade .sketch-reference{grid-template-columns:58px minmax(0,1fr);padding:8px}
  .page-arcade .sketch-reference-image{width:58px;height:58px}
  .page-arcade .sketch-reference strong{font-size:1.05rem}
  .page-arcade .sketch-guess-card{padding:10px}
  .page-arcade .sketch-guess-card strong{font-size:1.15rem}
  .page-arcade .sketch-chat{height:150px}
  .page-arcade .sketch-guess-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .page-arcade .sketch-reveal{grid-template-columns:72px minmax(0,1fr);padding:9px;gap:10px}
  .page-arcade .sketch-reveal-image{width:72px;height:72px}
  .page-arcade .sketch-reveal h3{font-size:1.55rem}
  body.is-room-playing .page-arcade .sketch-play{min-height:0}
}


/* v182 — hero-only Sketch + aligned full-height guessing chat */
.page-arcade .sketch-play{
  grid-template-columns:minmax(0,1.62fr) minmax(300px,.68fr);
  align-items:stretch;
}
.page-arcade .sketch-board-column{
  display:flex;
  flex-direction:column;
  height:100%;
}
.page-arcade .sketch-canvas-shell{flex:1;min-height:0}
.page-arcade .sketch-side{
  position:static;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
  height:100%;
}
.page-arcade .sketch-guess-card{display:none!important}
.page-arcade .sketch-reference{flex:0 0 auto}
.page-arcade .sketch-chat-panel{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #34506a;
  border-radius:10px;
  background:#0d1b2b;
}
.page-arcade .sketch-chat-head{
  flex:0 0 auto;
  display:grid;
  gap:5px;
  padding:13px 13px 11px;
  border-bottom:1px solid #29445d;
  background:linear-gradient(145deg,#11263a,#0b1726);
}
.page-arcade .sketch-chat-head>div{display:grid;gap:4px}
.page-arcade .sketch-chat-head span{font-size:.44rem;letter-spacing:.13em;color:#8bd7ee;font-weight:800}
.page-arcade .sketch-chat-head strong{font:700 1.15rem/1 var(--display);color:#f3f7ff}
.page-arcade .sketch-chat-head small{font-size:.58rem;line-height:1.45;color:#8fa8c1}
.page-arcade .sketch-chat{
  flex:1 1 auto;
  height:auto;
  min-height:180px;
  border:0;
  border-radius:0;
  background:#0b1827;
  padding:9px;
}
.page-arcade .sketch-guess-form{
  flex:0 0 auto;
  margin-top:auto;
  border:0;
  border-top:1px solid #29445d;
  border-radius:0;
  background:#0a1725;
  padding:10px;
}
.page-arcade .sketch-guess-form label.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.page-arcade .sketch-reference span{color:#8bd7ee}
.page-arcade .sketch-reference small{color:#ff8f87}
@media(max-width:900px){
  .page-arcade .sketch-play{grid-template-columns:1fr;align-items:start}
  .page-arcade .sketch-side{height:auto;min-height:0;display:flex}
  .page-arcade .sketch-chat-panel{min-height:260px}
  .page-arcade .sketch-chat{min-height:180px;height:auto}
}
@media(max-width:700px){
  .page-arcade .sketch-chat-panel{min-height:230px}
  .page-arcade .sketch-chat{min-height:150px}
  .page-arcade .sketch-chat-head{padding:10px}
  .page-arcade .sketch-chat-head strong{font-size:1rem}
}

/* v183 — Sketch stats + leaderboard */
.page-arcade .profile-mode-performance,.page-arcade .profile-sketch-performance{margin:22px 0}
.page-arcade .profile-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.page-arcade .profile-mode-card{min-width:0;border:1px solid #29465f;border-radius:10px;background:#0e1d2d;padding:13px;display:flex;align-items:center;gap:11px}
.page-arcade .profile-mode-icon{width:42px;height:42px;flex:0 0 42px}
.page-arcade .profile-mode-copy{min-width:0;display:grid;gap:3px}
.page-arcade .profile-mode-copy small{font-size:.46rem;letter-spacing:.1em;color:#82a4c1}
.page-arcade .profile-mode-copy strong{font:700 1.05rem/1.1 var(--display);color:#eef7ff}
.page-arcade .profile-mode-copy span{font-size:.55rem;line-height:1.45;color:#7f9bb5}
.page-arcade .profile-mode-card.mode-sketch{border-color:#6a536f;background:linear-gradient(145deg,#161f31,#201a2a)}
.page-arcade .profile-mode-card.mode-sketch .profile-mode-copy strong{color:#f2d4ff}
.page-arcade #board-difficulty-filter[hidden]{display:none!important}
@media(max-width:900px){.page-arcade .profile-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.page-arcade .profile-mode-grid{grid-template-columns:1fr}.page-arcade .profile-mode-card{padding:11px}.page-arcade .profile-mode-copy strong{font-size:.95rem}}


/* v185 — identical Solo/Multiplayer section geometry + stable lobby mode drafts */
@media(min-width:1051px){
  .page-arcade #solo-panel>.arcade-section-head,
  .page-arcade #multi-panel>.arcade-section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:end;
    gap:32px;
    min-height:102px;
    margin:30px 0 23px;
  }
  .page-arcade #solo-panel>.arcade-section-head>div,
  .page-arcade #multi-panel>.arcade-section-head>div{min-width:0}
  .page-arcade #solo-panel>.arcade-section-head>p,
  .page-arcade #multi-panel>.arcade-section-head>#join-form{
    width:320px;
    max-width:100%;
    justify-self:end;
    align-self:end;
    margin:0 0 2px;
  }
  .page-arcade #solo-panel>.arcade-section-head>p{
    line-height:1.55;
    min-height:44px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .page-arcade #multi-panel #join-form>div{
    display:grid;
    grid-template-columns:116px minmax(0,1fr);
    gap:8px;
  }
  .page-arcade #multi-panel #join-code{width:100%}
  .page-arcade #solo-panel>.arcade-game-cards,
  .page-arcade #multi-panel>.arcade-game-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
  }
  .page-arcade #solo-panel .arcade-card,
  .page-arcade #multi-panel .arcade-card{
    width:100%;
    height:100%;
    min-height:315px;
  }
}
@media(min-width:701px) and (max-width:1050px){
  .page-arcade #solo-panel>.arcade-game-cards,
  .page-arcade #multi-panel>.arcade-game-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


/* v197 — Public rooms rulebook card */
.page-arcade .rule-card-public{
  border-color:#3d705d66;
  background:linear-gradient(145deg,#102436,#0e2028);
}
.page-arcade .rule-card-public:hover{
  border-color:#67c59a88;
  background:linear-gradient(145deg,#132b40,#102832);
}
.page-arcade .rule-card .icon-badge.public{
  color:#8de0b2!important;
  border-color:#4b9b7566!important;
  background:linear-gradient(145deg,#0c2130,#102c29)!important;
}
.page-arcade .rule-card-public>div{
  min-width:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.page-arcade .rule-card-cta{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding:8px 11px;
  border:1px solid #4b9b7566;
  border-radius:7px;
  background:#3d8d681c;
  color:#d9f6e7;
  font:700 .62rem/1 var(--body);
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.page-arcade .rule-card-cta svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 17px;
}
.page-arcade .rule-card-cta b{
  font-size:.72rem;
  color:#8de0b2;
}
.page-arcade .rule-card-cta:hover{
  transform:translateY(-1px);
  border-color:#6fd4a5;
  background:#3d8d6833;
  color:#fff;
}
.page-arcade .rule-card-cta:focus-visible{
  outline:2px solid #8de0b2;
  outline-offset:2px;
}

/* v187 — clearer lobby save action + readiness status dots */
.page-arcade .settings-save-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid #42bde6!important;
  background:
    linear-gradient(135deg,rgba(0,189,242,.16),rgba(239,208,143,.08)),
    #0b1724!important;
  color:#eaf8ff!important;
  box-shadow:inset 0 1px 0 #ffffff0b,0 8px 18px #0000001f;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.page-arcade .settings-save-button:hover,
.page-arcade .settings-save-button:focus-visible{
  transform:translateY(-1px);
  border-color:#7ee1ff!important;
  background:
    linear-gradient(135deg,rgba(0,189,242,.24),rgba(239,208,143,.12)),
    #0d1c2b!important;
  box-shadow:inset 0 1px 0 #ffffff12,0 10px 24px #0000002b,0 0 0 2px #00bdf21a;
}
.page-arcade .settings-save-button:active{transform:translateY(0)}
.page-arcade .settings-save-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border:1px solid #4ec9ee66;
  border-radius:6px;
  background:#0a2233;
  color:#8fe8ff;
}
.page-arcade .settings-save-icon svg{width:16px;height:16px;display:block}
.page-arcade .settings-save-copy{display:grid;gap:1px;text-align:left;line-height:1.05}
.page-arcade .settings-save-copy strong{font-size:.76rem;color:#f1f8ff;font-weight:700}
.page-arcade .settings-save-copy small{font-size:.49rem;letter-spacing:.04em;color:#91aec8;font-weight:500}

.page-arcade .player-rank.is-ready-indicator{
  width:11px;
  height:11px;
  min-width:11px;
  min-height:11px;
  margin-inline:4px 3px;
  border:0;
  border-radius:50%;
  background:#e1b84f;
  box-shadow:0 0 0 4px #e1b84f12,0 0 10px #e1b84f45;
}
.page-arcade .player-rank.is-ready-indicator.is-ready{
  background:#55d49a;
  box-shadow:0 0 0 4px #55d49a12,0 0 11px #55d49a55;
}
.page-arcade .player-rank.is-ready-indicator.is-offline{
  background:#6f8497;
  box-shadow:0 0 0 4px #6f849712;
}
@media(max-width:700px){
  .page-arcade .settings-save-button{min-height:52px!important}
  .page-arcade .settings-save-icon{width:28px;height:28px;flex-basis:28px}
  .page-arcade .settings-save-copy strong{font-size:.73rem}
  .page-arcade .player-rank.is-ready-indicator{width:10px;height:10px;min-width:10px;min-height:10px;margin-inline:3px 2px}
}

/* v188 — explicit non-host quit action */
.page-arcade .room-actions .room-action-quit{
  border-color:#8f5962;
  color:#ffc3ca;
  background:#2b141966;
}
.page-arcade .room-actions .room-action-quit .room-action-icon{color:#ff9aac}
.page-arcade .room-actions .room-action-quit:hover{
  border-color:#d77a84;
  color:#ffe2e5;
  background:#451b236e;
}


/* v189 — lobby settings autosave live status */
.page-arcade .settings-live-cell{
  display:grid;
  grid-template-rows:22px 55px;
  gap:8px;
  min-width:0;
}
.page-arcade .settings-live-indicator{
  width:100%;height:55px;min-height:55px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid #31546d;border-radius:6px;
  background:linear-gradient(135deg,#0b1b29,#0b1724);
  color:#d9ecf8;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.page-arcade .settings-live-icon{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;
  border:1px solid #46b9dd55;border-radius:50%;background:#0a2233;color:#67d9f4;
}
.page-arcade .settings-live-icon svg{width:16px;height:16px;display:block}
.page-arcade .settings-live-copy{display:grid;gap:1px;text-align:left;line-height:1.05}
.page-arcade .settings-live-copy strong{font-size:.76rem;color:#edf8ff;font-weight:700}
.page-arcade .settings-live-copy small{font-size:.49rem;letter-spacing:.04em;color:#91aec8;font-weight:500}
.page-arcade .settings-live-cell[data-state="saved"] .settings-live-indicator{border-color:#3f806d;background:linear-gradient(135deg,#0e2825,#0b1724)}
.page-arcade .settings-live-cell[data-state="saved"] .settings-live-icon{border-color:#55d49a66;color:#62dfa2;background:#0d2b25}
.page-arcade .settings-live-cell[data-state="saving"] .settings-live-indicator{border-color:#b99a54;background:linear-gradient(135deg,#292313,#0b1724)}
.page-arcade .settings-live-cell[data-state="saving"] .settings-live-icon{border-color:#e1b84f66;color:#f0c65b;background:#2c2512}
.page-arcade .settings-live-cell[data-state="saving"] .settings-live-icon svg{animation:settings-live-pulse .8s ease-in-out infinite alternate}
.page-arcade .settings-live-cell[data-state="invalid"] .settings-live-indicator{border-color:#a85f67;background:linear-gradient(135deg,#2b171c,#0b1724)}
.page-arcade .settings-live-cell[data-state="invalid"] .settings-live-icon{border-color:#e97f8a66;color:#ff9ba5;background:#2e151a}
.page-arcade .settings-live-cell[data-state="offline"] .settings-live-indicator{border-color:#66798c;color:#aebdcb}
@keyframes settings-live-pulse{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.page-arcade .settings-live-cell[data-state="saving"] .settings-live-icon svg{animation:none}}
@media(max-width:700px){
 .page-arcade .settings-live-cell{grid-template-rows:auto 52px!important;gap:5px!important;grid-column:1/-1!important}
 .page-arcade .settings-live-indicator{height:52px;min-height:52px;justify-content:flex-start;padding:0 14px}
 .page-arcade .settings-live-icon{width:28px;height:28px;flex-basis:28px}
 .page-arcade .settings-live-copy strong{font-size:.73rem}
}
@media(max-width:460px){.page-arcade .settings-live-cell{grid-column:1!important}}


/* v190 — active non-host leave-with-reconnect action */
.page-arcade .room-actions .room-action-reconnect{
  border-color:#55738c;
  color:#cfe4f6;
  background:#10203366;
}
.page-arcade .room-actions .room-action-reconnect .room-action-icon{color:#8bd7ee}
.page-arcade .room-actions .room-action-reconnect:hover{
  border-color:#7ca6c3;
  color:#eef8ff;
  background:#17304780;
}

/* v194 — public room discovery + room visibility */
.page-arcade .create-room-visibility,
.page-arcade .lobby-visibility{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid #29445d;
  border-radius:6px;
  background:linear-gradient(135deg,#0f1e2d,#0b1623);
  padding:15px 17px;
}
.page-arcade .create-room-visibility{margin:-5px 0 18px}
.page-arcade .create-visibility-copy,
.page-arcade .lobby-visibility>div:first-child{display:grid;gap:3px;min-width:0}
.page-arcade .create-room-visibility .guess-kicker,
.page-arcade .lobby-visibility .guess-kicker{margin:0;font-size:.5rem;color:#79cfea}
.page-arcade .create-room-visibility strong,
.page-arcade .lobby-visibility strong{font-size:.83rem;color:#edf7ff}
.page-arcade .create-room-visibility small,
.page-arcade .lobby-visibility small{font-size:.61rem;line-height:1.5;color:#819db9}
.page-arcade .visibility-switch{display:flex;align-items:center;gap:5px;flex:0 0 auto;padding:4px;border:1px solid #263e54;border-radius:6px;background:#07111c}
.page-arcade .visibility-switch button{min-height:39px;padding:8px 13px;border:1px solid transparent;border-radius:4px;background:transparent;color:#8ca5be;font:600 .7rem/1 var(--body);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.page-arcade .visibility-switch button:hover{background:#101f2d;color:#e9f6ff}
.page-arcade .visibility-switch button.is-active{border-color:#4a7895;background:#132a3c;color:#f4fbff;box-shadow:inset 0 -2px 0 #55c6ed}
.page-arcade .visibility-switch button[data-create-visibility=public].is-active,
.page-arcade .visibility-switch button[data-room-visibility=public].is-active{border-color:#548e72;background:#112a24;box-shadow:inset 0 -2px 0 #75d4a5}
.page-arcade .visibility-switch button.requires-account{position:relative}
.page-arcade .visibility-switch button.requires-account:after{content:'ACCOUNT';font-size:.42rem;letter-spacing:.08em;color:#e4c77f;margin-left:2px}
.page-arcade .lobby-visibility{margin:-10px 0 24px;padding:12px 14px}
.page-arcade .lobby-visibility[hidden]{display:none!important}
.page-arcade .visibility-switch button:disabled{opacity:.45;cursor:not-allowed}

.page-arcade .public-rooms-panel{min-height:360px}
.page-arcade .public-rooms-panel>.arcade-section-head{margin-bottom:10px}
.page-arcade .public-room-note{margin-top:0;margin-bottom:18px}
.page-arcade .public-refresh{min-height:42px}
.page-arcade .public-room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.page-arcade .public-room-card{min-width:0;border:1px solid #2e4b63;border-radius:7px;background:linear-gradient(145deg,#132638,#0c1826);padding:18px;display:grid;gap:15px;position:relative;overflow:hidden}
.page-arcade .public-room-card:before{content:'';position:absolute;inset:0 0 auto;height:2px;background:#4cc6ed}
.page-arcade .public-room-card.mode-race:before{background:#bd91ec}
.page-arcade .public-room-card.mode-sketch:before{background:#ef6868}
.page-arcade .public-room-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.page-arcade .public-room-mode{display:flex;gap:11px;align-items:center;min-width:0}
.page-arcade .public-room-icon{width:42px;height:42px;flex:0 0 42px}
.page-arcade .public-room-mode>div{display:grid;gap:3px;min-width:0}
.page-arcade .public-room-mode small{font-size:.46rem;letter-spacing:.09em;color:#7799b7}
.page-arcade .public-room-mode strong{font:700 1.35rem/1 var(--display);color:#edf7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-arcade .public-room-capacity{flex:0 0 auto;border:1px solid #345671;border-radius:999px;padding:5px 8px;font-size:.6rem;color:#b8d5e7;background:#0b1825}
.page-arcade .public-room-host{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #ffffff0d;border-radius:5px;background:#08131f99}
.page-arcade .public-room-host-icon{width:34px;height:34px;border-radius:50%;border:1px solid #36536d;background:#0d1c2b}
.page-arcade .public-room-host>div{display:grid;gap:2px;min-width:0}
.page-arcade .public-room-host small{font-size:.45rem;letter-spacing:.1em;color:#6f91ad}
.page-arcade .public-room-host strong{font-size:.72rem;color:#dfeef9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-arcade .public-room-meta{display:flex;flex-wrap:wrap;gap:7px 12px;color:#7f9bb5;font-size:.58rem;line-height:1.45}
.page-arcade .public-room-meta span:last-child{margin-left:auto;color:#9db8ce}
.page-arcade .public-room-join{width:100%;min-height:44px;margin-top:auto}
.page-arcade .public-room-empty{grid-column:1/-1;min-height:210px;border:1px dashed #31516a;border-radius:7px;background:#0c1825;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:30px}
.page-arcade .public-empty-icon{width:58px;height:58px;flex:0 0 58px}
.page-arcade .public-empty-copy{display:grid;gap:6px}
.page-arcade .public-empty-copy small{font-size:.5rem;letter-spacing:.11em;color:#7598b5}
.page-arcade .public-empty-copy h3{font:700 2rem/1 var(--display);color:#edf7ff}
.page-arcade .public-empty-copy p{font-size:.7rem;line-height:1.6;color:#88a3bd}
.page-arcade .public-empty-create{white-space:nowrap}
.page-arcade #public-room-count{background:#17452f;color:#8de0b2;border:1px solid #397b59}

@media(max-width:1050px){
  .page-arcade .public-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .page-arcade .create-room-visibility,
  .page-arcade .lobby-visibility{align-items:stretch;flex-direction:column;gap:12px;padding:13px}
  .page-arcade .visibility-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .page-arcade .visibility-switch button{justify-content:center;width:100%}
  .page-arcade .public-room-grid{grid-template-columns:1fr;gap:10px}
  .page-arcade .public-room-card{padding:15px}
  .page-arcade .public-room-empty{grid-template-columns:1fr;text-align:left;gap:12px;padding:20px}
  .page-arcade .public-empty-create{width:100%}
}

/* v195 — stale-room flash guard during join/rejoin */
#room-screen.is-syncing-room{min-height:620px}
#room-screen.is-syncing-room>.room-topbar,#room-screen.is-syncing-room>.room-layout,#room-screen.is-syncing-room>.room-notice,#room-screen.is-syncing-room>.reaction-row{display:none!important}
.room-sync-state{min-height:520px;border:1px solid #35506a;border-radius:14px;background:radial-gradient(circle at 50% 20%,#17334b88,transparent 48%),linear-gradient(145deg,#12263a,#0a1725);display:grid;place-items:center;align-content:center;grid-template-columns:auto minmax(0,360px);gap:18px;padding:42px;color:#eaf6ff;text-align:left}
.room-sync-state[hidden]{display:none!important}
.room-sync-state .guess-kicker{margin:0 0 5px}.room-sync-state strong{display:block;font:700 2.1rem/1 var(--display);letter-spacing:.01em}.room-sync-state small{display:block;margin-top:8px;color:#8faac5;font-size:.72rem;line-height:1.6}
.room-sync-spinner{width:46px;height:46px;border-radius:50%;border:3px solid #38566e;border-top-color:#70d7f2;box-shadow:0 0 24px #3bc8ef22;animation:room-sync-spin .8s linear infinite}
@keyframes room-sync-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){#room-screen.is-syncing-room{min-height:500px}.room-sync-state{min-height:400px;grid-template-columns:1fr;text-align:center;justify-items:center;padding:30px 20px}.room-sync-state strong{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){.room-sync-spinner{animation:none;border-top-color:#70d7f2}}


/* v196 — host crown + explicit public-room quit lifecycle */
.page-arcade .player-name-line{display:flex;align-items:center;gap:6px;min-width:0}
.page-arcade .player-name-line>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-arcade .player-host-crown{width:16px;height:16px;flex:0 0 16px;display:inline-grid;place-items:center;color:#f2c861;filter:drop-shadow(0 0 5px #f2c86133)}
.page-arcade .player-host-crown .room-player-action-icon{width:14px;height:14px;display:block}
.page-arcade .player-host-crown .room-player-action-icon path{stroke-width:1.8}
@media(max-width:700px){.page-arcade .player-host-crown{width:14px;height:14px;flex-basis:14px}.page-arcade .player-host-crown .room-player-action-icon{width:12px;height:12px}}

/* v201 — public room browser cards now mirror Multiplayer create cards more closely */
.page-arcade .public-room-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.page-arcade .public-room-card{
  --room-accent:#51d8ff;
  --room-art:url('/assets/mlbb-heroes/carmilla.webp');
  --room-pos:center 16%;
  min-width:0;
  min-height:340px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  border:1px solid #35516b;
  border:1px solid color-mix(in srgb,var(--room-accent) 45%,#35516b 55%);
  border-radius:11px;
  background:linear-gradient(145deg,#172b3f 0%,#0e1928 64%,#0b1420 100%);
  box-shadow:0 16px 34px #0002;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.page-arcade .public-room-card:before{
  content:'';
  position:absolute;
  inset:-35% -18% auto 40%;
  height:185px;
  z-index:0;
  background:radial-gradient(circle,#17344a,transparent 68%);
  background:radial-gradient(circle,color-mix(in srgb,var(--room-accent) 18%,transparent),transparent 68%);
  transition:transform .25s,opacity .25s;
}
.page-arcade .public-room-card:after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(8,17,27,.10) 0%,rgba(8,17,27,.30) 28%,rgba(8,17,27,.84) 68%,rgba(8,17,27,.96) 100%),
    linear-gradient(90deg,rgba(7,16,26,.85) 0%,rgba(7,16,26,.56) 42%,rgba(7,16,26,.18) 78%),
    var(--room-art) var(--room-pos)/cover no-repeat;
  opacity:.88;
  filter:blur(2.5px) saturate(.92) brightness(.82);
  transform:scale(1.05);
}
.page-arcade .public-room-card:hover{transform:translateY(-4px);border-color:var(--room-accent);border-color:color-mix(in srgb,var(--room-accent) 72%,#dcefff 28%);box-shadow:0 20px 38px #00000038,0 0 24px color-mix(in srgb,var(--room-accent) 12%,transparent)}
.page-arcade .public-room-card:hover:before{transform:translate(-8px,10px);opacity:1.4}
.page-arcade .public-room-card>*{position:relative;z-index:1}
.page-arcade .public-room-card.mode-facts{--room-accent:#51d8ff;--room-art:url('/assets/mlbb-heroes/carmilla.webp');--room-pos:center 16%}
.page-arcade .public-room-card.mode-crop{--room-accent:#58d6ff;--room-art:url('/assets/mlbb-heroes/hayabusa.webp');--room-pos:55% 18%}
.page-arcade .public-room-card.mode-race{--room-accent:#c49aff;--room-art:url('/assets/mlbb-heroes/ling.webp');--room-pos:center 18%}
.page-arcade .public-room-card.mode-sketch{--room-accent:#ff625b;--room-art:url('/assets/mlbb-heroes/zetian.webp');--room-pos:center 18%}
.page-arcade .public-room-status{display:flex;align-items:center;gap:7px;font-size:.47rem;letter-spacing:.1em;font-weight:700;color:#a4bdd3;text-transform:uppercase}
.page-arcade .public-room-live-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#72d5a0;box-shadow:0 0 0 4px #72d5a014,0 0 11px #72d5a055}
.page-arcade .public-room-tag{color:#8fb1cf;font-size:.46rem;letter-spacing:.11em}
.page-arcade .public-room-title{align-items:center;gap:14px}
.page-arcade .public-room-icon{color:var(--room-accent)!important;border-color:var(--room-accent)!important;border-color:color-mix(in srgb,var(--room-accent) 62%,#244057 38%)!important;box-shadow:0 0 20px color-mix(in srgb,var(--room-accent) 10%,transparent)}
.page-arcade .public-room-title strong{font-size:1.95rem;line-height:.98}
.page-arcade .public-room-description{color:#b3c7d8;font-size:.72rem;line-height:1.72;min-height:3.6em}
.page-arcade .public-room-note-line{margin-top:auto;color:#93afc8;font-size:.53rem;letter-spacing:.045em}
.page-arcade .public-room-hostbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid #ffffff10;border-radius:8px;background:linear-gradient(90deg,#07131fdd,#0b1825b8);backdrop-filter:blur(5px)}
.page-arcade .public-room-host{display:flex;align-items:center;gap:10px;min-width:0}
.page-arcade .public-room-host-icon{width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:1px solid #3c5b74;background:#0b1b2b}
.page-arcade .public-room-host-copy{display:grid;gap:3px;min-width:0}
.page-arcade .public-room-host-copy>small{font-size:.43rem;letter-spacing:.11em;color:#7693ac}
.page-arcade .public-room-host-line{display:flex;align-items:center;gap:6px;min-width:0}
.page-arcade .public-room-host-line .player-host-crown{width:15px;height:15px;flex:0 0 15px}
.page-arcade .public-room-host-line>strong{font-size:.7rem;color:#e1edf8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-arcade .public-room-capacity{display:flex;align-items:baseline;gap:2px;flex:0 0 auto;min-width:50px;justify-content:center;padding:6px 9px;border:1px solid #355069;border:1px solid color-mix(in srgb,var(--room-accent) 36%,#355069 64%);border-radius:999px;background:#07131fbb;color:#b7ccdf;font-size:.58rem}
.page-arcade .public-room-capacity strong{font:700 .75rem/1 var(--body);color:#eef8ff}
.page-arcade .public-room-chips{display:flex;flex-wrap:wrap;gap:6px}
.page-arcade .public-room-chips>span{padding:5px 7px;border:1px solid #ffffff12;border-radius:4px;background:#06111cb8;color:#9ab2c8;font-size:.49rem;letter-spacing:.035em;white-space:nowrap}
.page-arcade .public-room-footer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:stretch;padding-top:12px;border-top:1px solid #ffffff14}
.page-arcade .public-room-code{display:grid;align-content:center;gap:2px;min-width:76px;padding:0 4px}
.page-arcade .public-room-code small{font-size:.4rem;letter-spacing:.1em;color:#6f8aa2}
.page-arcade .public-room-code strong{font:700 .74rem/1.2 var(--body);letter-spacing:.07em;color:#c5d7e6}
.page-arcade .public-room-join{width:100%;min-height:46px;margin:0;border-color:var(--room-accent);border-color:color-mix(in srgb,var(--room-accent) 70%,#5c748a 30%);background:var(--room-accent);background:color-mix(in srgb,var(--room-accent) 82%,#0c2639 18%);color:#07131d;font-size:.68rem;font-weight:800;box-shadow:0 8px 20px color-mix(in srgb,var(--room-accent) 12%,transparent)}
.page-arcade .public-room-join:hover{filter:brightness(1.08);transform:translateY(-1px)}

@media(max-width:1050px){
 .page-arcade .public-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .page-arcade .public-room-grid{grid-template-columns:1fr;gap:11px}
 .page-arcade .public-room-card{min-height:330px;padding:16px}
 .page-arcade .public-room-title strong{font-size:1.7rem}
 .page-arcade .public-room-description{font-size:.67rem;min-height:auto}
 .page-arcade .public-room-footer{grid-template-columns:1fr}
 .page-arcade .public-room-code{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px}
 .page-arcade .public-room-join{min-height:48px}
}

/* v202 — public room discovery controls + denser responsive cards */
.page-arcade .public-room-browser-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:10px 12px;border:1px solid #29445d;border-radius:8px;background:linear-gradient(90deg,#0d1c2a,#091522)}
.page-arcade .public-room-mode-filters{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.page-arcade .public-room-mode-filters::-webkit-scrollbar{display:none}
.page-arcade .public-room-mode-filters button{min-height:36px;white-space:nowrap;padding:8px 11px;border:1px solid transparent;border-radius:5px;background:transparent;color:#839eb8;font:600 .61rem/1 var(--body);cursor:pointer}
.page-arcade .public-room-mode-filters button:hover{color:#d9edf9;background:#102336}
.page-arcade .public-room-mode-filters button.is-active{border-color:#3f6b88;background:#142c40;color:#f0f8ff;box-shadow:inset 0 -2px 0 #55caef}
.page-arcade .public-room-mode-filters button[data-public-mode=race].is-active{border-color:#72569a;box-shadow:inset 0 -2px 0 #c49aff}
.page-arcade .public-room-mode-filters button[data-public-mode=sketch].is-active{border-color:#8a4849;box-shadow:inset 0 -2px 0 #ff625b}
.page-arcade .public-room-browser-meta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.page-arcade #public-room-results{font-size:.55rem;color:#7895af;white-space:nowrap}
.page-arcade .public-room-sort-label{display:flex;align-items:center;gap:7px;color:#7895af;font-size:.55rem;white-space:nowrap}
.page-arcade .public-room-sort-label select{min-height:36px;height:36px;padding:6px 28px 6px 9px;font-size:.62rem;border-radius:5px}
.page-arcade .public-room-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.page-arcade .public-room-card{min-height:326px;padding:17px;gap:10px}
.page-arcade .public-room-card:after{filter:blur(2px) saturate(.94) brightness(.84)}
.page-arcade .public-room-status{gap:6px;min-width:0}
.page-arcade .public-room-status>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-arcade .public-room-mode-badge{margin-left:auto;flex:0 0 auto;padding:4px 7px;border:1px solid var(--room-accent);border:1px solid color-mix(in srgb,var(--room-accent) 48%,transparent);border-radius:999px;background:#08131f;background:color-mix(in srgb,var(--room-accent) 10%,#08131f 90%);color:var(--room-accent);font-size:.42rem;letter-spacing:.07em;box-shadow:0 0 14px color-mix(in srgb,var(--room-accent) 14%,transparent)}
.page-arcade .public-room-title{gap:11px}
.page-arcade .public-room-title .card-mark{width:50px;height:52px;flex:0 0 50px}
.page-arcade .public-room-title strong{font-size:1.7rem}
.page-arcade .public-room-description{font-size:.65rem;line-height:1.58;min-height:3.15em}
.page-arcade .public-room-hostbar{padding:8px 9px}
.page-arcade .public-room-host-icon{width:32px;height:32px;flex-basis:32px}
.page-arcade .public-room-chips>span{font-size:.46rem;padding:4px 6px}
.page-arcade .public-room-footer{gap:8px;padding-top:10px}
.page-arcade .public-room-join{min-height:42px;font-size:.64rem}
.page-arcade .public-room-empty.is-filtered{min-height:190px}
@media(max-width:1180px){.page-arcade .public-room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.page-arcade .public-room-browser-controls{align-items:stretch;flex-direction:column}.page-arcade .public-room-browser-meta{justify-content:space-between}.page-arcade .public-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.page-arcade .public-room-browser-controls{padding:9px;margin-bottom:13px;gap:10px}.page-arcade .public-room-mode-filters{margin-inline:-2px}.page-arcade .public-room-mode-filters button{min-height:34px;padding:7px 10px;font-size:.58rem}.page-arcade #public-room-results{display:none}.page-arcade .public-room-grid{grid-template-columns:1fr}.page-arcade .public-room-card{min-height:315px;padding:15px}.page-arcade .public-room-mode-badge{font-size:.4rem}.page-arcade .public-room-title strong{font-size:1.62rem}}

/* v203 — public-room browser stability + compatibility */
.page-arcade .public-refresh:disabled{opacity:.62;cursor:wait}
@media(prefers-reduced-motion:reduce){.page-arcade .public-room-card,.page-arcade .public-room-card:before,.page-arcade .public-room-join{transition:none!important}.page-arcade .public-room-card:hover,.page-arcade .public-room-join:hover{transform:none}}


/* v204 — public-room account requirement must be cancellable */
.page-arcade .auth-account-required{margin:0 0 14px;padding:12px 13px;border:1px solid #725e2e;border-radius:6px;background:#241e10;color:#e9d28b;display:grid;gap:4px}
.page-arcade .auth-account-required[hidden]{display:none!important}
.page-arcade .auth-account-required strong{font-size:.72rem;color:#f1d87d}
.page-arcade .auth-account-required span{font-size:.61rem;line-height:1.5;color:#bcae82}
.page-arcade .guest-entry[hidden]{display:none!important}

/* v205 — keep account/login dialog visually consistent on phones regardless of launch point.
   The previous full-viewport mobile sheet could look like a separate page when opened after
   scrolling to Multiplayer/Public Rooms. Use the same contained modal treatment everywhere. */
@media(max-width:700px){
  body.arcade-auth-open{overflow:hidden!important}
  .page-arcade .arcade-dialog{
    position:fixed!important;
    inset:12px!important;
    width:min(530px,calc(100vw - 24px))!important;
    height:auto!important;
    max-height:calc(100dvh - 24px)!important;
    margin:auto!important;
    padding:18px 16px 20px!important;
    box-sizing:border-box!important;
    border:1px solid #314157!important;
    border-radius:8px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:#0d1520!important;
    box-shadow:0 20px 60px #000a!important;
  }
  .page-arcade .arcade-dialog::backdrop{
    background:#02060bcc!important;
    backdrop-filter:blur(6px)!important;
  }
  .page-arcade .arcade-dialog .dialog-title{
    position:static!important;
    min-height:0!important;
    padding:0 0 14px!important;
    border-bottom:1px solid #29445b!important;
    background:transparent!important;
    backdrop-filter:none!important;
  }
  .page-arcade .arcade-dialog .dialog-title h2{
    font-size:clamp(1.8rem,8vw,2.2rem)!important;
    line-height:1!important;
    margin:0!important;
  }
  .page-arcade .arcade-dialog .dialog-title>button{
    flex:0 0 auto!important;
    width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
  }
  .page-arcade #auth-entry,
  .page-arcade #recovery-save,
  .page-arcade #auth-error{
    display:block;
    margin-inline:0!important;
  }
  .page-arcade .auth-account-required{margin-top:14px!important}
  .page-arcade .auth-tabs{margin:14px 0!important}
  .page-arcade #auth-form{gap:12px!important}
  .page-arcade .guest-entry{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-top:14px!important;
    margin-top:14px!important;
  }
  .page-arcade .guest-entry label,
  .page-arcade .guest-entry button,
  .page-arcade .guest-entry p{grid-column:1!important}
  .page-arcade .guest-entry[hidden]{display:none!important}
}
@media(max-width:370px){
  .page-arcade .arcade-dialog{inset:8px!important;width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;padding:15px 12px 18px!important}
  .page-arcade .arcade-dialog .dialog-title h2{font-size:1.75rem!important}
  .page-arcade .auth-tabs button{font-size:.54rem!important;padding-inline:3px!important}
}
/* Keep native hidden states authoritative inside the mobile dialog. */
.page-arcade #auth-entry[hidden],
.page-arcade #recovery-save[hidden]{display:none!important}

/* v206 — public-room artwork is bound inline per mode in arcade.js; these selectors remain fallback only. */


/* v210 — mobile cropped-image keyboard mode. Keep the clue image and answer controls usable together. */
@media(max-width:700px){
  body.is-room-playing.is-crop-answer.is-crop-keyboard{--crop-mobile-stage-height:var(--arcade-visual-height,520px)}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .arcade-shell{overflow:visible}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-screen{overflow:visible}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game{overflow:visible}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-question{height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:8px;padding:8px 10px 12px;overflow:visible;scroll-margin-top:6px}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-image-wrap.is-crop-round{width:min(54vw,220px);min-height:0;height:min(220px,calc(var(--crop-mobile-stage-height) * .34));max-height:220px;aspect-ratio:1;margin:0 auto;border-radius:10px;box-shadow:0 8px 24px #0005,inset 0 0 0 1px #ffffff08}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-image-wrap.is-crop-round img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-prompt{max-width:none;padding:12px;border-radius:11px;box-shadow:0 8px 24px #0003,inset 0 1px 0 #ffffff07}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-prompt .guess-kicker,
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form>label{display:none}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-prompt h3{margin:0 0 8px;font-size:.9rem;line-height:1.25}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form{padding:0}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-input-row{min-height:50px;padding:3px;border-radius:9px}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-input-row input{min-height:44px;padding:8px 10px}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-btn{min-width:82px;min-height:44px;padding:8px 12px;font-size:.68rem}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-answer-state{margin-top:7px;padding-top:7px;min-height:0;font-size:.58rem;line-height:1.35}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-suggestions{top:calc(100% + 5px);bottom:auto;max-height:min(156px,calc(var(--crop-mobile-stage-height) * .29));padding:4px;border-radius:8px;overscroll-behavior:contain}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-suggestion{min-height:44px;padding:4px 7px;gap:8px;font-size:.72rem}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-suggestion img{width:30px;height:36px;flex-basis:30px}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .room-scoreboard,
  body.is-room-playing.is-crop-answer.is-crop-keyboard .room-notice,
  body.is-room-playing.is-crop-answer.is-crop-keyboard .reaction-row{display:none!important}
}


/* v211 — public-room artwork uses an explicit mode image layer; no Carmilla fallback can bleed across modes. */
.page-arcade .public-room-card:after{
  background:
    linear-gradient(180deg,rgba(8,17,27,.10) 0%,rgba(8,17,27,.30) 28%,rgba(8,17,27,.84) 68%,rgba(8,17,27,.96) 100%),
    linear-gradient(90deg,rgba(7,16,26,.85) 0%,rgba(7,16,26,.56) 42%,rgba(7,16,26,.18) 78%)!important;
}
.page-arcade .public-room-card>.public-room-art-layer{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  display:block!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  opacity:.88;
  filter:blur(2.5px) saturate(.92) brightness(.82);
  transform:scale(1.05);
}
.page-arcade .public-room-card>.public-room-art-layer+*{position:relative;z-index:1}


/* v213 — mobile-first UX pass.
   Fixes the crop keyboard cascade conflict and makes the Arcade feel native on small screens. */
@media(max-width:700px){
  .page-arcade{overflow-x:hidden}
  .page-arcade .arcade-shell{width:calc(100% - 20px)}
  .page-arcade button,.page-arcade input,.page-arcade select{touch-action:manipulation}
  .page-arcade .guess-btn,.page-arcade .guess-quiet{min-height:44px}

  /* Common mobile forms: fill the width, keep primary actions thumb-sized. */
  .page-arcade #join-form{width:100%;margin-top:14px}
  .page-arcade #join-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .page-arcade #join-code{width:100%;min-width:0}
  .page-arcade #join-form .guess-btn{min-width:112px;padding-inline:12px}
  .page-arcade .create-room-visibility{align-items:stretch;flex-direction:column;gap:12px;padding:13px}
  .page-arcade .visibility-switch{width:100%}
  .page-arcade .visibility-switch button{flex:1;justify-content:center;min-height:44px}

  /* Data-heavy tabs should read as cards, not compressed desktop tables. */
  .page-arcade .stats-grid,.page-arcade .profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .page-arcade #match-history-list,.page-arcade .history-round-grid{grid-template-columns:1fr!important}
  .page-arcade .board-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .page-arcade .board-filters>button{width:100%}
  .page-arcade .public-room-browser-controls{border-radius:7px}
  .page-arcade .public-room-browser-meta{gap:8px}
  .page-arcade .public-room-sort-label{width:100%;justify-content:space-between}
  .page-arcade .public-room-sort-label select{min-width:130px}

  /* Live matches: prioritize the game before secondary room information. */
  body.is-room-playing .arcade-shell{width:100%;padding-inline:0}
  body.is-room-playing #room-screen{padding-inline:0}
  body.is-room-playing #room-screen .room-topbar{margin-inline:10px!important;width:calc(100% - 20px)!important}
  body.is-room-playing #room-screen .room-layout{gap:8px!important}
  body.is-room-playing .room-main{width:100%!important}
  body.is-room-playing #room-game{border-radius:0!important;border-left:0!important;border-right:0!important}
  body.is-room-playing .round-strip{border-left:0!important;border-right:0!important;border-radius:0!important}
  body.is-room-playing .time-track{margin-bottom:8px}
  body.is-room-playing #room-game .live-question{border-left:0!important;border-right:0!important;border-radius:0!important;padding:10px!important;gap:10px!important}
  body.is-room-playing #room-game .live-image-wrap{max-width:min(88vw,340px)!important;aspect-ratio:1/1!important;padding:6px!important}
  body.is-room-playing #room-game .live-prompt{padding:13px!important}
  body.is-room-playing #room-game .live-prompt h3{margin-bottom:10px!important}
  body.is-room-playing .room-scoreboard{margin:0 10px 10px!important;width:calc(100% - 20px)!important}
  body.is-room-playing .reaction-row{padding-inline:10px}
  body.is-room-playing .room-notice{padding-inline:10px}

  /* Crop + keyboard: this selector intentionally includes #room-game and !important.
     Older v170 live-game rules also use #room-game + !important, so lower-specificity
     v210 rules could not actually shrink the crop on real phones. */
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game{overflow:visible!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip{
    position:sticky!important;top:0!important;z-index:45!important;
    min-height:50px!important;padding:6px 10px!important;
    grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;
    background:#0b1827f7!important;backdrop-filter:blur(12px);
    box-shadow:0 8px 20px #0006;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip .guess-kicker{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip h2{font-size:1rem!important;line-height:1!important;margin:0!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game #live-phase{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-timer{
    grid-column:2!important;grid-row:1!important;min-width:54px!important;padding:3px 6px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-timer strong{font-size:1.55rem!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-timer span{font-size:.4rem!important;margin-top:1px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .time-track{position:sticky;top:50px;z-index:44;margin:0!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-question{
    width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;
    grid-template-columns:1fr!important;grid-template-rows:auto auto!important;align-content:start!important;
    gap:7px!important;padding:7px 10px 10px!important;overflow:visible!important;
    scroll-margin-top:54px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-image-wrap.is-crop-round{
    width:min(46vw,170px)!important;max-width:170px!important;min-width:0!important;
    height:min(150px,calc(var(--arcade-visual-height,520px) * .30))!important;max-height:150px!important;min-height:104px!important;
    aspect-ratio:1/1!important;margin:0 auto!important;padding:0!important;border-radius:9px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-image-wrap.is-crop-round #live-image{
    width:100%!important;height:100%!important;object-fit:cover!important;border-radius:8px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-prompt{
    width:100%!important;max-width:520px!important;min-height:0!important;margin:0 auto!important;
    padding:9px 10px!important;border-radius:9px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-prompt h3{margin:0 0 6px!important;font-size:.82rem!important;line-height:1.2!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-input-row{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:4px!important;
    min-height:46px!important;padding:2px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-input-row input{
    min-height:42px!important;height:42px!important;padding:7px 9px!important;font-size:16px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-btn{
    min-width:76px!important;min-height:42px!important;height:42px!important;padding:6px 10px!important;font-size:.64rem!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-answer-state{margin:5px 0 0!important;padding:0!important;font-size:.54rem!important;line-height:1.3!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-hero-suggestions{
    top:auto!important;bottom:calc(100% + 5px)!important;max-height:min(132px,calc(var(--arcade-visual-height,520px) * .27))!important;
    padding:3px!important;border-radius:7px!important;box-shadow:0 -12px 28px #020711e8!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-hero-suggestions .hero-suggestion{
    min-height:40px!important;padding:3px 6px!important;gap:7px!important;font-size:.68rem!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-hero-suggestions .hero-suggestion img{
    width:27px!important;height:32px!important;flex-basis:27px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard .room-scoreboard,
  body.is-room-playing.is-crop-answer.is-crop-keyboard .room-notice,
  body.is-room-playing.is-crop-answer.is-crop-keyboard .reaction-row{display:none!important}

  /* Safe areas on devices with gesture/navigation insets. */
  .page-arcade #arcade-toast{bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(100% - 20px)}
}
@media(max-width:380px){
  .page-arcade .arcade-shell{width:calc(100% - 16px)}
  .page-arcade #join-form>div{grid-template-columns:1fr}
  .page-arcade #join-form .guess-btn{width:100%}
  .page-arcade .board-filters{grid-template-columns:1fr}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-image-wrap.is-crop-round{width:min(42vw,145px)!important;max-width:145px!important}
}


/* v213 — mobile gameplay UX: stable keyboard dock, sticky round context, smaller playfield, safer touch forms. */
@media(max-width:700px){
  .page-arcade{--mobile-safe-left:max(10px,env(safe-area-inset-left));--mobile-safe-right:max(10px,env(safe-area-inset-right))}
  body.is-room-playing{scroll-padding-top:72px;overscroll-behavior-y:contain}
  body.is-room-playing .round-strip{position:sticky!important;top:0!important;z-index:36!important;background:linear-gradient(180deg,#0d1b2af7,#0a1724f2)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 22px #02060b55,inset 0 -1px 0 #36536b88}
  body.is-room-playing .live-question{gap:10px!important;padding:10px!important}
  body.is-room-playing .live-image-wrap{width:min(88vw,360px)!important;max-width:360px!important;aspect-ratio:1/1!important;min-height:0!important;height:auto!important;padding:6px!important}
  body.is-room-playing .live-image-wrap.is-crop-round{width:min(84vw,350px)!important;max-width:350px!important;aspect-ratio:1/1!important}
  body.is-room-playing .live-prompt{padding:12px!important}
  body.is-room-playing .live-prompt .guess-kicker{margin-bottom:7px!important}
  body.is-room-playing .live-prompt h3{margin:0 0 10px!important;line-height:1.3!important}
  #live-text-form .guess-input-row{min-height:52px!important}
  #live-text-answer{font-size:16px!important;line-height:1.2!important;min-height:48px!important}
  #live-text-form .guess-btn{min-height:48px!important;min-width:92px!important}
  .page-arcade input,.page-arcade select,.page-arcade textarea{font-size:16px}
  .page-arcade .public-room-mode-filters{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .page-arcade .public-room-mode-filters button{scroll-snap-align:start;min-height:44px!important}
  .page-arcade .public-room-sort-label select{min-height:44px!important;height:44px!important}
  .page-arcade .public-room-join{min-height:50px!important}
  body.is-room-playing .arcade-backtop{display:none!important}
}
@media(max-width:480px){
  .page-arcade .room-settings-grid{grid-template-columns:1fr!important}
  .page-arcade .room-settings-grid label:first-child,.page-arcade .settings-save-cell{grid-column:1!important}
  .page-arcade .ready-actions{grid-template-columns:1fr!important}
  #room-screen #room-player-list{grid-template-columns:1fr!important}
  .page-arcade #join-form{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .page-arcade #join-form input,.page-arcade #join-form button{width:100%!important;min-height:50px!important}
  .page-arcade .public-room-browser-meta{gap:8px!important}
}
/* Keyboard-open crop mode is a small game HUD instead of a scrolling page. */
@media(max-width:700px){
  body.is-room-playing.is-crop-answer.is-crop-keyboard{--crop-mobile-stage-height:var(--arcade-visual-height,520px);--crop-hud-top:var(--arcade-visual-top,0px)}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .round-strip{box-sizing:border-box!important;position:fixed!important;z-index:90!important;top:var(--crop-hud-top)!important;left:var(--mobile-safe-left)!important;right:var(--mobile-safe-right)!important;width:auto!important;min-height:46px!important;height:46px!important;padding:5px 8px!important;margin:0!important;grid-template-columns:minmax(0,1fr) auto!important;border:1px solid #35546d!important;border-radius:8px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .round-strip .guess-kicker,body.is-room-playing.is-crop-answer.is-crop-keyboard #live-phase{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .round-strip h2{font-size:1.1rem!important;white-space:nowrap!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .round-timer{grid-column:2!important;grid-row:1!important;min-width:64px!important;height:34px!important;padding:3px 7px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .round-timer strong{font-size:1.55rem!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .round-timer span{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .time-track{box-sizing:border-box!important;position:fixed!important;z-index:91!important;top:calc(var(--crop-hud-top) + 45px)!important;left:var(--mobile-safe-left)!important;right:var(--mobile-safe-right)!important;width:auto!important;height:3px!important;margin:0!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-question{display:block!important;height:var(--crop-mobile-stage-height)!important;min-height:var(--crop-mobile-stage-height)!important;padding:58px 10px 142px!important;margin:0!important;overflow:hidden!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-image-wrap.is-crop-round{position:fixed!important;z-index:45!important;top:calc(var(--crop-hud-top) + 58px)!important;left:50%!important;transform:translateX(-50%)!important;width:clamp(118px,calc(var(--crop-mobile-stage-height) * .34),220px)!important;height:clamp(118px,calc(var(--crop-mobile-stage-height) * .34),220px)!important;max-width:54vw!important;max-height:220px!important;min-height:0!important;aspect-ratio:1!important;margin:0!important;padding:5px!important;border-radius:10px!important;box-shadow:0 10px 26px #0008,inset 0 0 0 1px #ffffff0b!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-image-wrap.is-crop-round img{object-fit:cover!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-prompt{box-sizing:border-box!important;position:fixed!important;z-index:100!important;left:var(--mobile-safe-left)!important;right:var(--mobile-safe-right)!important;bottom:calc(var(--arcade-keyboard-inset,0px) + 8px)!important;width:auto!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:10px!important;border:1px solid #35546d!important;border-radius:10px!important;background:#0a1725f7!important;box-shadow:0 14px 38px #000b,inset 0 1px 0 #ffffff0a!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-prompt .guess-kicker,body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form>label{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .live-prompt h3{margin:0 0 7px!important;font-size:.82rem!important;line-height:1.2!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form{padding:0!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-input-row{min-height:50px!important;padding:3px!important;border-radius:8px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-input-row input{min-height:44px!important;padding:8px 10px!important;font-size:16px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-btn{min-width:84px!important;min-height:44px!important;padding:8px 11px!important;font-size:.68rem!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-answer-state{margin:6px 0 0!important;padding:6px 0 0!important;min-height:0!important;max-height:2.8em!important;overflow:hidden!important;font-size:.57rem!important;line-height:1.3!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-autocomplete{position:relative!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-suggestions{top:auto!important;bottom:calc(100% + 6px)!important;max-height:min(188px,calc(var(--crop-mobile-stage-height) * .32))!important;padding:4px!important;border-radius:8px!important;overscroll-behavior:contain!important;box-shadow:0 -16px 34px #000c!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-suggestion{min-height:46px!important;padding:5px 7px!important;gap:8px!important;font-size:.76rem!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-suggestion img{width:31px!important;height:38px!important;flex-basis:31px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .room-scoreboard,body.is-room-playing.is-crop-answer.is-crop-keyboard .room-notice,body.is-room-playing.is-crop-answer.is-crop-keyboard .reaction-row,body.is-room-playing.is-crop-answer.is-crop-keyboard #race-track{display:none!important}
}
@media(max-width:360px){
  body.is-room-playing #live-text-form .guess-input-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:4px!important}
  body.is-room-playing #live-text-form .guess-input-row input{width:100%!important;min-width:0!important}
  body.is-room-playing #live-text-form .guess-btn{width:auto!important;min-width:82px!important;margin:0!important}
}
@media(hover:none) and (pointer:coarse){.page-arcade .arcade-card:hover,.page-arcade .public-room-card:hover,.page-arcade button:hover{transform:none!important}}
@media(max-width:700px){
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip,
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-prompt{
    left:var(--mobile-safe-left)!important;
    right:auto!important;
    width:calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right))!important;
    box-sizing:border-box!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .time-track{
    left:var(--mobile-safe-left)!important;
    right:auto!important;
    width:calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right))!important;
    box-sizing:border-box!important;
  }
}


/* v214 — real-device viewport + accessibility hardening.
   Samsung/Chrome: tolerate either visual-only or layout+visual keyboard resize.
   iPhone Safari: keep interactive HUD/header outside notch, Dynamic Island and home indicator.
   Large text: key controls grow vertically instead of clipping at fixed heights. */
@media(max-width:700px){
  .page-arcade{
    --mobile-safe-top:max(0px,env(safe-area-inset-top));
    --mobile-safe-right:max(10px,env(safe-area-inset-right));
    --mobile-safe-bottom:max(0px,env(safe-area-inset-bottom));
    --mobile-safe-left:max(10px,env(safe-area-inset-left));
    padding-bottom:var(--mobile-safe-bottom);
  }
  .page-arcade .arcade-header{
    box-sizing:border-box!important;
    height:auto!important;
    min-height:calc(52px + env(safe-area-inset-top))!important;
    padding-top:max(5px,env(safe-area-inset-top))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
    padding-bottom:5px!important;
    padding-left:max(8px,env(safe-area-inset-left))!important;
    overflow:visible!important;
  }
  .page-arcade .arcade-header-tools{overflow:visible!important}
  .page-arcade .arcade-return-active,.page-arcade .arcade-reconnect-last,
  .page-arcade .arcade-account.is-authenticated>span,
  .page-arcade .arcade-account.is-authenticated #account-open,
  .page-arcade .arcade-account.is-authenticated #account-logout,
  .page-arcade .arcade-account:not(.is-authenticated) #account-open{
    height:auto!important;
    min-height:44px!important;
  }
  .page-arcade .arcade-return-active,.page-arcade .arcade-reconnect-last,
  .page-arcade .arcade-account.is-authenticated #account-logout{
    white-space:normal!important;
    line-height:1.1!important;
  }
  body.is-room-playing{
    scroll-padding-top:calc(72px + var(--mobile-safe-top));
  }
  body.is-room-playing .round-strip{top:var(--mobile-safe-top)!important}
  .page-arcade #live-answer-state{overflow-wrap:anywhere}
}
@media(max-width:420px){
  .page-arcade .stats-grid,.page-arcade .profile-stat-grid{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  body.is-room-playing.is-crop-answer.is-crop-keyboard{
    --crop-hud-top:max(var(--arcade-visual-top,0px),var(--mobile-safe-top));
    --crop-hud-bottom:max(var(--arcade-keyboard-inset,0px),var(--mobile-safe-bottom));
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip{
    height:auto!important;
    min-height:48px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip h2{
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-timer{
    height:auto!important;
    min-height:38px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .time-track{
    top:calc(var(--crop-hud-top) + var(--arcade-crop-hud-height,48px) - 1px)!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-question{
    padding-top:calc(var(--arcade-crop-hud-height,48px) + 12px)!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-image-wrap.is-crop-round{
    top:calc(var(--crop-hud-top) + var(--arcade-crop-hud-height,48px) + 12px)!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-prompt{
    bottom:calc(var(--crop-hud-bottom) + 8px)!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-input-row input,
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-text-form .guess-btn{
    height:auto!important;
    min-height:48px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-answer-state{
    max-height:none!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
  }
}


/* v215 — mobile follow timer.
   When the normal round header scrolls away, keep a compact live countdown visible
   for Hero Facts, The Crop, Hero Race and every timed MLBB Sketch phase. */
.mobile-timer-dock{display:none}
@media(max-width:700px){
  .page-arcade{--mobile-timer-gap:8px}
  body.is-room-playing:not(.is-crop-keyboard) #room-game .round-strip{position:relative!important;top:auto!important;z-index:auto!important}
  .mobile-timer-dock{
    position:fixed;
    z-index:78;
    top:max(calc(var(--mobile-safe-top,0px) + var(--mobile-timer-gap)),calc(var(--arcade-mobile-visual-top,0px) + var(--mobile-timer-gap)));
    left:50%;
    width:min(300px,calc(100vw - var(--mobile-safe-left,10px) - var(--mobile-safe-right,10px) - 20px));
    box-sizing:border-box;
    padding:7px 10px 8px;
    border:1px solid #49677d;
    border-radius:13px;
    background:linear-gradient(180deg,#0d1d2cf4,#091521f4);
    box-shadow:0 10px 28px #0009,inset 0 1px 0 #ffffff0b;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-8px);
    transition:opacity .16s ease,transform .16s ease,border-color .16s ease;
  }
  .mobile-timer-dock[hidden]{display:none!important}
  .mobile-timer-dock.is-visible{display:block;opacity:1;transform:translate(-50%,0)}
  .mobile-timer-dock-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;min-width:0}
  .mobile-timer-dock-round{min-width:0;overflow:hidden;color:#e7f2fb;font:700 .69rem/1.05 var(--display);letter-spacing:.045em;text-overflow:ellipsis;white-space:nowrap}
  .mobile-timer-dock-phase{max-width:92px;overflow:hidden;color:#82bdd2;font-size:.47rem;font-weight:800;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
  .mobile-timer-dock strong{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;min-width:52px;color:#f1d180;font:800 1.12rem/1 var(--display);font-variant-numeric:tabular-nums}
  .mobile-timer-dock strong small{font:800 .48rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase}
  .mobile-timer-dock-track{display:block;height:3px;margin-top:6px;border-radius:99px;overflow:hidden;background:#1b3549}
  .mobile-timer-dock-track>i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f0c86f,#f2d993);box-shadow:0 0 10px #e8c66c55;transition:width .1s linear,background .15s ease}
  .mobile-timer-dock.is-reveal{border-color:#4d7f90}
  .mobile-timer-dock.is-reveal strong{color:#a9e7ef}
  .mobile-timer-dock.is-reveal .mobile-timer-dock-track>i{background:linear-gradient(90deg,#67bdd8,#9ce4ec)}
  .mobile-timer-dock.is-warning:not(.is-reveal){border-color:#9a7738}
  .mobile-timer-dock.is-critical:not(.is-reveal){border-color:#b84e55;box-shadow:0 10px 28px #0009,0 0 0 1px #b84e5522 inset}
  .mobile-timer-dock.is-critical:not(.is-reveal) strong{color:#ff9ea4}
  .mobile-timer-dock.is-critical:not(.is-reveal) .mobile-timer-dock-track>i{background:linear-gradient(90deg,#d45e65,#ff9a9f)}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .mobile-timer-dock{display:none!important}
}
@media(max-width:360px){
  .mobile-timer-dock{width:min(270px,calc(100vw - var(--mobile-safe-left,10px) - var(--mobile-safe-right,10px) - 16px));padding-inline:9px}
  .mobile-timer-dock-phase{display:none}
  .mobile-timer-dock-row{grid-template-columns:minmax(0,1fr) auto}
}
@media(prefers-reduced-motion:reduce){.mobile-timer-dock{transition:none}}


/* v216 — Sketch drawing tools + mobile lineup alignment */
.page-arcade #sketch-canvas{cursor:default}
.page-arcade .sketch-draw-cursor{
  --sketch-cursor-size:16px;--sketch-cursor-color:#0a1018;
  position:absolute;z-index:8;left:0;top:0;width:var(--sketch-cursor-size);height:var(--sketch-cursor-size);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;border:2px solid #fff;border-radius:50%;
  background:var(--sketch-cursor-color);box-shadow:0 0 0 1px #07111dcc,0 2px 8px #0008;transition:opacity .08s ease;
}
.page-arcade .sketch-draw-cursor.is-visible{opacity:1}
.page-arcade .sketch-draw-cursor[data-tool=eraser]{background:#f8fbffcc;border-style:dashed;border-color:#17283a;box-shadow:0 0 0 2px #fff9,0 2px 8px #0006}
.page-arcade .sketch-draw-cursor[data-tool=fill]{width:30px;height:30px;background:#0b1929e8;border-color:#7ddcf4;border-radius:9px;box-shadow:0 4px 14px #0009,inset 0 1px 0 #fff2}
.page-arcade .sketch-draw-cursor[data-tool=fill]::before{content:'◩';display:grid;place-items:center;width:100%;height:100%;color:var(--sketch-cursor-color);font-size:18px;font-weight:900;text-shadow:0 1px 2px #fff8}
.page-arcade .sketch-tools button[data-sketch-tool=fill].is-active{border-color:#f0c66e;background:#332b1b;color:#f5d98f}
@media(hover:hover) and (pointer:fine){.page-arcade #sketch-canvas{cursor:none}}
@media(hover:none),(pointer:coarse){.page-arcade .sketch-draw-cursor{display:none!important}.page-arcade #sketch-canvas{cursor:default}}
@media(max-width:700px){
  body.is-room-playing #room-screen .room-scoreboard,body.is-room-playing .room-scoreboard{
    margin:0 0 10px!important;width:100%!important;max-width:none!important;border-left:0!important;border-right:0!important;border-radius:0!important;box-sizing:border-box!important;
  }
}


/* v218 — mobile Sketch column alignment + cache-safe follow-up.
   Guessing Chat, The lineup, notices and reactions share one mobile gutter. */
@media(max-width:700px){
  body.is-room-playing #room-screen .room-layout{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
  }
  body.is-room-playing #room-screen .room-scoreboard{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin:0 10px 10px!important;
    box-sizing:border-box!important;
    border-left:1px solid #31516b!important;
    border-right:1px solid #31516b!important;
    border-radius:12px!important;
  }
  body.is-room-playing #room-game .sketch-side{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin-inline:10px!important;
    box-sizing:border-box!important;
  }
  body.is-room-playing #room-game .sketch-chat-panel{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
    box-sizing:border-box!important;
  }
  body.is-room-playing .room-notice,
  body.is-room-playing .reaction-row{
    width:calc(100% - 20px)!important;
    margin-left:10px!important;
    margin-right:10px!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
}


/* v221 — keep large lineups compact. Show 10 players, then scroll inside the list. */
#room-player-list.is-lineup-scrollable{
  max-height:var(--lineup-scroll-height,610px);
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-right:4px;
  scroll-behavior:smooth;
}
#room-player-list.is-lineup-scrollable::-webkit-scrollbar{width:7px}
#room-player-list.is-lineup-scrollable::-webkit-scrollbar-track{background:#071522;border-radius:999px}
#room-player-list.is-lineup-scrollable::-webkit-scrollbar-thumb{background:#355873;border-radius:999px;border:1px solid #173247}
#room-player-list.is-lineup-scrollable::-webkit-scrollbar-thumb:hover{background:#4b7898}
#room-player-list.is-lineup-scrollable{scrollbar-color:#355873 #071522;scrollbar-width:thin}
@media(max-width:700px){
  #room-player-list.is-lineup-scrollable{padding-right:3px;max-height:var(--lineup-scroll-height,620px)}
}
\n\n/* v222 — mobile lobby priority, large-room density, and stable entry UX. */
@media(max-width:700px){
  /* In waiting lobbies, controls + Ready/Start are always above the lineup. */
  body:not(.is-room-playing) #room-screen .room-main{order:1!important;width:100%!important}
  body:not(.is-room-playing) #room-screen .room-scoreboard{order:2!important}
  body:not(.is-room-playing) #room-screen .ready-actions{
    position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:24;
    margin:12px -4px 8px!important;padding:6px!important;border:1px solid #36566f;border-radius:10px;
    background:#0a1726f2;box-shadow:0 10px 26px #0008;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
  }
  /* Large rooms use two compact columns, but still only expose ten players before internal scroll. */
  #room-screen .room-scoreboard.has-large-lineup{padding:10px!important}
  #room-screen .room-scoreboard.has-large-lineup #room-player-list{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px 6px!important
  }
  #room-screen .room-scoreboard.has-large-lineup .player-row{
    min-width:0!important;min-height:38px!important;margin:0!important;padding:5px 6px!important;gap:4px!important;
    grid-template-columns:12px minmax(0,1fr) auto!important
  }
  #room-screen .room-scoreboard.has-large-lineup .player-row strong{font-size:.58rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #room-screen .room-scoreboard.has-large-lineup .player-row small{font-size:.44rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #room-screen .room-scoreboard.has-large-lineup .player-row>b,#room-screen .room-scoreboard.has-large-lineup .player-score-total{font-size:.82rem!important}
  #room-screen .room-scoreboard.has-large-lineup .player-host-crown{transform:scale(.82);transform-origin:center}
  #room-player-list.is-lineup-scrollable.is-mobile-large-lineup{overscroll-behavior:contain;scrollbar-gutter:stable}
}
@media(max-width:340px){
  #room-screen .room-scoreboard.has-large-lineup #room-player-list{grid-template-columns:1fr!important}
}


/* v223 — Crop mobile keyboard stability.
   Prime the fixed HUD before focus, never scroll the input into view, and size the
   preview to the actual visual viewport so the crop remains visible while typing. */
@media(max-width:700px){
  body.is-room-playing.is-crop-answer.is-crop-keyboard{
    overscroll-behavior:none;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-image-wrap.is-crop-round{
    width:min(52vw,180px)!important;
    height:min(52vw,180px)!important;
    max-width:min(180px,calc(var(--arcade-visual-height,520px) - var(--arcade-crop-hud-height,48px) - var(--arcade-crop-prompt-height,110px) - 42px))!important;
    max-height:min(180px,calc(var(--arcade-visual-height,520px) - var(--arcade-crop-hud-height,48px) - var(--arcade-crop-prompt-height,110px) - 42px))!important;
    min-width:92px!important;
    min-height:92px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-image-wrap.is-crop-round #live-image{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-prompt{
    max-height:min(168px,calc(var(--arcade-visual-height,520px) * .42))!important;
    overflow:visible!important;
  }
}
@media(max-width:700px) and (max-height:520px){
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip{min-height:42px!important;padding-block:3px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-strip h2{font-size:.92rem!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .round-timer{min-height:34px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-image-wrap.is-crop-round{
    top:calc(var(--crop-hud-top) + var(--arcade-crop-hud-height,44px) + 7px)!important;
    width:min(42vw,132px)!important;
    height:min(42vw,132px)!important;
    min-width:82px!important;
    min-height:82px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-prompt{padding:7px!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #room-game .live-prompt h3{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #live-answer-state{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard .hero-suggestions{max-height:min(132px,calc(var(--arcade-visual-height,420px) * .30))!important}
}

/* v224 — visual PNG/PDF export controls */
.page-arcade .arcade-export-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.page-arcade .arcade-export-button{min-width:62px;min-height:38px;padding:8px 11px;border-color:#35566f;background:#0c1927;color:#d8e9f7;font-size:.55rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.page-arcade .arcade-export-button:hover{border-color:#58d6ff;background:#102538;color:#fff}
.page-arcade .arcade-section-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.page-arcade .arcade-history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 10px}
.page-arcade .arcade-history-heading .arcade-subtitle{margin:0!important}
.page-arcade .history-detail-actions{justify-content:flex-end}
.page-arcade-profile .public-profile-export{margin-left:auto}
.page-arcade .finish-actions .arcade-export-button{min-width:118px}
@media(max-width:700px){
 .page-arcade .arcade-section-actions{width:100%;justify-content:flex-start}
 .page-arcade .arcade-section-actions>.guess-quiet{flex:1 1 100%}
 .page-arcade .arcade-section-actions .arcade-export-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
 .page-arcade .arcade-history-heading{align-items:stretch;flex-direction:column;margin-left:12px;margin-right:12px}
 .page-arcade .arcade-history-heading .arcade-export-actions{display:grid;grid-template-columns:1fr 1fr}
 .page-arcade .history-detail-head{align-items:stretch;flex-direction:column}
 .page-arcade .history-detail-actions{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}
 .page-arcade-profile .public-profile-toolbar{gap:10px}
 .page-arcade-profile .public-profile-export{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr}
 .page-arcade .finish-actions .arcade-export-button{min-width:0;flex:1 1 calc(50% - 8px)}
}


/* v225 — export stability and busy-state feedback */
.page-arcade .arcade-export-button[aria-busy=true]{cursor:progress;opacity:.62;filter:saturate(.7)}
.page-arcade .arcade-export-button:disabled{pointer-events:none}


/* v226: dedicated mobile Crop answer viewport. The underlying page is frozen while the OS keyboard owns the visual viewport. */
@media (max-width:700px){
  body.is-crop-answer-overlay{overscroll-behavior:none}
  #crop-answer-overlay{
    position:fixed!important;
    z-index:2147482000!important;
    top:var(--arcade-visual-top,0px)!important;
    left:var(--arcade-visual-left,0px)!important;
    width:var(--arcade-visual-width,100vw)!important;
    height:var(--arcade-visual-height,100dvh)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#07111b!important;
    color:#f6fbff!important;
    isolation:isolate;
    overscroll-behavior:none;
    touch-action:pan-y;
  }
  #crop-answer-overlay[hidden]{display:none!important}
  .crop-answer-overlay-shell{
    box-sizing:border-box;
    width:100%;height:100%;
    display:grid;
    grid-template-rows:auto 3px minmax(0,1fr);
    padding:max(7px,var(--mobile-safe-top)) max(8px,var(--mobile-safe-right)) max(7px,var(--mobile-safe-bottom)) max(8px,var(--mobile-safe-left));
    background:
      radial-gradient(circle at 50% 16%,rgba(60,181,255,.10),transparent 42%),
      linear-gradient(180deg,#0b1827 0,#07111b 100%);
  }
  .crop-answer-overlay-head{
    min-height:46px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:6px 8px;
    border:1px solid #35546d;border-bottom:0;border-radius:10px 10px 0 0;
    background:#0c1b2cf8;
  }
  .crop-answer-overlay-head>div{min-width:0;display:grid;gap:2px}
  .crop-answer-overlay-head small{font:700 .52rem/1.1 var(--font-body,system-ui);letter-spacing:.13em;color:#7fa6c4}
  .crop-answer-overlay-head strong{font:800 .9rem/1.1 var(--font-heading,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crop-answer-overlay-head>b{display:flex;align-items:baseline;gap:2px;font:900 1.25rem/1 var(--font-heading,system-ui);color:#f1d889}
  .crop-answer-overlay-head>b small{font-size:.5rem;color:#7fa6c4;letter-spacing:.05em}
  .crop-answer-overlay-progress{height:3px;background:#152a3d;overflow:hidden}
  .crop-answer-overlay-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#51d8ff,#f0d26c);transform-origin:left center}
  .crop-answer-overlay-content{
    min-height:0;
    display:grid!important;
    grid-template-rows:minmax(96px,1fr) auto;
    align-items:center;
    gap:8px;
    padding:8px 0 0;
    overflow:hidden;
  }

  /* Override all older in-page keyboard HUD rules for the nodes while they live inside the v226 overlay. */
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .live-image-wrap.is-crop-round{
    position:relative!important;inset:auto!important;left:auto!important;top:auto!important;transform:none!important;
    justify-self:center!important;align-self:center!important;
    width:min(58vw,calc(var(--arcade-visual-height,520px) * .42),250px)!important;
    height:min(58vw,calc(var(--arcade-visual-height,520px) * .42),250px)!important;
    max-width:250px!important;max-height:250px!important;min-width:72px!important;min-height:72px!important;
    margin:0!important;padding:5px!important;aspect-ratio:1!important;
    border-radius:12px!important;box-shadow:0 12px 34px #000a,inset 0 0 0 1px #ffffff12!important;
    background:#091522!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .live-image-wrap.is-crop-round #live-image{
    width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
    object-fit:cover!important;border-radius:8px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .live-prompt{
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;
    margin:0!important;padding:9px!important;
    border:1px solid #35546d!important;border-radius:10px!important;
    background:#0a1725f9!important;box-shadow:0 10px 30px #0009!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .live-prompt .guess-kicker,
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay #live-text-form>label,
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .live-prompt h3{display:none!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay #live-text-form{padding:0!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay #live-text-form .guess-input-row{
    min-height:48px!important;padding:3px!important;border-radius:9px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay #live-text-form .guess-input-row input{
    min-height:42px!important;font-size:16px!important;padding:8px 10px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay #live-text-form .guess-btn{
    min-width:82px!important;min-height:42px!important;padding:8px 10px!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay #live-answer-state{
    display:block!important;max-height:2.5em!important;min-height:0!important;margin:5px 0 0!important;padding:0!important;
    overflow:hidden!important;font-size:.56rem!important;line-height:1.25!important;
  }
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .hero-autocomplete{position:relative!important}
  body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .hero-suggestions{
    position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:calc(100% + 6px)!important;
    max-height:min(172px,calc(var(--arcade-visual-height,500px) * .32))!important;
    overflow:auto!important;overscroll-behavior:contain!important;
  }

  @media (max-height:560px){
    .crop-answer-overlay-content{grid-template-rows:minmax(82px,1fr) auto;gap:5px;padding-top:5px}
    body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay .live-image-wrap.is-crop-round{
      width:min(42vw,calc(var(--arcade-visual-height,420px) * .34),160px)!important;
      height:min(42vw,calc(var(--arcade-visual-height,420px) * .34),160px)!important;
    }
    body.is-room-playing.is-crop-answer.is-crop-keyboard #crop-answer-overlay #live-answer-state{display:none!important}
    .crop-answer-overlay-head{min-height:40px;padding-block:4px}
  }
}