/* =============================================================================
   SKITUREN — RETRO ARCADE STYLESHEET  (synthwave / CRT alpine)
   ============================================================================= */

:root {
  --bg:        #0d0221;
  --bg-2:      #1a0b3d;
  --panel:     rgba(20, 8, 48, 0.72);
  --panel-2:   rgba(35, 14, 74, 0.72);
  --cyan:      #05d9e8;
  --magenta:   #ff2a6d;
  --yellow:    #ffd319;
  --purple:    #d100d1;
  --green:     #39ff14;
  --orange:    #ff8a00;
  --snow:      #eaf6ff;
  --ink-dim:   #9a86c8;
  --line:      rgba(5, 217, 232, 0.35);

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-crt:   "VT323", "Courier New", monospace;

  --glow-cyan:    0 0 6px var(--cyan), 0 0 14px rgba(5,217,232,.6);
  --glow-magenta: 0 0 6px var(--magenta), 0 0 16px rgba(255,42,109,.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--snow);
  font-family: var(--font-crt);
  font-size: 20px;
  overflow-x: hidden;
}

/* Sky + neon sun + mountain silhouette, drawn in CSS only ------------------ */
body {
  background:
    radial-gradient(circle at 50% 78%, rgba(255,42,109,.16), transparent 45%),
    linear-gradient(180deg, #05010f 0%, var(--bg) 35%, var(--bg-2) 100%);
  background-attachment: fixed;
}
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 15%, #fff, transparent),
    radial-gradient(1px 1px at 70% 25%, #cbe6ff, transparent),
    radial-gradient(1px 1px at 40% 8%,  #fff, transparent),
    radial-gradient(1px 1px at 85% 12%, #fff, transparent),
    radial-gradient(1px 1px at 12% 30%, #9ad, transparent),
    radial-gradient(1px 1px at 60% 6%,  #fff, transparent);
  opacity: .8;
}
.grid-floor {
  position: fixed; left: 0; right: 0; bottom: 0; height: 40vh; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(transparent 0%, rgba(255,42,109,.08) 100%),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(5,217,232,.25) 39px, transparent 40px),
    repeating-linear-gradient(0deg,  transparent, transparent 38px, rgba(5,217,232,.18) 39px, transparent 40px);
  transform: perspective(320px) rotateX(68deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(transparent, #000 60%);
}

/* CRT scanline + flicker overlay ------------------------------------------- */
.crt-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0), rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
}
.crt-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%);
  animation: flicker 6s infinite steps(60);
}
@keyframes flicker { 0%,100%{opacity:.9} 3%{opacity:.75} 6%{opacity:.95} 50%{opacity:.85} }

/* ---- Layout scaffold ----------------------------------------------------- */
#app {
  position: relative; z-index: 1;
  max-width: 960px; margin: 0 auto; padding: 24px 18px 80px;
  min-height: 100vh;
}
.screen { display: none; animation: screen-in .35s ease both; }
.screen.active { display: block; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Pixel / neon type --------------------------------------------------- */
.pixel { font-family: var(--font-pixel); line-height: 1.55; letter-spacing: .5px; }
h1, h2, h3 { font-family: var(--font-pixel); font-weight: normal; margin: 0; }

.neon-cyan    { color: var(--cyan);    text-shadow: var(--glow-cyan); }
.neon-magenta { color: var(--magenta); text-shadow: var(--glow-magenta); }
.neon-yellow  { color: var(--yellow);  text-shadow: 0 0 6px var(--yellow), 0 0 16px rgba(255,211,25,.6); }
.neon-green   { color: var(--green);   text-shadow: 0 0 6px var(--green); }

.blink { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Title screen -------------------------------------------------------- */
#screen-title { text-align: center; padding-top: 6vh; }
.title-org { font-family: var(--font-pixel); font-size: 14px; color: var(--cyan);
  letter-spacing: 4px; text-shadow: var(--glow-cyan); }
.title-main {
  font-family: var(--font-pixel);
  font-size: clamp(28px, 9vw, 64px);
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--magenta), 0 0 18px rgba(255,211,25,.55);
  margin: 14px 0 6px;
}
.title-dest {
  font-family: var(--font-pixel); font-size: clamp(14px, 4.5vw, 26px);
  color: var(--snow); letter-spacing: 3px;
  text-shadow: 2px 2px 0 var(--cyan);
}
.title-sub { color: var(--ink-dim); margin: 18px auto 4px; max-width: 34ch; font-size: 22px; }
.title-badge { display:inline-block; margin-top: 10px; padding: 6px 12px;
  border: 2px solid var(--magenta); color: var(--magenta); font-family: var(--font-pixel);
  font-size: 10px; letter-spacing: 2px; box-shadow: var(--glow-magenta); }
.press-start { margin-top: 40px; font-family: var(--font-pixel); font-size: 16px; color: var(--green);
  text-shadow: 0 0 8px var(--green); }
.ski-emoji { font-size: clamp(40px, 12vw, 90px); display:block; margin: 8px 0; filter: drop-shadow(0 0 12px rgba(5,217,232,.6)); }

/* ---- Buttons / menu ------------------------------------------------------ */
.btn {
  font-family: var(--font-pixel); font-size: 13px;
  background: var(--panel); color: var(--snow);
  border: 2px solid var(--cyan); border-radius: 0;
  padding: 14px 18px; cursor: pointer; letter-spacing: 1px;
  box-shadow: 4px 4px 0 rgba(5,217,232,.35); transition: transform .08s, box-shadow .08s, background .15s;
  text-align: left; width: 100%;
}
.btn:hover, .btn:focus-visible {
  outline: none; background: var(--panel-2);
  transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--magenta); color: var(--yellow);
}
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--magenta); }
.btn .arrow { color: var(--magenta); margin-right: 10px; }

