/* GYATTSBY — $GYATTSBY */

:root{
  --k: 1;
  --vh: 1080;
  --ui: clamp(.82, calc(var(--vh) / 1080), 1.3);
  --u: calc(var(--ui) * 1px);
  --gold:#E8C77A;
  --cream:#EADFC8;
  --dim:#96A2B0;
  --ink:#120E08;
}

html,body{
  background:#05060a;
  overflow:hidden;
  height:100%;
  margin:0;
}
body{
  font-family:'Jost',system-ui,sans-serif;
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
}

/* ---------------- stage ---------------- */
#world{
  position:fixed;left:50%;top:50%;width:2560px;height:1024px;
  transform:translate(-50%,-50%) scale(var(--k));
  transform-origin:50% 50%;
  will-change:transform;
}
#plate{position:absolute;inset:0;width:2560px;height:1024px;}
#safe{position:absolute;left:512px;top:80px;width:1536px;height:864px;transform-origin:50% 45%;}
#safe > *{position:absolute;}
#safe > img,#safe > canvas{inset:0;width:1536px;height:864px;}

/* payoff layers are invisible until the hard cut */
#gyatt,#reartop,#slam,#stamp{visibility:hidden;opacity:0;}
#slam{z-index:1;}
#gyatt{z-index:2;transform-origin:50% 47.92%;}
#reartop{z-index:3;}
#front{z-index:4;visibility:visible;opacity:1;}
#fx{z-index:5;}

body.final #front{visibility:hidden;opacity:0;}
body.final #gyatt,body.final #reartop{visibility:visible;opacity:1;}
body.final #slam{visibility:visible;}

#slam{
  left:0;top:186px;right:0;text-align:center;
  font-family:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  font-size:132px;line-height:1;letter-spacing:.04em;
  color:rgba(255,255,255,.86);
  text-shadow:0 0 34px rgba(232,199,122,.45),0 6px 0 rgba(18,14,8,.5);
  transform:translateY(-50%) rotate(-2.5deg);
  transform-origin:50% 50%;
}
#stamp{
  z-index:6;
  left:50%;bottom:118px;transform:translateX(-50%) rotate(-3deg);
  font-family:'Jost',sans-serif;font-weight:600;font-size:44px;letter-spacing:.3em;
  color:rgba(234,223,200,.9);
  border:2px solid rgba(234,223,200,.55);border-radius:6px;
  padding:10px 26px 8px 30px;white-space:nowrap;
}

/* ---------------- fixed UI ---------------- */
#ui{
  position:fixed;inset:0;z-index:10;
  pointer-events:none;
}
/* legibility scrims — under the UI content, centre of frame untouched */
#ui::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(4,5,9,.80) 0%, rgba(4,5,9,.42) 13%, transparent 32%),
    radial-gradient(calc(400 * var(--u)) calc(260 * var(--u)) at 0 0, rgba(4,5,9,.32), transparent 70%),
    radial-gradient(calc(560 * var(--u)) calc(320 * var(--u)) at 100% 0, rgba(4,5,9,.66), transparent 70%);
}
#ui button,#ui a{pointer-events:auto;font-family:'Jost',sans-serif;}
#brand,#hud,#status,#hint,.meter-head{text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 16px rgba(0,0,0,.55);}
#ui :focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
#ui :focus:not(:focus-visible){outline:none;}

/* brand — top-left */
#brand{position:absolute;top:calc(48 * var(--u));left:calc(48 * var(--u));}
#brand h1{
  margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:calc(56 * var(--u));line-height:1;letter-spacing:.14em;color:var(--gold);
}
#brand .rule{width:calc(196 * var(--u));height:1px;margin:calc(11 * var(--u)) 0 0 calc(3 * var(--u));background:var(--gold);opacity:.5;}
#brand p{margin:calc(12 * var(--u)) 0 0 calc(3 * var(--u));font-size:calc(19 * var(--u));letter-spacing:.3em;color:var(--cream);}

/* hud — top-right */
#hud{position:absolute;top:calc(48 * var(--u));right:calc(48 * var(--u));text-align:right;}
.hud-label{display:block;font-size:calc(14 * var(--u));letter-spacing:.28em;color:var(--dim);}
#toasts{
  display:block;font-size:calc(34 * var(--u));line-height:1.12;color:var(--cream);
  font-variant-numeric:tabular-nums;
}
#toasts span{display:inline-block;}
#tierblock{margin-top:calc(12 * var(--u));visibility:hidden;opacity:0;}
body.launched #tierblock{visibility:visible;opacity:1;}
#tier{display:block;font-size:calc(26 * var(--u));line-height:1.15;letter-spacing:.05em;color:var(--gold);}

