:root {
  --bg: #eaf4ff;
  --panel: #fffaf8;
  --panel-2: #eef5ff;
  --line: #9db2cf;
  --text: #48556f;
  --muted: #7083a1;
  --accent: #f3d560;
  --accent-2: #88ddcf;
  --danger: #f17895;
  --shadow: 0 18px 44px rgba(117, 143, 183, 0.22);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }

body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background-image:
    linear-gradient(rgba(134, 164, 204, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134, 164, 204, .12) 1px, transparent 1px);
  background-size: 24px 24px;
}


/* 起動中・ログイン認証中は未完成の画面を見せない */
body.app-loading { overflow: hidden; }
body.app-loading .app-shell,
body.app-loading .footer {
  visibility: hidden;
  opacity: 0;
}

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  color: #526483;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.46) 26%, rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #eef8ff 0%, #f8fbff 42%, #fff1f7 100%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility .35s ease;
}

body.app-ready .boot-splash {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.app-ready .app-shell,
body.app-ready .footer {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}

.loading-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  padding: clamp(22px, 4vw, 54px);
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.80), rgba(255,255,255,.22) 42%, transparent 67%),
    linear-gradient(90deg, rgba(230,244,255,.72), rgba(255,255,255,.24) 45%, rgba(255,235,245,.62));
}

.loading-brand {
  width: fit-content;
  max-width: 92vw;
  padding: 12px 22px 14px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 36px rgba(89,119,167,.18);
  backdrop-filter: blur(9px);
}
.loading-logo-row {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #6277a3;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 1000;
}
.loading-logo-row strong { letter-spacing: .08em; }
.loading-kicker {
  margin: 5px 0 0;
  color: #c47796;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .18em;
}

.loading-guide {
  position: absolute;
  left: clamp(22px, 5vw, 72px);
  top: 50%;
  transform: translateY(-44%);
  width: min(560px, 58vw);
  padding: clamp(18px, 2.5vw, 30px);
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 30px;
  background: rgba(255,252,250,.86);
  box-shadow: 0 22px 48px rgba(86,117,166,.22);
  backdrop-filter: blur(12px);
}
.loading-guide h2 {
  margin: 0 0 16px;
  color: #5e73a0;
  font-size: clamp(24px, 3vw, 36px);
}
.loading-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.loading-guide-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
  padding: 15px;
  border: 2px solid #d7e2f3;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,255,.93));
}
.loading-guide-card .guide-device {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: #8daadd;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.loading-guide-card strong { color: #6e6a8f; font-size: 13px; }
.loading-guide-card span:not(.guide-device) { color: #687b9d; font-size: 12px; font-weight: 800; }
.loading-tip {
  margin: 14px 0 0;
  color: #a16f88;
  line-height: 1.65;
  font-size: 13px;
  font-weight: 800;
}

.loading-bottom-right {
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  bottom: clamp(22px, 4vw, 48px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.loading-text-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-bottom: 16px;
}
.now-loading-text {
  color: #6b7fa8;
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 1000;
  letter-spacing: .06em;
  text-shadow: 0 2px 0 rgba(255,255,255,.9);
  animation: loadingWave 1.65s ease-in-out infinite;
}
.loading-ellipsis { display: inline-flex; gap: 3px; }
.loading-ellipsis i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e790ad;
  animation: loadingDot 1s ease-in-out infinite alternate;
}
.loading-ellipsis i:nth-child(2) { animation-delay: .16s; }
.loading-ellipsis i:nth-child(3) { animation-delay: .32s; }
.loading-runner {
  width: clamp(92px, 12vw, 158px);
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 10px 9px rgba(76,105,152,.18));
  animation: runnerBob .48s ease-in-out infinite alternate;
}
.boot-status {
  position: absolute;
  left: clamp(22px, 5vw, 72px);
  bottom: clamp(22px, 4vw, 45px);
  margin: 0;
  padding: 8px 13px;
  border-radius: 999px;
  color: #7c8dac;
  background: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}
.boot-error .boot-status { color: #b74f6d; background: rgba(255,239,244,.92); }

@keyframes loadingWave {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  25% { transform: translateY(-4px) rotate(.6deg); }
  55% { transform: translateY(2px) rotate(-.5deg); }
  78% { transform: translateY(-2px) rotate(.8deg); }
}
@keyframes loadingDot { from { transform: translateY(0); opacity: .4; } to { transform: translateY(-6px); opacity: 1; } }
@keyframes runnerBob { from { transform: translateY(0) rotate(-.5deg); } to { transform: translateY(-4px) rotate(.5deg); } }

@media (max-width: 760px) {
  .loading-scene { padding: 16px; }
  .loading-brand { padding: 9px 14px 11px; }
  .loading-guide {
    left: 14px;
    right: 14px;
    top: 47%;
    width: auto;
    transform: translateY(-50%);
    padding: 16px;
  }
  .loading-guide-grid { grid-template-columns: 1fr; gap: 9px; }
  .loading-guide-card { padding: 10px 12px; }
  .loading-tip { margin-top: 9px; font-size: 11px; }
  .loading-bottom-right { right: 12px; bottom: 18px; }
  .loading-text-wrap { padding-bottom: 8px; }
  .loading-runner { width: 92px; }
  .boot-status { left: 12px; bottom: 14px; max-width: 46vw; font-size: 10px; }
}

.hidden { display: none !important; }

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,249,251,.98));
  border: 2px solid #c4d2ec;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.login-panel {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr);
  align-items: center;
  gap: 32px;
  padding: clamp(26px, 6vw, 52px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.44)),
    url('./assets/ui/title-key-art.png?v=62') center / cover no-repeat;
}

.login-panel h2 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 54px); }
.hero-visual { display: grid; place-items: center; }
.hero-card {
  padding: 16px;
  border-radius: 28px;
  background: rgba(255,255,255,.58);
  border: 2px solid rgba(255,255,255,.72);
  backdrop-filter: blur(3px);
}
.login-hero-logo { width: min(100%, 360px); height: auto; display: block; margin: 0 auto 10px; }
.login-copy-card {
  padding: 24px 24px 20px;
  border-radius: 28px;
  background: rgba(255, 251, 247, .88);
  border: 2px solid rgba(208, 219, 239, .9);
  box-shadow: 0 16px 30px rgba(123, 145, 181, .15);
  backdrop-filter: blur(4px);
}
.login-character {
  width: min(100%, 560px);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,.82);
  box-shadow: 0 18px 24px rgba(92, 119, 163, .18);
  filter: none;
}

.login-form { margin-top: 28px; }
.login-form label { display: block; margin-bottom: 8px; font-weight: 800; }
.login-row { display: flex; gap: 10px; }
.login-row input {
  flex: 1; min-width: 0; padding: 14px 16px; color: var(--text); background: #ffffff;
  border: 2px solid var(--line); outline: none;
}
.login-row input:focus { border-color: var(--accent); }
.error-text { min-height: 22px; color: var(--danger); font-size: 13px; }

.primary-button, .control-button, .upgrade-card {
  border: 2px solid #ffffff; color: #52617f; background: linear-gradient(180deg, #ffeaa8, #f3d560); font-weight: 1000;
  box-shadow: 0 8px 18px rgba(188, 153, 71, .25); transition: transform .08s ease, box-shadow .08s ease; border-radius: 18px;
}
.primary-button { padding: 14px 20px; }
.primary-button:hover, .control-button:hover, .upgrade-card:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(188, 153, 71, .28); }
.primary-button:active, .control-button:active, .upgrade-card:active { transform: translateY(1px) scale(.99); box-shadow: 0 5px 10px rgba(188, 153, 71, .22); }
.big-button { min-width: 180px; font-size: 16px; padding: 11px 20px; }

