/* Tema visual do jogo (cores, fonte e botões). Todas as telas usam este arquivo.
   Para trocar uma cor do jogo inteiro, mude aqui. */
:root{
  --bg:#1c0b44;--bg2:#2b1166;--card:#371a80;--card2:#4524a0;--line:#6447d6;--ink:#fff;--mut:#cdbdff;
  --yellow:#ffd23f;--yellowD:#d99300;--pink:#ff4fa3;--pinkD:#bf1f74;--teal:#1fd1c1;--tealD:#0b8f84;
  --orange:#ff8a3d;--orangeD:#c9550f;--blue:#4c8dff;--blueD:#2052c7;--green:#36d982;--greenD:#139250;--red:#ff5a6a;
  --font:"Fredoka","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Fundo: luz de palco em cima e as formas do jogo (triângulo, círculo, quadrado, anel) espalhadas bem de leve */
.fundo{background:
  radial-gradient(ellipse 70% 55% at 50% -10%,rgba(255,210,63,.22),transparent 70%),
  radial-gradient(ellipse 60% 50% at 100% 100%,rgba(255,79,163,.25),transparent 70%),
  radial-gradient(ellipse 60% 50% at 0% 90%,rgba(31,209,193,.18),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='3'%3E%3Cpath d='M30 60l22-38 22 38z'/%3E%3Ccircle cx='160' cy='50' r='18'/%3E%3Crect x='120' y='140' width='34' height='34' rx='4' transform='rotate(15 137 157)'/%3E%3Ccircle cx='50' cy='165' r='16'/%3E%3Ccircle cx='50' cy='165' r='7'/%3E%3C/g%3E%3C/svg%3E"),
  linear-gradient(180deg,var(--bg2),var(--bg) 60%);background-attachment:fixed}
/* Logo: o nome com uma sombra projetada atrás, como na tela do teatro */
.logo{position:relative;isolation:isolate;display:inline-block;margin:0;font:700 clamp(58px,12vw,128px)/.95 var(--font);letter-spacing:-.02em;color:var(--yellow);
  text-shadow:0 .05em 0 var(--orangeD),0 .09em 0 rgba(0,0,0,.25);white-space:nowrap}
.logo::after{content:attr(data-name);position:absolute;left:0;top:0;z-index:-1;color:rgba(10,0,30,.55);transform:translate(.12em,.16em) skewX(-24deg) scaleY(.92);transform-origin:bottom;filter:blur(2px);text-shadow:none}
/* Botões "fofinhos" com degrau embaixo (afundam quando aperta) */
.b3{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:16px;font:600 17px/1.1 var(--font);color:#2b1500;background:var(--yellow);
  box-shadow:0 5px 0 var(--yellowD),0 12px 20px -8px rgba(0,0,0,.5);cursor:pointer;text-decoration:none;transition:transform .08s,box-shadow .08s,filter .15s;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.b3:hover:not(:disabled){filter:brightness(1.07)}
.b3:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--yellowD),0 4px 10px -6px rgba(0,0,0,.5)}
.b3:disabled{filter:grayscale(.7) brightness(.8);cursor:default}
.b3.pink{background:var(--pink);color:#fff;box-shadow:0 5px 0 var(--pinkD),0 12px 20px -8px rgba(0,0,0,.5)}.b3.pink:active{box-shadow:0 1px 0 var(--pinkD)}
.b3.teal{background:var(--teal);color:#05322e;box-shadow:0 5px 0 var(--tealD),0 12px 20px -8px rgba(0,0,0,.5)}.b3.teal:active{box-shadow:0 1px 0 var(--tealD)}
.b3.blue{background:var(--blue);color:#fff;box-shadow:0 5px 0 var(--blueD),0 12px 20px -8px rgba(0,0,0,.5)}.b3.blue:active{box-shadow:0 1px 0 var(--blueD)}
.b3.green{background:var(--green);color:#063a1f;box-shadow:0 5px 0 var(--greenD),0 12px 20px -8px rgba(0,0,0,.5)}.b3.green:active{box-shadow:0 1px 0 var(--greenD)}
.b3.orange{background:var(--orange);color:#fff;box-shadow:0 5px 0 var(--orangeD),0 12px 20px -8px rgba(0,0,0,.5)}.b3.orange:active{box-shadow:0 1px 0 var(--orangeD)}
.b3.ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}.b3.ghost:active{transform:translateY(2px)}
.flag-svg{display:inline-block;overflow:hidden;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.flag-svg svg{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}