/* =========================================================================
   LUMISWEEP — css/styles.css  (UI agent)
   Dark glassmorphism · neon #7c4dff → #00e5ff · mobile-first
   ========================================================================= */

:root {
  --ms-bg: #05070f;
  --ms-neon1: #7c4dff;
  --ms-neon2: #00e5ff;
  --ms-text: #e8ecff;
  --ms-dim: #8a94b8;
  --ms-glass: rgba(16, 22, 40, 0.55);
  --ms-glass-deep: rgba(10, 14, 28, 0.78);
  --ms-line: rgba(140, 175, 255, 0.22);
  --ms-line-hi: rgba(0, 229, 255, 0.55);
  --ms-danger: #ff5370;
  --ms-ok: #69f0ae;
  --ms-gold: #ffd54f;
  --ms-accent: #00e5ff;
  --ms-safe-t: env(safe-area-inset-top, 0px);
  --ms-safe-b: env(safe-area-inset-bottom, 0px);
  --ms-safe-l: env(safe-area-inset-left, 0px);
  --ms-safe-r: env(safe-area-inset-right, 0px);

  /* ---- jelly-gem tile theme (the board is Canvas-rendered) ----------------- */
  /* --- DOCUMENTATION ONLY: the tile body is baked in renderer.js
     _paintGlassTiles() and tinted per-stage from the THEME palette, so these
     describe the default deep-sea look but are NOT read at runtime. --- */
  --tile-jelly-bg: rgba(16, 26, 48, 0.46);     /* closed gel body (translucent) */
  --tile-jelly-inner: rgba(12, 34, 56, 0.34);  /* deeper gel pool toward the base */
  --tile-jelly-edge: rgba(150, 205, 255, 0.80);/* glossy rim lip */
  --tile-jelly-highlight: rgba(255, 255, 255, 0.74); /* soft top-left gloss point */
  --tile-jelly-shadow: rgba(2, 8, 16, 0.20);   /* inner thickness shadow */
  --tile-jelly-rim: rgba(120, 225, 255, 0.40); /* soft cyan chromatic rim */
  --tile-selected-glow: var(--ms-accent);      /* selected-tile inner brighten */
  --tile-open-jelly-bg: rgba(10, 16, 30, 0.26);/* opened gel receptacle floor */
  --tile-open-edge: rgba(0, 229, 255, 0.42);   /* thin cyan rim on opened tile */
  /* --- READ AT RUNTIME by renderer.js _readVfxVars (parseFloat = unitless;
     str = CSS color). Tune interaction feel here. --- */
  --tile-press-duration: 140;                  /* unitless ms — ぷにっ press-sink */
  --tile-jelly-press-squash: 0.05;             /* press squash (wider + shorter) */
  --tile-glint-duration: 360;                  /* unitless ms — soft gloss sweep */
  --tile-ripple-duration: 440;                 /* unitless ms — tap ripple */
  --tile-jelly-bloom-duration: 200;            /* unitless ms — inner light bloom */
  --tile-ripple-color: rgba(150, 235, 255, 0.9);
  --tile-sparkle-color: #bfefff;
  --tile-jelly-bloom-color: rgba(178, 240, 255, 0.92);
  --ms-font: -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --app-height: 100vh;
}

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

@supports (height: 100svh) {
  :root { --app-height: 100svh; }
}

/* ------------------------------- reset -------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ms-bg);
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  font-family: var(--ms-font);
  color: var(--ms-text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  line-height: 1.45;
}

button {
  font-family: inherit;
  -webkit-user-select: none;
  user-select: none;
}

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: var(--ms-bg);
}

#ui-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none; /* interactive children re-enable */
  font-family: var(--ms-font);
  color: var(--ms-text);
}

/* ---- background / environment-light stack (js/backgrounds.js) -------------
   One explicit z-order so taps/UI are never stolen:
   photoreal image (z1) < canvas (z2) < stage-vfx (z4) < env-light (z5) < #ui-root (z10).
   All bg/env/vfx layers are pointer-events:none. The env glow + vfx ambient are
   transparent over the board centre (readability) and capped low (glow <=0.14,
   reactions <=0.22). The center-dim lives in the image layer (z1, below canvas)
   so it only tames a bright PHOTO, never the board. */
#game-canvas { z-index: 2; }
#stage-bg-back,
#stage-vfx-front,
#stage-env-front { position: fixed; inset: 0; pointer-events: none; }
#stage-bg-back { z-index: 1; }
#stage-vfx-front { z-index: 4; }
#stage-env-front { z-index: 5; }
#stage-env-front > *,
#stage-vfx-front > *,
#stage-bg-back > * { position: absolute; inset: 0; pointer-events: none; }

.stage-bg-img {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
/* readability center-dim — only meaningful once a (possibly bright) photo is in.
   Darkens the photo showing through the transparent board centre; transparent at
   the edges so the scenery still reads. Inert in procedural mode (canvas covers). */
.stage-bg-dim {
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(2, 4, 10, 0.92) 0%, rgba(2, 4, 10, 0.55) 38%, transparent 72%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.bg-image-active .stage-bg-dim { opacity: var(--bg-center-dim, 0.12); }
.stage-env-glow {
  background: radial-gradient(ellipse 125% 115% at 50% 47%,
    transparent 0%, transparent 44%, var(--g, var(--env-primary, #41d6ff)) 100%);
  mix-blend-mode: screen;
  opacity: 0.11;
  animation: env-breathe 7s ease-in-out infinite;
}
.stage-env-flash {
  background: radial-gradient(ellipse 130% 120% at 50% 48%,
    transparent 30%, var(--fc, var(--env-primary, #41d6ff)) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.stage-env-vignette {
  background: radial-gradient(ellipse 132% 122% at 50% 48%,
    transparent 42%, rgba(2, 4, 12, 0.5) 100%);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
@keyframes env-breathe { 0%, 100% { opacity: 0.085; } 50% { opacity: 0.13; } }

/* reactions — peak <=0.22, concentrated at the edges */
#stage-env-front.fx-tap   .stage-env-flash { opacity: 0.12; --fc: var(--env-primary); transition-duration: 0.12s; }
#stage-env-front.fx-combo .stage-env-flash { opacity: 0.18; --fc: var(--env-accent);  transition-duration: 0.12s; }
#stage-env-front.fx-damage .stage-env-flash { opacity: 0.22; --fc: var(--env-danger); transition-duration: 0.05s; }
#stage-env-front.fx-damage .stage-env-vignette { opacity: 1; }
#stage-env-front.fx-clear .stage-env-flash { opacity: 0.20; --fc: var(--env-clear);  transition-duration: 0.5s; }

/* settings modes */
#stage-env-front.env-off { display: none; }
#stage-env-front.env-static .stage-env-glow { animation: none; opacity: 0.1; }
#stage-env-front.env-lite .stage-env-glow,
#stage-env-front.env-lite .stage-env-flash { mix-blend-mode: normal; opacity: 0.06; }
#stage-env-front.env-lite .stage-env-glow { animation: none; }

/* ---- stage VFX layer (z4) — per-stage ambient motion + reactions ----------
   Edge-weighted (transparent centre) so it never touches board readability.
   Pure CSS animation => ~zero per-frame JS. Tunable via the --bg-* vars. */
:root {
  --bg-center-dim: 0.12;
  --bg-edge-glow: 0.12;
  --bg-vfx-opacity: 1;
  --bg-motion-scale: 1;
  --bg-combo-reactivity: 0;
  --vfx-react-strength: 1;
  --vfx-tint: #41d6ff; --vfx-accent: #8fefff; --vfx-danger: #ff5a6e; --vfx-clear: #eafcff;
}
.stage-vfx-ambient {
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateZ(0);
}
.stage-vfx-react {
  background: radial-gradient(ellipse 138% 128% at 50% 50%,
    transparent 48%, var(--rc, var(--vfx-tint)) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* per-stage ambients — corner/edge radials, slow compositor-only motion.
   opacity scales gently with combo (development) and the global vfx opacity.
   will-change is scoped HERE (only once a stage is active + animating). */
#stage-vfx-front[data-vfx] .stage-vfx-ambient {
  opacity: calc(0.10 * var(--bg-vfx-opacity) * (1 + 0.8 * var(--bg-combo-reactivity)));
  will-change: transform, opacity;
}
#stage-vfx-front[data-vfx="caustics"] .stage-vfx-ambient {
  background:
    radial-gradient(ellipse 58% 48% at 20% 16%, var(--vfx-tint) 0%, transparent 56%),
    radial-gradient(ellipse 54% 46% at 82% 82%, var(--vfx-accent) 0%, transparent 56%);
  animation: vfx-drift calc(17s * var(--bg-motion-scale)) ease-in-out infinite;
}
#stage-vfx-front[data-vfx="godray"] .stage-vfx-ambient {
  background:
    radial-gradient(ellipse 60% 46% at 8% 0%, var(--vfx-tint) 0%, transparent 58%),
    radial-gradient(ellipse 54% 42% at 96% 100%, var(--vfx-accent) 0%, transparent 58%);
  animation: vfx-sheen calc(13s * var(--bg-motion-scale)) ease-in-out infinite;
}
#stage-vfx-front[data-vfx="stars"] .stage-vfx-ambient {
  background: radial-gradient(ellipse 80% 55% at 50% 8%, var(--vfx-tint) 0%, transparent 62%);
  opacity: calc(0.06 * var(--bg-vfx-opacity) * (1 + 1.1 * var(--bg-combo-reactivity)));
  animation: vfx-twinkle calc(9s * var(--bg-motion-scale)) ease-in-out infinite;
}
#stage-vfx-front[data-vfx="aurora"] .stage-vfx-ambient {
  background:
    radial-gradient(ellipse 70% 30% at 35% 14%, var(--vfx-tint) 0%, transparent 62%),
    radial-gradient(ellipse 60% 26% at 72% 22%, var(--vfx-accent) 0%, transparent 62%);
  animation: vfx-pan calc(19s * var(--bg-motion-scale)) ease-in-out infinite;
}
#stage-vfx-front[data-vfx="lava"] .stage-vfx-ambient {
  background:
    radial-gradient(ellipse 90% 55% at 50% 108%, var(--vfx-danger) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 14% 96%, var(--vfx-tint) 0%, transparent 64%);
  opacity: calc(0.12 * var(--bg-vfx-opacity) * (1 + 0.7 * var(--bg-combo-reactivity)));
  animation: vfx-pulse calc(5.5s * var(--bg-motion-scale)) ease-in-out infinite;
}
#stage-vfx-front[data-vfx="moon"] .stage-vfx-ambient {
  background: radial-gradient(ellipse 50% 64% at 50% -8%, var(--vfx-tint) 0%, transparent 58%);
  animation: vfx-pulse calc(11s * var(--bg-motion-scale)) ease-in-out infinite;
}
#stage-vfx-front[data-vfx="nebula"] .stage-vfx-ambient {
  background:
    radial-gradient(ellipse 64% 60% at 26% 30%, var(--vfx-tint) 0%, transparent 58%),
    radial-gradient(ellipse 58% 56% at 78% 72%, var(--vfx-accent) 0%, transparent 58%);
  animation: vfx-swirl calc(26s * var(--bg-motion-scale)) ease-in-out infinite;
}
#stage-vfx-front[data-vfx="dawn"] .stage-vfx-ambient {
  background:
    radial-gradient(ellipse 120% 50% at 50% 112%, var(--vfx-tint) 0%, transparent 58%),
    radial-gradient(ellipse 95% 42% at 50% -12%, var(--vfx-accent) 0%, transparent 60%);
  opacity: calc(0.10 * var(--bg-vfx-opacity) * (1 + 0.8 * var(--bg-combo-reactivity)));
  animation: vfx-pulse calc(9s * var(--bg-motion-scale)) ease-in-out infinite;
}

@keyframes vfx-drift  { 0%,100% { transform: translate3d(0,0,0) scale(1);      } 50% { transform: translate3d(1.5%,-1.5%,0) scale(1.06); } }
@keyframes vfx-sheen  { 0%,100% { transform: translate3d(-5%,2%,0) scale(1); } 50% { transform: translate3d(5%,-2%,0) scale(1.05); } }
@keyframes vfx-twinkle{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes vfx-pan    { 0%,100% { transform: translate3d(-3%,0,0); } 50% { transform: translate3d(4%,1%,0); } }
@keyframes vfx-pulse  { 0%,100% { transform: scale(1);    opacity: .09; } 50% { transform: scale(1.07); opacity: .15; } }
@keyframes vfx-swirl  { 0%,100% { transform: translate3d(-2%,-1%,0) rotate(-4deg) scale(1.04); } 50% { transform: translate3d(2%,1%,0) rotate(4deg) scale(1.06); } }

/* reactions — edge-weighted, peak <=0.18; clear blooms outward */
#stage-vfx-front.vfx-tap   .stage-vfx-react { opacity: calc(0.05 * var(--vfx-react-strength)); --rc: var(--vfx-tint);   transition-duration: 0.12s; }
#stage-vfx-front.vfx-combo .stage-vfx-react { opacity: calc(0.10 * var(--vfx-react-strength)); --rc: var(--vfx-accent);  transition-duration: 0.12s; }
#stage-vfx-front.vfx-damage .stage-vfx-react { opacity: calc(0.16 * var(--vfx-react-strength)); --rc: var(--vfx-danger); transition-duration: 0.05s; }
#stage-vfx-front.vfx-clear .stage-vfx-react { opacity: 0.16; --rc: var(--vfx-clear); transform: scale(1.18); transition-duration: 0.6s; }

/* settings modes — drop will-change in non-animating states so the GPU can
   release the promoted texture (less memory pressure on low-RAM phones). */
#stage-vfx-front.vfx-off { display: none; }
#stage-vfx-front.vfx-static .stage-vfx-ambient { animation: none; will-change: auto; }
#stage-vfx-front.vfx-lite .stage-vfx-ambient { mix-blend-mode: normal; animation: none; opacity: 0.05; will-change: auto; }
#stage-vfx-front.vfx-lite .stage-vfx-react { mix-blend-mode: normal; }
#stage-vfx-front.vfx-paused .stage-vfx-ambient { animation-play-state: paused; will-change: auto; }
/* game pause also calms the env-light breathing (see MS.stageVfx.pause) */
#stage-env-front.env-paused .stage-env-glow { animation-play-state: paused; }

/* photoreal image mode: let the layer behind show through the canvas */
body.bg-image-active #game-canvas { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .stage-env-glow { animation: none; opacity: 0.09; }
  .stage-bg-img { transition: none; }
  .stage-vfx-ambient { animation: none !important; }
  /* no scale/transition motion on the reaction washes for vestibular safety */
  .stage-vfx-react { transition: none !important; transform: none !important; }
  .stage-env-flash { transition: none !important; }
}

/* --------------------------- shared utilities -------------------------- */

.ms-fade {
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ------------------------------- buttons ------------------------------- */

.ms-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 14px;
  border: 1px solid var(--ms-line);
  background: var(--ms-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--ms-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(180, 210, 255, 0.10);
  transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.4, 1),
              border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ms-btn:hover {
  border-color: var(--ms-line-hi);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 229, 255, 0.22),
              inset 0 1px 0 rgba(180, 210, 255, 0.14);
  transform: translateY(-1px);
}

.ms-btn:active { transform: scale(0.95); }

.ms-btn:focus-visible {
  border-color: var(--ms-neon2);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.35);
}

.ms-btn.primary {
  background: linear-gradient(135deg, var(--ms-neon1), var(--ms-neon2));
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  text-shadow: 0 1px 6px rgba(10, 14, 31, 0.45);
  box-shadow: 0 6px 24px rgba(124, 77, 255, 0.45), 0 0 22px rgba(0, 229, 255, 0.30);
}

.ms-btn.primary:hover {
  box-shadow: 0 8px 30px rgba(124, 77, 255, 0.55), 0 0 30px rgba(0, 229, 255, 0.40);
}

.ms-btn.ghost {
  background: rgba(12, 17, 34, 0.35);
}

.ms-btn.ms-wide {
  width: 100%;
}

.ms-iconbtn {
  min-width: 48px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
}

/* ----------------------------- title screen ---------------------------- */

.ms-screen {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.ms-title {
  z-index: 60;
  min-height: var(--app-height);
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 28%,
              rgba(5, 7, 15, 0.05) 0%, rgba(5, 7, 15, 0.62) 100%);
}

.ms-title-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  min-height: var(--app-height);
  box-sizing: border-box;
  padding: calc(26px + var(--ms-safe-t)) calc(18px + var(--ms-safe-r))
           calc(18px + var(--ms-safe-b)) calc(18px + var(--ms-safe-l));
  gap: 8px;
}

.ms-logo {
  position: relative;
  overflow: hidden;
  margin: 8px 0 0;
  font-size: clamp(46px, 9.5vw, 92px);
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.05;
  background: linear-gradient(100deg,
      var(--ms-neon1) 0%, var(--ms-neon2) 30%, #b388ff 55%,
      var(--ms-neon2) 75%, var(--ms-neon1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.35))
          drop-shadow(0 4px 28px rgba(124, 77, 255, 0.30));
}

/* Compositor-only sheen: a narrow translucent diagonal highlight that sweeps
   across the glyph box via transform (GPU-composited). Replaces the old
   ms-shimmer background-position animation, which re-rasterized the
   background-clip:text glyphs every frame (CPU paint path on mobile Safari).
   overflow:hidden on the host confines the band to the text box; because it
   clips the pseudo BEFORE the drop-shadow filter runs, the neon glow survives. */
.ms-logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.55) 50%,
      transparent 62%);
  transform: translateX(-120%);
  animation: ms-sheen 5s linear infinite;
}

@keyframes ms-sheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.ms-subtitle {
  font-size: clamp(13px, 2.6vw, 17px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--ms-dim);
  margin-bottom: 10px;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
}

.ms-title.enter .ms-logo {
  animation: ms-riseIn 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}

.ms-title.enter .ms-subtitle {
  animation: ms-riseIn 0.7s 0.12s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}

@keyframes ms-riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* mode cards */

.ms-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 300px));
  gap: 16px;
  justify-content: center;
  align-content: start;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 77, 255, 0.5) transparent;
}

