* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05050a; color: white; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif; }
body { display: grid; place-items: center; }
#gameShell { width: min(100vw, 1400px); height: 100dvh; display: grid; grid-template-rows: auto 1fr auto auto; background: radial-gradient(circle at top, #1d1030, #07070c 55%, #020204); border: 1px solid rgba(255,255,255,.1); }
#topHud, #bottomHud { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: linear-gradient(180deg, rgba(10,10,18,.96), rgba(0,0,0,.82)); border-bottom: 1px solid rgba(0, 238, 255, .22); box-shadow: 0 0 24px rgba(0, 238, 255, .09); }
#bottomHud { border-top: 1px solid rgba(0, 238, 255, .22); border-bottom: 0; }
.hudBlock { min-width: 180px; }
.label { display: block; color: #ffdd40; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; }
strong { font-size: clamp(24px, 4vw, 50px); line-height: .9; text-shadow: 0 0 16px rgba(255,255,255,.35); }
.titleBlock { text-align: center; flex: 1; display: grid; place-items: center; }
.titleStack { display: grid; gap: 4px; justify-items: center; }
.brandPlate {
  padding: 3px 12px 4px;
  border: 2px solid rgba(255, 218, 95, .8);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8,8,12,.98), rgba(25,18,10,.96));
  color: #ffe186;
  font-size: clamp(11px, 1.25vw, 16px);
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 0 16px rgba(255, 211, 79, .18), inset 0 0 10px rgba(255,255,255,.04);
}
h1 {
  margin: 0;
  display: grid;
  gap: 0;
  line-height: .9;
  font-size: clamp(22px, 3.6vw, 54px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 0 #000,
    0 0 10px rgba(255,255,255,.18),
    0 0 18px rgba(0,217,255,.28),
    0 0 28px rgba(255,43,214,.24);
}
h1 span:first-child {
  color: #f6f8ff;
}
h1 span:last-child {
  color: #ffe186;
  text-shadow:
    0 1px 0 #000,
    0 0 10px rgba(255, 225, 134, .18),
    0 0 20px rgba(255, 184, 0, .22),
    0 0 30px rgba(255, 43, 214, .16);
}
#canvasWrap { position: relative; min-height: 0; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; image-rendering: auto; background: #080810; touch-action: none; }
#overlay { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 24px; background: radial-gradient(circle, rgba(18,12,35,.82), rgba(0,0,0,.88)); }
#overlay.show { display: grid; }
#overlay h2 { margin: 0 0 8px; font-size: clamp(38px, 7vw, 88px); text-transform: uppercase; line-height: .9; color: #fff8dd; text-shadow: 0 0 14px rgba(255,255,255,.18), 0 0 22px rgba(0,234,255,.25), 0 0 34px rgba(255,43,214,.2); }
#overlay .menuBrand { padding: 6px 16px 7px; border-radius: 999px; border: 2px solid rgba(255, 218, 95, .82); background: linear-gradient(180deg, rgba(7,7,10,.96), rgba(26,18,12,.94)); color: #ffe186; font-size: clamp(13px, 1.7vw, 20px); text-transform: uppercase; letter-spacing: 4px; box-shadow: 0 0 16px rgba(255, 211, 79, .18), inset 0 0 10px rgba(255,255,255,.04); }
#overlay p { max-width: 720px; font-family: system-ui, sans-serif; font-size: clamp(16px, 2vw, 22px); line-height: 1.45; color: #dfe8ff; }
button { border: 0; color: white; cursor: pointer; font-family: inherit; text-transform: uppercase; }
#startBtn { padding: 14px 32px; font-size: 26px; border-radius: 14px; background: linear-gradient(135deg, #0bf, #d0f); box-shadow: 0 0 24px rgba(0, 238, 255, .45); }
.hudActions { display:flex; align-items:center; gap:10px; }
.uiBtn { padding: 10px 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.2); font-size: 15px; box-shadow: 0 0 12px rgba(0,0,0,.2); }
.uiBtn:hover { filter: brightness(1.08); }
#overlay .panel { display:grid; gap:14px; justify-items:center; padding: 26px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(9,10,22,.86), rgba(0,0,0,.72)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 42px rgba(0,0,0,.55), inset 0 0 28px rgba(255,255,255,.04); }
#overlay .controlsHelp { font-size: clamp(14px, 1.6vw, 18px); color: #ffd861; }
#overlay .btnRow { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
#resumeBtn, #menuBtn, #restartBtn, #overlayStartBtn { padding: 14px 26px; min-width: 170px; font-size: 22px; border-radius: 14px; background: linear-gradient(135deg, #00eaff, #bb00ff); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.42); box-shadow: 0 0 24px rgba(0, 238, 255, .45), inset 0 0 14px rgba(255,255,255,.16); }
#resumeBtn { background: linear-gradient(135deg, #00f5ff, #13e86f); color: #061014; text-shadow: 0 1px 0 rgba(255,255,255,.45); box-shadow: 0 0 26px rgba(0,245,255,.55), 0 0 18px rgba(19,232,111,.28), inset 0 0 14px rgba(255,255,255,.32); }
#resumeBtn:hover, #menuBtn:hover, #restartBtn:hover, #overlayStartBtn:hover { filter: brightness(1.12); transform: translateY(-1px); }
#menuBtn.secondary { background: linear-gradient(135deg, #2d2d38, #555a6d); color: #fff; }

#timerBox { min-width: 90px; text-align: center; }
#timerBox strong { color: #00eaff; }
#characters { display: flex; gap: 8px; flex: 1; justify-content: center; }
.char { position: relative; min-width: 145px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.15); text-align: center; overflow: hidden; }
.char span { display: block; font-size: 20px; }
.char small { display: block; color: #9fb4ff; font-family: system-ui, sans-serif; font-weight: 800; font-size: 11px; }
.char b { display: block; color: #fff; font-size: 14px; margin-top: 4px; }
.char.selected { box-shadow: 0 0 18px var(--glow, #39ff14); border-color: var(--glow, #39ff14); }
.char[data-char="trav"] { --glow: #57ff22; }
.char[data-char="danm"] { --glow: #22c7ff; }
.char[data-char="dank"] { --glow: #ff8b1a; }
#specialBox { width: 260px; }
#specialName { display: block; color: #57ff22; font-size: 22px; text-transform: uppercase; text-shadow: 0 0 10px currentColor; }
.meter { height: 18px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.meter i { display: block; height: 100%; width: 0%; background: currentColor; color: #57ff22; box-shadow: 0 0 18px currentColor; transition: width .15s linear; }
#controls { display: none; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 8px; background: rgba(0,0,0,.92); }
#controls button { padding: 14px 8px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 15px; }
#specialBtn.ready { background: linear-gradient(135deg, #ffdd00, #ff4d00); box-shadow: 0 0 18px #ffdd00; color: #111; }
@media (max-width: 800px) {
  #gameShell { height: 100dvh; }
  .hudBlock { min-width: 92px; }
  #topHud { padding: 7px 8px; }
  .brandPlate { font-size: 10px; letter-spacing: 2px; padding: 3px 8px; }
  .uiBtn { padding: 8px 10px; font-size: 12px; }
  .hudActions { gap: 6px; }
  h1 { font-size: 20px; gap: 1px; }
  strong { font-size: 25px; }
  #bottomHud { padding: 6px; gap: 6px; }
  #characters { gap: 5px; }
  .char { min-width: 0; flex: 1; padding: 7px 6px; }
  .char span { font-size: 14px; }
  .char small { display: none; }
  .char b { font-size: 11px; }
  #specialBox { width: 130px; }
  #specialName { font-size: 14px; }
  #controls { display: grid; }
}

#controls button:active { transform: translateY(1px) scale(0.99); filter: brightness(1.08); }

@media (max-width: 800px) { #resumeBtn, #menuBtn, #restartBtn, #overlayStartBtn { min-width: 135px; font-size: 18px; padding: 12px 18px; } }

.titleStack { width: 100%; display: grid; justify-items: center; }
.titleArt { display:block; width:100%; height:auto; object-fit:contain; filter: drop-shadow(0 0 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,0,214,.16)) drop-shadow(0 0 24px rgba(0,234,255,.14)); }
.hudTitleArt { width: clamp(270px, 36vw, 700px); max-width: 100%; }
.heroTitleArt { width: min(92vw, 1040px); max-width: 100%; }
#overlay { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 24px; background: radial-gradient(circle, rgba(18,12,35,.82), rgba(0,0,0,.88)); overflow:auto; }
#overlay .panel.panelHero { width: min(1120px, 96vw); padding-top: 20px; }
#overlay .panel.panelHero p { max-width: 820px; margin: 0 auto; }
#overlay .panel.panelHero .btnRow { margin-top: 2px; }
#topHud { align-items: center; }
.titleBlock { min-width: 0; }
#overlay h2 { margin: 0 0 8px; font-size: clamp(34px, 6vw, 74px); text-transform: uppercase; line-height: .92; color: #fff8dd; text-shadow: 0 0 14px rgba(255,255,255,.18), 0 0 22px rgba(0,234,255,.25), 0 0 34px rgba(255,43,214,.2); }
@media (max-width: 1024px) { .hudTitleArt { width: clamp(240px, 44vw, 520px); } }
@media (max-width: 800px) { .hudTitleArt { width: min(48vw, 260px); } .heroTitleArt { width: min(94vw, 760px); } #overlay .panel { padding: 18px 16px; } }

#gameShell {
  width: min(100vw, 1440px);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,234,255,.09), transparent 30%),
    radial-gradient(circle at 20% 12%, rgba(255,43,214,.10), transparent 28%),
    linear-gradient(180deg, #080812, #030306 72%);
  border: 1px solid rgba(255,255,255,.10);
}

#topHud {
  min-height: 78px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(150px, 1fr);
  gap: 14px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(8,10,20,.98), rgba(4,4,8,.92)),
    radial-gradient(circle at 50% 0%, rgba(255,216,90,.12), transparent 46%);
  border-bottom: 1px solid rgba(0,234,255,.24);
  box-shadow: 0 8px 28px rgba(0,0,0,.38), 0 0 26px rgba(0,234,255,.08);
}

.hudBlock {
  min-width: 0;
  padding: 8px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 18px rgba(255,255,255,.03);
}

.hudBlock.right { text-align: right; }

.label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: #ffd84f;
}

strong {
  font-size: clamp(26px, 3.2vw, 42px);
}

.compactTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 250px;
  padding: 8px 16px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,218,95,.18), rgba(0,234,255,.10) 48%, rgba(255,43,214,.16)),
    linear-gradient(180deg, rgba(7,7,12,.96), rgba(0,0,0,.78));
  border: 1px solid rgba(255,218,95,.34);
  box-shadow:
    0 0 18px rgba(255,43,214,.12),
    0 0 24px rgba(0,234,255,.10),
    inset 0 0 18px rgba(255,255,255,.05);
}

.miniBrand {
  width: 54px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff2a7, #ffbb24 48%, #111);
  color: #09090d;
  border: 2px solid rgba(0,0,0,.82);
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  box-shadow: 0 0 16px rgba(255,211,79,.22);
}

.miniTitle {
  display: grid;
  gap: 0;
  text-align: left;
  line-height: .88;
  text-transform: uppercase;
  white-space: nowrap;
}

.miniTitle span {
  font-size: clamp(15px, 1.8vw, 24px);
  color: #fff6d8;
  letter-spacing: 1.2px;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,218,95,.18);
}

.miniTitle strong {
  font-size: clamp(19px, 2.3vw, 32px);
  color: #24eaff;
  letter-spacing: 1.6px;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,234,255,.26), 0 0 18px rgba(255,43,214,.18);
}

.hudActions {
  justify-content: flex-end;
}

.uiBtn {
  min-height: 42px;
  border-radius: 14px;
}

.titleArt {
  pointer-events: none;
}

.heroTitleArt {
  width: min(92vw, 980px);
  max-height: min(42vh, 430px);
  object-fit: contain;
  margin-bottom: -8px;
}

#overlay .panel.panelHero {
  width: min(1060px, 96vw);
  padding: clamp(14px, 2vw, 24px);
  gap: 10px;
}

#overlay .panel.pausePanel,
#overlay .panel.resultPanel {
  width: min(620px, 92vw);
  gap: 12px;
}

.pauseLogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,218,95,.16), rgba(0,234,255,.10), rgba(255,43,214,.12));
  border: 1px solid rgba(255,218,95,.32);
  box-shadow: 0 0 18px rgba(0,234,255,.10), inset 0 0 16px rgba(255,255,255,.04);
}

.pauseLogo span {
  width: 42px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff2a7, #ffbb24);
  color: #050509;
  font-size: 16px;
  border: 2px solid rgba(0,0,0,.75);
}

.pauseLogo b {
  font-size: clamp(16px, 2vw, 22px);
  color: #fff7d8;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,218,95,.16);
}

#resumeBtn {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  #topHud {
    min-height: 68px;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 8px;
  }

  .compactTitle {
    min-width: 170px;
    padding: 7px 10px;
    gap: 8px;
  }

  .miniBrand {
    width: 42px;
    height: 34px;
    font-size: 15px;
    border-radius: 11px;
  }

  .miniTitle strong {
    font-size: 17px;
  }

  .hudBlock {
    padding: 7px 9px;
  }

  .hudActions .hudBlock {
    display: none;
  }

  #quitBtn {
    padding: 8px 10px;
  }

  .heroTitleArt {
    width: min(94vw, 780px);
    max-height: 36vh;
  }
}

@media (max-width: 560px) {
  #topHud {
    grid-template-columns: 1fr auto 56px;
  }

  .compactTitle {
    min-width: 132px;
    padding: 6px 8px;
  }

  .miniBrand {
    display: none;
  }

  .miniTitle {
    text-align: center;
  }

  .miniTitle span {
    font-size: 11px;
  }

  .miniTitle strong {
    font-size: 15px;
  }

  .label {
    font-size: 9px;
    letter-spacing: 1.4px;
  }

  strong {
    font-size: 22px;
  }
}

#topHud {
  grid-template-columns: minmax(120px, 1fr) auto minmax(150px, 1fr);
}

.compactTitle {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  min-width: 310px;
  padding: 8px 18px 8px 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18,18,28,.97), rgba(6,6,12,.94)),
    linear-gradient(135deg, rgba(255,214,86,.10), rgba(0,234,255,.08), rgba(255,43,214,.08));
  border: 1px solid rgba(255,214,86,.30);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5) inset,
    0 10px 24px rgba(0,0,0,.34),
    0 0 18px rgba(255,214,86,.08),
    0 0 22px rgba(0,234,255,.10);
  overflow: hidden;
}

.compactTitle::before,
.compactTitle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 72px;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  opacity: .9;
  background: linear-gradient(90deg, rgba(255,214,86,.95), rgba(255,214,86,.35) 50%, transparent 100%);
}
.compactTitle::before {
  left: -34px;
}
.compactTitle::after {
  right: -34px;
  transform: translateY(-50%) scaleX(-1);
}

.miniBrand {
  position: relative;
  width: 72px;
  height: 50px;
  display: grid;
  place-items: center;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  background:
    linear-gradient(135deg, #fff6cf 0%, #ffd95d 35%, #d79a12 65%, #241600 100%);
  border: 2px solid rgba(0,0,0,.86);
  box-shadow:
    0 0 0 2px rgba(255,231,159,.18) inset,
    0 0 18px rgba(255,214,86,.22),
    0 4px 10px rgba(0,0,0,.32);
}
.miniBrand::before {
  content: '';
  position: absolute;
  inset: 4px 7px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  border: 2px solid rgba(0,0,0,.85);
  opacity: .95;
}
.miniBrand span {
  position: relative;
  z-index: 1;
  color: #0a0a0d;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}

.miniTitle {
  display: grid;
  gap: 1px;
  align-items: center;
  text-align: left;
  line-height: .92;
  text-transform: uppercase;
  white-space: nowrap;
}
.miniTitle small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #ffd868;
  opacity: .96;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(255,216,104,.16);
}
.miniTitle span {
  font-size: clamp(14px, 1.65vw, 21px);
  font-weight: 950;
  letter-spacing: 1.2px;
  color: #f6f8ff;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,255,255,.08);
}
.miniTitle strong {
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 1000;
  letter-spacing: 1.6px;
  background: linear-gradient(180deg, #7cf2ff 0%, #d1fbff 28%, #3dd8ff 66%, #0ba2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(0,234,255,.18));
}

@media (max-width: 900px) {
  .compactTitle {
    min-width: 250px;
    padding: 7px 12px 7px 8px;
    gap: 9px;
    border-radius: 16px;
  }
  .compactTitle::before,
  .compactTitle::after {
    width: 42px;
  }
  .miniBrand {
    width: 58px;
    height: 42px;
  }
  .miniBrand span {
    font-size: 18px;
  }
  .miniTitle small {
    font-size: 8px;
    letter-spacing: 1.9px;
  }
  .miniTitle span {
    font-size: 13px;
  }
  .miniTitle strong {
    font-size: 18px;
  }
}

@media (max-width: 560px) {
  .compactTitle {
    min-width: 168px;
    padding: 6px 10px;
    grid-template-columns: auto 1fr;
    gap: 8px;
  }
  .compactTitle::before,
  .compactTitle::after {
    display: none;
  }
  .miniBrand {
    width: 42px;
    height: 34px;
  }
  .miniBrand span {
    font-size: 14px;
  }
  .miniTitle small {
    display: none;
  }
  .miniTitle span {
    font-size: 10px;
  }
  .miniTitle strong {
    font-size: 14px;
  }
}

.titleSpacer {
  display: grid;
  place-items: center;
  min-width: 120px;
}
.hudAccent {
  width: clamp(84px, 14vw, 160px);
  height: 12px;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(90deg, rgba(255,216,79,.12), rgba(0,234,255,.28), rgba(255,43,214,.12));
  box-shadow: 0 0 12px rgba(0,234,255,.10), inset 0 0 8px rgba(255,255,255,.06);
}
.hudAccent::before,
.hudAccent::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #fff1ad, #ffcc30);
  box-shadow: 0 0 12px rgba(255,216,79,.25);
}
.hudAccent::before { left: -18px; }
.hudAccent::after { right: -18px; }

.pausePanel {
  width: min(520px, 90vw) !important;
}
.pausePanel h2 {
  margin-top: 4px;
}

#topHud .compactTitle,
#topHud .miniBrand,
#topHud .miniTitle {
  display: none !important;
}

@media (max-width: 560px) {
  .titleSpacer {
    min-width: 72px;
  }
  .hudAccent {
    width: 58px;
    height: 10px;
  }
  .hudAccent::before,
  .hudAccent::after {
    width: 10px;
    height: 10px;
    left: -14px;
    right: -14px;
  }
}

#topHud {
  display: grid;
  grid-template-columns: minmax(132px, 180px) minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 10px 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,234,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(10,10,18,.97), rgba(4,4,9,.92));
  border-bottom: 1px solid rgba(0, 238, 255, .20);
  box-shadow: 0 10px 26px rgba(0, 238, 255, .08);
}

#topHud > .hudBlock,
#topHud > .hudActions {
  position: relative;
  z-index: 1;
}

.hudBlock {
  min-width: 0;
  min-height: 54px;
  padding: 8px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 16px rgba(255,255,255,.025);
}

.hudBlock strong {
  line-height: 1;
}

.headerStage {
  min-width: 0;
  display: grid;
  place-items: center;
}

.stagePanel {
  width: min(100%, 520px);
  min-height: 54px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18,20,34,.96), rgba(7,8,14,.92)),
    linear-gradient(90deg, rgba(255,212,78,.10), rgba(0,234,255,.08), rgba(255,43,214,.08));
  border: 1px solid rgba(255,216,96,.20);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.03),
    0 0 20px rgba(0,234,255,.08),
    0 8px 18px rgba(0,0,0,.28);
}

.stagePanel::before {
  content: '';
  position: absolute;
}

.stageLights {
  display: flex;
  gap: 7px;
  align-items: center;
}

.stageLights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe690, #ffb52e);
  box-shadow: 0 0 12px rgba(255,214,80,.35);
}
.stageLights i:nth-child(2) {
  background: linear-gradient(180deg, #8bf9ff, #05d1ff);
  box-shadow: 0 0 12px rgba(0,234,255,.32);
}
.stageLights i:nth-child(3) {
  background: linear-gradient(180deg, #ff9ef1, #ff34d7);
  box-shadow: 0 0 12px rgba(255,43,214,.30);
}

.stageInfo {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: .95;
  text-transform: uppercase;
}
.stageInfo small {
  color: #ffd760;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.2px;
}
.stageInfo strong {
  color: #f7fbff;
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 1000;
  letter-spacing: 1.2px;
  text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(0,234,255,.12);
}

.stagePulse {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 24px;
}
.stagePulse span {
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a0 0%, #00eaff 58%, #ff35d8 100%);
  box-shadow: 0 0 10px rgba(0,234,255,.16);
  transform-origin: bottom center;
  animation: stagePulseBeat 1.15s ease-in-out infinite;
}
.stagePulse span:nth-child(1) { height: 10px; animation-delay: 0s; }
.stagePulse span:nth-child(2) { height: 18px; animation-delay: .1s; }
.stagePulse span:nth-child(3) { height: 24px; animation-delay: .2s; }
.stagePulse span:nth-child(4) { height: 15px; animation-delay: .3s; }
.stagePulse span:nth-child(5) { height: 11px; animation-delay: .4s; }

@keyframes stagePulseBeat {
  0%,100% { transform: scaleY(.78); opacity: .82; }
  50% { transform: scaleY(1.08); opacity: 1; }
}

.hudActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 900px) {
  #topHud {
    grid-template-columns: minmax(90px, 1fr) minmax(180px, 1fr) auto;
    gap: 10px;
    min-height: 68px;
    padding: 8px 10px;
  }

  .hudBlock {
    min-height: 48px;
    padding: 7px 10px;
  }

  .stagePanel {
    min-height: 48px;
    padding: 7px 10px;
    gap: 10px;
  }

  .stageLights i {
    width: 10px;
    height: 10px;
  }

  .stageInfo small {
    font-size: 8px;
    letter-spacing: 1.7px;
  }

  .stageInfo strong {
    font-size: 14px;
  }

  .stagePulse {
    height: 18px;
  }
  .stagePulse span {
    width: 4px;
  }
}

@media (max-width: 560px) {
  #topHud {
    grid-template-columns: minmax(82px, 1fr) minmax(120px, 1fr) auto;
    gap: 8px;
  }

  .stagePanel {
    grid-template-columns: auto 1fr;
    width: 100%;
    padding: 7px 9px;
  }

  .stagePulse {
    display: none;
  }

  .stageInfo small {
    font-size: 7px;
    letter-spacing: 1.4px;
  }

  .stageInfo strong {
    font-size: 12px;
  }
}

#topHud {
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 74px;
  padding: 10px 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,234,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(10,10,18,.98), rgba(4,4,9,.94));
  border-bottom: 1px solid rgba(0,238,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 20px rgba(0,234,255,.08);
}

#topHud::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(220px, 32vw);
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,214,76,0), rgba(255,214,76,.9) 20%, rgba(0,234,255,.9) 50%, rgba(255,43,214,.9) 80%, rgba(255,43,214,0));
  opacity: .8;
}

#topHud > .hudBlock {
  width: fit-content;
  min-width: 160px;
  min-height: 54px;
  padding: 9px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 18px rgba(255,255,255,.03);
}

#topHud > .hudBlock strong {
  display: block;
  margin-top: 1px;
  line-height: 1;
  font-size: clamp(26px, 3vw, 40px);
}

#topHud > .hudBlock .label {
  display: block;
  margin-bottom: 2px;
}

.hudActions .hudBlock {
  min-width: 160px;
  min-height: 54px;
  padding: 9px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 18px rgba(255,255,255,.03);
}

#quitBtn {
  min-width: 88px;
  height: 54px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .5px;
}

.headerStage,
.stagePanel,
.stageLights,
.stageInfo,
.stagePulse {
  display: none !important;
}

@media (max-width: 900px) {
  #topHud {
    grid-template-columns: minmax(96px, 1fr) auto !important;
    min-height: 66px;
    padding: 8px 10px !important;
    gap: 10px !important;
  }

  #topHud > .hudBlock,
  .hudActions .hudBlock {
    min-width: 108px;
    min-height: 48px;
    padding: 7px 10px;
  }

  #topHud > .hudBlock strong,
  .hudActions .hudBlock strong {
    font-size: 26px;
  }

  #quitBtn {
    min-width: 74px;
    height: 48px;
    padding: 8px 10px;
  }
}

@media (max-width: 560px) {
  #topHud {
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    min-height: 60px;
    padding: 8px !important;
  }

  #topHud::after {
    width: 110px;
  }

  #topHud > .hudBlock,
  .hudActions .hudBlock {
    min-width: 90px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 14px;
  }

  #topHud > .hudBlock strong,
  .hudActions .hudBlock strong {
    font-size: 22px;
  }

  .hudActions {
    gap: 6px;
  }

  #quitBtn {
    min-width: 60px;
    height: 44px;
    border-radius: 14px;
    padding: 6px 8px;
  }
}

#topHud {
  grid-template-columns: minmax(140px, 1fr) auto auto !important;
}

.hudTimerBox {
  justify-self: center;
  display: grid;
  place-items: center;
  min-width: 118px;
  min-height: 58px;
  padding: 8px 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,221,101,.18), transparent 52%),
    linear-gradient(180deg, rgba(18,20,30,.98), rgba(6,8,14,.94));
  border: 1px solid rgba(255,214,76,.32);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.03),
    0 0 18px rgba(255,214,76,.12),
    0 8px 16px rgba(0,0,0,.28);
}

.hudTimerBox .label {
  color: #ffd960;
  margin-bottom: 2px;
}

.hudTimerBox strong {
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: .95;
  color: #fff8e2;
  text-shadow: 0 0 10px rgba(255,214,76,.18);
}

#bottomHud {
  justify-content: center;
  gap: 16px;
}

#characters {
  flex: 1 1 auto;
}

#specialBox {
  min-width: 240px;
}

@media (max-width: 900px) {
  #topHud {
    grid-template-columns: minmax(94px, 1fr) auto auto !important;
    gap: 10px !important;
  }
  .hudTimerBox {
    min-width: 92px;
    min-height: 50px;
    padding: 7px 10px;
    border-radius: 16px;
  }
  .hudTimerBox strong {
    font-size: 30px;
  }
  #specialBox {
    min-width: 190px;
  }
}

@media (max-width: 560px) {
  #topHud {
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
  }
  .hudTimerBox {
    min-width: 74px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 14px;
  }
  .hudTimerBox .label {
    font-size: 9px;
    letter-spacing: 1.4px;
  }
  .hudTimerBox strong {
    font-size: 24px;
  }
  .hudActions .hudBlock {
    min-width: 86px;
  }
}

#topHud {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) auto minmax(260px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 82px;
  padding: 12px 16px !important;
  position: relative;
  background:
    radial-gradient(circle at 50% -20%, rgba(0,234,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(12,14,24,.98), rgba(5,7,12,.95));
  border-bottom: 1px solid rgba(90, 231, 255, .18);
  box-shadow: 0 8px 26px rgba(0,0,0,.32), inset 0 -1px 0 rgba(255,255,255,.03);
}

#topHud::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(360px, 34vw);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,214,76,0), rgba(255,214,76,.92) 20%, rgba(0,234,255,.9) 50%, rgba(255,43,214,.82) 80%, rgba(255,43,214,0));
  opacity: .9;
}

.hudZone {
  min-width: 0;
  display: flex;
  align-items: center;
}

.hudCard {
  min-width: 148px;
  min-height: 58px;
  display: grid;
  align-content: center;
  padding: 10px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 20px rgba(255,255,255,.03), 0 10px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
}

.hudCard .label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  letter-spacing: 2.2px;
}

.hudCard strong {
  display: block;
  line-height: 1;
  font-size: clamp(28px, 3vw, 42px);
  color: #f7fbff;
}

.scoreCard strong {
  color: #fff7dc;
  text-shadow: 0 0 10px rgba(255,214,76,.16);
}

.comboCard strong {
  color: #d8f8ff;
  text-shadow: 0 0 12px rgba(0,234,255,.16);
}

.hudTimerBox {
  min-width: 132px;
  min-height: 66px;
  display: grid;
  place-items: center;
  padding: 8px 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,216,96,.20), transparent 56%),
    linear-gradient(180deg, rgba(22,18,10,.98), rgba(10,12,18,.95));
  border: 1px solid rgba(255,214,76,.34);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.04),
    0 0 22px rgba(255,214,76,.12),
    0 10px 20px rgba(0,0,0,.28);
}

.hudTimerBox .label {
  color: #ffd960;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 3px;
}

.hudTimerBox strong {
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: .92;
  color: #fff9e8;
  text-shadow: 0 0 12px rgba(255,214,76,.20);
}

.hudActions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.controlBtn {
  min-width: 84px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 18px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.pauseBtn {
  background: linear-gradient(180deg, #31dfff, #009fe8);
  box-shadow: 0 8px 18px rgba(0, 186, 255, .22), inset 0 1px 0 rgba(255,255,255,.24);
}

.menuBtn {
  background: linear-gradient(180deg, #ffd95c, #ffad2f);
  color: #14110b;
  box-shadow: 0 8px 18px rgba(255, 177, 42, .22), inset 0 1px 0 rgba(255,255,255,.28);
}

.pauseBtn:hover, .menuBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

@media (max-width: 980px) {
  #topHud {
    grid-template-columns: minmax(112px, 1fr) auto minmax(220px, 1fr) !important;
    gap: 10px !important;
    min-height: 72px;
    padding: 10px 12px !important;
  }

  .hudCard {
    min-width: 112px;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 16px;
  }

  .hudCard strong {
    font-size: 28px;
  }

  .hudTimerBox {
    min-width: 104px;
    min-height: 58px;
    padding: 7px 14px;
    border-radius: 18px;
  }

  .hudTimerBox strong {
    font-size: 34px;
  }

  .controlBtn {
    min-width: 72px;
    min-height: 52px;
    border-radius: 16px;
    padding: 0 12px;
  }
}

@media (max-width: 640px) {
  #topHud {
    grid-template-columns: minmax(88px, 1fr) auto minmax(154px, 1fr) !important;
    gap: 8px !important;
    min-height: 64px;
    padding: 8px !important;
  }

  #topHud::before {
    width: 160px;
  }

  .hudCard {
    min-width: 88px;
    min-height: 46px;
    padding: 7px 10px;
    border-radius: 14px;
  }

  .hudCard .label,
  .hudTimerBox .label {
    font-size: 8px;
    letter-spacing: 1.5px;
  }

  .hudCard strong {
    font-size: 22px;
  }

  .hudTimerBox {
    min-width: 84px;
    min-height: 50px;
    padding: 6px 10px;
    border-radius: 16px;
  }

  .hudTimerBox strong {
    font-size: 28px;
  }

  .hudActions {
    gap: 6px;
  }

  .controlBtn {
    min-width: 58px;
    min-height: 46px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 11px;
  }
}

#topHud.hudHidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
}
#topHud {
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

#topHud {
  grid-template-columns: minmax(190px, 1fr) auto minmax(260px, 1fr) !important;
}
.hudZoneLeft { justify-content: flex-start; }
.hudZoneCenter { justify-content: center; }
.hudZoneRight { justify-content: flex-end; }
.hudActionsLeft,
.hudStatsGroup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hudActionsLeft .controlBtn {
  min-width: 92px;
}
.hudStatsGroup .hudCard {
  min-width: 148px;
}
.hudStatsGroup .comboCard {
  min-width: 132px;
}
.hudTimerBox {
  min-width: 140px;
}

.introPanel {
  width: min(1080px, 96vw);
  padding-bottom: 26px;
}
.introLead {
  max-width: 760px;
  margin: 0 auto 10px;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff7d6;
  text-shadow: 0 0 10px rgba(255,214,76,.10);
}
.introGrid {
  width: min(920px, 100%);
  margin: 8px auto 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}
.introCard {
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 16px rgba(255,255,255,.02);
}
.introCard h3 {
  margin: 0 0 10px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #ffd75f;
}
.introCard p {
  margin: 8px 0;
  font-size: 16px;
  line-height: 1.45;
}
.bestScoreLine {
  margin-top: 8px;
  color: #ffd861;
  font-size: 18px;
}
.bestScoreLine strong {
  font-size: inherit;
}

@media (max-width: 900px) {
  #topHud {
    grid-template-columns: minmax(156px, 1fr) auto minmax(216px, 1fr) !important;
  }
  .hudActionsLeft,
  .hudStatsGroup { gap: 8px; }
  .hudActionsLeft .controlBtn { min-width: 76px; }
  .hudStatsGroup .hudCard { min-width: 110px; }
  .introGrid {
    grid-template-columns: 1fr;
    width: min(700px, 100%);
  }
}
@media (max-width: 640px) {
  #topHud {
    grid-template-columns: minmax(128px, 1fr) auto minmax(136px, 1fr) !important;
  }
  .hudActionsLeft .controlBtn {
    min-width: 58px;
    padding: 0 10px;
  }
  .hudStatsGroup { gap: 6px; }
  .hudStatsGroup .hudCard {
    min-width: 80px;
    padding: 7px 8px;
  }
  .introLead {
    font-size: 17px;
    margin-bottom: 8px;
  }
  .introCard { padding: 14px 14px 12px; }
  .introCard p { font-size: 14px; }
  .bestScoreLine { font-size: 16px; }
}

#overlay {
  overflow: hidden;
  padding: 18px;
}
.compactIntroPanel {
  width: min(980px, 94vw);
  max-height: min(88vh, 720px);
  padding: 16px 18px 18px;
  gap: 10px;
  overflow: hidden;
}
.introTitleArt {
  width: min(88vw, 780px);
  max-height: min(26vh, 240px);
  margin-bottom: -2px;
}
.compactLead {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.15;
}
.introMiniGrid {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  margin: 0 auto;
}
.introMiniCard {
  text-align: left;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 14px rgba(255,255,255,.02);
}
.introMiniCard h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #ffd75f;
}
.introMiniCard ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}
.introMiniCard li {
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-size: 15px;
  line-height: 1.25;
}
.introMiniCard li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: #24eaff;
}
.controlRows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.controlRows span {
  display: grid;
  gap: 2px;
}
.controlRows b {
  font-size: 12px;
  line-height: 1;
  color: #ffd75f;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.controlRows i {
  font-style: normal;
  font-size: 14px;
  line-height: 1.2;
  color: #f7fbff;
}
.bestScoreLine {
  margin: 0;
  font-size: 16px;
}
.introPanel .btnRow {
  margin-top: 0;
}
.introPanel .btnRow button,
#startBtn,
#overlayStartBtn {
  min-width: 200px;
}
@media (max-width: 900px) {
  .compactIntroPanel {
    width: min(92vw, 760px);
    padding: 14px 14px 16px;
    gap: 8px;
  }
  .introTitleArt {
    max-height: 20vh;
  }
  .introMiniGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  #overlay {
    padding: 12px;
  }
  .compactIntroPanel {
    width: min(96vw, 620px);
    max-height: min(90vh, 720px);
    padding: 12px;
  }
  .introTitleArt {
    max-height: 16vh;
    width: min(90vw, 520px);
  }
  .compactLead {
    font-size: 14px;
  }
  .introMiniCard {
    padding: 12px;
  }
  .introMiniCard h3 {
    font-size: 14px;
  }
  .introMiniCard li,
  .controlRows i {
    font-size: 12px;
  }
  .controlRows b {
    font-size: 10px;
  }
  .controlRows {
    gap: 7px 8px;
  }
  .bestScoreLine {
    font-size: 14px;
  }
  .introPanel .btnRow button,
  #startBtn,
  #overlayStartBtn {
    min-width: 170px;
  }
}

.originalStartPanel {
  width: min(980px, 94vw);
  max-height: none;
  padding: clamp(18px, 2.2vw, 28px);
  gap: 14px;
  overflow: visible;
}

.originalStartPanel .heroTitleArt,
.originalStartPanel.titleArt {
  width: min(92vw, 960px);
  max-height: min(42vh, 420px);
  object-fit: contain;
}

.originalStartPanel p {
  max-width: 720px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(16px, 1.8vw, 21px);
  line-height: 1.42;
  color: #dfe8ff;
}

.originalStartPanel .btnRow {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .originalStartPanel {
    width: min(96vw, 620px);
    padding: 14px;
    gap: 10px;
  }

  .originalStartPanel .heroTitleArt {
    max-height: 30vh;
  }

  .originalStartPanel p {
    font-size: 14px;
  }
}

.originalStartPanel .controlsHelp {
  max-width: 820px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(13px, 1.35vw, 17px);
  line-height: 1.35;
  color: #ffd861;
  text-shadow: 0 0 10px rgba(255,216,97,.16);
}

@media (max-width: 640px) {
  .originalStartPanel .controlsHelp {
    font-size: 12px;
    line-height: 1.3;
  }
}

.refinedStartPanel {
  width: min(1100px, 94vw);
  padding: clamp(18px, 2.2vw, 28px);
  gap: 14px;
}
.refinedStartPanel .heroTitleArt {
  width: min(92vw, 960px);
  max-height: min(46vh, 440px);
  object-fit: contain;
}
.refinedStartPanel .startInfoRow {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 14px;
  align-items: stretch;
  margin: 2px auto 0;
}
.refinedStartPanel .startInfoCard {
  text-align: left;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.024));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 14px rgba(255,255,255,.02);
}
.refinedStartPanel .startInfoLabel {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffd861;
}
.refinedStartPanel .startInfoCard p {
  margin: 0;
  max-width: none;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.35;
  color: #e8efff;
}
.refinedStartPanel .btnRow,
.refinedStartPanel > button,
.refinedStartPanel #startBtn {
  margin-top: 2px;
}
@media (max-width: 860px) {
  .refinedStartPanel .startInfoRow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .refinedStartPanel .heroTitleArt {
    max-height: min(34vh, 340px);
  }
}
@media (max-width: 640px) {
  .refinedStartPanel {
    width: min(96vw, 640px);
    gap: 10px;
    padding: 14px;
  }
  .refinedStartPanel .heroTitleArt {
    max-height: 26vh;
  }
  .refinedStartPanel .startInfoCard {
    padding: 12px;
    border-radius: 14px;
  }
  .refinedStartPanel .startInfoLabel {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .refinedStartPanel .startInfoCard p {
    font-size: 13px;
    line-height: 1.3;
  }
}

.hiddenDuringMenu {
  display: none !important;
}

.characterSelectPanel {
  width: min(920px, 94vw);
  padding: clamp(20px, 3vw, 34px);
  gap: 16px;
}

.characterSelectPanel h2 {
  margin-bottom: 0 !important;
  font-size: clamp(32px, 5vw, 64px) !important;
}

.selectLead {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(15px, 1.7vw, 20px);
  color: #dfe8ff;
}

.selectCards {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.selectCard {
  position: relative;
  min-height: 150px;
  display: grid;
  gap: 5px;
  align-content: center;
  justify-items: center;
  padding: 18px 12px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 0%, rgba(0,234,255,.10), transparent 55%);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  box-shadow: inset 0 0 18px rgba(255,255,255,.03), 0 12px 22px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.selectCard:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.selectCard.selected {
  border-color: rgba(255,216,90,.82);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.04),
    0 0 0 2px rgba(255,216,90,.18),
    0 0 24px rgba(255,216,90,.18),
    0 12px 22px rgba(0,0,0,.22);
}

.selectCard.selected::after {
  content: 'SELECTED';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd95c, #ffad2f);
  color: #120e07;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.selectName {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 1000;
  text-transform: uppercase;
  line-height: 1;
}

.selectCard small {
  color: #dfe8ff;
  font-size: 14px;
}

.selectCard b {
  color: #ffd861;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#playGigBtn, #backToStartBtn {
  padding: 14px 26px;
  min-width: 160px;
  font-size: 22px;
  border-radius: 14px;
}

@media (max-width: 760px) {
  .selectCards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .selectCard {
    min-height: 104px;
  }

  .characterSelectPanel {
    width: min(96vw, 620px);
    padding: 16px;
  }
}

#overlay {
  overflow: hidden !important;
  padding: clamp(14px, 2vw, 24px) !important;
}

#overlay.show {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-items: center !important;
}

#overlay .panel,
#overlay .panel.panelHero,
.characterSelectPanel,
.originalStartPanel,
.refinedStartPanel {
  margin: 0 auto !important;
}

#overlay .panel.panelHero,
.characterSelectPanel {
  max-height: min(88vh, 760px);
}

.refinedStartPanel {
  width: min(1080px, 94vw) !important;
  min-height: min(74vh, 680px);
  align-content: center;
  justify-items: center;
}

.refinedStartPanel .heroTitleArt {
  width: min(90vw, 930px) !important;
  max-height: min(42vh, 400px) !important;
}

.refinedStartPanel .startInfoRow {
  width: min(900px, 100%);
  margin: 0 auto;
}

.characterSelectPanel {
  width: min(980px, 94vw) !important;
  min-height: min(72vh, 620px);
  align-content: center;
  justify-items: center;
}

.characterSelectPanel .btnRow {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}

#playGigBtn,
#backToStartBtn {
  min-width: 190px;
  min-height: 62px;
  padding: 14px 28px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: 2px solid rgba(255,255,255,.42);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
  box-shadow: inset 0 0 14px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.24);
}

#playGigBtn {
  background: linear-gradient(135deg, #00eaff, #bb00ff);
  box-shadow: 0 0 24px rgba(0, 238, 255, .35), inset 0 0 14px rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.24);
}

#backToStartBtn {
  background: linear-gradient(135deg, #ffd95c, #ff922f);
  color: #15100a;
  text-shadow: none;
  box-shadow: 0 0 20px rgba(255, 177, 42, .28), inset 0 0 14px rgba(255,255,255,.20), 0 10px 24px rgba(0,0,0,.24);
}

#playGigBtn:hover,
#backToStartBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

@media (max-width: 860px) {
  .refinedStartPanel {
    min-height: auto;
  }

  .characterSelectPanel {
    min-height: auto;
    width: min(96vw, 720px) !important;
  }
}

@media (max-width: 640px) {
  #overlay {
    overflow: auto !important;
    padding: 12px !important;
  }

  .refinedStartPanel,
  .characterSelectPanel {
    min-height: auto;
    width: min(96vw, 620px) !important;
  }

  .characterSelectPanel .btnRow {
    gap: 10px;
    flex-wrap: wrap;
  }

  #playGigBtn,
  #backToStartBtn {
    min-width: 150px;
    min-height: 54px;
    font-size: 18px;
    padding: 12px 20px;
    border-radius: 14px;
  }
}

.resultPanel h2 { margin-top: 4px; }

#bottomHud {
  justify-content: center !important;
  gap: 0 !important;
}

#characters {
  display: none !important;
}

#specialBox {
  width: min(360px, 86vw) !important;
  min-width: 0 !important;
  margin: 0 auto;
}

#specialName {
  text-align: center;
}

#canvasWrap {
  box-shadow: inset 0 0 34px rgba(0, 238, 255, .04);
}

.reorderedStartPanel {
  width: min(1080px, 94vw) !important;
  min-height: min(74vh, 680px);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 14px;
}
.reorderedStartPanel .heroTitleArt {
  width: min(88vw, 900px) !important;
  max-height: min(34vh, 330px) !important;
  object-fit: contain;
}
.reorderedStartPanel .startInfoStack {
  width: min(920px, 100%);
}
.reorderedStartPanel .startInfoCard {
  text-align: left;
  padding: 14px 16px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 0 18px rgba(255,255,255,.02), 0 12px 24px rgba(0,0,0,.12);
}
.reorderedStartPanel .goalsPanel {
  max-width: 820px;
  margin: 0 auto;
}
.reorderedStartPanel .controlsPanel {
  max-width: 920px;
  margin: 0 auto;
}
.reorderedStartPanel .startInfoLabel {
  display: block;
  margin-bottom: 8px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ffd861;
}
.reorderedStartPanel .goalList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.reorderedStartPanel .goalList li {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.35;
  color: #edf3ff;
}
.reorderedStartPanel .goalList li::before {
  content: '•';
  position: absolute;
  left: 2px;
  top: 0;
  color: #24eaff;
  font-size: 18px;
  line-height: 1;
}
.reorderedStartPanel .controlGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
}
.reorderedStartPanel .controlGrid span {
  display: grid;
  gap: 2px;
  justify-items: start;
}
.reorderedStartPanel .controlGrid b {
  font-size: 12px;
  line-height: 1;
  color: #ffd861;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.reorderedStartPanel .controlGrid i {
  font-style: normal;
  font-size: clamp(13px, 1.18vw, 16px);
  line-height: 1.25;
  color: #e9f1ff;
}
.reorderedStartPanel .btnRow {
  margin-top: 4px;
}
.reorderedStartPanel #startBtn,
.reorderedStartPanel #overlayStartBtn,
.reorderedStartPanel .btnRow button {
  min-width: 240px;
}
@media (max-width: 980px) {
  .reorderedStartPanel .goalList,
  .reorderedStartPanel .controlGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .reorderedStartPanel {
    width: min(96vw, 640px) !important;
    gap: 10px;
    padding: 14px !important;
    min-height: auto;
  }
  .reorderedStartPanel .heroTitleArt {
    max-height: 24vh !important;
  }
  .reorderedStartPanel .startInfoCard {
    padding: 12px 12px 12px;
    border-radius: 14px;
  }
  .reorderedStartPanel .goalList,
  .reorderedStartPanel .controlGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .reorderedStartPanel .goalList li,
  .reorderedStartPanel .controlGrid i {
    font-size: 13px;
  }
  .reorderedStartPanel .controlGrid b {
    font-size: 11px;
  }
}

.reorderedStartPanel .goalsPanel,
.reorderedStartPanel .controlsPanel {
  max-width: 880px;
  margin: 0 auto;
}

.reorderedStartPanel .goalsPanel p,
.reorderedStartPanel .controlsPanel p {
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.35;
  color: #e8efff;
}

.reorderedStartPanel .controlsPanel p {
  color: #ffd861;
}

.reorderedStartPanel .goalList,
.reorderedStartPanel .controlGrid {
  display: none !important;
}

@media (max-width: 700px) {
  .reorderedStartPanel .goalsPanel p,
  .reorderedStartPanel .controlsPanel p {
    font-size: 13px;
    line-height: 1.3;
  }
}

.expertStartPanel {
  width: min(1040px, 94vw) !important;
  min-height: min(74vh, 680px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(18px, 2.4vw, 34px) !important;
  overflow: hidden;
}

.expertLogo {
  width: min(90vw, 940px) !important;
  max-height: min(48vh, 430px) !important;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(0,234,255,.12))
    drop-shadow(0 0 18px rgba(255,43,214,.10));
}

.expertMenuActions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.primaryStartBtn,
.secondaryMenuBtn,
#howToStartBtn,
#howToBackBtn {
  min-width: 210px;
  min-height: 58px;
  padding: 14px 28px;
  border-radius: 18px;
  font-size: 22px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .6px;
  border: 2px solid rgba(255,255,255,.38);
  transition: transform .14s ease, filter .14s ease;
}

.primaryStartBtn {
  background: linear-gradient(135deg, #00eaff, #bb00ff) !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  box-shadow:
    0 0 24px rgba(0, 238, 255, .38),
    inset 0 0 16px rgba(255,255,255,.16),
    0 12px 24px rgba(0,0,0,.26);
}

.secondaryMenuBtn {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  color: #ffe08a !important;
  border-color: rgba(255,216,90,.38) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.05),
    0 10px 22px rgba(0,0,0,.22);
}

.primaryStartBtn:hover,
.secondaryMenuBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.bestScoreBadge {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,216,90,.28);
  color: #ffd861;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bestScoreBadge strong {
  font-size: inherit;
  color: #fff7d6;
}

.howToPlayPanel {
  width: min(900px, 94vw);
  min-height: min(62vh, 540px);
  align-content: center;
  gap: 18px;
  padding: clamp(20px, 3vw, 34px) !important;
}

.howToPlayPanel h2 {
  margin: 0 !important;
  font-size: clamp(36px, 5.6vw, 72px) !important;
}

.howToGrid {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 14px;
}

.howCard {
  text-align: left;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 0 16px rgba(255,255,255,.025);
}

.howLabel {
  display: block;
  margin-bottom: 10px;
  color: #ffd861;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.howCard p {
  margin: 0;
  font-size: clamp(14px, 1.45vw, 17px);
  line-height: 1.45;
  color: #e8efff;
}

.howControls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.howControls span {
  display: grid;
  gap: 3px;
}

.howControls b {
  color: #ffd861;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.howControls i {
  color: #f3f7ff;
  font-size: 14px;
  line-height: 1.2;
  font-style: normal;
}

@media (max-width: 760px) {
  .expertStartPanel {
    min-height: auto;
    width: min(96vw, 640px) !important;
    padding: 14px !important;
  }

  .primaryStartBtn,
  .secondaryMenuBtn,
  #howToStartBtn,
  #howToBackBtn {
    min-width: 170px;
    min-height: 52px;
    font-size: 18px;
    border-radius: 15px;
  }

  .howToGrid {
    grid-template-columns: 1fr;
  }

  .howToPlayPanel {
    min-height: auto;
  }
}
.expertLogo {
  width: min(90vw, 940px) !important;
  max-height: min(48vh, 430px) !important;
  object-fit: contain !important;
}
.primaryStartBtn,
.secondaryMenuBtn,
#howToStartBtn,
#howToBackBtn {
  min-width: 210px !important;
  min-height: 58px !important;
  padding: 14px 28px !important;
  border-radius: 18px !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
}
.primaryStartBtn {
  background: linear-gradient(135deg, #00eaff, #bb00ff) !important;
  color: #fff !important;
}
.secondaryMenuBtn {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  color: #ffe08a !important;
  border-color: rgba(255,216,90,.38) !important;
}
.howToPlayPanel {
  width: min(900px, 94vw) !important;
  min-height: min(62vh, 540px) !important;
  align-content: center !important;
  gap: 18px !important;
  padding: clamp(20px, 3vw, 34px) !important;
}
.howToGrid {
  width: min(820px, 100%) !important;
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 14px !important;
}
.howCard {
  text-align: left !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
}
.howLabel {
  display: block !important;
  margin-bottom: 10px !important;
  color: #ffd861 !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.howControls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 14px !important;
}
.howControls span { display: grid !important; gap: 3px !important; }
.howControls b { color: #ffd861 !important; font-size: 12px !important; text-transform: uppercase !important; }
.howControls i { color: #f3f7ff !important; font-size: 14px !important; font-style: normal !important; }
@media (max-width: 760px) {
  .howToGrid { grid-template-columns: 1fr !important; }
  .expertStartPanel, .howToPlayPanel { min-height: auto !important; }
}

@media (max-width: 860px) {
}

@media (max-width: 640px) {
}

.expertStartPanel {
  width: min(1040px, 94vw) !important;
  min-height: min(74vh, 680px) !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(14px, 2vw, 22px) !important;
  padding: clamp(18px, 2.4vw, 34px) !important;
  overflow: hidden !important;
}
.expertStartPanel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,216,90,.12), transparent 34%),
    radial-gradient(circle at 18% 40%, rgba(255,43,214,.10), transparent 30%),
    radial-gradient(circle at 82% 42%, rgba(0,234,255,.10), transparent 30%);
  opacity: .9;
}
.expertStartPanel > * { position: relative; z-index: 1; }
.expertLogo {
  width: min(90vw, 940px) !important;
  max-height: min(48vh, 430px) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(0,234,255,.12)) drop-shadow(0 0 18px rgba(255,43,214,.10));
}
.expertMenuActions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.primaryStartBtn,
.secondaryMenuBtn,
#howToStartBtn,
#howToBackBtn {
  min-width: 210px !important;
  min-height: 58px !important;
  padding: 14px 28px !important;
  border-radius: 18px !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  border: 2px solid rgba(255,255,255,.38) !important;
  transition: transform .14s ease, filter .14s ease !important;
}
.primaryStartBtn {
  background: linear-gradient(135deg, #00eaff, #bb00ff) !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.5) !important;
  box-shadow: 0 0 24px rgba(0, 238, 255, .38), inset 0 0 16px rgba(255,255,255,.16), 0 12px 24px rgba(0,0,0,.26) !important;
}
.secondaryMenuBtn {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  color: #ffe08a !important;
  border-color: rgba(255,216,90,.38) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.45) !important;
  box-shadow: inset 0 0 14px rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.22) !important;
}
.primaryStartBtn:hover,
.secondaryMenuBtn:hover { transform: translateY(-2px) !important; filter: brightness(1.08) !important; }
.bestScoreBadge {
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,216,90,.28) !important;
  color: #ffd861 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.bestScoreBadge strong { font-size: inherit !important; color: #fff7d6 !important; }

.improvedHowToPanel {
  width: min(960px, 94vw) !important;
  min-height: auto !important;
  padding: clamp(22px, 3vw, 36px) !important;
  display: grid !important;
  gap: 16px !important;
  justify-items: stretch !important;
}
.improvedHowToPanel h2 {
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1 !important;
}
.improvedHowToPanel .howIntro {
  margin: -2px 0 4px 0 !important;
  text-align: center !important;
  color: #dfe9ff !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.35 !important;
}
.improvedHowToPanel .howSection {
  padding: 18px 18px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(8,12,24,.88), rgba(18,24,40,.86)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 0 18px rgba(255,255,255,.03), 0 12px 26px rgba(0,0,0,.22) !important;
}
.improvedHowToPanel .howLabel {
  display: block !important;
  margin-bottom: 12px !important;
  text-align: center !important;
  color: #ffd861 !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
}
.improvedHowToPanel .howBulletList {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.improvedHowToPanel .howBulletItem {
  display: grid !important;
  gap: 3px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.improvedHowToPanel .howBulletItem b {
  color: #ffffff !important;
  font-size: clamp(15px, 1.45vw, 18px) !important;
  line-height: 1.2 !important;
}
.improvedHowToPanel .howBulletItem i {
  color: #dbe6ff !important;
  font-style: normal !important;
  font-size: clamp(14px, 1.35vw, 17px) !important;
  line-height: 1.4 !important;
}
.improvedHowToPanel .howControlRows {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 14px !important;
}
.improvedHowToPanel .controlRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.improvedHowToPanel .controlRow b {
  color: #ffffff !important;
  font-size: clamp(14px, 1.35vw, 17px) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.improvedHowToPanel .keyCaps {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}
.improvedHowToPanel .keyCaps em {
  color: #a9b8d8 !important;
  font-style: normal !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
}
.improvedHowToPanel kbd {
  min-width: 30px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #f6f8ff, #d8e2fb) !important;
  color: #13203c !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.95) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: center !important;
}
.improvedHowToPanel .howToActions { margin-top: 2px !important; }

@media (max-width: 860px) {
  .improvedHowToPanel .howControlRows { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .expertStartPanel { min-height: auto !important; width: min(96vw, 640px) !important; padding: 14px !important; }
  .expertLogo { max-height: 34vh !important; }
  .primaryStartBtn, .secondaryMenuBtn, #howToStartBtn, #howToBackBtn { min-width: 170px !important; min-height: 52px !important; font-size: 18px !important; border-radius: 15px !important; }
}
@media (max-width: 640px) {
  .improvedHowToPanel { width: min(96vw, 640px) !important; gap: 12px !important; padding: 16px !important; }
  .improvedHowToPanel .howSection { padding: 14px 14px 13px !important; border-radius: 16px !important; }
  .improvedHowToPanel .controlRow { align-items: flex-start !important; flex-direction: column !important; }
  .improvedHowToPanel .keyCaps { justify-content: flex-start !important; }
}

.improvedHowToPanel .howIntro {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: -2px auto 4px auto !important;
  text-align: center !important;
  justify-self: center !important;
}

.improvedHowToPanel .howGoalSection {
  background:
    linear-gradient(180deg, rgba(14,18,34,.96), rgba(8,12,24,.94)) !important;
  border-color: rgba(255,216,90,.22) !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem {
  background: rgba(0,0,0,.24) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem b {
  color: #fff7d6 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.55) !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem i {
  color: #f1f6ff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.5) !important;
  font-weight: 600 !important;
}

.hudActionsLeft {
  flex-direction: row !important;
}

.hudStatsGroup {
  flex-direction: row !important;
}

.hudStatsGroup .comboCard {
  order: 1 !important;
}

.hudStatsGroup .scoreCard {
  order: 2 !important;
}

.hudActionsLeft .menuBtn {
  order: 1 !important;
}

.hudActionsLeft .pauseBtn {
  order: 2 !important;
}

.improvedHowToPanel .howGoalSection {
  background: #070b16 !important;
  border: 2px solid rgba(255,216,90,.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 14px 30px rgba(0,0,0,.38) !important;
}

.improvedHowToPanel .howGoalSection .howLabel {
  color: #ffe27a !important;
  text-shadow: 0 2px 0 #000 !important;
  font-size: 16px !important;
}

.improvedHowToPanel .howGoalSection .howBulletList {
  gap: 12px !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem {
  background: #111827 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.28) !important;
  padding: 14px 16px !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem b {
  display: block !important;
  color: #ffffff !important;
  font-size: clamp(18px, 1.75vw, 22px) !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
  letter-spacing: .2px !important;
  text-shadow: 0 2px 0 #000 !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem i {
  display: block !important;
  margin-top: 4px !important;
  color: #ffffff !important;
  font-size: clamp(16px, 1.55vw, 19px) !important;
  line-height: 1.42 !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 0 #000 !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .improvedHowToPanel .howGoalSection .howBulletItem {
    padding: 12px 13px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem b {
    font-size: 17px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem i {
    font-size: 15px !important;
  }
}

#overlay.show {
  align-content: center !important;
  place-items: center !important;
}

.improvedHowToPanel,
.howToPlayPanel {
  box-sizing: border-box !important;
  max-height: calc(100vh - 44px) !important;
  overflow-y: auto !important;
  align-content: start !important;
  margin: 0 auto !important;
  padding-top: clamp(18px, 2.2vw, 28px) !important;
  padding-bottom: clamp(18px, 2.2vw, 28px) !important;
}

.improvedHowToPanel h2,
.howToPlayPanel h2 {
  padding-top: 4px !important;
  margin-top: 0 !important;
  line-height: 1.08 !important;
}

@media (max-height: 760px) {
  .improvedHowToPanel,
  .howToPlayPanel {
    max-height: calc(100vh - 28px) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .improvedHowToPanel h2,
  .howToPlayPanel h2 {
    font-size: clamp(30px, 4.5vw, 48px) !important;
  }

  .improvedHowToPanel .howIntro {
    margin-bottom: 0 !important;
  }

  .improvedHowToPanel .howBulletItem {
    padding: 10px 12px !important;
  }

  .improvedHowToPanel .controlRow {
    padding: 9px 12px !important;
  }
}

@media (max-width: 640px) {
  #overlay {
    overflow-y: auto !important;
    align-items: start !important;
  }

  .improvedHowToPanel,
  .howToPlayPanel {
    max-height: none !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}

#overlay.show {
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
}

.improvedHowToPanel,
.howToPlayPanel {
  height: auto !important;
  min-height: min(78vh, 650px) !important;
  max-height: calc(100vh - 42px) !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr 1fr auto !important;
  align-content: center !important;
  justify-content: stretch !important;
  align-items: center !important;
  gap: clamp(12px, 1.7vh, 20px) !important;
  margin: auto !important;
}

.improvedHowToPanel .howIntro {
  align-self: center !important;
  margin: 0 auto !important;
}

.improvedHowToPanel .howSection {
  align-self: stretch !important;
}

.improvedHowToPanel .howGoalSection,
.improvedHowToPanel .howControlSection {
  display: grid !important;
  align-content: center !important;
}

.improvedHowToPanel .howToActions {
  align-self: center !important;
  margin-top: 0 !important;
}

@media (max-height: 760px) {
  .improvedHowToPanel,
  .howToPlayPanel {
    min-height: calc(100vh - 32px) !important;
    max-height: calc(100vh - 28px) !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    align-content: center !important;
  }
}

@media (max-width: 640px) {
  #overlay.show {
    place-items: center !important;
    align-content: center !important;
  }

  .improvedHowToPanel,
  .howToPlayPanel {
    min-height: auto !important;
    max-height: calc(100vh - 22px) !important;
    margin: auto !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-content: center !important;
  }
}

.improvedHowToPanel,
.howToPlayPanel {
  width: min(920px, 92vw) !important;
  min-height: auto !important;
  height: auto !important;
  max-height: calc(100vh - 72px) !important;
  margin: 36px auto !important;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(32px, 4vw, 46px) !important;
  grid-template-rows: auto auto auto auto auto !important;
  align-content: center !important;
  align-items: stretch !important;
  gap: clamp(14px, 1.7vh, 22px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.improvedHowToPanel h2,
.howToPlayPanel h2 {
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

.improvedHowToPanel .howIntro {
  margin: 0 auto 2px auto !important;
}

.improvedHowToPanel .howSection {
  padding: clamp(15px, 2vw, 20px) !important;
}

.improvedHowToPanel .howGoalSection {
  margin-top: 0 !important;
}

.improvedHowToPanel .howControlSection {
  margin-bottom: 2px !important;
}

.improvedHowToPanel .howToActions {
  padding-top: 6px !important;
  padding-bottom: 2px !important;
  margin-top: 2px !important;
}

.improvedHowToPanel .howToActions .primaryStartBtn,
.improvedHowToPanel .howToActions .secondaryMenuBtn {
  margin-bottom: 0 !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem {
  padding: 12px 14px !important;
}

.improvedHowToPanel .controlRow {
  padding: 10px 13px !important;
}

@media (max-height: 760px) {
  #overlay {
    overflow-y: auto !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  #overlay.show {
    place-items: center !important;
    align-content: center !important;
  }

  .improvedHowToPanel,
  .howToPlayPanel {
    max-height: calc(100vh - 36px) !important;
    margin: 18px auto !important;
    padding: 18px 18px 30px !important;
    gap: 10px !important;
  }

  .improvedHowToPanel h2,
  .howToPlayPanel h2 {
    font-size: clamp(30px, 4.4vw, 46px) !important;
  }

  .improvedHowToPanel .howIntro {
    font-size: 15px !important;
  }

  .improvedHowToPanel .howSection {
    padding: 12px 14px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem {
    padding: 10px 12px !important;
  }

  .improvedHowToPanel .controlRow {
    padding: 8px 11px !important;
  }

  .improvedHowToPanel .howToActions {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

@media (max-width: 640px) {
  #overlay {
    overflow-y: auto !important;
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }

  #overlay.show {
    place-items: start center !important;
    align-content: start !important;
  }

  .improvedHowToPanel,
  .howToPlayPanel {
    width: min(94vw, 620px) !important;
    max-height: none !important;
    margin: 12px auto 18px !important;
    padding: 16px 14px 28px !important;
    gap: 12px !important;
  }

  .improvedHowToPanel .howToActions {
    padding-bottom: 10px !important;
  }
}

#overlay,
#overlay.show {
  overflow: hidden !important;
}

.improvedHowToPanel,
.howToPlayPanel {
  width: min(900px, 92vw) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  padding: clamp(14px, 2.2vw, 24px) !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  align-content: center !important;
  align-items: stretch !important;
  gap: clamp(8px, 1.2vh, 13px) !important;
}

.improvedHowToPanel h2,
.howToPlayPanel h2 {
  font-size: clamp(30px, 4.2vw, 48px) !important;
  line-height: .98 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.improvedHowToPanel .howIntro {
  max-width: 620px !important;
  margin: 0 auto !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
  line-height: 1.22 !important;
}

.improvedHowToPanel .howSection {
  padding: clamp(10px, 1.4vw, 14px) !important;
  border-radius: 16px !important;
}

.improvedHowToPanel .howLabel {
  margin-bottom: 8px !important;
  font-size: 12px !important;
  letter-spacing: 1.4px !important;
}

.improvedHowToPanel .howBulletList {
  gap: 7px !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem {
  padding: 8px 11px !important;
  border-radius: 12px !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem b {
  font-size: clamp(15px, 1.35vw, 18px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem i {
  margin-top: 2px !important;
  font-size: clamp(13px, 1.18vw, 15px) !important;
  line-height: 1.24 !important;
  font-weight: 700 !important;
}

.improvedHowToPanel .howControlRows {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.improvedHowToPanel .controlRow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
  min-height: 58px !important;
}

.improvedHowToPanel .controlRow b {
  font-size: clamp(12px, 1.05vw, 14px) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: normal !important;
}

.improvedHowToPanel .keyCaps {
  justify-content: center !important;
  gap: 4px !important;
}

.improvedHowToPanel .keyCaps em {
  font-size: 10px !important;
  line-height: 1 !important;
}

.improvedHowToPanel kbd {
  min-width: 24px !important;
  padding: 4px 7px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
}

.improvedHowToPanel .howToActions {
  margin: 0 !important;
  padding: 2px 0 0 !important;
  gap: 10px !important;
}

.improvedHowToPanel .howToActions .primaryStartBtn,
.improvedHowToPanel .howToActions .secondaryMenuBtn,
.improvedHowToPanel #howToStartBtn,
.improvedHowToPanel #howToBackBtn {
  min-width: 165px !important;
  min-height: 48px !important;
  padding: 10px 20px !important;
  border-radius: 14px !important;
  font-size: 17px !important;
}

@media (max-height: 720px) {
  .improvedHowToPanel,
  .howToPlayPanel {
    width: min(880px, 92vw) !important;
    padding: 12px 14px !important;
    gap: 7px !important;
  }

  .improvedHowToPanel h2,
  .howToPlayPanel h2 {
    font-size: clamp(26px, 3.8vw, 40px) !important;
  }

  .improvedHowToPanel .howIntro {
    font-size: 13px !important;
    line-height: 1.16 !important;
  }

  .improvedHowToPanel .howSection {
    padding: 9px 11px !important;
  }

  .improvedHowToPanel .howLabel {
    margin-bottom: 6px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem {
    padding: 6px 9px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem b {
    font-size: 14px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem i {
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  .improvedHowToPanel .controlRow {
    min-height: 48px !important;
    padding: 6px 8px !important;
  }

  .improvedHowToPanel .howToActions .primaryStartBtn,
  .improvedHowToPanel .howToActions .secondaryMenuBtn,
  .improvedHowToPanel #howToStartBtn,
  .improvedHowToPanel #howToBackBtn {
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 8px 16px !important;
  }
}

@media (max-width: 640px) {
  #overlay,
  #overlay.show {
    overflow: hidden !important;
    place-items: center !important;
    align-content: center !important;
    padding: 8px !important;
  }

  .improvedHowToPanel,
  .howToPlayPanel {
    width: min(96vw, 620px) !important;
    margin: 0 auto !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  .improvedHowToPanel h2,
  .howToPlayPanel h2 {
    font-size: clamp(25px, 8vw, 34px) !important;
  }

  .improvedHowToPanel .howSection {
    padding: 8px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem {
    padding: 6px 8px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem b {
    font-size: 13px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem i {
    font-size: 11px !important;
    line-height: 1.14 !important;
  }

  .improvedHowToPanel .howControlRows {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .improvedHowToPanel .controlRow {
    min-height: 44px !important;
    padding: 6px !important;
  }

  .improvedHowToPanel kbd {
    min-width: 22px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  .improvedHowToPanel .howToActions {
    flex-wrap: nowrap !important;
  }

  .improvedHowToPanel #howToStartBtn,
  .improvedHowToPanel #howToBackBtn {
    min-width: 125px !important;
    min-height: 38px !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
  }
}

#bottomHud.gameplayOnly {
  display: none !important;
}

.hudZoneLeft {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.fightHudStack {
  width: clamp(230px, 24vw, 330px);
  display: grid;
  gap: 6px;
}

.fightHealthBox,
.fightSpecialBox {
  position: relative;
  padding: 7px 9px 8px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(9,12,20,.96), rgba(0,0,0,.82));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.035),
    0 8px 18px rgba(0,0,0,.24);
  overflow: hidden;
}

.fightHealthBox::before,
.fightSpecialBox::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent 45%, rgba(255,255,255,.04));
}

.fightBarTop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.fightBarTop span,
.fightBarTop strong {
  font-size: 11px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.65);
}

.fightHealthBox .fightBarTop span {
  color: #ffe16a;
}

.fightHealthBox .fightBarTop strong {
  color: #fff;
}

.fightSpecialBox .fightBarTop span {
  color: currentColor;
  text-shadow: 0 0 8px currentColor, 0 2px 0 rgba(0,0,0,.7);
}

.fightSpecialBox .fightBarTop strong {
  color: #dbe8ff;
  font-size: 10px;
}

.fightHealthMeter,
.fightSpecialMeter {
  position: relative;
  z-index: 1;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}

.fightHealthMeter i,
.fightSpecialMeter i {
  display: block;
  height: 100%;
  width: 0%;
  transition: width .18s linear, background .18s linear;
}

.fightHealthMeter i {
  width: 100%;
  background:
    linear-gradient(90deg, #1fff5f 0%, #b9ff25 56%, #ffd23d 100%);
  box-shadow: 0 0 16px rgba(75,255,90,.35);
}

.fightHealthMeter i.danger {
  background: linear-gradient(90deg, #ffcf35, #ff7a1f) !important;
  box-shadow: 0 0 16px rgba(255,150,40,.42);
}

.fightHealthMeter i.critical {
  background: linear-gradient(90deg, #ff2350, #ff812f) !important;
  box-shadow: 0 0 18px rgba(255,35,80,.6);
}

.fightSpecialMeter {
  height: 13px !important;
}

.fightSpecialMeter i {
  background: currentColor;
  color: inherit;
  box-shadow: 0 0 16px currentColor;
}

#topHud .hudActionsLeft {
  align-self: center;
}

#topHud .hudActionsLeft .controlBtn {
  min-width: 78px !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 13px !important;
  font-size: 15px !important;
}

@media (max-width: 980px) {
  .fightHudStack {
    width: clamp(210px, 30vw, 290px);
  }

  #topHud .hudActionsLeft {
    gap: 7px !important;
  }

  #topHud .hudActionsLeft .controlBtn {
    min-width: 68px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 760px) {
  #topHud {
    gap: 8px !important;
    padding: 8px !important;
  }

  .hudZoneLeft {
    gap: 7px !important;
  }

  .fightHudStack {
    width: 190px;
    gap: 5px;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 6px 7px;
    border-radius: 11px;
  }

  .fightBarTop span,
  .fightBarTop strong {
    font-size: 9px;
  }

  .fightHealthMeter {
    height: 13px;
  }

  .fightSpecialMeter {
    height: 10px !important;
  }

  #topHud .hudActionsLeft {
    display: grid !important;
    gap: 5px !important;
  }

  #topHud .hudActionsLeft .controlBtn {
    min-width: 58px !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}

.hudZoneLeft {
  align-items: flex-start !important;
}

.leftHudColumn {
  display: grid !important;
  gap: 10px !important;
  align-items: start !important;
}

#topHud .hudActionsLeft {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: start !important;
}

.fightHudStack {
  width: clamp(250px, 24vw, 340px) !important;
  display: grid !important;
  gap: 8px !important;
}

.fightHealthBox,
.fightSpecialBox {
  position: relative !important;
  padding: 9px 10px 10px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 20px rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.28) !important;
}

.fightHealthBox {
  background:
    linear-gradient(180deg, rgba(28, 10, 14, .95), rgba(8, 5, 8, .94)) !important;
  border-color: rgba(255,120,120,.22) !important;
}

.fightSpecialBox {
  background:
    linear-gradient(180deg, rgba(10, 20, 38, .95), rgba(6, 9, 18, .94)) !important;
  border-color: rgba(0,234,255,.24) !important;
}

.fightHealthBox::before,
.fightSpecialBox::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 35%, rgba(255,255,255,.03)) !important;
}

.fightBarTop {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

.fightBarTop span,
.fightBarTop strong {
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.65) !important;
}

.fightHealthBox .fightBarTop span {
  color: #ffd25f !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
}

.fightHealthBox .fightBarTop strong {
  color: #fff6da !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
}

.fightSpecialBox .fightBarTop span {
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: currentColor !important;
  text-shadow: 0 0 10px currentColor, 0 2px 0 rgba(0,0,0,.72) !important;
}

.fightSpecialBox .fightBarTop strong {
  color: #a8c8ff !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
}

.fightHealthMeter,
.fightSpecialMeter {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.fightHealthMeter {
  height: 18px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(255,255,255,.07)) !important;
}

.fightSpecialMeter {
  height: 14px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(255,255,255,.07)) !important;
}

.fightHealthMeter i,
.fightSpecialMeter i {
  position: relative !important;
  display: block !important;
  height: 100% !important;
  transition: width .16s linear !important;
}

.fightHealthMeter i::after,
.fightSpecialMeter i::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 52%) !important;
  pointer-events: none !important;
}

.fightHealthMeter i {
  background:
    linear-gradient(90deg, #24ff5d 0%, #99ff3a 42%, #ffe053 76%, #ff8f32 100%) !important;
  box-shadow: 0 0 16px rgba(95,255,95,.32) !important;
}

.fightHealthMeter i.danger {
  background: linear-gradient(90deg, #ffd74e, #ff9728 55%, #ff6420) !important;
  box-shadow: 0 0 16px rgba(255,170,60,.42) !important;
}

.fightHealthMeter i.critical {
  background: linear-gradient(90deg, #ff2959, #ff6d2a) !important;
  box-shadow: 0 0 18px rgba(255,60,90,.52) !important;
}

.fightSpecialMeter i {
  background:
    linear-gradient(90deg, currentColor 0%, rgba(255,255,255,.82) 100%) !important;
  box-shadow: 0 0 18px currentColor !important;
}

@media (max-width: 980px) {
  .fightHudStack {
    width: clamp(225px, 30vw, 300px) !important;
  }
}

@media (max-width: 760px) {
  .leftHudColumn {
    gap: 6px !important;
  }

  .fightHudStack {
    width: 205px !important;
    gap: 6px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 7px 8px 8px !important;
    border-radius: 12px !important;
  }

  .fightHealthMeter {
    height: 14px !important;
  }

  .fightSpecialMeter {
    height: 11px !important;
  }

  .fightHealthBox .fightBarTop span,
  .fightSpecialBox .fightBarTop span,
  .fightHealthBox .fightBarTop strong,
  .fightSpecialBox .fightBarTop strong {
    font-size: 10px !important;
  }
}

#combatHud {
  position: absolute;
  top: 86px;
  left: 18px;
  z-index: 18;
  pointer-events: none;
}

.detachedFightHudStack {
  width: clamp(250px, 24vw, 340px) !important;
  display: grid !important;
  gap: 8px !important;
}

#topHud .hudZoneLeft {
  align-items: center !important;
}

#topHud .hudActionsLeft {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#topHud .hudActionsLeft .controlBtn {
  min-width: 84px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

.detachedFightHudStack .fightHealthBox,
.detachedFightHudStack .fightSpecialBox {
  position: relative !important;
  padding: 9px 10px 10px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 20px rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.28) !important;
}

.detachedFightHudStack .fightHealthBox {
  background:
    linear-gradient(180deg, rgba(28, 10, 14, .95), rgba(8, 5, 8, .94)) !important;
  border-color: rgba(255,120,120,.22) !important;
}

.detachedFightHudStack .fightSpecialBox {
  background:
    linear-gradient(180deg, rgba(10, 20, 38, .95), rgba(6, 9, 18, .94)) !important;
  border-color: rgba(0,234,255,.24) !important;
}

.detachedFightHudStack .fightHealthBox::before,
.detachedFightHudStack .fightSpecialBox::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 35%, rgba(255,255,255,.03)) !important;
}

.detachedFightHudStack .fightBarTop {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

.detachedFightHudStack .fightBarTop span,
.detachedFightHudStack .fightBarTop strong {
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.65) !important;
}

.detachedFightHudStack .fightHealthBox .fightBarTop span {
  color: #ffd25f !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
}

.detachedFightHudStack .fightHealthBox .fightBarTop strong {
  color: #fff6da !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
}

.detachedFightHudStack .fightSpecialBox .fightBarTop span {
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: currentColor !important;
  text-shadow: 0 0 10px currentColor, 0 2px 0 rgba(0,0,0,.72) !important;
}

.detachedFightHudStack .fightSpecialBox .fightBarTop strong {
  color: #a8c8ff !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
}

.detachedFightHudStack .fightHealthMeter,
.detachedFightHudStack .fightSpecialMeter {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.detachedFightHudStack .fightHealthMeter {
  height: 18px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(255,255,255,.07)) !important;
}

.detachedFightHudStack .fightSpecialMeter {
  height: 14px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(255,255,255,.07)) !important;
}

.detachedFightHudStack .fightHealthMeter i,
.detachedFightHudStack .fightSpecialMeter i {
  position: relative !important;
  display: block !important;
  height: 100% !important;
  transition: width .16s linear !important;
}

.detachedFightHudStack .fightHealthMeter i::after,
.detachedFightHudStack .fightSpecialMeter i::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 52%) !important;
  pointer-events: none !important;
}

.detachedFightHudStack .fightHealthMeter i {
  background:
    linear-gradient(90deg, #24ff5d 0%, #99ff3a 42%, #ffe053 76%, #ff8f32 100%) !important;
  box-shadow: 0 0 16px rgba(95,255,95,.32) !important;
}

.detachedFightHudStack .fightHealthMeter i.danger {
  background: linear-gradient(90deg, #ffd74e, #ff9728 55%, #ff6420) !important;
  box-shadow: 0 0 16px rgba(255,170,60,.42) !important;
}

.detachedFightHudStack .fightHealthMeter i.critical {
  background: linear-gradient(90deg, #ff2959, #ff6d2a) !important;
  box-shadow: 0 0 18px rgba(255,60,90,.52) !important;
}

.detachedFightHudStack .fightSpecialMeter i {
  background:
    linear-gradient(90deg, currentColor 0%, rgba(255,255,255,.82) 100%) !important;
  box-shadow: 0 0 18px currentColor !important;
}

@media (max-width: 980px) {
  #combatHud {
    top: 82px;
    left: 14px;
  }
  #topHud .hudActionsLeft .controlBtn {
    min-width: 72px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 760px) {
  #combatHud {
    top: 70px;
    left: 10px;
  }
  .detachedFightHudStack {
    width: 205px !important;
    gap: 6px !important;
  }
  #topHud .hudActionsLeft {
    gap: 5px !important;
  }
  #topHud .hudActionsLeft .controlBtn {
    min-width: 62px !important;
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
  .detachedFightHudStack .fightHealthBox,
  .detachedFightHudStack .fightSpecialBox {
    padding: 7px 8px 8px !important;
    border-radius: 12px !important;
  }
  .detachedFightHudStack .fightHealthMeter {
    height: 14px !important;
  }
  .detachedFightHudStack .fightSpecialMeter {
    height: 11px !important;
  }
  .detachedFightHudStack .fightHealthBox .fightBarTop span,
  .detachedFightHudStack .fightSpecialBox .fightBarTop span,
  .detachedFightHudStack .fightHealthBox .fightBarTop strong,
  .detachedFightHudStack .fightSpecialBox .fightBarTop strong {
    font-size: 10px !important;
  }
}

#canvasWrap {
  position: relative !important;
}

#combatHud {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

.detachedFightHudStack {
  width: clamp(250px, 24vw, 340px) !important;
}

@media (max-width: 980px) {
  #combatHud {
    top: 12px !important;
    left: 12px !important;
  }

  .detachedFightHudStack {
    width: clamp(225px, 30vw, 300px) !important;
  }
}

@media (max-width: 760px) {
  #combatHud {
    top: 10px !important;
    left: 10px !important;
  }

  .detachedFightHudStack {
    width: 205px !important;
  }
}

#topHud .hudActionsLeft {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

#topHud .hudActionsLeft .controlBtn,
#pauseBtn,
#quitBtn {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  font-family: "Arial Black", "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 16px rgba(0,0,0,.22),
    0 0 0 1px rgba(0,0,0,.16) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.48) !important;
}

#quitBtn,
#topHud .hudActionsLeft .menuBtn {
  background:
    linear-gradient(180deg, rgba(255,197,79,.98), rgba(255,138,31,.95)) !important;
  color: #fff7df !important;
  border-color: rgba(255,220,145,.42) !important;
}

#pauseBtn,
#topHud .hudActionsLeft .pauseBtn {
  background:
    linear-gradient(180deg, rgba(62,229,255,.98), rgba(77,114,255,.95)) !important;
  color: #eefbff !important;
  border-color: rgba(164,237,255,.42) !important;
}

#topHud .hudActionsLeft .controlBtn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
}

#topHud .hudActionsLeft .controlBtn:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.28),
    0 4px 8px rgba(0,0,0,.22) !important;
}

@media (max-width: 980px) {
  #topHud .hudActionsLeft .controlBtn,
  #pauseBtn,
  #quitBtn {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 760px) {
  #topHud .hudActionsLeft {
    gap: 6px !important;
  }

  #topHud .hudActionsLeft .controlBtn,
  #pauseBtn,
  #quitBtn {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    letter-spacing: .5px !important;
  }
}

.improvedHowToPanel,
.improvedHowToPanel .howIntro,
.improvedHowToPanel .howLabel,
.improvedHowToPanel .howGoalSection .howBulletItem b,
.improvedHowToPanel .howGoalSection .howBulletItem i,
.improvedHowToPanel .controlRow b,
.improvedHowToPanel .keyCaps em,
.improvedHowToPanel kbd {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
}

.improvedHowToPanel .howIntro {
  font-size: clamp(14px, 1.2vw, 16px) !important;
  line-height: 1.28 !important;
  color: #f1f6ff !important;
  font-weight: 700 !important;
}

.improvedHowToPanel .howLabel {
  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: 1.35px !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem b {
  font-size: clamp(16px, 1.35vw, 18px) !important;
  line-height: 1.12 !important;
  font-weight: 1000 !important;
}

.improvedHowToPanel .howGoalSection .howBulletItem i {
  font-size: clamp(14px, 1.16vw, 16px) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: #f6fbff !important;
}

.improvedHowToPanel .controlRow b {
  font-size: clamp(12px, 1vw, 14px) !important;
  font-weight: 1000 !important;
}

.improvedHowToPanel .keyCaps em {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #c3d0ea !important;
}

.improvedHowToPanel kbd {
  font-size: 11px !important;
  font-weight: 900 !important;
}

@media (max-width: 640px) {
  .improvedHowToPanel .howIntro {
    font-size: 12px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem b {
    font-size: 14px !important;
  }

  .improvedHowToPanel .howGoalSection .howBulletItem i {
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  .improvedHowToPanel .controlRow b {
    font-size: 11px !important;
  }

  .improvedHowToPanel kbd {
    font-size: 10px !important;
  }
}

.healthWarning {
  min-height: 16px;
  margin-top: 4px;
  font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffdf77;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,80,80,.35), 0 2px 0 rgba(0,0,0,.75);
}

#healthBox.damaged {
  animation: healthDamageShake .22s linear 1;
}

#healthBox.lowHealth {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 20px rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,95,95,.25),
    0 0 16px rgba(255,80,80,.22) !important;
}

#healthBox.lowHealth .healthWarning {
  animation: lastChancePulse 0.9s ease-in-out infinite;
}

.comboCard.pulse {
  transform: scale(1.06);
  box-shadow: 0 0 16px rgba(255,228,100,.18), 0 8px 20px rgba(0,0,0,.22);
}

.comboCard.comboBreak {
  animation: comboBreakShake .28s linear 1;
  box-shadow: 0 0 14px rgba(255,90,120,.20), 0 8px 20px rgba(0,0,0,.22);
}

.expandedResultPanel {
  max-width: 720px !important;
}

.resultLead {
  line-height: 1.45;
}

.resultBreakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 20px;
}

.resultStat {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,28,44,.92), rgba(10,14,24,.94));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.18);
  text-align: left;
}

.resultStat span {
  display: block;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #9ec5ff;
  margin-bottom: 6px;
}

.resultStat b {
  display: block;
  font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.1;
  color: #fff;
}

@keyframes healthDamageShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

@keyframes comboBreakShake {
  0% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-3px) scale(1.02); }
  50% { transform: translateX(3px) scale(1.02); }
  75% { transform: translateX(-2px) scale(1.01); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes lastChancePulse {
  0%, 100% { opacity: 0.72; transform: scale(1); color: #ffd966; }
  50% { opacity: 1; transform: scale(1.03); color: #ff7a7a; }
}

@media (max-width: 760px) {
  .resultBreakdown {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .resultStat {
    padding: 10px 12px;
  }

  .resultStat b {
    font-size: 18px;
  }
}

.resultBreakdown,
.resultStat {
  display: none !important;
}

canvas {
  filter: saturate(1.05) contrast(1.02);
}

#combatHud {
  top: 10px !important;
  left: 12px !important;
}

.detachedFightHudStack {
  gap: 5px !important;
  width: clamp(236px, 23vw, 320px) !important;
}

.detachedFightHudStack .fightHealthBox,
.detachedFightHudStack .fightSpecialBox {
  padding: 6px 9px 7px !important;
  border-radius: 13px !important;
}

.detachedFightHudStack .fightBarTop {
  margin-bottom: 4px !important;
  gap: 8px !important;
}

.detachedFightHudStack .fightHealthBox .fightBarTop span {
  font-size: 10px !important;
}

.detachedFightHudStack .fightHealthBox .fightBarTop strong {
  font-size: 12px !important;
}

.detachedFightHudStack .fightSpecialBox .fightBarTop span,
.detachedFightHudStack .fightSpecialBox .fightBarTop strong {
  font-size: 10px !important;
}

.detachedFightHudStack .fightHealthMeter {
  height: 14px !important;
}

.healthWarning {
  min-height: 12px !important;
  margin-top: 2px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
}

@media (max-width: 980px) {
  #combatHud {
    top: 8px !important;
    left: 10px !important;
  }

  .detachedFightHudStack {
    width: clamp(210px, 28vw, 280px) !important;
    gap: 4px !important;
  }

  .detachedFightHudStack .fightHealthBox,
  .detachedFightHudStack .fightSpecialBox {
    padding: 5px 8px 6px !important;
  }

  .detachedFightHudStack .fightHealthMeter {
    height: 12px !important;
  }

  .detachedFightHudStack .fightSpecialMeter {
    height: 9px !important;
  }
}

@media (max-width: 760px) {
  #combatHud {
    top: 8px !important;
    left: 8px !important;
  }

  .detachedFightHudStack {
    width: 190px !important;
    gap: 4px !important;
  }

  .detachedFightHudStack .fightHealthBox,
  .detachedFightHudStack .fightSpecialBox {
    padding: 5px 7px 6px !important;
    border-radius: 11px !important;
  }

  .detachedFightHudStack .fightBarTop {
    margin-bottom: 3px !important;
  }

  .detachedFightHudStack .fightHealthMeter {
    height: 11px !important;
  }

  .detachedFightHudStack .fightSpecialMeter {
    height: 8px !important;
  }

  .healthWarning {
    min-height: 10px !important;
    font-size: 8px !important;
  }
}

.timesUpText {
  display: inline-block;
  margin: 4px auto 12px;
  padding: 6px 16px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,213,72,.96), rgba(255,107,44,.94));
  border: 1px solid rgba(255,246,190,.42);
  color: #fff9dd;
  font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 22px rgba(0,0,0,.24),
    0 0 18px rgba(255,139,48,.22);
}

#overlay .panel.resultPanel {
  gap: 10px;
}

.timesUpText {
  display: none !important;
}

.timesUpBanner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 auto 2px;
  min-width: min(300px, 82%);
  padding: 10px 22px 11px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 215, 92, .98), rgba(255, 110, 35, .96));
  border: 1px solid rgba(255, 245, 190, .46);
  color: #fff9de;
  font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 1000;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(0,0,0,.48),
    0 0 16px rgba(255, 173, 70, .24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 22px rgba(0,0,0,.24),
    0 0 22px rgba(255, 124, 52, .18);
}

.resultScoreText {
  margin-top: 2px;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .timesUpBanner {
    min-width: 78%;
    padding: 9px 14px 10px;
    border-radius: 14px;
    font-size: 20px;
    letter-spacing: 1px;
  }
}

.resultStatsGrid{
  width:min(100%,440px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:4px auto 8px;
}
.resultStatCard{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:78px;
  padding:10px 8px 12px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(26,30,44,.95),rgba(14,16,28,.95));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 16px rgba(0,0,0,.18);
  text-align:center;
}
.resultStatLabel{
  color:rgba(238,241,255,.78);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.45px;
  margin-bottom:6px;
}
.resultStatValue{
  color:#fff4cb;
  font-size:24px;
  line-height:1;
  font-weight:1000;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
@media (max-width:700px){
  .resultStatsGrid{gap:8px;}
  .resultStatCard{min-height:68px;padding:8px 8px 10px;border-radius:12px;}
  .resultStatLabel{font-size:10px;margin-bottom:5px;}
  .resultStatValue{font-size:20px;}
}

.resultStatsGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 460px;
}
@media (max-width: 700px){
  .resultStatsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.newBestRun {
  margin: -2px auto 2px;
  color: #fff4cb;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .8px;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.resultScoreSummary {
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 2px auto 10px;
}

.resultScoreCard {
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 213, 72, .14), rgba(0, 234, 255, .08));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.18);
  text-align: center;
}

.resultScoreCard span {
  display: block;
  margin-bottom: 5px;
  color: rgba(238,241,255,.76);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .55px;
}

.resultScoreCard strong {
  display: block;
  color: #fff4cb;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}

@media (max-width: 700px) {
  .resultScoreSummary {
    gap: 8px;
    margin-bottom: 8px;
  }

  .resultScoreCard {
    padding: 8px 8px 10px;
    border-radius: 12px;
  }

  .resultScoreCard span {
    font-size: 10px;
  }
}

.timesUpBanner {
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 auto 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #ffe16a !important;
  font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif !important;
  font-size: clamp(28px, 4.2vw, 46px) !important;
  font-weight: 1000 !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 3px 0 rgba(0,0,0,.74),
    0 0 14px rgba(255, 216, 80, .32),
    0 0 28px rgba(255, 91, 58, .18) !important;
  transform: rotate(-1deg);
}

.timesUpBanner::before,
.timesUpBanner::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 3px;
  margin: 0 12px 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255,225,106,.9), transparent);
  box-shadow: 0 0 12px rgba(255,225,106,.30);
}

@media (max-width: 700px) {
  .timesUpBanner {
    font-size: 30px !important;
    letter-spacing: 1.2px !important;
  }

  .timesUpBanner::before,
  .timesUpBanner::after {
    width: 24px;
    margin: 0 7px 6px;
  }
}

html, body {
  overscroll-behavior: none;
}

@media (max-width: 900px) {
  #topHud {
    gap: 6px !important;
    padding: 6px 7px !important;
    min-height: 58px !important;
  }

  #topHud .hudZoneLeft,
  #topHud .hudZoneCenter,
  #topHud .hudZoneRight {
    min-width: 0 !important;
  }

  #topHud .hudActionsLeft {
    gap: 6px !important;
  }

  #topHud .controlBtn {
    min-width: 66px !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  .hudTimerBox {
    min-width: 72px !important;
    padding: 5px 10px !important;
  }

  .hudTimerBox .label,
  .hudCard .label {
    font-size: 9px !important;
    letter-spacing: .8px !important;
  }

  .hudTimerBox strong {
    font-size: 28px !important;
  }

  .hudStatsGroup {
    gap: 5px !important;
  }

  .hudCard {
    min-width: 62px !important;
    padding: 5px 7px !important;
    border-radius: 12px !important;
  }

  .hudCard strong {
    font-size: 18px !important;
  }

  #combatHud {
    top: 8px !important;
    left: 8px !important;
    transform: scale(.86);
    transform-origin: top left;
  }

  #controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "left jump right"
      "duck attack special";
    gap: 8px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(11,12,20,.94), rgba(0,0,0,.98)) !important;
  }

  #leftBtn { grid-area: left; }
  #jumpBtn { grid-area: jump; }
  #rightBtn { grid-area: right; }
  #duckBtn { grid-area: duck; }
  #attackBtn { grid-area: attack; }
  #specialBtn { grid-area: special; }

  #controls button {
    min-height: 62px !important;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 14px rgba(0,0,0,.22) !important;
  }

  #specialBtn.ready {
    background: linear-gradient(135deg, #ffdf3d, #ff6b2e) !important;
    color: #100b05 !important;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
}

@media (max-height: 520px) and (orientation: landscape) {
}

html, body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

#gameShell {
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
}

#canvasWrap {
  width: 100%;
  min-height: 0;
}

#game {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 128px);
  object-fit: contain;
  touch-action: none;
}

#controls {
  touch-action: none;
  user-select: none;
}

#controls button {
  min-height: 58px;
  font-size: clamp(13px, 3.2vw, 18px);
  font-weight: 1000;
  letter-spacing: .3px;
}

@media (pointer: coarse), (max-width: 900px) {
  #topHud {
    gap: 6px !important;
    padding: 6px 7px !important;
    min-height: 58px !important;
  }

  #topHud .hudZoneLeft,
  #topHud .hudZoneCenter,
  #topHud .hudZoneRight {
    min-width: 0 !important;
  }

  #topHud .hudActionsLeft {
    gap: 6px !important;
  }

  #topHud .controlBtn {
    min-width: 66px !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  .hudTimerBox {
    min-width: 72px !important;
    padding: 5px 10px !important;
  }

  .hudTimerBox .label,
  .hudCard .label {
    font-size: 9px !important;
    letter-spacing: .8px !important;
  }

  .hudTimerBox strong {
    font-size: 28px !important;
  }

  .hudStatsGroup {
    gap: 5px !important;
  }

  .hudCard {
    min-width: 62px !important;
    padding: 5px 7px !important;
    border-radius: 12px !important;
  }

  .hudCard strong {
    font-size: 18px !important;
  }

  #combatHud {
    top: 8px !important;
    left: 8px !important;
    transform: scale(.86);
    transform-origin: top left;
  }

  #controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "left jump right"
      "duck attack special";
    gap: 8px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(11,12,20,.94), rgba(0,0,0,.98)) !important;
  }

  #leftBtn { grid-area: left; }
  #jumpBtn { grid-area: jump; }
  #rightBtn { grid-area: right; }
  #duckBtn { grid-area: duck; }
  #attackBtn { grid-area: attack; }
  #specialBtn { grid-area: special; }

  #controls button {
    min-height: 62px !important;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 14px rgba(0,0,0,.22) !important;
  }

  #specialBtn.ready {
    background: linear-gradient(135deg, #ffdf3d, #ff6b2e) !important;
    color: #100b05 !important;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  #gameShell {
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
  }

  #canvasWrap {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #game {
    max-height: calc(100dvh - 190px) !important;
  }

  #combatHud {
    transform: scale(.74);
  }

  #controls button {
    min-height: 64px !important;
    font-size: 15px !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  #gameShell {
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
  }

  #topHud {
    min-height: 46px !important;
    padding: 4px 6px !important;
  }

  #game {
    max-height: calc(100dvh - 104px) !important;
  }

  #combatHud {
    transform: scale(.66);
    top: 5px !important;
    left: 6px !important;
  }

  #controls button {
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#gameShell {
  width: 100vw !important;
  max-width: 1400px !important;
  height: 100dvh !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 0 !important;
}

#topHud {
  position: relative !important;
  z-index: 30 !important;
  min-height: 60px !important;
  flex-shrink: 0 !important;
}

#canvasWrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #05050a !important;
}

#game {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  touch-action: none !important;
}

#combatHud {
  position: absolute !important;
  top: 10px !important;
  left: 12px !important;
  z-index: 24 !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: top left !important;
}

#combatHud.hiddenDuringMenu {
  display: none !important;
}

.detachedFightHudStack {
  width: clamp(220px, 22vw, 320px) !important;
  gap: 6px !important;
}

.detachedFightHudStack .fightHealthBox,
.detachedFightHudStack .fightSpecialBox {
  padding: 7px 9px 8px !important;
  border-radius: 13px !important;
}

.detachedFightHudStack .fightBarTop {
  margin-bottom: 4px !important;
}

.detachedFightHudStack .fightBarTop span,
.detachedFightHudStack .fightBarTop strong {
  font-size: 10px !important;
}

.detachedFightHudStack .fightHealthMeter {
  height: 13px !important;
}

.detachedFightHudStack .fightSpecialMeter {
  height: 10px !important;
}

.healthWarning {
  min-height: 10px !important;
  margin-top: 2px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

#bottomHud {
  display: none !important;
}

#controls {
  flex-shrink: 0 !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#controls button {
  min-height: 56px !important;
  border-radius: 15px !important;
  font-weight: 1000 !important;
  letter-spacing: .25px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 14px rgba(0,0,0,.22) !important;
}

#specialBtn.ready {
  background: linear-gradient(135deg, #ffdf3d, #ff6b2e) !important;
  color: #100b05 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 18px rgba(255, 210, 50, .35) !important;
}

@media (pointer: coarse), (max-width: 900px) {

  #topHud {
    min-height: 52px !important;
    padding: 5px 6px !important;
    gap: 5px !important;
  }

  #topHud .hudZone,
  #topHud .hudZoneLeft,
  #topHud .hudZoneCenter,
  #topHud .hudZoneRight {
    min-width: 0 !important;
  }

  #topHud .hudActionsLeft {
    gap: 5px !important;
  }

  #topHud .controlBtn {
    min-width: 60px !important;
    min-height: 36px !important;
    padding: 6px 7px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }

  .hudTimerBox {
    min-width: 68px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
  }

  .hudTimerBox .label,
  .hudCard .label {
    font-size: 8px !important;
    letter-spacing: .65px !important;
  }

  .hudTimerBox strong {
    font-size: 24px !important;
  }

  .hudCard {
    min-width: 56px !important;
    padding: 4px 6px !important;
    border-radius: 11px !important;
  }

  .hudCard strong {
    font-size: 16px !important;
  }

  #combatHud {
    top: 8px !important;
    left: 8px !important;
    transform: scale(.78) !important;
  }

  .detachedFightHudStack {
    width: 260px !important;
  }

  #controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-areas:
      "left jump right"
      "duck attack special" !important;
    gap: 8px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(11,12,20,.94), rgba(0,0,0,.98)) !important;
  }

  #controls button {
    min-height: 60px !important;
    padding: 10px 8px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  #topHud {
    min-height: 50px !important;
  }

  #canvasWrap {
    align-items: center !important;
  }

  #game {
    width: 100vw !important;
    height: auto !important;
    max-height: calc(100dvh - 184px) !important;
  }

  #combatHud {
    top: 7px !important;
    left: 7px !important;
    transform: scale(.66) !important;
  }

  #controls {
    gap: 7px !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  }

  #controls button {
    min-height: 62px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  #topHud {
    min-height: 42px !important;
    padding: 3px 6px !important;
  }

  #topHud .controlBtn {
    min-height: 32px !important;
    min-width: 58px !important;
    font-size: 10px !important;
  }

  .hudTimerBox {
    padding: 3px 8px !important;
  }

  .hudTimerBox strong {
    font-size: 21px !important;
  }

  .hudCard {
    padding: 3px 6px !important;
  }

  .hudCard strong {
    font-size: 15px !important;
  }

  #game {
    max-height: calc(100dvh - 94px) !important;
  }

  #combatHud {
    top: 5px !important;
    left: 6px !important;
    transform: scale(.58) !important;
  }

  #controls {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-areas: "left jump duck attack special right" !important;
    gap: 6px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  #controls button {
    min-height: 44px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 901px) {
  #canvasWrap {
    max-height: calc(100dvh - 62px) !important;
  }

  #game {
    width: min(100%, calc((100dvh - 62px) * 16 / 9)) !important;
    height: auto !important;
  }
}

.topScoreName {
  display: inline-grid;
  place-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 234, 255, .14);
  border: 1px solid rgba(0,234,255,.32);
  color: #dffbff;
  font-size: 12px;
  letter-spacing: 1px;
  vertical-align: middle;
}

.highScoreEntry {
  width: min(100%, 420px);
  margin: -4px auto 4px;
  padding: 10px 12px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 213, 72, .18), rgba(255, 43, 214, .12), rgba(0, 234, 255, .10));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.22);
}

.highScoreEntry label {
  display: block;
  margin: 4px 0 8px;
  color: rgba(238,241,255,.78);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.initialsRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

#initialsInput {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid rgba(0,234,255,.34);
  background: rgba(0,0,0,.42);
  color: #fff4cb;
  text-align: center;
  font-size: 28px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 3px;
  text-transform: uppercase;
  outline: none;
  box-shadow: inset 0 0 18px rgba(0,234,255,.08);
}

#initialsInput:focus {
  border-color: rgba(255, 213, 72, .72);
  box-shadow: 0 0 22px rgba(255,213,72,.16), inset 0 0 18px rgba(0,234,255,.10);
}

#saveInitialsBtn {
  min-width: 92px;
  border-radius: 14px;
}

.topScoreHolder {
  margin: -2px auto 4px;
  color: rgba(238,241,255,.78);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.topScoreHolder strong {
  color: #fff4cb;
  letter-spacing: 1px;
}

@media (max-width: 560px) {
  .initialsRow {
    grid-template-columns: 1fr;
  }

  #initialsInput {
    min-height: 44px;
    font-size: 24px;
  }
}

.leaderboardBox {
  width: min(100%, 460px);
  margin: 2px auto 10px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(4, 7, 18, .58), rgba(0,0,0,.32));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.20);
}

.leaderboardBox h3 {
  margin: 0 0 8px;
  color: #fff4cb;
  font-size: 14px;
  line-height: 1;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.leaderboardRows {
  display: grid;
  gap: 5px;
}

.leaderboardRow {
  display: grid;
  grid-template-columns: 28px 54px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.075);
}

.leaderboardRow.activeScoreRow {
  background: linear-gradient(90deg, rgba(255,213,72,.20), rgba(0,234,255,.12));
  border-color: rgba(255,213,72,.32);
  box-shadow: 0 0 18px rgba(255,213,72,.10);
}

.leaderboardRank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,234,255,.14);
  border: 1px solid rgba(0,234,255,.24);
  color: #dffbff;
  font-weight: 1000;
  font-size: 12px;
}

.leaderboardName {
  color: #fff4cb;
  font-size: 17px;
  font-weight: 1000;
  letter-spacing: 1.5px;
}

.leaderboardChar {
  min-width: 0;
  color: rgba(238,241,255,.70);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.leaderboardScore {
  color: #ffffff;
  font-size: 15px;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.leaderboardEmpty {
  margin: 0;
  color: rgba(238,241,255,.72);
  font-size: 13px;
  font-weight: 800;
}

.expertStartPanel .leaderboardBox {
  margin-top: 8px;
  width: min(100%, 430px);
  transform: scale(.95);
  transform-origin: top center;
}

.expertStartPanel .leaderboardRow {
  min-height: 30px;
  grid-template-columns: 24px 48px 1fr auto;
  padding: 4px 7px;
}

.expertStartPanel .leaderboardBox h3 {
  font-size: 12px;
}

@media (max-width: 560px) {
  .leaderboardRow {
    grid-template-columns: 24px 44px 1fr auto;
    gap: 6px;
    padding: 5px 6px;
  }

  .leaderboardName {
    font-size: 15px;
  }

  .leaderboardChar {
    font-size: 10px;
  }

  .leaderboardScore {
    font-size: 13px;
  }

  .expertStartPanel .leaderboardBox {
    transform: none;
  }
}

#saveInitialsBtn {
  color: #071018 !important;
  background: linear-gradient(180deg, #fff4a8, #ffbd2f) !important;
  border: 2px solid rgba(0, 0, 0, .65) !important;
  text-shadow: none !important;
  box-shadow: 0 5px 0 rgba(0,0,0,.38), 0 0 18px rgba(255, 213, 72, .24) !important;
  font-weight: 1000 !important;
}

#saveInitialsBtn:hover,
#saveInitialsBtn:focus {
  color: #05070a !important;
  background: linear-gradient(180deg, #ffffff, #ffd955) !important;
  outline: none !important;
}

#initialsInput::placeholder {
  color: rgba(255, 244, 203, .30);
  letter-spacing: 8px;
}

.leaderboardBox h3::after {
  content: " TOP 3";
  color: rgba(0, 234, 255, .82);
  font-size: .78em;
  margin-left: 6px;
}

#initialsInput {
  letter-spacing: 3px !important;
}

#game {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

@media (pointer: coarse), (max-width: 900px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  #gameShell,
  #canvasWrap {
    contain: layout paint;
  }

  #game {
    contain: paint;
  }

  #overlay .panel,
  .hudCard,
  .leaderboardBox,
  .resultStatCard,
  .resultScoreCard {
    box-shadow: none !important;
  }

  .titleArt,
  .heroTitleArt {
    filter: none !important;
  }

  #combatHud {
    transform: translateZ(0) scale(.92) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #combatHud {
    transform: translateZ(0) scale(.76) !important;
  }
}

.leaderboardRow {
  grid-template-columns: 28px 54px minmax(120px, 1fr) auto;
}

.leaderboardChar {
  text-align: left;
}

.expertStartPanel .leaderboardRow {
  grid-template-columns: 24px 48px minmax(110px, 1fr) auto;
}

@media (max-width: 560px) {
  .leaderboardRow {
    grid-template-columns: 24px 44px minmax(90px, 1fr) auto;
  }

  .leaderboardChar {
    font-size: 9px;
  }
}

.leaderboardChar {
  text-align: center !important;
  justify-self: center;
  width: 100%;
}

@media (pointer: coarse), (max-width: 900px) {
  body {
    background: #05050a;
  }

  #game {
    image-rendering: auto;
  }

  #overlay {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  .leaderboardRow,
  .resultStatCard,
  .resultScoreCard,
  .highScoreEntry {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  button {
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (pointer: coarse), (max-width: 900px) {
  html,
  body {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  #gameShell {
    transform: translateZ(0);
    will-change: auto;
  }

  #game {
    transform: translate3d(0,0,0);
    will-change: auto;
  }

  #overlay,
  #topHud,
  #combatHud,
  #controls {
    transform: translateZ(0);
  }

  .controlBtn,
  #specialBtn,
  .uiBtn,
  button {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }

  .controlBtn:active,
  #specialBtn:active {
    transform: translateY(1px) scale(.985);
  }

  .leaderboardBox,
  .highScoreEntry,
  .resultPanel,
  .pausePanel,
  .charPanel {
    filter: none !important;
  }
}

@media (pointer: coarse) and (max-height: 520px) {
  #topHud {
    min-height: 48px !important;
  }

  #combatHud {
    top: 6px !important;
    left: 8px !important;
    transform: translateZ(0) scale(.68) !important;
  }

  #controls {
    gap: 6px !important;
  }

  .controlBtn {
    min-height: 42px !important;
  }
}


/* Mobile Smooth Mode UI upgrade */
.smoothModeBtn {
  min-height: 38px;
  padding: 8px 14px;
  margin: 2px auto 4px;
  border-radius: 999px;
  border: 1px solid rgba(0, 234, 255, .38);
  background: linear-gradient(180deg, rgba(0,234,255,.18), rgba(0,0,0,.36));
  color: #dffbff;
  font-weight: 1000;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.smoothModeBtn span {
  color: #fff4cb;
}

@media (pointer: coarse), (max-width: 900px) {
  #gameShell {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  #topHud {
    min-height: 48px !important;
    padding: 4px 7px !important;
  }

  .hudCard {
    min-height: 38px !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;
  }

  .hudLabel {
    font-size: 9px !important;
  }

  .hudValue,
  #timer,
  #score,
  #combo {
    font-size: 17px !important;
  }

  #canvasWrap {
    flex: 1 1 auto !important;
  }

  #combatHud {
    top: 6px !important;
    left: 8px !important;
    transform: translateZ(0) scale(.76) !important;
  }

  #controls {
    grid-template-columns: repeat(6, minmax(44px, 1fr)) !important;
    gap: 7px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
  }

  .controlBtn {
    min-height: 50px !important;
    padding: 5px 4px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .controlBtn small {
    display: none !important;
  }

  .smoothMode .controlBtn {
    min-height: 54px !important;
    font-size: 15px !important;
  }

  .smoothMode #combatHud {
    transform: translateZ(0) scale(.70) !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #topHud {
    min-height: 52px !important;
  }

  #controls {
    grid-template-columns: repeat(3, minmax(70px, 1fr)) !important;
    gap: 8px !important;
  }

  .controlBtn {
    min-height: 56px !important;
    font-size: 15px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #topHud {
    min-height: 42px !important;
  }

  #combatHud {
    transform: translateZ(0) scale(.62) !important;
  }

  #controls {
    padding-top: 4px !important;
    padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
  }

  .controlBtn {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .smoothMode .controlBtn {
    min-height: 44px !important;
  }
}




/* ===== Venue level selector ===== */
.venueSelectPanel {
  max-width: min(96vw, 980px) !important;
}

.venueSelectBlock {
  width: 100%;
  margin: 16px auto 10px;
}

.venueSelectBlock h3 {
  margin: 0 0 9px;
  color: #fff2a8;
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 215, 107, .28);
}

.venueCards {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 9px;
  width: 100%;
}

.venueCard {
  position: relative;
  min-height: 108px;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(0,0,0,.34)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--venue-color) 30%, transparent), transparent 58%);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.25);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.venueCard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--venue-color) 68%, white 12%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--venue-color) 30%, transparent), 0 10px 24px rgba(0,0,0,.30);
}

.venueCard.selected {
  border-color: var(--venue-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--venue-color) 44%, transparent), 0 0 24px color-mix(in srgb, var(--venue-color) 25%, transparent);
}

.venueName {
  display: block;
  color: var(--venue-color);
  font-size: 15px;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.venueCard small {
  display: block;
  margin-top: 7px;
  color: rgba(238,241,255,.78);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
}

.venueCard b {
  display: block;
  margin-top: 8px;
  color: #fff4cb;
  font-size: 11px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .venueCards {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
  }

  .venueCard {
    min-height: 90px;
    padding: 10px 9px;
  }

  .venueName {
    font-size: 13px;
  }

  .venueCard small,
  .venueCard b {
    font-size: 10px;
  }
}

@media (max-width: 520px) {
  .venueCards {
    grid-template-columns: 1fr;
  }

  .venueCard {
    min-height: 70px;
  }
}


/* Venue card readability refinements */
.venueCards {
  align-items: stretch;
}
.venueCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
.venueName,
.venueCard small,
.venueCard b {
  width: 100%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
.venueName {
  line-height: 1.1;
}
.venueCard small {
  margin-top: 8px;
  line-height: 1.25;
}
.venueCard b {
  margin-top: 8px;
  line-height: 1.25;
}


/* ===== Mobile browser / PWA polish ===== */
html {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05050a;
  -webkit-text-size-adjust: 100%;
}

body.noScrollGame,
body.mobileBrowserGame {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button,
canvas,
#gameShell,
#controls,
#overlay {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.mobileInstallHint {
  width: min(90%, 520px);
  margin: 8px auto 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(143, 252, 255, .30);
  background: rgba(0, 0, 0, .34);
  color: rgba(238, 247, 255, .88);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 800;
  letter-spacing: .2px;
}

@media (pointer: coarse), (max-width: 900px) {
  body {
    display: block;
  }

  #gameShell {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    border: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  #canvasWrap {
    min-height: 0;
    height: auto;
    contain: layout paint size;
  }

  canvas {
    width: 100vw;
    height: 100%;
    max-height: calc(100dvh - 138px);
    object-fit: contain;
    background: #05050a;
  }

  #topHud {
    min-height: 40px;
    padding-top: max(6px, env(safe-area-inset-top));
  }

  #controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr .95fr 1.2fr 1.35fr;
    gap: 7px;
    padding: 8px max(8px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(4, 6, 12, .78), rgba(0, 0, 0, .94));
    border-top: 1px solid rgba(0, 234, 255, .20);
  }

  #controls button {
    min-height: 58px;
    min-width: 0;
    padding: 8px 6px;
    border-radius: 17px;
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: clamp(12px, 3.2vw, 18px);
    font-weight: 1000;
    letter-spacing: .3px;
    line-height: 1;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.25),
      0 6px 14px rgba(0,0,0,.32);
    touch-action: none;
  }

  #jumpBtn,
  #attackBtn,
  #specialBtn {
    font-size: clamp(13px, 3.5vw, 19px);
  }

  #specialBtn.ready {
    color: #07110a;
    background: linear-gradient(180deg, #dfff74, #66ff50 55%, #1fc221);
    box-shadow:
      0 0 18px rgba(102, 255, 80, .48),
      inset 0 1px 0 rgba(255,255,255,.50),
      0 6px 14px rgba(0,0,0,.32);
  }

  #overlay {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  #overlay p,
  .selectLead,
  .howIntro,
  .mobileInstallHint {
    font-family: Arial, Helvetica, sans-serif;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #gameShell {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  canvas {
    max-height: calc(100dvh - 170px);
  }

  #controls {
    grid-template-columns: repeat(3, 1fr);
  }

  #controls button {
    min-height: 62px;
  }

  .mobileInstallHint::after {
    content: " Landscape gives the best view.";
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #controls button {
    min-height: 52px;
  }

  canvas {
    max-height: calc(100dvh - 116px);
  }
}

@media (display-mode: standalone) {
  .mobileInstallHint {
    display: none;
  }
}


/* ===== Mobile compact HUD fix ===== */
@media (pointer: coarse), (max-width: 900px) {
  #gameShell {
    height: 100dvh;
    grid-template-rows: 34px minmax(0, 1fr) 56px !important;
  }

  #topHud {
    min-height: 34px !important;
    height: 34px !important;
    padding: max(2px, env(safe-area-inset-top)) 6px 2px !important;
    gap: 4px !important;
  }

  .hudZone,
  .hudZoneLeft,
  .hudZoneCenter,
  .hudZoneRight {
    min-width: 0 !important;
  }

  .hudActions,
  .hudActionsLeft,
  .hudStatsGroup {
    gap: 4px !important;
  }

  .uiBtn,
  .controlBtn,
  .menuBtn,
  .pauseBtn {
    min-height: 24px !important;
    padding: 4px 7px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .2px !important;
  }

  .hudTimerBox,
  .hudCard {
    min-width: 48px !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
  }

  .hudTimerBox .label,
  .hudCard .label,
  .label {
    font-size: 7px !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
  }

  #timer,
  #score,
  #combo,
  .hudTimerBox strong,
  .hudCard strong {
    font-size: 17px !important;
    line-height: .9 !important;
    text-shadow: none !important;
  }

  #combatHud {
    top: 40px !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: auto !important;
    transform: none !important;
    pointer-events: none;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 172px !important;
    gap: 5px !important;
  }

  .fightBarTop {
    gap: 5px !important;
    margin-bottom: 3px !important;
  }

  .fightBarTop span,
  #specialName {
    font-size: 9px !important;
    letter-spacing: .4px !important;
    line-height: 1 !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 7px !important;
    border-radius: 999px !important;
  }

  .healthWarning {
    font-size: 8px !important;
    margin-top: 2px !important;
    min-height: 8px !important;
  }

  #canvasWrap {
    min-height: 0 !important;
  }

  canvas {
    width: 100vw !important;
    height: 100% !important;
    max-height: calc(100dvh - 90px) !important;
    object-fit: contain !important;
  }

  #controls {
    min-height: 56px !important;
    height: 56px !important;
    padding: 5px max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    gap: 5px !important;
  }

  #controls button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 5px 4px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #jumpBtn,
  #attackBtn,
  #specialBtn {
    font-size: 12px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #gameShell {
    grid-template-rows: 34px minmax(0, 1fr) 112px !important;
  }

  canvas {
    max-height: calc(100dvh - 146px) !important;
  }

  #controls {
    height: 112px !important;
    min-height: 112px !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #controls button {
    min-height: 48px !important;
    height: 48px !important;
  }

  #combatHud {
    top: 38px !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 158px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #gameShell {
    grid-template-rows: 30px minmax(0, 1fr) 48px !important;
  }

  #topHud {
    min-height: 30px !important;
    height: 30px !important;
    padding-top: max(1px, env(safe-area-inset-top)) !important;
  }

  #timer,
  #score,
  #combo,
  .hudTimerBox strong,
  .hudCard strong {
    font-size: 15px !important;
  }

  #combatHud {
    top: 34px !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 156px !important;
  }

  #controls {
    height: 48px !important;
    min-height: 48px !important;
  }

  #controls button {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 11px !important;
  }

  canvas {
    max-height: calc(100dvh - 78px) !important;
  }
}


/* ===== Mobile character and venue selection layout fix ===== */
@media (pointer: coarse), (max-width: 900px) {
  #overlay {
    align-items: stretch !important;
    justify-items: center !important;
    overflow: hidden !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  .characterSelectPanel,
  .venueSelectPanel {
    width: min(96vw, 760px) !important;
    max-width: 96vw !important;
    max-height: calc(100dvh - 18px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 10px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-size: clamp(26px, 7vw, 42px) !important;
    line-height: .9 !important;
    margin: 0 !important;
  }

  .selectLead {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 auto 2px !important;
    max-width: 92% !important;
  }

  .selectCards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .selectCard {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 9px 6px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .selectName {
    font-size: clamp(15px, 3.8vw, 20px) !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .selectCard small {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-top: 5px !important;
  }

  .selectCard b {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-top: 5px !important;
  }

  .venueSelectBlock {
    margin: 2px auto 0 !important;
    width: 100% !important;
  }

  .venueSelectBlock h3 {
    margin: 0 0 7px !important;
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
    line-height: 1 !important;
  }

  .venueCards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .venueCard {
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 8px 7px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .venueName {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(12px, 3.2vw, 16px) !important;
    line-height: 1.05 !important;
    letter-spacing: .2px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .venueCard small,
  .venueCard b {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .venueCard small {
    margin-top: 5px !important;
  }

  .venueCard b {
    margin-top: 5px !important;
  }

  .characterSelectPanel .btnRow,
  .venueSelectPanel .btnRow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
  }

  .characterSelectPanel .btnRow button,
  .venueSelectPanel .btnRow button,
  #playGigBtn,
  #backToStartBtn {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  .characterSelectPanel,
  .venueSelectPanel {
    width: min(96vw, 920px) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 8px 10px !important;
    gap: 7px !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-size: clamp(22px, 5vw, 34px) !important;
  }

  .selectLead {
    display: none !important;
  }

  .selectCards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .selectCard {
    min-height: 62px !important;
    padding: 7px 5px !important;
  }

  .selectName {
    font-size: clamp(13px, 2.6vw, 17px) !important;
  }

  .selectCard small,
  .selectCard b {
    font-size: 8.5px !important;
    margin-top: 3px !important;
  }

  .venueSelectBlock h3 {
    font-size: 10px !important;
    margin-bottom: 5px !important;
  }

  .venueCards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .venueCard {
    min-height: 68px !important;
    padding: 6px 5px !important;
    border-radius: 12px !important;
  }

  .venueName {
    font-size: clamp(10px, 1.7vw, 13px) !important;
    line-height: 1.05 !important;
  }

  .venueCard small,
  .venueCard b {
    font-size: 7.5px !important;
    line-height: 1.08 !important;
    margin-top: 3px !important;
  }

  .characterSelectPanel .btnRow,
  .venueSelectPanel .btnRow {
    width: min(420px, 100%) !important;
    align-self: center !important;
  }

  #playGigBtn,
  #backToStartBtn {
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  .characterSelectPanel,
  .venueSelectPanel {
    width: min(94vw, 440px) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 12px 9px !important;
    gap: 9px !important;
  }

  .selectCards {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .selectCard {
    min-height: 62px !important;
  }

  .venueCards {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .venueCard {
    min-height: 58px !important;
    padding: 7px 8px !important;
  }

  .venueName {
    font-size: 14px !important;
  }

  .venueCard small,
  .venueCard b {
    font-size: 10px !important;
  }
}


/* ===== Mobile selection fit final fix ===== */
@media (pointer: coarse), (max-width: 900px) {
  #overlay {
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  .characterSelectPanel,
  .venueSelectPanel {
    box-sizing: border-box !important;
    max-height: calc(100dvh - 32px) !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
    justify-content: flex-start !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    padding-top: 3px !important;
    margin-top: 0 !important;
    line-height: 1.05 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  .characterSelectPanel .btnRow,
  .venueSelectPanel .btnRow {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    background: linear-gradient(180deg, rgba(8,8,16,0), rgba(8,8,16,.88) 34%, rgba(8,8,16,.96)) !important;
    flex: 0 0 auto !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #overlay {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .characterSelectPanel,
  .venueSelectPanel {
    max-height: calc(100dvh - 20px) !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
    gap: 5px !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-size: clamp(18px, 4.2vw, 28px) !important;
    line-height: 1.08 !important;
    padding-top: 2px !important;
    margin-bottom: 0 !important;
  }

  .selectCard {
    min-height: 52px !important;
    padding: 5px 4px !important;
  }

  .selectName {
    font-size: clamp(12px, 2.2vw, 15px) !important;
  }

  .selectCard small,
  .selectCard b {
    font-size: 7.5px !important;
    margin-top: 2px !important;
  }

  .venueSelectBlock h3 {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }

  .venueCard {
    min-height: 56px !important;
    padding: 5px 4px !important;
  }

  .venueName {
    font-size: clamp(9px, 1.45vw, 12px) !important;
    line-height: 1.05 !important;
  }

  .venueCard small,
  .venueCard b {
    font-size: 6.8px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }

  .characterSelectPanel .btnRow,
  .venueSelectPanel .btnRow {
    margin-top: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 0 !important;
  }

  #playGigBtn,
  #backToStartBtn {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #overlay {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .characterSelectPanel,
  .venueSelectPanel {
    max-height: calc(100dvh - 30px) !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-size: clamp(24px, 6.2vw, 36px) !important;
    line-height: 1.08 !important;
  }

  .selectLead {
    font-size: 12px !important;
  }

  .selectCard {
    min-height: 54px !important;
  }

  .venueCard {
    min-height: 52px !important;
  }

  #playGigBtn,
  #backToStartBtn {
    min-height: 40px !important;
    height: 40px !important;
  }
}


/* ===== Mobile selection final compact portrait landscape fix ===== */
@media (pointer: coarse), (max-width: 900px) {
  .characterSelectPanel.venueSelectPanel {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-family: Impact, "Arial Black", Arial, sans-serif !important;
    letter-spacing: .5px !important;
  }
}

/* Portrait phones: fit everything on screen by using compact grids instead of tall stacks */
@media (pointer: coarse) and (orientation: portrait) {
  #overlay {
    padding: max(8px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
    align-items: center !important;
  }

  .characterSelectPanel,
  .venueSelectPanel {
    width: min(96vw, 430px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 9px 8px 8px !important;
    gap: 6px !important;
    border-radius: 15px !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-size: clamp(21px, 6vw, 31px) !important;
    line-height: 1.08 !important;
    padding-top: 1px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .selectLead {
    display: none !important;
  }

  .selectCards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .selectCard {
    min-height: 50px !important;
    padding: 5px 3px !important;
    border-radius: 11px !important;
  }

  .selectName {
    font-size: clamp(11px, 3.2vw, 15px) !important;
    line-height: 1 !important;
  }

  .selectCard small {
    display: none !important;
  }

  .selectCard b {
    font-size: 7.5px !important;
    line-height: 1 !important;
    margin-top: 3px !important;
  }

  .venueSelectBlock {
    margin: 0 !important;
  }

  .venueSelectBlock h3 {
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 0 4px !important;
    letter-spacing: 1px !important;
  }

  .venueCards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .venueCard {
    min-height: 44px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  .venueName {
    font-size: clamp(9px, 2.85vw, 13px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .venueCard small {
    display: none !important;
  }

  .venueCard b {
    font-size: 7px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }

  .characterSelectPanel .btnRow,
  .venueSelectPanel .btnRow {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 0 !important;
    position: static !important;
    background: transparent !important;
  }

  #playGigBtn,
  #backToStartBtn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 8px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }
}

/* Very short portrait screens: go even tighter */
@media (pointer: coarse) and (orientation: portrait) and (max-height: 720px) {
  .characterSelectPanel,
  .venueSelectPanel {
    max-height: calc(100dvh - 10px) !important;
    padding: 7px 7px 6px !important;
    gap: 4px !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-size: clamp(18px, 5.5vw, 26px) !important;
  }

  .selectCard {
    min-height: 42px !important;
  }

  .selectCard b {
    display: none !important;
  }

  .venueCard {
    min-height: 36px !important;
  }

  .venueCard b {
    display: none !important;
  }

  #playGigBtn,
  #backToStartBtn {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
}

/* Landscape phones: make the panel less wide/long and more compact */
@media (pointer: coarse) and (orientation: landscape) {
  .characterSelectPanel,
  .venueSelectPanel {
    width: min(86vw, 760px) !important;
    max-width: min(86vw, 760px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 7px 9px !important;
    gap: 4px !important;
  }

  .characterSelectPanel h2,
  .venueSelectPanel h2 {
    font-size: clamp(17px, 3.5vw, 25px) !important;
    line-height: 1.05 !important;
    padding: 0 !important;
  }

  .selectCards {
    gap: 5px !important;
  }

  .selectCard {
    min-height: 46px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  .selectName {
    font-size: clamp(11px, 1.8vw, 14px) !important;
  }

  .selectCard small {
    display: none !important;
  }

  .selectCard b {
    font-size: 7px !important;
    margin-top: 2px !important;
  }

  .venueSelectBlock h3 {
    display: none !important;
  }

  .venueCards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .venueCard {
    min-height: 48px !important;
    padding: 4px 4px !important;
    border-radius: 10px !important;
  }

  .venueName {
    font-size: clamp(8px, 1.25vw, 10.5px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .venueCard small {
    display: none !important;
  }

  .venueCard b {
    font-size: 6.4px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }

  .characterSelectPanel .btnRow,
  .venueSelectPanel .btnRow {
    width: min(300px, 100%) !important;
    gap: 6px !important;
    padding-top: 2px !important;
    margin-top: 0 !important;
    position: static !important;
    background: transparent !important;
  }

  #playGigBtn,
  #backToStartBtn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 3px 7px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
}


/* ===== Mobile selected character and landscape chooser polish ===== */

/* Portrait: selected character was too visually large/heavy. Keep selection clear but compact. */
@media (pointer: coarse) and (orientation: portrait) {
  .selectCard.selected,
  .venueCard.selected {
    transform: none !important;
    scale: 1 !important;
    box-shadow:
      inset 0 0 0 2px var(--venue-color, rgba(255, 215, 107, .85)),
      0 0 10px rgba(255, 215, 107, .20) !important;
  }

  .selectCard.selected {
    border-color: rgba(255, 215, 107, .95) !important;
    background:
      linear-gradient(180deg, rgba(255, 215, 107, .16), rgba(0,0,0,.30)) !important;
  }

  .selectCard.selected::after {
    content: "SELECTED";
    display: block;
    margin-top: 2px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255, 215, 107, .16);
    color: #fff2a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .7px;
    line-height: 1.1;
  }

  .selectCard.selected .selectName {
    color: #fff2a8 !important;
    text-shadow: none !important;
  }

  .selectCard,
  .venueCard {
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
  }
}

/* Landscape: use available width better without stretching the chooser too long. */
@media (pointer: coarse) and (orientation: landscape) {
  .characterSelectPanel.venueSelectPanel {
    width: min(92vw, 980px) !important;
    max-width: min(92vw, 980px) !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-columns: minmax(235px, .82fr) minmax(430px, 1.18fr) !important;
    grid-template-areas:
      "title title"
      "players venues"
      "actions actions" !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    align-items: stretch !important;
    padding: 7px 10px !important;
  }

  .characterSelectPanel.venueSelectPanel h2 {
    grid-area: title !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .characterSelectPanel.venueSelectPanel .selectLead {
    display: none !important;
  }

  .characterSelectPanel.venueSelectPanel .selectCards {
    grid-area: players !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: 5px !important;
    align-self: stretch !important;
  }

  .characterSelectPanel.venueSelectPanel .selectCard {
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 6px !important;
  }

  .characterSelectPanel.venueSelectPanel .selectCard small {
    display: block !important;
    font-size: 7.3px !important;
    margin-top: 2px !important;
  }

  .characterSelectPanel.venueSelectPanel .selectCard b {
    font-size: 7.5px !important;
    margin-top: 2px !important;
  }

  .characterSelectPanel.venueSelectPanel .venueSelectBlock {
    grid-area: venues !important;
    margin: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .characterSelectPanel.venueSelectPanel .venueSelectBlock h3 {
    display: block !important;
    font-size: 9px !important;
    margin: 0 0 4px !important;
  }

  .characterSelectPanel.venueSelectPanel .venueCards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-self: stretch !important;
  }

  .characterSelectPanel.venueSelectPanel .venueCard {
    min-height: 70px !important;
    height: auto !important;
    padding: 5px 5px !important;
  }

  .characterSelectPanel.venueSelectPanel .venueName {
    font-size: clamp(8.5px, 1.25vw, 11.5px) !important;
  }

  .characterSelectPanel.venueSelectPanel .venueCard small {
    display: block !important;
    font-size: 6.5px !important;
    margin-top: 2px !important;
    line-height: 1.05 !important;
  }

  .characterSelectPanel.venueSelectPanel .venueCard b {
    display: block !important;
    font-size: 6.5px !important;
    margin-top: 2px !important;
    line-height: 1.05 !important;
  }

  .characterSelectPanel.venueSelectPanel .btnRow {
    grid-area: actions !important;
    width: min(340px, 70%) !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .characterSelectPanel.venueSelectPanel #playGigBtn,
  .characterSelectPanel.venueSelectPanel #backToStartBtn {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11.5px !important;
  }
}

/* Very short landscape phones: hide tertiary venue text and keep all primary options visible. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .characterSelectPanel.venueSelectPanel {
    grid-template-columns: minmax(210px, .75fr) minmax(390px, 1.25fr) !important;
    padding: 5px 8px !important;
    row-gap: 4px !important;
  }

  .characterSelectPanel.venueSelectPanel h2 {
    font-size: clamp(15px, 3vw, 21px) !important;
  }

  .characterSelectPanel.venueSelectPanel .selectCard small,
  .characterSelectPanel.venueSelectPanel .venueCard small,
  .characterSelectPanel.venueSelectPanel .venueCard b {
    display: none !important;
  }

  .characterSelectPanel.venueSelectPanel .venueCard {
    min-height: 48px !important;
  }

  .characterSelectPanel.venueSelectPanel .selectCard b {
    font-size: 6.5px !important;
  }

  .characterSelectPanel.venueSelectPanel .btnRow {
    width: min(300px, 64%) !important;
  }

  .characterSelectPanel.venueSelectPanel #playGigBtn,
  .characterSelectPanel.venueSelectPanel #backToStartBtn {
    min-height: 26px !important;
    height: 26px !important;
    font-size: 10.5px !important;
  }
}


/* ===== Professional mobile menu redesign split flow ===== */
@media (pointer: coarse), (max-width: 900px) {
  #overlay {
    overflow: hidden !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  .mobileStepPanel {
    width: min(94vw, 520px) !important;
    max-width: 94vw !important;
    max-height: calc(100dvh - 18px) !important;
    box-sizing: border-box !important;
    padding: 14px 12px 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto auto !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .mobileStepTop {
    display: grid;
    gap: 4px;
  }

  .mobileStepCount {
    justify-self: center;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(143, 252, 255, .28);
    color: rgba(238, 247, 255, .82);
    background: rgba(0,0,0,.30);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
  }

  .mobileStepPanel h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  .mobilePlayerCards,
  .mobileVenueCards {
    display: grid;
    gap: 8px;
    align-content: center;
    min-height: 0;
  }

  .mobilePlayerCards {
    grid-template-columns: 1fr;
  }

  .mobilePlayerCard,
  .mobileVenueCard {
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.35));
    border-radius: 15px;
    min-height: 62px;
    padding: 9px 10px;
    display: grid;
    place-items: center;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.25);
  }

  .mobilePlayerCard span,
  .mobileVenueCard span {
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1;
    text-transform: uppercase;
  }

  .mobilePlayerCard b {
    margin-top: 4px;
    color: rgba(255,244,203,.92);
    font-size: 11px;
    line-height: 1;
  }

  .mobilePlayerCard.selected {
    border-color: var(--char-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--char-color) 35%, transparent), 0 0 18px color-mix(in srgb, var(--char-color) 24%, transparent);
  }

  .mobilePlayerCard.selected span {
    color: var(--char-color);
  }

  .mobileVenueCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobileVenueCard {
    min-height: 58px;
    padding: 8px 6px;
  }

  .mobileVenueCard span {
    font-size: 14px;
  }

  .mobileVenueCard.selected {
    border-color: var(--venue-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--venue-color) 35%, transparent), 0 0 18px color-mix(in srgb, var(--venue-color) 23%, transparent);
  }

  .mobileVenueCard.selected span {
    color: var(--venue-color);
  }

  .mobileSelectedVenue {
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--venue-color) 42%, rgba(255,255,255,.10));
    background: rgba(0,0,0,.28);
    font-family: Arial, Helvetica, sans-serif;
  }

  .mobileSelectedVenue strong {
    color: var(--venue-color);
    font-size: 13px !important;
    line-height: 1.05;
    text-shadow: none;
  }

  .mobileSelectedVenue span {
    color: rgba(238,241,255,.82);
    font-size: 11px;
    line-height: 1.18;
  }

  .rotateAdvice {
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255,215,107,.12);
    border: 1px solid rgba(255,215,107,.25);
    color: #fff2a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
  }

  .mobileStepActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobileStepActions button {
    min-height: 44px;
    border-radius: 14px;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1;
  }

  .howToPlayPanel,
  .improvedHowToPanel,
  .pausePanel,
  .resultPanel {
    max-height: calc(100dvh - 18px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Portrait mobile menus: simple stacked flow, no crammed combined screen */
@media (pointer: coarse) and (orientation: portrait) {
  .mobileStepPanel {
    width: min(94vw, 430px) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 12px 10px 10px !important;
    gap: 8px !important;
  }

  .mobileStepPanel h2 {
    font-size: clamp(25px, 7vw, 36px) !important;
  }

  .mobilePlayerCard {
    min-height: 56px;
  }

  .mobileVenueCard {
    min-height: 50px;
  }

  .mobileVenueCard span {
    font-size: 13px;
  }

  .mobileSelectedVenue span {
    font-size: 10px;
  }

  .mobileStepActions button {
    min-height: 40px;
    font-size: 13px;
  }
}

/* Landscape mobile menus: use space deliberately */
@media (pointer: coarse) and (orientation: landscape) {
  .mobileStepPanel {
    width: min(86vw, 760px) !important;
    max-width: min(86vw, 760px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 9px 12px !important;
    gap: 7px !important;
  }

  .mobileStepPanel h2 {
    font-size: clamp(20px, 4vw, 30px) !important;
  }

  .mobileCharacterStep {
    width: min(70vw, 620px) !important;
  }

  .mobilePlayerCards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobilePlayerCard {
    min-height: 76px;
  }

  .mobileVenueStep {
    width: min(86vw, 820px) !important;
    grid-template-rows: auto 1fr auto auto !important;
  }

  .mobileVenueCards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .mobileVenueCard {
    min-height: 76px;
  }

  .mobileVenueCard span {
    font-size: clamp(10px, 1.7vw, 14px);
  }

  .mobileSelectedVenue {
    width: min(520px, 100%);
    justify-self: center;
  }

  .mobileStepActions {
    width: min(340px, 60%);
    justify-self: center;
  }

  .mobileStepActions button {
    min-height: 34px;
    font-size: 12px;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .mobileStepPanel {
    padding: 6px 10px !important;
    gap: 5px !important;
  }

  .mobileStepCount {
    display: none;
  }

  .mobileStepPanel h2 {
    font-size: clamp(17px, 3.2vw, 23px) !important;
  }

  .mobilePlayerCard {
    min-height: 58px;
  }

  .mobileVenueCard {
    min-height: 54px;
  }

  .mobileSelectedVenue span {
    display: none;
  }

  .mobileStepActions button {
    min-height: 28px;
    height: 28px;
  }
}

/* Mobile gameplay HUD: compact, text-first, with maximum playfield */
@media (pointer: coarse), (max-width: 900px) {
  #topHud .label {
    font-family: Arial, Helvetica, sans-serif !important;
  }

  .fightBarTop span,
  .fightBarTop strong,
  #healthText,
  #specialName {
    font-family: Arial, Helvetica, sans-serif !important;
  }

  #combatHud {
    opacity: .96;
  }

  .fightHealthBox,
  .fightSpecialBox {
    box-shadow: 0 4px 12px rgba(0,0,0,.32) !important;
  }
}


/* ===== User requested mobile UI fix pass ===== */

/* Start Gig screen: fit fully in mobile landscape without changing desktop */
@media (pointer: coarse) and (orientation: landscape) {
  .expertStartPanel {
    width: min(80vw, 620px) !important;
    max-width: min(80vw, 620px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow-y: auto !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo {
    max-height: 34vh !important;
    width: auto !important;
    max-width: min(70vw, 520px) !important;
    object-fit: contain !important;
  }

  .expertStartPanel .expertMenuActions {
    gap: 7px !important;
    margin: 4px 0 !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    min-height: 34px !important;
    padding: 7px 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .leaderboardBox,
  .expertStartPanel .arcadeLeaderboard {
    margin-top: 4px !important;
    max-height: 72px !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 9px !important;
    margin-bottom: 3px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 18px !important;
    padding: 2px 5px !important;
  }
}

/* Mobile step buttons: force readable contrast. */
@media (pointer: coarse), (max-width: 900px) {
  .mobileStepActions button,
  #mobilePlayerNextBtn,
  #mobileVenuePlayBtn {
    color: #081018 !important;
    background: linear-gradient(180deg, #fff2a8, #ffcf42 55%, #f09b20) !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 7px 16px rgba(0,0,0,.32) !important;
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
  }

  .mobileStepActions button.secondary,
  #mobilePlayerBackBtn,
  #mobileVenueBackBtn {
    color: #f3f7ff !important;
    background: linear-gradient(180deg, #24314e, #111827 62%, #070a12) !important;
    border: 1px solid rgba(143, 252, 255, .30) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.55) !important;
  }

  .mobileVenueCard small {
    display: block !important;
    width: 100%;
    margin-top: 5px;
    color: rgba(255, 244, 203, .92);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
  }

  .mobileVenueCard.selected small {
    color: #fff8dc;
  }

  .mobileSelectedVenue {
    display: none !important;
  }
}

/* Venue details live on the actual cards in both mobile orientations. */
@media (pointer: coarse) and (orientation: portrait) {
  .mobileVenueCard {
    min-height: 58px !important;
    padding: 6px 6px !important;
  }

  .mobileVenueCard span {
    font-size: 12px !important;
  }

  .mobileVenueCard small {
    font-size: 8.5px !important;
    line-height: 1.08 !important;
    margin-top: 3px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  .mobileVenueStep {
    width: min(86vw, 800px) !important;
  }

  .mobileVenueCards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .mobileVenueCard span {
    font-size: clamp(9px, 1.35vw, 12px) !important;
    line-height: 1.04 !important;
  }

  .mobileVenueCard small {
    display: block !important;
    font-size: clamp(6.6px, .9vw, 8.5px) !important;
    line-height: 1.05 !important;
    margin-top: 4px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .mobileVenueCard {
    min-height: 56px !important;
    padding: 4px 4px !important;
  }

  .mobileVenueCard small {
    display: block !important;
    font-size: 6px !important;
    line-height: 1.0 !important;
    margin-top: 2px !important;
  }
}

/* Health and special meters: much smaller in mobile portrait and landscape. */
@media (pointer: coarse), (max-width: 900px) {
  #combatHud {
    top: 32px !important;
    left: max(5px, env(safe-area-inset-left)) !important;
    transform: none !important;
    max-width: 130px !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 128px !important;
    max-width: 128px !important;
    gap: 3px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 3px 5px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
  }

  .fightBarTop {
    margin-bottom: 2px !important;
    gap: 3px !important;
  }

  .fightBarTop span,
  #specialName {
    font-size: 7px !important;
    letter-spacing: .2px !important;
    line-height: 1 !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 5px !important;
    min-height: 5px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #combatHud {
    top: 36px !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 120px !important;
    max-width: 120px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #combatHud {
    top: 30px !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 118px !important;
    max-width: 118px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 2px 5px !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 4px !important;
    min-height: 4px !important;
  }
}


/* ===== Mobile health special short and timer line fix ===== */

/* Make the health/special HUD much shorter on all mobile layouts. */
@media (pointer: coarse), (max-width: 900px) {
  #combatHud {
    width: auto !important;
    max-width: 96px !important;
    top: 34px !important;
    left: max(5px, env(safe-area-inset-left)) !important;
    z-index: 6 !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 96px !important;
    max-width: 96px !important;
    gap: 2px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    width: 96px !important;
    max-width: 96px !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
    border-radius: 7px !important;
  }

  .fightBarTop {
    margin-bottom: 1px !important;
    gap: 2px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 58px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 6px !important;
    letter-spacing: 0 !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 6px !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    width: 100% !important;
    height: 4px !important;
    min-height: 4px !important;
  }
}

/* Landscape phones: even tighter HUD and fix the line crossing the timer. */
@media (pointer: coarse) and (orientation: landscape) {
  #topHud {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  #topHud::before,
  #topHud::after,
  .hudZoneCenter::before,
  .hudZoneCenter::after,
  .hudTimerBox::before,
  .hudTimerBox::after {
    z-index: -1 !important;
    pointer-events: none !important;
  }

  .hudZoneCenter {
    position: relative !important;
    z-index: 22 !important;
    isolation: isolate !important;
  }

  .hudTimerBox {
    position: relative !important;
    z-index: 25 !important;
    background: linear-gradient(180deg, rgba(9, 10, 18, .98), rgba(0, 0, 0, .92)) !important;
    box-shadow:
      0 0 0 1px rgba(255, 215, 107, .32),
      0 0 12px rgba(0, 0, 0, .75) !important;
  }

  #timer {
    position: relative !important;
    z-index: 30 !important;
  }

  #combatHud {
    top: 30px !important;
    max-width: 82px !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 82px !important;
    max-width: 82px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 2px 3px !important;
    border-radius: 6px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 48px !important;
    font-size: 5.5px !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 5.5px !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 3px !important;
    min-height: 3px !important;
  }
}

/* Portrait phones: short enough to avoid covering too much of the playfield. */
@media (pointer: coarse) and (orientation: portrait) {
  #combatHud {
    max-width: 90px !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 90px !important;
    max-width: 90px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 52px !important;
  }
}


/* ===== Mobile health special medium size correction ===== */
/* Previous pass made these too small. This restores readable mobile meters without making them huge. */
@media (pointer: coarse), (max-width: 900px) {
  #combatHud {
    max-width: 138px !important;
    top: 36px !important;
    left: max(6px, env(safe-area-inset-left)) !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 138px !important;
    max-width: 138px !important;
    gap: 4px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    width: 138px !important;
    max-width: 138px !important;
    padding: 4px 6px !important;
    border-radius: 9px !important;
  }

  .fightBarTop {
    margin-bottom: 3px !important;
    gap: 4px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 88px !important;
    font-size: 8px !important;
    letter-spacing: .25px !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 8px !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 6px !important;
    min-height: 6px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #combatHud {
    max-width: 124px !important;
    top: 32px !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 124px !important;
    max-width: 124px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 3px 5px !important;
    border-radius: 8px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 76px !important;
    font-size: 7px !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 7px !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 5px !important;
    min-height: 5px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #combatHud {
    max-width: 142px !important;
    top: 38px !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 142px !important;
    max-width: 142px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 90px !important;
    font-size: 8px !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 6px !important;
    min-height: 6px !important;
  }
}


/* ===== Mobile readability start landscape howto final fix ===== */

/* Health/Special: readable text without going back to huge bars. */
@media (pointer: coarse), (max-width: 900px) {
  #combatHud {
    max-width: 172px !important;
    width: 172px !important;
    top: 38px !important;
    left: max(6px, env(safe-area-inset-left)) !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 172px !important;
    max-width: 172px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 5px 7px !important;
    border-radius: 10px !important;
  }

  .fightBarTop {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 118px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .25px !important;
    line-height: 1.05 !important;
  }

  .fightBarTop strong,
  #healthText {
    flex: 0 0 auto !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 7px !important;
    min-height: 7px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #combatHud {
    max-width: 156px !important;
    width: 156px !important;
    top: 32px !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 156px !important;
    max-width: 156px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 4px 6px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 104px !important;
    font-size: 8px !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 8px !important;
  }
}

/* Start Gig landscape: fit the whole menu cleanly instead of clipping content. */
@media (pointer: coarse) and (orientation: landscape) {
  #overlay {
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .expertStartPanel {
    width: min(68vw, 560px) !important;
    max-width: min(68vw, 560px) !important;
    max-height: calc(100dvh - 10px) !important;
    overflow-y: auto !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
    gap: 4px !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 28vh !important;
    width: auto !important;
    max-width: min(58vw, 430px) !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .expertStartPanel .expertMenuActions {
    margin: 3px 0 !important;
    gap: 6px !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 5px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .smoothModeBtn {
    min-height: 24px !important;
    height: 24px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 auto !important;
  }

  .expertStartPanel .leaderboardBox,
  .expertStartPanel .arcadeLeaderboard {
    width: min(94%, 420px) !important;
    margin: 3px auto 0 !important;
    padding: 5px 7px !important;
    max-height: 74px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 8.5px !important;
    line-height: 1 !important;
    margin: 0 0 3px !important;
    letter-spacing: 1px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 17px !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
    grid-template-columns: 18px 34px minmax(72px, 1fr) auto !important;
  }

  .expertStartPanel .leaderboardRank,
  .expertStartPanel .leaderboardName,
  .expertStartPanel .leaderboardScore {
    font-size: 9px !important;
  }

  .expertStartPanel .leaderboardChar {
    font-size: 7px !important;
  }
}

/* Very short landscape phones: reduce start menu even further. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .expertStartPanel {
    width: min(62vw, 500px) !important;
    max-width: min(62vw, 500px) !important;
    padding: 5px 8px !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 23vh !important;
    max-width: min(50vw, 360px) !important;
  }

  .expertStartPanel .leaderboardBox,
  .expertStartPanel .arcadeLeaderboard {
    max-height: 56px !important;
  }

  .expertStartPanel .leaderboardRow:nth-child(n+3) {
    display: none !important;
  }
}

/* How to Play landscape: use a clean two-column compact panel like portrait quality, not a tall cramped stack. */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(92vw, 920px) !important;
    max-width: min(92vw, 920px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow-y: auto !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "title title"
      "intro intro"
      "goal controls"
      "tips tips"
      "actions actions" !important;
    column-gap: 10px !important;
    row-gap: 7px !important;
    align-items: start !important;
    -webkit-overflow-scrolling: touch;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    font-size: clamp(22px, 4vw, 34px) !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .howIntro {
    grid-area: intro !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow {
    grid-area: actions !important;
    width: min(330px, 60%) !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  .howSection {
    padding: 8px 9px !important;
    border-radius: 12px !important;
  }

  .howLabel {
    font-size: 9px !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
  }

  .howBulletList {
    gap: 5px !important;
  }

  .howBulletItem {
    padding: 5px 6px !important;
    border-radius: 8px !important;
  }

  .howBulletItem b,
  .controlRow b {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i,
  .controlRow,
  .keyCaps em {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .keyCaps kbd {
    min-width: 18px !important;
    padding: 3px 4px !important;
    font-size: 8px !important;
  }

  #howBackBtn {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .howToPlayPanel,
  .improvedHowToPanel {
    padding: 7px 9px !important;
    row-gap: 5px !important;
    column-gap: 7px !important;
  }
}


/* ===== Mobile landscape final menu howto timesup placement fix ===== */

/* Better Menu/Pause placement on mobile gameplay HUD */
@media (pointer: coarse), (max-width: 900px) {
  #topHud {
    display: grid !important;
    grid-template-columns: minmax(84px, auto) 1fr minmax(92px, auto) !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .hudZoneCenter {
    justify-self: center !important;
  }

  .hudActionsLeft,
  .hudActions {
    display: flex !important;
    flex-direction: row !important;
    gap: 3px !important;
  }

  #quitBtn,
  #pauseBtn {
    min-width: 38px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #topHud {
    grid-template-columns: 82px 1fr 104px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: max(1px, env(safe-area-inset-top)) 5px 1px !important;
  }

  #quitBtn,
  #pauseBtn {
    min-width: 37px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 3px 5px !important;
    font-size: 8.5px !important;
  }

  .hudTimerBox {
    min-width: 54px !important;
    padding: 2px 6px !important;
  }

  .hudStatsGroup {
    gap: 3px !important;
  }

  .hudCard {
    min-width: 45px !important;
    padding: 2px 5px !important;
  }
}

/* Start Gig screen: fit full title/buttons/leaderboard in mobile landscape */
@media (pointer: coarse) and (orientation: landscape) {
  .expertStartPanel {
    width: min(72vw, 620px) !important;
    max-width: min(72vw, 620px) !important;
    max-height: calc(100dvh - 8px) !important;
    padding: 5px 9px !important;
    gap: 4px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(0, auto) auto auto auto !important;
    align-content: center !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 22vh !important;
    max-width: min(52vw, 380px) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    min-width: 118px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
  }

  .expertStartPanel .smoothModeBtn {
    min-height: 22px !important;
    height: 22px !important;
    padding: 3px 8px !important;
    font-size: 8.5px !important;
    border-radius: 999px !important;
  }

  .expertStartPanel .leaderboardRow {
    display: grid !important;
    min-height: 16px !important;
    height: 16px !important;
    padding: 1px 5px !important;
    grid-template-columns: 18px 34px minmax(78px, 1fr) auto !important;
    align-items: center !important;
  }
}

/* How to Play landscape: no scrolling required, all content visible */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(94vw, 980px) !important;
    max-width: min(94vw, 980px) !important;
    max-height: calc(100dvh - 8px) !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-areas:
      "title title title"
      "goal controls tips"
      "actions actions actions" !important;
    column-gap: 6px !important;
    row-gap: 5px !important;
    align-items: stretch !important;
  }

  .howTipsSection,
  .howBonusSection,
  .howEncoreSection {
    grid-area: tips !important;
  }

  .howBulletItem {
    padding: 3px 5px !important;
    border-radius: 7px !important;
    gap: 1px !important;
  }

  .howBulletItem i {
    font-size: 7.4px !important;
    line-height: 1.08 !important;
  }

  .controlRow {
    padding: 3px 5px !important;
    border-radius: 7px !important;
    gap: 4px !important;
    font-size: 7.6px !important;
    line-height: 1.05 !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow {
    grid-area: actions !important;
    width: min(260px, 48%) !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  #howBackBtn,
  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button {
    min-height: 26px !important;
    height: 26px !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
    border-radius: 9px !important;
  }
}

/* Times Up/results landscape: fit all primary content without clipping */
@media (pointer: coarse) and (orientation: landscape) {

  .resultPanel #initialsInput {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 14px !important;
    padding: 3px 6px !important;
  }

  .resultPanel #saveInitialsBtn {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {

  .resultPanel .timesUpBanner {
    font-size: clamp(16px, 3.5vw, 26px) !important;
  }

  .resultPanel h2 {
    font-size: clamp(13px, 2.5vw, 20px) !important;
  }

  .resultStatValue {
    font-size: clamp(12px, 2.5vw, 18px) !important;
  }

  .resultScoreCard strong {
    font-size: clamp(15px, 3vw, 22px) !important;
  }

  .resultPanel .highScoreEntry {
    padding: 4px 6px !important;
  }

  .resultPanel #initialsInput,
  .resultPanel #saveInitialsBtn {
    height: 24px !important;
    min-height: 24px !important;
  }

  .resultPanel #restartBtn,
  .resultPanel #menuBtn {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 10px !important;
  }
}


/* ===== MOBILE MASTER LAYOUT OPTIMIZATION PASS ===== */
/* Mobile-only overrides. Desktop layout is intentionally untouched. */

@media (pointer: coarse), (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  #gameShell {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    border: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) 58px !important;
  }

  #canvasWrap {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  canvas {
    width: 100vw !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  #overlay {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
  }

  #overlay .panel {
    box-sizing: border-box !important;
  }

  /* Mobile gameplay HUD */
  #topHud {
    position: relative !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: 84px 1fr 112px !important;
    align-items: center !important;
    gap: 4px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: max(2px, env(safe-area-inset-top)) 6px 2px !important;
    overflow: visible !important;
  }

  .hudZoneLeft { justify-self: start !important; }
  .hudZoneCenter { justify-self: center !important; z-index: 34 !important; }
  .hudZoneRight { justify-self: end !important; }

  .hudActions,
  .hudActionsLeft {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    align-items: center !important;
  }

  #quitBtn,
  #pauseBtn {
    min-width: 38px !important;
    width: 38px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 3px 4px !important;
    border-radius: 8px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hudTimerBox {
    position: relative !important;
    z-index: 40 !important;
    min-width: 58px !important;
    padding: 2px 6px !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(8,9,18,.98), rgba(0,0,0,.94)) !important;
    box-shadow: 0 0 0 1px rgba(255,215,107,.32), 0 0 10px rgba(0,0,0,.65) !important;
  }

  .hudTimerBox::before,
  .hudTimerBox::after,
  .hudZoneCenter::before,
  .hudZoneCenter::after {
    z-index: -1 !important;
  }

  #timer {
    position: relative !important;
    z-index: 42 !important;
  }

  .hudCard {
    min-width: 48px !important;
    padding: 2px 5px !important;
    border-radius: 9px !important;
  }

  .hudStatsGroup {
    gap: 4px !important;
  }

  .hudTimerBox .label,
  .hudCard .label,
  .label {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .5px !important;
  }

  #timer,
  #score,
  #combo,
  .hudTimerBox strong,
  .hudCard strong {
    font-size: 16px !important;
    line-height: .9 !important;
    text-shadow: none !important;
  }

  /* Health/Special: readable but compact */
  #combatHud {
    position: absolute !important;
    top: 38px !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    width: 166px !important;
    max-width: 166px !important;
    z-index: 7 !important;
    pointer-events: none !important;
  }

  .fightHudStack,
  .detachedFightHudStack {
    width: 166px !important;
    max-width: 166px !important;
    gap: 4px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    width: 166px !important;
    max-width: 166px !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .fightBarTop {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 3px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 112px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: .15px !important;
  }

  .fightBarTop strong,
  #healthText {
    flex: 0 0 auto !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    width: 100% !important;
    height: 7px !important;
    min-height: 7px !important;
    border-radius: 999px !important;
  }

  .healthWarning {
    display: none !important;
  }

  /* Touch controls */
  #controls {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 5px max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  #controls button {
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 5px 4px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
  }

  /* Generic mobile panel behavior */
  .expertStartPanel,
  .mobileStepPanel,
  .howToPlayPanel,
  .improvedHowToPanel,
  .pausePanel,
  .resultPanel {
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .mobileStepActions button,
  .btnRow button {
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
    text-shadow: none !important;
  }

  .mobileStepActions button:not(.secondary),
  #mobilePlayerNextBtn,
  #mobileVenuePlayBtn,
  #restartBtn,
  #howToStartBtn {
    color: #081018 !important;
    background: linear-gradient(180deg, #fff2a8, #ffcf42 56%, #f09b20) !important;
  }

  .mobileStepActions button.secondary,
  #mobilePlayerBackBtn,
  #mobileVenueBackBtn,
  #menuBtn,
  #howToBackBtn,
  .secondaryMenuBtn {
    color: #f5f8ff !important;
    background: linear-gradient(180deg, #263556, #111827 62%, #070a12) !important;
  }
}

/* PORTRAIT: use stacked/scrollable menus and two-row controls */
@media (pointer: coarse) and (orientation: portrait) {
  #gameShell {
    grid-template-rows: 34px minmax(0, 1fr) 116px !important;
  }

  #controls {
    grid-template-columns: repeat(3, 1fr) !important;
    height: 116px !important;
    min-height: 116px !important;
  }

  #controls button {
    min-height: 50px !important;
    height: 50px !important;
  }

  #leftBtn { order: 1; }
  #rightBtn { order: 2; }
  #duckBtn { order: 3; }
  #jumpBtn { order: 4; }
  #attackBtn { order: 5; }
  #specialBtn { order: 6; }

  #combatHud {
    top: 40px !important;
    width: 166px !important;
    max-width: 166px !important;
  }

  /* Start menu portrait */
  .expertStartPanel {
    width: min(94vw, 430px) !important;
    max-width: min(94vw, 430px) !important;
    padding: 12px 12px !important;
    display: grid !important;
    gap: 9px !important;
    align-content: center !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-width: 88vw !important;
    max-height: 25vh !important;
    object-fit: contain !important;
  }

  .expertStartPanel .expertMenuActions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: min(86vw, 320px) !important;
    justify-self: center !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .expertStartPanel .leaderboardBox {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Mobile player/venue portrait */
  .mobileStepPanel {
    width: min(94vw, 430px) !important;
    max-width: min(94vw, 430px) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 12px 10px 10px !important;
    gap: 8px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  }

  .mobileStepPanel h2 {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  .mobileStepCount {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }

  .mobilePlayerCards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    align-content: center !important;
  }

  .mobilePlayerCard {
    min-height: 58px !important;
    padding: 8px !important;
  }

  .mobilePlayerCard span {
    font-size: 16px !important;
  }

  .mobilePlayerCard b {
    font-size: 10px !important;
  }

  .mobileVenueCards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-content: center !important;
  }

  .mobileVenueCard {
    min-height: 54px !important;
    padding: 7px 8px !important;
  }

  .mobileVenueCard span {
    font-size: 13px !important;
  }

  .mobileVenueCard small {
    display: block !important;
    font-size: 8.5px !important;
    line-height: 1.08 !important;
    margin-top: 3px !important;
  }

  .rotateAdvice {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  .mobileStepActions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mobileStepActions button {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* How to Play portrait stays readable; scroll only if necessary */
  .howToPlayPanel,
  .improvedHowToPanel,
  .resultPanel,
  .pausePanel {
    width: min(94vw, 460px) !important;
    max-width: min(94vw, 460px) !important;
    max-height: calc(100dvh - 18px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2,
  .resultPanel h2,
  .pausePanel h2 {
    font-size: clamp(26px, 7vw, 42px) !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
  }

  .resultStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .resultScoreSummary {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
}

/* Short portrait phones: compact further but still show full flow */
@media (pointer: coarse) and (orientation: portrait) and (max-height: 720px) {
  .mobileStepPanel {
    padding: 9px 9px 8px !important;
    gap: 5px !important;
  }

  .mobileStepPanel h2 {
    font-size: clamp(20px, 6vw, 30px) !important;
  }

  .mobileStepCount {
    display: none !important;
  }

  .mobilePlayerCard {
    min-height: 48px !important;
  }

  .mobileVenueCard {
    min-height: 44px !important;
  }

  .mobileVenueCard small {
    display: none !important;
  }

  .rotateAdvice {
    display: none !important;
  }

  .mobileStepActions button {
    min-height: 34px !important;
  }
}

/* LANDSCAPE: no scrolling menus; everything fits in the viewport */
@media (pointer: coarse) and (orientation: landscape) {
  #gameShell {
    grid-template-rows: 28px minmax(0, 1fr) 48px !important;
  }

  #topHud {
    grid-template-columns: 82px 1fr 108px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: max(1px, env(safe-area-inset-top)) 5px 1px !important;
  }

  #quitBtn,
  #pauseBtn {
    width: 38px !important;
    min-width: 38px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 8px !important;
  }

  #timer,
  #score,
  #combo,
  .hudTimerBox strong,
  .hudCard strong {
    font-size: 14px !important;
  }

  #combatHud {
    top: 31px !important;
    width: 154px !important;
    max-width: 154px !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 154px !important;
    max-width: 154px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 3px 6px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 98px !important;
    font-size: 7.5px !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 7.5px !important;
  }

  .fightHealthMeter,
  .fightSpecialMeter,
  .meter {
    height: 6px !important;
    min-height: 6px !important;
  }

  #controls {
    grid-template-columns: .85fr .85fr .85fr 1.05fr 1.1fr 1.25fr !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
    gap: 5px !important;
  }

  #controls button {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 10.5px !important;
    border-radius: 11px !important;
  }

  /* Start screen landscape */
  .expertStartPanel {
    width: min(70vw, 620px) !important;
    max-width: min(70vw, 620px) !important;
    max-height: calc(100dvh - 8px) !important;
    overflow: hidden !important;
    padding: 5px 9px !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-rows: minmax(0, auto) auto auto auto !important;
    gap: 4px !important;
    align-content: center !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 22vh !important;
    max-width: min(52vw, 400px) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .expertStartPanel .expertMenuActions {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 2px 0 !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    min-width: 116px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
  }

  .expertStartPanel .mobileInstallHint {
    display: none !important;
  }

  .expertStartPanel .smoothModeBtn {
    min-height: 22px !important;
    height: 22px !important;
    padding: 3px 8px !important;
    font-size: 8.5px !important;
    margin: 0 auto !important;
  }

  .expertStartPanel .leaderboardBox {
    width: min(96%, 460px) !important;
    margin: 2px auto 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 8px !important;
    line-height: 1 !important;
    margin: 0 0 2px !important;
  }

  .expertStartPanel .leaderboardRows {
    gap: 2px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 16px !important;
    height: 16px !important;
    padding: 1px 5px !important;
    grid-template-columns: 18px 34px minmax(78px, 1fr) auto !important;
    align-items: center !important;
  }

  .expertStartPanel .leaderboardRank,
  .expertStartPanel .leaderboardName,
  .expertStartPanel .leaderboardScore {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .leaderboardChar {
    font-size: 6.8px !important;
    line-height: 1 !important;
  }

  /* Player/venue mobile split screens landscape */
  .mobileStepPanel {
    max-height: calc(100dvh - 8px) !important;
    overflow: hidden !important;
    padding: 7px 10px !important;
    border-radius: 16px !important;
    gap: 6px !important;
  }

  .mobileStepTop {
    gap: 2px !important;
  }

  .mobileStepCount {
    font-size: 8px !important;
    padding: 2px 7px !important;
  }

  .mobileStepPanel h2 {
    font-size: clamp(18px, 3.4vw, 26px) !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .mobileCharacterStep {
    width: min(68vw, 620px) !important;
    grid-template-rows: auto 1fr auto !important;
  }

  .mobilePlayerCards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .mobilePlayerCard {
    min-height: 74px !important;
    padding: 8px 6px !important;
  }

  .mobilePlayerCard span {
    font-size: 15px !important;
  }

  .mobilePlayerCard b {
    font-size: 9px !important;
  }

  .mobileVenueStep {
    width: min(88vw, 860px) !important;
    grid-template-rows: auto 1fr auto !important;
  }

  .mobileVenueCards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-content: center !important;
  }

  .mobileVenueCard {
    min-height: 76px !important;
    padding: 6px 5px !important;
  }

  .mobileVenueCard span {
    font-size: clamp(9px, 1.4vw, 12px) !important;
    line-height: 1.04 !important;
  }

  .mobileVenueCard small {
    display: block !important;
    font-size: clamp(6.2px, .9vw, 8px) !important;
    line-height: 1.04 !important;
    margin-top: 4px !important;
  }

  .rotateAdvice {
    display: none !important;
  }

  .mobileStepActions {
    width: min(330px, 58%) !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mobileStepActions button {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }

  /* How To Play landscape - no scrolling, all content visible */
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(94vw, 980px) !important;
    max-width: min(94vw, 980px) !important;
    max-height: calc(100dvh - 8px) !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-areas:
      "title title title"
      "goal controls controls"
      "actions actions actions" !important;
    column-gap: 6px !important;
    row-gap: 5px !important;
    align-items: stretch !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    font-size: clamp(16px, 3vw, 24px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .howSection {
    padding: 5px 6px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
  }

  .howLabel {
    display: block !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    margin: 0 0 4px !important;
    letter-spacing: .8px !important;
  }

  .howBulletList,
  .howControlRows {
    gap: 3px !important;
  }

  .howBulletItem,
  .controlRow {
    padding: 3px 5px !important;
    border-radius: 7px !important;
  }

  .howBulletItem b,
  .controlRow b {
    font-size: 8.2px !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i,
  .controlRow {
    font-size: 7.4px !important;
    line-height: 1.08 !important;
  }

  .keyCaps {
    gap: 2px !important;
  }

  .keyCaps kbd {
    min-width: 14px !important;
    padding: 2px 3px !important;
    font-size: 6.5px !important;
    border-radius: 4px !important;
  }

  .keyCaps em {
    font-size: 6.5px !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    grid-area: actions !important;
    width: min(360px, 54%) !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    border-radius: 9px !important;
  }

  /* Pause landscape */
  .pausePanel {
    width: min(72vw, 560px) !important;
    max-width: min(72vw, 560px) !important;
    max-height: calc(100dvh - 8px) !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  .pausePanel h2 {
    font-size: clamp(22px, 4vw, 34px) !important;
    line-height: 1 !important;
    margin: 0 0 4px !important;
  }

  .pausePanel p {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
  }

  .pausePanel .btnRow {
    width: min(360px, 70%) !important;
    margin: 0 auto !important;
  }

  .pausePanel .btnRow button {
    min-height: 30px !important;
    font-size: 11px !important;
  }

  /* Times Up/results landscape - fit primary content */
  .resultPanel {
    width: min(94vw, 980px) !important;
    max-width: min(94vw, 980px) !important;
    max-height: calc(100dvh - 8px) !important;
    overflow: hidden !important;
    padding: 6px 9px !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "banner banner"
      "rank rank"
      "entry entry"
      "stats scores"
      "actions actions" !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    align-items: stretch !important;
  }

  .resultPanel .timesUpBanner {
    grid-area: banner !important;
    font-size: clamp(18px, 4vw, 32px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .resultPanel h2 {
    grid-area: rank !important;
    font-size: clamp(16px, 3vw, 24px) !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .resultPanel .highScoreEntry {
    grid-area: entry !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  .resultPanel .highScoreEntry p,
  .resultPanel .newBestRun,
  .resultPanel .highScoreEntry label {
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 0 3px !important;
  }

  .resultPanel .initialsRow {
    gap: 5px !important;
  }

  .resultPanel #initialsInput,
  .resultPanel #saveInitialsBtn {
    height: 28px !important;
    min-height: 28px !important;
  }

  .resultPanel #initialsInput {
    font-size: 14px !important;
    padding: 3px 6px !important;
  }

  .resultPanel #saveInitialsBtn {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  .resultStatsGrid {
    grid-area: stats !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 !important;
  }

  .resultStatCard {
    min-height: 44px !important;
    padding: 5px 6px !important;
    border-radius: 10px !important;
  }

  .resultStatLabel {
    font-size: 7.5px !important;
    line-height: 1 !important;
    letter-spacing: .5px !important;
  }

  .resultStatValue {
    font-size: clamp(14px, 3vw, 22px) !important;
    line-height: 1 !important;
  }

  .resultScoreSummary {
    grid-area: scores !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
  }

  .resultScoreCard {
    min-height: 44px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
  }

  .resultScoreCard span {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .resultScoreCard strong {
    font-size: clamp(17px, 4vw, 28px) !important;
    line-height: 1 !important;
  }

  #leaderboardMount {
    display: none !important;
  }

  .resultPanel .btnRow {
    grid-area: actions !important;
    width: min(360px, 58%) !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .resultPanel #restartBtn,
  .resultPanel #menuBtn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
}

/* Very short landscape phones: ultra compact */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .expertStartPanel {
    width: min(66vw, 560px) !important;
    padding: 4px 8px !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 18vh !important;
    max-width: min(48vw, 340px) !important;
  }

  .expertStartPanel .leaderboardBox {
    padding: 4px 6px !important;
  }

  .expertStartPanel .leaderboardRow {
    height: 14px !important;
    min-height: 14px !important;
  }

  .mobileStepPanel {
    padding: 5px 8px !important;
    gap: 4px !important;
  }

  .mobileStepCount {
    display: none !important;
  }

  .mobileStepPanel h2 {
    font-size: clamp(15px, 2.9vw, 22px) !important;
  }

  .mobilePlayerCard {
    min-height: 52px !important;
  }

  .mobileVenueCard {
    min-height: 52px !important;
  }

  .mobileVenueCard small {
    font-size: 6px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
  }

  .mobileStepActions button {
    min-height: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }

  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    padding: 5px 7px !important;
    row-gap: 3px !important;
    column-gap: 5px !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    font-size: clamp(14px, 2.6vw, 20px) !important;
  }

  .howBulletItem i {
    display: none !important;
  }

  .controlRow {
    padding: 2px 4px !important;
  }

  .resultPanel {
    padding: 5px 8px !important;
    row-gap: 3px !important;
  }

  .resultPanel .timesUpBanner {
    font-size: clamp(15px, 3vw, 24px) !important;
  }

  .resultPanel h2 {
    font-size: clamp(13px, 2.3vw, 19px) !important;
  }

  .resultStatCard,
  .resultScoreCard {
    min-height: 36px !important;
    padding: 4px 5px !important;
  }

  .resultStatValue,
  .resultScoreCard strong {
    font-size: clamp(12px, 2.6vw, 19px) !important;
  }

  .resultPanel #initialsInput,
  .resultPanel #saveInitialsBtn,
  .resultPanel #restartBtn,
  .resultPanel #menuBtn {
    height: 24px !important;
    min-height: 24px !important;
  }
}


/* ===== Mobile landscape start results controls portrait hud refinement ===== */

/* Portrait gameplay: move Health/Special below the top button row so it is not covered by Menu/Pause. */
@media (pointer: coarse) and (orientation: portrait) {
  #combatHud {
    top: 74px !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    width: 160px !important;
    max-width: 160px !important;
  }

  .fightHudStack,
  .detachedFightHudStack,
  .fightHealthBox,
  .fightSpecialBox {
    width: 160px !important;
    max-width: 160px !important;
  }

  .fightHealthBox,
  .fightSpecialBox {
    padding: 4px 7px !important;
  }

  .fightBarTop span,
  #specialName {
    max-width: 106px !important;
    font-size: 8px !important;
  }

  .fightBarTop strong,
  #healthText {
    font-size: 8px !important;
  }
}

/* Start Gig landscape redesign: wider, cleaner, leaderboard readable with all 3 rows. */
@media (pointer: coarse) and (orientation: landscape) {
  .expertStartPanel {
    width: min(86vw, 820px) !important;
    max-width: min(86vw, 820px) !important;
    max-height: calc(100dvh - 10px) !important;
    padding: 7px 12px !important;
    gap: 6px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .88fr) minmax(300px, 1.12fr) !important;
    grid-template-areas:
      "logo board"
      "actions board"
      "smooth board" !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    grid-area: logo !important;
    max-height: 38vh !important;
    max-width: min(34vw, 330px) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  .expertStartPanel .expertMenuActions {
    grid-area: actions !important;
    width: min(310px, 100%) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
  }

  .expertStartPanel .smoothModeBtn {
    grid-area: smooth !important;
    width: min(260px, 100%) !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 4px 9px !important;
    font-size: 9.5px !important;
    margin: 0 !important;
  }

  .expertStartPanel .leaderboardBox {
    grid-area: board !important;
    width: min(390px, 100%) !important;
    max-width: 390px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    letter-spacing: 1.2px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 30px !important;
    height: 30px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
    grid-template-columns: 24px 42px minmax(112px, 1fr) auto !important;
    gap: 7px !important;
  }

  .expertStartPanel .leaderboardRank {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .leaderboardName {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .leaderboardChar {
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .expertStartPanel .leaderboardScore {
    font-size: 12px !important;
    line-height: 1 !important;
  }
}

/* Times Up landscape: center it and prevent left-edge overflow. */
@media (pointer: coarse) and (orientation: landscape) {
  .resultPanel {
    width: min(88vw, 900px) !important;
    max-width: min(88vw, 900px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    align-self: center !important;
    transform: translateX(0) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .resultStatsGrid,
  .resultScoreSummary {
    min-width: 0 !important;
  }

  .resultStatCard,
  .resultScoreCard {
    min-width: 0 !important;
  }

  .resultPanel .btnRow {
    width: min(340px, 70%) !important;
  }
}

/* Landscape controls: easier thumb layout, bigger action buttons, split zones. */
@media (pointer: coarse) and (orientation: landscape) {
  #gameShell {
    grid-template-rows: 28px minmax(0, 1fr) 62px !important;
  }

  #controls {
    height: 62px !important;
    min-height: 62px !important;
    padding: 6px max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: 1.1fr 1.1fr .9fr minmax(18px, .36fr) 1.28fr 1.28fr 1.42fr !important;
    gap: 7px !important;
    align-items: center !important;
  }

  #controls::before {
    content: "" !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: block !important;
  }

  #leftBtn {
    grid-column: 1 !important;
  }

  #rightBtn {
    grid-column: 2 !important;
  }

  #duckBtn {
    grid-column: 3 !important;
  }

  #jumpBtn {
    grid-column: 5 !important;
  }

  #attackBtn {
    grid-column: 6 !important;
  }

  #specialBtn {
    grid-column: 7 !important;
  }

  #controls button {
    height: 50px !important;
    min-height: 50px !important;
    padding: 6px 4px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  #jumpBtn,
  #attackBtn,
  #specialBtn {
    font-size: 12.5px !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
}

/* Extra-short landscape phones: keep all 3 leaderboard rows but tighten them safely. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .expertStartPanel {
    width: min(90vw, 800px) !important;
    grid-template-columns: minmax(230px, .86fr) minmax(285px, 1.14fr) !important;
    padding: 5px 10px !important;
    gap: 5px !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 30vh !important;
    max-width: min(32vw, 280px) !important;
  }

  .expertStartPanel .leaderboardBox {
    padding: 6px 8px !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 24px !important;
    height: 24px !important;
    padding: 3px 7px !important;
  }

  .expertStartPanel .leaderboardRank,
  .expertStartPanel .leaderboardName,
  .expertStartPanel .leaderboardScore {
    font-size: 10px !important;
  }

  .expertStartPanel .leaderboardChar {
    font-size: 7.5px !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    height: 29px !important;
    min-height: 29px !important;
    font-size: 11px !important;
  }

  .expertStartPanel .smoothModeBtn {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 8px !important;
  }

  .resultPanel {
    width: min(90vw, 880px) !important;
    max-width: min(90vw, 880px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #gameShell {
    grid-template-rows: 26px minmax(0, 1fr) 58px !important;
  }

  #controls {
    height: 58px !important;
    min-height: 58px !important;
    gap: 6px !important;
  }

  #controls button {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 11px !important;
  }
}


/* ===== Mobile landscape start emphasis and howto readability fix ===== */

/* Landscape start screen: logo/buttons get the main space, leaderboard becomes secondary. */
@media (pointer: coarse) and (orientation: landscape) {
  .expertStartPanel {
    width: min(90vw, 860px) !important;
    max-width: min(90vw, 860px) !important;
    max-height: calc(100dvh - 10px) !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1.45fr) minmax(220px, .55fr) !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "logo board"
      "actions board"
      "smooth board" !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    grid-area: logo !important;
    max-height: 48vh !important;
    max-width: min(55vw, 520px) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  .expertStartPanel .expertMenuActions {
    grid-area: actions !important;
    width: min(420px, 100%) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 8px 14px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .smoothModeBtn {
    grid-area: smooth !important;
    width: min(300px, 100%) !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 10px !important;
    font-size: 9.5px !important;
    margin: 0 !important;
  }

  .expertStartPanel .leaderboardBox {
    grid-area: board !important;
    width: min(240px, 100%) !important;
    max-width: 240px !important;
    padding: 7px 7px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    align-self: center !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 8.5px !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
    letter-spacing: .8px !important;
  }

  .expertStartPanel .leaderboardRows {
    gap: 5px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 30px !important;
    height: 30px !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
    grid-template-columns: 20px 34px minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  .expertStartPanel .leaderboardRank,
  .expertStartPanel .leaderboardName,
  .expertStartPanel .leaderboardScore {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .leaderboardChar {
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* How To Play landscape: readable card layout with enough font size and no weird cramming. */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(92vw, 900px) !important;
    max-width: min(92vw, 900px) !important;
    max-height: calc(100dvh - 10px) !important;
    overflow: hidden !important;
    padding: 9px 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: minmax(250px, .92fr) minmax(360px, 1.08fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "goal controls"
      "actions actions" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: stretch !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    font-size: clamp(22px, 4vw, 34px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .howSection {
    padding: 10px 11px !important;
    border-radius: 14px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .howBulletList,
  .howControlRows {
    gap: 7px !important;
  }

  .howBulletItem {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    gap: 3px !important;
  }

  .howBulletItem i {
    display: block !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .controlRow {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    gap: 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .controlRow b {
    font-size: 10.5px !important;
    min-width: 76px !important;
    line-height: 1 !important;
  }

  .keyCaps {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .keyCaps kbd {
    min-width: 20px !important;
    padding: 4px 5px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
  }

  .keyCaps em {
    font-size: 8px !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 11px !important;
  }
}

/* Short landscape phones: keep readability but reduce padding/leaderboard proportion. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .expertStartPanel {
    width: min(92vw, 830px) !important;
    grid-template-columns: minmax(330px, 1.5fr) minmax(210px, .5fr) !important;
    padding: 6px 10px !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 38vh !important;
    max-width: min(52vw, 460px) !important;
  }

  .expertStartPanel .primaryStartBtn,
  .expertStartPanel .secondaryMenuBtn,
  #overlayStartBtn,
  #howToPlayBtn {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 13px !important;
  }

  .expertStartPanel .leaderboardBox {
    width: min(220px, 100%) !important;
    max-width: 220px !important;
    padding: 5px 6px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 24px !important;
    height: 24px !important;
    padding: 3px 5px !important;
  }

  .expertStartPanel .leaderboardRank,
  .expertStartPanel .leaderboardName,
  .expertStartPanel .leaderboardScore {
    font-size: 9px !important;
  }

  .expertStartPanel .leaderboardChar {
    font-size: 6.5px !important;
  }

  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(94vw, 880px) !important;
    padding: 6px 9px !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  .howBulletItem b,
  .controlRow b {
    font-size: 8.8px !important;
  }

  .howBulletItem i,
  .controlRow {
    font-size: 7.4px !important;
  }

  .controlRow {
    padding: 4px 6px !important;
  }

  .controlRow b {
    min-width: 62px !important;
  }
}


/* ===== Mobile leaderboard controls howto icon final fix ===== */

/* Keep touch controls hidden on all menu/overlay screens. Previous mobile display overrides made them leak. */
@media (pointer: coarse), (max-width: 900px) {
  #controls.hiddenDuringMenu,
  #bottomHud.hiddenDuringMenu,
  #combatHud.hiddenDuringMenu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #controls:not(.hiddenDuringMenu) {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Stop iPhone/Safari long-press selection bubble on the game controls. */
  #controls,
  #controls *,
  #topHud,
  #topHud *,
  #bottomHud,
  #bottomHud *,
  canvas,
  button {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: none !important;
  }

  #controls button {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    outline: none !important;
  }
}

/* Start Gig landscape: always show all 3 leaderboard rows. */
@media (pointer: coarse) and (orientation: landscape) {
  .expertStartPanel .leaderboardRow,
  .expertStartPanel .leaderboardRow:nth-child(1),
  .expertStartPanel .leaderboardRow:nth-child(2),
  .expertStartPanel .leaderboardRow:nth-child(3),
  .expertStartPanel .leaderboardRow:nth-child(n+3) {
    display: grid !important;
    visibility: visible !important;
  }

  .expertStartPanel .leaderboardBox {
    width: min(270px, 100%) !important;
    max-width: 270px !important;
    padding: 8px 8px !important;
    overflow: visible !important;
  }

  .expertStartPanel .leaderboardRows {
    display: grid !important;
    gap: 4px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 27px !important;
    height: 27px !important;
    grid-template-columns: 20px 35px minmax(78px, 1fr) auto !important;
    gap: 5px !important;
    padding: 4px 6px !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 9px !important;
    margin: 0 0 5px !important;
  }
}

/* How To Play landscape final presentation:
   clean header, two readable cards, footer buttons. No jumbled 3-column compression. */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(92vw, 880px) !important;
    max-width: min(92vw, 880px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "goal controls"
      "actions actions" !important;
    column-gap: 12px !important;
    row-gap: 9px !important;
    align-items: stretch !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    font-size: clamp(22px, 3.8vw, 34px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .howSection {
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px 11px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-content: start !important;
  }

  .howLabel {
    display: block !important;
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0 0 8px !important;
    letter-spacing: 1px !important;
  }

  .howBulletList,
  .howControlRows {
    display: grid !important;
    gap: 7px !important;
    align-content: center !important;
  }

  .howBulletItem {
    display: grid !important;
    gap: 3px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
  }

  .howBulletItem b {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i {
    display: block !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
  }

  .controlRow {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .controlRow b {
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .keyCaps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .keyCaps kbd {
    min-width: 19px !important;
    padding: 3px 5px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .keyCaps em {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    grid-area: actions !important;
    width: min(420px, 62%) !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 11px !important;
  }
}

/* Short landscape: keep readable but compact. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .expertStartPanel .leaderboardBox {
    width: min(252px, 100%) !important;
    max-width: 252px !important;
    padding: 5px 7px !important;
  }

  .expertStartPanel .leaderboardRow,
  .expertStartPanel .leaderboardRow:nth-child(n+3) {
    display: grid !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 3px 5px !important;
  }

  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(94vw, 860px) !important;
    padding: 6px 9px !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    font-size: clamp(18px, 3vw, 26px) !important;
  }

  .howLabel {
    font-size: 8px !important;
    margin-bottom: 5px !important;
  }

  .howBulletList,
  .howControlRows {
    gap: 4px !important;
  }

  .howBulletItem {
    padding: 4px 6px !important;
  }

  .howBulletItem b {
    font-size: 8.8px !important;
  }

  .howBulletItem i {
    display: block !important;
    font-size: 7.3px !important;
    line-height: 1.08 !important;
  }

  .controlRow {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 4px 6px !important;
  }

  .controlRow b {
    font-size: 8.4px !important;
  }

  .keyCaps kbd {
    min-width: 16px !important;
    padding: 2px 4px !important;
    font-size: 6.8px !important;
  }

  .keyCaps em {
    font-size: 6.8px !important;
  }
}


/* ===== Mobile landscape controls swap jump attack special ===== */
/* Requested order in landscape:
   movement | SPECIAL | JUMP | ATTACK
   Special takes Jump's old spot, Jump takes Attack's old spot, Attack takes Special's old spot. */
@media (pointer: coarse) and (orientation: landscape) {
  #specialBtn {
    grid-column: 5 !important;
  }

  #jumpBtn {
    grid-column: 6 !important;
  }

  #attackBtn {
    grid-column: 7 !important;
  }

  #specialBtn {
    font-size: 11.5px !important;
  }

  #jumpBtn,
  #attackBtn {
    font-size: 12.5px !important;
  }
}


/* ===== Results menu buttons taller landscape only ===== */
/* Only mobile landscape: make Play Again / Main Menu a little taller. Portrait and desktop unchanged. */
@media (pointer: coarse) and (orientation: landscape) {
  .resultPanel .btnRow {
    align-items: stretch !important;
  }

  .resultPanel #restartBtn,
  .resultPanel #menuBtn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 7px 12px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
}


/* ===== Mobile landscape choose player button padding polish ===== */
/* Only mobile landscape: make Choose Player Next/Back easier to hit and add breathing room. */
@media (pointer: coarse) and (orientation: landscape) {
  .mobileCharacterStep {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .mobileCharacterStep .mobileStepTop {
    margin-bottom: 2px !important;
  }

  .mobileCharacterStep .mobilePlayerCards {
    gap: 10px !important;
    padding: 2px 2px !important;
  }

  .mobileCharacterStep .mobilePlayerCard {
    padding: 10px 8px !important;
    border-radius: 15px !important;
  }

  .mobileCharacterStep .mobileStepActions {
    width: min(390px, 72%) !important;
    gap: 10px !important;
    padding-top: 2px !important;
  }

  .mobileCharacterStep #mobilePlayerNextBtn,
  .mobileCharacterStep #mobilePlayerBackBtn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 7px 12px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
}

/* Short landscape phones: still bigger than before, but keep it fitting. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .mobileCharacterStep {
    padding: 8px 11px !important;
    gap: 7px !important;
  }

  .mobileCharacterStep .mobilePlayerCards {
    gap: 7px !important;
  }

  .mobileCharacterStep .mobileStepActions {
    width: min(360px, 70%) !important;
    gap: 8px !important;
  }

  .mobileCharacterStep #mobilePlayerNextBtn,
  .mobileCharacterStep #mobilePlayerBackBtn {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }
}


/* ===== Mobile landscape choose venue button padding polish ===== */
/* Only mobile landscape: make Choose Venue Play/Back easier to hit and add breathing room. */
@media (pointer: coarse) and (orientation: landscape) {
  .mobileVenueStep {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .mobileVenueStep .mobileStepTop {
    margin-bottom: 2px !important;
  }

  .mobileVenueStep .mobileVenueCards {
    gap: 10px !important;
    padding: 2px 2px !important;
  }

  .mobileVenueStep .mobileVenueCard {
    padding: 9px 7px !important;
    border-radius: 15px !important;
  }

  .mobileVenueStep .mobileStepActions {
    width: min(390px, 72%) !important;
    gap: 10px !important;
    padding-top: 2px !important;
  }

  .mobileVenueStep #mobileVenuePlayBtn,
  .mobileVenueStep #mobileVenueBackBtn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 7px 12px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
}

/* Short landscape phones: keep the venue screen fitting safely. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .mobileVenueStep {
    padding: 8px 11px !important;
    gap: 7px !important;
  }

  .mobileVenueStep .mobileVenueCards {
    gap: 7px !important;
  }

  .mobileVenueStep .mobileVenueCard {
    padding: 6px 5px !important;
  }

  .mobileVenueStep .mobileStepActions {
    width: min(360px, 70%) !important;
    gap: 8px !important;
  }

  .mobileVenueStep #mobileVenuePlayBtn,
  .mobileVenueStep #mobileVenueBackBtn {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }
}


/* ===== Mobile landscape how to play one column readable ===== */
/* Only mobile landscape: stack How To Play content in one readable column. */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(72vw, 620px) !important;
    max-width: min(72vw, 620px) !important;
    max-height: calc(100dvh - 10px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "intro"
      "goal"
      "controls"
      "actions" !important;
    row-gap: 10px !important;
    align-items: start !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    font-size: clamp(24px, 4.4vw, 38px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .howIntro {
    grid-area: intro !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .howSection {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
  }

  .howLabel {
    font-size: 10.5px !important;
    line-height: 1 !important;
    margin: 0 0 8px !important;
    letter-spacing: 1px !important;
  }

  .howBulletList,
  .howControlRows {
    display: grid !important;
    gap: 7px !important;
  }

  .howBulletItem {
    padding: 8px 9px !important;
    border-radius: 10px !important;
    display: grid !important;
    gap: 3px !important;
  }

  .howBulletItem b {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .controlRow {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
  }

  .controlRow b {
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .keyCaps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .keyCaps kbd {
    min-width: 21px !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  .keyCaps em {
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    grid-area: actions !important;
    width: min(420px, 100%) !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding-bottom: 2px !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
}

/* Short landscape phones: still one column, just tighter. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(76vw, 600px) !important;
    max-width: min(76vw, 600px) !important;
    padding: 9px 11px !important;
    row-gap: 7px !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    font-size: clamp(19px, 3.5vw, 28px) !important;
  }

  .howIntro {
    display: none !important;
  }

  .howSection {
    padding: 8px 9px !important;
  }

  .howBulletList,
  .howControlRows {
    gap: 5px !important;
  }

  .howBulletItem {
    padding: 5px 7px !important;
  }

  .howBulletItem b {
    font-size: 9.5px !important;
  }

  .howBulletItem i {
    font-size: 8px !important;
  }

  .controlRow {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    padding: 5px 7px !important;
  }

  .controlRow b {
    font-size: 9px !important;
  }

  .keyCaps kbd {
    min-width: 17px !important;
    padding: 2px 4px !important;
    font-size: 7px !important;
  }

  .keyCaps em {
    font-size: 7px !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 10.5px !important;
  }
}


/* ===== Mobile landscape how to play 75 25 final layout ===== */
/* Landscape only:
   Title top, Goal left at 75%, Controls right at 25%, buttons bottom.
   Designed to fit without scrolling. */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(94vw, 980px) !important;
    max-width: min(94vw, 980px) !important;
    max-height: calc(100dvh - 10px) !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(150px, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "goal controls"
      "actions actions" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: stretch !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    font-size: clamp(22px, 4vw, 36px) !important;
    line-height: .95 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .howSection {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  .howLabel {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    letter-spacing: 1px !important;
  }

  .howBulletList {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  .howBulletItem {
    min-height: 0 !important;
    padding: 8px 8px !important;
    border-radius: 11px !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 4px !important;
    align-content: start !important;
  }

  .howBulletItem b {
    font-size: clamp(9.5px, 1.45vw, 12px) !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i {
    display: block !important;
    font-size: clamp(7.8px, 1.1vw, 9.2px) !important;
    line-height: 1.18 !important;
  }

  .howControlRows {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    min-height: 0 !important;
    align-content: center !important;
  }

  .controlRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .controlRow b {
    font-size: clamp(7.5px, 1vw, 9.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .keyCaps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .keyCaps kbd {
    min-width: 15px !important;
    padding: 2px 3px !important;
    border-radius: 5px !important;
    font-size: clamp(6px, .85vw, 7.5px) !important;
    line-height: 1 !important;
  }

  .keyCaps em {
    font-size: clamp(6px, .8vw, 7px) !important;
    line-height: 1 !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    grid-area: actions !important;
    width: min(420px, 58%) !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Very short landscape phones: preserve 75/25 layout but compress text/cards. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(96vw, 960px) !important;
    max-width: min(96vw, 960px) !important;
    padding: 6px 9px !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  .howBulletList {
    gap: 5px !important;
  }

  .howBulletItem {
    padding: 5px 5px !important;
    gap: 2px !important;
  }

  .howBulletItem b {
    font-size: clamp(7.5px, 1.15vw, 9px) !important;
  }

  .howBulletItem i {
    font-size: clamp(6.2px, .9vw, 7px) !important;
    line-height: 1.1 !important;
  }

  .controlRow {
    padding: 3px 5px !important;
    gap: 2px !important;
  }

  .controlRow b {
    font-size: 7px !important;
  }

  .keyCaps kbd {
    min-width: 13px !important;
    padding: 1px 3px !important;
    font-size: 5.8px !important;
  }

  .keyCaps em {
    font-size: 5.8px !important;
  }
}


/* ===== Mobile landscape how to play layout repair centered readable ===== */
/* Fixes: panel alignment, goals going too far left, cramped controls, empty right space, uncentered buttons. */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    /* Use a balanced centered panel instead of stretching awkwardly across the screen. */
    width: min(88vw, 820px) !important;
    max-width: min(88vw, 820px) !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    padding: 11px 13px !important;
    border-radius: 18px !important;

    /* Still goal-heavy, but controls get usable room. */
    display: grid !important;
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "goal controls"
      "actions actions" !important;
    column-gap: 12px !important;
    row-gap: 9px !important;
    align-items: stretch !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
    font-size: clamp(22px, 3.8vw, 34px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .howGoalSection,
  .howControlSection {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .howSection {
    padding: 10px 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  .howLabel {
    font-size: 9.5px !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    letter-spacing: 1px !important;
  }

  /* Goals: readable, not stretched into a weird wide row. */
  .howBulletList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    align-content: center !important;
    min-height: 0 !important;
  }

  .howBulletItem {
    min-width: 0 !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(108px, .38fr) minmax(0, .62fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .howBulletItem b {
    font-size: clamp(9px, 1.35vw, 11px) !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i {
    display: block !important;
    font-size: clamp(7.5px, 1.05vw, 8.8px) !important;
    line-height: 1.16 !important;
  }

  /* Controls: give the right panel enough structure so it does not look jammed. */
  .howControlRows {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    align-content: center !important;
    min-height: 0 !important;
  }

  .controlRow {
    min-width: 0 !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 5px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .controlRow b {
    font-size: clamp(7.3px, 1vw, 8.6px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .keyCaps {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 3px !important;
  }

  .keyCaps kbd {
    min-width: 14px !important;
    padding: 2px 3px !important;
    border-radius: 5px !important;
    font-size: clamp(5.8px, .78vw, 6.8px) !important;
    line-height: 1 !important;
  }

  .keyCaps em {
    font-size: clamp(5.8px, .78vw, 6.8px) !important;
    line-height: 1 !important;
  }

  /* Buttons: centered under the whole panel. */
  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    grid-area: actions !important;
    width: min(420px, 64%) !important;
    justify-self: center !important;
    align-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
    line-height: 1 !important;
  }
}

/* Shorter landscape phones: same layout, less padding. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(90vw, 800px) !important;
    max-width: min(90vw, 800px) !important;
    padding: 7px 10px !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
    grid-template-columns: minmax(0, 1.85fr) minmax(220px, 1fr) !important;
  }

  .howSection {
    padding: 7px 8px !important;
  }

  .howBulletItem {
    padding: 4px 6px !important;
    grid-template-columns: minmax(84px, .36fr) minmax(0, .64fr) !important;
    gap: 5px !important;
  }

  .howBulletItem b {
    font-size: 7.8px !important;
  }

  .howBulletItem i {
    font-size: 6.4px !important;
    line-height: 1.08 !important;
  }

  .controlRow b {
    font-size: 6.8px !important;
  }

  .keyCaps kbd {
    min-width: 12px !important;
    padding: 1px 2px !important;
    font-size: 5.4px !important;
  }

  .keyCaps em {
    font-size: 5.4px !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    width: min(360px, 58%) !important;
    gap: 8px !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
  }
}


/* ===== Mobile landscape how to play final centered no empty space fix ===== */
/* Strong final override: removes empty right-side space and centers the bottom buttons. */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(90vw, 860px) !important;
    max-width: min(90vw, 860px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "goal controls"
      "actions actions" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    grid-area: title !important;
    width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(22px, 3.8vw, 34px) !important;
    line-height: 1 !important;
  }

  .howGoalSection {
    grid-area: goal !important;
  }

  .howControlSection {
    grid-area: controls !important;
  }

  .howGoalSection,
  .howControlSection {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  .howSection {
    padding: 9px 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  .howLabel {
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    letter-spacing: 1px !important;
  }

  /* Goals fill the left panel neatly in three equal rows. */
  .howBulletList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: 100% !important;
    align-content: stretch !important;
  }

  .howBulletItem {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(102px, .34fr) minmax(0, .66fr) !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .howBulletItem b {
    font-size: clamp(8.8px, 1.25vw, 10.8px) !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i {
    display: block !important;
    font-size: clamp(7.2px, 1vw, 8.6px) !important;
    line-height: 1.12 !important;
  }

  /* Controls take up the full right panel width and no longer leave a dead empty column. */
  .howControlRows {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(6, 1fr) !important;
    gap: 4px !important;
    min-height: 0 !important;
    height: 100% !important;
    align-content: stretch !important;
    justify-content: stretch !important;
  }

  .controlRow {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 4px 6px !important;
    border-radius: 9px !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 5px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .controlRow b {
    font-size: clamp(7px, .95vw, 8.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .keyCaps {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .keyCaps kbd {
    min-width: 14px !important;
    padding: 2px 3px !important;
    border-radius: 5px !important;
    font-size: clamp(5.8px, .74vw, 6.8px) !important;
    line-height: 1 !important;
  }

  .keyCaps em {
    font-size: clamp(5.8px, .74vw, 6.8px) !important;
    line-height: 1 !important;
  }

  /* Center actions under the full panel, not under either column. */
  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    grid-area: actions !important;
    width: min(430px, 55%) !important;
    max-width: 430px !important;
    justify-self: center !important;
    align-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
}

/* Very short landscape phones: same corrected layout, tighter sizes. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(92vw, 840px) !important;
    max-width: min(92vw, 840px) !important;
    padding: 7px 9px !important;
    grid-template-columns: minmax(0, 1.9fr) minmax(235px, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    font-size: clamp(17px, 3vw, 25px) !important;
  }

  .howLabel {
    font-size: 7.3px !important;
    margin-bottom: 4px !important;
  }

  .howBulletList {
    gap: 4px !important;
  }

  .howBulletItem {
    padding: 4px 6px !important;
    grid-template-columns: minmax(82px, .34fr) minmax(0, .66fr) !important;
    gap: 5px !important;
  }

  .howBulletItem b {
    font-size: 7.5px !important;
  }

  .howBulletItem i {
    font-size: 6.2px !important;
    line-height: 1.08 !important;
  }

  .howControlRows {
    gap: 3px !important;
  }

  .controlRow {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 3px 5px !important;
    gap: 3px !important;
  }

  .controlRow b {
    font-size: 6.7px !important;
  }

  .keyCaps kbd {
    min-width: 12px !important;
    padding: 1px 2px !important;
    font-size: 5.3px !important;
  }

  .keyCaps em {
    font-size: 5.3px !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions {
    width: min(360px, 54%) !important;
    gap: 8px !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  #howToStartBtn,
  #howToBackBtn {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 10px !important;
  }
}


/* ===== Mobile landscape How To Play one-column redesign ===== */
@media (pointer: coarse) and (orientation: landscape) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(92vw, 920px) !important;
    max-width: min(92vw, 920px) !important;
    max-height: calc(100dvh - 14px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    padding: 10px 14px 12px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 8px !important;
    align-content: start !important;
    justify-items: stretch !important;
    border-radius: 18px !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(22px, 3.8vw, 30px) !important;
    line-height: 1.05 !important;
  }

  .howIntro {
    display: none !important;
  }

  .howGoalSection,
  .howControlSection,
  .improvedHowToPanel .howGoalSection,
  .improvedHowToPanel .howControlSection {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .howSection {
    padding: 9px 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .howLabel {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
  }

  .howBulletList,
  .improvedHowToPanel .howGoalSection .howBulletList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    min-height: 0 !important;
  }

  .howBulletItem,
  .improvedHowToPanel .howGoalSection .howBulletItem {
    display: grid !important;
    grid-template-columns: minmax(112px, .34fr) minmax(0, .66fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .howBulletItem b,
  .improvedHowToPanel .howGoalSection .howBulletItem b {
    font-size: clamp(8.8px, 1.2vw, 10.5px) !important;
    line-height: 1.06 !important;
  }

  .howBulletItem i,
  .improvedHowToPanel .howGoalSection .howBulletItem i {
    display: block !important;
    font-size: clamp(7.2px, .96vw, 8.8px) !important;
    line-height: 1.12 !important;
  }

  .howControlRows,
  .improvedHowToPanel .howControlRows {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    min-height: 0 !important;
  }

  .controlRow {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 7px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .controlRow b {
    font-size: clamp(7.2px, .92vw, 8.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .keyCaps {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .keyCaps kbd {
    min-width: 14px !important;
    padding: 2px 4px !important;
    border-radius: 5px !important;
    font-size: clamp(5.8px, .72vw, 6.9px) !important;
    line-height: 1 !important;
  }

  .keyCaps em {
    font-size: clamp(5.9px, .72vw, 7px) !important;
    line-height: 1 !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions,
  .improvedHowToPanel .howToActions {
    width: min(430px, 62%) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    justify-self: center !important;
    align-self: center !important;
    padding: 0 !important;
    transform: none !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  .improvedHowToPanel #howToStartBtn,
  .improvedHowToPanel #howToBackBtn,
  #howToStartBtn,
  #howToBackBtn {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .howToPlayPanel.improvedHowToPanel,
  .howToPlayPanel,
  .improvedHowToPanel {
    width: min(94vw, 900px) !important;
    max-width: min(94vw, 900px) !important;
    padding: 7px 9px 8px !important;
    gap: 5px !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 {
    font-size: clamp(18px, 3vw, 24px) !important;
  }

  .howSection {
    padding: 6px 7px !important;
  }

  .howLabel {
    font-size: 7.5px !important;
    margin-bottom: 4px !important;
  }

  .howBulletList,
  .improvedHowToPanel .howGoalSection .howBulletList {
    gap: 4px !important;
  }

  .howBulletItem,
  .improvedHowToPanel .howGoalSection .howBulletItem {
    grid-template-columns: minmax(88px, .34fr) minmax(0, .66fr) !important;
    gap: 5px !important;
    padding: 4px 5px !important;
  }

  .howBulletItem b,
  .improvedHowToPanel .howGoalSection .howBulletItem b {
    font-size: 7.4px !important;
  }

  .howBulletItem i,
  .improvedHowToPanel .howGoalSection .howBulletItem i {
    font-size: 6.1px !important;
    line-height: 1.08 !important;
  }

  .howControlRows,
  .improvedHowToPanel .howControlRows {
    gap: 3px !important;
  }

  .controlRow {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 3px 5px !important;
  }

  .controlRow b {
    font-size: 6.4px !important;
  }

  .keyCaps {
    gap: 2px !important;
  }

  .keyCaps kbd {
    min-width: 12px !important;
    padding: 1px 2px !important;
    font-size: 5.2px !important;
  }

  .keyCaps em {
    font-size: 5.2px !important;
  }

  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .howToActions,
  .improvedHowToPanel .howToActions {
    width: min(360px, 60%) !important;
    gap: 8px !important;
  }

  .howToPlayPanel .btnRow button,
  .improvedHowToPanel .btnRow button,
  .improvedHowToPanel #howToStartBtn,
  .improvedHowToPanel #howToBackBtn,
  #howToStartBtn,
  #howToBackBtn {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
  }
}


/* === Mobile landscape How To Play rebuild === */
@media (pointer: coarse) and (orientation: landscape) {
  #overlay {
    padding: 10px !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobileLandscapeHowToPanel {
    width: min(96vw, 900px) !important;
    max-width: 96vw !important;
    min-height: 0 !important;
    max-height: min(92vh, 500px) !important;
    padding: 12px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  .mobileLandscapeHowToPanel h2 {
    margin: 0 !important;
    font-size: clamp(26px, 4vw, 34px) !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToIntro {
    margin: 0 auto !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    color: #dfe9ff !important;
    max-width: 560px !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToStack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-content: center !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToSection {
    padding: 10px 12px !important;
    border-radius: 16px !important;
    min-height: 0 !important;
  }

  .mobileLandscapeHowToPanel .howLabel {
    margin-bottom: 8px !important;
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
    text-align: left !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToBullets,
  .mobileLandscapeHowToPanel .mobileHowToControls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem,
  .mobileLandscapeHowToPanel .controlRow {
    border-radius: 12px !important;
    padding: 8px 10px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: none !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem {
    display: grid !important;
    gap: 2px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem b,
  .mobileLandscapeHowToPanel .controlRow b {
    font-size: 12px !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem i {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    color: #dbe6ff !important;
    font-style: normal !important;
  }

  .mobileLandscapeHowToPanel .controlRow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  .mobileLandscapeHowToPanel .keyCaps {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    text-align: right !important;
  }

  .mobileLandscapeHowToPanel kbd {
    min-width: 22px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
  }

  .mobileLandscapeHowToPanel .keyCaps em {
    font-size: 9px !important;
    line-height: 1 !important;
    color: #9fb3d9 !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToActions,
  .mobileLandscapeHowToPanel .howToActions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: auto !important;
    padding-top: 2px !important;
  }

  .mobileLandscapeHowToPanel #howToStartBtn,
  .mobileLandscapeHowToPanel #howToBackBtn {
    min-width: 160px !important;
    min-height: 48px !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .mobileLandscapeHowToPanel {
    max-height: min(94vh, 440px) !important;
    padding: 10px 12px 12px !important;
    gap: 8px !important;
  }

  .mobileLandscapeHowToPanel h2 {
    font-size: clamp(22px, 3.6vw, 28px) !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToIntro {
    font-size: 12px !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToSection {
    padding: 8px 10px !important;
  }

  .mobileLandscapeHowToPanel .howLabel {
    margin-bottom: 6px !important;
    font-size: 10px !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToBullets,
  .mobileLandscapeHowToPanel .mobileHowToControls {
    gap: 5px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem,
  .mobileLandscapeHowToPanel .controlRow {
    padding: 7px 9px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem b,
  .mobileLandscapeHowToPanel .controlRow b {
    font-size: 11px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem i {
    font-size: 9.5px !important;
    line-height: 1.18 !important;
  }

  .mobileLandscapeHowToPanel .keyCaps {
    gap: 3px !important;
  }

  .mobileLandscapeHowToPanel kbd {
    min-width: 20px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }

  .mobileLandscapeHowToPanel .keyCaps em {
    font-size: 8px !important;
  }

  .mobileLandscapeHowToPanel #howToStartBtn,
  .mobileLandscapeHowToPanel #howToBackBtn {
    min-width: 150px !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }
}


/* === Mobile landscape How To Play goals-only refinement === */
@media (pointer: coarse) and (orientation: landscape) {
  #overlay {
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .mobileLandscapeHowToPanel {
    width: min(92vw, 820px) !important;
    max-width: 92vw !important;
    max-height: min(90vh, 500px) !important;
    padding: 16px 18px 18px !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .mobileLandscapeHowToPanel h2 {
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(27px, 4.1vw, 35px) !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 10px rgba(91,220,255,.18) !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToStack {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    margin: 0 auto !important;
  }

  .mobileLandscapeHowToPanel .mobileGoalsOnlySection {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
    text-align: left !important;
    background: rgba(8, 14, 28, 0.82) !important;
    border: 1px solid rgba(91, 220, 255, 0.22) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .mobileLandscapeHowToPanel .howLabel {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    color: #f7fbff !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToBullets {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem {
    display: grid !important;
    gap: 4px !important;
    padding: 11px 13px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.095) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem b {
    font-size: 13px !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    letter-spacing: .1px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem i {
    font-size: 11.4px !important;
    line-height: 1.34 !important;
    color: #eef5ff !important;
    font-style: normal !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToActions,
  .mobileLandscapeHowToPanel .howToActions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding-top: 4px !important;
    text-align: center !important;
  }

  .mobileLandscapeHowToPanel #howToStartBtn,
  .mobileLandscapeHowToPanel #howToBackBtn {
    min-width: 168px !important;
    min-height: 48px !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .mobileLandscapeHowToPanel {
    width: min(93vw, 790px) !important;
    max-height: min(94vh, 430px) !important;
    padding: 11px 13px 13px !important;
    gap: 8px !important;
  }

  .mobileLandscapeHowToPanel h2 {
    font-size: clamp(22px, 3.6vw, 29px) !important;
  }

  .mobileLandscapeHowToPanel .mobileGoalsOnlySection {
    width: min(100%, 670px) !important;
    padding: 10px 11px !important;
  }

  .mobileLandscapeHowToPanel .howLabel {
    margin-bottom: 7px !important;
    font-size: 10.5px !important;
  }

  .mobileLandscapeHowToPanel .mobileHowToBullets {
    gap: 6px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem {
    padding: 8px 10px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem b {
    font-size: 11.6px !important;
  }

  .mobileLandscapeHowToPanel .howBulletItem i {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  .mobileLandscapeHowToPanel #howToStartBtn,
  .mobileLandscapeHowToPanel #howToBackBtn {
    min-width: 150px !important;
    min-height: 42px !important;
    font-size: 15px !important;
  }
}


/* Tour progression V1 */
.venueCard.locked,
.mobileVenueCard.locked {
  opacity: .46;
  filter: grayscale(.35);
  cursor: not-allowed;
  border-color: rgba(255,255,255,.12);
}

.venueCard.locked b,
.mobileVenueCard.locked small {
  color: rgba(255, 205, 126, .92);
}

.tourResultSub {
  margin: -6px auto 14px;
  max-width: 720px;
  text-align: center;
  color: rgba(238,241,255,.9);
  font-weight: 800;
  line-height: 1.35;
}


/* Result screen cleanup: consistent action buttons, no leaderboard panel on results */
.resultPanel #leaderboardMount {
  display: none !important;
}

.resultPanel .btnRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.resultPanel .btnRow button,
.resultPanel #nextLevelBtn,
.resultPanel #restartBtn,
.resultPanel #menuBtn,
.resultPanel #saveInitialsBtn {
  min-width: 142px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 245, 190, .42);
  background: linear-gradient(180deg, rgba(255, 215, 92, .98), rgba(255, 110, 35, .96));
  color: #fff9de;
  font-family: inherit;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
}

.resultPanel .btnRow button.secondary,
.resultPanel #menuBtn.secondary {
  background: linear-gradient(180deg, rgba(52, 62, 84, .98), rgba(26, 31, 46, .98));
  color: #fff4d0;
}

.resultPanel .btnRow button:hover,
.resultPanel #saveInitialsBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

@media (max-width: 520px) {
  .resultPanel .btnRow {
    flex-direction: column;
  }

  .resultPanel .btnRow button,
  .resultPanel #nextLevelBtn,
  .resultPanel #restartBtn,
  .resultPanel #menuBtn {
    width: 100%;
  }
}


/* Final override: keep result action buttons consistent across compact/landscape layouts */
.resultPanel .btnRow {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 4px auto 0 !important;
}

.resultPanel .btnRow button,
.resultPanel #nextLevelBtn,
.resultPanel #restartBtn,
.resultPanel #menuBtn {
  flex: 1 1 142px !important;
  min-width: 142px !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  border-radius: 14px !important;
}

/* Unified button styling pass: consistent stage-poster buttons across all menus/screens */
:root {
  --btn-gold: #ffd45a;
  --btn-orange: #ff6b24;
  --btn-red: #d72556;
  --btn-cyan: #55dcff;
  --btn-ink: #100918;
}

button {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.gameBtn,
#overlay .gameBtn,
#startBtn.gameBtn,
.primaryStartBtn.gameBtn,
.secondaryMenuBtn.gameBtn,
#playGigBtn.gameBtn,
#backToStartBtn.gameBtn,
#mobilePlayerNextBtn.gameBtn,
#mobilePlayerBackBtn.gameBtn,
#mobileVenuePlayBtn.gameBtn,
#mobileVenueBackBtn.gameBtn,
#resumeBtn.gameBtn,
#restartBtn.gameBtn,
#nextLevelBtn.gameBtn,
#menuBtn.gameBtn,
#howToStartBtn.gameBtn,
#howToBackBtn.gameBtn,
#smoothModeBtn.gameBtn,
#saveInitialsBtn.gameBtn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 168px !important;
  min-height: 50px !important;
  padding: 13px 22px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255, 242, 180, .54) !important;
  font-family: inherit !important;
  font-size: clamp(15px, 1.6vw, 20px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transform: translateY(0) scale(1) !important;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

.gameBtnPrimary,
#overlay .gameBtnPrimary,
#startBtn.gameBtnPrimary,
.primaryStartBtn.gameBtnPrimary,
#playGigBtn.gameBtnPrimary,
#mobilePlayerNextBtn.gameBtnPrimary,
#mobileVenuePlayBtn.gameBtnPrimary,
#resumeBtn.gameBtnPrimary,
#restartBtn.gameBtnPrimary,
#nextLevelBtn.gameBtnPrimary,
#howToStartBtn.gameBtnPrimary,
#saveInitialsBtn.gameBtnPrimary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 31%),
    linear-gradient(135deg, var(--btn-gold) 0%, var(--btn-orange) 48%, var(--btn-red) 100%) !important;
  color: #fff8d5 !important;
  text-shadow: 0 2px 0 rgba(60, 10, 0, .58), 0 0 12px rgba(255, 231, 92, .22) !important;
  box-shadow:
    0 12px 0 rgba(70, 16, 22, .55),
    0 18px 30px rgba(0,0,0,.34),
    0 0 24px rgba(255, 92, 30, .28),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

.gameBtnSecondary,
#overlay .gameBtnSecondary,
.secondaryMenuBtn.gameBtnSecondary,
#backToStartBtn.gameBtnSecondary,
#mobilePlayerBackBtn.gameBtnSecondary,
#mobileVenueBackBtn.gameBtnSecondary,
#menuBtn.gameBtnSecondary,
#howToBackBtn.gameBtnSecondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, rgba(38, 47, 72, .98), rgba(18, 20, 34, .98)) !important;
  color: #f8fbff !important;
  border-color: rgba(85, 220, 255, .42) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.62) !important;
  box-shadow:
    0 10px 0 rgba(4, 8, 18, .62),
    0 16px 28px rgba(0,0,0,.32),
    0 0 22px rgba(85, 220, 255, .16),
    inset 0 1px 0 rgba(255,255,255,.17) !important;
}

.gameBtnGhost,
#overlay .gameBtnGhost,
#smoothModeBtn.gameBtnGhost {
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(5, 10, 24, .58) !important;
  color: rgba(245, 250, 255, .92) !important;
  font-size: 12px !important;
  letter-spacing: .075em !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.gameBtnSmall,
#saveInitialsBtn.gameBtnSmall {
  min-width: 96px !important;
  min-height: 44px !important;
  padding: 11px 15px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
}

.gameBtn:hover,
#overlay .gameBtn:hover,
.gameBtn:focus-visible,
#overlay .gameBtn:focus-visible {
  filter: brightness(1.08) saturate(1.06) !important;
  transform: translateY(-2px) scale(1.01) !important;
  outline: none !important;
}

.gameBtn:active,
#overlay .gameBtn:active {
  transform: translateY(4px) scale(.995) !important;
  filter: brightness(.98) !important;
  box-shadow:
    0 6px 0 rgba(70, 16, 22, .55),
    0 9px 18px rgba(0,0,0,.32),
    inset 0 2px 10px rgba(0,0,0,.20) !important;
}

.gameBtnSecondary:active,
#overlay .gameBtnSecondary:active {
  box-shadow:
    0 5px 0 rgba(4, 8, 18, .62),
    0 9px 18px rgba(0,0,0,.30),
    inset 0 2px 10px rgba(0,0,0,.20) !important;
}

.gameBtn:disabled,
.gameBtn[aria-disabled="true"] {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: grayscale(.35) !important;
  transform: none !important;
}

/* Card buttons still behave like cards, but now share the same polish */
.selectCard,
.venueCard,
.mobilePlayerCard,
.mobileVenueCard {
  border-radius: 18px !important;
  border-width: 2px !important;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

.selectCard:hover,
.venueCard:hover:not(:disabled),
.mobilePlayerCard:hover,
.mobileVenueCard:hover:not(:disabled),
.selectCard:focus-visible,
.venueCard:focus-visible,
.mobilePlayerCard:focus-visible,
.mobileVenueCard:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) saturate(1.04) !important;
  outline: none !important;
}

.selectCard.selected,
.venueCard.selected,
.mobilePlayerCard.selected,
.mobileVenueCard.selected {
  border-color: rgba(255, 212, 90, .92) !important;
  box-shadow: 0 0 0 2px rgba(255, 212, 90, .20), 0 18px 34px rgba(0,0,0,.28), 0 0 26px rgba(255, 107, 36, .18) !important;
}

/* HUD buttons use a compact version of the same button language */
.gameHudBtn,
#topHud .gameHudBtn,
#quitBtn.gameHudBtn,
#pauseBtn.gameHudBtn {
  min-width: 82px !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

#quitBtn.gameHudBtn {
  background: linear-gradient(135deg, rgba(42, 50, 72, .94), rgba(19, 22, 34, .96)) !important;
  color: #f6fbff !important;
}

#pauseBtn.gameHudBtn {
  background: linear-gradient(135deg, rgba(255, 212, 90, .95), rgba(255, 107, 36, .92)) !important;
  color: #fff8dc !important;
  text-shadow: 0 2px 0 rgba(60, 10, 0, .45) !important;
}

/* Touch controls get one consistent arcade-pad style */
#controls .touchControlBtn,
#controls button {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),
    rgba(9, 15, 32, .82) !important;
  color: #f5fbff !important;
  font-weight: 1000 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  box-shadow: 0 9px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

#controls .touchControlBtn:active,
#controls button:active {
  transform: translateY(2px) scale(.99) !important;
  filter: brightness(1.12) !important;
}

#specialBtn.ready {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, #fff06a, #ff8c19 48%, #ff315f) !important;
  color: #1a0d08 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
  box-shadow: 0 0 24px rgba(255, 221, 0, .54), 0 10px 20px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.resultPanel .btnRow,
.pausePanel .btnRow,
.characterSelectPanel .btnRow,
.howToActions,
.expertMenuActions,
.mobileStepActions {
  gap: 14px !important;
}

.resultPanel .btnRow .gameBtn {
  flex: 1 1 158px !important;
}

.initialsRow {
  align-items: stretch !important;
}

@media (max-width: 620px) {
  .gameBtn,
  #overlay .gameBtn,
  #startBtn.gameBtn,
  .primaryStartBtn.gameBtn,
  .secondaryMenuBtn.gameBtn,
  #playGigBtn.gameBtn,
  #backToStartBtn.gameBtn,
  #mobilePlayerNextBtn.gameBtn,
  #mobilePlayerBackBtn.gameBtn,
  #mobileVenuePlayBtn.gameBtn,
  #mobileVenueBackBtn.gameBtn,
  #resumeBtn.gameBtn,
  #restartBtn.gameBtn,
  #nextLevelBtn.gameBtn,
  #menuBtn.gameBtn,
  #howToStartBtn.gameBtn,
  #howToBackBtn.gameBtn {
    min-width: 148px !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
  }

  .mobileStepActions .gameBtn,
  .resultPanel .btnRow .gameBtn {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* =========================================================
   Stage Dive Showdown V13: full themed button system
   UX hierarchy: primary action, info/secondary, ghost/nav,
   success/save, danger/reset, selected cards, locked cards.
   ========================================================= */
:root {
  --btn-stage-yellow: #ffd45a;
  --btn-stage-orange: #ff7a1f;
  --btn-neon-pink: #ff2f73;
  --btn-amp-purple: #4a2cff;
  --btn-deep-purple: #17152c;
  --btn-backline: #090b18;
  --btn-teal: #42f2c2;
  --btn-danger: #ff335d;
  --btn-cream: #fff8dc;
}

button,
.gameBtn,
.gameHudBtn,
.touchControlBtn,
.selectCard,
.venueCard,
.mobilePlayerCard,
.mobileVenueCard {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.gameBtn,
#overlay .gameBtn,
.mobileStepActions .gameBtn,
.howToActions .gameBtn,
.expertMenuActions .gameBtn,
.resultPanel .gameBtn,
.pausePanel .gameBtn,
.initialsRow .gameBtn,
.btnRow .gameBtn {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  min-width: 156px !important;
  padding: 13px 22px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255, 255, 255, .18) !important;
  font-family: inherit !important;
  font-size: clamp(14px, 1.8vw, 18px) !important;
  font-weight: 1000 !important;
  letter-spacing: .085em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #fff !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
  transform: translateZ(0) !important;
  transition: transform .13s ease, filter .13s ease, box-shadow .13s ease, border-color .13s ease !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.40) !important;
  box-shadow:
    0 13px 0 rgba(0, 0, 0, .28),
    0 19px 32px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -9px 18px rgba(0,0,0,.22) !important;
}

.gameBtn::before,
#overlay .gameBtn::before,
.gameHudBtn::before,
.touchControlBtn::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px 2px auto 2px !important;
  height: 42% !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0)) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.gameBtn::after,
#overlay .gameBtn::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  pointer-events: none !important;
}

.gameBtn:hover,
#overlay .gameBtn:hover,
.gameBtn:focus-visible,
#overlay .gameBtn:focus-visible {
  transform: translateY(-2px) translateZ(0) !important;
  filter: brightness(1.08) saturate(1.08) !important;
  outline: none !important;
}

.gameBtn:active,
#overlay .gameBtn:active,
.gameHudBtn:active,
.touchControlBtn:active {
  transform: translateY(4px) scale(.985) translateZ(0) !important;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, .30),
    0 12px 20px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -5px 12px rgba(0,0,0,.26) !important;
}

/* Main forward action: Start, Play, Next Level, Resume */
.gameBtnPrimary,
.gameBtnGig,
#overlayStartBtn,
#startBtn,
#playGigBtn,
#mobileVenuePlayBtn,
#mobilePlayerNextBtn,
#nextLevelBtn,
#resumeBtn,
#howToStartBtn {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(135deg, var(--btn-stage-yellow) 0%, var(--btn-stage-orange) 49%, var(--btn-neon-pink) 100%) !important;
  border-color: rgba(255, 236, 122, .72) !important;
  color: #210b07 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42) !important;
  box-shadow:
    0 13px 0 rgba(99, 28, 0, .58),
    0 0 24px rgba(255, 154, 30, .33),
    0 20px 38px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -10px 19px rgba(119, 27, 0, .26) !important;
}

/* Informational action: How to Play */
.gameBtnInfo,
#howToPlayBtn {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, #6b45ff 0%, #3423a7 48%, #11172f 100%) !important;
  border-color: rgba(145, 128, 255, .58) !important;
  color: #f3f0ff !important;
  box-shadow:
    0 13px 0 rgba(18, 12, 74, .62),
    0 0 22px rgba(92, 68, 255, .24),
    0 19px 34px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -9px 17px rgba(0,0,0,.25) !important;
}

/* Secondary/replay action */
.gameBtnSecondary,
.gameBtnReplay,
#restartBtn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 35%),
    linear-gradient(135deg, #27304e 0%, #14192d 52%, #090b18 100%) !important;
  border-color: rgba(255, 212, 90, .38) !important;
  color: #fff3bc !important;
  box-shadow:
    0 12px 0 rgba(0, 0, 0, .46),
    0 18px 32px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -8px 18px rgba(0,0,0,.24) !important;
}

/* Navigation/back action */
.gameBtnGhost,
#backToStartBtn,
#mobilePlayerBackBtn,
#mobileVenueBackBtn,
#howToBackBtn,
#menuBtn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 38%),
    rgba(8, 10, 22, .88) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #f7fbff !important;
  box-shadow:
    0 10px 0 rgba(0,0,0,.48),
    0 16px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -7px 16px rgba(0,0,0,.24) !important;
}

/* Save/positive action */
.gameBtnSuccess,
#saveInitialsBtn {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.32), transparent 35%),
    linear-gradient(135deg, var(--btn-teal) 0%, #11a67d 54%, #0b463f 100%) !important;
  border-color: rgba(128, 255, 221, .62) !important;
  color: #05231f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
  box-shadow:
    0 11px 0 rgba(0, 77, 60, .62),
    0 0 20px rgba(66, 242, 194, .24),
    0 17px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -8px 17px rgba(0,0,0,.20) !important;
}

.gameBtnDanger,
.gameHudBtnMenu.danger {
  background:
    linear-gradient(135deg, #ff466e 0%, #9c1031 55%, #270711 100%) !important;
  border-color: rgba(255, 112, 145, .66) !important;
}

.gameBtnSmall,
#saveInitialsBtn.gameBtnSmall {
  min-width: 88px !important;
  min-height: 46px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  border-radius: 14px !important;
}

/* HUD buttons: compact same design language */
.gameHudBtn,
#quitBtn.gameHudBtn,
#pauseBtn.gameHudBtn {
  position: relative !important;
  isolation: isolate !important;
  min-width: 82px !important;
  min-height: 40px !important;
  padding: 9px 13px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  transition: transform .13s ease, filter .13s ease, box-shadow .13s ease !important;
}

#pauseBtn.gameHudBtn,
.gameHudBtnPause {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 36%),
    linear-gradient(135deg, var(--btn-stage-yellow), var(--btn-stage-orange)) !important;
  border-color: rgba(255, 232, 114, .62) !important;
  color: #241007 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.38) !important;
  box-shadow: 0 8px 0 rgba(88, 31, 0, .55), 0 13px 22px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

#quitBtn.gameHudBtn,
.gameHudBtnMenu {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%),
    linear-gradient(135deg, #20263e, #0a0d1a) !important;
  color: #f7fbff !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.45), 0 13px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.13) !important;
}

/* Card buttons: character / venue selection */
.selectCard,
.venueCard,
.mobilePlayerCard,
.mobileVenueCard {
  position: relative !important;
  isolation: isolate !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(145deg, rgba(20, 25, 48, .94), rgba(6, 8, 18, .94)) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: transform .13s ease, filter .13s ease, border-color .13s ease, box-shadow .13s ease !important;
}

.selectCard:hover,
.venueCard:hover,
.mobilePlayerCard:hover,
.mobileVenueCard:hover,
.selectCard:focus-visible,
.venueCard:focus-visible,
.mobilePlayerCard:focus-visible,
.mobileVenueCard:focus-visible {
  transform: translateY(-3px) !important;
  filter: brightness(1.08) saturate(1.06) !important;
  outline: none !important;
}

.selectCard.selected,
.mobilePlayerCard.selected {
  border-color: var(--btn-stage-yellow) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 212, 90, .28), transparent 55%),
    linear-gradient(145deg, rgba(44, 31, 10, .96), rgba(9, 11, 20, .96)) !important;
  box-shadow:
    0 0 0 3px rgba(255, 212, 90, .18),
    0 0 30px rgba(255, 122, 31, .22),
    0 16px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

.venueCard.selected,
.mobileVenueCard.selected {
  border-color: var(--venue-color, var(--btn-stage-yellow)) !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--venue-color, #ffd45a) 34%, transparent), transparent 55%),
    linear-gradient(145deg, rgba(22, 24, 42, .97), rgba(6, 8, 18, .96)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--venue-color, #ffd45a) 28%, transparent),
    0 0 30px color-mix(in srgb, var(--venue-color, #ffd45a) 28%, transparent),
    0 16px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.selectCard.selected::after,
.venueCard.selected::after,
.mobilePlayerCard.selected::after,
.mobileVenueCard.selected::after {
  content: "SELECTED" !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 212, 90, .94) !important;
  color: #221006 !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: .09em !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.22) !important;
}

.venueCard.locked,
.mobileVenueCard.locked,
.venueCard:disabled,
.mobileVenueCard:disabled {
  cursor: not-allowed !important;
  opacity: .58 !important;
  filter: grayscale(.55) saturate(.58) !important;
  border-color: rgba(255,255,255,.09) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 8px, rgba(0,0,0,.08) 8px 16px),
    linear-gradient(145deg, rgba(20, 22, 32, .86), rgba(6, 7, 12, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 20px rgba(0,0,0,.22) !important;
}

.venueCard.locked::after,
.mobileVenueCard.locked::after {
  content: "LOCKED" !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.74) !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: .09em !important;
}

/* Mobile controls: arcade-pad style with special ready variation */
#controls .touchControlBtn,
#controls button {
  position: relative !important;
  isolation: isolate !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),
    linear-gradient(145deg, rgba(26, 32, 55, .92), rgba(7, 10, 24, .92)) !important;
  color: #f5fbff !important;
  font-weight: 1000 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  box-shadow: 0 9px 0 rgba(0,0,0,.36), 0 14px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

#jumpBtn.touchControlBtn {
  border-color: rgba(255, 212, 90, .35) !important;
}

#attackBtn.touchControlBtn {
  border-color: rgba(255, 47, 115, .38) !important;
}

#specialBtn.touchControlBtn.ready,
#specialBtn.ready {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, #fff06a, #ff8c19 48%, #ff315f) !important;
  border-color: rgba(255, 239, 106, .72) !important;
  color: #1a0d08 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
  box-shadow: 0 9px 0 rgba(98, 31, 0, .55), 0 0 24px rgba(255, 221, 0, .54), 0 14px 22px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

/* Layout consistency for action rows */
.expertMenuActions,
.howToActions,
.btnRow,
.mobileStepActions,
.resultPanel .btnRow,
.pausePanel .btnRow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.resultPanel .btnRow .gameBtn,
.pausePanel .btnRow .gameBtn {
  flex: 1 1 160px !important;
}

.initialsRow {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
}

@media (max-width: 620px) {
  .gameBtn,
  #overlay .gameBtn,
  .mobileStepActions .gameBtn,
  .howToActions .gameBtn,
  .expertMenuActions .gameBtn,
  .btnRow .gameBtn,
  .resultPanel .btnRow .gameBtn,
  .pausePanel .btnRow .gameBtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 15px !important;
  }

  .expertMenuActions,
  .howToActions,
  .btnRow,
  .mobileStepActions,
  .resultPanel .btnRow,
  .pausePanel .btnRow {
    width: min(100%, 360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .initialsRow {
    flex-direction: column !important;
  }

  .gameBtnSmall,
  #saveInitialsBtn.gameBtnSmall {
    width: 100% !important;
    min-height: 48px !important;
  }

  .selectCard.selected::after,
  .venueCard.selected::after,
  .mobilePlayerCard.selected::after,
  .mobileVenueCard.selected::after,
  .venueCard.locked::after,
  .mobileVenueCard.locked::after {
    font-size: 8px !important;
    top: 8px !important;
    right: 8px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .gameBtn:hover,
  #overlay .gameBtn:hover,
  .selectCard:hover,
  .venueCard:hover,
  .mobilePlayerCard:hover,
  .mobileVenueCard:hover {
    transform: none !important;
  }
}

/* ===== Mobile landscape menu fit pass v2 ===== */
/* Mobile-only. Desktop wider than 900px is untouched. */
@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay {
    display: none;
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
  }

  #overlay.show {
    display: grid !important;
  }

  #overlay .panel {
    width: min(94vw, 960px) !important;
    max-width: min(94vw, 960px) !important;
    max-height: calc(100dvh - 10px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    gap: 6px !important;
  }

  #overlay h2 {
    font-size: clamp(18px, 3.8vw, 30px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #overlay p {
    font-size: 11px !important;
    line-height: 1.16 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  #overlay .btnRow,
  .expertMenuActions,
  .howToActions,
  .mobileStepActions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #overlay button.gameBtn,
  #overlay .primaryStartBtn,
  #overlay .secondaryMenuBtn,
  #overlay #resumeBtn,
  #overlay #menuBtn,
  #overlay #restartBtn,
  #overlay #nextLevelBtn,
  #overlay #saveInitialsBtn,
  #overlay #howToStartBtn,
  #overlay #howToBackBtn,
  #overlay #mobilePlayerNextBtn,
  #overlay #mobilePlayerBackBtn,
  #overlay #mobileVenuePlayBtn,
  #overlay #mobileVenueBackBtn {
    min-height: 30px !important;
    height: 30px !important;
    min-width: 92px !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .35px !important;
    white-space: nowrap !important;
  }

  /* Main menu */
  .expertStartPanel {
    width: min(76vw, 660px) !important;
    max-width: min(76vw, 660px) !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 6px 10px !important;
    gap: 5px !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 23vh !important;
    max-width: min(54vw, 420px) !important;
    width: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .expertStartPanel .mobileInstallHint {
    display: none !important;
  }

  .expertStartPanel .smoothModeBtn {
    min-height: 22px !important;
    height: 22px !important;
    padding: 3px 8px !important;
    font-size: 8px !important;
    margin: 0 auto !important;
  }

  .expertStartPanel .leaderboardBox,
  .expertStartPanel .arcadeLeaderboard {
    width: min(96%, 470px) !important;
    max-height: 76px !important;
    margin: 0 auto !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .expertStartPanel .leaderboardBox h3 {
    font-size: 8px !important;
    margin: 0 0 3px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .leaderboardRows {
    gap: 2px !important;
  }

  .expertStartPanel .leaderboardRow {
    min-height: 16px !important;
    height: 16px !important;
    padding: 1px 5px !important;
    grid-template-columns: 18px 32px minmax(60px, 1fr) auto !important;
  }

  .expertStartPanel .leaderboardRank,
  .expertStartPanel .leaderboardName,
  .expertStartPanel .leaderboardScore {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .expertStartPanel .leaderboardChar {
    font-size: 6.5px !important;
    line-height: 1 !important;
  }

  /* Loading and pause menus */
  .pausePanel {
    width: min(58vw, 500px) !important;
    max-width: min(58vw, 500px) !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
  }

  .pausePanel .pauseLogo {
    transform: scale(.78) !important;
    transform-origin: center !important;
    margin: -4px 0 !important;
  }

  .pausePanel .controlsHelp {
    font-size: 11px !important;
    margin: 0 !important;
  }

  .pausePanel .smoothModeBtn {
    min-height: 22px !important;
    height: 22px !important;
    padding: 3px 8px !important;
    font-size: 8px !important;
  }

  /* Split mobile character / venue picker */
  .mobileStepPanel {
    width: min(84vw, 780px) !important;
    max-width: min(84vw, 780px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    padding: 7px 10px !important;
    gap: 6px !important;
  }

  .mobileStepTop {
    display: grid !important;
    gap: 2px !important;
    justify-items: center !important;
  }

  .mobileStepCount {
    font-size: 8px !important;
    line-height: 1 !important;
    padding: 2px 7px !important;
  }

  .mobileCharacterStep {
    width: min(72vw, 650px) !important;
  }

  .mobilePlayerCards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 0 !important;
    align-content: center !important;
  }

  .mobilePlayerCard {
    min-height: 70px !important;
    height: auto !important;
    padding: 7px 6px !important;
    border-radius: 13px !important;
  }

  .mobilePlayerCard span {
    font-size: clamp(12px, 2vw, 16px) !important;
    line-height: 1 !important;
  }

  .mobilePlayerCard b {
    font-size: clamp(8px, 1.3vw, 10px) !important;
    line-height: 1.05 !important;
    margin-top: 4px !important;
  }

  .mobileVenueStep {
    width: min(90vw, 860px) !important;
  }

  .mobileVenueCards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 0 !important;
    align-content: center !important;
  }

  .mobileVenueCard {
    min-height: 72px !important;
    height: auto !important;
    padding: 6px 5px !important;
    border-radius: 13px !important;
  }

  .mobileVenueCard span {
    font-size: clamp(9px, 1.45vw, 12px) !important;
    line-height: 1.05 !important;
  }

  .mobileVenueCard small {
    display: block !important;
    font-size: clamp(6.5px, .9vw, 8px) !important;
    line-height: 1.05 !important;
    margin-top: 4px !important;
  }

  /* Desktop combined selector shown in narrow browser testing */
  .characterSelectPanel.venueSelectPanel {
    width: min(92vw, 940px) !important;
    max-width: min(92vw, 940px) !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .8fr) minmax(430px, 1.2fr) !important;
    grid-template-areas: "title title" "players venues" "actions actions" !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
  }

  .characterSelectPanel.venueSelectPanel h2 { grid-area: title !important; }
  .characterSelectPanel.venueSelectPanel .selectLead { display: none !important; }
  .characterSelectPanel.venueSelectPanel .selectCards {
    grid-area: players !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
  .characterSelectPanel.venueSelectPanel .venueSelectBlock { grid-area: venues !important; margin: 0 !important; }
  .characterSelectPanel.venueSelectPanel .btnRow { grid-area: actions !important; }

  .selectCard {
    min-height: 50px !important;
    padding: 5px 6px !important;
  }

  .selectCard small { display: none !important; }
  .selectCard b { font-size: 7px !important; margin-top: 2px !important; }

  .venueCards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .venueCard {
    min-height: 58px !important;
    padding: 5px 4px !important;
  }

  .venueName { font-size: clamp(8px, 1.25vw, 11px) !important; }
  .venueCard small { display: none !important; }
  .venueCard b { font-size: 6.5px !important; margin-top: 2px !important; }

  /* How to Play */
  .howToPlayPanel,
  .improvedHowToPanel,
  .mobileLandscapeHowToPanel {
    width: min(94vw, 980px) !important;
    max-width: min(94vw, 980px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas: "title title title" "goal controls tips" "actions actions actions" !important;
    column-gap: 7px !important;
    row-gap: 5px !important;
    align-items: stretch !important;
  }

  .mobileLandscapeHowToPanel {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" "goal" "actions" !important;
    width: min(82vw, 720px) !important;
  }

  .howToPlayPanel h2,
  .improvedHowToPanel h2 { grid-area: title !important; }
  .howIntro { display: none !important; }
  .howGoalSection { grid-area: goal !important; }
  .howControlSection { grid-area: controls !important; }
  .howTipsSection,
  .howBonusSection,
  .howEncoreSection { grid-area: tips !important; }
  .howToPlayPanel .btnRow,
  .improvedHowToPanel .btnRow,
  .mobileHowToActions { grid-area: actions !important; }

  .howSection {
    min-height: 0 !important;
    padding: 6px 7px !important;
    border-radius: 10px !important;
  }

  .howLabel {
    font-size: 8px !important;
    margin: 0 0 4px !important;
    line-height: 1 !important;
  }

  .howBulletList,
  .howControlRows,
  .mobileHowToBullets {
    gap: 4px !important;
  }

  .howBulletItem,
  .controlRow {
    padding: 4px 5px !important;
    border-radius: 7px !important;
  }

  .howBulletItem b,
  .controlRow b {
    font-size: 8.6px !important;
    line-height: 1.05 !important;
  }

  .howBulletItem i,
  .controlRow,
  .keyCaps em {
    font-size: 7.4px !important;
    line-height: 1.08 !important;
  }

  .keyCaps kbd {
    min-width: 14px !important;
    padding: 2px 3px !important;
    font-size: 6.4px !important;
    border-radius: 4px !important;
  }

  /* Result screen */
  .resultPanel {
    width: min(94vw, 980px) !important;
    max-width: min(94vw, 980px) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "banner banner"
      "rank rank"
      "sub sub"
      "entry entry"
      "stats scores"
      "actions actions" !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    align-items: stretch !important;
  }

  .resultPanel .timesUpBanner { grid-area: banner !important; font-size: clamp(18px, 4vw, 31px) !important; line-height: 1 !important; margin: 0 !important; }
  .resultPanel h2 { grid-area: rank !important; font-size: clamp(15px, 3vw, 24px) !important; line-height: 1 !important; }
  .tourResultSub { grid-area: sub !important; font-size: 9.5px !important; line-height: 1.1 !important; }
  .resultPanel .highScoreEntry { grid-area: entry !important; padding: 5px 7px !important; margin: 0 !important; border-radius: 10px !important; }
  .resultPanel .highScoreEntry p,
  .resultPanel .highScoreEntry label { font-size: 8.5px !important; line-height: 1 !important; margin: 0 0 3px !important; }
  .resultPanel .initialsRow { gap: 5px !important; }
  .resultPanel #initialsInput,
  .resultPanel #saveInitialsBtn { height: 26px !important; min-height: 26px !important; font-size: 11px !important; }
  .resultStatsGrid { grid-area: stats !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; margin: 0 !important; }
  .resultStatCard { min-height: 42px !important; padding: 5px 6px !important; border-radius: 10px !important; }
  .resultStatLabel { font-size: 7px !important; line-height: 1 !important; }
  .resultStatValue { font-size: clamp(14px, 3vw, 22px) !important; line-height: 1 !important; }
  .resultScoreSummary { grid-area: scores !important; display: grid !important; grid-template-columns: 1fr !important; gap: 5px !important; margin: 0 !important; }
  .resultScoreCard { min-height: 42px !important; padding: 5px 7px !important; border-radius: 10px !important; }
  .resultScoreCard span { font-size: 7.5px !important; line-height: 1 !important; }
  .resultScoreCard strong { font-size: clamp(16px, 3.6vw, 27px) !important; line-height: 1 !important; }
  .resultPanel .btnRow { grid-area: actions !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; width: min(560px, 96%) !important; justify-self: center !important; gap: 7px !important; }
  #leaderboardMount { display: none !important; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .panel {
    max-height: calc(100dvh - 6px) !important;
    padding: 5px 8px !important;
    gap: 4px !important;
  }

  #overlay h2 {
    font-size: clamp(15px, 3vw, 22px) !important;
  }

  #overlay p {
    font-size: 9px !important;
    line-height: 1.08 !important;
  }

  #overlay button.gameBtn,
  #overlay .primaryStartBtn,
  #overlay .secondaryMenuBtn,
  #overlay #resumeBtn,
  #overlay #menuBtn,
  #overlay #restartBtn,
  #overlay #nextLevelBtn,
  #overlay #saveInitialsBtn,
  #overlay #howToStartBtn,
  #overlay #howToBackBtn,
  #overlay #mobilePlayerNextBtn,
  #overlay #mobilePlayerBackBtn,
  #overlay #mobileVenuePlayBtn,
  #overlay #mobileVenueBackBtn {
    min-height: 26px !important;
    height: 26px !important;
    min-width: 82px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  .expertStartPanel {
    width: min(72vw, 560px) !important;
    max-width: min(72vw, 560px) !important;
  }

  .expertStartPanel .heroTitleArt,
  .expertStartPanel .expertLogo,
  .heroTitleArt.expertLogo {
    max-height: 18vh !important;
    max-width: min(48vw, 340px) !important;
  }

  .expertStartPanel .leaderboardBox,
  .expertStartPanel .arcadeLeaderboard {
    max-height: 54px !important;
    padding: 4px 6px !important;
  }

  .expertStartPanel .leaderboardRow:nth-child(n+3) {
    display: none !important;
  }

  .mobilePlayerCard {
    min-height: 52px !important;
    padding: 5px 4px !important;
  }

  .mobileVenueCard {
    min-height: 52px !important;
    padding: 4px 4px !important;
  }

  .mobileVenueCard small,
  .selectCard small,
  .venueCard small,
  .howBulletItem i {
    display: none !important;
  }

  .howSection {
    padding: 4px 5px !important;
  }

  .howBulletItem,
  .controlRow {
    padding: 3px 4px !important;
  }

  .howBulletItem b,
  .controlRow b {
    font-size: 7.4px !important;
  }

  .controlRow,
  .keyCaps em {
    font-size: 6.6px !important;
  }

  .resultPanel {
    row-gap: 3px !important;
  }

  .tourResultSub {
    display: none !important;
  }

  .resultStatCard,
  .resultScoreCard {
    min-height: 34px !important;
    padding: 4px 5px !important;
  }

  .resultPanel .highScoreEntry {
    padding: 4px 6px !important;
  }

  .resultPanel .highScoreEntry p,
  .resultPanel .highScoreEntry label {
    font-size: 7.5px !important;
  }
}

/* Full-shell menu centering fix: overlay now centers against the whole game shell, including the header row, not just the canvas area. */
#gameShell {
  position: relative;
}

#overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2500;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  box-sizing: border-box;
}

#overlay.show {
  display: grid !important;
}

#overlay .panel {
  margin: auto !important;
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay {
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }
}

/* =========================================================
   Stage Dive Showdown V16: mobile menu tap-target pass
   Keeps desktop unchanged. Mobile menus keep large, thumb-friendly
   controls and allow panels to scroll rather than shrinking buttons.
   ========================================================= */
@media (pointer: coarse), (max-width: 900px) {
  #overlay {
    overscroll-behavior: contain !important;
  }

  #overlay .panel {
    max-height: calc(100dvh - 18px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  #overlay .btnRow,
  #overlay .expertMenuActions,
  #overlay .howToActions,
  #overlay .mobileStepActions,
  #overlay .pausePanel .btnRow,
  #overlay .resultPanel .btnRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(92vw, 420px) !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #overlay button.gameBtn,
  #overlay .gameBtn,
  #overlay .primaryStartBtn,
  #overlay .secondaryMenuBtn,
  #overlay #resumeBtn,
  #overlay #menuBtn,
  #overlay #restartBtn,
  #overlay #nextLevelBtn,
  #overlay #saveInitialsBtn,
  #overlay #howToStartBtn,
  #overlay #howToBackBtn,
  #overlay #playGigBtn,
  #overlay #backToStartBtn,
  #overlay #mobilePlayerNextBtn,
  #overlay #mobilePlayerBackBtn,
  #overlay #mobileVenuePlayBtn,
  #overlay #mobileVenueBackBtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 15px 18px !important;
    font-size: clamp(15px, 4.1vw, 19px) !important;
    line-height: 1.08 !important;
    border-radius: 17px !important;
    letter-spacing: .075em !important;
    touch-action: manipulation !important;
  }

  #overlay .gameBtnSmall,
  #overlay #saveInitialsBtn.gameBtnSmall {
    min-height: 50px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
  }

  #overlay .selectCard,
  #overlay .venueCard,
  #overlay .mobilePlayerCard,
  #overlay .mobileVenueCard {
    min-height: 72px !important;
    padding: 14px 12px !important;
    touch-action: manipulation !important;
  }

  #overlay .selectCard span,
  #overlay .venueCard span,
  #overlay .mobilePlayerCard span,
  #overlay .mobileVenueCard span,
  #overlay .selectName,
  #overlay .venueName {
    font-size: clamp(15px, 4vw, 19px) !important;
    line-height: 1.05 !important;
  }

  #overlay .selectCard b,
  #overlay .venueCard b,
  #overlay .mobilePlayerCard b,
  #overlay .mobileVenueCard b,
  #overlay .selectCard small,
  #overlay .venueCard small,
  #overlay .mobilePlayerCard small,
  #overlay .mobileVenueCard small {
    font-size: clamp(11px, 3.1vw, 13px) !important;
    line-height: 1.12 !important;
  }

  #overlay .initialsRow {
    display: grid !important;
    grid-template-columns: minmax(92px, 1fr) minmax(120px, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #overlay #initialsInput {
    min-height: 50px !important;
    height: auto !important;
    font-size: 19px !important;
    border-radius: 15px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay .panel {
    max-height: calc(100dvh - 12px) !important;
    overflow-y: auto !important;
  }

  #overlay .btnRow,
  #overlay .expertMenuActions,
  #overlay .howToActions,
  #overlay .mobileStepActions,
  #overlay .pausePanel .btnRow,
  #overlay .resultPanel .btnRow {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    width: min(86vw, 620px) !important;
    gap: 10px !important;
  }

  #overlay button.gameBtn,
  #overlay .gameBtn,
  #overlay .primaryStartBtn,
  #overlay .secondaryMenuBtn,
  #overlay #resumeBtn,
  #overlay #menuBtn,
  #overlay #restartBtn,
  #overlay #nextLevelBtn,
  #overlay #saveInitialsBtn,
  #overlay #howToStartBtn,
  #overlay #howToBackBtn,
  #overlay #playGigBtn,
  #overlay #backToStartBtn,
  #overlay #mobilePlayerNextBtn,
  #overlay #mobilePlayerBackBtn,
  #overlay #mobileVenuePlayBtn,
  #overlay #mobileVenueBackBtn {
    min-height: 48px !important;
    padding: 12px 15px !important;
    font-size: clamp(13px, 2.5vw, 17px) !important;
    border-radius: 16px !important;
  }

  #overlay .selectCard,
  #overlay .venueCard,
  #overlay .mobilePlayerCard,
  #overlay .mobileVenueCard {
    min-height: 66px !important;
    padding: 11px 10px !important;
  }

  .mobilePlayerCards,
  .mobileVenueCards,
  .selectCards,
  .venueCards {
    gap: 10px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .panel {
    max-height: calc(100dvh - 8px) !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
  }

  #overlay .btnRow,
  #overlay .expertMenuActions,
  #overlay .howToActions,
  #overlay .mobileStepActions,
  #overlay .pausePanel .btnRow,
  #overlay .resultPanel .btnRow {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)) !important;
    gap: 8px !important;
  }

  #overlay button.gameBtn,
  #overlay .gameBtn,
  #overlay .primaryStartBtn,
  #overlay .secondaryMenuBtn,
  #overlay #resumeBtn,
  #overlay #menuBtn,
  #overlay #restartBtn,
  #overlay #nextLevelBtn,
  #overlay #saveInitialsBtn,
  #overlay #howToStartBtn,
  #overlay #howToBackBtn,
  #overlay #playGigBtn,
  #overlay #backToStartBtn,
  #overlay #mobilePlayerNextBtn,
  #overlay #mobilePlayerBackBtn,
  #overlay #mobileVenuePlayBtn,
  #overlay #mobileVenueBackBtn {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 13px !important;
    font-size: clamp(12px, 2.35vw, 15px) !important;
    border-radius: 14px !important;
  }

  #overlay .gameBtnGhost,
  #overlay .secondaryMenuBtn.gameBtnGhost {
    min-height: 44px !important;
  }

  #overlay .selectCard,
  #overlay .venueCard,
  #overlay .mobilePlayerCard,
  #overlay .mobileVenueCard {
    min-height: 58px !important;
    padding: 9px 8px !important;
  }

  #overlay .mobileVenueCard small,
  #overlay .selectCard small,
  #overlay .venueCard small {
    display: block !important;
    max-height: 2.3em !important;
    overflow: hidden !important;
  }

  #overlay .resultPanel #initialsInput,
  #overlay .resultPanel #saveInitialsBtn {
    min-height: 44px !important;
    height: auto !important;
  }
}

/* ===== Mobile menu viewport containment pass v17 =====
   Keeps every menu panel inside phone portrait/landscape screens while leaving desktop layout alone. */
@media (pointer: coarse), (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #gameShell {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #overlay {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
  }

  #overlay.show {
    display: grid !important;
  }

  #overlay .panel,
  #overlay .panel.panelHero,
  #overlay .pausePanel,
  #overlay .howToPlayPanel,
  #overlay .characterSelectPanel,
  #overlay .venueSelectPanel,
  #overlay .mobileStepPanel,
  #overlay .resultPanel {
    box-sizing: border-box !important;
    width: min(94vw, 760px) !important;
    max-width: calc(100vw - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right) + 20px)) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 20px)) !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: clamp(12px, 3vw, 20px) !important;
    gap: clamp(8px, 2.4vw, 14px) !important;
  }

  #overlay .panel > *,
  #overlay .panelHero > *,
  #overlay .resultPanel > *,
  #overlay .characterSelectPanel > *,
  #overlay .mobileStepPanel > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #overlay h2 {
    font-size: clamp(26px, 7vw, 46px) !important;
    line-height: .9 !important;
    margin: 0 0 4px !important;
  }

  #overlay p,
  #overlay .selectLead,
  #overlay .howIntro,
  #overlay .tourResultSub {
    font-size: clamp(13px, 3.4vw, 17px) !important;
    line-height: 1.25 !important;
    margin: 0 auto !important;
  }

  #overlay .heroTitleArt,
  #overlay .titleArt,
  #overlay .expertLogo {
    width: min(88vw, 520px) !important;
    max-height: min(24dvh, 170px) !important;
    object-fit: contain !important;
  }

  #overlay .btnRow,
  #overlay .expertMenuActions,
  #overlay .howToActions,
  #overlay .mobileStepActions,
  #overlay .pausePanel .btnRow,
  #overlay .resultPanel .btnRow {
    display: grid !important;
    width: 100% !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 10px !important;
  }

  #overlay .gameBtn,
  #overlay button.gameBtn,
  #overlay .primaryStartBtn,
  #overlay .secondaryMenuBtn,
  #overlay #resumeBtn,
  #overlay #menuBtn,
  #overlay #restartBtn,
  #overlay #nextLevelBtn,
  #overlay #saveInitialsBtn,
  #overlay #howToStartBtn,
  #overlay #howToBackBtn,
  #overlay #playGigBtn,
  #overlay #backToStartBtn,
  #overlay #mobilePlayerNextBtn,
  #overlay #mobilePlayerBackBtn,
  #overlay #mobileVenuePlayBtn,
  #overlay #mobileVenueBackBtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  #overlay .leaderboardBox,
  #overlay .highScoreEntry,
  #overlay .howSection,
  #overlay .resultStatsGrid,
  #overlay .resultScoreSummary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #overlay .leaderboardBox {
    max-height: 30dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #overlay .initialsRow {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(92px, .8fr) minmax(112px, 1fr) !important;
    gap: 10px !important;
  }

  #overlay #initialsInput {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 900px) and (orientation: portrait) {
  #overlay .panel,
  #overlay .panel.panelHero,
  #overlay .pausePanel,
  #overlay .howToPlayPanel,
  #overlay .characterSelectPanel,
  #overlay .venueSelectPanel,
  #overlay .mobileStepPanel,
  #overlay .resultPanel {
    width: min(94vw, 560px) !important;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 18px)) !important;
  }

  #overlay .btnRow,
  #overlay .expertMenuActions,
  #overlay .howToActions,
  #overlay .mobileStepActions,
  #overlay .pausePanel .btnRow,
  #overlay .resultPanel .btnRow {
    grid-template-columns: 1fr !important;
  }

  #overlay .selectCards,
  #overlay .venueCards,
  #overlay .mobilePlayerCards,
  #overlay .mobileVenueCards {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #overlay .selectCard,
  #overlay .venueCard,
  #overlay .mobilePlayerCard,
  #overlay .mobileVenueCard {
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  #overlay .howControlRows,
  #overlay .howBulletList {
    width: 100% !important;
    gap: 8px !important;
  }

  #overlay .resultStatsGrid,
  #overlay .resultScoreSummary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #overlay .resultStatCard,
  #overlay .resultScoreCard {
    min-width: 0 !important;
    padding: 9px 8px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 380px), (max-width: 380px) and (orientation: portrait) {
  #overlay .resultStatsGrid,
  #overlay .resultScoreSummary {
    grid-template-columns: 1fr !important;
  }

  #overlay .initialsRow {
    grid-template-columns: 1fr !important;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay {
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
  }

  #overlay .panel,
  #overlay .panel.panelHero,
  #overlay .pausePanel,
  #overlay .howToPlayPanel,
  #overlay .characterSelectPanel,
  #overlay .venueSelectPanel,
  #overlay .mobileStepPanel,
  #overlay .resultPanel {
    width: min(96vw, 1080px) !important;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 16px)) !important;
    padding: clamp(10px, 2vw, 16px) !important;
    gap: clamp(7px, 1.5vw, 12px) !important;
  }

  #overlay .heroTitleArt,
  #overlay .titleArt,
  #overlay .expertLogo {
    max-height: min(19dvh, 120px) !important;
    width: min(56vw, 460px) !important;
  }

  #overlay .btnRow,
  #overlay .expertMenuActions,
  #overlay .howToActions,
  #overlay .mobileStepActions,
  #overlay .pausePanel .btnRow,
  #overlay .resultPanel .btnRow {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 9px !important;
  }

  #overlay .selectCards,
  #overlay .mobilePlayerCards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
  }

  #overlay .venueCards,
  #overlay .mobileVenueCards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #overlay .selectCard,
  #overlay .venueCard,
  #overlay .mobilePlayerCard,
  #overlay .mobileVenueCard {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 9px 8px !important;
    box-sizing: border-box !important;
  }

  #overlay .venueName,
  #overlay .selectName,
  #overlay .mobilePlayerCard span,
  #overlay .mobileVenueCard span {
    overflow-wrap: anywhere !important;
  }

  #overlay .resultStatsGrid,
  #overlay .resultScoreSummary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #overlay .resultScoreSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #overlay .leaderboardBox {
    max-height: 22dvh !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .panel,
  #overlay .panel.panelHero,
  #overlay .pausePanel,
  #overlay .howToPlayPanel,
  #overlay .characterSelectPanel,
  #overlay .venueSelectPanel,
  #overlay .mobileStepPanel,
  #overlay .resultPanel {
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 12px)) !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  #overlay h2 {
    font-size: clamp(22px, 6vh, 32px) !important;
    margin-bottom: 0 !important;
  }

  #overlay .heroTitleArt,
  #overlay .titleArt,
  #overlay .expertLogo {
    max-height: 15dvh !important;
  }

  #overlay .selectLead,
  #overlay .howIntro,
  #overlay .mobileInstallHint,
  #overlay .controlsHelp {
    display: none !important;
  }

  #overlay .gameBtn,
  #overlay button.gameBtn,
  #overlay .primaryStartBtn,
  #overlay .secondaryMenuBtn,
  #overlay #resumeBtn,
  #overlay #menuBtn,
  #overlay #restartBtn,
  #overlay #nextLevelBtn,
  #overlay #saveInitialsBtn,
  #overlay #howToStartBtn,
  #overlay #howToBackBtn,
  #overlay #playGigBtn,
  #overlay #backToStartBtn,
  #overlay #mobilePlayerNextBtn,
  #overlay #mobilePlayerBackBtn,
  #overlay #mobileVenuePlayBtn,
  #overlay #mobileVenueBackBtn {
    min-height: 44px !important;
    padding: 9px 11px !important;
    font-size: clamp(12px, 3.5vh, 15px) !important;
  }

  #overlay .selectCard,
  #overlay .venueCard,
  #overlay .mobilePlayerCard,
  #overlay .mobileVenueCard {
    min-height: 48px !important;
    padding: 7px 6px !important;
  }

  #overlay .selectCard small,
  #overlay .venueCard small,
  #overlay .venueCard b,
  #overlay .mobileVenueCard small,
  #overlay .mobilePlayerCard b {
    max-height: 2.1em !important;
    overflow: hidden !important;
    line-height: 1.05 !important;
  }

  #overlay .resultStatCard,
  #overlay .resultScoreCard {
    padding: 7px 6px !important;
  }

  #overlay .highScoreEntry {
    padding: 8px !important;
  }
}


/* ===== Mobile title screen polish pass v18 =====
   Rounded title framing + improved mobile landscape start layout. */
.titleArtFrame {
  display: grid;
  place-items: center;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 12px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 208, 84, .18), transparent 42%),
    radial-gradient(circle at 82% 20%, rgba(0, 234, 255, .16), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(11, 16, 33, .94), rgba(8, 11, 22, .86));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 36px rgba(0,0,0,.34),
    0 0 0 1px rgba(255, 208, 84, .06);
}

.titleArtFrame .titleArt {
  border-radius: 18px;
}

@media (pointer: coarse), (max-width: 900px) {
  #overlay .titleArtFrame {
    width: min(100%, 640px) !important;
    max-width: 100% !important;
    padding: clamp(10px, 2.6vw, 14px) !important;
    border-radius: 22px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay .expertStartPanel {
    width: min(96vw, 1080px) !important;
    max-width: min(96vw, 1080px) !important;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 16px)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr) !important;
    grid-template-areas:
      "logo board"
      "actions board"
      "hint board"
      "smooth board" !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: clamp(14px, 2.3vw, 24px) !important;
    row-gap: clamp(8px, 1.5vw, 12px) !important;
    overflow: hidden !important;
  }

  #overlay .expertStartPanel > .titleArtFrame {
    grid-area: logo !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
  }

  #overlay .expertStartPanel .heroTitleArt,
  #overlay .expertStartPanel .titleArt,
  #overlay .expertStartPanel .expertLogo,
  #overlay .expertStartPanel .heroTitleArt.expertLogo {
    width: min(100%, 640px) !important;
    max-width: 100% !important;
    max-height: min(42dvh, 260px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #overlay .expertStartPanel .expertMenuActions {
    grid-area: actions !important;
    width: 100% !important;
    max-width: 560px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 auto !important;
  }

  #overlay .expertStartPanel .mobileInstallHint {
    grid-area: hint !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: -2px auto 0 !important;
    text-align: center !important;
  }

  #overlay .expertStartPanel .smoothModeBtn {
    grid-area: smooth !important;
    width: min(340px, 100%) !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  #overlay .expertStartPanel .leaderboardBox {
    grid-area: board !important;
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  #overlay .expertStartPanel .leaderboardBox h3 {
    font-size: 11px !important;
    margin: 0 0 8px !important;
  }

  #overlay .expertStartPanel .leaderboardRows {
    gap: 6px !important;
  }

  #overlay .expertStartPanel .leaderboardRow {
    min-height: 33px !important;
    height: auto !important;
    padding: 6px 7px !important;
    grid-template-columns: 22px 40px minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  #overlay .expertStartPanel .leaderboardRank {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  #overlay .expertStartPanel .leaderboardName {
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  #overlay .expertStartPanel .leaderboardChar {
    font-size: 8px !important;
  }

  #overlay .expertStartPanel .leaderboardScore {
    font-size: 11px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .expertStartPanel {
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .85fr) !important;
    row-gap: 6px !important;
  }

  #overlay .expertStartPanel > .titleArtFrame {
    padding: 10px !important;
  }

  #overlay .expertStartPanel .heroTitleArt,
  #overlay .expertStartPanel .titleArt,
  #overlay .expertStartPanel .expertLogo,
  #overlay .expertStartPanel .heroTitleArt.expertLogo {
    max-height: min(34dvh, 180px) !important;
  }

  #overlay .expertStartPanel .leaderboardBox {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    padding: 8px !important;
  }

  #overlay .expertStartPanel .leaderboardRow {
    min-height: 30px !important;
    padding: 5px 6px !important;
  }
}


/* ===== Title frame containment fix v19 =====
   Keeps the rounded logo frame inside the menu panel at all viewport sizes. */
#overlay .expertStartPanel {
  overflow-x: hidden;
}

#overlay .expertStartPanel > .titleArtFrame {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
}

#overlay .expertStartPanel > .titleArtFrame .titleArt {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Desktop/tablet resizing: let the title frame shrink with the panel instead of clipping. */
@media (min-width: 901px) {
  #overlay .expertStartPanel {
    box-sizing: border-box !important;
    width: min(94vw, 980px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #overlay .expertStartPanel > .titleArtFrame {
    width: min(100%, 860px) !important;
    padding: clamp(8px, 1.4vw, 14px) !important;
    border-radius: clamp(18px, 2vw, 26px) !important;
    margin-top: 0 !important;
  }

  #overlay .expertStartPanel > .titleArtFrame .heroTitleArt,
  #overlay .expertStartPanel > .titleArtFrame .titleArt,
  #overlay .expertStartPanel > .titleArtFrame .expertLogo {
    width: 100% !important;
    max-height: min(34dvh, 310px) !important;
    object-fit: contain !important;
    border-radius: clamp(12px, 1.5vw, 18px) !important;
  }
}

/* Mobile portrait: title stays inside the panel and leaves room for buttons/leaderboard. */
@media (pointer: coarse) and (orientation: portrait), (max-width: 900px) and (orientation: portrait) {
  #overlay .expertStartPanel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #overlay .expertStartPanel > .titleArtFrame {
    width: 100% !important;
    padding: 9px !important;
    border-radius: 20px !important;
  }

  #overlay .expertStartPanel > .titleArtFrame .heroTitleArt,
  #overlay .expertStartPanel > .titleArtFrame .titleArt,
  #overlay .expertStartPanel > .titleArtFrame .expertLogo {
    width: 100% !important;
    max-height: min(22dvh, 170px) !important;
    object-fit: contain !important;
    border-radius: 14px !important;
  }
}

/* Mobile landscape: make the logo frame fit the available column without top clipping. */
@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay .expertStartPanel {
    overflow: hidden !important;
  }

  #overlay .expertStartPanel > .titleArtFrame {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(7px, 1.4vw, 12px) !important;
    border-radius: 18px !important;
    align-self: center !important;
    justify-self: stretch !important;
  }

  #overlay .expertStartPanel > .titleArtFrame .heroTitleArt,
  #overlay .expertStartPanel > .titleArtFrame .titleArt,
  #overlay .expertStartPanel > .titleArtFrame .expertLogo,
  #overlay .expertStartPanel > .titleArtFrame .heroTitleArt.expertLogo {
    width: 100% !important;
    max-height: min(38dvh, 220px) !important;
    object-fit: contain !important;
    border-radius: 13px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .expertStartPanel > .titleArtFrame {
    padding: 7px !important;
    border-radius: 16px !important;
  }

  #overlay .expertStartPanel > .titleArtFrame .heroTitleArt,
  #overlay .expertStartPanel > .titleArtFrame .titleArt,
  #overlay .expertStartPanel > .titleArtFrame .expertLogo,
  #overlay .expertStartPanel > .titleArtFrame .heroTitleArt.expertLogo {
    max-height: min(30dvh, 145px) !important;
    border-radius: 11px !important;
  }
}


/* ===== Desktop title cleanup v20 =====
   Keep the framed title treatment on mobile only. Desktop gets a cleaner unboxed logo. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  #overlay .expertStartPanel > .titleArtFrame {
    width: min(100%, 900px) !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #overlay .expertStartPanel > .titleArtFrame .heroTitleArt,
  #overlay .expertStartPanel > .titleArtFrame .titleArt,
  #overlay .expertStartPanel > .titleArtFrame .expertLogo {
    width: min(100%, 860px) !important;
    max-height: min(37dvh, 330px) !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    filter:
      drop-shadow(0 16px 24px rgba(0,0,0,.56))
      drop-shadow(0 0 18px rgba(255, 208, 84, .16))
      drop-shadow(0 0 24px rgba(0, 234, 255, .12)) !important;
  }
}


/* ===== Mobile runtime performance fallback v21 ===== */
.mobileEmergencyMode * {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}


/* ===== Tour Complete screen v25 ===== */
.tourCompletePanel {
  max-width: min(96vw, 1040px) !important;
}

.tourCompletePanel .timesUpBanner {
  color: #fff4cb;
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 0 22px rgba(255, 212, 90, .30),
    0 0 34px rgba(0, 234, 255, .16);
}

.tourCompleteStamp {
  display: inline-grid;
  place-items: center;
  margin: 2px auto 4px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #231205;
  background: linear-gradient(180deg, #ffe777, #ff9a2e);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 0 24px rgba(255, 198, 54, .20);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.tourCompleteGrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px auto 8px;
}

.tourCompleteCard {
  min-width: 0;
  padding: 11px 10px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 212, 90, .12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(0,0,0,.28));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.18);
}

.tourCompleteCard span {
  display: block;
  color: rgba(238,241,255,.68);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.1;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.tourCompleteCard strong {
  display: block;
  margin-top: 5px;
  color: #fff4cb;
  font-size: clamp(17px, 2.1vw, 25px);
  line-height: 1;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0,0,0,.42);
  overflow-wrap: anywhere;
}

.tourCompleteScore {
  grid-column: span 2;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 92, .22), transparent 60%),
    linear-gradient(180deg, rgba(255, 153, 38, .18), rgba(0,0,0,.30));
  border-color: rgba(255, 226, 92, .26);
}

.tourCompleteScore strong {
  font-size: clamp(28px, 4.8vw, 54px);
  color: #ffffff;
}

.tourCompleteActions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
}

@media (max-width: 900px) {
  .tourCompleteGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tourCompleteCard {
    padding: 9px 8px;
  }

  .tourCompleteScore {
    grid-column: span 2;
  }

  .tourCompleteActions {
    grid-template-columns: 1fr;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay .tourCompletePanel {
    width: min(96vw, 1080px) !important;
  }

  #overlay .tourCompleteGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #overlay .tourCompleteCard {
    padding: 7px 6px !important;
    border-radius: 12px !important;
  }

  #overlay .tourCompleteCard span {
    font-size: 8px !important;
    letter-spacing: .55px !important;
  }

  #overlay .tourCompleteCard strong {
    font-size: clamp(13px, 3.1vh, 18px) !important;
  }

  #overlay .tourCompleteActions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {

  #overlay .tourCompleteCard {
    padding: 6px 5px !important;
  }
}


/* ===== Tour totals + mobile fit refinement v26 ===== */
.tourCompleteMenuActions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px;
}

#mainRestartTourBtn {
  border-color: rgba(255, 96, 123, .58) !important;
}

.tourCompletePanel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.tourCompletePanel .tourResultSub {
  max-width: 720px;
}

.tourCompleteGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tourCompleteScore {
  grid-column: span 2;
}

.tourCompleteActions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 560px !important;
}

@media (max-width: 900px) {
  .tourCompleteMenuActions {
    grid-template-columns: 1fr;
  }

  .tourCompleteGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .tourCompleteScore {
    grid-column: span 2 !important;
  }

  .tourCompleteActions {
    grid-template-columns: 1fr !important;
  }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 900px) and (orientation: portrait) {
  #overlay .tourCompletePanel {
    width: min(94vw, 560px) !important;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 18px)) !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  #overlay .tourCompletePanel h2 {
    font-size: clamp(25px, 7.5vw, 39px) !important;
  }

  #overlay .tourCompletePanel .timesUpBanner {
    font-size: clamp(14px, 4vw, 20px) !important;
  }

  #overlay .tourCompleteStamp {
    padding: 6px 11px !important;
    font-size: 9px !important;
    margin: 0 auto !important;
  }

  #overlay .tourCompleteGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 2px auto 6px !important;
  }

  #overlay .tourCompleteCard {
    padding: 8px 7px !important;
    border-radius: 13px !important;
  }

  #overlay .tourCompleteCard span {
    font-size: 8px !important;
    letter-spacing: .55px !important;
  }

  #overlay .tourCompleteCard strong {
    font-size: clamp(15px, 4.7vw, 22px) !important;
  }

  #overlay .tourCompleteScore strong {
    font-size: clamp(25px, 8vw, 38px) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay .tourCompletePanel {
    width: min(96vw, 1080px) !important;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 12px)) !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  #overlay .tourCompletePanel .tourResultSub {
    font-size: clamp(11px, 3vh, 14px) !important;
  }

  #overlay .tourCompleteGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #overlay .tourCompleteScore {
    grid-column: span 2 !important;
  }

  #overlay .tourCompleteCard {
    min-height: 0 !important;
    padding: 6px 5px !important;
    border-radius: 12px !important;
  }

  #overlay .tourCompleteCard span {
    font-size: 7.5px !important;
    letter-spacing: .45px !important;
  }

  #overlay .tourCompleteCard strong {
    margin-top: 3px !important;
    font-size: clamp(12px, 3.2vh, 18px) !important;
  }

  #overlay .tourCompleteScore strong {
    font-size: clamp(20px, 6vh, 34px) !important;
  }

  #overlay .tourCompleteActions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 520px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .tourCompletePanel h2 {
    font-size: clamp(22px, 6vh, 30px) !important;
  }

  #overlay .tourCompletePanel .timesUpBanner {
    font-size: clamp(13px, 4vh, 18px) !important;
  }

  #overlay .tourCompleteStamp {
    display: none !important;
  }

  #overlay .tourCompleteGrid {
    gap: 5px !important;
  }

  #overlay .tourCompleteCard {
    padding: 5px 5px !important;
  }
}


/* ===== Tour Complete cleanup v27 ===== */
.tourCompleteStamp {
  padding: 11px 22px !important;
  font-size: 14px !important;
  letter-spacing: 1.8px !important;
  border-radius: 999px !important;
}

.tourCompletePanel .tourResultSub:empty {
  display: none !important;
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 900px) and (orientation: portrait) {
  #overlay .tourCompleteStamp {
    padding: 9px 16px !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay .tourCompleteStamp {
    padding: 8px 15px !important;
    font-size: 10px !important;
    letter-spacing: 1.1px !important;
  }

  #overlay .tourCompleteGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .tourCompleteStamp {
    display: inline-grid !important;
    padding: 6px 12px !important;
    font-size: 9px !important;
  }
}


/* ===== Tour Complete balanced score/cash layout v28 ===== */
.tourCompleteBalancedGrid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-areas:
    "score score score cash cash cash"
    "beers beers setlists setlists picks picks" !important;
  align-items: stretch !important;
}

.tourCompleteBalancedGrid .tourCompleteCard {
  min-height: 102px;
  display: grid;
  align-content: center;
}

.tourCompleteScore {
  grid-area: score !important;
}

.tourCompleteCash {
  grid-area: cash !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(94, 255, 128, .26), transparent 62%),
    linear-gradient(180deg, rgba(68, 255, 104, .18), rgba(0,0,0,.30)) !important;
  border-color: rgba(92, 255, 133, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 26px rgba(61, 255, 101, .16),
    0 10px 22px rgba(0,0,0,.20) !important;
}

.tourCompleteCash span {
  color: rgba(205, 255, 216, .82) !important;
}

.tourCompleteCash strong {
  color: #63ff87 !important;
  font-size: clamp(28px, 4.8vw, 54px) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.42),
    0 0 20px rgba(87, 255, 120, .24) !important;
}

.tourCompletePickup:nth-of-type(3) {
  grid-area: beers !important;
}

.tourCompletePickup:nth-of-type(4) {
  grid-area: setlists !important;
}

.tourCompletePickup:nth-of-type(5) {
  grid-area: picks !important;
}

@media (max-width: 900px) {
  .tourCompleteBalancedGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "score cash"
      "beers setlists"
      "picks picks" !important;
  }

  .tourCompleteBalancedGrid .tourCompleteCard {
    min-height: 82px;
  }

  .tourCompleteCash strong {
    font-size: clamp(25px, 8vw, 38px) !important;
  }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 900px) and (orientation: portrait) {
  #overlay .tourCompleteBalancedGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "score cash"
      "beers setlists"
      "picks picks" !important;
  }

  #overlay .tourCompleteBalancedGrid .tourCompleteCard {
    min-height: 74px !important;
  }

  #overlay .tourCompleteCash strong {
    font-size: clamp(25px, 8vw, 38px) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  #overlay .tourCompleteBalancedGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-areas:
      "score score score cash cash cash"
      "beers beers setlists setlists picks picks" !important;
  }

  #overlay .tourCompleteBalancedGrid .tourCompleteCard {
    min-height: 58px !important;
  }

  #overlay .tourCompleteCash strong {
    font-size: clamp(20px, 6vh, 34px) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px), (max-width: 900px) and (orientation: landscape) and (max-height: 430px) {
  #overlay .tourCompleteBalancedGrid .tourCompleteCard {
    min-height: 50px !important;
  }
}


/* ===== Cash scoring clarity v29 ===== */
.tourCompleteCash span::after {
  content: " earned";
  opacity: .72;
  font-size: .82em;
}


/* ===== Final production polish v30 ===== */
.tourCompleteCash span::after {
  content: "" !important;
}

/* ===== V9 thumb-friendly mobile gameplay controls ===== */
@media (pointer: coarse), (max-width: 900px) {
  #gameShell {
    grid-template-rows: 36px minmax(0, 1fr) 118px !important;
  }

  canvas {
    max-height: calc(100dvh - 154px) !important;
  }

  #controls {
    --controlPanel: rgba(4, 5, 12, .94);
    display: grid !important;
    grid-template-columns: 1fr 1fr .18fr 1fr 1.16fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-template-areas:
      "left right spacer jump attack special"
      "duck duck spacer jump attack special" !important;
    align-items: stretch !important;
    gap: 8px !important;
    height: 118px !important;
    min-height: 118px !important;
    padding: 9px max(10px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    border-top: 1px solid rgba(0, 234, 255, .28) !important;
    background:
      radial-gradient(circle at 18% 50%, rgba(0, 234, 255, .15), transparent 34%),
      radial-gradient(circle at 78% 50%, rgba(255, 70, 32, .17), transparent 36%),
      linear-gradient(180deg, rgba(12, 16, 26, .86), var(--controlPanel)) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .42) !important;
    touch-action: none !important;
  }

  #leftBtn { grid-area: left !important; }
  #rightBtn { grid-area: right !important; }
  #duckBtn { grid-area: duck !important; }
  #jumpBtn { grid-area: jump !important; }
  #attackBtn { grid-area: attack !important; }
  #specialBtn { grid-area: special !important; }

  #controls .touchControlBtn {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 5px 4px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    font-family: Arial Black, Impact, Arial, sans-serif !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: .45px !important;
    text-transform: uppercase !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -8px 14px rgba(0,0,0,.30),
      0 7px 15px rgba(0,0,0,.42) !important;
    transform: translateZ(0) !important;
  }

  #controls .touchControlBtn::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, .10);
    pointer-events: none;
  }

  #controls .controlIcon {
    display: block;
    font-size: clamp(19px, 4.8vw, 31px);
    line-height: .9;
    text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 12px currentColor;
  }

  #controls .controlLabel {
    display: block;
    margin-top: 4px;
    font-size: clamp(8px, 2vw, 12px);
    line-height: 1;
    opacity: .94;
    text-shadow: 0 2px 0 rgba(0,0,0,.65);
  }

  #controls .moveControl {
    color: #dbfcff !important;
    background: linear-gradient(180deg, rgba(0,234,255,.34), rgba(5,24,36,.93)) !important;
  }

  #duckBtn {
    color: #f6edff !important;
    background: linear-gradient(180deg, rgba(180,105,255,.32), rgba(30,15,48,.93)) !important;
  }

  #jumpBtn {
    color: #fff4ca !important;
    background: linear-gradient(180deg, rgba(255,210,65,.42), rgba(80,42,0,.94)) !important;
  }

  #attackBtn {
    color: #fff0e7 !important;
    background: linear-gradient(180deg, rgba(255,92,44,.56), rgba(105,13,3,.96)) !important;
    border-color: rgba(255, 185, 115, .44) !important;
  }

  #attackBtn .controlIcon {
    font-size: clamp(25px, 6vw, 38px);
  }

  #specialBtn {
    color: #e8ffe7 !important;
    background: linear-gradient(180deg, rgba(80,255,91,.34), rgba(10,63,24,.95)) !important;
  }

  #specialBtn.ready {
    color: #07110a !important;
    background: linear-gradient(180deg, #faff94, #69ff5a 55%, #16b51f) !important;
    border-color: rgba(232, 255, 140, .70) !important;
    box-shadow:
      0 0 20px rgba(105, 255, 90, .55),
      inset 0 1px 0 rgba(255,255,255,.65),
      inset 0 -8px 14px rgba(0,0,0,.18),
      0 7px 15px rgba(0,0,0,.42) !important;
  }

  #controls .touchControlBtn.pressed,
  #controls .touchControlBtn.held,
  #controls .touchControlBtn:active {
    transform: translateY(2px) scale(.985) translateZ(0) !important;
    filter: brightness(1.14) saturate(1.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 8px 18px rgba(0,0,0,.34),
      0 3px 8px rgba(0,0,0,.38) !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #gameShell {
    grid-template-rows: 36px minmax(0, 1fr) 156px !important;
  }

  canvas {
    max-height: calc(100dvh - 192px) !important;
  }

  #controls {
    grid-template-columns: 1fr 1fr .14fr 1fr 1.16fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-template-areas:
      "left right spacer jump attack"
      "duck duck spacer special attack" !important;
    height: 156px !important;
    min-height: 156px !important;
    gap: 9px !important;
    padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  }

  #controls .controlIcon {
    font-size: clamp(23px, 6.8vw, 36px);
  }

  #controls .controlLabel {
    font-size: clamp(9px, 2.8vw, 13px);
  }

  #attackBtn .controlIcon {
    font-size: clamp(32px, 9vw, 46px);
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #gameShell {
    grid-template-rows: 34px minmax(0, 1fr) 104px !important;
  }

  canvas {
    max-height: calc(100dvh - 138px) !important;
  }

  #controls {
    height: 104px !important;
    min-height: 104px !important;
    grid-template-columns: .92fr .92fr 1fr .22fr 1fr 1.22fr 1fr !important;
    grid-template-areas:
      "left right duck spacer jump attack special"
      "left right duck spacer jump attack special" !important;
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #controls .controlIcon {
    font-size: clamp(18px, 3.5vw, 28px);
  }

  #controls .controlLabel {
    font-size: clamp(8px, 1.55vw, 11px);
  }
}

@media (pointer: coarse) and (max-height: 460px) and (orientation: landscape) {
  #gameShell {
    grid-template-rows: 32px minmax(0, 1fr) 82px !important;
  }

  canvas {
    max-height: calc(100dvh - 114px) !important;
  }

  #controls {
    height: 82px !important;
    min-height: 82px !important;
    gap: 6px !important;
    padding-top: 5px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
  }

  #controls .controlIcon {
    font-size: clamp(16px, 3.2vw, 23px);
  }

  #controls .controlLabel {
    margin-top: 2px;
    font-size: 8px !important;
  }
}


/* =========================================================
   Stage Dive Showdown V10: mobile control polish
   - Softer Special ready state
   - Text-arrow Left/Right buttons to match Duck button language
   ========================================================= */
@media (pointer: coarse), (max-width: 900px) {
  #leftBtn.textArrowControl .controlLabel,
  #rightBtn.textArrowControl .controlLabel {
    margin-top: 0 !important;
    font-size: clamp(15px, 3.4vw, 20px) !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    opacity: .98 !important;
  }

  #leftBtn.textArrowControl,
  #rightBtn.textArrowControl {
    color: #dbfcff !important;
    background: linear-gradient(180deg, rgba(0,234,255,.28), rgba(5,24,36,.93)) !important;
  }

  #specialBtn.ready {
    color: #effff0 !important;
    background: linear-gradient(180deg, rgba(132,255,112,.50), rgba(20,135,32,.96)) !important;
    border-color: rgba(205, 255, 148, .42) !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.42) !important;
    box-shadow:
      0 0 10px rgba(105, 255, 90, .22),
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -8px 14px rgba(0,0,0,.22),
      0 7px 15px rgba(0,0,0,.42) !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #leftBtn.textArrowControl .controlLabel,
  #rightBtn.textArrowControl .controlLabel {
    font-size: clamp(16px, 4vw, 22px) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #leftBtn.textArrowControl .controlLabel,
  #rightBtn.textArrowControl .controlLabel {
    font-size: clamp(13px, 2.2vw, 18px) !important;
  }
}


/* =========================================================
   Stage Dive Showdown V11: movement arrows match duck style
   - Left/Right now use solid triangle arrow icons like Duck
   ========================================================= */
@media (pointer: coarse), (max-width: 900px) {
  #leftBtn .controlIcon,
  #rightBtn .controlIcon {
    font-size: clamp(20px, 5vw, 31px) !important;
    line-height: .9 !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 12px currentColor !important;
  }

  #leftBtn .controlLabel,
  #rightBtn .controlLabel {
    margin-top: 4px !important;
    font-size: clamp(8px, 2vw, 12px) !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    opacity: .94 !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  #leftBtn .controlIcon,
  #rightBtn .controlIcon {
    font-size: clamp(23px, 6.8vw, 36px) !important;
  }

  #leftBtn .controlLabel,
  #rightBtn .controlLabel {
    font-size: clamp(9px, 2.8vw, 13px) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #leftBtn .controlIcon,
  #rightBtn .controlIcon {
    font-size: clamp(18px, 3.5vw, 28px) !important;
  }

  #leftBtn .controlLabel,
  #rightBtn .controlLabel {
    font-size: clamp(8px, 1.55vw, 11px) !important;
  }
}

@media (pointer: coarse) and (max-height: 460px) and (orientation: landscape) {
  #leftBtn .controlIcon,
  #rightBtn .controlIcon {
    font-size: clamp(16px, 3.2vw, 23px) !important;
  }

  #leftBtn .controlLabel,
  #rightBtn .controlLabel {
    margin-top: 2px !important;
    font-size: 8px !important;
  }
}


/* =========================================================
   Stage Dive Showdown V12: movement controls same color family
   - Left, Right, and Duck now share one matching movement-control palette
   ========================================================= */
@media (pointer: coarse), (max-width: 900px) {
  #leftBtn.moveControl,
  #rightBtn.moveControl,
  #duckBtn.moveControl,
  #duckBtn {
    color: #dbfcff !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 38%),
      linear-gradient(180deg, rgba(0,234,255,.34), rgba(5,24,36,.94)) !important;
    border-color: rgba(157, 245, 255, .28) !important;
  }

  #leftBtn.moveControl .controlIcon,
  #rightBtn.moveControl .controlIcon,
  #duckBtn.moveControl .controlIcon {
    color: #dbfcff !important;
  }

  #leftBtn.moveControl .controlLabel,
  #rightBtn.moveControl .controlLabel,
  #duckBtn.moveControl .controlLabel {
    color: #eaffff !important;
  }

  #leftBtn.moveControl.pressed,
  #rightBtn.moveControl.pressed,
  #duckBtn.moveControl.pressed,
  #leftBtn.moveControl.held,
  #rightBtn.moveControl.held,
  #duckBtn.moveControl.held,
  #leftBtn.moveControl:active,
  #rightBtn.moveControl:active,
  #duckBtn.moveControl:active {
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.22), transparent 40%),
      linear-gradient(180deg, rgba(0,234,255,.46), rgba(4,33,48,.98)) !important;
  }
}


/* =========================================================
   Stage Dive Showdown V14: softer Special ready state on mobile
   - Reduce orange glow and shadow blur
   - Keep star/text crisp and readable
   ========================================================= */
@media (pointer: coarse), (max-width: 900px) {
  #specialBtn.ready,
  #specialBtn.touchControlBtn.ready {
    color: #fff8ef !important;
    background: linear-gradient(180deg, rgba(255, 178, 92, .92), rgba(255, 114, 24, .96) 58%, rgba(185, 58, 8, .98)) !important;
    border-color: rgba(255, 214, 138, .44) !important;
    box-shadow:
      0 0 8px rgba(255, 156, 60, .18),
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 -6px 10px rgba(0,0,0,.14),
      0 7px 15px rgba(0,0,0,.30) !important;
    text-shadow: none !important;
    filter: none !important;
  }

  #specialBtn.ready .controlIcon,
  #specialBtn.ready .controlLabel,
  #specialBtn.touchControlBtn.ready .controlIcon,
  #specialBtn.touchControlBtn.ready .controlLabel {
    color: #fffaf4 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.22) !important;
    filter: none !important;
  }

  #specialBtn.ready .controlIcon,
  #specialBtn.touchControlBtn.ready .controlIcon {
    opacity: .98 !important;
  }
}


/* =========================================================
   Stage Dive Showdown V16: Options menu
   ========================================================= */
.optionsPanel {
  width: min(980px, 94vw);
}

.optionsLead {
  max-width: 720px;
  margin: 0 auto 18px !important;
  color: rgba(238, 244, 255, .84);
}

.optionsSection {
  width: min(820px, 100%);
  margin: 14px auto;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 20% 0%, rgba(0,234,255,.11), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: inset 0 0 22px rgba(255,255,255,.035), 0 14px 28px rgba(0,0,0,.24);
}

.optionsSectionTitle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.optionsSectionTitle span {
  color: #fff4c4;
  font-weight: 1000;
  font-size: clamp(17px, 2vw, 24px);
}

.optionsSectionTitle b {
  color: #8ffcff;
  font-size: clamp(13px, 1.4vw, 17px);
  text-align: right;
}

.difficultyChoices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.optionChoice {
  appearance: none;
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 134px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 0%, rgba(255,216,90,.12), transparent 58%);
  box-shadow: inset 0 0 16px rgba(255,255,255,.035), 0 10px 20px rgba(0,0,0,.22);
  cursor: pointer;
  text-align: center;
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.optionChoice:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.optionChoice span {
  display: block;
  color: #fff8d8;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}

.optionChoice small {
  color: rgba(236,242,255,.82);
  font-family: Arial, sans-serif;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 800;
  line-height: 1.25;
}

.optionChoice.selected {
  border-color: rgba(255,216,90,.9);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.05),
    0 0 0 2px rgba(255,216,90,.18),
    0 0 26px rgba(255,216,90,.24),
    0 12px 24px rgba(0,0,0,.24);
}

.optionChoice.selected::after {
  content: "SELECTED";
  justify-self: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #101010;
  background: linear-gradient(135deg, #fff09a, #ffbf30);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
}

/* =========================================================
   V35: Compact Options sound/smooth toggles
   - Previous switch pills were intentionally touch-friendly but too dominant.
   - Keep safe tap targets while making them look like controls, not main actions.
   ========================================================= */
.soundOptionsSection {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.soundToggle {
  justify-self: center;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: auto;
  min-width: 178px;
  max-width: min(240px, 100%);
  min-height: 46px;
  padding: 6px 14px 6px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: inset 0 0 10px rgba(255,255,255,.035), 0 7px 16px rgba(0,0,0,.22);
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: .065em;
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.soundToggle:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.soundToggle:active {
  transform: translateY(1px) scale(.99);
}

.soundToggleKnob {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #b8faff);
  box-shadow: 0 0 8px rgba(0,234,255,.26), inset 0 -4px 7px rgba(0,0,0,.18);
  transition: background .16s ease, box-shadow .16s ease;
}

.soundToggle strong {
  flex: 0 1 auto;
  min-width: 92px;
  text-align: left;
  white-space: nowrap;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 1000;
  line-height: 1;
}

.smoothToggle {
  min-width: 226px;
  max-width: min(285px, 100%);
}

.smoothToggle strong {
  min-width: 138px;
}

.soundToggle.on {
  border-color: rgba(110,255,140,.44);
  background: linear-gradient(135deg, rgba(0,234,255,.15), rgba(50,255,110,.16));
  box-shadow: inset 0 0 10px rgba(255,255,255,.035), 0 0 14px rgba(50,255,110,.10), 0 7px 16px rgba(0,0,0,.22);
}

.soundToggle.off {
  border-color: rgba(255,120,120,.30);
  background: linear-gradient(135deg, rgba(90,90,105,.20), rgba(25,25,34,.56));
  color: rgba(255,255,255,.72);
}

.soundToggle.off .soundToggleKnob {
  background: linear-gradient(135deg, #d8d8df, #777988);
  box-shadow: inset 0 -4px 7px rgba(0,0,0,.24);
}

.optionsActions {
  margin-top: 16px;
}

.gameBtnOptions {
  color: #cfffff !important;
  border-color: rgba(0,234,255,.36) !important;
}

@media (max-width: 820px), (pointer: coarse) {
  .optionsPanel {
    width: min(96vw, 760px);
    max-height: min(88dvh, 680px);
    overflow: auto;
  }

  .difficultyChoices {
    grid-template-columns: 1fr;
  }

  .optionChoice {
    min-height: 92px;
  }

  .optionsSection {
    padding: 13px;
  }
}



/* V35: keep compact toggles comfortably tappable on phones without making them huge. */
@media (max-width: 820px), (pointer: coarse) {
  .soundToggle {
    min-width: min(200px, 100%);
    max-width: 74vw;
    min-height: 48px;
    padding: 7px 13px 7px 7px;
    gap: 9px;
  }

  .soundToggleKnob {
    width: 32px;
    height: 32px;
  }

  .soundToggle strong {
    min-width: 92px;
    font-size: 12px;
  }

  .smoothToggle {
    min-width: min(236px, 100%);
    max-width: 82vw;
  }

  .smoothToggle strong {
    min-width: 138px;
  }
}


/* =========================================================
   Stage Dive Showdown V20: Mobile Smooth Mode moved to Options
   ========================================================= */
.smoothOptionsSection {
  gap: 8px;
}

.smoothOptionsHelp {
  width: min(620px, 100%);
  margin: 0 auto 18px !important;
  color: rgba(238, 244, 255, .76);
  font-family: Arial, sans-serif;
  font-size: clamp(12px, 1.25vw, 14px);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.smoothToggle.on {
  border-color: rgba(0,234,255,.50);
  background: linear-gradient(135deg, rgba(0,234,255,.22), rgba(187,0,255,.18));
}

.smoothToggle.off {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(90,90,105,.20), rgba(25,25,34,.62));
}

/* =========================================================
   V32 Clean Main Menu Live-Gig Effects
   Keeps: animated stage lights, bobbing crowd, subtle title pulse.
   Removed: speaker stacks, beer bubbles, small phone/cup/horns icons.
   ========================================================= */
.expertStartPanel {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 216, 90, .10), transparent 32%),
    radial-gradient(circle at 14% 22%, rgba(255, 47, 115, .10), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(0, 234, 255, .10), transparent 30%),
    linear-gradient(180deg, rgba(9,10,22,.90), rgba(0,0,0,.78)) !important;
}

.mainMenuStageFx,
.mainMenuStageFx * {
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.mainMenuStageFx {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.expertStartPanel > :not(.mainMenuStageFx) {
  position: relative !important;
  z-index: 3 !important;
}

/* 1) Animated stage lights */
.stageLight {
  position: absolute !important;
  top: -22% !important;
  width: 24% !important;
  height: 96% !important;
  opacity: .46 !important;
  mix-blend-mode: screen !important;
  filter: blur(2px) !important;
  transform-origin: 50% 0 !important;
  clip-path: polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%) !important;
}

.stageLightLeft {
  left: 4% !important;
  background: linear-gradient(180deg, rgba(255,47,115,.42), rgba(255,216,90,.13) 56%, transparent 100%) !important;
  animation: stageLightSweepLeft 7.4s ease-in-out infinite alternate !important;
}

.stageLightCenter {
  left: 38% !important;
  width: 26% !important;
  background: linear-gradient(180deg, rgba(255,216,90,.34), rgba(255,255,255,.10) 52%, transparent 100%) !important;
  animation: stageLightPulse 3.2s ease-in-out infinite !important;
}

.stageLightRight {
  right: 4% !important;
  background: linear-gradient(180deg, rgba(0,234,255,.44), rgba(187,0,255,.12) 58%, transparent 100%) !important;
  animation: stageLightSweepRight 8.1s ease-in-out infinite alternate !important;
}

/* 2) Crowd silhouette along the bottom, with no extra icon props */
.crowdSilhouette {
  position: absolute !important;
  left: -2% !important;
  right: -2% !important;
  bottom: -2px !important;
  height: clamp(52px, 9vw, 104px) !important;
  z-index: 2 !important;
  opacity: .82 !important;
  background:
    radial-gradient(circle at 7% 86%, #02040b 0 22px, transparent 23px),
    radial-gradient(circle at 18% 80%, #02040b 0 27px, transparent 28px),
    radial-gradient(circle at 30% 86%, #02040b 0 22px, transparent 23px),
    radial-gradient(circle at 43% 78%, #02040b 0 29px, transparent 30px),
    radial-gradient(circle at 56% 85%, #02040b 0 24px, transparent 25px),
    radial-gradient(circle at 70% 79%, #02040b 0 28px, transparent 29px),
    radial-gradient(circle at 83% 86%, #02040b 0 23px, transparent 24px),
    radial-gradient(circle at 95% 81%, #02040b 0 27px, transparent 28px),
    linear-gradient(180deg, transparent 30%, rgba(2,4,11,.96) 52%, #02040b 100%) !important;
  animation: crowdBob 1.7s ease-in-out infinite !important;
}

.crowdSilhouette span {
  position: absolute !important;
  bottom: 7px !important;
  width: clamp(22px, 4vw, 44px) !important;
  height: clamp(38px, 6vw, 70px) !important;
  border-radius: 999px 999px 10px 10px !important;
  background: #02040b !important;
}

.crowdSilhouette span:nth-child(1) { left: 5% !important; height: 66% !important; animation: crowdHand 2.2s ease-in-out infinite !important; }
.crowdSilhouette span:nth-child(2) { left: 15% !important; height: 52% !important; }
.crowdSilhouette span:nth-child(3) { left: 26% !important; height: 62% !important; animation: crowdHand 1.9s ease-in-out infinite reverse !important; }
.crowdSilhouette span:nth-child(4) { left: 39% !important; height: 48% !important; }
.crowdSilhouette span:nth-child(5) { left: 55% !important; height: 64% !important; animation: crowdHand 2.4s ease-in-out infinite !important; }
.crowdSilhouette span:nth-child(6) { left: 67% !important; height: 53% !important; }
.crowdSilhouette span:nth-child(7) { left: 78% !important; height: 60% !important; animation: crowdHand 2.1s ease-in-out infinite reverse !important; }
.crowdSilhouette span:nth-child(8) { left: 90% !important; height: 50% !important; }

/* 3) Title pulse: very small so it feels alive, not goofy */
.expertStartPanel .titleArtFrame,
.expertStartPanel > .titleArt.heroTitleArt {
  animation: titleBassPulse 2.05s ease-in-out infinite !important;
  transform-origin: 50% 55% !important;
  will-change: transform, filter !important;
}

@keyframes stageLightSweepLeft {
  0% { transform: rotate(-13deg) translateX(-8%); opacity: .31; }
  50% { opacity: .55; }
  100% { transform: rotate(11deg) translateX(18%); opacity: .42; }
}

@keyframes stageLightSweepRight {
  0% { transform: rotate(13deg) translateX(8%); opacity: .34; }
  50% { opacity: .56; }
  100% { transform: rotate(-11deg) translateX(-18%); opacity: .43; }
}

@keyframes stageLightPulse {
  0%, 100% { opacity: .24; transform: scaleX(.82); }
  42% { opacity: .48; transform: scaleX(1.04); }
  72% { opacity: .31; transform: scaleX(.94); }
}

@keyframes crowdBob {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-3px); }
}

@keyframes crowdHand {
  0%, 100% { transform: translateY(3px) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}

@keyframes titleBassPulse {
  0%, 100% {
    transform: scale(1);
    filter:
      drop-shadow(0 18px 30px rgba(0,0,0,.35))
      drop-shadow(0 0 18px rgba(0,234,255,.12))
      drop-shadow(0 0 18px rgba(255,43,214,.10));
  }
  48% {
    transform: scale(1.018);
    filter:
      drop-shadow(0 20px 34px rgba(0,0,0,.40))
      drop-shadow(0 0 24px rgba(0,234,255,.20))
      drop-shadow(0 0 24px rgba(255,43,214,.16));
  }
}

@media (max-width: 760px) {
  .crowdSilhouette { height: 48px !important; opacity: .68 !important; }
}

@media (max-height: 470px) and (orientation: landscape) {
  .crowdSilhouette { height: 34px !important; opacity: .52 !important; }
  .stageLight { opacity: .28 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .stageLight,
  .crowdSilhouette,
  .crowdSilhouette span,
  .expertStartPanel .titleArtFrame,
  .expertStartPanel > .titleArt.heroTitleArt {
    animation: none !important;
  }
}


/* ===== Main menu logo edge fade polish v33 =====
   The title art file now has real transparent feathered edges. These rules add a subtle stage haze behind it so the faded edges blend into the menu instead of looking cut out. */
#overlay .expertStartPanel > .titleArtFrame {
  position: relative !important;
  isolation: isolate !important;
}

#overlay .expertStartPanel > .titleArtFrame::before {
  content: "" !important;
  position: absolute !important;
  inset: -8% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 32px !important;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 208, 84, .13) 0%, rgba(255, 43, 214, .10) 36%, rgba(0, 234, 255, .08) 58%, transparent 76%) !important;
  filter: blur(18px) !important;
  opacity: .82 !important;
}

#overlay .expertStartPanel > .titleArt.heroTitleArt {
  border-radius: 0 !important;
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  #overlay .expertStartPanel > .titleArtFrame::before {
    inset: -10% !important;
    filter: blur(22px) !important;
    opacity: .74 !important;
  }
}

@media (pointer: coarse), (max-width: 900px) {
  #overlay .expertStartPanel > .titleArtFrame::before {
    inset: -5% !important;
    filter: blur(14px) !important;
    opacity: .62 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #overlay .expertStartPanel > .titleArtFrame::before {
    filter: blur(14px) !important;
  }
}

/* =========================================================
   V38 mobile menu compositor/performance pass
   ========================================================= */
@keyframes titleBassPulseMobile {
  0%, 100% { transform: scale(1); }
  48% { transform: scale(1.012); }
}

@media (pointer: coarse), (max-width: 900px) {
  .mainMenuStageFx {
    contain: layout paint style !important;
  }

  .stageLight {
    filter: none !important;
  }

  .expertStartPanel .titleArtFrame,
  .expertStartPanel > .titleArt.heroTitleArt {
    animation-name: titleBassPulseMobile !important;
    will-change: transform !important;
  }

  #overlay .expertStartPanel > .titleArtFrame::before {
    filter: blur(8px) !important;
  }
}

html.smoothMode .stageLight,
html.mobileEmergencyMode .stageLight {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: .22 !important;
}

html.smoothMode #overlay .expertStartPanel > .titleArtFrame::before,
html.mobileEmergencyMode #overlay .expertStartPanel > .titleArtFrame::before {
  filter: none !important;
  opacity: .32 !important;
}
/* v39 mobile performance: avoid a full-frame CSS filter pass on the animated canvas. */
@media (pointer: coarse), (max-width: 900px) {
  #game { filter: none !important; }
}

/* v41 production performance override: avoid an extra full-canvas compositor filter. */
#game{filter:none!important}

/* v42 production hardening: required-asset error state */
.assetErrorPanel {
  width: min(92vw, 620px);
  text-align: center;
}
.assetErrorPanel #assetErrorMessage {
  max-width: 52ch;
  margin: 10px auto 18px;
  overflow-wrap: anywhere;
  color: rgba(255, 244, 214, .92);
}
.assetErrorPanel .btnRow {
  justify-content: center;
}

/* ===== v44 mobile Special input feedback ===== */
@keyframes specialInputNudge {
  0%, 100% { transform: translateZ(0); }
  28% { transform: translateX(-3px) translateZ(0); }
  62% { transform: translateX(3px) translateZ(0); }
}

@media (pointer: coarse), (max-width: 900px) {
  #specialBtn.notReady,
  #specialBtn.blocked {
    animation: specialInputNudge 180ms ease-out !important;
  }

  #specialBtn.notReady {
    filter: brightness(.82) saturate(.72) !important;
  }

  #specialBtn.blocked {
    filter: brightness(.92) saturate(.82) !important;
  }

  #specialBox.notReady .fightSpecialMeter,
  #specialBox.blocked .fightSpecialMeter {
    outline: 1px solid rgba(255, 210, 120, .45);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #specialBtn.notReady,
  #specialBtn.blocked {
    animation: none !important;
  }
}

/* =========================================================
   Stage Dive Showdown v47: orientation-safe mobile menus
   - One responsive mobile How To Play layout in both orientations
   - Compact Options layout with visible controls and Back button
   - Safe-area-aware sizing for small phones and installed PWAs
   ========================================================= */
#overlay .mobileHowToPanel {
  width: min(94vw, 760px) !important;
  max-width: min(94vw, 760px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - max(18px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 12px)) !important;
  margin: auto !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-content: start !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges;
  box-sizing: border-box !important;
}

#overlay .mobileHowToPanel h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(30px, 9vw, 40px) !important;
  line-height: 1 !important;
  text-align: center !important;
}

#overlay .mobileHowToPanel .mobileHowIntro {
  display: block !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  color: #dfe9ff !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

#overlay .mobileHowContent {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#overlay .mobileHowToPanel .howSection {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
}

#overlay .mobileHowToPanel .howLabel {
  display: block !important;
  margin: 0 0 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 1.2px !important;
}

#overlay .mobileHowToPanel .mobileHowGoalList {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}

#overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem {
  display: grid !important;
  grid-template-columns: minmax(98px, .34fr) minmax(0, .66fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 8px 9px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

#overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem b {
  font-size: 13px !important;
  line-height: 1.08 !important;
}

#overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
  margin: 0 !important;
  color: #e7edff !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#overlay .mobileControlGuide {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

#overlay .mobileControlItem {
  display: grid !important;
  grid-template-columns: minmax(92px, .40fr) minmax(0, .60fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.055) !important;
  box-sizing: border-box !important;
}

#overlay .mobileControlItem b {
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
  text-shadow: 0 2px 0 #000 !important;
}

#overlay .mobileControlItem > span {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  color: #dfe8ff !important;
  font-family: Arial, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

#overlay .mobileControlChip {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 25px !important;
  height: 25px !important;
  padding: 0 5px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  color: #fff9df !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 7px rgba(0,0,0,.25) !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 1000 !important;
  box-sizing: border-box !important;
}

#overlay .mobileHowToPanel .mobileHowToActions {
  width: min(440px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  transform: none !important;
}

#overlay .mobileHowToPanel .mobileHowToActions .gameBtn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  #overlay .mobileHowToPanel {
    width: min(96vw, 920px) !important;
    max-width: min(96vw, 920px) !important;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 8px)) !important;
    padding: 9px 11px !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  #overlay .mobileHowToPanel h2 {
    font-size: clamp(24px, 6.2vh, 32px) !important;
  }

  #overlay .mobileHowToPanel .mobileHowIntro {
    display: none !important;
  }

  #overlay .mobileHowContent {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #overlay .mobileHowToPanel .howSection {
    padding: 7px 8px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }

  #overlay .mobileHowToPanel .howLabel {
    margin-bottom: 5px !important;
    font-size: 9px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList {
    gap: 4px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem {
    grid-template-columns: minmax(86px, .34fr) minmax(0, .66fr) !important;
    gap: 6px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem b {
    font-size: 10px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
    font-size: 8.4px !important;
    line-height: 1.12 !important;
  }

  #overlay .mobileControlGuide {
    gap: 3px !important;
  }

  #overlay .mobileControlItem {
    grid-template-columns: minmax(76px, .42fr) minmax(0, .58fr) !important;
    min-height: 0 !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
  }

  #overlay .mobileControlItem b {
    font-size: 9px !important;
  }

  #overlay .mobileControlItem > span {
    gap: 3px !important;
    font-size: 7.8px !important;
  }

  #overlay .mobileControlChip {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 3px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
  }

  #overlay .mobileHowToPanel .mobileHowToActions {
    width: min(420px, 66vw) !important;
    gap: 8px !important;
  }

  #overlay .mobileHowToPanel .mobileHowToActions .gameBtn {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
  }
}

@media (orientation: landscape) and (max-height: 340px) {
  #overlay .mobileHowToPanel {
    padding: 6px 8px !important;
    gap: 5px !important;
  }

  #overlay .mobileHowToPanel h2 {
    font-size: 21px !important;
  }

  #overlay .mobileHowToPanel .howSection {
    padding: 5px 6px !important;
  }

  #overlay .mobileHowToPanel .howLabel {
    margin-bottom: 3px !important;
    font-size: 8px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList {
    gap: 3px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem {
    grid-template-columns: minmax(72px, .34fr) minmax(0, .66fr) !important;
    gap: 4px !important;
    padding: 3px 5px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem b {
    font-size: 8.3px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
    font-size: 6.9px !important;
  }

  #overlay .mobileControlGuide {
    gap: 2px !important;
  }

  #overlay .mobileControlItem {
    grid-template-columns: minmax(66px, .42fr) minmax(0, .58fr) !important;
    padding: 3px 5px !important;
  }

  #overlay .mobileControlItem b {
    font-size: 7.8px !important;
  }

  #overlay .mobileControlItem > span {
    font-size: 6.8px !important;
  }

  #overlay .mobileControlChip {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
  }

  #overlay .mobileHowToPanel .mobileHowToActions .gameBtn {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  #overlay .optionsPanel {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 12px)) !important;
    margin: auto !important;
    padding: 13px !important;
    gap: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges;
    box-sizing: border-box !important;
  }

  #overlay .optionsPanel h2 {
    margin: 0 !important;
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1 !important;
  }

  #overlay .optionsLead {
    margin: 5px auto 7px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  #overlay .optionsSection {
    width: 100% !important;
    margin: 6px auto !important;
    padding: 9px !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
  }

  #overlay .optionsSectionTitle {
    gap: 8px !important;
    margin-bottom: 7px !important;
  }

  #overlay .optionsSectionTitle span {
    font-size: 14px !important;
  }

  #overlay .optionsSectionTitle b {
    font-size: 11px !important;
  }

  #overlay .difficultyChoices {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #overlay .optionChoice {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "optionName optionBadge" "optionDescription optionBadge" !important;
    align-content: center !important;
    align-items: center !important;
    gap: 3px 8px !important;
    min-height: 64px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  #overlay .optionChoice span {
    grid-area: optionName !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  #overlay .optionChoice small {
    grid-area: optionDescription !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #overlay .optionChoice.selected::after {
    grid-area: optionBadge !important;
    align-self: center !important;
    padding: 4px 6px !important;
    font-size: 7px !important;
  }

  #overlay .soundOptionsSection,
  #overlay .smoothOptionsSection {
    gap: 5px !important;
  }

  #overlay .smoothOptionsHelp {
    margin: 0 auto 7px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  #overlay .soundToggle,
  #overlay .smoothToggle {
    min-width: min(220px, 100%) !important;
    max-width: min(260px, 82vw) !important;
    min-height: 42px !important;
    padding: 5px 11px 5px 6px !important;
  }

  #overlay .soundToggleKnob {
    width: 28px !important;
    height: 28px !important;
  }

  #overlay .soundToggle strong,
  #overlay .smoothToggle strong {
    font-size: 11px !important;
  }

  #overlay .optionsActions {
    width: min(360px, 100%) !important;
    margin: 7px auto 0 !important;
    padding: 0 !important;
  }

  #overlay .optionsActions .gameBtn {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    font-size: 15px !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px),
       (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #overlay .optionsPanel {
    width: min(96vw, 920px) !important;
    max-width: min(96vw, 920px) !important;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 8px)) !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "optionsTitle optionsTitle"
      "difficulty difficulty"
      "sound smooth"
      "actions actions" !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  #overlay .optionsPanel h2 {
    grid-area: optionsTitle !important;
    font-size: clamp(23px, 6.2vh, 31px) !important;
  }

  #overlay .optionsLead {
    display: none !important;
  }

  #overlay .difficultyOptionsSection {
    grid-area: difficulty !important;
  }

  #overlay .soundOptionsSection {
    grid-area: sound !important;
  }

  #overlay .smoothOptionsSection {
    grid-area: smooth !important;
  }

  #overlay .optionsActions {
    grid-area: actions !important;
  }

  #overlay .optionsSection {
    margin: 0 !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
  }

  #overlay .optionsSectionTitle {
    margin-bottom: 5px !important;
  }

  #overlay .optionsSectionTitle span {
    font-size: 11px !important;
  }

  #overlay .optionsSectionTitle b {
    font-size: 9px !important;
  }

  #overlay .difficultyChoices {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #overlay .optionChoice {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "optionName" "optionDescription" "optionBadge" !important;
    justify-items: center !important;
    min-height: 70px !important;
    padding: 6px 7px !important;
    gap: 3px !important;
    text-align: center !important;
  }

  #overlay .optionChoice span {
    font-size: 11px !important;
  }

  #overlay .optionChoice small {
    font-size: 7.6px !important;
    line-height: 1.08 !important;
  }

  #overlay .optionChoice.selected::after {
    padding: 3px 5px !important;
    font-size: 6px !important;
  }

  #overlay .smoothOptionsHelp {
    display: none !important;
  }

  #overlay .soundToggle,
  #overlay .smoothToggle {
    min-width: min(190px, 100%) !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 4px 9px 4px 5px !important;
  }

  #overlay .soundToggleKnob {
    width: 26px !important;
    height: 26px !important;
  }

  #overlay .soundToggle strong,
  #overlay .smoothToggle strong {
    min-width: 0 !important;
    font-size: 9px !important;
  }

  #overlay .optionsActions {
    width: min(360px, 64vw) !important;
    margin: 0 auto !important;
  }

  #overlay .optionsActions .gameBtn {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
  }
}

@media (orientation: landscape) and (max-height: 340px) and (max-width: 760px) {
  #overlay .optionsPanel {
    padding: 6px 8px !important;
    row-gap: 4px !important;
  }

  #overlay .optionsPanel h2 {
    font-size: 21px !important;
  }

  #overlay .optionsSection {
    padding: 5px 6px !important;
  }

  #overlay .optionsSectionTitle {
    margin-bottom: 3px !important;
  }

  #overlay .optionsSectionTitle span {
    font-size: 9px !important;
  }

  #overlay .optionsSectionTitle b {
    font-size: 7.5px !important;
  }

  #overlay .optionChoice {
    min-height: 58px !important;
    padding: 4px 5px !important;
  }

  #overlay .optionChoice span {
    font-size: 9px !important;
  }

  #overlay .optionChoice small {
    font-size: 6.4px !important;
  }

  #overlay .optionChoice.selected::after {
    padding: 2px 4px !important;
    font-size: 5.4px !important;
  }

  #overlay .soundToggle,
  #overlay .smoothToggle {
    min-height: 34px !important;
  }

  #overlay .soundToggleKnob {
    width: 23px !important;
    height: 23px !important;
  }

  #overlay .optionsActions .gameBtn {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }
}

/* v47: isolate the new mobile guide from legacy named-grid rules. */
#overlay .mobileHowToPanel {
  grid-template-areas: none !important;
}

#overlay .mobileHowToPanel > h2,
#overlay .mobileHowToPanel > .mobileHowIntro,
#overlay .mobileHowToPanel > .mobileHowContent,
#overlay .mobileHowToPanel > .mobileHowToActions,
#overlay .mobileHowContent > .mobileHowGoals,
#overlay .mobileHowContent > .mobileHowControlsSection {
  grid-area: auto !important;
}

#overlay .mobileHowContent {
  grid-template-areas: none !important;
}

#overlay .mobileHowToPanel .mobileHowGoals,
#overlay .mobileHowToPanel .mobileHowControlsSection {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  justify-content: stretch !important;
}

#overlay .mobileHowToPanel .mobileControlGuide {
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

@media (orientation: portrait) and (max-width: 360px),
       (orientation: portrait) and (max-height: 650px) and (max-width: 430px) {
  #overlay .optionsPanel {
    padding: 8px !important;
  }

  #overlay .optionsPanel h2 {
    font-size: 27px !important;
  }

  #overlay .optionsLead {
    display: none !important;
  }

  #overlay .optionsSection {
    margin: 4px auto !important;
    padding: 7px !important;
    border-radius: 12px !important;
  }

  #overlay .optionsSectionTitle {
    margin-bottom: 4px !important;
  }

  #overlay .optionsSectionTitle span {
    font-size: 11px !important;
  }

  #overlay .optionsSectionTitle b {
    font-size: 9px !important;
  }

  #overlay .difficultyChoices {
    gap: 4px !important;
  }

  #overlay .optionChoice {
    min-height: 52px !important;
    padding: 6px 8px !important;
    gap: 2px 6px !important;
  }

  #overlay .optionChoice span {
    font-size: 12px !important;
  }

  #overlay .optionChoice small {
    font-size: 8.5px !important;
  }

  #overlay .optionChoice.selected::after {
    padding: 3px 5px !important;
    font-size: 6px !important;
  }

  #overlay .smoothOptionsHelp {
    display: none !important;
  }

  #overlay .soundToggle,
  #overlay .smoothToggle {
    min-height: 38px !important;
    padding: 4px 9px 4px 5px !important;
  }

  #overlay .soundToggleKnob {
    width: 25px !important;
    height: 25px !important;
  }

  #overlay .optionsActions {
    margin-top: 4px !important;
  }

  #overlay .optionsActions .gameBtn {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 13px !important;
  }
}

/* v48: keep the venue selector readable on the shortest landscape phones. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 620px) and (max-height: 360px),
       (orientation: landscape) and (max-width: 620px) and (max-height: 360px) {
  #overlay .mobileVenueCard.selected::after,
  #overlay .mobileVenueCard.locked::after {
    display: none !important;
  }

  #overlay .mobileVenueCard {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #overlay .mobileVenueCard span {
    font-size: clamp(8px, 1.8vw, 10px) !important;
    line-height: 1 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #overlay .mobileVenueCard small {
    font-size: clamp(6px, 1.25vw, 8px) !important;
    line-height: 1.05 !important;
  }
}



/* =========================================================
   Stage Dive Showdown v49: mobile orientation readability pass
   - Short portrait How to Play scrolls as one document, so actions never
     overlap Touch Controls or cover text.
   - Narrow portrait goal cards use a readable stacked layout.
   - Landscape informational text is larger; the shortest Options layout
     removes only long difficulty descriptions rather than shrinking them.
   ========================================================= */
@media (orientation: portrait) and (max-width: 430px) and (max-height: 680px) {
  #overlay .mobileHowToPanel {
    display: block !important;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 12px)) !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-bottom: 12px !important;
  }

  #overlay .mobileHowToPanel h2 {
    margin: 0 0 7px !important;
    font-size: clamp(28px, 9vw, 34px) !important;
  }

  #overlay .mobileHowToPanel .mobileHowIntro {
    margin: 0 auto 9px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #overlay .mobileHowContent {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: auto !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  #overlay .mobileHowToPanel .howSection {
    padding: 8px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem {
    padding: 7px 8px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem b {
    font-size: 13px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  #overlay .mobileControlItem {
    min-height: 36px !important;
  }

  #overlay .mobileHowToPanel .mobileHowToActions {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 9px auto 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: auto !important;
  }
}

@media (orientation: portrait) and (max-width: 340px) {
  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 3px !important;
    align-items: start !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem b,
  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
    width: 100% !important;
    text-align: left !important;
  }

  #overlay .mobileControlItem {
    grid-template-columns: minmax(92px, .42fr) minmax(0, .58fr) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem b {
    font-size: 10.5px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
    font-size: 9.1px !important;
    line-height: 1.15 !important;
  }

  #overlay .mobileControlItem b {
    font-size: 9.6px !important;
  }

  #overlay .mobileControlItem > span {
    font-size: 8.8px !important;
    line-height: 1.12 !important;
  }

  #overlay .optionChoice span {
    font-size: 12px !important;
  }

  #overlay .optionChoice small {
    font-size: 8.8px !important;
    line-height: 1.1 !important;
  }

  #overlay .optionChoice.selected::after {
    font-size: 7px !important;
  }

  #overlay .soundToggle strong,
  #overlay .smoothToggle strong {
    font-size: 10px !important;
  }
}

@media (orientation: landscape) and (max-height: 340px) and (max-width: 760px) {
  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem b {
    font-size: 9.4px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
    font-size: 8.6px !important;
    line-height: 1.12 !important;
  }

  #overlay .mobileControlItem b {
    font-size: 8.9px !important;
  }

  #overlay .mobileControlItem > span {
    font-size: 8.3px !important;
  }

  #overlay .optionChoice small {
    display: none !important;
  }

  #overlay .optionChoice {
    min-height: 52px !important;
    grid-template-areas: "optionName" "optionBadge" !important;
    align-content: center !important;
  }

  #overlay .optionChoice span {
    font-size: 10.8px !important;
  }

  #overlay .optionChoice.selected::after {
    font-size: 7px !important;
  }

  #overlay .optionsSectionTitle span,
  #overlay .soundToggle strong,
  #overlay .smoothToggle strong {
    font-size: 9.5px !important;
  }
}

/* v49 final viewport-safe sizing and minimum-readable landscape type. */
@media (max-width: 900px), (pointer: coarse) {
  #overlay .mobileHowToPanel,
  #overlay .optionsPanel {
    max-height: calc(100vh - 18px) !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #overlay .mobileHowToPanel,
  #overlay .optionsPanel {
    max-height: calc(100vh - 12px) !important;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  #overlay .mobileControlItem > span,
  #overlay .optionChoice small {
    font-size: 9.2px !important;
  }
}

@media (orientation: landscape) and (max-height: 340px) and (max-width: 760px) {
  #overlay .mobileHowToPanel .howLabel {
    font-size: 8.8px !important;
  }

  #overlay .mobileHowToPanel .mobileHowGoalList .howBulletItem i {
    font-size: 9px !important;
  }

  #overlay .mobileControlItem b {
    font-size: 9.2px !important;
  }

  #overlay .mobileControlItem > span {
    font-size: 8.8px !important;
  }

  #overlay .optionsSectionTitle b {
    font-size: 8.8px !important;
  }
}

/* =========================================================
   Stage Dive Showdown v51: redesigned Audio & Performance controls
   - The complete card is the control, eliminating nested pill switches.
   - Clear icon, label, help text and compact status badge.
   - Responsive across desktop, portrait and short landscape phones.
   ========================================================= */
.settingsOptionsSection {
  display: block !important;
}

.settingsSectionTitle {
  margin-bottom: 10px !important;
}

.settingsControlGrid {
  display: grid;
  gap: 9px;
  width: min(620px, 100%);
  margin: 0 auto;
}

.desktopSettingsControlGrid {
  width: 100%;
}

@media (min-width: 901px) {
  #overlay .settingsOptionsSection {
    width: min(560px, 100%);
    justify-self: center;
  }
}

.settingControlCard {
  --setting-accent: 0, 234, 255;
  appearance: none;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 15px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--setting-accent), .10), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.22);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .14s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}

.smoothSettingControl {
  --setting-accent: 255, 185, 55;
}

.settingControlCard::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 3px;
  background: rgba(var(--setting-accent), .68);
  opacity: .42;
  transition: opacity .16s ease, box-shadow .16s ease;
}

.settingControlCard:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--setting-accent), .44);
  filter: brightness(1.05);
}

.settingControlCard:active {
  transform: translateY(1px) scale(.995);
}

.settingControlCard:focus-visible {
  outline: 3px solid rgba(255, 224, 100, .92);
  outline-offset: 3px;
}

.settingControlCard.on {
  border-color: rgba(var(--setting-accent), .46);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--setting-accent), .18), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(var(--setting-accent), .07),
    0 9px 20px rgba(0,0,0,.24);
}

.settingControlCard.on::after {
  opacity: 1;
  box-shadow: 0 0 14px rgba(var(--setting-accent), .48);
}

.settingControlCard.off {
  border-color: rgba(255,255,255,.12);
}

.settingControlIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--setting-accent), .28);
  border-radius: 12px;
  color: rgb(var(--setting-accent));
  background: rgba(var(--setting-accent), .09);
  box-shadow: inset 0 0 12px rgba(var(--setting-accent), .05);
  transition: opacity .16s ease, filter .16s ease, background .16s ease;
}

.settingControlIcon svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.settingIconFill {
  fill: currentColor;
}

.settingIconStroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settingControlCard.off .settingControlIcon {
  opacity: .58;
  filter: saturate(.35);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.13);
}

.settingControlCopy {
  min-width: 0;
  text-align: left;
}

.settingControlCopy > span {
  display: block;
  color: #fff7d5;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.settingControlCopy > small {
  display: block;
  margin-top: 4px;
  color: rgba(236,242,255,.72);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.settingControlState {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: rgba(255,255,255,.76);
  background: rgba(7,8,15,.62);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.34);
}

.settingControlState i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #777b88;
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}

.settingControlState strong {
  min-width: 24px;
  color: inherit;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.settingControlCard.on .settingControlState {
  border-color: rgba(var(--setting-accent), .38);
  color: #f7fff9;
  background: rgba(var(--setting-accent), .12);
}

.settingControlCard.on .settingControlState i {
  background: #75ff9e;
  box-shadow: 0 0 8px rgba(80,255,135,.72), 0 0 0 3px rgba(80,255,135,.10);
}

@media (max-width: 900px), (pointer: coarse) {
  #overlay .settingsOptionsSection {
    gap: 0 !important;
  }

  #overlay .settingsControlGrid {
    width: 100%;
    gap: 7px;
  }

  #overlay .settingControlCard {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 54px;
    padding: 7px 9px;
    border-radius: 13px;
  }

  #overlay .settingControlIcon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  #overlay .settingControlIcon svg {
    width: 21px;
    height: 21px;
  }

  #overlay .settingControlCopy > span {
    font-size: 13px;
  }

  #overlay .settingControlCopy > small {
    margin-top: 3px;
    font-size: 10px;
  }

  #overlay .settingControlState {
    min-width: 57px;
    min-height: 28px;
    padding: 3px 7px;
    gap: 5px;
  }

  #overlay .settingControlState strong {
    min-width: 22px;
    font-size: 10px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px),
       (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #overlay .optionsPanel {
    grid-template-areas:
      "optionsTitle optionsTitle"
      "difficulty difficulty"
      "settings settings"
      "actions actions" !important;
  }

  #overlay .settingsOptionsSection {
    grid-area: settings !important;
  }

  #overlay .mobileSettingsControlGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #overlay .settingControlCard {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 46px;
    padding: 5px 7px;
    border-radius: 11px;
  }

  #overlay .settingControlIcon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  #overlay .settingControlIcon svg {
    width: 19px;
    height: 19px;
  }

  #overlay .settingControlCopy > span {
    font-size: 11px;
  }

  #overlay .settingControlCopy > small {
    margin-top: 2px;
    font-size: 8.5px;
    line-height: 1.05;
  }

  #overlay .settingControlState {
    min-width: 49px;
    min-height: 25px;
    padding: 2px 6px;
    gap: 4px;
  }

  #overlay .settingControlState i {
    width: 7px;
    height: 7px;
  }

  #overlay .settingControlState strong {
    min-width: 19px;
    font-size: 9px;
  }
}

@media (orientation: landscape) and (max-height: 340px) and (max-width: 760px) {
  #overlay .mobileSettingsControlGrid {
    gap: 5px;
  }

  #overlay .settingControlCard {
    grid-template-columns: 27px minmax(0, 1fr) 44px;
    gap: 5px;
    min-height: 38px;
    padding: 3px 5px;
    border-radius: 9px;
  }

  #overlay .settingControlCard::after {
    width: 2px;
  }

  #overlay .settingControlIcon {
    width: 27px;
    height: 27px;
    border-radius: 7px;
  }

  #overlay .settingControlIcon svg {
    width: 16px;
    height: 16px;
  }

  #overlay .settingControlCopy > span {
    font-size: 9.7px;
    letter-spacing: .025em;
  }

  #overlay .settingControlCopy > small {
    display: none;
  }

  #overlay .settingControlState {
    min-width: 44px;
    min-height: 22px;
    padding: 2px 4px;
  }

  #overlay .settingControlState i {
    width: 6px;
    height: 6px;
  }

  #overlay .settingControlState strong {
    min-width: 17px;
    font-size: 8px;
  }
}

/* =========================================================
   Stage Dive Showdown v52: iPhone landscape safe-area hardening
   - Use the overlay content box instead of viewport-width panels.
   - Prevent 100vw from extending menus/canvas beneath the notch.
   - Keep HUD controls inside left/right safe areas during gameplay.
   ========================================================= */
@media (max-width: 900px), (pointer: coarse) {
  html,
  body,
  #gameShell,
  #canvasWrap,
  #game {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #overlay {
    box-sizing: border-box !important;
  }

  #overlay .panel,
  #overlay .panel.panelHero,
  #overlay .expertStartPanel,
  #overlay .pausePanel,
  #overlay .howToPlayPanel,
  #overlay .optionsPanel,
  #overlay .characterSelectPanel,
  #overlay .venueSelectPanel,
  #overlay .mobileStepPanel,
  #overlay .resultPanel,
  #overlay .tourCompletePanel {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #overlay .expertStartPanel > .titleArtFrame,
  #overlay .heroTitleArt,
  #overlay .titleArt,
  #overlay .expertLogo {
    max-width: 100% !important;
  }
}

@media (max-width: 900px) and (orientation: landscape),
       (pointer: coarse) and (orientation: landscape) {
  #topHud {
    padding-left: max(6px, env(safe-area-inset-left)) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  #overlay .panel,
  #overlay .panel.panelHero,
  #overlay .expertStartPanel,
  #overlay .pausePanel,
  #overlay .howToPlayPanel,
  #overlay .optionsPanel,
  #overlay .characterSelectPanel,
  #overlay .venueSelectPanel,
  #overlay .mobileStepPanel,
  #overlay .resultPanel,
  #overlay .tourCompletePanel {
    width: min(1080px, 100%) !important;
  }
}


/* =========================================================
   Stage Dive Showdown v54: iOS gameplay gesture hardening
   - Prevent pinch/double-tap zoom while the run is active.
   - Prevent text/icon selection and Safari callouts on game UI.
   - Keep menu forms and scrollable instructions unaffected.
   ========================================================= */
#gameShell button,
#gameShell button *,
#topHud,
#topHud *,
#bottomHud,
#bottomHud *,
#combatHud,
#combatHud *,
#controls,
#controls * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

body.gameplayActive,
body.gameplayActive #gameShell,
body.gameplayActive #canvasWrap,
body.gameplayActive #game,
body.gameplayActive #topHud,
body.gameplayActive #topHud *,
body.gameplayActive #bottomHud,
body.gameplayActive #bottomHud *,
body.gameplayActive #combatHud,
body.gameplayActive #combatHud *,
body.gameplayActive #controls,
body.gameplayActive #controls * {
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* v55: keep iPhone Safari from enlarging text-based control icons/labels.
   The v54 shell-wide 100% override could trigger visible text autosizing on some iPhones. */
body.gameplayActive #controls,
body.gameplayActive #controls button,
body.gameplayActive #controls .controlIcon,
body.gameplayActive #controls .controlLabel {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* =========================================================
   Stage Dive Showdown v77: Chrome touch magnifier hardening
   - Apply gesture protection to every touch-capable browser.
   - Keep nested control text from becoming a native long-press target.
   - Keep control feedback stable without scale/zoom animation.
   ========================================================= */
html.touchInputGame,
html.touchInputGame body.gameplayActive,
html.touchInputGame body.gameplayActive #gameShell,
html.touchInputGame body.gameplayActive #canvasWrap,
html.touchInputGame body.gameplayActive #controls {
  touch-action: none !important;
  overscroll-behavior: none !important;
}

html.touchInputGame body.gameplayActive #controls,
html.touchInputGame body.gameplayActive #controls .touchControlBtn,
html.touchInputGame body.gameplayActive #controls .touchControlBtn * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: none !important;
}

html.touchInputGame body.gameplayActive #controls .touchControlBtn {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* The icon and label are visual content only. Targeting the button itself avoids
   Chrome/WebKit treating glyph text as something to magnify or select. */
html.touchInputGame body.gameplayActive #controls .controlIcon,
html.touchInputGame body.gameplayActive #controls .controlLabel {
  pointer-events: none !important;
}

/* Preserve tactile feedback without resizing a control under the player's thumb. */
html.touchInputGame body.gameplayActive #controls .touchControlBtn:active,
html.touchInputGame body.gameplayActive #controls .touchControlBtn.pressed,
html.touchInputGame body.gameplayActive #controls .touchControlBtn.held {
  transform: translateY(2px) translateZ(0) !important;
}