@layer components {
  .site {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
  }

  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  .brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    text-decoration: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  /* logo-mark.svg carries its own block shadow (5% of the box), so 1.68em keeps the mark at 1.6em. */
  .brand__mark { display: block; width: 1.68em; height: 1.68em; }

  .header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-wrap: wrap;
  }

  .clock {
    font-family: var(--font-display);
    font-weight: 600;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    padding: 0.2em 0.8em;
    box-shadow: var(--shadow-block-sm);
    white-space: nowrap;
  }
  .clock--ended { background: var(--paper-shade); color: var(--ink-soft); }

  .one-liner {
    flex-basis: 100%;
    font-weight: 700;
    color: var(--ink-soft);
    max-width: none;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-0);
    line-height: 1;
    padding: 0.7em 1.2em;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-block);
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease-glide), box-shadow var(--t-fast) var(--ease-glide);
    white-space: nowrap;
  }
  .button:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
  .button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
  .button--primary { background: var(--brick); color: var(--paper); }
  .button--primary:hover { color: var(--paper); }
  .button--sun { background: var(--sun); }
  .button[aria-pressed="true"] { background: var(--sun); }
  .button--lawn { background: var(--lawn); color: var(--paper); }
  .button--lawn:hover { color: var(--paper); }
  .button--quiet { box-shadow: none; border-color: transparent; background: transparent; }
  .button--quiet:hover { box-shadow: none; background: var(--paper); border-color: var(--ink); transform: none; }
  .button--small { font-size: var(--step--1); padding: 0.5em 0.9em; }
  .button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-block-sm); }

  .block {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-block);
    padding: var(--space-5);
  }

  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: var(--space-4); }
  .prose h2 { margin-top: var(--space-6); }
  .prose ul { padding-left: 1.2em; }

  .page {
    padding: var(--space-4);
    display: grid;
    gap: var(--space-5);
    width: min(100%, 72rem);
    margin-inline: auto;
  }

  .price {
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step--1);
    padding: 0.2em 0.7em;
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink);
    background: var(--district, var(--paper));
  }

  .site-footer {
    padding: var(--space-5) var(--space-4);
    color: var(--ink-soft);
    font-size: var(--step--1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
  }

  .flash {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--sun);
    box-shadow: var(--shadow-block-sm);
  }
  .flash--alert { background: #ffd9d4; }
}

@layer components {
  .panel { display: grid; gap: var(--space-4); align-content: start; }
  .input {
    width: 100%;
    padding: 0.7em 1em;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    font-family: var(--font-display);
    font-size: var(--step-1);
    box-shadow: inset 3px 3px 0 rgb(30 42 68 / 0.08);
  }
  .queue-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-1);
    counter-reset: queue;
    font-weight: 700;
  }
  .queue-list li { display: flex; gap: var(--space-2); align-items: baseline; }
  .queue-list li::before {
    counter-increment: queue;
    content: counter(queue);
    font-family: var(--font-display);
    color: var(--ink-faint);
    min-width: 1.5em;
  }
  .queue-list li:first-child::before { content: "🎲"; }
  .queue-position { display: flex; align-items: baseline; gap: var(--space-2); }
  .queue-position__number { font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 1; }
}

