/* AISU HERO · "AISU Fire Festival" · design tokens (WP0).
   SPEC 1.2 colours and gradients, 1.3 type scale, 1.5 shape, 1.7 layout geometry and safe areas, 3.5 stall rect.
   Only custom properties live here (plus the per-difficulty --dif-color hook). No selectors that draw anything.
   Motion tokens (4.1) live in motion.css. Fonts and the .tk outline technique live in fonts.css. */

:root {
  /* ------------------------------------------------------------ brand and surfaces (1.2, B values) */
  --red: #E8202F;      --red-hi: #FF4650;    --red-deep: #A50F1F;
  --cobalt: #2340FF;   --cobalt-hi: #7C8EFF; --cobalt-deep: #1426A8;
  --ivory: #F6F0E4;    --ivory-2: #EADFC9;   --ivory-3: #CDBB9C;   --paper: #FFFAF0;
  --night: #0D0B16;    --night-2: #17132A;   --night-3: #241D3D;   --night-4: #3A2F60;
  --ink: #2C0F15;      --ink-2: #5B3A40;     /* every outline = the mascot's line colour */

  /* fire ramp (white-hot -> red) and specials */
  --f1: #FFF6A8; --f2: #FFD23A; --f3: #FF8A1C; --f4: #FF5A1F; --f5: #E8202F;
  --ember: #F2552A;
  --gold: #F5C542;     --gold-hi: #FFEFB0;   --gold-deep: #B07A12;
  --ok: #1FAE5B;
  --early: #7C8EFF;    --late: #FF5A5F;
  --miss: #C9C3DD;                            /* MISS word, failed verdict (ash lilac) */
  --focus: var(--f2);                         /* cursor ring */

  /* aliases used by the font kit's .tk helpers (fonts.css no longer defines them) */
  --halo: var(--ivory);
  --cream: var(--ivory);
  --sun: var(--f2);
  --don: var(--red);

  /* difficulty heat (Expert = blue inferno) */
  --dif-easy: #FFB21E; --dif-medium: #FF6A1F; --dif-hard: #E8202F; --dif-expert: #2340FF;
  --dif-color: var(--dif-medium);

  /* lanes: gameplay information, never restyled (highway LANE_COLORS) */
  --lane-g: #22d65a; --lane-r: #ff2b38; --lane-y: #ffd21f; --lane-b: #2d6bff; --lane-o: #ff8a1c;

  /* gradients (B values) */
  --grad-fire: linear-gradient(180deg, #FFF8C4 0%, #FFD23A 30%, #FF8A1C 62%, #E8202F 100%);
  --grad-fire-btn: linear-gradient(180deg, #FF9A4A 0%, #FF5A1F 38%, #E8202F 70%, #B5101F 100%);
  --grad-gold: linear-gradient(180deg, #FFF8D8 0%, #FFE07A 26%, #F5C542 50%, #D99A1A 74%, #FFE9A0 100%);
  --grad-blue: linear-gradient(180deg, #F2F7FF 0%, #A9C2FF 34%, #4A66FF 70%, #2340FF 100%);
  --grad-ivory: linear-gradient(180deg, #FFFDF6 0%, #F6F0E4 60%, #EADFC9 100%);
  --grad-night: linear-gradient(180deg, #241D3D 0%, #17132A 100%);
  --grad-ash: linear-gradient(180deg, #F1EEF7 0%, #C9C3DD 55%, #8E86A8 100%);
  --grad-gold-fire: linear-gradient(180deg, #FFF8C4 0%, #FFD23A 45%, #FF8A1C 100%);   /* PERFECT word (2.13) */
  --grad-heat: var(--dif-color);

  /* ------------------------------------------------------------ spacing scale (gutters, gaps, paddings) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;

  /* ------------------------------------------------------------ shape, outlines, shadows (1.5) */
  --r-xs: .375rem; --r-s: .625rem; --r-m: 1rem; --r-l: 1.5rem; --r-xl: 2rem; --r-pill: 999px;
  --ow-s: max(2px, .16rem);     /* chips, kbd, pips, small icons */
  --ow:   max(2.5px, .22rem);   /* buttons, inputs, cards */
  --ow-l: max(3.5px, .31rem);   /* panels, stall, boards, ema */
  --drop-s: 0 .2rem 0 var(--ink);
  --drop:   0 .35rem 0 var(--ink);
  --float:  0 1.4rem 2.8rem rgb(0 0 0 / .5);
  --plate-cobalt: .6rem .7rem 0 0 var(--cobalt), .6rem .7rem 0 var(--ow-l) var(--ink);
  --plate-red:    .6rem .7rem 0 0 var(--red),    .6rem .7rem 0 var(--ow-l) var(--ink);
  --tilt-s: -1.5deg;
  --tilt: -3deg;

  /* hint-bar text on the 3D (1.8 #2) */
  --hint-shadow: 0 .12rem 0 var(--ink), 0 0 .6rem rgb(13 11 22 / .85);

  /* ------------------------------------------------------------ type scale (1.3; rem follows the viewport height, base.css) */
  --fs-logo: 8.5rem;
  --fs-count: 6rem;
  --fs-verdict: 4.4rem;
  --fs-hero: 4rem;
  --fs-judge: 3rem;
  --fs-judge-s: 2.6rem;        /* GOOD / MISS */
  --fs-score-res: 3.3rem;
  --fs-score: 2.5rem;
  --fs-h1: 2.4rem;
  --fs-play: 2.4rem;
  --fs-h2: 1.75rem;
  --fs-lyric: 1.8rem;  --fs-lyric-m: 1.45rem;  --fs-lyric-l: 1.2rem;
  --fs-h3: 1.3rem;
  --fs-btn: 1.15rem;
  --fs-body: 1rem;
  --fs-small: .875rem;         /* floor: nothing smaller anywhere */

  /* ------------------------------------------------------------ layout geometry and safe areas (1.7)
     Relative to the viewport centre and to vh: the 3D camera projects about the screen centre.
     Exact for the stage FOV 30 (aspect >= 1.3). Every screen positions from these, never from px. */
  --safe-title-r:   calc(50vw + 15.4vh);   /* title shot: UI ends left of this (Aisu left edge 50vw+19vh minus the 3.56vh halo) */
  --safe-menu-l:    57.6vh;                /* menu shot: UI starts right of this */
  --safe-strip-r:   calc(50vw - 68vh);     /* play: left strip right limit (includes the Star Power dolly) */
  --safe-judge-l:   calc(50vw - 27vh);     /* play: Aisu + halo right edge in the judgement band (68-79vh) */
  --safe-hold-l:    calc(50vw - 24vh);     /* play: same in the fret band (72-84vh, sustain +N): legs + halo reach 50vw-26vh */
  --play-top:       13.4vh;                /* play: Aisu top with the dolly; the top band ends here */
  --play-dock-l:    calc(50vw + clamp(20.3vw, 41.5vh, 46.3vw));   /* play: highway strike-line right edge */
  --mv-title-l:     calc(50vw - 10.8vh);   /* MV rect, title shot: x from here to 100vw, y 0-54vh */
  --mv-menu-l:      calc(40.07vw - 11.6vh);/* MV rect, menu shot (retuned): x to 40.07vw + 84.4vh, y 0-54vh */
  --mv-play-l:      calc(50vw - 24.2vh);   /* MV rect, play: x to 50vw + 70.3vh, y 0-53vh */
  --mv-bottom:      54vh;

  /* title-shot anchors (3.2) */
  --lx: 4.5vw;
  --ly: 8vh;

  /* the stall: frame rect shared by every menu-shot screen (3.5).
     -l / -t are distances from the left / top edge; -r / -b are distances from the right / bottom edge. */
  --roof-h: 3.4rem;
  --hint-h: 2.25rem;
  --stall-l: max(var(--safe-menu-l) + 1.5rem, 98.5vw - 72rem);   /* +1.5rem: the roof's top-left corner clears Aisu's halo */
  --stall-r: 1.5vw;
  --stall-t: 44vh;
  --stall-b: calc(1vh + var(--hint-h) + .6rem);
  --stall-body-t: calc(var(--stall-t) + var(--roof-h));
  --stall-w: calc(100vw - var(--stall-l) - var(--stall-r));

  /* play shot: dock rect (3.10). dw = dock width, dt = dock top */
  --dock-w: min(21rem, 98.5vw - var(--play-dock-l));
  --dock-h: 21rem;
  --dock-t: calc(98.5vh - var(--dock-h));

  /* results board (3.12) */
  --res-w: min(50rem, var(--safe-title-r) - 2.5vw);
}

/* narrow (aspect < 1.3): the stage switches to FOV 44, every offset from the centre scales by tan15/tan22 = 0.663
   (derived values; WP11 confirms them by capture) */
@media (max-aspect-ratio: 1299/1000) {
  :root {
    --safe-title-r: calc(50vw + 9vh);    --safe-menu-l: 39.5vh;
    --safe-strip-r: calc(50vw - 45.1vh); --safe-judge-l: calc(50vw - 17.9vh); --safe-hold-l: calc(50vw - 15.9vh);
    --play-top: 28.4vh; --mv-play-l: calc(50vw - 16vh); --mv-bottom: 52.7vh;
  }
}

/* per-difficulty heat colour: any element (card, tab, pill, pip row) carrying data-dif */
[data-dif="easy"]   { --dif-color: var(--dif-easy); }
[data-dif="medium"] { --dif-color: var(--dif-medium); }
[data-dif="hard"]   { --dif-color: var(--dif-hard); }
[data-dif="expert"] { --dif-color: var(--dif-expert); }