.user-badge { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); }
.text-button, .icon-button { border: 0; background: transparent; color: var(--muted); }
.text-button:hover, .icon-button:hover { color: var(--text); }
.icon-button { font-size: 24px; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.game-column { min-width: 0; display: grid; gap: 12px; }
.hud-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.hud-item { padding: 12px 16px; border-right: 1px solid var(--line); }
.hud-item:last-child { border-right: 0; }
.hud-item span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.hud-item strong { font-size: 22px; }

.game-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(180deg, #dff2ff, #fff6fb); border-radius: 28px; }
#game-canvas { display: block; width: 100%; height: 100%; image-rendering: auto; touch-action: none; }

.overlay-card, .upgrade-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: auto;
  background: rgba(218, 231, 250, .70);
  backdrop-filter: blur(5px);
}

.upgrade-overlay {
  background: rgba(224, 232, 246, .84);
  backdrop-filter: blur(14px) saturate(.95);
}

.overlay-start {
  background:
    linear-gradient(180deg, rgba(232,242,255,.18), rgba(255,238,247,.30)),
    url('./assets/ui/title-key-art.png?v=62') center / cover no-repeat;
}

.overlay-inner {
  width: min(520px, 96%);
  max-height: calc(100% - 16px);
  overflow-y: auto;
  padding: 18px 22px 20px;
  text-align: center;
  color: #526483;
  background: rgba(255, 252, 250, .90);
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 28px;
  box-shadow: 0 18px 38px rgba(85, 113, 158, .22);
  backdrop-filter: blur(8px);
}

.overlay-start .overlay-inner {
  border-color: rgba(255, 232, 172, .92);
}

.overlay-gameover {
  background: rgba(236, 226, 242, .76);
}

.overlay-gameover .overlay-inner {
  border-color: rgba(246, 174, 194, .95);
  background: rgba(255, 247, 250, .94);
}

.overlay-logo {
  display: block;
  margin: 0 auto 6px;
}

.overlay-logo-image {
  display: block;
  width: min(340px, 82vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 14px rgba(103, 132, 180, .20));
}

.overlay-character {
  display: block;
  width: min(220px, 52vw);
  max-height: 170px;
  object-fit: contain;
  height: auto;
  margin: 6px auto 4px;
  image-rendering: auto;
  filter: drop-shadow(0 8px 14px rgba(98, 126, 168, .20));
}

.result-scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.result-encounter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.result-enemy-canvas {
  width: 116px;
  height: 100px;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(100, 117, 154, 0.12));
}
.result-enemy-speech {
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid rgba(199, 214, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  color: #6176a4;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(121, 142, 179, 0.12);
}
.result-newrecord {
  display: block;
  width: min(220px, 48vw);
  height: auto;
  margin: 2px auto 8px;
  filter: drop-shadow(0 10px 18px rgba(243, 190, 212, 0.28));
}

/* スタート画面は背景そのものがメインビジュアルなので重複画像は非表示 */
.overlay-start .overlay-character {
  display: none;
}

.overlay-gameover .overlay-character {
  display: block;
  width: min(240px, 52vw);
  max-height: 135px;
}

.overlay-inner h2 {
  margin: 8px 0 6px;
  font-size: clamp(24px, 3vw, 34px);
  color: #5d6f96;
}

.overlay-inner p {
  margin: 6px auto;
  line-height: 1.65;
}

.overlay-note {
  color: #a47791;
  font-size: 13px;
  font-weight: 800;
}

.control-help {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 10px 0 12px;
  color: #7184a7;
  font-size: 12px;
  font-weight: 800;
}
.augment-box {
  position: relative;
  width: min(960px, 100%);
  min-height: min(650px, calc(100vh - 42px));
  padding: 224px 78px 54px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.22)),
    url('./assets/backgrounds/ability-select-bg.png?v=62') center / cover no-repeat;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 30px;
  box-shadow: 0 18px 0 rgba(106, 131, 176, .13), 0 28px 60px rgba(98, 120, 158, .30);
}
.augment-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 248, 252, .60), rgba(245, 249, 255, .72));
}
.augment-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 210px;
  transform: translateX(-50%);
  width: min(860px, calc(100% - 54px));
  height: calc(100% - 246px);
  z-index: 1;
  border-radius: 30px;
  background: rgba(255, 252, 250, .66);
  border: 2px solid rgba(255,255,255,.58);
  box-shadow: inset 0 0 0 1px rgba(234, 221, 225, .5);
  backdrop-filter: blur(10px);
}
/* 生成素材側にタイトル・装飾が描かれているため、コード側の重複タイトルは隠す */
.augment-topline,
.augment-box > h2,
.augment-subtitle,
.augment-rule,
.augment-footer {
  display: none;
}
.upgrade-cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 auto;
  width: min(780px, 100%);
  align-items: stretch;
}
.augment-card {
  position: relative;
  min-height: 322px;
  padding: 24px 16px 18px;
  overflow: hidden;
  text-align: center;
  color: #4e5d81;
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,249,245,.98));
  border: 3px solid #c4d7f5;
  border-radius: 24px;
  box-shadow: 0 8px 0 rgba(124, 145, 184, .14), 0 15px 28px rgba(96, 119, 161, .16);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease, filter .14s ease;
  backdrop-filter: blur(3px);
}
.augment-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(174, 196, 230, .62);
  border-radius: 17px;
  pointer-events: none;
}
.augment-card::after {
  content: "🎀";
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  font-size: 27px;
  filter: drop-shadow(0 2px 2px rgba(100,120,160,.15));
}
.augment-card.bronze { border-color: #e9d0bd; background: linear-gradient(180deg, rgba(255,252,248,.96), rgba(255,239,230,.94)); }
.augment-card.silver { border-color: #b9cfee; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,246,255,.94)); }
.augment-card.gold { border-color: #f1cf60; background: linear-gradient(180deg, rgba(255,255,249,.97), rgba(255,243,190,.95)); box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 0 24px rgba(255,217,82,.28); }
.augment-card:hover { transform: translateY(-7px) scale(1.015); box-shadow: 0 13px 0 rgba(120,140,174,.12), 0 22px 38px rgba(96,118,160,.22); }
.augment-card:active { transform: translateY(-2px) scale(.995); }
.augment-card.selected { transform: scale(1.04); box-shadow: 0 0 0 5px rgba(255,255,255,.95), 0 0 0 9px rgba(244, 169, 202, .70), 0 20px 44px rgba(129, 94, 131, .25); }
.augment-card.not-selected { opacity: .30; filter: saturate(.35) blur(.4px); transform: scale(.97); }
.augment-card:disabled { cursor: default; }
.augment-tier {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 2px auto 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #9c7395;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .05em;
}
.augment-icon-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  border-radius: 24px;
  background: linear-gradient(145deg, #eef6ff, #dbeaff);
  border: 2px solid rgba(126, 155, 202, .30);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9);
}
.augment-card.gold .augment-icon-wrap { background: linear-gradient(145deg, #fff9da, #ffe998); }
.augment-card.bronze .augment-icon-wrap { background: linear-gradient(145deg, #fff5ed, #f8dccb); }
.augment-card .icon { display: block; margin: 0; font-size: 39px; }
.augment-card .name { position: relative; z-index: 1; display: block; margin: 4px 0 3px; color: #3f5b91; font-size: 22px; font-weight: 1000; text-shadow: 0 1px 0 white; }
.augment-level { position: relative; z-index: 1; display: inline-block; margin: 0 0 8px; color: #d0799c; font-size: 12px; font-weight: 1000; }
.augment-divider { position: relative; z-index: 1; display: block; width: 62%; height: 2px; margin: 3px auto 10px; background: linear-gradient(90deg, transparent, #c5d4ef, transparent); }
.augment-card .desc { position: relative; z-index: 1; display: block; min-height: 62px; color: #52658c; font-size: 13px; font-weight: 800; line-height: 1.6; }
.augment-pick { position: relative; z-index: 1; display: inline-block; margin-top: 13px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, #8eafe9, #6f91cf); color: #fff; font-size: 12px; font-weight: 1000; box-shadow: 0 4px 0 rgba(72, 98, 145, .18); }
.augment-card.gold .augment-pick { background: linear-gradient(180deg, #f0cc63, #d7a932); }
.augment-card.bronze .augment-pick { background: linear-gradient(180deg, #e3b792, #c98d69); }
.augment-corner { position: absolute; z-index: 1; color: rgba(139, 167, 211, .45); font-size: 22px; font-weight: 1000; }
.augment-corner.top-left { top: 12px; left: 14px; }
.augment-corner.bottom-right { right: 14px; bottom: 12px; transform: rotate(180deg); }

.mobile-gesture-help { display: none; text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; padding: 7px 10px; background: rgba(255,255,255,.55); border: 1px solid var(--line); }
.mobile-controls { display: none; grid-template-columns: 1fr 1fr; gap: 12px; }
.control-button { min-height: 64px; font-size: 18px; }
.jump-button { background: linear-gradient(180deg, #9fc8ff, #82afea); color: white; }
.duck-button { background: linear-gradient(180deg, #ffc6df, #f4aac7); color: white; }

.build-panel { display: flex; align-items: center; gap: 20px; padding: 14px 16px; }
.build-panel h3 { margin: 0; }
.build-list { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.build-chip { padding: 7px 10px; background: linear-gradient(180deg, #fff, #f4f8ff); border: 1px solid #d2ddf1; border-radius: 999px; font-size: 12px; font-weight: 800; }

.ranking-panel { position: sticky; top: 12px; padding: 18px; max-height: calc(100vh - 24px); overflow: auto; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.95)); }
.ranking-header { display: flex; justify-content: space-between; align-items: center; }
.ranking-header h2 { margin: 0; font-size: 30px; }
.ranking-status { margin: 14px 0 6px; color: var(--muted); font-size: 13px; }
.ranking-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ranking-item { counter-increment: rank; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ranking-item::before { content: counter(rank); font-weight: 1000; color: var(--muted); }
.ranking-item.me { background: rgba(255,216,77,.08); }
.rank-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.rank-score { color: var(--accent); font-weight: 1000; }

.footer { padding: 18px; text-align: center; color: #778196; font-size: 12px; }

@media (max-height: 720px) {
  .overlay-card { padding: 8px; }
  .overlay-inner { width: min(410px, 100%); padding: 10px 14px 12px; }
  .overlay-character { width: min(170px, 32vw); margin-top: 0; }
  .overlay-logo { padding: 4px 10px; margin-bottom: 2px; }
  .overlay-logo .logo-text { font-size: 22px; }
  .overlay-inner h2 { font-size: 24px; margin-bottom: 4px; }
  .overlay-inner p { margin-top: 4px; margin-bottom: 4px; }
  .overlay-note { font-size: 12px; }
  .control-help { margin: 6px 0 8px; font-size: 11px; }
  .big-button { min-width: 160px; padding: 9px 18px; }
}

@media (max-width: 980px) {
  .game-layout { grid-template-columns: 1fr; }
  .ranking-panel { position: static; max-height: none; }
  .mobile-gesture-help { display: block; }
  .mobile-controls { display: grid; }
}

@media (max-width: 680px) {
  .app-shell { width: min(100% - 18px, 1440px); padding-top: 14px; }
  .topbar { align-items: flex-end; }
  .login-panel { grid-template-columns: 1fr; gap: 26px; }
  .login-row { flex-direction: column; }
  .hud-strip { grid-template-columns: repeat(2, 1fr); }
  .hud-item:nth-child(2) { border-right: 0; }
  .hud-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .upgrade-cards { grid-template-columns: 1fr; max-height: 58vh; overflow: auto; padding: 2px; }
  .augment-box::after { top: 168px; height: calc(100% - 196px); width: calc(100% - 26px); }
  .augment-card { min-height: 210px; }
  .augment-box { padding: 16px 12px 14px; border-radius: 20px; }
  .build-panel { align-items: flex-start; flex-direction: column; }
}


.keybind-panel { padding: 14px 16px; }
.keybind-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keybind-heading h3 { margin: 0; }
.key-reset { font-weight: 800; }
.keybind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.keybind-action { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.keybind-action strong { min-width: 78px; }
.keybind-button { min-width: 72px; padding: 8px 10px; border: 2px solid var(--line); background: #fff; color: var(--text); font-weight: 900; border-radius: 8px; box-shadow: 3px 3px 0 rgba(112,146,188,.18); }
.keybind-button:hover { border-color: #7fa7d8; }
.keybind-button.listening { border-color: #f17895; background: #fff0f4; color: #b24f6b; animation: keyPulse .8s ease-in-out infinite alternate; }
@keyframes keyPulse { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@media (max-width: 680px) {
  .keybind-grid { grid-template-columns: 1fr; }
  .keybind-heading { align-items: flex-start; flex-direction: column; }
}

.panel h2, .panel h3 { color: #5b6f96; }
.login-panel, .keybind-panel, .build-panel, .ranking-panel { position: relative; overflow: hidden; }
.login-panel::after, .keybind-panel::after, .build-panel::after, .ranking-panel::after { content: ""; position: absolute; right: 16px; top: 14px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,231,.48), rgba(255,214,231,0)); pointer-events: none; }
.mobile-gesture-help { border-radius: 14px; }
.keybind-button { border-radius: 14px; background: linear-gradient(180deg, #fff, #f3f7ff); border: 2px solid #d0dbef; color: #5e6e8c; }
.keybind-button.is-listening { background: linear-gradient(180deg, #ffeeb8, #f7da79); }
.text-button, .icon-button { color: #758ab0; }
.ranking-name { font-weight: 900; color: #5f6f8f; }
.ranking-score { color: #8195ba; }

@media (max-width: 720px) {
  .augment-box { min-height: auto; padding: 150px 12px 24px; background-position: center top; }
  .upgrade-cards { grid-template-columns: 1fr; max-height: 56vh; overflow-y: auto; gap: 12px; padding: 2px 7px 12px; }
  .augment-box::after { top: 154px; height: calc(100% - 178px); width: calc(100% - 18px); }
  .augment-card { min-height: 190px; padding: 15px 13px 18px; }
  .augment-icon-wrap { width: 58px; height: 58px; margin-bottom: 7px; }
  .augment-card .icon { font-size: 30px; }
  .augment-card .name { font-size: 18px; }
  .augment-card .desc { min-height: auto; }
}


/* === v10 ability selection UI rebuilt around the background art === */
.upgrade-overlay {
  background: rgba(233, 241, 252, .46);
  backdrop-filter: blur(5px);
}

.upgrade-box {
  position: relative;
  width: min(1020px, calc(100vw - 20px));
  aspect-ratio: 1448 / 1086;
  background: url('./assets/backgrounds/ability-select-bg.png?v=62') center / contain no-repeat;
}

.upgrade-cards {
  position: absolute;
  left: 14.8%;
  right: 14.8%;
  top: 27.4%;
  bottom: 24.4%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.35%;
  z-index: 2;
}

.augment-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  padding: 0;
  overflow: visible;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 24px;
  box-shadow: none;
  color: #536892;
  text-align: center;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
}
.augment-card::before,
.augment-card::after,
.augment-tier,
.augment-divider,
.augment-corner,
.augment-card .icon,
.augment-card .name,
.augment-card .desc { display: none !important; }
.augment-card:hover { transform: translateY(-3px) scale(1.01); filter: drop-shadow(0 12px 18px rgba(104,127,175,.16)); }
.augment-card.selected { transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 16px 22px rgba(120,147,201,.22)); }

.augment-hit-glow {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;
  transition: box-shadow .14s ease, background .14s ease;
}
.augment-card.selected .augment-hit-glow {
  box-shadow: 0 0 0 5px rgba(255,255,255,.88), 0 0 0 10px rgba(244, 184, 213, .72);
  background: rgba(255,255,255,.06);
}

.augment-icon-wrap {
  position: absolute;
  left: 50%;
  top: 7.8%;
  transform: translateX(-50%);
  width: 55.5%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 2;
}
.augment-icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(112,134,180,.18));
}

.augment-name {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 49.2%;
  display: grid;
  place-items: center;
  min-height: 12%;
  font-size: clamp(18px, 1.55vw, 28px);
  line-height: 1.2;
  font-weight: 900;
  color: #47639b;
}
.slot-2 .augment-name { color: #7d5d90; }

.augment-level {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 64.6%;
  margin: 0;
  color: #d87a9c;
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 900;
}
.slot-2 .augment-level { color: #df7b9b; }

.augment-desc {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 71.4%;
  display: block;
  min-height: 16%;
  color: #536892;
  font-size: clamp(11px, .95vw, 16px);
  line-height: 1.5;
  font-weight: 800;
}

.augment-pick {
  position: absolute;
  left: 23%;
  right: 23%;
  bottom: 6.6%;
  display: grid;
  place-items: center;
  height: 10.8%;
  color: rgba(255,255,255,.96);
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 1000;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(100,110,150,.18);
}
.slot-1 .augment-pick, .slot-3 .augment-pick { color: #ffffff; }
.slot-2 .augment-pick { color: #fffafc; }
.augment-card.selected .augment-pick { text-shadow: 0 0 8px rgba(255,255,255,.66); }

.upgrade-confirm {
  position: absolute;
  z-index: 3;
  left: 33.7%;
  top: 81.9%;
  width: 32.8%;
  height: 10.2%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 2px 3px rgba(71,96,163,.28);
  cursor: pointer;
}
.upgrade-confirm:disabled {
  opacity: .48;
  cursor: default;
}
.upgrade-confirm:not(:disabled):hover {
  transform: translateY(-1px) scale(1.01);
}

@media (max-width: 720px) {
  .upgrade-box {
    width: min(100vw - 12px, 980px);
  }
  .augment-name { font-size: clamp(12px, 2.6vw, 18px); }
  .augment-level { font-size: clamp(10px, 1.8vw, 13px); }
  .augment-desc { font-size: clamp(8px, 1.55vw, 11px); line-height: 1.38; }
  .augment-pick { font-size: clamp(8px, 1.35vw, 10px); }
  .upgrade-confirm { font-size: clamp(16px, 3vw, 22px); }
}

/* === v11 ability selection polish: layout + selected states + animation === */
.upgrade-cards {
  top: 27.2%;
  bottom: 24.0%;
  gap: 4.15%;
}

.augment-card {
  animation: abilityCardEnter .38s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--card-delay, 0ms);
  transform-origin: 50% 74%;
}

.augment-icon-wrap {
  top: 5.2%;
  width: 45.5%;
}

.augment-name {
  left: 9%;
  right: 9%;
  top: 49.0%;
  min-height: 11.6%;
  font-size: clamp(17px, 1.48vw, 27px);
  line-height: 1.16;
  text-shadow: 0 2px 0 rgba(255,255,255,.88);
}

.augment-level {
  left: 15%;
  right: 15%;
  top: 61.0%;
  font-size: clamp(12px, 1vw, 17px);
  letter-spacing: .02em;
}

.augment-desc {
  left: 10.5%;
  right: 10.5%;
  top: 67.0%;
  min-height: 15.5%;
  font-size: clamp(10px, .9vw, 15px);
  line-height: 1.42;
  color: #4e628c;
  text-shadow: 0 1px 0 rgba(255,255,255,.86);
}

.augment-pick {
  left: 20%;
  right: 20%;
  bottom: 4.9%;
  height: 10.2%;
  font-size: clamp(11px, .86vw, 14px);
  transition: transform .14s ease, text-shadow .14s ease, opacity .14s ease;
}

.augment-select-mark {
  position: absolute;
  z-index: 8;
  top: 1.5%;
  right: 3.5%;
  width: clamp(28px, 2.8vw, 42px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff9fbd, #ec719c);
  border: 3px solid rgba(255,255,255,.98);
  box-shadow: 0 5px 12px rgba(164,98,135,.24);
  color: white;
  font-weight: 1000;
  font-size: clamp(16px, 1.6vw, 24px);
  opacity: 0;
  transform: scale(.35) rotate(-14deg);
  pointer-events: none;
}

.augment-card.selected .augment-select-mark {
  opacity: 1;
  animation: abilityCheckPop .34s cubic-bezier(.18,.9,.28,1.4) both;
}

.augment-card.selected {
  z-index: 5;
  transform: translateY(-8px) scale(1.045);
  filter: drop-shadow(0 15px 18px rgba(109, 134, 191, .20));
}

.augment-card.selected .augment-hit-glow {
  inset: -1.5%;
  border-radius: 27px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.28), transparent 42%),
    rgba(255,255,255,.055);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.96),
    0 0 0 9px rgba(246, 170, 205, .78),
    0 0 28px rgba(251, 177, 210, .42);
  animation: abilitySelectedGlow 1.25s ease-in-out infinite alternate;
}

.augment-card.selected .augment-icon-image {
  animation: abilityIconBounce .72s cubic-bezier(.2,.8,.2,1) both;
  filter: drop-shadow(0 7px 10px rgba(118,137,188,.22));
}

.augment-card.selected .augment-pick {
  transform: scale(1.04);
  text-shadow: 0 0 10px rgba(255,255,255,.95), 0 1px 2px rgba(70,83,140,.25);
}

.upgrade-cards.has-selection .augment-card.unselected {
  opacity: .50;
  filter: saturate(.55) brightness(.96);
  transform: scale(.965);
}

.upgrade-cards.has-selection .augment-card.unselected .augment-icon-image {
  filter: saturate(.58) contrast(.9);
}

.upgrade-cards.has-selection .augment-card.unselected .augment-pick {
  opacity: .55;
}

.upgrade-cards.has-selection .augment-card.unselected:hover {
  opacity: .78;
  filter: saturate(.82) brightness(1);
  transform: translateY(-2px) scale(.985);
}

.upgrade-cards.confirming .augment-card.unselected {
  opacity: .24;
  filter: saturate(.28) brightness(.93);
  transform: scale(.94);
}

.augment-card.confirmed {
  animation: abilityConfirmBurst .56s cubic-bezier(.18,.9,.28,1.22) both;
}

.augment-card.confirmed .augment-hit-glow {
  box-shadow:
    0 0 0 5px rgba(255,255,255,.98),
    0 0 0 11px rgba(255, 197, 93, .85),
    0 0 42px rgba(255, 217, 111, .75);
}

.upgrade-confirm {
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}

.upgrade-confirm.ready {
  animation: confirmButtonPulse 1.15s ease-in-out infinite alternate;
  filter: drop-shadow(0 7px 8px rgba(70, 100, 167, .24));
}

.upgrade-confirm.confirmed {
  animation: confirmButtonPress .42s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes abilityCardEnter {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes abilityCheckPop {
  0% { opacity: 0; transform: scale(.35) rotate(-14deg); }
  70% { opacity: 1; transform: scale(1.14) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes abilitySelectedGlow {
  from { filter: brightness(.98); }
  to { filter: brightness(1.06); }
}

@keyframes abilityIconBounce {
  0% { transform: scale(.9) rotate(-3deg); }
  46% { transform: scale(1.08) rotate(2deg); }
  72% { transform: scale(.985) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes abilityConfirmBurst {
  0% { transform: translateY(-8px) scale(1.045); }
  45% { transform: translateY(-10px) scale(1.075); }
  100% { transform: translateY(-8px) scale(1.04); }
}

@keyframes confirmButtonPulse {
  from { transform: scale(1); }
  to { transform: scale(1.025); }
}

@keyframes confirmButtonPress {
  0% { transform: scale(1); }
  50% { transform: scale(.96); }
  100% { transform: scale(1.02); }
}

@media (max-width: 720px) {
  .augment-icon-wrap { top: 5.5%; width: 45%; }
  .augment-name { top: 49%; font-size: clamp(11px, 2.45vw, 17px); }
  .augment-level { top: 61.2%; font-size: clamp(9px, 1.7vw, 12px); }
  .augment-desc { top: 67%; font-size: clamp(7px, 1.45vw, 10.5px); line-height: 1.34; }
  .augment-pick { bottom: 5%; font-size: clamp(7px, 1.25vw, 9.5px); }
  .augment-select-mark { width: clamp(23px, 5.4vw, 34px); font-size: clamp(13px, 3.3vw, 20px); }
}

/* Small final tuning after visual verification */
.slot-3 .augment-name { font-size: clamp(15px, 1.30vw, 23px); }
.upgrade-cards.has-selection .augment-card.unselected { opacity: .62; filter: saturate(.68) brightness(.98); }
.upgrade-cards.has-selection .augment-card.unselected .augment-icon-image { filter: saturate(.70) contrast(.94); }


/* === v14 title logo + one-screen fit + scenic upgrade background === */
.app-shell {
  width: min(100% - 24px, 1380px);
  margin: 0 auto;
  padding: 12px 0 12px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.title-logo-image {
  display: block;
  width: min(360px, 34vw);
  min-width: 180px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(117,143,183,.18));
}
.loading-logo-image {
  display: block;
  width: min(500px, 52vw);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(117,143,183,.22));
}
.loading-logo-row { display:none; }
.footer { display:none; }
@media (min-width: 981px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 14px;
  }
  .game-column { gap: 10px; }
  .hud-item { padding: 10px 12px; }
  .keybind-panel, .build-panel, .ranking-panel { padding-top: 12px; }
  .build-panel { gap: 12px; }
  .ranking-panel { padding: 14px; }
  .app-shell { min-height: 100dvh; }
}

.upgrade-overlay {
  padding: 10px;
  background: rgba(220, 233, 250, .72);
  backdrop-filter: blur(8px);
}
.upgrade-box {
  position: relative;
  width: min(calc(100vw - 32px), calc((100dvh - 30px) * 4 / 3), 1160px);
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.12)),
    url('./assets/backgrounds/ability-select-bg.png?v=62') center / cover no-repeat;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 18px 48px rgba(96,123,173,.24);
}
.upgrade-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  pointer-events: none;
}
.upgrade-heading {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 4.2%;
  transform: translateX(-50%);
  width: min(74%, 760px);
  text-align: center;
  padding: 2.3% 5% 2.4%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(253,193,216,.98), rgba(241,150,190,.96));
  border: 4px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 20px rgba(183,112,149,.22);
  color: #fff;
}
.upgrade-heading h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 54px);
  line-height: 1.1;
  font-weight: 1000;
  letter-spacing: .02em;
}
.upgrade-kicker {
  margin: 0 0 .35em;
  font-size: clamp(10px, .85vw, 14px);
  letter-spacing: .18em;
  font-weight: 900;
  opacity: .96;
}
.upgrade-subtitle {
  margin: .45em 0 0;
  color: #4c6fba;
  background: rgba(255,255,255,.88);
  display: inline-block;
  padding: .3em .9em;
  border-radius: 999px;
  font-size: clamp(13px, 1.05vw, 22px);
  font-weight: 900;
}
.upgrade-cards {
  position: absolute;
  z-index: 2;
  left: 7.2%;
  right: 7.2%;
  top: 24.8%;
  bottom: 21.4%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5%;
}
.augment-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,251,.95));
  box-shadow: 0 14px 30px rgba(112,137,182,.16);
  backdrop-filter: blur(5px);
  overflow: hidden;
  color: #536892;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}
.augment-card.slot-1,
.augment-card.slot-3 { background: linear-gradient(180deg, rgba(242,248,255,.96), rgba(252,254,255,.95)); }
.augment-card.slot-2 { background: linear-gradient(180deg, rgba(255,241,248,.97), rgba(255,252,253,.95)); }
.augment-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 17%, rgba(255,255,255,.82), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 34%);
  pointer-events: none;
}
.augment-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 18px 36px rgba(112,137,182,.22);
}
.upgrade-cards.has-selection .augment-card:not(.selected) {
  opacity: .76;
  filter: saturate(.78);
  transform: scale(.985);
}
.augment-card.selected {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 22px 46px rgba(248, 151, 192, .26);
}
.augment-hit-glow {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;
  transition: box-shadow .18s ease, background .18s ease;
}
.augment-card.selected .augment-hit-glow {
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.92), 0 0 0 5px rgba(246,190,215,.72);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(252,211,230,.16));
}
.augment-card.selected::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffb8d3, #ef84b0);
  color: #fff;
  font-size: 21px;
  font-weight: 1000;
  box-shadow: 0 6px 14px rgba(239,132,176,.28);
  animation: cardPop .24s ease;
}
@keyframes cardPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.augment-icon-wrap {
  position: absolute;
  left: 50%;
  top: 7.5%;
  transform: translateX(-50%);
  width: 46%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  z-index: 2;
}
.augment-icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(112,134,180,.18));
  transition: transform .18s ease;
}
.augment-card.selected .augment-icon-image {
  animation: iconBounce .42s ease;
}
@keyframes iconBounce {
  0% { transform: scale(.9) translateY(4px); }
  45% { transform: scale(1.08) translateY(-5px); }
  100% { transform: scale(1) translateY(0); }
}
.augment-name {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 48.5%;
  display: grid;
  place-items: center;
  min-height: 11%;
  font-size: clamp(18px, 1.55vw, 30px);
  line-height: 1.2;
  font-weight: 1000;
  color: #4969a8;
  text-align: center;
}
.slot-2 .augment-name { color: #7b5c98; }
.augment-level {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 61.5%;
  margin: 0;
  color: #e17e9e;
  font-size: clamp(13px, 1.02vw, 18px);
  font-weight: 1000;
  letter-spacing: .03em;
}
.augment-desc {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 69%;
  min-height: 16%;
  color: #5c7098;
  font-size: clamp(12px, .94vw, 16px);
  line-height: 1.48;
  font-weight: 900;
  text-align: center;
}
.augment-pick {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6.4%;
  display: grid;
  place-items: center;
  min-height: 11%;
  padding: 0 .8em;
  border-radius: 999px;
  background: linear-gradient(180deg, #8ab8ff, #5f8fe6);
  color: rgba(255,255,255,.98);
  font-size: clamp(12px, .92vw, 15px);
  font-weight: 1000;
  letter-spacing: .02em;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.36), 0 6px 14px rgba(95,143,230,.2);
}
.slot-2 .augment-pick { background: linear-gradient(180deg, #ffadc8, #ef84b0); }

.upgrade-confirm {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 4.2%;
  transform: translateX(-50%);
  width: min(40%, 420px);
  height: 10.4%;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: linear-gradient(180deg, #8ab8ff, #5f8fe6);
  color: #fff;
  font-size: clamp(18px, 1.5vw, 31px);
  font-weight: 1000;
  letter-spacing: .05em;
  box-shadow: 0 12px 26px rgba(95,143,230,.24), inset 0 2px 0 rgba(255,255,255,.38);
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.upgrade-confirm:disabled {
  opacity: .5;
  cursor: default;
  box-shadow: 0 8px 16px rgba(95,143,230,.14);
}
.upgrade-confirm:not(:disabled) {
  animation: confirmPulse 1.7s ease-in-out infinite;
}
.upgrade-confirm:not(:disabled):hover { transform: translateX(-50%) translateY(-2px); }
@keyframes confirmPulse {
  0%, 100% { box-shadow: 0 12px 26px rgba(95,143,230,.24), inset 0 2px 0 rgba(255,255,255,.38); }
  50% { box-shadow: 0 16px 32px rgba(95,143,230,.30), 0 0 0 6px rgba(183,216,255,.22), inset 0 2px 0 rgba(255,255,255,.40); }
}
@media (max-width: 980px) {
  .title-logo-image { width: min(300px, 48vw); }
  .upgrade-box { width: min(calc(100vw - 18px), calc((100dvh - 18px) * 4 / 3), 1000px); }
}
@media (max-width: 720px) {
  .upgrade-heading {
    width: 88%;
    top: 3.3%;
    padding: 2.6% 4.6% 3.1%;
  }
  .upgrade-heading h2 { font-size: clamp(16px, 4vw, 28px); }
  .upgrade-kicker { font-size: clamp(8px, 1.4vw, 10px); }
  .upgrade-subtitle { font-size: clamp(9px, 1.5vw, 12px); }
  .upgrade-cards {
    left: 5.2%;
    right: 5.2%;
    top: 22%;
    bottom: 18%;
    gap: 2.4%;
  }
  .augment-name { top: 47.8%; font-size: clamp(10px, 1.95vw, 14px); }
  .augment-level { top: 60.8%; font-size: clamp(8px, 1.4vw, 10px); }
  .augment-desc { top: 68.4%; left: 9%; right: 9%; font-size: clamp(7px, 1.1vw, 9px); line-height: 1.35; }
  .augment-pick { left: 14%; right: 14%; bottom: 6%; font-size: clamp(7px, 1.1vw, 9px); }
  .upgrade-confirm { width: 54%; font-size: clamp(12px, 2vw, 16px); bottom: 4.1%; }
}


@media (min-width: 981px) {
  body.app-ready { overflow: hidden; }
  .app-shell { height: 100dvh; display: flex; flex-direction: column; }
  #game-screen.game-layout { flex: 1; min-height: 0; }
  .game-column { min-height: 0; }
  .game-frame { min-height: 0; }
  .ranking-panel { height: 100%; max-height: none; }
  .keybind-panel { padding: 12px 14px; }
  .build-panel { padding: 12px 14px; }
  .hud-item strong { font-size: 20px; }
  .hud-item span { font-size: 10px; }
}


/* === v16 in-game pop HUD === */
.topbar {
  justify-content: center;
}

.hud-strip { display: none; }

.in-game-ui {
  position: absolute;
  z-index: 6;
  inset: 14px 14px auto;
  pointer-events: none;
}
.in-game-ui-row {
  display: grid;
  gap: 10px;
}
.game-user-badge {
  width: fit-content;
  max-width: min(100%, 420px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  color: #5f6f92;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.92));
  box-shadow: 0 10px 22px rgba(95,122,171,.16);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.game-user-badge #current-username {
  font-weight: 1000;
  color: #4f679a;
  font-size: 14px;
}
.user-badge-label {
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #bdebdc, #8ad7c7);
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.game-user-badge .text-button {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(139, 171, 223, .12);
  font-size: 12px;
  font-weight: 900;
}
.scoreboard-pop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  pointer-events: none;
}
.game-stat {
  min-width: 0;
  padding: 11px 14px 12px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,252,.92));
  box-shadow: 0 12px 24px rgba(113,136,179,.15);
  backdrop-filter: blur(7px);
}
.game-stat span {
  display: block;
  margin-bottom: 4px;
  color: #6d82aa;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
}
.game-stat strong {
  display: block;
  color: #50689d;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.1;
}
.game-stat-score {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(242,248,255,.94));
}
.game-stat-cup {
  background: linear-gradient(180deg, rgba(255,250,242,.97), rgba(255,244,225,.94));
}
.game-stat-next {
  background: linear-gradient(180deg, rgba(248,244,255,.97), rgba(240,236,255,.94));
}
.game-stat-best {
  background: linear-gradient(180deg, rgba(244,255,251,.97), rgba(233,251,244,.94));
}
.game-stat-score strong { color: #5b75ae; }
.game-stat-cup strong { color: #bf7b52; }
.game-stat-next strong { color: #7e69ba; }
.game-stat-best strong { color: #58a080; }

@media (max-width: 980px) {
  .topbar { justify-content: flex-start; }
  .in-game-ui { inset: 10px 10px auto; }
  .scoreboard-pop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .game-user-badge {
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 10px;
  }
  .game-user-badge #current-username {
    font-size: 13px;
  }
  .game-stat {
    padding: 9px 10px 10px;
    border-radius: 16px;
  }
  .game-stat span {
    font-size: 9px;
  }
  .game-stat strong {
    font-size: 18px;
  }
}


/* === v17 rabbit & tea motif HUD frame === */
.game-user-badge {
  position: relative;
  overflow: visible;
  padding: 12px 16px 12px 18px;
  border: 2px solid rgba(255,255,255,.97);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.82), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,252,254,.98), rgba(241,247,255,.94));
  box-shadow: 0 12px 24px rgba(95,122,171,.16);
}
.game-user-badge::before,
.game-user-badge::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 18px;
  height: 28px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 6px 10px rgba(129, 153, 194, .10);
  z-index: -1;
}
.game-user-badge::before {
  left: 20px;
  transform: rotate(-10deg);
}
.game-user-badge::after {
  left: 40px;
  transform: rotate(10deg);
}
.game-user-badge .status-dot {
  background: #8edfd0;
  box-shadow: 0 0 0 4px rgba(142,223,208,.20), 0 0 14px rgba(142,223,208,.60);
}
.user-badge-label {
  background: linear-gradient(180deg, #ffbfd6, #f29abe);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
}
.game-user-badge .text-button {
  border: 1px solid rgba(216,229,250,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,248,255,.92));
  color: #7287ad;
}

.scoreboard-pop {
  gap: 12px;
}
.game-stat {
  position: relative;
  overflow: visible;
  padding: 16px 14px 13px;
  border: 2px solid rgba(255,255,255,.97);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.74), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,255,.94));
  box-shadow: 0 12px 26px rgba(113,136,179,.14);
}
.game-stat::before,
.game-stat::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 16px;
  height: 24px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, #fff, #eff5ff);
  border: 2px solid rgba(255,255,255,.96);
  box-shadow: 0 4px 10px rgba(120, 143, 184, .10);
  z-index: -1;
}
.game-stat::before { left: 22px; transform: rotate(-12deg); }
.game-stat::after { left: 40px; transform: rotate(12deg); }
.game-stat span {
  padding-left: 2px;
}
.game-stat strong {
  position: relative;
}
.game-stat strong::after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 6px 12px rgba(129,153,194,.12);
  font-size: 18px;
}
.game-stat-score strong::after { content: "🐇"; }
.game-stat-cup strong::after { content: "☕"; }
.game-stat-next strong::after { content: "🎁"; }
.game-stat-best strong::after { content: "👑"; }
.game-stat-score {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.72), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(242,248,255,.98), rgba(232,242,255,.94));
}
.game-stat-cup {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.72), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,250,242,.98), rgba(255,240,223,.95));
}
.game-stat-next {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.72), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(248,244,255,.98), rgba(240,236,255,.95));
}
.game-stat-best {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.72), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(244,255,251,.98), rgba(232,249,241,.95));
}
.game-stat .stat-ribbon,
.game-stat::marker { display:none; }
.game-stat-score { border-color: rgba(194, 220, 255, .95); }
.game-stat-cup { border-color: rgba(255, 225, 186, .95); }
.game-stat-next { border-color: rgba(224, 205, 255, .95); }
.game-stat-best { border-color: rgba(191, 237, 211, .95); }
.game-stat-score span::after,
.game-stat-cup span::after,
.game-stat-next span::after,
.game-stat-best span::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  margin-top: 6px;
  border-bottom: 2px dotted rgba(144, 170, 211, .45);
}
.game-stat-cup span::after { border-bottom-color: rgba(212, 159, 109, .44); }
.game-stat-next span::after { border-bottom-color: rgba(158, 141, 214, .44); }
.game-stat-best span::after { border-bottom-color: rgba(103, 178, 145, .44); }

@media (max-width: 980px) {
  .game-user-badge::before,
  .game-user-badge::after,
  .game-stat::before,
  .game-stat::after {
    transform: scale(.9);
  }
  .game-stat {
    padding: 12px 10px 10px;
    border-radius: 18px;
  }
  .game-stat strong::after {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}


/* === v18 compact layout / start key config / in-game build === */
body {
  overflow: hidden;
}
.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
.footer { display: none; }
.game-layout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
}
.game-column { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ranking-panel {
  width: 100%;
  height: auto !important;
  max-height: 540px !important;
  min-height: 0;
  padding: 14px 16px;
  overflow: hidden;
  align-self: start;
}
.ranking-header h2 { margin-bottom: 2px; }
.ranking-status { margin: 8px 0 10px; }
.ranking-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ranking-item { padding: 9px 10px; }
.mobile-gesture-help { margin-top: 0; }

.start-keybind-box {
  margin: 10px auto 0;
  width: min(100%, 540px);
  padding: 12px 14px;
  border-radius: 20px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.93), rgba(245,249,255,.92));
  border: 1px solid rgba(196, 215, 245, .95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 20px rgba(132, 155, 194, .10);
}
.start-keybind-box .keybind-heading { align-items: center; margin-bottom: 6px; }
.start-keybind-box h3 { margin: 2px 0 0; font-size: 18px; color: #5c6f97; }
.compact-keybind-grid { gap: 10px; }
.start-keybind-box .keybind-action {
  background: rgba(255,255,255,.76);
  border: 1px solid #d4dff0;
  border-radius: 16px;
  padding: 10px;
}
.start-keybind-box .keybind-button { min-width: 54px; }

.in-game-ui {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.build-pop {
  width: fit-content;
  max-width: min(100%, 520px);
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,251,.92));
  border: 2px solid rgba(255,255,255,.97);
  box-shadow: 0 10px 20px rgba(110, 132, 176, .12);
  pointer-events: none;
}
.build-pop-title {
  margin-bottom: 6px;
  color: #7a6796;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .1em;
}
.build-list-ingame { min-height: 24px; gap: 6px; }
.build-list-ingame .muted { color: #8e97af; font-size: 12px; }
.build-chip {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.95));
  border: 1px solid #d5def0;
  box-shadow: 0 4px 8px rgba(120, 143, 184, .08);
}

/* remove old below-game panels if still present */
.keybind-panel, .build-panel { display: none !important; }

@media (max-width: 1200px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 240px; }
}
@media (max-width: 980px) {
  body { overflow: auto; }
  .app-shell { height: auto; overflow: visible; }
  .game-layout { grid-template-columns: 1fr; }
  .ranking-panel { max-height: none !important; }
  .start-keybind-box { width: 100%; padding: 10px 12px; }
  .start-keybind-box h3 { font-size: 16px; }
  .compact-keybind-grid { grid-template-columns: 1fr; }
  .build-pop { max-width: 100%; }
}


/* === v19 compact icon HUD + game-like start screen === */
.loading-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.loading-stage-badge {
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,247,255,.88));
  border: 1px solid rgba(204,219,244,.95);
  color: #7d84ad;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
  white-space: nowrap;
}
.loading-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.loading-guide-card { position: relative; }
.loading-guide-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.loading-guide-card.accent-blue { background: linear-gradient(180deg, rgba(243,248,255,.98), rgba(234,243,255,.92)); }
.loading-guide-card.accent-pink { background: linear-gradient(180deg, rgba(255,247,251,.98), rgba(255,239,248,.92)); }
.loading-guide-card.accent-gold { background: linear-gradient(180deg, rgba(255,252,244,.98), rgba(255,246,225,.93)); }
.loading-highlight-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.loading-highlight-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,249,255,.9));
  border: 1px solid rgba(209,221,244,.95);
  color: #7082a5;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(126, 151, 196, .10);
}
.loading-tip { margin-top: 12px; }

