/* Plain UI overrides: content first, no decorative game presentation. */
.screen { padding: clamp(20px, 4vw, 48px); background: #1e1e1e; }
.screen-bg { display: block; opacity: 1; filter: none; }
.screen-bg::after { background: rgba(30, 30, 30, .35); }
.screen::before { display: none !important; }
.mentor-card { position: absolute !important; right: 0; bottom: 0; z-index: 2; display: block; width: 30vw; height: 100%; pointer-events: none; }
.mentor-card img { position: absolute; right: -5%; bottom: -10%; width: min(30vw, 560px); height: auto; max-height: 100%; object-fit: contain; object-position: bottom right; opacity: 1; }
.mentor-card .mentor { position: absolute; right: 0; bottom: 10px; width: min(260px, 100%); margin: 0; padding: 10px 12px; color: var(--muted); border: 1px solid #4a4a4a; background: #252525; font: 12px/1.4 "Funnel Display", sans-serif; }
.mentor-card .mentor b { color: var(--mint); }
.screen::after { display: none; }
.page-header { margin-bottom: 28px; }
.page-header h1, .main-menu-brand h1, .phase-heading h1, .checkpoint-card h1, .reflection-card h1, .score-card h1 { font-size: clamp(28px, 5vw, 54px); }
.page-header h1, .main-menu-brand h1, .phase-heading h1, .checkpoint-card h1, .reflection-card h1, .score-card h1, .concept-detail h2 { font-family: "Funnel Display", sans-serif; }
.panel, .concept-detail, .demo-code, .puzzle-panel, .compiler-panel, .checkpoint-card, .reflection-card, .scenario-card, .answer-card, .analytics-card, .score-card, .phase-nav, .stage-detail { border: 1px solid rgba(87, 242, 164, 0.22); background: rgba(12, 22, 26, 0.92); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 20px rgba(87, 242, 164, 0.03); clip-path: none; }
.button { box-shadow: 0 0 16px rgba(87, 242, 164, 0.35); border: 1px solid #4ade80; background: #4ade80; cursor: pointer; transition: all 160ms ease; }
.button:hover:not(:disabled) { background: #6ee7b7; box-shadow: 0 0 24px rgba(87, 242, 164, 0.65); transform: translateY(-1px); }
.button--ghost { color: var(--text); border: 1px solid rgba(87, 242, 164, 0.35); background: rgba(10, 20, 24, 0.85); box-shadow: 0 0 12px rgba(87, 242, 164, 0.12); }
.button--ghost:hover:not(:disabled) { border-color: var(--mint); color: var(--mint); background: rgba(16, 32, 36, 0.95); box-shadow: 0 0 20px rgba(87, 242, 164, 0.35); }
.button--danger { border-color: var(--danger); background: var(--danger); box-shadow: 0 0 18px rgba(255, 101, 79, 0.45); }
.button--danger:hover:not(:disabled) { box-shadow: 0 0 28px rgba(255, 101, 79, 0.75); }
.card-grid, .mission-grid { gap: 12px; }
.case-card, .guide-rule, .stage, .concept-card, .answer-option, .choice { border: 1px solid rgba(87, 242, 164, 0.2); background: rgba(10, 22, 26, 0.88); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(87, 242, 164, 0.03); clip-path: none; cursor: pointer; transition: all 160ms ease; }
.case-card:hover, .guide-rule:hover, .stage:not(:disabled):hover, .concept-card:hover, .answer-option:hover, .choice:hover { border-color: #4ade80; background: rgba(16, 36, 32, 0.95); transform: translateY(-2px); box-shadow: 0 0 22px rgba(87, 242, 164, 0.3), inset 0 0 20px rgba(87, 242, 164, 0.08); }
.screen--main-menu { display: grid; place-items: center; padding: 48px 24px; }
.menu-core { width: min(680px, 100%); text-align: left; }
.menu-core .main-menu-brand h1 { margin: 0 0 10px; line-height: 1; text-transform: none; }
.menu-core .main-menu-brand h1 span { color: var(--mint); -webkit-text-stroke: 0; text-shadow: 0 0 20px rgba(87, 242, 164, 0.5); }
.menu-core .main-menu-brand > p { margin: 0 0 28px; color: var(--muted); }
.main-menu-list { display: grid; gap: 10px; width: 100%; }
.main-menu-item, .menu-core .main-menu-item { display: grid; gap: 4px; min-height: 72px; padding: 14px 16px; color: var(--text); border: 1px solid rgba(87, 242, 164, 0.2); background: rgba(10, 22, 26, 0.88); text-align: left; clip-path: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 0 15px rgba(87, 242, 164, 0.03); transition: all 160ms ease; animation: none; }
.main-menu-item span, .menu-core .main-menu-item span { font-size: 19px; font-weight: 700; text-transform: none; }
.main-menu-item small { color: var(--muted); }
.main-menu-item.is-primary, .menu-core .main-menu-item.is-primary { margin: 0; color: var(--text); border: 1px solid #4ade80; background: rgba(14, 42, 32, 0.9); box-shadow: 0 0 22px rgba(87, 242, 164, 0.3); }
.main-menu-item::after, .main-menu-item.is-primary::after { display: none; }
.main-menu-item:hover, .menu-core .main-menu-item:hover { color: var(--text); border-color: #4ade80; background: rgba(18, 42, 36, 0.95); transform: translateY(-2px); box-shadow: 0 0 24px rgba(87, 242, 164, 0.35); }
.main-menu-status { position: absolute; left: 24px; bottom: 16px; color: var(--muted); }
.intro-sequence { position: absolute !important; inset: 0; z-index: 80 !important; display: grid; place-items: center; padding: 24px; background: rgba(5, 12, 16, 0.82); backdrop-filter: blur(8px); transition: opacity 300ms ease; }
.intro-loader { display: grid; gap: 16px; width: min(440px, 100%); padding: 32px; color: var(--muted); border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 8px; background: linear-gradient(160deg, rgba(14, 28, 25, 0.95), rgba(7, 15, 17, 0.98)); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(74, 222, 128, 0.12); transform: none; }
.intro-loader b { color: var(--mint); font-size: 20px; font-weight: 800; letter-spacing: 0.08em; text-shadow: 0 0 16px rgba(87, 242, 164, 0.35); }
.intro-loader span { font: 13px/1.5 monospace; color: #a3b8b1; }
.intro-loader i { display: block; height: 5px; border-radius: 4px; background: rgba(74, 222, 128, 0.18); overflow: hidden; position: relative; }
.intro-loader i::after { content: ""; display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #10b981, #4ade80); box-shadow: 0 0 10px rgba(74, 222, 128, 0.6); }
.intro-loader button { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 20px; cursor: pointer; opacity: 1; pointer-events: auto; transform: none; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: #03150b; border: 1px solid #4ade80; border-radius: 4px; background: var(--mint); box-shadow: 0 0 16px rgba(87, 242, 164, 0.35); transition: background 150ms, transform 150ms, box-shadow 150ms; }
.intro-loader button small { display: inline-block; padding: 2px 7px; border-radius: 3px; background: rgba(0, 0, 0, 0.22); color: #04361c; font: 700 10px monospace; text-transform: uppercase; }
.intro-loader button:hover { background: #6ee7b7; box-shadow: 0 0 24px rgba(87, 242, 164, 0.6); transform: translateY(-1px); }
.intro-loader button:active { transform: translateY(0); }
.intro-dialog { display: none; }
.has-intro .menu-core, .has-intro .main-menu-status, .has-intro .mentor-card { visibility: hidden; }
.intro-complete .menu-core, .intro-complete .main-menu-status, .intro-complete .mentor-card { visibility: visible; }
.screen.scene-exit, .screen.is-refresh * { animation: none !important; }
.terminal, .terminal--stream { border: 1px solid rgba(87, 242, 164, 0.25); border-left: 3px solid var(--mint); background: rgba(4, 9, 12, 0.95); box-shadow: 0 8px 24px rgba(0,0,0,0.6), inset 0 0 18px rgba(87, 242, 164, 0.05); }
.terminal--stream pre, .radar__value { animation: none; transition: none; transform: none; }
.stage.is-shaking { animation: none; }
.progress-track span, .skill-bar i b { box-shadow: 0 0 14px var(--mint); }

@media (max-width: 760px) {
  .mentor-card { right: 2%; width: 180px; height: 300px; opacity: 1; }
  .mentor-card .mentor { display: none; }
  .screen--main-menu .menu-core { position: relative; z-index: 3; }
}