/* Fliperama — estilos gerais e de todos os jogos */
  :root{
    --preto:#0b0f0c;
    --painel:#101812;
    --borda:#1e3324;
    --fosforo:#33ff66;
    --fosforo-esc:#1d9c44;
    --ambar:#ffb000;
    --magenta:#ff4fa3;
    --ciano:#3ad6ff;
    --texto:#c8ffd9;
    --sombra:0 0 12px rgba(51,255,102,.25);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--preto);
    color:var(--texto);
    font-family:"Courier New",ui-monospace,monospace;
    -webkit-tap-highlight-color:transparent;
    overflow-x:hidden;
  }
  /* Scanlines do CRT */
  body::after{
    content:"";
    position:fixed;inset:0;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
    pointer-events:none;z-index:99;
  }
  .vinheta{
    position:fixed;inset:0;pointer-events:none;z-index:98;
    background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
  }

  .moldura{
    max-width:560px;margin:0 auto;padding:16px 14px 40px;
    min-height:100%;
  }

  /* Cabeçalho */
  header{
    text-align:center;padding:18px 0 10px;
    border-bottom:2px dashed var(--borda);
    margin-bottom:18px;
  }
  .titulo{
    font-size:clamp(22px,6vw,34px);
    letter-spacing:4px;
    color:var(--fosforo);
    text-shadow:0 0 8px rgba(51,255,102,.6),0 0 24px rgba(51,255,102,.25);
    text-transform:uppercase;
  }
  .titulo .piscar{animation:cursor 1s steps(1) infinite}
  @keyframes cursor{50%{opacity:0}}
  @media (prefers-reduced-motion:reduce){
    .titulo .piscar{animation:none}
    *{transition:none!important;animation-duration:.01ms!important}
  }
  .sub{
    font-size:12px;color:var(--fosforo-esc);
    letter-spacing:2px;margin-top:6px;text-transform:uppercase;
  }

  /* Menu de fichas */
  .fichas{display:grid;gap:14px}
  .ficha{
    display:flex;align-items:center;gap:16px;
    background:var(--painel);
    border:2px solid var(--borda);
    border-radius:10px;
    padding:16px;
    cursor:pointer;
    width:100%;text-align:left;
    color:var(--texto);
    font-family:inherit;
    transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
  }
  .ficha:hover,.ficha:focus-visible{
    transform:translateX(6px);
    outline:none;
  }
  .ficha:focus-visible{box-shadow:0 0 0 2px var(--fosforo)}
  .ficha[data-cor="verde"]:hover{border-color:var(--fosforo);box-shadow:var(--sombra)}
  .ficha[data-cor="ambar"]:hover{border-color:var(--ambar);box-shadow:0 0 12px rgba(255,176,0,.25)}
  .ficha[data-cor="magenta"]:hover{border-color:var(--magenta);box-shadow:0 0 12px rgba(255,79,163,.25)}
  .ficha .icone{
    width:56px;height:56px;flex:none;
    display:grid;place-items:center;
    font-size:30px;
    border:2px solid var(--borda);
    border-radius:8px;
    background:#0d130e;
  }
  .ficha h2{font-size:16px;letter-spacing:2px;text-transform:uppercase}
  .ficha[data-cor="verde"] h2{color:var(--fosforo)}
  .ficha[data-cor="ambar"] h2{color:var(--ambar)}
  .ficha[data-cor="magenta"] h2{color:var(--magenta)}
  .ficha p{font-size:12px;color:#7fbf95;margin-top:4px}
  .ficha .insira{
    margin-left:auto;font-size:10px;color:var(--fosforo-esc);
    letter-spacing:1px;writing-mode:vertical-rl;text-transform:uppercase;
  }

  /* Telas */
  .tela{display:none}
  .tela.ativa{display:block}

  .barra-jogo{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:12px;gap:10px;flex-wrap:wrap;
  }
  .btn{
    background:#0d130e;color:var(--texto);
    border:2px solid var(--borda);border-radius:8px;
    padding:8px 14px;font-family:inherit;font-size:13px;
    letter-spacing:1px;cursor:pointer;text-transform:uppercase;
    transition:border-color .12s;
  }
  .btn:hover,.btn:focus-visible{border-color:var(--fosforo);outline:none}
  .btn.destaque{border-color:var(--fosforo);color:var(--fosforo)}
  .placar{
    font-size:13px;letter-spacing:1px;
    display:flex;gap:14px;flex-wrap:wrap;
  }
  .placar b{color:var(--fosforo)}

  /* ---------- SNAKE ---------- */
  #telaSnake canvas{
    display:block;width:100%;
    background:#0a120c;
    border:2px solid var(--borda);border-radius:10px;
    image-rendering:pixelated;
    touch-action:none;
  }
  .dpad{
    display:grid;
    grid-template-columns:repeat(3,64px);
    grid-template-rows:repeat(2,52px);
    gap:8px;justify-content:center;margin-top:16px;
  }
  .dpad button{
    font-size:20px;background:#0d130e;color:var(--fosforo);
    border:2px solid var(--borda);border-radius:8px;cursor:pointer;
  }
  .dpad button:active{border-color:var(--fosforo)}
  .dpad .cima{grid-column:2;grid-row:1}
  .dpad .esq{grid-column:1;grid-row:2}
  .dpad .baixo{grid-column:2;grid-row:2}
  .dpad .dir{grid-column:3;grid-row:2}
  .aviso-jogo{
    text-align:center;font-size:12px;color:#7fbf95;margin-top:10px;
    letter-spacing:1px;
  }

  /* ---------- MEMÓRIA ---------- */
  .grade-memoria{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  }
  .carta{
    aspect-ratio:3/4;perspective:600px;cursor:pointer;
    background:none;border:none;padding:0;
  }
  .carta-interna{
    display:block;
    position:relative;width:100%;height:100%;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transition:transform .35s ease;
  }
  .carta.virada .carta-interna{transform:rotateY(180deg)}
  .carta .face{
    position:absolute;inset:0;
    display:grid;place-items:center;
    border-radius:8px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    font-size:clamp(24px,8vw,38px);
  }
  .carta .verso{
    background:#0d130e;border:2px solid var(--borda);
    color:var(--ambar);font-size:18px;
  }
  .carta .frente{
    background:#161006;border:2px solid var(--ambar);
    transform:rotateY(180deg);
  }
  .carta.achada .frente{
    border-color:var(--fosforo);
    box-shadow:var(--sombra);
  }
  .carta:focus-visible{outline:2px solid var(--ambar);outline-offset:2px;border-radius:8px}

  /* ---------- VELHA ---------- */
  .grade-velha{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    max-width:360px;margin:0 auto;
  }
  .casa{
    aspect-ratio:1;font-size:clamp(36px,12vw,56px);
    background:#0d130e;border:2px solid var(--borda);border-radius:10px;
    color:var(--texto);cursor:pointer;font-family:inherit;
    transition:border-color .12s;
  }
  .casa:hover:enabled,.casa:focus-visible{border-color:var(--magenta);outline:none}
  .casa.x{color:var(--ciano)}
  .casa.o{color:var(--magenta)}
  .casa.vencedora{border-color:var(--fosforo);box-shadow:var(--sombra)}
  .modo{display:flex;gap:8px}
  .status-velha{
    text-align:center;margin:14px 0 6px;font-size:15px;
    letter-spacing:2px;text-transform:uppercase;color:var(--fosforo);
    min-height:20px;
  }

  /* Mensagem sobreposta (game over etc.) */
  .mensagem{
    text-align:center;padding:14px;margin-top:14px;
    border:2px dashed var(--borda);border-radius:10px;
    font-size:14px;letter-spacing:1px;display:none;
  }
  .mensagem.visivel{display:block}
  .mensagem b{color:var(--fosforo)}

  /* Cores extras das novas fichas */
  :root{--roxo:#b07aff;--laranja:#ff7a3d}
  .ficha[data-cor="ciano"]:hover{border-color:var(--ciano);box-shadow:0 0 12px rgba(58,214,255,.25)}
  .ficha[data-cor="ciano"] h2{color:var(--ciano)}
  .ficha[data-cor="roxo"]:hover{border-color:var(--roxo);box-shadow:0 0 12px rgba(176,122,255,.25)}
  .ficha[data-cor="roxo"] h2{color:var(--roxo)}
  .ficha[data-cor="laranja"]:hover{border-color:var(--laranja);box-shadow:0 0 12px rgba(255,122,61,.25)}
  .ficha[data-cor="laranja"] h2{color:var(--laranja)}

  /* Dificuldade da velha */
  .dificuldade{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
  .dificuldade .btn{font-size:11px;padding:6px 10px}

  /* ---------- PONG ---------- */
  #pongCanvas{
    display:block;width:100%;
    background:#0a120c;
    border:2px solid var(--borda);border-radius:10px;
    touch-action:none;cursor:ns-resize;
  }

  /* ---------- 2048 ---------- */
  .grade2048{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    background:#0d130e;border:2px solid var(--borda);border-radius:10px;
    padding:8px;touch-action:none;user-select:none;-webkit-user-select:none;
  }
  .t2048{
    aspect-ratio:1;display:grid;place-items:center;border-radius:6px;
    font-size:clamp(16px,6vw,26px);font-weight:bold;
    background:#131d15;color:var(--texto);
  }
  .t2048[data-v="0"]{color:transparent}
  .t2048[data-v="2"]{background:#1a2b1e}
  .t2048[data-v="4"]{background:#21391f}
  .t2048[data-v="8"]{background:#3c4c13;color:#ffe9a8}
  .t2048[data-v="16"]{background:#5d5410;color:#ffe9a8}
  .t2048[data-v="32"]{background:#7d550c;color:#fff}
  .t2048[data-v="64"]{background:#9c520a;color:#fff}
  .t2048[data-v="128"]{background:#b8720a;color:#fff}
  .t2048[data-v="256"]{background:#d18d08;color:#0b0f0c}
  .t2048[data-v="512"]{background:#eaa906;color:#0b0f0c}
  .t2048[data-v="1024"]{background:#ffc400;color:#0b0f0c}
  .t2048[data-v="2048"]{background:#ffd75e;color:#0b0f0c;box-shadow:0 0 14px rgba(255,215,94,.5)}

  /* ---------- FORCA ---------- */
  #forcaSvg{width:160px;margin:0 auto;display:block}
  #forcaSvg line,#forcaSvg circle{stroke:var(--fosforo-esc);stroke-width:3;fill:none;stroke-linecap:round}
  #forcaSvg .parte{stroke:var(--laranja);opacity:0;transition:opacity .3s}
  .categoria{
    text-align:center;font-size:12px;color:var(--laranja);
    letter-spacing:2px;text-transform:uppercase;margin-top:10px;
  }
  .palavra{
    display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
    margin:12px 0 4px;font-size:24px;
  }
  .palavra span{
    border-bottom:2px solid var(--fosforo-esc);min-width:24px;
    text-align:center;padding-bottom:2px;color:var(--fosforo);
  }
  .teclado{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
  .teclado button{
    padding:10px 0;background:#0d130e;color:var(--texto);
    border:2px solid var(--borda);border-radius:6px;
    font-family:inherit;font-size:14px;cursor:pointer;
  }
  .teclado button:hover:enabled{border-color:var(--laranja)}
  .teclado button.certa{border-color:var(--fosforo);color:var(--fosforo)}
  .teclado button.errada{border-color:#4a1f2e;color:#5a5a5a}
  .teclado button:disabled{cursor:default}

  /* ---------- GENIUS ---------- */
  .genius-grade{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
    max-width:340px;margin:0 auto;
  }
  .pad{
    aspect-ratio:1;border-radius:12px;border:2px solid var(--borda);
    cursor:pointer;opacity:.45;transition:opacity .1s,box-shadow .1s;
    padding:0;
  }
  .pad.aceso{opacity:1}
  .pad[data-p="0"]{background:#1d9c44}
  .pad[data-p="0"].aceso{box-shadow:0 0 18px rgba(51,255,102,.7)}
  .pad[data-p="1"]{background:#c02940}
  .pad[data-p="1"].aceso{box-shadow:0 0 18px rgba(255,79,110,.7)}
  .pad[data-p="2"]{background:#c98c00}
  .pad[data-p="2"].aceso{box-shadow:0 0 18px rgba(255,176,0,.7)}
  .pad[data-p="3"]{background:#1673a3}
  .pad[data-p="3"].aceso{box-shadow:0 0 18px rgba(58,214,255,.7)}

  /* ---------- CAMPO MINADO ---------- */
  .grade-minado{
    display:grid;grid-template-columns:repeat(9,1fr);gap:3px;
    background:#0d130e;border:2px solid var(--borda);border-radius:10px;
    padding:6px;user-select:none;-webkit-user-select:none;
  }
  .cm{
    aspect-ratio:1;display:grid;place-items:center;
    font-size:clamp(11px,3.4vw,16px);font-weight:bold;
    background:#1a2b1e;border:1px solid var(--borda);border-radius:3px;
    cursor:pointer;color:var(--texto);font-family:inherit;padding:0;
  }
  .cm.aberta{background:#0a120c;cursor:default}
  .cm.mina{background:#4a1f2e}
  .cm[data-n="1"]{color:var(--ciano)}
  .cm[data-n="2"]{color:var(--fosforo)}
  .cm[data-n="3"]{color:var(--magenta)}
  .cm[data-n="4"]{color:var(--roxo)}
  .cm[data-n="5"]{color:var(--laranja)}
  .cm[data-n="6"]{color:var(--ambar)}
  .cm[data-n="7"],.cm[data-n="8"]{color:#fff}

  /* ---------- BREAKOUT ---------- */
  #breakCanvas{
    display:block;width:100%;
    background:#0a120c;
    border:2px solid var(--borda);border-radius:10px;
    touch-action:none;cursor:ew-resize;
  }

  /* ---------- DAMAS E XADREZ ---------- */
  .grade-damas,.grade-xadrez{
    display:grid;grid-template-columns:repeat(8,1fr);gap:0;
    border:2px solid var(--borda);border-radius:10px;overflow:hidden;
    max-width:440px;margin:0 auto;user-select:none;-webkit-user-select:none;
  }
  .cd,.cx{
    aspect-ratio:1;display:grid;place-items:center;
    border:none;padding:0;cursor:pointer;font-family:inherit;
  }
  .cd.clara,.cx.clara{background:#1d3324}
  .cd.escura,.cx.escura{background:#0d1a11}
  .cd.selecionada,.cx.selecionada{box-shadow:inset 0 0 0 3px var(--ambar)}
  .cd.destino,.cx.destino{box-shadow:inset 0 0 0 3px rgba(51,255,102,.6)}
  .peca{
    width:72%;height:72%;border-radius:50%;
    display:grid;place-items:center;
    font-size:clamp(12px,3.4vw,18px);
  }
  .peca.branca{background:#e8ffe8;color:#0b0f0c;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
  .peca.preta{background:#ff4fa3;color:#0b0f0c;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
  .cx span{font-size:clamp(22px,6.5vw,34px);line-height:1;pointer-events:none}
  .cx .pb{color:#e8ffe8;text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .cx .pp{color:#ffb000;text-shadow:0 1px 4px rgba(0,0,0,.8)}

  /* ---------- CORRIDA, NAVE E EMPILHAR ---------- */
  #corridaCanvas,#blocosCanvas{
    display:block;width:100%;max-width:320px;margin:0 auto;
    background:#0a120c;border:2px solid var(--borda);border-radius:10px;
    touch-action:none;
  }
  #naveCanvas{
    display:block;width:100%;
    background:#0a120c;border:2px solid var(--borda);border-radius:10px;
    touch-action:none;
  }

  /* ---------- QUEBRA-CABEÇA ---------- */
  .grade-quebra{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    max-width:360px;margin:0 auto;
  }
  .qt{
    aspect-ratio:1;font-size:clamp(20px,7vw,30px);font-weight:bold;
    background:#1a2b1e;border:2px solid var(--borda);border-radius:8px;
    color:var(--fosforo);cursor:pointer;font-family:inherit;
  }
  .qt:hover{border-color:var(--fosforo)}
  .qt.vazio{background:transparent;border-color:transparent;cursor:default}

  footer{
    text-align:center;margin-top:28px;font-size:11px;
    color:var(--fosforo-esc);letter-spacing:2px;text-transform:uppercase;
  }

/* Controles de toque do Blocos */
.controles-blocos{
  display:flex;gap:8px;justify-content:center;margin-top:14px;
}
.controles-blocos button{
  width:56px;height:52px;font-size:20px;
  background:#0d130e;color:var(--fosforo);
  border:2px solid var(--borda);border-radius:8px;cursor:pointer;
}
.controles-blocos button:active{border-color:var(--fosforo)}

/* ---------- Portal multi-página ---------- */
a.ficha{text-decoration:none;color:var(--texto)}
a.btn{text-decoration:none;display:inline-block}
.topo-pagina{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:2px dashed var(--borda);margin-bottom:16px;
}
.topo-pagina .logo{
  color:var(--fosforo);text-decoration:none;letter-spacing:3px;
  font-size:18px;text-transform:uppercase;
  text-shadow:0 0 8px rgba(51,255,102,.5);
}
.intro-home{font-size:14px;line-height:1.7;color:#a8d8b9;margin:0 0 18px}
.conteudo{margin-top:26px;border-top:2px dashed var(--borda);padding-top:18px}
.conteudo h1{color:var(--fosforo);font-size:20px;letter-spacing:2px;margin-bottom:10px;text-transform:uppercase}
.conteudo h2{color:var(--ambar);font-size:15px;letter-spacing:2px;margin:18px 0 8px;text-transform:uppercase}
.conteudo p{font-size:14px;line-height:1.7;color:#a8d8b9;margin-bottom:10px}
.espaco-anuncio{
  min-height:90px;margin:16px 0;display:grid;place-items:center;
  border:1px dashed var(--borda);border-radius:8px;
  color:#3f6b4d;font-size:10px;letter-spacing:2px;text-transform:uppercase;
}
.rodape-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.rodape-links a{color:#7fbf95;font-size:12px}
.aviso-cookies{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:200;
  background:#101812;border:2px solid var(--borda);border-radius:10px;
  padding:12px 14px;display:flex;gap:12px;align-items:center;
  justify-content:space-between;font-size:12px;color:#a8d8b9;
}