@font-face{font-family:Casual;src:url('assets/fonts/nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{--bg:#20a7dc;--ink:#fff5d9;--muted:#e1f3fc;--line:#ffc82f;--orange:#ff9811;--gold:#ffca2c;--casual-panel:url('assets/casual/panel.webp');--casual-title:url('assets/casual/title.webp');--casual-orange:url('assets/casual/orange-button.webp');--casual-blue:url('assets/casual/blue-button.webp')}
body{background:#5cc3e5 url('assets/casual/scenery.webp') center/cover fixed;color:#fff5d9;font-family:Casual,Arial,sans-serif}body button,body h1,body h2,body h3,body .primary,body .secondary,body .textbtn{font-family:Casual,Arial,sans-serif;font-weight:950;letter-spacing:0}body button:focus-visible{outline:3px solid #fff8c2;outline-offset:3px}body button:disabled{filter:grayscale(.8);opacity:.55;cursor:default}
body .primary,body .secondary{min-width:0;min-height:62px;border:0;box-shadow:none;clip-path:none;border-radius:0;image-rendering:auto;background:var(--casual-orange) center/100% 100% no-repeat;color:#fff7dd;text-shadow:0 3px #12345c;-webkit-text-stroke:1.2px #12345c;paint-order:stroke fill;font-size:22px;line-height:1.1;padding:15px 30px;letter-spacing:0;font-weight:1000}body .secondary{background-image:var(--casual-blue);font-size:19px;min-height:55px}body .primary:hover,body .secondary:hover{background-color:transparent;filter:brightness(1.1)}body .primary:active,body .secondary:active{transform:translateY(2px);filter:brightness(.9)}
body.at-splash #splash{background:#2dbaed}#splash:before{background:url('assets/casual/scenery.webp') center/cover;filter:blur(12px)}body.at-splash #splash .splashframe{background:#70d3f4;width:min(100vw,560px);box-shadow:0 0 70px #03699577}#splash .faceoff-art{image-rendering:auto;object-fit:cover;object-position:center}.faceoff-shade{display:none}.casual-logo{position:absolute;top:6.5%;left:4%;width:92%;height:24%;object-fit:contain;filter:drop-shadow(0 3px 2px #004e8433)}.splash-utility{left:14px;right:14px;top:max(9px,env(safe-area-inset-top))}.splash-utility .utility-button{background-color:transparent;background-size:100% 100%;width:42px;height:42px;border:0;box-shadow:none;border-radius:50%;backdrop-filter:none}.utility-button svg{display:none}.utility-button#splashsound{background-image:url('assets/casual/icon-sound.webp')}.utility-button#splashsettings{background-image:url('assets/casual/icon-gear.webp')}.utility-button.muted-sound:after{display:none}.utility-button.muted-sound{filter:grayscale(.8);opacity:.7}.player-chip{background:var(--casual-blue) center/100% 100%;font:900 10px Casual;padding:0 15px;height:40px;border:0;box-shadow:none;color:white;text-shadow:0 1px #003a72;backdrop-filter:none}.player-chip:before{display:none}
.splash-main-menu{bottom:max(4.5%,env(safe-area-inset-bottom));width:83%;gap:5px}.menu-caption,.splash-footer{display:none}.fight-menu-button,.fight-menu-button.menu-play,.fight-menu-button.menu-exit{background:var(--casual-blue) center/100% 100% no-repeat;border:0;box-shadow:none;clip-path:none;min-height:57px;padding:12px 30px;font:1000 21px/1 Casual;color:#fff7d9;text-shadow:0 3px #103757;-webkit-text-stroke:1px #103757;paint-order:stroke fill;grid-template-columns:24px 1fr 0;gap:10px;border-radius:0}.fight-menu-button.menu-play{background-image:var(--casual-orange);font-size:29px;min-height:72px}.fight-menu-button.menu-exit{font-size:18px;min-height:48px}.fight-menu-button svg,.menu-symbol,.menu-chevron{display:none}.fight-menu-button>span:not(.menu-symbol):not(.menu-chevron){grid-column:1/-1;text-align:center}.fight-menu-button.menu-play>span:not(.menu-symbol):not(.menu-chevron){grid-column:1/-1}.fight-menu-button:focus-visible{clip-path:none}
body .accountmodal{background:#64ccef url('assets/casual/scenery.webp') center/cover;backdrop-filter:none;padding:18px}body .accountbox{position:relative;width:min(100%,390px);max-height:calc(100dvh - 36px);padding:35px 26px 28px;background:var(--casual-panel) center/100% 100% no-repeat;border:0;box-shadow:none;color:white;font-family:Casual;text-align:center}.accountbox h2,body .sectionline h2{background:var(--casual-title) center/100% 100% no-repeat;padding:15px 22px;min-height:65px;display:flex;align-items:center;justify-content:center;color:#fff9df;font:1000 25px/1.05 Casual;text-shadow:0 3px #003357;-webkit-text-stroke:1px #003357;paint-order:stroke fill;margin:0 -12px 14px}.accountbox p{font:700 14px/1.4 Casual;color:#e4f7ff;margin:7px 0 16px}.accountbox .primary,.accountbox .secondary{font-size:21px;min-height:60px;margin-top:12px;padding:12px 28px}.accountbox .secondary{background:var(--casual-blue) center/100% 100% no-repeat;border:0;font-size:17px;min-height:52px}.accountbox .account-note{font:650 12px/1.35 Casual;color:#d1f3ff;margin:13px 0 0}.accountbox label{font:900 12px Casual;color:#effaff;margin:13px 0 7px}.accountbox input{background:#fffdfa;color:#133154;border:2px solid #7eb9dc;box-shadow:inset 0 3px 0 #d6e6f3,0 2px 2px #00558655;border-radius:15px;font:750 19px Casual;padding:12px 15px;min-height:58px}.accountbox input:focus{border-color:#ffe55b;outline:2px solid #ffe55b}.accountbox .accountmessage{font:800 13px/1.3 Casual;color:#fff5af;min-height:18px}.accountbox .accountclose{width:45px;height:45px;right:-3px;top:2px;background:url('assets/casual/icon-close.webp') center/cover;border-radius:50%;font-size:0;z-index:2}.casual-avatar{background-image:url('assets/casual/heads-25-v2.webp');background-size:500% 500%;background-position:0 25%;border:3px solid #ffdc45;border-radius:50%;box-shadow:0 2px 2px #064b7b66}.login-medallion{width:116px;height:116px;margin:-90px auto -2px;position:relative;z-index:1;border-width:5px}body .accountmodal[data-view=login] .accountbox{margin-top:80px;padding-top:20px}.accountbox #account-login h2{margin-top:0}.accountbox #account-login label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.accountbox #profilestats{font:1000 18px Casual;color:#fff0a3;margin:12px 0}.accountbox #profilerank{font:850 15px Casual;color:#e8ffea}
body .tophead{font:900 11px Casual;color:#e3f9ff;grid-template-columns:28px 1fr 56px;margin:12px 0 7px}.toprows{min-height:290px}.toprow{height:54px;border:2px solid #ffcf3c;background:#fff4cf;border-radius:13px;box-shadow:0 2px 0 #00538755;color:#13385b;grid-template-columns:26px minmax(0,1fr) 52px;gap:7px;padding:0 9px;margin-bottom:6px;font:950 16px Casual}.toprow .rank,.toprow:first-child .rank{color:#c77d15;font:1000 20px Casual}.toprow .points{color:#183653;font:1000 16px Casual}.toprow .nick{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:14px;min-width:0}.row-avatar{display:inline-block;width:32px;height:32px;flex:0 0 32px;border-width:2px}.toprow.me{background:#8ff7ff;border-color:#bcfffc}.accountbox #topself{font:900 14px Casual;color:#ffedab}.accountbox #topstate{font:750 14px Casual;color:white}.toppaging{gap:24px;margin:12px 0 3px}.toppaging button{width:45px;height:45px;border:0;background:url('assets/casual/icon-back.webp') center/cover;border-radius:50%;font-size:0}.toppaging button#topnext,.toppaging button#historynext{transform:rotate(180deg)}.toppaging span{font:1000 18px Casual;color:#fff5ae}
.historyrows{min-height:300px}.historyrow{height:72px;border:2px solid #ffcf3c;background:#fff4cf;border-radius:13px;display:grid;grid-template-columns:38px minmax(0,1fr) 74px;gap:7px;margin-bottom:6px;padding:4px 8px;color:#103855;text-align:left;box-shadow:0 2px 0 #00538744}.history-avatar{width:36px;height:36px;border-width:2px}.historyrow strong{font:1000 12px Casual;color:#15375c}.historyrow small{font:750 10px/1.3 Casual;color:#4b6e86}.historyrow .history-outcome{font:1000 10px/1.2 Casual;color:#258448;text-align:center}.historyrow.lost .history-outcome{color:#b94c38}.accountbox #historystate{font:750 14px Casual;color:white}
body .topbar{background:none;border:0;height:56px;flex-basis:56px;padding:0 5%}body .topbar .brand{color:#fff4b0;text-shadow:0 3px #075278;font:1000 25px Casual}body:not(.at-splash):not(.playing) .accountnav{top:8px}body .accountnav button{background:var(--casual-blue) center/100% 100% no-repeat;border:0;box-shadow:none;font:1000 11px Casual;color:white;padding:10px 15px;min-height:42px}body:not(.at-splash):not(.playing) .accountnav button{font:950 10px Casual}#lobby{width:min(100%,650px);background:var(--casual-panel) center/100% 100% no-repeat;padding:18px 24px 22px;margin:0 auto 12px;max-height:calc(100dvh - 70px)}#lobby .sectionline{justify-content:center;margin:0 0 10px}#lobby .sectionline .muted{display:none}#lobby .sectionline h2{font-size:24px;min-height:60px;margin:0;width:100%;padding:12px 20px}#lobby .fighters{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:6px;width:min(100%,calc((100dvh - 255px)*.8));max-width:none}#lobby .fighter,#lobby .fighter.selected{border:2px solid #5bcfff;border-radius:13px;overflow:hidden;background:#1688c5;box-shadow:0 2px 1px #00476c88}#lobby .fighter.selected{border:4px solid #ffe341;box-shadow:0 0 12px #ffdf16,0 2px 2px #004c6b}#lobby .fighter canvas{image-rendering:auto}.selected-fighter{padding:8px 0 2px;gap:0}.selected-fighter span{display:none}.selected-fighter strong{font:1000 15px Casual;color:#fff7ce;text-shadow:0 2px #00568e}.launchrow{border:0;background:none}#lobby .launchrow{margin-top:2px;padding:0;display:block}#lobby .random-arena{display:none}#lobby .launchrow .primary{min-height:64px;font:1000 26px Casual;width:100%;padding:12px 20px}.selected-fighter{min-height:24px}
body .loading-screen{background:#5ec4ee url('assets/casual/scenery.webp') center/cover}body .loading-box{background:var(--casual-panel) center/100% 100%;padding:42px 32px;width:min(90vw,400px);border:0;box-shadow:none;color:white}.loading-emblem{font:1000 40px Casual;color:#ffdc48;text-shadow:0 3px #054477;letter-spacing:0}body #loadingtitle{font:1000 19px Casual;color:white;line-height:1.3;margin:18px 0 10px}body #loadingdetail{color:#e4f8ff}.loading-meter progress{border-radius:12px;accent-color:#20d6e9}.loading-meter b{font:1000 15px Casual}
body .splashdialogbox{background:var(--casual-panel) center/100% 100%;padding:36px 28px;image-rendering:auto}.splashdialogbox h2{background:var(--casual-title) center/100% 100%;font:1000 26px Casual;color:#fff9dc;padding:15px 10px;text-shadow:0 3px #004471}.splashdialogbox p{font:750 14px Casual;color:#e5fbff}.splashdialogbox .textbtn{font:1000 17px Casual;color:#fff1b1}.splashdialogbox .primary{font-size:23px}
body.playing .matchline{background:#006cadb0}body.playing .matchline .textbtn,body.playing .matchline>span{font:900 11px Casual;color:white}body.playing #pause{border:0;clip-path:none;border-radius:50%;background:#008cce;color:#fff4ba;font:1000 28px Casual;box-shadow:0 0 0 2px #ffce3e}body.playing .healthlabel strong{font:1000 11px Casual}body.playing .healthlabel span{font:900 9px Casual;background:#0875b8}.hudportrait{position:absolute;width:39px;height:39px;top:0;left:-2px;z-index:2}.healthpanel{position:relative;padding-left:34px}.healthpanel.enemy{padding-left:0;padding-right:34px}.healthpanel.enemy .hudportrait{left:auto;right:-2px}body.playing .health{height:19px;border:3px solid #ffd04f;border-radius:10px;outline:1px solid #06547f;box-shadow:0 3px #024777;background:#28435e}body.playing .health div{border-radius:4px}body.playing .clock b{font:1000 30px Casual;line-height:1;color:#fff4be;border:3px solid #ffce3b;border-radius:12px;clip-path:none;background:#085ea1;padding:6px 9px;outline:0}body.playing .clock span{font:950 8px Casual;line-height:1.2}body.playing .wins{font:1000 15px Casual;color:#ffdf51}
body.playing .overlaybox,body.playing .overlay[data-kind=intro] .overlaybox,body.playing .overlay[data-kind=exit] .overlaybox{background:var(--casual-panel) center/100% 100% no-repeat;border:0;padding:30px 28px;image-rendering:auto;width:min(380px,90vw);gap:12px;min-height:260px}body.playing .overlaybox h2,body.playing .overlay[data-kind=exit] .overlaybox h2{background:var(--casual-title) center/100% 100%;font:1000 28px/1.2 Casual;color:#fff7db;letter-spacing:0;text-shadow:0 3px #004173;padding:15px 12px;width:100%;-webkit-text-stroke:1px #03436d;paint-order:stroke fill}body.playing .overlaybox p{font:750 14px/1.4 Casual;color:white}body.playing .overlaybox #overlabel{font:950 15px Casual;color:#ffecaa}body.playing .stateactions .primary{font-size:23px}body.playing .stateactions .secondary{font-size:20px}.stateicon{display:none!important}body.playing .overlay[data-kind=result]{background:#5ec2eb url('assets/casual/scenery.webp') center/cover}body.playing .overlay[data-kind=result] .overlaybox{width:min(490px,100%);padding:20px 24px;background:none;gap:6px}body.playing .overlay[data-kind=result] h2{font-size:38px;background:var(--casual-title) center/100% 100%;min-height:90px}body.playing .overlay[data-kind=result] #overlabel,.result-logo{display:none!important}body.playing .overlay[data-kind=result] #overbuttons{background:var(--casual-panel) center/100% 100%;padding:18px;gap:6px;image-rendering:auto}body.playing #resultscore{font:1000 38px Casual;color:#fff5bd;text-shadow:0 3px #07517d}.rating-save{font-family:Casual!important;color:#fff8bb!important}#victoryillustration{width:100%;min-height:0;object-fit:contain;flex:1}#victoryillustration:not([hidden])+#resultart{display:none!important}
body.playing .controls button{border:0;background:none;clip-path:none;box-shadow:none;border-radius:50%;width:66px;height:66px;padding:0;position:relative}body.playing .control-icon{inset:0;width:100%;height:100%;background-position:center;background-size:100% 100%;image-rendering:auto;border-radius:50%}body.playing .icon-left{background-image:url('assets/casual/icon-left.webp')}body.playing .icon-right{background-image:url('assets/casual/icon-right.webp')}body.playing .icon-jump{background-image:url('assets/casual/icon-jump.webp')}body.playing .icon-punch{background-image:url('assets/casual/icon-punch.webp')}body.playing .icon-kick{background-image:url('assets/casual/icon-kick.webp')}body.playing .actions small{font:1000 9px Casual;position:absolute;bottom:-13px;left:0;right:0;color:#fff8cb;text-shadow:0 2px #003e67}body.playing .controls{bottom:max(30px,env(safe-area-inset-bottom))}body.playing .actions{gap:5px}body.playing .movement{gap:3px}body.playing .controls button.held{filter:brightness(.8);transform:translateY(3px)}body.dinosaur-player .icon-punch{background-image:url('assets/vector/bite.svg');background-size:60%;background-color:#0384be;border:3px solid #ffd250}body.dinosaur-player .icon-kick{background-image:url('assets/vector/paw.svg');background-size:60%;background-color:#0384be;border:3px solid #ffd250}
@media(max-height:700px){body .accountbox{padding:24px 23px 20px}.accountbox h2{font-size:22px;min-height:57px;margin-bottom:8px}.accountbox .primary,.accountbox .secondary{min-height:48px;font-size:18px;margin-top:8px}.accountbox input{min-height:47px;font-size:17px}.login-medallion{width:88px;height:88px;margin-top:-72px}.accountbox .account-note{font-size:11px;margin-top:9px}.toprows{min-height:235px}.toprow{height:43px;font-size:13px;margin-bottom:4px}.toprow .nick{font-size:12px}.toprow .points{font-size:13px}.historyrows{min-height:265px}.historyrow{height:61px}.row-avatar{width:26px;height:26px;flex-basis:26px}.casual-logo{top:8%;height:24%}.splash-main-menu{bottom:3%;gap:2px}.fight-menu-button{min-height:47px;font-size:18px}.fight-menu-button.menu-play{min-height:59px;font-size:24px}.fight-menu-button.menu-exit{min-height:43px}#lobby .fighters{width:min(100%,calc((100dvh - 215px)*.8))}#lobby .sectionline h2{min-height:45px;font-size:21px}#lobby{padding:12px 20px 16px}#lobby .launchrow .primary{min-height:54px;font-size:23px}body.playing .controls button{width:56px;height:56px}}
@media(orientation:landscape){body.at-splash #splash .splashframe{width:min(100vw,1100px)}#splash .faceoff-art{width:60%;height:100%;object-position:center 35%}.casual-logo{left:60%;top:5%;width:38%;height:35%}.splash-main-menu{left:79%;width:36%;bottom:4%;gap:1px}.fight-menu-button{min-height:43px;font-size:17px}.fight-menu-button.menu-play{min-height:50px;font-size:23px}.fight-menu-button.menu-exit{min-height:38px}#lobby{max-width:1000px;margin:0 auto 6px;padding:10px 25px 12px;max-height:calc(100dvh - 60px)}#lobby .fighters{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(100%,calc((100dvh - 200px)*5))}#lobby .sectionline h2{min-height:42px;font-size:22px;width:350px}#lobby .launchrow .primary{min-height:50px;font-size:22px;width:300px;display:block;margin:auto}.accountmodal .accountbox{max-width:590px}.accountmodal[data-view=login] .accountbox{width:430px;margin-top:30px;padding:20px 30px}.login-medallion{display:none}.accountbox .account-note{font-size:10px}.accountbox #account-login h2{min-height:45px}.accountbox input{min-height:44px}.toprows{min-height:175px}.toprow{height:32px;margin-bottom:3px}.accountbox h2{min-height:43px;font-size:23px;margin-bottom:4px}.accountbox p{margin:4px 0 8px}.toppaging{margin:5px 0;gap:22px}.toppaging button{width:35px;height:35px}.historyrows{min-height:190px}.historyrow{height:43px}.historyrow small{font-size:9px}.history-avatar{height:30px;width:30px}body.playing .overlay[data-kind=result] .overlaybox{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;gap:3px;width:min(800px,100%);padding:12px 25px}body.playing .overlay[data-kind=result] h2{grid-column:1;grid-row:1;min-height:65px;font-size:30px}body.playing .overlay[data-kind=result] #overdetail{grid-column:1;grid-row:2}body.playing .overlay[data-kind=result] #resultscore{grid-column:1;grid-row:3;font-size:28px}body.playing .overlay[data-kind=result] #overbuttons{grid-column:2;grid-row:1/5;align-self:center}body.playing .overlay[data-kind=result] #resultart,body.playing .overlay[data-kind=result] #victoryillustration{grid-column:1;grid-row:4;max-height:150px;margin:auto}body.playing .overlay[data-kind=result] #ratingsave{grid-column:2;grid-row:4;z-index:2}body.playing .overlaybox{min-height:230px}body.playing .healthlabel strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.splash-main-menu{animation:none}}
#splash .casual-logo{position:absolute;top:6.5%;left:4%;width:92%;height:24%;object-fit:contain;z-index:0}
@media(max-height:700px) and (orientation:portrait){#splash .casual-logo{top:8%;height:24%}}
@media(orientation:landscape){#splash .casual-logo{left:60%;top:5%;width:38%;height:35%}}
#lobby{flex:none;height:auto}#lobby .selection{flex:none;justify-content:flex-start}#lobby .launchrow{margin-top:8px}#lobby .sectionline{flex-shrink:0}
body.playing .controls button:before,body.playing .controls button:after{display:none}body.playing .actions{grid-template-columns:66px 66px;grid-template-rows:66px;gap:6px}body.playing .actions .jump{right:36px;bottom:78px}
.accountmessage:empty{display:none}
@media(max-height:600px){.accountbox h2{min-height:46px;font-size:21px;margin-bottom:4px}.accountbox p{font-size:12px;margin:5px 0 8px}.toprows{min-height:210px}.toprow{height:39px;margin-bottom:3px}.historyrows{min-height:260px}.historyrow{height:48px;margin-bottom:4px}.historyrow small{font-size:9px}.accountbox .account-note{font-size:10px;margin-top:6px}.toppaging{margin:6px 0}.toppaging button{height:35px;width:35px}body.playing .actions{grid-template-columns:56px 56px;grid-template-rows:56px}body.playing .actions .jump{right:30px;bottom:66px}}
body .topbar{margin:0 auto}#lobby .launchinfo{display:none}
@media(orientation:landscape){#splash .casual-logo{top:13%;height:30%}}

/* All 17 active fighters fit on a single screen. */
#lobby .fighters{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));width:min(100%,calc((100dvh - 235px)*.8))}
@media(orientation:landscape){#lobby .fighters{grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(100%,calc((100dvh - 205px)*4.5))}}
/* Personal ability card and thumb-friendly four-button combat cluster. */
#lobby .fighter-skill{height:45px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;color:#e9faff;padding:1px 0 4px}
#lobby .fighter-skill strong{font:1000 13px/1.2 Casual;color:#ffe899}#lobby .fighter-skill span{font:750 11px/1.25 Casual;max-width:100%}
#lobby .fighters{width:min(100%,calc((100dvh - 280px)*.8))}
body.playing .actions{--combat-button:66px;display:grid;grid-template-columns:repeat(2,var(--combat-button));grid-template-rows:repeat(2,var(--combat-button));gap:17px 8px;align-items:center}
body.playing .actions .jump{position:relative;right:auto;bottom:auto;grid-column:1;grid-row:1}
body.playing .actions .special{position:relative;grid-column:2;grid-row:1}
body.playing .actions .punch{grid-column:1;grid-row:2}body.playing .actions .kick{grid-column:2;grid-row:2}
body.playing .controls button.special{border:3px solid #ffe297;background:#ffe28b;box-shadow:0 3px 0 #8f6a21,0 0 16px #ffe47c44;isolation:isolate;color:#fff6bf}
body.playing #specialicon{position:absolute;inset:3px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 25%,#568fc6,#194470 70%);padding:8px;pointer-events:none}
#specialicon svg{width:100%;height:100%;filter:drop-shadow(0 2px 0 #082d51)}body.playing .special #specialcount{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:1000 24px Casual;text-shadow:0 2px 3px #061a32;pointer-events:none}
body.playing .special.recharging #specialicon{opacity:.38}body.playing .special:disabled{filter:saturate(.6);cursor:default}body.playing .special:not(:disabled){box-shadow:0 3px 0 #8f6a21,0 0 17px #ffe47c80}body.playing .actions small{white-space:nowrap;letter-spacing:0;bottom:-14px;font:1000 9px Casual;pointer-events:none}
.skill-track{display:flex;flex-direction:column;gap:3px;max-width:100%;margin-top:2px}.skill-track progress{appearance:none;-webkit-appearance:none;width:100%;height:5px;border:1px solid #ffe194;border-radius:5px;background:#153f61;overflow:hidden}.skill-track progress::-webkit-progress-bar{background:#153f61}.skill-track progress::-webkit-progress-value{background:#ffe08c}.skill-track progress::-moz-progress-bar{background:#ffe08c}.skill-track span{font:900 9px/1.1 Casual;color:#fff1b8;text-shadow:0 1px 2px #18334f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.enemy .skill-track span{text-align:right}
@media(max-width:370px),(max-height:600px){body.playing .actions{--combat-button:56px}body.playing .controls button{width:56px;height:56px}.skill-track span{font-size:8px}#lobby .fighter-skill strong{font-size:12px}#lobby .fighter-skill span{font-size:10px}}
@media(orientation:landscape){#lobby .fighters{grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(100%,calc((100dvh - 245px)*4.5))}#lobby .fighter-skill{height:36px}body.playing .actions{--combat-button:56px}body.playing .controls button{width:56px;height:56px}.skill-track{max-width:220px}.enemy .skill-track{margin-left:auto}}
.online-search{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;background:#06284ce8}.online-search>div{background:var(--casual-panel) center/100% 100%;width:min(390px,100%);padding:48px 30px;text-align:center;color:#fff5ce;font:850 16px Casual}.online-search h2{font:1000 25px Casual;color:#ffe389}.online-search p{font-size:14px;line-height:1.4}.online-search progress{width:100%;height:14px;accent-color:#ffe08b}.online-search .primary{width:100%;min-width:0;font-size:20px}
/* Center controls in explicit square boxes; labels stay outside the circles. */
body.playing .controls button{box-sizing:border-box;width:var(--combat-button,66px);height:var(--combat-button,66px);flex-shrink:0;display:grid;place-items:center;overflow:visible;transform:none;clip-path:none;border:3px solid #ffe29a;background:radial-gradient(circle at 38% 22%,#3984b9,#124c79 65%,#0c3454);box-shadow:inset 0 2px 0 #fff8,inset 0 -4px 0 #051f4370,0 3px 0 #0a3151;color:#fff3cb;backdrop-filter:none}
body.playing .controls .punch{background:radial-gradient(circle at 38% 22%,#ff9963,#b83b2d 70%)}body.playing .controls .kick{background:radial-gradient(circle at 38% 22%,#4db8e0,#1767a6 70%)}body.playing .controls .jump{background:radial-gradient(circle at 38% 22%,#ffda6a,#b47d1b 70%)}
body.playing .controls .control-icon{position:absolute;inset:7px;width:auto;height:auto;display:grid;place-items:center;padding:0;transform:none!important;border:0!important;border-radius:0;background:none!important;overflow:visible;pointer-events:none}
body.playing .controls .control-icon svg{display:block;width:76%;height:76%;overflow:visible;filter:drop-shadow(0 2px 0 #092b49)}body.dinosaur-player .controls .icon-punch{background:url('assets/vector/bite.svg') center/contain no-repeat!important}body.dinosaur-player .controls .icon-kick{background:url('assets/vector/paw.svg') center/contain no-repeat!important}body.dinosaur-player .controls .icon-punch svg,body.dinosaur-player .controls .icon-kick svg{display:none}
body.playing .controls .actions small{left:50%;right:auto;bottom:-19px;width:max-content;transform:translateX(-50%);line-height:14px;text-align:center}body.playing .actions{gap:24px 10px}body.playing #specialicon{inset:3px;padding:8px;box-sizing:border-box}body.playing #specialicon svg{display:block;overflow:visible}body.playing .movement{--combat-button:66px}body.playing .controls{bottom:max(36px,calc(env(safe-area-inset-bottom) + 22px))}
#splash .splash-utility .utility-button{position:relative;box-sizing:border-box;width:44px;height:44px;min-width:44px;padding:8px;display:grid;place-items:center;overflow:visible;background:radial-gradient(circle at 35% 25%,#438ab4,#174b77 72%);border:2px solid #ffe29a;border-radius:50%;box-shadow:inset 0 2px #ffffff70,0 2px 0 #0c3654;color:#ffedb5}
#splash .utility-button svg{display:block;width:24px;height:24px;overflow:visible;margin:0;transform:none;stroke-width:2}#splash .utility-button.muted-sound:after{display:block;position:absolute;left:9px;top:20px;width:24px;height:2px;background:#fff0bc;transform:rotate(-45deg)}
#settingssound{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:52px;margin:18px auto 0;padding:10px 16px;font:900 17px Casual;line-height:1.25;clip-path:none;border-radius:14px;background:#145684;color:#fff0bd;border:2px solid #f6ce72;box-sizing:border-box;text-align:center;white-space:normal}
#loginreason{font:800 13px/1.4 Casual;margin:4px 0 12px;color:#edf8ff;text-align:center}
@media(max-width:370px),(max-height:600px){body.playing .movement{--combat-button:56px}body.playing .controls{bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px))}}