:root{--bg:#12111a;--bg2:#1d1b2b;--fg:#f4f2ff;--muted:#a39fc0;--accent:#ff2e88;--line:#ffffff1f;--empty:#26233a;--rect-line:#0d0c14;--bad:#ff1744}body[data-theme=pastel]{--bg:#fdf8f3;--bg2:#fff;--fg:#3b3550;--muted:#8a84a3;--accent:#e67fa4;--line:#3c325a1f;--empty:#f1ebe4;--rect-line:#5a5070;--bad:#e0002a}body[data-theme=tropical]{--bg:#0b3b3c;--bg2:#0f4c4d;--fg:#fffbea;--muted:#b9d8c9;--accent:#ffd23f;--line:#ffffff24;--empty:#13595a;--rect-line:#052223;--bad:#ff1744}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;transition:background .3s,color .3s}button,select{font:inherit;color:inherit;background:var(--bg2);border:1px solid var(--line);cursor:pointer;border-radius:10px;padding:.55em .9em}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.topo{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.2rem;display:flex}.topo h1{letter-spacing:.02em;margin:0;font-size:1.5rem}.topo h1 span{color:var(--accent)}.tema{color:var(--muted);align-items:center;gap:.5rem;display:flex}.layout{grid-template-columns:minmax(0,1fr) 280px;gap:1.5rem;max-width:1080px;margin:0 auto;padding:0 1.2rem 2rem;display:grid}.placar{grid-template-columns:2fr 1fr 1fr 1fr;gap:.5rem;margin-bottom:.8rem;display:grid}.placar div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;min-width:0;padding:.4rem .7rem}.placar small{color:var(--muted);text-transform:uppercase;font-size:.72rem;display:block}.placar strong{white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;display:block;overflow:hidden}.board-wrap{width:100%;max-width:min(640px,72vh);margin:0 auto}.board{grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);aspect-ratio:var(--cols) / var(--rows);background:var(--empty);border:3px solid var(--rect-line);isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;border-radius:8px;width:100%;display:grid;position:relative;overflow:hidden}.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:center;align-items:center;transition:background .2s;display:flex;position:relative}.cell.bad{background-image:repeating-linear-gradient(45deg,#0000002e 0 6px,#0000 6px 12px)!important}.cell.clue span{z-index:3;aspect-ratio:1;color:#1b1830;background:#ffffffeb;border-radius:50%;place-items:center;width:72%;max-width:2.6em;font-size:clamp(.8rem,3.2vw,1.35rem);font-weight:800;display:grid;position:relative;box-shadow:0 1px 4px #0000004d}.rect-layer{pointer-events:none;z-index:2;position:absolute;inset:0}.rect{border:3px solid var(--rect-line);border-radius:4px;position:absolute}.rect.invalid{border:3px dashed var(--bad);box-shadow:inset 0 0 0 2px #ff174459}.preview{z-index:4;pointer-events:none;border:3px dashed var(--fg);color:#fff;text-shadow:0 1px 3px #000,0 0 2px #000;white-space:nowrap;background:#ffffff38;border-radius:4px;justify-content:center;align-items:center;font-size:clamp(.7rem,2.6vw,1.1rem);font-weight:800;display:flex;position:absolute}.preview.ok{background:#00e67638;border-style:solid;border-color:#00e676}.status{text-align:center;min-height:1.4em;color:var(--muted);margin:.7rem 0}.acoes{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.board.won{cursor:default}.board.won .rect{border-color:#00000040}.board.won .cell{animation:onda .9s ease-in-out calc(var(--d) * 70ms) 3 alternate both}@keyframes onda{0%{filter:brightness()saturate();transform:scale(1)}50%{filter:brightness(1.6)saturate(1.5);border-radius:30%;transform:scale(.82)rotate(6deg)}to{filter:brightness(1.1)saturate(1.2);transform:scale(1)}}.painel h2{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:.4rem 0 .6rem;font-size:1rem}.fases{gap:.35rem;margin:0 0 1.4rem;padding:0;list-style:none;display:grid}.fase{text-align:left;grid-template-columns:2rem 1fr auto;align-items:center;gap:.5rem;width:100%;padding:.45rem .6rem;display:grid}.fase .num{background:var(--empty);border-radius:50%;place-items:center;width:1.8rem;height:1.8rem;font-weight:700;display:grid}.fase .nome small{color:var(--muted);font-size:.75rem;display:block}.fase .melhor{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}.fase.done .num{color:#fff;background:#00c853}.fase.atual{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.aleatorio{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.4rem;display:flex}.aleatorio label{color:var(--muted);align-items:center;gap:.4rem;display:flex}.regras{color:var(--muted)}.regras summary{cursor:pointer;color:var(--fg)}.regras ul{padding-left:1.2rem;line-height:1.5}.win{z-index:10;background:#00000073;place-items:center;padding:1rem;animation:.3s aparecer;display:grid;position:fixed;inset:0}.win[hidden]{display:none}.win-card{background:var(--bg2);border:2px solid var(--accent);text-align:center;border-radius:16px;max-width:420px;padding:1.4rem 1.8rem;box-shadow:0 10px 40px #00000080}.win-card h2{margin-top:0}.win-card .best{color:var(--accent);font-weight:700}@keyframes aparecer{0%{opacity:0;transform:scale(.96)}}@media (width<=820px){.layout{grid-template-columns:1fr}.board-wrap{max-width:min(100%,70vh)}.placar{grid-template-columns:1fr 1fr 1fr 1fr}.placar div:first-child{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.board.won .cell{animation-duration:.01ms}}