:root {
  --ms-paper: #e9dfc7;
  --ms-paper-bright: #fff9e9;
  --ms-ink: #11151a;
  --ms-indigo: #152538;
  --ms-indigo-soft: #28465f;
  --ms-vermilion: #b83a29;
  --ms-vermilion-bright: #e15b3d;
  --ms-silver: #d7e4e5;
  --ms-gold: #d8ad5a;
  --ms-jade: #5f9a83;
}

.tsukikage-stage {
  background: #080b0e;
  border-color: #f4edda;
}

.ms-game,
.ms-game * {
  box-sizing: border-box;
}

.ms-game {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--ms-paper-bright);
  background: #0b1015;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  container-type: size;
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-right: max(10px, env(safe-area-inset-right));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --safe-left: max(10px, env(safe-area-inset-left));
}

.ms-game button,
.ms-game kbd {
  font-family: inherit;
}

.ms-game button {
  -webkit-tap-highlight-color: transparent;
}

.ms-game [hidden] {
  display: none !important;
}

.ms-backdrop,
.ms-canvas,
.ms-paper-grain,
.ms-vignette,
.ms-hit-flash {
  position: absolute;
  inset: 0;
}

.ms-backdrop {
  z-index: 0;
  background-image: url("./assets/chapter-bamboo.webp");
  background-position: center;
  background-size: cover;
  filter: saturate(.86) contrast(1.03) brightness(.82);
  transform: none;
  transition: opacity .65s ease, filter .65s ease;
}

.ms-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at center, rgba(255,255,255,.02), rgba(7,11,15,.36) 95%);
}

.ms-canvas {
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}

.ms-paper-grain {
  z-index: 3;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(7deg, transparent 0 2px, rgba(255,255,255,.15) 2px 3px, transparent 3px 7px),
    repeating-linear-gradient(97deg, transparent 0 4px, rgba(14,18,20,.14) 4px 5px, transparent 5px 11px);
}

.ms-vignette {
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(2,5,8,.42);
  background: radial-gradient(ellipse at center, transparent 54%, rgba(3,7,11,.28));
}

.ms-hit-flash {
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, transparent 28%, rgba(174,29,24,.62));
}

.ms-hit-flash.is-active {
  animation: msHitFlash .42s ease-out;
}

@keyframes msHitFlash {
  0% { opacity: .82; }
  100% { opacity: 0; }
}

.ms-screen {
  position: absolute;
  z-index: 50;
  inset: 0;
}

.ms-title-screen {
  display: flex;
  align-items: stretch;
  background: url("./assets/key-art.webp") center / cover no-repeat;
}

.ms-title-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14,15,14,.94) 0%, rgba(18,18,17,.78) 32%, rgba(17,20,23,.18) 62%, rgba(4,7,10,.3)),
    linear-gradient(0deg, rgba(4,6,8,.45), transparent 45%);
}

.ms-title-content {
  position: relative;
  width: min(53%, 620px);
  min-width: 420px;
  padding: clamp(22px, 4.8cqw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.ms-eyebrow {
  margin: 0 0 clamp(5px, 1cqw, 12px);
  color: #dccda8;
  font: 700 clamp(10px, 1.25cqw, 15px)/1 "Fredoka", sans-serif;
  letter-spacing: .27em;
  text-transform: uppercase;
}

.ms-logo {
  margin: 0;
  color: #f2e9d4;
  font-size: clamp(42px, 7.2cqw, 88px);
  font-weight: 900;
  line-height: .93;
  letter-spacing: -.09em;
  text-shadow: 0 4px 28px rgba(0,0,0,.48);
}

.ms-logo > span {
  display: block;
  margin-left: .12em;
  color: #bfcbd0;
  font-size: .54em;
  font-weight: 700;
  letter-spacing: .08em;
}

.ms-logo small {
  display: block;
  margin-top: 11px;
  color: #cf553d;
  font: 700 clamp(11px, 1.45cqw, 18px)/1 "Fredoka", sans-serif;
  letter-spacing: .34em;
}

.ms-tagline {
  margin: clamp(13px, 2cqw, 23px) 0 0;
  color: rgba(250,244,228,.84);
  font-size: clamp(11px, 1.25cqw, 16px);
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: .05em;
}

.ms-title-actions {
  width: min(100%, 420px);
  margin-top: clamp(15px, 2.6cqw, 30px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ms-brush-button,
.ms-journey-button {
  position: relative;
  overflow: hidden;
  min-height: clamp(54px, 6.6cqw, 72px);
  padding: 10px 16px;
  color: #eee4cf;
  text-align: left;
  background: rgba(10,14,18,.68);
  border: 1px solid rgba(230,219,191,.3);
  border-radius: 3px 15px 3px 15px;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform .2s, background .2s, border-color .2s;
}

.ms-brush-button::after,
.ms-journey-button::after {
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: 58px;
  height: 30px;
  border: 6px solid rgba(255,255,255,.06);
  border-radius: 50%;
  content: "";
  transform: rotate(-9deg);
}

.ms-brush-button strong,
.ms-journey-button b {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(13px, 1.45cqw, 18px);
  letter-spacing: .05em;
}

.ms-brush-button span,
.ms-journey-button span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 4px;
  color: rgba(239,232,214,.62);
  font-size: clamp(8px, .9cqw, 11px);
  font-weight: 700;
}

.ms-brush-button.is-primary,
.ms-journey-button {
  color: #fff8e6;
  border-color: rgba(235,107,74,.7);
  background: linear-gradient(110deg, rgba(154,42,30,.95), rgba(93,28,24,.88));
}

.ms-brush-button:hover,
.ms-brush-button:focus-visible,
.ms-journey-button:hover,
.ms-journey-button:focus-visible {
  transform: translateY(-2px);
  border-color: #e6d5aa;
  outline: none;
}

.ms-title-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(10px, 1.7cqw, 20px);
}

.ms-title-links button,
.ms-close-button {
  min-height: 32px;
  padding: 6px 2px;
  border: 0;
  color: rgba(244,238,220,.76);
  background: transparent;
  font-size: clamp(10px, 1cqw, 13px);
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
}

.ms-title-links button:hover,
.ms-title-links button:focus-visible,
.ms-close-button:hover,
.ms-close-button:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ms-title-links i {
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,.25);
}

.ms-title-record {
  margin-top: clamp(7px, 1cqw, 13px);
  color: rgba(226,218,199,.48);
  font-size: clamp(8px, .85cqw, 11px);
  font-weight: 700;
  letter-spacing: .08em;
}

.ms-select-screen,
.ms-guide-screen,
.ms-archive-screen {
  display: grid;
  place-items: center;
  padding: clamp(12px, 2cqw, 28px);
  background:
    linear-gradient(rgba(8,11,14,.86), rgba(8,11,14,.9)),
    url("./assets/key-art.webp") center / cover no-repeat;
  backdrop-filter: blur(5px);
}

.ms-panel {
  width: min(100%, 1100px);
  max-height: 94%;
  padding: clamp(16px, 2.4cqw, 32px);
  overflow: auto;
  color: #292820;
  background:
    linear-gradient(105deg, rgba(255,252,236,.95), rgba(220,211,190,.94)),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(70,58,40,.03) 4px 5px);
  border: 1px solid rgba(255,246,216,.55);
  border-radius: 5px 22px 5px 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,.46), inset 0 0 50px rgba(89,65,31,.09);
  scrollbar-color: #8f7c60 transparent;
}

