:root{color-scheme:dark;--ink:#101c30;--panel:#172b45;--line:#47678f;--text:#f1f5fc;--muted:#b2c5de;--orange:#ffc16d;--blue:#82b9ef;font-family:'Trebuchet MS',Arial,sans-serif;background:var(--ink);color:var(--text)}*{box-sizing:border-box}body{margin:0}main{max-width:1560px;margin:auto;padding:18px 28px}header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.brand{font-family:'Arial Black',Impact,sans-serif;font-size:29px;letter-spacing:-1px}.brand span{display:block;font-family:'Trebuchet MS',sans-serif;font-size:12px;font-weight:normal;letter-spacing:0;color:var(--muted);margin-top:2px}.connection{margin-left:auto;color:var(--muted);font-size:12px;margin-right:12px}button{font:700 14px 'Trebuchet MS',Arial,sans-serif;cursor:pointer;border:0;border-radius:5px;padding:12px 16px;transition:background .15s}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #ffd892;outline-offset:3px}.quiet{background:#273e5c;color:#e8f2ff;border:1px solid #496688}.quiet:hover{background:#385776}.primary{background:var(--orange);color:#2a251b;box-shadow:0 4px 0 #a76f34;width:100%;font-size:17px;padding:16px}.primary:hover{background:#ffd499}.board{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#14263e}.matchbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#223d5e;min-height:61px}.matchbar b{font-size:17px}.matchbar span{font-size:13px;color:#bcd0e9}.matchbar>div:first-child{display:flex;align-items:center;gap:18px}.matchright{display:flex;gap:18px;align-items:center}.matchright b{color:var(--orange)}.arena{position:relative;aspect-ratio:3/2;max-height:calc(100vh - 235px);min-height:470px;background:#101c30}canvas{width:100%;height:100%;display:block;object-fit:contain;touch-action:none;outline:none}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:28px 7%;background:linear-gradient(90deg,#101c30f7,#101c30c9 48%,#101c300a);overflow:auto}.panel{width:440px;max-width:100%;padding:8px 0;margin:auto 0}.hidden{display:none!important}.stamp{display:inline-block;border:2px solid #faaf68;color:#ffc88b;border-radius:3px;padding:5px 9px;font-size:12px;font-weight:bold;transform:rotate(-3deg);margin-bottom:10px}h1{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(42px,4.5vw,66px);line-height:1.04;letter-spacing:-2.5px;margin:12px 0 16px}h2{font-family:'Arial Black',Impact,sans-serif;font-size:35px;line-height:1.15;margin:15px 0}p{font-size:15px;line-height:1.65;color:#c0d0e3;margin:12px 0}.rules{display:flex;justify-content:space-between;gap:12px;margin:22px 0}.rules>div{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted)}kbd{font-family:inherit;border:1px solid #6b86a6;border-bottom-width:3px;border-radius:4px;padding:5px 7px;color:#e9f2ff;font-size:12px;white-space:nowrap;width:max-content;background:#273d56}label{display:block;font-size:13px;color:#c0d0e3;margin:15px 0 8px}input{font:16px 'Trebuchet MS',sans-serif;background:#213a56;border:1px solid #6985a6;border-radius:4px;padding:12px;color:#fff;width:100%;min-width:0}form{display:grid;grid-template-columns:1fr 1fr;gap:10px}form label{grid-column:1/-1;margin:0}form .primary{font-size:15px;padding:12px}.fine{font-size:12px;color:#a7bed9;line-height:1.6}.share{display:flex;gap:8px}.share input{font-size:13px}.roster-row,.result-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #47617e;font-size:15px}.roster-row i{width:12px;height:12px;border-radius:3px}.roster-row span,.result-row b{margin-left:auto}.roster-row span{font-size:12px;color:#afc3dd}#roster,#results{margin:12px 0 20px}.scoreboard{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #496384}.score{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-right:1px solid #3a5270}.score:last-child{border:0}.score.me{background:#2d4865}.score.dead{opacity:.48}.score i{width:12px;height:18px;background:var(--player);border-radius:4px;flex-shrink:0}.score>div{min-width:0;flex:1}.score .name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score small{font-size:11px;color:#a9bfd8;display:block;margin-top:4px}.score strong{font-size:23px;color:var(--player)}footer{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#a8bfda;font-size:12px;margin-top:16px;line-height:2.3}footer kbd{margin:0 3px}footer b{color:#dce9f9;font-weight:normal}#notice{position:absolute;left:0;right:0;top:12px;text-align:center;color:#ffd19c;font-size:15px;pointer-events:none;font-weight:bold}#roundBanner{position:absolute;top:37%;left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 3px 20px #061324}#roundBanner strong{display:block;font-family:'Arial Black',sans-serif;font-size:clamp(35px,4vw,65px);color:#fff}#roundBanner span{display:block;font-size:17px;color:#ffcf91;margin-top:10px}#personal{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:20px;align-items:center;background:#12233ce8;padding:10px 18px;border:1px solid #4c7098;border-radius:6px;white-space:nowrap;font-size:13px}#personal>div{display:flex;gap:16px}#life{font-weight:bold}#reload,#jump{color:#afd0ef}.touch{display:none;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:12px;color:var(--muted)}.touch button{background:#365576;color:#fff;touch-action:none;user-select:none;min-height:48px}.dpad{display:flex;gap:5px}@media(pointer:coarse){.touch{display:flex}}@media(max-width:1000px){main{padding:12px}.brand{font-size:24px}.brand span{display:none}.connection{font-size:11px;margin-right:0}.quiet{padding:9px 11px}.arena{min-height:510px;max-height:none}.matchbar>div:first-child{display:block}.matchbar span{display:block;margin-top:4px}.matchright{gap:10px}.scoreboard{grid-template-columns:repeat(3,1fr)}.score{padding:9px}.score:nth-child(-n+3){border-bottom:1px solid #3a5270}footer{display:block}.rules{margin:16px 0}#overlay{padding:22px 6%}}@media(max-width:600px){header{flex-wrap:wrap}.brand{flex:1}.connection{margin-left:0}.matchbar{padding:10px}.matchbar b{font-size:14px}.matchbar span{font-size:11px}.matchright{flex-direction:column;gap:0;align-items:flex-end}h1{font-size:48px}form{grid-template-columns:1fr}.arena{min-height:580px}#overlay{background:#101c30d9}#personal{font-size:11px;padding:8px;gap:8px}#personal>div{gap:8px}.touch>span{max-width:85px}.score strong{font-size:19px}#fullscreen{margin-left:auto}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#personal{flex-wrap:wrap;justify-content:center;max-width:95%;row-gap:5px}#buffs{color:#9ff5d0;font-weight:bold}#buffs:empty{display:none}

select{width:100%;font:16px 'Trebuchet MS',sans-serif;padding:12px;background:#213a56;color:#fff;border:1px solid #6985a6;border-radius:4px;margin-bottom:14px}#boardControls{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;width:340px;max-width:46%;padding:15px;background:#172b45ed;border:1px solid #6380a0;border-radius:12px}#boardControls h2{font-size:24px;margin:4px 0}#boardDie{font:900 66px 'Arial Black',sans-serif;color:#ffd481;line-height:1.2}#boardControls p{font-size:13px;margin:8px 0}.briefControls{background:#294561;padding:15px;border-radius:6px;line-height:1.6;color:#ffdba4}#awardsRows .result-row{gap:8px;font-size:14px}#awardsRows small{font-size:11px;display:block;color:#bacce0}.party-points{color:#ffd481}#resultsPanel .stamp{display:none}@media(max-width:600px){#boardControls{max-width:60%;width:300px}#boardControls h2{font-size:18px}#boardDie{font-size:42px}#boardControls button{font-size:13px;padding:10px}.panel{padding:6px 0}}

.arena{width:100%}
/* Party Night: tactile toy-box presentation. */
:root{--ink:#231c38;--panel:#352b4c;--line:#625274;--text:#fff5de;--muted:#c9bcd9;--orange:#ffd369;--blue:#9de5e2;background:var(--ink);color:var(--text)}
body{background:radial-gradient(ellipse at 50% 0,#49335b 0,transparent 65%),#231c38}main{max-width:1560px;padding:16px 24px}header{margin-bottom:14px}.brand{font-size:32px;letter-spacing:-1.6px;color:#ffe29a;text-shadow:2px 3px 0 #151122;transform:rotate(-2deg)}.brand:before{content:'⚄';display:inline-block;margin-right:10px;color:#ff97ae;font-size:38px;vertical-align:-3px}.brand span{color:#d3c5db;padding-left:47px;font-size:11px;letter-spacing:.2px}.connection{color:#ccbed6}.connection:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#98e4bb;margin-right:7px}
button{border-radius:10px;transition:transform .12s,background .12s}button:not(:disabled):active{transform:translateY(3px)}.quiet{background:#403451;border:2px solid #695579;color:#fff0db;box-shadow:0 3px 0 #171222}.quiet:hover{background:#584366}.primary{background:#ffd369;border:2px solid #24192e;border-radius:12px;box-shadow:0 5px 0 #af6c42;color:#342237;font-weight:900}.primary:hover{background:#ffe5a2}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8ee8ed;outline-offset:4px}
.board{border:3px solid #151224;border-radius:20px;box-shadow:0 9px 0 #151224,0 15px 32px #110b2433;background:#30263f}.matchbar{min-height:56px;background:#40304f;border-bottom:2px solid #1d162c;padding:10px 18px}.matchbar b{color:#fff0d3}.matchbar span{color:#d8cbe0}.matchright b{color:#302137;background:#ffd369;min-width:65px;text-align:center;border-radius:7px;padding:6px 10px;font-variant-numeric:tabular-nums}.arena{background:#261e38;min-height:450px;max-height:calc(100vh - 238px)}
#overlay{background:linear-gradient(90deg,#241b38fa,#241b38e8 46%,#241b3830);padding:24px 6%}.panel{width:460px}.stamp{background:#a6e2cb;color:#213d39;border:2px solid #152a2b;box-shadow:3px 3px 0 #142322;border-radius:5px;padding:6px 10px;transform:rotate(-3deg)}h1,h2{color:#fff1d5;text-shadow:3px 4px 0 #171223}h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-2px}p,label{color:#dfd0e4}.fine{color:#c3b5d0}.rules>div{color:#d6c7de}kbd{background:#f4e6ce;color:#3b2949;border:2px solid #1e172a;border-bottom-width:5px;border-radius:6px;font-weight:bold}input,select{background:#3e304e;color:#fff4e0;border:2px solid #796388;border-radius:9px}input::placeholder{color:#bba9c8}.roster-row,.result-row{border-color:#63516f}.roster-row span{color:#c5b5d2}.roster-row i{border-radius:50%;box-shadow:0 2px 0 #171121}
.scoreboard{border-top:3px solid #1c1629;background:#362a48;gap:0}.score{position:relative;border-right:2px solid #21182f;padding:12px 14px}.score.me{background:#51405f;box-shadow:inset 0 -4px var(--player)}.score i{position:relative;width:24px;height:27px;border:2px solid #24182e;border-radius:12px 12px 9px 9px;box-shadow:0 3px 0 #20162b}.score i:after{content:'';position:absolute;width:3px;height:5px;background:#2a1e32;left:5px;top:8px;box-shadow:7px 0 #2a1e32}.score .name{font-weight:bold;color:#f9ebdf}.score small{color:#c8b7d4;font-size:10px}.score strong{font-family:'Arial Black',sans-serif;font-size:25px;text-shadow:1px 2px #1a1225}footer{color:#d0bfd9;margin-top:16px}footer b{color:#fff0d7}
#notice{top:12px;color:#ffdda0;text-shadow:0 2px 3px #161021;padding:5px 10px;font-size:14px}#notice:not(:empty){background:#2b203ddd;border-top:1px solid #f6c77855;border-bottom:1px solid #f6c77855}#roundBanner strong{font-size:76px;text-shadow:4px 5px 0 #2d193e;color:#ffdf85}#roundBanner span{color:#fff0d9;text-shadow:2px 2px #271b39}#personal{border:2px solid #766186;background:#30233ff2;border-radius:12px;box-shadow:0 4px 0 #181124;color:#f4e4dc;font-size:12px;padding:9px 16px}#reload,#jump{color:#ddd0ec}#boardControls{background:#38284ceF;border:3px solid #c8a3d3;border-radius:20px;box-shadow:0 7px 0 #191126;padding:14px 20px;top:49%;width:330px}#boardControls h2{font-size:22px;color:#fff0d7}#boardDie{display:inline-block;background:#fff0d5;color:#382547;border:3px solid #21172e;border-radius:16px;box-shadow:4px 5px 0 #1f172d;font-size:48px;min-width:68px;margin:9px 0 3px;transform:rotate(-5deg)}#boardControls p{color:#ddcce5;font-size:12px}.briefControls{background:#4b3a5d;border:2px solid #8e73a1;border-radius:12px;color:#ffde99}.party-points{color:#ffda7b}#awardsRows small{color:#d0bfd9}
@media(max-width:1000px){.arena{min-height:470px;max-height:none}.brand{font-size:26px}.brand:before{font-size:29px}.score{padding:9px}.score i{width:22px;height:25px}.score:nth-child(-n+3){border-bottom:2px solid #21182f}main{padding:12px}.quiet{padding:8px 10px}#boardControls{padding:12px}}
@media(max-width:600px){.arena{min-height:590px}.brand:before{margin-right:6px}.brand{font-size:25px}.connection{font-size:10px}#overlay{background:#241b38ed;padding:20px}.matchbar{padding:10px}.matchright b{padding:4px 7px;min-width:54px}.score{gap:6px;padding:9px 7px}.score strong{font-size:20px}#boardControls{max-width:58%;padding:10px}#boardControls h2{font-size:16px}#boardDie{font-size:34px;min-width:50px;border-radius:12px}#personal{font-size:10px;gap:7px;padding:8px}#personal>div{gap:8px}}
#joinPanel h1{font-size:clamp(40px,4vw,54px);margin:10px 0 12px}#joinPanel .rules{margin:14px 0}#joinPanel p{font-size:14px;line-height:1.5}#joinPanel .fine{font-size:11px}#overlay{background:linear-gradient(90deg,#241b38fa 0%,#241b38ed 36%,#241b3870 63%,#241b3805 100%)}#boardControls{width:300px;padding:12px 16px}#boardControls h2{font-size:19px}#boardControls .primary{padding:12px;font-size:15px}#boardDie{font-size:40px;min-width:58px;margin-top:7px}#boardControls p{margin:6px 0}
@media(max-width:600px){#overlay{background:#241b38ed}#boardControls{padding:10px}#boardControls h2{font-size:16px}#boardControls .primary{padding:9px;font-size:13px}#boardDie{font-size:34px;min-width:50px}}
.audio-settings{position:relative;margin:-4px 0 12px;color:#d9c9e0;font-size:12px}.audio-settings summary{cursor:pointer;width:max-content;max-width:100%;padding:3px 0}.audio-settings summary span{color:#e7d5ab;margin-left:12px}.audio-settings>div{position:absolute;z-index:20;right:0;top:25px;background:#35263f;border:2px solid #9e7eac;border-radius:12px;box-shadow:0 6px 0 #1f1629;padding:12px 18px;width:310px;max-width:95vw}.audio-settings label{margin:8px 0 5px}.audio-settings input[type=range]{accent-color:#ffd369;padding:3px;border:0}.audio-settings select{font-size:13px;margin-bottom:0}.audio-settings[open] summary{color:#ffdf92}@media(max-width:600px){.audio-settings summary span{display:block;margin:4px 0 0}.audio-settings>div{left:0;right:auto}}
#boardControls.warp{border-color:#aaf1ff;box-shadow:0 7px 0 #191126,0 0 30px #b475dd88}#boardControls.warp #boardDie{background:#d2f4ff;color:#5d347c;transform:rotate(9deg)}

#combatFeed{position:absolute;right:18px;top:53px;pointer-events:none;display:grid;gap:4px;max-width:45%;font-size:12px;color:#fff0d5}#combatFeed div{background:#28192fdf;border-right:3px solid #ee7996;padding:6px 10px;border-radius:5px}#combatToast{position:absolute;left:50%;top:23%;transform:translateX(-50%) rotate(-5deg);color:#ffe5b2;text-shadow:3px 4px #9c2448;font:900 42px 'Arial Black',sans-serif;pointer-events:none}canvas.confirmed{outline:3px solid #ffe3ac;outline-offset:-4px}#personal{max-width:96%;white-space:normal;flex-wrap:wrap;justify-content:center}#buffs{max-width:55ch}#personal>div{flex-wrap:wrap;justify-content:center}

#roomBar{padding:12px 16px;background:#35263f;border:2px solid #795d86;border-radius:12px;margin:10px 0}#roomBar button{margin-left:8px}#roomSettings{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}#roomSettings select{width:auto;margin:0}#roomSettings label{margin:0}#roomSettings input,.room-actions input{width:auto}#seatStatus{font-size:12px;margin:8px 0 0}#roomError:empty{display:none}#roomError{color:#ffd29d}.room-actions{display:flex;gap:12px;align-items:center;margin:12px 0}.room-entry{margin:4px}.panel{padding-bottom:20px}#roomList{max-height:110px;overflow:auto}
#mobileControls{display:none}.stick{width:112px;height:112px;border:2px solid #bba7c8;border-radius:50%;position:relative;background:#35263fd9;touch-action:none;user-select:none}.stick span{position:absolute;top:8px;width:100%;text-align:center;font-size:11px;pointer-events:none}.stick i{position:absolute;width:38px;height:38px;left:35px;top:35px;border-radius:50%;background:#ffd681;pointer-events:none}#mobileControls button{touch-action:none;min-height:64px;background:#e6b577;color:#302037} @media(pointer:coarse){.touch{display:none}#mobileControls.inGame{display:flex;align-items:center;justify-content:space-around;gap:8px;padding:10px env(safe-area-inset-right) 10px env(safe-area-inset-left)}.arena{min-height:0;max-height:none;aspect-ratio:3/2}#overlay{padding:16px;align-items:flex-start}.arena:has(#overlay:not(.hidden)){min-height:540px}main{padding:8px}#personal{font-size:10px;bottom:3px;padding:4px 8px;gap:5px}.scoreboard{grid-template-columns:repeat(6,1fr)}.score{padding:5px}.score .name{max-width:60px}.score strong{font-size:16px}.score i{display:none}footer{font-size:11px}.stick{flex-shrink:0}#notice{font-size:11px}}@media(pointer:coarse) and (orientation:landscape){.arena{max-height:65vh}header{margin-bottom:6px}.brand{font-size:18px}#mobileControls{position:relative}.stick{width:92px;height:92px}.stick i{left:25px;top:25px}}
/* Viewport-sized game shell; all scrolling belongs to in-frame panels. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}#gameFrame{width:100%;height:100vh;height:100dvh;max-width:none;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column;position:relative;overflow:hidden;background:#251c35}#frameToolbar{display:flex;align-items:center;gap:12px;padding:6px 12px;min-height:46px;flex-shrink:0;border-bottom:1px solid #695375}#frameToolbar strong{color:#ffdb8b}#frameRoom{font-size:12px;color:#cdbbd6;margin-right:auto}#frameToolbar button{padding:8px 14px;min-height:34px}#gameFrame>.board{display:flex;flex-direction:column;flex:1;min-height:0;border:0;border-radius:0}#gameFrame .matchbar{min-height:36px;padding:5px 14px;flex-shrink:0}#gameFrame .arena,#gameFrame .arena:has(#overlay:not(.hidden)){flex:1;min-height:0;max-height:none;aspect-ratio:auto;overflow:hidden}#gameFrame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#gameFrame #overlay{padding:22px;align-items:flex-start;justify-content:center;overflow:auto;overscroll-behavior:contain;background:#291e38eb;z-index:5}#gameFrame .panel{margin:auto;width:520px;flex-shrink:0;padding:12px 0 24px}#gameFrame h1{font-size:38px}#gameFrame .rules{margin:12px 0}#gameFrame #roomBar{margin:0 0 16px;padding:10px}#gameFrame #roomSettings{gap:8px}#gameFrame #roomBar button{margin:6px 0}#gameMenu{position:absolute;inset:46px 0 0;z-index:40;background:#291e38fa;padding:20px max(18px,calc((100% - 800px)/2));overflow:auto;overscroll-behavior:contain}.menu-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.menu-heading h2{font-size:25px}#menuControls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#menuControls .connection{width:100%;margin:0}#menuControls .audio-settings{width:100%;margin:12px 0}#menuControls .audio-settings>div{position:static;width:100%;max-width:none;box-shadow:none}#gameMenu .scoreboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #675273;border-radius:8px}#gameMenu footer{display:grid;gap:10px;line-height:1.6}#roomError{position:absolute;top:46px;left:10%;right:10%;z-index:50;background:#4d2944;border-radius:8px;padding:10px;max-height:100px;overflow:auto;margin:0;text-align:center}#gameFrame #combatFeed{top:45px;font-size:11px}#gameFrame #notice{top:4px;font-size:12px;padding:5px;pointer-events:none}#gameFrame #personal{bottom:8px;padding:6px 10px}#gameFrame #mobileControls{position:absolute;inset:0;z-index:4;padding:0;pointer-events:none;display:none}#gameFrame #mobileControls>*{pointer-events:auto;position:absolute;touch-action:none}#gameFrame.menu-open #mobileControls{display:none!important}#gameFrame .touch{display:none}
@media(pointer:coarse),(max-width:700px){#frameToolbar{min-height:42px;padding:4px 8px}#frameToolbar strong{font-size:14px}#frameToolbar button{font-size:12px;padding:7px 10px}#gameMenu{top:42px;padding:12px}#gameFrame.playing .matchbar{min-height:26px;padding:3px 10px}#gameFrame .matchbar b{font-size:12px}#gameFrame .matchbar span{font-size:11px;margin:0}#gameFrame .matchright{flex-direction:row;gap:8px}#gameFrame.playing #population{display:none}#gameFrame.playing .matchbar>div:first-child{display:flex;gap:8px}#gameFrame #mobileControls.inGame{display:block}#gameFrame .stick{width:100px;height:100px;background:#34283d99;border-color:#ddc8e088}#gameFrame .stick i{left:29px;top:29px;background:#ffd681cc}#moveStick{left:12px;bottom:16px}#aimStick{right:12px;bottom:16px}#gameFrame #mobileAction{right:20px;bottom:126px;min-height:48px;min-width:82px;border-radius:24px;background:#e6b577dd}#gameFrame #mobileFire{right:122px;bottom:25px;min-height:48px;max-width:85px;border-radius:24px;background:#e6b577dd}#gameFrame #personal{font-size:10px;bottom:8px;max-width:calc(100% - 245px);gap:4px;min-width:90px}#gameFrame #personal>div{gap:4px}#gameFrame .panel{width:min(500px,100%)}#gameFrame #overlay{padding:12px}#gameFrame h1{font-size:30px;margin:10px 0}#gameFrame .rules{display:none}#gameFrame #combatFeed{max-width:42%;font-size:9px}#gameFrame #combatFeed div{padding:3px 6px}#gameFrame .audio-settings summary{width:100%}#gameFrame #buffs{max-width:30ch}}
#wardrobe{width:100%;border:1px solid #8a6999;border-radius:12px;padding:12px;background:#35263f}#wardrobe summary{cursor:pointer;font-weight:bold;color:#ffe0a2;min-height:26px}.wardrobe-layout{display:grid;grid-template-columns:minmax(120px,240px) 1fr;gap:18px;padding-top:12px}#gameFrame #wardrobePreview{position:static;width:100%;height:auto;max-height:260px;border-radius:12px;object-fit:contain}#wardrobe label{margin:7px 0 4px}#wardrobe select{margin-bottom:9px}#wardrobeStatus{font-size:12px;min-height:20px}#wardrobe .fine{font-size:11px;line-height:1.5} @media(max-width:500px){.wardrobe-layout{grid-template-columns:100px minmax(0,1fr);gap:10px}#wardrobe select{font-size:12px;padding:8px}#wardrobePreview{align-self:center}#wardrobe .primary{font-size:13px;padding:12px}#profileProgress{font-size:12px}}
.cosmetic-goal{display:flex;justify-content:space-between;gap:12px;padding:8px;border-bottom:1px solid #71547e;font-size:12px}.cosmetic-goal span{color:#dcc9dd;text-align:right}#collectionList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:320px;overflow:auto;margin:10px 0}.cosmetic-card{background:#493552;color:#f7e6d8;text-align:left;padding:10px}.cosmetic-card span{display:block;font-size:11px;color:#d9c3d8;margin-top:5px}#wardrobe details{margin-top:14px}#wardrobePreview{position:sticky!important;top:10px} @media(max-width:500px){#collectionList{grid-template-columns:1fr}.cosmetic-goal{display:block}.cosmetic-goal span{display:block;text-align:left;margin-top:4px}.wardrobe-layout{grid-template-columns:105px minmax(0,1fr)}#wardrobe .fine{font-size:10px}}
/* Live, in-frame dressing room. */
#gameFrame #lobbyPanel{width:min(960px,100%)}#lobbyPanel>h1{display:none}.lineup-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.lineup-heading h2{font-size:23px;margin:10px 0}.lobby-lineup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lobby-player{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 10px 12px;border:1px solid #72567f;border-radius:15px;background:#3d2c48;overflow:hidden}.lobby-player.is-you{border-color:#ffd889;box-shadow:inset 0 3px #ffd889}.lobby-player strong{font-size:16px;overflow-wrap:anywhere}.lobby-player>span{font-size:12px;line-height:1.7}.player-title{font-weight:bold;min-height:22px}.player-ready{color:#d1bddb}.look-change{height:20px;color:#bcecc4}.lobby-player details{width:100%;font-size:11px;color:#d9c5df}.lobby-player summary{cursor:pointer;padding:6px}.lobby-player ul{text-align:left;padding-left:20px;line-height:1.7;margin:6px 0}.empty-seat{justify-content:center;min-height:240px;background:#30243a;border-style:dashed;color:#bca7c7}.seat-silhouette{font-size:40px!important;opacity:.6;margin:20px}#gameFrame .lobby-player canvas{position:static;inset:auto;width:100%;height:160px;object-fit:contain;touch-action:auto}#wardrobePeers{width:100%;margin-bottom:14px}#wardrobePeers .lobby-lineup{grid-template-columns:repeat(3,minmax(0,1fr))}#wardrobePeers .lobby-player canvas{height:100px}#wardrobePeers .lobby-player strong{font-size:12px}#wardrobePeers .lobby-player>span{font-size:10px}#wardrobePeers h3{font-size:14px;color:#ebd9ef}#lobbyPanel #seatStatus{display:none}
@media(max-width:600px){.lobby-lineup,#wardrobePeers .lobby-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}.lineup-heading h2{font-size:18px}.lineup-heading button{font-size:12px;padding:10px}#gameFrame .lobby-player canvas{height:130px}.lobby-player{padding:6px}.lobby-player strong{font-size:13px}.lobby-player>span{font-size:10px}.empty-seat{min-height:220px}}
/* Outfit names carry rarity and animated finishes in both live lineups. */
.cosmetic-name{font-weight:700;color:#f3e5da}.cosmetic-name.rarity-uncommon{color:#a9e6b5}.cosmetic-name.rarity-rare{color:#9dcbff}.cosmetic-name.rarity-epic{color:#dfafff}.cosmetic-name.rarity-mastery{color:#ffdc83;text-shadow:0 0 7px #eaae342e}.cosmetic-name.finish-rainbow{color:#ffafc4;animation:outfit-rgb 4s linear infinite}.cosmetic-name.finish-disco{color:#ffd392;animation:outfit-rgb 1.8s steps(1,end) infinite}.cosmetic-name.finish-aurora{color:#a2eee0;animation:outfit-aurora 4s ease-in-out infinite alternate}.cosmetic-name.finish-lava{color:#ffac89}.cosmetic-name.finish-chrome{color:#dce5f3}.cosmetic-name.finish-galaxy{color:#d9b6ff}
@keyframes outfit-rgb{0%,100%{color:#ffafc4}16%{color:#ffd392}33%{color:#c7efa0}50%{color:#97eee0}66%{color:#a9caff}83%{color:#dfafff}}
@keyframes outfit-aurora{from{color:#a2eee0}to{color:#c1b4ff}}
@media(prefers-reduced-motion:reduce){.cosmetic-name[class*="finish-"]{animation:none}}
/* Collectible locker: a fitting stage beside a browsable toy shelf. */
#gameMenu:has(#wardrobe[open]){padding-inline:max(14px,calc((100% - 1140px)/2))}#wardrobe{padding:16px}#wardrobe .locker-tabs{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}#wardrobe .locker-tabs button{background:#493553;color:#efdff3;flex:1;min-width:90px}#wardrobe .locker-tabs button[aria-pressed=true]{background:#ffda86;color:#342637;box-shadow:0 3px #a96f3f}.inventory-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}.fitting-stage{align-self:start;position:sticky;top:0;background:#2b2038;border-radius:18px;padding:12px;text-align:center}.fitting-stage h3{font-size:18px;margin:10px 0}.fitting-stage p{font-size:12px}.fitting-stage>button{margin:5px 0;width:100%}.fitting-stage details{text-align:left}#gameFrame #wardrobePreview{position:static!important;width:100%;height:auto;max-height:360px}#wardrobe .inventory-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#wardrobe .inventory-filters input{grid-column:1/-1}#wardrobe .inventory-filters select{width:100%;min-width:0;margin:0;padding:10px;font-size:12px}#wardrobe #collectionList{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;gap:8px}#wardrobe .inventory-item{min-width:0;border:1px solid #876394;border-bottom:3px solid #a9e6b5;border-radius:10px;overflow:hidden;background:#42304b}#wardrobe .inventory-item.rarity-epic{border-bottom-color:#dfafff}#wardrobe .inventory-item.rarity-rare{border-bottom-color:#9dcbff}#wardrobe .inventory-item.rarity-mastery{border-bottom-color:#ffdc83}#wardrobe .cosmetic-card{display:block;width:100%;height:100%;padding:8px;background:transparent;text-align:center}#wardrobe .cosmetic-card span{font-size:12px;margin:0}#wardrobe .cosmetic-card small{display:block;color:#cdb8d4;font-size:10px;margin-top:7px}#gameFrame #collectionList canvas,#gameFrame #savedLooks canvas{position:static;inset:auto;width:100%;height:130px;object-fit:contain;pointer-events:none}#wardrobe .inventory-item>button[data-craft]{width:100%;font-size:11px;padding:8px;background:#b9d9b5;color:#2b2038}#wardrobe .inventory-item:has([data-craft]) .cosmetic-card{height:auto}.inventory-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0}#inventoryCount,#inventoryPage{font-size:12px;color:#dac4dc}.crate-theatre{border:2px dashed #a887b6;border-radius:20px;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background:#291e35;text-align:center;overflow:hidden}.crate-theatre #crateBox{font-size:110px}.crate-theatre.opening #crateBox{animation:crate-rattle .15s ease-in-out infinite alternate}.crate-theatre.revealed{border-style:solid;border-color:#a9e6b5;animation:crate-pop .4s ease-out}.crate-theatre.rarity-rare{border-color:#9dcbff;box-shadow:inset 0 0 70px #5f9cee25}.crate-theatre.rarity-epic{border-color:#dfafff;box-shadow:inset 0 0 90px #ca78ff45}#gameFrame #cratePreview,#gameFrame #inspectPreview{position:static;inset:auto;object-fit:contain;width:100%;height:280px;max-width:420px;margin:auto}#locker_crates>button{margin-top:12px}#wardrobe #progressStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}#progressStats div{display:grid;text-align:center;background:#483251;border-radius:10px;padding:14px}#progressStats b{font-size:28px;color:#ffda86}#progressStats span{font-size:12px;color:#dac4dc}#recentUnlocks{display:flex;gap:8px;overflow:auto;margin-bottom:18px;padding:5px}#recentUnlocks button{min-width:165px;max-width:200px;background:#493551;text-align:left}#recentUnlocks small{display:block;font-size:10px;color:#dbc8de;margin-top:7px}#achievementList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.achievement{background:#42304b;text-align:left;color:#dac4dc;display:grid;gap:8px;font-size:12px}.achievement>span:not(.cosmetic-name){font-size:11px}.achievement progress{width:100%;accent-color:#ffd889;height:9px}.achievement small{font-size:11px}#savedLooks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}#savedLooks article{border:1px solid #80668b;border-radius:12px;padding:10px;background:#42304b;text-align:center;min-width:0}#savedLooks h3{font-size:14px;overflow-wrap:anywhere}#savedLooks button{width:100%;margin-top:6px;font-size:11px;padding:9px}#inspectItems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;font-size:13px}#inspectItems>div{padding:10px;background:#45324e;border-radius:7px}.inspect-player{font-size:11px;margin-top:8px;padding:7px 12px}.emote-label{min-height:22px;color:#ffdfa0!important}.lobby-emotes{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.lobby-emotes button{font-size:12px;background:#52405b;color:#ffe3a2;padding:10px}#wardrobePeers>details>summary{font-size:13px}#wardrobePeers>details>.lobby-lineup{margin-top:12px}#wardrobePeers .lobby-player{padding:6px}
@keyframes crate-rattle{from{transform:rotate(-8deg) scale(.95)}to{transform:rotate(8deg) scale(1.05)}}@keyframes crate-pop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
@media(max-width:850px){.inventory-layout{grid-template-columns:220px minmax(0,1fr)}#wardrobe #collectionList{grid-template-columns:repeat(2,minmax(0,1fr))}#savedLooks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){#wardrobe{padding:10px}.inventory-layout{display:block}.fitting-stage{position:static;margin-bottom:14px}#gameFrame #wardrobePreview{height:230px}.fitting-stage details{margin-top:8px}#wardrobe .locker-tabs button{font-size:12px;min-width:60px;padding:10px 5px}#wardrobe .inventory-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#wardrobe .inventory-filters input{grid-column:1/-1}#achievementList{grid-template-columns:1fr}#wardrobe #progressStats{grid-template-columns:repeat(2,1fr)}#gameFrame #collectionList canvas{height:110px}#inspectItems{grid-template-columns:1fr}.crate-theatre{min-height:270px}#gameFrame #cratePreview{height:230px}}
@media(prefers-reduced-motion:reduce){.crate-theatre.opening #crateBox,.crate-theatre.revealed{animation:none}}
/* Cosmetics is a first-class screen, reachable from both the toolbar and menu. */
#gameMenu:not(.cosmetics-mode)>#wardrobe{display:none}#gameMenu.cosmetics-mode{padding-inline:max(14px,calc((100% - 1140px)/2))}#gameMenu.cosmetics-mode>#menuControls,#gameMenu.cosmetics-mode>.scoreboard,#gameMenu.cosmetics-mode>footer,#gameMenu.cosmetics-mode>h3{display:none}#gameMenu.cosmetics-mode>#wardrobe{border:0;background:transparent;padding:0}#gameMenu .menu-heading{position:sticky;top:-20px;z-index:3;background:#291e38;padding:10px 0;margin-bottom:8px}.collection-intro{font-size:13px;color:#dcc8e0;margin:0 0 12px}#menuControls .cosmetics-entry{width:100%;display:grid;gap:8px;text-align:left;background:#493251;border:2px solid #e8bd73;color:#ffe1a0;padding:20px;margin:8px 0 16px;border-radius:14px}.cosmetics-entry strong{font-size:21px}.cosmetics-entry span{font-size:13px;color:#e5d3e9}.cosmetics-entry b{font-size:13px;margin-top:6px}#frameCosmetics{color:#ffe1a0;border-color:#cfa66b}#frameToolbar button[aria-expanded=true]{background:#6a4a66;border-color:#ffe1a0}#wardrobe .locker-tabs{position:sticky;top:64px;z-index:2;background:#291e38;padding:8px 0}
@media(max-width:700px){#frameToolbar{gap:6px}#frameToolbar #frameRoom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}#gameMenu .menu-heading{top:-12px;padding:8px 0}#gameMenu.cosmetics-mode{padding-inline:12px}#wardrobe .locker-tabs{top:58px}#gameMenu .menu-heading h2{font-size:23px}}
@media(max-width:450px){#frameRoom{display:none}#frameToolbar strong{margin-right:auto;font-size:12px}#frameToolbar button{padding:7px 8px;font-size:11px}}
#gameMenu.cosmetics-mode{background:#291e38}.cosmetics-mode .fitting-stage{top:120px}
@media(max-width:550px){.cosmetics-mode .fitting-stage{top:auto}}
#accountPanel{width:100%;padding:16px;border:1px solid #80648d;border-radius:12px;margin:8px 0;background:#382a43}#accountPanel h3{margin-top:0;color:#ffe2a2}#accountPanel p{font-size:13px}#googleButton{margin-top:12px;min-width:0}#accountMessage{font-size:12px;color:#d5bfdc}
/* Community and matchmaking: readable cards inside the game frame. */
#socialPanel{flex:1 1 100%;min-width:0;padding:18px;border:1px solid #8e7296;border-radius:18px;background:#291f38;margin-top:12px}#socialPanel h3{margin:16px 0 8px}#socialPanel h4{margin:18px 0 8px}#socialPanel p{line-height:1.5}.social-tabs,.social-actions{display:flex;gap:8px;flex-wrap:wrap}.social-tabs button{flex:1;min-height:44px}.social-tabs [aria-pressed=true],#matchVotes [aria-pressed=true]{background:#ffce6a;color:#2e2139;box-shadow:0 0 0 2px #fff0c0}.room-filters{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.room-filters h3{flex:0 0 100%;margin:0}.room-filters label{flex:1 1 110px;min-width:0;display:flex;flex-direction:column;gap:5px;font-size:12px}.room-filters select{width:100%;min-width:0;margin:0}.room-entry{display:flex;flex-direction:column;text-align:left;width:100%;gap:5px;margin-bottom:8px}.room-entry span,.room-entry small{font-size:12px;font-weight:normal;opacity:.85}.friend-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #67506f}.friend-row>div{min-width:0}.friend-row strong{overflow-wrap:anywhere}.friend-row small{display:block;color:#cbb9d2;margin-top:5px}.friend-row.online small{color:#8fe3a0}.friend-row.online small::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#5ee37a;margin-right:6px;vertical-align:1px}.friend-row button{padding:8px 12px;min-height:42px;font-size:12px}#friendForm{display:block;margin:16px 0}#friendForm .share{display:flex}#friendForm input,#friendCode{min-width:0;flex:1;width:100%}#socialError:empty{display:none}#socialError{color:#ffce6a}#roomName{max-width:250px;width:100%}.kick-player{font-size:11px;padding:6px!important;margin-top:6px;color:#fda4a4!important}#matchVotes{margin-top:20px}#voteStatus{font-size:12px;line-height:1.6}.leaderboard-scroll{overflow:auto}#leaderboardRows table{border-collapse:collapse;width:100%;font-size:13px}#leaderboardRows th,#leaderboardRows td{padding:12px 9px;text-align:left;border-bottom:1px solid #67506f}#leaderboardRows thead{color:#ffce6a}@media(max-width:520px){#socialPanel{padding:12px}.friend-row{align-items:flex-start;flex-direction:column}.friend-row .social-actions{width:100%}.friend-row .social-actions button{flex:1}#roomName{max-width:100%}.room-filters label{flex-basis:100px}}
#friendForm .share button{width:auto;flex:0 0 auto;padding-inline:16px}#friendForm .share input{width:0;min-width:100px}#roomList{max-height:240px}.room-entry{margin:4px 0}
/* Thumb zones and game-specific controls retain the toy-box palette. */
#touchSettings{flex:1 1 100%;padding:14px;border:1px solid #72567f;border-radius:12px;background:#35263f}#touchSettings h3{margin:0 0 10px}#touchSettings label{display:block}#touchSettings .check-control{display:flex;align-items:center;gap:10px;min-height:44px}#touchSettings input{width:auto}#gameFrame.no-touch-controls #mobileControls{display:none!important}#gameFrame.touch-controls #mobileControls.inGame{display:block}#mobileHint{position:absolute!important;left:20%;right:20%;top:32px;pointer-events:none!important;text-align:center;font-size:11px;color:#fff3d9;text-shadow:0 1px 3px #000;background:#291e3866;border-radius:8px;padding:5px}#gameFrame.touch-controls .stick{width:100px;height:100px;background:#34283d99;border-color:#ddc8e088}#gameFrame.touch-controls .stick i{left:29px;top:29px;background:#ffd681cc}#gameFrame.touch-controls #moveStick{left:max(12px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom))}#gameFrame.touch-controls #aimStick{right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}#gameFrame.touch-controls #mobileAction{right:20px;bottom:126px;min-height:52px;min-width:92px;border-radius:26px;padding:8px 12px;background:#e6b577ee}#gameFrame.touch-controls #mobileFire{right:122px;bottom:25px;min-height:52px;max-width:85px;border-radius:26px;padding:8px 12px;background:#e6b577ee}#gameFrame.touch-controls #mobileControls:not(.has-aim) #mobileAction{bottom:35px;right:20px}#gameFrame.touch-controls #mobileControls.has-aim:not(.has-fire) #mobileAction{right:122px;bottom:25px}#gameFrame.touch-controls #mobileControls.waiting>*:not(#mobileHint){opacity:.45}#mobileHint{transition:opacity .35s}#mobileHint.faded{opacity:0}#mobileHint.notice{background:#5b2c1cd9;color:#ffe3a3;font-weight:700}#gameFrame.touch-controls #mobileControls:not(.has-aim) #mobileFire{bottom:105px;right:20px}#gameFrame.touch-controls #personal{top:6px;bottom:auto;left:50%;max-width:65%;min-width:0;font-size:10px;pointer-events:none}#gameFrame.touch-controls .cooling{opacity:.65}#gameFrame.touch-controls .pressed{box-shadow:inset 0 0 0 3px #fff3d9}#gameFrame.left-handed #moveStick{left:auto;right:max(12px,env(safe-area-inset-right))}#gameFrame.left-handed #aimStick{right:auto;left:max(12px,env(safe-area-inset-left))}#gameFrame.left-handed #mobileAction{right:auto;left:20px}#gameFrame.left-handed #mobileFire{right:auto;left:122px}#gameFrame.left-handed #mobileControls:not(.has-aim) #mobileAction,#gameFrame.left-handed #mobileControls:not(.has-aim) #mobileFire{right:auto;left:20px}#gameFrame.left-handed #mobileControls.has-aim:not(.has-fire) #mobileAction{right:auto;left:122px}@media(max-width:420px){#frameToolbar{gap:5px}#frameToolbar button{padding:7px 8px}#frameRoom{display:none}#frameToolbar strong{margin-right:auto}#mobileHint{left:8%;right:8%;top:45px;font-size:10px}#gameFrame.touch-controls #personal{max-width:90%}}@media(max-width:350px){#frameToolbar strong{font-size:11px}#frameToolbar button{font-size:11px}#gameFrame.touch-controls .stick{width:88px;height:88px}#gameFrame.touch-controls .stick i{left:23px;top:23px}#gameFrame.touch-controls #mobileFire{right:104px;max-width:72px}#gameFrame.left-handed #mobileFire{right:auto;left:104px}}
#gameFrame.touch-controls #notice{display:none}
/* Match receipts keep the existing plum, cream and gold dressing-room style. */
.match-rewards{margin-top:20px;padding:18px;border:1px solid #94759d;border-radius:16px;background:#35263f;text-align:left}.reward-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.reward-heading h3{margin:5px 0;font-size:20px;color:#ffe4ad}.reward-heading p{margin:4px 0;font-size:12px}.reward-heading small{font-size:10px;letter-spacing:.08em;color:#dbc4e2}.reward-xp{font-size:38px;color:#ffdc83;line-height:1;white-space:nowrap}.reward-xp small{display:block;text-align:right;margin-top:6px}.reward-breakdown{font-size:12px;line-height:1.6;color:#e6d5e9}.reward-crate{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px;background:#281e33;border-radius:10px}.reward-crate span,.reward-crate small{font-size:12px}.match-rewards progress{display:block;width:100%;height:10px;border:0;border-radius:6px;accent-color:#ffd681;overflow:hidden}.match-rewards progress::-webkit-progress-bar{background:#5e476d}.match-rewards progress::-webkit-progress-value{background:#ffd681}.match-rewards h4{margin:16px 0 9px}.reward-unlocks,.reward-goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}.reward-unlocks button{text-align:left;min-height:64px;white-space:normal}.reward-unlocks small,.reward-goals small{display:block;font-size:11px;color:#d2bddb;margin:5px 0}.reward-goals>div{padding:10px;border-left:3px solid #9a79ae;background:#2b2136;border-radius:5px}.reward-goals span:last-child{font-size:11px;display:block;margin-top:6px}.reward-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.reward-actions button{min-height:44px}#latestRewards .reward-heading h3{font-size:18px}@media(max-width:480px){.match-rewards{padding:12px}.reward-heading h3{font-size:17px}.reward-xp{font-size:30px}.reward-goals,.reward-unlocks{grid-template-columns:1fr}.reward-actions button{flex:1}}
/* The pre-party: a playable-looking toy stage beside a compact entry card. */
#gameFrame #joinPanel{width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);gap:32px;align-items:center;padding:8px 0 20px;text-align:left}#gameFrame #joinPanel.hidden{display:none}.welcome-showcase{min-width:0;position:relative}.welcome-eyebrow{font-size:14px;font-weight:900;letter-spacing:.12em;color:#ffdf96;display:flex;align-items:center;gap:14px}.welcome-eyebrow span{font-size:9px;letter-spacing:.08em;color:#baa8c8;border-left:1px solid #796088;padding-left:14px}#gameFrame .welcome-showcase h1{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(40px,5vw,66px);line-height:.99;letter-spacing:-3px;margin:24px 0 14px;color:#fff0d5;text-shadow:0 4px #17101f} .welcome-showcase h1 em{font-style:normal;color:#ffd377}.welcome-tagline{color:#d8c3de;line-height:1.55;font-size:15px;margin:0}#gameFrame #welcomeCast{position:static;inset:auto;width:100%;height:auto;aspect-ratio:640/400;display:block;margin:-30px 0 -25px;pointer-events:none}.welcome-scene-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}.welcome-scene-controls>span{font-size:9px;letter-spacing:.07em;color:#cbb2d2}.welcome-scene-controls button{padding:8px;font-size:11px;min-height:36px}.welcome-feature{border-top:1px solid #775483;border-bottom:1px solid #775483;margin-top:14px;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.welcome-feature small{font-size:9px;letter-spacing:.12em;color:#bfa4cb}.welcome-feature strong{display:block;font-size:20px;color:#ffe3a4;margin:5px 0}.welcome-feature div>span{display:block;font-size:12px;line-height:1.5;color:#d2bdd9}.welcome-feature button{flex-shrink:0;font-size:12px}.welcome-wardrobe{background:transparent;color:#eee0f1;display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:16px 0;font-size:12px}.welcome-wardrobe span{color:#a9e4ce}.welcome-entry{background:#3b2b47;border:1px solid #886699;border-top:4px solid #ffda8b;border-radius:20px;padding:26px;box-shadow:0 16px 40px #10091b44;min-width:0}.welcome-entry .stamp{font-size:10px;letter-spacing:.08em;color:#c9afd3}.welcome-entry h2{font-family:'Arial Black',sans-serif;font-size:30px;letter-spacing:-1px;margin:12px 0 8px}.welcome-description{font-size:13px;line-height:1.5;color:#d6c2df;margin:0 0 20px}#welcomeAccount{width:100%;display:flex;justify-content:space-between;border-color:#ad8fb8;background:#51395e;min-height:44px}.welcome-guest{text-align:center;font-size:11px;color:#c9b4d2;margin:16px 0}.welcome-entry #joinForm{display:block}.welcome-entry input{min-width:0}.welcome-entry #name{width:100%;margin-bottom:10px}.welcome-entry .room-actions{margin-top:16px;gap:10px;display:flex;align-items:center;flex-wrap:wrap}.welcome-entry .room-actions label{font-size:12px;display:flex;gap:7px;align-items:center;margin:0}.welcome-entry .room-actions input{width:auto}.welcome-entry .share{margin-top:12px;display:flex;gap:7px}.welcome-entry .share input{width:0;flex:1}.welcome-entry .share button{width:auto;flex-shrink:0;padding:10px}.welcome-entry>.fine{font-size:11px;line-height:1.6;color:#bea8c9;margin:16px 0}.welcome-rooms{border-top:1px solid #775883;margin-top:12px;padding-top:6px}.welcome-rooms>summary{cursor:pointer;padding:12px 0;font-size:13px;color:#ffe0a2}.welcome-rooms .room-filters h3{display:none}.welcome-rooms .room-filters{margin-top:4px}.welcome-rooms select{font-size:12px}.welcome-rooms #roomList{max-height:200px}
@media(max-width:760px){#gameFrame #joinPanel{grid-template-columns:1fr;max-width:520px;gap:16px}#gameFrame .welcome-showcase h1{font-size:44px;margin:18px 0 10px}.welcome-tagline{font-size:13px;max-width:45%}#gameFrame #welcomeCast{width:70%;margin:-140px -8px -24px auto}.welcome-eyebrow{font-size:12px}.welcome-feature{padding:12px 0;margin-top:8px}.welcome-feature strong{font-size:17px}.welcome-feature div>span{font-size:11px}.welcome-scene-controls>span{font-size:8px}.welcome-entry{padding:20px}.welcome-wardrobe{padding-bottom:0}.welcome-entry h2{font-size:26px}.welcome-description{margin-bottom:14px}}
@media(max-width:390px){#gameFrame .welcome-showcase h1{font-size:37px;letter-spacing:-2px}.welcome-feature button{padding:10px 7px}.welcome-wardrobe{font-size:11px}.welcome-eyebrow span{font-size:8px}.welcome-tagline{font-size:11px}#gameFrame #welcomeCast{margin-top:-115px}.welcome-entry{padding:16px}}
#gameFrame:has(#joinPanel:not(.hidden)) .matchbar{display:none}#gameFrame:has(#joinPanel:not(.hidden)) #game{visibility:hidden}#gameFrame #welcomeCast{height:clamp(220px,34vh,320px);margin:-14px 0 -12px;object-fit:contain}.welcome-entry .stamp{color:#283b34}#gameFrame .welcome-showcase h1{margin-top:20px}
@media(max-width:760px){#gameFrame #welcomeCast{height:auto;margin:-140px -8px -24px auto}}
@media(max-width:390px){#gameFrame #welcomeCast{margin-top:-115px}}
@media(max-width:760px){.welcome-tagline{display:none}#gameFrame #welcomeCast{width:65%;height:auto;margin:-100px -6px -15px auto}.welcome-feature{padding:9px 0}.welcome-feature small,.welcome-feature div>span{display:none}.welcome-feature strong{font-size:15px;margin:0}.welcome-entry .stamp{display:none}.welcome-entry h2{margin-top:0}.welcome-wardrobe{padding-top:12px}}
@media(max-width:760px){#gameFrame .welcome-showcase h1{font-size:clamp(24px,7vw,36px);letter-spacing:-1px;line-height:1.08;max-width:45%}#gameFrame #welcomeCast{margin-top:-78px}}
/* The plaza is a wide playable strip, not another game seat. */
#gameFrame #overlay:has(#joinPanel:not(.hidden)){flex-direction:column;justify-content:flex-start;align-items:stretch;padding-bottom:0}#gameFrame #joinPanel{margin:auto;flex-shrink:0}#plaza{flex-shrink:0;margin:22px -22px 0;background:#21192e;border-top:2px solid #725482;text-align:left}#plaza.hidden{display:none}.plaza-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;margin:0}.plaza-heading h2{font-size:20px;margin:0;color:#ffe0a2}.plaza-heading h2 span{font:12px 'Trebuchet MS';color:#b9e6d4;margin-left:12px}.plaza-heading p{font-size:12px;color:#c8b2d3;margin:5px 0 0}#plazaExpand{display:none}.plaza-stage{position:relative;height:clamp(360px,34vh,460px);overflow:hidden}#gameFrame #plazaCanvas{position:static;display:block;width:100%;height:100%;object-fit:fill;touch-action:none;cursor:crosshair}.plaza-hint{position:absolute;top:8px;left:18px;font-size:11px;color:#d4bedc;pointer-events:none}.plaza-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 20px;border-top:1px solid #594263}.plaza-tools>button,.plaza-tools summary{font-size:12px;min-height:40px;padding:11px;border:1px solid #725580;border-radius:9px;color:#efdef4;background:#3b2b48;cursor:pointer}.plaza-tools details{position:relative}.plaza-tools details>div{position:absolute;bottom:50px;left:0;z-index:12;width:200px;padding:8px;border:1px solid #a787b6;border-radius:12px;background:#392945;box-shadow:0 8px 30px #0008}.plaza-tools details button{display:block;width:100%;margin:4px 0;text-align:left;background:#543b62;color:#ffe8c7;font-size:12px}.plaza-tools #plazaStatus{font-size:11px;color:#c6b0d0;margin-left:auto;max-width:440px}#plazaInspect{position:absolute;right:12px;top:8px;bottom:8px;width:340px;z-index:10;overflow:auto;padding:14px;background:#392a47f5;border:1px solid #d6b1e0;border-radius:15px;box-shadow:0 10px 30px #10051a88}#plazaCloseInspect{float:right;padding:5px 12px;font-size:20px}#plazaInspect h3{font-size:17px;color:#ffe2a0;margin:5px 0}#gameFrame #plazaPreview{position:static;width:100px;height:90px;float:left;object-fit:contain}#plazaItems{font-size:11px;line-height:1.7;max-height:90px;overflow:auto}#plazaItems>span{display:block}#plazaInvitePlayer{clear:both;margin-top:12px;font-size:13px;padding:10px}#plazaInspect .fine{font-size:10px;margin-bottom:0}#plazaInvitation{padding:14px 22px;background:#533b5d;display:flex;align-items:center;gap:12px;flex-wrap:wrap}#plazaInvitation.hidden{display:none}#plazaInvitation span{flex:1;min-width:180px;font-size:13px}#plazaInvitation button{width:auto;font-size:12px;padding:12px}#plazaToast{position:absolute;top:45px;left:50%;transform:translateX(-50%);z-index:55;max-width:90%;padding:12px 20px;background:#543b61;border:1px solid #c09dcf;border-radius:12px;color:#ffe6b7;font-size:13px;box-shadow:0 8px 20px #0005;pointer-events:none}#plaza button:focus-visible,#plaza summary:focus-visible,#plazaCanvas:focus-visible{outline:3px solid #ffdf94;outline-offset:-3px}
@media(max-width:760px){#plaza{margin:18px -12px 0}.plaza-heading{padding:14px 12px}.plaza-heading h2{font-size:16px}.plaza-heading h2 span{display:block;margin:5px 0 0;font-size:11px}.plaza-heading p{display:none}#plazaExpand{display:block;font-size:12px}#plaza:not(.expanded) #plazaBody{display:none}.plaza-stage{height:330px}.plaza-hint{font-size:10px;left:10px;right:10px;line-height:1.4}.plaza-tools{padding:10px;gap:6px}.plaza-tools #plazaStatus{margin:0;flex-basis:100%;font-size:10px}.plaza-tools>button,.plaza-tools summary{font-size:11px;padding:10px 8px}.plaza-tools details>div{left:auto;right:-50px;width:180px}#plazaInspect{width:calc(100% - 24px)}#plazaInvitation{padding:12px}}
.plaza-tools details>div{max-height:240px;overflow:auto}
.room-exits{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;border-top:1px solid #795f87;margin-top:12px;padding-top:10px}.room-exits>button{min-height:44px}.room-exits details,.room-close{padding:10px 12px;border:1px solid #a67589;border-radius:9px;color:#ffcada}.room-exits summary,.room-close summary{cursor:pointer;font-size:13px;font-weight:bold;min-height:24px}.room-exits p,.room-close p{font-size:12px;max-width:360px;line-height:1.5}.room-exits [data-close-room],.room-close [data-close-room]{background:#74384f;color:#fff0e5;min-height:44px}.room-close{flex:1 1 100%}
/* One front door: the people are the hero, with a joining counter beside them. */
#gameFrame #overlay:has(#joinPanel:not(.hidden)){padding:24px 36px;background:radial-gradient(ellipse at 28% 52%,#50396066,transparent 65%),#291e38;justify-content:center}
#gameFrame #joinPanel{width:min(1540px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);grid-template-areas:'intro entry' 'plaza entry';column-gap:clamp(24px,4vw,72px);row-gap:0;align-items:center;padding:12px 0}
.welcome-intro{grid-area:intro;align-self:end;padding:10px 12px 0}.welcome-brand{font-size:20px;font-weight:900;color:#ffe2a2;letter-spacing:-.5px}.welcome-brand span{font-size:12px;font-weight:normal;color:#c4accf;margin-left:14px;letter-spacing:0}#gameFrame .welcome-intro h1{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(38px,4.4vw,72px);line-height:1.02;letter-spacing:-3px;color:#fff1d4;max-width:700px;margin:22px 0 14px}.welcome-intro p{font-size:15px;line-height:1.6;color:#d6c1de;margin:0}.welcome-links{display:flex;gap:10px;align-items:center;margin:18px 0 0}.welcome-links button{font-size:12px;min-height:40px}.welcome-links #welcomeWardrobe{background:transparent;border:1px solid #9374a2;color:#e9d9ef;border-radius:22px;padding:8px 18px;width:auto;display:block}.welcome-links #welcomePlay{display:none}
#joinPanel .welcome-entry{grid-area:entry;position:relative;align-self:center;background:#38283fe8;border:1px solid #9575a1;border-top:3px solid #ffda8b;border-radius:22px;padding:26px;box-shadow:0 20px 80px #160b2133}.welcome-entry:before{content:'';position:absolute;inset:-16px;z-index:-1;border-radius:32px;background:#bb86d308;pointer-events:none}
#joinPanel #plaza{grid-area:plaza;margin:0;border:0;background:transparent;min-width:0;align-self:start}#joinPanel .plaza-heading{padding:18px 12px 0;display:block}#joinPanel .plaza-heading h2{font-size:12px;display:flex;align-items:center;gap:8px}#joinPanel .plaza-heading h2 span{margin:0;font-size:12px;color:#bce2cb}.plaza-live-dot{width:7px;height:7px;border-radius:50%;background:#a9dfbb;box-shadow:0 0 10px #a9dfbb55;flex:none}#joinPanel .plaza-heading p{display:none}#joinPanel #plazaBody{display:block}#joinPanel .plaza-stage{height:clamp(300px,36vh,430px);overflow:hidden}#joinPanel .plaza-hint{top:14px;left:12px;right:8px;font-size:11px;color:#bfa7cb}#joinPanel .plaza-tools{border:0;padding:0 12px 10px;gap:7px}#joinPanel .plaza-tools>button,#joinPanel .plaza-tools summary{background:#48315199;border-color:#8e6b9e66;border-radius:20px;padding:10px 13px;min-height:40px}#joinPanel .plaza-tools #plazaStatus{flex-basis:100%;max-width:none;margin:6px 0 0;min-height:15px;color:#b9a0c5;font-size:11px}#joinPanel #plazaInspect{top:36px;bottom:10px}#joinPanel #plazaInvitation{border-radius:12px;margin:0 12px;background:#573961}
@media(min-width:1700px){#gameFrame #joinPanel{grid-template-columns:minmax(0,1fr) 420px}#joinPanel .plaza-stage{height:430px}#joinPanel .welcome-entry{padding:32px}.welcome-intro p{font-size:17px}}
@media(max-width:1000px) and (min-width:761px){#gameFrame #overlay:has(#joinPanel:not(.hidden)){padding:20px}#gameFrame #joinPanel{grid-template-columns:minmax(0,1fr) 330px;column-gap:16px}#gameFrame .welcome-intro h1{font-size:42px;letter-spacing:-2px}.welcome-brand span{display:none}.welcome-intro p{font-size:13px}.welcome-intro p br{display:none}}
@media(max-width:760px){#gameFrame #overlay:has(#joinPanel:not(.hidden)){padding:16px 12px}#gameFrame #joinPanel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'intro' 'plaza' 'entry';width:min(520px,100%);gap:0;padding:0}.welcome-intro{padding:4px 8px 0}.welcome-brand{font-size:17px}.welcome-brand span{display:none}#gameFrame .welcome-intro h1{font-size:40px;letter-spacing:-2px;margin:16px 0 10px;max-width:330px}.welcome-intro p{font-size:13px}.welcome-intro p br{display:none}.welcome-links{margin-top:12px;gap:8px}.welcome-links #welcomePlay{display:block;width:auto;font-size:12px;padding:10px 15px;border-radius:22px}.welcome-links #welcomeWardrobe{font-size:11px;padding:8px 12px}#joinPanel .plaza-heading{padding:18px 8px 0}#joinPanel .plaza-stage{height:280px}#joinPanel .plaza-hint{font-size:10px;left:8px;max-width:280px}#joinPanel .plaza-tools{padding:0 8px 16px;gap:6px}#joinPanel .plaza-tools>button,#joinPanel .plaza-tools summary{font-size:11px;padding:10px;min-height:42px}#joinPanel .plaza-tools #plazaStatus{font-size:10px;line-height:1.4}#joinPanel .welcome-entry{padding:22px 18px;margin:10px 0 12px}#joinPanel #plazaInspect{top:35px}#joinPanel .plaza-tools details>div{right:auto;left:0}#joinPanel .plaza-tools details:nth-of-type(3)>div{left:auto;right:0}}
@media(prefers-reduced-motion:reduce){#gameFrame #overlay{scroll-behavior:auto}}
#joinPanel #plaza:not(.expanded) #plazaBody{display:block}
#joinPanel .welcome-entry:before{content:none}
/* Front-page venue: the live plaza stage is the hero, framed like a window into the party; the Next match pill mirrors the door in the scene. */
#gameFrame .welcome-intro h1{font-size:clamp(34px,3.8vw,62px);margin:14px 0 10px}.welcome-intro p{font-size:14px;line-height:1.55}#joinPanel .plaza-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding:14px 12px 12px}#joinPanel .plaza-stage{height:clamp(300px,46vh,540px);border-radius:22px;border:1px solid #6f5285;background:#120b1b;box-shadow:0 26px 70px #0b051499}#joinPanel .plaza-hint{top:auto;bottom:10px;left:12px;right:auto;max-width:calc(100% - 24px);padding:5px 11px;border-radius:12px;background:#12091acc;color:#dccae4}#joinPanel .plaza-tools{padding-top:12px}
.plaza-door{display:flex;align-items:center;gap:9px;width:auto;min-height:40px;padding:5px 14px 5px 5px;border:1px solid #9ff5c870;border-radius:22px;background:#241a31;color:#fff0d9;font-size:12px;box-shadow:0 0 18px #9ff5c81f}.plaza-door b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#1c1326;background:#9ff5c8;border-radius:16px;padding:7px 10px;white-space:nowrap}.plaza-door span{font-weight:normal;color:#c5afd1}.plaza-door:hover{background:#30233f}.plaza-door.active{border-color:#ffe39b;box-shadow:0 0 24px #ffe39b44}.plaza-door.active b{background:#ffe39b}
#plazaGame{position:absolute;right:12px;top:12px;bottom:12px;width:330px;z-index:10;overflow:auto;padding:16px;background:#271b35f5;border:1px solid var(--cabinet,#d6b1e0);border-radius:16px;box-shadow:0 10px 30px #10051a88}#gameFrame #plazaGameIcon{position:static;float:left;width:64px;height:64px;margin:0 12px 6px 0}#plazaGame small{display:block;margin-top:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cabinet,#c9afd3)}#plazaGame h3{font-size:19px;color:#ffe2a0;margin:4px 0 12px}#plazaGame p{font-size:12px;line-height:1.5;color:#dccbe4;margin:0 0 8px}#plazaGameText{clear:left}#plazaGame .fine{font-size:10px;color:#b9a3c6}#plazaGameLive{color:#ff8fa6;font-weight:bold}#plazaGameLive:empty{display:none}#plazaPlayGame{width:100%;margin:4px 0 10px;padding:11px;font-size:13px}#plazaCloseGame{float:right;padding:5px 12px;font-size:20px}#plazaGames button{display:flex;align-items:center;gap:8px}#plazaGames i{width:10px;height:10px;border-radius:3px;flex:none}
@media(min-width:1700px){#joinPanel .plaza-stage{height:540px}}
@media(max-width:1000px) and (min-width:761px){#joinPanel .plaza-stage{height:clamp(320px,42vh,420px)}.plaza-door{flex:1 1 100%}.plaza-door span{margin-left:auto}}
@media(max-width:760px){#gameFrame .welcome-intro h1{font-size:36px}.welcome-intro p{font-size:13px}#joinPanel .plaza-heading{padding:16px 4px 10px}#joinPanel .plaza-stage{height:300px;border-radius:18px}#joinPanel .plaza-hint{bottom:8px;left:8px;font-size:10px}.plaza-door{flex:1 1 100%;font-size:11px}.plaza-door span{margin-left:auto}#plazaGame{left:8px;right:8px;top:8px;bottom:8px;width:auto;padding:14px}#joinPanel .plaza-tools details:nth-of-type(4)>div{left:0;right:auto}}
#gameFrame #overlay:has(#joinPanel:not(.hidden)){justify-content:flex-start}
/* Short landscape screens (phones on their side): while playing, the toolbar floats over the match bar instead of taking its own row. */
@media(orientation:landscape) and (max-height:520px){#gameFrame.playing #frameToolbar{position:absolute;top:env(safe-area-inset-top);right:env(safe-area-inset-right);z-index:30;min-height:0;padding:2px 6px;gap:4px;border:0;background:none}#gameFrame.playing #frameToolbar>strong,#gameFrame.playing #frameRoom,#gameFrame.playing #frameCosmetics{display:none}#gameFrame.playing #frameToolbar button{min-height:24px;padding:3px 9px;font-size:11px}#gameFrame.playing .matchbar{min-height:30px;padding:3px var(--toolbar-w,150px) 3px 10px}}
/* Board choices: card hand and shop, target picks, event results and the lobby minigame playlist. */
#boardControls{max-height:calc(100% - 12px);overflow-y:auto;overscroll-behavior:contain}#boardControls #rollDice{position:sticky;bottom:0;z-index:1}#boardControls.choosing{width:420px;max-width:calc(100% - 16px)}#boardControls.shopping #boardDie{display:none}#boardChoices:empty{display:none}#boardChoices{margin:4px 0 10px;text-align:left}
#boardChoices .hand,#boardChoices .shop{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}#boardChoices .hand-label{flex-basis:100%;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#d8c4e0}#boardChoices .hand-label em{color:#ffe28a;font-style:normal}
#boardChoices .card{flex:1 1 28%;min-width:84px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 9px;background:#ffd369;color:#38283f;border:2px solid #24192e;border-radius:10px;box-shadow:0 3px 0 #1a1225;text-align:left;font-size:13px}#boardChoices .card b{font-size:13px}#boardChoices .card small{font-size:10px;font-weight:normal;color:#5d4863;line-height:1.25}#boardChoices .card em{font-style:normal;font-size:11px;font-weight:900;color:#9b3f25}#boardChoices .buy{flex:1 1 40%;background:#efe1f5}#boardChoices .card:disabled{opacity:.45}.hand-empty{color:#cdb9d6;font-size:12px}
#boardChoices .pick-title{font-size:13px;font-weight:700;color:#fff0d7;margin:4px 0 6px}#boardChoices .pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}#boardChoices .pick-list button{display:flex;flex-direction:column;align-items:flex-start;padding:7px 9px;background:#2c203c;color:#fff0db;border:2px solid var(--player);border-radius:10px;text-align:left}#boardChoices .pick-list small{font-weight:normal;font-size:10px;color:#d8c4e0}#boardChoices .pick-cancel{margin-top:8px;width:100%}
#boardChoices .hand-note{font-size:12px;text-align:center}#boardChoices .event-rows{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}#boardChoices .event-rows span{background:#2c203c;border:2px solid var(--player);border-radius:8px;padding:3px 8px;font-size:12px}#boardChoices .event-rows b{color:#ffe28a}
#boardChoices .board-log{list-style:none;margin:8px 0 0;padding:6px 0 0;border-top:1px solid #6b5579;font-size:11px;color:#cdb9d6}#boardChoices .board-log li{margin:2px 0}#boardChoices .board-log li:last-child{color:#fff0d7}.party-points small{font-size:11px;color:#ffe28a}
.playlist-box{margin:0 0 14px;background:#2c203c;border:2px solid #695579;border-radius:10px;padding:8px 12px}.playlist-box summary{cursor:pointer;font-weight:700;color:#fff0d7}#playlistCount{font-weight:normal;color:#cdb9d6;font-size:12px;margin-left:6px}.playlist-presets{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}.playlist-presets button{font-size:12px;padding:7px 10px}.playlist-presets button[aria-pressed=true]{background:#ffda86;color:#342637;border-color:#24192e}
.playlist-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 10px}.playlist-game{display:flex;align-items:center;gap:8px;font-size:13px;margin:0;padding:5px 0;cursor:pointer}.playlist-game input{width:18px;height:18px;margin:0;flex-shrink:0}.playlist-box .fine{font-size:11px;margin:6px 0 0}
#boardChoices .card small.short{display:none}
/* Phones dock the board panel (bottom in portrait, right in short landscape) so the camera can frame the pawn and landing space beside it; see party-ui.js. */
@media(max-width:600px){#boardControls{top:auto;bottom:8px;transform:translateX(-50%);max-height:62%}}
@media(orientation:landscape) and (max-height:520px){#boardControls,#boardControls.choosing{left:auto;right:8px;top:8px;bottom:auto;transform:none;width:320px;max-width:46%;max-height:calc(100% - 16px);padding:8px 10px}#boardControls.dock-left{right:auto;left:8px}#boardControls h2{font-size:16px;margin:2px 0}#boardDie{font-size:30px}#boardChoices .card small.long{display:none}#boardChoices .card small.short{display:block}#boardChoices .board-log{display:none}}
@media(max-width:600px){#boardControls.choosing{padding:8px 10px}#boardChoices .card small.long{display:none}#boardChoices .card small.short{display:block}#boardChoices .card{min-width:70px;padding:5px 7px}#boardChoices .pick-list{grid-template-columns:1fr 1fr}#boardChoices .board-log{display:none}.playlist-games{grid-template-columns:1fr 1fr}}
/* Lobby action bar: pinned to the bottom of the lobby so Ready / Start is always in reach. */
#lobbyAction{position:sticky;bottom:0;z-index:3;display:grid;gap:8px;margin:16px 0 0;padding:12px;background:#291e38f5;border:1px solid #6b5478;border-radius:16px;box-shadow:0 -10px 28px #0007}
#lobbyAction #readyStatus{margin:0;text-align:center;font-weight:700;font-size:14px;color:#f3e6ff}
#lobbyAction #readyStatus:empty{display:none}
#lobbyAction #readyRoom,#lobbyAction #start{width:100%;min-height:60px;margin:0;font-size:24px;font-weight:900;letter-spacing:.02em;border-radius:14px}
#lobbyAction #readyRoom{background:#ffd35c;color:#2a1d33;border:3px solid #fff1b8;animation:ready-pulse 1.3s ease-in-out infinite}
#lobbyAction #readyRoom small{display:block;margin-top:2px;font-size:12px;font-weight:700;letter-spacing:0;opacity:.75}
#lobbyAction #readyRoom.is-ready{background:#7eebad;border-color:#d8ffe8;color:#173427;animation:none}
#lobbyAction #readyRoom.hidden,#lobbyAction #start.hidden{display:none}
@keyframes ready-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #ffd35c99}50%{transform:scale(1.025);box-shadow:0 0 0 12px #ffd35c00}}
@media(prefers-reduced-motion:reduce){#lobbyAction #readyRoom{animation:none}}
/* Voice chat: toolbar button states, the "who is talking" overlay and the menu section. */
#voiceButton.live{background:#3f8f67;border-color:#9ff0c4;color:#fff}
#voiceButton.muted{background:#6b3446;border-color:#ff9db4;color:#fff}
#voiceTalkers{position:absolute;left:10px;top:44px;z-index:6;display:flex;flex-direction:column;gap:4px;pointer-events:none}
#voiceTalkers span{background:#1b1428e0;border:1px solid #9ff0c4;color:#e9fff3;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;width:max-content}
#voicePanel{display:grid;gap:8px;margin:0 0 14px;padding:12px;border:1px solid #6b5478;border-radius:12px;background:#33264699}
#voicePanel h3{margin:0}
#voicePanel .voice-actions{display:flex;gap:8px;flex-wrap:wrap}
#voicePanel .voice-person{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;padding:6px 0;border-top:1px solid #5a466a}
#voicePanel .voice-person input[type=range],#voicePanel .voice-person label{grid-column:2}
#voicePanel .voice-dot{width:10px;height:10px;border-radius:50%;background:#5a466a}
#voicePanel .voice-person.speaking .voice-dot{background:#7eebad;box-shadow:0 0 8px #7eebad}
#voicePanel .hidden,#voiceButton.hidden{display:none}
/* Party standings strip on the board. */
#boardStandings{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px 8px;background:#211830;border-bottom:1px solid #4b3a5c;flex-shrink:0}
#boardStandings.hidden{display:none}
#boardStandings .standing{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;background:#1f1630eb;border:2px solid #4b3a5c;color:#f4e9ff;font-size:13px;box-shadow:0 3px 10px #0006}
#boardStandings .standing i{width:12px;height:12px;border-radius:50%;background:var(--player);box-shadow:0 0 0 2px #0006}
#boardStandings .rank{font-size:11px;opacity:.65}
#boardStandings .who{max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#boardStandings strong{font-size:16px;color:#ffe08a}
#boardStandings small{font-size:11px}
#boardStandings .standing.turn{border-color:var(--player);box-shadow:0 0 0 2px var(--player),0 0 16px var(--player)}
#boardStandings .standing.me .who{font-weight:900;color:#fff}
@media(max-width:560px){#boardStandings{gap:4px;padding:4px}#boardStandings .standing{font-size:11px;padding:3px 8px 3px 5px;gap:4px}#boardStandings strong{font-size:13px}#boardStandings .who{max-width:7ch}}

/* Progression: level chip, next-goal lines, level track, challenges, rivals, receipts, toast. */
#frameToolbar .level-chip{display:grid;gap:3px;justify-items:stretch;min-width:54px;padding:5px 9px;border-radius:12px;border:1px solid #9d7ab0;background:#3b2a47}#frameToolbar .level-chip b{font-size:12px;color:#ffdc83;line-height:1}.level-chip i,.next-goal i,.xpbar{display:block;height:4px;border-radius:4px;background:#241a2e;overflow:hidden}.level-chip s,.next-goal s,.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#ffc56b,#ffe9a8);border-radius:4px;text-decoration:none}
.level-chip.pop{animation:levelpop 1.2s ease-out}@keyframes levelpop{0%{transform:scale(1);box-shadow:0 0 0 0 #ffdc83}30%{transform:scale(1.25);box-shadow:0 0 0 8px #ffdc8355}100%{transform:scale(1);box-shadow:0 0 0 14px #ffdc8300}}
.next-goal{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;width:100%;max-width:560px;margin:14px 0 0;padding:10px 14px;border-radius:14px;border:1px solid #7d5f8d;background:#2e2139cc;color:#e6d4ec;text-align:left;font-size:12px;line-height:1.35}.next-goal b{color:#ffdc83;font-size:13px}.next-goal i{height:6px}.next-goal span{grid-column:1/-1;color:#d2bedb}.next-goal span+span{color:#b9e8d5}
#lobbyPanel .next-goal{margin:10px 0}
#rivalStrip{margin:0 0 10px;font-size:12px;color:#dac4dc}.rival-line{margin:12px 0 0;font-size:12px;color:#dac4dc;line-height:1.6}.rival-line b,#rivalStrip b{color:#ffdc83}.rival-line .ahead,#rivalStrip .ahead{color:#9df0bf}.rival-line .behind,#rivalStrip .behind{color:#ff9aa8}#rivalStrip .rival-line{margin:0}
#progressCards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 18px}#progressCards>section{min-width:0;background:#3a2945;border:1px solid #6d5280;border-radius:14px;padding:14px}#progressCards h3{margin:0 0 10px;font-size:15px;color:#ffe2a2}#progressCards h3 small{font-size:11px;font-weight:normal;color:#c9b3d3;margin-left:6px}
.level-head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}.level-head small{font-size:10px;letter-spacing:1px;color:#c9b3d3}.level-head strong{display:block;font-size:52px;line-height:1;color:#ffdc83}.level-head .xpbar{height:10px}.level-head p{margin:6px 0 0;font-size:12px;color:#e6d4ec}.level-head .fine{color:#b9a3c5;font-size:11px}
.level-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:4px}.track-step{background:#2c2036;border:1px solid #574266;border-radius:10px;padding:8px;font-size:11px;color:#dac4dc;line-height:1.5}.track-step b{display:block;font-size:16px;color:#fff1d4}.track-step.crate{border-color:#ffc56b}.track-step.special{border-color:#9df0bf;background:#26302f}
.challenge-block+.challenge-block{margin-top:14px}.challenge{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:#2c2036;border-radius:10px;padding:10px 12px;margin-top:8px;font-size:12px;color:#e6d4ec}.challenge div{display:grid;gap:5px}.challenge progress{width:100%;height:8px;accent-color:#ffd889}.challenge small{color:#b9a3c5}.challenge>b{color:#ffdc83;white-space:nowrap}.challenge button{font-size:11px;padding:6px 9px;min-height:30px;width:auto}.challenge.done{opacity:.7;background:#243129}.challenge.done strong{color:#9df0bf}
.rival-list{display:grid;gap:6px}.rival-list div{display:flex;justify-content:space-between;background:#2c2036;border-radius:8px;padding:8px 12px;font-size:12px}.rival-list b{color:#ffdc83}.rival-list .ahead b{color:#9df0bf}.rival-list .behind b{color:#ff9aa8}
.reward-level{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#2c2036}.reward-level>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}.reward-level b{color:#ffdc83}.reward-level small{font-size:11px;color:#c9b3d3}.reward-level .xpbar{height:9px}.reward-level .xpbar i{animation:xpfill 1.4s ease-out}.reward-level.up{background:linear-gradient(90deg,#4a3514,#2c2036);border:1px solid #ffc56b}.reward-level p{margin:8px 0 0;font-size:12px;color:#fff1d4}@keyframes xpfill{from{width:var(--from)}}
.reward-bonus{margin:10px 0 0;font-size:12px;color:#9df0bf}
#progressToast{position:fixed;left:50%;top:58px;transform:translateX(-50%);z-index:60;max-width:min(92vw,520px);padding:12px 18px;border-radius:14px;background:#2d3b2f;border:1px solid #9df0bf;color:#f3fff6;font-size:13px;box-shadow:0 10px 30px #0008;cursor:pointer;animation:toastin .35s ease-out}@keyframes toastin{from{transform:translate(-50%,-16px);opacity:0}}
@media(prefers-reduced-motion:reduce){.level-chip.pop,.reward-level .xpbar i,#progressToast{animation:none}}
@media(max-width:760px){#frameToolbar .level-chip{min-width:44px;padding:4px 6px}#frameToolbar .level-chip b{font-size:11px}.level-head strong{font-size:40px}.challenge{grid-template-columns:1fr auto}.challenge button{grid-column:1/-1;justify-self:start}.next-goal{font-size:11px}#progressToast{top:50px}}
/* End-of-party ceremony (public/minigames/_ceremony.js): a podium of outfits, the rest of the ranking and one award card per player. */
#ceremony{margin:10px 0 18px;text-align:left}
#ceremony .podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:0 auto;max-width:440px}
#ceremony .podium-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
#ceremony .podium-cast{display:flex;justify-content:center;align-items:flex-end;animation:ceremony-drop .5s ease-out both;animation-delay:calc(var(--d) + .45s)}
#ceremony .podium-cast figure{margin:0;flex:0 1 120px;min-width:0;display:flex;flex-direction:column;align-items:center}
#ceremony .place-1 .podium-cast figure{flex-basis:140px}
#ceremony .podium-cast canvas{position:static;inset:auto;display:block;width:100%;height:auto;aspect-ratio:1;margin-bottom:-6%}
#ceremony .podium-cast figure.me canvas{filter:drop-shadow(0 0 6px var(--player))}
#ceremony figcaption{position:relative;display:flex;flex-direction:column;align-items:center;max-width:100%;line-height:1.15}
#ceremony figcaption b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--player)}
#ceremony figcaption small{font-size:11px;color:#e6d7ef}
#ceremony .place-1 figcaption b::before{content:'👑 '}
#ceremony .podium-block{display:flex;align-items:center;justify-content:center;margin-top:5px;border-radius:12px 12px 4px 4px;color:#2a1d33;box-shadow:inset 0 -6px 0 #0002,0 4px 0 #1a1226;transform-origin:bottom;animation:ceremony-rise .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:var(--d)}
#ceremony .podium-block b{font:900 30px/1 'Arial Black',Impact,sans-serif}
#ceremony .podium-block sup{margin-left:1px;font-size:12px}
#ceremony .place-1 .podium-block{height:88px;background:linear-gradient(#ffe9a6,#ffc94d)}
#ceremony .place-2 .podium-block{height:64px;background:linear-gradient(#f1f4fb,#b7c2d8)}
#ceremony .place-3 .podium-block{height:46px;background:linear-gradient(#f7cda4,#d98f5c)}
#ceremony .ceremony-rest{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
#ceremony .ceremony-rest li{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 10px;border-radius:10px;background:#35263f;border:1px solid #5a466a;font-size:14px}
#ceremony .ceremony-rest li.me{border-color:var(--player)}
#ceremony .ceremony-rest b{min-width:28px;font-size:12px;color:#d0bfd9}
#ceremony .ceremony-rest i{width:11px;height:11px;border-radius:50%;background:var(--player);flex-shrink:0}
#ceremony .ceremony-rest span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ceremony .ceremony-rest strong{color:#ffe08a}
#ceremony .ceremony-heading{margin:18px 0 8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#ffc88b}
#ceremony .award-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
#ceremony .award-card{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:10px 12px;border-radius:14px;background:#35263f;border:2px solid #5a466a;border-left:6px solid var(--player);animation:ceremony-pop .45s ease-out both;animation-delay:calc(1.3s + var(--i) * .12s)}
#ceremony .award-card.mine{grid-column:1/-1;background:#4a3452;border-color:#ffe08a;border-left-color:var(--player);box-shadow:0 0 0 2px #ffe08a44,0 6px 18px #0006}
#ceremony .award-emoji{flex-shrink:0;font-size:28px;line-height:1.1}
#ceremony .award-card div{min-width:0}
#ceremony .award-who{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;color:var(--player)}
#ceremony .award-card.mine .award-who{color:#ffe08a;text-transform:uppercase;letter-spacing:.08em}
#ceremony .award-card b{display:block;margin:1px 0 2px;font-size:15px;color:#fff3dc}
#ceremony .award-card p{margin:0;font-size:12px;line-height:1.3;color:#d9c8e4}
@keyframes ceremony-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ceremony-drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes ceremony-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#ceremony .podium-cast,#ceremony .podium-block,#ceremony .award-card{animation:none}}
@media(max-width:480px){#ceremony .podium{gap:5px}#ceremony .place-1 .podium-block{height:70px}#ceremony .place-2 .podium-block{height:52px}#ceremony .place-3 .podium-block{height:38px}#ceremony .podium-block b{font-size:24px}#ceremony .award-card{padding:8px 10px}#ceremony .award-emoji{font-size:24px}}
/* Stream tools panel and the in-game chat vote pill. */
#streamPanel{width:100%;padding:12px 16px;border:1px solid #80648d;border-radius:12px;margin:8px 0;background:#382a43}#streamPanel summary{cursor:pointer;font-weight:bold;color:#ffe2a2}#streamPanel summary span{font-weight:normal;font-size:12px;color:#c9b3d3;margin-left:6px}#streamPanel label{display:block;margin-top:10px}#streamPanel .stream-check{display:flex;gap:8px;align-items:flex-start;font-size:13px}#streamPanel .stream-check input{width:auto;margin-top:2px}#streamPanel p{font-size:12px}#streamPanel #resetOverlay{margin-top:6px;font-size:12px}
#chatVotePill{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:6;pointer-events:none;max-width:calc(100% - 24px);padding:7px 14px;border-radius:999px;background:#2a1f3be6;border:1px solid #9df0bf;color:#f3fff6;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 14px #0007}#chatVotePill b{color:#9df0bf}
@media(max-width:760px){#chatVotePill{font-size:11px;top:6px;padding:5px 10px}}

/* Mastery, streaks, and receipts for them. */
.mastery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.mastery{display:grid;gap:4px;padding:8px 10px;border-radius:10px;background:#2c2036;border-left:4px solid var(--tier);font-size:12px;color:#e6d4ec}.mastery strong{font-size:12px}.mastery span{color:var(--tier);font-weight:bold;font-size:11px}.mastery progress{width:100%;height:6px;accent-color:var(--tier)}.mastery small{color:#b9a3c5;font-size:10px}.mastery.unranked{opacity:.75}
.reward-mastery{margin:10px 0 0;padding:9px 12px;border-radius:12px;background:#2c2036;border-left:4px solid var(--tier)}.reward-mastery>div{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:5px}.reward-mastery b{color:var(--tier);font-size:13px}.reward-mastery small{font-size:11px;color:#c9b3d3}.reward-mastery progress{width:100%;height:7px;accent-color:var(--tier)}.reward-mastery.up{box-shadow:0 0 0 1px var(--tier)}
.next-goal .streak-line{color:#ffb98a}

/* Reward ribbon: one line of what you earned; everything else is in Details. */
.match-rewards,#partyReceipt{margin-top:14px;padding:0;border:0;background:none}.rr-title{margin:0 0 6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#c9b3d3}
.reward-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;border-radius:14px;background:#2c2036;border:1px solid #6d5280;text-align:left}.reward-ribbon.up{border-color:#ffc56b;background:linear-gradient(90deg,#4a3514,#2c2036 70%)}
.rr-xp{font-size:26px;line-height:1;color:#ffdc83;white-space:nowrap}.rr-xp small{font-size:11px;margin-left:3px;color:#e9cf93}
.rr-level{display:grid;grid-template-columns:auto minmax(70px,120px) auto;gap:7px;align-items:center;font-size:12px;color:#e6d4ec}.rr-level b{color:#ffdc83}.rr-level small{color:#b9a3c5;font-size:11px}.rr-level .xpbar{height:8px}.rr-level .xpbar i{animation:xpfill 1.2s ease-out}
.rr-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 180px}.rr-chip{padding:4px 10px;border-radius:999px;background:#3b2a52;border:1px solid #8a6aa3;font-size:12px;color:#f3e6f7;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.rr-chip.rr-lvlup{background:#5a4420;border-color:#ffc56b;color:#fff1d4;font-weight:bold}.rr-chip.rr-unlock{border-color:#9df0bf}.rr-chip.rr-crate{border-color:#ffc56b}
.rr-details{margin-top:6px;text-align:left}.rr-details summary{cursor:pointer;font-size:12px;color:#c9b3d3;padding:4px 2px;width:max-content}.rr-details[open] summary{color:#ffe2a2}.rr-details .reward-breakdown{font-size:12px;color:#dac4dc;line-height:1.5;margin:6px 0}.rr-crate{font-size:12px;color:#dac4dc;margin:8px 0}
button.linkish{background:none;border:0;padding:0;min-height:0;width:auto;color:#ffdc83;text-decoration:underline;font-size:12px;cursor:pointer;margin-top:6px}
@media(max-width:760px){.rr-xp{font-size:22px}.reward-ribbon{padding:8px 10px;gap:6px 10px}.rr-chip{font-size:11px;padding:3px 8px}}
@media(prefers-reduced-motion:reduce){.rr-level .xpbar i{animation:none}}
.set-tag{display:inline-block;margin-top:5px;padding:1px 7px;border-radius:9px;background:#2f2238;color:#ffd98a;font-size:9px;font-style:normal;font-weight:700;letter-spacing:.02em}#inspectItems .set-tag{margin:0 0 0 6px}

/* Brand logo: welcome header and toolbar. */
.welcome-brand img{display:block;width:clamp(190px,21vw,300px);height:auto;margin:0 0 4px -6px;filter:drop-shadow(0 6px 14px #0007)}.welcome-brand span{display:block;margin:0}#frameToolbar .toolbar-brand{display:flex;align-items:center}#frameToolbar .toolbar-brand img{display:block;height:34px;width:auto;filter:drop-shadow(0 2px 4px #0008)}
@media(max-width:760px){.welcome-brand img{width:170px;margin:0}.welcome-brand span{display:none}#frameToolbar .toolbar-brand img{height:26px}}

/* Language picker (Menu) and the one-time "your language?" hint. */
#langPicker{display:grid;gap:6px;width:100%;padding:12px 16px;border:1px solid #80648d;border-radius:12px;margin:8px 0;background:#382a43}#langPicker label{font-weight:bold;color:#ffe2a2}#langPicker select{width:100%}
#langHint{position:fixed;left:50%;top:58px;transform:translateX(-50%);z-index:70;display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:#2a1f3be6;border:1px solid #9df0bf;box-shadow:0 8px 24px #0008;color:#f3fff6;font-size:13px}#langHint button{width:auto;min-height:0;padding:6px 12px;border-radius:999px;font-size:13px}#langHint button:first-of-type{background:#ffd369;color:#2a1d36;border:0;font-weight:bold}
.server-activity{margin:6px 0 0;font-size:12px;color:#d9c6e2;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}.server-activity b{color:#9dffb0;font-weight:700}.server-activity b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#58e07e;margin-right:6px;box-shadow:0 0 6px #58e07e}
.crate-reel{position:relative;width:100%;height:150px;margin:0 0 12px;overflow:hidden;border-radius:12px;background:#1a1224;box-shadow:inset 0 0 0 2px #4c3a5c;cursor:pointer}.crate-reel::before,.crate-reel::after{content:'';position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}.crate-reel::before{left:0;background:linear-gradient(90deg,#1a1224,#1a122400)}.crate-reel::after{right:0;background:linear-gradient(270deg,#1a1224,#1a122400)}
.reel-track{display:flex;gap:6px;height:100%;align-items:center;will-change:transform}.reel-card{flex:0 0 132px;height:130px;box-sizing:border-box;border-radius:8px;background:linear-gradient(#3a2d4c,#271c35);border-bottom:5px solid #a9e6b5;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}#crateReel .reel-card canvas{position:static;inset:auto;width:120px;height:100px;flex:none}.reel-card span{font-size:11px;color:#efdff3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:124px;padding:0 4px}
.reel-card.rarity-rare{border-bottom-color:#9dcbff;background:linear-gradient(#2c3656,#221c38)}.reel-card.rarity-epic{border-bottom-color:#dfafff;background:linear-gradient(#4a2a60,#2a1c38)}.reel-marker{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#ffd35c;box-shadow:0 0 10px #ffd35c;z-index:3}.reel-marker::before,.reel-marker::after{content:'';position:absolute;left:-7px;border:8px solid transparent}.reel-marker::before{top:0;border-top-color:#ffd35c}.reel-marker::after{bottom:0;border-bottom-color:#ffd35c}
.crate-reel.landed .reel-win{box-shadow:0 0 0 3px #fff4c8,0 0 26px #ffd35c;animation:crate-pop .4s ease-out}.crate-theatre.rolling{border-style:solid;border-color:#ffd35c}
/* Crawlable home section (site.js about): only under the welcome screen, never over a room or a game. */
#about{display:none}#gameFrame #overlay:has(#joinPanel:not(.hidden)) #about{display:block;width:min(1120px,100%);margin:26px auto 12px;padding:24px 28px;background:#2f2340;border:1px solid #5e4a78;border-radius:20px;color:#eadcf6;font-size:14px;line-height:1.6;text-align:left;flex:none}#about h2{font:900 21px 'Arial Black',sans-serif;letter-spacing:-.5px;color:#ffdc83;margin:22px 0 8px}#about h2:first-child{margin-top:0}#about ol{padding-left:20px;margin:0}#about .games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;list-style:none;padding:0;margin:0}#about .games li{padding:8px 11px;border-radius:10px;background:#3b2b47;font-size:13px;line-height:1.45}#about .games b{display:block;color:#fff1d4;font-size:14px}#about dt{font-weight:bold;color:#fff1d4;margin-top:10px}#about dd{margin:2px 0 0}#about .posts{padding-left:20px;margin:0}#about a{color:#ffdc83}#about .about-cta{display:inline-block;margin-top:6px;padding:9px 20px;border-radius:999px;background:#ffd369;color:#2a1d36;font-weight:bold;text-decoration:none;box-shadow:0 4px 0 #b88a2c}@media(max-width:760px){#gameFrame #overlay:has(#joinPanel:not(.hidden)) #about{padding:18px 16px;margin-top:18px}#about h2{font-size:18px}}
#matchScores{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:5px 8px;background:#211830;border-bottom:1px solid #4b3a5c;flex-shrink:0}#matchScores.hidden{display:none}#matchScores .label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#bda9cf;margin-right:2px}#matchScores .standing{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:999px;background:#1f1630eb;border:2px solid #4b3a5c;color:#f4e9ff;font-size:13px;box-shadow:0 3px 10px #0006}#matchScores .standing i{width:12px;height:12px;border-radius:50%;background:var(--player);box-shadow:0 0 0 2px #0006}#matchScores .rank{font-size:11px;opacity:.65}#matchScores .who{max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#matchScores strong{font-size:15px;color:#ffe08a}#matchScores .standing.me{border-color:var(--player);box-shadow:0 0 0 1px var(--player),0 3px 10px #0006}#matchScores .standing.me .who{font-weight:900;color:#fff}
/* End of a match: leaving must be as easy to find as Rematch / Lobby together. */
#matchVotes #voteLeave{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin:12px 0 0;padding:12px 16px;border-radius:14px;border:2px solid #ff7a8a;background:#5a1f2e;color:#fff0f0;font-size:18px;font-weight:800;line-height:1.1}
#matchVotes #voteLeave small{font-size:12px;font-weight:600;color:#ffd0d6}
#matchVotes #voteLeave:hover,#matchVotes #voteLeave:focus-visible{background:#7a2438;outline:3px solid #ffd35c;outline-offset:2px}
#langHint[hidden]{display:none}#langHint button.close{background:transparent;color:#f3fff6;border:0;padding:4px 8px;font-size:16px}