:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --muted: #afbad7;
  --line: rgba(255, 255, 255, 0.14);
  --panel: rgba(12, 18, 32, 0.78);
  --panel-strong: rgba(18, 26, 44, 0.94);
  --mint: #48f1c5;
  --sky: #53b7ff;
  --gold: #ffd35f;
  --coral: #ff746f;
  --pink: #ff5bc8;
  --violet: #916bff;
  --grass: #8df77a;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 211, 95, 0.18), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(83, 183, 255, 0.2), transparent 24rem),
    linear-gradient(135deg, #07121d 0%, #111827 44%, #20123a 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 78%);
  z-index: -1;
}

a {
  color: inherit;
}

main {
  isolation: isolate;
}

.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: grid;
  align-items: center;
  padding: 52px 0 42px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.78fr);
  gap: 34px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(72, 241, 197, 0.62);
  animation: pulse-dot 1.6s ease-out infinite;
}

h1 {
  max-width: 760px;
  margin: 22px 0 18px;
  font-size: clamp(3.05rem, 8.2vw, 7.8rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.13);
}

.btn-primary {
  border: 0;
  color: #09111f;
  background: linear-gradient(135deg, var(--gold), var(--mint));
}

.btn:disabled {
  cursor: not-allowed;
  transform: none;
  color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.08);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 650px;
  margin-top: 34px;
}

.stat {
  min-height: 88px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
}

.stat strong {
  display: block;
  font-size: 1.45rem;
}

.stat span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stage {
  position: relative;
  min-height: 520px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 38%, transparent 72%);
  translate: -100% 0;
  animation: sheen 5.8s ease-in-out infinite;
}

.mascot {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 246px;
}

/* Landing hero mascot: the Big Dawgz character from the game page's variant
   picker, scaled up for the stage. Purely decorative. */
.hero-mascot {
  position: relative;
  display: grid;
  place-items: center;
  width: min(240px, 64vw);
  height: 256px;
}

/* The scale lives on the avatar and the float animation on the wrapper —
   they must stay on separate elements or the animation's transform would
   replace the scale and shrink the character back to its 54px sprite size. */
.hero-mascot .dawg-avatar {
  transform: scale(4.4);
  transform-origin: center;
}

.hero-mascot::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 64%;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), transparent 68%);
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-mascot {
    animation: floaty 4.2s ease-in-out infinite;
  }
}