.ms-cards::-webkit-scrollbar { width: 6px; }
.ms-cards::-webkit-scrollbar-thumb {
  background: rgba(124, 77, 255, 0.45);
  border-radius: 3px;
}

.ms-card {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid var(--ms-line);
  background: linear-gradient(155deg, rgba(28, 36, 66, 0.55), rgba(10, 14, 28, 0.65));
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(180, 210, 255, 0.08);
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: transform 0.22s cubic-bezier(0.3, 1.3, 0.4, 1),
              border-color 0.25s ease, box-shadow 0.25s ease;
}

.ms-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent,
              rgba(0, 229, 255, 0.10), rgba(180, 210, 255, 0.16), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.ms-card:hover, .ms-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ms-line-hi);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(0, 229, 255, 0.20),
              inset 0 1px 0 rgba(180, 210, 255, 0.12);
}

.ms-card:hover::after { left: 130%; }

.ms-card:active { transform: translateY(0) scale(0.98); }

.ms-title.enter .ms-card {
  animation: ms-cardIn 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.ms-title.enter .ms-card:nth-child(1) { animation-delay: 0.10s; }
.ms-title.enter .ms-card:nth-child(2) { animation-delay: 0.17s; }
.ms-title.enter .ms-card:nth-child(3) { animation-delay: 0.24s; }
.ms-title.enter .ms-card:nth-child(4) { animation-delay: 0.31s; }
.ms-title.enter .ms-card:nth-child(5) { animation-delay: 0.38s; }
.ms-title.enter .ms-card:nth-child(6) { animation-delay: 0.45s; }

@keyframes ms-cardIn {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ms-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-card-ic {
  font-size: 24px;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.45));
}

.ms-card-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #e8ecff, #aee9ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ms-card-desc {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ms-dim);
}

.ms-card-date {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ms-gold);
  border: 1px solid rgba(255, 213, 79, 0.35);
  background: rgba(255, 213, 79, 0.08);
  border-radius: 999px;
  padding: 3px 12px;
  text-shadow: 0 0 10px rgba(255, 213, 79, 0.35);
}

.ms-title-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 6px;
}

.ms-title.enter .ms-title-btns {
  animation: ms-riseIn 0.6s 0.5s ease both;
}

/* --------------------------------- HUD --------------------------------- */

.ms-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: calc(8px + var(--ms-safe-t)) calc(10px + var(--ms-safe-r))
           8px calc(10px + var(--ms-safe-l));
  pointer-events: none;
}

.ms-hud.enter { animation: ms-hudIn 0.45s cubic-bezier(0.25, 1, 0.4, 1) both; }

@keyframes ms-hudIn {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ms-hud-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ms-hud .ms-btn { pointer-events: auto; }

.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--ms-line);
  background: var(--ms-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(180, 210, 255, 0.08);
  white-space: nowrap;
}

.ms-chip-ic { font-size: 14px; line-height: 1; }

.ms-chip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ms-dim);
}

.ms-chip-mode {
  font-size: 13px;
  font-weight: 700;
  color: var(--ms-dim);
  letter-spacing: 0.05em;
}

.ms-chip-stage {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ms-neon2);
  border-color: rgba(0, 229, 255, 0.4);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

.ms-chip-score .ms-chip-v {
  background: linear-gradient(90deg, var(--ms-neon2), #b388ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ms-chip-score.bump { animation: ms-bump 0.3s cubic-bezier(0.3, 1.6, 0.4, 1); }

@keyframes ms-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* shields */

.ms-chip-shield { gap: 2px; }

.ms-heart {
  font-size: 15px;
  line-height: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ms-heart.on {
  color: #ff6e9c;
  text-shadow: 0 0 10px rgba(255, 110, 156, 0.75);
}

.ms-heart.off {
  opacity: 0.18;
  transform: scale(0.85);
  color: #aab4d4;
}

.ms-heart-inf {
  font-size: 14px;
  font-weight: 800;
  color: #ff6e9c;
  margin-left: 2px;
}

.ms-chip-shield.hit { animation: ms-shieldHit 0.55s cubic-bezier(0.3, 1.2, 0.4, 1); }

@keyframes ms-shieldHit {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 83, 112, 0.7); }
  25%  { transform: scale(1.18) rotate(-3deg); box-shadow: 0 0 24px 6px rgba(255, 83, 112, 0.55); }
  55%  { transform: scale(0.94) rotate(2deg); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 83, 112, 0); }
}

.ms-chip-shield.gain { animation: ms-shieldGain 0.5s ease; }

@keyframes ms-shieldGain {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(105, 240, 174, 0.6); }
  40%  { transform: scale(1.14); box-shadow: 0 0 22px 5px rgba(105, 240, 174, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(105, 240, 174, 0); }
}

/* board progress hairline */

.ms-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  z-index: 21;
  width: 0%;
  background: linear-gradient(90deg, var(--ms-neon1), var(--ms-neon2));
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.8), 0 0 4px rgba(124, 77, 255, 0.9);
  border-radius: 0 3px 3px 0;
  transition: width 0.35s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.3s ease;
  pointer-events: none;
}

/* combo pop */

.ms-combo {
  position: absolute;
  top: calc(64px + var(--ms-safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  pointer-events: none;
}

.ms-combo-txt {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: clamp(20px, 4.5vw, 30px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(95deg, var(--ms-gold), #ff8a65, var(--ms-neon2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 213, 79, 0.45));
}

/* Same compositor-only sheen as .ms-logo (see note there). */
.ms-combo-txt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 62%);
  transform: translateX(-120%);
  animation: ms-sheen 2.4s linear infinite;
}

.ms-combo.pop .ms-combo-txt {
  animation: ms-comboPop 0.42s cubic-bezier(0.2, 1.6, 0.35, 1) both;
}

@keyframes ms-comboPop {
  0%   { transform: scale(1.9); opacity: 0; }
  35%  { opacity: 1; }
  65%  { transform: scale(0.94); }
  100% { transform: scale(1); opacity: 1; }
}

/* ----------------------------- rival sidebar --------------------------- */

.ms-rival {
  position: absolute;
  top: calc(76px + var(--ms-safe-t));
  right: calc(10px + var(--ms-safe-r));
  z-index: 20;
  width: 186px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 110, 156, 0.35);
  background: var(--ms-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.40), 0 0 18px rgba(255, 110, 156, 0.12);
  pointer-events: none;
}

.ms-rival-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.ms-rival-name {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #ff6e9c;
  text-shadow: 0 0 10px rgba(255, 110, 156, 0.5);
}

.ms-rival-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--ms-dim);
}