.menu-grid { display: grid; gap: 14px; max-width: 560px; margin: 34px auto 0; }

.back-btn {
  font-family: var(--font-pixel); font-size: 11px; color: var(--cyan);
  background: none; border: 2px solid var(--line); padding: 8px 12px; cursor: pointer;
  margin-bottom: 18px; letter-spacing: 1px;
}
.back-btn:hover { color: var(--yellow); border-color: var(--yellow); }

/* ---- Section headings & panels ------------------------------------------ */
.section-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); padding-bottom: 12px; margin-bottom: 20px; }
.section-head h2 { font-size: clamp(16px, 4vw, 24px); color: var(--yellow);
  text-shadow: 2px 2px 0 var(--magenta); }
.section-head .kicker { font-family: var(--font-pixel); font-size: 10px; color: var(--cyan); letter-spacing: 2px; }
.lead { color: var(--ink-dim); max-width: 60ch; margin: 0 0 22px; }

.panel {
  background: var(--panel); border: 2px solid var(--line);
  box-shadow: 5px 5px 0 rgba(0,0,0,.4), inset 0 0 30px rgba(5,217,232,.05);
  padding: 16px;
}

/* card grid (guide + highlights) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 2px solid var(--line);
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .1s, box-shadow .1s;
}
.card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--cyan); }
.card-media {
  aspect-ratio: 16/10; background:
    repeating-linear-gradient(45deg, rgba(255,42,109,.12) 0 12px, rgba(5,217,232,.12) 12px 24px);
  display: grid; place-items: center; position: relative; overflow: hidden; color: var(--snow);
}
.card-media video, .card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.placeholder-tag {
  font-family: var(--font-pixel); font-size: 10px; color: var(--yellow);
  border: 2px dashed var(--yellow); padding: 8px 10px; letter-spacing: 1px;
  text-align:center; background: rgba(13,2,33,.6);
}
.placeholder-tag small { display:block; color: var(--ink-dim); font-family: var(--font-crt);
  font-size: 15px; margin-top: 6px; letter-spacing: 0; }
.card.clickable { cursor: pointer; }
.card.clickable:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.media-badge {
  position: absolute; top: 8px; right: 8px; font-family: var(--font-pixel);
  font-size: 9px; letter-spacing: 1px; color: var(--snow); background: rgba(6,4,24,.78);
  border: 1px solid var(--line); padding: 5px 8px;
}
.open-hint {
  position: absolute; bottom: 8px; right: 8px; font-family: var(--font-pixel);
  font-size: 9px; letter-spacing: 1px; color: var(--bg); background: var(--cyan);
  padding: 5px 8px; box-shadow: 0 0 10px rgba(5,217,232,.7);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.card.clickable:hover .open-hint, .card.clickable:focus-visible .open-hint { opacity: 1; transform: none; }
.card-body { padding: 12px 14px 16px; }
.card-kind { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1px; color: var(--magenta); }
.card-name { font-family: var(--font-pixel); font-size: 13px; color: var(--cyan); margin: 8px 0; }
.card-blurb { color: var(--snow); font-size: 18px; line-height: 1.35; }
.card-icon { position:absolute; top:8px; left:8px; font-size: 26px; filter: drop-shadow(0 0 6px #000); }

/* ---- Pitch / stats ------------------------------------------------------- */
.pitch-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 720px) { .pitch-grid { grid-template-columns: 260px 1fr; } }
.pitch-photo { aspect-ratio: 3/4; }

