/* Tia Dôra — Fragmentos do Amor */
:root{
  --marrom:#6b4423;
  --marrom-esc:#4a2d15;
  --madeira:#a86f3c;
  --madeira-clara:#c98d52;
  --creme:#fff3dd;
  --creme-esc:#f0dcb8;
  --dourado:#ffc94d;
  --verde:#4c9e46;
  --vermelho:#d94a3d;
  --sombra:0 4px 0 rgba(0,0,0,.28);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;
  background:#1d1a17;
  overflow:hidden;
  font-family:"Trebuchet MS","Segoe UI",Verdana,system-ui,sans-serif;
  color:var(--creme);
  touch-action:none;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}

#stage{
  position:fixed;inset:0;
  display:grid;place-items:center;
  background:#12100e;
}

canvas#game{
  display:block;
  width:100%;height:100%;
  image-rendering:auto;
}

/* ------------------------------------------------------------- toque --- */
#touch{position:absolute;inset:0;display:flex;z-index:5}
#touch[hidden]{display:none}
#touch .tzone{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
#touch .tzone span{
  font-size:11px;letter-spacing:.14em;font-weight:bold;
  color:rgba(255,255,255,.42);
  background:rgba(0,0,0,.22);
  border-radius:999px;padding:6px 14px;
  backdrop-filter:blur(2px);
  transition:opacity .3s;
}
#touch .tzone.hide span{opacity:0}
#touch .tzone:active span{color:#fff;background:rgba(0,0,0,.42)}
#tzDuck{flex:0 0 34%}

/* ------------------------------------------------------------ botões --- */
#topbtns{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:20}
.icobtn{
  width:38px;height:38px;border:0;border-radius:12px;
  background:rgba(38,26,16,.55);color:var(--creme);
  font-size:15px;line-height:1;cursor:pointer;
  border-bottom:3px solid rgba(0,0,0,.32);
  transition:transform .08s,background .2s;
}
.icobtn:hover{background:rgba(38,26,16,.8)}
.icobtn:active{transform:translateY(2px);border-bottom-width:1px}
.icobtn.off{opacity:.42}

/* ------------------------------------------------------------- telas --- */
#screens{position:absolute;inset:0;z-index:10;pointer-events:none}
.screen{
  position:absolute;inset:0;
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  gap:12px;padding:22px;text-align:center;
  pointer-events:auto;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(66,38,14,.55),rgba(10,6,2,.85)),
    rgba(16,10,4,.78);
  backdrop-filter:blur(3px);
  animation:fade .28s ease;
}
.screen.on{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}

#logoImg{width:min(58vw,290px);height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}

.tagline{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado);margin-top:-4px;
}
.story{font-size:14px;line-height:1.6;color:var(--creme-esc);max-width:36ch}
.story b{color:var(--dourado)}
.keys{font-size:11.5px;line-height:1.9;color:rgba(255,243,221,.6);max-width:40ch}
.keys b{color:var(--creme)}
.tiny{font-size:12px;letter-spacing:.12em;color:rgba(255,243,221,.5)}

h2{
  font-size:clamp(30px,7vw,52px);letter-spacing:.06em;
  color:var(--dourado);
  text-shadow:0 4px 0 var(--marrom-esc),0 7px 14px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------ madeira -- */
.wood{
  position:relative;
  font:inherit;font-weight:bold;font-size:17px;letter-spacing:.13em;
  color:#fff6e2;cursor:pointer;
  padding:13px 34px;border:0;border-radius:14px;
  background:linear-gradient(#c2884b,var(--madeira) 45%,#8d5a2c);
  box-shadow:inset 0 2px 0 rgba(255,225,180,.45),
             inset 0 -3px 0 rgba(0,0,0,.22),
             0 5px 0 var(--marrom-esc),0 9px 16px rgba(0,0,0,.4);
  text-shadow:0 2px 0 rgba(0,0,0,.35);
  transition:transform .07s,box-shadow .07s;
}
.wood:hover{filter:brightness(1.07)}
.wood:active{transform:translateY(4px);
  box-shadow:inset 0 2px 0 rgba(255,225,180,.35),0 1px 0 var(--marrom-esc)}
.wood.big{font-size:22px;padding:16px 46px}
.wood.ghost{
  background:rgba(255,243,221,.09);color:var(--creme-esc);
  box-shadow:inset 0 0 0 2px rgba(255,243,221,.22),0 4px 0 rgba(0,0,0,.3);
  font-size:14px;padding:10px 26px;
}

/* --------------------------------------------------------- placares --- */
.records{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.rec{
  background:rgba(0,0,0,.3);border:2px solid rgba(255,201,77,.28);
  border-radius:12px;padding:7px 14px;min-width:88px;
}
.rec i{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  color:rgba(255,243,221,.55);text-transform:uppercase}
.rec b{font-size:19px;color:var(--dourado)}

.scorecard{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:420px}
.scorecard .rec b{font-size:22px}
.novo{color:#8ce07a !important;animation:pulse .7s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* -------------------------------------------------------- carregando -- */
.loader{width:52px;height:52px;border-radius:50%;
  border:5px solid rgba(255,243,221,.16);border-top-color:var(--dourado);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader i{display:none}

@media (max-width:520px){
  .story{font-size:12.5px}
  .keys{display:none}
  .wood.big{font-size:19px;padding:14px 38px}
}
@media (prefers-reduced-motion:reduce){
  #logoImg,.novo{animation:none}
}