/* Combo Cards — visual language taken from the printed flyer, not invented.
   The card art gives us: a violet star field, a chrome-blue bevelled title banner,
   chunky outlined display lettering, and glossy 3D bevelled symbols. Everything
   below is derived from those four things.

   Type: Titan One for display, because the flyer's wordmark is a heavy rounded
   face with a hard outline, and Barlow for body, a squared-off grotesque that
   stays legible small on a phone in a loud, bright hall. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Luckiest+Guy&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  /* the flyer's nebula, sampled dark to light */
  --void: #060A1F; --deep: #0D1440; --nebula: #241A5C;
  --panel-hi: #3D5AA6; --panel-lo: #141F4C;

  /* its display yellow, and the near-black it is outlined in */
  --gold: #FFC63C; --gold-deep: #B87400; --outline: #080614;
  --cream: #F2F6FF; --dim: #93A6D4;

  /* the 3D symbols, sampled off the card. Saturated and toylike, not muted UI ink. */
  --s-x: #43C6E8; --s-o: #EE4A55; --s-square: #C862D8;
  --s-triangle: #5FCB4E; --s-start: #E8E4D8; --s-other: #8C93B5;

  /* three faces, three jobs, all read off the flyer: Fredoka is the rounded
     geometric of the "Combo Cards" wordmark, Luckiest Guy is the chunky outlined
     gold display, Barlow carries the reading text. */
  --wordmark: 'Fredoka', system-ui, sans-serif;
  --display: 'Luckiest Guy', system-ui, sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* star field, so the page sits in the same sky as the flyer */
