/* The /hatcheryhills landing page: a bright game box in the title screen's colours. The game's own bitmap fonts (built from
   game/src/art/font.json by site/scripts/landing-media.py) carry the headings; the art is drawn at 1x and enlarged
   with image-rendering: pixelated. */
@font-face{font-family:"VTS Title";src:url(/hatcheryhills/media/vts-title.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VTS HUD";src:url(/hatcheryhills/media/vts-hud.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VTS Text";src:url(/hatcheryhills/media/vts-text.woff2) format("woff2");font-display:swap}

:root{
  --ink:#0c0c26;      /* the art's outline navy */
  --navy:#1f2a7a;     /* the HUD font's outline */
  --white:#fcfcfc;
  --cream:#fff8e6;
  --paper:#ffffff;
  --sky:#2c6cdc;
  --sky-lt:#6cb0fc;
  --purple:#6a1fc4;
  --plum:#8c44a8;
  --red:#da2a3a;
  --crimson:#9a1428;
  --orange:#e39337;
  --sun:#f89838;
  --gold:#fcd03c;
  --pale:#fff4a8;
  --green:#2f8a3c;
  --grass:#48b048;
  --dirt:#e0a050;
  --dirt-dk:#b8702c;
  --text:#14143a;
  --dim:#4a4a6e;
  --px:4px;           /* one chunky pixel of border */
  color-scheme:light;
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--dirt);color:var(--text);font:400 17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
/* The ground under everything: Hatchery Hills' checkerboard. */
body{background:
  conic-gradient(var(--dirt) 25%,var(--dirt-dk) 0 50%,var(--dirt) 0 75%,var(--dirt-dk) 0) 0 0/64px 64px}
img{max-width:100%;height:auto}
.px,.logo img,.hero-sprite,.card img,.zone img,.touch-frame img{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--sky)}
a:focus-visible,button:focus-visible{outline:4px dashed var(--ink);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--paper);color:var(--ink);padding:10px 14px;border:var(--px) solid var(--ink);font-weight:700}
.skip:focus{top:12px}

/* ---- the fonts as the game draws them */
/* Title: a white face, a one-pixel navy outline and a pixel of drop shadow down-right (one font pixel = 1/16 em). */
.ttl{font-family:"VTS Title","VTS HUD",system-ui,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0;
  font-size:24px;line-height:1.15;color:var(--white);margin:0;
  text-shadow:.0625em 0 var(--ink),-.0625em 0 var(--ink),0 .0625em var(--ink),0 -.0625em var(--ink),
    .0625em .0625em var(--ink),-.0625em -.0625em var(--ink),.0625em -.0625em var(--ink),-.0625em .0625em var(--ink),
    .125em .125em var(--ink),.1875em .1875em var(--ink)}
