@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    color-scheme: light;
    --ink: #25362e;
    --muted: #657369;
    --line: #e0e5dc;
    --paper: #fffefb;
    --accent: #28694d;
    --accent-light: #e8f1e7;
    --gold: #8a6522;
    --blue: #4d6c8b;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f5ef; color: var(--ink); font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; min-height: 100vh; min-height: 100dvh; padding: 28px 24px; touch-action: pan-y pinch-zoom; }
h1, h2, h3, p { margin: 0; }
button, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button, [tabindex], summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 3px solid #466cbd; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
#game-app { position: relative; width: min(1120px, 100%); margin: 0 auto; }
#header { padding: 6px 0 24px; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: 46px; border: 1px solid #cfdbcc; border-radius: 13px; background: #e6eedf; display: grid; place-items: center; color: var(--accent); font-size: 15px; font-weight: 850; letter-spacing: -1px; }
.brand h1 { font-size: 20px; font-weight: 780; letter-spacing: -0.7px; }
.brand p { margin-top: 1px; font-size: 12px; color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.work-clock { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 720; font-variant-numeric: tabular-nums; }
.work-clock .icon { width: 18px; height: 18px; color: var(--muted); }
.clock-target { color: var(--muted); font-size: 12px; font-weight: 500; }
#btn-sound { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--paper); }
#btn-sound:hover { color: var(--accent); border-color: #b9cdb5; }
#btn-sound .sound-off, #btn-sound[data-muted='true'] .sound-on { display: none; }
#btn-sound[data-muted='true'] .sound-off { display: block; }
.overview-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
#player-progress { min-width: 0; }
.progress-label { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
#player-level { font-size: 22px; letter-spacing: -0.6px; font-weight: 780; }
#player-xp { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
#level-notice { color: var(--accent); font-size: 11px; opacity: 0; transition: opacity 150ms; }
#level-notice.show { opacity: 1; }
#player-xp-track { height: 7px; border-radius: 5px; overflow: hidden; background: #dde5d8; }
#player-xp-fill { height: 100%; width: 0; background: #6ca27c; border-radius: inherit; transition: width 180ms; }
.growth-caption { display: block; font-size: 11px; color: var(--muted); margin-top: 7px; }
.growth-caption span { padding: 0 4px; }
.hud-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); border-radius: 13px; }
.hud-badge { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 13px 18px; }
.hud-badge + .hud-badge { border-left: 1px solid var(--line); }
.resource-label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.resource-label .icon { width: 15px; height: 15px; }
.hud-badge strong { font-size: 21px; font-weight: 740; font-variant-numeric: tabular-nums; letter-spacing: -0.6px; margin-top: 2px; }
.res-gold .icon { color: var(--gold); }
.res-gem .icon { color: var(--blue); }
.res-token .icon { color: var(--accent); }
.game-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 24px; }
.play-column { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
#battle-view { position: relative; background: #edf1e7; border: 1px solid #d9e0d1; border-radius: 18px; padding: 22px 24px 15px; min-height: 256px; cursor: pointer; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: background 250ms, border-color 250ms; }
#battle-view:hover { border-color: #a2bb9e; }
.battle-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow { font-size: 11px; font-weight: 630; color: var(--muted); letter-spacing: 0.2px; }
.live-status { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; font-weight: 670; }
.live-status::before, .status-dot { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #558164; flex: none; }
.battle-body { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 28px; padding: 24px 0 20px; position: relative; z-index: 2; }
#monster { position: relative; width: 105px; height: 132px; background: #fffef9; border: 1px solid #d5dccd; border-radius: 6px 14px 6px 6px; box-shadow: 5px 6px 0 #d8e0ce, 9px 11px 0 #e2e8da, 0 12px 20px #344a2810; padding: 16px 13px; transform: rotate(-4deg); transition: transform 100ms; }
#monster::before { content: ''; position: absolute; right: -1px; top: -1px; width: 19px; height: 19px; background: #e7ecdf; border-bottom: 1px solid #d5dccd; border-left: 1px solid #d5dccd; border-radius: 0 12px 0 3px; }
#monster.hit { transform: rotate(0) scale(0.96); }
.paper-code { display: block; color: #819077; font-size: 6px; font-weight: 750; letter-spacing: 1px; margin-bottom: 14px; }
.paper-rule { background: #e0e5d9; height: 3px; border-radius: 2px; margin-top: 6px; width: 74%; }
.paper-rule.short { width: 52%; }
.paper-stamp { position: absolute; right: 13px; bottom: 24px; width: 28px; height: 28px; border: 1px solid #abc3a8; border-radius: 50%; color: #689163; display: grid; place-items: center; transform: rotate(14deg); }
.paper-stamp .icon { width: 17px; height: 17px; }
.paper-footer { position: absolute; bottom: 11px; left: 13px; font-size: 6px; color: #93a086; letter-spacing: 2px; }
.battle-copy { min-width: 0; }
.battle-label { font-size: 11px; color: var(--muted); }
#mob-name { margin: 3px 0 17px; font-size: 22px; font-weight: 740; letter-spacing: -0.75px; line-height: 1.3; word-break: keep-all; }
.hp-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.hp-label strong { font-size: 11px; color: var(--ink); font-weight: 610; font-variant-numeric: tabular-nums; }
.hp-track { height: 6px; overflow: hidden; border-radius: 5px; background: #d3ddca; }
.hp-fill { height: 100%; width: 100%; background: #739064; border-radius: inherit; transition: width 80ms; }
#next-boss { display: block; font-size: 10px; color: var(--muted); margin-top: 8px; }
.battle-foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid #d5decc; padding-top: 11px; position: relative; z-index: 2; color: var(--muted); font-size: 10px; }
.battle-foot > .icon { margin-left: auto; width: 15px; height: 15px; }
.keyboard-hint { margin-left: auto; display: flex; gap: 4px; }
kbd { font: inherit; font-size: 9px; padding: 0 4px; border: 1px solid #c9d4c0; border-radius: 3px; }
#fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
#battle-view.night-mode { background: #e9edf3; border-color: #d3dce8; }
.night-mode #work-status { color: #42688c; }
.night-mode .hp-fill { background: #6385a3; }
.night-mode .hp-track { background: #d5dfeb; }
.night-mode .battle-foot { border-color: #d1dce7; }
#battle-view.boss-mode { background: #fcf0df; border-color: #e7cfaa; }
.boss-mode #work-status, .boss-mode #mob-name { color: #88582b; }
.boss-mode .hp-fill { background: #ad8252; }
.boss-mode .hp-track { background: #ead8bc; }
.boss-mode #monster { border-color: #cbb497; }
#boss-timer-wrap { display: none; color: #8a642d; font-size: 10px; position: absolute; bottom: 15px; left: 24px; right: 24px; z-index: 2; }
.boss-mode .battle-foot { visibility: hidden; }
#boss-timer-wrap > span { display: flex; justify-content: space-between; }
.boss-track { height: 3px; background: #e7d5b7; border-radius: 5px; margin-top: 4px; overflow: hidden; }
#boss-timer-fill { height: 100%; background: #a98447; }
#boss-timer-wrap[data-urgent='true'] { color: #ae4e3e; }
#boss-timer-wrap[data-urgent='true'] #boss-timer-fill { background: #ae4e3e; }
.combat-metrics { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: 13px; }
.combat-metrics > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 15px 18px; }
.combat-metrics > div + div { border-left: 1px solid var(--line); }
.metric-label { color: var(--muted); font-size: 11px; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.metric-label .icon { width: 16px; height: 16px; }
.combat-metrics strong { font-size: 22px; font-weight: 750; letter-spacing: -0.6px; white-space: nowrap; }
.combat-metrics small { font-size: 10px; color: var(--muted); font-weight: 500; padding-left: 3px; }
#skill-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skill-btn { min-width: 0; border: 1px solid #c8d9c3; border-radius: 13px; background: #f6faf1; color: var(--ink); padding: 15px; display: flex; align-items: flex-start; gap: 10px; position: relative; overflow: hidden; text-align: left; transition: border-color 120ms, background 120ms; }
.skill-btn:hover:not(:disabled) { border-color: #86a47f; background: #eef5e7; }
.skill-btn:active:not(:disabled) { transform: translateY(1px); }
.skill-icon { width: 30px; height: 30px; border-radius: 9px; background: #e5eedb; color: #5c7844; display: grid; place-items: center; flex: none; }
.skill-icon .icon { width: 18px; height: 18px; }
.skill-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-title { font-size: 13px; font-weight: 740; }
.s-sub { font-size: 10px; color: var(--muted); }
.skill-state { font-size: 10px; color: var(--accent); font-weight: 650; margin-top: 3px; }
#btn-s2 { background: #f5f7fa; border-color: #d1dce9; }
#btn-s2 .skill-icon { background: #e8edf5; color: #5b7491; }
#btn-s2 .skill-state { color: #4f6b8b; }
#btn-s2:hover:not(:disabled) { background: #edf2f8; border-color: #9ab1c9; }
.skill-btn:disabled { background: #f1f2ee !important; border-color: var(--line) !important; }
.skill-btn:disabled .skill-icon { background: #e4e7df !important; color: #778272 !important; }
.skill-btn:disabled .skill-state { color: #667363 !important; }
.skill-btn[data-active='true']:disabled { background: #eef6e7 !important; border-color: #a9c99a !important; }
.skill-btn[data-active='true']:disabled .skill-icon { background: #dcebd1 !important; color: #4e7840 !important; }
.skill-btn[data-active='true']:disabled .skill-state { color: #38672b !important; }
#btn-s2[data-active='true']:disabled { background: #edf3fb !important; border-color: #a8bed8 !important; }
#btn-s2[data-active='true']:disabled .skill-icon { background: #dbe7f7 !important; color: #4b7096 !important; }
#btn-s2[data-active='true']:disabled .skill-state { color: #426a93 !important; }
.skill-cd-mask { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background: #b3c3a8; transition: width 150ms linear; }
#cd-night { background: #bbc9d9; }
.goal-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 18px; margin-top: auto; border: 1px dashed #d2dccd; border-radius: 13px; }
.goal-card > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.goal-card strong { font-size: 13px; font-weight: 680; }
#day-progress-text { font-size: 11px; color: var(--muted); }
.goal-track { flex-basis: 100%; height: 3px; border-radius: 3px; background: #dfe6d9; overflow: hidden; }
#day-progress-fill { width: 0; height: 100%; background: #8ba180; }
#panel-area { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden; }
#tab-nav { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; background: #fafbf6; }
.tab-btn { position: relative; flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 6px; height: 57px; background: transparent; border: 0; color: var(--muted); font-size: 12px; font-weight: 640; }
.tab-btn .icon { width: 17px; height: 17px; }
.tab-btn.active { color: var(--accent); }
.tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 18%; right: 18%; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.tab-btn:hover { color: var(--accent); }
.noti-dot { display: none; width: 5px; height: 5px; background: #bf814b; border-radius: 50%; position: absolute; top: 15px; right: 20%; }
.noti-dot.show { display: block; }
.tab-view { display: none; padding: 24px; }
.tab-view.active { display: block; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.panel-heading h2 { font-size: 18px; font-weight: 720; letter-spacing: -0.5px; margin-top: 2px; }
.panel-caption { color: var(--muted); font-size: 10px; white-space: nowrap; }
.upgrade-list { display: flex; flex-direction: column; gap: 10px; }
.up-card { display: flex; align-items: center; gap: 12px; position: relative; padding: 15px 12px; min-height: 82px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.upgrade-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f0f3eb; color: #6f8165; flex: none; }
.upgrade-icon .icon { width: 18px; height: 18px; }
.up-info { flex: 1; min-width: 0; }
.up-title { font-size: 13px; font-weight: 720; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.upgrade-level { color: var(--muted); font-size: 10px; font-weight: 550; }
.up-stat { font-size: 11px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.up-stat strong { color: var(--ink); font-weight: 700; padding-left: 3px; }
.up-desc { display: block; color: var(--muted); font-size: 10px; margin-top: 1px; }
.up-btn { border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: #fff; min-height: 42px; min-width: 77px; flex: none; padding: 8px 10px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; font-size: 12px; font-weight: 680; font-variant-numeric: tabular-nums; }
.up-btn .icon { width: 15px; height: 15px; }
.up-btn:hover:not(:disabled) { background: #1d563d; }
.up-btn:active:not(:disabled) { transform: translateY(1px); }
.up-btn:disabled { background: #edf0e9; border-color: #e0e5d9; color: #63705d; }
.milestone-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #acc398; transition: width 180ms; }
.help-details { font-size: 11px; color: var(--muted); margin-top: 20px; }
.help-details summary { cursor: pointer; padding: 9px 0; }
.help-details p { font-size: 11px; line-height: 1.8; padding: 5px 0 10px; }
.quiet-note { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #edf0e8; font-size: 10px; color: var(--muted); }
.gacha-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; background: var(--accent-light); border-radius: 12px; margin-bottom: 14px; }
.gacha-banner strong { font-size: 13px; font-weight: 700; }
.gacha-banner p { font-size: 10px; color: var(--muted); margin-top: 4px; }
.gacha-banner .up-btn { flex-direction: row; min-width: 66px; gap: 6px; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.relic-item { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #f7f8f2; padding: 18px 14px; position: relative; }
.relic-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; background: #edf0e7; border-radius: 9px; color: #7b8971; }
.relic-icon .icon { width: 19px; height: 19px; }
.relic-name { font-size: 12px; font-weight: 680; }
.relic-eff { font-size: 10px; color: var(--muted); margin-top: 4px; }
.relic-status, .relic-owned { position: absolute; top: 18px; right: 12px; font-size: 9px; color: var(--muted); }
.relic-owned { display: none; color: var(--accent); }
.relic-item.unlocked { background: #f1f7ed; border-color: #b9d1ac; }
.relic-item.unlocked .relic-status { display: none; }
.relic-item.unlocked .relic-owned { display: block; }
.relic-item.unlocked .relic-icon { background: #e4efda; color: #5c7b49; }
.achieve-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 16px 0; }
.achieve-item:first-child { padding-top: 0; }
.achieve-item:last-child { border-bottom: 0; }
.ach-info { min-width: 0; }
.ach-title { font-size: 13px; font-weight: 690; }
.ach-desc { font-size: 11px; color: var(--muted); margin-top: 3px; }
.achieve-item.done .ach-title { color: var(--muted); }
.btn-claim { flex: none; min-height: 40px; min-width: 72px; border: 1px solid #cadac1; border-radius: 8px; background: #e7f0df; color: #365c2b; font-size: 11px; padding: 7px 11px; font-weight: 650; }
.btn-claim:disabled { background: #f0f2ec; border-color: #e1e6da; color: var(--muted); }
.setting-panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 12px 0; }
.setting-header { font-size: 13px; font-weight: 720; margin-bottom: 5px; }
.setting-panel > p { font-size: 11px; color: var(--muted); line-height: 1.75; }
.prestige-panel { background: #f5f8ef; }
.prestige-preview { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 12px 0; }
.prestige-preview strong { color: var(--accent); font-size: 19px; }
.btn-half { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; font-size: 11px; font-weight: 650; padding: 9px; }
.btn-half .icon { width: 15px; height: 15px; }
.btn-half.secondary { background: var(--paper); color: var(--ink); border-color: #d3ddcc; }
.backup-actions { display: flex; gap: 8px; margin-top: 12px; }
.save-note { padding: 9px 12px; background: #f1f6ec; border-radius: 8px; font-size: 10px; color: #5d7350; }
.reset-row { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.reset-button { background: transparent; border: 0; color: #9a5445; text-decoration: underline; min-height: 40px; padding: 8px 0 8px 12px; font-size: 10px; }
.app-footnote { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; color: #84907c; font-size: 10px; }
#toast { position: fixed; bottom: 24px; left: 50%; width: max-content; max-width: min(520px, calc(100vw - 32px)); transform: translate(-50%, 12px); color: #fff; background: #2b4033; padding: 13px 18px; border-radius: 12px; white-space: pre-line; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; text-align: center; pointer-events: none; opacity: 0; transition: transform 180ms, opacity 180ms; z-index: 9999; box-shadow: 0 8px 24px #263b2922; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#session-overlay:not([hidden]) { position: fixed; inset: 0; z-index: 10000; background: #1a2a20aa; backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; }
.session-card { width: min(390px, 100%); padding: 28px; background: var(--paper); border-radius: 18px; line-height: 1.7; }
.session-card h2 { font-size: 19px; margin-bottom: 10px; }
.session-card p { font-size: 13px; color: var(--muted); }
.session-card button { margin-top: 20px; }
dialog { margin: auto; width: min(440px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 16px 80px #243a2444; }
dialog::backdrop { background: #1a2a20aa; backdrop-filter: blur(4px); }
dialog h2 { font-size: 19px; font-weight: 720; margin-bottom: 10px; }
dialog p, dialog label { font-size: 12px; color: var(--muted); line-height: 1.7; }
dialog label { display: block; margin-top: 14px; font-weight: 650; color: var(--ink); }
dialog textarea { width: 100%; min-height: 120px; padding: 12px; margin-top: 6px; background: #f5f7ef; color: var(--ink); border: 1px solid #c8d5bf; border-radius: 8px; font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; user-select: text; -webkit-user-select: text; touch-action: auto; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dialog-button { flex: 1 1 auto; min-height: 44px; padding: 10px 12px; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 8px; font-size: 12px; font-weight: 650; }
.dialog-button.secondary { background: #eef2e8; color: var(--ink); border-color: #d6dfcd; }
.dialog-button.danger { background: #a45342; border-color: #a45342; }
#import-error { color: #a45342; font-size: 11px; min-height: 1.5em; margin-top: 8px; }
.shake-light { animation: shake 160ms ease; }
.shake-hard { animation: shake 300ms ease; }
@keyframes shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

@media (max-width: 599px) and (min-height: 601px) {
    body { padding: 20px; }
    #game-app { max-width: 650px; }
    #header { padding-bottom: 16px; }
    .topline { margin-bottom: 16px; }
    .overview-row { gap: 20px; }
    .game-layout { grid-template-columns: 1fr; gap: 14px; }
    .play-column { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #battle-view { grid-column: 1 / -1; min-height: 180px; padding: 15px 20px 12px; }
    .battle-body { grid-template-columns: 84px 1fr; padding: 14px 0; gap: 22px; }
    #monster { width: 78px; height: 94px; padding: 12px 10px; }
    .paper-code { font-size: 5px; margin-bottom: 9px; }
    .paper-rule { margin-top: 5px; height: 2px; }
    .paper-stamp { width: 22px; height: 22px; right: 10px; bottom: 17px; }
    .paper-stamp .icon { width: 14px; height: 14px; }
    .paper-footer { font-size: 5px; bottom: 6px; left: 10px; }
    #monster::before { width: 15px; height: 15px; }
    #mob-name { margin-bottom: 11px; }
    .combat-metrics { grid-column: 1 / -1; }
    #skill-dock { grid-column: 1 / -1; }
    .goal-card { display: none; }
    .up-card { min-height: 73px; }
    .app-footnote { display: none; }
}
@media (min-width: 600px) and (max-width: 999px) and (min-height: 601px) {
    body { padding: 20px; }
    .game-layout { gap: 16px; }
    .overview-row { gap: 16px; }
    .hud-badge { padding: 12px 10px; }
    .resource-label { font-size: 10px; }
    .resource-label .icon { width: 13px; height: 13px; }
    .hud-badge strong { font-size: 18px; }
    #battle-view { padding: 16px; min-height: 222px; }
    .battle-body { grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
    #monster { width: 70px; height: 96px; padding: 12px 9px; }
    .paper-code { font-size: 4px; margin-bottom: 10px; }
    .paper-stamp { width: 23px; height: 23px; right: 8px; bottom: 18px; }
    .paper-footer { font-size: 4px; bottom: 8px; left: 9px; }
    #mob-name { font-size: 19px; margin-bottom: 12px; }
    #boss-timer-wrap { left: 16px; right: 16px; }
    .combat-metrics > div { flex-direction: column; align-items: flex-start; padding: 12px; gap: 3px; }
    .combat-metrics strong { font-size: 21px; }
    .metric-label { font-size: 10px; }
    .skill-btn { padding: 12px 10px; gap: 7px; }
    .skill-icon { width: 25px; height: 25px; border-radius: 8px; }
    .skill-icon .icon { width: 16px; height: 16px; }
    .s-title { font-size: 12px; }
    .s-sub, .skill-state { font-size: 9px; }
    #tab-nav { padding: 0 5px; }
    .tab-btn { height: 50px; gap: 4px; font-size: 11px; }
    .tab-btn .icon { width: 14px; height: 14px; }
    .tab-view { padding: 18px 14px; }
    .panel-heading { margin-bottom: 14px; }
    .panel-heading h2 { font-size: 16px; }
    .panel-caption { display: none; }
    .up-card { padding: 12px 9px; gap: 8px; min-height: 74px; }
    .upgrade-icon { width: 27px; height: 27px; border-radius: 8px; }
    .up-title { font-size: 12px; }
    .up-desc { display: none; }
    .up-btn { min-width: 57px; min-height: 40px; flex-direction: row; gap: 4px; padding: 7px; font-size: 11px; }
    .up-btn .icon { width: 12px; height: 12px; }
}
@media (max-width: 599px) and (min-height: 601px) {
    body { padding: 14px 12px 24px; }
    .brand-mark { width: 34px; height: 34px; font-size: 12px; border-radius: 10px; }
    .brand { gap: 8px; }
    .brand h1 { font-size: 15px; }
    .brand p { font-size: 9px; }
    .header-actions { gap: 7px; }
    #btn-sound { width: 34px; height: 34px; border-radius: 9px; }
    .work-clock { font-size: 12px; gap: 4px; }
    .work-clock .icon { width: 14px; height: 14px; }
    .clock-target { display: none; }
    .overview-row { grid-template-columns: 1fr; gap: 12px; }
    #player-progress { grid-row: 2; }
    .hud-row { border-radius: 10px; }
    .hud-badge { flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; padding: 9px 10px; }
    .resource-label { font-size: 9px; gap: 4px; }
    .resource-label .icon { width: 12px; height: 12px; }
    .hud-badge strong { font-size: 14px; margin: 0; letter-spacing: -0.3px; }
    .progress-label { margin-bottom: 5px; gap: 6px; }
    #player-level { font-size: 18px; }
    #player-xp { font-size: 10px; }
    #level-notice { font-size: 9px; }
    .growth-caption { display: none; }
    #player-xp-track { height: 5px; }
    #battle-view { min-height: 160px; padding: 12px 15px 10px; border-radius: 14px; }
    .battle-body { padding: 10px 0 11px; gap: 18px; grid-template-columns: 72px 1fr; }
    #monster { width: 66px; height: 82px; padding: 10px 9px; }
    #monster::before { width: 13px; height: 13px; }
    .paper-code { font-size: 4px; }
    .paper-footer { font-size: 4px; }
    .paper-stamp { right: 8px; bottom: 14px; width: 20px; height: 20px; }
    #mob-name { font-size: 18px; margin: 2px 0 9px; }
    .battle-label, .eyebrow, .live-status { font-size: 9px; }
    .hp-label { font-size: 9px; }
    .hp-label strong { font-size: 10px; }
    #next-boss { font-size: 9px; margin-top: 5px; }
    .battle-foot { padding-top: 7px; font-size: 9px; }
    #boss-timer-wrap { bottom: 10px; left: 15px; right: 15px; font-size: 9px; }
    .boss-track { height: 2px; margin-top: 2px; }
    .keyboard-hint { display: none; }
    .combat-metrics > div { padding: 10px 12px; }
    .combat-metrics strong { font-size: 18px; }
    .metric-label { font-size: 10px; gap: 5px; }
    .metric-label .icon { width: 14px; height: 14px; }
    .skill-btn { padding: 10px; gap: 7px; border-radius: 10px; }
    .skill-icon { width: 26px; height: 26px; border-radius: 8px; }
    .skill-icon .icon { width: 15px; height: 15px; }
    .s-title { font-size: 12px; }
    .s-sub, .skill-state { font-size: 9px; }
    .skill-state { margin-top: 1px; }
    #panel-area { border-radius: 14px; }
    #tab-nav { padding: 0 6px; }
    .tab-btn { height: 46px; gap: 4px; font-size: 11px; }
    .tab-btn .icon { width: 14px; height: 14px; }
    .tab-view { padding: 15px 13px; }
    .panel-heading { margin-bottom: 12px; }
    .panel-heading h2 { font-size: 15px; }
    .panel-heading .eyebrow { display: none; }
    .panel-caption { font-size: 9px; }
    .up-card { min-height: 64px; padding: 10px; gap: 9px; }
    .upgrade-icon { width: 29px; height: 29px; border-radius: 8px; }
    .up-title { font-size: 12px; }
    .upgrade-level { font-size: 9px; }
    .up-stat { font-size: 10px; margin-top: 3px; }
    .up-desc { display: none; }
    .up-btn { min-width: 62px; min-height: 40px; flex-direction: row; gap: 5px; padding: 7px; font-size: 11px; }
    .up-btn .icon { width: 13px; height: 13px; }
    .help-details { margin-top: 11px; font-size: 10px; }
    .quiet-note { margin-top: 8px; padding-top: 9px; font-size: 9px; }
}
@media (max-height: 840px) and (max-width: 599px) {
    body { padding: 10px 10px 18px; }
    #header { padding: 0 0 10px; }
    .topline { gap: 4px; margin-bottom: 8px; }
    .brand { gap: 6px; }
    .brand-mark { width: 29px; height: 29px; font-size: 11px; border-radius: 8px; }
    .brand h1 { font-size: 13px; }
    .brand p { display: none; }
    .header-actions { gap: 5px; }
    .work-clock { font-size: 11px; gap: 3px; }
    .work-clock .icon { display: none; }
    .clock-target { display: none; }
    #btn-sound { width: 32px; height: 32px; }
    #btn-sound .icon { width: 17px; height: 17px; }
    .overview-row { grid-template-columns: 1fr; gap: 7px; }
    #player-progress { grid-row: 2; }
    .hud-badge { padding: 4px 8px; flex-direction: row; align-items: center; justify-content: space-between; }
    .resource-label { gap: 3px; font-size: 9px; }
    .resource-label .icon { width: 11px; height: 11px; }
    .hud-badge strong { font-size: 12px; margin: 0; }
    .progress-label { margin-bottom: 3px; gap: 5px; }
    #player-level { font-size: 15px; }
    #player-xp { font-size: 9px; }
    #level-notice { font-size: 8px; }
    #player-xp-track { height: 4px; }
    .growth-caption { display: none; }
    .game-layout { grid-template-columns: 1fr; gap: 9px; }
    .play-column { gap: 7px; }
    #battle-view { min-height: 0; border-radius: 12px; padding: 9px 12px 7px; }
    .battle-body { grid-template-columns: 52px 1fr; gap: 17px; padding: 7px 0; }
    #monster { width: 48px; height: 60px; padding: 8px 6px; box-shadow: 3px 4px 0 #d8e0ce, 5px 6px 0 #e2e8da; }
    #monster::before { width: 10px; height: 10px; }
    .paper-code { font-size: 3px; letter-spacing: 0.4px; margin-bottom: 6px; }
    .paper-rule { height: 2px; margin-top: 4px; }
    .paper-stamp { width: 15px; height: 15px; right: 5px; bottom: 9px; }
    .paper-stamp .icon { width: 11px; height: 11px; }
    .paper-footer { display: none; }
    .battle-label { display: none; }
    #mob-name { font-size: 16px; margin: 0 0 5px; }
    .eyebrow, .live-status { font-size: 8px; }
    .hp-label, .hp-label strong { font-size: 9px; margin-bottom: 4px; }
    .hp-track { height: 5px; }
    #next-boss { display: none; }
    .battle-foot { font-size: 8px; padding-top: 5px; }
    .battle-foot .icon { width: 12px; height: 12px; }
    .keyboard-hint { display: none; }
    .combat-metrics > div { padding: 3px 10px; }
    .combat-metrics strong { font-size: 16px; }
    .combat-metrics small, .metric-label { font-size: 9px; }
    .metric-label .icon { width: 13px; height: 13px; }
    #skill-dock { gap: 7px; }
    .skill-btn { padding: 6px 9px; min-height: 44px; gap: 6px; border-radius: 10px; align-items: center; }
    .skill-copy { gap: 0; line-height: 1.25; }
    .skill-icon { width: 22px; height: 22px; border-radius: 7px; }
    .skill-icon .icon { width: 13px; height: 13px; }
    .s-title { font-size: 11px; }
    .s-sub { display: none; }
    .skill-state { font-size: 9px; margin-top: 0; }
    .goal-card, .app-footnote { display: none; }
    #panel-area { border-radius: 12px; }
    #tab-nav { padding: 0 4px; }
    .tab-btn { height: 42px; font-size: 10px; gap: 3px; }
    .tab-btn .icon { width: 13px; height: 13px; }
    .tab-view { padding: 11px 10px; }
    .panel-heading { margin-bottom: 8px; }
    #tab-stat .panel-heading { display: none; }
    .panel-heading h2 { font-size: 13px; }
    .panel-heading .eyebrow { display: none; }
    .panel-caption { font-size: 8px; }
    .upgrade-list { gap: 5px; }
    .up-card { min-height: 50px; padding: 6px 8px; gap: 8px; }
    .upgrade-icon { width: 25px; height: 25px; border-radius: 7px; }
    .upgrade-icon .icon { width: 15px; height: 15px; }
    .up-title { font-size: 11px; gap: 4px; }
    .upgrade-level { font-size: 8px; }
    .up-stat { font-size: 9px; margin-top: 2px; }
    .up-desc { display: none; }
    .up-btn { min-width: 58px; min-height: 38px; padding: 6px; flex-direction: row; gap: 4px; font-size: 10px; }
    .up-btn .icon { width: 12px; height: 12px; }
    .help-details { font-size: 9px; margin-top: 5px; }
    .quiet-note { margin-top: 4px; font-size: 8px; padding-top: 5px; }
    #boss-timer-wrap { bottom: 7px; left: 12px; right: 12px; font-size: 8px; }
    .boss-track { height: 2px; margin-top: 1px; }
}
@media (min-height: 651px) and (max-height: 840px) and (max-width: 599px) {
    .brand h1 { font-size: 15px; }
    #player-level { font-size: 18px; }
    .hud-badge strong { font-size: 14px; }
    #tab-stat .panel-heading { display: flex; }
    .up-card { min-height: 62px; }
    .up-title { font-size: 12px; }
    .up-stat { font-size: 10px; }
    .up-btn { min-height: 40px; font-size: 11px; }
    .skill-btn { min-height: 48px; }
    .s-title { font-size: 12px; }
    .combat-metrics strong { font-size: 18px; }
}
@media (min-height: 741px) and (max-height: 840px) and (max-width: 599px) {
    .battle-body { grid-template-columns: 66px minmax(0, 1fr); padding: 9px 0; }
    #monster { width: 60px; height: 76px; padding: 10px 9px; }
    .paper-code { font-size: 4px; letter-spacing: 0.5px; }
    .paper-stamp { width: 20px; height: 20px; right: 7px; bottom: 14px; }
    .paper-stamp .icon { width: 14px; height: 14px; }
    .battle-label { display: block; font-size: 9px; }
    #next-boss { display: block; font-size: 9px; margin-top: 4px; }
}
@media (min-width: 600px) and (max-height: 600px) {
    body { padding: 12px 14px; }
    #header { padding: 0 0 12px; }
    .topline { margin-bottom: 10px; }
    .brand-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
    .brand h1 { font-size: 15px; }
    .brand p { display: none; }
    .header-actions { gap: 8px; }
    .work-clock { font-size: 12px; }
    #btn-sound { width: 32px; height: 32px; }
    .overview-row { grid-template-columns: 1fr 1fr; gap: 22px; }
    .progress-label { margin-bottom: 5px; }
    #player-level { font-size: 17px; }
    #player-xp { font-size: 10px; }
    #level-notice { font-size: 9px; }
    #player-xp-track { height: 5px; }
    .growth-caption { display: none; }
    .hud-badge { padding: 7px 10px; flex-direction: row; align-items: center; justify-content: space-between; gap: 5px; }
    .hud-badge strong { font-size: 13px; margin: 0; }
    .resource-label { font-size: 9px; }
    .resource-label .icon { width: 12px; height: 12px; }
    .game-layout { gap: 14px; grid-template-columns: 1fr 1fr; }
    .play-column { gap: 6px; }
    #battle-view { min-height: 0; border-radius: 12px; padding: 8px 12px 6px; }
    .eyebrow, .live-status { font-size: 8px; }
    .battle-body { grid-template-columns: 54px 1fr; gap: 14px; padding: 5px 0; }
    #monster { width: 50px; height: 60px; padding: 8px 6px; box-shadow: 3px 4px 0 #d8e0ce, 5px 6px 0 #e2e8da; }
    #monster::before { width: 10px; height: 10px; }
    .paper-code { font-size: 3px; letter-spacing: 0.4px; margin-bottom: 6px; }
    .paper-rule { height: 2px; margin-top: 4px; }
    .paper-stamp { width: 15px; height: 15px; right: 5px; bottom: 9px; }
    .paper-stamp .icon { width: 11px; height: 11px; }
    .paper-footer, .battle-label, .keyboard-hint { display: none; }
    #mob-name { font-size: 15px; margin: 0 0 4px; }
    .hp-label, .hp-label strong { font-size: 9px; margin-bottom: 3px; }
    #next-boss { font-size: 8px; margin-top: 3px; }
    .hp-track { height: 4px; }
    .battle-foot { padding-top: 4px; font-size: 8px; }
    .battle-foot .icon { width: 12px; height: 12px; }
    .combat-metrics { border-radius: 9px; }
    .combat-metrics > div { padding: 5px 10px; }
    .combat-metrics strong { font-size: 14px; }
    .metric-label, .combat-metrics small { font-size: 8px; }
    .metric-label .icon { width: 12px; height: 12px; }
    #skill-dock { gap: 7px; }
    .skill-btn { padding: 7px 9px; gap: 6px; border-radius: 9px; align-items: center; }
    .skill-icon { width: 24px; height: 24px; border-radius: 7px; }
    .skill-icon .icon { width: 14px; height: 14px; }
    .s-title { font-size: 10px; }
    .s-sub { display: none; }
    .skill-state { font-size: 8px; margin-top: 0; }
    .goal-card, .app-footnote { display: none; }
    #panel-area { border-radius: 12px; }
    #tab-nav { padding: 0 5px; }
    .tab-btn { height: 40px; font-size: 10px; gap: 4px; }
    .tab-btn .icon { width: 13px; height: 13px; }
    .tab-view { padding: 8px 10px; max-height: calc(100dvh - 142px); overflow-y: auto; }
    .panel-heading { margin-bottom: 7px; }
    .panel-heading h2 { font-size: 12px; margin: 0; }
    .panel-heading .eyebrow, .panel-caption { display: none; }
    .upgrade-list { gap: 5px; }
    .up-card { min-height: 43px; padding: 5px 7px; gap: 8px; }
    .upgrade-icon { width: 24px; height: 24px; border-radius: 7px; }
    .upgrade-icon .icon { width: 14px; height: 14px; }
    .up-title { font-size: 10px; gap: 5px; }
    .upgrade-level { font-size: 8px; }
    .up-stat { font-size: 9px; margin-top: 1px; }
    .up-desc { display: none; }
    .up-btn { min-width: 60px; min-height: 32px; padding: 4px 6px; flex-direction: row; gap: 4px; font-size: 10px; }
    .up-btn .icon { width: 12px; height: 12px; }
    #tab-stat .help-details, #tab-stat .quiet-note { display: none; }
    #boss-timer-wrap { bottom: 6px; left: 12px; right: 12px; font-size: 8px; }
    .boss-track { height: 2px; margin-top: 2px; }
}
@media (max-width: 359px) {
    .hud-badge { padding-left: 7px; padding-right: 7px; }
    .resource-label { font-size: 8px; }
    .resource-label .icon { width: 10px; height: 10px; }
    .hud-badge strong { font-size: 12px; }
    .brand h1 { font-size: 13px; }
    .brand p { font-size: 8px; }
    .brand-mark { width: 29px; height: 29px; font-size: 10px; }
    .tab-btn .icon { width: 12px; height: 12px; }
    .tab-btn { gap: 3px; }
    .up-title { font-size: 11px; }
    .up-stat { font-size: 9px; }
    .skill-btn { gap: 5px; }
    .s-title { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Teacher adventure. Shared controls and save dialogs retain their layout. */
:root { --ink:#343047; --muted:#756c81; --line:#e0cfac; --paper:#fffaf0; --accent:#59609c; --accent-light:#eee8fa; --gold:#b37b25; --blue:#7970bd; }
body { background:radial-gradient(ellipse at 50% 0,#454067 0,#28253f 70%); }
#game-app { width:min(1140px,100%); }
#header { padding:18px 22px; margin-bottom:20px; border:1px solid #b7955b; border-radius:18px; background:linear-gradient(130deg,#373750,#25283f); color:#fff4d7; box-shadow:0 6px 0 #191b302e; }
.topline { margin-bottom:15px; }
.brand-mark { background:linear-gradient(145deg,#e7c887,#ae8451); color:#fff8e5; border:1px solid #f8dea0; box-shadow:inset 0 0 0 3px #6e574b30; }
.brand h1 { letter-spacing:-.7px; color:#ffefc4; }
.brand p,.work-clock .icon,.clock-target { color:#c9bed5; }
#btn-sound { background:#4c4663; color:#eee0b9; border-color:#82705e; }
.overview-row { gap:30px; }
#player-level { color:#d9fae5; }
#player-xp,.growth-caption { color:#c8d9d1; }
#level-notice { color:#ffe097; }
#player-xp-track { background:#181e35; height:8px; box-shadow:inset 0 1px 2px #0006; }
#player-xp-fill { background:linear-gradient(90deg,#75c8af,#b5f0cb); box-shadow:0 0 10px #9ad2b5; }
.hud-row { background:#24273d; border-color:#77614f; }
.hud-badge+.hud-badge { border-color:#5c5061; }
.hud-row .resource-label { color:#cfc1d9; }
.hud-badge strong { color:#ffe4a1; }
.res-gem strong { color:#c7b9fb; }.res-token strong { color:#a7e4c9; }
.game-layout { grid-template-columns:1.3fr 1fr; gap:20px; align-items:start; }
.play-column { gap:10px; }
#battle-view { min-height:0; padding:13px; border:2px solid #caaa70; border-radius:17px; background:#33324b; box-shadow:0 5px 0 #181b302e; }
#battle-view:hover { border-color:#f1d196; }
.battle-top { margin-bottom:10px; color:#ead7ae; }
.battle-top .eyebrow { display:flex; align-items:center; gap:5px; color:#e9d2a0; }
.battle-top .icon { width:15px; height:15px; }.live-status { color:#b4efcc; }
.live-status::before { background:#97e2b7; box-shadow:0 0 6px #a4f0c7; }
.battle-body { display:block; position:relative; height:336px; padding:0; overflow:hidden; border:1px solid #b29a6b; border-radius:10px; background:#ead2ad url('assets/classroom.svg') center/cover no-repeat; isolation:isolate; }
.scene-caption { position:absolute; top:12px; left:15px; font-size:10px; color:#745e49; background:#fff8dccc; padding:4px 8px; border-radius:20px; }
#teacher-hero { position:absolute; left:20px; bottom:20px; width:210px; height:260px; z-index:2; transform-origin:50% 85%; --hero-hop:-8px; }
#teacher-sprite { display:block; width:100%; height:calc(100% - 20px); object-fit:contain; object-position:bottom; filter:drop-shadow(0 5px 2px #745b5420); }
.hero-badge { position:absolute; bottom:0; left:50%; transform:translateX(-50%); white-space:nowrap; color:#f9f3df; background:#47415c; border:1px solid #d5b67e; border-radius:20px; padding:2px 10px; font-size:10px; box-shadow:0 2px 0 #382d4420; }
.hero-badge strong { color:#b7efcf; margin-left:4px; }
.hero-aura { position:absolute; inset:12% 0 6%; border-radius:50%; background:radial-gradient(ellipse,#ffefa059,transparent 65%); z-index:-1; }
.hero-celebration { position:absolute; top:3px; left:50%; transform:translateX(-50%); opacity:0; white-space:nowrap; background:#fff4c4; border:1px solid #d5b77c; color:#73563f; padding:3px 9px; border-radius:14px; font-size:10px; }
#monster { position:absolute; right:28px; bottom:15px; width:155px; height:155px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent url('assets/enemy-0.svg') center/contain no-repeat; transform:none; z-index:2; filter:drop-shadow(0 6px 3px #79645b20); }
#monster::before,#monster::after { content:none; }
#monster[data-variant='1'] { background-image:url('assets/enemy-1.svg'); }
#monster[data-variant='2'] { background-image:url('assets/enemy-2.svg'); }
#monster[data-variant='3'] { background-image:url('assets/enemy-3.svg'); }
#monster[data-variant='4'] { background-image:url('assets/enemy-4.svg'); }
#monster.boss[data-variant='0'] { background-image:url('assets/enemy-0-boss.svg'); }
#monster.boss[data-variant='1'] { background-image:url('assets/enemy-1-boss.svg'); }
#monster.boss[data-variant='2'] { background-image:url('assets/enemy-2-boss.svg'); }
#monster.boss[data-variant='3'] { background-image:url('assets/enemy-3-boss.svg'); }
#monster.boss[data-variant='4'] { background-image:url('assets/enemy-4-boss.svg'); }
#monster.hit { transform:translateX(4px) scale(.96); }
.battle-copy { position:absolute; right:14px; top:14px; width:190px; padding:10px 12px; background:#fff8e9ed; border:1px solid #cfb888; border-radius:10px; z-index:3; box-shadow:0 3px 0 #9d7d4912; }
.battle-label { font-size:9px; color:#8a7764; }
#mob-name { font-size:18px; margin:2px 0 7px; color:#58435c; }
.hp-label,.hp-label strong { font-size:9px; color:#776777; }
.hp-track { height:7px; background:#e7d5ca; }.hp-fill { background:linear-gradient(90deg,#e28a89,#f0afa0); }
#next-boss { font-size:9px; margin-top:5px; color:#877464; }
.battle-foot { margin-top:9px; border-color:#6b5970; color:#e4d4b9; padding-top:0; min-height:20px; font-size:10px; }
.keyboard-hint kbd { border-color:#807083; }
#boss-timer-wrap { bottom:12px; left:15px; right:15px; color:#ffe0a6; font-size:10px; }
.boss-track { background:#635365; }#boss-timer-fill { background:#ebbd65; }
#battle-view.night-mode,#battle-view.boss-mode { background:#3d3053; }
.night-mode .battle-body { box-shadow:inset 0 0 55px #7767ce50; }
.night-mode #work-status,.boss-mode #work-status { color:#ffe1a7; }
.boss-mode #mob-name { color:#9d5360; }.boss-mode .hp-fill { background:#d86e81; }
#attack-projectile { position:absolute; left:33%; top:52%; font-size:34px; color:#fff7c1; text-shadow:0 0 5px #f7bc56,0 0 15px #f7bd4b; opacity:0; z-index:4; pointer-events:none; --projectile-travel:220px; }
#attack-projectile.flying { animation:chalk-flight 360ms ease-out; }
#teacher-hero.attacking { animation:hero-cast 360ms ease-out; }
#teacher-hero.celebrate { animation:hero-cheer 600ms ease-in-out; }
#teacher-hero.celebrate .hero-celebration { animation:praise-pop 600ms ease; }
#teacher-hero.level-up { animation:hero-level 900ms ease; }
@keyframes chalk-flight { 0% { opacity:0; transform:translateX(0) scale(.3); } 20% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; transform:translateX(var(--projectile-travel)) scale(.7); } }
@keyframes hero-cast { 40% { transform:translateX(5px) rotate(2deg); } }
@keyframes hero-cheer { 30%,70% { transform:translateY(var(--hero-hop)); } }
@keyframes hero-level { 35%,65% { transform:translateY(var(--hero-hop)); filter:brightness(1.16) drop-shadow(0 0 8px #ffdf84); } }
@keyframes praise-pop { 15%,80% { opacity:1; } }
.combat-metrics { background:#37344f; border-color:#89725d; color:#fff0cd; }
.combat-metrics>div+div { border-color:#675872; }.combat-metrics .metric-label,.combat-metrics small { color:#cabdd4; }
.skill-btn,#btn-s2 { background:linear-gradient(120deg,#514665,#393650); border:1px solid #b39770; color:#fff0ca; box-shadow:0 3px 0 #19192b40; }
.skill-btn:hover:not(:disabled),#btn-s2:hover:not(:disabled) { background:#62506f; border-color:#ecd093; }
.skill-icon { background:linear-gradient(140deg,#f5bc76,#d3855b); color:#fff4d0; border:1px solid #ffdc9a; box-shadow:inset 0 0 0 2px #aa635230; }
#btn-s2 .skill-icon { background:linear-gradient(140deg,#bd98ed,#836dbf); color:#fff1ed; border:1px solid #e2c9f3; }
.s-sub { color:#dbccdf; }.skill-state,#btn-s2 .skill-state { color:#bce7d3; }
.skill-btn:disabled { background:#403a51!important; border-color:#79657c!important; }
.skill-btn:disabled .skill-icon { background:#6e607e!important; color:#c9bacf!important; }
.skill-btn:disabled .skill-state { color:#c4afca!important; }
.skill-btn[data-active='true']:disabled,#btn-s2[data-active='true']:disabled { background:#574764!important; border-color:#e5c281!important; }
.skill-btn[data-active='true']:disabled .skill-state,#btn-s2[data-active='true']:disabled .skill-state { color:#c6f2d9!important; }
.goal-card { background:#363249; border-color:#837052; color:#f2debd; }.goal-card .eyebrow,#day-progress-text { color:#c9b7cf; }
#panel-area { border:2px solid #c6a778; box-shadow:0 6px 0 #181b302e; }
#tab-nav { background:#ebe0c9; border-color:#d5bf9b; }.tab-btn.active { color:#5b4e88; }.tab-btn.active::after { background:#8c77ae; }
.up-card { background:linear-gradient(115deg,#fffdf6,#f7ecd8); border-color:#deccac; }
.upgrade-icon { background:#f4ddae; color:#987343; border:1px solid #d9b67d; box-shadow:inset 0 0 0 2px #fff4d4; }
.up-card:nth-child(2) .upgrade-icon { background:#dcebe2; color:#577c6a; border-color:#9dbea9; }
.up-card:nth-child(3) .upgrade-icon { background:#e9dff3; color:#8961a0; border-color:#bfa3d0; }
.up-btn { background:#7c689b; border-color:#685684; box-shadow:0 2px 0 #58456b; }.up-btn:hover:not(:disabled) { background:#685484; }
.up-btn:disabled { background:#e8ddc9; border-color:#d3bea0; color:#8b775e; box-shadow:none; }
.milestone-bar { background:#a6cfb5; height:3px; }
.gacha-banner,.prestige-panel { background:#f2e7d0; }.relic-item { background:#f7eddb; }
.app-footnote { color:#b6a5c5; }#toast { background:#49405d; border:1px solid #c7ab76; }
@media (min-width:600px) and (max-width:999px) {
    .game-layout { grid-template-columns:1.1fr 1fr; gap:14px; }
    .battle-body { height:290px; }#teacher-hero { left:4px; width:155px; height:205px; bottom:12px; }
    #monster { right:14px; width:110px; height:110px; bottom:14px; }
    .battle-copy { width:155px; top:10px; right:10px; padding:8px; }.scene-caption { display:none; }
    #mob-name { font-size:15px; }#attack-projectile { --projectile-travel:110px; }
}
@media (max-width:599px) {
    body { padding:12px 10px 22px; }#header { padding:10px 12px; margin-bottom:10px; border-radius:14px; }
    .topline { margin-bottom:8px; }.overview-row { gap:8px; }.brand h1 { font-size:16px; }.brand p { display:none; }
    .hud-badge { padding:6px 8px; }.hud-badge strong { font-size:14px; }#player-level { font-size:17px; }
    #player-xp-track { height:6px; }.game-layout { grid-template-columns:1fr; gap:10px; }.play-column { display:flex; gap:8px; }
    #battle-view { padding:8px; border-radius:14px; }.battle-top { margin-bottom:7px; }.battle-top .eyebrow,.live-status { font-size:9px; }
    .battle-body { height:200px; }.scene-caption { display:none; }
    #teacher-hero { left:10px; bottom:10px; width:142px; height:166px; }
    #teacher-sprite { height:calc(100% - 17px); }.hero-badge { font-size:8px; padding:1px 7px; }
    #monster { right:19px; bottom:8px; width:105px; height:105px; }
    .battle-copy { top:9px; right:9px; width:154px; padding:7px 9px; }.battle-label { display:none; }
    #mob-name { font-size:15px; margin:0 0 5px; }.hp-label,.hp-label strong { font-size:9px; margin-bottom:4px; }.hp-track { height:6px; }
    #next-boss { display:block; font-size:8px; margin-top:4px; }
    .battle-foot { margin-top:6px; min-height:18px; font-size:9px; }.keyboard-hint { display:none; }
    #boss-timer-wrap { bottom:8px; left:10px; right:10px; font-size:9px; }
    #attack-projectile { font-size:25px; --projectile-travel:135px; }
    .combat-metrics>div { padding:5px 10px; }.combat-metrics strong { font-size:18px; }.metric-label { font-size:10px; }
    .skill-btn,#btn-s2 { min-height:50px; padding:8px 10px; }.skill-icon { width:29px; height:29px; }
    .s-title { font-size:12px; }.s-sub { display:none; }.skill-state { font-size:9px; }
    .goal-card,.app-footnote { display:none; }.tab-btn { height:44px; }.tab-view { padding:13px 11px; max-height:none; overflow:visible; }
    .panel-heading { margin-bottom:10px; }.up-card { min-height:58px; padding:8px 9px; }.upgrade-list { gap:7px; }
    .up-btn { min-height:40px; }.up-desc { display:none; }
}
@media (max-width:599px) and (max-height:740px) {
    body { padding:8px; }#header { padding:8px 10px; margin-bottom:8px; }.brand h1 { font-size:14px; }
    .hud-badge { padding:4px 7px; }.hud-badge strong { font-size:13px; }.overview-row { gap:6px; }#player-level { font-size:15px; }
    .game-layout { gap:8px; }.play-column { gap:6px; }.battle-body { height:152px; }
    #teacher-hero { left:9px; bottom:7px; width:112px; height:128px; --hero-hop:-3px; }
    #monster { right:21px; bottom:5px; width:80px; height:80px; }
    .battle-copy { top:7px; right:8px; width:145px; padding:6px 8px; }#mob-name { font-size:13px; }
    #next-boss { display:none; }.combat-metrics>div { padding:3px 9px; }.combat-metrics strong { font-size:16px; }
    .skill-btn,#btn-s2 { min-height:44px; padding:5px 8px; }.skill-icon { width:25px; height:25px; }
    .tab-btn { height:40px; }.tab-view { padding:8px 9px; }#tab-stat .panel-heading { display:none; }
    .up-card { min-height:52px; padding:6px 8px; }.upgrade-list { gap:5px; }.up-title { font-size:12px; }
    .help-details { margin-top:5px; }.quiet-note { margin-top:3px; padding-top:5px; }#attack-projectile { --projectile-travel:120px; }
}
@media (max-width:359px) and (max-height:650px) {
    .battle-body { height:130px; }#teacher-hero { height:109px; width:96px; bottom:6px; }
    #monster { width:63px; height:63px; right:21px; bottom:5px; }.battle-copy { width:138px; padding:5px 7px; }
    #mob-name { font-size:12px; }.up-card { min-height:48px; }.skill-icon { width:23px; height:23px; }
    #attack-projectile { --projectile-travel:100px; }
}
@media (min-width:600px) and (max-height:600px), (max-width:599px) and (max-height:450px) {
    body { padding:7px; }#header { padding:7px 10px; margin-bottom:7px; }.brand h1 { font-size:13px; }.brand p { display:none; }
    .topline { margin-bottom:5px; }.overview-row { grid-template-columns:1fr 1fr; gap:12px; }#player-progress { grid-row:auto; }
    .hud-badge { padding:3px 5px; flex-direction:row; align-items:center; }.hud-badge strong { font-size:11px; }.resource-label { font-size:8px; }
    #player-level { font-size:13px; }#player-xp { font-size:8px; }.growth-caption { display:none; }.game-layout { grid-template-columns:1fr 1fr; gap:8px; }
    .play-column { gap:5px; }#battle-view { padding:6px; }.battle-top { margin-bottom:5px; }.battle-top .eyebrow,.live-status { font-size:8px; }
    .battle-body { height:132px; }#teacher-hero { width:92px; height:105px; bottom:7px; left:0; --hero-hop:-3px; }
    #monster { width:64px; height:64px; right:14px; bottom:5px; }.battle-copy { width:126px; top:6px; right:6px; padding:5px 7px; }
    #mob-name { font-size:11px; }.hp-label,.hp-label strong { font-size:8px; }.battle-label,#next-boss,.scene-caption { display:none; }
    .hero-badge { font-size:7px; }.hero-celebration { font-size:8px; }.battle-foot { min-height:14px; margin-top:4px; font-size:8px; }
    .combat-metrics>div { padding:2px 7px; flex-direction:row; }.metric-label { font-size:8px; }.combat-metrics strong { font-size:13px; }
    .skill-btn,#btn-s2 { min-height:37px; padding:4px 6px; gap:4px; }.skill-icon { width:21px; height:21px; }.s-title { font-size:10px; }.skill-state { font-size:8px; }.s-sub { display:none; }
    .goal-card,.app-footnote { display:none; }.tab-btn { height:35px; font-size:9px; gap:3px; }.tab-view { padding:6px 7px; max-height:calc(100dvh - 126px); overflow-y:auto; }
    #tab-stat .panel-heading { display:none; }.up-card { min-height:43px; padding:4px 6px; gap:6px; }.up-title { font-size:10px; }.up-stat { font-size:8px; }
    .up-btn { min-width:48px; min-height:32px; font-size:9px; }.upgrade-icon { width:23px; height:23px; }.up-desc { display:none; }
    #tab-stat .help-details,#tab-stat .quiet-note { display:none; }#attack-projectile { font-size:22px; --projectile-travel:75px; }
    #boss-timer-wrap { bottom:6px; left:8px; right:8px; font-size:8px; }
}
@media (prefers-reduced-motion:reduce) { #monster.hit { transform:none; } }
@media (max-width:599px) and (min-height:451px) and (max-height:840px) {
    #header { padding:6px 9px; }.topline { margin-bottom:5px; }.brand-mark { width:27px; height:27px; }
    #btn-sound { width:28px; height:28px; }#btn-sound .icon { width:16px; height:16px; }
    .overview-row { gap:4px; }.hud-badge { padding:3px 7px; }#player-level { font-size:13px; }
    .progress-label { margin-bottom:2px; }#player-xp-track { height:4px; }
    .battle-body { height:140px; }#teacher-hero { height:117px; width:105px; }
    #monster { height:71px; width:71px; }.battle-copy { padding:5px 7px; }#mob-name { font-size:12px; }
    .up-card { min-height:48px; padding:4px 8px; }.up-btn { min-height:38px; }
    .play-column { gap:5px; }.game-layout { gap:7px; }
}
@media (max-width:599px) and (min-height:451px) and (max-height:620px) {
    .battle-body { height:112px; }#teacher-hero { height:92px; width:82px; bottom:5px; }
    #monster { height:50px; width:50px; bottom:4px; }.battle-copy { top:5px; padding:4px 7px; }
    #mob-name { font-size:11px; margin-bottom:4px; }.hp-label,.hp-label strong { font-size:8px; margin-bottom:3px; }.hp-track { height:5px; }
    .up-card { min-height:46px; }.up-btn { min-height:36px; }.combat-metrics>div { padding:2px 9px; }
    .skill-btn,#btn-s2 { min-height:40px; }.battle-foot { min-height:15px; font-size:8px; margin-top:4px; }
    .battle-top { margin-bottom:5px; }#attack-projectile { font-size:21px; --projectile-travel:105px; }
}
@media (max-width:359px) and (min-height:451px) and (max-height:580px) {
    .battle-body { height:100px; }#teacher-hero { height:82px; width:75px; }
    #monster { width:43px; height:43px; }.hero-badge { font-size:7px; }
}
@media (min-width:600px) and (max-height:600px), (max-width:599px) and (max-height:450px) {
    .battle-body { height:88px; }#teacher-hero { height:70px; width:65px; bottom:5px; }
    #monster { width:38px; height:38px; bottom:4px; }.battle-copy { width:122px; top:3px; padding:2px 6px; }
    #mob-name { margin-bottom:3px; font-size:10px; }.hp-label,.hp-label strong { font-size:7px; margin-bottom:2px; }.hp-track { height:4px; }
    .tab-btn { height:40px; }#attack-projectile { top:54%; --projectile-travel:75px; }
}
@media (min-width:1000px) and (max-height:820px) {
    .battle-body { height:220px; }#teacher-hero { width:160px; height:180px; bottom:12px; }
    #monster { width:105px; height:105px; bottom:10px; }.battle-copy { width:180px; top:10px; padding:7px 10px; }
    .battle-label { display:none; }#mob-name { font-size:16px; margin:0 0 5px; }#next-boss { font-size:8px; margin-top:4px; }
    #attack-projectile { --projectile-travel:220px; }
}

/* 설정 탭 맨 아래: 저작권 · 엽쌤 앱 모음 링크 (다른 엽쌤 앱들과 같은 문구) */
.app-credit { margin: 18px 0 4px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--muted); }
.app-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }