:root{
  --bg:#111827;
  --panel:#182230;
  --panel2:#202c3a;
  --text:#f5f7fb;
  --muted:#aab5c4;
  --line:#334155;
  --accent:#78c2ff;
  --safe:#76d49b;
  --belong:#b69cff;
  --energy:#f5c66c;
  --danger:#ef8f8f;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0f172a,#111827 58%,#0b1220);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button{font:inherit}
.game-shell{max-width:1180px;margin:0 auto;padding:18px;display:grid;gap:14px}
.topbar,.footerbar,.hud-panel,.dialogue-panel,.memory-drawer{background:rgba(24,34,48,.92);border:1px solid rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(10px)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
h1{margin:3px 0 0;font-size:clamp(24px,3vw,38px)}
.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:800}
.day-status{display:flex;gap:8px;align-items:center;font-weight:700}.day-status span{background:var(--panel2);padding:8px 10px;border-radius:10px}
.game-stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.8fr);grid-template-areas:"scene hud" "scene dialogue";gap:14px}
.scene{grid-area:scene;position:relative;min-height:630px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#9ec6d7}
.scene-bg{position:absolute;inset:0;background:linear-gradient(#b8ddf1 0 28%,#d8e7e8 28% 29%,#e9e0c9 29% 72%,#b9a37e 72% 100%)}
.scene-bg::before{content:"";position:absolute;left:7%;right:7%;top:33%;height:20%;background:repeating-linear-gradient(90deg,#8f6f4f 0 14%,#6e5139 14% 15%,#8f6f4f 15% 29%);border:10px solid #755539;box-shadow:inset 0 0 0 4px rgba(255,255,255,.2)}
.scene-bg::after{content:"";position:absolute;left:10%;right:10%;bottom:12%;height:14%;background:repeating-linear-gradient(90deg,transparent 0 13%,#75563f 13% 15%,transparent 15% 28%);opacity:.7}
.scene-caption{position:absolute;left:18px;top:18px;background:rgba(15,23,42,.8);padding:12px 14px;border-radius:14px;max-width:70%;display:flex;flex-direction:column;gap:2px}
.scene-caption span{font-size:13px;color:#d9e2ec}
.student-area{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);width:180px;height:350px;transition:transform .35s ease,filter .35s ease}
.student-shadow{position:absolute;bottom:0;left:20%;width:60%;height:22px;border-radius:50%;background:rgba(0,0,0,.18)}
.student-body{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:112px;height:305px}
.student-head{position:absolute;top:0;left:16px;width:80px;height:90px;background:#e6b58d;border-radius:45% 45% 48% 48%;z-index:3}
.hair{position:absolute;inset:-5px -4px auto -4px;height:40px;background:#3b2a23;border-radius:50% 50% 35% 35%}
.face{position:absolute;inset:0}.eye{position:absolute;top:43px;width:7px;height:7px;background:#2b211d;border-radius:50%}.eye-left{left:22px}.eye-right{right:22px}.mouth{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:24px;height:8px;border-bottom:3px solid #8d4f44;border-radius:0 0 50% 50%}
.torso{position:absolute;top:78px;left:7px;width:98px;height:135px;background:#6b7b91;border-radius:34px 34px 18px 18px;box-shadow:inset 0 -10px rgba(0,0,0,.08)}
.legs{position:absolute;top:205px;left:20px;width:72px;height:95px;border-left:24px solid #39475a;border-right:24px solid #39475a}
.mood-low .student-body{transform:translateX(-50%) rotate(2deg)}
.mood-low .mouth{border-bottom:0;border-top:3px solid #8d4f44;border-radius:50% 50% 0 0;top:67px}
.mood-good .student-body{transform:translateX(-50%) rotate(-1deg)}
.mood-good .mouth{height:11px;border-bottom-width:4px}
.teacher-area{position:absolute;right:9%;bottom:13%;width:120px;height:300px;opacity:.78}.teacher-head{position:absolute;left:31px;top:0;width:58px;height:66px;border-radius:50%;background:#dba982}.teacher-body{position:absolute;left:20px;top:58px;width:80px;height:150px;border-radius:30px 30px 12px 12px;background:#61738c}
.ambient-characters{position:absolute;inset:0;pointer-events:none}.ambient-characters span{position:absolute;bottom:14%;width:60px;height:145px;border-radius:26px 26px 12px 12px;background:#7f8ea2;opacity:.55}.ambient-characters span::before{content:"";position:absolute;left:10px;top:-42px;width:40px;height:48px;border-radius:50%;background:#d7a783}
.hud-panel{grid-area:hud;padding:14px}.meter-grid{display:grid;gap:11px}.meter-card{background:var(--panel2);padding:12px;border-radius:14px}.meter-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}.meter{height:10px;background:#0e1623;border-radius:999px;overflow:hidden}.meter-fill{height:100%;width:50%;transition:width .35s ease}.meter-fill.safety{background:var(--safe)}.meter-fill.belong{background:var(--belong)}.meter-fill.energy{background:var(--energy)}
.dialogue-panel{grid-area:dialogue;padding:16px;align-self:start}.speaker-line{display:flex;gap:10px;align-items:center}.speaker-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2e4054;font-weight:800}.speaker-name{font-weight:800}.speaker-meta{font-size:12px;color:var(--muted)}.dialogue-text{font-size:18px;line-height:1.45;margin:16px 0 14px}.choice-grid{display:grid;gap:10px}.choice-btn{width:100%;text-align:left;border:1px solid var(--line);border-radius:13px;background:#121c29;color:var(--text);padding:12px 13px;cursor:pointer;transition:.18s ease}.choice-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.choice-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.choice-letter{font-weight:900;color:var(--accent);margin-right:6px}.consequence-box{margin-top:14px;padding:14px;border-radius:14px;background:#101926;border:1px solid var(--line)}.consequence-title{font-weight:800;margin-bottom:6px}.consequence-text{color:#d7dee8;line-height:1.5}.hidden{display:none!important}.primary-btn,.secondary-btn,.icon-btn{border:0;cursor:pointer}.primary-btn{margin-top:12px;padding:11px 15px;border-radius:12px;background:var(--accent);color:#0d1723;font-weight:900}.secondary-btn{padding:10px 13px;border-radius:11px;background:#202c3a;color:var(--text);border:1px solid var(--line)}.icon-btn{width:42px;height:42px;border-radius:12px;background:#202c3a;color:var(--text)}
.memory-drawer{padding:14px 16px;overflow:hidden}.memory-header{display:flex;align-items:center;justify-content:space-between}.memory-header h2{margin:2px 0;font-size:18px}.memory-list{display:none;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:12px}.memory-drawer.open .memory-list{display:grid}.memory-item{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13px;color:#d7dee8}
.footerbar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}.progress-dots{display:flex;gap:7px}.progress-dot{width:9px;height:9px;border-radius:50%;background:#46556a}.progress-dot.done{background:var(--safe)}.progress-dot.active{background:var(--accent)}
.ending-screen{position:fixed;inset:0;background:rgba(5,10,18,.88);display:grid;place-items:center;padding:20px;z-index:100}.ending-card{width:min(680px,100%);background:#172230;border:1px solid var(--line);border-radius:20px;padding:24px}.ending-card h2{font-size:32px;margin:7px 0 12px}.ending-card p{line-height:1.6;color:#d7dee8}.reflection-box{margin-top:18px;background:#202c3a;border-radius:14px;padding:14px}
@media(max-width:820px){.game-stage{grid-template-columns:1fr;grid-template-areas:"scene" "hud" "dialogue"}.scene{min-height:480px}.teacher-area{right:4%;transform:scale(.8);transform-origin:bottom}.student-area{transform:translateX(-50%) scale(.82);transform-origin:bottom}.scene-caption{max-width:88%}.topbar{align-items:flex-start}.day-status{flex-direction:column;align-items:flex-end}}
@media(max-width:520px){.game-shell{padding:10px}.scene{min-height:420px}.scene-caption{left:10px;top:10px}.dialogue-text{font-size:16px}.topbar,.hud-panel,.dialogue-panel,.memory-drawer,.footerbar{border-radius:14px}.day-status span{font-size:12px}.student-area{left:46%}.teacher-area{right:-3%}}