/* =========================================================
   On Top Soon Forever: shared styles for every page
   White background throughout. Black, silver and royal gold
   are used only as accents: buttons, rules, labels, hovers,
   text selection and the typing cursor.
   Section accent classes (background stays white):
     .white  → gold accents     .black → black accents
     .silver → silver accents   .band  → gold emphasis (gold top rule)
   ========================================================= */

:root{
  --white:#FFFFFF;
  --ink:#0A0A0A;        /* black: text, solid buttons */
  --ink-2:#4A4A4A;      /* secondary text */
  --silver:#D7D8DB;     /* hairlines, quiet borders */
  --silver-2:#9C9EA3;   /* silver accent rules / icons */
  --gold:#C9A227;       /* royal gold: rules, hovers, highlights */
  --gold-deep:#7E5F0B;  /* gold for small text (readable on white) */
  --accent:var(--gold);
  --accent-text:var(--gold-deep);
  --wrap:1240px;
  --pad-x:clamp(20px,5vw,64px);
  --pad-y:clamp(72px,10vw,136px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;accent-color:var(--gold)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--white);color:var(--ink);font-family:Montserrat,Arial,Helvetica,sans-serif;font-size:14px;line-height:1.75;overflow-wrap:break-word;caret-color:var(--gold)}
a{color:inherit}
img,svg,iframe{display:block;max-width:100%}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:700}

/* Highlighting: selected text turns gold, keyboard focus gets a gold ring */
::selection{background:var(--gold);color:var(--ink)}
::-moz-selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Text links inside paragraphs */
p a,.sources a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--silver-2);transition:box-shadow .15s,color .15s}
p a:hover,.sources a:hover{box-shadow:inset 0 -2px 0 var(--gold);color:var(--gold-deep)}

/* ---------- Navigation (white) ---------- */
.nav{position:-webkit-sticky;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--silver);padding-top:env(safe-area-inset-top)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:14px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:11px;letter-spacing:3px;text-transform:uppercase}
.brand img{width:30px;height:30px}
.nav-links{display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:10px 14px;border-radius:999px;border:1.5px solid transparent;transition:border-color .15s,background-color .15s,color .15s}
.nav-links a:hover{border-color:var(--gold)}
.nav-links a[aria-current=page]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.nav-links a[aria-current=page]:hover{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}
.section{padding:var(--pad-y) 0;position:relative;background:var(--white);color:var(--ink)}
.section + .section{border-top:1px solid var(--silver)}
/* Section accents (background always white) */
.section.white{--accent:var(--gold);--accent-text:var(--gold-deep)}
.section.black{--accent:var(--ink);--accent-text:var(--ink)}
.section.silver{--accent:var(--silver-2);--accent-text:var(--ink-2)}
.section.band{--accent:var(--gold);--accent-text:var(--gold-deep);border-top:4px solid var(--gold) !important}

.split{display:grid;grid-template-columns:minmax(180px,3fr) 9fr;gap:clamp(32px,6vw,96px);align-items:start}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.side{position:-webkit-sticky;position:sticky;top:96px}

/* Section label: number + name + accent rule */
.label{display:flex;align-items:center;gap:12px;margin:0 0 28px;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.label .num{color:var(--accent-text)}
.label::after{content:"";flex:0 0 40px;height:2px;background:var(--accent)}

h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.title{font-size:clamp(26px,3.4vw,44px);max-width:18ch;margin-bottom:28px}
.title-sm{font-size:clamp(22px,2.4vw,30px);margin-bottom:20px}
h3{font-size:15px;letter-spacing:0;margin:2.2em 0 .7em;display:flex;align-items:center;gap:10px}
h3::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%;flex:none}
.lede{font-size:16px;line-height:1.7;max-width:56ch}
.muted{color:var(--ink-2);font-size:12px;line-height:1.7}
.meta{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2);line-height:2}
.measure{max-width:62ch}

/* ---------- Buttons ---------- */
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border:1.5px solid;transition:background-color .15s,color .15s,border-color .15s}
.btn-solid{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-line{background:var(--white);color:var(--ink);border-color:var(--silver-2)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.band .btn-solid{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.band .btn-solid:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- Hero (white page, framed artwork) ---------- */
.hero{background:var(--white);padding:clamp(24px,4vw,48px) 0 clamp(56px,8vw,104px)}
.hero img.hero-art{width:calc(100% - 2 * var(--pad-x));max-width:calc(var(--wrap) - 2 * var(--pad-x));margin:0 auto;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center}
.hero-bar{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,48px) var(--pad-x) 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:0}
.hero-bar .meta{border-left:2px solid var(--gold);padding-left:14px}
.hero-bar .btns{margin-top:0}

/* About hero: photo on top, headline below */
.hero.photo img.hero-art{aspect-ratio:21/9}
.hero.photo .hero-bar{display:block}
.hero.photo h1{font-size:clamp(30px,4.6vw,58px);max-width:16ch;margin-bottom:18px}

/* ---------- Full-width photo ---------- */
.photo-strip{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x) clamp(56px,8vw,104px)}
.photo-strip img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center 60%}
.photo-strip figcaption{padding:16px 0 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.photo-strip figcaption span:first-child{color:var(--ink);font-weight:700;border-left:2px solid var(--gold);padding-left:12px}

/* ---------- Article ---------- */
.article{font-size:15px;line-height:1.85}
.article p{max-width:64ch}
.sources{margin-top:48px;padding-top:20px;border-top:1px solid var(--silver)}
.sources a{display:block;font-size:12px;line-height:1.6;margin-top:8px;width:fit-content}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:40px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--silver)}
.stat{padding:24px 20px 22px 0}
.stat + .stat{padding-left:20px;border-left:1px solid var(--silver)}
.stat b{display:block;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.02em;color:var(--gold-deep);line-height:1.1;margin-bottom:6px}
.stat span{font-size:11px;line-height:1.5;color:var(--ink-2);display:block}

/* ---------- Video ---------- */
.video{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;box-shadow:0 0 0 1px var(--silver)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase}
@supports not (aspect-ratio:16/9){.video{height:0;padding-top:56.25%}}

.reel{width:100%;max-width:420px;height:min(720px,80vh);height:min(720px,80svh);min-height:480px;border:1px solid var(--silver);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--white)}
.reel iframe{width:100%;height:100%;min-height:720px;border:0}
.reel-link{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--gold)}
.reel-link:hover{color:var(--gold-deep)}

/* ---------- Service rows ---------- */
.rows{margin:0;border-top:2px solid var(--ink)}
.rows div{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--silver);transition:background-color .15s}
.rows div:hover{background:linear-gradient(90deg,rgba(201,162,39,.10),transparent 70%)}
.rows dt{font-weight:700;font-size:13px;letter-spacing:.5px}
.rows dd{margin:0;font-size:13px;line-height:1.7;color:var(--ink-2)}
.rows .idx{display:block;font-size:10px;letter-spacing:2px;color:var(--gold-deep);margin-bottom:4px}

/* ---------- Footer (white) ---------- */
.site-footer{background:var(--white);color:var(--ink-2);padding:48px var(--pad-x) calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--silver)}
.site-footer .wrap{padding:0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.site-footer img{width:36px;height:36px;margin-bottom:14px}
.site-footer small{font-size:10px;letter-spacing:2px;text-transform:uppercase}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}
.site-footer nav a{font-size:10px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--ink);padding-bottom:3px;border-bottom:1.5px solid transparent}
.site-footer nav a:hover{border-color:var(--gold)}

/* ---------- Important Links ---------- */
.link-list{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.link{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:20px;min-height:76px;padding:14px 0;border-bottom:1px solid var(--silver);text-decoration:none;transition:padding .2s,background-color .15s}
.link:hover{padding-left:10px;background:linear-gradient(90deg,rgba(201,162,39,.12),transparent 70%)}
.ico{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.link:hover .ico{background:var(--gold);color:var(--ink)}
.link .name{font-weight:700;font-size:14px;display:block}
.link .handle{font-size:12px;color:var(--ink-2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link .arrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--silver-2);transition:color .15s}
.link:hover .arrow{color:var(--gold-deep)}
.txt{min-width:0}

/* ---------- Email sign-up ---------- */
.signup form{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;max-width:520px}
.signup input[type=email]{flex:1 1 240px;min-width:0;height:48px;padding:0 20px;border:1.5px solid var(--silver-2);border-radius:999px;background:var(--white);color:var(--ink);font:14px Montserrat,Arial,Helvetica,sans-serif;transition:border-color .15s,box-shadow .15s}
.signup input[type=email]::placeholder{color:#6b6b6b}
.signup input[type=email]:hover{border-color:var(--ink)}
.signup input[type=email]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.signup button{height:48px;padding:0 26px;border:0;border-radius:999px;background:var(--ink);color:var(--white);font:700 11px Montserrat,Arial,Helvetica,sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background-color .15s,color .15s}
.signup button:hover{background:var(--gold);color:var(--ink)}
.signup button[disabled]{opacity:.6;cursor:default}
#msg{min-height:22px;margin-top:14px;font-weight:700;font-size:13px;color:var(--gold-deep)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trap{position:absolute;left:-9999px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .split,.split-even{grid-template-columns:1fr}
  .side{position:static}
  .reel{max-width:100%}
}
@media (max-width:600px){
  .nav-inner{justify-content:center;padding:10px 14px;gap:6px}
  .nav-links{justify-content:center;gap:0}
  .nav-links a{padding:8px 10px;font-size:10px;letter-spacing:1.5px}
  .hero.photo img.hero-art{aspect-ratio:4/3}
  .stats{grid-template-columns:1fr}
  .stat{padding:18px 0}
  .stat + .stat{padding-left:0;border-left:0;border-top:1px solid var(--silver)}
  .rows div{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .photo-strip img{aspect-ratio:4/3}
  .link{grid-template-columns:40px 1fr;gap:14px}
  .link .arrow{display:none}
  .ico{width:40px;height:40px}
}
@media (max-width:360px){
  .nav-links a{padding:8px 7px}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* =========================================================
   Retro pixel type (8-bit handheld game style)
   Applied to: section labels, stats, hero tagline, footer note,
   and any element with class="pixel".
   ========================================================= */
:root{--pixel:"Press Start 2P","Courier New",monospace}
.pixel,.label,.stat b,.hero-bar .meta,.rows .idx,.site-footer small,.photo-strip figcaption,.btn-invert,.signup button{
  font-family:var(--pixel);-webkit-font-smoothing:none;-moz-osx-font-smoothing:auto;font-smooth:never;text-rendering:optimizeSpeed}
.label{font-size:9px;letter-spacing:1px;font-weight:400;line-height:1.6}
.pixel{font-weight:400;letter-spacing:0;line-height:1.6}
.title-sm.pixel{font-size:clamp(13px,1.5vw,17px);max-width:30ch}
.stat b{font-size:clamp(18px,2.2vw,26px);font-weight:400;letter-spacing:0;line-height:1.3;margin-bottom:10px}
.hero-bar .meta{font-size:8px;letter-spacing:1px;line-height:2.4}
.rows .idx{font-size:8px;letter-spacing:0;margin-bottom:8px}
.site-footer small{font-size:8px;letter-spacing:.5px;line-height:2}
.photo-strip figcaption{font-size:8px;letter-spacing:.5px;line-height:2}

/* =========================================================
   Inverse colourway buttons: colours flip on hover,
   with a hard pixel shadow in gold that "presses" in.
   ========================================================= */
.btn-invert{border-radius:0;font-size:9px;letter-spacing:0;font-weight:400;border-width:2px;padding:0 20px;min-height:46px;
  box-shadow:4px 4px 0 var(--gold);transition:background-color .08s steps(2),color .08s steps(2),border-color .08s steps(2),transform .08s steps(2),box-shadow .08s steps(2)}
.btn-invert.btn-solid{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-invert.btn-solid:hover,.btn-invert.btn-solid:focus-visible{background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn-invert.btn-line{background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn-invert.btn-line:hover,.btn-invert.btn-line:focus-visible{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-invert:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gold)}
.btn-invert:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--gold)}
.band .btn-invert.btn-solid{background:var(--gold);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.band .btn-invert.btn-solid:hover{background:var(--ink);color:var(--gold);box-shadow:2px 2px 0 var(--ink)}

/* Sign-up button gets the same inverse effect */
.signup button{border-radius:0;font-size:9px;letter-spacing:0;font-weight:400;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);transition:background-color .08s steps(2),color .08s steps(2),transform .08s steps(2),box-shadow .08s steps(2)}
.signup button:hover{background:var(--white);color:var(--ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gold)}
.signup button:active{transform:translate(4px,4px);box-shadow:none}

@media (max-width:600px){
  .title-sm.pixel{font-size:13px}
  .stat b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.btn-invert:hover,.btn-invert:active,.signup button:hover,.signup button:active{transform:none}}

/* =========================================================
   Game layer: HUD, pixel bursts, toasts
   ========================================================= */
body{padding-bottom:84px}
.hud{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:flex;gap:6px;align-items:center;font-family:var(--pixel);font-size:8px;-webkit-font-smoothing:none}
.hud .xp{display:flex;align-items:center;gap:8px;background:var(--white);border:2px solid var(--ink);padding:8px 10px;box-shadow:3px 3px 0 var(--gold)}
.hud .bar{width:72px;height:8px;border:2px solid var(--ink);background:var(--white);position:relative}
.hud .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);transition:width .25s steps(5)}
.hud .snd{font:inherit;font-size:8px;background:var(--white);color:var(--ink);border:2px solid var(--ink);padding:8px;cursor:pointer;box-shadow:3px 3px 0 var(--gold)}
.hud .snd[aria-pressed=true]{background:var(--ink);color:var(--gold)}
.hud .snd:hover{background:var(--ink);color:var(--white)}
.px{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%)}
.float-xp{position:fixed;z-index:61;pointer-events:none;font-family:var(--pixel);font-size:9px;color:var(--gold-deep);text-shadow:1px 1px 0 var(--white),-1px -1px 0 var(--white);white-space:nowrap}
.toasts{position:fixed;top:calc(80px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:70;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{font-family:var(--pixel);font-size:8px;line-height:1.8;background:var(--ink);color:var(--white);border:2px solid var(--gold);padding:10px 12px;max-width:280px;box-shadow:3px 3px 0 var(--gold);animation:toast-in .2s steps(3)}
.toast.out{opacity:0;transition:opacity .3s steps(3)}
@keyframes toast-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

/* =========================================================
   Basket: floating button + drawer
   ========================================================= */
.basket-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:45;width:64px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--white);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);cursor:pointer;transition:transform .08s steps(2),box-shadow .08s steps(2),background-color .08s steps(2)}
.basket-fab img{width:36px;height:auto;image-rendering:pixelated}
.basket-fab:hover{background:var(--ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gold)}
.basket-fab .count{position:absolute;top:-10px;right:-10px;min-width:22px;height:22px;padding:0 4px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--white);font-family:var(--pixel);font-size:8px;border:2px solid var(--white)}
.basket-fab.has-items .count{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.basket-fab.bump{animation:bump .36s steps(4)}
@keyframes bump{0%{transform:none}30%{transform:translateY(-8px) scale(1.08)}60%{transform:translateY(2px)}100%{transform:none}}

.basket-shade{position:fixed;inset:0;z-index:80;background:rgba(10,10,10,.35)}
.basket{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(420px,100%);background:var(--white);border-left:2px solid var(--ink);box-shadow:-6px 0 0 var(--gold);display:flex;flex-direction:column;transform:translateX(104%);transition:transform .18s steps(4);padding-top:env(safe-area-inset-top)}
.basket.in{transform:none}
.basket-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:2px solid var(--ink)}
.basket-head img{width:32px;image-rendering:pixelated}
.basket-head h2{font-family:var(--pixel);font-size:11px;font-weight:400;letter-spacing:0;flex:1}
.basket-close{width:40px;height:40px;border:2px solid var(--ink);background:var(--white);font-size:14px;cursor:pointer}
.basket-close:hover{background:var(--ink);color:var(--white)}
.basket-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 20px calc(24px + env(safe-area-inset-bottom))}
.basket-items{list-style:none;margin:0;padding:0}
.basket-items li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--silver)}
.basket-items li b{display:block;font-size:13px}
.basket-items li span{font-size:12px;color:var(--ink-2)}
.qty{display:flex;align-items:center;gap:8px;font-family:var(--pixel);font-size:9px}
.qty button{width:32px;height:32px;border:2px solid var(--ink);background:var(--white);font-size:14px;cursor:pointer}
.qty button:hover{background:var(--ink);color:var(--white)}
.basket-empty{padding:28px 0;color:var(--ink-2)}
.basket-total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 6px;border-top:2px solid var(--ink);margin-top:-1px}
.basket-total span{font-family:var(--pixel);font-size:9px}
.basket-total b{font-family:var(--pixel);font-size:14px;font-weight:400;color:var(--gold-deep)}
.basket-note{font-size:12px;color:var(--ink-2);margin:6px 0 0}
.checkout{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.checkout-step{font-family:var(--pixel);font-size:8px;margin:6px 0 0}
.checkout label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}
.checkout label span{font-weight:400;color:var(--ink-2)}
.checkout input,.checkout textarea{font:14px Montserrat,Arial,sans-serif;padding:12px 14px;border:1.5px solid var(--silver-2);background:var(--white);color:var(--ink);border-radius:0}
.checkout input:focus,.checkout textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.checkout-msg{min-height:18px;margin:0;font-size:12px;font-weight:600;color:var(--gold-deep)}
.checkout .btn{width:100%}
.pay{display:flex;flex-direction:column;gap:10px}
html.basket-open{overflow:hidden}

