/* Feira Maluca — estilos (cartazes, botões, modais, ranking) */
html{color-scheme:light only}
:root{
  --ink:#2B1D0E;      /* tinta de xilogravura */
  --kraft:#D9BC85;    /* papel craft da página */
  --paper:#F3E3C3;    /* papel do cartaz */
  --wood:#B98A4E;     /* madeira do caixote */
  --red:#C0392B;      /* vermelho cordel */
  --yellow:#E8A31D;
  --green:#3E6B35;
  --blue:#2F5D8A;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background-color:var(--kraft);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/></filter><rect width="140" height="140" filter="url(%23n)"/></svg>');
  color:var(--ink);
  font-family:'Bitter',Georgia,serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto}

/* ── Cabeçalho ── */
header{display:flex;align-items:center;gap:8px;padding:8px 10px 6px}
.title{font-family:'Rye',Georgia,serif;font-size:clamp(19px,5.6vw,27px);letter-spacing:1px;line-height:1}
.title small{display:block;font-family:'Bitter',Georgia,serif;font-size:10px;font-weight:700;letter-spacing:2px;margin-top:2px;color:var(--red)}
.boxes{margin-left:auto;display:flex;gap:6px;align-items:center}
.box{background:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:3px 9px;text-align:center;min-width:62px}
.box .lbl{font-size:8px;letter-spacing:2px;font-weight:700}
.box .val{font-family:'Rye',Georgia,serif;font-size:17px;line-height:1.1}
button.icon{width:37px;height:37px;flex:none;background:var(--red);color:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:16px;cursor:pointer;line-height:1}
button.icon.alt{background:var(--blue)}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ── Bandeirinhas ── */
.bandeirinhas{line-height:0}
.bandeirinhas svg{display:block;width:100%;height:13px}

/* ── Espaços de anúncio ── */
.ad-slot{margin:6px 10px 2px;height:50px;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(43,29,14,.45);color:rgba(43,29,14,.55);font-size:10px;letter-spacing:2px;font-weight:700;background:rgba(243,227,195,.4)}
.ad-slot.rect{height:120px;margin:12px 0 2px}

/* ── Área do jogo ── */
#game-wrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6px}
canvas#game{touch-action:none;background:#EDD9AE;border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(43,29,14,.35)}
#hint{position:absolute;left:50%;top:38%;transform:translateX(-50%);background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:8px 14px;font-size:13px;font-weight:700;text-align:center;pointer-events:none;max-width:78%;transition:opacity .4s}
#hint.gone{opacity:0}
#btnSling{position:absolute;top:14px;left:14px;z-index:5;background:var(--blue);color:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:'Rye',Georgia,serif;font-size:13px;padding:7px 10px;cursor:pointer}
#btnSling.armed{background:var(--red);animation:pulse .8s infinite alternate}
#btnCoringa{position:absolute;top:60px;left:14px;z-index:5;background:#8E3B9F;color:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:'Rye',Georgia,serif;font-size:13px;padding:7px 10px;cursor:pointer}
#btnCoringa.armed{background:#B85FCC;animation:pulse .8s infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ── Rodapé: cadeia de evolução ── */
footer{padding:2px 10px 10px;text-align:center}
#chain{display:block;width:100%;max-width:400px;margin:0 auto}

/* ── Cartazes (modais) ── */
.modal{position:fixed;inset:0;background:rgba(43,29,14,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.hidden{display:none!important}
.poster{background:var(--paper);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);max-width:340px;width:100%;max-height:92dvh;overflow:auto;padding:0 18px 16px;text-align:center;position:relative}
.poster .bandeirinhas{margin:0 -18px 10px}
.poster h2{font-family:'Rye',Georgia,serif;font-size:27px;color:var(--red);margin:4px 0 8px}
.poster p{font-size:13px;line-height:1.5;margin:6px 0}
.poster p.mini{font-size:11px;font-style:italic;opacity:.85}
.go-score{font-family:'Rye',Georgia,serif;font-size:52px;line-height:1;margin:4px 0 0}
.go-score small{display:block;font-family:'Bitter',Georgia,serif;font-size:10px;letter-spacing:3px;font-weight:700}
.btn{display:block;width:100%;padding:12px;margin-top:10px;font-family:'Rye',Georgia,serif;font-size:15px;letter-spacing:1px;background:var(--red);color:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.btn.zap{background:#1EA952}
.btn.green{background:var(--green)}
.btn.big{font-size:20px;padding:14px}
.btn.ghost{background:var(--paper);color:var(--ink);opacity:.6}
.poster h1{font-family:'Rye',Georgia,serif;font-size:36px;line-height:.95;color:var(--red);margin:4px 0 2px;text-shadow:2px 2px 0 rgba(43,29,14,.18)}
.subtitle{font-style:italic;font-size:13px;margin:0 0 4px}
.daytag{display:inline-block;background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:3px 12px;font-weight:700;font-size:11px;letter-spacing:2px;margin:4px 0 8px}
.nick{width:100%;padding:10px;border:3px solid var(--ink);background:#FFF6E4;color:var(--ink);font-family:'Bitter',Georgia,serif;font-size:16px;text-align:center;margin-top:6px}
.nick:focus{outline:none;background:#fff}
.tabs{display:flex;gap:6px;margin:4px 0 2px}
.tab{flex:1;padding:8px;font-family:'Rye',Georgia,serif;font-size:13px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.tab.active{background:var(--yellow)}
.ranklist{list-style:none;text-align:left;margin:8px 0;min-height:110px;max-height:38dvh;overflow:auto}
.ranklist li{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;border-bottom:2px dotted rgba(43,29,14,.35);font-size:14px}
.ranklist li b{font-family:'Rye',Georgia,serif}
.ranklist li.me{background:var(--yellow);outline:2px solid var(--ink);font-weight:700}
.ranklist li.mefoot{justify-content:center;background:rgba(232,163,29,.35);border:2px dashed var(--ink);margin-top:6px;font-weight:700}
.guide{display:flex;flex-wrap:wrap;gap:2px 6px;justify-content:center;margin:4px 0}
.guide .gi{width:72px;text-align:center}
.guide .gi canvas{display:block;margin:0 auto}
.guide .gi span{font-size:9px;font-weight:700;letter-spacing:.4px}
#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:99;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 16px;font-weight:700;font-size:14px;max-width:90%;text-align:center}
.conqlist{list-style:none;text-align:left;font-size:12px;line-height:1.7;margin:4px 0;padding:0}
.conqcat{font-family:'Rye',Georgia,serif;font-size:13px;margin-top:10px;border-bottom:2px solid var(--ink);padding-bottom:2px}
#temaLista{display:flex;flex-direction:column;gap:8px;margin:10px 0}
#temaLista .btn{width:100%}
#temaLista .btn .mini{font-weight:400}
#temaBar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;gap:10px;background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px;max-width:92vw}
#temaBar.hidden{display:none}
.btn[disabled]{opacity:.55;cursor:not-allowed}
@media (max-width:400px){.box{min-width:50px;padding:3px 6px}button.icon{width:33px;height:33px}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}