@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url('assets/fonts/cinzel-latin.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/spectral-300.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/spectral-400.woff2') format('woff2');}

:root{
  --gold:#d9b45b;
  --gold-bright:#f6dda0;
  --gold-deep:#8a6f2c;
  --line:rgba(217,180,91,.22);
  --line-soft:rgba(217,180,91,.16);
  --cream:#f0e5c8;
  --muted:#aec0b2;
  --ink:#050b08;
  --font-display:'Cinzel',Georgia,'Times New Roman',serif;
  --font-body:'Spectral',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(58,110,78,.35),transparent 62%),
    radial-gradient(90% 60% at 50% 115%,rgba(22,66,46,.55),transparent 65%),
    linear-gradient(180deg,#07120c 0%,#040a07 45%,#06110b 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

body::after{ /* film grain */
  content:"";
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- backdrop */
.rings{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 40%,rgba(217,180,91,.06) 0 1px,transparent 1px 96px);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);
}

.watermark{
  position:fixed;
  top:46%;
  left:50%;
  width:min(78vmin,760px);
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  opacity:.055;
  filter:blur(.4px);
}
.watermark svg{width:100%;height:auto;fill:var(--gold)}

.embers{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ember{
  position:absolute;
  left:var(--x,50vw);
  bottom:-10vh;
  width:var(--s,3px);
  height:var(--s,3px);
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle,#ffeeb8 0%,#d9b45b 55%,rgba(217,180,91,0) 72%);
  animation:rise var(--d,16s) linear var(--delay,0s) infinite;
}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(.85);opacity:0}
  10%{opacity:.85}
  65%{opacity:.45}
  100%{transform:translate3d(var(--dx,12px),-115vh,0) scale(.6);opacity:0}
}

/* ------------------------------------------------------------------ layout */
.frame{
  position:relative;
  z-index:2;
  width:min(100%,980px);
  margin:0 auto;
  padding:clamp(2.2rem,6vw,4.4rem) clamp(1.1rem,4vw,2rem) clamp(1.5rem,4vw,2.5rem);
}

/* ---------------------------------------------------------------- masthead */
.masthead{text-align:center}

.triforce{
  width:clamp(62px,11vw,92px);
  height:auto;
  filter:drop-shadow(0 0 26px rgba(217,180,91,.42));
  animation:hover 7s ease-in-out infinite;
}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.eyebrow{
  margin:clamp(1.1rem,3vw,1.7rem) 0 .55rem;
  font-family:var(--font-display);
  font-size:clamp(.56rem,1.9vw,.68rem);
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#c2a35a;
}

h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.1rem,8.6vw,4.6rem);
  line-height:1.02;
  letter-spacing:.045em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fdf0c9 0%,#f0d68f 34%,#cfae5f 62%,#8f7130 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 6px 26px rgba(217,180,91,.18));
  text-wrap:balance;
}
h1 em{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:300;
  font-size:.46em;
  letter-spacing:.08em;
  text-transform:lowercase;
  padding:0 .12em;
  vertical-align:.14em;
}

.platform{
  margin:.9rem 0 0;
  font-family:var(--font-display);
  font-size:clamp(.62rem,2vw,.76rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.platform .diamond{color:var(--gold-deep);font-size:.8em;padding:0 .5em}

/* ------------------------------------------------------------------ region */
.selector{margin-top:clamp(2.1rem,6vw,3.2rem);text-align:center}

.selector h2{
  margin:0 0 .95rem;
  font-family:var(--font-display);
  font-size:clamp(.58rem,1.9vw,.68rem);
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#b3944a;
}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:.56rem .95rem;
  border:1px solid rgba(217,180,91,.3);
  border-radius:999px;
  background:rgba(240,229,200,.025);
  color:#d8cbaa;
  font-family:var(--font-display);
  font-size:clamp(.6rem,1.9vw,.72rem);
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .25s ease,transform .18s ease;
}
.chip:hover{border-color:rgba(217,180,91,.55);color:var(--gold-bright);transform:translateY(-1px)}
.chip:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.chip[aria-pressed="true"]{
  color:#17200f;
  border-color:#f2d793;
  background:linear-gradient(180deg,#f7e3a8,#cfa94f 72%,#b8913f);
  box-shadow:0 0 0 1px rgba(247,227,168,.35),0 10px 26px -14px rgba(217,180,91,.9),inset 0 1px 0 rgba(255,255,255,.55);
}

/* --------------------------------------------------------------- countdown */
.countdown{margin-top:clamp(1.6rem,4.5vw,2.4rem);text-align:center}

.cd-region{
  margin:0 0 .95rem;
  font-family:var(--font-display);
  font-size:clamp(.6rem,2vw,.74rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}

.digits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.45rem,1.6vw,.95rem);
  max-width:700px;
  margin:0 auto;
}

.unit{
  position:relative;
  padding:clamp(.85rem,2.6vw,1.4rem) .3rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(240,214,143,.075),rgba(0,0,0,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 40px -30px #000;
  overflow:hidden;
}
.unit::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(85% 55% at 50% 0%,rgba(246,221,160,.16),transparent 72%);
}
.unit .num{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.65rem,7.2vw,3.1rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fdf1cb,#e3c073 52%,#a4823a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.unit .lbl{
  display:block;
  margin-top:.5rem;
  font-family:var(--font-display);
  font-size:clamp(.45rem,1.5vw,.58rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#c3d0c6;
}

.local-time{
  margin:clamp(1.1rem,3vw,1.5rem) 0 0;
  font-size:clamp(.92rem,2.6vw,1.06rem);
  color:#ded2b2;
}
.local-time strong{color:var(--gold-bright);font-weight:400;white-space:nowrap}

.released{display:none;max-width:640px;margin:0 auto;padding:clamp(1.3rem,4vw,2rem) 1rem;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(246,221,160,.1),rgba(0,0,0,.3));}
.released-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.15rem,4.6vw,1.85rem);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold-bright);
}
.released-sub{margin:.5rem 0 0;color:#ded2b2;font-size:.95rem}
body.is-out .digits{display:none}
body.is-out .released{display:block}

/* ---------------------------------------------------------------- schedule */
.schedule{margin-top:clamp(2.4rem,6vw,3.6rem)}

.schedule h2{
  margin:0 0 .5rem;
  font-family:var(--font-display);
  font-size:clamp(.62rem,2vw,.74rem);
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-deep);
  text-align:center;
}