/* =========================================================
   Service sheet
   ========================================================= */
.sheet-basket{width:96px;height:auto;margin-top:28px;image-rendering:pixelated}
.sheet-group{display:flex;align-items:center;gap:12px;font-size:15px;margin:48px 0 0;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.sheet-group:first-of-type{margin-top:0}
.sheet-group span{font-family:var(--pixel);font-size:9px;font-weight:400;color:var(--gold-deep)}
.svc-list{list-style:none;margin:0;padding:0}
.svc{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--silver);transition:background-color .15s}
.svc:hover{background:linear-gradient(90deg,rgba(201,162,39,.10),transparent 70%)}
.svc-name{font-size:14px;margin:0 0 4px;display:block}
.svc-name::before{display:none}
.svc-desc{font-size:12px;color:var(--ink-2);margin:0;max-width:52ch}
.price{font-family:var(--pixel);font-size:10px;white-space:nowrap}
.svc .btn{min-height:40px;padding:0 16px}
@media (max-width:600px){
  .svc{grid-template-columns:1fr auto;gap:12px}
  .svc > div{grid-column:1 / -1}
  .hud .bar{width:48px}
  .hud .xp{padding:7px 8px}
  .basket-fab{width:58px;height:54px}
}
@media (prefers-reduced-motion:reduce){.basket{transition:none}.basket-fab.bump{animation:none}}

/* =========================================================
   Top-tier deal card (service sheet)
   ========================================================= */
.deal{position:relative;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--gold);padding:clamp(24px,4vw,40px);margin:0 0 56px;background:var(--white)}
.deal-badge{display:inline-block;font-family:var(--pixel);font-size:8px;background:var(--gold);color:var(--ink);padding:8px 10px;margin:0 0 18px;border:2px solid var(--ink)}
.deal-title{font-family:var(--pixel);font-weight:400;font-size:clamp(14px,1.8vw,20px);line-height:1.5;letter-spacing:0;margin:0 0 14px}
.deal-desc{font-size:14px;max-width:60ch}
.deal-perks{list-style:none;padding:0;margin:18px 0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 24px}
.deal-perks li{font-size:13px;display:flex;gap:10px;align-items:baseline}
.deal-perks li::before{content:"";width:8px;height:8px;background:var(--gold);border:1.5px solid var(--ink);flex:none;transform:translateY(-1px)}
.deal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--silver);padding-top:20px}
.deal-foot .price{font-size:12px}
.deal-foot .btns{margin-top:0}
.deal-fine{font-size:11px;color:var(--ink-2);margin-top:16px}

/* =========================================================
   Our Work carousel
   ========================================================= */
.work{padding-bottom:clamp(56px,8vw,104px)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.work-head .title-sm{margin-bottom:0}
.car-nav{display:flex;align-items:center;gap:12px}
.car-btn{width:46px;height:46px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font-size:12px;cursor:pointer;box-shadow:3px 3px 0 var(--gold);transition:background-color .08s steps(2),color .08s steps(2),transform .08s steps(2),box-shadow .08s steps(2)}
.car-btn:hover{background:var(--ink);color:var(--white);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gold)}
.car-count{font-family:var(--pixel);font-size:9px;min-width:72px;text-align:center}

.car-track{list-style:none;margin:0;padding:8px max(var(--pad-x),calc((100vw - var(--wrap)) / 2 + var(--pad-x))) 24px;display:flex;gap:clamp(16px,3vw,40px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab}
.car-track::-webkit-scrollbar{display:none}
.car-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.car-track:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.slide{flex:0 0 min(860px,86vw);scroll-snap-align:center;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;
  opacity:.38;transform:scale(.9);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;user-select:none;-webkit-user-select:none}
.slide.is-active{opacity:1;transform:none}
.slide-media{margin:0;position:relative;aspect-ratio:1/1;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--gold);overflow:hidden;background:var(--ink)}
.slide-media img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.slide.is-active .slide-media img{transform:scale(1.02)}
.slide:not(.is-active) .slide-media{box-shadow:0 0 0 var(--gold)}
.slide-copy{min-width:0}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.tags span{font-family:var(--pixel);font-size:7px;line-height:1;padding:7px 8px;border:1.5px solid var(--ink);background:var(--white)}
.tags span:first-child{background:var(--gold)}
.slide-title{font-family:var(--pixel);font-weight:400;font-size:clamp(15px,2vw,22px);line-height:1.4;letter-spacing:0;margin:0 0 10px;display:block}
.slide-title::before{display:none}
.slide-artist{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.slide-copy > p:not(.tags):not(.slide-artist){font-size:14px;max-width:44ch}
.listen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.listen .meta{width:100%;font-size:10px;margin:0 0 2px}
.listen a{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;padding:9px 12px;border:1.5px solid var(--silver-2);transition:background-color .08s steps(2),color .08s steps(2),border-color .08s steps(2)}
.listen a:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

.video-slide .yt,.video-slide .yt-play,.video-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{padding:0;background:var(--ink);cursor:pointer;display:block}
.yt-play img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .15s}
.yt-play:hover img{opacity:1}
.yt-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--pixel);font-size:10px;background:var(--gold);color:var(--ink);padding:12px 14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.yt-play:hover .yt-icon{background:var(--ink);color:var(--gold);box-shadow:3px 3px 0 var(--gold)}

.car-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px}
.car-dots{display:flex;gap:8px}
.car-dot{width:12px;height:12px;padding:0;border:2px solid var(--ink);background:var(--white);cursor:pointer;transition:background-color .1s,width .2s}
.car-dot[aria-selected=true]{background:var(--gold);width:28px}
.car-foot .btn{margin-top:0}

@media (max-width:800px){
  .slide{flex-basis:84vw;grid-template-columns:1fr;gap:18px;align-items:start}
  .slide-media{box-shadow:5px 5px 0 var(--gold)}
}
@media (prefers-reduced-motion:reduce){.slide,.slide-media img{transition:none;transform:none}.car-track{scroll-behavior:auto}}

/* =========================================================
   Easter eggs (hidden in the carousel artwork)
   ========================================================= */
.egg{position:absolute;right:12px;bottom:12px;z-index:3;width:34px;height:40px;padding:4px;border:0;background:transparent;cursor:pointer;opacity:.55;transition:opacity .15s,transform .15s steps(3)}
.egg img{width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 rgba(10,10,10,.6))}
.slide.is-active .egg{animation:egg-wobble 4.5s steps(4) infinite 1.2s}
.egg:hover,.egg:focus-visible{opacity:1;transform:scale(1.15) rotate(-6deg);animation:none}
.egg.found{opacity:.9}
.egg.found img{filter:drop-shadow(0 0 0 var(--gold)) drop-shadow(2px 2px 0 var(--gold))}
@keyframes egg-wobble{0%,86%,100%{transform:none}89%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.egg-reveal{position:absolute;left:12px;right:12px;bottom:60px;z-index:2;background:var(--white);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);padding:14px 16px;animation:egg-pop .2s steps(3)}
.egg-kicker{font-family:var(--pixel);font-size:8px;color:var(--gold-deep);margin:0 0 8px}
.egg-srv{font-size:13px;font-weight:700;line-height:1.5;margin:0 0 10px}
.egg-reveal a{font-family:var(--pixel);font-size:8px;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px}
.egg-reveal a:hover{color:var(--gold-deep)}
@keyframes egg-pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.egg-hint{margin:12px 0 0}
.egg-tally{font-family:var(--pixel);font-size:8px;margin-left:8px;padding:5px 7px;border:1.5px solid var(--ink);background:var(--gold);color:var(--ink);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.slide.is-active .egg{animation:none}.egg-reveal{animation:none}}

/* Phone: shorter menu label, pop-ups above the basket instead of over the menu */
@media (max-width:600px){
  .hide-sm{display:none}
  .toasts{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));right:12px;left:12px;align-items:stretch}
  .toast{max-width:none}
}

/* =========================================================
   COMPACT PASS: smaller type + buttons, tighter spacing,
   one section in focus at a time. (Overrides rules above.)
   ========================================================= */
:root{--pad-y:clamp(52px,7vw,96px);--wrap:1160px}
body{font-size:13px;line-height:1.7}
.title{font-size:clamp(22px,2.6vw,32px);margin-bottom:20px}
.title-sm{font-size:clamp(17px,1.8vw,22px);margin-bottom:12px}
.title-sm.pixel{font-size:clamp(11px,1.15vw,14px);line-height:1.7}
.lede{font-size:14px}
.muted{font-size:12px}
.meta{font-size:10px}
.label{font-size:8px;margin-bottom:18px}
.label::after{flex-basis:28px}
.btns{margin-top:20px;gap:8px}
.btn{min-height:40px;padding:0 18px;font-size:10px;letter-spacing:1.5px}
.btn-invert{min-height:40px;font-size:8px;padding:0 16px;box-shadow:3px 3px 0 var(--gold)}
.btn-invert:hover{box-shadow:1px 1px 0 var(--gold)}
.nav-inner{padding-top:10px;padding-bottom:10px}
.nav-links a{font-size:10px;padding:8px 12px}
.brand{font-size:10px}
.brand img{width:26px;height:26px}

/* Hero: shorter so the work shows sooner */
.hero{padding:clamp(16px,3vw,32px) 0 clamp(20px,3vw,32px)}
.hero img.hero-art{aspect-ratio:auto;height:min(58vh,52vw);height:min(58svh,52vw);object-fit:cover;background:#000}
.hero-bar{padding-top:18px}
.hero-bar .meta{font-size:7px;line-height:2}

/* Carousel: smaller copy */
.work{padding-top:clamp(36px,5vw,64px)}
.work-head{margin-bottom:18px}
.car-btn{width:40px;height:40px;font-size:10px}
.slide{flex-basis:min(760px,86vw)}
.slide-title{font-size:clamp(12px,1.4vw,16px)}
.slide-artist{font-size:10px;margin-bottom:10px}
.slide-copy > p:not(.tags):not(.slide-artist){font-size:13px}
.listen{margin-top:14px;gap:6px}
.listen a{font-size:9px;padding:8px 10px}
.egg-tally{font-size:7px}

/* Beat of the week + spotlight */
.split-even{gap:clamp(24px,4vw,64px)}
.reel{max-width:360px;height:min(560px,70vh);height:min(560px,70svh);min-height:420px}

/* News: compact card, full story on tap */
.news{max-width:760px}
.news .title-sm{max-width:30ch}
.stats{margin:22px 0;border-top-width:1.5px}
.stat{padding:16px 16px 14px 0}
.stat + .stat{padding-left:16px}
.stat b{font-size:clamp(15px,1.6vw,20px);margin-bottom:6px}
.stat span{font-size:10px}
.more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:8px;padding:12px 14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold);background:var(--white);transition:background-color .08s steps(2),color .08s steps(2)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"▼";font-size:8px}
.more[open] summary::after{content:"▲"}
.more summary:hover{background:var(--ink);color:var(--white)}
.more .article{font-size:14px;line-height:1.8;padding-top:24px}
.more .article h3{font-size:13px}
.sources{margin-top:28px}

/* Sign-up: single compact row */
.signup .title-sm{margin-bottom:4px}
.signup form{margin-top:16px}
.signup input[type=email]{height:42px;font-size:13px}
.signup button{height:42px;font-size:8px;padding:0 18px}

