:root{
  --ink:#12100f;
  --digit-h:clamp(52px, min(11.5vw, 17svh), 130px);
  --slot-w:calc(var(--digit-h) * 0.66);
  --boil:600ms;
}

*{box-sizing:border-box}

html{height:100%}

body{
  position:relative;          /* âncora da .topbar */
  min-height:100svh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:safe center;
  gap:clamp(22px, 5vh, 56px);
  padding:clamp(20px, 5vh, 72px) clamp(16px, 4vw, 48px);
  overflow-x:hidden;
  color:var(--ink);
  font-family:"Caveat", "Bradley Hand", "Segoe Print", cursive;
  background:#eceae5;
}

/* O papel vive numa camada fixa, não no background do body.
   Motivo: o background do body propaga para o canvas e o `cover` é calculado
   sobre a VIEWPORT, não sobre a altura do documento — numa página mais alta que
   a tela, a textura acabava no meio e o resto virava cor chapada. Fixo em
   `inset:0` ele preenche a tela inteira em qualquer posição de rolagem, e a
   textura mantém a escala natural em vez de esticar junto com a página.
   É um elemento fixo em vez de `background-attachment:fixed` porque o iOS
   Safari dimensiona aquele modo errado.

   Os gradientes vêm depois do papel na mesma pilha: um clarão suave no centro
   e um sombreado frio nas bordas, o bastante pra folha ter volume. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255,255,255,.35), rgba(255,255,255,0) 62%),
    radial-gradient(ellipse 96% 88% at 50% 44%, rgba(84,82,96,0) 55%, rgba(84,82,96,.16)),
    #eceae5 url("assets/paper.jpg") center center / cover no-repeat;
}

.header,.main{position:relative}

.main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px, 3vh, 30px);
}

/* ---------- logo ---------- */

.logo{
  display:block;
  width:clamp(180px, min(46vw, 56svh), 565px);
  aspect-ratio:1100 / 738;
  height:auto;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.20));
}

/* ---------- jogo ---------- */

.arena{
  width:min(100%, 1080px);
  margin-top:clamp(26px, 5vh, 54px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

#game{
  width:100%;
  aspect-ratio:12 / 5;
  display:block;
  border:3px solid var(--ink);
  border-radius:3px;
  background:#d5d1cb;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  touch-action:pan-y;             /* o jogo trava o scroll só enquanto roda */
  cursor:pointer;
  outline:none;
}
#game:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.34)}

.keys{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 20px;
  font-size:clamp(14px, 2vw, 20px);
  font-weight:700;
  opacity:.62;
}
.keys kbd{
  font:inherit;
  border:2px solid currentColor;
  border-radius:4px;
  padding:0 .38em;
  margin-right:.25em;
}
.keys .touch{display:none}

@media (hover:none){
  .keys span:not(.touch){display:none}
  .keys .touch{display:inline}
}

/* ---------- contagem ---------- */

.countdown{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(8px, 2.2vw, 26px);
  flex-wrap:wrap;
}

.unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15em;
}

.digits{
  display:flex;
  justify-content:center;
  height:var(--digit-h);
}

.slot{
  width:var(--slot-w);
  height:var(--digit-h);
  display:grid;
  place-items:center;
  /* o traço largo do 1 e do 4 pode invadir a calha: fica com cara de manuscrito */
  overflow:visible;
  animation:boil var(--boil) step-end infinite;
}
.slot:nth-child(2){animation-delay:-200ms}
.slot:nth-child(3){animation-delay:-400ms}