.overlay-start {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(232,242,255,.20), rgba(255,238,247,.34)),
    url('./assets/ui/title-key-art.png?v=62') center / cover no-repeat;
}
.overlay-start .overlay-inner {
  width: min(640px, 96%);
  padding: 20px 24px 22px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.66), rgba(255,255,255,0) 38%),
    rgba(255, 252, 250, .93);
  border-color: rgba(255, 232, 172, .92);
  box-shadow: 0 24px 46px rgba(85, 113, 158, .24);
}
.overlay-start .overlay-inner::before {
  content: "";
  display: block;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  inset: 4px;
  border-radius: 24px;
  border: 1px solid rgba(255, 217, 145, .45);
  pointer-events: none;
}
.start-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 10px;
}
.start-feature-card {
  padding: 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(216, 226, 244, .95);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.90));
  box-shadow: 0 10px 18px rgba(127, 145, 183, .10);
}
.start-feature-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  margin-bottom: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #9dbdf5, #83a7ea);
}
.feature-cup strong { background: linear-gradient(180deg, #ffc4db, #f39abd); }
.feature-upgrade strong { background: linear-gradient(180deg, #d7c2ff, #b59cef); }
.start-feature-card span {
  display: block;
  color: #6d7f9e;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}
.control-help-start { margin-bottom: 8px; }
.start-action-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.start-action-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,248,255,.92));
  border: 1px solid rgba(214,225,243,.95);
  color: #7b89ad;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .06em;
}
.start-button-game {
  min-width: 220px;
  padding: 13px 24px;
  font-size: 17px;
  box-shadow: 0 12px 24px rgba(245, 194, 89, .22);
  animation: startButtonPulse 2s ease-in-out infinite;
}
.start-press-hint {
  margin-top: 10px;
  color: #9a7fa0;
  font-size: 12px;
  font-weight: 900;
}
@keyframes startButtonPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px) scale(1.02); }
}

.in-game-ui-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}
.game-user-badge {
  max-width: 255px;
  padding: 8px 12px 8px 14px;
  gap: 6px;
}
.game-user-badge::before, .game-user-badge::after {
  top: -9px;
  width: 14px;
  height: 22px;
}
.user-badge-label { font-size: 9px; padding: 3px 7px; }
.game-user-badge #current-username { font-size: 13px; }
.game-user-badge .text-button { font-size: 11px; padding: 3px 7px; }
.scoreboard-pop { gap: 8px; }
.game-stat {
  padding: 9px 12px 10px;
  border-radius: 18px;
}
.game-stat::before, .game-stat::after {
  top: -8px;
  width: 13px;
  height: 20px;
}
.game-stat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.game-stat-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 30px;
  filter: drop-shadow(0 3px 6px rgba(126, 146, 188, .16));
}
.game-stat span {
  margin: 0;
  font-size: 9px;
  line-height: 1.1;
}
.game-stat span::after { margin-top: 5px; }
.game-stat strong {
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.05;
  padding-right: 0;
}
.game-stat strong::after { display: none; }
.build-pop {
  max-width: min(100%, 480px);
  padding: 8px 11px;
  border-radius: 16px;
}
.build-pop-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.build-pop-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 24px;
}
.build-list-ingame {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.build-chip {
  padding: 5px 9px;
  font-size: 12px;
}

@media (max-width: 980px) {
  .loading-guide-head {
    flex-direction: column;
    align-items: stretch;
  }
  .loading-guide-grid,
  .start-feature-grid {
    grid-template-columns: 1fr;
  }
  .in-game-ui-row {
    grid-template-columns: 1fr;
  }
  .game-user-badge {
    max-width: 100%;
  }
}


/* === v23 loading layout fix + tea cup loading icon === */
.loading-scene {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.loading-brand {
  position: relative;
  z-index: 2;
  padding: 10px 18px 12px;
}
.loading-logo-image {
  display: block;
  width: min(340px, 34vw);
  max-width: 100%;
  height: auto;
}
.loading-guide {
  left: clamp(24px, 4vw, 54px);
  top: clamp(112px, 18vh, 170px);
  transform: none;
  width: min(780px, 62vw);
  max-width: calc(100vw - 120px);
  padding: clamp(18px, 2.2vw, 28px);
}
.loading-guide h2 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 42px);
  line-height: 1.25;
  letter-spacing: .02em;
}
.loading-guide-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
}
.loading-guide-card {
  align-items: start;
  gap: 8px 10px;
  min-height: 150px;
  padding: 14px 14px 12px;
}
.loading-guide-card strong {
  align-self: start;
  font-size: 12px;
  line-height: 1.35;
}
.loading-guide-card span:not(.guide-device) {
  font-size: 12px;
  line-height: 1.45;
}
.loading-highlight-row {
  justify-content: flex-start;
}
.loading-tip {
  max-width: 52ch;
}
.loading-bottom-right {
  right: clamp(20px, 4vw, 44px);
  bottom: clamp(20px, 5vh, 40px);
  gap: 14px;
  align-items: center;
}
.loading-text-wrap {
  padding-bottom: 0;
  align-items: center;
}
.now-loading-text {
  font-size: clamp(18px, 2vw, 34px);
}
.loading-teacup {
  width: clamp(92px, 9vw, 136px);
  transform-origin: 48% 78%;
  animation: teaCupSwing 1.8s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(76,105,152,.18));
}
@keyframes teaCupSwing {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  20% { transform: translateY(-2px) rotate(5deg); }
  45% { transform: translateY(0) rotate(-4deg); }
  70% { transform: translateY(-1px) rotate(3deg); }
}
@media (max-width: 1200px) {
  .loading-guide {
    width: min(720px, 66vw);
  }
  .loading-guide-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}
