@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');:root{--bg:#fff9f5;--surface:#fff;--ink:#292539;--muted:#746e80;--border:#ece3ed;--pink:#ef6799;--purple:#8d72d8;--mint:#65bca5;--shadow:0 14px 40px #40325512}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif}body.dark{--bg:#171824;--surface:#262738;--ink:#f7f5ff;--muted:#c5c0d2;--border:#414155;--shadow:0 14px 40px #0003}.top{height:78px;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:0 max(20px,calc((100vw - 1200px)/2));background:var(--surface);border-bottom:1px solid var(--border)}.brand{font-size:30px;font-weight:900;letter-spacing:-2px;text-decoration:none;color:var(--ink)}.brand span{color:var(--pink)}.back{margin-left:auto;color:var(--muted);font-weight:800;text-decoration:none}.top button{font-size:21px}.layout{max-width:1200px;margin:34px auto;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}.game-panel,.asidecard{background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);padding:25px}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.heading small{font-weight:900;color:var(--purple);letter-spacing:2px}.heading h1{font-size:clamp(25px,4vw,38px);margin:5px 0;line-height:1.1}.heading p{color:var(--muted);margin:0 0 16px}.mascot{font-size:68px;filter:drop-shadow(0 6px 2px #0001)}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.hud>div{background:var(--bg);border:1px solid var(--border);padding:10px 12px;border-radius:16px;font-size:21px;font-weight:900;text-align:center}.hud small{display:block;color:var(--muted);font-size:11px;font-weight:800}.arena{border-radius:23px;background:linear-gradient(150deg,#eff9e9,#e5f5e8);padding:18px;min-height:320px;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;touch-action:pan-y}.dark .arena{background:linear-gradient(145deg,#33443d,#30364a)}#status{text-align:center;min-height:24px;color:var(--muted);font-weight:800}.actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}button{border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);font:800 15px Nunito,system-ui;cursor:pointer;padding:12px 16px;touch-action:manipulation}button:hover{filter:brightness(.96)}button:focus-visible{outline:3px solid var(--purple);outline-offset:3px}.primary{background:linear-gradient(100deg,#f17b9e,#a67de4);color:white;border:0}.pad{text-align:center;margin-top:18px}.pad button{width:62px;height:54px;margin:3px;background:#d9f0e1;color:#246c4b;border:2px solid #a7d5b5;font-size:22px}.pad>div{display:flex;justify-content:center}aside{display:grid;gap:16px}.asidecard h2{margin:0 0 9px;font-size:19px}.asidecard p{margin:0;color:var(--muted);line-height:1.6}.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.badges span{background:var(--bg);padding:7px;border-radius:12px;font-size:12px;font-weight:800}.other-link{display:block;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border);padding:9px 0;font-weight:800}.other-link:hover{color:var(--pink)}footer{text-align:center;padding:26px;color:var(--muted)}footer a{color:inherit}.snakeboard{width:min(100%,480px);aspect-ratio:1;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(14,1fr);gap:2px;background:#7eae78;border:8px solid #599d6c;border-radius:20px;padding:5px;box-shadow:inset 0 5px 12px #22572b33}.snakecell{background:#d7edbd;border-radius:5px;display:grid;place-items:center;font-size:clamp(9px,2vw,22px)}.snakecell:nth-child(even){background:#cbe5b1}.snakecell.body{background:#58bd80;border-radius:8px}.snakecell.head{background:#2e9d66;border-radius:9px}.snakecell.rock{background:#9d9baa}.snakecell.food{background:#f8c3a0}.memorygrid{width:min(100%,490px);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.memorycard{aspect-ratio:1;min-width:0;border:2px solid #d2b4e5;background:linear-gradient(145deg,#b59be8,#f7b3d0);color:white;font-size:clamp(26px,6vw,48px);box-shadow:0 5px 0 #ab83b9;transition:transform .18s}.memorycard.revealed,.memorycard.matched{background:#fff9e9;color:#3e3450;border-color:#eadcbf;transform:rotateY(0)}.memorycard.matched{background:#d6f5d9;border-color:#83caa4}.wordgrid{width:min(100%,500px);display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;touch-action:none;user-select:none}.wordgrid button{padding:0;aspect-ratio:1;border-radius:9px;font-size:clamp(12px,2.8vw,20px);border:1px solid #d5b6e4;background:#fff;color:#3c3654}.wordgrid button.selected{background:#ffbfcc}.wordgrid button.solved{background:#94d8b0;color:#163c2a}.wordlist{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.wordlist span{border-radius:20px;background:#fff;padding:6px 10px;color:#3a3450;font-weight:900;font-size:12px}.wordlist span.done{background:#a4e5bc;text-decoration:line-through}.tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,450px);background:#bcaea9;padding:10px;border-radius:20px;touch-action:none}.tilegrid button{aspect-ratio:1;padding:0;border:0;border-radius:10px;background:#d9cec7;color:#57473c;font-size:clamp(18px,4vw,34px);font-weight:900}.tilegrid button.filled{background:#ffdf93}.tilegrid button.v4{background:#f6c38c}.tilegrid button.v8{background:#f9a66d}.tilegrid button.v16,.tilegrid button.v32{background:#ef8a78;color:white}.tilegrid button.v64,.tilegrid button.v128,.tilegrid button.v256,.tilegrid button.v512,.tilegrid button.v1024,.tilegrid button.v2048{background:#aa82dc;color:white}.ttgrid,.puzzlegrid{width:min(100%,410px);display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.ttgrid button,.puzzlegrid button{aspect-ratio:1;font-size:clamp(36px,8vw,64px);background:#f2e6fa;color:#8764bc}.puzzlegrid button{font-size:clamp(24px,7vw,45px);background:#c8e9f1;color:#22687b}.puzzlegrid button.empty{background:#d5e2e4}.reactionbox{width:min(100%,450px);height:250px;display:grid;place-items:center;border-radius:22px;background:#f7b1c4;color:#653147;font-weight:900;font-size:30px;text-align:center;cursor:pointer;padding:20px}.reactionbox.wait{background:#efb874}.reactionbox.go{background:#7ed9a4}.guessrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.guessrow input{font:900 24px Nunito;text-transform:uppercase;max-width:210px;padding:10px;border-radius:12px;border:2px solid #c3a7db}.guesshistory{display:grid;gap:7px;margin:12px 0}.guesshistory div{letter-spacing:6px;font-size:24px;font-weight:900;text-align:center}.gamehint{font-size:14px;color:#5a5063;text-align:center}.dark .gamehint{color:#ddd}@media(max-width:850px){.layout{grid-template-columns:1fr;margin:15px auto;padding:0 12px}.game-panel{padding:15px}.asidecard{padding:18px}.top{padding:0 15px;height:66px}.brand{font-size:25px}.mascot{font-size:46px}.arena{padding:10px;min-height:260px}.snakeboard{gap:1px;border-width:5px}.back{font-size:12px}.hud>div{font-size:17px}.pad button{width:65px;height:54px}.wordgrid{gap:2px}.wordgrid button{border-radius:5px}.memorygrid{gap:7px}}
/* Cobrinha Adventure — campo ilustrado contínuo, sem células visíveis */
.snake-world{width:min(100%,690px);aspect-ratio:1;overflow:hidden;border:9px solid #3f942a;border-radius:24px;box-shadow:0 14px 25px #1f6e2440,inset 0 0 0 3px #a6e96b;background:#7dcc31;touch-action:none}
#snake-canvas{display:block;width:100%;height:100%;touch-action:none}
@media(max-width:650px){.snake-world{border-width:5px;border-radius:17px}.arena:has(.snake-world){padding:5px}}

/* V5 — viewport responsivo e experiência imersiva */
:root{--game-side: min(100%, 76dvh)}
.layout{max-width:1600px;grid-template-columns:minmax(0,1fr) 250px;gap:18px;margin:16px auto}
.game-panel{min-width:0;padding:clamp(12px,1.4vw,22px)}
.heading h1{font-size:clamp(22px,2.6vw,34px)}
.heading p{margin-bottom:5px;font-size:14px}
.mascot{font-size:48px}
.hud{margin:8px 0;gap:8px}
.hud>div{padding:6px 8px;font-size:18px}
.arena-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0;color:var(--muted);font-weight:900;font-size:13px}
.arena-toolbar button{padding:8px 14px;background:var(--bg);border:1px solid var(--border)}
.arena{padding:8px;min-height:0;width:100%;overflow:hidden}
.snake-world{width:min(100%,var(--game-side));max-width:100%;height:auto;aspect-ratio:1;margin:auto;flex:none}
.memorygrid,.wordgrid,.tilegrid,.ttgrid,.puzzlegrid{width:min(100%,var(--game-side));max-width:100%}
#status{margin:8px 0;min-height:20px}
.actions button{padding:10px 14px}
/* No notebook, o tabuleiro cabe na altura útil; no celular ocupa toda a largura */
@media(min-width:851px){.game-panel{max-width:100%}.layout{grid-template-columns:minmax(0,1fr) 235px}.arena{max-height:none}.snake-world{width:min(100%,calc(100dvh - 300px));min-width:0}.memorygrid,.wordgrid,.tilegrid,.ttgrid,.puzzlegrid{width:min(100%,calc(100dvh - 300px))}}
@media(max-width:850px){.layout{margin:0 auto;padding:0;gap:12px}.game-panel{border-radius:0;padding:12px 8px}.heading{padding:0 5px}.heading h1{font-size:clamp(22px,5vw,30px)}.heading p{font-size:13px}.heading small{font-size:11px}.mascot{font-size:44px}.hud{gap:5px}.hud>div{font-size:16px;padding:7px 3px}.arena{padding:2px;border-radius:12px}.snake-world{width:100%;border-width:4px;border-radius:12px}.memorygrid,.wordgrid,.tilegrid,.ttgrid,.puzzlegrid{width:100%}.arena-toolbar{padding:0 5px}.arena-toolbar button{font-size:13px}.pad button{min-width:62px}aside{padding:0 12px}.top{height:58px}}
/* Fullscreen nativo: ampliar a área de jogo sem distorcer o tabuleiro */
.game-panel:fullscreen,.game-panel:-webkit-full-screen{background:var(--surface);color:var(--ink);padding:10px 16px;overflow:auto;display:flex;flex-direction:column;align-items:stretch;gap:0}
.game-panel:fullscreen .heading,.game-panel:-webkit-full-screen .heading{display:none}
.game-panel:fullscreen .hud,.game-panel:-webkit-full-screen .hud{margin:3px auto 5px;width:min(100%,560px)}
.game-panel:fullscreen .arena,.game-panel:-webkit-full-screen .arena{flex:1;min-height:0;padding:4px;overflow:visible}
.game-panel:fullscreen .snake-world,.game-panel:-webkit-full-screen .snake-world{width:min(100%,calc(100dvh - 225px));height:auto;max-height:calc(100dvh - 225px)}
.game-panel:fullscreen .memorygrid,.game-panel:fullscreen .wordgrid,.game-panel:fullscreen .tilegrid,.game-panel:fullscreen .ttgrid,.game-panel:fullscreen .puzzlegrid{width:min(100%,calc(100dvh - 225px))}
.game-panel:fullscreen #status{margin:5px 0}
.game-panel:fullscreen .pad{margin-top:5px}
@media(orientation:landscape) and (max-height:650px){.game-panel:fullscreen .snake-world{width:min(100%,calc(100dvh - 120px));max-height:calc(100dvh - 120px)}.game-panel:fullscreen .heading{display:none}.game-panel:fullscreen .pad{margin-top:0}.game-panel:fullscreen .pad button{height:35px}}