/* Footer + HUD a touch smaller */
.site-footer{padding-top:36px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.hud{font-size:7px}
.hud .snd{font-size:7px}

/* One section in focus at a time (the one in the middle of the screen) */
html.js main > .section{transition:opacity .45s ease}
html.js main > .section:not(.in-focus){opacity:.4}
html.js main > .section.in-focus{opacity:1}

/* iPhone */
@media (max-width:600px){
  body{font-size:13px}
  .hero img.hero-art{height:auto;aspect-ratio:16/10;object-fit:cover}
  .hero-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-bar .btns{width:100%}
  .hero-bar .btn{flex:1}
  .work-head{align-items:flex-start}
  .car-nav{width:100%;justify-content:space-between}
  .slide{flex-basis:86vw}
  .slide-copy > p:not(.tags):not(.slide-artist){font-size:12px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat{padding:12px 8px 10px 0}
  .stat + .stat{padding-left:8px;border-left:1px solid var(--silver);border-top:0}
  .stat b{font-size:14px}
  .stat span{font-size:9px}
  .reel{max-width:100%;height:520px;min-height:0}
  .split-even > div{min-width:0}
  .btn{min-height:42px}
}
@media (prefers-reduced-motion:reduce){html.js main > .section{transition:none}}
.hero img.hero-art{height:min(50vh,46vw);height:min(50svh,46vw)}
@media (max-width:600px){
  .hero img.hero-art{height:auto}
  .hud .xp{gap:6px;padding:6px 7px}
  .hud .pts{display:none}
  .hud .bar{width:40px;height:7px}
  .hud .snd{padding:6px}
  body{padding-bottom:76px}
}

/* =========================================================
   GAME BAR: level, SFX and basket pinned under the menu.
   Lives inside the sticky header so it stays at the top while scrolling.
   ========================================================= */
body{padding-bottom:0}
.nav{position:-webkit-sticky;position:sticky}
.gamebar{border-top:1px solid var(--silver);background:rgba(255,255,255,.97);overflow:hidden;max-height:60px;transition:max-height .22s steps(4),opacity .22s steps(4)}
.gamebar-inner{max-width:var(--wrap);margin:0 auto;padding:7px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:12px}
.gamebar .hud{position:static;z-index:auto;padding:0;gap:6px}
.gamebar .hud .xp,.gamebar .hud .snd{box-shadow:2px 2px 0 var(--gold)}
.gamebar .hud .xp{padding:6px 8px}
.gamebar .hud .snd{padding:6px 8px}
.gb-right{display:flex;align-items:center;gap:10px}
.gamebar .basket-fab{position:relative;right:auto;bottom:auto;z-index:auto;width:auto;height:30px;padding:0 10px 0 8px;gap:6px;box-shadow:2px 2px 0 var(--gold)}
.gamebar .basket-fab img{width:22px}
.gamebar .basket-fab .count{position:static;min-width:18px;height:18px;border-width:1.5px;font-size:7px}
.gamebar .basket-fab.bump{animation:bump-sm .36s steps(4)}
@keyframes bump-sm{0%,100%{transform:none}40%{transform:translateY(-3px) scale(1.06)}}
.gb-hide{font-family:var(--pixel);font-size:7px;background:none;border:0;color:var(--ink-2);padding:8px 4px;cursor:pointer;white-space:nowrap}
.gb-hide:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}

/* Collapsed state: bar tucked away, a small tab hangs under the menu */
.gb-tab{position:absolute;right:max(14px,env(safe-area-inset-right));top:100%;display:none;align-items:center;gap:6px;font-family:var(--pixel);font-size:7px;color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-top:0;padding:6px 9px 7px;cursor:pointer;box-shadow:2px 2px 0 var(--gold)}
.gb-tab img{width:14px;height:auto;image-rendering:pixelated}
.gb-tab:hover{background:var(--ink);color:var(--white)}
html.hud-hidden .gamebar{max-height:0;opacity:0;border-top-color:transparent}
html.hud-hidden .gb-tab{display:inline-flex}

/* Pop-ups now drop in under the header (all screen sizes) */
.toasts{top:calc(118px + env(safe-area-inset-top));bottom:auto;left:auto;right:max(12px,env(safe-area-inset-right));align-items:flex-end}
html.hud-hidden .toasts{top:calc(80px + env(safe-area-inset-top))}
.side{top:132px}

@media (max-width:600px){
  .gamebar-inner{padding:6px 14px}
  .gamebar .hud .pts{display:none}
  .gamebar .hud .bar{width:44px}
  .gamebar .basket-fab{height:30px}
  .gb-hide{font-size:7px}
  .toasts{top:calc(132px + env(safe-area-inset-top));left:12px;right:12px;align-items:stretch}
  html.hud-hidden .toasts{top:calc(100px + env(safe-area-inset-top))}
  .toast{max-width:none}
}
@media (prefers-reduced-motion:reduce){.gamebar{transition:none}}
html.hud-hidden .toasts{top:calc(100px + env(safe-area-inset-top))}
@media (max-width:600px){html.hud-hidden .toasts{top:calc(128px + env(safe-area-inset-top))}}
.nav,.gamebar{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}

/* =========================================================
   App install button + how-to dialog
   ========================================================= */
.gb-app{font-family:var(--pixel);font-size:7px;height:30px;padding:0 10px;background:var(--white);color:var(--ink);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--gold);cursor:pointer;white-space:nowrap;transition:background-color .08s steps(2),color .08s steps(2)}
.gb-app:hover{background:var(--ink);color:var(--white)}
.gb-app.ready{background:var(--gold)}
.gb-app.ready:hover{background:var(--ink);color:var(--gold)}
.install-dlg{max-width:min(420px,calc(100vw - 32px));padding:0;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--gold);background:var(--white);color:var(--ink)}
.install-dlg::backdrop{background:rgba(10,10,10,.4)}
.install-dlg form{padding:26px 24px 24px}
.install-dlg img{width:56px;height:56px;border:2px solid var(--ink);margin-bottom:14px}
.install-dlg h2{font-family:var(--pixel);font-weight:400;font-size:12px;line-height:1.6;letter-spacing:0;margin:0 0 14px}
.install-dlg ol{margin:0 0 20px;padding-left:20px;font-size:13px;line-height:1.7}
.install-dlg li{margin-bottom:8px}
.install-dlg .key{display:inline-block;min-width:20px;text-align:center;border:1.5px solid var(--ink);padding:0 4px;font-size:11px}
.install-dlg .btn{width:100%}
/* Running as an installed app: respect the iPhone notch/home bar */
html.is-app .nav{padding-top:env(safe-area-inset-top)}
@media (max-width:600px){.gb-app{padding:0 8px}}

/* =========================================================
   ADMIN SIDEBAR (only appears after unlocking on your computer)
   ========================================================= */
.gb-admin{font-family:var(--pixel);font-size:7px;height:30px;padding:0 10px;background:var(--ink);color:var(--gold);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--gold);cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-right:6px}
.gb-admin:hover{background:var(--gold);color:var(--ink)}
.gb-admin-n{background:var(--gold);color:var(--ink);padding:3px 5px;border:1px solid var(--ink)}
.gamebar-inner{justify-content:flex-start}
.gamebar-inner .gb-right{margin-left:auto}

.admin-side{position:fixed;top:0;bottom:0;left:0;z-index:75;width:340px;max-width:100%;background:var(--white);border-right:2px solid var(--ink);box-shadow:4px 0 0 var(--gold);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(16px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-104%);transition:transform .18s steps(4);font-size:12px}
html.admin-open .admin-side{transform:none}
@media (min-width:1100px){
  html.admin-open body{padding-left:340px}
  html.admin-open .admin-side{box-shadow:none}
}
.as-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.as-badge{font-family:var(--pixel);font-size:8px;background:var(--ink);color:var(--gold);padding:7px 9px}
.as-close{width:32px;height:32px;border:1.5px solid var(--ink);background:var(--white);cursor:pointer}
.as-close:hover{background:var(--ink);color:var(--white)}
.as-email{display:block;font-size:12px;font-weight:700;text-decoration:none;padding:6px 0 14px;border-bottom:1px solid var(--silver);word-break:break-all}
.as-email:hover{color:var(--gold-deep)}

.as-quote{margin:16px 0;padding:14px 14px 12px;background:var(--ink);color:var(--white);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold)}
.as-q-kicker{font-family:var(--pixel);font-size:7px;color:var(--gold);margin:0 0 10px}
.as-quote blockquote{margin:0 0 8px;font-size:14px;font-weight:700;line-height:1.5}
.as-quote figcaption{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--silver)}

.as-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.as-links a{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border:1.5px solid var(--ink);text-decoration:none;transition:background-color .08s steps(2),color .08s steps(2)}
.as-links a b{font-size:11px}
.as-links a span{font-size:9px;color:var(--ink-2)}
.as-links a:first-child{grid-column:1 / -1;background:var(--gold)}
.as-links a:hover{background:var(--ink);color:var(--white)}
.as-links a:hover span{color:var(--silver)}

.as-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--silver);margin-bottom:14px}
.as-stats div{padding:10px 6px 8px 0}
.as-stats div + div{padding-left:8px;border-left:1px solid var(--silver)}
.as-stats b{display:block;font-family:var(--pixel);font-weight:400;font-size:12px;color:var(--gold-deep);margin-bottom:4px}
.as-stats span{font-size:9px;color:var(--ink-2);text-transform:uppercase;letter-spacing:1px}

.as-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.as-title{font-family:var(--pixel);font-size:8px;margin:0;flex:1}
.as-filter{display:flex}
.as-filter button,.as-refresh{font:600 10px Montserrat,Arial,sans-serif;height:28px;padding:0 9px;border:1.5px solid var(--ink);background:var(--white);cursor:pointer}
.as-filter button + button{border-left:0}
.as-filter button[aria-pressed=true]{background:var(--ink);color:var(--white)}
.as-refresh{width:30px;padding:0;font-size:13px}
.as-refresh:hover{background:var(--gold)}
.as-status{font-size:11px;color:var(--ink-2);margin:4px 0 10px}

.as-orders{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.as-order{border:1.5px solid var(--ink);padding:10px 11px;position:relative}
.as-order.s-new{box-shadow:3px 3px 0 var(--gold)}
.as-order.s-new::before{content:"NEW";position:absolute;top:-8px;right:8px;font-family:var(--pixel);font-size:6px;background:var(--gold);border:1px solid var(--ink);padding:3px 4px}
.as-order.s-done,.as-order.s-cancelled{opacity:.55}
.ao-top{display:flex;justify-content:space-between;gap:8px}
.ao-top b{font-size:13px}
.ao-top span{font-size:10px;color:var(--ink-2)}
.ao-email{display:block;font-size:11px;color:var(--gold-deep);text-decoration:none;margin:2px 0 6px;word-break:break-all}
.ao-email:hover{text-decoration:underline}
.ao-items{font-size:11px;margin:0 0 4px}
.ao-total{font-family:var(--pixel);font-size:8px;margin:0 0 6px}
.ao-id{font-family:Montserrat,Arial,sans-serif;font-size:9px;color:var(--ink-2);margin-left:6px}
.ao-notes{font-size:11px;color:var(--ink-2);background:#F6F6F4;padding:6px 8px;margin:0 0 8px;white-space:pre-wrap}
.ao-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ao-btn{font-size:10px;font-weight:700;text-decoration:none;padding:6px 8px;border:1.5px solid var(--ink)}
.ao-btn:first-child{background:var(--ink);color:var(--white)}
.ao-btn:hover{background:var(--gold);color:var(--ink)}
.ao-actions select{margin-left:auto;font:600 10px Montserrat,Arial,sans-serif;height:28px;border:1.5px solid var(--ink);background:var(--white);padding:0 6px}
.as-lock{width:100%;font:600 10px Montserrat,Arial,sans-serif;height:34px;border:1.5px dashed var(--silver-2);background:var(--white);color:var(--ink-2);cursor:pointer}
.as-lock:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:600px){.admin-side{width:100%}}
@media (prefers-reduced-motion:reduce){.admin-side{transition:none}}
.as-links a.as-hq{grid-column:1 / -1;background:#0B0C10;color:#39FF88;border-color:#0B0C10}
.as-links a.as-hq span{color:#9097A9}
.as-links a.as-hq:hover{background:#39FF88;color:#0B0C10}
.as-links a.as-hq:hover span{color:#0B0C10}
.as-links a:nth-child(2){grid-column:1 / -1;background:var(--gold)}
.as-links a:first-child{background:#0B0C10}
.svc-eta{font-family:var(--pixel);font-size:7px;color:var(--gold-deep);margin:8px 0 0 !important}

/* =========================================================
   Order confirmation + receipt
   ========================================================= */
.confirm .lede{margin-bottom:28px}
.receipt{max-width:760px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--gold);padding:clamp(18px,3vw,28px);margin-bottom:36px;background:var(--white)}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:14px}
.rc-head img{image-rendering:pixelated}
.rc-id{font-family:var(--pixel);font-weight:400;font-size:clamp(11px,1.4vw,14px);letter-spacing:0;margin:6px 0 0}
.rc-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.rc-who dt{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2)}
.rc-who dd{margin:2px 0 0;font-size:13px;font-weight:600;word-break:break-word}
.rc-items{width:100%;border-collapse:collapse;font-size:13px}
.rc-items th,.rc-items td{text-align:left;padding:10px 8px 10px 0;border-bottom:1px solid var(--silver);vertical-align:top}
.rc-items thead th{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--ink)}
.rc-items tbody th{font-weight:700}
.rc-items .num-col{text-align:right;padding-right:0;white-space:nowrap}
.rc-items tfoot th,.rc-items tfoot td{border-bottom:0;padding-top:14px;font-weight:700}
.rc-items tfoot td{font-family:var(--pixel);font-size:11px;color:var(--gold-deep)}
.rc-quote{font-size:12px;color:var(--ink-2);margin:12px 0 0}
.rc-notes{margin-top:14px;background:#F6F6F4;padding:10px 12px}
.rc-notes p:last-child{white-space:pre-wrap;font-size:12px}
.next{max-width:760px}
.steps{margin:0;padding-left:20px;font-size:13px;line-height:1.8}
.steps li{margin-bottom:6px}
@media (max-width:600px){
  .rc-who{grid-template-columns:1fr}
  .rc-items thead{display:none}
  .rc-items tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--silver)}
  .rc-items th,.rc-items td{border:0;padding:0}
  .rc-items tbody td:nth-child(2)::before{content:"Qty ";color:var(--ink-2)}
  .rc-items tbody td:nth-child(3){grid-column:1 / -1;font-size:11px;color:var(--gold-deep)}
  .rc-items tbody td:nth-child(4){grid-row:1;grid-column:2}
  .rc-items tfoot tr{display:flex;justify-content:space-between}
}
@media print{
  .nav,.gamebar,.gb-tab,.site-footer,.hud,.basket-fab,.toasts,#pay-btns,.next .btns,.admin-side{display:none !important}
  .receipt{box-shadow:none}
  html.js main > .section{opacity:1 !important}
}

/* =========================================================
   Free beat reward
   ========================================================= */
.gb-gift{position:relative;overflow:hidden;font-family:var(--pixel);font-size:7px;height:30px;padding:0 9px 0 6px;display:inline-flex;align-items:center;gap:6px;background:var(--white);color:var(--ink);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--gold);cursor:pointer;white-space:nowrap}
.gb-gift img{width:18px;height:auto;image-rendering:pixelated;position:relative;z-index:1}
.gb-gift span{position:relative;z-index:1}
.gb-gift i{position:absolute;left:0;bottom:0;height:3px;background:var(--gold);transition:width .25s steps(5)}
.gb-gift:not(.open) img{filter:grayscale(1);opacity:.7}
.gb-gift.open{background:var(--gold)}
.gb-gift:hover{background:var(--ink);color:var(--white)}
.gb-gift.bump{animation:bump-sm .36s steps(4) 3}
.reward-dlg form{text-align:center}
.reward-gift{width:72px !important;height:auto !important;border:0 !important;margin:0 auto 10px !important;image-rendering:pixelated;animation:egg-wobble 2.4s steps(4) infinite}
.reward-kicker{font-family:var(--pixel);font-size:8px;color:var(--gold-deep);margin:0 0 8px}
.reward-dlg h2{margin-bottom:6px !important}
.reward-name{font-weight:700;font-size:14px;margin:0 0 14px}
.reward-audio{width:100%;margin:0 0 14px}
.reward-dl{width:100%;margin-bottom:10px}
.reward-terms{font-size:11px;color:var(--ink-2);line-height:1.5;margin:0 0 12px;text-align:left}
.reward-more{display:flex;justify-content:center;gap:16px;margin-bottom:14px}
.reward-more a{font-size:11px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--gold)}
@media (max-width:600px){.gb-gift span{display:none}.gb-gift.open span{display:inline}}
@media (prefers-reduced-motion:reduce){.reward-gift,.gb-gift.bump{animation:none}}

