/* ==========================================================================
   style.css — Pressure Strike. Same palette as the rest of the arcade.
   ========================================================================== */

:root{
  --font-display:'Cinzel','Trajan Pro','Palatino Linotype',Georgia,serif;
  --font-body:'Barlow Semi Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  --ink:#03080e;
  --gold-1:#F0E6D2; --gold-2:#C8AA6E; --gold-3:#C89B3C; --gold-4:#785A28; --gold-5:#463714;
  --dim:#A09B8C; --dimmer:#5B5A56;
  --orange:#FB9245; --water:#5CC8FF; --red:#E84057;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:var(--ink); color:var(--gold-1);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none;
}
#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }
body.locked #gl{ cursor:none; }

#hud{ position:fixed; inset:0; pointer-events:none; z-index:10; }

/* The visible box, set by game.js from visualViewport. Falls back to the
   layout viewport on anything that does not report one. */
html, body{ height:var(--vvh, 100%); }
#gl{ height:var(--vvh, 100%) !important; }
#hud{ height:var(--vvh, 100%) !important; }


/* ==========================================================================
   CROSSHAIR
   ========================================================================== */
.xhair{
  position:absolute; left:50%; top:50%; width:0; height:0;
  --gap:8px; --xc:#5CC8FF;
}
.xhair i{
  position:absolute; background:var(--xc);
  box-shadow:0 0 4px rgba(0,0,0,.9), 0 0 6px var(--xc);
  transition:none;
}
.x-t{ width:2px; height:9px; left:-1px; top:calc(-1 * var(--gap) - 9px); }
.x-b{ width:2px; height:9px; left:-1px; top:var(--gap); }
.x-l{ width:9px; height:2px; top:-1px; left:calc(-1 * var(--gap) - 9px); }
.x-rr{ width:9px; height:2px; top:-1px; left:var(--gap); }
.x-dot{ width:2px; height:2px; left:-1px; top:-1px; opacity:.85; border-radius:50%; }