/* V6 — correção da quebra em telas estreitas e celulares em modo desktop */
@media (max-width: 1100px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .layout { display:flex !important; flex-direction:column !important; width:100%; max-width:780px; margin:0 auto; padding:12px 12px 28px; gap:16px; }
  .game-panel { width:100%; max-width:100%; min-width:0; padding:clamp(12px,3vw,22px); border-radius:24px; }
  .layout > aside { width:100%; display:grid; grid-template-columns:1fr; gap:12px; padding:0; }
  .arena { width:100%; max-width:100%; padding:clamp(2px,1vw,8px); }
  .snake-world { width:min(100%, 680px) !important; max-width:100%; min-width:0; aspect-ratio:1; }
  .memorygrid,.wordgrid,.tilegrid,.ttgrid,.puzzlegrid { width:min(100%,680px) !important; max-width:100%; }
  .heading { min-width:0; }
  .heading > div:first-child { min-width:0; flex:1; }
  .heading h1 { overflow-wrap:anywhere; }
  .mascot { flex:none; }
  .arena-toolbar { flex-wrap:wrap; }
  .hud { min-width:0; }
  .hud > div { min-width:0; }
  .top { width:100%; }
}
@media (max-width: 480px) {
  .layout { padding:8px 6px 24px; }
  .game-panel { padding:12px 8px; border-radius:18px; }
  .heading h1 { font-size:clamp(22px,6vw,29px); }
  .heading p { font-size:14px; line-height:1.45; }
  .mascot { font-size:40px; }
  .hud { gap:5px; }
  .hud > div { font-size:clamp(14px,4vw,19px); padding:8px 2px; }
  .hud small { font-size:11px; }
  .arena { padding:2px; }
  .snake-world { border-width:4px; border-radius:12px; }
  .top { gap:8px; padding:0 10px; }
  .brand { font-size:25px; }
  .back { font-size:12px; }
  .top button { padding:10px; }
  .actions { gap:7px; }
  .actions button { padding:11px 12px; }
}