/* ============================================================
   Pick Your Line — Design Tokens & Base
   ============================================================ */
:root {
  --ink:        oklch(28% 0.05 260);
  --ink-soft:   oklch(46% 0.04 260);
  --ink-faint:  oklch(62% 0.03 260);
  --paper:      oklch(97% 0.012 85);
  --paper-deep: oklch(93% 0.02 80);
  --hairline:   oklch(87% 0.02 80);

  --jade:       oklch(54% 0.15 155);
  --jade-deep:  oklch(40% 0.13 155);
  --jade-soft:  oklch(93% 0.05 155);

  --gold:       oklch(88% 0.05 85);
  --gold-deep:  oklch(62% 0.09 70);

  --sun:        oklch(70% 0.16 45);
  --lacquer:    oklch(58% 0.19 32);
  --green:      oklch(54% 0.15 155);

  /* The game's accent — the same orange the games page paints its card with.
     Held in its own names so the header, the buttons and the steps all move
     together if it ever changes. */
  --pyl:        oklch(70% 0.16 45);
  --pyl-deep:   oklch(52% 0.17 40);
  --pyl-soft:   oklch(94% 0.05 45);

  --correct:    oklch(56% 0.16 145);
  --wrong:      oklch(55% 0.19 30);

  --font-display: 'Abril Fatface', Georgia, serif;
  --font-ui: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --tile-bg: #f6f1e4;
  --tile-border: #c8b890;
  --tile-shadow: #8a7455;
  --tile-inner: #ddd0ac;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-ui); background: var(--paper); color: var(--ink); min-height: 100vh; }
.hidden { display: none !important; }

/* ============================================================
   App Shell
   ============================================================ */
/* 860 is the Charleston's width, and for the same reason: fourteen tiles in a
   row at 680px came out 39px each, which is two thirds of the artwork and
   reads as compressed. The intro panel and the summary keep their own narrower
   measures — this is the width the hand needs, not the width prose wants. */
.app { max-width: 860px; margin: 0 auto; min-height: 100vh; }
.screen { min-height: 100vh; display: flex; flex-direction: column; }

/* The bar wears the game's colour. Size and layout stay in shared.css; only
   the colour is the game's to set. */
.site-header {
  background: var(--pyl);
  border-bottom: 4px solid var(--pyl-deep);
  box-shadow: 0 4px 0 var(--pyl-deep);
}
.site-header .brand-seal { background: var(--pyl-deep); }

/* ============================================================
   Felt Band
   ============================================================ */
.felt-band {
  background: var(--pyl);
  border-bottom: 4px solid var(--pyl-deep);
  box-shadow: 0 4px 0 var(--pyl-deep);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-seal {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sun);
  border: 2.5px solid var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--paper);
  flex-shrink: 0;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--paper);
}

.welcome-puzzle-id {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  margin-top: 8px;
}

/* ============================================================
   Welcome Screen
   ============================================================ */
/* Rush's intro shape: one bordered panel holding the day, the lead, a working
   miniature of the loop, the steps and the level picker — rather than a hero
   band repeating the name the site header already carries. */
.intro-body {
  max-width: 520px;
  margin: 24px auto 40px;
  background: var(--panel, oklch(98% 0.008 85));
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.intro-date {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin: 0;
}

.intro-desc {
  max-width: 24rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  text-align: center;
}

.intro-preview { width: 100%; max-width: 24rem; }

.intro-how-to-play {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intro-how-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.intro-steps { display: flex; flex-direction: column; gap: 7px; }
.intro-step { display: flex; align-items: flex-start; gap: 10px; }
.intro-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--pyl);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.intro-step-text { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; }

.intro-body .level-grid { width: 100%; max-width: 24rem; margin-top: 4px; }

.welcome-body {
  padding: 32px 24px;
  flex: 1;
}

.welcome-desc {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.65;
  text-align: center;
  margin-bottom: 32px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.level-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}

.level-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--tile-bg);
  border: 2px solid var(--tile-border);
  border-radius: 12px;
  box-shadow: 4px 5px 0 var(--tile-shadow);
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.level-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--tile-inner);
  border-radius: 6px;
  pointer-events: none;
}
.level-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--tile-shadow); }
.level-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tile-shadow); }

