/* ==========================================================================
   Swipe Inn — a toy-box game show for hotel hunting
   Palette: cream stage, ink outlines, five saturated tile colours.
   ========================================================================== */

:root {
  --cream: #fff6e9;
  --paper: #fffdf8;
  --ink: #1b1712;
  --ink-2: #3b342c;
  --muted: #6b6156;
  --board: #26211b;
  --board-2: #3a332b;

  --tomato: #ff5a36;
  --mint: #2ed3a3;
  --sky: #4aa3ff;
  --sun: #ffd23f;
  --grape: #7a4cff;

  --line: 3px solid var(--ink);
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --lift: 5px;

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1280px;
  --gutter: clamp(16px, 3.5vw, 40px);
  --bounce: cubic-bezier(.2, .9, .25, 1.25);
  --snap: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.mono, .led { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- pressable buttons ---------- */
.btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.25em;
  border: var(--line); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 750; font-size: 1rem; line-height: 1.1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 calc(var(--lift) + 1px) 0 var(--ink); }
.btn:active { transform: translateY(calc(var(--lift) - 1px)); box-shadow: 0 1px 0 var(--ink); }
.btn--small { min-height: 40px; padding: .5em 1em; font-size: .9rem; --lift: 4px; }
.btn--sun { --btn-bg: var(--sun); }
.btn--mint { --btn-bg: var(--mint); }
.btn--sky { --btn-bg: var(--sky); }
.btn--go { --btn-bg: var(--tomato); }
.btn--plain { --btn-bg: var(--paper); }

/* ---------- top bar ---------- */
.topbar { border-bottom: var(--line); background: var(--cream); }
.topbar__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em;
}
.logo__mark { width: 42px; height: 42px; transition: transform .3s var(--bounce); }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.logo--small { font-size: 1.1rem; }
.logo--small .logo__mark { width: 32px; height: 32px; }
.topbar__chip {
  border: var(--line); border-radius: 999px; padding: 6px 14px; background: var(--paper);
  font-weight: 650; font-size: .9rem; box-shadow: 0 3px 0 var(--ink);
}

/* ---------- shared bits ---------- */
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow__dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--tomato); border: 2.5px solid var(--ink);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.35); } }
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border: 2.5px solid var(--ink); border-radius: 999px;
  font-size: .74rem; font-weight: 700; line-height: 1.2; white-space: nowrap; background: var(--paper);
}
.tag--sun { background: var(--sun); }
.tag--mint { background: var(--mint); }
.tag--sky { background: var(--sky); }
.tag--grape { background: var(--grape); color: #fff; }
.tag--deal { background: var(--tomato); }
.score {
  display: inline-grid; place-items: center; flex: none;
  min-width: 46px; height: 46px; padding: 0 6px;
  border: var(--line); border-radius: 14px;
  font-family: var(--mono); font-weight: 500; font-size: 1.05rem;
  background: var(--paper);
}
.score--hi { background: var(--mint); }
.score--mid { background: var(--sky); }
.score--lo { background: var(--sun); }
.score--sm { min-width: 36px; height: 30px; border-width: 2.5px; border-radius: 10px; font-size: .85rem; }
.stars { display: inline-flex; gap: 1px; margin-left: 8px; vertical-align: -2px; }
.stars .ic { width: 15px; height: 15px; color: var(--sun); stroke: var(--ink); stroke-width: 2.2px; paint-order: stroke; }
.stars--tiles .ic { color: var(--sky); }
kbd {
  display: inline-grid; place-items: center; min-width: 34px; height: 32px; padding: 0 6px;
  border: 2.5px solid var(--ink); border-radius: 9px; background: var(--paper);
  box-shadow: 0 3px 0 var(--ink); font-family: var(--font); font-size: 1.05rem; font-weight: 700;
}

/* ---------- footer ---------- */
.foot { border-top: var(--line); margin-top: 56px; background: var(--paper); }
.foot__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gutter) 32px;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 32px;
}
.foot__note { flex: 1 1 320px; max-width: 78ch; font-size: .85rem; color: var(--muted); }

/* ==========================================================================
   HOME — prize wheel
   ========================================================================== */
.home { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.show {
  display: grid; gap: 24px; align-items: center;
  grid-template-areas: "head" "wheel" "more";
  padding: clamp(16px, 2.2vw, 32px) 0 8px;
}
.show__head { grid-area: head; display: grid; gap: 18px; }
.show__more { grid-area: more; display: grid; gap: 18px; }
.mega {
  font-size: clamp(2.5rem, 7.2vw, 5.4rem); line-height: .95; font-weight: 800; letter-spacing: -.04em;
}
.mark {
  display: inline-block; padding: 0 .14em .04em; margin: .06em 0;
  border: var(--line); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); transform: rotate(-2.5deg);
}
.mark--sun { background: var(--sun); }
.jump {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 14px; border: var(--line); border-radius: 999px; background: var(--mint);
  box-shadow: 0 4px 0 var(--ink); font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none;
  transform: rotate(-1.5deg); transition: transform .15s var(--bounce), box-shadow .15s;
}
.jump b { font-weight: 500; padding: 0 6px; border-radius: 7px; background: var(--ink); color: var(--sun); }
.jump .ic { width: 18px; height: 18px; }
.jump:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.jump:hover .ic { animation: nudge .7s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 44ch; color: var(--ink-2); }
.rules { list-style: none; counter-reset: rule; display: grid; gap: 10px; max-width: 46ch; }
.rules li {
  counter-increment: rule; display: flex; align-items: center; gap: 12px;
  font-size: 1rem;
}
.rules li::before {
  content: counter(rule); flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border: var(--line); border-radius: 11px;
  font-family: var(--mono); font-weight: 500; background: var(--tomato); box-shadow: 0 3px 0 var(--ink);
}
.rules li:nth-child(2)::before { background: var(--mint); }
.rules li:nth-child(3)::before { background: var(--sky); }