@media (max-width: 980px) {
  .loading-guide {
    left: 16px;
    right: 16px;
    top: 130px;
    width: auto;
    max-width: none;
  }
  .loading-guide-grid {
    grid-template-columns: 1fr;
  }
  .loading-bottom-right {
    right: 16px;
    left: 16px;
    justify-content: flex-end;
  }
}
@media (max-width: 760px) {
  .loading-logo-image { width: min(250px, 60vw); }
  .loading-guide {
    top: 108px;
    padding: 16px;
  }
  .loading-guide h2 { font-size: 18px; }
  .loading-highlight-chip { font-size: 11px; }
  .loading-bottom-right { bottom: 44px; gap: 10px; }
  .loading-teacup { width: 82px; }
  .boot-status {
    max-width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
    bottom: 10px;
  }
}


/* === v24 top HUD simplification + ranking sidebar restore === */
.game-layout {
  grid-template-columns: minmax(0, 1fr) 280px !important;
  align-items: start;
}
.game-column {
  min-width: 0;
}
.ranking-panel {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px) !important;
  overflow: auto;
}
.in-game-ui {
  inset: 12px 14px auto;
  gap: 8px;
}
.in-game-ui-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
/* user badge remains compact */
.game-user-badge::before,
.game-user-badge::after {
  display: none !important;
}
.game-user-badge {
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(95,122,171,.14);
}
/* remove boxed stat cards and bunny-ear frames */
.scoreboard-pop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 8px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.82);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,251,255,.72));
  box-shadow: 0 10px 24px rgba(109,131,173,.14);
  backdrop-filter: blur(8px);
}
.game-stat,
.game-stat-score,
.game-stat-cup,
.game-stat-next,
.game-stat-best {
  min-width: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
.game-stat::before,
.game-stat::after,
.game-stat strong::after,
.game-stat span::after {
  display: none !important;
  content: none !important;
}
.game-stat + .game-stat {
  border-right: 1px solid rgba(174, 193, 224, .48);
}
.game-stat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
}
.game-stat-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  filter: drop-shadow(0 4px 8px rgba(129,153,194,.16));
}
.game-stat-head span {
  display: none !important;
}
.game-stat strong {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  margin: 0;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1;
  letter-spacing: .01em;
}
.game-stat strong::before {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 900;
  opacity: .82;
}
.game-stat-score strong::before { content: "SCORE"; color: #6d88bf; }
.game-stat-cup strong::before { content: "TEA CUP"; color: #c18c59; }
.game-stat-next strong::before { content: "NEXT ITEM"; color: #8972cb; }
.game-stat-best strong::before { content: "BEST"; color: #5ea485; }
.build-pop {
  max-width: min(100%, 300px);
  background: rgba(255,255,255,.88);
}
/* remove start overlay control help pop */
.control-help-start {
  display: none !important;
}
/* keep sidebar ranking to the right on PC */
@media (max-width: 1100px) {
  .game-layout { grid-template-columns: 1fr !important; }
  .ranking-panel { position: static; max-height: none !important; }
}
@media (max-width: 900px) {
  .in-game-ui-row { grid-template-columns: 1fr; align-items: start; }
  .scoreboard-pop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 0; padding: 10px; }
  .game-stat + .game-stat { border-right: 0; }
  .game-stat:nth-child(2n) { border-right: 0; }
  .game-stat:nth-child(n+3) { border-top: 1px solid rgba(174,193,224,.36); padding-top: 10px; }
  .game-stat-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .game-stat strong { font-size: 18px; }
}


/* === v25 ability select: clean one-screen 16:9 layout === */
.upgrade-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  padding: 0;
  overflow: hidden;
  background: rgba(222, 234, 250, .36);
  backdrop-filter: blur(4px);
}

.upgrade-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,247,251,.28)),
    url('./assets/backgrounds/ability-select-bg.png?v=62') center 48% / cover no-repeat;
}

.upgrade-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246,250,255,.26) 0%, rgba(255,255,255,.10) 25%, rgba(255,246,251,.18) 100%),
    radial-gradient(ellipse at center, rgba(255,255,255,.10), rgba(222,236,255,.12));
}

.upgrade-heading {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 3.2%;
  transform: translateX(-50%);
  width: min(68%, 650px);
  padding: 9px 24px 10px;
  text-align: center;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,.94);
  background: linear-gradient(180deg, rgba(250,177,209,.96), rgba(241,143,190,.94));
  box-shadow: 0 10px 24px rgba(166,103,145,.18);
  color: #fff;
}
.upgrade-kicker {
  margin: 0 0 2px;
  font-size: clamp(8px, .70vw, 11px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .18em;
  opacity: .88;
}
.upgrade-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2.15vw, 34px);
  line-height: 1.08;
  font-weight: 1000;
  letter-spacing: .03em;
  text-shadow: 0 2px 0 rgba(170,93,137,.12);
}
.upgrade-subtitle {
  display: block;
  margin: 4px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.94);
  font-size: clamp(10px, .85vw, 14px);
  line-height: 1.2;
  font-weight: 900;
}

.upgrade-cards {
  position: absolute;
  z-index: 2;
  left: 6.0%;
  right: 6.0%;
  top: 21.5%;
  bottom: 15.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5%;
  width: auto;
  max-height: none;
  padding: 0;
  overflow: visible;
}

.augment-card,
.augment-card.slot-1,
.augment-card.slot-2,
.augment-card.slot-3,
.augment-card.bronze,
.augment-card.silver,
.augment-card.gold {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 14px 14px 12px;
  overflow: hidden;
  appearance: none;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.94);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.91));
  box-shadow: 0 11px 25px rgba(92,119,163,.16);
  color: #536892;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(7px);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, filter .16s ease, border-color .16s ease;
}
.augment-card.slot-1 { background: linear-gradient(180deg, rgba(242,249,255,.96), rgba(255,255,255,.92)); }
.augment-card.slot-2 { background: linear-gradient(180deg, rgba(255,242,249,.97), rgba(255,255,255,.92)); }
.augment-card.slot-3 { background: linear-gradient(180deg, rgba(245,249,255,.96), rgba(255,255,255,.92)); }

.augment-card::before,
.augment-card::after {
  content: none !important;
  display: none !important;
}
.augment-hit-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(194,213,240,.45);
  background: transparent;
}

.augment-icon-wrap {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 2;
  width: clamp(68px, 8.1vw, 108px);
  height: clamp(68px, 8.1vw, 108px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin: 0 auto 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.augment-icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(111,135,181,.16));
  transition: transform .16s ease;
}

.augment-name {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: 2;
  width: 100%;
  min-height: 2.35em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #48639c;
  font-size: clamp(16px, 1.55vw, 24px);
  line-height: 1.15;
  font-weight: 1000;
  text-align: center;
}
.slot-2 .augment-name { color: #76578c; }
.slot-3 .augment-name { font-size: clamp(15px, 1.40vw, 22px); }

.augment-level {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -1px 0 1px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(241,151,192,.11);
  color: #d9779d;
  font-size: clamp(10px, .78vw, 12px);
  line-height: 1;
  font-weight: 1000;
}

.augment-desc {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: 2;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 2px 0 0;
  padding: 8px 6px 0;
  border-top: 1px dashed rgba(150,171,208,.42);
  color: #5a6e96;
  font-size: clamp(10px, .88vw, 13px);
  line-height: 1.42;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
}

/* full card is the selector; remove redundant per-card button */
.augment-pick {
  display: none !important;
}

.augment-select-mark {
  position: absolute;
  z-index: 5;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #ffb7d3, #ed7eab);
  box-shadow: 0 6px 13px rgba(226,114,163,.20);
  font-size: 16px;
  font-weight: 1000;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .15s ease, transform .15s ease;
}
.augment-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,1);
  box-shadow: 0 14px 28px rgba(92,119,163,.20);
  filter: none;
}
.augment-card.selected {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(246,169,204,.98);
  box-shadow: 0 0 0 4px rgba(255,255,255,.82), 0 0 0 7px rgba(245,178,209,.48), 0 17px 32px rgba(137,96,139,.18);
  filter: none;
}
.augment-card.selected .augment-select-mark {
  opacity: 1;
  transform: scale(1);
}
.augment-card.selected .augment-icon-image {
  animation: iconBounce .38s ease;
}
.upgrade-cards.has-selection .augment-card:not(.selected),
.upgrade-cards.has-selection .augment-card.unselected {
  opacity: .70;
  filter: saturate(.76) brightness(.99);
  transform: scale(.985);
}
.upgrade-cards.has-selection .augment-card:not(.selected):hover {
  opacity: .94;
  transform: translateY(-2px) scale(.995);
}

.upgrade-confirm {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 3.2%;
  transform: translateX(-50%);
  width: min(34%, 330px);
  min-width: 220px;
  height: 8.5%;
  min-height: 42px;
  max-height: 52px;
  padding: 0 24px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: linear-gradient(180deg, #8eb9ff, #5e8fe7);
  color: #fff;
  font-size: clamp(13px, 1.18vw, 18px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .04em;
  box-shadow: 0 10px 22px rgba(82,126,202,.24), inset 0 2px 0 rgba(255,255,255,.36);
  cursor: pointer;
}
.upgrade-confirm:disabled {
  opacity: .50;
  cursor: default;
  animation: none;
}
.upgrade-confirm:not(:disabled) {
  animation: confirmPulse 1.6s ease-in-out infinite;
}

/* never scroll inside ability select on normal game sizes */
.upgrade-overlay,
.upgrade-box,
.upgrade-cards {
  scrollbar-width: none;
}
.upgrade-overlay::-webkit-scrollbar,
.upgrade-box::-webkit-scrollbar,
.upgrade-cards::-webkit-scrollbar { display: none; }

@media (max-width: 760px) {
  .upgrade-heading {
    top: 2.6%;
    width: 72%;
    padding: 6px 12px 7px;
    border-radius: 18px;
  }
  .upgrade-kicker { display: none; }
  .upgrade-heading h2 { font-size: clamp(15px, 3.3vw, 22px); }
  .upgrade-subtitle { margin-top: 2px; font-size: clamp(7px, 1.7vw, 10px); }
  .upgrade-cards {
    left: 3.6%;
    right: 3.6%;
    top: 18.8%;
    bottom: 14.5%;
    gap: 1.8%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .augment-card,
  .augment-card.slot-1,
  .augment-card.slot-2,
  .augment-card.slot-3 {
    gap: 2px;
    padding: 7px 6px 6px;
    border-radius: 14px;
  }
  .augment-hit-glow { border-radius: 12px; }
  .augment-icon-wrap { width: clamp(42px, 12vw, 68px); height: clamp(42px, 12vw, 68px); }
  .augment-name,
  .slot-3 .augment-name { min-height: 2.2em; font-size: clamp(9px, 2.25vw, 13px); }
  .augment-level { padding: 2px 6px; font-size: clamp(7px, 1.45vw, 9px); }
  .augment-desc { padding: 4px 2px 0; font-size: clamp(6px, 1.3vw, 8.5px); line-height: 1.26; }
  .augment-select-mark { right: 5px; top: 5px; width: 20px; height: 20px; font-size: 11px; }
  .upgrade-confirm { min-width: 140px; width: 38%; min-height: 30px; height: 8%; padding: 0 10px; font-size: clamp(9px, 2vw, 12px); }
}


/* === v27 result screen: final score is the hero === */
.result-score-panel {
  display: grid;
  place-items: center;
  gap: 4px;
  width: min(430px, 92%);
  margin: 5px auto 10px;
  padding: 14px 18px 16px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 46%), linear-gradient(180deg, rgba(255,241,248,.98), rgba(241,248,255,.98));
  border: 2px solid rgba(255,181,211,.78);
  box-shadow: 0 14px 30px rgba(177,114,149,.17), inset 0 1px 0 rgba(255,255,255,.92);
}
.result-score-label {
  color: #c47699;
  font-size: 11px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .22em;
}
.result-score-panel strong {
  display: block;
  color: #5571a8;
  font-size: clamp(64px, 8.5vw, 104px);
  line-height: .94;
  font-weight: 1000;
  letter-spacing: -.05em;
  text-shadow: 0 4px 0 rgba(255,255,255,.9), 0 9px 20px rgba(91,117,169,.16);
}
.result-tea-value {
  color: #bb7b57;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.overlay-gameover .overlay-inner { width: min(560px, 96%); }
.overlay-gameover #start-title {
  margin: 2px 0 4px;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: .08em;
}
.overlay-gameover #start-description {
  margin: 6px auto;
  color: #6f7f9f;
  font-size: 13px;
  font-weight: 800;
  white-space: pre-line;
}
.overlay-gameover .overlay-character {
  max-height: 96px;
  margin: 1px auto 2px;
}
.overlay-gameover .overlay-logo-image { width: min(240px, 64vw); }
@media (max-width: 720px) {
  .result-score-panel { padding: 12px 14px 14px; border-radius: 20px; }
  .result-score-panel strong { font-size: clamp(54px, 16vw, 78px); }
  .result-score-label { font-size: 10px; }
  .result-tea-value { font-size: 12px; }
}


/* === v28 keyboard menu + one-screen menu/result === */
/* Start/result are full-screen game menus, not translucent popups. */
.overlay-card {
  padding: 0 !important;
  overflow: hidden !important;
  place-items: stretch !important;
  background: linear-gradient(145deg, #edf6ff 0%, #fff8fb 52%, #f7f1ff 100%) !important;
  backdrop-filter: none !important;
}
.overlay-start,
.overlay-gameover {
  background:
    radial-gradient(circle at 18% 15%, rgba(199,226,255,.55), transparent 29%),
    radial-gradient(circle at 83% 80%, rgba(255,205,229,.48), transparent 30%),
    linear-gradient(145deg, #f5fbff 0%, #fff9fb 55%, #f5f0ff 100%) !important;
}
.overlay-inner,
.overlay-start .overlay-inner,
.overlay-gameover .overlay-inner {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: clamp(12px, 2.0vh, 20px) clamp(18px, 3vw, 34px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.overlay-inner::before,
.overlay-start .overlay-inner::before { display: none !important; }

/* Menu: keep only useful information and integrate controls directly into the screen. */
.overlay-start #overlay-eyebrow { margin: 0 0 2px; font-size: 9px; }
.overlay-start .overlay-logo { margin: 0; }
.overlay-start .overlay-logo-image { width: clamp(150px, 23vw, 245px); max-height: 72px; object-fit: contain; }
.overlay-start .overlay-character { display: none !important; }
.overlay-start #start-title { margin: 0 0 3px; font-size: clamp(20px, 3.0vh, 28px); }
.overlay-start #start-description {
  margin: 0 auto 3px;
  max-width: 780px;
  font-size: clamp(10px, 1.7vh, 13px);
  line-height: 1.35;
}
.overlay-start .overlay-note {
  margin: 0 0 4px;
  font-size: clamp(9px, 1.45vh, 12px);
}
.overlay-start .start-feature-grid,
.overlay-start .start-action-badges,
.overlay-start .control-help-start { display: none !important; }
.start-keybind-box {
  width: min(900px, 96%) !important;
  margin: 4px auto 6px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.start-keybind-box .keybind-heading {
  margin: 0 0 3px !important;
  align-items: center;
}
.start-keybind-box .keybind-heading .eyebrow { margin: 0; font-size: 8px; }
.start-keybind-box h3 { margin: 0; font-size: clamp(13px, 2.0vh, 17px); }
.start-keybind-box #keybind-status { margin: 2px 0 5px; font-size: 9px; }
.compact-keybind-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.start-keybind-box .keybind-action {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 58px;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.start-keybind-box .keybind-action strong {
  flex: 0 0 100%;
  text-align: center;
  color: #61749b;
  font-size: 10px;
}
.start-keybind-box .keybind-button {
  min-width: 37px !important;
  height: 27px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 10px;
}
.menu-key-note {
  margin: 3px 0 0 !important;
  color: #7283a6;
  font-size: clamp(8px, 1.35vh, 10px) !important;
  font-weight: 800;
  text-align: center;
}
.overlay-start .start-button-game {
  min-width: 210px;
  margin-top: 2px;
  padding: 10px 24px;
  font-size: 15px;
}
.start-press-hint {
  margin: 4px 0 0 !important;
  font-size: 10px !important;
  color: #7a89aa !important;
}

/* Result screen: one page, no menu controls, score remains the visual hero. */
.overlay-gameover .start-feature-grid,
.overlay-gameover .control-help-start,
.overlay-gameover .start-action-badges,
.overlay-gameover .start-keybind-box { display: none !important; }
.overlay-gameover #overlay-eyebrow { margin: 0 0 2px; font-size: 9px; }
.overlay-gameover .overlay-logo { margin: 0; }
.overlay-gameover .overlay-logo-image { width: clamp(135px, 20vw, 210px) !important; max-height: 58px; object-fit: contain; }
.overlay-gameover .overlay-character {
  display: block !important;
  max-height: clamp(54px, 11vh, 82px) !important;
  width: auto;
  margin: 0 auto 1px !important;
}
.overlay-gameover #start-title {
  margin: 0 0 2px !important;
  font-size: clamp(17px, 2.7vh, 24px) !important;
}
.overlay-gameover .result-score-panel {
  width: min(480px, 80%);
  margin: 2px auto 5px;
  padding: 8px 14px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.overlay-gameover .result-score-panel strong {
  font-size: clamp(62px, 15vh, 102px);
}
.overlay-gameover #start-description {
  max-width: 720px;
  margin: 3px auto !important;
  font-size: clamp(10px, 1.65vh, 12px) !important;
  line-height: 1.3;
}
.overlay-gameover .overlay-note {
  margin: 2px 0 5px !important;
  font-size: 10px;
}
.overlay-gameover .start-button-game {
  min-width: 190px;
  padding: 9px 22px;
  font-size: 14px;
}
.overlay-gameover .start-press-hint { display: block !important; }


.overlay-start .result-encounter,
.overlay-start .result-newrecord { display: none !important; }

.overlay-gameover .result-scene {
  gap: clamp(10px, 2vw, 20px);
  margin: 0 auto 2px;
}
.overlay-gameover .result-encounter.hidden { display: none !important; }
.overlay-gameover .result-encounter {
  display: flex !important;
  align-self: center;
  transform: translateY(4px);
}
.overlay-gameover .result-enemy-canvas {
  width: clamp(96px, 12vw, 128px);
  height: auto;
}
.overlay-gameover .result-enemy-speech {
  font-size: clamp(11px, 1.8vh, 14px);
  padding: 7px 11px;
}
.overlay-gameover .result-newrecord {
  width: clamp(160px, 24vw, 230px);
  margin: 0 auto 4px;
}

/* Ability keyboard hints */
.augment-hotkey {
  position: absolute;
  z-index: 6;
  top: 9px;
  left: 9px;
  min-width: 48px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(184,202,232,.80);
  color: #6279a7;
  font-size: clamp(8px, .72vw, 11px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .04em;
  box-shadow: 0 4px 10px rgba(108,132,178,.10);
}
.augment-card.selected .augment-hotkey {
  background: linear-gradient(180deg, #ffbed7, #ef8cb6);
  border-color: rgba(255,255,255,.95);
  color: #fff;
}

@media (max-width: 760px) {
  .overlay-inner,
  .overlay-start .overlay-inner,
  .overlay-gameover .overlay-inner { padding: 6px 10px !important; }
  .overlay-start .overlay-logo-image { width: 132px; max-height: 46px; }
  .overlay-start #start-title { font-size: 16px; }
  .overlay-start #start-description { font-size: 8px; }
  .overlay-start .overlay-note { display: none; }
  .start-keybind-box { width: 100% !important; padding: 2px !important; }
  .start-keybind-box .keybind-heading h3 { font-size: 10px; }
  .start-keybind-box #keybind-status { display: none; }
  .compact-keybind-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 3px !important; }
  .start-keybind-box .keybind-action { min-height: 42px; gap: 2px; }
  .start-keybind-box .keybind-action strong { font-size: 7px; }
  .start-keybind-box .keybind-button { min-width: 24px !important; height: 20px; padding: 0 3px; font-size: 7px; }
  .menu-key-note { font-size: 6px !important; }
  .overlay-start .start-button-game { min-width: 150px; padding: 7px 14px; font-size: 10px; }
  .start-press-hint { font-size: 7px !important; }
  .overlay-gameover .overlay-logo-image { width: 110px !important; max-height: 38px; }
  .overlay-gameover .overlay-character { max-height: 42px !important; }
  .overlay-gameover .result-score-panel strong { font-size: clamp(42px, 15vh, 64px); }
  .overlay-gameover #start-description { font-size: 7px !important; }
  .overlay-gameover .overlay-note { display: none; }
  .augment-hotkey { top: 5px; left: 5px; min-width: 32px; padding: 3px 4px; font-size: 6.5px; }
}


/* === v29 build list cute vertical layout + remove jump/duck help === */
.control-help-start,
#jump-help,
#duck-help {
  display: none !important;
}
.build-pop {
  max-width: min(100%, 360px);
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,246,250,.94));
  border: 1px solid rgba(217, 225, 245, .96);
  box-shadow: 0 12px 24px rgba(116, 136, 180, .16);
}
.build-pop-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #7c6f9f;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.build-list,
.build-list-ingame {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 38px;
}
.build-list-ingame .muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(250,252,255,.86);
  border: 1px dashed #d8e1f0;
  color: #96a2bf;
  font-size: 12px;
}
.build-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.97));
  border: 1px solid #d7e0f0;
  box-shadow: 0 4px 10px rgba(124, 147, 190, .08);
}
.build-item-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(135,151,194,.14));
}
.build-item-texts { min-width: 0; }
.build-item-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.build-item-name {
  min-width: 0;
  color: #5b6e99;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}
.build-item-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0f7, #ffdfe9);
  color: #d1668a;
  font-size: 11px;
  font-weight: 1000;
  box-shadow: inset 0 0 0 1px rgba(241,160,191,.32);
}
.revive-charge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.revive-charge-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(142,161,204,.18));
}
.revive-charge-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef5ff, #dae8ff);
  color: #6885be;
  font-size: 10px;
  font-weight: 1000;
}
@media (max-width: 900px) {
  .build-pop { max-width: min(100%, 320px); padding: 10px 12px; }
  .build-item { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 8px 10px; }
  .build-item-icon { width: 38px; height: 38px; }
  .build-item-name { font-size: 13px; }
}


