/* ==========================================================================
   style.css — You Are ORANCO. Same palette as the rest of the arcade,
   but the HUD is a job sheet instead of a combat readout.
   ========================================================================== */

: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; --sh:#D8FF6B; --red:#E84057; --green:#4ADE80;
}

*{ 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; }


/* ==========================================================================
   RETICLE — a ring that tightens as you square up to a surface
   ========================================================================== */
.ret{
  --r:20px; --rc:#5CC8FF;
  position:absolute; left:50%; top:50%; width:0; height:0;
}
.ret-ring{
  position:absolute; left:50%; top:50%;
  width:var(--r); height:var(--r); margin-left:calc(var(--r) / -2); margin-top:calc(var(--r) / -2);
  border:1.5px solid var(--rc); border-radius:50%;
  opacity:.72; transition:width .08s linear, height .08s linear,
             margin .08s linear, border-color .2s linear;
  box-shadow:0 0 6px color-mix(in srgb, var(--rc) 45%, transparent);
}
.ret-dot{
  position:absolute; left:-1.5px; top:-1.5px; width:3px; height:3px;
  border-radius:50%; background:var(--rc); opacity:.9;
  box-shadow:0 0 4px #000;
}

/* ==========================================================================
   JOB PROGRESS — top centre
   ========================================================================== */
.jobbar{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(420px,52vw); padding:9px 18px 10px;
  background:linear-gradient(180deg,rgba(1,10,19,.9),rgba(1,10,19,0));
  text-align:center;
}
.job-label{ font:700 9px/1 var(--font-body); letter-spacing:3.4px; color:var(--gold-3); }
.job-track{
  position:relative; margin-top:7px; height:9px;
  background:#0a1219; border:1px solid var(--gold-5); overflow:hidden;
}
.job-fill{
  position:absolute; inset:0; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,#2E6E8E,var(--water) 60%,#DFF6FF);
  box-shadow:0 0 14px rgba(92,200,255,.55);
  transition:transform .25s ease-out;
}
.job-pct{
  margin-top:5px; font:700 15px/1 var(--font-body); letter-spacing:2px;
  color:var(--gold-1); text-shadow:0 2px 4px #000;
}

/* ==========================================================================
   CHECKLIST — down the left
   ========================================================================== */
.checklist{
  position:absolute; left:22px; top:70px;
  display:flex; flex-direction:column; gap:3px;
  background:rgba(1,10,19,.42); border-left:2px solid var(--gold-5);
  padding:8px 12px 8px 10px;
}
.cl-row{
  display:grid; grid-template-columns:12px 1fr 34px; align-items:center; gap:7px;
  font:500 11.5px/1.4 var(--font-body); color:var(--dim); letter-spacing:.4px;
}
.cl-tick{
  width:9px; height:9px; border:1px solid var(--gold-4); border-radius:2px;
  background:#0a1219;
}
.cl-pct{ text-align:right; font-weight:600; color:var(--gold-2); font-variant-numeric:tabular-nums; }
.cl-row.done{ color:var(--green); }
.cl-row.done .cl-tick{ background:var(--green); border-color:var(--green); box-shadow:0 0 8px rgba(74,222,128,.7); }
.cl-row.done .cl-pct{ color:var(--green); }

/* ==========================================================================
   FOCUS — what the jet is pointed at
   ========================================================================== */
.focus{
  position:absolute; left:50%; top:calc(50% + 40px); transform:translateX(-50%);
  width:190px; text-align:center; opacity:0; transition:opacity .16s;
}
.focus.on{ opacity:1; }
.f-name{
  font:700 10.5px/1 var(--font-body); letter-spacing:2.6px; color:var(--gold-1);
  text-shadow:0 2px 4px #000;
}
.f-track{
  margin-top:6px; height:4px; background:rgba(4,12,20,.75);
  border:1px solid rgba(120,90,40,.55); overflow:hidden;
}
.f-track > div{
  height:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--water),#EAFBFF);
  transition:transform .12s linear;
}

/* ==========================================================================
   GAUGES — water and SH, bottom left
   ========================================================================== */