.show__wheel { grid-area: wheel; display: grid; justify-items: center; gap: 22px; padding-top: 18px; }
.wheel { position: relative; width: min(100%, 540px); aspect-ratio: 1 / 1; }
.wheel::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ink); transform: translateY(12px);
}
.wheel__rotor { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.wheel__svg { width: 100%; height: 100%; overflow: visible; }
.seg { cursor: pointer; }
.seg__slice { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; transition: filter .15s; }
.seg--tomato .seg__slice { fill: var(--tomato); }
.seg--mint .seg__slice { fill: var(--mint); }
.seg--sky .seg__slice { fill: var(--sky); }
.seg--sun .seg__slice { fill: var(--sun); }
.seg--grape .seg__slice { fill: var(--grape); }
.wheel:not(.is-spinning) .seg:hover .seg__slice { filter: brightness(1.08); }
.seg.is-won .seg__slice { filter: brightness(1.12); }
.seg__ring { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.seg__code {
  font-family: var(--font); font-weight: 800; font-size: 27px; letter-spacing: .01em;
  fill: var(--paper); stroke: var(--ink); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke;
}
.peg { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.bulb { fill: var(--sun); animation: blink 1.2s steps(1) infinite; }
.bulb--1 { animation-delay: -.6s; }
.wheel.is-spinning .bulb { animation-duration: .36s; }
@keyframes blink { 50% { fill: var(--paper); } }
.wheel__pointer {
  position: absolute; z-index: 3; left: 50%; top: -5.5%; width: 12.5%;
  translate: -50% 0; transform-origin: 50% 32%;
  filter: drop-shadow(0 4px 0 var(--ink));
}
.wheel__hub {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 25%; aspect-ratio: 1 / 1;
  translate: -50% -50%;
  display: grid; place-items: center; padding: 0;
  border: 4px solid var(--ink); border-radius: 50%; background: var(--sun);
  box-shadow: 0 7px 0 var(--ink), inset 0 -6px 0 rgba(27, 23, 18, .14);
  font-weight: 800; font-size: clamp(1.05rem, 4.4vw, 1.75rem); letter-spacing: .02em; text-transform: uppercase;
  transition: transform .08s ease-out, box-shadow .08s ease-out, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.wheel__hub:hover { background: #ffdb5e; }
.wheel__hub:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink), inset 0 -3px 0 rgba(27, 23, 18, .14); }
.wheel__hub:disabled { cursor: progress; background: var(--paper); }
.wheel__status { font-weight: 600; min-height: 1.5em; text-align: center; }

.picker { padding: 28px 0 4px; }
.picker__title {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px;
}
.picker__title span {
  font-family: var(--mono); font-weight: 500; font-size: .7em;
  background: var(--ink); color: var(--cream); padding: 2px 10px; border-radius: 8px;
}
.picks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.pick {
  width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 2px;
  padding: 14px 8px 12px; text-align: center;
  border: var(--line); border-radius: 20px; background: var(--paper);
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.pick:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 calc(var(--lift) + 2px) 0 var(--ink); }
.pick:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.pick--tomato { background: var(--tomato); }
.pick--mint { background: var(--mint); }
.pick--sky { background: var(--sky); }
.pick--sun { background: var(--sun); }
.pick--grape { background: var(--grape); color: #fff; }
.pick__flag {
  width: 44px; height: 44px; border-radius: 50%; border: var(--line); object-fit: cover; margin-bottom: 6px;
  background: var(--paper);
}
.pick__code { font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.01em; }
.pick__name { font-weight: 650; font-size: .82rem; line-height: 1.15; }
.pick__count { font-family: var(--mono); font-size: .72rem; opacity: .85; }
/* phones: the nine picks become one swipeable strip, so the hotel rows below start sooner */
@media (max-width: 599px) {
  .picker { padding-top: 20px; }
  .picker__title { margin-bottom: 10px; }
  .picks {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) calc(var(--lift) + 6px); scroll-padding-inline: var(--gutter);
  }
  .picks::-webkit-scrollbar { display: none; }
  .picks li { flex: 0 0 auto; scroll-snap-align: start; }
  .pick { width: 86px; padding: 10px 4px 8px; border-radius: 16px; }
  .pick__flag { width: 38px; height: 38px; margin-bottom: 4px; }
  .pick__code { font-size: 1.15rem; }
  .pick__name { font-size: .7rem; }
  .pick__count { display: none; }
}

.scores { padding: 40px 0 0; }
.scores__title {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px;
}
.scores__board {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 16px; border: var(--line); border-radius: var(--r-xl);
  background: var(--board); color: var(--cream); box-shadow: 0 8px 0 var(--ink);
}
.scores__total {
  display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--ink); border: 2px solid var(--board-2);
}
.scores__total .led { font-size: clamp(2rem, 6vw, 3rem); font-weight: 500; line-height: 1; color: var(--sun); }
.scores__total span { font-weight: 650; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.scores__cheap { grid-column: 1 / -1; }
.scores__label { font-weight: 650; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin: 4px 4px 10px; }
.score-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.score-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 10px; border-radius: 14px; background: var(--ink); border: 2px solid var(--board-2);
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.score-tile:hover { border-color: var(--sun); transform: translateY(-2px); }
.score-tile:focus-visible { outline-color: var(--sun); }
.score-tile img { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cream); object-fit: cover; }
.score-tile__code { font-weight: 800; font-size: .85rem; line-height: 1.1; }
.score-tile__price { font-family: var(--mono); font-weight: 500; color: var(--mint); font-size: 1.05rem; line-height: 1.1; }

/* prize dialog */
.prize {
  width: min(100% - 32px, 460px); max-width: none; max-height: calc(100% - 24px);
  padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink);
}
.prize::backdrop { background: rgba(27, 23, 18, .55); }
.prize[open] .prize__card { animation: pop .55s var(--bounce) both; }
@keyframes pop {
  0% { transform: scale(.6) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.04) rotate(1.5deg); opacity: 1; }
  100% { transform: none; }
}
.prize__card {
  position: relative; z-index: 1; display: grid; gap: 14px;
  padding: 22px 22px 24px; border: var(--line); border-radius: var(--r-xl);
  background: var(--paper); box-shadow: 0 8px 0 var(--ink);
  max-height: calc(100vh - 40px); overflow: auto;
}
.prize__close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  width: 40px; height: 40px; border: var(--line); border-radius: 50%; background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}
.prize__close .ic { width: 18px; height: 18px; }
.prize__kicker {
  display: flex; align-items: center; gap: 12px; padding-right: 48px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .8rem; color: var(--ink-2);
}
.prize__flag { width: 56px; height: 56px; border-radius: 50%; border: var(--line); box-shadow: 0 4px 0 var(--ink); object-fit: cover; }
.prize__title { font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.prize__title span {
  display: inline-block; padding: 0 .12em; margin-top: 4px;
  background: var(--sun); border: var(--line); border-radius: 12px; transform: rotate(-1.5deg);
}
.prize__line { font-size: 1.15rem; font-weight: 600; }
.prize__min { background: var(--mint); border: 2.5px solid var(--ink); border-radius: 8px; padding: 0 6px; }
.prize__photo { border: var(--line); border-radius: 20px; overflow: hidden; background: var(--sky); }
.prize__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prize__photo figcaption { padding: 8px 12px; font-size: .85rem; font-weight: 600; border-top: var(--line); background: var(--cream); }
.prize__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.prize__actions .btn--go { flex: 1 1 160px; font-size: 1.1rem; }
.prize__confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.prize__confetti i {
  position: absolute; left: 50%; top: 45%; width: 11px; height: 16px;
  border: 2px solid var(--ink); border-radius: 3px; opacity: 0;
  animation: burst 1.6s cubic-bezier(.15, .7, .35, 1) forwards;
}
.prize__confetti i:nth-child(3n) { border-radius: 50%; width: 13px; height: 13px; }
@keyframes burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
  35% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(calc(var(--r) * .4)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.25), calc(-50% + var(--dy) + 55vh)) scale(.9) rotate(var(--r)); }
}