.level-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.level-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 3px;
}

.level-sub {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ============================================================
   Question Screen
   ============================================================ */
/* A meta row, not a band: it carries the level and how far through you are,
   which is what the site header above does not say. */
.question-header,
.summary-header {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1.5px solid var(--hairline);
}
.summary-header {
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.q-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.q-progress span {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.q-dots {
  display: flex;
  gap: 5px;
}

/* Recoloured for parchment now that they no longer sit on the felt. */
.q-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--hairline);
}
.q-dot.answered-correct { background: var(--correct); border-color: var(--correct); }
.q-dot.answered-wrong   { background: var(--hairline); border-color: var(--hairline); }
.q-dot.current          { background: var(--pyl); border-color: var(--pyl-deep); }

.q-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.question-body {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================
   Dealt Hand
   ============================================================ */
.hand-section {
  background: var(--tile-bg);
  border: 2px solid var(--tile-border);
  border-radius: 10px;
  padding: 14px 14px 12px;
  box-shadow: 4px 5px 0 var(--tile-shadow);
  position: relative;
}
.hand-section::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--tile-inner);
  border-radius: 5px;
  pointer-events: none;
}

.hand-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.hand-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.btn-sort {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.btn-sort:hover { background: var(--paper-deep); border-color: var(--ink-faint); }

/* Two sorts in one pill, the same control the Charleston and the Commute use. */
.sort-control {
  display: flex;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-deep);
  flex: none;
}
.btn-sort-opt {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 5px 13px;
  cursor: pointer;
}
.btn-sort-opt + .btn-sort-opt { border-left: 1px solid var(--hairline); }
.btn-sort-opt:hover { background: var(--paper); }
.btn-sort-opt.sort-active { background: var(--ink-soft); color: var(--paper); }

.hand-tray {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 5px;
}
/* Never larger than the artwork — past 60px the tile is just a blurred SVG
   stretched, so the row centres instead of growing. */
.hand-tray > .tile {
  max-width: 60px;
  /* The browser must not claim the gesture for scrolling: without this a
     touch-drag on a tile pans the page instead of moving the tile. */
  touch-action: none;
}

/* Tiles — identical to charleston game */
.tile, .tile * { font-family: Georgia, 'Times New Roman', serif; }

.tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 5px;
  cursor: grab;
  user-select: none;
  transition: transform 0.12s;
  position: relative;
  padding: 3px 2px;
  background: transparent;
  border: none;
}
.tile-img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
  display: block;
}
.tile-num-label {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: clamp(8px, 1.4vw, 11px);
  font-weight: 800;
  background: rgba(255,255,255,0.96);
  border-radius: 3px;
  padding: 1px 3px;
  line-height: 1.4;
  color: #111;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  font-family: system-ui, -apple-system, sans-serif;
}
.tile:hover { transform: translateY(-3px); }
.tile.dragging { opacity: 0.35; transform: scale(0.92); }
.drag-placeholder-el {
  width: 3px;
  align-self: stretch;
  background: var(--jade);
  border-radius: 2px;
  flex-shrink: 0;
  pointer-events: none;
}

.tile.suit-joker { filter: drop-shadow(0 0 3px #c8a840); }

/* ============================================================
   Options
   ============================================================ */
.choose-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.option-card {
  background: var(--tile-bg);
  border: 2.5px solid var(--tile-border);
  border-radius: 10px;
  padding: 14px 14px 12px;
  box-shadow: 4px 5px 0 var(--tile-shadow);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: transform 0.1s, box-shadow 0.1s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.option-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--tile-inner);
  border-radius: 5px;
  pointer-events: none;
}
.option-card:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--tile-shadow); }
.option-card:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tile-shadow); }
.option-card:disabled { cursor: default; }

/* The line you took, marked as taken and not as right. Neither card turns
   green or red: both show their coverage and you compare them. */