/* === v30 centered loading + upgrade overlap fix + second lane tuning === */
.loading-guide { display: none !important; }
.loading-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.loading-brand {
  width: min(420px, 78vw);
  max-width: 100%;
  padding: 16px 22px 18px;
  margin: 0 auto;
}
.loading-logo-image {
  display: block;
  width: min(340px, 56vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.loading-kicker {
  margin-top: 8px;
  text-align: center;
}
.loading-bottom-right {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto;
}
.loading-text-wrap {
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}
.now-loading-text {
  font-size: clamp(28px, 3.6vw, 48px);
}
.loading-teacup {
  width: clamp(88px, 10vw, 142px);
}
.boot-status {
  position: static;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .loading-bottom-right { flex-direction: column; gap: 10px; }
  .now-loading-text { font-size: clamp(24px, 7vw, 36px); }
}
body.upgrade-active .build-pop {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.build-pop {
  transition: opacity .18s ease, transform .18s ease;
}


/* === v31 HUD order + compact build override === */
.scoreboard-pop {
  gap: 0;
  padding: 8px 18px;
}
.game-stat,
.game-stat-score,
.game-stat-cup,
.game-stat-next,
.game-stat-best {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 18px 8px 10px !important;
}
.game-stat + .game-stat {
  margin-left: 10px;
  padding-left: 22px !important;
  border-right: 0 !important;
  border-left: 1px solid rgba(174, 193, 224, .42);
}
.game-stat-head {
  flex: 0 0 auto;
  gap: 0;
}
.game-stat-icon {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}
.game-stat strong {
  order: 2;
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  margin: 0 !important;
  font-size: clamp(19px, 2vw, 30px) !important;
}
.game-stat-head span,
.game-stat span {
  display: none !important;
}
.game-stat strong::before {
  font-size: 10px !important;
  line-height: 1 !important;
}
@media (max-width: 900px) {
  .scoreboard-pop { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 0; }
  .game-stat + .game-stat { margin-left: 0; padding-left: 14px !important; border-left: 0; }
  .game-stat:nth-child(2n) { border-left: 1px solid rgba(174, 193, 224, .36); }
  .game-stat:nth-child(n+3) { border-top: 1px solid rgba(174, 193, 224, .28); }
}

.build-pop {
  max-width: min(220px, 32vw) !important;
  padding: 0 !important;
  margin-top: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}
.build-pop-title {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px 2px !important;
  padding: 0 !important;
  color: #7c6f9f;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: .08em;
}
.build-pop-icon {
  width: 16px !important;
  height: 16px !important;
}
.build-list,
.build-list-ingame {
  gap: 6px !important;
  min-height: 0 !important;
}
.build-list-ingame .muted {
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px dashed rgba(210,220,240,.92) !important;
  backdrop-filter: blur(6px);
  font-size: 11px !important;
}
.build-item {
  grid-template-columns: 30px minmax(0,1fr) !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(216,226,244,.95) !important;
  box-shadow: 0 6px 14px rgba(116, 136, 180, .10) !important;
  backdrop-filter: blur(6px);
}
.build-item-icon {
  width: 30px !important;
  height: 30px !important;
}
.build-item-texts {
  min-width: 0;
}
.build-item-name-row {
  gap: 6px !important;
  flex-wrap: wrap;
}
.build-item-name {
  font-size: 13px !important;
  line-height: 1.2 !important;
}
.build-item-level {
  font-size: 10px !important;
  padding: 3px 6px !important;
}
.revive-charge-icon {
  width: 14px !important;
  height: 14px !important;
}
.revive-charge-wrap {
  gap: 2px !important;
}


/* === v32 loading logo cleanup + build header removal === */
.loading-brand {
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.loading-logo-image {
  filter: drop-shadow(0 10px 18px rgba(112, 137, 183, .16));
}
.build-pop.hidden {
  display: none !important;
}
.build-pop-title {
  display: none !important;
}
.build-pop {
  margin-top: 8px !important;
}


/* === v33 remove inner HUD boxes/dividers === */
.game-stat,
.game-stat-score,
.game-stat-cup,
.game-stat-next,
.game-stat-best {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.game-stat + .game-stat {
  border-left: 0 !important;
  border-right: 0 !important;
  margin-left: 18px !important;
  padding-left: 10px !important;
}
@media (max-width: 900px) {
  .game-stat + .game-stat,
  .game-stat:nth-child(2n),
  .game-stat:nth-child(n+3) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-top: 8px !important;
  }
  .scoreboard-pop { gap: 6px !important; }
}


/* === v34 remove remaining keybind explanation text === */
.menu-key-note,
#jump-help,
#duck-help,
.loading-keys,
.loading-jump-keys,
.loading-duck-keys,
.game-key-guide,
.game-help-inline {
  display: none !important;
}


/* === v36 HOME navigation + in-game key guide removal === */
.home-profile-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(211,223,244,.95);
  color: #65799f;
  box-shadow: 0 6px 14px rgba(111,139,183,.10);
}
.home-profile-label {
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffc2d8, #f39abf);
  color: #fff;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .08em;
}
#home-username {
  font-size: 13px;
  color: #536b9b;
}
.home-rename-button {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4f7ff;
  border: 1px solid #d5e0f2;
  font-size: 11px;
  font-weight: 900;
}
.overlay-gameover .home-profile-row {
  display: none !important;
}
.result-action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.home-button {
  min-width: 120px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid rgba(190,207,235,.95);
  background: linear-gradient(180deg, #ffffff, #edf4ff);
  color: #5e76a3;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
  box-shadow: 0 8px 18px rgba(103,130,178,.14);
  cursor: pointer;
}
.home-button:hover {
  transform: translateY(-1px);
}
.overlay-start .home-button {
  display: none !important;
}
/* HOME画面のキーバインド説明は残す */
.overlay-start .menu-key-note {
  display: block !important;
}
/* ゲーム内に描画されていたキーバインド案内はJS側で削除済み */


/* v37: menu screen username form */
.menu-name-form {
  width: min(720px, 100%);
  margin: 6px auto 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 251, 253, 0.86);
  border: 2px solid rgba(188, 206, 241, 0.92);
  box-shadow: 0 10px 24px rgba(122, 145, 192, 0.12);
  backdrop-filter: blur(10px);
}
.menu-name-form label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 900;
  color: #6379a8;
  letter-spacing: .08em;
}
.menu-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.menu-name-row input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid #e8c46f;
  background: rgba(255,255,255,0.92);
  color: #4c6396;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
}
.menu-name-row input:focus { outline: none; border-color: #f09ebe; box-shadow: 0 0 0 3px rgba(240, 158, 190, .18); }
.menu-name-save { min-width: 148px; padding: 12px 16px; }
#menu-name-status { margin: 8px 2px 0; min-height: 18px; }
#menu-name-status.is-error { color: #cf577f; font-weight: 800; }
#menu-name-status.is-success { color: #5c7fc0; font-weight: 800; }
@media (max-width: 900px) {
  .menu-name-row { grid-template-columns: 1fr; }
  .menu-name-save { width: 100%; min-width: 0; }
}
.overlay-gameover .menu-name-form { display: none !important; }

/* === v38 title alignment + kawaii ranking panel === */
.overlay-logo { display: none !important; }

.topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: end;
  justify-content: stretch !important;
  gap: 12px;
}
.topbar > div {
  grid-column: 1;
  justify-self: center;
  text-align: center;
}
.topbar .eyebrow { text-align: center; }

.ranking-panel {
  position: sticky;
  top: 12px;
  padding: 22px 16px 16px !important;
  border-radius: 34px;
  border: 2px solid rgba(187, 207, 240, 0.98);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 220, 235, 0.70), rgba(255,220,235,0) 26%),
    radial-gradient(circle at 82% 16%, rgba(211, 234, 255, 0.70), rgba(211,234,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,252,255,0.97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 16px 34px rgba(122, 145, 192, 0.18),
    0 0 0 6px rgba(255,255,255,0.30);
  overflow: hidden;
  isolation: isolate;
}
.ranking-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 26px;
  border: 1.5px solid rgba(208, 220, 245, 0.85);
  pointer-events: none;
  z-index: 0;
}
.ranking-panel::after {
  content: "";
  position: absolute;
  inset: auto 18px 12px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(219,230,248,0.8), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}
.ranking-panel > * { position: relative; z-index: 1; }

.ranking-header-badge {
  display: block;
  width: min(210px, 86%);
  max-width: 100%;
  margin: 4px auto 10px;
  filter: drop-shadow(0 8px 16px rgba(129, 150, 194, 0.15));
  pointer-events: none;
}
.ranking-corner {
  position: absolute;
  width: 136px;
  pointer-events: none;
  opacity: 0.96;
  filter: drop-shadow(0 7px 14px rgba(122, 145, 192, 0.15));
}
.ranking-corner-top {
  top: -4px;
  right: -6px;
}
.ranking-corner-bottom {
  bottom: -6px;
  left: -2px;
  transform: scaleX(-1) scaleY(-1);
}
.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
}
.ranking-header .eyebrow {
  margin-bottom: 4px;
}
.ranking-header h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  color: #5a73a8;
  letter-spacing: .02em;
}
.ranking-header .icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(203, 218, 244, 0.95);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,247,255,.94));
  box-shadow: 0 6px 12px rgba(122,145,192,.10);
  color: #6d86bb;
  flex: 0 0 auto;
}
.ranking-caption {
  margin: 8px 0 6px;
  color: #7184ad;
}
.ranking-divider-wrap {
  display: flex;
  justify-content: center;
  margin: 2px 0 10px;
}
.ranking-divider {
  width: min(210px, 92%);
  display: block;
  opacity: 0.98;
}
.ranking-status {
  margin: 6px 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #8a9bc1;
  letter-spacing: .12em;
}
.ranking-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ranking-item::before {
  display: none !important;
  content: none !important;
}
.ranking-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,251,255,.82));
  border: 1.5px solid rgba(208, 220, 245, 0.92);
  box-shadow: 0 8px 18px rgba(122,145,192,0.10);
}
.ranking-item.me {
  background: linear-gradient(180deg, rgba(255,249,234,.98), rgba(255,245,216,.92));
  border-color: rgba(236, 202, 119, 0.92);
  box-shadow: 0 10px 20px rgba(227, 190, 92, 0.14);
}
.rank-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rank-medal {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(129,153,194,.18));
}
.rank-number-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 1000;
  color: #6b82b8;
  background: linear-gradient(180deg, rgba(244,248,255,.96), rgba(228,238,253,.96));
  border: 1.5px solid rgba(199, 214, 241, 0.95);
}
.rank-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rank-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 1000;
  font-size: 14px;
  color: #556e9f;
}
.rank-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  color: #a0b0d1;
}
.rank-score {
  font-size: 18px;
  font-weight: 1000;
  color: #e1b64b;
  letter-spacing: .01em;
}
.ranking-item.me .rank-score { color: #d8a73a; }

@media (max-width: 1100px) {
  .topbar {
    display: flex !important;
    justify-content: center !important;
  }
  .ranking-panel {
    position: static;
  }
}
@media (max-width: 900px) {
  .ranking-header-badge {
    width: min(190px, 78%);
  }
  .ranking-corner { width: 110px; }
  .ranking-item {
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 8px;
  }
  .rank-medal { width: 42px; height: 42px; }
  .rank-score { font-size: 16px; }
}


/* === v39 exact title x alignment + ranking decoration polish === */
@media (min-width: 1101px) {
  .topbar {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    column-gap: 12px !important;
    align-items: end !important;
    justify-content: stretch !important;
    box-sizing: border-box;
  }
  .topbar > div {
    grid-column: 1 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-self: stretch !important;
    text-align: center;
    box-sizing: border-box;
  }
  .topbar .title-logo,
  .topbar .eyebrow {
    width: 100%;
    text-align: center;
  }
  .topbar .title-logo-image {
    margin-inline: auto;
  }
}

/* Make generated ranking art feel integrated rather than pasted on. */
.ranking-panel {
  padding-top: 18px !important;
}
.ranking-header-badge {
  width: min(172px, 74%) !important;
  margin: -2px auto 4px !important;
}
.ranking-corner-top {
  width: 118px !important;
  top: -18px !important;
  right: -16px !important;
  opacity: .76 !important;
}
.ranking-corner-bottom {
  width: 104px !important;
  bottom: -24px !important;
  left: -18px !important;
  opacity: .58 !important;
}
.ranking-divider {
  width: min(178px, 84%) !important;
}
.ranking-divider-wrap {
  margin: 0 0 6px !important;
}
.ranking-item:nth-child(1) {
  border-color: rgba(243, 198, 76, .72) !important;
  background: linear-gradient(180deg, rgba(255,253,240,.97), rgba(255,247,218,.89)) !important;
}
.ranking-item:nth-child(2) {
  border-color: rgba(180, 202, 231, .82) !important;
  background: linear-gradient(180deg, rgba(252,254,255,.97), rgba(237,244,253,.91)) !important;
}
.ranking-item:nth-child(3) {
  border-color: rgba(218, 167, 117, .72) !important;
  background: linear-gradient(180deg, rgba(255,251,247,.97), rgba(249,232,218,.89)) !important;
}
.ranking-item:nth-child(-n+3) .rank-score {
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* === v40 ranking height sync + header overlap + ranking logo === */
@media (min-width: 1101px) {
  .ranking-panel {
    box-sizing: border-box;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 72px 14px 14px !important;
  }
}
.ranking-header-badge {
  position: absolute !important;
  top: -54px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(190px, 78%) !important;
  margin: 0 !important;
  z-index: 4 !important;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(124, 145, 192, 0.18));
}
.ranking-logo-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
}
.ranking-logo-image {
  display: block;
  width: min(190px, 100%);
  max-height: 90px;
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 8px 14px rgba(120, 145, 190, 0.16));
}
.ranking-logo-row .icon-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(203, 218, 244, 0.95);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,247,255,.94));
  box-shadow: 0 6px 12px rgba(122,145,192,.10);
  color: #6d86bb;
}
.ranking-divider-wrap {
  margin: 0 0 4px !important;
}
.ranking-divider {
  width: min(160px, 76%) !important;
}
.ranking-status {
  margin: 2px 0 7px !important;
  text-align: center;
}
.ranking-list {
  gap: 7px !important;
}
.ranking-item {
  padding: 7px 8px !important;
  border-radius: 17px !important;
}
.rank-medal {
  width: 42px !important;
  height: 42px !important;
}
.rank-number-badge {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
}
.rank-score {
  font-size: 16px !important;
}
.ranking-corner-top {
  top: 6px !important;
  right: -10px !important;
  width: 94px !important;
  opacity: .68 !important;
}
.ranking-corner-bottom {
  bottom: -14px !important;
  left: -14px !important;
  width: 86px !important;
  opacity: .48 !important;
}
@media (max-width: 1100px) {
  .ranking-panel {
    height: auto !important;
    overflow: hidden !important;
    padding-top: 26px !important;
  }
  .ranking-header-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(180px, 72%) !important;
    margin: -4px auto 4px !important;
  }
}