.ms-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(49,43,31,.18);
}

.ms-panel-heading small {
  color: var(--ms-vermilion);
  font: 700 clamp(9px, 1cqw, 12px)/1 "Fredoka", sans-serif;
  letter-spacing: .24em;
}

.ms-panel-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(23px, 3.1cqw, 42px);
  line-height: 1.05;
  letter-spacing: -.07em;
}

.ms-panel-heading p {
  margin-top: 6px;
  color: #6e6759;
  font-size: clamp(9px, 1.05cqw, 13px);
  font-weight: 700;
}

.ms-panel .ms-close-button {
  flex: 0 0 auto;
  min-width: 62px;
  padding: 8px 13px;
  color: #464238;
  border: 1px solid rgba(49,43,31,.22);
  border-radius: 999px;
}

.ms-discipline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 18px;
}

.ms-discipline-card {
  position: relative;
  min-height: clamp(150px, 19cqw, 230px);
  padding: clamp(13px, 1.8cqw, 22px);
  overflow: hidden;
  color: #eee8d8;
  text-align: left;
  border: 2px solid transparent;
  border-radius: 4px 20px 4px 20px;
  background: linear-gradient(145deg, #202a31, #10171d);
  box-shadow: 0 12px 24px rgba(36,31,21,.2);
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}

.ms-discipline-card::before,
.ms-upgrade-card::before,
.ms-route-card::before,
.ms-shop-card::before {
  position: absolute;
  right: -28px;
  bottom: -35px;
  width: 130px;
  height: 90px;
  border: 15px solid rgba(255,255,255,.055);
  border-radius: 50%;
  content: "";
  transform: rotate(-15deg);
}

/* 流派カードの装飾輪はカード内へ収め、疑似要素がスクロール寸法を広げないようにする。 */
.ms-discipline-card::before {
  right: 8px;
  bottom: 8px;
  width: 65px;
  height: 45px;
  border-width: 8px;
  transform: rotate(-15deg);
}

.ms-discipline-card[data-id="storm"] { background: linear-gradient(145deg, #36505b, #14252c); }
.ms-discipline-card[data-id="ember"] { background: linear-gradient(145deg, #693527, #261817); }

.ms-discipline-card:hover,
.ms-discipline-card:focus-visible,
.ms-discipline-card.is-selected {
  transform: translateY(-3px);
  border-color: #d9c178;
  outline: none;
}

.ms-discipline-card.is-selected::after {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #fff4da;
  background: var(--ms-vermilion);
  border-radius: 4px;
  content: "選";
  font-size: 12px;
  font-weight: 900;
  transform: rotate(5deg);
}

.ms-discipline-symbol {
  display: grid;
  width: clamp(40px, 5cqw, 62px);
  height: clamp(40px, 5cqw, 62px);
  place-items: center;
  margin-bottom: 11px;
  color: #172029;
  background: #e8e0c8;
  border-radius: 50% 46% 52% 45%;
  font-size: clamp(19px, 2.5cqw, 31px);
  font-weight: 900;
}

.ms-discipline-card h3 { margin: 0; font-size: clamp(16px, 2cqw, 24px); }
.ms-discipline-card h3 small { margin-left: 7px; color: rgba(255,255,255,.5); font: 700 10px/1 "Fredoka", sans-serif; letter-spacing: .12em; }
.ms-discipline-card p { margin: 8px 0 0; color: rgba(244,239,222,.72); font-size: clamp(9px, 1.02cqw, 12px); font-weight: 700; line-height: 1.65; }
.ms-discipline-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ms-discipline-stats span { padding: 3px 7px; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: clamp(7px, .78cqw, 9px); font-weight: 800; }

.ms-talisman-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: center;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(74,61,38,.07);
  border-radius: 5px 15px 5px 15px;
}

.ms-talisman-row > span { font-size: 11px; font-weight: 900; }
.ms-talisman-row > div { display: flex; gap: 7px; flex-wrap: wrap; }

.ms-talisman-choice {
  padding: 7px 11px;
  color: #4b4539;
  background: rgba(255,253,240,.68);
  border: 1px solid rgba(64,51,29,.22);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.ms-talisman-choice.is-selected { color: #fff8e7; background: #2f4650; border-color: #2f4650; }
.ms-talisman-choice[disabled] { opacity: .42; cursor: not-allowed; }

.ms-journey-button {
  width: min(100%, 390px);
  margin: 14px auto 0;
  display: block;
  text-align: center;
}

.ms-journey-button[disabled] { opacity: .44; cursor: not-allowed; transform: none; }

.ms-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.ms-guide-grid article {
  position: relative;
  padding: 17px;
  overflow: hidden;
  background: rgba(255,254,242,.65);
  border: 1px solid rgba(54,46,31,.14);
  border-radius: 4px 17px 4px 17px;
}

.ms-guide-grid article > b {
  position: absolute;
  right: 8px;
  top: 2px;
  color: rgba(138,47,33,.1);
  font-size: clamp(40px, 5cqw, 68px);
  line-height: 1;
}

.ms-guide-grid h3 { position: relative; margin: 0; font-size: clamp(13px, 1.5cqw, 18px); }
.ms-guide-grid p { position: relative; margin: 8px 0 0; color: #696252; font-size: clamp(9px, .98cqw, 12px); line-height: 1.7; font-weight: 700; }

.ms-guide-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 15px;
  color: #5f594d;
  font-size: 10px;
  font-weight: 800;
}

.ms-guide-controls kbd {
  padding: 2px 6px;
  color: #f7edda;
  background: #283a44;
  border: 0;
  border-radius: 3px;
}

.ms-record-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.ms-record-card {
  padding: 12px;
  text-align: center;
  background: rgba(255,254,242,.62);
  border: 1px solid rgba(54,46,31,.14);
  border-radius: 4px 14px 4px 14px;
}

.ms-record-card small { display: block; color: #756d5c; font-size: 9px; font-weight: 800; }
.ms-record-card strong { display: block; margin-top: 5px; color: #26333a; font: 700 clamp(17px, 2.25cqw, 28px)/1 "Fredoka", sans-serif; }

.ms-section-title { margin: 16px 0 8px; color: #3a382f; font-size: clamp(13px, 1.5cqw, 18px); }
.ms-unlock-grid, .ms-bestiary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ms-unlock, .ms-bestiary-entry { padding: 9px 11px; color: #4f4a3f; background: rgba(255,254,242,.55); border: 1px solid rgba(54,46,31,.13); border-radius: 4px 12px 4px 12px; font-size: 9px; font-weight: 800; }
.ms-unlock strong, .ms-bestiary-entry strong { display: block; color: #292c2b; font-size: 11px; margin-bottom: 3px; }
.ms-unlock.is-locked, .ms-bestiary-entry.is-locked { filter: grayscale(1); opacity: .42; }

/* HUD */
.ms-hud {
  position: absolute;
  z-index: 20;
  top: var(--safe-top);
  left: var(--safe-left);
  right: var(--safe-right);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.ms-hud-group,
.ms-top-actions,
.ms-player-hud,
.ms-cooldowns,
.ms-status-strip,
.ms-boss-bar {
  pointer-events: auto;
}

.ms-hud-group {
  min-height: clamp(40px, 5.6cqw, 64px);
  color: #f7edd7;
  background: linear-gradient(110deg, rgba(12,20,25,.9), rgba(23,36,43,.74));
  border: 1px solid rgba(237,226,195,.24);
  border-radius: 3px 15px 3px 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,.27);
  backdrop-filter: blur(8px);
}

.ms-hud-run {
  display: flex;
  align-items: center;
  min-width: clamp(150px, 20cqw, 260px);
  padding: 5px 12px 5px 7px;
}

.ms-chapter-mark {
  width: clamp(29px, 4.2cqw, 48px);
  height: clamp(29px, 4.2cqw, 48px);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  margin-right: 9px;
  color: #fff5df;
  background: #a1392c;
  border-radius: 4px;
  font-size: clamp(15px, 2cqw, 23px);
  font-weight: 900;
  transform: rotate(-2deg);
}

.ms-hud-run small { display: block; color: rgba(243,235,215,.54); font-size: clamp(7px, .8cqw, 10px); font-weight: 800; }
.ms-hud-run strong { display: block; margin-top: 2px; font-size: clamp(10px, 1.22cqw, 15px); }

.ms-hud-resources {
  display: flex;
  padding: 5px 8px;
}

.ms-resource {
  min-width: clamp(53px, 7cqw, 84px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  padding: 1px 8px;
  border-right: 1px solid rgba(255,255,255,.11);
}

.ms-resource:last-child { border-right: 0; }
.ms-resource > span { grid-row: 1 / 3; color: #d7b25f; font-weight: 900; font-size: clamp(11px, 1.4cqw, 17px); }
.ms-resource small { color: rgba(243,235,215,.5); font-size: clamp(6px, .68cqw, 8px); font-weight: 800; }
.ms-resource strong { font: 700 clamp(11px, 1.4cqw, 17px)/1 "Fredoka", sans-serif; }

.ms-top-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ms-icon-button {
  width: clamp(36px, 4.7cqw, 52px);
  height: clamp(36px, 4.7cqw, 52px);
  display: grid;
  place-items: center;
  color: #f7edd8;
  background: rgba(12,20,26,.86);
  border: 1px solid rgba(237,226,195,.24);
  border-radius: 4px 13px 4px 13px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  font: 900 clamp(13px, 1.7cqw, 20px)/1 "Zen Maru Gothic", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.ms-icon-button:hover,
.ms-icon-button:focus-visible {
  color: #fff;
  border-color: #dfc782;
  outline: none;
}

.ms-boss-bar {
  position: absolute;
  z-index: 19;
  top: calc(var(--safe-top) + clamp(46px, 6.6cqw, 72px));
  left: 50%;
  width: min(46%, 520px);
  padding: 6px 10px 8px;
  color: #f7edda;
  background: rgba(18,13,14,.82);
  border: 1px solid rgba(227,86,59,.45);
  border-radius: 3px 12px 3px 12px;
  transform: translateX(-50%);
  backdrop-filter: blur(6px);
}

.ms-boss-bar > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.ms-boss-bar span { font-size: clamp(8px, 1cqw, 12px); font-weight: 900; }
.ms-boss-bar b { color: #d49a86; font-size: clamp(6px, .75cqw, 9px); }

.ms-meter {
  position: relative;
  height: clamp(5px, .65cqw, 8px);
  overflow: hidden;
  background: rgba(0,0,0,.42);
  border-radius: 999px;
}

.ms-meter i,
.ms-meter em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  transition: width .24s ease;
}

.ms-boss-bar .ms-meter i { background: linear-gradient(90deg, #9b2822, #e26643, #e1a26c); box-shadow: 0 0 12px rgba(226,82,57,.45); }

.ms-player-hud {
  position: absolute;
  z-index: 20;
  left: var(--safe-left);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: minmax(150px, 30%) minmax(90px, 17%) auto 1fr;
  gap: clamp(6px, 1cqw, 12px);
  align-items: end;
  pointer-events: none;
}

.ms-health-block,
.ms-level-block,
.ms-combo {
  padding: clamp(6px, .8cqw, 9px) clamp(8px, 1.2cqw, 14px);
  background: rgba(10,18,23,.82);
  border: 1px solid rgba(237,226,195,.22);
  border-radius: 3px 12px 3px 12px;
  box-shadow: 0 7px 19px rgba(0,0,0,.25);
  backdrop-filter: blur(7px);
}

.ms-health-copy { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ms-health-copy span, .ms-level-block > span { color: rgba(242,235,217,.58); font-size: clamp(6px, .72cqw, 9px); font-weight: 800; }
.ms-health-copy strong { font: 700 clamp(8px, 1cqw, 12px)/1 "Fredoka", sans-serif; }
.ms-health-meter i { background: linear-gradient(90deg, #8f2b29, #cf4c3b); }
.ms-health-meter em { width: 0; background: rgba(215,228,229,.6); }
.ms-level-block > span { display: block; margin-bottom: 4px; }
.ms-xp-meter i { background: linear-gradient(90deg, #5b8791, #a9cccb); }

.ms-combo { min-width: 66px; text-align: center; }
.ms-combo small { display: block; color: rgba(242,235,217,.55); font-size: clamp(6px, .68cqw, 8px); font-weight: 800; }
.ms-combo strong { display: block; margin-top: 2px; color: #dfbd6f; font: 700 clamp(12px, 1.65cqw, 20px)/1 "Fredoka", sans-serif; }
.ms-combo.is-hot strong { color: #ff7856; text-shadow: 0 0 15px rgba(255,90,55,.7); animation: msComboPulse .44s ease-in-out infinite alternate; }
@keyframes msComboPulse { to { transform: scale(1.08); } }

.ms-key-hints { align-self: center; display: flex; justify-content: flex-end; gap: 8px; color: rgba(246,239,221,.56); font-size: clamp(6px, .68cqw, 8px); font-weight: 700; }
.ms-key-hints span { padding: 4px 7px; background: rgba(8,13,17,.45); border-radius: 999px; }

.ms-cooldowns {
  position: absolute;
  z-index: 21;
  right: var(--safe-right);
  bottom: calc(var(--safe-bottom) + clamp(50px, 7cqw, 76px));
  display: flex;
  gap: clamp(7px, 1cqw, 12px);
}

.ms-action-button {
  position: relative;
  min-width: clamp(54px, 7cqw, 80px);
  padding: 0;
  color: #eee5d0;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
}

.ms-action-ring {
  position: relative;
  width: clamp(43px, 5.7cqw, 66px);
  height: clamp(43px, 5.7cqw, 66px);
  display: grid;
  place-items: center;
  margin: 0 auto 3px;
  overflow: hidden;
  background: rgba(12,20,26,.88);
  border: 2px solid rgba(231,220,190,.38);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

.ms-action-ring i {
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  background: linear-gradient(0deg, rgba(73,130,139,.85), rgba(119,179,179,.45));
  transition: height .12s linear;
}

.ms-art-button .ms-action-ring i { background: linear-gradient(0deg, rgba(143,43,36,.9), rgba(220,111,67,.52)); }
.ms-action-ring b { position: relative; z-index: 1; font-size: clamp(15px, 2cqw, 23px); }
.ms-action-button > small { display: block; font-size: clamp(7px, .78cqw, 9px); font-weight: 900; }
.ms-action-button kbd { display: block; width: max-content; min-width: 0; margin: 2px auto 0; padding: 1px 4px; color: rgba(255,255,255,.48); background: rgba(3,8,11,.58); border: 0; font: 600 clamp(5px, .57cqw, 7px)/1 "Fredoka", sans-serif; }
.ms-action-button:disabled { filter: grayscale(.8); opacity: .48; cursor: not-allowed; }
.ms-action-button:not(:disabled):hover .ms-action-ring,
.ms-action-button:not(:disabled):focus-visible .ms-action-ring { border-color: #f0d492; transform: scale(1.05); }
.ms-action-button:focus-visible { outline: none; }

.ms-status-strip {
  position: absolute;
  z-index: 18;
  top: calc(var(--safe-top) + clamp(48px, 6.3cqw, 68px));
  left: var(--safe-left);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px;
  color: rgba(248,241,222,.75);
  background: rgba(9,16,20,.62);
  border-radius: 3px 10px 3px 10px;
  font-size: clamp(7px, .78cqw, 10px);
  font-weight: 800;
  backdrop-filter: blur(5px);
}

.ms-status-strip b { color: #efc874; }

.ms-wave-banner {
  position: absolute;
  z-index: 44;
  top: 50%;
  left: 50%;
  width: min(78%, 620px);
  padding: clamp(14px, 2cqw, 25px) 20px;
  color: #f6edd9;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(9,14,18,.88) 15% 85%, transparent);
  transform: translate(-50%, -50%);
  animation: msBanner 1.9s ease both;
}

.ms-wave-banner::before,
.ms-wave-banner::after { position: absolute; left: 12%; right: 12%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, #d7bc78, transparent); }
.ms-wave-banner::before { top: 0; }
.ms-wave-banner::after { bottom: 0; }
.ms-wave-banner small { display: block; color: #bd8f56; font: 700 clamp(8px, .9cqw, 11px)/1 "Fredoka", sans-serif; letter-spacing: .3em; }
.ms-wave-banner strong { display: block; margin: 6px 0 4px; font-size: clamp(24px, 4cqw, 50px); letter-spacing: .1em; }
.ms-wave-banner span { color: rgba(245,237,218,.67); font-size: clamp(8px, .9cqw, 11px); font-weight: 700; }
@keyframes msBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } 14%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.03); } }

/* Choice / pause / result modals */
.ms-modal-layer {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2cqw, 24px);
  background: rgba(5,8,10,.76);
  backdrop-filter: blur(7px);
}

.ms-modal {
  width: min(100%, 940px);
  max-height: 96%;
  padding: clamp(15px, 2.2cqw, 28px);
  overflow: auto;
  color: #292820;
  background: linear-gradient(110deg, rgba(255,251,234,.98), rgba(218,208,185,.98));
  border: 1px solid rgba(255,250,227,.72);
  border-radius: 5px 22px 5px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 50px rgba(77,59,30,.09);
}

.ms-modal-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 13px; }
.ms-modal-head small { display: block; color: var(--ms-vermilion); font: 700 clamp(8px, .9cqw, 11px)/1 "Fredoka", sans-serif; letter-spacing: .25em; }
.ms-modal-head h2 { margin: 4px 0 0; font-size: clamp(22px, 3.3cqw, 42px); line-height: 1; letter-spacing: -.07em; }
.ms-modal-head p { margin: 7px 0 0; color: #6a6355; font-size: clamp(9px, 1.02cqw, 12px); font-weight: 700; }
.ms-modal-stamp { width: clamp(42px, 5.3cqw, 64px); height: clamp(42px, 5.3cqw, 64px); display: grid; flex: 0 0 auto; place-items: center; color: #a83c2c; border: 3px double #a83c2c; border-radius: 5px; font-size: clamp(18px, 2.4cqw, 28px); font-weight: 900; transform: rotate(5deg); }

.ms-upgrade-grid,
.ms-route-grid,
.ms-shop-grid,
.ms-event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.ms-upgrade-card,
.ms-route-card,
.ms-shop-card,
.ms-event-choice {
  position: relative;
  min-height: clamp(130px, 18cqw, 210px);
  padding: clamp(12px, 1.6cqw, 19px);
  overflow: hidden;
  color: #eee7d5;
  text-align: left;
  background: linear-gradient(145deg, #27383f, #111a1f);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 4px 17px 4px 17px;
  box-shadow: 0 10px 22px rgba(33,29,21,.18);
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}

.ms-upgrade-card[data-rarity="rare"] { background: linear-gradient(145deg, #354d5c, #162633); border-color: rgba(104,170,191,.32); }
.ms-upgrade-card[data-rarity="legendary"] { background: linear-gradient(145deg, #6d3b28, #271b17); border-color: rgba(221,167,85,.48); }
.ms-upgrade-card:hover,
.ms-upgrade-card:focus-visible,
.ms-route-card:hover,
.ms-route-card:focus-visible,
.ms-shop-card:not([disabled]):hover,
.ms-shop-card:not([disabled]):focus-visible,
.ms-event-choice:hover,
.ms-event-choice:focus-visible { transform: translateY(-3px); border-color: #e2c779; outline: none; }

.ms-card-icon { display: grid; width: clamp(35px, 4.5cqw, 54px); height: clamp(35px, 4.5cqw, 54px); place-items: center; margin-bottom: 8px; color: #172025; background: #e5dcc4; border-radius: 50% 45% 52% 44%; font-size: clamp(17px, 2.1cqw, 26px); font-weight: 900; }
.ms-upgrade-card h3, .ms-route-card h3, .ms-shop-card h3, .ms-event-choice h3 { position: relative; z-index: 1; margin: 0; font-size: clamp(13px, 1.55cqw, 19px); }
.ms-upgrade-card p, .ms-route-card p, .ms-shop-card p, .ms-event-choice p { position: relative; z-index: 1; margin: 7px 0 0; color: rgba(241,235,218,.66); font-size: clamp(8px, .92cqw, 11px); line-height: 1.55; font-weight: 700; }
.ms-card-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; color: rgba(242,235,215,.55); font-size: clamp(7px, .78cqw, 9px); font-weight: 800; }
.ms-rarity { color: #d2bc80; letter-spacing: .1em; }
.ms-upgrade-card[data-rarity="rare"] .ms-rarity { color: #8bc9dc; }
.ms-upgrade-card[data-rarity="legendary"] .ms-rarity { color: #efba59; }

.ms-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-route-card { min-height: clamp(116px, 15cqw, 170px); }
.ms-route-card[data-type="elite"] { background: linear-gradient(145deg, #65342a, #251918); }
.ms-route-card[data-type="shrine"] { background: linear-gradient(145deg, #405c5c, #172828); }
.ms-route-card[data-type="shop"] { background: linear-gradient(145deg, #6b5633, #292317); }
.ms-route-card[data-type="event"] { background: linear-gradient(145deg, #4e4261, #211b2b); }

.ms-shop-card { min-height: clamp(126px, 16cqw, 185px); }
.ms-shop-card[disabled] { filter: grayscale(.75); opacity: .46; cursor: not-allowed; }
.ms-price { color: #efc463; font: 700 clamp(12px, 1.5cqw, 18px)/1 "Fredoka", sans-serif; }
.ms-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

.ms-inline-button,
.ms-modal-button {
  min-height: 40px;
  padding: 8px 16px;
  color: #f9efda;
  background: #263940;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px 12px 3px 12px;
  font-size: clamp(9px, 1cqw, 12px);
  font-weight: 900;
  cursor: pointer;
}

.ms-inline-button.is-primary,
.ms-modal-button.is-primary { background: #a63c2d; }
.ms-inline-button:hover, .ms-inline-button:focus-visible, .ms-modal-button:hover, .ms-modal-button:focus-visible { border-color: #e6c77c; outline: none; transform: translateY(-1px); }
.ms-modal-actions { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }

.ms-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-event-choice { min-height: 110px; }

.ms-run-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.ms-summary-item { padding: 10px; text-align: center; background: rgba(56,47,33,.08); border: 1px solid rgba(56,47,33,.12); border-radius: 4px 13px 4px 13px; }
.ms-summary-item small { display: block; color: #746c5c; font-size: 8px; font-weight: 800; }
.ms-summary-item strong { display: block; margin-top: 4px; color: #2b363a; font: 700 clamp(16px, 2cqw, 25px)/1 "Fredoka", sans-serif; }
.ms-seal-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ms-seal-chip { padding: 5px 8px; color: #f0e8d5; background: #2e3d42; border-radius: 999px; font-size: 8px; font-weight: 800; }

/* Boss introduction */
.ms-boss-intro {
  position: absolute;
  z-index: 80;
  inset: 0;
  overflow: hidden;
  color: #f5ecd7;
  background: #090c0f;
}

.ms-boss-art { position: absolute; inset: 0; background-position: center; background-size: cover; animation: msBossDrift 7s ease-out both; }
.ms-boss-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5,8,10,.9) 0%, rgba(5,8,10,.52) 42%, rgba(5,8,10,.12) 70%); }
.ms-boss-copy { position: absolute; z-index: 2; left: clamp(22px, 5cqw, 70px); top: 50%; width: min(44%, 510px); transform: translateY(-50%); }
.ms-boss-copy small { color: #ce624b; font: 700 clamp(9px, 1.1cqw, 14px)/1 "Fredoka", sans-serif; letter-spacing: .28em; }
.ms-boss-copy h2 { margin: 8px 0; font-size: clamp(31px, 5.5cqw, 70px); line-height: 1; letter-spacing: -.07em; text-shadow: 0 5px 24px rgba(0,0,0,.55); }
.ms-boss-copy p { color: rgba(244,235,215,.7); font-size: clamp(10px, 1.3cqw, 16px); font-weight: 700; }
.ms-boss-copy button { min-width: 150px; margin-top: 17px; padding: 10px 20px; color: #fff2da; background: #a53c2f; border: 1px solid #d69b7f; border-radius: 3px 13px 3px 13px; font-size: clamp(10px, 1.2cqw, 14px); font-weight: 900; cursor: pointer; }
.ms-boss-copy button:hover, .ms-boss-copy button:focus-visible { background: #c54a36; outline: 2px solid #f2dba4; outline-offset: 2px; }
.ms-ink-wipe { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: #080b0d; transform: translateX(100%); }
.ms-boss-intro.is-entering .ms-ink-wipe { animation: msInkReveal .9s cubic-bezier(.7,0,.2,1) both; }
.ms-boss-intro.is-leaving .ms-ink-wipe { animation: msInkClose .8s cubic-bezier(.7,0,.2,1) both; }
@keyframes msBossDrift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes msInkReveal { 0% { transform: translateX(0); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 100% { transform: translateX(100%); clip-path: polygon(18% 0,100% 8%,93% 100%,0 88%); } }
@keyframes msInkClose { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }

/* Touch controls */
.ms-touch-zone {
  position: absolute;
  z-index: 22;
  left: var(--safe-left);
  bottom: calc(var(--safe-bottom) + clamp(48px, 6.5cqw, 70px));
  display: none;
  width: clamp(82px, 13cqw, 132px);
  height: clamp(82px, 13cqw, 132px);
  place-items: center;
  border: 1px solid rgba(240,230,202,.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,230,202,.08), rgba(9,15,19,.26) 62%, rgba(9,15,19,.52));
  box-shadow: inset 0 0 20px rgba(0,0,0,.22);
  pointer-events: auto;
  touch-action: none;
}

.ms-joystick { position: relative; width: 100%; height: 100%; }
.ms-joystick::before { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; content: ""; border: 1px dashed rgba(230,220,193,.25); border-radius: 50%; transform: translate(-50%,-50%); }
.ms-joystick i { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; background: rgba(226,216,190,.72); border: 2px solid rgba(255,251,232,.66); border-radius: 50%; box-shadow: 0 7px 18px rgba(0,0,0,.28); transform: translate(-50%,-50%); }

.ms-toast {
  position: absolute;
  z-index: 90;
  left: 50%;
  bottom: clamp(70px, 11cqw, 120px);
  max-width: min(82%, 560px);
  padding: 8px 14px;
  color: #f9eed6;
  background: rgba(12,19,23,.88);
  border: 1px solid rgba(235,220,180,.32);
  border-radius: 3px 12px 3px 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  font-size: clamp(8px, .95cqw, 12px);
  font-weight: 800;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s;
}

.ms-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.ms-game[data-state="choice"] .ms-toast,
.ms-game[data-state="paused"] .ms-toast {
  opacity: 0;
  transform: translate(-50%, 12px);
}
.ms-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (pointer: coarse), (max-width: 920px) {
  .ms-touch-zone { display: grid; }
  .ms-key-hints { display: none; }
  .ms-action-button kbd { display: none; }
  .ms-cooldowns { bottom: calc(var(--safe-bottom) + clamp(50px, 7cqw, 74px)); }
  .ms-action-ring { width: clamp(52px, 7.2cqw, 76px); height: clamp(52px, 7.2cqw, 76px); }
}

@container (max-width: 760px) {
  .ms-hud-resources .ms-resource small { display: none; }
  .ms-hud-resources .ms-resource { min-width: 42px; grid-template-columns: auto 1fr; grid-template-rows: 1fr; }
  .ms-resource > span { grid-row: auto; font-size: 11px; }
  .ms-title-content { min-width: 330px; }
  .ms-guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ms-record-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ms-unlock-grid, .ms-bestiary { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 720px) and (orientation: portrait) {
  .tsukikage-stage:not(.games-faux-fullscreen):not(:fullscreen) {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 9 / 14 !important;
  }

  .ms-title-screen { background-position: 65% center; }
  .ms-title-shade {
    background:
      linear-gradient(0deg, rgba(8,10,11,.97) 0%, rgba(8,10,11,.76) 46%, rgba(8,10,11,.15) 80%),
      linear-gradient(90deg, rgba(8,10,11,.45), rgba(8,10,11,.08));
  }
  .ms-title-content {
    width: 100%;
    min-width: 0;
    padding: 19px 18px max(20px, env(safe-area-inset-bottom));
    justify-content: flex-end;
    align-items: center;
    text-align: center;
  }
  .ms-logo { font-size: clamp(42px, 15cqw, 66px); }
  .ms-logo > span { font-size: .48em; }
  .ms-tagline { max-width: 340px; font-size: 11px; }
  .ms-title-actions { width: 100%; max-width: 360px; }
  .ms-brush-button { min-height: 58px; text-align: center; }
  .ms-eyebrow { font-size: 9px; }

  .ms-select-screen, .ms-guide-screen, .ms-archive-screen { padding: 8px; align-items: stretch; }
  .ms-panel { max-height: 100%; padding: 14px; border-radius: 4px 15px 4px 15px; }
  .ms-panel-heading h2 { font-size: 27px; }
  .ms-panel-heading p { display: none; }
  .ms-discipline-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .ms-discipline-card { min-height: 112px; padding: 12px; }
  .ms-discipline-symbol { float: left; width: 42px; height: 42px; margin: 0 10px 5px 0; }
  .ms-discipline-card p { font-size: 9px; }
  .ms-talisman-row { grid-template-columns: 1fr; gap: 6px; }
  .ms-talisman-row > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ms-talisman-choice { padding: 7px 5px; }
  .ms-journey-button { min-height: 54px; margin-top: 9px; }
  .ms-guide-grid { grid-template-columns: 1fr; gap: 7px; }
  .ms-guide-grid article { padding: 12px; }
  .ms-guide-controls { justify-content: flex-start; }
  .ms-record-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ms-unlock-grid, .ms-bestiary { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .ms-hud { gap: 5px; }
  .ms-hud-run { min-width: 0; padding-right: 8px; }
  .ms-hud-run > div:last-child { max-width: 104px; }
  .ms-hud-run strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-hud-resources { position: absolute; top: 48px; left: 0; }
  .ms-top-actions { gap: 4px; }
  .ms-icon-button { width: 39px; height: 39px; }
  .ms-status-strip { top: 91px; }
  .ms-boss-bar { top: 94px; width: calc(100% - 24px); }
  .ms-player-hud { grid-template-columns: minmax(120px,1fr) 90px auto; right: 10px; bottom: var(--safe-bottom); }
  .ms-level-block { display: none; }
  .ms-combo { min-width: 56px; }
  .ms-health-block { padding: 7px 9px; }
  .ms-cooldowns { right: var(--safe-right); bottom: calc(var(--safe-bottom) + 58px); gap: 5px; }
  .ms-action-button { min-width: 55px; }
  .ms-action-ring { width: 52px; height: 52px; }
  .ms-touch-zone { width: 100px; height: 100px; bottom: calc(var(--safe-bottom) + 55px); }

  .ms-modal-layer { padding: 7px; align-items: stretch; }
  .ms-modal { max-height: 100%; padding: 13px; }
  .ms-modal-head h2 { font-size: 27px; }
  .ms-upgrade-grid, .ms-shop-grid { grid-template-columns: 1fr; gap: 7px; }
  .ms-upgrade-card, .ms-shop-card { min-height: 98px; padding: 11px; }
  .ms-upgrade-card .ms-card-icon, .ms-shop-card .ms-card-icon { float: left; width: 38px; height: 38px; margin: 0 9px 7px 0; }
  .ms-route-grid, .ms-event-grid { grid-template-columns: 1fr; gap: 7px; }
  .ms-route-card, .ms-event-choice { min-height: 86px; }
  .ms-run-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .ms-boss-art { background-position: 66% center; }
  .ms-boss-art::after { background: linear-gradient(0deg, rgba(5,8,10,.94) 0%, rgba(5,8,10,.45) 55%, rgba(5,8,10,.1)); }
  .ms-boss-copy { left: 18px; right: 18px; top: auto; bottom: 28px; width: auto; text-align: center; transform: none; }
  .ms-boss-copy h2 { font-size: 38px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .ms-title-content { padding: 18px 28px; }
  .ms-logo { font-size: clamp(38px, 8.2vh, 66px); }
  .ms-tagline { margin-top: 8px; font-size: clamp(9px, 2.3vh, 12px); line-height: 1.55; }
  .ms-title-actions { margin-top: 10px; }
  .ms-brush-button { min-height: clamp(46px, 11vh, 62px); }
  .ms-title-links { margin-top: 6px; }
  .ms-title-record { display: none; }
  .ms-panel { max-height: 98%; padding: 12px 16px; }
  .ms-panel-heading { padding-bottom: 8px; }
  .ms-panel-heading h2 { font-size: clamp(23px, 7vh, 34px); }
  .ms-discipline-grid { margin-top: 9px; gap: 8px; }
  .ms-discipline-card { min-height: 132px; padding: 11px; }
  .ms-discipline-symbol { width: 39px; height: 39px; margin-bottom: 5px; }
  .ms-discipline-card p { font-size: 8px; line-height: 1.45; }
  .ms-discipline-stats { margin-top: 5px; }
  .ms-talisman-row { margin-top: 7px; padding: 5px 9px; }
  .ms-journey-button { min-height: 44px; margin-top: 7px; padding: 6px 12px; }
  .ms-guide-grid { margin-top: 8px; gap: 7px; }
  .ms-guide-grid article { padding: 10px; }
  .ms-guide-grid p { font-size: 8px; line-height: 1.5; }
  .ms-guide-controls { margin-top: 7px; }

  .ms-hud { top: max(5px, env(safe-area-inset-top)); }
  .ms-hud-group { min-height: 40px; }
  .ms-hud-run { min-width: 145px; }
  .ms-chapter-mark { width: 30px; height: 30px; font-size: 15px; }
  .ms-icon-button { width: 40px; height: 40px; }
  .ms-boss-bar { top: 48px; }
  .ms-status-strip { top: 48px; }
  .ms-player-hud { bottom: max(5px,env(safe-area-inset-bottom)); }
  .ms-health-block, .ms-level-block, .ms-combo { padding: 5px 8px; }
  .ms-cooldowns { right: max(7px,env(safe-area-inset-right)); bottom: max(51px,calc(env(safe-area-inset-bottom) + 46px)); }
  .ms-action-ring { width: 48px; height: 48px; }
  .ms-touch-zone { left: max(9px,env(safe-area-inset-left)); bottom: max(50px,calc(env(safe-area-inset-bottom) + 45px)); width: 92px; height: 92px; }
  .ms-modal-layer { padding: 6px; }
  .ms-modal { max-height: 100%; padding: 12px 15px; }
  .ms-modal-head { margin-bottom: 7px; }
  .ms-modal-head h2 { font-size: 27px; }
  .ms-upgrade-card, .ms-route-card, .ms-shop-card { min-height: 112px; padding: 10px; }
  .ms-card-icon { width: 34px; height: 34px; margin-bottom: 5px; }
  .ms-boss-copy h2 { font-size: clamp(33px, 12vh, 58px); }
}

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