@layer components {
  /* Countdown rings: --progress runs 1 to 0, driven by the countdown controller. */
  .ring {
    --progress: 1;
    --size: 2.2em;
    display: inline-grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--brick) calc(var(--progress) * 360deg), var(--paper-shade) 0);
    vertical-align: middle;
    margin-left: 0.4em;
  }
  .ring__face {
    display: grid;
    place-items: center;
    width: calc(var(--size) - 8px);
    height: calc(var(--size) - 8px);
    border-radius: 50%;
    background: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .ring--inline { --size: 1.8em; margin: 0 0.2em; font-size: var(--step--1); }
  .ring--large { --size: 9rem; margin: 0; background: conic-gradient(var(--lawn) calc(var(--progress) * 360deg), var(--paper-shade) 0); }
  .ring--large .ring__face { width: calc(var(--size) - 14px); height: calc(var(--size) - 14px); border: 3px solid var(--ink); box-shadow: var(--shadow-block); }

  .roll-button {
    display: block;
    margin: 0 auto;
    transition: transform var(--t-fast) var(--ease-pop);
  }
  .roll-button:hover { transform: scale(1.04); }
  .roll-button:active { transform: scale(0.96); }
  .roll-button[disabled] { opacity: 0.6; transform: none; }
  .roll-button__label { font-size: var(--step-3); line-height: 1; }
  .roll-button__count { font-size: var(--step-0); color: var(--ink-soft); }

  .turn {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    max-width: calc(100% - 2 * var(--space-3));
  }
  .turn__who { font-size: var(--step-1); }

  .dice { display: inline-flex; gap: var(--space-2); }
  .die {
    --pip: var(--ink);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.5rem;
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: var(--shadow-block-sm);
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    padding: 0.3rem;
    transition: transform var(--t-fast);
  }
  .die.is-rolling { transform: rotate(12deg) scale(1.08); }
  .die::before, .die::after, .die span { content: ""; }
  .die[data-value="0"] { opacity: 0.45; }
  .die {
    background-image:
      radial-gradient(circle, var(--pip) 0 0.22rem, transparent 0.24rem),
      radial-gradient(circle, var(--pip) 0 0.22rem, transparent 0.24rem),
      radial-gradient(circle, var(--pip) 0 0.22rem, transparent 0.24rem),
      radial-gradient(circle, var(--pip) 0 0.22rem, transparent 0.24rem),
      radial-gradient(circle, var(--pip) 0 0.22rem, transparent 0.24rem),
      radial-gradient(circle, var(--pip) 0 0.22rem, transparent 0.24rem);
    background-repeat: no-repeat;
    background-size: 0.7rem 0.7rem;
  }
  .die[data-value="0"] { background-image: none; }
  .die[data-value="1"] { background-position: 50% 50%, -9rem 0, -9rem 0, -9rem 0, -9rem 0, -9rem 0; }
  .die[data-value="2"] { background-position: 18% 18%, 82% 82%, -9rem 0, -9rem 0, -9rem 0, -9rem 0; }
  .die[data-value="3"] { background-position: 18% 18%, 50% 50%, 82% 82%, -9rem 0, -9rem 0, -9rem 0; }
  .die[data-value="4"] { background-position: 18% 18%, 82% 18%, 18% 82%, 82% 82%, -9rem 0, -9rem 0; }
  .die[data-value="5"] { background-position: 18% 18%, 82% 18%, 50% 50%, 18% 82%, 82% 82%, -9rem 0; }
  .die[data-value="6"] { background-position: 18% 18%, 82% 18%, 18% 50%, 82% 50%, 18% 82%, 82% 82%; }

  .feed { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--step--1); max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-2); }
  .feed__item { padding-left: 1em; text-indent: -1em; }
  .feed__item::before { content: "•"; color: var(--brick); margin-right: 0.5em; }
  .feed__item--jailed::before { content: "🚧"; }
  .feed__item--card::before { content: "🃏"; }

  .jail-list { display: grid; gap: var(--space-1); }
  .jail-list li { display: flex; justify-content: space-between; font-weight: 700; }

  .overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgb(30 42 68 / 0.45);
    z-index: 50;
    animation: overlay-in var(--t-ui) var(--ease-glide);
  }
  @keyframes overlay-in { from { opacity: 0; } }
  .overlay__card {
    width: min(100%, 26rem);
    text-align: center;
    animation: card-in 500ms var(--ease-pop);
  }
  @keyframes card-in { from { transform: translateY(30px) rotate(-4deg) scale(0.9); opacity: 0; } }
  .card {
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 8px 8px 0 var(--ink);
    padding: var(--space-6) var(--space-5);
    display: grid;
    gap: var(--space-3);
  }
  .card--a { background: linear-gradient(180deg, #e3f4ff, var(--paper) 40%); }
  .card--b { background: linear-gradient(180deg, #fff3c4, var(--paper) 40%); }
  .card--jail { background: repeating-linear-gradient(-45deg, var(--sun) 0 14px, var(--paper) 14px 28px) top / 100% 24px no-repeat, var(--paper); }
  .card--rent { background: linear-gradient(180deg, #ffd9d4, var(--paper) 40%); }
  .card__deck { font-family: var(--font-display); color: var(--ink-soft); }
  .card__title { font-size: var(--step-4); }
  .card__body { font-size: var(--step-1); margin-inline: auto; }
  .card__who { color: var(--ink-soft); font-size: var(--step--1); }
  .card--sponsor { justify-items: center; }
  .card__image { width: min(100%, 11rem); aspect-ratio: 3 / 4; object-fit: cover; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-block-sm); }
}

@layer components {
  .page--narrow { width: min(100%, 34rem); }
  .page--flash {
    width: min(100%, 34rem);
    padding-bottom: 0;
    transition: opacity var(--t-camera) var(--ease-glide), translate var(--t-camera) var(--ease-glide);
  }
  .page--flash.is-leaving { opacity: 0; translate: 0 -0.5rem; pointer-events: none; }
  .form .field { display: grid; gap: var(--space-1); }
  .form label { font-family: var(--font-display); font-weight: 600; }
  .check { display: flex; align-items: center; gap: var(--space-2); }
  /* Turnstile only shows when Cloudflare needs a click, and folds away once it has it. */
  .turnstile:empty, .turnstile[data-state="passed"] { display: none; }
  .or { text-align: center; }
  .button--x, .button--github { background: var(--ink); color: var(--paper); width: 100%; }
  .button--x:hover, .button--github:hover { color: var(--paper); }
  .button--github { background: #24292f; }
  .who { font-weight: 700; }
}

@layer components {
  .tiers { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
  .tier { display: grid; gap: var(--space-1); max-width: 100%; }
  .tier img, .tier canvas {
    width: calc(var(--w) / 2);
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-block-sm);
    background: var(--paper-shade);
  }
  .tier figcaption { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-soft); }

  .ad-list { display: grid; gap: var(--space-4); }
  .ad { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); align-items: start; }
  .ad__image img { border: 2px solid var(--ink); border-radius: var(--radius-sm); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
  .ad__image:empty { aspect-ratio: 3 / 2; background: var(--paper-shade); border-radius: var(--radius-sm); }
  .tag--approved, .tag--ok { background: var(--lawn); color: var(--paper); }
  .tag--rejected, .tag--removed { background: #ffd9d4; }
  .tag--manual_verification { background: var(--sun); }
  .tag--primary { background: var(--ink); color: var(--paper); }
  @media (max-width: 40rem) { .ad { grid-template-columns: 1fr; } }
}

@layer components {
  .buy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-2); }
  .buy { flex-direction: column; gap: 0.15em; padding: 0.6em 0.8em; }
  .buy .price { font-size: var(--step-1); }
  .input--select { width: auto; font-size: var(--step-0); }
  .tag--landmark { background: var(--sun); }
  .tag--contract { background: var(--pool); color: var(--paper); }
  .property__image { border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-block); max-width: 36rem; }
  .property__billboard .cluster { gap: var(--space-3); margin-top: var(--space-3); }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); }
  .stats dt { font-size: var(--step--1); color: var(--ink-soft); }
  .stats dd { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); }
  .history { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
  .history th, .history td { text-align: left; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--paper-shade); }
  .block--cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
}

@layer components {
  .overlay--rent .overlay__card { width: min(100%, 40rem); }
  .rent__image img { width: 100%; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-block); }
  .card--rent-paid { background: linear-gradient(180deg, #e3f4ff, var(--paper) 30%); }
  .cluster--center { justify-content: center; }
}

@layer components {
  .placements { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .placement--center_logo { background: linear-gradient(180deg, #fff3c4, var(--paper) 40%); }
  .price--big { font-size: var(--step-4); }
  .tag--sold, .tag--live { background: var(--ink); color: var(--paper); }
  .tag--pending { background: var(--sun); }
}

@layer components {
  .admin .site-header { border-bottom: 2px solid var(--ink); background: var(--paper); }
  .admin-nav { gap: var(--space-1); }
  .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-3); }
  .settings-grid .input { font-size: var(--step-0); }
  .stats.block { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

@layer components {
  .standings { padding-left: 1.4em; display: grid; gap: var(--space-1); }
}