.title, .stage {
  min-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  text-align: center;
  padding: 8px 14px 18px;
  gap: 8px;
}

.title h1, .brand {
  margin: 0;
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-weight: 700;
  text-shadow: 0 3px 0 #b86a12;
}

.title h1 { font-size: clamp(64px, 16vw, 104px); line-height: .86; }
.brand { font-size: 22px; letter-spacing: .16em; }
.tag, .how, .rec, .hint { margin: 0; font-weight: 800; color: #f3e0c8; }
.how { max-width: 340px; line-height: 1.4; }
.rec, .hint { color: var(--gold); }
.hint { min-height: 1.3em; font-size: 13px; max-width: 360px; }
.hint.gone { visibility: hidden; }

.hud {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.plaque {
  background: linear-gradient(180deg, rgba(255, 246, 232, .1), rgba(0, 0, 0, .22));
  border: 1px solid rgba(240, 193, 74, .4);
  border-radius: 16px;
  padding: 6px 8px 8px;
}

.plaque span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e7c36a;
}

.plaque b {
  font-family: Fredoka, sans-serif;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.orders {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  border-radius: 16px;
  border: 1px dashed rgba(240, 193, 74, .45);
  background: rgba(0, 0, 0, .18);
}

.order.hot { border-style: solid; border-color: #ffe08a; box-shadow: 0 0 0 3px rgba(255, 224, 138, .25); }
.order small { font-weight: 800; color: #ffe7c2; }

.frame {
  width: min(100%, 420px, max(220px, calc(100dvh - 300px)));
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(165deg, #6a4630, #24160f);
  box-shadow: 0 0 0 2px #f0d48a, 0 0 0 5px #6d4318, 0 18px 36px rgba(0, 0, 0, .42);
}

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, #12382c, #0c241d);
  touch-action: none;
}

.cell {
  aspect-ratio: 1;
  border-radius: 18px;
  background: #071510;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45);
  position: relative;
}

.cell.hot { box-shadow: inset 0 0 0 2px #ffe08a; }
.cell.bad { box-shadow: inset 0 0 0 2px #e25b5b; }

.token, .floater .token {
  position: absolute;
  inset: 5px;
  display: grid;
  place-items: center;
  font-family: Fredoka, sans-serif;
  font-size: clamp(22px, 6vw, 32px);
  color: #fffaf3;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -4px 0 rgba(0, 0, 0, .18);
}

.token[data-f="doce"] { background: linear-gradient(180deg, #ff8d98, #e1062c); border-radius: 50%; }
.token[data-f="salgado"] { background: linear-gradient(180deg, #fff3a0, #e09400); border-radius: 8px 8px 18px 18px; }
.order .token { position: relative; inset: auto; width: 48px; height: 48px; }
.token[data-f="fruta"] { background: linear-gradient(180deg, #8dff9e, #0c7a28); border-radius: 46% 46% 42% 42%; }
.token[data-f="bebida"] { background: linear-gradient(180deg, #9ec6ff, #143fb8); border-radius: 8px 8px 16px 16px; }
.token b { line-height: 1; }
.token i {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  text-shadow: none;
}
.token[data-lv="5"] { box-shadow: inset 0 0 0 3px #ffe08a, inset 0 2px 0 rgba(255, 255, 255, .65); }

.cell .pop { animation: pop .2s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.4); } }

.next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e7c36a;
}

.preview {
  width: 58px;
  height: 58px;
  position: relative;
  border-radius: 16px;
  background: rgba(0, 0, 0, .2);
  touch-action: none;
  cursor: grab;
}

.preview .token { inset: 8px; cursor: grab; }
.floater { position: fixed; z-index: 7; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 12px 8px rgba(0,0,0,.35)); }
.floater .token { inset: 0; }

.card .btn { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .cell .pop { animation: none; }
}