/* === v41 ranking top packing + full long names === */
@media (min-width: 1101px) {
  .ranking-panel {
    padding: 98px 12px 12px !important;
    overflow: hidden !important;
  }
}
.ranking-header-badge {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(138px, 56%) !important;
  max-height: 112px !important;
  object-fit: contain !important;
  object-position: top center !important;
  margin: 0 !important;
  z-index: 5 !important;
}
.ranking-corner-top {
  top: -10px !important;
  right: -18px !important;
  width: 92px !important;
  opacity: .78 !important;
  z-index: 4 !important;
}
.ranking-corner-bottom {
  bottom: -24px !important;
  left: -18px !important;
  width: 76px !important;
  opacity: .44 !important;
}
.ranking-logo-row {
  margin: -18px 0 -2px !important;
  min-height: 54px;
  align-items: center;
}
.ranking-logo-image {
  width: min(176px, 84%) !important;
  max-height: 68px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
.ranking-logo-row .icon-button {
  width: 34px !important;
  height: 34px !important;
  align-self: center;
}
.ranking-divider-wrap {
  margin: -2px 0 1px !important;
}
.ranking-divider {
  width: min(150px, 70%) !important;
  max-height: 34px !important;
  object-fit: contain !important;
}
.ranking-status {
  margin: 0 0 5px !important;
  min-height: 14px;
  line-height: 1.1;
}
.ranking-list {
  gap: 6px !important;
}
.ranking-item {
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  padding: 7px 8px !important;
  min-height: 50px;
}
.rank-medal {
  width: 38px !important;
  height: 38px !important;
}
.rank-meta {
  min-width: 0 !important;
  overflow: visible !important;
}
.rank-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-size: 13px !important;
  line-height: 1.14 !important;
  max-width: 100% !important;
}
.rank-label {
  font-size: 8px !important;
  line-height: 1 !important;
  margin-top: 2px;
}
.rank-score {
  white-space: nowrap !important;
  font-size: 15px !important;
  align-self: center;
}
@media (max-width: 1100px) {
  .ranking-panel {
    padding-top: 92px !important;
  }
  .ranking-header-badge {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(138px, 46%) !important;
    margin: 0 !important;
  }
  .ranking-logo-row { margin-top: -15px !important; }
}

/* === v42 ranking panel simplification === */
.ranking-panel {
  box-sizing: border-box;
  padding: 12px 14px 14px !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.ranking-panel::before {
  inset: 8px !important;
  border-radius: 24px !important;
}
.ranking-panel::after {
  display: none !important;
}
.ranking-header-badge,
.ranking-corner,
.ranking-caption,
.ranking-header,
.ranking-deco,
.ranking-rabbit,
.ranking-rabbit-image {
  display: none !important;
}
.ranking-logo-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: -4px 0 2px !important;
  min-height: 92px;
}
.ranking-logo-image {
  width: min(250px, calc(100% - 48px)) !important;
  max-width: 250px !important;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(129,150,194,.18));
}
.ranking-logo-row .icon-button {
  position: absolute;
  top: 14px;
  right: 2px;
}
.ranking-divider-wrap {
  margin: 0 0 8px !important;
}
.ranking-divider {
  width: min(180px, 82%) !important;
}
.ranking-status {
  margin: 2px 0 8px !important;
  text-align: center;
}
.ranking-list {
  flex: 1 1 auto;
  align-content: start;
  gap: 8px !important;
}
.ranking-item {
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  min-height: 64px;
}
.rank-medal {
  width: 40px !important;
  height: 40px !important;
}
.rank-number-badge {
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
}
.rank-meta {
  min-width: 0;
}
.rank-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: none !important;
}
.rank-score {
  white-space: nowrap;
  align-self: center;
}
@media (max-width: 1100px) {
  .ranking-panel {
    overflow: visible !important;
    height: auto !important;
  }
}


/* === v46 ranking cleanup: remove small ornament, restore edge decoration === */
.ranking-divider-wrap,
.ranking-divider { display: none !important; }
.ranking-panel { position: relative; overflow: hidden !important; padding-top: 10px !important; }
.ranking-corner {
  display: block !important;
  position: absolute !important;
  width: 88px !important;
  height: auto !important;
  opacity: .96 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: drop-shadow(0 4px 8px rgba(116,136,180,.12));
}
.ranking-corner-tl { top: 0 !important; left: 0 !important; transform: scaleX(-1) !important; }
.ranking-corner-tr { top: 0 !important; right: 0 !important; transform: none !important; }
.ranking-corner-bl { bottom: 0 !important; left: 0 !important; transform: scale(-1,-1) !important; }
.ranking-corner-br { bottom: 0 !important; right: 0 !important; transform: scaleY(-1) !important; }
.ranking-logo-row, .ranking-status, .ranking-list { position: relative; z-index: 2; }
.ranking-logo-row { margin-bottom: 0 !important; }
.ranking-status { margin-top: 0 !important; }


/* === v47 ability select: instant pick, logo header, tighter layout === */
.upgrade-heading {
  top: 2.6% !important;
  width: min(72%, 760px) !important;
  padding: 9px 18px 10px !important;
}
.upgrade-title-logo {
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin: 2px auto 0;
  filter: drop-shadow(0 6px 10px rgba(173, 106, 145, .18));
}
.upgrade-heading h2,
.upgrade-subtitle,
.upgrade-confirm {
  display: none !important;
}
.upgrade-cards {
  top: 19.5% !important;
  bottom: 6.0% !important;
}
.augment-card,
.augment-card.slot-1,
.augment-card.slot-2,
.augment-card.slot-3,
.augment-card.bronze,
.augment-card.silver,
.augment-card.gold {
  padding-bottom: 10px !important;
}
.augment-desc {
  padding-bottom: 4px !important;
}
@media (max-width: 760px) {
  .upgrade-heading {
    top: 2.2% !important;
    width: 76% !important;
    padding: 5px 10px 7px !important;
  }
  .upgrade-title-logo {
    width: 100%;
  }
  .upgrade-cards {
    top: 17.4% !important;
    bottom: 4.5% !important;
  }
}


/* === v48 ability select cleanup === */
.upgrade-heading {
  top: 2.2% !important;
  width: min(72%, 760px) !important;
  padding: 10px 18px 12px !important;
  min-height: unset !important;
}
.upgrade-title-logo {
  display: block !important;
  width: min(100%, 720px) !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 6px 10px rgba(173,106,145,.18));
}
#upgrade-confirm,
.upgrade-confirm,
.upgrade-heading h2,
.upgrade-subtitle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.upgrade-cards {
  top: 18.8% !important;
  bottom: 3.6% !important;
  align-items: stretch !important;
}
.augment-card {
  min-height: 100% !important;
  height: 100% !important;
  padding-bottom: 14px !important;
}
.augment-card .augment-inner {
  height: 100% !important;
}
@media (max-width: 760px) {
  .upgrade-heading {
    top: 1.8% !important;
    width: 76% !important;
    padding: 6px 10px 8px !important;
  }
  .upgrade-cards {
    top: 16.8% !important;
    bottom: 3.4% !important;
  }
}


/* === v51 gameover hero sizing / centering === */
.overlay-gameover .result-scene {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  width: 100% !important;
  min-height: clamp(150px, 24vh, 220px);
  margin: 6px auto 8px !important;
  gap: 0 !important;
}
.overlay-gameover .overlay-character {
  width: clamp(230px, 34vw, 360px) !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 22px rgba(98, 126, 168, .20)) !important;
}
.overlay-gameover .result-encounter.hidden {
  display: none !important;
}
.overlay-gameover .result-encounter {
  position: absolute !important;
  left: calc(50% + clamp(105px, 16vw, 170px));
  bottom: 6px;
  transform: none !important;
  align-self: auto !important;
  z-index: 2;
}
.overlay-gameover .result-enemy-canvas {
  width: clamp(88px, 10vw, 120px) !important;
}
@media (max-width: 900px) {
  .overlay-gameover .result-scene { min-height: 132px; }
  .overlay-gameover .overlay-character { width: clamp(180px, 40vw, 280px) !important; }
  .overlay-gameover .result-encounter {
    left: calc(50% + clamp(72px, 18vw, 122px));
    bottom: 2px;
  }
}


/* === v52/v55 gameover placement tune === */
.overlay-gameover .result-scene {
  min-height: clamp(200px, 30vh, 272px) !important;
  padding-top: clamp(34px, 6vh, 58px) !important;
  margin: 6px auto 6px !important;
  overflow: visible !important;
}
.overlay-gameover .overlay-character {
  width: clamp(220px, 33vw, 340px) !important;
  transform: translateY(26px) !important;
}
.overlay-gameover .result-encounter {
  left: calc(50% + clamp(98px, 15vw, 164px));
  bottom: -10px !important;
}
.overlay-gameover .result-enemy-canvas {
  width: clamp(88px, 9.6vw, 114px) !important;
  height: auto !important;
}
@media (max-width: 900px) {
  .overlay-gameover .result-scene {
    min-height: 172px !important;
    padding-top: 24px !important;
  }
  .overlay-gameover .overlay-character {
    width: clamp(170px, 38vw, 260px) !important;
    transform: translateY(16px) !important;
  }
  .overlay-gameover .result-encounter {
    left: calc(50% + clamp(70px, 16vw, 116px));
    bottom: -8px !important;
  }
}


/* === v53 ranking: remove TOP5 label and lift list away from bottom corners === */
.ranking-status:empty {
  display: none !important;
}
.ranking-panel {
  padding-bottom: 18px !important;
}
.ranking-logo-row {
  margin-bottom: 4px !important;
}
.ranking-list {
  padding-bottom: 18px !important;
  gap: 7px !important;
}
.ranking-item:last-child {
  margin-bottom: 2px;
}
@media (min-width: 1101px) {
  .ranking-panel {
    padding-bottom: 22px !important;
  }
  .ranking-list {
    padding-bottom: 24px !important;
  }
}


/* === v54 loading background simplified to gradients only === */
body.app-loading {
  background-image: none;
}


/* === v56 ability selection decorative frame === */
.upgrade-box {
  isolation: isolate !important;
}
.upgrade-frame-deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 16px rgba(111, 137, 183, .15));
}
.upgrade-heading {
  z-index: 6 !important;
}
.upgrade-cards {
  z-index: 5 !important;
  left: 7.3% !important;
  right: 7.3% !important;
  top: 19.2% !important;
  bottom: 10.2% !important;
  gap: 2.8% !important;
}
.augment-card {
  box-shadow:
    0 10px 24px rgba(103, 126, 168, .12),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
@media (max-width: 760px) {
  .upgrade-frame-deco {
    object-fit: fill;
  }
  .upgrade-cards {
    left: 7.8% !important;
    right: 7.8% !important;
    top: 18.2% !important;
    bottom: 9.5% !important;
    gap: 2.2% !important;
  }
}

/* === v58 ability select final: remove pink header bg, show decorative frame, reduce overlap === */
.upgrade-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,247,251,.22)),
    url('./assets/backgrounds/ability-select-bg.png?v=62') center 48% / cover no-repeat !important;
}
.upgrade-frame-deco {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  z-index: 4 !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 8px 16px rgba(111, 137, 183, .15)) !important;
}
.upgrade-heading {
  top: 5.2% !important;
  width: min(56%, 560px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 6 !important;
}
.upgrade-kicker {
  margin: 0 0 8px !important;
  color: rgba(255,255,255,.98) !important;
  text-shadow: 0 2px 10px rgba(118, 89, 130, .35), 0 1px 0 rgba(255,255,255,.25) !important;
}
.upgrade-heading h2,
.upgrade-subtitle,
.upgrade-confirm,
#upgrade-confirm {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.upgrade-title-logo {
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 10px 18px rgba(173, 106, 145, .18)) !important;
}
.upgrade-cards {
  z-index: 5 !important;
  left: 8.8% !important;
  right: 8.8% !important;
  top: 24.8% !important;
  bottom: 10.5% !important;
  gap: 2.5% !important;
}
.augment-card,
.augment-card.slot-1,
.augment-card.slot-2,
.augment-card.slot-3,
.augment-card.bronze,
.augment-card.silver,
.augment-card.gold {
  min-height: 100% !important;
  height: 100% !important;
  padding-bottom: 10px !important;
  box-shadow:
    0 12px 28px rgba(103, 126, 168, .12),
    inset 0 0 0 1px rgba(255,255,255,.76) !important;
}
.augment-card .augment-inner { height: 100% !important; }
@media (max-width: 760px) {
  .upgrade-heading {
    top: 4.2% !important;
    width: 72% !important;
  }
  .upgrade-kicker {
    margin-bottom: 6px !important;
  }
  .upgrade-title-logo {
    max-width: none !important;
  }
  .upgrade-cards {
    left: 8.2% !important;
    right: 8.2% !important;
    top: 21.4% !important;
    bottom: 8.9% !important;
    gap: 2.0% !important;
  }
}


/* === v59 result layout: HUD-style score/tea + unclipped result screen === */
.overlay-gameover.result-mode .overlay-inner {
  justify-content: center !important;
  padding: 10px 22px 20px !important;
  overflow: hidden !important;
}
.overlay-gameover.result-mode #overlay-eyebrow {
  display: none !important;
}
.overlay-gameover.result-mode .overlay-note {
  display: none !important;
}
.overlay-gameover.result-mode .result-scene {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 150px !important;
  max-height: 176px !important;
  padding: 0 !important;
  margin: 0 auto 4px !important;
  gap: 0 !important;
  overflow: visible !important;
}
.overlay-gameover.result-mode .overlay-character {
  display: block !important;
  width: clamp(240px, 31vw, 330px) !important;
  max-height: 154px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: translateY(5px) !important;
  filter: drop-shadow(0 12px 20px rgba(98,126,168,.18)) !important;
}
.overlay-gameover.result-mode .result-encounter {
  left: calc(50% + clamp(102px, 14.5vw, 154px)) !important;
  bottom: 4px !important;
}
.overlay-gameover.result-mode .result-enemy-canvas {
  width: clamp(82px, 8.8vw, 108px) !important;
}
.overlay-gameover.result-mode #start-title {
  margin: 0 0 4px !important;
  font-size: clamp(22px, 3.4vh, 30px) !important;
  line-height: 1 !important;
  letter-spacing: .11em !important;
}
.overlay-gameover.result-mode .result-score-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 4vw, 46px) !important;
  width: min(720px, 88%) !important;
  margin: 3px auto 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.overlay-gameover.result-mode .result-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.2vw, 12px);
  min-width: 0;
}
.overlay-gameover.result-mode .result-stat-icon {
  width: clamp(48px, 6.5vw, 72px);
  height: clamp(48px, 6.5vw, 72px);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(105,132,176,.13));
}
.overlay-gameover.result-mode .result-stat-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.overlay-gameover.result-mode .result-stat-label {
  color: #7890bd;
  font-size: clamp(9px, 1.35vh, 12px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .16em;
}
.overlay-gameover.result-mode .result-stat strong {
  display: block !important;
  margin: 2px 0 0 !important;
  color: #5571a8 !important;
  font-size: clamp(42px, 8.8vh, 72px) !important;
  line-height: .92 !important;
  font-weight: 1000 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap;
  text-shadow: 0 3px 0 rgba(255,255,255,.9), 0 8px 18px rgba(91,117,169,.14) !important;
}
.overlay-gameover.result-mode .result-stat-tea strong {
  color: #bc7854 !important;
}
.overlay-gameover.result-mode #start-description {
  margin: 3px auto 5px !important;
  color: #6579a3 !important;
  font-size: clamp(14px, 2.0vh, 17px) !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;
  letter-spacing: .05em;
  white-space: normal !important;
}
.overlay-gameover.result-mode .result-newrecord {
  width: auto !important;
  max-width: 180px !important;
  max-height: 68px !important;
  margin: 0 auto 3px !important;
  object-fit: contain;
}
.overlay-gameover.result-mode .result-action-row {
  margin-top: 2px !important;
  gap: 10px !important;
}
.overlay-gameover.result-mode .home-button,
.overlay-gameover.result-mode .start-button-game {
  min-height: 42px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.overlay-gameover.result-mode .start-press-hint {
  display: block !important;
  margin: 5px 0 0 !important;
  padding-bottom: 2px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  flex: 0 0 auto;
}
@media (max-width: 760px), (max-height: 620px) {
  .overlay-gameover.result-mode .overlay-inner {
    padding: 7px 14px 14px !important;
  }
  .overlay-gameover.result-mode .result-scene {
    min-height: 118px !important;
    max-height: 134px !important;
  }
  .overlay-gameover.result-mode .overlay-character {
    width: clamp(190px, 38vw, 270px) !important;
    max-height: 120px !important;
    transform: translateY(4px) !important;
  }
  .overlay-gameover.result-mode .result-encounter {
    left: calc(50% + clamp(78px, 16vw, 120px)) !important;
    bottom: 0 !important;
  }
  .overlay-gameover.result-mode .result-score-panel {
    gap: 18px !important;
    width: 94% !important;
    margin-bottom: 3px !important;
  }
  .overlay-gameover.result-mode .result-stat-icon {
    width: 46px !important;
    height: 46px !important;
  }
  .overlay-gameover.result-mode .result-stat strong {
    font-size: clamp(36px, 7.5vh, 54px) !important;
  }
  .overlay-gameover.result-mode #start-description {
    margin: 2px auto 3px !important;
    font-size: 13px !important;
  }
  .overlay-gameover.result-mode .result-newrecord {
    max-height: 52px !important;
  }
  .overlay-gameover.result-mode .home-button,
  .overlay-gameover.result-mode .start-button-game {
    min-height: 38px !important;
    padding: 6px 16px !important;
  }
  .overlay-gameover.result-mode .start-press-hint {
    margin-top: 3px !important;
    font-size: 9px !important;
  }
}


