:root{
  --gold-100:#F7E9C0;
  --gold-200:#F0D89A;
  --gold-300:#E8C77A;
  --gold-400:#C9A245;
  --gold-500:#B98F3A;
  --gold-700:#6A5322;

  --ink-900:#050409;
  --ink-800:#08070C;
  --ink-700:#0B0A0E;
  --ink-600:#100E13;
  --ink-active:#17120A;
  --line:#241F16;
  --line-soft:#17140F;

  --text-1:#F3DCA4;
  --text-2:#E8DCC4;
  --text-3:#D4C196;
  --text-4:#C9B07A;

  --danger:#C4543F;

  --ring-core-fill:rgba(14,12,17,.86);
  /* Three stops of the medallion plate. The centre is nearly opaque so the
     prize name never has to compete with the facade's window grid; the edge
     is almost clear so the disc dissolves into the ring instead of ending on
     a hard rim. */
  --core-fill-1:rgba(9,8,13,.95);
  --core-fill-2:rgba(9,8,13,.82);
  --core-fill-3:rgba(9,8,13,.16);
  --drawer-scrim:rgba(3,2,6,.72);
  --vignette-mid:rgba(5,4,9,0);
  --vignette-edge:rgba(5,4,9,.92);
  --glow-gold:rgba(201,162,69,.10);
  --glow-gold-soft:rgba(201,162,69,.15);
  --btn-on-fg:#231A08;
  --select-fg:#231A08;
  /* Fades the background grid out from under the header so the lockup
     sits on a clean ground instead of on ruled lines. */
  --topbar-veil:linear-gradient(180deg,rgba(5,4,9,.92) 0%,rgba(5,4,9,.62) 62%,rgba(5,4,9,0) 100%);

  --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-display:"Noto Serif TC","Songti TC","Noto Serif CJK TC",serif;
  --font-brand:"Cinzel","Noto Serif TC",serif;
  --font-num:"SF Mono",'Cascadia Mono',Consolas,"Noto Sans Mono",monospace;

  --u:1vmin;
  --fs-micro:clamp(11px,1.25vmin,18px);
  --fs-small:clamp(12px,1.4vmin,21px);
  --fs-body:clamp(13px,1.6vmin,24px);
  --fs-label:clamp(12px,1.5vmin,22px);
  --fs-name:clamp(26px,4.8vmin,62px);
  --fs-name-multi:clamp(20px,3.4vmin,50px);
  --fs-name-dense:clamp(15px,2.2vmin,28px);

  --ring-size:clamp(300px,62vmin,760px);

  --dur-spin:2400ms;
  --dur-lock:640ms;
  --dur-burst:1200ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --name-glow:drop-shadow(0 2px 22px rgba(201,162,69,.28));

  --radius:6px;
  --radius-lg:12px;
}

/* Pearl white + gold — ceremonial light companion to the default black vault */
body.theme-white-gold{
  --gold-100:#6A5322;
  --gold-200:#8B6E28;
  --gold-300:#A8842F;
  --gold-400:#C9A245;
  --gold-500:#B98F3A;
  --gold-700:#E8D39A;

  --ink-900:#F7F4EC;
  --ink-800:#F3EFE6;
  --ink-700:#EFEAE0;
  --ink-600:#FFFEFA;
  --ink-active:#F5EDD8;
  --line:#DCCFAE;
  --line-soft:#E8E0CE;

  --text-1:#5C4A1C;
  --text-2:#5A5348;
  --text-3:#8A8276;
  --text-4:#B0A898;

  --ring-core-fill:rgba(255,253,248,.92);
  --core-fill-1:rgba(255,253,248,.97);
  --core-fill-2:rgba(255,253,248,.88);
  --core-fill-3:rgba(255,253,248,.24);
  --drawer-scrim:rgba(80,70,40,.28);
  --vignette-mid:rgba(247,244,236,0);
  --vignette-edge:rgba(232,224,208,.88);
  --glow-gold:rgba(201,162,69,.14);
  --glow-gold-soft:rgba(201,162,69,.18);
  --btn-on-fg:#FFFCF5;
  --select-fg:#FFFCF5;
  --topbar-veil:linear-gradient(180deg,rgba(247,244,236,.94) 0%,rgba(247,244,236,.66) 62%,rgba(247,244,236,0) 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--ink-900);
  color:var(--text-2);
  font-family:var(--font);
  font-size:var(--fs-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none}
input:focus-visible,button:focus-visible,select:focus-visible{outline:1px solid var(--gold-400);outline-offset:2px}
::selection{background:var(--gold-400);color:var(--select-fg)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}