.ms-rival.st-stunned .ms-rival-status {
  color: var(--ms-gold);
  animation: ms-blink 0.6s step-end infinite;
}

.ms-rival.st-lost {
  opacity: 0.55;
  filter: saturate(0.4);
}

.ms-rival.st-lost .ms-rival-status { color: var(--ms-danger); }

@keyframes ms-blink { 50% { opacity: 0.25; } }

.ms-rival-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ms-rival-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5370, #ff9e80);
  box-shadow: 0 0 10px rgba(255, 83, 112, 0.8);
  transition: width 0.3s cubic-bezier(0.25, 1, 0.4, 1);
}

/* ----------------------------- stage banner ---------------------------- */

.ms-banner {
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.ms-banner-inner {
  width: 100%;
  padding: 18px 0;
  text-align: center;
  background: linear-gradient(90deg,
      transparent 0%, rgba(124, 77, 255, 0.22) 28%,
      rgba(0, 229, 255, 0.22) 72%, transparent 100%);
  border-top: 1px solid rgba(0, 229, 255, 0.25);
  border-bottom: 1px solid rgba(124, 77, 255, 0.25);
  opacity: 0;
}

.ms-banner-inner.play {
  animation: ms-bannerSweep 2.2s cubic-bezier(0.25, 1, 0.4, 1) both;
}

@keyframes ms-bannerSweep {
  0%   { transform: translateX(-60vw); opacity: 0; }
  16%  { transform: translateX(0); opacity: 1; }
  78%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(60vw); opacity: 0; }
}

.ms-banner-txt {
  font-size: clamp(22px, 5.5vw, 40px);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--ms-accent);
  text-shadow: 0 0 26px var(--ms-accent), 0 2px 18px rgba(0, 0, 0, 0.6);
}

/* -------------------------------- toasts ------------------------------- */

.ms-toasts {
  position: absolute;
  top: calc(80px + var(--ms-safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: 92vw;
}

.ms-toast {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--ms-line-hi);
  background: var(--ms-glass-deep);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(0, 229, 255, 0.18);
  animation: ms-toastIn 0.4s cubic-bezier(0.2, 1.4, 0.35, 1) both;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.ms-toast.out {
  opacity: 0;
  transform: translateY(-10px) scale(0.94);
}

@keyframes ms-toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------ countdown ------------------------------ */

.ms-countdown {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ms-cd-num {
  font-size: clamp(90px, 26vw, 200px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff, var(--ms-neon2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(0, 229, 255, 0.55));
}

.ms-cd-num.go {
  background: linear-gradient(180deg, #fff8d8, var(--ms-gold), #ff8a65);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 44px rgba(255, 213, 79, 0.65));
}

.ms-cd-num.zoom {
  animation: ms-cdZoom 0.75s cubic-bezier(0.2, 1, 0.35, 1) both;
}

@keyframes ms-cdZoom {
  0%   { opacity: 0; transform: scale(2.5); }
  28%  { opacity: 1; }
  85%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.96); opacity: 0.85; }
}

/* --------------------------- overlays & panels -------------------------- */

.ms-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--ms-safe-t)) calc(16px + var(--ms-safe-r))
           calc(20px + var(--ms-safe-b)) calc(16px + var(--ms-safe-l));
  background: rgba(5, 7, 15, 0.55);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  pointer-events: auto;
}

#ms-pause { z-index: 70; }
#ms-result { z-index: 75; }
#ms-modal { z-index: 80; }

.ms-panel {
  width: min(440px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border-radius: 22px;
  border: 1px solid rgba(150, 185, 255, 0.26);
  background: linear-gradient(160deg, rgba(26, 33, 62, 0.88), rgba(9, 13, 27, 0.90));
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55),
              0 0 44px rgba(124, 77, 255, 0.14),
              inset 0 1px 0 rgba(190, 215, 255, 0.10);
}

.ms-panel.enter {
  animation: ms-panelIn 0.42s cubic-bezier(0.2, 1.35, 0.32, 1) both;
}

@keyframes ms-panelIn {
  from { opacity: 0; transform: scale(0.86) translateY(22px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* pause */

.ms-pause-panel { width: min(340px, 100%); }

.ms-pause-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-align: center;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--ms-neon1), var(--ms-neon2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.3));
}

.ms-pause-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* result */

.ms-result-title {
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.2;
}

.ms-result-panel.won .ms-result-title {
  background: linear-gradient(95deg, var(--ms-ok), var(--ms-neon2), #b388ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(105, 240, 174, 0.4));
}

.ms-result-panel.lost .ms-result-title {
  background: linear-gradient(95deg, var(--ms-danger), #ff9e80);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 83, 112, 0.4));
}

.ms-result-mode {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ms-dim);
  margin: 4px 0 6px;
}

.ms-record-badge {
  align-self: center;
  margin: 4px 0 6px;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #2b1d00;
  background: linear-gradient(95deg, #ffe082, var(--ms-gold), #ffb74d);
  box-shadow: 0 0 22px rgba(255, 213, 79, 0.55);
  animation: ms-badgePulse 1.4s ease-in-out infinite;
}

@keyframes ms-badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(255, 213, 79, 0.45); }
  50%      { transform: scale(1.06); box-shadow: 0 0 30px rgba(255, 213, 79, 0.75); }
}

.ms-result-lines {
  margin: 10px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(140, 175, 255, 0.10);
}

.ms-line:last-child { border-bottom: none; }

.ms-line-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-dim);
}

