:root {
  --lagoa: #0E5A63; --petroleo: #12343B; --areia: #F6E9D2; --sol: #F2B632; --espuma: #FFFCF6; --pedra: #6E7F80;
  --sol-escuro: #B98314; --sol-claro: #FFD976;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 0%, #17707a 0%, var(--lagoa) 45%, #0a434a 100%);
  color: var(--espuma); font: 400 16px/1.5 Figtree, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.stage { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }
.console { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 28px; }
body.done .console { min-height: auto; padding: 48px 0 24px; }

/* ---------- botão físico ---------- */
.btn {
  --size: min(64vw, 260px); --lift: 18px;
  position: relative; width: var(--size); height: calc(var(--size) * .62 + var(--lift));
  border: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.btn:focus-visible { outline: none; }
.btn:focus-visible .ring { box-shadow: 0 0 0 4px var(--sol-claro), inset 0 6px 14px rgba(0,0,0,.55), 0 18px 30px rgba(0,0,0,.35); }
/* aro de metal onde o botão encaixa */
.ring {
  position: absolute; left: -7%; right: -7%; bottom: 0; height: calc(var(--size) * .62);
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 35%, #2c4f55, #0f2a2f 70%, #0a1f23);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.55), inset 0 -3px 0 rgba(255,255,255,.12), 0 18px 30px rgba(0,0,0,.35);
}
/* lateral do botão (aparece quando ele está levantado) */
.wall, .cap {
  position: absolute; left: 0; right: 0; height: calc(var(--size) * .5); border-radius: 50%;
  transition: transform .09s ease-out;
}
.wall {
  bottom: calc(var(--size) * .06);
  background: linear-gradient(90deg, #8f6208, var(--sol-escuro) 25%, #d89a1c 50%, var(--sol-escuro) 75%, #8f6208);
  height: calc(var(--size) * .5 + var(--lift));
  border-radius: 50% / calc(var(--size) * .25);
}
.cap {
  bottom: calc(var(--size) * .06 + var(--lift));
  background:
    radial-gradient(45% 35% at 38% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(80% 80% at 50% 40%, var(--sol-claro), var(--sol) 55%, #e2a21f 100%);
  box-shadow: inset 0 -6px 10px rgba(150,95,0,.45), inset 0 3px 2px rgba(255,255,255,.6);
  display: grid; place-items: center;
}
.label {
  font: italic 500 clamp(22px, 7vw, 30px)/1 Fraunces, Georgia, serif; color: var(--petroleo);
  text-shadow: 0 1px 0 rgba(255,255,255,.5); transform: scaleY(.62); letter-spacing: .02em;
}
.btn.down .cap, .btn:active .cap { transform: translateY(calc(var(--lift) - 4px)); }
.btn.down .wall, .btn:active .wall { transform: scaleY(.25); transform-origin: bottom; }
.btn.busy .cap { animation: pulse 1.1s ease-in-out infinite; transform: translateY(calc(var(--lift) - 6px)); }
.btn.busy .wall { transform: scaleY(.33); transform-origin: bottom; }
.btn:disabled { cursor: progress; }
@keyframes pulse { 50% { filter: brightness(1.12) saturate(1.1); } }

.status { margin: 0; min-height: 1.5em; color: var(--areia); opacity: .85; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- resultado ---------- */
.result { background: var(--espuma); color: var(--petroleo); border-radius: 18px; padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.list { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.list li { counter-increment: n; }
.list a {
  display: grid; grid-template-columns: 22px 52px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none;
}
.list a::before { content: counter(n); font: 600 13px Figtree, sans-serif; color: var(--pedra); text-align: right; }
.list a:hover { background: var(--areia); }
.list img, .list .ph { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--areia); }
.list .t { min-width: 0; }
.list .t b, .list .t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .t b { font-weight: 600; }
.list .t span { font-size: 14px; color: var(--pedra); }
.list .d { font-size: 13px; color: var(--pedra); font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 10px 4px; }
.act {
  flex: 1 1 auto; text-align: center; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--lagoa);
  background: none; color: var(--lagoa); font: 600 15px Figtree, sans-serif; text-decoration: none; cursor: pointer;
}
.act.main { background: var(--lagoa); color: var(--espuma); }
.hint { margin: 6px 10px 0; font-size: 14px; color: var(--pedra); }
.seed { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }

.list .t .m { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; padding: 1px 7px 1px 5px; border-radius: 6px; background: var(--areia); font: 600 12px/18px Figtree, sans-serif; color: var(--lagoa); vertical-align: 2px; font-variant-numeric: tabular-nums; }
.list .t .m .flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(18,52,59,.15); }

/* ---------- título, texto e rodapé ---------- */
.brand { text-align: center; }
.brand h1 { margin: 0; font: italic 500 clamp(30px, 8vw, 44px)/1.05 Fraunces, Georgia, serif; color: var(--espuma); }
.brand h1::after { content: '.'; color: var(--sol); }
.brand p { margin: 8px 0 0; color: var(--areia); opacity: .8; font-size: 15px; }
body.done .brand { display: none; }
.about { margin-top: 56px; color: var(--areia); }
.about h2 { font: italic 500 26px/1.2 Fraunces, Georgia, serif; color: var(--espuma); margin: 0 0 12px; }
.about h3 { font: 600 17px/1.3 Figtree, sans-serif; color: var(--sol); margin: 24px 0 6px; }
.about p { margin: 0; opacity: .9; }
.about b { color: var(--espuma); }
.foot { margin-top: 48px; text-align: center; font-size: 14px; color: var(--areia); opacity: .75; }
.foot a { color: var(--sol); }
.result .seed { margin: 10px; color: var(--pedra); }

@media (prefers-reduced-motion: reduce) { .wall, .cap { transition: none; } .btn.busy .cap { animation: none; } }