:root {
  --ink: #382745;
  --muted: #7d6986;
  --paper: #fff9fc;
  --pink: #ff5b91;
  --pink-dark: #d93b70;
  --purple: #8653d1;
  --yellow: #ffc943;
  --mint: #49c9ad;
  --blue: #5c9ded;
  --danger: #e65363;
  --line: #eadceb;
  --shadow: 0 12px 30px rgba(103, 55, 104, .13);
}

/* Over-the-shoulder idol battles. All rules are scoped to this screen. */
.screen.duel-screen { padding: 0 0 18px; overflow: hidden; color: #503747; background: #f7ecec; animation: none; }
.duel-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 24px; color: #fff5e9; background: linear-gradient(110deg,#42263e,#78516a); border-bottom: 1px solid #d6ad89; }
.duel-header > div { display: flex; align-items: center; gap: 13px; }.duel-header h2 { margin: 0; font-size: 19px; letter-spacing: .04em; }.duel-category { padding: 5px 12px; color: #ffe6b4; background: #ffffff12; border: 1px solid #ffffff38; border-radius: 999px; font-size: 13px; font-weight: 800; }.duel-turn { font-size: 12px; letter-spacing: .1em; }.duel-turn strong { margin-left: 7px; font-size: 25px; }
.duel-arena { position: relative; height: 550px; overflow: hidden; isolation: isolate; background: #473347 center / cover no-repeat; }
.duel-arena::before { position: absolute; z-index: 0; inset: 0; content: ""; background: linear-gradient(180deg,#160c231a,transparent 50%,#2c142d55); pointer-events: none; }
.duel-arena.arena-live { background-image: url("assets/battle/live-stage.webp"); }.duel-arena.arena-sns { background-image: url("assets/battle/sns-studio.webp"); }.duel-arena.arena-show { background-image: url("assets/battle/tv-studio.webp"); }
.duel-floor { position: absolute; z-index: 1; height: 52px; border-radius: 50%; border: 2px solid #ffebbd88; background: radial-gradient(ellipse,#fff5ce66,#c58cad40 55%,#3e153e44 76%); box-shadow: 0 8px 18px #25132944,inset 0 0 15px #fff1d466; }
.enemy-floor { width: 26%; right: 8%; top: 227px; background: radial-gradient(ellipse,rgba(28,11,36,.5) 0 28%,rgba(255,232,187,.26) 48%,rgba(76,31,77,.18) 63%,transparent 74%); border-color: #ffe8b7b8; box-shadow: 0 9px 19px #25132966,inset 0 0 17px #fff1d47a; }.player-floor { width: 36%; left: 6%; bottom: -13px; height: 76px; }
.duel-hud { position: absolute; z-index: 5; max-width: calc(50% - 24px); padding: 14px 19px; line-height: 1.35; color: #533749; background: linear-gradient(120deg,rgba(255,253,246,.97),rgba(250,233,235,.94)); border: 1px solid #fff4df; box-shadow: 0 5px 0 #6e415c55,0 14px 24px #27122940,inset 0 1px 0 white; backdrop-filter: blur(12px); }
.enemy-hud { top: 20px; left: 24px; width: 40%; border-radius: 5px 23px 23px 23px; }.player-hud { right: 24px; bottom: 23px; width: 48%; max-width: none; border-radius: 23px 23px 5px 23px; }
.duel-name { position: relative; }.duel-name > span { display: block; margin-bottom: 3px; color: #a26b7d; font-size: 10px; letter-spacing: .16em; font-weight: 900; }.duel-name h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }.player-hud .duel-name { padding-right: 62px; }
.duel-health { display: flex; align-items: center; gap: 8px; }.duel-health > span { color: #9b7955; font-size: 11px; font-weight: 900; }.duel-health > strong { min-width: 74px; text-align: right; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }.duel-health > strong small { font-size: 12px; color: #8b7781; }
.duel-hp-track { position: relative; flex: 1; height: 12px; background: #decfd6; border: 1px solid #d0bcc5; border-radius: 99px; overflow: hidden; }.duel-hp-track i { position: absolute; top: 0; left: 0; height: 100%; border-radius: inherit; }.duel-hp-fill { background: linear-gradient(90deg,#4f9b83,#8cdcc0); }.enemy-hud .duel-hp-fill { background: linear-gradient(90deg,#c26085,#f09dac); }.duel-hp-track.critical .duel-hp-fill { background: linear-gradient(90deg,#cf454b,#ff9865); }.duel-hp-track .duel-hp-trail { width: var(--hp-to); background: #ffe39a; animation: duel-hp-drain .75s ease-out both; }
.duel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.duel-badges span { padding: 4px 8px; border: 1px solid #e8d8dc; border-radius: 6px; background: #ffffff80; color: #795769; font-size: 12px; }.duel-badges b { color: #7b5792; }.duel-badges .challenge-badge { color: #86526a; background: #fff0f5; border-color: #e9afc2; }.duel-badges .challenge-badge b { color: #c23f69; }.duel-badges .cheer-badge { color: #9b651f; background: #fff7d8; border-color: #efd58c; }.duel-badges .cheer-badge b { color: #d27722; }
.enemy-name-line { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 10px; }.enemy-name-line h3 { flex: 1; min-width: 0; margin: 0; }.enemy-hud .enemy-defense-badge { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; min-height: 27px; padding: 4px 8px; color: #39776b; background: linear-gradient(90deg,rgba(224,248,241,.96),rgba(245,252,249,.9)); border: 1px solid #c2e6dc; border-radius: 5px; box-shadow: inset 0 1px 0 #fff; font-weight: 900; white-space: nowrap; }.enemy-defense-badge i { display: block; flex: 0 0 12px; width: 12px; height: 14px; background: #91cdbd; clip-path: polygon(50% 0,94% 17%,86% 70%,50% 100%,14% 70%,6% 17%); }.enemy-defense-badge strong { font-size: 11px; }.enemy-defense-badge b { color: #347768; font-size: 13px; }.enemy-status-badges:empty { display: none; }
.duel-intent { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 9px 10px; color: #9c484e; background: #fff1e8; border: 1px solid #efc7b8; border-radius: 11px; }.duel-intent > span { font-size: 25px; }.duel-intent small,.duel-intent strong,.duel-intent em { display: block; }.duel-intent small { color: #8c6269; font-size: 11px; line-height: 1.35; }.duel-intent strong { margin-top: 2px; font-size: 16px; }.duel-intent em { margin-top: 3px; font-size: 11px; font-style: normal; }.duel-intent.intent-guard { background: #eaf6f1; border-color: #bcdccd; color: #387f69; }.duel-intent.intent-focus { background: #f3eaf9; border-color: #d6c2e6; color: #81549b; }.duel-scaling { display: block; margin-top: 7px; font-size: 10px; color: #8f7b86; }
.enemy-hud .duel-intent { min-height: 38px; padding: 8px 10px; }.enemy-hud .duel-intent strong { min-width: 0; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.duel-energy { position: absolute; top: 9px; right: 0; padding: 8px 10px; border-radius: 11px; color: #fff1bd; background: linear-gradient(120deg,#98678a,#694974); box-shadow: inset 0 1px 0 #ffffff44; font-size: 22px; }
.duel-player-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 11px; border-top: 1px solid #e4cfd7; }.duel-player-action > span { font-size: 12px; color: #886b7b; }.duel-end-turn { display: flex; align-items: center; gap: 12px; padding: 10px 15px; color: #fff8ec; background: linear-gradient(110deg,#c47986,#8c608d); border: 1px solid #ffe8dc; border-radius: 99px; box-shadow: 0 3px 0 #77516e; font-size: 13px; font-weight: 800; white-space: nowrap; }.duel-end-turn b { color: #ffe0a2; }.duel-end-turn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }
.player-hud { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; align-items: end; }.player-hud .duel-name,.player-hud .duel-health { grid-column: 1 / -1; width: 100%; }.player-hud .duel-badges { grid-column: 1; gap: 5px; min-width: 0; }.player-hud .duel-badges span { padding: 3px 5px; font-size: 20px; }.player-hud .duel-player-action { grid-column: 2; align-self: end; margin: 9px 0 2px; padding: 0; border: 0; }.player-hud .duel-player-action > span { display: none; }.player-hud .duel-end-turn { gap: 7px; padding: 7px 11px; font-size: 12px; }
.duel-actor { position: absolute; z-index: 3; pointer-events: none; }.duel-actor .character-art { z-index: 1; display: block; width: 100%; height: 100%; }.duel-actor .character-art img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 9px 8px #20102270); }.enemy-actor { right: 7%; top: 18px; width: 29%; height: 253px; }.player-actor { left: 5%; bottom: -31px; width: 39%; height: 335px; z-index: 4; }.enemy-actor::after { position: absolute; z-index: 0; left: 50%; bottom: -5px; width: 46%; height: 19px; content: ""; border-radius: 50%; background: radial-gradient(ellipse,rgba(24,8,31,.78) 0 25%,rgba(24,8,31,.48) 45%,rgba(255,235,198,.16) 58%,transparent 74%); filter: blur(1.5px); transform: translateX(-50%); }.duel-actor.is-hit .character-art { animation: duel-recoil .5s ease-out; }.duel-player-art:has(img[src*="blue"]) img { transform: scaleX(-1); }
.duel-screen .player-actor { left: 10%; bottom: 0; width: 31%; max-width: 310px; height: 330px; }
.arena-sns .enemy-floor { top: 304px; right: 5%; width: 32%; }.arena-sns .enemy-actor { top: 36px; right: 5%; width: 32%; height: 300px; }
.duel-screen .duel-player-art { overflow: hidden; }
.duel-screen .duel-player-art img { height: auto; object-fit: contain; object-position: center top; }
.duel-log { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 10px 25px; margin: 0; color: #fff0e3; background: #543249; font-size: 13px; font-weight: 700; line-height: 1.5; }.duel-log > span { color: #eec886; }
.duel-hand { padding: 15px 23px 0; }.duel-hand > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.duel-hand header span { color: #a76b7d; font-size: 9px; letter-spacing: .13em; font-weight: 800; }.duel-hand h3 { margin: 3px 0 0; font-size: 16px; }.duel-hand header p { margin: 0; font-size: 12px; color: #826c79; }.duel-screen .card-hand { display: flex; gap: 11px; min-height: 0; margin-top: 6px; padding: 10px 2px 11px; overflow-x: auto; align-items: stretch; }.duel-screen .game-card { flex: 1 0 148px; min-width: 148px; max-width: 210px; min-height: 205px; padding: 10px; border: 1px solid #e7c7ca; background: linear-gradient(145deg,#fffefa,#f6e5e9); border-radius: 12px; box-shadow: 0 4px 0 #b68a9c; }.duel-screen .game-card .card-art { height: 85px; }.duel-screen .game-card .card-cost { background: #80568c; border: 1px solid #ffedcd; }.duel-screen .game-card strong { font-size: 14px; }.duel-screen .game-card small { color: #745869; font-size: 11px; }.duel-screen .card-grade { padding-top: 8px; font-size: 9px; }.duel-empty-hand { padding: 20px; color: #8b7180; font-size: 13px; }
.battle-impact { position: absolute; z-index: 8; inset: 0; --fx-delay: 0ms; --fx-offset: 0px; }.impact-burst { position: absolute; left: 50%; top: 42%; width: 130px; height: 130px; margin: -65px; background: radial-gradient(circle,#fffde6 0 8%,#ffd377dd 15%,#f590cb99 29%,transparent 67%); clip-path: polygon(50% 0,59% 35%,90% 10%,65% 43%,100% 50%,65% 57%,90% 90%,58% 64%,50% 100%,42% 64%,10% 90%,35% 57%,0 50%,35% 43%,10% 10%,42% 35%); animation: duel-impact .6s ease-out both; animation-delay: var(--fx-delay); }.damage-float { position: absolute; left: calc(50% + var(--fx-offset)); top: 24%; display: grid; justify-items: center; transform: translateX(-50%); animation: duel-damage .85s ease-out both; animation-delay: var(--fx-delay); }.damage-float b { color: #fff9d0; font: 900 52px/1 Georgia,serif; text-shadow: -2px -2px 0 #9c354e,2px 2px 0 #9c354e,0 5px 0 #733447,0 7px 14px #220e35; }.damage-float small { padding: 3px 7px; margin-top: 7px; color: #fff8ed; background: #563248e8; border-radius: 5px; font-size: 12px; font-weight: 900; white-space: nowrap; }.impact-guard .damage-float b { font-size: 30px; color: #b5fff0; }.impact-shield .damage-float b,.impact-power .damage-float b,.impact-challenge .damage-float b { color: #bdffef; font-size: 38px; }.impact-cheer .damage-float b { color: #fff0a4; font-size: 38px; }.impact-heal .damage-float b { color: #b9ffcf; font-size: 38px; }.impact-shield .impact-burst,.impact-guard .impact-burst,.impact-heal .impact-burst { clip-path: none; border-radius: 50%; border: 4px solid #a5ffef; background: #96ffeb33; }.impact-challenge .impact-burst { background: radial-gradient(circle,#fff6fb 0 10%,#ee8eb8dd 18%,#a9519199 34%,transparent 68%); }.impact-cheer .impact-burst { background: radial-gradient(circle,#fffde6 0 10%,#ffd86ddd 18%,#ffac5099 34%,transparent 68%); }
@keyframes duel-hp-drain { from { width: var(--hp-from); } to { width: var(--hp-to); } }
@keyframes duel-recoil { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-10px); filter: brightness(1.8); } 40% { transform: translateX(9px); } 60% { transform: translateX(-5px); } }
@keyframes duel-impact { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 15% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.8) rotate(20deg); } }
@keyframes duel-damage { 0% { opacity: 0; transform: translate(-50%,20px) scale(.5); } 18% { opacity: 1; transform: translate(-50%,-10px) scale(1.15); } 65% { opacity: 1; transform: translate(-50%,-26px) scale(1); } 100% { opacity: 0; transform: translate(-50%,-60px); } }
@media (max-width: 1050px) { .duel-screen .duel-arena { height: 550px; }.duel-screen .enemy-hud { left: 15px; width: 45%; }.duel-screen .player-hud { right: 15px; width: 49%; }.duel-hud { padding: 13px; }.duel-name h3 { font-size: 19px; }.duel-player-action { flex-wrap: wrap; }.enemy-actor { right: 3%; top: 24px; width: 35%; }.duel-screen .player-actor { left: 7%; bottom: 0; width: 31%; }.duel-screen .game-card { min-width: 142px; } }
@media (prefers-reduced-motion: reduce) { .duel-screen *, .duel-screen *::before, .duel-screen *::after { animation: none !important; transition: none !important; }.duel-screen .impact-burst { display: none; }.duel-screen .damage-float { opacity: 1; }.duel-screen .duel-actor.is-hit .character-art { transform: none; } }

* { box-sizing: border-box; }
body {
  min-width: 980px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: radial-gradient(circle at 10% 15%, #ffe5f0 0 12%, transparent 12.5%), radial-gradient(circle at 90% 8%, #e2d6ff 0 14%, transparent 14.5%), linear-gradient(130deg, #fff9fc, #f5efff 55%, #effbff);
}

button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ffc943; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .44; filter: grayscale(.35); }

.app-shell { width: min(1180px, calc(100vw - 48px)); min-height: 720px; margin: 24px auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 22px; color: white; background: linear-gradient(105deg, var(--pink), #b85de0); border-radius: 22px 22px 0 0; box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 21px; letter-spacing: .06em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--pink); background: white; clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 93%, 50% 70%, 21% 93%, 32% 56%, 2% 35%, 39% 34%); }
.top-actions { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.saved { color: #fff4bd; }
.icon-button { padding: 7px 10px; color: white; background: rgba(255,255,255,.2); border-radius: 10px; }
.screen { min-height: 665px; padding: 30px; background: rgba(255,255,255,.88); border-radius: 0 0 22px 22px; box-shadow: var(--shadow); animation: appear .25s ease-out; }
@keyframes appear { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.story-screen { position: relative; display: flex; align-items: flex-end; min-height: 665px; padding: 0; overflow: hidden; color: white; background: linear-gradient(155deg, #111329, #37254d 51%, #8a496f); isolation: isolate; }
.story-screen::before, .story-screen::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.story-screen::before { inset: 0; background: radial-gradient(ellipse at 18% 14%, rgba(255,255,255,.16), transparent 30%), radial-gradient(ellipse at 81% 23%, rgba(255,194,227,.22), transparent 24%), linear-gradient(180deg, transparent 45%, rgba(10,8,27,.66)); }
.story-screen::after { right: -9%; bottom: 150px; width: 62%; height: 48%; background: linear-gradient(140deg, transparent 45%, rgba(255,255,255,.06) 46% 50%, transparent 51%), repeating-linear-gradient(90deg, transparent 0 82px, rgba(255,255,255,.06) 83px 84px); transform: skewY(-8deg); opacity: .65; }
.story-screen.story-rank75 { background: linear-gradient(150deg, #161735, #513466 55%, #bb6b89); }
.story-screen.story-rank50 { background: linear-gradient(150deg, #172842, #465184 52%, #b45c83); }
.story-screen.story-rank25 { background: linear-gradient(150deg, #2a153d, #6e365d 52%, #df7d89); }
.story-screen.story-rank10 { background: linear-gradient(150deg, #311942, #75506f 50%, #e8a663); }
.story-screen.story-ending { background: linear-gradient(150deg, #20183c, #885378 51%, #f6b95a); }
.story-screen.story-endingTop { background: linear-gradient(150deg, #261842, #a55d79 49%, #ffd46a); }
.story-sky { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 6% 27%, #fff8bd 0 2px, transparent 3px), radial-gradient(circle at 36% 14%, #fff7d0 0 1.5px, transparent 2.5px), radial-gradient(circle at 63% 30%, #fff8bd 0 2px, transparent 3px), radial-gradient(circle at 90% 11%, #fff7d0 0 1.5px, transparent 2.5px); opacity: .8; }
.story-title { position: absolute; z-index: 5; top: 25px; left: 31px; text-shadow: 0 2px 8px rgba(10,8,28,.65); }
.story-title .eyebrow { margin-bottom: 4px; color: #ffe0a0; }
.story-title h2 { margin: 0; font-size: 25px; }
.story-skip { position: absolute; z-index: 5; top: 25px; right: 31px; padding: 9px 14px; color: #fff; background: rgba(20,14,38,.64); border: 1px solid rgba(255,255,255,.72); border-radius: 999px; font-size: 13px; font-weight: 800; box-shadow: 0 3px 10px rgba(8,4,20,.24); transition: background .12s, transform .12s; }
.story-skip:hover { background: rgba(20,14,38,.88); transform: translateY(-1px); }
.story-cast { position: absolute; inset: 52px 25px 112px; z-index: 1; display: grid; grid-template-columns: 1fr .96fr 1fr; align-items: end; justify-items: center; gap: 3px; pointer-events: none; }
.story-portrait { align-self: end; width: 272px; height: 510px; opacity: .44; filter: brightness(.72) saturate(.6); transition: opacity .22s, filter .22s, transform .22s; transform: translateY(17px) scale(.93); transform-origin: bottom center; }
.story-portrait.protagonist { justify-self: start; }
.story-portrait.rival { justify-self: end; }
.story-portrait.president { width: 250px; height: 485px; }
.story-portrait.active { z-index: 2; opacity: 1; filter: none; transform: translateY(0) scale(1); }
.story-portrait .character-art img { filter: drop-shadow(0 13px 13px rgba(0,0,0,.52)); }
.story-dialogue { position: relative; z-index: 4; width: calc(100% - 64px); min-height: 143px; margin: 0 32px 25px; padding: 30px 122px 26px 32px; color: #fff; background: linear-gradient(110deg, rgba(15,16,39,.95), rgba(38,24,63,.92)); border: 1px solid rgba(255,229,249,.65); border-radius: 15px; box-shadow: 0 8px 25px rgba(8,4,20,.4); }
.story-dialogue p { min-height: 52px; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.75; letter-spacing: .035em; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.story-name { position: absolute; top: -18px; left: 22px; min-width: 142px; padding: 8px 18px; color: #40204b; text-align: center; background: linear-gradient(110deg, #ffe4f0, #fff4c8); border: 1px solid white; border-radius: 9px 9px 2px 2px; font-weight: 900; box-shadow: 0 3px 0 rgba(14,10,35,.3); }
.story-name.narration { color: #fff; background: linear-gradient(110deg, #745b9c, #b66c94); }
.story-next { position: absolute; right: 25px; bottom: 24px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; color: #46315f; background: #fff4ca; border: 2px solid white; border-radius: 999px; font-size: 13px; font-weight: 900; box-shadow: 0 3px 0 #b27d8f; }
.story-next:hover { filter: brightness(1.06); transform: translateY(-1px); }

.title-screen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 54px 68px; }
.eyebrow { margin: 0 0 12px; color: var(--pink-dark); font-size: 13px; font-weight: 800; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 15px; font-size: 50px; line-height: 1.1; letter-spacing: .04em; }
h2 { margin-bottom: 7px; font-size: 25px; }
h3 { margin-bottom: 8px; font-size: 17px; }
.lead { max-width: 520px; color: var(--muted); line-height: 1.85; }
.button-stack { display: grid; gap: 12px; width: 310px; margin-top: 28px; }
.button-stack button, .button-stack a { padding: 13px; }
.title-master-link { display: block; text-align: center; text-decoration: none; }
.title-ranking-button { display: flex; align-items: center; justify-content: space-between; }
.title-ranking-button span { padding: 3px 8px; color: white; background: var(--purple); border-radius: 999px; font-size: 11px; }
.idol-stage { position: relative; display: grid; place-items: center; min-height: 420px; overflow: hidden; border-radius: 32px; background: linear-gradient(160deg, #ffb0ce, #9f74e7 62%, #5f98e6); }
.idol-stage::before, .idol-stage::after { position: absolute; color: #fff7b3; font-size: 78px; content: "✦"; opacity: .8; }
.idol-stage::before { top: 22px; left: 30px; } .idol-stage::after { right: 33px; bottom: 25px; }
.character-art { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.character-art img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 9px 11px rgba(42, 25, 60, .24)); }
.idol-stage .title-character { z-index: 1; align-self: end; width: 310px; height: 405px; margin-bottom: -12px; }
.idol-figure { position: relative; z-index: 1; width: 190px; height: 265px; }
.idol-figure .head { position: absolute; top: 17px; left: 58px; width: 79px; height: 79px; border: 5px solid rgba(56,39,69,.78); border-radius: 48% 48% 43% 43%; background: #ffdec9; z-index: 2; }
.idol-figure .hair { position: absolute; top: 5px; left: 48px; width: 101px; height: 101px; border-radius: 51% 51% 43% 43%; background: #51375c; }
.idol-figure .body { position: absolute; top: 97px; left: 36px; width: 126px; height: 143px; border: 5px solid rgba(56,39,69,.78); border-radius: 58px 58px 17px 17px; background: linear-gradient(135deg, #fff, #ff78a7 58%, #a670e4); }
.idol-figure .ribbon { position: absolute; top: 112px; left: 79px; z-index: 3; width: 43px; height: 29px; border-radius: 50% 50% 40% 40%; background: var(--yellow); }
.idol-figure .arm { position: absolute; z-index: 0; top: 116px; width: 32px; height: 113px; border: 5px solid rgba(56,39,69,.78); border-radius: 28px; background: #ffdec9; transform: rotate(27deg); }
.idol-figure .arm.left { left: 23px; } .idol-figure .arm.right { right: 23px; transform: rotate(-27deg); }
.idol-figure .leg { position: absolute; z-index: 0; top: 221px; width: 31px; height: 54px; border-radius: 0 0 14px 14px; background: #fff; }
.idol-figure .leg.left { left: 58px; } .idol-figure .leg.right { right: 58px; }
.idol-figure.style-b .hair { background: #e69e47; border-radius: 50% 50% 33% 33%; } .idol-figure.style-b .body { background: linear-gradient(135deg, #fff9a8, #ffa36e 60%, #ff70a0); }
.idol-figure.style-c .hair { background: #39689c; border-radius: 35% 65% 45% 55%; } .idol-figure.style-c .body { background: linear-gradient(135deg, #dbffff, #68b5e4 58%, #9273e2); }
.stage-caption { position: absolute; bottom: 18px; z-index: 3; color: white; font-size: 14px; font-weight: 800; }

.primary, .secondary, .danger, .small-button, .choice-button { border-radius: 12px; font-weight: 800; transition: transform .12s, filter .12s; }
.primary:hover:not(:disabled), .secondary:hover:not(:disabled), .small-button:hover:not(:disabled), .choice-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.03); }
.primary { padding: 12px 21px; color: white; background: linear-gradient(120deg, var(--pink), #fa7a68); box-shadow: 0 5px 0 #c63768; }
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #c63768; }
.secondary { padding: 11px 19px; color: var(--purple); background: #f0e8ff; border: 1px solid #d8c6f6; }
.danger { padding: 11px 19px; color: white; background: var(--danger); }
.small-button { padding: 8px 12px; color: var(--purple); background: #f0e8ff; }
.button-note { margin: 3px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

.creation-layout { display: grid; grid-template-columns: 1fr 350px; gap: 36px; }
.form-card, .panel, .stat-card, .route-card, .battle-panel, .result-card { border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 5px 17px rgba(93,51,100,.06); }
.form-card { padding: 25px; }
.field { display: grid; gap: 8px; margin: 20px 0; font-weight: 800; }
.field input { width: 100%; padding: 12px 14px; color: var(--ink); border: 2px solid var(--line); border-radius: 10px; }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.option { padding: 13px 8px; color: var(--ink); background: #faf6fc; border: 2px solid var(--line); border-radius: 12px; font-weight: 800; }
.option.selected { color: var(--pink-dark); background: #fff0f5; border-color: var(--pink); }
.option[data-avatar="b"].selected { color: #b85b16; background: #fff2df; border-color: #f39a35; }
.option[data-avatar="c"].selected { color: #2862a9; background: #eaf4ff; border-color: #5c9ded; }
.creation-preview { display: grid; align-content: center; justify-items: center; padding: 26px; color: white; border-radius: 23px; background: linear-gradient(155deg, #a373e3, #ff7bac); }
.creation-preview h2 { font-size: 20px; }.creation-preview .creator-character { width: 210px; height: 305px; margin: 2px 0 -8px; }
.preview-stats { width: 100%; margin-top: 12px; padding: 13px; color: var(--ink); background: rgba(255,255,255,.92); border-radius: 14px; }

.dashboard { display: grid; grid-template-columns: 1.15fr .85fr; gap: 21px; }
.month-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.month-title { display: flex; align-items: baseline; gap: 13px; }.month-title strong { font-size: 31px; }.month-title span { color: var(--muted); font-size: 14px; }
.rank-badge { padding: 10px 16px; color: white; font-weight: 900; background: linear-gradient(125deg, #ffb044, #ff5b91); border-radius: 999px; }
.hero-card { position: relative; display: grid; grid-template-columns: 190px 1fr; min-height: 278px; padding: 22px; overflow: hidden; background: linear-gradient(135deg, #ffe6ef, #eee3ff); border: 1px solid #f0d2e5; border-radius: 20px; }
.hero-card .hero-character { align-self: end; width: 185px; height: 275px; margin: 0 0 -22px -14px; }
.hero-card .idol-figure { align-self: end; transform: scale(.84); transform-origin: bottom left; }.hero-card .idol-figure .arm.left { transform: rotate(-22deg); }.hero-card .idol-figure .arm.right { transform: rotate(20deg); }
.hero-info { z-index: 1; align-self: center; }.hero-info h2 { margin-bottom: 2px; font-size: 29px; }.hero-info > p { color: var(--muted); }
.ability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.ability { padding: 9px 11px; background: rgba(255,255,255,.76); border-radius: 10px; }.ability span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }.ability strong { display: block; margin-top: 2px; font-size: 19px; }.ability strong small { color: var(--muted); font-size: 11px; font-weight: 800; }
.stat-line { display: flex; align-items: center; gap: 10px; }.stat-line + .stat-line { margin-top: 10px; }.stat-line span { width: 58px; color: var(--muted); font-size: 12px; font-weight: 800; }.meter { flex: 1; height: 11px; overflow: hidden; background: #f0e6ef; border-radius: 99px; }.meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), #7fe4cc); border-radius: inherit; }.meter.pink > i { background: linear-gradient(90deg, var(--pink), #ff9bbb); }.stat-line b { width: 39px; text-align: right; }
.menu-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.menu-button { min-height: 113px; padding: 18px; text-align: left; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 11px rgba(90,50,95,.05); }.menu-button:hover { border-color: var(--pink); transform: translateY(-2px); }.menu-button .menu-icon { display: block; margin-bottom: 5px; font-size: 27px; }.menu-button strong { display: block; font-size: 16px; }.menu-button small { color: var(--muted); font-size: 11px; }
.quick-panel { margin-top: 19px; padding: 17px; }.quick-panel h3 { margin-bottom: 12px; }.mini-list { display: grid; gap: 8px; }.mini-list div { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }.mini-list strong { color: var(--ink); }

/* Home screen: a warm agency-office command layout. */
.home-screen { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 665px; padding: 18px 22px 15px; overflow: hidden; color: #453644; background: #f7e7d5; isolation: isolate; }
.home-office-atmosphere { position: absolute; z-index: -2; inset: 0; background: url("assets/idol-agency-office.webp") center / cover no-repeat; }
.home-office-atmosphere::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(255,252,247,.25), rgba(255,249,240,.1) 41%, rgba(72,40,39,.18)); }
.home-screen::before { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: radial-gradient(ellipse at 16% 100%, rgba(255,247,232,.42), transparent 36%), linear-gradient(90deg, rgba(64,34,40,.1), transparent 37%); pointer-events: none; }
.home-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 49px; padding: 0 8px 10px 11px; color: #503d46; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
.home-summary p { margin: 0 0 1px; color: #b56b75; font-size: 10px; font-weight: 900; letter-spacing: .18em; }.home-summary strong { margin-right: 10px; font-size: 22px; letter-spacing: .04em; }.home-summary > div:first-child > span { color: #816d6c; font-size: 12px; font-weight: 800; }
.home-hp { flex: 0 1 320px; min-width: 190px; max-width: 360px; padding: 7px 12px 8px; background: rgba(255,253,248,.9); border: 1px solid rgba(255,255,255,.94); border-radius: 12px; box-shadow: 0 5px 14px rgba(90,53,50,.13), inset 0 1px 0 #fff; backdrop-filter: blur(7px); }.home-hp-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }.home-hp-heading > span { color: #a95f68; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.home-hp-heading > span b { color: #db6678; font-size: 12px; }.home-hp-heading strong { margin: 0; color: #8f555e; font-size: 15px; line-height: 1; letter-spacing: .02em; }.home-hp-heading strong small { color: #9d8587; font-size: 10px; }.home-hp-meter { height: 9px; overflow: hidden; background: #eadfdc; border: 1px solid rgba(202,164,163,.38); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(101,58,65,.12); }.home-hp-meter i { display: block; height: 100%; background: linear-gradient(90deg, #e7667c, #f29a78); border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); transition: width .25s ease; }
.home-rank { display: flex; align-items: baseline; gap: 4px; padding: 7px 12px 7px 14px; color: #fffaf3; text-shadow: none; background: linear-gradient(125deg, #c8787a, #a77093); border: 1px solid rgba(255,255,255,.8); border-radius: 13px; box-shadow: 0 5px 14px rgba(95,54,63,.2); }.home-rank span { font-size: 9px; font-weight: 900; letter-spacing: .09em; }.home-rank strong { margin: 0; font-size: 25px; line-height: 1; }.home-rank small { font-size: 11px; font-weight: 900; }
.home-command-dock { display: grid; grid-template-columns: 1.18fr repeat(3, 1fr); gap: 8px; padding: 8px; background: rgba(255,251,246,.8); border: 1px solid rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 9px 24px rgba(90,54,52,.17), inset 0 1px 0 #fff; backdrop-filter: blur(8px); }
.home-command { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 59px; padding: 8px 9px; color: #5b4750; text-align: left; background: rgba(255,255,255,.67); border: 1px solid rgba(213,181,171,.55); border-radius: 12px; transition: transform .14s, background .14s, box-shadow .14s; }.home-command:hover { background: #fffdf9; box-shadow: 0 6px 12px rgba(119,73,76,.13); transform: translateY(-2px); }.home-command.current { color: #fff; background: linear-gradient(120deg, #cc7a7e, #ae7492); border-color: rgba(255,255,255,.76); box-shadow: 0 5px 0 #9a5d70, 0 9px 15px rgba(104,60,74,.18); }.home-command.current:hover { background: linear-gradient(120deg, #d98684, #b87598); }
.command-icon { display: grid; place-items: center; width: 35px; height: 35px; color: #b36b76; background: #fbe8de; border: 1px solid #efd0c1; border-radius: 11px; font-size: 20px; font-weight: 900; }.home-command.current .command-icon { color: #ffe4ab; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.33); }.home-command small, .home-command strong, .home-command em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.home-command small { color: #a98687; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .1em; }.home-command.current small { color: #f9ded6; }.home-command strong { font-size: 14px; line-height: 1.25; }.home-command em { color: #917d7d; font-size: 9px; font-style: normal; }.home-command.current em { color: #fff2ec; }.home-command b { color: #c39a91; font-size: 17px; font-weight: 500; }.home-command.current b { color: #fff3d4; }
.home-workspace { display: grid; grid-template-columns: minmax(245px, 1fr) minmax(270px, .92fr) 292px; align-items: end; min-height: 0; padding: 16px 2px 10px; gap: 18px; }
.home-character-area { position: relative; align-self: end; min-height: 312px; pointer-events: none; }.home-character-halo { position: absolute; bottom: 3px; left: 3px; width: 270px; height: 270px; background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,238,224,.62) 46%, transparent 68%); border-radius: 50%; filter: blur(1px); }.home-character { position: absolute; z-index: 1; bottom: -10px; left: -5px; width: 292px; height: 355px; }.home-character img { filter: drop-shadow(0 13px 12px rgba(66,40,41,.32)); }.home-idol-name { position: absolute; z-index: 2; bottom: 14px; left: 210px; min-width: 140px; padding: 9px 12px 10px; color: #56424c; background: rgba(255,253,249,.88); border: 1px solid rgba(255,255,255,.95); border-radius: 3px 13px 13px 13px; box-shadow: 0 7px 17px rgba(91,55,56,.18); backdrop-filter: blur(7px); }.home-idol-name span, .home-idol-name small { display: block; }.home-idol-name span { color: #b17278; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.home-idol-name strong { display: block; margin: 1px 0 2px; font-size: 17px; }.home-idol-name small { color: #887377; font-size: 9px; font-weight: 800; white-space: nowrap; }
.home-next-card { align-self: end; max-width: 370px; margin-bottom: 4px; padding: 19px 20px; color: #4e3f45; background: rgba(255,253,249,.9); border: 1px solid rgba(255,255,255,.96); border-radius: 19px; box-shadow: 0 12px 27px rgba(75,43,44,.18), inset 0 1px 0 #fff; backdrop-filter: blur(10px); }.home-card-kicker { margin: 0 0 3px; color: #be7478; font-size: 9px; font-weight: 900; letter-spacing: .16em; }.home-next-card h2 { margin: 0 0 3px; font-size: 20px; }.home-next-card > p:not(.home-card-kicker) { margin-bottom: 15px; color: #877275; font-size: 12px; }.home-vital { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; margin-bottom: 14px; }.home-vital > span { color: #967377; font-size: 11px; font-weight: 900; }.home-vital .meter { height: 9px; background: #eadfd6; }.home-vital .meter i { background: linear-gradient(90deg, #e89b78, #e8c35d); }.home-vital strong { color: #a76566; font-size: 15px; }.home-vital strong small { color: #9d8785; font-size: 10px; }.home-start-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 13px; color: #fffaf1; background: linear-gradient(115deg, #cb797c, #a86d91); border: 1px solid rgba(255,255,255,.75); border-radius: 10px; box-shadow: 0 4px 0 #98566c; font-size: 13px; font-weight: 900; }.home-start-button:hover { filter: brightness(1.06); transform: translateY(-1px); }.home-start-button:active { box-shadow: 0 1px 0 #98566c; transform: translateY(3px); }.home-start-button span { color: #ffeab5; font-size: 17px; }
.home-status-panel { align-self: center; padding: 16px; color: #4d3e46; background: rgba(255,253,250,.9); border: 1px solid rgba(255,255,255,.96); border-radius: 18px; box-shadow: 0 12px 28px rgba(72,42,42,.2), inset 0 1px 0 #fff; backdrop-filter: blur(10px); }.home-status-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.home-status-panel header p { margin: 0 0 1px; color: #be777a; font-size: 9px; font-weight: 900; letter-spacing: .13em; }.home-status-panel header h2 { margin: 0; font-size: 19px; }.home-status-badge { padding: 4px 7px; color: #9b6e9d; background: #f5ecfa; border-radius: 99px; font-size: 9px; font-weight: 900; }.home-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.home-status-item { position: relative; min-height: 68px; padding: 10px; overflow: hidden; color: #5b4650; background: linear-gradient(135deg, #fffdf9, #f8f1eb); border: 1px solid #ecddd3; border-radius: 10px; }.home-status-item::after { position: absolute; right: -9px; bottom: -18px; color: currentColor; content: "✦"; font-size: 47px; opacity: .08; }.home-status-item span, .home-status-item small { display: block; font-weight: 900; }.home-status-item span { font-size: 11px; }.home-status-item strong { display: block; margin: 1px 0; font-size: 24px; line-height: 1; }.home-status-item small { color: #a99392; font-size: 8px; letter-spacing: .08em; }.home-status-item.expression { color: #c16c7b; }.home-status-item.influence { color: #7e72b0; }.home-status-item.adaptation { color: #5d9a9b; }.home-status-item.luck { color: #b68844; }.home-goal { display: flex; align-items: baseline; justify-content: space-between; margin-top: 11px; padding: 10px 11px; background: #f7eadf; border-radius: 10px; }.home-goal span { color: #907376; font-size: 10px; font-weight: 900; }.home-goal strong { color: #ae686e; font-size: 18px; }.home-goal strong small { font-size: 10px; }
.home-resource-bar { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; min-height: 55px; padding: 8px 14px; color: #5a4749; background: rgba(255,252,247,.86); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; box-shadow: 0 8px 19px rgba(71,41,42,.15); backdrop-filter: blur(9px); }.home-resource-bar div { display: grid; justify-items: center; gap: 2px; }.home-resource-bar span { color: #967b7b; font-size: 9px; font-weight: 900; }.home-resource-bar strong { color: #5d484e; font-size: 16px; }.home-resource-bar strong small { color: #a76870; font-size: 10px; }.home-resource-bar i { width: 1px; height: 26px; background: #ead8cd; }

/* Compact circular command controls and a clear character/status separation. */
.home-screen { grid-template-rows: auto auto minmax(0, 1fr); }
.home-command-dock { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 1px 20px 7px; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.home-command { display: flex; flex: 0 0 88px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 88px; min-height: 88px; height: 88px; padding: 7px; color: #684e56; text-align: center; background: rgba(255,253,249,.9); border: 1px solid rgba(255,255,255,.97); border-radius: 50%; box-shadow: 0 7px 17px rgba(104,64,63,.2), inset 0 1px 0 #fff; backdrop-filter: blur(8px); }
.home-command:hover { background: #fffdf9; box-shadow: 0 11px 20px rgba(104,64,63,.24), inset 0 1px 0 #fff; transform: translateY(-4px) scale(1.03); }.home-command:active { transform: translateY(1px) scale(.99); }
.home-command-route { flex-basis: 116px; width: 116px; min-height: 116px; height: 116px; color: #fff; background: linear-gradient(145deg, #d48783, #a96e95); border: 3px solid rgba(255,252,244,.9); box-shadow: 0 6px 0 #955b71, 0 12px 21px rgba(104,60,74,.26), inset 0 1px 0 rgba(255,255,255,.45); }.home-command-route:hover { background: linear-gradient(145deg, #dd9088, #b6749c); box-shadow: 0 8px 0 #955b71, 0 16px 23px rgba(104,60,74,.3), inset 0 1px 0 rgba(255,255,255,.45); }
.home-command .command-icon { width: 29px; height: 29px; color: #b76b75; background: #fbe8de; border-color: #efd0c1; border-radius: 50%; font-size: 16px; }.home-command-route .command-icon { width: 37px; height: 37px; color: #ffe8af; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.36); font-size: 20px; }.home-command strong { overflow: visible; font-size: 12px; line-height: 1.05; white-space: normal; }.home-command-route strong { font-size: 15px; }.home-command small { overflow: visible; color: #a98687; font-size: 7px; line-height: 1; letter-spacing: .08em; white-space: normal; }.home-command-route small { color: #ffe9e0; font-size: 8px; }.home-command em, .home-command b { display: none; }
.home-workspace { grid-template-columns: minmax(360px, 1fr) 292px; align-items: stretch; gap: 22px; padding: 5px 8px 9px; }.home-character-area { min-height: 390px; }.home-character-halo { bottom: 0; left: 11px; width: 302px; height: 302px; }.home-character { bottom: -6px; left: 0; width: 312px; height: 380px; }.home-idol-name { bottom: 19px; left: 226px; }
.home-status-panel { align-self: center; }.home-status-item small { display: none; }.home-status-item em { display: block; color: #a99392; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .06em; }.home-status-item strong { font-size: 29px; }.home-account-values { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }.home-account-values div { padding: 9px 10px; background: #f9f1e9; border: 1px solid #edddd0; border-radius: 10px; }.home-account-values span, .home-account-values strong { display: block; }.home-account-values span { color: #967b7b; font-size: 9px; font-weight: 900; }.home-account-values strong { margin-top: 1px; color: #72515a; font-size: 16px; }.home-account-values strong small { color: #a76870; font-size: 9px; }

/* Final spacing and contrast pass for the office home. */
.home-summary { min-height: 62px; padding: 1px 8px 8px 11px; }.home-summary > div:first-child { padding: 7px 13px 8px; background: rgba(255,253,248,.86); border: 1px solid rgba(255,255,255,.94); border-radius: 12px; box-shadow: 0 5px 14px rgba(90,53,50,.13), inset 0 1px 0 #fff; backdrop-filter: blur(7px); }.home-summary p { color: #a95f68; text-shadow: none; }.home-summary strong { color: #4d3943; text-shadow: none; }.home-summary > div:first-child > span { color: #715d63; text-shadow: none; }
.home-command-dock { justify-content: center; gap: 20px; padding: 4px 18px 11px; }.home-command { flex-basis: 104px; width: 104px; min-height: 104px; height: 104px; gap: 3px; }.home-command-route { flex-basis: 138px; width: 138px; min-height: 138px; height: 138px; }.home-command .command-icon { width: 33px; height: 33px; font-size: 18px; }.home-command-route .command-icon { width: 45px; height: 45px; font-size: 23px; }.home-command strong { font-size: 14px; }.home-command-route strong { font-size: 17px; }.home-command small { font-size: 8px; }.home-command-route small { font-size: 9px; }
.home-workspace { padding-top: 0; }.home-character-area { min-height: 390px; }.home-character { bottom: 90px; left: 0; width: 290px; height: 310px; }.home-character-halo { bottom: 75px; }.home-idol-name { bottom: 230px; left: 82px; }

/* Full-width command pills and an uncluttered character area. */
.home-summary .home-rank, .home-summary .home-rank span, .home-summary .home-rank strong, .home-summary .home-rank small { color: #fffaf3; text-shadow: none; }
.home-command-dock { display: grid; grid-template-columns: 1.18fr repeat(3, 1fr); align-items: center; justify-content: stretch; gap: 12px; width: 100%; padding: 6px 5px 13px; }
.home-command, .home-command-route { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-content: center; align-items: center; justify-content: start; gap: 0 10px; width: auto; min-height: 86px; height: 86px; padding: 10px 18px; text-align: left; border-radius: 999px; }.home-command-route { min-height: 102px; height: 102px; padding-inline: 21px; border-width: 2px; }.home-command .command-icon, .home-command-route .command-icon { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 18px; }.home-command-route .command-icon { width: 42px; height: 42px; font-size: 22px; }.home-command strong, .home-command-route strong { margin: 0; font-size: 15px; line-height: 1.08; white-space: nowrap; }.home-command-route strong { font-size: 18px; }.home-command-route strong br { display: none; }.home-command small, .home-command-route small { margin-top: 2px; font-size: 8px; line-height: 1; text-align: left; white-space: nowrap; }.home-command-route small { font-size: 9px; }
.home-idol-name { display: none; }.home-status-panel header { align-items: flex-start; }.home-status-panel header h2 { margin-bottom: 3px; }.home-idol-summary { display: block; color: #887377; font-size: 9px; font-weight: 800; white-space: nowrap; }

/* Decorative idol-logo art is used as the full surface of each command. */
.home-command, .home-command-route { position: relative; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; isolation: isolate; background-color: #57345d; background-position: center; background-size: cover; border-color: rgba(255,255,255,.86); box-shadow: 0 7px 17px rgba(83,42,75,.26), inset 0 1px 0 rgba(255,255,255,.55); }.home-command::before { position: absolute; z-index: 0; inset: 0; content: ""; background: linear-gradient(90deg, rgba(37,16,62,.05) 0 36%, rgba(36,16,57,.28) 56%, rgba(28,12,43,.76) 100%); }.home-command:hover { background-color: #57345d; filter: saturate(1.08) brightness(1.06); }
.command-route-art { background-image: url("assets/commands/task-route.webp"); }.command-shop-art { color: #553653; background-image: url("assets/commands/shop.webp"); }.command-status-art { background-image: url("assets/commands/status.webp"); }.command-settings-art { background-image: url("assets/commands/settings.webp"); }
.command-shop-art::before { background: linear-gradient(90deg, rgba(255,247,238,.04) 0 37%, rgba(255,250,246,.42) 58%, rgba(255,252,247,.94) 100%); }.command-status-art::before { background: linear-gradient(90deg, rgba(12,59,126,.02) 0 37%, rgba(9,38,107,.22) 60%, rgba(8,28,86,.78) 100%); }.command-settings-art::before { background: linear-gradient(90deg, rgba(51,16,53,.02) 0 36%, rgba(43,14,48,.28) 59%, rgba(31,8,38,.8) 100%); }
.command-copy { position: relative; z-index: 1; width: 53%; padding: 7px 13px 8px; color: #fff; background: linear-gradient(90deg, transparent, rgba(27,8,43,.12) 8%, rgba(26,8,41,.52)); text-shadow: 0 2px 5px rgba(23,6,38,.88); }.command-shop-art .command-copy { color: #52334f; background: linear-gradient(90deg, transparent, rgba(255,253,248,.35) 10%, rgba(255,253,248,.88)); text-shadow: 0 1px 1px rgba(255,255,255,.8); }.command-copy strong, .command-copy small { display: block; margin: 0; white-space: nowrap; }.command-copy strong, .home-command-route .command-copy strong { font-size: 16px; line-height: 1.16; }.home-command-route .command-copy strong { font-size: 20px; }.command-copy small, .home-command-route .command-copy small { margin-top: 3px; color: #ffe5a5; font-size: 8px; font-weight: 900; letter-spacing: .12em; line-height: 1; text-align: left; }.command-shop-art .command-copy small { color: #a35a83; }.home-command .command-icon { display: none; }

/* Keep the artwork layer when the command enlarges on hover. */
.home-command.command-route-art:hover { background-image: url("assets/commands/task-route.webp"); }.home-command.command-shop-art:hover { background-image: url("assets/commands/shop.webp"); }.home-command.command-status-art:hover { background-image: url("assets/commands/status.webp"); }.home-command.command-settings-art:hover { background-image: url("assets/commands/settings.webp"); }

/* The beginner guide lives in the open floor area of the produce home. */
.home-help-command { position: absolute; z-index: 3; right: 0; bottom: 30px; width: clamp(172px, 21vw, 266px); min-height: 86px; height: 86px; pointer-events: auto; }
.command-help-art { color: #49354f; background-color: #f7e9d8; background-image: radial-gradient(circle at 19% 48%, rgba(255,255,255,.94) 0 10%, transparent 10.5%), radial-gradient(circle at 19% 48%, #d9879b 0 21%, transparent 21.5%), linear-gradient(135deg, #f9dfba, #f3b7c9 48%, #aa75ae); }
.command-help-art::before { background: linear-gradient(90deg, rgba(255,250,238,.02) 0 37%, rgba(255,250,244,.47) 58%, rgba(255,253,248,.95) 100%); }
.command-help-art::after { position: absolute; z-index: 1; left: calc(19% - 12px); top: 50%; width: 24px; color: #fff; content: "?"; font-size: 25px; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 2px 4px rgba(91,49,83,.26); transform: translateY(-52%); }
.command-help-art .command-copy { color: #57374f; background: linear-gradient(90deg, transparent, rgba(255,253,248,.42) 10%, rgba(255,253,248,.9)); text-shadow: 0 1px 1px rgba(255,255,255,.88); }
.command-help-art .command-copy small { color: #a35a83; }
.home-command.command-help-art:hover { background-image: radial-gradient(circle at 19% 48%, rgba(255,255,255,.98) 0 10%, transparent 10.5%), radial-gradient(circle at 19% 48%, #df8ba0 0 21%, transparent 21.5%), linear-gradient(135deg, #ffe7c5, #f8bed0 48%, #b67cba); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 21px; }.section-head p { margin: 0; color: var(--muted); }.back-button { padding: 8px 12px; color: var(--purple); background: #f3edff; border-radius: 10px; font-weight: 800; }
.route-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }.route-card { position: relative; padding: 20px; overflow: hidden; }.route-card:nth-child(2) { border-color: #bbdfef; }.route-card:nth-child(3) { border-color: #ead5a0; }.route-number { display: inline-grid; place-items: center; width: 29px; height: 29px; margin-bottom: 10px; color: white; background: var(--pink); border-radius: 50%; font-size: 13px; font-weight: 900; }.route-card:nth-child(2) .route-number { background: var(--blue); }.route-card:nth-child(3) .route-number { background: #d29a25; }.route-card p { min-height: 35px; color: var(--muted); font-size: 13px; line-height: 1.45; }.route-nodes { display: flex; align-items: center; margin: 16px 0 20px; }.route-node { display: grid; place-items: center; width: 43px; height: 43px; color: white; background: var(--purple); border-radius: 50%; font-size: 20px; }.route-node + .route-node::before { width: 10px; height: 3px; margin-left: -2px; margin-right: -2px; background: #dacbe4; content: ""; }.route-node.rest { background: var(--mint); }.route-node.event { background: var(--yellow); }.route-node.live { background: var(--pink); }.route-node.sns { background: var(--blue); }.route-node.show { background: #8d6bd2; }
.route-card .primary { width: 100%; }

.task-layout { display: grid; grid-template-columns: 1fr 285px; gap: 23px; }.task-main { min-height: 430px; padding: 31px; }.task-kicker { margin-bottom: 7px; color: var(--pink-dark); font-size: 13px; font-weight: 900; letter-spacing: .12em; }.task-main > p { color: var(--muted); }.task-icon { display: grid; place-items: center; width: 73px; height: 73px; margin-bottom: 13px; font-size: 39px; background: #fff0f5; border-radius: 22px; }.lesson-options, .event-options { display: grid; gap: 12px; margin-top: 25px; }.lesson-option, .choice-button { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; text-align: left; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 14px; }.lesson-option:hover, .choice-button:hover { border-color: var(--pink); background: #fff8fb; }.gain { color: var(--pink-dark); font-weight: 900; }.event-options .choice-button { display: block; }.choice-button small { display: block; margin-top: 5px; color: var(--muted); }.progress-panel { padding: 20px; }.route-progress { display: grid; gap: 11px; margin-top: 18px; }.progress-step { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }.progress-step i { display: grid; place-items: center; flex: 0 0 27px; height: 27px; color: white; font-style: normal; background: #d6c9d9; border-radius: 50%; }.progress-step.current { color: var(--ink); font-weight: 900; }.progress-step.current i { background: var(--pink); box-shadow: 0 0 0 4px #ffe0ec; }.progress-step.done i { background: var(--mint); }

.battle-layout { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }.battle-status { display: grid; grid-template-columns: 1fr 230px 1fr; gap: 20px; align-items: center; }.combatant { padding: 16px; background: white; border: 1px solid var(--line); border-radius: 15px; }.combatant.enemy { text-align: right; }.combatant h3 { margin-bottom: 8px; }.health-line { display: flex; align-items: center; gap: 9px; }.enemy .health-line { justify-content: flex-end; }.health-line .meter { height: 13px; }.health-line .meter i { background: linear-gradient(90deg, #ff6c76, #ffa170); }.combatant small { color: var(--muted); }.turn-info { padding: 13px; text-align: center; background: #f5edff; border-radius: 15px; }.turn-info strong { display: block; font-size: 19px; }.battle-field { display: grid; grid-template-columns: 1fr 195px 1fr; gap: 22px; min-height: 218px; padding: 16px 46px 8px; overflow: hidden; background: linear-gradient(145deg, #34334c, #73518d 58%, #f38bad); border-radius: 20px; box-shadow: inset 0 -21px 0 rgba(24,34,67,.22); }.battle-avatar { z-index: 1; display: grid; align-items: end; justify-items: center; min-width: 0; }.battle-avatar .battle-character { width: 172px; height: 220px; margin-bottom: -13px; }.enemy-avatar { justify-self: end; }.enemy-intent { z-index: 2; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto auto; align-self: center; padding: 12px; color: #56422d; text-align: left; background: #fffdf2; border: 2px solid #ffe16a; border-radius: 15px; box-shadow: 0 4px 0 rgba(68,40,69,.25); }.intent-kicker { grid-column: 1 / -1; margin-bottom: 5px; color: #93731d; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.intent-icon { grid-row: 2 / 4; align-self: center; font-size: 27px; }.enemy-intent strong { color: #755929; font-size: 12px; }.enemy-intent b { font-size: 17px; line-height: 1.18; }.enemy-intent small { grid-column: 1 / -1; margin-top: 7px; color: #806c50; font-size: 10px; line-height: 1.3; }.enemy-intent.attack { border-color: #ff9f91; background: #fff4f1; }.enemy-intent.attack .intent-kicker, .enemy-intent.attack strong { color: #ba554d; }.enemy-intent.attack b { color: #bd3f35; }.enemy-intent.focus { border-color: #bba0ff; background: #f6f1ff; }.enemy-intent.focus .intent-kicker, .enemy-intent.focus strong, .enemy-intent.focus b { color: #6943b4; }.enemy-intent.guard { border-color: #78d8bb; background: #effcf8; }.enemy-intent.guard .intent-kicker, .enemy-intent.guard strong, .enemy-intent.guard b { color: #21866c; }.battle-log { min-height: 22px; margin: 0; color: #775e7e; font-size: 13px; text-align: center; }.hand-panel { padding: 16px 19px; }.hand-head { display: flex; align-items: center; justify-content: space-between; }.energy { color: #ce7212; font-weight: 900; }.card-hand { display: flex; min-height: 164px; gap: 9px; margin-top: 12px; }.game-card { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 116px; min-height: 151px; padding: 11px; color: var(--ink); text-align: left; background: linear-gradient(145deg, #fff, #fff4fa); border: 2px solid #f3cadc; border-radius: 13px; box-shadow: 0 4px 0 #e0b9cf; }.game-card:hover:not(:disabled) { transform: translateY(-7px); border-color: var(--pink); }.game-card.costly { opacity: .5; }.card-cost { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; color: white; background: var(--purple); border-radius: 50%; font-size: 13px; font-weight: 900; }.card-icon { font-size: 22px; }.game-card strong { margin-top: 5px; font-size: 14px; }.game-card small { margin-top: 7px; color: var(--muted); line-height: 1.4; }.card-grade { margin-top: auto; color: #b27000; font-size: 11px; font-weight: 900; }.battle-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }.deck-count { color: var(--muted); font-size: 12px; }

.reward-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin: 24px 0; }.reward-card { position: relative; display: grid; gap: 10px; min-height: 215px; padding: 18px; text-align: left; background: white; border: 2px solid var(--line); border-radius: 17px; }.reward-card:hover { border-color: var(--yellow); background: #fffdf5; transform: translateY(-4px); }.reward-card .rarity { padding-right: 35px; color: #a98120; font-size: 11px; font-weight: 900; }.reward-card .card-cost { top: 13px; right: 13px; width: 31px; height: 31px; border: 2px solid #fff4cf; box-shadow: 0 2px 5px rgba(73,42,88,.24); font-size: 15px; }.reward-card .card-icon { color: var(--pink); font-size: 31px; }.reward-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }.reward-grade-preview { display: grid; gap: 9px; align-self: end; padding: 11px; color: #59465f; background: #faf6fc; border: 1px solid #eadfed; border-radius: 11px; }.reward-grade-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.reward-grade-title b { color: #765083; font-size: 11px; }.reward-grade-title small { color: #96839b; font-size: 8px; font-weight: 800; }.reward-effect-grade { display: grid; gap: 5px; }.reward-effect-grade + .reward-effect-grade { padding-top: 8px; border-top: 1px solid #eadfed; }.reward-effect-grade > b { color: #ad697c; font-size: 9px; }.reward-grade-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }.reward-grade-levels > span { min-width: 0; padding: 5px 6px; background: #fff; border: 1px solid #eee4ef; border-radius: 7px; }.reward-grade-levels i, .reward-grade-levels small { display: block; }.reward-grade-levels i { color: #a27428; font-size: 8px; font-style: normal; font-weight: 900; }.reward-grade-levels small { margin-top: 2px; overflow-wrap: anywhere; color: #68546e; font-size: 9px; font-weight: 800; line-height: 1.3; }.reward-select-label { padding: 8px 10px; color: white; text-align: center; background: linear-gradient(120deg,var(--pink),var(--purple)); border-radius: 999px; font-size: 11px; font-weight: 900; }
.rank-reward-screen { background: linear-gradient(145deg, #fff8e7, #fff2fa 53%, #eee8ff); }.rank-reward-panel { padding: 28px; border: 1px solid #ead39b; box-shadow: 0 12px 30px rgba(133,92,47,.12); }.rank-reward-heading { display: flex; align-items: center; gap: 15px; }.rank-reward-heading > span { display: grid; place-items: center; flex: 0 0 50px; height: 50px; color: white; background: linear-gradient(135deg, #e5ae39, #ed7a9b); border-radius: 15px; font-size: 27px; }.rank-reward-heading h3 { margin: 0 0 4px; }.rank-reward-heading p { margin: 0; color: var(--muted); font-size: 13px; }.rank-reward-card { border-color: #e7c766; box-shadow: 0 4px 0 rgba(183,132,31,.15); }.rank-reward-card:hover { border-color: #d79622; box-shadow: 0 8px 0 rgba(183,132,31,.2); }

.deck-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }.panel { padding: 20px; }.panel-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }.panel-header p { margin: 0; color: var(--muted); font-size: 12px; }.deck-list { display: grid; gap: 9px; }.deck-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 11px; align-items: center; padding: 10px; background: #fbf8fc; border-radius: 10px; }.deck-row .card-icon { font-size: 19px; }.deck-row small { color: var(--muted); }.deck-row .grade-label { color: #ac7716; font-size: 12px; font-weight: 900; }.deck-row button { padding: 7px 9px; color: var(--purple); background: #eee5ff; border-radius: 8px; font-size: 12px; font-weight: 800; }.deck-row button.remove { color: #bd445c; background: #ffe5eb; }.skill-list { display: grid; gap: 10px; }.skill-row { padding: 13px; background: #faf7ff; border: 1px solid #e2d4f4; border-radius: 12px; }.skill-row h3 { margin-bottom: 3px; }.skill-row p { margin-bottom: 10px; color: var(--muted); font-size: 12px; }.skill-row footer { display: flex; justify-content: space-between; align-items: center; }.skill-row footer span { color: #ad7315; font-size: 13px; font-weight: 900; }

.status-profile-screen { position: relative; min-height: 665px; padding: 0; overflow: hidden; color: #24315d; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,248,255,.96) 62%, rgba(239,246,255,.98)); isolation: isolate; }
.status-profile-screen::before { position: absolute; z-index: -2; inset: 0; content: ""; background: url("assets/commands/status.webp") center / cover no-repeat; opacity: .075; filter: saturate(.75); }
.status-profile-screen::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 17% 43%, rgba(255,255,255,.2), rgba(255,255,255,.76) 30%, transparent 54%), linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.78) 45%, rgba(255,255,255,.92)); pointer-events: none; }
.status-screen-header { position: relative; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; min-height: 87px; padding: 20px 28px 8px; }
.status-screen-header > div > p { margin: 0; color: #315ed0; font: 500 35px/1 Georgia, "Times New Roman", serif; letter-spacing: .035em; text-shadow: 0 1px 0 #fff; }.status-screen-header > div > p span { margin-left: 6px; color: #a990ee; font: 700 17px/1 "Yu Gothic UI", sans-serif; }.status-screen-header > div > small { display: block; margin: 3px 0 0 4px; color: #3864ce; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.status-home-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; color: #315ec5; background: rgba(255,255,255,.86); border: 1px solid #809bf0; border-radius: 10px; box-shadow: 0 5px 14px rgba(75,89,156,.1); font-size: 12px; font-weight: 900; transition: transform .14s, background .14s; }.status-home-button span { font-size: 19px; line-height: 1; }.status-home-button:hover { background: #fff; transform: translateY(-2px); }
.status-profile-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(350px, .78fr) minmax(0, 1.32fr); gap: 16px; min-height: 578px; padding: 0 22px 22px; }
.status-idol-showcase { position: relative; min-width: 0; min-height: 0; }.status-idol-showcase::before, .status-idol-showcase::after { position: absolute; z-index: 0; color: #9b8be6; content: "✦"; opacity: .46; }.status-idol-showcase::before { top: 30px; left: 18px; font-size: 29px; }.status-idol-showcase::after { top: 133px; right: 18px; font-size: 18px; }
.status-idol-halo { position: absolute; z-index: 0; left: -55px; bottom: -60px; width: 430px; height: 540px; background: radial-gradient(ellipse, rgba(193,220,255,.7), rgba(238,225,255,.43) 48%, transparent 71%); border-radius: 50%; filter: blur(2px); }
.status-idol-showcase .status-character { position: absolute; z-index: 1; left: -36px; bottom: -67px; width: 388px; height: 590px; }.status-idol-showcase .status-character img { object-position: center top; filter: drop-shadow(0 13px 15px rgba(55,51,99,.2)); }
.status-identity-card { position: absolute; z-index: 3; right: 2px; bottom: 24px; width: 286px; padding: 14px 15px 13px; background: rgba(255,253,255,.84); border: 1px solid rgba(156,144,226,.68); border-radius: 14px; box-shadow: 0 9px 24px rgba(69,63,125,.16), inset 0 1px 0 #fff; backdrop-filter: blur(13px); }
.status-identity-card header { padding-bottom: 9px; border-bottom: 1px solid rgba(159,151,210,.29); }.status-identity-card h2 { margin: 0; color: #263669; font-family: Georgia, "Yu Mincho", serif; font-size: 24px; letter-spacing: .04em; }.status-identity-card h2 span { margin-left: 5px; color: #dfa43c; font-size: 15px; }.status-identity-card header p { margin: 3px 0 0; color: #766e92; font-size: 9px; font-weight: 800; }
.status-profile-numbers { display: grid; grid-template-columns: .72fr 1.28fr; gap: 7px; padding: 10px 0; }.status-profile-numbers > div { min-width: 0; padding: 7px 9px; background: rgba(249,247,255,.75); border: 1px solid rgba(181,171,225,.45); border-radius: 9px; }.status-profile-numbers span { display: block; color: #786bb3; font-size: 8px; font-weight: 900; letter-spacing: .06em; }.status-profile-numbers strong { display: block; margin-top: 2px; color: #4f47a7; font: 500 23px/1.1 Georgia, serif; white-space: nowrap; }.status-profile-numbers strong small { color: #746d95; font: 800 9px/1 "Yu Gothic UI", sans-serif; }
.status-profile-hp { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; padding: 0 2px 10px; border-bottom: 1px solid rgba(159,151,210,.24); }.status-profile-hp > span { color: #5d5879; font-size: 9px; font-weight: 900; }.status-profile-hp > div { height: 7px; overflow: hidden; background: #e4e3eb; border-radius: 99px; }.status-profile-hp i { display: block; height: 100%; background: linear-gradient(90deg, #eb668e, #f69bb4); border-radius: inherit; }.status-profile-hp strong { color: #273763; font: 800 17px/1 Georgia, serif; }.status-profile-hp strong small { color: #77748a; font: 700 8px/1 "Yu Gothic UI", sans-serif; }
.status-mini-abilities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding-top: 10px; }.status-mini-abilities > div { display: grid; justify-items: center; gap: 2px; min-width: 0; }.status-mini-abilities > div > span { display: grid; place-items: center; width: 29px; height: 29px; color: #8e57c9; background: #f0e9ff; border: 1px solid #cdb8f0; border-radius: 50%; font-size: 15px; }.status-mini-abilities .influence > span { color: #377cc2; background: #e9f4ff; border-color: #b9d9f7; }.status-mini-abilities .adaptation > span { color: #27947e; background: #e7faf6; border-color: #b6e3d8; }.status-mini-abilities .luck > span { color: #c78b20; background: #fff7df; border-color: #ecd69d; }.status-mini-abilities strong { color: #4d4770; font-size: 10px; }.status-mini-abilities small { color: #7d7891; font-size: 7px; font-weight: 800; }
.status-detail-card { min-width: 0; min-height: 0; padding: 13px; background: rgba(255,255,255,.62); border: 1px solid rgba(149,164,227,.48); border-radius: 15px; box-shadow: 0 11px 28px rgba(65,72,128,.09), inset 0 1px 0 #fff; backdrop-filter: blur(9px); }
.status-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 11px; overflow: hidden; background: rgba(250,250,255,.75); border: 1px solid #c5c9e8; border-radius: 10px; }.status-tabs button { position: relative; z-index: 1; min-height: 42px; color: #394366; background: transparent; border-left: 1px solid #d7d9ec; font-size: 13px; font-weight: 900; transition: color .15s, background .15s; }.status-tabs button:first-of-type { border-left: 0; }.status-tabs button:hover { background: rgba(241,237,255,.75); }.status-tabs button.active { color: #e24476; background: linear-gradient(180deg, #fff, #fff7fa); box-shadow: inset 0 -3px 0 #ec5b88; }.status-tabs button:focus-visible { z-index: 2; outline-offset: -3px; }
.status-tab-panel { min-height: 479px; padding: 0; }
.status-ability-list { padding: 3px 15px 1px; background: rgba(255,255,255,.72); border: 1px solid rgba(179,188,224,.45); border-radius: 11px; }.status-stat-row { display: grid; grid-template-columns: 31px 72px minmax(90px, 1fr) 74px 30px; align-items: center; gap: 8px; min-height: 53px; border-bottom: 1px solid rgba(176,184,216,.32); }.status-stat-row:last-child { border-bottom: 0; }.status-stat-icon { display: grid; place-items: center; color: #ec5e89; font-size: 23px; }.status-stat-row > strong { color: #27345d; font-size: 13px; }.status-stat-track { height: 9px; overflow: hidden; background: #e6e7ef; border-radius: 99px; box-shadow: inset 0 1px 2px rgba(57,61,100,.1); }.status-stat-track i { display: block; height: 100%; background: linear-gradient(90deg, #ef668e, #f795b1); border-radius: inherit; }.status-stat-value { color: #273763; text-align: right; white-space: nowrap; }.status-stat-value b { font: 700 22px/1 Georgia, serif; }.status-stat-value small { color: #73788f; font-size: 9px; }.status-stat-row > em { color: #d48a20; font: 500 22px/1 Georgia, serif; text-align: center; }
.status-stat-row.expression .status-stat-icon, .status-stat-row.expression > em { color: #9b61d0; }.status-stat-row.expression .status-stat-track i { background: linear-gradient(90deg, #9e64d5, #c59be8); }.status-stat-row.influence .status-stat-icon, .status-stat-row.influence > em { color: #3e8bd6; }.status-stat-row.influence .status-stat-track i { background: linear-gradient(90deg, #3d8fd9, #71b3ea); }.status-stat-row.adaptation .status-stat-icon, .status-stat-row.adaptation > em { color: #2f9f88; }.status-stat-row.adaptation .status-stat-track i { background: linear-gradient(90deg, #37a890, #76cdbb); }.status-stat-row.luck .status-stat-icon, .status-stat-row.luck > em { color: #cf9224; }.status-stat-row.luck .status-stat-track i { background: linear-gradient(90deg, #e5a12d, #f3c56c); }
.status-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 11px; margin-top: 11px; }.status-producer-note, .status-overall { background: rgba(255,255,255,.7); border: 1px solid rgba(174,183,223,.5); border-radius: 11px; }.status-producer-note { padding: 11px 14px; }.status-producer-note > header { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(177,183,213,.35); }.status-producer-note > header span { color: #7187e5; }.status-producer-note h3 { margin: 0; color: #293b70; font-size: 13px; }.status-note-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 0; }.status-note-row + .status-note-row { border-top: 1px solid rgba(177,183,213,.28); }.status-note-icon { display: grid; place-items: center; width: 31px; height: 31px; color: #9058c9; background: #eee6fb; border-radius: 50%; font-size: 17px; }.status-note-icon.goal { color: #de577c; background: #ffeaf0; }.status-note-row small { display: block; color: #79758a; font-size: 8px; }.status-note-row strong { display: inline-block; margin-top: 1px; color: #293864; font-size: 12px; }.status-note-row p { display: inline; margin: 0 0 0 8px; color: #77748b; font-size: 8px; }
.status-overall { display: grid; place-items: center; align-content: center; padding: 10px; text-align: center; background: linear-gradient(150deg, rgba(255,255,255,.8), rgba(241,235,255,.74)); }.status-overall > span { color: #4c4b78; font-size: 12px; font-weight: 900; }.status-overall > strong { margin-top: 6px; color: #514baa; font: 500 48px/.85 Georgia, serif; }.status-overall > b { min-width: 50px; padding: 4px 8px 6px; margin-top: 10px; color: #fff; background: linear-gradient(145deg, #8f80db, #6958bd); clip-path: polygon(0 0,100% 0,92% 78%,50% 100%,8% 78%); font: 500 22px/1 Georgia, serif; }.status-overall > small { margin-top: 8px; color: #858097; font-size: 7px; }
.status-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; min-height: 61px; padding: 7px 8px 12px; border-bottom: 1px solid rgba(167,177,218,.35); }.status-panel-heading p { margin: 0 0 2px; color: #7775ae; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.status-panel-heading h3 { margin: 0; color: #263564; font-size: 19px; }.status-panel-heading > span { color: #77748d; font-size: 10px; }.status-panel-heading > span strong { color: #5650ae; font-size: 13px; }
.status-history-list { display: grid; gap: 7px; max-height: 408px; padding: 11px 5px 3px; overflow: auto; }.status-history-row { position: relative; display: grid; grid-template-columns: 94px 86px 1fr 1fr; align-items: center; gap: 8px; min-height: 58px; padding: 9px 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(186,190,220,.42); border-radius: 10px; }.status-history-turn { color: #354273; font-size: 12px; font-weight: 900; }.status-history-result { padding: 5px 7px; color: #33866f; text-align: center; background: #e9f8f3; border-radius: 99px; font-size: 9px; font-weight: 900; }.status-history-result.lose { color: #b55b69; background: #fff0f3; }.status-history-row div small, .status-history-row div strong { display: block; }.status-history-row div small { color: #878297; font-size: 8px; }.status-history-row div strong { margin-top: 2px; color: #5650a0; font-size: 12px; }.status-history-row > em { position: absolute; top: -4px; right: 7px; padding: 2px 5px; color: white; background: #ed668c; border-radius: 99px; font-size: 7px; font-style: normal; font-weight: 900; }
.status-empty { display: grid; justify-items: center; align-content: center; min-height: 360px; color: #7d7891; text-align: center; }.status-empty > span { color: #b09ade; font-size: 47px; }.status-empty strong { margin-top: 8px; color: #4a4a72; font-size: 15px; }.status-empty p { margin: 5px 0 0; font-size: 10px; }
.status-achievement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 12px 4px 3px; }.status-achievement { position: relative; display: grid; grid-template-columns: 43px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 92px; padding: 11px; background: rgba(255,255,255,.75); border: 1px solid rgba(183,188,220,.45); border-radius: 11px; }.status-achievement > span { display: grid; place-items: center; width: 41px; height: 41px; color: #b0abbc; background: #ecebf0; border-radius: 50%; font-size: 20px; }.status-achievement div strong, .status-achievement div small { display: block; }.status-achievement div strong { color: #5c5a6c; font-size: 11px; }.status-achievement div small { margin-top: 4px; color: #95909f; font-size: 8px; }.status-achievement > em { position: absolute; right: 8px; bottom: 7px; color: #aaa5b3; font-size: 7px; font-style: normal; font-weight: 900; }.status-achievement.unlocked { background: linear-gradient(135deg, rgba(255,253,241,.9), rgba(250,244,255,.88)); border-color: #e5ce91; box-shadow: inset 0 1px 0 #fff; }.status-achievement.unlocked > span { color: #fff; background: linear-gradient(145deg, #e8b645, #ad78d5); box-shadow: 0 3px 8px rgba(126,88,161,.2); }.status-achievement.unlocked div strong { color: #473f70; }.status-achievement.unlocked div small { color: #7d748b; }.status-achievement.unlocked > em { color: #bc7d20; }
.settings-card { max-width: 690px; padding: 28px; }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }.setting-row:last-child { border-bottom: 0; }.setting-row p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.result-screen { display: grid; grid-template-columns: .9fr 1.1fr; gap: 27px; align-items: center; padding: 42px; }.result-medal { display: grid; place-items: center; min-height: 390px; overflow: hidden; color: white; text-align: center; background: linear-gradient(145deg, #f4a84a, #ff6494 50%, #8d5dd1); border-radius: 27px; }.result-medal.fail { background: linear-gradient(145deg, #769bc6, #956cae); }.result-medal span { font-size: 90px; filter: drop-shadow(0 8px 0 rgba(0,0,0,.12)); }.result-medal h1 { margin-bottom: 0; font-size: 37px; }.result-card { padding: 27px; }.final-rank { display: flex; align-items: baseline; gap: 8px; padding: 14px 19px; color: var(--pink-dark); background: #fff0f5; border-radius: 15px; }.final-rank strong { font-size: 42px; }.final-rank small { color: var(--muted); }.result-evaluation { padding: 13px 16px; margin-top: 10px; color: #56406a; background: linear-gradient(120deg, #fff8db, #f7eaff); border: 1px solid #ead29b; border-radius: 14px; }.result-evaluation > span { color: #99702a; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.result-evaluation > strong { display: block; color: #7b4b9b; font-size: 29px; line-height: 1.15; }.result-evaluation > strong small { font-size: 12px; }.result-evaluation p { margin: 5px 0 2px; color: #6e5a70; font-size: 10px; font-weight: 800; }.result-evaluation > small { color: #96839a; font-size: 8px; }.result-numbers { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 11px 0; }.result-numbers div { padding: 9px 11px; background: #faf6fc; border-radius: 10px; }.result-numbers span { display: block; color: var(--muted); font-size: 10px; }.result-numbers b { font-size: 16px; }.result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

/* Completed produce runs, kept separately from the current autosave. */
.ranking-screen { min-height: 665px; padding: 31px 38px 38px; background: linear-gradient(145deg, #fffafc, #f7f1ff 58%, #edf7ff); }
.ranking-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 25px; }
.ranking-header h1 { margin-bottom: 7px; font-size: 36px; }
.ranking-header p:last-child { margin-bottom: 0; color: var(--muted); }
.ranking-columns, .ranking-row { display: grid; grid-template-columns: 50px minmax(150px, .9fr) 92px 145px minmax(330px, 1.6fr); align-items: center; gap: 10px; }
.ranking-columns { padding: 0 18px 8px; color: #89768f; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.ranking-list { display: grid; gap: 10px; max-height: 500px; overflow: auto; padding: 2px 4px 6px; }
.ranking-row { min-height: 94px; padding: 11px 18px; background: rgba(255,255,255,.9); border: 1px solid #eaddea; border-radius: 17px; box-shadow: 0 6px 16px rgba(92,53,102,.08); }
.ranking-row:first-child { border-color: #e5bf54; box-shadow: 0 7px 19px rgba(159,116,30,.13); }
.ranking-position { display: grid; place-items: center; width: 38px; height: 38px; color: white; background: linear-gradient(135deg, #9e70d7, #6c54b8); border-radius: 50%; font: 900 19px/1 Georgia, serif; }
.ranking-row:first-child .ranking-position { color: #714c0e; background: linear-gradient(135deg, #fff0a8, #e8b842); box-shadow: 0 3px 0 #c78b27; }
.ranking-idol { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ranking-avatar { flex: 0 0 56px; width: 56px; height: 68px; overflow: hidden; background: linear-gradient(145deg, #ffeaf2, #eee5ff); border-radius: 13px; }
.ranking-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ranking-idol > div:last-child { min-width: 0; }
.ranking-idol strong, .ranking-idol small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-idol strong { color: #4d3658; font-size: 17px; }
.ranking-idol small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.difficulty-badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 3px 7px; margin-top: 5px; color: #71527e; background: #f0e8f7; border: 1px solid #ddcde8; border-radius: 999px; font-size: 8px; font-weight: 900; line-height: 1; white-space: nowrap; }
.difficulty-badge b { font-size: inherit; }
.difficulty-badge.difficulty-easy { color: #24745f; background: #e9f8f2; border-color: #bfe5d8; }
.difficulty-badge.difficulty-hard { color: #a14f31; background: #fff0e8; border-color: #f0c3ad; }
.difficulty-badge.difficulty-hardcore { color: #fff; background: linear-gradient(120deg, #713b71, #bc4d62); border-color: #d68aa0; }
.ranking-final-rank { padding: 9px 12px; text-align: center; background: #f6f0fa; border-radius: 12px; }
.ranking-final-rank small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; }
.ranking-final-rank strong { color: #714f84; font-size: 26px; }
.ranking-final-rank strong span { margin-left: 2px; font-size: 11px; }
.ranking-final-rank.top { background: #fff1d1; }
.ranking-final-rank.top strong { color: #c16c20; }
.ranking-evaluation { min-width: 0; padding: 9px 10px; background: linear-gradient(135deg, #fff7dc, #f4ebff); border: 1px solid #ead8ad; border-radius: 11px; }
.ranking-evaluation small, .ranking-evaluation strong { display: block; }
.ranking-evaluation small { color: #8f753d; font-size: 8px; font-weight: 900; }
.ranking-evaluation strong { margin-top: 3px; overflow: hidden; color: #704a91; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-evaluation strong span { font-size: 9px; }
.ranking-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.ranking-stat { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; align-items: center; padding: 7px; background: #faf7fc; border-radius: 10px; }
.ranking-stat > .ranking-affinity-icon { grid-row: 1 / span 2; width: 22px; height: 22px; margin-right: 4px; }
.ranking-stat small { color: #8a778e; font-size: 8px; font-weight: 800; white-space: nowrap; }
.ranking-stat strong { color: #55405d; font-size: 15px; line-height: 1.1; }
.ranking-empty { display: grid; place-items: center; min-height: 430px; padding: 40px; text-align: center; background: rgba(255,255,255,.72); border: 1px dashed #d9c9e2; border-radius: 22px; }
.ranking-empty > span { color: #d0a83a; font-size: 68px; }
.ranking-empty h2 { margin: -25px 0 4px; }
.ranking-empty p { color: var(--muted); }
.toast { position: fixed; right: 28px; bottom: 28px; z-index: 10; max-width: 360px; padding: 13px 16px; color: white; background: rgba(56,39,69,.92); border-radius: 12px; box-shadow: var(--shadow); animation: toast .25s ease-out; }.toast.good { background: #23866f; }.toast.bad { background: #bc465a; } @keyframes toast { from { transform: translateY(15px); opacity: 0; } }
.tips-screen { padding: 28px 30px 38px; }.help { max-width: 920px; margin: 0 auto; }.tips-head { align-items: flex-start; margin-bottom: 18px; }.tips-head h2 { margin-bottom: 5px; }.tips-head p { max-width: 620px; line-height: 1.55; }
.tips-button { font-weight: 900; }.tips-hero { display: flex; gap: 16px; align-items: center; padding: 19px 21px; color: #513259; background: linear-gradient(105deg, #fff0f6, #f2eafe 58%, #e9f7ff); border: 1px solid #ebcfea; border-radius: 18px; box-shadow: 0 6px 16px rgba(105, 63, 121, .07); }.tips-hero > span { display: grid; place-items: center; flex: 0 0 46px; height: 46px; color: white; background: linear-gradient(135deg, var(--pink), #a76ee5); border-radius: 14px; font-size: 25px; }.tips-hero strong { display: block; font-size: 16px; }.tips-hero p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.tips-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0; }.tips-nav a { padding: 7px 12px; color: var(--purple); text-decoration: none; background: #f1eaff; border: 1px solid #dfd0f4; border-radius: 999px; font-size: 12px; font-weight: 900; }.tips-nav a:hover { color: white; background: var(--purple); }
.tips-section { margin: 18px 0; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 4px 13px rgba(91, 51, 100, .05); scroll-margin-top: 16px; }.tips-section-title { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 15px; }.tips-section-title > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; color: white; background: linear-gradient(135deg, var(--pink), #c270df); border-radius: 50%; font-size: 13px; font-weight: 900; }.tips-section-title h3 { margin: 0 0 3px; font-size: 18px; }.tips-section-title p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tips-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; padding: 0; margin: 0; list-style: none; counter-reset: tips-step; }.tips-steps li { position: relative; min-height: 112px; padding: 16px 14px 14px 46px; background: #fbf8fc; border-radius: 12px; counter-increment: tips-step; }.tips-steps li::before { position: absolute; top: 15px; left: 14px; display: grid; place-items: center; width: 23px; height: 23px; color: white; background: var(--mint); border-radius: 50%; content: counter(tips-step); font-size: 11px; font-weight: 900; }.tips-steps strong, .tips-steps span { display: block; }.tips-steps strong { margin-bottom: 5px; font-size: 14px; }.tips-steps span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.tips-grid { display: grid; gap: 10px; }.status-tips-grid { grid-template-columns: repeat(3, 1fr); }.battle-tips-grid { grid-template-columns: repeat(4, 1fr); }.money-tips-grid { grid-template-columns: repeat(3, 1fr); }.tips-card { min-width: 0; padding: 14px; background: #fbf8fc; border: 1px solid #f0e5f1; border-radius: 12px; }.tips-card.vital { background: #fff5f7; border-color: #ffd8e4; }.tips-card.accent { background: #f5f0ff; border-color: #ded0fa; }.tips-card h4 { margin: 0 0 7px; font-size: 14px; }.tips-card p, .tips-card ul { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.tips-card p strong, .tips-card li strong { color: var(--ink); }.tips-card ul { padding-left: 18px; }.tips-card li { margin: 4px 0; }
.tips-note { padding: 11px 13px; margin: 12px 0 0; color: #6b5871; background: #fff9e9; border-left: 4px solid var(--yellow); border-radius: 0 9px 9px 0; font-size: 12px; line-height: 1.6; }.tips-callout { padding: 14px 16px; margin-top: 12px; color: #514159; background: linear-gradient(100deg, #fff0f6, #f4efff); border-radius: 12px; }.tips-callout strong { color: var(--pink-dark); font-size: 13px; }.tips-callout p { margin: 4px 0 0; color: #64516d; font-size: 12px; line-height: 1.6; }
.tips-rank-flow { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; gap: 7px; align-items: center; }.tips-rank-flow > div { display: grid; gap: 4px; min-height: 69px; padding: 12px; text-align: center; background: #fbf8fc; border: 1px solid #f0e5f1; border-radius: 12px; }.tips-rank-flow > div strong { color: var(--purple); font-size: 13px; }.tips-rank-flow > div span { color: var(--muted); font-size: 11px; }.tips-rank-flow > div.rank-result { background: linear-gradient(135deg, #fff0f5, #f7ebff); border-color: #efcde0; }.tips-rank-flow > b { color: var(--pink-dark); text-align: center; font-size: 17px; }.tips-goal-heading { margin: 18px 0 9px; font-size: 14px; }.tips-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.tips-goals article { display: grid; gap: 3px; padding: 11px; background: #faf7fd; border: 1px solid #ece0ef; border-radius: 11px; }.tips-goals strong { color: var(--purple); font-size: 12px; }.tips-goals b { color: var(--pink-dark); font-size: 17px; }.tips-goals span { color: var(--muted); font-size: 10px; }.goal-callout b { color: var(--pink-dark); }
.empty { padding: 26px; color: var(--muted); text-align: center; }

/* 名前ごとのイラストを、手札・報酬・編成で同じ見た目にする。 */
.card-art { display: block; overflow: hidden; background: #eee1f4; }.card-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.custom-card-art { position: relative; color: white; background: linear-gradient(145deg, #ff68a1, #8e67db); }.custom-card-art-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; }.custom-card-art > img { position: relative; z-index: 1; }
.card-hand { min-height: 228px; }.game-card { min-height: 218px; }.card-cost { z-index: 2; }.game-card .card-art { height: 96px; margin: -1px -1px 0; border-radius: 9px; }.game-card strong { margin-top: 7px; }.game-card small { margin-top: 5px; }
.reward-card { min-height: 328px; }.reward-card .card-art { height: 160px; border-radius: 10px; }
.deck-card-art { width: 34px; height: 34px; border-radius: 8px; }

.master-back { display: inline-flex; align-items: center; min-height: 32px; color: var(--purple); text-decoration: none; }
.master-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; margin-bottom: 14px; background: #fff2f8; border: 1px solid #ffd2e3; border-radius: 15px; }.master-edit-bar strong { color: var(--pink-dark); }.master-edit-bar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }.master-edit-actions { display: flex; flex: 0 0 auto; gap: 9px; }.master-save-notice { padding: 10px 14px; margin: -4px 0 14px; color: #39725e; background: #effcf7; border: 1px solid #b8e6d3; border-radius: 12px; font-size: 13px; font-weight: 800; }
.master-number { width: 76px; min-height: 32px; padding: 4px 7px; color: var(--ink); background: #fff; border: 1px solid #d9bfce; border-radius: 7px; font: inherit; font-weight: 800; }.master-number:focus { border-color: var(--pink); outline: 3px solid #ffe0ec; outline-offset: 1px; }.master-inline-number { display: inline-block; margin-left: 3px; }.master-inline-number .master-number { width: 62px; }
.master-text-editor { padding: 22px 23px; border-top: 1px solid var(--line); background: #fffcfe; }.master-text-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 15px; }.master-text-editor-head h3 { margin: 0; }.master-text-editor-head p { margin: 0; color: var(--muted); font-size: 13px; }.master-text-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.master-text-fields label { display: grid; gap: 6px; padding: 10px; background: white; border: 1px solid #f0dce5; border-radius: 10px; }.master-text-fields label > span { color: var(--muted); font-size: 12px; font-weight: 800; }.master-text { width: 100%; min-height: 34px; padding: 7px 9px; color: var(--ink); background: white; border: 1px solid #d9bfce; border-radius: 7px; font: inherit; line-height: 1.45; }.master-textarea { min-height: 72px; resize: vertical; }.master-text:focus { border-color: var(--pink); outline: 3px solid #ffe0ec; outline-offset: 1px; }
.master-story-editor { padding: 22px 23px; border-top: 1px solid var(--line); background: #fffcfe; }.master-story-scene { padding: 15px; margin-top: 14px; background: #f8f4ff; border: 1px solid #e2d7f0; border-radius: 13px; }.master-story-scene-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.master-story-scene-head > div { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; }.master-story-scene-head label { display: flex; flex: 1 1 auto; align-items: center; gap: 7px; }.master-story-scene-head label > span, .master-story-scene-id, .master-story-line label > span { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 800; }.master-story-scene-id { padding: 5px 7px; color: var(--purple); background: #ece3fa; border-radius: 6px; font-family: Consolas, "Cascadia Mono", monospace; }.master-story-scene-head small { padding-top: 6px; color: var(--muted); white-space: nowrap; }.master-story-lines { display: grid; gap: 9px; }.master-story-line { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 9px 12px; padding: 12px; background: white; border: 1px solid #eadfea; border-radius: 10px; }.master-story-line-head { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; color: var(--purple); }.master-story-line label { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 7px; }.master-story-line label > span { padding-top: 8px; }.master-story-character-texts { display: grid; gap: 8px; }.master-story-character-texts label { grid-template-columns: 138px minmax(0, 1fr); }.master-story-line-added { border-color: #d8c4ed; background: #fcfaff; }
.master-select { min-height: 34px; padding: 5px 8px; color: var(--ink); background: white; border: 1px solid #d9bfce; border-radius: 7px; font: inherit; font-weight: 800; }.master-select:focus { border-color: var(--pink); outline: 3px solid #ffe0ec; outline-offset: 1px; }.master-custom-row { background: #f7f1ff; }.master-custom-summary { padding: 18px 23px; border-top: 1px solid var(--line); background: #f8f4ff; }.master-custom-summary h3 { margin-bottom: 11px; }.master-custom-summary > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid #e5d9f3; }.master-custom-summary > div:first-of-type { border-top: 0; }.master-custom-summary small { color: var(--muted); }.master-effect-editor, .master-card-builder { padding: 22px 23px; border-top: 1px solid var(--line); background: #fbf9ff; }.master-effect-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.master-effect-card { padding: 13px; background: white; border: 1px solid #e4d8f0; border-radius: 12px; }.master-effect-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }.master-effect-add, .master-extra-effect { display: flex; align-items: center; gap: 7px; }.master-extra-effects { display: grid; gap: 7px; margin-top: 10px; }.master-extra-effects > small { color: var(--muted); font-size: 12px; }.master-extra-effect .master-number { width: 62px; }.master-extra-effect .master-count-input { width: 51px; }.remove-effect { padding: 6px 8px; color: #bc465a; background: #ffe6ed; border-radius: 7px; font-size: 11px; font-weight: 800; }.master-builder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }.master-builder-grid label { display: grid; gap: 6px; }.master-builder-grid label > span { color: var(--muted); font-size: 12px; font-weight: 800; }.master-builder-description { grid-column: 1 / -1; }
.master-enemy-table { min-width: 1530px; }.master-enemy-table th:last-child, .master-enemy-table td:last-child { min-width: 430px; }.master-enemy-actions { display: grid; gap: 9px; }.master-enemy-action { padding: 10px; background: #fff8f4; border: 1px solid #f2d5c9; border-left: 4px solid #e47962; border-radius: 9px; }.master-enemy-action-focus { background: #f8f4ff; border-color: #ddd0f2; border-left-color: #8a68c3; }.master-enemy-action-guard { background: #effaf6; border-color: #c5e8dc; border-left-color: #46a988; }.master-enemy-action header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }.master-enemy-action header strong { color: var(--ink); font-size: 14px; }.master-enemy-action header small, .master-enemy-action-fields span, .master-enemy-action-label > span { color: var(--muted); font-size: 11px; font-weight: 800; }.master-enemy-action-fields { display: flex; align-items: end; gap: 10px; }.master-enemy-action-fields label { display: grid; gap: 3px; }.master-enemy-action-fields .master-select { min-width: 145px; }.master-enemy-action p { margin: 7px 0; color: var(--purple); font-size: 12px; font-weight: 800; }.master-enemy-action-label { display: grid; gap: 3px; }.master-enemy-action-label .master-text { min-height: 30px; padding-block: 4px; font-size: 12px; }.master-custom-summary > article { display: grid; gap: 12px; padding: 15px 0; border-top: 1px solid #e5d9f3; }.master-custom-summary > article > div { display: flex; justify-content: space-between; gap: 14px; }.master-custom-summary > article .master-enemy-actions { max-width: 620px; }
.master-skill-table { min-width: 1240px; }.master-skill-table th:nth-child(5), .master-skill-table td:nth-child(5) { min-width: 460px; }.master-skill-effects { display: grid; gap: 8px; }.master-skill-effect { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px; background: rgba(255,255,255,.78); border: 1px solid #eadfea; border-radius: 9px; }.master-skill-effect > label { display: flex; align-items: center; gap: 5px; }.master-skill-effect > label > span, .master-skill-turns > span, .master-builder-field-label { color: var(--muted); font-size: 11px; font-weight: 800; }.master-skill-turns { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }.master-skill-turn { display: inline-flex; align-items: center; gap: 2px; }.master-skill-turn .master-number { width: 50px; }.master-skill-turn .remove-effect { min-width: 24px; padding: 6px 5px; }.master-add-skill-effect { justify-self: start; }.master-remove-skill { white-space: nowrap; }.master-builder-field-label { display: block; margin-bottom: 7px; font-size: 12px; }.skill-effect-summary { display: block; margin-top: -5px; color: var(--purple); font-size: 11px; font-weight: 800; line-height: 1.5; }
.master-builder-error { padding: 10px 12px; margin: 0 0 12px; color: #a92f4c; background: #fff0f3; border: 1px solid #efb4c2; border-radius: 9px; font-size: 13px; font-weight: 800; }
.master-screen { min-height: 680px; }.master-screen h1 { margin: 0 0 7px; font-size: 38px; }.master-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }.master-tab { padding: 10px 14px; color: var(--purple); background: #f1eaff; border: 1px solid #d8c6f6; border-radius: 999px; font-weight: 800; }.master-tab:hover, .master-tab.selected { color: white; background: linear-gradient(120deg, var(--pink), #b85de0); border-color: transparent; }.master-tab span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 5px; padding: 0 6px; color: inherit; background: rgba(255,255,255,.22); border-radius: 99px; font-size: 11px; }.master-panel { min-height: 400px; padding: 0; overflow: hidden; }.master-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(110deg, #fff9fc, #f6f0ff); }.master-panel-head h2 { margin: 0 0 5px; }.master-panel-head p, .master-help, .master-note { color: var(--muted); }.master-panel-head code { color: var(--pink-dark); }.master-count { flex: 0 0 auto; padding: 7px 10px; color: var(--purple); background: #eee4ff; border-radius: 99px; font-size: 13px; font-weight: 900; }.master-table-wrap { overflow: auto; }.master-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }.master-table th { position: sticky; top: 0; padding: 12px 14px; color: #6d4f80; text-align: left; background: #f8f2ff; white-space: nowrap; }.master-table td { padding: 12px 14px; vertical-align: top; border-top: 1px solid var(--line); color: #55445c; line-height: 1.5; }.master-table tr:hover td { background: #fff9fc; }.master-table code { color: var(--pink-dark); font-size: 12px; }.master-note { padding: 15px 23px; margin: 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.65; }.master-balance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }.master-balance-grid article { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 61px; padding: 14px 22px; background: white; }.master-balance-grid span { color: var(--muted); font-size: 13px; }.master-balance-grid strong { color: var(--purple); font-size: 16px; }.master-source { min-height: 400px; max-height: 620px; margin: 0; padding: 22px 25px; overflow: auto; color: #e7e9ff; background: #252232; font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; line-height: 1.65; tab-size: 2; white-space: pre; }.master-source:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

@media (max-width: 1050px) { body { min-width: 760px; }.app-shell { width: calc(100vw - 24px); }.title-screen { padding: 38px; gap: 25px; }.card-hand { gap: 5px; }.game-card { min-width: 92px; padding: 8px; }.game-card strong { font-size: 12px; }.battle-field { padding-inline: 28px; }.ranking-screen { padding-inline: 24px; }.ranking-columns, .ranking-row { grid-template-columns: 40px minmax(130px, .8fr) 78px 122px minmax(290px, 1.5fr); gap: 7px; }.ranking-row { padding-inline: 10px; }.ranking-avatar { flex-basis: 48px; width: 48px; }.ranking-stats { gap: 3px; }.ranking-stat { padding-inline: 4px; }.ranking-stat > .ranking-affinity-icon { display: none; }.ranking-stat { grid-template-columns: 1fr; } }

/* Shop: a boutique lobby followed by tangible display-shelf catalogues. */
.shop-lobby { min-height: 665px; padding: 0; overflow: hidden; color: #44333e; background: #f9e8e5; }
.shop-lobby-scene { position: relative; min-height: 665px; overflow: hidden; background: url("assets/shop/idol-boutique.webp") center / cover no-repeat; isolation: isolate; }
.shop-lobby-scene::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(255,251,247,.92) 0%, rgba(255,250,247,.72) 34%, rgba(255,250,247,.08) 68%, rgba(57,24,52,.12)); }
.shop-lobby-scene::after { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 36%; content: ""; background: linear-gradient(0deg, rgba(66,30,49,.27), transparent); pointer-events: none; }
.shop-lobby-header { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 29px; color: #4e344c; }
.shop-lobby-header > div:first-child { padding: 9px 15px 10px; background: rgba(255,251,247,.73); border: 1px solid rgba(255,255,255,.86); border-radius: 14px; box-shadow: 0 7px 19px rgba(76,35,57,.13), inset 0 1px 0 #fff; backdrop-filter: blur(7px); }
.shop-lobby-header p, .shop-welcome p, .shop-shelf-section header p { margin: 0; color: #a8647c; font-size: 9px; font-weight: 900; letter-spacing: .18em; }.shop-lobby-header h2 { margin: 3px 0 2px; font-family: Georgia, "Yu Mincho", serif; font-size: 23px; letter-spacing: .055em; }.shop-lobby-header span { color: #826a76; font-size: 11px; font-weight: 800; }
.shop-lobby-header-actions, .shop-catalog-actions { display: flex; align-items: center; gap: 9px; }.shop-wallet, .shop-catalog-actions > span { padding: 9px 13px; color: #755066; background: rgba(255,251,247,.82); border: 1px solid rgba(255,255,255,.9); border-radius: 999px; box-shadow: 0 5px 14px rgba(76,35,57,.11); font-size: 11px; font-weight: 800; }.shop-wallet strong, .shop-catalog-actions strong { margin-left: 5px; color: #af5974; font-size: 15px; }
.shop-exit { padding: 9px 13px; color: #654a5c; background: rgba(255,251,247,.87); border: 1px solid rgba(255,255,255,.92); border-radius: 999px; box-shadow: 0 5px 14px rgba(76,35,57,.12); font-size: 12px; font-weight: 900; transition: transform .14s, background .14s; }.shop-exit:hover { background: #fff; transform: translateY(-2px); }
.shop-welcome { position: absolute; z-index: 2; top: 138px; left: 60px; width: 395px; }.shop-welcome p { margin-bottom: 9px; color: #a65774; }.shop-welcome h1 { margin: 0 0 12px; color: #4e344c; font-family: Georgia, "Yu Mincho", serif; font-size: 32px; line-height: 1.24; letter-spacing: .045em; text-shadow: 0 1px 0 rgba(255,255,255,.85); }.shop-welcome > span { display: block; max-width: 355px; color: #6e5a67; font-size: 13px; font-weight: 700; line-height: 1.75; }
.shop-command-ring { position: absolute; z-index: 3; bottom: 52px; left: 60px; display: flex; gap: 20px; align-items: center; }
.shop-command-button { position: relative; width: 184px; height: 184px; padding: 0; overflow: hidden; color: #fff; text-align: center; border: 3px solid rgba(255,249,240,.9); border-radius: 50%; box-shadow: 0 9px 0 #76506c, 0 17px 26px rgba(61,27,53,.34), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .16s, box-shadow .16s, filter .16s; isolation: isolate; }.shop-command-button:hover { box-shadow: 0 12px 0 #76506c, 0 23px 31px rgba(61,27,53,.38), inset 0 1px 0 rgba(255,255,255,.6); filter: brightness(1.08) saturate(1.08); transform: translateY(-7px) scale(1.025); }.shop-command-button:active { box-shadow: 0 3px 0 #76506c, 0 9px 15px rgba(61,27,53,.31); transform: translateY(4px); }
.shop-command-art { position: absolute; z-index: -2; inset: 0; background: center / cover no-repeat; }.shop-deck-command .shop-command-art { background-image: url("assets/shop/deck-command.webp"); }.shop-skill-command .shop-command-art { background-image: url("assets/shop/skill-command.webp"); }.shop-command-button::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, rgba(31,13,40,.04), rgba(34,11,45,.13) 42%, rgba(29,9,39,.88)); }
.shop-command-copy { position: absolute; right: 13px; bottom: 18px; left: 13px; display: grid; gap: 2px; justify-items: center; text-shadow: 0 2px 5px rgba(24,5,30,.82); }.shop-command-copy small { color: #ffe8ad; font-size: 7px; font-weight: 900; letter-spacing: .11em; }.shop-command-copy strong { font-size: 24px; line-height: 1.05; letter-spacing: .08em; }.shop-command-copy em { color: #f9dfe6; font-size: 10px; font-style: normal; font-weight: 800; }
.shop-clerk { position: absolute; z-index: 2; right: 4%; bottom: -7px; width: 300px; pointer-events: none; }.shop-clerk img { display: block; width: 100%; height: auto; filter: drop-shadow(0 15px 12px rgba(51,22,43,.31)); }.shop-clerk-bubble { position: absolute; top: 118px; left: -184px; width: 206px; padding: 12px 14px; color: #624257; background: rgba(255,252,249,.92); border: 1px solid rgba(255,255,255,.94); border-radius: 15px 15px 3px 15px; box-shadow: 0 8px 19px rgba(73,30,56,.18); backdrop-filter: blur(7px); }.shop-clerk-bubble::after { position: absolute; right: -11px; bottom: 12px; width: 19px; height: 19px; background: inherit; border-top: 1px solid rgba(255,255,255,.9); border-right: 1px solid rgba(255,255,255,.9); content: ""; transform: rotate(45deg); }.shop-clerk-bubble strong, .shop-clerk-bubble span { position: relative; z-index: 1; display: block; }.shop-clerk-bubble strong { margin-bottom: 3px; color: #a75b78; font-size: 13px; }.shop-clerk-bubble span { color: #75616c; font-size: 11px; line-height: 1.5; }
.shop-floor-caption { position: absolute; z-index: 2; right: 33px; bottom: 21px; color: rgba(255,249,238,.91); font-family: Georgia, serif; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 2px 5px rgba(42,17,36,.5); }.shop-floor-caption span { padding: 0 6px; color: #ffeab5; }

.shop-catalog { min-height: 665px; padding: 25px 28px 30px; color: #553547; background: linear-gradient(rgba(255,248,246,.91), rgba(248,233,235,.94)), url("assets/shop/idol-boutique.webp") center / cover fixed; }.shop-catalog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 17px; margin-bottom: 10px; background: rgba(255,253,249,.83); border: 1px solid rgba(255,255,255,.95); border-radius: 17px; box-shadow: 0 8px 19px rgba(73,30,56,.11), inset 0 1px 0 #fff; }.shop-catalog-header p { margin: 0 0 3px; color: #a96179; font-size: 9px; font-weight: 900; letter-spacing: .17em; }.shop-catalog-header h2 { margin: 0 0 3px; font-family: Georgia, "Yu Mincho", serif; font-size: 26px; letter-spacing: .05em; }.shop-catalog-header > div:first-child > span { color: #806976; font-size: 12px; font-weight: 700; }.shop-market-rule { display: inline-block; padding: 6px 11px; margin: 0 0 12px 10px; color: #785968; background: rgba(255,251,246,.73); border: 1px solid rgba(237,211,220,.85); border-radius: 999px; font-size: 10px; font-weight: 800; }
.shop-shelf-section { position: relative; margin-top: 14px; padding: 15px 17px 27px; overflow: hidden; color: #fff6f5; background: linear-gradient(130deg, rgba(52,25,43,.94), rgba(76,35,58,.91)); border: 1px solid rgba(246,211,188,.58); border-radius: 18px; box-shadow: 0 12px 23px rgba(73,30,56,.19), inset 0 1px 0 rgba(255,255,255,.17); }.shop-shelf-section::before { position: absolute; z-index: 0; right: 0; bottom: 11px; left: 0; height: 18px; content: ""; background: linear-gradient(0deg, #4a221e, #8c4f38 42%, #d5a777 48%, #70402f 62%, #3f1e1c); box-shadow: 0 7px 0 rgba(35,14,20,.5), 0 12px 10px rgba(28,10,18,.36); }.shop-shelf-section::after { position: absolute; z-index: 0; top: 59px; right: 0; bottom: 0; left: 0; content: ""; background-image: radial-gradient(circle at 12% 23%, rgba(255,239,197,.09) 0 1px, transparent 1.5px), radial-gradient(circle at 71% 74%, rgba(255,239,197,.07) 0 1px, transparent 1.5px); opacity: .7; pointer-events: none; }.shop-shelf-section > header { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 0 2px 11px; border-bottom: 1px solid rgba(255,223,201,.22); }.shop-shelf-section > header > span { display: grid; place-items: center; width: 30px; height: 30px; color: #71445f; background: linear-gradient(135deg, #fff0bd, #f3bc88); border-radius: 50%; box-shadow: 0 2px 0 rgba(43,15,28,.34); }.shop-shelf-section header p { color: #f2c6cb; }.shop-shelf-section header h3 { margin: 2px 0 0; color: #fff8f3; font-family: Georgia, "Yu Mincho", serif; font-size: 19px; letter-spacing: .04em; }.shop-shelf-section header small { margin-left: auto; color: #f5d89d; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.shop-shelf-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; padding: 15px 2px 0; }.shop-special-grid { grid-template-columns: minmax(0, 340px); }.shelf-product { position: relative; display: grid; min-width: 0; overflow: hidden; color: #4e3546; background: linear-gradient(145deg, #fffdfb, #f7e9eb); border: 1px solid #f5d7cf; border-radius: 12px 12px 7px 7px; box-shadow: 0 6px 0 #6d3a31, 0 11px 14px rgba(25,7,18,.32), inset 0 1px 0 #fff; transition: transform .15s, box-shadow .15s; }.shelf-product:hover { box-shadow: 0 9px 0 #6d3a31, 0 15px 18px rgba(25,7,18,.35), inset 0 1px 0 #fff; transform: translateY(-4px); }.shelf-product-art { padding: 8px 8px 0; }.shop-card-art { height: 121px; border: 1px solid #dec1c5; border-radius: 7px; box-shadow: 0 3px 8px rgba(81,37,57,.17); }.shelf-product-copy { min-width: 0; padding: 11px 12px 10px; }.shelf-product-kicker { display: block; overflow: hidden; color: #af6b78; font-size: 8px; font-weight: 900; letter-spacing: .095em; text-overflow: ellipsis; white-space: nowrap; }.shelf-product h3 { overflow: hidden; margin: 4px 0 4px; color: #52364a; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.shelf-product p { min-height: 28px; margin: 0; overflow: hidden; color: #826d79; font-size: 10px; font-weight: 700; line-height: 1.4; }.shelf-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 10px; }.shelf-grade, .shelf-price { color: #a86930; font-size: 10px; font-weight: 900; white-space: nowrap; }.shelf-price { color: #a15b75; }.shop-action-button { flex: 0 1 auto; padding: 7px 8px; color: #fffaf7; background: linear-gradient(120deg, #bd6d82, #86528c); border: 1px solid rgba(255,255,255,.58); border-radius: 999px; box-shadow: 0 2px 0 #70445c; font-size: 10px; font-weight: 900; white-space: nowrap; transition: filter .12s, transform .12s; }.shop-action-button:hover:not(:disabled) { filter: brightness(1.09); transform: translateY(-1px); }.shop-action-button:active:not(:disabled) { box-shadow: none; transform: translateY(2px); }.shop-remove-button { width: 100%; padding: 7px 8px 0; color: #ad6975; background: transparent; font-size: 9px; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }.shop-remove-button:hover:not(:disabled) { color: #c3425a; }
.effect-upgrade-panel { margin-top: 9px; padding-top: 8px; border-top: 1px solid #ead7dc; }.effect-upgrade-panel h4 { margin: 0 0 6px; color: #765367; font-size: 10px; }.effect-upgrade-list { display: grid; gap: 5px; }.effect-upgrade-choice { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 7px; align-items: center; width: 100%; padding: 7px 8px; color: #654556; text-align: left; background: #fffaf8; border: 1px solid #e8cbd4; border-radius: 8px; }.effect-upgrade-choice:hover:not(:disabled) { background: #fff0f4; border-color: #cf8399; transform: translateY(-1px); }.effect-upgrade-choice > span { display: flex; gap: 5px; align-items: baseline; }.effect-upgrade-choice b { color: #a15772; font-size: 9px; }.effect-upgrade-choice small { color: #9a8290; font-size: 8px; }.effect-upgrade-choice strong { grid-column: 1; overflow-wrap: anywhere; font-size: 10px; line-height: 1.3; }.effect-upgrade-choice strong i { color: #c26a7f; font-style: normal; }.effect-upgrade-choice em { grid-column: 2; grid-row: 1 / 3; padding: 4px 6px; color: #fff; background: linear-gradient(120deg,#bd6d82,#86528c); border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }.effect-upgrade-choice:disabled em { color: #8c7883; background: #e4dadd; }.shelf-upgrade-hint { color: #8d7180; font-size: 9px; font-weight: 800; }
.task-option-area .effect-upgrade-panel { max-width: 700px; margin: 0 auto; padding: 14px; background: rgba(255,255,255,.72); border: 1px solid rgba(217,175,188,.75); border-radius: 14px; }.task-option-area .effect-upgrade-panel h4 { font-size: 13px; }.task-option-area .effect-upgrade-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.task-option-area .effect-upgrade-choice { min-height: 58px; padding: 10px 12px; }.task-option-area .effect-upgrade-choice b,.task-option-area .effect-upgrade-choice strong { font-size: 12px; }.task-option-area .effect-upgrade-choice small,.task-option-area .effect-upgrade-choice em { font-size: 10px; }
.luck-product { grid-template-columns: 76px 1fr; align-items: center; min-height: 116px; }.luck-product-icon { display: grid; place-items: center; width: 55px; height: 55px; margin-left: 13px; font-size: 29px; background: linear-gradient(145deg, #ffefbf, #f5b870); border: 2px solid #fff8db; border-radius: 50%; box-shadow: 0 4px 0 #bd7b47; }.luck-product .shelf-product-copy { padding-left: 0; }.luck-product p { min-height: 0; }
.skill-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.skill-product { grid-template-columns: 67px minmax(0, 1fr); align-items: center; min-height: 130px; }.skill-product-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-left: 12px; color: #fff; background: linear-gradient(145deg, #d67c98, #81559a); border: 2px solid #fff0e9; border-radius: 50%; box-shadow: 0 4px 0 #714765; font-size: 22px; }.skill-product .shelf-product-copy { padding-left: 0; }.skill-product.sns .skill-product-mark { background: linear-gradient(145deg, #6e9ed6, #6b5eb5); }.skill-product.show .skill-product-mark { background: linear-gradient(145deg, #e49b65, #b4527f); }.skill-product.boss .skill-product-mark { background: linear-gradient(145deg, #c4a458, #855399); }.skill-product.common .skill-product-mark { background: linear-gradient(145deg, #74bba6, #6284b8); }.owned-mark { color: #3e9b7d; }.shop-catalog-note { padding: 11px 13px; margin: 13px 2px 0; color: #735866; background: rgba(255,251,247,.81); border-left: 4px solid #d78591; border-radius: 0 10px 10px 0; font-size: 11px; font-weight: 700; }

@media (max-width: 1050px) { .shop-welcome { left: 42px; }.shop-command-ring { left: 42px; gap: 14px; }.shop-command-button { width: 165px; height: 165px; }.shop-command-copy strong { font-size: 21px; }.shop-clerk { right: 1.5%; width: 277px; }.shop-clerk-bubble { top: 105px; left: -162px; width: 183px; }.shop-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.shop-special-grid { grid-template-columns: minmax(0, 330px); }.skill-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Produce flow: boutique-inspired route planning and activity selection. */
.route-select-screen, .task-select-screen { position: relative; min-height: 665px; padding: 25px 28px 24px; overflow: hidden; color: #553b4a; background: #efdadd; isolation: isolate; }
.produce-backdrop { position: absolute; z-index: 0; inset: 0; background-position: center; background-size: cover; pointer-events: none; }
.route-select-backdrop { background-image: linear-gradient(112deg, rgba(255,250,247,.61), rgba(255,247,244,.46) 43%, rgba(79,37,55,.16)), url("assets/produce/route-salon.webp"); }
.task-select-backdrop { background-image: linear-gradient(104deg, rgba(255,250,247,.62), rgba(255,248,244,.42) 50%, rgba(77,37,55,.14)), url("assets/produce/production-atelier.webp"); }
.route-select-screen > :not(.produce-backdrop), .task-select-screen > :not(.produce-backdrop) { position: relative; z-index: 1; }
.produce-screen-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 17px; background: rgba(255,253,250,.82); border: 1px solid rgba(255,255,255,.93); border-radius: 17px; box-shadow: 0 9px 21px rgba(73,30,56,.14), inset 0 1px 0 #fff; backdrop-filter: blur(10px); }
.produce-screen-header p { margin: 0 0 3px; color: #a96179; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.produce-screen-header h2 { margin: 0 0 3px; color: #503645; font-family: Georgia, "Yu Mincho", serif; font-size: 26px; letter-spacing: .05em; }
.produce-screen-header > div:first-child > span { color: #806976; font-size: 12px; font-weight: 700; }
.produce-screen-actions { display: flex; align-items: center; gap: 9px; }
.produce-status-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 9px 13px; color: #755066; background: rgba(255,251,247,.82); border: 1px solid rgba(255,255,255,.9); border-radius: 999px; box-shadow: 0 5px 14px rgba(76,35,57,.11); font-size: 11px; font-weight: 800; white-space: nowrap; }
.produce-status-chip strong { color: #af5974; font-size: 15px; }
.produce-exit { padding: 9px 13px; color: #654a5c; background: rgba(255,251,247,.87); border: 1px solid rgba(255,255,255,.92); border-radius: 999px; box-shadow: 0 5px 14px rgba(76,35,57,.12); font-size: 12px; font-weight: 900; transition: transform .14s, background .14s; }
.produce-exit:hover { background: #fff; transform: translateY(-2px); }

.route-guidance { display: flex; align-items: center; gap: 11px; padding: 10px 14px; margin: 11px 2px; background: rgba(255,252,249,.76); border: 1px solid rgba(255,255,255,.86); border-left: 4px solid #ce7b87; border-radius: 0 12px 12px 0; box-shadow: 0 6px 15px rgba(73,30,56,.1); backdrop-filter: blur(8px); }
.route-guidance > span { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; color: #77506a; background: linear-gradient(145deg, #fff0be, #f4c58d); border-radius: 50%; box-shadow: 0 2px 0 rgba(92,51,56,.23); }
.route-guidance strong, .route-guidance p { display: inline; margin: 0; }
.route-guidance strong { margin-right: 8px; color: #704a5b; font-size: 12px; }
.route-guidance p { color: #816b76; font-size: 11px; font-weight: 700; line-height: 1.5; }
.route-grid.route-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.route-list .route-card { --route-accent: #bc6c7c; --route-wash: #fce2e2; display: grid; grid-template-columns: minmax(235px, 1.04fr) minmax(295px, 1fr) 192px; align-items: center; gap: 16px; min-height: 126px; padding: 14px 15px 14px 17px; overflow: hidden; color: #543b49; background: linear-gradient(102deg, rgba(255,254,251,.95), rgba(253,244,243,.87)); border: 1px solid rgba(255,255,255,.9); border-radius: 16px; box-shadow: 0 8px 0 rgba(103,55,65,.16), 0 13px 22px rgba(73,30,56,.16), inset 0 1px 0 #fff; transition: transform .15s, box-shadow .15s, filter .15s; }
.route-list .route-card::after { position: absolute; right: -48px; bottom: -72px; width: 184px; height: 184px; color: var(--route-accent); content: "✦"; font-family: Georgia, serif; font-size: 172px; line-height: 1; opacity: .07; transform: rotate(12deg); pointer-events: none; }
.route-list .route-card:hover { box-shadow: 0 11px 0 rgba(103,55,65,.17), 0 18px 27px rgba(73,30,56,.19), inset 0 1px 0 #fff; filter: saturate(1.06); transform: translateY(-3px); }
.route-list .route-card-2 { --route-accent: #6c82b4; --route-wash: #dfeaf6; }.route-list .route-card-3 { --route-accent: #b98a42; --route-wash: #fbebc6; }
.route-card-title { position: relative; z-index: 1; display: grid; grid-template-columns: 43px minmax(0, 1fr); align-items: center; gap: 11px; }
.route-list .route-number { display: grid; place-items: center; width: 43px; height: 43px; margin: 0; color: #fffaf4; background: linear-gradient(140deg, var(--route-accent), color-mix(in srgb, var(--route-accent), #5d3456 28%)); border: 2px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 3px 0 color-mix(in srgb, var(--route-accent), #4c2942 36%), 0 5px 9px rgba(75,34,52,.16); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.route-card-kicker { margin: 0 0 2px !important; color: var(--route-accent) !important; font-size: 8px !important; font-weight: 900 !important; letter-spacing: .14em; }
.route-list .route-card h3 { margin: 0 0 3px; color: #523643; font-family: Georgia, "Yu Mincho", serif; font-size: 19px; letter-spacing: .045em; }
.route-list .route-card-title > div > p:not(.route-card-kicker) { min-height: 0; margin: 0; color: #806976; font-size: 11px; font-weight: 700; line-height: 1.4; }
.route-card-flow { position: relative; z-index: 1; min-width: 0; padding: 8px 13px 9px; background: var(--route-wash); border: 1px solid rgba(255,255,255,.72); border-radius: 12px; }
.route-card-flow > span { display: block; margin-bottom: 6px; color: var(--route-accent); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.route-list .route-nodes { display: flex; align-items: center; margin: 0; }
.route-list .route-node { position: relative; z-index: 1; flex: 0 0 31px; width: 31px; height: 31px; font-size: 14px; box-shadow: 0 2px 0 rgba(67,39,55,.18); }
.route-list .route-node + .route-node::before { display: none; }
.route-list .route-node:not(:last-child)::after { position: absolute; z-index: -1; top: 14px; left: 28px; width: 11px; height: 3px; content: ""; background: color-mix(in srgb, var(--route-accent), white 48%); box-shadow: 0 1px 0 rgba(255,255,255,.75); }
.route-card-action { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: stretch; }
.route-card-action > span { color: #89727a; font-size: 9px; font-weight: 900; text-align: center; letter-spacing: .06em; }
.route-select-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 10px; color: #fffaf5; background: linear-gradient(120deg, var(--route-accent), color-mix(in srgb, var(--route-accent), #70518f 42%)); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; box-shadow: 0 4px 0 color-mix(in srgb, var(--route-accent), #53304b 40%); font-size: 11px; font-weight: 900; transition: transform .12s, filter .12s, box-shadow .12s; }
.route-select-button:hover { filter: brightness(1.08); transform: translateY(-2px); }.route-select-button:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--route-accent), #53304b 40%); transform: translateY(2px); }.route-select-button b { color: #ffecaf; font-size: 16px; line-height: .7; }
.route-screen-note { margin: 13px 0 0; color: #745d69; font-size: 10px; font-weight: 800; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.8); }

.task-screen-header { margin-bottom: 13px; }.task-screen-header .produce-status-chip { margin-right: 1px; }
.task-select-screen .task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; align-items: stretch; gap: 16px; }
.task-select-screen .task-main { min-height: 472px; padding: 25px 27px; color: #553b4a; background: rgba(255,253,250,.87); border: 1px solid rgba(255,255,255,.94); border-radius: 18px; box-shadow: 0 12px 28px rgba(73,30,56,.17), inset 0 1px 0 #fff; backdrop-filter: blur(11px); }
.task-main-heading { display: flex; align-items: center; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid rgba(180,132,141,.24); }
.task-select-screen .task-icon { flex: 0 0 60px; width: 60px; height: 60px; margin: 0; color: #85516d; background: linear-gradient(145deg, #fff0d1, #f8c8b9); border: 2px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 4px 0 rgba(152,90,91,.27); font-size: 31px; }
.task-select-screen .task-kicker { margin: 0 0 3px; color: #ae637a; font-size: 9px; letter-spacing: .15em; }
.task-main-heading h2 { margin: 0; color: #503645; font-family: Georgia, "Yu Mincho", serif; font-size: 24px; letter-spacing: .045em; }
.task-main-content { padding-top: 18px; }.task-main-content > p { margin: 0; color: #765f6c; font-size: 13px; font-weight: 700; line-height: 1.7; }
.task-select-screen .lesson-options, .task-select-screen .event-options { gap: 10px; margin-top: 17px; }
.task-select-screen .lesson-option, .task-select-screen .choice-button { min-height: 65px; padding: 13px 15px; color: #533b48; background: linear-gradient(104deg, rgba(255,255,255,.93), rgba(253,241,240,.9)); border: 1px solid #efd5d2; border-radius: 12px; box-shadow: 0 3px 0 rgba(139,78,89,.14), inset 0 1px 0 #fff; }
.task-select-screen .lesson-option:hover, .task-select-screen .choice-button:hover { background: #fffdfb; border-color: #d6818d; box-shadow: 0 5px 0 rgba(139,78,89,.16), 0 8px 16px rgba(92,48,65,.11), inset 0 1px 0 #fff; transform: translateY(-2px); }
.task-select-screen .lesson-option > span:first-child { display: grid; gap: 3px; }.task-select-screen .lesson-option strong, .task-select-screen .choice-button strong { color: #573b4a; font-size: 14px; }
.task-select-screen .lesson-option small, .task-select-screen .choice-button small { color: #866f78; font-size: 11px; font-weight: 700; line-height: 1.45; }
.task-select-screen .gain { padding: 6px 9px; color: #ab5d70; background: #fff0ec; border: 1px solid #f3d1ca; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.task-select-screen .event-options .choice-button { display: block; }.task-select-screen .event-options .choice-button small { margin-top: 4px; }
.task-select-screen .empty { margin: 15px 0 0; color: #795e69; background: #fff5ed; border: 1px solid #f0d9cb; border-left: 4px solid #d9827c; border-radius: 0 10px 10px 0; font-size: 12px; font-weight: 700; }
.task-select-screen .progress-panel { display: flex; flex-direction: column; padding: 18px 17px; color: #563d4d; background: rgba(80,39,59,.9); border: 1px solid rgba(255,224,205,.5); border-radius: 18px; box-shadow: 0 12px 27px rgba(65,26,48,.28), inset 0 1px 0 rgba(255,255,255,.16); }
.task-select-screen .progress-panel header { position: relative; padding-bottom: 12px; border-bottom: 1px solid rgba(255,227,211,.21); }.task-select-screen .progress-panel header p { margin: 0 0 3px; color: #f4c9c7; font-size: 8px; font-weight: 900; letter-spacing: .15em; }.task-select-screen .progress-panel header h3 { margin: 0; color: #fff7ef; font-family: Georgia, "Yu Mincho", serif; font-size: 18px; letter-spacing: .04em; }.task-select-screen .progress-panel header > span { position: absolute; top: 0; right: 0; padding: 4px 6px; color: #ffe7a6; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 8px; font-weight: 900; }
.task-select-screen .route-progress { position: relative; gap: 10px; margin: 14px 0 0; }.task-select-screen .route-progress::before { position: absolute; top: 20px; bottom: 20px; left: 12px; width: 2px; content: ""; background: rgba(255,229,207,.22); }.task-select-screen .progress-step { position: relative; z-index: 1; gap: 9px; color: #e3cbd2; font-size: 11px; font-weight: 700; }.task-select-screen .progress-step i { flex-basis: 25px; height: 25px; color: #83586e; background: #e5cbd1; border: 2px solid rgba(255,255,255,.65); box-shadow: 0 2px 0 rgba(27,11,25,.24); font-size: 12px; }.task-select-screen .progress-step.current { color: #fff8ed; }.task-select-screen .progress-step.current i { color: #fff9ed; background: linear-gradient(145deg, #d77b85, #9d6495); box-shadow: 0 0 0 4px rgba(255,225,202,.15), 0 2px 0 rgba(27,11,25,.24); }.task-select-screen .progress-step.done i { color: #fffdf4; background: #6daf9b; }
.progress-values { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: auto; padding-top: 15px; }.progress-values div { padding: 9px 8px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; }.progress-values span, .progress-values strong { display: block; }.progress-values span { color: #e7c8cf; font-size: 8px; font-weight: 900; letter-spacing: .05em; }.progress-values strong { margin-top: 2px; color: #fff8eb; font-size: 17px; line-height: 1; }.progress-values strong small { color: #f5d9a3; font-size: 8px; }

@media (max-width: 1050px) { .route-list .route-card { grid-template-columns: minmax(205px, 1fr) minmax(255px, .96fr) 172px; gap: 12px; }.route-list .route-node { flex-basis: 28px; width: 28px; height: 28px; font-size: 13px; }.route-list .route-node:not(:last-child)::after { top: 13px; left: 25px; width: 9px; }.route-card-flow { padding-inline: 10px; }.route-select-button { padding-inline: 7px; font-size: 10px; }.task-select-screen .task-layout { grid-template-columns: minmax(0, 1fr) 270px; }.task-select-screen .task-main { padding-inline: 22px; } }

/* Task choice: command and event name above, scene art in the middle, choices below. */
.task-select-screen { padding: 24px 28px; }
.task-select-screen .task-layout { grid-template-columns: minmax(0, 1fr) 320px; min-height: 617px; }
.task-select-screen .task-main { display: flex; flex-direction: column; min-height: 617px; padding: 20px 22px; }
.task-command-header { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding-bottom: 14px; }
.task-select-screen .task-command-header .task-icon { width: 62px; height: 62px; font-size: 32px; }
.task-command-header p { margin: 0 0 3px; color: #ae637a; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.task-command-header h2 { margin: 0; color: #503645; font-family: Georgia, "Yu Mincho", serif; font-size: 29px; line-height: 1.12; letter-spacing: .045em; }
.task-command-header > span { align-self: start; padding: 7px 9px; color: #9b697b; background: #fff4ed; border: 1px solid #efd4ca; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.task-feature-visual { position: relative; height: 222px; margin: 0; overflow: hidden; background: #7d4f62; border: 1px solid rgba(255,255,255,.85); border-radius: 15px; box-shadow: 0 7px 0 rgba(111,62,69,.18), 0 11px 18px rgba(74,30,53,.18); }
.task-feature-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 52%, rgba(42,19,37,.64)); pointer-events: none; }
.task-feature-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.task-feature-visual figcaption { position: absolute; z-index: 1; right: 14px; bottom: 11px; color: #fff3d9; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 2px 4px rgba(31,10,25,.65); }
.task-feature-rest img { object-position: center 56%; }.task-feature-event img { object-position: center 53%; }.task-feature-lesson img { object-position: center 55%; }
.task-select-screen .task-main-content { padding: 13px 2px 0; }
.task-select-screen .task-main-content > p { margin: 0; color: #765f6c; font-size: 13px; line-height: 1.6; }
.task-event-status, .task-rest-status { display: inline-block; margin-top: 7px; padding: 5px 8px; color: #9d5d75; background: #fff2ee; border: 1px solid #f2d5ce; border-radius: 999px; font-size: 10px; font-weight: 900; }
.task-rest-status strong { color: #a95666; font-size: 12px; }
.task-option-area { margin-top: auto; padding-top: 13px; }
.task-select-screen .task-option-area .lesson-options, .task-select-screen .task-option-area .event-options { gap: 8px; margin-top: 0; }
.task-select-screen .task-option-area .lesson-option, .task-select-screen .task-option-area .choice-button { min-height: 55px; padding: 10px 14px; }
.task-select-screen .task-option-area .lesson-option strong, .task-select-screen .task-option-area .choice-button strong { font-size: 13px; }
.task-select-screen .task-option-area .lesson-option small, .task-select-screen .task-option-area .choice-button small { font-size: 10px; }
.task-select-screen .task-option-area .gain { padding: 5px 8px; font-size: 10px; }
.task-select-screen .task-option-area .button-note { margin-top: 8px; font-size: 10px; }

/* Keep the progress board, but make its reading size about 1.5× larger. */
.task-select-screen .progress-panel { min-height: 617px; padding: 22px 20px; }
.task-select-screen .progress-panel header { padding-bottom: 16px; }.task-select-screen .progress-panel header p { margin-bottom: 4px; font-size: 12px; }.task-select-screen .progress-panel header h3 { padding-right: 0; font-size: 26px; line-height: 1.14; }.task-select-screen .progress-panel header > span { top: 3px; padding: 5px 7px; font-size: 11px; }
.task-select-screen .route-progress { gap: 13px; margin-top: 20px; }.task-select-screen .route-progress::before { top: 25px; bottom: 25px; left: 16px; width: 3px; }.task-select-screen .progress-step { gap: 11px; font-size: 16px; line-height: 1.22; }.task-select-screen .progress-step i { flex-basis: 33px; height: 33px; font-size: 15px; }.task-select-screen .progress-step.current i { box-shadow: 0 0 0 5px rgba(255,225,202,.15), 0 2px 0 rgba(27,11,25,.24); }
.task-select-screen .progress-values { gap: 9px; padding-top: 19px; }.progress-values div { padding: 11px 10px; }.progress-values span { font-size: 12px; }.progress-values strong { margin-top: 3px; font-size: 25px; }.progress-values strong small { font-size: 12px; }

@media (max-width: 1050px) { .task-select-screen .task-layout { grid-template-columns: minmax(0, 1fr) 300px; }.task-command-header h2 { font-size: 26px; }.task-select-screen .progress-panel { padding-inline: 17px; }.task-select-screen .progress-step { font-size: 15px; } }

/* Title: an opening-live composition with the title anchored above the action area. */
.title-screen { position: relative; display: block; min-height: 665px; padding: 0; overflow: hidden; color: #fff; background: #0b0a29; isolation: isolate; }
.title-venue-backdrop { position: absolute; z-index: -3; inset: 0; background: url("assets/live-venue-title.webp") center / cover no-repeat; }
.title-screen::before { position: absolute; z-index: -2; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5,5,26,.94) 0%, rgba(10,8,38,.78) 31%, rgba(13,8,43,.26) 57%, rgba(8,5,34,.14) 100%), linear-gradient(0deg, rgba(8,5,30,.52), transparent 42%); pointer-events: none; }
.title-screen::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at 11% 18%, rgba(130,102,255,.23), transparent 32%), radial-gradient(ellipse at 68% 8%, rgba(255,176,231,.14), transparent 20%); pointer-events: none; }
.title-hero-copy { position: absolute; z-index: 3; top: 32px; left: 43px; width: min(480px, 44%); text-shadow: 0 3px 14px rgba(3,2,18,.9); }
.title-hero-copy .eyebrow { margin-bottom: 8px; color: #ffe0a3; font-size: 10px; letter-spacing: .22em; }
.title-hero-copy h1 { margin: 0 0 12px; color: #fffaf4; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(38px, 4vw, 52px); line-height: 1.12; letter-spacing: .045em; }
.title-hero-copy .lead { max-width: 420px; margin: 0; color: #e6dcf7; font-size: 13px; font-weight: 700; line-height: 1.75; }
.title-action-card { position: absolute; z-index: 4; bottom: 36px; left: 43px; width: 410px; padding: 16px 17px 15px; background: linear-gradient(135deg, rgba(38,23,76,.8), rgba(82,41,103,.54)); border: 1px solid rgba(255,244,238,.63); border-radius: 18px; box-shadow: 0 15px 31px rgba(1,1,18,.42), inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter: blur(12px); }
.title-card-kicker { margin: 0 0 4px; color: #ffdf9b; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.title-card-copy { margin: 0; color: #fff5f5; font-size: 12px; font-weight: 700; line-height: 1.55; }
.title-action-card .button-stack { width: 100%; gap: 8px; margin-top: 13px; }
.title-action-card .button-stack button, .title-action-card .button-stack a { padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.title-action-card .primary { display: flex; align-items: center; justify-content: space-between; color: #fffdf6; background: linear-gradient(112deg, #ee6e90, #a160c7); box-shadow: 0 4px 0 #74345f; }
.title-start-options { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; }
.title-start-options .primary { min-width: 0; min-height: 48px; gap: 7px; text-align: left; }
.title-start-options .primary b { font-size: 11px; line-height: 1.35; }
.title-action-card .title-tutorial-button { background: linear-gradient(112deg, #b270d0, #6f70c4); box-shadow: 0 4px 0 #4d427f; }
.title-action-card .title-tutorial-button span { color: #fff3bb; font-size: 17px; }
.title-action-card .primary span, .creator-start-button span { color: #ffe6a1; font-size: 18px; line-height: .7; }
.title-action-card .secondary { color: #f4eaff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.31); }
.title-action-card .title-master-link { color: #e4d7ff; background: transparent; border-color: rgba(255,255,255,.19); }
.title-action-card .button-note { margin: 10px 0 0; color: #d9caeb; font-size: 9px; text-align: left; }
.title-character-ensemble { position: absolute; z-index: 2; right: 20px; bottom: -25px; width: min(735px, 65%); height: 555px; pointer-events: none; }
.title-character-ensemble::after { position: absolute; z-index: -1; right: 3%; bottom: 9px; width: 78%; height: 32px; content: ""; background: radial-gradient(ellipse, rgba(8,4,35,.76), transparent 68%); filter: blur(8px); }
.title-character-ensemble .title-character { position: absolute; bottom: 0; margin: 0; transform-origin: bottom center; }
.title-character-yellow { left: 0; z-index: 1; width: 315px; height: 470px; transform: rotate(-4deg); }
.title-character-pink { left: 205px; z-index: 3; width: 340px; height: 525px; transform: translateY(4px); }
.title-character-blue { right: -5px; z-index: 2; width: 335px; height: 510px; transform: rotate(3deg); }
.title-character-ensemble img { filter: drop-shadow(0 13px 16px rgba(3,1,22,.65)); }
.title-stage-caption { position: absolute; z-index: 4; right: 25px; bottom: 18px; margin: 0; color: rgba(255,239,207,.86); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 2px 5px rgba(4,1,21,.9); }

/* Character creation: a glass atelier, matching the route and boutique screens. */
.creator-screen { position: relative; min-height: 665px; padding: 21px 26px 24px; overflow: hidden; color: #523546; background: #271a4b; isolation: isolate; }
.creator-venue-backdrop { position: absolute; z-index: -2; inset: 0; background: linear-gradient(96deg, rgba(27,14,54,.84), rgba(47,22,75,.54) 44%, rgba(103,45,104,.3)), url("assets/live-venue-title.webp") center / cover no-repeat; }
.creator-screen::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at 14% 92%, rgba(255,175,195,.18), transparent 38%), linear-gradient(0deg, rgba(16,8,38,.27), transparent 53%); pointer-events: none; }
.creator-screen-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 71px; padding: 12px 16px; margin-bottom: 14px; color: #fff8f7; background: rgba(255,250,253,.88); border: 1px solid rgba(255,255,255,.92); border-radius: 17px; box-shadow: 0 10px 24px rgba(13,6,31,.28), inset 0 1px 0 #fff; backdrop-filter: blur(12px); }
.creator-screen-header .eyebrow { margin-bottom: 3px; color: #a35b87; font-size: 9px; letter-spacing: .18em; }
.creator-screen-header h2 { margin: 0 0 2px; color: #503545; font-family: Georgia, "Yu Mincho", serif; font-size: 25px; letter-spacing: .045em; }
.creator-screen-header > div > span { color: #816977; font-size: 11px; font-weight: 700; }
.creator-screen-header .back-button { color: #634a70; background: rgba(247,239,255,.95); border: 1px solid #dccdea; border-radius: 999px; box-shadow: 0 3px 0 rgba(75,43,84,.16); font-size: 11px; white-space: nowrap; }
.creator-layout-refined { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.25fr) minmax(305px, .75fr); gap: 17px; align-items: stretch; }
.creator-form-card { min-height: 508px; padding: 16px 18px 17px; color: #513846; background: rgba(255,252,250,.91); border: 1px solid rgba(255,255,255,.95); border-radius: 18px; box-shadow: 0 13px 28px rgba(12,5,30,.28), inset 0 1px 0 #fff; backdrop-filter: blur(12px); }
.creator-form-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgba(178,113,139,.22); }
.creator-form-heading > span, .creator-field-label > span { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; color: #fffaf6; background: linear-gradient(145deg, #d77c94, #8d609b); border: 1px solid rgba(255,255,255,.78); border-radius: 50%; box-shadow: 0 2px 0 rgba(94,45,75,.27); font-size: 9px; font-weight: 900; }
.creator-form-heading p, .creator-field-label small { margin: 0; color: #aa6680; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.creator-form-heading h3 { margin: 1px 0 0; color: #513847; font-family: Georgia, "Yu Mincho", serif; font-size: 18px; }
.creator-form-card .field { margin: 11px 0; }
.creator-name-field > span { color: #6c5262; font-size: 11px; font-weight: 900; }
.creator-form-card .field input { padding: 10px 12px; color: #513847; background: rgba(255,255,255,.88); border: 1px solid #e5ccd7; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(68,32,58,.06); font-size: 14px; font-weight: 700; }
.creator-form-card .field input:focus { border-color: #c97796; }
.creator-choice-field { gap: 7px; }
.creator-field-label { display: flex; align-items: center; gap: 7px; }
.creator-field-label > div { display: grid; gap: 1px; }
.creator-field-label b { color: #624755; font-size: 11px; }
.creator-avatar-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.creator-avatar-option { position: relative; display: grid; grid-template-rows: 96px auto; align-items: center; min-height: 132px; padding: 5px 7px 7px; overflow: hidden; color: #5b4350; text-align: center; background: linear-gradient(130deg, #fffdfb, #f5edf5); border: 1px solid #ead5df; border-radius: 11px; box-shadow: inset 0 1px 0 #fff; }
.creator-avatar-option:hover { border-color: #cf849c; transform: translateY(-1px); }
.creator-avatar-option.selected { color: #913a67; background: linear-gradient(130deg, #fff4f8, #f2e9ff); border-color: #d3749c; box-shadow: 0 3px 0 rgba(167,78,124,.21), inset 0 1px 0 #fff; }
.creator-avatar-copy { display: grid; align-content: center; min-width: 0; }
.creator-avatar-name { display: grid; justify-items: center; gap: 1px; }
.creator-avatar-name strong { font-size: 13px; }
.creator-avatar-name small { overflow: hidden; max-width: 100%; color: #967e8a; font-size: 7px; font-weight: 900; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.creator-avatar-art { align-self: stretch; height: 96px; overflow: hidden; }
.creator-avatar-art .creator-character { width: 100%; height: 122px; margin-top: -5px; }
.creator-avatar-art img { object-position: center top; filter: drop-shadow(0 3px 3px rgba(50,28,62,.2)); }
.creator-favorite-field { margin-top: 10px; }
.creator-favorite-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.creator-difficulty-field { margin-top: 9px !important; }
.creator-difficulty-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.creator-difficulty-option { display: grid; justify-items: center; gap: 1px; min-width: 0; min-height: 47px; padding: 5px 4px; color: #6d5872; background: linear-gradient(135deg, #fbf8fd, #f2ebf7); border-width: 1px; }
.creator-difficulty-option > span { color: #a88aac; font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.creator-difficulty-option > strong { font-size: 10px; line-height: 1.15; white-space: nowrap; }
.creator-difficulty-option > small { color: #8f7c92; font-size: 7px; font-weight: 900; white-space: nowrap; }
.creator-difficulty-option.selected { color: #754182; background: linear-gradient(135deg, #fff0f7, #eee5ff); border-color: #ba70aa; box-shadow: 0 2px 0 rgba(116,65,130,.2); }
.creator-difficulty-option.difficulty-easy.selected { color: #24745f; background: #e9f8f2; border-color: #61b79d; }
.creator-difficulty-option.difficulty-hard.selected { color: #a14f31; background: #fff0e8; border-color: #dd8b66; }
.creator-difficulty-option.difficulty-hardcore.selected { color: #fff; background: linear-gradient(120deg, #713b71, #bc4d62); border-color: #e6a6b6; }
.creator-difficulty-option.difficulty-hardcore.selected > span,
.creator-difficulty-option.difficulty-hardcore.selected > small { color: #ffe9ef; }
.creator-difficulty-description { min-height: 14px; margin: 0; color: #856d7b; font-size: 8px; font-weight: 800; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.creator-stat-option { min-height: 36px; padding: 6px 4px; color: #684e5b; background: #fbf6f9; border: 1px solid #ead5df; border-radius: 8px; font-size: 10px; }
.creator-stat-option:hover { border-color: #c77b98; }
.creator-stat-option.favorite.selected { color: #a03e69; background: #fff0f5; border-color: #d8789e; }
.creator-name-field > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.creator-name-field > span small { color: #a87c91; font-size: 9px; }
.creator-start-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px; color: #fffaf7; background: linear-gradient(112deg, #d66f8e, #895ab3); border: 1px solid rgba(255,255,255,.66); border-radius: 11px; box-shadow: 0 4px 0 #7a416f; font-size: 12px; }
.result-card h2 .difficulty-badge { vertical-align: middle; margin: 0 0 4px 6px; }
.creator-idol-preview { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 508px; padding: 16px 17px 14px; overflow: hidden; color: #fffaf8; background: linear-gradient(160deg, rgba(45,26,91,.94), rgba(98,46,111,.85)); border: 1px solid rgba(255,255,255,.62); border-radius: 18px; box-shadow: 0 13px 28px rgba(12,5,30,.34), inset 0 1px 0 rgba(255,255,255,.29); }
.creator-idol-preview::before { position: absolute; z-index: 0; inset: 0; content: ""; background: radial-gradient(circle at 50% 42%, rgba(255,233,179,.34), transparent 25%), linear-gradient(145deg, transparent 42%, rgba(255,255,255,.06) 43% 44%, transparent 45%), repeating-linear-gradient(90deg, transparent 0 51px, rgba(255,255,255,.05) 52px 53px); pointer-events: none; }
.creator-preview-heading, .creator-preview-name, .creator-preview-stage, .creator-idol-preview .preview-stats { position: relative; z-index: 1; }
.creator-preview-heading { display: flex; align-items: center; justify-content: space-between; }
.creator-preview-heading p { margin: 0; color: #ffe3a2; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.creator-preview-heading span { padding: 4px 7px; color: #f6e8ff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.21); border-radius: 999px; font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.creator-preview-name { padding-top: 10px; text-align: center; text-shadow: 0 2px 5px rgba(8,3,27,.52); }
.creator-preview-name small { color: #f8db9c; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.creator-preview-name h2 { margin: 2px 0 0; color: #fffaf8; font-family: Georgia, "Yu Mincho", serif; font-size: 24px; letter-spacing: .06em; }
.creator-preview-stage { display: grid; place-items: end center; min-height: 245px; overflow: hidden; }
.creator-preview-stage .creator-character { width: 235px; height: 305px; margin-bottom: -26px; }
.creator-preview-stage .creator-character img { filter: drop-shadow(0 10px 12px rgba(5,2,28,.58)); }
.creator-idol-preview .preview-stats { width: 100%; margin: 0; padding: 9px; color: #503746; background: rgba(255,253,249,.9); border: 1px solid rgba(255,255,255,.76); border-radius: 12px; box-shadow: 0 5px 13px rgba(11,5,30,.24); }
.creator-idol-preview .ability-grid { gap: 6px; margin-top: 0; }
.creator-idol-preview .ability { padding: 6px 7px; background: #fffaf9; border: 1px solid #f0e1e6; border-radius: 7px; }
.creator-idol-preview .ability span { font-size: 8px; }.creator-idol-preview .ability strong { margin-top: 0; font-size: 15px; }
.creator-style-popup { position: absolute; z-index: 5; top: 62px; right: 14px; width: min(275px, calc(100% - 28px)); padding: 14px; color: #583849; text-align: left; background: rgba(255,250,249,.97); border: 2px solid #e17aa1; border-radius: 15px; box-shadow: 0 15px 32px rgba(15,6,36,.42), inset 0 1px 0 #fff; animation: creator-style-in .18s ease-out; }
.creator-style-popup::after { position: absolute; top: 38px; right: -10px; width: 18px; height: 18px; content: ""; background: #fffaf9; border-top: 2px solid #e17aa1; border-right: 2px solid #e17aa1; transform: rotate(45deg); }
.creator-style-popup header { display: flex; align-items: center; gap: 10px; }
.creator-style-popup header > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; color: #fff; background: linear-gradient(145deg, #f080a7, #a25eb7); border-radius: 50%; font-size: 19px; }
.creator-style-popup header div { display: grid; gap: 1px; }
.creator-style-popup header small { color: #b26083; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.creator-style-popup header strong { color: #713853; font-size: 15px; }
.creator-style-popup p { margin: 10px 0; color: #725965; font-size: 11px; font-weight: 700; line-height: 1.65; }
.creator-style-popup em { display: inline-block; padding: 3px 7px; margin-bottom: 9px; color: #fff; background: #527aad; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 900; }
.creator-style-popup button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; color: #fff; background: linear-gradient(110deg, #db7199, #9c5bb3); border: 0; border-radius: 9px; box-shadow: 0 3px 0 #784066; font-size: 10px; font-weight: 900; }
@keyframes creator-style-in { from { opacity: 0; transform: translateX(12px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) {
  .title-hero-copy, .title-action-card { left: 31px; }
  .title-character-ensemble { right: 8px; width: 67%; }
  .title-character-yellow { width: 280px; height: 430px; }.title-character-pink { left: 175px; width: 310px; height: 490px; }.title-character-blue { width: 300px; height: 470px; }
  .creator-layout-refined { grid-template-columns: minmax(0, 1.18fr) minmax(290px, .82fr); gap: 13px; }.creator-form-card { padding-inline: 14px; }.creator-avatar-name small { display: none; }
}

/* Readability pass: make route planning and battles legible without losing information density. */
.route-select-screen .produce-screen-header p { font-size: 11px; }
.route-select-screen .produce-screen-header > div:first-child > span { font-size: 14px; }
.route-select-screen .produce-status-chip { font-size: 13px; }
.route-select-screen .produce-status-chip strong { font-size: 17px; }
.route-select-screen .produce-exit { font-size: 14px; }
.route-select-screen .route-guidance strong { font-size: 14px; }
.route-select-screen .route-guidance p { font-size: 13px; }
.route-list .route-card { grid-template-columns: minmax(235px, .92fr) minmax(390px, 1.45fr) 202px; min-height: 151px; }
.route-list .route-number { font-size: 14px; }
.route-list .route-card-kicker { font-size: 10px !important; }
.route-list .route-card h3 { font-size: 21px; }
.route-list .route-card-title > div > p:not(.route-card-kicker) { font-size: 13px; }
.route-card-flow { padding: 9px 11px 10px; }
.route-flow-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.route-flow-heading > span { flex: 0 0 auto; color: var(--route-accent); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.route-flow-heading .route-nodes { justify-content: flex-end; }
.route-list .route-node { flex-basis: 34px; width: 34px; height: 34px; font-size: 16px; }
.route-list .route-node:not(:last-child)::after { top: 15px; left: 31px; }
.route-list .route-node.expression { background: #9b62cc; }
.route-list .route-node.influence { background: #4d8fc9; }
.route-list .route-node.adaptation { background: #3b9f8b; }
.route-battle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.route-battle-chip { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; padding: 6px 7px; color: #594450; background: rgba(255,255,255,.72); border: 1px solid rgba(150,94,111,.2); border-left: 4px solid #9b62cc; border-radius: 9px; box-shadow: inset 0 1px 0 #fff; }
.route-battle-chip.influence { border-left-color: #4d8fc9; }.route-battle-chip.adaptation { border-left-color: #3b9f8b; }
.route-battle-chip > i { display: grid; place-items: center; width: 29px; height: 29px; color: #8e57c9; background: #f0e9ff; border: 1px solid #cdb8f0; border-radius: 50%; font-size: 16px; font-style: normal; font-weight: 900; }
.route-battle-chip.influence > i { color: #377cc2; background: #e9f4ff; border-color: #b9d9f7; }.route-battle-chip.adaptation > i { color: #27947e; background: #e7faf6; border-color: #b6e3d8; }
.route-battle-chip > span { min-width: 0; }
.route-battle-chip small { display: block; overflow: hidden; color: #806976; font-size: 10px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.route-battle-chip strong { display: flex; align-items: baseline; gap: 4px; margin-top: 1px; color: #513846; font-size: 12px; white-space: nowrap; }
.route-battle-chip strong b { color: #7f4fb0; font-size: 15px; }.route-battle-chip.influence strong b { color: #327ab7; }.route-battle-chip.adaptation strong b { color: #21866f; }
.route-battle-chip strong em { margin-left: auto; padding: 1px 5px; color: #fff; background: #77548f; border-radius: 999px; font-size: 10px; font-style: normal; }
.route-no-battle { min-height: 35px !important; margin: 8px 0 0 !important; padding: 8px 10px; color: #806976 !important; background: rgba(255,255,255,.55); border-radius: 8px; font-size: 12px !important; font-weight: 800; }
.route-card-action > span.route-boss-requirement { display: flex; align-items: center; justify-content: center; gap: 5px; color: #775f6c; font-size: 11px; letter-spacing: 0; }
.route-boss-requirement i { color: #8a609b; font-size: 10px; font-style: normal; }.route-boss-requirement b { color: #9a5875; }
.route-select-button { font-size: 13px; }
.route-screen-note { font-size: 12px; }

.task-command-header p { font-size: 12px; }
.task-command-header > span { font-size: 11px; }
.task-feature-visual figcaption { font-size: 11px; }
.task-select-screen .task-main-content > p { font-size: 15px; }
.task-event-status, .task-rest-status { font-size: 12px; }
.task-rest-status strong { font-size: 14px; }
.task-select-screen .task-option-area .lesson-option strong, .task-select-screen .task-option-area .choice-button strong { font-size: 15px; }
.task-select-screen .task-option-area .lesson-option small, .task-select-screen .task-option-area .choice-button small { font-size: 12px; }
.task-select-screen .task-option-area .gain { font-size: 12px; }
.task-select-screen .progress-step.progress-battle > span { display: grid; gap: 2px; }
.task-select-screen .progress-step.progress-battle small { color: #f5d9a3; font-size: 12px; font-weight: 800; }
.task-select-screen .progress-step.progress-battle > i { overflow: hidden; font-size: 12px; letter-spacing: -2px; }

.duel-header { min-height: 70px; padding: 10px 24px; }
.duel-header > div { flex-wrap: wrap; }
.duel-header h2 { font-size: 21px; }
.duel-category { font-size: 15px; }
.duel-required-stat { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 5px 10px 5px 6px; color: #523c4a; background: #fffaf6; border: 1px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 3px 0 rgba(38,14,31,.23), inset 0 1px 0 #fff; }
.duel-required-stat > i { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #8e57c9; background: #f0e9ff; border: 1px solid #cdb8f0; border-radius: 50%; font-size: 19px; font-style: normal; font-weight: 900; }
.duel-required-stat.influence > i { color: #377cc2; background: #e9f4ff; border-color: #b9d9f7; }.duel-required-stat.adaptation > i { color: #27947e; background: #e7faf6; border-color: #b6e3d8; }.duel-required-stat.overall > i { flex-basis: 42px; width: 42px; color: #9a617d; background: #fff0ed; border-color: #ebc8c4; font-size: 11px; letter-spacing: -1px; }
.duel-required-stat small, .duel-required-stat strong { display: block; white-space: nowrap; }
.duel-required-stat small { color: #8c6c79; font-size: 11px; font-weight: 900; line-height: 1.1; }
.duel-required-stat strong { margin-top: 2px; color: #553b49; font-size: 14px; line-height: 1.1; }
.duel-required-stat strong b { color: #8652b5; font-size: 18px; }.duel-required-stat.influence strong b { color: #327ab7; }.duel-required-stat.adaptation strong b { color: #21866f; }.duel-required-stat.overall strong b { color: #ae5f78; }
.duel-required-stat strong em { margin-left: 4px; padding: 1px 5px; color: #fff; background: #78538e; border-radius: 999px; font-size: 10px; font-style: normal; vertical-align: 2px; }
.duel-turn { font-size: 14px; }.duel-turn strong { font-size: 27px; }
.duel-name > span { font-size: 12px; }.duel-name h3 { font-size: 23px; }
.duel-health > span { font-size: 13px; }.duel-health > strong { font-size: 22px; }.duel-health > strong small { font-size: 13px; }
.duel-badges span { font-size: 13px; }
.duel-intent small { font-size: 13px; }.duel-intent strong { font-size: 18px; }.duel-intent em { font-size: 13px; }
.duel-scaling { font-size: 12px; line-height: 1.45; }.duel-scaling b { color: #765088; }
.duel-player-action > span { font-size: 14px; }.duel-end-turn { font-size: 15px; }
.duel-log { font-size: 15px; }
.duel-hand header span { font-size: 11px; }.duel-hand h3 { font-size: 19px; }.duel-hand header p { font-size: 14px; }
.duel-screen .game-card strong { font-size: 16px; }.duel-screen .game-card small { font-size: 13px; }.duel-screen .card-grade { font-size: 11px; }
.duel-empty-hand { font-size: 15px; }

@media (max-width: 1050px) {
  .route-list .route-card { grid-template-columns: minmax(205px, .84fr) minmax(340px, 1.42fr) 182px; }
  .route-battle-chip small { font-size: 9px; }
  .route-battle-chip strong { font-size: 11px; }
  .route-select-button { font-size: 12px; }
  .duel-header { padding-inline: 15px; }
  .duel-header h2 { font-size: 19px; }
  .duel-required-stat { padding-right: 8px; }
  .duel-required-stat small { font-size: 10px; }
  .duel-required-stat strong { font-size: 13px; }
}

.battle-special-tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.battle-special-tips-grid .tips-card { padding: 16px; }
.battle-special-tips-grid .cheer-tip { background: #fffaf0; border-color: #f1d8a1; }
.battle-special-tips-grid .challenge-tip { background: #f7f1ff; border-color: #d9c8f1; }
.battle-special-tips-grid .tips-card-advice { padding-top: 9px; margin-top: 9px; border-top: 1px dashed rgba(105, 82, 116, .25); }

/* How-to guide: show real in-game cards and the resulting battle values. */
.tips-steps-four { grid-template-columns: repeat(4, 1fr); }
.tips-effects-section { background: linear-gradient(180deg, #fff, #fff9fc); }
.tips-effect-guide { padding: 17px; background: #fbf8fc; border: 1px solid #eee1ef; border-radius: 14px; }
.tips-effect-guide + .tips-effect-guide { margin-top: 14px; }
.tips-effect-guide > header { display: flex; align-items: flex-start; gap: 11px; }
.tips-effect-guide > header > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; color: #fff; background: #a76ee5; border-radius: 11px; font-size: 18px; font-weight: 900; }
.tips-effect-guide > header h4 { margin: 0 0 4px; font-size: 16px; }
.tips-effect-guide > header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.cheer-guide { background: #fffaf0; border-color: #f1d8a1; }.cheer-guide > header > span { background: #e3a733; }
.challenge-guide { background: #f7f1ff; border-color: #d9c8f1; }.challenge-guide > header > span { background: #7f62b2; }
.tips-effect-visual { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; padding: 14px; overflow-x: auto; background: rgba(255,255,255,.72); border: 1px solid rgba(218,197,220,.62); border-radius: 13px; }
.tips-game-card.game-card { flex: 0 0 142px; width: 142px; min-width: 142px; min-height: 198px; padding: 10px; pointer-events: none; }
.tips-game-card.game-card .card-art { height: 80px; margin: -1px -1px 0; border-radius: 9px; }
.tips-game-card.game-card strong { margin-top: 7px; font-size: 13px; }
.tips-game-card.game-card small { margin-top: 5px; font-size: 10px; }
.tips-game-card.game-card .card-grade { padding-top: 7px; font-size: 9px; }
.tips-flow-arrow { flex: 0 0 auto; color: #bd7694; font-size: 24px; font-weight: 900; }
.tips-card-times { align-self: center; margin-left: -6px; color: #b76b75; font-size: 20px; font-weight: 900; }
.tips-state-chip, .tips-effect-result, .tips-meter-demo { display: grid; flex: 0 0 145px; gap: 4px; min-height: 98px; align-content: center; padding: 13px; text-align: center; background: #fff; border: 2px solid #e5c9e8; border-radius: 13px; box-shadow: 0 4px 10px rgba(90,50,95,.08); }
.tips-state-chip small, .tips-effect-result small, .tips-meter-demo small { color: var(--muted); font-size: 10px; font-weight: 900; }
.tips-state-chip strong, .tips-effect-result strong, .tips-meter-demo strong { color: #7b4d92; font-size: 17px; }
.tips-state-chip span, .tips-effect-result span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.tips-state-chip.awaken { border-color: #d7b5ef; background: #fbf5ff; }
.tips-state-chip.challenge { border-color: #baa5dc; background: #f8f3ff; }
.tips-meter-demo.cheer { flex-basis: 175px; border-color: #efcf86; background: #fffdf4; }
.tips-meter-demo > span { height: 12px; overflow: hidden; background: #f2e8d4; border-radius: 999px; }
.tips-meter-demo > span i { display: block; height: 100%; background: linear-gradient(90deg, #f4c653, #ef8e52); border-radius: inherit; }
.tips-meter-demo.cheer strong { color: #bb7925; }
.tips-effect-result { border-color: #f0b7cb; background: linear-gradient(145deg, #fff7fa, #f8efff); }
.tips-effect-result strong { color: #c24f7b; }
.tips-effect-guide > .tips-card-advice { padding-top: 10px; margin: 11px 0 0; color: #6b5871; border-top: 1px dashed rgba(105,82,116,.25); font-size: 11px; line-height: 1.55; }
.tips-challenge-branches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 10px; }
.tips-challenge-branches p { margin: 0; padding: 10px 12px; color: #66546e; background: rgba(255,255,255,.76); border-radius: 10px; font-size: 11px; line-height: 1.55; }
.tips-challenge-branches p:first-child { border-left: 4px solid #65b995; }.tips-challenge-branches p:last-child { border-left: 4px solid #e27885; }

@media (max-width: 1050px) {
  .home-help-command { right: 0; bottom: 26px; }
  .tips-steps-four { grid-template-columns: repeat(2, 1fr); }
  .tips-effect-visual { justify-content: flex-start; }
}

/* Guided first-turn tutorial. */
.tutorial-mode [data-tutorial-disabled="true"] { opacity: .28 !important; filter: grayscale(.9) !important; }
.tutorial-mode [data-tutorial-target="true"] { position: relative; z-index: 95; opacity: 1 !important; filter: none !important; outline: 5px solid #ffd762; outline-offset: 5px; box-shadow: 0 0 0 10px rgba(255,215,98,.3), 0 0 36px rgba(255,202,68,1) !important; animation: tutorial-target-pulse 1.15s ease-in-out infinite; }
.tutorial-mode .story-skip[data-tutorial-target="true"] { position: absolute; top: 25px; right: 31px; }
.tutorial-mode .story-next[data-tutorial-target="true"] { position: absolute; right: 25px; bottom: 24px; }
.tutorial-shade { position: fixed; z-index: 90; background: rgba(65,67,75,.6); backdrop-filter: grayscale(1) saturate(.25) brightness(.78); pointer-events: auto; }
.tutorial-coach { position: fixed; z-index: 100; right: 50%; bottom: 28px; display: grid; grid-template-columns: 150px minmax(0, 570px); align-items: end; width: min(740px, calc(100vw - 64px)); pointer-events: none; filter: drop-shadow(0 18px 34px rgba(23,10,36,.48)); transform: translateX(50%); }
.tutorial-coach.is-top { top: 86px; bottom: auto; }.tutorial-coach.is-bottom { top: auto; bottom: 28px; }
.tutorial-president { height: 250px; overflow: hidden; }
.tutorial-president img { width: 190px; height: 285px; object-fit: contain; object-position: bottom; transform: translateX(-24px); }
.tutorial-message { position: relative; padding: 24px 29px 22px; margin-left: -8px; color: #503746; background: linear-gradient(145deg, #fffdf7, #fff1dc); border: 4px solid #fff; border-radius: 25px 25px 7px 25px; box-shadow: inset 0 0 0 1px #dda978, 0 12px 30px rgba(45,24,53,.2); pointer-events: auto; }
.tutorial-message::before { position: absolute; left: -18px; bottom: 24px; width: 23px; height: 26px; content: ""; background: #fff8e9; clip-path: polygon(100% 0, 100% 100%, 0 65%); }
.tutorial-message > small { display: block; color: #aa6a38; font-size: 12px; font-weight: 900; letter-spacing: .17em; }
.tutorial-message > strong { display: block; margin-top: 5px; color: #7d3f61; font-size: 26px; line-height: 1.25; }
.tutorial-message p { margin: 12px 0 13px; color: #59464f; font-size: 17px; font-weight: 700; line-height: 1.65; }
.tutorial-prompt { display: inline-flex; align-items: center; gap: 7px; color: #9c641d; font-size: 13px; font-weight: 900; }
.tutorial-prompt::before { content: "✦"; animation: tutorial-spark .8s ease-in-out infinite alternate; }
.tutorial-finish { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 17px; color: #fff; background: linear-gradient(110deg, #d65786, #8155b2); border-radius: 12px; font-size: 16px; font-weight: 900; pointer-events: auto; }
.tutorial-coach-battle { width: min(700px, calc(100vw - 64px)); }
@keyframes tutorial-target-pulse { 50% { outline-color: #fff0a4; box-shadow: 0 0 0 12px rgba(255,215,98,.12), 0 0 35px rgba(255,202,68,.95) !important; transform: translateY(-2px); } }
@keyframes tutorial-spark { to { opacity: .35; transform: scale(.75); } }
@media (max-width: 1050px) {
  .tutorial-coach { width: min(660px, calc(100vw - 40px)); grid-template-columns: 125px minmax(0, 1fr); }
  .tutorial-president { height: 215px; }.tutorial-president img { width: 160px; height: 250px; }
  .tutorial-message { padding: 20px 23px 18px; }.tutorial-message > strong { font-size: 22px; }.tutorial-message p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .tutorial-mode [data-tutorial-target="true"], .tutorial-prompt::before { animation: none; } }

/* Shared affinity language: color and icon always connect an ability to its battle type. */
.affinity-icon, .route-affinity-icon, .route-chip-icon, .progress-affinity-icon, .duel-category-icon, .duel-requirement-icon, .duel-scaling-icon, .status-affinity-icon, .status-note-affinity-icon, .status-mini-affinity-icon, .tips-affinity-icon {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(39, 23, 47, .2));
}
.affinity-icon-text { display: grid; place-items: center; }

.affinity-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.affinity-pair { --affinity: #d64879; --affinity-wash: #fff0f5; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 11px; color: #553747; background: rgba(255,255,255,.9); border: 1px solid color-mix(in srgb, var(--affinity), white 62%); border-left: 5px solid var(--affinity); border-radius: 11px; box-shadow: 0 4px 10px rgba(73,30,56,.1), inset 0 1px 0 #fff; }
.affinity-pair.influence { --affinity: #287fc8; --affinity-wash: #edf7ff; }
.affinity-pair.adaptation { --affinity: #239b82; --affinity-wash: #ecfbf7; }
.affinity-pair .affinity-icon { flex: 0 0 35px; width: 35px; height: 35px; }
.affinity-pair > span { min-width: 0; }
.affinity-pair strong, .affinity-pair small { display: block; }
.affinity-pair strong { color: var(--affinity); font-size: 12px; }
.affinity-pair small { margin-top: 1px; color: #6e5863; font-size: 11px; font-weight: 900; white-space: nowrap; }
.affinity-pair small b { color: var(--affinity); }
.route-affinity-legend { margin: 0 2px 12px; }

.creator-favorite-options .creator-stat-option { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-height: 54px; padding: 5px 6px; text-align: left; }
.creator-stat-option .affinity-icon { flex: 0 0 25px; width: 25px; height: 25px; }
.creator-stat-option > span { min-width: 0; }
.creator-stat-option strong, .creator-stat-option small { display: block; }
.creator-stat-option strong { font-size: 10px; }
.creator-stat-option small { margin-top: 1px; color: #8b7780; font-size: 7px; font-weight: 800; line-height: 1.2; }
.creator-stat-option.expression.selected { color: #b62f63; background: #fff0f5; border-color: #d64879; }
.creator-stat-option.influence.selected { color: #246fae; background: #edf7ff; border-color: #287fc8; }
.creator-stat-option.adaptation.selected { color: #187b68; background: #ecfbf7; border-color: #239b82; }
.creator-stat-option.luck.selected { color: #a87818; background: #fff8df; border-color: #d4a23a; }
.creator-idol-preview .ability { position: relative; min-height: 45px; padding-right: 45px; }
.creator-idol-preview .ability .ability-name { display: flex; align-items: center; gap: 4px; }
.creator-idol-preview .ability .affinity-icon { width: 17px; height: 17px; }
.creator-idol-preview .ability .ability-name b { font-size: 8px; }
.creator-idol-preview .ability em { position: absolute; right: 5px; bottom: 5px; color: #8b6f7c; font-size: 6px; font-style: normal; font-weight: 900; }

.home-status-item .home-stat-name { display: flex; align-items: center; gap: 5px; }
.home-status-item .home-stat-name .affinity-icon { flex: 0 0 24px; width: 24px; height: 24px; }
.home-status-item .home-stat-name b { font-size: 11px; }
.home-status-item.expression { color: #c6366a; border-color: #f0bfd0; background: linear-gradient(135deg,#fffdfd,#fff0f5); }
.home-status-item.influence { color: #2576b7; border-color: #bedcf1; background: linear-gradient(135deg,#fff,#edf7ff); }
.home-status-item.adaptation { color: #1e8973; border-color: #b9e3da; background: linear-gradient(135deg,#fff,#ecfbf7); }
.home-status-item em { color: currentColor; opacity: .78; }

.route-list .route-node.expression { background: #d64879; }
.route-list .route-node.influence { background: #287fc8; }
.route-list .route-node.adaptation { background: #239b82; }
.route-affinity-icon { width: 25px; height: 25px; }
.route-battle-chip { border-left-color: #d64879; }
.route-battle-chip.influence { border-left-color: #287fc8; }
.route-battle-chip.adaptation { border-left-color: #239b82; }
.route-battle-chip > i { overflow: hidden; color: #b72f62; background: #fff0f5; border-color: #f0bfd0; }
.route-battle-chip.influence > i { background: #edf7ff; border-color: #bedcf1; }
.route-battle-chip.adaptation > i { background: #ecfbf7; border-color: #b9e3da; }
.route-chip-icon { width: 25px; height: 25px; }
.route-battle-chip small > b { color: #bd3567; }
.route-battle-chip.influence small > b { color: #2576b7; }
.route-battle-chip.adaptation small > b { color: #1e8973; }
.route-battle-chip strong b { color: #bd3567; }
.route-battle-chip.influence strong b { color: #2576b7; }
.route-battle-chip.adaptation strong b { color: #1e8973; }
.progress-affinity-icon { width: 27px; height: 27px; }

.duel-category { display: inline-flex; align-items: center; gap: 7px; border-left: 4px solid #e24c81; }
.duel-category.influence { border-left-color: #3292df; }
.duel-category.adaptation { border-left-color: #33b99c; }
.duel-category-icon { width: 29px; height: 29px; }
.duel-required-stat.expression { border-left: 5px solid #d64879; }
.duel-required-stat.influence { border-left: 5px solid #287fc8; }
.duel-required-stat.adaptation { border-left: 5px solid #239b82; }
.duel-required-stat > i { overflow: hidden; background: #fff0f5; border-color: #f0bfd0; }
.duel-required-stat.influence > i { background: #edf7ff; border-color: #bedcf1; }
.duel-required-stat.adaptation > i { background: #ecfbf7; border-color: #b9e3da; }
.duel-requirement-icon { width: 31px; height: 31px; }
.duel-required-stat.expression strong b { color: #bd3567; }
.duel-required-stat.influence strong b { color: #2576b7; }
.duel-required-stat.adaptation strong b { color: #1e8973; }
.duel-scaling b { display: inline-flex; align-items: center; gap: 3px; }
.duel-scaling-icon { width: 20px; height: 20px; }

.status-stat-row { grid-template-columns: 38px 94px minmax(90px, 1fr) 74px 30px; }
.status-stat-icon { overflow: hidden; }
.status-affinity-icon { width: 34px; height: 34px; }
.status-stat-row > strong > small { display: block; margin-top: 2px; color: #85849a; font-size: 8px; line-height: 1.15; }
.status-stat-row.expression .status-stat-track i { background: linear-gradient(90deg,#d64879,#ef8bad); }
.status-stat-row.influence .status-stat-track i { background: linear-gradient(90deg,#287fc8,#78bce9); }
.status-stat-row.adaptation .status-stat-track i { background: linear-gradient(90deg,#239b82,#75cfba); }
.status-note-icon { overflow: hidden; }
.status-note-affinity-icon { width: 29px; height: 29px; }
.status-mini-affinity-icon { width: 27px; height: 27px; }
.status-mini-abilities > div > span { overflow: hidden; }
.skill-product-mark { overflow: hidden; }
.skill-product-mark .affinity-icon { width: 42px; height: 42px; }

@media (max-width: 1050px) {
  .affinity-pair { padding-inline: 8px; }
  .affinity-pair .affinity-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .affinity-pair strong { font-size: 11px; }
  .affinity-pair small { font-size: 10px; }
}

.master-card-effect-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px 0; }
.master-card-effect-row + .master-card-effect-row { border-top: 1px solid #eadfea; }
.master-card-effect-row > span, .master-card-effect-row > label, .master-extra-effect > label { display: flex; align-items: center; gap: 5px; }
.master-card-effect-row small, .master-extra-effect label small { color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }

/* Phone layout: keep desktop composition above 760px and give smaller screens
   their own stable, portrait-first flow. 100svh avoids jumps when mobile browser
   controls appear and disappear. */
@media (max-width: 759px) {
  html {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  #app,
  .app-shell,
  .screen {
    width: 100%;
    min-width: 0;
  }

  .app-shell {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
  }

  .topbar {
    min-height: calc(52px + env(safe-area-inset-top));
    height: auto;
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    border-radius: 0;
  }

  .brand { gap: 7px; font-size: 16px; letter-spacing: .025em; }
  .brand-mark { width: 26px; height: 26px; }
  .top-actions { gap: 6px; font-size: 11px; }
  .icon-button { min-width: 44px; min-height: 44px; padding: 7px 9px; }
  .saved { display: none; }

  .screen {
    min-height: calc(100vh - 52px);
    min-height: calc(100svh - 52px);
    padding: 16px max(12px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-x: hidden;
    border-radius: 0;
    box-shadow: none;
  }

  button,
  a,
  input,
  select { touch-action: manipulation; }

  button { -webkit-tap-highlight-color: transparent; }
  .primary, .secondary, .danger, .back-button, .small-button, .choice-button { min-height: 44px; }
  .section-head { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .section-head > div { min-width: 0; }
  .section-head h2 { margin-top: 4px; font-size: 24px; }
  .panel { padding: 15px; }

  /* Title */
  .title-screen {
    min-height: max(720px, calc(100svh - 52px));
    padding: 0;
  }

  .title-hero-copy {
    top: 22px;
    right: max(16px, env(safe-area-inset-right));
    left: max(16px, env(safe-area-inset-left));
    width: auto;
  }

  .title-hero-copy h1 { font-size: clamp(32px, 10vw, 42px); }
  .title-hero-copy .lead { max-width: 92%; font-size: 12px; line-height: 1.65; }
  .title-action-card {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    padding: 14px;
  }

  .title-start-options { grid-template-columns: 1fr; }
  .title-action-card .button-stack button,
  .title-action-card .button-stack a { min-height: 46px; }
  .title-character-ensemble {
    right: -188px;
    bottom: 188px;
    width: 620px;
    height: 445px;
    opacity: .82;
    transform: scale(.82);
    transform-origin: right bottom;
  }

  .title-stage-caption { display: none; }

  /* Character creation */
  .creator-screen { min-height: calc(100svh - 52px); padding: 12px; overflow: visible; }
  .creator-screen-header { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .creator-screen-header h2 { font-size: 21px; }
  .creator-screen-header > div > span { display: block; line-height: 1.5; }
  .creator-layout-refined { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .creator-form-card, .creator-idol-preview { min-height: 0; }
  .creator-form-card { padding: 14px 12px 16px; }
  .creator-avatar-grid { gap: 6px; }
  .creator-avatar-option { grid-template-rows: 82px auto; min-height: 119px; padding-inline: 4px; }
  .creator-avatar-art { height: 82px; }
  .creator-avatar-art .creator-character { height: 108px; }
  .creator-favorite-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-difficulty-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-difficulty-option { min-height: 49px; }
  .creator-stat-option strong { font-size: 11px; }
  .creator-idol-preview { min-height: 430px; }
  .creator-preview-stage { min-height: 225px; }

  /* Produce home */
  .home-screen { min-height: calc(100svh - 52px); padding: 12px; overflow: visible; }
  .home-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 0;
    padding: 0 0 10px;
  }

  .home-summary > div:first-child { grid-column: 1 / -1; padding: 9px 11px; }
  .home-summary strong { font-size: 20px; }
  .home-hp { min-width: 0; width: 100%; padding: 9px 10px; }
  .home-rank { padding-inline: 11px; }
  .home-command-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 0 12px; }
  .home-command, .home-command-route { width: 100%; min-width: 0; min-height: 78px; height: 78px; padding: 8px 10px; border-radius: 15px; }
  .home-command-route { min-height: 88px; height: 88px; }
  .command-copy { width: 58%; padding-inline: 5px; }
  .command-copy strong, .home-command-route .command-copy strong { font-size: 14px; white-space: normal; }
  .home-workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; }
  .home-character-area { min-height: 300px; overflow: hidden; }
  .home-character { bottom: -4px; left: -6px; width: 255px; height: 305px; }
  .home-character-halo { bottom: -12px; left: -24px; width: 270px; height: 270px; }
  .home-help-command { right: 0; bottom: 18px; width: 48%; min-height: 76px; height: 76px; }
  .home-status-panel { width: 100%; padding: 14px; }

  /* Route and task selection */
  .route-select-screen,
  .task-select-screen { min-height: calc(100svh - 52px); padding: 12px; overflow: visible; }
  .produce-screen-header { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .produce-screen-header h2 { font-size: 22px; }
  .produce-screen-actions { width: 100%; justify-content: space-between; }
  .produce-status-chip, .produce-exit { min-height: 42px; padding: 8px 10px; }
  .affinity-legend { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .affinity-pair small { white-space: normal; }
  .route-list .route-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .route-card-flow { width: 100%; }
  .route-flow-heading { align-items: flex-start; flex-direction: column; }
  .route-flow-heading .route-nodes { justify-content: flex-start; }
  .route-battle-list { grid-template-columns: minmax(0, 1fr); }
  .route-card-action { grid-template-columns: minmax(0, 1fr); }
  .route-select-button { min-height: 46px; }
  .task-select-screen .task-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .task-select-screen .task-main,
  .task-select-screen .progress-panel { min-height: 0; padding: 15px; }
  .task-command-header { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .task-select-screen .task-command-header .task-icon { width: 48px; height: 48px; font-size: 25px; }
  .task-command-header h2 { font-size: 22px; }
  .task-command-header > span { grid-column: 1 / -1; justify-self: start; }
  .task-feature-visual { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .task-select-screen .task-option-area .lesson-option,
  .task-select-screen .task-option-area .choice-button { gap: 8px; min-height: 60px; padding: 11px; }
  .task-select-screen .gain { flex: 0 0 auto; white-space: normal; text-align: center; }
  .task-option-area .effect-upgrade-list { grid-template-columns: minmax(0, 1fr); }

  /* Battle: the arena keeps a fixed portrait ratio; cards scroll horizontally. */
  .duel-screen { min-height: calc(100svh - 52px); padding-bottom: calc(14px + env(safe-area-inset-bottom)); overflow: hidden; }
  .duel-header { align-items: flex-start; flex-direction: column; gap: 8px; min-height: 0; padding: 10px 12px; }
  .duel-header > div { width: 100%; gap: 8px; }
  .duel-header h2 { width: 100%; font-size: 18px; }
  .duel-category { font-size: 13px; }
  .duel-category-icon { width: 24px; height: 24px; }
  .duel-required-stat { max-width: 100%; min-height: 42px; }
  .duel-required-stat > i { flex-basis: 30px; width: 30px; height: 30px; }
  .duel-required-stat small { overflow: hidden; text-overflow: ellipsis; }
  .duel-turn { align-self: flex-end; margin-top: -45px; font-size: 12px; }
  .duel-turn strong { font-size: 22px; }
  .duel-screen .duel-arena { width: 100%; height: auto; min-height: 500px; aspect-ratio: 3 / 4; }
  .duel-screen .enemy-hud { top: 12px; left: 10px; width: 70%; max-width: none; padding: 10px; }
  .duel-screen .player-hud { right: 10px; bottom: 12px; width: 76%; max-width: none; padding: 10px; }
  .duel-name h3 { margin-bottom: 6px; font-size: 17px; }
  .duel-health > strong { min-width: 65px; font-size: 17px; }
  .duel-badges { gap: 4px; margin-top: 6px; }
  .duel-badges span, .player-hud .duel-badges span { padding: 3px 5px; font-size: 12px; }
  .duel-intent { margin-top: 6px; padding: 7px; }
  .duel-intent small, .duel-intent em { font-size: 10px; }
  .duel-intent strong { font-size: 14px; }
  .duel-scaling { display: none; }
  .duel-screen .enemy-actor { top: 135px; right: -2%; width: 52%; height: 225px; }
  .duel-screen .player-actor { bottom: 0; left: -6%; width: 56%; height: 280px; }
  .duel-log { min-height: 46px; padding: 9px 12px; font-size: 12px; }
  .duel-hand { padding: 12px 10px 0; }
  .duel-hand > header { align-items: flex-start; }
  .duel-hand header p { font-size: 11px; text-align: right; }
  .duel-screen .card-hand {
    gap: 9px;
    margin-inline: -10px;
    padding: 9px 10px 13px;
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .duel-screen .game-card { flex: 0 0 156px; min-width: 156px; max-width: 156px; min-height: 210px; scroll-snap-align: start; }

  /* Story */
  .story-screen { min-height: max(640px, calc(100svh - 52px)); }
  .story-title { top: 18px; left: 16px; }
  .story-title h2 { max-width: 235px; font-size: 21px; }
  .story-skip { top: 16px; right: 14px; min-height: 42px; }
  .story-cast { inset: 68px -88px 155px; grid-template-columns: repeat(3, 1fr); }
  .story-portrait { width: 210px; height: 395px; }
  .story-portrait.president { width: 195px; height: 380px; }
  .story-dialogue { width: calc(100% - 24px); min-height: 150px; margin: 0 12px 14px; padding: 28px 58px 20px 16px; }
  .story-dialogue p { min-height: 70px; font-size: 15px; line-height: 1.65; }
  .story-name { left: 14px; min-width: 118px; padding: 7px 12px; }
  .story-next { right: 10px; bottom: 18px; min-width: 44px; min-height: 44px; padding: 8px 10px; }

  /* Shop */
  .shop-lobby, .shop-lobby-scene { min-height: max(700px, calc(100svh - 52px)); }
  .shop-lobby-header { flex-wrap: wrap; gap: 8px; padding: 14px 12px; }
  .shop-lobby-header-actions { width: 100%; justify-content: space-between; }
  .shop-wallet, .shop-exit { min-height: 42px; padding: 8px 10px; }
  .shop-welcome { top: 150px; left: 18px; width: calc(100% - 36px); }
  .shop-welcome h1 { font-size: 27px; }
  .shop-welcome > span { max-width: 94%; font-size: 12px; }
  .shop-command-ring { bottom: 26px; left: 12px; gap: 10px; }
  .shop-command-button { width: 138px; height: 138px; }
  .shop-command-copy strong { font-size: 19px; }
  .shop-clerk { right: -55px; bottom: 100px; width: 235px; opacity: .92; }
  .shop-clerk-bubble { top: 75px; left: -116px; width: 142px; padding: 9px; }
  .shop-clerk-bubble span { font-size: 9px; }
  .shop-floor-caption { display: none; }
  .shop-catalog { min-height: calc(100svh - 52px); padding: 12px; background-attachment: scroll; }
  .shop-catalog-header { flex-wrap: wrap; gap: 9px; padding: 12px; }
  .shop-catalog-header h2 { font-size: 22px; }
  .shop-catalog-actions { width: 100%; justify-content: space-between; }
  .shop-market-rule { margin-left: 0; line-height: 1.45; }
  .shop-shelf-section { padding: 13px 11px 25px; }
  .shop-shelf-grid, .skill-shelf-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shop-card-art { height: auto; aspect-ratio: 16 / 9; }
  .skill-product, .luck-product { grid-template-columns: 67px minmax(0, 1fr); }

  /* Status, rewards, results, settings and guides */
  .status-profile-screen { min-height: calc(100svh - 52px); overflow: visible; }
  .status-screen-header { align-items: center; min-height: 76px; padding: 14px 12px 8px; }
  .status-screen-header > div > p { font-size: 28px; }
  .status-home-button { min-height: 44px; padding: 8px 10px; }
  .status-profile-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0 12px 16px; }
  .status-idol-showcase { min-height: 500px; overflow: hidden; }
  .status-idol-showcase .status-character { left: -60px; bottom: -70px; width: 330px; height: 520px; }
  .status-idol-halo { left: -95px; bottom: -70px; }
  .status-identity-card { right: 8px; bottom: 16px; width: min(280px, calc(100% - 24px)); }
  .status-tab-panel { min-height: 0; }
  .status-stat-row { grid-template-columns: 34px 76px minmax(0, 1fr) 57px 24px; gap: 5px; }
  .status-stat-row > strong { font-size: 11px; }
  .status-stat-value b { font-size: 18px; }
  .status-lower-grid { grid-template-columns: minmax(0, 1fr); }
  .status-overall { min-height: 145px; }
  .status-history-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-achievement-grid { grid-template-columns: minmax(0, 1fr); }
  .reward-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block: 16px; }
  .rank-reward-panel { padding: 15px; }
  .rank-reward-heading { align-items: flex-start; }
  .deck-layout, .dashboard, .creation-layout, .result-screen { grid-template-columns: minmax(0, 1fr); }
  .deck-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .deck-row button { grid-column: 2 / -1; }
  .setting-row { align-items: flex-start; flex-direction: column; }
  .setting-row button { width: 100%; }
  .result-screen { gap: 14px; padding: 14px 12px calc(18px + env(safe-area-inset-bottom)); }
  .result-medal { min-height: 260px; }
  .result-medal span { font-size: 64px; }
  .result-medal h1 { font-size: 29px; }
  .result-card { padding: 18px; }
  .tips-steps-four, .battle-special-tips-grid, .tips-challenge-branches { grid-template-columns: minmax(0, 1fr); }
  .tips-effect-visual { justify-content: flex-start; margin-inline: -4px; padding: 10px; scroll-snap-type: x proximity; }
  .tips-effect-visual > * { scroll-snap-align: start; }

  /* Tutorial overlay stays inside the visible phone area. */
  .tutorial-coach,
  .tutorial-coach-battle {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    grid-template-columns: 74px minmax(0, 1fr);
    width: auto;
    transform: none;
  }
  .tutorial-coach.is-top { top: calc(62px + env(safe-area-inset-top)); bottom: auto; }
  .tutorial-president { height: 145px; }
  .tutorial-president img { width: 105px; height: 165px; transform: translateX(-17px); }
  .tutorial-message { padding: 14px 13px 12px; margin-left: -4px; border-width: 3px; border-radius: 18px 18px 5px 18px; }
  .tutorial-message > small { font-size: 10px; }
  .tutorial-message > strong { font-size: 18px; }
  .tutorial-message p { margin: 7px 0 9px; font-size: 13px; line-height: 1.5; }
  .tutorial-finish { min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .tutorial-mode [data-tutorial-target="true"] { outline-width: 3px; outline-offset: 3px; }

  .toast {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    text-align: center;
  }
}

/* Landscape phones get a wider battle stage without changing desktop/tablet. */
@media (max-width: 759px) and (orientation: landscape) {
  .title-screen,
  .story-screen,
  .shop-lobby,
  .shop-lobby-scene { min-height: 640px; }

  .duel-screen .game-card small { font-size: 16px; }

  .duel-screen .duel-arena {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .duel-screen .enemy-hud { width: 47%; }
  .duel-screen .player-hud { width: 50%; }
  .duel-screen .enemy-actor { top: 42px; right: 2%; width: 38%; height: 230px; }
  .duel-screen .player-actor { left: 2%; width: 40%; height: 265px; }
}

/* iPhone portrait fit: keep the game canvas inside the visible viewport.
   Long collections may scroll inside their own panels, but the browser page itself
   never needs to move and the current screen always remains fully framed. */
@media (max-width: 759px) and (orientation: portrait) {
  html,
  body,
  #app {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body { position: fixed; inset: 0; }

  .app-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }

  .topbar {
    height: calc(52px + env(safe-area-inset-top));
    min-height: calc(52px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .screen {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* Title */
  .title-screen { height: 100%; min-height: 0; }
  .title-hero-copy { top: 15px; }
  .title-hero-copy .eyebrow { margin-bottom: 5px; font-size: 8px; }
  .title-hero-copy h1 { font-size: clamp(29px, 8.7vw, 36px); line-height: 1.12; }
  .title-hero-copy .lead { max-width: 85%; margin-top: 10px; font-size: 10px; line-height: 1.5; }
  .title-character-ensemble {
    top: 145px;
    right: 0;
    bottom: 232px;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    width: 100%;
    height: auto;
    padding-inline: 8px;
    opacity: .9;
    transform: none;
  }
  .title-character-ensemble .title-character {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .title-action-card {
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 10px 11px 9px;
    border-radius: 15px;
  }
  .title-card-copy { margin-bottom: 9px; font-size: 10px; }
  .title-action-card .button-stack { gap: 6px; }
  .title-action-card .button-stack button,
  .title-action-card .button-stack a { min-height: 40px; padding-block: 8px; font-size: 11px; }
  .title-action-card .button-note { margin-top: 8px; font-size: 8px; }

  /* Character creation uses a compact two-column studio layout. */
  .creator-screen { height: 100%; min-height: 0; padding: 7px; overflow: hidden; }
  .creator-screen-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 48px;
    padding: 7px 8px;
    margin-bottom: 6px;
  }
  .creator-screen-header .eyebrow,
  .creator-screen-header > div > span { display: none; }
  .creator-screen-header h2 { font-size: 15px; line-height: 1.25; }
  .creator-screen-header .back-button { min-height: 38px; padding: 6px 8px; font-size: 9px; }
  .creator-layout-refined {
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 6px;
    height: calc(100% - 54px);
    min-height: 0;
  }
  .creator-form-card { min-height: 0; padding: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .creator-form-heading { gap: 6px; padding-bottom: 5px; }
  .creator-form-heading > span,
  .creator-field-label > span { width: 21px; height: 21px; font-size: 7px; }
  .creator-form-heading h3 { font-size: 14px; }
  .creator-form-card .field { margin: 6px 0; }
  .creator-field-label b { font-size: 9px; }
  .creator-field-label small,
  .creator-avatar-name small,
  .creator-name-field small { display: none; }
  .creator-avatar-option { grid-template-rows: 61px auto; min-height: 85px; padding: 3px; }
  .creator-avatar-art { height: 61px; }
  .creator-avatar-art .creator-character { height: 82px; }
  .creator-avatar-name strong { font-size: 9px; }
  .creator-favorite-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .creator-difficulty-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .creator-difficulty-option { min-height: 39px; padding: 3px; }
  .creator-difficulty-option > span { display: none; }
  .creator-difficulty-option > strong { font-size: 9px; }
  .creator-difficulty-option > small { font-size: 6px; }
  .creator-difficulty-description { min-height: 0; font-size: 6px; line-height: 1.25; }
  .creator-favorite-options .creator-stat-option { min-height: 37px; padding: 3px 4px; }
  .creator-stat-option .affinity-icon { flex-basis: 19px; width: 19px; height: 19px; }
  .creator-stat-option strong { font-size: 9px; }
  .creator-stat-option small { display: none; }
  .creator-form-card .field input { padding: 7px 8px; font-size: 12px; }
  .creator-start-button { min-height: 40px; padding: 8px; font-size: 10px; }
  .creator-idol-preview { height: 100%; min-height: 0; padding: 7px 5px; }
  .creator-preview-heading span { display: none; }
  .creator-preview-name { padding-top: 4px; }
  .creator-preview-name h2 { font-size: 13px; overflow-wrap: anywhere; }
  .creator-preview-stage { min-height: 0; overflow: hidden; }
  .creator-preview-stage .creator-character { width: 125px; height: 230px; margin-bottom: -12px; }
  .creator-idol-preview .preview-stats { padding: 4px; }
  .creator-idol-preview .ability-grid { grid-template-columns: 1fr; gap: 2px; }
  .creator-idol-preview .ability { min-height: 0; padding: 3px; }
  .creator-idol-preview .ability span,
  .creator-idol-preview .ability em,
  .creator-idol-preview .ability .ability-name b { font-size: 6px; }
  .creator-idol-preview .ability strong { font-size: 11px; }

  /* Produce home */
  .home-screen {
    grid-template-rows: auto auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    padding: 7px;
    overflow: hidden;
  }
  .home-summary { grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr) auto; gap: 5px; padding-bottom: 5px; }
  .home-summary > div:first-child { grid-column: auto; padding: 6px; }
  .home-summary > div:first-child > span { display: none; }
  .home-summary p { font-size: 7px; }
  .home-summary strong { margin-right: 2px; font-size: 15px; }
  .home-hp { padding: 6px; }
  .home-rank { padding: 6px 7px; }
  .home-rank span { display: none; }
  .home-rank strong { font-size: 19px; }
  .home-command-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 0 0 6px; }
  .home-command,
  .home-command-route { min-height: 62px; height: 62px; padding: 5px 7px; border-radius: 12px; }
  .home-command-route { min-height: 68px; height: 68px; }
  .command-copy { width: 62%; padding: 4px; }
  .command-copy strong,
  .home-command-route .command-copy strong { font-size: 12px; }
  .home-workspace { grid-template-columns: 43% minmax(0, 57%); gap: 5px; min-height: 0; padding: 0; }
  .home-character-area { min-height: 0; height: 100%; }
  .home-character { bottom: -5px; left: -42px; width: 220px; height: 300px; }
  .home-character-halo { bottom: -12px; left: -52px; width: 225px; height: 225px; }
  .home-help-command { right: 1px; bottom: 5px; width: 92%; min-height: 55px; height: 55px; }
  .home-status-panel { align-self: stretch; padding: 8px; overflow: hidden; border-radius: 12px; }
  .home-status-panel header { margin-bottom: 5px; }
  .home-status-panel header p,
  .home-idol-summary,
  .home-status-badge { display: none; }
  .home-status-panel header h2 { font-size: 14px; }
  .home-status-grid { gap: 4px; }
  .home-status-item { min-height: 48px; padding: 6px; }
  .home-status-item span { font-size: 8px; }
  .home-status-item strong { font-size: 18px; }
  .home-status-item em { font-size: 6px; }
  .home-goal { margin-top: 5px; padding: 6px; }
  .home-goal strong { font-size: 13px; }
  .home-account-values { gap: 4px; margin-top: 4px; }
  .home-account-values div { padding: 5px; }
  .home-account-values span { font-size: 7px; }
  .home-account-values strong { font-size: 12px; }

  /* Battle */
  .duel-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto 216px;
    height: 100%;
    min-height: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .duel-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 6px 9px; }
  .duel-header > div { min-width: 0; }
  .duel-header h2 { font-size: 14px; }
  .duel-category { padding: 3px 7px; font-size: 10px; }
  .duel-required-stat { grid-column: 1 / -1; min-height: 32px; padding: 3px 6px; }
  .duel-required-stat > i { flex-basis: 23px; width: 23px; height: 23px; }
  .duel-turn { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 9px; }
  .duel-turn strong { font-size: 17px; }
  .duel-screen .duel-arena { height: 100%; min-height: 0; aspect-ratio: auto; }
  .duel-screen .enemy-hud { top: 7px; left: 7px; width: 67%; padding: 7px; }
  .duel-screen .player-hud { right: 7px; bottom: 7px; width: 74%; padding: 7px; }
  .duel-name h3 { margin-bottom: 3px; font-size: 13px; }
  .duel-health > span { font-size: 8px; }
  .duel-health > strong { min-width: 52px; font-size: 13px; }
  .duel-hp-track { height: 8px; }
  .duel-badges { margin-top: 3px; }
  .duel-badges span,
  .player-hud .duel-badges span { font-size: 9px; }
  .duel-intent { margin-top: 3px; padding: 4px; }
  .duel-intent > span { font-size: 17px; }
  .duel-intent small,
  .duel-intent em { font-size: 8px; }
  .duel-intent strong { font-size: 11px; }
  .duel-screen .enemy-actor { top: 88px; height: 180px; }
  .duel-screen .player-actor { height: 220px; }
  .duel-log { min-height: 34px; padding: 6px 9px; font-size: 10px; }
  .duel-hand { height: 216px; padding: 7px 7px 0; overflow: hidden; }
  .duel-hand h3 { font-size: 13px; }
  .duel-hand header p { font-size: 9px; }
  .duel-screen .card-hand { height: 181px; margin-top: 2px; padding: 5px 7px 8px; }
  .duel-screen .game-card { flex-basis: 133px; min-width: 133px; max-width: 133px; min-height: 170px; padding: 7px; }
  .duel-screen .game-card .card-art { height: 58px; }
  .duel-screen .game-card strong { font-size: 11px; }
  .duel-screen .game-card small { margin-top: 3px; font-size: 9px; line-height: 1.25; }
  .duel-screen .card-grade { font-size: 8px; }

  /* Full-scene screens */
  .story-screen,
  .shop-lobby,
  .shop-lobby-scene { height: 100%; min-height: 0; }
  .story-cast { bottom: 140px; }
  .story-dialogue { min-height: 132px; margin-bottom: 8px; padding-top: 24px; }
  .shop-welcome { top: 106px; }
  .shop-command-ring { bottom: 12px; }
  .shop-command-button { width: 116px; height: 116px; }
  .shop-clerk { bottom: 77px; width: 205px; }

  /* Content-heavy screens stay framed and use only a local content scroller. */
  .ranking-screen,
  .shop-catalog,
  .route-select-screen,
  .task-select-screen,
  .status-profile-screen,
  .result-screen,
  .tips-screen {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .status-idol-showcase {
    display: grid;
    grid-template-rows: minmax(250px, 42vh) auto;
    gap: 8px;
    min-height: 0;
    overflow: visible;
  }
  .status-idol-showcase .status-character {
    position: relative;
    grid-row: 1;
    left: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
  }
  .status-idol-showcase .status-character img { object-position: center top; }
  .status-idol-halo {
    top: -16px;
    right: 4%;
    bottom: auto;
    left: 4%;
    width: auto;
    height: min(290px, 42vh);
  }
  .status-identity-card {
    position: relative;
    grid-row: 2;
    right: auto;
    bottom: auto;
    width: 100%;
  }
}

/* Swipe-page wrappers behave like the original grid on desktop. */
.shop-shelf-pages,
.shop-shelf-page { display: contents; }
.shop-page-guide,
.shelf-product-mobile-toggle { display: none; }
.mobile-scroll-top,
.shop-product-detail-overlay { display: none; }

/* Approved portrait layouts: full cast, ten-item shelves, one-screen tasks,
   readable battle HUDs, and five visible cards. */
@media (max-width: 759px) and (orientation: portrait) {
  /* Story: reserve a complete stage above the dialogue and contain every sprite. */
  .story-screen { height: 100%; min-height: 0; }
  .story-title { top: 10px; left: 12px; }
  .story-title .eyebrow { margin-bottom: 2px; font-size: 8px; }
  .story-title h2 { max-width: 240px; font-size: 17px; line-height: 1.2; }
  .story-skip { top: 9px; right: 10px; min-height: 36px; padding: 6px 9px; font-size: 10px; }
  .story-cast {
    inset: 48px 0 130px;
    grid-template-columns: repeat(3, minmax(0, 30%));
    align-items: end;
    justify-content: center;
    gap: 0;
    overflow: visible;
  }
  .story-portrait,
  .story-portrait.president {
    align-self: stretch;
    width: 155px;
    max-width: 42vw;
    height: 100%;
    transform: translateY(0) scale(.91);
    transform-origin: bottom center;
  }
  .story-portrait.protagonist { justify-self: start; }
  .story-portrait.rival { justify-self: end; }
  .story-portrait.active { transform: translateY(0) scale(1); }
  .story-portrait .character-art,
  .story-portrait .character-art img { width: 100%; height: 100%; }
  .story-portrait .character-art img { object-fit: contain; object-position: center bottom; }
  .story-dialogue {
    width: calc(100% - 16px);
    min-height: 122px;
    max-height: 126px;
    margin: 0 8px 5px;
    padding: 23px 48px 12px 12px;
  }
  .story-dialogue p { min-height: 0; max-height: 82px; overflow: hidden; font-size: 12px; line-height: 1.55; }
  .story-name { left: 9px; min-width: 98px; padding: 5px 9px; font-size: 11px; }
  .story-next { right: 7px; bottom: 9px; min-width: 40px; min-height: 40px; padding: 6px; font-size: 10px; }

  /* Shop catalog: two columns by five rows, then horizontal snap pages. */
  .shop-catalog,
  .shop-deck-catalog,
  .shop-skill-catalog {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 4px;
    height: 100%;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
  }
  .shop-catalog-header { flex-wrap: nowrap; gap: 5px; min-height: 52px; padding: 6px 8px; margin: 0; border-radius: 11px; }
  .shop-catalog-header > div:first-child { min-width: 0; }
  .shop-catalog-header p,
  .shop-catalog-header > div:first-child > span { display: none; }
  .shop-catalog-header h2 { overflow: hidden; margin: 0; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .shop-catalog-actions { width: auto; flex: 0 0 auto; gap: 4px; }
  .shop-catalog-actions > span,
  .shop-catalog-actions .shop-exit { min-height: 34px; padding: 5px 7px; font-size: 8px; }
  .shop-catalog-actions strong { font-size: 10px; }
  .shop-market-rule { overflow: hidden; margin: 0; padding: 4px 7px; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .shop-shelf-section {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    padding: 5px;
    overflow: hidden;
    border-radius: 11px;
  }
  .shop-shelf-section > header { min-height: 25px; padding: 0 2px 4px; }
  .shop-shelf-section > header > span { display: none; }
  .shop-shelf-section > header p { display: none; }
  .shop-shelf-section > header h3 { font-size: 12px; }
  .shop-shelf-section > header small { font-size: 8px; }
  .shop-shelf-grid,
  .skill-shelf-grid {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
  }
  .shop-shelf-pages {
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shop-shelf-pages::-webkit-scrollbar { display: none; }
  .shop-shelf-page {
    display: grid;
    flex: 0 0 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    min-height: 0;
    padding: 1px 1px 4px;
    scroll-snap-align: start;
  }
  .shop-page-guide { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 19px; color: #745968; font-size: 8px; }
  .shop-page-guide > span { display: flex; gap: 3px; }
  .shop-page-guide i { width: 5px; height: 5px; background: #d4c1cc; border-radius: 50%; }
  .shop-page-guide i.current { background: #d35f88; }
  .shop-page-guide b { font-size: 9px; }
  .shop-page-guide small { font-size: 8px; }
  .shelf-product,
  .deck-product,
  .skill-product {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 0 #6d3a31, 0 4px 7px rgba(25,7,18,.22), inset 0 1px 0 #fff;
  }
  .shelf-product:hover { box-shadow: 0 2px 0 #6d3a31, 0 4px 7px rgba(25,7,18,.22), inset 0 1px 0 #fff; transform: none; }
  .shelf-product-art { align-self: stretch; padding: 4px 0 4px 4px; }
  .shop-card-art { width: 38px; height: 100%; min-height: 44px; aspect-ratio: auto; border-radius: 5px; }
  .shelf-product-copy { align-self: stretch; min-width: 0; padding: 4px 5px; overflow: hidden; }
  .shelf-product-kicker { font-size: 5px; }
  .shelf-product h3 { margin: 1px 0; font-size: 9px; }
  .shelf-product p,
  .skill-effect-summary { display: block; min-height: 0; max-height: 14px; margin: 0; overflow: hidden; font-size: 6px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .shelf-product-footer { gap: 3px; margin-top: 2px; }
  .shelf-grade,
  .shelf-price,
  .shelf-upgrade-hint { font-size: 6px; }
  .shop-catalog .effect-upgrade-panel,
  .shop-catalog .shop-remove-button { display: none; }
  .shelf-product-mobile-toggle { display: block; width: 100%; min-height: 19px; padding: 2px 3px; margin-top: 2px; color: #fff; background: linear-gradient(110deg,#cf718c,#855792); border-radius: 5px; font-size: 6px; font-weight: 900; }
  .skill-product-mark { width: 31px; height: 31px; margin-left: 6px; border-width: 1px; font-size: 13px; }
  .skill-product-mark .affinity-icon { width: 27px; height: 27px; }
  .skill-product .shelf-product-copy { padding: 4px 5px; }
  .shop-action-button { min-height: 19px; padding: 2px 5px; font-size: 6px; }
  .shop-special-shelf { min-height: 48px; max-height: 48px; padding: 4px; }
  .shop-special-shelf > header { display: none; }
  .shop-special-grid { display: block; }
  .luck-product { grid-template-columns: 34px 1fr; min-height: 40px; }
  .luck-product-icon { width: 27px; height: 27px; margin-left: 4px; font-size: 14px; border-width: 1px; box-shadow: none; }
  .luck-product .shelf-product-mobile-toggle { display: none; }
  .shop-catalog-note { display: none; }
  .shelf-product.mobile-expanded {
    position: fixed;
    z-index: 1001;
    top: calc(62px + env(safe-area-inset-top));
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: start;
    width: auto;
    height: auto;
    padding: 12px;
    overflow-y: auto;
    background: linear-gradient(145deg,#fffdfb,#f7e9eb);
    border: 2px solid #e58aa5;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(20,5,18,.66);
  }
  .shop-product-detail-overlay {
    position: fixed;
    z-index: 1000;
    inset: calc(52px + env(safe-area-inset-top)) 0 0;
    display: block;
    width: 100%;
    padding: 0;
    background: rgba(20,5,18,.58);
    border: 0;
    border-radius: 0;
  }
  .shelf-product.mobile-expanded.shop-product-detail-modal {
    top: calc(62px + env(safe-area-inset-top));
    padding-top: 16px;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    scroll-padding-top: 16px;
    touch-action: pan-y;
    transform: none;
  }
  .shelf-product.mobile-expanded .shelf-product-art { padding: 0 8px 0 0; }
  .shelf-product.mobile-expanded .shop-card-art { width: 110px; height: 110px; }
  .shelf-product.mobile-expanded .shop-card-art img { object-fit: contain; object-position: center; }
  .shelf-product.mobile-expanded .skill-product-mark { width: 72px; height: 72px; margin: 10px auto; }
  .shelf-product.mobile-expanded .shelf-product-copy { padding: 0; overflow: visible; }
  .shelf-product.mobile-expanded .shelf-product-kicker { font-size: 8px; }
  .shelf-product.mobile-expanded h3 { margin: 5px 0; font-size: 18px; }
  .shelf-product.mobile-expanded p,
  .shelf-product.mobile-expanded .skill-effect-summary { max-height: none; font-size: 12px; line-height: 1.5; white-space: normal; }
  .shelf-product.mobile-expanded .shelf-grade,
  .shelf-product.mobile-expanded .shelf-price,
  .shelf-product.mobile-expanded .shelf-upgrade-hint { font-size: 11px; }
  .shelf-product.mobile-expanded .effect-upgrade-panel,
  .shelf-product.mobile-expanded .shop-remove-button { display: block; }
  .shelf-product.mobile-expanded .shelf-product-mobile-toggle { min-height: 40px; margin-top: 10px; font-size: 12px; }
  .shelf-product.mobile-expanded .shop-action-button { min-height: 40px; padding: 8px 12px; font-size: 11px; }

  /* Route selection: all three plans remain visible and actionable. */
  .route-select-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 4px;
    height: 100%;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
  }
  .route-select-screen .produce-screen-header { flex-wrap: nowrap; min-height: 49px; padding: 6px 8px; margin: 0; }
  .route-select-screen .produce-screen-header p,
  .route-select-screen .produce-screen-header > div:first-child > span { display: none; }
  .route-select-screen .produce-screen-header h2 { font-size: 15px; }
  .route-select-screen .produce-screen-actions { width: auto; flex: 0 0 auto; gap: 4px; }
  .route-select-screen .produce-status-chip,
  .route-select-screen .produce-exit { min-height: 34px; padding: 5px 6px; font-size: 8px; }
  .route-guidance { min-height: 35px; padding: 5px 7px; margin: 0; }
  .route-guidance > span { font-size: 14px; }
  .route-guidance strong { font-size: 9px; }
  .route-guidance p { overflow: hidden; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .route-affinity-legend { display: none; }
  .route-grid.route-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 5px;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }
  .route-list .route-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 3px;
    min-height: 0;
    min-width: 0;
    width: 100%;
    padding: 5px 7px;
    overflow: hidden;
    border-radius: 10px;
  }
  .route-card-title { display: flex; align-items: center; gap: 6px; }
  .route-list .route-number { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; font-size: 9px; }
  .route-list .route-card-kicker,
  .route-list .route-card-title > div > p:not(.route-card-kicker) { display: none; }
  .route-list .route-card h3 { margin: 0; font-size: 12px; }
  .route-card-flow { min-height: 0; padding: 3px 5px; }
  .route-flow-heading { flex-direction: row; align-items: center; gap: 4px; }
  .route-flow-heading > span { font-size: 6px; }
  .route-flow-heading .route-nodes { flex: 1; justify-content: flex-end; gap: 3px; margin: 0; }
  .route-list .route-node { flex-basis: 22px; width: 22px; height: 22px; font-size: 10px; }
  .route-list .route-node:not(:last-child)::after { top: 10px; left: 20px; width: 7px; }
  .route-affinity-icon { width: 17px; height: 17px; }
  .route-battle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin-top: 3px; }
  .route-battle-chip { grid-template-columns: 20px minmax(0,1fr); gap: 3px; padding: 2px 4px; border-left-width: 2px; border-radius: 5px; }
  .route-battle-chip > i { width: 20px; height: 20px; font-size: 9px; }
  .route-chip-icon { width: 16px; height: 16px; }
  .route-battle-chip small { font-size: 6px; }
  .route-battle-chip strong { font-size: 7px; }
  .route-battle-chip strong b { font-size: 9px; }
  .route-battle-chip strong em { font-size: 6px; }
  .route-card-action { grid-template-columns: minmax(0,1fr) 122px; gap: 4px; }
  .route-card-action > span.route-boss-requirement { justify-content: flex-start; font-size: 7px; }
  .route-select-button { min-height: 32px; padding: 5px; font-size: 8px; }
  .route-screen-note { margin: 0; font-size: 7px; }

  /* Tasks and events: replace the tall PC progress sidebar with a bottom strip. */
  .task-select-screen { height: 100%; min-height: 0; padding: 6px; overflow: hidden; }
  .task-select-screen .task-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 94px;
    gap: 5px;
    height: 100%;
    min-height: 0;
  }
  .task-select-screen .task-main { min-height: 0; padding: 7px; overflow: hidden; border-radius: 11px; }
  .task-command-header { grid-template-columns: 40px minmax(0,1fr) auto; gap: 7px; padding-bottom: 6px; }
  .task-select-screen .task-command-header .task-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
  .task-command-header p { font-size: 7px; }
  .task-command-header h2 { font-size: 17px; }
  .task-command-header > span { grid-column: auto; align-self: center; padding: 4px 5px; font-size: 7px; }
  .task-feature-visual { height: clamp(125px, 23vh, 174px); aspect-ratio: auto; border-radius: 9px; }
  .task-feature-visual figcaption { right: 7px; bottom: 5px; font-size: 7px; }
  .task-select-screen .task-main-content { padding: 6px 2px 0; }
  .task-select-screen .task-main-content > p { max-height: 42px; overflow: hidden; font-size: 10px; line-height: 1.4; }
  .task-event-status,
  .task-rest-status { margin-top: 4px; padding: 3px 5px; font-size: 8px; }
  .task-option-area { padding-top: 6px; }
  .task-select-screen .task-option-area .lesson-options,
  .task-select-screen .task-option-area .event-options { gap: 5px; }
  .task-select-screen .task-option-area .lesson-option,
  .task-select-screen .task-option-area .choice-button { min-height: 43px; padding: 6px 8px; border-radius: 8px; }
  .task-select-screen .task-option-area .lesson-option strong,
  .task-select-screen .task-option-area .choice-button strong { font-size: 10px; }
  .task-select-screen .task-option-area .lesson-option small,
  .task-select-screen .task-option-area .choice-button small { margin-top: 1px; font-size: 7px; }
  .task-select-screen .task-option-area .gain { padding: 3px 5px; font-size: 7px; }
  .task-select-screen .progress-panel {
    display: grid;
    grid-template-columns: 73px minmax(0,1fr) 79px;
    align-items: center;
    gap: 5px;
    min-height: 0;
    height: 94px;
    padding: 7px;
    overflow: hidden;
    border-radius: 11px;
  }
  .task-select-screen .progress-panel header { padding: 0; border: 0; }
  .task-select-screen .progress-panel header p { font-size: 6px; }
  .task-select-screen .progress-panel header h3 { padding: 0; font-size: 10px; }
  .task-select-screen .progress-panel header > span { position: static; display: inline-block; margin-top: 4px; font-size: 7px; }
  .task-select-screen .route-progress { display: flex; align-items: center; justify-content: center; gap: 3px; margin: 0; }
  .task-select-screen .route-progress::before { top: 50%; right: 4px; bottom: auto; left: 4px; width: auto; height: 2px; }
  .task-select-screen .progress-step { flex: 0 0 21px; gap: 0; }
  .task-select-screen .progress-step i { flex-basis: 21px; width: 21px; height: 21px; font-size: 8px; }
  .task-select-screen .progress-step > span { display: none; }
  .task-select-screen .progress-values { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 0; border: 0; }
  .task-select-screen .progress-values div { padding: 4px; }
  .task-select-screen .progress-values span { font-size: 6px; }
  .task-select-screen .progress-values strong { margin: 0; font-size: 11px; }

  /* Battle: strong ownership cues, lower player sprite, and all five cards. */
  .duel-screen {
    grid-template-rows: auto minmax(0, 1fr) 30px 188px;
    height: 100%;
    min-height: 0;
  }
  .duel-header { min-height: 52px; padding: 5px 7px; }
  .duel-header h2 { font-size: 12px; }
  .duel-category { padding: 3px 5px; font-size: 8px; }
  .duel-category-icon { width: 18px; height: 18px; }
  .duel-required-stat { min-height: 27px; padding: 2px 5px; }
  .duel-required-stat > i { flex-basis: 20px; width: 20px; height: 20px; }
  .duel-requirement-icon { width: 18px; height: 18px; }
  .duel-required-stat small { font-size: 7px; }
  .duel-required-stat strong { font-size: 9px; }
  .duel-required-stat strong b { font-size: 11px; }
  .duel-turn { font-size: 7px; }
  .duel-turn strong { font-size: 13px; }
  .duel-screen .duel-arena { min-height: 0; }
  .duel-screen .enemy-hud {
    top: 6px;
    left: 6px;
    width: 52%;
    padding: 7px;
    border-radius: 5px 13px 13px 13px;
    border-left: 4px solid #d95375;
  }
  .duel-screen .player-hud {
    right: 6px;
    bottom: 6px;
    width: 58%;
    padding: 7px;
    border-radius: 13px 13px 5px 13px;
    border-right: 4px solid #5c8fd2;
  }
  .duel-name > span { margin-bottom: 1px; font-size: 7px; letter-spacing: .12em; }
  .duel-name h3 { margin-bottom: 2px; font-size: 11px; }
  .enemy-name-line { gap: 4px; margin-bottom: 3px; }
  .enemy-hud .enemy-defense-badge { min-height: 20px; padding: 2px 4px; }
  .enemy-defense-badge strong { font-size: 7px; }
  .enemy-defense-badge b { font-size: 9px; }
  .duel-health { gap: 4px; }
  .duel-health > span { font-size: 7px; }
  .duel-health > strong { min-width: 47px; font-size: 11px; }
  .duel-hp-track { height: 7px; }
  .duel-badges { gap: 2px; margin-top: 3px; }
  .duel-badges span,
  .player-hud .duel-badges span { padding: 2px 3px; font-size: 7px; }
  .duel-intent { gap: 3px; margin-top: 3px; padding: 3px 4px; }
  .duel-intent strong { font-size: 9px; }
  .duel-scaling { display: none; }
  .duel-energy { top: 2px; padding: 4px 5px; font-size: 12px; }
  .player-hud .duel-player-action { margin-top: 4px; }
  .player-hud .duel-end-turn { min-height: 29px; padding: 4px 7px; font-size: 8px; }
  .duel-screen .enemy-actor { top: 68px; right: 0; width: 47%; height: 245px; }
  .duel-screen .player-actor { bottom: -12px; left: -5%; width: 50%; height: 290px; }
  .duel-screen .duel-player-art { overflow: visible; }
  .duel-screen .duel-player-art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  .duel-log { min-height: 30px; padding: 5px 7px; font-size: 8px; }
  .duel-hand { height: 188px; padding: 5px 5px 0; }
  .duel-hand > header { min-height: 22px; }
  .duel-hand header span { display: none; }
  .duel-hand h3 { margin: 0; font-size: 10px; }
  .duel-hand header p { font-size: 7px; }
  .duel-screen .card-hand {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 159px;
    margin: 1px 0 0;
    padding: 3px 0 5px;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .duel-screen .game-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 151px;
    padding: 3px;
    border-radius: 7px;
    box-shadow: 0 2px 0 #b68a9c;
  }
  .duel-screen .game-card .card-cost { top: 3px; right: 3px; width: 17px; height: 17px; font-size: 8px; }
  .duel-screen .game-card .card-art { height: 52px; margin: 0; border-radius: 5px; }
  .duel-screen .game-card strong { max-height: 22px; margin-top: 3px; overflow: hidden; font-size: 8px; line-height: 1.3; }
  .duel-screen .game-card small { display: -webkit-box; max-height: 31px; margin-top: 2px; overflow: hidden; font-size: 6px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .duel-screen .card-grade { padding-top: 2px; font-size: 6px; }
}

/* Mobile usability corrections: fit first, then retain a local vertical fallback. */
@media (max-width: 759px) and (orientation: portrait) {
  /* Card rewards and settings can always be panned vertically inside the game frame. */
  .reward-screen,
  .rank-reward-screen,
  .settings-screen {
    height: 100%;
    min-height: 0;
    padding: 9px 10px calc(18px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .reward-screen .section-head,
  .rank-reward-screen .section-head,
  .settings-screen .section-head { gap: 6px; margin-bottom: 9px; }
  .reward-screen .section-head h2,
  .rank-reward-screen .section-head h2,
  .settings-screen .section-head h2 { margin: 1px 0; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
  .reward-screen .section-head p,
  .rank-reward-screen .section-head p,
  .settings-screen .section-head p { margin: 1px 0; font-size: 9px; line-height: 1.35; }
  .reward-screen .rank-badge,
  .rank-reward-screen .rank-badge { padding: 7px 9px; font-size: 10px; }
  .reward-screen .reward-panel,
  .rank-reward-screen .rank-reward-panel { padding: 12px !important; }
  .reward-screen .reward-panel > h3,
  .rank-reward-screen .rank-reward-heading h3 { font-size: 14px; line-height: 1.35; }
  .reward-screen .reward-panel > p,
  .rank-reward-screen .rank-reward-heading p { font-size: 10px; line-height: 1.4; }
  .reward-screen .reward-grid,
  .rank-reward-screen .reward-grid { gap: 10px; margin: 10px 0; }
  .reward-screen .reward-card,
  .rank-reward-screen .reward-card { min-height: 0; gap: 6px; padding: 8px; }
  .reward-screen .reward-card .card-art,
  .rank-reward-screen .reward-card .card-art { height: 86px; }
  .reward-screen .reward-card p,
  .rank-reward-screen .reward-card p { font-size: 10px; line-height: 1.3; }
  .reward-screen .reward-grade-preview,
  .rank-reward-screen .reward-grade-preview { gap: 5px; padding: 7px; }
  .reward-screen .reward-effect-grade,
  .rank-reward-screen .reward-effect-grade { gap: 3px; }
  .reward-screen .reward-effect-grade + .reward-effect-grade,
  .rank-reward-screen .reward-effect-grade + .reward-effect-grade { padding-top: 5px; }
  .reward-screen .reward-grade-levels,
  .rank-reward-screen .reward-grade-levels { gap: 3px; }
  .reward-screen .reward-grade-levels > span,
  .rank-reward-screen .reward-grade-levels > span { padding: 3px 4px; }
  .reward-screen .reward-select-label,
  .rank-reward-screen .reward-select-label { padding: 6px 8px; font-size: 9px; }

  .settings-screen .back-button { min-height: 38px; padding: 6px 8px; font-size: 9px; }
  .settings-screen .settings-card { max-width: none; padding: 8px 12px; }
  .settings-screen .setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 106px;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
  }
  .settings-screen .setting-row > div { min-width: 0; }
  .settings-screen .setting-row h3 { margin: 0; font-size: 13px; line-height: 1.25; }
  .settings-screen .setting-row p { margin-top: 2px; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
  .settings-screen .setting-row button { width: 106px; min-height: 38px; padding: 6px; font-size: 9px; }

  /* Ranking cards become two-column records so names, difficulty and stats never collide. */
  .ranking-screen { padding: 12px 10px calc(18px + env(safe-area-inset-bottom)); }
  .ranking-header { align-items: flex-start; gap: 9px; margin-bottom: 12px; }
  .ranking-header h1 { margin-bottom: 3px; font-size: 22px; }
  .ranking-header p:last-child { font-size: 9px; line-height: 1.4; }
  .ranking-header .back-button { flex: 0 0 auto; min-height: 38px; padding: 7px 9px; font-size: 9px; }
  .ranking-columns { display: none; }
  .ranking-list { max-height: none; gap: 8px; overflow: visible; padding: 0; }
  .ranking-row {
    grid-template-columns: 34px minmax(0, 1fr) 82px;
    grid-template-rows: auto auto;
    gap: 7px;
    min-height: 0;
    padding: 9px;
  }
  .ranking-position { grid-row: 1 / span 2; width: 30px; height: 30px; font-size: 15px; }
  .ranking-idol { gap: 7px; }
  .ranking-avatar { flex-basis: 40px; width: 40px; height: 50px; border-radius: 9px; }
  .ranking-idol strong { font-size: 12px; }
  .ranking-idol small { margin-top: 2px; font-size: 7px; }
  .ranking-idol .difficulty-badge { margin-top: 3px; padding: 2px 5px; font-size: 6px; }
  .ranking-final-rank { padding: 6px; }
  .ranking-final-rank small { font-size: 7px; }
  .ranking-final-rank strong { font-size: 20px; }
  .ranking-evaluation { grid-column: 2; padding: 6px 8px; }
  .ranking-evaluation strong { font-size: 14px; }
  .ranking-stats { grid-column: 3; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .ranking-stat { grid-template-columns: 1fr; padding: 4px; }
  .ranking-stat > .ranking-affinity-icon { display: none; }
  .ranking-stat small { font-size: 6px; }
  .ranking-stat strong { font-size: 11px; }

  /* Activity content follows the image directly; overflow remains local when needed. */
  .task-select-screen .task-layout { grid-template-rows: minmax(0, 1fr) 100px; }
  .task-select-screen .task-main {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .task-select-screen .task-option-area { margin-top: 0; padding-top: 5px; }
  .task-command-header > div:nth-child(2),
  .task-select-screen .lesson-option > span:first-child { min-width: 0; }
  .task-command-header h2,
  .task-select-screen .lesson-option strong,
  .task-select-screen .choice-button strong,
  .task-select-screen .gain { overflow-wrap: anywhere; line-height: 1.25; }
  .task-select-screen .gain { max-width: 46%; white-space: normal; }

  /* Rest upgrades expose the effect picker and use a denser one-screen arrangement. */
  .task-main-upgrade .task-feature-visual { height: 92px; }
  .task-main-upgrade .task-main-content > p { max-height: none; }
  .task-main-upgrade .task-option-area .effect-upgrade-panel { display: block; margin: 0; padding: 6px; }
  .task-main-upgrade .task-option-area .effect-upgrade-panel h4 { margin-bottom: 4px; font-size: 10px; }
  .task-main-upgrade .task-option-area .effect-upgrade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .task-main-upgrade .task-option-area .effect-upgrade-choice { min-height: 47px; padding: 5px 6px; }
  .task-main-upgrade .effect-upgrade-choice b,
  .task-main-upgrade .effect-upgrade-choice strong { font-size: 8px; }
  .task-main-upgrade .effect-upgrade-choice small,
  .task-main-upgrade .effect-upgrade-choice em { font-size: 7px; }

  /* The full six-step route is represented by a compact, non-clipping icon rail. */
  .task-select-screen .progress-panel {
    grid-template-columns: 69px minmax(0, 1fr) 69px;
    height: 100px;
    padding: 6px;
    overflow: hidden;
  }
  .task-select-screen .route-progress {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
  }
  .task-select-screen .route-progress::before { display: none; }
  .task-select-screen .route-progress .progress-step {
    display: grid;
    place-items: center;
    width: auto;
    min-width: 0;
    flex: none;
  }
  .task-select-screen .route-progress .progress-step i {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-basis: 20px;
    overflow: hidden;
  }
  .task-select-screen .route-progress .progress-step > span { display: none !important; }

  /* Approved battle layout: compact summary, isolated HUD strips, and a clear depth line. */
  .duel-screen { grid-template-rows: 36px minmax(0, 1fr) 28px 206px; }
  .duel-header {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px;
    min-height: 36px;
    padding: 4px 6px;
    overflow: hidden;
  }
  .duel-header > div { display: contents; }
  .duel-header h2 {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    overflow: hidden;
    font-size: 9px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .duel-header .duel-category {
    grid-column: 2;
    grid-row: 1;
    gap: 2px;
    min-width: 0;
    padding: 2px 4px;
    border-left-width: 2px;
    font-size: 7px;
    white-space: nowrap;
  }
  .duel-header .duel-category-icon { width: 15px; height: 15px; }
  .duel-header .duel-required-stat {
    grid-column: 3;
    grid-row: 1;
    gap: 2px;
    min-width: 0;
    min-height: 23px;
    padding: 2px 4px;
    border-left-width: 2px;
    border-radius: 7px;
    box-shadow: none;
  }
  .duel-header .duel-required-stat > i { flex-basis: 15px; width: 15px; height: 15px; border: 0; }
  .duel-header .duel-requirement-icon { width: 15px; height: 15px; }
  .duel-header .duel-required-stat small { display: none; }
  .duel-header .duel-required-stat strong { margin: 0; overflow: hidden; font-size: 7px; text-overflow: ellipsis; }
  .duel-header .duel-required-stat strong b { font-size: 9px; }
  .duel-header .duel-required-stat strong em { margin-left: 2px; padding: 1px 3px; font-size: 6px; }
  .duel-header .duel-turn {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 6px;
    line-height: 1;
    white-space: nowrap;
  }
  .duel-header .duel-turn strong { margin-left: 2px; font-size: 11px; }

  .duel-screen .duel-arena {
    --enemy-hud-height: 72px;
    --player-hud-height: 96px;
    min-height: 0;
  }
  .duel-screen .duel-hud {
    max-width: none;
    height: auto;
    background: linear-gradient(120deg, rgba(255,253,246,.995), rgba(250,233,235,.99));
    backdrop-filter: none;
  }
  .duel-screen .enemy-hud {
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(105px, .95fr) minmax(0, 1.25fr) minmax(66px, .72fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 2px 5px;
    width: 100%;
    min-height: var(--enemy-hud-height);
    padding: 6px 8px;
    border: 0;
    border-bottom: 3px solid #de668b;
    border-radius: 0;
    box-shadow: 0 3px 9px rgba(42,18,55,.22), inset 0 1px 0 #fff;
    transform: none;
  }
  .duel-screen .enemy-hud .enemy-duel-name { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .duel-screen .enemy-hud .duel-name > span { font-size: 6px; }
  .duel-screen .enemy-hud .enemy-name-line { gap: 3px; margin: 1px 0 0; }
  .duel-screen .enemy-hud .enemy-name-line h3 { margin: 0; font-size: 10px; white-space: nowrap; }
  .duel-screen .enemy-hud .enemy-defense-badge { min-height: 19px; padding: 2px 3px; }
  .duel-screen .enemy-hud .enemy-defense-badge i { flex-basis: 8px; width: 8px; height: 10px; }
  .duel-screen .enemy-hud .enemy-defense-badge strong { font-size: 6px; }
  .duel-screen .enemy-hud .enemy-defense-badge b { font-size: 8px; }
  .duel-screen .enemy-hud .duel-health { grid-column: 2; grid-row: 1; align-self: center; gap: 3px; }
  .duel-screen .enemy-hud .duel-health > span { font-size: 6px; }
  .duel-screen .enemy-hud .duel-health > strong { min-width: 42px; font-size: 10px; }
  .duel-screen .enemy-hud .duel-health > strong small { font-size: 6px; }
  .duel-screen .enemy-hud .duel-hp-track { height: 7px; }
  .duel-screen .enemy-hud .enemy-status-badges { grid-column: 2; grid-row: 2; margin: 0; }
  .duel-screen .enemy-hud .enemy-status-badges span { padding: 1px 3px; font-size: 6px; }
  .duel-screen .enemy-hud .duel-intent {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: stretch;
    justify-content: center;
    min-height: 0;
    margin: 0;
    padding: 3px;
    text-align: center;
  }
  .duel-screen .enemy-hud .duel-intent strong { font-size: 9px; white-space: normal; }
  .duel-screen .enemy-hud .duel-scaling { display: none; }

  .duel-screen .player-hud {
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 2px 4px;
    width: 100%;
    min-height: var(--player-hud-height);
    padding: 5px 8px 6px;
    border: 0;
    border-top: 3px solid #6398dc;
    border-radius: 0;
    box-shadow: 0 -3px 9px rgba(42,18,55,.2), inset 0 1px 0 #fff;
    transform: none;
  }
  .duel-screen .player-hud .duel-name {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 1;
    gap: 0 4px;
    padding-right: 0;
  }
  .duel-screen .player-hud .duel-name > span { grid-column: 1 / -1; }
  .duel-screen .player-hud .duel-name > span { margin: 0; font-size: 6px; }
  .duel-screen .player-hud .duel-name h3 { grid-column: 1; min-width: 0; margin: 0; font-size: 10px; overflow-wrap: anywhere; }
  .duel-screen .player-hud .duel-energy { position: static; grid-column: 2; grid-row: 2; }
  .duel-screen .player-hud .duel-energy { padding: 3px 5px; font-size: 10px; }
  .duel-screen .player-hud .duel-health { grid-column: 1 / -1; grid-row: 2; gap: 3px; }
  .duel-screen .player-hud .duel-health > span { font-size: 6px; }
  .duel-screen .player-hud .duel-health > strong { min-width: 45px; font-size: 10px; }
  .duel-screen .player-hud .duel-health > strong small { font-size: 6px; }
  .duel-screen .player-hud .duel-hp-track { height: 7px; }
  .duel-screen .player-hud .duel-badges {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    margin: 0;
  }
  .duel-screen .player-hud .duel-badges span { min-width: 0; padding: 2px 3px; font-size: 8.25px; white-space: nowrap; }
  .duel-screen .player-hud .duel-player-action { grid-column: 2; grid-row: 3; align-self: end; margin: 0; }
  .duel-screen .player-hud .duel-end-turn { min-height: 25px; padding: 3px 6px; font-size: 7px; }

  .duel-screen .enemy-actor {
    top: calc(var(--enemy-hud-height) + 14px);
    right: 5%;
    bottom: auto;
    width: 31%;
    height: min(150px, calc(100% - 190px));
    opacity: .94;
    transform: none;
    filter: saturate(.92) brightness(1.03);
  }
  .duel-screen .player-actor {
    top: auto;
    right: auto;
    bottom: calc(var(--player-hud-height) + 2px);
    left: -3%;
    width: 59%;
    height: min(310px, calc(100% - 164px));
    transform: none;
  }
  .duel-screen .duel-player-art { overflow: visible; }
  .duel-screen .duel-player-art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  .duel-screen .enemy-floor { top: calc(var(--enemy-hud-height) + 145px); right: 3%; width: 29%; height: 32px; }
  .duel-screen .player-floor { bottom: calc(var(--player-hud-height) - 1px); left: 0; width: 48%; height: 48px; }

  .duel-screen .enemy-name-line h3,
  .duel-screen .duel-intent > div { min-width: 0; }
  .duel-screen .duel-intent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .duel-log { min-height: 28px; padding: 4px 7px; font-size: 7px; }
  .duel-hand { height: 206px; padding: 5px 5px 0; }
  .duel-hand > header { min-height: 22px; }
  .duel-hand header span { display: none; }
  .duel-hand h3 { margin: 0; font-size: 9px; }
  .duel-hand header p { font-size: 6px; }
  .duel-screen .card-hand {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 179px;
    margin: 1px 0 0;
    padding: 3px 0 5px;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .duel-screen .game-card {
    display: grid;
    grid-template-rows: 48px auto minmax(0, 1fr) auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 171px;
    height: 171px;
    padding: 3px;
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 2px 0 #b68a9c;
  }
  .duel-screen .game-card .card-cost { top: 3px; right: 3px; width: 17px; height: 17px; font-size: 8px; }
  .duel-screen .game-card .card-art { width: 100%; height: 48px; margin: 0; border-radius: 5px; }
  .duel-screen .game-card strong {
    max-height: none;
    margin-top: 3px;
    overflow: visible;
    font-size: clamp(7px, 2.1vw, 9px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .duel-screen .game-card small {
    display: block;
    max-height: none;
    margin-top: 3px;
    overflow: visible;
    font-size: clamp(7px, 2.1vw, 9px);
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }
  .duel-screen .card-grade { align-self: end; padding-top: 2px; font-size: 6px; }

  .mobile-scroll-top {
    position: fixed;
    z-index: 1100;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(14px, calc(10px + env(safe-area-inset-bottom)));
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 4px;
    color: #fff;
    background: linear-gradient(145deg, #d95f87, #7958aa);
    border: 2px solid rgba(255,255,255,.82);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(42,18,55,.32);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .16s, transform .16s;
  }
  .mobile-scroll-top span { font-size: 18px; line-height: .8; }
  .mobile-scroll-top small { font-size: 8px; font-weight: 900; }
  .mobile-scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
}

/* A hand card keeps the size of one of five cards; extra cards scroll sideways. */
.duel-screen .card-hand {
  --hand-gap: 11px;
  gap: var(--hand-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.duel-screen .game-card {
  flex: 0 0 min(210px, calc((100% - 4 * var(--hand-gap)) / 5));
  min-width: 0;
  max-width: none;
}
.shop-special-grid { grid-template-columns: repeat(2, minmax(0, 340px)); }
.max-hp-product .luck-product-icon { color: #ae416d; background: linear-gradient(145deg, #ffe4ef, #f6a4bc); }

/* The master editor must scroll independently of wide data tables. */
body:has(#master-app),
.master-shell,
.master-screen { overflow-y: auto; }
.master-table-wrap { max-height: min(72vh, 760px); overflow: auto; overscroll-behavior: contain; }

@media (max-width: 759px) {
  .duel-screen .card-hand {
    --hand-gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .duel-screen .game-card {
    flex: 0 0 calc((100% - 4 * var(--hand-gap)) / 5);
    width: calc((100% - 4 * var(--hand-gap)) / 5);
    min-width: 0;
    max-width: none;
    scroll-snap-align: start;
  }
  .shop-deck-catalog {
    display: block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .shop-deck-catalog > .shop-market-rule { display: block; margin: 4px 0; }
  .shop-deck-catalog > .shop-shelf-section { margin-top: 6px; }
  .shop-deck-catalog > .shop-shelf-section:not(.shop-special-shelf) {
    height: min(530px, calc(100svh - 205px));
    min-height: 400px;
  }
  .shop-special-shelf {
    display: block;
    min-height: 0;
    max-height: none;
    padding: 6px;
    overflow: visible;
  }
  .shop-special-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; height: auto; overflow: visible; }
  .shop-special-shelf .luck-product { grid-template-columns: 38px minmax(0, 1fr); min-height: 59px; height: auto; }
  .shop-special-shelf .shelf-product-copy { overflow: visible; }
  .shop-special-shelf .shelf-product h3 { font-size: 10px; }
  .shop-special-shelf .shelf-product p { max-height: none; font-size: 7px; }
  .shop-special-shelf .shop-action-button { min-height: 32px; padding: 4px 6px; font-size: 9px; }

  body:has(#master-app) { overflow-x: hidden; overflow-y: auto; }
  .master-shell { height: auto; min-height: 100svh; overflow: visible; }
  .master-screen { height: auto; min-height: calc(100svh - 52px); overflow: visible; }
  .master-screen h1 { font-size: 27px; }
  .master-edit-bar { position: sticky; z-index: 30; top: 0; flex-wrap: wrap; gap: 10px; padding: 12px; box-shadow: 0 8px 20px rgba(67, 29, 76, .12); }
  .master-edit-actions { width: 100%; flex-wrap: wrap; }
  .master-edit-actions button { flex: 1 1 130px; }
  .master-panel { overflow: visible; }
  .master-table-wrap { max-height: 65svh; overflow: auto; overscroll-behavior: auto; touch-action: pan-x pan-y; }
  .master-text-fields, .master-effect-cards, .master-builder-grid, .master-balance-grid { grid-template-columns: minmax(0, 1fr); }
  .master-story-line { grid-template-columns: minmax(0, 1fr); }
}

/* Show the style explanation within the full LIVE PROFILE panel. */
.creator-style-popup {
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 17px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fffaf9;
  border-radius: 17px;
  scrollbar-width: thin;
}
.creator-style-popup::after { display: none; }
.creator-style-popup header div { min-width: 0; }
.creator-style-popup header strong { display: block; overflow-wrap: anywhere; }
.creator-style-popup p { margin: 0; overflow-wrap: anywhere; }
.creator-style-popup em { align-self: flex-start; margin: 0; }
.creator-style-popup button { flex: 0 0 auto; margin-top: auto; }

/* A persistent, usable scrollbar appears only when the hand has six or more cards. */
.duel-hand.has-extra-cards .card-hand { scrollbar-width: none; }
.duel-hand.has-extra-cards .card-hand::-webkit-scrollbar { display: none; }
.hand-scrollbar {
  display: block;
  width: calc(100% - 14px);
  height: 13px;
  margin: 1px 7px 2px;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.hand-scrollbar::-webkit-slider-runnable-track { height: 9px; background: #e1cbd5; border: 1px solid #bf9cab; border-radius: 99px; }
.hand-scrollbar::-webkit-slider-thumb { width: 36px; height: 15px; margin-top: -4px; appearance: none; background: #b54c79; border: 2px solid #fff7fa; border-radius: 99px; box-shadow: 0 1px 4px rgba(76,29,55,.4); }
.hand-scrollbar::-moz-range-track { height: 9px; background: #e1cbd5; border: 1px solid #bf9cab; border-radius: 99px; }
.hand-scrollbar::-moz-range-thumb { width: 32px; height: 11px; background: #b54c79; border: 2px solid #fff7fa; border-radius: 99px; box-shadow: 0 1px 4px rgba(76,29,55,.4); }
.hand-scrollbar:focus-visible { outline: 2px solid #ffc943; outline-offset: 2px; }

@media (max-width: 759px) and (orientation: portrait) {
  .creator-layout-refined { grid-template-columns: minmax(0, 1fr) clamp(116px, 34vw, 138px); }
  .creator-style-popup { gap: 7px; padding: 8px 6px; }
  .creator-style-popup header { gap: 5px; }
  .creator-style-popup header > span { flex-basis: 22px; width: 22px; height: 22px; font-size: 12px; }
  .creator-style-popup header small { font-size: 6px; letter-spacing: .04em; }
  .creator-style-popup header strong { font-size: 10px; line-height: 1.3; }
  .creator-style-popup p { font-size: 9px; line-height: 1.5; }
  .creator-style-popup em { font-size: 7px; line-height: 1.3; }
  .creator-style-popup button { min-height: 34px; padding: 5px; font-size: 8px; line-height: 1.3; }
  .duel-hand.has-extra-cards { display: flex; flex-direction: column; }
  .duel-hand.has-extra-cards > header { flex: 0 0 auto; }
  .duel-hand.has-extra-cards .card-hand { flex: 1 1 auto; min-height: 0; height: auto; padding-bottom: 1px; }
  .duel-hand.has-extra-cards .game-card { height: 100%; min-height: 0; }
  .duel-hand.has-extra-cards .hand-scrollbar { flex: 0 0 13px; }
}