*{box-sizing:border-box}
:root{--bg:#08111f;--panel:rgba(7,18,34,.92);--line:#4f8fc4;--text:#eef5ff;--muted:#aebfd5}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,"Microsoft YaHei",sans-serif;color:var(--text)}
button{font:inherit;color:inherit}
#game{width:100%;height:100%;position:relative;background:#08111f}
.topbar{height:68px;position:absolute;z-index:20;inset:0 0 auto 0;display:flex;align-items:center;gap:24px;padding:0 28px;background:rgba(5,15,29,.95);border-bottom:1px solid #294665}
.brand{font-size:25px;letter-spacing:.5px;display:flex;align-items:center;gap:12px;min-width:245px}.phoenix{font-size:31px}
.motto{font-size:14px;color:#b8c9df;flex:1}.clock{font-variant-numeric:tabular-nums;color:#d5e2f1}
.sidebar{position:absolute;z-index:25;top:68px;bottom:0;left:0;width:154px;background:rgba(6,17,32,.94);border-right:1px solid #294665;padding:18px 0}
.nav{width:100%;height:54px;border:0;background:transparent;text-align:left;padding:0 24px;cursor:pointer;font-size:20px;display:flex;gap:15px;align-items:center;color:#d9e7f7}.nav span{font-size:15px}.nav:hover,.nav.active{background:rgba(41,91,138,.55);color:#fff}.nav-divider{height:1px;background:#294665;margin:14px 20px}
#scene{position:absolute;z-index:1;left:154px;top:68px;right:0;bottom:0;overflow:hidden}
.room{position:absolute;inset:0;background-image:url("assets/room.png");background-position:center;background-size:cover;background-repeat:no-repeat;filter:saturate(.9)}
.vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 40%,rgba(0,0,0,.36) 100%);pointer-events:none}
.hotspot{position:absolute;z-index:5;border:1px solid #4b9bd2;border-radius:14px;background:rgba(4,18,37,.9);box-shadow:0 8px 24px rgba(0,0,0,.4);padding:11px 22px;min-width:180px;text-align:left;cursor:pointer;transition:.18s;backdrop-filter:blur(4px)}
.hotspot:hover{transform:translateY(-3px);background:rgba(13,39,69,.95);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.hotspot strong{display:block;font-size:20px}.hotspot small{display:block;color:#b8cce3;margin-top:4px}
.work{left:38%;top:14%}.reading{right:12%;top:14%}.photo{right:6%;top:40%}.travel{right:12%;bottom:27%}.life{left:10%;top:28%}.games{left:11%;bottom:25%}
#player{position:absolute;z-index:8;width:38px;height:58px;left:50%;top:55%;transform:translate(-50%,-50%);transition:transform .05s linear;filter:drop-shadow(0 8px 5px rgba(0,0,0,.45));pointer-events:none}
#player:before{content:"";position:absolute;width:25px;height:25px;left:6px;top:0;background:#efc2a0;border:3px solid #221c27;border-radius:45% 45% 35% 35%}
#player:after{content:"";position:absolute;width:32px;height:31px;left:3px;top:25px;background:#253a55;border:3px solid #1c1b24;border-radius:8px 8px 5px 5px}
#player span:before,#player span:after{content:"";position:absolute;z-index:2;top:4px;width:10px;height:9px;background:#30272e;border-radius:8px}
#player span:before{left:7px}#player span:after{right:7px}
#interaction{position:absolute;z-index:10;left:18px;bottom:16px;padding:10px 18px;border:1px solid #477aa7;border-radius:9px;background:rgba(5,18,33,.9);font-size:13px;color:#d9e7f7}
.intro-card{position:absolute;z-index:7;right:22px;bottom:16px;width:290px;padding:20px 22px;border:1px solid #3d82b4;border-radius:12px;background:rgba(5,18,34,.91);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.card-title{font-size:17px;color:#9fd4ff;margin-bottom:12px}.intro-card p{font-size:13px;line-height:1.8;color:#d0dbea;margin:5px 0}.signature{text-align:right;margin-top:13px;color:#dce9f8}
.modal{position:absolute;z-index:50;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(5px)}.modal.hidden{display:none}
.modal-box{position:relative;width:min(520px,calc(100% - 40px));padding:34px;border:1px solid #4f91c3;border-radius:18px;background:rgba(7,20,38,.97);box-shadow:0 25px 70px #000}.close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:30px;cursor:pointer;color:#a8bbd0}.modal-icon{font-size:32px;color:#8fcaff}.modal-box h2{margin:8px 0 12px;font-size:27px}.modal-box p{color:#c5d2e2;line-height:1.8}.modal-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.modal-links a,.modal-links button{border:1px solid #477da7;background:#112b47;border-radius:8px;padding:9px 14px;text-decoration:none;cursor:pointer}
@media(max-width:800px){.sidebar{display:none}#scene{left:0}.topbar{padding:0 14px}.motto{display:none}.brand{min-width:0}.clock{margin-left:auto}.hotspot{min-width:130px;padding:8px 12px}.hotspot strong{font-size:15px}.hotspot small{font-size:10px}.intro-card{display:none}.work{left:38%}.reading{right:5%}.photo{right:3%}.travel{right:5%}.life{left:4%}.games{left:5%}}