:root{
  --sf-ui-scale:1;
  --sf-text-scale:1;
  --sf-spacing-scale:1;
  --sf-ui-cyan:#43e8ff;
  --sf-ui-amber:#ffb302;
  --sf-ui-lime:#8dff5a;
  --sf-ui-danger:#ff3d81;
  --sf-ui-ink:#03070d;
  --sf-ui-surface:rgba(4,14,21,.94);
  --sf-ui-surface-soft:rgba(7,19,28,.78);
  --sf-ui-line:rgba(67,232,255,.22);
  --sf-ui-line-strong:rgba(67,232,255,.42);
  --sf-ui-text:#ecfaff;
  --sf-ui-text-muted:#7893a0;
  --sf-ui-shadow:0 28px 80px rgba(0,0,0,.48);
  --sf-ui-glow-cyan:0 0 26px rgba(67,232,255,.10);
  --sf-ui-glow-amber:0 0 24px rgba(255,179,2,.10);
  --sf-ui-page-pad-x:clamp(14px,calc(28px * var(--sf-spacing-scale)),72px);
  --sf-ui-page-pad-y:clamp(10px,calc(18px * var(--sf-spacing-scale)),42px);
  --sf-ui-gap-1:calc(6px * var(--sf-spacing-scale));
  --sf-ui-gap-2:calc(10px * var(--sf-spacing-scale));
  --sf-ui-gap-3:calc(16px * var(--sf-spacing-scale));
  --sf-ui-gap-4:calc(24px * var(--sf-spacing-scale));

  /* Canonical typography SSOT. Pages choose only a semantic role/step. */
  --sf-type-user-scale:1;
  --sf-ui-font-body:var(--kr,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif);
  --sf-ui-font-display:var(--sf-ui-font-body);
  --sf-ui-font-data:var(--mono,ui-monospace,"SF Mono",Menlo,Consolas,"D2Coding","Nanum Gothic Coding",monospace);
  --sf-type-micro:clamp(calc(7px * var(--sf-type-user-scale)),calc(.40vw * var(--sf-type-user-scale)),calc(8px * var(--sf-type-user-scale)));
  --sf-type-caption:clamp(calc(8px * var(--sf-type-user-scale)),calc(.46vw * var(--sf-type-user-scale)),calc(9px * var(--sf-type-user-scale)));
  --sf-type-label:clamp(calc(9px * var(--sf-type-user-scale)),calc(.52vw * var(--sf-type-user-scale)),calc(10px * var(--sf-type-user-scale)));
  --sf-type-body-sm:clamp(calc(10px * var(--sf-type-user-scale)),calc(.58vw * var(--sf-type-user-scale)),calc(11px * var(--sf-type-user-scale)));
  --sf-type-body:clamp(calc(11px * var(--sf-type-user-scale)),calc(.64vw * var(--sf-type-user-scale)),calc(13px * var(--sf-type-user-scale)));
  --sf-type-body-lg:clamp(calc(12px * var(--sf-type-user-scale)),calc(.72vw * var(--sf-type-user-scale)),calc(15px * var(--sf-type-user-scale)));
  --sf-type-title-sm:clamp(calc(15px * var(--sf-type-user-scale)),calc(.92vw * var(--sf-type-user-scale)),calc(18px * var(--sf-type-user-scale)));
  --sf-type-title:clamp(calc(18px * var(--sf-type-user-scale)),calc(1.15vw * var(--sf-type-user-scale)),calc(22px * var(--sf-type-user-scale)));
  --sf-type-heading:clamp(calc(22px * var(--sf-type-user-scale)),calc(1.58vw * var(--sf-type-user-scale)),calc(30px * var(--sf-type-user-scale)));
  --sf-type-display:clamp(calc(28px * var(--sf-type-user-scale)),calc(2.20vw * var(--sf-type-user-scale)),calc(42px * var(--sf-type-user-scale)));
  --sf-type-hero:clamp(calc(38px * var(--sf-type-user-scale)),calc(3.30vw * var(--sf-type-user-scale)),calc(64px * var(--sf-type-user-scale)));
  --sf-ui-enter:cubic-bezier(.2,.75,.25,1);
}

/* Touch typography follows the usable short axis continuously: phones keep the
   established floor while larger touch surfaces gain readable tactical text. */
