.training-entry { margin: 10px 0 0; padding: 9px 18px; border: 1px solid #d7ad57; border-radius: 6px; color: #ffe4a6; background: #292033; cursor: pointer; font: inherit; }
.growth-status { color: #ecd79c; background: #191522; border-top: 1px solid #473851; padding: 9px 12px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.growth-overlay { position: fixed; inset: 0; z-index: 12000; background: #080710df; display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; }
.growth-panel { width: min(640px, 100%); max-height: 88dvh; overflow: auto; box-sizing: border-box; padding: 24px; border: 1px solid #947545; border-radius: 14px; background: linear-gradient(150deg, #282036, #15121f); color: #f3e8d7; box-shadow: 0 18px 70px #0009; font-family: sans-serif; }
.growth-panel h2 { font-size: 23px; margin: 0 0 12px; color: #ffe2a3; }
.growth-muted { font-size: 13px; line-height: 1.7; color: #c7bfd3; }
.growth-balance { font-size: 21px; font-weight: bold; color: #ffd680; }
.growth-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.growth-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 195px; padding: 18px 14px; text-align: left; background: #33273d; border: 1px solid #78624c; border-radius: 10px; color: #fff1d7; cursor: pointer; font-size: 13px; line-height: 1.7; }
.growth-card:hover { background: #48344d; border-color: #ffd680; }
.growth-card strong { font-size: 17px; }
.growth-icon { font-size: 28px; }
.growth-panel button:focus-visible, .training-entry:focus-visible { outline: 3px solid #ffe6a6; outline-offset: 3px; }
.training-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid #4b3d56; }
.training-row strong { font-size: 16px; }
.training-row p { font-size: 13px; line-height: 1.7; margin: 7px 0 0; color: #ccc4d5; }
.growth-buy, .growth-close { min-height: 44px; padding: 10px 14px; border-radius: 7px; border: 1px solid #be9a60; background: #574029; color: #fff0cb; cursor: pointer; font: inherit; font-size: 13px; flex-shrink: 0; }
.growth-buy:disabled { background: #28232d; color: #b0a5b5; border-color: #554b60; cursor: default; }
.growth-close { margin-top: 12px; width: 100%; background: #332b41; }
.growth-summary { padding: 14px; margin: 16px 0; border: 1px solid #806749; border-radius: 8px; background: #221b2e; color: #f7dfad; font-family: sans-serif; font-size: 14px; line-height: 1.6; }
.growth-summary p { margin: 8px 0; }
.continue-modal-content { max-height: 88dvh; overflow-y: auto; }
@media (max-width: 520px) {
    .growth-panel { padding: 18px; }
    .growth-panel h2 { font-size: 20px; }
    .growth-cards { grid-template-columns: 1fr; gap: 9px; }
    .growth-card { min-height: 0; gap: 5px; padding: 12px 14px; }
    .growth-icon { font-size: 20px; }
    .training-row { align-items: flex-start; flex-direction: column; gap: 10px; }
    .training-row .growth-buy { width: 100%; }
    .training-entry { margin-top: 5px; padding: 7px 14px; }
}
/* The title contents must stay reachable on narrow screens too. */
@media (max-width: 520px) {
    .game-display:has(.title-screen:not(.hidden)) { min-height: 340px; }
    .title-screen { box-sizing: border-box; padding: 12px; overflow-y: auto; }
    .title-screen > * { flex-shrink: 0; }
    .title-logo { font-size: 18px; }
    .title-sub { margin-bottom: 8px; }
    .daily-mission-box { margin: 8px auto; padding: 8px 16px; }
    .title-legend { margin-top: 10px; }
}
/* Growth decisions stay above the shared score toast; scores still submit normally. */
#gameOverModal, .ending-overlay { z-index: 11000; }
.ending-content { max-height: 88dvh; overflow-y: auto; padding: 20px; box-sizing: border-box; }
.collection-bar { padding: 8px 12px; border-top: 1px solid #473851; }
.collection-bar button { margin: 3px; font-size: 12px; }
.collection-bar button:disabled { opacity: .6; cursor: default; }
.collection-bar button[hidden] { display: none; }
.codex-entry { padding: 12px 0; border-bottom: 1px solid #655271; line-height: 1.6; font-size: 13px; }
.codex-entry p { margin: 5px 0; }
.codex-entry small { display: block; color: #d0bfdc; margin-bottom: 8px; }
.rune-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:min(290px,100%); margin:20px auto; }
.rune-cell { aspect-ratio:1; min-height:58px; border:2px solid #534c70; border-radius:12px; background:#171326; color:#807b99; font-size:32px; cursor:pointer; }
.rune-cell.lit { color:#d5feff; background:#225465; border-color:#80ebef; box-shadow:inset 0 0 18px #65cbd655; }
.rune-cell.rune-hint { outline:4px solid #ffdc76; outline-offset:2px; }
.floor-clear-panel { position:relative; background:radial-gradient(ellipse at top,#66502c 0%,#282036 48%,#15121f 100%); border:2px solid #dfbc67; animation:clear-arrive .65s ease-out; }
.clear-emblem { color:#ffdc79; font-size:64px; text-align:center; text-shadow:0 0 24px #ffbc58; animation:clear-glow 1.5s ease-in-out 2; }
.floor-clear-panel h2,.clear-stats { text-align:center; }
.clear-section { margin:12px 0; padding:10px 12px; background:#11101b80; border-left:3px solid #aa8c55; border-radius:5px; }
.clear-section h3 { color:#eace90; font-size:14px; margin:0 0 8px; }
.clear-section p { font-size:13px; line-height:1.7; margin:0; overflow-wrap:anywhere; }
.clear-next { display:block; width:100%; min-height:46px; }
.expedition-summary { text-align:left; margin:20px auto; max-width:600px; }
.expedition-clear { box-shadow:0 0 60px #ffc75655; animation:clear-arrive .65s ease-out; }
@keyframes clear-arrive { from { opacity:0; transform:translateY(20px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes clear-glow { 50% { transform:scale(1.12); text-shadow:0 0 45px #ffe6ac; } }
@media(prefers-reduced-motion:reduce) { .floor-clear-panel,.clear-emblem,.expedition-clear { animation:none; } }
.combat-cue { padding:6px 9px; margin:5px 0; border-left:3px solid #ff9b58; background:#37241c; color:#ffe4bf; font-size:12px; line-height:1.5; }
.combat-cue[hidden] { display:none; }

.route-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
.route-choice h3,.route-choice>p { grid-column:1/-1; margin:0; }
.route-card { display:flex; flex-direction:column; gap:8px; padding:12px 8px; border:2px solid #655271; border-radius:8px; background:#191525; color:#eadff3; cursor:pointer; font:inherit; text-align:left; overflow-wrap:anywhere; min-width:0; }
.route-card[aria-pressed="true"] { border-color:#ffe08a; background:#463822; box-shadow:inset 0 0 0 1px #ffe08a; }
.route-card:focus-visible { outline:3px solid #85e5ef; outline-offset:3px; }
.route-card strong { font-size:14px; }.route-card span,.route-card small { font-size:12px; line-height:1.5; }
.route-status,.route-trail { padding:6px 10px; color:#eace90; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.route-status[hidden] { display:none; }

.codex-monster { padding:12px; margin:8px 0; border:1px dashed #655271; border-radius:6px; }
.codex-monster[data-discovered="true"] { border-style:solid; border-color:#75ba96; background:#20392b; }
.codex-monster[data-discovered="true"] strong,.codex-monster[data-discovered="true"] .codex-state { color:#b6f1c8; }
.codex-monster .codex-state { margin:4px 0; }