/* HUD: the gold-to-orange rows on a navy outline (one font pixel = 1/8 em; each line is 10 pixels, the face rows 2-8). */
.hud{font-family:"VTS HUD","VTS Text",ui-monospace,monospace;font-weight:400;text-transform:uppercase;letter-spacing:0;
  font-size:16px;line-height:1.25;margin:0;color:#ffb224;
  background:linear-gradient(#fff8c4 0 30%,#ffe040 30% 50%,#ffb224 50% 70%,#ff7c14 70% 80%,#e24c16 80%) 0 0/100% 1.25em repeat-y;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(.125em 0 0 var(--navy)) drop-shadow(-.125em 0 0 var(--navy)) drop-shadow(0 .125em 0 var(--navy)) drop-shadow(0 -.125em 0 var(--navy)) drop-shadow(.125em .125em 0 var(--ink))}
@media (forced-colors:active){.hud{-webkit-text-fill-color:currentColor;background:none;filter:none}.ttl{text-shadow:none}}

/* ---- 1. the hook: the title screen's sunrise bands, the logo, the trailer and PLAY NOW */
.hook{position:relative;text-align:center;padding:20px 16px 72px;color:var(--white);
  background:linear-gradient(#3060d8 0 7%,#5a54c0 7% 12%,var(--plum) 12% 20%,#d8406a 20% 27%,#e43c4c 27% 33%,#f06030 33% 41%,var(--sun) 41% 52%,#fcb848 52% 64%,var(--gold) 64% 78%,var(--pale) 78%)}
/* Green hills along the bottom edge, like the title's foreground. */
.hook::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;
  background:
    radial-gradient(70px 44px at 50% 100%,#3a9a44 97%,transparent 100%) 40px 100%/140px 44px repeat-x,
    radial-gradient(60px 36px at 50% 100%,var(--grass) 97%,transparent 100%) 0 100%/120px 56px repeat-x,
    linear-gradient(transparent 46px,var(--green) 46px)}
.logo{margin:0 auto 6px;max-width:560px}
.logo img{display:block;width:min(100%,482px);margin:0 auto;filter:drop-shadow(0 6px 0 rgba(12,12,38,.35))}
.tagline{display:block;margin-top:6px;font:400 16px/1.25 "VTS HUD","VTS Text",ui-monospace,monospace;text-transform:uppercase;color:var(--white);
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),4px 4px var(--ink)}
/* The trailer in a chunky TV bezel, the sticker's white rim round it. */
.tv{position:relative;max-width:820px;margin:16px auto 30px;border:var(--px) solid var(--ink);background:#000;
  box-shadow:0 0 0 var(--px) var(--white),0 0 0 calc(var(--px)*2) var(--ink),8px 10px 0 calc(var(--px)*2) rgba(12,12,38,.45)}
.trailer{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000 url(/hatcheryhills/media/poster.webp) center/cover no-repeat}
.tv-toggle{position:absolute;right:8px;bottom:8px;min-height:36px;padding:6px 10px;border:2px solid var(--white);background:rgba(12,12,38,.78);color:var(--white);
  font:400 16px/1 "VTS Text",ui-monospace,monospace;text-transform:uppercase;cursor:pointer}
.tv-toggle:hover{background:var(--ink)}

/* PLAY NOW: the menu's red, white rim, navy outline, a thick bottom edge that presses in. */
.play-now{position:relative;display:inline-flex;white-space:nowrap;align-items:center;gap:14px;min-height:64px;padding:12px 28px 10px;
  font:400 32px/1 "VTS Title","VTS HUD",system-ui,sans-serif;text-transform:uppercase;text-decoration:none;color:var(--white);
  background:linear-gradient(#ff5560 0 12%,#e42430 12% 70%,#b81a28 70%);border:var(--px) solid var(--ink);
  box-shadow:0 0 0 var(--px) var(--white),0 0 0 calc(var(--px)*2) var(--ink),0 10px 0 calc(var(--px)*2) var(--ink);
  text-shadow:.0625em 0 var(--ink),-.0625em 0 var(--ink),0 .0625em var(--ink),0 -.0625em var(--ink),.0625em .0625em var(--ink),-.0625em -.0625em var(--ink),.0625em -.0625em var(--ink),-.0625em .0625em var(--ink),.125em .125em var(--ink);
  transition:transform .06s,box-shadow .06s;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.play-now svg{width:28px;height:28px;filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))}
.play-now:hover{background:linear-gradient(#ff7078 0 12%,#f03440 12% 70%,#c42030 70%)}
.play-now:active{transform:translateY(8px);box-shadow:0 0 0 var(--px) var(--white),0 0 0 calc(var(--px)*2) var(--ink),0 2px 0 calc(var(--px)*2) var(--ink)}
.play-now:focus-visible{outline:4px dashed var(--ink);outline-offset:14px}
.play-now.small{font-size:24px;min-height:52px;padding:10px 20px 8px}
.hook-fine{position:relative;z-index:1;margin:22px 0 0;font:400 16px/1.4 "VTS Text",ui-monospace,monospace;text-transform:uppercase;color:var(--ink)}

/* ---- the panels: each a sticker on the ground, its title on a blue plate over the top edge */
main{display:block;padding:8px 16px 8px}
.panel{position:relative;max-width:1040px;margin:52px auto;padding:0 16px 20px;background:var(--cream);border:var(--px) solid var(--ink);
  box-shadow:0 0 0 var(--px) var(--white),0 0 0 calc(var(--px)*2) var(--ink),8px 10px 0 calc(var(--px)*2) rgba(12,12,38,.4)}
.panel>h2.ttl{position:relative;display:table;margin:-26px 0 18px -4px;max-width:100%;padding:9px 14px 7px;
  background:var(--sky);border:var(--px) solid var(--ink);box-shadow:0 0 0 var(--px) var(--white),0 0 0 calc(var(--px)*2) var(--ink)}
.panel.cast>h2.ttl{background:var(--purple)}
.panel.zones>h2.ttl{background:var(--green)}
.panel.lb-panel>h2.ttl{background:var(--red)}
.panel.install>h2.ttl{background:var(--orange)}
.panel h3.hud{margin:0 0 8px}
.intro{margin:0 0 14px;color:var(--dim)}
.fine{font-size:14px;color:var(--dim);margin:8px 0 0}

/* 2. what it is */
.about-row{display:flex;gap:16px;align-items:center}
.hero-sprite{flex:0 0 auto;width:85px}
.lead{margin:0 0 6px;font-size:18px;font-weight:600}
.lead:first-child{font-size:20px;font-weight:800}

/* 3. how to play */
.how-grid{display:grid;gap:22px}
.touch-pic{margin:0}
.touch-frame{position:relative;border:10px solid var(--ink);border-radius:18px;background:#000;box-shadow:0 0 0 3px #3a4160 inset}
.touch-frame img{display:block;width:100%;border-radius:6px}
.pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:var(--ink);border:3px solid var(--ink);font:400 16px/1 "VTS Text",ui-monospace,monospace;box-shadow:2px 2px 0 var(--ink)}
.p1{left:15.4%;top:70.4%}.p2{left:85.4%;top:79.3%}.p3{left:86.9%;top:61%}.p4{left:92.4%;top:12.2%}
.pins{list-style:none;counter-reset:pin;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.pins li{counter-increment:pin;display:flex;gap:8px;align-items:baseline;font-size:15px}
.pins li::before{content:counter(pin);flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--gold);border:2px solid var(--ink);
  font:400 16px/1 "VTS Text",ui-monospace,monospace;color:var(--ink);transform:translateY(4px)}
.pins b,.moves b{display:block;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--ink)}
.keys{border-collapse:collapse;width:100%}
.keys th{text-align:left;padding:7px 10px 7px 0;font:400 16px/1.25 "VTS Text",ui-monospace,monospace;text-transform:uppercase;color:var(--ink);white-space:nowrap;vertical-align:middle}
.keys td{padding:5px 0;vertical-align:middle}
.keys tr+tr{border-top:2px dashed #e4d6b8}
kbd{display:inline-grid;place-items:center;min-width:34px;height:34px;margin:2px 3px 2px 0;padding:0 6px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-bottom-width:5px;border-radius:5px;font:400 16px/1 "VTS Text",ui-monospace,monospace;text-transform:uppercase}
kbd.wide{min-width:64px}
.kg{display:inline-block;white-space:nowrap}
.or{font-size:13px;color:var(--dim);margin:0 4px 0 1px}
.how-keys h3.hud+.moves{margin-top:0}
.how-keys .fine+h3.hud{margin-top:18px}
.moves{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.moves li{padding:8px 10px;background:var(--paper);border:2px solid var(--ink);font-size:15px;line-height:1.4}

/* 4. the cast */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.card{display:grid;grid-template-columns:96px 1fr;column-gap:12px;align-items:start;padding:10px;background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.card img{grid-row:1/span 4;width:96px;height:96px;background:var(--sky-lt);border:3px solid var(--ink)}
.card.hero-c img{background:var(--gold)}
.card.villain img{background:#b48ad8}
.card h3.hud{font-size:16px;margin:2px 0 6px}
.card p{margin:0 0 3px;font-size:13px;font-weight:700;letter-spacing:.03em;line-height:1.35;color:var(--text)}
.card p.where{margin-top:5px;color:var(--crimson);font-size:12px}

/* 5. the zones */
.zone-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zone{position:relative;display:flex;flex-direction:column;background:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(12,12,38,.5);color:var(--white)}
.zone img{display:block;width:100%;aspect-ratio:16/9}
.zone-no{position:absolute;left:6px;top:6px;font-size:16px}
.zone h3.hud{margin:8px 8px 4px;font-size:16px}
.zone-state{margin:auto 8px 10px;font-size:16px}
.zone-state a{color:inherit;text-decoration:none;white-space:nowrap}
.zone-state a::after{content:"";position:absolute;inset:0}
.zone-state a:focus-visible{outline:none}
.zone:focus-within{outline:4px dashed var(--ink);outline-offset:4px}
.zone.is-soon img{filter:grayscale(.8) brightness(.62) contrast(1.05)}
.zone.is-soon::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(12,12,38,.14) 10px 20px);pointer-events:none}
.zone .soon{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%) rotate(-6deg);width:max-content;max-width:86%;text-align:center;line-height:1.2!important;padding:5px 7px 3px;background:var(--red);border:3px solid var(--ink);
  box-shadow:0 0 0 3px var(--white),3px 3px 0 3px var(--ink);font:400 16px/1 "VTS Text",monospace;text-transform:uppercase;color:var(--white)}
.zone.is-live{background:var(--sky)}

/* 6. the leaderboard (leaderboard.js's markup, in the panel's light colours) */
.hud-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px 6px;background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);border-bottom-width:6px;font:400 16px/1 "VTS Text",ui-monospace,monospace;text-transform:uppercase;text-decoration:none;cursor:pointer}
.hud-btn:hover{background:var(--pale)}
.hud-btn:active{border-bottom-width:3px;transform:translateY(3px)}
.lb-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:6px}
.lb-head .who{font-size:16px}
.lb-season{font-size:14px;color:var(--dim)}
.lb-season b{color:var(--ink)}
.lb-rows{list-style:none;margin:6px 0 10px;padding:0;border:3px solid var(--ink);background:var(--paper)}
.lb-rows li{display:grid;grid-template-columns:2.2em 1.4em minmax(0,1fr) auto auto;align-items:center;gap:2px 10px;padding:7px 10px;border-bottom:2px solid #e8dcc0;
  font:400 15px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--text)}
.lb-rows li:last-child{border-bottom:0}
.lb-rows li:nth-child(odd){background:#fffcf2}
.lb-rows li.lb-top{background:#fff2c4}
.lb-rows li.lb-you{background:#dce8ff;box-shadow:inset 5px 0 0 var(--sky)}
.lb-rows li.lb-note{display:block;text-align:center;color:var(--dim);font-family:inherit;padding:18px 10px}
.lb-rank{text-align:right;color:var(--dim);font-weight:700}
.lb-rows li.lb-top .lb-rank{color:var(--crimson)}
.lb-crown{width:1.2em;height:1em;display:block}
.lb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:system-ui,sans-serif;font-weight:800;letter-spacing:.04em}
.lb-name i{font-style:normal;color:var(--dim);font-weight:500}
.lb-wallet{color:var(--dim);font-size:13px}
.lb-score{text-align:right;min-width:5.5ch;font-weight:700;color:var(--ink)}
.lb-check{display:inline-grid;place-items:center;width:1.2em;height:1.2em;margin-left:.35em;vertical-align:-.12em;background:#627eea;color:#fff;
  font:700 .75em/1 system-ui,sans-serif;border:1px solid var(--ink);box-shadow:0 0 0 1px #3c0084}
.lb-champs{margin:0 0 10px;font-size:14px;color:var(--dim);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.lb-champs b{color:var(--ink)}
.lb-champs .lb-crown{display:inline-block;vertical-align:-.15em;margin-right:.25em}
.play-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lb-bar .lb-status{margin:0;color:var(--text)}
.lb-bar .lb-status.err{color:var(--crimson)}
.lb-pop{margin:12px 0 4px;padding:12px;border:3px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.lb-pop h3{margin:0 0 6px;font:400 16px/1.25 "VTS Text",ui-monospace,monospace;text-transform:uppercase;color:var(--ink)}
.lb-pop p{margin:0 0 8px;font-size:15px}
.lb-wallets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.lb-wallets img{width:22px;height:22px}
.lb-nick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.lb-nick input{flex:1 1 200px;min-width:0;min-height:44px;background:var(--paper);border:3px solid var(--ink);color:var(--ink);font:16px ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.lb-nick input:focus{outline:3px dashed var(--sky);outline-offset:2px}
.lb-nick input[aria-invalid=true]{border-color:var(--red)}
.lb-pop .err{color:var(--crimson)}
.lb-fine{margin-top:12px}

/* 7. install */
.install-grid{display:grid;gap:14px}
.step-card{padding:12px 14px;background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.step-card ol{margin:0;padding-left:1.4em}
.step-card li{margin:4px 0}
.ico{width:1.05em;height:1.05em;vertical-align:-.15em;color:var(--sky)}

/* 8. the footer: the ground itself */
.foot{position:relative;text-align:center;padding:40px 16px calc(28px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#d8d8ee;border-top:8px solid var(--green);
  box-shadow:0 -8px 0 var(--grass)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:28px 0 14px}
.foot-links a{color:var(--white);font-weight:700;text-decoration:none;padding:6px 2px;border-bottom:2px solid var(--orange)}
.foot-links a:hover{color:var(--gold)}
.foot a:focus-visible{outline-color:var(--gold)}
.disclaimer{display:inline-block;margin:6px 0 0;font-size:16px}
.foot .fine{color:#a8a8c8}

/* ---- the game, after PLAY NOW: full screen where the browser allows, else it fills the window (iPhone) */
.stage{position:fixed;inset:0;z-index:100;background:#000;display:flex}
.stage iframe{flex:1;width:100%;height:100%;border:0;display:block;background:#000}
/* Top centre: clear of the HUD's score (left) and the game's pause and expand buttons (right). */
.stage-close{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 6px);z-index:2;width:36px;height:36px;padding:0;
  border:2px solid var(--white);outline:2px solid var(--ink);background:rgba(11,11,18,.7);color:var(--white);font:700 24px/1 system-ui,sans-serif;cursor:pointer;touch-action:manipulation;opacity:.85}
.stage-close:hover{opacity:1}
.stage-close:focus-visible{outline:3px dashed var(--gold);outline-offset:2px}
html.playing,html.playing body{overflow:hidden;height:100%}

/* ---- wider screens */
@media (min-width:560px){
  .ttl{font-size:32px}
  .panel{padding:0 24px 26px}
  .panel>h2.ttl{margin-top:-30px}
  .cards{grid-template-columns:1fr 1fr}
  .zone-list{grid-template-columns:1fr 1fr}
  .install-grid{grid-template-columns:1fr 1fr}
  .about-row{gap:24px}
  .hero-sprite{width:170px}
  .tagline{font-size:24px;text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),3px 3px var(--ink),-3px -3px var(--ink),3px -3px var(--ink),-3px 3px var(--ink),6px 6px var(--ink)}
  .lead:first-child{font-size:24px}
  .lead{font-size:19px}
}
@media (min-width:720px){
  .zone .soon{font-family:"VTS HUD","VTS Text",monospace;padding:6px 10px 4px;white-space:nowrap;max-width:none}
}
@media (min-width:880px){
  /* The hook side by side, PLAY NOW above the fold: the logo and the button left, the trailer right. */
  .hook{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,7fr);grid-template-areas:"logo tv" "play tv" "fine tv";column-gap:44px;align-items:center;
    padding:36px max(32px,calc((100% - 1240px)/2)) 96px}
  .hook>.logo{grid-area:logo;align-self:end;margin:0}
  .hook>.tv{grid-area:tv;margin:0;width:100%;max-width:none}
  .hook>.play-now{grid-area:play;justify-self:center;margin-top:26px}
  .hook>.hook-fine{grid-area:fine;align-self:start}
  .how-grid{grid-template-columns:1.25fr 1fr;align-items:start}
  .cards{grid-template-columns:repeat(3,1fr)}
  .zone-list{grid-template-columns:repeat(4,1fr)}
  .panel{padding:0 30px 30px}
}
@media (min-width:1180px){
  .play-now{font-size:48px;padding:16px 40px 12px}
  .play-now svg{width:40px;height:40px}
}
@media (max-width:380px){
  .play-now{font-size:24px;padding:12px 20px 10px}
  .pins{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .play-now,.hud-btn{transition:none}
  .play-now:active,.hud-btn:active{transform:none}
  html{scroll-behavior:auto}
}

/* The music button: off until the visitor turns it on (phones block sound before a tap anyway) */
.music-toggle{position:fixed;right:14px;bottom:14px;z-index:15;padding:10px 14px;font:400 15px/1 "VTS Text",ui-monospace,monospace;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border:var(--px) solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.music-toggle[aria-pressed="true"]{background:var(--yellow,#f8d020)}
.music-toggle:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.playing .music-toggle{display:none}
@media (max-width:420px){.music-toggle{right:10px;bottom:10px;padding:8px 10px;font-size:13px}}

/* The one-screen page: the small line under PLAY NOW wraps evenly instead of leaving one word alone */
.hook-fine{text-wrap:balance}
.foot{margin-top:24px;padding-bottom:72px}