/* vertical CV flow: stats → bio → video → bio2 → beermile → quotes */
.pitch-flow { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.pitch-flow > * { margin: 0; }
.pitch-flow #pitch-photo { width: 100%; }
.pitch-flow #pitch-photo .card-media { aspect-ratio: 16/9; }
.pitch-flow .card-grid { grid-template-columns: 1fr; }
.stat-row { margin-bottom: 14px; }
.stat-label { font-family: var(--font-pixel); font-size: 10px; color: var(--cyan); letter-spacing: 1px;
  display:flex; justify-content: space-between; margin-bottom: 6px; }
.stat-label b { color: var(--yellow); }
.stat-bar { height: 16px; border: 2px solid var(--line); background: rgba(0,0,0,.35); }
.stat-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 10px var(--magenta); }
.quote { border-left: 3px solid var(--magenta); padding: 6px 0 6px 14px; margin: 16px 0; color: var(--snow); }
.quote cite { display:block; color: var(--ink-dim); font-size: 15px; margin-top: 6px; font-style: normal; letter-spacing: 1px; }

/* ---- Info ---------------------------------------------------------------- */
.fact-list { list-style: none; padding: 0; margin: 0; }
.fact-list li { display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed var(--line); padding: 10px 0; }
.fact-list .k { font-family: var(--font-pixel); font-size: 10px; color: var(--cyan); letter-spacing: 1px; }
.fact-list .v { color: var(--snow); text-align: right; }
.chips { display:flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { border: 2px solid var(--line); padding: 6px 10px; color: var(--snow); font-size: 16px; }

/* ---- GAME ---------------------------------------------------------------- */
.game-wrap { max-width: 480px; margin: 0 auto; }

/* --- GAME fills the viewport, no page scroll --- */
body.game-active { overflow: hidden; }
body.game-active #app { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
#screen-game.active { display: flex; flex-direction: column; align-items: center; }
#screen-game.active .back-btn { align-self: flex-start; margin-bottom: 8px; }
body.game-active .game-wrap { display: flex; flex-direction: column;
  width: min(480px, 48vh, calc(100vw - 32px)); }
@supports (height: 100dvh) {
  body.game-active .game-wrap { width: min(480px, 48dvh, calc(100vw - 32px)); }
}
body.game-active .game-hud, body.game-active .hud { padding: 4px 2px; }
body.game-active .apres-label { margin: 2px 0; }
body.game-active .apres-meter { margin: 2px 0 6px; }
body.game-active .touch-controls { margin-top: 8px; }
body.game-active .touch-controls button { padding: 12px; }
body.game-active .controls-hint { margin-top: 6px; font-size: 14px; }
.game-stage { position: relative; width: 100%; aspect-ratio: 480/720;
  border: 3px solid var(--cyan); box-shadow: 0 0 20px rgba(5,217,232,.5), inset 0 0 40px rgba(0,0,0,.6);
  background: #06121f; touch-action: none; overflow: hidden; }
#game-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering: pixelated; }
.game-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 24px; gap: 12px; background: rgba(6,4,24,.82); z-index: 5;
}
.game-overlay.hidden { display:none; }
.game-overlay h3 { font-size: clamp(16px,6vw,26px); color: var(--yellow); text-shadow: 2px 2px 0 var(--magenta); }
.game-overlay p { color: var(--snow); margin: 0; max-width: 30ch; }
.hud { display:flex; justify-content: space-between; align-items:center; gap: 10px;
  font-family: var(--font-pixel); font-size: 11px; padding: 8px 4px; color: var(--cyan); }
.hud .lives { color: var(--magenta); letter-spacing: 2px; }
.hud .score b { color: var(--yellow); }
.apres-meter { height: 12px; border: 2px solid var(--line); margin: 4px 0 12px; background: rgba(0,0,0,.4); }
.apres-fill { height:100%; width:0; background: linear-gradient(90deg, var(--yellow), var(--orange)); transition: width .12s; }
.apres-label { font-family: var(--font-pixel); font-size: 9px; color: var(--orange); letter-spacing: 1px; margin-bottom: 2px; }

/* intro rules list */
.rules-list { list-style: none; padding: 0; margin: 4px 0 6px; text-align: left; max-width: 30ch; }
.rules-list li { color: var(--snow); font-size: 16px; line-height: 1.3; padding: 4px 0;
  border-bottom: 1px dashed var(--line); }

/* CHANCEKORT card */
.chancekort {
  width: 88%; max-width: 300px; border: 3px solid var(--card, var(--cyan));
  background: linear-gradient(160deg, rgba(20,8,48,.96), rgba(10,4,26,.96));
  box-shadow: 0 0 22px var(--card, var(--cyan)), inset 0 0 30px rgba(0,0,0,.5);
  padding: 16px 16px 12px; margin: 4px auto; position: relative;
}
.chancekort .ck-top { font-family: var(--font-pixel); font-size: 12px; color: var(--card, var(--cyan));
  letter-spacing: 3px; text-shadow: 0 0 8px var(--card, var(--cyan)); }
.chancekort .ck-kind { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1px; margin: 8px 0; }
.chancekort .ck-text { color: var(--snow); font-size: 21px; line-height: 1.32; margin: 10px 0 14px; }
.chancekort .ck-foot { font-family: var(--font-pixel); font-size: 8px; color: var(--ink-dim); letter-spacing: 2px; }

.touch-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.touch-controls button {
  font-family: var(--font-pixel); font-size: 22px; padding: 18px; background: var(--panel);
  border: 2px solid var(--cyan); color: var(--snow); box-shadow: 3px 3px 0 rgba(5,217,232,.4);
  user-select: none; cursor: pointer;
}
.touch-controls button:active { transform: translate(2px,2px); box-shadow:none; color: var(--yellow); }
.controls-hint { text-align:center; color: var(--ink-dim); font-size: 16px; margin-top: 10px; }

/* small helpers */
.center { text-align: center; }
.mt { margin-top: 22px; }
.hidden { display: none !important; }
footer.tiny { text-align:center; color: var(--ink-dim); font-size: 14px; margin-top: 40px; letter-spacing: 1px; }

/* ---- LIGHTBOX ------------------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; background: rgba(4,2,14,.94);
  backdrop-filter: blur(4px);
}
.lightbox.hidden { display: none; }
.lb-stage { display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: min(1000px, 92vw); width: 100%; }
.lb-media { width: 100%; display: flex; justify-content: center; }
.lb-media img, .lb-media video {
  max-width: 100%; max-height: 72vh; border: 3px solid var(--cyan);
  box-shadow: 0 0 26px rgba(5,217,232,.5); background: #000;
}
.lb-info { text-align: center; }
.lb-cap { color: var(--snow); font-size: 22px; line-height: 1.3; }
.lb-cred { color: var(--ink-dim); font-size: 15px; letter-spacing: 1px; margin-top: 2px; }
.lb-cnt { font-family: var(--font-pixel); font-size: 9px; color: var(--cyan); letter-spacing: 2px; margin-top: 8px; }
.lb-close {
  position: absolute; top: 14px; right: 16px; font-family: var(--font-pixel); font-size: 14px;
  background: var(--panel); color: var(--magenta); border: 2px solid var(--magenta);
  width: 44px; height: 44px; cursor: pointer; box-shadow: var(--glow-magenta);
}
.lb-nav {
  flex: 0 0 auto; font-family: var(--font-pixel); font-size: 22px;
  background: var(--panel); color: var(--cyan); border: 2px solid var(--cyan);
  width: 48px; height: 64px; cursor: pointer; box-shadow: 3px 3px 0 rgba(5,217,232,.4);
}
.lb-nav:hover { color: var(--yellow); border-color: var(--yellow); }
.lb-close:hover { color: var(--yellow); border-color: var(--yellow); }
@media (max-width: 560px) {
  .lb-nav { width: 40px; height: 54px; font-size: 18px; }
  .lb-media img, .lb-media video { max-height: 62vh; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .crt-overlay::after, .blink, .screen { animation: none; }
  .card:hover, .btn:hover { transform: none; }
}