/* ═══════════════════════════════════════════════
   HISTORDER — Styles
   Theme: dark antiquarian / gold parchment
════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ──────────────────────────── */
:root {
  --bg:            #0b0704;
  --bg-glow:       #1a0e04;
  --gold:          #c9a84c;
  --gold-hi:       #e8d080;
  --gold-lo:       #7a5e20;
  --parchment:     #f2e4c0;
  --parchment-mid: #d8c898;
  --parchment-lo:  #b89e70;
  --ink:           #2a1800;
  --ink-mid:       #5a3a10;
  --correct-hi:    #7ddd88;
  --correct-lo:    #1e5c26;
  --wrong-hi:      #ff7070;
  --wrong-lo:      #7a1515;
  --shadow:        rgba(0,0,0,.65);
}

/* ── Base ───────────────────────────────────── */
html, body {
  height: 100%;
  font-family: 'Crimson Text', Georgia, serif;
  background: var(--bg);
  color: var(--parchment);
  overflow-x: hidden;
}

/* Subtle radial atmosphere */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 60%, rgba(160,90,10,.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(80,40,0,.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Screens ────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
}
.screen.active { display: flex; }

/* ════════════════════════════════════════════
   START SCREEN
════════════════════════════════════════════ */
.start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 500px;
  margin: auto;
}

/* Logo */
.logo-wrap { text-align: center; }

.game-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3.2rem, 11vw, 6.5rem);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-subtitle {
  margin-top: .5rem;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--parchment-mid);
  letter-spacing: .06em;
}

.ornament {
  margin-top: .8rem;
  color: var(--gold-lo);
  font-size: .95rem;
  letter-spacing: .35em;
}

/* High-score box */
.highscore-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  border: 1px solid var(--gold-lo);
  padding: .75rem 2.5rem;
  background: rgba(201,168,76,.04);
}
.hs-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold-lo);
}
.hs-value {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
}

/* ── Difficulty picker (shared) ─────────────── */
.diff-section { width: 100%; text-align: center; }

.section-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--parchment-mid);
  margin-bottom: .9rem;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
}

.diff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .9rem .4rem;
  background: rgba(201,168,76,.05);
  border: 1px solid var(--gold-lo);
  color: var(--parchment);
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s;
  font-family: 'Cinzel', serif;
}
.diff-btn:hover {
  background: rgba(201,168,76,.13);
  border-color: var(--gold);
}
.diff-btn.selected {
  background: rgba(201,168,76,.18);
  border-color: var(--gold-hi);
  box-shadow: 0 0 18px rgba(201,168,76,.30);
}

.diff-num  { font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; }
.diff-word { font-size: .72rem; font-family: 'Crimson Text', serif; color: var(--parchment-mid); margin-top: .2rem; }
.diff-reward { font-size: .78rem; font-family: 'Crimson Text', serif; font-style: italic; color: var(--gold-lo); margin-top: .45rem; }

/* ── Buttons ────────────────────────────────── */
.btn-primary {
  padding: .85rem 3.2rem;
  background: linear-gradient(170deg, var(--gold) 0%, var(--gold-lo) 100%);
  border: none;
  color: var(--bg);
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .18s, transform .15s, box-shadow .18s;
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.14);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(201,168,76,.35);
}
.btn-primary:disabled { opacity: .28; cursor: not-allowed; }

.btn-secondary {
  padding: .6rem 1.8rem;
  background: transparent;
  border: 1px solid var(--gold-lo);
  color: var(--parchment-mid);
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--parchment); }

/* ════════════════════════════════════════════
   GAME SCREEN
════════════════════════════════════════════ */
#screen-game {
  justify-content: flex-start;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

/* Header */
.game-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--gold-lo);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.hdr-item { display: flex; flex-direction: column; align-items: center; gap: .05rem; }
.hdr-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-lo); }
.hdr-value { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.hdr-divider { color: var(--gold-lo); font-size: .9rem; }

/* ── Timeline section ───────────────────────── */
.timeline-section {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  border-bottom: 1px solid var(--gold-lo);
  background:
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.25) 100%);
  position: relative;
}

/* Right-edge fade gradient — visible when content overflows and not yet scrolled to end */
.timeline-section::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(to right, transparent, var(--bg) 90%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s;
}
.timeline-section.overflows::after        { opacity: 1; }
.timeline-section.scroll-end::after       { opacity: 0; }