.dog-token {
  position: relative;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 60%, #f2b66e 0 12%, transparent 13%),
    radial-gradient(circle at 35% 44%, #171b25 0 3%, transparent 4%),
    radial-gradient(circle at 63% 44%, #171b25 0 3%, transparent 4%),
    linear-gradient(145deg, #f2cf94, #a8653a);
  border: 7px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42), inset 0 -18px 38px rgba(82, 36, 8, 0.26);
  animation: floaty 4.2s ease-in-out infinite;
}

.dog-token::before,
.dog-token::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 74px;
  height: 118px;
  border-radius: 60% 60% 45% 45%;
  background: #7a4329;
  z-index: -1;
}

.dog-token::before {
  left: -34px;
  rotate: -28deg;
}

.dog-token::after {
  right: -34px;
  rotate: 28deg;
}

.crown {
  position: absolute;
  top: -8px;
  width: 150px;
  height: 82px;
  background: linear-gradient(135deg, #ffe86d, #ffb93e);
  clip-path: polygon(0 100%, 8% 30%, 30% 70%, 50% 0, 70% 70%, 92% 30%, 100% 100%);
  filter: drop-shadow(0 14px 26px rgba(255, 211, 95, 0.32));
}

.stage-panel {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(5, 10, 18, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mini-row span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mini-row strong {
  white-space: nowrap;
}

.section {
  padding: 76px 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.section h2 {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1;
}

.section-lede {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.game-card {
  position: relative;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 8px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.game-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.3);
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.86;
  background: var(--card-bg);
}

.game-card > * {
  position: relative;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 1.32rem;
}

.game-card h3 {
  margin: 28px 0 12px;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1;
}

.game-card p {
  max-width: 29rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.58;
}

.card-meta {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}

.meta-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

.topdogs-card {
  --card-bg:
    radial-gradient(circle at 82% 18%, rgba(255, 211, 95, 0.44), transparent 11rem),
    radial-gradient(circle at 12% 92%, rgba(72, 241, 197, 0.28), transparent 12rem),
    linear-gradient(145deg, #171a35, #6b2b62);
}

.bingo-card {
  --card-bg:
    radial-gradient(circle at 18% 20%, rgba(141, 247, 122, 0.3), transparent 10rem),
    radial-gradient(circle at 76% 84%, rgba(255, 116, 111, 0.34), transparent 12rem),
    linear-gradient(145deg, #102d28, #1f315f);
}

.arcade-card {
  --card-bg:
    radial-gradient(circle at 74% 24%, rgba(255, 91, 200, 0.34), transparent 12rem),
    radial-gradient(circle at 18% 84%, rgba(83, 183, 255, 0.32), transparent 10rem),
    linear-gradient(145deg, #1d1735, #123c47);
}

.wallet-band {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 18px;
  align-items: stretch;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(72, 241, 197, 0.14), rgba(83, 183, 255, 0.12)),
    rgba(255, 255, 255, 0.06);
}

.wallet-chip {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.26);
}

.wallet-chip i {
  color: var(--mint);
  font-size: 2rem;
}

.wallet-copy {
  display: grid;
  gap: 12px;
  align-content: center;
}

.wallet-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.road-step {
  min-height: 150px;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
}

.road-step span {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.road-step h3 {
  margin: 14px 0 8px;
}

.road-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.site-footer {
  padding: 32px 0 48px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.topdogs-page .hero {
  min-height: auto;
  padding-bottom: 20px;
}

.play-surface {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  gap: 20px;
  align-items: start;
  padding: 18px 0 76px;
}

.control-panel,
.pyramid-panel {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.control-panel {
  padding: 20px;
}

.dawgz-lineup {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.dawg-persona {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  outline-offset: 3px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.dawg-persona:hover:not(:disabled),
.dawg-persona.active {
  border-color: rgba(91, 241, 184, 0.42);
  background: linear-gradient(135deg, rgba(255, 211, 95, 0.12), rgba(91, 241, 184, 0.08));
}

.dawg-persona:hover:not(:disabled) {
  transform: translateY(-1px);
}

.dawg-persona:focus-visible {
  outline: 2px solid var(--mint);
}

.dawg-persona:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.045);
}

.dawg-copy {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.dawg-copy strong,
.dawg-copy > span,
.dawg-copy small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.dawg-copy strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.dawg-copy > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.dawg-copy small {
  margin-top: 2px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.dawg-avatar {
  display: block;
  position: relative;
  width: 54px;
  height: 58px;
  isolation: isolate;
}

.dawg-table,
.dawg-body,
.dawg-cap,
.dawg-hat,
.dawg-glasses,
.dawg-prop {
  position: absolute;
}

.dawg-table {
  left: 2px;
  right: 2px;
  bottom: 1px;
  z-index: 0;
  height: 15px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(135deg, rgba(40, 132, 93, 0.9), rgba(13, 36, 35, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dawg-body {
  left: 12px;
  bottom: 7px;
  z-index: 1;
  width: 30px;
  height: 25px;
  border-radius: 14px 14px 9px 9px;
  background: #244f3f;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18);
}

.dawg-head {
  position: absolute;
  left: 8px;
  top: 7px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 16px 16px 18px 18px;
  background: #c28a45;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18);
}

.dawg-head::before,
.dawg-head::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111827;
}

.dawg-head::before {
  left: 9px;
}

.dawg-head::after {
  right: 9px;
}

.dawg-head b {
  position: absolute;
  left: 14px;
  top: 22px;
  width: 10px;
  height: 7px;
  border-radius: 50%;
  background: #111827;
}

.dawg-ear {
  position: absolute;
  top: 3px;
  z-index: 2;
  width: 17px;
  height: 28px;
  border-radius: 12px 12px 16px 16px;
  background: #7d522f;
}

.dawg-ear.left {
  left: 2px;
  transform: rotate(-22deg);
}

.dawg-ear.right {
  right: 2px;
  transform: rotate(22deg);
}

.dawg-chain {
  position: absolute;
  left: 14px;
  bottom: 8px;
  z-index: 4;
  width: 26px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--mint));
}

.dawg-cap,
.dawg-hat,
.dawg-glasses,
.dawg-prop {
  display: none;
}

.dawg-cap,
.dawg-hat {
  z-index: 5;
}

.dawg-glasses,
.dawg-prop {
  z-index: 6;
}

.dawg-prop.left {
  left: 2px;
}

.dawg-prop.right {
  right: 3px;
}

.lil-dawg .dawg-head,
.big-dawg .dawg-head {
  border-radius: 12px 12px 18px 18px;
  box-shadow: inset 0 -9px 0 rgba(0, 0, 0, 0.24), 0 2px 0 rgba(0, 0, 0, 0.18);
}

.lil-dawg .dawg-head::before,
.lil-dawg .dawg-head::after,
.big-dawg .dawg-head::before,
.big-dawg .dawg-head::after {
  top: 14px;
  width: 8px;
  height: 4px;
  border-radius: 999px;
  background: #09111d;
}

.lil-dawg .dawg-head::before,
.big-dawg .dawg-head::before {
  left: 8px;
  transform: rotate(14deg);
}

.lil-dawg .dawg-head::after,
.big-dawg .dawg-head::after {
  right: 8px;
  transform: rotate(-14deg);
}

.lil-dawg .dawg-head b,
.big-dawg .dawg-head b {
  left: 12px;
  top: 22px;
  width: 14px;
  height: 8px;
  border-radius: 8px 8px 10px 10px;
  background: #09111d;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.16);
}

.lil-dawg .dawg-ear,
.big-dawg .dawg-ear {
  top: 0;
  width: 18px;
  height: 30px;
  border-radius: 7px 10px 17px 17px;
  background: #5f3b25;
}

.lil-dawg .dawg-ear.left,
.big-dawg .dawg-ear.left {
  transform: rotate(-28deg);
}

.lil-dawg .dawg-ear.right,
.big-dawg .dawg-ear.right {
  transform: rotate(28deg);
}

.lil-dawg .dawg-head {
  background: #a96631;
}

.lil-dawg .dawg-body {
  background: #1f5a45;
}

.lil-dawg .dawg-chain {
  left: 11px;
  bottom: 8px;
  width: 32px;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 5px, #8a5b20 5px 8px);
}

.lil-dawg .dawg-cap {
  display: block;
  left: 16px;
  top: 2px;
  width: 23px;
  height: 10px;
  border-radius: 10px 10px 4px 4px;
  background: #d34c35;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: rotate(-8deg);
}

.lil-dawg .dawg-cap::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 0;
  width: 12px;
  height: 5px;
  border-radius: 999px;
  background: var(--mint);
}

.lil-dawg .dawg-prop.left {
  display: block;
  bottom: 8px;
  width: 12px;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    to bottom,
    #ffd35f 0,
    #ffd35f 3px,
    #a96f26 3px,
    #a96f26 4px
  );
  box-shadow: 0 0 0 1px rgba(6, 13, 22, 0.38);
}

.lil-dawg .dawg-prop.right {
  display: block;
  bottom: 10px;
  width: 11px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(135deg, #d9ffe3, #1d9b66);
  border: 1px solid rgba(5, 16, 18, 0.45);
  transform: rotate(11deg);
}

.lil-dawg .dawg-prop.right::after {
  content: "";
  position: absolute;
  inset: 4px 2px;
  border-radius: 999px;
  border: 1px solid rgba(5, 16, 18, 0.35);
}

.big-dawg .dawg-head {
  background: #c19d68;
}

.big-dawg .dawg-body {
  background: #20293a;
}

.big-dawg .dawg-chain {
  left: 15px;
  bottom: 10px;
  width: 24px;
  height: 9px;
  background: transparent;
}

.big-dawg .dawg-chain::before,
.big-dawg .dawg-chain::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 11px;
  height: 8px;
  background: var(--gold);
  border-radius: 8px 2px 8px 2px;
}

.big-dawg .dawg-chain::before {
  left: 1px;
  transform: rotate(22deg);
}

.big-dawg .dawg-chain::after {
  right: 1px;
  transform: rotate(-22deg);
}

.big-dawg .dawg-head::before,
.big-dawg .dawg-head::after {
  box-shadow: 0 0 0 3px rgba(255, 211, 95, 0.5);
}

.big-dawg .dawg-hat {
  display: block;
  left: 14px;
  top: 0;
  width: 27px;
  height: 14px;
  border-radius: 5px 5px 2px 2px;
  background: #131923;
  border: 1px solid rgba(255, 211, 95, 0.42);
}

.big-dawg .dawg-hat::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -4px;
  height: 6px;
  border-radius: 999px;
  background: #131923;
  border: 1px solid rgba(255, 211, 95, 0.34);
}

.big-dawg .dawg-hat::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold);
}

.big-dawg .dawg-prop.left {
  display: block;
  bottom: 9px;
  width: 13px;
  height: 17px;
  border-radius: 2px;
  background: #fff4d8;
  border: 1px solid rgba(5, 16, 18, 0.5);
  transform: rotate(-12deg);
}

.big-dawg .dawg-prop.left::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--gold);
  transform: rotate(45deg);
}

.big-dawg .dawg-prop.right {
  display: block;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 0 22%, var(--gold) 24% 58%, #80521e 60% 100%);
  border: 1px solid rgba(5, 16, 18, 0.45);
}

.indawgnito-dawg {
  opacity: 0.82;
}

.indawgnito-dawg .dawg-head {
  background: #445065;
}

.indawgnito-dawg .dawg-body {
  background: linear-gradient(90deg, #2d2a23 0 48%, #423b2f 49% 100%);
  border-color: rgba(196, 176, 112, 0.18);
}

.indawgnito-dawg .dawg-head::before,
.indawgnito-dawg .dawg-head::after {
  width: 9px;
  height: 4px;
  border-radius: 999px;
  background: #05070d;
}

.indawgnito-dawg .dawg-chain {
  left: 18px;
  bottom: 6px;
  width: 18px;
  height: 16px;
  border-radius: 2px 2px 9px 9px;
  background: linear-gradient(180deg, #2a241f, #4b3d2c);
  border: 1px solid rgba(196, 176, 112, 0.2);
}

.indawgnito-dawg .dawg-chain::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
}

.indawgnito-dawg .dawg-hat {
  display: block;
  left: 10px;
  top: 1px;
  width: 34px;
  height: 10px;
  border-radius: 999px;
  background: #151a24;
  border: 1px solid rgba(183, 199, 255, 0.18);
}

.indawgnito-dawg .dawg-hat::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -7px;
  width: 18px;
  height: 12px;
  border-radius: 6px 6px 2px 2px;
  background: #222936;
  border: 1px solid rgba(183, 199, 255, 0.16);
}

.indawgnito-dawg .dawg-glasses {
  display: block;
  left: 15px;
  top: 21px;
  width: 24px;
  height: 7px;
}

.indawgnito-dawg .dawg-glasses::before,
.indawgnito-dawg .dawg-glasses::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 6px;
  border-radius: 999px;
  background: #05070d;
  box-shadow: inset 0 0 0 1px rgba(183, 199, 255, 0.18);
}

.indawgnito-dawg .dawg-glasses::before {
  left: 0;
}

.indawgnito-dawg .dawg-glasses::after {
  right: 0;
}

.indawgnito-dawg .dawg-prop.right {
  display: block;
  bottom: 10px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #cdd8ff;
  box-shadow: 0 0 10px rgba(137, 154, 255, 0.45);
}

.indawgnito-dawg .dawg-prop.right::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 4px;
  width: 12px;
  height: 13px;
  border-radius: 50%;
  background: #131827;
}

.indawgnito-dawg .dawg-prop.left {
  display: block;
  bottom: 10px;
  width: 12px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(135deg, #181f2b, #5d627b);
  border: 1px solid rgba(183, 199, 255, 0.18);
  transform: rotate(-9deg);
}

.timer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}

.timer-box {
  min-height: 92px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.timer-box span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.timer-box strong {
  display: block;
  margin-top: 8px;
  font-size: 1.45rem;
}

.purchase-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}

.purchase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.purchase-head span,
.purchase-checks {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.purchase-head strong {
  color: var(--gold);
  font-size: 0.92rem;
}

.purchase-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.api-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(83, 183, 255, 0.1);
  border: 1px solid rgba(83, 183, 255, 0.18);
}

.api-status-strip span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.api-status-strip strong {
  color: var(--sky);
  font-size: 0.86rem;
}

.purchase-checks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: none;
}

/* Player-facing diagnostics stay hidden; the checks still run in app.js and
   keep gating the buy button — only the display is suppressed. */
.purchase-checks[hidden],
.player-tx-console[hidden] {
  display: none;
}

.purchase-checks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.purchase-checks strong {
  color: var(--ink);
}

.purchase-checks .ready {
  color: var(--mint);
}

.purchase-checks .blocked {
  color: var(--coral);
}

.purchase-button {
  width: 100%;
}

.player-tx-console {
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.player-tx-console .tx-field span,
.player-tx-console .tx-result,
.player-tx-console .tx-hash-line {
  font-size: 0.72rem;
}

.player-tx-console .tx-field textarea {
  min-height: 72px;
}

.tx-advanced {
  display: grid;
  gap: 10px;
}

.tx-advanced summary {
  cursor: pointer;
  color: var(--sky);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tx-advanced[open] {
  padding-top: 4px;
}

.tx-hash-line {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  line-height: 1.45;
}

.tx-hash-line strong {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tx-summary {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.tx-summary div {
  display: grid;
  grid-template-columns: minmax(76px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.tx-summary span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tx-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.78rem;
}

.ticket-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 126px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.ticket-collar {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 104px;
}

.ticket-collar-band {
  position: absolute;
  top: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 112px;
  height: 36px;
  padding: 0 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 36%, rgba(0, 0, 0, 0.18)),
    #243243;
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.26), 0 10px 18px rgba(0, 0, 0, 0.18);
}

.ticket-collar-band span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4dde5;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.32);
}

.ticket-collar-band b {
  width: 18px;
  height: 20px;
  border: 3px solid var(--gold);
  border-left-width: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.ticket-asset {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 86px;
  min-height: 96px;
  padding: 19px 9px 10px;
  overflow: hidden;
  border-radius: 38px 38px 30px 30px;
  color: #07121d;
  background:
    radial-gradient(circle at 50% 12px, rgba(7, 18, 29, 0.82) 0 4px, rgba(255, 255, 255, 0.72) 5px 8px, transparent 9px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 48%),
    linear-gradient(145deg, var(--gold), #f7cf7d 48%, var(--mint));
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 -14px 24px rgba(0, 0, 0, 0.2), 0 12px 22px rgba(0, 0, 0, 0.22);
  font-weight: 1000;
  text-align: center;
}

.ticket-asset::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: -1;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  border: 5px solid #d4dde5;
  border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.28);
}

.ticket-tag-kicker,
.ticket-asset small {
  display: block;
  width: 100%;
  max-width: 100%;
  color: rgba(7, 18, 29, 0.76);
  font-size: 0.5rem;
  font-weight: 1000;
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.ticket-asset #ticketAssetNumber {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 2px 0 3px;
  font-size: 1.48rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow-wrap: anywhere;
}

.ticket-asset small {
  font-size: 0.46rem;
}

.ticket-asset-meta {
  min-width: 0;
}

.ticket-asset-meta span,
.ticket-asset-meta small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ticket-asset-meta strong {
  display: block;
  margin: 4px 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.98rem;
}

.ticket-asset-meta small {
  margin-top: 2px;
  line-height: 1.3;
  text-transform: none;
}

.pyramid-panel {
  padding: 14px 12px 22px;
  overflow: hidden;
}

.doghouse-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(126, 68, 36, 0.44), rgba(84, 46, 26, 0.16) 30%, transparent 58%),
    var(--panel);
}