.ms-line-value {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ms-result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* -------------------------------- modal -------------------------------- */

.ms-modal-panel { width: min(520px, 100%); }

.ms-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.ms-modal-title {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.14em;
  background: linear-gradient(90deg, var(--ms-neon1), var(--ms-neon2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ms-modal-x {
  min-width: 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  font-size: 16px;
}

.ms-modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 77, 255, 0.5) transparent;
}

.ms-modal-body::-webkit-scrollbar { width: 6px; }
.ms-modal-body::-webkit-scrollbar-thumb {
  background: rgba(124, 77, 255, 0.45);
  border-radius: 3px;
}

.ms-modal-foot {
  margin-top: 16px;
}

/* difficulty modal */

.ms-diff-list {
  display: grid;
  gap: 12px;
}

.ms-diff-btn {
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 68px;
  padding: 12px 18px;
  font-size: 18px;
  border-color: rgba(0, 229, 255, 0.30);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.24), rgba(0, 229, 255, 0.14));
}

.ms-diff-btn:hover {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.35), rgba(0, 229, 255, 0.28));
}

.ms-diff-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--ms-dim);
  font-variant-numeric: tabular-nums;
}

/* settings */

.ms-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(140, 175, 255, 0.10);
}

.ms-set-row:last-child { border-bottom: none; }

.ms-set-name {
  font-size: 15.5px;
  font-weight: 700;
}

.ms-set-hint {
  font-size: 11.5px;
  color: var(--ms-dim);
  margin-top: 1px;
}

.ms-slider {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 150px;
  max-width: 46vw;
  height: 28px;
  accent-color: var(--ms-neon2);
  cursor: pointer;
}

.ms-toggle {
  pointer-events: auto;
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--ms-line);
  background: rgba(140, 160, 210, 0.16);
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ms-toggle::before {
  /* extend the touch target to >=44px */
  content: '';
  position: absolute;
  inset: -10px;
}

.ms-toggle .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #9aa6c8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: left 0.24s cubic-bezier(0.3, 1.5, 0.4, 1), background 0.24s ease, box-shadow 0.24s ease;
}

.ms-toggle.on {
  background: linear-gradient(90deg, rgba(124, 77, 255, 0.55), rgba(0, 229, 255, 0.55));
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.30);
}

.ms-toggle.on .knob {
  left: 29px;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.ms-toggle:focus-visible {
  border-color: var(--ms-neon2);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.35);
}

.ms-seg {
  pointer-events: auto;
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--ms-line);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(12, 17, 34, 0.4);
}

.ms-seg-btn {
  pointer-events: auto;
  min-width: 58px;
  min-height: 44px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--ms-dim);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: background 0.22s ease, color 0.22s ease;
}

.ms-seg-btn + .ms-seg-btn {
  border-left: 1px solid var(--ms-line);
}

.ms-seg-btn.active {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.55), rgba(0, 229, 255, 0.5));
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

.ms-seg-btn:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(0, 229, 255, 0.5);
}

/* help */

.ms-help-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ms-help-h {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--ms-neon2);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.ms-help-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ms-help-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ms-help-item .k {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid var(--ms-line);
  background: rgba(124, 77, 255, 0.14);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ms-help-item .v {
  color: var(--ms-dim);
  font-weight: 600;
}

.ms-help-note {
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(140, 175, 255, 0.07);
  border: 1px solid rgba(140, 175, 255, 0.12);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ms-dim);
}

/* records */

.ms-rec-sec { margin-bottom: 16px; }
.ms-rec-sec:last-child { margin-bottom: 4px; }

.ms-rec-h {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, var(--ms-neon2), #b388ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ms-rec-empty {
  padding: 44px 10px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ms-dim);
}

/* ------------------------------- vignette ------------------------------ */

.ms-vignette {
  position: absolute;
  inset: 0;
  z-index: 28;
  pointer-events: none;
  opacity: 0;
  border-radius: 2px;
}

.ms-vignette.flash {
  animation: ms-vigFlash 0.65s ease-out both;
}

@keyframes ms-vigFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 1080px) {
  .ms-cards { grid-template-columns: repeat(2, minmax(230px, 320px)); }
}

@media (max-width: 720px) {
  .ms-cards {
    grid-template-columns: minmax(0, 420px);
    flex: 0 1 auto;
    max-height: 60svh;
    gap: 10px;
    padding: 4px 2px 14px;
  }
  .ms-card { padding: 15px 16px 13px; }
  .ms-card-desc { font-size: 12px; }
  .ms-logo { margin-top: 0; }
  .ms-title-inner {
    justify-content: center;
    padding-top: max(env(safe-area-inset-top), 16px);
    padding-bottom: max(env(safe-area-inset-bottom), 20px);
    gap: 6px;
  }
  .ms-title-btns .ms-btn {
    padding: 10px 16px;
    font-size: 14.5px;
    min-height: 46px;
  }
  .ms-chip {
    min-height: 34px;
    padding: 5px 11px;
    font-size: 13.5px;
  }
  .ms-chip-mode { display: none; } /* keep the top bar uncluttered on phones */
  .ms-iconbtn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .ms-rival {
    width: 152px;
    top: calc(64px + var(--ms-safe-t));
    padding: 8px 10px 10px;
  }
  .ms-combo { top: calc(56px + var(--ms-safe-t)); }
  .ms-panel { padding: 22px 18px 18px; }
}

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

@media (max-height: 520px) and (orientation: landscape) {
  .ms-logo { font-size: clamp(30px, 6vh, 48px); margin-top: 0; }
  .ms-subtitle { margin-bottom: 2px; }
  .ms-cards {
    grid-template-columns: repeat(3, minmax(190px, 240px));
    gap: 10px;
  }
  .ms-card { padding: 12px 14px 10px; }
  .ms-card-desc { display: none; }
  .ms-panel { max-height: 96vh; padding: 16px 18px 14px; }
}

/* --------------------------- reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ms-logo,
  .ms-combo-txt,
  .ms-record-badge,
  .ms-rival.st-stunned .ms-rival-status {
    animation: none !important;
  }
  /* the sheen now lives on a pseudo-element — disable it too */
  .ms-logo::before,
  .ms-combo-txt::before {
    display: none;
  }
  .ms-title.enter .ms-logo,
  .ms-title.enter .ms-subtitle,
  .ms-title.enter .ms-card,
  .ms-title.enter .ms-title-btns,
  .ms-hud.enter,
  .ms-panel.enter,
  .ms-toast,
  .ms-cd-num.zoom,
  .ms-banner-inner.play,
  .ms-chip-score.bump,
  .ms-chip-shield.hit,
  .ms-chip-shield.gain,
  .ms-combo.pop .ms-combo-txt {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
  .ms-fade { transition-duration: 0.01s; }
}

