*{box-sizing:border-box}
:root{--ink:#eef0ff;--muted:#aeb4ce;--line:rgba(255,255,255,.12);--panel:rgba(30,28,52,.72);--accent:#9a82ff}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 70% 0,#29294b 0,#17172a 42%,#11111f 100%);color:var(--ink)}
button,a{font:inherit}
.topbar{width:min(1240px,calc(100% - 28px));margin:14px auto 0;min-height:62px;display:flex;align-items:center;gap:16px;padding:10px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(20,20,37,.72);backdrop-filter:blur(14px)}
.back{color:#dce0ff;text-decoration:none;font-weight:850;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.07)}
.title{flex:1;min-width:0}.title strong,.title span{display:block}.title strong{font-size:15px}.title span{font-size:11px;color:#9ca4c5;margin-top:2px}
.modePill{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(154,130,255,.16);color:#cfc5ff;font-size:11px;font-weight:950;letter-spacing:.04em}.modePill i{width:8px;height:8px;border-radius:50%;background:#9a82ff;box-shadow:0 0 14px #9a82ff}
.page{width:min(1240px,calc(100% - 28px));margin:0 auto;padding:28px 0 64px}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}.kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(154,130,255,.15);color:#cfc5ff;font-size:10px;font-weight:950;letter-spacing:.1em}.intro h1{margin:9px 0 8px;font-size:clamp(29px,4vw,48px);line-height:1.06;letter-spacing:-.05em}.intro p{margin:0;color:var(--muted);max-width:720px;font-size:14px;line-height:1.65}.guide{min-width:255px;padding:13px 15px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.055)}.guide b,.guide span{display:block}.guide span{font-size:11px;color:#aeb5d0;margin-top:5px}
.gameShell{padding:12px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.055);box-shadow:0 28px 90px rgba(0,0,0,.25)}
.stage{position:relative;overflow:hidden;min-height:690px;border-radius:20px;background:linear-gradient(#1d1e34,#10101c);outline:none}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.loading{position:absolute;inset:0;z-index:50;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at center,#292744,#171629);transition:opacity .35s ease}.loading strong,.loading span{display:block}.loading strong{font-size:18px}.loading span{margin-top:6px;color:#9ea5c0;font-size:12px}.loading.hide{opacity:0;pointer-events:none}
.hud{position:absolute;z-index:20;display:flex;gap:8px}.topLeft{left:16px;top:16px;flex-direction:column;padding:11px 13px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(17,17,30,.52);backdrop-filter:blur(10px)}.topLeft span{font-size:9px;color:#bbb2e8;font-weight:900;letter-spacing:.09em}.topLeft strong{font-size:13px}.topRight{right:16px;top:16px}.topRight button{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 12px;background:rgba(21,21,38,.6);color:#fff;font-weight:850;cursor:pointer;backdrop-filter:blur(9px)}
.interaction{position:absolute;z-index:25;left:50%;bottom:18px;transform:translateX(-50%);width:min(560px,calc(100% - 30px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px 11px 15px;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:rgba(19,19,34,.66);backdrop-filter:blur(12px);box-shadow:0 16px 45px rgba(0,0,0,.22)}.interaction small,.interaction strong{display:block}.interaction small{font-size:9px;color:#a8afca}.interaction strong{font-size:13px}.interaction button{border:0;border-radius:12px;padding:10px 14px;background:#8d73f1;color:white;font-weight:900;cursor:pointer}
.dpad{position:absolute;left:16px;bottom:16px;z-index:24;display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:4px}.dpad button{border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(19,19,34,.62);color:#fff;font-weight:950;backdrop-filter:blur(8px)}.dpad [data-dir="up"]{grid-column:2}.dpad [data-dir="left"]{grid-column:1;grid-row:2}.dpad [data-dir="down"]{grid-column:2;grid-row:2}.dpad [data-dir="right"]{grid-column:3;grid-row:2}
.legend{position:absolute;z-index:22;right:16px;bottom:16px;display:flex;gap:9px;padding:9px 11px;border-radius:13px;background:rgba(19,19,34,.56);backdrop-filter:blur(8px);font-size:10px;color:#c4c9de}.legend span{display:flex;align-items:center;gap:5px}.dot{width:7px;height:7px;border-radius:50%}.dot.walk{background:#78d9aa}.dot.bed{background:#f2a7c9}.dot.view{background:#a88cff}
.featureStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.featureStrip article{padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.045)}.featureStrip b,.featureStrip span{display:block}.featureStrip b{font-size:12px}.featureStrip span{font-size:10px;color:#9ca4c0;margin-top:4px;line-height:1.45}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.notes article{padding:15px 17px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.045)}.notes b{font-size:13px}.notes p{margin:6px 0 0;color:#9ea6c2;font-size:11px;line-height:1.55}
@media(max-width:800px){.intro{align-items:flex-start;flex-direction:column}.guide{width:100%}.stage{min-height:610px}.featureStrip{grid-template-columns:1fr 1fr}.notes{grid-template-columns:1fr}.legend{display:none}.interaction{bottom:70px}.topRight{top:auto;bottom:16px;right:16px}.dpad{transform:scale(.9);transform-origin:left bottom}}
@media(max-width:520px){.topbar{width:calc(100% - 18px);margin-top:9px}.page{width:calc(100% - 18px);padding-top:20px}.modePill{display:none}.stage{min-height:540px}.featureStrip{grid-template-columns:1fr}.interaction{width:calc(100% - 18px)}.interaction button{padding:9px 10px;font-size:11px}.topLeft{max-width:58%}.topRight button{font-size:10px;padding:8px 9px}.dpad{left:9px;bottom:8px}}


/* v98 */
.actionButtons{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.actionButtons button{border:0;border-radius:12px;padding:10px 12px;background:#8d73f1;color:#fff;font-weight:900;cursor:pointer}
.actionButtons #jumpAction{background:#4f77b6}
.actionButtons #deskAction{background:#7b657f}
@media(max-width:620px){
  .interaction{align-items:flex-start}
  .actionButtons{max-width:54%;gap:5px}
  .actionButtons button{padding:8px 9px;font-size:10px}
}


/* v99 polish */
.modePill{background:rgba(222,148,207,.16);color:#f0c8e6}
.modePill i{background:#e5a2d3;box-shadow:0 0 14px #e5a2d3}
.kicker{background:rgba(229,162,211,.15);color:#f0c8e6}
.actionButtons #jumpAction{background:#668bc4}
.actionButtons #deskAction{background:#9b6f91}
.interaction{border-color:rgba(244,205,233,.22)}


/* v100 manual interaction */
.actionButtons button:disabled{opacity:.38!important;cursor:not-allowed;filter:saturate(.55)}
.interaction.ready{border-color:rgba(241,191,225,.42);box-shadow:0 0 0 1px rgba(241,191,225,.10),0 16px 45px rgba(0,0,0,.22)}
.interaction.ready strong{color:#fff5fc}


/* v101 prettier room */
.modePill{background:rgba(255,207,240,.18);color:#ffd9ef}
.modePill i{background:#ffb7df;box-shadow:0 0 14px #ffb7df}
.kicker{background:rgba(255,205,236,.16);color:#ffd6eb}
.topLeft{background:rgba(26,23,45,.58)}
.interaction.ready{border-color:rgba(255,199,233,.46);box-shadow:0 0 0 1px rgba(255,205,237,.10),0 18px 45px rgba(0,0,0,.24)}


/* v102 texture construction */
.stage canvas{filter:saturate(1.04) contrast(1.035)}
.interaction.ready{border-color:rgba(255,215,240,.5)}


/* v103 texture pass 2 */
.stage canvas{filter:saturate(1.07) contrast(1.055) brightness(1.015)}
.interaction.ready{border-color:rgba(255,218,242,.54);box-shadow:0 0 0 1px rgba(255,218,242,.12),0 18px 48px rgba(0,0,0,.28)}

/* v105 */
.stage canvas{filter:saturate(1.04) contrast(1.04) brightness(1.01)}


/* v106 realistic avatar switch */
.topRight{align-items:center}
.avatarSwitch{display:flex;gap:3px;padding:3px;border-radius:12px;background:rgba(18,18,34,.58);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(9px)}
.avatarSwitch button{border:0!important;padding:7px 10px!important;background:transparent!important;color:#aeb5cc!important;border-radius:9px!important;font-size:10px!important}
.avatarSwitch button.active{background:rgba(255,223,239,.18)!important;color:#fff5fa!important;box-shadow:inset 0 0 0 1px rgba(255,225,240,.18)}
@media(max-width:620px){.avatarSwitch button{padding:6px 7px!important}.topRight{gap:5px}}