.hitmark{
  position:absolute; left:50%; top:50%; width:26px; height:26px;
  margin:-13px 0 0 -13px; opacity:0; pointer-events:none;
}
.hitmark::before,.hitmark::after{
  content:''; position:absolute; left:50%; top:50%; width:2px; height:9px;
  background:#F0E6D2; margin:-4.5px 0 0 -1px;
  box-shadow:0 0 4px #000;
}
.hitmark::before{ transform:rotate(45deg) translateY(-7px); }
.hitmark::after{ transform:rotate(-45deg) translateY(-7px); }
.hitmark.kill::before,.hitmark.kill::after{ background:var(--red); height:12px; }
.hitmark.treat::before,.hitmark.treat::after{ background:#D8FF6B; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  display:flex; align-items:center; gap:0;
  background:linear-gradient(180deg,rgba(1,10,19,.92),rgba(1,10,19,.55));
  border:1px solid var(--gold-4); border-top:none; border-radius:0 0 6px 6px;
  box-shadow:0 2px 14px rgba(0,0,0,.7);
}
.top>div{ padding:9px 20px; }
.wave{ font:700 11px/1 var(--font-body); letter-spacing:2.6px; color:var(--gold-2); min-width:118px; }
.time{
  font:600 21px/1 var(--font-display); letter-spacing:1px; color:var(--gold-1);
  border-left:1px solid rgba(200,170,110,.24); border-right:1px solid rgba(200,170,110,.24);
  min-width:84px; text-align:center;
}
.time.urgent{ color:#FF6B6B; animation:tPulse .9s ease-in-out infinite; }
@keyframes tPulse{ 50%{ text-shadow:0 0 12px var(--red); } }
.score{ font:600 16px/1 var(--font-body); color:var(--orange); min-width:96px; text-align:right; }

/* ==========================================================================
   HEALTH
   ========================================================================== */
.health{ position:absolute; left:26px; bottom:26px; width:210px; }
.h-label{ font:700 9px/1 var(--font-body); letter-spacing:2.4px; color:var(--dimmer); margin-bottom:6px; }
.h-bar{
  position:relative; height:16px; overflow:hidden;
  background:linear-gradient(180deg,#0B1116,#05090D);
  border:1px solid var(--gold-5);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9);
}
.h-fill{
  position:absolute; inset:0; transform-origin:left center;
  background:linear-gradient(180deg,#7FE3A0,#35D07F 46%,#12703F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s linear;
}
.h-fill.low{ background:linear-gradient(180deg,#FF8C7A,#E84057 46%,#7A1424); }
.h-text{
  position:absolute; right:0; bottom:20px;
  font:700 22px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 2px 4px #000;
}

/* ==========================================================================
   PRESSURE GAUGE
   ========================================================================== */
.gauge{
  position:absolute; right:26px; bottom:22px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.8));
}
.gauge svg{ display:block; }
.g-val{ font:700 19px var(--font-body); fill:var(--gold-1); }
.g-unit{ font:600 7px var(--font-body); fill:var(--dimmer); letter-spacing:2px; }
.g-arc{ transition:stroke-dashoffset .1s linear; }
.gauge.low .g-arc{ stroke:#FFB347; }
.gauge.empty .g-arc{ stroke:var(--red); }
.gauge.low{ animation:gWarn 1s ease-in-out infinite; }
@keyframes gWarn{ 50%{ filter:drop-shadow(0 0 14px rgba(255,179,71,.6)); } }
.gauge.pop{ animation:gPop .2s ease-out; }
@keyframes gPop{ 50%{ transform:scale(1.08); } }

/* ==========================================================================
   NOZZLE TIPS
   ========================================================================== */
.tips{
  position:absolute; right:26px; bottom:162px;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.tip{
  display:flex; align-items:center; gap:8px;
  padding:5px 10px; border-radius:4px;
  background:rgba(1,10,19,.6); border:1px solid transparent;
  opacity:.45; transition:opacity .15s, border-color .15s, background .15s;
}
.tip.on{
  opacity:1; background:rgba(1,10,19,.9);
  border-color:var(--tc);
  box-shadow:0 0 12px color-mix(in srgb, var(--tc) 45%, transparent);
}
.t-key{
  width:17px; height:17px; display:grid; place-items:center; border-radius:3px;
  background:rgba(240,230,210,.1); border:1px solid var(--gold-5);
  font:700 10px/1 var(--font-body); color:var(--gold-1);
}
.tip.on .t-key{ background:var(--tc); color:#06101a; border-color:var(--tc); }
.t-name{ font:600 11px/1 var(--font-body); letter-spacing:.8px; color:var(--gold-1); }

.tip-desc{
  position:absolute; right:26px; bottom:142px;
  max-width:300px; text-align:right;
  font:400 11.5px/1.45 var(--font-body); color:var(--dim);
  opacity:0; transition:opacity .25s; text-shadow:0 1px 3px #000;
}
.tip-desc.show{ opacity:1; }

/* ==========================================================================
   MESSAGES
   ========================================================================== */
.banner-stack{
  position:absolute; left:50%; top:16%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.banner{ text-align:center; animation:bIn .4s cubic-bezier(.2,1.3,.4,1); }
.banner.out{ animation:bOut .55s ease-in forwards; }
.b-t{
  font:700 34px/1 var(--font-display); letter-spacing:5px;
  background:linear-gradient(180deg,#FFF6DC,#F0E6D2 30%,#C8AA6E 64%,#785A28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 4px #000) drop-shadow(0 0 16px rgba(200,170,110,.5));
}
.b-s{ font:500 12px/1 var(--font-body); color:var(--dim); letter-spacing:2.4px; margin-top:6px; text-shadow:0 2px 3px #000; }
@keyframes bIn{ from{ opacity:0; transform:translateY(-14px) scale(.92);} }
@keyframes bOut{ to{ opacity:0; transform:translateY(-8px) scale(1.04);} }

.warn{
  position:absolute; left:50%; top:60%; transform:translateX(-50%);
  padding:7px 18px; border-radius:4px;
  background:rgba(120,20,30,.82); border:1px solid #E84057;
  font:700 12px/1 var(--font-body); letter-spacing:2.4px; color:#FFD9DD;
  opacity:0; transition:opacity .2s;
}
.warn.on{ opacity:1; }

.refill-hint{
  position:absolute; left:50%; bottom:22%; transform:translateX(-50%);
  padding:7px 18px; border-radius:4px;
  background:rgba(10,40,64,.8); border:1px solid var(--water);
  font:700 11px/1 var(--font-body); letter-spacing:2.6px; color:#CFF4FF;
  opacity:0; transition:opacity .2s;
}
.refill-hint.on{ opacity:1; }

.dmg-flash{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(232,64,87,.5), rgba(232,64,87,0) 62%);
}
.low-vignette{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .4s;
  background:radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(140,20,34,.85));
}

/* ==========================================================================
   PAUSE / END
   ========================================================================== */
.pause{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(2,6,12,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.pause.on{ display:flex; }
.p-title{ font:700 40px/1 var(--font-display); letter-spacing:8px; color:var(--gold-1); text-align:center; }
.p-sub{ margin-top:12px; font:500 12px/1 var(--font-body); letter-spacing:3px; color:var(--dim); text-align:center; }

.endscreen{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(0,0,0,.6), rgba(0,0,0,.94));
  pointer-events:auto;
}
.endscreen.on{ display:flex; animation:fadeIn .6s ease-out; }
@keyframes fadeIn{ from{ opacity:0; } }
.e-inner{
  background:linear-gradient(180deg,rgba(9,20,30,.98),rgba(2,8,14,.99));
  border:2px solid var(--gold-4); border-radius:8px;
  padding:30px 40px; text-align:center; min-width:400px;
  box-shadow:0 14px 60px rgba(0,0,0,.9);
}
.e-title{ font:700 50px/1 var(--font-display); letter-spacing:8px; }
.e-title.win{
  background:linear-gradient(180deg,#FFFDF2,#F0E6D2 28%,#C89B3C 66%,#6B4A16);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 6px #000) drop-shadow(0 0 24px rgba(200,170,110,.5));
}
.e-title.lose{
  background:linear-gradient(180deg,#FFE3E3,#E84057 45%,#6B1220);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 6px #000);
}
.e-sub{ margin-top:8px; font:400 12.5px/1 var(--font-body); letter-spacing:1.6px; color:var(--dim); }
.e-table{ margin:22px auto 0; border-collapse:collapse; font:500 13px var(--font-body); }
.e-table td{ padding:7px 18px; color:var(--dim); border-bottom:1px solid rgba(120,90,40,.2); text-align:left; }
.e-table td:last-child{ text-align:right; color:var(--gold-1); font-weight:600; }
.e-total td{ border-bottom:none; padding-top:12px; }
.e-total td:first-child{ color:var(--gold-2); letter-spacing:2.4px; font-weight:700; }
.e-total td:last-child{ color:var(--orange); font-size:22px; }
.e-btns{ margin-top:22px; display:flex; gap:10px; justify-content:center; }
.e-btn{
  display:inline-block; padding:12px 28px; cursor:pointer; text-decoration:none;
  font:700 12px/1 var(--font-body); letter-spacing:3px; color:var(--gold-1);
  background:linear-gradient(180deg,#1E3448,#0A141C);
  border:2px solid var(--gold-3); border-radius:3px;
}
.e-btn:hover{ background:linear-gradient(180deg,#2A4863,#101E29); box-shadow:0 0 18px rgba(200,155,60,.5); }
.e-btn.ghost{ border-color:var(--gold-5); color:var(--dim); }
.e-btn.ghost:hover{ color:var(--gold-1); border-color:var(--gold-3); }

/* ==========================================================================
   SPLASH
   ========================================================================== */
#splash{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:var(--ink); transition:opacity .6s ease; overflow:auto;
}
#splash.gone{ opacity:0; pointer-events:none; }
.sp-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 62% 55% at 22% 20%, rgba(251,146,69,.20), transparent 60%),
    radial-gradient(ellipse 55% 50% at 80% 80%, rgba(92,200,255,.12), transparent 62%),
    linear-gradient(165deg,#0b1a26,#03080e 62%);
}
.sp-inner{ position:relative; max-width:900px; padding:34px 30px; }
.sp-kicker{ font:700 10px/1 var(--font-body); letter-spacing:5px; color:var(--orange); }
.sp-inner h1{
  margin:12px 0 0; font:700 clamp(38px,7vw,64px)/.95 var(--font-display); letter-spacing:4px;
  background:linear-gradient(180deg,#FFF6DC,#F0E6D2 30%,#C8AA6E 66%,#785A28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 5px #000);
}
.sp-inner h1 span{ display:block; color:transparent; }
.sp-lede{ margin:14px 0 26px; max-width:46ch; font:400 14px/1.6 var(--font-body); color:var(--dim); }
.sp-cols{ display:grid; grid-template-columns:1fr 1.25fr; gap:26px; }
@media (max-width:760px){ .sp-cols{ grid-template-columns:1fr; } }
.sp-block{
  background:rgba(1,10,19,.5); border:1px solid var(--gold-5);
  border-radius:6px; padding:16px 18px;
}
.sp-h{ font:700 10px/1 var(--font-body); letter-spacing:3px; color:var(--gold-3); margin-bottom:12px; }
.sp-row{ display:flex; align-items:center; gap:6px; margin-bottom:7px; font:400 12.5px/1 var(--font-body); color:var(--dim); }
.sp-row span{ margin-left:6px; }
kbd{
  display:inline-block; min-width:22px; padding:4px 7px; text-align:center;
  background:linear-gradient(180deg,#1A2731,#0A131B);
  border:1px solid var(--gold-5); border-radius:3px;
  font:700 10.5px/1 var(--font-body); color:var(--gold-1);
}
.sp-list{ margin:0; padding-left:16px; }
.sp-list li{ margin-bottom:9px; font:400 12.5px/1.55 var(--font-body); color:var(--dim); }
.sp-list b{ color:var(--gold-2); font-weight:600; }

.sp-load{ margin-top:24px; max-width:340px; }
.sp-bar{ height:5px; background:#0b1116; border:1px solid var(--gold-5); overflow:hidden; }
.sp-bar>div{ height:100%; width:0; background:linear-gradient(90deg,var(--gold-4),var(--orange)); transition:width .18s ease; }
#loadtext{ margin-top:7px; font:500 10.5px/1 var(--font-body); letter-spacing:2px; color:var(--dimmer); }

#playbtn{
  margin-top:16px; padding:15px 46px; cursor:not-allowed; opacity:.4;
  font:700 14px/1 var(--font-body); letter-spacing:4px; color:var(--gold-1);
  background:linear-gradient(180deg,#2A1E12,#0A141C);
  border:2px solid var(--gold-4); border-radius:3px;
  transition:opacity .3s, box-shadow .3s, background .2s;
}
#playbtn.ready{ cursor:pointer; opacity:1; border-color:var(--orange); box-shadow:0 0 24px rgba(251,146,69,.35); }
#playbtn.ready:hover{ background:linear-gradient(180deg,#43301C,#12202C); box-shadow:0 0 34px rgba(251,146,69,.6); }

#mpbtn{
  margin-top:20px; margin-left:10px; padding:15px 30px; cursor:pointer;
  background:#0a1219; border:1px solid var(--gold-4); color:var(--gold-2);
  font:700 13px/1 var(--font-body); letter-spacing:3px;
  transition:color .2s, border-color .2s, box-shadow .2s;
}
#mpbtn:hover{ color:var(--gold-1); border-color:var(--gold-2); box-shadow:0 0 20px rgba(200,170,110,.3); }

.sp-home{
  display:inline-block; margin-left:18px;
  font:500 11px/1 var(--font-body); letter-spacing:2px; color:var(--dimmer);
  text-decoration:none; border-bottom:1px solid rgba(120,90,40,.5); padding-bottom:2px;
}
.sp-home:hover{ color:var(--gold-2); }

/* ==========================================================================
   PHONE — landscape touch layout
   ========================================================================== */
html.m, body.m{
  overscroll-behavior:none; touch-action:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  position:fixed; inset:0; width:100%; height:100%;
}
body.m #gl{ cursor:none; touch-action:none; }

#touchlayer{ position:absolute; inset:0; pointer-events:none; z-index:30; }

/* Pared-back HUD: the gauge and tips move to make room for thumbs. */
body.m .top{ height:28px; }
body.m .top>div{ padding:6px 12px; }
body.m .wave{ font-size:9px; letter-spacing:1.8px; min-width:86px; }
body.m .time{ font-size:15px; min-width:58px; }
body.m .score{ font-size:12px; min-width:64px; }
body.m .tips, body.m .tip-desc{ display:none; }
body.m .health{ left:calc(12px + env(safe-area-inset-left,0px)); bottom:auto; top:36px; width:128px; }
body.m .h-label{ font-size:7px; letter-spacing:1.6px; margin-bottom:3px; }
body.m .h-bar{ height:10px; }
body.m .h-text{ font-size:14px; bottom:13px; }
body.m .gauge{ right:auto; left:calc(146px + env(safe-area-inset-left,0px)); top:30px; bottom:auto; transform:scale(.62); transform-origin:top left; }
body.m .b-t{ font-size:22px; letter-spacing:3px; }
body.m .b-s{ font-size:9px; }
body.m .banner-stack{ top:12%; }
body.m .warn, body.m .refill-hint{ font-size:9.5px; padding:5px 12px; }
body.m .e-inner{ min-width:0; width:92vw; padding:16px 18px; }
body.m .e-title{ font-size:34px; letter-spacing:5px; }
body.m .e-table{ font-size:11px; margin-top:12px; }
body.m .e-table td{ padding:5px 12px; }
body.m .p-title{ font-size:26px; }

/* Joystick */
.t-joy{ position:absolute; left:0; top:0; width:0; height:0; opacity:0; transition:opacity .12s; }
.t-joy.on{ opacity:1; }
.t-joy-base{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:136px; height:136px; border-radius:50%;
  border:2px solid rgba(200,170,110,.4);
  background:radial-gradient(circle,rgba(10,22,34,.4),rgba(10,22,34,.12) 70%,transparent);
}
.t-joy-knob{
  position:absolute; left:50%; top:50%; width:60px; height:60px;
  /* No centring margin: touch.js writes translate(calc(-50% + dx), ...), and
     a margin here would centre it a second time and offset the whole stick. */
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#EAF4FF,#7FA8C8 55%,#33556E);
  border:2px solid rgba(240,230,210,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}

/* Trigger */
.t-fire{
  position:absolute;
  right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center; color:#CFF4FF;
  background:radial-gradient(circle at 42% 34%,rgba(30,64,92,.92),rgba(6,16,26,.95));
  border:3px solid var(--water);
  box-shadow:0 0 18px rgba(92,200,255,.35), 0 4px 12px rgba(0,0,0,.7);
}
.t-fire.on{
  background:radial-gradient(circle at 42% 34%,rgba(60,120,170,.95),rgba(10,30,48,.95));
  box-shadow:0 0 30px rgba(92,200,255,.8), inset 0 0 18px rgba(92,200,255,.5);
  transform:scale(.96);
}

/* Jump */
.t-jump{
  position:absolute;
  right:calc(128px + env(safe-area-inset-right,0px));
  bottom:calc(34px + env(safe-area-inset-bottom,0px));
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  font:700 10px/1 var(--font-body); letter-spacing:1.6px; color:var(--gold-1);
  background:radial-gradient(circle at 42% 34%,#3A2D14,#12100A);
  border:2px solid var(--gold-3);
  box-shadow:0 3px 10px rgba(0,0,0,.7);
}
.t-jump.on{ transform:scale(.94); box-shadow:0 0 16px rgba(200,155,60,.7); }

/* Tip strip */
.t-tips{
  position:absolute;
  right:calc(16px + env(safe-area-inset-right,0px));
  top:calc(34px + env(safe-area-inset-top,0px));
  display:flex; gap:6px;
}
.t-tip{
  width:38px; height:38px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(1,10,19,.72); border:2px solid var(--gold-5);
  font:700 13px/1 var(--font-body); color:var(--gold-1);
  opacity:.6;
}
.t-tip.on{
  opacity:1; border-color:var(--tc); color:var(--tc);
  box-shadow:0 0 12px color-mix(in srgb, var(--tc) 55%, transparent);
}
.t-tipname{
  position:absolute; right:calc(16px + env(safe-area-inset-right,0px));
  top:calc(78px + env(safe-area-inset-top,0px));
  font:700 10px/1 var(--font-body); letter-spacing:1.8px; color:var(--gold-2);
  text-shadow:0 1px 3px #000; opacity:0; transition:opacity .2s;
}
.t-tipname.on{ opacity:1; }

/* Landscape gate */
#rotate{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; background:#03080e; text-align:center;
}
body.portrait #rotate{ display:flex; }
.rot-icon{ font-size:54px; color:var(--gold-2); animation:rotSpin 2.4s ease-in-out infinite; }
@keyframes rotSpin{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(90deg)} }
.rot-title{ margin-top:14px; font:700 18px/1 var(--font-display); letter-spacing:4px; color:var(--gold-1); }
.rot-sub{ margin-top:8px; font:400 11px/1 var(--font-body); color:var(--dim); }

/* Splash on a short landscape screen */
body.m .sp-inner{ padding:16px 18px; }
body.m .sp-inner h1{ font-size:34px; }
body.m .sp-lede{ font-size:11.5px; margin:8px 0 14px; }
body.m .sp-cols{ grid-template-columns:1fr 1fr; gap:14px; }
body.m .sp-row{ font-size:11px; margin-bottom:4px; }
body.m .sp-list li{ font-size:11px; margin-bottom:5px; }
body.m #playbtn{ padding:12px 30px; font-size:12px; }

/* Show the control list that matches the device. */
.sp-touch{ display:none; }
body.m .sp-touch{ display:block; }
body.m .sp-kb{ display:none; }

/* ==========================================================================
   SHORT VIEWPORTS
   A phone held sideways leaves roughly 375px of height. The splash was taller
   than that, and with the body scroll-locked and the panel centred, the only
   button on the page sat below the fold where nothing could reach it. Centre
   with `margin:auto` instead — it still centres when the content fits and
   still scrolls when it does not — and give up the copy before the button.
   ========================================================================== */
#splash{
  display:flex; align-items:flex-start; justify-content:center;
  height:var(--vvh, 100%);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
#splash > .sp-inner,
#splash > .splash-inner{ margin:auto; }
/* Fixed, so the backdrop does not scroll out from under the content. */
#splash > .sp-bg,
#splash > .splash-bg{ position:fixed; }

@media (max-height: 560px){
  .sp-inner, .splash-inner{ padding:14px 16px; }
  .sp-inner h1{ font-size:clamp(26px,5.4vw,34px); }
  .sp-lede{ display:none; }
  .sp-cols{ gap:12px; }
  .sp-row{ font-size:10.5px; margin-bottom:3px; }
  .sp-list li{ font-size:10.5px; line-height:1.4; margin-bottom:4px; }
  /* The first few lines carry the job; the rest is colour. */
  .sp-list li:nth-child(n+4){ display:none; }
  .sp-load{ margin-top:12px; }
  #playbtn{ margin-top:12px; padding:11px 26px; font-size:11.5px; }
}
@media (max-height: 430px){
  .sp-cols{ display:none; }
  .sp-inner h1{ font-size:26px; margin-top:6px; }
  .sp-kicker{ font-size:9px; }
  .sp-load{ margin-top:10px; }
}