/* Horizontal scroll wrapper */
.timeline-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.5rem 2rem;
  /* Styled scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-lo) transparent;
}
.timeline-scroll::-webkit-scrollbar { height: 4px; }
.timeline-scroll::-webkit-scrollbar-track { background: transparent; }
.timeline-scroll::-webkit-scrollbar-thumb { background: var(--gold-lo); border-radius: 2px; }

/* The flex row of slots + cards */
.timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 130px;
  width: max-content;
  min-width: 100%;
}

/* ── Timeline cards (placed, year visible) ──── */
.tcard {
  width: 150px;
  min-width: 150px;
  min-height: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: .65rem .6rem .6rem;
  background: linear-gradient(160deg, #f5e9ca 0%, #ede0b4 60%, #e4d09a 100%);
  border: 1px solid #c2a462;
  border-top: 3px solid var(--gold);
  text-align: center;
  position: relative;
}

.tcard-year {
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid #c2a462;
  width: 100%;
}

.tcard-event {
  font-size: .75rem;
  color: var(--ink-mid);
  line-height: 1.35;
  font-family: 'Crimson Text', serif;
}

/* Animate newly placed card */
.tcard-new {
  animation: tcard-drop .4s cubic-bezier(.34,1.56,.64,1) both;
  border-top-color: var(--gold-hi);
  box-shadow: 0 0 20px rgba(201,168,76,.45);
}
@keyframes tcard-drop {
  from { transform: translateY(-24px) scale(.9); opacity: 0; }
  to   { transform: translateY(0)     scale(1);  opacity: 1; }
}

/* Wrong placement */
.tcard-wrong {
  animation: tcard-shake .4s ease-out both;
  background: linear-gradient(160deg, #f5d0d0, #e8a8a8);
  border-top-color: var(--wrong-hi);
  border-color: #c47070;
}
@keyframes tcard-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX( 6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX( 4px); }
}

/* ── Slots (clickable insert positions) ─────── */
.slot {
  width: 48px;
  min-width: 48px;
  height: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  background: rgba(201,168,76,.03);
  border: 1px dashed rgba(201,168,76,.25);
  border-radius: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  color: var(--gold-lo);
  font-size: .75rem;
  flex-shrink: 0;
}
.slot:hover {
  background: rgba(201,168,76,.16);
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
  box-shadow: inset 0 0 12px rgba(201,168,76,.15);
}

/* Empty-timeline slot: much wider, centered */
.slot-empty {
  width: 200px;
  min-width: 200px;
  height: 115px;
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: .05em;
  border-style: dashed;
}

.slot-arrow { font-size: 1rem; }
.slot-label { font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: .04em; }

/* ── Scroll hint ────────────────────────────── */
.scroll-hint {
  display: none;              /* shown by JS when overflowing */
  text-align: center;
  padding: .25rem 0 .35rem;
  font-size: .72rem;
  font-style: italic;
  color: var(--gold-lo);
  letter-spacing: .04em;
  transition: opacity .4s;
  flex-shrink: 0;
}
.scroll-hint.visible    { display: block; }
.scroll-hint.fade-out   { opacity: 0; pointer-events: none; }
.scroll-hint-arrow      { font-style: normal; animation: hint-nudge 1.4s ease-in-out infinite alternate; display: inline-block; }
.scroll-hint-arrow:last-child { animation-delay: .7s; }
@keyframes hint-nudge {
  from { transform: translateX(0); }
  to   { transform: translateX(4px); }
}

/* Non-interactive divider between cards (during animation) */
.tdivider {
  width: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-lo);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── Current card to place ──────────────────── */
.current-card-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1rem 1.2rem;
  flex-shrink: 0;
}

.place-hint {
  font-size: .78rem;
  font-style: italic;
  color: var(--parchment-lo);
  text-align: center;
}