@media (any-pointer:coarse){
  :root{
    --sf-type-micro:clamp(calc(7px * var(--sf-type-user-scale)),calc(1.40vmin * var(--sf-type-user-scale)),calc(10px * var(--sf-type-user-scale)));
    --sf-type-caption:clamp(calc(8px * var(--sf-type-user-scale)),calc(1.55vmin * var(--sf-type-user-scale)),calc(11px * var(--sf-type-user-scale)));
    --sf-type-label:clamp(calc(9px * var(--sf-type-user-scale)),calc(1.70vmin * var(--sf-type-user-scale)),calc(12px * var(--sf-type-user-scale)));
    --sf-type-body-sm:clamp(calc(10px * var(--sf-type-user-scale)),calc(1.85vmin * var(--sf-type-user-scale)),calc(13px * var(--sf-type-user-scale)));
    --sf-type-body:clamp(calc(11px * var(--sf-type-user-scale)),calc(2.00vmin * var(--sf-type-user-scale)),calc(15px * var(--sf-type-user-scale)));
    --sf-type-body-lg:clamp(calc(12px * var(--sf-type-user-scale)),calc(2.15vmin * var(--sf-type-user-scale)),calc(16px * var(--sf-type-user-scale)));
    --sf-type-title-sm:clamp(calc(15px * var(--sf-type-user-scale)),calc(2.60vmin * var(--sf-type-user-scale)),calc(20px * var(--sf-type-user-scale)));
    --sf-type-title:clamp(calc(18px * var(--sf-type-user-scale)),calc(3.10vmin * var(--sf-type-user-scale)),calc(24px * var(--sf-type-user-scale)));
    --sf-type-heading:clamp(calc(22px * var(--sf-type-user-scale)),calc(3.80vmin * var(--sf-type-user-scale)),calc(32px * var(--sf-type-user-scale)));
    --sf-type-display:clamp(calc(28px * var(--sf-type-user-scale)),calc(4.80vmin * var(--sf-type-user-scale)),calc(44px * var(--sf-type-user-scale)));
    --sf-type-hero:clamp(calc(38px * var(--sf-type-user-scale)),calc(6.50vmin * var(--sf-type-user-scale)),calc(66px * var(--sf-type-user-scale)));
  }
  /* Combat/tutorial HUD panels use the same short-axis growth ratio as their
     touch geometry. Phone floors stay unchanged; large touch screens have no
     tablet-only type cap, while non-combat touch surfaces keep the global caps. */
  body.sf-combat-ui-touch{
    --sf-type-micro:max(calc(7px * var(--sf-type-user-scale)),calc(1.52vmin * var(--sf-type-user-scale)));
    --sf-type-caption:max(calc(8px * var(--sf-type-user-scale)),calc(1.74vmin * var(--sf-type-user-scale)));
    --sf-type-label:max(calc(9px * var(--sf-type-user-scale)),calc(1.96vmin * var(--sf-type-user-scale)));
    --sf-type-body-sm:max(calc(10px * var(--sf-type-user-scale)),calc(2.17vmin * var(--sf-type-user-scale)));
    --sf-type-body:max(calc(11px * var(--sf-type-user-scale)),calc(2.39vmin * var(--sf-type-user-scale)));
    --sf-type-body-lg:max(calc(12px * var(--sf-type-user-scale)),calc(2.61vmin * var(--sf-type-user-scale)));
    --sf-type-title-sm:max(calc(15px * var(--sf-type-user-scale)),calc(3.26vmin * var(--sf-type-user-scale)));
    --sf-type-title:max(calc(18px * var(--sf-type-user-scale)),calc(3.91vmin * var(--sf-type-user-scale)));
    --sf-type-heading:max(calc(22px * var(--sf-type-user-scale)),calc(4.78vmin * var(--sf-type-user-scale)));
    --sf-type-display:max(calc(28px * var(--sf-type-user-scale)),calc(6.08vmin * var(--sf-type-user-scale)));
    --sf-type-hero:max(calc(38px * var(--sf-type-user-scale)),calc(8.26vmin * var(--sf-type-user-scale)));
  }
}

/* First-paint boot gate: never expose the simulated battle surface before the canonical game-boot ready event. */
html:not([data-sf-gameboot-ready="true"]) #gl{visibility:hidden!important}