:root {
  --ink: #251b3f;
  --cream: #fff9e8;
  --gold: #ffc83d;
  --gold-dark: #e18b26;
  --purple: #5036a0;
  --violet: #7658d9;
  --pink: #ef6689;
  --green: #56b85f;
  --paper: rgba(255, 252, 238, 0.94);
}

* { box-sizing: border-box; }
html, body { width: 100%; width: 100dvw; height: 100%; height: 100dvh; min-height: -webkit-fill-available; margin: 0; overflow: hidden; background: #9bd8ef; }
body { font-family: 'Fredoka', system-ui, sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#app, #game-canvas { position: fixed; inset: 0; width: 100%; width: 100dvw; height: 100%; height: 100dvh; }
#game-canvas { display: block; outline: none; }
.hidden { display: none !important; }

.screen, .overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.screen.visible, .overlay:not(.hidden) { opacity: 1; pointer-events: auto; }

#loading { z-index: 100; background: radial-gradient(circle at 50% 42%, #7156ce, #2a1c58 75%); color: #fff; }
#loading .loading-crest { position: relative; width: 120px; height: 100px; animation: bob 1.5s ease-in-out infinite; }
.loading-crest .chicken { font-size: 70px; filter: drop-shadow(0 8px 0 rgba(0,0,0,.2)); position: absolute; bottom: 0; left: 25px; }
.loading-crest .crown { color: var(--gold); font-size: 42px; position: absolute; z-index: 2; top: -15px; left: 48px; transform: rotate(8deg); }
#loading h1 { margin: 8px 0 14px; font: 800 34px/1 'Baloo 2', sans-serif; letter-spacing: 1px; text-shadow: 0 4px 0 #35266e; }
#loading h1 i { font-size: 16px; color: var(--gold); font-style: normal; }
#loading p { opacity: .75; font-size: 13px; letter-spacing: .5px; }
.loading-bar { width: 220px; height: 8px; padding: 2px; border-radius: 99px; background: rgba(0,0,0,.22); }
.loading-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffe36e, var(--gold)); animation: load 1.6s ease forwards; }