/* ---------------- resilience overrides (appended) ----------------
   1) ms-no-anim: embedded webviews that report document.hidden freeze CSS
      transitions/animations; snap everything to its end state there so
      overlays never get stuck invisible (main.js toggles the class).
   2) small screens: tall modals and the title screen must scroll. */
.ms-no-anim #ui-root *,
.ms-no-anim #ui-root *::before,
.ms-no-anim #ui-root *::after {
  transition: none !important;
  animation: none !important;
}

.ms-modal-panel {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ms-title {
  min-height: var(--app-height);
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ms-title-inner {
  height: auto;
  min-height: var(--app-height);
  box-sizing: border-box;
}

/* ---------------- rival mini-board + 2P duel panel (appended) ---------- */

.ms-rival-mini {
  display: block;
  width: 100%;
  margin-top: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  padding: 4px;
  box-sizing: border-box;
  image-rendering: pixelated;
}

.ms-rival-hearts {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #ff6e9c;
  text-shadow: 0 0 8px rgba(255, 110, 156, 0.6);
  min-height: 14px;
}

.ms-duel {
  position: absolute;
  top: calc(76px + var(--ms-safe-t));
  right: calc(10px + var(--ms-safe-r));
  z-index: 20;
  width: 188px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(124, 77, 255, 0.4);
  background: var(--ms-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-duel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  opacity: 0.55;
  transition: opacity 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease;
}

.ms-duel-row.active {
  opacity: 1;
  transform: scale(1.03);
}

.ms-duel-row.p1.active {
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.08);
}

.ms-duel-row.p2.active {
  border-color: rgba(255, 110, 156, 0.55);
  box-shadow: 0 0 14px rgba(255, 110, 156, 0.25), inset 0 0 12px rgba(255, 110, 156, 0.08);
}

.ms-duel-name {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.ms-duel-row.p1 .ms-duel-name { color: #00e5ff; text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
.ms-duel-row.p2 .ms-duel-name { color: #ff6e9c; text-shadow: 0 0 8px rgba(255, 110, 156, 0.5); }

.ms-duel-score {
  flex: 1;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ms-text, #e8eef8);
}

.ms-duel-hearts {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #ff5370;
}

@media (max-width: 640px) {
  .ms-duel { width: 150px; padding: 8px; }
  .ms-duel-score { font-size: 13px; }
}

/* ---------------- help: beginner rules section (appended) -------------- */

.ms-help-rules {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ms-line);
}

.ms-rule-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 8px;
}

.ms-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ms-text);
}

.ms-rule-ic {
  flex: 0 0 auto;
  width: 26px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}

.ms-rule-tx { flex: 1 1 auto; }

.ms-help-demo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ms-line);
}

.ms-demo-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-auto-rows: 30px;
  gap: 3px;
}

.ms-demo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 800;
}