/* =========================================================
   Menu: 6 tabs scroll sideways on phones
   ========================================================= */
@media (max-width:600px){
  .nav-links{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:none}
}

/* XP discount chip (game bar) + basket block */
.gb-disc{font-family:var(--pixel);font-size:7px;height:30px;display:inline-flex;align-items:center;padding:0 9px;margin-left:6px;background:var(--gold);color:var(--ink);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);text-decoration:none;white-space:nowrap}
.gb-disc:hover{background:var(--ink);color:var(--gold)}
.xp-disc{margin:12px 0 0;padding:12px 14px;border:2px solid var(--ink);background:#FBF6E6;box-shadow:3px 3px 0 var(--gold)}
.xp-use{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;cursor:pointer}
.xp-use input{width:20px;height:20px;accent-color:var(--gold)}
.xp-use b{font-family:var(--pixel);font-size:10px;color:var(--gold-deep);margin-left:auto}
.xp-net{margin:8px 0 0;font-size:12px;color:var(--ink-2)}
.xp-net b{color:var(--ink)}
.xp-login{margin:0;font-size:12px;line-height:1.6}
.xp-login a{font-weight:700}
.rc-items tfoot tr.rc-disc th,.rc-items tfoot tr.rc-disc td{font-weight:600;color:var(--gold-deep);font-family:Montserrat,Arial,sans-serif;font-size:13px;padding-top:12px}

/* =========================================================
   Submit page
   ========================================================= */
.subform{max-width:720px;display:flex;flex-direction:column;gap:16px}
.sub-type{border:0;padding:0;margin:0 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type-card{position:relative;cursor:pointer}
.type-card input{position:absolute;opacity:0;pointer-events:none}
.tc-box{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:2px solid var(--silver-2);height:100%;transition:border-color .1s,box-shadow .1s,background-color .1s}
.tc-box b{font-size:14px}
.tc-box span{font-size:12px;color:var(--ink-2)}
.type-card input:checked + .tc-box{border-color:var(--ink);box-shadow:4px 4px 0 var(--gold);background:#FBF6E6}
.type-card input:focus-visible + .tc-box{outline:2px solid var(--gold);outline-offset:3px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.subform label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}
.subform label span{font-weight:400;color:var(--ink-2)}
.subform input:not([type=radio]):not([type=checkbox]),.subform textarea{font:14px Montserrat,Arial,sans-serif;padding:12px 14px;border:1.5px solid var(--silver-2);border-radius:0;background:var(--white);color:var(--ink)}
.subform input:focus,.subform textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.f-check{flex-direction:row !important;align-items:center;gap:10px !important;font-weight:500 !important}
.f-check input{width:18px;height:18px;accent-color:var(--gold)}
.sub-msg{min-height:18px;margin:0;font-size:12px;font-weight:600;color:var(--gold-deep)}
.subform .btn{align-self:flex-start}
.sub-done{max-width:640px}

/* =========================================================
   Account page
   ========================================================= */
.login{max-width:640px}
.login-box{margin-top:22px;display:flex;flex-direction:column;gap:8px;max-width:520px}
.login-box label{font-size:12px;font-weight:600}
.login-box .row{display:flex;gap:10px;flex-wrap:wrap}
.login-box input{flex:1 1 220px;min-width:0;height:48px;padding:0 16px;font:15px Montserrat,Arial,sans-serif;border:2px solid var(--ink);border-radius:0}
.login-box input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
#l-code{font-family:var(--pixel);font-size:18px;letter-spacing:8px;text-align:center;max-width:240px}
.l-msg{min-height:18px;margin:0;font-size:12px;font-weight:600;color:var(--gold-deep)}
.l-alt{font-size:12px;margin:4px 0 0}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;cursor:pointer;color:var(--ink)}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
.card{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.card .big{font-family:var(--pixel);font-size:clamp(16px,2vw,22px);margin:2px 0 4px;line-height:1.3}
.card .btn{margin-top:auto;align-self:flex-start}
.c-disc .big{color:var(--gold-deep)}
.bar{height:12px;border:2px solid var(--ink);position:relative;background:var(--white)}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);transition:width .3s steps(6)}
.small{font-size:12px;color:var(--ink-2);margin:0}
.name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.name-row label{font-size:12px;font-weight:600}
.name-row input{height:42px;padding:0 12px;font:14px Montserrat,Arial,sans-serif;border:1.5px solid var(--silver-2);min-width:220px}
.list-sec{border-top:2px solid var(--ink);padding:18px 0 22px}
.sec-h{font-size:15px;margin:0 0 10px}
.acct-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.acct-list li{border:1px solid var(--silver);padding:10px 12px}
.acct-list li p{margin:4px 0 0;font-size:13px}
.acct-list .empty{border-style:dashed;color:var(--ink-2);font-size:13px}
.li-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.st{font-family:var(--pixel);font-size:7px;padding:5px 6px;border:1.5px solid var(--ink)}
.st-new{background:var(--white)}
.st-contacted,.st-listening,.st-replied{background:#FBF6E6}
.st-paid,.st-done,.st-featured{background:var(--gold)}
.st-cancelled,.st-passed{background:var(--silver);color:var(--ink-2)}
@media (max-width:760px){
  .dash-grid{grid-template-columns:1fr}
  .sub-type,.f-grid{grid-template-columns:1fr}
}

[hidden]{display:none !important}

/* ===== Login: mailing list opt-in ===== */
.l-join{margin-top:12px;font-size:12px;color:var(--muted, #4A4A4A);display:flex;gap:8px;align-items:flex-start;max-width:520px;line-height:1.5}
.l-join input{margin-top:3px;accent-color:#0A0A0A}

/* ===== "Player created" card ===== */
.pc{border:2px solid #0A0A0A;box-shadow:6px 6px 0 var(--gold, #C9A227);background:#FFFFFF;margin:0 0 40px;max-width:640px}
.pc-bar{display:flex;justify-content:space-between;background:#0A0A0A;color:var(--gold, #C9A227);font-family:var(--pixel);font-size:9px;letter-spacing:2px;padding:12px 18px}
.pc-bar span:last-child{color:#BFBFBF}
.pc-body{padding:26px 22px 24px}
.pc-kicker{font-family:var(--pixel);font-size:9px;letter-spacing:2px;color:var(--gold, #C9A227);margin:0 0 8px}
.pc-title{font-family:var(--pixel);font-size:18px;line-height:1.5;margin:0 0 10px}
.pc-sub{font-size:13px;color:#4A4A4A;margin:0 0 20px;line-height:1.6}
.pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.pc-stat{border:2px solid #0A0A0A;box-shadow:3px 3px 0 var(--gold, #C9A227);padding:12px;display:flex;flex-direction:column;gap:6px;background:#FFFFFF}
.pc-stat.on{background:var(--gold, #C9A227)}
.pc-stat span{font-family:var(--pixel);font-size:7px;letter-spacing:1px;color:#8A8A8A}
.pc-stat.on span{color:#0A0A0A}
.pc-stat b{font-family:var(--pixel);font-size:13px;font-weight:normal}
.pc-stat small{font-size:11px;color:#4A4A4A;line-height:1.4}
.pc-stat.on small{color:#0A0A0A}
.pc-mail{font-size:12px;color:#8A8A8A;margin:0 0 16px}
.pc.pop{animation:pc-in .5s steps(5)}
.pc.pop .pc-stat{animation:pc-in .4s steps(4) backwards}
.pc.pop .pc-stat:nth-child(2){animation-delay:.12s}.pc.pop .pc-stat:nth-child(3){animation-delay:.24s}.pc.pop .pc-stat:nth-child(4){animation-delay:.36s}
@keyframes pc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:640px){.pc-grid{grid-template-columns:1fr 1fr}.pc-title{font-size:15px}}
@media (prefers-reduced-motion:reduce){.pc.pop,.pc.pop .pc-stat{animation:none}}
.pc{scroll-margin-top:140px}

/* =========================================================
   Menu: on phones/tablets a MENU button opens a 2-column grid
   (replaces the sideways-scrolling row)
   ========================================================= */
.menu-btn{display:none}
@media (max-width:760px){
  .nav{position:sticky}
  .nav-inner{flex-wrap:nowrap;justify-content:space-between;gap:10px;padding:10px 16px}
  .brand{font-size:10px;letter-spacing:2.5px;min-width:0}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 14px;font-family:var(--pixel);font-size:8px;letter-spacing:1px;text-transform:uppercase;background:var(--white);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--gold);cursor:pointer;flex:none}
  .menu-btn .mb-ico{font-family:Arial,sans-serif;font-size:15px;line-height:1}
  .nav.menu-open .menu-btn{background:var(--ink);color:var(--gold)}
  .nav-links{display:none !important}
  .nav.menu-open .nav-links{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--white);padding:14px 16px 18px;border-bottom:2px solid var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.12);overflow:visible}
  .nav.menu-open .nav-links a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;border:2px solid var(--ink);border-radius:0;font-size:11px;letter-spacing:2px;box-shadow:2px 2px 0 var(--gold)}
  .nav.menu-open .nav-links a[aria-current=page]{background:var(--ink);color:var(--gold)}
}
@media (max-width:360px){.brand{letter-spacing:1.5px;font-size:9px}.menu-btn .mb-cur{display:none}}

/* iPhone: 16px+ text in fields stops Safari from zooming in when you tap them */
@media (pointer:coarse){input,select,textarea{font-size:16px !important}#l-code{font-size:22px !important}}

.l-tip{font-size:12px;color:#4A4A4A;line-height:1.6;margin:2px 0 0;max-width:520px}
.l-tip .linkish{font-size:12px}
@media (pointer:coarse){#l-code{max-width:none;flex-basis:100%;height:56px;letter-spacing:10px}.login-box .row .btn{flex:1 1 100%;min-height:48px}}
.login-box input[type=checkbox]{flex:none;width:20px;height:20px;min-width:20px;padding:0;margin:2px 0 0;border:none;box-shadow:none}
.l-join{flex-direction:row}
html.menu-open-doc .toasts{opacity:0;pointer-events:none}

/* =========================================================
   Account page: 3 steps (sign in → code → account settings)
   ========================================================= */
.steps-bar{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:640px}
.steps-bar li{display:flex;align-items:center;gap:8px;padding:10px 10px;border:2px solid var(--silver);color:var(--ink-2);font-family:var(--pixel);font-size:8px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.steps-bar li span{display:inline-grid;place-items:center;width:20px;height:20px;border:2px solid currentColor;font-size:8px;flex:none}
.steps-bar li.done{border-color:var(--ink);color:var(--ink)}
.steps-bar li.done span{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.steps-bar li.on{border-color:var(--ink);background:var(--ink);color:var(--gold);box-shadow:3px 3px 0 var(--gold)}
.steps-bar li.on span{border-color:var(--gold)}
.signin-sheet{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--gold);padding:22px 20px 20px;background:var(--white);max-width:640px;margin-top:0}
.sheet-h{font-size:clamp(15px,2vw,19px);line-height:1.5;margin:0 0 14px}
.perks{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--silver);display:flex;flex-direction:column;gap:6px}
.perks li{font-size:12px;line-height:1.5;color:var(--ink-2);padding-left:16px;position:relative}
.perks li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;background:var(--gold)}
.login .l-msg:empty{display:none}

.settings{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);padding:6px 18px;margin:0 0 28px}
.settings .sec-h{margin:14px 0 4px}
.set-row{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;align-items:start;padding:14px 0;border-top:1px solid var(--silver);margin:0}
.settings .sec-h + .set-row{border-top:0}
.set-row label,.set-k{font-size:12px;font-weight:700;padding-top:4px}
.set-ctl{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;min-width:0}
.set-ctl .small{flex:1 1 100%;margin:0;font-size:12px;line-height:1.55;color:var(--ink-2)}
.set-ctl input{flex:1 1 200px;min-width:0;height:44px;padding:0 12px;font:15px Montserrat,Arial,sans-serif;border:1.5px solid var(--silver-2);border-radius:0}
.set-row > .l-msg{grid-column:2;margin:0;font-size:12px}
.set-row.danger .set-k{color:#8B1A1A}
.btn-danger{background:var(--white);color:#8B1A1A;border:2px solid #8B1A1A;border-radius:999px;padding:11px 18px;font:700 11px Montserrat,Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}
.btn-danger:hover,.btn-danger.armed{background:#8B1A1A;color:var(--white)}
.btn-danger:disabled{opacity:.6;cursor:wait}

/* =========================================================
   Phone / installed app: tighter, even spacing
   ========================================================= */
@media (max-width:600px){
  :root{--pad-x:18px;--pad-y:44px}
  .wrap{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .section{padding:var(--pad-y) 0}
  .split,.split-even{gap:18px}
  .label{margin-bottom:14px}
  .title,.title-sm{margin-bottom:12px}
  .title-sm{font-size:18px;line-height:1.45}
  .lede{font-size:14px;line-height:1.65}
  p{margin-top:0}
  .muted{font-size:13px;line-height:1.6}
  .btns{gap:10px;margin-top:18px}
  .btn{padding-top:12px;padding-bottom:12px}
  .site-footer{padding:28px var(--pad-x) calc(24px + env(safe-area-inset-bottom))}
  .site-footer .wrap{gap:16px}
  .site-footer img{margin-bottom:8px}
  .site-footer nav{gap:10px 16px}
  .gamebar .gb-inner,.gamebar > div{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  /* account page */
  .steps-bar{gap:6px;margin-bottom:14px}
  .steps-bar li{padding:8px 6px;gap:6px;font-size:7px;justify-content:center}
  .signin-sheet{padding:18px 16px 16px;box-shadow:4px 4px 0 var(--gold)}
  .login-box .row{gap:8px}
  .dash-head{margin-bottom:14px}
  .dash-grid{gap:12px;margin-bottom:18px}
  .card{padding:14px 14px}
  .settings{padding:4px 14px;margin-bottom:20px}
  .set-row{grid-template-columns:1fr;gap:8px;padding:12px 0}
  .set-row > .l-msg{grid-column:1}
  .set-ctl .btn,.set-ctl .btn-danger{flex:1 1 100%;min-height:46px;justify-content:center;text-align:center}
  .list-sec{padding:14px 0 16px}
  .acct-list li{padding:10px}
  .pc{margin-bottom:22px}
  .pc-body{padding:18px 16px}
  .pc-grid{gap:10px}
}

/* Game bar on phones: one tidy row, nothing cut off */
@media (max-width:600px){
  .gamebar{max-height:52px}
  .gamebar-inner{padding:6px var(--pad-x);gap:6px}
  .gamebar .hud{gap:5px}
  .gb-right{gap:6px}
  .gamebar .hud .xp,.gamebar .hud .snd{padding:6px 7px;white-space:nowrap}
  .gamebar .hud .lv{white-space:nowrap}
  .gamebar .hud .bar{width:30px}
  .gamebar .hud .snd{font-size:7px}
  .gb-disc{margin-left:0;padding:0 7px;height:28px}
  .gb-disc .gd-pre{display:none}
  .gb-gift,.gb-gift.open{padding:0 6px;gap:0}
  .gb-gift span,.gb-gift.open span{display:none}
  .gb-hide .gh-t{display:none}
  .gb-hide{padding:8px 2px}
  .gamebar .basket-fab{padding:0 7px 0 6px;gap:4px}
  .gamebar .basket-fab img{width:20px}
}
@media (max-width:420px){.gb-app{display:none}}
@media (max-width:600px){
  .dash-grid{grid-template-columns:1fr 1fr;gap:10px}
  .dash-grid .c-level{grid-column:1 / -1}
  .dash-grid .card{padding:12px;gap:4px;box-shadow:3px 3px 0 var(--gold)}
  .dash-grid .card .big{font-size:16px;margin:2px 0}
  .dash-grid .card .small{font-size:11px;line-height:1.45}
  .dash-grid .card .btn{padding:9px 12px;font-size:9px;margin-top:4px;align-self:flex-start}
  .dash-head .title-sm{font-size:15px;margin-bottom:4px}
}

/* Spam-trap field: invisible on every browser, including iPhone Safari */
.trap{position:absolute !important;left:0 !important;top:0 !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;border:0 !important;opacity:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;pointer-events:none !important;-webkit-appearance:none;appearance:none}
form{position:relative}

/* =========================================================
   Portrait iPhone polish (all pages)
   ========================================================= */
@media (max-width:600px){
  /* Mailing-list sign-up: stacked, full width, square to match the site */
  .signup form{flex-direction:column;align-items:stretch;gap:10px;max-width:none;margin-top:14px}
  .signup input[type=email]{flex:none;width:100%;height:50px;border-radius:0;border:2px solid var(--ink);padding:0 14px}
  .signup button{width:100%;height:50px;font-size:10px}
  .signup .title-sm{max-width:none}

  /* Services: one box, not a box inside a box; smaller decorative basket */
  .sheet-basket{width:56px;height:auto;margin:0 0 10px}
  .svc{gap:10px}

  /* Submit form: "(optional)" sits next to its label; full-width send button */
  .f-grid > label,.subform > label.f-wide{display:block}
  .f-grid > label > span,.subform > label.f-wide > .link-hint{display:inline;margin-left:4px}
  .f-grid > label > input,.subform > label.f-wide > input,.subform > label.f-wide > textarea{display:block;width:100%;margin-top:6px}
  .subform .f-check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-weight:400}
  .subform .f-check input{flex:none;width:20px;height:20px;margin:1px 0 0}
  .subform button[type=submit]{width:100%;min-height:50px}
  .sub-type{gap:10px}

  /* News stats: stacked, readable */
  .news .stats{grid-template-columns:1fr !important}
  .news .stat{padding:12px 0 !important;border-left:0 !important;border-top:1px solid var(--silver)}
  .news .stat b{font-size:18px}
  .news .stat span{font-size:13px}

  /* Buttons in a row: share the width evenly */
  .btns{display:flex;flex-wrap:wrap}
  .btns > .btn{flex:1 1 140px;justify-content:center;text-align:center}

  /* Footer: tidy 2-column link grid */
  .site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;width:100%}
  .site-footer nav a{padding:6px 0}
}

/* =========================================================
   Intel cards (About): tap to expand, earns XP once a day
   ========================================================= */
.intel{border-top:2px solid var(--ink)}
.intel-item{border-bottom:1px solid var(--silver)}
.intel-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;padding:18px 4px;transition:background-color .12s}
.intel-item summary::-webkit-details-marker{display:none}
.intel-item summary:hover{background:linear-gradient(90deg,rgba(201,162,39,.12),transparent 70%)}
.intel-item .idx{font-family:var(--pixel);font-size:8px;color:var(--gold-deep)}
.intel-name{font-weight:700;font-size:14px;letter-spacing:.3px}
.intel-xp{font-family:var(--pixel);font-size:7px;letter-spacing:.5px;padding:7px 8px;border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--gold);background:var(--white);white-space:nowrap}
.intel-item[open] .intel-xp,.intel-item.seen .intel-xp{background:var(--ink);color:var(--gold)}
.intel-item.seen .intel-xp::before{content:"✓ "}
.intel-item[open] summary{background:linear-gradient(90deg,rgba(201,162,39,.12),transparent 70%)}
.intel-body{padding:2px 4px 20px 26px;animation:intel-in .3s steps(4)}
.intel-body p{margin:0 0 10px;font-size:13px;line-height:1.7;color:var(--ink-2);max-width:62ch}
.intel-body .intel-more{color:var(--ink)}
.intel-link{font-family:var(--pixel);font-size:8px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px}
.intel-link:hover{color:var(--gold-deep)}
@keyframes intel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.more summary .intel-xp{padding:4px 6px;box-shadow:none;margin-left:4px}
@media (max-width:600px){
  .intel-item summary{grid-template-columns:auto 1fr;padding:14px 2px}
  .intel-xp{grid-column:2;justify-self:start}
  .intel-body{padding:0 2px 16px 22px}
}
@media (prefers-reduced-motion:reduce){.intel-body{animation:none}}

/* =========================================================
   Arrival album pop-up
   ========================================================= */
.album-dlg{width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--gold);background:var(--white);color:var(--ink);overflow:auto}
.album-dlg::backdrop{background:rgba(10,10,10,.62)}
.album-dlg[open]{animation:al-in .32s steps(5)}
@keyframes al-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.al-bar{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--gold);font-family:var(--pixel);font-size:8px;letter-spacing:1.5px;padding:10px 10px 10px 16px;position:sticky;top:0;z-index:2}
.al-now{margin-left:auto;color:#BFBFBF}
.album-dlg.playing .al-now{color:var(--gold);animation:al-blink 1s steps(2) infinite}
@keyframes al-blink{50%{opacity:.35}}
.al-x{width:32px;height:32px;border:1.5px solid var(--gold);background:transparent;color:var(--gold);font-size:14px;cursor:pointer;line-height:1}
.al-x:hover{background:var(--gold);color:var(--ink)}
.al-main{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:22px;padding:22px}
.al-art{position:relative;align-self:start;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);aspect-ratio:1;background:#050505}
.al-art img{display:block;width:100%;height:100%;object-fit:cover}
.album-dlg.playing .al-art img{animation:al-pulse 1.2s steps(3) infinite}
@keyframes al-pulse{50%{filter:brightness(1.18)}}
.al-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border:2px solid var(--gold);background:rgba(10,10,10,.85);color:var(--gold);font-size:22px;cursor:pointer;box-shadow:3px 3px 0 var(--gold)}
.al-big:hover{background:var(--gold);color:var(--ink)}
.album-dlg.playing .al-big{opacity:0}
.album-dlg.playing .al-art:hover .al-big,.album-dlg.playing .al-big:focus-visible{opacity:1}
.al-kicker{font-family:var(--pixel);font-size:8px;letter-spacing:1.5px;color:var(--gold-deep);margin:0 0 8px}
.al-title{font-family:var(--pixel);font-weight:400;font-size:clamp(16px,2.6vw,22px);line-height:1.4;margin:0 0 6px}
.al-artist{font-size:12px;color:var(--ink-2);margin:0 0 14px}
.al-tracks{list-style:none;margin:0 0 16px;padding:0;border-top:2px solid var(--ink)}
.al-tracks li{border-bottom:1px solid var(--silver)}
.al-trk{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;width:100%;padding:10px 4px;background:none;border:0;text-align:left;font:inherit;color:inherit}
button.al-trk{cursor:pointer}
button.al-trk:hover{background:linear-gradient(90deg,rgba(201,162,39,.14),transparent 80%)}
.al-n{font-family:var(--pixel);font-size:8px;color:var(--gold-deep)}
.al-t{font-size:13px;font-weight:700}
.al-s{font-size:11px;color:var(--ink-2);white-space:nowrap}
.al-tracks li.soon .al-t,.al-tracks li.soon .al-n{color:#9C9EA3}
.al-tracks li.soon .al-s{font-family:var(--pixel);font-size:7px}
.al-tracks li.cur .al-t{color:var(--gold-deep)}
.al-tracks li.cur .al-n::before{content:"▶ "}
.al-player{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.al-play{font-family:var(--pixel);font-size:10px;letter-spacing:1px;height:46px;padding:0 18px;background:var(--ink);color:var(--gold);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold);cursor:pointer;white-space:nowrap}
.al-play small{font-size:7px;color:#BFBFBF;margin-left:6px}
.al-play:hover{background:var(--gold);color:var(--ink)}
.al-play:hover small{color:var(--ink)}
.al-prog{flex:1 1 120px;height:12px;border:2px solid var(--ink);cursor:pointer;background:var(--white)}
.al-prog i{display:block;height:100%;width:0;background:var(--gold)}
.al-time{font-family:var(--pixel);font-size:8px;min-width:34px}
.al-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:16px 22px 20px;border-top:2px solid var(--ink);background:#FAFAF7}
.al-mute{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-2)}
.al-mute input{width:16px;height:16px;accent-color:#0A0A0A}
.gb-album{width:30px;height:30px;font-size:15px;line-height:1;background:var(--white);color:var(--ink);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--gold);cursor:pointer;margin-left:6px}
.gb-album:hover,.gb-album.on{background:var(--ink);color:var(--gold)}
.gb-album.on{animation:al-blink 1s steps(2) infinite}
@media (max-width:600px){
  .album-dlg{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);box-shadow:5px 5px 0 var(--gold)}
  .al-main{grid-template-columns:1fr;gap:14px;padding:14px}
  .al-art{width:min(100%,260px);justify-self:center}
  .al-big{width:58px;height:58px;font-size:18px}
  .al-tracks{margin-bottom:12px}
  .al-trk{padding:9px 2px}
  .al-play{flex:1 1 100%;height:50px}
  .al-foot{padding:12px 14px 16px;flex-direction:column;align-items:stretch}
  .al-foot .btn{width:100%;justify-content:center;text-align:center;min-height:48px}
  .al-mute{margin:2px auto 0}
  .gb-album{margin-left:0;width:28px;height:28px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.album-dlg[open],.album-dlg.playing .al-now,.album-dlg.playing .al-art img,.gb-album.on{animation:none}}

/* =========================================================
   Join the list: Email | Text
   ========================================================= */
.join-tabs{display:inline-grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 0;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold)}
.jt{font-family:var(--pixel);font-size:9px;letter-spacing:1px;padding:11px 18px;background:var(--white);color:var(--ink);border:0;cursor:pointer;white-space:nowrap}
.jt + .jt{border-left:2px solid var(--ink)}
.jt[aria-selected=true]{background:var(--ink);color:var(--gold)}
.signup form.join{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:560px;margin-top:14px}
.join .j-email,.join .j-sms{display:contents}
.join .j-email[hidden],.join .j-sms[hidden]{display:none}
.signup .join input[type=text],.signup .join input[type=tel],.signup .join input[type=email]{flex:1 1 200px;min-width:0;height:48px;padding:0 16px;border:2px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);font:14px Montserrat,Arial,Helvetica,sans-serif}
.signup .join input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.join .j-consent{flex:1 1 100%;order:5;display:flex;gap:10px;align-items:flex-start;font-size:11px;line-height:1.55;color:var(--ink-2);cursor:pointer}
.join .j-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#0A0A0A}
.join button[type=submit]{order:6}
.j-done{display:inline-block;margin-top:14px;padding:12px 14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold);background:var(--white);font-size:13px;line-height:1.55;color:var(--ink)}
@media (max-width:600px){
  .join-tabs{display:grid;width:100%}
  .signup form.join{flex-direction:column;max-width:none}
  .signup .join input[type=text],.signup .join input[type=tel],.signup .join input[type=email]{flex:none;width:100%;height:50px}
  .join .j-consent{order:0}
  .join button[type=submit]{width:100%;height:50px}
}

/* =========================================================
   Loot Ladder, vault keys and reveal
   ========================================================= */
.gb-gift.has-loot{background:var(--gold)}
.gb-gift[data-ready]:not([data-ready=""])::after{content:attr(data-ready);position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;display:grid;place-items:center;background:var(--ink);color:var(--gold);font-family:var(--pixel);font-size:7px;border:1.5px solid var(--gold);z-index:2}
.gb-gift{overflow:visible}
.loot-dlg,.loot-reveal{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--gold);background:var(--white);color:var(--ink);overflow:auto}
.loot-dlg::backdrop,.loot-reveal::backdrop{background:rgba(10,10,10,.62)}
.loot-dlg[open],.loot-reveal[open]{animation:al-in .3s steps(5)}
.lt-bar{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--gold);font-family:var(--pixel);font-size:8px;letter-spacing:1.5px;padding:10px 10px 10px 16px;position:sticky;top:0;z-index:2}
.lt-count{margin-left:auto;color:#BFBFBF}
.lt-x{width:32px;height:32px;border:1.5px solid var(--gold);background:transparent;color:var(--gold);font-size:14px;cursor:pointer}
.lt-x:hover{background:var(--gold);color:var(--ink)}
.lt-body{padding:20px 20px 18px}
.lt-title{font-family:var(--pixel);font-weight:400;font-size:16px;line-height:1.4;margin:0 0 6px}
.lt-sub{font-size:12px;color:var(--ink-2);margin:0 0 16px}
.lt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lt-item{display:grid;grid-template-columns:64px 1fr;gap:14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold);padding:12px}
.lt-item.ready{background:#FFF8E1;box-shadow:3px 3px 0 var(--ink)}
.lt-item.locked{border-style:dashed}
.lt-item.far{opacity:.7}
.lt-item.flash{animation:lt-flash .9s steps(3) 2}
@keyframes lt-flash{50%{background:var(--gold)}}
.lt-tier{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;border-right:1px solid var(--silver);padding-right:10px}
.lt-tier span{font-family:var(--pixel);font-size:7px;color:var(--gold-deep);white-space:nowrap}
.lt-tier b{font-size:20px;line-height:1}
.lt-item.ready .lt-tier b{color:var(--gold-deep);animation:al-blink 1s steps(2) infinite}
.lt-name{font-family:var(--pixel);font-size:11px;line-height:1.5;margin:0 0 4px}
.lt-item.locked .lt-name{letter-spacing:3px}
.lt-kind{font-size:12px;color:var(--ink-2);margin:0 0 8px}
.lt-how{font-size:12px;font-weight:700;margin:0 0 8px;line-height:1.5}
.lt-prog{height:10px;border:2px solid var(--ink);background:var(--white)}
.lt-prog i{display:block;height:100%;background:var(--gold)}
.lt-p{font-family:var(--pixel);font-size:7px;margin:6px 0 0;color:var(--ink-2)}
.lt-hints{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.lt-hints li{font-size:11px;color:var(--ink-2);line-height:1.4}
.lt-hints li.got{color:var(--gold-deep);text-decoration:line-through}
.lt-btn{display:inline-flex;align-items:center;margin-top:10px;font-family:var(--pixel);font-size:8px;letter-spacing:1px;padding:11px 14px;background:var(--ink);color:var(--gold);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--gold);text-decoration:none;cursor:pointer}
.lt-btn:hover{background:var(--gold);color:var(--ink)}
.lt-item.claimed .lt-btn{background:var(--white);color:var(--ink)}
.lt-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--silver);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between}
.lt-foot p{margin:0;font-size:11px;color:var(--ink-2)}
.lt-link{font-family:var(--pixel);font-size:7px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px}
.lr-in{padding:26px 22px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.lr-kicker{font-family:var(--pixel);font-size:9px;letter-spacing:2px;color:var(--gold-deep);margin:0}
.lr-chest{width:88px;height:88px;display:grid;place-items:center;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);background:var(--ink);animation:lr-pop .6s steps(6)}
.lr-chest img{width:52px;height:52px;image-rendering:pixelated}
@keyframes lr-pop{0%{transform:scale(.4) rotate(-12deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
.lr-title{font-family:var(--pixel);font-weight:400;font-size:15px;line-height:1.5;margin:4px 0 0}
.lr-note{font-size:12px;color:var(--ink-2);margin:0}
.lr-audio{width:100%;max-width:360px}
.lr-soon{font-size:12px;padding:10px 12px;border:1.5px dashed var(--ink);margin:0}
.lr-terms{font-size:11px;color:var(--ink-2);margin:0}
.lr-in .btn{min-width:220px;justify-content:center}
.vault-key{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;margin:6px 0 0 6px;background:none;border:0;cursor:pointer;opacity:.5;vertical-align:middle;transition:opacity .12s}
.vault-key img{width:18px;height:18px;image-rendering:pixelated;animation:vk-bob 2.4s steps(4) infinite}
.vault-key:hover,.vault-key:focus-visible{opacity:1}
.vault-key.taken{animation:vk-take .6s steps(6) forwards;pointer-events:none}
@keyframes vk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) rotate(-8deg)}}
@keyframes vk-take{to{transform:translateY(-40px) scale(1.8);opacity:0}}
@media (max-width:600px){
  .loot-dlg,.loot-reveal{width:calc(100vw - 20px);box-shadow:5px 5px 0 var(--gold)}
  .lt-body{padding:16px 14px}
  .lt-item{grid-template-columns:48px 1fr;gap:10px;padding:10px}
  .lt-hints{grid-template-columns:1fr}
  .lt-btn{width:100%;justify-content:center;min-height:44px}
  .lt-foot{flex-direction:column;align-items:flex-start}
  .vault-key{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.vault-key img,.lr-chest,.lt-item.flash,.lt-item.ready .lt-tier b{animation:none}}
.al-tracks li.vault .al-t{letter-spacing:3px;color:var(--ink)}
.al-tracks li.vault .al-s{font-family:var(--pixel);font-size:7px;color:var(--gold-deep)}
.al-vault.shake{animation:al-shake .45s steps(6)}
@keyframes al-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* =========================================================
   Submit: drop your track (drag & drop + iPhone picker)
   ========================================================= */
.drop{position:relative;margin:4px 0 2px;border:2px dashed var(--ink);background:repeating-linear-gradient(45deg,#FFFFFF 0 10px,#FAFAF7 10px 20px);transition:background-color .1s,border-color .1s,transform .1s}
.drop-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;font-size:0}
.drop.loaded .drop-input{display:none}
.drop-idle{padding:22px 16px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.drop-t{font-family:var(--pixel);font-size:12px;letter-spacing:1px;margin:6px 0 0}
.drop-s{font-size:13px;margin:0;color:var(--ink-2)}
.drop-pick{font-weight:700;color:var(--ink);border-bottom:2px solid var(--gold)}
.drop-touch{display:none}
.drop-f{font-family:var(--pixel);font-size:7px;letter-spacing:.5px;color:var(--ink-2);margin:4px 0 0}
.drop:hover,.drop:focus-within,.drop.over,html.dragging .drop{border-style:solid;border-color:var(--gold);background:#FFF8E1}
html.dragging .drop{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
html.dragging .drop .drop-t::after{content:" ▼"}
.drop.loaded{border-style:solid;background:var(--white);box-shadow:4px 4px 0 var(--gold)}
/* pixel cartridge */
.drop-cart{width:46px;height:38px;position:relative;background:var(--ink);clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%)}
.drop-cart span{position:absolute;left:7px;right:9px;top:6px;height:14px;background:var(--gold)}
.drop-cart i{position:absolute;left:8px;right:8px;bottom:4px;height:4px;background:repeating-linear-gradient(90deg,#BFBFBF 0 3px,transparent 3px 6px)}
.drop:hover .drop-cart,html.dragging .drop-cart{animation:cart-bob .6s steps(3) infinite}
.drop-cart.on span{animation:cart-glow 1.2s steps(2) infinite}
@keyframes cart-bob{50%{transform:translateY(-4px)}}
@keyframes cart-glow{50%{background:#F3E3A6}}
.drop-file{padding:14px}
.df-top{display:flex;align-items:center;gap:12px}
.df-meta{flex:1;min-width:0}
.df-name{font-weight:700;font-size:14px;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-sub{font-family:var(--pixel);font-size:7px;color:var(--gold-deep);margin:0}
.df-x{width:34px;height:34px;flex:none;border:2px solid var(--ink);background:var(--white);cursor:pointer;font-size:13px}
.df-x:hover{background:var(--ink);color:var(--white)}
.drop.busy .df-x{opacity:.3;cursor:not-allowed}
.df-audio{width:100%;margin-top:12px;height:40px}
.df-prog{margin-top:12px}
.df-bar{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;height:16px;padding:3px;border:2px solid var(--ink)}
.df-bar i{background:#ECECE8}
.df-bar i.on{background:var(--gold)}
.drop.busy .df-bar i.on:last-of-type{animation:al-blink .5s steps(2) infinite}
.df-pct{font-family:var(--pixel);font-size:8px;margin:8px 0 0}
.drop-or{display:flex;align-items:center;gap:10px;margin:2px 0;font-family:var(--pixel);font-size:7px;color:var(--ink-2);text-transform:uppercase}
.drop-or::before,.drop-or::after{content:"";flex:1;height:1px;background:var(--silver)}
@media (pointer:coarse){
  .drop-desk{display:none}
  .drop-touch{display:inline}
  .drop-pick{text-transform:capitalize}
  .drop-idle{padding:20px 14px 16px}
}
@media (prefers-reduced-motion:reduce){.drop-cart,.drop-cart span,.df-bar i{animation:none !important}html.dragging .drop{transform:none}}

/* =========================================================
   Quest Log, UNSAVED tag, key radar
   ========================================================= */
.gamebar .hud .xp{position:relative;cursor:pointer}
.gamebar .hud .xp:hover{background:#FFF8E1}
.gamebar .hud .xp:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.q-badge{position:absolute;top:-7px;right:-6px;font-family:var(--pixel);font-size:6px;line-height:1;padding:3px 4px;background:var(--ink);color:var(--gold);border:1.5px solid var(--gold);white-space:nowrap;pointer-events:none}
.gamebar .hud .xp.unsaved .q-badge{background:var(--gold);color:var(--ink);border-color:var(--ink);animation:al-blink 1.1s steps(2) infinite}
.gamebar .hud .xp.ping{animation:q-ping .5s steps(3) 6}
@keyframes q-ping{50%{box-shadow:0 0 0 4px var(--gold)}}
.gamebar{overflow:visible}
.q-warn{border:2px solid var(--ink);background:#FFF8E1;padding:12px 14px;margin:0 0 16px;box-shadow:3px 3px 0 var(--ink)}
.q-warn b{font-family:var(--pixel);font-size:9px;letter-spacing:1px;display:block;margin-bottom:6px}
.q-warn p{font-size:12px;margin:0;color:var(--ink-2)}
.q-head{margin:0 0 12px}
.q-lv{font-family:var(--pixel);font-size:9px;margin:0 0 8px}
.q-meter{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:14px;padding:3px;border:2px solid var(--ink)}
.q-meter i{background:#ECECE8}
.q-meter i.on{background:var(--gold)}
.q-sub{font-size:12px;color:var(--ink-2);margin:8px 0 0}
.q-radar{font-family:var(--pixel);font-size:7px;line-height:1.7;padding:8px 10px;background:var(--ink);color:var(--gold);margin:0 0 12px;animation:al-blink 1.4s steps(2) 3}
.q-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.q-list li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--silver)}
.q-box{width:20px;height:20px;border:2px solid var(--ink);display:grid;place-items:center;font-size:11px;font-weight:700}
.q-list li.done .q-box{background:var(--gold)}
.q-list li.done .q-t{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--gold)}
.q-list li.secret .q-t{letter-spacing:2px}
.q-list li.secret .q-box{border-style:dashed}
.q-list li.big:not(.done){background:#FFF8E1}
.q-t{font-size:13px;line-height:1.4}
.q-hint{letter-spacing:0;font-size:11px;color:var(--ink-2);margin-left:6px}
.q-p{font-family:var(--pixel);font-size:7px;color:var(--gold-deep);margin-left:8px;white-space:nowrap}
.q-go{font-family:var(--pixel);font-size:7px;padding:8px 9px;border:1.5px solid var(--ink);background:var(--white);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.q-go:hover{background:var(--ink);color:var(--gold)}
.vault-key.near{opacity:.85}
.vault-key.near img{animation:vk-bob 2.4s steps(4) infinite,vk-glint 1.2s steps(2) 3}
@keyframes vk-glint{50%{filter:drop-shadow(0 0 3px #C9A227) brightness(1.3)}}
@media (max-width:600px){
  .q-list li{grid-template-columns:22px 1fr;row-gap:6px}
  .q-go{grid-column:2;justify-self:start;padding:9px 12px}
  .q-badge{right:-4px}
}
@media (prefers-reduced-motion:reduce){.gamebar .hud .xp.unsaved .q-badge,.gamebar .hud .xp.ping,.q-radar,.vault-key.near img{animation:none}}
html.hud-hidden .gamebar{overflow:hidden}
/* Keys: a little easier to spot (still subtle) */
.vault-key{opacity:.78;width:32px;height:32px}
.vault-key img{width:22px;height:22px;filter:drop-shadow(0 0 2px rgba(201,162,39,.55))}
@media (max-width:600px){.vault-key{width:40px;height:40px}}

/* =========================================================
   PLAYER PROFILE (account.html): retro 2006 profile page.
   Desktop first: two columns at 1040px. Phones stack.
   ========================================================= */
.ms-page{background:#E5E5E5;padding:0 0 64px;transition:background-color .2s}
.ms{
  --ms-bg:#E5E5E5; --ms-bar:#003399; --ms-bar2:#6699CC; --ms-head:#336699; --ms-head-ink:#FFFFFF;
  --ms-cell:#D5E8FB; --ms-cell-ink:#1D3B5C; --ms-title:#B84300; --ms-title-bg:#FFE3C7; --ms-link:#003399;
  --ms-paper:#FFFFFF; --ms-ink:#111111; --ms-line:#B9CDE5; --ms-online:#2E8B16;
  font-family:Verdana,Tahoma,Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--ms-ink);letter-spacing:0
}
.ms.skin-otsf{--ms-bg:#141414;--ms-bar:#0A0A0A;--ms-bar2:#2A2A2A;--ms-head:#0A0A0A;--ms-head-ink:#E0BC4A;--ms-cell:#F4EBCB;--ms-cell-ink:#4A3A08;--ms-title:#7E5F0B;--ms-title-bg:#F4EBCB;--ms-link:#7E5F0B;--ms-line:#D9C58A}
.ms.skin-bubblegum{--ms-bg:#FFD6E7;--ms-bar:#B0185A;--ms-bar2:#E0457B;--ms-head:#B0185A;--ms-head-ink:#FFFFFF;--ms-cell:#FFE0EC;--ms-cell-ink:#6E0F38;--ms-title:#B0185A;--ms-title-bg:#FFE0EC;--ms-link:#9A1450;--ms-line:#F3A9C6}
.ms.skin-grape{--ms-bg:#D9CCF0;--ms-bar:#3D1A78;--ms-bar2:#6A3DB0;--ms-head:#4E2496;--ms-head-ink:#FFFFFF;--ms-cell:#EBE2FA;--ms-cell-ink:#2F1460;--ms-title:#5B2BAF;--ms-title-bg:#EBE2FA;--ms-link:#4E2496;--ms-line:#C3AEE8}
.ms-page:has(.skin-otsf){background:#141414}
.ms-page:has(.skin-bubblegum){background:#FFD6E7}
.ms-page:has(.skin-grape){background:#D9CCF0}
.ms-page:has(.skin-classic){background:#E5E5E5}
.ms a,.ms .ms-linkish{color:var(--ms-link)}
.ms button{font:inherit;color:inherit;cursor:pointer}
.ms .pixel{font-family:"Press Start 2P",monospace;letter-spacing:0}
.ms-small{font-size:11px;line-height:1.5;margin:0}

/* top bars */
.ms-top{background:var(--ms-bar);color:#fff;border-bottom:4px solid var(--ms-bar2)}
.ms-top-in{max-width:1040px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ms-logo{color:#fff !important;text-decoration:none;font-size:22px;font-weight:700;letter-spacing:-.5px;font-family:Arial,sans-serif}
.ms-logo .pixel{font-size:14px;margin-right:2px;color:#FFD34D}
.ms-topnav{display:flex;flex-wrap:wrap;gap:2px;flex:1}
.ms-topnav a,.ms-topnav button{color:#fff !important;background:none;border:0;padding:6px 9px;font-size:12px;font-weight:700;text-decoration:none;border-radius:2px}
.ms-topnav a:hover,.ms-topnav button:hover{background:rgba(255,255,255,.18);text-decoration:underline}
.ms-skins{display:flex;align-items:center;gap:6px;font-size:11px}
.ms-skins button{width:26px;height:26px;padding:3px;border:2px solid rgba(255,255,255,.5);background:none;border-radius:3px}
.ms-skins button i{display:block;width:100%;height:100%}
.ms-skins [data-skin=classic] i{background:linear-gradient(135deg,#336699 50%,#FFE3C7 50%)}
.ms-skins [data-skin=otsf] i{background:linear-gradient(135deg,#0A0A0A 50%,#C9A227 50%)}
.ms-skins [data-skin=bubblegum] i{background:linear-gradient(135deg,#B0185A 50%,#FFE0EC 50%)}
.ms-skins [data-skin=grape] i{background:linear-gradient(135deg,#4E2496 50%,#EBE2FA 50%)}
.ms-skins button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #FFD34D}

.ms-new{max-width:1000px;margin:18px auto 0;padding:14px 18px;background:#FFFBD6;border:2px dashed #C9A227;color:#3A2E05}
.ms-new p{margin:0}
.ms-new .pixel{font-size:11px;margin-bottom:8px;color:#7E5F0B}

/* two columns (desktop first) */
.ms-grid{max-width:1000px;margin:18px auto 0;background:var(--ms-paper);padding:22px;display:grid;grid-template-columns:400px 1fr;gap:22px;align-items:start;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ms-left,.ms-right{display:flex;flex-direction:column;gap:16px;min-width:0}

/* editable fields: look like text, click to edit */
.ms .f{font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:2px;padding:2px 4px;margin:-3px -5px;width:calc(100% + 10px);max-width:none;min-width:0;transition:border-color .12s,background-color .12s}
.ms .f::placeholder{color:#767676;font-style:italic}
.ms .f:hover{border-color:var(--ms-line);background:#FFFFF2}
.ms .f:focus{outline:none;border-color:var(--ms-head);background:#FFFFF2;box-shadow:0 0 0 2px var(--ms-cell)}
.ms textarea.f{resize:vertical;min-height:2.2em;display:block;overflow:hidden}
.ms select.f{width:auto;margin:0;padding:2px 4px;border-color:var(--ms-line);background:#fff;cursor:pointer}
.ms .f.filled-new{animation:ms-flash .6s}
@keyframes ms-flash{from{background:#FFF3A3}to{background:transparent}}

/* identity */
.ms-artist{font-size:26px;font-weight:700;letter-spacing:-.5px;margin:0 0 10px;line-height:1.15}
.ms-artist .f{font-weight:700}
.ms-id-row{display:grid;grid-template-columns:170px 1fr;gap:14px}
.ms-pic{display:flex;flex-direction:column;gap:6px}
.ms-pic-btn{width:170px;height:170px;padding:0;border:1px solid #999;background:#F2F2F2;display:block;overflow:hidden;position:relative}
.ms-pic-btn img{width:100%;height:100%;object-fit:cover}
.ms-pic-btn:hover{outline:2px solid var(--ms-head)}
.ms-pic-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#555;font-size:12px;font-weight:700}
.ms-pic-empty b{font-size:40px;line-height:1;color:var(--ms-head);font-weight:400}
.ms-mini{background:none;border:0;padding:0;font-size:11px;text-decoration:underline;color:var(--ms-link) !important;align-self:flex-start}
.ms-id-meta p{margin:0 0 6px}
.ms-quote{font-style:italic;display:flex;align-items:baseline}
.ms-quote .f{font-style:italic}
.ms-mood-row{display:flex;gap:6px;align-items:center}
.ms-online{display:flex;align-items:center;gap:6px;color:var(--ms-online);margin-top:10px !important}
.ms-dot{width:10px;height:10px;border-radius:50%;background:#3FBF1F;box-shadow:0 0 0 2px #C9F1BC;animation:ms-blink 1.4s steps(2) infinite}
@keyframes ms-blink{50%{opacity:.25}}
.ms-viewmy{margin:12px 0 0;font-size:12px}
.ms-viewmy button{background:none;border:0;padding:0;text-decoration:underline;color:var(--ms-link)}

/* boxes */
.ms-box{border:1px solid var(--ms-head)}
.ms-box-h{margin:0;background:var(--ms-head);color:var(--ms-head-ink);font-size:12px;font-weight:700;padding:5px 10px;letter-spacing:0;line-height:1.4}
.ms-box-h .pixel{font-size:10px}
.ms-contact{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding:10px 12px;background:var(--ms-cell)}
.ms-contact a,.ms-contact button{display:flex;align-items:center;gap:8px;min-height:30px;font-size:12px;font-weight:700;color:var(--ms-link) !important;text-decoration:none;background:none;border:0;padding:2px 4px;text-align:left;border-radius:2px}
.ms-contact a:hover,.ms-contact button:hover{background:rgba(255,255,255,.7);text-decoration:underline}
.ms-contact span{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--ms-head);color:var(--ms-head-ink);border-radius:2px;font-size:12px;text-decoration:none}
.ms-url{border:1px solid var(--ms-head);padding:8px 10px;font-size:12px;word-break:break-all}
.ms-url b{margin-right:4px}
.ms-table{width:100%;border-collapse:separate;border-spacing:3px}
.ms-table th{width:34%;background:var(--ms-cell);color:var(--ms-cell-ink);text-align:left;vertical-align:top;font-size:12px;font-weight:700;padding:5px 8px}
.ms-table td{background:#F7FAFE;padding:5px 8px;font-size:12px;vertical-align:top}
.skin-otsf .ms-table td{background:#FBF7EA}
.skin-bubblegum .ms-table td{background:#FFF5F9}
.skin-grape .ms-table td{background:#F7F3FD}

/* game stats */
.ms-game-in{padding:12px}
.ms-lv{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:12px;font-weight:700}
.ms-lv .pixel{font-size:14px;color:var(--ms-title)}
.ms-bar{height:14px;border:2px solid #111;background:#fff;padding:1px}
.ms-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#C9A227 0 8px,#E0BC4A 8px 10px);transition:width .4s}
.ms-game .ms-small{margin-top:6px}
.ms-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 4px}
.ms-stats div{background:var(--ms-cell);padding:6px 8px}
.ms-stats dt{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--ms-cell-ink)}
.ms-stats dd{margin:0;font-weight:700;font-size:15px}
.ms-game-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ms-btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;background:linear-gradient(#fff,#E4E4E4);border:1px solid #777;border-radius:3px;font-size:12px;font-weight:700;color:#111 !important;text-decoration:none;box-shadow:inset 0 1px 0 #fff}
.ms-btn:hover{background:linear-gradient(#FFF7D6,#F1DB8C);border-color:#7E5F0B}
.ms-btn:active{transform:translateY(1px)}
.ms-btn-big{min-height:44px;padding:0 22px;font-size:13px;background:linear-gradient(#FFE27A,#E0B532);border-color:#7E5F0B}
.ms-btn-big:hover{background:linear-gradient(#FFF0B3,#F2CC4E)}

/* right column */
.ms-network{border:1px solid var(--ms-line);padding:16px 18px;font-size:18px;font-weight:700;line-height:1.35}
.ms-network p{margin:0}
.ms-network b{color:var(--ms-title)}
.ms-song{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#111;color:#E8E8E8}
.ms-play{width:38px;height:38px;flex:none;border:2px solid #E0BC4A !important;background:#000;color:#E0BC4A !important;font-size:14px;border-radius:2px}
.ms-play[aria-pressed=true]{background:#E0BC4A;color:#000 !important}
.ms-song-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ms select.ms-song-pick{background:#222;color:#fff;border-color:#555;width:100%;font-size:12px}
.ms-song-bar{height:6px;background:#333}
.ms-song-bar i{display:block;height:100%;width:0;background:#E0BC4A}
.ms-song .ms-small{color:#CFCFCF;min-width:34px;text-align:right}
.ms-sec-h{margin:0 0 8px;background:var(--ms-title-bg);color:var(--ms-title);font-size:13px;font-weight:700;padding:5px 10px;letter-spacing:0;line-height:1.4}
.ms-sub{font-size:12px;color:var(--ms-title);margin:12px 0 4px;font-weight:700;display:block}
.ms-sub::before{display:none}
.ms-blurbs textarea.f{min-height:3.2em;margin:0;width:100%}
.ms-top8{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 10px}
.ms-top8 a,.ms-top8 button{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;background:none;border:0;padding:0;font-size:11px;font-weight:700;color:var(--ms-link) !important;text-align:center;width:100%}
.ms-top8 span{min-height:2.8em;display:flex;align-items:flex-end;justify-content:center;line-height:1.3}
.ms-top8 a:hover span,.ms-top8 button:hover span{text-decoration:underline}
.ms-top8 img,.ms-top8 .ms-open b{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #999;background:#000}
.ms-top8 img.ms-logo-tile{object-fit:contain;padding:14%;background:#fff}
.ms-top8 .ms-open b{display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;font-size:22px;background:#FFFBD6;color:#7E5F0B;border-style:dashed}
.ms-top8 a:hover img,.ms-top8 button:hover img{outline:2px solid var(--ms-head)}
.ms-com-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--ms-line)}
.ms-com-list li{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--ms-line)}
.ms-com-who{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;text-align:center;color:var(--ms-link)}
.ms-com-who img{width:64px;height:64px;object-fit:contain;border:1px solid #999;background:#fff;padding:6px}
.ms-com-body{font-size:12px;min-width:0}
.ms-com-body time{display:block;font-size:11px;font-weight:700;color:var(--ms-title);margin-bottom:4px}
.ms-com-body p{margin:0 0 4px}
.ms-st{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;padding:1px 6px;background:var(--ms-cell);color:var(--ms-cell-ink);margin-left:6px}

/* save bar */
.ms-save{grid-column:1/-1;position:-webkit-sticky;position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#FFFBD6;border:2px solid #C9A227;padding:10px 14px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.ms-join{display:flex;align-items:center;gap:8px;font-size:12px}
.ms-join input{width:18px;height:18px}
.ms-msg{flex:1;margin:0;font-size:12px;font-weight:700;color:#5C4508;min-height:1.5em}
.ms-msg.err{color:#A11B1B}
.ms-danger{max-width:1000px;margin:18px auto 0;padding:14px 22px;background:var(--ms-paper);display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ms-danger h2{margin:0}
.ms-danger p{flex:1;min-width:240px}
#ms-wipe{color:#A11B1B !important}
#ms-wipe.armed{font-weight:700}
.ms-page:has(.skin-otsf) .ms-danger .ms-small,.ms-page:has(.skin-otsf) .ms-danger h2{color:var(--ms-ink)}

/* ---------- laptop / tablet ---------- */
@media (max-width:1060px){
  .ms-grid,.ms-new,.ms-danger{margin-left:16px;margin-right:16px}
  .ms-grid{grid-template-columns:minmax(330px,40%) 1fr}
  .ms-id-row{grid-template-columns:140px 1fr}
  .ms-pic-btn{width:140px;height:140px}
}
/* ---------- iPhone ---------- */
@media (max-width:760px){
  .ms-top-in{padding:10px 14px;gap:10px}
  .ms-topnav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;margin:0 -6px}
  .ms-topnav a,.ms-topnav button{white-space:nowrap;padding:8px 10px}
  .ms-skins{margin-left:auto}
  .ms-skins span{display:none}
  .ms-skins button{width:32px;height:32px}
  .ms-grid{grid-template-columns:1fr;padding:14px;gap:16px;margin:12px 10px 0}
  .ms-new,.ms-danger{margin-left:10px;margin-right:10px}
  .ms-artist{font-size:24px}
  .ms-id-row{grid-template-columns:120px 1fr;gap:12px}
  .ms-pic-btn{width:120px;height:120px}
  .ms .f{font-size:16px}
  .ms-contact a,.ms-contact button{min-height:44px}
  .ms-stats{grid-template-columns:repeat(2,1fr)}
  .ms-table th{width:36%}
  .ms-top8{grid-template-columns:repeat(4,1fr);gap:10px 8px}
  .ms-network{font-size:16px}
  .ms-save{bottom:calc(8px + env(safe-area-inset-bottom));gap:8px 12px;padding:10px 12px}
  .ms-msg{flex-basis:100%;order:3}
  .ms-btn-big{flex:1;min-height:48px}
}
@media (max-width:380px){
  .ms-id-row{grid-template-columns:1fr}
  .ms-contact{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ms-dot,.ms .f.filled-new{animation:none}}

/* =========================================================
   DESKTOP FIRST: computers get bigger type, a roomier game bar
   and wider content. Phones keep the compact rules above.
   ========================================================= */
@media (min-width:1024px){
  :root{--wrap:1320px}
  body{font-size:15px}
  .nav-inner{padding-top:16px;padding-bottom:16px}
  .brand{font-size:12px}
  .brand img{width:34px;height:34px}
  .nav-links{gap:6px}
  .nav-links a{font-size:12px;padding:11px 18px}
  .lede{font-size:18px}
  .muted{font-size:13px}
  .meta,.label{font-size:12px}
  .title-sm{font-size:34px}
  .btn{min-height:50px;padding:0 28px;font-size:12px}
  .article{font-size:16px}
  .rows dt,.rows dd{font-size:14px}
  .link .name{font-size:15px}
  .link .handle{font-size:13px}
  .site-footer nav a{font-size:11px}
  /* game bar */
  .gamebar{max-height:70px}
  .gamebar-inner{padding:9px var(--pad-x)}
  .gamebar .hud{gap:10px}
  .gamebar .hud .xp,.gamebar .hud .snd{padding:8px 12px;font-size:9px}
  .gamebar .hud .bar{width:120px;height:10px}
  .gamebar .basket-fab{height:36px;padding:0 12px 0 10px}
  .gamebar .basket-fab img{width:26px}
  .gb-app,.gb-admin{height:36px;font-size:8px;padding:0 12px}
  .gb-hide,.gb-tab{font-size:8px}
  .toasts{top:calc(140px + env(safe-area-inset-top))}
  .toast{font-size:9px}
}
@media (min-width:1440px){
  .hero img.hero-art{max-height:720px}
}

/* profile: sign in + status (2026-10-27q) */
.ms-new{display:grid;grid-template-columns:1fr 1.1fr;gap:18px 28px;align-items:start}
.ms-new-make p+p{margin-top:0}
.ms-signin{border-left:2px dashed #C9A227;padding-left:24px}
.ms-signin .pixel{font-size:11px;margin-bottom:10px;color:#7E5F0B}
.ms-signin-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ms-signin label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:#3A2E05}
.ms-signin label:first-child{flex:1 1 200px}
.ms-signin input{height:40px;padding:0 10px;border:1px solid #7E5F0B;border-radius:2px;background:#fff;font:14px Verdana,Tahoma,Arial,sans-serif;color:#111;width:100%}
.ms-signin input:focus{outline:2px solid #C9A227;outline-offset:1px}
.ms-signin #si-pin{width:90px;letter-spacing:6px;text-align:center}
.ms-signin .ms-btn-big{min-height:40px}
.ms-signin .ms-msg{margin-top:8px}
.ms-status{display:inline-block;margin:4px 0 6px !important;font-size:11px;font-weight:700;padding:3px 8px;border:1px solid}
.ms-status.st-confirmed{background:#E5F7DF;color:#1D6B0C;border-color:#7CC468}
.ms-status.st-pending{background:#FFF6D1;color:#6B4F00;border-color:#E0BC4A}
.ms-status.st-denied{background:#FCE4E4;color:#A11B1B;border-color:#E39A9A}
.ms-status.st-local{background:#EEE;color:#444;border-color:#BBB}
.ms #f-pin{letter-spacing:4px}
.ms-pin-note{display:block;margin-top:4px;color:#555}
@media (max-width:760px){
  .ms-new{grid-template-columns:1fr}
  .ms-signin{border-left:0;border-top:2px dashed #C9A227;padding:14px 0 0}
  .ms-signin input{font-size:16px;height:46px}
  .ms-signin .ms-btn-big{flex:1 1 100%}
}
.ms-new[hidden]{display:none}
.ms #f-pin::placeholder{letter-spacing:0}
@media (max-width:760px){.ms-save .ms-msg:empty{display:none}}

/* =========================================================
   PLAYER RAIL (2026-10-28): the game bar is a vertical panel on the right.
   Starts closed; the LV tab on the right edge opens it.
   ========================================================= */
.hud .bar i{width:var(--p,0)}
html.rail .gamebar{position:fixed;top:calc(var(--nav-h,64px) + 10px);right:0;left:auto;bottom:auto;z-index:45;width:112px;max-height:calc(100vh - var(--nav-h,64px) - 20px) !important;max-height:calc(100dvh - var(--nav-h,64px) - 20px) !important;
  overflow-y:auto;overflow-x:hidden;opacity:1;background:var(--white);border:2px solid var(--ink);border-right:0;border-top:2px solid var(--ink);box-shadow:-4px 4px 0 var(--gold);
  transform:none;visibility:visible;transition:transform .2s steps(4),visibility 0s}
html.rail.hud-hidden .gamebar{max-height:calc(100vh - var(--nav-h,64px) - 20px) !important;opacity:1;border-top-color:var(--ink);transform:translateX(calc(100% + 10px));visibility:hidden;transition:transform .2s steps(4),visibility 0s .2s}
html.rail .gamebar-inner{max-width:none;margin:0;padding:10px 10px 12px !important;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px !important}
html.rail .gamebar .hud{position:static;display:flex;flex-direction:column;align-items:stretch;gap:8px !important;padding:0}
html.rail .gamebar .hud .xp{position:relative;flex-direction:column;align-items:center;gap:7px;padding:10px 6px !important;cursor:pointer;white-space:normal !important}
html.rail .gamebar .hud .lv{font-size:9px}
html.rail .gamebar .hud .bar{width:16px !important;height:96px;border-width:2px}
html.rail .gamebar .hud .bar i{left:0;right:0;top:auto;bottom:0;width:auto;height:var(--p,0);transition:height .25s steps(5)}
html.rail .gamebar .hud .pts{display:block !important;font-size:7px}
html.rail .gamebar .hud .snd{width:100%;padding:8px 4px !important;font-size:7px !important}
html.rail .gamebar .gb-disc,html.rail .gamebar .gb-album{margin:0;width:100%;justify-content:center;height:30px}
html.rail .gamebar .gb-right{display:flex;flex-direction:column;align-items:stretch;gap:8px !important;margin:0 !important}
html.rail .gamebar .gb-right > *{width:100%;justify-content:center;margin:0}
html.rail .gamebar .gb-gift span,html.rail .gamebar .gb-gift.open span{display:inline}
html.rail .gamebar .basket-fab{width:100%;justify-content:center}
html.rail .gb-admin{margin:0;justify-content:center}
html.rail .gb-hide{align-self:flex-end;padding:4px 2px !important;font-size:7px}
html.rail .gb-hide .gh-t{display:inline !important}
.gb-keys{font-family:var(--pixel);font-size:7px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;background:var(--white);color:var(--ink);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--gold);cursor:pointer}
.gb-keys:hover{background:var(--ink);color:var(--gold)}
.gk-row{display:grid;grid-template-columns:repeat(2,20px);gap:4px}
.gk{display:grid;place-items:center;width:20px;height:20px;border:1px dashed var(--silver-2)}
.gk img{width:14px;height:14px;image-rendering:pixelated;filter:grayscale(1);opacity:.35}
.gk.got{border:1px solid var(--ink);background:var(--gold)}
.gk.got img{filter:none;opacity:1}
/* the closed tab on the right edge */
html.rail .gb-tab{position:fixed;top:calc(var(--nav-h,64px) + 10px);right:0;left:auto;z-index:45;display:none;flex-direction:column;align-items:center;gap:8px;width:50px;padding:10px 4px;
  font-family:var(--pixel);font-size:7px;line-height:1.3;color:var(--ink);background:var(--white);border:2px solid var(--ink);border-right:0;box-shadow:-3px 3px 0 var(--gold);cursor:pointer}
html.rail.hud-hidden .gb-tab{display:flex}
.gb-tab .gt-arrow{color:var(--gold-deep)}
.gb-tab .gt-lv{display:flex;flex-direction:column;align-items:center;gap:4px}
.gb-tab .gt-lv b{font-size:12px}
.gb-tab .gt-k,.gb-tab .gt-b{display:flex;flex-direction:column;align-items:center;gap:3px}
.gb-tab img{image-rendering:pixelated}
html.rail .gb-tab:hover{background:var(--ink);color:var(--white)}
html.rail .gb-tab.ping{animation:bump-sm .4s steps(4) 4;background:var(--gold)}
/* toasts stay clear of the panel / tab */
html.rail .toasts{top:calc(var(--nav-h,64px) + 12px);right:66px;bottom:auto}
html.rail.rail-open .toasts{right:126px}
@media (max-width:600px){
  html.rail .gamebar{width:96px}
  html.rail .gamebar .hud .bar{height:72px}
  html.rail .toasts{left:12px;right:60px;align-items:stretch}
  html.rail.rail-open .toasts{right:108px}
  html.rail .gb-tab{width:44px}
}
@media (min-width:1280px){ html.rail.rail-open main,html.rail.rail-open .site-footer{padding-right:116px} }
@media (prefers-reduced-motion:reduce){html.rail .gamebar,html.rail.hud-hidden .gamebar{transition:none}}
@media print{html.rail .gb-tab,html.rail .gamebar{display:none !important}}

/* ---------- The vault: 4 keys shown on arrival (homepage hero) ---------- */
.vault-strip{max-width:var(--wrap);margin:clamp(24px,3vw,36px) auto 0;padding:0 var(--pad-x)}
.vs-inner{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);background:var(--white);padding:16px clamp(14px,2.4vw,24px);display:grid;grid-template-columns:minmax(200px,1fr) auto auto;gap:16px 22px;align-items:center}
.vs-h{margin:0;font-size:13px;line-height:1.6;font-weight:600}
.vs-tag{display:block;font-family:var(--pixel);font-size:8px;letter-spacing:1px;color:var(--gold-deep);margin-bottom:6px;-webkit-font-smoothing:none}
.vs-keys{display:grid;grid-template-columns:repeat(4,minmax(86px,1fr));gap:8px}
.vs-key{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 6px 8px;background:var(--white);color:var(--ink);border:1.5px dashed var(--silver-2);cursor:pointer;font:inherit;text-align:center}
.vs-key img{width:26px;height:26px;image-rendering:pixelated;filter:grayscale(1);opacity:.4;animation:vk-bob 2.4s steps(4) infinite}
.vs-key:nth-child(2) img{animation-delay:.3s}.vs-key:nth-child(3) img{animation-delay:.6s}.vs-key:nth-child(4) img{animation-delay:.9s}
.vs-n{font-family:var(--pixel);font-size:7px;-webkit-font-smoothing:none}
.vs-hint{font-size:10px;line-height:1.35;color:var(--ink-2)}
.vs-key:hover{border-style:solid;border-color:var(--ink)}
.vs-key.got{background:var(--gold);border:1.5px solid var(--ink)}
.vs-key.got img{filter:none;opacity:1;animation:none}
.vs-key.got .vs-hint{color:var(--ink)}
.vs-go{font-family:var(--pixel);font-size:7px;line-height:1.6;padding:12px 14px;background:var(--ink);color:var(--gold);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold);cursor:pointer;white-space:nowrap;-webkit-font-smoothing:none}
.vs-go:hover{background:var(--gold);color:var(--ink)}
.vault-strip.done .vs-go{background:var(--gold);color:var(--ink)}
@media (max-width:1000px){.vs-inner{grid-template-columns:1fr}.vs-go{justify-self:start}}
@media (max-width:600px){.vs-keys{grid-template-columns:repeat(2,1fr)}.vs-go{justify-self:stretch;white-space:normal}}
@media (prefers-reduced-motion:reduce){.vs-key img{animation:none}}

/* ---------- Artist Spotlight players (set from HQ) ---------- */
.spot-genre{margin:-4px 0 10px;font-family:var(--pixel);font-size:7px;color:var(--gold-deep)}
.spot-embed{width:100%;max-width:420px;border:1px solid var(--silver);background:var(--white)}
.spot-embed iframe{display:block;width:100%;height:352px;border:0}
.spot-sc iframe{height:420px}
.spot-yt{max-width:560px}
.spot-card{max-width:420px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);background:var(--white);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.spot-card .pixel{margin:0;font-size:12px;line-height:1.6}
html.rail .gamebar .q-badge{right:-2px;top:-8px}
html.rail .gb-tab{font-size:8px}

/* Beat library (OTSF space) */
.ms-lib-in{padding:8px 10px 10px}
.ms-lib-list{list-style:none;margin:6px 0 10px;padding:0;border-top:1px solid var(--ms-line)}
.ms-lib-list li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--ms-line)}
.ms-lib-t{display:flex;flex-direction:column;line-height:1.3}
.ms-lib-play{width:28px;height:28px;border:1px solid var(--ms-head);background:transparent;color:inherit;cursor:pointer;font-size:11px;padding:0}
.ms-lib-play.off{display:grid;place-items:center;opacity:.35;cursor:default}
.ms-lib-have{font-size:12px;font-weight:700;color:#2e7d32}
.ms-lib-lock{font-size:12px;opacity:.7}
.ms-lib-list li.ms-lib-empty{display:block}
.ms-lib.flash{animation:msLibFlash 1.2s ease}
@keyframes msLibFlash{0%,60%{box-shadow:0 0 0 3px #f5c400}100%{box-shadow:0 0 0 0 transparent}}

.ms-up{margin:4px 0 12px;padding:10px;border:1px dashed var(--ms-head);background:rgba(255,255,255,.4)}
.ms-up .ms-btn-big{margin-top:6px}
.ms-up-msg{min-height:1em;margin:6px 0 0}
.ms-up-msg.err{color:#b00020}
.ms-lib-acts{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

.ms-up{transition:background .15s,border-color .15s}
.ms-up.over{background:#fff7cc;border-color:#f5c400;border-style:solid}
.ms-up-h{margin:0 0 4px;font-size:14px}
.ms-up-bar{margin-top:8px}
.ms-up-track{height:10px;border:1px solid var(--ms-head);background:#fff}
.ms-up-track i{display:block;height:100%;width:0;background:#f5c400;transition:width .2s}
.ms-song-up{margin:0;padding:6px 10px;background:rgba(255,255,255,.06)}

/* Forgot PIN (2026-10-29) */
.ms-forgot-row{margin:6px 0 0 !important}
.ms-linkbtn{background:none;border:0;padding:4px 0;font:700 12px Verdana,Tahoma,Arial,sans-serif;color:#7E5F0B;text-decoration:underline;cursor:pointer}
.ms-linkbtn:hover{color:#3A2E05}
.ms-linkbtn:focus-visible{outline:2px solid #C9A227;outline-offset:2px}
.ms-reset-note{font-size:12px;line-height:1.5;margin:0 0 10px !important}
.ms-reset #rp-pin,.ms-reset #rp-pin2{letter-spacing:6px;text-align:center}
.ms-reset label:first-child{flex:1 1 140px}
.ms-reset label:nth-child(2){flex:1 1 140px;display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:#3A2E05}
@media (max-width:760px){.ms-linkbtn{font-size:14px;padding:8px 0}}

/* ===== 2026-10-29: vault toned down, keys made visible ===== */
.vault-strip{max-width:var(--wrap);margin:28px auto 10px;padding:0 var(--pad-x);text-align:center}
.vs-line{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 6px;font:inherit;font-size:11px;color:var(--ink-2);opacity:.6;cursor:pointer}
.vs-line img{width:12px;height:12px;image-rendering:pixelated;filter:grayscale(1)}
.vs-line:hover,.vs-line:focus-visible{opacity:1;text-decoration:underline}
.gb-keys{gap:3px;padding:5px 3px;box-shadow:none;border-width:1px}
.gb-keys .gk-row{grid-template-columns:repeat(4,12px);gap:2px}
.gb-keys .gk img{width:12px;height:12px}
.vault-key{opacity:1;width:40px;height:40px;margin:8px 0 0 8px}
.vault-key img{width:28px;height:28px;filter:drop-shadow(0 0 4px rgba(201,162,39,.9)) drop-shadow(0 0 1px #000)}
@media (max-width:600px){.vault-key{width:44px;height:44px}}