@media (min-width: 600px) {
  .scores__board { grid-template-columns: auto auto 1fr; align-items: stretch; padding: 18px; }
  .scores__cheap { grid-column: auto; }
  .score-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picks { gap: 14px; }
  .pick { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; justify-items: start; text-align: left; column-gap: 12px; padding: 14px; }
  .pick__flag { grid-row: span 3; margin: 0; width: 52px; height: 52px; align-self: center; }
}
@media (min-width: 920px) {
  .show { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head wheel" "more wheel"; gap: 18px 40px; }
  .show__head { align-self: end; gap: 16px; }
  .show__more { align-self: start; gap: 14px; }
  .show__wheel { padding-top: 28px; gap: 18px; }
  .wheel { width: min(100%, 496px); }
}
@media (min-width: 1100px) {
  .picks { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
  .pick { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px 6px 12px; }
  .pick__flag { grid-row: auto; margin-bottom: 6px; }
  .scores__board { grid-template-columns: 180px 220px 1fr; }
  .score-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- home: fresh hands (one swipeable row of stays per country) ---------- */
.hands { padding-top: 40px; scroll-margin-top: 8px; }
.hands__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.hands__intro { display: grid; gap: 6px; min-width: 0; }
.hands__title { font-size: clamp(1.65rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.hands__chip {
  display: inline-block; padding: 0 .16em .05em; margin-right: .08em;
  border: var(--line); border-radius: 14px; background: var(--mint); box-shadow: 0 5px 0 var(--ink); transform: rotate(-2deg);
}
.hands__note { font-weight: 600; color: var(--ink-2); }
.hands__shuffle { flex: none; }

.hand { --c: var(--paper); --c-fg: var(--ink); margin-top: 26px; }
.hand--tomato { --c: var(--tomato); }
.hand--mint { --c: var(--mint); }
.hand--sky { --c: var(--sky); }
.hand--sun { --c: var(--sun); }
.hand--grape { --c: var(--grape); --c-fg: #fff; }
.hand__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.hand__coin {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  border: var(--line); background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.hand__coin img { width: 100%; height: 100%; object-fit: cover; }
.hand__label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.hand__name { font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.hand__count {
  padding: 2px 9px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-size: .78rem; font-weight: 500; white-space: nowrap;
}
.hand__kept {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 7px;
  border: 2.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--cream);
  font-size: .78rem; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.hand__kept .ic { width: 14px; height: 14px; color: var(--tomato); }
.hand__kept b { font-weight: 500; color: var(--sun); }
.hand__kept.is-bump { animation: bump .45s var(--bounce); }
.hand__tools { display: flex; align-items: center; gap: 8px; }
.hand__arrow { display: none; }
.hand__play {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 14px;
  border: var(--line); border-radius: 999px; background: var(--c); color: var(--c-fg);
  box-shadow: 0 3px 0 var(--ink); font-weight: 750; font-size: .9rem; line-height: 1.15; white-space: nowrap; text-decoration: none;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.hand__play .ic { width: 18px; height: 18px; transition: transform .25s var(--bounce); }
.hand__play:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.hand__play:hover .ic { transform: translateX(3px); }
.hand__play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* the row bleeds into the page gutter so cards slide out of view at the edge, never the page */
.hand__row {
  --stay-w: clamp(220px, 72vw, 270px);
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: var(--stay-w); gap: 14px;
  margin: 2px calc(-1 * var(--gutter)) 0; padding: 6px var(--gutter) 18px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.stay { position: relative; min-width: 0; scroll-snap-align: start; }
.stay__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  border: var(--line); border-radius: 20px; background: var(--paper); overflow: hidden;
  box-shadow: 0 5px 0 var(--ink); transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.stay__link:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 8px 0 var(--ink); }
.stay:nth-child(even) .stay__link:hover { transform: translateY(-3px) rotate(.6deg); }
.stay__link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.stay__photo { position: relative; display: block; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky); border-bottom: var(--line); }
.stay__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stay__price {
  position: absolute; left: 9px; bottom: 10px; transform: rotate(-3deg); padding: 2px 9px 3px; font-size: .78rem; font-weight: 700;
  border: 2.5px solid var(--ink); border-radius: 11px; background: var(--sun); box-shadow: 0 3px 0 var(--ink);
}
.stay__price b { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.stay__body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 13px 14px; min-width: 0; }
.stay__type { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.stay__name {
  font-size: 1.05rem; font-weight: 800; line-height: 1.1; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.stay__where { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stay__meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: .78rem; font-weight: 700; min-width: 0; }
.stay__meta > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stay__meta .mono { font-weight: 400; color: var(--muted); }
.stay__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 11px; }
.stay__tags .tag { font-size: .7rem; padding: 2px 8px; }
html:not(.js) .stay__keep { display: none; }

.stay__more {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; min-height: 250px;
  padding: 18px 18px 20px; border: 3px dashed var(--ink); border-radius: 20px; background: var(--paper);
  text-decoration: none; transition: transform .12s ease-out;
}
.stay__more:hover { transform: translateY(-3px) rotate(.6deg); border-style: solid; }
.stay__more-coin {
  width: 56px; height: 56px; margin-bottom: auto; border-radius: 50%; overflow: hidden;
  border: var(--line); background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.stay__more-coin img { width: 100%; height: 100%; object-fit: cover; }
.stay__more-num { font-size: 2.6rem; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.stay__more-text { font-weight: 700; line-height: 1.2; max-width: 17ch; }
.stay__more-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 12px 6px 14px;
  border: var(--line); border-radius: 999px; background: var(--c); color: var(--c-fg);
  box-shadow: 0 3px 0 var(--ink); font-weight: 750; font-size: .9rem; white-space: nowrap;
}
.stay__more-go .ic { width: 18px; height: 18px; }

@media (max-width: 479px) {
  .hand__play-x { display: none; }
  .hand__play { padding: 7px 10px 7px 13px; }
  .hand__coin { width: 40px; height: 40px; }
  .hand__head { gap: 10px; }
}
@media (min-width: 760px) {
  .hands { padding-top: 36px; }
  .hand { margin-top: 28px; }
  .hands__head + .hand { margin-top: 22px; }
  .hand__row { --stay-w: 250px; gap: 16px; }
  /* the ‹ › buttons take over from the scrollbar */
  .js .hand__row { scrollbar-width: none; padding-bottom: 16px; }
  .js .hand__row::-webkit-scrollbar { display: none; }
  .js .hand__arrow {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: var(--line); border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--ink);
    transition: transform .08s ease-out, box-shadow .08s ease-out, opacity .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .hand__arrow .ic { width: 20px; height: 20px; transform: rotate(90deg); }
  .hand__arrow[data-dir="1"] .ic { transform: rotate(-90deg); }
  .hand__arrow:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); background: var(--c); color: var(--c-fg); }
  .hand__arrow:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
  .hand__arrow:disabled { cursor: default; opacity: .35; transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
  .hand__tools .hand__play { margin-left: 4px; }
}

/* the scoreboard now closes the page, after the rows */
.hands + .scores { padding-top: 48px; }

/* ==========================================================================
   COUNTRY — deck page
   ========================================================================== */
.page-country { padding-bottom: 96px; }

/* game tokens (country switcher) */
.topbar--deck .topbar__inner { flex-wrap: wrap; row-gap: 4px; }
.tokens { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
.tokens::-webkit-scrollbar { display: none; }
.tokens__row { list-style: none; display: flex; justify-content: center; gap: 5px; padding: 12px 4px 4px; min-width: max-content; margin: 0 auto; }
.token {
  display: grid; justify-items: center; gap: 5px; text-decoration: none; border-radius: 12px; padding: 2px;
  -webkit-tap-highlight-color: transparent;
}
.token__coin {
  display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  border: var(--line); background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .15s var(--bounce), box-shadow .15s;
}
.token__coin img { width: 100%; height: 100%; object-fit: cover; }
.token__code { font-family: var(--mono); font-size: .66rem; font-weight: 500; line-height: 1; padding: 2px 4px; border-radius: 5px; }
.token:hover .token__coin { transform: translateY(-3px); box-shadow: 0 6px 0 var(--ink); }
.token[aria-current="page"] .token__coin {
  width: 40px; height: 40px; margin-top: -6px;
  transform: translateY(-4px); box-shadow: 0 0 0 3px var(--sun), 0 0 0 5.5px var(--ink), 0 10px 0 3px var(--ink);
}
.token[aria-current="page"] .token__code { background: var(--ink); color: var(--sun); margin-top: 9px; }
.spin-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem;
  padding: 7px 12px; border: var(--line); border-radius: 999px; background: var(--sun);
  box-shadow: 0 3px 0 var(--ink); text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.spin-link:hover .ic { transform: rotate(90deg); }
.spin-link .ic { transition: transform .4s var(--bounce); }
.spin-link:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* intro */
.country { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.intro {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px;
  padding: 20px 0 18px;
}
.intro__coin {
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
  border: var(--line); box-shadow: 0 5px 0 var(--ink); background: var(--paper);
}
.intro__coin img { width: 100%; height: 100%; object-fit: cover; }
.intro__text { display: grid; gap: 4px; min-width: 0; }
.intro .eyebrow { display: block; }
.intro__title { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.intro__sub {
  display: inline-block; vertical-align: middle; font-size: clamp(.85rem, 1.6vw, 1.05rem); letter-spacing: 0; font-weight: 700;
  padding: 4px 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper);
  transform: rotate(-2deg) translateY(-4px);
}
.intro__facts { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fact {
  display: flex; align-items: baseline; gap: 6px; padding: 5px 12px;
  border: var(--line); border-radius: 12px; box-shadow: 0 3px 0 var(--ink);
}
.fact span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fact b { font-family: var(--mono); font-weight: 500; font-size: 1rem; }
.fact--sun { background: var(--sun); }
.fact--mint { background: var(--mint); }
.fact--sky { background: var(--sky); }

/* layout */
.layout { display: grid; gap: 18px; align-items: start; }
.layout > * { min-width: 0; }

/* settings */
.setup__toggle {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: var(--line); border-radius: 18px; background: var(--paper);
  box-shadow: 0 4px 0 var(--ink); text-align: left;
}
.setup__toggle .ic { width: 22px; height: 22px; }
.setup__label { font-weight: 800; }
.setup__summary { flex: 1; min-width: 0; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup__chev { transition: transform .2s; }
.setup.is-open .setup__chev { transform: rotate(180deg); }
.settings {
  display: grid; gap: 16px; margin-top: 12px; padding: 18px;
  border: var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 6px 0 var(--ink);
}
.settings__title { display: none; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.settings__title .ic { width: 24px; height: 24px; padding: 3px; border: 2.5px solid var(--ink); border-radius: 8px; background: var(--sun); box-sizing: content-box; }
.field { display: grid; gap: 7px; }
.field__label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 750; font-size: .9rem; padding: 0; }
.field__out { font-family: var(--mono); font-weight: 500; background: var(--ink); color: var(--sun); padding: 1px 8px; border-radius: 7px; font-size: .85rem; }
.select { position: relative; display: block; }
.select select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 11px 40px 11px 13px; border: var(--line); border-radius: 14px; background: var(--cream);
  font-weight: 600; font-size: .95rem; cursor: pointer;
}
.select .ic { position: absolute; right: 13px; top: 50%; translate: 0 -50%; pointer-events: none; width: 18px; height: 18px; }
.range { width: 100%; height: 30px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 14px; border: var(--line); border-radius: 999px; background: var(--cream); }
.range::-moz-range-track { height: 8px; border: var(--line); border-radius: 999px; background: var(--cream); }
.range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--grape); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px;
  border: var(--line); border-radius: 50%; background: var(--sun); box-shadow: 0 3px 0 var(--ink);
}
.range::-moz-range-thumb { width: 22px; height: 22px; border: var(--line); border-radius: 50%; background: var(--sun); box-shadow: 0 3px 0 var(--ink); }
.range:focus-visible { outline-offset: 4px; border-radius: 999px; }
.range__ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.sorts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sorts legend { margin-bottom: 7px; width: 100%; }
.sort { position: relative; display: block; }
.sort input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sort span {
  display: grid; place-items: center; min-height: 46px; padding: 6px 8px; text-align: center;
  border: var(--line); border-radius: 14px; background: var(--cream);
  font-weight: 700; font-size: .85rem; line-height: 1.15;
  box-shadow: 0 4px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s;
}
.sort input:checked + span { background: var(--grape); color: #fff; transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.sort input:focus-visible + span { outline: 3px solid var(--grape); outline-offset: 3px; }
.sort:hover input:not(:checked) + span { background: #fff0d4; }
.settings__count { font-weight: 600; font-size: .95rem; }
.settings__count b { font-family: var(--mono); font-weight: 500; background: var(--mint); border: 2.5px solid var(--ink); border-radius: 7px; padding: 0 6px; }
.settings__count.is-empty b { background: var(--tomato); }
.settings__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.settings__actions .btn--sun { flex: 1; }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mode { display: inline-flex; padding: 4px; gap: 4px; border: var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); }
.mode__btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px;
  border: 0; border-radius: 999px; background: transparent; font-weight: 750; font-size: .92rem;
}
.mode__btn .ic { width: 18px; height: 18px; }
.mode__btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.mode__btn[aria-pressed="false"]:hover { background: #fff0d4; }
.progress { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.progress__nums b { font-weight: 500; }
.progress__bar { width: 110px; height: 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.progress__bar span { display: block; height: 100%; background: var(--grape); border-right: 2.5px solid var(--ink); transition: width .3s var(--snap); min-width: 6px; }

/* deck */
.deckview { display: grid; justify-items: center; }
.deck {
  --peek: 30px;
  --deck-h: min(64vh, 560px);
  position: relative; width: min(100%, 440px); height: var(--deck-h); min-height: 380px;
  touch-action: pan-y;
}
@supports (height: 1svh) { .deck { --deck-h: min(64svh, 560px); } }
.card {
  --keep: 0; --skip: 0;
  position: absolute; inset: 0 0 var(--peek) 0;
  display: flex; flex-direction: column;
  border: var(--line); border-radius: 28px; background: var(--paper);
  box-shadow: 0 6px 0 var(--ink);
  overflow: hidden; isolation: isolate;
  transform-origin: 50% 100%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab;
  transition: transform .4s var(--bounce);
}
.card[data-depth="0"] { z-index: 3; }
.card[data-depth="1"] {
  z-index: 2; pointer-events: none;
  transform: translateY(calc(var(--peek) * .5 * (1 - var(--pull, 0)))) scale(calc(.95 + .05 * var(--pull, 0))) rotate(calc(2deg * (1 - var(--pull, 0))));
}
.card[data-depth="2"] { z-index: 1; pointer-events: none; transform: translateY(var(--peek)) scale(.9) rotate(-2.5deg); }
.card[data-depth="1"] .card__panel, .card[data-depth="2"] .card__panel { visibility: visible; }
.card.is-dragging { transition: none; cursor: grabbing; }
.deck.is-pulling .card[data-depth="1"] { transition: none; }
.card.is-new { animation: appear .4s var(--snap) both; }
@keyframes appear { from { opacity: 0; scale: .86; } }
.card.is-leaving { z-index: 5; pointer-events: none; }
.card__photo { position: relative; flex: 1 1 auto; min-height: 0; background: var(--sky); }
.card__photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card__panel { position: relative; flex: none; padding: 18px 18px 16px; border-top: var(--line); background: var(--paper); }
.price-chip {
  position: absolute; right: 14px; top: 0; transform: translateY(-62%) rotate(-4deg);
  display: flex; align-items: baseline; gap: 3px; padding: 4px 12px 6px;
  border: var(--line); border-radius: 16px; background: var(--sun); box-shadow: 0 4px 0 var(--ink);
}
.price-chip b { font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.price-chip span { font-size: .8rem; font-weight: 700; }
.card__type { padding-right: 130px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); display: flex; align-items: center; min-height: 18px; }
.card__name {
  margin-top: 6px; font-size: clamp(1.3rem, 4.6vw, 1.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -.025em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.card__name--long { font-size: clamp(1.1rem, 3.8vw, 1.3rem); }
.card__where { margin-top: 3px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__score { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.card__word { display: grid; font-weight: 750; line-height: 1.15; }
.card__word small { font-family: var(--mono); font-size: .76rem; font-weight: 400; color: var(--muted); }
.card .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-height: 26px; overflow: hidden; }
.stamp {
  position: absolute; z-index: 4; top: 22px;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 8px;
  border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink);
  font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  pointer-events: none;
}
.stamp .ic { width: .85em; height: .85em; }
.stamp--keep { left: 18px; background: var(--mint); opacity: var(--keep); transform: rotate(-12deg) scale(calc(.7 + .3 * var(--keep))); }
.stamp--skip { right: 18px; background: var(--tomato); opacity: var(--skip); transform: rotate(12deg) scale(calc(.7 + .3 * var(--skip))); }
.card__kept {
  position: absolute; z-index: 3; left: 14px; bottom: auto; top: 14px;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-size: .78rem; font-weight: 750; box-shadow: 0 3px 0 var(--ink);
}
.card__kept .ic { color: var(--tomato); width: 16px; height: 16px; }
.deck.is-dealing { animation: riffle .5s ease-out; }
.deck.is-dealing .card { animation: deal .55s var(--bounce) both; }
.deck.is-dealing .card[data-depth="1"] { animation-delay: .07s; }
.deck.is-dealing .card[data-depth="0"] { animation-delay: .14s; }
@keyframes deal {
  0% { translate: -40px -90px; rotate: -16deg; opacity: 0; }
  70% { opacity: 1; }
  100% { translate: 0 0; rotate: 0deg; opacity: 1; }
}
@keyframes riffle {
  20% { translate: -8px 0; }
  40% { translate: 8px 0; }
  60% { translate: -4px 0; }
  80% { translate: 3px 0; }
}
.deck__end {
  position: absolute; inset: 0 0 var(--peek) 0; z-index: 0;
  display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center;
  border: 3px dashed var(--ink); border-radius: 28px; background: var(--paper);
}
.deck__end-kicker {
  font-family: var(--mono); font-size: .85rem; padding: 3px 10px; border-radius: 8px; background: var(--ink); color: var(--sun);
}
.deck__end-title { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
.deck__end-text { color: var(--ink-2); max-width: 30ch; }
.deck__end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

.actions { display: flex; justify-content: center; align-items: flex-start; gap: clamp(18px, 6vw, 30px); margin-top: 18px; }
.act {
  position: relative; display: grid; place-items: center;
  width: 70px; height: 70px; padding: 0; margin-bottom: 22px;
  border: var(--line); border-radius: 50%; background: var(--paper);
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.act .ic { width: 32px; height: 32px; }
.act span {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  font-size: .78rem; font-weight: 750; white-space: nowrap;
}
.act:hover { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 8px 0 var(--ink); }
.act:active, .act.is-hit { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.act--skip { background: var(--tomato); }
.act--keep { background: var(--mint); }
.act--undo { width: 52px; height: 52px; margin-top: 9px; background: var(--sun); box-shadow: 0 5px 0 var(--ink); }
.act--undo .ic { width: 24px; height: 24px; }
.act:disabled { cursor: not-allowed; background: #efe6d8; color: #9a9086; transform: none; box-shadow: 0 3px 0 #9a9086; border-color: #9a9086; }
.act:disabled span { color: var(--muted); }
.btn--open { margin-top: 4px; }
.btn--open.is-off { visibility: hidden; }

/* browse grid */
.browse__count { font-weight: 600; margin-bottom: 14px; }
.browse__count b { font-family: var(--mono); font-weight: 500; }
.grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.tile { position: relative; }
.tile__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  border: var(--line); border-radius: 20px; background: var(--paper); overflow: hidden;
  box-shadow: 0 5px 0 var(--ink); transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.tile__link:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 8px 0 var(--ink); }
.tile__link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.tile:nth-child(even) .tile__link:hover { transform: translateY(-3px) rotate(.6deg); }
.tile__photo { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--sky); border-bottom: var(--line); }
.tile__photo img { width: 100%; height: 100%; object-fit: cover; }
.tile__price {
  position: absolute; left: 8px; bottom: 10px; transform: rotate(-3deg); padding: 2px 9px 3px; font-size: .78rem; font-weight: 700;
  border: 2.5px solid var(--ink); border-radius: 11px; background: var(--sun); box-shadow: 0 3px 0 var(--ink);
}
.tile__price b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.tile__body { display: grid; gap: 3px; padding: 10px 12px 13px; }
.tile__name {
  font-size: 1rem; font-weight: 800; line-height: 1.1; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.tile__where { font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: .76rem; font-weight: 600; min-width: 0; }
.tile__meta > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__keep, .stay__keep {
  position: absolute; right: 10px; top: 10px; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0; border: var(--line); border-radius: 50%; background: var(--paper);
  box-shadow: 0 3px 0 var(--ink); transition: transform .1s, box-shadow .1s, background .15s;
}
.tile__keep .ic, .stay__keep .ic { width: 22px; height: 22px; color: transparent; stroke: var(--ink); stroke-width: 2.4px; }
.tile__keep:hover, .stay__keep:hover { transform: scale(1.08); }
.tile__keep:active, .stay__keep:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tile__keep[aria-pressed="true"], .stay__keep[aria-pressed="true"] { background: var(--tomato); }
.tile__keep[aria-pressed="true"] .ic, .stay__keep[aria-pressed="true"] .ic { color: var(--paper); }
.browse__more { display: flex; justify-content: center; margin-top: 26px; }

/* view switching (JS on); without JS both views are shown */
.js .browse { display: none; }
.js .is-browse .browse { display: block; }
.js .is-browse .deckview { display: none; }

/* scoreboard aside */
.board { display: none; }
.board__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.board__counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.board__counts .count--sky { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
.count {
  display: grid; gap: 4px; padding: 10px 8px; text-align: center;
  border-radius: 14px; background: var(--ink); color: var(--cream);
}
.count dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.count dd { font-size: 1.45rem; line-height: 1; font-weight: 500; }
.count--mint dd { color: var(--mint); }
.count--tomato dd { color: var(--tomato); }
.count--sky dd { color: var(--sky); }
.board__sub { font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-top: 6px; }
.keys { list-style: none; display: grid; gap: 9px; }
.keys li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; }
.board__tip { font-size: .88rem; color: var(--ink-2); }
.board__ends { font-size: .85rem; line-height: 1.35; }
.board__ends .tag { margin-right: 4px; }

/* keepers tray */
.tray { display: none; }
.js .tray {
  display: block; position: fixed; z-index: 40; left: 0; right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 0 12px; pointer-events: none;
}
.tray__inner { max-width: 760px; margin: 0 auto; pointer-events: auto; }
.tray__open {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 8px 10px 8px 12px; text-align: left;
  border: var(--line); border-radius: 22px; background: var(--ink); color: var(--cream);
  box-shadow: 0 5px 0 var(--tomato), 0 5px 0 3px var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.tray__open:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tomato), 0 2px 0 3px var(--ink); }
.tray__open:focus-visible { outline-color: var(--sun); }
.tray__heart {
  position: relative; flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--tomato); border: 2.5px solid var(--cream); color: var(--ink);
}
.tray__heart .ic { width: 22px; height: 22px; }
.tray__badge {
  position: absolute; right: -8px; top: -8px; min-width: 24px; height: 24px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; border: 2.5px solid var(--ink);
  background: var(--sun); color: var(--ink); font-size: .78rem; font-weight: 500;
}
.tray__badge.is-bump { animation: bump .45s var(--bounce); }
@keyframes bump { 30% { transform: scale(1.6) rotate(-10deg); } }
.tray__label { display: grid; line-height: 1.15; min-width: 0; flex: 0 1 auto; }
.tray__label b { font-size: 1rem; }
.tray__label span { font-size: .78rem; color: #d8cfc2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray__thumbs { flex: 1; display: flex; justify-content: flex-end; min-width: 0; overflow: hidden; padding-left: 12px; }
.tray__thumbs img, .tray__more {
  flex: none; width: 40px; height: 40px; margin-left: -12px; border-radius: 50%;
  border: 2.5px solid var(--cream); object-fit: cover; background: var(--board-2);
}
.tray__thumbs img.is-new { animation: thumbin .5s var(--bounce); }
@keyframes thumbin { 0% { transform: translateY(-30px) scale(.4); } }
.tray__more { display: grid; place-items: center; font-family: var(--mono); font-size: .75rem; background: var(--sun); color: var(--ink); }
.tray__cta {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px;
  border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 750; font-size: .88rem;
}
.tray__cta .ic { transform: rotate(180deg); width: 18px; height: 18px; }
.tray.is-empty .tray__heart { background: var(--board-2); color: var(--cream); }

/* keepers sheet */
.sheet {
  width: min(100%, 680px); max-width: 100%; max-height: min(86vh, 900px);
  margin: auto auto 0; padding: 0;
  border: var(--line); border-bottom: 0; border-radius: 28px 28px 0 0;
  background: var(--cream); color: var(--ink);
  overflow: auto; overscroll-behavior: contain;
}
.sheet[open] { animation: sheetup .35s var(--snap); }
@keyframes sheetup { from { transform: translateY(40%); opacity: .4; } }
.sheet::backdrop { background: rgba(27, 23, 18, .55); }
.sheet__head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px 20px; background: var(--cream); border-bottom: var(--line);
}
.sheet__title { flex: 1; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.sheet__count { font-size: .95rem; font-weight: 500; background: var(--tomato); border: 2.5px solid var(--ink); border-radius: 9px; padding: 0 8px; }
.sheet__close {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; flex: none;
  border: var(--line); border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--ink);
}
.sheet__close .ic { width: 18px; height: 18px; }
#sheet-clear.is-armed { --btn-bg: var(--tomato); }
.sheet__sub { padding: 12px 20px 0; font-size: .85rem; color: var(--muted); font-weight: 600; }
.keepers { list-style: none; display: grid; gap: 10px; padding: 12px 16px 24px; }
.keeper {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 10px; border: var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.keeper img { grid-row: span 2; width: 68px; height: 68px; border-radius: 14px; border: 2.5px solid var(--ink); object-fit: cover; }
.keeper__name { font-weight: 800; line-height: 1.1; font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.keeper__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.keeper__price { font-weight: 800; font-size: 1rem; color: var(--ink); background: var(--sun); border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; }
.keeper__actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.keeper__remove {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: var(--line); border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--ink);
}
.keeper__remove .ic { width: 16px; height: 16px; }
.sheet__empty { padding: 28px 20px 36px; text-align: center; font-weight: 600; color: var(--ink-2); }

/* ---------- country page breakpoints ---------- */
@media (max-width: 759px) {
  .js .setup:not(.is-open) .settings { display: none; }
  .tray__label span { display: none; }
}
@media (max-width: 599px) {
  .topbar__inner { padding-top: 10px; padding-bottom: 8px; }
  .logo { font-size: 1.3rem; }
  .logo__mark { width: 36px; height: 36px; }
  .tokens__row { gap: 4px; padding-top: 10px; }
  .token { padding: 0; }
  .token__code { display: none; }
  .token__coin { width: 30px; height: 30px; }
  .token[aria-current="page"] .token__coin { width: 38px; height: 38px; margin-top: -4px; }
  .intro { padding: 16px 0 14px; gap: 10px 12px; }
  .intro__coin { width: 46px; height: 46px; box-shadow: 0 4px 0 var(--ink); }
  .intro__sub { display: none; }
  .intro .eyebrow { font-size: .7rem; letter-spacing: .05em; }
  .intro__facts { gap: 6px; }
  .fact { padding: 3px 8px; gap: 5px; }
  .fact span { font-size: .66rem; }
  .fact b { font-size: .92rem; }
}
@media (max-width: 420px) {
  .mode__btn .ic { display: none; }
  .spin-link span { display: none; }
  .spin-link { padding: 8px; }
  .progress { gap: 8px; }
  .progress__bar { width: 52px; }
  .mode__btn { padding: 6px 12px; }
  .card__panel { padding: 16px 14px 14px; }
  .card__type { padding-right: 112px; }
}
@media (min-width: 560px) {
  .intro { grid-template-columns: auto 1fr auto; }
  .intro__coin { width: 72px; height: 72px; }
  .intro__facts { grid-column: auto; }
  .keeper { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .keeper img { width: 76px; height: 76px; }
  .keeper__actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; flex-direction: column; align-items: flex-end; }
}
@media (min-width: 760px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
  .setup { position: sticky; top: 16px; }
  .setup__toggle { display: none; }
  .settings { margin-top: 0; }
  .settings__title { display: flex; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
  /* cap the card so the deck and its Skip / Keep buttons fit one desktop screen, above the keepers tray */
  .deck { --deck-h: min(70vh, 640px, max(440px, calc(100vh - 480px))); }
  @supports (height: 1svh) { .deck { --deck-h: min(70svh, 640px, max(440px, calc(100svh - 480px))); } }
  .sheet { margin-bottom: auto; border-bottom: var(--line); border-radius: 28px; max-height: min(84vh, 860px); }
}
@media (min-width: 900px) {
  .tokens { order: 0; width: auto; flex: 1; margin: 0; }
  .tokens__row { padding: 10px 4px 2px; gap: 7px; }
  .token__coin { width: 36px; height: 36px; }
  .token[aria-current="page"] .token__coin { width: 44px; height: 44px; }
}
@media (min-width: 1100px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr) 250px; }
  .board {
    position: sticky; top: 16px; display: grid; gap: 14px;
    padding: 18px; border: var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 6px 0 var(--ink);
  }
  .is-browse .board { display: none; }
  .is-browse .stage { grid-column: 2 / 4; }
  .is-browse .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* wide screens: the buttons flank the card (Skip + Undo left, Keep + Open right), so the card itself can stand taller */
@media (min-width: 1280px) {
  .deckview { grid-template-columns: minmax(70px, 1fr) minmax(0, 440px) minmax(70px, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 22px; }
  .deck { grid-column: 2; grid-row: 1 / 4; width: 100%; --deck-h: min(70vh, 640px, max(460px, calc(100vh - 390px))); }
  @supports (height: 1svh) { .deck { --deck-h: min(70svh, 640px, max(460px, calc(100svh - 390px))); } }
  .actions { display: contents; }
  .act { margin-bottom: 0; }
  .act--skip { grid-column: 1; grid-row: 2; justify-self: end; }
  .act--keep { grid-column: 3; grid-row: 2; justify-self: start; }
  .act--undo { grid-column: 1; grid-row: 3; align-self: start; justify-self: end; margin: 44px 9px 0 0; }
  .btn--open {
    grid-column: 3; grid-row: 3; align-self: start; justify-self: start; position: relative;
    width: 52px; height: 52px; min-height: 0; padding: 0; margin: 44px 0 0 9px; justify-content: center;
    border-radius: 50%; font-size: 0; box-shadow: 0 5px 0 var(--ink);
  }
  .btn--open .ic { width: 24px; height: 24px; }
  .btn--open::after {
    content: "Book"; position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
    font-size: .78rem; font-weight: 750; white-space: nowrap;
  }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .prize__confetti { display: none; }
  .bulb { animation: none; }
}