#welcome { background: linear-gradient(90deg, rgba(31,21,67,.52), rgba(31,21,67,.05) 65%); justify-items: start; }
.welcome-card { margin-left: clamp(35px, 8vw, 140px); width: min(500px, calc(100vw - 70px)); padding: 45px 52px; text-align: center; color: #fff; border: 2px solid rgba(255,255,255,.22); border-radius: 28px; background: linear-gradient(145deg, rgba(44,28,91,.94), rgba(87,55,142,.88)); box-shadow: 0 26px 70px rgba(23,13,55,.45), inset 0 1px rgba(255,255,255,.2); backdrop-filter: blur(12px); position: relative; overflow: hidden; }
.welcome-card::before, .welcome-card::after { content: '✦'; position: absolute; color: rgba(255,214,77,.35); font-size: 52px; }
.welcome-card::before { top: 16px; left: 24px; }.welcome-card::after { right: 24px; bottom: 16px; }
.eyebrow { color: #ffd762; letter-spacing: 2.5px; font-size: 11px; font-weight: 700; }
.welcome-card h1 { margin: 8px 0 0; font: 800 clamp(42px,6vw,68px)/.78 'Baloo 2'; letter-spacing: -3px; text-transform: uppercase; filter: drop-shadow(0 6px 0 #27194e); }
.welcome-card h1 span { display: block; background: linear-gradient(#fff9cf,#ffd45b); color: transparent; background-clip: text; -webkit-background-clip: text; }
.welcome-card h1 small { display: block; font-size: 21px; line-height: 1.1; letter-spacing: 4px; color: #fff; transform: rotate(-3deg); }
.nickname-card{display:inline-grid;grid-template-columns:1fr auto;align-items:center;gap:0 9px;margin:14px auto 0;padding:8px 10px 8px 14px;border:1px solid rgba(255,224,105,.5);border-radius:12px;background:rgba(26,16,62,.38);text-align:left}.nickname-card small{grid-column:1;color:#e8dff8;font-size:7px;letter-spacing:1.6px}.nickname-card strong{color:#ffe371;font:800 15px 'Baloo 2';letter-spacing:.3px}.nickname-card button{grid-column:2;grid-row:1/3;width:31px;height:31px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:17px}.nickname-card button:hover{background:rgba(255,211,77,.24);transform:rotate(-20deg)}
.menu-audio-hint{display:block;margin-top:6px;color:#cfbfeb;font-size:8px;letter-spacing:1.2px;text-transform:uppercase}
.fullscreen-hint{display:block;margin-top:8px;color:#d7c8f0;font-size:8px;letter-spacing:.7px}
.tagline { font-size: 16px; line-height: 1.5; opacity: .87; margin: 24px 0 16px; }
.crest-line { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 4px 0 18px; }.crest-line span { width: 80px; height: 1px; background: linear-gradient(90deg,transparent,#ffd45b); }.crest-line span:last-child { transform: scaleX(-1); }.crest-line b { font-size: 25px; }
.royal-button { border: 0; border-bottom: 5px solid #c9781e; color: #3d274b; background: linear-gradient(#ffe86e,#ffc33c); box-shadow: 0 8px 20px rgba(22,12,54,.3), inset 0 1px #fff8b7; min-width: 245px; padding: 15px 24px 12px; border-radius: 14px; font-weight: 800; transition: transform .15s, filter .15s; }
.royal-button:hover { transform: translateY(-2px); filter: brightness(1.05); }.royal-button:active { transform: translateY(2px); border-bottom-width: 2px; }
.royal-button b { margin-left: 12px; }
.quick-rules { display: flex; justify-content: center; gap: 22px; margin-top: 30px; }.quick-rules div { display: flex; align-items: center; text-align: left; gap: 7px; }.quick-rules b { color: var(--gold); font-size: 20px; }.quick-rules span { font-size: 9px; line-height: 1.2; letter-spacing: .4px; opacity: .65; }

#hud { position: fixed; z-index: 10; top: max(18px, env(safe-area-inset-top)); left: 22px; right: 22px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.brand-compact { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 14px; color: #fff; background: rgba(36,25,70,.87); box-shadow: 0 6px 18px rgba(37,24,73,.25); }.brand-compact span { font-size: 34px; }.brand-compact b { font: 800 14px/1 'Baloo 2'; letter-spacing: -.4px; }.brand-compact em { color: var(--gold); font-style: normal; font-size: 10px; }
.presence-card{position:absolute;left:132px;display:flex;align-items:center;gap:8px;min-height:52px;padding:7px 12px 7px 10px;border:2px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(36,25,70,.87);color:#fff;box-shadow:0 6px 18px rgba(37,24,73,.25)}.presence-card>i{width:9px;height:9px;border-radius:50%;background:#f1bd45;box-shadow:0 0 0 4px rgba(241,189,69,.14),0 0 12px rgba(241,189,69,.8)}.presence-card>i[data-status="online"]{background:#75e17e;box-shadow:0 0 0 4px rgba(117,225,126,.14),0 0 12px rgba(117,225,126,.8)}.presence-card>i[data-status="offline"],.presence-card>i[data-status="full"]{background:#ff6f77;box-shadow:0 0 0 4px rgba(255,111,119,.14),0 0 12px rgba(255,111,119,.75)}.presence-card small{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;color:#ffe06a;font-size:8px;letter-spacing:1px;white-space:nowrap}.presence-card strong{display:block;font-size:8px;letter-spacing:1.1px}.presence-card strong b{font:800 15px 'Baloo 2'}.presence-card strong span{margin:0 2px;color:#bcb0d2}
.rank-card { position: absolute; left: 50%; transform: translateX(-50%); min-width: 260px; height: 64px; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border: 2px solid rgba(255,255,255,.8); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 25px rgba(62,49,101,.2); }
.rank-emblem { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; font-size: 27px; background: linear-gradient(145deg,#ffe78b,#ffbd3c); box-shadow: inset 0 1px #fff8cf, 0 3px 0 #d48725; }
.rank-card small, .record-card small { display: block; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; color: #8a7f9b; }.rank-card strong { display: block; font: 800 21px/1 'Baloo 2'; }
.rank-pips { margin-left: auto; display: flex; gap: 4px; }.rank-pips i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #c6bbcd; }.rank-pips i.on { border-color: #9e6e15; background: var(--gold); box-shadow: 0 1px 0 #b16d1d; }
.record-card { display: flex; align-items: center; gap: 11px; padding: 8px 9px 8px 14px; border: 2px solid rgba(255,255,255,.8); border-radius: 16px; background: var(--paper); box-shadow: 0 8px 25px rgba(62,49,101,.2); pointer-events: auto; }.record-card div { text-align: center; }.record-card b { font: 800 18px/1 'Baloo 2'; }.record-card > span { width: 1px; height: 26px; background: #ded7e4; }.record-card button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #eee9f5; font-weight: 800; }
.right-hud{display:flex;align-items:flex-start;gap:10px;pointer-events:auto}.top-actions{display:flex;gap:8px}.top-actions button{width:82px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,.92);border-bottom:6px solid #322457;border-radius:14px;background:linear-gradient(#503b88,#2d2058);color:#fff;box-shadow:0 8px 22px rgba(31,19,64,.28)}.top-actions button span{font:800 25px/1 'Baloo 2'}.top-actions button b{font-size:9px;letter-spacing:1px}.top-actions button:active{transform:translateY(3px);border-bottom-width:3px}.top-actions #music-button.muted{background:linear-gradient(#81778e,#51495c);color:#ded8e6}.top-actions #exit-button{border-bottom-color:#9f2e49;background:linear-gradient(#f06a7e,#c93d5d)}

#control-hint { position:fixed; z-index:9; top:106px; right:24px; padding:9px 13px; border:1px solid rgba(255,255,255,.65); border-radius:10px; background:rgba(39,27,70,.72); color:rgba(255,255,255,.72); backdrop-filter:blur(7px); font-size:8px; letter-spacing:.7px; pointer-events:none; }
#control-hint b { color:#ffd65a; } #control-hint span { margin:0 5px; opacity:.4; }
#location-label { position: fixed; z-index: 8; top: 110px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; text-shadow: 0 2px 7px #392a5b; animation: location 4s ease forwards; }
#location-label small { font-size: 8px; letter-spacing: 3px; }#location-label strong { display: block; font: 800 22px/1.2 'Baloo 2'; letter-spacing: 2px; }

.toast { position: fixed; z-index: 20; top: 100px; left: 50%; transform: translateX(-50%); min-width: 310px; padding: 12px 18px; border-radius: 12px; background: rgba(42,28,77,.94); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.2); text-align: center; animation: toast .3s ease; }.toast b { color: #ffd55c; margin-right: 8px; }.toast span { font-size: 11px; opacity: .8; }
#battle-screen { z-index: 40; display: block; overflow: hidden; background: linear-gradient(#84cfec 0%,#dff3db 59%,#a5d368 60%,#69ac4d); }
.battle-sky { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.8), transparent 15%), linear-gradient(#80ceee,#dcf4df 60%,#87be58 60%); }
.battle-sky::after { content:''; position:absolute; left:-5%; right:-5%; bottom:24%; height:28%; background: #749e50; clip-path: polygon(0 80%,8% 54%,16% 72%,25% 32%,33% 68%,43% 26%,51% 72%,62% 38%,71% 68%,82% 22%,91% 64%,100% 46%,100% 100%,0 100%); opacity:.55; }
.battle-cloud { position:absolute; width:160px; height:35px; border-radius:99px; background:rgba(255,255,255,.65); filter:blur(1px); }.battle-cloud::before,.battle-cloud::after{content:'';position:absolute;border-radius:50%;background:inherit}.battle-cloud::before{width:60px;height:60px;left:30px;bottom:0}.battle-cloud::after{width:85px;height:85px;right:20px;bottom:-5px}.c1{top:18%;left:7%;transform:scale(.8)}.c2{top:12%;right:8%;transform:scale(1.25)}.c3{top:40%;left:55%;transform:scale(.55)}
.battle-topbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 62px; display: grid; grid-template-columns:1fr auto 1fr; align-items: center; padding: 0 25px; background: rgba(38,26,72,.92); color:#fff; box-shadow:0 4px 18px rgba(30,22,51,.22); }.battle-brand b{font:800 15px 'Baloo 2'}.battle-brand em{font-style:normal;color:var(--gold);font-size:10px}.round-label{grid-column:2;font-size:9px;letter-spacing:2px;color:#d6cceb}.round-label span{color:var(--gold);margin:0 8px}
.battle-stage { position:absolute; z-index:2; top:62px; left:0; right:0; bottom:200px; }
.fighter { position:absolute; width:38%; height:100%; }.enemy-fighter{right:8%;}.player-fighter{left:8%;}.fighter-info{position:absolute;z-index:3;top:12%;min-width:220px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,251,235,.94);border:3px solid #fff;border-radius:14px;box-shadow:0 7px 0 rgba(66,52,91,.18)}.enemy-info{right:0}.player-info{left:0;top:auto;bottom:6%}.fighter-info small{display:block;color:#8e8199;font-size:8px;letter-spacing:1.5px}.fighter-info strong{font-size:16px}.fighter-info>span{padding:5px 8px;border-radius:7px;background:#5b469d;color:#fff;font-size:8px;letter-spacing:1px}.battle-avatar{position:absolute;z-index:2;font-size:clamp(95px,13vw,175px);filter:drop-shadow(0 15px 0 rgba(59,73,40,.18));animation:fighterBob 2s ease-in-out infinite}.battle-avatar span{display:block}.enemy-fighter .battle-avatar{right:13%;top:25%;transform:scaleX(-1)}.player-fighter .battle-avatar{left:13%;bottom:5%;animation-delay:-1s}.fighter-platform{position:absolute;width:75%;height:16%;border-radius:50%;background:rgba(83,132,57,.35);box-shadow:inset 0 10px 20px rgba(47,98,33,.16)}.enemy-platform{right:0;top:56%}.player-platform{left:0;bottom:0}.versus{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-4deg);display:flex;align-items:center;gap:9px}.versus span{width:30px;height:2px;background:#fff;box-shadow:0 2px 5px rgba(46,30,75,.3)}.versus b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#50368e;color:#ffda50;border:4px solid #fff;font:800 23px 'Baloo 2';box-shadow:0 6px 0 rgba(54,34,89,.22)}
.choice-reveal{position:absolute;z-index:5;display:grid;place-items:center;width:85px;height:85px;border-radius:50%;background:#fff;border:6px solid var(--gold);font-size:48px;box-shadow:0 9px 0 rgba(45,33,71,.2);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}.enemy-choice{right:8%;top:25%}.player-choice{left:8%;bottom:12%}
.battle-controls{position:absolute;z-index:5;left:0;right:0;bottom:0;min-height:200px;padding:22px clamp(20px,7vw,100px);display:flex;align-items:center;gap:clamp(25px,7vw,100px);background:linear-gradient(110deg,#2e205c,#4d3188);color:#fff;border-top:5px solid rgba(255,255,255,.4);box-shadow:0 -10px 35px rgba(40,27,73,.18)}
.timer-wrap{display:flex;align-items:center;gap:16px;min-width:280px}.timer-ring{position:relative;width:72px;height:72px}.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-ring circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:4}.timer-ring circle:last-child{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}.timer-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 31px 'Baloo 2';}.timer-wrap small{display:block;color:#ffda55;font-size:9px;letter-spacing:1.5px}.timer-wrap strong{display:block;font-size:15px;margin-top:3px}.move-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px;flex:1}.move-button{position:relative;min-height:88px;display:flex;align-items:center;gap:11px;text-align:left;border:3px solid rgba(255,255,255,.72);border-bottom-width:6px;border-radius:16px;color:var(--ink);transition:transform .15s,filter .15s}.move-button:hover{transform:translateY(-5px);filter:brightness(1.08)}.move-button>span{font-size:34px;margin-left:12px}.move-button b,.move-button small{display:block}.move-button b{font-size:14px}.move-button small{font-size:8px;opacity:.6}.move-button kbd{position:absolute;top:6px;right:7px;border:0;background:rgba(255,255,255,.5);padding:2px 5px;border-radius:4px;font-size:8px}.rock{background:#e88a66;border-color:#ffcab5;border-bottom-color:#b75343}.paper{background:#63c6bd;border-color:#bdf4e7;border-bottom-color:#2b8a87}.scissors{background:#f3bf52;border-color:#ffeb9e;border-bottom-color:#bd7c26}
.result-panel{position:absolute;z-index:10;inset:62px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;background:rgba(43,28,81,.9);backdrop-filter:blur(8px);overflow:hidden}.result-rays{position:absolute;width:800px;height:800px;background:repeating-conic-gradient(from 0deg,rgba(255,218,70,.13) 0 10deg,transparent 10deg 22deg);animation:spin 20s linear infinite}.result-panel>*:not(.result-rays){position:relative;z-index:2}.result-panel>small{color:#ffd856;letter-spacing:3px;font-weight:800}.result-panel h2{font:800 clamp(52px,9vw,100px)/.9 'Baloo 2';margin:3px 0;text-shadow:0 7px 0 rgba(25,15,53,.4);}.result-matchup{display:flex;align-items:center;gap:16px;margin:10px}.result-matchup span{display:grid;place-items:center;width:65px;height:65px;border-radius:50%;background:#fff;font-size:37px;box-shadow:0 5px 0 rgba(18,10,42,.25)}.result-matchup b{font-size:12px;color:#d8ccec}.result-panel p{margin:0 0 15px;color:#ded5ed}.rank-change{display:flex;align-items:center;gap:8px;margin-bottom:18px;padding:9px 15px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}.rank-change span{font-size:25px}.rank-change b{font-size:10px;letter-spacing:1px}.rank-change i{color:var(--gold);font-style:normal;margin:0 5px}

@keyframes load{to{width:100%}}@keyframes bob{50%{transform:translateY(-8px)}}@keyframes fighterBob{50%{translate:0 -8px}}@keyframes slideUp{from{opacity:0;transform:translate(-50%,20px) rotate(-.5deg)}}@keyframes toast{from{opacity:0;transform:translate(-50%,-10px)}}@keyframes pop{from{transform:scale(0) rotate(-30deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes location{0%{opacity:0;transform:translate(-50%,10px)}15%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}

@media(max-width:800px), (pointer:coarse){
  .brand-compact,#control-hint{display:none!important}#hud{top:max(6px,env(safe-area-inset-top));left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right))}.rank-card{position:static;transform:none;min-width:150px;height:50px;padding:4px 7px;border-width:1px;border-radius:12px}.rank-emblem{width:38px;height:38px;font-size:21px}.rank-card strong{font-size:15px}.rank-card small{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-pips{display:none}.presence-card{position:fixed;top:calc(max(6px,env(safe-area-inset-top)) + 54px);left:50%;transform:translateX(-50%);min-height:34px;padding:3px 8px;border-width:1px;white-space:nowrap}.presence-card small{max-width:100px}.right-hud{gap:5px}.record-card{display:none}.top-actions{gap:6px}.top-actions button{width:69px;height:53px;border-width:2px;border-bottom-width:5px;border-radius:10px;box-shadow:0 5px 14px rgba(31,19,64,.24)}.top-actions button span{font-size:21px}.top-actions button b{font-size:8px}
  #joystick{display:block;position:fixed;z-index:15;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:112px;height:112px;touch-action:none}.joystick-ring{position:absolute;inset:0;border:3px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(42,29,78,.3);box-shadow:inset 0 0 20px rgba(34,19,71,.2)}.joystick-ring::before,.joystick-ring::after{content:'';position:absolute;background:rgba(255,255,255,.25)}.joystick-ring::before{width:2px;height:65%;top:17.5%;left:50%}.joystick-ring::after{height:2px;width:65%;left:17.5%;top:50%}.joystick-knob{position:absolute;z-index:2;left:31px;top:31px;width:50px;height:50px;border-radius:50%;background:linear-gradient(145deg,#fff,#d9d0eb);box-shadow:0 5px 10px rgba(25,17,53,.3)}
  #mobile-action{position:fixed;z-index:16;right:max(18px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;width:92px;height:92px;border:4px solid #fff;border-bottom:8px solid #6f687a;border-radius:50%;background:linear-gradient(#d2cbdc,#aaa2b7);box-shadow:0 8px 20px rgba(43,27,78,.3);color:#51495d;opacity:.48;filter:saturate(.3);touch-action:manipulation;transition:opacity .15s,filter .15s,background .15s,border-color .15s}#mobile-action.ready{border-bottom-color:#c37222;background:linear-gradient(#ffe46b,#ffb72f);color:#3c2853;opacity:1;filter:none}#mobile-action span{font-size:28px;line-height:1}#mobile-action b{font-size:10px}
  #mobile-jump{position:fixed;z-index:17;right:calc(max(18px,env(safe-area-inset-right)) + 94px);bottom:max(38px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;height:72px;border:3px solid #fff;border-bottom:6px solid #4e74aa;border-radius:50%;background:linear-gradient(#b7edff,#72bce3);box-shadow:0 7px 18px rgba(43,27,78,.28);color:#302653;touch-action:manipulation}#mobile-jump span{font-size:25px;line-height:1}#mobile-jump b{font-size:8px}
  .battle-topbar{height:48px;padding:0 12px}.round-label{display:none}.battle-stage{top:48px;bottom:230px}.fighter{width:48%}.enemy-fighter{right:2%}.player-fighter{left:2%}.fighter-info{min-width:145px;padding:6px 8px}.fighter-info strong{font-size:11px}.fighter-info>span{font-size:6px}.battle-avatar{font-size:clamp(70px,20vw,110px)}.enemy-fighter .battle-avatar{top:29%;right:3%}.player-fighter .battle-avatar{left:3%;bottom:4%}.versus b{width:42px;height:42px;font-size:17px}.versus span{display:none}
  .battle-controls{min-height:230px;padding:11px 12px calc(12px + env(safe-area-inset-bottom));display:block}.timer-wrap{min-width:0;justify-content:center;margin-bottom:8px}.timer-ring{width:45px;height:45px}.timer-ring b{font-size:21px}.timer-wrap strong{font-size:11px}.move-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}.move-button{min-width:0;min-height:78px;display:block;text-align:center;padding:4px}.move-button>span{display:block;margin:0;font-size:28px}.move-button b{font-size:10px}.move-button small,.move-button kbd{display:none}.result-panel{inset:48px 0 0}.result-panel h2{font-size:55px}.rank-change{margin-bottom:12px}
  .welcome-card{margin:0 auto;padding:24px 18px;width:calc(100dvw - max(18px,env(safe-area-inset-left)) - max(18px,env(safe-area-inset-right)));max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));overflow:auto;border-width:1px;border-radius:16px}.welcome-card h1{font-size:46px}.quick-rules{gap:10px;margin-top:18px}.quick-rules span{display:none}.quick-rules b{padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.08)}
}

@media(max-height:540px) and (orientation:landscape){
  .battle-stage{bottom:130px}.battle-controls{min-height:130px;display:flex;padding:10px 18px}.timer-wrap{margin:0;min-width:210px}.move-button{min-height:70px}.result-panel h2{font-size:48px}.result-matchup{margin:4px}.result-matchup span{width:48px;height:48px;font-size:27px}.result-panel p{margin-bottom:7px}.rank-change{padding:5px 10px;margin-bottom:7px}.welcome-card{transform:scale(.8)}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Battle system v2 — Pokemon staging with Persona-inspired command graphics. */
#battle-screen { background:linear-gradient(155deg,#8fe2ef 0 44%,#f7d780 44% 57%,#e84a65 57% 100%); }
#battle-screen::before { content:'';position:absolute;z-index:1;inset:62px 0 0;background:linear-gradient(112deg,transparent 0 54%,rgba(228,44,76,.22) 54% 57%,transparent 57%),repeating-linear-gradient(155deg,transparent 0 38px,rgba(34,19,62,.06) 38px 42px);pointer-events:none; }
#battle-screen::after { content:'';position:absolute;z-index:1;right:-10vw;bottom:-20vh;width:70vw;height:75vh;background:repeating-conic-gradient(from 15deg,rgba(40,22,67,.18) 0 6deg,transparent 6deg 15deg);border-radius:50%;pointer-events:none; }
.battle-sky { background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.88),transparent 16%),linear-gradient(#72cde9 0%,#d7f3dc 61%,#81b653 61%); }
.battle-stage { top:62px;bottom:0;overflow:hidden; }
.battle-stage::after { content:'';position:absolute;z-index:0;left:-8%;right:-8%;bottom:-5%;height:38%;background:linear-gradient(rgba(89,137,49,.35),rgba(52,91,37,.68));clip-path:polygon(0 28%,8% 21%,18% 30%,31% 13%,45% 25%,59% 8%,73% 26%,88% 12%,100% 22%,100% 100%,0 100%); }
.battle-speedlines { position:absolute;z-index:1;inset:0;background:repeating-conic-gradient(from 90deg at 50% 46%,transparent 0 8deg,rgba(255,255,255,.22) 8deg 9deg,transparent 9deg 18deg);opacity:.5;pointer-events:none; }
.battle-intro { position:absolute;z-index:9;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-7deg);opacity:0;text-align:center;color:#fff;text-shadow:7px 7px 0 #2a194f;pointer-events:none; }
.battle-intro::before { content:'';position:absolute;z-index:-1;inset:-38px -75px;background:#ed3356;clip-path:polygon(0 42%,12% 35%,2% 15%,26% 22%,35% 0,49% 21%,67% 3%,74% 26%,100% 18%,89% 44%,100% 61%,78% 67%,88% 91%,62% 79%,50% 100%,39% 78%,13% 95%,19% 69%,0 63%,11% 51%); }
.battle-intro small { display:block;font-size:10px;letter-spacing:4px;color:#ffe354; }.battle-intro b { font:900 clamp(48px,8vw,98px)/.72 'Baloo 2';letter-spacing:-4px; }
.fighter { z-index:2;width:48%; }.enemy-fighter { right:2%; }.player-fighter { left:2%; }
.battle-avatar { font-size:clamp(190px,20vw,305px);filter:drop-shadow(0 24px 0 rgba(45,53,27,.2)) drop-shadow(8px 8px 0 rgba(40,24,67,.12)); }
.battle-avatar .battle-chicken { display:block;line-height:1; }.battle-avatar .battle-costume { position:absolute;z-index:3;display:block;font-size:.4em;filter:drop-shadow(0 4px 0 rgba(34,20,57,.28)); }
.battle-avatar .straw-hat { top:-.11em;left:.21em;transform:rotate(-8deg); }.battle-avatar .knight-helmet { top:-.08em;left:.25em;transform:rotate(4deg); }.battle-avatar .prince-crown { top:-.18em;left:.26em;font-size:.32em;transform:rotate(-7deg); }.battle-avatar .king-crown { top:-.2em;left:.23em;font-size:.42em;transform:rotate(6deg); }
.battle-avatar .battle-cape { position:absolute;z-index:-1;left:.14em;top:.32em;width:.6em;height:.72em;background:#9a3656;border:8px solid #fff2bd;border-top-width:4px;border-radius:55% 30% 60% 20%;transform:rotate(18deg);box-shadow:9px 8px 0 rgba(36,21,64,.2); }
.enemy-fighter .battle-avatar { right:1%;top:18%; }.player-fighter .battle-avatar { left:0;bottom:9%; }
.fighter-platform { width:90%;height:18%;background:rgba(55,91,40,.32);box-shadow:inset 0 15px 25px rgba(42,74,28,.2),0 8px rgba(255,255,255,.1); }.enemy-platform { right:0;top:56%; }.player-platform { left:0;bottom:4%; }
.fighter-info { min-width:285px;padding:13px 16px;border:4px solid #fff;border-radius:3px;background:#fffaf0;box-shadow:9px 9px 0 #3b2865;transform:skewX(-4deg); }.fighter-info strong{font-size:19px}.fighter-info>span{background:#ed3f61;border-radius:2px;padding:6px 10px}.enemy-info{right:1%;top:7%}.player-info{left:1%;bottom:4%}
.versus { z-index:4;top:41%; }.versus b { width:76px;height:76px;border-radius:8px;transform:rotate(45deg);font-size:0;background:#2a194e;border:5px solid #fff;box-shadow:8px 8px 0 #ed3f61; }.versus b::after { content:'VS';font:900 25px 'Baloo 2';color:#ffe04b;transform:rotate(-45deg); }.versus span { width:70px;background:#2a194e;height:5px; }
.battle-controls { z-index:8;inset:62px 0 0;min-height:0;padding:0;background:none;border:0;box-shadow:none;pointer-events:none; }
.timer-wrap { position:absolute;z-index:9;top:20px;left:50%;transform:translateX(-50%) rotate(-1deg);min-width:330px;padding:8px 18px 8px 10px;background:#29194f;color:#fff;border:3px solid #fff;box-shadow:7px 7px 0 #ed3f61;clip-path:polygon(0 8%,95% 0,100% 84%,6% 100%);pointer-events:auto; }
.timer-ring { width:60px;height:60px;flex:none; }.timer-wrap small{color:#ffdc48;font-size:9px}.timer-wrap strong{font-size:14px}.timer-ring b{font-size:27px}
.move-wheel { position:absolute;z-index:10;left:43%;bottom:20px;transform:translateX(-50%);width:570px;height:275px;pointer-events:auto;filter:drop-shadow(10px 12px 0 rgba(31,17,57,.23)); }
.wheel-burst { position:absolute;z-index:-2;left:30px;top:5px;width:500px;height:255px;background:#ee3156;clip-path:polygon(0 44%,11% 39%,2% 27%,18% 26%,12% 11%,30% 19%,38% 2%,48% 20%,65% 0,69% 22%,90% 12%,84% 31%,100% 39%,87% 50%,99% 65%,79% 67%,88% 87%,66% 77%,52% 100%,41% 80%,18% 93%,20% 73%,0 72%,11% 58%);opacity:.94; }
.wheel-core { position:absolute;z-index:3;right:4px;top:74px;width:125px;height:125px;display:grid;place-content:center;text-align:center;border-radius:50%;background:#2a194e;color:#fff;border:6px solid #fff;box-shadow:7px 7px 0 #ef3658;transform:rotate(7deg); }.wheel-core small{font-size:8px;letter-spacing:2px;color:#ffdf49}.wheel-core b{font:900 21px/.8 'Baloo 2'}
.move-wheel .move-button { position:absolute;width:350px;min-height:72px;padding:8px 42px 7px 14px;display:flex;gap:12px;align-items:center;border:4px solid #fff;border-bottom-width:4px;border-radius:2px;background:#241744!important;color:#fff;clip-path:polygon(3% 0,100% 8%,95% 92%,0 100%,5% 51%);box-shadow:none;transition:filter .15s,transform .15s,opacity .15s; }
.move-wheel .move-button::after { content:'';position:absolute;right:0;top:0;bottom:0;width:17px;background:var(--move-color); }.move-wheel .move-button>span { display:grid;place-items:center;flex:none;width:48px;height:48px;margin:0;border-radius:50%;background:var(--move-color);font-size:29px;border:3px solid #fff;box-shadow:4px 4px 0 rgba(0,0,0,.35); }.move-wheel .move-button b{font:900 22px/.85 'Baloo 2';letter-spacing:.5px}.move-wheel .move-button small{font-size:9px;color:#cfc7df}.move-wheel .move-button kbd{top:50%;right:21px;transform:translateY(-50%);background:#fff;color:#281949;font-size:10px}.move-wheel .rock{--move-color:#ed684e;left:0;top:8px;--r:-8deg;transform:rotate(var(--r))}.move-wheel .paper{--move-color:#3bc4ba;left:95px;top:99px;--r:1deg;transform:rotate(var(--r))}.move-wheel .scissors{--move-color:#f1b733;left:10px;top:190px;--r:8deg;transform:rotate(var(--r))}.move-wheel .move-button:hover,.move-wheel .move-button:focus-visible{transform:rotate(var(--r)) translateX(10px) scale(1.04);filter:brightness(1.25);outline:none}.move-wheel .move-button:disabled{opacity:.24;filter:saturate(.3)}.move-wheel .move-button.selected{opacity:1;filter:brightness(1.28);transform:rotate(var(--r)) translateX(18px) scale(1.06)}
.choice-reveal { width:112px;height:112px;font-size:63px;border-width:8px; }.enemy-choice{right:5%;top:22%}.player-choice{left:5%;bottom:20%}
#battle-screen.entering .enemy-fighter { animation:enemySlideIn .85s cubic-bezier(.12,.85,.26,1) both; }#battle-screen.entering .player-fighter { animation:playerSlideIn .85s cubic-bezier(.12,.85,.26,1) both; }#battle-screen.entering .battle-intro { animation:clashIntro 1.15s cubic-bezier(.2,.9,.2,1) both; }#battle-screen.entering .battle-speedlines { animation:speedFlash .9s ease both; }#battle-screen.entering .move-wheel { animation:commandsIn .65s .58s cubic-bezier(.2,1.25,.3,1) both; }
@keyframes enemySlideIn{from{transform:translateX(120%) scale(.72)}65%{transform:translateX(-4%) scale(1.05)}to{transform:translateX(0) scale(1)}}@keyframes playerSlideIn{from{transform:translateX(-120%) scale(.72)}65%{transform:translateX(4%) scale(1.05)}to{transform:translateX(0) scale(1)}}@keyframes clashIntro{0%{opacity:0;transform:translate(-50%,-50%) rotate(-16deg) scale(2.2)}22%,62%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(2deg) scale(.5)}}@keyframes speedFlash{0%{opacity:0;transform:scale(1.8)}30%{opacity:1}100%{opacity:.5;transform:scale(1)}}@keyframes commandsIn{from{opacity:0;transform:translate(-50%,80px) rotate(-10deg) scale(.55)}to{opacity:1;transform:translate(-50%,0) rotate(0) scale(1)}}

@media(max-width:800px), (pointer:coarse){
  #battle-screen::before{inset:48px 0 0}.battle-stage{top:48px;bottom:0}.battle-controls{inset:48px 0 0}.battle-avatar{font-size:clamp(125px,36vw,165px)}.enemy-fighter .battle-avatar{top:20%;right:-7%}.player-fighter .battle-avatar{left:-8%;bottom:23%}.fighter-platform{width:105%;height:12%}.enemy-platform{top:47%}.player-platform{bottom:24%}.fighter-info{min-width:150px;padding:7px 9px;border-width:3px;box-shadow:5px 5px 0 #3b2865}.fighter-info strong{font-size:11px}.fighter-info>span{font-size:6px;padding:4px 6px}.enemy-info{top:6%}.player-info{bottom:21%}.versus{top:37%}.versus b{width:46px;height:46px}.versus b::after{font-size:16px}.versus span{display:none}
  .timer-wrap{top:10px;min-width:245px;padding:5px 12px 5px 7px}.timer-ring{width:43px;height:43px}.timer-ring b{font-size:20px}.timer-wrap strong{font-size:10px}
  .move-wheel{left:50%;bottom:8px;width:380px;height:225px;transform:translateX(-50%);filter:drop-shadow(5px 6px 0 rgba(31,17,57,.23))}.wheel-burst{left:8px;top:0;width:360px;height:220px}.wheel-core{right:9px;top:69px;width:88px;height:88px;border-width:4px;box-shadow:4px 4px 0 #ef3658}.wheel-core small{font-size:6px}.wheel-core b{font-size:15px}.move-wheel .move-button{width:250px;min-height:57px;padding:5px 27px 5px 9px;border-width:3px}.move-wheel .move-button>span{width:38px;height:38px;font-size:23px;border-width:2px}.move-wheel .move-button b{font-size:15px}.move-wheel .move-button small{font-size:7px}.move-wheel .move-button kbd{right:15px}.move-wheel .rock{left:7px;top:5px}.move-wheel .paper{left:58px;top:78px}.move-wheel .scissors{left:8px;top:150px}.battle-intro b{font-size:50px}.choice-reveal{width:70px;height:70px;font-size:39px;border-width:5px}.enemy-choice{right:1%;top:20%}.player-choice{left:1%;bottom:31%}.enemy-info{top:13%}.player-info{bottom:28%}
}
@media(max-height:580px) and (orientation:landscape){.battle-avatar{font-size:125px}.enemy-fighter .battle-avatar{top:18%}.player-fighter .battle-avatar{bottom:17%}.move-wheel{left:45%;bottom:0;transform:translateX(-50%) scale(.72);transform-origin:bottom center}.timer-wrap{left:14%;top:8px;transform:rotate(-1deg)}.fighter-info{transform:scale(.78) skewX(-4deg)}#battle-screen.entering .move-wheel{animation:none}.result-panel{inset:48px 0 0}}

/* Dramatic result slam and automatic snap-back. */
.result-panel { background:rgba(34,20,67,.94); }
.result-panel::before,.result-panel::after { content:'';position:absolute;z-index:1;pointer-events:none; }
.result-panel::before { inset:-30%;background:repeating-conic-gradient(from -8deg,transparent 0 7deg,rgba(255,255,255,.12) 7deg 9deg);animation:resultSpin 9s linear infinite; }
.result-panel::after { left:-15%;right:-15%;top:43%;height:24%;background:#ed3458;transform:rotate(-5deg) scaleX(0);animation:resultSlash .42s .08s cubic-bezier(.15,.9,.25,1) forwards; }
.result-panel.win-result { background:radial-gradient(circle at 50% 45%,rgba(255,201,51,.32),transparent 34%),rgba(38,23,72,.96); }
.result-panel.loss-result { background:radial-gradient(circle at 50% 45%,rgba(75,104,188,.34),transparent 32%),rgba(25,20,51,.97);filter:saturate(.78); }
.result-panel.tie-result { background:radial-gradient(circle at 50% 45%,rgba(66,199,189,.28),transparent 32%),rgba(37,25,70,.96); }
.result-panel:not(.hidden) h2 { animation:resultTitleSlam .55s cubic-bezier(.12,1.5,.3,1) both; }
.result-panel:not(.hidden) .result-matchup { animation:resultCardsIn .5s .25s cubic-bezier(.2,1.2,.3,1) both; }
.result-panel.loss-result h2 { transform:rotate(-3deg);color:#d9e0ff;text-shadow:7px 8px 0 #111029; }
.result-panel.win-result h2 { transform:rotate(2deg);color:#fff6c8;text-shadow:7px 8px 0 #7d2945; }
#battle-screen.result-impact .battle-stage { animation:resultImpact .42s ease both; }
#battle-screen.snap-exit { animation:battleSnapOut .43s cubic-bezier(.55,0,.9,.35) forwards;pointer-events:none; }
#battle-screen.snap-exit::after { background:#fff;animation:snapFlash .43s ease forwards; }
@keyframes resultSpin{to{transform:rotate(360deg)}}@keyframes resultSlash{to{transform:rotate(-5deg) scaleX(1)}}@keyframes resultTitleSlam{from{opacity:0;transform:scale(3.2) rotate(-12deg)}55%{opacity:1;transform:scale(.88) rotate(4deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes resultCardsIn{from{opacity:0;transform:translateY(70px) rotate(8deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes resultImpact{0%{transform:translate(0)}20%{transform:translate(-13px,6px)}40%{transform:translate(10px,-5px)}65%{transform:translate(-6px,3px)}to{transform:translate(0)}}@keyframes battleSnapOut{0%{clip-path:inset(0);filter:brightness(1);transform:scale(1)}35%{filter:brightness(2.5);transform:scale(1.04) skewX(-2deg)}100%{clip-path:inset(49.8% 0);filter:brightness(5);transform:scale(1.12) skewX(7deg)}}@keyframes snapFlash{0%{opacity:0}40%{opacity:.9}100%{opacity:1}}
@media(max-width:800px), (pointer:coarse){.result-panel:not(.hidden) h2{font-size:64px}.result-panel::after{top:39%;height:25%}.nickname-card{margin-top:9px}}

/* Homepage v2 — bright arcade-menu presentation on desktop and mobile. */
#welcome{
  grid-template-columns:minmax(390px,610px) minmax(320px,540px);align-items:center;justify-content:center;justify-items:center;gap:clamp(20px,6vw,95px);padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  background:radial-gradient(circle at 82% 15%,#fff596 0 7%,#ffd94f 7.2% 13%,transparent 13.3%),radial-gradient(circle at 8% 90%,rgba(255,255,255,.25) 0 8%,transparent 8.2%),linear-gradient(135deg,#38d8d1 0 47%,#6755e8 47.2% 78%,#ee4d82 78.2% 100%);overflow:hidden;
}
#welcome::before{content:'';position:absolute;inset:-20%;background:repeating-conic-gradient(from 20deg at 78% 44%,transparent 0 8deg,rgba(255,255,255,.1) 8deg 10deg);animation:welcomeSpin 45s linear infinite;pointer-events:none}
#welcome::after{content:'✦  ·  ✦  ·  ✦';position:absolute;left:-3vw;bottom:5vh;color:rgba(255,255,255,.3);font:800 clamp(30px,5vw,78px) 'Baloo 2';letter-spacing:2vw;transform:rotate(-8deg);pointer-events:none}
.welcome-card{z-index:2;grid-column:1;grid-row:1;margin:0;width:100%;padding:clamp(30px,4vh,48px) clamp(30px,4vw,54px);color:var(--ink);border:6px solid #fff;border-radius:34px;background:linear-gradient(155deg,#fffdf1,#fff5cf);box-shadow:15px 17px 0 #2a205f,26px 29px 0 rgba(239,63,116,.72);backdrop-filter:none;transform:rotate(-1deg);overflow:visible}
.welcome-card::before{content:'★';top:-25px;left:-25px;display:grid;place-items:center;width:64px;height:64px;border:5px solid #fff;border-radius:50%;background:#ffcb38;color:#51378f;font-size:32px;box-shadow:5px 6px 0 #2a205f;transform:rotate(-12deg)}
.welcome-card::after{content:'⚡';right:-24px;bottom:-22px;display:grid;place-items:center;width:66px;height:66px;border:5px solid #fff;border-radius:18px;background:#ee4d82;color:#fff;font-size:31px;box-shadow:5px 6px 0 #2a205f;transform:rotate(10deg)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:#e9e4ff;color:#5440b8;font-size:10px;letter-spacing:1.6px}.eyebrow span{padding:3px 7px;border-radius:99px;background:#ee4d6f;color:#fff;box-shadow:0 0 0 3px rgba(238,77,111,.15)}
.welcome-card h1{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0 8px;font-size:clamp(50px,5.8vw,78px);line-height:.82;letter-spacing:-4px;filter:none;transform:rotate(-1deg)}
.welcome-card h1 span{display:inline;background:none;color:#5b46cf;-webkit-text-fill-color:currentColor;text-shadow:4px 5px 0 #d9d0ff}.welcome-card h1 span:last-child{color:#e84074;text-shadow:4px 5px 0 #ffd1df}.welcome-card h1 small{display:inline;padding:7px 8px 5px;border-radius:50%;background:#ffcc38;color:#32245f;font-size:17px;line-height:1;letter-spacing:0;box-shadow:3px 4px 0 #e38d25;transform:rotate(-8deg)}
.tagline{margin:17px 0 13px;color:#5c5272;font-size:17px;line-height:1.35;opacity:1}.tagline strong{color:#302459;font-size:19px}
.nickname-card{display:grid;width:min(390px,100%);grid-template-columns:1fr 54px;margin:14px auto 0;padding:11px 10px 11px 17px;border:3px solid #dcd3fb;border-radius:17px;background:#f0ecff;box-shadow:inset 0 -3px rgba(94,69,196,.08)}.nickname-card small{color:#74669a;font-size:8px}.nickname-card strong{color:#4c37af;font-size:18px}.nickname-card button{width:46px;height:46px;border:3px solid #fff;border-bottom:5px solid #289a98;border-radius:14px;background:linear-gradient(#58e3d5,#37bbb9);color:#262053;font-size:23px;box-shadow:3px 4px 0 rgba(42,32,95,.18)}.nickname-card button:hover{background:linear-gradient(#6bf2e2,#3cc4c1)}
.instance-picker{width:min(430px,100%);margin:11px auto 7px;padding:0;border:0}.instance-picker legend{width:100%;margin-bottom:5px;color:#74669a;font:800 8px/1.2 sans-serif;letter-spacing:1.4px;text-align:center}.instance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.instance-option{min-width:0;padding:7px 3px 6px;border:2px solid #d8cff6;border-bottom-width:4px;border-radius:11px;background:#fff;color:#5440b8;line-height:1;transition:transform .14s,background .14s,border-color .14s}.instance-option b,.instance-option span,.instance-option small{display:block}.instance-option b{font:800 9px/1.1 'Baloo 2',sans-serif}.instance-option span{margin:3px 0 2px;color:#302459;font:900 15px/1 'Baloo 2',sans-serif}.instance-option small{overflow:hidden;color:#81769c;font-size:6px;white-space:nowrap}.instance-option:hover:not(:disabled){transform:translateY(-2px);border-color:#8170dd}.instance-option.selected{border-color:#43c9c1;background:#ddfbf6;box-shadow:0 0 0 2px rgba(67,201,193,.2)}.instance-option:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.55}.instance-picker>small{display:block;min-height:10px;margin-top:5px;color:#81769c;font-size:7px;text-align:center}
.menu-audio-hint{margin-top:8px;color:#81769c;font-size:8px}.crest-line{margin:9px 0 11px}.crest-line span{height:3px;background:linear-gradient(90deg,transparent,#ffd044)}.crest-line b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid #f0d37d;font-size:20px}
.royal-button{display:flex;align-items:center;justify-content:space-between;width:min(430px,100%);min-height:84px;margin:auto;padding:10px 18px 8px;border:4px solid #fff;border-bottom:9px solid #ad284f;border-radius:22px;background:linear-gradient(135deg,#ff6e8b,#eb376d);color:#fff;box-shadow:0 10px 0 #382867,0 18px 30px rgba(56,40,103,.25);text-align:left}.royal-button:hover{transform:translateY(-3px) scale(1.02);filter:saturate(1.15)}.royal-button:active{transform:translateY(5px);border-bottom-width:4px;box-shadow:0 5px 0 #382867}.royal-button .play-icon{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:16px;background:#ffd53f;color:#39255e;font-size:28px;box-shadow:inset 0 -5px #e5a72e}.royal-button .play-copy{flex:1;margin-left:14px}.royal-button .play-copy small{display:block;color:#ffe1e9;font-size:9px;letter-spacing:1.8px}.royal-button .play-copy strong{display:block;font:900 30px/.95 'Baloo 2';letter-spacing:.5px}.royal-button>b{display:grid;place-items:center;width:44px;height:44px;margin:0;border:3px solid rgba(255,255,255,.75);border-radius:50%;font-size:25px}
.fullscreen-hint{margin-top:15px;color:#776c91;font-size:8px}.quick-rules{gap:9px;margin-top:20px}.quick-rules div{flex:1;justify-content:center;padding:9px 7px;border:2px solid #e8ddbd;border-radius:14px;background:#fff9e5}.quick-rules b{display:grid;place-items:center;width:31px;height:31px;flex:none;border-radius:10px;background:#6551d8;color:#fff;font-size:14px}.quick-rules div:nth-child(2) b{background:#31beba}.quick-rules div:nth-child(3) b{background:#ec4779}.quick-rules span{color:#675d7c;font-size:8px;opacity:1}
.welcome-mascot{position:relative;z-index:1;grid-column:2;grid-row:1;width:min(36vw,460px);aspect-ratio:1;display:grid;place-items:center;border:9px solid #fff;border-radius:50%;background:radial-gradient(circle at 44% 37%,#fff8be 0 16%,#ffdd4a 16.5% 52%,#f0a52f 52.5%);box-shadow:18px 21px 0 #302466,32px 36px 0 rgba(51,37,116,.25);transform:rotate(3deg)}
.mascot-chicken{font-size:clamp(125px,15vw,210px);filter:drop-shadow(0 18px 0 rgba(107,66,31,.22));animation:mascotBob 2.4s ease-in-out infinite}.mascot-crown{position:absolute;z-index:2;top:2%;left:50%;color:#6a3eaa;font-size:clamp(72px,8vw,112px);text-shadow:4px 5px 0 #fff;transform:translateX(-42%) rotate(8deg);animation:crownWiggle 2.4s ease-in-out infinite}.welcome-mascot>strong{position:absolute;bottom:8%;padding:9px 23px;border:4px solid #fff;border-radius:13px;background:#e94376;color:#fff;font:900 clamp(17px,2vw,27px)/.85 'Baloo 2';letter-spacing:1px;text-align:center;box-shadow:6px 7px 0 #302466;transform:rotate(-4deg)}
.rank-orbit{position:absolute;inset:-8%;animation:orbitWobble 5s ease-in-out infinite}.rank-orbit i{position:absolute;display:grid;place-items:center;width:53px;height:53px;border:4px solid #fff;border-radius:16px;background:#6755e8;font-style:normal;font-size:27px;box-shadow:4px 5px 0 #302466}.rank-orbit i:nth-child(1){left:2%;top:10%}.rank-orbit i:nth-child(2){right:-1%;top:18%;background:#41c7bb}.rank-orbit i:nth-child(3){right:-4%;bottom:14%;background:#7692c5}.rank-orbit i:nth-child(4){left:3%;bottom:5%;background:#b269d1}.rank-orbit i:nth-child(5){left:-8%;top:45%;background:#ef527c}
@keyframes welcomeSpin{to{transform:rotate(360deg)}}@keyframes mascotBob{50%{transform:translateY(-10px) rotate(-2deg)}}@keyframes crownWiggle{50%{transform:translate(-42%,-7px) rotate(-4deg)}}@keyframes orbitWobble{50%{transform:rotate(3deg) scale(1.02)}}
@media(max-width:900px),(pointer:coarse){
  #welcome{display:grid;grid-template-columns:1fr;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:radial-gradient(circle at 92% 7%,#ffe15a 0 11%,transparent 11.3%),linear-gradient(145deg,#39d4cf 0 38%,#6552df 38.3% 72%,#ec4a7e 72.3%)}
  .welcome-mascot{position:absolute;right:-65px;top:-55px;width:230px;border-width:6px;opacity:.28;transform:rotate(8deg)}.welcome-mascot>strong,.rank-orbit{display:none}.mascot-chicken{font-size:105px}.mascot-crown{font-size:62px}
  .welcome-card{grid-column:1;width:min(560px,calc(100dvw - 32px));max-height:calc(100dvh - max(22px,env(safe-area-inset-top)) - max(22px,env(safe-area-inset-bottom)));padding:26px 20px 23px;border-width:4px;border-radius:25px;box-shadow:9px 10px 0 #2a205f,16px 18px 0 rgba(239,63,116,.65);overflow:visible}.welcome-card::before{width:47px;height:47px;top:-13px;left:-10px;border-width:3px;font-size:24px}.welcome-card::after{width:48px;height:48px;right:-10px;bottom:-10px;border-width:3px;font-size:22px}
  .eyebrow{font-size:8px;letter-spacing:1px}.welcome-card h1{font-size:clamp(42px,13vw,60px);gap:6px;margin:12px 0 6px}.welcome-card h1 small{font-size:13px}.tagline{margin:13px 0 9px;font-size:14px}.tagline strong{font-size:16px}.nickname-card{margin-top:10px}.instance-picker{margin-top:8px}.crest-line{margin:6px 0 8px}.royal-button{min-height:76px}.royal-button .play-copy strong{font-size:27px}.quick-rules{margin-top:17px}.quick-rules div{padding:7px 4px}.quick-rules span{display:block}.fullscreen-hint{margin-top:12px}
}
@media(max-height:700px) and (orientation:portrait){
  .welcome-card{padding:18px 18px 16px}.welcome-card h1{font-size:42px;margin:7px 0 3px}.tagline{margin:8px 0 5px}.nickname-card{margin-top:6px;padding-top:7px;padding-bottom:7px}.instance-picker{margin:5px auto 3px}.instance-option{padding:5px 2px 4px}.menu-audio-hint{margin-top:4px}.crest-line{display:none}.royal-button{min-height:68px;margin-top:7px}.quick-rules{margin-top:11px}.fullscreen-hint{margin-top:8px}
}
@media(max-height:610px) and (orientation:landscape){
  #welcome{grid-template-columns:1fr}.welcome-mascot{display:none}.welcome-card{width:min(780px,calc(100dvw - 40px));max-height:calc(100dvh - 24px);padding:14px 25px;transform:none}.welcome-card h1{font-size:42px;margin:5px 0}.tagline{margin:4px 0;font-size:12px}.tagline br{display:none}.nickname-card{margin-top:5px;padding-top:6px;padding-bottom:6px}.instance-picker{margin:4px auto 2px}.instance-option{padding:4px 2px 3px}.instance-option small,.instance-picker>small{display:none}.menu-audio-hint,.crest-line,.fullscreen-hint{display:none}.royal-button{min-height:61px;margin-top:5px}.royal-button .play-icon{width:43px;height:43px}.royal-button .play-copy strong{font-size:24px}.quick-rules{margin-top:7px}.quick-rules div{padding:5px}.quick-rules b{width:25px;height:25px}.welcome-card::before,.welcome-card::after{display:none}
}

/* Server round clock and end-of-round crown board. */
.instance-option small{font:800 8px/1 'Fredoka',sans-serif;font-variant-numeric:tabular-nums}
.round-timer{position:fixed;z-index:46;top:calc(max(10px,env(safe-area-inset-top)) + 70px);left:50%;min-width:158px;height:58px;display:flex;align-items:center;justify-content:center;gap:9px;padding:6px 16px 5px 10px;border:4px solid #fff;border-bottom:7px solid #bd2852;border-radius:17px;background:linear-gradient(145deg,#f15c82,#dd356b);color:#fff;box-shadow:6px 7px 0 #2c205c,0 13px 25px rgba(43,27,78,.26);pointer-events:none;transform:translateX(-50%) rotate(-1deg)}
.round-timer:not(.hidden)~#location-label{top:155px}
.round-timer>span{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#ffd447;color:#3b285e;font-size:22px;box-shadow:inset 0 -4px #e49c28;transform:rotate(-6deg)}
.round-timer div{min-width:74px;text-align:center}.round-timer small{display:block;color:#ffe6ed;font:800 7px/1 'Fredoka',sans-serif;letter-spacing:1.3px}.round-timer strong{display:block;margin-top:2px;font:900 27px/.9 'Baloo 2',sans-serif;letter-spacing:1px;font-variant-numeric:tabular-nums;text-shadow:2px 3px 0 #8e2348}.round-timer>i{position:absolute;right:-9px;top:-10px;width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:#49c9bf;box-shadow:2px 3px 0 #2c205c}
.round-timer.urgent{background:linear-gradient(145deg,#ff7a4e,#e9324e);animation:roundUrgent .72s ease-in-out infinite alternate}.round-timer.results{background:linear-gradient(145deg,#7159e8,#533bb8);border-bottom-color:#34236e}.round-timer.results>span{background:#6fe0d4;box-shadow:inset 0 -4px #2faaa4}
@keyframes roundUrgent{to{transform:translateX(-50%) rotate(1deg) scale(1.05);filter:brightness(1.08)}}

.round-results{z-index:50;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(255,224,75,.3),transparent 34%),rgba(38,24,76,.95)}
.leaderboard-rays{position:absolute;inset:-45%;background:repeating-conic-gradient(from -8deg,rgba(255,255,255,.16) 0 5deg,transparent 5deg 13deg);animation:resultSpin 28s linear infinite}
.leaderboard-card{position:relative;width:min(650px,calc(100dvw - 30px));max-height:calc(100dvh - max(28px,env(safe-area-inset-top)) - max(28px,env(safe-area-inset-bottom)));padding:25px 30px 24px;border:7px solid #fff;border-radius:29px;background:linear-gradient(155deg,#fffdf0,#fff0b8);box-shadow:13px 15px 0 #ef3e71,25px 28px 0 rgba(21,13,48,.42);color:#302459;text-align:center;transform:rotate(-.5deg);overflow:auto}
.leaderboard-card::before,.leaderboard-card::after{position:absolute;top:14px;font-size:42px;filter:drop-shadow(3px 4px 0 rgba(61,38,103,.2))}.leaderboard-card::before{content:'👑';left:20px;transform:rotate(-12deg)}.leaderboard-card::after{content:'🐔';right:20px;transform:rotate(10deg)}
.leaderboard-card>small{display:inline-block;padding:5px 11px;border-radius:99px;background:#e84272;color:#fff;font-size:8px;letter-spacing:1.4px}.leaderboard-card h2{margin:8px 0 0;color:#5b46cf;font:900 clamp(43px,7vw,69px)/.8 'Baloo 2';letter-spacing:-2px;text-shadow:4px 5px 0 #d8cffd}.leaderboard-card>p{margin:10px 0 15px;color:#716487;font-size:11px}
.leaderboard-list{display:grid;gap:7px;margin:0;padding:0;list-style:none;counter-reset:places}.leaderboard-list li{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;min-height:48px;padding:5px 13px 5px 7px;border:3px solid #dfd6fb;border-bottom-width:5px;border-radius:14px;background:#fff;text-align:left}.leaderboard-list li:nth-child(1){border-color:#f0bd35;background:#fff7cf}.leaderboard-list li:nth-child(2){border-color:#aeb8c9;background:#f4f7fb}.leaderboard-list li:nth-child(3){border-color:#cf9169;background:#fff0e7}.leaderboard-place{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#6652da;color:#fff;font:900 17px 'Baloo 2';box-shadow:inset 0 -4px rgba(27,18,67,.22)}.leaderboard-list li:nth-child(1) .leaderboard-place{background:#ffc935;color:#3b285e}.leaderboard-name{min-width:0;overflow:hidden;text-overflow:ellipsis;font:800 16px 'Baloo 2';white-space:nowrap}.leaderboard-score{text-align:right}.leaderboard-score b,.leaderboard-score small{display:block}.leaderboard-score b{color:#e33b6d;font:900 13px 'Baloo 2'}.leaderboard-score small{color:#7c7090;font-size:8px}.leaderboard-empty{display:block!important;padding:22px!important;text-align:center!important;color:#7c7090}
.next-round{display:inline-flex;align-items:center;gap:10px;margin-top:15px;padding:7px 15px 7px 8px;border:3px solid #fff;border-bottom:6px solid #269c98;border-radius:15px;background:#48d2c6;color:#2d2458;box-shadow:4px 5px 0 #d6ccf5}.next-round>span{font-size:29px}.next-round small{display:block;font-size:7px;letter-spacing:1px}.next-round strong{display:block;font:900 20px/1 'Baloo 2';font-variant-numeric:tabular-nums}

@media(max-width:800px),(pointer:coarse){
  .round-timer{top:calc(max(6px,env(safe-area-inset-top)) + 57px);min-width:132px;height:45px;padding:4px 11px 3px 6px;border-width:3px;border-bottom-width:5px;border-radius:13px;box-shadow:4px 5px 0 #2c205c}.round-timer>span{width:31px;height:31px;font-size:17px}.round-timer strong{font-size:21px}.round-timer small{font-size:6px}.round-timer>i{display:none}
  .presence-card{top:calc(max(6px,env(safe-area-inset-top)) + 107px)}
  .leaderboard-card{padding:20px 13px 17px;border-width:5px;border-radius:22px;box-shadow:8px 9px 0 #ef3e71,14px 16px 0 rgba(21,13,48,.4)}.leaderboard-card::before,.leaderboard-card::after{top:10px;font-size:29px}.leaderboard-card::before{left:10px}.leaderboard-card::after{right:10px}.leaderboard-card h2{font-size:43px}.leaderboard-card>p{font-size:9px}.leaderboard-list{gap:5px}.leaderboard-list li{grid-template-columns:36px 1fr auto;min-height:43px;padding-right:8px}.leaderboard-place{width:30px;height:30px}.leaderboard-name{font-size:13px}.leaderboard-score b{font-size:11px}
}
@media(max-height:580px) and (orientation:landscape){.round-timer{top:5px;left:69%;transform:scale(.8);transform-origin:top center}.round-timer.urgent{animation:none}.leaderboard-card{width:min(760px,calc(100dvw - 24px));max-height:calc(100dvh - 18px);padding:12px 22px}.leaderboard-card h2{font-size:39px}.leaderboard-card>p{margin:5px 0 7px}.leaderboard-list{grid-template-columns:1fr 1fr}.leaderboard-list li{min-height:38px}.next-round{margin-top:7px}}
@media(max-height:610px) and (orientation:landscape){.instance-option small{display:block}}