/* === v60 ability select: clean logo header + ranking-style decorated ability cards === */
/* The large decorative frame must not behave like a background around the whole selection screen. */
.upgrade-frame-deco {
  display: none !important;
}

/* Remove the pink header plate and move the logo upward. */
.upgrade-heading {
  top: -0.8% !important;
  width: min(46%, 500px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 8 !important;
}
.upgrade-kicker {
  display: none !important;
}
.upgrade-title-logo {
  display: block !important;
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 8px 14px rgba(164, 99, 142, .18)) !important;
}

/* Give the title breathing room, then keep all three choices comfortably below it. */
.upgrade-cards {
  left: 8.2% !important;
  right: 8.2% !important;
  top: 26.2% !important;
  bottom: 8.8% !important;
  gap: 2.8% !important;
  z-index: 5 !important;
}

/* Ranking-style framed cards. */
.augment-card,
.augment-card.slot-1,
.augment-card.slot-2,
.augment-card.slot-3,
.augment-card.bronze,
.augment-card.silver,
.augment-card.gold {
  overflow: visible !important;
  border: 2px solid rgba(183, 207, 239, .92) !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.70),
    0 13px 28px rgba(91, 121, 167, .14),
    inset 0 0 0 1px rgba(255,255,255,.86) !important;
}
.augment-card.slot-2 {
  border-color: rgba(238, 188, 216, .95) !important;
}
.augment-card.slot-3 {
  border-color: rgba(190, 211, 240, .95) !important;
}

.ability-card-corner {
  position: absolute;
  display: block;
  width: clamp(42px, 5.2vw, 62px);
  height: auto;
  z-index: 7;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 6px rgba(112, 134, 174, .11));
}
.ability-card-corner-tl {
  top: -9px;
  left: -9px;
  transform: scaleX(-1);
}
.ability-card-corner-tr {
  top: -9px;
  right: -9px;
}
.ability-card-corner-bl {
  bottom: -9px;
  left: -9px;
  transform: scale(-1, -1);
}
.ability-card-corner-br {
  bottom: -9px;
  right: -9px;
  transform: scaleY(-1);
}

/* Keep card content above the decorative corner artwork. */
.augment-hotkey,
.augment-select-mark,
.augment-icon-wrap,
.augment-name,
.augment-level,
.augment-desc,
.augment-pick {
  position: relative;
  z-index: 8;
}

@media (max-width: 760px) {
  .upgrade-heading {
    top: -0.2% !important;
    width: 58% !important;
  }
  .upgrade-title-logo {
    max-width: none !important;
  }
  .upgrade-cards {
    left: 8.0% !important;
    right: 8.0% !important;
    top: 24.0% !important;
    bottom: 8.0% !important;
    gap: 2.0% !important;
  }
  .ability-card-corner {
    width: clamp(34px, 7vw, 48px);
  }
}

/* === v61 result screen: restore character size and tighten empty space === */
.overlay-gameover.result-mode .overlay-inner {
  justify-content: center !important;
  padding: 4px 20px 10px !important;
}
.overlay-gameover.result-mode .result-scene {
  min-height: 176px !important;
  max-height: 198px !important;
  margin: 0 auto 0 !important;
}
.overlay-gameover.result-mode .overlay-character {
  width: clamp(290px, 36vw, 390px) !important;
  max-height: 188px !important;
  height: auto !important;
  transform: translateY(7px) !important;
}
.overlay-gameover.result-mode .result-encounter {
  left: calc(50% + clamp(124px, 17vw, 182px)) !important;
  bottom: 4px !important;
}
.overlay-gameover.result-mode .result-enemy-canvas {
  width: clamp(86px, 9vw, 112px) !important;
}
.overlay-gameover.result-mode #start-title {
  margin: 0 0 1px !important;
}
.overlay-gameover.result-mode .result-score-panel {
  margin: 1px auto 2px !important;
}
.overlay-gameover.result-mode #start-description {
  margin: 1px auto 2px !important;
}
.overlay-gameover.result-mode .result-action-row {
  margin-top: 1px !important;
}
.overlay-gameover.result-mode .start-press-hint {
  margin-top: 2px !important;
}
@media (max-width: 760px), (max-height: 620px) {
  .overlay-gameover.result-mode .overlay-inner {
    padding: 3px 12px 8px !important;
  }
  .overlay-gameover.result-mode .result-scene {
    min-height: 144px !important;
    max-height: 160px !important;
  }
  .overlay-gameover.result-mode .overlay-character {
    width: clamp(230px, 42vw, 320px) !important;
    max-height: 148px !important;
    transform: translateY(5px) !important;
  }
  .overlay-gameover.result-mode .result-encounter {
    left: calc(50% + clamp(94px, 18vw, 138px)) !important;
    bottom: 0 !important;
  }
}


/* === v62 ability cleanup ===
   Remove any square/rounded tile behind upgrade icons. */
.augment-icon-wrap,
.augment-card .augment-icon-wrap,
.augment-card.slot-1 .augment-icon-wrap,
.augment-card.slot-2 .augment-icon-wrap,
.augment-card.slot-3 .augment-icon-wrap,
.augment-card.bronze .augment-icon-wrap,
.augment-card.silver .augment-icon-wrap,
.augment-card.gold .augment-icon-wrap {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
}
.augment-icon-wrap::before,
.augment-icon-wrap::after {
  content: none !important;
  display: none !important;
}
.augment-icon-image {
  background: transparent !important;
  border-radius: 0 !important;
}


/* === v65 result screen polish: top red GAME OVER, speech bubble on main character, more spacing === */
.overlay-gameover.result-mode .result-scene { order: 1; }
.overlay-gameover.result-mode #start-title {
  order: 0;
  margin: 0 0 10px !important;
  color: #ef5b82 !important;
  font-size: clamp(30px, 4.8vh, 42px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-shadow:
    0 0 0 rgba(255,255,255,0),
    0 2px 0 rgba(255,255,255,.92),
    0 0 10px rgba(255, 112, 151, .34),
    0 0 22px rgba(255, 112, 151, .22),
    0 8px 16px rgba(165, 74, 108, .14) !important;
}
.overlay-gameover.result-mode .result-score-panel {
  order: 2;
  margin: 12px auto 10px !important;
  gap: clamp(26px, 5vw, 58px) !important;
}
.overlay-gameover.result-mode #start-description {
  order: 3;
  margin: 8px auto 14px !important;
}
.overlay-gameover.result-mode .result-action-row {
  order: 4;
  margin-top: 8px !important;
  gap: 14px !important;
}
.overlay-gameover.result-mode .start-press-hint {
  order: 5;
  margin-top: 10px !important;
  padding-bottom: 8px !important;
}
.overlay-gameover.result-mode .home-button,
.overlay-gameover.result-mode .start-button-game {
  min-width: 120px !important;
}
.overlay-gameover.result-mode .overlay-character {
  transform: translateY(0) !important;
}
.overlay-gameover.result-mode .result-scene {
  margin: 0 auto 8px !important;
}
.overlay-gameover.result-mode .result-player-speech {
  position: absolute;
  left: calc(50% + clamp(24px, 5vw, 56px));
  top: clamp(54px, 8vh, 76px);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(118px, 14vw, 158px);
  max-width: clamp(140px, 20vw, 190px);
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid rgba(184, 204, 239, .92);
  background: rgba(255,255,255,.96);
  color: #687eb0;
  font-size: clamp(16px, 2.1vh, 21px);
  font-weight: 1000;
  line-height: 1.1;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(102, 128, 174, .16);
  white-space: nowrap;
}
.overlay-gameover.result-mode .result-player-speech::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.96);
  border-left: 2px solid rgba(184, 204, 239, .92);
  border-bottom: 2px solid rgba(184, 204, 239, .92);
  transform: rotate(-26deg);
  border-bottom-left-radius: 6px;
}
.overlay-gameover.result-mode .result-player-speech.hidden {
  display: none !important;
}
.overlay-gameover.result-mode .result-encounter {
  left: calc(50% + clamp(150px, 20vw, 214px)) !important;
  bottom: 12px !important;
}
.overlay-gameover.result-mode .result-enemy-speech {
  display: none !important;
}
@media (max-width: 760px), (max-height: 620px) {
  .overlay-gameover.result-mode #start-title {
    margin-bottom: 7px !important;
    font-size: clamp(24px, 4.6vh, 34px) !important;
  }
  .overlay-gameover.result-mode .result-score-panel {
    margin: 8px auto 8px !important;
    gap: 20px !important;
  }
  .overlay-gameover.result-mode #start-description {
    margin: 6px auto 10px !important;
  }
  .overlay-gameover.result-mode .result-player-speech {
    left: calc(50% + clamp(12px, 5vw, 30px));
    top: clamp(42px, 7vh, 58px);
    min-width: 102px;
    padding: 8px 12px;
    font-size: 14px;
  }
  .overlay-gameover.result-mode .result-encounter {
    left: calc(50% + clamp(98px, 18vw, 142px)) !important;
    bottom: 6px !important;
  }
}

/* === v66 result: keep both player and enemy speech bubbles visible === */
.overlay-gameover.result-mode .result-enemy-speech {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(199, 214, 240, 0.95) !important;
  background: rgba(255,255,255,.97) !important;
  color: #6176a4 !important;
  font-size: clamp(11px, 1.8vh, 14px) !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 18px rgba(121,142,179,.12) !important;
}


/* v74 サウンドON/OFF（HOME画面・キー設定見出し横） */
.keybind-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sound-toggle {
  border: 1px solid #d4dff0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(180deg, #f59ab8, #e07aa0);
  box-shadow: 0 2px 6px rgba(224, 122, 160, .25);
  cursor: pointer;
  white-space: nowrap;
}
.sound-toggle:hover { filter: brightness(1.05); }
.sound-toggle.is-off {
  color: #758ab0;
  background: rgba(255,255,255,.85);
  box-shadow: none;
}
@media (max-width: 720px) {
  .sound-toggle { font-size: 9px; padding: 2px 8px; }
}

/* v75 BGM音量スライダー（HOME画面） */
.bgm-volume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid #d4dff0;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 800;
  color: #5c6f97;
  white-space: nowrap;
}
.bgm-volume input[type="range"] {
  width: 96px;
  margin: 0;
  accent-color: #e07aa0;
  cursor: pointer;
}
.bgm-volume input[type="range"]:disabled { cursor: not-allowed; opacity: .45; }
.bgm-volume-value { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .bgm-volume { font-size: 9px; padding: 1px 6px; gap: 4px; }
  .bgm-volume input[type="range"] { width: 64px; }
}


/* === v77 NEW RECORD リザルト：新記録キャラを大きく・タイトルを虹色キラキラ === */
.overlay-gameover.result-mode.is-new-record .result-scene,
.overlay-gameover.result-mode.is-new-record .overlay-character,
.overlay-gameover.result-mode.is-new-record .result-encounter,
.overlay-gameover.result-mode.is-new-record .result-player-speech {
  display: none !important;
}
.overlay-gameover.result-mode.is-new-record .result-newrecord {
  width: auto !important;
  max-width: min(520px, 70%) !important;
  max-height: clamp(150px, 30vh, 250px) !important;
  margin: 2px auto 8px !important;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(243, 160, 200, .35)) !important;
  animation: newRecordPop .6s cubic-bezier(.2, 1.4, .4, 1) both, newRecordFloat 2.4s ease-in-out .6s infinite;
}
.overlay-gameover.result-mode.is-new-record #start-title {
  position: relative;
  display: inline-block;
  font-size: clamp(30px, 5.2vh, 46px) !important;
  background: linear-gradient(90deg, #ff5f8f, #ffa04d, #ffd93b, #5fd67a, #45b8ff, #9a6bff, #ff5f8f);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)) drop-shadow(0 3px 10px rgba(255, 150, 200, .45));
  animation: newRecordRainbow 2.2s linear infinite, newRecordGlow 1.2s ease-in-out infinite alternate;
}
.overlay-gameover.result-mode.is-new-record #start-title::before,
.overlay-gameover.result-mode.is-new-record #start-title::after {
  content: "✦";
  position: absolute;
  top: 50%;
  font-size: .55em;
  color: #ffd93b;
  -webkit-text-fill-color: #ffd93b;
  text-shadow: 0 0 8px #fff, 0 0 14px #ffb3d1;
  animation: newRecordTwinkle 1.1s ease-in-out infinite;
}
.overlay-gameover.result-mode.is-new-record #start-title::before { left: -1.1em; transform: translateY(-80%); }
.overlay-gameover.result-mode.is-new-record #start-title::after { right: -1.1em; transform: translateY(-20%); animation-delay: .55s; color: #8fd8ff; -webkit-text-fill-color: #8fd8ff; }

@keyframes newRecordRainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes newRecordGlow {
  from { filter: drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 3px 8px rgba(255,150,200,.35)); }
  to { filter: drop-shadow(0 0 10px rgba(255,255,255,1)) drop-shadow(0 3px 16px rgba(160,140,255,.55)); }
}
@keyframes newRecordTwinkle {
  0%, 100% { opacity: .25; scale: .7; }
  50% { opacity: 1; scale: 1.25; }
}
@keyframes newRecordPop {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes newRecordFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .overlay-gameover.result-mode.is-new-record #start-title,
  .overlay-gameover.result-mode.is-new-record #start-title::before,
  .overlay-gameover.result-mode.is-new-record #start-title::after,
  .overlay-gameover.result-mode.is-new-record .result-newrecord { animation: none; }
}

/* v80 高い位置のウルトラレインボーポテチ通過中は上部HUDを薄くする */
.in-game-ui { transition: opacity .25s ease; }
.in-game-ui.hud-dim { opacity: .28; }

/* =========================================================
   v84 スマホ対応（縦・横）
   ========================================================= */
html, body { overscroll-behavior: none; }
.control-button, .primary-button, .home-button, .sound-toggle, .theme-toggle, .augment-card { touch-action: manipulation; }

