:root{
  --navy:#081a3a;
  --royal:#123d83;
  --blue:#1f58b4;
  --gold:#d7ad43;
  --gold-soft:#f3df9a;
  --white:#ffffff;
  --ink:#10213f;
  --muted:#60708b;
  --panel:#f7f9fd;
  --line:#dce3ef;
  --good:#176b45;
  --warn:#8a5a00;
  --bad:#8a2231;
  --focus:#ffbf47;
}

.purchase-backdrop{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,7,13,.88);backdrop-filter:blur(8px)}
.purchase-card{width:min(620px,100%);padding:clamp(24px,5vw,42px);border:1px solid #e5c36c;background:#111c2a;color:#fff;box-shadow:0 28px 90px #000}
.purchase-card h2{margin:10px 0 15px;font:500 clamp(30px,5vw,46px) Georgia,serif}.purchase-card>p{color:#c5ccd4;line-height:1.65}
.purchase-consent{display:grid;grid-template-columns:22px 1fr;gap:12px;margin:24px 0;padding:17px;border:1px solid #48566a;background:#091321;color:#d8dde3;font-size:14px;line-height:1.55}.purchase-consent input{width:20px;height:20px;accent-color:#d7aa4d}.purchase-consent a{color:#f0cc73;text-decoration:underline}
.purchase-card>div{display:flex;gap:12px;justify-content:flex-end}.purchase-card button{min-height:48px;padding:12px 16px}.purchase-confirm{background:#d6a841;color:#111;font-weight:900}.purchase-confirm:disabled{opacity:.5}.purchase-error{color:#ffb9b9!important;font-weight:700}
@media(max-width:600px){.purchase-card>div{display:grid}.purchase-card button{width:100%}}

*{box-sizing:border-box}
html{background:#eef3fb}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f6f9ff 0,#eef3fb 100%);
}
button,input,select{font:inherit}
button{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  background:var(--white);
  color:var(--ink);
  font-weight:700;
  cursor:pointer;
}
button:hover{border-color:#9caac0}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
button.primary{
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
}
button.gold{
  background:var(--gold);
  color:#221a07;
  border-color:#b78b21;
}
button:disabled{opacity:.52;cursor:not-allowed}
.hidden{display:none!important}
.skip-link{
  position:absolute;left:8px;top:-60px;background:var(--navy);color:white;padding:10px;z-index:50
}
.skip-link:focus{top:8px}
.app-shell{max-width:1240px;margin:0 auto;padding:16px}
.topbar{
  display:flex;gap:20px;justify-content:space-between;align-items:flex-start;
  background:var(--navy);color:white;border-radius:20px;padding:22px;
}
.topbar h1{margin:2px 0 4px;font-size:clamp(1.8rem,4vw,3rem)}
.eyebrow{margin:0;color:var(--gold-soft);font-size:.75rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.subhead{margin:0;color:#dbe6fb}
.status-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stat{
  min-width:88px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:10px 12px;text-align:center
}
.stat span{display:block;font-size:.72rem;color:#dbe6fb}
.stat strong{display:block;font-size:1.15rem;color:white}
.controlbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0}
.danger-lite{color:var(--bad)}
.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}
.progress-panel,.game-panel{
  border:1px solid var(--line);background:white;border-radius:20px
}
.progress-panel{padding:18px}
.progress-panel h2,.progress-panel h3{margin-top:0}
.figure-wrap{
  display:grid;place-items:center;background:linear-gradient(180deg,#fbfcff,#f1f5fb);
  border:1px solid var(--line);border-radius:16px;padding:12px
}
#identityFigure{width:160px;height:auto}
.body-part{fill:none;stroke:#c6cfdd;stroke-width:18;stroke-linecap:round;transition:stroke .3s,filter .3s}
.body-part.revealed{stroke:var(--gold);filter:drop-shadow(0 0 3px rgba(215,173,67,.45))}
.muted{color:var(--muted);font-size:.92rem;line-height:1.45}
.part-key{font-size:.79rem;color:var(--muted);display:grid;gap:6px;margin:14px 0 20px}
.dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--gold);margin-right:6px}
.milestone-list{padding-left:22px;margin:0;display:grid;gap:8px;font-size:.88rem}
.milestone-list li.done{color:var(--good);font-weight:800}
.game-panel{min-height:640px;position:relative;overflow:hidden}
.chapter-map{padding:22px}
.chapter-map h2{margin-top:0}
.chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.chapter-card{
  border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--panel);
  display:flex;flex-direction:column;min-height:270px
}
.chapter-card.free{border-top:5px solid var(--gold)}
.chapter-card.locked{border-top:5px solid var(--royal)}
.chapter-card h3{margin:8px 0 6px}
.chapter-card p{font-size:.9rem;color:var(--muted);line-height:1.45}
.chapter-card .meta{font-size:.78rem;font-weight:800;color:var(--royal)}
.chapter-card .spacer{flex:1}
.lock-note{background:#edf3ff;border-radius:10px;padding:9px;font-size:.78rem;margin-bottom:10px}
.scene-view{padding:22px}
.scene-banner{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.scene-banner h2{margin:4px 0 0}
.scene-badge{
  background:#eef3fb;border:1px solid var(--line);border-radius:999px;padding:8px 12px;
  font-size:.78rem;font-weight:900;white-space:nowrap
}
.visual-stage{
  margin-top:16px;min-height:250px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,#eaf0fb 0,#f9fbff 100%);padding:16px;overflow:hidden
}
.story-text{padding:18px 2px 4px;line-height:1.65}
.story-text h3{margin:0 0 6px}
.action-area{display:grid;gap:10px;padding-top:10px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice{
  text-align:left;min-height:76px;padding:14px;background:white
}
.feedback{
  margin-top:14px;padding:14px;border-radius:14px;border:1px solid var(--line);background:#f7f9fd;line-height:1.55
}
.feedback.good{border-left:5px solid var(--good)}
.feedback.repair{border-left:5px solid var(--warn)}
.feedback.bad{border-left:5px solid var(--bad)}
.feedback h3{margin:0 0 5px}
.meter{
  height:14px;border-radius:999px;background:#dfe6f0;overflow:hidden;border:1px solid #cdd7e5
}
.meter > span{display:block;height:100%;background:var(--royal);width:0;transition:width .3s}
.social-scene{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;align-items:center;min-height:215px}
.phone{
  max-width:230px;margin:auto;border:8px solid #17233d;border-radius:28px;background:white;padding:10px;min-height:190px
}
.post{border:1px solid var(--line);border-radius:12px;padding:10px;margin:7px 0;font-size:.78rem}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--royal);display:inline-grid;place-items:center;color:white;font-weight:900}
.path-field{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;min-height:220px}
.path{
  min-height:160px;border:2px dashed #9aa9c2;border-radius:16px;padding:10px;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,#ffffffaa,#d9e6f8)
}
.workshop{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gear{
  min-height:160px;border-radius:50%;border:8px dashed var(--gold);display:grid;place-items:center;
  text-align:center;padding:14px;background:#fff9e9;font-weight:900
}
.dialogue-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.person{background:white;border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center}
.person .face{width:60px;height:60px;border-radius:50%;background:var(--royal);color:white;display:grid;place-items:center;margin:auto;font-weight:900}
.resource-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.resource{
  border:1px solid var(--line);border-radius:14px;padding:12px;background:white;text-align:center
}
.resource strong{font-size:1.4rem;display:block}
.pause-overlay{
  position:absolute;inset:0;background:rgba(8,26,58,.82);display:grid;place-items:center;padding:24px;z-index:20
}
.pause-card{max-width:440px;background:white;border-radius:18px;padding:24px;text-align:center}
.footer-note{font-size:.78rem;color:var(--muted);padding:12px 4px}
.notice{
  border:1px solid #dac179;background:#fff8df;border-radius:12px;padding:12px;font-size:.88rem;line-height:1.5
}
.real-life{
  border-left:5px solid var(--gold);background:#fffaf0;border-radius:12px;padding:14px;margin-top:10px
}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .progress-panel{order:2}
  .game-panel{min-height:590px}
  .chapter-grid{grid-template-columns:1fr}
  .chapter-card{min-height:0}
  .figure-wrap{max-width:270px;margin:auto}
}
@media (max-width:620px){
  .app-shell{padding:8px}
  .topbar{border-radius:14px;padding:16px;flex-direction:column}
  .status-row{justify-content:flex-start}
  .layout{gap:8px}
  .progress-panel,.game-panel{border-radius:14px}
  .scene-view,.chapter-map{padding:14px}
  .scene-banner{flex-direction:column}
  .choice-grid,.social-scene,.path-field,.workshop,.dialogue-stage,.resource-row{grid-template-columns:1fr}
  .path{min-height:90px}
  .gear{min-height:120px;border-radius:18px}
  .visual-stage{min-height:180px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}