@font-face {
  font-family: "Aa Pixel SC";
  src: url("/asset-work/assets/fonts/aa-pixel/AaPingPingGuoGuoXiangSuTi-2-web.ttf") format("truetype");
  font-display: block;
}

:root {
  color-scheme: light;
  --surface-bg: oklch(0.977 0.012 82);
  --surface-grid: oklch(0.89 0.018 88);
  --surface-grid-strong: oklch(0.79 0.032 76);
  --surface-panel: oklch(0.992 0.006 80 / 0.94);
  --surface-panel-soft: oklch(0.95 0.018 88);
  --text-main: oklch(0.19 0.035 255);
  --text-muted: oklch(0.42 0.035 248);
  --text-faint: oklch(0.58 0.026 236);
  --line-subtle: oklch(0.78 0.043 82);
  --line-strong: oklch(0.58 0.08 246);
  --accent-primary: oklch(0.5 0.14 248);
  --accent-primary-strong: oklch(0.34 0.12 248);
  --accent-warning: oklch(0.76 0.15 74);
  --accent-success: oklch(0.56 0.12 154);
  --accent-danger: oklch(0.58 0.19 25);
  --settlement-positive: oklch(0.32 0.14 252);
  --settlement-negative: oklch(0.58 0.19 25);
  --status-risk: oklch(0.58 0.19 25);
  --focus-ring: oklch(0.72 0.15 74);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 8px;
  --sidebar: clamp(356px, 20vw, 410px);
  --rail: clamp(420px, 23vw, 480px);
  --bg: var(--surface-bg);
  --grid: var(--surface-grid);
  --grid-strong: var(--surface-grid-strong);
  --panel: var(--surface-panel);
  --panel-soft: var(--surface-panel-soft);
  --ink: var(--text-main);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --line: var(--line-subtle);
  --blue: var(--accent-primary);
  --blue-dark: var(--accent-primary-strong);
  --gold: var(--accent-warning);
  --good: var(--accent-success);
  --danger: var(--accent-danger);
  --focus: var(--focus-ring);
  --font-pixel: "Aa Pixel SC", "Microsoft YaHei", monospace;
  font-family: var(--font-pixel);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-bg: oklch(0.15 0.018 252);
  --surface-grid: oklch(0.245 0 0);
  --surface-grid-strong: oklch(0.345 0 0);
  --surface-panel: oklch(0.2 0.022 252 / 0.95);
  --surface-panel-soft: oklch(0.26 0.026 248);
  --text-main: oklch(0.92 0.026 82);
  --text-muted: oklch(0.75 0.03 84);
  --text-faint: oklch(0.62 0.027 92);
  --line-subtle: oklch(0.47 0.045 250);
  --line-strong: oklch(0.66 0.08 82);
  --accent-primary: oklch(0.76 0.13 78);
  --accent-primary-strong: oklch(0.88 0.07 84);
  --accent-warning: oklch(0.78 0.13 68);
  --accent-success: oklch(0.66 0.12 152);
  --accent-danger: oklch(0.72 0.18 25);
  --settlement-positive: oklch(0.78 0.12 252);
  --settlement-negative: oklch(0.72 0.18 25);
  --status-risk: oklch(0.72 0.18 25);
  --focus-ring: oklch(0.8 0.13 72);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    var(--bg);
  background-size: 12px 12px, 12px 12px, 96px 96px, 96px 96px, auto;
  font-size: 14px;
  line-height: 1.45;
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

button,
input,
audio {
  font: inherit;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-pixel);
}

strong,
button,
input,
textarea,
select {
  font-family: var(--font-pixel);
  letter-spacing: 0;
}

button {
  touch-action: manipulation;
}

@media (pointer: coarse) {
  #app button {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
}

#app,
#app *,
#app *::before,
#app *::after {
  font-family: var(--font-pixel) !important;
  font-synthesis: none;
}

button:focus-visible,
input:focus-visible,
audio:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: 0;
}

#app,
.loading-shell,
.start-shell,
.character-shell,
.game-shell {
  min-height: 100dvh;
}

.loading-shell,
.start-shell,
.character-shell {
  display: grid;
  place-items: center;
  padding: 18px;
}

.loading-shell {
  color: white;
  background: #000;
  overflow: hidden;
}

.loading-panel,
.hero-copy,
.start-panel,
.character-card,
.profile-card,
.course-card,
.record-panel,
.mentor-card,
.rail-shortcut,
.action-section,
.music-dock,
.right-entry-panel,
.settings-panel,
.status-console,
.status-board,
.log-hero,
.system-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.loading-panel {
  container-type: inline-size;
  position: relative;
  width: min(920px, 100%);
  aspect-ratio: 920 / 695;
  transform: translateY(-20px);
  color: white;
  text-align: center;
  background: #000;
  border: 5px solid rgb(255 255 255 / 0.36);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-pixel);
}

.loading-brand-mark {
  position: absolute;
  top: 5.3%;
  left: 50%;
  width: 26.593cqw;
  height: 26.593cqw;
  display: block;
  transform: translateX(-50%);
  background: url("/asset-work/assets/images/ui-common/时钟图1.png") center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(5px 5px 0 oklch(1 0 0 / 0.18));
}

.loading-panel h1 {
  position: absolute;
  top: 45.47%;
  left: 50%;
  width: 87.033cqw;
  margin: 0;
  transform: translateX(-50%);
  color: white;
  font-size: 10.87cqw;
  font-weight: 400;
  line-height: 1.048;
  letter-spacing: 0;
  text-shadow: none;
  white-space: nowrap;
}

.loading-panel .kicker {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 40.87cqw;
  margin: 0;
  transform: translateX(-50%);
  color: rgb(192 192 192 / 0.82);
  font-size: 2.609cqw;
  font-weight: 400;
  line-height: 1.142;
  letter-spacing: 0;
  white-space: nowrap;
}

.loading-copy {
  position: absolute;
  top: 66.19%;
  left: 50%;
  width: 61cqw;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
}

.loading-copy p {
  margin: 0;
  color: white;
  font-size: 2.609cqw;
  font-weight: 400;
  line-height: 1.808;
  letter-spacing: 0;
  white-space: nowrap;
}

.loading-copy .loading-copy-primary {
  color: #ff4949;
  font-size: 3.478cqw;
  line-height: 1.356;
}

.hero-text,
.character-header p,
.topbar p,
.empty-text {
  color: var(--muted);
}

.loading-bar {
  position: absolute;
  top: 92%;
  left: 18.901cqw;
  width: 61.538cqw;
  height: 14px;
  padding: 3px;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 5px;
}

.loading-bar span {
  display: block;
  width: 42.623%;
  height: 100%;
  background: white;
  border-radius: 3px;
  box-shadow: 0 0 18px oklch(1 0 0 / 0.35);
}

.start-shell {
  --start-paper: oklch(0.965 0.018 84 / 0.84);
  --start-paper-solid: oklch(0.975 0.014 84 / 0.93);
  --start-panel-ink: oklch(0.17 0.035 252);
  --start-panel-muted: oklch(0.4 0.032 238);
  --start-panel-line: oklch(0.68 0.052 82 / 0.62);
  --start-panel-line-strong: oklch(0.43 0.105 248);
  --start-blue: oklch(0.42 0.145 248);
  --start-blue-soft: oklch(0.62 0.12 248 / 0.18);
  --start-gold: oklch(0.74 0.145 72);
  --start-shadow: oklch(0.19 0.03 250 / 0.2);
  --start-button-bg: linear-gradient(180deg, oklch(1 0.004 84 / 0.86), oklch(0.93 0.018 88 / 0.72));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0.004 84 / 0.94), oklch(0.95 0.02 88 / 0.84));
  --start-button-inner: oklch(1 0 0 / 0.34);
  --start-button-border-hover: oklch(0.48 0.12 248 / 0.86);
  --start-button-flow-soft: oklch(0.74 0.13 72 / 0.16);
  --start-button-flow-strong: oklch(1 0.018 86 / 0.7);
  --start-button-glow: oklch(0.58 0.11 248 / 0.22);
  position: relative;
  min-height: 100dvh;
  place-items: stretch;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--start-panel-ink);
  background: oklch(0.9 0.01 248);
  isolation: isolate;
  image-rendering: auto;
}

:root[data-theme="dark"] .start-shell {
  --start-paper: oklch(0.16 0.018 252 / 0.86);
  --start-paper-solid: oklch(0.18 0.02 252 / 0.94);
  --start-panel-ink: oklch(0.92 0.025 84);
  --start-panel-muted: oklch(0.74 0.028 86);
  --start-panel-line: oklch(0.68 0.04 82 / 0.52);
  --start-panel-line-strong: oklch(0.76 0.11 82);
  --start-blue: oklch(0.74 0.13 78);
  --start-blue-soft: oklch(0.74 0.1 78 / 0.22);
  --start-gold: oklch(0.79 0.13 70);
  --start-shadow: oklch(0.03 0 0 / 0.42);
  --start-button-bg: linear-gradient(180deg, oklch(0.22 0.02 252 / 0.84), oklch(0.13 0.018 252 / 0.74));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.27 0.024 252 / 0.92), oklch(0.17 0.02 252 / 0.84));
  --start-button-inner: oklch(0.94 0.02 84 / 0.14);
  --start-button-border-hover: oklch(0.8 0.1 78 / 0.94);
  --start-button-flow-soft: oklch(0.82 0.11 72 / 0.2);
  --start-button-flow-strong: oklch(0.96 0.026 84 / 0.46);
  --start-button-glow: oklch(0.74 0.11 78 / 0.3);
  background: oklch(0.11 0.014 252);
}

.start-shell::before,
.start-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.start-shell::before {
  z-index: 0;
  background:
    linear-gradient(90deg, oklch(0.95 0.006 248 / 0.08), transparent 44%),
    oklch(0.9 0.01 248);
}

:root[data-theme="dark"] .start-shell::before {
  background:
    linear-gradient(90deg, oklch(0.04 0.01 235 / 0.28), transparent 46%),
    oklch(0.1 0.01 235);
}

.start-shell::after {
  z-index: 1;
  width: 43.5%;
  background:
    radial-gradient(circle at 18% 12%, oklch(1 0 0 / 0.26), transparent 22%),
    linear-gradient(90deg, var(--start-paper-solid) 0%, var(--start-paper) 72%, transparent 100%);
  box-shadow: 22px 0 48px var(--start-shadow);
}

:root[data-theme="dark"] .start-shell::after {
  background:
    radial-gradient(circle at 18% 12%, oklch(1 0 0 / 0.08), transparent 24%),
    linear-gradient(90deg, var(--start-paper-solid) 0%, var(--start-paper) 74%, transparent 100%);
}

.start-scene-art {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.start-scene-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
  filter: saturate(0.98) contrast(0.98);
}

.start-scene-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--start-paper-solid) 0%, color-mix(in oklch, var(--start-paper-solid), transparent 30%) 7%, transparent 22%),
    linear-gradient(180deg, color-mix(in oklch, var(--start-paper-solid), transparent 38%) 0%, transparent 13%, transparent 86%, color-mix(in oklch, var(--start-paper-solid), transparent 40%) 100%);
}

:root[data-theme="dark"] .start-scene-art img {
  opacity: 0.86;
  filter: saturate(0.9) contrast(1.04) brightness(0.7);
}

.start-hero {
  width: 100%;
  min-height: 100dvh;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(520px, 42vw) minmax(360px, 1fr);
  grid-template-rows: auto auto auto minmax(286px, 1fr) auto;
  gap: 14px 32px;
  padding: 48px 48px 28px 58px;
}

.hero-copy {
  display: grid;
  gap: 16px;
  padding: 28px;
}

.start-title-panel {
  grid-column: 1;
  grid-row: 1;
  align-content: start;
  gap: 12px;
  padding: 0 0 0 56px;
  color: var(--start-panel-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.start-title-panel::before,
.start-title-panel::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--start-blue);
  pointer-events: none;
}

.start-title-panel::before {
  left: 18px;
  top: 18px;
  border-top: 7px solid;
  border-left: 7px solid;
}

.start-title-panel::after {
  left: min(39vw, 770px);
  top: 18px;
  border-top: 7px solid;
  border-right: 7px solid;
}

.hero-copy h1,
.character-header h1 {
  font-size: 2.4rem;
}

.title-stack {
  display: grid;
  gap: 6px;
}

.start-title-panel .title-stack {
  position: relative;
  width: max-content;
  max-width: 100%;
  transform: scaleX(0.985);
  transform-origin: left top;
}

.start-brand-mark {
  position: absolute;
  left: min(36vw, 540px);
  top: 18px;
  width: 104px;
  height: 104px;
  display: block;
  background: url("/asset-work/assets/images/ui-common/时钟图1.png") center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(6px 6px 0 oklch(0.2 0.03 248 / 0.16));
}

.start-brand-mark::before,
.start-brand-mark::after {
  content: "";
  position: absolute;
  display: block;
  background: currentColor;
  color: var(--start-gold);
  image-rendering: pixelated;
}

.start-brand-mark::before {
  right: -18px;
  top: 18px;
  width: 7px;
  height: 7px;
  box-shadow: 14px 10px 0 currentColor, -8px 22px 0 var(--start-blue);
}

.start-brand-mark::after {
  left: -18px;
  bottom: 20px;
  width: 10px;
  height: 10px;
  box-shadow: -13px 14px 0 var(--start-blue);
}

.title-stack h1 {
  font-size: 5.65rem;
  font-weight: 900;
  line-height: 1.05;
  text-wrap: balance;
}

.title-stack h1 .title-primary,
.title-stack h1 .title-secondary {
  display: block;
}

.title-stack h1 .title-primary {
  font-size: clamp(4.25rem, 5.25vw, 5.25rem);
  line-height: 0.96;
  color: var(--start-panel-ink);
  text-shadow: 5px 5px 0 oklch(0.72 0.12 72 / 0.22);
  white-space: nowrap;
}

.title-stack h1 .title-secondary {
  margin-top: 8px;
  color: var(--start-blue);
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.08;
}

.title-stack strong {
  font-size: 1.15rem;
}

.english-line,
.kicker {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.start-title-panel .english-line {
  color: var(--start-panel-muted);
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  letter-spacing: 0;
}

.start-signal-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 14px;
}

.start-signal-row span,
.start-signal-row i {
  width: 16px;
  height: 16px;
  display: block;
  background: var(--start-panel-muted);
  opacity: 0.42;
}

.start-signal-row i {
  width: 7px;
  height: 7px;
  opacity: 0.32;
}

.intro-box {
  max-width: 62ch;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.start-actions,
.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.theme-chip,
.auto-chip {
  width: max-content;
  padding: 5px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.start-panel {
  display: grid;
  align-content: center;
  padding: 20px;
}

.start-entry-panel {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 3;
  padding: 0;
  color: var(--start-panel-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.start-main-actions {
  display: grid;
  gap: 14px;
}

.start-entry-button,
.start-small-card,
.start-leaderboard-panel,
.start-achievement-panel,
.start-about-panel,
.start-ready-panel,
.start-toolbar-button {
  color: var(--start-panel-ink);
  background: var(--start-paper-solid);
  border: 1px solid var(--start-panel-line);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14), 0 10px 24px var(--start-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
  backdrop-filter: blur(10px) saturate(1.06);
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-link-button,
.start-achievement-tile {
  cursor: pointer;
  transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
  will-change: transform;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-link-button,
.start-achievement-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile {
  background: var(--start-button-bg);
  box-shadow:
    inset 0 0 0 1px var(--start-button-inner),
    0 10px 24px var(--start-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  backdrop-filter: blur(16px) saturate(1.18);
}

.start-entry-button > *,
.start-small-card > *,
.start-toolbar-button > *,
.start-link-button > *,
.start-achievement-tile > * {
  position: relative;
  z-index: 1;
}

.start-entry-button::after,
.start-small-card::after,
.start-toolbar-button::after,
.start-link-button::after,
.start-achievement-tile::after {
  content: "";
  position: absolute;
  inset: -24% auto -24% -72%;
  width: 72%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--start-button-flow-soft) 30%,
    var(--start-button-flow-strong) 50%,
    var(--start-button-flow-soft) 70%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-28%) skewX(-16deg);
  transition: opacity 120ms ease-out;
}

.start-entry-button:hover:not(:disabled)::after,
.start-small-card:hover::after,
.start-toolbar-button:hover::after,
.start-link-button:hover::after,
.start-achievement-tile:hover::after {
  opacity: 0.86;
  animation: startButtonFlowSoft 1080ms ease-out forwards;
}

.start-entry-button {
  width: min(590px, 100%);
  min-height: 112px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 44px;
  gap: 20px;
  align-items: center;
  padding: 18px 30px 18px 38px;
  text-align: left;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}

.start-entry-button.is-primary {
  --start-button-bg: linear-gradient(135deg, oklch(0.2 0.045 248 / 0.96), oklch(0.28 0.09 248 / 0.9) 52%, oklch(0.18 0.03 252 / 0.94));
  --start-button-bg-hover: linear-gradient(135deg, oklch(0.24 0.05 248 / 0.98), oklch(0.33 0.1 248 / 0.94) 52%, oklch(0.2 0.035 252 / 0.96));
  --start-button-inner: oklch(0.94 0.02 84 / 0.16);
  --start-button-flow-soft: oklch(0.82 0.12 72 / 0.22);
  --start-button-flow-strong: oklch(0.98 0.028 82 / 0.54);
  min-height: 146px;
  color: oklch(0.95 0.004 248);
  border-color: oklch(0.76 0.09 76 / 0.76);
}

:root[data-theme="dark"] .start-entry-button.is-primary {
  border-color: oklch(0.88 0.016 248 / 0.78);
  box-shadow: inset 0 0 0 1px oklch(0.9 0.02 248 / 0.12), 0 0 18px oklch(0.68 0.12 252 / 0.3);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover {
  background: var(--start-button-bg-hover);
  border-color: var(--start-button-border-hover);
  box-shadow:
    inset 0 0 0 1px var(--start-button-inner),
    0 16px 30px var(--start-shadow),
    0 0 16px var(--start-button-glow);
  transform: translateY(-3px);
}

.start-entry-button.is-primary:hover:not(:disabled) {
  border-color: oklch(0.9 0.035 248 / 0.92);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.2),
    0 14px 30px var(--start-shadow),
    0 0 18px var(--start-button-glow);
}

.start-link-button:hover {
  color: var(--start-panel-line-strong);
  transform: translateY(-1px);
}

.start-entry-button:active:not(:disabled),
.start-small-card:active,
.start-toolbar-button:active,
.start-link-button:active,
.start-achievement-tile:active {
  transform: translateY(0) scale(0.996);
  transition-duration: 120ms;
}

.start-entry-button:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.start-entry-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--start-blue);
  background: oklch(1 0 0 / 0.45);
  border: 2px solid currentColor;
  font-family: var(--font-pixel);
  font-weight: 800;
  line-height: 1;
}

.start-entry-button.is-primary .start-entry-icon {
  color: oklch(0.94 0.004 248);
  background: transparent;
  border-color: currentColor;
}

.start-entry-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.start-entry-copy strong {
  font-size: 1.72rem;
  line-height: 1.15;
}

.start-entry-copy em {
  color: inherit;
  font-size: 0.95rem;
  font-style: normal;
  opacity: 0.78;
}

.start-entry-arrow {
  position: relative;
  width: 34px;
  height: 34px;
  color: var(--start-blue);
  font-size: 0;
}

.start-entry-arrow::before,
.start-entry-arrow::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.start-entry-arrow::before {
  left: 4px;
  top: 15px;
  width: 22px;
  height: 4px;
  background: currentColor;
  box-shadow: -6px 0 0 oklch(1 0 0 / 0.3);
}

.start-entry-arrow::after {
  right: 2px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  transform: rotate(45deg);
}

.start-secondary-grid {
  grid-column: 1;
  grid-row: 3;
  width: min(590px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.start-small-card {
  min-height: 92px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  text-align: left;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.start-small-card.is-warm {
  --start-button-bg: linear-gradient(135deg, oklch(0.5 0.12 46 / 0.93), oklch(0.34 0.08 38 / 0.9));
  --start-button-bg-hover: linear-gradient(135deg, oklch(0.56 0.13 48 / 0.96), oklch(0.38 0.09 40 / 0.92));
  --start-button-border-hover: oklch(0.9 0.12 62 / 0.95);
  --start-button-flow-soft: oklch(0.82 0.12 58 / 0.24);
  --start-button-flow-strong: oklch(0.98 0.04 76 / 0.6);
  --start-button-glow: oklch(0.66 0.13 48 / 0.36);
  color: oklch(0.98 0.02 72);
  border-color: oklch(0.82 0.14 58);
}

.start-small-card strong,
.start-small-card em {
  display: block;
  overflow-wrap: anywhere;
}

.start-small-card strong {
  font-size: 1.05rem;
}

.start-small-card em {
  margin-top: 6px;
  color: inherit;
  font-size: 0.76rem;
  font-style: normal;
  opacity: 0.72;
}

.start-small-icon,
.start-feature-icon,
.start-toolbar-icon,
.start-achievement-icon {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--start-blue);
  background: oklch(1 0 0 / 0.36);
  border: 1px solid var(--start-panel-line);
}

.start-small-icon {
  width: 50px;
  height: 50px;
}

.start-about-panel {
  position: absolute;
  top: min(25.2vh, 292px);
  left: clamp(620px, 34.2vw, 760px);
  width: min(540px, 30vw);
  min-height: 494px;
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 22px 30px 18px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.start-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--start-panel-line);
}

.start-panel-head.has-icon {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}

.start-panel-head.has-icon h2 {
  min-width: 0;
}

.start-panel-head h2 {
  font-size: 1.25rem;
}

.start-panel-head span,
.start-panel-head em {
  color: var(--start-panel-muted);
  font-family: var(--font-pixel);
  font-size: 0.82rem;
}

.start-panel-title-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 3px;
  background: oklch(1 0 0 / 0.34);
  border: 1px solid var(--start-panel-line);
  border-radius: 4px;
}

.start-panel-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.start-about-copy {
  display: grid;
  gap: 9px;
  max-width: 50ch;
  color: var(--start-panel-ink);
  font-size: 0.88rem;
  line-height: 1.75;
}

.start-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.start-feature-tags span {
  padding: 4px 10px;
  color: var(--start-panel-muted);
  background: oklch(1 0 0 / 0.28);
  border: 1px solid var(--start-panel-line);
  border-radius: 6px;
  font-size: 0.78rem;
}

.start-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.start-feature-grid div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.start-feature-icon {
  width: 42px;
  height: 42px;
  font-size: 0.8rem;
}

.start-feature-icon img,
.start-small-icon img {
  transform: scale(0.9);
}

.start-feature-grid strong {
  font-size: 0.78rem;
}

.start-feature-grid em {
  color: var(--start-panel-muted);
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  font-style: normal;
}

.start-leaderboard-panel,
.start-achievement-panel {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  min-height: 286px;
  padding: 18px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.start-leaderboard-panel {
  width: 400px;
}

.start-achievement-panel {
  width: 340px;
  justify-self: start;
  margin-left: 410px;
}

.start-leaderboard-empty {
  display: grid;
  gap: 8px;
  min-height: 146px;
  margin-top: 12px;
  padding: 14px;
  align-content: center;
  background: oklch(1 0 0 / 0.3);
  border: 1px dashed var(--start-panel-line);
  border-radius: 6px;
}

.start-leaderboard-empty strong {
  color: var(--start-panel-ink);
}

.start-leaderboard-empty p,
.start-leaderboard-empty span {
  color: var(--start-panel-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.start-link-button {
  justify-self: end;
  margin-top: 2px;
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
  color: var(--start-blue);
  background: transparent;
  border: 0;
  font-weight: 800;
}

.inline-pixel-arrow {
  position: relative;
  width: 18px;
  height: 14px;
  display: inline-block;
  color: currentColor;
}

.inline-pixel-arrow::before,
.inline-pixel-arrow::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.inline-pixel-arrow::before {
  left: 0;
  top: 5px;
  width: 13px;
  height: 3px;
  background: currentColor;
}

.inline-pixel-arrow::after {
  right: 0;
  top: 2px;
  width: 9px;
  height: 9px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

.start-entry-panel .profile-form {
  width: min(590px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px 26px;
  background: var(--start-paper-solid);
  border: 1px solid var(--start-panel-line);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12), 0 10px 24px var(--start-shadow);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.start-entry-panel .field span {
  color: var(--start-panel-muted);
}

.start-entry-panel .field input {
  min-height: 48px;
  color: var(--start-panel-ink);
  background: oklch(1 0 0 / 0.45);
  border-color: var(--start-panel-line);
}

:root[data-theme="dark"] .start-entry-panel .field input {
  background: oklch(0.08 0.01 235 / 0.54);
}

.start-achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.start-achievement-tile {
  min-height: 58px;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8px;
  background: oklch(1 0 0 / 0.26);
  border: 1px solid var(--start-panel-line);
  border-radius: 6px;
}

.start-achievement-icon {
  width: 34px;
  height: 34px;
  font-size: 0.82rem;
}

.start-achievement-tile i {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 13px;
  height: 13px;
  color: var(--start-blue);
  border: 2px solid currentColor;
  font-style: normal;
  font-weight: 900;
}

.start-achievement-tile i::before,
.start-achievement-tile i::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.start-achievement-tile i::before {
  left: 3px;
  top: -7px;
  width: 7px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
}

.start-achievement-tile i::after {
  left: 4px;
  top: 4px;
  width: 3px;
  height: 3px;
  background: currentColor;
}

.start-achievement-panel p {
  margin-top: 10px;
  color: var(--start-panel-muted);
  font-size: 0.76rem;
  text-align: center;
}

.start-ready-panel {
  position: absolute;
  right: 46px;
  bottom: 52px;
  width: 292px;
  display: grid;
  gap: 10px;
  padding: 22px 28px 20px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.start-ready-panel span {
  color: var(--start-panel-muted);
  font-family: var(--font-pixel);
  font-size: 0.88rem;
}

.start-ready-panel strong {
  color: oklch(0.34 0.055 250);
  font-family: var(--font-pixel);
  font-size: 2.7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

:root[data-theme="dark"] .start-ready-panel strong {
  color: oklch(0.86 0.012 248);
}

.start-ready-panel p {
  color: var(--start-panel-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.start-software-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.start-software-row i {
  width: 48px;
  height: 42px;
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr) auto;
  color: oklch(0.33 0.14 252);
  background: oklch(0.9 0.014 248);
  border: 2px solid oklch(0.18 0.02 250);
  border-radius: 6px;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  box-shadow: 3px 3px 0 oklch(0.2 0.02 250 / 0.26);
}

.start-software-row i img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.start-software-row i span {
  font-size: 0.58rem;
  line-height: 1;
}

.start-toolbar {
  position: absolute;
  right: 108px;
  bottom: 24px;
  display: flex;
  gap: 10px;
}

.start-toolbar-button {
  min-width: 150px;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  text-align: left;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.start-toolbar-icon {
  width: 40px;
  height: 40px;
  font-size: 0.72rem;
}

.start-toolbar-button strong {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.start-settings-modal {
  width: min(860px, 100%);
}

.start-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.start-settings-button {
  min-height: 112px;
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 5px 10px;
  padding: 12px;
  text-align: left;
}

.start-settings-button .settings-entry-icon {
  grid-row: 1 / span 3;
  width: 34px;
  height: 34px;
}

.start-settings-button strong,
.start-settings-button em,
.start-settings-button b {
  min-width: 0;
  grid-column: 2;
  overflow-wrap: anywhere;
}

.start-settings-button strong {
  font-size: 0.9rem;
  line-height: 1.25;
}

.start-settings-button em,
.start-settings-button b {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  line-height: 1.28;
}

.start-settings-button b {
  width: fit-content;
  padding: 2px 5px;
  color: var(--blue-dark);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-weight: 700;
}

.start-shell > .music-dock,
.loading-shell > .music-dock {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 5;
  width: min(300px, calc(100vw - 36px));
}

.start-shell > .music-dock {
  left: 38px;
  bottom: 8px;
  width: min(560px, calc(100vw - 520px));
  min-height: 20px;
  display: block;
  padding: 0;
  color: var(--start-panel-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.start-shell > .music-dock::before {
  content: "Tip: 你可以在游戏中随时查看日志、整理时间，给每一周留一点呼吸。";
  display: block;
  font-size: 0.72rem;
}

.start-shell > .music-dock > :not(audio) {
  display: none;
}

.menu-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.profile-form,
.field {
  display: grid;
  gap: 12px;
}

.field {
  gap: 6px;
}

.field span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.field input {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.pixel-button,
.mini-button,
.file-button {
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  gap: 8px;
  padding: 9px 13px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.26), transparent 62%),
    var(--panel);
  border: 1px solid oklch(0.74 0.04 248 / 0.78);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.26),
    0 2px 0 oklch(0.55 0.035 248 / 0.32);
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
}

.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover {
  background: var(--panel-soft);
  border-color: var(--blue);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    0 3px 0 oklch(0.43 0.12 253 / 0.24);
  transform: translateY(-1px);
}

.pixel-button.is-primary {
  color: white;
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.pixel-button.is-danger,
.mini-button.is-danger {
  color: white;
  background: var(--danger);
  border-color: var(--danger);
}

.mini-button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 0.82rem;
  line-height: 1.25;
}

.icon-mini-button {
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  justify-items: center;
}

.icon-mini-button .settings-entry-icon {
  grid-row: auto;
  width: 24px;
  height: 24px;
}

.icon-mini-button > span:last-child {
  min-width: 0;
  justify-self: center;
  overflow-wrap: anywhere;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.character-shell {
  align-content: start;
  place-items: stretch;
  padding: 18px;
  overflow: auto;
}

.character-header {
  width: min(1180px, 100%);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto 14px;
}

.character-grid {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto;
}

.character-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  padding: 14px;
}

.character-card-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.character-avatar {
  width: 68px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 4px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 18%), var(--panel-soft));
  border: 1px solid color-mix(in oklch, var(--line), var(--gold) 18%);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--grid-strong);
}

.character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.character-card span,
.profile-card span,
.track-card span,
.music-status {
  color: var(--muted);
  font-size: 0.78rem;
}

.character-card h2 {
  margin-top: 3px;
  font-size: 1.18rem;
}

.character-card-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.mini-attrs,
.side-facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.mini-attrs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-attrs div,
.side-facts div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.mini-attrs dt,
.side-facts dt {
  color: var(--muted);
}

.mini-attrs dt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mini-attrs dt img,
.trait-icon img,
.attribute-label img,
.delta-chip-icon img {
  display: block;
  object-fit: contain;
}

.mini-attrs dt img,
.trait-icon img,
.attribute-label img {
  width: 18px;
  height: 18px;
}

.mini-attrs dd,
.side-facts dd {
  max-width: 68%;
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.trait-block {
  display: grid;
  gap: 6px;
}

.trait-block p {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.trait-icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.game-shell {
  height: 100dvh;
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--rail);
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.12), transparent 42%);
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  pointer-events: none;
}

:root[data-theme="dark"] .game-shell {
  background: linear-gradient(180deg, oklch(0.28 0.018 230 / 0.25), transparent 42%);
}

.ending-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, var(--rail));
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

.ending-stage,
.ending-side {
  min-height: 0;
  display: grid;
  gap: 12px;
}

.ending-stage {
  grid-template-rows: minmax(0, 1fr) auto;
}

.ending-side {
  grid-template-rows: auto minmax(0, 1fr);
}

.ending-copy {
  min-height: 0;
  display: grid;
  align-content: end;
  gap: 16px;
  padding: 28px;
  color: white;
  background:
    linear-gradient(180deg, oklch(0.18 0.04 253 / 0.28), oklch(0.18 0.04 253 / 0.92)),
    url("./assets/studio.svg");
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.ending-copy .kicker,
.ending-copy p {
  color: oklch(0.94 0.008 248);
}

.ending-copy h1 {
  max-width: 16ch;
  font-size: 3rem;
  line-height: 1.1;
  text-wrap: balance;
}

.ending-copy p:last-child {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
}

.ending-summary {
  display: grid;
  gap: 10px;
}

.ending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar,
.main-panel,
.right-rail {
  min-height: 0;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
}

.sidebar {
  grid-template-rows: auto minmax(0, 1fr) minmax(112px, auto);
}

.main-panel {
  width: min(100%, 1024px);
  justify-self: center;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.right-rail {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.blueprint-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 88px;
  padding: 4px 2px;
}

.brand-mark {
  width: 64px;
  height: 64px;
  position: relative;
  display: block;
  font-size: 0;
  background: url("/asset-work/assets/images/ui-common/时钟图2.png") center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(3px 3px 0 var(--grid-strong));
}

.blueprint-lockup strong {
  display: block;
  font-size: 1.85rem;
  line-height: 1;
}

.blueprint-lockup p,
.blueprint-lockup span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.action-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 10px;
  overflow: hidden;
}

.action-groups {
  min-height: 0;
  display: grid;
  overflow: hidden;
  padding-right: 0;
}

.action-group h3 {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.action-grid {
  display: grid;
  gap: 8px;
}

.action-grid-flat {
  height: 100%;
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 5px;
}

.action-button {
  min-height: 44px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  color: var(--ink);
  text-align: center;
  background: var(--panel);
  border: 1px solid oklch(0.76 0.04 248 / 0.82);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.22),
    0 2px 0 oklch(0.62 0.035 248 / 0.34);
  cursor: pointer;
  overflow: hidden;
  transition: background 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
}

.action-button:hover:not(:disabled),
.modal-option:hover:not(:disabled) {
  background: var(--panel-soft);
  border-color: var(--blue);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    0 3px 0 oklch(0.43 0.12 253 / 0.24);
  transform: translateY(-1px);
}

.action-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--blue-dark);
  font-size: 1.35rem;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.action-copy {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.action-copy strong {
  font-size: 0.88rem;
  line-height: 1.15;
}

.action-copy span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.action-copy .action-reason {
  color: var(--danger);
}

.action-copy .action-warning {
  color: oklch(0.42 0.13 60);
  font-weight: 800;
}

:root[data-theme="dark"] .action-copy .action-warning {
  color: var(--gold);
}

.delta-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 6px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.76rem;
  line-height: 1.2;
}

.delta-chip-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.delta-chip-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.delta-chip span,
.delta-chip strong {
  font-variant-numeric: tabular-nums;
}

.delta-chip strong {
  color: var(--blue-dark);
}

.delta-chip.is-negative strong {
  color: var(--danger);
}

.delta-chip.is-positive strong {
  color: var(--blue-dark);
}

.settlement-delta {
  margin-top: 8px;
  justify-content: flex-start;
  gap: 6px;
}

.settlement-delta .delta-chip {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.86rem;
}

.settlement-delta .delta-chip strong {
  color: var(--settlement-positive);
}

.settlement-delta .delta-chip.is-negative strong {
  color: var(--settlement-negative);
}

.music-dock,
.profile-card,
.course-card,
.record-panel,
.right-entry-panel,
.settings-panel,
.system-panel,
.log-hero {
  padding: 12px;
}

.profile-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px 12px;
}

.profile-card .section-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.profile-card .profile-main {
  grid-template-columns: 1fr;
  align-content: start;
}

.profile-card .profile-main > div:last-child {
  min-width: 0;
}

.profile-card .attribute-grid {
  min-width: 0;
}

.music-dock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.sidebar .music-dock {
  max-height: 124px;
  gap: 4px;
  padding: 7px 8px;
}

.sidebar .music-dock .section-head {
  margin-bottom: 0;
}

.music-dock .section-head,
.music-station,
.track-card,
.music-controls,
.music-progress,
.lyric-line,
.music-status {
  grid-column: 1 / -1;
}

.music-station {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.sidebar .music-station {
  display: none;
}

.music-dock audio {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.music-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 7px;
  align-items: center;
}

.sidebar .music-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.sidebar .music-time {
  display: none;
}

.music-time {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.music-progress {
  width: 100%;
  accent-color: var(--blue-dark);
}

.track-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sidebar .track-card {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  padding: 5px 6px;
}

.track-card::before {
  content: "";
  width: 58px;
  aspect-ratio: 1;
  grid-row: 1 / span 2;
  display: block;
  background:
    linear-gradient(180deg, oklch(0.1 0.03 250 / 0.2), oklch(0.1 0.03 250 / 0.62)),
    url("./assets/studio.svg");
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-strong);
  image-rendering: pixelated;
}

.sidebar .track-card::before {
  width: 38px;
}

.track-card strong,
.track-card span {
  min-width: 0;
  grid-column: 2;
  overflow-wrap: anywhere;
}

.file-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.75rem;
}

.sidebar .file-button {
  display: none;
}

.file-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.file-button input {
  display: none;
}

.lyric-line {
  min-height: 44px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  color: var(--blue-dark);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.sidebar .lyric-line {
  min-height: 32px;
  padding: 5px 7px;
}

.lyric-line span {
  display: block;
  animation: lyricRise 260ms ease-out;
}

.lyric-line.is-hidden {
  display: none;
}

.music-status {
  min-height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status-console {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.status-tile {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.status-energy,
.status-pressure {
  grid-column: span 3;
  border-bottom-color: var(--line-strong);
}

.status-money,
.status-gpa {
  grid-column: span 2;
  border-bottom: 0;
}

.status-energy,
.status-money {
  border-right: 1px solid var(--line);
}

.status-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--blue-dark);
  font-size: 1.45rem;
  text-shadow: 1px 1px 0 var(--surface-panel-soft);
}

.status-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.status-copy span {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.status-copy strong,
.status-tile > strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-tile.is-risk .status-copy strong,
.status-tile.is-risk > strong {
  color: var(--status-risk);
}

.status-tile.is-risk .meter-track span {
  background: var(--status-risk);
}

.status-board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.meter-card,
.metric-card,
.balance-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--grid-strong);
}

.meter-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.meter-icon {
  color: var(--blue-dark);
  font-size: 1.2rem;
}

.meter-head span:not(.meter-icon),
.metric-card span,
.balance-card span,
.balance-card em {
  color: var(--muted);
  font-size: 0.82rem;
}

.meter-head strong,
.metric-card strong,
.balance-card strong {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.balance-card strong {
  color: var(--blue-dark);
  font-size: 1.25rem;
}

.balance-card em {
  font-style: normal;
}

.balance-card.is-risk {
  border-color: var(--status-risk);
}

.balance-card.is-risk strong {
  color: var(--status-risk);
}

.meter-track,
.attribute-row div {
  overflow: hidden;
  width: 100%;
  height: 8px;
  background: oklch(0.88 0.01 248);
  border-radius: 999px;
}

:root[data-theme="dark"] .meter-track,
:root[data-theme="dark"] .attribute-row div {
  background: oklch(0.18 0.02 253);
}

.meter-track span,
.attribute-row div span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
  transition: inline-size 180ms ease-out;
}

.meter-pressure .meter-track span {
  background: var(--danger);
}

.status-pressure .meter-track span {
  background: var(--danger);
}

.meter-progress .meter-track span,
.meter-quality .meter-track span {
  background: var(--good);
}

.log-hero {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
}

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

.section-head.compact h2,
.section-head h2 {
  font-size: 1rem;
}

.section-head h2 span,
.section-head span,
.section-head p {
  color: var(--muted);
  font-size: 0.8rem;
}

.clock-line {
  display: grid;
  gap: 3px;
  text-align: right;
}

.clock-line strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.log-tabs {
  display: flex;
  gap: 34px;
  align-items: flex-end;
  min-height: 34px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
}

.log-tabs span {
  min-width: 92px;
  padding: 0 8px 9px;
  color: var(--muted);
  font-weight: 700;
}

.log-tabs .is-active {
  color: var(--ink);
  border-bottom: 3px solid var(--blue-dark);
}

.log-day {
  width: max-content;
  color: var(--ink);
  font-weight: 700;
}

.risk-banner {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  color: white;
  background: var(--danger);
  border-radius: 6px;
}

.log-list,
.review-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}

.log-list li,
.review-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(144px, auto);
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
}

.log-list span,
.log-list em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
}

.log-list p,
.review-item p {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.system-panel {
  min-height: 122px;
  display: grid;
  overflow: hidden;
}

.sidebar .music-status {
  display: none;
}

.system-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(9, minmax(82px, 1fr));
  gap: 10px;
}

.right-entry-grid,
.course-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.system-button {
  min-height: 104px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 10px 8px;
  text-align: center;
}

.system-button.is-minimal {
  min-height: 100%;
  grid-template-rows: 52px auto;
  gap: 6px;
  padding: 11px 8px 10px;
}

.system-button .system-icon {
  color: var(--blue-dark);
  font-size: 2.05rem;
  line-height: 1;
}

.system-button strong {
  font-size: 0.86rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.system-button.is-minimal strong {
  align-self: start;
  font-size: 0.78rem;
  line-height: 1.18;
}

.entry-status {
  display: inline-grid;
  min-height: 20px;
  align-items: center;
  padding: 2px 6px;
  color: var(--blue-dark);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.64rem;
  line-height: 1.2;
}

.system-button em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.right-entry-grid .system-button,
.course-entry-grid .system-button {
  min-height: 88px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  justify-items: start;
  gap: 10px 12px;
  padding: 12px 14px;
  text-align: left;
}

.right-entry-grid .system-button .system-icon,
.course-entry-grid .system-button .system-icon {
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 1.6rem;
}

.right-entry-grid .system-button strong,
.right-entry-grid .system-button .entry-status,
.right-entry-grid .system-button em,
.course-entry-grid .system-button strong,
.course-entry-grid .system-button .entry-status,
.course-entry-grid .system-button em {
  grid-column: 2;
}

.course-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.course-entry-grid .system-button {
  min-height: 78px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  justify-items: start;
  gap: 8px 12px;
  padding: 11px 14px;
  text-align: left;
}

.course-entry-grid .system-button .system-icon {
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 1.6rem;
}

.course-entry-grid .system-button strong,
.course-entry-grid .system-button .entry-status,
.course-entry-grid .system-button em {
  grid-column: 2;
}

.course-entry-grid .system-button::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / span 3;
  width: 14px;
  height: 14px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  opacity: 0.85;
  transform: rotate(45deg);
}

.system-button.entry-placeholder {
  border-style: dashed;
}

.system-button.entry-placeholder em {
  color: var(--danger);
}

.profile-main {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
}

.avatar-block {
  width: 92px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--blue-dark);
  font-size: 1.45rem;
  font-weight: 800;
  padding: 5px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 16%), var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--grid-strong);
}

.avatar-block img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.profile-main strong {
  display: block;
  font-size: 1.2rem;
}

.profile-main p {
  color: var(--muted);
  margin: 4px 0;
}

.attribute-grid {
  display: grid;
  gap: 7px;
}

.attribute-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
}

.attribute-row .attribute-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.attribute-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.course-card {
  display: grid;
  gap: 11px;
}

.course-card h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  text-wrap: balance;
}

.course-progress {
  display: grid;
  gap: 10px;
}

.course-progress > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
}

.course-progress span {
  color: var(--muted);
}

.course-progress strong {
  text-align: right;
}

.review-list {
  max-height: 100%;
}

.review-item {
  grid-template-columns: 1fr;
  gap: 5px;
}

.rail-shortcuts {
  display: grid;
  gap: 10px;
}

.rail-shortcut {
  min-height: 76px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.rail-shortcut:hover:not(:disabled) {
  background: var(--panel-soft);
  border-color: var(--blue);
}

.rail-shortcut-icon {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--blue-dark);
  font-size: 1.55rem;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.rail-shortcut span:not(.rail-shortcut-icon) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.rail-shortcut strong {
  font-size: 1rem;
}

.rail-shortcut em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  overflow-wrap: anywhere;
}

.rail-shortcut b {
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

.mentor-card {
  min-height: 150px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 9px;
  align-content: start;
  padding: 12px;
  overflow: hidden;
}

.mentor-main {
  min-height: 58px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.mentor-avatar {
  width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 800;
  padding: 4px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 14%), var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--grid-strong);
}

.mentor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.mentor-main strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.16;
}

.mentor-main p,
.mentor-main span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.34;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.mentor-main p,
.mentor-task span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.mentor-main p {
  -webkit-line-clamp: 2;
}

.mentor-title {
  color: var(--ink);
  font-weight: 700;
}

.mentor-task {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.mentor-task.has-icon {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.mentor-task-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 3px;
  background: color-mix(in oklch, var(--panel), transparent 16%);
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 8%);
  border-radius: 5px;
}

.mentor-task-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.mentor-task-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mentor-task b {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.22;
  white-space: nowrap;
}

.mentor-task span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
}

.ending-panel {
  display: grid;
  gap: 6px;
  padding: 10px;
  color: white;
  background: var(--blue-dark);
  border-radius: 6px;
}

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

.settings-grid {
  grid-column: 1 / -1;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}

.settings-entry-button {
  min-height: 62px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 3px 9px;
  padding: 8px 10px;
  text-align: left;
}

.settings-entry-icon {
  grid-row: 1 / span 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--blue-dark);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1;
}

.settings-entry-button strong {
  min-width: 0;
  grid-column: 2;
  font-size: 0.78rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.settings-entry-button .entry-status {
  grid-column: 2;
  justify-self: start;
}

.settings-entry-button em {
  min-width: 0;
  grid-column: 2;
  color: var(--muted);
  font-size: 0.64rem;
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.settings-entry-button.entry-placeholder em {
  color: var(--danger);
}

.action-icon,
.system-icon,
.settings-entry-icon,
.status-icon,
.meter-icon {
  --icon-ink: currentColor;
  --icon-fill: oklch(0.72 0.12 252);
  --icon-fill-soft: oklch(0.9 0.03 248);
  position: relative;
  overflow: hidden;
  color: var(--blue-dark);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--panel-soft);
  background-size: 6px 6px, 6px 6px, auto;
  border: 2px solid var(--line);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    2px 2px 0 var(--grid-strong);
  font-size: 0;
  line-height: 1;
  image-rendering: pixelated;
}

.start-entry-button.is-primary .start-entry-icon,
.start-small-card.is-warm .start-small-icon {
  color: oklch(0.94 0.004 248);
  background: oklch(0.1 0.01 235 / 0.22);
  border-color: currentColor;
}

.start-entry-icon::before,
.start-entry-icon::after,
.start-small-icon::before,
.start-small-icon::after,
.start-feature-icon::before,
.start-feature-icon::after,
.start-toolbar-icon::before,
.start-toolbar-icon::after,
.start-achievement-icon::before,
.start-achievement-icon::after,
.action-icon::before,
.action-icon::after,
.system-icon::before,
.system-icon::after,
.settings-entry-icon::before,
.settings-entry-icon::after,
.status-icon::before,
.status-icon::after,
.meter-icon::before,
.meter-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  image-rendering: pixelated;
}

.start-icon-clock::before {
  inset: 11px;
  border: 4px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) 50% 8px / 4px 8px no-repeat,
    linear-gradient(currentColor 0 0) 50% calc(100% - 8px) / 4px 8px no-repeat,
    linear-gradient(currentColor 0 0) 8px 50% / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) calc(100% - 8px) 50% / 8px 4px no-repeat,
    oklch(1 0 0 / 0.12);
}

.start-icon-clock::after {
  left: 35px;
  top: 25px;
  width: 15px;
  height: 22px;
  border-left: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
}

.start-icon-folder::before,
.system-icon-portfolio_resume::before {
  left: 18%;
  top: 30%;
  width: 64%;
  height: 46%;
  border: 3px solid currentColor;
  background: linear-gradient(180deg, oklch(0.83 0.12 82), oklch(0.62 0.12 70));
}

.start-icon-folder::after,
.system-icon-portfolio_resume::after {
  left: 18%;
  top: 22%;
  width: 36%;
  height: 16%;
  border: 3px solid currentColor;
  border-bottom: 0;
  background: oklch(0.88 0.13 88);
}

:is(.start-icon-paper, .start-icon-note, .start-icon-language, .system-icon-author, .system-icon-announcement, .system-icon-language)::before {
  left: 28%;
  top: 16%;
  width: 44%;
  height: 68%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 50% 34% / 55% 3px no-repeat,
    linear-gradient(currentColor 0 0) 50% 52% / 55% 3px no-repeat,
    linear-gradient(currentColor 0 0) 42% 70% / 38% 3px no-repeat,
    oklch(0.96 0.01 248);
}

:is(.start-icon-paper, .start-icon-note, .start-icon-language, .system-icon-author, .system-icon-announcement, .system-icon-language)::after {
  right: 27%;
  top: 16%;
  width: 13%;
  height: 18%;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  background: var(--panel-soft);
}

:is(.start-icon-coffee, .system-icon-coffee)::before {
  left: 24%;
  top: 30%;
  width: 44%;
  height: 38%;
  border: 3px solid currentColor;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, oklch(0.96 0.02 80), oklch(0.78 0.09 52));
}

:is(.start-icon-coffee, .system-icon-coffee)::after {
  right: 18%;
  top: 36%;
  width: 20%;
  height: 22%;
  border: 3px solid currentColor;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

:is(.start-icon-gear, .settings-entry-icon.start-icon-gear)::before {
  inset: 22%;
  border: 4px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) 50% -8px / 5px 14px no-repeat,
    linear-gradient(currentColor 0 0) 50% calc(100% + 8px) / 5px 14px no-repeat,
    linear-gradient(90deg, currentColor 0 0) -8px 50% / 14px 5px no-repeat,
    linear-gradient(90deg, currentColor 0 0) calc(100% + 8px) 50% / 14px 5px no-repeat;
}

:is(.start-icon-gear, .settings-entry-icon.start-icon-gear)::after {
  inset: 38%;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: var(--panel);
}

:is(.start-icon-community, .start-icon-school, .system-icon-community, .system-icon-public_service)::before {
  left: 17%;
  bottom: 18%;
  width: 66%;
  height: 42%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 20% 48% / 8px 18px no-repeat,
    linear-gradient(currentColor 0 0) 50% 48% / 8px 18px no-repeat,
    linear-gradient(currentColor 0 0) 80% 48% / 8px 18px no-repeat,
    oklch(0.87 0.05 220);
}

:is(.start-icon-community, .start-icon-school, .system-icon-community, .system-icon-public_service)::after {
  left: 24%;
  top: 18%;
  width: 52%;
  height: 26%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: currentColor;
}

:is(.start-icon-system, .action-icon-learn_ai_software)::before {
  left: 18%;
  top: 20%;
  width: 64%;
  height: 44%;
  border: 3px solid currentColor;
  background:
    linear-gradient(135deg, oklch(0.63 0.14 255) 0 50%, oklch(0.92 0.03 248) 50%);
}

:is(.start-icon-system, .action-icon-learn_ai_software)::after {
  left: 38%;
  bottom: 16%;
  width: 24%;
  height: 18%;
  border-bottom: 4px solid currentColor;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

:is(.start-icon-event, .system-icon-leaderboard)::before,
:is(.start-icon-trophy, .system-icon-competition, .system-icon-achievements)::before {
  left: 30%;
  top: 18%;
  width: 40%;
  height: 40%;
  border: 3px solid currentColor;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, oklch(0.9 0.15 84), oklch(0.66 0.15 72));
}

:is(.start-icon-event, .system-icon-leaderboard, .start-icon-trophy, .system-icon-competition, .system-icon-achievements)::after {
  left: 36%;
  bottom: 16%;
  width: 28%;
  height: 24%;
  border-bottom: 4px solid currentColor;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

:is(.start-icon-think, .action-icon-site_research)::before {
  left: 20%;
  top: 18%;
  width: 42%;
  height: 42%;
  border: 4px solid currentColor;
  border-radius: 50%;
  background: oklch(0.9 0.03 248 / 0.72);
}

:is(.start-icon-think, .action-icon-site_research)::after {
  right: 20%;
  bottom: 20%;
  width: 24%;
  height: 4px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}

.start-icon-think::before {
  left: 25%;
  top: 14%;
  width: 34%;
  height: 34%;
  border: 4px solid currentColor;
  border-radius: 50% 50% 42% 42%;
  background: oklch(0.86 0.02 82);
}

.start-icon-think::after {
  left: 24%;
  bottom: 16%;
  width: 54%;
  height: 42%;
  border-left: 5px solid currentColor;
  border-bottom: 5px solid currentColor;
  background:
    linear-gradient(135deg, transparent 0 36%, currentColor 37% 45%, transparent 46%),
    linear-gradient(90deg, currentColor 0 0) 62% 28% / 24% 5px no-repeat,
    oklch(0.78 0.025 82);
  clip-path: polygon(28% 0, 72% 0, 78% 38%, 100% 56%, 80% 72%, 88% 100%, 8% 100%, 18% 62%, 0 46%, 24% 32%);
  transform: none;
}

:is(.start-icon-theme, .system-icon-theme)::before {
  inset: 22%;
  border: 4px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50%);
}

:is(.start-icon-theme, .system-icon-theme)::after {
  inset: 34%;
  border-radius: 50%;
  background: var(--panel);
}

:is(.start-icon-blueprint, .action-icon-read_exhibition)::before {
  left: 14%;
  top: 22%;
  width: 72%;
  height: 52%;
  border: 3px solid currentColor;
  background:
    linear-gradient(90deg, transparent calc(50% - 2px), currentColor calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(currentColor 0 0) 24% 34% / 22% 3px no-repeat,
    linear-gradient(currentColor 0 0) 76% 34% / 22% 3px no-repeat,
    oklch(0.95 0.02 248);
}

:is(.start-icon-lamp, .start-icon-cube, .start-icon-crown, .start-icon-book, .start-icon-medal, .start-icon-ruler, .action-icon-special_skill, .system-icon-career_change)::before {
  left: 50%;
  top: 14%;
  width: 52%;
  height: 52%;
  background: oklch(0.86 0.16 82);
  clip-path: polygon(50% 0, 61% 32%, 96% 32%, 68% 52%, 80% 88%, 50% 66%, 20% 88%, 32% 52%, 4% 32%, 39% 32%);
  transform: translateX(-50%);
}

:is(.start-icon-lamp, .start-icon-cube, .start-icon-crown, .start-icon-book, .start-icon-medal, .start-icon-ruler, .action-icon-special_skill, .system-icon-career_change)::after {
  left: 38%;
  bottom: 16%;
  width: 24%;
  height: 12%;
  border: 3px solid currentColor;
  background: var(--panel-soft);
}

:is(.action-icon-design_iteration, .action-icon-normal_drawing)::before {
  left: 22%;
  top: 52%;
  width: 56%;
  height: 12%;
  background: currentColor;
  transform: rotate(-34deg);
}

:is(.action-icon-design_iteration, .action-icon-normal_drawing)::after {
  right: 17%;
  top: 31%;
  width: 15%;
  height: 15%;
  background: oklch(0.86 0.16 82);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(-34deg);
}

:is(.action-icon-crunch_drawing, .action-icon-rest)::before {
  inset: 18%;
  border-radius: 50%;
  background: currentColor;
}

:is(.action-icon-crunch_drawing, .action-icon-rest)::after {
  inset: 12% 10% 20% 34%;
  border-radius: 50%;
  background: var(--panel-soft);
}

.action-icon-exercise::before {
  left: 16%;
  top: 45%;
  width: 68%;
  height: 10%;
  background: currentColor;
}

.action-icon-exercise::after {
  inset: 30% 12%;
  border-left: 8px solid currentColor;
  border-right: 8px solid currentColor;
}

:is(.action-icon-socialize, .system-icon-public_service)::before {
  left: 18%;
  top: 24%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 24px 0 0 currentColor;
}

:is(.action-icon-socialize, .system-icon-public_service)::after {
  left: 12%;
  bottom: 18%;
  width: 34%;
  height: 24%;
  border: 3px solid currentColor;
  border-radius: 12px 12px 0 0;
  box-shadow: 24px 0 0 -3px var(--panel-soft), 24px 0 0 0 currentColor;
}

:is(.action-icon-outsourcing, .action-icon-part_time, .system-icon-internship_work)::before {
  left: 18%;
  top: 32%;
  width: 64%;
  height: 46%;
  border: 3px solid currentColor;
  background: linear-gradient(180deg, oklch(0.75 0.13 70), oklch(0.48 0.1 54));
}

:is(.action-icon-outsourcing, .action-icon-part_time, .system-icon-internship_work)::after {
  left: 38%;
  top: 22%;
  width: 24%;
  height: 16%;
  border: 3px solid currentColor;
  border-bottom: 0;
}

.system-icon-shop::before {
  left: 14%;
  top: 28%;
  width: 62%;
  height: 34%;
  border: 3px solid currentColor;
  background: oklch(0.82 0.13 82);
}

.system-icon-shop::after {
  left: 26%;
  bottom: 18%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 30px 0 0 currentColor;
}

:is(.system-icon-postgrad_exam, .system-icon-recommendation)::before {
  left: 14%;
  top: 28%;
  width: 72%;
  height: 24%;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

:is(.system-icon-postgrad_exam, .system-icon-recommendation)::after {
  left: 34%;
  top: 52%;
  width: 32%;
  height: 18%;
  border: 3px solid currentColor;
  border-top: 0;
  background: oklch(0.86 0.04 252);
}

.system-icon-overseas_study::before {
  inset: 18%;
  border: 4px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) 50% 0 / 4px 100% no-repeat,
    linear-gradient(90deg, currentColor 0 0) 0 50% / 100% 4px no-repeat,
    oklch(0.78 0.12 206);
}

.system-icon-overseas_study::after {
  left: 28%;
  top: 22%;
  width: 44%;
  height: 56%;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
  border-radius: 50%;
}

.system-icon-wanli_road::before {
  left: 18%;
  top: 20%;
  width: 54%;
  height: 54%;
  background:
    linear-gradient(135deg, oklch(0.66 0.12 146) 0 34%, oklch(0.9 0.02 248) 34% 66%, oklch(0.68 0.13 70) 66%);
  border: 3px solid currentColor;
}

.system-icon-wanli_road::after {
  right: 16%;
  top: 14%;
  width: 22px;
  height: 30px;
  border: 4px solid currentColor;
  border-radius: 50% 50% 50% 0;
  background: oklch(0.65 0.18 28);
  transform: rotate(-45deg);
}

.status-icon-energy::before,
.meter-icon-energy::before {
  left: 40%;
  top: 8%;
  width: 24%;
  height: 84%;
  background: oklch(0.86 0.16 82);
  clip-path: polygon(52% 0, 100% 0, 64% 40%, 100% 40%, 36% 100%, 48% 56%, 12% 56%);
}

.status-icon-pressure::before,
.meter-icon-pressure::before {
  left: 16%;
  top: 30%;
  width: 68%;
  height: 34%;
  border: 4px solid currentColor;
  border-radius: 18px;
  background: oklch(0.91 0.01 248);
}

.status-icon-pressure::after,
.meter-icon-pressure::after {
  left: 34%;
  bottom: 12%;
  width: 4px;
  height: 12px;
  background: currentColor;
  box-shadow: 12px 3px 0 currentColor, 24px 0 0 currentColor;
}

.status-icon-money::before,
.meter-icon-money::before {
  left: 18%;
  top: 28%;
  width: 64%;
  height: 46%;
  border: 3px solid currentColor;
  background: linear-gradient(180deg, oklch(0.9 0.04 92), oklch(0.72 0.12 82));
}

.status-icon-money::after,
.meter-icon-money::after {
  right: 15%;
  top: 42%;
  width: 18%;
  height: 18%;
  border: 3px solid currentColor;
  background: var(--panel-soft);
}

.status-icon-mental::before {
  inset: 18%;
  border: 4px solid currentColor;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, currentColor 0 3px, transparent 4px),
    radial-gradient(circle at 66% 38%, currentColor 0 3px, transparent 4px),
    linear-gradient(currentColor 0 0) 50% 68% / 32% 4px no-repeat,
    oklch(0.96 0.03 100);
}

.status-icon-gpa::before {
  left: 18%;
  top: 22%;
  width: 64%;
  height: 56%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 50% 38% / 54% 3px no-repeat,
    linear-gradient(currentColor 0 0) 50% 58% / 54% 3px no-repeat,
    oklch(0.92 0.03 248);
}

.meter-icon-progress::before,
.meter-icon-quality::before {
  inset: 20%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 50% 50% / 72% 3px no-repeat,
    linear-gradient(90deg, currentColor 0 0) 50% 50% / 3px 72% no-repeat,
    oklch(0.88 0.05 210);
}

:is(.system-icon.system-icon-guide, .settings-entry-icon.system-icon-guide)::before {
  left: 18%;
  top: 15%;
  width: 64%;
  height: 70%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 50% 34% / 46% 3px no-repeat,
    linear-gradient(currentColor 0 0) 50% 52% / 46% 3px no-repeat,
    linear-gradient(currentColor 0 0) 50% 70% / 30% 3px no-repeat,
    oklch(0.94 0.02 92);
}

:is(.system-icon.system-icon-guide, .settings-entry-icon.system-icon-guide)::after {
  left: 18%;
  top: 15%;
  width: 18%;
  height: 70%;
  border-right: 3px solid currentColor;
  background: oklch(0.74 0.12 252);
}

.system-icon.system-icon-save::before,
.settings-entry-icon.system-icon-save::before {
  left: 18%;
  top: 14%;
  width: 64%;
  height: 72%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 50% 62% / 42% 3px no-repeat,
    linear-gradient(oklch(0.9 0.03 248) 0 0) 50% 72% / 42% 12% no-repeat,
    linear-gradient(90deg, oklch(0.72 0.12 252) 0 68%, currentColor 68% 82%, oklch(0.9 0.03 248) 82%) 50% 20% / 66% 24% no-repeat,
    oklch(0.78 0.07 252);
}

.system-icon.system-icon-save::after,
.settings-entry-icon.system-icon-save::after {
  left: 30%;
  bottom: 18%;
  width: 40%;
  height: 20%;
  border: 3px solid currentColor;
  border-bottom: 0;
}

.system-icon.system-icon-new-game::before,
.settings-entry-icon.system-icon-new-game::before {
  inset: 18%;
  border: 4px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.system-icon.system-icon-new-game::after,
.settings-entry-icon.system-icon-new-game::after {
  right: 12%;
  top: 19%;
  width: 18px;
  height: 18px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  transform: rotate(24deg);
}

.theme-switch {
  min-width: 72px;
  border-radius: 999px;
}

.achievement-toasts {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 16px);
  right: calc(env(safe-area-inset-right) + 16px);
  z-index: 80;
  width: min(468px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.achievement-toast {
  position: relative;
  min-height: 96px;
  aspect-ratio: 1818 / 371;
  display: grid;
  grid-template-columns: clamp(50px, 10vw, 66px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: clamp(14px, 2.4vw, 20px) clamp(42px, 7vw, 54px) clamp(13px, 2.2vw, 18px) clamp(32px, 5vw, 44px);
  color: white;
  filter: drop-shadow(0 5px 0 oklch(0.02 0 0 / 0.78)) drop-shadow(0 16px 22px oklch(0.04 0 0 / 0.42));
  image-rendering: pixelated;
  transform: translate3d(calc(100% + 28px), -4px, 0) scale(0.98);
  animation: achievement-toast-slide 3900ms cubic-bezier(0.2, 0.9, 0.22, 1) forwards;
  will-change: transform, opacity, filter;
}

.achievement-toast-icon {
  position: relative;
  z-index: 1;
  width: min(100%, 62px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  transform: translateY(1px);
  filter: drop-shadow(0 3px 0 oklch(0.02 0 0 / 0.62));
}

.achievement-toast-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.achievement-toast-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-inline-end: 48px;
  transform: translateY(1px);
}

.achievement-toast strong {
  overflow: hidden;
  color: white;
  font-size: clamp(0.88rem, 1.8vw, 1.02rem);
  font-weight: 800;
  line-height: 1.12;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 0 oklch(0.04 0 0);
  white-space: nowrap;
}

.achievement-toast strong span {
  color: oklch(0.92 0.16 88);
}

.achievement-toast strong b {
  font-weight: inherit;
}

.achievement-toast p {
  display: -webkit-box;
  overflow: hidden;
  color: oklch(0.86 0.012 260);
  font-size: clamp(0.68rem, 1.32vw, 0.78rem);
  line-height: 1.25;
  text-shadow: 1px 1px 0 oklch(0.04 0 0);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.achievement-toast em {
  position: absolute;
  z-index: 1;
  top: clamp(15px, 2.7vw, 19px);
  right: clamp(38px, 6.4vw, 52px);
  min-width: 42px;
  color: oklch(0.92 0.16 88);
  font-size: clamp(0.68rem, 1.34vw, 0.78rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  text-shadow: 2px 2px 0 oklch(0.04 0 0);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: oklch(0.14 0.02 253 / 0.58);
}

.modal-card {
  width: min(700px, 100%);
  max-height: calc(100dvh - 32px);
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: auto;
}

.modal-card.slim {
  width: min(560px, 100%);
}

.modal-card.slim.announcement-dialog {
  width: min(780px, calc(100vw - 32px));
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
}

.modal-card.event-card {
  width: min(840px, calc(100vw - 40px));
  gap: 20px;
  padding: 26px;
}

.modal-card.result-card {
  width: min(800px, calc(100vw - 40px));
  gap: 18px;
  padding: 24px;
}

.modal-card.competition-result-prompt {
  width: min(820px, calc(100vw - 32px));
}

.modal-card.summer-card {
  width: min(960px, calc(100vw - 32px));
}

.modal-card.opening-fixed-card {
  --opening-bg-a: oklch(0.2 0.045 250);
  --opening-bg-b: oklch(0.12 0.026 252);
  --opening-accent: oklch(0.76 0.13 74);
  width: min(1180px, calc(100vw - 28px));
  gap: 20px;
  padding: clamp(16px, 2.4vw, 28px);
  color: white;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in oklch, var(--opening-accent), transparent 76%), transparent 28%),
    linear-gradient(135deg, var(--opening-bg-a), var(--opening-bg-b));
  border-color: color-mix(in oklch, var(--opening-accent), white 16%);
  box-shadow: 0 24px 72px oklch(0 0 0 / 0.54);
}

:root[data-theme="light"] .modal-card.opening-fixed-card {
  --opening-bg-a: oklch(0.31 0.085 248);
  --opening-bg-b: oklch(0.2 0.046 252);
}

.modal-card.opening-fixed-opening_ceremony {
  --opening-accent: oklch(0.78 0.13 76);
}

.modal-card.opening-fixed-military_training {
  --opening-bg-a: oklch(0.26 0.07 156);
  --opening-bg-b: oklch(0.13 0.038 164);
  --opening-accent: oklch(0.68 0.12 152);
}

.modal-card.opening-fixed-architecture_life_start {
  --opening-bg-a: oklch(0.3 0.08 248);
  --opening-bg-b: oklch(0.18 0.04 252);
  --opening-accent: oklch(0.78 0.13 72);
}

.modal-card.event-card .modal-copy h2 {
  font-size: 1.8rem;
}

.modal-card.event-card .modal-title-icon {
  width: 52px;
  height: 52px;
}

.modal-card.event-card .modal-copy p {
  font-size: 1rem;
}

.competition-submit-confirm-modal .modal-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competition-submit-confirm-modal .modal-option:first-child {
  background: color-mix(in oklch, var(--panel), var(--blue) 12%);
  border-color: color-mix(in oklch, var(--line), var(--blue) 42%);
}

:root:not([data-theme="dark"]) .competition-submit-confirm-modal .competition-submit-confirm-button {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.22), transparent 62%),
    var(--panel);
  border-color: var(--line);
}

:root:not([data-theme="dark"]) .competition-submit-confirm-modal .competition-submit-cancel-button {
  background: color-mix(in oklch, var(--panel), var(--blue) 12%);
  border-color: color-mix(in oklch, var(--line), var(--blue) 42%);
}

.modal-card.internship-open-prompt .modal-copy h2 {
  font-size: var(--modal-title-standard-size);
  line-height: 1.08;
}

.modal-card.internship-open-prompt .modal-copy p {
  font-size: clamp(1.08rem, 1.22vw, 1.28rem);
  line-height: 1.62;
}

.modal-card.internship-open-prompt .modal-option {
  font-size: clamp(1.08rem, 1.14vw, 1.24rem);
}

.modal-media {
  display: grid;
  gap: 8px;
  margin: 0;
}

.modal-media img {
  width: 100%;
  max-height: min(360px, 42dvh);
  object-fit: contain;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.modal-media figcaption {
  color: var(--muted);
  font-size: 0.85rem;
}

.opening-fixed-card .modal-media {
  gap: 12px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in oklch, var(--opening-bg-b), black 16%);
  border: 1px solid color-mix(in oklch, var(--opening-accent), white 8%);
  border-radius: 6px;
}

.opening-fixed-card .modal-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  opacity: 0;
  background: color-mix(in oklch, var(--opening-bg-b), black 16%);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 36px color-mix(in oklch, var(--opening-accent), transparent 78%);
  animation: opening-fixed-image-in 900ms ease-out forwards;
}

.opening-fixed-card .modal-media figcaption,
.opening-fixed-card .modal-copy,
.opening-fixed-card .modal-options {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  animation: opening-fixed-content-in 620ms ease-out 760ms forwards;
}

.opening-fixed-card .modal-copy {
  animation-delay: 920ms;
}

.opening-fixed-card .modal-options {
  animation-delay: 1080ms;
}

.opening-fixed-card .modal-copy h2 {
  color: white;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.opening-fixed-card .modal-copy p,
.opening-fixed-card .modal-media figcaption {
  color: oklch(1 0 0 / 0.82);
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.7;
}

.opening-fixed-card .kicker {
  color: oklch(1 0 0 / 0.64);
  font-size: 1rem;
}

.opening-fixed-card .modal-option {
  color: white;
  background: oklch(1 0 0 / 0.09);
  border-color: color-mix(in oklch, var(--opening-accent), white 4%);
}

.opening-fixed-card .modal-option:hover:not(:disabled) {
  background: oklch(1 0 0 / 0.17);
  border-color: color-mix(in oklch, var(--opening-accent), white 22%);
}

@keyframes opening-fixed-image-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes opening-fixed-content-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.modal-copy {
  display: grid;
  gap: 8px;
}

.modal-copy h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
}

.modal-title-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.modal-title-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.modal-copy h2 > span:last-child {
  min-width: 0;
}

.route-participation-title-badge {
  flex: 0 1 auto;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.route-participation-title-badge.is-current {
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.route-participation-title-badge.is-other {
  color: var(--danger);
  border-color: var(--danger);
}

.modal-copy p {
  max-width: 68ch;
  color: var(--muted);
}

.modal-copy p.announcement-copy {
  max-width: 76ch;
  white-space: pre-line;
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  line-height: 1.78;
}

.modal-copy p.announcement-signature {
  justify-self: end;
  margin-top: 4px;
  max-width: 18ch;
  white-space: pre-line;
  text-align: right;
  font-size: clamp(1rem, 1.08vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink);
}

.announcement-dialog .modal-copy {
  gap: 12px;
}

.announcement-dialog .modal-copy h2 {
  font-size: clamp(1.72rem, 2vw, 2.12rem);
}

.announcement-dialog > .pixel-button {
  min-height: 48px;
  font-size: 1.08rem;
}

.modal-report_feedback .modal-copy p,
.modal-system_prompt.submission-reminder-prompt .modal-copy p,
.modal-choice_result.competition-result-prompt .modal-copy p,
.modal-year_start .modal-copy p {
  max-width: 82ch;
}

.modal-options,
.theme-options,
.language-options {
  display: grid;
  gap: 8px;
}

.theme-options,
.language-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.language-options .pixel-button {
  width: 100%;
}

.language-notice {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.modal-option {
  min-height: 58px;
  display: grid;
  gap: 5px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.summer-card .modal-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.summer-card .modal-option {
  align-content: start;
  gap: 8px;
  overflow: hidden;
  animation: summer-option-in 520ms ease-out both;
}

.summer-card .modal-option:nth-child(2) {
  animation-delay: 90ms;
}

.modal-option-media {
  aspect-ratio: 16 / 9;
  min-width: 0;
  margin: -2px -2px 2px;
  overflow: hidden;
  background: var(--panel-soft);
  border: 1px solid color-mix(in oklch, var(--line), var(--blue) 18%);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(8px) scale(0.992);
  animation: summer-image-in 620ms ease-out forwards;
}

.summer-card .modal-option:nth-child(2) .modal-option-media {
  animation-delay: 120ms;
}

.modal-option-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.008);
  transition: transform 260ms ease-out, filter 260ms ease-out;
}

.summer-card .modal-option:hover:not(:disabled) .modal-option-media img {
  filter: saturate(1.08) contrast(1.02);
  transform: scale(1.03);
}

.modal-option span,
.modal-option em {
  color: var(--muted);
  font-size: 0.86rem;
  font-style: normal;
}

.modal-option .modal-warning {
  color: var(--danger);
  font-weight: 700;
  animation: modal-warning-fade 4.2s ease-out forwards;
}

.modal-option .delta-line {
  color: var(--blue-dark);
  font-weight: 700;
}

.modal-option .modal-delta {
  margin-top: 2px;
}

.modal-option.has-numeric-value > strong,
.modal-option.has-numeric-value > span:not(.modal-option-media):not(.project-option-side-icon):not(.course-option-side-icon):not(.model-material-option-side-icon),
.modal-option.has-numeric-value > em,
.modal-option.has-numeric-value > .delta-chips,
.modal-option.has-numeric-value > .inline-delta-text {
  justify-self: center;
  text-align: center;
}

.modal-option.has-numeric-value .delta-chips,
.modal-option.has-numeric-value .inline-delta-text {
  justify-content: center;
}

.modal-option .delta-chip span,
.modal-option .delta-chip strong {
  font-size: inherit;
}

.modal-option .delta-chip strong {
  color: var(--blue-dark);
}

.modal-option .delta-chip.is-negative strong {
  color: var(--danger);
}

.modal-option .delta-chip.is-positive strong {
  color: var(--blue-dark);
}

.project-select-option > strong {
  font-size: clamp(1.06rem, 1.12vw, 1.2rem);
  line-height: 1.28;
}

@keyframes modal-warning-fade {
  0%,
  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes summer-option-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes summer-image-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.system-modal {
  width: min(980px, 100%);
}

.achievement-modal {
  width: min(1040px, 100%);
}

.achievement-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: min(58dvh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.achievement-gallery-item {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 10%), var(--panel-soft));
  border: 1px solid color-mix(in oklch, var(--line), var(--gold) 14%);
  border-radius: 6px;
}

.achievement-gallery-item > span {
  grid-row: 1 / span 2;
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 3px;
  background: color-mix(in oklch, var(--panel), white 10%);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.achievement-gallery-item > span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.achievement-gallery-item strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-gallery-item p {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.42;
}

.achievement-gallery-item em {
  justify-self: end;
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.achievement-gallery-item.is-locked {
  opacity: 0.68;
}

.achievement-gallery-item.is-locked > span img {
  filter: grayscale(1) contrast(0.9) opacity(0.72);
}

.support-modal {
  width: min(880px, 100%);
}

.support-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

.support-qr-stack {
  display: grid;
  gap: 10px;
}

.support-qr-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 12%), var(--panel-soft));
  border: 1px solid color-mix(in oklch, var(--line), var(--gold) 16%);
  border-radius: 6px;
}

.support-qr-card figure {
  display: grid;
  margin: 0;
}

.support-qr-card img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.support-qr-card strong,
.support-ending-card strong {
  color: var(--ink);
  font-weight: 800;
}

.support-qr-card p,
.support-ending-card span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.support-ending-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 12%), var(--panel-soft));
  border: 1px solid color-mix(in oklch, var(--line), var(--gold) 18%);
  border-radius: 6px;
}

.support-ending-card img {
  width: 100%;
  max-height: min(220px, 28dvh);
  object-fit: contain;
  background: color-mix(in oklch, var(--panel-soft), black 4%);
  border: 1px solid var(--line);
  border-radius: 4px;
  image-rendering: pixelated;
}

.support-ending-card figcaption {
  display: grid;
}

.support-note {
  color: var(--muted);
  font-size: 0.82rem;
}

.shop-categories {
  display: grid;
  gap: 14px;
}

.shop-category {
  display: grid;
  gap: 8px;
}

.shop-category .section-head {
  margin-bottom: 0;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shop-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.shop-item.is-disabled {
  opacity: 0.68;
}

.shop-icon {
  width: 38px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--blue-dark);
  font-size: 1.25rem;
  background: var(--panel-soft);
  border: 2px solid var(--line);
  border-radius: 0;
}

.shop-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.shop-copy p {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.shop-limit {
  width: fit-content;
  padding: 2px 6px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 0;
}

.shop-buy {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.shop-buy span {
  color: var(--blue-dark);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.shop-buy .mini-button {
  min-width: 72px;
}

.route-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-groups {
  display: grid;
  gap: 14px;
}

.route-group {
  display: grid;
  gap: 8px;
}

.route-group .section-head {
  margin-bottom: 0;
}

.route-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.route-option.option-selected {
  border-color: var(--blue-dark);
  background: var(--panel-soft);
  opacity: 1;
}

.route-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.route-requirements i {
  padding: 2px 5px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.25;
}

.route-entry-notes {
  margin-bottom: 2px;
}

.internship-work-modal .modal-copy h2 {
  font-size: clamp(1.72rem, 2.2vw, 2.24rem);
}

.internship-work-modal .modal-copy p,
.internship-work-modal .route-entry-notes p {
  font-size: clamp(1.02rem, 1.08vw, 1.16rem);
  line-height: 1.56;
}

.internship-work-modal .system-facts dt {
  font-size: 0.92rem;
}

.internship-work-modal .system-facts dd {
  font-size: clamp(1rem, 1.06vw, 1.14rem);
}

.internship-work-modal .route-group .section-head h3 {
  font-size: clamp(1.08rem, 1.16vw, 1.24rem);
}

.internship-work-modal .route-option-copy strong {
  font-size: clamp(1.04rem, 1.12vw, 1.2rem);
}

.internship-work-modal .route-option-copy > span {
  font-size: clamp(0.94rem, 1vw, 1.06rem);
  line-height: 1.45;
}

.internship-work-modal .route-requirements i {
  font-size: 0.82rem;
}

.system-facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.system-facts div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.system-facts dt {
  color: var(--muted);
}

.system-facts dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.system-notes {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.system-notes p {
  color: var(--muted);
}

.theme-dialog-copy {
  font-size: clamp(1.06rem, 1.1vw, 1.2rem);
  line-height: 1.58;
}

.modal-card.slim.save-success-modal {
  width: min(780px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 18px;
  padding: 26px;
}

.save-success-modal .modal-copy {
  width: 100%;
  justify-items: start;
  gap: 8px;
}

.modal-card.slim.save-success-modal .modal-copy h2,
.modal-card.slim.danger-dialog .modal-copy h2,
.modal-card.slim.theme-dialog .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  line-height: 1.16;
}

.modal-card.slim.save-success-modal .modal-title-icon,
.modal-card.slim.danger-dialog .modal-title-icon,
.modal-card.slim.theme-dialog .modal-title-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.save-success-modal .system-notes {
  width: 100%;
  justify-self: center;
  gap: 10px;
  margin: 0;
  padding: 18px 24px;
  overflow: hidden;
  text-align: left;
}

.save-success-modal .system-notes p,
.modal-card.slim.danger-dialog .modal-copy p,
.modal-card.slim.theme-dialog .modal-copy p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  line-height: 1.68;
}

.modal-card.slim.danger-dialog .danger-dialog-warning {
  font-size: clamp(1.2rem, 1.34vw, 1.42rem);
  font-weight: 800;
  line-height: 1.65;
}

.modal-card.slim.danger-dialog .danger-dialog-rules {
  gap: 8px;
  padding: 14px 16px;
}

.modal-card.slim.danger-dialog .danger-dialog-rules p {
  font-size: clamp(0.98rem, 1.08vw, 1.12rem);
  line-height: 1.6;
}

.save-success-modal .system-notes p:last-child {
  letter-spacing: 0;
  white-space: nowrap;
}

.save-success-modal > .pixel-button {
  width: 100%;
  justify-self: stretch;
  min-height: 50px;
  margin: 0;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
}



.guide-modal {
  width: min(920px, calc(100vw - 32px));
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.guide-step {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.guide-step span {
  color: var(--accent-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.guide-step strong {
  color: var(--ink);
}

.guide-step p {
  color: var(--muted);
}

@keyframes loadPulse {
  from {
    width: 28%;
  }
  to {
    width: 86%;
  }
}

@keyframes achievement-toast-slide {
  0% {
    opacity: 0;
    filter: drop-shadow(0 2px 0 oklch(0.02 0 0 / 0.2)) drop-shadow(0 8px 12px oklch(0.04 0 0 / 0.18));
    transform: translate3d(calc(100% + 28px), -6px, 0) scale(0.97);
  }

  9% {
    opacity: 1;
    filter: drop-shadow(0 5px 0 oklch(0.02 0 0 / 0.78)) drop-shadow(0 16px 22px oklch(0.04 0 0 / 0.42));
    transform: translate3d(-10px, 0, 0) scale(1.01);
  }

  15%,
  77% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  88% {
    opacity: 1;
    transform: translate3d(8px, 0, 0) scale(0.995);
  }

  100% {
    opacity: 0;
    filter: drop-shadow(0 2px 0 oklch(0.02 0 0 / 0.25)) drop-shadow(0 8px 14px oklch(0.04 0 0 / 0.2));
    transform: translate3d(calc(100% + 28px), -4px, 0) scale(0.97);
  }
}

@keyframes lyricRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-height: 900px) and (min-width: 1201px) {
  .game-shell {
    gap: 10px;
    padding: 10px;
  }

  .sidebar,
  .main-panel,
  .right-rail {
    gap: 8px;
  }

  .blueprint-lockup {
    min-height: 96px;
  }

  .brand-mark {
    width: 54px;
    height: 54px;
  }

  .blueprint-lockup strong {
    font-size: 1.5rem;
  }

  .action-section,
  .music-dock,
  .profile-card,
  .course-card,
  .mentor-card,
  .settings-panel,
  .system-panel,
  .log-hero {
    padding: 10px;
  }

  .action-button {
    min-height: 53px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 9px;
  }

  .action-icon {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }

  .action-copy strong {
    font-size: 0.82rem;
  }

  .action-copy span,
  .delta-chip {
    font-size: 0.7rem;
  }

  .sidebar .music-dock {
    padding: 7px;
  }

  .sidebar .track-card::before {
    width: 36px;
  }

  .sidebar .track-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .system-panel {
    min-height: 112px;
  }

  .system-button {
    min-height: 88px;
  }

  .system-button.is-minimal {
    min-height: 100%;
    grid-template-rows: 44px auto;
  }

  .right-entry-grid .system-button,
  .course-entry-grid .system-button {
    min-height: 76px;
  }

  .settings-grid {
    max-height: 248px;
  }

  .status-tile {
    min-height: 66px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 10px 14px;
  }

  .status-icon {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
  }

  .profile-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .avatar-block {
    width: 68px;
    font-size: 1rem;
  }

  .profile-main strong {
    font-size: 1rem;
  }

  .profile-main p,
  .profile-card span,
  .attribute-row span {
    font-size: 0.72rem;
  }

  .attribute-grid {
    gap: 5px;
  }

  .attribute-row {
    grid-template-columns: 64px minmax(0, 1fr) 28px;
    gap: 6px;
  }

  .course-card {
    gap: 8px;
  }

  .course-card h3 {
    font-size: 1.05rem;
  }

  .side-facts div {
    padding: 4px 0;
  }

  .course-progress {
    gap: 7px;
  }

  .rail-shortcuts {
    gap: 8px;
  }

  .rail-shortcut {
    min-height: 58px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 8px 10px;
  }

  .rail-shortcut-icon {
    width: 34px;
    font-size: 1.2rem;
  }

  .mentor-main {
    min-height: 54px;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 9px;
  }

  .mentor-avatar {
    width: 48px;
  }

  .mentor-task {
    padding: 7px 8px;
  }

  .settings-panel {
    gap: 6px;
  }
}

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

  .achievement-toast {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .opening-fixed-card .modal-media img,
  .opening-fixed-card .modal-media figcaption,
  .opening-fixed-card .modal-copy,
  .opening-fixed-card .modal-options,
  .summer-card .modal-option,
  .modal-option-media {
    animation: none !important;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}


@media (max-width: 1200px) {
  body {
    overflow: auto;
  }

  .game-shell {
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .ending-shell {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .sidebar,
  .main-panel,
  .right-rail,
  .ending-stage,
  .ending-side {
    min-height: initial;
  }

  .game-shell > .sidebar,
  .game-shell > .main-panel,
  .game-shell > .right-rail {
    display: contents;
  }

  .blueprint-lockup {
    order: 1;
  }

  .status-console {
    order: 2;
  }

  .action-section {
    order: 3;
  }

  .log-hero {
    order: 4;
  }

  .profile-card {
    order: 5;
  }

  .course-card {
    order: 6;
  }

  .system-panel {
    order: 7;
  }

  .rail-shortcuts {
    order: 8;
  }

  .mentor-card {
    order: 9;
  }

  .settings-panel {
    order: 10;
  }

  .game-shell > .sidebar > .music-dock {
    order: 11;
  }

  .action-groups,
  .log-list,
  .review-list {
    overflow: visible;
  }

  .start-shell {
    min-height: 100dvh;
    overflow: auto;
  }

  .start-shell::after {
    width: 100%;
  }

  .start-hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 14px;
    padding: 24px;
  }

  .start-title-panel,
  .start-entry-panel,
  .start-secondary-grid,
  .start-leaderboard-panel,
  .start-achievement-panel {
    width: 100%;
    max-width: 760px;
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .start-achievement-panel {
    margin-left: 0;
  }

  .start-about-panel,
  .start-ready-panel,
  .start-toolbar {
    position: static;
    width: 100%;
    max-width: 760px;
    grid-column: 1;
    justify-self: start;
  }

  .start-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-shell > .music-dock {
    position: static;
    width: auto;
    padding: 0 24px 16px;
  }
}


@media (min-width: 1201px) {
  .start-shell {
    height: 100dvh;
  }

  .start-shell::after {
    width: min(47vw, 720px);
  }

  .start-scene-art {
    inset: 0 0 0 min(47vw, 720px);
    z-index: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .start-scene-art img {
    object-fit: cover;
    object-position: center;
    opacity: 1;
  }

  :root[data-theme="dark"] .start-scene-art img {
    opacity: 0.94;
  }

  .start-hero {
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(520px, 40vw) minmax(360px, 1fr);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .start-about-panel {
    left: clamp(600px, 32.5vw, 720px);
    width: clamp(380px, 28vw, 500px);
    min-height: 462px;
  }

  .start-ready-panel {
    right: 42px;
    bottom: 86px;
  }

  .start-toolbar {
    right: 46px;
  }

  .sidebar,
  .main-panel,
  .right-rail {
    gap: 7px;
  }

  .blueprint-lockup {
    gap: 9px;
    min-height: 72px;
    padding: 3px 2px;
  }

  .brand-mark {
    width: 52px;
    height: 52px;
  }

  .blueprint-lockup strong {
    font-size: 1.42rem;
  }

  .blueprint-lockup p,
  .blueprint-lockup span {
    font-size: 0.7rem;
  }

  .action-section {
    grid-template-rows: auto minmax(0, 1fr);
    padding: 9px 10px;
  }

  .action-groups,
  .action-grid {
    gap: 5px;
  }

  .action-button {
    min-height: 45px;
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 10px;
    background:
      linear-gradient(135deg, oklch(1 0 0 / 0.28), transparent 48%),
      var(--panel);
    border-color: oklch(0.78 0.045 248 / 0.72);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.22), 0 2px 0 oklch(0.62 0.035 248 / 0.38);
    overflow: hidden;
    transition: background 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
  }

  .action-button::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid oklch(0.78 0.045 248 / 0.24);
    border-radius: 6px;
    pointer-events: none;
  }

  .action-button:hover:not(:disabled) {
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.34), 0 3px 0 oklch(0.55 0.17 253 / 0.28);
    transform: translateY(-1px);
  }

  .action-icon {
    width: 30px;
    height: 30px;
  }

  .action-copy {
    gap: 3px;
  }

  .action-copy strong {
    font-size: 0.82rem;
    line-height: 1.15;
  }

  .action-copy span {
    font-size: 0.68rem;
    line-height: 1.18;
  }

  .delta-chips {
    gap: 3px;
  }

  .delta-chip {
    min-height: 18px;
    padding: 1px 5px;
    font-size: 0.66rem;
    line-height: 1.12;
  }

  .sidebar .music-dock {
    max-height: 116px;
    gap: 4px;
    padding: 6px;
  }

  .sidebar .music-controls {
    gap: 4px;
  }

  .sidebar .track-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
    padding: 5px;
  }

  .sidebar .track-card::before {
    width: 34px;
  }

  .sidebar .mini-button {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.7rem;
  }

  .sidebar .lyric-line {
    min-height: 26px;
    padding: 4px 6px;
  }
}

@media (max-height: 900px) and (min-width: 1201px) {
  .sidebar {
    gap: 6px;
  }

  .blueprint-lockup {
    min-height: 58px;
    gap: 7px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .blueprint-lockup strong {
    font-size: 1.08rem;
  }

  .blueprint-lockup p,
  .blueprint-lockup span {
    font-size: 0.62rem;
  }

  .action-section {
    padding: 7px 10px;
    overflow: hidden;
  }

  .action-groups,
  .action-grid {
    gap: 4px;
  }

  .action-grid-flat {
    grid-template-rows: repeat(12, minmax(0, 1fr));
    gap: 4px;
  }

  .action-button {
    min-height: 38px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 8px;
  }

  .action-icon {
    width: 25px;
    height: 25px;
  }

  .action-copy strong {
    font-size: 0.72rem;
  }

  .action-copy span,
  .delta-chip {
    font-size: 0.6rem;
  }

  .delta-chip {
    min-height: 16px;
    padding: 0 4px;
  }

  .sidebar .music-dock {
    max-height: 106px;
    gap: 4px;
    padding: 5px 6px;
  }

  .sidebar .music-dock .section-head,
  .sidebar .music-status,
  .sidebar .music-time,
  .sidebar .lyric-line {
    display: none;
  }

  .sidebar .track-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 5px;
  }

  .sidebar .track-card::before {
    width: 28px;
  }

  .sidebar .mini-button {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.66rem;
  }
}

.start-entry-icon:has(img)::before,
.start-entry-icon:has(img)::after,
.start-small-icon:has(img)::before,
.start-small-icon:has(img)::after,
.start-feature-icon:has(img)::before,
.start-feature-icon:has(img)::after,
.start-toolbar-icon:has(img)::before,
.start-toolbar-icon:has(img)::after,
.start-achievement-icon:has(img)::before,
.start-achievement-icon:has(img)::after,
.action-icon:has(img)::before,
.action-icon:has(img)::after,
.system-icon:has(img)::before,
.system-icon:has(img)::after,
.settings-entry-icon:has(img)::before,
.settings-entry-icon:has(img)::after,
.status-icon:has(img)::before,
.status-icon:has(img)::after,
.meter-icon:has(img)::before,
.meter-icon:has(img)::after {
  content: none;
}

.start-entry-icon img,
.start-small-icon img,
.start-feature-icon img,
.start-toolbar-icon img,
.start-achievement-icon img,
.action-icon img,
.system-icon img,
.settings-entry-icon img,
.status-icon img,
.meter-icon img,
.shop-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 0 oklch(0.04 0 0 / 0.35));
}

.start-entry-icon:has(img),
.start-small-icon:has(img),
.start-feature-icon:has(img),
.start-toolbar-icon:has(img),
.start-achievement-icon:has(img),
.action-icon:has(img),
.system-icon:has(img),
.settings-entry-icon:has(img),
.status-icon:has(img),
.meter-icon:has(img),
.shop-icon:has(img) {
  padding: 3px;
  color: inherit;
}

.action-icon:has(img),
.system-icon:has(img),
.settings-entry-icon:has(img),
.status-icon:has(img),
.meter-icon:has(img),
.shop-icon:has(img) {
  background: color-mix(in oklch, var(--panel-soft), transparent 18%);
  border-color: color-mix(in oklch, var(--line), var(--gold) 18%);
}

.settings-panel {
  grid-template-columns: 1fr;
}

.settings-panel .settings-toggle {
  width: 100%;
  justify-content: center;
}

.settings-modal-backdrop {
  background: linear-gradient(oklch(0.08 0.01 70 / 0.64), oklch(0.08 0.01 70 / 0.64));
  backdrop-filter: grayscale(0.82) brightness(0.72);
}

.game-settings-modal {
  width: min(860px, calc(100vw - 32px));
  border-width: 2px;
  box-shadow:
    0 24px 70px oklch(0.04 0.01 70 / 0.62),
    inset 0 0 0 1px oklch(0.95 0.04 84 / 0.12);
}

.game-settings-modal .modal-copy {
  gap: 8px;
}

.game-settings-modal .modal-copy h2 {
  font-size: clamp(2rem, 4vw, 2.6rem);
}

.game-settings-grid {
  max-height: min(52dvh, 430px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 2px 2px 6px;
}

.game-settings-grid .settings-entry-button {
  min-height: 96px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.game-settings-grid .settings-entry-button .settings-entry-icon {
  grid-row: auto;
  width: 58px;
  height: 58px;
  font-size: 1.65rem;
}

.game-settings-grid .settings-entry-button strong {
  grid-column: 2;
  font-size: 1.08rem;
  line-height: 1.22;
}

.game-settings-modal > .pixel-button {
  min-height: 54px;
  font-size: 1.08rem;
}

.shop-category-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  padding: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.shop-category-tab {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.shop-category-tab b {
  min-width: 24px;
  padding: 2px 6px;
  color: var(--ink);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.shop-category-tab.is-active {
  color: var(--ink);
  background: color-mix(in oklch, var(--gold), var(--panel) 72%);
  border-color: var(--gold);
  box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--blue-dark), transparent 35%);
}

.shop-category-tab:hover {
  border-color: var(--gold);
}

.shop-category {
  min-height: 0;
}

.shop-grid {
  max-height: min(52dvh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.shop-item {
  grid-template-columns: 56px minmax(0, 1fr) minmax(92px, auto);
  background: color-mix(in oklch, var(--panel), var(--panel-soft) 32%);
}

.shop-icon {
  width: 52px;
  border-radius: 6px;
}

:root[data-theme="dark"] .modal-backdrop {
  background: oklch(0.06 0.012 64 / 0.68);
}

:root[data-theme="dark"] .modal-card {
  background:
    linear-gradient(180deg, oklch(0.23 0.024 62 / 0.98), oklch(0.17 0.018 58 / 0.98));
  border-color: oklch(0.6 0.07 72);
}

:root[data-theme="dark"] .shop-category-tabs,
:root[data-theme="dark"] .shop-category-tab,
:root[data-theme="dark"] .shop-item,
:root[data-theme="dark"] .settings-entry-button {
  box-shadow: inset 0 0 0 1px oklch(0.9 0.05 84 / 0.05);
}


:root {
  color-scheme: light;
  --surface-bg: oklch(0.94 0 0);
  --surface-grid: oklch(0.86 0 0);
  --surface-grid-strong: oklch(0.73 0 0);
  --surface-panel: oklch(0.985 0 0 / 0.95);
  --surface-panel-soft: oklch(0.91 0 0);
  --text-main: oklch(0.15 0 0);
  --text-muted: oklch(0.38 0 0);
  --text-faint: oklch(0.56 0 0);
  --line-subtle: oklch(0.68 0 0);
  --line-strong: oklch(0.32 0 0);
  --accent-primary: oklch(0.35 0 0);
  --accent-primary-strong: oklch(0.16 0 0);
  --accent-warning: oklch(0.52 0 0);
  --accent-success: oklch(0.42 0 0);
  --accent-danger: oklch(0.24 0 0);
  --focus-ring: oklch(0.24 0 0);
  --radius: 16px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-bg: oklch(0.08 0 0);
  --surface-grid: oklch(0.18 0 0);
  --surface-grid-strong: oklch(0.3 0 0);
  --surface-panel: oklch(0.14 0 0 / 0.96);
  --surface-panel-soft: oklch(0.22 0 0);
  --text-main: oklch(0.93 0 0);
  --text-muted: oklch(0.74 0 0);
  --text-faint: oklch(0.6 0 0);
  --line-subtle: oklch(0.38 0 0);
  --line-strong: oklch(0.68 0 0);
  --accent-primary: oklch(0.76 0 0);
  --accent-primary-strong: oklch(0.88 0 0);
  --accent-warning: oklch(0.7 0 0);
  --accent-success: oklch(0.7 0 0);
  --accent-danger: oklch(0.78 0 0);
  --focus-ring: oklch(0.9 0 0);
}

html {
  font-size: 16.5px;
}

body {
  font-size: 15px;
}

.loading-panel {
  border-color: rgb(255 255 255 / 0.42);
  border-radius: 18px;
}

.loading-copy .loading-copy-primary {
  color: white;
}

.loading-bar {
  height: 16px;
  border-color: rgb(255 255 255 / 0.55);
  border-radius: 999px;
  overflow: hidden;
}

.loading-bar span {
  inline-size: var(--loading-progress, 0%);
  width: auto;
  border-radius: inherit;
  transition: inline-size 110ms ease-out;
}

.loading-bar em {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #0b0b0b;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.start-shell {
  --start-paper: oklch(0.96 0 0 / 0.86);
  --start-paper-solid: oklch(0.985 0 0 / 0.95);
  --start-panel-ink: oklch(0.14 0 0);
  --start-panel-muted: oklch(0.38 0 0);
  --start-panel-line: oklch(0.66 0 0 / 0.72);
  --start-panel-line-strong: oklch(0.18 0 0);
  --start-blue: oklch(0.22 0 0);
  --start-blue-soft: oklch(0.42 0 0 / 0.16);
  --start-gold: oklch(0.48 0 0);
  --start-shadow: oklch(0 0 0 / 0.18);
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.92), oklch(0.88 0 0 / 0.82));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0 / 0.98), oklch(0.94 0 0 / 0.9));
  --start-button-inner: oklch(1 0 0 / 0.32);
  --start-button-border-hover: oklch(0.18 0 0 / 0.9);
  --start-button-flow-soft: oklch(1 0 0 / 0.14);
  --start-button-flow-strong: oklch(1 0 0 / 0.62);
  --start-button-glow: oklch(0 0 0 / 0.16);
  background: oklch(0.9 0 0);
}

:root[data-theme="dark"] .start-shell {
  --start-paper: oklch(0.12 0 0 / 0.88);
  --start-paper-solid: oklch(0.16 0 0 / 0.95);
  --start-panel-ink: oklch(0.93 0 0);
  --start-panel-muted: oklch(0.72 0 0);
  --start-panel-line: oklch(0.44 0 0 / 0.72);
  --start-panel-line-strong: oklch(0.82 0 0);
  --start-blue: oklch(0.86 0 0);
  --start-blue-soft: oklch(0.76 0 0 / 0.14);
  --start-gold: oklch(0.74 0 0);
  --start-shadow: oklch(0 0 0 / 0.5);
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.88), oklch(0.13 0 0 / 0.82));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.31 0 0 / 0.94), oklch(0.18 0 0 / 0.9));
  --start-button-inner: oklch(1 0 0 / 0.12);
  --start-button-border-hover: oklch(0.9 0 0 / 0.86);
  --start-button-flow-soft: oklch(1 0 0 / 0.1);
  --start-button-flow-strong: oklch(1 0 0 / 0.36);
  --start-button-glow: oklch(1 0 0 / 0.12);
  background: oklch(0.07 0 0);
}

.start-shell::before,
:root[data-theme="dark"] .start-shell::before {
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.08), transparent 44%),
    var(--bg);
}

.start-scene-art img {
  filter: grayscale(1) contrast(1.06) brightness(0.95);
}

:root[data-theme="dark"] .start-scene-art img {
  filter: grayscale(1) contrast(1.08) brightness(0.72);
}

button,
.pixel-button,
.mini-button,
.file-button,
.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile,
.action-button,
.modal-option,
.system-button,
.settings-entry-button,
.shop-category-tab,
.rail-shortcut {
  border-radius: 16px;
  clip-path: none;
}

.start-entry-panel .profile-form,
.start-about-panel,
.start-leaderboard-panel,
.start-achievement-panel,
.start-ready-panel {
  border-radius: 18px;
  clip-path: none;
}

.pixel-button,
.mini-button,
.file-button,
.action-button,
.modal-option,
.system-button,
.settings-entry-button,
.shop-category-tab {
  font-size: 0.95rem;
}

.start-entry-button.is-primary {
  --start-button-bg: linear-gradient(135deg, oklch(0.12 0 0 / 0.98), oklch(0.28 0 0 / 0.94));
  --start-button-bg-hover: linear-gradient(135deg, oklch(0.18 0 0 / 0.98), oklch(0.34 0 0 / 0.94));
  border-color: oklch(0.92 0 0 / 0.64);
}

.start-small-card.is-warm {
  --start-button-bg: linear-gradient(135deg, oklch(0.26 0 0 / 0.96), oklch(0.12 0 0 / 0.94));
  --start-button-bg-hover: linear-gradient(135deg, oklch(0.34 0 0 / 0.98), oklch(0.18 0 0 / 0.96));
  --start-button-border-hover: oklch(0.92 0 0 / 0.9);
  --start-button-flow-soft: oklch(1 0 0 / 0.12);
  --start-button-flow-strong: oklch(1 0 0 / 0.48);
  --start-button-glow: oklch(1 0 0 / 0.13);
  color: oklch(0.96 0 0);
  border-color: oklch(0.82 0 0);
}

.pixel-button.is-primary {
  background: oklch(0.14 0 0);
  border-color: oklch(0.14 0 0);
}

:root[data-theme="dark"] .pixel-button.is-primary {
  color: oklch(0.08 0 0);
  background: oklch(0.92 0 0);
  border-color: oklch(0.92 0 0);
}

.pixel-button.is-danger,
.mini-button.is-danger {
  background: oklch(0.24 0 0);
  border-color: oklch(0.24 0 0);
}

.action-button,
.pixel-button,
.mini-button,
.file-button,
.system-button,
.settings-entry-button,
.shop-category-tab,
.modal-option {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.22), transparent 62%),
    var(--panel);
  border-color: var(--line);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.18),
    0 8px 24px oklch(0 0 0 / 0.08);
}

.action-button:hover:not(:disabled),
.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.shop-category-tab:hover,
.modal-option:hover:not(:disabled),
.rail-shortcut:hover:not(:disabled) {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.24),
    0 12px 28px oklch(0 0 0 / 0.12);
}

.start-entry-icon,
.start-small-icon,
.start-feature-icon,
.start-toolbar-icon,
.start-achievement-icon,
.start-panel-title-icon,
.action-icon,
.system-icon,
.settings-entry-icon,
.status-icon,
.meter-icon,
.shop-icon,
.rail-shortcut-icon,
.achievement-gallery-item > span,
.achievement-toast-icon {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: currentColor;
  padding: 0;
}

.start-entry-icon {
  width: min(100%, 84px);
  height: auto;
  aspect-ratio: 1;
}

.start-small-icon {
  width: min(100%, 60px);
  height: auto;
  aspect-ratio: 1;
}

.start-feature-icon {
  width: min(100%, 52px);
  height: auto;
  aspect-ratio: 1;
}

.start-toolbar-icon {
  width: min(100%, 50px);
  height: auto;
  aspect-ratio: 1;
}

.start-achievement-icon {
  width: min(100%, 44px);
  height: auto;
  aspect-ratio: 1;
}

.action-icon,
.status-icon,
.meter-icon,
.settings-entry-icon,
.rail-shortcut-icon {
  width: min(100%, 44px);
  height: auto;
  aspect-ratio: 1;
}

.system-button .system-icon,
.right-entry-grid .system-button .system-icon,
.course-entry-grid .system-button .system-icon,
.start-settings-button .settings-entry-icon {
  width: min(100%, 52px);
  height: auto;
  aspect-ratio: 1;
}

.start-entry-icon img,
.start-small-icon img,
.start-feature-icon img,
.start-toolbar-icon img,
.start-achievement-icon img,
.action-icon img,
.system-icon img,
.settings-entry-icon img,
.status-icon img,
.meter-icon img,
.shop-icon img,
.achievement-gallery-item > span img {
  filter: grayscale(1) contrast(1.08) drop-shadow(0 2px 0 oklch(0 0 0 / 0.22));
}

.start-entry-icon:has(img),
.start-small-icon:has(img),
.start-feature-icon:has(img),
.start-toolbar-icon:has(img),
.start-achievement-icon:has(img),
.action-icon:has(img),
.system-icon:has(img),
.settings-entry-icon:has(img),
.status-icon:has(img),
.meter-icon:has(img),
.shop-icon:has(img) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.start-entry-button.is-primary .start-entry-icon,
.start-small-card.is-warm .start-small-icon,
.system-button .system-icon,
.right-entry-grid .system-button .system-icon,
.course-entry-grid .system-button .system-icon,
.start-settings-button .settings-entry-icon,
.settings-entry-button .settings-entry-icon,
.icon-mini-button .settings-entry-icon,
.character-avatar,
.avatar-block,
.mentor-avatar {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.character-avatar,
.avatar-block,
.mentor-avatar {
  padding: 0;
}

.start-toolbar-button {
  grid-template-columns: 52px minmax(0, 1fr);
}

.start-settings-button {
  grid-template-columns: 54px minmax(0, 1fr);
}

.icon-mini-button {
  grid-template-columns: 34px minmax(0, 1fr);
}

.start-software-row i {
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.meter-card,
.metric-card,
.balance-card,
.track-card,
.lyric-line,
.achievement-gallery-item,
.shop-item,
.shop-category-tabs {
  border-radius: 14px;
  border-color: var(--line);
  box-shadow: none;
}

.entry-status,
.delta-chip,
.start-feature-tags span,
.start-leaderboard-empty,
.field input {
  border-radius: 999px;
}

.modal-backdrop,
:root[data-theme="dark"] .modal-backdrop {
  background: oklch(0 0 0 / 0.58);
}

.modal-card,
:root[data-theme="dark"] .modal-card {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 4%), var(--panel));
  border-color: var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 28px 80px oklch(0 0 0 / 0.28);
}

.opening-fixed-card,
.modal-card.opening-fixed-opening_ceremony,
.modal-card.opening-fixed-military_training,
.modal-card.opening-fixed-architecture_life_start {
  --opening-bg-a: oklch(0.22 0 0);
  --opening-bg-b: oklch(0.08 0 0);
  --opening-accent: oklch(0.82 0 0);
}

.shop-category-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  box-shadow: none;
}

.shop-category-tab.is-active b {
  color: var(--ink);
  background: var(--bg);
}

.support-modal {
  width: min(1040px, 100%);
}

.support-layout {
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.support-right-column {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
  align-content: start;
}

.support-copy {
  min-height: 0;
  align-content: start;
  padding: 4px 2px 0;
}

.support-copy h2 {
  font-size: 1.65rem;
}

.support-copy p {
  font-size: 1rem;
  line-height: 1.75;
}

.support-qr-card {
  min-height: 0;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
  border-radius: 16px;
  border-color: var(--line);
}

.support-qr-card img {
  border-color: var(--line);
  border-radius: 12px;
}

.support-ending-card {
  min-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--panel-soft);
  border-color: var(--line);
  border-radius: 16px;
}

.support-ending-card img {
  width: 100%;
  height: auto;
  max-height: min(420px, 44dvh);
  display: block;
  object-fit: contain;
  background: var(--panel-soft);
  border: 0;
  border-radius: 0;
  image-rendering: auto;
}

@media (max-height: 900px) and (min-width: 1201px) {
  .action-button {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .action-icon {
    width: min(100%, 38px);
  }
}


:root[data-theme="light"] .modal-card.opening-fixed-card,
:root[data-theme="dark"] .modal-card.opening-fixed-card,
.modal-card.opening-fixed-card,
.modal-card.opening-fixed-opening_ceremony,
.modal-card.opening-fixed-military_training,
.modal-card.opening-fixed-architecture_life_start {
  --opening-bg-a: oklch(0.18 0 0);
  --opening-bg-b: oklch(0.06 0 0);
  --opening-accent: oklch(0.82 0 0);
  background:
    radial-gradient(circle at 86% 12%, oklch(1 0 0 / 0.1), transparent 28%),
    linear-gradient(135deg, var(--opening-bg-a), var(--opening-bg-b));
  border-color: oklch(0.72 0 0);
}

.modal-card.event-card .modal-media img {
  filter: grayscale(1) contrast(1.06) brightness(0.94);
}

.opening-fixed-card .modal-media img {
  background: oklch(0.1 0 0);
  border-color: oklch(0.62 0 0);
  box-shadow: 0 0 36px oklch(1 0 0 / 0.1);
}

.opening-fixed-card .modal-option {
  background: oklch(1 0 0 / 0.08);
  border-color: oklch(1 0 0 / 0.24);
}

.opening-fixed-card .modal-option:hover:not(:disabled) {
  background: oklch(1 0 0 / 0.16);
  border-color: oklch(1 0 0 / 0.42);
}

/* 2026 opening polish: black/white minimal UI chrome. Do not recolor generated art or PNG icons. */
:root {
  --radius: 8px;
  --surface-bg: oklch(0.965 0 0);
  --surface-grid: oklch(0.88 0 0);
  --surface-grid-strong: oklch(0.72 0 0);
  --surface-panel: oklch(0.995 0 0 / 0.96);
  --surface-panel-soft: oklch(0.94 0 0);
  --text-main: oklch(0.08 0 0);
  --text-muted: oklch(0.28 0 0);
  --text-faint: oklch(0.5 0 0);
  --line-subtle: oklch(0.68 0 0);
  --line-strong: oklch(0.12 0 0);
  --accent-primary: oklch(0.18 0 0);
  --accent-primary-strong: oklch(0.04 0 0);
  --accent-warning: oklch(0.36 0 0);
  --accent-success: oklch(0.28 0 0);
  --accent-danger: oklch(0.16 0 0);
  --focus-ring: oklch(0.06 0 0);
}

:root[data-theme="dark"] {
  --surface-bg: oklch(0.055 0 0);
  --surface-grid: oklch(0.19 0 0);
  --surface-grid-strong: oklch(0.32 0 0);
  --surface-panel: oklch(0.11 0 0 / 0.97);
  --surface-panel-soft: oklch(0.18 0 0);
  --text-main: oklch(0.96 0 0);
  --text-muted: oklch(0.78 0 0);
  --text-faint: oklch(0.62 0 0);
  --line-subtle: oklch(0.36 0 0);
  --line-strong: oklch(0.86 0 0);
  --accent-primary: oklch(0.82 0 0);
  --accent-primary-strong: oklch(0.96 0 0);
  --accent-warning: oklch(0.72 0 0);
  --accent-success: oklch(0.78 0 0);
  --accent-danger: oklch(0.9 0 0);
  --focus-ring: oklch(0.96 0 0);
}

.start-scene-art img,
:root[data-theme="dark"] .start-scene-art img,
.modal-card.event-card .modal-media img,
.summer-card .modal-option:hover:not(:disabled) .modal-option-media img,
.achievement-gallery-item.is-locked > span img,
.start-entry-icon img,
.start-small-icon img,
.start-feature-icon img,
.start-toolbar-icon img,
.start-achievement-icon img,
.action-icon img,
.system-icon img,
.settings-entry-icon img,
.status-icon img,
.meter-icon img,
.shop-icon img,
.achievement-gallery-item > span img,
.character-avatar img,
.avatar-block img,
.mentor-avatar img {
  filter: none;
}

.start-scene-art img,
:root[data-theme="dark"] .start-scene-art img {
  opacity: 1;
}

.modal-card.event-card .modal-media img,
.support-ending-card img {
  image-rendering: auto;
}

.loading-panel {
  font-family: var(--font-pixel);
  border-radius: 8px;
}

.loading-bar {
  height: 18px;
  padding: 3px;
  background: rgb(255 255 255 / 0.08);
  border: 2px solid rgb(255 255 255 / 0.68);
  border-radius: 0;
}

.loading-bar span {
  position: relative;
  width: var(--loading-progress, 0%);
  inline-size: var(--loading-progress, 0%);
  min-width: 0;
  background:
    linear-gradient(90deg, rgb(255 255 255) 0 72%, rgb(210 210 210) 72% 100%);
  border-radius: 0;
  box-shadow: none;
  transition: inline-size 140ms cubic-bezier(0.22, 0.86, 0.24, 1);
}

.loading-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.22), transparent);
  transform: translateX(-100%);
  animation: openingLoadScan 820ms steps(8, end) infinite;
}

.loading-bar em {
  color: white;
  mix-blend-mode: normal;
  text-shadow: 1px 1px 0 black;
}

.start-shell {
  --start-paper: oklch(0.982 0 0 / 0.9);
  --start-paper-solid: oklch(0.996 0 0 / 0.96);
  --start-panel-ink: oklch(0.06 0 0);
  --start-panel-muted: oklch(0.27 0 0);
  --start-panel-line: oklch(0.58 0 0 / 0.75);
  --start-panel-line-strong: oklch(0.06 0 0);
  --start-blue: oklch(0.08 0 0);
  --start-blue-soft: oklch(0.12 0 0 / 0.12);
  --start-gold: oklch(0.26 0 0);
  --start-shadow: oklch(0 0 0 / 0.2);
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.98), oklch(0.94 0 0 / 0.94));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.12 0 0 / 0.98), oklch(0.04 0 0 / 0.98));
  --start-button-inner: oklch(1 0 0 / 0.28);
  --start-button-border-hover: oklch(0.04 0 0);
  --start-button-flow-soft: oklch(1 0 0 / 0.12);
  --start-button-flow-strong: oklch(1 0 0 / 0.52);
  --start-button-glow: oklch(0 0 0 / 0.18);
  background: oklch(0.94 0 0);
}

:root[data-theme="dark"] .start-shell {
  --start-paper: oklch(0.1 0 0 / 0.9);
  --start-paper-solid: oklch(0.13 0 0 / 0.96);
  --start-panel-ink: oklch(0.96 0 0);
  --start-panel-muted: oklch(0.76 0 0);
  --start-panel-line: oklch(0.44 0 0 / 0.72);
  --start-panel-line-strong: oklch(0.96 0 0);
  --start-blue: oklch(0.96 0 0);
  --start-blue-soft: oklch(1 0 0 / 0.12);
  --start-gold: oklch(0.74 0 0);
  --start-shadow: oklch(0 0 0 / 0.52);
  --start-button-bg: linear-gradient(180deg, oklch(0.18 0 0 / 0.96), oklch(0.09 0 0 / 0.96));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.92 0 0 / 0.98), oklch(0.8 0 0 / 0.98));
  --start-button-border-hover: oklch(0.96 0 0);
  --start-button-glow: oklch(1 0 0 / 0.14);
  background: oklch(0.055 0 0);
}

.start-shell::after {
  width: min(48vw, 760px);
  background:
    linear-gradient(90deg, var(--start-paper-solid) 0%, var(--start-paper) 76%, transparent 100%);
  box-shadow: 22px 0 52px oklch(0 0 0 / 0.18);
}

.start-scene-art::after {
  background:
    linear-gradient(90deg, var(--start-paper-solid) 0%, color-mix(in oklch, var(--start-paper-solid), transparent 18%) 9%, transparent 22%),
    linear-gradient(180deg, color-mix(in oklch, var(--start-paper-solid), transparent 50%) 0%, transparent 14%, transparent 86%, color-mix(in oklch, var(--start-paper-solid), transparent 48%) 100%);
}

.start-title-panel {
  position: relative;
  padding-left: 50px;
}

.start-title-panel::before,
.start-title-panel::after {
  color: var(--start-panel-line-strong);
  border-color: currentColor;
}

.title-stack h1 .title-primary {
  color: var(--start-panel-ink);
  text-shadow: 4px 4px 0 oklch(0 0 0 / 0.12);
}

:root[data-theme="dark"] .title-stack h1 .title-primary {
  text-shadow: 4px 4px 0 oklch(1 0 0 / 0.12);
}

.title-stack h1 .title-secondary,
.start-title-panel .english-line,
.start-signal-row span,
.start-signal-row i {
  color: var(--start-panel-ink);
}

.start-brand-mark {
  filter: none;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile,
.start-leaderboard-panel,
.start-achievement-panel,
.start-ready-panel,
.start-entry-panel .profile-form {
  border-radius: 8px;
  clip-path: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile {
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.2),
    0 12px 28px oklch(0 0 0 / 0.12);
  transition:
    color 180ms ease-out,
    background 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms cubic-bezier(0.18, 0.84, 0.28, 1);
}

.start-entry-button::before,
.start-small-card::before,
.start-toolbar-button::before,
.start-achievement-tile::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid color-mix(in oklch, currentColor, transparent 78%);
  opacity: 0.42;
  pointer-events: none;
  transition: inset 180ms ease-out, opacity 180ms ease-out;
}

.start-entry-button::after,
.start-small-card::after,
.start-toolbar-button::after,
.start-achievement-tile::after {
  inset: 0 auto 0 -38%;
  width: 28%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.52), transparent);
  transform: translateX(-20%) skewX(-16deg);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover {
  color: oklch(0.98 0 0);
  background: var(--start-button-bg-hover);
  border-color: var(--start-button-border-hover);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.18),
    0 16px 32px oklch(0 0 0 / 0.18);
  transform: translateY(-2px);
}

:root[data-theme="dark"] .start-entry-button:hover:not(:disabled),
:root[data-theme="dark"] .start-small-card:hover,
:root[data-theme="dark"] .start-toolbar-button:hover,
:root[data-theme="dark"] .start-achievement-tile:hover {
  color: oklch(0.06 0 0);
}

.start-entry-button:hover:not(:disabled)::before,
.start-small-card:hover::before,
.start-toolbar-button:hover::before,
.start-achievement-tile:hover::before {
  inset: 7px;
  opacity: 0.7;
}

.start-entry-button.is-primary {
  --start-button-bg: linear-gradient(145deg, oklch(0.08 0 0 / 0.99), oklch(0.02 0 0 / 0.99));
  --start-button-bg-hover: linear-gradient(145deg, oklch(0.18 0 0 / 0.99), oklch(0.04 0 0 / 0.99));
  color: white;
  border-color: oklch(0.92 0 0 / 0.86);
}

.start-entry-button.is-primary:hover:not(:disabled) {
  color: white;
}

.start-small-card.is-warm {
  --start-button-bg: linear-gradient(145deg, oklch(0.16 0 0 / 0.98), oklch(0.05 0 0 / 0.98));
  --start-button-bg-hover: linear-gradient(145deg, oklch(0.24 0 0 / 0.98), oklch(0.08 0 0 / 0.98));
  color: white;
  border-color: oklch(0.84 0 0 / 0.76);
}

.start-entry-icon,
.start-small-icon,
.start-toolbar-icon,
.start-achievement-icon,
.start-panel-title-icon {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  padding: 0;
}

.start-entry-icon img,
.start-small-icon img,
.start-toolbar-icon img,
.start-achievement-icon img,
.start-panel-title-icon img {
  object-fit: contain;
}

.start-entry-icon {
  width: 84px;
}

.start-entry-arrow {
  color: currentColor;
  opacity: 0.76;
}

.start-entry-button:hover:not(:disabled) .start-entry-arrow {
  opacity: 1;
  transform: translateX(4px);
}

.start-entry-copy strong,
.start-small-card strong,
.start-toolbar-button strong,
.start-ready-panel strong {
  letter-spacing: 0;
}

.start-software-row {
  gap: 18px;
}

.start-software-row i {
  width: 64px;
  height: 58px;
  padding: 3px 4px 4px;
  color: var(--start-panel-ink);
  background: oklch(1 0 0 / 0.72);
  border: 2px solid var(--start-panel-line-strong);
  border-radius: 8px;
  box-shadow: 4px 4px 0 oklch(0 0 0 / 0.18);
}

:root[data-theme="dark"] .start-software-row i {
  background: oklch(0.18 0 0 / 0.86);
  box-shadow: 4px 4px 0 oklch(0 0 0 / 0.48);
}

.start-software-row i img {
  width: 40px;
  height: 40px;
}

.start-software-row i span {
  font-size: 0.64rem;
}

.start-ready-panel {
  width: 334px;
}

.start-ready-panel strong {
  font-size: 2.42rem;
  white-space: nowrap;
}

.start-about-panel {
  display: none;
}

.pixel-button,
.mini-button,
.file-button,
.action-button,
.system-button,
.settings-entry-button,
.modal-option,
.shop-category-tab {
  border-radius: 8px;
}

.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.action-button:hover:not(:disabled),
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.modal-option:hover:not(:disabled),
.shop-category-tab:hover {
  transform: translateY(-2px);
}

.pixel-button:active:not(:disabled),
.mini-button:active:not(:disabled),
.file-button:active,
.action-button:active:not(:disabled),
.system-button:active:not(:disabled),
.settings-entry-button:active:not(:disabled),
.modal-option:active:not(:disabled),
.shop-category-tab:active {
  transform: translateY(0) scale(0.995);
}

.character-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto;
  gap: 24px;
  align-content: start;
  padding: 34px 30px 28px;
  overflow-x: hidden;
  background:
    linear-gradient(var(--surface-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-grid) 1px, transparent 1px),
    linear-gradient(var(--surface-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-grid-strong) 1px, transparent 1px),
    var(--surface-bg);
  background-size: 12px 12px, 12px 12px, 96px 96px, 96px 96px, auto;
}

.character-header {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0 0 6px;
  align-items: start;
}

.character-header h1 {
  color: var(--ink);
  font-size: clamp(2.15rem, 3.2vw, 3.2rem);
  line-height: 0.96;
}

.character-header p {
  color: var(--muted);
  font-size: 0.95rem;
}

.character-header .kicker {
  color: var(--ink);
  font-size: 0.82rem;
}

.character-grid {
  width: min(1160px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: -2px auto 0;
}

.character-card {
  min-height: 430px;
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.26),
    0 14px 32px oklch(0 0 0 / 0.1);
}

.character-card:hover {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.28),
    0 18px 38px oklch(0 0 0 / 0.14);
}

.character-card-head {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
}

.character-avatar {
  width: 78px;
  padding: 4px;
  background: oklch(1 0 0 / 0.64);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

:root[data-theme="dark"] .character-avatar {
  background: oklch(0.2 0 0 / 0.82);
}

.mini-attrs div {
  padding: 7px 0;
  border-bottom-color: color-mix(in oklch, var(--line), transparent 18%);
}

.trait-block {
  padding-top: 2px;
  border-top: 1px solid color-mix(in oklch, var(--line), transparent 24%);
}

.character-card .pixel-button.is-primary {
  min-height: 48px;
  background: oklch(0.08 0 0);
  border-color: oklch(0.08 0 0);
}

:root[data-theme="dark"] .character-card .pixel-button.is-primary {
  color: oklch(0.06 0 0);
  background: oklch(0.94 0 0);
  border-color: oklch(0.94 0 0);
}

.character-shell > .music-dock {
  width: min(1880px, 100%);
  min-height: 250px;
  margin: -2px auto 0;
  align-content: start;
  padding: 18px 20px;
  background: oklch(0.995 0 0 / 0.92);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px oklch(0 0 0 / 0.08);
}

:root[data-theme="dark"] .character-shell > .music-dock {
  background: oklch(0.12 0 0 / 0.94);
}

.character-shell > .music-dock .track-card {
  min-height: 86px;
}

.character-shell > .music-dock .music-controls {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

@keyframes openingLoadScan {
  to {
    transform: translateX(100%);
  }
}

@media (min-width: 1201px) {
  .start-hero {
    grid-template-columns: minmax(560px, 40vw) minmax(360px, 1fr);
    grid-template-rows: auto auto minmax(214px, 1fr) auto;
    gap: 14px 34px;
    padding: 44px 44px 28px 58px;
    overflow: hidden;
  }

  .start-title-panel {
    max-width: 720px;
  }

  .start-brand-mark {
    left: min(35.5vw, 548px);
  }

  .start-entry-panel {
    grid-row: 2;
  }

  .start-secondary-grid {
    grid-row: 3;
    align-content: start;
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    grid-row: 4;
    align-self: end;
    min-height: 244px;
  }

  .start-leaderboard-panel {
    width: min(410px, calc(50vw - 92px));
  }

  .start-achievement-panel {
    width: min(360px, calc(50vw - 92px));
    margin-left: min(420px, calc(50vw - 84px));
  }

  .start-ready-panel {
    right: 44px;
    bottom: 84px;
  }

  .start-toolbar {
    right: 44px;
    bottom: 24px;
  }
}

@media (max-width: 1200px) {
  .character-shell::before,
  .character-shell::after {
    display: none;
  }

}


/* Start screen final polish: restrained launcher color, softer motion, aligned archive panels. */
:root[data-theme="dark"] {
  --text-main: oklch(0.985 0.014 84);
  --text-muted: oklch(0.86 0.024 86);
  --text-faint: oklch(0.72 0.024 88);
}

:root[data-theme="dark"] .start-shell {
  --start-panel-ink: oklch(0.985 0 0);
  --start-panel-muted: oklch(0.84 0 0);
  --start-panel-line: oklch(0.5 0 0 / 0.76);
  --start-panel-line-strong: oklch(0.98 0 0);
}

.start-scene-art img {
  filter: none;
}

:root[data-theme="dark"] .start-scene-art img {
  filter: brightness(1.06) contrast(1.1);
}

.start-quote-line {
  position: absolute;
  top: clamp(30px, 5.2vh, 58px);
  right: clamp(28px, 3.4vw, 48px);
  z-index: 4;
  max-width: min(380px, 32vw);
  margin: 0;
  color: color-mix(in oklch, var(--start-panel-ink), transparent 5%);
  font-size: clamp(0.82rem, 0.92vw, 0.96rem);
  line-height: 1.7;
  text-align: right;
  text-shadow: 0 1px 0 oklch(1 0 0 / 0.68), 0 16px 34px oklch(1 0 0 / 0.38);
}

:root[data-theme="dark"] .start-quote-line {
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.72), 0 14px 34px oklch(0 0 0 / 0.56);
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile {
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.18),
    0 10px 28px oklch(0 0 0 / 0.11);
  transition:
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-entry-button::before,
.start-small-card::before,
.start-toolbar-button::before,
.start-achievement-tile::before {
  opacity: 0.26;
  transition:
    inset 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-entry-button::after,
.start-small-card::after,
.start-toolbar-button::after,
.start-achievement-tile::after,
.start-link-button::after {
  inset: -34% auto -34% -92%;
  width: 92%;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      oklch(1 0 0 / 0.05) 18%,
      oklch(1 0 0 / 0.5) 46%,
      oklch(1 0 0 / 0.86) 52%,
      oklch(1 0 0 / 0.42) 62%,
      transparent 100%
    );
  transform: translate3d(-18%, 0, 0) skewX(-16deg);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover {
  color: var(--start-panel-ink);
  background:
    linear-gradient(180deg, oklch(0.995 0.01 86 / 0.98), oklch(0.91 0.025 84 / 0.92));
  border-color: color-mix(in oklch, var(--start-panel-line-strong), transparent 18%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.24),
    0 14px 34px oklch(0 0 0 / 0.14);
  transform: translateY(-1px);
}

:root[data-theme="dark"] .start-entry-button:hover:not(:disabled),
:root[data-theme="dark"] .start-small-card:hover,
:root[data-theme="dark"] .start-toolbar-button:hover,
:root[data-theme="dark"] .start-achievement-tile:hover {
  color: var(--start-panel-ink);
  background:
    linear-gradient(180deg, oklch(0.24 0.035 252 / 0.96), oklch(0.14 0.028 252 / 0.94));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.14),
    0 14px 34px oklch(0 0 0 / 0.42);
}

.start-entry-button.is-primary:hover:not(:disabled),
:root[data-theme="dark"] .start-entry-button.is-primary:hover:not(:disabled),
.start-small-card.is-warm:hover {
  color: white;
  background:
    linear-gradient(145deg, oklch(0.36 0.14 252 / 0.99), oklch(0.18 0.12 256 / 0.99));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18);
}

.start-entry-button:hover:not(:disabled)::before,
.start-small-card:hover::before,
.start-toolbar-button:hover::before,
.start-achievement-tile:hover::before {
  inset: 6px;
  opacity: 0.48;
}

.start-entry-button:hover:not(:disabled)::after,
.start-small-card:hover::after,
.start-toolbar-button:hover::after,
.start-link-button:hover::after,
.start-achievement-tile:hover::after {
  opacity: 0;
  animation: startButtonFlowSoft 1280ms cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.start-leaderboard-panel,
.start-achievement-panel {
  min-height: 252px;
  height: 252px;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.start-leaderboard-empty {
  min-height: 0;
  border-style: solid;
  border-radius: 0;
}

.start-leaderboard-panel .start-panel-title-icon {
  border-radius: 0;
}

@media (min-width: 1201px) {
  .start-hero {
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 8px 34px;
    padding: 32px 44px 22px 58px;
  }

  .title-stack h1 .title-primary {
    font-size: clamp(3.45rem, 4.35vw, 4.45rem);
  }

  .title-stack h1 .title-secondary {
    margin-top: 6px;
    font-size: clamp(1.12rem, 1.7vw, 1.58rem);
  }

  .start-title-panel .english-line {
    font-size: 0.86rem;
  }

  .start-brand-mark {
    top: 10px;
    width: 86px;
    height: 86px;
  }

  .start-main-actions {
    gap: 10px;
  }

  .start-entry-button {
    min-height: 84px;
    grid-template-columns: 68px minmax(0, 1fr) 32px;
    gap: 14px;
    padding: 12px 22px 12px 28px;
  }

  .start-entry-button.is-primary {
    min-height: 118px;
  }

  .start-entry-icon {
    width: 64px;
  }

  .start-entry-copy strong {
    font-size: 1.42rem;
  }

  .start-entry-copy em {
    font-size: 0.82rem;
  }

  .start-secondary-grid {
    gap: 8px;
  }

  .start-small-card {
    min-height: 74px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 14px;
  }

  .start-small-icon {
    width: 44px;
  }

  .start-small-card strong {
    font-size: 0.92rem;
  }

  .start-small-card em {
    margin-top: 4px;
    font-size: 0.68rem;
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    width: 286px;
    min-height: 216px;
    height: 216px;
    padding: 16px;
    transform: none;
  }

  .start-achievement-panel {
    margin-left: 304px;
  }

  .start-leaderboard-empty {
    gap: 6px;
    margin-top: 10px;
    padding: 10px;
  }

  .start-achievement-grid {
    gap: 8px;
    margin-top: 10px;
  }

  .start-achievement-tile {
    min-height: 48px;
    padding: 6px;
  }

  .start-achievement-panel p {
    margin-top: 8px;
  }
}

@media (max-width: 1200px) {
  .start-quote-line {
    position: static;
    max-width: 760px;
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    height: auto;
    min-height: 0;
    transform: none;
  }
}


/* Character draw: large role cards with one-line campus radio. */
.music-dock {
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.music-dock audio,
.music-status[hidden] {
  display: none;
}

.track-card {
  min-height: 72px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 16px 8px 8px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--panel), white 12%), var(--panel-soft));
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px oklch(0 0 0 / 0.08);
}

:root[data-theme="dark"] .track-card {
  background:
    linear-gradient(90deg, oklch(0.18 0 0 / 0.96), oklch(0.12 0 0 / 0.94));
}

.track-card::before {
  content: none;
}

.album-disc {
  width: 56px;
  height: 56px;
  grid-column: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: oklch(0.08 0 0);
  border: 2px solid var(--line-strong);
  border-radius: 50%;
}

.album-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  border-radius: 50%;
  animation: albumSpin 8s linear infinite;
  animation-delay: var(--album-spin-delay, 0s);
}

.track-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  grid-column: auto;
}

.track-card strong,
.track-card span,
.track-copy span {
  min-width: 0;
  grid-column: auto;
}

.track-card strong {
  color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.32rem);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-card [data-track-meta] {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-station {
  width: fit-content;
  margin: 0;
  padding: 2px 7px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel-soft), white 16%);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

:root[data-theme="dark"] .music-station {
  background: oklch(0.24 0 0 / 0.92);
}

.character-shell {
  min-height: 100dvh;
  grid-template-rows: auto minmax(520px, 1fr) auto;
  gap: 20px;
  padding: 30px clamp(18px, 3vw, 48px) 22px;
}

.character-header,
.character-grid,
.character-shell > .music-dock {
  width: min(1540px, 100%);
}

.character-header {
  margin-bottom: 0;
}

.character-grid {
  gap: 24px;
  align-items: stretch;
}

.character-card {
  min-height: clamp(540px, 62dvh, 720px);
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  padding: 24px;
}

.character-card-head {
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 20px;
}

.character-avatar {
  width: 128px;
  padding: 8px;
}

.character-card h2 {
  font-size: clamp(1.42rem, 1.75vw, 1.92rem);
  line-height: 1.1;
}

.character-card-head p {
  font-size: 0.94rem;
}

.character-shell > .music-dock {
  min-height: 0;
  margin: 0 auto;
  align-content: normal;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.character-shell > .music-dock .track-card {
  min-height: 76px;
}

.sidebar .music-dock {
  max-height: none;
  padding: 0;
}

.sidebar .track-card {
  min-height: 58px;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 9px 7px 7px;
}

.sidebar .album-disc {
  width: 44px;
  height: 44px;
}

.sidebar .track-card strong {
  font-size: 0.9rem;
}

.sidebar .music-station {
  display: inline-block;
  font-size: 0.62rem;
}

@keyframes albumSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .album-disc img {
    animation: none;
  }
}

@media (max-width: 1200px) {
  .character-shell {
    grid-template-rows: auto auto auto;
  }

  .character-card {
    min-height: 520px;
  }
}


/* Requested launcher refinement: monochrome UI chrome and deeper loading blue. */
:root {
  --accent-primary: oklch(0.18 0 0);
  --accent-primary-strong: oklch(0.04 0 0);
  --accent-warning: oklch(0.36 0 0);
  --accent-success: oklch(0.28 0 0);
  --accent-danger: oklch(0.54 0.2 25);
  --danger: var(--accent-danger);
}

:root[data-theme="dark"] {
  --text-main: oklch(0.985 0 0);
  --text-muted: oklch(0.86 0 0);
  --text-faint: oklch(0.7 0 0);
  --accent-primary: oklch(0.82 0 0);
  --accent-primary-strong: oklch(0.96 0 0);
  --accent-warning: oklch(0.72 0 0);
  --accent-success: oklch(0.78 0 0);
  --accent-danger: oklch(0.74 0.18 25);
  --danger: var(--accent-danger);
}

.loading-copy .loading-copy-primary {
  color: oklch(0.7 0.27 28);
  text-shadow:
    0 1px 0 oklch(0 0 0 / 0.32),
    0 0 18px oklch(0.64 0.26 28 / 0.34),
    0 0 4px oklch(0.86 0.12 36 / 0.26);
}

.loading-bar {
  height: 18px;
  padding: 3px;
  background:
    linear-gradient(180deg, oklch(0.12 0.07 256 / 0.48), oklch(0.025 0.035 262 / 0.58));
  border-color: oklch(0.52 0.13 238 / 0.78);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.08),
    0 0 22px oklch(0.3 0.16 252 / 0.2);
  contain: paint;
  overflow: hidden;
}

.loading-bar span {
  width: 100%;
  inline-size: 100%;
  transform: scaleX(var(--loading-progress-ratio, 0));
  transform-origin: left center;
  background:
    linear-gradient(
      90deg,
      oklch(0.25 0.16 260) 0%,
      oklch(0.36 0.19 252) 38%,
      oklch(0.48 0.17 238) 72%,
      oklch(0.67 0.09 218) 100%
    );
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.34),
    0 0 20px oklch(0.34 0.18 250 / 0.32);
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.loading-bar span::after {
  inset: -45% auto -45% 0;
  width: 36%;
  background:
    linear-gradient(90deg, transparent, oklch(0.58 0.12 230 / 0.32), oklch(0.9 0.02 230 / 0.62), transparent);
  transform: translate3d(-160%, 0, 0) skewX(-14deg);
  animation: openingLoadScanSmooth 1600ms linear infinite;
  will-change: transform;
}

.loading-bar em {
  display: none !important;
}

.risk-banner {
  color: oklch(0.985 0 0);
  background:
    linear-gradient(135deg, oklch(0.34 0.09 28), oklch(0.22 0.06 28));
  border: 1px solid oklch(0.66 0.08 28 / 0.72);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12), 0 14px 34px oklch(0 0 0 / 0.16);
}

.action-copy .action-warning,
.modal-option .modal-warning {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  color: var(--danger);
  background: color-mix(in oklch, var(--danger), transparent 88%);
  border: 1px solid color-mix(in oklch, var(--danger), transparent 58%);
  border-radius: 6px;
  font-weight: 800;
}

.pixel-button.is-danger,
.mini-button.is-danger {
  color: oklch(0.98 0 0);
  background:
    linear-gradient(180deg, oklch(0.42 0.1 28), oklch(0.25 0.07 28));
  border-color: oklch(0.72 0.08 28);
}

.start-shell {
  --start-paper: oklch(0.978 0 0 / 0.9);
  --start-paper-solid: oklch(0.995 0 0 / 0.96);
  --start-panel-ink: oklch(0.045 0 0);
  --start-panel-muted: oklch(0.31 0 0);
  --start-panel-line: oklch(0.18 0 0 / 0.52);
  --start-panel-line-strong: oklch(0.08 0 0);
  --start-blue: oklch(0.08 0 0);
  --start-blue-soft: oklch(0.12 0 0 / 0.12);
  --start-gold: oklch(0.26 0 0);
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.96), oklch(0.9 0 0 / 0.9));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0), oklch(0.94 0 0 / 0.94));
  color: var(--start-panel-ink);
}

:root[data-theme="dark"] .start-shell {
  --start-paper: oklch(0.13 0 0 / 0.9);
  --start-paper-solid: oklch(0.17 0 0 / 0.96);
  --start-panel-ink: oklch(0.975 0 0);
  --start-panel-muted: oklch(0.82 0 0);
  --start-panel-line: oklch(0.74 0 0 / 0.34);
  --start-panel-line-strong: oklch(0.95 0 0);
  --start-blue: oklch(0.96 0 0);
  --start-blue-soft: oklch(1 0 0 / 0.12);
  --start-gold: oklch(0.74 0 0);
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.96), oklch(0.13 0 0 / 0.95));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.3 0 0 / 0.98), oklch(0.18 0 0 / 0.96));
}

.start-signal-row,
.start-title-panel::before,
.start-title-panel::after,
.start-quote-line,
.start-shell > .music-dock::before {
  display: none !important;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile {
  border-radius: 8px;
  transition:
    color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-entry-button:not(.is-primary),
.start-small-card:not(.is-warm),
.start-toolbar-button,
.start-achievement-tile {
  border-color: oklch(0.12 0 0 / 0.74);
}

:root[data-theme="dark"] .start-entry-button:not(.is-primary),
:root[data-theme="dark"] .start-small-card:not(.is-warm),
:root[data-theme="dark"] .start-toolbar-button,
:root[data-theme="dark"] .start-achievement-tile {
  border-color: oklch(0.9 0 0 / 0.45);
}

.start-entry-button.is-primary,
.start-small-card.is-warm {
  color: oklch(0.985 0 0);
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.99), oklch(0.07 0 0 / 0.99) 58%, oklch(0.14 0 0 / 0.99));
  border-color: oklch(0.96 0 0 / 0.78);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.18),
    0 18px 42px oklch(0 0 0 / 0.18);
}

:root[data-theme="dark"] .start-entry-button.is-primary,
:root[data-theme="dark"] .start-small-card.is-warm {
  background:
    linear-gradient(135deg, oklch(0.26 0 0 / 0.98), oklch(0.09 0 0 / 0.98) 62%, oklch(0.17 0 0 / 0.98));
  border-color: oklch(0.98 0 0 / 0.74);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover {
  transform: translateY(-1px);
}

.start-entry-button::after,
.start-small-card::after,
.start-toolbar-button::after,
.start-achievement-tile::after,
.start-link-button::after {
  inset: -34% auto -34% -92%;
  width: 92%;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      oklch(1 0 0 / 0.05) 18%,
      oklch(1 0 0 / 0.5) 46%,
      oklch(1 0 0 / 0.86) 52%,
      oklch(1 0 0 / 0.42) 62%,
      transparent 100%
    );
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-18%, 0, 0) skewX(-16deg);
}

.start-entry-button:hover:not(:disabled)::after,
.start-small-card:hover::after,
.start-toolbar-button:hover::after,
.start-link-button:hover::after,
.start-achievement-tile:hover::after {
  animation: startButtonFlowSoft 1280ms cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.start-entry-button.is-primary {
  min-height: clamp(126px, 14vh, 152px);
}

.start-entry-button.is-primary .start-entry-icon {
  width: clamp(74px, 6.5vw, 92px);
}

.start-entry-copy strong {
  color: inherit;
}

:root[data-theme="dark"] :is(.start-entry-copy strong, .start-small-card strong, .start-toolbar-button strong, .start-panel-head h2, .modal-copy h2, .achievement-section-head strong) {
  color: oklch(0.985 0.014 84);
}

:root[data-theme="dark"] :is(.start-entry-copy em, .start-small-card em, .start-ready-panel p, .start-achievement-panel p, .modal-copy p) {
  color: oklch(0.84 0.024 86);
}

:root[data-theme="dark"] .start-ready-panel p {
  color: #fff;
}

.start-small-card span:last-child {
  min-width: 0;
}

.start-small-card em {
  white-space: normal;
  line-height: 1.34;
}

.start-ready-panel {
  width: min(316px, calc(100vw - 56px));
  gap: 11px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--start-paper-solid), white 4%), var(--start-paper));
  border: 1px solid var(--start-panel-line-strong);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.2),
    0 18px 46px oklch(0 0 0 / 0.15);
}

:root[data-theme="dark"] .start-ready-panel {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.1),
    0 20px 52px oklch(0 0 0 / 0.46);
}

.start-ready-panel p {
  margin: 0;
  padding-top: 9px;
  color: color-mix(in oklch, var(--start-panel-ink), transparent 18%);
  border-top: 1px solid var(--start-panel-line);
  font-size: 0.78rem;
  line-height: 1.58;
}

.start-toolbar {
  gap: 8px;
}

.start-toolbar-button {
  min-width: 118px;
  min-height: 56px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 12px;
}

.start-toolbar-icon {
  width: 34px;
}

.start-toolbar-button strong {
  font-size: 0.68rem;
  line-height: 1.18;
  white-space: normal;
}

.start-leaderboard-empty,
.start-leaderboard-panel .start-panel-title-icon {
  border-radius: 0 !important;
}

.start-achievement-icon {
  width: 48px;
  height: 48px;
}

.achievement-modal {
  width: min(1120px, calc(100vw - 32px));
  gap: 16px;
}

.achievement-tabs {
  position: sticky;
  top: -18px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0 8px;
  background: linear-gradient(180deg, var(--panel), color-mix(in oklch, var(--panel), transparent 8%));
}

.achievement-tab {
  min-height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-weight: 900;
  text-decoration: none;
}

.achievement-tab.is-active {
  color: var(--bg);
  background: var(--ink);
  border-color: color-mix(in oklch, var(--ink), white 38%);
}

.achievement-sections {
  display: grid;
  gap: 18px;
}

.achievement-section {
  scroll-margin-top: 74px;
}

.achievement-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--ink);
}

.achievement-section-head strong {
  font-size: 1rem;
}

.achievement-section-head span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.achievement-gallery {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.achievement-gallery-item {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 9px 12px;
  padding: 12px;
  border-color: var(--line);
  border-radius: 8px;
}

.achievement-gallery-item > span {
  width: 58px;
  padding: 4px;
  border-radius: 6px;
}

.achievement-gallery-item strong {
  font-size: 0.98rem;
}

.achievement-gallery-item.is-unlocked {
  border-color: color-mix(in oklch, var(--line-strong), var(--ink) 18%);
}

.achievement-gallery-item.is-locked {
  opacity: 1;
  color: color-mix(in oklch, var(--muted), transparent 12%);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), black 3%), color-mix(in oklch, var(--panel-soft), black 8%));
}

.achievement-gallery-item.is-locked > span {
  opacity: 0.42;
  filter: grayscale(1) contrast(0.75);
}

.achievement-gallery-item.is-locked strong,
.achievement-gallery-item.is-locked p,
.achievement-gallery-item.is-locked em {
  color: color-mix(in oklch, var(--muted), transparent 24%);
}

@keyframes openingLoadScanSmooth {
  from {
    transform: translate3d(-160%, 0, 0) skewX(-14deg);
  }

  to {
    transform: translate3d(360%, 0, 0) skewX(-14deg);
  }
}

@keyframes startButtonFlowSoft {
  0% {
    opacity: 0;
    transform: translateX(-106%) skewX(-12deg);
  }

  34% {
    opacity: 0.26;
  }

  76% {
    opacity: 0.14;
  }

  100% {
    opacity: 0;
    transform: translateX(188%) skewX(-12deg);
  }
}

@media (min-width: 1201px) {
  .start-hero {
    grid-template-rows: auto auto auto auto;
    gap: 9px 34px;
    padding-bottom: 24px;
  }

  .start-secondary-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: stretch;
  }

  .start-small-card {
    min-height: 84px;
  }

  .start-entry-button.is-primary {
    min-height: 138px;
  }

  .start-entry-button.is-primary .start-entry-copy strong {
    font-size: 1.62rem;
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    height: 220px;
    min-height: 220px;
    margin-bottom: 8px;
  }

  .start-achievement-tile {
    min-height: 54px;
  }

  .start-ready-panel {
    right: 44px;
    bottom: 118px;
  }

  .start-toolbar {
    right: 44px;
    bottom: 24px;
  }
}

@media (max-width: 1200px) {
  .start-ready-panel {
    position: static;
  }

  .start-toolbar-button {
    min-width: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .loading-bar span::after,
  .start-entry-button:hover:not(:disabled)::after,
  .start-small-card:hover::after,
  .start-toolbar-button:hover::after,
  .start-link-button:hover::after,
  .start-achievement-tile:hover::after {
    animation: none !important;
  }
}

/* Launcher composition pass: title, menu alignment, and bottom tool polish. */
.start-brand-mark {
  display: none !important;
}

.start-title-panel {
  padding-left: 0;
}

.title-stack {
  gap: 4px;
}

.title-stack h1 {
  margin: 0;
}

.title-stack h1 .title-primary {
  font-size: clamp(3.7rem, 4.05vw, 4.35rem);
  line-height: 0.92;
  text-shadow: 3px 3px 0 oklch(0 0 0 / 0.14);
}

.title-stack h1 .title-secondary {
  margin-top: 8px;
  font-size: clamp(1.18rem, 1.42vw, 1.52rem);
  line-height: 1.05;
}

.start-title-panel .english-line {
  max-width: 520px;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.25;
}

.start-entry-panel,
.start-secondary-grid {
  transform: translateY(clamp(14px, 2.2vh, 24px));
}

.start-entry-button.is-primary .start-entry-icon img {
  transform: scale(1.08);
}

.start-ready-panel {
  width: min(520px, calc(100vw - 88px));
  gap: 12px;
  padding: 16px 22px 18px;
}

.start-ready-panel > span {
  display: none !important;
}

.start-ready-panel p {
  padding-top: 0;
  border-top: 0;
  font-size: clamp(0.96rem, 1.2vw, 1.12rem);
  line-height: 1.38;
  white-space: normal;
}

.start-software-row {
  justify-content: flex-start;
  gap: 24px;
}

.start-software-row i {
  width: 74px;
  height: 72px;
  padding: 0;
  color: var(--start-panel-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root[data-theme="dark"] .start-software-row i {
  background: transparent;
  box-shadow: none;
}

.start-software-row i img {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 3px 0 oklch(0 0 0 / 0.22));
}

.start-software-row i span {
  font-size: 0.72rem;
}

.start-toolbar-button {
  border-color: oklch(1 0 0 / 0.82);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    0 12px 28px oklch(0 0 0 / 0.12);
}

.start-toolbar {
  z-index: 6;
}

.start-ready-panel {
  z-index: 5;
}

:root[data-theme="dark"] .start-toolbar-button {
  border-color: oklch(1 0 0 / 0.74);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.2),
    0 12px 30px oklch(0 0 0 / 0.42);
}

@media (min-width: 1201px) {
  .start-hero {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: stretch;
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    align-self: end;
    margin-bottom: 2px;
    transform: none;
  }

  .start-ready-panel {
    right: 44px;
    bottom: 112px;
  }

  .start-toolbar {
    right: 44px;
    bottom: 24px;
  }
}

@media (max-width: 1200px) {
  .start-entry-panel,
  .start-secondary-grid {
    transform: none;
  }

  .start-ready-panel {
    width: 100%;
  }
}


/* Dialog and interaction refinement pass: tighter form fields, larger support, clearer atlas layout. */
.start-entry-panel .profile-form[data-form="start"] .field input {
  border-radius: 7px !important;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile,
.pixel-button,
.mini-button,
.file-button,
.action-button,
.system-button,
.settings-entry-button,
.modal-option,
.shop-category-tab,
.rail-shortcut {
  transition:
    color 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
    background 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
    filter 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 280ms cubic-bezier(0.25, 0.8, 0.25, 1),
    backdrop-filter 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform, box-shadow;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile {
  -webkit-backdrop-filter: blur(18px) saturate(1.22);
  backdrop-filter: blur(18px) saturate(1.22);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover {
  filter: saturate(1.012);
  transform: translateY(-1px) scale(1.002);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.18),
    0 12px 24px oklch(0 0 0 / 0.12),
    0 0 8px color-mix(in oklch, var(--start-panel-line-strong), transparent 90%);
}

.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.action-button:hover:not(:disabled),
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.modal-option:hover:not(:disabled),
.shop-category-tab:hover,
.rail-shortcut:hover:not(:disabled) {
  filter: saturate(1.01);
  transform: translateY(-1px) scale(1.001);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 9px 18px oklch(0 0 0 / 0.1);
}

.start-small-card.is-warm:hover {
  color: oklch(0.99 0 0);
  background:
    radial-gradient(circle at 18% 12%, oklch(0.68 0.2 24 / 0.34), transparent 36%),
    linear-gradient(135deg, oklch(0.43 0.18 24 / 0.72), oklch(0.34 0.16 25 / 0.66) 46%, oklch(0.5 0.19 28 / 0.58));
  border-color: oklch(0.72 0.18 24 / 0.82);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.2),
    inset 0 0 20px oklch(0.74 0.18 24 / 0.1),
    0 13px 28px oklch(0.34 0.12 24 / 0.16),
    0 0 12px oklch(0.64 0.2 24 / 0.1);
  transform: translateY(-1px) scale(1.002);
  -webkit-backdrop-filter: blur(19px) saturate(1.2);
  backdrop-filter: blur(19px) saturate(1.2);
}

:root[data-theme="dark"] .start-small-card.is-warm:hover {
  background:
    radial-gradient(circle at 18% 12%, oklch(0.66 0.2 24 / 0.36), transparent 38%),
    linear-gradient(135deg, oklch(0.35 0.16 24 / 0.76), oklch(0.26 0.13 25 / 0.72) 52%, oklch(0.42 0.17 28 / 0.62));
}

.risk-banner {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
}

.risk-banner-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 5px;
  background: color-mix(in oklch, var(--status-risk), transparent 84%);
  border: 1px solid color-mix(in oklch, var(--status-risk), white 18%);
  border-radius: 7px;
}

.risk-banner-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.support-modal {
  width: min(1148px, calc(100vw - 28px));
  max-height: calc(100dvh - 16px);
  gap: 8px;
  padding: clamp(14px, 1.4vw, 18px);
}

.support-layout {
  grid-template-columns: minmax(270px, 292px) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 26px);
}

.support-right-column {
  gap: clamp(22px, 2.4vw, 30px);
}

.support-copy {
  gap: 12px;
}

.support-copy h2 {
  max-width: none;
  font-size: clamp(2rem, 2.7vw, 2.6rem);
  line-height: 1.08;
  white-space: nowrap;
}

.support-copy p {
  font-size: clamp(1.12rem, 1.35vw, 1.34rem);
  line-height: 1.82;
}

.support-qr-stack {
  width: min(100%, 292px);
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
}

.support-qr-card {
  padding: 0;
  overflow: hidden;
  background: oklch(0.06 0 0);
  border-radius: 8px;
}

.support-qr-card figure {
  aspect-ratio: auto;
  overflow: hidden;
  background: transparent;
}

.support-wechat figure {
  aspect-ratio: 1488 / 2048;
}

.support-alipay figure {
  aspect-ratio: 1360 / 2048;
}

.support-qr-card img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.support-qr-image {
  cursor: zoom-in;
}

.support-qr-preview {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.support-qr-preview-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.72);
  border: 0;
}

.support-qr-preview-card {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  display: grid;
  gap: 10px;
  margin: 0;
}

.support-qr-preview-card img {
  width: 100%;
  max-height: calc(100dvh - 92px);
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 8px;
}

.support-qr-preview-close {
  justify-self: center;
}

.support-ending-card {
  width: min(100%, 800px);
  aspect-ratio: 16 / 9;
  justify-self: start;
  background: transparent;
  border-radius: 8px;
}

.support-ending-card img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: transparent;
}

.support-ending-note {
  width: min(100%, 800px);
  margin: -12px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.08vw, 1.12rem);
  line-height: 1.78;
}

.support-modal > .support-return-button {
  min-height: 54px;
  font-size: 1.08rem;
}

.support-modal > .support-return-button:is(:hover, :focus-visible):not(:disabled) {
  background: color-mix(in oklch, var(--panel-soft), white 18%) !important;
  border-color: color-mix(in oklch, var(--line-strong), white 42%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white, transparent 64%),
    0 0 0 1px color-mix(in oklch, var(--line-strong), white 36%),
    0 0 24px color-mix(in oklch, var(--line-strong), transparent 56%) !important;
  filter: saturate(1.03) brightness(1.02);
  transform: translateY(-2px) scale(1.002);
}

.achievement-modal {
  position: relative;
  width: min(1240px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  gap: 18px;
  padding: clamp(20px, 2.2vw, 30px);
}

.achievement-close-button {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  min-width: 78px;
  min-height: 44px;
}

.achievement-modal-copy {
  padding-right: 112px;
}

.achievement-tabs {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  background: transparent;
}

.achievement-tab-control {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.achievement-tab {
  display: grid;
  place-items: center;
  min-height: 48px;
  color: var(--muted);
  background: color-mix(in oklch, var(--panel), transparent 18%);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
  transition:
    color 280ms cubic-bezier(0.25, 0.8, 0.25, 1),
    background 280ms cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 280ms cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 280ms cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 260ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.achievement-tab:hover {
  color: var(--ink);
  transform: translateY(-0.5px);
}

#achievement-tab-endings:checked ~ .achievement-tabs label[for="achievement-tab-endings"],
#achievement-tab-achievements:checked ~ .achievement-tabs label[for="achievement-tab-achievements"] {
  color: white;
  background:
    linear-gradient(135deg, oklch(0.22 0 0 / 0.96), oklch(0.1 0 0 / 0.94));
  border-color: oklch(0.96 0 0 / 0.72);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.18),
    0 14px 30px oklch(0 0 0 / 0.16);
}

.achievement-panes {
  display: grid;
  min-height: 0;
}

.achievement-pane {
  min-width: 0;
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 8%), var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: 8px;
}

#achievement-tab-endings:checked ~ .achievement-panes .achievement-pane-endings,
#achievement-tab-achievements:checked ~ .achievement-panes .achievement-pane-achievements {
  display: grid;
}

.achievement-section-head {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.achievement-section-head strong {
  font-size: 1.08rem;
}

.achievement-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: min(58dvh, 590px);
  overflow: auto;
  padding: 0 4px 0 0;
}

.achievement-gallery-item {
  min-height: 86px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(70px, auto);
  gap: 10px 12px;
  align-items: center;
  padding: 12px;
  border-radius: 7px;
}

.achievement-gallery-item > .achievement-gallery-icon {
  grid-row: 1;
  width: 58px;
  height: 58px;
  padding: 4px;
  align-self: center;
}

.achievement-gallery-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.achievement-gallery-copy strong {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-gallery-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.42;
}

.achievement-gallery-item em {
  justify-self: end;
  align-self: start;
  margin-top: 2px;
  padding: 3px 7px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel), black 4%);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.68rem;
}

.achievement-gallery-item.is-ending em {
  color: var(--muted);
}

.achievement-gallery-item.is-achievement em {
  color: var(--ink);
  font-family: var(--font-mono);
}

.field-control {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.field-control .field-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.field-control .field-icon img {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.field-control input {
  min-width: 0;
}

.action-button.has-risk-lock {
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  padding-inline-end: 9px;
}

.action-lock-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  justify-self: end;
  padding: 4px;
  background: color-mix(in oklch, var(--status-risk), transparent 88%);
  border: 1px solid color-mix(in oklch, var(--status-risk), white 18%);
  border-radius: 5px;
}

.action-lock-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.route-option {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.route-option-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 5px;
  background: color-mix(in oklch, var(--panel-soft), white 8%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.route-option-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.route-option-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.route-option-copy strong,
.route-option-copy > span,
.route-option-copy em {
  min-width: 0;
}

/* Launcher layout refinements: larger labels, cleaner icon spacing, taller preview panels. */
.start-entry-button {
  grid-template-columns: clamp(84px, 7vw, 104px) minmax(0, 1fr) 36px;
  gap: clamp(20px, 2vw, 28px);
}

.start-entry-copy strong {
  font-size: clamp(1.5rem, 1.5vw, 1.72rem);
}

.start-entry-button.is-primary .start-entry-copy strong {
  font-size: clamp(1.92rem, 2.1vw, 2.28rem);
}

.start-entry-button.is-primary .start-entry-icon {
  width: clamp(82px, 6.8vw, 98px);
  height: clamp(82px, 6.8vw, 98px);
}

.start-small-card strong {
  font-size: 1.05rem;
}

.start-small-card em {
  font-size: 0.76rem;
}

.start-toolbar-button {
  min-width: clamp(134px, 8.8vw, 158px);
  min-height: 64px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 14px;
}

.start-toolbar-icon {
  width: 38px;
  height: 38px;
}

.start-toolbar-button strong {
  font-size: 0.92rem;
  line-height: 1.22;
}

.start-leaderboard-preview {
  align-content: start;
}

.start-leaderboard-preview.is-placeholder p {
  margin: 0;
  color: var(--start-panel-muted);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.start-leaderboard-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-leaderboard-list li {
  min-height: 48px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 7px 9px;
  background: color-mix(in oklch, var(--start-paper-solid), transparent 18%);
  border: 1px solid var(--start-panel-line);
}

.start-leaderboard-list li.is-self {
  background: color-mix(in oklch, var(--gold), var(--start-paper-solid) 84%);
  border-color: color-mix(in oklch, var(--gold), var(--start-panel-line) 46%);
}

.start-leaderboard-list li > span {
  grid-row: 1 / span 2;
  color: var(--start-panel-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.start-leaderboard-list strong,
.start-leaderboard-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-leaderboard-list strong {
  font-size: 0.92rem;
}

.start-leaderboard-list em {
  color: var(--start-panel-muted);
  font-size: 0.72rem;
  font-style: normal;
}

.start-leaderboard-list b {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  color: var(--start-panel-ink);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.leaderboard-dialog {
  width: min(840px, 100%);
  gap: 8px;
  padding: 14px;
}

.leaderboard-dialog-board {
  display: grid;
  gap: 6px;
}

.leaderboard-dialog-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard-dialog-row {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  padding: 4px 14px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 28%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.leaderboard-dialog-empty {
  min-height: 136px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--muted);
  font-size: 1.08rem;
  text-align: center;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 28%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.leaderboard-dialog-row.is-self {
  background: color-mix(in oklch, var(--gold), var(--panel) 82%);
  border-color: color-mix(in oklch, var(--gold), var(--line) 42%);
}

.leaderboard-dialog-row > span {
  grid-row: 1 / span 2;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.leaderboard-dialog-row strong,
.leaderboard-dialog-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-dialog-row strong {
  font-size: 1.14rem;
  line-height: 1.12;
}

.leaderboard-dialog-row em {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: normal;
  line-height: 1.2;
}

.leaderboard-dialog-row b {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  color: var(--ink);
  font-size: 1.32rem;
  font-variant-numeric: tabular-nums;
}

.leaderboard-dialog-self {
  display: grid;
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.leaderboard-dialog-self > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.leaderboard-community-button {
  min-height: 38px;
  display: inline-grid;
  grid-template-columns: 28px auto;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.leaderboard-community-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
}

.leaderboard-community-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.start-achievement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.start-achievement-tile {
  min-height: 68px;
}

.start-achievement-icon {
  width: 56px;
  height: 56px;
}

.achievement-gallery-item {
  grid-template-columns: 70px minmax(0, 1fr) minmax(92px, auto);
  min-height: 96px;
  padding: 13px 14px;
}

.achievement-gallery-item > .achievement-gallery-icon {
  width: 64px;
  height: 64px;
}

.achievement-gallery-item em {
  min-width: 88px;
  min-height: 30px;
  display: grid;
  place-items: center;
  align-self: end;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.1;
  text-align: center;
}

@media (min-width: 1201px) {
  .start-hero {
    --start-board-w: clamp(296px, 22vw, 344px);
    --start-collection-w: clamp(304px, 23vw, 368px);
    overflow: visible;
  }

  .start-entry-panel {
    transform: translateY(clamp(28px, 3.8vh, 42px));
  }

  .start-secondary-grid {
    transform: none;
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    height: clamp(278px, 32vh, 318px);
    min-height: clamp(278px, 32vh, 318px);
    margin-bottom: 0;
  }

  .start-leaderboard-panel {
    width: var(--start-board-w);
  }

  .start-achievement-panel {
    width: var(--start-collection-w);
    margin-left: calc(var(--start-board-w) + 14px);
  }

  .start-achievement-grid {
    gap: 10px;
  }
}


@media (max-width: 980px) {
  .support-layout {
    grid-template-columns: 1fr;
  }

  .achievement-gallery {
    grid-template-columns: 1fr;
  }
}


/* Character select refinement: clean cards, loaded stats, centered radio control. */
.character-shell::before,
.character-shell::after {
  content: none;
  display: none !important;
}

.character-shell {
  --character-blue-deep: oklch(0.22 0.105 255);
  --character-blue-mid: oklch(0.43 0.145 245);
  --character-blue-light: oklch(0.63 0.115 232);
}

.character-subtitle {
  margin-top: 14px;
  max-width: 72ch;
  color: color-mix(in oklch, var(--muted), var(--character-blue-deep) 18%);
  line-height: 1.65;
}

.character-card {
  opacity: 0;
  animation: characterCardEnter 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.character-card:nth-child(2) {
  animation-delay: 90ms;
}

.character-card:nth-child(3) {
  animation-delay: 180ms;
}

.character-card .character-avatar {
  animation: characterAvatarPop 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.character-card:nth-child(2) .character-avatar {
  animation-delay: 120ms;
}

.character-card:nth-child(3) .character-avatar {
  animation-delay: 210ms;
}

.character-card .mini-attrs {
  grid-template-columns: 1fr;
  gap: 9px;
}

.character-card .mini-attrs .character-attr {
  display: grid;
  grid-template-columns: minmax(126px, 144px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 28%);
}

.character-card .mini-attrs .character-attr:last-child {
  border-bottom: 0;
}

.character-attr dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.character-attr-label {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.character-attr-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 3px;
  background: color-mix(in oklch, var(--character-blue-deep), white 88%);
  border: 1px solid color-mix(in oklch, var(--character-blue-deep), transparent 48%);
  border-radius: 6px;
}

.character-attr-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.character-attr dd {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.character-attr dd strong {
  justify-self: end;
  color: var(--ink);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.character-attr-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--character-blue-deep), white 86%), color-mix(in oklch, var(--character-blue-deep), white 78%));
  border: 1px solid color-mix(in oklch, var(--character-blue-deep), transparent 42%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 2px oklch(0 0 0 / 0.13),
    0 1px 0 oklch(1 0 0 / 0.18);
}

.character-attr-track > span {
  position: relative;
  width: var(--attr-fill);
  height: 100%;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--character-blue-deep), var(--character-blue-mid) 58%, var(--character-blue-light));
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    0 0 14px color-mix(in oklch, var(--character-blue-mid), transparent 62%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: characterAttrLoad 920ms cubic-bezier(0.16, 1, 0.3, 1) var(--attr-delay) both;
}

.character-attr-track > span::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, oklch(0.92 0.045 225 / 0.68), transparent);
  transform: translateX(-180%) skewX(-14deg);
  animation: characterAttrScan 1200ms ease-out calc(var(--attr-delay) + 130ms) both;
}

:root[data-theme="dark"] .character-attr-track > span {
  background:
    linear-gradient(90deg, oklch(0.52 0.13 250), oklch(0.68 0.12 236), oklch(0.84 0.07 220));
}

:root[data-theme="dark"] .character-attr-icon {
  background: oklch(0.2 0.045 250 / 0.96);
  border-color: oklch(0.58 0.1 238 / 0.58);
}

.trait-block {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklch, var(--line), transparent 32%);
}

.character-trait-card {
  min-width: 0;
  min-height: 128px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 8%), color-mix(in oklch, var(--panel-soft), var(--character-blue-deep) 5%));
  border: 1px solid color-mix(in oklch, var(--character-blue-deep), transparent 54%);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.18),
    0 8px 20px oklch(0 0 0 / 0.06);
}

.character-trait-card.is-skill {
  border-color: color-mix(in oklch, var(--character-blue-mid), transparent 42%);
}

.character-trait-card .trait-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 5px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--character-blue-deep), white 86%), color-mix(in oklch, var(--character-blue-mid), white 76%));
  border: 1px solid color-mix(in oklch, var(--character-blue-deep), transparent 42%);
  border-radius: 7px;
}

.character-trait-card .trait-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.character-trait-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.character-trait-copy em {
  color: var(--character-blue-mid);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.character-trait-copy strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.15;
}

.character-trait-copy span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

:root[data-theme="dark"] .character-trait-card {
  background:
    linear-gradient(180deg, oklch(0.21 0.028 250 / 0.96), oklch(0.15 0.035 254 / 0.96));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.08),
    0 10px 22px oklch(0 0 0 / 0.22);
}

.track-card {
  min-height: 118px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-rows: auto 48px;
  gap: 12px 18px;
  align-items: center;
  padding: 16px 20px 16px 16px;
}

.track-card > .album-disc {
  width: 88px;
  height: 88px;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.track-card > .track-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  gap: 5px;
}

.track-card > .music-station {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  padding: 10px 16px;
  color: var(--character-blue-deep);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 10%), color-mix(in oklch, var(--panel-soft), var(--character-blue-mid) 7%));
  border-color: color-mix(in oklch, var(--character-blue-deep), transparent 42%);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.18),
    0 8px 18px oklch(0 0 0 / 0.07);
}

.track-card > .music-timeline {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  align-items: center;
}

.track-card > .music-time {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: end;
}

.music-progress {
  --music-progress: 0%;
  width: 100%;
  height: 14px;
  appearance: none;
  cursor: pointer;
  background:
    linear-gradient(
      90deg,
      var(--character-blue-deep) 0 var(--music-progress),
      color-mix(in oklch, var(--character-blue-deep), white 76%) var(--music-progress) 100%
    );
  border: 1px solid color-mix(in oklch, var(--character-blue-deep), transparent 40%);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.13);
}

.music-progress:disabled {
  cursor: default;
  opacity: 0.54;
}

.music-progress:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ink), transparent 34%);
  outline-offset: 8px;
}

.music-progress::-webkit-slider-runnable-track {
  height: 14px;
  background: transparent;
  border: 0;
}

.music-progress::-webkit-slider-thumb {
  width: 54px;
  height: 50px;
  appearance: none;
  background: transparent;
  border: 0;
}

.music-progress::-moz-range-track {
  height: 14px;
  background: transparent;
  border: 0;
}

.music-progress::-moz-range-progress {
  height: 14px;
  background: var(--character-blue-deep);
  border-radius: 999px;
}

.music-progress::-moz-range-thumb {
  width: 54px;
  height: 50px;
  background: transparent;
  border: 0;
}

.music-toggle-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--bg);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--character-blue-deep), white 12%), var(--character-blue-deep));
  border: 2px solid color-mix(in oklch, var(--panel), var(--character-blue-deep) 34%);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    0 10px 24px oklch(0 0 0 / 0.16);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    box-shadow 280ms cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
    background 280ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.music-toggle-button:hover {
  transform: translate(-50%, -50%) scale(1.006);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.2),
    0 8px 18px oklch(0 0 0 / 0.12);
}

.music-toggle-button:active {
  transform: translate(-50%, -50%) scale(0.995);
}

.music-toggle-button:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ink), transparent 28%);
  outline-offset: 3px;
}

.music-toggle-icon {
  position: relative;
  width: 18px;
  height: 20px;
  display: block;
}

.music-toggle-icon::before,
.music-toggle-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 5px;
  height: 18px;
  background: currentColor;
  border-radius: 2px;
}

.music-toggle-icon::before {
  left: 3px;
}

.music-toggle-icon::after {
  right: 3px;
}

.music-toggle-button.is-paused .music-toggle-icon::before {
  top: 1px;
  left: 4px;
  width: 0;
  height: 0;
  background: transparent;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid currentColor;
  border-radius: 0;
}

.music-toggle-button.is-paused .music-toggle-icon::after {
  opacity: 0;
}

.music-skip-button {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: oklch(0.18 0 0);
  background: oklch(0.9 0 0);
  border: 2px solid oklch(0.68 0 0);
  border-radius: 9px;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}

.music-skip-button.is-prev {
  left: calc(50% - 58px);
}

.music-skip-button.is-next {
  left: calc(50% + 58px);
}

.music-skip-button:hover {
  background: oklch(0.84 0 0);
  border-color: oklch(0.52 0 0);
  transform: translate(-50%, -50%) scale(1.01);
}

.music-skip-button:active {
  transform: translate(-50%, -50%) scale(0.985);
}

.music-skip-icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
  color: currentColor;
}

.music-skip-icon::before,
.music-skip-icon::after {
  content: "";
  position: absolute;
  top: 2px;
}

.music-skip-icon::after {
  width: 4px;
  height: 16px;
  background: currentColor;
  border-radius: 1px;
}

.music-skip-button.is-prev .music-skip-icon::before {
  left: 1px;
  border-top: 8px solid transparent;
  border-right: 13px solid currentColor;
  border-bottom: 8px solid transparent;
}

.music-skip-button.is-prev .music-skip-icon::after {
  left: 15px;
}

.music-skip-button.is-next .music-skip-icon::before {
  right: 1px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
}

.music-skip-button.is-next .music-skip-icon::after {
  right: 15px;
}

.character-shell > .music-dock .track-card {
  min-height: 138px;
}

.character-shell > .music-dock .track-card > .album-disc {
  width: 96px;
  height: 96px;
}

.character-shell > .music-dock .track-card strong {
  font-size: clamp(1.42rem, 2vw, 1.9rem);
}

.character-shell > .music-dock .music-time {
  display: none;
}

.sidebar .track-card {
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 9px;
  padding: 8px 9px;
}

.sidebar .track-card > .album-disc {
  width: 48px;
  height: 48px;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.sidebar .track-card > .music-station {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  padding: 2px 6px;
}

.sidebar .track-card > .track-copy {
  grid-column: 2;
  grid-row: 1;
}

.sidebar .track-card > .music-timeline {
  grid-column: 2;
  grid-row: 2;
  min-height: 34px;
}

.sidebar .music-progress {
  height: 8px;
}

.sidebar .music-toggle-button {
  width: 36px;
  height: 36px;
  border-width: 1px;
}

.sidebar .music-toggle-icon {
  transform: scale(0.72);
}

@keyframes characterCardEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes characterAvatarPop {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.92);
  }

  58% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.025);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes characterAttrLoad {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes characterAttrScan {
  0% {
    opacity: 0;
    transform: translateX(-180%) skewX(-14deg);
  }

  24% {
    opacity: 0.76;
  }

  100% {
    opacity: 0;
    transform: translateX(260%) skewX(-14deg);
  }
}


/* Character select final pass: one-screen, black/white chrome, blue only for stat bars. */
.character-shell::before,
.character-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

.character-shell {
  --character-blue-deep: oklch(0.2 0.11 255);
  --character-blue-mid: oklch(0.42 0.15 245);
  --character-blue-light: oklch(0.66 0.11 232);
  height: 100dvh;
  min-height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) minmax(130px, 142px);
  gap: clamp(8px, 1.15dvh, 14px);
  align-content: stretch;
  padding: clamp(18px, 2.2dvh, 24px) clamp(28px, 3.4vw, 54px) clamp(12px, 1.4dvh, 16px);
  overflow: hidden;
  background:
    linear-gradient(oklch(0.88 0 0) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.88 0 0) 1px, transparent 1px),
    linear-gradient(oklch(0.76 0 0) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.76 0 0) 1px, transparent 1px),
    oklch(0.985 0 0);
  background-size: 12px 12px, 12px 12px, 96px 96px, 96px 96px, auto;
}

:root[data-theme="dark"] .character-shell {
  background:
    linear-gradient(oklch(0.18 0 0) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.18 0 0) 1px, transparent 1px),
    linear-gradient(oklch(0.24 0 0) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.24 0 0) 1px, transparent 1px),
    oklch(0.06 0 0);
}

.character-header,
.character-grid,
.character-shell > .music-dock {
  width: min(1880px, 100%);
}

.character-header {
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}

.character-header h1 {
  font-size: clamp(2.24rem, 2.564vw, 3.22rem);
  line-height: 0.92;
}

.character-header p {
  font-size: 0.9rem;
  line-height: 1.45;
}

.character-header .kicker {
  min-height: 0;
  opacity: 0;
}

.character-subtitle {
  margin-top: 10px;
  color: var(--muted);
}

.character-grid {
  min-height: 0;
  height: 100%;
  gap: clamp(14px, 1.45vw, 28px);
  margin: 0 auto;
  align-items: start;
}

.character-card {
  min-height: 0;
  height: min(100%, clamp(700px, 65dvh, 761px));
  grid-template-rows: auto auto auto minmax(44px, 1fr);
  align-content: start;
  gap: clamp(5px, 0.72dvh, 9px);
  padding: clamp(14px, 1.6dvh, 18px) clamp(14px, 1.2vw, 22px);
  overflow: hidden;
  background: var(--panel);
  border-color: var(--line);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.16),
    0 10px 24px oklch(0 0 0 / 0.08);
}

:root[data-theme="dark"] .character-card {
  background: oklch(0.08 0 0 / 0.96);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.08),
    0 10px 24px oklch(0 0 0 / 0.22);
}

.character-card-head {
  grid-template-columns: clamp(108px, 7vw, 136px) minmax(0, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  height: clamp(112px, 10.5dvh, 128px);
  overflow: hidden;
}

.character-avatar {
  width: clamp(102px, 6.65vw, 128px);
  padding: 5px;
  background: oklch(1 0 0 / 0.54);
  border-color: var(--line);
  box-shadow: none;
}

:root[data-theme="dark"] .character-avatar {
  background: oklch(0.12 0 0 / 0.94);
}

.character-card h2 {
  font-size: clamp(1.52rem, 1.88vw, 2.12rem);
  line-height: 1.04;
}

.character-card-head > div > span {
  font-size: clamp(0.92rem, 0.78vw, 1.03rem);
}

.character-card-head > div > .character-origin-line {
  color: var(--danger);
}

.character-card-head p {
  margin-top: 5px;
  font-size: clamp(1rem, 0.924vw, 1.171rem);
  line-height: 1.44;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.character-card .mini-attrs {
  min-height: clamp(270px, 27dvh, 332px);
  gap: 3px;
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.character-card .mini-attrs .character-attr {
  grid-template-columns: minmax(156px, 176px) minmax(0, 1fr);
  gap: 12px;
  padding: clamp(4px, 0.55dvh, 6px) 0;
  border-bottom-color: color-mix(in oklch, var(--line), transparent 22%);
}

.character-attr dt {
  color: var(--ink);
  font-size: clamp(0.98rem, 0.959vw, 1.12rem);
}

.character-attr-label > span:last-child {
  font-size: clamp(0.98rem, 0.959vw, 1.12rem);
}

.character-attr-label {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px;
}

.character-attr-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.character-attr-icon img {
  width: 40px;
  height: 40px;
}

.character-card .mini-attrs .character-attr-icon img {
  width: 40px;
  height: 40px;
  max-width: none;
  max-height: none;
}

:root[data-theme="dark"] .character-attr-icon {
  background: transparent;
  border-color: transparent;
}

.character-attr dd {
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
}

.character-attr dd strong {
  font-size: clamp(0.88rem, 0.72vw, 0.98rem);
}

.character-attr-track {
  height: 11px;
  background: linear-gradient(180deg, oklch(0.9 0.015 245), oklch(0.78 0.025 245));
  border-color: oklch(0.6 0.025 245);
}

.character-attr-track > span {
  background: linear-gradient(90deg, var(--character-blue-deep), var(--character-blue-mid) 62%, var(--character-blue-light));
  animation-duration: 1900ms;
  animation-timing-function: cubic-bezier(0.22, 0.72, 0.18, 1);
}

.character-attr-track > span::after {
  width: 58%;
  animation-duration: 1900ms;
}

:root[data-theme="dark"] .character-attr-track {
  background: linear-gradient(180deg, oklch(0.82 0.01 245), oklch(0.68 0.015 245));
  border-color: oklch(0.52 0.02 245);
}

:root[data-theme="dark"] .character-attr-track > span {
  background: linear-gradient(90deg, oklch(0.28 0.13 255), oklch(0.48 0.16 245) 62%, oklch(0.7 0.12 232));
}

.trait-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(150px, 15.4dvh, 186px);
  gap: 7px;
  margin-top: 0;
  padding-top: 6px;
  border-top-color: color-mix(in oklch, var(--line), transparent 18%);
}

.character-trait-card {
  min-height: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 10px;
  overflow: hidden;
  background: color-mix(in oklch, var(--panel), var(--panel-soft) 26%);
  border-color: var(--line);
  box-shadow: none;
}

.character-trait-card.is-skill {
  border-color: var(--line);
}

.character-trait-card.no-icon {
  grid-template-columns: minmax(0, 1fr);
}

.character-trait-card .trait-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.character-trait-copy {
  gap: 5px;
}

.character-trait-copy em {
  color: var(--ink);
  font-size: clamp(1.02rem, 1.06vw, 1.22rem);
  font-weight: 900;
  line-height: 1.08;
}

.character-trait-copy strong {
  font-size: clamp(0.92rem, 0.78vw, 1.04rem);
}

.character-trait-copy span {
  font-size: clamp(0.82rem, 0.82vw, 0.98rem);
  line-height: 1.28;
}

:root[data-theme="dark"] .character-trait-card {
  background: oklch(0.1 0 0 / 0.98);
  border-color: var(--line);
  box-shadow: none;
}

.character-card .pixel-button.is-primary {
  min-height: 44px;
  align-self: end;
  margin-top: auto;
}

.character-shell > .music-dock {
  min-height: 0;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.character-shell > .music-dock .track-card {
  min-height: 0;
  height: 100%;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  grid-template-rows: auto 42px;
  gap: 8px 16px;
  padding: 14px 16px 14px 12px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

:root[data-theme="dark"] .character-shell > .music-dock .track-card {
  background: oklch(0.08 0 0 / 0.96);
}

.character-shell > .music-dock .track-card > .album-disc {
  width: 90px;
  height: 90px;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  transform: none;
}

.character-shell > .music-dock .track-card > .track-copy {
  gap: 6px;
  transform: translateY(8px);
}

.character-shell > .music-dock .track-card strong {
  font-size: clamp(1.45rem, 1.62vw, 2.055rem);
}

.character-shell > .music-dock .track-card [data-track-meta] {
  font-size: clamp(0.88rem, 0.82vw, 1.02rem);
  line-height: 1.25;
}

.track-card > .music-station {
  padding: 8px 13px;
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
  border-radius: 8px;
  font-size: clamp(1.1rem, 1.19vw, 1.508rem);
  font-weight: 800;
  box-shadow: none;
}

:root[data-theme="dark"] .track-card > .music-station {
  background: transparent;
}

.track-card > .music-timeline {
  min-height: 42px;
}

.music-progress {
  height: 10px;
  background:
    linear-gradient(
      90deg,
      var(--ink) 0 var(--music-progress),
      color-mix(in oklch, var(--ink), transparent 78%) var(--music-progress) 100%
    );
  border-color: color-mix(in oklch, var(--ink), transparent 48%);
}

.music-progress::-webkit-slider-runnable-track,
.music-progress::-moz-range-track,
.music-progress::-moz-range-progress {
  height: 10px;
}

.music-toggle-button {
  width: 44px;
  height: 44px;
  color: var(--bg);
  background: var(--ink);
  border-color: color-mix(in oklch, var(--ink), transparent 28%);
  border-radius: 9px;
  box-shadow: none;
}

:root[data-theme="dark"] .music-toggle-button {
  color: oklch(0.06 0 0);
  background: oklch(0.94 0 0);
  border-color: oklch(0.94 0 0);
}

.character-shell .music-toggle-button {
  color: oklch(0.24 0 0);
  background: oklch(0.92 0 0);
  border-color: oklch(0.72 0 0);
}

.character-shell .music-toggle-icon {
  color: oklch(0.24 0 0);
}

:root[data-theme="dark"] .character-shell .music-toggle-button {
  color: oklch(0.22 0 0);
  background: oklch(0.92 0 0);
  border-color: oklch(0.76 0 0);
}

:root[data-theme="dark"] .character-shell .music-toggle-icon {
  color: oklch(0.22 0 0);
}

@media (min-width: 1600px) and (max-height: 1100px) {
  .character-shell {
    grid-template-rows: auto minmax(0, 1fr) 142px;
  }

  .character-card {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .character-card,
  .character-card .character-avatar,
  .character-attr-track > span,
  .character-attr-track > span::after {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover,
  .start-toolbar-button:hover,
  .start-achievement-tile:hover,
  .pixel-button:hover:not(:disabled),
  .mini-button:hover:not(:disabled),
  .file-button:hover,
  .action-button:hover:not(:disabled),
  .system-button:hover:not(:disabled),
  .settings-entry-button:hover:not(:disabled),
  .modal-option:hover:not(:disabled),
  .shop-category-tab:hover,
  .rail-shortcut:hover:not(:disabled) {
    transform: none;
  }
}

/* Figma node 2:2 launcher alignment. */
@media (min-width: 1201px) {
  .start-shell {
    --figma-left-edge: clamp(38px, 3.4vw, 58px);
    --figma-art-left: clamp(560px, 42.3vw, 720px);
    --figma-left-fade: clamp(610px, 46.9vw, 798px);
    --figma-entry-w: clamp(462px, 34.7vw, 590px);
    --figma-board-w: clamp(280px, 20.2vw, 344px);
    --figma-collection-w: clamp(300px, 21.6vw, 368px);
    --figma-panel-gap: 14px;
    --figma-right-column-shift: clamp(4px, 0.4vw, 6px);
    --start-v-gap: clamp(8px, 1.2vh, 12px);
    --start-entry-top: clamp(232px, 24vh, 252px);
    --start-primary-button-h: clamp(126px, 14.2vh, 140px);
    --start-continue-button-h: clamp(90px, 10.8vh, 106px);
    --start-small-card-h: clamp(96px, 10.2vh, 108px);
    --start-panel-h: clamp(250px, 33.4vh, 330px);
    --start-bottom-line: clamp(16px, 2.43vh, 24px);
    overflow: hidden;
    background: oklch(0.9 0.01 248);
  }

  :root[data-theme="dark"] .start-shell {
    background: #010101;
  }

  .start-shell::before {
    z-index: 0;
    background:
      linear-gradient(90deg, oklch(0.95 0.006 248 / 0.08) 0%, transparent 44%),
      oklch(0.9 0.01 248);
  }

  :root[data-theme="dark"] .start-shell::before {
    background:
      linear-gradient(90deg, rgb(255 255 255 / 0.08) 0%, transparent 44%),
      #010101;
  }

  .start-shell::after {
    z-index: 1;
    width: var(--figma-left-fade);
    background:
      radial-gradient(circle at 18% 12%, oklch(1 0 0 / 0.26), transparent 22%),
      linear-gradient(90deg, var(--start-paper-solid) 0%, var(--start-paper) 74%, transparent 100%);
    box-shadow: 22px 0 52px var(--start-shadow);
  }

  :root[data-theme="dark"] .start-shell::after {
    background:
      radial-gradient(circle at 18% 12%, rgb(255 255 255 / 0.08), transparent 24%),
      linear-gradient(90deg, rgb(15 15 15 / 0.96) 0%, rgb(7 7 7 / 0.9) 74%, transparent 100%);
  }

  .start-scene-art {
    inset: 0;
    width: 100%;
  }

  .start-scene-art img {
    opacity: 1;
    object-fit: cover;
    object-position: center center;
    filter: saturate(0.98) contrast(1.01) brightness(0.94);
  }

  :root[data-theme="dark"] .start-scene-art img {
    opacity: 1;
    filter: saturate(0.9) contrast(1.14) brightness(0.87);
  }

  .start-scene-art::after {
    background:
      linear-gradient(90deg, var(--start-paper-solid) 0%, color-mix(in oklch, var(--start-paper-solid), transparent 30%) 9%, transparent 22%),
      linear-gradient(180deg, color-mix(in oklch, var(--start-paper-solid), transparent 42%) 0%, transparent 14%, transparent 86%, color-mix(in oklch, var(--start-paper-solid), transparent 44%) 100%);
  }

  :root[data-theme="dark"] .start-scene-art::after {
    background:
      linear-gradient(90deg, rgb(15 15 15 / 0.96) 0%, rgb(15 15 15 / 0.79) 9%, transparent 22%),
      linear-gradient(180deg, rgb(15 15 15 / 0.48) 0%, transparent 14%, transparent 86%, rgb(15 15 15 / 0.5) 100%);
  }

  .start-hero {
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 720px;
    padding: 0;
    overflow: hidden;
  }

  .start-title-panel {
    position: absolute;
    left: clamp(42px, 3.75vw, 64px);
    top: clamp(22px, 3.24vh, 32px);
    width: clamp(480px, 40vw, 681px);
    padding: 0;
    transform: none;
  }

  .title-stack h1 .title-primary {
    font-size: clamp(4rem, 5vw, 5.4375rem);
    line-height: 0.92;
    color: #f7f7f7;
    text-shadow: none;
  }

  .title-stack h1 .title-secondary {
    width: min(659px, 100%);
    min-height: 46px;
    box-sizing: border-box;
    margin-top: 5px;
    padding-top: 13px;
    color: #d6d6d6;
    font-size: clamp(1.58rem, 2.28vw, 2.493rem);
    font-weight: 600;
    line-height: 1.03;
  }

  .start-title-panel .english-line {
    max-width: 660px;
    margin-top: -1px;
    color: #f7f7f7;
    font-size: clamp(1rem, 1.18vw, 1.275rem);
    line-height: 1.2;
  }

  .start-entry-panel {
    position: absolute;
    left: var(--figma-left-edge);
    top: var(--start-entry-top);
    width: var(--figma-entry-w);
    transform: none;
  }

  .start-main-actions {
    gap: var(--start-v-gap);
  }

  .start-entry-button {
    width: 100%;
    height: var(--start-continue-button-h);
    min-height: 0;
    grid-template-columns: clamp(74px, 6.2vw, 106px) minmax(0, 1fr) 34px;
    gap: clamp(16px, 1.8vw, 28px);
    padding: clamp(12px, 1.6vh, 18px) clamp(24px, 2.9vw, 30px);
    box-sizing: border-box;
    border-radius: 8px;
    clip-path: none;
  }

  .start-entry-button.is-primary {
    height: var(--start-primary-button-h);
    min-height: 0;
  }

  .start-entry-button.is-primary .start-entry-icon {
    width: clamp(72px, 6.22vw, 106px);
    height: clamp(72px, 6.22vw, 106px);
  }

  .start-entry-copy strong {
    font-size: clamp(1.22rem, 1.5vw, 1.6rem);
  }

  .start-entry-button.is-primary .start-entry-copy strong {
    font-size: clamp(1.68rem, 2.1vw, 2.25rem);
  }

  .start-entry-copy em {
    font-size: clamp(0.68rem, 0.8vw, 0.85rem);
  }

  .start-entry-button.is-primary .start-entry-copy em {
    margin-top: -1px;
    font-size: 1.274rem;
  }

  .start-entry-button:not(.is-primary) .start-entry-copy em {
    font-size: 1.213rem;
    line-height: 0.866;
  }

  .start-entry-button:not(.is-primary) {
    height: var(--start-continue-button-h);
    min-height: 0;
    grid-template-columns: clamp(80px, 5.5vw, 92px) minmax(0, 1fr) 34px;
    padding-top: clamp(8px, 1.1vh, 12px);
    padding-bottom: clamp(8px, 1.1vh, 12px);
  }

  .start-entry-button:not(.is-primary) .start-entry-icon {
    width: clamp(70px, 5vw, 82px);
    height: clamp(70px, 5vw, 82px);
  }

  .start-secondary-grid {
    position: absolute;
    left: var(--figma-left-edge);
    top: calc(var(--start-entry-top) + var(--start-primary-button-h) + var(--start-v-gap) + var(--start-continue-button-h) + var(--start-v-gap));
    width: calc(var(--figma-board-w) + var(--figma-panel-gap) + var(--figma-collection-w));
    grid-template-columns: 256fr 326fr;
    gap: var(--figma-panel-gap);
    transform: none;
  }

  .start-small-card {
    height: var(--start-small-card-h);
    min-height: 0;
    grid-template-columns: clamp(66px, 4.7vw, 78px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    clip-path: none;
  }

  .start-small-card span:last-child {
    display: grid;
    min-width: 0;
    align-content: center;
    justify-items: start;
    padding-left: 6px;
  }

  .start-small-card:not(.is-warm) span:last-child {
    padding-left: 0;
    transform: translateX(-4px);
  }

  .start-small-icon {
    width: clamp(54px, 4.2vw, 68px);
    height: clamp(54px, 4.2vw, 68px);
  }

  .start-small-card.is-warm .start-small-icon {
    width: clamp(58px, 4.45vw, 72px);
    height: clamp(58px, 4.45vw, 72px);
  }

  .start-small-card strong {
    font-size: 1.444rem;
    line-height: 1.05;
  }

  .start-small-card em {
    font-size: clamp(0.72rem, 0.82vw, 0.82rem);
    line-height: 1.34;
    opacity: 0.82;
  }

  .start-small-card:not(.is-warm) strong {
    width: min(114px, 100%);
    min-height: 27px;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: -2px;
    padding-left: 6px;
    border: 1px solid transparent;
  }

  .start-small-card:not(.is-warm) em {
    width: min(195.3px, calc(100% + 18px));
    box-sizing: border-box;
    margin: 2px 0 -4px;
    padding-top: 3px;
  }

  .start-small-card.is-warm {
    left: calc(-1 * var(--figma-right-column-shift));
  }

  .start-small-card.is-warm strong {
    margin: -16px 0 -10px;
    padding: 16px 1px 0 0;
  }

  .start-small-card.is-warm em {
    width: min(275px, calc(100% + 18px));
    min-height: 25px;
    margin-top: 21px;
    margin-left: 0;
    font-size: clamp(0.92rem, 0.96vw, 1.02rem);
    line-height: 1.2;
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
    top: auto;
    bottom: var(--start-bottom-line);
    height: var(--start-panel-h);
    min-height: 0;
    padding: 17px;
    border-radius: 8px;
    clip-path: none;
    transform: none;
  }

  .start-panel-head.has-icon {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .start-panel-head h2 {
    font-size: 1.432rem;
  }

  .start-panel-title-icon {
    width: 34px;
    height: 34px;
  }

  .start-leaderboard-panel {
    left: var(--figma-left-edge);
    width: var(--figma-board-w);
  }

  .start-achievement-panel {
    left: calc(var(--figma-left-edge) + var(--figma-board-w) + var(--figma-panel-gap) - var(--figma-right-column-shift));
    width: var(--figma-collection-w);
    margin-left: 0;
  }

  .start-leaderboard-empty {
    min-height: 0;
    height: calc(100% - 70px);
    margin-top: 10px;
    padding: 10px;
    align-content: start;
    background: rgb(255 255 255 / 0.3);
    border: 1px solid var(--start-panel-line);
    border-radius: 0;
  }

  .start-leaderboard-list {
    gap: clamp(4px, 0.7vh, 7px);
  }

  .start-leaderboard-list li {
    min-height: clamp(36px, 4.7vh, 58px);
    padding: clamp(3px, 0.7vh, 7px) 9px;
    gap: 0 8px;
    background: rgb(15 15 15 / 0.79);
  }

  .start-leaderboard-empty > strong {
    font-size: clamp(0.76rem, 0.92vw, 0.95rem);
    line-height: 1.1;
  }

  .start-leaderboard-list li > span {
    font-size: clamp(0.62rem, 0.74vw, 0.78rem);
    line-height: 1;
  }

  .start-leaderboard-list strong {
    font-size: clamp(0.76rem, 0.88vw, 0.92rem);
    line-height: 1.08;
  }

  .start-leaderboard-list em {
    font-size: clamp(0.6rem, 0.68vw, 0.72rem);
    line-height: 1.05;
  }

  .start-leaderboard-list b {
    font-size: clamp(0.92rem, 1.1vw, 1.14rem);
    line-height: 1;
  }

  .start-achievement-grid {
    height: auto;
    grid-template-columns: repeat(4, max-content);
    grid-auto-rows: max-content;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }

  .start-achievement-panel p {
    margin-top: 4px;
    padding-top: 13px;
    font-size: 1.08rem;
    line-height: 1.38;
  }

  .start-achievement-tile {
    min-height: 0;
    width: clamp(44px, 3.6vw, 58px);
    height: clamp(44px, 3.6vw, 58px);
    padding: 5px;
    border-radius: 8px;
  }

  .start-achievement-icon {
    width: clamp(34px, 2.8vw, 46px);
    height: clamp(34px, 2.8vw, 46px);
  }

  .start-ready-panel {
    top: clamp(22px, 3.24vh, 32px);
    right: clamp(28px, 3.4vw, 48px);
    bottom: auto;
    width: clamp(390px, 27vw, 500px);
    height: auto;
    min-height: clamp(198px, 24vh, 244px);
    display: block;
    padding: clamp(16px, 2vh, 22px) clamp(22px, 1.8vw, 28px) clamp(92px, 10.5vh, 112px);
    overflow: visible;
    border-color: #eee;
    border-radius: 8px;
    clip-path: none;
  }

  .start-ready-panel strong {
    display: block;
    color: #cbd2d9;
    font-size: clamp(2.1rem, 2.58vw, 2.865rem);
    line-height: 1;
  }

  .start-ready-panel p {
    width: clamp(252px, 17.4vw, 318px);
    margin-top: clamp(16px, 2vh, 22px);
    padding: 0;
    color: color-mix(in oklch, var(--start-panel-ink), transparent 8%);
    border: 0;
    font-size: clamp(1.06rem, 1.12vw, 1.2rem);
    line-height: 1.38;
    white-space: normal;
  }

  :root[data-theme="dark"] .start-ready-panel p {
    color: #fff;
  }

  .start-software-row {
    position: absolute;
    left: clamp(12px, 0.95vw, 16px);
    top: auto;
    bottom: clamp(14px, 1.75vh, 18px);
    width: clamp(196px, 13vw, 222px);
    display: flex;
    justify-content: flex-start;
    gap: 0;
  }

  .start-software-row i {
    width: clamp(62px, 4.35vw, 74px);
    height: clamp(56px, 7.3vh, 72px);
  }

  .start-software-row i img {
    width: clamp(44px, 3.3vw, 56px);
    height: clamp(44px, 3.3vw, 56px);
  }

  .start-clock-art {
    position: absolute;
    right: clamp(8px, 0.7vw, 12px);
    top: 50%;
    width: clamp(128px, 9.4vw, 162px);
    height: clamp(128px, 9.4vw, 162px);
    display: block;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .start-clock-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .start-toolbar {
    right: clamp(28px, 2.6vw, 44px);
    bottom: var(--start-bottom-line);
    gap: 8px;
  }

  .start-toolbar-button {
    min-width: clamp(118px, 8.8vw, 150px);
    min-height: clamp(56px, 6.48vh, 64px);
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    clip-path: none;
  }

  .start-toolbar-button:last-child {
    min-width: clamp(150px, 11.05vw, 188px);
  }

  .start-toolbar-button strong {
    font-size: clamp(0.72rem, 0.89vw, 0.95rem);
    white-space: nowrap;
  }

  .start-shell > .music-dock {
    display: none;
  }
}

@media (max-width: 1200px) {
  .start-clock-art {
    display: none;
  }
}

@media (min-width: 1201px) and (max-height: 960px) {
  .start-shell {
    --start-entry-top: clamp(174px, 22.6vh, 190px);
    --start-primary-button-h: clamp(118px, 16.35vh, 138px);
    --start-continue-button-h: clamp(84px, 11.5vh, 98px);
    --start-small-card-h: clamp(90px, 10.2vh, 100px);
    --start-panel-h: clamp(224px, 31vh, 292px);
    --start-bottom-line: clamp(16px, 2.43vh, 24px);
  }

  .start-leaderboard-panel,
  .start-achievement-panel {
    padding: 12px;
  }

  .start-leaderboard-empty {
    height: clamp(116px, 14.8vh, 154px);
    margin-top: 8px;
    gap: 5px;
    padding: 8px;
  }

  .start-leaderboard-list {
    gap: 3px;
  }

  .start-leaderboard-list li {
    min-height: 30px;
    padding: 2px 8px;
  }

  .start-link-button {
    margin-top: -4px;
  }

  .start-achievement-grid {
    grid-template-columns: repeat(6, 36px);
    gap: 6px;
    margin-top: 8px;
  }

  .start-achievement-tile {
    width: 36px;
    height: 36px;
    padding: 4px;
  }

  .start-achievement-icon {
    width: 28px;
    height: 28px;
  }

  .start-achievement-panel p {
    margin-top: 10px;
  }
}


/* Character select and fixed opening flow polish. */
.character-shell {
  height: auto;
  min-height: 100dvh;
  grid-template-rows: auto auto minmax(118px, 132px);
  overflow-x: hidden;
  overflow-y: auto;
}

.character-grid {
  height: auto;
  align-items: stretch;
}

.character-card {
  min-height: clamp(724px, 68dvh, 792px);
  height: auto;
  grid-template-rows: auto auto auto minmax(54px, 1fr);
  padding-bottom: clamp(18px, 1.8dvh, 24px);
}

.character-card .character-card-head {
  grid-template-columns: clamp(122px, 7.9vw, 148px) minmax(0, 1fr);
  gap: clamp(14px, 1.3vw, 20px);
  align-items: center;
  height: auto;
  min-height: clamp(126px, 11.8dvh, 150px);
  overflow: visible;
}

.character-card .character-avatar {
  width: clamp(112px, 7.15vw, 132px);
  height: clamp(112px, 7.15vw, 132px);
  box-sizing: border-box;
  padding: 5px;
  overflow: visible;
  background: color-mix(in oklch, var(--panel), transparent 8%);
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 14%);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.18),
    0 6px 16px oklch(0 0 0 / 0.08);
}

:root[data-theme="dark"] .character-card .character-avatar {
  background: oklch(0.08 0 0 / 0.84);
  border-color: color-mix(in oklch, var(--line), white 10%);
}

.character-card .character-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.character-attr dd strong {
  min-width: 38px;
  font-size: clamp(1.04rem, 0.95vw, 1.18rem);
  font-weight: 900;
}

.trait-block {
  height: clamp(164px, 16.8dvh, 204px);
}

.character-trait-card.has-icon {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
}

.character-trait-card .trait-icon,
.character-trait-card.is-skill .trait-icon {
  width: 48px;
  height: 48px;
  justify-self: center;
  align-self: center;
  margin: 0;
}

.character-trait-card .trait-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.modal-card.opening-fixed-card {
  --opening-card-width: min(1040px, calc(100vw - 28px));
  width: var(--opening-card-width);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-card.opening-fixed-military_training {
  --opening-card-width: min(980px, calc(100vw - 28px));
}

.opening-fixed-card .modal-media {
  align-self: center;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  display: block;
  overflow: hidden;
  background: transparent;
}

.opening-fixed-card .modal-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(440px, 72dvh, 680px);
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.modal-card.opening-fixed-military_training .modal-media img {
  max-height: clamp(440px, 72dvh, 680px);
}

.opening-fixed-card .modal-copy {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.opening-fixed-card .modal-copy h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}

.opening-fixed-card .modal-copy p,
.opening-fixed-card .modal-media figcaption {
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  line-height: 1.62;
}

.opening-fixed-card .modal-options {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.opening-fixed-card .modal-option {
  min-height: 70px;
  align-content: center;
  justify-items: center;
  padding: 14px 16px;
  text-align: center;
}

.opening-fixed-card .modal-option strong {
  font-size: clamp(1.1rem, 1.35vw, 1.28rem);
  line-height: 1.22;
}


/* Main game page refinements: independent compact radio + right-side tools. */
@media (min-width: 1201px) {
  .sidebar {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .right-rail {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    padding-top: 86px;
  }

  .game-shell > .game-music-dock {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: min(348px, calc(var(--rail) - 8px));
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .game-music-dock .track-card {
    min-height: 72px;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    grid-template-rows: auto 26px;
    gap: 4px 9px;
    padding: 7px 9px 7px 7px;
    background: var(--panel);
    border: 2px solid var(--line);
    border-radius: 7px;
    box-shadow:
      inset 0 1px 0 oklch(1 0 0 / 0.16),
      0 6px 14px oklch(0 0 0 / 0.08);
  }

  :root[data-theme="dark"] .game-music-dock .track-card {
    background: oklch(0.11 0.018 252 / 0.96);
  }

  .game-music-dock .track-card > .album-disc {
    width: 60px;
    height: 60px;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .game-music-dock .track-card > .track-copy {
    grid-column: 2;
    grid-row: 1;
    gap: 2px;
    align-self: end;
    transform: none;
  }

  .game-music-dock .track-card strong {
    font-size: 0.88rem;
    line-height: 1.12;
  }

  .game-music-dock .track-card [data-track-meta] {
    font-size: 0.64rem;
    line-height: 1.18;
  }

  .game-music-dock .track-card > .music-station {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    padding: 2px 6px;
    color: var(--ink);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 0.58rem;
    line-height: 1.15;
    box-shadow: none;
    white-space: nowrap;
  }

  .game-music-dock .track-card > .music-timeline {
    grid-column: 2 / 4;
    grid-row: 2;
    min-height: 26px;
  }

  .game-music-dock .music-progress {
    height: 6px;
  }

  .game-music-dock .music-progress::-webkit-slider-runnable-track,
  .game-music-dock .music-progress::-moz-range-track,
  .game-music-dock .music-progress::-moz-range-progress {
    height: 6px;
  }

  .game-music-dock .music-toggle-button {
    width: 30px;
    height: 30px;
    border-radius: 6px;
  }

  .game-music-dock .music-toggle-icon {
    transform: scale(0.68);
  }

  .game-music-dock .music-time,
  .game-music-dock .lyric-line,
  .game-music-dock .music-status {
    display: none;
  }

  .right-entry-panel {
    min-height: 0;
    display: grid;
    align-content: start;
  }

  .right-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .right-entry-grid .system-button {
    min-height: 118px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    padding: 10px 8px;
    text-align: center;
  }

  .right-entry-grid .system-button .system-icon {
    width: 46px;
    height: 46px;
    grid-row: auto;
    font-size: 1.45rem;
  }

  .right-entry-grid .system-button strong,
  .right-entry-grid .system-button .entry-status,
  .right-entry-grid .system-button em {
    grid-column: auto;
  }

  .right-entry-grid .system-button strong {
    font-size: 0.76rem;
    line-height: 1.18;
  }

  .right-entry-grid .system-button em {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.mentor-select-shell .character-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mentor-select-card {
  grid-template-rows: auto 1fr auto;
}

.mentor-select-card .trait-block {
  align-content: start;
}

.mentor-select-card .character-trait-card {
  min-height: 92px;
}

.mentor-select-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.result-card .modal-option strong {
  font-size: clamp(1.08rem, 1.16vw, 1.22rem);
  line-height: 1.28;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.result-card .modal-option span,
.result-card .modal-option em {
  font-size: clamp(0.96rem, 1.04vw, 1.08rem);
  line-height: 1.45;
}

.modal-card.result-card {
  --result-positive: oklch(0.46 0.18 252);
  --result-negative: oklch(0.54 0.2 25);
  width: min(860px, calc(100vw - 40px));
}

:root[data-theme="dark"] .modal-card.result-card {
  --result-positive: oklch(0.78 0.12 252);
  --result-negative: oklch(0.74 0.18 25);
}

.modal-card.result-card .modal-copy h2 {
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
}

.result-card .modal-copy {
  gap: 10px;
}

.result-card .modal-copy p {
  max-width: none;
  margin: 0;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  line-height: 1.68;
  text-wrap: auto;
}

.result-card .settlement-confirm-option {
  min-height: 68px;
  justify-items: center;
  padding: 14px 16px;
  text-align: center;
}

.result-card .settlement-confirm-option strong {
  width: 100%;
}

.result-card .modal-option .settlement-confirm-label {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  color: var(--ink);
  font-size: clamp(1.02rem, 1.16vw, 1.18rem);
  line-height: 1.42;
}

.result-card .modal-option .settlement-confirm-label.settlement-confirm-text {
  display: block;
  overflow-wrap: anywhere;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

.result-card .modal-option .settlement-confirm-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--ink);
  font-size: inherit;
  white-space: nowrap;
}

.result-card .modal-option .settlement-confirm-name {
  color: var(--ink);
  font-size: inherit;
  font-weight: 700;
}

.result-card .settlement-confirm-value {
  margin-inline: 2px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.result-card .settlement-confirm-value.is-positive {
  color: var(--result-positive);
}

.result-card .settlement-confirm-value.is-negative {
  color: var(--result-negative);
}

.result-card .settlement-confirm-value.is-neutral {
  color: var(--muted);
}


@media (max-width: 1200px) {
  .game-shell > .game-music-dock {
    order: 11;
    width: 100%;
  }

  .right-entry-panel {
    order: 8;
  }

  .mentor-select-shell .character-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1201px) {
  .right-rail {
    grid-template-rows: auto auto auto auto auto;
    padding-top: 82px;
  }

  .right-rail .profile-card,
  .right-rail .course-card,
  .right-rail .mentor-card,
  .right-entry-panel,
  .right-rail .settings-panel {
    padding: 9px;
  }

  .right-rail .profile-card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 7px 10px;
  }

  .right-rail .avatar-block {
    width: 70px;
  }

  .right-rail .profile-main strong {
    font-size: 1rem;
  }

  .right-rail .profile-main p,
  .right-rail .profile-card span,
  .right-rail .attribute-row span {
    font-size: 0.7rem;
  }

  .right-rail .attribute-grid {
    gap: 5px;
  }

  .right-rail .attribute-row {
    grid-template-columns: 74px minmax(0, 1fr) 28px;
    gap: 5px;
  }

  .right-rail .course-card {
    gap: 5px;
  }

  .right-rail .course-card h3 {
    font-size: 0.98rem;
    line-height: 1.16;
  }

  .right-rail .side-facts {
    gap: 3px;
  }

  .right-rail .side-facts div {
    padding: 0;
  }

  .right-rail .side-facts dt,
  .right-rail .side-facts dd,
  .right-rail .course-progress span,
  .right-rail .course-progress strong {
    font-size: 0.68rem;
    line-height: 1.18;
  }

  .right-rail .course-progress {
    gap: 3px;
  }

  .right-rail .course-progress > div {
    grid-template-columns: 80px minmax(0, 1fr) 36px;
    gap: 6px;
    font-size: 0.72rem;
  }

  .right-rail .course-progress .meter-track {
    height: 6px;
  }

  .right-rail .mentor-card {
    min-height: 132px;
    gap: 6px;
  }

  .right-rail .mentor-main {
    min-height: 44px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
  }

  .right-rail .mentor-avatar {
    width: 40px;
  }

  .right-rail .mentor-main strong {
    font-size: 0.94rem;
  }

  .right-rail .mentor-main p {
    -webkit-line-clamp: 1;
  }

  .right-rail .mentor-task {
    padding: 5px 7px;
  }

  .right-rail .mentor-task span {
    -webkit-line-clamp: 1;
  }

  .right-entry-panel {
    min-height: 0;
  }

  .right-entry-grid .system-button {
    min-height: 48px;
    grid-template-columns: 30px minmax(0, 1fr);
    justify-items: start;
    gap: 3px 7px;
    padding: 6px;
    text-align: left;
  }

  .right-entry-grid .system-button .system-icon {
    width: 26px;
    height: 26px;
    grid-row: 1 / span 2;
    font-size: 1rem;
  }

  .right-entry-grid .system-button strong,
  .right-entry-grid .system-button .entry-status {
    grid-column: 2;
  }

  .right-entry-grid .system-button strong {
    font-size: 0.68rem;
    line-height: 1.1;
  }

  .right-entry-grid .system-button .entry-status {
    min-height: 17px;
    padding: 1px 5px;
    font-size: 0.58rem;
  }

  .right-entry-grid .system-button em {
    display: none;
  }

  .right-rail .settings-panel {
    padding: 2px;
  }

  .right-rail .settings-toggle {
    min-height: 40px;
  }
}

/* Main game layout overrides: left radio, compact brand, ordered right rail. */
.game-shell > .game-music-dock {
  position: fixed !important;
  inset: auto auto max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  z-index: 6;
  width: min(360px, calc(100vw - 24px));
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.game-shell > .game-music-dock .track-card {
  min-height: 72px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto 26px;
  gap: 4px 9px;
  padding: 7px 9px 7px 7px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 8px 18px oklch(0 0 0 / 0.12);
}

.game-shell > .game-music-dock .track-card::before {
  display: none;
}

.game-shell > .game-music-dock .album-disc {
  width: 58px;
  height: 58px;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.game-shell > .game-music-dock .track-copy {
  grid-column: 2;
  grid-row: 1;
  gap: 2px;
  align-self: end;
}

.game-shell > .game-music-dock .music-station {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin: 0;
  padding: 2px 6px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.58rem;
  line-height: 1.15;
  white-space: nowrap;
}

.game-shell > .game-music-dock .music-timeline {
  grid-column: 2 / 4;
  grid-row: 2;
  min-height: 26px;
}

.game-shell > .game-music-dock .music-toggle-button,
.game-shell > .game-music-dock .music-skip-button {
  width: 30px;
  height: 30px;
  color: oklch(0.18 0 0);
  background: oklch(0.88 0 0);
  border-color: oklch(0.58 0 0);
  border-radius: 6px;
}

.game-shell > .game-music-dock .music-skip-button.is-prev {
  left: calc(50% - 38px);
}

.game-shell > .game-music-dock .music-skip-button.is-next {
  left: calc(50% + 38px);
}

.game-shell > .game-music-dock .music-skip-icon,
.game-shell > .game-music-dock .music-toggle-icon {
  transform: scale(0.68);
}

.game-shell > .game-music-dock .music-time,
.game-shell > .game-music-dock .lyric-line,
.game-shell > .game-music-dock .music-status {
  display: none;
}

.game-shell .blueprint-lockup {
  min-height: 52px;
  display: block;
  padding: 8px 4px;
}

.game-shell .blueprint-lockup strong {
  display: block;
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  line-height: 1;
}

.game-shell .brand-mark,
.game-shell .blueprint-lockup p,
.game-shell .blueprint-lockup span {
  display: none;
}

.settings-corner-button {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 7;
  width: 48px;
  height: 48px;
  min-height: 48px;
  grid-template-columns: 1fr;
  padding: 8px;
  border-radius: 10px;
}

.settings-corner-button .settings-entry-icon {
  width: 30px;
  height: 30px;
}

.status-console {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.status-energy,
.status-pressure {
  grid-column: span 3;
}

.status-money,
.status-gpa,
.status-special-skill {
  grid-column: span 2;
  border-bottom: 0;
}

.status-money,
.status-gpa {
  border-right: 1px solid var(--line);
}

.status-special-skill {
  min-height: 76px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: center;
  padding: 10px 14px;
  text-align: left;
  border-left: 0;
  border-top: 0;
  box-shadow: none;
}

.status-special-skill .action-copy {
  gap: 3px;
}

.status-special-skill .action-copy strong {
  font-size: 0.9rem;
}

.status-special-skill .action-copy > span:not(.action-reason):not(.action-warning) {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.action-grid-flat {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}

.right-entry-grid {
  grid-template-columns: 1fr;
}

.right-entry-grid .system-button {
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr);
  justify-items: start;
  gap: 4px 8px;
  padding: 7px 8px;
  text-align: left;
}

.right-entry-grid .system-button .system-icon {
  width: 30px;
  height: 30px;
  grid-row: 1 / span 2;
}

.right-entry-grid .system-button strong,
.right-entry-grid .system-button .entry-status {
  grid-column: 2;
}

.right-entry-grid .system-button em {
  display: none;
}

@media (min-width: 1201px) {
  .sidebar {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .right-rail {
    grid-template-rows: auto auto auto auto auto;
    padding-top: 0;
    padding-bottom: 60px;
  }

  .right-rail .profile-card,
  .right-rail .course-card,
  .right-rail .mentor-card,
  .right-entry-panel {
    padding: 9px;
  }
}


/* Requested main-game and mentor selection refinements. */
.risk-banner {
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
}

.risk-banner-icon {
  width: 46px;
  height: 46px;
  display: grid !important;
  place-items: center;
  padding: 0;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

.risk-banner-icon img {
  width: 46px;
  height: 46px;
}

.status-console {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.status-energy,
.status-pressure {
  grid-column: span 4;
}

.status-money,
.status-gpa {
  grid-column: span 2;
  min-height: 72px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px;
}

.status-money .status-icon,
.status-gpa .status-icon {
  width: 34px;
  height: 34px;
}

.status-special-skill {
  grid-column: span 4;
  min-height: 84px;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
}

.status-special-skill .action-icon {
  width: 48px;
  height: 48px;
}

.status-special-skill .action-copy {
  gap: 5px;
}

.status-special-skill .action-copy strong {
  font-size: 1rem;
}

.status-special-skill .action-copy > span:not(.action-reason):not(.action-warning) {
  -webkit-line-clamp: 2;
}

.corner-system-bar {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 8;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.corner-entry-button {
  min-height: 48px;
  height: 48px;
  display: grid;
  grid-template-columns: 32px max-content;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 10px;
  white-space: nowrap;
}

.corner-entry-button .system-icon {
  width: 30px;
  height: 30px;
}

.corner-entry-button strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1;
}

.corner-entry-short {
  display: none;
}

.settings-corner-button {
  position: static;
  right: auto;
  bottom: auto;
  width: 48px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
}

.game-shell > .game-music-dock .music-station {
  font-size: 0.66rem;
}

.start-achievement-tile,
.achievement-gallery-item,
.achievement-gallery-item.is-unlocked,
.achievement-gallery-item.is-locked {
  box-sizing: border-box;
  color: oklch(0.08 0 0);
  background: oklch(0.98 0 0 / 0.96);
  border: 1px solid oklch(0.08 0 0 / 0.82);
  border-radius: 4px;
  box-shadow: none;
  image-rendering: pixelated;
}

:root[data-theme="dark"] .start-achievement-tile,
:root[data-theme="dark"] .achievement-gallery-item,
:root[data-theme="dark"] .achievement-gallery-item.is-unlocked,
:root[data-theme="dark"] .achievement-gallery-item.is-locked {
  color: oklch(0.96 0 0);
  background: oklch(0.055 0 0 / 0.96);
  border-color: oklch(0.88 0 0 / 0.78);
}

/* Current request: match achievement and ending gallery frames to dark mode in light theme. */
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending),
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-unlocked,
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked {
  color: oklch(0.96 0 0);
  background: oklch(0.055 0 0 / 0.96);
  border-color: oklch(0.88 0 0 / 0.78);
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending) .achievement-gallery-copy p {
  color: oklch(0.78 0 0);
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending) em {
  color: currentColor;
  border-color: currentColor;
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked strong,
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked p,
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked em {
  color: oklch(0.66 0 0);
}

.start-achievement-tile {
  min-height: 44px;
  padding: 5px;
  overflow: hidden;
}

.start-achievement-tile::before,
.start-achievement-tile::after {
  display: none;
}

.start-achievement-tile:hover {
  background: oklch(0.9 0 0 / 0.98);
  border-color: oklch(0.02 0 0);
}

:root[data-theme="dark"] .start-achievement-tile:hover {
  background: oklch(0.12 0 0 / 0.98);
  border-color: oklch(0.98 0 0 / 0.92);
}

.start-achievement-tile i {
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  color: currentColor;
  border-width: 1px;
}

.start-achievement-tile i::before {
  left: 2px;
  top: -6px;
  width: 6px;
  height: 8px;
  border-width: 1px;
}

.start-achievement-tile i::after {
  left: 4px;
  top: 4px;
  width: 2px;
  height: 2px;
}

.start-leaderboard-list li {
  box-sizing: border-box;
  grid-template-columns: 46px minmax(0, 1fr) minmax(48px, max-content);
  max-width: 100%;
  overflow: hidden;
}

.start-link-button {
  min-height: 44px;
  max-width: 100%;
}

.achievement-gallery-item {
  min-width: 0;
  min-height: 104px;
  grid-template-columns: 76px minmax(0, 1fr) minmax(78px, max-content);
  gap: 10px 14px;
  align-items: center;
  padding: 12px 14px;
}

.achievement-modal-copy h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.08;
}

.achievement-gallery-copy strong {
  color: currentColor;
}

.achievement-gallery-copy p {
  color: oklch(0.3 0 0);
  overflow-wrap: anywhere;
}

.achievement-gallery-copy .achievement-condition-line {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.78;
  display: -webkit-box;
  max-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

:root[data-theme="dark"] .achievement-gallery-copy p {
  color: oklch(0.78 0 0);
}

.start-achievement-icon,
.achievement-gallery-item > .achievement-gallery-icon {
  display: grid;
  place-items: center;
  background: transparent;
}

.achievement-gallery-item > .achievement-gallery-icon {
  width: 70px;
  height: 70px;
  justify-self: center;
  align-self: center;
  padding: 3px;
}

.start-achievement-icon img,
.achievement-gallery-item > .achievement-gallery-icon img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  object-fit: contain;
}

.achievement-gallery-item em,
.achievement-gallery-item.is-ending em,
.achievement-gallery-item.is-achievement em {
  min-width: 74px;
  justify-self: end;
  align-self: center;
  color: currentColor;
  background: transparent;
  border-color: currentColor;
  border-radius: 3px;
}

.achievement-gallery-item.is-unlocked > .achievement-gallery-icon {
  opacity: 1;
  filter: brightness(1.08) contrast(1.08) drop-shadow(0 0 6px oklch(0.7 0 0 / 0.28));
}

.achievement-gallery-item.is-locked > .achievement-gallery-icon {
  opacity: 0.3;
  filter: grayscale(1) contrast(0.68);
}

.achievement-gallery-item.is-locked strong,
.achievement-gallery-item.is-locked p,
.achievement-gallery-item.is-locked em {
  color: oklch(0.45 0 0);
}

:root[data-theme="dark"] .achievement-gallery-item.is-locked strong,
:root[data-theme="dark"] .achievement-gallery-item.is-locked p,
:root[data-theme="dark"] .achievement-gallery-item.is-locked em {
  color: oklch(0.66 0 0);
}

@media (min-width: 1201px) and (max-height: 960px) {
  .start-achievement-grid {
    grid-template-columns: repeat(6, 44px);
  }

  .start-achievement-tile {
    width: 44px;
    height: 44px;
  }

  .start-achievement-icon {
    width: 32px;
    height: 32px;
  }
}


.mentor-select-shell .character-subtitle {
  max-width: min(100%, 760px);
  margin-top: 14px;
  font-size: 1.06rem;
  line-height: 1.55;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: balance;
}

.mentor-select-shell {
  animation: mentorSelectPageEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mentor-select-shell .character-header {
  align-items: flex-start;
  animation: mentorSelectHeaderEnter 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mentor-select-shell .character-header > div:first-child {
  padding-top: clamp(10px, 1.4dvh, 18px);
}

.mentor-select-actions {
  justify-content: flex-end;
}

.mentor-select-card {
  min-height: clamp(600px, 64dvh, 720px);
  grid-template-rows: auto auto minmax(54px, 1fr);
  gap: 14px;
  animation-name: mentorSelectCardEnter;
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

.mentor-select-head {
  grid-template-columns: 125px minmax(0, 1fr);
  align-items: start;
}

.mentor-select-card .mentor-select-head {
  min-height: 138px;
  grid-template-columns: 125px minmax(0, 1fr);
  align-items: start;
  overflow: visible;
}

.mentor-select-portrait {
  min-width: 0;
  display: grid;
  justify-items: center;
}

.mentor-select-card .mentor-select-avatar {
  width: 125px;
  height: 125px;
}

.mentor-select-copy {
  min-width: 0;
}

.mentor-select-copy p {
  font-size: 1.08rem;
  line-height: 1.5;
}

.mentor-select-task {
  width: 100%;
  display: grid;
  align-self: start;
}

.mentor-select-task .character-trait-card {
  min-height: 0;
  grid-template-columns: 105px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 16px;
  padding: 14px 16px 12px;
  border-radius: 8px;
}

.mentor-select-task .character-trait-copy {
  gap: 10px;
}

.mentor-select-task .character-trait-copy em {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.26;
}

.mentor-select-task .character-trait-copy span {
  display: block;
  overflow: visible;
  font-size: 0.94rem;
  line-height: 1.66;
  -webkit-line-clamp: unset;
}

.mentor-select-task .character-trait-card.is-skill .trait-icon {
  width: 105px;
  height: 105px;
  padding: 6px;
  align-self: start;
}

.mentor-select-card > .pixel-button {
  align-self: end;
  inline-size: 100%;
}

@keyframes mentorSelectPageEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mentorSelectHeaderEnter {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mentorSelectCardEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.986);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {
  .mentor-select-shell,
  .mentor-select-shell .character-header,
  .mentor-select-shell .mentor-select-card {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

:root[data-theme="dark"] .game-shell :is(
  .action-button,
  .pixel-button,
  .mini-button,
  .system-button,
  .settings-entry-button,
  .shop-category-tab,
  .modal-option,
  .rail-shortcut
):not(.is-danger) {
  color: oklch(0.96 0 0);
  background:
    linear-gradient(180deg, oklch(0.105 0 0 / 0.99), oklch(0.035 0 0 / 0.99));
  border-color: oklch(0.46 0 0 / 0.68);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.08),
    0 10px 24px oklch(0 0 0 / 0.34);
}

:root[data-theme="dark"] .game-shell :is(
  .action-button,
  .pixel-button,
  .mini-button,
  .system-button,
  .settings-entry-button,
  .shop-category-tab,
  .modal-option,
  .rail-shortcut
):not(.is-danger):hover:not(:disabled) {
  color: oklch(0.99 0 0);
  background:
    linear-gradient(180deg, oklch(0.14 0 0 / 0.99), oklch(0.05 0 0 / 0.99));
  border-color: oklch(0.68 0 0 / 0.72);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.1),
    0 12px 26px oklch(0 0 0 / 0.42);
}

/* Requested UI pass: log split, action risk locks, and compact music controls. */
.game-shell .blueprint-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-shell .brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  filter: drop-shadow(2px 2px 0 var(--grid-strong));
}

.game-shell .blueprint-lockup .brand-mark {
  display: block;
}

.game-shell .blueprint-lockup strong {
  min-width: 0;
}

.action-grid-flat {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}

.action-button.has-risk-lock {
  opacity: 1;
}

.action-button.has-risk-lock .action-copy strong {
  color: var(--danger);
}

.action-button.has-risk-lock .action-lock-icon {
  background: transparent;
  border-color: transparent;
}

.status-special-skill .action-copy strong {
  color: oklch(0.32 0.13 252);
}

:root[data-theme="dark"] .status-special-skill .action-copy strong {
  color: oklch(0.72 0.1 252);
}

.log-tab-control {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.log-tabs {
  gap: 8px;
}

.log-tab {
  min-width: 72px;
  padding: 0 8px 9px;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  font-weight: 700;
  cursor: pointer;
}

#log-tab-actions:checked ~ .log-tabs .log-tab-actions,
#log-tab-events:checked ~ .log-tabs .log-tab-events,
#log-tab-achievements:checked ~ .log-tabs .log-tab-achievements,
#log-tab-purchases:checked ~ .log-tabs .log-tab-purchases {
  color: var(--ink);
  border-bottom-color: var(--blue-dark);
}

.log-panes {
  min-height: 0;
  display: grid;
}

.log-panes .log-list {
  grid-area: 1 / 1;
  display: none;
}

#log-tab-actions:checked ~ .log-panes .log-list-actions,
#log-tab-events:checked ~ .log-panes .log-list-events,
#log-tab-achievements:checked ~ .log-panes .log-list-achievements,
#log-tab-purchases:checked ~ .log-panes .log-list-purchases {
  display: grid;
}

.game-shell > .game-music-dock .music-station {
  font-size: 0.8rem;
}

.game-shell > .game-music-dock .music-toggle-button {
  color: oklch(0.025 0 0);
  background: linear-gradient(180deg, oklch(0.95 0 0), oklch(0.84 0 0));
  border-color: oklch(0.68 0 0);
  border-radius: 5px;
}

@media (max-width: 1200px) {
  .game-shell .blueprint-lockup {
    margin-top: 28px;
  }
}

/* Final main-game polish: compact actions, aligned music dock, and title-side clock. */
.game-shell .blueprint-lockup {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-shell .blueprint-lockup strong {
  min-width: 0;
}

.game-shell .brand-clock {
  margin-left: auto;
  color: var(--ink);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.game-shell > .sidebar {
  padding-bottom: 88px;
}

.game-shell .action-section {
  padding: 8px 9px;
}

.game-shell .action-grid-flat {
  align-content: start;
  grid-template-rows: repeat(var(--action-count, 11), minmax(38px, auto));
  gap: 4px;
}

.game-shell .action-button {
  min-height: 36px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  padding: 3px 8px;
}

.game-shell .action-icon {
  width: 28px;
  height: 28px;
}

.game-shell .action-copy {
  gap: 2px;
}

.game-shell .action-copy strong {
  font-size: 0.78rem;
  line-height: 1.08;
}

.game-shell .action-copy span {
  font-size: 0.64rem;
  line-height: 1.12;
}

.game-shell .action-copy > span:not(.action-reason):not(.action-warning) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.game-shell .action-button .delta-chips {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 3px;
  overflow: hidden;
}

.game-shell .action-button .delta-chip {
  min-height: 17px;
  padding: 1px 4px;
  font-size: 0.62rem;
  line-height: 1.1;
  white-space: nowrap;
}

.game-shell .action-button.has-risk-lock {
  grid-template-columns: 30px minmax(0, 1fr) 40px;
  padding-inline-end: 6px;
}

.game-shell .action-button.has-risk-lock .action-lock-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
}

@media (min-width: 1201px) {
  .game-shell > .game-music-dock {
    position: fixed !important;
    inset: auto auto max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    width: var(--sidebar) !important;
  }
}

.game-shell > .game-music-dock .track-card {
  min-height: 72px;
}

.game-shell > .game-music-dock .music-toggle-button {
  width: 32px;
  height: 32px;
  color: #050505;
  background: linear-gradient(180deg, #f2f2f2, #d8d8d8);
  border: 2px solid #9b9b9b;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    0 2px 0 rgb(0 0 0 / 0.18);
}

.game-shell > .game-music-dock .music-toggle-icon {
  transform: scale(0.74);
}

@media (max-width: 1200px) {
  .game-shell > .sidebar {
    padding-bottom: 0;
  }
}

/* User-requested UI scale pass: larger Wanli shortcut and shop dialog. */
.corner-system-bar {
  right: max(16px, env(safe-area-inset-right));
  gap: 12px;
}

.corner-entry-button {
  width: min(400px, calc(100vw - 92px));
  min-height: 58px;
  height: 58px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 14px;
}

.corner-entry-button .system-icon {
  width: 38px;
  height: 38px;
}

.corner-entry-button strong {
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.12;
  white-space: normal;
}

.settings-corner-button {
  width: 52px;
  height: 58px;
  min-height: 58px;
  flex-basis: 52px;
}

.shop-modal {
  width: min(1120px, calc(100vw - 28px));
  gap: 18px;
  padding: clamp(20px, 2.2vw, 28px);
}

.shop-modal .modal-copy h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
}

.shop-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.shop-balance-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--grid-strong);
}

.shop-balance-chip span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.shop-balance-chip strong {
  color: var(--blue-dark);
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.shop-balance-chip.is-risk {
  border-color: var(--status-risk);
}

.shop-balance-chip.is-risk strong {
  color: var(--status-risk);
}

.shop-modal .modal-copy p {
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.58;
}

.shop-modal .shop-category-tabs {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  padding: 10px;
}

.shop-modal .shop-category-tab {
  min-height: 54px;
  padding: 10px 12px;
  font-size: 1.04rem;
}

.shop-modal .shop-category-tab b {
  min-width: 34px;
  padding: 3px 8px;
  font-size: 1rem;
  line-height: 1.12;
}

.shop-modal .shop-grid {
  max-height: min(56dvh, 620px);
  gap: 12px;
}

.shop-modal .shop-item {
  grid-template-columns: 74px minmax(0, 1fr) minmax(128px, auto);
  gap: 12px;
  padding: 14px;
}

.shop-modal .shop-icon {
  width: 68px;
}

.shop-modal .shop-copy {
  gap: 7px;
}

.shop-modal .shop-copy strong {
  font-size: 1.14rem;
  line-height: 1.25;
}

.shop-modal .shop-copy p {
  font-size: 0.94rem;
  line-height: 1.42;
}

.shop-modal .shop-limit {
  padding: 3px 8px;
  font-size: 0.82rem;
}

.shop-modal .shop-buy {
  gap: 8px;
}

.shop-modal .shop-buy span {
  font-size: 1.46rem;
  line-height: 1.05;
}

.shop-modal .shop-buy .mini-button {
  min-width: 84px;
  min-height: 44px;
  font-size: 1rem;
}


/* Main game alignment pass: fill left action area and tighten profile/log hierarchy. */
.game-shell > .sidebar {
  padding-bottom: 88px;
}

.game-shell .action-section {
  min-height: 0;
}

.game-shell .action-groups,
.game-shell .action-grid-flat {
  min-height: 0;
  height: 100%;
}

.game-shell .action-grid-flat {
  align-content: stretch;
  grid-template-rows: repeat(var(--action-count, 11), minmax(0, 1fr));
}

.game-shell .action-button {
  min-height: 0;
  height: 100%;
}

@media (min-width: 1201px) {
  .game-shell > .game-music-dock {
    inset: auto auto max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    width: var(--sidebar) !important;
  }
}

.game-shell > .game-music-dock .music-toggle-button {
  color: oklch(0 0 0);
}

.game-shell > .game-music-dock .music-toggle-icon::before,
.game-shell > .game-music-dock .music-toggle-icon::after {
  background: oklch(0 0 0);
}

.game-shell > .game-music-dock .music-toggle-button.is-paused .music-toggle-icon::before {
  background: transparent;
  border-left-color: oklch(0 0 0);
}

.game-shell .log-hero .section-head {
  align-items: start;
  margin-bottom: 6px;
}

.log-profile-chip {
  max-width: min(280px, 40%);
  display: grid;
  justify-items: end;
  gap: 3px;
  padding: 5px 8px;
  text-align: right;
  background: color-mix(in oklch, var(--panel-soft), transparent 18%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.log-profile-chip strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.1;
}

.log-profile-chip span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.game-shell .right-rail .profile-card {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 9px 12px;
}

.game-shell .right-rail .avatar-block {
  width: 112px;
}

.game-shell .right-rail .profile-main {
  gap: 8px;
}

.game-shell .right-rail .profile-main strong {
  font-size: 1.08rem;
  line-height: 1.16;
}

.game-shell .right-rail .profile-meta-line {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.game-shell .right-rail .attribute-grid {
  align-content: center;
  gap: 7px;
}

.game-shell .right-rail .attribute-row {
  grid-template-columns: 106px 96px 34px;
  justify-content: start;
  gap: 6px;
}

.game-shell .right-rail .attribute-row .attribute-label {
  font-size: 0.9rem;
  line-height: 1.15;
}

.game-shell .right-rail .attribute-row strong {
  font-size: 0.92rem;
}

@media (max-width: 1200px) {
  .game-shell > .sidebar {
    padding-bottom: 0;
  }

  .log-profile-chip {
    max-width: 46%;
  }
}

/* Game detail pass: strengthen icons, profile identity, metrics, and log rhythm. */
.game-shell > .game-music-dock .music-skip-button,
.game-shell > .game-music-dock .music-skip-icon {
  color: oklch(0 0 0);
}

.game-shell > .game-music-dock .music-skip-icon::after {
  background: oklch(0 0 0);
}

.game-shell > .game-music-dock .music-skip-button.is-prev .music-skip-icon::before {
  border-right-color: oklch(0 0 0);
}

.game-shell > .game-music-dock .music-skip-button.is-next .music-skip-icon::before {
  border-left-color: oklch(0 0 0);
}

.game-shell .right-rail .profile-card {
  grid-template-columns: 142px minmax(0, 1fr);
}

.game-shell .right-rail .profile-card .section-head h2 {
  font-size: 1.08rem;
  line-height: 1.12;
}

.game-shell .right-rail .avatar-block {
  width: 124px;
}

.game-shell .right-rail .profile-meta-line {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.34;
}

.game-shell .right-rail .attribute-row {
  grid-template-columns: 100px 90px 34px;
}

.game-shell .status-energy > strong,
.game-shell .status-pressure > strong,
.game-shell .status-money .status-copy strong {
  color: var(--ink);
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.game-shell .log-list li {
  grid-template-columns: minmax(116px, max-content) minmax(0, 1fr) minmax(144px, auto);
  column-gap: 18px;
}

.game-shell .log-list span {
  padding-right: 4px;
}

.game-shell .action-button {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding-left: 9px;
}

.game-shell .action-icon {
  width: 34px;
  height: 34px;
}

.game-shell .action-copy strong {
  font-size: 0.86rem;
  line-height: 1.08;
}

.game-shell .action-button.has-risk-lock {
  grid-template-columns: 38px minmax(0, 1fr) 42px;
}

/* Requested UI scale and alignment pass. */
.achievement-modal-copy .achievement-summary-line {
  color: var(--ink);
  font-size: clamp(1.04rem, 1.25vw, 1.2rem);
  font-weight: 800;
  line-height: 1.5;
}

.achievement-modal-copy .achievement-rule-list {
  display: grid;
  grid-template-columns: auto 2ch minmax(0, 1fr);
  column-gap: 4px;
  row-gap: 4px;
  max-width: 920px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}

.achievement-modal-copy .achievement-rule-title {
  grid-row: 1 / span 2;
}

.achievement-modal-copy .achievement-rule-index {
  text-align: right;
}

.achievement-modal-copy .achievement-rule-text {
  min-width: 0;
}

.game-shell .right-rail .profile-card .section-head h2 {
  font-size: 1.22rem;
  line-height: 1.08;
}

.game-shell .right-rail .profile-main {
  justify-items: center;
  align-items: start;
}

.game-shell .right-rail .profile-main > div:last-child {
  width: 124px;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.game-shell .right-rail .profile-meta-line {
  width: 100%;
}

.game-shell .action-button {
  grid-template-columns: clamp(42px, 2.15vw, 46px) minmax(0, 1fr);
  gap: 12px;
  padding-left: 12px;
}

.game-shell .action-icon {
  width: clamp(38px, 2vw, 40px);
  height: clamp(38px, 2vw, 40px);
}

.game-shell .action-copy {
  padding-left: 2px;
}

.game-shell .action-copy strong {
  font-size: 0.91rem;
  line-height: 1.08;
}

.game-shell .action-button.has-risk-lock {
  grid-template-columns: clamp(42px, 2.15vw, 46px) minmax(0, 1fr) 42px;
}

@media (min-width: 1201px) {
  .game-shell > .game-music-dock {
    inset: auto auto calc(env(safe-area-inset-bottom) + 21px) max(10px, env(safe-area-inset-left)) !important;
    width: var(--sidebar) !important;
  }
}

@media (max-width: 1200px) {
  .game-shell > .game-music-dock {
    inset-block-end: calc(env(safe-area-inset-bottom) + 12px) !important;
    width: min(360px, calc(100vw - 24px));
  }
}


/* Current game HUD alignment pass. */
.game-shell .brand-clock {
  font-size: clamp(1.08rem, 1.24vw, 1.34rem);
  font-weight: 900;
  letter-spacing: 0;
}

.game-shell .log-profile-chip {
  max-width: min(320px, 48%);
  align-content: center;
}

.game-shell .log-profile-chip strong {
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.game-shell .log-profile-chip span {
  display: none;
}

.game-shell .right-rail {
  grid-template-rows: auto auto auto auto;
  align-content: start;
}

.game-shell .right-rail .profile-card .section-head h2 {
  font-size: clamp(1.08rem, 1.16vw, 1.22rem);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.game-shell .right-rail .mentor-card {
  min-height: 0;
  align-content: start;
  gap: 8px;
  padding-bottom: 10px;
}

.game-shell .right-rail .mentor-main {
  min-height: 100px;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.game-shell .right-rail .mentor-avatar {
  width: 100px;
  height: 100px;
}

.game-shell .right-rail .mentor-main > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.game-shell .right-rail .mentor-main strong {
  font-size: 1rem;
  line-height: 1.12;
}

.game-shell .right-rail .mentor-title {
  font-size: 0.78rem;
}

.game-shell .right-rail .mentor-main p {
  margin-top: 0;
  line-height: 1.28;
  -webkit-line-clamp: 2;
}

.game-shell .right-rail .mentor-task {
  min-height: 0;
  align-items: center;
}

.game-shell .right-rail .mentor-task-copy {
  min-width: 0;
}

.game-shell .log-panes,
.game-shell .log-panes .log-list,
.game-shell .log-list-events {
  align-content: start;
  align-items: start;
}

.game-shell .log-list-events {
  grid-auto-flow: row;
}

@media (min-width: 1201px) {
  .game-shell .right-rail {
    padding-bottom: 0;
  }
}


/* Requested HUD polish: compact portfolio entry, aligned Wanli icon, larger action counter. */
.game-shell .action-section > .section-head.compact > span {
  color: var(--ink);
  font-size: clamp(1.04rem, 1.18vw, 1.22rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.right-entry-portfolio_resume .system-button {
  min-height: 44px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 0 8px;
  padding: 6px 8px;
}

.right-entry-portfolio_resume .system-button .system-icon {
  grid-row: 1;
  align-self: center;
}

.right-entry-portfolio_resume .system-button strong {
  grid-column: 2;
  align-self: center;
  line-height: 1.12;
}

.corner-entry-button .system-icon.system-icon-wanli_road {
  display: grid;
  place-items: center;
  overflow: visible;
}

.corner-entry-button .system-icon.system-icon-wanli_road img {
  width: 112%;
  height: 112%;
  transform: translateY(-1px);
}


/* Requested HUD scale pass: larger action icons, shifted copy, and aligned Wanli shortcut. */
.game-shell .action-button {
  grid-template-columns: clamp(48px, 2.55vw, 52px) minmax(0, 1fr);
  gap: 14px;
  padding-left: 14px;
}

.game-shell .action-icon {
  width: clamp(42px, 2.25vw, 44px);
  height: clamp(42px, 2.25vw, 44px);
}

.game-shell .action-icon img {
  width: 108%;
  height: 108%;
}

.game-shell .action-copy {
  padding-left: 4px;
}

.game-shell .action-copy strong {
  font-size: clamp(0.96rem, 1vw, 1.02rem);
  line-height: 1.1;
}

.game-shell .action-copy > span {
  font-size: clamp(0.69rem, 0.78vw, 0.74rem);
  line-height: 1.16;
}

.game-shell .action-button .delta-chip {
  min-height: 18px;
  font-size: 0.66rem;
}

.game-shell .action-button.has-risk-lock {
  grid-template-columns: clamp(48px, 2.55vw, 52px) minmax(0, 1fr) 42px;
}

.corner-system-bar {
  right: max(10px, env(safe-area-inset-right));
  gap: 12px;
}

.corner-entry-button {
  width: auto;
  min-width: 0;
  min-height: 60px;
  height: 60px;
  flex: 1 1 auto;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 8px 13px;
}

.corner-entry-button .system-icon {
  width: 44px;
  height: 44px;
}

.corner-entry-button .system-icon.system-icon-wanli_road img {
  width: 116%;
  height: 116%;
  transform: translateY(-1px);
}

.settings-corner-button {
  width: 58px;
  height: 60px;
  min-height: 60px;
  flex: 0 0 58px;
}

.settings-corner-button .settings-entry-icon {
  width: 40px;
  height: 40px;
}

.settings-corner-button .settings-entry-icon img {
  width: 112%;
  height: 112%;
}

@media (min-width: 1201px) {
  .corner-system-bar {
    width: var(--rail);
    right: 10px;
  }
}

@media (max-width: 1200px) {
  .corner-system-bar {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
  }
}


/* Requested hover brightness and mentor readability pass. */
:root {
  --button-hover-border-bright: color-mix(in oklch, var(--line-strong), black 18%);
  --start-hover-border-bright: color-mix(in oklch, var(--start-panel-line-strong, var(--line-strong)), black 12%);
}

:root[data-theme="dark"] {
  --button-hover-border-bright: oklch(0.92 0.03 248 / 0.92);
  --start-hover-border-bright: oklch(0.94 0 0 / 0.9);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-link-button:hover,
.start-achievement-tile:hover {
  border-color: var(--start-hover-border-bright);
}

.action-button:hover:not(:disabled),
.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.modal-option:hover:not(:disabled),
.shop-category-tab:hover,
.rail-shortcut:hover:not(:disabled),
.corner-entry-button:hover:not(:disabled),
.settings-corner-button:hover:not(:disabled) {
  border-color: var(--button-hover-border-bright);
}

.game-shell .right-rail .mentor-card .section-head h2 {
  font-size: clamp(1.12rem, 1.18vw, 1.28rem);
  line-height: 1.08;
}

.game-shell .right-rail .mentor-main strong {
  font-size: clamp(1.08rem, 1.12vw, 1.18rem);
  line-height: 1.12;
}

.game-shell .right-rail .mentor-title {
  font-size: 0.9rem;
  line-height: 1.18;
}

.game-shell .right-rail .mentor-main p {
  font-size: 0.88rem;
  line-height: 1.34;
}

.game-shell .right-rail .mentor-task b {
  font-size: 0.92rem;
  line-height: 1.18;
}

.game-shell .right-rail .mentor-task span {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  font-size: 0.82rem;
  line-height: 1.34;
}

/* Competition and postgrad dialog rebuild. */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.competition-modal {
  width: min(1120px, calc(100vw - 28px));
  gap: 12px;
}

.competition-copy {
  gap: 4px;
}

.competition-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.competition-stat {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.competition-stat span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.competition-stat strong {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.08vw, 1.16rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.competition-rule-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.competition-rule-strip span {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  background: color-mix(in oklch, var(--panel-soft), var(--blue) 6%);
  border: 1px solid color-mix(in oklch, var(--line), var(--blue) 18%);
  border-radius: 6px;
}

.competition-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.82fr);
  gap: 12px;
  align-items: start;
}

.competition-card-section,
.competition-side-stack,
.competition-record-panel,
.competition-probability-panel {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.competition-side-stack {
  gap: 10px;
}

.competition-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.competition-card,
.competition-record,
.competition-empty-record,
.competition-probability-panel {
  min-width: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 10%), var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: 6px;
}

.competition-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.competition-card-head {
  display: grid;
  gap: 4px;
}

.competition-card-head strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.18;
}

.competition-card-head span {
  width: fit-content;
  padding: 2px 6px;
  color: var(--blue-dark);
  font-size: 0.7rem;
  font-weight: 800;
  background: color-mix(in oklch, var(--panel), var(--blue) 8%);
  border: 1px solid color-mix(in oklch, var(--line), var(--blue) 18%);
  border-radius: 4px;
}

.competition-card p,
.competition-empty-record p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.42;
}

.competition-requirement-list,
.competition-prize-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.competition-requirement-list i,
.competition-prize-list span {
  padding: 2px 6px;
  color: var(--ink);
  font-size: 0.7rem;
  font-style: normal;
  line-height: 1.25;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.competition-prize-list span {
  color: var(--blue-dark);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.competition-record-list {
  display: grid;
  gap: 6px;
}

.competition-record,
.competition-empty-record {
  display: grid;
  gap: 5px;
  padding: 10px;
}

.competition-record strong,
.competition-empty-record strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.18;
}

.competition-record span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}

.competition-record em {
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.competition-probability-panel {
  padding: 10px;
}

.competition-probability-list {
  display: grid;
  gap: 5px;
}

.competition-probability-list div {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 24%);
}

.competition-probability-list div:last-child {
  border-bottom: 0;
}

.competition-probability-list b {
  color: var(--ink);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.competition-probability-list span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.route-options-only-modal {
  width: min(1160px, calc(100vw - 28px));
  gap: 12px;
}

.route-options-only-modal .route-groups,
.route-options-only-modal .route-group {
  gap: 0;
}

.route-options-only-modal .route-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.route-options-only-modal .route-option {
  min-height: 180px;
  grid-template-columns: 56px minmax(0, 1fr);
  align-content: start;
  padding: 12px;
}

.route-options-only-modal .route-option-copy > span:not(.route-requirements) {
  display: none;
}

.route-options-only-modal .route-option-copy strong {
  font-size: 1rem;
  line-height: 1.16;
}

.route-options-only-modal .route-requirements {
  gap: 6px;
}

.route-options-only-modal .route-requirements i {
  font-size: 0.72rem;
}

@media (max-width: 980px) {
  .competition-summary-grid,
  .competition-rule-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .competition-layout,
  .competition-card-grid,
  .route-options-only-modal .route-option-grid {
    grid-template-columns: 1fr;
  }

  .route-options-only-modal .route-option {
    min-height: 0;
  }
}

/* Requested course, event, portfolio, and action hover refinements. */
.game-shell .right-rail .course-card {
  min-height: clamp(238px, 27dvh, 292px);
  align-content: start;
  gap: 13px;
  padding-bottom: 14px;
}

.game-shell .right-rail .course-card .section-head h2 {
  font-size: clamp(1.16rem, 1.24vw, 1.32rem);
  line-height: 1.08;
}

.game-shell .right-rail .course-card h3 {
  font-size: clamp(1.34rem, 1.4vw, 1.5rem);
  line-height: 1.2;
}

.game-shell .right-rail .side-facts {
  gap: 6px;
}

.game-shell .right-rail .side-facts dt,
.game-shell .right-rail .side-facts dd {
  font-size: clamp(0.82rem, 0.88vw, 0.94rem);
  line-height: 1.28;
}

.game-shell .right-rail .course-progress {
  gap: 8px;
}

.game-shell .right-rail .course-progress > div {
  grid-template-columns: 112px minmax(0, 1fr) 46px;
  gap: 8px;
}

.game-shell .right-rail .course-progress span,
.game-shell .right-rail .course-progress strong {
  font-size: clamp(0.82rem, 0.86vw, 0.92rem);
  line-height: 1.2;
}

.game-shell .right-rail .course-entry-grid .system-button {
  min-height: 86px;
  padding: 10px 12px;
}

.game-shell .right-rail .course-entry-grid .system-button strong {
  font-size: clamp(0.86rem, 0.92vw, 1rem);
}

.game-shell .right-rail .course-entry-grid .system-button .entry-status,
.game-shell .right-rail .course-entry-grid .system-button em {
  font-size: clamp(0.72rem, 0.78vw, 0.84rem);
}

.right-entry-portfolio_resume {
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.right-entry-portfolio_resume .right-entry-grid {
  min-width: 0;
}

.right-entry-portfolio_resume .system-button {
  width: 100%;
  min-height: clamp(46px, 5.4dvh, 58px);
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 7px 9px;
}

.right-entry-portfolio_resume .system-button .system-icon {
  width: 32px;
  height: 32px;
}

.right-entry-portfolio_resume .system-button strong {
  font-size: clamp(0.84rem, 0.9vw, 0.98rem);
}

@media (min-width: 1201px) {
  .corner-system-bar {
    bottom: calc(env(safe-area-inset-bottom) + 21px);
  }
}

@media (max-width: 1200px) {
  .corner-system-bar {
    bottom: calc(env(safe-area-inset-bottom) + 12px);
  }
}

.modal-card.event-card:not(.opening-fixed-card) {
  --result-positive: oklch(0.46 0.18 252);
  --result-negative: oklch(0.54 0.2 25);
  width: min(860px, calc(100vw - 40px));
  gap: 18px;
}

.modal-card.event-card:not(.opening-fixed-card) .modal-copy {
  gap: 10px;
}

.modal-card.event-card:not(.opening-fixed-card) .modal-copy h2 {
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  line-height: 1.16;
}

.modal-card.event-card:not(.opening-fixed-card) .modal-title-icon {
  width: 56px;
  height: 56px;
}

.modal-card.event-card:not(.opening-fixed-card) .modal-copy p {
  max-width: none;
  margin: 0;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  line-height: 1.68;
  overflow-wrap: anywhere;
  white-space: normal;
  text-wrap: pretty;
}

.modal-card.event-card:not(.opening-fixed-card) .modal-options {
  gap: 10px;
}

.modal-option.event-option {
  gap: 6px;
}

.modal-option.event-option > strong {
  font-size: clamp(1.08rem, 1.16vw, 1.22rem);
  line-height: 1.28;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.modal-option.event-option > span:not(.inline-delta-text) {
  font-size: clamp(0.96rem, 1.04vw, 1.08rem);
  line-height: 1.45;
}

.inline-delta-text {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  color: var(--ink);
  line-height: 1.42;
}

.inline-delta-item {
  display: inline-flex;
  gap: 3px;
  align-items: baseline;
  white-space: nowrap;
}

.inline-delta-name {
  color: var(--ink);
  font-weight: 700;
}

.modal-option-delta-text {
  justify-content: center;
  font-size: clamp(1rem, 1.12vw, 1.16rem);
}

.modal-card .settlement-confirm-value.is-positive,
.action-hover-delta .settlement-confirm-value.is-positive {
  color: var(--result-positive, var(--blue-dark));
}

.modal-card .settlement-confirm-value.is-negative,
.action-hover-delta .settlement-confirm-value.is-negative {
  color: var(--result-negative, var(--danger));
}

.modal-card .settlement-confirm-value.is-neutral,
.action-hover-delta .settlement-confirm-value.is-neutral {
  color: var(--muted);
}

.game-shell .action-detail {
  min-width: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.game-shell .action-button .action-copy > span.action-default-detail:not(.action-reason):not(.action-warning) {
  display: grid;
  gap: 2px;
}

.game-shell .action-button .action-copy > span.action-hover-detail:not(.action-reason):not(.action-warning) {
  display: none;
}

.game-shell .action-button.has-hover-delta:hover .action-copy > span.action-default-detail:not(.action-reason):not(.action-warning) {
  display: none;
}

.game-shell .action-button.has-hover-delta:hover .action-copy > span.action-hover-detail:not(.action-reason):not(.action-warning) {
  display: flex;
}

.game-shell .action-hover-delta {
  min-width: 0;
  gap: 3px 8px;
  font-size: clamp(0.72rem, 0.8vw, 0.8rem);
  line-height: 1.2;
}

.game-shell .action-hover-delta .inline-delta-name {
  color: var(--muted);
  font-weight: 700;
}

.game-shell .action-button .action-hover-delta .settlement-confirm-value.is-positive {
  color: oklch(0.46 0.18 252);
}

.game-shell .action-button .action-hover-delta .settlement-confirm-value.is-negative {
  color: oklch(0.54 0.2 25);
}

.game-shell .action-button .action-hover-delta .settlement-confirm-value.is-neutral {
  color: var(--muted);
}

@media (max-height: 820px) and (min-width: 1201px) {
  .game-shell .right-rail .course-card {
    min-height: 228px;
    gap: 10px;
  }
}


/* Requested action restriction, special-skill cooldown, and hover text refinement. */
.game-shell .action-copy {
  gap: 6px;
}

.game-shell .action-copy > span,
.game-shell .action-button .action-copy > span.action-default-detail:not(.action-reason):not(.action-warning) {
  font-size: clamp(0.76rem, 0.86vw, 0.84rem);
  line-height: 1.24;
}

.game-shell .action-button .action-copy > span.action-default-detail:not(.action-reason):not(.action-warning) {
  gap: 4px;
}

.game-shell .action-button .action-copy > span.action-default-detail > span,
.game-shell .action-button .action-copy > span.action-default-detail .delta-chip {
  font-size: clamp(0.76rem, 0.86vw, 0.84rem);
  line-height: 1.24;
}

.game-shell .action-hover-delta,
.game-shell .action-hover-preview {
  font-size: clamp(0.8rem, 0.9vw, 0.88rem);
  line-height: 1.26;
}

.game-shell .action-button .action-copy .action-hover-delta,
.game-shell .action-button .action-copy .action-hover-preview,
.game-shell .action-button .action-copy .action-hover-delta span,
.game-shell .action-button .action-copy .action-hover-delta b {
  font-size: clamp(0.8rem, 0.9vw, 0.88rem);
  line-height: 1.26;
}

.game-shell .action-hover-preview {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.game-shell .action-button.has-side-lock {
  grid-template-columns: clamp(48px, 2.55vw, 52px) minmax(0, 1fr) 44px;
  padding-inline-end: 7px;
}

.game-shell .action-button.has-side-lock .action-lock-icon {
  width: 42px;
  min-height: 42px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  padding: 0;
  background: transparent;
  border: 0;
}

.game-shell .action-button.has-side-lock .action-lock-icon img {
  width: 28px;
  height: 28px;
}

.game-shell .action-button.has-side-lock .action-lock-icon small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.game-shell .action-button.action-disabled {
  opacity: 0.58;
  filter: grayscale(0.42);
  color: color-mix(in oklch, var(--ink), var(--muted) 42%);
  background: color-mix(in oklch, var(--panel), var(--muted) 9%);
  border-color: color-mix(in oklch, var(--line), var(--muted) 36%);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.12),
    0 1px 0 color-mix(in oklch, var(--line), transparent 30%);
}

.game-shell .action-button.action-disabled:disabled {
  opacity: 0.56;
}

.game-shell .action-button.action-disabled:hover:not(:disabled) {
  background: color-mix(in oklch, var(--panel), var(--muted) 9%);
  border-color: color-mix(in oklch, var(--line), var(--muted) 36%);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.12),
    0 1px 0 color-mix(in oklch, var(--line), transparent 30%);
  transform: none;
}

.game-shell .action-button.action-disabled .action-icon {
  opacity: 0.76;
  filter: grayscale(0.62);
}

.game-shell .status-special-skill {
  min-height: 86px;
}

.game-shell .status-special-skill .action-copy {
  gap: 0;
}

.game-shell .status-special-skill .action-copy strong {
  font-size: clamp(1.08rem, 1.12vw, 1.18rem);
  line-height: 1.14;
}

.game-shell .status-special-skill .action-hover-delta,
.game-shell .status-special-skill .action-hover-preview {
  margin-top: 6px;
}

.game-shell .status-special-skill.has-hover-detail:hover .action-copy {
  gap: 6px;
}

.game-shell .action-button.has-hover-detail:hover .action-copy > span.action-default-detail:not(.action-reason):not(.action-warning) {
  display: none;
}

.game-shell .action-button.has-hover-detail:hover .action-copy > span.action-hover-detail:not(.action-reason):not(.action-warning) {
  display: flex;
}

.game-shell .status-special-skill.has-side-lock {
  grid-template-columns: 52px minmax(0, 1fr) 48px;
}

.game-shell .status-special-skill.has-cooldown-lock .action-lock-icon img {
  width: 30px;
  height: 30px;
}

.game-shell .status-special-skill.has-cooldown-lock .action-lock-icon small {
  font-size: 0.62rem;
}


/* Requested right-rail polish, music seeking, and modal motion pass. */
.game-shell .corner-entry-button {
  grid-template-columns: 52px minmax(0, 1fr);
  justify-items: start;
  text-align: left;
}

.game-shell .corner-entry-button .system-icon {
  width: 48px;
  height: 48px;
}

.game-shell .corner-entry-button .system-icon.system-icon-wanli_road img {
  width: 124%;
  height: 124%;
  transform: translate(1px, -2px);
}

.game-shell .corner-entry-button strong {
  justify-self: start;
  text-align: left;
}

.game-shell .right-rail .course-card .section-head h2 {
  font-size: clamp(1.28rem, 1.42vw, 1.52rem);
  line-height: 1.12;
  text-wrap: balance;
}

.game-shell .right-rail .course-card h3 {
  font-size: clamp(1.06rem, 1.12vw, 1.22rem);
  line-height: 1.22;
}

.game-shell .right-rail .side-facts dt,
.game-shell .right-rail .side-facts dd,
.game-shell .right-rail .course-progress span,
.game-shell .right-rail .course-progress strong {
  font-size: clamp(0.92rem, 0.98vw, 1.06rem);
}

.game-shell .right-rail .course-progress > div {
  grid-template-columns: 126px minmax(0, 1fr) 52px;
}

.right-entry-portfolio_resume .system-button {
  min-height: clamp(64px, 7dvh, 76px);
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 12px;
  padding: 10px 12px;
}

.right-entry-portfolio_resume .system-button .system-icon {
  width: 42px;
  height: 42px;
}

.right-entry-portfolio_resume .system-button strong {
  font-size: clamp(1rem, 1.06vw, 1.14rem);
  line-height: 1.14;
}

.game-shell .status-money .status-copy span,
.game-shell .status-gpa .status-copy span {
  font-size: 1rem;
}

.game-shell .status-gpa .status-copy strong {
  color: var(--ink);
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.modal-backdrop {
  animation: modal-backdrop-enter 180ms ease-out both;
}

.modal-card {
  animation: modal-card-enter 220ms cubic-bezier(0.18, 0.86, 0.26, 1) both;
  will-change: opacity, transform;
}

.modal-backdrop.is-closing {
  pointer-events: none;
  animation: modal-backdrop-exit 150ms ease-in both;
}

.modal-backdrop.is-closing .modal-card {
  animation: modal-card-exit 150ms ease-in both;
}

@keyframes modal-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-backdrop-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modal-card-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-card-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
}


/* Final override for current request: keep these after right-rail restoration. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal;
}

.view-soft-enter {
  animation: none !important;
  filter: none !important;
}

.modal-backdrop {
  animation: blockingDialogBackdropIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-card {
  animation: blockingDialogCardIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity, transform;
}

.modal-backdrop.is-switching-in {
  animation: blockingDialogBackdropIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-backdrop.is-switching-out,
.modal-backdrop.is-closing {
  animation: blockingDialogBackdropOut 180ms ease-out both !important;
  pointer-events: none;
}

.modal-backdrop.is-switching-out .modal-card,
.modal-backdrop.is-closing .modal-card {
  animation: blockingDialogCardOut 180ms ease-out both !important;
}

@keyframes blockingDialogBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blockingDialogCardIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blockingDialogBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes blockingDialogCardOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(3px);
  }
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile,
.pixel-button,
.mini-button,
.file-button,
.action-button,
.system-button,
.settings-entry-button,
.modal-option,
.shop-category-tab,
.rail-shortcut {
  transition:
    color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover,
.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.action-button:hover:not(:disabled),
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.modal-option:hover:not(:disabled),
.shop-category-tab:hover,
.rail-shortcut:hover:not(:disabled) {
  filter: saturate(1.004);
  transform: translateY(-1px);
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research .action-hover-delta span,
.game-shell .action-id-site_research .action-hover-delta b,
.game-shell .action-id-site_research .action-copy > span.action-hover-detail,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta span,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta b,
.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value {
  font-size: clamp(0.66rem, 0.7vw, 0.74rem);
  line-height: 1.12;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  gap: 2px 6px;
}

.game-shell .system-panel .system-grid .system-button .system-icon {
  overflow: visible;
}

.game-shell .system-panel .system-grid .system-button .system-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.side-fact-course-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.side-fact-course-icon img {
  transform: translateY(-3px);
}

.game-shell > .game-music-dock .track-copy,
.start-shell > .music-dock .track-copy,
.character-shell > .music-dock .track-copy,
.loading-shell > .music-dock .track-copy {
  transform: translateY(3px);
}

.game-shell .right-rail .mentor-main > div {
  transform: translateY(0);
}

.game-shell .right-rail .mentor-main strong {
  font-size: clamp(1.16rem, 1.26vw, 1.34rem);
  line-height: 1.08;
}

.game-shell .right-rail .mentor-main p {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

/* Current request: mentor selection alignment and process mentor/task polish. */
.mentor-select-card {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

.mentor-select-card .mentor-select-head {
  grid-template-columns: 146px minmax(0, 1fr);
  min-height: 164px;
}

.mentor-select-card .mentor-select-avatar {
  width: 146px;
  height: 146px;
}

.mentor-select-copy p {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.mentor-select-task {
  align-self: stretch;
}

.mentor-select-task .character-trait-card {
  min-height: 156px;
  height: 100%;
  grid-template-columns: 112px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  padding-bottom: 12px;
}

.mentor-select-task .character-trait-card.is-skill .trait-icon {
  width: 112px;
  height: 112px;
}

.mentor-select-card > .pixel-button {
  align-self: end;
}

.game-shell .right-rail .mentor-main {
  align-items: center;
}

.game-shell .right-rail .mentor-main > div {
  transform: translateY(-10px);
}

.game-shell .right-rail .mentor-main p {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.game-shell .right-rail .mentor-task.has-icon {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
}

.game-shell .right-rail .mentor-task-icon {
  width: 72px;
  height: 72px;
  padding: 4px;
}

.game-shell .right-rail .mentor-task-icon img {
  width: 100%;
  height: 100%;
}

.game-shell .right-rail .mentor-task-copy {
  align-self: center;
}

.game-shell .right-rail .attribute-grid {
  gap: 10px;
}

/* Current request correction: soft blocking dialogs, restored system icons, lower course icon, full mentor intro. */
.modal-backdrop {
  animation: blockingDialogBackdropIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-card {
  animation: blockingDialogCardIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity, transform;
}

.modal-backdrop.is-switching-in {
  animation: blockingDialogBackdropIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-backdrop.is-switching-out,
.modal-backdrop.is-closing {
  animation: blockingDialogBackdropOut 180ms ease-out both !important;
}

.modal-backdrop.is-switching-out .modal-card,
.modal-backdrop.is-closing .modal-card {
  animation: blockingDialogCardOut 180ms ease-out both !important;
}

@keyframes blockingDialogBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes blockingDialogCardIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blockingDialogBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes blockingDialogCardOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(3px);
  }
}

.game-shell .system-panel .system-grid .system-button .system-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.side-fact-course-icon img {
  transform: translateY(-3px);
}

.game-shell .right-rail .mentor-main {
  align-items: start;
}

.game-shell .right-rail .mentor-main > div {
  transform: translateY(0);
}

.game-shell .right-rail .mentor-main p {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

/* Current request: softer motion and final game HUD nudges. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal;
}

.view-soft-enter,
.modal-backdrop,
.modal-card,
.modal-backdrop.is-switching-in,
.modal-backdrop.is-switching-out,
.modal-backdrop.is-switching-out .modal-card,
.modal-backdrop.is-closing,
.modal-backdrop.is-closing .modal-card {
  animation-duration: 0ms !important;
  animation-name: none !important;
  filter: none !important;
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile,
.pixel-button,
.mini-button,
.file-button,
.action-button,
.system-button,
.settings-entry-button,
.modal-option,
.shop-category-tab,
.rail-shortcut {
  transition:
    color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover,
.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.action-button:hover:not(:disabled),
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.modal-option:hover:not(:disabled),
.shop-category-tab:hover,
.rail-shortcut:hover:not(:disabled) {
  filter: saturate(1.004);
  transform: translateY(-1px);
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research .action-hover-delta span,
.game-shell .action-id-site_research .action-hover-delta b,
.game-shell .action-id-site_research .action-copy > span.action-hover-detail,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta span,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta b,
.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value {
  font-size: clamp(0.66rem, 0.7vw, 0.74rem);
  line-height: 1.12;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  gap: 2px 6px;
}

.game-shell .system-panel .system-grid .system-button .system-icon {
  overflow: visible;
}

.game-shell .system-panel .system-grid .system-button .system-icon img {
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: contain;
  transform: none;
}

.side-fact-course-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.side-fact-course-icon img {
  transform: translateY(-6px);
}

.game-shell > .game-music-dock .track-copy,
.start-shell > .music-dock .track-copy,
.character-shell > .music-dock .track-copy,
.loading-shell > .music-dock .track-copy {
  transform: translateY(3px);
}

.game-shell .right-rail .mentor-main > div {
  transform: translateY(-15px);
}

.game-shell .right-rail .mentor-main strong {
  font-size: clamp(1.16rem, 1.26vw, 1.34rem);
  line-height: 1.08;
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal-card,
  .modal-backdrop.is-closing,
  .modal-backdrop.is-closing .modal-card {
    animation: none !important;
    transition: none !important;
  }
}

/* Follow-up UI tuning: project choices, tighter course card, and smoother overlays. */
:root {
  --modal-title-standard-size: clamp(1.75rem, 2.4vw, 2.25rem);
  --right-entry-icon-size: 44px;
}

.game-shell .corner-entry-button {
  grid-template-columns: calc(var(--right-entry-icon-size) + 8px) minmax(0, 1fr);
  padding-left: 12px;
}

.game-shell .corner-entry-button .system-icon,
.right-entry-portfolio_resume .system-button .system-icon {
  width: var(--right-entry-icon-size);
  height: var(--right-entry-icon-size);
}

.game-shell .corner-entry-button .system-icon.system-icon-wanli_road {
  overflow: visible;
  transform: translateX(-1px);
}

.game-shell .corner-entry-button .system-icon.system-icon-wanli_road img,
.right-entry-portfolio_resume .system-button .system-icon img {
  width: 108%;
  height: 108%;
  transform: translate(0, -1px);
}

.game-shell .right-rail .course-card {
  min-height: 0;
  gap: 10px;
  padding-bottom: 10px;
}

.game-shell .right-rail .course-card .section-head h2 {
  font-size: var(--modal-title-standard-size);
  line-height: 1.08;
}

.game-shell .right-rail .side-facts {
  margin-top: 0;
}

.game-shell .right-rail .side-facts dt,
.game-shell .right-rail .side-facts dd,
.game-shell .right-rail .course-progress span,
.game-shell .right-rail .course-progress strong {
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.18;
}

.game-shell .right-rail .course-progress {
  gap: 8px;
}

.game-shell .right-rail .course-progress > div {
  grid-template-columns: 132px minmax(0, 1fr) 54px;
}

.game-shell .status-special-skill .action-hover-delta,
.game-shell .status-special-skill .action-hover-delta span,
.game-shell .status-special-skill .action-hover-delta b,
.game-shell .status-special-skill .action-hover-preview {
  font-size: clamp(0.88rem, 0.96vw, 0.98rem);
  line-height: 1.18;
}

.game-shell .action-button:not(.status-special-skill) .action-hover-delta,
.game-shell .action-button:not(.status-special-skill) .action-hover-delta span,
.game-shell .action-button:not(.status-special-skill) .action-hover-delta b {
  font-size: clamp(0.66rem, 0.7vw, 0.74rem);
  line-height: 1.12;
}

.game-shell .action-button:not(.status-special-skill) .action-hover-delta {
  column-gap: 6px;
  row-gap: 2px;
}

.project-select-option > strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.modal-option > strong:has(.course-option-title-icon) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.project-title-icon,
.course-option-title-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
}

.project-title-icon img,
.course-option-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.modal-card.system-modal .modal-copy h2,
.modal-card.game-settings-modal .modal-copy h2,
.modal-card.slim .modal-copy h2 {
  font-size: var(--modal-title-standard-size);
  line-height: 1.08;
}

.modal-backdrop {
  contain: layout paint;
}


/* Current request: course/resume entries, exact option icons, and tight action/log layout. */
.game-shell .right-rail .course-card .course-head {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 0;
}

.game-shell .right-rail .course-card .course-head h2 {
  min-width: 0;
  flex: 1 1 auto;
  font-size: clamp(1.12rem, 1.24vw, 1.34rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.game-shell .right-rail .course-card .course-head > span:last-child {
  flex: 0 0 auto;
}

.course-title-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
}

.course-title-icon img,
.course-progress-label i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.game-shell .right-rail .course-card .side-facts {
  gap: 6px;
}

.game-shell .right-rail .course-progress > div {
  grid-template-columns: 142px minmax(0, 1fr) 48px;
  gap: 8px;
}

.game-shell .right-rail .course-progress .course-progress-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.game-shell .right-rail .course-progress .course-progress-label i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
}

.game-shell .right-rail .course-progress .course-progress-label b {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.game-shell .corner-entry-button strong {
  font-size: clamp(0.94rem, 1.02vw, 1.08rem);
  line-height: 1.12;
}

.game-shell .status-special-skill {
  grid-template-columns: 58px minmax(0, 1fr);
}

.game-shell .status-special-skill .action-icon {
  width: 48px;
  height: 48px;
}

.game-shell .status-special-skill .action-icon img {
  width: 112%;
  height: 112%;
  object-fit: contain;
}

.game-shell .log-list li {
  grid-template-columns: 66px minmax(0, 1fr) minmax(118px, auto);
  gap: 6px;
}

.game-shell .log-list span,
.game-shell .log-list em {
  font-size: 0.78rem;
}

.game-shell .action-id-site_research {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px;
  padding-inline: 8px;
}

.game-shell .action-id-site_research .action-copy {
  gap: 3px;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research .action-hover-delta span,
.game-shell .action-id-site_research .action-hover-delta b,
.game-shell .action-id-site_research .action-copy > span.action-default-detail,
.game-shell .action-id-site_research .action-copy > span.action-default-detail span,
.game-shell .action-id-site_research .action-copy > span.action-default-detail .delta-chip {
  font-size: clamp(0.62rem, 0.66vw, 0.69rem);
  line-height: 1.08;
}

.game-shell .action-id-site_research .action-hover-delta {
  column-gap: 4px;
  row-gap: 1px;
}


/* Current request: HUD alignment, dated logs, shop edge, work actions, and soft navigation. */
:root {
  --right-entry-icon-size: 48px;
}

.view-soft-enter {
  animation: viewSoftEnter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform, filter;
}

@keyframes viewSoftEnter {
  from {
    opacity: 0.001;
    transform: translateY(8px) scale(0.996);
    filter: blur(1px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.game-shell .status-money {
  grid-template-columns: 42px minmax(0, 1fr);
  padding-left: 16px;
}

.game-shell .status-money .status-icon {
  justify-self: start;
}

.game-shell .status-gpa {
  grid-template-columns: 52px minmax(0, 1fr);
  padding-left: 18px;
}

.game-shell .status-gpa .status-icon,
.game-shell .status-gpa .status-copy {
  transform: translateX(calc(6px + 15pt));
}

.game-shell .status-gpa .status-icon {
  width: 44px;
  height: 44px;
}

.game-shell .status-gpa .status-icon img {
  width: 44px;
  height: 44px;
}

.game-shell .log-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.game-shell .log-day time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.start-achievement-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.start-achievement-lock img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.start-achievement-tile i {
  display: none;
}

.game-shell .system-grid .entry-id-shop {
  overflow: visible;
  border-bottom-color: color-mix(in oklch, var(--line), var(--ink) 30%);
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.32),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 2px 0 rgb(43 52 66 / 0.22);
}

.game-shell .system-panel .system-grid .mini-button.system-button:not(.is-danger) {
  overflow: visible;
  border-bottom-color: color-mix(in oklch, var(--line), var(--ink) 30%);
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.32),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 2px 0 rgb(43 52 66 / 0.22);
}

:root[data-theme="dark"] .game-shell .system-grid .mini-button.entry-id-shop:not(.is-danger) {
  border-bottom-color: oklch(0.56 0 0 / 0.78);
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 0.2),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 2px 0 rgb(255 255 255 / 0.14);
}

:root[data-theme="dark"] .game-shell .system-panel .system-grid .mini-button.system-button:not(.is-danger) {
  border-bottom-color: oklch(0.56 0 0 / 0.78);
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 0.2),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 2px 0 rgb(255 255 255 / 0.14);
}

.game-shell .corner-entry-button,
.game-shell .settings-corner-button {
  overflow: visible;
  border-bottom-color: color-mix(in oklch, var(--line), var(--ink) 30%);
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.32),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 2px 0 rgb(43 52 66 / 0.22);
}

:root[data-theme="dark"] .game-shell .corner-entry-button,
:root[data-theme="dark"] .game-shell .settings-corner-button {
  border-bottom-color: oklch(0.56 0 0 / 0.78);
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 0.2),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 2px 0 rgb(255 255 255 / 0.14);
}

.game-shell .action-id-outsourcing,
.game-shell .action-id-part_time {
  grid-template-columns: clamp(62px, 3.4vw, 68px) minmax(0, 1fr);
  gap: 14px;
  padding-left: 10px;
}

.game-shell .action-id-outsourcing .action-icon,
.game-shell .action-id-part_time .action-icon {
  width: clamp(56px, 3vw, 62px);
  height: clamp(56px, 3vw, 62px);
  justify-self: start;
}

.game-shell .action-id-outsourcing .action-icon img,
.game-shell .action-id-part_time .action-icon img {
  width: 116%;
  height: 116%;
  object-fit: contain;
}

.game-shell .action-id-outsourcing .action-copy,
.game-shell .action-id-part_time .action-copy {
  padding-left: 2px;
}

.game-shell .right-rail .course-card {
  gap: 15px;
}

.game-shell .right-rail .course-card .course-head {
  gap: 12px;
  margin-bottom: 6px;
}

.game-shell .right-rail .course-card .course-head h2 {
  font-size: clamp(1.22rem, 1.36vw, 1.48rem);
}

.course-title-icon {
  display: none !important;
}

.game-shell .right-rail .course-card .side-facts {
  gap: 12px;
}

.game-shell .right-rail .course-progress {
  gap: 13px;
}

.game-shell .right-rail .course-progress > div {
  grid-template-columns: 150px minmax(0, 1fr) 52px;
  gap: 12px;
}

.game-shell .corner-entry-button .system-icon,
.right-entry-grid .entry-id-portfolio_resume .system-icon,
.right-entry-grid .entry-id-resume .system-icon {
  width: var(--right-entry-icon-size);
  height: var(--right-entry-icon-size);
}

.right-entry-grid .entry-id-portfolio_resume,
.right-entry-grid .entry-id-resume {
  min-height: 64px;
  grid-template-columns: calc(var(--right-entry-icon-size) + 8px) minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 0 10px;
  padding: 8px 10px;
}

.right-entry-grid .entry-id-portfolio_resume strong,
.right-entry-grid .entry-id-resume strong,
.game-shell .corner-entry-button strong {
  font-size: clamp(0.96rem, 1.02vw, 1.08rem);
  line-height: 1.12;
}

.right-entry-grid .entry-id-portfolio_resume .system-icon,
.right-entry-grid .entry-id-resume .system-icon {
  grid-row: 1;
  justify-self: start;
}

.right-entry-grid .entry-id-portfolio_resume strong,
.right-entry-grid .entry-id-resume strong {
  grid-column: 2;
}

@media (prefers-reduced-motion: reduce) {
  .view-soft-enter {
    animation: none !important;
  }
}


/* Current request: no-flash transitions, larger locks, aligned logs, and full-left icons. */
.view-soft-enter {
  animation: viewSoftEnter 180ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

@keyframes viewSoftEnter {
  from {
    opacity: 0.985;
  }

  to {
    opacity: 1;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.2, 0.85, 0.2, 1);
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: appViewHold;
}

::view-transition-new(root) {
  animation-name: appViewSettle;
}

@keyframes appViewHold {
  from,
  to {
    opacity: 1;
  }
}

@keyframes appViewSettle {
  from {
    opacity: 0.992;
  }

  to {
    opacity: 1;
  }
}

.modal-backdrop {
  animation: modal-backdrop-enter 170ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.modal-card {
  animation: modal-card-enter 190ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.modal-backdrop.is-switching-in {
  animation-name: modal-backdrop-switch-in;
}

.modal-backdrop.is-switching-out {
  pointer-events: none;
  animation: modal-backdrop-switch-out 170ms ease-out both;
}

.modal-backdrop.is-switching-out .modal-card {
  animation: modal-card-switch-out 170ms ease-out both;
}

@keyframes modal-backdrop-enter {
  from {
    opacity: 0.985;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-card-enter {
  from {
    opacity: 0.992;
    transform: scale(0.998);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-backdrop-switch-in {
  from {
    opacity: 0.992;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-backdrop-switch-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes modal-card-switch-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.998);
  }
}

.start-achievement-lock {
  top: 3px;
  right: 3px;
  width: 36px;
  height: 36px;
}

.game-shell .log-list li {
  grid-template-columns: minmax(132px, auto) minmax(0, 1fr) minmax(118px, auto);
}

.game-shell .log-list span {
  white-space: nowrap;
}

.game-shell .action-id-site_research {
  grid-template-columns: clamp(48px, 2.55vw, 52px) minmax(0, 1fr);
  gap: 14px;
  padding: 6px 12px 6px 14px;
}

.game-shell .action-id-site_research .action-copy {
  gap: 5px;
  padding-left: 4px;
}

.game-shell .action-id-site_research .action-copy strong {
  font-size: clamp(0.96rem, 1vw, 1.02rem);
  line-height: 1.1;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research .action-hover-delta span,
.game-shell .action-id-site_research .action-hover-delta b,
.game-shell .action-id-site_research .action-copy > span.action-default-detail,
.game-shell .action-id-site_research .action-copy > span.action-default-detail span,
.game-shell .action-id-site_research .action-copy > span.action-default-detail .delta-chip {
  font-size: clamp(0.69rem, 0.78vw, 0.74rem);
  line-height: 1.16;
}

.game-shell .action-id-outsourcing,
.game-shell .action-id-part_time {
  grid-template-columns: clamp(68px, 3.8vw, 74px) minmax(0, 1fr);
  gap: 14px;
  padding: 3px 12px 3px 6px;
}

.game-shell .action-id-outsourcing .action-icon,
.game-shell .action-id-part_time .action-icon {
  width: clamp(58px, 3.4vw, 64px);
  height: calc(100% - 6px);
  min-height: 58px;
  max-height: 64px;
  justify-self: start;
  align-self: center;
}

.game-shell .action-id-outsourcing .action-icon img,
.game-shell .action-id-part_time .action-icon img {
  width: 118%;
  height: 118%;
}

.course-select-option {
  grid-template-columns: clamp(96px, 7.2vw, 104px) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding-left: 8px;
}

.course-select-option .course-option-side-icon {
  grid-row: 1 / span 4;
  grid-column: 1;
  width: clamp(88px, 6.8vw, 94px);
  height: clamp(88px, 6.8vw, 94px);
  min-height: 88px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: start;
}

.course-select-option .course-option-side-icon img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  image-rendering: pixelated;
}

.course-select-option > strong,
.course-select-option > span:not(.course-option-side-icon),
.course-select-option > em,
.course-select-option > .delta-chips {
  grid-column: 2;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .modal-backdrop,
  .modal-card,
  .modal-backdrop.is-switching-in,
  .modal-backdrop.is-switching-out,
  .modal-backdrop.is-switching-out .modal-card {
    animation: none !important;
  }
}


/* Current request: leaderboard fields, shop category continuity, entry icons, HUD alignment. */
.shop-category.is-shop-category-soft-enter {
  animation: shopCategorySoftEnter 170ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

@keyframes shopCategorySoftEnter {
  from {
    opacity: 0.992;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.annual-course-fact dd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.side-fact-course-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
}

.side-fact-course-icon img {
  width: 118%;
  height: 118%;
  object-fit: contain;
  image-rendering: pixelated;
}

.project-select-option {
  grid-template-columns: clamp(92px, 7vw, 104px) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding: 9px 14px 9px 8px;
}

.project-select-option .project-option-side-icon {
  grid-row: 1 / span 4;
  grid-column: 1;
  width: clamp(84px, 6.5vw, 96px);
  height: clamp(84px, 6.5vw, 96px);
  min-height: 84px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: start;
}

.project-select-option .project-option-side-icon img {
  width: 116%;
  height: 116%;
  object-fit: contain;
  image-rendering: pixelated;
}

.project-select-option > strong,
.project-select-option > span:not(.project-option-side-icon),
.project-select-option > em,
.project-select-option > .delta-chips {
  grid-column: 2;
}

.game-shell .action-id-outsourcing,
.game-shell .action-id-part_time {
  grid-template-columns: clamp(48px, 2.55vw, 52px) minmax(0, 1fr);
  gap: 14px;
  padding: 6px 12px 6px 14px;
}

.game-shell .action-id-outsourcing .action-icon,
.game-shell .action-id-part_time .action-icon {
  width: clamp(42px, 2.25vw, 44px);
  height: clamp(42px, 2.25vw, 44px);
  min-height: 0;
  max-height: none;
  justify-self: start;
  align-self: center;
}

.game-shell .action-id-outsourcing .action-icon img,
.game-shell .action-id-part_time .action-icon img {
  width: 112%;
  height: 112%;
}

.game-shell .action-id-site_research.has-hover-delta:hover {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 9px 6px 10px;
}

.game-shell .action-id-site_research.has-hover-delta:hover .action-copy {
  min-width: 0;
  gap: 3px;
  padding-left: 0;
}

.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 4px;
  overflow: hidden;
}

.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-item {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value {
  min-width: 0;
  font-size: clamp(0.52rem, 0.58vw, 0.6rem);
  line-height: 1.02;
}

.game-shell .status-money {
  grid-column: span 2;
  position: relative;
  z-index: 2;
  width: calc(100% + 10px);
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  padding-left: 18px;
}

.game-shell .status-console {
  overflow: visible;
}

.game-shell .status-gpa {
  grid-column: span 2;
  position: relative;
  border-left: 0;
  padding-left: 56px;
}

.game-shell .status-gpa::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(37px + 2pt);
  width: 1px;
  background: var(--line);
}

.game-shell .status-money .status-icon {
  width: 44px;
  height: 44px;
  justify-self: start;
  align-self: center;
}

.game-shell .status-money .status-copy {
  transform: translateX(calc(4px - 3pt));
}

.game-shell .status-money .status-copy strong {
  font-size: clamp(0.96rem, 1.02vw, 1.08rem);
  line-height: 1.08;
  overflow: visible;
}

.game-shell .status-money,
.game-shell .status-money .status-copy {
  overflow: visible;
}

.game-shell .corner-system-bar {
  left: auto;
  width: auto;
  align-items: flex-end;
  justify-content: flex-end;
}

.game-shell .corner-entry-button {
  width: clamp(218px, 18vw, 258px);
  max-width: calc(100vw - 96px);
  flex: 0 0 clamp(218px, 18vw, 258px);
  min-height: 70px;
  height: 70px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 13px 8px 9px;
}

.game-shell .corner-entry-button .system-icon {
  width: 54px;
  height: 54px;
  justify-self: start;
  transform: translate(-2px, -1px);
}

.game-shell .corner-entry-button .system-icon.system-icon-wanli_road {
  transform: translate(-4px, -2px);
}

.game-shell .corner-entry-button .system-icon.system-icon-wanli_road img {
  width: 122%;
  height: 122%;
  object-fit: contain;
}

.game-shell .settings-corner-button {
  width: 64px;
  height: 70px;
  min-height: 70px;
  flex-basis: 64px;
  padding: 9px;
}

.game-shell .settings-corner-button .settings-entry-icon {
  width: 46px;
  height: 46px;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .shop-category.is-shop-category-soft-enter {
    animation: none !important;
  }
}

/* Current request: browser annotations, project modal fit, and hover settlement polish. */
.modal-card.project-select-card {
  width: min(980px, calc(100vw - 42px));
}

.project-select-card .modal-options {
  gap: 10px;
}

.project-select-card .project-select-option {
  grid-template-columns: clamp(84px, 5.8vw, 92px) minmax(0, 1fr);
  column-gap: 12px;
  padding: 9px 16px 9px 8px;
}

.project-select-card .project-select-option .project-option-side-icon {
  width: clamp(76px, 5.1vw, 84px);
  height: clamp(76px, 5.1vw, 84px);
  min-height: 76px;
  transform: translateY(-1px);
}

.project-select-card .project-select-option .project-option-side-icon img {
  width: 110%;
  height: 110%;
}

.project-select-card .project-select-option > span:not(.project-option-side-icon) {
  line-height: 1.34;
}

.project-select-card .project-select-option .modal-delta {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
}

.project-select-card .project-select-option .delta-chip {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 5px;
  white-space: nowrap;
}

.project-select-card .project-select-option .delta-chip span,
.project-select-card .project-select-option .delta-chip strong {
  font-size: clamp(0.72rem, 0.78vw, 0.8rem);
}

.game-shell .action-id-site_research.has-hover-delta:hover {
  grid-template-columns: clamp(48px, 2.55vw, 52px) minmax(0, 1fr);
  gap: 10px;
  padding: 6px 10px 6px 12px;
}

.game-shell .action-id-site_research.has-hover-delta:hover .action-copy {
  min-width: 0;
  gap: 3px;
  padding-left: 2px;
}

.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 5px;
  overflow: hidden;
}

.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-item {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}

.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value {
  font-size: clamp(0.56rem, 0.62vw, 0.64rem);
  line-height: 1.08;
}

.game-shell .status-special-skill {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
}

.game-shell .status-special-skill .action-icon {
  justify-self: center;
  align-self: center;
}

.game-shell .status-special-skill .action-icon img {
  width: 110%;
  height: 110%;
}

.game-shell .status-special-skill .action-copy {
  padding-left: 6px;
}

.game-shell .right-rail .mentor-card .section-head h2 {
  font-size: clamp(1.22rem, 1.36vw, 1.48rem);
  line-height: 1.08;
}

.game-shell .corner-entry-button {
  width: clamp(236px, 16.6vw, 284px);
  max-width: calc(100vw - 96px);
  flex: 0 0 clamp(236px, 16.6vw, 284px);
  height: 76px;
  min-height: 76px;
  padding: 9px 17px 9px 20px;
  margin: 2px 86px 1px 3px;
}

.game-shell .corner-entry-button .system-icon.system-icon-wanli_road img {
  margin-top: -8px;
}

.game-shell .settings-corner-button {
  height: 76px;
  min-height: 76px;
  padding: 11px 7px;
  margin-right: 1px;
}

.side-fact-course-icon img {
  transform: translateY(-8px);
}


/* Current request: course selection scale, dates, corner alignment, and button settlement typography. */
.modal-card.course-select-card .kicker {
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  line-height: 1.2;
}

.modal-card.course-select-card .modal-copy h2 {
  font-size: clamp(1.68rem, 1.9vw, 2.08rem);
  line-height: 1.16;
}

.course-select-card .course-select-option > strong {
  font-size: clamp(1.22rem, 1.34vw, 1.42rem);
  line-height: 1.24;
}

.course-select-card .course-select-option > span:not(.course-option-side-icon) {
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.42;
}

.game-shell .log-day span,
.game-shell .log-day time {
  font-size: clamp(0.88rem, 0.96vw, 1rem);
  line-height: 1.2;
}

.game-shell .corner-entry-button {
  width: min(344px, calc(100vw - 96px));
  flex: 0 0 min(344px, calc(100vw - 96px));
  margin: 2px 0 1px 3px;
}

.game-shell .settings-corner-button {
  margin-right: 1px;
}

.project-select-card .project-select-option {
  align-content: center;
}

.project-select-card .project-select-option > strong,
.project-select-card .project-select-option > span:not(.project-option-side-icon),
.project-select-card .project-select-option > .modal-delta,
.project-select-card .project-select-option > em {
  transform: translateY(4px);
}

.project-select-card .project-select-option .modal-delta,
.modal-option .modal-delta,
.modal-option .modal-option-delta-text,
.action-button .action-hover-delta,
.action-button .action-hover-delta span,
.action-button .action-hover-delta b,
.action-button .delta-chip,
.action-button .delta-chip span,
.action-button .delta-chip strong {
  font-size: clamp(1.02rem, 1.16vw, 1.18rem);
  line-height: 1.32;
}

.modal-card.project-select-card .project-select-option > strong {
  font-size: clamp(1.24rem, 1.48vw, 1.54rem);
  line-height: 1.18;
}

.modal-card.project-select-card .project-select-option .modal-delta,
.modal-card.project-select-card .project-select-option .modal-delta .delta-chip,
.modal-card.project-select-card .project-select-option .modal-delta .delta-chip span,
.modal-card.project-select-card .project-select-option .modal-delta .delta-chip strong {
  font-size: clamp(0.86rem, 0.94vw, 0.98rem);
  line-height: 1.22;
}

.modal-option .modal-delta,
.modal-option .modal-option-delta-text,
.action-button .action-hover-delta,
.action-button .delta-chips {
  align-items: center;
  justify-content: center;
}

.modal-option .delta-chip,
.action-button .delta-chip {
  min-height: 30px;
  padding: 3px 7px;
}

.modal-option .delta-chip span,
.modal-option .delta-chip strong,
.action-button .delta-chip span,
.action-button .delta-chip strong {
  font-size: clamp(1.02rem, 1.16vw, 1.18rem);
  line-height: 1.32;
}

.modal-card.project-select-card .project-select-option .modal-delta .delta-chip,
.modal-card.project-select-card .project-select-option .modal-delta .delta-chip span,
.modal-card.project-select-card .project-select-option .modal-delta .delta-chip strong {
  font-size: clamp(0.86rem, 0.94vw, 0.98rem);
  line-height: 1.22;
}

.modal-option .inline-delta-item,
.action-button .inline-delta-item {
  align-items: center;
}

.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta span,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta b {
  font-size: clamp(0.78rem, 0.86vw, 0.9rem);
  line-height: 1.16;
}


/* Character draw page: one visible card with a deck-like reveal. */
.character-draw-shell {
  grid-template-rows: auto minmax(0, 1fr) minmax(118px, 132px);
  align-content: start;
}

.character-draw-stage {
  width: min(780px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0 auto;
}

.character-card-toggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.character-draw-deck {
  position: relative;
  width: min(720px, 100%);
  height: clamp(700px, calc(100dvh - 260px), 820px);
  min-height: 680px;
  perspective: 1200px;
  isolation: isolate;
}

.character-draw-deck::before,
.character-draw-deck::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border: 2px solid color-mix(in oklch, var(--line), var(--ink) 10%);
  border-radius: 10px;
  background: color-mix(in oklch, var(--panel), var(--panel-soft) 36%);
  box-shadow: 0 12px 24px oklch(0 0 0 / 0.08);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.character-draw-deck::before {
  opacity: 0.54;
  transform: translate(10px, 10px) rotate(1.4deg);
}

.character-draw-deck::after {
  opacity: 0.38;
  transform: translate(-8px, 6px) rotate(-1deg);
}

.character-draw-deck .character-draw-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: none;
  overflow: auto;
  opacity: 0;
  animation: none;
  transform-origin: 50% 90%;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.character-card-back {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: white;
  text-align: center;
  border: 2px solid color-mix(in oklch, var(--line), var(--ink) 18%);
  border-radius: 10px;
  background:
    linear-gradient(135deg, oklch(0.21 0.08 252), oklch(0.35 0.13 238)),
    var(--character-blue-deep);
  box-shadow:
    inset 0 0 0 3px oklch(1 0 0 / 0.12),
    0 18px 32px oklch(0 0 0 / 0.14);
  cursor: pointer;
  transform-origin: 50% 90%;
  transition:
    opacity 180ms ease-out,
    transform 240ms cubic-bezier(0.18, 0.86, 0.26, 1),
    filter 180ms ease-out;
  will-change: transform, opacity, filter;
}

.character-card-back::before {
  content: "";
  width: min(220px, 48%);
  aspect-ratio: 1;
  border: 2px solid oklch(1 0 0 / 0.34);
  background:
    linear-gradient(90deg, transparent 48%, oklch(1 0 0 / 0.18) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, oklch(1 0 0 / 0.18) 48% 52%, transparent 52%);
  image-rendering: pixelated;
}

.character-card-back span {
  font-size: clamp(0.82rem, 0.9vw, 0.96rem);
  font-weight: 900;
  letter-spacing: 0;
  opacity: 0.72;
}

.character-card-back strong {
  font-size: clamp(1.25rem, 1.7vw, 1.72rem);
  line-height: 1.12;
}

.character-card-back:hover {
  filter: brightness(1.06);
  transform: translateY(-3px) scale(1.006);
}

#character-card-reveal:checked ~ .character-draw-deck .character-card-back {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px) rotateX(12deg) scale(0.96);
}

#character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
  z-index: 2;
  display: grid;
  opacity: 1;
  animation: characterDrawReveal 380ms cubic-bezier(0.18, 0.86, 0.26, 1) both;
}

#character-card-reveal:focus-visible ~ .character-draw-deck .character-card-back {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

@keyframes characterDrawReveal {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(34px) rotateX(12deg) scale(0.955);
  }

  56% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-4px) rotateX(0) scale(1.01);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) rotateX(0) scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {
  #character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
    animation: none;
    filter: none;
    transform: none;
  }

  .character-card-back,
  .character-card-back:hover {
    transform: none;
  }
}

/* Current request: competition directory, model material icons, and postgrad title. */
.competition-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.competition-rule-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.competition-layout {
  grid-template-columns: 1fr;
}

.competition-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.competition-side-stack {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.competition-card {
  grid-template-columns: clamp(42px, 3.4vw, 54px) minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  padding: 9px;
}

.competition-card-icon {
  grid-column: 1;
  width: clamp(40px, 3.2vw, 52px);
  height: clamp(40px, 3.2vw, 52px);
  display: grid;
  place-items: center;
  align-self: start;
}

.competition-card-icon img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  image-rendering: pixelated;
}

.competition-card-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.competition-card-head strong {
  font-size: clamp(0.9rem, 0.92vw, 1rem);
}

.competition-card p {
  font-size: clamp(0.74rem, 0.78vw, 0.82rem);
}

.competition-requirement-list,
.competition-prize-list {
  gap: 4px;
}

.competition-requirement-list i,
.competition-prize-list span {
  font-size: clamp(0.64rem, 0.68vw, 0.72rem);
}

.route-options-only-copy {
  gap: 4px;
}

.academic-route-modal {
  width: min(1480px, calc(100vw - 28px));
  gap: 16px;
}

.academic-route-modal .modal-copy {
  max-width: 820px;
  gap: 8px;
}

.academic-route-modal .academic-route-preopen-copy {
  color: var(--ink) !important;
}

.academic-route-modal .academic-route-preopen-copy .is-nowrap {
  white-space: nowrap;
}

:root[data-theme="dark"] .academic-route-modal .academic-route-preopen-copy {
  color: var(--ink) !important;
}

.academic-route-modal .modal-copy p:not(.kicker) {
  color: var(--ink);
  font-size: clamp(0.98rem, 0.96vw, 1.08rem);
  line-height: 1.68;
}

.academic-route-modal .route-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.overseas-route-modal .route-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.overseas-ielts-entry {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 18px;
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 12px 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background:
    linear-gradient(90deg, oklch(0.08 0.01 255) 0%, oklch(0.13 0.012 255) 24%, oklch(0.24 0.01 255) 64%, oklch(0.38 0.006 255) 100%);
  border: 1px solid color-mix(in oklch, var(--blue-dark), var(--line) 52%);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white, transparent 72%),
    0 12px 26px oklch(0.18 0.04 250 / 0.1);
  cursor: pointer;
}

.overseas-ielts-entry::before {
  content: "";
  position: absolute;
  inset: -46% auto -46% -66%;
  width: 58%;
  background:
    linear-gradient(104deg, transparent 0%, rgb(255 255 255 / 0.03) 18%, rgb(255 255 255 / 0.18) 44%, rgb(255 255 255 / 0.1) 62%, transparent 100%);
  filter: blur(14px);
  opacity: 0;
  transform: translateX(-18%) skewX(-16deg) scaleX(0.92);
  transition:
    opacity 760ms ease,
    transform 2400ms cubic-bezier(0.12, 0.86, 0.18, 1);
  pointer-events: none;
}

.overseas-ielts-entry:hover,
.overseas-ielts-entry:focus-visible {
  border-color: var(--gold);
  box-shadow:
    inset 0 -3px 0 color-mix(in oklch, var(--gold), var(--blue-dark) 12%),
    0 14px 28px oklch(0.18 0.04 250 / 0.13);
}

.overseas-ielts-entry:hover::before,
.overseas-ielts-entry:focus-visible::before {
  opacity: 0.82;
  transform: translateX(350%) skewX(-16deg) scaleX(1.16);
}

.overseas-ielts-entry > * {
  position: relative;
  z-index: 1;
}

.overseas-ielts-entry-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  background: oklch(0.055 0.01 255);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 7px;
}

.overseas-ielts-entry-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}

.overseas-ielts-entry-copy {
  display: grid;
  gap: 3px;
}

.overseas-ielts-entry-copy strong {
  color: oklch(0.94 0.01 250);
  font-size: clamp(1.34rem, 1.34vw, 1.58rem);
  line-height: 1.08;
}

.overseas-ielts-entry-copy em {
  color: oklch(0.76 0.01 250);
  font-size: clamp(0.82rem, 0.82vw, 0.94rem);
  font-style: normal;
  font-weight: 800;
}

.overseas-tier-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.overseas-tier-tab {
  min-height: 50px;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.08rem, 1.08vw, 1.2rem);
  font-weight: 900;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.overseas-tier-tab:hover,
.overseas-tier-tab:focus-visible {
  border-color: var(--gold);
}

.overseas-tier-tab.is-active {
  color: var(--blue-dark);
  background: transparent;
  border-color: var(--blue-dark);
  box-shadow: inset 0 -3px 0 var(--blue-dark);
}

.overseas-route-modal .route-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.overseas-route-modal {
  width: min(1180px, calc(100vw - 28px));
}

.overseas-route-modal .route-option {
  min-height: 0;
  padding: 12px;
}

.overseas-route-modal .route-option-title-row {
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
}

.overseas-route-modal .route-option-icon {
  width: 66px;
  height: 66px;
}

.overseas-route-modal .route-option-title-row strong {
  font-size: 1.08rem;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.overseas-route-modal .route-option-description {
  font-size: 0.92rem;
  line-height: 1.42;
}

.overseas-route-modal .route-option-description-detail {
  display: inline;
  white-space: normal;
}

.overseas-route-modal .route-requirements i {
  font-size: 0.82rem;
  line-height: 1.25;
}

.career-change-modal .route-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.career-change-modal {
  position: relative;
  padding-top: 44px;
}

.career-change-modal .career-route-close-button {
  position: absolute;
  top: 58px;
  right: 22px;
  min-width: 92px;
  min-height: 42px;
  padding: 8px 16px;
  z-index: 2;
}

.career-change-modal .route-option {
  min-height: 344px;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 22px;
  align-content: start;
}

.career-change-modal .route-option[data-id="career_sales"],
.career-change-modal .route-option[data-id="career_startup"] {
  width: 100%;
  justify-self: start;
}

.career-change-modal .route-option-icon {
  width: 88px;
  height: 88px;
}

.career-change-modal .route-option-title-row {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
}

.career-change-modal .route-option-title-row strong {
  font-size: clamp(1.56rem, 1.56vw, 1.8rem);
}

.career-change-modal .route-option-copy {
  align-self: stretch;
  min-height: 0;
}

.career-change-modal .route-option-description {
  font-size: clamp(1.08rem, 1.08vw, 1.18rem);
  line-height: 1.58;
  white-space: pre-line;
}

.career-change-modal .route-option-description-detail {
  white-space: pre-line;
}

.career-change-modal .route-requirements {
  margin-top: auto;
  align-self: end;
}

.academic-route-modal .route-facts div {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 12px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 42%);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.academic-route-modal .route-facts dt {
  font-size: clamp(0.96rem, 0.98vw, 1.08rem);
}

.academic-route-modal .route-facts dd {
  margin: 0;
  font-size: clamp(1.24rem, 1.24vw, 1.4rem);
}

.academic-route-modal .route-entry-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.academic-route-modal .route-entry-notes p {
  margin: 0;
  padding: 10px 12px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 36%);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: clamp(0.86rem, 0.84vw, 0.94rem);
  line-height: 1.6;
}

.academic-route-modal .route-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.academic-route-modal .route-option {
  min-height: 252px;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 18px;
  align-content: start;
  justify-items: start;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 6%), color-mix(in oklch, var(--panel-soft), var(--panel) 24%));
  border-color: color-mix(in oklch, var(--line), var(--ink) 10%);
  box-shadow: 0 12px 26px oklch(0.18 0.04 250 / 0.1);
}

.academic-route-modal .route-option-icon {
  width: 82px;
  height: 82px;
  border-radius: 7px;
}

.academic-route-modal .route-option-title-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.academic-route-modal .route-option-title-row strong {
  min-width: 0;
}

.academic-route-modal .route-option-copy {
  gap: 10px;
}

.academic-route-modal .route-option-copy strong,
.academic-route-modal .route-option-title-row strong {
  color: var(--ink);
  font-size: clamp(1.5rem, 1.5vw, 1.72rem);
  line-height: 1.18;
}

.academic-route-modal .route-option-description {
  color: var(--muted);
  font-size: clamp(1.1rem, 1.1vw, 1.2rem);
  line-height: 1.62;
}

.academic-route-modal .route-option-description-detail {
  display: inline-block;
  font-size: clamp(1.12rem, 1.12vw, 1.22rem);
  white-space: nowrap;
}

.academic-route-modal.career-change-modal .route-option-description,
.academic-route-modal.career-change-modal .route-option-description-detail {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.academic-route-modal.career-change-modal .route-option-description-detail {
  display: block;
}

.academic-route-modal .route-requirements {
  gap: 6px;
}

.academic-route-modal .route-requirements i {
  padding: 3px 6px;
  font-size: clamp(1.02rem, 1.02vw, 1.12rem);
  line-height: 1.35;
}

.academic-route-modal.overseas-route-modal .route-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.academic-route-modal.overseas-route-modal .route-option {
  min-height: 0;
  padding: 12px;
}

.academic-route-modal.overseas-route-modal .route-option-copy {
  width: 100%;
  gap: 7px;
}

.academic-route-modal.overseas-route-modal .route-option-title-row {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
}

.academic-route-modal.overseas-route-modal .route-option-icon {
  width: 78px;
  height: 78px;
}

.academic-route-modal.overseas-route-modal .route-option-icon img {
  width: 108%;
  height: 108%;
  max-width: none;
}

.academic-route-modal.overseas-route-modal .route-option-title-row strong {
  font-size: clamp(1.48rem, 1.42vw, 1.66rem);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.academic-route-modal.overseas-route-modal .route-option-title-translation {
  display: block;
  margin-top: 2px;
  font-size: 0.82em;
  line-height: 1.18;
}

.academic-route-modal.overseas-route-modal .route-option-description,
.academic-route-modal.overseas-route-modal .route-option-description-detail {
  white-space: normal;
  overflow-wrap: anywhere;
}

.academic-route-modal.overseas-route-modal .route-option-description {
  font-size: clamp(1rem, 0.96vw, 1.1rem);
  line-height: 1.36;
}

.academic-route-modal.overseas-route-modal .route-option-description-detail {
  display: block;
  font-size: inherit;
}

.academic-route-modal.overseas-route-modal .route-requirements i {
  font-size: clamp(0.96rem, 0.92vw, 1.06rem);
  white-space: normal;
}

.academic-route-modal .route-option-copy > span:not(.route-requirements):not(.route-option-description),
.academic-route-modal .route-option-copy em {
  font-size: clamp(0.94rem, 0.94vw, 1.04rem);
  line-height: 1.45;
}

.ielts-registration-modal {
  width: min(900px, calc(100vw - 28px));
}

.ielts-registration-hero {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.ielts-registration-hero-icon {
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 10%), color-mix(in oklch, var(--panel-soft), var(--blue) 10%));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 -4px 0 color-mix(in oklch, var(--blue-dark), transparent 78%);
}

.ielts-registration-hero-icon img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  image-rendering: pixelated;
}

.ielts-registration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ielts-registration-card {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 82px;
  padding: 8px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 38%);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.ielts-registration-card span {
  color: var(--muted);
  font-size: clamp(1rem, 1vw, 1.14rem);
  font-weight: 900;
}

.ielts-registration-card strong {
  color: var(--ink);
  font-size: clamp(1.2rem, 1.18vw, 1.38rem);
  line-height: 1.2;
}

.ielts-registration-card em {
  color: var(--muted);
  font-size: clamp(0.86rem, 0.86vw, 0.98rem);
  font-style: normal;
  line-height: 1.48;
}

.ielts-registration-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.ielts-registration-actions .pixel-button {
  min-width: min(220px, 100%);
  white-space: normal;
}

.ielts-exam-action-reason {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: normal;
  text-align: right;
}

.route-apply-card {
  width: min(900px, calc(100vw - 28px));
  gap: 18px;
  padding: 24px;
}

.route-apply-card .modal-copy {
  gap: 10px;
}

.route-apply-card .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.16;
}

.route-apply-card .modal-title-icon {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  padding: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 10%), color-mix(in oklch, var(--panel-soft), var(--blue) 10%));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 -4px 0 color-mix(in oklch, var(--blue-dark), transparent 78%);
}

.route-apply-card .modal-copy p:not(.kicker) {
  max-width: none;
  margin: 0;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  font-weight: 400;
  line-height: 1.68;
  overflow-wrap: anywhere;
  white-space: normal;
}

.route-apply-card .modal-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, auto));
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.route-apply-card .modal-option {
  min-width: min(220px, 100%);
}

.ielts-exam-action-reason.is-danger {
  color: var(--danger);
}

@media (max-width: 1080px) {
  .career-change-modal {
    padding-top: 22px;
  }

  .career-change-modal .career-route-close-button {
    position: static;
    justify-self: end;
    margin-bottom: 4px;
  }

  .academic-route-modal .route-facts,
  .academic-route-modal .route-entry-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academic-route-modal .route-option-grid {
    grid-template-columns: 1fr;
  }

  .overseas-route-modal .route-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academic-route-modal.overseas-route-modal .route-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academic-route-modal .route-option-description {
    white-space: normal;
  }

  .academic-route-modal .route-option-description-detail {
    white-space: normal;
  }

  .academic-route-modal .route-option {
    min-height: 0;
  }

  .ielts-registration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.public-service-modal {
  width: min(1180px, calc(100vw - 28px));
  gap: 14px;
}

.public-service-preopen-copy {
  color: var(--ink);
  max-width: 82ch;
  font-size: clamp(0.98rem, 0.96vw, 1.08rem);
  line-height: 1.68;
}

.public-service-preopen-copy .is-nowrap {
  white-space: nowrap;
}

.public-service-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.public-service-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-service-facts div {
  min-height: 58px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.public-service-facts dt {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.public-service-facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.14vw, 1.24rem);
  font-weight: 900;
}

.public-service-tab {
  min-height: 50px;
  padding: 11px 12px;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.08vw, 1.2rem);
  font-weight: 900;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.public-service-tab.is-active {
  color: var(--blue-dark);
  background: transparent;
  border-color: var(--blue-dark);
  box-shadow: inset 0 -3px 0 var(--blue-dark);
}

.public-service-jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.public-service-job-card {
  min-height: 152px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 36%);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.public-service-job-icon,
.public-service-detail-icon {
  display: grid;
  place-items: center;
  padding: 6px;
  background: color-mix(in oklch, var(--panel), var(--blue) 8%);
  border: 1px solid color-mix(in oklch, var(--line), var(--blue) 28%);
  border-radius: 7px;
}

.public-service-job-icon {
  width: 96px;
  height: 96px;
}

.public-service-job-icon img,
.public-service-detail-icon img,
.public-service-apply-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.public-service-job-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.public-service-job-copy strong {
  font-size: clamp(1.42rem, 1.44vw, 1.64rem);
  line-height: 1.18;
}

.public-service-job-card.has-no-subtitle .public-service-job-copy strong {
  font-size: clamp(1.42rem, 1.44vw, 1.64rem);
}

.public-service-job-copy em {
  color: var(--muted);
  font-size: clamp(0.98rem, 0.98vw, 1.08rem);
  font-style: normal;
  line-height: 1.35;
}

.public-service-detail {
  display: grid;
  gap: 12px;
}

.public-service-detail-head {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 42%);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.public-service-detail-icon {
  width: 108px;
  height: 108px;
}

.public-service-detail-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.public-service-detail-head h3 {
  margin: 2px 0 4px;
  font-size: clamp(1.86rem, 1.86vw, 2.16rem);
  line-height: 1.12;
}

.public-service-detail-head.has-no-subtitle h3 {
  font-size: clamp(1.86rem, 1.86vw, 2.16rem);
}

.public-service-detail-head p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.08vw, 1.2rem);
}

.public-service-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.public-service-detail-body article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.public-service-detail-body h4 {
  margin: 0;
  font-size: clamp(1.12rem, 1.12vw, 1.28rem);
}

.public-service-detail-body p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.08vw, 1.2rem);
  line-height: 1.65;
}

.public-service-requirements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, max-content));
  gap: 8px;
}

.public-service-requirements i {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 7px 9px 5px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: clamp(0.94rem, 0.94vw, 1.04rem);
  font-style: normal;
  line-height: 1.28;
  white-space: nowrap;
}

.public-service-disabled-reason {
  margin: 0;
  color: var(--danger);
  font-weight: 900;
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: right;
}

.public-service-apply-button {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}

.public-service-apply-stack {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.public-service-apply-button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

@media (max-width: 1080px) {
  .public-service-jobs,
  .public-service-detail-body {
    grid-template-columns: 1fr;
  }
}


.model-material-option {
  grid-template-columns: clamp(82px, 6.5vw, 96px) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding-left: 8px;
}

.model-material-option .model-material-option-side-icon {
  grid-row: 1 / span 4;
  grid-column: 1;
  width: clamp(76px, 6vw, 88px);
  height: clamp(76px, 6vw, 88px);
  min-height: 76px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: start;
}

.model-material-option .model-material-option-side-icon img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  image-rendering: pixelated;
}

.model-material-option > strong,
.model-material-option > span:not(.model-material-option-side-icon),
.model-material-option > em,
.model-material-option > .delta-chips {
  grid-column: 2;
}

.modal-model_material .modal-copy h2,
.modal-mentor_task_result .modal-copy h2 {
  font-size: clamp(1.85rem, 2.18vw, 2.42rem);
  line-height: 1.12;
}

.modal-model_material .modal-copy p:not(.kicker) {
  font-size: clamp(1.1rem, 1.24vw, 1.3rem);
  line-height: 1.6;
}

.modal-model_material .model-material-option > strong {
  font-size: clamp(1.18rem, 1.34vw, 1.42rem);
  line-height: 1.18;
}

.modal-model_material .model-material-option > span:not(.model-material-option-side-icon) {
  font-size: clamp(0.98rem, 1.08vw, 1.14rem);
  line-height: 1.36;
}

.modal-model_material .model-material-option .modal-delta,
.modal-model_material .model-material-option .modal-delta .delta-chip,
.modal-model_material .model-material-option .modal-delta .delta-chip span,
.modal-model_material .model-material-option .modal-delta .delta-chip strong {
  font-size: clamp(1.02rem, 1.14vw, 1.22rem);
  line-height: 1.22;
}

.random-event-card:is(.random-event-trigger-normal, .random-event-trigger-first_week, .random-event-trigger-model) .event-option .modal-option-delta-text,
.random-event-card:is(.random-event-trigger-normal, .random-event-trigger-first_week, .random-event-trigger-model) .event-option .modal-option-delta-text span,
.random-event-card:is(.random-event-trigger-normal, .random-event-trigger-first_week, .random-event-trigger-model) .event-option .modal-option-delta-text b {
  font-size: clamp(1.08rem, 1.24vw, 1.34rem);
  line-height: 1.2;
}

.random-event-card .modal-option.event-option {
  gap: 8px;
  min-height: 72px;
  padding: 14px 16px;
}

.random-event-card .modal-option.event-option > strong {
  font-size: clamp(1.18rem, 1.34vw, 1.42rem);
  line-height: 1.18;
}

.random-event-card .modal-option.event-option > span:not(.inline-delta-text),
.random-event-card .event-option .modal-option-delta-text,
.random-event-card .event-option .modal-option-delta-text span,
.random-event-card .event-option .modal-option-delta-text b {
  font-size: clamp(1.08rem, 1.24vw, 1.34rem);
  line-height: 1.24;
}

.random-event-card .event-option .modal-option-delta-text {
  justify-content: center;
}

.random-event-card.random-event-trigger-internship .modal-option.event-option > strong {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.14;
}

.random-event-card.random-event-trigger-internship .modal-option.event-option > strong .settlement-confirm-label,
.random-event-card.random-event-trigger-internship .modal-option.event-option > strong .settlement-confirm-value {
  font-size: inherit;
  line-height: inherit;
}

.random-event-card.random-event-trigger-internship .event-option .modal-option-delta-text {
  display: inline-flex;
  flex-wrap: nowrap;
  width: auto;
  justify-content: center;
  gap: 6px;
}

.random-event-card.random-event-trigger-internship .event-option .modal-option-delta-text,
.random-event-card.random-event-trigger-internship .event-option .modal-option-delta-text span,
.random-event-card.random-event-trigger-internship .event-option .modal-option-delta-text b {
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.14;
}

.game-shell .right-rail .profile-intro,
.game-shell .right-rail .mentor-main p,
.character-card-head p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.game-shell .right-rail .profile-intro {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: clamp(0.78rem, 0.86vw, 0.9rem);
  line-height: 1.36;
}

.game-shell .right-rail .mentor-main {
  align-items: start;
}

@media (max-width: 980px) {
  .competition-card-grid,
  .competition-side-stack {
    grid-template-columns: 1fr;
  }

  .competition-summary-grid,
  .competition-rule-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Current request: icon nudges and size-only polish. */
.game-shell .corner-entry-button .system-icon.system-icon-wanli_road img {
  margin-top: -6px;
}

.game-shell .corner-entry-button strong {
  transform: translateX(5px);
}

.side-fact-course-icon img {
  transform: translateY(-6px);
}

.game-shell .game-main .system-button.is-minimal .system-icon {
  width: 88px;
  height: 88px;
}

.game-shell .game-main .system-button.is-minimal .system-icon img {
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  object-fit: contain;
}

.game-shell .right-rail .mentor-avatar {
  width: 100px;
  height: 100px;
}

.game-shell .right-rail .mentor-avatar img {
  width: 100%;
  height: 100%;
}

/* Current request: restore process mentor size, enlarge HUD/entry icons, and normalize action deltas. */
.game-shell .status-energy .status-icon {
  width: 49px;
  height: 49px;
}

.game-shell .status-energy .status-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.game-shell .action-button .action-copy {
  min-width: 0;
  gap: 5px;
}

.game-shell .action-button .action-copy > span.action-default-detail,
.game-shell .action-button .action-copy > span.action-hover-detail {
  min-width: 0;
  align-items: center;
}

.game-shell .action-button .delta-chips,
.game-shell .action-button .action-hover-delta {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px 8px;
  overflow: hidden;
}

.game-shell .action-button .delta-chip,
.game-shell .action-button .inline-delta-item {
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 0;
  white-space: nowrap;
}

.game-shell .action-button .action-hover-delta,
.game-shell .action-button .action-hover-delta span,
.game-shell .action-button .action-hover-delta b,
.game-shell .action-button .delta-chip,
.game-shell .action-button .delta-chip span,
.game-shell .action-button .delta-chip strong,
.game-shell .action-button .inline-delta-name,
.game-shell .action-button .settlement-confirm-value {
  font-size: clamp(0.76rem, 0.84vw, 0.86rem);
  line-height: 1.18;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research .action-hover-delta span,
.game-shell .action-id-site_research .action-hover-delta b,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta span,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta b,
.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value,
.game-shell .action-id-site_research .action-copy > span.action-default-detail,
.game-shell .action-id-site_research .action-copy > span.action-default-detail span,
.game-shell .action-id-site_research .action-copy > span.action-default-detail .delta-chip,
.game-shell .action-id-site_research .action-copy > span.action-default-detail .delta-chip span,
.game-shell .action-id-site_research .action-copy > span.action-default-detail .delta-chip strong {
  font-size: clamp(0.76rem, 0.84vw, 0.86rem);
  line-height: 1.18;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  gap: 3px 8px;
}

/* Current request: silky profile-to-draw reveal and softer page transitions. */
:root {
  --soft-page-enter-ms: 360ms;
  --soft-page-exit-ms: 260ms;
  --soft-page-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --draw-card-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.view-soft-enter {
  animation: viewSoftEnterSilky var(--soft-page-enter-ms) var(--soft-page-ease) both;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

@keyframes viewSoftEnterSilky {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.997);
  }

  62% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-fill-mode: both;
}

::view-transition-old(root) {
  animation: appViewFadeOut var(--soft-page-exit-ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: appViewFadeIn var(--soft-page-enter-ms) var(--soft-page-ease) both;
}

@keyframes appViewFadeOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.998);
  }
}

@keyframes appViewFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.997);
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.character-draw-deck,
.character-card-back,
.character-draw-deck .character-draw-card {
  transform-style: preserve-3d;
}

.character-draw-shell.is-profile-draw-intro .character-draw-deck {
  animation: characterDeckSettle 580ms var(--draw-card-ease) both;
  will-change: opacity, transform, filter;
}

.character-draw-shell.is-profile-draw-intro .character-card-back {
  animation: characterCardDealIn 560ms var(--draw-card-ease) both;
}

.character-draw-shell.is-card-revealed .character-card-back {
  animation: none;
}

#character-card-reveal:checked ~ .character-draw-deck .character-card-back {
  opacity: 0;
  pointer-events: none;
  filter: blur(1px) brightness(0.94);
  transform: translate3d(0, -8px, 32px) rotateX(3deg) rotateY(-178deg) rotateZ(-1deg) scale(0.98);
  transition:
    opacity 220ms ease-in 210ms,
    transform 520ms cubic-bezier(0.55, 0.02, 0.22, 1),
    filter 260ms ease-in 170ms;
}

#character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
  display: grid;
  opacity: 1;
  animation: characterDrawFlipConfirm 960ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes characterDeckSettle {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 22px, 0) rotateX(7deg) scale(0.97);
  }

  60% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -4px, 0) rotateX(-1deg) scale(1.006);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
  }
}

@keyframes characterCardDealIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, -40px) rotateX(18deg) rotateY(22deg) rotateZ(4deg) scale(0.94);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -8px, 10px) rotateX(-4deg) rotateY(-8deg) rotateZ(-1.2deg) scale(1.015);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
  }
}

@keyframes characterDrawRevealSilky {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(0.78);
    transform: translate3d(28px, 56px, -90px) rotateX(22deg) rotateY(-34deg) rotateZ(-7deg) scale(0.82);
  }

  38% {
    opacity: 1;
    filter: blur(1.8px) saturate(1.03);
    transform: translate3d(-8px, -20px, 42px) rotateX(-5deg) rotateY(13deg) rotateZ(3deg) scale(1.03);
  }

  66% {
    opacity: 1;
    filter: blur(0.4px) saturate(1);
    transform: translate3d(5px, 4px, 8px) rotateX(1deg) rotateY(-4deg) rotateZ(-1.2deg) scale(0.996);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
  }
}

@keyframes characterDrawFlipConfirm {
  0% {
    opacity: 0;
    filter: blur(2px) saturate(0.9);
    transform: translate3d(0, -8px, 18px) rotateX(3deg) rotateY(178deg) rotateZ(1deg) scale(0.98);
  }

  18% {
    opacity: 0;
    filter: blur(1.6px) saturate(0.94);
  }

  48% {
    opacity: 1;
    filter: blur(0.4px) saturate(1.04);
    transform: translate3d(0, -10px, 34px) rotateX(-2deg) rotateY(-10deg) rotateZ(-1.4deg) scale(1.025);
  }

  72% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 3px, 8px) rotateX(0.8deg) rotateY(3deg) rotateZ(0.4deg) scale(0.995);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-soft-enter,
  .character-draw-shell.is-profile-draw-intro .character-draw-deck,
  .character-draw-shell.is-profile-draw-intro .character-card-back,
  #character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  #character-card-reveal:checked ~ .character-draw-deck .character-card-back {
    opacity: 0;
    pointer-events: none;
    transition: none !important;
    transform: none !important;
  }
}

/* Current request: event readability, aligned mentor tasks, smaller course icons, concise bios, and stable research deltas. */
.opening-fixed-card .modal-copy p,
.opening-fixed-card .modal-media figcaption {
  font-size: clamp(1.18rem, 1.52vw, 1.34rem);
  line-height: 1.62;
}

.opening-fixed-card .modal-option strong {
  font-size: clamp(1.22rem, 1.52vw, 1.4rem);
  line-height: 1.2;
}

.mentor-select-card {
  grid-template-rows: minmax(184px, auto) minmax(184px, auto) minmax(54px, 1fr);
}

.mentor-select-card .mentor-select-head {
  min-height: 184px;
}

.mentor-select-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mentor-select-task {
  align-self: stretch;
}

.mentor-select-task .character-trait-card {
  min-height: 184px;
  height: 100%;
}

.course-select-option {
  grid-template-columns: clamp(72px, 5.4vw, 78px) minmax(0, 1fr);
}

.course-select-option .course-option-side-icon {
  width: clamp(66px, 5.1vw, 70px);
  height: clamp(66px, 5.1vw, 70px);
  min-height: 66px;
}

.course-select-option .course-option-side-icon img {
  width: 100%;
  height: 100%;
}

.game-shell .right-rail .profile-intro,
.game-shell .right-rail .mentor-main p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.game-shell .right-rail .profile-intro {
  -webkit-line-clamp: 2;
}

.game-shell .right-rail .mentor-main p {
  -webkit-line-clamp: 1;
}

.game-shell .action-id-site_research .action-copy > span.action-default-detail,
.game-shell .action-id-site_research .action-copy > span.action-hover-detail,
.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research .action-hover-delta span,
.game-shell .action-id-site_research .action-hover-delta b,
.game-shell .action-id-site_research .delta-chip,
.game-shell .action-id-site_research .delta-chip span,
.game-shell .action-id-site_research .delta-chip strong,
.game-shell .action-id-site_research .inline-delta-name,
.game-shell .action-id-site_research .settlement-confirm-value,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta span,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta b,
.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value {
  font-size: clamp(0.76rem, 0.84vw, 0.86rem);
  line-height: 1.18;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px 8px;
}

.modal-card.project-select-card .modal-copy h2 {
  font-size: clamp(2rem, 2.35vw, 2.62rem);
  line-height: 1.12;
}

/* Current request: minimal achievement popup, no frame asset. */
.achievement-toast {
  min-height: 96px;
  border: 2px solid oklch(0.18 0.025 252 / 0.82);
  border-radius: 10px;
  clip-path: none;
  background: oklch(0.985 0.004 252 / 0.96);
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 16px 18px;
  box-shadow: 0 18px 34px oklch(0.08 0.02 252 / 0.18);
  image-rendering: auto;
}

.achievement-toast::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  border: 1px solid oklch(0.18 0.025 252 / 0.42);
  border-radius: 6px;
  pointer-events: none;
}

:root[data-theme="dark"] .achievement-toast,
:root:not([data-theme="dark"]) .achievement-toast {
  color: oklch(0.98 0.004 252);
  background: oklch(0.16 0.008 252 / 0.98);
  border: 2px solid oklch(0.98 0.004 252 / 0.94);
  box-shadow: 0 18px 36px oklch(0.02 0 0 / 0.42);
}

:root[data-theme="dark"] .achievement-toast::after,
:root:not([data-theme="dark"]) .achievement-toast::after {
  border-color: oklch(0.98 0.004 252 / 0.68);
}

.achievement-toast-icon,
.achievement-toast-copy,
.achievement-toast em {
  z-index: 1;
}

.achievement-toast-icon {
  width: 58px;
  filter: none;
  image-rendering: auto;
}

.achievement-toast-icon img {
  image-rendering: auto;
}

.achievement-toast-copy {
  padding-inline-end: 52px;
}

.achievement-toast strong,
.achievement-toast p,
.achievement-toast em {
  text-shadow: none;
}

.achievement-toast strong {
  color: currentColor;
  font-size: clamp(1.02rem, 1.18vw, 1.14rem);
}

.achievement-toast strong span,
.achievement-toast strong b {
  color: currentColor;
}

.achievement-toast p {
  color: color-mix(in oklch, currentColor, transparent 22%);
  font-size: clamp(0.82rem, 0.94vw, 0.92rem);
  line-height: 1.38;
}

.achievement-toast em {
  top: 15px;
  right: 20px;
  min-width: 50px;
  color: oklch(0.68 0.18 252);
  font-size: 1.08rem;
}


/* Restore game right rail to c994d2c61a214f85d09cd7909ac1bd09f3bd2e7e. */
.game-shell .right-rail {
  grid-template-rows: auto auto auto auto;
  align-content: start;
}

.game-shell .right-rail .profile-card {
  grid-template-columns: 142px minmax(0, 1fr);
}

.game-shell .right-rail .profile-card .section-head h2 {
  font-size: clamp(1.08rem, 1.16vw, 1.22rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.game-shell .right-rail .avatar-block {
  width: 124px;
}

.game-shell .right-rail .profile-main {
  gap: 8px;
  justify-items: center;
  align-items: start;
}

.game-shell .right-rail .profile-main > div:last-child {
  width: 124px;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.game-shell .right-rail .profile-meta-line {
  width: 100%;
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.game-shell .right-rail .profile-intro {
  display: none;
}

.game-shell .right-rail .attribute-grid {
  align-content: center;
  gap: 7px;
}

.game-shell .right-rail .attribute-row {
  grid-template-columns: 100px 90px 34px;
  justify-content: start;
  gap: 6px;
}

.game-shell .right-rail .attribute-row .attribute-label {
  font-size: 0.9rem;
  line-height: 1.15;
}

.game-shell .right-rail .attribute-row strong {
  font-size: 0.92rem;
}

.game-shell .right-rail .course-card {
  min-height: 0;
  align-content: start;
  gap: 10px;
  padding-bottom: 10px;
}

.game-shell .right-rail .course-card .course-head {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 0;
}

.game-shell .right-rail .course-card .course-head h2 {
  min-width: 0;
  flex: 1 1 auto;
  font-size: clamp(1.12rem, 1.24vw, 1.34rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.game-shell .right-rail .course-card .side-facts {
  gap: 6px;
  margin-top: 0;
}

.game-shell .right-rail .side-facts dt,
.game-shell .right-rail .side-facts dd,
.game-shell .right-rail .course-progress span,
.game-shell .right-rail .course-progress strong {
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.18;
}

.annual-course-fact dd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.side-fact-course-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
}

.side-fact-course-icon img {
  width: 118%;
  height: 118%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translateY(-8px);
}

.game-shell .right-rail .course-progress {
  gap: 8px;
}

.game-shell .right-rail .course-progress > div {
  grid-template-columns: 142px minmax(0, 1fr) 48px;
  gap: 8px;
}

.game-shell .right-rail .course-progress .course-progress-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.game-shell .right-rail .course-progress .course-progress-label i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
}

.game-shell .right-rail .course-progress .course-progress-label b {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.game-shell .right-rail .course-entry-grid .system-button {
  min-height: 86px;
  padding: 10px 12px;
}

.game-shell .right-rail .course-entry-grid .system-button strong {
  font-size: clamp(0.86rem, 0.92vw, 1rem);
}

.game-shell .right-rail .course-entry-grid .system-button .entry-status,
.game-shell .right-rail .course-entry-grid .system-button em {
  font-size: clamp(0.72rem, 0.78vw, 0.84rem);
}

.right-entry-portfolio_resume {
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.right-entry-portfolio_resume .right-entry-grid {
  min-width: 0;
}

.right-entry-portfolio_resume .system-button {
  width: 100%;
  min-height: clamp(64px, 7dvh, 76px);
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 12px;
  padding: 10px 12px;
}

.right-entry-portfolio_resume .system-button .system-icon {
  grid-row: 1;
  align-self: center;
  width: 42px;
  height: 42px;
}

.right-entry-portfolio_resume .system-button .system-icon img {
  width: 108%;
  height: 108%;
  transform: translate(0, -1px);
}

.right-entry-portfolio_resume .system-button strong {
  grid-column: 2;
  align-self: center;
  font-size: clamp(1rem, 1.06vw, 1.14rem);
  line-height: 1.14;
}

.game-shell .right-rail .mentor-card {
  min-height: 0;
  align-content: start;
  gap: 8px;
  padding-bottom: 10px;
}

.game-shell .right-rail .mentor-card .section-head h2 {
  font-size: clamp(1.22rem, 1.36vw, 1.48rem);
  line-height: 1.08;
}

.game-shell .right-rail .mentor-main {
  min-height: 100px;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.game-shell .right-rail .mentor-avatar {
  width: 100px;
  height: 100px;
}

.game-shell .right-rail .mentor-avatar img {
  width: 100%;
  height: 100%;
}

.game-shell .right-rail .mentor-main > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.game-shell .right-rail .mentor-main strong {
  font-size: 1rem;
  line-height: 1.12;
}

.game-shell .right-rail .mentor-title {
  font-size: 0.78rem;
}

.game-shell .right-rail .mentor-main p {
  display: -webkit-box;
  margin-top: 0;
  overflow: hidden;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.game-shell .right-rail .mentor-task {
  min-height: 0;
  align-items: center;
}

.game-shell .right-rail .mentor-task-copy {
  min-width: 0;
}

@media (min-width: 1201px) {
  .game-shell .right-rail {
    padding-bottom: 0;
  }
}


/* Final override for current request: keep these after right-rail restoration. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal;
}

.view-soft-enter {
  animation: none !important;
  filter: none !important;
}

.modal-backdrop {
  animation: blockingDialogBackdropIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-card {
  animation: blockingDialogCardIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity, transform;
}

.modal-backdrop.is-switching-in {
  animation: blockingDialogBackdropIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-backdrop.is-switching-out,
.modal-backdrop.is-closing {
  animation: blockingDialogBackdropOut 180ms ease-out both !important;
  pointer-events: none;
}

.modal-backdrop.is-switching-out .modal-card,
.modal-backdrop.is-closing .modal-card {
  animation: blockingDialogCardOut 180ms ease-out both !important;
}

@keyframes blockingDialogBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blockingDialogCardIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blockingDialogBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes blockingDialogCardOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(3px);
  }
}

.start-entry-button,
.start-small-card,
.start-toolbar-button,
.start-achievement-tile,
.pixel-button,
.mini-button,
.file-button,
.action-button,
.system-button,
.settings-entry-button,
.modal-option,
.shop-category-tab,
.rail-shortcut {
  transition:
    color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover,
.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.action-button:hover:not(:disabled),
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.modal-option:hover:not(:disabled),
.shop-category-tab:hover,
.rail-shortcut:hover:not(:disabled) {
  filter: saturate(1.004);
  transform: translateY(-1px);
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research .action-hover-delta span,
.game-shell .action-id-site_research .action-hover-delta b,
.game-shell .action-id-site_research .action-copy > span.action-hover-detail,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta span,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta b,
.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value {
  font-size: clamp(0.66rem, 0.7vw, 0.74rem);
  line-height: 1.12;
}

.game-shell .action-id-site_research .action-hover-delta,
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  gap: 2px 6px;
}

.game-shell .system-panel .system-grid .system-button .system-icon {
  overflow: visible;
}

.game-shell .system-panel .system-grid .system-button .system-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.side-fact-course-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.side-fact-course-icon img {
  transform: translateY(-3px);
}

.game-shell > .game-music-dock .track-copy,
.start-shell > .music-dock .track-copy,
.character-shell > .music-dock .track-copy,
.loading-shell > .music-dock .track-copy {
  transform: translateY(3px);
}

.game-shell .right-rail .mentor-main > div {
  transform: translateY(0);
}

.game-shell .right-rail .mentor-main strong {
  font-size: clamp(1.16rem, 1.26vw, 1.34rem);
  line-height: 1.08;
}

.game-shell .right-rail .mentor-main p {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

/* Current request: mentor selection alignment and process mentor/task polish. */
.mentor-select-card {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

.mentor-select-card .mentor-select-head {
  grid-template-columns: 146px minmax(0, 1fr);
  min-height: 164px;
}

.mentor-select-card .mentor-select-avatar {
  width: 146px;
  height: 146px;
}

.mentor-select-copy p {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.mentor-select-task {
  align-self: stretch;
}

.mentor-select-task .character-trait-card {
  min-height: 156px;
  height: 100%;
  grid-template-columns: 112px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  padding-bottom: 12px;
}

.mentor-select-task .character-trait-card.is-skill .trait-icon {
  width: 112px;
  height: 112px;
}

.mentor-select-card > .pixel-button {
  align-self: end;
}

.game-shell .right-rail .mentor-main {
  align-items: center;
}

.game-shell .right-rail .mentor-main > div {
  transform: translateY(-10px);
}

.game-shell .right-rail .mentor-main p {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.game-shell .right-rail .mentor-task.has-icon {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
}

.game-shell .right-rail .mentor-task-icon {
  width: 72px;
  height: 72px;
  padding: 4px;
}

.game-shell .right-rail .mentor-task-icon img {
  width: 100%;
  height: 100%;
}

.game-shell .right-rail .mentor-task-copy {
  align-self: center;
}

.game-shell .right-rail .attribute-grid {
  gap: 10px;
}

/* Current request: softer event flow, muted support QR, mentor page sizing, achievement motion, and course typography. */
.modal-backdrop {
  animation: currentModalBackdropIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity;
}

.modal-card,
.modal-card.event-card,
.modal-card.random-event-card,
.modal-card.opening-fixed-card,
.modal-card.result-card {
  animation: currentModalCardIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity, transform;
}

.modal-backdrop.is-switching-in {
  animation: currentModalBackdropIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-backdrop.is-switching-in .modal-card {
  animation: currentModalCardIn 340ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-backdrop.is-switching-out,
.modal-backdrop.is-closing {
  animation: currentModalBackdropOut 320ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
  pointer-events: none;
}

.modal-backdrop.is-switching-out .modal-card,
.modal-backdrop.is-closing .modal-card {
  animation: currentModalCardOut 320ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

@keyframes currentModalBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes currentModalCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes currentModalBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes currentModalCardOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.995);
  }
}

.view-soft-enter,
.fixed-event-shell,
.opening-fixed-card {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  backface-visibility: hidden;
}

.support-qr-card img {
  filter: grayscale(0.28) saturate(0.82) brightness(0.97) contrast(0.96);
}

.mentor-select-card {
  grid-template-rows: minmax(250px, auto) minmax(0, auto) auto;
}

.mentor-select-card .mentor-select-head {
  grid-template-columns: 171px minmax(0, 1fr);
  min-height: 250px;
}

.mentor-select-card .mentor-select-avatar {
  width: 171px;
  height: 171px;
}

.mentor-select-copy h2 {
  font-size: clamp(1rem, 1.18vw, 1.5rem);
  line-height: 1.08;
}

.mentor-select-task {
  align-self: stretch;
}

.mentor-select-task .character-trait-card {
  min-height: 165px;
  grid-template-columns: 137px minmax(0, 1fr);
  align-items: start;
}

.mentor-select-task .character-trait-card.is-skill .trait-icon {
  width: 137px;
  height: 137px;
}

.game-shell .right-rail .course-card .course-head {
  margin-bottom: 4px;
}

.game-shell .right-rail .course-card .course-head > span,
.game-shell .right-rail .course-card .side-facts dt,
.game-shell .right-rail .course-card .side-facts dd,
.game-shell .right-rail .course-card .side-facts dd > span:not(.side-fact-course-icon),
.game-shell .right-rail .course-card .course-progress span,
.game-shell .right-rail .course-card .course-progress strong,
.game-shell .right-rail .course-card .course-entry-grid .system-button strong,
.game-shell .right-rail .course-card .course-entry-grid .system-button .entry-status,
.game-shell .right-rail .course-card .course-entry-grid .system-button em {
  font-size: max(10px, calc(1em - 3px));
}

.game-shell .right-rail .mentor-title {
  font-size: 0.9rem;
  line-height: 1.16;
}

.achievement-toast {
  animation: achievementToastSilky 3900ms linear forwards !important;
  position: absolute;
  top: calc(var(--achievement-toast-index, 0) * 104px);
  right: 0;
  width: min(var(--achievement-toast-width, 438px), calc(100vw - 24px));
  flex: 0 0 auto;
  min-height: 96px;
  aspect-ratio: auto;
  column-gap: 16px;
  clip-path: none !important;
  contain: layout paint;
  filter: none !important;
  transform: translate3d(32px, 0, 0) scale(0.985);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.achievement-toast em {
  color: oklch(0.68 0.18 252);
  font-size: 1.5rem;
}

.achievement-toast-copy {
  padding-inline-end: 50px;
}

.achievement-toast p {
  display: block;
  line-height: 1.38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.achievement-toast.toast-kind-ending {
  width: min(var(--ending-toast-width, 558px), calc(100vw - 24px));
}

.achievement-toast.toast-kind-ending strong {
  overflow: visible;
  text-overflow: clip;
}

.achievement-toasts {
  display: block;
  height: 1px;
}


@keyframes achievementToastSilky {
  0% {
    opacity: 0;
    transform: translate3d(28px, 0, 0) scale(0.992);
  }
  12% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  68% {
    opacity: 0.52;
    transform: translate3d(180px, 0, 0) scale(0.99);
  }
  74% {
    opacity: 0;
    transform: translate3d(calc(100% + 48px), 0, 0) scale(0.985);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(100% + 48px), 0, 0) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-toast {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Current request: card-pack character draw, no blue cover screen. */
.character-draw-shell {
  grid-template-rows: auto minmax(0, 1fr) minmax(104px, 120px);
  gap: clamp(2px, 0.7dvh, 8px);
  padding-top: clamp(10px, 1.35dvh, 16px);
}

.character-draw-shell .character-header {
  margin-bottom: 0;
}

.character-draw-stage {
  margin-top: clamp(-30px, -3dvh, -14px);
}

.character-draw-deck {
  height: clamp(660px, calc(100dvh - 246px), 790px);
  min-height: 640px;
  perspective: 1500px;
}

.character-draw-deck::before,
.character-draw-deck::after {
  inset: 18px 22px;
  border-color: color-mix(in oklch, var(--gold), var(--ink) 24%);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--panel), white 8%), color-mix(in oklch, var(--panel-soft), var(--gold) 10%));
  box-shadow: 0 14px 24px oklch(0 0 0 / 0.1);
}

.character-draw-deck::before {
  opacity: 0.62;
  transform: translate(14px, 14px) rotate(2.2deg);
}

.character-draw-deck::after {
  opacity: 0.44;
  transform: translate(-12px, 9px) rotate(-1.8deg);
}

.character-card-back {
  overflow: hidden;
  gap: 0;
  color: var(--ink);
  border: 3px solid color-mix(in oklch, var(--ink), var(--gold) 28%);
  background:
    linear-gradient(45deg, color-mix(in oklch, var(--gold), transparent 88%) 25%, transparent 25% 50%, color-mix(in oklch, var(--gold), transparent 88%) 50% 75%, transparent 75%) 0 0 / 18px 18px,
    radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--gold), white 38%) 0 24%, transparent 25%),
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 20%), color-mix(in oklch, var(--panel-soft), var(--gold) 14%));
  box-shadow:
    inset 0 0 0 8px color-mix(in oklch, var(--panel), var(--gold) 14%),
    inset 0 0 0 12px color-mix(in oklch, var(--ink), transparent 86%),
    0 20px 34px oklch(0 0 0 / 0.16);
  transform-origin: 50% 74%;
}

.character-card-back::before {
  width: min(300px, 56%);
  border-color: color-mix(in oklch, var(--ink), var(--gold) 18%);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in oklch, var(--ink), transparent 78%) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in oklch, var(--ink), transparent 78%) 48% 52%, transparent 52%),
    radial-gradient(circle, color-mix(in oklch, var(--gold), white 18%) 0 34%, transparent 35%);
  box-shadow:
    inset 0 0 0 10px color-mix(in oklch, var(--panel), white 20%),
    0 8px 0 color-mix(in oklch, var(--ink), transparent 88%);
}

.character-card-back::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid color-mix(in oklch, var(--ink), transparent 72%);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 0 10%, color-mix(in oklch, var(--ink), transparent 88%) 10% 11%, transparent 11% 89%, color-mix(in oklch, var(--ink), transparent 88%) 89% 90%, transparent 90%),
    linear-gradient(0deg, transparent 0 10%, color-mix(in oklch, var(--ink), transparent 88%) 10% 11%, transparent 11% 89%, color-mix(in oklch, var(--ink), transparent 88%) 89% 90%, transparent 90%);
  pointer-events: none;
}

.character-card-back strong {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding: 8px 14px;
  color: color-mix(in oklch, var(--ink), var(--gold) 12%);
  background: color-mix(in oklch, var(--panel), white 18%);
  border: 2px solid color-mix(in oklch, var(--ink), transparent 68%);
  border-radius: 4px;
  font-size: clamp(1.55rem, 2.3vw, 2.38rem);
  line-height: 1.1;
  box-shadow: 4px 4px 0 color-mix(in oklch, var(--ink), transparent 84%);
}

.character-card-back:hover {
  filter: brightness(1.02) saturate(1.02);
  transform: translateY(-5px) rotateZ(-0.5deg) scale(1.008);
}

.character-draw-shell.is-profile-draw-intro .character-draw-deck {
  animation: characterPackSettle 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.character-draw-shell.is-profile-draw-intro .character-card-back {
  animation: characterPackCardReady 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#character-card-reveal:checked ~ .character-draw-deck .character-card-back {
  opacity: 0;
  filter: blur(1px) saturate(0.86);
  transform: translate3d(0, -120px, 120px) rotateX(72deg) rotateZ(-5deg) scale(0.84);
  transition:
    opacity 150ms ease-in 180ms,
    transform 330ms cubic-bezier(0.5, 0, 0.75, 0),
    filter 170ms ease-in 160ms;
}

#character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
  display: grid;
  opacity: 1;
  transform-origin: 50% 72%;
  animation: characterPackDrawReveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes characterPackSettle {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, 18px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes characterPackCardReady {
  0% {
    opacity: 0;
    transform: translate3d(0, 78px, -120px) rotateX(22deg) scale(0.86);
  }

  62% {
    opacity: 1;
    transform: translate3d(0, -10px, 28px) rotateX(-5deg) scale(1.018);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
  }
}

@keyframes characterPackDrawReveal {
  0% {
    opacity: 0;
    filter: blur(3px) saturate(0.86);
    transform: translate3d(0, 92px, -80px) rotateX(-64deg) rotateZ(4deg) scale(0.82);
  }

  46% {
    opacity: 1;
    filter: blur(0.8px) saturate(1.04);
    transform: translate3d(0, -18px, 42px) rotateX(8deg) rotateZ(-1.5deg) scale(1.035);
  }

  74% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 4px, 6px) rotateX(-1deg) rotateZ(0.4deg) scale(0.996);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0) scale(1);
  }
}

/* Current request: restore course card typography and spacing to previous version. */
.game-shell .right-rail .course-card .course-head {
  margin-bottom: 0;
}

.game-shell .right-rail .course-card .course-head > span {
  font-size: inherit;
}

.game-shell .right-rail .course-card .side-facts dt,
.game-shell .right-rail .course-card .side-facts dd,
.game-shell .right-rail .course-card .side-facts dd > span:not(.side-fact-course-icon),
.game-shell .right-rail .course-card .course-progress span,
.game-shell .right-rail .course-card .course-progress strong {
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.18;
}

.game-shell .right-rail .course-card .course-entry-grid .system-button strong {
  font-size: clamp(0.86rem, 0.92vw, 1rem);
}

.game-shell .right-rail .course-card .course-entry-grid .system-button .entry-status,
.game-shell .right-rail .course-card .course-entry-grid .system-button em {
  font-size: clamp(0.72rem, 0.78vw, 0.84rem);
}


@media (prefers-reduced-motion: reduce) {
  .character-draw-shell.is-profile-draw-intro .character-draw-deck,
  .character-draw-shell.is-profile-draw-intro .character-card-back,
  #character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  #character-card-reveal:checked ~ .character-draw-deck .character-card-back {
    opacity: 0;
    transition: none !important;
    transform: none !important;
  }
}

/* Current request: pin mentor select button to card bottom and enlarge process mentor intro. */
.mentor-select-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.mentor-select-task {
  align-self: stretch;
}

.mentor-select-card > .pixel-button {
  align-self: end;
}

.game-shell .right-rail .mentor-main p {
  font-size: 0.86rem;
  line-height: 1.34;
}

/* Current request: enlarge competition status text and show task progress compactly. */
.competition-stat span {
  font-size: 0.94rem;
  font-weight: 900;
}

.competition-stat strong {
  font-size: 0.88rem;
  line-height: 1.22;
}

.game-shell .right-rail .mentor-main p,
.game-shell .right-rail .mentor-task span {
  white-space: pre-line;
}

/* Current request: competition submission panel interaction and readability pass. */
.competition-modal {
  width: min(1520px, calc(100vw - 12px));
  gap: 14px;
}

.competition-rule-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.competition-rule-strip span {
  min-height: 44px;
  font-size: 0.9rem;
}

.competition-mode-tabs {
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-start;
  margin-top: -2px;
}

.competition-mode-tab {
  min-width: 132px;
  min-height: 46px;
  padding: 8px 18px;
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 900;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.competition-mode-tab.is-active {
  color: var(--blue-dark);
  background: color-mix(in oklch, var(--panel), var(--blue) 12%);
  border-color: color-mix(in oklch, var(--line), var(--blue) 34%);
}

.competition-layout {
  grid-template-columns: 1fr;
}

.competition-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.competition-card {
  min-height: 196px;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 12px;
  padding: 14px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.competition-card:hover,
.competition-card:focus-visible,
.competition-card.is-selected {
  background: color-mix(in oklch, var(--panel-soft), var(--blue) 8%);
  border-color: color-mix(in oklch, var(--line), var(--blue) 42%);
}

.competition-card:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--blue), white 18%);
  outline-offset: 2px;
}

.competition-card:active {
  transform: none;
}

.competition-card-icon {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
}

.competition-card-top {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: start;
}

.competition-card-copy {
  min-width: 0;
  display: grid;
  gap: 0;
}

.competition-card-head strong {
  font-size: clamp(1.16rem, 1.22vw, 1.34rem);
  line-height: 1.14;
  white-space: normal;
}

.competition-card-head span {
  font-size: 0.84rem;
}

.competition-card p,
.competition-selected-copy p,
.competition-empty-record p {
  color: var(--muted);
  font-size: clamp(0.96rem, 0.98vw, 1.06rem);
  line-height: 1.5;
}

.competition-requirement-list {
  gap: 6px;
}

.competition-requirement-list i {
  padding: 4px 7px;
  font-size: 0.78rem;
  font-weight: 800;
}

.competition-selected-panel,
.competition-record-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  min-height: 184px;
  padding: 14px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 34%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.competition-work-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.competition-work {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.competition-work strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.competition-work span {
  color: var(--muted);
  font-size: 0.86rem;
}

.competition-work em {
  width: fit-content;
  color: var(--blue-dark);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .competition-card-grid,
  .competition-work-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Current request: larger mentor select icon and tighter stage-task box. */
.mentor-select-card .mentor-select-head {
  grid-template-columns: 186px minmax(0, 1fr);
  min-height: 230px;
}

.mentor-select-card .mentor-select-avatar {
  width: 186px;
  height: 186px;
}

.mentor-select-task {
  align-self: start;
}

.mentor-select-copy p,
.mentor-select-task .character-trait-copy span {
  white-space: pre-line;
}

.mentor-select-task .character-trait-card {
  height: auto;
  min-height: 0;
  padding-block: 10px;
}

/* Current request: HyperFrames-inspired character draw choreography. */
.character-draw-shell {
  --draw-cinematic-ease: cubic-bezier(0.18, 0.94, 0.18, 1);
  --draw-cinematic-snap: cubic-bezier(0.2, 1.25, 0.24, 1);
  grid-template-rows: auto minmax(0, 1fr) minmax(104px, 120px);
  gap: clamp(0px, 0.5dvh, 6px);
  padding-top: clamp(8px, 1.1dvh, 14px);
}

.character-draw-stage {
  margin-top: clamp(-38px, -4.2dvh, -18px);
}

.character-draw-deck {
  height: clamp(660px, calc(100dvh - 238px), 800px);
  min-height: 640px;
  perspective: 1800px;
  overflow: visible;
}

.character-draw-cinematic {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
  transform-style: preserve-3d;
}

.character-draw-cinematic::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid color-mix(in oklch, var(--gold), transparent 48%);
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.72);
}

.character-draw-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--gold), white 22% / 0.72), transparent 19%),
    radial-gradient(circle at 50% 52%, color-mix(in oklch, var(--panel), white 18% / 0.76), transparent 34%),
    linear-gradient(90deg, transparent 0 45%, color-mix(in oklch, var(--gold), transparent 34%) 49% 51%, transparent 55% 100%);
  mix-blend-mode: screen;
}

.draw-cinematic-ghost {
  position: absolute;
  z-index: 0;
  color: color-mix(in oklch, var(--ink), transparent 91%);
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.draw-ghost-left {
  left: -4%;
  top: 11%;
}

.draw-ghost-right {
  right: -4%;
  bottom: 10%;
}

.draw-cinematic-ring {
  position: absolute;
  width: min(500px, 70%);
  aspect-ratio: 1;
  border: 2px solid color-mix(in oklch, var(--gold), transparent 36%);
  border-radius: 999px;
  opacity: 0;
  box-shadow:
    inset 0 0 0 12px color-mix(in oklch, var(--panel), transparent 78%),
    0 0 44px color-mix(in oklch, var(--gold), transparent 58%);
  transform: scale(0.5) rotate(0deg);
}

.draw-cinematic-light {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 130%;
  opacity: 0;
  background: color-mix(in oklch, var(--gold), white 18%);
  box-shadow: 0 0 26px color-mix(in oklch, var(--gold), white 12%);
  transform: rotate(18deg) translateX(-340px);
}

.draw-light-b {
  width: 2px;
  transform: rotate(-22deg) translateX(300px);
}

.draw-cinematic-pack {
  position: absolute;
  z-index: 3;
  width: min(390px, 58%);
  aspect-ratio: 390 / 560;
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 3px solid color-mix(in oklch, var(--ink), var(--gold) 22%);
  border-radius: 8px;
  background:
    linear-gradient(45deg, color-mix(in oklch, var(--gold), transparent 86%) 25%, transparent 25% 50%, color-mix(in oklch, var(--gold), transparent 86%) 50% 75%, transparent 75%) 0 0 / 22px 22px,
    radial-gradient(circle at 50% 38%, color-mix(in oklch, var(--gold), white 40%) 0 25%, transparent 26%),
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 22%), color-mix(in oklch, var(--panel-soft), var(--gold) 14%));
  box-shadow:
    inset 0 0 0 9px color-mix(in oklch, var(--panel), var(--gold) 13%),
    inset 0 0 0 14px color-mix(in oklch, var(--ink), transparent 87%),
    0 28px 48px oklch(0 0 0 / 0.22);
  transform: translate3d(0, 120px, -180px) rotateX(28deg) scale(0.82);
  opacity: 0;
}

.draw-cinematic-pack i {
  width: 50%;
  aspect-ratio: 1;
  display: block;
  border: 2px solid color-mix(in oklch, var(--ink), var(--gold) 18%);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 47%, color-mix(in oklch, var(--ink), transparent 78%) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, color-mix(in oklch, var(--ink), transparent 78%) 48% 52%, transparent 53%),
    radial-gradient(circle, color-mix(in oklch, var(--gold), white 20%) 0 35%, transparent 36%);
}

.draw-cinematic-pack b {
  position: absolute;
  bottom: 16%;
  padding: 8px 14px;
  background: color-mix(in oklch, var(--panel), white 18%);
  border: 2px solid color-mix(in oklch, var(--ink), transparent 68%);
  border-radius: 4px;
  font-size: clamp(1.3rem, 1.8vw, 1.78rem);
  line-height: 1.1;
  box-shadow: 4px 4px 0 color-mix(in oklch, var(--ink), transparent 84%);
}

.draw-cinematic-card {
  position: absolute;
  z-index: 2;
  width: min(360px, 54%);
  aspect-ratio: 390 / 560;
  border: 2px solid color-mix(in oklch, var(--gold), var(--ink) 20%);
  border-radius: 8px;
  opacity: 0;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 26%), color-mix(in oklch, var(--panel-soft), var(--gold) 10%));
  box-shadow: 0 22px 38px oklch(0 0 0 / 0.16);
}

.draw-card-a {
  transform: translate3d(-95px, 64px, -70px) rotateZ(-12deg) scale(0.86);
}

.draw-card-b {
  transform: translate3d(92px, 72px, -88px) rotateZ(13deg) scale(0.84);
}

.draw-cinematic-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  background: color-mix(in oklch, var(--panel), white 42%);
  mix-blend-mode: screen;
}

.character-card-back {
  z-index: 5;
  transform-origin: 50% 72%;
}

.character-draw-shell.is-profile-draw-intro .character-draw-cinematic::before {
  animation: drawRingWake 1260ms var(--draw-cinematic-ease) both;
}

.character-draw-shell.is-profile-draw-intro .character-draw-cinematic::after {
  animation: drawCoreLight 1260ms var(--draw-cinematic-ease) both;
}

.character-draw-shell.is-profile-draw-intro .draw-cinematic-ghost {
  animation: drawGhostDrift 1260ms ease-out both;
}

.character-draw-shell.is-profile-draw-intro .draw-cinematic-ring {
  animation: drawRingSpin 1260ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.character-draw-shell.is-profile-draw-intro .draw-light-a {
  animation: drawLightSweepA 1260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.character-draw-shell.is-profile-draw-intro .draw-light-b {
  animation: drawLightSweepB 1260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.character-draw-shell.is-profile-draw-intro .draw-cinematic-pack {
  animation: drawPackSummon 1260ms var(--draw-cinematic-snap) both;
}

.character-draw-shell.is-profile-draw-intro .draw-card-a {
  animation: drawSideCardA 1260ms cubic-bezier(0.18, 0.94, 0.18, 1) both;
}

.character-draw-shell.is-profile-draw-intro .draw-card-b {
  animation: drawSideCardB 1260ms cubic-bezier(0.18, 0.94, 0.18, 1) both;
}

.character-draw-shell.is-profile-draw-intro .draw-cinematic-flash {
  animation: drawRevealFlash 1260ms ease-out both;
}

.character-draw-shell.is-profile-draw-intro .character-card-back {
  animation: drawHeroBack 1260ms var(--draw-cinematic-snap) both;
  pointer-events: none;
}

#character-card-reveal:checked ~ .character-draw-deck .character-draw-cinematic {
  opacity: 0;
  transition: opacity 220ms ease-out;
}

#character-card-reveal:checked ~ .character-draw-deck .character-card-back {
  opacity: 0;
  filter: blur(2px) saturate(0.8);
  transform: translate3d(0, -150px, 150px) rotateX(76deg) rotateZ(-5deg) scale(0.76);
  transition:
    opacity 190ms ease-in,
    transform 260ms cubic-bezier(0.5, 0, 0.75, 0),
    filter 180ms ease-in;
}

#character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
  display: grid;
  opacity: 1;
  transform-origin: 50% 68%;
  animation: drawFinalCardLand 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes drawRingWake {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }

  24% {
    opacity: 0.8;
    transform: scale(0.9);
  }

  78% {
    opacity: 0.58;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes drawCoreLight {
  0%,
  12% {
    opacity: 0;
    transform: scale(0.82);
  }

  44% {
    opacity: 0.72;
    transform: scale(1.02);
  }

  76% {
    opacity: 0.88;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes drawGhostDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  38% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
  }
}

@keyframes drawRingSpin {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-18deg);
  }

  22% {
    opacity: 0.86;
    transform: scale(0.82) rotate(10deg);
  }

  68% {
    opacity: 0.72;
    transform: scale(1.06) rotate(74deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.22) rotate(110deg);
  }
}

@keyframes drawLightSweepA {
  0%,
  18% {
    opacity: 0;
    transform: rotate(18deg) translateX(-360px);
  }

  40%,
  72% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: rotate(18deg) translateX(360px);
  }
}

@keyframes drawLightSweepB {
  0%,
  28% {
    opacity: 0;
    transform: rotate(-22deg) translateX(330px);
  }

  52%,
  78% {
    opacity: 0.62;
  }

  100% {
    opacity: 0;
    transform: rotate(-22deg) translateX(-330px);
  }
}

@keyframes drawPackSummon {
  0% {
    opacity: 0;
    transform: translate3d(0, 136px, -220px) rotateX(34deg) scale(0.78);
  }

  30% {
    opacity: 1;
    transform: translate3d(0, -12px, 56px) rotateX(-8deg) scale(1.04);
  }

  58% {
    opacity: 1;
    transform: translate3d(0, 0, 18px) rotateX(0deg) scale(1);
  }

  78% {
    opacity: 1;
    transform: translate3d(0, -18px, 62px) rotateX(12deg) scale(1.04);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -135px, 160px) rotateX(74deg) scale(0.7);
  }
}

@keyframes drawSideCardA {
  0%,
  22% {
    opacity: 0;
    transform: translate3d(-44px, 108px, -120px) rotateZ(-4deg) scale(0.72);
  }

  44%,
  72% {
    opacity: 0.82;
    transform: translate3d(-138px, 28px, -18px) rotateZ(-16deg) scale(0.9);
  }

  100% {
    opacity: 0;
    transform: translate3d(-184px, -58px, 22px) rotateZ(-23deg) scale(0.72);
  }
}

@keyframes drawSideCardB {
  0%,
  26% {
    opacity: 0;
    transform: translate3d(44px, 116px, -130px) rotateZ(5deg) scale(0.7);
  }

  48%,
  74% {
    opacity: 0.7;
    transform: translate3d(136px, 34px, -26px) rotateZ(17deg) scale(0.88);
  }

  100% {
    opacity: 0;
    transform: translate3d(182px, -48px, 16px) rotateZ(24deg) scale(0.72);
  }
}

@keyframes drawRevealFlash {
  0%,
  70% {
    opacity: 0;
  }

  82% {
    opacity: 0.76;
  }

  100% {
    opacity: 0;
  }
}

@keyframes drawHeroBack {
  0% {
    opacity: 0;
    transform: translate3d(0, 126px, -220px) rotateX(32deg) scale(0.78);
  }

  28% {
    opacity: 0;
    transform: translate3d(0, 42px, -60px) rotateX(15deg) scale(0.92);
  }

  42%,
  74% {
    opacity: 1;
    transform: translate3d(0, 0, 44px) rotateX(0deg) rotateZ(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -150px, 150px) rotateX(76deg) rotateZ(-5deg) scale(0.76);
  }
}

@keyframes drawFinalCardLand {
  0% {
    opacity: 0;
    filter: blur(6px) saturate(0.82);
    transform: translate3d(0, 88px, -120px) rotateX(-68deg) rotateZ(5deg) scale(0.74);
  }

  42% {
    opacity: 1;
    filter: blur(1px) saturate(1.08);
    transform: translate3d(0, -20px, 48px) rotateX(7deg) rotateZ(-1.5deg) scale(1.035);
  }

  72% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 4px, 6px) rotateX(-1deg) rotateZ(0.4deg) scale(0.996);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {
  .character-draw-cinematic,
  .character-draw-cinematic *,
  .character-draw-cinematic::before,
  .character-draw-cinematic::after,
  .character-draw-shell.is-profile-draw-intro .character-card-back,
  #character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  .character-draw-cinematic {
    opacity: 0;
  }
}

/* Current request: lower character draw card and refine the card back. */
.character-draw-stage {
  margin-top: clamp(18px, 2.6dvh, 34px);
}

.character-draw-deck {
  height: clamp(620px, calc(100dvh - 286px), 760px);
  min-height: 600px;
}

.character-card-back,
.draw-cinematic-pack {
  color: color-mix(in oklch, var(--ink), var(--gold) 8%);
  border: 2px solid color-mix(in oklch, var(--ink), var(--gold) 18%);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--ink), transparent 92%) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, color-mix(in oklch, var(--ink), transparent 92%) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 50% 38%, color-mix(in oklch, var(--gold), white 36%) 0 17%, transparent 18%),
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 24%), color-mix(in oklch, var(--panel-soft), var(--gold) 7%));
  box-shadow:
    inset 0 0 0 7px color-mix(in oklch, var(--panel), white 14%),
    inset 0 0 0 10px color-mix(in oklch, var(--gold), transparent 74%),
    0 22px 40px oklch(0 0 0 / 0.16);
}

.character-card-back::before,
.draw-cinematic-pack i {
  width: min(220px, 44%);
  border: 2px solid color-mix(in oklch, var(--ink), var(--gold) 10%);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in oklch, var(--ink), transparent 74%) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in oklch, var(--ink), transparent 74%) 48% 52%, transparent 52%),
    radial-gradient(circle, color-mix(in oklch, var(--gold), white 16%) 0 36%, transparent 37%),
    color-mix(in oklch, var(--panel), white 16%);
  box-shadow:
    inset 0 0 0 10px color-mix(in oklch, var(--panel), white 18%),
    inset 0 0 0 13px color-mix(in oklch, var(--ink), transparent 86%);
}

.character-card-back::after {
  inset: 22px;
  border: 1px solid color-mix(in oklch, var(--ink), transparent 64%);
  border-radius: 5px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--gold), transparent 46%) 0 12%, transparent 12% 88%, color-mix(in oklch, var(--gold), transparent 46%) 88% 100%) top / 100% 3px no-repeat,
    linear-gradient(90deg, color-mix(in oklch, var(--gold), transparent 46%) 0 12%, transparent 12% 88%, color-mix(in oklch, var(--gold), transparent 46%) 88% 100%) bottom / 100% 3px no-repeat,
    linear-gradient(0deg, color-mix(in oklch, var(--gold), transparent 46%) 0 12%, transparent 12% 88%, color-mix(in oklch, var(--gold), transparent 46%) 88% 100%) left / 3px 100% no-repeat,
    linear-gradient(0deg, color-mix(in oklch, var(--gold), transparent 46%) 0 12%, transparent 12% 88%, color-mix(in oklch, var(--gold), transparent 46%) 88% 100%) right / 3px 100% no-repeat;
}

.character-card-back strong,
.draw-cinematic-pack b {
  bottom: 14%;
  padding: 9px 16px;
  color: color-mix(in oklch, var(--ink), var(--gold) 6%);
  background: color-mix(in oklch, var(--panel), white 24%);
  border: 1px solid color-mix(in oklch, var(--ink), transparent 58%);
  border-radius: 5px;
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--panel), transparent 28%),
    3px 3px 0 color-mix(in oklch, var(--ink), transparent 86%);
}

.character-card-back strong {
  margin-top: 26px;
  font-size: clamp(1.42rem, 2.04vw, 2.04rem);
}

.draw-cinematic-pack b {
  font-size: clamp(1.2rem, 1.62vw, 1.58rem);
}

.character-draw-shell.is-profile-draw-intro .character-card-back,
.character-draw-shell.is-profile-draw-intro .draw-cinematic-pack {
  animation-duration: 1260ms;
}

#character-card-reveal:checked ~ .character-draw-deck .character-draw-card {
  animation: drawFinalCardLand 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes drawPackSummon {
  0% {
    opacity: 0;
    transform: translate3d(0, 96px, -160px) rotateX(24deg) scale(0.84);
  }

  34% {
    opacity: 1;
    transform: translate3d(0, -8px, 46px) rotateX(-5deg) scale(1.025);
  }

  66% {
    opacity: 1;
    transform: translate3d(0, 0, 16px) rotateX(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -112px, 132px) rotateX(68deg) scale(0.74);
  }
}

@keyframes drawHeroBack {
  0% {
    opacity: 0;
    transform: translate3d(0, 92px, -160px) rotateX(24deg) scale(0.84);
  }

  32%,
  68% {
    opacity: 1;
    transform: translate3d(0, 0, 38px) rotateX(0deg) rotateZ(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -118px, 132px) rotateX(70deg) rotateZ(-4deg) scale(0.76);
  }
}

@keyframes drawFinalCardLand {
  0% {
    opacity: 0;
    filter: blur(4px) saturate(0.88);
    transform: translate3d(0, 58px, -80px) rotateX(-54deg) rotateZ(3deg) scale(0.82);
  }

  48% {
    opacity: 1;
    filter: blur(0.6px) saturate(1.04);
    transform: translate3d(0, -12px, 34px) rotateX(5deg) rotateZ(-0.8deg) scale(1.022);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(1);
  }
}


/* Current request: nudge the character draw header and card lower. */
.character-draw-shell {
  padding-top: clamp(18px, 2.3dvh, 30px);
}

.character-draw-stage {
  margin-top: clamp(28px, 3.4dvh, 44px);
}


/* Current request: use selected generated card-back artwork. */
.character-card-back,
.draw-cinematic-pack {
  aspect-ratio: 1046 / 1504;
  color: transparent;
  background: url("./assets/characters/role-card-back.png") center / cover no-repeat;
  background-color: oklch(0.03 0 0);
  border: 1px solid oklch(0.72 0 0 / 0.56);
  box-shadow:
    0 26px 46px oklch(0 0 0 / 0.28),
    0 0 0 1px oklch(1 0 0 / 0.08);
  backface-visibility: hidden;
  contain: paint;
  overflow: hidden;
  will-change: transform, opacity, filter;
}

.character-card-back {
  width: min(430px, 70%);
  height: auto;
  margin: auto;
}

.draw-cinematic-pack {
  width: min(390px, 58%);
}

.character-card-back-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

.character-card-back::before,
.character-card-back::after,
.draw-cinematic-pack i {
  display: none;
}

.character-card-back strong,
.draw-cinematic-pack b {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  box-shadow: none;
}


/* Current request: persistent risk warning and full-page breathing. */
.game-shell {
  position: relative;
}

.game-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.game-shell .status-tile,
.game-shell .status-special-skill,
.game-shell .sidebar,
.game-shell .main-panel,
.game-shell .right-rail {
  position: relative;
  z-index: 3;
}

.game-shell .status-console {
  overflow: visible;
}

.game-shell .status-console > .status-money {
  z-index: 5;
  width: calc(100% + 56px);
}

.game-shell .status-money .status-copy,
.game-shell .status-money .status-copy strong {
  min-width: max-content;
  max-width: none;
}

.game-shell .log-hero {
  position: relative;
}

.game-shell .log-risk-slot {
  position: absolute;
  top: 51px;
  right: 12px;
  z-index: 5;
  width: clamp(330px, calc(36% + 50px), 470px);
  min-height: 67px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.game-shell .log-risk-slot:empty {
  display: none;
}

.game-shell .log-risk-slot .risk-banner {
  width: 100%;
  min-height: 65px;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 8px;
  padding: 6px 13px;
  background:
    linear-gradient(135deg, oklch(0.34 0.09 28 / 0.82), oklch(0.22 0.06 28 / 0.82));
  animation: riskBannerFadeIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: auto;
  font-size: clamp(0.82rem, 0.9vw, 0.96rem);
  line-height: 1.22;
  backface-visibility: hidden;
  will-change: opacity;
}

.game-shell .log-risk-slot.is-leaving {
  pointer-events: none;
}

.game-shell .log-risk-slot.is-leaving .risk-banner {
  animation: riskBannerFadeOut 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.game-shell .log-risk-slot.is-stable .risk-banner {
  animation: none;
}

.game-shell .log-risk-slot .risk-banner p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-shell .log-risk-slot .risk-banner-icon {
  width: 42px;
  height: 42px;
}

.game-shell .log-risk-slot .risk-banner-icon img {
  width: 100%;
  height: 100%;
}

.game-shell.risk-warning::after {
  background: color-mix(in oklch, var(--status-risk), transparent 88%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--status-risk), transparent 62%);
  animation: statusBreathWarning 4.8s ease-in-out infinite;
}

.game-shell.risk-critical::after {
  background: color-mix(in oklch, var(--status-risk), transparent 78%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--status-risk), transparent 42%),
    0 0 18px color-mix(in oklch, var(--status-risk), transparent 58%);
  animation: statusBreathCritical 2.8s ease-in-out infinite;
}

@media (max-width: 980px) {
  .game-shell .log-risk-slot {
    position: static;
    width: 100%;
    min-height: 0;
    margin: 10px 0 8px;
  }
}

@keyframes riskBannerFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes riskBannerFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-shell .log-risk-slot .risk-banner,
  .game-shell .log-risk-slot.is-leaving .risk-banner {
    animation: none;
  }
}

@keyframes statusBreathWarning {
  0%,
  100% {
    opacity: 0.08;
    filter: brightness(1);
  }

  50% {
    opacity: 0.32;
    filter: brightness(1.04);
  }
}

@keyframes statusBreathCritical {
  0%,
  100% {
    opacity: 0.16;
    filter: brightness(1);
  }

  50% {
    opacity: 0.5;
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-shell.risk-warning::after,
  .game-shell.risk-critical::after {
    animation: none;
    opacity: 0.16;
    filter: none;
  }
}

/* Restore hover motion and sheen after the static-hover pass. */
.game-shell .log-tabs {
  margin-top: 8px;
}

.game-shell .log-hero {
  box-sizing: border-box;
  padding-bottom: 20px;
  overflow: hidden;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.game-shell .log-hero .section-head h2 {
  font-size: clamp(1.22rem, 1.34vw, 1.46rem);
  line-height: 1.12;
}

.game-shell .log-hero .section-head > div:first-child {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.game-shell .log-hero .section-head h2 span,
.game-shell .log-hero .section-head p {
  font-size: clamp(0.94rem, 1vw, 1.08rem);
  line-height: 1.28;
}

.game-shell .log-calendar-line {
  margin-left: 0;
  text-align: left;
}

.game-shell .log-week-highlight {
  color: var(--danger);
  font-size: inherit;
  font-weight: 900;
}

.game-shell .log-tabs {
  margin-top: 18px;
}

.game-shell .log-tab {
  font-size: clamp(0.98rem, 1.04vw, 1.12rem);
}

.game-shell .log-panes {
  min-height: 0;
  margin-top: 12px;
  overflow: hidden;
}

.game-shell .log-list li {
  min-height: 46px;
}

.game-shell .log-list span,
.game-shell .log-list em {
  font-size: clamp(0.86rem, 0.9vw, 0.98rem);
}

.game-shell .log-list > li > span {
  font-size: clamp(0.78rem, 0.82vw, 0.9rem);
  font-weight: 700;
  line-height: 1.22;
}

.game-shell .log-list p {
  font-size: clamp(0.96rem, 1vw, 1.08rem);
  line-height: 1.32;
}

.game-shell .log-list li.is-settlement-log p {
  font-size: clamp(0.82rem, 0.88vw, 0.94rem);
  line-height: 1.28;
}

.game-shell .log-list li.is-settlement-log span,
.game-shell .log-list li.is-settlement-log em {
  font-size: clamp(0.78rem, 0.84vw, 0.9rem);
}

.game-shell .log-list > li > span,
.game-shell .log-list li.is-settlement-log > span {
  font-size: clamp(0.76rem, 0.8vw, 0.88rem);
  font-weight: 700;
  line-height: 1.22;
}

.game-shell .log-list > :is(li, li.is-settlement-log) > p {
  color: color-mix(in oklch, var(--ink), var(--muted) 18%);
  font-family: var(--font-pixel);
  font-size: clamp(0.86rem, 0.9vw, 0.98rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.game-shell .log-list > :is(li, li.is-settlement-log) > em {
  font-family: var(--font-pixel);
  font-size: clamp(0.78rem, 0.82vw, 0.9rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.project-select-option .project-requirement-note {
  align-self: end;
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(0.82rem, 0.86vw, 0.94rem);
  font-weight: 800;
  line-height: 1.35;
}

.start-entry-button:hover:not(:disabled),
.start-small-card:hover,
.start-toolbar-button:hover,
.start-achievement-tile:hover {
  filter: saturate(1.02) brightness(1.01);
  transform: translateY(-2px) scale(1.002);
}

.pixel-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.file-button:hover,
.action-button:hover:not(:disabled),
.system-button:hover:not(:disabled),
.settings-entry-button:hover:not(:disabled),
.modal-option:hover:not(:disabled),
.shop-category-tab:hover,
.rail-shortcut:hover:not(:disabled),
.corner-entry-button:hover:not(:disabled),
.settings-corner-button:hover:not(:disabled) {
  border-color: color-mix(in oklch, var(--line-strong), white 42%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white, transparent 64%),
    0 0 0 1px color-mix(in oklch, var(--line-strong), white 36%),
    0 0 24px color-mix(in oklch, var(--line-strong), transparent 56%);
  filter: saturate(1.03) brightness(1.02);
  transform: translateY(-2px) scale(1.002);
}

.start-entry-button:hover:not(:disabled)::after,
.start-small-card:hover::after,
.start-toolbar-button:hover::after,
.start-link-button:hover::after,
.start-achievement-tile:hover::after {
  animation: startButtonFlowSoft 1280ms cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
}

@media (prefers-reduced-motion: reduce) {
  .start-entry-button::after,
  .start-small-card::after,
  .start-toolbar-button::after,
  .start-link-button::after,
  .start-achievement-tile::after {
    display: none !important;
  }

  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover,
  .start-toolbar-button:hover,
  .start-achievement-tile:hover,
  .pixel-button:hover:not(:disabled),
  .mini-button:hover:not(:disabled),
  .file-button:hover,
  .action-button:hover:not(:disabled),
  .system-button:hover:not(:disabled),
  .settings-entry-button:hover:not(:disabled),
  .modal-option:hover:not(:disabled),
  .shop-category-tab:hover,
  .rail-shortcut:hover:not(:disabled),
  .corner-entry-button:hover:not(:disabled),
  .settings-corner-button:hover:not(:disabled) {
    filter: none;
    transform: none;
  }
}

/* Current request final override: course, year-start, and summer fixed-flow modal scale. */
.modal-course_result .kicker,
.modal-course_question .kicker,
.modal-year_start .kicker {
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  line-height: 1.2;
}

.modal-course_result .modal-copy h2,
.modal-course_question .modal-copy h2,
.modal-year_start .modal-copy h2,
.summer-card .modal-copy h2 {
  font-size: var(--modal-title-standard-size);
  line-height: 1.08;
}

.modal-course_result .modal-copy p,
.modal-course_question .modal-copy p,
.modal-year_start .modal-copy p {
  max-width: 78ch;
  font-size: clamp(1.08rem, 1.2vw, 1.26rem);
  line-height: 1.65;
}

.modal-course_question .modal-options {
  gap: 10px;
}

.modal-ielts_question .modal-options,
.modal-route_question .modal-options {
  gap: 10px;
}

.modal-course_question .modal-option {
  min-height: 64px;
  align-content: center;
  padding: 14px 16px;
}

.modal-ielts_question .modal-option,
.modal-route_question .modal-option {
  min-height: 64px;
  align-content: center;
  padding: 14px 16px;
}

.modal-course_question .modal-option > strong,
.modal-ielts_question .modal-option > strong,
.modal-route_question .modal-option > strong {
  font-size: clamp(1.08rem, 1.18vw, 1.26rem);
  line-height: 1.28;
}

.modal-year_start {
  width: min(980px, calc(100vw - 36px));
}

.modal-year_start .modal-copy {
  gap: 12px;
}

.summer-card {
  width: min(1240px, calc(100vw - 28px));
}

/* Current request: review result/report strategy readability and stable music visuals. */
.modal-mentor_task_result,
.modal-report_strategy,
.modal-report_feedback,
.modal-review_result {
  width: min(1080px, calc(100vw - 28px));
}

.modal-mentor_task_result .kicker,
.modal-review_result .kicker {
  font-size: clamp(1.08rem, 1.18vw, 1.22rem);
  line-height: 1.16;
}

.modal-mentor_task_result .modal-copy p,
.modal-mentor_task_result .settlement-delta,
.modal-mentor_task_result .settlement-delta .delta-chip,
.modal-mentor_task_result .settlement-delta .delta-chip span,
.modal-mentor_task_result .settlement-delta .delta-chip strong {
  font-size: clamp(1.1rem, 1.22vw, 1.3rem);
  line-height: 1.5;
}

.modal-mentor_task_result .modal-copy p {
  max-width: 80ch;
}

.modal-mentor_task_result .modal-option > strong,
.modal-year_start .modal-option > strong {
  font-size: clamp(1.12rem, 1.22vw, 1.32rem);
  line-height: 1.22;
}

.modal-report_strategy {
  width: min(1180px, calc(100vw - 28px));
}

.modal-report_strategy .modal-copy h2 {
  font-size: clamp(2rem, 3vw, 2.72rem);
  line-height: 1.08;
}

.modal-report_strategy .modal-options {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 12px;
}

.modal-report_strategy .report-strategy-option {
  min-height: 0;
  grid-template-columns: clamp(54px, 5vw, 72px) minmax(0, 1fr);
  align-content: start;
  gap: 10px 12px;
  padding: 16px;
}

.report-strategy-option .report-strategy-option-side-icon {
  grid-column: 1;
  grid-row: 1;
  width: clamp(50px, 4.6vw, 66px);
  height: clamp(50px, 4.6vw, 66px);
  align-self: center;
}

.report-strategy-option .report-strategy-option-side-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.report-strategy-option > strong,
.report-strategy-option > span:not(.report-strategy-option-side-icon),
.report-strategy-option > em,
.report-strategy-option > .delta-chips {
  grid-column: 1 / -1;
}

.report-strategy-option > strong {
  grid-column: 2;
  align-self: center;
}

.report-strategy-option > strong {
  color: oklch(0.48 0.18 252);
  font-size: clamp(1.28rem, 1.48vw, 1.58rem);
  line-height: 1.18;
}

.report-strategy-copy {
  display: grid;
  gap: 7px;
}

.report-strategy-line {
  display: grid;
  gap: 3px;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.48;
}

.report-strategy-line b {
  font-weight: 850;
  color: var(--ink);
}

.report-strategy-line span {
  color: var(--muted);
}

.report-strategy-beg_pass > strong {
  color: oklch(0.56 0.21 25);
}

.report-strategy-option > span:not(.report-strategy-option-side-icon) {
  white-space: pre-line;
  font-size: clamp(0.98rem, 1.08vw, 1.15rem);
  line-height: 1.48;
}

.modal-report_feedback .modal-copy h2 {
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  line-height: 1.16;
}

.modal-report_feedback .modal-title-icon {
  width: 56px;
  height: 56px;
}

.modal-report_feedback .settlement-delta,
.modal-report_feedback .settlement-delta .delta-chip,
.modal-report_feedback .settlement-delta .delta-chip span,
.modal-report_feedback .settlement-delta .delta-chip strong {
  font-size: clamp(1.12rem, 1.28vw, 1.36rem);
  line-height: 1.44;
}

.modal-report_feedback .modal-option > strong,
.modal-review_result .modal-option > strong {
  font-size: clamp(1.16rem, 1.32vw, 1.4rem);
  line-height: 1.2;
}

.modal-report_feedback .modal-copy p,
.modal-review_result .modal-copy p {
  max-width: 78ch;
  font-size: clamp(1.08rem, 1.18vw, 1.24rem);
  line-height: 1.68;
}

.modal-review_result .review-grade {
  color: oklch(0.48 0.18 252);
  font-weight: 900;
}

.modal-review_result .review-grade-label {
  color: oklch(0.48 0.18 252);
  font-weight: 900;
}

.modal-review_result .review-grade.is-low-grade,
.modal-review_result .review-grade-label.is-low-grade {
  color: oklch(0.56 0.21 25);
}

.modal-review_result .modal-copy h2 {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.64rem, 2.2vw, 2.2rem);
  line-height: 1.12;
}

.modal-review_result .modal-copy h2 > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


.summer-card .kicker {
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  line-height: 1.2;
}

.summer-card .modal-copy p {
  max-width: 86ch;
  font-size: clamp(1.04rem, 1.14vw, 1.22rem);
  line-height: 1.68;
}

.summer-card .modal-options {
  align-items: stretch;
  gap: 16px;
}

.summer-card .modal-option {
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0 0 14px;
}

.summer-card .modal-option-media {
  aspect-ratio: 16 / 9;
  min-height: clamp(280px, 23vw, 360px);
  margin: 0 0 4px;
  border-inline: 0;
  border-top: 0;
  border-radius: 0;
}

.summer-card .modal-option-media img {
  object-fit: contain;
  transform: none;
}

.summer-card .modal-option:hover:not(:disabled) .modal-option-media img {
  transform: none;
}

.summer-card .modal-option > strong {
  font-size: clamp(1.22rem, 1.36vw, 1.48rem);
  line-height: 1.2;
  padding-inline: 14px;
}

.summer-card .modal-option > span:not(.modal-option-media):not(.inline-delta-text) {
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.52;
  padding-inline: 14px;
}

.summer-card .modal-option-delta-text {
  width: 100%;
  align-self: end;
  justify-content: center;
  padding-inline: 14px;
}

.summer-card .modal-option-delta-text .inline-delta-item {
  min-height: 32px;
  align-items: center;
  padding: 5px 8px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 48%);
  border: 1px solid var(--line);
  border-radius: 5px;
}

/* Current request final override: achievement toast and competition submission tags. */
.achievement-toast strong span {
  color: oklch(0.86 0.17 86);
}

.competition-mode-tab {
  min-width: 144px;
  min-height: 50px;
  font-size: clamp(1.04rem, 1.08vw, 1.16rem);
}

.competition-card-head {
  gap: 7px;
}

.competition-card-head .competition-card-meta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.competition-card-head .competition-card-meta > span {
  width: fit-content;
  padding: 4px 8px;
  color: var(--blue-dark);
  font-size: clamp(0.92rem, 0.96vw, 1.02rem);
  font-weight: 900;
  line-height: 1.16;
  background: color-mix(in oklch, var(--panel), var(--blue) 9%);
  border: 1px solid color-mix(in oklch, var(--line), var(--blue) 22%);
  border-radius: 5px;
}

.competition-card-head .competition-card-meta > span + span {
  color: var(--ink);
  background: color-mix(in oklch, var(--panel-soft), oklch(0.86 0.17 86) 18%);
  border-color: color-mix(in oklch, var(--line), oklch(0.86 0.17 86) 38%);
}

/* Current request final override: competition cards as 2x2 icon-left rows. */
.competition-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.competition-card {
  min-height: 178px;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 16px;
  padding: 16px;
}

.competition-card-icon {
  width: 128px;
  height: 128px;
}

.competition-card-content {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.competition-card-copy {
  min-width: 0;
  display: block;
}


/* Current request final override: competition readability and smoother tab switching. */
.competition-summary-grid,
.competition-rule-strip,
.competition-layout {
  animation: competitionPanelSettle 340ms ease-out both;
}

.competition-mode-tab {
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.competition-mode-tab:hover {
  transform: translateY(-1px);
}

.competition-mode-tab.is-active {
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white, transparent 66%),
    0 8px 18px color-mix(in oklch, var(--blue), transparent 82%);
}

.competition-card-head strong {
  font-size: clamp(1.34rem, 1.46vw, 1.62rem);
  line-height: 1.1;
}

.competition-card-head .competition-card-meta > span {
  font-size: clamp(1.08rem, 1.12vw, 1.2rem);
}

.competition-card-head .competition-card-meta > span.is-available {
  color: var(--blue-dark);
  background: color-mix(in oklch, var(--panel), var(--blue) 16%);
  border-color: color-mix(in oklch, var(--line), var(--blue) 42%);
}

.competition-card-head .competition-card-meta > span.is-unavailable {
  color: var(--muted);
  background: color-mix(in oklch, var(--panel-soft), var(--line) 20%);
  border-color: color-mix(in oklch, var(--line), transparent 20%);
}

.competition-requirement-list i {
  padding: 5px 9px;
  font-size: clamp(0.92rem, 0.96vw, 1.02rem);
}

.competition-card {
  color: oklch(0.94 0.01 250);
  background: oklch(0.08 0.012 255);
  border-color: oklch(0.28 0.018 255);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 8px 18px rgb(0 0 0 / 0.16);
}

.competition-card:hover,
.competition-card:focus-visible,
.competition-card.is-selected {
  color: oklch(0.98 0.006 250);
  background: oklch(0.1 0.016 255);
  border-color: color-mix(in oklch, var(--gold), white 10%);
  box-shadow:
    inset 0 -3px 0 color-mix(in oklch, var(--gold), transparent 18%),
    inset 0 0 0 1px rgb(255 255 255 / 0.11),
    0 10px 22px rgb(0 0 0 / 0.22);
}

.competition-card-head .competition-card-meta > span,
.competition-card-head .competition-card-meta > span + span,
.competition-card-head .competition-card-meta > span.is-available,
.competition-card-head .competition-card-meta > span.is-unavailable,
.competition-requirement-list i {
  color: oklch(0.9 0.012 250);
  background: oklch(0.16 0.018 255);
  border-color: oklch(0.36 0.02 255);
}

.competition-card-head .competition-card-meta > span.is-danger {
  color: oklch(0.9 0.012 250);
  background: color-mix(in oklch, var(--panel-soft), var(--danger) 16%);
  border-color: color-mix(in oklch, var(--danger), var(--line) 24%);
}

.competition-copy p,
.competition-stat span,
.competition-rule-strip span,
.competition-selected-copy p,
.competition-empty-record p,
.competition-record span,
.competition-work span,
.competition-work em {
  font-size: clamp(1rem, 1.04vw, 1.12rem);
  line-height: 1.45;
}

.competition-stat strong,
.competition-record strong,
.competition-empty-record strong,
.competition-work strong,
.competition-selected-panel .section-head h3,
.competition-record-panel .section-head h3 {
  font-size: clamp(1.12rem, 1.18vw, 1.3rem);
  line-height: 1.18;
}

.competition-selected-panel .section-head span,
.competition-record-panel .section-head span {
  font-size: clamp(0.96rem, 1vw, 1.08rem);
}

.competition-work {
  gap: 7px;
  padding: 12px;
}

/* Current request final override: keep competition tab height stable. */
.competition-card-section {
  min-height: clamp(410px, 46vh, 560px);
  align-content: start;
}

.competition-card-content {
  gap: 22px;
  padding-top: 10px;
}

.competition-card-head {
  gap: 16px;
}

.competition-selected-view {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  gap: 16px;
  align-items: stretch;
  height: clamp(500px, 58vh, 680px);
  min-height: 0;
  overflow: hidden;
  animation: competitionDetailSettle 360ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

.competition-selected-left {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  align-self: stretch;
}

.competition-selected-card-slot {
  min-width: 0;
  width: 100%;
}

.competition-selected-card-slot .competition-card {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.competition-selected-intro {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  align-content: start;
  gap: 0;
  min-height: auto;
  padding: 20px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 38%);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.competition-selected-intro p {
  color: var(--muted);
  font-size: clamp(1.04rem, 1.1vw, 1.18rem);
  line-height: 1.62;
  white-space: pre-line;
}

.competition-selected-view .competition-selected-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  align-self: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  animation: competitionDetailSettle 420ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

.competition-selected-view .competition-selected-panel .section-head {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 18%);
}

.competition-selected-view .competition-work-list {
  grid-template-columns: 1fr;
  align-content: stretch;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.competition-selected-view .competition-work {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 14px;
}

.competition-selected-view .competition-work strong {
  grid-column: 1 / 2;
}

.competition-selected-view .competition-work span {
  grid-column: 1 / 2;
}

.competition-selected-view .competition-work em {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  justify-self: end;
}

.competition-selected-view .competition-empty-record {
  min-height: 100%;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 24px;
}

.competition-selected-view .competition-empty-record p {
  max-width: 32rem;
}

.competition-selected-view .competition-no-work-empty p {
  text-align: left;
}

.competition-record-panel .competition-record-count {
  justify-content: space-between;
}

.competition-selected-left .competition-record-panel {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.competition-selected-left .competition-record-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}

.competition-selected-left .competition-record {
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px;
}

.competition-selected-left .competition-record strong {
  font-size: clamp(0.92rem, 0.98vw, 1.06rem);
  line-height: 1.16;
}

.competition-selected-left .competition-record span,
.competition-selected-left .competition-record em {
  font-size: clamp(0.82rem, 0.88vw, 0.96rem);
  line-height: 1.22;
}

.competition-record-panel .competition-record-count span {
  color: var(--ink);
  font-size: clamp(1.92rem, 2vw, 2.16rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@keyframes competitionPanelSettle {
  from {
    opacity: 0.96;
    transform: scale(0.998);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes competitionDetailSettle {
  from {
    opacity: 0.94;
    transform: scale(0.992);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 980px) {
  .competition-selected-view {
    grid-template-columns: 1fr;
  }

  .competition-selected-view .competition-selected-panel {
    grid-column: auto;
  }
}

/* Current request final override: portfolio directory and board preview. */
.portfolio-modal {
  width: min(1460px, calc(100vw - 18px));
  gap: 14px;
}

.portfolio-copy p {
  max-width: 82ch;
  font-size: clamp(1.02rem, 1.08vw, 1.16rem);
  line-height: 1.58;
}

.portfolio-copy.has-top-action {
  position: relative;
  padding-right: 220px;
}

.portfolio-top-action {
  position: absolute;
  top: 0;
  right: 0;
  inline-size: 180px;
}

.portfolio-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.portfolio-stat {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 12px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 36%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.portfolio-stat span {
  color: var(--muted);
  font-size: clamp(0.92rem, 0.98vw, 1.04rem);
  font-weight: 900;
}

.portfolio-stat strong {
  color: var(--ink);
  font-size: clamp(1.08rem, 1.14vw, 1.24rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.portfolio-layout {
  min-height: clamp(520px, 58vh, 680px);
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: stretch;
}

.portfolio-directory,
.portfolio-board-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 34%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.portfolio-directory {
  grid-template-rows: auto minmax(0, 1fr);
}

.portfolio-work-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.portfolio-work-button {
  min-height: 64px;
  display: grid;
  gap: 6px;
  padding: 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.portfolio-work-button:hover,
.portfolio-work-button:focus-visible,
.portfolio-work-button.is-selected {
  background: color-mix(in oklch, var(--panel), var(--blue) 9%);
  border-color: color-mix(in oklch, var(--line), var(--blue) 36%);
  box-shadow: 0 8px 18px color-mix(in oklch, var(--blue), transparent 86%);
}

.portfolio-work-button:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--blue), white 18%);
  outline-offset: 2px;
}

.portfolio-work-button strong {
  font-size: clamp(1rem, 1.06vw, 1.14rem);
  line-height: 1.2;
}

.portfolio-work-button span {
  color: var(--muted);
  font-size: clamp(0.9rem, 0.96vw, 1.02rem);
  line-height: 1.32;
}

.portfolio-board-panel {
  grid-template-rows: minmax(0, 1fr);
}

.portfolio-board-figure,
.portfolio-board-empty,
.portfolio-empty {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.portfolio-board-figure {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100%;
}

.portfolio-board-figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.portfolio-board-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  color: var(--muted);
  font-size: clamp(0.94rem, 1vw, 1.08rem);
}

.portfolio-board-figure figcaption strong {
  color: var(--ink);
  font-size: clamp(1.08rem, 1.14vw, 1.24rem);
}

.portfolio-board-empty,
.portfolio-empty {
  min-height: 100%;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 24px;
  background: color-mix(in oklch, var(--panel), var(--panel-soft) 50%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.portfolio-board-empty strong,
.portfolio-empty strong {
  color: var(--ink);
  font-size: clamp(1.16rem, 1.22vw, 1.34rem);
}

.portfolio-board-empty p,
.portfolio-empty p {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.04vw, 1.12rem);
  line-height: 1.54;
}

@media (max-width: 980px) {
  .portfolio-summary-grid,
  .portfolio-layout {
    grid-template-columns: 1fr;
  }

  .portfolio-copy.has-top-action {
    padding-right: 0;
  }

  .portfolio-top-action {
    position: static;
    justify-self: end;
  }

  .portfolio-layout {
    min-height: 0;
  }

  .portfolio-board-figure img {
    min-height: 360px;
  }
}

/* Current request final override: personal resume record panel. */
.resume-modal {
  width: min(1160px, calc(100vw - 18px));
  gap: 14px;
}

.resume-hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.resume-hero-icon {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 30%);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--blue-dark), transparent 76%);
}

.resume-hero-icon img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  image-rendering: pixelated;
}

.resume-copy p {
  max-width: 82ch;
  font-size: 1rem;
  line-height: 1.58;
}

.resume-layout {
  min-height: clamp(360px, 45vh, 540px);
  display: grid;
  grid-template-columns: minmax(153px, 0.61fr) minmax(0, 1.39fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "profile portfolio"
    "profile ielts"
    "profile status";
  gap: 10px 14px;
  align-items: stretch;
}

.resume-profile-panel,
.resume-portfolio-panel,
.resume-status-card,
.resume-side-card,
.resume-attribute-panel {
  min-width: 0;
  display: grid;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 34%);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.resume-profile-panel {
  grid-area: profile;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.resume-profile-facts {
  display: grid;
  margin: 0;
}

.resume-profile-facts div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.resume-profile-facts dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.resume-profile-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.26;
  overflow-wrap: anywhere;
}

.resume-side-card {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-content: start;
  padding: 13px;
}

.resume-attribute-panel {
  align-content: start;
  gap: 10px;
  padding: 11px;
}

.resume-attribute-panel .section-head h3 {
  font-size: 1.24rem;
  line-height: 1.18;
}

.resume-attribute-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.resume-attribute-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.resume-attribute-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.resume-attribute-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

.resume-attribute-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.resume-attribute-copy span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.resume-attribute-copy strong {
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.08;
}

.resume-portfolio-panel {
  position: relative;
  overflow: hidden;
  grid-area: portfolio;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.56fr);
  gap: 16px;
  align-items: center;
  align-self: start;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 7%), color-mix(in oklch, var(--panel-soft), var(--gold) 8%));
  border-color: color-mix(in oklch, var(--gold), var(--line) 36%);
  box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--gold), transparent 72%);
}

.resume-portfolio-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.resume-portfolio-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.resume-portfolio-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}

.resume-portfolio-head span {
  display: block;
  transform: translateY(4px);
  margin-bottom: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.resume-portfolio-head {
  display: grid;
  gap: 4px;
  transform: translateY(6px);
}

.resume-portfolio-head h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-size: 1.24rem;
  line-height: 1.18;
}

.resume-card-primary {
  display: inline-block;
  margin: -7px 0 0 11px;
  color: var(--ink);
  font-size: clamp(1.72rem, 2.5vw, 2.55rem);
  font-weight: 900;
  line-height: 0.95;
}

.resume-portfolio-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 400px;
  min-height: 56px;
  border-color: color-mix(in oklch, var(--blue-dark), var(--line) 52%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white, transparent 78%),
    0 10px 22px oklch(0.18 0.04 250 / 0.08);
}

.resume-portfolio-button::before {
  content: "";
  position: absolute;
  inset: -46% auto -46% -66%;
  width: 58%;
  background:
    linear-gradient(104deg, transparent 0%, rgb(255 255 255 / 0.03) 18%, rgb(255 255 255 / 0.18) 44%, rgb(255 255 255 / 0.1) 62%, transparent 100%);
  filter: blur(14px);
  opacity: 0;
  transform: translateX(-18%) skewX(-16deg) scaleX(0.92);
  transition:
    opacity 760ms ease,
    transform 2400ms cubic-bezier(0.12, 0.86, 0.18, 1);
  pointer-events: none;
}

.resume-portfolio-button:hover,
.resume-portfolio-button:focus-visible {
  border-color: var(--gold);
  box-shadow:
    inset 0 -3px 0 color-mix(in oklch, var(--gold), var(--blue-dark) 12%),
    0 14px 28px oklch(0.18 0.04 250 / 0.13);
}

.resume-portfolio-button:hover::before,
.resume-portfolio-button:focus-visible::before {
  opacity: 0.82;
  transform: translateX(350%) skewX(-16deg) scaleX(1.16);
}

.resume-ielts-card {
  grid-area: ielts;
  min-height: 73px;
  align-content: center;
  align-self: start;
  padding-block: 4px;
}

.resume-status-grid {
  grid-area: status;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
  align-self: stretch;
}

.resume-status-card,
.resume-side-card {
  align-content: start;
  padding: 11px 13px 10px;
}

.resume-side-card.resume-ielts-card {
  grid-template-columns: 1fr;
  align-content: center;
  padding-block: 4px;
}

.resume-ielts-card .resume-status-media {
  grid-template-areas: "icon title";
  row-gap: 0;
}

.resume-status-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.resume-status-media {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "status status";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

.resume-status-media > .resume-status-icon {
  grid-area: icon;
}

.resume-status-copy {
  grid-area: title;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.resume-status-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}

.resume-status-copy .kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
}

.resume-status-copy strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  color: var(--ink);
  font-size: 1.24rem;
  font-weight: 900;
  line-height: 1.18;
}

.resume-inline-stat {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
}

.resume-status-media > em {
  grid-area: status;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.resume-experience-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.resume-experience-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 8px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.resume-experience-list article > b {
  width: 30px;
  min-height: 24px;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.resume-experience-list article > span {
  display: grid;
  gap: 3px;
}

.resume-experience-list strong,
.resume-experience-list span {
  min-width: 0;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.resume-experience-list strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.resume-experience-list span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.resume-return-button {
  justify-self: end;
  min-width: 104px;
  min-height: 44px;
}

@media (max-width: 980px) {
  .resume-layout {
    grid-template-areas:
      "profile"
      "portfolio"
      "ielts"
      "status";
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .resume-status-grid {
    grid-template-columns: 1fr;
  }
}


/* Current request final override: competition work selection and portfolio directory return. */
.competition-work-area {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
}

.competition-work {
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.competition-work:hover,
.competition-work:focus-visible,
.competition-work.is-selected {
  background: color-mix(in oklch, var(--panel), var(--blue) 9%);
  border-color: color-mix(in oklch, var(--line), var(--blue) 38%);
  box-shadow: 0 8px 18px color-mix(in oklch, var(--blue), transparent 86%);
}

.competition-work:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--blue), white 18%);
  outline-offset: 2px;
}

.portfolio-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-layout.is-directory-only {
  grid-template-columns: minmax(0, 1fr);
}

/* Current request final override: internship-open prompt button text. */
.modal-card.internship-open-prompt .modal-option,
.modal-card.internship-open-prompt .modal-option > strong,
.modal-card.internship-open-prompt .modal-option > span,
.modal-card.internship-open-prompt .modal-option > em {
  font-size: clamp(1.08rem, 1.14vw, 1.24rem);
}

/* Current request: ending/result UI polish, reminder scale, and calmer modal motion. */
.modal-backdrop {
  animation: currentModalBackdropIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-card,
.modal-card.event-card,
.modal-card.random-event-card,
.modal-card.opening-fixed-card,
.modal-card.result-card {
  animation: currentModalCardIn 440ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity, transform;
}

.modal-backdrop.is-switching-in {
  animation: currentModalBackdropIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.modal-backdrop.is-switching-out,
.modal-backdrop.is-closing {
  animation: currentModalBackdropOut 300ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
  pointer-events: none;
}

.modal-backdrop.is-switching-out .modal-card,
.modal-backdrop.is-closing .modal-card {
  animation: currentModalCardOut 300ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

@keyframes currentModalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes currentModalCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 3px, 0) scale(0.998);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes currentModalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes currentModalCardOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 3px, 0) scale(0.998);
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms !important;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  mix-blend-mode: normal;
}

.view-soft-enter {
  animation: viewSoftEnterSilky 360ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes viewSoftEnterSilky {
  from {
    opacity: 0.985;
    transform: translate3d(0, 3px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.modal-course_exam_intro .kicker,
.modal-course_exam_intro .modal-copy h2,
.modal-course_exam_intro .modal-copy p,
.modal-system_prompt.submission-reminder-prompt .kicker,
.modal-system_prompt.submission-reminder-prompt .modal-copy h2,
.modal-system_prompt.submission-reminder-prompt .modal-copy p {
  letter-spacing: 0;
}

.modal-course_exam_intro .kicker,
.modal-system_prompt.submission-reminder-prompt .kicker {
  color: var(--blue-dark);
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  line-height: 1.2;
}

.modal-course_exam_intro .modal-copy h2,
.modal-system_prompt.submission-reminder-prompt .modal-copy h2 {
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  line-height: 1.16;
}

.modal-course_exam_intro .modal-copy p,
.modal-system_prompt.submission-reminder-prompt .modal-copy p {
  max-width: 78ch;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  line-height: 1.68;
  text-wrap: pretty;
}

.modal-course_exam_intro .modal-option > strong,
.modal-system_prompt.submission-reminder-prompt .modal-option > strong {
  font-size: clamp(1.08rem, 1.16vw, 1.22rem);
  line-height: 1.28;
}

.modal-card.opening-fixed-card {
  width: min(980px, calc(100vw - 28px));
  gap: 14px;
}

.opening-fixed-card .modal-media img,
.modal-card.opening-fixed-military_training .modal-media img {
  max-height: clamp(280px, 42dvh, 440px);
}

.opening-fixed-card .modal-copy p,
.opening-fixed-card .modal-media figcaption {
  font-size: clamp(1.08rem, 1.24vw, 1.22rem);
  line-height: 1.68;
  text-wrap: pretty;
}

.opening-fixed-card .modal-copy h2 {
  font-size: clamp(1.92rem, 2.9vw, 2.72rem);
  line-height: 1.08;
}

.modal-mentor_task_result .modal-copy h2,
.modal-report_feedback .modal-copy h2,
.modal-review_result .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.modal-mentor_task_result .modal-title-icon,
.modal-report_feedback .modal-title-icon,
.modal-review_result .modal-title-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}

.modal-mentor_task_result .modal-title-icon img,
.modal-report_feedback .modal-title-icon img,
.modal-review_result .modal-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.modal-review_result .modal-copy h2 {
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  flex-wrap: wrap;
}

.modal-review_result .modal-copy h2 > span:last-child {
  overflow: visible;
  text-overflow: clip;
}

.modal-review_result .review-grade {
  flex: 0 0 auto;
}

.modal-review_result .modal-copy p br {
  display: block;
  content: "";
  margin-bottom: 8px;
}

.modal-report_strategy .report-strategy-option {
  grid-template-columns: clamp(68px, 5.8vw, 86px) minmax(0, 1fr);
  gap: 10px 14px;
  padding: 18px;
}

.report-strategy-option .report-strategy-option-side-icon {
  width: clamp(64px, 5.4vw, 80px);
  height: clamp(64px, 5.4vw, 80px);
  align-self: center;
}

.report-strategy-option > strong {
  font-size: clamp(1.42rem, 1.72vw, 1.86rem);
  line-height: 1.14;
}

.report-strategy-option > span:not(.report-strategy-option-side-icon),
.report-strategy-option > .report-strategy-copy,
.report-strategy-option > em,
.report-strategy-option > .delta-chips {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.report-strategy-copy {
  padding-left: 0;
  text-align: left;
}

.report-strategy-line {
  font-size: clamp(1.02rem, 1.12vw, 1.18rem);
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .view-soft-enter,
  .modal-backdrop,
  .modal-card,
  .modal-backdrop.is-switching-in,
  .modal-backdrop.is-switching-out,
  .modal-backdrop.is-switching-out .modal-card,
  .modal-backdrop.is-closing,
  .modal-backdrop.is-closing .modal-card {
    animation: none !important;
    transition: none !important;
  }
}


/* Current request final pass: gentler modal flow, cleaner line breaks, and fixed-flow layout. */
.modal-course_question,
.modal-course_exam_intro,
.modal-course_result,
.modal-report_strategy,
.modal-report_feedback,
.modal-review_result {
  animation: currentModalCardInSoft 560ms cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
}

.modal-backdrop {
  animation: currentModalBackdropInSoft 540ms cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
}

.modal-backdrop.is-switching-in {
  animation: currentModalBackdropInSoft 500ms cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
}

.modal-backdrop.is-switching-out,
.modal-backdrop.is-closing {
  animation: currentModalBackdropOutSoft 420ms cubic-bezier(0.32, 0, 0.2, 1) both !important;
}

.modal-backdrop.is-switching-out .modal-card,
.modal-backdrop.is-closing .modal-card {
  animation: currentModalCardOutSoft 420ms cubic-bezier(0.32, 0, 0.2, 1) both !important;
}

@keyframes currentModalBackdropInSoft {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes currentModalCardInSoft {
  from {
    opacity: 0;
    transform: translate3d(0, 1px, 0) scale(0.999);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes currentModalBackdropOutSoft {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes currentModalCardOutSoft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 1px, 0) scale(0.999);
  }
}

.modal-backdrop-course_question,
.modal-backdrop-route_question {
  animation: questionBackdropSettle 760ms cubic-bezier(0.22, 0.78, 0.24, 1) both !important;
}

.modal-course_question,
.modal-route_question {
  min-height: min(560px, calc(100dvh - 44px));
  align-content: center;
  animation: questionCardFadeIn 760ms cubic-bezier(0.22, 0.78, 0.24, 1) both !important;
}

.modal-course_question .modal-copy,
.modal-route_question .modal-copy,
.modal-course_question .modal-options,
.modal-route_question .modal-options {
  animation: questionContentDriftIn 840ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.modal-route_question .modal-copy {
  animation-delay: 40ms;
}

.modal-course_question .modal-options,
.modal-route_question .modal-options {
  animation-delay: 110ms;
}

@keyframes questionBackdropSettle {
  from { opacity: 0.94; }
  to { opacity: 1; }
}

@keyframes questionCardFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.996);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes questionContentDriftIn {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

::view-transition-old(root),
::view-transition-new(root),
.view-soft-enter {
  animation-duration: 520ms !important;
  animation-timing-function: cubic-bezier(0.2, 0.78, 0.24, 1) !important;
}

@keyframes viewSoftEnterSilky {
  from {
    opacity: 0.995;
    transform: translate3d(0, 1px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.modal-copy p {
  text-wrap: pretty;
}

.modal-system_prompt.portfolio-entry-prompt .kicker,
.modal-system_prompt.portfolio-entry-prompt .modal-copy h2,
.modal-system_prompt.portfolio-entry-prompt .modal-copy p {
  letter-spacing: 0;
}

.modal-system_prompt.portfolio-entry-prompt .modal-copy h2 {
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  line-height: 1.16;
}

.modal-system_prompt.portfolio-entry-prompt .modal-copy p {
  max-width: 78ch;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  line-height: 1.68;
}

.modal-system_prompt.portfolio-entry-prompt .modal-option > strong {
  font-size: clamp(1.08rem, 1.16vw, 1.22rem);
  line-height: 1.28;
}

.modal-review_result .modal-copy h2 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  flex-wrap: wrap;
}

.modal-review_result .modal-copy h2 > span:last-child {
  overflow: visible;
  text-overflow: clip;
}

.modal-review_result .review-grade {
  letter-spacing: 0;
}

.modal-report_strategy .report-strategy-option {
  grid-template-columns: clamp(74px, 6.2vw, 92px) minmax(0, 1fr);
  gap: 12px 16px;
}

.report-strategy-option .report-strategy-option-side-icon {
  width: clamp(70px, 5.8vw, 88px);
  height: clamp(70px, 5.8vw, 88px);
}

.report-strategy-option > strong {
  font-size: clamp(1.56rem, 1.95vw, 2.08rem);
  line-height: 1.12;
}

.report-strategy-copy {
  display: grid;
  gap: 8px;
}

.report-strategy-line {
  display: block;
  font-size: clamp(1.04rem, 1.16vw, 1.2rem);
  line-height: 1.58;
}

.report-strategy-line b {
  display: inline;
  margin-right: 0;
}

.summer-card .modal-option-media {
  aspect-ratio: auto;
  min-height: clamp(300px, 29vw, 430px);
  height: clamp(300px, 29vw, 430px);
  background: color-mix(in oklch, var(--panel-soft), white 8%);
}

.summer-card .modal-option-media img {
  object-fit: contain;
  transform: none;
}

.summer-card .modal-option:hover:not(:disabled) .modal-option-media img {
  transform: none;
}

@media (min-width: 861px) {
  .modal-card.opening-fixed-card {
    width: min(1120px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(380px, 1.08fr);
    grid-template-areas:
      "media copy"
      "media options";
    align-items: center;
    gap: clamp(18px, 2.2vw, 28px);
  }

  .opening-fixed-card .modal-media {
    grid-area: media;
    width: 100%;
    align-self: center;
  }

  .opening-fixed-card .modal-copy {
    grid-area: copy;
    align-self: end;
    max-width: none;
  }

  .opening-fixed-card .modal-options {
    grid-area: options;
    align-self: start;
  }

  .opening-fixed-card .modal-copy p {
    max-width: 56ch;
  }
}


/* Current request: opening fixed-flow image-led layout. */
.modal-card.opening-fixed-card {
  width: min(1040px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "copy"
    "options";
  gap: clamp(14px, 1.8vw, 22px);
}

.opening-fixed-card .modal-media {
  order: 1;
  grid-area: media;
  width: 100%;
  aspect-ratio: 16 / 8.4;
  max-height: clamp(340px, 48dvh, 540px);
}

.opening-fixed-card .modal-media img,
.modal-card.opening-fixed-military_training .modal-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.opening-fixed-card .modal-copy {
  order: 2;
  grid-area: copy;
  align-self: start;
  max-width: none;
}

.opening-fixed-card .modal-copy p {
  max-width: 76ch;
}

.opening-fixed-card .modal-options {
  order: 3;
  grid-area: options;
  align-self: start;
}


/* Current request hard lock: fixed-flow image must be above all text. */
.modal-card.opening-fixed-card,
.modal-card.opening-fixed-opening_ceremony,
.modal-card.opening-fixed-military_training,
.modal-card.opening-fixed-architecture_life_start {
  width: min(1240px, calc(100vw - 28px)) !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  align-items: stretch !important;
  gap: clamp(12px, 1.6vw, 18px) !important;
}

.opening-fixed-card .modal-media {
  order: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  align-self: stretch !important;
  margin: 0 !important;
  background: transparent !important;
}

.modal-card.opening-fixed-military_training .modal-media {
  aspect-ratio: 2048 / 1456 !important;
}

.opening-fixed-card .modal-media img,
.modal-card.opening-fixed-military_training .modal-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

.opening-fixed-card .modal-copy {
  order: 2 !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
}

.opening-fixed-card .modal-copy h2 {
  font-size: clamp(1.58rem, 2.25vw, 2.2rem) !important;
  line-height: 1.12 !important;
}

.opening-fixed-card .modal-copy p {
  width: 100% !important;
  max-width: none !important;
  font-size: clamp(0.96rem, 1.04vw, 1.1rem) !important;
  line-height: 1.58 !important;
}

.opening-fixed-card .modal-options {
  order: 3 !important;
  width: 100% !important;
  align-self: stretch !important;
}

.opening-fixed-card .modal-option {
  min-height: 50px !important;
  padding: 10px 12px !important;
}

.opening-fixed-card .modal-option strong {
  font-size: clamp(0.98rem, 1.06vw, 1.12rem) !important;
  line-height: 1.2 !important;
}


/* Current request: only the first two fixed-flow pages are slightly smaller. */
.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-military_training .modal-media {
  width: min(100%, 1120px) !important;
  align-self: center !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy h2,
.modal-card.opening-fixed-military_training .modal-copy h2 {
  font-size: clamp(1.46rem, 2.05vw, 2.02rem) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy p,
.modal-card.opening-fixed-military_training .modal-copy p {
  font-size: clamp(0.9rem, 0.98vw, 1.02rem) !important;
  line-height: 1.56 !important;
}

/* Current request: first two fixed-flow pages use a 90% image-led column. */
.modal-card.opening-fixed-opening_ceremony,
.modal-card.opening-fixed-military_training {
  width: min(1180px, calc(100vw - 28px)) !important;
  padding-inline: clamp(18px, 2.4vw, 30px) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options,
.modal-card.opening-fixed-military_training .modal-options {
  width: 90% !important;
  align-self: center !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-military_training .modal-copy {
  justify-items: start !important;
  text-align: left !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy h2,
.modal-card.opening-fixed-military_training .modal-copy h2,
.modal-card.opening-fixed-opening_ceremony .modal-copy p,
.modal-card.opening-fixed-military_training .modal-copy p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy h2,
.modal-card.opening-fixed-military_training .modal-copy h2 {
  font-size: clamp(1.42rem, 1.95vw, 1.92rem) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy p,
.modal-card.opening-fixed-military_training .modal-copy p {
  font-size: clamp(0.88rem, 0.96vw, 1rem) !important;
  line-height: 1.54 !important;
}


/* Current request: split opening ceremony and military training spacing. */
.modal-card.opening-fixed-opening_ceremony {
  padding-inline: clamp(8px, 1.1vw, 14px) !important;
}

.modal-card.opening-fixed-military_training {
  width: min(1160px, calc(100vw - 28px)) !important;
  padding-inline: clamp(8px, 1.2vw, 16px) !important;
}

.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-options {
  width: 90% !important;
  align-self: center !important;
}

.modal-card.opening-fixed-military_training .modal-copy {
  justify-items: start !important;
  text-align: left !important;
}

.modal-card.opening-fixed-military_training .modal-copy h2,
.modal-card.opening-fixed-military_training .modal-copy p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

/* Current request true final override: first two fixed-flow gutters. */
.modal-card.opening-fixed-opening_ceremony {
  padding-inline: clamp(14px, 1.25vw, 18px) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

.modal-card.opening-fixed-military_training {
  width: min(868px, calc(100vw - 28px)) !important;
  padding-inline: clamp(14px, 1.25vw, 18px) !important;
}

.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

/* Current request true final override: opening ceremony image/text column at 90%. */
.modal-card.opening-fixed-opening_ceremony {
  width: min(1050px, calc(100vw - 28px)) !important;
  padding-inline: clamp(14px, 1.25vw, 18px) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy {
  justify-items: start !important;
  text-align: left !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy h2,
.modal-card.opening-fixed-opening_ceremony .modal-copy p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

/* Current request: opening ceremony image/text column at 90%. */
.modal-card.opening-fixed-opening_ceremony {
  width: min(1160px, calc(100vw - 28px)) !important;
  padding-inline: clamp(12px, 1.1vw, 16px) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: 90% !important;
  align-self: center !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy {
  justify-items: start !important;
  text-align: left !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy h2,
.modal-card.opening-fixed-opening_ceremony .modal-copy p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

/* Current request final override: first two fixed-flow gutters. */
.modal-card.opening-fixed-opening_ceremony {
  padding-inline: 2px !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

.modal-card.opening-fixed-military_training {
  width: min(868px, calc(100vw - 28px)) !important;
  padding-inline: 2px !important;
}

.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

/* Current request: match side gutters to the small top gutter. */
.modal-card.opening-fixed-opening_ceremony {
  padding-inline: 2px !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

.modal-card.opening-fixed-military_training {
  width: min(868px, calc(100vw - 28px)) !important;
  padding-inline: 2px !important;
}

.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

.modal-card.opening-fixed-military_training .modal-copy p {
  font-size: clamp(0.88rem, 0.95vw, 0.98rem) !important;
  line-height: 1.52 !important;
}

/* Current request: minimal side padding for the first two fixed-flow cards. */
.modal-card.opening-fixed-opening_ceremony {
  padding-inline: clamp(4px, 0.45vw, 6px) !important;
}

.modal-card.opening-fixed-military_training {
  width: min(1160px, calc(100vw - 28px)) !important;
  padding-inline: clamp(4px, 0.7vw, 8px) !important;
}

.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-options {
  width: 90% !important;
  align-self: center !important;
}

.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-copy h2,
.modal-card.opening-fixed-military_training .modal-copy p {
  text-align: left !important;
}

/* Current request: reduce side gutter against images on first two fixed-flow cards. */
.modal-card.opening-fixed-opening_ceremony {
  padding-inline: 4px !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: calc(100% - 8px) !important;
  align-self: center !important;
}

.modal-card.opening-fixed-military_training {
  width: min(880px, calc(100vw - 28px)) !important;
  padding-inline: 4px !important;
}

.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-options {
  width: calc(100% - 8px) !important;
  align-self: center !important;
}

.modal-card.opening-fixed-military_training .modal-copy {
  justify-items: start !important;
  text-align: left !important;
}

.modal-card.opening-fixed-military_training .modal-copy h2,
.modal-card.opening-fixed-military_training .modal-copy p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

/* Current request true final override: side gutters match the image top gutter. */
.modal-card.opening-fixed-opening_ceremony {
  padding-inline: clamp(14px, 1.25vw, 18px) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

.modal-card.opening-fixed-military_training {
  width: min(868px, calc(100vw - 28px)) !important;
  padding-inline: clamp(14px, 1.25vw, 18px) !important;
}

.modal-card.opening-fixed-military_training .modal-media,
.modal-card.opening-fixed-military_training .modal-copy,
.modal-card.opening-fixed-military_training .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

/* Current request true final override: opening ceremony image/text column at 90%. */
.modal-card.opening-fixed-opening_ceremony {
  width: min(1050px, calc(100vw - 28px)) !important;
  padding-inline: clamp(14px, 1.25vw, 18px) !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-media,
.modal-card.opening-fixed-opening_ceremony .modal-copy,
.modal-card.opening-fixed-opening_ceremony .modal-options {
  width: 100% !important;
  align-self: stretch !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy {
  justify-items: start !important;
  text-align: left !important;
}

.modal-card.opening-fixed-opening_ceremony .modal-copy h2,
.modal-card.opening-fixed-opening_ceremony .modal-copy p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

/* Current request: remove the start-screen vertical transition band between UI and scene art. */
.modal-card.opening-fixed-opening_ceremony {
  width: min(1000px, calc(100vw - 28px)) !important;
}

.modal-card.opening-fixed-military_training {
  width: min(830px, calc(100vw - 28px)) !important;
}

.modal-card.opening-fixed-opening_ceremony,
.modal-card.opening-fixed-military_training {
  position: relative !important;
  top: -8pt !important;
}

.start-shell::after,
:root[data-theme="dark"] .start-shell::after {
  display: none !important;
}

.start-scene-art::after,
:root[data-theme="dark"] .start-scene-art::after {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--start-paper-solid), transparent 52%) 0%,
      transparent 14%,
      transparent 86%,
      color-mix(in oklch, var(--start-paper-solid), transparent 52%) 100%
    ) !important;
}

/* Current request: internship/work entry, special skill confirmation, and value feedback. */
.special-skill-confirm-modal {
  position: relative;
  width: min(620px, calc(100vw - 28px));
  gap: 18px;
}

.special-skill-confirm-layout {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.special-skill-confirm-icon {
  width: 86px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 10px;
  background: color-mix(in oklch, var(--panel-soft), white 10%);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--blue-dark), transparent 78%);
}

.special-skill-confirm-icon img,
.special-skill-close img,
.internship-job-icon img,
.internship-job-detail-icon img,
.internship-record-icon img,
.internship-submit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.special-skill-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}

.special-skill-confirm-button {
  min-height: 52px;
  justify-content: center;
}

.special-skill-meter-feedback {
  position: relative;
  --skill-impact-color: var(--blue-dark);
  --skill-impact-soft: color-mix(in oklch, var(--skill-impact-color), transparent 86%);
  --skill-change-peak: 0.58;
  animation: special-skill-meter-pulse 1080ms ease-out var(--skill-feedback-delay, 0ms) both;
}

.special-skill-meter-feedback::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 2;
  border: 1px solid color-mix(in oklch, var(--skill-impact-color), transparent 72%);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  animation: special-skill-soft-frame 920ms ease-out var(--skill-feedback-delay, 0ms) both;
}

.special-skill-meter-feedback.is-skill-positive {
  --skill-impact-color: oklch(0.68 0.19 252);
  --skill-change-peak: 0.62;
}

.special-skill-meter-feedback.is-skill-negative {
  --skill-impact-color: oklch(0.64 0.22 25);
  --skill-change-peak: 0.72;
}

.special-skill-number-host {
  position: relative;
  --skill-impact-color: oklch(0.56 0.1 252 / 0.8);
}

.special-skill-number-host.is-skill-positive {
  --skill-impact-color: oklch(0.56 0.1 252 / 0.8);
}

.special-skill-number-host.is-skill-negative {
  --skill-impact-color: oklch(0.52 0.12 25 / 0.82);
}

.special-skill-number-feedback {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  padding: 4px 8px;
  color: color-mix(in oklch, white, var(--skill-impact-color) 10%);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  background: color-mix(in oklch, var(--skill-impact-color), var(--panel) 42%);
  border: 1px solid color-mix(in oklch, var(--skill-impact-color), var(--line) 36%);
  border-radius: 6px;
  box-shadow: 0 0 10px color-mix(in oklch, var(--skill-impact-color), transparent 74%);
  pointer-events: none;
  transform: translate3d(0, 4px, 0);
  will-change: opacity, transform;
  animation: special-skill-number-feedback 1120ms cubic-bezier(0.2, 0.86, 0.18, 1) var(--skill-feedback-delay, 0ms) both;
}

.special-skill-inline-number-host {
  --skill-impact-color: oklch(0.56 0.1 252 / 0.78);
}

.special-skill-inline-number-host.is-skill-positive {
  --skill-impact-color: oklch(0.56 0.1 252 / 0.78);
}

.special-skill-inline-number-host.is-skill-negative {
  --skill-impact-color: oklch(0.52 0.12 25 / 0.8);
}

.special-skill-inline-number-feedback {
  display: inline-grid;
  min-inline-size: 4ch;
  color: color-mix(in oklch, var(--ink), var(--skill-impact-color) 20%);
  font-variant-numeric: tabular-nums;
}

.special-skill-inline-number-feedback > span {
  grid-area: 1 / 1;
  will-change: opacity, filter;
}

.special-skill-inline-old {
  animation: special-skill-inline-old 940ms ease-out var(--skill-feedback-delay, 0ms) both;
}

.special-skill-inline-new {
  animation: special-skill-inline-new 940ms ease-out var(--skill-feedback-delay, 0ms) both;
}

.special-skill-meter-feedback .meter-track {
  position: relative;
  overflow: hidden;
  contain: paint;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--skill-impact-color), transparent 86%);
}

.special-skill-meter-feedback .meter-track::after {
  content: "";
  position: absolute;
  inset: -45% -20%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 32%, color-mix(in oklch, white, var(--skill-impact-color) 18%) 50%, transparent 68% 100%);
  transform: translateX(-70%) skewX(-16deg);
  animation: special-skill-track-sweep 1080ms ease-out var(--skill-feedback-delay, 0ms) both;
}

.special-skill-bar-feedback {
  position: relative;
  z-index: 1;
  transition-property: inline-size !important;
  transition-duration: 1180ms !important;
  transition-timing-function: cubic-bezier(0.2, 0.86, 0.18, 1) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: inline-size;
}

.special-skill-old-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  z-index: 3;
  width: 1px;
  background: color-mix(in oklch, var(--ink), var(--panel) 48%);
  opacity: 0;
  animation: special-skill-old-mark 1040ms ease-out var(--skill-feedback-delay, 0ms) both;
}

.special-skill-change-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--skill-impact-color), transparent 66%),
      color-mix(in oklch, var(--skill-impact-color), white 10%),
      color-mix(in oklch, var(--skill-impact-color), transparent 66%)
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--skill-impact-color), transparent 44%),
    0 0 12px color-mix(in oklch, var(--skill-impact-color), transparent 66%);
  filter: saturate(1.18);
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity;
  pointer-events: none;
  animation: special-skill-change-segment 1080ms ease-out var(--skill-feedback-delay, 0ms) both;
}

.special-skill-transient-bars {
  position: absolute;
  inset-inline: 10px;
  bottom: 8px;
  z-index: 4;
  display: grid;
  gap: 5px;
  pointer-events: none;
}

.special-skill-transient-bars.is-rule-bars {
  right: clamp(12px, 1.2vw, 18px);
  bottom: 10px;
  left: auto;
  width: min(310px, calc(100% - 24px));
}

.special-skill-transient-bar {
  --skill-impact-color: var(--blue-dark);
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(76px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel), white 7%);
  border: 1px solid color-mix(in oklch, var(--blue-dark), transparent 24%);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: none;
  animation: special-skill-rule-bar 1040ms ease-out both;
}

.special-skill-transient-bar > span {
  white-space: nowrap;
}

.special-skill-transient-bar.is-skill-positive {
  --skill-impact-color: var(--blue);
}

.special-skill-transient-bar.is-skill-negative {
  --skill-impact-color: var(--danger);
}

.special-skill-transient-pressure .meter-track span,
.special-skill-transient-progress .meter-track span,
.special-skill-transient-quality .meter-track span {
  background: var(--skill-impact-color);
}

@keyframes special-skill-meter-pulse {
  0% {
    filter: none;
    box-shadow: none;
  }
  18%,
  72% {
    filter: saturate(1.08) brightness(1.02);
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--skill-impact-color), transparent 78%),
      0 0 calc(6px + 6px * var(--skill-impact, 0.4)) var(--skill-impact-soft);
  }
  100% {
    filter: none;
    box-shadow: none;
  }
}

@keyframes special-skill-soft-frame {
  0% {
    opacity: 0;
  }
  18%,
  68% {
    opacity: calc(0.12 + 0.1 * var(--skill-impact, 0.4));
  }
  100% {
    opacity: 0;
  }
}

@keyframes special-skill-track-sweep {
  0% {
    opacity: 0;
    transform: translateX(-70%) skewX(-16deg);
  }
  18%,
  64% {
    opacity: calc(0.12 + 0.12 * var(--skill-impact, 0.4));
  }
  100% {
    opacity: 0;
    transform: translateX(70%) skewX(-16deg);
  }
}

@keyframes special-skill-old-mark {
  0% {
    opacity: 0;
  }
  16%,
  78% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
  }
}

@keyframes special-skill-change-segment {
  0% {
    opacity: 0;
  }
  18%,
  76% {
    opacity: var(--skill-change-peak, 0.58);
  }
  100% {
    opacity: 0;
  }
}

@keyframes special-skill-number-feedback {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  16%,
  70% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes special-skill-inline-old {
  0%,
  32% {
    opacity: 1;
    filter: none;
  }
  58%,
  100% {
    opacity: 0;
    filter: blur(2px);
  }
}

@keyframes special-skill-inline-new {
  0%,
  42% {
    opacity: 0;
    filter: blur(2px);
  }
  72%,
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes special-skill-rule-bar {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  24%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2px);
  }
}

.internship-work-modal {
  width: min(940px, calc(100vw - 28px));
  gap: 14px;
}

.internship-work-modal.has-job-detail {
  width: min(1120px, calc(100vw - 28px));
}

.internship-work-copy {
  max-width: 780px;
}

.internship-work-lock-copy {
  max-width: 760px;
  color: var(--ink);
}

.internship-work-lock-copy .is-nowrap {
  white-space: nowrap;
}

.internship-work-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.internship-work-tab {
  min-height: 46px;
  padding: 9px 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.internship-work-tab.is-active {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--blue-dark);
  box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--blue-dark), transparent 25%);
}

.internship-work-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.internship-work-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.internship-work-stage.has-detail {
  grid-template-columns: minmax(0, 0.78fr) minmax(380px, 0.86fr);
  align-items: start;
}

.internship-work-stage.has-detail.is-internship,
.internship-work-stage.has-detail.is-work {
  align-items: stretch;
}

.internship-job-directory {
  display: grid;
  gap: 12px;
  align-content: start;
}

.internship-work-stage.has-detail.is-internship .internship-job-directory {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.internship-work-stage.has-detail.is-internship .internship-record-panel {
  align-self: stretch;
}

.internship-work-stage.has-detail.is-work .internship-job-directory {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.internship-work-stage.has-detail.is-work .work-reflection-panel {
  align-self: stretch;
}

.internship-job-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.internship-job-card {
  min-height: 148px;
  display: grid;
  grid-template-rows: 96px minmax(0, auto);
  place-items: center;
  gap: 12px;
  padding: 12px 10px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel), var(--panel-soft) 50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.internship-job-card:hover,
.internship-job-card.is-selected {
  border-color: var(--blue-dark);
  background: var(--panel);
}

.internship-job-card:active {
  transform: scale(0.985);
}

.internship-job-card.is-locked {
  opacity: 0.48;
  filter: grayscale(0.92);
  cursor: not-allowed;
}

.internship-job-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  padding: 7px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.internship-job-card strong {
  font-size: clamp(1.1rem, 1.12vw, 1.26rem);
  line-height: 1.18;
  text-align: center;
}

.internship-job-tier,
.internship-detail-tier,
.internship-detail-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  color: var(--blue-dark);
  background: color-mix(in oklch, var(--blue), transparent 84%);
  border: 1px solid color-mix(in oklch, var(--blue-dark), transparent 58%);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.internship-detail-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 6px;
}

.internship-detail-value {
  color: var(--ink);
  background: color-mix(in oklch, var(--panel-soft), var(--blue) 12%);
  border-color: color-mix(in oklch, var(--line), var(--blue-dark) 18%);
}

.internship-job-tier {
  justify-self: center;
}

.internship-work-stage.has-detail .internship-job-card {
  min-height: 126px;
  grid-template-rows: 74px minmax(0, auto);
  gap: 8px;
  padding: 10px 8px;
}

.internship-work-stage.has-detail .internship-job-icon {
  width: 74px;
  height: 74px;
  padding: 6px;
}

.internship-work-stage.has-detail .internship-job-card strong {
  font-size: clamp(0.92rem, 0.96vw, 1.08rem);
  line-height: 1.16;
}

.internship-work-stage.has-detail .internship-job-tier {
  display: none;
}

.work-reflection-panel {
  padding: 18px 20px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel), var(--panel-soft) 38%);
  border: 1px solid color-mix(in oklch, var(--line), var(--blue-dark) 18%);
  border-radius: 8px;
  box-shadow: 0 10px 22px oklch(0.2 0.04 250 / 0.08);
}

.work-reflection-panel p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.02vw, 1.14rem);
  font-weight: 700;
  line-height: 1.62;
  white-space: pre-line;
}

.internship-record-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  background: color-mix(in oklch, var(--panel), var(--blue) 4%);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--blue-dark), transparent 86%);
}

.internship-record-head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.internship-record-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.internship-record-panel h3 {
  margin: 0;
  font-size: clamp(1.48rem, 1.48vw, 1.72rem);
  line-height: 1.2;
}

.internship-record-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.internship-record-title-row strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 8px;
  transform: translateY(10pt);
  color: var(--blue-dark);
  background: color-mix(in oklch, var(--blue), transparent 84%);
  border: 1px solid color-mix(in oklch, var(--blue-dark), transparent 58%);
  border-radius: 6px;
  font-size: clamp(0.94rem, 0.96vw, 1.08rem);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.internship-record-list {
  display: grid;
  gap: 8px;
}

.internship-record-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel-soft), transparent 10%);
  border: 1px solid color-mix(in oklch, var(--line), transparent 16%);
  border-radius: 6px;
  font-size: clamp(0.88rem, 0.9vw, 1rem);
  font-weight: 900;
  line-height: 1.35;
}

.internship-record-list article b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--blue-dark);
  background: color-mix(in oklch, var(--blue), transparent 84%);
  border: 1px solid color-mix(in oklch, var(--blue-dark), transparent 60%);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
}

.internship-record-list article.is-active {
  grid-template-columns: minmax(0, 1fr) auto;
}

.internship-record-list article.is-active b {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.internship-record-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.48;
}

.internship-record-empty {
  font-size: clamp(1.08rem, 1.08vw, 1.24rem) !important;
  font-weight: 900;
  color: var(--ink) !important;
}

.internship-record-advice {
  margin-top: auto !important;
  transform: translateY(-8px);
  color: var(--danger) !important;
}

.internship-job-detail {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: color-mix(in oklch, var(--panel), var(--panel-soft) 42%);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.internship-job-detail-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.internship-job-detail-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.internship-job-detail.is-internship-detail .internship-job-detail-head {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
}

.internship-job-detail.is-internship-detail .internship-job-detail-icon {
  width: 82px;
  height: 82px;
  padding: 7px;
}

.internship-job-detail h3 {
  margin: 0;
  font-size: clamp(1.08rem, 1.18vw, 1.32rem);
  line-height: 1.2;
}

.internship-job-detail p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.06vw, 1.18rem);
  line-height: 1.62;
  white-space: pre-line;
}

.internship-job-requirements {
  display: grid;
  gap: 8px;
}

.internship-job-requirements > strong {
  font-size: clamp(1.08rem, 1.08vw, 1.2rem);
  line-height: 1.25;
}

.internship-job-requirements .route-requirements i {
  font-size: clamp(0.92rem, 0.94vw, 1.04rem);
  line-height: 1.34;
}

.internship-job-reward {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklch, var(--line), var(--good) 30%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--panel-soft), var(--good) 8%);
}

.internship-job-reward > strong {
  font-size: clamp(1.08rem, 1.08vw, 1.2rem);
  line-height: 1.25;
}

.internship-job-reward > span {
  color: var(--ink);
  font-size: clamp(0.92rem, 0.94vw, 1.04rem);
  font-weight: 800;
  line-height: 1.45;
}

.internship-submit-button {
  min-height: 50px;
  grid-template-columns: 28px max-content;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-inline: 14px 18px;
}

.internship-submit-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
}

.internship-submit-text {
  display: inline-block;
  line-height: 1.2;
  white-space: nowrap;
}

.internship-submit-reason {
  color: var(--danger);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
}

.internship-eligibility-button.is-disabled {
  grid-template-columns: max-content;
  color: var(--muted);
  background: var(--panel-soft);
  border-color: var(--line);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--line), transparent 40%);
  cursor: not-allowed;
  opacity: 0.72;
}

.internship-submit-status {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}

.internship-submit-status.is-ready {
  color: var(--blue-dark);
  background: color-mix(in oklch, var(--blue), var(--panel) 84%);
}

.internship-submit-status.is-disabled {
  color: var(--muted);
  background: var(--panel-soft);
}

/* Current request: title icons, compact course bars, and selected modal sizing. */
.modal-year_start .modal-copy h2,
.modal-course_result .modal-copy h2,
.modal-course_question .modal-copy h2,
.modal-course_exam_intro .modal-copy h2,
.modal-choice_result .modal-copy h2,
.modal-system_prompt.internship-open-prompt .modal-copy h2,
.modal-system_prompt.portfolio-entry-prompt .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.modal-year_start .modal-title-icon,
.modal-course_result .modal-title-icon,
.modal-course_question .modal-title-icon,
.modal-course_exam_intro .modal-title-icon,
.modal-choice_result .modal-title-icon,
.modal-system_prompt.internship-open-prompt .modal-title-icon,
.modal-system_prompt.portfolio-entry-prompt .modal-title-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}

.modal-system_prompt.submission-reminder-prompt {
  width: min(820px, calc(100vw - 20px));
}

.game-shell .log-hero .section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.game-shell .log-title-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
}

.game-shell .log-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.game-shell .right-rail .course-progress > div {
  grid-template-columns: 98px minmax(42px, 1fr) 64px;
  padding-right: 2px;
}

.game-shell .right-rail .course-progress strong {
  justify-self: end;
  white-space: nowrap;
}

.game-shell .right-rail .course-progress .course-progress-label b {
  white-space: nowrap;
}

.summer-card .modal-option-media {
  aspect-ratio: 16 / 9;
  min-height: clamp(340px, 31vw, 460px);
  height: auto;
  margin-inline: -2px;
}

.summer-card .modal-option-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-icon {
  width: 112px;
}

.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-layout {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 30px;
}

.special-skill-confirm-modal.is-born-lucky-skill .modal-copy p {
  font-size: clamp(1.1rem, 1.2vw, 1.28rem);
  line-height: 1.62;
}

.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-button {
  font-size: clamp(1.16rem, 1.28vw, 1.38rem);
}

@media (max-width: 980px) {
  .special-skill-confirm-layout,
  .internship-work-stage.has-detail,
  .internship-work-facts,
  .internship-job-detail-head {
    grid-template-columns: 1fr;
  }

  .internship-job-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .special-skill-confirm-icon,
  .internship-job-detail-icon {
    width: 72px;
  }

  .special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-icon {
    width: 96px;
  }
}

/* Current request: skill and year-start modal readability tweaks. */
.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-layout {
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 30px;
}

.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-icon {
  width: 108px;
}

.special-skill-confirm-modal.is-parent-rescue-skill .modal-copy h2,
.special-skill-confirm-modal.is-born-lucky-skill .modal-copy h2 {
  padding-inline-start: 4px;
}

.special-skill-confirm-modal.is-parent-rescue-skill .modal-copy p,
.special-skill-confirm-modal.is-born-lucky-skill .modal-copy p {
  padding-inline-start: 4px;
  line-height: 1.6;
}

.special-skill-confirm-modal.is-parent-rescue-skill .modal-copy p {
  font-size: clamp(1.1rem, 1.2vw, 1.28rem);
}

.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-button {
  font-size: clamp(1.1rem, 1.18vw, 1.3rem);
}

.modal-year_start .modal-title-icon {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

.modal-year_start .modal-copy p {
  max-width: 86ch;
}

.special-skill-confirm-modal.is-born-lucky-skill .modal-copy {
  padding-inline-start: 4px;
}

.summer-card .modal-option-media {
  margin-inline: 0;
  border-inline: 0;
  border-top: 0;
  border-radius: 0;
}

.summer-card .modal-option-media img {
  object-fit: contain;
  transform: none;
}

.summer-card .modal-option:hover:not(:disabled) .modal-option-media img {
  transform: none;
}

/* Current request: award/result copy, summer sketch media, and unified skill sizing. */
.modal-choice_result.competition-result-prompt .modal-copy h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.28rem);
  line-height: 1.14;
}

.modal-choice_result.competition-result-prompt .modal-title-icon {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

.modal-choice_result.competition-result-prompt .modal-copy p,
.modal-report_feedback .modal-copy p,
.modal-system_prompt.submission-reminder-prompt .modal-copy p {
  font-size: clamp(1.05rem, 1.14vw, 1.2rem);
  line-height: 1.68;
}

.modal-choice_result.competition-result-prompt .competition-prize-amount {
  color: oklch(0.86 0.17 88);
  font-weight: 800;
}

.modal-year_start {
  width: min(840px, calc(100vw - 28px));
}

.modal-year_start .modal-copy h2 {
  font-size: clamp(1.82rem, 2.35vw, 2.32rem);
  line-height: 1.14;
}

.modal-year_start .modal-copy p {
  font-size: clamp(1.04rem, 1.12vw, 1.18rem);
  line-height: 1.72;
}

.modal-year_start .year-five-career-line {
  white-space: nowrap;
}

.summer-card {
  width: min(1080px, calc(100vw - 28px));
}

.summer-card .modal-options {
  gap: 16px;
}

.summer-card .modal-option {
  padding: 0 0 14px;
  gap: 10px;
}

.summer-card .modal-option-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  height: auto;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.summer-card .modal-option-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.summer-card .modal-option > strong,
.summer-card .modal-option > span:not(.modal-option-media):not(.modal-delta):not(.inline-delta-text),
.summer-card .modal-option > .inline-delta-text,
.summer-card .modal-option > .delta-chips {
  margin-inline: 14px;
}

.summer-card .modal-option > strong {
  font-size: clamp(1.08rem, 1.18vw, 1.24rem);
  line-height: 1.32;
}

.summer-card .modal-option > span:not(.modal-option-media):not(.modal-delta):not(.inline-delta-text) {
  font-size: clamp(0.94rem, 1.02vw, 1.05rem);
  line-height: 1.62;
}

.special-skill-confirm-modal,
.special-skill-confirm-modal.is-born-lucky-skill,
.special-skill-confirm-modal.is-parent-rescue-skill {
  width: min(660px, calc(100vw - 28px));
}

.special-skill-confirm-layout,
.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-layout,
.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-layout {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 30px;
}

.special-skill-confirm-icon,
.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-icon,
.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-icon {
  width: 112px;
}

.special-skill-confirm-modal .modal-copy h2,
.special-skill-confirm-modal.is-parent-rescue-skill .modal-copy h2,
.special-skill-confirm-modal.is-born-lucky-skill .modal-copy h2 {
  padding-inline-start: 4px;
  font-size: clamp(1.72rem, 2.1vw, 2.08rem);
  line-height: 1.14;
}

.special-skill-confirm-modal .modal-copy p,
.special-skill-confirm-modal.is-parent-rescue-skill .modal-copy p,
.special-skill-confirm-modal.is-born-lucky-skill .modal-copy p {
  padding-inline-start: 4px;
  font-size: clamp(1.1rem, 1.2vw, 1.28rem);
  line-height: 1.6;
}

.special-skill-confirm-button,
.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-button,
.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-button {
  font-size: clamp(1.16rem, 1.28vw, 1.38rem);
  line-height: 1.2;
}

/* Current request: align adjusted modal title weight with random event titles. */
.modal-choice_result.competition-result-prompt .modal-copy h2,
.modal-system_prompt.portfolio-entry-prompt .modal-copy h2,
.modal-system_prompt.submission-reminder-prompt .modal-copy h2,
.modal-system_prompt.graduation-design-reminder-prompt .modal-copy h2,
.modal-route_exam_intro .modal-copy h2,
.modal-route_exam_result .modal-copy h2,
.modal-report_feedback .modal-copy h2,
.modal-year_start .modal-copy h2,
.summer-card .modal-copy h2,
.special-skill-confirm-modal .modal-copy h2 {
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.16;
}

.modal-choice_result.competition-result-prompt .modal-copy p,
.modal-system_prompt.portfolio-entry-prompt .modal-copy p,
.modal-system_prompt.submission-reminder-prompt .modal-copy p,
.modal-system_prompt.graduation-design-reminder-prompt .modal-copy p,
.modal-route_exam_intro .modal-copy p,
.modal-route_exam_result .modal-copy p,
.modal-report_feedback .modal-copy p,
.modal-year_start .modal-copy p,
.summer-card .modal-copy p,
.summer-card .modal-option > span:not(.modal-option-media):not(.modal-delta):not(.inline-delta-text),
.special-skill-confirm-modal .modal-copy p {
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  font-weight: 400;
  line-height: 1.68;
}

@media (max-width: 980px) {
  .special-skill-confirm-layout,
  .special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-layout,
  .special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-layout {
    grid-template-columns: 1fr;
  }

  .special-skill-confirm-icon,
  .special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-icon,
  .special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-icon {
    width: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .special-skill-meter-feedback,
  .special-skill-meter-feedback::before,
  .special-skill-meter-feedback .meter-track::after,
  .special-skill-change-segment,
  .special-skill-number-feedback,
  .special-skill-inline-old,
  .special-skill-inline-new,
  .special-skill-transient-bar {
    animation-duration: 190ms !important;
    transform: none !important;
  }

  .special-skill-meter-feedback::before,
  .special-skill-meter-feedback .meter-track::after,
  .special-skill-old-mark,
  .special-skill-change-segment {
    display: none !important;
  }

  .special-skill-bar-feedback {
    transition-duration: 190ms !important;
  }

  .internship-job-card,
  .internship-work-tab {
    transition: none !important;
  }
}

/* Current request: start page glass controls and softer left-side scene. */
.start-scene-art img {
  filter: saturate(1.02) contrast(1.02);
}

:root[data-theme="dark"] .start-scene-art img {
  opacity: 1;
  filter: saturate(1.08) contrast(1.26) brightness(1.03);
}

.start-scene-art::after,
:root[data-theme="dark"] .start-scene-art::after {
  inset: 0 auto 0 0 !important;
  inline-size: calc(var(--figma-left-fade) - 16px);
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--start-paper-solid), transparent 8%) 0%,
      color-mix(in oklch, var(--start-paper-solid), transparent 20%) 30%,
      color-mix(in oklch, var(--start-paper-solid), transparent 54%) 62%,
      color-mix(in oklch, var(--start-paper-solid), transparent 86%) 88%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--start-paper-solid), transparent 58%) 0%,
      transparent 16%,
      transparent 86%,
      color-mix(in oklch, var(--start-paper-solid), transparent 58%) 100%
    ) !important;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgb(0 0 0 / 0.42) 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgb(0 0 0 / 0.42) 90%, transparent 100%);
}

:root[data-theme="dark"] .start-scene-art::after {
  background:
    linear-gradient(
      90deg,
      oklch(0.12 0.018 252 / 0.62) 0%,
      oklch(0.12 0.018 252 / 0.52) 30%,
      oklch(0.12 0.018 252 / 0.28) 62%,
      oklch(0.12 0.018 252 / 0.08) 88%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      oklch(0.12 0.018 252 / 0.38) 0%,
      transparent 17%,
      transparent 86%,
      oklch(0.12 0.018 252 / 0.42) 100%
    ) !important;
}

.start-shell {
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.7), oklch(0.9 0 0 / 0.58));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0 / 0.82), oklch(0.94 0 0 / 0.68));
}

:root[data-theme="dark"] .start-shell {
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.72), oklch(0.13 0 0 / 0.62));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.3 0 0 / 0.82), oklch(0.18 0 0 / 0.72));
}

.start-shell .start-entry-button.is-primary {
  --start-button-bg: linear-gradient(145deg, oklch(0.08 0 0 / 0.78), oklch(0.02 0 0 / 0.7));
  --start-button-bg-hover: linear-gradient(145deg, oklch(0.18 0 0 / 0.86), oklch(0.04 0 0 / 0.76));
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62));
}

.start-shell .start-small-card[data-id="author"] {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.58), oklch(0.9 0 0 / 0.46));
}

:root[data-theme="dark"] .start-shell .start-small-card[data-id="author"] {
  background:
    linear-gradient(180deg, oklch(0.24 0 0 / 0.6), oklch(0.13 0 0 / 0.5));
}

.start-shell .start-small-card.is-warm {
  --start-button-bg: linear-gradient(145deg, oklch(0.16 0 0 / 0.76), oklch(0.05 0 0 / 0.68));
  --start-button-bg-hover: linear-gradient(145deg, oklch(0.24 0 0 / 0.84), oklch(0.08 0 0 / 0.74));
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62));
}

.start-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover,
  .start-toolbar-button:hover,
  .start-achievement-tile:hover
) {
  background:
    linear-gradient(180deg, oklch(0.995 0.01 86 / 0.78), oklch(0.91 0.025 84 / 0.68));
}

:root[data-theme="dark"] .start-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover,
  .start-toolbar-button:hover,
  .start-achievement-tile:hover
) {
  background:
    linear-gradient(180deg, oklch(0.24 0.035 252 / 0.72), oklch(0.14 0.028 252 / 0.64));
}

.start-shell .start-entry-button.is-primary:hover:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18) !important;
}

.start-shell .start-small-card.is-warm:hover {
  color: oklch(0.99 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.66 0.17 16 / 0.36), transparent 34%),
    linear-gradient(135deg, oklch(0.47 0.13 14 / 0.62), oklch(0.36 0.19 18 / 0.78) 28%, oklch(0.25 0.23 22 / 0.88) 52%, oklch(0.16 0.24 27 / 0.92) 76%, oklch(0.08 0.26 31 / 0.96)) !important;
  border-color: oklch(0.72 0.18 24 / 0.82) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.2),
    inset 0 0 20px oklch(0.74 0.18 24 / 0.1),
    0 13px 28px oklch(0.34 0.12 24 / 0.16),
    0 0 12px oklch(0.64 0.2 24 / 0.1) !important;
  transform: translateY(-1px) scale(1.002) !important;
  -webkit-backdrop-filter: blur(19px) saturate(1.2) !important;
  backdrop-filter: blur(19px) saturate(1.2) !important;
}

:root[data-theme="dark"] .start-shell .start-small-card.is-warm:hover {
  background:
    radial-gradient(circle at 18% 12%, oklch(0.56 0.18 16 / 0.38), transparent 36%),
    linear-gradient(135deg, oklch(0.34 0.13 14 / 0.66), oklch(0.24 0.19 18 / 0.82) 30%, oklch(0.16 0.22 22 / 0.9) 54%, oklch(0.1 0.22 27 / 0.94) 76%, oklch(0.05 0.25 31 / 0.98)) !important;
}

/* Current request: special-skill confirm button and launcher title tuning. */
.special-skill-confirm-button,
.special-skill-confirm-button:is(:hover, :focus-visible, :active) {
  color: oklch(0.58 0.2 27) !important;
}

.game-shell .status-special-skill .action-icon {
  width: 48px !important;
  height: 48px !important;
}

.game-shell .status-special-skill .action-icon img {
  width: 110% !important;
  height: 110% !important;
}

.special-skill-confirm-layout,
.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-layout,
.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-layout {
  grid-template-columns: 124px minmax(0, 1fr);
}

.special-skill-confirm-icon,
.special-skill-confirm-modal.is-born-lucky-skill .special-skill-confirm-icon,
.special-skill-confirm-modal.is-parent-rescue-skill .special-skill-confirm-icon {
  width: 124px;
}

.start-title-panel .title-stack {
  transform: scaleX(0.972);
  margin-left: calc(-6px - 4pt);
}

.title-stack h1 .title-primary {
  font-size: clamp(4.7rem, 5.86vw, 6.46rem) !important;
  transform: scaleX(0.982);
  transform-origin: left top;
}

.title-stack h1 .title-secondary {
  margin-left: 6pt;
}

html.is-theme-switching,
html.is-theme-switching body,
html.is-theme-switching #app,
html.is-theme-switching .start-shell,
html.is-theme-switching .game-shell,
html.is-theme-switching .modal-backdrop,
html.is-theme-switching .modal-card,
html.is-theme-switching .loading-panel,
html.is-theme-switching .hero-copy,
html.is-theme-switching .start-panel,
html.is-theme-switching .character-card,
html.is-theme-switching .profile-card,
html.is-theme-switching .course-card,
html.is-theme-switching .record-panel,
html.is-theme-switching .mentor-card,
html.is-theme-switching .rail-shortcut,
html.is-theme-switching .action-section,
html.is-theme-switching .music-dock,
html.is-theme-switching .right-entry-panel,
html.is-theme-switching .settings-panel,
html.is-theme-switching .status-console,
html.is-theme-switching .status-board,
html.is-theme-switching .log-hero,
html.is-theme-switching .system-panel,
html.is-theme-switching .start-entry-button,
html.is-theme-switching .start-small-card,
html.is-theme-switching .start-toolbar-button,
html.is-theme-switching .start-achievement-tile,
html.is-theme-switching .pixel-button,
html.is-theme-switching .mini-button,
html.is-theme-switching .system-button,
html.is-theme-switching .settings-entry-button,
html.is-theme-switching .modal-option {
  transition:
    color 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html.is-theme-switching .start-scene-art img {
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-scene-art .start-scene-img {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0 !important;
  transform: translateZ(0);
  transition:
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root:not([data-theme="dark"]) .start-scene-art .start-scene-img.is-light {
  opacity: 1 !important;
  filter: saturate(1.02) contrast(1.02);
}

:root[data-theme="dark"] .start-scene-art .start-scene-img.is-dark {
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.26) brightness(1.03);
}

:root:not([data-theme="dark"]) .start-scene-art .start-scene-img.is-dark,
:root[data-theme="dark"] .start-scene-art .start-scene-img.is-light {
  opacity: 0 !important;
}

html.is-theme-switching .start-scene-art .start-scene-img {
  will-change: opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
  html.is-theme-switching,
  html.is-theme-switching *,
  html.is-theme-switching *::before,
  html.is-theme-switching *::after {
    transition-duration: 1ms !important;
  }
}

/* Final font sync: adjusted modal pages match ordinary random event dialog typography. */
.modal-choice_result.competition-result-prompt .modal-copy h2,
.modal-system_prompt.portfolio-entry-prompt .modal-copy h2,
.modal-system_prompt.submission-reminder-prompt .modal-copy h2,
.modal-report_feedback .modal-copy h2,
.modal-year_start .modal-copy h2,
.summer-card .modal-copy h2,
.special-skill-confirm-modal .modal-copy h2 {
  font-family: var(--font-pixel) !important;
  font-size: clamp(1.72rem, 2.4vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
}

.modal-choice_result.competition-result-prompt .modal-copy p,
.modal-system_prompt.portfolio-entry-prompt .modal-copy p,
.modal-system_prompt.submission-reminder-prompt .modal-copy p,
.modal-report_feedback .modal-copy p,
.modal-year_start .modal-copy p,
.summer-card .modal-copy p,
.summer-card .modal-option > span:not(.modal-option-media):not(.modal-delta):not(.inline-delta-text),
.special-skill-confirm-modal .modal-copy p {
  font-family: var(--font-pixel) !important;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
}

.modal-route_exam_intro .modal-title-icon,
.modal-route_exam_result .modal-title-icon,
.modal-system_prompt.graduation-design-reminder-prompt .modal-title-icon {
  width: 56px;
  height: 56px;
}

.modal-system_prompt.graduation-design-reminder-prompt {
  width: min(calc(700px + 65pt), calc(100vw - 40px));
}

/* Current request: site research settlement wrapping and HUD money fit. */
.game-shell .action-id-site_research.has-hover-delta:hover .action-hover-delta {
  display: block !important;
  line-height: 1.12 !important;
}

.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-item {
  display: inline-flex;
  min-width: 0;
  gap: 1px;
  margin-right: 5px;
}

.game-shell .action-id-site_research.has-hover-delta:hover .inline-delta-name,
.game-shell .action-id-site_research.has-hover-delta:hover .settlement-confirm-value {
  font-size: clamp(0.58rem, 0.62vw, 0.66rem) !important;
  line-height: 1.06 !important;
}

.competition-work-alert {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--ink);
  background: color-mix(in oklch, var(--panel-soft), var(--status-risk) 10%);
  border: 1px solid color-mix(in oklch, var(--status-risk), var(--line) 42%);
  border-radius: 6px;
}

.competition-work-alert-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.competition-work-alert-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.competition-work-alert div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.competition-work-alert strong {
  color: var(--status-risk);
  font-size: clamp(1rem, 1.04vw, 1.12rem);
  line-height: 1.15;
}

.competition-work-alert p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.88rem, 0.94vw, 1rem);
  line-height: 1.36;
}

.competition-work-area.has-work-alert {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.competition-selected-view .competition-work-list {
  align-content: start;
  min-height: 0;
}

.competition-selected-view .competition-work {
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 10px 12px;
}

.competition-selected-view .competition-work strong {
  font-size: clamp(0.92rem, 0.98vw, 1.06rem);
  line-height: 1.16;
}

.competition-selected-view .competition-work span,
.competition-selected-view .competition-work em {
  font-size: clamp(0.82rem, 0.88vw, 0.96rem);
  line-height: 1.22;
}

.competition-record {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
}

.competition-record strong,
.competition-record span {
  grid-column: 1 / 2;
}

.competition-record em {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  justify-self: end;
  text-align: right;
  font-size: clamp(0.98rem, 1.04vw, 1.14rem);
  line-height: 1.18;
}

.game-shell .log-list li.log-source-action-site_research {
  column-gap: 6px;
}

.game-shell .log-list li.log-source-action-site_research em {
  font-size: clamp(0.7rem, 0.76vw, 0.82rem);
  line-height: 1.12;
  word-spacing: -1px;
}

/* Current request: locked drawing actions keep normal hover delta display. */
.game-shell :is(.action-id-design_iteration, .action-id-crunch_drawing).has-side-lock.has-hover-delta:hover {
  grid-template-columns: clamp(48px, 2.55vw, 52px) minmax(0, 1fr);
  padding-inline-end: 12px;
}

.game-shell :is(.action-id-design_iteration, .action-id-crunch_drawing).has-side-lock.has-hover-delta:hover .action-lock-icon {
  display: none;
}

.game-shell :is(.action-id-design_iteration, .action-id-crunch_drawing).has-side-lock.has-hover-delta:hover .action-default-detail {
  display: none !important;
}

.game-shell :is(.action-id-design_iteration, .action-id-crunch_drawing).has-side-lock.has-hover-delta:hover .action-hover-detail {
  display: flex !important;
}

.game-shell :is(.action-id-design_iteration, .action-id-crunch_drawing).has-side-lock.has-hover-delta:hover .action-hover-delta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
}

/* Current request: report strategy title icon. */
.modal-report_strategy .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.modal-report_strategy .modal-title-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}

.modal-report_strategy .modal-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Current request: graduation tail modals use image-led fixed-flow layouts. */
.modal-card.graduation-flow-card {
  width: min(1540px, calc(100vw - 20px)) !important;
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  gap: clamp(12px, 1.4vw, 18px) !important;
  padding: clamp(12px, 1.4vw, 18px) !important;
}

.modal-card.graduation-flow-card .modal-media {
  width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.modal-card.graduation-flow-defense .modal-media,
.modal-card.graduation-flow-graduation_ceremony .modal-media {
  aspect-ratio: auto !important;
}

.modal-card.graduation-flow-ending_memory .modal-media {
  aspect-ratio: auto !important;
}

.modal-card.graduation-flow-card .modal-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: inherit !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.modal-card.graduation-flow-card .modal-copy {
  gap: 8px !important;
}

.modal-card.graduation-flow-card .modal-copy h2 {
  font-size: clamp(1.72rem, 2.4vw, 2.26rem) !important;
  line-height: 1.12 !important;
}

.modal-card.graduation-flow-card .modal-copy p {
  max-width: none !important;
  font-size: clamp(0.98rem, 1.06vw, 1.1rem) !important;
  line-height: 1.58 !important;
}

.modal-card.graduation-flow-card .modal-media figcaption {
  padding: 8px 10px 0;
}

.modal-card.graduation-flow-graduation_ceremony,
.modal-card.graduation-flow-ending_memory {
  width: min(880px, calc(100vw - 20px)) !important;
}

.modal-card.graduation-flow-ending_memory .modal-media {
  width: 100% !important;
  justify-self: stretch;
  max-height: none !important;
}

.modal-card.graduation-flow-graduation_ceremony .modal-media {
  max-height: none !important;
}

.modal-card.graduation-flow-ending_memory .modal-copy {
  position: static !important;
  z-index: auto !important;
}

.modal-card.graduation-flow-ending_memory .modal-copy p {
  max-width: none !important;
}

.ending-memory-nowrap {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
}

.modal-body-nowrap {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
}

.modal-card.graduation-flow-defense.modal-report_strategy {
  width: min(1180px, calc(100vw - 28px)) !important;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "media"
    "options";
  align-items: start;
}

.modal-card.graduation-flow-defense.modal-report_strategy .modal-media {
  grid-area: media;
  width: 100% !important;
  justify-self: stretch;
  align-self: start;
  max-height: none !important;
}

.modal-card.graduation-flow-defense.modal-report_strategy .modal-copy {
  grid-area: copy;
  align-self: start;
}

.modal-card.graduation-flow-defense.modal-report_strategy .modal-options {
  grid-area: options;
  align-self: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.modal-card.graduation-flow-defense.modal-report_strategy .report-strategy-option {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px 12px;
  padding: 12px;
}

.modal-card.graduation-flow-defense.modal-report_strategy .report-strategy-option-side-icon {
  width: 54px;
  height: 54px;
}

.modal-card.graduation-flow-defense.modal-report_strategy .report-strategy-option > strong {
  font-size: clamp(1.22rem, 1.38vw, 1.5rem);
}

.modal-card.graduation-flow-defense.modal-report_strategy .report-strategy-line {
  font-size: clamp(0.94rem, 1.02vw, 1.06rem);
  line-height: 1.42;
}


/* Current request: shop copy line controls for confirmed catalog pages. */
.shop-modal .shop-item-form_space_order .shop-copy strong,
.shop-modal .shop-item-master_portfolio .shop-copy p:first-of-type,
.shop-modal .shop-item-crazy_thursday .shop-copy p:first-of-type,
.shop-modal .shop-item-red_bull .shop-copy p:first-of-type,
.shop-modal .shop-item-eye_drops .shop-copy p:first-of-type {
  max-width: max-content;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
}

/* Current request: align shop, competition, achievements, and settings buttons with public-service tabs. */
:is(.shop-category-tab, .competition-mode-tab, .achievement-tab, .settings-entry-button, .start-settings-button) {
  color: var(--ink);
  background: transparent !important;
  border-color: var(--line);
  box-shadow: none;
}

:is(.shop-category-tab, .competition-mode-tab, .achievement-tab):hover,
:is(.settings-entry-button, .start-settings-button):is(:hover, :focus-visible) {
  color: var(--ink);
  background: transparent !important;
  border-color: var(--gold);
  box-shadow: none;
}

.shop-category-tab.is-active,
.competition-mode-tab.is-active,
#achievement-tab-endings:checked ~ .achievement-tabs label[for="achievement-tab-endings"],
#achievement-tab-achievements:checked ~ .achievement-tabs label[for="achievement-tab-achievements"] {
  color: var(--blue-dark) !important;
  background: transparent !important;
  border-color: var(--blue-dark) !important;
  box-shadow: inset 0 -3px 0 var(--blue-dark) !important;
}

.shop-category-tab.is-active b {
  color: var(--blue-dark);
  background: transparent;
  border-color: var(--blue-dark);
}

/* Current request: keep process-page corner entry buttons visibly lifted. */
.game-shell .corner-entry-button,
.game-shell .settings-corner-button {
  overflow: visible !important;
  border-bottom-color: color-mix(in oklch, var(--line), var(--ink) 30%) !important;
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.32),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 3px 0 rgb(43 52 66 / 0.26),
    0 7px 12px rgb(43 52 66 / 0.1) !important;
}

.game-shell .corner-entry-button:hover:not(:disabled),
.game-shell .settings-corner-button:hover:not(:disabled) {
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.32),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 4px 0 rgb(43 52 66 / 0.3),
    0 9px 14px rgb(43 52 66 / 0.12) !important;
}

:root[data-theme="dark"] .game-shell .corner-entry-button,
:root[data-theme="dark"] .game-shell .settings-corner-button {
  border-bottom-color: oklch(0.56 0 0 / 0.78) !important;
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 0.2),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 3px 0 rgb(255 255 255 / 0.16),
    0 7px 12px rgb(0 0 0 / 0.2) !important;
}

:root[data-theme="dark"] .game-shell .corner-entry-button:hover:not(:disabled),
:root[data-theme="dark"] .game-shell .settings-corner-button:hover:not(:disabled) {
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 0.22),
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 4px 0 rgb(255 255 255 / 0.18),
    0 9px 14px rgb(0 0 0 / 0.24) !important;
}

/* Current request: make the process-page portfolio and resume entry frames visibly lifted. */
.game-shell .right-entry-grid .entry-id-portfolio_resume,
.game-shell .right-entry-grid .entry-id-resume {
  overflow: visible !important;
  border-color: color-mix(in oklch, var(--line), var(--ink) 22%) !important;
  border-bottom-color: color-mix(in oklch, var(--line), var(--ink) 42%) !important;
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.34),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 4px 0 rgb(43 52 66 / 0.24),
    0 10px 16px rgb(43 52 66 / 0.12) !important;
}

:root[data-theme="dark"] .game-shell .right-entry-grid .entry-id-portfolio_resume,
:root[data-theme="dark"] .game-shell .right-entry-grid .entry-id-resume {
  border-bottom-color: oklch(0.56 0 0 / 0.78) !important;
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 0.18),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 4px 0 rgb(255 255 255 / 0.15),
    0 10px 16px rgb(0 0 0 / 0.24) !important;
}

/* Current request: make the abandon-study restart entry frame read more dangerous without tinting its interior. */
.game-settings-grid .settings-entry-button.is-danger {
  color: var(--ink) !important;
  background: transparent !important;
  border: 2px solid color-mix(in oklch, var(--danger), black 10%) !important;
  box-shadow:
    inset 0 -4px 0 color-mix(in oklch, var(--danger), transparent 20%) !important;
}

.game-settings-grid .settings-entry-button.is-danger strong {
  color: var(--ink) !important;
}

.game-settings-grid .settings-entry-button.is-danger em {
  color: var(--muted) !important;
}

.game-settings-grid .settings-entry-button.is-danger .settings-entry-icon {
  color: var(--danger) !important;
  background: var(--panel-soft) !important;
  border-color: color-mix(in oklch, var(--danger), transparent 28%) !important;
}

.game-settings-grid .settings-entry-button.is-danger:hover:not(:disabled),
.game-settings-grid .settings-entry-button.is-danger:focus-visible {
  color: var(--ink) !important;
  background: transparent !important;
  border-color: oklch(0.36 0.2 25) !important;
  box-shadow:
    inset 0 -5px 0 oklch(0.38 0.22 25),
    0 0 0 1px oklch(0.28 0.16 25) !important;
}

.game-settings-grid .settings-entry-button.is-danger:hover:not(:disabled) strong,
.game-settings-grid .settings-entry-button.is-danger:focus-visible strong {
  color: var(--ink) !important;
}

.game-settings-grid .settings-entry-button.is-danger:hover:not(:disabled) em,
.game-settings-grid .settings-entry-button.is-danger:focus-visible em {
  color: var(--muted) !important;
}

/* Current request: enlarge the apply-button icon. */
.public-service-apply-button {
  gap: 10px;
}

.public-service-apply-button span {
  width: 40px !important;
  height: 40px !important;
}

/* Current request: place the public-service apply button in the selected route card top-right. */
.public-service-detail-head {
  grid-template-columns: 108px minmax(0, 1fr) max-content !important;
  align-items: start !important;
}

.public-service-detail-head > div {
  align-self: center;
}

.public-service-detail-head .public-service-apply-stack {
  justify-self: end;
  align-self: start;
}

.public-service-detail-head .public-service-apply-button {
  min-height: 48px;
  padding: 6px 12px 6px 8px;
  white-space: nowrap;
}

.public-service-detail-head .public-service-disabled-reason {
  color: var(--danger) !important;
}

/* Current request: add visible hover states for internship/work and public-service navigation/options. */
.internship-work-tab:hover:not(:disabled),
.internship-work-tab:focus-visible,
.public-service-tab:hover:not(:disabled),
.public-service-tab:focus-visible {
  color: var(--ink) !important;
  background: transparent !important;
  border-color: var(--gold) !important;
  box-shadow: none !important;
}

.internship-work-tab.is-active:hover:not(:disabled),
.internship-work-tab.is-active:focus-visible,
.public-service-tab.is-active:hover:not(:disabled),
.public-service-tab.is-active:focus-visible {
  color: var(--blue-dark) !important;
  background: transparent !important;
  border-color: var(--blue-dark) !important;
  box-shadow: inset 0 -3px 0 var(--blue-dark) !important;
}

/* Current request: make route tab switching softer. */
.internship-work-tab,
.public-service-tab,
.overseas-tier-tab {
  transition:
    color 180ms ease-out,
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 180ms ease-out;
}

.internship-work-modal.is-soft-nav-switch .internship-work-stage,
.public-service-modal.is-soft-nav-switch .public-service-jobs,
.public-service-modal.is-soft-nav-switch .public-service-detail,
.overseas-route-modal.is-soft-nav-switch .route-groups {
  animation: softNavContentSettle 160ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

@keyframes softNavContentSettle {
  from {
    opacity: 0.985;
    transform: translateY(1px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .internship-work-modal.is-soft-nav-switch .internship-work-stage,
  .public-service-modal.is-soft-nav-switch .public-service-jobs,
  .public-service-modal.is-soft-nav-switch .public-service-detail,
  .overseas-route-modal.is-soft-nav-switch .route-groups {
    animation: none !important;
  }
}

.internship-job-card:hover:not(:disabled),
.internship-job-card:focus-visible,
.public-service-job-card:hover:not(:disabled),
.public-service-job-card:focus-visible {
  border-color: var(--gold) !important;
  background: color-mix(in oklch, var(--panel), var(--gold) 10%) !important;
  box-shadow:
    inset 0 -2px 0 color-mix(in oklch, var(--gold), var(--ink) 14%),
    0 4px 10px rgb(43 52 66 / 0.1) !important;
  transform: translateY(-1px);
}

.internship-job-card.is-selected:hover:not(:disabled),
.internship-job-card.is-selected:focus-visible {
  border-color: var(--blue-dark) !important;
  background: var(--panel) !important;
  box-shadow: inset 0 -3px 0 var(--blue-dark) !important;
}

/* Current request: dark-theme light primary buttons need a visible black inner stroke. */
:root[data-theme="dark"] button.is-primary {
  outline: 1px solid rgb(0 0 0 / 0.72);
  outline-offset: -4px;
}

/* Current request: IELTS pages follow random-event type scale and use softer exam-question motion. */
.ielts-registration-modal .modal-copy h2,
.modal-ielts_exam_intro .modal-copy h2,
.modal-ielts_question .modal-copy h2,
.modal-ielts_exam_result .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.72rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.16;
}

.ielts-registration-modal .modal-copy p,
.modal-ielts_exam_intro .modal-copy p:not(.kicker),
.modal-ielts_question .modal-copy p:not(.kicker),
.modal-ielts_exam_result .modal-copy p:not(.kicker) {
  max-width: none;
  margin: 0;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem);
  font-weight: 400;
  line-height: 1.68;
  overflow-wrap: anywhere;
  white-space: normal;
}

.modal-ielts_exam_intro .modal-title-icon,
.modal-ielts_question .modal-title-icon,
.modal-ielts_exam_result .modal-title-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.modal-ielts_exam_result .modal-copy h2 {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.modal-ielts_exam_result .modal-copy h2 > span:last-child {
  min-width: max-content;
}

.modal-ielts_question {
  min-height: min(560px, calc(100dvh - 44px));
  align-content: center;
}

.modal-backdrop-ielts_question,
.modal-backdrop-ielts_question.is-switching-in {
  animation: ieltsQuestionBackdropSoftIn 560ms cubic-bezier(0.18, 0.82, 0.24, 1) both !important;
}

.modal-backdrop-ielts_question .modal-ielts_question,
.modal-backdrop-ielts_question.is-switching-in .modal-ielts_question {
  animation: ieltsQuestionCardSoftIn 600ms cubic-bezier(0.18, 0.82, 0.24, 1) both !important;
}

.modal-backdrop-ielts_question.is-switching-out,
.modal-backdrop-ielts_question.is-closing {
  animation: ieltsQuestionBackdropSoftOut 300ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.modal-backdrop-ielts_question.is-switching-out .modal-ielts_question,
.modal-backdrop-ielts_question.is-closing .modal-ielts_question {
  animation: ieltsQuestionCardSoftOut 300ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.modal-ielts_question .modal-copy,
.modal-ielts_question .modal-options {
  animation: ieltsQuestionContentSoftIn 620ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.modal-ielts_question .modal-options {
  animation-delay: 70ms;
}

@keyframes ieltsQuestionBackdropSoftIn {
  from { opacity: 0.985; }
  to { opacity: 1; }
}

@keyframes ieltsQuestionCardSoftIn {
  from {
    opacity: 0.92;
    transform: translate3d(0, 3px, 0) scale(0.999);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes ieltsQuestionBackdropSoftOut {
  from { opacity: 1; }
  to { opacity: 0.94; }
}

@keyframes ieltsQuestionCardSoftOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0.86;
    transform: translate3d(0, 2px, 0) scale(0.999);
  }
}

@keyframes ieltsQuestionContentSoftIn {
  from {
    opacity: 0.9;
    transform: translate3d(0, 3px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop-ielts_question,
  .modal-backdrop-ielts_question.is-switching-in,
  .modal-backdrop-ielts_question.is-switching-out,
  .modal-backdrop-ielts_question.is-closing,
  .modal-backdrop-ielts_question .modal-ielts_question,
  .modal-backdrop-ielts_question.is-switching-in .modal-ielts_question,
  .modal-backdrop-ielts_question.is-switching-out .modal-ielts_question,
  .modal-backdrop-ielts_question.is-closing .modal-ielts_question,
  .modal-ielts_question .modal-copy,
  .modal-ielts_question .modal-options {
    animation: none !important;
    transform: none !important;
  }
}

.summer-card .modal-option {
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 12px;
  padding-block-end: 16px;
}

.summer-card .modal-option > strong {
  min-height: 0;
}

.summer-card .modal-option-delta-text {
  align-self: start;
  margin-block-start: 0;
}

/* Current request: IELTS-like answer flow, softer than the existing question flash. */
.modal-backdrop-course_question,
.modal-backdrop-route_question,
.modal-backdrop-ielts_question,
.modal-backdrop.is-answer-modal-steady {
  animation: answerBackdropSoftSettle 340ms cubic-bezier(0.2, 0.82, 0.24, 1) both !important;
}

.modal-course_exam_intro,
.modal-course_question,
.modal-course_result,
.modal-route_exam_intro,
.modal-route_question,
.modal-route_exam_result,
.modal-ielts_exam_intro,
.modal-ielts_question,
.modal-ielts_exam_result {
  animation: answerCardSoftSettle 360ms cubic-bezier(0.2, 0.82, 0.24, 1) both !important;
}

.modal-card.is-answer-modal-switching {
  animation: answerCardSoftSwitch 300ms cubic-bezier(0.2, 0.82, 0.24, 1) both !important;
}

.modal-card.is-answer-modal-switching .modal-copy,
.modal-card.is-answer-modal-switching .modal-options,
.modal-course_question .modal-copy,
.modal-course_question .modal-options,
.modal-route_question .modal-copy,
.modal-route_question .modal-options,
.modal-ielts_question .modal-copy,
.modal-ielts_question .modal-options {
  animation: answerContentSoftSettle 340ms cubic-bezier(0.2, 0.82, 0.24, 1) both !important;
}

.modal-card.is-answer-modal-switching .modal-options,
.modal-course_question .modal-options,
.modal-route_question .modal-options,
.modal-ielts_question .modal-options {
  animation-delay: 40ms;
}

.modal-backdrop.is-answer-modal-steady,
.modal-backdrop.is-answer-modal-steady .modal-card,
.modal-backdrop.is-answer-modal-steady .modal-copy,
.modal-backdrop.is-answer-modal-steady .modal-options {
  animation: none !important;
  transform: none !important;
}

@keyframes answerBackdropSoftSettle {
  from { opacity: 0.992; }
  to { opacity: 1; }
}

@keyframes answerCardSoftSettle {
  from {
    opacity: 0.965;
    transform: translate3d(0, 2px, 0) scale(0.9995);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes answerCardSoftSwitch {
  from {
    opacity: 0.975;
    transform: translate3d(0, 1px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes answerContentSoftSettle {
  from {
    opacity: 0.94;
    transform: translate3d(0, 2px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop-course_question,
  .modal-backdrop-route_question,
  .modal-backdrop-ielts_question,
  .modal-backdrop.is-answer-modal-steady,
  .modal-course_exam_intro,
  .modal-course_question,
  .modal-course_result,
  .modal-route_exam_intro,
  .modal-route_question,
  .modal-route_exam_result,
  .modal-ielts_exam_intro,
  .modal-ielts_question,
  .modal-ielts_exam_result,
  .modal-card.is-answer-modal-switching,
  .modal-card.is-answer-modal-switching .modal-copy,
  .modal-card.is-answer-modal-switching .modal-options,
  .modal-course_question .modal-copy,
  .modal-course_question .modal-options,
  .modal-route_question .modal-copy,
  .modal-route_question .modal-options,
  .modal-ielts_question .modal-copy,
  .modal-ielts_question .modal-options {
    animation: none !important;
    transform: none !important;
  }
}

/* Current request: route application modals should inherit the IELTS registration weight. */
.route-apply-card {
  width: min(900px, calc(100vw - 28px));
  gap: 20px;
  padding: 24px;
}

.route-apply-card .modal-copy {
  display: grid;
  gap: 10px;
  align-items: start;
}

.route-apply-card .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(1.72rem, 2.4vw, 2.25rem) !important;
  font-weight: 700;
  line-height: 1.16;
}

.route-apply-card .modal-title-icon {
  width: 136px !important;
  height: 136px !important;
  flex: 0 0 136px !important;
  display: grid;
  place-items: center;
  align-self: center;
  padding: 12px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 10%), color-mix(in oklch, var(--panel-soft), var(--blue) 10%));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 -4px 0 color-mix(in oklch, var(--blue-dark), transparent 78%);
}

.route-apply-card .modal-title-icon img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  image-rendering: pixelated;
}

.route-apply-card .modal-copy p:not(.kicker) {
  max-width: none;
  margin: 0;
  font-size: clamp(1.05rem, 1.16vw, 1.2rem) !important;
  font-weight: 400;
  line-height: 1.68 !important;
  overflow-wrap: anywhere;
  white-space: normal;
}

.route-apply-card .modal-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, auto));
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.route-apply-card .modal-option {
  min-width: min(220px, 100%);
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  gap: 0;
  padding: 9px 13px;
  text-align: center;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.26), transparent 62%),
    var(--panel);
  border: 1px solid oklch(0.74 0.04 248 / 0.78);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.26),
    0 2px 0 oklch(0.55 0.035 248 / 0.32);
}

.route-apply-card .modal-option > strong {
  font-size: clamp(1rem, 1vw, 1.12rem);
  line-height: 1.24;
}

.route-apply-card .modal-option > span,
.route-apply-card .modal-option > em {
  display: none;
}

.route-apply-card .modal-option:first-child {
  color: oklch(0.96 0.006 250);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 62%),
    linear-gradient(90deg, oklch(0.08 0.01 255) 0%, oklch(0.14 0.012 255) 30%, oklch(0.26 0.01 255) 72%, oklch(0.36 0.006 255) 100%);
  border-color: color-mix(in oklch, var(--blue-dark), var(--line) 52%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 8px 18px oklch(0.18 0.04 250 / 0.1);
}

.route-apply-card .modal-option:first-child > strong {
  color: oklch(0.96 0.006 250);
}

.route-apply-card .modal-option:first-child > span,
.route-apply-card .modal-option:first-child > em {
  color: oklch(0.78 0.01 250);
}

.route-apply-card .modal-option:first-child:hover:not(:disabled),
.route-apply-card .modal-option:first-child:focus-visible {
  border-color: var(--gold);
  box-shadow:
    inset 0 -3px 0 color-mix(in oklch, var(--gold), var(--blue-dark) 12%),
    0 10px 22px oklch(0.18 0.04 250 / 0.13);
}


/* Current request: public-service application confirmations match resume submission modals. */
.modal-route_commit.route-apply-card {
  gap: 14px;
  padding: 24px;
}

.modal-route_commit.route-apply-card .modal-copy {
  display: grid;
  gap: 10px;
}

.modal-route_commit.route-apply-card .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.72rem, 2.4vw, 2.25rem) !important;
  font-weight: 700;
  line-height: 1.16;
}

.modal-route_commit.route-apply-card .modal-title-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.modal-route_commit.route-apply-card .modal-title-icon img {
  width: 100%;
  height: 100%;
}

.modal-route_commit.route-apply-card .modal-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  justify-content: stretch;
  align-items: stretch;
}

.modal-route_commit.route-apply-card .modal-option,
.modal-route_commit.route-apply-card .modal-option:first-child {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-items: stretch;
  gap: 5px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}

.modal-route_commit.route-apply-card .modal-option > strong,
.modal-route_commit.route-apply-card .modal-option:first-child > strong {
  color: var(--ink);
  font-size: inherit;
  line-height: normal;
}

.modal-route_commit.route-apply-card .modal-option > span,
.modal-route_commit.route-apply-card .modal-option > em {
  display: block;
}

.modal-route_commit.route-apply-card .modal-option:hover:not(:disabled),
.modal-route_commit.route-apply-card .modal-option:first-child:hover:not(:disabled),
.modal-route_commit.route-apply-card .modal-option:focus-visible,
.modal-route_commit.route-apply-card .modal-option:first-child:focus-visible {
  background: var(--panel-soft);
  border-color: var(--blue);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    0 3px 0 oklch(0.43 0.12 253 / 0.24);
  transform: translateY(-1px);
}

/* Current request: route exam intro pages match the IELTS exam intro modal. */
.modal-route_exam_intro.route-apply-card {
  gap: 14px;
  padding: 24px;
}

.modal-route_exam_intro.route-apply-card .modal-copy {
  display: grid;
  gap: 10px;
}

.modal-route_exam_intro.route-apply-card .modal-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.72rem, 2.4vw, 2.25rem) !important;
  font-weight: 700;
  line-height: 1.16;
}

.modal-route_exam_intro.route-apply-card .modal-title-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.modal-route_exam_intro.route-apply-card .modal-title-icon img {
  width: 100%;
  height: 100%;
}

.modal-route_exam_intro.route-apply-card .modal-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  justify-content: stretch;
  align-items: stretch;
}

.modal-route_exam_intro.route-apply-card .modal-option,
.modal-route_exam_intro.route-apply-card .modal-option:first-child {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-items: stretch;
  gap: 5px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}

.modal-route_exam_intro.route-apply-card .modal-option > strong,
.modal-route_exam_intro.route-apply-card .modal-option:first-child > strong {
  color: var(--ink);
  font-size: inherit;
  line-height: normal;
}

.modal-route_exam_intro.route-apply-card .modal-option:hover:not(:disabled),
.modal-route_exam_intro.route-apply-card .modal-option:first-child:hover:not(:disabled),
.modal-route_exam_intro.route-apply-card .modal-option:focus-visible,
.modal-route_exam_intro.route-apply-card .modal-option:first-child:focus-visible {
  background: var(--panel-soft);
  border-color: var(--blue);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    0 3px 0 oklch(0.43 0.12 253 / 0.24);
  transform: translateY(-1px);
}

/* Current request: IELTS and route question stems match course question scale. */
.modal-ielts_question .modal-copy p:not(.kicker),
.modal-route_question .modal-copy p:not(.kicker) {
  max-width: 78ch;
  font-size: clamp(1.08rem, 1.2vw, 1.26rem);
  line-height: 1.65;
}

/* Current request: ending page uses ending-illustrations assets with a quieter result layout. */
.ending-shell {
  grid-template-columns: minmax(0, 1fr) minmax(304px, 360px);
  gap: 16px;
  padding: 16px;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--bg);
  background-size: 12px 12px, 12px 12px, auto;
}

.ending-stage {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
}

.ending-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(360px, 0.92fr);
  gap: 16px;
  align-items: center;
}

.ending-illustration,
.ending-copy,
.ending-summary,
.ending-side .music-dock,
.ending-side .record-panel {
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 18%);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 12px 30px rgb(35 42 54 / 0.08);
}

.ending-illustration {
  min-width: 0;
  min-height: 344px;
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel-soft), white 10%), var(--panel));
}

.ending-illustration::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid color-mix(in oklch, var(--line), transparent 24%);
  pointer-events: none;
}

.ending-illustration img {
  width: 100%;
  height: auto;
  max-height: min(54dvh, 520px);
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  object-position: center;
}

.ending-illustration figcaption {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.ending-illustration figcaption strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.ending-copy {
  min-width: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 8%), var(--panel-soft));
}

.ending-copy .kicker {
  color: var(--blue-dark);
  font-size: 0.92rem;
  font-weight: 800;
}

.ending-copy h1 {
  max-width: 100%;
  color: var(--ink);
  font-size: 3.35rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ending-copy p {
  color: var(--muted);
}

.ending-copy p:last-child {
  max-width: 66ch;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.78;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.ending-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  background: color-mix(in oklch, var(--panel), transparent 4%);
}

.ending-summary .status-board {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.ending-actions {
  min-width: 184px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: stretch;
}

.ending-actions .pixel-button {
  min-height: 44px;
}

.ending-side {
  gap: 14px;
}

.ending-side .music-dock,
.ending-side .record-panel {
  background: color-mix(in oklch, var(--panel), transparent 3%);
}

.ending-side .record-panel {
  overflow: hidden;
}

.ending-side .review-list {
  padding-right: 2px;
}

:root[data-theme="dark"] .ending-illustration,
:root[data-theme="dark"] .ending-copy,
:root[data-theme="dark"] .ending-summary,
:root[data-theme="dark"] .ending-side .music-dock,
:root[data-theme="dark"] .ending-side .record-panel {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 16px 32px rgb(0 0 0 / 0.2);
}

:root[data-theme="dark"] .ending-illustration {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 4%), color-mix(in oklch, var(--panel-soft), black 8%));
}

:root[data-theme="dark"] .ending-copy {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 3%), color-mix(in oklch, var(--panel-soft), black 6%));
}

@media (max-width: 1200px) {
  .ending-shell {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .ending-hero {
    grid-template-columns: 1fr;
  }

  .ending-illustration {
    min-height: 420px;
  }

  .ending-summary {
    grid-template-columns: 1fr;
  }

  .ending-actions {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}



/* Current request: ending page focuses on illustration, story, actions, and ending toast only. */
.ending-shell {
  grid-template-columns: minmax(0, 1fr) 336px;
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--bg), white 4%), var(--bg)),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, 14px 14px, 14px 14px;
}

.ending-stage {
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
}

.ending-hero {
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(760px, 1.34fr) minmax(430px, 0.66fr);
  gap: 18px;
  align-items: stretch;
}

.ending-illustration,
.ending-copy,
.ending-summary,
.ending-side .music-dock {
  border: 1px solid color-mix(in oklch, var(--line-strong), var(--ink) 10%);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 18px 40px rgb(34 41 52 / 0.1);
}

.ending-illustration {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 58px;
  align-content: stretch;
  gap: 0;
  padding: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 10%), color-mix(in oklch, var(--panel-soft), white 2%));
}

.ending-illustration::before {
  inset: 12px;
  border-color: color-mix(in oklch, var(--blue), transparent 72%);
}

.ending-illustration img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

.ending-illustration figcaption {
  min-height: 0;
  padding: 12px 4px 0;
  color: color-mix(in oklch, var(--muted), var(--ink) 18%);
  font-size: 0.9rem;
  line-height: 1.2;
}

.ending-illustration figcaption strong {
  color: var(--blue-dark);
  font-size: 1.08rem;
}

.ending-copy {
  display: grid;
  align-content: center;
  gap: 20px;
  min-width: 0;
  padding: clamp(28px, 3.6vw, 52px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 12%), color-mix(in oklch, var(--panel), var(--blue) 4%));
}

.ending-copy .kicker {
  margin: 0;
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
}

.ending-copy h1 {
  max-width: 11ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.32rem, 3.15vw, 3.72rem);
  font-weight: 800;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ending-copy p {
  margin: 0;
}

.ending-copy p:last-child {
  max-width: 36em;
  color: color-mix(in oklch, var(--ink), var(--muted) 12%);
  font-size: clamp(1.02rem, 1vw, 1.16rem);
  line-height: 1.82;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.ending-summary {
  display: block;
  padding: 12px;
  background: color-mix(in oklch, var(--panel), transparent 2%);
}

.ending-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ending-actions .pixel-button {
  min-height: 48px;
  font-size: 0.96rem;
}

.ending-side {
  min-width: 0;
  align-content: start;
  gap: 0;
}

.ending-side .music-dock {
  width: 100%;
  background: color-mix(in oklch, var(--panel), transparent 2%);
}

:root[data-theme="dark"] .ending-shell {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--bg), white 2%), var(--bg)),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
}

:root[data-theme="dark"] .ending-illustration,
:root[data-theme="dark"] .ending-copy,
:root[data-theme="dark"] .ending-summary,
:root[data-theme="dark"] .ending-side .music-dock {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 18px 42px rgb(0 0 0 / 0.28);
}

:root[data-theme="dark"] .ending-copy {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 4%), color-mix(in oklch, var(--panel-soft), black 8%));
}

/* EOF final ending-page reference layout: split title, left image, centered story, start-page controls. */
.ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.7), oklch(0.9 0 0 / 0.58));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0 / 0.82), oklch(0.94 0 0 / 0.68));
  --start-button-inner: oklch(1 0 0 / 0.18);
  --start-button-border-hover: color-mix(in oklch, var(--blue), white 28%);
  --start-panel-ink: var(--ink);
  --start-panel-line: var(--line-strong);
  --start-shadow: oklch(0 0 0 / 0.14);
  --start-blue: var(--blue-dark);
  --start-button-glow: oklch(0.58 0.11 248 / 0.22);
  grid-template-columns: minmax(0, 1fr) 390px;
}

:root[data-theme="dark"] .ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.72), oklch(0.13 0 0 / 0.62));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.3 0 0 / 0.82), oklch(0.18 0 0 / 0.72));
  --start-panel-ink: var(--ink);
}

.ending-hero {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  gap: 22px;
}

.ending-title-block {
  gap: 4px;
  padding-top: 2px;
}

.ending-title-block h1 {
  display: grid;
  gap: 4px;
  max-width: none;
  white-space: normal;
  text-wrap: auto;
}

.ending-title-main {
  display: block;
  font-size: clamp(2.18rem, 2.75vw, 3.28rem);
  line-height: 0.96;
  white-space: nowrap;
}

.ending-title-detail {
  display: block;
  font-size: clamp(1.28rem, 1.62vw, 1.92rem);
  line-height: 1.05;
  white-space: nowrap;
}

.ending-illustration {
  width: min(100%, 720px);
  justify-self: center;
  margin-top: 18px;
}

.ending-image-frame {
  width: 100%;
}

.ending-copy {
  align-content: center;
  justify-items: center;
  padding: clamp(36px, 4.2vw, 64px);
}

.ending-copy p:last-child {
  width: min(100%, 30em);
  max-width: none;
  font-size: clamp(1.2rem, 1.22vw, 1.36rem);
  line-height: 1.82;
}

.ending-side {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 14px;
}

.ending-summary {
  align-self: end;
}

.ending-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ending-actions .start-entry-button,
.ending-actions .start-small-card {
  width: 100%;
  box-sizing: border-box;
  color: var(--start-panel-ink);
  border-color: var(--start-panel-line);
}

.ending-actions .start-entry-button.is-primary {
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) 34px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62));
}

.ending-actions .start-entry-copy strong {
  font-size: 1.16rem;
}

.ending-actions .start-entry-copy em {
  font-size: 0.82rem;
}

.ending-actions .start-small-card {
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 12px 14px;
  text-align: center;
}

.ending-actions .start-small-card strong {
  font-size: 1rem;
}

.ending-actions .start-small-card em {
  margin-top: 4px;
  font-size: 0.68rem;
}

.ending-link-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.995 0.01 86 / 0.78), oklch(0.91 0.025 84 / 0.68));
  border-color: var(--start-hover-border-bright);
}

:root[data-theme="dark"] .ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.24 0.035 252 / 0.72), oklch(0.14 0.028 252 / 0.64));
}

.ending-shell .start-entry-button.is-primary:hover:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18) !important;
}

.ending-shell .start-small-card.is-warm:hover {
  color: oklch(0.99 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.66 0.17 16 / 0.36), transparent 34%),
    linear-gradient(135deg, oklch(0.47 0.13 14 / 0.62), oklch(0.36 0.19 18 / 0.78) 28%, oklch(0.25 0.23 22 / 0.88) 52%, oklch(0.16 0.24 27 / 0.92) 76%, oklch(0.08 0.26 31 / 0.96)) !important;
  border-color: oklch(0.72 0.18 24 / 0.82) !important;
}
*** End of File

/* EOF final ending-page reference layout: split title, left image, centered story, start-page controls. */
.ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.7), oklch(0.9 0 0 / 0.58));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0 / 0.82), oklch(0.94 0 0 / 0.68));
  --start-button-inner: oklch(1 0 0 / 0.18);
  --start-button-border-hover: color-mix(in oklch, var(--blue), white 28%);
  --start-panel-ink: var(--ink);
  --start-panel-line: var(--line-strong);
  --start-shadow: oklch(0 0 0 / 0.14);
  --start-blue: var(--blue-dark);
  --start-button-glow: oklch(0.58 0.11 248 / 0.22);
  grid-template-columns: minmax(0, 1fr) 390px;
}

:root[data-theme="dark"] .ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.72), oklch(0.13 0 0 / 0.62));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.3 0 0 / 0.82), oklch(0.18 0 0 / 0.72));
  --start-panel-ink: var(--ink);
}

.ending-hero {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  gap: 22px;
}

.ending-title-block {
  gap: 4px;
  padding-top: 2px;
}

.ending-title-block h1 {
  display: grid;
  gap: 4px;
  max-width: none;
  white-space: normal;
  text-wrap: auto;
}

.ending-title-main {
  display: block;
  font-size: clamp(2.18rem, 2.75vw, 3.28rem);
  line-height: 0.96;
  white-space: nowrap;
}

.ending-title-detail {
  display: block;
  font-size: clamp(1.28rem, 1.62vw, 1.92rem);
  line-height: 1.05;
  white-space: nowrap;
}

.ending-illustration {
  width: min(100%, 720px);
  justify-self: center;
  margin-top: 18px;
}

.ending-image-frame {
  width: 100%;
}

.ending-copy {
  align-content: center;
  justify-items: center;
  padding: clamp(36px, 4.2vw, 64px);
}

.ending-copy p:last-child {
  width: min(100%, 30em);
  max-width: none;
  font-size: clamp(1.2rem, 1.22vw, 1.36rem);
  line-height: 1.82;
}

.ending-side {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 14px;
}

.ending-summary {
  align-self: end;
}

.ending-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ending-actions .start-entry-button,
.ending-actions .start-small-card {
  width: 100%;
  box-sizing: border-box;
  color: var(--start-panel-ink);
  border-color: var(--start-panel-line);
}

.ending-actions .start-entry-button.is-primary {
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) 34px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62));
}

.ending-actions .start-entry-copy strong {
  font-size: 1.16rem;
}

.ending-actions .start-entry-copy em {
  font-size: 0.82rem;
}

.ending-actions .start-small-card {
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 12px 14px;
  text-align: center;
}

.ending-actions .start-small-card strong {
  font-size: 1rem;
}

.ending-actions .start-small-card em {
  margin-top: 4px;
  font-size: 0.68rem;
}

.ending-link-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.995 0.01 86 / 0.78), oklch(0.91 0.025 84 / 0.68));
  border-color: var(--start-hover-border-bright);
}

:root[data-theme="dark"] .ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.24 0.035 252 / 0.72), oklch(0.14 0.028 252 / 0.64));
}

.ending-shell .start-entry-button.is-primary:hover:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18) !important;
}

.ending-shell .start-small-card.is-warm:hover {
  color: oklch(0.99 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.66 0.17 16 / 0.36), transparent 34%),
    linear-gradient(135deg, oklch(0.47 0.13 14 / 0.62), oklch(0.36 0.19 18 / 0.78) 28%, oklch(0.25 0.23 22 / 0.88) 52%, oklch(0.16 0.24 27 / 0.92) 76%, oklch(0.08 0.26 31 / 0.96)) !important;
  border-color: oklch(0.72 0.18 24 / 0.82) !important;
}

/* Final ending-page reference layout: split title, left image, centered story, start-page controls. */
.ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.7), oklch(0.9 0 0 / 0.58));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0 / 0.82), oklch(0.94 0 0 / 0.68));
  --start-button-inner: oklch(1 0 0 / 0.18);
  --start-button-border-hover: color-mix(in oklch, var(--blue), white 28%);
  --start-panel-ink: var(--ink);
  --start-panel-line: var(--line-strong);
  --start-shadow: oklch(0 0 0 / 0.14);
  --start-blue: var(--blue-dark);
  grid-template-columns: minmax(0, 1fr) 390px;
}

:root[data-theme="dark"] .ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.72), oklch(0.13 0 0 / 0.62));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.3 0 0 / 0.82), oklch(0.18 0 0 / 0.72));
  --start-panel-ink: var(--ink);
}

.ending-hero {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  gap: 22px;
}

.ending-title-block {
  gap: 4px;
  padding-top: 2px;
}

.ending-title-block h1 {
  display: grid;
  gap: 4px;
  max-width: none;
  white-space: normal;
  text-wrap: auto;
}

.ending-title-main {
  display: block;
  font-size: clamp(2.18rem, 2.75vw, 3.28rem);
  line-height: 0.96;
  white-space: nowrap;
}

.ending-title-detail {
  display: block;
  font-size: clamp(1.28rem, 1.62vw, 1.92rem);
  line-height: 1.05;
  white-space: nowrap;
}

.ending-illustration {
  width: min(100%, 720px);
  justify-self: center;
  margin-top: 18px;
}

.ending-image-frame {
  width: 100%;
}

.ending-copy {
  align-content: center;
  justify-items: center;
  padding: clamp(36px, 4.2vw, 64px);
}

.ending-copy p:last-child {
  width: min(100%, 30em);
  max-width: none;
  font-size: clamp(1.2rem, 1.22vw, 1.36rem);
  line-height: 1.82;
}

.ending-side {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 14px;
}

.ending-summary {
  align-self: end;
}

.ending-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ending-actions .start-entry-button,
.ending-actions .start-small-card {
  width: 100%;
  box-sizing: border-box;
  color: var(--start-panel-ink);
  border-color: var(--start-panel-line);
}

.ending-actions .start-entry-button.is-primary {
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) 34px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62));
}

.ending-actions .start-entry-copy strong {
  font-size: 1.16rem;
}

.ending-actions .start-entry-copy em {
  font-size: 0.82rem;
}

.ending-actions .start-small-card {
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 12px 14px;
  text-align: center;
}

.ending-actions .start-small-card strong {
  font-size: 1rem;
}

.ending-actions .start-small-card em {
  margin-top: 4px;
  font-size: 0.68rem;
}

.ending-link-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.995 0.01 86 / 0.78), oklch(0.91 0.025 84 / 0.68));
  border-color: var(--start-hover-border-bright);
}

:root[data-theme="dark"] .ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.24 0.035 252 / 0.72), oklch(0.14 0.028 252 / 0.64));
}

.ending-shell .start-entry-button.is-primary:hover:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18) !important;
}

.ending-shell .start-small-card.is-warm:hover {
  color: oklch(0.99 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.66 0.17 16 / 0.36), transparent 34%),
    linear-gradient(135deg, oklch(0.47 0.13 14 / 0.62), oklch(0.36 0.19 18 / 0.78) 28%, oklch(0.25 0.23 22 / 0.88) 52%, oklch(0.16 0.24 27 / 0.92) 76%, oklch(0.08 0.26 31 / 0.96)) !important;
  border-color: oklch(0.72 0.18 24 / 0.82) !important;
}

/* Ending page reference layout: split title, left image, centered story, start-page buttons. */
.ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.7), oklch(0.9 0 0 / 0.58));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0 / 0.82), oklch(0.94 0 0 / 0.68));
  --start-button-inner: oklch(1 0 0 / 0.18);
  --start-button-border-hover: color-mix(in oklch, var(--blue), white 28%);
  --start-panel-ink: var(--ink);
  --start-panel-line: var(--line-strong);
  --start-shadow: oklch(0 0 0 / 0.14);
  --start-blue: var(--blue-dark);
  grid-template-columns: minmax(0, 1fr) 390px;
}

:root[data-theme="dark"] .ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.72), oklch(0.13 0 0 / 0.62));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.3 0 0 / 0.82), oklch(0.18 0 0 / 0.72));
  --start-panel-ink: var(--ink);
}

.ending-hero {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  gap: 22px;
}

.ending-title-block {
  gap: 4px;
  padding-top: 2px;
}

.ending-title-block h1 {
  display: grid;
  gap: 4px;
  max-width: none;
  white-space: normal;
  text-wrap: auto;
}

.ending-title-main {
  display: block;
  font-size: clamp(2.18rem, 2.75vw, 3.28rem);
  line-height: 0.96;
  white-space: nowrap;
}

.ending-title-detail {
  display: block;
  font-size: clamp(1.28rem, 1.62vw, 1.92rem);
  line-height: 1.05;
  white-space: nowrap;
}

.ending-illustration {
  width: min(100%, 720px);
  justify-self: center;
  margin-top: 18px;
}

.ending-image-frame {
  width: 100%;
}

.ending-copy {
  align-content: center;
  justify-items: center;
  padding: clamp(36px, 4.2vw, 64px);
}

.ending-copy p:last-child {
  width: min(100%, 30em);
  max-width: none;
  font-size: clamp(1.2rem, 1.22vw, 1.36rem);
  line-height: 1.82;
}

.ending-side {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 14px;
}

.ending-summary {
  align-self: end;
}

.ending-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ending-actions .start-entry-button,
.ending-actions .start-small-card {
  width: 100%;
  box-sizing: border-box;
  color: var(--start-panel-ink);
  border-color: var(--start-panel-line);
}

.ending-actions .start-entry-button.is-primary {
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) 34px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62));
}

.ending-actions .start-entry-copy strong {
  font-size: 1.16rem;
}

.ending-actions .start-entry-copy em {
  font-size: 0.82rem;
}

.ending-actions .start-small-card {
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 12px 14px;
  text-align: center;
}

.ending-actions .start-small-card strong {
  font-size: 1rem;
}

.ending-actions .start-small-card em {
  margin-top: 4px;
  font-size: 0.68rem;
}

.ending-link-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.995 0.01 86 / 0.78), oklch(0.91 0.025 84 / 0.68));
  border-color: var(--start-hover-border-bright);
}

:root[data-theme="dark"] .ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.24 0.035 252 / 0.72), oklch(0.14 0.028 252 / 0.64));
}

.ending-shell .start-entry-button.is-primary:hover:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18) !important;
}

.ending-shell .start-small-card.is-warm:hover {
  color: oklch(0.99 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.66 0.17 16 / 0.36), transparent 34%),
    linear-gradient(135deg, oklch(0.47 0.13 14 / 0.62), oklch(0.36 0.19 18 / 0.78) 28%, oklch(0.25 0.23 22 / 0.88) 52%, oklch(0.16 0.24 27 / 0.92) 76%, oklch(0.08 0.26 31 / 0.96)) !important;
  border-color: oklch(0.72 0.18 24 / 0.82) !important;
}

/* Final ending-page override for the right-column controls and uncropped illustration. */
.ending-shell {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.ending-stage {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.ending-visual-stack {
  grid-template-rows: auto auto;
  align-content: start;
}

.ending-title-block h1 {
  max-width: none;
  font-size: clamp(2rem, 2.35vw, 2.95rem);
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  text-wrap: nowrap;
}

.ending-illustration {
  grid-template-rows: auto;
  align-content: start;
}

.ending-image-frame {
  aspect-ratio: 16 / 9;
  display: grid;
  align-items: start;
  justify-items: start;
  overflow: visible;
}

.ending-illustration img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left top;
}

.ending-copy p:last-child {
  max-width: 34em;
  font-size: clamp(1.16rem, 1.18vw, 1.3rem);
  line-height: 1.8;
}

.ending-side {
  grid-template-rows: auto auto;
  align-content: end;
  gap: 12px;
}

.ending-summary {
  display: grid;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ending-actions {
  grid-template-columns: 1fr;
  gap: 10px;
}

.ending-actions .pixel-button {
  min-height: 52px;
  font-size: 0.95rem;
}

.ending-side .game-music-dock {
  position: static;
  width: min(360px, 100%);
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Current request refinement: complete ending art, no score caption, actions in the right column. */
.ending-shell {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.ending-stage {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.ending-visual-stack {
  grid-template-rows: auto auto;
  align-content: start;
}

.ending-title-block h1 {
  max-width: none;
  font-size: clamp(2rem, 2.35vw, 2.95rem);
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  text-wrap: nowrap;
}

.ending-illustration {
  grid-template-rows: auto;
  align-content: start;
}

.ending-image-frame {
  aspect-ratio: 16 / 9;
  display: grid;
  align-items: start;
  justify-items: start;
  overflow: visible;
}

.ending-illustration img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left top;
}

.ending-copy p:last-child {
  max-width: 34em;
  font-size: clamp(1.16rem, 1.18vw, 1.3rem);
  line-height: 1.8;
}

.ending-side {
  grid-template-rows: auto auto;
  align-content: end;
  gap: 12px;
}

.ending-summary {
  display: grid;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ending-actions {
  grid-template-columns: 1fr;
  gap: 10px;
}

.ending-actions .pixel-button {
  min-height: 52px;
  font-size: 0.95rem;
}

.ending-side .game-music-dock {
  position: static;
  width: min(360px, 100%);
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ending-side .game-music-dock .track-card {
  min-height: 72px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto 26px;
  gap: 4px 9px;
  padding: 7px 9px 7px 7px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 8px 18px rgb(0 0 0 / 0.12);
}

.ending-side .game-music-dock .track-card::before {
  display: none;
}

.ending-side .game-music-dock .album-disc {
  width: 58px;
  height: 58px;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.ending-side .game-music-dock .track-copy {
  grid-column: 2;
  grid-row: 1;
  gap: 2px;
  align-self: end;
}

.ending-side .game-music-dock .music-station {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin: 0;
  padding: 2px 6px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.58rem;
  line-height: 1.15;
  white-space: nowrap;
}

.ending-side .game-music-dock .music-timeline {
  grid-column: 2 / 4;
  grid-row: 2;
  min-height: 26px;
}

.ending-side .game-music-dock .music-toggle-button,
.ending-side .game-music-dock .music-skip-button {
  width: 30px;
  height: 30px;
  color: oklch(0.18 0 0);
  background: oklch(0.88 0 0);
  border-color: oklch(0.58 0 0);
  border-radius: 6px;
}

.ending-side .game-music-dock .music-skip-button.is-prev {
  left: calc(50% - 38px);
}

.ending-side .game-music-dock .music-skip-button.is-next {
  left: calc(50% + 38px);
}

.ending-side .game-music-dock .music-skip-icon,
.ending-side .game-music-dock .music-toggle-icon {
  transform: scale(0.68);
}

.ending-side .game-music-dock .music-time,
.ending-side .game-music-dock .lyric-line,
.ending-side .game-music-dock .music-status {
  display: none;
}

@media (max-width: 1200px) {
  .ending-shell {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .ending-hero {
    grid-template-columns: 1fr;
  }
}

/* Current request: ending reference layout and share-card exit flow. */
.ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(1 0 0 / 0.7), oklch(0.9 0 0 / 0.58));
  --start-button-bg-hover: linear-gradient(180deg, oklch(1 0 0 / 0.82), oklch(0.94 0 0 / 0.68));
  --start-button-inner: oklch(1 0 0 / 0.18);
  --start-button-border-hover: color-mix(in oklch, var(--blue), white 28%);
  --start-panel-ink: var(--ink);
  --start-panel-line: var(--line-strong);
  --start-shadow: oklch(0 0 0 / 0.14);
  --start-blue: var(--blue-dark);
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  padding: 20px;
  overflow: hidden;
}

:root[data-theme="dark"] .ending-shell {
  --start-button-bg: linear-gradient(180deg, oklch(0.24 0 0 / 0.72), oklch(0.13 0 0 / 0.62));
  --start-button-bg-hover: linear-gradient(180deg, oklch(0.3 0 0 / 0.82), oklch(0.18 0 0 / 0.72));
  --start-panel-ink: var(--ink);
}

.ending-stage {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.ending-hero {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  gap: 22px;
  align-items: stretch;
}

.ending-visual-stack {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
}

.ending-title-block {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 2px 2px 0;
}

.ending-title-block .kicker {
  margin: 0;
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.1;
}

.ending-title-block h1 {
  max-width: none;
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
  white-space: normal;
  overflow-wrap: normal;
  text-wrap: auto;
}

.ending-title-main {
  display: block;
  font-size: clamp(2.18rem, 2.75vw, 3.28rem);
  line-height: 0.96;
  white-space: nowrap;
}

.ending-title-detail {
  display: block;
  font-size: clamp(1.28rem, 1.62vw, 1.92rem);
  line-height: 1.05;
  white-space: nowrap;
}

.ending-illustration {
  width: min(100%, 720px);
  justify-self: center;
  grid-template-rows: auto;
  align-content: start;
  gap: 6px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--line-strong), var(--ink) 12%);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 8%), color-mix(in oklch, var(--panel-soft), white 1%));
}

.ending-illustration::before {
  inset: 14px;
  border-color: color-mix(in oklch, var(--line), transparent 18%);
}

.ending-image-frame {
  min-width: 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  align-items: start;
  justify-items: start;
  overflow: visible;
}

.ending-illustration img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left top;
}

.ending-copy {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(36px, 4.2vw, 64px);
  border: 1px solid color-mix(in oklch, var(--line-strong), var(--ink) 10%);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 10%), color-mix(in oklch, var(--panel), var(--blue) 3%));
}

.ending-copy p:last-child {
  width: min(100%, 30em);
  max-width: none;
  color: color-mix(in oklch, var(--ink), var(--muted) 10%);
  font-size: clamp(1.2rem, 1.22vw, 1.36rem);
  line-height: 1.82;
}

.ending-summary {
  display: grid;
  align-self: end;
  align-items: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ending-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ending-actions .start-entry-button,
.ending-actions .start-small-card {
  width: 100%;
  box-sizing: border-box;
  color: var(--start-panel-ink);
  border-color: var(--start-panel-line);
}

.ending-actions .start-entry-button.is-primary {
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) 34px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62));
}

.ending-actions .start-entry-copy strong {
  font-size: 1.16rem;
}

.ending-actions .start-entry-copy em {
  font-size: 0.82rem;
}

.ending-actions .start-small-card {
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 12px 14px;
  text-align: center;
}

.ending-actions .start-small-card strong {
  font-size: 1rem;
}

.ending-actions .start-small-card em {
  margin-top: 4px;
  font-size: 0.68rem;
}

.ending-link-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ending-side {
  display: grid;
  position: relative;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 14px;
}

.ending-side .music-dock {
  position: static;
  width: min(360px, 100%);
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.995 0.01 86 / 0.78), oklch(0.91 0.025 84 / 0.68));
  border-color: var(--start-hover-border-bright);
}

:root[data-theme="dark"] .ending-shell :is(
  .start-entry-button:hover:not(:disabled),
  .start-small-card:hover
) {
  background:
    linear-gradient(180deg, oklch(0.24 0.035 252 / 0.72), oklch(0.14 0.028 252 / 0.64));
}

.ending-shell .start-entry-button.is-primary:hover:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18) !important;
}

.ending-shell .start-small-card.is-warm:hover {
  color: oklch(0.99 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.66 0.17 16 / 0.36), transparent 34%),
    linear-gradient(135deg, oklch(0.47 0.13 14 / 0.62), oklch(0.36 0.19 18 / 0.78) 28%, oklch(0.25 0.23 22 / 0.88) 52%, oklch(0.16 0.24 27 / 0.92) 76%, oklch(0.08 0.26 31 / 0.96)) !important;
  border-color: oklch(0.72 0.18 24 / 0.82) !important;
}

:root[data-theme="dark"] .ending-copy {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 4%), color-mix(in oklch, var(--panel-soft), black 8%));
}
.ending-shell {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
}

.ending-stage {
  min-width: 0;
  min-height: 0;
}

.ending-hero {
  grid-template-columns: 790px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.ending-visual-stack {
  align-content: start;
}

.ending-illustration {
  width: min(100%, 790px);
  justify-self: center;
  margin-top: 18px;
}

.ending-image-frame {
  aspect-ratio: 16 / 9;
}

.ending-insight-panel {
  min-width: 0;
  min-height: 270px;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  grid-template-rows: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--line-strong), var(--blue) 24%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), transparent 4%), color-mix(in oklch, var(--panel-soft), transparent 8%));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    0 18px 40px oklch(0 0 0 / 0.12);
}

.ending-insight-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--blue), var(--line-strong) 35%);
  border-radius: 4px;
  background: color-mix(in oklch, var(--panel), transparent 18%);
  overflow: hidden;
}

.ending-insight-card span {
  color: var(--blue-dark);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}

.ending-insight-card strong {
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.2;
}

.ending-insight-card em {
  color: color-mix(in oklch, var(--ink), var(--muted) 26%);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.42;
}

.ending-gpa-card {
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.ending-gpa-card strong {
  justify-self: end;
  font-family: var(--font-mono);
}

.ending-competition-card {
  grid-column: 1;
  grid-row: 2;
}

.ending-internship-card {
  grid-column: 2;
  grid-row: 1 / 3;
}

.ending-side {
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
}

.ending-side .ending-copy {
  min-height: 0;
  align-content: center;
  justify-items: center;
  padding: 34px 30px;
}

.ending-side .ending-copy p:last-child {
  width: min(100%, 23em);
  font-size: clamp(1.02rem, 1.08vw, 1.18rem);
  line-height: 1.86;
}

.ending-actions .start-small-card strong {
  font-size: 18px !important;
  line-height: 1.18 !important;
}

.ending-actions .start-small-card em {
  display: none !important;
}

/* Force ending illustration into the referenced large blue-box position. */
.ending-stage,
.ending-hero {
  position: relative;
}

.ending-hero {
  display: block;
  min-height: 0;
  height: 100%;
}

.ending-visual-stack {
  display: block;
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}

.ending-title-block {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 790px;
  z-index: 2;
}

.ending-illustration {
  position: absolute;
  top: 168px;
  left: 26px;
  width: 790px;
  margin: 0;
  z-index: 1;
}

.ending-insight-panel {
  position: absolute;
  top: 20px;
  left: 812px;
  width: calc(100% - 812px);
  max-width: 452px;
  z-index: 2;
}

/* Force ending illustration into the referenced red-box position and size. */
.ending-illustration {
  top: 222px !important;
  left: 20px !important;
  width: min(1240px, calc(100% - 24px)) !important;
  height: calc(100% - 222px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ending-illustration::before {
  display: none !important;
}

.ending-image-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

.ending-illustration img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left top !important;
}

/* Ending page polish: icon buttons, larger title, framed illustration. */
.ending-title-block {
  width: 760px !important;
}

.ending-title-main {
  font-size: clamp(3.1rem, 4.28vw, 4.7rem) !important;
  line-height: 0.92 !important;
}

.ending-title-detail {
  font-size: clamp(1.72rem, 2.28vw, 2.54rem) !important;
  line-height: 1.02 !important;
}

.ending-illustration {
  top: 190px !important;
  height: calc(100% - 190px) !important;
  padding: 14px !important;
  border: 1px solid color-mix(in oklch, var(--line-strong), white 12%) !important;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 8%), color-mix(in oklch, var(--panel-soft), black 4%)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 86%),
    0 18px 42px oklch(0 0 0 / 0.22) !important;
}

.ending-image-frame {
  inset: 14px !important;
  width: auto !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 18%) !important;
  background: color-mix(in oklch, var(--panel), black 10%) !important;
}

.ending-illustration img {
  object-position: center center !important;
}

.ending-actions .start-entry-button.is-primary {
  min-height: 112px !important;
  grid-template-columns: 62px minmax(0, 1fr) 34px !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 16px 18px !important;
  text-align: left !important;
}

.ending-actions .start-entry-icon {
  width: 58px !important;
  height: 58px !important;
}

.ending-actions .start-entry-copy strong {
  font-size: 2.05rem !important;
  line-height: 1.05 !important;
}

.ending-actions .start-entry-copy em {
  font-size: 1.02rem !important;
  line-height: 1.18 !important;
}

.ending-actions .start-small-card {
  min-height: 76px !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 10px !important;
  justify-items: start !important;
  padding: 10px 12px !important;
  text-align: left !important;
}

.ending-actions .start-small-card span:last-child {
  display: grid !important;
  min-width: 0 !important;
  align-content: center !important;
  justify-items: start !important;
  padding: 0 !important;
  transform: none !important;
}

.ending-actions .start-small-icon {
  width: 46px !important;
  height: 46px !important;
}

.ending-actions .start-small-card.is-warm .start-small-icon {
  width: 50px !important;
  height: 50px !important;
}

.ending-actions .start-small-card strong {
  font-size: 1.08rem !important;
  line-height: 1.08 !important;
}

.ending-actions .start-small-card em {
  display: block !important;
  width: 100% !important;
  margin-top: 5px !important;
  color: inherit !important;
  font-size: 0.76rem !important;
  line-height: 1.22 !important;
  opacity: 0.78 !important;
}

.ending-actions .start-small-card.is-warm em {
  font-size: 0.9rem !important;
  line-height: 1.18 !important;
}

.ending-link-actions {
  gap: 10px !important;
}

.ending-link-actions .start-small-card {
  min-height: 74px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
}

.ending-link-actions .start-small-icon {
  width: 38px !important;
  height: 38px !important;
}

.ending-link-actions .start-small-card strong {
  font-size: 0.96rem !important;
}

.ending-link-actions .start-small-card em {
  font-size: 0.66rem !important;
}

/* Ending page refinement: title icon, top-aligned copy, three-column resume panel. */
.ending-title-block {
  width: 780px !important;
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.ending-title-icon {
  width: 74px !important;
  height: 74px !important;
  display: grid !important;
  place-items: center !important;
  margin-top: 20px !important;
  border: 1px solid color-mix(in oklch, var(--line-strong), white 8%) !important;
  background: color-mix(in oklch, var(--panel), white 5%) !important;
}

.ending-title-icon img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.ending-title-copy {
  min-width: 0 !important;
}

.ending-title-main {
  font-size: clamp(3.45rem, 4.85vw, 5.25rem) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
}

.ending-title-detail {
  font-size: clamp(1.88rem, 2.52vw, 2.8rem) !important;
  font-weight: 650 !important;
  line-height: 1.02 !important;
}

.ending-side .ending-copy {
  align-content: start !important;
  justify-items: start !important;
  padding: 42px 30px 34px !important;
}

.ending-side .ending-copy p:last-child {
  width: min(100%, 24em) !important;
  margin: 0 !important;
}

.ending-insight-panel {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.04fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
}

.ending-gpa-card,
.ending-competition-card,
.ending-internship-card {
  grid-row: 1 !important;
}

.ending-gpa-card {
  grid-column: 1 !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
}

.ending-competition-card {
  grid-column: 2 !important;
}

.ending-internship-card {
  grid-column: 3 !important;
}

.ending-stat-list {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
}

.ending-stat-list div {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 2px !important;
  row-gap: 2px !important;
  min-width: 0 !important;
  align-items: baseline !important;
}

.ending-stat-list dt {
  color: color-mix(in oklch, var(--ink), var(--muted) 22%) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

.ending-stat-list dd {
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

.ending-support-button {
  height: 92px !important;
  min-height: 92px !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
}

.ending-support-button span:last-child {
  gap: 4px !important;
  align-content: center !important;
}

.ending-support-button strong {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.14rem !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.ending-support-button em {
  width: 100% !important;
  margin: 2px 0 0 !important;
  font-size: 0.76rem !important;
  line-height: 1.24 !important;
  white-space: normal !important;
}

.ending-link-actions .start-small-card {
  min-height: 68px !important;
  align-items: center !important;
}

.ending-link-actions .start-small-card em {
  display: none !important;
}

/* Ending page action polish: align bottom controls and keep top cards clear of artwork. */
.ending-insight-panel {
  left: 812px !important;
  width: 440px !important;
  max-width: 440px !important;
  min-height: 0 !important;
  height: 154px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

.ending-insight-card {
  min-height: 0 !important;
  gap: 5px !important;
  padding: 9px 10px !important;
}

.ending-insight-card span {
  font-size: 0.8rem !important;
  line-height: 1.05 !important;
}

.ending-insight-card strong {
  font-size: 0.84rem !important;
  line-height: 1.14 !important;
}

.ending-insight-card em {
  font-size: 0.62rem !important;
  line-height: 1.22 !important;
}

.ending-stat-list {
  gap: 6px !important;
}

.ending-stat-list div {
  column-gap: 1px !important;
}

.ending-stat-list dt {
  font-size: 0.58rem !important;
}

.ending-stat-list dd {
  font-size: 0.68rem !important;
}

.ending-title-icon {
  width: 76px !important;
  height: 76px !important;
  margin-top: 18px !important;
  border-color: color-mix(in oklch, var(--line-strong), var(--ink) 10%) !important;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), transparent 6%), color-mix(in oklch, var(--panel-soft), black 5%)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 88%),
    0 10px 24px oklch(0 0 0 / 0.18) !important;
}

.ending-title-icon img {
  width: 66px !important;
  height: 66px !important;
}

.ending-summary,
.ending-actions {
  width: 100% !important;
}

.ending-actions .start-entry-button,
.ending-actions .start-small-card,
.ending-link-actions {
  width: 100% !important;
}

.ending-actions .start-entry-button.is-primary,
.ending-support-button,
.ending-link-actions .start-small-card {
  border-color: color-mix(in oklch, var(--line-strong), var(--ink) 12%) !important;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 5%), color-mix(in oklch, var(--panel-soft), black 8%)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 90%),
    0 10px 22px oklch(0 0 0 / 0.16) !important;
}

.ending-support-button {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 12px 16px !important;
}

.ending-support-button .start-small-icon {
  width: 62px !important;
  height: 62px !important;
}

.ending-support-button span:last-child {
  transform: translateX(35px) !important;
  padding-right: 35px !important;
}

.ending-support-button strong {
  font-size: 1.26rem !important;
  line-height: 1.06 !important;
}

.ending-support-button em {
  margin-top: 7px !important;
  font-size: 0.84rem !important;
  line-height: 1.24 !important;
  transform: translateY(3px) !important;
}

.ending-link-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ending-link-actions .start-small-icon {
  width: 46px !important;
  height: 46px !important;
}

.ending-link-actions .start-small-card {
  min-height: 76px !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px 12px !important;
}

.ending-link-actions .start-small-card strong {
  font-size: 1.02rem !important;
}

.ending-side .music-dock {
  width: 100% !important;
  max-width: none !important;
}

/* Final ending control tuning: lighter route badge and larger action icons. */
.ending-title-icon {
  width: 88px !important;
  height: 88px !important;
  margin-top: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px oklch(0 0 0 / 0.32)) !important;
}

.ending-title-icon img {
  width: 82px !important;
  height: 82px !important;
}

.ending-actions .ending-support-button.start-small-card.is-warm .start-small-icon {
  width: 64px !important;
  height: 64px !important;
}

.ending-actions .ending-link-actions .start-small-card .start-small-icon {
  width: 50px !important;
  height: 50px !important;
}

.ending-actions .ending-link-actions .start-small-card {
  grid-template-columns: 54px minmax(0, 1fr) !important;
}

/* Ending page final alignment: title icon column, side copy, and action widths. */
.ending-title-block {
  grid-template-columns: 62px minmax(0, 1fr) !important;
  grid-template-areas:
    "eyebrow title"
    "icon title" !important;
  column-gap: 16px !important;
  row-gap: 6px !important;
  align-items: start !important;
}

.ending-title-block .kicker {
  grid-area: eyebrow !important;
  align-self: end !important;
  margin: 0 !important;
}

.ending-title-icon {
  grid-area: icon !important;
  width: 62px !important;
  height: 62px !important;
  margin-top: 0 !important;
}

.ending-title-icon img {
  width: 58px !important;
  height: 58px !important;
}

.ending-title-copy {
  grid-area: title !important;
}

.ending-side {
  padding-top: 20px !important;
  box-sizing: border-box !important;
}

.ending-side .ending-copy {
  max-height: 548px !important;
  align-content: start !important;
}

.ending-summary,
.ending-actions,
.ending-actions .start-entry-button,
.ending-actions .start-small-card,
.ending-link-actions {
  width: 390px !important;
  max-width: 390px !important;
}

.ending-summary,
.ending-side .game-music-dock {
  transform: translateY(3pt) !important;
}

.ending-link-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ending-actions .ending-support-button.start-small-card {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  min-height: 96px !important;
  height: 96px !important;
}

.ending-actions .ending-support-button.start-small-card.is-warm .start-small-icon {
  width: 70px !important;
  height: 70px !important;
}

.ending-actions .ending-support-button.start-small-card span:last-child {
  transform: translateX(calc(20px - 15pt)) translateY(2px) !important;
  padding-right: 0 !important;
}

.ending-support-button strong {
  font-size: 1.98rem !important;
  line-height: 1.04 !important;
}

.ending-support-button em {
  margin-top: 9px !important;
  font-size: 0.96rem !important;
  line-height: 1.22 !important;
  transform: translateX(-10pt) translateY(calc(4px + 4pt - 5pt)) !important;
}

.ending-actions .ending-link-actions .start-small-card .start-small-icon {
  width: 54px !important;
  height: 54px !important;
  transform: translateX(2pt) !important;
}

.ending-actions .ending-link-actions .start-small-card strong {
  font-size: 1.08rem !important;
  line-height: 1.08 !important;
}

.ending-actions .ending-support-button.start-small-card strong {
  font-size: 1.188rem !important;
  line-height: 1.06 !important;
}

.ending-actions .ending-link-actions .start-small-card {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

/* Ending page final polish: match game music dock and rebalance title/artwork scale. */
.ending-title-block {
  grid-template-columns: 162px minmax(0, 1fr) !important;
  column-gap: 30px !important;
  grid-template-areas: "icon title" !important;
}

.ending-title-icon {
  width: 162px !important;
  height: 162px !important;
  align-self: start !important;
}

.ending-title-icon img {
  width: 150px !important;
  height: 150px !important;
}

.ending-side .ending-copy p:last-child {
  font-size: clamp(1.28rem, 1.3vw, 1.44rem) !important;
  line-height: calc(1.84em - 7pt) !important;
  transform: translateY(-10pt) !important;
  white-space: pre-line !important;
}

.ending-shell[data-ending-id="elite_recommendation_postgrad"] .ending-side .ending-copy p:last-child,
.ending-shell[data-ending-id="elite_exam_postgrad"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.2rem, 1.22vw, 1.35rem) !important;
}

.ending-shell[data-ending-id="local_postgrad"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.36rem, 1.38vw, 1.52rem) !important;
}

.ending-shell[data-ending-id="recommendation_failed"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.34rem, 1.36vw, 1.5rem) !important;
}

.ending-shell[data-ending-id="postgrad_retry"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.3rem, 1.32vw, 1.46rem) !important;
}

.ending-shell[data-ending-id="steady_postgrad"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.12rem, 1.14vw, 1.26rem) !important;
}

.ending-shell[data-ending-id="overseas_elite"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.18rem, 1.2vw, 1.32rem) !important;
}

.ending-shell[data-ending-id="overseas_strong"] .ending-side .ending-copy p:last-child,
.ending-shell[data-ending-id="overseas_stable"] .ending-side .ending-copy p:last-child,
.ending-shell[data-ending-id="overseas_safety"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.26rem, 1.28vw, 1.4rem) !important;
}

.ending-shell[data-ending-id="overseas_failed"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.18rem, 1.2vw, 1.32rem) !important;
}

.ending-shell[data-ending-id="civil_ministry"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.24rem, 1.26vw, 1.4rem) !important;
}

.ending-shell[data-ending-id="architecture_master"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.24rem, 1.26vw, 1.4rem) !important;
}

.ending-shell[data-ending-id="architecture_small"] .ending-side .ending-copy p:last-child,
.ending-shell[data-ending-id="living_cost_break"] .ending-side .ending-copy p:last-child,
.ending-shell[data-ending-id="forced_suspension"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.24rem, 1.26vw, 1.4rem) !important;
}

.ending-shell[data-ending-id="pressure_collapse"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.18rem, 1.2vw, 1.34rem) !important;
}

.ending-shell[data-ending-id="career_sales"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.14rem, 1.14vw, 1.29rem) !important;
}

.ending-shell[data-ending-id="stable_graduation"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.08rem, 1.09vw, 1.21rem) !important;
}

.ending-shell[data-ending-id="graduation_failed"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.05rem, 1.07vw, 1.18rem) !important;
}

.ending-shell[data-ending-id="career_startup"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1rem, 1.01vw, 1.12rem) !important;
}

.ending-shell[data-ending-id="career_illustrator"] .ending-side .ending-copy p:last-child {
  font-size: clamp(1.22rem, 1.24vw, 1.37rem) !important;
}

.ending-illustration {
  top: 224px !important;
  left: 0 !important;
  width: min(1260px, 100%) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
}

.ending-image-frame {
  inset: 0 !important;
  place-items: start !important;
}

.ending-illustration img {
  object-fit: contain !important;
  object-position: left top !important;
}

.ending-actions .ending-support-button.start-small-card strong {
  font-size: 1.741rem !important;
  line-height: 1.06 !important;
  transform: translateX(-5pt) !important;
}

.ending-side .game-music-dock {
  width: 390px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ending-side .game-music-dock .track-card {
  min-height: 72px !important;
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  grid-template-rows: auto 26px !important;
  gap: 4px 9px !important;
  padding: 7px 9px 7px 7px !important;
  background: var(--panel) !important;
  border: 2px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 8px 18px oklch(0 0 0 / 0.12) !important;
}

.ending-side .game-music-dock .track-card::before {
  display: none !important;
}

.ending-side .game-music-dock .album-disc {
  width: 58px !important;
  height: 58px !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.ending-side .game-music-dock .track-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 2px !important;
  align-self: end !important;
}

.ending-side .game-music-dock .music-station {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  color: var(--ink) !important;
  background: var(--panel-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  font-size: 0.58rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.ending-side .game-music-dock .music-timeline {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  min-height: 26px !important;
}

.ending-side .game-music-dock .music-toggle-button,
.ending-side .game-music-dock .music-skip-button {
  width: 32px !important;
  height: 32px !important;
  color: oklch(0 0 0) !important;
  background: linear-gradient(180deg, #f2f2f2, #d8d8d8) !important;
  border: 2px solid #9b9b9b !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    0 2px 0 rgb(0 0 0 / 0.18) !important;
}

.ending-side .game-music-dock .music-skip-button.is-prev {
  left: calc(50% - 38px) !important;
}

.ending-side .game-music-dock .music-skip-button.is-next {
  left: calc(50% + 38px) !important;
}

.ending-side .game-music-dock .music-skip-button,
.ending-side .game-music-dock .music-skip-icon {
  color: oklch(0 0 0) !important;
}

.ending-side .game-music-dock .music-toggle-icon {
  transform: scale(0.74) !important;
}

.ending-side .game-music-dock .music-toggle-icon::before,
.ending-side .game-music-dock .music-toggle-icon::after,
.ending-side .game-music-dock .music-skip-icon::after {
  background: oklch(0 0 0) !important;
}

.ending-side .game-music-dock .music-toggle-button.is-paused .music-toggle-icon::before {
  background: transparent !important;
  border-left-color: oklch(0 0 0) !important;
}

.ending-side .game-music-dock .music-skip-button.is-prev .music-skip-icon::before {
  border-right-color: oklch(0 0 0) !important;
}

.ending-side .game-music-dock .music-skip-button.is-next .music-skip-icon::before {
  border-left-color: oklch(0 0 0) !important;
}

/* Current request: dark ending page should sit on a deeper black surface. */
:root[data-theme="dark"] .ending-shell {
  background:
    linear-gradient(oklch(0.3 0.012 252 / 0.12) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.3 0.012 252 / 0.12) 1px, transparent 1px),
    linear-gradient(180deg, oklch(0.085 0.012 252), oklch(0.04 0.01 256)) !important;
  background-size: 12px 12px, 12px 12px, auto !important;
}

:root[data-theme="dark"] .ending-shell::before {
  background:
    radial-gradient(circle at 22% 18%, oklch(0.28 0.038 82 / 0.12), transparent 34%),
    radial-gradient(circle at 78% 74%, color-mix(in oklch, var(--blue), transparent 90%), transparent 30%);
}

:root[data-theme="dark"] .ending-shell::after {
  background:
    linear-gradient(90deg, transparent, oklch(1 0 0 / 0.045), transparent),
    linear-gradient(oklch(0.34 0.012 252 / 0.1) 1px, transparent 1px);
  background-size: 100% 100%, 12px 12px;
}

:root[data-theme="dark"] .ending-illustration,
:root[data-theme="dark"] .ending-side .ending-copy,
:root[data-theme="dark"] .ending-insight-panel,
:root[data-theme="dark"] .ending-side .game-music-dock .track-card {
  background:
    linear-gradient(180deg, oklch(0.155 0.012 252 / 0.94), oklch(0.082 0.01 256 / 0.96)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.07),
    0 18px 42px oklch(0 0 0 / 0.32) !important;
}

:root[data-theme="dark"] .ending-image-frame,
:root[data-theme="dark"] .ending-insight-card {
  background: oklch(0.075 0.01 256 / 0.88) !important;
}

/* Wanli Road map and event pages. */
.wanli-road-modal {
  width: min(980px, calc(100vw - 32px));
  max-height: min(890px, calc(100dvh - 20px));
  overflow: auto;
  padding-top: 32px;
}

.wanli-road-copy h2,
.wanli-road-event-modal .modal-copy h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wanli-road-copy .modal-title-icon,
.wanli-road-event-modal .modal-title-icon {
  width: 82px;
  height: 82px;
  border-radius: 7px;
  background: var(--panel-soft);
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 10%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white, transparent 70%),
    0 12px 26px oklch(0.18 0.04 250 / 0.1);
}

.wanli-road-copy .modal-title-icon img,
.wanli-road-event-modal .modal-title-icon img {
  width: 70px;
  height: 70px;
}

.wanli-road-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.wanli-road-stat {
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 42%);
}

.wanli-road-stat span,
.wanli-road-record span,
.wanli-road-node em,
.wanli-road-current-card em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.wanli-road-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.1;
}

.wanli-road-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}

.wanli-road-node {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 48px auto auto;
  justify-items: center;
  gap: 4px;
  min-height: 116px;
  padding: 10px 8px;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 10%);
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 6%), color-mix(in oklch, var(--panel-soft), var(--panel) 24%));
  color: var(--ink);
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.18),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 3px 0 rgb(43 52 66 / 0.16),
    0 10px 18px oklch(0.18 0.04 250 / 0.1);
  cursor: default;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out, background 180ms ease-out;
}

.wanli-road-node:hover:not(:disabled) {
  border-color: var(--button-hover-border-bright);
  box-shadow:
    inset 0 -1px 0 rgb(43 52 66 / 0.24),
    inset 0 0 0 1px rgb(255 255 255 / 0.18),
    0 4px 0 rgb(43 52 66 / 0.2),
    0 14px 24px oklch(0.18 0.04 250 / 0.14);
  transform: translateY(-3px);
}

.wanli-road-node.is-current {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.wanli-road-node.is-done {
  border-color: var(--good);
}

.wanli-road-node.is-locked {
  opacity: 0.58;
}

.wanli-road-node-dot {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: var(--panel-soft);
}

.wanli-road-node-dot img,
.wanli-road-current-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.wanli-road-node strong {
  font-size: 14px;
  line-height: 1;
}

.wanli-road-node em {
  width: 100%;
  min-height: 34px;
  text-align: center;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.wanli-road-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 12px;
}

.wanli-road-current,
.wanli-road-records {
  min-height: 214px;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 10%);
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 6%), color-mix(in oklch, var(--panel-soft), var(--panel) 24%));
  box-shadow: 0 12px 26px oklch(0.18 0.04 250 / 0.1);
  padding: 12px;
}

.wanli-road-current-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.wanli-road-current-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 10%);
  border-radius: 7px;
  background: var(--panel);
}

.wanli-road-current-card strong,
.wanli-road-record strong,
.wanli-road-complete strong,
.wanli-road-empty strong {
  display: block;
  line-height: 1.25;
}

.wanli-road-current-card strong {
  font-size: 1.22rem;
}

.wanli-road-current-card p,
.wanli-road-complete p,
.wanli-road-empty p {
  margin: 8px 0;
  line-height: 1.65;
}

.wanli-road-warning,
.wanli-road-block {
  margin: 12px 0 0;
  color: var(--danger);
  font-weight: 700;
}

.wanli-road-block {
  color: var(--muted);
}

.wanli-road-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.wanli-road-action-chip {
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 12%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 32%);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
}

.wanli-road-action-chip.is-danger {
  color: var(--danger);
}

.wanli-road-record-list {
  display: grid;
  gap: 7px;
  max-height: 204px;
  overflow: auto;
}

.wanli-road-record,
.wanli-road-empty,
.wanli-road-complete {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 36%);
}

.wanli-road-record {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.wanli-road-record b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 12%);
  border-radius: 6px;
  background: var(--panel);
  font-size: 12px;
  line-height: 1;
}

.wanli-road-return {
  position: absolute;
  top: calc(18px + 20pt);
  right: 22px;
  min-width: 92px;
  min-height: 42px;
  padding: 8px 16px;
  z-index: 2;
}

.wanli-road-event-modal {
  width: min(660px, calc(100vw - 32px));
  padding-top: 40px;
}

.wanli-road-event-delta {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .wanli-road-summary,
  .wanli-road-lower {
    grid-template-columns: 1fr;
  }

  .wanli-road-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* Current request: Wanli Road map icon scale and freshman pre-open copy. */
.wanli-road-preopen {
  max-width: 58em;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.18vw, 1.22rem);
  font-weight: 700;
  line-height: 1.72;
}

.wanli-road-map {
  gap: 4px !important;
  margin: 6px 0 6px !important;
}

.wanli-road-summary {
  gap: 5px !important;
  margin: 8px 0 6px !important;
}

.wanli-road-lower {
  gap: 7px !important;
}

.wanli-road-node {
  grid-template-rows: 106px auto auto !important;
  gap: 2px !important;
  min-height: 186px !important;
  padding: 6px 5px 8px !important;
}

.wanli-road-node-dot {
  width: 106px !important;
  height: 106px !important;
}

.wanli-road-node-dot img {
  width: 92px !important;
  height: 92px !important;
}

.wanli-road-node strong {
  margin-top: 0 !important;
  font-size: 23px !important;
  line-height: 1.05 !important;
  transform: translateY(13pt) !important;
}

.wanli-road-current-card {
  grid-template-columns: 66px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 10px 12px !important;
}

.wanli-road-current-card > div {
  align-self: center !important;
  transform: translateY(4pt) !important;
}

.wanli-road-current-card em {
  display: block !important;
  color: var(--muted) !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  transform: translateY(-4pt) !important;
}

.wanli-road-current-card strong {
  margin-top: 3px !important;
  font-size: 1.56rem !important;
  line-height: 1.08 !important;
}

.wanli-road-current-card p {
  grid-column: 1 / -1 !important;
  margin: 8px 0 0 !important;
  color: color-mix(in oklch, var(--ink), var(--muted) 22%) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
}

.wanli-road-current-icon {
  width: 66px !important;
  height: 66px !important;
}

.wanli-road-current-icon img {
  width: 48px !important;
  height: 48px !important;
}

.wanli-road-current {
  display: flex !important;
  flex-direction: column !important;
}

.wanli-road-actions {
  margin-top: auto !important;
  padding-top: 12px !important;
}

.wanli-road-node em {
  margin-top: 0 !important;
  min-height: 36px !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
  transform: translateY(13pt) !important;
}

/* Ending memory video handoff. */
.ending-memory-video-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background: oklch(0.03 0.006 255);
  color: white;
}

.ending-memory-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: oklch(0.03 0.006 255);
  animation: endingMemoryVideoIn 1500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, filter, transform;
}

@keyframes endingMemoryVideoIn {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: scale(1.006);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.ending-memory-lyric-line {
  position: fixed;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 50%;
  width: min(980px, 62vw);
  margin: 0;
  transform: translateX(-50%);
  overflow: hidden;
  color: oklch(0.98 0.01 86);
  font-size: clamp(1.18rem, 2.58vw, 1.72rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow:
    0 2px 4px oklch(0 0 0 / 0.72),
    0 0 18px oklch(0 0 0 / 0.46);
  white-space: nowrap;
  pointer-events: none;
}

.ending-memory-lyric-line.is-hidden {
  opacity: 0;
}

.ending-memory-lyric-line.is-showing {
  animation: endingMemoryLyricReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ending-memory-video-shell.has-skip .ending-memory-lyric-line {
  top: calc(env(safe-area-inset-top, 0px) + 62px);
}

@keyframes endingMemoryLyricReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.ending-memory-skip-button {
  position: fixed;
  z-index: 4;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  max-width: min(320px, calc(100vw - 36px));
  color: oklch(0.96 0.006 248);
  background: linear-gradient(135deg, oklch(0.18 0.04 248 / 0.92), oklch(0.08 0.02 256 / 0.92));
  border-color: oklch(0.86 0.035 78 / 0.72);
  box-shadow: 0 12px 28px oklch(0 0 0 / 0.34), inset 0 0 0 1px oklch(1 0 0 / 0.12);
}

.ending-memory-skip-button:is(:hover, :focus-visible):not(:disabled) {
  background: linear-gradient(135deg, oklch(0.18 0.04 248 / 0.92), oklch(0.08 0.02 256 / 0.92)) !important;
  border-color: oklch(0.86 0.035 78 / 0.72) !important;
  box-shadow:
    0 12px 28px oklch(0 0 0 / 0.34),
    inset 0 0 0 1px oklch(1 0 0 / 0.12) !important;
}

.ending-memory-video-actions {
  position: fixed;
  z-index: 3;
  left: 49%;
  top: 78%;
  width: min(420px, calc(100vw - 36px));
  transform: translate(-52%, -50%);
  pointer-events: none;
}

.ending-memory-complete-button {
  width: 100%;
  min-height: 62px;
  padding: 14px 24px;
  color: oklch(0.96 0.006 248);
  background:
    linear-gradient(135deg, oklch(0.18 0.04 248 / 0.94), oklch(0.08 0.02 256 / 0.94));
  border: 2px solid oklch(0.86 0.035 78 / 0.72);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.12),
    2px 2px 0 oklch(0.2 0.006 250),
    0 12px 28px oklch(0 0 0 / 0.34);
  pointer-events: auto;
  text-align: center;
  filter: drop-shadow(0 12px 24px oklch(0 0 0 / 0.34));
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms ease-out,
    background 180ms ease-out,
    filter 180ms ease-out;
}

.ending-memory-complete-button::after,
.ending-memory-complete-button .start-entry-arrow {
  display: none;
}

.ending-memory-complete-button:hover:not(:disabled),
.ending-memory-complete-button:focus-visible:not(:disabled) {
  background:
    linear-gradient(145deg, oklch(0.34 0.105 248 / 0.98), oklch(0.2 0.13 256 / 0.98));
  border-color: oklch(0.8 0.12 248 / 0.78);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.14),
    2px 2px 0 oklch(0.2 0.006 250),
    0 16px 32px oklch(0 0 0 / 0.36),
    0 0 16px oklch(0.58 0.15 248 / 0.16);
  filter: saturate(1.02) brightness(1.02) drop-shadow(0 12px 24px oklch(0 0 0 / 0.34));
  transform: translateY(-3px);
}

.ending-memory-complete-button[hidden] {
  display: grid;
}

.ending-memory-complete-button .start-entry-copy {
  display: grid;
  justify-items: center;
}

.ending-memory-complete-button .start-entry-copy strong {
  font-size: clamp(1.12rem, 2.4vw, 1.38rem);
  line-height: 1.18;
}

.ending-memory-video-shell.is-exiting {
  animation: endingMemoryVideoExit 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

@keyframes endingMemoryVideoExit {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    filter: blur(1px);
    transform: translate3d(0, 6px, 0) scale(0.998);
  }
}

.ending-memory-audio-host {
  position: fixed;
  z-index: 4;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 24px));
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, 14px, 0) scale(0.985);
  transition:
    opacity 1360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.ending-memory-video-shell.is-audio-visible .ending-memory-audio-host {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.ending-memory-video-shell.is-audio-faded .ending-memory-audio-host {
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(0.985);
}

.ending-memory-audio-host .ending-memory-music-dock {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ending-memory-audio-host .track-card {
  min-height: 68px;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ending-memory-audio-host .track-card::before {
  display: none;
}

.ending-memory-audio-host .album-disc {
  width: 58px;
  height: 58px;
  grid-column: 1;
  grid-row: 1;
}

.ending-memory-audio-host .track-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  gap: 4px;
  transform: translateY(3px);
  text-shadow: 0 2px 6px oklch(0 0 0 / 0.62);
}

.ending-memory-audio-host .track-copy strong {
  color: oklch(0.98 0.008 90);
  font-size: 0.98rem;
  line-height: 1.12;
}

.ending-memory-audio-host .track-copy [data-track-meta] {
  color: oklch(0.88 0.012 92 / 0.9);
  font-size: 0.74rem;
  line-height: 1.18;
}

.ending-memory-audio-host .music-station,
.ending-memory-audio-host .music-timeline,
.ending-memory-audio-host .music-time,
.ending-memory-audio-host .lyric-line,
.ending-memory-audio-host .music-status {
  display: none !important;
}


/* Current request: ending page final frame and action sizing. */
.ending-illustration {
  top: 224px !important;
  left: 8px !important;
  width: min(1228px, calc(100% - 18px)) !important;
  height: calc(100% - 224px) !important;
  aspect-ratio: auto !important;
  display: grid !important;
  padding: 14px !important;
  border: 2px solid color-mix(in oklch, var(--line-strong), var(--ink) 14%) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 6%), color-mix(in oklch, var(--panel-soft), black 6%)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.24),
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 88%),
    0 4px 0 color-mix(in oklch, var(--line-strong), black 18%),
    0 18px 34px oklch(0 0 0 / 0.18) !important;
}

.ending-image-frame {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 20%) !important;
  border-radius: 5px !important;
  background: color-mix(in oklch, var(--panel), black 8%) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 90%) !important;
}

.ending-illustration img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.ending-actions .ending-return-button.start-entry-button.is-primary,
.ending-actions .ending-share-direct-button {
  min-height: 85px !important;
  height: 85px !important;
  grid-template-columns: 48px minmax(0, 1fr) 28px !important;
  gap: 10px !important;
  padding: 11px 14px !important;
}

.ending-actions .ending-return-button .start-entry-icon,
.ending-actions .ending-share-direct-button .start-entry-icon {
  width: 46px !important;
  height: 46px !important;
}

.ending-actions .ending-return-button .start-entry-copy strong,
.ending-actions .ending-share-direct-button .start-entry-copy strong {
  font-size: 1.62rem !important;
  line-height: 1.05 !important;
}

.ending-actions .ending-return-button .start-entry-copy em,
.ending-actions .ending-share-direct-button .start-entry-copy em {
  font-size: 0.84rem !important;
  line-height: 1.16 !important;
}

.ending-actions .ending-share-direct-button {
  min-height: 78px !important;
  height: 78px !important;
  grid-template-columns: 43px minmax(0, 1fr) 28px !important;
  gap: 15px !important;
  padding: 10px 14px !important;
}

.ending-actions .ending-share-direct-button .start-entry-icon {
  width: 42px !important;
  height: 42px !important;
}

.ending-actions .ending-share-direct-button .start-entry-arrow {
  justify-self: end !important;
}

.ending-actions .ending-return-button .start-entry-arrow,
.ending-actions .ending-share-direct-button .start-entry-arrow {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

.ending-actions .ending-share-direct-button .start-entry-copy strong {
  font-size: 1.48rem !important;
  line-height: 1.02 !important;
}

.ending-actions .ending-share-direct-button .start-entry-copy em {
  font-size: 0.78rem !important;
  line-height: 1.12 !important;
}

.ending-actions .ending-support-button.start-small-card {
  min-height: 70px !important;
  height: 70px !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}

.ending-actions .ending-support-button.start-small-card.is-warm .start-small-icon {
  width: 52px !important;
  height: 52px !important;
  transform: translateY(-3pt) !important;
}

.ending-actions .ending-support-button.start-small-card strong {
  font-size: 1.38rem !important;
  transform: translateY(3pt) !important;
}

.ending-actions .ending-support-button.start-small-card em {
  color: oklch(0.98 0.02 72) !important;
  font-size: 0.78rem !important;
  line-height: 1.18 !important;
  opacity: 0.72 !important;
  transform: translateY(1pt) !important;
}

.ending-actions .ending-return-button .start-entry-copy,
.ending-actions .ending-share-direct-button .start-entry-copy,
.ending-actions .ending-support-button.start-small-card span:last-child {
  display: grid !important;
  min-width: 0 !important;
  justify-items: start !important;
  text-align: left !important;
  transform: none !important;
  padding: 0 !important;
}

.ending-actions .ending-return-button .start-entry-copy strong,
.ending-actions .ending-return-button .start-entry-copy em,
.ending-actions .ending-share-direct-button .start-entry-copy strong,
.ending-actions .ending-share-direct-button .start-entry-copy em,
.ending-actions .ending-support-button.start-small-card strong,
.ending-actions .ending-support-button.start-small-card em {
  display: block !important;
  justify-self: start !important;
  width: 100% !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.ending-actions .ending-link-actions .start-small-card {
  min-height: 58px !important;
  height: 58px !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 7px 9px !important;
}

.ending-actions .ending-link-actions .start-small-card .start-small-icon {
  width: 42px !important;
  height: 42px !important;
}

.ending-actions .ending-link-actions .start-small-card .start-icon-author {
  transform: translateX(4pt) !important;
}

.ending-actions .ending-link-actions .start-small-card strong {
  font-size: 0.96rem !important;
  line-height: 1.04 !important;
}

.ending-actions .ending-link-actions .start-small-card:hover {
  color: var(--start-panel-ink) !important;
  background: var(--start-button-bg-hover) !important;
  border-color: var(--start-button-border-hover) !important;
  box-shadow:
    inset 0 0 0 1px var(--start-button-inner),
    0 16px 30px var(--start-shadow),
    0 0 16px var(--start-button-glow) !important;
  transform: translateY(-3px) !important;
}

/* Current request: larger ending icon, longer insight cards, and roomier ending title. */
.ending-title-block {
  width: 790px !important;
  grid-template-columns: 211px minmax(0, 1fr) !important;
  column-gap: 30px !important;
}

.ending-title-block h1 {
  gap: 14px !important;
}

.ending-title-icon {
  width: 211px !important;
  height: 211px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  border: 2px solid color-mix(in oklch, var(--line-strong), var(--ink) 14%) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 6%), color-mix(in oklch, var(--panel-soft), black 6%)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 88%),
    0 4px 0 color-mix(in oklch, var(--line-strong), black 18%),
    0 16px 30px oklch(0 0 0 / 0.18) !important;
}

.ending-title-icon img {
  width: 195px !important;
  height: 195px !important;
}

.ending-title-main {
  font-size: clamp(3.72rem, 5.22vw, 5.68rem) !important;
  line-height: 0.94 !important;
}

.ending-title-detail {
  font-size: clamp(2.1rem, 2.82vw, 3.12rem) !important;
  line-height: 1.16 !important;
}

.ending-insight-panel {
  width: calc(100% - 822px) !important;
  max-width: none !important;
}

/* Current request: trim ending icon frame and align it with the illustration. */
.ending-title-block {
  left: 8px !important;
  grid-template-columns: 179px minmax(0, 1fr) !important;
}

.ending-title-icon {
  width: 179px !important;
  height: 179px !important;
  align-self: start !important;
  padding: 6px !important;
}

.ending-title-icon img {
  width: 166px !important;
  height: 166px !important;
}

/* Current request: enlarge ending title and align insight card edge with illustration. */
.ending-title-block h1 {
  gap: 20px !important;
}

.ending-title-main {
  font-size: clamp(3.96rem, 5.55vw, 6rem) !important;
  line-height: 0.96 !important;
}

.ending-title-detail {
  font-size: clamp(2.24rem, 3.02vw, 3.36rem) !important;
  line-height: 1.22 !important;
}

.ending-insight-panel {
  width: min(424px, calc(100% - 822px)) !important;
  max-width: 424px !important;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.14fr) minmax(0, 1.14fr) !important;
  padding-right: 0 !important;
}

/* Current request: lower the ending title text without moving the icon. */
.ending-title-copy {
  transform: translateY(14pt) !important;
}

/* Current request: collapse ending stats into one aligned profile box. */
.ending-insight-panel {
  height: 179px !important;
  min-height: 179px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  padding: 10px 12px !important;
}

.ending-profile-card {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  align-content: center !important;
  padding: 14px 16px !important;
}

.ending-profile-card .ending-stat-list {
  gap: 10px !important;
}

.ending-profile-card .ending-stat-list div {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 4px !important;
  align-items: baseline !important;
}

.ending-profile-card .ending-stat-list dt,
.ending-profile-card .ending-stat-list dd {
  font-size: 0.88rem !important;
  line-height: 1.12 !important;
}

/* Current request: row-based ending stats with icons and smaller ending icon art. */
.ending-title-icon img {
  width: 149px !important;
  height: 149px !important;
}

.ending-insight-panel {
  width: min(424px, calc(100% - 822px)) !important;
  max-width: 424px !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border: 2px solid color-mix(in oklch, var(--line-strong), var(--ink) 14%) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel), white 6%), color-mix(in oklch, var(--panel-soft), black 6%)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    inset 0 0 0 1px color-mix(in oklch, var(--ink), transparent 88%),
    0 4px 0 color-mix(in oklch, var(--line-strong), black 18%),
    0 16px 30px oklch(0 0 0 / 0.18) !important;
}

.ending-insight-panel > .ending-stat-list {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  align-content: center !important;
}

.ending-insight-panel > .ending-stat-list div {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 28px max-content minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;
  border: 1px solid color-mix(in oklch, var(--line), var(--ink) 16%) !important;
  border-radius: 5px !important;
  background: color-mix(in oklch, var(--panel), transparent 14%) !important;
}

.ending-stat-icon {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
}

.ending-stat-icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.ending-insight-panel > .ending-stat-list dt,
.ending-insight-panel > .ending-stat-list dd {
  font-size: 1rem !important;
  line-height: 1.08 !important;
}

/* Current request: shorten ending stats panel and lift stat rows. */
.ending-insight-panel {
  left: auto !important;
  right: 10px !important;
  width: min(280px, calc(100% - 822px)) !important;
  max-width: 280px !important;
}

.ending-insight-panel > .ending-stat-list div {
  grid-template-columns: 24px max-content minmax(0, 1fr) !important;
  transform: translateY(-2pt) !important;
}

/* Current request: save the ending title detail offset and align the stats panel to the illustration edge. */
.ending-title-detail {
  transform: translateX(50pt) !important;
}

.ending-shell[data-ending-id="elite_exam_postgrad"][data-ending-route-option-id="postgrad_old_eight"] .ending-title-detail {
  font-size: clamp(2.08rem, 2.82vw, 3.14rem) !important;
  transform: translateX(20pt) !important;
}

.ending-insight-panel {
  right: max(10px, calc(100% - 1236px)) !important;
  width: min(293px, calc(100% - 822px)) !important;
  max-width: 293px !important;
}

/* Current request: nudge ending footer link labels right and down. */
.ending-actions .ending-link-actions .start-small-card > span:last-child {
  transform: translate(5pt, 2pt) !important;
}

/* Current request: move the ending right column left as one aligned stack. */
.ending-side {
  transform: translate(-10pt, -10pt) !important;
}

/* Current request: keep the architecture-life copy tighter than other fixed-flow cards. */
.modal-card.opening-fixed-architecture_life_start .modal-copy p {
  line-height: 1.42 !important;
}

/* Current request: architecture-life button uses the main dark primary hover treatment. */
.modal-card.opening-fixed-architecture_life_start .modal-option {
  color: white !important;
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62)) !important;
  border-color: oklch(1 0 0 / 0.22) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.14),
    0 10px 24px oklch(0 0 0 / 0.18) !important;
}

.modal-card.opening-fixed-architecture_life_start .modal-option:hover:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  border-color: oklch(0.78 0.13 248 / 0.68) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 16px 36px oklch(0 0 0 / 0.18) !important;
  transform: translateY(-2px) !important;
}

/* Current request: match the tighter year-start copy rhythm on sophomore and senior prompts. */
.modal-year_start.year-start-2 .modal-copy,
.modal-year_start.year-start-4 .modal-copy {
  gap: 6px !important;
}

.modal-year_start.year-start-2 .modal-copy p,
.modal-year_start.year-start-4 .modal-copy p {
  line-height: 1.42 !important;
  margin-block: 0 !important;
}

/* Current request: light-mode black primary buttons use black text on hover. */
:root:not([data-theme="dark"]) :is(
  .pixel-button.is-primary,
  .mini-button.is-primary,
  .action-button.is-primary,
  .modal-option.is-primary,
  .start-entry-button.is-primary
):is(:hover, :focus-visible):not(:disabled) {
  color: var(--ink, oklch(0.045 0 0)) !important;
}

/* Current request: portfolio dialog number scale, board density, and scrollable directory. */
.portfolio-summary-grid .portfolio-stat strong {
  font-size: clamp(1.72rem, 2.45vw, 2.72rem);
  line-height: 0.98;
}

.portfolio-directory > .section-head.compact > span {
  color: var(--ink);
  font-size: clamp(1.22rem, 1.7vw, 1.74rem);
  font-weight: 900;
  line-height: 1;
}

.portfolio-directory {
  min-height: 0;
}

.portfolio-work-list {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.portfolio-work-button {
  min-height: 64px;
  flex: 0 0 auto;
}

.portfolio-work-button > * {
  transform: translateY(-2pt);
}

.portfolio-board-panel {
  padding-block: 2px;
  gap: 2px;
}

.portfolio-board-figure {
  gap: 2px;
}

.portfolio-board-figure img {
  min-height: 0;
}

/* Current request: light-theme UI tone refinements. */
:root:not([data-theme="dark"]) {
  --light-ui-ink-edge: oklch(0.16 0.012 250 / 0.72);
  --light-ui-ink-edge-soft: oklch(0.16 0.012 250 / 0.38);
  --light-ui-ink-edge-hover: oklch(0.08 0.006 250 / 0.88);
  --light-ui-modal-surface: color-mix(in oklch, var(--panel), oklch(0.9 0.006 248) 42%);
  --light-ui-meter-fill: oklch(0.46 0.005 250);
  --light-ui-music-progress-fill: oklch(0.32 0.005 250);
  --light-ui-blue-vivid: oklch(0.56 0.16 248);
}

:root:not([data-theme="dark"]) .game-shell .log-hero {
  background: color-mix(in oklch, var(--panel), oklch(0.95 0.004 248) 33%) !important;
}

:root:not([data-theme="dark"]) :is(.music-progress, .game-shell > .game-music-dock .music-progress) {
  background:
    linear-gradient(
      90deg,
      var(--light-ui-music-progress-fill) 0 var(--music-progress),
      oklch(0.84 0.004 250) var(--music-progress) 100%
    ) !important;
  border-color: oklch(0.54 0.006 250) !important;
}

:root:not([data-theme="dark"]) .music-progress::-moz-range-progress {
  background: var(--light-ui-music-progress-fill) !important;
}

:root:not([data-theme="dark"]) .game-shell :is(.meter-track span, .attribute-row div span) {
  background: var(--light-ui-meter-fill) !important;
}

:root:not([data-theme="dark"]) :is(.game-shell > .game-music-dock, .ending-side .game-music-dock) :is(.music-toggle-button, .music-skip-button) {
  color: oklch(0.28 0.004 250) !important;
  background: oklch(0.84 0.004 250) !important;
  border-color: oklch(0.5 0.006 250) !important;
}

:root:not([data-theme="dark"]) :is(
  .modal-backdrop > .modal-card,
  .modal-card.system-modal,
  .modal-card.slim,
  .achievement-modal,
  .support-modal,
  .start-settings-modal,
  .game-settings-modal
) {
  background: var(--light-ui-modal-surface) !important;
  border: 7px solid var(--light-ui-ink-edge) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.42),
    0 14px 34px oklch(0 0 0 / 0.13) !important;
}

:root:not([data-theme="dark"]) :is(
  .system-facts div,
  .system-notes p,
  .route-entry-notes p,
  .portfolio-stat,
  .portfolio-directory,
  .portfolio-board-panel,
  .portfolio-work-button,
  .portfolio-board-figure img,
  .portfolio-board-empty,
  .portfolio-empty,
  .resume-profile-panel,
  .resume-portfolio-panel,
  .resume-status-card,
  .resume-side-card,
  .resume-attribute-panel,
  .resume-profile-facts div,
  .resume-attribute-item,
  .resume-attribute-icon,
  .ielts-registration-card,
  .competition-stat,
  .competition-rule-strip span,
  .competition-selected-panel,
  .competition-record-panel,
  .competition-selected-intro,
  .competition-work
) {
  border-color: var(--light-ui-ink-edge-soft) !important;
  border-width: 2px !important;
}

:root:not([data-theme="dark"]) :is(.action-copy .action-warning, .modal-option .modal-warning) {
  color: oklch(0.52 0.16 27) !important;
  background: oklch(0.72 0.16 27 / 0.16) !important;
  border-color: oklch(0.58 0.14 27 / 0.36) !important;
}

:root:not([data-theme="dark"]) .danger-dialog-warning {
  color: oklch(0.48 0.15 27) !important;
  background: oklch(0.72 0.16 27 / 0.14) !important;
  border: 2px solid oklch(0.56 0.14 27 / 0.32) !important;
}

:root:not([data-theme="dark"]) .risk-banner {
  background: oklch(0.72 0.16 27 / 0.2) !important;
  border: 2px solid oklch(0.56 0.14 27 / 0.34) !important;
}

:root:not([data-theme="dark"]) .risk-banner :is(strong, p, span) {
  color: oklch(0.44 0.13 27) !important;
}

:root:not([data-theme="dark"]) .resume-portfolio-panel {
  background:
    linear-gradient(135deg, oklch(0.985 0.01 250), oklch(0.952 0.0315 274) 52%, oklch(0.918 0.0405 250)) !important;
  border-color: color-mix(in oklch, var(--light-ui-blue-vivid), var(--light-ui-ink-edge) 32%) !important;
  box-shadow:
    inset 0 -3px 0 oklch(0.58 0.15 258 / 0.18),
    inset 0 0 0 1px oklch(1 0 0 / 0.46) !important;
}

:root:not([data-theme="dark"]) .resume-portfolio-button {
  color: var(--ink) !important;
  background: oklch(0.995 0.002 250) !important;
  border-color: color-mix(in oklch, var(--light-ui-blue-vivid), var(--light-ui-ink-edge) 34%) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.56),
    0 10px 22px oklch(0.18 0.04 250 / 0.1) !important;
}

:root:not([data-theme="dark"]) .resume-portfolio-button:hover,
:root:not([data-theme="dark"]) .resume-portfolio-button:focus-visible {
  background: oklch(1 0 0) !important;
  border-color: color-mix(in oklch, var(--light-ui-blue-vivid), var(--light-ui-ink-edge) 18%) !important;
  box-shadow:
    inset 0 -3px 0 color-mix(in oklch, var(--light-ui-blue-vivid), transparent 64%),
    inset 0 0 0 1px oklch(1 0 0 / 0.64),
    0 14px 28px oklch(0.18 0.04 250 / 0.15) !important;
}

:root:not([data-theme="dark"]) .overseas-ielts-entry {
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 16% 18%, oklch(0.99 0.018 292 / 0.92), transparent 38%),
    linear-gradient(112deg, oklch(0.985 0.01 270), oklch(0.93 0.028 282) 52%, oklch(0.86 0.046 288)) !important;
  border-color: color-mix(in oklch, oklch(0.48 0.09 286), var(--light-ui-ink-edge) 30%) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.62),
    inset 0 -1px 0 oklch(0.48 0.08 286 / 0.18),
    0 14px 30px oklch(0.2 0.055 286 / 0.14) !important;
}

:root:not([data-theme="dark"]) .overseas-ielts-entry:hover,
:root:not([data-theme="dark"]) .overseas-ielts-entry:focus-visible {
  background:
    radial-gradient(circle at 15% 14%, oklch(1 0.02 292 / 0.96), transparent 40%),
    linear-gradient(112deg, oklch(0.995 0.012 274), oklch(0.94 0.035 286) 50%, oklch(0.82 0.07 290)) !important;
  border-color: oklch(0.42 0.105 286 / 0.9) !important;
  box-shadow:
    inset 0 -3px 0 oklch(0.52 0.105 286 / 0.28),
    inset 0 0 0 1px oklch(1 0 0 / 0.68),
    0 18px 36px oklch(0.2 0.06 286 / 0.18) !important;
}

:root:not([data-theme="dark"]) .overseas-ielts-entry-icon {
  background: linear-gradient(180deg, oklch(0.99 0.01 286), oklch(0.91 0.027 286)) !important;
  border-color: color-mix(in oklch, oklch(0.48 0.09 286), var(--light-ui-ink-edge) 28%) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.66),
    0 8px 18px oklch(0.2 0.055 286 / 0.1) !important;
}

:root:not([data-theme="dark"]) .overseas-ielts-entry-copy strong,
:root:not([data-theme="dark"]) .overseas-ielts-entry-copy em {
  color: var(--ink) !important;
}

:root:not([data-theme="dark"]) .competition-card {
  color: oklch(0.12 0.006 250) !important;
  background: color-mix(in oklch, var(--panel-soft), var(--panel) 42%) !important;
  border: 2px solid var(--light-ui-ink-edge-soft) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.48),
    0 10px 20px oklch(0.18 0.04 250 / 0.08) !important;
}

:root:not([data-theme="dark"]) .competition-card:hover,
:root:not([data-theme="dark"]) .competition-card:focus-visible,
:root:not([data-theme="dark"]) .competition-card.is-selected {
  color: oklch(0.08 0.004 250) !important;
  background: color-mix(in oklch, var(--panel), white 10%) !important;
  border-color: var(--light-ui-ink-edge-hover) !important;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--light-ui-ink-edge-hover), transparent 10%),
    inset 0 -3px 0 color-mix(in oklch, var(--ink), transparent 86%),
    inset 0 0 0 1px oklch(1 0 0 / 0.66),
    0 18px 34px oklch(0.18 0.04 250 / 0.18),
    0 4px 0 oklch(0.08 0.006 250 / 0.2) !important;
}

:root:not([data-theme="dark"]) .competition-card :is(strong, p, span, i),
:root:not([data-theme="dark"]) .competition-card-head .competition-card-meta > span,
:root:not([data-theme="dark"]) .competition-card-head .competition-card-meta > span + span,
:root:not([data-theme="dark"]) .competition-card-head .competition-card-meta > span.is-available,
:root:not([data-theme="dark"]) .competition-card-head .competition-card-meta > span.is-unavailable,
:root:not([data-theme="dark"]) .competition-requirement-list i {
  color: oklch(0.12 0.006 250) !important;
}

:root:not([data-theme="dark"]) .competition-card-head .competition-card-meta > span,
:root:not([data-theme="dark"]) .competition-requirement-list i {
  background: oklch(0.94 0.006 250) !important;
  border-color: var(--light-ui-ink-edge-soft) !important;
}

:root:not([data-theme="dark"]) .competition-card-head .competition-card-meta > span.is-danger {
  color: var(--danger) !important;
  background: color-mix(in oklch, var(--danger), white 90%) !important;
  border-color: color-mix(in oklch, var(--danger), black 8%) !important;
}

:root:not([data-theme="dark"]) :is(.public-service-tab, .internship-work-tab):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--light-ui-ink-edge-hover) !important;
  box-shadow:
    inset 0 -3px 0 var(--light-ui-ink-edge-hover),
    0 8px 16px oklch(0.18 0.04 250 / 0.12) !important;
}

:root:not([data-theme="dark"]) :is(.public-service-job-card, .internship-job-card):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--light-ui-ink-edge-hover) !important;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--light-ui-ink-edge-hover), transparent 18%),
    inset 0 -3px 0 color-mix(in oklch, var(--gold), var(--ink) 20%),
    0 12px 24px oklch(0.18 0.04 250 / 0.16) !important;
  transform: translateY(-2px);
}

/* Current request: softer ending-memory handoff and final ending reveal. */
.ending-memory-lyric-line {
  top: calc(env(safe-area-inset-top, 0px) + 31.333px - 30pt) !important;
  font-size: clamp(1.192rem, 2.606vw, 1.737rem) !important;
}

.ending-memory-video-shell.has-skip .ending-memory-lyric-line {
  top: calc(env(safe-area-inset-top, 0px) + 75.333px - 30pt) !important;
}

.ending-memory-audio-host {
  transition:
    opacity 4200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 4200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 4200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.ending-memory-video-shell.is-audio-faded .ending-memory-audio-host {
  opacity: 0 !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
  transform: translate3d(0, 22px, 0) scale(0.985) !important;
}

.ending-memory-audio-host .ending-memory-music-dock,
.ending-memory-audio-host .track-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ending-memory-complete-button {
  opacity: 0;
  color: oklch(0.94 0 0) !important;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.22), transparent 62%),
    oklch(0.18 0 0 / 0.95) !important;
  border-color: oklch(0.55 0 0 / 0.78) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.18),
    0 8px 24px oklch(0 0 0 / 0.24) !important;
  transform: translate3d(0, 22px, 0) scale(1);
  backface-visibility: hidden;
  pointer-events: none;
  transition:
    opacity 2200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 2200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.ending-memory-complete-button:hover:not(:disabled),
.ending-memory-complete-button:focus-visible:not(:disabled) {
  color: oklch(0.99 0 0) !important;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.28), transparent 62%),
    oklch(0.22 0 0 / 0.96) !important;
  border-color: oklch(0.98 0 0 / 0.96) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.36),
    0 0 0 1px oklch(1 0 0 / 0.36),
    0 0 18px oklch(1 0 0 / 0.2),
    0 12px 28px oklch(0 0 0 / 0.28) !important;
  filter: drop-shadow(0 12px 24px oklch(0 0 0 / 0.34)) !important;
  transform: translateY(-1px);
}

.ending-memory-video-shell.is-complete .ending-memory-complete-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.ending-shell {
  position: relative;
  isolation: isolate;
  animation: endingFinalPageIn 1280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ending-shell.view-soft-enter {
  animation: endingFinalPageIn 1280ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.ending-shell::before,
.ending-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ending-shell::before {
  background:
    radial-gradient(circle at 22% 18%, oklch(0.96 0.045 82 / 0.18), transparent 34%),
    radial-gradient(circle at 78% 74%, color-mix(in oklch, var(--blue), transparent 82%), transparent 30%);
  opacity: 0;
  animation: endingFinalGlowIn 2200ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.ending-shell::after {
  background:
    linear-gradient(90deg, transparent, oklch(1 0 0 / 0.12), transparent),
    linear-gradient(var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 12px 12px;
  opacity: 0;
  transform: translate3d(-9%, 0, 0);
  animation: endingFinalSheenIn 2400ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}

.ending-shell > :is(.ending-stage, .ending-side, .achievement-toasts) {
  position: relative;
  z-index: 1;
}

.ending-shell > :is(.ending-stage, .ending-side) {
  transform: translateY(-10pt);
}

.ending-shell .ending-title-block {
  animation: endingFinalContentIn 1180ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

.ending-shell .ending-illustration {
  animation: endingFinalContentIn 1280ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.ending-shell .ending-insight-panel {
  animation: endingFinalContentIn 1360ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

.ending-shell .ending-side .ending-copy {
  animation: endingFinalCopyIn 1580ms cubic-bezier(0.16, 1, 0.3, 1) 460ms both;
}

.ending-shell .ending-summary,
.ending-shell .ending-side .game-music-dock {
  animation: endingFinalContentIn 1420ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both;
}

@keyframes endingFinalPageIn {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, 10px, 0) scale(0.998);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes endingFinalGlowIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes endingFinalSheenIn {
  0% {
    opacity: 0;
    transform: translate3d(-9%, 0, 0);
  }

  44% {
    opacity: 0.72;
  }

  100% {
    opacity: 0.18;
    transform: translate3d(9%, 0, 0);
  }
}

@keyframes endingFinalContentIn {
  from {
    opacity: 0;
    filter: blur(1.5px);
    transform: translate3d(0, 18px, 0) scale(0.99);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes endingFinalCopyIn {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}


@media (prefers-reduced-motion: reduce) {
  .ending-memory-video-shell.is-complete .ending-memory-complete-button,
  .ending-shell,
  .ending-shell::before,
  .ending-shell::after,
  .ending-shell .ending-title-block,
  .ending-shell .ending-illustration,
  .ending-shell .ending-insight-panel,
  .ending-shell .ending-side .ending-copy,
  .ending-shell .ending-summary,
  .ending-shell .ending-side .game-music-dock {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* Current request: light-theme music album ring should read as white with a black stroke. */
:root:not([data-theme="dark"]) :is(.music-dock:not(.ending-memory-music-dock), .game-music-dock) .album-disc {
  background: oklch(1 0 0) !important;
  border-color: oklch(0 0 0) !important;
}

:root:not([data-theme="dark"]) .ending-memory-audio-host .album-disc {
  background: oklch(1 0 0) !important;
  border-color: oklch(0 0 0) !important;
}

/* Current request: add an inner frame to the initial loading panel. */
.loading-panel-inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.loading-panel-inner::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgb(255 255 255 / 0.28);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 38%, rgb(255 255 255 / 0.025));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    inset 0 0 42px rgb(255 255 255 / 0.04);
}

@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  .loading-panel {
    border: 0;
    border-radius: 0;
  }

  .loading-panel-inner::before {
    content: none;
  }
}

/* Current request: make the initial loading title's gray shadow a little larger. */
.loading-panel h1 {
  text-shadow:
    5px 5px 0 rgb(118 118 118 / 0.34),
    8px 8px 0 rgb(118 118 118 / 0.22),
    12px 12px 0 rgb(118 118 118 / 0.13);
}

/* Current request: light-theme readability and darker hover frames. */
:root:not([data-theme="dark"]) .start-shell,
:root:not([data-theme="dark"]) .ending-shell {
  --start-hover-border-bright: color-mix(in oklch, var(--start-panel-line-strong, var(--line-strong)), black 14%);
  --start-button-border-hover: var(--start-hover-border-bright);
}

:root:not([data-theme="dark"]) .ending-shell {
  background:
    linear-gradient(oklch(0.84 0.004 250) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.84 0.004 250) 1px, transparent 1px),
    var(--bg) !important;
  background-size: 12px 12px, 12px 12px, auto !important;
}

:root:not([data-theme="dark"]) .start-shell :is(
  .start-entry-button:not(.is-primary),
  .start-small-card:not(.is-warm),
  .start-toolbar-button,
  .start-achievement-tile
),
:root:not([data-theme="dark"]) .ending-shell :is(
  .start-entry-button:not(.is-primary),
  .start-small-card:not(.is-warm)
) {
  color: var(--start-panel-ink, var(--ink)) !important;
}

:root:not([data-theme="dark"]) .game-shell :is(
  .action-button,
  .system-button,
  .settings-entry-button,
  .shop-category-tab,
  .rail-shortcut,
  .corner-entry-button,
  .settings-corner-button
):not(.is-danger),
:root:not([data-theme="dark"]) .modal-card:not(.event-card) .modal-option:not(.is-danger),
:root:not([data-theme="dark"]) :is(.competition-mode-tab, .achievement-tab) {
  color: var(--ink) !important;
}

:root:not([data-theme="dark"]) :is(
  .start-entry-button:not(.is-primary),
  .start-small-card:not(.is-warm),
  .start-toolbar-button,
  .start-link-button,
  .start-achievement-tile,
  .action-button,
  .pixel-button:not(.is-primary):not(.is-danger),
  .mini-button:not(.is-danger),
  .file-button,
  .system-button,
  .settings-entry-button,
  .modal-card:not(.event-card) .modal-option,
  .shop-category-tab,
  .competition-mode-tab,
  .achievement-tab,
  .rail-shortcut,
  .corner-entry-button,
  .settings-corner-button,
  .wanli-road-node
):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--button-hover-border-bright) !important;
}

:root:not([data-theme="dark"]) .start-shell :is(
  .start-entry-button:not(.is-primary),
  .start-small-card:not(.is-warm),
  .start-toolbar-button,
  .start-link-button,
  .start-achievement-tile
):is(:hover, :focus-visible):not(:disabled),
:root:not([data-theme="dark"]) .ending-shell :is(
  .start-entry-button:not(.is-primary),
  .start-small-card:not(.is-warm)
):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--start-hover-border-bright) !important;
  color: var(--start-panel-ink, var(--ink)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-toolbar-button:is(:hover, :focus-visible):not(:disabled) {
  border-color: oklch(0.06 0 0 / 0.92) !important;
  box-shadow:
    0 0 0 1px oklch(0.06 0 0 / 0.78),
    inset 0 0 0 1px oklch(1 0 0 / 0.5),
    0 14px 28px oklch(0 0 0 / 0.18) !important;
}

/* Current request: light-mode start screen panel opacity and title contrast. */
:root:not([data-theme="dark"]) .start-shell {
  --start-title-black: oklch(0.06 0 0);
  --start-title-charcoal: oklch(0.28 0 0);
}

:root:not([data-theme="dark"]) .start-shell .title-stack h1 .title-primary {
  color: var(--start-title-black) !important;
  text-shadow:
    8px 8px 0 oklch(0.38 0 0 / 0.32),
    12px 12px 0 oklch(0.38 0 0 / 0.17) !important;
}

:root[data-theme="dark"] .start-shell .title-stack h1 .title-primary {
  text-shadow:
    8px 8px 0 oklch(0.5 0 0 / 0.4),
    12px 12px 0 oklch(0.5 0 0 / 0.21) !important;
}

:root:not([data-theme="dark"]) .start-shell :is(
  .title-stack h1 .title-secondary,
  .start-title-panel .english-line
) {
  color: var(--start-title-charcoal) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-ready-panel {
  background: oklch(0.985 0 0 / 0.54) !important;
}

:root[data-theme="dark"] .start-shell .start-ready-panel {
  background: oklch(0.12 0 0 / 0.48) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-ready-panel strong {
  color: oklch(0.48 0 0) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-entry-button.is-primary {
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.5), oklch(0.07 0 0 / 0.44) 58%, oklch(0.14 0 0 / 0.48)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-entry-button.is-primary:hover:not(:disabled) {
  background:
    linear-gradient(135deg, oklch(0.62 0.09 248 / 0.6), oklch(0.44 0.15 252 / 0.7) 56%, oklch(0.26 0.18 258 / 0.8)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-entry-button[data-command="load-save"]:hover:not(:disabled),
:root:not([data-theme="dark"]) .start-shell .start-small-card[data-id="author"]:hover {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.4), oklch(0.9 0.004 248 / 0.3)) !important;
  box-shadow:
    0 0 0 1px oklch(0.06 0 0 / 0.42),
    inset 0 0 0 1px oklch(1 0 0 / 0.48),
    0 14px 28px oklch(0 0 0 / 0.16) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-toolbar-button {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.26), oklch(0.9 0 0 / 0.22)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-small-card[data-id="coffee"] {
  color: var(--start-panel-ink, var(--ink)) !important;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.58), oklch(0.9 0 0 / 0.46)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-small-card[data-id="coffee"]:hover {
  color: oklch(0.96 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.48 0.18 24 / 0.28), transparent 36%),
    linear-gradient(135deg, oklch(0.34 0.14 18 / 0.62), oklch(0.24 0.19 22 / 0.84) 34%, oklch(0.14 0.22 28 / 0.9) 68%, oklch(0.08 0.23 32 / 0.94)) !important;
}

/* Current request: make start-page secondary action surfaces quieter before hover. */
:root:not([data-theme="dark"]) .start-shell .start-entry-button[data-command="load-save"],
:root:not([data-theme="dark"]) .start-shell .start-small-card:is([data-id="author"], [data-id="coffee"]) {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.28), oklch(0.9 0.004 248 / 0.2)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-entry-button[data-command="load-save"]:not(:hover):not(:focus-visible),
:root:not([data-theme="dark"]) .start-shell .start-small-card:is([data-id="author"], [data-id="coffee"]):not(:hover):not(:focus-visible),
:root[data-theme="dark"] .start-shell .start-entry-button[data-command="load-save"]:not(:hover):not(:focus-visible),
:root[data-theme="dark"] .start-shell .start-small-card:is([data-id="author"], [data-id="coffee"]):not(:hover):not(:focus-visible) {
  -webkit-backdrop-filter: blur(4px) saturate(1.02) !important;
  backdrop-filter: blur(4px) saturate(1.02) !important;
}

:root[data-theme="dark"] .start-shell .start-entry-button[data-command="load-save"],
:root[data-theme="dark"] .start-shell .start-small-card[data-id="author"] {
  background:
    linear-gradient(180deg, oklch(0.24 0 0 / 0.38), oklch(0.13 0 0 / 0.3)) !important;
}

:root[data-theme="dark"] .start-shell .start-small-card[data-id="coffee"] {
  background:
    linear-gradient(145deg, oklch(0.16 0 0 / 0.42), oklch(0.05 0 0 / 0.34)) !important;
}

.start-shell .start-toolbar-button:not(:hover):not(:focus-visible) {
  -webkit-backdrop-filter: blur(6px) saturate(1.03) !important;
  backdrop-filter: blur(6px) saturate(1.03) !important;
}

:root:not([data-theme="dark"]) .start-scene-art::after {
  -webkit-backdrop-filter: blur(0.15px) !important;
  backdrop-filter: blur(0.15px) !important;
}

:root[data-theme="dark"] .start-shell .start-main-actions > .start-entry-button.is-primary:not(:hover):not(:focus-visible):not(:disabled) {
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.5), oklch(0.07 0 0 / 0.42) 58%, oklch(0.14 0 0 / 0.46)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-leaderboard-panel {
  background: oklch(0.985 0 0 / 0.38) !important;
}

:root[data-theme="dark"] .start-shell .start-leaderboard-panel {
  background: oklch(0.12 0 0 / 0.38) !important;
}

:root[data-theme="dark"] .start-shell .start-leaderboard-empty {
  background: oklch(0.32 0 0 / 0.38) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-leaderboard-list li {
  background: oklch(0.83 0 0 / 0.34) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-achievement-panel {
  background: oklch(0.985 0 0 / 0.38) !important;
}

:root[data-theme="dark"] .start-shell .start-achievement-panel {
  background: oklch(0.12 0 0 / 0.38) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-achievement-tile {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.34), oklch(0.9 0 0 / 0.24)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-entry-panel .profile-form[data-form="start"] {
  background: oklch(0.84 0 0 / 0.38) !important;
}

/* Current request: light-mode character draw and collection tone refinements. */
:root:not([data-theme="dark"]) .character-shell .character-attr-track > span {
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--character-blue-deep), white 18%),
      color-mix(in oklch, var(--character-blue-mid), white 20%) 58%,
      color-mix(in oklch, var(--character-blue-light), white 16%)
    ) !important;
}

:root:not([data-theme="dark"]) .character-shell .character-attr-track > span::after {
  background: linear-gradient(90deg, transparent, oklch(0.94 0.025 225 / 0.5), transparent) !important;
}

:root:not([data-theme="dark"]) .character-shell .pixel-button.is-primary:hover:not(:disabled),
:root:not([data-theme="dark"]) .character-shell .pixel-button.is-primary:focus-visible:not(:disabled) {
  color: oklch(0.98 0 0) !important;
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending),
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-unlocked,
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked {
  color: var(--ink, oklch(0.045 0 0)) !important;
  background: oklch(0.78 0 0 / 0.68) !important;
  border-color: oklch(0.34 0 0 / 0.58) !important;
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending) .achievement-gallery-copy p,
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked strong,
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked p,
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked em {
  color: oklch(0.25 0 0) !important;
}

:root:not([data-theme="dark"]) .modal-card.opening-fixed-card .modal-copy h2,
:root:not([data-theme="dark"]) .modal-card.opening-fixed-card .modal-copy p,
:root:not([data-theme="dark"]) .modal-card.opening-fixed-card .modal-media figcaption {
  color: var(--ink, oklch(0.045 0 0)) !important;
}

/* Final override: keep the architecture-life CTA on the current dark primary hover style. */
.modal-card.opening-fixed-architecture_life_start .modal-option {
  color: white !important;
  background:
    linear-gradient(135deg, oklch(0.2 0 0 / 0.66), oklch(0.07 0 0 / 0.58) 58%, oklch(0.14 0 0 / 0.62)) !important;
  border-color: oklch(1 0 0 / 0.22) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.14),
    0 10px 24px oklch(0 0 0 / 0.18) !important;
  transform: translateY(0) !important;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

.modal-card.opening-fixed-architecture_life_start .modal-option:hover:not(:disabled),
.modal-card.opening-fixed-architecture_life_start .modal-option:focus-visible:not(:disabled) {
  color: white !important;
  background:
    linear-gradient(145deg, oklch(0.38 0.11 248 / 0.96), oklch(0.27 0.16 252 / 0.99) 42%, oklch(0.16 0.14 258 / 0.99) 76%, oklch(0.12 0.12 264 / 0.99)) !important;
  border-color: oklch(0.78 0.13 248 / 0.68) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    inset 0 0 18px oklch(0.72 0.14 248 / 0.12),
    0 16px 36px oklch(0 0 0 / 0.24),
    0 0 18px oklch(0.58 0.15 248 / 0.16) !important;
  transform: translateY(-3px) !important;
}

.modal-card.opening-fixed-architecture_life_start .modal-option:active:not(:disabled) {
  transform: translateY(-1px) !important;
}

.modal-year_start.year-start-2 .modal-copy,
.modal-year_start.year-start-4 .modal-copy {
  gap: 6px !important;
}

.modal-year_start.year-start-2 .modal-copy p,
.modal-year_start.year-start-4 .modal-copy p {
  line-height: 1.42 !important;
  margin-block: 0 !important;
}

/* Current request final cascade: light-mode fixed-flow and abandon-study button refinements. */
:root:not([data-theme="dark"]) .modal-card.opening-fixed-card .modal-option,
:root:not([data-theme="dark"]) .modal-card.opening-fixed-card .modal-option :is(strong, span, em) {
  color: var(--ink, oklch(0.045 0 0)) !important;
}

:root:not([data-theme="dark"]) .modal-card.opening-fixed-card .modal-option {
  border-color: oklch(0.06 0 0 / 0.28) !important;
}

:root:not([data-theme="dark"]) .modal-card.opening-fixed-card.opening-fixed-architecture_life_start .modal-option {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.78), oklch(0.92 0.004 248 / 0.58)) !important;
  border-color: oklch(0.06 0 0 / 0.3) !important;
}

:root:not([data-theme="dark"]) .modal-card.opening-fixed-card.opening-fixed-architecture_life_start .modal-option:hover:not(:disabled),
:root:not([data-theme="dark"]) .modal-card.opening-fixed-card.opening-fixed-architecture_life_start .modal-option:focus-visible:not(:disabled) {
  color: var(--ink, oklch(0.045 0 0)) !important;
  background:
    linear-gradient(135deg, oklch(0.66 0.13 248 / 0.56), oklch(0.5 0.17 250 / 0.68) 56%, oklch(0.36 0.19 254 / 0.78)) !important;
  border-color: oklch(0.42 0.16 252 / 0.66) !important;
}

:root:not([data-theme="dark"]) .modal-card.slim.danger-dialog .danger-dialog-warning {
  color: oklch(0.48 0.15 27) !important;
  background: transparent !important;
  border: 0 !important;
}

:root:not([data-theme="dark"]) .modal-card.slim.danger-dialog .pixel-button.is-danger:hover:not(:disabled),
:root:not([data-theme="dark"]) .modal-card.slim.danger-dialog .pixel-button.is-danger:focus-visible:not(:disabled) {
  color: oklch(0.98 0 0) !important;
  background:
    linear-gradient(180deg, oklch(0.42 0.1 28), oklch(0.25 0.07 28)) !important;
  border-color: oklch(0.72 0.08 28) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.18),
    0 8px 24px oklch(0 0 0 / 0.08) !important;
}


/* Current request: start-page light hover hue correction. */
:root:not([data-theme="dark"]) .start-shell .start-main-actions > .start-entry-button.is-primary:hover:not(:disabled) {
  color: oklch(0.96 0.006 248) !important;
  background:
    linear-gradient(135deg, oklch(0.62 0.09 248 / 0.6), oklch(0.38 0.16 252 / 0.76) 56%, oklch(0.18 0.2 258 / 0.9)) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-main-actions > .start-entry-button.is-primary:hover:not(:disabled) :is(.start-entry-copy strong, .start-entry-copy em) {
  color: oklch(0.96 0.006 248) !important;
}

:root:not([data-theme="dark"]) .start-shell .start-main-actions > .start-entry-button:not(.is-primary):hover:not(:disabled),
:root:not([data-theme="dark"]) .start-shell .start-small-card[data-id="author"]:hover {
  color: var(--start-panel-ink, var(--ink)) !important;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.26), oklch(0.9 0.004 248 / 0.18)) !important;
  box-shadow:
    0 0 0 1px oklch(0.06 0 0 / 0.28),
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    0 12px 24px oklch(0 0 0 / 0.12) !important;
}

/* Current request: align light ending action hovers with the light start menu. */
:root:not([data-theme="dark"]) .ending-shell .ending-return-button.start-entry-button.is-primary:is(:hover, :focus-visible):not(:disabled) {
  color: oklch(0.96 0.006 248) !important;
  background:
    linear-gradient(135deg, oklch(0.62 0.09 248 / 0.6), oklch(0.38 0.16 252 / 0.76) 56%, oklch(0.18 0.2 258 / 0.9)) !important;
  border-color: oklch(0.9 0.035 248 / 0.92) !important;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.2),
    0 14px 30px var(--start-shadow),
    0 0 18px var(--start-button-glow) !important;
}

:root:not([data-theme="dark"]) .ending-shell .ending-return-button.start-entry-button.is-primary:is(:hover, :focus-visible):not(:disabled) :is(.start-entry-copy strong, .start-entry-copy em) {
  color: oklch(0.96 0.006 248) !important;
}

:root:not([data-theme="dark"]) .ending-shell .ending-share-direct-button:is(:hover, :focus-visible):not(:disabled),
:root:not([data-theme="dark"]) .ending-shell .ending-link-actions .start-small-card:is(:hover, :focus-visible):not(:disabled) {
  color: var(--start-panel-ink, var(--ink)) !important;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.26), oklch(0.9 0.004 248 / 0.18)) !important;
  border-color: var(--start-hover-border-bright) !important;
  box-shadow:
    0 0 0 1px oklch(0.06 0 0 / 0.28),
    inset 0 0 0 1px oklch(1 0 0 / 0.34),
    0 12px 24px oklch(0 0 0 / 0.12) !important;
  transform: translateY(-3px) !important;
}

:root:not([data-theme="dark"]) .ending-shell .ending-support-button.start-small-card.is-warm:is(:hover, :focus-visible):not(:disabled) {
  color: oklch(0.96 0 0) !important;
  background:
    radial-gradient(circle at 18% 12%, oklch(0.48 0.18 24 / 0.28), transparent 36%),
    linear-gradient(135deg, oklch(0.34 0.14 18 / 0.62), oklch(0.24 0.19 22 / 0.84) 34%, oklch(0.14 0.22 28 / 0.9) 68%, oklch(0.08 0.23 32 / 0.94)) !important;
}

:root:not([data-theme="dark"]) .ending-shell .ending-support-button.start-small-card.is-warm:is(:hover, :focus-visible):not(:disabled) :is(strong, em) {
  color: oklch(0.96 0 0) !important;
}

:root:not([data-theme="dark"]) .ending-shell .ending-support-button.start-small-card.is-warm em {
  color: oklch(0.28 0 0) !important;
}

:root:not([data-theme="dark"]) .ending-shell .ending-support-button.start-small-card.is-warm:is(:hover, :focus-visible):not(:disabled) em {
  color: oklch(0.96 0 0) !important;
}

/* Current request: light collection cards are white when unlocked and gray when locked. */
:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-unlocked {
  color: var(--ink, oklch(0.045 0 0)) !important;
  background:
    linear-gradient(180deg, oklch(0.915 0 0 / 0.92), oklch(0.855 0.004 248 / 0.78)) !important;
  border-color: oklch(0.18 0 0 / 0.46) !important;
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked {
  color: oklch(0.24 0 0) !important;
  background:
    linear-gradient(180deg, oklch(0.82 0 0 / 0.82), oklch(0.72 0 0 / 0.74)) !important;
  border-color: oklch(0.28 0 0 / 0.42) !important;
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-unlocked .achievement-gallery-copy p {
  color: oklch(0.32 0 0) !important;
}

:root:not([data-theme="dark"]) .achievement-gallery-item:is(.is-achievement, .is-ending).is-locked :is(strong, p, em) {
  color: oklch(0.32 0 0) !important;
}

/* Current request: make the top pressure-risk icon slightly more prominent. */
.game-shell .status-pressure.is-risk .status-icon img {
  transform: translateX(3pt) scale(1.24);
}

/* Current request: light-mode music and Wanli Road frames match the resume entry surface. */
:root:not([data-theme="dark"]) {
  --light-ui-resume-frame-bg:
    linear-gradient(180deg, oklch(1 0 0 / 0.26), transparent 62%),
    var(--panel);
}

:root:not([data-theme="dark"]) :is(.music-dock:not(.ending-memory-music-dock), .game-music-dock) .track-card {
  background: var(--light-ui-resume-frame-bg) !important;
}

:root:not([data-theme="dark"]) .game-shell .corner-entry-button.entry-id-wanli_road {
  background: var(--light-ui-resume-frame-bg) !important;
}

:root:not([data-theme="dark"]) .wanli-road-modal {
  background: var(--light-ui-resume-frame-bg) !important;
}

:root:not([data-theme="dark"]) :is(
  .wanli-road-stat,
  .wanli-road-node,
  .wanli-road-current,
  .wanli-road-records,
  .wanli-road-current-icon,
  .wanli-road-action-chip,
  .wanli-road-record,
  .wanli-road-empty,
  .wanli-road-complete
) {
  background: var(--light-ui-resume-frame-bg) !important;
}

/* Current request: mobile is an entry hub, not a playable game surface. */
.mobile-start-shell {
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #101317;
  color: oklch(0.95 0.006 248);
}

:root:not([data-theme="dark"]) .mobile-start-shell {
  background: oklch(0.9 0.012 248);
  color: oklch(0.16 0.012 248);
}

.mobile-start-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.1), transparent 26%),
    linear-gradient(180deg, transparent 44%, rgb(0 0 0 / 0.74) 100%);
  pointer-events: none;
}

:root:not([data-theme="dark"]) .mobile-start-shell::before {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 30%),
    linear-gradient(180deg, transparent 46%, rgb(239 242 244 / 0.84) 100%);
}

.mobile-start-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.mobile-start-scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 260ms ease;
}

:root:not([data-theme="dark"]) .mobile-start-scene-img.is-light,
:root[data-theme="dark"] .mobile-start-scene-img.is-dark {
  opacity: 1;
}

.mobile-start-content {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
}

.mobile-start-header {
  display: grid;
  gap: 4px;
  padding-top: 4px;
}

.mobile-start-header > .kicker {
  margin-left: 3pt;
}

.mobile-start-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

.mobile-start-title-clock {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 12px rgb(0 0 0 / 0.36));
}

.mobile-start-title-clock::before,
.mobile-start-title-clock::after {
  display: none;
}

.mobile-start-title-clock img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.mobile-start-header h1 {
  margin: 0;
  max-width: min(7em, calc(100vw - 112px));
  color: oklch(0.97 0.005 248);
  font-size: clamp(2.65rem, 12vw, 3.65rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 0 3px 18px rgb(0 0 0 / 0.44);
}

:root:not([data-theme="dark"]) .mobile-start-header h1 {
  color: oklch(0.14 0.01 248);
  text-shadow: 0 2px 18px rgb(255 255 255 / 0.72);
}

.mobile-start-subtitle {
  margin: -2px 0 0 3pt;
  color: color-mix(in oklch, currentColor, transparent 6%);
  font-size: clamp(1.61rem, 6.94vw, 2.09rem);
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.3);
}

.mobile-start-english {
  margin: 0 0 0 3pt;
  width: min(100%, 30em);
  color: color-mix(in oklch, currentColor, transparent 18%);
  font-size: clamp(0.93rem, 3.88vw, 1.13rem);
  line-height: 1.28;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.26);
  white-space: normal;
}

:root:not([data-theme="dark"]) .mobile-start-subtitle,
:root:not([data-theme="dark"]) .mobile-start-english {
  text-shadow: 0 2px 16px rgb(255 255 255 / 0.68);
}

.mobile-start-header p:not(.kicker):not(.mobile-start-subtitle):not(.mobile-start-english) {
  width: min(100%, 28em);
  margin: 0;
  color: color-mix(in oklch, currentColor, transparent 12%);
  font-size: 0.95rem;
  line-height: 1.68;
}

.mobile-start-header time {
  width: max-content;
  max-width: 100%;
  padding: 8px 10px;
  color: currentColor;
  background: color-mix(in oklch, var(--panel), transparent 22%);
  border: 0;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
}

.mobile-start-menu {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mobile-start-entry {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: var(--start-panel-ink);
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.3), oklch(0.92 0.006 248 / 0.16));
  border: 1px solid oklch(0 0 0 / 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.12);
  text-align: left;
  -webkit-backdrop-filter: blur(3px) saturate(1.02);
  backdrop-filter: blur(3px) saturate(1.02);
  touch-action: manipulation;
}

.mobile-start-entry.mobile-entry-announcement,
.mobile-start-entry.mobile-entry-community,
.mobile-start-entry.mobile-entry-theme {
  grid-column: auto;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px 6px;
  text-align: center;
}

:root[data-theme="dark"] .mobile-start-entry {
  color: oklch(0.94 0.006 248);
  background:
    linear-gradient(180deg, oklch(0.22 0.018 248 / 0.28), oklch(0.08 0.018 250 / 0.18));
  border-color: oklch(1 0 0 / 0.18);
}

.mobile-start-entry.is-primary {
  min-height: 82px;
  grid-template-columns: 52px minmax(0, 1fr);
  padding-block: 9px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent), white 20% / 0.62), color-mix(in oklch, var(--accent), black 16% / 0.36));
  color: oklch(0.08 0.015 248);
}

:root:not([data-theme="dark"]) .mobile-start-entry.is-primary {
  color: var(--start-panel-ink);
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.3), oklch(0.92 0.006 248 / 0.16));
  border-color: oklch(0 0 0 / 0.18);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.12);
  -webkit-backdrop-filter: blur(3px) saturate(1.02);
  backdrop-filter: blur(3px) saturate(1.02);
}

:root:not([data-theme="dark"]) .mobile-start-entry:not(.is-primary) {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.22), oklch(0.92 0.006 248 / 0.1));
  border-color: oklch(0 0 0 / 0.14);
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.08);
}

.mobile-start-entry.mobile-entry-leaderboard {
  min-height: 58px;
  padding-block: 8px;
}

.mobile-start-entry.mobile-entry-author,
.mobile-start-entry.mobile-entry-coffee {
  min-height: 70px;
  padding-block: 10px;
}

.mobile-start-entry-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}

.mobile-start-entry.mobile-entry-announcement .mobile-start-entry-icon,
.mobile-start-entry.mobile-entry-community .mobile-start-entry-icon,
.mobile-start-entry.mobile-entry-theme .mobile-start-entry-icon {
  width: 30px;
  height: 30px;
}

.mobile-start-entry.is-primary .mobile-start-entry-icon {
  width: 50px;
  height: 50px;
}

.mobile-start-entry-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.mobile-start-entry-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mobile-start-entry-copy strong {
  color: currentColor;
  font-size: 1.08rem;
  line-height: 1.22;
  letter-spacing: 0;
}

.mobile-start-entry.mobile-entry-announcement .mobile-start-entry-copy strong,
.mobile-start-entry.mobile-entry-community .mobile-start-entry-copy strong,
.mobile-start-entry.mobile-entry-theme .mobile-start-entry-copy strong {
  font-size: 0.88rem;
  line-height: 1.18;
}

.mobile-start-entry.mobile-entry-author .mobile-start-entry-copy strong {
  margin-left: 5pt;
  font-size: 1.08rem;
}

.mobile-start-entry.mobile-entry-coffee .mobile-start-entry-copy strong {
  margin-left: 5pt;
}

.mobile-start-entry.is-primary .mobile-start-entry-copy strong {
  font-size: clamp(1.35rem, 6vw, 1.76rem);
  line-height: 1.14;
}

.mobile-start-entry-copy em {
  color: color-mix(in oklch, currentColor, transparent 22%);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.44;
}

.mobile-start-entry.mobile-entry-author .mobile-start-entry-copy em {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-start-entry.mobile-entry-announcement .mobile-start-entry-copy em,
.mobile-start-entry.mobile-entry-community .mobile-start-entry-copy em,
.mobile-start-entry.mobile-entry-theme .mobile-start-entry-copy em {
  display: none;
}

.mobile-start-entry.is-primary .mobile-start-entry-copy em {
  color: color-mix(in oklch, currentColor, transparent 14%);
  font-size: 0.9rem;
}

.mobile-start-blocked-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: 28px;
}

.mobile-start-blocked-dialog .modal-copy {
  gap: 12px;
}

.mobile-start-blocked-dialog .modal-copy h2 {
  font-size: clamp(1.48rem, 6vw, 2rem);
  line-height: 1.32;
}

.mobile-start-blocked-line {
  color: var(--muted);
  font-size: clamp(1rem, 3.8vw, 1.16rem);
  line-height: 1.75;
}

@media (max-width: 760px), ((pointer: coarse) and (max-height: 520px)) {
  .support-modal {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 12px;
    overflow-y: auto;
  }

  .support-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .support-right-column {
    order: 1;
  }

  .support-qr-stack {
    order: 2;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    justify-items: center;
    gap: 10px;
    margin-top: 4px;
  }

  .support-qr-card {
    width: min(100%, 156px);
    max-height: 156px;
  }

  .support-qr-card img {
    max-height: 156px;
  }

  .support-right-column,
  .support-copy {
    gap: 10px;
  }

  .support-copy h2 {
    white-space: normal;
    font-size: clamp(1.42rem, 6vw, 1.82rem);
    line-height: 1.18;
  }

  .support-copy p,
  .support-ending-note {
    font-size: 0.92rem;
    line-height: 1.66;
  }

  .support-ending-card {
    width: 100%;
  }

  .support-ending-note {
    width: 100%;
    margin: 0;
  }

  .support-modal > .support-return-button {
    min-height: 46px;
    font-size: 1rem;
  }

  .leaderboard-dialog {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 12px;
    overflow-y: auto;
  }

  .leaderboard-dialog-row {
    min-height: 44px;
    grid-template-columns: 40px minmax(0, 1fr) minmax(52px, auto);
    gap: 3px 8px;
    padding: 7px 9px;
  }

  .leaderboard-dialog-row > span {
    font-size: 0.78rem;
  }

  .leaderboard-dialog-row strong {
    font-size: 0.96rem;
  }

  .leaderboard-dialog-row em {
    font-size: 0.74rem;
  }

  .leaderboard-dialog-row b {
    font-size: 1rem;
  }

  .leaderboard-community-button {
    width: 100%;
    min-height: 44px;
  }

  .mobile-start-blocked-backdrop {
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  }

  .mobile-start-blocked-dialog {
    padding: 24px 20px;
  }

  .mobile-start-blocked-dialog .modal-copy h2 {
    font-size: clamp(1.38rem, 6.2vw, 1.84rem);
  }
}