.current-card {
  width: 100%;
  max-width: 460px;
  padding: 1rem 1.3rem 1.1rem;
  background: linear-gradient(118deg, #f5e9ca 0%, #ede0b4 60%, #e4d09a 100%);
  border: 1px solid #c2a462;
  border-left: 5px solid var(--gold);
  box-shadow: 0 8px 32px var(--shadow);
  animation: card-in .35s ease-out both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-event {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: .4rem;
}

.cc-desc {
  font-size: .9rem;
  color: var(--ink-mid);
  font-style: italic;
  line-height: 1.5;
}

/* ════════════════════════════════════════════
   REVEAL SCREEN
════════════════════════════════════════════ */
.reveal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  max-width: 620px;
  margin: auto;
  padding: 1rem;
  /* Prevent overflowing the viewport — card list scrolls internally */
  max-height: 100%;
  overflow: hidden;
}

.correct-mark, .correct-title, .pts-pop, .running-score { flex-shrink: 0; }

.correct-mark {
  font-size: 3rem;
  color: var(--correct-hi);
  filter: drop-shadow(0 0 12px var(--correct-hi));
  animation: pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.correct-title {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--correct-hi);
}

.pts-pop {
  font-family: 'Cinzel', serif;
  font-size: 3.8rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(201,168,76,.6);
  animation: pts-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes pts-pop {
  from { transform: scale(.3); opacity: 0; }
  60%  { transform: scale(1.15); }
  to   { transform: scale(1);  opacity: 1; }
}

.running-score {
  font-size: 1rem;
  color: var(--parchment-mid);
  font-style: italic;
}
.running-score span { color: var(--gold); font-weight: 600; font-style: normal; }

/* Reveal timeline — grows to fill remaining space and scrolls internally */
.reveal-timeline {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-lo) transparent;
}

.reveal-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .65rem 1rem;
  background: linear-gradient(118deg, #f5e9ca, #ede0b4);
  border: 1px solid #c2a462;
  border-left: 4px solid var(--gold);
  animation: slide-in .35s ease-out both;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.rc-position {
  font-family: 'Cinzel', serif;
  font-size: .75rem;
  color: #b8963e;
  min-width: 1.4rem;
  text-align: center;
}
.rc-year {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  min-width: 90px;
  text-align: right;
  border-right: 1px solid #c2a462;
  padding-right: .9rem;
}
.rc-event {
  font-family: 'Cinzel', serif;
  font-size: .85rem;
  color: var(--ink);
  flex: 1;
}

/* Next-round section — always visible, never pushed off screen */
.next-section {
  width: 100%;
  text-align: center;
  flex-shrink: 0;
}
.next-section .diff-grid { margin: .75rem 0 1rem; }

/* ════════════════════════════════════════════
   GAME OVER SCREEN
════════════════════════════════════════════ */
.go-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
  max-width: 620px;
  margin: auto;
  padding: 1rem;
  /* Prevent overflowing the viewport — card list scrolls internally */
  max-height: 100%;
  overflow: hidden;
}

.go-title, .go-score-box, .hs-new, .go-subtitle { flex-shrink: 0; }

.go-title {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wrong-hi);
  text-shadow: 0 0 22px rgba(255,100,100,.45);
}
.go-title.cashout {
  color: var(--gold);
  text-shadow: 0 0 22px rgba(201,168,76,.45);
}

.go-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  border: 1px solid var(--gold-lo);
  padding: .9rem 3rem;
  background: rgba(201,168,76,.04);
}
.go-score-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--gold-lo); }
.go-score-value { font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 700; color: var(--gold); }

.hs-new {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: var(--gold-hi);
  text-shadow: 0 0 18px rgba(201,168,76,.65);
  animation: hs-pulse 1s ease-in-out infinite alternate;
}
@keyframes hs-pulse { from { opacity: .65; } to { opacity: 1; } }

.go-subtitle {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--parchment-mid);
  margin-bottom: -.6rem;
}

/* Game-over timeline — scrolls internally */
.go-timeline {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-lo) transparent;
}

.go-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .65rem 1rem;
  background: linear-gradient(118deg, #f5e9ca, #ede0b4);
  border: 1px solid #c2a462;
  border-left: 4px solid var(--gold);
}
.go-card.wrong {
  background: linear-gradient(118deg, #f5d5d5, #e8b8b8);
  border-left-color: var(--wrong-hi);
  border-color: #c47070;
}

.go-pos  { font-family: 'Cinzel', serif; font-size: .75rem; color: #b8963e; min-width: 1.4rem; text-align: center; }
.go-year { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--ink); min-width: 90px; text-align: right; border-right: 1px solid #c2a462; padding-right: .9rem; }
.go-event { font-family: 'Cinzel', serif; font-size: .85rem; color: var(--ink); flex: 1; }
.go-wrong-tag { font-size: .72rem; color: var(--wrong-hi); font-style: italic; white-space: nowrap; }

/* ── Utility ────────────────────────────────── */
.hidden { display: none !important; }

/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE
════════════════════════════════════════════ */

/* All screens: fixed viewport height so inner content can use max-height: 100% */
#screen-game, #screen-reveal, #screen-gameover {
  height: 100vh;
  height: 100dvh;
  min-height: unset;
  overflow: hidden;
}

/* Start screen: allow scroll on very small phones as last resort */
#screen-start {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  justify-content: center;
}