/* meter */
#meter{
  position:absolute;left:50%;bottom:calc(175 * var(--u));width:calc(520 * var(--u));
  transform:translateX(-50%);
  transition:transform .3s ease,opacity .2s ease;
}
.meter-head{display:flex;justify-content:space-between;font-size:calc(14 * var(--u));letter-spacing:.28em;color:var(--dim);margin-bottom:calc(11 * var(--u));}
#pct{color:var(--gold);}
.meter-track{height:calc(7 * var(--u));border-radius:calc(4 * var(--u));background:rgba(255,255,255,.14);overflow:hidden;}
#fill{
  height:100%;width:100%;border-radius:calc(4 * var(--u));background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
}
#fill.pulse{animation:fillpulse .34s ease-in-out infinite alternate;}
@keyframes fillpulse{from{opacity:1;}to{opacity:.5;}}
body.launched #meter{transform:translateX(-50%) translateY(calc(-54 * var(--u)));}

/* cta + hint */
#cta{
  position:absolute;left:50%;bottom:calc(70 * var(--u));width:calc(420 * var(--u));height:calc(76 * var(--u));
  transform:translateX(-50%);
  border:0;border-radius:calc(38 * var(--u));
  background:linear-gradient(180deg,#F1DA9E,var(--gold) 55%,#D7B15B);
  color:var(--ink);font-weight:600;font-size:calc(26 * var(--u));letter-spacing:.18em;
  cursor:pointer;
  transition:filter .15s ease,transform .12s ease,opacity .2s ease,visibility 0s linear 0s;
}
#cta:hover:not(:disabled){filter:brightness(1.06);transform:translateX(-50%) translateY(calc(-2 * var(--u)));}
#cta:active:not(:disabled){transform:translateX(-50%) scale(.98);}
#cta:disabled{cursor:default;}
#hint{
  position:absolute;left:50%;bottom:calc(48 * var(--u));transform:translateX(-50%);
  font-size:calc(13 * var(--u));letter-spacing:.36em;color:var(--dim);
  transition:opacity .2s ease,visibility 0s linear 0s;
}
/* D10 — visibility is discrete: flip instantly on show, delay the flip on hide */
body.launched #cta,body.final #cta{visibility:hidden;opacity:0;transition:filter .15s ease,transform .12s ease,opacity .2s ease,visibility 0s linear .2s;}
body.launched #hint,body.final #hint{visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s;}

/* payoff controls */
#more{
  position:absolute;left:50%;bottom:calc(140 * var(--u));width:calc(300 * var(--u));height:calc(62 * var(--u));
  transform:translateX(-50%);
  border:1px solid rgba(234,223,200,.6);border-radius:calc(31 * var(--u));background:transparent;
  color:var(--cream);font-weight:600;font-size:calc(20 * var(--u));letter-spacing:.18em;cursor:pointer;
  visibility:hidden;opacity:0;
  transition:opacity .22s ease,visibility 0s linear .22s,filter .15s ease;
}
body.launched #more{visibility:visible;opacity:1;transition:opacity .22s ease,visibility 0s linear 0s,filter .15s ease;}
#more:hover{filter:brightness(1.15);}

#strip{
  position:absolute;left:50%;bottom:calc(48 * var(--u));transform:translateX(-50%);
  display:flex;gap:calc(12 * var(--u));visibility:hidden;opacity:0;
  transition:opacity .22s ease,visibility 0s linear .22s;
}
body.launched #strip{visibility:visible;opacity:1;transition:opacity .22s ease,visibility 0s linear 0s;}
.glass{
  display:flex;align-items:center;height:calc(58 * var(--u));padding:0 calc(26 * var(--u));
  background:rgba(10,9,7,.73);border:1px solid rgba(232,199,122,.36);border-radius:calc(29 * var(--u));
  color:var(--cream);font-weight:500;font-size:calc(17 * var(--u));letter-spacing:.14em;
  text-decoration:none;cursor:pointer;transition:filter .15s ease;
}
.glass:hover{filter:brightness(1.14);}

#status{position:absolute;left:calc(48 * var(--u));bottom:calc(48 * var(--u));font-size:calc(15 * var(--u));letter-spacing:.02em;color:var(--dim);}
#mute{
  position:absolute;right:calc(48 * var(--u));bottom:calc(48 * var(--u));
  font-size:calc(12 * var(--u));letter-spacing:.22em;color:var(--dim);
  white-space:nowrap;box-sizing:border-box;
  background:transparent;border:1px solid rgba(150,162,176,.28);border-radius:calc(14 * var(--u));
  padding:calc(7 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u));cursor:pointer;
}
#mute:hover{color:var(--cream);border-color:rgba(150,162,176,.5);}

.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;
}

/* preload gate — Q4(b) */
body.notready #cta,body.notready #meter,body.notready #hint{opacity:.35;}