/* Figma "SkiRush Redesign" — SR token'ları (SkiRushUI/SR/SRTokens.swift ile aynı) */
:root {
  --night: #0C202D; --panel: #183342; --line: #33505F; --orange: #FF8248;
  --ice: #72DDE5; --gold: #F4CD73; --snow: #F4F8F8; --muted: #A9C3CF;
}
/* Playables dışarıya istek atamaz: yazı tipleri pakette */
@font-face { font-family: Barlow; font-weight: 600; src: url(fonts/Barlow-SemiBold.ttf); }
@font-face { font-family: Barlow; font-weight: 700; src: url(fonts/Barlow-Bold.ttf); }
@font-face { font-family: Barlow; font-weight: 500; src: url(fonts/Barlow-SemiBold.ttf); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; src: url(fonts/BarlowCondensed-Bold.ttf); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: italic; src: url(fonts/BarlowCondensed-ExtraBoldItalic.ttf); }

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.bleed { position: fixed; left: 0; right: 0; pointer-events: none; }
#hudBand { top: 0; background: rgba(12, 32, 45, .48); }
#cardShade { top: 0; bottom: 0; background-color: rgba(12,32,45,.32); background-image: linear-gradient(180deg, rgba(12,32,45,.6) 0%, rgba(12,32,45,0) 28%,
  rgba(12,32,45,.15) 58%, rgba(12,32,45,.95) 82%, rgb(12,32,45) 100%); }
/* Kampta dünya görünsün: Figma gradyanı yalın. Koşu içi kartta donmuş oyun açık karla
   rakamı yutuyordu → %32 gece taban (kart birebir, zemin bilerek farklı) */
#cardShade.menuShade { background-color: transparent; }

#col { position: fixed; top: 0; width: 390px; transform-origin: 0 0; pointer-events: none; }
#col > div { position: absolute; inset: 0; }
#col p, #col a, #col .chip, #col .panelBox, #col .legible, #col button, #col > div > div { position: absolute; margin: 0; }
#col .rel { position: static; }
.hidden { display: none !important; }

p { font: 700 11px/1.16 Barlow, sans-serif; color: var(--snow); }
.label { font: 700 11px/1.16 Barlow, sans-serif; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.display { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; line-height: 1.16;
  color: var(--snow); white-space: nowrap; }
.ice { color: var(--ice); } .gold { color: var(--gold); } .muted { color: var(--muted); } .orangeT { color: var(--orange); }

.chip { box-sizing: border-box; padding: 10px; border-radius: 12px; background: var(--panel);
  font: 700 12px/1.16 Barlow; text-align: center; }
.panelBox { box-sizing: border-box; padding: 16px; border-radius: 20px; background: var(--panel);
  font: 700 18px/1.16 Barlow; color: var(--snow); }
.panelBox p { font: inherit; }
.panelBox p.display { font: 800 italic 40px/1.16 'Barlow Condensed', sans-serif; }
.legible { border-radius: 16px; background: var(--night); }

.action { box-sizing: border-box; height: 52px; padding: 0 12px; border: 0; border-radius: 12px;
  font: 700 17px/1.16 Barlow, sans-serif; text-transform: uppercase; cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center; }
.action.orange { background: var(--orange); color: var(--night); }
.action.panel { background: var(--panel); color: var(--snow); }
a.action { text-decoration: none; }
.storeLink { border: 1.5px solid var(--line); }
.action:active { filter: brightness(.88); }

.tip { left: 0; width: 390px; top: 300px; text-align: center; font: 800 italic 30px/1.16 'Barlow Condensed';
  color: var(--snow); text-transform: uppercase;
  /* beyaz karın üstünde okunsun: kalın gece konturu dolgunun ARKASINDA (kural 12: kapsülsüz) */
  /* kontur gölgeyle: paint-order HTML metninde her tarayıcıda çalışmıyor */
  text-shadow: 3px 0 0 var(--night), -3px 0 0 var(--night), 0 3px 0 var(--night), 0 -3px 0 var(--night),
    2px 2px 0 var(--night), -2px -2px 0 var(--night), 2px -2px 0 var(--night), -2px 2px 0 var(--night),
    0 4px 14px rgba(12,32,45,.6); }

#loading { display: flex; align-items: center; justify-content: center; }

#ring { background: conic-gradient(var(--orange) calc(var(--p, 1) * 360deg), var(--line) 0);
  -webkit-mask: radial-gradient(circle, transparent 42px, #000 43px); mask: radial-gradient(circle, transparent 42px, #000 43px); }