.gauges{
  position:absolute; left:24px; bottom:26px; display:flex; gap:12px; align-items:flex-end;
}
.gauge{ width:38px; text-align:center; }
.g-label{ font:700 8px/1 var(--font-body); letter-spacing:2px; color:var(--dimmer); margin-bottom:5px; }
.g-track{
  position:relative; height:104px; background:#0a1219;
  border:1px solid var(--gold-5); overflow:hidden;
}
.g-fill{
  position:absolute; inset:0; transform:scaleY(1); transform-origin:bottom center;
  transition:transform .12s linear;
}
.g-num{
  margin-top:5px; font:700 13px/1 var(--font-body); color:var(--gold-1);
  font-variant-numeric:tabular-nums; text-shadow:0 2px 3px #000;
}
.gauge.low .g-num{ color:#FFB347; }
.gauge.low{ animation:gWarn 1s ease-in-out infinite; }
@keyframes gWarn{ 50%{ filter:drop-shadow(0 0 12px rgba(255,179,71,.6)); } }

/* ==========================================================================
   TOOLS — bottom right
   ========================================================================== */
.tools{
  position:absolute; right:24px; bottom:26px;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.tool{
  --tc:#C8AA6E;
  display:flex; align-items:center; gap:8px;
  padding:4px 10px 4px 5px; min-width:172px;
  background:rgba(1,10,19,.55); border:1px solid transparent;
  opacity:.5; transition:opacity .14s, border-color .14s, background .14s;
}
.tool.on{
  opacity:1; border-color:var(--tc); background:rgba(10,26,40,.8);
  box-shadow:0 0 14px color-mix(in srgb, var(--tc) 30%, transparent);
}
.tl-key{
  width:20px; height:20px; display:grid; place-items:center;
  border:1px solid var(--gold-5); background:#0a1219;
  font:700 11px/1 var(--font-body); color:var(--gold-2);
}
.tool.on .tl-key{ background:var(--tc); color:#06101a; border-color:var(--tc); }
.tl-name{ font:600 11.5px/1 var(--font-body); letter-spacing:.7px; color:var(--gold-1); }
.tool-desc{
  position:absolute; right:24px; bottom:calc(26px + 178px);
  max-width:300px; text-align:right;
  font:400 12px/1.5 var(--font-body); color:var(--dim);
  text-shadow:0 2px 4px #000; opacity:0; transition:opacity .3s;
}
.tool-desc.on{ opacity:1; }

/* ==========================================================================
   BANNERS, WARNINGS, REFILL
   ========================================================================== */
.banners{
  position:absolute; left:50%; top:16%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.banner{ text-align:center; animation:bIn .4s cubic-bezier(.2,1.3,.4,1); }
.banner.out{ animation:bOut .55s ease-in forwards; }
.bn-t{
  font:700 34px/1 var(--font-display); letter-spacing:6px;
  background:linear-gradient(180deg,#FFF6DC,#F0E6D2 34%,#C8AA6E 70%,#785A28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 6px #000);
}
.bn-s{ margin-top:6px; font:500 12px/1 var(--font-body); color:var(--dim); letter-spacing:2.2px; 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:calc(50% - 96px); transform:translateX(-50%);
  padding:6px 16px; background:rgba(1,10,19,.82); border:1px solid var(--gold-4);
  font:700 11px/1 var(--font-body); letter-spacing:2.2px; color:#FFB347;
  opacity:0; transition:opacity .22s; white-space:nowrap;
}
.warn.on{ opacity:1; }

.refill{
  position:absolute; left:50%; bottom:15%; transform:translateX(-50%);
  padding:7px 18px; background:rgba(1,10,19,.82); border:1px solid var(--water);
  font:700 11px/1 var(--font-body); letter-spacing:3px; color:var(--water);
  opacity:0; transition:opacity .22s;
  box-shadow:0 0 18px rgba(92,200,255,.3);
}
.refill.on{ opacity:1; animation:rPulse 1.1s ease-in-out infinite; }
@keyframes rPulse{ 50%{ box-shadow:0 0 30px rgba(92,200,255,.7); } }

/* ==========================================================================
   PAUSE + END
   ========================================================================== */
.pause{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(2,7,12,.7); backdrop-filter:blur(3px);
}
.pause.on{ display:flex; }
.p-t{ font:700 40px/1 var(--font-display); letter-spacing:8px; color:var(--gold-1); text-align:center; }
.p-s{ 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:rgba(2,7,12,.88); pointer-events:auto; z-index:40;
}
.endscreen.on{ display:flex; animation:fadeIn .6s ease-out; }
@keyframes fadeIn{ from{ opacity:0; } }
.e-inner{
  min-width:430px; padding:34px 44px; text-align:center;
  background:linear-gradient(180deg,rgba(10,20,30,.95),rgba(1,8,14,.97));
  border:1px solid var(--gold-4);
  box-shadow:0 0 50px rgba(0,0,0,.85), inset 0 0 40px rgba(120,90,40,.08);
}
.e-title{
  font:700 50px/1 var(--font-display); letter-spacing:8px;
  background:linear-gradient(180deg,#EAFBFF,#5CC8FF 55%,#1F6E96);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 8px rgba(92,200,255,.45));
}
.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:11px 24px; cursor:pointer; text-decoration:none;
  background:linear-gradient(180deg,#1E3448,#0A151F);
  border:1px solid var(--gold-3); color:var(--gold-1);
  font:700 11px/1 var(--font-body); letter-spacing:2.6px;
  transition:box-shadow .2s, background .2s, color .2s;
}
.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:grid; place-items:center;
  background:var(--ink); transition:opacity .6s ease;
}
#splash.gone{ opacity:0; pointer-events:none; }
.sp-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 24% 18%, rgba(92,200,255,.16), transparent 58%),
    radial-gradient(ellipse at 78% 82%, rgba(251,146,69,.14), transparent 60%),
    linear-gradient(180deg,#061019,#03080e 70%);
}
.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;
  background:linear-gradient(180deg,#FFD9AE,#FB9245 55%,#8A4414);
  -webkit-background-clip:text; background-clip:text;
}
.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:20px; padding:15px 42px; cursor:not-allowed; opacity:.45;
  background:linear-gradient(180deg,#2B2113,#0B1620);
  border:1px solid var(--gold-4); color:var(--gold-1);
  font:700 13px/1 var(--font-body); letter-spacing:4px;
  transition:opacity .3s, box-shadow .25s, background .25s, border-color .25s;
}
#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; text-decoration:none;
  font:500 11px/1 var(--font-body); letter-spacing:2.4px; color:var(--dimmer);
  transition:color .2s;
}
.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; }

/* Thumbs need the corners, so the job sheet shrinks and moves inboard. */
body.m .jobbar{ width:min(300px,44vw); padding:5px 12px 6px; }
body.m .job-label{ font-size:7.5px; letter-spacing:2.4px; }
body.m .job-track{ height:6px; margin-top:4px; }
body.m .job-pct{ font-size:12px; margin-top:3px; }
body.m .checklist{
  left:calc(10px + env(safe-area-inset-left,0px)); top:44px;
  padding:5px 8px 5px 7px; gap:1px;
}
body.m .cl-row{ grid-template-columns:9px 1fr 28px; gap:5px; font-size:9px; }
body.m .cl-tick{ width:7px; height:7px; }
body.m .tools, body.m .tool-desc{ display:none; }
body.m .gauges{
  left:calc(10px + env(safe-area-inset-left,0px));
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  gap:8px;
}
body.m .gauge{ width:26px; }
body.m .g-label{ font-size:6.5px; letter-spacing:1.4px; margin-bottom:3px; }
body.m .g-track{ height:58px; }
body.m .g-num{ font-size:10px; margin-top:3px; }
body.m .focus{ top:calc(50% + 28px); width:150px; }
body.m .f-name{ font-size:9px; letter-spacing:1.8px; }
body.m .bn-t{ font-size:22px; letter-spacing:3px; }
body.m .bn-s{ font-size:9px; }
body.m .banners{ top:12%; }
body.m .warn, body.m .refill{ font-size:9.5px; padding:5px 12px; }
body.m .refill{ bottom:26%; }
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-t{ 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);
}

/* Tool 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; }
}