/* ケンタウロスクロニクル — PC layout on a fixed 1600x900 stage scaled to the window. */
:root {
  --ink: #3a2a20;
  --ink-soft: #6b5442;
  --cream: #fffaf0;
  --paper: rgba(255, 250, 240, 0.94);
  --gold: #c9a45c;
  --gold-soft: #e8d3a0;
  --rose: #e0607a;
  --rose-dark: #b8405e;
  --navy: #2c3a6b;
  --serif: "Noto Serif CJK JP", "Noto Serif JP", "Yu Mincho", serif;
  --sans: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #120e10; overflow: hidden; }
body { font-family: var(--sans); color: var(--ink); user-select: none; }
#viewport { position: fixed; inset: 0; }
#stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; overflow: hidden; transform-origin: center; background: #222; }
#screen { position: absolute; inset: 0; }
.hidden { display: none !important; }
.mode-picker { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; font-weight: 700; flex-shrink: 0; }
.mode-picker select { width: 100%; padding: 8px; font: inherit; background: var(--cream); border: 1px solid var(--gold); border-radius: 8px; }
.collection-sidebar, .online-sidebar { left: 24px; top: 24px; bottom: 24px; width: 400px; display: flex; flex-direction: column; overflow: auto; }
.collection-list { flex: 1; min-height: 200px; overflow: auto; padding: 4px; }
.collection-list .btn { width: 100%; margin-bottom: 12px; text-align: left; }
.collection-entry { display: flex; gap: 12px; align-items: center; }
.collection-entry img, .online-icon { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.collection-entry small { display: block; font-size: 12px; padding-top: 4px; }
.collection-list .on { border-color: var(--rose); }
.collection-detail, .online-content { left: 448px; top: 24px; right: 24px; bottom: 24px; overflow: auto; }
.collection-portrait { position: absolute; left: 0; top: 80px; width: 450px; height: 720px; }
.collection-portrait .portrait { left: 0; bottom: 0; height: 690px; }
.collection-info { position: relative; margin-left: 440px; padding-right: 12px; }
.memory-list p { padding: 10px 0; border-bottom: 1px solid var(--gold-soft); line-height: 1.7; }
.online-message { color: var(--rose-dark); font-weight: 700; line-height: 1.7; overflow-wrap: anywhere; }
.online-nav { display: grid; gap: 12px; margin: 10px 0; }
.online-race-card { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--gold-soft); }
.online-race-card h3, .online-race-card p { margin: 5px 0; }
.online-race-card small { color: var(--rose-dark); font-weight: 700; }
.online-race-card .btn { flex-shrink: 0; }
.online-form { display: grid; gap: 12px; max-width: 850px; }
.online-field { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: center; }
.online-content input, .online-content select, .online-content textarea { font: inherit; padding: 10px; border: 1px solid var(--gold); background: #fff; border-radius: 6px; max-width: 100%; }
.online-content .recovery-code { display: block; width: 100%; height: 90px; font-family: monospace; user-select: text; }
.online-table { width: 100%; margin: 16px 0; border-collapse: collapse; text-align: left; }
.online-table td, .online-table th { padding: 10px; border-bottom: 1px solid var(--gold-soft); }
.online-replay-screen { position: absolute; inset: 0; z-index: 20; background: #7cb36a; }
.online-replay-screen .race-top { grid-template-columns: auto minmax(180px, 360px) auto minmax(120px, 1fr) auto; }
.online-replay-screen .race-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-replay-controls { position: absolute; left: 260px; right: 20px; bottom: 20px; padding: 14px 20px; z-index: 6; }
.online-replay-controls p { margin: 4px 0 8px; }
.online-replay-controls .row { margin-top: 10px; flex-wrap: wrap; }
.online-replay-controls select { font: inherit; padding: 6px; max-width: 480px; }
.replay-status { font-weight: 700; color: var(--rose-dark); }
.sponsor-video { display: block; border: 0; margin-bottom: 20px; }
body.compact .collection-sidebar, body.compact .online-sidebar { width: 420px; font-size: 24px; }
body.compact .collection-detail, body.compact .online-content { left: 464px; font-size: 24px; }
body.compact .collection-info { margin-left: 300px; }
body.compact .collection-portrait { width: 290px; }
body.compact .collection-portrait .portrait { height: 520px; }
body.compact .online-race-card { flex-wrap: wrap; }
body.compact .online-replay-controls { left: 360px; font-size: 24px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hint { color: var(--ink-soft); font-size: 14px; }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bg-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 30, 0.25), rgba(20, 14, 30, 0.55)); }

/* ---------- panels & buttons ---------- */
.panel {
  position: absolute; background: var(--paper); border: 2px solid var(--gold-soft); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(30, 20, 10, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.6); padding: 16px 18px;
}
.panel-title {
  display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 19px;
  color: #fff; background: linear-gradient(90deg, #4a3226, #6b4a36 70%, rgba(107, 74, 54, 0)); margin: 6px -18px 10px; padding: 6px 18px;
}
.panel-title .ribbon { width: 4px; height: 20px; background: var(--gold); border-radius: 2px; }
.btn {
  font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #fffdf6, #f1e2c2); border: 2px solid var(--gold); border-radius: 10px; padding: 8px 18px;
  box-shadow: 0 3px 0 #b8935a, 0 6px 14px rgba(0, 0, 0, 0.18); transition: transform 0.08s, filter 0.15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #b8935a; }
.btn:disabled { cursor: default; }
/* Solid muted fill: translucent disabled buttons vanished over bright backgrounds. */
#stage .btn:disabled { opacity: 1; filter: none; color: #857a6e; background: #e6e0d6; border-color: #cdc3b4; box-shadow: none; text-shadow: none; }
.btn.primary { color: #fff; background: linear-gradient(180deg, #435779, #23364f); border-color: var(--gold); box-shadow: 0 4px 0 #18263a, 0 7px 18px #23364f44; text-shadow: 0 1px 2px #0005; }
.btn.big { font-size: 20px; padding: 12px 28px; }
.btn.small { font-size: 14px; padding: 5px 12px; }
.btn.icon-btn { padding: 2px 10px; font-size: 20px; }
.btn.on { background: linear-gradient(180deg, #fff0c8, #f3cf78); border-color: #d9a640; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tab { font: 700 14px var(--sans); color: var(--ink-soft); background: #f3ead8; border: 1px solid var(--gold-soft); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.tab.on { background: linear-gradient(180deg, #ffe7b0, #f2c86e); color: var(--ink); }

/* ---------- common widgets ---------- */
.bar { position: relative; height: 14px; background: #e6dccb; border-radius: 7px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); flex: 1; }
.bar-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #8fd0ff, #3b8fe0); transition: width 0.5s; }
.bar.energy .bar-fill { background: linear-gradient(90deg, #f36f6f, #ffc65a 40%, #7ad67a); }
.bar.trust .bar-fill { background: linear-gradient(90deg, #ffb3c6, #ff5f8a); }
.bar.hp .bar-fill { background: linear-gradient(90deg, #6fd3a8, #2fa77a); transition: width 0.1s; }
.bar.hp.low .bar-fill { background: linear-gradient(90deg, #ff8a5a, #e0403a); }
.bar.stat-spd .bar-fill { background: linear-gradient(90deg, #8fd0ff, #2f7fe0); }
.bar.stat-sta .bar-fill { background: linear-gradient(90deg, #9ff0b0, #2fae5a); }
.bar.stat-pow .bar-fill { background: linear-gradient(90deg, #ffc58a, #e0702f); }
.bar.stat-guts .bar-fill { background: linear-gradient(90deg, #ffa0b0, #e0405a); }
.bar.stat-focus .bar-fill { background: linear-gradient(90deg, #d8b0ff, #8a4fe0); }
.stat-rows { display: flex; flex-direction: column; gap: 6px; }
.stat-row { display: grid; grid-template-columns: 74px 38px 1fr 46px; align-items: center; gap: 8px; font-size: 15px; }
.stat-name { font-weight: 700; }
.stat-rank { font: 900 17px var(--serif); text-align: center; color: #fff; border-radius: 6px; background: #9a8a7a; padding: 0 2px; }
.rank-SS, .rank-S { background: linear-gradient(135deg, #ffd34a, #f08a2a); }
.rank-Ap, .rank-A { background: linear-gradient(135deg, #ff7aa0, #d0406a); }
.rank-Bp, .rank-B { background: linear-gradient(135deg, #ff9a5a, #e06a2a); }
.rank-Cp, .rank-C { background: linear-gradient(135deg, #7ad07a, #3a9a4a); }
.rank-Dp, .rank-D { background: linear-gradient(135deg, #6ab0f0, #3a70c0); }
.stat-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.apt { display: inline-block; min-width: 26px; text-align: center; font: 900 17px var(--serif); border-radius: 5px; color: #fff; background: #888; }
.apt-S { background: linear-gradient(135deg, #ffd34a, #f0802a); }
.apt-A { background: linear-gradient(135deg, #ff7aa0, #d0406a); }
.apt-B { background: linear-gradient(135deg, #ff9a5a, #e06a2a); }
.apt-C { background: #6aa85a; }
.apt-D { background: #5a8ac0; }
.apt-E, .apt-F, .apt-G { background: #8a8a9a; }
.apt-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.apt-table th { font-size: 12px; color: var(--ink-soft); text-align: right; padding: 3px 4px; font-weight: 700; white-space: nowrap; }
.apt-table td { padding: 3px 4px; }
.grade { display: inline-block; font: 900 13px var(--sans); color: #fff; padding: 1px 8px; border-radius: 4px; background: #6a7a8a; margin-right: 4px; }
.grade-G1 { background: linear-gradient(135deg, #3a5ad8, #1a2a8a); }
.grade-G2 { background: linear-gradient(135deg, #d83a5a, #8a1a2a); }
.grade-G3 { background: linear-gradient(135deg, #2aa86a, #1a6a3a); }
.grade-EX { background: linear-gradient(135deg, #f0c040, #c06a10); }
.grade-Debut { background: #8a7a6a; }
.mood { display: inline-block; color: #fff; font-weight: 900; padding: 1px 12px; border-radius: 12px; font-size: 14px; }
.speech {
  position: absolute; background: #fff; border: 3px solid #f6c8d4; border-radius: 22px; padding: 14px 20px; font-size: 18px; line-height: 1.6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); max-width: 420px; color: var(--ink);
}
.toast { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); background: rgba(40, 30, 60, 0.9); color: #fff; padding: 10px 26px; border-radius: 24px; font-weight: 700; z-index: 50; animation: toast 2.6s forwards; }
.toast.good { background: linear-gradient(90deg, #e0607a, #f0a040); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.popup { position: absolute; transform: translateX(-50%); font: 900 26px var(--sans); color: #2f7fe0; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 2px 0 #fff; white-space: nowrap; animation: popup 2.1s ease-out both; }
.popup.up { color: #2a8a4a; }
.popup.down { color: #8a8aa0; }
.popup.trust { color: #ff4f80; }
.popup.great { color: #ff7a1a; font-size: 44px; }
.popup.big { font-size: 40px; }
.popup.sparkle { font-size: 30px; animation-duration: 0.9s; }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
.modal-wrap { position: absolute; inset: 0; background: rgba(10, 8, 20, 0.55); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal { background: var(--cream); border: 2px solid var(--gold); border-radius: 14px; padding: 24px 32px; min-width: 460px; max-width: 1300px; max-height: 800px; overflow: hidden; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.modal-content { min-height: 0; overflow: auto; }
.modal-close { flex-shrink: 0; align-self: flex-end; min-width: 130px; }
.modal h2 { font-family: var(--serif); margin: 0 0 14px; }
.setting { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; margin: 12px 0; font-weight: 700; }
.confirm p { font-size: 18px; }

/* ---------- portraits & gestures (ears/tail emphasis) ---------- */
.portrait { position: absolute; transform-origin: 50% 100%; }
.portrait-img { display: block; height: 100%; width: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); pointer-events: none; transform-origin: 50% 100%; }
.portrait.idle .portrait-img { animation: breathe 3.6s ease-in-out infinite; }
.portrait.dim .portrait-img { filter: brightness(0.75) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.portrait-fx { position: absolute; inset: 0; pointer-events: none; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.004, 1.012) translateY(-2px); } }
.portrait.g-wag .portrait-img { animation: wag 0.32s ease-in-out 4; }
.portrait.g-flick .portrait-img { animation: flick 0.35s ease-out 1; }
.portrait.g-perk .portrait-img { animation: perk 0.5s cubic-bezier(.3, 1.6, .5, 1) 1; }
.portrait.g-droop .portrait-img { animation: droop 1.4s ease-in-out 1 forwards; }
.portrait.g-blush .portrait-img { animation: blush 1.5s ease-in-out 1; }
.portrait.g-fidget .portrait-img { animation: fidget 0.18s linear 6; }
@keyframes wag { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(1.4deg) translateX(3px); } 75% { transform: rotate(-1.4deg) translateX(-3px); } }
@keyframes flick { 0% { transform: scaleY(1); } 30% { transform: scaleY(0.985) translateY(4px); } 60% { transform: scaleY(1.01) translateY(-3px); } 100% { transform: none; } }
@keyframes perk { 0% { transform: translateY(0); } 40% { transform: translateY(-22px) scale(1.01); } 100% { transform: translateY(0); } }
@keyframes droop { 0% { transform: none; filter: none; } 40%, 80% { transform: translateY(10px) scale(0.99); filter: saturate(0.7) brightness(0.92); } 100% { transform: none; } }
@keyframes blush { 0%, 100% { transform: none; } 30% { transform: rotate(-1deg) translateY(2px); } 60% { transform: rotate(1deg); } }
@keyframes fidget { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.onomato {
  position: absolute; transform: translate(-50%, 0) rotate(-8deg); font: 900 38px var(--sans); color: #fff; white-space: nowrap;
  -webkit-text-stroke: 2px #ff6f91; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(255, 111, 145, 0.5); animation: onomato 1.2s ease-out both;
}
.on-droop { -webkit-text-stroke-color: #6a7ab0; text-shadow: 0 4px 0 rgba(90, 100, 160, 0.5); }
.on-flick, .on-perk { -webkit-text-stroke-color: #f0a030; text-shadow: 0 4px 0 rgba(240, 160, 50, 0.5); }
.on-blush { color: #ff6f91; -webkit-text-stroke-color: #fff; font-size: 46px; }
.on-fidget { -webkit-text-stroke-color: #8a6ad0; }
@keyframes onomato { 0% { opacity: 0; transform: translate(-50%, 10px) rotate(-8deg) scale(0.5); } 20% { opacity: 1; transform: translate(-50%, 0) rotate(-8deg) scale(1.15); } 35% { transform: translate(-50%, 0) rotate(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -18px) rotate(-8deg); } }
.float-heart { position: absolute; color: #ff5f8a; font-size: 30px; animation: heart 1.4s ease-out both; text-shadow: 0 0 6px #fff; }
@keyframes heart { 0% { opacity: 0; transform: translateY(10px) scale(0.4); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: translateY(-60px) scale(0.9); } }

/* ---------- dialogue ---------- */
.dialogue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 1380px; min-height: 170px; z-index: 30;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.97), rgba(250, 240, 222, 0.97)); border: 2px solid var(--gold); border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); padding: 34px 40px 24px; cursor: pointer;
}
.dlg-name { position: absolute; top: -20px; left: 36px; background: linear-gradient(90deg, var(--rose-dark), var(--rose)); color: #fff; font: 700 20px var(--serif); padding: 5px 26px; border-radius: 20px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
.dlg-text { font-size: 22px; line-height: 1.75; white-space: pre-wrap; min-height: 76px; }
.dialogue.narration .dlg-text { color: #4a4060; font-style: italic; }
.dlg-next { position: absolute; right: 30px; bottom: 14px; color: var(--rose); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.dlg-choices { display: flex; flex-direction: column; gap: 10px; position: absolute; right: 40px; bottom: 190px; }
.btn.choice { font-size: 20px; min-width: 420px; text-align: left; padding: 12px 26px; background: linear-gradient(180deg, #fff, #ffe9ef); border-color: #f2a0b6; box-shadow: 0 3px 0 #d47a94, 0 8px 18px rgba(0, 0, 0, 0.2); }

/* ---------- top bar ---------- */
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 40; display: flex; align-items: center; gap: 22px; padding: 0 22px; background: linear-gradient(180deg, rgba(40, 26, 30, 0.88), rgba(40, 26, 30, 0.7)); color: #fff; border-bottom: 2px solid rgba(201, 164, 92, 0.7); }
.tb-date { display: flex; flex-direction: column; line-height: 1.15; }
.tb-year { font: 700 18px var(--serif); }
.tb-remain { font-size: 12px; color: #f0d8a8; }
.tb-goal { flex: 1; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.tb-goal-label { background: var(--rose); padding: 2px 10px; border-radius: 4px; font-weight: 900; font-size: 13px; }
.tb-goal-left { margin-left: 8px; color: #ffd98a; font-weight: 700; }
.tb-gold { font-weight: 700; color: #ffe39a; }

/* ---------- title ---------- */
.screen-title .bg { animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1%, -1%); } }
.title-cast { position: absolute; left: 560px; right: -10px; bottom: -24px; height: 560px; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.title-cast img { margin: 0 -58px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); animation: castIn 1.1s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 0.12s); }
@keyframes castIn { from { opacity: 0; transform: translateY(60px); } }
.logo { position: absolute; left: 70px; top: 90px; text-align: center; animation: castIn 1.2s both; z-index: 3; }
.logo-main { font: 900 104px/1.02 var(--serif); color: #fff; letter-spacing: 4px; background: linear-gradient(180deg, #fff 30%, #ffe2a8 60%, #d8a24a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #6a3a5a) drop-shadow(0 10px 20px rgba(60, 20, 60, 0.6)); }
.logo-sub-main { font-size: 96px; }
.logo-sub { margin-top: 10px; font: 700 30px var(--serif); color: #fff; text-shadow: 0 2px 6px rgba(60, 20, 60, 0.9); }
.logo-en { margin-top: 4px; font: 600 16px var(--serif); color: #fbe3b0; letter-spacing: 6px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.title-catch { position: absolute; right: 60px; top: 50px; font: 700 26px/1.6 var(--serif); color: #fff; text-align: right; text-shadow: 0 2px 8px rgba(30, 20, 80, 0.9); }
.title-menu { position: absolute; left: 150px; top: 520px; display: flex; flex-direction: column; gap: 16px; width: 360px; z-index: 5; }
.title-menu .btn { width: 100%; }
.press-start { position: absolute; left: 0; right: 0; bottom: 90px; text-align: center; color: #fff; font: 700 28px var(--serif); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); animation: blink 1.6s infinite; cursor: pointer; z-index: 5; }
.credit { position: absolute; left: 16px; bottom: 10px; color: rgba(255, 255, 255, 0.75); font-size: 12px; text-shadow: 0 1px 3px #000; }
.petals i { position: absolute; top: -30px; width: 14px; height: 10px; background: #ffc8d8; border-radius: 10px 0; opacity: 0.85; animation: petal linear infinite; z-index: 2; }
@keyframes petal { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(-260px, 960px) rotate(720deg); } }

/* ---------- select ---------- */
.sel-wrap { position: absolute; inset: 0; }
.sel-left { left: 24px; top: 24px; width: 520px; bottom: 24px; }
.sel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 10px; max-height: 640px; overflow: auto; padding: 4px; }
.sel-card { position: relative; border: 2px solid var(--gold-soft); border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #fff, #f6ead2); cursor: pointer; transition: transform 0.1s; }
.sel-card:hover { transform: translateY(-2px); }
.sel-card.on { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(224, 96, 122, 0.4); }
.sel-card img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.sel-name { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: rgba(40, 26, 30, 0.75); padding: 2px; }
.gen-badge { position: absolute; top: 4px; left: 4px; background: var(--rose); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 8px; font-weight: 700; }
.ranch-mini { position: absolute; bottom: 16px; left: 18px; right: 18px; font-weight: 700; color: var(--ink-soft); }
.sel-stage { position: absolute; left: 520px; top: 0; width: 560px; bottom: 0; }
.sel-portrait { left: 50%; bottom: 0; height: 800px; transform: translateX(-50%); }
.sel-nameplate { position: absolute; left: 70px; bottom: 40px; background: rgba(40, 26, 30, 0.82); color: #fff; border-radius: 10px; padding: 8px 22px; border-left: 4px solid var(--gold); z-index: 3; }
.np-type { font-size: 13px; color: #f0d8a8; }
.np-name { font: 700 26px var(--serif); }
.sel-stage .speech { left: 300px; top: 120px; max-width: 280px; font-size: 16px; z-index: 3; }
.sel-right { right: 24px; top: 24px; width: 500px; bottom: 24px; overflow: hidden; display: flex; flex-direction: column; }
.sel-info { flex: 1; overflow: auto; }
.sel-info > .panel-title { margin-left: 0; margin-right: 0; }
.sel-secondary { display: contents; }
.sel-more { display: none; }
.sel-menu > div { display: grid; gap: 14px; }
.growth-row { display: grid; grid-template-columns: 80px 110px 1fr; font-size: 15px; align-items: center; }
.stars { color: #f0a020; letter-spacing: 1px; }
.stars .off { color: #ddd0b8; }
.growth .base { color: var(--ink-soft); font-size: 13px; }
.profile { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; margin: 0; font-size: 14px; }
.profile dt { font-weight: 700; color: var(--ink-soft); }
.profile dd { margin: 0; }
.profile-text { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.sel-actions { padding-top: 10px; border-top: 1px dashed var(--gold-soft); }

/* ---------- home ---------- */
.home-left { position: absolute; left: 30px; top: 56px; width: 760px; bottom: 0; }
.home-portrait { left: 120px; bottom: -10px; height: 820px; cursor: pointer; }
.home-speech { left: 470px; top: 90px; max-width: 330px; z-index: 5; }
.home-speech::after { content: ""; position: absolute; left: -16px; bottom: 26px; border: 10px solid transparent; border-right-color: #f6c8d4; }
.home-status { left: 830px; top: 80px; width: 380px; }
.hs-name { font: 700 22px var(--serif); margin-bottom: 10px; }
.hs-name .gen { display: block; font: 700 12px var(--sans); color: var(--rose); }
.hs-row { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; align-items: center; margin: 8px 0; font-size: 14px; font-weight: 700; }
.hs-row .val { text-align: right; }
.hs-injury { background: #fde4e4; color: #b03030; font-weight: 700; padding: 6px 10px; border-radius: 6px; margin: 6px 0; }
.hs-tier { margin-top: 12px; font-size: 14px; color: var(--rose-dark); font-weight: 700; }
.home-status .stat-rows { margin-top: 12px; }
.home-actions { position: absolute; right: 30px; top: 80px; width: 330px; display: flex; flex-direction: column; gap: 14px; }
.btn.act { text-align: left; padding: 14px 22px; font-size: 22px; }
.btn.act span { display: flex; flex-direction: column; }
.btn.act small { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.btn.act-train { border-left: 8px solid #3b8fe0; }
.btn.act-rest { border-left: 8px solid #6fbf6a; }
.btn.act-talk { border-left: 8px solid #ff7aa0; }
.btn.act-race { border-left: 8px solid #f0a020; }
.btn.glow { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(240, 160, 32, 0.6), 0 0 26px rgba(240, 160, 32, 0.8); } }
.home-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.home-sub .btn { min-width: 0; min-height: 48px; font-size: 14px; padding: 10px 8px; line-height: 1.35; word-break: keep-all; }

/* ---------- training ---------- */
.train-left { position: absolute; left: 0; top: 56px; width: 800px; bottom: 0; }
.train-portrait { left: 140px; bottom: -20px; height: 800px; }
.train-portrait.training-run .portrait-img { animation: trainRun 0.25s linear infinite; }
@keyframes trainRun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px) translateX(6px); } }
.train-speech { left: 480px; top: 90px; max-width: 320px; z-index: 5; }
.train-right { position: absolute; right: 24px; top: 72px; width: 760px; bottom: 24px; display: grid; grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr; gap: 12px; }
.train-hud { grid-column: 1 / 3; display: grid; grid-template-columns: 50px 1fr 50px auto; gap: 10px; align-items: center; background: rgba(40, 26, 30, 0.75); color: #fff; border-radius: 10px; padding: 8px 16px; font-weight: 700; }
.train-list { display: flex; flex-direction: column; gap: 8px; }
.train-list.disabled { pointer-events: none; opacity: 0.6; }
.train-item { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; background: linear-gradient(90deg, rgba(40, 30, 40, 0.82), rgba(60, 46, 56, 0.82)); color: #fff; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.train-item.on { background: linear-gradient(90deg, #fff6d8, #ffe2a0); color: var(--ink); border-color: #e0b050; }
.train-item.risky .ti-fail { color: #ff8a8a; }
.ti-icon { grid-row: 1 / 3; font-size: 24px; }
.ti-name { font-weight: 700; font-size: 17px; }
.ti-lv { font-size: 12px; font-weight: 700; color: #f0b040; }
.ti-fail { font-size: 12px; grid-column: 2 / 4; opacity: 0.9; }
.ti-fail.warn { color: #e0a020; }
.ti-fail.bad { color: #ff5050; font-weight: 700; }
.fav { font-size: 12px; color: #ff6f91; font-weight: 900; }
.train-detail { position: relative; display: flex; flex-direction: column; gap: 12px; }
.td-title { font: 700 26px var(--serif); }
.td-desc { margin: 0; color: var(--ink-soft); }
.td-gains { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.td-gain { text-align: center; background: #fff; border: 1px solid var(--gold-soft); border-radius: 8px; padding: 6px 0; font-size: 13px; }
.td-gain b { display: block; font-size: 22px; color: #2f7fe0; }
.td-gain.none b { color: #c8bca8; }
.td-meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.td-warn { background: #fff4d8; color: #a06a10; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.td-warn.bad { background: #ffe0e0; color: #b02a2a; }

/* ---------- interaction ---------- */
.talk-left { position: absolute; left: 60px; top: 56px; width: 900px; bottom: 0; }
.talk-portrait { left: 180px; bottom: 120px; height: 700px; }
.talk-portrait.brushable { cursor: grab; filter: drop-shadow(0 0 16px rgba(255, 220, 140, 0.9)); }
.talk-menu { right: 40px; top: 90px; width: 400px; display: flex; flex-direction: column; gap: 10px; z-index: 31; }
/* The side menu covers the right end of the centred dialogue box; keep the text clear of it. */
body:not(.compact) .talk-menu:not(.hidden) ~ .dialogue { left: 40px; right: 470px; width: auto; transform: none; }
.menu-title { font: 700 22px var(--serif); border-bottom: 2px solid var(--gold-soft); padding-bottom: 6px; }
.btn.talk-btn { text-align: left; }
.talk-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 6px; }
.talk-item .ti-icon { grid-row: 1 / 3; }
.talk-item small { font-weight: 500; color: var(--ink-soft); font-size: 12px; }
.brush-help { font-weight: 700; font-size: 18px; color: var(--rose-dark); }
.brush-meter .bar { height: 20px; }

/* ---------- event ---------- */
.event-title { position: absolute; left: 0; top: 30px; padding: 10px 40px 10px 30px; background: linear-gradient(90deg, rgba(60, 30, 50, 0.9), rgba(60, 30, 50, 0)); color: #fff; font: 700 26px var(--serif); border-left: 6px solid var(--gold); z-index: 5; }
.event-stage { position: absolute; inset: 0; }
.event-portrait { left: 50%; bottom: 130px; height: 740px; transform: translateX(-50%); }

/* ---------- race ---------- */
.race-pick { left: 50%; top: 150px; transform: translateX(-50%); width: 760px; display: flex; flex-direction: column; gap: 12px; }
.btn.rp-btn { text-align: left; }
.rp-item { display: flex; gap: 14px; align-items: center; }
.rp-apt { margin-left: auto; font-size: 13px; }
.paddock-left { position: absolute; left: 0; top: 56px; width: 560px; bottom: 0; }
.paddock-portrait { left: 40px; bottom: -20px; height: 780px; }
.paddock-speech { left: 320px; top: 60px; max-width: 260px; font-size: 16px; z-index: 5; }
.paddock-info { left: 560px; top: 76px; width: 620px; bottom: 24px; overflow: auto; }
.race-head { display: flex; align-items: center; gap: 10px; }
.race-name { font: 900 30px var(--serif); }
.goal-tag { background: var(--rose); color: #fff; font-weight: 700; padding: 2px 10px; border-radius: 6px; font-size: 13px; }
.race-meta { display: flex; gap: 18px; margin: 8px 0; font-weight: 700; color: var(--ink-soft); }
.race-apt { margin: 8px 0 10px; font-weight: 700; }
.warn-text { color: #c03030; }
.field-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.field-table th { text-align: left; color: var(--ink-soft); border-bottom: 2px solid var(--gold-soft); padding: 4px 6px; }
.field-table td { padding: 3px 6px; border-bottom: 1px solid #eee2c8; }
.field-table tr.me td { background: #ffe9ef; font-weight: 900; }
.gate { display: inline-block; width: 24px; text-align: center; color: #fff; border-radius: 4px; font-weight: 700; }
img.mini { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; margin-right: 6px; object-fit: cover; background: #fff; }
.paddock-strat { right: 24px; top: 76px; width: 380px; display: flex; flex-direction: column; gap: 10px; }
.strat-box { display: flex; flex-direction: column; gap: 8px; }
.btn.strat { text-align: left; }
.btn.strat span { display: flex; flex-direction: column; }
.btn.strat small { font-weight: 500; font-size: 12px; color: var(--ink-soft); }
.race-canvas { position: absolute; inset: 0; width: 1600px; height: 900px; }
.race-top { position: absolute; left: 20px; right: 20px; top: 14px; display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 14px; align-items: center; background: rgba(20, 16, 30, 0.72); color: #fff; padding: 10px 18px; border-radius: 12px; z-index: 5; }
.race-top .race-name { font-size: 22px; }
.rt-meta { font-size: 14px; color: #f0e0c0; }
.race-progress { position: relative; height: 26px; }
.rp-track { position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: linear-gradient(90deg, #fff, #ffd84a 75%, #ff5050); border-radius: 2px; }
.rp-dot { position: absolute; top: -5px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; transform: translateX(-50%); }
.rp-dot.me { width: 20px; height: 20px; top: -8px; border-color: #ffd84a; z-index: 2; box-shadow: 0 0 8px #ffd84a; }
.race-remain { font: 900 22px var(--sans); min-width: 150px; text-align: right; }
.race-standings { position: absolute; left: 20px; top: 92px; width: 230px; display: flex; flex-direction: column; gap: 3px; z-index: 5; }
.st-row { display: grid; grid-template-columns: 26px 12px 1fr; align-items: center; gap: 6px; background: rgba(255, 250, 240, 0.88); border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.st-name { overflow: hidden; text-overflow: ellipsis; }
.st-row:first-child { background: linear-gradient(90deg, #ffe58a, #fff6d0); }
.st-row.me { background: linear-gradient(90deg, #ff8aa6, #ffd0dc); }
.st-pos { font: 900 16px var(--serif); text-align: center; }
.st-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; }
.race-commentary { position: absolute; left: 260px; top: 96px; width: 820px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.cm-line { background: rgba(20, 16, 30, 0.72); color: #fff; border-radius: 8px; padding: 6px 14px; font-size: 18px; font-weight: 700; opacity: 0.7; }
.cm-line.new { opacity: 1; animation: cmIn 0.3s ease-out; }
.cm-line.good { border-left: 5px solid #ff7aa0; }
.cm-line.bad { border-left: 5px solid #7a8ad0; }
.cm-line.big { font-size: 24px; }
.cm-tag { background: var(--rose); padding: 1px 8px; border-radius: 4px; margin-right: 10px; font-size: 13px; }
@keyframes cmIn { from { transform: translateX(-20px); opacity: 0; } }
.race-panel { position: absolute; right: 20px; bottom: 20px; width: 520px; display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: rgba(255, 250, 240, 0.93); border: 2px solid var(--gold-soft); border-radius: 14px; padding: 12px; z-index: 5; }
.rp-icon { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--rose); object-fit: cover; background: #fff; }
.rp-name { font: 700 20px var(--serif); display: flex; gap: 10px; align-items: baseline; }
.race-statetag { font: 700 13px var(--sans); color: var(--rose-dark); }
.rp-hp { display: grid; grid-template-columns: 70px 1fr; align-items: center; font-size: 13px; font-weight: 700; margin: 6px 0; }
.rp-btns { display: flex; gap: 6px; align-items: center; }
.rp-sub { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.btn.spurt { margin-left: auto; font-size: 18px; color: #fff; background: linear-gradient(180deg, #ffb040, #e0601a); border-color: #ffd890; box-shadow: 0 3px 0 #a0400a; }
.btn.spurt:not(:disabled) { animation: glow 0.9s infinite; }
.cutin-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.cutin { position: absolute; left: 0; right: 0; top: 330px; height: 120px; display: flex; align-items: center; gap: 24px; padding-left: 360px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--c) 25%, var(--c) 75%, rgba(0, 0, 0, 0)); color: #fff; animation: cutin 1.7s cubic-bezier(.2, .8, .3, 1) both; }
.cutin img { width: 110px; height: 110px; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: #fff; }
.cutin div { display: flex; flex-direction: column; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.cutin b { font: 900 42px var(--serif); }
.cutin.me b { color: #fff6c0; }
@keyframes cutin { 0% { transform: translateX(-100%) skewX(-12deg); opacity: 0; } 18% { transform: translateX(0) skewX(-12deg); opacity: 1; } 80% { transform: translateX(0) skewX(-12deg); opacity: 1; } 100% { transform: translateX(60%) skewX(-12deg); opacity: 0; } }
.result-left { position: absolute; left: 0; top: 0; width: 700px; bottom: 0; }
.result-portrait { left: 80px; bottom: 140px; height: 720px; }
.result-panel { left: 720px; top: 40px; width: 840px; }
.result-head { font: 700 24px var(--serif); }
.result-place { font: 900 84px var(--serif); text-align: center; color: #8a7a6a; }
.result-place.p1 { background: linear-gradient(180deg, #fff2a0, #f0a020); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #a05a10); animation: perk 0.8s cubic-bezier(.3, 1.6, .5, 1); }
.result-place.p2, .result-place.p3 { color: #4a6ab0; }
.result-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.result-table td { padding: 4px 8px; border-bottom: 1px solid #eee2c8; }
.result-table tr.me td { background: #ffe9ef; font-weight: 900; }
.result-table .pos { font: 900 18px var(--serif); width: 40px; text-align: center; }
.result-table .margin { text-align: right; color: var(--ink-soft); }
.result-reward { display: flex; flex-wrap: wrap; gap: 20px; font-weight: 900; font-size: 20px; color: #a06a10; margin-top: 10px; }
.goal-clear { margin-top: 8px; font: 900 24px var(--serif); color: var(--rose-dark); }
.goal-fail { margin-top: 8px; font: 900 22px var(--serif); color: #5a6aa0; }

/* ---------- ranch ---------- */
.ranch-wrap { position: absolute; inset: 0; }
.ranch-left { left: 24px; top: 24px; width: 1040px; bottom: 24px; }
.ranch-head { display: flex; gap: 22px; font-weight: 700; margin-bottom: 10px; color: var(--ink-soft); }
.rh-name { font: 700 20px var(--serif); color: var(--ink); }
.ranch-map { position: relative; width: 1000px; height: 667px; border-radius: 10px; overflow: hidden; border: 2px solid var(--gold-soft); }
.ranch-map > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotspot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.hs-icon { font-size: 26px; background: rgba(255, 250, 240, 0.95); border: 2px solid var(--gold); border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.hotspot:hover .hs-icon, .hotspot.on .hs-icon { transform: scale(1.15); border-color: var(--rose); }
.hs-lv { font: 900 12px var(--sans); color: #fff; background: var(--rose); padding: 0 6px; border-radius: 8px; margin-top: -8px; }
.hs-label { font: 700 13px var(--sans); color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; margin-top: 2px; white-space: nowrap; }
.ranch-right { right: 24px; top: 24px; width: 488px; bottom: 24px; display: flex; flex-direction: column; }
.fac-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; margin-bottom: 10px; }
.fac-item { background: #fff; border: 1px solid var(--gold-soft); border-radius: 10px; padding: 8px 12px; }
.fac-item.on { border-color: var(--rose); box-shadow: 0 0 0 2px rgba(224, 96, 122, 0.3); }
.fac-title { font-weight: 700; display: flex; align-items: center; gap: 4px; }
.fac-lv { margin-left: auto; color: #f0a020; }
.fac-lv .off { color: #e0d4bc; }
.fac-desc { font-size: 13px; color: var(--ink-soft); margin: 4px 0 6px; }
.fac-max { font-weight: 700; color: var(--rose-dark); font-size: 13px; }

/* ---------- status ---------- */
.status-left { position: absolute; left: 0; top: 56px; width: 420px; bottom: 0; }
.status-portrait { left: 20px; bottom: -20px; height: 760px; }
.status-grid { position: absolute; left: 400px; right: 24px; top: 74px; bottom: 90px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.status-grid .panel { position: relative; overflow: auto; }
.st-name { font: 700 22px var(--serif); }
.st-name small { display: block; font: 700 12px var(--sans); color: var(--rose); }
.skill-list, .goal-list, .result-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.skill-list li { background: #fff; border-radius: 8px; padding: 6px 10px; border: 1px solid var(--gold-soft); }
.skill-list small { display: block; color: var(--ink-soft); }
.goal-list li.done { color: #9a8a7a; text-decoration: line-through; }
.goal-list li.now { font-weight: 900; color: var(--rose-dark); }
.result-list .place { float: right; }
.place.p1 { color: #e08a10; }
.tl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 13px; }
.small-line { font-size: 14px; margin: 6px 0; font-weight: 700; }
.status-back { position: absolute; right: 24px; bottom: 24px; }

/* ---------- lineage ---------- */
.retire-title, .br-title { position: absolute; left: 0; right: 0; top: 24px; text-align: center; color: #fff; font: 900 40px var(--serif); text-shadow: 0 3px 10px rgba(60, 20, 60, 0.8); z-index: 3; }
.retire-left { position: absolute; left: 60px; top: 0; width: 700px; bottom: 0; }
.retire-portrait { left: 60px; bottom: 150px; height: 680px; }
.retire-card { left: 760px; top: 100px; width: 780px; }
.rc-name { font: 900 34px var(--serif); }
.rc-title { font-weight: 700; color: var(--rose-dark); margin: 4px 0; }
.rc-rank { position: absolute; right: 30px; top: 18px; font: 900 96px var(--serif); background: linear-gradient(180deg, #fff2a0, #f08a20); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #a05a10); }
.rc-score { margin: 8px 0 14px; color: var(--ink-soft); font-weight: 700; }
.br-wrap { position: absolute; left: 24px; right: 24px; top: 100px; bottom: 80px; }
.br-mothers { left: 0; top: 0; width: 470px; bottom: 0; display: flex; flex-direction: column; }
.br-sires { left: 490px; top: 0; width: 520px; bottom: 0; display: flex; flex-direction: column; }
.br-preview { right: 0; top: 0; width: 520px; bottom: 0; display: flex; flex-direction: column; gap: 10px; }
.br-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.br-card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; background: #fff; border: 2px solid var(--gold-soft); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.br-card.on { border-color: var(--rose); background: #fff1f4; }
.br-card.locked { opacity: 0.5; filter: grayscale(0.8); cursor: default; }
.br-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #f6ead2; }
.br-card small { display: block; font-size: 12px; color: var(--ink-soft); }
.br-card small.bonus { color: #2f7fe0; font-weight: 700; }
.pv-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.pv-stats div { background: #fff; border: 1px solid var(--gold-soft); border-radius: 8px; padding: 6px 0; font-size: 13px; }
.pv-stats b { display: block; font-size: 18px; color: #2f7fe0; }
.pv-list { font-size: 14px; margin: 0; padding-left: 20px; color: var(--ink-soft); }
.name-row { display: grid; grid-template-columns: 60px 1fr; align-items: center; font-weight: 700; }
.name-input { font: 700 20px var(--serif); padding: 6px 12px; border: 2px solid var(--gold); border-radius: 8px; background: #fff; width: 100%; min-width: 0; }
.br-tree-btn { position: absolute; right: 24px; bottom: 20px; }
.sparkles { position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(255, 240, 200, 0.6), rgba(255, 240, 200, 0) 45%); animation: blink 3s infinite; }
.reveal-left { position: absolute; left: 60px; top: 0; width: 700px; bottom: 0; }
.reveal-portrait { left: 80px; bottom: 140px; height: 720px; animation: castIn 1.4s cubic-bezier(.2, .9, .3, 1.2) both; }
.reveal-card { left: 760px; top: 60px; width: 780px; animation: castIn 0.8s both; }
.rv-gen { color: var(--rose); font-weight: 900; }
.rv-name { font: 900 40px var(--serif); }
.rv-type { font-weight: 700; color: var(--ink-soft); }
.reveal-card ul { font-size: 15px; }
.tree-wrap { min-width: 900px; }
.tree { display: flex; flex-direction: column; gap: 14px; }
.tree-node { display: flex; align-items: flex-start; gap: 18px; }
.tree-card { display: grid; grid-template-columns: 56px 220px; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--gold-soft); border-radius: 10px; padding: 6px 10px; }
.tree-card.waiting { border-style: dashed; border-color: var(--rose); }
.tree-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.tree-card small { display: block; font-size: 12px; color: var(--ink-soft); }
.tree-children { display: flex; flex-direction: column; gap: 10px; border-left: 3px solid var(--gold-soft); padding-left: 18px; }

/* ---------- romance / pledge ---------- */
.br-card.bond { border-color: #f2a0b6; background: linear-gradient(90deg, #fff0f4, #fff); }
.br-card.bond.on { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(224, 96, 122, 0.35); }
.bond-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: #ffe3ea; }
.fade-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.3s ease; z-index: 60; }
.fade-black.on { opacity: 1; }
.pv-kid { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.pv-kid img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--rose); object-fit: cover; background: #f6ead2; }
.event-portrait.with-rival { left: 33%; }
.event-portrait.rival { left: 70%; height: 700px; }
.portrait.dim .portrait-img { filter: brightness(0.7) saturate(0.85) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.rival-tag { margin-left: 8px; font-size: 11px; font-weight: 900; color: #fff; background: #a0284a; padding: 1px 6px; border-radius: 4px; }
.tb-rival { font-weight: 700; color: #ffb3c6; font-size: 14px; }

/* ---------- mobile: self-contained, PC panel geometry stays unchanged ---------- */
html, body { overscroll-behavior: none; }
#viewport { inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
#stage { touch-action: none; -webkit-touch-callout: none; }
.fullscreen-btn { position: absolute; right: 30px; bottom: 34px; z-index: 6; min-width: 180px; min-height: 76px; font-size: 28px; }
body.compact { font-size: 28px; }
body.compact .btn { font-size: 30px; min-height: 82px; padding: 12px 18px; line-height: 1.25; }
body.compact .btn.big { font-size: 32px; min-height: 96px; }
body.compact .btn.small { font-size: 26px; min-height: 72px; }
body.compact .btn.icon-btn { font-size: 32px; min-width: 78px; min-height: 68px; }
body.compact .panel-title { font-size: 30px; margin-top: 4px; }
body.compact .hint, body.compact .small-line { font-size: 26px; }
body.compact .speech { font-size: 30px; line-height: 1.4; }
body.compact .toast { font-size: 30px; top: 110px; max-width: 1450px; }
body.compact .modal { font-size: 30px; min-width: 700px; max-width: 1500px; max-height: 820px; }
body.compact .confirm p { font-size: 30px; }
body.compact .setting { grid-template-columns: 200px 1fr; margin: 22px 0; }
body.compact input[type="range"] { min-height: 64px; }
body.compact input[type="checkbox"] { width: 42px; height: 42px; }

/* Dialogue and choice controls have separate vertical space. */
body.compact .dialogue { width: 1500px; min-height: 230px; padding: 38px 32px 24px; bottom: 18px; }
body.compact .dlg-name { font-size: 30px; top: -28px; }
body.compact .dlg-text { font-size: 34px; line-height: 1.5; min-height: 110px; }
body.compact .dlg-next { font-size: 28px; }
body.compact .dlg-choices { bottom: 260px; right: 32px; left: 500px; max-height: 570px; overflow: auto; }
body.compact .btn.choice { min-width: 0; width: 100%; font-size: 30px; flex-shrink: 0; }

/* Topbar reserves its own band, and uses two rows for ancillary information. */
body.compact .topbar { height: 94px; gap: 14px; padding: 6px 16px; font-size: 26px; }
body.compact .tb-date { min-width: 245px; }
body.compact .tb-year { font-size: 28px; }
body.compact .tb-remain { font-size: 23px; }
body.compact .tb-goal { font-size: 26px; flex-wrap: wrap; gap: 4px 8px; line-height: 1.15; }
body.compact .tb-goal-label { font-size: 23px; }
body.compact .tb-rival { font-size: 23px; max-width: 230px; }
body.compact .tb-gold { white-space: nowrap; }
body.compact .grade, body.compact .mood { font-size: 24px; }
body.compact .stat-row { font-size: 28px; grid-template-columns: 138px 48px minmax(30px, 1fr) 62px; gap: 6px; }
body.compact .stat-rows { gap: 10px; }
body.compact .stat-rank { font-size: 28px; }
body.compact .bar { height: 20px; }
body.compact .apt { font-size: 28px; min-width: 36px; }
body.compact .apt-table th { font-size: 23px; padding: 3px 2px; }
body.compact .apt-table td { padding: 3px 2px; }

body.compact .title-menu { top: 480px; width: 440px; left: 100px; }
body.compact .press-start { font-size: 38px; }
body.compact .title-catch { font-size: 30px; }
body.compact .sel-left { width: 500px; display: flex; flex-direction: column; }
body.compact .tabs { gap: 8px; flex-wrap: wrap; }
body.compact .tab { font-size: 28px; min-height: 76px; padding: 8px 18px; }
body.compact .sel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; flex: 1; max-height: 590px; }
body.compact .sel-name { font-size: 27px; }
body.compact .ranch-mini { position: static; font-size: 24px; margin-top: 12px; }
body.compact .sel-right { width: 550px; }
body.compact .sel-info { min-height: 0; min-width: 0; }
body.compact .sel-info .apt-table { display: block; }
body.compact .sel-info .apt-table tr { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px; align-items: center; gap: 4px; }
body.compact .sel-info .apt-table th { text-align: left; }
body.compact .sel-actions { flex-shrink: 0; gap: 10px; }
body.compact .sel-actions .primary { width: 100%; }
body.compact .sel-stage .speech { left: 24px; top: 16px; max-width: 470px; font-size: 26px; line-height: 1.35; }
body.compact .np-name { font-size: 32px; }
body.compact .np-type { font-size: 24px; }
body.compact .growth-row { font-size: 26px; grid-template-columns: 125px 155px minmax(0, 1fr); gap: 6px; }
body.compact .growth-row .base { white-space: nowrap; }
body.compact .growth .base { font-size: 24px; }
body.compact .profile { font-size: 27px; grid-template-columns: 140px 1fr; gap: 8px; }
body.compact .profile-text, body.compact .profile small { font-size: 26px; }

body.compact .home-left, body.compact .train-left, body.compact .talk-left,
body.compact .paddock-left, body.compact .status-left { top: 94px; }
body.compact .home-status { left: 700px; top: 116px; width: 470px; max-height: 760px; overflow: auto; }
body.compact .hs-name { font-size: 32px; }
body.compact .hs-name .gen, body.compact .hs-tier { font-size: 26px; }
body.compact .hs-row { font-size: 27px; grid-template-columns: 100px minmax(30px, 1fr) 100px; margin: 14px 0; }
body.compact .home-speech { left: 340px; top: 24px; max-width: 330px; }
body.compact .home-actions { top: 116px; width: 380px; right: 24px; gap: 12px; bottom: 20px; overflow: auto; }
body.compact .btn.act { font-size: 32px; min-height: 110px; }
body.compact .btn.act small { font-size: 24px; }
body.compact .home-sub { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 0; }
body.compact .home-sub .btn { font-size: 28px; }

body.compact .train-right { top: 110px; width: 940px; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: 70px minmax(0, 1fr); }
body.compact .train-hud { font-size: 28px; grid-template-columns: 70px 1fr 65px auto; }
body.compact .train-list { overflow: auto; min-height: 0; padding-bottom: 6px; }
body.compact .train-item { min-height: 96px; flex-shrink: 0; }
body.compact .ti-name { font-size: 30px; }
body.compact .ti-icon { font-size: 34px; }
body.compact .ti-lv, body.compact .ti-fail, body.compact .fav { font-size: 24px; }
body.compact .train-detail { overflow: auto; min-height: 0; gap: 14px; }
body.compact .train-detail > * { flex-shrink: 0; }
body.compact .td-title { font-size: 34px; }
body.compact .td-desc, body.compact .td-meta, body.compact .td-warn { font-size: 28px; }
body.compact .td-gain { font-size: 23px; }
body.compact .td-gain b { font-size: 32px; }
body.compact .train-portrait { left: 10px; height: 730px; }
body.compact .train-speech { left: 80px; top: 20px; max-width: 440px; }

body.compact .talk-menu { top: 110px; bottom: 280px; right: 24px; width: 580px; overflow: auto; gap: 12px; }
body.compact .talk-menu > * { flex-shrink: 0; }
body.compact .talk-menu > .btn:last-child { position: sticky; bottom: 0; z-index: 2; }
body.compact .menu-title { font-size: 32px; }
body.compact .talk-item small { font-size: 24px; }
body.compact .brush-help { font-size: 32px; }
body.compact .talk-portrait { left: 80px; }
body.compact .event-title { font-size: 34px; }

body.compact .race-pick { top: 116px; bottom: 24px; width: 1200px; overflow: auto; }
body.compact .race-pick > * { flex-shrink: 0; }
body.compact .rp-item { flex-wrap: wrap; font-size: 28px; }
body.compact .rp-apt { font-size: 26px; }
body.compact .paddock-info { left: 440px; top: 110px; width: 660px; font-size: 27px; }
body.compact .race-meta { flex-wrap: wrap; gap: 8px 16px; }
body.compact .paddock-strat { top: 110px; width: 450px; bottom: 24px; overflow: auto; }
body.compact .paddock-strat > * { flex-shrink: 0; }
body.compact .btn.strat small { font-size: 24px; }
body.compact .paddock-speech { left: 60px; top: 20px; max-width: 340px; }
body.compact .field-table { font-size: 26px; }
body.compact .rival-tag { font-size: 21px; display: block; }
body.compact .race-top { font-size: 28px; min-height: 90px; }
body.compact .race-top .race-name, body.compact .race-remain { font-size: 30px; }
body.compact .rt-meta { font-size: 26px; }
body.compact .race-standings { top: 116px; width: 320px; gap: 5px; }
body.compact .st-row { font-size: 26px; grid-template-columns: 40px 16px 1fr; padding: 5px 8px; }
body.compact .st-pos { font-size: 28px; }
body.compact .race-commentary { left: 360px; top: 116px; width: 1000px; }
body.compact .cm-line, body.compact .cm-line.big { font-size: 30px; }
body.compact .cm-tag { font-size: 23px; }
body.compact .race-panel { width: 820px; grid-template-columns: 96px minmax(0, 1fr); }
body.compact .rp-name { font-size: 32px; }
body.compact .race-statetag, body.compact .rp-hp { font-size: 26px; }
body.compact .rp-hp { grid-template-columns: 150px 1fr; }
body.compact .rp-btns { flex-wrap: wrap; }
body.compact .btn.spurt { font-size: 30px; }
body.compact .result-panel { top: 24px; bottom: 24px; overflow: auto; }
body.compact .result-head, body.compact .result-reward { font-size: 30px; }
body.compact .result-table { font-size: 28px; }
body.compact .result-table .pos { font-size: 28px; }

body.compact .ranch-left { display: flex; flex-direction: column; }
body.compact .ranch-head { font-size: 27px; flex-wrap: wrap; gap: 10px 22px; }
body.compact .rh-name { font-size: 32px; }
body.compact .ranch-map { min-height: 0; flex: 1; }
body.compact .hs-icon { width: 86px; height: 86px; font-size: 42px; }
body.compact .hs-label, body.compact .hs-lv { font-size: 26px; }
body.compact .fac-list { min-height: 0; }
body.compact .fac-item { flex-shrink: 0; font-size: 28px; }
body.compact .fac-title { flex-wrap: wrap; }
body.compact .fac-desc, body.compact .fac-max { font-size: 26px; }
body.compact .status-grid { top: 110px; }
body.compact .st-name { font-size: 32px; }
body.compact .st-name small { font-size: 25px; }
body.compact .status-grid .stat-row { grid-template-columns: 125px 42px minmax(10px, 1fr) 54px; font-size: 26px; gap: 4px; }
body.compact .status-grid .apt-table { display: block; }
body.compact .status-grid .apt-table tr { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px; align-items: center; gap: 4px; }
body.compact .status-grid .apt-table th { white-space: nowrap; text-align: left; font-size: 22px; }
body.compact .skill-list, body.compact .goal-list, body.compact .result-list, body.compact .tl-grid { font-size: 26px; }
body.compact .tl-grid { grid-template-columns: 1fr; }
body.compact .retire-card, body.compact .reveal-card { bottom: 24px; overflow: auto; }
body.compact .rc-title, body.compact .rc-score, body.compact .reveal-card ul { font-size: 28px; }
body.compact .br-wrap { bottom: 110px; }
body.compact .br-list { min-height: 0; flex: 1; }
body.compact .br-card { min-height: 100px; flex-shrink: 0; font-size: 28px; }
body.compact .br-card small, body.compact .tree-card small { font-size: 25px; }
body.compact .br-preview { overflow: auto; }
body.compact .br-preview > * { flex-shrink: 0; }
body.compact .pv-stats div { font-size: 23px; }
body.compact .pv-stats b { font-size: 30px; }
body.compact .pv-list { font-size: 26px; }
body.compact .name-row { grid-template-columns: 100px 1fr; font-size: 28px; }
body.compact .name-input { font-size: 32px; min-height: 76px; }
body.compact .tree-card { grid-template-columns: 70px 280px; font-size: 28px; }
/* ---------- end mobile ---------- */

/* ---------- support card gacha ---------- */
.gacha-header { position: absolute; top: 20px; left: 28px; right: 28px; height: 90px; display: flex; align-items: center; gap: 30px; color: #fffaf0; }
.gacha-header > div:first-child { padding: 6px 48px 8px 16px; border-radius: 10px; background: linear-gradient(90deg, #1b1424d9 70%, #1b142400); text-shadow: 0 1px 3px #000a; }
.gacha-mobile-tabs { display: none; }
.gacha-header h1 { margin: 0 0 5px; font: 700 32px var(--serif); }
.gacha-header span { color: #e8d3a0; font-size: 15px; }
.gacha-wallet { margin-left: auto; font-weight: 700; font-size: 20px; }
.gacha-layout { position: absolute; inset: 120px 24px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 510px; gap: 20px; }
.gacha-layout > .panel { position: relative; min-height: 0; display: flex; flex-direction: column; }
.gacha-main { gap: 16px; }
.gacha-banner { flex-shrink: 0; position: relative; height: 230px; overflow: hidden; border-radius: 10px; color: #fff; background: radial-gradient(ellipse at 20% 30%, #975071, transparent 65%), linear-gradient(125deg, #261d42, #493154 65%, #a47d49); border: 1px solid #e8d3a0; }
.gacha-banner > img { position: absolute; height: 360px; left: 10px; top: -30px; filter: drop-shadow(0 0 18px #f7cd9099); }
.gacha-banner > div { position: absolute; left: 40%; top: 24px; right: 15px; }
.gacha-banner small { color: #e8d3a0; letter-spacing: 3px; font-size: 12px; }
.gacha-banner h2 { margin: 12px 0; font: 700 32px/1.25 var(--serif); }
.gacha-banner p { font-size: 14px; margin: 8px 0; }
.gacha-banner b { color: #f8df94; font-size: 17px; }
.gacha-pity { display: flex; align-items: center; gap: 20px; font-weight: 700; font-size: 15px; }
.gacha-meter { flex: 1; height: 8px; border-radius: 5px; background: #e4d8c7; overflow: hidden; }
.gacha-meter i { display: block; height: 100%; background: linear-gradient(90deg, #bd85c6, #daab48); border-radius: inherit; }
.gacha-pulls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gacha-pulls .small { margin-left: auto; }
.gacha-results { flex: 1; min-height: 0; overflow: auto; padding: 4px; }
.gacha-result-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.gacha-result-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.support-reveal { position: relative; overflow: hidden; border-radius: 10px; border: 2px solid var(--rarity-color); background: linear-gradient(150deg, #fffaf1, var(--rarity-bg)); animation: support-reveal 0.55s backwards; animation-delay: var(--delay); }
.rarity-r { --rarity-color: #7993a1; --rarity-bg: #dde7ec; }
.rarity-sr { --rarity-color: #b175c8; --rarity-bg: #eeddf4; }
.rarity-ssr { --rarity-color: #d5a33a; --rarity-bg: #ffecae; }
.support-reveal.rarity-ssr { box-shadow: 0 0 15px #f2c45966; }
.support-reveal > img { display: block; width: 100%; height: 110px; object-fit: contain; object-position: center top; margin-top: 10px; }
.support-rarity { font-weight: 900; color: var(--rarity-color); font-size: 15px; letter-spacing: 1px; }
.support-reveal > .support-rarity { position: absolute; z-index: 1; top: 6px; left: 8px; text-shadow: 0 0 5px #fff; }
.support-reveal-info { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fffaf0dd; font-size: 12px; }
.support-reveal-info b { font-size: 13px; }
.support-reveal-info strong { color: #765336; }
.support-reveal-info .support-new { color: var(--rose-dark); }
.gacha-result-grid.single { grid-template-columns: 270px; justify-content: center; }
.single .support-reveal > img { height: 145px; }
.single .support-reveal-info { font-size: 15px; }
.single .support-reveal-info b { font-size: 18px; }
.gacha-empty { min-height: 220px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); border: 1px dashed var(--gold-soft); border-radius: 10px; }
.gacha-empty > span { color: var(--gold); font-size: 60px; }
.gacha-empty > b { font: 700 22px var(--serif); }
.gacha-empty p { font-size: 14px; }
.gacha-side > .panel-title { flex-shrink: 0; }
.support-deck { flex-shrink: 0; }
.support-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.support-slot { min-width: 0; height: 100px; border-radius: 8px; }
.btn.support-slot { padding: 4px; }
.support-slot img { width: 40px; height: 40px; border-radius: 50%; }
.support-slot small { display: block; font-size: 12px; }
.support-slot.empty { display: grid; place-items: center; border: 1px dashed var(--gold); color: #927a5c; font-size: 13px; }
.gacha-side .hint { line-height: 1.5; margin: 10px 0; font-size: 13px; }
.gacha-side > .tabs { flex-shrink: 0; }
.support-collection { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 3px; }
.support-item { width: 100%; display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 8px; text-align: left; font-family: var(--sans); color: var(--ink); background: linear-gradient(120deg, #fffaf5, var(--rarity-bg)); border: 1px solid var(--rarity-color); border-left-width: 4px; border-radius: 8px; cursor: pointer; }
.support-item:disabled { opacity: 0.5; filter: grayscale(0.65); cursor: default; }
.support-item.equipped { outline: 2px solid var(--rose); }
.support-item > img { width: 64px; height: 64px; border-radius: 6px; }
.support-item > div { min-width: 0; flex: 1; }
.support-item b { margin-left: 8px; font-size: 14px; }
.support-item small { display: block; font-size: 13px; margin-top: 4px; }
.support-mark { color: var(--rose-dark); font-size: 13px; font-weight: 700; }
.gacha-rules { max-width: 950px; line-height: 1.7; }
@keyframes support-reveal { from { opacity: 0; transform: translateY(18px) rotateY(65deg); } to { opacity: 1; transform: translateY(0) rotateY(0); } }
@media (prefers-reduced-motion: reduce) { .support-reveal { animation: none; } }

body.compact .gacha-header h1 { font-size: 34px; }
body.compact .gacha-header span { font-size: 24px; }
body.compact .gacha-wallet { font-size: 26px; }
body.compact .gacha-layout { grid-template-columns: minmax(0, 1fr) 640px; }
body.compact .gacha-main { overflow: auto; }
body.compact .gacha-main > * { flex-shrink: 0; }
body.compact .gacha-banner { height: 230px; }
body.compact .gacha-banner > div { top: 16px; }
body.compact .gacha-banner h2 { font-size: 28px; line-height: 1.18; margin: 8px 0; }
body.compact .gacha-banner small { font-size: 16px; letter-spacing: 1px; }
body.compact .gacha-banner p, body.compact .gacha-banner b { font-size: 23px; }
body.compact .gacha-pity { font-size: 26px; }
body.compact .gacha-pulls .btn { font-size: 28px; }
body.compact .gacha-pulls .small { margin-left: 0; }
body.compact .gacha-results { flex: none; overflow: visible; }
body.compact .gacha-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.compact .gacha-result-grid.single { grid-template-columns: 300px; }
body.compact .gacha-result-title { font-size: 30px; }
body.compact .support-reveal > img { height: 160px; }
body.compact .support-reveal-info, body.compact .support-reveal-info small { font-size: 24px; }
body.compact .support-reveal-info b, body.compact .single .support-reveal-info b { font-size: 25px; }
body.compact .support-rarity { font-size: 25px; }
body.compact .support-slot { height: 145px; }
body.compact .support-slot img { width: 50px; height: 50px; }
body.compact .support-slot small, body.compact .support-slot.empty { font-size: 23px; }
body.compact .support-deck > b { font-size: 28px; }
body.compact .gacha-side .hint { font-size: 24px; }
body.compact .gacha-side > .tabs { flex-wrap: wrap; }
body.compact .gacha-side .tab { font-size: 25px; min-height: 64px; padding: 6px 14px; }
body.compact .support-item > img { width: 72px; height: 72px; }
body.compact .support-item b { font-size: 26px; }
body.compact .support-item small, body.compact .support-mark { font-size: 23px; }
body.compact .gacha-empty > b { font-size: 30px; }
body.compact .gacha-empty p { font-size: 26px; }

/* SSR acquisition: a saved reward gets its own full-stage reveal. */
.ssr-reveal { position: absolute; inset: 0; z-index: 30; overflow: hidden; color: #fff2cb; background: radial-gradient(ellipse at 36% 45%, #866326aa, transparent 58%), linear-gradient(140deg, #171022, #282036 65%, #4b321d); }
.ssr-reveal:focus { outline: none; }
.ssr-rays { position: absolute; width: 1500px; height: 1500px; left: -180px; top: -300px; opacity: .28; background: repeating-conic-gradient(from 0deg, transparent 0deg 17deg, #ffd37a55 17deg 20deg, transparent 20deg 30deg); border-radius: 50%; animation: ssr-rays 28s linear infinite; pointer-events: none; }
.ssr-stars { position: absolute; inset: 0; pointer-events: none; }
.ssr-stars i { position: absolute; left: var(--x); top: var(--y); color: #ffdb88; font-size: 23px; font-style: normal; opacity: 0; animation: ssr-star 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.23s); }
.ssr-content { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 80px; }
.ssr-intro { margin: 0 0 10px; color: #ffe4a4; font: 700 27px var(--serif); letter-spacing: 6px; animation: ssr-intro .8s both; }
.ssr-feature { width: 1100px; display: grid; grid-template-columns: 500px minmax(0, 1fr); align-items: center; gap: 55px; min-height: 590px; }
.ssr-art { position: relative; height: 590px; display: grid; place-items: center; animation: ssr-appear 1s .65s both; }
.ssr-art > img { position: relative; max-width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 25px #f4c36b88); }
.ssr-halo { position: absolute; width: 430px; height: 430px; border: 2px solid #efce8f; border-radius: 50%; box-shadow: 0 0 50px #f1c67566, inset 0 0 50px #f1c67544; }
.ssr-halo::before, .ssr-halo::after { content: ""; position: absolute; inset: -25px; border: 1px solid #efce8f88; transform: rotate(45deg); }
.ssr-halo::after { inset: 30px; transform: rotate(25deg); }
.ssr-info { animation: ssr-appear .75s 1.05s both; }
.ssr-rarity { display: block; font: 900 100px/1.05 var(--serif); letter-spacing: 15px; color: #ffe4a4; text-shadow: 0 3px 0 #a36927, 0 0 40px #ffd38288; }
.ssr-info h1 { margin: 20px 0 12px; font: 700 40px/1.4 var(--serif); text-wrap: balance; }
.ssr-character { font-size: 26px; color: #e7d5ed; }
.ssr-bonus { display: inline-block; border: 1px solid #d2ae70; background: #edc97518; border-radius: 8px; padding: 14px 20px; font-size: 26px; font-weight: 700; }
.ssr-reward { font-size: 24px; color: #ffd08f; }
.ssr-pity { color: #e6d1f8; font-size: 22px; }
.ssr-progress { font-size: 20px; margin: 8px 0 12px; color: #e7d5bd; }
.ssr-controls { display: flex; gap: 16px; }
.ssr-controls .btn { min-width: 220px; }
.ssr-controls .primary { background: linear-gradient(#fff0be, #dbab58); color: #4a2d18; border-color: #fff0bd; }
@keyframes ssr-rays { to { transform: rotate(360deg); } }
@keyframes ssr-star { 0%, 100% { opacity: 0; transform: translateY(18px) scale(.5); } 45%, 65% { opacity: .8; transform: translateY(-12px) scale(1); } }
@keyframes ssr-intro { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes ssr-appear { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
body.compact .ssr-progress { font-size: 28px; }
body.compact .ssr-reward { font-size: 28px; }
@media (prefers-reduced-motion: reduce) {
  .ssr-reveal *, .ssr-reveal *::before, .ssr-reveal *::after { animation: none !important; }
  .ssr-stars i { opacity: .5; }
}

/* Touch targets use screen pixels after the game stage has been scaled. */
body.touch-ui { font-size: max(28px, calc(var(--touch-font) * .875)); --touch-topbar: max(94px, calc(var(--touch-target) + 12px)); }
body.touch-ui #stage button, body.touch-ui .btn, body.touch-ui .btn.small, body.touch-ui .btn.big,
body.touch-ui .btn.icon-btn, body.touch-ui .btn.act, body.touch-ui .tab, body.touch-ui .sel-card, body.touch-ui .train-item,
body.touch-ui #stage input:not([type="checkbox"]):not([type="radio"]), body.touch-ui #stage select, body.touch-ui #stage textarea {
  min-height: max(82px, var(--touch-target)); min-width: var(--touch-target);
}
body.touch-ui .btn, body.touch-ui .tab, body.touch-ui .support-item { font-size: max(30px, var(--touch-font)); flex-shrink: 0; }
body.touch-ui #stage input, body.touch-ui #stage select, body.touch-ui #stage textarea { font-size: max(30px, var(--touch-font)); }
body.touch-ui input[type="range"] { touch-action: none; }
body.touch-ui .topbar { height: var(--touch-topbar); gap: 10px; }
body.touch-ui .tb-goal { min-width: 0; font-size: max(26px, calc(var(--touch-font) * .875)); }
body.touch-ui .tb-rival { display: none; }
body.touch-ui .topbar .icon-btn { min-width: var(--touch-target); min-height: var(--touch-target); }
body.touch-ui .home-left, body.touch-ui .train-left, body.touch-ui .talk-left,
body.touch-ui .paddock-left, body.touch-ui .status-left { top: var(--touch-topbar); }
body.touch-ui .home-actions, body.touch-ui .home-status { top: calc(var(--touch-topbar) + 22px); }
body.touch-ui .home-status { bottom: 24px; max-height: none; }
body.touch-ui .home-portrait { left: 30px; height: 690px; }
body.touch-ui .home-speech { left: 24px; top: 16px; max-width: 620px; font-size: max(30px, calc(var(--touch-font) * .875)); }
body.touch-ui .home-sub .btn { font-size: max(28px, var(--touch-font)); }
body.touch-ui .sel-secondary { display: none; }
body.touch-ui .sel-more { display: block; width: 100%; }
body.touch-ui .sel-actions { flex-direction: column; align-items: stretch; }
body.touch-ui .home-actions { scrollbar-gutter: stable; padding: 0 8px 10px 0; }
body.touch-ui .stat-row { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui .train-right { top: calc(var(--touch-topbar) + 16px); }
body.touch-ui .train-list { min-height: 0; padding-bottom: 8px; }
body.touch-ui .train-item { min-height: max(110px, var(--touch-target)); }
body.touch-ui .td-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.touch-ui .td-gain { font-size: max(26px, calc(var(--touch-font) * .875)); }
body.touch-ui .td-desc, body.touch-ui .td-meta, body.touch-ui .td-warn,
body.touch-ui .talk-item small { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui .talk-menu { top: calc(var(--touch-topbar) + 16px); }
body.touch-ui .talk-menu > .btn:last-child { box-shadow: 0 -6px 12px #3a2a2033, 0 3px 0 #b8935a; }
body.touch-ui .status-left { display: none; }
body.touch-ui .status-grid { left: 24px; top: calc(var(--touch-topbar) + 16px); bottom: calc(var(--touch-target) + 50px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; align-items: start; }
body.touch-ui .status-grid .panel { overflow: visible; min-width: 0; }
body.touch-ui .status-grid .panel:last-child { grid-column: 1 / -1; }
body.touch-ui .status-back { bottom: 24px; }
body.touch-ui .collection-sidebar, body.touch-ui .online-sidebar { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui .collection-sidebar > *, body.touch-ui .online-sidebar > * { flex-shrink: 0; }
body.touch-ui .collection-detail, body.touch-ui .online-content { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui .collection-entry small, body.touch-ui .hint { font-size: max(26px, calc(var(--touch-font) * .8)); }
body.touch-ui .online-field { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); }
body.touch-ui .online-field > input, body.touch-ui .online-field > select { width: 100%; min-width: 0; }
body.touch-ui .online-nav .btn:last-child { position: sticky; bottom: 0; z-index: 2; }
body.touch-ui .online-race-card { overflow-wrap: anywhere; }
body.touch-ui .online-race-card .btn { max-width: 100%; }
body.touch-ui .online-table { table-layout: fixed; }
body.touch-ui .online-table td, body.touch-ui .online-table th { overflow-wrap: anywhere; }
body.touch-ui .modal { font-size: max(30px, var(--touch-font)); }
body.touch-ui .modal p { font-size: inherit; }

/* The card collection gets the whole panel instead of a tiny second column. */
body.touch-ui .gacha-header { top: 16px; height: max(96px, var(--touch-target)); gap: 18px; }
body.touch-ui .gacha-header > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.touch-ui .gacha-wallet { font-size: max(26px, calc(var(--touch-font) * .875)); }
body.touch-ui .gacha-mobile-tabs { position: absolute; display: flex; gap: 16px; top: 16px; left: 24px; width: 720px; }
body.touch-ui .gacha-mobile-tabs .btn { flex: 1; }
body.touch-ui .gacha-layout { top: calc(var(--touch-target) + 48px); grid-template-columns: minmax(0, 1fr); }
body.touch-ui .screen-gacha[data-gacha-view="draw"] .gacha-side,
body.touch-ui .screen-gacha[data-gacha-view="deck"] .gacha-main { display: none; }
body.touch-ui .gacha-banner { height: 170px; }
body.touch-ui .gacha-banner > img { height: 280px; }
body.touch-ui .gacha-banner > div { top: 14px; left: 30%; }
body.touch-ui .gacha-banner h2 { font-size: max(32px, calc(var(--touch-font) * .875)); margin: 5px 0; }
body.touch-ui .gacha-banner small, body.touch-ui .gacha-banner p { display: none; }
body.touch-ui .gacha-pulls .btn { font-size: max(28px, var(--touch-font)); }
body.touch-ui .gacha-result-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.touch-ui .support-deck .hint { display: none; }
body.touch-ui .support-slot { height: max(100px, var(--touch-target)); }
body.touch-ui .gacha-side > .tabs { margin-top: 12px; }
body.touch-ui .gacha-side .tab { min-height: var(--touch-target); font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui .support-item b { font-size: max(30px, var(--touch-font)); }
body.touch-ui .support-item small, body.touch-ui .support-slot small { font-size: max(26px, calc(var(--touch-font) * .875)); }
body.touch-ui .support-item > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; }
body.touch-ui .support-item b { margin-left: 0; }
body.touch-ui .support-item small { margin-top: 0; }
body.touch-ui .support-slot.empty { font-size: max(26px, calc(var(--touch-font) * .875)); }
body.touch-ui .support-collection { padding-bottom: 10px; }

/* This editor lives outside the scaled/rotated game, including above a keyboard. */
.touch-editor { position: fixed; inset: 0; z-index: 200; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: center; background: #181020dd; color: var(--ink); }
.touch-editor-panel { width: 100%; max-width: 540px; max-height: 100%; overflow: auto; background: var(--cream); border: 2px solid var(--gold); border-radius: 14px; padding: 20px; font-size: 16px; }
.touch-editor-panel label { display: flex; flex-direction: column; gap: 14px; font-weight: 700; }
.touch-editor-panel input, .touch-editor-panel select, .touch-editor-panel textarea { width: 100%; min-width: 0; min-height: 48px; padding: 10px; font: 16px var(--sans); border: 1px solid var(--gold); border-radius: 8px; user-select: text; }
.touch-editor-actions { display: flex; gap: 12px; margin-top: 20px; }
.touch-editor-actions button { flex: 1; min-width: 0; min-height: 48px; border: 1px solid var(--gold); border-radius: 8px; background: #f3e6c9; color: var(--ink); font: 700 16px var(--sans); }
.touch-editor-actions button[type="submit"] { background: #23364f; color: #fff; }

/* Academy palette: navy actions, parchment navigation, original line icons. */
.ui-icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em; flex-shrink: 0; }
.setting-label { display: flex; align-items: center; gap: 8px; }
.settings-btn { flex-shrink: 0; }
.btn:focus-visible, .tab:focus-visible, summary:focus-visible { outline: 3px solid #2a649c; outline-offset: 4px; }
.btn.primary.big { min-height: 60px; font-size: 24px; }
.btn.act.primary small { color: #e5e8ed; }
.home-sub { border-top: 1px solid var(--gold-soft); padding-top: 14px; }
.home-sub .btn, .sel-secondary .btn, .sel-more, .modal-close { background: #fffaf0; border-color: #d8c8a8; box-shadow: 0 2px 0 #c4b28e; }
.sel-actions > .primary { width: 100%; }
.sel-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sel-secondary .btn { font-size: 16px; }
.info-disclosure { margin: 12px 0; border: 1px solid var(--gold-soft); border-radius: 8px; padding: 0 12px; }
.info-disclosure summary { padding: 12px 0; cursor: pointer; font-size: 17px; font-weight: 700; }
.info-disclosure[open] summary { border-bottom: 1px solid var(--gold-soft); margin-bottom: 12px; }
.setting { grid-template-columns: 160px minmax(0, 1fr); }
.setting select { font: inherit; color: var(--ink); padding: 10px; border: 1px solid var(--gold); background: #fff; border-radius: 8px; }
/* Increase small labels first; keep scrollable information separate from actions. */
body:not(.compact) .hint, body:not(.compact) .profile-text, body:not(.compact) .profile,
body:not(.compact) .growth .base, body:not(.compact) .apt-table th,
body:not(.compact) .hs-row, body:not(.compact) .hs-tier,
body:not(.compact) .td-meta, body:not(.compact) .td-gain,
body:not(.compact) .talk-item small, body:not(.compact) .support-item small,
body:not(.compact) .support-slot small, body:not(.compact) .collection-entry small { font-size: 16px; }
body:not(.compact) .sel-name, body:not(.compact) .home-sub .btn { font-size: 17px; }
body:not(.compact) .tb-remain, body:not(.compact) .ti-fail, body:not(.compact) .ti-lv { font-size: 14px; }
body.compact .info-disclosure summary { font-size: 28px; }
body.touch-ui #stage summary { min-height: var(--touch-target); display: list-item; font-size: max(28px, var(--touch-font)); }
body.touch-ui .sel-secondary { display: none; }
body.touch-ui .setting { grid-template-columns: 250px minmax(0, 1fr); }
body.touch-ui .btn.primary.big { min-height: calc(var(--touch-target) * 1.27); font-size: max(32px, calc(var(--touch-font) * 1.125)); }
body.touch-ui .ti-name, body.touch-ui .sel-name, body.touch-ui .apt-table th,
body.touch-ui .growth-row, body.touch-ui .growth .base, body.touch-ui .profile,
body.touch-ui .profile small, body.touch-ui .profile-text, body.touch-ui .hs-row,
body.touch-ui .hs-tier, body.touch-ui .hs-name .gen, body.touch-ui .ti-lv,
body.touch-ui .ti-fail, body.touch-ui .fav, body.touch-ui .tb-remain,
body.touch-ui .support-reveal-info, body.touch-ui .support-reveal-info b,
body.touch-ui .support-rarity { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.text-large #stage .hint, body.text-large #stage .profile, body.text-large #stage .profile small,
body.text-large #stage .profile-text, body.text-large #stage .growth-row, body.text-large #stage .growth .base,
body.text-large #stage .stat-row, body.text-large #stage .hs-row, body.text-large #stage .hs-tier,
body.text-large #stage .hs-name .gen, body.text-large #stage .sel-name, body.text-large #stage .apt-table th,
body.text-large #stage .tb-remain, body.text-large #stage .ti-name, body.text-large #stage .ti-fail,
body.text-large #stage .ti-lv, body.text-large #stage .talk-item small, body.text-large #stage .td-meta,
body.text-large #stage .td-desc, body.text-large #stage .td-warn, body.text-large #stage .td-gain,
body.text-large #stage .support-item small, body.text-large #stage .support-slot small,
body.text-large #stage .support-reveal-info, body.text-large #stage .support-reveal-info b,
body.text-large #stage .collection-entry small, body.text-large #stage .skill-list,
body.text-large #stage .goal-list, body.text-large #stage .result-list, body.text-large #stage .online-content,
body.text-large #stage .info-disclosure summary { font-size: max(18px, var(--read-font)); }
body.text-large #stage .btn { font-size: max(24px, var(--read-font)); }
body.text-large #stage .dlg-text { font-size: max(34px, var(--read-font)); }
body.touch-ui .gacha-banner b, body.touch-ui .gacha-pity,
body.touch-ui .gacha-empty p { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui .gacha-empty > b { font-size: max(30px, var(--touch-font)); }
body.text-large #stage .gacha-pity, body.text-large #stage .gacha-banner b { font-size: max(28px, var(--read-font)); }
body.touch-ui .panel-title, body.touch-ui .gacha-result-title { font-size: max(30px, var(--touch-font)); }
body.touch-ui .stat-row { grid-template-columns: minmax(0, 1fr) 60px 100px; }
body.touch-ui .stat-row .bar { grid-column: 1 / -1; grid-row: 2; }
body.touch-ui .stat-row .stat-val { grid-column: 3; grid-row: 1; }
body.touch-ui .hs-row { grid-template-columns: minmax(0, 1fr) auto; }
body.touch-ui .hs-row .bar { grid-column: 1 / -1; grid-row: 2; }
body.touch-ui .hs-row .val { grid-column: 2; grid-row: 1; }
body.touch-ui .btn.act small { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui.text-large .btn.act small { font-size: max(28px, var(--read-font)); }
body.touch-ui .tb-year, body.touch-ui .tb-gold, body.touch-ui .tb-goal-label,
body.touch-ui .btn.act small { font-size: max(28px, calc(var(--touch-font) * .875)); }
body.touch-ui.text-large .tb-goal, body.touch-ui.text-large .tb-year,
body.touch-ui.text-large .tb-gold { font-size: max(30px, var(--touch-font)); }
body.touch-ui.text-large { --touch-topbar: max(160px, calc(var(--touch-target) + 40px)); }
body.touch-ui.text-large .td-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.touch-ui.text-large .gacha-layout { top: calc(var(--touch-target) * 1.64 + 48px); }
body.text-large #stage .apt, body.text-large #stage .stat-rank { font-size: max(18px, var(--read-font)); }
body.touch-ui #stage .btn.primary.big { min-height: calc(var(--touch-target) * 1.27); }
body.touch-ui.text-large .sel-info .apt-table th { white-space: normal; overflow-wrap: anywhere; }
body.touch-ui .support-slot > span { display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; width: 100%; }
body.touch-ui .support-slot > span > img { grid-column: 1; grid-row: 1 / 3; width: 60px; height: 60px; margin: 0; }
body.touch-ui .support-slot > span > b, body.touch-ui .support-slot > span > small { grid-column: 2; margin: 0; }
body.touch-ui .support-slot { padding: 4px 12px; }
body.touch-ui.text-large .support-slot { height: calc(var(--touch-target) * 1.35); }

/* Typography polish: readable body copy, quiet labels, deliberate headings. */
#stage { --type-label: 14px; --type-body: 16px; --type-title: 22px; --type-action: 18px; }
body.text-large #stage { --type-label: 16px; --type-body: 18px; --type-title: 24px; --type-action: 20px; }
body.compact #stage {
  --type-label: calc(var(--touch-font) * .875); --type-body: var(--touch-font);
  --type-title: calc(var(--touch-font) * 1.25); --type-action: var(--touch-font);
}
body.compact.text-large #stage {
  --type-label: var(--touch-font); --type-body: var(--read-font);
  --type-title: calc(var(--touch-font) * 1.375); --type-action: calc(var(--touch-font) * 1.125);
}
.panel { background: #fffcf5f5; border: 1px solid #d6c4a0; border-radius: 16px; box-shadow: 0 12px 32px #221b1638; }
.panel-title { color: #57412c; background: none; border-bottom: 1px solid #dbcba9; font-size: var(--type-title); font-weight: 600; line-height: 1.4; }
.panel-title .ribbon { height: .9em; width: 3px; }
body.compact .panel-title, body.touch-ui .panel-title { font-size: var(--type-title); }
.btn { font-weight: 600; border-width: 1px; border-radius: 9px; box-shadow: 0 2px 0 #ab906b, 0 4px 10px #31251518; }
.btn.primary { background: linear-gradient(145deg, #364c68, #23364f); box-shadow: 0 3px 0 #152538, 0 5px 12px #20304733; }
body.text-large #stage .btn { font-size: var(--type-action); }
body.text-large #stage .btn.primary.big { font-size: var(--type-title); }
body.text-large #stage .hint, body.text-large #stage .profile-text,
body.text-large #stage .profile small, body.text-large #stage .growth .base,
body.text-large #stage .ti-lv, body.text-large #stage .ti-fail,
body.text-large #stage .td-meta, body.text-large #stage .support-item small,
body.text-large #stage .support-slot small, body.text-large #stage .collection-entry small,
body.text-large #stage .talk-item small, body.text-large #stage .hs-name .gen,
body.text-large #stage .hs-tier { font-size: var(--type-label); font-weight: 500; line-height: 1.5; }
body.text-large #stage .profile, body.text-large #stage .stat-row,
body.text-large #stage .hs-row, body.text-large #stage .td-desc,
body.text-large #stage .td-warn, body.text-large #stage .online-content,
body.text-large #stage .skill-list, body.text-large #stage .goal-list,
body.text-large #stage .result-list { font-size: var(--type-body); }
body.text-large #stage .info-disclosure summary { font-size: var(--type-label); }
body.text-large #stage .apt-table th, body.text-large #stage .growth-row,
body.text-large #stage .ti-name, body.text-large #stage .td-gain { font-size: var(--type-label); }
.info-disclosure { background: #f5f0e6; border: 0; border-radius: 8px; }
.info-disclosure summary { font-weight: 600; }
.profile dd, .profile-text { line-height: 1.7; }
.tb-gold { display: flex; gap: 12px; flex-wrap: wrap; }
.mode-picker { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 6px 12px; }
.mode-description { grid-column: 1 / -1; color: var(--ink-soft); font-size: var(--type-label); font-weight: 400; }
.sel-card { background: #fffaf0; border-width: 1px; box-shadow: 0 2px 6px #30231314; }
.sel-card.on { border-color: #465c77; box-shadow: 0 0 0 2px #465c7755; }
.sel-card img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
.sel-name, body:not(.compact) .sel-name, body.compact .sel-name,
body.text-large #stage .sel-name {
  position: static; display: block; padding: 6px 2px; font-size: var(--type-label);
  font-weight: 600; line-height: 1.4; color: #4a3a2c; background: #fffaf0; white-space: nowrap;
}
#stage .sel-card.on .sel-name { background: #344b65; color: #fffaf0; }
.sel-nameplate { background: #282b30d9; border-radius: 6px; box-shadow: 0 4px 12px #0002; }
.home-sub .btn, .sel-secondary .btn, .sel-more { font-weight: 500; }
body.text-large #stage .home-sub .btn { font-size: var(--type-label); }

/* Rebalance the scene around the larger type without shrinking touch targets. */
body.touch-ui .sel-left { width: 480px; }
body.touch-ui .sel-right { width: 620px; }
body.touch-ui .sel-stage { left: 504px; width: 452px; }
body.touch-ui .sel-portrait { height: 760px; }
body.touch-ui .sel-stage .speech { left: 12px; top: 24px; max-width: 420px; max-height: 190px; overflow: auto; padding: 14px 18px; font-size: calc(var(--touch-font) * .875); line-height: 1.5; }
body.touch-ui .sel-nameplate { left: 12px; right: 12px; bottom: 30px; padding: 12px 18px; }
body.touch-ui .np-name { font-size: var(--type-action); line-height: 1.5; }
.np-part { display: inline-block; }
body.touch-ui .np-part { display: block; }
body.touch-ui .np-part + .np-part { font-size: var(--type-label); }
body.touch-ui .np-type { font-size: calc(var(--type-label) * .85); }
body.touch-ui .sel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 14px; }
body.touch-ui #stage .sel-name { font-size: min(var(--type-label), 39px); overflow: hidden; text-overflow: ellipsis; }
body.touch-ui .sel-left .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.touch-ui .sel-left .tab { min-width: 0; padding: 8px 0; font-size: var(--type-label); }
body.touch-ui .ranch-mini { font-size: calc(var(--type-label) * .85); font-weight: 500; line-height: 1.6; }
body.touch-ui .sel-info { padding-right: 10px; }
body.touch-ui .sel-info .apt-table tr { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px; gap: 8px; }
body.touch-ui .sel-info .apt-table th { font-size: var(--type-label); font-weight: 500; padding: 6px 0; white-space: normal; }
body.touch-ui .sel-info .apt-table td { padding: 6px 0; }
body.touch-ui #stage .apt { font-size: var(--type-label); min-width: 44px; font-family: var(--sans); font-weight: 700; }
body.touch-ui .growth-row { grid-template-columns: minmax(0, 1fr) 150px 165px; gap: 8px; padding: 6px 0; font-size: var(--type-label); }
body.touch-ui .stars { font-size: min(calc(var(--type-label) * .8), 30px); letter-spacing: 0; }
body.touch-ui #stage .growth .base { font-size: calc(var(--type-label) * .85); }
body.touch-ui .mode-picker { grid-template-columns: 140px minmax(0, 1fr); gap: 6px 14px; font-size: var(--type-label); padding: 12px 0; }
body.touch-ui #stage .mode-picker select { font-size: var(--type-action); }
body.touch-ui .sel-actions { padding-top: 14px; gap: 12px; }
body.touch-ui .home-status { left: 680px; width: 480px; }
body.touch-ui .home-actions { width: 396px; }
body.touch-ui .home-actions .btn.act { padding: 16px 20px; }
body.touch-ui #stage .home-actions .btn.act { font-size: var(--type-action); }
body.touch-ui #stage .home-actions .btn.act small { font-size: calc(var(--type-label) * .9); font-weight: 400; line-height: 1.4; margin-top: 5px; }
body.touch-ui .hs-name { font: 600 var(--type-action)/1.5 var(--serif); margin-bottom: 20px; }
body.touch-ui .hs-name .gen { font-size: calc(var(--type-label) * .85); font-weight: 500; margin-bottom: 4px; }
body.touch-ui .hs-row { margin: 16px 0; }
body.touch-ui .hs-row .lbl, body.touch-ui .stat-name { font-weight: 500; }
body.touch-ui .bar { height: 10px; box-shadow: none; background: #e8e1d4; }
body.touch-ui .stat-rows { gap: 14px; }
body.touch-ui #stage .stat-rank { font: 600 var(--type-label)/1.3 var(--sans); border-radius: 4px; }
body.touch-ui .home-sub { padding-top: 16px; gap: 12px; }
body.touch-ui .tb-date { flex: 0 1 360px; min-width: 0; }
body.touch-ui .tb-year, body.touch-ui.text-large .tb-year,
body.touch-ui #stage .tb-remain { font-size: var(--type-label); font-weight: 500; line-height: 1.4; }
body.touch-ui .tb-year, body.touch-ui.text-large .tb-year { font-size: calc(var(--touch-font) * .875); line-height: 1.3; }
body.touch-ui #stage .tb-remain { font-size: calc(var(--touch-font) * .875); line-height: 1.3; }
body.touch-ui .tb-goal, body.touch-ui.text-large .tb-goal { display: grid; grid-template-columns: auto auto minmax(0, 1fr); font-size: calc(var(--type-label) * .9); gap: 4px 10px; line-height: 1.4; }
body.touch-ui .tb-goal > span:nth-child(3) { grid-column: 1 / -1; grid-row: 2; font-weight: 500; }
body.touch-ui .tb-goal-left { grid-column: 3; grid-row: 1; text-align: right; }
body.touch-ui .tb-goal-label { font-size: calc(var(--type-label) * .8); font-weight: 600; }
body.touch-ui .tb-gold, body.touch-ui.text-large .tb-gold { flex: 0 1 230px; min-width: 0; font-size: calc(var(--type-label) * .85); line-height: 1.5; gap: 0; }
body.touch-ui .tb-gold > span { width: 100%; }
body.touch-ui, body.touch-ui.text-large { --touch-topbar: calc(var(--touch-target) * 1.45); }
body.touch-ui #stage .settings-btn { font-size: var(--type-label); }
body.touch-ui #stage .panel { scrollbar-width: thin; scrollbar-color: #b7a17d transparent; }
body.touch-ui #stage .gacha-side .support-item { font-size: var(--type-body); }
body.touch-ui #stage .support-item b, body.touch-ui #stage .support-rarity { font-size: var(--type-label); font-weight: 600; }
body.touch-ui #stage .support-item small { font-size: calc(var(--type-label) * .9); font-weight: 400; }
body.touch-ui #stage .support-slot small { font-size: var(--type-label); font-weight: 500; }
body.touch-ui #stage .gacha-banner b, body.touch-ui #stage .gacha-pity { font-size: var(--type-label); }
body.touch-ui #stage .gacha-side .tab { font-size: var(--type-label); }
body.touch-ui.text-large .gacha-layout { top: calc(var(--touch-target) + 48px); }
body.touch-ui .train-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
body.touch-ui .train-item .ti-name { grid-column: 2 / -1; }

/* Athlete friendships: two portraits, a clear main action, and a scrollable roster. */
.bonds-shell { position: absolute; inset: 24px; display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 24px; }
.bonds-shell > .panel { position: relative; min-width: 0; min-height: 0; }
.bonds-sidebar { display: flex; flex-direction: column; gap: 12px; }
.bonds-subject { font-size: var(--type-body); margin: 0; }
.bonds-list { overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 3px; }
.bonds-list .btn { flex-shrink: 0; text-align: left; padding: 10px; }
.bonds-entry { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.bonds-entry img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #eee6d6; }
.bonds-entry b, .bonds-entry small { display: block; overflow-wrap: anywhere; }
.bonds-entry b { font-size: var(--type-body); }
.bonds-entry small { font-size: var(--type-label); color: var(--ink-soft); }
.bonds-main { overflow: auto; }
.bonds-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); gap: 24px; height: 100%; }
.bonds-pictures { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 16px; background: linear-gradient(#f5eddd, #e9e2d2); border-radius: 12px; padding: 16px; }
.bonds-pictures > div { min-width: 0; text-align: center; }
.bonds-pictures .portrait { position: relative; height: 470px; width: 100%; }
.bonds-pictures .portrait-img { height: 100%; max-width: 100%; object-fit: contain; }
.bonds-pictures b { display: block; font-size: var(--type-action); overflow-wrap: anywhere; }
.bonds-content { min-width: 0; font-size: var(--type-body); }
.bonds-content p { line-height: 1.65; }
.bonds-affinity { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 8px; }
.bonds-actions { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.bonds-actions .btn { white-space: normal; }
.bonds-content .hint { font-size: var(--type-label); }
.peer-family-confirm { width: 100%; font-size: var(--type-body); line-height: 1.65; }
.peer-family-confirm blockquote { margin: 12px 0; border-left: 3px solid #b8a17c; padding-left: 16px; }
.event-portrait.researcher { width: 400px; }
.sel-name { overflow: hidden; text-overflow: ellipsis; }
body.compact .bonds-shell { grid-template-columns: 440px minmax(0, 1fr); gap: 20px; }
body.compact .bonds-detail { display: block; height: auto; }
body.compact .bonds-pictures { height: 290px; margin-bottom: 20px; }
body.compact .bonds-pictures .portrait { height: 220px; }
body.compact .bonds-entry { grid-template-columns: 76px minmax(0, 1fr); }
body.compact .bonds-entry img { width: 76px; height: 76px; }
body.compact .bonds-actions { display: grid; grid-template-columns: 1fr 1fr; }
body.compact .bonds-actions .primary { grid-column: 1 / -1; }
body.compact .bonds-actions .btn:last-child { grid-column: 1 / -1; }
body.touch-ui .bonds-shell .btn { font-size: var(--type-action); }
body.touch-ui .peer-family-confirm { font-size: var(--type-body); }
body.touch-ui #stage .dlg-text { font-size: var(--type-body); max-height: 280px; overflow: auto; }
body.touch-ui #stage .dlg-name { font-size: var(--type-body); }
body.touch-ui .dlg-choices { bottom: calc(100% + 18px); max-height: 480px; }
body.touch-ui #stage .btn.choice { font-size: var(--type-action); white-space: normal; }
.research-notes { background: #fffaf2; border: 1px solid #c8b58e; border-radius: 9px; color: #4a3a2c; font-size: var(--type-body); }
.research-notes summary { cursor: pointer; padding: 12px 18px; font-weight: 600; }
.research-notes > div { padding: 0 18px 12px; }
.research-notes p { margin: 10px 0; line-height: 1.55; }
.research-result { display: inline-block; margin-left: 18px; color: #ffe7a2; font-size: var(--type-action); }
body.touch-ui .research-notes summary { min-height: var(--touch-target); padding: 18px; }
body.touch-ui .dlg-choices:has(.research-notes) { max-height: 550px; }

/* Keep speech below the face, even with large type and wide-tailed portraits. */
.sel-caption { display: contents; }
#stage .sel-caption .sel-nameplate { left: 12px; right: 12px; bottom: 24px; padding: 10px 18px; }
#stage .sel-caption .speech { left: 12px; right: 12px; top: 24px; max-width: none; max-height: 250px; overflow: auto; font-size: var(--type-label); line-height: 1.5; }
body.compact .sel-portrait { height: 600px; }
#stage .home-speech, #stage .train-speech, #stage .paddock-speech {
  top: auto; bottom: 28px; left: 24px; max-height: 230px; overflow: auto; font-size: var(--type-body); line-height: 1.5;
}
#stage .home-speech { max-width: 620px; }
#stage .train-speech { max-width: 560px; }
#stage .paddock-speech { max-width: 380px; }
.home-speech::after { display: none; }
/* Choices share rows beneath the portraits; expanded notes scroll in this area. */
#stage .dlg-choices {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  left: 24px; right: 24px; bottom: calc(100% + 18px); max-height: 340px; overflow: auto; padding: 6px 6px 10px;
}
#stage .dlg-choices:empty { display: none; }
#stage .dlg-choices:has(.research-notes) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#stage .dlg-choices .choice { min-width: 0; width: 100%; }
.dlg-choices .research-notes { grid-column: 1 / -1; }
body.touch-ui .train-item .fav { grid-column: 2; grid-row: 3; font-size: calc(var(--type-label) * .9); }
body.touch-ui .train-item .ti-lv { grid-column: 3; grid-row: 2; }
body.touch-ui .train-item .ti-fail { grid-column: 2; grid-row: 2; }
body.touch-ui .ti-name { font-size: var(--type-label); font-weight: 600; }

/* Bounded rosters: newly added contestants and later generations. */
.title-cast { left: 650px; right: 24px; bottom: 0; height: 540px; gap: 8px; overflow: hidden; }
.title-cast img { margin: 0; width: calc((100% - 16px) / 3); height: 100%; min-width: 0; object-fit: contain; object-position: center bottom; }
.title-cast-controls { position: absolute; left: 660px; right: 40px; top: 260px; display: flex; justify-content: flex-end; align-items: center; gap: 20px; color: #fff; text-shadow: 0 2px 4px #000; z-index: 5; font-size: var(--type-label); }
.title-cast-controls .btn { font-size: var(--type-label); }
.sel-left { display: flex; flex-direction: column; }
.sel-left > :not(.sel-grid), .collection-sidebar > :not(.collection-list), .bonds-sidebar > :not(.bonds-list) { flex-shrink: 0; }
#stage .sel-grid { flex: 1; min-height: 0; max-height: none; }
#stage .ranch-mini { position: static; margin-top: 12px; font-size: var(--type-label); }
.roster-search { width: 100%; min-width: 0; margin: 4px 0 10px; padding: 10px 12px; font: inherit; font-size: var(--type-label); color: var(--ink); background: #fffaf0; border: 1px solid var(--gold); border-radius: 8px; }
.roster-count { font-size: var(--type-label); color: var(--ink-soft); margin-bottom: 8px; }
.roster-empty { grid-column: 1 / -1; font-size: var(--type-body); line-height: 1.6; }
.sel-distance { display: none; }
#stage .sel-card { padding: 0; font-family: var(--sans); text-align: center; align-self: start; }
#stage .sel-name { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.sel-stage { left: 560px; width: 492px; overflow: hidden; }
#stage .sel-portrait { width: 100%; }
#stage .sel-portrait .portrait-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
#stage .collection-list { min-height: 0; }
.collection-entry img { flex-shrink: 0; }
.collection-entry > span { min-width: 0; overflow-wrap: anywhere; }
.collection-info > h2, .collection-info .btn { overflow-wrap: anywhere; white-space: normal; }
.collection-portrait .portrait { width: 100%; }
.collection-portrait .portrait-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
body.touch-ui .sel-left .tabs { display: none; }
body.touch-ui .sel-distance { display: block; width: 100%; font: inherit; font-size: var(--type-label); padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--gold); border-radius: 8px; background: #fffaf0; }
body.touch-ui .sel-grid { grid-template-columns: 1fr; gap: 12px; }
body.touch-ui #stage .sel-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: 120px; text-align: left; }
body.touch-ui #stage .sel-card img { height: 112px; aspect-ratio: auto; object-fit: cover; }
body.touch-ui #stage .sel-name { padding: 10px 14px; font-size: var(--type-label); }
body.touch-ui .sel-card .gen-badge { top: auto; bottom: 0; font-size: 22px; }
body.touch-ui .sel-stage { left: 512px; width: 432px; }
body.compact .title-cast-controls .btn { min-height: 76px; }
#stage .sel-grid { grid-auto-rows: max-content; }
body.touch-ui #stage .sel-card { min-height: max(120px, var(--touch-target)); }
body.compact .collection-sidebar { width: 520px; overflow: hidden; }
body.compact .collection-detail { left: 568px; }
body.compact .collection-sidebar .hint { margin: 8px 0; }
body.compact .collection-sidebar > .row { display: grid; grid-template-columns: 1fr 1fr; }
body.compact .collection-sidebar .btn { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: var(--type-label); }
body.compact .collection-entry { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
body.compact .collection-entry small { font-size: var(--type-label); }
body.compact .collection-portrait { width: 260px; }
body.compact .collection-info { margin-left: 260px; }
body.compact .bonds-shell { grid-template-columns: 520px minmax(0, 1fr); }
body.compact .bonds-subject { font-size: var(--type-label); }
.tree-card > div { min-width: 0; overflow-wrap: anywhere; }
.collection-register { position: relative; z-index: 2; }
body.text-large #stage .sel-name, body.touch-ui #stage .sel-name { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }