/* ══════════════════════════════════════════════════════════════
   iamwalterwhite.com — The Wall · The Machine
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#08080A;
  --bg-2:#0E0E12;
  --bg-3:#15151A;
  --bone:#E6E1D6;
  --dim:#6C6C76;
  --dimmer:#3C3C45;
  --green:#5B8C3E;
  --teal:#4FC3D9;
  --sand:#C8A464;
  --stamp:#9E2B25;

  --f-display:"Oswald","Arial Narrow",sans-serif;
  --f-ui:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --bar-h:52px;
  --wall-fs:11px;
  --wall-col:240px;
  --wall-lh:1.55;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--bone);
  font-family:var(--f-ui);line-height:1.6;overflow-x:hidden;
}
button{font:inherit;color:inherit}
a{color:inherit}

.grain{
  position:fixed;inset:-50%;pointer-events:none;z-index:9000;opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ══ BAR ═══════════════════════════════════════════════════ */
.bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:8000;
  display:flex;align-items:center;gap:1rem;padding:0 clamp(.8rem,2.5vw,1.6rem);
  background:rgba(8,8,10,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid #1B1B21;
}
.brand{
  display:flex;align-items:center;text-decoration:none;flex:none;
  font-family:var(--f-display);font-size:.95rem;letter-spacing:.01em;
}
.brand-el{
  background:var(--green);color:#F2EFE6;display:grid;place-items:center;
  width:1.35em;height:1.35em;border-radius:2px;font-weight:600;margin-right:.12em;
}
.brand-rest{color:var(--bone)}
@media (max-width:560px){.brand-rest{display:none}}

.views{display:flex;gap:.3rem;margin-inline:auto}
.views button{
  background:transparent;border:1px solid transparent;cursor:pointer;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:.5rem .9rem;transition:color .2s,border-color .2s,background .2s;
}
.views button:hover{color:var(--bone)}
.views button.on{color:var(--sand);border-color:var(--sand)}

.court-link{
  flex:none;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);text-decoration:none;transition:color .2s;
}
.court-link:hover{color:var(--sand)}
@media (max-width:720px){.court-link{display:none}}

.view{padding-top:var(--bar-h)}
body[data-view="wall"] .view-machine,
body[data-view="machine"] .view-wall{display:none}

/* ══ WALL — intro ══════════════════════════════════════════ */
.wall-intro{
  min-height:min(560px,72svh);display:flex;flex-direction:column;justify-content:center;
  padding:3rem clamp(1.25rem,5vw,4rem);
  background:radial-gradient(ellipse 90% 60% at 50% 120%,rgba(200,164,100,.10),transparent 70%);
}
.wall-title{
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.6rem,11vw,7rem);line-height:.9;letter-spacing:-.01em;margin:0 0 1.4rem;
}
.wall-sub{
  font-family:var(--f-mono);font-size:clamp(.72rem,1.7vw,.86rem);letter-spacing:.12em;
  color:var(--sand);margin:0 0 .6rem;text-transform:uppercase;
}
.wall-hint{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--dimmer);
  margin:0;max-width:46ch;line-height:1.9;
}

/* ══ WALL — the wall itself ════════════════════════════════ */
.wall{
  padding:0 clamp(.6rem,2vw,1.6rem) 5rem;
  font-family:var(--f-mono);
  font-size:var(--wall-fs);
  line-height:var(--wall-lh);
  color:#B9B4AA;
}
.shard{
  columns:var(--wall-col);column-gap:1.6em;
  break-inside:avoid-column;margin-bottom:.6em;
  contain:layout style;
}
.msg{color:#B9B4AA}
.msg::after{content:" · ";color:var(--dimmer)}
.msg:hover{color:var(--bone);background:rgba(200,164,100,.10)}
.yr{
  display:inline-block;color:var(--green);font-weight:700;
  letter-spacing:.18em;padding:0 .5em;
}
.yr::after{content:" "}

/* Read mode: one message per line, with dates. */
body[data-zoom="3"] .shard{columns:auto}
body[data-zoom="3"] .msg{
  display:block;padding:.18em 0 .18em 8.5em;position:relative;color:#C6C1B6;
}
body[data-zoom="3"] .msg::after{content:none}
body[data-zoom="3"] .msg::before{
  content:attr(data-date);position:absolute;left:0;top:.18em;
  color:var(--dimmer);letter-spacing:.06em;
}
body[data-zoom="3"] .yr{display:block;margin:1.4em 0 .5em;padding:0;font-size:1.6em}
body[data-zoom="0"] .msg:hover{background:none}

/* ══ WALL — controls ═══════════════════════════════════════ */
.controls{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:7900;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  background:rgba(14,14,18,.92);backdrop-filter:blur(14px);
  border:1px solid #23232B;padding:.55rem .8rem;max-width:calc(100% - 1.5rem);
}
body[data-view="machine"] .controls,
body[data-view="machine"] .hud{display:none}
.ctl{display:flex;align-items:center;gap:.5rem}
.ctl-label{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);
}
.zoom-stops,.year-btns{display:flex;gap:.2rem}
.zoom-stops button,.year-btns button,.ctl-random{
  background:transparent;border:1px solid #2A2A33;cursor:pointer;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;color:var(--dim);
  padding:.35rem .55rem;transition:color .18s,border-color .18s,background .18s;
}
.zoom-stops button:hover,.year-btns button:hover,.ctl-random:hover{color:var(--bone);border-color:#3C3C48}
.zoom-stops button.on{color:var(--teal);border-color:var(--teal)}
.ctl-random{text-transform:uppercase;letter-spacing:.14em;color:var(--sand);border-color:#3A3226}
.ctl-random:hover{background:var(--sand);color:var(--bg);border-color:var(--sand)}
@media (max-width:640px){
  .ctl-years{display:none}
  .controls{gap:.7rem}
}

.hud{
  position:fixed;right:.9rem;top:calc(var(--bar-h) + .6rem);z-index:7800;
  display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);pointer-events:none;text-align:right;
  /* It floats over the wall, so it needs its own ground. */
  background:rgba(8,8,10,.9);backdrop-filter:blur(10px);
  border:1px solid #23232B;padding:.5rem .7rem;
}
#hudDate{color:var(--sand);font-weight:700}

/* ══ WALL — the end ════════════════════════════════════════ */
.wall-end{
  padding:clamp(3rem,10vh,7rem) clamp(1.25rem,5vw,4rem) 9rem;
  border-top:1px solid #1B1B21;background:var(--bg-2);
}
.end-label{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sand);margin:0 0 1.6rem;
}
.end-last{
  font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,4.5vw,2.6rem);
  line-height:1.2;margin:0 0 2.6rem;max-width:28ch;color:var(--bone);
}
.end-last::before{content:"\201C"}
.end-last::after{content:"\201D"}
.end-figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.6rem;margin:0 0 2.4rem;padding-top:2rem;border-top:1px solid #1B1B21;
}
.end-figures dt{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:.3rem;
}
.end-figures dd{
  margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,4vw,2.2rem);
  color:var(--teal);line-height:1;
}
.end-note{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--dim);margin:0}

/* ══ THE MACHINE ═══════════════════════════════════════════ */
.view-machine{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem 4rem}
.machine-wrap{width:min(720px,100%);text-align:center}
.machine-title{
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(2rem,8vw,3.6rem);line-height:1;margin:0 0 .6rem;
}
.machine-sub{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;color:var(--dim);
  margin:0 0 2rem;text-transform:uppercase;
}

.cabinet{
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border:1px solid #2A2A33;padding:clamp(1rem,3.5vw,1.8rem);
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
}
.reels{display:grid;gap:.5rem;margin-bottom:1.2rem}
.reel{
  position:relative;height:4.6rem;overflow:hidden;
  background:#050506;border:1px solid #23232B;
  box-shadow:inset 0 14px 22px -14px #000,inset 0 -14px 22px -14px #000;
}
.reel-strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.reel-line{
  height:4.6rem;margin:0;display:flex;align-items:center;justify-content:center;
  padding:.5rem 3.6rem .5rem 1rem;text-align:center;
  font-family:var(--f-mono);font-size:clamp(.72rem,2.1vw,.9rem);line-height:1.5;
  color:var(--bone);
}
.reel.held{border-color:var(--sand);box-shadow:0 0 0 1px rgba(200,164,100,.3),inset 0 14px 22px -14px #000}
.hold{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);z-index:2;
  background:rgba(8,8,10,.85);border:1px solid #2E2E38;cursor:pointer;
  font-family:var(--f-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:.35rem .5rem;transition:color .18s,border-color .18s,background .18s;
}
.hold:hover{color:var(--bone);border-color:#41414E}
.reel.held .hold{color:var(--bg);background:var(--sand);border-color:var(--sand)}

.payout{
  min-height:2.6em;margin:0 0 1.1rem;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);line-height:1.8;
}
.payout.hit{color:var(--sand)}
.payout.jackpot{color:var(--teal)}

.machine-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.spin,.copy{
  border:1px solid;cursor:pointer;font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:.95rem 2.4rem;
  transition:background .2s,color .2s,border-color .2s,transform .07s;
}
.spin{background:var(--stamp);border-color:var(--stamp);color:#F5EAE4}
.spin:hover:not(:disabled){background:#B8332C;border-color:#B8332C}
.spin:active:not(:disabled){transform:scale(.98)}
.spin:disabled{opacity:.5;cursor:progress}
.copy{background:transparent;border-color:#2E2E38;color:var(--dim);padding-inline:1.4rem}
.copy:hover{color:var(--bone);border-color:#41414E}
.machine-count{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);margin:1.3rem 0 0;
}

/* ══ CONTAINMENT ═══════════════════════════════════════════ */
.containment{margin-top:1.6rem}
.cont-toggle{
  width:100%;display:flex;align-items:center;gap:.9rem;text-align:left;
  background:var(--bg-2);border:1px solid #2A2A33;cursor:pointer;padding:.9rem 1rem;
  transition:border-color .2s,background .2s;
}
.cont-toggle:hover{border-color:#41414E}
.cont-led{
  flex:none;width:9px;height:9px;border-radius:50%;
  background:#2F6B3A;box-shadow:0 0 8px rgba(47,107,58,.9);
}
.cont-label{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.cont-label b{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);font-weight:700;
}
.cont-label i{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;color:var(--dim);font-style:normal}
.cont-switch{
  flex:none;width:42px;height:22px;border:1px solid #3A3A46;border-radius:11px;
  background:#0A0A0C;position:relative;transition:background .2s,border-color .2s;
}
.cont-switch span{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#4A4A56;transition:transform .22s cubic-bezier(.2,1,.3,1),background .22s;
}

body.armed .cont-toggle{border-color:var(--stamp);background:rgba(158,43,37,.12)}
body.armed .cont-led{background:var(--stamp);box-shadow:0 0 10px rgba(158,43,37,1);animation:pulse 1.1s ease-in-out infinite}
body.armed .cont-label b{color:#F0B4AE}
body.armed .cont-switch{background:rgba(158,43,37,.35);border-color:var(--stamp)}
body.armed .cont-switch span{transform:translateX(20px);background:#F0B4AE}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* armed cabinet */
body.armed .cabinet{
  border-color:var(--stamp);
  background:linear-gradient(180deg,#1B0F0E,#120A0A);
  box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(158,43,37,.35),inset 0 1px 0 rgba(255,180,170,.08);
}
body.armed .reel{border-color:#4A1F1C;background:#0B0505}
body.armed .reel-line{color:#F5E4E1}
body.armed .machine-title{color:#F0B4AE}
body.armed .spin{background:#B8332C;border-color:#B8332C}
body.armed .payout{color:#C08A84}

/* hazard tape down both edges when armed */
.tape{
  position:fixed;inset:0;pointer-events:none;z-index:7000;opacity:0;transition:opacity .35s;
}
body.armed .tape{opacity:1}
.tape::before,.tape::after{
  content:"";position:absolute;top:0;bottom:0;width:9px;
  background:repeating-linear-gradient(45deg,#C8A100 0 10px,#141414 10px 20px);
  opacity:.5;
}
.tape::before{left:0}
.tape::after{right:0}

/* ══ WARNING DIALOG ════════════════════════════════════════ */
.warn{
  position:fixed;inset:0;z-index:9600;display:grid;place-items:center;
  padding:clamp(1rem,5vw,3rem);background:rgba(4,2,2,.93);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s;
}
.warn.on{opacity:1;visibility:visible}
.warn-tape{
  position:absolute;top:0;left:0;right:0;height:11px;
  background:repeating-linear-gradient(45deg,#C8A100 0 12px,#141414 12px 24px);
}
.warn-box{
  width:min(560px,100%);background:var(--bg-2);border:1px solid var(--stamp);
  padding:clamp(1.5rem,4vw,2.4rem);text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
}
.warn-sigil{color:var(--stamp);display:flex;justify-content:center;margin-bottom:1.1rem}
.warn.final .warn-sigil{animation:pulse .9s ease-in-out infinite}
.warn-step{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .7rem;
}
.warn-title{
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.3rem,4.5vw,2rem);line-height:1.05;margin:0 0 1rem;color:#F0B4AE;
}
.warn-body{
  font-family:var(--f-mono);font-size:.76rem;line-height:1.95;color:var(--bone-dim, #9A948A);
  margin:0 0 1.8rem;text-align:left;
}
.warn-actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media (max-width:440px){.warn-actions{grid-template-columns:1fr}}
.warn-no,.warn-yes{
  border:1px solid;cursor:pointer;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:.95rem .8rem;
  transition:background .2s,color .2s,border-color .2s;
}
.warn-no{background:transparent;border-color:#33333C;color:var(--dim)}
.warn-no:hover{border-color:#4A4A56;color:var(--bone)}
.warn-yes{background:transparent;border-color:var(--stamp);color:#E8938B}
.warn-yes:hover{background:var(--stamp);color:#fff}
.warn.final .warn-yes{background:var(--stamp);color:#fff}
.warn.final .warn-yes:hover{background:#C2392F;border-color:#C2392F}

/* ══ THE BIRTHDAY ══════════════════════════════════════════ */
.birthday{
  margin:clamp(3rem,9vh,5rem) 0 0;padding-top:clamp(2rem,5vh,3rem);
  border-top:1px solid #1B1B21;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.1rem,3.4vw,1.7rem);line-height:1.5;color:var(--bone);
  letter-spacing:.01em;
}

@media (prefers-reduced-motion:reduce){
  .grain{display:none}
  .reel-strip{transition:none !important}
  .cont-led,.warn.final .warn-sigil{animation:none}
  .cont-switch span{transition:none}
}