@media (max-width: 760px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  /* HUD：1行のコンパクト表示 */
  .in-game-ui {
    position: absolute !important;
    inset: 6px 6px auto 6px !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    pointer-events: none;
    z-index: 4;
  }
  .in-game-ui-row { display: block !important; gap: 0 !important; }
  .game-user-badge { display: none !important; }
  .scoreboard-pop {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 2px 8px rgba(80,100,140,.12) !important;
    backdrop-filter: blur(4px);
  }
  .scoreboard-pop .game-stat {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .scoreboard-pop .game-stat-head { display: flex !important; gap: 0 !important; margin: 0 !important; }
  .scoreboard-pop .game-stat-head span { display: none !important; }
  .scoreboard-pop .game-stat-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; }
  .scoreboard-pop .game-stat strong {
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .build-pop {
    align-self: flex-start;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    max-width: 60% !important;
    min-height: 0 !important;
    transform: none !important;
  }
  .build-pop-title { display: none !important; }
  .build-list-ingame { gap: 2px !important; min-height: 0 !important; }
  .build-list-ingame img, .build-list-ingame .build-item-icon { width: 14px !important; height: 14px !important; }
  .build-list-ingame * { font-size: 9px !important; line-height: 1.2 !important; }

  /* HOME・リザルト：画面いっぱいのスクロール可能な画面にする */
  #start-overlay:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #eef7ff, #fff5fa) !important;
  }
  #start-overlay .overlay-inner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: center !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  /* タッチ操作ではキー設定は不要。サウンド・ダークモードのボタンだけ残す */
  .start-keybind-box { width: 100% !important; margin: 10px auto !important; padding: 0 !important; }
  .start-keybind-box .keybind-heading > div:first-child,
  .start-keybind-box #keybind-status,
  .start-keybind-box .keybind-grid,
  .start-keybind-box .menu-key-note,
  .start-keybind-box #reset-keybinds { display: none !important; }
  .start-keybind-box .keybind-heading { justify-content: center !important; margin: 0 !important; }
  .keybind-heading-actions { justify-content: center; }
  .start-feature-grid, .start-action-badges { display: none !important; }
  #start-press-hint { display: none !important; }
  #start-title { font-size: clamp(18px, 5.2vw, 26px) !important; line-height: 1.35 !important; }
  #start-description { font-size: 12px !important; line-height: 1.6 !important; }
  .menu-name-form { width: 100% !important; max-width: 420px !important; padding: 10px !important; }
  .menu-name-row { flex-wrap: nowrap !important; gap: 6px !important; }
  .menu-name-row input { min-width: 0 !important; font-size: 16px !important; }
  .result-action-row { gap: 10px !important; flex-wrap: wrap; justify-content: center; }
  .start-button-game { min-width: 180px !important; min-height: 52px !important; font-size: 18px !important; }

  /* 能力選択：画面いっぱい・縦に並べる */
  #upgrade-overlay:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    display: block !important;
  }
  #upgrade-overlay .upgrade-box {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    overflow: visible !important;
  }
  #upgrade-overlay .upgrade-heading {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(320px, 80%) !important;
    margin: 0 auto !important;
  }
  #upgrade-overlay .upgrade-title-logo { width: 100% !important; height: auto !important; }
  #upgrade-overlay .upgrade-cards {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }
  #upgrade-overlay .augment-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    text-align: left !important;
    padding: 12px 14px !important;
    transform: none !important;
  }
  #upgrade-overlay .augment-card .augment-icon-wrap {
    grid-column: 1; grid-row: 1 / span 3;
    width: 64px !important; height: 64px !important; margin: 0 !important;
  }
  #upgrade-overlay .augment-card .augment-icon-image { width: 64px !important; height: 64px !important; }
  #upgrade-overlay .augment-card .augment-name { grid-column: 2; font-size: 16px !important; margin: 0 !important; }
  #upgrade-overlay .augment-card .augment-level { grid-column: 2; font-size: 11px !important; margin: 0 !important; position: static !important; }
  #upgrade-overlay .augment-card .augment-desc { grid-column: 2; font-size: 12px !important; line-height: 1.45 !important; margin: 0 !important; }
  #upgrade-overlay .augment-card .augment-hotkey,
  #upgrade-overlay .augment-card .augment-pick,
  #upgrade-overlay .augment-card .ability-card-corner { display: none !important; }
  #upgrade-overlay .augment-card .augment-select-mark { top: 8px !important; right: 8px !important; left: auto !important; }

  /* 操作ボタン */
  .mobile-controls { display: grid !important; }
  .control-button { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
}

/* ---- 縦画面 ---- */
@media (max-width: 760px) and (orientation: portrait) {
  .app-shell { padding: calc(6px + env(safe-area-inset-top)) 8px 12px !important; }
  .topbar { min-height: 0 !important; height: auto !important; padding: 2px 0 6px !important; margin: 0 !important; }
  .title-logo-image { width: min(200px, 56vw) !important; height: auto !important; }
  .game-layout { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .game-column { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; }
  .game-frame {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }
  .mobile-gesture-help { display: block !important; font-size: 11px !important; padding: 4px 8px !important; }
  .mobile-controls { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .control-button { min-height: 84px !important; font-size: 22px !important; border-radius: 20px !important; }
  .ranking-panel { width: 100% !important; }
}

/* ---- 横画面（スマホ） ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .app-shell { padding: 0 !important; max-width: none !important; }
  .topbar, .footer, .mobile-gesture-help { display: none !important; }
  .game-layout { display: block !important; }
  .game-column { display: block !important; width: 100% !important; }
  .game-frame {
    width: min(100vw, calc(100vh * 16 / 9)) !important;
    width: min(100vw, calc(100svh * 16 / 9)) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
  }
  .ranking-panel { width: min(640px, 94vw) !important; margin: 16px auto !important; }
  /* ボタンは画面の左右下に半透明で重ねる */
  .mobile-controls {
    position: fixed !important;
    inset: auto 0 calc(10px + env(safe-area-inset-bottom)) 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 calc(12px + env(safe-area-inset-left)) 0 calc(12px + env(safe-area-inset-right)) !important;
    pointer-events: none;
    z-index: 900;
  }
  .mobile-controls .control-button {
    pointer-events: auto;
    width: 92px !important;
    height: 92px !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    opacity: .6;
  }
  .mobile-controls .duck-button { order: 1; }
  .mobile-controls .jump-button { order: 2; }
  body:not(.is-playing) .mobile-controls { display: none !important; }
  body.is-playing { overflow: hidden !important; }
}

/* v84 ダークモード切替ボタン（サウンドボタンと同じ形） */
.theme-toggle {
  border: 1px solid #d4dff0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: #5c6f97;
  background: rgba(255,255,255,.85);
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle.is-on { color: #fff; background: linear-gradient(180deg, #6f7fd8, #4f5fb8); border-color: #6f7fd8; }
@media (max-width: 720px) { .theme-toggle { font-size: 9px; padding: 2px 8px; } }

/* v84 スマホ対応：微調整 */
@media (max-width: 760px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  .scoreboard-pop .game-stat strong::before,
  .scoreboard-pop .game-stat strong::after,
  .scoreboard-pop .game-stat::before,
  .scoreboard-pop .game-stat::after { display: none !important; content: none !important; }
  .scoreboard-pop .game-stat + .game-stat { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
  .scoreboard-pop .game-stat strong { display: inline-block !important; font-size: 13px !important; }
  .scoreboard-pop .game-stat-icon { flex: 0 0 20px !important; }

  /* リザルト */
  .overlay-gameover.result-mode #start-title { font-size: clamp(22px, 7vw, 34px) !important; letter-spacing: .06em !important; white-space: nowrap; }
  .overlay-gameover.result-mode.is-new-record #start-title { font-size: clamp(22px, 7vw, 34px) !important; }
  .overlay-gameover.result-mode.is-new-record #start-title::before { left: -.9em; }
  .overlay-gameover.result-mode.is-new-record #start-title::after { right: -.9em; }
  .overlay-gameover.result-mode .result-score-panel { flex-wrap: wrap !important; gap: 8px 18px !important; width: 100% !important; }
  .overlay-gameover.result-mode .result-stat-icon { width: 40px !important; height: 40px !important; }
  .overlay-gameover.result-mode .result-stat strong { font-size: clamp(30px, 10vw, 44px) !important; }
  .overlay-gameover.result-mode .result-scene { min-height: 0 !important; max-height: none !important; }
  .overlay-gameover.result-mode .overlay-character { width: min(260px, 70vw) !important; max-height: 130px !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #start-description { display: none !important; }
  /* 能力選択：横画面は3列 */
  #upgrade-overlay .upgrade-box { justify-content: flex-start !important; gap: 6px !important; padding-top: 6px !important; }
  #upgrade-overlay .upgrade-heading { width: min(260px, 36vw) !important; }
  #upgrade-overlay .upgrade-cards { grid-template-columns: repeat(3, 1fr) !important; max-width: 820px !important; }
  #upgrade-overlay .augment-card {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    padding: 10px 8px !important;
  }
  #upgrade-overlay .augment-card .augment-icon-wrap { grid-column: 1; grid-row: auto; width: 56px !important; height: 56px !important; }
  #upgrade-overlay .augment-card .augment-icon-image { width: 56px !important; height: 56px !important; }
  #upgrade-overlay .augment-card .augment-name,
  #upgrade-overlay .augment-card .augment-level,
  #upgrade-overlay .augment-card .augment-desc { grid-column: 1; }
  #upgrade-overlay .augment-card .augment-desc { font-size: 11px !important; }
}
@media (max-width: 760px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  html, body { height: auto !important; overflow-y: auto !important; }
  .app-shell { height: auto !important; min-height: 0 !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body.is-playing { overflow: hidden !important; }
}

/* =========================================================
   v84 ダークモード（html.theme-dark）
   ========================================================= */
html.theme-dark {
  --bg: #12151f;
  --panel: #1d2233;
  --panel-2: #232a3f;
  --line: #3a4466;
  --text: #dfe6fb;
  --muted: #a3afd2;
  color-scheme: dark;
}
html.theme-dark,
html.theme-dark body {
  background-color: #12151f !important;
  color: #dfe6fb;
}
html.theme-dark body {
  background-image:
    linear-gradient(rgba(120, 140, 200, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 140, 200, .07) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
html.theme-dark .boot-splash {
  color: #cdd6f4 !important;
  background: radial-gradient(circle at 50% 28%, rgba(120,110,200,.25) 0%, rgba(0,0,0,0) 58%), linear-gradient(135deg, #141827 0%, #1a1f33 50%, #24192a 100%) !important;
}
html.theme-dark .panel,
html.theme-dark .ranking-panel,
html.theme-dark .login-panel {
  background: linear-gradient(180deg, rgba(31,36,54,.96), rgba(25,29,45,.96)) !important;
  border-color: #3a4466 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.35) !important;
  color: #dfe6fb;
}
html.theme-dark .panel h2, html.theme-dark .panel h3 { color: #dfe6fb !important; }
html.theme-dark .game-frame { background: #1a1f30 !important; }
html.theme-dark:not(.has-dark-stage) #game-canvas { filter: brightness(.86) saturate(.95); }

/* HUD */
html.theme-dark .scoreboard-pop,
html.theme-dark .game-user-badge,
html.theme-dark .build-pop {
  background: rgba(22, 26, 40, .78) !important;
  border-color: rgba(90, 104, 150, .6) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
}
html.theme-dark .game-stat { background: transparent !important; border-color: rgba(90,104,150,.35) !important; }
html.theme-dark #score-label { color: #9fb8ff !important; }
html.theme-dark #coin-label { color: #f0b98a !important; }
html.theme-dark #upgrade-label { color: #c3aefc !important; }
html.theme-dark #best-label { color: #8fe0b9 !important; }
html.theme-dark #current-username,
html.theme-dark .build-list-ingame,
html.theme-dark .build-list-ingame * { color: #dfe6fb !important; }

/* HOME / リザルト（オーバーレイ） */
html.theme-dark #start-overlay,
html.theme-dark #start-overlay .overlay-inner {
  background: linear-gradient(180deg, #161a28 0%, #1b1a2c 60%, #221a2b 100%) !important;
}
html.theme-dark #start-overlay .overlay-inner::before,
html.theme-dark #start-overlay .overlay-inner::after { opacity: .18 !important; }
html.theme-dark #start-overlay h2,
html.theme-dark #start-overlay h3,
html.theme-dark #start-overlay label,
html.theme-dark #start-overlay strong { color: #e3e9ff !important; }
html.theme-dark #start-overlay p,
html.theme-dark #start-overlay .eyebrow,
html.theme-dark .start-press-hint,
html.theme-dark .menu-key-note { color: #a9b4d8 !important; }
html.theme-dark #menu-name-status.is-error { color: #ff9dbd !important; }
html.theme-dark .menu-name-form,
html.theme-dark .start-keybind-box,
html.theme-dark .start-feature-card,
html.theme-dark .start-action-badge {
  background: rgba(35, 41, 62, .9) !important;
  border-color: #3a4466 !important;
  box-shadow: none !important;
}
html.theme-dark input[type="text"] {
  background: #141826 !important;
  color: #e3e9ff !important;
  border-color: #6b5f2e !important;
}
html.theme-dark input[type="text"]::placeholder { color: #7f89ad !important; }
html.theme-dark .keybind-button,
html.theme-dark .keybind-action,
html.theme-dark .home-button,
html.theme-dark .icon-button,
html.theme-dark .bgm-volume,
html.theme-dark .theme-toggle:not(.is-on),
html.theme-dark .sound-toggle.is-off {
  background: #262d45 !important;
  color: #d4dcf7 !important;
  border-color: #46507a !important;
  box-shadow: none !important;
}
html.theme-dark .text-button { color: #aab6e0 !important; }
html.theme-dark .bgm-volume * { color: #d4dcf7 !important; }
html.theme-dark .overlay-gameover.result-mode .result-stat strong { color: #a9c0ff !important; text-shadow: none !important; }
html.theme-dark .overlay-gameover.result-mode .result-stat-tea strong { color: #f0b98a !important; }
html.theme-dark .overlay-gameover.result-mode .result-stat-label { color: #a3afd2 !important; }
html.theme-dark .result-player-speech,
html.theme-dark .result-enemy-speech {
  background: #262d45 !important;
  color: #e3e9ff !important;
  border-color: #46507a !important;
}
html.theme-dark .overlay-gameover.result-mode.is-new-record #start-title {
  filter: drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(200,160,255,.45)) !important;
}

/* 能力選択 */
html.theme-dark #upgrade-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, .45);
  pointer-events: none;
  z-index: 0;
}
html.theme-dark #upgrade-overlay .upgrade-box { position: relative; z-index: 1; }
html.theme-dark .augment-card,
html.theme-dark .augment-card.bronze,
html.theme-dark .augment-card.silver {
  background: linear-gradient(180deg, rgba(36,42,64,.97), rgba(28,33,52,.97)) !important;
  border-color: #4a5582 !important;
}
html.theme-dark .augment-card.gold {
  background: linear-gradient(180deg, rgba(58,50,30,.97), rgba(40,35,24,.97)) !important;
  border-color: #c9a640 !important;
}
html.theme-dark .augment-name { color: #e6ecff !important; }
html.theme-dark .augment-desc { color: #b7c1e3 !important; }
html.theme-dark .augment-level { color: #ff9dc4 !important; background: rgba(255,157,196,.12) !important; }
html.theme-dark .augment-hotkey { background: #262d45 !important; color: #d4dcf7 !important; border-color: #46507a !important; }

/* ランキング */
html.theme-dark .ranking-item {
  background: linear-gradient(180deg, rgba(38,45,69,.95), rgba(31,37,57,.95)) !important;
  border-color: #3f4970 !important;
  box-shadow: none !important;
}
html.theme-dark .ranking-item.me { border-color: #d98ab4 !important; }
html.theme-dark .rank-name { color: #e6ecff !important; }
html.theme-dark .rank-label { color: #9aa6cc !important; }
html.theme-dark .rank-score { color: #a9c0ff !important; }
html.theme-dark .rank-number-badge { background: #2d3553 !important; color: #d4dcf7 !important; }
html.theme-dark .ranking-status { color: #a3afd2 !important; }
html.theme-dark .ranking-corner { opacity: .55; }

/* スマホ操作・その他 */
html.theme-dark .mobile-gesture-help {
  background: rgba(30,35,52,.85) !important;
  color: #a9b4d8 !important;
  border-color: #3a4466 !important;
}
html.theme-dark .footer { color: #7f89ad !important; }
html.theme-dark .muted { color: #a3afd2; }
@media (max-width: 760px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  html.theme-dark #start-overlay:not(.hidden) { background: linear-gradient(180deg, #161a28, #221a2b) !important; }
  html.theme-dark .scoreboard-pop { background: rgba(22, 26, 40, .78) !important; }
}
/* v84 ダーク：強化リスト・リザルト数値の補正 */
html.theme-dark .build-item {
  background: rgba(30, 35, 54, .88) !important;
  border-color: rgba(90, 104, 150, .55) !important;
  box-shadow: none !important;
}
html.theme-dark .build-item-name { color: #e6ecff !important; }
html.theme-dark .build-item-level { color: #ffb3d3 !important; background: rgba(255,157,196,.16) !important; }
html.theme-dark #start-overlay .result-stat-score strong { color: #a9c0ff !important; }
html.theme-dark #start-overlay .result-stat-tea strong { color: #f0b98a !important; }
html.theme-dark #start-overlay .result-stat-label { color: #a3afd2 !important; }
@media (max-width: 760px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  html.theme-dark .start-keybind-box { background: transparent !important; border: 0 !important; }
}

/* v85 ダークモード用背景（画像があるときだけ差し替え） */
html.theme-dark.has-dark-ability-bg .upgrade-box {
  background: url('./assets/backgrounds/ability-select-bg-dark.png?v=85') center 48% / cover no-repeat !important;
}
html.theme-dark.has-dark-ability-bg #upgrade-overlay::after { display: none !important; }

/* v86 イベント予告：走行エリアの下、床より下に固定する。 */
.run-event-banner {
  --event-accent: #ffe09a;
  position: absolute;
  z-index: 6;
  inset: auto 3% 2.1%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid var(--event-accent);
  border-left: 5px solid var(--event-accent);
  border-radius: 14px;
  background: rgba(28, 29, 49, .92);
  color: #fff9f3;
  box-shadow: 0 4px 18px rgba(35, 22, 39, .18);
  pointer-events: none;
}
.run-event-copy { display: grid; gap: 3px; min-width: 0; }
#run-event-title { color: var(--event-accent); font-size: clamp(12px, 1.55vw, 21px); line-height: 1.2; }
#run-event-hint { font-size: clamp(9px, 1vw, 13px); line-height: 1.4; }
.run-event-badge { flex-shrink: 0; color: var(--event-accent); font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.run-event-banner.is-warning { border-style: dashed; border-left-style: solid; }
.run-event-banner.hidden,
body:not(.is-playing) .run-event-banner,
body.upgrade-active .run-event-banner { display: none !important; }
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .run-event-banner { inset: auto 2% 1.4%; min-height: 0; padding: 4px 7px; gap: 5px; border-radius: 8px; border-left-width: 3px; }
  .run-event-banner { display: block; }
  .run-event-copy { gap: 1px; }
  #run-event-title { font-size: 11px; padding-right: 56px; }
  #run-event-hint { font-size: 8px; }
  .run-event-badge { position: absolute; right: 7px; top: 5px; font-size: 8px; letter-spacing: 0; }
}


/* =========================================================
   v88 ランキング上の「ほげ主総会」ロゴ
   ========================================================= */
.ranking-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.meeting-banner {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(90, 120, 170, .25));
}
@media (min-width: 1101px) {
  .ranking-column { position: sticky; top: 12px; }
  .ranking-column .ranking-panel { position: static; top: auto; max-height: none; }
}
@media (max-width: 1100px) {
  .meeting-banner { max-width: 420px; margin: 0 auto; }
}
html.theme-dark .meeting-banner { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
@media (max-width: 760px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  .meeting-banner { max-width: 320px; }
}