:root{color-scheme:dark;--ink:#f8fbff;--muted:#aeb7d6;--bg:#0e1430;--card:rgba(22,30,65,.88);--line:rgba(255,255,255,.13);--field:rgba(0,0,0,.18);--soft:rgba(255,255,255,.09);--mint:#61edc5;--yellow:#ffd76a;--pink:#ff72a8;--purple:#8d7cff;--shadow:0 24px 70px rgba(2,5,20,.38)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif}body{overflow-x:hidden}button,input{font:inherit}.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 80% 12%,#293175 0,transparent 30%),linear-gradient(155deg,#111a3b,#0c1129 62%,#15143d);z-index:0}.sky:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:46px 46px;opacity:.08}.sky i{position:absolute;border-radius:50%;filter:blur(2px);opacity:.2}.sky i:nth-child(1){width:300px;height:300px;background:#715cff;left:-100px;top:30%}.sky i:nth-child(2){width:220px;height:220px;background:#2bd5ad;right:-80px;bottom:10%}.sky i:nth-child(3){width:150px;height:150px;background:#ff4c92;right:18%;top:-50px}.topbar{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;max-width:980px;margin:auto;padding:18px 20px}.brand{background:none;border:0;color:#fff;font-weight:900;font-size:18px;cursor:pointer}.brand span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#111832;background:var(--yellow);margin-right:8px}.icon-btn,.back{border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;border-radius:14px;width:44px;height:44px;cursor:pointer;font-weight:900;font-size:20px}.icon-btn:hover,.back:hover{background:rgba(255,255,255,.15)}main{position:relative;z-index:1}.view{display:none;width:min(920px,100%);margin:0 auto;padding:22px 20px 60px}.view.active{display:block}.card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);border-radius:28px}.hero{position:relative;max-width:690px;margin:5vh auto 0;text-align:center;padding:clamp(32px,7vw,70px);overflow:hidden}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--mint);font-size:12px;font-weight:900;margin:0 0 12px}.hero h1{font-size:clamp(38px,8vw,70px);line-height:.96;margin:0 0 22px;letter-spacing:-.055em}.hero h1 em{font-style:normal;color:var(--yellow)}.hero>p:not(.eyebrow){max-width:500px;margin:0 auto 28px;color:var(--muted);font-size:17px;line-height:1.55}.hero small{display:block;margin-top:22px;color:#8993b5}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.btn{min-height:52px;padding:13px 20px;border-radius:16px;border:0;font-weight:900;cursor:pointer;transition:transform .15s,filter .15s}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(135deg,var(--yellow),#ffae57);color:#1d1930;box-shadow:0 10px 25px rgba(255,191,83,.2)}.btn.secondary{background:rgba(255,255,255,.09);border:1px solid var(--line);color:#fff}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.mini-tower{height:90px;display:flex;flex-direction:column-reverse;align-items:center;gap:3px;margin-bottom:20px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}.mini-tower b{height:17px;border-radius:5px}.mini-tower b:nth-child(1){width:120px;background:#735cff}.mini-tower b:nth-child(2){width:103px;background:#ff72a8}.mini-tower b:nth-child(3){width:84px;background:#ffd76a}.mini-tower b:nth-child(4){width:62px;background:#61edc5}.section-head{display:flex;align-items:center;gap:18px;margin:15px 0 28px}.section-head h2{margin:0;font-size:clamp(28px,5vw,42px)}.section-head .eyebrow{margin-bottom:5px}.world{margin-bottom:28px}.world-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.world-title h3{margin:0;font-size:20px}.world-title span{color:var(--muted);font-size:13px}.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.level{position:relative;min-height:130px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:21px;color:white;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));cursor:pointer;overflow:hidden}.level:not(:disabled):hover{border-color:rgba(255,255,255,.28);transform:translateY(-2px)}.level:disabled{opacity:.38;cursor:not-allowed}.level strong{display:block;font-size:31px}.level small{color:var(--muted)}.level .stars{position:absolute;left:17px;bottom:13px;color:var(--yellow);letter-spacing:1px}.level .lock{position:absolute;right:15px;top:15px}.form-card{max-width:520px;margin:auto;padding:28px}.form-card label{display:block;font-weight:800;margin-bottom:8px}.form-card input{width:100%;height:55px;border:1px solid var(--line);border-radius:15px;background:rgba(0,0,0,.18);color:#fff;padding:0 16px;outline:none;margin-bottom:10px}.form-card input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(97,237,197,.12)}.form-card .btn{width:100%;margin-top:10px}.muted,.privacy-note{color:var(--muted);line-height:1.5}.privacy-note{font-size:12px;margin:18px 2px 0}.hidden{display:none!important}.status{max-width:520px;margin:16px auto;padding:14px 18px;border-radius:14px;background:#302046;color:#ffd9e8}.room-actions{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:18px}.ranking-card{padding:22px}.ranking-head{display:flex;justify-content:space-between;align-items:center}.ranking-head h3{margin:0 0 16px}.loader{font-size:12px;color:var(--muted)}.rank-row{display:grid;grid-template-columns:42px 1fr repeat(3,minmax(65px,100px));gap:8px;align-items:center;padding:13px 10px;border-top:1px solid var(--line)}.rank-row.me{border-radius:12px;background:rgba(97,237,197,.1)}.rank-row.leader .place{color:var(--yellow)}.rank-row small{display:block;color:var(--muted);font-size:10px}.empty{text-align:center;color:var(--muted);padding:30px}.game-view{width:100%;max-width:none;height:calc(100dvh - 80px);padding:0;overflow:hidden}.game-hud{height:68px;display:grid;grid-template-columns:50px 1fr 1fr;align-items:center;gap:12px;padding:10px max(14px,calc((100vw - 720px)/2));position:relative;z-index:3}.game-hud>div:not(.hud-right){display:flex;flex-direction:column}.game-hud span{font-size:12px;color:var(--muted);font-weight:800}.game-hud strong{font-size:19px}.hud-right{display:flex;justify-content:flex-end;gap:16px}.canvas-wrap{height:calc(100% - 68px);position:relative;touch-action:none;user-select:none}.canvas-wrap canvas{width:100%;height:100%;display:block}.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;background:rgba(8,12,31,.68);backdrop-filter:blur(7px);z-index:4}.game-overlay.hidden{display:none}.game-overlay h2{font-size:42px;margin:0 0 12px}.game-overlay p:not(.eyebrow){color:var(--muted);max-width:420px;line-height:1.5}.game-overlay .btn{min-width:210px;margin-top:12px}.toast{position:absolute;z-index:3;top:20%;left:50%;transform:translate(-50%,-10px) scale(.8);opacity:0;color:var(--yellow);font-size:30px;font-weight:1000;text-shadow:0 5px 18px #000;pointer-events:none}.toast.show{animation:pop .65s ease}.toast.miss{color:var(--pink)}dialog{width:min(430px,calc(100% - 32px));border:1px solid var(--line);border-radius:28px;background:#192049;color:#fff;padding:32px;text-align:center;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(4,7,22,.72);backdrop-filter:blur(5px)}dialog h2{font-size:32px;margin:5px 0}.result-icon{font-size:54px}.result-stars{color:var(--yellow);font-size:30px;letter-spacing:5px;margin:10px}.dialog-actions{display:grid;gap:10px;margin-top:22px}@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}35%{opacity:1;transform:translate(-50%,-5px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-35px) scale(1)}}
@media(max-width:600px){.topbar{padding:12px 14px}.view{padding:14px 14px 42px}.hero{margin-top:1vh;padding:30px 20px}.hero-actions,.room-actions{grid-template-columns:1fr}.levels{grid-template-columns:repeat(2,1fr)}.rank-row{grid-template-columns:34px 1fr repeat(3,55px);font-size:13px;padding-inline:2px}.game-view{height:calc(100dvh - 58px);padding:0}.game-hud{padding-inline:10px}.brand{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Temas e componentes da sala */
.top-actions{display:flex;gap:8px}.brand,.icon-btn,.back{color:var(--ink)}.icon-btn,.back,.btn.secondary,.level{background:var(--soft);color:var(--ink)}.form-card input,.chat-form input{background:var(--field);color:var(--ink)}dialog{background:var(--card);color:var(--ink)}.ranking-card{margin-top:18px}.game-hud{grid-template-columns:50px 1fr auto}.hud-right{align-items:center;gap:10px}.hud-btn{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font-weight:900;cursor:pointer}.game-overlay{background:rgba(8,12,31,.78)}.game-overlay h2{color:#fff}.game-overlay p:not(.eyebrow){color:#d4daf0}.game-overlay .control-hint{font-size:13px;margin:2px 0 8px;max-width:440px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.presence-card{padding:18px 22px}.presence-head{display:flex;align-items:center;justify-content:space-between}.presence-head h3{margin:0}.presence-head strong{color:var(--mint);font-size:13px}.online-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.online-person{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:var(--soft);font-size:13px}.online-person i{width:8px;height:8px;border-radius:50%;background:var(--mint)}.online-person.playing i{background:var(--yellow)}.online-person small{color:var(--muted)}
.chat-card{margin-top:18px;padding:0;overflow:hidden}.chat-card summary{display:flex;align-items:center;cursor:pointer;padding:18px 22px;font-weight:900;list-style:none}.chat-card summary::-webkit-details-marker{display:none}.chat-card summary:after{content:'⌄';margin-left:auto;padding-left:10px;color:var(--muted)}.chat-card[open] summary:after{content:'⌃'}.chat-badge{margin-left:8px;border-radius:999px;background:var(--pink);color:#fff;padding:3px 7px;font-size:10px}.chat-messages{height:240px;overflow:auto;border-block:1px solid var(--line);padding:12px 18px}.chat-message{margin:7px 0;max-width:85%;padding:9px 12px;border-radius:14px;background:var(--soft);line-height:1.35;overflow-wrap:anywhere;white-space:pre-wrap}.chat-message.me{margin-left:auto;background:rgba(97,237,197,.16)}.chat-message b{display:block;font-size:11px;color:var(--mint);margin-bottom:3px}.chat-message time{display:block;text-align:right;color:var(--muted);font-size:9px}.chat-form{display:grid;grid-template-columns:1fr auto;gap:9px;padding:12px 18px}.chat-form input{min-width:0;border:1px solid var(--line);border-radius:13px;padding:0 13px}.chat-form .btn{min-height:44px}.chat-foot{display:flex;justify-content:space-between;min-height:32px;padding:0 20px 10px;color:var(--muted);font-size:11px}.text-btn{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer}
html[data-theme="light"]{color-scheme:light;--ink:#17203b;--muted:#56627f;--bg:#eef3ff;--card:rgba(255,255,255,.92);--line:rgba(23,32,59,.16);--field:rgba(22,36,70,.06);--soft:rgba(22,36,70,.075);--mint:#087e68;--yellow:#f4b62f;--pink:#c83772;--purple:#6553db;--shadow:0 22px 60px rgba(36,53,90,.17)}html[data-theme="light"] .sky{background:radial-gradient(circle at 80% 12%,#d8d7ff 0,transparent 30%),linear-gradient(155deg,#f8fbff,#e9efff 62%,#f7eaff)}html[data-theme="light"] .sky i{opacity:.11}html[data-theme="light"] .rank-row.leader .place{color:#8c5b00}
@media(max-width:600px){.game-hud{grid-template-columns:44px 1fr auto}.hud-right{gap:5px}.hud-btn{width:32px;height:32px}.top-actions{gap:5px}.top-actions .icon-btn{width:40px;height:40px}.chat-card:not([open]) .chat-badge:not(.hidden){display:inline-block}.chat-form{grid-template-columns:1fr}.chat-form .btn{width:100%}}