.ms-demo-cell.hid {
  background: linear-gradient(180deg, #2a3f63, #1a2947);
  border: 1px solid rgba(140, 175, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(180, 210, 255, 0.18);
}

.ms-demo-cell.open {
  background: #0b1326;
  border: 1px solid rgba(140, 175, 255, 0.15);
  color: #4fc3f7;
  text-shadow: 0 0 8px rgba(79, 195, 247, 0.8);
}

.ms-demo-cell.flag {
  background: linear-gradient(180deg, #2a3f63, #1a2947);
  border: 1px solid rgba(0, 229, 255, 0.5);
  font-size: 14px;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

.ms-demo-cap {
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ms-dim);
}

@media (max-width: 480px) {
  .ms-help-demo { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------------- profile inputs + ranking modal (appended) ------------ */

.ms-input {
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
  width: min(46vw, 220px);
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--ms-line);
  background: rgba(8, 12, 26, 0.6);
  color: var(--ms-text);
  font-family: var(--ms-font);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ms-input:focus {
  border-color: var(--ms-neon2);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.22);
}

.ms-input::placeholder { color: rgba(138, 148, 184, 0.55); }

.ms-rank-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ms-rank-list { min-height: 120px; }

.ms-rank-row .ms-line-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ms-rank-no {
  color: var(--ms-dim);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: right;
}

.ms-rank-row:nth-child(2) .ms-rank-no { color: var(--ms-gold); }

.ms-rank-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9em;
}

.ms-rank-x {
  color: var(--ms-neon2);
  font-size: 11.5px;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- crystal UI: clearer glass panels (appended) ----------- */

.ms-panel {
  background: rgba(14, 20, 42, 0.38);
  -webkit-backdrop-filter: blur(24px) saturate(1.55);
  backdrop-filter: blur(24px) saturate(1.55);
  border-color: rgba(170, 215, 255, 0.30);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(210, 235, 255, 0.18),
              inset 0 -1px 0 rgba(120, 180, 255, 0.06);
}

.ms-chip {
  background: rgba(14, 20, 42, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-color: rgba(170, 215, 255, 0.26);
}

.ms-card {
  background: linear-gradient(155deg, rgba(34, 46, 86, 0.40), rgba(12, 17, 34, 0.46));
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border-color: rgba(170, 215, 255, 0.28);
}

.ms-btn {
  background: rgba(14, 20, 42, 0.36);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}

.ms-btn.primary {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.88), rgba(0, 229, 255, 0.88));
}

/* X share is a real <a> styled as a button (appended) */
a.ms-btn {
  text-decoration: none;
}

/* ---------------- tutorial UI — bottom sheet (mobile-first) ------------
   #ui-root is pointer-events:none and `pointer-events` inherits, so every
   interactive tutorial element MUST re-enable it or taps fall through to
   the board. The container stays none (board taps pass through); only the
   sheet + buttons capture input. The board is fit into the clear region
   ABOVE the sheet by renderer.setViewInsets(), so it is never hidden. */

.ms-tut-ui {
  position: absolute;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.ms-tut-step-label {
  pointer-events: none;
  align-self: center;
  margin: calc(10px + var(--ms-safe-t)) auto 0;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--ms-line);
  background: rgba(10, 14, 28, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ms-neon2);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

.ms-tut-toast {
  pointer-events: auto;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 48px);
  left: 50%;
  z-index: 2;
  width: min(560px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: min(30vh, 132px);
  max-height: min(30dvh, 132px);
  overflow-y: auto;
  padding: 9px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  background: rgba(7, 12, 25, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  color: var(--ms-text);
  font-family: var(--ms-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45),
              0 0 20px rgba(0, 229, 255, 0.18),
              inset 0 1px 0 rgba(200, 230, 255, 0.12);
  cursor: pointer;
  transform: translateX(-50%);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.ms-tut-toast.hidden {
  transform: translate(-50%, -8px);
}

/* ---- bottom sheet ---- */
.ms-tut-sheet {
  pointer-events: auto;
  align-self: stretch;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border: 1px solid rgba(170, 215, 255, 0.30);
  border-bottom: 0;
  background: rgba(11, 16, 34, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  backdrop-filter: blur(24px) saturate(1.45);
  box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(200, 230, 255, 0.16);
  overflow: hidden;
  max-height: 25vh;                /* default (half) — content-sized up to here */
  transition: max-height 0.28s cubic-bezier(0.3, 1, 0.4, 1);
  animation: ms-tut-rise 0.32s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}
.ms-tut-sheet.collapsed { max-height: 46px; }
.ms-tut-sheet.half      { max-height: 25vh; }
.ms-tut-sheet.expanded  { max-height: 46vh; }

@keyframes ms-tut-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ms-tut-handle {
  pointer-events: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  cursor: grab;
  touch-action: none;          /* drag must not scroll the page */
}
.ms-tut-handle:active { cursor: grabbing; }
.ms-tut-grip {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(180, 210, 255, 0.4);
}

.ms-tut-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px calc(16px + var(--ms-safe-r)) 4px calc(16px + var(--ms-safe-l));
}

/* actions live here (outside the scroll area) so they are ALWAYS visible,
   no matter how long the step text is */
.ms-tut-footer {
  flex: 0 0 auto;
  pointer-events: auto;
  padding: 8px calc(16px + var(--ms-safe-r)) calc(14px + var(--ms-safe-b))
           calc(16px + var(--ms-safe-l));
  border-top: 1px solid rgba(160, 200, 255, 0.10);
}

.ms-tut-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.ms-tut-progress span {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.ms-tut-progress span.done { background: rgba(0, 229, 255, 0.55); }
.ms-tut-progress span.active {
  background: linear-gradient(90deg, var(--ms-neon1), var(--ms-neon2));
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

.ms-tut-shield {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff6e9c;
  text-shadow: 0 0 10px rgba(255, 110, 156, 0.5);
}

.ms-tut-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ms-text);
}

.ms-tut-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 213, 79, 0.4);
  background: rgba(255, 213, 79, 0.1);
  color: #ffe9a8;
  font-size: 13.5px;
  line-height: 1.55;
  animation: ms-tut-rise 0.25s ease both;
}

.ms-tut-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ms-tut-btn {
  pointer-events: auto;
  flex: 1 1 44%;
  min-height: 50px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--ms-line);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ms-text);
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s cubic-bezier(0.3, 1.4, 0.4, 1),
              border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ms-tut-btn:active { transform: scale(0.96); }
.ms-tut-btn:focus-visible {
  border-color: var(--ms-neon2);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.35);
}
.ms-tut-btn.primary {
  flex-basis: 100%;
  border-color: rgba(255, 255, 255, 0.35);
  color: #04121a;
  background: linear-gradient(135deg, var(--ms-neon1), var(--ms-neon2));
  box-shadow: 0 6px 22px rgba(124, 77, 255, 0.4), 0 0 20px rgba(0, 229, 255, 0.3);
}
.ms-tut-btn.ghost {
  background: rgba(12, 17, 34, 0.4);
  color: var(--ms-dim);
}

/* 5ボタン横並びナビ: ヒント / 戻る / リトライ / 次へ / タイトル。
   grid で必ず等幅5列・1行に収める。 */
.ms-tut-actions.nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ms-tut-btn.nav {
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 4px;
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
}
.ms-tut-btn.nav.accent {
  border-color: rgba(255, 255, 255, 0.35);
  color: #04121a;
  background: linear-gradient(135deg, var(--ms-neon1), var(--ms-neon2));
  box-shadow: 0 6px 22px rgba(124, 77, 255, 0.4), 0 0 20px rgba(0, 229, 255, 0.3);
}
.ms-tut-btn.disabled,
.ms-tut-btn:disabled {
  opacity: 0.38;
  cursor: default;
  box-shadow: none;
}
.ms-tut-btn.disabled:active,
.ms-tut-btn:disabled:active { transform: none; }
.ms-tut-ui.compact .ms-tut-actions.nav { gap: 5px; }
.ms-tut-ui.compact .ms-tut-btn.nav { min-height: 42px; padding: 9px 3px; font-size: 12px; }

.ms-tut-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

/* ---- compact mode: short viewports (< 700px tall) ---- */
.ms-tut-ui.compact .ms-tut-step-label { font-size: 11px; padding: 4px 12px; }
.ms-tut-ui.compact .ms-tut-text { font-size: 13px; line-height: 1.5; }
.ms-tut-ui.compact .ms-tut-hint { font-size: 12px; padding: 8px 10px; }
.ms-tut-ui.compact .ms-tut-content {
  padding: 2px calc(12px + var(--ms-safe-r)) 4px calc(12px + var(--ms-safe-l));
}
.ms-tut-ui.compact .ms-tut-footer {
  padding: 6px calc(12px + var(--ms-safe-r)) calc(10px + var(--ms-safe-b))
           calc(12px + var(--ms-safe-l));
}
.ms-tut-ui.compact .ms-tut-actions { gap: 8px; margin-top: 10px; }
.ms-tut-ui.compact .ms-tut-btn { min-height: 42px; padding: 9px 14px; font-size: 14px; }
.ms-tut-ui.compact .ms-tut-progress { margin-bottom: 8px; }
.ms-tut-ui.compact .ms-tut-sheet.half { max-height: 30vh; }