/* Grass blade fringe planted along the base of the Dawgz House. */
.doghouse-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13px;
  height: 10px;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(78deg, transparent 0 5px, rgba(126, 210, 100, 0.9) 5px 7px, transparent 7px 10px),
    repeating-linear-gradient(-78deg, transparent 0 6px, rgba(94, 176, 74, 0.85) 6px 8px, transparent 8px 12px);
}

/* Ground strip with a few tiny wildflowers. */
.doghouse-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 8px 8px;
  background:
    radial-gradient(circle at 12% 26%, rgba(255, 246, 196, 0.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 37% 44%, rgba(255, 132, 176, 0.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 64% 30%, rgba(255, 246, 196, 0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 87% 46%, rgba(255, 132, 176, 0.5) 0 1.5px, transparent 2.5px),
    linear-gradient(180deg, rgba(101, 182, 80, 0.95), #33622a);
}

.doghouse-roof {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: end center;
  width: min(420px, 86%);
  height: 70px;
  margin: 0 auto -3px;
  padding-bottom: 12px;
  color: #1b100c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(46, 18, 10, 0.3) 11px 13px, rgba(255, 214, 160, 0.1) 13px 14px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 20px),
    linear-gradient(135deg, #9a4a2c, #e28a4b 58%, #7a352a);
  border: 1px solid rgba(255, 205, 148, 0.22);
}

.doghouse-roof span {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 112px;
  padding: 4px 12px 5px;
  border: 1px solid rgba(65, 34, 13, 0.35);
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 35%, rgba(255, 255, 255, 0.72) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 65%, rgba(255, 255, 255, 0.68) 0 2px, transparent 3px),
    linear-gradient(135deg, #ffd35f 0%, #fff1ad 44%, #5bf1b8 100%);
  box-shadow:
    0 3px 0 rgba(67, 31, 12, 0.28),
    inset 0 -2px 0 rgba(255, 255, 255, 0.26);
  color: #241006;
  font-size: 0.74rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(-2deg);
}

.doghouse-roof span::before,
.doghouse-roof span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7a3f24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transform: translateY(-50%);
}

.doghouse-roof span::before {
  left: 6px;
}

.doghouse-roof span::after {
  right: 6px;
}

.doghouse-wall-art {
  position: absolute;
  inset: 92px 22px 26px;
  z-index: 2;
  pointer-events: none;
}

.wall-art {
  position: absolute;
  display: block;
  filter: drop-shadow(0 4px 0 rgba(10, 6, 4, 0.22));
  opacity: 0.96;
}

/* Ambient fireflies drifting over the wall — three dots per pseudo-element. */
.doghouse-wall-art::before,
.doghouse-wall-art::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe9a0;
  box-shadow:
    0 0 4px 1px rgba(255, 233, 160, 0.55),
    34px 18px 0 -1px rgba(255, 233, 160, 0.8),
    -26px 44px 0 -1px rgba(255, 233, 160, 0.7);
  opacity: 0.35;
}

.doghouse-wall-art::before {
  left: 16%;
  top: 24%;
}

.doghouse-wall-art::after {
  right: 15%;
  top: 52%;
}

@media (prefers-reduced-motion: no-preference) {
  .doghouse-wall-art::before {
    animation: firefly-drift 9s ease-in-out infinite;
  }

  .doghouse-wall-art::after {
    animation: firefly-drift 11s ease-in-out -4s infinite reverse;
  }
}

@keyframes firefly-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.12; }
  30% { transform: translate(6px, -9px); opacity: 0.75; }
  55% { transform: translate(-4px, -15px); opacity: 0.3; }
  80% { transform: translate(5px, -5px); opacity: 0.65; }
}

