/* Liquid Rush (templates/liquidrush.html, static/liquidrush/*.js). The stage
   keeps the arena's shape (16:9, or 3:5 on a phone held upright) within the
   window, so a run needs no scrolling; the menus and the HUD sit over it. */
.lr-page{padding:var(--s4) 0 var(--s6);background:radial-gradient(1100px 600px at 70% -10%,rgba(40,170,255,.10),transparent 60%),var(--bg);}
.lr-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin:var(--s2) 0 var(--s3);}
.lr-head h1{font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0;
  background:linear-gradient(90deg,#1B9BD8,#2FD3E8);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lr-head .lede{margin:0;}

.lr-stage{position:relative;margin:0 auto;width:min(100%,calc((100svh - 150px) * 16 / 9));aspect-ratio:16/9;min-height:240px;
  border-radius:18px;overflow:hidden;background:#040C1D;color:#E6F6FF;
  box-shadow:0 30px 70px -24px rgba(4,12,29,.8),0 0 0 1px rgba(110,200,255,.16),0 0 70px -20px rgba(40,170,255,.35);
  font-family:Manrope,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none;}
.lr-stage.portrait{aspect-ratio:3/5;width:min(100%,calc((100svh - 120px) * 3 / 5));}
.lr-canvas{position:absolute;inset:0;margin:auto;display:block;outline:none;touch-action:none;cursor:crosshair;}
.lr-canvas:focus-visible{box-shadow:inset 0 0 0 2px rgba(110,220,255,.6);}

/* Screens over the canvas, fading in. */
.lr-screen{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:10px;
  padding:22px;text-align:center;overflow-y:auto;animation:lrIn .28s ease both;}
.lr-screen[hidden]{display:none;}
@keyframes lrIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.lr-title{background:linear-gradient(180deg,rgba(4,12,29,.15),rgba(4,12,29,.72) 60%);}
.lr-panel{background:rgba(4,12,29,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.lr-logo{margin:0;font-weight:800;font-size:clamp(34px,7vw,64px);letter-spacing:.05em;line-height:1;color:#fff;
  text-shadow:0 0 28px rgba(80,210,255,.55);}
.lr-logo span{margin-left:.25em;background:linear-gradient(90deg,#7DF3FF,#2B8BFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lr-tag{margin:0 0 4px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9CC4E4;}
.lr-modes{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);}
.lr-modes button,.lr-toggles button{font:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;padding:8px 16px;background:transparent;color:#BFD8EE;cursor:pointer;}
.lr-modes button[aria-pressed="true"]{background:linear-gradient(90deg,#7DF3FF,#2B8BFF);color:#04142A;}
.lr-mode-about{margin:0;max-width:420px;min-height:2.9em;font-size:13px;line-height:1.45;color:#A8C3DC;}
.lr-play{font:inherit;font-size:16px;font-weight:800;letter-spacing:.06em;border:0;border-radius:14px;padding:13px 40px;cursor:pointer;
  color:#04142A;background:linear-gradient(90deg,#7DF3FF,#3AA2FF);box-shadow:0 10px 30px -8px rgba(60,170,255,.7);transition:transform .12s ease;}
.lr-play:hover,.lr-play:focus-visible{transform:translateY(-1px);outline:2px solid #fff;outline-offset:3px;}
.lr-ghost{font:inherit;font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 16px;background:transparent;color:#DCEFFF;cursor:pointer;}
.lr-ghost:hover,.lr-ghost:focus-visible{background:rgba(255,255,255,.08);outline:none;}
.lr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px;}
.lr-bestline{margin:0;font-size:13px;color:#93AFCB;}
.lr-bestline strong{color:#fff;font-variant-numeric:tabular-nums;margin-left:3px;}
.lr-panel-title{margin:0 0 4px;font-size:clamp(22px,3vw,30px);font-weight:800;color:#fff;}
.lr-fine{margin:0;max-width:440px;font-size:12.5px;line-height:1.5;color:#93AFCB;}
.lr-sub{margin:6px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7FA3C4;}
.lr-steps{margin:0;padding:0;list-style:none;counter-reset:lrs;display:grid;gap:8px;max-width:560px;text-align:left;}
.lr-steps li{counter-increment:lrs;position:relative;padding-left:32px;font-size:13.5px;line-height:1.5;color:#C9DDF0;}
.lr-steps li::before{content:counter(lrs);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#04142A;background:linear-gradient(135deg,#7DF3FF,#3AA2FF);}
.lr-steps b{color:#fff;}
.lr-stage kbd,.lr-below kbd{display:inline-block;min-width:20px;padding:0 5px;border-radius:5px;border:1px solid rgba(160,200,240,.35);border-bottom-width:2px;
  font:700 11px/1.6 ui-monospace,Menlo,Consolas,monospace;text-align:center;}
.lr-below kbd{border-color:var(--border-strong,var(--border));background:var(--surface);}

/* Settings and progress. */
.lr-field{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#DCEFFF;}
.lr-field input[type=range]{width:180px;accent-color:#5CC8FF;}
.lr-field select{font:inherit;font-size:13px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#0B1D36;color:#E6F6FF;}
.lr-toggles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.lr-toggles button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);}
.lr-toggles button[aria-pressed="true"]{border-color:rgba(125,243,255,.6);color:#fff;}
.lr-stats{margin:0;display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:8px;max-width:480px;width:100%;}
.lr-stats div{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);}
.lr-stats dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7FA3C4;}
.lr-stats dd{margin:2px 0 0;font-size:18px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
.lr-stats-row{grid-template-columns:repeat(4,minmax(70px,1fr));}
.lr-colours{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:560px;}
.lr-colour{font:inherit;display:grid;justify-items:center;gap:2px;width:86px;padding:8px 4px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#DCEFFF;font-size:12px;font-weight:700;}
.lr-colour small{font-size:10px;font-weight:600;color:#86A6C6;line-height:1.25;}
.lr-colour[aria-pressed="true"]{border-color:#7DF3FF;box-shadow:0 0 0 1px #7DF3FF inset;}
.lr-colour:disabled{opacity:.5;cursor:not-allowed;}
.lr-swatch{width:26px;height:26px;border-radius:50%;box-shadow:0 0 12px rgba(120,220,255,.35);}
.lr-achievements{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;max-width:560px;width:100%;text-align:left;}
.lr-achievements li{font-size:12px;line-height:1.35;color:#7F98B2;}
.lr-achievements li b{display:block;font-size:12.5px;color:#9CB4CC;}
.lr-achievements li.got b{color:#9CFFB0;}

/* The upgrade cards. */
.lr-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.lr-card{font:inherit;display:grid;gap:6px;justify-items:center;width:190px;padding:16px 14px;border-radius:16px;cursor:pointer;text-align:center;
  border:1px solid rgba(125,243,255,.25);background:linear-gradient(180deg,rgba(40,120,200,.25),rgba(10,30,60,.6));color:#DCEFFF;
  transition:transform .12s ease,border-color .12s ease;}
.lr-card:hover,.lr-card:focus-visible{transform:translateY(-3px);border-color:#7DF3FF;outline:none;}
.lr-card b{font-size:16px;color:#fff;}
.lr-card span{font-size:12.5px;line-height:1.45;color:#B9D3EA;}
.lr-card small{font-size:11px;color:#7FD8FF;letter-spacing:.06em;text-transform:uppercase;}

/* Game over. */
.lr-mode-line{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7FA3C4;}
.lr-final{margin:0;font-size:clamp(38px,6vw,58px);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(80,210,255,.5);}
.lr-newbest{margin:0;font-weight:800;color:#FFE27A;letter-spacing:.06em;}
.lr-mission-results,.lr-earned{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:13px;color:#A8C3DC;}
.lr-mission-results li.done{color:#9CFFB0;}
.lr-earned li{color:#FFE27A;}

/* The HUD. */
.lr-hud{position:absolute;inset:0;z-index:2;pointer-events:none;}
.lr-hud[hidden]{display:none;}
.lr-hud-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:10px 14px;
  background:linear-gradient(180deg,rgba(4,12,29,.55),transparent);}
.lr-score span{display:block;font-size:clamp(20px,2.6vw,28px);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1;}
.lr-score small{font-size:11px;color:#8FB0CF;}
.lr-score small b{color:#DCEFFF;}
.lr-time{font-size:clamp(24px,3.4vw,38px);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 18px rgba(80,210,255,.5);}
.lr-time.low{color:#FF8A96;text-shadow:0 0 18px rgba(255,60,80,.6);animation:lrPulse 1s ease-in-out infinite;}
@keyframes lrPulse{50%{transform:scale(1.08);}}
.lr-hud-right{display:flex;align-items:center;gap:6px;pointer-events:auto;}
.lr-chip{font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:#CFE6FA;font-variant-numeric:tabular-nums;}
.lr-combo.hot{background:linear-gradient(90deg,#FFE27A,#FF9F5A);color:#2A1500;}
.lr-icon{font:inherit;font-size:12px;width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(4,12,29,.5);color:#fff;cursor:pointer;}
.lr-missions{position:absolute;left:14px;top:62px;margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:11.5px;color:#A9C4DD;
  text-shadow:0 1px 2px rgba(0,0,0,.6);}
.lr-missions li.done{color:#9CFFB0;}
.lr-powers{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto;}
.lr-power{font:inherit;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;gap:0 6px;padding:6px 12px 6px 8px;
  border-radius:12px;border:1px solid rgba(125,243,255,.3);background:rgba(4,18,40,.7);color:#E6F6FF;font-size:12px;font-weight:800;cursor:pointer;touch-action:none;}
.lr-power-ico{grid-row:1 / 3;font-size:20px;width:26px;text-align:center;}
.lr-power kbd{display:none;}
.lr-power.empty{opacity:.45;}
.lr-power.active{border-color:#FFD66E;box-shadow:0 0 14px rgba(255,214,110,.5);}
.lr-pips{display:flex;gap:3px;}
.lr-pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);}
.lr-pips i.on{background:#7DF3FF;box-shadow:0 0 6px #7DF3FF;}
@media (hover:hover){.lr-power kbd{display:inline-block;grid-column:2;grid-row:1;justify-self:end;margin-left:6px;}}

/* Toasts. */
.lr-toasts{position:absolute;left:50%;top:58px;transform:translateX(-50%);z-index:4;display:grid;gap:6px;justify-items:center;pointer-events:none;width:max-content;max-width:90%;}
.lr-toast{padding:7px 14px;border-radius:999px;background:rgba(6,22,46,.92);border:1px solid rgba(125,243,255,.3);font-size:12.5px;font-weight:700;color:#E6F6FF;
  animation:lrIn .25s ease both;transition:opacity .4s ease;}
.lr-toast.out{opacity:0;}

/* Under the stage. */
.lr-below{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5);}
.lr-below h2{font-size:18px;margin:0 0 6px;}
.lr-below p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:var(--text-2);}

@media (max-width:820px){
  .lr-below{grid-template-columns:1fr;}
  .lr-stats-row{grid-template-columns:repeat(2,minmax(70px,1fr));}
  .lr-achievements{grid-template-columns:1fr;}
  .lr-missions{display:none;}
  .lr-stage:not(.portrait) .lr-power span:not(.lr-power-ico):not(.lr-pips){display:none;}
}
@media (prefers-reduced-motion: reduce){
  .lr-screen,.lr-toast{animation:none;}
  .lr-time.low{animation:none;}
}