html {
  background:
    radial-gradient(1.4px 1.4px at 18% 12%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 28%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 8%,  rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 46%, rgba(255,255,255,.32) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 62%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 74%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(58% 34vh at 30% 12%, rgba(96,126,232,.30) 0%, transparent 70%),
    radial-gradient(46% 26vh at 74% 30%, rgba(150,110,224,.26) 0%, transparent 72%),
    radial-gradient(70% 40vh at 12% 54%, rgba(70,96,208,.22) 0%, transparent 70%),
    radial-gradient(52% 30vh at 88% 72%, rgba(126,92,206,.22) 0%, transparent 72%),
    radial-gradient(120% 55vh at 22% 0%, var(--nebula) 0%, transparent 60%),
    radial-gradient(140% 70vh at 88% 14%, #1B2E7A 0%, transparent 55%),
    var(--void);
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat,
                     no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 380px 420px, 300px 340px, 460px 500px, 260px 300px, 340px 380px, 420px 460px,
                   100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, auto;
}
body { color: var(--cream); font-family: var(--body); line-height: 1.45; min-height: 100vh;
       -webkit-text-size-adjust: 100%; }
.wrap { max-width: 620px; margin: 0 auto; padding: 22px 16px 60px; }

/* ---- the sky: drifting symbols and a comet, behind everything ---- */

.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* readability wins over atmosphere on a phone in a bright hall, and the staff view
   is a tool someone uses fifty times an hour, so it gets the quietest sky of all */
@media (max-width: 620px) { .drift { opacity: .12 !important; } .comet { opacity: .3; } }
.staff .drift { opacity: .1 !important; }
.staff .comet { display: none; }
.drift { position: absolute; filter: drop-shadow(0 0 10px currentColor); }
.comet {
  position: absolute; right: 6%; bottom: 16%; width: 190px; height: 2px; rotate: 26deg;
  background: linear-gradient(90deg, transparent, rgba(255,190,150,.75));
  border-radius: 2px; opacity: .5;
}
.comet::after { content: ''; position: absolute; right: -3px; top: -2.5px; width: 7px; height: 7px;
  border-radius: 50%; background: #FFE8D2; box-shadow: 0 0 14px 4px rgba(255,170,120,.85); }
.wrap { position: relative; }

/* ---- masthead: the flyer's chrome banner ---- */

.presents { font-family: var(--body); font-weight: 600; font-size: 11px; letter-spacing: .34em;
            text-transform: uppercase; color: var(--dim); text-align: center; }
.banner {
  margin: 10px 0 0; padding: 12px 18px 14px; border-radius: 8px; text-align: center;
  background:
    linear-gradient(180deg, #E8F1FF 0%, #9DB6DC 6%, #2F5AB8 22%,
                            #1B7FD4 50%, #21407F 82%, #A9BEDE 95%, #E8F1FF 100%);
  box-shadow: 0 5px 16px -6px #000;
}
h1 { font-family: var(--wordmark); font-weight: 500; font-size: clamp(29px, 8.6vw, 44px);
     line-height: 1.05; color: #fff; letter-spacing: .005em;
     text-shadow: 0 2px 5px rgba(0,0,0,.55), 0 0 22px rgba(150,205,255,.5); }
.tagline { font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
           color: #CFE2FF; margin-top: 9px; }
.rule { text-align: center; font-size: 14px; font-weight: 500; color: var(--gold);
        max-width: 32em; margin: 16px auto 0; text-shadow: 0 1px 0 var(--outline); }
.warn { text-align: center; font-size: 13px; font-weight: 600; color: #FFD3D6;
        border: 2px solid var(--s-o); border-radius: 8px; padding: 8px 12px;
        margin: 14px auto 0; max-width: 32em; background: rgba(238,74,85,.15); }

/* ---- section headings: gold display, like the flyer's "BEGINNER COMBOS" ---- */

section { margin-top: 30px; }
/* Luckiest Guy draws lowercase as small caps, so mixed case reads as a mistake.
   The flyer is all caps throughout anyway. */
h2, .rule, .tagline { text-transform: uppercase; }
h2 { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--gold);
     letter-spacing: .03em; -webkit-text-stroke: .5px var(--outline);
     text-shadow: 0 2px 0 var(--outline), 0 -1.5px 0 var(--outline),
                  1.5px 0 0 var(--outline), -1.5px 0 0 var(--outline), 0 4px 6px rgba(0,0,0,.6); }
.rule, .tagline { font-family: var(--display); font-weight: 400; }
.rule { font-size: 14.5px; letter-spacing: .02em; line-height: 1.35;
        -webkit-text-stroke: .4px var(--outline); }
.tagline { letter-spacing: .12em; font-size: 12.5px; }

/* ---- inset panel: the flyer's combo box ---- */

.panel {
  background: linear-gradient(180deg, rgba(9,14,44,.92), rgba(16,26,72,.92));
  border-radius: 12px; padding: 14px;
  box-shadow: inset 0 0 0 2px rgba(120,160,240,.35), inset 0 3px 10px rgba(0,0,0,.55),
              0 1px 0 rgba(255,255,255,.06);
}

/* ---- the keys. Hero of the page: press them and they physically depress. ---- */

.picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.picker button {
  font: inherit; cursor: pointer; border: 0; color: var(--c); padding: 12px 2px 9px;
  display: grid; gap: 5px; justify-items: center; border-radius: 14px;
  background: linear-gradient(180deg, #2A3C86 0%, #131C4C 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.30), inset 0 -4px 0 rgba(0,0,0,.5), 0 5px 0 #080D2C;
  transition: transform .07s, box-shadow .07s;
}
.picker button:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.5), 0 1px 0 #080D2C;
}
.picker .g { width: clamp(26px, 7.6vw, 34px); height: clamp(26px, 7.6vw, 34px); line-height: 1;
             display: grid; place-items: center;
             filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.picker .g.glyph { font-size: clamp(23px, 7vw, 30px); }
.picker .n { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: #A9BCE8; }
.picker button[data-held]:not([data-held="0"]) .g { text-shadow: 0 0 14px var(--c); }

/* ---- the hand, laid out as cards in a row, which is how the game is played ---- */

.hand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card {
  font: inherit; cursor: pointer; border: 0; width: 50px; height: 68px; border-radius: 7px;
  display: grid; place-items: center; color: var(--c); font-size: 25px; position: relative;
  padding: 12px;
  background: linear-gradient(165deg, #253670 0%, #0E1640 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.45),
              0 3px 0 #070B24, 0 6px 12px -5px #000;
}
.card:active { transform: translateY(2px); }
.card::after { content: '✕'; position: absolute; top: 3px; right: 5px; font-size: 9px;
               color: rgba(255,255,255,.3); }
.card.ghost { background: none; box-shadow: inset 0 0 0 2px rgba(147,166,212,.35);
              color: var(--dim); font-size: 20px; cursor: default; }
.card.ghost::after { content: none; }
.empty { color: var(--dim); font-size: 14px; }

/* ---- prize rows ---- */

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
button.mini { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
              background: rgba(147,166,212,.12); border: 0; border-radius: 7px;
              color: var(--dim); padding: 7px 13px; }
button.mini:hover { color: var(--cream); }

.prize { display: flex; align-items: center; gap: 11px; padding: 11px 0;
         border-bottom: 1px solid rgba(120,160,240,.18); }
.prize:last-child { border-bottom: 0; }
.prize .nm { flex: 1; min-width: 0; }
.prize .nm b { font-weight: 700; font-size: 15.5px; display: block; }
.win .nm b { color: var(--gold); }
.combo { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center;
         font-size: 15px; line-height: 1; margin-top: 3px; }
/* on the flyer every symbol sits inside a button ring, PlayStation-style */
.chip { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em;
        color: var(--c, var(--cream)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.chip svg, .card svg, .picker .g svg { width: 100%; height: 100%; display: block; }
/* only names with no drawn icon keep the typographic ring */
.chip.glyph { border: 1.5px solid currentColor; border-radius: 50%; font-size: .78em; }
.chip.want svg circle:first-child { stroke-dasharray: 3 2.6; opacity: 1; }
/* the gap reads as an empty socket: same ring, drawn dashed */


.take { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
        background: linear-gradient(180deg, #FFD96E, #E9A200); color: #3A2200; border: 0;
        border-radius: 8px; padding: 8px 15px; box-shadow: 0 3px 0 #8A5600; }
.take:active { transform: translateY(2px); box-shadow: 0 1px 0 #8A5600; }
.value { font-weight: 700; font-size: 13px; color: var(--gold); white-space: nowrap; }
.needs { font-size: 13px; color: var(--dim); white-space: nowrap; display: flex;
         align-items: center; gap: 3px; }
.cost { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.banner-note { color: var(--gold); font-size: 13px; font-weight: 500; padding-bottom: 10px;
               border-bottom: 1px solid rgba(120,160,240,.18); margin-bottom: 4px; }
.hint { color: var(--dim); font-size: 13.5px; margin-top: 6px; }

.pending { margin: -2px 0 10px; }
/* amber, not red: this is "not real yet", not "danger" */
.warn.example { color: var(--gold); border-color: var(--gold); background: rgba(255,198,60,.1);
                font-weight: 500; }
.cost.fake, .odds.fake { font-style: italic; opacity: .85; }
.odds { font-size: 12.5px; color: var(--s-triangle); white-space: nowrap;
        min-width: 3.4em; text-align: right; }

/* ---- the combo list ----
   Set the way the flyer sets it: combo on the left, dotted leader, prize on the
   right. The leader is the flyer's one real structural device and it earns its
   place, because it is what maps a combo to what it is worth. */

.combos.panel {
  padding: 12px 14px;
  box-shadow: inset 0 0 0 2px rgba(190,215,255,.55), inset 0 0 0 5px rgba(30,52,120,.9),
              inset 0 4px 14px rgba(0,0,0,.5), 0 4px 14px -6px #000;
}
.line { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 5px; }
/* a combo never wraps: it is one code and breaking it mid-way reads as two codes */
.line .combo { margin-top: 0; flex: none; flex-wrap: nowrap; }
.lead { flex: 1 1 16px; min-width: 16px; align-self: center;
        border-bottom: 2px dotted rgba(178,201,244,.5); }
.pn { flex: 0 1 auto; font-size: 14.5px; font-weight: 500; text-align: right;
      text-wrap: balance; }
.line .value { margin-left: 2px; }
.line .cost { margin-left: 6px; }
.line.hit { background: rgba(255,198,60,.13); box-shadow: inset 0 0 0 1px rgba(255,198,60,.45); }
.line.hit .pn { color: var(--gold); font-weight: 700; }

/* Two columns only once each one has real room. Below that a single column beats
   a cramped pair. Long codes span the full width and centre, which is exactly what
   the printed flyer does with the Ray Gun. */
/* The leader row needs room for chips, a leader, a name and up to three figures.
   Below that it stops being a row and starts being a wreck: names break mid-phrase
   and the dots shrink to a stub. So stack it, combo above, name and figures below,
   and drop the leader since it has nothing left to lead across. */
@media (max-width: 640px) {
  .line { flex-wrap: wrap; row-gap: 3px; padding: 8px 4px; }
  .line > span:first-child { flex: 1 0 100%; }
  .line .lead { display: none; }
  .pn { flex: 1 1 auto; text-align: left; }
}

@media (min-width: 900px) {
  /* the widest element on the page, as it is on the flyer. Breaks out of the
     620px reading column, because two columns inside 620px is not two columns. */
  .combos.panel { width: min(940px, calc(100vw - 40px)); margin-left: 50%;
                  transform: translateX(-50%);
                  display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .line.wide { grid-column: 1 / -1; justify-content: center; }
  .line.wide .lead { flex: 0 1 90px; }
}

/* ---- review-only switch. Delete with the losing branch once Dylan picks. ---- */

.review { position: sticky; bottom: 0; margin: 34px -16px -60px; padding: 11px 16px 18px;
          background: rgba(6,10,31,.95); box-shadow: 0 -1px 0 rgba(120,160,240,.3);
          backdrop-filter: blur(8px); }
.review .lbl { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #6B7CAE;
               text-transform: uppercase; margin-bottom: 8px; }
.review .opts { display: flex; gap: 8px; }
.review button { flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
                 padding: 9px 8px; background: #131C4C; color: #B9CBF2; border: 0;
                 border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(120,160,240,.3); }
.review button[aria-pressed="true"] { background: #3D5AA6; color: #fff;
                                      box-shadow: inset 0 0 0 1.5px #9FC4F5; }

/* ---- staff view is a tool, not a shopfront: quieter, denser ---- */

.staff .banner { background: linear-gradient(180deg, #6E7FA8 0%, #2E3C68 45%, #131A3E 100%); }
.staff section { margin-top: 22px; }
.staff .prize { padding: 9px 0; }

/* ---- floor ---- */

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
[hidden] { display: none !important; }