.wall-art-bone {
  top: 6%;
  left: 4%;
  width: 66px;
  height: 26px;
  background:
    radial-gradient(circle at 10px 8px, #f8eccb 0 7px, transparent 8px),
    radial-gradient(circle at 11px 18px, #f8eccb 0 7px, transparent 8px),
    radial-gradient(circle at 55px 8px, #f8eccb 0 7px, transparent 8px),
    radial-gradient(circle at 54px 18px, #f8eccb 0 7px, transparent 8px),
    linear-gradient(#f8eccb, #f8eccb) center / 44px 10px no-repeat;
  transform: rotate(-13deg);
}

.wall-art-cat {
  top: 6%;
  right: 5%;
  width: 62px;
  height: 58px;
  transform: rotate(8deg);
}

.cat-plaque {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 52px;
  height: 42px;
  border: 2px solid rgba(255, 211, 95, 0.34);
  border-radius: 18px 18px 22px 22px;
  background: linear-gradient(180deg, #744426, #3e241b);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.08);
}

.cat-head {
  position: absolute;
  left: 13px;
  top: 12px;
  width: 36px;
  height: 31px;
  border: 2px solid #24130d;
  border-radius: 14px 14px 17px 17px;
  background: linear-gradient(180deg, #b99063, #7b533f);
}

.cat-ear {
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  border: 2px solid #24130d;
  background: #9b6b4e;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cat-ear.left {
  left: -1px;
  transform: rotate(-18deg);
}

.cat-ear.right {
  right: -1px;
  transform: rotate(18deg);
}

.cat-face {
  position: absolute;
  left: 8px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0b111d;
  box-shadow: 15px 0 0 #0b111d, 8px 9px 0 -1px #2b130d;
}

.cat-face::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 13px;
  width: 16px;
  height: 1px;
  border-radius: 999px;
  background: #2b130d;
  box-shadow: 0 -3px 0 rgba(255, 255, 255, 0.18);
}

.wall-art-collar {
  top: 35%;
  left: 2.5%;
  width: 58px;
  height: 42px;
  transform: rotate(10deg);
}

.collar-band {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 48px;
  height: 25px;
  border: 6px solid #2fd2a0;
  border-top-color: #ffe17a;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.collar-tag {
  position: absolute;
  left: 22px;
  top: 26px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(36, 16, 6, 0.6);
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(135deg, #ffd35f, #fff1ad);
}

.wall-art-paw {
  right: 3%;
  top: 34%;
  width: 54px;
  height: 50px;
  border: 2px solid rgba(255, 211, 95, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  transform: rotate(-8deg);
}

.paw-pad,
.paw-toe {
  position: absolute;
  border-radius: 50%;
  background: #5bf1b8;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.paw-pad {
  left: 17px;
  top: 23px;
  width: 20px;
  height: 16px;
}

.paw-toe {
  top: 11px;
  width: 10px;
  height: 11px;
}

.paw-toe.one {
  left: 11px;
}

.paw-toe.two {
  left: 22px;
  top: 7px;
}

.paw-toe.three {
  left: 33px;
}

.wall-art-ball {
  right: 5%;
  top: 58%;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(36, 16, 6, 0.48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.58) 0 4px, transparent 5px),
    linear-gradient(135deg, #a5f04d, #49b938);
  transform: rotate(18deg);
}

.wall-art-ball::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 20px;
  height: 10px;
  border-top: 3px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  transform: rotate(-28deg);
}

.pyramid {
  --door-gap: 4px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--door-gap);
  width: 100%;
  margin: 0 auto;
  padding: 12px 8px 14px;
  border: 1px solid rgba(255, 224, 170, 0.14);
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(24, 12, 6, 0.2) 26px 27px),
    repeating-linear-gradient(90deg, rgba(255, 224, 170, 0.05) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(138, 82, 44, 0.55), rgba(54, 32, 21, 0.78));
}

.pyramid-row {
  display: flex;
  justify-content: center;
  gap: var(--door-gap);
}

.block {
  position: relative;
  display: grid;
  place-items: start center;
  /* Bottom row = 22 doors + 21 gaps; size doors from the card itself so the
     board fills its panel at every width (and the widest row never overflows,
     which used to push the whole grid right of center). */
  width: min(calc((100% - 21 * var(--door-gap)) / 22), 34px);
  aspect-ratio: 0.78;
  padding-top: 4px;
  border-radius: 7px 7px 2px 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 40%),
    #6b4226;
  border: 1px solid rgba(255, 220, 170, 0.26);
  transition: transform 0.18s ease, background 0.18s ease;
  overflow: hidden;
}

.block::after {
  content: "";
  position: absolute;
  right: 7%;
  top: 54%;
  width: clamp(3px, 18%, 6px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 211, 95, 0.9);
  box-shadow: 0 0 0 1px rgba(111, 70, 31, 0.36);
}

/* Sold doors read lived-in: a warm lit window with a mullion line. */
.block.sold::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 52%;
  aspect-ratio: 0.82;
  transform: translateX(-50%);
  border-radius: 45% 45% 10% 10%;
  background:
    linear-gradient(rgba(122, 60, 26, 0.6), rgba(122, 60, 26, 0.6)) center 55% / 100% 1px no-repeat,
    radial-gradient(circle at 50% 36%, #fff3c4 0 35%, #ffcf6e 68%, #d98f3a 100%);
  box-shadow:
    0 0 6px rgba(255, 205, 110, 0.55),
    inset 0 0 0 1px rgba(94, 44, 18, 0.55);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .block:hover {
    animation: door-wiggle 0.5s ease;
  }
}

@keyframes door-wiggle {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-2px) rotate(-2.4deg); }
  60% { transform: translateY(-1px) rotate(1.8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.block-number {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 100%;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.52rem;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%) scaleX(0.84);
  transform-origin: center;
  pointer-events: none;
}

.block.sold {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(135deg, var(--gold), var(--coral));
}

.block.sold .block-number {
  color: #111827;
}

.block.revealed {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(135deg, var(--mint), var(--sky));
  transform: translateY(-1px);
}

.block.revealed .block-number {
  color: #07121d;
}

.block.revealed.available {
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(135deg, #f8fafc, var(--mint));
  border-color: rgba(94, 234, 212, 0.85);
}

.block.revealed.sold {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(135deg, var(--gold), var(--coral));
}

.block.revealed.selected {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* ~90s slot holds — visual-only; the chain stays authoritative. */
.block.revealed.available.held {
  cursor: not-allowed;
  opacity: 0.62;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(135deg, var(--violet), var(--sky));
  border-color: rgba(145, 107, 255, 0.85);
}

.block.revealed.available.held-mine {
  outline: 2px dashed var(--mint);
  outline-offset: 1px;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rule {
  min-height: 160px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
}

.admin-main {
  padding: 34px 0 72px;
}

.admin-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: 18px;
  align-items: end;
  padding-bottom: 20px;
}

.admin-page h1 {
  margin: 18px 0 12px;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
}

.admin-mode-strip,
.admin-panel,
.admin-locked,
.admin-warning {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.admin-mode-strip {
  display: grid;
  gap: 8px;
  min-height: 112px;
  align-content: center;
  padding: 18px;
}

.admin-mode-strip span,
.admin-panel-head span,
.admin-toolbar span,
.command-row span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-mode-strip strong,
.admin-panel-head strong {
  color: var(--gold);
}

.admin-grid,
.admin-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-panel {
  min-width: 0;
  padding: 16px;
}

.admin-panel-head,
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-access h2 {
  margin: 18px 0 8px;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.admin-access p,
.admin-panel p,
.admin-warning p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.admin-kv {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.admin-kv div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-kv dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-kv dd,
.admin-address,
.command-row code {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-address {
  margin: 14px 0;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
}

.admin-copy {
  min-height: 42px;
}

.admin-copy.copied {
  border-color: rgba(72, 241, 197, 0.82);
}

.admin-access[data-access-state="admin"] #adminAccessPill {
  color: var(--mint);
}

.admin-access[data-access-state="non-admin"] #adminAccessPill {
  color: var(--coral);
}

.admin-access[data-access-state="disconnected"] #adminAccessPill {
  color: var(--gold);
}

.admin-locked,
.admin-warning {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 16px;
}

.admin-locked[hidden],
.admin-operator[hidden] {
  display: none;
}

.admin-locked i,
.admin-warning i {
  color: var(--gold);
  font-size: 1.2rem;
  margin-top: 2px;
}

.admin-locked strong {
  display: block;
  margin-bottom: 4px;
}

.admin-operator {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.admin-toolbar {
  min-height: 66px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
}

.admin-toolbar strong {
  display: block;
  margin-top: 4px;
}

.admin-table-panel {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  margin-top: 14px;
}

.admin-table th,
.admin-table td {
  padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  white-space: nowrap;
}

.admin-table th {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.sweep-panel {
  display: grid;
  gap: 14px;
}

.command-grid {
  display: grid;
  gap: 10px;
}

.command-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.command-row code {
  display: block;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.45;
}

.tx-console {
  display: grid;
  gap: 14px;
}

.admin-tx-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

.tx-console #adminTxConsoleStatus {
  color: var(--ink);
  font: 0.84rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

.tx-status-copy {
  min-height: 38px;
  white-space: nowrap;
}

.tx-console-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
  gap: 12px;
}

.tx-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.tx-field span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tx-field select,
.tx-field input,
.tx-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: 0.84rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tx-field select,
.tx-field input {
  min-height: 42px;
  padding: 0 10px;
}

.tx-field textarea {
  resize: vertical;
  padding: 10px;
  overflow-wrap: anywhere;
}

.tx-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tx-button-row .btn {
  min-height: 42px;
}

.tx-result {
  margin-top: 0;
}

#adminRefundManifestRows,
#adminRefundFunding,
#adminTxHash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

@keyframes pulse-dot {
  70% { box-shadow: 0 0 0 12px rgba(72, 241, 197, 0); }
  100% { box-shadow: 0 0 0 0 rgba(72, 241, 197, 0); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes sheen {
  0%, 35% { translate: -100% 0; }
  60%, 100% { translate: 100% 0; }
}

/* ── My Dawg Tags ─────────────────────────────────────────────────────────── */
.my-tags-status,
.site-table-status {
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--muted);
}

.my-tags-rounds {
  display: grid;
  gap: 16px;
}

.my-tags-round {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.my-tags-round-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.my-tags-round-head span {
  color: var(--muted);
  font-size: 0.85rem;
}

.my-tags-round-head a {
  color: var(--sky);
  font-size: 0.85rem;
}

.my-tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.tag-card {
  margin: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
}

.tag-card .tag-art {
  width: 100%;
  max-width: 168px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f7eadb;
}

.tag-card.revealed .tag-art {
  border-color: rgba(72, 241, 197, 0.75);
}

.tag-card figcaption {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* ── Public tables (Past Rounds / Leaderboard) ───────────────────────────── */
.site-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 4px 14px 12px;
}

.site-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.site-table th,
.site-table td {
  padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.site-table thead th {
  border-top: none;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.site-table a {
  color: var(--sky);
  margin-right: 8px;
}

/* ── Admin keeper panel ──────────────────────────────────────────────────── */
.keeper-panel {
  display: grid;
  gap: 14px;
}

.keeper-status-grid {
  margin-top: 0;
}

.keeper-alert {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 2px solid var(--coral);
  background: rgba(255, 116, 111, 0.16);
  box-shadow: 0 0 0 4px rgba(255, 116, 111, 0.12);
}

.keeper-alert i {
  color: var(--coral);
  font-size: 1.3rem;
  margin-top: 2px;
}

.keeper-alert strong {
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.keeper-alert p {
  margin: 6px 0 0;
  color: var(--ink);
}

.keeper-row-flagged td {
  color: var(--coral);
  font-weight: 700;
}

.keeper-history-list {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  max-height: 260px;
  overflow-y: auto;
  color: var(--muted);
  font-size: 0.8rem;
  display: grid;
  gap: 4px;
}

@media (max-width: 980px) {
  .hero-grid,
  .play-surface,
  .wallet-band,
  .admin-header,
  .admin-grid,
  .admin-status-grid {
    grid-template-columns: 1fr;
  }

  .command-row {
    grid-template-columns: 1fr;
  }

  .tx-console-grid {
    grid-template-columns: 1fr;
  }

  .stage {
    min-height: auto;
  }

  .game-grid,
  .roadmap,
  .rules-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    display: grid;
  }
}

@media (max-width: 620px) {
  .shell {
    width: min(100% - 22px, 1180px);
  }

  .hero {
    padding-top: 32px;
  }

  h1 {
    font-size: clamp(3rem, 18vw, 5rem);
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .timer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .timer-box {
    min-height: 78px;
    padding: 11px;
  }

  .timer-box strong {
    font-size: 1.08rem;
  }

  .game-card {
    min-height: 360px;
  }

  .footer-row {
    display: grid;
  }

  .admin-toolbar,
  .admin-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-toolbar .btn,
  .admin-copy {
    width: 100%;
  }

  .admin-operator > .tx-console {
    order: 1;
  }

  .admin-operator > .admin-toolbar {
    order: 2;
  }

  .admin-operator > .admin-status-grid {
    order: 3;
  }

  .admin-operator > .admin-warning {
    order: 4;
  }

  .admin-tx-status {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .tx-console #adminTxConsoleStatus {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .tx-button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tx-button-row .btn,
  .tx-status-copy {
    width: 100%;
  }

  .ticket-card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    min-height: 108px;
    padding: 8px;
  }

  .ticket-collar {
    min-height: 88px;
  }

  .ticket-collar-band {
    top: 9px;
    width: 82px;
    height: 28px;
    padding: 0 8px;
  }

  .ticket-collar-band span {
    width: 5px;
    height: 5px;
  }

  .ticket-collar-band b {
    width: 13px;
    height: 15px;
    border-width: 2px;
    border-left-width: 4px;
  }

  .ticket-asset {
    width: 68px;
    min-height: 80px;
    padding: 16px 6px 8px;
    border-radius: 30px 30px 24px 24px;
  }

  .ticket-asset::before {
    top: -10px;
    width: 21px;
    height: 21px;
    border-width: 4px;
  }

  .ticket-tag-kicker,
  .ticket-asset small {
    font-size: 0.4rem;
    line-height: 0.95;
  }

  .ticket-asset #ticketAssetNumber {
    font-size: 1.08rem;
  }

  .pyramid-panel {
    padding: 8px 8px 18px;
  }

  .pyramid {
    --door-gap: 2px;
    padding: 8px 6px 10px;
  }

  .doghouse-panel::before {
    bottom: 10px;
    height: 8px;
  }

  .doghouse-panel::after {
    height: 14px;
  }

  .doghouse-roof {
    height: 48px;
    padding-bottom: 8px;
  }

  .doghouse-roof span {
    min-width: 94px;
    padding: 3px 9px 4px;
    font-size: 0.58rem;
  }

  .doghouse-wall-art {
    inset: 58px 12px 14px;
  }

  .wall-art-bone {
    width: 42px;
    height: 18px;
    left: 5%;
    top: 5%;
    background:
      radial-gradient(circle at 7px 6px, #f8eccb 0 5px, transparent 6px),
      radial-gradient(circle at 7px 12px, #f8eccb 0 5px, transparent 6px),
      radial-gradient(circle at 35px 6px, #f8eccb 0 5px, transparent 6px),
      radial-gradient(circle at 35px 12px, #f8eccb 0 5px, transparent 6px),
      linear-gradient(#f8eccb, #f8eccb) center / 28px 7px no-repeat;
  }

  .wall-art-cat {
    right: 4%;
    top: 4%;
    transform: scale(0.72) rotate(8deg);
    transform-origin: top right;
  }

  .wall-art-collar {
    left: 1%;
    top: 16%;
    transform: scale(0.62) rotate(10deg);
    transform-origin: top left;
  }

  .wall-art-paw {
    right: 1%;
    top: 15%;
    transform: scale(0.6) rotate(-8deg);
    transform-origin: top right;
  }

  .wall-art-ball {
    right: 2.5%;
    top: 34%;
    transform: scale(0.68) rotate(18deg);
    transform-origin: top right;
  }

  .block-number {
    top: 2px;
    font-size: 0.34rem;
  }

  .admin-table {
    min-width: 0;
    table-layout: fixed;
    font-size: 0.78rem;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px 5px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ── Round-transition settling modal (DECISIONS.md §1, Ian 2026-07-10) ─────
   Shown while the finished board stays on screen and the keeper builds the
   next round's board. Backdrop stays translucent so the board remains
   visible; the card is closable and reopenable via the floating chip. */
.settling-modal[hidden],
.settling-chip[hidden] {
  display: none;
}

.settling-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 20, 0.55);
  backdrop-filter: blur(2px);
}

.settling-card {
  max-width: 420px;
  width: 100%;
  text-align: center;
  padding: 28px 26px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.settling-card h3 {
  margin: 10px 0 8px;
  font-size: 1.3rem;
  color: var(--gold);
}

.settling-card p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.settling-art {
  font-size: 2rem;
  animation: settling-bounce 1.6s ease-in-out infinite;
}

@keyframes settling-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.settling-dismiss {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 22px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.settling-dismiss:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.settling-chip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 59;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--panel-strong);
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}

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

/* Step 3a results reveal inside the settling modal */
.settling-results-round {
  color: var(--muted);
  margin: 0 0 12px;
}

.settling-results-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 6px;
}

.settling-result {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

.settling-result.won {
  color: var(--ink);
  border-color: rgba(255, 211, 95, 0.45);
}

.settling-result.mine {
  background: rgba(255, 211, 95, 0.12);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

.settling-results-links {
  margin: 0 0 10px;
}

.settling-results-links a {
  color: var(--sky);
  text-decoration: none;
}

.settling-results-links a:hover {
  text-decoration: underline;
}

.settling-results-next {
  color: var(--muted);
  margin: 0 0 16px;
  font-size: 0.9rem;
}

/* Step 3b past-round results detail */
.past-round-results-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  background: transparent;
  color: var(--sky);
  cursor: pointer;
  font-size: 0.85rem;
}

.past-round-results-toggle:hover {
  border-color: var(--sky);
}

.past-round-detail td {
  padding: 12px 14px 16px;
  background: rgba(12, 18, 32, 0.5);
}

.past-round-results-list {
  margin: 0;
}

.past-round-detail-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Step 4d admin wallets card */
.admin-wallets {
  /* The card lists five full addresses — give it the whole shell width
     instead of one column of the admin grid (Ian: "cards too shifted left"). */
  grid-column: 1 / -1;
}

.admin-wallets .admin-wallet-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr auto;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.admin-wallets .admin-wallet-row:last-child {
  border-bottom: none;
}

.admin-wallet-copy small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}

.admin-wallets .admin-address {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .admin-wallets .admin-wallet-row {
    grid-template-columns: 1fr;
  }
}