@media (max-width: 600px) {

  /* ── Start / shared screens ─────────────── */
  .screen { padding: 1.5rem .9rem; }

  .start-inner { gap: 1.4rem; }
  /* Reduce font-size AND letter-spacing — both contribute to the total width of "HISTORDER" */
  .game-title  { font-size: clamp(1.6rem, 10vw, 3rem); letter-spacing: .03em; }
  .game-subtitle { font-size: .95rem; }
  .highscore-box { padding: .65rem 1.8rem; }
  .hs-value { font-size: 1.9rem; }

  .diff-grid  { gap: .5rem; }
  .diff-btn   { padding: .75rem .3rem; }
  .diff-num   { font-size: 1.7rem; }
  .diff-word  { font-size: .68rem; }
  .diff-reward{ font-size: .72rem; }

  .btn-primary   { padding: .75rem 2.2rem; font-size: .88rem; }
  .btn-secondary { padding: .55rem 1.3rem; font-size: .9rem; }

  /* ── Game header ────────────────────────── */
  .game-header { gap: 1rem; padding: .6rem .9rem; }
  .hdr-value   { font-size: 1.1rem; }
  .hdr-label   { font-size: .58rem; }
  .hdr-divider { font-size: .75rem; }

  /* ── Timeline cards ─────────────────────── */
  .tcard {
    width: 115px;
    min-width: 115px;
    min-height: 95px;
    padding: .5rem .45rem;
  }
  .tcard-year  { font-size: .82rem; margin-bottom: .28rem; padding-bottom: .25rem; }
  .tcard-event { font-size: .68rem; }

  /* ── Slots ──────────────────────────────── */
  .slot {
    width: 36px;
    min-width: 36px;
    height: 95px;
    font-size: .68rem;
  }
  .slot-empty {
    width: 150px;
    min-width: 150px;
    height: 95px;
  }
  .slot-arrow { font-size: .85rem; }
  .slot-label { font-size: .72rem; }

  .tdivider { width: 20px; min-width: 20px; font-size: .85rem; }

  .timeline-scroll { padding: 1.1rem 1rem; }

  /* ── Current card ───────────────────────── */
  .current-card-section { padding: .65rem .9rem .9rem; gap: .4rem; }
  .place-hint  { font-size: .7rem; }
  .current-card { padding: .85rem 1rem; }
  .cc-event    { font-size: .95rem; }
  .cc-desc     { font-size: .82rem; line-height: 1.4; }

  /* ── Reveal screen ──────────────────────── */
  .reveal-inner  { gap: .85rem; padding: .75rem; }
  .correct-mark  { font-size: 2.4rem; }
  .correct-title { font-size: 1.3rem; }
  .pts-pop       { font-size: 3rem; }
  .running-score { font-size: .9rem; }

  .rc-year  { min-width: 68px; font-size: .88rem; padding-right: .7rem; }
  .rc-event { font-size: .78rem; }
  .rc-position { font-size: .7rem; }

  .next-section .diff-grid { margin: .6rem 0 .8rem; }

  /* ── Game over screen ───────────────────── */
  .go-inner      { gap: 1rem; padding: .75rem; }
  .go-title      { font-size: 2rem; }
  .go-score-box  { padding: .75rem 2rem; }
  .go-score-value{ font-size: 2.4rem; }
  .hs-new        { font-size: 1rem; }
  .go-subtitle   { font-size: .72rem; }

  .go-year  { min-width: 68px; font-size: .88rem; padding-right: .7rem; }
  .go-event { font-size: .78rem; }
  .go-pos   { font-size: .7rem; }
  .go-wrong-tag { font-size: .68rem; }
}

/* Extra-small phones (< 380px) */
@media (max-width: 380px) {
  .tcard { width: 100px; min-width: 100px; }
  .slot  { width: 30px;  min-width: 30px; }
  .slot-empty { width: 130px; min-width: 130px; }
  .cc-event { font-size: .88rem; }
  .game-header { gap: .7rem; }

  .game-title { font-size: clamp(1.4rem, 9vw, 2.4rem); letter-spacing: .01em; }
  .start-inner { gap: 1.1rem; }
  .game-subtitle { font-size: .85rem; }
  .ornament { font-size: .8rem; margin-top: .5rem; }
}