/* ============================================================
   RHEUM HEADS UP — "Tar Heel Arcade"
   UNC Chapel Hill: Carolina Blue + Navy, argyle attract-mode,
   arcade typography, juicy game feedback.
   ============================================================ */
:root{
  --carolina:#4B9CD3;
  --carolina-lt:#7BAFD4;
  --carolina-glow:#56B6E8;
  --navy:#13294B;
  --navy-2:#1b3666;
  --navy-deep:#0a1730;
  --white:#ffffff;
  --ink:#eaf2ff;
  --ink-dim:#9fb4d8;
  --line:#284673;
  --amber:#F0A93B;
  --amber-deep:#7a5012;
  --got:#56B6E8;
  --pass:#F0A93B;
  --radius:18px;
  --shadow:0 16px 44px rgba(0,0,0,.5);
  --neon: 0 0 12px rgba(86,182,232,.55), 0 0 30px rgba(75,156,211,.3);
  --font-pixel:"Press Start 2P", monospace;
  --font-display:"Bungee", system-ui, sans-serif;
  --font-term:"Russo One", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #1c3a66 0%, var(--navy-deep) 60%),
    var(--navy-deep);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* ---- argyle attract-mode field ---- */
body::before{
  content:"";position:fixed;inset:-25% -25% -25% -25%;z-index:-3;
  background-color:transparent;
  background-image:
    linear-gradient(135deg, rgba(75,156,211,.10) 25%, transparent 25%),
    linear-gradient(225deg, rgba(75,156,211,.10) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(123,175,212,.07) 25%, transparent 25%),
    linear-gradient(315deg, rgba(123,175,212,.07) 25%, transparent 25%),
    repeating-linear-gradient(45deg, rgba(123,175,212,.10) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(-45deg, rgba(123,175,212,.10) 0 1px, transparent 1px 72px);
  background-size:72px 72px,72px 72px,72px 72px,72px 72px,auto,auto;
  background-position:0 0,36px 0,36px -36px,0 36px,0 0,0 0;
  opacity:.6;
  animation:argyle 50s linear infinite;
}
@keyframes argyle{from{transform:translateY(0)}to{transform:translateY(72px)}}
/* ---- neon aurora ---- */
.bg-aurora{
  position:fixed;left:50%;top:-10%;width:120vw;height:60vh;transform:translateX(-50%);
  z-index:-2;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 30%, rgba(86,182,232,.28), transparent 70%);
  filter:blur(20px);animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
/* ---- CRT scanlines + vignette ---- */
.bg-scanlines{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.35;
}
.bg-scanlines::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
#app{height:100dvh;width:100vw;position:relative;z-index:1}

/* ============== SCREEN SYSTEM (phase in/out) ============== */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px) scale(.992);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
.screen.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.screen.is-leaving{opacity:0;visibility:visible;transform:translateY(-10px) scale(.992)}

/* ===================== shared ===================== */
.panel__label{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;color:var(--carolina-lt);margin-bottom:12px;text-transform:uppercase}
.kicker{font-family:var(--font-pixel);font-size:10px;letter-spacing:.05em;color:var(--carolina-glow);text-align:center;text-shadow:var(--neon)}
.screen-title{font-family:var(--font-display);font-size:34px;text-align:center;letter-spacing:.02em;margin:8px 0 16px;color:var(--white)}
.note{text-align:center;font-size:13px;color:var(--ink-dim);min-height:17px;line-height:1.45}
.note.ok{color:var(--carolina-glow)} .note.warn{color:var(--amber)}

.cta{
  appearance:none;border:none;cursor:pointer;width:100%;
  font-family:var(--font-display);font-size:17px;letter-spacing:.02em;
  color:var(--navy-deep);
  background:linear-gradient(180deg,#74c0ec,#3f93cf);
  padding:18px 20px;border-radius:14px;
  box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 10px 0 #235e8c, 0 16px 26px rgba(0,0,0,.45);
  transition:transform .08s ease, box-shadow .08s ease;
}
.cta:active{transform:translateY(6px);box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 4px 0 #235e8c, 0 8px 16px rgba(0,0,0,.45)}
.cta__coin{display:inline-block;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotateY(360deg)}}
.link-btn{appearance:none;background:none;border:none;cursor:pointer;color:var(--carolina-lt);font-weight:700;font-size:13px;font-family:var(--font-body);padding:8px 4px}
.link-btn--center{display:block;margin:12px auto 0}

.seg{display:flex;gap:7px;background:rgba(8,18,38,.7);padding:6px;border-radius:13px;border:1px solid var(--line)}
.seg__btn{flex:1;appearance:none;border:none;cursor:pointer;background:transparent;color:var(--ink-dim);font-family:var(--font-display);font-size:13px;padding:11px 6px;border-radius:9px;transition:.14s}
.seg--4 .seg__btn{font-size:12px;padding:11px 2px}
.seg__btn.is-on{background:var(--carolina);color:var(--navy-deep);box-shadow:var(--neon)}
.seg--mode .seg__btn.is-on{background:var(--carolina)}
.seg--mini{gap:4px;padding:4px;border-radius:11px;flex:0 0 auto}
.seg--mini .seg__btn{flex:0 0 auto;padding:7px 10px;font-size:14px}

/* ===================== HOME ===================== */
.home-inner{max-width:560px;width:100%;margin:0 auto;padding:24px 20px 40px;display:flex;flex-direction:column;gap:18px}
.brand{text-align:center;padding-top:12px}
.brand__tag{font-family:var(--font-pixel);font-size:8px;letter-spacing:.12em;color:var(--carolina-lt)}
.brand__title{display:flex;flex-direction:column;gap:2px;margin:14px 0 10px;line-height:.9}
.brand__title span{font-family:var(--font-display);color:var(--white);font-size:clamp(40px,12vw,64px);letter-spacing:.01em;text-shadow:var(--neon)}
.brand__title2{color:var(--carolina)!important;-webkit-text-stroke:1px rgba(255,255,255,.15)}
.brand__sub{color:var(--ink-dim);font-size:14px;max-width:32ch;margin:0 auto;line-height:1.5}

.panel{background:linear-gradient(180deg, rgba(27,54,102,.55), rgba(10,23,48,.65));border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);backdrop-filter:blur(2px)}
.deck-list{display:flex;flex-direction:column;gap:9px}
.deck{
  display:flex;align-items:center;gap:13px;cursor:pointer;width:100%;text-align:left;
  background:rgba(8,18,38,.6);border:1.5px solid var(--line);border-radius:13px;
  padding:13px 15px;transition:.14s;
}
.deck.is-on{border-color:var(--deck,var(--carolina));box-shadow:0 0 0 1px var(--deck,var(--carolina)) inset, 0 0 14px rgba(86,182,232,.25)}
.deck__check{width:23px;height:23px;border-radius:7px;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center;transition:.14s}
.deck.is-on .deck__check{background:var(--deck,var(--carolina));border-color:var(--deck,var(--carolina))}
.deck__check svg{width:14px;height:14px;opacity:0}
.deck.is-on .deck__check svg{opacity:1}
.deck__emoji{font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.deck__body{flex:1;min-width:0}
.deck__name{font-family:var(--font-display);font-weight:400;font-size:14px;color:var(--white)}
.deck__meta{font-size:12px;color:var(--ink-dim);margin-top:2px}
.inplay{text-align:center;font-family:var(--font-pixel);font-size:9px;color:var(--carolina-glow);letter-spacing:.04em}
.foot-note{color:var(--ink-dim);font-size:12px;text-align:center;line-height:1.5;max-width:40ch;margin:2px auto 0}

/* ===================== READY ===================== */
.ready-inner{max-width:520px;width:100%;margin:auto;padding:28px 22px;display:flex;flex-direction:column;gap:15px}
.steps{list-style:none;display:flex;flex-direction:column;gap:11px;margin:4px 0}
.steps li{display:flex;gap:12px;align-items:flex-start;background:rgba(8,18,38,.5);border:1px solid var(--line);border-radius:13px;padding:13px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.steps li span{flex:0 0 25px;height:25px;border-radius:7px;background:var(--carolina);color:var(--navy-deep);font-family:var(--font-display);display:grid;place-items:center;font-size:13px}
.mode-pick{display:flex;flex-direction:column;gap:9px}

/* ===================== COUNTDOWN ===================== */
.screen[data-screen="count"]{align-items:center;justify-content:center}
.count-wrap{display:grid;place-items:center}
.count-num{font-family:var(--font-display);font-size:38vmin;color:var(--carolina);text-shadow:var(--neon);animation:countpop .85s cubic-bezier(.2,.9,.25,1)}
@keyframes countpop{0%{transform:scale(.3) rotate(-8deg);opacity:0}45%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}

/* ===================== PLAY ===================== */
.screen[data-screen="play"]{justify-content:space-between;overflow:hidden}
.play-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px 4px}
.score-pill{font-family:var(--font-pixel);font-size:14px;color:var(--carolina-glow);background:rgba(8,18,38,.7);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:46px;text-align:center}
.score-pill::before{content:"✓";margin-right:5px;color:var(--got)}
.timer{font-family:var(--font-display);font-size:30px;min-width:60px;text-align:right;color:var(--white)}
.timer.warn{color:var(--amber)}
.timer.crit{color:#ff7a8a;animation:tick 1s steps(2) infinite}
@keyframes tick{50%{opacity:.4}}

.card-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 16px;overflow:hidden}
.swipe-card{
  position:relative;width:100%;max-width:580px;min-height:46vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:30px 22px;border-radius:24px;
  background:linear-gradient(180deg, var(--navy-2), #0e2042);
  border:2px solid var(--line);
  box-shadow:0 0 0 1px rgba(86,182,232,.15) inset, var(--shadow), var(--neon);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform;
}
.swipe-card::before{ /* corner argyle accent */
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(86,182,232,.18), transparent 70%);
}
.swipe-card:active{cursor:grabbing}
.swipe-card.card-enter{animation:cardIn .3s cubic-bezier(.2,.9,.25,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.swipe-card.hint-got{border-color:var(--got);box-shadow:0 0 0 2px var(--got), 0 0 26px rgba(86,182,232,.5)}
.swipe-card.hint-pass{border-color:var(--pass);box-shadow:0 0 0 2px var(--pass), 0 0 26px rgba(240,169,59,.5)}
.card-deck{font-family:var(--font-display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--deck,var(--carolina-lt));margin-bottom:16px}
.card-term{font-family:var(--font-term);line-height:1.05;font-size:clamp(34px,8.4vh,76px);color:var(--white);letter-spacing:.01em;display:block;width:100%;text-align:center;overflow-wrap:break-word;hyphens:auto}
.card-level{margin-top:18px;font-family:var(--font-pixel);font-size:8px;letter-spacing:.08em;color:var(--ink-dim);opacity:.7}
.swipe-badge{position:absolute;top:22px;font-family:var(--font-display);font-size:22px;letter-spacing:.03em;padding:6px 13px;border-radius:11px;border:3px solid;opacity:0;--hint:0;pointer-events:none}
.swipe-badge--got{right:18px;transform:rotate(11deg);color:var(--got);border-color:var(--got);text-shadow:0 0 10px rgba(86,182,232,.6)}
.swipe-badge--pass{left:18px;transform:rotate(-11deg);color:var(--pass);border-color:var(--pass);text-shadow:0 0 10px rgba(240,169,59,.6)}
.swipe-card.hint-got .swipe-badge--got{opacity:var(--hint,1)}
.swipe-card.hint-pass .swipe-badge--pass{opacity:var(--hint,1)}

.play-hint{text-align:center;font-size:12px;color:var(--ink-dim);padding:8px 18px 2px;line-height:1.4}
.play-actions{display:flex;gap:11px;padding:6px 16px 24px}
.act{flex:1;appearance:none;border:none;cursor:pointer;font-family:var(--font-display);font-size:16px;padding:20px;border-radius:15px;color:var(--navy-deep);transition:transform .08s, box-shadow .08s}
.act--pass{background:linear-gradient(180deg,#f6bd64,#e09a2c);box-shadow:0 7px 0 #8a5d18, 0 12px 18px rgba(0,0,0,.4)}
.act--got{background:linear-gradient(180deg,#74c0ec,#3f93cf);box-shadow:0 7px 0 #235e8c, 0 12px 18px rgba(0,0,0,.4)}
.act:active{transform:translateY(5px)}
.act--pass:active{box-shadow:0 2px 0 #8a5d18}
.act--got:active{box-shadow:0 2px 0 #235e8c}

/* arcade scoring burst */
.flash{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;opacity:0}
.flash span{font-family:var(--font-display);font-size:13vw;letter-spacing:.02em;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.3)}
.flash.show-got{animation:burst .95s ease forwards;background:radial-gradient(60% 50% at 50% 50%, rgba(86,182,232,.95), rgba(75,156,211,.5) 60%, transparent 80%)}
.flash.show-pass{animation:burst .95s ease forwards;background:radial-gradient(60% 50% at 50% 50%, rgba(240,169,59,.95), rgba(224,154,44,.5) 60%, transparent 80%)}
@keyframes burst{
  0%{opacity:0;transform:scale(.6)}
  16%{opacity:1;transform:scale(1.04)}
  30%{transform:scale(1)}
  65%{opacity:1}
  100%{opacity:0;transform:scale(1.02)}
}

/* ===================== REVEAL ===================== */
.reveal-inner,.scorecard-inner{max-width:620px;width:100%;margin:0 auto;padding:26px 18px 40px;display:flex;flex-direction:column;gap:15px}
.reveal-head{text-align:center}
.big-score{font-family:var(--font-display);font-size:30px;margin:8px 0 4px;color:var(--white)}
.big-score span{color:var(--got)} .big-score span:last-of-type{color:var(--amber)}
.big-score small{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--ink-dim);margin:0 8px 0 4px;text-transform:uppercase}
.reveal-list{display:flex;flex-direction:column;gap:9px}
.rc{background:rgba(8,18,38,.6);border:1px solid var(--line);border-left-width:4px;border-radius:13px;padding:13px 15px;cursor:pointer;transition:background .14s;animation:rcIn .3s ease both}
@keyframes rcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rc--got{border-left-color:var(--got)} .rc--pass{border-left-color:var(--pass)}
.rc:active{background:rgba(27,54,102,.6)}
.rc__head{display:flex;align-items:center;gap:10px}
.rc__tag{font-family:var(--font-display);font-size:10px;padding:3px 8px;border-radius:20px;flex:0 0 auto}
.rc--got .rc__tag{background:rgba(86,182,232,.18);color:var(--got)} .rc--pass .rc__tag{background:rgba(240,169,59,.18);color:var(--amber)}
.rc__term{font-weight:800;font-size:16px;flex:1;color:var(--white)}
.rc__chev{color:var(--ink-dim);font-size:13px;transition:transform .2s}
.rc.is-open .rc__chev{transform:rotate(90deg)}
.rc__pearl{max-height:0;overflow:hidden;transition:max-height .28s ease, margin .28s ease;color:#cfe0fb;font-size:14px;line-height:1.5}
.rc.is-open .rc__pearl{max-height:260px;margin-top:10px}
.actions{margin-top:6px}

/* ===================== SCORECARD ===================== */
.stat-row{display:flex;gap:9px}
.stat{flex:1;background:rgba(8,18,38,.6);border:1px solid var(--line);border-radius:15px;padding:15px 8px;text-align:center}
.stat__num{font-family:var(--font-display);font-size:27px;color:var(--carolina-glow);text-shadow:var(--neon)}
.stat__lab{font-size:10px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.deckstat-list,.history-list{display:flex;flex-direction:column;gap:8px}
.dstat{display:flex;align-items:center;gap:11px;background:rgba(8,18,38,.6);border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.dstat__name{flex:1;font-weight:700;font-size:13px;color:var(--ink)}
.dstat__bar{flex:0 0 84px;height:7px;border-radius:6px;background:rgba(8,18,38,.9);overflow:hidden}
.dstat__fill{height:100%;background:linear-gradient(90deg,var(--carolina),var(--carolina-glow))}
.dstat__pct{flex:0 0 auto;font-size:12px;color:var(--ink-dim);font-weight:700;min-width:50px;text-align:right}
.hrow{display:flex;align-items:center;gap:10px;background:rgba(8,18,38,.6);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:14px}
.hrow__n{width:24px;height:24px;border-radius:7px;background:var(--carolina);color:var(--navy-deep);font-family:var(--font-display);display:grid;place-items:center;font-size:11px;flex:0 0 auto}
.hrow__deck{flex:1;color:var(--ink-dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow__score{font-weight:800;color:var(--white)} .hrow__score b{color:var(--got)}

@media (max-width:380px){
  .brand__title span{font-size:42px}
  .screen-title{font-size:30px}
  .seg--4 .seg__btn{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
  body::before,.bg-aurora{animation:none}
}