/* GTA world: sunset touches, and cheat cards that fit long button sequences.
   Colours come from world.json tokens. */
.xw--gta .xw-bar { box-shadow: 0 4px 0 color-mix(in srgb, var(--w-warm) 70%, transparent); }
.xw--gta .xw-card__art--pattern { display: none; }
.xw--gta .xw-record__details div { display: block; }
.xw--gta .xw-record__details dt { margin-top: 6px; }
.xw--gta .xw-record__details dd { margin: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }

/* Countdown strip, tools and big imagery. */
.gta-clocks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-block: 8px 32px; padding: 20px 24px; background: linear-gradient(100deg, var(--w-panel), var(--w-panel2)); border: 1px solid var(--w-line); border-radius: var(--w-radius); }
.gta-clocks--page { justify-content: space-around; margin: 0; }
.gta-clock .xw-kicker { margin: 0 0 8px; }
.gta-clock__digits { display: flex; gap: 8px; }
.gta-clock__digits span { display: grid; justify-items: center; min-width: 62px; padding: 8px 6px; font-size: .7rem; color: var(--w-muted); background: var(--w-bg2); border-radius: var(--w-radius); }
.gta-clock__digits b { font-size: 1.7rem; line-height: 1.1; color: var(--w-accent); font-variant-numeric: tabular-nums; }
.gta-clock__done { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--w-accent); }
.gta-tool-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; margin-block: 8px 28px; }
.gta-tool__art { margin: 0; }
.gta-tool__art img { width: 100%; height: auto; border-radius: var(--w-radius); border: 1px solid var(--w-line); }
.gta-tool { display: grid; gap: 16px; padding: 20px; background: var(--w-panel); border: 1px solid var(--w-line); border-radius: var(--w-radius); }
.gta-tool label { display: flex; gap: 10px; align-items: center; color: var(--w-text); }
.gta-tool form label, form.gta-tool > label { display: grid; gap: 6px; font-weight: 700; }
.gta-tool input[type="number"] { width: 100%; padding: 12px; font: inherit; color: var(--w-text); background: var(--w-bg2); border: 1px solid var(--w-line); border-radius: var(--w-radius); }
.gta-tool fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.gta-tool legend { margin-bottom: 8px; font-weight: 800; }
.gta-tool input[type="radio"], .gta-tool input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--w-accent); }
.gta-meter { height: 12px; overflow: hidden; background: var(--w-bg2); border-radius: 999px; }
.gta-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--w-warm), var(--w-accent)); transition: width .2s; }
.gta-result { display: grid; gap: 4px; margin: 0; padding: 14px; background: var(--w-bg2); border-left: 4px solid var(--w-accent); border-radius: var(--w-radius); }
.gta-result[hidden] { display: none; }
.gta-result strong { font-size: 1.25rem; }
.xw--gta .xw-hero__art img { box-shadow: 10px 10px 0 color-mix(in srgb, var(--w-warm) 35%, transparent); }
.xw--gta .xw-card { transition: transform .15s; }
.xw--gta .xw-card:hover { transform: translateY(-3px); }
@media (max-width: 760px) {
  .gta-tool-wrap { grid-template-columns: 1fr; }
  .gta-clocks { padding: 16px; }
  .gta-clock { width: 100%; }
  .gta-clock__digits span { flex: 1; min-width: 0; }
  .gta-clocks .xw-button { width: 100%; text-align: center; }
}