:root{--abyssal-runic:"Cinzel",Georgia,serif;}\nhtml,body,button,input,select,textarea{font-family:var(--abyssal-runic)!important;}\ncanvas{font-family:var(--abyssal-runic);}\n@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--touch-target:48px;--bg:#04101a;--panel:rgba(6,22,35,.88);--cyan:#6ae8e5;--blue:#4a9acc;--violet:#a990f0;--text:#e4f2f3;--muted:#7a95a5;--line:rgba(130,200,210,.14);--danger:#ff6880;--rim:rgba(100,200,215,.35);--glass:rgba(8,28,42,.82)}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--abyssal-runic)}body{background:radial-gradient(ellipse at 50% 35%,#0e2838 0%,#061520 45%,#020a10 100%)}button{font:inherit;cursor:pointer}#app{height:100dvh;min-height:460px;display:flex;flex-direction:column;max-width:1600px;margin:auto;padding:0 24px}.topbar{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-size:27px;color:var(--cyan);text-shadow:0 0 20px #58dcd6}.brand strong{font-size:14px;letter-spacing:.25em;display:block}.brand small{font:9px 'DM Mono',monospace;letter-spacing:.14em;color:var(--muted);display:block;margin-top:4px}.top-actions{display:flex;gap:8px}.icon-btn{height:38px;width:38px;border:1px solid var(--line);border-radius:50%;background:#0c202c;color:#b8dfe3;font-size:17px}.icon-btn:hover{border-color:var(--cyan);color:var(--cyan)}#gameShell{flex:1;min-height:0;position:relative;overflow:hidden;border-left:1px solid rgba(122,202,216,.08);border-right:1px solid rgba(122,202,216,.08);background:#071722}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.screen{position:absolute;inset:0;z-index:2;overflow:auto;background:linear-gradient(90deg,rgba(4,15,24,.92) 0%,rgba(4,15,24,.72) 43%,rgba(4,15,24,.1) 100%)}.menu-content{position:relative;z-index:2;width:min(510px,58%);padding:clamp(30px,7vh,85px) 0 30px clamp(26px,7vw,110px)}.eyebrow{font:10px 'DM Mono',monospace;letter-spacing:.16em;color:#8fb7c5;display:flex;align-items:center;gap:9px}.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);display:inline-block;animation:pulse 1.6s infinite}h1,h2{font-size:clamp(34px,5vw,68px);line-height:.98;letter-spacing:-.065em;margin:24px 0 18px;font-weight:800}h1 em,h2 em{font-style:normal;color:var(--cyan);text-shadow:0 0 35px rgba(80,224,218,.15)}.intro{color:#9bb4c0;font-size:clamp(12px,1.2vw,15px);line-height:1.8;max-width:360px;margin:0 0 30px}.primary-btn{width:min(300px,100%);height:53px;border:0;background:var(--cyan);color:#05212a;font-weight:800;font-size:11px;letter-spacing:.13em;display:flex;align-items:center;justify-content:space-between;padding:0 19px;transition:transform .2s,box-shadow .2s;box-shadow:0 0 30px rgba(121,243,240,.08)}.primary-btn span{font-size:20px}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 0 35px rgba(121,243,240,.25)}.controls-hint{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:20px;font:9px 'DM Mono',monospace;letter-spacing:.08em;color:#7593a2}.controls-hint span{border:1px solid var(--line);padding:7px 9px}.controls-hint i{font-style:normal;color:#476371}.record-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:clamp(24px,5vh,52px);font:9px 'DM Mono',monospace;color:#6e8d9c;letter-spacing:.07em}.record-row strong{color:#d1eeee;font-weight:500}.dot-sep{color:#365665}.menu-footer{position:absolute;bottom:18px;left:clamp(26px,7vw,110px);right:24px;display:flex;justify-content:space-between;font:8px 'DM Mono',monospace;letter-spacing:.12em;color:#4f6b79}.menu-creature{position:absolute;width:min(48vw,560px);height:min(48vw,560px);right:5%;top:50%;transform:translateY(-50%);display:grid;place-items:center;pointer-events:none}.glow{position:absolute;width:58%;height:58%;border-radius:50%;background:radial-gradient(circle,rgba(57,201,218,.19),rgba(75,91,183,.08) 38%,transparent 70%);filter:blur(20px);animation:breathe 4s ease-in-out infinite}.orbit{position:absolute;border:1px solid rgba(109,226,233,.2);border-radius:50%;transform:rotate(-22deg)}.orbit-one{width:80%;height:40%;animation:orbit 18s linear infinite}.orbit-two{width:64%;height:90%;border-color:rgba(159,132,255,.2);transform:rotate(52deg);animation:orbit 25s linear infinite reverse}.creature-core{width:25%;height:25%;position:relative;z-index:2;border-radius:46% 54% 51% 49%;background:radial-gradient(circle at 35% 28%,#d3ffff 0%,#8cf7ef 12%,#31a9c2 35%,#1d547c 65%,#101c3d 100%);box-shadow:inset -13px -14px 25px #08182d,0 0 35px #4ce8e5,0 0 100px rgba(46,193,226,.32);animation:float 4s ease-in-out infinite}.creature-core:before,.creature-core:after{content:"";position:absolute;width:12%;height:20%;top:43%;background:#071521;border-radius:50%;box-shadow:0 0 8px #b8ffff}.creature-core:before{left:28%}.creature-core:after{right:28%}.creature-core span{position:absolute;width:24%;height:9%;border-bottom:2px solid #063e50;border-radius:50%;left:38%;top:61%}.creature-tentacle{position:absolute;z-index:1;width:25%;height:36%;border-left:4px solid rgba(96,234,229,.78);border-radius:50%;filter:drop-shadow(0 0 8px #2ec9d2);transform-origin:top;animation:tentacle 2.8s ease-in-out infinite}.t1{top:54%;left:35%;transform:rotate(30deg)}.t2{top:54%;right:35%;transform:rotate(-30deg);animation-delay:-.6s}.t3{top:61%;left:43%;transform:rotate(13deg);height:31%;animation-delay:-1.1s}.t4{top:61%;right:43%;transform:rotate(-13deg);height:31%;animation-delay:-1.7s}.hud{position:absolute;z-index:3;left:24px;right:24px;top:18px;pointer-events:none}.hud-top{display:flex;justify-content:space-between;align-items:start}.hud-stat{display:flex;flex-direction:column;gap:4px;font-family:'DM Mono',monospace}.hud-stat small,.bar-label{font-size:9px;letter-spacing:.12em;color:#8aa8b7}.hud-stat strong{font-size:21px;font-weight:500;color:#e4ffff}.center-stat{text-align:center}.right-stat{text-align:right}.bars{width:min(290px,45%);margin-top:15px}.bar-label{display:flex;justify-content:space-between;margin:8px 0 5px;font-size:8px}.bar{height:5px;background:rgba(130,180,190,.16);overflow:hidden}.bar-fill{height:100%;width:100%;transition:width .2s}.hp-fill{background:linear-gradient(90deg,#42d6c6,#a5fff2);box-shadow:0 0 10px #47e4d6}.xp-fill{background:linear-gradient(90deg,#8b83ff,#d6a7ff);box-shadow:0 0 10px #9e8cff}.xp-bar{height:3px}.mobile-tip{font:9px 'DM Mono',monospace;color:rgba(180,222,230,.58);margin-top:13px}.modal-screen{display:flex;align-items:center;justify-content:center;background:rgba(3,12,20,.72);backdrop-filter:blur(9px);padding:20px}.modal-card{width:min(550px,100%);padding:clamp(24px,4vw,42px);border:1px solid rgba(133,221,226,.2);background:linear-gradient(140deg,rgba(10,30,42,.98),rgba(4,14,24,.98));backdrop-filter:blur(10px);box-shadow:0 25px 100px #02080d}.modal-card h2{font-size:clamp(30px,4vw,48px);margin:17px 0 12px}.modal-card>p{font-size:13px;line-height:1.7;color:#90aeb9;margin:0 0 23px}.upgrade-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.upgrade-card{min-width:0;text-align:left;border:1px solid rgba(121,205,220,.22);background:rgba(21,51,66,.55);color:var(--text);padding:15px 12px;transition:.2s}.upgrade-card:hover{border-color:var(--cyan);transform:translateY(-3px);background:rgba(32,78,91,.55)}.upgrade-icon{font-size:26px;color:var(--cyan);display:block;margin-bottom:12px}.upgrade-card strong{font-size:11px;display:block;letter-spacing:.03em}.upgrade-card p{font-size:10px;line-height:1.5;color:#8eacb9;margin:8px 0 0}.compact-card{width:min(460px,100%)}.compact-card .primary-btn{width:100%;margin-top:12px}.secondary-btn{height:43px;width:100%;margin-top:9px;border:1px solid var(--line);background:transparent;color:#9ab8c4;font-size:10px;letter-spacing:.1em}.secondary-btn:hover{border-color:#7ebdc5;color:#d5ffff}.results{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:22px 0}.results div{display:flex;flex-direction:column;gap:5px}.results small{font:9px 'DM Mono',monospace;letter-spacing:.1em;color:#7293a2}.results strong{font-size:22px;font-weight:600}.danger-eyebrow{color:#ff91a5}.danger-eyebrow .pulse-dot{background:var(--danger);box-shadow:0 0 12px var(--danger)}.toast{position:absolute;z-index:6;top:24%;left:50%;transform:translateX(-50%);background:rgba(10,34,47,.94);border:1px solid rgba(121,243,240,.35);padding:11px 17px;color:#cafffb;font:10px 'DM Mono',monospace;letter-spacing:.08em;white-space:nowrap}.page-footer{height:38px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font:8px 'DM Mono',monospace;letter-spacing:.09em;color:#4d6c7b}.page-footer span:last-child{color:#527f84}
[hidden]{display:none!important}
@keyframes pulse{50%{opacity:.35;box-shadow:0 0 3px var(--cyan)}}@keyframes breathe{50%{transform:scale(1.2);opacity:.65}}@keyframes float{0%,100%{transform:translateY(-5px) rotate(-4deg)}50%{transform:translateY(7px) rotate(4deg)}}@keyframes orbit{to{transform:rotate(338deg)}}@keyframes tentacle{0%,100%{scale:1 1;rotate:-4deg}50%{scale:1 .87;rotate:5deg}}
@media(max-width:700px){#app{padding:0 10px}.topbar{height:58px}.brand strong{font-size:12px}.brand small{font-size:8px}.menu-content{width:100%;padding:38px 22px 25px}.menu-creature{width:80vw;height:80vw;right:-22%;top:40%;opacity:.62}.screen:not(.modal-screen){background:linear-gradient(90deg,rgba(4,15,24,.93),rgba(4,15,24,.65) 75%,rgba(4,15,24,.35))}h1{font-size:clamp(39px,12vw,58px);margin-top:22px}.intro{max-width:290px;font-size:12px}.controls-hint{max-width:280px}.record-row{max-width:280px;line-height:1.8;margin-top:25px}.menu-footer{left:22px;right:22px;font-size:7px}.hud{left:12px;right:12px;top:12px}.hud-stat strong{font-size:18px}.bars{width:55%;margin-top:12px}.mobile-tip{max-width:220px;font-size:8px}.upgrade-choices{grid-template-columns:1fr;gap:8px}.upgrade-card{display:grid;grid-template-columns:36px 1fr;column-gap:9px;padding:11px}.upgrade-icon{grid-row:span 2;margin:0;font-size:23px}.upgrade-card p{margin-top:4px}.modal-card{padding:22px}.modal-card h2{font-size:32px}.modal-card>p{font-size:12px;margin-bottom:14px}.page-footer{font-size:7px}.page-footer span:nth-child(2){display:none}.results strong{font-size:19px}}
@media(max-height:620px){.menu-content{padding-top:22px}h1{font-size:clamp(34px,7vh,50px);margin:14px 0}.intro{margin-bottom:17px}.record-row{margin-top:18px}.menu-footer{bottom:8px}.modal-card{padding:20px}.modal-card h2{margin:12px 0}.modal-card>p{margin-bottom:12px}.upgrade-card{padding:10px}.upgrade-icon{margin-bottom:5px}}

.menu-secondary-actions{display:flex;gap:9px;width:min(300px,100%);margin-top:10px}.menu-action{margin:0;flex:1;padding:0 10px;height:42px;font-size:9px;display:flex;align-items:center;justify-content:space-between;gap:5px}.account-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:15px;font:8px 'DM Mono',monospace;color:#63818e;letter-spacing:.06em}.account-line button{background:none;border:0;color:#8bdedc;text-decoration:underline;font:inherit;cursor:pointer}.field-label{display:block;font:9px 'DM Mono',monospace;letter-spacing:.12em;color:#89aebc;margin:12px 0 6px}.text-field{width:100%;height:43px;border:1px solid rgba(121,205,220,.25);background:rgba(2,12,20,.65);color:#e7ffff;padding:0 12px;outline:none;font:12px var(--abyssal-runic)}.text-field:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(121,243,240,.08)}.form-message{font:10px 'DM Mono',monospace;line-height:1.5;color:#9ef3de;min-height:16px;margin:10px 0}.shop-modal{width:min(760px,100%);max-height:90%;overflow:auto}.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.shop-heading h2{margin-bottom:8px}.wallet{display:flex;align-items:center;gap:7px;color:var(--cyan);font-size:17px;white-space:nowrap}.wallet strong{font-size:23px}.wallet small{display:block;font:8px 'DM Mono',monospace;color:#7f9aa8;letter-spacing:.1em}.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 20px}.skin-card{border:1px solid rgba(121,205,220,.2);background:rgba(20,47,60,.45);padding:13px;min-width:0}.skin-preview{height:72px;display:grid;place-items:center;background:radial-gradient(circle,rgba(74,199,211,.13),transparent 70%);margin-bottom:10px}.skin-orb{width:35px;height:35px;border-radius:45% 55% 49% 51%;box-shadow:0 0 22px currentColor,inset -8px -8px 13px rgba(0,0,0,.45);position:relative;animation:float 3s ease-in-out infinite}.skin-orb:before,.skin-orb:after{content:"";position:absolute;top:14px;width:4px;height:7px;background:#07131d;border-radius:50%}.skin-orb:before{left:10px}.skin-orb:after{right:10px}.skin-card strong{display:block;font-size:11px}.skin-card p{font-size:9px;line-height:1.5;color:#8aa8b7;min-height:28px;margin:6px 0 10px}.skin-card button{width:100%;min-height:32px;border:1px solid rgba(121,205,220,.25);background:rgba(6,22,32,.8);color:#baf9f5;font:9px 'DM Mono',monospace;letter-spacing:.04em}.skin-card button:hover{border-color:var(--cyan)}.skin-card button:disabled{opacity:.45;cursor:default}.skin-card.equipped{border-color:rgba(121,243,240,.6)}.online-badge{font:8px 'DM Mono',monospace;color:#9bf4d7;letter-spacing:.08em}
@media(max-width:700px){.menu-secondary-actions{width:min(310px,100%)}.menu-action{font-size:8px;padding:0 8px}.account-line{max-width:310px}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-heading{align-items:start}.wallet{font-size:14px}.wallet strong{font-size:18px}}


/* v1.2 — catálogo, rankings e indicador online */
.online-counter{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(112,239,224,.18);border-radius:999px;background:rgba(5,23,34,.72);color:#9dece5;font-size:10px;letter-spacing:.12em;white-space:nowrap}
.online-counter .pulse-dot{width:6px;height:6px;margin:0;}
.codex-modal{width:min(760px,94vw);max-height:min(86vh,850px);overflow:auto;}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0;text-align:left}
.catalog-grid h3{grid-column:1/-1;color:#8fece4;font-size:11px;letter-spacing:.16em;margin:16px 0 2px}
.codex-card{padding:13px;border:1px solid rgba(133,205,218,.16);border-radius:12px;background:rgba(5,19,31,.65);min-width:0}
.codex-card b{color:#d9faff;font-size:12px;letter-spacing:.03em}.codex-card p{font-size:11px;line-height:1.5;color:#92aeba;margin:7px 0 0}.codex-card.locked{filter:saturate(.3);opacity:.65}.codex-card.unlocked{border-color:rgba(105,240,220,.28);box-shadow:inset 0 0 20px rgba(67,195,192,.035)}
.ranking-content{display:grid;gap:14px;margin:18px 0;text-align:left}.ranking-section h3{font-size:12px;letter-spacing:.14em;color:#9ef5e9;margin:0 0 8px}.ranking-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(135,192,204,.12);font-size:12px}.ranking-row .rank-place{color:#8ce8df;font-weight:800}.ranking-row .rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-row .rank-time{color:#d6c8ff;font-variant-numeric:tabular-nums}.ranking-note{color:#8da9b8;font-size:10px;line-height:1.5}
@media(max-width:600px){.catalog-grid{grid-template-columns:1fr}.online-counter{font-size:9px;padding:6px 8px}.codex-modal{padding:18px;}.ranking-row{font-size:11px}}

/* Catálogo visual otimizado */
.codex-heading{grid-column:1/-1;margin:18px 0 4px;color:#9cecff;letter-spacing:.14em;font-size:12px}.codex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;grid-column:1/-1}.codex-card{min-width:0}.codex-preview{height:78px;display:flex;align-items:center;justify-content:center;margin:-2px -2px 10px;border-radius:10px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--preview) 38%,transparent),rgba(3,12,20,.9) 72%);border:1px solid color-mix(in srgb,var(--preview) 45%,transparent);color:var(--preview);font-size:36px;text-shadow:0 0 18px var(--preview);box-shadow:inset 0 0 20px rgba(80,160,200,.06)}.monster-preview{font-size:42px;transform:translateZ(0)}@media(max-width:600px){.codex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.codex-preview{height:60px}}

/* v2.1: retratos vetoriais do catálogo */
.monster-preview svg{width:100%;height:100%;max-width:100px;overflow:visible;filter:drop-shadow(0 0 7px var(--preview));}
.codex-card p{overflow-wrap:anywhere;}

/* v2.4 — abismo vivo, prévias reais, laboratório e roleta */
.wheel-cta{position:relative;display:flex;align-items:center;gap:11px;width:min(390px,100%);min-height:58px;margin:13px 0 0;padding:10px 13px;border:1px solid rgba(255,211,105,.8);border-radius:10px;color:#fff8d8;text-align:left;cursor:pointer;overflow:hidden;background:linear-gradient(110deg,rgba(76,40,95,.95),rgba(9,48,65,.98) 58%,rgba(122,61,38,.92));box-shadow:0 0 22px rgba(255,167,77,.19),inset 0 0 18px rgba(255,240,184,.07);animation:wheelBreathe 2.8s ease-in-out infinite}
.wheel-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.12) 48%,transparent 70%);transform:translateX(-100%);animation:wheelShine 4s ease-in-out infinite}
.wheel-cta-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;font-size:21px;color:#fff5b3;border:1px solid rgba(255,228,142,.72);background:radial-gradient(circle,#e8a84a,#7041a0 65%,#071927);box-shadow:0 0 14px rgba(255,194,89,.45)}
.wheel-cta-copy{display:grid;gap:4px;flex:1;min-width:0}.wheel-cta-copy strong{font-size:11px;letter-spacing:.12em}.wheel-cta-copy small{font:7px 'DM Mono',monospace;color:#e3d4ff;letter-spacing:.04em}.wheel-cta-prizes{font:8px 'DM Mono',monospace;color:#ffe9a8;white-space:nowrap}.wheel-cta-arrow{font-size:16px;color:#ffdf88}
@keyframes wheelBreathe{0%,100%{box-shadow:0 0 16px rgba(255,167,77,.14),inset 0 0 18px rgba(255,240,184,.06)}50%{box-shadow:0 0 28px rgba(255,167,77,.33),inset 0 0 20px rgba(255,240,184,.12)}}
@keyframes wheelShine{0%,65%,100%{transform:translateX(-120%)}85%{transform:translateX(120%)}}
.wheel-modal{width:min(520px,94vw);max-height:92%;overflow:auto;text-align:center}.wheel-modal h2{margin-bottom:6px}.wheel-stage{position:relative;width:min(320px,76vw);aspect-ratio:1;margin:12px auto 6px;padding:8px;border-radius:50%;background:conic-gradient(from 20deg,#ffe6a1,#8758c8,#68f2ed,#ffe6a1,#b54f81,#ffe6a1);box-shadow:0 0 28px rgba(110,237,234,.2),inset 0 0 14px rgba(0,0,0,.8)}.wheel-stage canvas{display:block;width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 0 9px rgba(106,235,245,.35))}.wheel-message{min-height:34px;margin:10px auto;color:#bcebe8;font-size:10px;line-height:1.5;max-width:390px}.wheel-actions{display:grid;gap:8px;margin:12px 0}.wheel-spin-btn{min-height:48px;border:1px solid #ffe39a;border-radius:8px;background:linear-gradient(100deg,#8c4078,#c17b33);color:#fff9e1;font:900 11px 'DM Mono',monospace;letter-spacing:.08em;box-shadow:0 0 20px rgba(229,156,78,.22);cursor:pointer}.wheel-spin-btn:disabled,.active-ability:disabled{opacity:.45;cursor:wait}.wheel-modal>.secondary-btn{margin-top:3px}
.shop-section-title{margin:18px 0 8px;font:800 10px 'DM Mono',monospace;letter-spacing:.12em;color:#9cece7}.skin-preview{height:106px;overflow:hidden;border:1px solid rgba(124,237,239,.1);border-radius:8px;background:radial-gradient(circle,rgba(74,199,211,.16),transparent 70%);margin-bottom:10px}.skin-preview-canvas{display:block;width:100%;height:100%;object-fit:contain}.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.skin-card{border-radius:10px;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0;display:flex;flex-direction:column;overflow:hidden}.skin-card>strong{display:block;line-height:1.35;overflow-wrap:anywhere}.skin-card>p{min-width:0;overflow-wrap:anywhere;line-height:1.55}.skin-card .skin-ability{flex:1;min-height:0;padding:9px 10px;border:1px solid rgba(121,243,240,.16);border-radius:8px;background:rgba(4,19,29,.58);font-size:clamp(10px,1vw,12px);line-height:1.6}.skin-card .skin-ability b{display:block;margin-bottom:4px;color:#9cece7;font:800 9px 'DM Mono',monospace;letter-spacing:.09em}.skin-card>button{width:100%;min-height:42px;white-space:normal;line-height:1.35;overflow-wrap:anywhere;margin-top:10px}.skin-card:hover{transform:translateY(-2px);border-color:rgba(121,243,240,.52);box-shadow:0 8px 24px rgba(0,0,0,.2)}.skin-card.equipped{box-shadow:inset 0 0 20px rgba(91,242,226,.07),0 0 15px rgba(91,242,226,.09)}
.meta-shop-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:25px 0 8px;padding-top:18px;border-top:1px solid rgba(121,205,220,.16)}.meta-shop-heading .eyebrow{font:8px 'DM Mono',monospace;color:#9cece7;letter-spacing:.12em}.meta-shop-heading h3{margin:5px 0;color:#e5fdff;font-size:15px;letter-spacing:.07em}.meta-shop-heading p{font-size:10px;color:#86a9b7;margin:0;line-height:1.5}.meta-shop-mark{font-size:34px;color:#e3bdff;text-shadow:0 0 22px #9a7aff}.meta-upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0 20px}.meta-card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;padding:12px;border:1px solid rgba(121,205,220,.2);border-radius:9px;background:linear-gradient(145deg,rgba(15,45,58,.72),rgba(4,16,26,.8));min-width:0}.meta-card-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(129,239,230,.22);border-radius:9px;color:#b8fff5;background:rgba(64,133,152,.14);font-size:20px}.meta-card-copy{min-width:0}.meta-kicker{font:7px 'DM Mono',monospace;letter-spacing:.08em;color:#8bdad8;margin-bottom:5px}.meta-card strong{display:block;font-size:11px;color:#e4fbff}.meta-card p{font-size:9px;color:#8ba9b6;line-height:1.45;margin:5px 0 8px}.meta-card button{grid-column:1/-1;min-height:31px;border:1px solid rgba(112,222,217,.25);border-radius:6px;background:rgba(4,22,32,.86);color:#c1fff5;font:8px 'DM Mono',monospace;letter-spacing:.04em;cursor:pointer}.meta-card button:disabled{opacity:.45}.meta-max{border-color:rgba(113,236,183,.3)}
.active-abilities{position:absolute;z-index:5;right:14px;top:70px;bottom:auto;display:flex;gap:6px;flex-direction:column;align-items:flex-end;pointer-events:auto}.active-ability{min-height:32px;border:1px solid rgba(159,226,255,.6);border-radius:7px;background:rgba(6,20,37,.88);color:#e4fcff;padding:6px 10px;font:800 8px 'DM Mono',monospace;letter-spacing:.04em;backdrop-filter:blur(8px);cursor:pointer;box-shadow:0 0 18px rgba(106,175,255,.15)}.pulse-ability{border-color:rgba(121,244,228,.65);color:#cafff8}.dash-ability{border-color:rgba(201,164,255,.65);color:#e8d7ff}
.creature-preview-canvas,.monster-preview canvas{display:block;width:100%;height:100%;max-width:150px;margin:auto;filter:drop-shadow(0 0 7px var(--preview))}.monster-preview{padding:0;overflow:hidden}.codex-card.unlocked .monster-preview{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--preview) 24%,transparent),rgba(3,12,20,.92) 72%)}
@media(max-width:700px){.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-card .skin-ability{font-size:11px;line-height:1.55}.meta-upgrade-grid{grid-template-columns:1fr}.wheel-cta{width:min(380px,100%)}.wheel-cta-prizes{display:none}.active-abilities{left:10px;right:10px;bottom:10px;justify-content:center}.active-ability{font-size:7px;min-height:33px;padding:7px 8px}.skin-preview{height:92px}}

/* Menu actions in a readable grid keep the rewarded wheel visible without squeezing labels. */
.menu-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(390px,100%);margin-top:10px}
.menu-secondary-actions a.menu-action{text-decoration:none}
.menu-action{min-width:0;width:100%;height:39px;padding:0 9px;font-size:8px;letter-spacing:.015em;justify-content:center;overflow-wrap:anywhere}
.wheel-cta{width:min(390px,100%);margin:14px 0 0}
@media(max-width:420px){.wheel-cta{gap:8px;padding:9px}.wheel-cta-copy strong{font-size:10px}.wheel-cta-copy small{font-size:6px}.menu-action{font-size:7px;padding:0 5px}}

/* Keep the ranking beside the acquired skills panel instead of overlapping it. */
.run-energy-ranking{top:142px;right:calc(clamp(145px,17vw,220px) + 22px);z-index:9}
@media(max-width:700px){.run-energy-ranking{top:130px;right:calc(clamp(126px,39vw,170px) + 16px);width:118px}}
/* Gameplay controls stay readable while letting the action remain visible behind them. */
body.game-active .icon-btn,
body.game-active .active-ability,
body.game-active .room-badge{
 background:rgba(4,17,29,.30);
 opacity:.84;
 backdrop-filter:blur(2px);
 box-shadow:none;
}
body.game-active .icon-btn:hover,
body.game-active .active-ability:hover,
body.game-active .room-badge:hover{opacity:1;background:rgba(4,17,29,.52)}
/* Close controls remain pinned to the top edge while a long menu is scrolled. */
.codex-modal .modal-top-close,
.cardumes-modal .modal-top-close,
.profile-modal .modal-top-close,
.shop-modal .modal-top-close{
 position:sticky;
 top:0;
 float:right;
 margin:0 0 -32px auto;
 z-index:30;
 width:32px;
 height:32px;
 display:grid;
 place-items:center;
 border:1px solid rgba(121,243,240,.32);
 border-radius:7px;
 background:rgba(3,15,26,.92);
 color:#d9ffff;
 font-size:23px;
 line-height:1;
 cursor:pointer;
}
.codex-modal .modal-top-close:hover,
.cardumes-modal .modal-top-close:hover,
.profile-modal .modal-top-close:hover,
.shop-modal .modal-top-close:hover{background:rgba(21,66,78,.95);border-color:rgba(121,243,240,.7)}
/* Enemy portraits remain visible in the codex even before their field notes are unlocked. */
.monster-codex-card.locked{opacity:.92;filter:none}
.monster-codex-card .monster-preview{filter:none}

/* v2.5 — o canvas de gameplay não pode sequestrar as miniaturas da loja e do catálogo. */
canvas{position:relative;inset:auto;width:100%;height:100%;display:block}
#game{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.skin-preview,.codex-preview,.wheel-stage{position:relative}
.skin-preview-canvas,.monster-preview canvas{position:relative;inset:auto;width:100%;height:100%;display:block;object-fit:contain}
.wheel-stage canvas{position:relative;inset:auto;width:100%;height:100%;display:block}
.screen{isolation:isolate}
.modal-screen{z-index:10}
.shop-modal,.codex-modal,.wheel-modal{overscroll-behavior:contain;scrollbar-color:rgba(121,243,240,.35) rgba(3,12,20,.4);scrollbar-width:thin}
.skin-grid{align-items:stretch}
.skin-card{display:flex;flex-direction:column;min-width:0}
.skin-preview{flex:0 0 auto;position:relative;min-width:0}
.skin-card strong{line-height:1.35;min-height:2.6em}
.skin-card p{flex:1;min-height:3.7em;overflow-wrap:anywhere}
.skin-card button{margin-top:auto;min-height:36px;white-space:normal;line-height:1.35}
.codex-preview{position:relative;isolation:isolate}
.monster-preview canvas{max-width:100%;max-height:100%}
@media(max-width:700px){.shop-modal{max-height:calc(100% - 8px);padding:18px}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.skin-card{padding:9px}.skin-preview{height:88px}.skin-card p{min-height:0;font-size:9px}.skin-card strong{font-size:10px}}


/* v2.6 — bestiário legível: menos colunas, retratos grandes e cartões consistentes. */
.codex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.codex-card{padding:12px;border:1px solid rgba(121,205,220,.16);border-radius:10px;background:linear-gradient(150deg,rgba(14,39,52,.78),rgba(4,17,27,.88));overflow:hidden}
.codex-card b{display:block;font-size:12px;line-height:1.4;color:#e2fbff}
.codex-card p{font-size:11px;line-height:1.65;color:#8eacb9;margin:7px 0 2px}
.codex-preview{height:112px;margin:0 0 11px;border-radius:8px}
.codex-heading{margin:24px 0 5px;padding-top:8px;font-size:12px}
.monster-preview canvas{max-width:100%;max-height:100%}
.monster-codex-card{min-height:220px}
.monster-codex-card.locked .codex-preview{filter:saturate(.86)}
@media(max-width:600px){.codex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.codex-card{padding:8px}.codex-preview{height:86px}.codex-card b{font-size:10px}.codex-card p{font-size:9px;line-height:1.5}.monster-codex-card{min-height:0}}

/* v2.7 — salas isoladas, controles móveis e orçamento de renderização. */
.room-modal{width:min(680px,96%);max-height:92%;overflow:auto;overscroll-behavior:contain}
.rooms-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px}
.rooms-title-row h3,.room-create-section h3,.room-join-code h3{margin:0;color:#a7f3ef;font-size:10px;letter-spacing:.12em}
.small-action{border:1px solid rgba(121,205,220,.24);background:rgba(6,22,32,.7);color:#9cece7;padding:7px 9px;font:8px 'DM Mono',monospace;border-radius:6px}
.rooms-list{display:grid;gap:7px;max-height:190px;overflow:auto;padding-right:2px}
.room-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(121,205,220,.16);border-radius:8px;background:rgba(9,29,41,.72);min-width:0}.room-row.pvp-room{border-color:rgba(255,66,92,.72);background:linear-gradient(110deg,rgba(88,17,35,.45),rgba(9,29,41,.82));box-shadow:inset 3px 0 rgba(255,66,92,.85)}.room-row.pvp-room b,.room-row.pvp-room small{color:#ffb3bd}.room-row.pvp-room .room-join-btn{border-color:rgba(255,66,92,.7);background:rgba(151,25,48,.3);color:#ffdce1}
.room-row>div{display:grid;gap:4px;min-width:0}.room-row b{font-size:11px;color:#e5fbff;overflow-wrap:anywhere}.room-row small{font:8px 'DM Mono',monospace;color:#89a7b5;letter-spacing:.03em}
.room-join-btn{flex:none;min-height:32px;padding:6px 10px;border:1px solid rgba(115,236,226,.4);border-radius:6px;background:rgba(27,101,109,.22);color:#c7fffa;font:800 8px 'DM Mono',monospace;letter-spacing:.06em}.room-join-btn:disabled{opacity:.35}
.rooms-empty{margin:0;padding:13px;color:#89a7b5;font-size:10px;border:1px dashed rgba(121,205,220,.2);border-radius:8px}
.room-create-section,.room-join-code{margin-top:18px;padding-top:16px;border-top:1px solid rgba(121,205,220,.14)}
.room-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.room-private-toggle{display:flex;align-items:center;gap:9px;min-height:43px;padding:7px 10px;border:1px solid rgba(121,205,220,.16);background:rgba(5,18,28,.55);color:#d8f8f7;font-size:10px}.room-private-toggle input{accent-color:#73e5da;width:16px;height:16px}.room-private-toggle small{color:#82a3b1;font-size:8px}.room-create-section .primary-btn{margin-top:13px;width:100%}
.room-badge{position:absolute;z-index:8;right:14px;top:74px;max-width:45%;padding:9px 12px;border:1px solid rgba(133,243,231,.45);border-radius:8px;background:rgba(5,21,31,.92);color:#cafff8;font:800 9px 'DM Mono',monospace;letter-spacing:.06em;box-shadow:0 0 16px rgba(99,229,220,.12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-badge.pvp-room-badge{border-color:rgba(255,64,91,.9);background:rgba(72,9,25,.95);color:#ffdce2;box-shadow:0 0 18px rgba(255,47,77,.3)}
#roomBadge[hidden],#mobileJoystick[hidden]{display:none!important}
.mobile-joystick{display:none;position:fixed;z-index:30;left:max(16px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:148px;height:166px;touch-action:none;user-select:none;-webkit-user-select:none;align-items:center;justify-content:flex-end;flex-direction:column;gap:6px;pointer-events:auto}
.joystick-base{width:126px;height:126px;border-radius:50%;border:1px solid rgba(134,241,239,.35);background:radial-gradient(circle,rgba(55,128,147,.3),rgba(4,18,29,.74));box-shadow:inset 0 0 22px rgba(64,230,225,.08),0 0 22px rgba(0,0,0,.18);display:grid;place-items:center;touch-action:none}
.joystick-knob{width:52px;height:52px;border-radius:50%;border:1px solid rgba(204,255,249,.58);background:radial-gradient(circle at 35% 30%,rgba(162,255,246,.55),rgba(30,100,125,.72));box-shadow:0 0 15px rgba(121,243,240,.2);transform:translate(0,0);pointer-events:none}
.mobile-joystick small{font:8px 'DM Mono',monospace;letter-spacing:.17em;color:rgba(193,246,242,.72)}
@media(max-width:700px){
 .room-modal{width:100%;max-height:calc(100% - 8px);padding:18px}.room-form-row{grid-template-columns:1fr}.room-private-toggle{justify-content:flex-start}.rooms-list{max-height:150px}
 html.mobile-game-active,body.mobile-game-active{overflow:hidden;overscroll-behavior:none;touch-action:none}
 body.mobile-game-active #app{height:100dvh;min-height:0;padding:0;max-width:none;overflow:hidden}
 body.mobile-game-active .topbar,body.mobile-game-active .page-footer{display:none}
 body.mobile-game-active #gameShell{position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;border:0;z-index:20;overflow:hidden;touch-action:none}
 body.mobile-game-active #game{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
 body.mobile-game-active #mobileJoystick:not([hidden]){display:flex}
 body.mobile-game-active .hud{top:max(8px,env(safe-area-inset-top));left:12px;right:12px}
 body.mobile-game-active .hud-stat small{font-size:7px}.hud-stat strong{font-size:16px}.bars{width:min(225px,55%);margin-top:8px}.bar-label{font-size:7px;margin:5px 0 3px}.bar{height:4px}
 body.mobile-game-active .mobile-tip{display:none}
 body.mobile-game-active .active-abilities{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(25px,env(safe-area-inset-bottom));width:min(46%,205px);justify-content:flex-end;gap:6px}
 body.mobile-game-active .active-ability{font-size:7px;padding:8px 7px;min-height:36px;max-width:100%}
 body.mobile-game-active .room-badge{top:calc(max(10px,env(safe-area-inset-top)) + 48px);right:10px;max-width:42%;font-size:8px;padding:7px 9px}
 body.mobile-game-active .toast{top:25%;max-width:90%;white-space:normal;text-align:center;line-height:1.45}
}
@media(max-height:520px) and (max-width:900px){.mobile-joystick{width:120px;height:128px}.joystick-base{width:94px;height:94px}.joystick-knob{width:42px;height:42px}.room-modal{max-height:96%}body.mobile-game-active .bars{width:210px}}


/* v2.8 — câmera ampla, fronteira rochosa e alerta cinematográfico de boss. */
#roomBadge{top:126px;right:18px;max-width:min(42%,360px)}
#endDiveBtn{top:72px;right:18px;z-index:9}
.boss-alert{position:fixed;z-index:2147483647;top:17%;left:50%;width:min(650px,calc(100% - 32px));transform:translateX(-50%);padding:18px 24px 20px;border:1px solid rgba(255,74,108,.82);background:linear-gradient(100deg,rgba(16,3,13,.96),rgba(48,5,21,.88),rgba(9,17,29,.96));box-shadow:0 0 26px rgba(255,30,76,.24),inset 0 0 22px rgba(255,48,86,.08);text-align:center;pointer-events:none;backdrop-filter:blur(8px)}
.boss-alert[hidden]{display:none!important}
.boss-alert-kicker{display:block;margin-bottom:8px;color:#ff9eac;font:800 9px 'DM Mono',monospace;letter-spacing:.24em}
.boss-alert strong{display:block;color:#fff0f2;font-size:clamp(19px,3vw,34px);line-height:1.08;letter-spacing:.09em;text-shadow:0 0 20px rgba(255,45,86,.8)}
.boss-alert p{margin:10px 0 0;color:#e0b8c4;font:10px/1.65 'DM Mono',monospace;letter-spacing:.045em}
.boss-alert-enter{animation:bossWarning 5s linear both}
@keyframes bossWarning{0%,40%{opacity:1;filter:none;transform:translate(-50%,0) scale(1)}100%{opacity:0;filter:none;transform:translate(-50%,0) scale(1)}}
.rooms-empty{line-height:1.65}
.room-row{min-height:58px}
.room-row b{font-size:12px}
.room-row small{font-size:9px;line-height:1.5}
@media(max-width:700px){
 #endDiveBtn{top:calc(max(8px,env(safe-area-inset-top)) + 42px)!important;right:10px!important;padding:7px 9px!important;font-size:8px!important;max-width:44%;}
 body.mobile-game-active .room-badge{top:calc(max(8px,env(safe-area-inset-top)) + 78px);right:10px;max-width:58%;font-size:8px;padding:7px 9px}
 body.mobile-game-active .boss-alert{top:20%;width:calc(100% - 24px);padding:14px 12px}
 body.mobile-game-active .boss-alert-kicker{font-size:7px;letter-spacing:.13em}
 body.mobile-game-active .boss-alert p{font-size:9px}
}


/* v2.8.1 — separação dos comandos de sala em telas pequenas e atmosfera abissal. */
.boss-alert{border-radius:10px;overflow:hidden}
.boss-alert:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,64,93,.035) 6px 7px);pointer-events:none}
.room-badge{white-space:normal;line-height:1.35;text-align:center;cursor:pointer}
.room-row{gap:10px}
.room-row>div{flex:1}
@media(max-width:700px){
 body.mobile-game-active #roomBadge{top:calc(max(8px,env(safe-area-inset-top)) + 100px)!important;right:10px!important;max-width:54%!important;z-index:32!important;padding:7px 8px!important;font-size:7px!important}
 body.mobile-game-active #endDiveBtn{top:auto!important;bottom:calc(max(15px,env(safe-area-inset-bottom)) + 88px)!important;right:10px!important;left:auto!important;transform:none!important;z-index:33!important;padding:7px 9px!important;font-size:7px!important;max-width:42%!important;white-space:nowrap!important}
 body.mobile-game-active .boss-alert{top:23%;width:calc(100% - 20px);padding:13px 10px}
 body.mobile-game-active .boss-alert strong{font-size:clamp(16px,5vw,24px)}
 body.mobile-game-active .hud{left:10px;right:10px}
}


/* v2.9.0 — HUD de bosses, escala de mundo unificada e ranking por entidades eliminadas. */
.hud-top{gap:clamp(8px,2vw,28px)}
.hud-stat{min-width:0;flex:1}
.ranking-row .rank-time{white-space:nowrap;font-size:10px}
@media(max-width:700px){
 body.mobile-game-active .hud-top{gap:6px}
 body.mobile-game-active .hud-stat{flex:1 1 0;min-width:0}
 body.mobile-game-active .hud-stat small{font-size:6px;letter-spacing:.04em;white-space:nowrap}
 body.mobile-game-active .hud-stat strong{font-size:15px}
}


/* v3.0 lobby clarity: all live rooms are visible; private rooms expose no credentials. */
.room-row{min-width:0;align-items:center;gap:12px}
.room-row>div{min-width:0;flex:1}
.room-row b{overflow-wrap:anywhere}
.room-row small{display:block;line-height:1.45}
.room-join-btn:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.4)}
.room-row-private{border-color:rgba(183,153,255,.35)}


/* v3.1.1 — botão cooperativo destacado, com leitura clara em desktop e mobile. */
.menu-secondary-actions #onlineBtn.online-cta{
 grid-column:1 / -1; width:100%; min-height:68px; height:auto; margin:2px 0 4px;
 display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 17px;
 border:1px solid rgba(121,248,238,.88); border-radius:12px;
 background:linear-gradient(112deg,rgba(20,112,124,.98),rgba(15,48,77,.97) 58%,rgba(71,36,113,.97));
 color:#efffff; text-align:left; box-shadow:0 0 0 1px rgba(121,248,238,.12),0 0 25px rgba(79,231,226,.18),inset 0 0 20px rgba(152,255,243,.06);
 position:relative; overflow:hidden; isolation:isolate; animation:onlineCtaPulse 3.4s ease-in-out infinite;
}
.menu-secondary-actions #onlineBtn.online-cta:before{content:"";position:absolute;z-index:-1;top:-70%;bottom:-70%;left:-45%;width:24%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(224,255,252,.19),transparent);animation:onlineCtaSweep 5.6s ease-in-out infinite}
.online-cta-copy{display:grid;gap:6px;min-width:0}
.online-cta-copy strong{font:900 13px 'DM Mono',monospace;letter-spacing:.1em;color:#eaffff;text-shadow:0 0 16px rgba(116,255,244,.35)}
.online-cta-copy small{font:8px/1.45 'DM Mono',monospace;letter-spacing:.055em;color:rgba(205,250,250,.82);white-space:normal}
.online-cta-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid rgba(180,255,247,.45);border-radius:10px;background:rgba(3,19,34,.34);font-size:28px;line-height:1;color:#cafff8;text-shadow:0 0 14px #72fff0;transition:transform .2s}
.menu-secondary-actions #onlineBtn.online-cta:hover{border-color:#d1fffa;box-shadow:0 0 0 1px rgba(121,248,238,.22),0 0 34px rgba(79,231,226,.28),inset 0 0 25px rgba(152,255,243,.09);transform:translateY(-1px)}
.menu-secondary-actions #onlineBtn.online-cta:hover .online-cta-icon{transform:translateX(3px) rotate(-8deg)}
@keyframes onlineCtaPulse{0%,100%{box-shadow:0 0 0 1px rgba(121,248,238,.12),0 0 20px rgba(79,231,226,.14),inset 0 0 20px rgba(152,255,243,.04)}50%{box-shadow:0 0 0 1px rgba(121,248,238,.2),0 0 30px rgba(79,231,226,.25),inset 0 0 25px rgba(152,255,243,.08)}}
@keyframes onlineCtaSweep{0%,70%,100%{left:-45%}85%{left:125%}}
@media(max-width:700px){.menu-secondary-actions #onlineBtn.online-cta{min-height:62px;padding:11px 13px;gap:10px}.online-cta-copy strong{font-size:11px}.online-cta-copy small{font-size:7px}.online-cta-icon{width:34px;height:34px;flex-basis:34px;font-size:25px}}
@media(prefers-reduced-motion:reduce){.menu-secondary-actions #onlineBtn.online-cta,.menu-secondary-actions #onlineBtn.online-cta:before{animation:none}}

/* Perfil do mergulhador e seleção de títulos */
.profile-modal{width:min(850px,calc(100vw - 28px));max-height:min(88dvh,900px);overflow:auto;padding:clamp(20px,4vw,38px);background:linear-gradient(145deg,rgba(7,28,42,.98),rgba(4,14,25,.98));border:1px solid rgba(121,243,240,.23);box-shadow:0 24px 90px rgba(0,0,0,.48),inset 0 0 45px rgba(42,149,168,.05)}
.profile-hero{display:flex;align-items:center;gap:18px;margin:20px 0 24px;padding:18px;border:1px solid rgba(121,243,240,.17);background:linear-gradient(110deg,rgba(29,81,98,.35),rgba(10,29,43,.45));}
.profile-emblem{width:76px;height:76px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:34px;color:#a9fffb;border:1px solid rgba(121,243,240,.65);background:radial-gradient(circle,rgba(70,223,220,.23),rgba(9,38,54,.85) 70%);box-shadow:0 0 25px rgba(83,225,224,.15),inset 0 0 18px rgba(83,225,224,.12)}
.profile-identity{min-width:0}.profile-identity h2{font-size:clamp(22px,3.4vw,34px);margin:0 0 8px;overflow-wrap:anywhere}.profile-identity p{margin:0 0 6px;color:var(--cyan);font-size:13px;font-weight:700}.profile-account-note{font-size:11px;color:var(--muted)}
.profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:26px}.profile-stat{padding:14px 12px;border:1px solid var(--line);background:rgba(10,34,48,.7);min-width:0}.profile-stat small{display:block;font:9px 'DM Mono',monospace;color:#81a6b5;letter-spacing:.08em;line-height:1.5}.profile-stat strong{display:block;margin-top:8px;color:#d7ffff;font-size:clamp(20px,3vw,29px);font-variant-numeric:tabular-nums}
.profile-title-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.profile-title-heading h3{margin:0;color:#dffbff;font-size:14px;letter-spacing:.1em}.profile-title-heading p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.profile-progress{font:10px 'DM Mono',monospace;color:var(--cyan);white-space:nowrap}
.profile-title-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.profile-title-card{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:14px;border:1px solid rgba(135,183,199,.18);background:rgba(8,26,39,.8);transition:border-color .2s,background .2s}.profile-title-card.is-equipped{border-color:rgba(121,243,240,.7);background:linear-gradient(120deg,rgba(30,103,111,.24),rgba(8,26,39,.9));box-shadow:inset 0 0 18px rgba(121,243,240,.04)}.profile-title-card.is-locked{opacity:.7}.profile-title-icon{width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:12px;font-size:21px;border:1px solid var(--title-color,rgba(121,243,240,.4));color:var(--title-color,#79f3f0);background:color-mix(in srgb,var(--title-color,#79f3f0) 9%,transparent)}.profile-title-copy{min-width:0;flex:1}.profile-title-name{margin:0 0 5px;color:var(--title-color,#b9f8f6);font-size:13px;font-weight:800;overflow-wrap:anywhere}.profile-title-desc{margin:0 0 9px;color:#88a6b5;font-size:11px;line-height:1.5}.profile-title-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font:9px 'DM Mono',monospace;color:#80a4b4}.profile-title-state{display:inline-flex;align-items:center;gap:4px;color:#91f4d6}.profile-title-state.locked{color:#82909b}.profile-title-action{margin-top:10px;min-height:30px;padding:7px 10px;border:1px solid rgba(121,243,240,.32);background:rgba(121,243,240,.07);color:#b9fffc;font-size:9px;font-weight:800;letter-spacing:.08em}.profile-title-action:hover:not(:disabled){background:rgba(121,243,240,.17);border-color:var(--cyan)}.profile-title-action:disabled{opacity:.45;cursor:default}.profile-title-card.is-equipped .profile-title-action{border-color:rgba(121,243,240,.16);color:#79f3f0}.profile-modal #profileMessage{min-height:18px;margin:8px 0}.profile-modal>#profileCloseBtn{width:100%;justify-content:center}
@media(max-width:680px){.profile-modal{padding:18px 14px}.profile-hero{padding:13px;gap:12px}.profile-emblem{width:58px;height:58px;font-size:26px}.profile-stats{gap:6px}.profile-stat{padding:10px 8px}.profile-stat small{font-size:8px;letter-spacing:0}.profile-title-grid{grid-template-columns:1fr}.profile-title-card{padding:12px}.profile-title-heading{align-items:flex-start;flex-direction:column;gap:6px}.profile-title-progress{white-space:normal}}



.profile-title-icon svg{display:block;width:100%;height:100%;padding:6px;overflow:visible}.profile-emblem svg{display:block;width:100%;height:100%;padding:12px;overflow:visible}

.profile-title-progressbar{height:3px;width:100%;margin:9px 0 1px;overflow:hidden;background:rgba(135,183,199,.12)}.profile-title-progressbar span{display:block;height:100%;background:var(--title-color,#79f3f0);box-shadow:0 0 8px var(--title-color,#79f3f0);transition:width .25s ease}


/* ABYSSAL — revisão visual das profundezas: menu, navegação e painéis */
#app{isolation:isolate}
.topbar{border-bottom-color:rgba(105,226,235,.18);background:linear-gradient(90deg,rgba(3,17,28,.68),rgba(8,27,43,.28),rgba(3,17,28,.68));}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(121,243,240,.34);border-radius:12px;background:radial-gradient(circle at 35% 25%,rgba(135,255,247,.22),rgba(17,62,83,.22) 62%,rgba(3,14,24,.8));box-shadow:0 0 24px rgba(68,211,224,.12),inset 0 0 16px rgba(121,243,240,.07)}
.brand strong{text-shadow:0 0 18px rgba(121,243,240,.2)}
#menuScreen{background:radial-gradient(ellipse at 74% 42%,rgba(19,94,123,.28),transparent 36%),radial-gradient(ellipse at 81% 70%,rgba(88,53,145,.18),transparent 32%),linear-gradient(110deg,rgba(2,12,22,.97) 0%,rgba(4,19,31,.91) 45%,rgba(3,13,25,.58) 100%);}
#menuScreen:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.23;background-image:linear-gradient(rgba(114,220,232,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(114,220,232,.08) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,#000,transparent 85%);}
#menuScreen:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 100%,rgba(35,129,157,.14),transparent 52%),linear-gradient(180deg,transparent 75%,rgba(1,8,15,.45));}
#menuScreen .menu-content{width:min(520px,57%);padding:clamp(28px,5.2vh,64px) 24px 30px clamp(26px,6vw,88px);background:linear-gradient(90deg,rgba(4,18,30,.7),rgba(4,18,30,.38) 78%,transparent);border-right:1px solid rgba(116,226,235,.08);}
#menuScreen .eyebrow{color:#a1d7df;text-shadow:0 0 14px rgba(121,243,240,.16);}
#menuScreen h1{font-size:clamp(42px,5.5vw,76px);line-height:.91;letter-spacing:-.075em;text-shadow:0 8px 36px rgba(0,0,0,.35);}
#menuScreen h1 em{color:#8efff5;text-shadow:0 0 28px rgba(79,232,226,.28),0 0 70px rgba(74,177,220,.13);}
#menuScreen .intro{max-width:390px;color:#b0cbd5;line-height:1.85;text-shadow:0 2px 12px #020b13;}
#menuScreen .primary-btn{border-radius:8px;background:linear-gradient(105deg,#9dfff4,#55d9df 65%,#80a8ff);box-shadow:0 8px 28px rgba(62,218,222,.16),inset 0 1px rgba(255,255,255,.65);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);}
#menuScreen .menu-secondary-actions{gap:9px;margin-top:13px;}
#menuScreen .menu-action{min-height:43px;height:auto;border-radius:7px;border:1px solid rgba(117,199,218,.2);background:linear-gradient(135deg,rgba(15,45,64,.86),rgba(6,22,37,.9));color:#d2eaf1;box-shadow:inset 0 1px rgba(218,250,255,.025);transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;}
#menuScreen .menu-action:hover{transform:translateY(-2px);border-color:rgba(121,243,240,.55);background:linear-gradient(135deg,rgba(23,76,95,.92),rgba(12,33,57,.96));box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 20px rgba(82,214,219,.08);color:#efffff;}
#menuScreen #onlineBtn.online-cta{border-color:rgba(121,243,240,.72);border-radius:9px;background:linear-gradient(115deg,rgba(15,101,117,.97),rgba(15,47,76,.97) 65%,rgba(53,37,101,.97));}
#menuScreen #shopBtn,#menuScreen #catalogBtn,#menuScreen #rankingsBtn,#menuScreen #profileBtn{justify-content:space-between;padding-inline:12px;}
#menuScreen .wheel-cta{border-radius:9px;box-shadow:0 8px 30px rgba(202,126,65,.12),inset 0 1px rgba(255,255,255,.08);}
#menuScreen .account-line{color:#8aaab9;padding-top:10px;border-top:1px solid rgba(114,211,222,.12);max-width:390px;}
#menuScreen .account-line button{color:#a2fff5;text-decoration:none;border:1px solid rgba(121,243,240,.24);border-radius:5px;padding:7px 9px;background:rgba(9,36,49,.72);}
#menuScreen .account-line button:hover{border-color:rgba(121,243,240,.65);background:rgba(25,81,94,.5);}
#menuScreen .controls-hint span{border-radius:4px;background:rgba(7,27,42,.55);border-color:rgba(114,198,214,.2);}
#menuScreen .record-row{padding-top:12px;border-top:1px solid rgba(114,211,222,.1);max-width:390px;color:#83a3b2;}
#menuScreen .menu-creature{filter:saturate(1.12) contrast(1.05);opacity:.92;}
#menuScreen .orbit-one{border-color:rgba(110,249,238,.28);box-shadow:0 0 30px rgba(55,190,219,.04);}
#menuScreen .orbit-two{border-color:rgba(167,136,255,.27);}
.menu-footer{color:#638695;text-shadow:0 2px 10px #020a12;}
.page-footer{border-top:1px solid rgba(110,201,216,.07);background:linear-gradient(90deg,rgba(3,13,22,.8),rgba(6,20,32,.3),rgba(3,13,22,.8));}
.modal-screen{background:radial-gradient(ellipse at 50% 35%,rgba(12,49,70,.48),rgba(2,8,16,.88) 70%);backdrop-filter:blur(12px) saturate(1.1);}
.modal-card{border-radius:12px;border-color:rgba(121,243,240,.25);background:radial-gradient(ellipse at 100% 0%,rgba(38,97,128,.16),transparent 42%),linear-gradient(145deg,rgba(7,29,44,.98),rgba(3,12,23,.99));box-shadow:0 28px 110px rgba(0,0,0,.58),inset 0 1px rgba(204,255,255,.04);}
.modal-card .secondary-btn{border-radius:7px;background:linear-gradient(120deg,rgba(10,33,48,.48),rgba(5,18,31,.58));}
.text-field{border-radius:6px;background:linear-gradient(120deg,rgba(2,13,23,.8),rgba(5,23,35,.8));}
.profile-modal .profile-hero,.profile-stat,.profile-title-card{border-radius:8px;}
.profile-title-card{box-shadow:inset 0 1px rgba(255,255,255,.015);}
.profile-title-card.is-equipped{box-shadow:inset 0 0 22px rgba(121,243,240,.06),0 0 18px rgba(121,243,240,.04);}
@media(max-width:700px){
 #menuScreen .menu-content{width:100%;padding:30px 20px 24px;background:linear-gradient(90deg,rgba(3,14,24,.88),rgba(3,14,24,.58));border-right:0;}
 #menuScreen h1{font-size:clamp(40px,12vw,60px);}
 #menuScreen .intro{max-width:min(320px,92%);}
 #menuScreen .menu-footer{left:20px;right:20px;}
}
@media(max-height:720px) and (min-width:701px){
 #menuScreen .menu-content{padding-top:22px;}
 #menuScreen h1{font-size:clamp(38px,5vh,54px);margin:15px 0 12px;}
 #menuScreen .intro{margin-bottom:16px;line-height:1.55;}
 #menuScreen .wheel-cta{margin-top:8px;min-height:50px;}
 #menuScreen .menu-action{min-height:36px;}
 #menuScreen .record-row{margin-top:18px;}
}
@media(prefers-reduced-motion:reduce){
 #menuScreen .menu-action,#menuScreen .primary-btn{transition:none;}
}


/* ABYSSAL 3.5.5 — tela cheia, exclusão segura de conta e painel de plataformas */
.fullscreen-btn{font-size:22px;line-height:1}
#downloadBtn.download-cta{width:min(300px,100%);margin-top:9px;justify-content:center;gap:12px;border-color:rgba(121,243,240,.35);background:linear-gradient(110deg,rgba(14,66,83,.92),rgba(25,39,71,.92));}
#downloadBtn.download-cta span{font-size:18px;color:#9dfff4}
.account-delete-panel{margin:22px 0 16px;padding:18px;border:1px solid rgba(255,70,94,.55);background:linear-gradient(145deg,rgba(76,12,27,.28),rgba(24,8,19,.56));box-shadow:inset 0 0 26px rgba(255,45,77,.045)}
.account-delete-heading{display:flex;align-items:flex-start;gap:12px;color:#ff647d}
.account-delete-heading>span{font-size:25px;line-height:1}
.account-delete-heading h3{margin:0 0 7px;font-size:14px;letter-spacing:.12em;color:#ff647d}
.account-delete-heading p{margin:0;color:#d6a4ad;font-size:11px;line-height:1.65}
.delete-nickname-field{border-color:rgba(255,75,97,.42)}
.delete-nickname-field:focus{outline:1px solid rgba(255,75,97,.75);border-color:#ff647d}
.danger-delete-btn{width:100%;min-height:46px;margin-top:12px;padding:12px;border:1px solid #ff405f;background:linear-gradient(110deg,#a80f31,#e52b4c);color:#fff;font:800 10px 'DM Mono',monospace;letter-spacing:.07em;box-shadow:0 0 24px rgba(255,30,65,.16);transition:filter .15s,transform .15s}
.danger-delete-btn:hover:not(:disabled){filter:brightness(1.14);transform:translateY(-1px)}
.danger-delete-btn:disabled{opacity:.35;cursor:not-allowed;filter:saturate(.6)}
.delete-account-warning{margin:10px 0 0;color:#ff7187;font:9px 'DM Mono',monospace;letter-spacing:.08em;text-align:center}
.download-modal{width:min(640px,calc(100vw - 28px));max-height:min(88dvh,850px);overflow:auto}
.download-modal h2{margin-bottom:12px}
.download-options{display:flex;flex-direction:column;gap:9px;margin:20px 0}
.download-option{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px;border:1px solid rgba(121,243,240,.15);background:linear-gradient(110deg,rgba(11,38,54,.82),rgba(4,17,30,.82))}
.download-platform-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(121,243,240,.3);color:#9dfff4;font-size:19px}
.download-option strong{display:block;color:#e1f7fb;font:800 10px 'DM Mono',monospace;letter-spacing:.06em}
.download-option small{display:block;margin-top:5px;color:#7898a8;font-size:10px;line-height:1.5}
.download-status{color:#d8a96b;font:8px 'DM Mono',monospace;letter-spacing:.06em;text-align:right}
.download-modal #playBrowserBtn,.download-modal #downloadCloseBtn{width:100%;margin-top:8px}
@media(max-width:520px){
 .skin-grid{grid-template-columns:minmax(0,1fr)}
 .skin-card{padding:12px}
 .skin-card .skin-ability{font-size:12px}
 .account-delete-panel{padding:13px}
 .download-option{grid-template-columns:30px minmax(0,1fr);gap:9px;padding:11px}
 .download-status{grid-column:2;text-align:left}
 .download-option small{font-size:9px}
}


/* ABYSSAL 3.5.6 — recuperação de sessão, instalação PWA e opções de plataforma */
.download-option-button{width:100%;text-align:left;color:inherit;cursor:pointer;font:inherit;transition:border-color .15s,background .15s,transform .15s}
.download-option-button:hover,.download-option-button:focus-visible{border-color:rgba(121,243,240,.6);background:linear-gradient(110deg,rgba(15,59,75,.95),rgba(9,25,43,.95));outline:none}
.download-option-button:active{transform:translateY(1px)}
.download-option-copy{display:block;min-width:0}
.download-option-copy strong{display:block}
.download-option-copy small{display:block}
.download-install-message{min-height:44px;padding:12px;border-left:2px solid rgba(121,243,240,.5);background:rgba(8,27,42,.6);color:#9bc7d2;font-size:11px;line-height:1.65;text-align:left}
@media(max-width:520px){.download-install-message{font-size:10px}}


/* v3.5.9 — prevent menu labels from being squeezed and preserve readable navigation. */
#menuScreen{overflow:auto;overscroll-behavior:contain}
#menuScreen .menu-content{
  width:min(560px,64%);
  padding:clamp(22px,4vh,44px) 24px 86px clamp(20px,4vw,64px);
}
#menuScreen .menu-secondary-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:8px;
  width:min(390px,100%);
}
#menuScreen .menu-action{
  min-width:0;
  width:100%;
  min-height:42px;
  height:auto;
  padding:8px 10px;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  line-height:1.35;
  letter-spacing:.025em;
}
#menuScreen .menu-secondary-actions #onlineBtn.online-cta{text-align:left}
#menuScreen .online-cta-copy{min-width:0}
#menuScreen .online-cta-copy strong{line-height:1.4;overflow-wrap:anywhere}
#menuScreen .online-cta-copy small{line-height:1.5;overflow-wrap:anywhere}
#menuScreen .account-line,
#menuScreen .record-row{max-width:min(390px,100%);line-height:1.6}
#menuScreen .controls-hint{max-width:min(390px,100%)}
#menuScreen .menu-footer{z-index:2;pointer-events:none}
@media(max-width:700px){
  #menuScreen .menu-content{
    width:100%;
    padding:24px 18px 34px;
    background:linear-gradient(90deg,rgba(3,14,24,.92),rgba(3,14,24,.68));
  }
  #menuScreen .menu-secondary-actions{width:100%;max-width:390px}
  #menuScreen .menu-action{font-size:clamp(8px,2.2vw,10px);padding:8px 7px}
  #menuScreen .menu-footer{left:18px;right:18px}
}
@media(max-height:720px) and (min-width:701px){
  #menuScreen .menu-content{padding-top:18px;padding-bottom:72px}
  #menuScreen h1{font-size:clamp(36px,4.7vw,56px);margin:13px 0 10px}
  #menuScreen .intro{line-height:1.55;margin-bottom:14px}
  #menuScreen .wheel-cta{margin-top:8px}
  #menuScreen .menu-secondary-actions{gap:6px;margin-top:8px}
  #menuScreen .menu-action{min-height:36px;padding:6px 8px}
}


/* ABYSSAL 3.5.9 — visual identity of an oppressive deep-ocean trench. */
:root{--bg:#020710;--panel:rgba(3,13,25,.97);--cyan:#8efff2;--blue:#32b8d0;--violet:#b59aff;--text:#f0ffff;--muted:#bdd0dc;--line:rgba(126,231,235,.25);--danger:#ff5478}
body{background:radial-gradient(ellipse at 52% 35%,#092233 0%,#04111e 43%,#01050b 100%);color:var(--text)}
#gameShell{background:radial-gradient(ellipse at 50% 48%,#0a2135 0%,#03101e 57%,#01050b 100%);border-color:rgba(109,224,228,.16)}
.topbar{border-bottom-color:rgba(130,235,239,.26);background:linear-gradient(90deg,rgba(2,9,18,.96),rgba(5,22,36,.88),rgba(2,8,16,.96))}
.brand strong{font-size:15px;letter-spacing:.22em;color:#efffff}
.brand small{font-size:10px;color:#b1cdd8}
.icon-btn{background:linear-gradient(150deg,rgba(9,43,57,.98),rgba(3,12,24,.98));border-color:rgba(135,246,235,.35);color:#e3fffc}
.icon-btn:hover,.icon-btn:focus-visible{border-color:#a6fff7;background:#104454;color:white;box-shadow:0 0 22px rgba(88,246,233,.2);outline:2px solid rgba(142,255,242,.45);outline-offset:2px}
#menuScreen{
 overflow:auto;overscroll-behavior:contain;
 background:
  radial-gradient(ellipse at 76% 44%,rgba(7,94,116,.32),transparent 24%),
  radial-gradient(ellipse at 88% 79%,rgba(91,23,72,.28),transparent 32%),
  radial-gradient(ellipse at 57% 8%,rgba(30,75,126,.23),transparent 35%),
  linear-gradient(112deg,rgba(1,7,15,.99) 0%,rgba(3,16,29,.97) 43%,rgba(2,8,17,.85) 100%);
}
#menuScreen:before{
 pointer-events:none;z-index:0;opacity:.44;
 background-image:
  radial-gradient(circle at 75% 22%,rgba(141,255,246,.14) 0 1px,transparent 2px),
  radial-gradient(circle at 83% 67%,rgba(255,93,139,.12) 0 1px,transparent 2px),
  linear-gradient(rgba(105,219,229,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(105,219,229,.045) 1px,transparent 1px);
 background-size:73px 91px,121px 113px,48px 48px,48px 48px;
 mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.8) 56%,transparent 100%);
}
#menuScreen:after{
 pointer-events:none;z-index:0;
 background:
  radial-gradient(ellipse at 80% 55%,transparent 0 19%,rgba(0,3,10,.24) 53%,rgba(0,3,10,.75) 100%),
  linear-gradient(180deg,rgba(0,4,12,.12),transparent 38%,rgba(0,3,10,.65));
}
#menuScreen .menu-content{
 position:relative;z-index:4;width:min(650px,63%);
 padding:clamp(24px,4vh,48px) 22px 100px clamp(24px,4vw,66px);
 background:linear-gradient(90deg,rgba(2,12,23,.94),rgba(3,16,28,.84) 70%,rgba(2,10,20,.23));
 border-right:1px solid rgba(118,235,235,.15);
 box-shadow:inset -20px 0 46px rgba(4,15,25,.22);
}
#menuScreen .menu-creature{pointer-events:none;z-index:1;width:min(54vw,700px);height:min(54vw,700px);right:1.5%;top:50%;opacity:.78;filter:saturate(1.2) contrast(1.18)}
#menuScreen .glow{background:radial-gradient(circle,rgba(20,183,192,.22),rgba(96,34,105,.18) 30%,rgba(17,32,93,.12) 48%,transparent 72%);filter:blur(26px)}
#menuScreen .orbit{border-color:rgba(118,246,236,.27);box-shadow:0 0 26px rgba(47,224,228,.06)}
#menuScreen .orbit-two{border-color:rgba(198,88,151,.34)}
#menuScreen .creature-core{
 background:radial-gradient(circle at 33% 26%,#9afff6 0%,#45cbd2 8%,#125a75 24%,#07192d 49%,#010611 77%);
 border:1px solid rgba(153,255,245,.8);
 box-shadow:inset -19px -20px 34px #010610,inset 8px 8px 18px rgba(148,255,241,.19),0 0 26px #2bd3d4,0 0 88px rgba(28,183,206,.38),0 0 135px rgba(125,27,95,.18);
}
#menuScreen .creature-core:before,#menuScreen .creature-core:after{top:39%;height:9%;width:17%;background:#ff4d71;border-radius:10% 80% 10% 80%;box-shadow:0 0 7px #ff335e,0 0 22px rgba(255,41,94,.95)}
#menuScreen .creature-core:before{left:23%;transform:rotate(12deg)}
#menuScreen .creature-core:after{right:23%;transform:rotate(-12deg)}
#menuScreen .creature-core span{border-bottom:3px solid #ff7b91;box-shadow:0 4px 12px rgba(255,41,94,.35);height:14%;top:63%}
#menuScreen .creature-tentacle{border-left-color:rgba(74,242,231,.8);border-left-width:4px;filter:drop-shadow(0 0 8px #1bced2) drop-shadow(0 0 14px rgba(122,33,95,.45))}
#menuScreen .eyebrow{font-size:11px;line-height:1.5;color:#c2e5ef;letter-spacing:.13em}
#menuScreen h1{font-size:clamp(48px,5.6vw,78px);line-height:.98;letter-spacing:-.055em;margin:22px 0 20px;color:#f3ffff;text-shadow:0 3px 18px #000,0 0 35px rgba(77,193,213,.16)}
#menuScreen h1 em{color:#9efff5;text-shadow:0 0 22px rgba(87,255,237,.35),0 0 48px rgba(51,199,219,.18)}
#menuScreen .intro{max-width:455px;font-size:clamp(15px,1.05vw,17px);line-height:1.72;color:#e0edf4;text-shadow:0 2px 12px #000;margin:0 0 22px;padding-left:14px;border-left:2px solid rgba(120,255,242,.55)}
#menuScreen .primary-btn{width:min(430px,100%);min-height:58px;height:auto;padding:14px 18px;font-size:14px;line-height:1.45;letter-spacing:.075em;border-radius:7px;background:linear-gradient(105deg,#a8fff6,#68e4e4 55%,#90b8ff);box-shadow:0 0 24px rgba(79,238,231,.18),inset 0 1px rgba(255,255,255,.65)}
#menuScreen .wheel-cta{width:min(430px,100%);min-height:64px;margin:13px 0 0;padding:12px 15px;border-color:rgba(255,180,115,.82);background:linear-gradient(112deg,rgba(66,24,51,.98),rgba(8,47,63,.98) 57%,rgba(21,26,61,.98));box-shadow:0 0 25px rgba(236,67,111,.12),inset 0 0 22px rgba(255,220,196,.04)}
#menuScreen .wheel-cta-copy strong{font-size:13px;color:#fff4ee;letter-spacing:.08em}
#menuScreen .wheel-cta-copy small{font-size:10px;line-height:1.45;color:#f1d7ec;letter-spacing:.03em}
#menuScreen .wheel-cta-icon{box-shadow:0 0 17px rgba(255,112,136,.35)}
#menuScreen .menu-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px;width:min(430px,100%);margin-top:14px}
#menuScreen .menu-action{
 position:relative;z-index:5;min-width:0;width:100%;height:auto;min-height:49px;margin:0;padding:10px 12px;
 display:flex;align-items:center;justify-content:center;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.4;
 font-size:clamp(12px,.9vw,14px);font-weight:750;letter-spacing:.025em;color:#e8fbff;
 border:1px solid rgba(132,220,231,.34);border-radius:7px;
 background:linear-gradient(145deg,rgba(11,43,59,.97),rgba(3,15,28,.98));
 box-shadow:inset 0 1px rgba(220,255,255,.035),0 6px 17px rgba(0,0,0,.18);
}
#menuScreen .menu-action:hover,#menuScreen .menu-action:focus-visible{color:#fff;border-color:#a8fff5;background:linear-gradient(135deg,rgba(16,78,91,.99),rgba(15,25,52,.99));box-shadow:0 0 20px rgba(65,217,219,.17);outline:2px solid rgba(125,255,242,.28);outline-offset:2px}
#menuScreen .menu-secondary-actions #onlineBtn.online-cta{min-height:75px;grid-column:1/-1;display:flex;justify-content:space-between;gap:15px;padding:14px 17px;border:1px solid rgba(139,255,245,.88);background:linear-gradient(112deg,rgba(11,99,111,.98),rgba(8,41,66,.98) 58%,rgba(54,24,65,.98))}
#menuScreen .online-cta-copy{display:grid;gap:7px;min-width:0}
#menuScreen .online-cta-copy strong{font-size:15px;line-height:1.35;color:#f3ffff;letter-spacing:.07em;overflow-wrap:anywhere}
#menuScreen .online-cta-copy small{font-size:11px;line-height:1.5;color:#dbffff;white-space:normal;overflow-wrap:anywhere}
#menuScreen .online-cta-icon{flex:0 0 42px;width:42px;height:42px;font-size:27px;color:#ddfffb}
#menuScreen .account-line{max-width:min(430px,100%);font-size:12px;line-height:1.65;color:#b6d1de;letter-spacing:.015em;gap:10px}
#menuScreen .account-line button{font:700 12px/1.3 system-ui,sans-serif;padding:8px 11px;color:#dffffa;border-color:rgba(130,249,238,.45)}
#menuScreen .controls-hint{max-width:min(430px,100%);font:11px/1.65 'DM Mono',monospace;color:#b2ccd7;letter-spacing:.035em;gap:8px}
#menuScreen .controls-hint span{padding:7px 10px;border-color:rgba(140,226,231,.27);background:rgba(3,14,25,.78);color:#f0ffff}
#menuScreen .record-row{max-width:min(430px,100%);font:11px/1.6 'DM Mono',monospace;color:#aac3d1;letter-spacing:.035em;margin-top:22px}
#menuScreen .record-row strong{color:#f0ffff;font-weight:700}
#menuScreen .menu-footer{z-index:4;color:#9eb9c7;font-size:9px;letter-spacing:.08em;text-shadow:0 2px 8px #000}
#menuScreen .menu-creature,#menuScreen:before,#menuScreen:after{pointer-events:none}
.menu-action,.primary-btn,.secondary-btn,.icon-btn,.upgrade-card,.download-option-link{touch-action:manipulation}
.modal-screen{background:rgba(0,4,12,.84);backdrop-filter:blur(11px)}
.modal-card{border-color:rgba(115,243,235,.38);border-radius:12px;background:linear-gradient(148deg,rgba(4,27,41,.99),rgba(4,10,22,.99) 74%);box-shadow:0 28px 110px rgba(0,0,0,.78),inset 0 1px rgba(223,255,255,.045)}
.modal-card h2{color:#f3ffff}
.modal-card>p{font-size:15px;line-height:1.75;color:#d2e3eb}
.field-label{font-size:11px;color:#c0dae3}
.text-field{font-size:14px;color:#efffff;background:rgba(0,8,18,.94);border-color:rgba(123,234,236,.4)}
.form-message{font-size:12px;line-height:1.6}
.secondary-btn{font-size:12px;font-weight:750;color:#d0e6ed;border-radius:6px;border-color:rgba(128,218,231,.32)}
.upgrade-card{background:linear-gradient(145deg,rgba(7,34,49,.97),rgba(3,13,25,.98));border-color:rgba(124,230,232,.32);border-radius:9px;padding:17px 14px}
.upgrade-card strong{font-size:13px;line-height:1.45;color:#f1ffff}
.upgrade-card p{font-size:12px;line-height:1.6;color:#c2d6e0}
.upgrade-icon{color:#a2fff6;text-shadow:0 0 15px rgba(116,255,242,.32)}
.hud-stat small,.bar-label{font-size:11px;color:#bfd5df}
.hud-stat strong{font-size:24px;color:#f0ffff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.mobile-tip{font-size:11px;color:#e1f0f5;text-shadow:0 2px 7px #000}
.toast{font-size:12px;line-height:1.5;white-space:normal;max-width:min(90vw,620px);text-align:center;background:rgba(2,17,30,.98);border-color:rgba(128,246,237,.58);box-shadow:0 12px 36px rgba(0,0,0,.55);z-index:50}
.page-footer{color:#9bb4c3;font-size:10px}
.download-option-link{display:flex;align-items:center;gap:14px;width:100%;min-width:0;padding:15px 16px;margin:0 0 9px;border:1px solid rgba(121,243,240,.32);border-radius:7px;background:linear-gradient(145deg,rgba(8,38,53,.98),rgba(3,14,27,.98));color:#efffff;text-decoration:none;line-height:1.5;cursor:pointer}
.download-option-link .download-option-copy{flex:1;min-width:0}
.download-option-link .download-option-copy strong{font-size:13px;line-height:1.5}
.download-option-link .download-option-copy small{font-size:12px;line-height:1.6;color:#c0d6e0;white-space:normal}
.download-option-link .download-status{font-size:11px;color:#b4fff5;font-weight:800;white-space:nowrap}
.download-option-link:hover,.download-option-link:focus-visible{border-color:#9cfff5;background:linear-gradient(130deg,rgba(13,70,83,.98),rgba(10,23,42,.99));outline:2px solid rgba(132,255,244,.3);outline-offset:2px}
#downloadScreen .download-install-message{font-size:13px;line-height:1.65;color:#d7e8ef;border-left-color:#8efff2}
@media(max-width:900px) and (min-width:701px){
 #menuScreen .menu-content{width:61%;padding-left:24px;padding-right:16px}
 #menuScreen h1{font-size:clamp(42px,5vw,62px)}
 #menuScreen .menu-action{font-size:12px;padding:9px 7px}
}
@media(max-width:700px){
 #menuScreen .menu-content{width:100%;padding:24px 18px 30px;background:linear-gradient(90deg,rgba(1,9,18,.97),rgba(2,14,25,.9) 68%,rgba(1,7,16,.62));border-right:0}
 #menuScreen .menu-creature{width:94vw;height:94vw;right:-32%;top:36%;opacity:.28}
 #menuScreen .menu-secondary-actions{width:100%;max-width:520px;gap:9px}
 #menuScreen .menu-action{font-size:12px;min-height:48px;padding:10px 8px}
 #menuScreen .menu-secondary-actions #onlineBtn.online-cta{min-height:72px;padding:12px;gap:10px}
 #menuScreen .online-cta-copy strong{font-size:13px}
 #menuScreen .online-cta-copy small{font-size:10px}
 #menuScreen .account-line{font-size:11px}
 #menuScreen .controls-hint{font-size:10px}
 #menuScreen .record-row{font-size:10px;margin-top:18px}
 #menuScreen .menu-footer{position:relative;left:auto;right:auto;bottom:auto;margin:12px 18px 12px;font-size:9px;line-height:1.6}
 #menuScreen h1{font-size:clamp(42px,10vw,60px)}
 #menuScreen .intro{font-size:15px;max-width:min(460px,100%)}
 .download-option-link{gap:9px;padding:12px 10px}
 .download-option-link .download-option-copy strong{font-size:11px}
 .download-option-link .download-option-copy small{font-size:11px}
 .download-option-link .download-status{font-size:9px}
}
@media(max-width:360px){
 #menuScreen .menu-secondary-actions{grid-template-columns:1fr}
 #menuScreen .menu-secondary-actions #onlineBtn.online-cta{grid-column:auto}
 #menuScreen h1{font-size:40px}
}
@media(max-height:720px) and (min-width:701px){
 #menuScreen .menu-content{padding-top:18px;padding-bottom:92px}
 #menuScreen h1{font-size:clamp(42px,4.7vw,61px);margin:14px 0 12px}
 #menuScreen .intro{line-height:1.55;margin-bottom:15px}
 #menuScreen .wheel-cta{margin-top:8px;min-height:56px}
 #menuScreen .menu-secondary-actions{gap:8px;margin-top:9px}
 #menuScreen .menu-action{min-height:44px;padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){
 #menuScreen .creature-core,#menuScreen .creature-tentacle,#menuScreen .orbit,#menuScreen .glow,
 #menuScreen .wheel-cta,#menuScreen .menu-secondary-actions #onlineBtn.online-cta,
 #menuScreen .menu-secondary-actions #onlineBtn.online-cta:before{animation:none!important}
}


/* ABYSSAL 3.5.10 — viewport-first layout, compact level-up panel and darker trench art. */
html,body{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
#app{height:100vh;height:100dvh;min-height:0;overflow:hidden;padding-inline:clamp(6px,1.5vw,24px)}
.topbar{height:clamp(48px,7.4vh,68px);min-width:0;gap:8px;flex:none}
.top-actions{align-items:center;gap:clamp(4px,.7vw,8px);min-width:0}
.icon-btn{flex:0 0 auto}
#gameShell{min-width:0;min-height:0;overflow:hidden}
.page-footer{height:clamp(23px,4vh,34px);min-height:0;flex:none;overflow:hidden;white-space:nowrap}
.screen{inset:0;min-width:0;min-height:0;overflow:hidden;overscroll-behavior:none}
*{scrollbar-width:none!important}
*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.modal-screen{padding:clamp(6px,1.5vw,18px);overflow:hidden}
.modal-screen .modal-card{max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none}
#menuScreen{
 display:grid;grid-template-columns:minmax(0,1.08fr) minmax(250px,.72fr);
 align-items:center;gap:clamp(12px,2vw,32px);padding:clamp(10px,1.6vw,24px);overflow:hidden;
 background:
  radial-gradient(ellipse at 82% 40%,rgba(5,47,67,.44),transparent 25%),
  radial-gradient(ellipse at 88% 80%,rgba(102,12,43,.18),transparent 28%),
  radial-gradient(ellipse at 28% 110%,rgba(8,45,60,.22),transparent 35%),
  linear-gradient(125deg,#01050c 0%,#03101c 48%,#02050b 100%);
}
#menuScreen:before{opacity:.34;background-image:radial-gradient(circle at 72% 17%,rgba(108,210,219,.2) 0 1px,transparent 2px),radial-gradient(circle at 88% 73%,rgba(199,40,69,.14) 0 1px,transparent 2px),radial-gradient(circle at 62% 62%,rgba(130,209,216,.13) 0 1px,transparent 2px);background-size:63px 77px,117px 103px,89px 111px;mask-image:linear-gradient(90deg,transparent,#000 24%,#000)}
#menuScreen:after{background:radial-gradient(ellipse at 77% 45%,transparent 0 10%,rgba(0,2,8,.38) 37%,rgba(0,2,8,.8) 100%),linear-gradient(180deg,rgba(0,3,9,.25),transparent 32%,rgba(0,3,8,.6))}
#menuScreen .menu-content{
 width:100%;max-width:700px;min-width:0;max-height:100%;overflow:hidden;
 padding:clamp(10px,1.8vh,24px) clamp(8px,1.5vw,20px) 38px clamp(8px,1.5vw,20px);
 border-right:0;background:linear-gradient(90deg,rgba(1,8,17,.84),rgba(1,10,18,.66) 74%,transparent);
 box-shadow:none;z-index:4;
}
#menuScreen .menu-creature{width:min(55vw,760px);height:min(55vw,760px);right:1%;top:50%;opacity:.42;filter:grayscale(.4) saturate(.8) contrast(1.5)}
#menuScreen .orbit{display:none}
#menuScreen .glow{background:radial-gradient(circle,rgba(13,86,109,.2),rgba(65,9,31,.15) 30%,transparent 72%);filter:blur(34px);animation-duration:9s}
#menuScreen .creature-core{
 width:32%;height:35%;border-radius:39% 61% 53% 47%;
 background:radial-gradient(ellipse at 48% 32%,#17242c 0%,#09111a 23%,#02060d 58%,#000207 100%);
 border:1px solid rgba(108,191,199,.32);
 box-shadow:inset -22px -25px 35px #00020a,inset 8px 6px 20px rgba(107,190,197,.08),0 0 28px rgba(11,69,83,.36),0 0 100px rgba(24,9,28,.32);
 animation:float 8s ease-in-out infinite;
}
#menuScreen .creature-core:before,#menuScreen .creature-core:after{
 top:40%;width:5%;height:11%;border-radius:50% 8% 50% 8%;
 background:#a71935;box-shadow:0 0 7px #e02c45,0 0 23px rgba(220,30,62,.75);
}
#menuScreen .creature-core:before{left:24%;transform:rotate(22deg)}
#menuScreen .creature-core:after{right:24%;transform:rotate(-22deg)}
#menuScreen .creature-core span{display:none}
#menuScreen .creature-tentacle{border-left-color:rgba(30,99,115,.7);border-left-width:3px;filter:drop-shadow(0 0 7px rgba(17,88,101,.6));opacity:.78;animation-duration:5s}
#menuScreen .menu-secondary-actions{width:min(440px,100%);max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
#menuScreen .menu-secondary-actions #onlineBtn.online-cta{min-height:58px;padding:9px 12px;gap:8px;border-color:rgba(101,183,194,.58);background:linear-gradient(112deg,rgba(6,49,62,.98),rgba(3,15,28,.99) 70%,rgba(31,11,26,.99));box-shadow:inset 0 0 24px rgba(31,100,113,.08)}
#menuScreen .online-cta-copy{gap:4px}
#menuScreen .online-cta-copy strong{font-size:clamp(11px,1.1vw,14px)}
#menuScreen .online-cta-copy small{font-size:clamp(9px,.8vw,11px)}
#menuScreen .menu-action{font-size:clamp(10px,.85vw,12px);min-height:39px;padding:7px 9px}
#menuScreen .primary-btn{width:min(440px,100%);min-height:46px;height:auto;padding:11px 14px;font-size:12px}
#menuScreen .wheel-cta{width:min(440px,100%);min-height:48px;margin-top:8px;padding:8px 11px;background:linear-gradient(110deg,rgba(29,13,26,.98),rgba(3,26,38,.99) 64%,rgba(4,12,23,.99));border-color:rgba(155,66,81,.62);box-shadow:0 0 20px rgba(124,24,54,.12),inset 0 0 18px rgba(0,0,0,.48);animation:none;border-radius:6px}
#menuScreen .wheel-cta-icon{height:28px;flex-basis:28px;font-size:17px;background:radial-gradient(circle,#263542,#060c17 72%);border-color:rgba(161,83,101,.52);box-shadow:none}
#menuScreen .wheel-cta-copy strong{font-size:11px;color:#f0e8eb;letter-spacing:.07em}
#menuScreen .wheel-cta-copy small{font-size:9px;color:#adbdc9}
#menuScreen .wheel-cta-prizes,#menuScreen .wheel-cta-arrow{color:#b6cbd6}
#menuScreen .intro{max-width:420px;font-size:clamp(12px,1vw,15px);line-height:1.55;color:#b5c7d1}
#menuScreen .account-line{max-width:440px;margin-top:9px;font-size:10px;line-height:1.5}
#menuScreen .account-line button{padding:4px 6px;font-size:11px}
#menuScreen .controls-hint{font-size:9px;margin-top:10px;gap:6px}
#menuScreen .record-row{margin-top:10px;font-size:9px}
#menuScreen .menu-footer{bottom:5px;left:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px);z-index:5;font-size:8px;line-height:1.4}
.chat-toggle-btn{display:none}
#upgradeScreen{padding:clamp(6px,1.2vw,14px)}
#upgradeScreen .modal-card{
 display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,.8vh,9px);
 width:min(820px,100%);height:auto;max-height:100%;min-height:0;overflow:hidden;
 padding:clamp(9px,1.6vh,20px) clamp(10px,1.6vw,22px);
 border-color:rgba(119,192,205,.36);background:linear-gradient(145deg,rgba(2,15,26,.99),rgba(1,5,13,.99) 74%);
}
#upgradeScreen .eyebrow{font-size:clamp(8px,1.1vw,10px);line-height:1.35}
#upgradeScreen .modal-card h2{font-size:clamp(23px,3.2vw,36px);line-height:.96;margin:4px 0 2px;letter-spacing:-.035em}
#upgradeScreen .modal-card>p{font-size:clamp(10px,1.2vw,13px);line-height:1.4;margin:0;color:#aebfca}
.upgrade-timer{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:2px 0 3px;padding:8px 10px;border:1px solid rgba(127,214,222,.28);border-radius:6px;background:linear-gradient(90deg,rgba(5,28,40,.95),rgba(5,12,23,.9))}
.upgrade-timer-copy{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.upgrade-timer-copy strong{font:800 clamp(11px,1.25vw,14px)/1.35 'DM Mono',monospace;color:#b4fff6;white-space:nowrap}
.upgrade-timer-copy span{font:600 clamp(8px,.78vw,10px)/1.35 var(--abyssal-runic);color:#a9bdcb;text-align:right}
.upgrade-timer-track{height:4px;background:rgba(146,186,205,.16);overflow:hidden;border-radius:99px}
.upgrade-timer-track span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#d14b68,#80f8eb);box-shadow:0 0 10px rgba(129,255,240,.42);transition:width .1s linear}
.upgrade-timer[data-urgent="true"]{border-color:rgba(255,74,99,.65);background:linear-gradient(90deg,rgba(51,12,28,.9),rgba(6,12,23,.94))}
.upgrade-timer[data-urgent="true"] .upgrade-timer-copy strong{color:#ff8d9f}
#upgradeScreen .upgrade-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,1vw,12px);min-width:0;min-height:0}
#upgradeScreen .upgrade-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;min-width:0;min-height:0;height:100%;padding:clamp(7px,1.2vw,14px);text-align:left;overflow:hidden;border-color:rgba(103,190,203,.38);background:linear-gradient(150deg,rgba(5,31,44,.98),rgba(2,9,19,.99));transition:border-color .15s,background .15s,transform .15s}
#upgradeScreen .upgrade-card:hover,#upgradeScreen .upgrade-card:focus-visible{transform:translateY(-1px);border-color:#b4fff6;background:linear-gradient(150deg,rgba(12,59,69,.99),rgba(5,12,25,.99));outline:2px solid rgba(125,255,242,.25);outline-offset:1px}
#upgradeScreen .upgrade-icon{font-size:clamp(19px,2.2vw,27px);line-height:1.05;margin:0 0 2px}
#upgradeScreen .upgrade-card strong{font-size:clamp(10px,1.05vw,13px);line-height:1.3;overflow-wrap:anywhere}
#upgradeScreen .upgrade-card p{font-size:clamp(9px,.95vw,11px);line-height:1.4;color:#c2d4dc;margin:1px 0 3px;overflow-wrap:anywhere}
#upgradeScreen .upgrade-progress{margin-top:auto;padding-top:3px;font:700 clamp(8px,.8vw,10px)/1.35 'DM Mono',monospace;color:#96d9d7;overflow-wrap:anywhere}
#upgradeScreen .upgrade-card:focus-visible{outline-offset:0}
@media(max-width:900px) and (min-width:701px){
 #menuScreen{grid-template-columns:minmax(0,1.05fr) minmax(235px,.78fr);gap:9px;padding:10px}
 #menuScreen .menu-content{width:100%;padding:10px 8px 30px}
 #menuScreen h1{font-size:clamp(38px,4.4vw,52px);margin:9px 0}
 #menuScreen .intro{font-size:12px;line-height:1.45;margin-bottom:10px}
 #menuScreen .menu-action{font-size:10px;padding:6px}
}
@media(max-width:700px){
 #app{padding-inline:6px}
 .topbar{height:clamp(45px,7vh,54px)}
 .brand{gap:6px;min-width:0}
 .brand-mark{font-size:21px}
 .brand strong{font-size:11px;letter-spacing:.14em}
 .brand small{font-size:7px;letter-spacing:.06em}
 .online-counter{gap:4px;font-size:8px;padding:5px 6px}
 .icon-btn{width:32px;height:32px;font-size:14px}
 .chat-toggle-btn{display:inline-flex;align-items:center;justify-content:center}
 #menuScreen{display:block;padding:0}
 #menuScreen .menu-content{
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(3px,.65vh,6px);
  width:100%;height:100%;max-width:none;max-height:100%;padding:7px 11px 24px;overflow:hidden;
  border:0;background:linear-gradient(90deg,rgba(1,7,15,.94),rgba(1,9,17,.82) 72%,rgba(1,5,12,.7));
 }
 #menuScreen .eyebrow{font-size:clamp(8px,2.1vw,10px);line-height:1.3;flex:none}
 #menuScreen h1{font-size:clamp(31px,8.4vw,48px);line-height:.92;letter-spacing:-.045em;margin:5px 0 6px;flex:none}
 #menuScreen .intro{display:none}
 #menuScreen .primary-btn{width:100%;max-width:none;min-height:39px;padding:8px 11px;font-size:11px;border-radius:5px}
 #menuScreen .wheel-cta{width:100%;max-width:none;min-height:41px;margin:0;padding:6px 8px;gap:7px;border-radius:5px}
 #menuScreen .wheel-cta-icon{height:27px;flex-basis:27px;font-size:16px}
 #menuScreen .wheel-cta-copy{gap:2px}
 #menuScreen .wheel-cta-copy strong{font-size:10px}
 #menuScreen .wheel-cta-copy small{font-size:8px}
 #menuScreen .wheel-cta-prizes{font-size:8px}
 #menuScreen .menu-secondary-actions{width:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:0}
 #menuScreen .menu-action{height:auto;min-height:35px;padding:6px 5px;font-size:clamp(9px,2.5vw,11px);line-height:1.25;border-radius:5px;letter-spacing:0}
 #menuScreen .menu-secondary-actions #onlineBtn.online-cta{min-height:47px;grid-column:1/-1;padding:7px 9px;gap:8px}
 #menuScreen .online-cta-copy{gap:3px}
 #menuScreen .online-cta-copy strong{font-size:11px}
 #menuScreen .online-cta-copy small{font-size:8px;line-height:1.3}
 #menuScreen .online-cta-icon{flex-basis:30px;width:30px;height:30px;font-size:21px}
 #menuScreen .download-cta{min-height:33px!important;height:auto!important;margin:0!important}
 #menuScreen .account-line{max-width:none;margin:0;gap:6px;font-size:9px;line-height:1.3;justify-content:space-between}
 #menuScreen .account-line button{font-size:10px;padding:5px 6px}
 #menuScreen .controls-hint,#menuScreen .record-row{display:none!important}
 #menuScreen .menu-footer{left:10px;right:10px;bottom:2px;font-size:7px;line-height:1.2}
 #menuScreen .menu-creature{width:90vw;height:90vw;right:-35%;top:42%;opacity:.24}
 #upgradeScreen .modal-card{
  display:flex;flex-direction:column;position:absolute;z-index:30;inset:8px 8px 8px;width:auto;height:auto;max-width:none;max-height:none;
  padding:12px;background:linear-gradient(145deg,rgba(1,10,20,.99),rgba(1,4,12,.99));border-color:rgba(128,232,229,.55);
 }
 #upgradeScreen .modal-card{gap:5px;padding:10px}
 #upgradeScreen .modal-card h2{font-size:clamp(22px,6vw,30px);margin:3px 0 2px}
 #upgradeScreen .modal-card>p{font-size:10px;margin:0}
 .upgrade-timer{gap:5px;padding:6px 7px;margin:0}
 .upgrade-timer-copy{gap:5px;align-items:flex-start}
 .upgrade-timer-copy strong{font-size:10px}
 .upgrade-timer-copy span{font-size:8px;line-height:1.25}
 #upgradeScreen .upgrade-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #upgradeScreen .upgrade-card{gap:4px;padding:7px 6px}
 #upgradeScreen .upgrade-card strong{font-size:10px;line-height:1.25}
 #upgradeScreen .upgrade-card p{font-size:9px;line-height:1.3}
 #upgradeScreen .upgrade-progress{font-size:8px}
 .modal-screen .modal-card{padding:clamp(10px,3vw,18px)}
 .shop-modal,.codex-modal,.wheel-modal,.room-modal,.profile-modal{max-height:100%;overflow:auto}
 .download-option-link{min-width:0}
}
@media(max-width:390px){
 .online-counter{display:none}
 #menuScreen .wheel-cta-prizes{display:none}
 #menuScreen .menu-content{padding-inline:9px}
 #menuScreen .menu-action{font-size:9px}
 #upgradeScreen .modal-card{padding:8px}
 #upgradeScreen .upgrade-card{padding:6px 5px}
 #upgradeScreen .upgrade-card strong{font-size:9px}
 #upgradeScreen .upgrade-card p{font-size:8px;line-height:1.25}
 #upgradeScreen .upgrade-progress{font-size:7px}
}
@media(max-height:560px){
 .page-footer{display:none}
 #upgradeScreen .modal-card{padding:6px 8px;gap:3px}
 #upgradeScreen .modal-card h2{font-size:clamp(20px,4.6vh,27px);margin:0}
 #upgradeScreen .modal-card>p{display:none}
 .upgrade-timer{padding:4px 6px;gap:3px}
 #upgradeScreen .upgrade-card{padding:5px 6px;gap:3px}
 #upgradeScreen .upgrade-icon{font-size:19px}
 #upgradeScreen .upgrade-card p{font-size:8px;line-height:1.2}
}
@media(max-height:560px) and (max-width:900px){
 #menuScreen{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.9fr);gap:8px;padding:6px 8px}
 #menuScreen .menu-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:4px;height:100%;padding:5px 3px 17px;background:rgba(1,7,15,.6)}
 #menuScreen .eyebrow,#menuScreen h1{grid-column:1/-1}
 #menuScreen h1{font-size:clamp(25px,5vh,36px);margin:0;line-height:.9}
 #menuScreen .primary-btn,#menuScreen .wheel-cta{min-width:0;width:100%;min-height:33px;height:auto;margin:0;padding:5px 7px;font-size:9px}
 #menuScreen .wheel-cta-copy small{display:none}
 #menuScreen .menu-secondary-actions{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0}
 #menuScreen .menu-secondary-actions #onlineBtn.online-cta{min-height:36px;padding:5px 7px}
 #menuScreen .menu-action{min-height:27px;padding:4px;font-size:8px}
 #menuScreen .download-cta{grid-column:1/-1;min-height:26px!important;padding:4px 7px!important}
 #menuScreen .account-line{grid-column:1/-1;font-size:8px}
 #menuScreen .account-line button{font-size:8px;padding:2px 4px}
 #menuScreen .menu-footer{left:8px;right:8px;font-size:6px}
}
@media(max-height:560px) and (min-width:701px) and (max-width:900px){
}
@media(max-width:700px){
}
@media(prefers-reduced-motion:reduce){
 #menuScreen .creature-core,#menuScreen .creature-tentacle,#menuScreen .glow{animation:none!important}
}


/* ABYSSAL 3.5.11 — monster face, unobstructed art, separated controls and lower-cost rendering. */
#menuScreen{isolation:isolate}
#menuScreen .menu-content{gap:10px}
#menuScreen .menu-secondary-actions{gap:10px;margin-top:13px}
#menuScreen .menu-action{min-height:44px;padding:9px 12px}
#menuScreen .menu-secondary-actions #onlineBtn.online-cta{margin-bottom:2px}
#menuScreen .primary-btn{margin-bottom:2px}
#menuScreen .wheel-cta{margin-top:2px;margin-bottom:3px}
#menuScreen .download-cta{
 position:absolute;top:12px;right:14px;z-index:9;
 width:auto;min-width:0;min-height:29px;height:29px;margin:0;padding:5px 10px;
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 border:1px solid rgba(135,198,207,.3);border-radius:5px;
 background:rgba(2,9,17,.76);color:#bdccd5;
 font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1;
 box-shadow:none;opacity:.82;
}
#menuScreen .download-cta span{font-size:13px}
#menuScreen .download-cta:hover,#menuScreen .download-cta:focus-visible{opacity:1;border-color:#91e7e2;color:#efffff;background:rgba(3,20,30,.96)}
#menuScreen .menu-creature{z-index:1;width:min(57vw,760px);height:min(57vw,760px);right:0;top:45%;opacity:.72;filter:grayscale(.35) saturate(.82) contrast(1.48)}
#menuScreen .creature-core{overflow:visible}
#menuScreen .creature-core span{
 display:block;position:absolute;left:31%;top:54%;width:38%;height:30%;
 border:1px solid rgba(167,139,250,.55);border-radius:48% 48% 38% 38%;
 background:radial-gradient(ellipse at 50% 38%,#160824 0 28%,#05030d 58%,#090513 100%);
 clip-path:polygon(50% 0,75% 12%,91% 34%,82% 64%,64% 88%,50% 100%,36% 88%,18% 64%,9% 34%,25% 12%);
 box-shadow:0 0 13px rgba(139,92,246,.42);
 filter:drop-shadow(0 0 5px rgba(139,92,246,.42));
 transform:rotate(0deg);
}
#menuScreen .creature-core span:before,
#menuScreen .creature-core span:after{content:none;display:none}
 position:absolute;top:auto;right:14px;bottom:34px;left:auto;
 justify-self:auto;align-self:auto;width:min(285px,29vw);max-width:285px;
 height:132px;max-height:132px;min-width:0;margin:0;padding:9px 11px;
 display:flex;flex-direction:column;gap:4px;overflow:hidden;z-index:6;
 border-color:rgba(95,157,174,.3);border-radius:6px;
 background:linear-gradient(150deg,rgba(1,8,17,.83),rgba(1,5,13,.88));
 box-shadow:0 8px 22px rgba(0,0,0,.2);backdrop-filter:none;
}
@media(max-width:900px) and (min-width:701px){
 #menuScreen .menu-secondary-actions{gap:8px}
 #menuScreen .menu-action{min-height:39px;padding:7px 9px}
}
@media(max-width:700px){
 #menuScreen .menu-content{gap:clamp(5px,.85vh,8px)}
 #menuScreen .menu-secondary-actions{gap:7px;margin-top:3px}
 #menuScreen .menu-action{min-height:37px;padding:7px 6px}
 #menuScreen .menu-secondary-actions #onlineBtn.online-cta{min-height:48px;margin-bottom:1px}
 #menuScreen .download-cta{top:7px;right:7px;z-index:10;min-height:25px;height:25px;padding:4px 7px;font-size:9px}
 #menuScreen .menu-creature{top:40%;right:-20%;width:105vw;height:105vw;opacity:.28}
 #menuScreen .creature-core span{top:56%;height:24%}
}
@media(max-width:390px){
 #menuScreen .menu-secondary-actions{gap:6px}
 #menuScreen .menu-action{padding-inline:5px}
 #menuScreen .download-cta{top:5px;right:5px;min-height:23px;height:23px;padding:3px 6px;font-size:8px}
}
@media(max-height:560px) and (min-width:701px) and (max-width:900px){
}


/* ABYSSAL 3.5.12 — smiling squid/kraken silhouette with eight tapering arms. */
#menuScreen .menu-creature{
 width:min(67vw,900px);height:min(67vw,900px);right:-1.5%;top:47%;
 display:grid;place-items:center;opacity:.88;filter:grayscale(.22) saturate(.9) contrast(1.42);
}
#menuScreen .menu-creature .orbit{display:none}
#menuScreen .menu-creature .glow{
 width:68%;height:68%;background:radial-gradient(circle,rgba(14,91,100,.26),rgba(103,13,38,.16) 34%,transparent 72%);
 filter:blur(29px);animation-duration:7.2s;z-index:0;
}
#menuScreen .creature-core{
 position:absolute;z-index:4;overflow:visible;
 width:34%;height:34%;border-radius:47% 53% 41% 43% / 39% 44% 56% 61%;
 background:
  radial-gradient(ellipse at 37% 24%,rgba(161,218,194,.32),transparent 32%),
  radial-gradient(ellipse at 60% 72%,rgba(58,9,27,.85),transparent 48%),
  linear-gradient(145deg,#21383e 0%,#102b34 28%,#07131c 60%,#02060c 100%);
 border:1px solid rgba(123,211,201,.46);
 box-shadow:inset -24px -30px 34px rgba(0,0,0,.92),inset 10px 7px 20px rgba(177,226,208,.08),0 0 35px rgba(13,84,93,.26),0 0 105px rgba(67,8,35,.2);
 animation:kraken-mantle 6.8s ease-in-out infinite;
}
#menuScreen .creature-core:before,#menuScreen .creature-core:after{
 content:"";position:absolute;top:38%;width:5.6%;height:13%;border-radius:54% 46% 42% 58%;
 background:radial-gradient(ellipse at 35% 30%,#ffc4bf 0%,#f33e51 25%,#870a29 62%,#19050d 100%);
 box-shadow:0 0 7px #ff344f,0 0 18px rgba(236,24,65,.8),0 0 38px rgba(201,12,50,.38);
}
#menuScreen .creature-core:before{left:23%;transform:rotate(14deg)}
#menuScreen .creature-core:after{right:23%;transform:rotate(-14deg)}
#menuScreen .creature-core span{
 position:absolute;display:block;left:21%;top:54%;width:58%;height:31%;z-index:2;
 overflow:visible;border:1px solid rgba(156,34,53,.8);border-radius:18% 18% 43% 43%;
 background:linear-gradient(180deg,#030309 0%,#10030b 70%,#030208 100%);
 clip-path:polygon(0 8%,8% 0,16% 9%,25% 1%,34% 9%,44% 0,54% 8%,65% 1%,76% 8%,88% 0,100% 7%,93% 61%,78% 53%,66% 100%,53% 60%,40% 94%,28% 57%,13% 72%);
 box-shadow:0 0 14px rgba(190,15,49,.45);filter:drop-shadow(0 0 4px rgba(168,17,45,.6));
}
#menuScreen .creature-core span:before,#menuScreen .creature-core span:after{
 content:"";position:absolute;left:2%;width:96%;height:48%;
 background:repeating-linear-gradient(90deg,#c3b8a7 0 7%,#665d60 7% 8.5%,#e6d4c1 8.5% 14%);
 filter:drop-shadow(0 0 3px rgba(238,196,183,.28));
}
#menuScreen .creature-core span:before{
 top:0;clip-path:polygon(0 0,100% 0,100% 100%,92% 22%,83% 100%,72% 19%,61% 100%,51% 13%,39% 100%,28% 22%,17% 100%,7% 24%,0 100%);
}
#menuScreen .creature-core span:after{
 bottom:0;clip-path:polygon(0 100%,100% 100%,94% 0,84% 100%,73% 6%,61% 100%,51% 0,39% 100%,29% 8%,17% 100%,7% 0);
}
#menuScreen .creature-tentacle{
 position:absolute;left:45%;top:46%;z-index:2;
 width:13%;height:51%;border:0;border-radius:50% 50% 42% 42%;
 transform-origin:50% 8%;opacity:.96;
 background:
  radial-gradient(ellipse 40% 4.5% at 50% 29%,rgba(185,255,226,.9) 0 25%,rgba(2,19,26,.9) 45% 65%,transparent 76%) 0 0 / 100% 13% repeat-y,
  linear-gradient(90deg,#020810 0%,#09232b 18%,#21626a 44%,#2a7776 53%,#17434c 74%,#030912 100%);
 clip-path:polygon(5% 0,95% 0,100% 17%,87% 36%,76% 53%,65% 69%,57% 82%,49% 100%,34% 98%,29% 84%,22% 67%,14% 49%,4% 29%,0 16%);
 filter:drop-shadow(0 0 8px rgba(22,107,118,.42));
 animation:kraken-arm 6.2s ease-in-out infinite;
}
#menuScreen .creature-tentacle.t1{--arm-angle:-78deg;--arm-sway:-4deg;z-index:1}
#menuScreen .creature-tentacle.t2{--arm-angle:-59deg;--arm-sway:5deg;animation-delay:-1.1s}
#menuScreen .creature-tentacle.t3{--arm-angle:-40deg;--arm-sway:-5deg;z-index:3;animation-delay:-2.3s}
#menuScreen .creature-tentacle.t4{--arm-angle:-21deg;--arm-sway:4deg;z-index:3;animation-delay:-.8s}
#menuScreen .creature-tentacle.t5{--arm-angle:21deg;--arm-sway:-4deg;z-index:3;animation-delay:-3.1s}
#menuScreen .creature-tentacle.t6{--arm-angle:40deg;--arm-sway:5deg;z-index:3;animation-delay:-1.8s}
#menuScreen .creature-tentacle.t7{--arm-angle:59deg;--arm-sway:-5deg;animation-delay:-2.6s}
#menuScreen .creature-tentacle.t8{--arm-angle:78deg;--arm-sway:4deg;z-index:1;animation-delay:-.4s}
@keyframes kraken-arm{
 0%,100%{transform:rotate(calc(var(--arm-angle) + var(--arm-sway))) translateY(0)}
 50%{transform:rotate(calc(var(--arm-angle) - var(--arm-sway))) translateY(9px)}
}
@keyframes kraken-mantle{
 0%,100%{transform:translateY(-4px) rotate(-1.2deg)}
 50%{transform:translateY(5px) rotate(1.4deg)}
}
/* The art remains unobstructed until the player explicitly opens the chat. */
.chat-toggle-btn{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:700px){
 #menuScreen .menu-creature{width:105vw;height:105vw;right:-35%;top:43%;opacity:.56}
 #menuScreen .creature-core{width:35%;height:34%}
 #menuScreen .creature-tentacle{width:14%;height:48%;left:43%;top:46%}
}
@media(prefers-reduced-motion:reduce){
 #menuScreen .creature-core,#menuScreen .creature-tentacle{animation:none!important}
}


/* Ranking da partida, descrição contextual de skills e foco visual leve. */
.run-energy-ranking{position:fixed;right:10px;top:calc(142px + 36px);z-index:9;width:clamp(145px,18vw,205px);padding:8px 10px;border:1px solid rgba(118,230,223,.22);border-radius:8px;background:rgba(3,15,25,.78);backdrop-filter:blur(4px);font:10px/1.45 'DM Mono',monospace;color:#d9f8fa;pointer-events:none}.run-energy-ranking>strong{display:block;margin-bottom:5px;color:#91fff1;font-size:9px;letter-spacing:.1em}.run-energy-row{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}.run-energy-row .energy-name{overflow:hidden;text-overflow:ellipsis}.run-energy-row .energy-value{color:#c7b5ff;font-weight:800}.skill-description-tooltip{position:fixed;z-index:40;max-width:280px;padding:10px 12px;border:1px solid rgba(132,244,236,.4);border-radius:8px;background:rgba(2,12,22,.96);box-shadow:0 8px 28px rgba(0,0,0,.3);color:#e7ffff;pointer-events:none}.skill-description-tooltip strong,.skill-description-tooltip span{display:block}.skill-description-tooltip strong{font-size:11px;color:#a3fff4;margin-bottom:4px}.skill-description-tooltip span{font-size:10px;line-height:1.5;color:#c8dbe4}
.selected-skill-row{width:100%;font:inherit;text-align:left;cursor:pointer;background:transparent;border:0;color:inherit}
@media(max-width:700px){.run-energy-ranking{top:calc(130px + 36px);right:5px;width:118px;padding:5px 6px;font-size:8px}.run-energy-ranking>strong{font-size:8px}.skill-description-tooltip{max-width:240px}}
.run-energy-ranking{position:fixed;right:10px;top:88px;z-index:9;width:clamp(145px,18vw,205px);padding:8px 10px;border:1px solid rgba(118,230,223,.22);border-radius:8px;background:rgba(3,15,25,.78);font:10px/1.45 'DM Mono',monospace;color:#d9f8fa;pointer-events:none}.run-energy-ranking>strong{display:block;margin-bottom:5px;color:#91fff1;font-size:9px;letter-spacing:.1em}.run-energy-row{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}.run-energy-row .energy-name{overflow:hidden;text-overflow:ellipsis}.run-energy-row .energy-value{color:#c7b5ff;font-weight:800}.skill-description-tooltip{position:fixed;z-index:40;max-width:280px;padding:10px 12px;border:1px solid rgba(132,244,236,.4);border-radius:8px;background:rgba(2,12,22,.96);color:#e7ffff;pointer-events:none}.skill-description-tooltip strong,.skill-description-tooltip span{display:block}.skill-description-tooltip strong{font-size:11px;color:#a3fff4;margin-bottom:4px}.skill-description-tooltip span{font-size:10px;line-height:1.5;color:#c8dbe4}.selected-skill-row{width:100%;font:inherit;text-align:left;cursor:pointer;background:transparent;border:0;color:inherit}@media(max-width:700px){.run-energy-ranking{top:74px;right:5px;width:118px;padding:5px 6px;font-size:8px}.run-energy-ranking>strong{font-size:8px}.skill-description-tooltip{max-width:240px}}
/* Distinct passive-skill description in the cosmetic catalog. */
.skin-card .skin-ability{
 flex:1;min-height:4.8em;margin:0 0 12px;padding:8px 9px;
 border-left:2px solid rgba(105,230,213,.52);
 background:linear-gradient(90deg,rgba(10,43,52,.54),rgba(5,16,27,.16));
 color:#bed9dc;font-size:9px;line-height:1.45;overflow-wrap:anywhere;
}
.skin-card .skin-ability b{
 display:block;margin-bottom:4px;color:#80eadd;
 font:700 8px 'DM Mono',monospace;letter-spacing:.08em;
}
@media(max-width:700px){
 .skin-card .skin-ability{min-height:0;padding:7px;font-size:8px;line-height:1.4}
 .skin-card .skin-ability b{font-size:7px}
}

/* Kraken do Abismo: tema violeta compartilhado pelo menu, loja e catálogo */
#menuScreen{background:radial-gradient(ellipse at 76% 45%,rgba(91,33,182,.32),transparent 38%),radial-gradient(ellipse at 80% 70%,rgba(139,92,246,.2),transparent 34%),linear-gradient(110deg,rgba(3,5,16,.98) 0%,rgba(10,7,27,.94) 48%,rgba(5,4,17,.58) 100%)}
#menuScreen:before{background-image:linear-gradient(rgba(177,137,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(177,137,255,.07) 1px,transparent 1px)}
#menuScreen .menu-creature{width:min(60vw,780px);height:min(60vw,780px);right:0;opacity:.92;filter:saturate(1.35) contrast(1.16)}
#menuScreen .glow{background:radial-gradient(circle,rgba(124,58,237,.36),rgba(76,29,149,.2) 32%,rgba(17,10,46,.12) 52%,transparent 72%)}
#menuScreen .orbit{border-color:rgba(196,181,253,.3);box-shadow:0 0 30px rgba(139,92,246,.1)}
#menuScreen .orbit-two{border-color:rgba(139,92,246,.4)}
#menuScreen .creature-core{background:radial-gradient(circle at 34% 24%,#d8b4fe 0%,#8b5cf6 9%,#4c1d95 28%,#170b31 54%,#03020b 79%);border:1px solid rgba(196,181,253,.85);box-shadow:inset -19px -20px 34px #03020b,inset 8px 8px 18px rgba(216,180,254,.18),0 0 28px #8b5cf6,0 0 92px rgba(124,58,237,.48),0 0 145px rgba(76,29,149,.28)}
#menuScreen .creature-core:before,#menuScreen .creature-core:after{top:39%;height:8%;width:13%;background:#f5d0fe;border-radius:50%;box-shadow:0 0 8px #d8b4fe,0 0 24px rgba(192,132,252,.95)}
#menuScreen .creature-core:before{left:23%;transform:rotate(0)}
#menuScreen .creature-core:after{right:23%;transform:rotate(0)}
#menuScreen .creature-core span{border-bottom:0;box-shadow:none;height:0;top:63%}
#menuScreen .creature-tentacle{border-left-color:rgba(167,139,250,.9);border-left-width:5px;filter:drop-shadow(0 0 9px #8b5cf6) drop-shadow(0 0 16px rgba(124,58,237,.55))}
#menuScreen h1 em{color:#c4b5fd;text-shadow:0 0 22px rgba(167,139,250,.5),0 0 48px rgba(124,58,237,.28)}
#menuScreen .primary-btn{background:linear-gradient(105deg,#e9d5ff,#a78bfa 55%,#7c3aed);box-shadow:0 0 28px rgba(139,92,246,.25)}
.skin-card:has(.skin-preview-canvas[aria-label*="Kraken"]) .skin-preview{background:radial-gradient(circle,rgba(139,92,246,.3),transparent 72%)}
.redeem-code-panel{margin:18px 0 14px;padding:16px;border:1px solid rgba(167,139,250,.35);border-radius:8px;background:linear-gradient(125deg,rgba(48,22,83,.4),rgba(7,18,31,.72));}
.redeem-code-panel h3{margin:5px 0 6px;color:#e9ddff;font-size:14px;letter-spacing:.08em}
.redeem-code-panel p{margin:0;color:#9fb0c6;font-size:11px;line-height:1.6}
.redeem-code-controls{display:flex;gap:8px;margin-top:12px}
.redeem-code-controls input{min-width:0;flex:1;height:38px;border:1px solid rgba(167,139,250,.35);border-radius:5px;background:rgba(2,8,19,.85);color:#f4edff;padding:0 11px;font:11px 'DM Mono',monospace;text-transform:none}
.redeem-code-controls button{min-width:120px;border-color:rgba(167,139,250,.45);color:#e9ddff}
.redeem-code-message{min-height:16px;margin-top:8px!important;color:#c4b5fd!important}
@media(max-width:520px){.redeem-code-controls{flex-direction:column}.redeem-code-controls button{width:100%}#menuScreen .menu-creature{width:85vw;height:85vw;right:-20%;opacity:.48}#menuScreen .menu-content{width:94%;padding-left:20px}}

/* Redesign final do Kraken: oito braços radiais, volumosos e animados */
#menuScreen .menu-creature{width:min(62vw,790px);height:min(62vw,790px);right:0;top:50%;opacity:1;filter:saturate(1.2) contrast(1.12)}
#menuScreen .glow{width:75%;height:75%;background:radial-gradient(circle,rgba(124,58,237,.42),rgba(76,29,149,.22) 35%,rgba(18,7,43,.1) 58%,transparent 74%);filter:blur(22px)}
#menuScreen .orbit{border-color:rgba(167,139,250,.22);box-shadow:0 0 24px rgba(139,92,246,.16)}
#menuScreen .orbit-two{border-color:rgba(196,181,253,.3)}
#menuScreen .creature-core{width:25%;height:25%;z-index:3;border-radius:48% 48% 43% 43%;background:radial-gradient(ellipse at 34% 23%,#e9d5ff 0%,#c4b5fd 5%,#8b5cf6 17%,#4c1d95 38%,#170b32 64%,#020108 100%);border:1px solid rgba(221,214,254,.9);box-shadow:inset -19px -20px 34px #03010b,inset 8px 8px 18px rgba(216,180,254,.22),0 0 28px #8b5cf6,0 0 88px rgba(124,58,237,.55),0 0 145px rgba(76,29,149,.32);animation:float 4s ease-in-out infinite}
#menuScreen .creature-core:before,#menuScreen .creature-core:after{top:39%;height:10%;width:16%;background:#f5d0fe;border-radius:50%;box-shadow:0 0 8px #e9d5ff,0 0 24px rgba(192,132,252,.95)}
#menuScreen .creature-core:before{left:22%;transform:none}
#menuScreen .creature-core:after{right:22%;transform:none}
#menuScreen .creature-core span{width:22%;height:12%;left:39%;top:63%;border:1px solid rgba(167,139,250,.35);border-radius:50%;background:#05020d;box-shadow:0 0 14px rgba(139,92,246,.4)}
#menuScreen .creature-tentacle{position:absolute;z-index:2;left:43.5%;top:28%;width:13%;height:46%;border:0;border-radius:0;transform-origin:50% 50%;clip-path:polygon(22% 0,78% 0,82% 20%,72% 43%,61% 67%,50% 100%,39% 67%,28% 43%,18% 20%);background:linear-gradient(90deg,#170b32 0%,#4c1d95 19%,#8b5cf6 42%,#c4b5fd 50%,#6d28d9 68%,#170b32 100%);filter:drop-shadow(0 0 7px rgba(139,92,246,.8));animation:kraken-arm 2.6s ease-in-out infinite;animation-delay:var(--arm-delay,0s)}
#menuScreen .creature-tentacle:after{content:"";position:absolute;inset:8% 36% 14%;background:repeating-linear-gradient(to bottom,rgba(237,233,254,.58) 0 1px,transparent 1px 15%);opacity:.5;clip-path:polygon(25% 0,75% 0,60% 100%,40% 100%)}
#menuScreen .creature-tentacle.t1{--arm-angle:0deg;--arm-delay:-.2s}
#menuScreen .creature-tentacle.t2{--arm-angle:45deg;--arm-delay:-.6s}
#menuScreen .creature-tentacle.t3{--arm-angle:90deg;--arm-delay:-1s}
#menuScreen .creature-tentacle.t4{--arm-angle:135deg;--arm-delay:-1.4s}
#menuScreen .creature-tentacle.t5{--arm-angle:180deg;--arm-delay:-1.8s}
#menuScreen .creature-tentacle.t6{--arm-angle:225deg;--arm-delay:-2.2s}
#menuScreen .creature-tentacle.t7{--arm-angle:270deg;--arm-delay:-.9s}
#menuScreen .creature-tentacle.t8{--arm-angle:315deg;--arm-delay:-1.7s}
@keyframes kraken-arm{0%,100%{transform:rotate(var(--arm-angle,0deg)) scaleX(.88) scaleY(.94)}50%{transform:rotate(calc(var(--arm-angle,0deg) + 13deg)) scaleX(1.06) scaleY(1.05)}}
#menuScreen h1 em{color:#c4b5fd;text-shadow:0 0 22px rgba(167,139,250,.5),0 0 48px rgba(124,58,237,.28)}
#menuScreen .primary-btn{background:linear-gradient(105deg,#e9d5ff,#a78bfa 55%,#7c3aed);box-shadow:0 0 28px rgba(139,92,246,.25)}
.redeem-code-panel{position:relative;z-index:2;overflow:visible;margin:18px 0 14px;padding:18px;border:1px solid rgba(167,139,250,.55);border-radius:8px;background:linear-gradient(125deg,rgba(48,22,83,.6),rgba(7,18,31,.94));}
.redeem-code-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:14px}
.redeem-code-controls label{display:block;position:relative;color:#d9c7ff;font:10px 'DM Mono',monospace;letter-spacing:.1em;pointer-events:auto}
.redeem-code-controls input{display:block;position:relative;z-index:5;width:100%;min-height:46px;height:46px;flex:none;box-sizing:border-box;border:1px solid rgba(196,181,253,.7);border-radius:5px;background:#020611!important;color:#fff!important;padding:0 14px;font:14px 'DM Mono',monospace;text-transform:none;letter-spacing:.04em;outline:none;pointer-events:auto;user-select:text;opacity:1}
.redeem-code-controls input:focus{border-color:#c4b5fd;box-shadow:0 0 0 3px rgba(139,92,246,.22),0 0 18px rgba(139,92,246,.2)}
.redeem-code-controls input::placeholder{color:#8d80ad;opacity:1}
.redeem-code-controls button{display:block;position:relative;z-index:5;width:100%;min-height:42px;flex:none;border-color:rgba(167,139,250,.65);color:#f0e7ff;pointer-events:auto}
.redeem-code-message{min-height:18px;margin-top:10px!important;color:#d9c7ff!important}
@media(max-width:700px){#menuScreen .menu-creature{width:92vw;height:92vw;right:-23%;top:47%;opacity:.66}#menuScreen .menu-content{z-index:3}.redeem-code-controls input{font-size:16px}}
@media(prefers-reduced-motion:reduce){#menuScreen .creature-tentacle{animation-duration:8s!important}}

/* Cinematic hadal menu: violet bioluminescence, deep trench and a colossal eight-armed presence */
#menuScreen{background:radial-gradient(ellipse at 78% 48%,rgba(91,33,182,.25),transparent 24%),radial-gradient(ellipse at 76% 75%,rgba(14,116,144,.18),transparent 36%),linear-gradient(105deg,#01040b 0%,#030916 44%,#050b1c 100%)}
#menuScreen:before{opacity:.3;background-image:radial-gradient(circle,rgba(196,181,253,.35) 0 1px,transparent 1.6px),linear-gradient(115deg,transparent 0 48%,rgba(139,92,246,.07) 49%,transparent 50%);background-size:47px 53px,100% 100%;mask-image:linear-gradient(90deg,transparent 4%,#000 65%,#000)}
#menuScreen:after{background:radial-gradient(ellipse at 75% 100%,rgba(76,29,149,.22),transparent 40%),linear-gradient(180deg,rgba(1,4,12,.1),rgba(1,4,12,.7))}
#menuScreen .menu-content{background:linear-gradient(90deg,rgba(1,7,17,.8),rgba(2,8,20,.4) 78%,transparent);border-right-color:rgba(167,139,250,.13)}
#menuScreen .eyebrow{color:#c4b5fd;text-shadow:0 0 16px rgba(167,139,250,.25)}
#menuScreen h1 em{color:#c4b5fd;text-shadow:0 0 22px rgba(167,139,250,.55),0 0 62px rgba(124,58,237,.4)}
#menuScreen .primary-btn{background:linear-gradient(110deg,#ede9fe,#a78bfa 58%,#6d28d9);color:#120922;box-shadow:0 8px 34px rgba(124,58,237,.22),inset 0 1px rgba(255,255,255,.7)}
#menuScreen .menu-action{border-color:rgba(167,139,250,.24);background:linear-gradient(135deg,rgba(24,15,48,.88),rgba(4,13,29,.94))}
#menuScreen .menu-action:hover{border-color:rgba(196,181,253,.7);box-shadow:0 0 22px rgba(139,92,246,.16)}
#menuScreen #onlineBtn.online-cta{border-color:rgba(167,139,250,.55);background:linear-gradient(115deg,rgba(60,25,104,.9),rgba(11,28,53,.97))}
#menuScreen .menu-creature{width:min(65vw,790px);height:min(65vw,790px);right:-1%;filter:saturate(1.25) contrast(1.12);opacity:1}
#menuScreen .glow{width:76%;height:76%;background:radial-gradient(circle,rgba(139,92,246,.4),rgba(76,29,149,.22) 35%,rgba(18,7,43,.08) 58%,transparent 74%);filter:blur(25px)}
#menuScreen .orbit{border-color:rgba(196,181,253,.23);box-shadow:0 0 28px rgba(139,92,246,.14)}
#menuScreen .creature-core{width:27%;height:27%;border-radius:48% 48% 43% 43%;background:radial-gradient(ellipse at 34% 23%,#ede9fe 0%,#c4b5fd 5%,#8b5cf6 17%,#4c1d95 38%,#170b32 64%,#020108 100%);border:1px solid rgba(221,214,254,.85);box-shadow:inset -19px -20px 34px #03010b,inset 8px 8px 18px rgba(216,180,254,.22),0 0 28px #8b5cf6,0 0 88px rgba(124,58,237,.55),0 0 145px rgba(76,29,149,.32)}
#menuScreen .creature-core:before,#menuScreen .creature-core:after{top:39%;height:10%;width:16%;background:#f5d0fe;border-radius:50%;box-shadow:0 0 8px #e9d5ff,0 0 24px rgba(192,132,252,.95)}
#menuScreen .creature-core:before{left:22%}#menuScreen .creature-core:after{right:22%}
#menuScreen .creature-core span{width:22%;height:12%;left:39%;top:63%;border:1px solid rgba(167,139,250,.35);border-radius:50%;background:#05020d;box-shadow:0 0 14px rgba(139,92,246,.4)}
#menuScreen .creature-tentacle{left:43.5%;top:28%;width:13%;height:46%;border:0;border-radius:0;transform-origin:50% 50%;clip-path:polygon(22% 0,78% 0,82% 20%,72% 43%,61% 67%,50% 100%,39% 67%,28% 43%,18% 20%);background:linear-gradient(90deg,#170b32 0%,#4c1d95 19%,#8b5cf6 42%,#c4b5fd 50%,#6d28d9 68%,#170b32 100%);filter:drop-shadow(0 0 7px rgba(139,92,246,.8));animation:abyssal-menu-arm 3.2s ease-in-out infinite;animation-delay:var(--arm-delay,0s)}
#menuScreen .creature-tentacle:after{content:"";position:absolute;inset:8% 36% 14%;background:repeating-linear-gradient(to bottom,rgba(237,233,254,.58) 0 1px,transparent 1px 15%);opacity:.5;clip-path:polygon(25% 0,75% 0,60% 100%,40% 100%)}
#menuScreen .creature-tentacle.t1{--arm-angle:0deg;--arm-delay:-.2s}#menuScreen .creature-tentacle.t2{--arm-angle:45deg;--arm-delay:-.6s}#menuScreen .creature-tentacle.t3{--arm-angle:90deg;--arm-delay:-1s}#menuScreen .creature-tentacle.t4{--arm-angle:135deg;--arm-delay:-1.4s}#menuScreen .creature-tentacle.t5{--arm-angle:180deg;--arm-delay:-1.8s}#menuScreen .creature-tentacle.t6{--arm-angle:225deg;--arm-delay:-2.2s}#menuScreen .creature-tentacle.t7{--arm-angle:270deg;--arm-delay:-.9s}#menuScreen .creature-tentacle.t8{--arm-angle:315deg;--arm-delay:-1.7s}
@keyframes abyssal-menu-arm{0%,100%{transform:rotate(var(--arm-angle,0deg)) scaleX(.88) scaleY(.94)}50%{transform:rotate(calc(var(--arm-angle,0deg) + 13deg)) scaleX(1.06) scaleY(1.05)}}
.redeem-open-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin:14px 0;padding:16px 18px;border:1px solid rgba(167,139,250,.42);border-radius:7px;background:linear-gradient(120deg,rgba(45,22,76,.7),rgba(5,15,30,.96));color:#f0e7ff;text-align:left}
.redeem-open-btn span{display:flex;flex-direction:column;gap:6px}.redeem-open-btn b{font:11px 'DM Mono',monospace;letter-spacing:.1em}.redeem-open-btn small{font-size:11px;color:#9e91bc}.redeem-open-btn>strong{font-size:20px;color:#c4b5fd}.redeem-open-btn:hover{border-color:#c4b5fd;box-shadow:0 0 22px rgba(139,92,246,.15)}
.redeem-modal-screen{z-index:12;background:rgba(1,4,13,.86);backdrop-filter:blur(14px)}
.redeem-modal-card{position:relative;width:min(470px,100%);overflow:hidden;border-color:rgba(167,139,250,.5);border-radius:12px;background:radial-gradient(ellipse at 50% 0%,rgba(109,40,217,.24),transparent 48%),linear-gradient(145deg,rgba(11,13,34,.99),rgba(3,8,20,.99));box-shadow:0 25px 100px rgba(0,0,0,.7),0 0 55px rgba(109,40,217,.12)}
.redeem-close-btn{position:absolute;right:14px;top:12px;width:34px;height:34px;border:1px solid rgba(196,181,253,.25);border-radius:50%;background:rgba(4,8,20,.8);color:#d8ccf8;font-size:24px}
.redeem-modal-emblem{width:54px;height:54px;display:grid;place-items:center;margin-bottom:22px;border:1px solid rgba(196,181,253,.45);border-radius:50%;background:rgba(109,40,217,.2);color:#e9d5ff;font-size:25px;box-shadow:0 0 28px rgba(139,92,246,.24)}
.redeem-modal-card h2{color:#f5f3ff}.redeem-modal-card h2 em{color:#c4b5fd}.redeem-modal-card>p{color:#b5accf}
.redeem-code-controls{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-top:18px}
.redeem-code-controls label{color:#d8ccf8;font:10px 'DM Mono',monospace;letter-spacing:.12em}
.redeem-code-controls input{display:block;position:relative;z-index:5;width:100%;min-height:49px;height:49px;box-sizing:border-box;border:1px solid rgba(196,181,253,.65);border-radius:6px;background:#020611!important;color:#fff!important;padding:0 14px;font:15px 'DM Mono',monospace;text-transform:none;letter-spacing:.04em;outline:none;pointer-events:auto;user-select:text;opacity:1}
.redeem-code-controls input:focus{border-color:#c4b5fd;box-shadow:0 0 0 3px rgba(139,92,246,.22),0 0 18px rgba(139,92,246,.2)}
.redeem-code-controls input::placeholder{color:#8d80ad;opacity:1}
.redeem-code-controls .primary-btn{width:100%;height:48px;justify-content:space-between;padding:0 16px}
.redeem-code-message{min-height:18px;margin:14px 0 0!important;color:#d9c7ff!important;font-size:11px!important}
@media(max-width:700px){#menuScreen .menu-creature{width:96vw;height:96vw;right:-28%;top:43%;opacity:.72}#menuScreen .menu-content{z-index:3}.redeem-modal-card{padding:25px 20px}.redeem-code-controls input{font-size:16px}}
@media(prefers-reduced-motion:reduce){#menuScreen .creature-tentacle{animation-duration:8s!important}}


/* MENU FAUNA — fauna e rochas em silhueta, animadas por CSS sem trabalho extra no loop do jogo */
.menu-fauna{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:.92;background:radial-gradient(ellipse at 76% 86%,rgba(29,100,130,.22),transparent 45%),linear-gradient(180deg,transparent 62%,rgba(1,7,14,.7));}
.menu-fish{position:absolute;width:54px;height:23px;border-radius:55% 45% 48% 52%;background:linear-gradient(180deg,rgba(133,236,235,.72),rgba(35,109,145,.42));box-shadow:0 0 18px rgba(73,210,224,.16);opacity:.5;animation:menuFishSwim 22s linear infinite;}
.menu-fish:before{content:"";position:absolute;right:-13px;top:4px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:15px solid rgba(91,190,207,.48)}
.menu-fish:after{content:"";position:absolute;left:12px;top:7px;width:3px;height:3px;border-radius:50%;background:#d8ffff;box-shadow:0 0 6px #a6ffff}
.fish-a{top:22%;left:68%;transform:scale(.75);animation-delay:-5s}.fish-b{top:38%;left:83%;transform:scale(.45);animation-delay:-14s}.fish-c{top:59%;left:62%;transform:scale(1.05);animation-delay:-9s}.fish-d{top:76%;left:88%;transform:scale(.55);animation-delay:-2s}
.menu-rock{position:absolute;bottom:-3%;background:linear-gradient(135deg,rgba(28,67,85,.8),rgba(4,20,34,.96) 70%);border:1px solid rgba(112,196,208,.12);filter:drop-shadow(0 -12px 22px rgba(10,72,95,.13));}
.rock-a{left:37%;width:22%;height:22%;clip-path:polygon(0 100%,8% 55%,26% 38%,34% 11%,52% 26%,64% 0,77% 48%,93% 57%,100% 100%)}.rock-b{right:-2%;width:24%;height:28%;clip-path:polygon(0 100%,7% 60%,24% 47%,31% 18%,45% 29%,61% 5%,74% 38%,91% 50%,100% 100%)}.rock-c{left:62%;width:13%;height:13%;clip-path:polygon(0 100%,13% 45%,33% 30%,48% 0,65% 32%,85% 47%,100% 100%)}
.menu-seaweed{position:absolute;bottom:10%;width:5px;height:20%;border-radius:100% 0 100% 0;border-left:2px solid rgba(61,170,155,.32);transform-origin:bottom;animation:menuWeedSway 4s ease-in-out infinite}.weed-a{left:49%;height:23%}.weed-b{right:12%;height:18%;animation-delay:-2s}
@keyframes menuFishSwim{0%{translate:80px 0;opacity:0}12%{opacity:.5}85%{opacity:.45}100%{translate:-180px -14px;opacity:0}}@keyframes menuWeedSway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(11deg)}}
#menuScreen .menu-fauna{mask-image:linear-gradient(90deg,transparent 20%,#000 55%,#000);}
@media(max-width:700px){.menu-fauna{opacity:.58}.menu-fish{opacity:.35}.rock-a{left:18%;width:35%}.rock-b{width:38%}}

/* Cardumes: painel social e legível, sem criatura decorativa bloqueando o menu. */
#menuScreen .menu-creature{display:none!important}
.cardumes-modal{width:min(680px,calc(100vw - 24px));max-height:min(88dvh,900px);overflow:auto}
.cardumes-modal .cardumes-list{display:grid;gap:9px;margin:12px 0 18px}
.cardume-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid rgba(121,243,240,.22);background:linear-gradient(120deg,rgba(7,36,49,.88),rgba(3,12,24,.92));border-radius:7px}
.cardume-card strong{display:block;color:#eaffff;font-size:13px;overflow-wrap:anywhere}.cardume-card p{margin:5px 0;color:#b8d1dd;font-size:11px;line-height:1.5}.cardume-card small{color:#8feee7;font:10px 'DM Mono',monospace}.cardume-card button{min-width:88px;padding:10px;border:1px solid rgba(121,243,240,.35);background:#0a3947;color:#eaffff;border-radius:5px;font-weight:800}.cardume-card button:disabled{opacity:.45;cursor:not-allowed}
.cardumes-modal .room-create-section{margin:16px 0}.cardumes-modal .room-create-section .text-field{margin:6px 0 12px}.cardumes-modal .primary-btn,.cardumes-modal>.secondary-btn{width:100%;margin-top:9px}

/* Cardume com lista de presença e perfis públicos. */
.cardume-detail{margin:16px 0}.cardume-detail-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px;border:1px solid rgba(121,243,240,.2);background:rgba(7,31,44,.75);margin:12px 0}.cardume-detail-heading h3{margin:0;color:#e8ffff;font-size:18px}.cardume-detail-heading p{margin:6px 0 0;color:#9ab9c6;font-size:12px;line-height:1.5}.cardume-members{display:grid;gap:8px;margin:12px 0 18px}.cardume-member{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid rgba(121,243,240,.15);background:rgba(5,22,33,.85)}.member-presence{width:10px;height:10px;border-radius:50%;background:#63717a;box-shadow:0 0 0 3px rgba(99,113,122,.12)}.member-presence.is-online{background:#51f39a;box-shadow:0 0 10px rgba(81,243,154,.75)}.cardume-member-copy{min-width:0}.cardume-member-copy strong{display:block;color:#e9ffff;font-size:13px;overflow-wrap:anywhere}.cardume-member-copy small{display:block;margin-top:4px;color:#91aebb;font:9px 'DM Mono',monospace}.cardume-member button{border:1px solid rgba(121,243,240,.3);background:rgba(121,243,240,.06);color:#bafffb;padding:8px 10px;font-size:10px;font-weight:800}.public-profile-actions{display:flex;align-items:center;gap:12px;margin:12px 0 18px}.public-profile-actions .primary-btn{min-width:170px}.public-profile-actions .primary-btn:disabled{opacity:.55}.profile-social-counts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}.profile-social-counts span{border:1px solid rgba(121,243,240,.16);padding:7px 10px;color:#a6d8dc;font:10px 'DM Mono',monospace}
@media(max-width:520px){.cardume-member{grid-template-columns:auto minmax(0,1fr)}.cardume-member button{grid-column:2;justify-self:start}.public-profile-actions{align-items:flex-start;flex-direction:column}}


/* Menu refresh: reserve a dedicated right column for chat, never over the actions. */
@media (min-width: 701px) {
  #menuScreen { overflow: hidden; }
  #menuScreen .menu-content {
    width: min(56%, 760px);
    min-height: 100%;
    padding-right: clamp(18px, 3vw, 46px);
    padding-bottom: 72px;
  }
    position: absolute;
    top: 50%;
    right: clamp(18px, 2.5vw, 40px);
    bottom: auto;
    transform: translateY(-50%);
    width: clamp(310px, 34vw, 470px);
    max-height: min(76%, 650px);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: clamp(12px, 1.2vw, 18px);
    z-index: 6;
  }
    height: auto;
    min-height: 130px;
    flex: 1 1 auto;
    max-height: min(42vh, 380px);
  }
  #menuScreen .menu-footer { right: clamp(18px, 2.5vw, 40px); }
}
.menu-catalog-creature {
  position: absolute;
  z-index: 1;
  display: block;
  width: clamp(90px, 14vw, 220px);
  height: auto;
  object-fit: contain;
  opacity: .44;
  filter: drop-shadow(0 0 18px rgba(98, 226, 232, .22));
  pointer-events: none;
  animation: catalogCreatureDrift 34s linear infinite;
}
.menu-creature-drifter { top: 15%; left: 68%; width: clamp(60px, 9vw, 130px); animation-duration: 28s; }
.menu-creature-angler { top: 65%; left: 78%; width: clamp(70px, 10vw, 150px); animation-duration: 36s; animation-delay: -11s; }
.menu-creature-leviathan { top: 25%; left: 78%; width: clamp(100px, 17vw, 250px); animation-duration: 44s; animation-delay: -20s; }
.menu-creature-maw { top: 53%; left: 57%; width: clamp(75px, 12vw, 170px); animation-duration: 39s; animation-delay: -17s; }
.menu-creature-kraken { top: 34%; left: 67%; width: clamp(110px, 18vw, 260px); opacity: .30; animation-duration: 52s; animation-delay: -29s; }
@keyframes catalogCreatureDrift {
  0% { transform: translate3d(16vw, 0, 0) rotate(-5deg); }
  25% { transform: translate3d(-3vw, 4vh, 0) rotate(2deg); }
  50% { transform: translate3d(-24vw, -2vh, 0) rotate(6deg); }
  75% { transform: translate3d(-8vw, -5vh, 0) rotate(-2deg); }
  100% { transform: translate3d(16vw, 0, 0) rotate(-5deg); }
}
@media (max-width: 700px) {
  #menuScreen { overflow-y: auto; }
  #menuScreen .menu-content { width: 100%; padding-bottom: 26px; }
    position: relative;
    inset: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    width: calc(100% - 36px);
    max-width: none;
    max-height: none;
    margin: 14px 18px 60px;
    align-self: stretch;
  }
  .menu-catalog-creature { opacity: .20; }
  .menu-creature-kraken { left: 45%; top: 45%; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-catalog-creature { animation: none; }
}


.chat-toggle-btn { display: none !important; }
  position: absolute;
  z-index: 8;
  top: 50%;
  right: clamp(18px, 2.4vw, 38px);
  bottom: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  width: clamp(300px, 32vw, 440px);
  height: min(66vh, 590px);
  max-height: calc(100% - 110px);
  min-height: 300px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(94, 225, 230, .3);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(4, 23, 37, .97), rgba(2, 10, 22, .98));
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px rgba(196,255,255,.06);
  backdrop-filter: blur(14px);
}
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid rgba(112, 224, 230, .16);
}
@keyframes chatSignalPulse { 0%,100% { opacity: .75; box-shadow: 0 0 7px rgba(98,245,179,.45); } 50% { opacity: 1; box-shadow: 0 0 14px rgba(98,245,179,.85); } }

/* Criaturas grandes atravessam o menu de ponta a ponta em trajetórias de nado. */
#menuScreen .menu-catalog-creature {
  z-index: 2;
  opacity: .34;
  will-change: transform;
  animation-name: menuCreatureCross;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#menuScreen .menu-creature-drifter { top: 18%; left: -24%; animation-duration: 31s; animation-delay: -17s; }
#menuScreen .menu-creature-angler { top: 63%; left: -25%; animation-duration: 38s; animation-delay: -8s; }
#menuScreen .menu-creature-leviathan { top: 28%; left: -32%; animation-duration: 49s; animation-delay: -34s; }
#menuScreen .menu-creature-maw { top: 52%; left: -24%; animation-duration: 42s; animation-delay: -26s; }
#menuScreen .menu-creature-kraken { top: 37%; left: -30%; opacity: .25; animation-duration: 56s; animation-delay: -43s; }
@keyframes menuCreatureCross {
  0% { transform: translate3d(-8vw, 0, 0) rotate(-4deg); }
  20% { transform: translate3d(25vw, -2vh, 0) rotate(1deg); }
  45% { transform: translate3d(65vw, 3vh, 0) rotate(4deg); }
  70% { transform: translate3d(110vw, -2vh, 0) rotate(-1deg); }
  100% { transform: translate3d(155vw, 1vh, 0) rotate(3deg); }
}
#menuScreen .menu-fauna { mask-image: none; }
@media (max-width: 900px) and (min-width: 701px) {
  #menuScreen .menu-content { width: 52%; }
}
@media (max-width: 700px) {
    position: relative; top: auto; right: auto; bottom: auto; left: auto;
    transform: none; width: calc(100% - 32px); max-width: 520px;
    height: 320px; min-height: 280px; max-height: none;
    margin: 12px 16px 54px; align-self: center;
  }
  #menuScreen .menu-catalog-creature { opacity: .16; }
  #menuScreen .menu-creature-kraken { top: 43%; }
}
@media (prefers-reduced-motion: reduce) {
}


/* Habilidades escolhidas ficam visíveis durante todo o mergulho, sem bloquear controles. */
.selected-skills-panel{position:absolute;z-index:4;top:156px;right:14px;width:clamp(145px,17vw,220px);max-height:min(48vh,390px);overflow:hidden;pointer-events:none;border:1px solid rgba(121,243,240,.24);border-radius:8px;background:rgba(3,15,26,.78);box-shadow:0 8px 28px rgba(0,0,0,.18);backdrop-filter:blur(7px)}
.selected-skills-title{display:block;padding:9px 11px;border-bottom:1px solid rgba(121,243,240,.15);font:800 9px 'DM Mono',monospace;letter-spacing:.12em;color:#8deee7}
.selected-skills-list{display:grid;gap:0;max-height:calc(min(48vh,390px) - 31px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(121,243,240,.2) transparent}
.selected-skill-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:6px;padding:7px 9px;border-bottom:1px solid rgba(121,243,240,.08);font-size:9px;color:#d8f7f7}
.selected-skill-row>span:first-child{font-size:15px;text-align:center;color:#9ffaf1}.selected-skill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selected-skill-row strong{font:700 8px 'DM Mono',monospace;color:#b8a8ff;white-space:nowrap}
.selected-skills-empty{margin:0;padding:10px;color:#6f929f;font-size:9px;line-height:1.5}
@media(max-width:700px){.selected-skills-panel{top:130px;right:8px;width:clamp(126px,39vw,170px);max-height:30vh;background:rgba(3,15,26,.72)}.selected-skills-list{max-height:calc(30vh - 31px)}.selected-skill-row{padding:6px 7px;font-size:8px}}
@media(max-height:560px){.selected-skills-panel{top:112px;max-height:34vh}.selected-skills-list{max-height:calc(34vh - 31px)}}


/* Sala: código curto e discreto, preso ao canto da área de jogo. */
.room-badge{top:10px;left:10px;right:auto;max-width:min(34vw,170px);padding:6px 9px;font-size:8px;letter-spacing:.04em;opacity:.82;z-index:7}
.room-badge:hover,.room-badge:focus-visible{opacity:1}
@media(max-width:700px){body.mobile-game-active .room-badge{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));max-width:30vw;padding:6px 8px;font-size:7px;z-index:24}.active-abilities{left:auto;right:max(10px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:auto;max-width:48vw;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:9px}.active-ability{width:100%;min-width:112px;min-height:46px;padding:10px 9px;font-size:8px;line-height:1.2;letter-spacing:0;text-align:center;white-space:normal;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 16px rgba(0,0,0,.3)}.active-ability:active{transform:scale(.97);filter:brightness(1.2)}}
@media(max-width:380px){.active-abilities{max-width:44vw;right:7px;bottom:max(12px,env(safe-area-inset-bottom));gap:7px}.active-ability{min-width:100px;min-height:43px;padding:8px 6px;font-size:7px}.room-badge{max-width:27vw}}


/* Sala online: código mínimo no canto inferior direito, fora da área central do HUD. */
#roomBadge.room-badge{top:auto!important;left:auto!important;right:8px!important;bottom:8px!important;max-width:clamp(48px,12vw,112px)!important;padding:3px 5px!important;border-radius:5px!important;font-size:6px!important;line-height:1.1!important;letter-spacing:0!important;opacity:.58!important;box-shadow:none!important;z-index:7!important;white-space:nowrap!important;}
#roomBadge.room-badge:hover,#roomBadge.room-badge:focus-visible{opacity:.95!important;}
@media(max-width:700px){
 body.mobile-game-active #roomBadge.room-badge{top:auto!important;left:auto!important;right:max(6px,env(safe-area-inset-right))!important;bottom:max(6px,env(safe-area-inset-bottom))!important;max-width:clamp(42px,13vw,76px)!important;padding:3px 4px!important;font-size:5px!important;letter-spacing:0!important;opacity:.5!important;z-index:7!important;}
}
@media(max-width:380px){body.mobile-game-active #roomBadge.room-badge{max-width:48px!important;padding:2px 3px!important;font-size:5px!important;}}


/* Botão de saída sempre visível no topo das janelas de loja e roleta. */
.shop-modal,.wheel-modal{position:relative;padding-top:44px!important}.modal-top-close{position:absolute;top:10px;right:10px;z-index:20;width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(121,243,240,.32);border-radius:7px;background:rgba(3,15,26,.9);color:#d9ffff;font-size:23px;line-height:1;cursor:pointer}.modal-top-close:hover{background:rgba(21,66,78,.95);border-color:rgba(121,243,240,.7)}


/* O ranking acompanha a altura real do painel de habilidades e fica logo abaixo dele. */
.run-energy-ranking{right:auto;top:calc(142px + 40px);width:clamp(145px,17vw,220px);max-height:24vh;overflow:hidden;}
@media(max-width:700px){.run-energy-ranking{right:auto;top:calc(130px + 40px);width:clamp(126px,39vw,170px);max-height:18vh;padding:5px 6px;font-size:8px}.run-energy-ranking>strong{font-size:8px}}
.combo-codex-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));}
.codex-card.combo-codex-card{position:relative;overflow:hidden;border:1px solid rgba(169,139,255,.72);background:radial-gradient(ellipse at 50% 0%,rgba(111,73,194,.22),transparent 65%),linear-gradient(145deg,rgba(26,19,49,.98),rgba(4,13,27,.99));box-shadow:inset 0 0 24px rgba(151,115,255,.08),0 0 18px rgba(123,88,255,.08);}
.codex-card.combo-codex-card:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 25%,rgba(191,170,255,.08) 50%,transparent 72%);}
.combo-rarity{position:relative;z-index:1;align-self:flex-start;margin-bottom:8px;padding:4px 7px;border:1px solid rgba(191,166,255,.48);border-radius:4px;background:rgba(86,53,143,.24);color:#dfd1ff;font:800 8px/1.4 'DM Mono',monospace;letter-spacing:.1em;}
.combo-preview{border:1px solid rgba(180,153,255,.5);background:radial-gradient(circle,var(--preview),rgba(21,18,43,.8) 54%,rgba(3,10,21,.95));color:#f5efff;text-shadow:0 0 14px var(--preview);font-size:34px;box-shadow:inset 0 0 25px rgba(177,147,255,.12),0 0 14px rgba(142,105,255,.14);}
.codex-card.combo-codex-card>b{color:#f1eaff;font-size:13px;letter-spacing:.025em;}
.codex-card.combo-codex-card>p{color:#d4c9f3;line-height:1.6;}
.combo-recipe{display:block;margin-top:8px;padding-top:8px;border-top:1px solid rgba(182,156,255,.22);color:#b9e8ff;font:700 9px/1.6 'DM Mono',monospace;}
.special-codex-heading{color:#d6c5ff!important;text-shadow:0 0 16px rgba(151,112,255,.22);}

/* Joystick flutuante: aparece no ponto inicial do toque e some ao soltar. */
body.mobile-game-active #mobileJoystick.is-floating{left:var(--floating-joystick-x,50%);top:var(--floating-joystick-y,50%);bottom:auto;transform:translate(-50%,-50%);}
body.mobile-game-active #mobileJoystick.is-floating small{display:none}
body.mobile-game-active #mobileJoystick.is-floating .joystick-base{width:112px;height:112px;border-color:rgba(134,241,239,.52);background:radial-gradient(circle,rgba(55,128,147,.36),rgba(4,18,29,.7));}
body.mobile-game-active #mobileJoystick.is-floating .joystick-knob{width:48px;height:48px}


/* Mobile HUD layout: Q/E ficam abaixo do botão Encerrar mergulho, sem sobreposição. */
@media (max-width:700px), (pointer:coarse) {
  body.mobile-game-active #endDiveBtn {
    top:auto !important;
    bottom:calc(max(8px, env(safe-area-inset-bottom)) + 126px) !important;
    right:max(10px, env(safe-area-inset-right)) !important;
    left:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:44vw !important;
    z-index:34 !important;
  }
  body.mobile-game-active #activeAbilities.active-abilities {
    position:fixed !important;
    top:auto !important;
    left:auto !important;
    right:max(10px, env(safe-area-inset-right)) !important;
    bottom:max(8px, env(safe-area-inset-bottom)) !important;
    width:clamp(108px, 35vw, 160px) !important;
    max-width:44vw !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-end !important;
    gap:6px !important;
    z-index:33 !important;
  }
  body.mobile-game-active #activeAbilities .active-ability {
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:clamp(36px, 6.5dvh, 46px) !important;
    padding:7px 6px !important;
    font-size:clamp(7px, 1.8vw, 9px) !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
  /* Informações de apoio ficam discretas, sem apagar controles essenciais. */
  body.mobile-game-active #selectedSkillsPanel,
  body.mobile-game-active .run-energy-ranking {
    opacity:.5 !important;
  }
}
@media (max-width:700px) and (max-height:520px), (pointer:coarse) and (max-height:520px) {
  body.mobile-game-active #endDiveBtn {
    bottom:calc(max(6px, env(safe-area-inset-bottom)) + 96px) !important;
  }
  body.mobile-game-active #activeAbilities.active-abilities {
    gap:4px !important;
  }
  body.mobile-game-active #activeAbilities .active-ability {
    min-height:32px !important;
    padding:5px 5px !important;
  }
}


/* Abyssal 3.5.31 — título do menu dimensionado pelo espaço real disponível. */
#menuScreen .menu-content{box-sizing:border-box;min-width:0;max-width:100%}
#menuScreen h1{
 width:100%;max-width:100%;
 font-size:clamp(28px,min(9.5vw,6.4vh),58px);
 line-height:.94;letter-spacing:-.065em;
 overflow-wrap:normal;word-break:normal;text-wrap:balance;
}
#menuScreen h1 em{display:inline-block;max-width:100%}
@media(max-width:420px){
 #menuScreen .menu-content{padding-left:14px;padding-right:14px}
 #menuScreen h1{font-size:clamp(26px,9vw,38px);line-height:.96;letter-spacing:-.06em}
}
@media(max-height:560px){
 #menuScreen h1{font-size:clamp(24px,5.4vh,34px);line-height:.95;margin:6px 0 8px}
 #menuScreen .menu-content{padding-top:8px;padding-bottom:60px;gap:6px}
}


/* HUD compact control, readability and consistent 60% gameplay transparency. */
.hud-toggle-btn{
  position:absolute;z-index:36;top:70px;right:225px;
  display:grid;place-items:center;width:34px;height:38px;
  border:1px solid rgba(135,239,231,.46);border-radius:8px;
  background:rgba(4,18,29,.34);color:#d9ffff;
  font:800 25px/1 var(--abyssal-runic);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  backdrop-filter:blur(5px);cursor:pointer;
  transition:opacity .16s,background .16s,border-color .16s;
}
.hud-toggle-btn[hidden]{display:none!important}
body.game-active .hud,
body.game-active .hud-toggle-btn,
body.game-active #pauseBtn,
body.game-active #endDiveBtn,
body.game-active #roomBadge,
body.game-active #selectedSkillsPanel,
body.game-active #runEnergyRanking,
body.game-active #activeAbilities,
body.game-active #skillDescriptionTooltip,
body.game-active #mobileTip,
body.game-active #mobileJoystick{
  opacity:.6!important;
  transition:opacity .16s ease;
}
body.game-active .hud-toggle-btn:hover,
body.game-active .hud-toggle-btn:focus-visible,
body.game-active #pauseBtn:hover,
body.game-active #endDiveBtn:hover,
body.game-active #roomBadge:hover,
body.game-active #activeAbilities .active-ability:hover{
  opacity:1!important;
}
body.hud-collapsed #selectedSkillsPanel,
body.hud-collapsed #runEnergyRanking,
body.hud-collapsed #activeAbilities,
body.hud-collapsed #skillDescriptionTooltip,
body.hud-collapsed #mobileTip{
  display:none!important;
}
body.mobile-game-active .hud-toggle-btn{
  position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 64px);
  right:max(8px,env(safe-area-inset-right));
  z-index:46;width:32px;height:36px;
}
@media(max-width:700px){
  body.game-active .hud{opacity:.6!important}
  body.mobile-game-active .hud-toggle-btn{top:calc(max(8px,env(safe-area-inset-top)) + 63px)}
}
.payment-settings{display:grid;gap:8px;padding:12px;margin:12px 0;border:1px solid rgba(121,205,220,.2);background:rgba(2,12,20,.45);font-size:10px;color:#a9c8d0}.payment-settings>a,.payment-settings a{color:#8bdedc}.payment-settings select{max-width:240px}.legal-consent{display:flex;align-items:flex-start;gap:8px;line-height:1.5}.legal-consent input{margin:1px 0 0;accent-color:#79f3f0}.payment-settings small{color:#829eaa;line-height:1.5}.boss-bundle-card{grid-column:1/-1}

/* Keep a touch-accessible pause control after the mobile layout hides the top bar. */
.mobile-pause-btn{display:none;position:absolute;z-index:4;top:max(58px,calc(env(safe-area-inset-top) + 10px));right:max(56px,calc(env(safe-area-inset-right) + 56px));width:38px;height:38px;border:1px solid rgba(146,213,220,.32);border-radius:50%;background:rgba(4,17,29,.72);color:#d8ffff;font-size:16px;place-items:center;touch-action:manipulation}
@media(max-width:700px){body.game-active #mobilePauseBtn{display:grid}body.game-active #mobilePauseBtn[hidden]{display:none!important}}

/* Boss bundle showcase: animated abyssal halo, kept lightweight for mobile. */
.boss-bundle-card{position:relative;isolation:isolate;overflow:hidden;border-color:rgba(92,239,224,.42);background:radial-gradient(ellipse at 50% 0%,rgba(36,177,170,.18),transparent 58%),linear-gradient(145deg,rgba(9,36,49,.98),rgba(5,17,29,.98));box-shadow:inset 0 0 32px rgba(57,216,196,.06),0 0 24px rgba(57,216,196,.06)}
.boss-bundle-aura{position:absolute;right:12px;top:8px;font-size:44px;line-height:1;color:#70f4e3;opacity:.75;filter:drop-shadow(0 0 12px rgba(57,216,196,.8));animation:bossBundlePulse 3.2s ease-in-out infinite;pointer-events:none}
.boss-bundle-list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin:14px 0;padding:0;list-style:none;color:#c9f7f0;font-size:12px}
.boss-bundle-list li{padding:7px 8px;border:1px solid rgba(103,226,217,.16);border-radius:8px;background:rgba(4,18,29,.55)}
.boss-bundle-count{color:var(--cyan);font:11px 'DM Mono',monospace;letter-spacing:.06em}
@keyframes bossBundlePulse{0%,100%{transform:rotate(-8deg) scale(.92);opacity:.58}50%{transform:rotate(12deg) scale(1.08);opacity:1}}
@media(max-width:600px){.boss-bundle-list{grid-template-columns:1fr}.boss-bundle-aura{font-size:34px}}
@media(prefers-reduced-motion:reduce){.boss-bundle-aura{animation:none}}


/* 3.6.0 — legibilidade, foco de teclado e alvos de toque consistentes. */
:root{
  --abyss-text:#eefcff;
  --abyss-muted:#b4cbd4;
  --abyss-accent:#8df8ef;
  --abyss-focus:#fff0a6;
}
:where(button,a,input,select,textarea,[role="button"]):focus-visible{
  outline:3px solid var(--abyss-focus)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 4px rgba(4,17,29,.9),0 0 18px rgba(255,240,166,.35)!important;
}
:where(button,a,[role="button"]){ -webkit-tap-highlight-color:transparent; }
.skin-card p,.skin-card .skin-ability,.meta-card p{
  color:var(--abyss-muted);
  font-size:clamp(12px,.88rem,14px);
  line-height:1.55;
  overflow-wrap:anywhere;
}
.skin-card .skin-ability{
  padding:9px 10px;
  border:1px solid rgba(141,248,239,.22);
  border-radius:9px;
  background:rgba(3,17,28,.72);
  color:#e0f5f8;
}
.skin-card .skin-ability b{
  display:inline-block;
  margin-right:4px;
  color:var(--abyss-accent);
  font-size:11px;
  letter-spacing:.08em;
}
.skin-card button,.meta-card button,.active-ability{
  min-height:42px;
  touch-action:manipulation;
}
  color:#b4cbd4;
}
:where(.hud-stat small,.bar-label,.eyebrow,.meta-kicker){
  color:#c1d7df;
}
@media(max-width:700px){
  .skin-card button,.meta-card button{min-height:46px}
  .skin-card p,.skin-card .skin-ability,.meta-card p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* Responsive store cards: keep long ability descriptions readable on phones and narrow windows. */
.meta-upgrade-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:stretch}
.meta-card{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;gap:10px;min-width:0}
.meta-card-icon{grid-column:1;grid-row:1;align-self:start}
.meta-card-copy{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
.meta-card-copy strong{display:block;font-size:clamp(11px,1.5vw,13px);line-height:1.35;overflow-wrap:anywhere}
.meta-card-copy p{font-size:clamp(10px,1.25vw,12px);line-height:1.55;white-space:normal;overflow-wrap:anywhere;min-height:0;margin:7px 0 2px}
.meta-card>button{grid-column:1/-1;width:100%;min-width:0;white-space:normal;line-height:1.35;padding:10px 8px}
@media(max-width:700px){
 .shop-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px;overflow-x:hidden}
 .shop-heading{align-items:flex-start;gap:8px}
 .shop-heading h2{font-size:clamp(22px,7vw,32px)}
 .shop-heading p{font-size:11px;line-height:1.5}
 .skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .skin-card{padding:9px}
 .skin-card p{font-size:10px;line-height:1.45;min-height:0;overflow-wrap:anywhere}
 .meta-upgrade-grid{grid-template-columns:minmax(0,1fr);gap:9px}
 .meta-card{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:11px}
 .meta-card-copy p{font-size:11px;line-height:1.6}
 .meta-card>button{font-size:10px}
 .payment-settings{min-width:0}
 .payment-settings label,.payment-settings small{overflow-wrap:anywhere;line-height:1.5}
}
@media(min-width:701px) and (max-width:980px){
 .meta-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .meta-card-copy p{font-size:11px}
}


/* Keep long skill descriptions contained within the visible viewport. */
#skillDescriptionTooltip,.skill-description-tooltip{box-sizing:border-box;width:max-content;max-width:min(280px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow-x:hidden;overflow-y:auto;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.5;padding:10px 12px;}
#skillDescriptionTooltip span,.skill-description-tooltip span{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal;}


/* Loja de skins: as descrições e habilidades permanecem dentro de cada card. */
#skinGrid.skin-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:stretch;min-width:0;width:100%}
#skinGrid .skin-card{box-sizing:border-box;min-width:0;width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:stretch}
#skinGrid .skin-card>strong,#skinGrid .skin-card>p,#skinGrid .skin-card .skin-ability{box-sizing:border-box;min-width:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal}
#skinGrid .skin-card>p{flex:0 0 auto}
#skinGrid .skin-card .skin-ability{flex:1 0 auto;overflow:hidden;line-height:1.5}
#skinGrid .skin-card .skin-ability b{max-width:100%;white-space:normal;overflow-wrap:anywhere}
#skinGrid .skin-card>button{box-sizing:border-box;width:100%;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;margin-top:auto}
@media(max-width:700px){
 #skinGrid.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #skinGrid .skin-card{padding:9px}
 #skinGrid .skin-card>p,#skinGrid .skin-card .skin-ability{font-size:clamp(10px,2.8vw,12px);line-height:1.45}
}
@media(max-width:360px){
 #skinGrid.skin-grid{grid-template-columns:minmax(0,1fr)}
}


/* Loja de skins: preservar a área completa da ilustração, sem encolher o preview. */
#skinGrid .skin-preview{box-sizing:border-box;flex:0 0 126px!important;height:126px!important;min-height:126px;width:100%;overflow:hidden;display:grid;place-items:center}
#skinGrid .skin-preview-canvas{display:block;width:100%;height:auto!important;max-height:126px;max-width:100%;aspect-ratio:160/92;object-fit:contain;flex:none;align-self:center}
@media(max-width:700px){
 #skinGrid .skin-preview{flex-basis:112px!important;height:112px!important;min-height:112px}
}

/* Language preference control */
.language-setting{display:flex;align-items:center;gap:10px;margin:12px 0 8px;max-width:300px}.language-setting label{font:9px 'DM Mono',monospace;letter-spacing:.1em;color:#8fb7c5;white-space:nowrap}.language-setting select{max-width:150px;min-height:34px;padding:6px 9px;background:#071722;color:#dffbfa;border:1px solid rgba(121,243,240,.25);border-radius:7px;font:11px var(--abyssal-runic)}.payment-settings select{max-width:260px}


/* Language selector shares the menu's upper-right utility row with Download. */
#menuScreen .language-setting{position:absolute;top:12px;right:112px;z-index:10;display:flex;align-items:center;gap:7px;margin:0;max-width:none;padding:0}
#menuScreen .language-setting label{font-size:8px;letter-spacing:.07em}
#menuScreen .language-setting select{width:112px;max-width:112px;min-height:29px;height:29px;padding:4px 7px;font-size:10px;background:rgba(2,9,17,.9)}
@media(max-width:700px){#menuScreen .language-setting{top:7px;right:84px;gap:0}#menuScreen .language-setting label{display:none}#menuScreen .language-setting select{width:92px;max-width:92px;min-height:25px;height:25px;padding:3px 5px;font-size:9px}}
@media(max-width:390px){#menuScreen .language-setting{top:5px;right:78px}#menuScreen .language-setting select{width:86px;max-width:86px;min-height:23px;height:23px;font-size:8px}}

/* Fluxo de recuperação: modais enxutos, com a mesma identidade visual do Abyssal. */
.auth-flow-screen{z-index:8;background:rgba(2,10,17,.82);backdrop-filter:blur(12px);padding:18px}
.auth-flow-card{width:min(430px,100%);padding:clamp(24px,5vw,38px);border-color:rgba(121,243,240,.28);box-shadow:0 24px 90px rgba(0,0,0,.62),0 0 42px rgba(66,205,211,.08)}
.auth-flow-card h2{margin:18px 0 12px;font-size:clamp(34px,7vw,46px)}
.auth-flow-card>p:not(.auth-flow-message){margin:0 0 22px;color:#9bb7c1;font-size:13px;line-height:1.65}
.auth-flow-card .field-label{display:block;margin:0 0 8px;font:9px 'DM Mono',monospace;letter-spacing:.12em;color:#8fb7c5}
.auth-flow-card .text-field{width:100%;height:48px;margin:0 0 16px;padding:0 14px;border:1px solid rgba(146,213,220,.2);outline:none;background:rgba(3,15,24,.78);color:var(--text);font:13px var(--abyssal-runic)}
.auth-flow-card .text-field:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(121,243,240,.09)}
.auth-flow-card .primary-btn{width:100%;margin-top:5px;justify-content:center;gap:12px}
.auth-flow-card .secondary-btn{margin-top:10px}
.auth-flow-message{min-height:0;margin:0 0 10px;color:#9fe9df;font-size:11px;line-height:1.5}
.auth-flow-message:empty{display:none}
.auth-flow-message.is-error{color:#ff91a5}
@media(max-width:520px){.auth-flow-screen{padding:14px}.auth-flow-card{padding:24px 20px}.auth-flow-card h2{font-size:36px}}

/* Central de suporte */
.support-flow-card{width:min(500px,100%);max-height:calc(100% - 12px);overflow-y:auto}
.support-flow-card .text-field{display:block;width:100%;min-height:45px;margin:0 0 13px;padding:11px 13px;border:1px solid rgba(146,213,220,.2);border-radius:2px;background:rgba(3,15,24,.78);color:var(--text);font:12px var(--abyssal-runic)}
.support-flow-card select.text-field{appearance:auto;color-scheme:dark}
.support-flow-card textarea.text-field{min-height:112px;resize:vertical;line-height:1.55}
.support-flow-card .text-field:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(121,243,240,.09)}
.support-flow-card .field-label{display:block;margin:0 0 7px;font:9px 'DM Mono',monospace;letter-spacing:.12em;color:#8fb7c5}
.support-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
@media(max-height:720px){.support-flow-card{padding:20px}.support-flow-card h2{font-size:34px;margin:12px 0 8px}.support-flow-card>p:not(.auth-flow-message){margin-bottom:12px}.support-flow-card .text-field{margin-bottom:9px}.support-flow-card textarea.text-field{min-height:78px}}

/* ==========================================================================
   SISTEMA DE NOTIFICAÇÃO FLUTUANTE (SINO / NOTIFICATION BOX)
   ========================================================================== */
.hidden {
  display: none !important;
}

#notificationBox.menu-box {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 9999;
  width: min(340px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(121, 243, 240, 0.45);
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 55, 75, 0.95), rgba(4, 15, 25, 0.98));
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(121, 243, 240, 0.2);
  backdrop-filter: blur(14px);
  color: #e5fbf9;
  pointer-events: auto;
  animation: notifSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes notifSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#notificationBox .notification-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}

#notificationBox .notification-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #c7e8ee;
  word-break: break-word;
}

/* ==========================================================================
   CATÁLOGO ABISSAL - STATS VISUAIS, DIDÁTICA E BADGES
   ========================================================================== */
.codex-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0 4px;
}

.monster-stats-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  line-height: 1;
}

.stat-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.stat-hp {
  background: rgba(255, 75, 110, 0.16);
  border: 1px solid rgba(255, 75, 110, 0.4);
  color: #ff8ba3;
}

.stat-dmg {
  background: rgba(255, 175, 75, 0.16);
  border: 1px solid rgba(255, 175, 75, 0.4);
  color: #ffd085;
}

.codex-ability-box {
  margin-top: 9px;
  padding: 7px 9px;
  background: rgba(8, 28, 42, 0.7);
  border: 1px solid rgba(121, 243, 240, 0.22);
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.45;
}

.codex-ability-tag {
  display: inline-block;
  padding: 2px 4px;
  margin-right: 4px;
  background: rgba(121, 243, 240, 0.15);
  border-radius: 3px;
  color: var(--cyan);
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.codex-ability-text {
  color: #bcecf3;
}


/* Boss Progression Track HUD */
.boss-progression-track {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(10, 20, 32, 0.75);
  border: 1px solid rgba(76, 224, 209, 0.28);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  position: relative;
  user-select: none;
}
.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 6px;
}
.track-title {
  color: #8bebf6;
  text-shadow: 0 0 6px rgba(117, 248, 237, 0.4);
}
.track-cycle-badge {
  background: rgba(255, 180, 94, 0.18);
  border: 1px solid rgba(255, 180, 94, 0.55);
  color: #ffbc78;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9px;
  text-shadow: 0 0 4px rgba(255, 188, 120, 0.4);
}
.track-cycle-badge.maxed {
  background: rgba(46, 232, 138, 0.2);
  border-color: #2ee88a;
  color: #4efca0;
}
.track-line-wrapper {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}
.track-line-bg {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(18, 35, 52, 0.85);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.track-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1fa2ff, #12d8fa, #75f8ed);
  border-radius: 3px;
  box-shadow: 0 0 8px #75f8ed;
  transition: width 0.25s linear;
}
.track-boss-nodes {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}
.track-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d1a28;
  border: 2px solid #3a5568;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #4a6882;
  box-shadow: 0 0 6px rgba(0,0,0,0.8);
  transition: all 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: auto;
  cursor: default;
  z-index: 2;
}
.track-node .boss-node-svg {
  width: 16px;
  height: 16px;
  display: block;
}
.track-node.pending {
  border-color: #3a5568;
  color: #3a5568;
  opacity: 0.55;
}
.track-node.pending .boss-node-svg { color: #3a5568; }
.track-node.next {
  border-color: #ffd700;
  background: #1a140a;
  color: #ffd700;
  box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,180,0,0.25);
  animation: nodeNextPulse 1.4s ease-in-out infinite;
}
.track-node.next .boss-node-svg { color: #ffd700; }
.track-node.active {
  border-color: #ff315f;
  background: #2a0612;
  color: #ff315f;
  box-shadow: 0 0 16px #ff315f, 0 0 30px rgba(255,49,95,0.4);
  animation: nodeAlertPulse 0.9s ease-in-out infinite;
  width: 34px;
  height: 34px;
}
.track-node.active .boss-node-svg { color: #ff4775; width: 20px; height: 20px; }
.track-node.defeated {
  border-color: #22c55e;
  background: #081a0e;
  color: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.4);
  opacity: 0.85;
}
@keyframes nodeNextPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.4), 0 0 16px rgba(255,180,0,0.2); transform: translate(-50%,-50%) scale(1); }
  50% { box-shadow: 0 0 16px rgba(255,215,0,0.7), 0 0 30px rgba(255,180,0,0.35); transform: translate(-50%,-50%) scale(1.12); }
}

.track-player-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 4;
  transition: left 0.25s linear;
}
.marker-dot {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border: 2px solid #75f8ed;
  border-radius: 50%;
  box-shadow: 0 0 8px #75f8ed;
}
.marker-pulse {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #75f8ed;
  animation: markerPing 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes nodeAlertPulse {
  0% { box-shadow: 0 0 6px #ff315f; }
  100% { box-shadow: 0 0 16px #ff315f, 0 0 24px rgba(255, 49, 95, 0.6); }
}
@keyframes markerPing {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
.stat-spd {
  background: rgba(117, 248, 237, 0.12);
  border: 1px solid rgba(117, 248, 237, 0.4);
  color: #75f8ed;
}

/* ==========================================================================
   VOLUME CONTROL POPUP & SLIDER
   ========================================================================== */
.sound-control-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.volume-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(8, 22, 34, 0.95);
  border: 1px solid rgba(121, 243, 240, 0.45);
  border-radius: 10px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 72px minmax(110px, 1fr) 38px;
  align-items: center;
  gap: 10px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8), 0 0 16px rgba(121, 243, 240, 0.2);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
  width: min(310px, calc(100vw - 28px));
}
.volume-channel { display:flex; align-items:center; gap:6px; color:#9fc8cf; font:700 9px 'DM Mono',monospace; letter-spacing:.08em; white-space:nowrap; }
#volumeSlider, #musicVolumeSlider { width:100%; min-width:0; }
@media (max-width:700px){.volume-popup{left:auto;right:-42px;transform:translateY(-6px);width:min(290px,calc(100vw - 20px));}.sound-control-wrapper:hover .volume-popup,.sound-control-wrapper:focus-within .volume-popup,.volume-popup.active{transform:translateY(0);}}

.sound-control-wrapper:hover .volume-popup,
.sound-control-wrapper:focus-within .volume-popup,
.volume-popup.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.volume-icon {
  font-size: 14px;
  color: #79f3f0;
}
#volumeSlider, #musicVolumeSlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #143547;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
#volumeSlider::-webkit-slider-thumb, #musicVolumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #75f8ed;
  border-radius: 50%;
  box-shadow: 0 0 8px #75f8ed;
  cursor: pointer;
}
#volumeSlider::-moz-range-thumb, #musicVolumeSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #75f8ed;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 8px #75f8ed;
  cursor: pointer;
}
.volume-text {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #c7e8ee;
  min-width: 32px;
  text-align: right;
}

/* NOTIFICATION ITEM & TRASH BUTTON */
.notification-item:last-child {
  margin-bottom: 0;
}
.notif-del-btn:hover {
  background: rgba(255, 82, 119, 0.2);
  transform: scale(1.15);
}
.notifications-clear-all:hover {
  background: rgba(255, 110, 140, 0.18);
}
/* BOSS NODE REALISTIC SVG ICONS */
.boss-node-svg {
  width: 14px;
  height: 14px;
  display: block;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}
.track-node {
  width: 20px;
  height: 20px;
}

/* ===== ALERTA DE PERIGO ABISSAL ===== */
#abyssalDangerAlert {
  position: absolute;
  z-index: 100;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  width: min(720px, calc(100% - 24px));
}
#abyssalDangerAlert.adanger-visible {
  animation: abyssalDangerSequence 6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#abyssalDangerAlert.adanger-fadeout {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
@keyframes abyssalDangerSequence {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1.04);
  }
  8%, 50% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.96) translateY(12px);
  }
}
.adanger-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: linear-gradient(110deg, rgba(100,0,20,0.97), rgba(60,3,8,0.95), rgba(90,0,25,0.97));
  border: 1.5px solid rgba(255,60,80,0.85);
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(255,20,55,0.45), 0 0 80px rgba(200,0,30,0.22), inset 0 0 30px rgba(255,30,60,0.08);
  text-align: center;
  backdrop-filter: blur(10px);
}
.adanger-icon {
  font-size: 26px;
  color: #ff3a5a;
  text-shadow: 0 0 18px rgba(255,60,90,0.9);
  animation: adanger-pulse 0.6s ease infinite alternate;
  flex-shrink: 0;
}
.adanger-icon-r { transform: scaleX(-1); }
@keyframes adanger-pulse {
  0%  { text-shadow: 0 0 12px rgba(255,60,90,0.7); opacity: 0.85; }
  100%{ text-shadow: 0 0 32px rgba(255,60,90,1); opacity: 1; }
}
.adanger-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.adanger-title {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: clamp(13px, 2.5vw, 20px);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff0f2;
  text-shadow: 0 0 22px rgba(255,50,80,0.9);
  line-height: 1.1;
}
.adanger-sub {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: 0.12em;
  color: #ff9aaa;
  line-height: 1.5;
  margin-top: 2px;
}

/* ===== PAINEL DE NOTIFICAÇÕES ===== */
#notifPanel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 10, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
  overflow-y: auto;
}
#notifPanel[hidden] {
  display: none !important;
}
#notifPanelInner {
  background: linear-gradient(170deg, #050d18, #090f1e, #080c1a);
  border: 1px solid rgba(44, 100, 160, 0.5);
  border-radius: 10px;
  width: min(560px, calc(100vw - 24px));
  margin: 40px auto 40px;
  box-shadow: 0 0 60px rgba(0, 60, 120, 0.5), 0 0 120px rgba(0, 30, 80, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#notifPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(44, 100, 160, 0.35);
  background: rgba(0, 20, 50, 0.6);
}
#notifPanelTitle {
  font-family: 'Exo 2', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #79f3f0;
  text-transform: uppercase;
}
#notifPanelClose {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: #8ab4cc;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}
#notifPanelClose:hover { background: rgba(255,50,80,0.2); color: #ff6080; border-color: rgba(255,50,80,0.5); }
#notifPanelSub {
  font-size: 11px;
  color: #4a7090;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(44, 100, 160, 0.2);
}
#notifPanelList {
  padding: 12px 16px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#notifPanelList::-webkit-scrollbar { width: 6px; }
#notifPanelList::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
#notifPanelList::-webkit-scrollbar-thumb { background: rgba(44,120,180,0.4); border-radius: 3px; }
.notif-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(44, 100, 160, 0.25);
  border-radius: 7px;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  transition: background 0.2s;
}
.notif-item:hover { background: rgba(255,255,255,0.07); }
.notif-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notif-item-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #79f3f0;
  text-transform: uppercase;
  flex: 1;
}
.notif-item-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #4a6080;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.2s;
  border-radius: 4px;
}
.notif-item-del:hover { color: #ff4060; background: rgba(255,40,60,0.1); }
.notif-item-msg {
  font-size: 12px;
  color: #b0cfe0;
  line-height: 1.5;
  margin: 0;
}
.notif-item-time {
  font-size: 10px;
  color: #3a5068;
  margin-top: 2px;
}
.notif-empty {
  text-align: center;
  padding: 40px 20px;
  color: #3a5070;
  font-size: 13px;
  line-height: 1.7;
}
.notif-empty-icon { font-size: 32px; display: block; margin-bottom: 10px; opacity: 0.5; }
.notif-clear-all {
  margin: 0 16px 14px;
  padding: 8px 16px;
  background: rgba(255, 40, 60, 0.12);
  border: 1px solid rgba(255, 40, 60, 0.35);
  color: #ff6080;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  width: calc(100% - 32px);
}
.notif-clear-all:hover { background: rgba(255, 40, 60, 0.22); }
/* Indicador de notificações: bolinha vermelha sobreposta ao sino */
#notifBtn {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
#notifBtn:hover {
  transform: scale(1.06);
  border-color: var(--cyan, #79f3f0);
  box-shadow: 0 0 15px rgba(121, 243, 240, 0.4);
}
#notifBtn.has-unread::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 2px;
  z-index: 2147483647;
  display: block;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff1744;
  box-shadow: 0 0 0 2px rgba(255, 23, 68, .32), 0 0 12px #ff1744;
  pointer-events: none;
  transform-origin: center;
  animation: notifBadgePop 0.4s cubic-bezier(0.18,0.89,0.32,1.28);
}
@keyframes notifBadgePop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}


/* Abyssal: controles Q/E centralizados na parte inferior em PC e mobile. */
body.game-active #activeAbilities.active-abilities,
body.mobile-game-active #activeAbilities.active-abilities {
  position:fixed!important;top:auto!important;left:50%!important;right:auto!important;
  bottom:max(54px,calc(env(safe-area-inset-bottom) + 46px))!important;transform:translateX(-50%)!important;
  width:max-content!important;max-width:calc(100% - 24px)!important;display:flex!important;
  flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:8px!important;z-index:35!important;
}
body.game-active #activeAbilities .active-ability,
body.mobile-game-active #activeAbilities .active-ability {
  width:auto!important;min-width:108px!important;max-width:min(42vw,190px)!important;white-space:nowrap!important;
}
@media(max-width:700px) {
  body.mobile-game-active #activeAbilities.active-abilities {bottom:max(54px,calc(env(safe-area-inset-bottom) + 46px))!important;gap:6px!important;}
  body.mobile-game-active #activeAbilities .active-ability {min-width:0!important;min-height:38px!important;padding:7px 9px!important;font-size:7px!important;}
}

/* Controles selecionáveis */
#controlsBtn.controls-cta{width:min(300px,100%);margin-top:6px;justify-content:center;gap:12px;border-color:rgba(255,103,112,.35);background:linear-gradient(110deg,rgba(67,25,37,.9),rgba(26,34,59,.94));}
.controls-card h3{margin:15px 0 7px;color:#9dfff4;font:700 11px 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase}.controls-card .control-choice{width:100%;height:auto;min-height:42px;margin:5px 0;padding:10px 12px;justify-content:flex-start;text-align:left;line-height:1.45;font-size:11px}.controls-card .control-choice.control-choice-active{border-color:#79f3f0;background:rgba(23,110,119,.35);box-shadow:inset 0 0 0 1px rgba(121,243,240,.2)}.controls-card #controlsCloseBtn{width:100%;margin-top:14px}
.mobile-dual-stick{display:none;position:fixed;z-index:31;bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:150px;touch-action:none;user-select:none;-webkit-user-select:none;align-items:center;justify-content:flex-end;flex-direction:column;gap:5px;pointer-events:auto;opacity:.6}.mobile-dual-stick .joystick-base{width:112px;height:112px;background:rgba(0,0,0,.98);border:1px solid rgba(0,0,0,.95);box-shadow:inset 0 0 18px rgba(0,0,0,.8)}.mobile-dual-stick .joystick-knob{width:46px;height:46px;background:rgba(15,15,15,.95);border:1px solid rgba(255,255,255,.55);box-shadow:none}.mobile-dual-stick small{font:800 8px 'DM Mono',monospace;letter-spacing:.14em;color:#fff;text-shadow:0 1px 3px #000}.mobile-dual-stick.aim-stick .joystick-base{background:rgba(120,0,12,.98);border-color:rgba(255,65,80,.9);box-shadow:inset 0 0 18px rgba(255,0,25,.3)}.mobile-dual-stick.aim-stick .joystick-knob{background:rgba(230,15,35,.95);border-color:rgba(255,150,160,.8)}.mobile-dual-stick.dual-stick-visible{display:flex}.mobile-dual-stick.move-stick{left:max(8px,env(safe-area-inset-left))}.mobile-dual-stick.aim-stick{right:max(8px,env(safe-area-inset-right))}@media(max-height:520px) and (max-width:900px){.mobile-dual-stick{width:110px;height:124px}.mobile-dual-stick .joystick-base{width:90px;height:90px}.mobile-dual-stick .joystick-knob{width:38px;height:38px}}

/* CONTROLES fica abaixo de BAIXAR, alinhado à direita e com espaço visível. */
#menuScreen .controls-cta{
 position:absolute;top:48px;right:14px;z-index:9;
 width:auto;min-width:0;min-height:29px;height:29px;margin:0;padding:5px 10px;
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 border-radius:5px;font-size:10px;line-height:1;
}
@media(max-width:700px){
 #menuScreen .controls-cta{top:47px;right:7px;z-index:11;min-height:25px;height:25px;padding:4px 7px;font-size:9px;}
}
@media(max-width:390px){
 #menuScreen .controls-cta{top:41px;right:5px;min-height:23px;height:23px;padding:3px 6px;font-size:8px;}
}

.resonance-menu-btn{display:flex;width:min(300px,100%);height:38px;margin:9px 0 0;align-items:center;justify-content:space-between;padding:0 13px;border:1px solid rgba(161,105,255,.55);background:linear-gradient(110deg,rgba(68,28,112,.8),rgba(7,31,54,.9));color:#d7b5ff;letter-spacing:.08em;font-size:10px}.resonance-menu-btn span{font-size:8px;color:#8fece4}.resonance-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 8px}.resonance-mode-tabs button{min-height:38px;font-size:10px}.resonance-selection-count{font:11px 'DM Mono',monospace;color:#8fece4;margin:10px 0}.resonance-skill-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;text-align:left}.resonance-skill-option{display:flex;gap:8px;align-items:center;min-height:42px;padding:8px;border:1px solid rgba(133,205,218,.18);border-radius:8px;background:rgba(5,19,31,.65);color:#d9faff;font-size:11px}.resonance-skill-option input{accent-color:#79f3f0;width:16px;height:16px;flex:none}.resonance-skill-option:has(input:checked){border-color:rgba(121,243,240,.65);background:rgba(22,78,91,.45)}.resonance-modal{max-height:min(92vh,900px);overflow:auto;width:min(760px,94vw)}.resonance-skill-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.resonance-skill-option{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid rgba(105,230,213,.22);border-radius:10px;background:rgba(5,24,36,.68);min-width:0}.resonance-skill-option input{flex:0 0 auto;margin-top:4px;accent-color:#69e6d5}.resonance-skill-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.resonance-skill-copy strong{font-size:12px;line-height:1.3;color:#bafff6}.resonance-skill-copy small{font-size:11px;line-height:1.45;color:#c0d4df;font-weight:400}.resonance-modal.resonance-pvp-theme{border-color:rgba(255,75,95,.8);background:linear-gradient(160deg,rgba(47,8,20,.98),rgba(17,10,23,.98) 60%,rgba(37,8,16,.98));box-shadow:0 0 0 1px rgba(255,75,95,.18),0 18px 70px rgba(100,8,28,.35)}.resonance-modal.resonance-pvp-theme .eyebrow,.resonance-modal.resonance-pvp-theme h2 em{color:#ff6578}.resonance-modal.resonance-pvp-theme .resonance-skill-option{border-color:rgba(255,75,95,.28);background:rgba(47,10,22,.72)}.resonance-modal.resonance-pvp-theme .resonance-skill-copy strong{color:#ffd0d5}.resonance-modal.resonance-pvp-theme .resonance-skill-copy small{color:#f0bdc6}.resonance-modal.resonance-pvp-theme .resonance-skill-option input{accent-color:#ff4b5f}.resonance-modal.resonance-pvp-theme [data-resonance-mode="pvp"],.resonance-modal.resonance-pvp-theme #saveResonanceBtn{background:linear-gradient(135deg,#b51f3c,#f0445d);border-color:#ff6a7e;color:#fff}.resonance-modal.resonance-pvp-theme [data-resonance-mode="pve"]{background:rgba(5,24,36,.72);border-color:rgba(105,230,213,.28);color:#bafff6}@media(max-width:700px){.resonance-skill-choices{grid-template-columns:1fr}.resonance-modal{padding:18px;width:96vw}.resonance-menu-btn{margin-top:8px}.resonance-skill-option{padding:10px}.resonance-skill-copy small{font-size:10px}}


/* Resonance category groups and Abyssario creature catalog subtitle */
.resonance-skill-choices{display:flex;flex-direction:column;gap:14px}.resonance-category{min-width:0}.resonance-category-title{margin:5px 0 8px;padding:7px 9px;border-left:2px solid #69e6d5;background:rgba(38,103,112,.2);color:#9ff8ee;font:600 10px 'DM Mono',monospace;letter-spacing:.1em}.resonance-category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .catalog-subtitle{display:block;margin:8px 0 15px;color:#8fece4;font:10px 'DM Mono',monospace;letter-spacing:.2em;text-transform:uppercase}.codex-modal h2:has(+ .catalog-subtitle){margin-bottom:0}
@media(max-width:520px){.resonance-category-list{grid-template-columns:1fr}}

/* Abyssal deep-sea identity pass: menu + resonance */
#menuScreen{
 background:
  radial-gradient(circle at 72% 18%,rgba(31,138,156,.14),transparent 30%),
  radial-gradient(circle at 18% 82%,rgba(68,38,126,.18),transparent 34%),
  linear-gradient(145deg,#020914 0%,#031321 42%,#061126 72%,#020711 100%);
}
#menuScreen .menu-content{width:min(430px,92vw)}
#menuScreen .menu-secondary-actions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:min(430px,100%);
 margin-top:10px;padding:10px;border:1px solid rgba(70,189,202,.14);border-radius:14px;
 background:linear-gradient(145deg,rgba(3,20,32,.72),rgba(6,13,31,.82));
 box-shadow:inset 0 1px 0 rgba(154,246,244,.04),0 16px 50px rgba(0,4,12,.2);
}
#menuScreen .menu-secondary-actions .menu-action{
 width:100%;min-width:0;margin:0;border-color:rgba(75,174,193,.22);
 background:linear-gradient(135deg,rgba(5,35,49,.86),rgba(8,19,39,.9));
 color:#c8f7f3;
}
#menuScreen .menu-secondary-actions .online-cta{grid-column:1/-1;border-color:rgba(79,229,218,.42);background:linear-gradient(120deg,rgba(6,63,70,.88),rgba(10,28,52,.94))}
#menuScreen .resonance-menu-btn{
 width:min(430px,100%);height:44px;border-color:rgba(116,108,224,.52);
 background:linear-gradient(110deg,rgba(30,34,91,.9),rgba(7,54,67,.9));
 box-shadow:0 0 24px rgba(61,168,186,.09);color:#d8dcff;
}
.resonance-modal{
 width:min(900px,96vw);max-height:92vh;padding:26px;
 border:1px solid rgba(78,217,210,.38);
 background:
  radial-gradient(circle at 88% 0%,rgba(75,81,190,.2),transparent 28%),
  linear-gradient(155deg,rgba(2,14,25,.985),rgba(3,29,39,.985) 58%,rgba(7,13,35,.99));
 box-shadow:0 0 0 1px rgba(84,235,224,.05),0 28px 90px rgba(0,3,12,.7);
}
.resonance-category{padding:10px;border:1px solid rgba(94,193,204,.1);border-radius:14px;background:rgba(1,12,22,.36)}
.resonance-category-title{border-left:0!important;border-bottom:1px solid rgba(92,223,214,.2)!important;background:none!important;padding:5px 3px 9px!important;color:#8ef0e5!important}
.resonance-category-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.resonance-skill-option{
 position:relative;display:grid!important;grid-template-columns:20px 48px minmax(0,1fr);align-items:center!important;
 min-height:76px!important;padding:10px 12px!important;overflow:hidden;
 border:1px solid rgba(88,178,194,.2)!important;border-radius:12px!important;
 background:linear-gradient(135deg,rgba(5,28,41,.88),rgba(6,18,34,.9))!important;
 transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
.resonance-skill-option:hover{transform:translateY(-1px);border-color:rgba(115,231,224,.48)!important}
.resonance-skill-option:has(input:checked){border-color:#67e8d8!important;box-shadow:inset 0 0 0 1px rgba(103,232,216,.18),0 0 22px rgba(57,193,188,.1)}
.resonance-skill-icon{
 width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
 font:700 21px 'DM Mono',monospace;color:#d9fffb;border:1px solid rgba(116,237,227,.34);
 background:radial-gradient(circle,rgba(50,175,172,.22),rgba(7,30,45,.8));
 box-shadow:inset 0 0 14px rgba(88,235,225,.08);
}
.resonance-shots .resonance-skill-icon{color:#9dfcff;border-color:rgba(84,215,255,.42);background:radial-gradient(circle,rgba(45,144,192,.28),rgba(6,27,46,.82))}
.resonance-defensive .resonance-skill-icon{color:#b8d6ff;border-color:rgba(121,151,255,.4);background:radial-gradient(circle,rgba(75,85,190,.28),rgba(10,20,48,.84))}
.resonance-passive .resonance-skill-icon{color:#d4b9ff;border-color:rgba(178,121,255,.4);background:radial-gradient(circle,rgba(116,65,176,.26),rgba(24,15,50,.84))}
.resonance-skill-copy strong{color:#dffffb!important;font-size:11px!important;letter-spacing:.035em}
.resonance-skill-copy small{color:#91acb9!important;font-size:10px!important;line-height:1.35!important}
.resonance-skill-option input{appearance:none;width:16px!important;height:16px!important;border-radius:50%;border:1px solid #557987;background:#071622;margin:0!important}
.resonance-skill-option input:checked{border:4px solid #0b2d32;background:#69e6d5;box-shadow:0 0 10px rgba(105,230,213,.5)}
.resonance-selection-count{padding:8px 11px;border-radius:8px;background:rgba(4,27,39,.75);border:1px solid rgba(91,211,205,.18)}
#upgradeScreen .modal-card{background:linear-gradient(155deg,rgba(2,13,24,.985),rgba(4,31,40,.98),rgba(10,14,38,.985));border-color:rgba(87,211,207,.3)}
#upgradeScreen .upgrade-card{background:linear-gradient(145deg,rgba(5,29,41,.95),rgba(8,17,36,.96));border-color:rgba(82,187,199,.24)}
#upgradeScreen .upgrade-card:hover{border-color:rgba(101,235,224,.58);box-shadow:0 10px 34px rgba(0,8,18,.38)}
@media(max-width:700px){
 #menuScreen .menu-secondary-actions{grid-template-columns:1fr 1fr;padding:7px}
 .resonance-category-list{grid-template-columns:1fr}
 .resonance-modal{padding:17px}
 .resonance-skill-option{grid-template-columns:18px 42px minmax(0,1fr);min-height:68px!important}
 .resonance-skill-icon{width:36px;height:36px;font-size:18px}
}

/* Interface audit v4: one deep-sea design system for boxes, menus and responsive overlays */
:root{--abyss-0:#020711;--abyss-1:#04111e;--abyss-2:#062333;--abyss-panel:rgba(4,19,31,.94);--abyss-panel-2:rgba(7,28,42,.9);--abyss-line:rgba(105,220,218,.2);--abyss-cyan:#78eee3;--abyss-blue:#77a8ff;--abyss-violet:#b59cff;--abyss-danger:#ff5878;--abyss-gold:#e7c978;--abyss-text:#dff9f7;--abyss-muted:#87a8b3}
.modal-card,.codex-modal,.profile-modal,.room-modal,.controls-card,#notifPanelInner,.support-flow-card{
 border:1px solid var(--abyss-line)!important;border-radius:16px!important;
 background:radial-gradient(circle at 90% 0%,rgba(65,80,151,.12),transparent 28%),linear-gradient(150deg,var(--abyss-panel),rgba(3,12,25,.98))!important;
 box-shadow:0 24px 72px rgba(0,3,10,.62),inset 0 1px 0 rgba(173,255,250,.035)!important;
}
.modal-card{width:min(760px,94vw);max-height:min(90vh,900px);overflow:auto;padding:clamp(18px,3vw,30px)}
.modal-card h2{max-width:18ch}.modal-card>p{max-width:68ch;color:var(--abyss-muted);line-height:1.6}
.primary-btn,.secondary-btn,.menu-action,.control-choice{border-radius:10px;min-height:42px}
.secondary-btn,.control-choice{background:linear-gradient(135deg,rgba(6,35,49,.8),rgba(7,17,35,.9));border-color:rgba(101,194,204,.2);color:#cdeeed}
.primary-btn{background:linear-gradient(110deg,#176c78,#31577f);border-color:rgba(121,243,240,.42);box-shadow:0 8px 25px rgba(13,91,105,.18)}
.text-field{border-radius:9px!important;border-color:rgba(105,205,211,.22)!important;background:rgba(2,13,24,.82)!important;color:var(--abyss-text)!important}
.catalog-grid,.profile-stats,.meta-upgrade-grid,.room-list,.ranking-content{gap:12px}
.codex-card,.profile-stat,.meta-upgrade-card,.room-card,.ranking-section{
 border:1px solid rgba(100,194,204,.16)!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(6,29,41,.78),rgba(5,16,31,.86))!important;
}
.ranking-section{padding:14px}.ranking-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(102,205,207,.12);padding-bottom:9px;margin-bottom:8px}
.ranking-section-head h3{margin:0;color:var(--abyss-text)}.ranking-reset{font:700 8px 'DM Mono',monospace;letter-spacing:.08em;color:var(--abyss-muted);text-align:right}.ranking-countdown{color:var(--abyss-cyan)}
.ranking-row{display:grid!important;grid-template-columns:44px minmax(100px,1fr) auto;align-items:center;gap:8px;min-height:34px;border-bottom:1px solid rgba(108,184,194,.07)}
.rank-place{color:var(--abyss-gold)}.rank-time{text-align:right;color:#91b5c0}
#notifBtn{position:relative}
#notifBtn.has-unread::after{content:'';position:absolute;right:5px;top:4px;width:8px;height:8px;border-radius:50%;background:#ff405f;border:2px solid #07121f;box-shadow:0 0 9px rgba(255,64,95,.85);animation:notifBeacon 1.45s ease-in-out infinite}
#notifBtn.has-unread{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,77,105,.25)}
@keyframes notifBeacon{50%{transform:scale(.72);opacity:.55}}
.boss-alert[data-notice-kind="fusion"]{border-color:rgba(177,133,255,.8);background:linear-gradient(100deg,rgba(18,8,38,.96),rgba(54,25,91,.9),rgba(5,30,43,.96));box-shadow:0 0 30px rgba(159,101,255,.25)}
.boss-alert[data-notice-kind="fusion"] .boss-alert-kicker{color:#d8baff}.boss-alert[data-notice-kind="fusion"] strong{color:#f2eaff;text-shadow:0 0 22px rgba(172,113,255,.8)}
.boss-alert[data-notice-kind="join"]{border-color:rgba(92,229,211,.65);background:linear-gradient(100deg,rgba(3,27,33,.96),rgba(8,65,68,.88),rgba(5,18,35,.96))}
.boss-alert[data-notice-kind="join"] .boss-alert-kicker{color:#8ff3e6}.boss-alert[data-notice-kind="join"] strong{color:#dffff8;text-shadow:0 0 18px rgba(85,232,214,.6)}
.boss-alert[data-notice-kind="death"]{border-color:rgba(143,153,177,.55);background:linear-gradient(100deg,rgba(6,8,15,.97),rgba(32,35,47,.92),rgba(8,12,24,.97));filter:saturate(.65)}
.boss-alert[data-notice-kind="death"] .boss-alert-kicker{color:#aeb8ca}.boss-alert[data-notice-kind="death"] strong{color:#d7dce7;text-shadow:0 0 16px rgba(130,141,164,.45)}
@media(max-width:700px){
 .modal-card{width:calc(100vw - 18px);max-height:calc(100dvh - 72px);padding:16px;border-radius:13px!important}
 .catalog-grid,.profile-stats,.meta-upgrade-grid{grid-template-columns:1fr!important}
 .ranking-section{padding:10px}.ranking-section-head{align-items:flex-start}.ranking-row{grid-template-columns:36px 1fr}.rank-time{grid-column:2;text-align:left;font-size:8px}
 .boss-alert{top:12%;width:calc(100% - 20px);padding:14px 16px}
}
@media(max-width:430px){.menu-secondary-actions{grid-template-columns:1fr!important}.menu-secondary-actions .online-cta{grid-column:auto!important}}


/* ==========================================================================
   UI COHERENCE LAYER · 2026-11
   Mantém boxes, menus e formulários legíveis e responsivos sem descaracterizar o Abyssal.
   ========================================================================== */
.modal-card,.codex-modal,.cardumes-modal,.profile-modal,.shop-modal,.controls-card,.support-flow-card{
  box-sizing:border-box;
  width:min(var(--modal-width,760px),calc(100vw - 32px));
  max-height:min(88dvh,900px);
  overflow:auto;
  scrollbar-gutter:stable;
  border-radius:14px;
}
.modal-card>h2,.codex-modal>h2,.cardumes-modal>h2,.profile-modal>h2,.shop-modal>h2{
  text-wrap:balance;
}
.room-form-row,.meta-upgrade-grid,.catalog-grid,.skin-grid{
  align-items:stretch;
}
.text-field,select.text-field,textarea.text-field,.secondary-btn,.primary-btn,.room-join-btn,.control-choice{
  box-sizing:border-box;
  min-width:0;
}
.text-field:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(121,243,240,.9);
  outline-offset:2px;
}
.ranking-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ranking-reset{
  font:700 8px 'DM Mono',monospace;
  letter-spacing:.08em;
  color:#b9d9e2;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.ranking-countdown{color:#d9c4ff}
.notification-badge-dot{
  position:absolute;
  top:1px;
  right:2px;
  z-index:20;
  width:13px;
  height:13px;
  box-sizing:border-box;
  border:2px solid #fff;
  border-radius:50%;
  background:#ff1744;
  box-shadow:0 0 0 2px rgba(255,23,68,.32),0 0 12px #ff1744;
  pointer-events:none;
  animation:notifBadgePop .4s cubic-bezier(.18,.89,.32,1.28);
}
.notification-badge-dot[hidden]{display:none!important}
.boss-alert[data-notice-kind="boss"]{--notice-accent:#ff526f}
.boss-alert[data-notice-kind="fusion"]{--notice-accent:#b985ff}
.boss-alert[data-notice-kind="join"]{--notice-accent:#5ce5d3}
.boss-alert[data-notice-kind="death"]{--notice-accent:#9aa3b7}
.boss-alert[data-notice-kind]{border-left:3px solid var(--notice-accent);animation:noticeBreath 1.8s ease-in-out infinite}
@keyframes noticeBreath{50%{box-shadow:0 0 34px color-mix(in srgb,var(--notice-accent) 30%,transparent)}}
@media(max-width:700px){
  .modal-card,.codex-modal,.cardumes-modal,.profile-modal,.shop-modal,.controls-card,.support-flow-card{
    width:calc(100vw - 18px);
    max-height:calc(100dvh - 18px);
    padding:16px;
    border-radius:12px;
  }
  .room-form-row,.meta-upgrade-grid,.catalog-grid{grid-template-columns:1fr!important}
  .skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ranking-row{grid-template-columns:28px minmax(0,1fr);gap:6px 8px}
  .ranking-row .rank-time{grid-column:2;white-space:normal;line-height:1.35}
  .ranking-reset{text-align:left}
}
@media(max-width:420px){
  .skin-grid{grid-template-columns:1fr!important}
  .menu-secondary-actions{grid-template-columns:1fr!important}
  .menu-action{min-height:42px;height:auto;padding:9px 10px}
}


/* CROSS-PLATFORM GAME LAYOUT · ARENA OVERLAY V4 2026-11
   Overlay widgets are siblings of HUD and positioned against #gameShell. */
:root{--game-safe-top:max(8px,env(safe-area-inset-top));--game-safe-right:max(8px,env(safe-area-inset-right));--game-safe-bottom:max(8px,env(safe-area-inset-bottom));--game-safe-left:max(8px,env(safe-area-inset-left))}
#gameShell{overflow:hidden;min-width:0;min-height:0}#game{display:block;width:100%;height:100%;touch-action:none}
.gameplay-overlay-root{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.gameplay-overlay-root .selected-skills-panel,.gameplay-overlay-root .run-energy-ranking,.gameplay-overlay-root .active-abilities{position:absolute!important}
.gameplay-overlay-root .active-ability{pointer-events:auto}

/* Desktop: top center is status only; right rail is passive information; bottom center is actions. */
@media (min-width:701px) and (pointer:fine){
 body.game-active:not(.mobile-game-active) .hud{left:50%!important;right:auto!important;top:10px!important;width:min(660px,52vw)!important;transform:translateX(-50%)!important;opacity:.9!important}
 body.game-active:not(.mobile-game-active) .hud-top{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
 body.game-active:not(.mobile-game-active) #selectedSkillsPanel{left:auto!important;right:14px!important;top:14px!important;width:190px!important;max-height:34vh!important}
 body.game-active:not(.mobile-game-active) #runEnergyRanking{left:auto!important;right:14px!important;top:auto!important;bottom:58px!important;width:190px!important;max-height:22vh!important}
 body.game-active:not(.mobile-game-active) #activeAbilities.active-abilities{left:50%!important;right:auto!important;top:auto!important;bottom:14px!important;transform:translateX(-50%)!important;width:auto!important;max-width:430px!important;display:flex!important;flex-direction:row!important;justify-content:center!important;gap:8px!important}
 body.game-active:not(.mobile-game-active) #activeAbilities .active-ability{width:auto!important;min-width:145px!important;max-width:205px!important;min-height:40px!important;padding:8px 12px!important;text-align:center!important}
 body.game-active:not(.mobile-game-active) #roomBadge.room-badge{top:auto!important;left:14px!important;right:auto!important;bottom:14px!important}
 body.game-active:not(.mobile-game-active) .mobile-pause-btn{display:none!important}
}

/* Mobile portrait/shared: four corners and center-bottom are independent reserved zones. */
@media (max-width:700px),(pointer:coarse){
 body.mobile-game-active .hud{top:var(--game-safe-top)!important;left:50%!important;right:auto!important;width:min(66vw,390px)!important;transform:translateX(-50%)!important;opacity:.72!important;pointer-events:none!important}
 body.mobile-game-active .hud-top{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important}
 body.mobile-game-active .hud-stat{min-width:0!important;padding:4px!important;border-radius:6px!important;background:rgba(2,12,22,.66)!important}
 body.mobile-game-active .hud-stat small{font-size:clamp(5px,1.35vw,7px)!important;white-space:nowrap!important}body.mobile-game-active .hud-stat strong{font-size:clamp(10px,2.8vw,14px)!important}
 body.mobile-game-active #toggleHudBtn{position:fixed!important;top:var(--game-safe-top)!important;left:var(--game-safe-left)!important;right:auto!important;width:38px!important;height:38px!important;z-index:46!important}
 body.mobile-game-active .mobile-pause-btn{display:grid!important;place-items:center!important;position:fixed!important;top:var(--game-safe-top)!important;right:var(--game-safe-right)!important;width:38px!important;height:38px!important;padding:0!important;z-index:46!important}
 body.mobile-game-active #selectedSkillsPanel{left:var(--game-safe-left)!important;right:auto!important;top:calc(var(--game-safe-top) + 48px)!important;width:clamp(100px,25vw,132px)!important;max-height:22dvh!important;opacity:.8!important}
 body.mobile-game-active #runEnergyRanking{left:auto!important;right:var(--game-safe-right)!important;top:calc(var(--game-safe-top) + 48px)!important;bottom:auto!important;width:clamp(96px,23vw,124px)!important;max-height:17dvh!important;padding:5px!important;opacity:.8!important}
 body.mobile-game-active #activeAbilities.active-abilities{left:50%!important;right:auto!important;top:auto!important;bottom:var(--game-safe-bottom)!important;transform:translateX(-50%)!important;width:clamp(86px,22vw,120px)!important;max-width:120px!important;display:flex!important;flex-direction:column!important;gap:5px!important}
 body.mobile-game-active #activeAbilities .active-ability{width:100%!important;min-width:0!important;max-width:none!important;min-height:38px!important;padding:5px!important;font-size:7px!important;line-height:1.15!important;text-align:center!important;white-space:normal!important}
 body.mobile-game-active .mobile-dual-stick{bottom:var(--game-safe-bottom)!important;width:clamp(86px,22vw,104px)!important;height:clamp(96px,25vw,116px)!important;z-index:40!important}
 body.mobile-game-active .mobile-dual-stick.move-stick{left:var(--game-safe-left)!important}body.mobile-game-active .mobile-dual-stick.aim-stick{right:var(--game-safe-right)!important}
 body.mobile-game-active .mobile-dual-stick .joystick-base{width:clamp(72px,19vw,88px)!important;height:clamp(72px,19vw,88px)!important}body.mobile-game-active .mobile-dual-stick .joystick-knob{width:34px!important;height:34px!important}
 body.mobile-game-active #roomBadge.room-badge{top:auto!important;left:auto!important;right:var(--game-safe-right)!important;bottom:calc(var(--game-safe-bottom) + 118px)!important;max-width:68px!important}
 body.mobile-game-active .boss-alert{top:18%!important;width:min(82vw,480px)!important}
}

/* Mobile menu: content buttons are bounded and centered; utility buttons form their own row. */
@media (max-width:700px),(pointer:coarse){
 #menuScreen{overflow:hidden!important}
 #menuScreen .menu-content{box-sizing:border-box!important;width:calc(100vw - 20px)!important;max-width:480px!important;max-height:calc(100dvh - 16px)!important;overflow:auto!important;padding:10px!important;overscroll-behavior:contain!important}
 #menuScreen button,#menuScreen .menu-action,#menuScreen .wheel-cta,#menuScreen .resonance-menu-btn{box-sizing:border-box!important;max-width:100%!important;text-align:center!important}
 #menuScreen .primary-btn,#menuScreen .wheel-cta,#menuScreen .resonance-menu-btn{width:100%!important;margin-left:0!important;margin-right:0!important}
 #menuScreen .download-cta,#menuScreen .controls-cta{position:fixed!important;top:auto!important;bottom:calc(env(safe-area-inset-bottom) + 8px)!important;display:flex!important;align-items:center!important;justify-content:center!important;width:calc(50vw - 16px)!important;min-width:0!important;min-height:40px!important;height:40px!important;margin:0!important;padding:7px!important;text-align:center!important;z-index:22!important}
 #menuScreen .download-cta{left:10px!important;right:auto!important}#menuScreen .controls-cta{left:auto!important;right:10px!important}
 #menuScreen .menu-secondary-actions{display:grid!important;width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
 #menuScreen .menu-secondary-actions .menu-action{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;min-height:44px!important;margin:0!important;padding:8px!important;text-align:center!important}
 #menuScreen .menu-secondary-actions .online-cta{grid-column:1/-1!important}
}

/* Landscape: top side panels stay above the bottom joystick band. */
@media (pointer:coarse) and (orientation:landscape), (max-width:900px) and (max-height:520px) and (orientation:landscape){
 body.mobile-game-active .hud{width:min(54vw,460px)!important}
 body.mobile-game-active #selectedSkillsPanel{top:calc(var(--game-safe-top) + 44px)!important;width:min(16vw,118px)!important;max-height:25dvh!important}
 body.mobile-game-active #runEnergyRanking{top:calc(var(--game-safe-top) + 44px)!important;width:min(16vw,118px)!important;max-height:25dvh!important}
 body.mobile-game-active #activeAbilities.active-abilities{width:min(15vw,116px)!important}
 body.mobile-game-active .mobile-dual-stick{width:82px!important;height:88px!important}body.mobile-game-active .mobile-dual-stick .joystick-base{width:66px!important;height:66px!important}body.mobile-game-active .mobile-dual-stick .joystick-knob{width:30px!important;height:30px!important}
 body.mobile-game-active #roomBadge.room-badge{right:calc(var(--game-safe-right) + 86px)!important;bottom:var(--game-safe-bottom)!important}
 #menuScreen .menu-content{max-width:min(74vw,640px)!important;padding-bottom:54px!important}
 #menuScreen .menu-secondary-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #menuScreen .menu-secondary-actions .online-cta{grid-column:1/-1!important}
}
@media (max-width:390px) and (orientation:portrait){body.mobile-game-active #selectedSkillsPanel{max-height:18dvh!important;width:98px!important}body.mobile-game-active #runEnergyRanking{max-height:14dvh!important;width:92px!important}body.mobile-game-active #activeAbilities.active-abilities{width:82px!important}#menuScreen .menu-secondary-actions{grid-template-columns:1fr!important}#menuScreen .menu-secondary-actions .online-cta{grid-column:auto!important}}



/* DESKTOP MATCH HUD V5 · center-clear corner zoning
   Persistent UI never occupies the central combat corridor. */
@media (min-width:701px) and (pointer:fine){
 body.game-active:not(.mobile-game-active) .hud{
  left:14px!important;right:auto!important;top:14px!important;
  width:min(330px,24vw)!important;transform:none!important;opacity:.88!important;
 }
 body.game-active:not(.mobile-game-active) .hud-top{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;
 }
 body.game-active:not(.mobile-game-active) .hud-stat{min-width:0!important;padding:5px 7px!important}
 body.game-active:not(.mobile-game-active) .bars{margin-top:5px!important}
 body.game-active:not(.mobile-game-active) #selectedSkillsPanel{
  left:auto!important;right:14px!important;top:14px!important;
  width:min(190px,16vw)!important;max-height:32vh!important;
 }
 body.game-active:not(.mobile-game-active) #runEnergyRanking{
  left:auto!important;right:14px!important;top:auto!important;bottom:14px!important;
  width:min(190px,16vw)!important;max-height:24vh!important;
 }
 body.game-active:not(.mobile-game-active) #activeAbilities.active-abilities{
  left:14px!important;right:auto!important;top:auto!important;bottom:14px!important;
  transform:none!important;width:min(205px,17vw)!important;max-width:205px!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;
 }
 body.game-active:not(.mobile-game-active) #activeAbilities .active-ability{
  width:100%!important;min-width:0!important;max-width:none!important;min-height:38px!important;
  padding:7px 9px!important;text-align:center!important;white-space:normal!important;
 }
 body.game-active:not(.mobile-game-active) #roomBadge.room-badge{
  left:14px!important;right:auto!important;top:auto!important;
  bottom:calc(14px + min(24vh,170px))!important;max-width:190px!important;
 }
 body.game-active:not(.mobile-game-active) .boss-alert{
  top:12px!important;left:50%!important;transform:translateX(-50%)!important;
  width:min(420px,34vw)!important;
 }
 body.game-active:not(.mobile-game-active) #abyssalDangerAlert{
  top:12px!important;width:min(480px,38vw)!important;
 }
}
/* Keep the four corner stacks compact on notebook-sized desktop screens. */
@media (min-width:701px) and (pointer:fine) and (max-width:1100px){
 body.game-active:not(.mobile-game-active) .hud{width:250px!important}
 body.game-active:not(.mobile-game-active) #selectedSkillsPanel,
 body.game-active:not(.mobile-game-active) #runEnergyRanking{width:150px!important}
 body.game-active:not(.mobile-game-active) #activeAbilities.active-abilities{width:170px!important}
}


/* Gameplay overlays must never leak into menu/modal states. */
.gameplay-overlay-root{display:none!important}
body.game-active .gameplay-overlay-root{display:block!important}
body:not(.game-active) #selectedSkillsPanel,
body:not(.game-active) #runEnergyRanking,
body:not(.game-active) #activeAbilities,
body:not(.game-active) #skillDescriptionTooltip{display:none!important}


/* GAMEPLAY HUD V6 · screenshot-driven ownership
   This is the single final authority for match overlays. */

/* Hard visibility boundary: match-only UI cannot exist on menus. */
body:not(.game-active) .gameplay-overlay-root,
body:not(.game-active) #toggleHudBtn,
body:not(.game-active) #endDiveBtn,
body:not(.game-active) #roomBadge,
body:not(.game-active) #mobilePauseBtn{display:none!important}
body.game-active .gameplay-overlay-root{display:block!important}

/* PC: progress first, long and horizontal; stats immediately below. */
@media (min-width:701px) and (pointer:fine){
 body.game-active:not(.mobile-game-active) .hud{
  position:absolute!important;left:14px!important;right:auto!important;top:14px!important;
  width:min(560px,42vw)!important;max-width:560px!important;height:auto!important;
  transform:none!important;display:flex!important;flex-direction:column!important;
  opacity:.88!important;pointer-events:none!important;
 }
 body.game-active:not(.mobile-game-active) .hud .bars{
  order:1!important;width:100%!important;margin:0!important;
  display:flex!important;flex-direction:column!important;
 }
 body.game-active:not(.mobile-game-active) .hud #bossProgressionTrack{
  order:-1!important;width:100%!important;min-width:0!important;
  margin:0 0 8px!important;padding:7px 9px!important;box-sizing:border-box!important;
 }
 body.game-active:not(.mobile-game-active) .hud .track-header{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
 }
 body.game-active:not(.mobile-game-active) .hud .track-title{white-space:nowrap!important}
 body.game-active:not(.mobile-game-active) .hud .track-cycle-badge{
  max-width:none!important;white-space:nowrap!important;padding:3px 6px!important;
 }
 body.game-active:not(.mobile-game-active) .hud .track-line-wrapper{
  width:100%!important;height:24px!important;min-height:24px!important;margin-top:6px!important;
 }
 body.game-active:not(.mobile-game-active) .hud .track-line-bg{
  left:8px!important;right:8px!important;width:auto!important;top:50%!important;
 }
 body.game-active:not(.mobile-game-active) .hud-top{
  order:2!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;width:100%!important;margin-top:7px!important;
 }
 body.game-active:not(.mobile-game-active) .hud-stat{
  min-width:0!important;padding:5px 7px!important;text-align:center!important;
  background:rgba(3,15,26,.62)!important;border:1px solid rgba(121,243,240,.12)!important;border-radius:6px!important;
 }
 body.game-active:not(.mobile-game-active) .hud-stat small{font-size:7px!important}
 body.game-active:not(.mobile-game-active) .hud-stat strong{font-size:15px!important}
 body.game-active:not(.mobile-game-active) .hud .bar-label,
 body.game-active:not(.mobile-game-active) .hud .bar{
  width:min(330px,100%)!important;
 }
 body.game-active:not(.mobile-game-active) .hud .mobile-tip{display:none!important}

 body.game-active:not(.mobile-game-active) #selectedSkillsPanel{
  left:auto!important;right:14px!important;top:14px!important;width:190px!important;max-height:30vh!important;
 }
 body.game-active:not(.mobile-game-active) #runEnergyRanking{
  left:auto!important;right:14px!important;top:auto!important;bottom:14px!important;
  width:190px!important;max-height:22vh!important;
 }
 body.game-active:not(.mobile-game-active) #activeAbilities.active-abilities{
  left:14px!important;right:auto!important;top:auto!important;bottom:14px!important;
  transform:none!important;width:190px!important;max-width:190px!important;
  display:flex!important;flex-direction:column!important;gap:6px!important;
 }
 body.game-active:not(.mobile-game-active) #activeAbilities .active-ability{
  width:100%!important;min-width:0!important;max-width:none!important;min-height:38px!important;
 }
 body.game-active:not(.mobile-game-active) #toggleHudBtn{
  left:auto!important;right:214px!important;top:14px!important;transform:none!important;
 }
 body.game-active:not(.mobile-game-active) #endDiveBtn{
  top:58px!important;right:14px!important;left:auto!important;bottom:auto!important;
  max-width:190px!important;
 }
 body.game-active:not(.mobile-game-active) #roomBadge.room-badge{
  left:14px!important;right:auto!important;bottom:102px!important;top:auto!important;
 }
}

/* Mobile: rebuild around reserved top info band and bottom control band. */
@media (max-width:700px),(pointer:coarse){
 body.mobile-game-active .hud{
  position:fixed!important;top:var(--game-safe-top)!important;left:50%!important;right:auto!important;
  width:calc(100vw - 104px)!important;max-width:none!important;transform:translateX(-50%)!important;
  display:flex!important;flex-direction:column!important;opacity:.82!important;pointer-events:none!important;
 }
 body.mobile-game-active .hud .bars{order:1!important;width:100%!important;margin:0!important}
 body.mobile-game-active .hud #bossProgressionTrack{
  order:-1!important;width:100%!important;margin:0 0 5px!important;padding:5px 6px!important;box-sizing:border-box!important;
 }
 body.mobile-game-active .hud .track-header{display:none!important}
 body.mobile-game-active .hud .track-line-wrapper{height:16px!important;min-height:16px!important;margin:0!important}
 body.mobile-game-active .hud .track-line-bg{left:5px!important;right:5px!important;width:auto!important;top:50%!important}
 body.mobile-game-active .hud-top{
  order:2!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:3px!important;width:100%!important;margin-top:4px!important;
 }
 body.mobile-game-active .hud-stat{min-width:0!important;padding:3px!important;text-align:center!important}
 body.mobile-game-active .hud-stat small{font-size:5px!important}.mobile-game-active .hud-stat strong{font-size:10px!important}
 body.mobile-game-active .hud .bar-label,body.mobile-game-active .hud .bar{width:100%!important}
 body.mobile-game-active .hud .bar-label{font-size:5px!important;margin:2px 0!important}
 body.mobile-game-active .hud .bar{height:3px!important}
 body.mobile-game-active .hud .mobile-tip{display:none!important}

 body.mobile-game-active #toggleHudBtn{top:var(--game-safe-top)!important;left:var(--game-safe-left)!important;right:auto!important;width:36px!important;height:36px!important}
 body.mobile-game-active #mobilePauseBtn{top:var(--game-safe-top)!important;right:var(--game-safe-right)!important;width:36px!important;height:36px!important}
 body.mobile-game-active #selectedSkillsPanel{
  top:112px!important;left:var(--game-safe-left)!important;right:auto!important;
  width:clamp(92px,25vw,120px)!important;max-height:20dvh!important;opacity:.72!important;
 }
 body.mobile-game-active #runEnergyRanking{
  top:112px!important;left:auto!important;right:var(--game-safe-right)!important;
  width:clamp(90px,24vw,116px)!important;max-height:16dvh!important;opacity:.72!important;
 }
 body.mobile-game-active #activeAbilities.active-abilities{
  position:fixed!important;left:50%!important;right:auto!important;top:auto!important;
  bottom:var(--game-safe-bottom)!important;transform:translateX(-50%)!important;
  width:clamp(86px,24vw,118px)!important;display:flex!important;flex-direction:column!important;gap:4px!important;
 }
 body.mobile-game-active #activeAbilities .active-ability{width:100%!important;min-width:0!important;min-height:36px!important;padding:5px!important;font-size:7px!important}
 body.mobile-game-active #endDiveBtn{
  top:auto!important;right:var(--game-safe-right)!important;bottom:calc(var(--game-safe-bottom) + 120px)!important;
  width:auto!important;max-width:110px!important;padding:6px!important;font-size:7px!important;
 }
 body.mobile-game-active #roomBadge.room-badge{
  top:auto!important;right:var(--game-safe-right)!important;bottom:calc(var(--game-safe-bottom) + 94px)!important;
  left:auto!important;max-width:70px!important;
 }
 body.mobile-game-active .mobile-dual-stick{bottom:var(--game-safe-bottom)!important}
}

/* Short landscape phones: side information is compressed, never stacked over controls. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
 body.mobile-game-active .hud{width:min(58vw,470px)!important}
 body.mobile-game-active #selectedSkillsPanel{top:78px!important;max-height:23dvh!important;width:110px!important}
 body.mobile-game-active #runEnergyRanking{top:78px!important;max-height:18dvh!important;width:108px!important}
 body.mobile-game-active #endDiveBtn{right:calc(var(--game-safe-right) + 92px)!important;bottom:var(--game-safe-bottom)!important}
 body.mobile-game-active #roomBadge.room-badge{right:calc(var(--game-safe-right) + 92px)!important;bottom:44px!important}
}


/* MOBILE V7 · production screenshot correction
   Portrait and landscape own separate geometry; no fixed menu CTAs over content. */
@media (max-width:700px),(pointer:coarse){
 #app{padding-left:max(8px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important}
 .topbar{height:64px!important;min-height:64px!important;padding-top:max(4px,env(safe-area-inset-top))!important}
 .brand{min-width:0!important}.brand strong{font-size:11px!important}.brand small{font-size:7px!important}
 .top-actions{gap:5px!important}.top-actions .icon-btn{width:36px!important;height:36px!important}
 #onlineCount{font-size:8px!important;padding:0 7px!important}

 /* Match: reserve the phone status-bar area and shrink secondary information. */
 body.mobile-game-active .hud{
  top:calc(var(--game-safe-top) + 8px)!important;
  width:calc(100vw - 112px)!important;
 }
 body.mobile-game-active #toggleHudBtn{top:calc(var(--game-safe-top) + 8px)!important}
 body.mobile-game-active #mobilePauseBtn{top:calc(var(--game-safe-top) + 8px)!important}
 body.mobile-game-active #selectedSkillsPanel{
  top:126px!important;width:96px!important;max-height:15dvh!important;
  border-radius:7px!important;
 }
 body.mobile-game-active #runEnergyRanking{
  top:126px!important;width:92px!important;max-height:12dvh!important;
 }
 body.mobile-game-active .selected-skills-title{padding:6px!important;font-size:7px!important}
 body.mobile-game-active .selected-skill-row{grid-template-columns:16px minmax(0,1fr) auto!important;padding:5px!important;font-size:7px!important}
 body.mobile-game-active .run-energy-ranking{font-size:7px!important}
 body.mobile-game-active #activeAbilities.active-abilities{
  bottom:calc(var(--game-safe-bottom) + 4px)!important;width:112px!important;gap:5px!important;
 }
 body.mobile-game-active .mobile-dual-stick{bottom:calc(var(--game-safe-bottom) + 2px)!important}
 body.mobile-game-active #endDiveBtn{
  right:var(--game-safe-right)!important;bottom:calc(var(--game-safe-bottom) + 116px)!important;
  max-width:104px!important;
 }
 body.mobile-game-active #roomBadge.room-badge{
  right:var(--game-safe-right)!important;bottom:calc(var(--game-safe-bottom) + 88px)!important;
 }

 /* Menu utilities return to normal document flow. */
 #menuScreen .download-cta,#menuScreen .controls-cta{
  position:static!important;inset:auto!important;float:none!important;
  width:100%!important;height:44px!important;min-height:44px!important;
  margin:0!important;padding:8px 10px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
 }
 #menuScreen .menu-content{padding-bottom:20px!important}
}

/* Portrait menu: one clean vertical column, no horizontal collisions. */
@media (max-width:700px) and (orientation:portrait){
 #menuScreen{overflow-y:auto!important;overflow-x:hidden!important}
 #menuScreen .menu-content{
  width:100%!important;max-width:none!important;max-height:none!important;
  padding:18px 12px 28px!important;overflow:visible!important;
 }
 #menuScreen .menu-secondary-actions{grid-template-columns:1fr!important;gap:7px!important}
 #menuScreen .menu-secondary-actions .online-cta{grid-column:auto!important}
  position:static!important;width:100%!important;max-width:none!important;height:260px!important;
  margin:12px 0!important;inset:auto!important;
 }
 #menuScreen select,#menuScreen .language-select{max-width:100%!important}
}

/* Landscape menu: controls stay left; chat becomes a bounded right column above the utility row. */
@media (pointer:coarse) and (orientation:landscape), (max-width:900px) and (max-height:520px) and (orientation:landscape){
 #menuScreen{overflow:auto!important}
 #menuScreen .menu-content{
  width:58vw!important;max-width:58vw!important;max-height:none!important;
  padding:12px 12px 64px!important;overflow:visible!important;
 }
 #menuScreen .menu-secondary-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #menuScreen .menu-secondary-actions .online-cta{grid-column:1/-1!important}
  position:fixed!important;right:12px!important;left:auto!important;top:82px!important;bottom:62px!important;
  width:36vw!important;max-width:430px!important;height:auto!important;max-height:none!important;
 }
 #menuScreen .download-cta,#menuScreen .controls-cta{
  width:calc(50% - 4px)!important;display:inline-flex!important;margin-top:8px!important;
 }
 body.mobile-game-active .hud{top:calc(var(--game-safe-top) + 4px)!important;width:min(56vw,430px)!important}
 body.mobile-game-active #selectedSkillsPanel{top:74px!important;width:104px!important;max-height:20dvh!important}
 body.mobile-game-active #runEnergyRanking{top:74px!important;width:102px!important;max-height:17dvh!important}
 body.mobile-game-active #activeAbilities.active-abilities{width:104px!important}
 body.mobile-game-active #endDiveBtn{right:calc(var(--game-safe-right) + 88px)!important;bottom:var(--game-safe-bottom)!important}
 body.mobile-game-active #roomBadge.room-badge{right:calc(var(--game-safe-right) + 88px)!important;bottom:42px!important}
}


/* UI V8 · portrait mobile + hybrid controls + PC corner corrections */
@media (max-width:700px),(pointer:coarse){
 body.mobile-game-active #mobileMoveStick{display:none!important}
 body.mobile-game-active #mobileAimStick.dual-stick-visible{
  display:flex!important;width:118px!important;height:132px!important;
  right:var(--game-safe-right)!important;bottom:calc(var(--game-safe-bottom) + 4px)!important;
 }
 body.mobile-game-active #mobileAimStick .joystick-base{width:102px!important;height:102px!important}
 body.mobile-game-active #mobileAimStick .joystick-knob{width:42px!important;height:42px!important}
 body.mobile-game-active #mobileJoystick.is-floating{
  display:flex!important;position:fixed!important;width:108px!important;height:122px!important;z-index:44!important;
  pointer-events:none!important;
 }
 body.mobile-game-active #mobileJoystick.is-floating .joystick-base{width:92px!important;height:92px!important}
 body.mobile-game-active #mobileJoystick.is-floating .joystick-knob{width:38px!important;height:38px!important}
 body.mobile-game-active #selectedSkillsPanel,
 body.mobile-game-active #runEnergyRanking{top:148px!important}
 body.mobile-game-active #activeAbilities.active-abilities{bottom:calc(var(--game-safe-bottom) + 8px)!important}
}

/* Browser fallback when Orientation Lock API is unavailable. */
@media (pointer:coarse) and (orientation:landscape){
 body.mobile-game-active #gameShell::after{
  content:'GIRE O CELULAR PARA A VERTICAL';
  position:absolute;inset:0;z-index:1000;display:grid;place-items:center;
  background:rgba(2,10,17,.96);color:var(--cyan);font:600 13px 'DM Mono',monospace;
  letter-spacing:.12em;text-align:center;padding:24px;
 }
 body.mobile-game-active #gameShell>*{visibility:hidden!important}
 body.mobile-game-active #gameShell::after{visibility:visible!important}
}

/* PC: right stack is deterministic, toggle hugs edge when panels collapse, Q/E stay inside arena. */
@media (min-width:701px) and (pointer:fine){
 body.game-active:not(.mobile-game-active) #selectedSkillsPanel{
  right:14px!important;top:14px!important;bottom:auto!important;
 }
 body.game-active:not(.mobile-game-active) #endDiveBtn{
  right:14px!important;left:auto!important;
  top:calc(14px + min(30vh,260px) + 12px)!important;
  bottom:auto!important;width:190px!important;max-width:190px!important;
 }
 body.game-active:not(.mobile-game-active) #toggleHudBtn{
  right:214px!important;left:auto!important;top:14px!important;
 }
 body.game-active.hud-collapsed:not(.mobile-game-active) #toggleHudBtn{
  right:14px!important;left:auto!important;top:14px!important;
 }
 body.game-active:not(.mobile-game-active) #activeAbilities.active-abilities{
  position:absolute!important;left:14px!important;right:auto!important;
  bottom:14px!important;top:auto!important;transform:none!important;
  width:190px!important;z-index:30!important;
 }
}


/* GAMEPLAY NOTICES V9 · arena-owned, centered, 5s slow fade */
#gameShell{position:relative!important}
body.game-active #bossAlert.boss-alert{
 position:absolute!important;
 left:50%!important;right:auto!important;
 top:14px!important;bottom:auto!important;
 transform:translateX(-50%)!important;
 width:min(520px,calc(100% - 32px))!important;
 max-width:520px!important;
 z-index:90!important;
 margin:0!important;
 opacity:0;
 pointer-events:none!important;
}
body.game-active #bossAlert.gameplay-notice-5s{
 animation:gameplayNoticeFiveSeconds 5s linear forwards!important;
}
@keyframes gameplayNoticeFiveSeconds{
 0%{opacity:0;transform:translate(-50%,-10px) scale(.985)}
 8%{opacity:1;transform:translate(-50%,0) scale(1)}
 42%{opacity:1;transform:translate(-50%,0) scale(1)}
 100%{opacity:0;transform:translate(-50%,-4px) scale(.99)}
}
/* Old progression/danger overlay is retired on every platform. */
#abyssalDangerAlert{display:none!important}
@media (max-width:700px),(pointer:coarse){
 body.mobile-game-active #bossAlert.boss-alert{
  top:calc(var(--game-safe-top) + 72px)!important;
  width:min(86vw,420px)!important;
  padding:10px 12px!important;
 }
 body.mobile-game-active #bossAlert .boss-alert-kicker{font-size:6px!important}
 body.mobile-game-active #bossAlert strong{font-size:11px!important}
 body.mobile-game-active #bossAlert p{font-size:7px!important;line-height:1.3!important}
}


/* MOBILE V10 · right-side gameplay stack follows selected skills height */
@media (max-width:700px),(pointer:coarse){
 body.mobile-game-active #selectedSkillsPanel{
  top:148px!important;
  right:var(--game-safe-right)!important;
 }
 body.mobile-game-active #endDiveBtn{
  position:absolute!important;
  right:var(--game-safe-right)!important;
  left:auto!important;
  top:calc(148px + min(15dvh,180px) + 10px)!important;
  bottom:auto!important;
  width:96px!important;
  max-width:96px!important;
  padding:7px 5px!important;
  font-size:7px!important;
  line-height:1.2!important;
 }
 body.mobile-game-active #roomBadge{
  position:absolute!important;
  right:var(--game-safe-right)!important;
  left:auto!important;
  top:calc(148px + min(15dvh,180px) + 48px)!important;
  bottom:auto!important;
  width:96px!important;
  max-width:96px!important;
  box-sizing:border-box!important;
  text-align:center!important;
 }
}


/* RESPONSIVE TEXT AUTHORITY V11 · Abyssário + modal copy
   Final authority over legacy fixed card typography. */
.codex-modal,.modal-card{min-width:0;max-width:100%}
.codex-modal h2,.codex-modal .catalog-subtitle,.codex-heading,
.modal-card h2,.modal-card h3,.modal-card p,.modal-card strong,.modal-card small{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
.codex-modal h2{
  font-size:clamp(18px,4.6vw,27px);
  line-height:1.15;
  letter-spacing:clamp(.04em,.7vw,.12em);
}
.catalog-subtitle{
  font-size:clamp(8px,2.1vw,10px);
  line-height:1.5;
  letter-spacing:clamp(.08em,.8vw,.2em);
  white-space:normal;
}
.codex-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:clamp(9px,2vw,14px);
  min-width:0;
}
.codex-card{
  min-width:0;
  overflow:visible;
}
.codex-card b{
  font-size:clamp(11px,2.5vw,13px);
  line-height:1.35;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.codex-card p{
  font-size:clamp(10px,2.25vw,11px);
  line-height:1.58;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.codex-heading{
  font-size:clamp(10px,2.4vw,12px);
  line-height:1.4;
  letter-spacing:clamp(.07em,.8vw,.14em);
}
@media(max-width:560px){
  .codex-modal{padding:clamp(12px,4vw,18px)}
  .codex-grid{grid-template-columns:1fr!important}
  .codex-card{padding:11px}
  .codex-preview{height:clamp(88px,25vw,112px)}
  .monster-codex-card{min-height:0}
}
@media(min-width:561px) and (max-width:760px){
  .codex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px){
  .codex-modal h2{font-size:17px}
  .catalog-subtitle{letter-spacing:.06em}
  .codex-card b{font-size:11px}
  .codex-card p{font-size:10px;line-height:1.55}
}

/* Long interface copy should reflow instead of escaping its box. */
.menu-action,.secondary-btn,.primary-btn,.control-choice,
.upgrade-card,.meta-card,.room-card,.ranking-section,.skin-card{
  min-width:0;
}
.menu-action strong,.menu-action small,.upgrade-card strong,.upgrade-card p,
.meta-card strong,.meta-card p,.room-card strong,.room-card p,
.skin-card strong,.skin-card p{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Regression fixes: owned shop state + Abyssario heading rhythm */
.skin-card.owned{border-color:rgba(98,245,179,.34)!important;box-shadow:inset 0 0 24px rgba(98,245,179,.035)}
.skin-card.owned button{border-color:rgba(98,245,179,.38);color:#bfffe4}
#catalogScreen .codex-modal>h2{margin:10px 0 0!important;line-height:1.05}
#catalogScreen .catalog-subtitle{display:block;margin:9px 0 14px!important;line-height:1.35;position:relative;clear:both}


/* Deploy / maintenance reconnect overlay */
.maintenance-overlay{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 42%,rgba(10,55,82,.94),rgba(1,8,18,.985) 58%,#01050b);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.maintenance-overlay[hidden]{display:none!important}.maintenance-card{width:min(560px,92vw);padding:34px 30px;text-align:center;border:1px solid rgba(99,229,238,.34);border-radius:18px;background:linear-gradient(160deg,rgba(7,27,42,.96),rgba(2,11,23,.98));box-shadow:0 24px 90px #000b,inset 0 0 50px rgba(64,219,229,.035)}
.maintenance-sonar{position:relative;width:92px;height:92px;margin:0 auto 20px;display:grid;place-items:center}.maintenance-sonar span{position:absolute;inset:13px;border:1px solid rgba(108,241,240,.48);border-radius:50%;animation:maintenance-sonar 2.2s ease-out infinite}.maintenance-sonar span:nth-child(2){animation-delay:1.1s}.maintenance-sonar i{font-style:normal;font-size:25px;color:#83fbf3;text-shadow:0 0 22px #59e9ed}
.maintenance-kicker{font:800 10px/1.4 'DM Mono',monospace;letter-spacing:.2em;color:#6fa8bb}.maintenance-card h2{margin:8px 0 12px;font:900 clamp(21px,4vw,34px)/1.05 'Exo 2',sans-serif;letter-spacing:.08em;color:#eaffff;text-shadow:0 0 24px rgba(102,238,239,.18)}.maintenance-card p{margin:0 auto 20px;max-width:440px;color:#a9c8d3;font:500 14px/1.65 system-ui,sans-serif}.maintenance-status{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 14px;margin:0 auto 15px;border:1px solid rgba(102,238,239,.16);border-radius:9px;background:rgba(58,187,195,.07);color:#aef9f5;font:700 11px/1.4 'DM Mono',monospace}.maintenance-dot{width:8px;height:8px;border-radius:50%;background:#72f4e8;box-shadow:0 0 13px #72f4e8;animation:maintenance-blink 1s ease-in-out infinite}.maintenance-card small{display:block;color:#648a9a;font:600 10px/1.55 'DM Mono',monospace;letter-spacing:.04em}
@keyframes maintenance-sonar{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.45);opacity:0}}@keyframes maintenance-blink{50%{opacity:.25}}


/* ANDROID RESPONSIVE AUTHORITY V12
   Final mobile layout authority: every panel owns one bounded zone and can scroll internally. */
@media (max-width:700px),(pointer:coarse){
 html,body,#app{max-width:100vw!important;overflow:hidden!important}
 #app{height:100dvh!important;min-height:0!important;padding-left:max(6px,env(safe-area-inset-left))!important;padding-right:max(6px,env(safe-area-inset-right))!important}
 #gameShell{min-width:0!important;min-height:0!important;overflow:hidden!important}
 .screen{max-width:100%!important;max-height:100%!important;overflow-x:hidden!important}
 .modal-screen{
  align-items:flex-start!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  overscroll-behavior:contain;
 }
 .modal-card,.shop-modal,.codex-modal,.wheel-modal,.redeem-modal-card,.auth-flow-card,.controls-card{
  position:relative!important;
  flex:0 0 auto!important;
  width:min(100%,680px)!important;
  max-width:100%!important;
  max-height:none!important;
  min-width:0!important;
  margin:auto!important;
  padding:clamp(14px,4vw,22px)!important;
  overflow:visible!important;
 }
 .modal-card h2{font-size:clamp(22px,7vw,32px)!important;line-height:1.04!important;margin:12px 0 10px!important}
 .modal-card h3,.modal-card p,.modal-card label,.modal-card button{max-width:100%!important;overflow-wrap:anywhere}
 .modal-top-close,.redeem-close-btn{position:sticky!important;top:0!important;float:right!important;z-index:8!important}
 .skin-grid,.meta-upgrade-grid,.catalog-grid,.codex-grid,.upgrade-choices{
  grid-template-columns:1fr!important;
  width:100%!important;min-width:0!important;
 }
 .skin-card,.meta-card,.codex-card,.upgrade-card{width:100%!important;max-width:100%!important;min-width:0!important}
 .shop-heading,.meta-shop-heading{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
 .wallet{align-self:flex-start!important}
 .payment-settings,.redeem-code-controls,.confirm-checks,.birth-date-fields{width:100%!important;min-width:0!important}
 .text-field,input,select,textarea{max-width:100%!important;min-width:0!important}
 .results{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
 .results strong{font-size:clamp(13px,4.6vw,19px)!important;overflow-wrap:anywhere}
 .topbar{gap:6px!important;min-width:0!important}
 .brand{flex:1 1 auto!important;overflow:hidden!important}
 .brand>div{min-width:0!important}.brand strong,.brand small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
 .top-actions{flex:0 0 auto!important;max-width:62%!important;overflow-x:auto!important;scrollbar-width:none}
 .top-actions::-webkit-scrollbar{display:none}
 .menu-footer{position:static!important;flex-wrap:wrap!important;gap:6px!important;margin:10px 12px!important}
 .legal-footer{display:flex!important;flex-wrap:wrap!important;gap:6px 10px!important}
 body.mobile-game-active #selectedSkillsPanel{
  left:auto!important;right:var(--game-safe-right)!important;
  width:96px!important;max-width:calc(50vw - 14px)!important;
  overflow:auto!important;
 }
 body.mobile-game-active #runEnergyRanking{
  left:var(--game-safe-left)!important;right:auto!important;
  width:92px!important;max-width:calc(50vw - 14px)!important;
  overflow:auto!important;
 }
 body.mobile-game-active #selectedSkillsPanel,
 body.mobile-game-active #runEnergyRanking{
  top:148px!important;bottom:auto!important;max-height:min(22dvh,150px)!important;
 }
 body.mobile-game-active #endDiveBtn{
  left:auto!important;right:var(--game-safe-right)!important;
  top:calc(148px + min(22dvh,150px) + 8px)!important;bottom:auto!important;
 }
 body.mobile-game-active #roomBadge.room-badge{
  left:auto!important;right:var(--game-safe-right)!important;
  top:calc(148px + min(22dvh,150px) + 48px)!important;bottom:auto!important;
 }
 body.mobile-game-active #activeAbilities.active-abilities{
  left:50%!important;right:auto!important;top:auto!important;
  bottom:calc(var(--game-safe-bottom) + 6px)!important;
  transform:translateX(-50%)!important;
  max-width:30vw!important;
 }
 body.mobile-game-active #mobileAimStick.dual-stick-visible{max-width:32vw!important;max-height:32vw!important}
}
@media (max-width:380px){
 .topbar{height:58px!important;min-height:58px!important}
 .brand-mark{font-size:20px!important}.brand strong{font-size:9px!important}.brand small{display:none!important}
 .top-actions .icon-btn{width:34px!important;height:34px!important;min-width:34px!important}
 #onlineCount{display:none!important}
 .modal-card,.shop-modal,.codex-modal,.wheel-modal{padding:12px!important}
 .results{grid-template-columns:1fr!important}
 .results div{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important}
}
@media (pointer:coarse) and (orientation:landscape){
 .modal-screen{padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))!important}
 .modal-card,.shop-modal,.codex-modal,.wheel-modal{width:min(760px,94vw)!important;padding:14px!important}
 .skin-grid,.meta-upgrade-grid,.codex-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* MOBILE MENU TOP UTILITIES V13 */
.mobile-top-utility{display:none}
@media(max-width:700px),(pointer:coarse){
 .topbar{position:relative!important;z-index:120!important;overflow:visible!important}
 .top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;max-width:none!important;overflow:visible!important}
 .mobile-top-utility{display:inline-flex!important;align-items:center!important;justify-content:center!important}
 #fullscreenBtn{display:none!important}
 #menuScreen .desktop-menu-utility{display:none!important}
 #menuScreen{padding-top:0!important}
 #menuScreen .menu-content{
  justify-content:flex-start!important;
  height:auto!important;min-height:100%!important;
  padding-top:clamp(16px,3.8vh,28px)!important;
  overflow-y:auto!important;overflow-x:hidden!important;
 }
 #menuScreen .eyebrow{margin:0 0 4px!important;min-height:14px!important}
 #menuScreen h1{
  display:block!important;
  position:relative!important;
  width:100%!important;max-width:100%!important;
  min-height:calc(1.92em + 8px)!important;
  margin:4px 0 10px!important;padding:2px 0 6px!important;
  font-size:clamp(30px,9.5vw,46px)!important;
  line-height:.96!important;
  overflow:visible!important;
  clip-path:none!important;
  white-space:normal!important;
 }
 #menuScreen h1 em{display:inline-block!important;line-height:1!important;padding-bottom:.08em!important}
 #menuScreen .account-line{position:relative!important;z-index:2!important}
}
@media(max-width:390px){
 .top-actions{gap:3px!important}
 .top-actions .icon-btn{width:32px!important;height:32px!important;min-width:32px!important;font-size:14px!important}
 #menuScreen h1{font-size:clamp(29px,9.2vw,37px)!important}
}


/* MOBILE HEADER + SCROLL AUTHORITY V14 */
.ui-icon{width:18px;height:18px;display:block;pointer-events:none}
.icon-btn .ui-icon{width:17px;height:17px}
.download-cta .ui-icon,.controls-cta .ui-icon{width:15px;height:15px;flex:0 0 auto}
@media(max-width:700px),(pointer:coarse){
 html,body{overflow:hidden!important}
 #app{height:100dvh!important;overflow:hidden!important}
 .topbar{
  height:52px!important;min-height:52px!important;
  padding:0 4px!important;gap:4px!important;
 }
 .brand{gap:5px!important;flex:1 1 auto!important;min-width:0!important}
 .brand-mark{font-size:18px!important}
 .brand strong{font-size:10px!important;letter-spacing:.12em!important}
 .brand small{font-size:6px!important;letter-spacing:.035em!important}
 .top-actions{flex:0 0 auto!important;gap:3px!important;max-width:none!important}
 .top-actions .icon-btn{
  width:30px!important;height:30px!important;min-width:30px!important;
  padding:0!important;border-radius:9px!important;font-size:0!important;
 }
 .top-actions .ui-icon{width:15px!important;height:15px!important}
 .online-counter{display:none!important}
 #fullscreenBtn{display:none!important}
 #gameShell{overflow:hidden!important}
 #menuScreen{
  display:block!important;
  height:100%!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  padding:0!important;
 }
 #menuScreen .menu-content{
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  width:100%!important;height:auto!important;min-height:max-content!important;max-height:none!important;
  overflow:visible!important;
  padding:18px 11px 54px!important;
 }
 #menuScreen .language-setting{
  position:sticky!important;
  top:6px!important;right:auto!important;left:auto!important;
  z-index:15!important;
  align-self:flex-end!important;
  width:min(150px,42vw)!important;
  margin:0 2px 4px auto!important;
 }
 #menuScreen .language-setting label{display:none!important}
 #menuScreen .language-setting select{width:100%!important;height:36px!important;font-size:11px!important}
 #menuScreen .eyebrow{order:1!important}
 #menuScreen h1{order:2!important}
 #menuScreen .intro{order:3!important}
 #menuScreen .primary-btn{order:4!important}
 #menuScreen .wheel-cta{order:5!important}
 #menuScreen .menu-secondary-actions{order:6!important}
 #menuScreen .account-line{order:7!important}
 #menuScreen .controls-hint{order:8!important}
 #menuScreen .record-row{order:9!important}
 #menuScreen .desktop-menu-utility{display:none!important}
 #menuScreen .menu-footer{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin:10px 11px 16px!important}
}
@media(max-width:390px){
 .topbar{height:48px!important;min-height:48px!important}
 .brand small{display:none!important}
 .top-actions .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;border-radius:8px!important}
 .top-actions .ui-icon{width:14px!important;height:14px!important}
 #menuScreen .language-setting{width:132px!important}
}


/* MENU VISUAL SYSTEM V15 */
#menuScreen .menu-secondary-actions .menu-action,
#menuScreen .resonance-menu-btn{
 border:1px solid rgba(111,203,218,.22)!important;
 border-radius:10px!important;
 background:linear-gradient(135deg,rgba(5,29,43,.92),rgba(5,20,35,.9))!important;
 box-shadow:inset 0 1px rgba(255,255,255,.025),0 5px 18px rgba(0,0,0,.12)!important;
}
#menuScreen .menu-secondary-actions .menu-action{
 display:grid!important;grid-template-columns:28px minmax(0,1fr) 28px!important;
 align-items:center!important;justify-items:center!important;
 gap:8px!important;text-align:center!important;
}
#menuScreen .menu-secondary-actions .menu-action>.menu-action-label,
#menuScreen .menu-secondary-actions .menu-action>strong,
#menuScreen .menu-secondary-actions .menu-action>.online-cta-copy{
 grid-column:2!important;justify-self:center!important;text-align:center!important;
}
#menuScreen .menu-secondary-actions .menu-action>.menu-nav-icon,
#menuScreen .menu-secondary-actions .menu-action>.online-cta-icon{
 grid-column:3!important;justify-self:center!important;
 width:18px!important;height:18px!important;color:#9ceee9!important;
}
#menuScreen .online-cta-copy{width:100%!important;align-items:center!important}
#menuScreen .online-cta-copy strong,#menuScreen .online-cta-copy small{text-align:center!important;width:100%!important}
#menuScreen .resonance-menu-btn{
 display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;text-align:center!important;
}
#menuScreen .resonance-label{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
#menuScreen .resonance-label .ui-icon{width:16px!important;height:16px!important}
#menuScreen .primary-btn{
 display:grid!important;grid-template-columns:24px minmax(0,1fr) 24px!important;
 text-align:center!important;
}
#menuScreen .primary-btn>span:last-child{grid-column:3!important}
#menuScreen .wheel-cta{grid-template-columns:36px minmax(0,1fr) auto 24px!important}
#menuScreen .wheel-cta-copy{text-align:center!important;align-items:center!important}
.sound-control-wrapper{position:relative!important}
@media(min-width:701px){
 .volume-popup{left:auto!important;right:0!important;transform:translateY(-6px)!important}
 .sound-control-wrapper:hover .volume-popup,.sound-control-wrapper:focus-within .volume-popup,.volume-popup.active{transform:translateY(0)!important}
}
@media(max-width:700px),(pointer:coarse){
 .topbar{padding-inline:6px!important}
 .brand{max-width:44%!important}
 .top-actions{margin-left:auto!important}
 .sound-control-wrapper{position:static!important}
 .volume-popup{
  position:fixed!important;
  top:calc(env(safe-area-inset-top) + 58px)!important;
  left:10px!important;right:10px!important;
  width:auto!important;max-width:none!important;
  transform:translateY(-6px)!important;
  box-sizing:border-box!important;
  grid-template-columns:72px minmax(0,1fr) 36px!important;
 }
 .sound-control-wrapper:hover .volume-popup,.sound-control-wrapper:focus-within .volume-popup,.volume-popup.active{transform:translateY(0)!important}
 #menuScreen .menu-content{
  align-items:center!important;
  padding-left:12px!important;padding-right:12px!important;
 }
 #menuScreen .eyebrow,#menuScreen h1,#menuScreen .intro,
 #menuScreen .primary-btn,#menuScreen .wheel-cta,#menuScreen .menu-secondary-actions,
 #menuScreen .resonance-menu-btn,#menuScreen .account-line,#menuScreen .record-row{
  width:100%!important;max-width:520px!important;
 }
 #menuScreen .eyebrow{justify-content:center!important;text-align:center!important}
 #menuScreen h1{text-align:center!important}
 #menuScreen .primary-btn{justify-items:center!important}
 #menuScreen .primary-btn{grid-template-columns:24px minmax(0,1fr) 24px!important}
 #menuScreen .primary-btn>span:last-child{justify-self:center!important}
 #menuScreen .wheel-cta{
  display:grid!important;grid-template-columns:34px minmax(0,1fr) 22px!important;
  align-items:center!important;text-align:center!important;
 }
 #menuScreen .wheel-cta-prizes{display:none!important}
 #menuScreen .wheel-cta-arrow{grid-column:3!important;justify-self:center!important}
 #menuScreen .menu-secondary-actions{grid-template-columns:1fr!important}
 #menuScreen .menu-secondary-actions .online-cta{grid-column:auto!important}
 #menuScreen .menu-secondary-actions .menu-action{
  grid-template-columns:32px minmax(0,1fr) 32px!important;
  min-height:48px!important;padding:8px 10px!important;
 }
 #menuScreen .menu-secondary-actions .menu-action>.menu-nav-icon,
 #menuScreen .menu-secondary-actions .menu-action>.online-cta-icon{width:17px!important;height:17px!important}
 #menuScreen .account-line{justify-content:center!important;text-align:center!important}
 #menuScreen .language-setting{
  position:relative!important;top:auto!important;right:auto!important;left:auto!important;
  align-self:center!important;margin:0 auto 6px!important;width:min(150px,46vw)!important;
 }
}


/* ALIGNMENT ONLY V16: preserve existing visual design. */
#menuScreen .menu-action{
 text-align:center!important;
 align-items:center!important;
 justify-items:center!important;
}
#menuScreen .menu-action .menu-action-label,
#menuScreen .menu-action .online-cta-copy{
 text-align:center!important;
 justify-self:center!important;
}
#menuScreen .menu-action .menu-nav-icon,
#menuScreen .menu-action .online-cta-icon{
 align-self:center!important;
 justify-self:center!important;
}
#menuScreen .resonance-menu-btn,
#menuScreen .resonance-label{
 align-items:center!important;
 justify-content:center!important;
 text-align:center!important;
}
.selected-skills-panel{text-align:center!important}
.selected-skills-title{display:block!important;width:100%!important;text-align:center!important}
.selected-skills-list{text-align:center!important}
.selected-skill-row{align-items:center!important}
.selected-skill-row>span,.selected-skill-row>strong{text-align:center!important}
@media(max-width:700px),(pointer:coarse){
 #menuScreen .menu-action{
  grid-template-columns:32px minmax(0,1fr) 32px!important;
 }
 #menuScreen .menu-action .menu-action-label,
 #menuScreen .menu-action .online-cta-copy{grid-column:2!important}
 #menuScreen .menu-action .menu-nav-icon,
 #menuScreen .menu-action .online-cta-icon{grid-column:3!important}
}


/* REQUESTED ALIGNMENT + RESONANCE COLOR V17 */
#menuScreen .menu-secondary-actions .menu-action{
 position:relative!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 text-align:center!important;
}
#menuScreen .menu-secondary-actions .menu-action>.menu-action-label,
#menuScreen .menu-secondary-actions .menu-action>.online-cta-copy{
 width:100%!important;
 margin:0!important;
 text-align:center!important;
 align-items:center!important;
 justify-content:center!important;
}
#menuScreen .menu-secondary-actions .menu-action>.menu-nav-icon,
#menuScreen .menu-secondary-actions .menu-action>.online-cta-icon{
 position:absolute!important;
 right:12px!important;
 top:50%!important;
 transform:translateY(-50%)!important;
 margin:0!important;
}
.top-actions .icon-btn,
.top-actions .sound-control-wrapper>.icon-btn{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 padding:0!important;
 line-height:1!important;
}
.top-actions .icon-btn>.ui-icon,
.top-actions .sound-control-wrapper>.icon-btn>.ui-icon{
 display:block!important;
 margin:auto!important;
 flex:0 0 auto!important;
}
.selected-skills-panel{
 border-color:rgba(183,132,255,.58)!important;
 background:linear-gradient(155deg,rgba(61,28,91,.90),rgba(26,15,55,.94))!important;
 box-shadow:0 0 18px rgba(167,91,255,.16),inset 0 0 24px rgba(151,78,224,.07)!important;
}
.selected-skills-title{color:#d8b8ff!important;text-shadow:0 0 10px rgba(185,120,255,.32)!important}
@media(max-width:700px),(pointer:coarse){
 #menuScreen .menu-secondary-actions .menu-action{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
 }
 #menuScreen .menu-secondary-actions .menu-action>.menu-nav-icon,
 #menuScreen .menu-secondary-actions .menu-action>.online-cta-icon{right:10px!important}
}


/* TARGETED MENU/MOBILE FIX V18 */
@media(max-width:700px),(pointer:coarse){
 #menuScreen[hidden]{display:none!important}
}
@media(min-width:701px) and (pointer:fine){
 #menuScreen .menu-content{width:min(680px,calc(100vw - 48px))!important;max-width:680px!important}
 #menuScreen .menu-secondary-actions,#menuScreen .primary-btn,#menuScreen .wheel-cta,#menuScreen .resonance-menu-btn,
 #menuScreen .account-line,#menuScreen .record-row{max-width:680px!important}
 #menuScreen .menu-action{white-space:normal!important;overflow:visible!important}
 #menuScreen .menu-action-label,#menuScreen .online-cta-copy strong{overflow:visible!important;text-overflow:clip!important;white-space:normal!important}
}
#menuScreen #onlineBtn{
 border-color:rgba(82,255,164,.62)!important;
 background:linear-gradient(135deg,rgba(18,116,70,.34),rgba(5,58,39,.28))!important;
 box-shadow:0 0 18px rgba(63,255,151,.18),inset 0 0 20px rgba(74,255,164,.06)!important;
}
#menuScreen #onlineBtn:hover{border-color:rgba(100,255,178,.9)!important;box-shadow:0 0 24px rgba(63,255,151,.28)!important}
#menuScreen #playBtn{
 border-color:rgba(218,232,239,.54)!important;
 background:linear-gradient(135deg,rgba(156,174,184,.20),rgba(75,91,103,.18))!important;
 box-shadow:0 0 17px rgba(218,235,242,.13),inset 0 0 18px rgba(230,244,249,.04)!important;
}
#menuScreen #playBtn{
 position:relative;
 justify-content:center!important;
 text-align:center!important;
 color:#f7ffff!important;
 text-shadow:0 0 4px rgba(255,255,255,.98),0 0 10px rgba(205,250,255,.95),0 0 22px rgba(105,235,255,.82)!important;
}
#menuScreen #playBtn span{
 position:absolute;
 right:18px;
 top:50%;
 transform:translateY(-50%);
}
#menuScreen #resonanceBtn{
 border-color:rgba(194,112,255,.72)!important;
 background:linear-gradient(135deg,rgba(126,47,192,.34),rgba(63,23,112,.30))!important;
 box-shadow:0 0 20px rgba(184,79,255,.22),inset 0 0 22px rgba(199,111,255,.07)!important;
 color:#e7c8ff!important;
}
#menuScreen #resonanceBtn .resonance-label{width:100%!important;justify-content:center!important}

/* Solo button: center its label independently of the arrow. */
#menuScreen #playBtn{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 grid-template-columns:none!important;
 justify-items:initial!important;
 text-align:center!important;
 color:#fff!important;
 text-shadow:none!important;
}
#menuScreen #playBtn>span:last-child{
 position:absolute!important;
 right:18px!important;
 top:50%!important;
 transform:translateY(-50%)!important;
 color:#fff!important;
 text-shadow:none!important;
}

/* CHAT SAFETY CONTROLS V19 */

/* Compact social safety controls */
.public-profile-actions{flex-wrap:wrap;gap:7px}


/* Notification transparency: keep gameplay/menu context visible behind notices. */
#notificationBox.menu-box{
  background:radial-gradient(ellipse at 50% 0%,rgba(20,55,75,.68),rgba(4,15,25,.72))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.48),0 0 20px rgba(121,243,240,.14)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
#notifPanel{background:rgba(0,10,20,.42)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important}
#notifPanelInner{
  background:radial-gradient(circle at 90% 0%,rgba(65,80,151,.10),transparent 28%),linear-gradient(150deg,rgba(4,19,31,.82),rgba(3,12,25,.88))!important;
  box-shadow:0 18px 50px rgba(0,3,10,.48),inset 0 1px 0 rgba(173,255,250,.035)!important;
}
#notifPanelHeader{background:rgba(0,20,50,.38)!important}
.notif-item{background:rgba(255,255,255,.025)!important}
.notif-item:hover{background:rgba(255,255,255,.055)!important}


/* UI V20: hidden overlays must never intercept menu/login interactions. */
.screen[hidden],.modal-screen[hidden]{display:none!important;pointer-events:none!important}

/* Menu utilities: compact content-width controls anchored in the lower-right corner. */
#menuScreen .download-cta,#menuScreen .controls-cta{
 position:absolute!important;
 left:auto!important;
 width:max-content!important;
 min-width:0!important;
 max-width:max-content!important;
 min-height:28px!important;
 height:28px!important;
 padding:4px 9px!important;
 margin:0!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 gap:6px!important;
 font-size:9px!important;
 line-height:1!important;
 white-space:nowrap!important;
 border-radius:7px!important;
 z-index:22!important;
}
#menuScreen .download-cta{right:10px!important;bottom:44px!important;top:auto!important}
#menuScreen .controls-cta{right:10px!important;bottom:10px!important;top:auto!important}
#menuScreen .download-cta .ui-icon,#menuScreen .controls-cta .ui-icon{width:13px!important;height:13px!important}
@media(max-width:700px){
 #menuScreen .download-cta,#menuScreen .controls-cta{
  position:absolute!important;
  left:auto!important;
  width:max-content!important;
  max-width:calc(100% - 20px)!important;
  min-width:0!important;
  min-height:26px!important;
  height:26px!important;
  padding:3px 8px!important;
  font-size:8px!important;
 }
 #menuScreen .download-cta{right:8px!important;bottom:40px!important}
 #menuScreen .controls-cta{right:8px!important;bottom:8px!important}
}


/* Mobile/Android shell: downloads, control configuration and browser fullscreen are desktop-only utilities. */
@media(max-width:700px),(pointer:coarse){
 #mobileDownloadTopBtn,#mobileControlsTopBtn,#fullscreenBtn,
 #menuScreen #downloadBtn,#menuScreen #controlsBtn{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
 }
}
body.abyssal-native-shell #mobileDownloadTopBtn,
body.abyssal-native-shell #mobileControlsTopBtn,
body.abyssal-native-shell #fullscreenBtn,
body.abyssal-native-shell #downloadBtn,
body.abyssal-native-shell #controlsBtn{
 display:none!important;
 visibility:hidden!important;
 pointer-events:none!important;
}


/* Menu mobile V21: requested top-right utilities and stable resonance flow. */
@media(max-width:700px),(pointer:coarse){
 #mobileDownloadTopBtn,#mobileControlsTopBtn{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
 }
 #fullscreenBtn{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  width:0!important;
  min-width:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
 }
 #menuScreen #downloadBtn,#menuScreen #controlsBtn{display:none!important}
 #menuScreen #resonanceBtn{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:100%!important;
  min-height:36px!important;
  height:36px!important;
  margin:0 0 8px!important;
  z-index:auto!important;
 }
 #menuScreen #playBtn{margin-top:0!important}
}
body.abyssal-native-shell #mobileDownloadTopBtn,
body.abyssal-native-shell #mobileControlsTopBtn{
 display:inline-flex!important;
 visibility:visible!important;
 pointer-events:auto!important;
}
body.abyssal-native-shell #fullscreenBtn{
 display:none!important;
 visibility:hidden!important;
 pointer-events:none!important;
 width:0!important;
 min-width:0!important;
 height:0!important;
 padding:0!important;
 margin:0!important;
 border:0!important;
}


/* Top-right utility spacing: keep controls distinct and easy to tap. */
.menu-top-actions{gap:8px!important}
#mobileDownloadTopBtn,#mobileControlsTopBtn{margin:0!important}
@media(max-width:700px),(pointer:coarse){
 .menu-top-actions{gap:7px!important}
}

/* MENU BUTTON SPACING — keep every action visually separated. */
#menuScreen .menu-content{
 row-gap:14px!important;
}
#menuScreen .menu-secondary-actions{
 row-gap:10px!important;
 column-gap:10px!important;
}
@media(max-width:700px){
 #menuScreen .menu-content{row-gap:9px!important}
 #menuScreen .menu-secondary-actions{row-gap:8px!important;column-gap:8px!important}
}
@media(max-height:560px){
 #menuScreen .menu-content{row-gap:7px!important}
 #menuScreen .menu-secondary-actions{row-gap:7px!important;column-gap:7px!important}
}


/* Menu CTA separation: resonance, solo and online must never visually overlap. */
#menuScreen #resonanceBtn{margin-bottom:10px!important}
#menuScreen #playBtn{margin-top:0!important;margin-bottom:10px!important}
#menuScreen .menu-secondary-actions{margin-top:0!important}
#menuScreen #onlineBtn.online-cta{margin-top:0!important}
@media(max-width:700px),(pointer:coarse){
 #menuScreen #resonanceBtn{margin-bottom:8px!important}
 #menuScreen #playBtn{margin-bottom:8px!important}
}

/* Abyssary stats: stable three-badge layout without escaping the creature card. */
.codex-header-row{align-items:flex-start!important}
.monster-stats-row{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:5px!important;max-width:100%!important}
.stat-badge{white-space:nowrap!important;min-width:0!important}
.stat-spd{background:rgba(91,180,255,.16);border:1px solid rgba(91,180,255,.4);color:#9fd7ff}
.monster-codex-card{overflow:hidden}
@media(max-width:600px){
 .codex-header-row{display:grid!important;grid-template-columns:1fr!important}
 .monster-stats-row{justify-content:flex-start!important;width:100%!important}
 .stat-badge{font-size:8px!important;padding:3px 5px!important}
}

/* Public profile actions: compact controls at the top of the profile content. */
.profile-top-actions{
 display:flex!important;
 align-items:center!important;
 justify-content:flex-start!important;
 flex-direction:row!important;
 flex-wrap:wrap!important;
 gap:7px!important;
 margin:0 0 12px!important;
}
.profile-top-actions[hidden]{display:none!important}
.profile-action-btn{
 width:auto!important;
 min-width:0!important;
 height:30px!important;
 min-height:30px!important;
 margin:0!important;
 padding:0 10px!important;
 border-radius:7px!important;
 font:800 9px 'DM Mono',monospace!important;
 letter-spacing:.06em!important;
}
.profile-like-btn{border:1px solid rgba(121,243,240,.42);background:rgba(121,243,240,.09);color:#cafffb}
.profile-report-btn{border:1px solid rgba(255,69,89,.72)!important;background:rgba(151,18,38,.30)!important;color:#ff8392!important}
.profile-report-btn:hover{background:rgba(197,25,49,.48)!important;border-color:#ff5368!important;color:#fff!important}
.profile-top-actions #profileLikesCount{margin-left:2px;font-size:9px}


/* Mobile main-action order: Resonance must sit directly above Solo, then Online. */
@media(max-width:700px),(pointer:coarse){
 #menuScreen .menu-content{display:flex!important;flex-direction:column!important}
 #menuScreen #resonanceBtn{order:20!important;position:static!important;width:100%!important;margin:0 0 8px!important}
 #menuScreen #playBtn{order:21!important;position:relative!important;width:100%!important;margin:0 0 8px!important}
 #menuScreen #wheelBtn{order:22!important}
 #menuScreen .menu-secondary-actions{order:23!important;margin-top:8px!important}
 #menuScreen #onlineBtn.online-cta{margin-top:0!important}
}


/* Abyssary stat reading order: centered HP, Damage, Speed from left to right. */
.monster-stats-row{
 width:100%!important;
 max-width:100%!important;
 display:flex!important;
 flex-direction:row!important;
 flex-wrap:wrap!important;
 align-items:center!important;
 justify-content:center!important;
 gap:6px!important;
 text-align:center!important;
}
.monster-stats-row .stat-hp{order:1}
.monster-stats-row .stat-dmg{order:2}
.monster-stats-row .stat-spd{order:3}
@media(max-width:600px){
 .monster-stats-row{justify-content:center!important}
}


/* Public profile actions live in the upper-right corner of the identity box. */
.profile-hero{position:relative!important}
.profile-identity{min-width:0;flex:1}
.profile-identity .profile-top-actions{
 position:absolute!important;
 top:10px!important;
 right:10px!important;
 width:auto!important;
 max-width:55%!important;
 margin:0!important;
 justify-content:flex-end!important;
}
.profile-identity .profile-top-actions #profileLikesCount{width:100%;text-align:right}
@media(max-width:560px){
 .profile-identity{padding-right:0}
 .profile-identity .profile-top-actions{position:static!important;max-width:100%!important;margin-top:9px!important;justify-content:flex-start!important}
 .profile-identity .profile-top-actions #profileLikesCount{width:auto;text-align:left}
}

/* Match history: compact scoreboard inspired by competitive game clients. */
.match-history-modal{width:min(820px,calc(100vw - 24px));max-height:90dvh;overflow:auto}
.match-history-intro{color:#88a6b5;font-size:11px;line-height:1.5}
.match-history-list{display:grid;gap:10px;margin:14px 0}
.match-history-card{border:1px solid rgba(121,243,240,.18);border-radius:9px;background:rgba(5,22,34,.82);overflow:hidden}
.match-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:rgba(121,243,240,.055);border-bottom:1px solid rgba(121,243,240,.12)}
.match-history-head div{display:flex;gap:9px;align-items:center}.match-history-head strong{font:800 10px 'DM Mono',monospace;color:#d9ffff}.match-history-head span,.match-history-head time{font:8px 'DM Mono',monospace;color:#7697a7}
.match-history-columns,.match-history-player{display:grid;grid-template-columns:minmax(110px,1fr) 64px 90px 88px;align-items:center;gap:8px;padding:7px 12px}
.match-history-columns{font:700 7px 'DM Mono',monospace;color:#668997;letter-spacing:.08em}
.match-history-player{border-top:1px solid rgba(120,180,195,.08);font-size:10px}.match-history-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-history-player>span{text-align:center;font:800 9px 'DM Mono',monospace;color:#a7d8df}
.match-profile-btn{min-height:28px;border:1px solid rgba(121,243,240,.28);border-radius:6px;background:rgba(121,243,240,.07);color:#cafffb;font:800 8px 'DM Mono',monospace;cursor:pointer}
.match-history-empty{padding:24px;text-align:center;border:1px dashed rgba(121,243,240,.2);color:#7897a5;font-size:11px}
@media(max-width:560px){
 .match-history-columns,.match-history-player{grid-template-columns:minmax(88px,1fr) 46px 70px 72px;padding-inline:8px;gap:4px}
 .match-history-player{font-size:9px}.match-profile-btn{font-size:7px;padding:4px}
 .match-history-head{align-items:flex-start}.match-history-head time{text-align:right}
}


/* Controles: manter o texto do botão de salvar em branco. */
#controlsCloseBtn{color:#fff!important;}


/* RESSONÂNCIA: texto branco e botões PVE/PVP com dimensões idênticas. */
.resonance-modal .resonance-mode-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
}
.resonance-modal .resonance-mode-tabs button{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  height:38px!important;
  margin:0!important;
  color:#fff!important;
  white-space:normal!important;
}
.resonance-modal #saveResonanceBtn{
  color:#fff!important;
}


/* Botões escuros: garantir contraste com texto branco. */
#createCardumeBtn,
#sendSupportBtn{
  color:#fff!important;
}
#createCardumeBtn span,
#sendSupportBtn span{
  color:#fff!important;
}


/* Corrige o botão de tela cheia no mobile: mantém o SVG visível e clicável. */
@media (max-width:700px), (pointer:coarse){
  .top-actions #fullscreenBtn{
    display:inline-flex!important;
    visibility:visible!important;
    pointer-events:auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid var(--line)!important;
    overflow:visible!important;
    font-size:0!important;
  }
  .top-actions #fullscreenBtn .ui-icon{
    display:block!important;
    visibility:visible!important;
    width:16px!important;
    height:16px!important;
    flex:0 0 16px!important;
  }
}
body.abyssal-native-shell .top-actions #fullscreenBtn{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid var(--line)!important;
}
body.abyssal-native-shell .top-actions #fullscreenBtn .ui-icon{
  display:block!important;
  visibility:visible!important;
  width:16px!important;
  height:16px!important;
}

/* Cinzel is the single visual typeface for every visible game surface. */
#onlineBtn,#onlineBtn *,button,button *,input,select,textarea,label,a,.menu-action,.menu-action *{font-family:var(--abyssal-runic)!important;}
/* Remove decorative microcopy while retaining gameplay, legal, account and purchase information. */
.brand small,.joystick-base+small,.mobile-dual-stick>small{font-family:var(--abyssal-runic)!important;}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

/* MENU ACCOUNT LAYOUT V17: desktop account/login at the upper-right of the menu card. */
@media(min-width:701px){
 #menuScreen .menu-content{position:relative!important;}
 #menuScreen .menu-account-utility{
  position:absolute!important;top:18px!important;right:18px!important;z-index:20!important;
  width:220px!important;max-width:220px!important;margin:0!important;padding:0!important;border:0!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;
  text-align:right!important;background:transparent!important;
 }
 #menuScreen .menu-account-utility #accountStatus{font-size:9px!important;line-height:1.25!important;color:#8aaab9!important;}
 #menuScreen .menu-account-utility #loginBtn{
  width:100%!important;min-height:36px!important;padding:8px 12px!important;text-align:center!important;
  font-family:var(--abyssal-runic)!important;font-size:11px!important;font-weight:700!important;
 }
 #menuScreen .menu-language-utility{
  position:absolute!important;top:88px!important;right:18px!important;z-index:20!important;
  width:220px!important;max-width:220px!important;margin:0!important;padding:0!important;
  display:flex!important;justify-content:flex-end!important;gap:8px!important;
 }
 #menuScreen .menu-language-utility label{font-family:var(--abyssal-runic)!important;font-size:9px!important;}
 #menuScreen .menu-language-utility select{width:126px!important;max-width:126px!important;height:34px!important;font-family:var(--abyssal-runic)!important;}
 #menuScreen .record-row{margin-top:18px!important;}
 #menuScreen .menu-footer{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  z-index:12!important;margin:16px 0 0!important;pointer-events:auto!important;
 }
 #menuScreen .legal-footer{display:flex!important;flex-wrap:wrap!important;gap:8px 14px!important;pointer-events:auto!important;}
 #menuScreen .legal-footer a{position:relative!important;z-index:13!important;pointer-events:auto!important;color:#9eb9c7!important;text-decoration:none!important;}
 #menuScreen .legal-footer a:hover,#menuScreen .legal-footer a:focus-visible{color:#8efff2!important;text-decoration:underline!important;}
}
@media(max-width:700px){
 #menuScreen .menu-footer{pointer-events:auto!important;}
 #menuScreen .legal-footer,#menuScreen .legal-footer a{pointer-events:auto!important;}
}

/* RESONANCE TYPOGRAPHY V18: runic identity and stronger menu label. */
#menuScreen .resonance-menu-btn,
#menuScreen .resonance-label,
.resonance-modal,
.resonance-modal button,
.resonance-modal input,
.resonance-modal select,
.resonance-category-title,
.resonance-selection-count,
.resonance-skill-option,
.resonance-skill-icon,
.resonance-skill-copy,
.resonance-skill-copy strong,
.resonance-skill-copy small{
 font-family:var(--abyssal-runic)!important;
}
#menuScreen .resonance-menu-btn{font-size:14px!important;min-height:48px!important;}
#menuScreen .resonance-label{font-size:14px!important;letter-spacing:.08em!important;}
.resonance-category-title{font-size:12px!important;}


/* MENU CORNER UTILITIES V19: legal links bottom-left, account/language upper-right. */
@media(min-width:701px){
 #menuScreen .menu-content{position:relative!important;}
 #menuScreen .menu-account-utility{
  position:absolute!important;top:18px!important;right:18px!important;left:auto!important;
  z-index:24!important;width:220px!important;max-width:220px!important;margin:0!important;
 }
 #menuScreen .menu-language-utility{
  position:absolute!important;top:86px!important;right:18px!important;left:auto!important;
  z-index:24!important;width:220px!important;max-width:220px!important;margin:0!important;
 }
 #menuScreen .menu-footer{
  position:absolute!important;left:18px!important;right:auto!important;bottom:14px!important;top:auto!important;
  z-index:24!important;margin:0!important;width:auto!important;max-width:calc(100% - 36px)!important;
  pointer-events:auto!important;
 }
 #menuScreen .legal-footer{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:7px 14px!important;}
}
@media(max-width:700px){
 #menuScreen .menu-account-utility{position:relative!important;top:auto!important;right:auto!important;left:auto!important;}
 #menuScreen .menu-language-utility{position:relative!important;top:auto!important;right:auto!important;left:auto!important;}
 #menuScreen .menu-footer{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
  margin:10px 11px 16px!important;max-width:none!important;
 }
}


/* MENU ACCOUNT ORDER V20: account upper-right, language directly below. */
@media(min-width:701px){
 #menuScreen .menu-account-utility{position:absolute!important;top:16px!important;right:18px!important;left:auto!important;z-index:30!important;}
 #menuScreen .menu-language-utility{position:absolute!important;top:84px!important;right:18px!important;left:auto!important;z-index:30!important;}
}


/* MENU SECTION RIGHT RAIL V21: account and language live on the right side of menuScreen. */
@media(min-width:701px){
 #menuScreen{position:relative!important;}
 #menuScreen .menu-account-utility{
  position:absolute!important;
  top:clamp(24px,4vh,46px)!important;
  right:clamp(24px,3vw,48px)!important;
  left:auto!important;
  width:230px!important;max-width:230px!important;
  margin:0!important;padding:0!important;border:0!important;
  z-index:35!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;
  background:transparent!important;text-align:right!important;
 }
 #menuScreen .menu-language-utility{
  position:absolute!important;
  top:clamp(94px,12vh,120px)!important;
  right:clamp(24px,3vw,48px)!important;
  left:auto!important;
  width:230px!important;max-width:230px!important;
  margin:0!important;padding:0!important;
  z-index:35!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;
 }
 #menuScreen .menu-language-utility select{width:132px!important;max-width:132px!important;}
}


/* LEGAL FOOTER RESTORE V22 */
@media(min-width:701px){
 #menuScreen .menu-footer{position:absolute!important;left:18px!important;right:auto!important;bottom:14px!important;top:auto!important;z-index:34!important;margin:0!important;pointer-events:auto!important;}
 #menuScreen .legal-footer{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:7px 14px!important;pointer-events:auto!important;}
 #menuScreen .legal-footer a{pointer-events:auto!important;position:relative!important;z-index:35!important;}
}


/* MENU ACCOUNT/LANGUAGE FINAL POSITION: anchor both utilities to the full menu screen. */
@media(min-width:701px){
  #menuScreen .menu-content{position:static!important;}
  #menuScreen .menu-account-utility{
    position:absolute!important;
    top:clamp(24px,4vh,46px)!important;
    right:clamp(24px,3vw,48px)!important;
    left:auto!important;
    z-index:60!important;
  }
  #menuScreen .menu-language-utility{
    position:absolute!important;
    top:clamp(104px,14vh,132px)!important;
    right:clamp(24px,3vw,48px)!important;
    left:auto!important;
    z-index:60!important;
  }
}
@media(max-width:700px){
  #menuScreen .menu-account-utility,
  #menuScreen .menu-language-utility{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
  }
}


/* LEGAL LINKS VISIBILITY FIX V23: restore footer on desktop and mobile menu. */
#menuScreen{
  position:relative!important;
}
#menuScreen .menu-footer{
  display:block!important;
  position:absolute!important;
  left:clamp(12px,2vw,24px)!important;
  right:clamp(12px,2vw,24px)!important;
  top:auto!important;
  bottom:max(10px, env(safe-area-inset-bottom))!important;
  width:auto!important;
  max-width:none!important;
  min-height:24px!important;
  height:auto!important;
  margin:0!important;
  padding:6px 9px!important;
  z-index:100!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  pointer-events:auto!important;
  background:linear-gradient(90deg,rgba(3,13,23,.82),rgba(3,13,23,.42))!important;
  border-top:1px solid rgba(121,243,240,.13)!important;
  border-radius:6px!important;
}
#menuScreen .legal-footer{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:6px 16px!important;
  width:100%!important;
  min-height:20px!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#menuScreen .legal-footer a{
  display:inline-flex!important;
  align-items:center!important;
  position:relative!important;
  z-index:101!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  color:#b5d0dc!important;
  font-size:9px!important;
  line-height:1.5!important;
  letter-spacing:.04em!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
#menuScreen .legal-footer a:hover,
#menuScreen .legal-footer a:focus-visible{
  color:#8efff2!important;
  text-decoration:underline!important;
}
@media(max-width:700px){
  #menuScreen{padding-bottom:54px!important;overflow-y:auto!important;overflow-x:hidden!important;}
  #menuScreen .menu-footer{
    left:8px!important;
    right:8px!important;
    bottom:max(6px, env(safe-area-inset-bottom))!important;
    padding:5px 7px!important;
  }
  #menuScreen .legal-footer{
    justify-content:center!important;
    gap:4px 11px!important;
  }
  #menuScreen .legal-footer a{font-size:8px!important;}
}


/* CONTRASTE DOS BOTOES PRINCIPAIS: texto branco em todos os botoes com fundo cyan. */
#menuScreen .primary-btn,
.primary-btn,
.primary-btn span,
button.primary-btn,
button.primary-btn span{
  color:#fff!important;
}


/* UNIVERSAL MODAL CLOSE V23: X remains visible while modal content scrolls. */
.modal-screen>.modal-card{position:relative!important;}
.modal-screen>.modal-card>.modal-top-close{
 position:sticky!important;
 top:8px!important;
 right:8px!important;
 float:right!important;
 margin:0 0 -38px auto!important;
 z-index:80!important;
 width:34px!important;
 height:34px!important;
 display:grid!important;
 place-items:center!important;
 pointer-events:auto!important;
 cursor:pointer!important;
 background:rgba(3,15,26,.96)!important;
 backdrop-filter:blur(8px);
}
.modal-screen>.modal-card>.modal-top-close:focus-visible{outline:2px solid #79f3f0!important;outline-offset:2px!important;}


/* LEGAL FOOTER FINAL ANCHOR V24: never participate in menu flow. */
#menuScreen{position:relative!important;}
#menuScreen .menu-footer{
  display:block!important;
  position:fixed!important;
  left:max(12px, env(safe-area-inset-left))!important;
  right:auto!important;
  top:auto!important;
  bottom:max(10px, env(safe-area-inset-bottom))!important;
  width:max-content!important;
  max-width:calc(100vw - 24px)!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:5px 8px!important;
  z-index:120!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#menuScreen[hidden] .menu-footer{display:none!important;}
#menuScreen .legal-footer{
  display:flex!important;
  width:auto!important;
  min-height:0!important;
  flex-flow:row wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px 14px!important;
  margin:0!important;
  padding:0!important;
}
#menuScreen .legal-footer a{
  display:inline-flex!important;
  position:static!important;
  font-size:9px!important;
  line-height:1.35!important;
  white-space:nowrap!important;
  pointer-events:auto!important;
}
@media(max-width:700px){
  #menuScreen{padding-bottom:52px!important;}
  #menuScreen .menu-footer{
    position:fixed!important;
    left:max(7px, env(safe-area-inset-left))!important;
    right:auto!important;
    top:auto!important;
    bottom:max(6px, env(safe-area-inset-bottom))!important;
    width:max-content!important;
    max-width:calc(100vw - 14px)!important;
    margin:0!important;
    padding:4px 6px!important;
  }
  #menuScreen .legal-footer{justify-content:flex-start!important;gap:3px 9px!important;}
  #menuScreen .legal-footer a{font-size:8px!important;}
}

/* LEGAL LINKS POSITION FIX V25: bottom-left inside the menu, without a duplicate/top-left layer. */
#menuScreen{position:absolute!important;inset:0!important;}
#menuScreen .menu-footer{
  display:block!important;
  position:absolute!important;
  left:clamp(12px,2vw,24px)!important;
  right:auto!important;
  top:auto!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  width:max-content!important;
  max-width:calc(100% - 24px)!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  z-index:140!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  pointer-events:auto!important;
}
#menuScreen .legal-footer{
  display:flex!important;
  width:auto!important;
  min-height:0!important;
  flex-flow:row wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px 14px!important;
  margin:0!important;
  padding:0!important;
}
#menuScreen .legal-footer a{
  display:inline-flex!important;
  position:static!important;
  color:#b5d0dc!important;
  font-size:9px!important;
  line-height:1.4!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#menuScreen .legal-footer a:hover,
#menuScreen .legal-footer a:focus-visible{
  color:#8efff2!important;
  text-decoration:underline!important;
}
#menuScreen[hidden] .menu-footer{display:none!important;}
@media(max-width:700px){
  #menuScreen .menu-footer{
    left:max(8px,env(safe-area-inset-left))!important;
    right:auto!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    max-width:calc(100% - 16px)!important;
  }
  #menuScreen .legal-footer{justify-content:flex-start!important;gap:4px 9px!important;}
  #menuScreen .legal-footer a{font-size:8px!important;}
}


/* MENU LEGAL MOBILE FINAL FLOW V26: desktop stays anchored; mobile legal links are the last menu element. */
@media(max-width:700px){
  #menuScreen{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:0!important;
  }
  #menuScreen .menu-content{
    min-height:100%!important;
    height:auto!important;
    padding-bottom:18px!important;
  }
  #menuScreen .menu-footer{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:24px 12px max(14px,env(safe-area-inset-bottom))!important;
    padding:8px 0 0!important;
    z-index:20!important;
    order:999!important;
    background:transparent!important;
    border-top:1px solid rgba(121,243,240,.13)!important;
  }
  #menuScreen .legal-footer{
    width:100%!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:6px 11px!important;
  }
  #menuScreen .legal-footer a{font-size:8px!important;}
}


/* Desktop-only level-up readability: larger selection panel and cards without changing mobile. */
@media(min-width:701px){
 #upgradeScreen{padding:clamp(22px,3vw,42px)}
 #upgradeScreen .modal-card{width:min(1040px,94vw);max-width:1040px;padding:clamp(24px,3vw,38px)}
 #upgradeScreen .modal-card h2{font-size:clamp(34px,3.2vw,48px);line-height:1.08}
 #upgradeScreen .modal-card>p{font-size:14px;line-height:1.55}
 #upgradeScreen .upgrade-choices{gap:16px}
 #upgradeScreen .upgrade-card{padding:20px 18px;gap:8px;min-height:220px}
 #upgradeScreen .upgrade-icon{font-size:34px}
 #upgradeScreen .upgrade-card strong{font-size:15px;line-height:1.35}
 #upgradeScreen .upgrade-card p{font-size:13px;line-height:1.55}
 #upgradeScreen .upgrade-progress{font-size:11px;line-height:1.4}
 #upgradeScreen .upgrade-timer-copy strong{font-size:14px}
 #upgradeScreen .upgrade-timer-copy span{font-size:11px}
}


/* Immersive gameplay viewport: the arena owns the full viewport while persistent controls float above it. */
body.game-active #app{
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;
  min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
}
body.game-active #gameShell{
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;
  min-height:0!important;border:0!important;margin:0!important;background:#02080d!important;
}
body.game-active .topbar{
  position:fixed!important;z-index:45!important;top:max(8px,env(safe-area-inset-top))!important;
  left:max(12px,env(safe-area-inset-left))!important;right:max(12px,env(safe-area-inset-right))!important;
  height:52px!important;padding:0 8px!important;border:0!important;border-radius:12px!important;
  background:linear-gradient(90deg,rgba(2,9,15,.72),rgba(2,9,15,.28),rgba(2,9,15,.72))!important;
  backdrop-filter:blur(7px);transition:opacity .2s ease,transform .2s ease!important;
}
body.game-active .page-footer{display:none!important}
body.game-active #gameShell::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 5%,transparent 17%,transparent 83%,rgba(0,0,0,.34) 95%,rgba(0,0,0,.78) 100%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 9%,transparent 22%,transparent 78%,rgba(0,0,0,.18) 91%,rgba(0,0,0,.76) 100%);
  box-shadow:inset 0 0 min(18vw,240px) rgba(0,0,0,.48);
}
body.game-active #game{z-index:0}
body.game-active .hud,body.game-active #selectedSkillsPanel,body.game-active #runEnergyRanking,
body.game-active #activeAbilities,body.game-active #toggleHudBtn,body.game-active .mobile-pause-btn,
body.game-active #roomBadge,body.game-active .boss-alert,body.game-active #abyssalDangerAlert,
body.game-active .mobile-joystick,body.game-active .mobile-dual-stick{z-index:4!important}
body.game-active.hud-collapsed .topbar{opacity:0!important;transform:translateY(-16px)!important;pointer-events:none!important}
body.game-active.hud-collapsed #toggleHudBtn{opacity:1!important;pointer-events:auto!important;transform:none!important}

@media (max-width:700px),(pointer:coarse){
 body.game-active .topbar{
   top:max(5px,env(safe-area-inset-top))!important;left:max(7px,env(safe-area-inset-left))!important;
   right:max(7px,env(safe-area-inset-right))!important;height:46px!important;padding:0 5px!important;
   background:linear-gradient(90deg,rgba(2,9,15,.58),rgba(2,9,15,.16),rgba(2,9,15,.58))!important;
 }
 body.game-active #gameShell::after{
   background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.16) 7%,transparent 16%,transparent 84%,rgba(0,0,0,.14) 93%,rgba(0,0,0,.6) 100%);
   box-shadow:none;
 }
}


/* GAMEPLAY HUD V7: reserve the floating topbar only while it is visible. */
body.game-active{--match-ui-top:calc(max(8px,env(safe-area-inset-top)) + 64px)}
body.game-active.hud-collapsed{--match-ui-top:max(10px,env(safe-area-inset-top))}
@media (min-width:701px) and (pointer:fine){
 body.game-active:not(.mobile-game-active) .hud{top:var(--match-ui-top)!important;transition:top .2s ease!important}
 body.game-active:not(.mobile-game-active) #selectedSkillsPanel{top:var(--match-ui-top)!important;transition:top .2s ease!important}
 body.game-active:not(.mobile-game-active) #toggleHudBtn{top:var(--match-ui-top)!important;transition:top .2s ease!important}
 body.game-active:not(.mobile-game-active) #endDiveBtn{top:calc(var(--match-ui-top) + 44px)!important;transition:top .2s ease!important}
 body.game-active:not(.mobile-game-active) #bossAlert.boss-alert,
 body.game-active:not(.mobile-game-active) #abyssalDangerAlert{top:var(--match-ui-top)!important}
 body.game-active.hud-collapsed:not(.mobile-game-active) #toggleHudBtn{top:var(--match-ui-top)!important}
}
@media (max-width:700px),(pointer:coarse){
 body.game-active{--match-ui-top:calc(max(5px,env(safe-area-inset-top)) + 54px)}
 body.game-active.hud-collapsed{--match-ui-top:max(7px,env(safe-area-inset-top))}
 body.mobile-game-active .hud{top:var(--match-ui-top)!important;transition:top .2s ease!important}
 body.mobile-game-active #toggleHudBtn{top:var(--match-ui-top)!important;transition:top .2s ease!important}
 body.mobile-game-active #mobilePauseBtn{top:var(--match-ui-top)!important;transition:top .2s ease!important}
 body.mobile-game-active #selectedSkillsPanel{top:calc(var(--match-ui-top) + 104px)!important;transition:top .2s ease!important}
 body.mobile-game-active #runEnergyRanking{top:calc(var(--match-ui-top) + 104px)!important;transition:top .2s ease!important}
}


/* MOBILE MATCH HUD V18: gameplay already owns the full viewport, so HUD starts at the safe-area top. */
@media (max-width:700px),(pointer:coarse){
 body.game-active,
 body.game-active.hud-collapsed{--match-ui-top:max(7px,env(safe-area-inset-top))}
 body.mobile-game-active .hud{top:var(--match-ui-top)!important}
 body.mobile-game-active #toggleHudBtn{top:var(--match-ui-top)!important}
 body.mobile-game-active #mobilePauseBtn{top:var(--match-ui-top)!important}
 body.mobile-game-active #selectedSkillsPanel,
 body.mobile-game-active #runEnergyRanking{top:calc(var(--match-ui-top) + 104px)!important}
}


/* MATCH EDGE LAYOUT V19: end-dive owns bottom-right; desktop damage ranking grows upward above it. */
@media (min-width:701px) and (pointer:fine){
 body.game-active:not(.mobile-game-active) #endDiveBtn{
  position:fixed!important;left:auto!important;right:14px!important;top:auto!important;bottom:14px!important;
  width:190px!important;max-width:190px!important;transform:none!important;
 }
 body.game-active:not(.mobile-game-active) #runEnergyRanking{
  left:auto!important;right:14px!important;top:auto!important;bottom:62px!important;
  width:190px!important;max-width:190px!important;
  max-height:calc(100dvh - 76px)!important;overflow-y:auto!important;
 }
}
@media (max-width:700px),(pointer:coarse){
 body.mobile-game-active #endDiveBtn{
  position:fixed!important;left:auto!important;right:var(--game-safe-right)!important;
  top:auto!important;bottom:var(--game-safe-bottom)!important;transform:none!important;
 }
 body.mobile-game-active #mobileAimStick.dual-stick-visible{
  bottom:calc(var(--game-safe-bottom) + 54px)!important;
 }
}


/* Authoritative gameplay owns the viewport. The room lobby must never overlay an accepted match. */
body.game-active #roomsScreen{display:none!important;pointer-events:none!important}


/* SHOP SPECIES FILTERS + RARITY V27 */
.shop-filter-bar{
 display:grid;grid-template-columns:minmax(180px,1.35fr) repeat(3,minmax(130px,.8fr));
 gap:8px;margin:10px 0 8px;position:sticky;top:0;z-index:16;
 padding:10px;background:rgba(3,14,23,.92);border:1px solid rgba(121,243,240,.14);
 backdrop-filter:blur(10px);
}
.shop-filter-search,.shop-filter-select{min-height:38px!important;margin:0!important;font-size:10px!important}
.shop-filter-summary{min-height:20px;margin:0 0 8px;color:#789aa8;font:9px 'DM Mono',monospace;letter-spacing:.07em}
.skin-card{position:relative;overflow:hidden}
.skin-rarity{
 display:inline-flex;align-items:center;gap:5px;margin:0 0 6px;padding:3px 6px;border:1px solid currentColor;
 font:700 8px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;background:rgba(2,9,15,.5)
}
.skin-rarity.common{color:#8fa8ae}.skin-rarity.uncommon{color:#73d69c}.skin-rarity.rare{color:#67c7ff}
.skin-rarity.epic{color:#b78cff}.skin-rarity.legendary{color:#ffb85f}.skin-rarity.mythic{color:#ff6f9d}.skin-rarity.colossal{color:#ff4f67}
.skin-card[data-rarity="legendary"] .skin-preview,
.skin-card[data-rarity="mythic"] .skin-preview,
.skin-card[data-rarity="colossal"] .skin-preview{box-shadow:inset 0 0 26px rgba(255,255,255,.03),0 0 22px color-mix(in srgb,currentColor 18%,transparent)}
.skin-ability{min-height:72px}
@media(max-width:900px){
 .shop-filter-bar{grid-template-columns:1fr 1fr;position:relative}
}
@media(max-width:560px){
 .shop-filter-bar{grid-template-columns:1fr}
 .shop-filter-search,.shop-filter-select{width:100%}
}


/* Golden fusion recipes are guidance, not additional selectable abilities. */
.resonance-fusion-guide{margin:18px 0 14px;padding:14px;border:1px solid rgba(231,183,79,.48);border-radius:14px;background:radial-gradient(ellipse at 50% 0,rgba(102,68,24,.30),rgba(10,16,25,.80) 74%);box-shadow:inset 0 0 26px rgba(206,151,66,.09)}
.resonance-fusion-heading{margin:0 0 8px;color:#f5d68c;font:900 13px/1.4 'Manrope',sans-serif;letter-spacing:.07em;text-shadow:0 0 12px #ba7e3070}
.resonance-fusion-explainer{margin:0 0 11px;color:#dbc9a5;font:500 12px/1.55 'Manrope',sans-serif}
.resonance-fusion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.resonance-fusion-recipe{padding:12px;background:linear-gradient(135deg,rgba(28,24,17,.87),rgba(12,23,29,.83));border:1px solid rgba(201,154,76,.25);border-radius:9px;min-width:0}
.resonance-fusion-recipe strong{display:block;color:#e5bd6e;font-size:12px;letter-spacing:.04em}
.resonance-fusion-recipe p{margin:7px 0;font-size:12px;color:#efe4ca;line-height:1.45}
.resonance-fusion-recipe small{display:block;color:#b9afa1;font-size:10px;line-height:1.35}
.resonance-fusion-recipe.ready{border-color:#ffe2a0;box-shadow:inset 0 0 14px rgba(247,205,105,.13),0 0 12px rgba(219,162,53,.14)}
.resonance-fusion-recipe.ready small{color:#ffe19a;font-weight:800}
@media(max-width:570px){.resonance-fusion-grid{grid-template-columns:1fr}.resonance-fusion-guide{padding:10px}}

/* FOSSAS HUD V20: independent safe zones for stats, rankings and resonance.
   The cave and the player's reticle must remain visible on narrow phones. */
@media (max-width:700px),(pointer:coarse){
 body.mobile-game-active .hud{
  width:min(58vw,290px)!important;max-width:min(58vw,290px)!important;
  top:max(7px,env(safe-area-inset-top))!important;left:50%!important;right:auto!important;
  background:transparent!important;box-shadow:none!important;
  opacity:.94!important;pointer-events:none!important;
 }
 body.mobile-game-active .abyss-depth-meter{
  order:-2!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;
  width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  margin:6px 0 8px!important;padding:7px 9px!important;
  border-radius:7px!important;background:rgba(2,14,24,.78)!important;
  text-align:center!important;overflow:hidden!important;
 }
 body.mobile-game-active .abyss-depth-meter strong{
  font-size:clamp(10px,3.1vw,13px)!important;letter-spacing:.045em!important;
  white-space:nowrap!important;
 }
 body.mobile-game-active .abyss-depth-meter small,
 body.mobile-game-active .abyss-depth-meter span{
  font-size:clamp(7px,2vw,9px)!important;line-height:1.3!important;
  max-width:100%!important;letter-spacing:.08em!important;
 }
 body.mobile-game-active .hud .bars{
  order:0!important;width:100%!important;max-width:100%!important;
  margin:0!important;min-width:0!important;
 }
 body.mobile-game-active .hud-top{
  order:1!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  margin-top:6px!important;gap:4px!important;
 }
 body.mobile-game-active .hud-stat{
  padding:4px 2px!important;background:rgba(2,15,26,.85)!important;
  border:1px solid rgba(125,227,220,.16)!important;
 }
 body.mobile-game-active .hud-stat small{font-size:6px!important}
 body.mobile-game-active .hud-stat strong{font-size:11px!important}
 body.mobile-game-active #selectedSkillsPanel,
 body.mobile-game-active #runEnergyRanking{
  position:fixed!important;top:calc(max(7px,env(safe-area-inset-top)) + 176px)!important;
  bottom:auto!important;max-height:min(31dvh,230px)!important;
  opacity:.89!important;overflow-y:auto!important;
  transform:none!important;transition:opacity .15s ease!important;
 }
 body.mobile-game-active #selectedSkillsPanel{
  left:auto!important;right:var(--game-safe-right)!important;
  width:clamp(106px,29vw,133px)!important;
  max-width:calc(38vw - 6px)!important;
 }
 body.mobile-game-active #runEnergyRanking{
  left:var(--game-safe-left)!important;right:auto!important;
  width:clamp(98px,27vw,126px)!important;
  max-width:calc(36vw - 6px)!important;
 }
 body.mobile-game-active #toggleHudBtn,
 body.mobile-game-active #mobilePauseBtn{top:max(7px,env(safe-area-inset-top))!important}
}
/* Compact in landscape: leave the middle and lower half for steering controls. */
@media (max-height:520px) and (pointer:coarse) and (orientation:landscape){
 body.mobile-game-active #selectedSkillsPanel,
 body.mobile-game-active #runEnergyRanking{
  top:calc(max(7px,env(safe-area-inset-top)) + 104px)!important;
  max-height:30dvh!important;
 }
 body.mobile-game-active .hud{width:min(50vw,390px)!important;max-width:min(50vw,390px)!important}
 body.mobile-game-active .abyss-depth-meter{padding:3px 5px!important;margin:0 0 3px!important}
 body.mobile-game-active .abyss-depth-meter small,
 body.mobile-game-active .abyss-depth-meter span{display:none!important}
}

/* FOSSAS DESKTOP HUD V21: safe areas must work even when pointer capability
   is unknown (headless browser, stylus, desktop accessibility devices). */
@media (min-width:701px){
 body.game-active:not(.mobile-game-active) .hud{
  position:fixed!important;left:16px!important;right:auto!important;
  top:76px!important;bottom:auto!important;
  width:min(330px,30vw)!important;max-width:min(330px,30vw)!important;
  height:auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
  transform:none!important;opacity:.93!important;
  background:transparent!important;box-shadow:none!important;
  pointer-events:none!important;
 }
 body.game-active:not(.mobile-game-active) .hud .bars{
  order:0!important;display:flex!important;flex-direction:column!important;
  width:100%!important;max-width:100%!important;margin:0!important;
 }
 body.game-active:not(.mobile-game-active) .hud .bar-label,
 body.game-active:not(.mobile-game-active) .hud .bar{
  width:100%!important;max-width:100%!important;
 }
 body.game-active:not(.mobile-game-active) .hud .mobile-tip{display:none!important}
 body.game-active:not(.mobile-game-active) .hud-top{
  order:1!important;display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;gap:4px!important;margin-top:6px!important;
 }
 body.game-active:not(.mobile-game-active) .hud-stat{
  min-width:0!important;text-align:center!important;
  padding:6px 3px!important;border-radius:6px!important;
  background:rgba(3,16,27,.86)!important;
  border:1px solid rgba(117,229,222,.17)!important;
 }
 body.game-active:not(.mobile-game-active) .hud-stat small{font-size:7px!important}
 body.game-active:not(.mobile-game-active) .hud-stat strong{font-size:12px!important}
 body.game-active:not(.mobile-game-active) .abyss-depth-meter{
  order:-1!important;position:relative!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  margin:0 0 10px!important;padding:9px 11px!important;
  background:rgba(2,13,24,.83)!important;border-radius:8px!important;
  text-align:center!important;box-sizing:border-box!important;
 }
 body.game-active:not(.mobile-game-active) .abyss-depth-meter strong{
  font-size:14px!important;line-height:1.3!important;
 }
 body.game-active:not(.mobile-game-active) #selectedSkillsPanel{
  position:fixed!important;left:auto!important;right:14px!important;
  top:76px!important;bottom:auto!important;
  width:190px!important;max-width:190px!important;
  max-height:calc(100dvh - 172px)!important;overflow-y:auto!important;
  transform:none!important;opacity:.90!important;
 }
 body.game-active:not(.mobile-game-active) #runEnergyRanking{
  position:fixed!important;left:auto!important;right:14px!important;
  top:auto!important;bottom:62px!important;
  width:190px!important;max-width:190px!important;
  max-height:min(24dvh,180px)!important;overflow-y:auto!important;
  transform:none!important;opacity:.90!important;
 }
 body.game-active:not(.mobile-game-active) #toggleHudBtn{
  position:fixed!important;left:auto!important;right:218px!important;
  top:76px!important;bottom:auto!important;opacity:.86!important;
 }
}


/* Mar Abyssal: permanent Fossas cooperative room, aged cracked wood and tentacles. */
#roomsScreen .room-row.rift-room{
  position:relative;isolation:isolate;overflow:hidden;min-height:70px;
  border:2px solid #87583b;border-radius:11px;padding:13px 16px;
  background:
    repeating-linear-gradient(104deg,transparent 0 22px,rgba(17,7,3,.22) 23px 25px,transparent 26px 43px),
    linear-gradient(141deg,transparent 0 29%,#1b0d07 29.4%,transparent 30.2%,transparent 59%,#160a06 59.5%,transparent 60.4%),
    linear-gradient(12deg,#24120a,#68412a 29%,#342014 51%,#785037 75%,#27160e);
  box-shadow:inset 0 2px rgba(235,182,118,.13),inset 0 -12px 24px #150b08,0 4px 12px rgba(0,0,0,.35);
}
#roomsScreen .room-row.rift-room::before,#roomsScreen .room-row.rift-room::after{
  content:"";pointer-events:none;position:absolute;top:-26px;width:86px;height:110px;
  border:solid #a36a4c;border-width:11px 0 0 11px;border-radius:64% 35% 50% 50%;
  filter:drop-shadow(2px 3px 1px #170b07);opacity:.9;z-index:-1;
}
#roomsScreen .room-row.rift-room::before{left:-16px;transform:rotate(23deg)}
#roomsScreen .room-row.rift-room::after{right:-16px;transform:scaleX(-1) rotate(23deg)}
#roomsScreen .room-row.rift-room b{color:#f6dfb6;font-family:Cinzel,serif;font-size:clamp(11px,1.65vw,15px);text-shadow:0 2px 4px #190902;}
#roomsScreen .room-row.rift-room small{color:#e2c298;text-shadow:0 1px 3px #150803;}
#roomsScreen .room-row.rift-room .room-join-btn{position:relative;z-index:2;background:#56311e;border-color:#b28258;color:#fff1d0;}
#roomsScreen .room-row.rift-room .room-join-btn:focus-visible{outline:2px solid #ffdaa2;outline-offset:2px;}

/* Exclusive Abyssal code: explicit, accessible skin choice before redemption. */
.redeem-skin-choice{display:flex;flex-direction:column;gap:9px;margin:16px 0 12px;text-align:left}
.redeem-skin-choice[hidden]{display:none!important}
.redeem-skin-choice label{font-size:11px;letter-spacing:.12em;font-weight:700;color:#dfd6e9}
.redeem-skin-choice select{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid rgba(190,169,231,.5);background:#101725;color:#f8f4ff;font:inherit}
.redeem-skin-choice select:focus-visible{outline:2px solid #9bd9fc;outline-offset:2px}
.redeem-skin-choice p{font-size:12px;line-height:1.5;color:#c1b7d3;margin:0}


/* OCEAN PORTAL MENU + DIVER/SPECIMEN PROFILE V1 */
#menuScreen.ocean-menu{overflow:hidden!important;background:
 radial-gradient(ellipse at 50% 0%,rgba(62,174,205,.18),transparent 45%),
 radial-gradient(ellipse at 50% 82%,rgba(23,67,97,.22),transparent 54%),
 linear-gradient(180deg,#031824 0%,#02121d 46%,#010912 100%)!important}
#menuScreen.ocean-menu:before{opacity:.16!important;background-image:
 radial-gradient(circle at 20% 10%,rgba(183,246,255,.11) 0 1px,transparent 1.7px),
 radial-gradient(circle at 70% 30%,rgba(183,246,255,.09) 0 1px,transparent 1.5px);
 background-size:96px 96px,130px 130px;animation:oceanParticles 18s linear infinite}
#menuScreen.ocean-menu:after{background:linear-gradient(180deg,rgba(112,226,242,.055),transparent 26%,rgba(0,5,12,.42) 100%)!important}
.ocean-menu-stage{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:auto}
.ocean-caustics{position:absolute;inset:-20%;opacity:.12;filter:blur(16px);background:
 repeating-radial-gradient(ellipse at 50% -20%,transparent 0 54px,rgba(126,241,255,.16) 57px,transparent 63px);
 animation:oceanCaustics 14s ease-in-out infinite alternate;pointer-events:none}
.ocean-depth-glow{position:absolute;left:50%;top:42%;width:70vw;height:70vh;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(26,107,139,.13),transparent 68%);filter:blur(20px);pointer-events:none}
#menuScreen.ocean-menu .menu-content{position:absolute;z-index:5;left:clamp(16px,3vw,46px);top:clamp(14px,3vh,34px);width:auto!important;padding:0!important;background:none!important;border:0!important;pointer-events:none}
#menuScreen.ocean-menu .menu-content h1{font-size:clamp(30px,4vw,58px)!important;margin:9px 0!important;opacity:.88}
#menuScreen.ocean-menu .menu-content .eyebrow{font-size:9px}
#menuScreen.ocean-menu>.intro{position:absolute;z-index:5;left:clamp(16px,3vw,46px);top:clamp(96px,18vh,170px);max-width:300px;font-size:11px!important;opacity:.65;pointer-events:none}
#menuScreen.ocean-menu .abyss-orbit-navigation{position:absolute!important;inset:0!important;z-index:4!important;display:block!important;pointer-events:none!important}
#menuScreen.ocean-menu .menu-secondary-actions,#menuScreen.ocean-menu .abyss-orbit-extras{display:contents!important}
#menuScreen.ocean-menu .ocean-portal{
 position:absolute!important;left:var(--portal-x)!important;top:var(--portal-y)!important;
 width:clamp(92px,10vw,138px)!important;height:clamp(92px,10vw,138px)!important;min-height:0!important;
 transform:translate(-50%,-50%)!important;border-radius:50%!important;padding:15px!important;
 display:grid!important;place-items:center!important;text-align:center!important;pointer-events:auto!important;
 overflow:visible!important;color:#eaffff!important;border:1px solid rgba(144,241,255,.56)!important;
 background:radial-gradient(circle at 50% 44%,rgba(113,244,255,.24),rgba(16,88,113,.19) 36%,rgba(2,18,31,.85) 64%,rgba(0,5,12,.98) 74%)!important;
 box-shadow:0 0 0 4px rgba(65,198,218,.05),0 0 28px rgba(70,225,236,.22),inset 0 0 26px rgba(93,232,239,.11)!important;
 clip-path:none!important;transition:filter .2s,box-shadow .2s,transform .2s!important}
#menuScreen.ocean-menu .ocean-portal:before,#menuScreen.ocean-menu .ocean-portal:after{content:"";position:absolute;inset:-9%;border:1px solid rgba(130,243,248,.24);border-radius:48% 52% 44% 56%;animation:portalDrift 7s linear infinite;pointer-events:none}
#menuScreen.ocean-menu .ocean-portal:after{inset:-18%;opacity:.36;animation-duration:11s;animation-direction:reverse}
#menuScreen.ocean-menu .ocean-portal:hover,#menuScreen.ocean-menu .ocean-portal.portal-near{filter:brightness(1.28) saturate(1.15);box-shadow:0 0 0 5px rgba(101,245,248,.09),0 0 48px rgba(88,239,245,.42),inset 0 0 34px rgba(129,247,248,.16)!important}
#menuScreen.ocean-menu .ocean-portal .ui-icon,#menuScreen.ocean-menu .ocean-portal .online-cta-icon,#menuScreen.ocean-menu .ocean-portal .specimen-tentacle-frame,#menuScreen.ocean-menu .ocean-portal .wheel-cta-prizes,#menuScreen.ocean-menu .ocean-portal .wheel-cta-arrow{display:none!important}
#menuScreen.ocean-menu .ocean-portal .menu-action-label,#menuScreen.ocean-menu .ocean-portal .resonance-label,#menuScreen.ocean-menu .ocean-portal .online-cta-copy strong,#menuScreen.ocean-menu .ocean-portal .wheel-cta-copy strong{font-size:clamp(8px,.85vw,11px)!important;letter-spacing:.10em!important;line-height:1.35!important;text-shadow:0 0 12px currentColor}
#menuScreen.ocean-menu .ocean-portal[data-portal-tone="gold"]{border-color:rgba(255,211,122,.68)!important;background:radial-gradient(circle,rgba(255,209,117,.25),rgba(87,54,20,.19) 42%,rgba(6,15,25,.96) 72%)!important;box-shadow:0 0 32px rgba(255,185,80,.22),inset 0 0 28px rgba(255,196,85,.1)!important}
#menuScreen.ocean-menu .ocean-portal[data-portal-tone="violet"]{border-color:rgba(198,143,255,.72)!important;background:radial-gradient(circle,rgba(190,116,255,.26),rgba(64,25,102,.2) 45%,rgba(5,12,27,.96) 72%)!important}
#menuScreen.ocean-menu .ocean-portal[data-portal-tone="rose"]{border-color:rgba(255,127,175,.72)!important;background:radial-gradient(circle,rgba(255,99,158,.24),rgba(86,24,66,.2) 45%,rgba(6,12,25,.96) 72%)!important}
#menuScreen.ocean-menu .ocean-portal[data-portal-tone="green"]{border-color:rgba(125,255,185,.64)!important;background:radial-gradient(circle,rgba(77,241,159,.22),rgba(17,78,62,.18) 45%,rgba(3,15,24,.96) 72%)!important}
#menuScreen.ocean-menu .ocean-portal-rift{
 width:clamp(116px,12vw,162px)!important;height:clamp(116px,12vw,162px)!important;border-radius:43% 57% 51% 49%!important;
 border-color:rgba(220,127,255,.88)!important;background:
 radial-gradient(circle at 50% 50%,rgba(245,184,255,.3),rgba(132,43,211,.24) 22%,rgba(48,9,84,.48) 48%,rgba(2,4,15,.98) 73%)!important;
 box-shadow:0 0 18px rgba(212,102,255,.42),0 0 58px rgba(110,31,186,.36),inset 0 0 36px rgba(229,141,255,.16)!important;
 animation:riftPortalPulse 3.2s ease-in-out infinite}
#menuScreen.ocean-menu .ocean-portal-rift:before{inset:-12%;border:2px solid rgba(214,118,255,.42);border-radius:61% 39% 56% 44%;animation-duration:4.2s}
#menuScreen.ocean-menu .ocean-portal-rift:after{inset:-23%;border-color:rgba(255,93,199,.25);border-radius:38% 62% 42% 58%;animation-duration:6.8s}
.rift-portal-mark{display:block;font-size:25px;color:#f5c2ff;text-shadow:0 0 14px #c55cff;margin-top:5px}
.menu-ocean-diver{position:absolute;z-index:6;left:var(--diver-x,50%);top:var(--diver-y,52%);width:48px;height:68px;transform:translate(-50%,-50%) rotate(var(--swim-angle,0rad));transform-origin:center;transition:filter .2s;pointer-events:none;filter:drop-shadow(0 0 8px rgba(107,239,250,.34))}
.menu-ocean-diver .diver-body{position:absolute;left:15px;top:18px;width:19px;height:31px;border:1px solid #8cf5ff;border-radius:8px 9px 6px 6px;background:linear-gradient(90deg,#071521,#12394a,#071521);box-shadow:inset 0 0 10px rgba(81,233,240,.16)}
.menu-ocean-diver .diver-pack{position:absolute;left:9px;top:23px;width:10px;height:24px;border-radius:4px;background:#07111c;border:1px solid rgba(90,214,225,.5)}
.menu-ocean-diver .diver-visor{position:absolute;left:19px;top:7px;width:18px;height:17px;border-radius:50%;border:1px solid #a9fbff;background:radial-gradient(circle at 65% 35%,#eaffff,#64dce8 42%,#16475e 70%);box-shadow:0 0 8px rgba(111,242,255,.5)}
.menu-ocean-diver .diver-arm,.menu-ocean-diver .diver-leg{position:absolute;height:3px;border-radius:4px;background:#4db8c4;transform-origin:left center}
.menu-ocean-diver .diver-arm{left:17px;top:27px;width:24px}.menu-ocean-diver .arm-a{transform:rotate(23deg)}.menu-ocean-diver .arm-b{transform:rotate(-23deg)}
.menu-ocean-diver .diver-leg{left:19px;top:47px;width:28px}.menu-ocean-diver .leg-a{transform:rotate(30deg)}.menu-ocean-diver .leg-b{transform:rotate(-30deg)}
.menu-ocean-diver.swimming .diver-leg{animation:diverKick .55s ease-in-out infinite alternate}
#menuOceanSpecimen{position:absolute;width:74px;height:48px;left:-12px;top:-44px;transform:rotate(calc(-1 * var(--swim-angle,0rad)));filter:drop-shadow(0 0 7px rgba(122,239,245,.36))}
.menu-ocean-hint{position:absolute;z-index:6;left:50%;bottom:clamp(64px,9vh,96px);transform:translateX(-50%);padding:8px 12px;border:1px solid rgba(132,236,243,.16);background:rgba(2,16,27,.72);color:#9dc8d4;font:800 9px 'DM Mono',monospace;letter-spacing:.09em;white-space:nowrap;pointer-events:none}
#menuScreen.ocean-menu .menu-account-utility,#menuScreen.ocean-menu .menu-language-utility,#menuScreen.ocean-menu #downloadBtn{position:relative;z-index:8}
#menuScreen.ocean-menu .menu-account-utility{position:absolute;left:clamp(14px,2vw,28px);bottom:52px}
#menuScreen.ocean-menu .menu-language-utility{position:absolute;right:clamp(14px,2vw,28px);bottom:53px}
#menuScreen.ocean-menu #downloadBtn{position:absolute;right:clamp(14px,2vw,28px);top:18px}
#menuScreen.ocean-menu .menu-footer{z-index:9!important}
#menuScreen.ocean-menu .menu-fauna{opacity:.34;pointer-events:none}

.profile-specimen-panel{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(260px,.9fr);gap:16px;margin:0 0 20px;padding:14px;border:1px solid rgba(121,243,240,.18);border-radius:10px;background:linear-gradient(120deg,rgba(9,37,53,.76),rgba(18,21,48,.62))}
.profile-specimen-stage{min-height:190px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(137,225,236,.12);border-radius:8px;background:radial-gradient(circle at 50% 48%,rgba(72,180,197,.14),rgba(3,15,26,.76) 70%)}
#profileSpecimenCanvas{display:block;width:100%;height:auto;max-height:230px}
.profile-specimen-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.profile-specimen-copy #profileSpecimenName{color:#b7f8ff!important;font-weight:800!important;letter-spacing:.06em}
.adaptation-bar{height:13px;position:relative;overflow:hidden;border:1px solid rgba(127,238,242,.25);border-radius:999px;background:rgba(0,9,18,.75);box-shadow:inset 0 0 8px rgba(0,0,0,.5)}
.adaptation-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2ed9d2,#79f3f0 48%,#c79cff);box-shadow:0 0 15px rgba(121,243,240,.55);transition:width .35s ease;position:relative}
.adaptation-bar span:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0 35%,rgba(255,255,255,.42) 48%,transparent 62%);animation:adaptationSweep 2.2s linear infinite}
.adaptation-meta{display:flex;justify-content:space-between;margin-top:8px;font:800 10px 'DM Mono',monospace;color:#9bc4d0}.adaptation-meta strong{color:#dfffff}
.adaptation-benefits{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.adaptation-benefits span{padding:8px;border:1px solid rgba(125,218,231,.14);background:rgba(5,23,36,.62);color:#9ec6d2;font:700 9px 'DM Mono',monospace;line-height:1.35}

@keyframes oceanParticles{to{background-position:96px 192px,-130px 260px}}
@keyframes oceanCaustics{from{transform:translate3d(-2%,-1%,0) rotate(-2deg)}to{transform:translate3d(4%,3%,0) rotate(3deg)}}
@keyframes portalDrift{to{transform:rotate(360deg)}}
@keyframes riftPortalPulse{0%,100%{filter:brightness(.9) saturate(1)}50%{filter:brightness(1.25) saturate(1.3)}}
@keyframes diverKick{from{margin-top:-2px}to{margin-top:3px}}
@keyframes adaptationSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@media(max-width:760px){
 #menuScreen.ocean-menu{overflow:auto!important;min-height:100dvh}
 .ocean-menu-stage{position:fixed}
 #menuScreen.ocean-menu .ocean-portal{width:82px!important;height:82px!important;padding:8px!important}
 #menuScreen.ocean-menu .ocean-portal-rift{width:102px!important;height:102px!important}
 #menuScreen.ocean-menu .menu-content h1{font-size:30px!important}
 #menuScreen.ocean-menu>.intro{display:none}
 .menu-ocean-hint{bottom:78px;font-size:7px}
 #menuScreen.ocean-menu .menu-account-utility{bottom:38px;max-width:44vw!important;font-size:8px}
 #menuScreen.ocean-menu .menu-language-utility{right:10px;bottom:37px;max-width:42vw}
 #menuScreen.ocean-menu #downloadBtn{top:10px;right:10px;max-width:120px}
 .profile-specimen-panel{grid-template-columns:1fr}.profile-specimen-stage{min-height:150px}.adaptation-benefits{grid-template-columns:1fr 1fr}
}

/* Diver appearance selector: one unisex pressure suit, female variation has flowing hair. */
#profileScreen .profile-diver-gender{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;margin:13px 0 16px;border:1px solid rgba(57,173,217,.23);border-radius:9px;background:linear-gradient(100deg,rgba(8,46,71,.8),rgba(3,15,29,.75))}
#profileScreen .profile-diver-gender>span{flex:1 1 100%;font:800 10px 'DM Mono',monospace;letter-spacing:.13em;color:#7ddbf6}
#profileScreen .profile-diver-gender-btn{flex:1 1 120px;min-height:38px;border:1px solid rgba(74,190,227,.32);border-radius:6px;background:rgba(5,30,51,.94);color:#b8ddea;font:800 10px Inter,Manrope,sans-serif;letter-spacing:.07em;box-shadow:none;transition:border-color .18s,background .18s,box-shadow .18s}
#profileScreen .profile-diver-gender-btn[aria-pressed="true"]{color:#f1ffff;border-color:#7aeeff;background:linear-gradient(110deg,#104d7f,#0c365c);box-shadow:0 0 18px rgba(43,180,242,.3),inset 0 0 15px rgba(19,184,246,.16)}
#profileScreen .profile-diver-gender-btn:disabled{opacity:.5;cursor:default}

/* Manual ammunition trigger, shown only in gameplay on coarse pointers. */
.abyss-mobile-fire{display:none!important;position:absolute;right:max(17px,env(safe-area-inset-right));bottom:calc(90px + env(safe-area-inset-bottom));width:76px;height:76px;z-index:45;touch-action:none;user-select:none;border:2px solid #ff9a9a;border-radius:50%;background:radial-gradient(circle at 35% 28%,#e74849,#9c1725 72%,#430812);box-shadow:0 0 22px #b00b194d,inset 0 2px 5px #ffcccc7a;place-items:center;padding:13px}
.abyss-mobile-fire svg{width:42px;height:42px;pointer-events:none;transform:rotate(35deg)}
.abyss-mobile-fire:active,.abyss-mobile-fire.is-firing{background:radial-gradient(circle,#ff8780,#be2335 70%,#68101c);transform:scale(.94)}
@media(pointer:coarse){body.game-active .abyss-mobile-fire:not([hidden]){display:grid!important}}
@media(max-width:700px){.abyss-mobile-fire{right:calc(12px + env(safe-area-inset-right));bottom:calc(112px + env(safe-area-inset-bottom))}}


/* Exterior profile only: reserve an actual header column for the close button.
   The submarine's embedded panels retain their own layout and routing. */
body:not(:has(#submarineWorkshop:not([hidden]))) #profileScreen > .profile-modal {
 display:grid !important;
 grid-template-columns:minmax(0,1fr) 34px;
 column-gap:12px;
 align-content:start;
}
body:not(:has(#submarineWorkshop:not([hidden]))) #profileScreen > .profile-modal > * {
 grid-column:1 / -1;
 min-width:0;
}
body:not(:has(#submarineWorkshop:not([hidden]))) #profileScreen > .profile-modal > .profile-account-toolbar {
 grid-column:1;
 grid-row:1;
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 justify-content:space-between;
 gap:8px 12px;
 min-width:0;
 min-height:34px;
 margin-bottom:10px;
}
body:not(:has(#submarineWorkshop:not([hidden]))) #profileScreen .profile-account-toolbar > .eyebrow {
 flex:1 1 180px;
 min-width:0;
 overflow-wrap:anywhere;
}
body:not(:has(#submarineWorkshop:not([hidden]))) #profileScreen .profile-account-toolbar > .profile-session-btn:not([hidden]) {
 position:static !important;
 flex:0 1 auto;
 max-width:100%;
 min-width:0;
 width:auto !important;
 margin:0 !important;
 white-space:normal;
 overflow-wrap:anywhere;
 text-align:center;
}
body:not(:has(#submarineWorkshop:not([hidden]))) #profileScreen > .profile-modal > .modal-top-close {
 grid-column:2;
 grid-row:1;
 position:relative !important;
 top:auto !important;
 right:auto !important;
 float:none !important;
 margin:0 !important;
 align-self:start;
 justify-self:end;
}
/* Both screens are siblings; their document order previously placed Profile
   over Login. Raise Login only while the exterior Profile is underneath. */
body:not(:has(#submarineWorkshop:not([hidden]))):has(#profileScreen:not([hidden])) #loginScreen:not([hidden]) {
 z-index:110 !important;
}
body:not(:has(#submarineWorkshop:not([hidden]))):has(#loginScreen:not([hidden])) #profileScreen:not([hidden]) {
 z-index:109 !important;
 pointer-events:none !important;
}

/* Shared in-dive audio controls, usable with mouse, keyboard or touch. */
#pauseScreen .dive-volume-settings{display:grid;gap:9px;margin:14px 0 18px;padding:12px 14px;border:1px solid rgba(121,243,240,.25);border-radius:10px;text-align:left;min-width:0;background:rgba(4,19,32,.72)}
#pauseScreen .dive-volume-settings legend{padding:0 7px;font:800 11px Inter,sans-serif;letter-spacing:.12em;color:#a9eff6}
#pauseScreen .dive-volume-settings label{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 11px Inter,sans-serif;color:#d5edf4}
#pauseScreen .dive-volume-settings output{font-variant-numeric:tabular-nums;color:#8de9ef}
#pauseScreen .dive-volume-settings input[type=range]{width:100%;min-height:34px;margin:0;accent-color:#70dce7;cursor:pointer;touch-action:pan-y}
#pauseScreen .dive-volume-settings input:focus-visible{outline:2px solid #79f3f0;outline-offset:2px}

/* Exterior shortcuts are hidden; their existing click handlers remain available to the cockpit. */
#menuScreen #shopBtn,#menuScreen #catalogBtn{display:none!important}
#redeemCodeScreen:not([hidden]):not(.abyss-cockpit-embedded){z-index:125!important}

/* Promo shortcut stays beside the catalog title and above the wallet on narrow screens. */
#shopScreen .shop-heading-copy{flex:1 1 auto;min-width:0}
#shopScreen .shop-title-actions{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;min-width:0}
#shopScreen .shop-title-actions h2{margin:0;min-width:0}
#shopScreen .shop-redeem-shortcut{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;max-width:100%;padding:7px 11px;border:1px solid #9d86db;border-radius:6px;background:#231b42;color:#efe5ff;font:800 10px/1.3 Inter,sans-serif;letter-spacing:.035em;cursor:pointer;white-space:normal;text-align:center}
#shopScreen .shop-redeem-shortcut:hover,#shopScreen .shop-redeem-shortcut:focus-visible{border-color:#e0c9ff;box-shadow:0 0 12px rgba(157,134,219,.4)}
#shopScreen #openRedeemCodeBtn{scroll-margin-top:18px}

/* Cabin screen invariant: embedded pages never become viewport overlays. */
#submarineWorkshop .abyss-visor-body > .abyss-cockpit-embedded:not([hidden]){position:relative!important;inset:auto!important;display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;transform:none!important;z-index:auto!important;background:transparent!important;backdrop-filter:none!important;overflow:visible!important;box-sizing:border-box}
#submarineWorkshop .abyss-visor-body > .abyss-cockpit-embedded > .modal-card{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;margin:0!important;transform:none!important;overflow:visible!important;box-sizing:border-box}
#submarineWorkshop #redeemCodeScreen.abyss-cockpit-embedded .redeem-modal-card{padding:14px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#submarineWorkshop #redeemCodeScreen.abyss-cockpit-embedded .redeem-code-controls,#submarineWorkshop #redeemCodeScreen.abyss-cockpit-embedded .redeem-skin-choice{min-width:0;max-width:100%}
#submarineWorkshop #redeemCodeScreen.abyss-cockpit-embedded input,#submarineWorkshop #redeemCodeScreen.abyss-cockpit-embedded select{width:100%;max-width:100%;box-sizing:border-box}