.slot img{
  height:var(--digit-h);
  width:auto;
  max-width:none;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

.slot.pop img{animation:pop 200ms ease-out}

.label{
  font-size:clamp(17px, 3vw, 32px);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:lowercase;
  opacity:.9;
  transform:rotate(-1.2deg);
}

/* dois pingos de tinta no lugar dos dois pontos */
.sep{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:calc(var(--digit-h) * .16);
  height:var(--digit-h);
  animation:boil var(--boil) step-end infinite;
  animation-delay:-100ms;
}
.sep i{
  width:calc(var(--digit-h) * .085);
  height:calc(var(--digit-h) * .085);
  background:var(--ink);
  border-radius:52% 48% 45% 55%;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.sep i:last-child{border-radius:46% 54% 53% 47%;transform:rotate(12deg)}

.target{
  margin:0;
  font-size:clamp(15px, 2.4vw, 25px);
  font-weight:600;
  letter-spacing:.22em;
  opacity:.7;
  transform:rotate(.6deg);
}

/* ---------- fervilhar: 3 quadros, igual ao gif da logo ---------- */

@keyframes boil{
  0%   {transform:translate(0,0) rotate(0deg)}
  33%  {transform:translate(.6px,-.7px) rotate(.55deg)}
  66%  {transform:translate(-.5px,.6px) rotate(-.5deg)}
}

@keyframes pop{
  0%  {transform:scale(1.11) rotate(-2.4deg);opacity:.35}
  55% {transform:scale(.985) rotate(.9deg);opacity:1}
  100%{transform:scale(1) rotate(0deg)}
}

@media (max-width:560px){
  /* em 2x2 sobra largura: o dígito pode crescer bem mais do que os 11.5vw do desktop */
  :root{--digit-h:min(23vw, 15svh)}
  .logo{width:min(72vw, 36svh)}
  .countdown{max-width:24rem;gap:clamp(10px, 3vh, 22px) 6px}
  .sep{display:none}
  .unit{flex:0 0 calc(50% - 6px)}
  .label{font-size:clamp(16px, 4.4vw, 22px)}
  #game{aspect-ratio:16 / 9}
}

@media (prefers-reduced-motion:reduce){
  .slot,.sep{animation:none}
  .slot.pop img{animation:none}
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ==========================================================================
   wallet, pódio e galeria
   ========================================================================== */

.topbar{
  position:absolute;
  top:clamp(12px, 2.5vh, 26px);
  right:clamp(14px, 4vw, 40px);
  z-index:5;
}

#connect{
  font-family:inherit;
  font-size:clamp(15px, 2vw, 20px);
  font-weight:700;
  color:var(--ink);
  background:rgba(255,255,255,.62);
  border:2px solid var(--ink);
  border-radius:3px;
  padding:.22em .8em;
  cursor:pointer;
  transform:rotate(-.8deg);
  box-shadow:0 3px 0 rgba(0,0,0,.16);
  transition:transform .12s ease, box-shadow .12s ease;
}
#connect:hover{transform:rotate(-.8deg) translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.2)}
#connect:active{transform:rotate(-.8deg) translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.16)}
#connect[data-connected]{font-family:var(--mono, ui-monospace, monospace);font-size:clamp(12px,1.5vw,15px);font-weight:600}
#connect:focus-visible{outline:3px solid rgba(0,0,0,.4);outline-offset:3px}

/* ---------- painéis ---------- */

.panels{
  width:min(100%, 1080px);
  margin-top:clamp(30px, 5vh, 56px);
}

.tabs{
  display:flex;
  gap:8px;
  border-bottom:2px solid var(--ink);
}
.tabs button{
  font-family:inherit;
  font-size:clamp(17px, 2.4vw, 24px);
  font-weight:700;
  color:var(--ink);
  background:none;
  border:none;
  padding:.2em .7em .3em;
  cursor:pointer;
  opacity:.45;
  border-bottom:4px solid transparent;
  margin-bottom:-2px;
}
.tabs button[aria-selected="true"]{opacity:1;border-bottom-color:var(--ink)}
.tabs button:focus-visible{outline:3px solid rgba(0,0,0,.4);outline-offset:-3px}

.panel{padding-top:18px;min-height:120px}

.panel-note{
  margin:0;
  font-size:clamp(15px, 2vw, 19px);
  opacity:.6;
}
.panel-note:empty{display:none}

/* ---------- pódio ---------- */

.board{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  display:flex;
  flex-direction:column;
}
.board:empty{display:none}
.board li{
  display:grid;
  grid-template-columns:3.4rem 1fr auto auto;
  align-items:baseline;
  gap:0 14px;
  padding:11px 4px;
  border-bottom:1px solid rgba(0,0,0,.16);
  font-size:clamp(17px, 2.3vw, 23px);
}
.board li[data-me]{background:rgba(248,200,42,.26)}
.place{font-weight:700}
.who{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.72em;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.chain{
  font-size:.6em;
  font-weight:700;
  letter-spacing:.09em;
  border:1.5px solid currentColor;
  border-radius:2px;
  padding:.05em .4em;
  opacity:.55;
}
.score{font-weight:700;font-variant-numeric:tabular-nums}

@media (max-width:520px){
  .board li{grid-template-columns:2.8rem 1fr auto;gap:0 10px}
  .chain{display:none}
}

/* ---------- galeria ---------- */

.nft-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:14px;
}
.nft-grid:empty{display:none}
.nft{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.nft img, .nft-blank{
  width:100%;
  aspect-ratio:1;
  max-width:100%;
  object-fit:cover;
  display:block;
  border:2px solid var(--ink);
  background:rgba(255,255,255,.5);
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.nft-blank{
  display:grid;
  place-items:center;
  font-size:14px;
  opacity:.4;
}
.nft figcaption{
  font-size:15px;
  line-height:1.25;
  opacity:.75;
  overflow-wrap:anywhere;
}

/* ---------- modal ---------- */

#wallet-dialog{
  border:3px solid var(--ink);
  border-radius:4px;
  padding:0;
  max-width:min(94vw, 30rem);
  color:var(--ink);
  background:#f7f5f1 url("assets/paper.jpg") center / cover;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
#wallet-dialog::backdrop{background:rgba(20,18,15,.55)}

.dialog-inner{
  position:relative;
  padding:clamp(22px, 5vw, 34px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
#wallet-dialog h2{
  margin:0;
  font-size:clamp(26px, 5vw, 34px);
  font-weight:700;
  line-height:1.1;
}
.dialog-lede{
  margin:0 0 14px;
  font-size:clamp(15px, 2.4vw, 19px);
  line-height:1.4;
  opacity:.72;
}
.dialog-x{
  position:absolute;
  top:8px; right:12px;
  font:inherit;
  font-size:30px;
  line-height:1;
  background:none;
  border:none;
  cursor:pointer;
  opacity:.5;
  padding:4px 8px;
}
.dialog-x:hover{opacity:1}

.wallet-btn{
  font-family:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  text-align:left;
  text-decoration:none;
  color:var(--ink);
  background:rgba(255,255,255,.62);
  border:2px solid var(--ink);
  border-radius:3px;
  padding:11px 15px;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.16);
}
.wallet-btn:hover{background:rgba(255,255,255,.9)}
.wallet-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.16)}
.wallet-btn strong{font-size:clamp(19px, 3vw, 24px);font-weight:700;line-height:1.1}
.wallet-btn small{font-size:14px;opacity:.6}
.wallet-btn.wide{align-items:center;text-align:center}
.wallet-btn:focus-visible{outline:3px solid rgba(0,0,0,.45);outline-offset:2px}

.qr-frame{
  display:grid;
  place-items:center;
  background:#fff;
  border:2px solid var(--ink);
  padding:10px;
  margin-bottom:12px;
  min-height:180px;
}
.qr-frame img{width:min(240px, 60vw);height:auto;display:block}

.addr{
  margin:0 0 6px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:clamp(12px, 2.6vw, 15px);
  line-height:1.4;
  overflow-wrap:anywhere;
  background:rgba(255,255,255,.6);
  border:1.5px solid rgba(0,0,0,.25);
  padding:8px 10px;
}

.link-btn{
  font-family:inherit;
  font-size:16px;
  background:none;
  border:none;
  color:var(--ink);
  opacity:.55;
  cursor:pointer;
  text-decoration:underline;
  padding:8px 0 0;
  align-self:center;
}
.link-btn:hover{opacity:.9}

#wallet-status{
  margin:0;
  font-size:clamp(15px, 2.2vw, 18px);
  line-height:1.35;
  min-height:1.4em;
  opacity:.78;
}
#wallet-status[data-kind="error"]{color:#9c2d16;opacity:1}
#wallet-status[data-kind="ok"]{font-weight:700;opacity:1}
#wallet-status:empty{min-height:0}

@media (prefers-reduced-motion:reduce){
  #connect{transition:none}
}