.option-card.chosen {
  border-color: var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
}
/* A heavier border is easy to miss on a phone, where the answer that follows is
   below the fold — you could tap and not be sure anything had happened. This
   sits on the card you tapped, in the game's colour, and says so. */
.option-card.chosen::before {
  content: "Your pick";
  position: absolute;
  top: -9px;
  right: 12px;
  z-index: 2;
  background: var(--pyl);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 1px 0 var(--pyl-deep);
}

.option-letter {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--jade);
  line-height: 1;
}
.option-card.chosen .option-letter { color: var(--ink); }

/* The line is the whole of the hand now that the chips are gone, so it reads
   a size up and keeps its groups on one line where the width allows. */
.option-hand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: 0.01em;
  word-spacing: 0.18em;
  word-break: break-word;
}

.option-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.option-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  color: var(--ink-faint);
}
.option-tag.closed { background: oklch(92% 0.04 260); border-color: oklch(80% 0.05 260); color: oklch(46% 0.08 260); }

.option-match {
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 4px;
  display: none;
}
/* Shown on both cards once either is picked — the comparison is the point. */
.option-card:disabled .option-match { display: block; color: var(--ink-soft); }

/* ============================================================
   Answer Reveal
   ============================================================ */
.answer-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px 0 8px;
}

.reveal-message {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--pyl); color: var(--paper); }
.btn-primary:hover { background: var(--pyl-deep); color: var(--paper); }
.btn-ghost { background: var(--paper); color: var(--ink-soft); border-color: var(--hairline); box-shadow: none; }
.btn-ghost:hover { background: var(--paper-deep); color: var(--ink); }

/* ============================================================
   Summary Screen
   ============================================================ */
.summary-body {
  padding: 32px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}

.score-card {
  background: var(--tile-bg);
  border: 2px solid var(--tile-border);
  border-radius: 12px;
  padding: 28px 48px;
  box-shadow: 6px 7px 0 var(--tile-shadow);
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 320px;
}
.score-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid var(--tile-inner);
  border-radius: 6px;
  pointer-events: none;
}

.score-big {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--ink);
  line-height: 1;
}

.score-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 8px;
  font-weight: 600;
}

.result-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 440px;
}

.breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--tile-bg);
  border: 1.5px solid var(--tile-border);
  border-radius: 8px;
  font-size: 0.85rem;
}

.breakdown-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.breakdown-text {
  flex: 1;
  color: var(--ink-soft);
}

.breakdown-pct {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.summary-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Responsive
   ============================================================ */
/* Fourteen tiles in one row is about 20px each on a 390px phone — smaller than
   the artwork can carry. Wrap to five a row instead, which is what the
   Charleston does at the same width and for the same reason. The old rule here
   set a 30px width on .tile, which a flex-basis of 0 ignored entirely. */
@media (max-width: 640px) {
  /* The answer and the Next button are the last thing on a short page, so they
     sit just under the fold with nothing left to scroll — 85px of travel on a
     915px page, and the reveal still cut off. Pinning it to the bottom of the
     viewport puts the result where the thumb already is and makes the tap
     unmistakably do something. */
  .answer-reveal:not(.hidden) {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -20px -24px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1.5px solid var(--hairline);
    box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.09);
  }
  .reveal-message { text-align: center; }

  .hand-tray {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 6px;
  }
  .hand-tray > .tile {
    flex: 0 0 calc((100% - 4 * 6px) / 5);
    width: auto;
    max-width: 60px;   /* the tile artwork's own size — never larger */
  }
}

@media (max-width: 480px) {
  .options-row { grid-template-columns: 1fr; }
  .brand-wordmark { font-size: 1.3rem; }
}

/* The card's own print colours. Which colours appear is information: one suit
   group is blue, two are green and red, three are all three. Honours carry no
   suit and stay in ink. */
.hand-green { color: #2f7d4e; }
.hand-red   { color: #b3312c; }
.hand-blue  { color: #2154a6; }
.hand-ink   { color: var(--ink); }