.hint{
  max-width:56ch;
  margin:0 auto clamp(1rem,3vw,1.4rem);
  text-align:center;
  font-size:clamp(.82rem,2.4vw,.92rem);
  color:#a7bbac;
}

.table-wrap{border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:rgba(5,12,9,.74)}

table{width:100%;border-collapse:collapse;font-size:clamp(.8rem,2.4vw,.92rem)}

thead th{
  padding:.7rem .8rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:clamp(.5rem,1.6vw,.6rem);
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#c3d0c6;
  text-align:left;
  white-space:nowrap;
}

tbody tr{border-bottom:1px solid rgba(217,180,91,.13);cursor:pointer;transition:background .18s ease}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:rgba(217,180,91,.045)}
tbody tr.is-selected{background:rgba(217,180,91,.1)}
tbody tr.is-selected td:first-child{box-shadow:inset 2px 0 0 var(--gold)}

td{padding:.72rem .8rem;vertical-align:middle}
td .rname{font-family:var(--font-display);font-size:.95em;letter-spacing:.05em;color:var(--cream);white-space:nowrap}
td .ryours{color:var(--gold-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
td .rzoned{color:#a6baab;font-size:.9em;white-space:nowrap}
td .sync{display:block;margin-top:.18rem;font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:#b3944a;white-space:nowrap}
thead th.col-status{text-align:right}
td.status{text-align:right;color:var(--muted);font-size:.82em;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.is-selected td.status{color:#cbb27a}

/* ------------------------------------------------------------------ footer */
.foot{
  position:relative;
  z-index:2;
  width:min(100%,980px);
  margin:0 auto;
  padding:0 clamp(1.1rem,4vw,2rem) clamp(2rem,6vw,3rem);
}
.foot p{
  max-width:62ch;
  margin:0 auto;
  text-align:center;
  font-size:clamp(.72rem,2.1vw,.8rem);
  color:#a8bbad;
}

.noscript{
  position:relative;
  z-index:2;
  margin:0;
  padding:1rem;
  text-align:center;
  color:var(--gold-bright);
}

/* ------------------------------------------------------------- responsive */
@media (max-width:620px){
  .col-region-local{display:none}
  .hint{text-align:left}
}

@media (max-width:400px){
  .digits{gap:.35rem}
  .unit .num{font-size:clamp(1.35rem,8vw,1.8rem)}
  .unit{padding:.75rem .15rem}
}

/* Below ~560px the four-column table runs out of room, so each row becomes a
   card: name + time left on the first line, the local unlock time beneath. */
@media (max-width:560px){
  .table-wrap{border:0;border-radius:0;background:none;overflow:visible}
  table,tbody,tr,td{display:block}
  thead{display:none}
  tbody tr{
    display:grid;
    grid-template-columns:1fr auto;
    gap:.1rem .6rem;
    align-items:baseline;
    margin:0 0 .55rem;
    padding:.7rem .9rem;
    border:1px solid var(--line-soft);
    border-radius:12px;
    background:rgba(8,18,13,.55);
  }
  tbody tr:hover{background:rgba(217,180,91,.06)}
  tbody tr.is-selected{border-color:rgba(217,180,91,.5);background:rgba(217,180,91,.09)}
  tbody tr.is-selected td:first-child{box-shadow:none}
  td{padding:0;border:0}
  td:nth-child(1){grid-column:1;grid-row:1}
  td.status{grid-column:2;grid-row:1;text-align:right;font-size:.8em}
  td:nth-child(2){grid-column:1 / -1;grid-row:2}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ember{display:none}
}