@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--white:#e9ebe6;--soft:#a4b4b4;--accent:#c7ddba;--dark:#0b171a;--glass:rgba(8,19,23,.87)}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#111b1d;color:var(--white);font-family:Manrope,Arial,sans-serif;user-select:none;-webkit-tap-highlight-color:transparent}button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d9f1c9;outline-offset:4px}.hidden{display:none!important}#viewport,#scene{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}#scene{display:block;touch-action:none;cursor:default}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 60% 40%,transparent 30%,rgba(6,12,14,.3) 100%);z-index:1}#grain{position:fixed;inset:0;pointer-events:none;opacity:.1;z-index:2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
#loading{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;gap:17px;align-items:center;justify-content:center;background:#0b1618}#loading strong{font:900 64px/.8 Barlow Condensed,Impact,sans-serif;letter-spacing:13px}#loading small{font-size:10px;color:#9bab9d;letter-spacing:4px;font-weight:800}.loading-ring{width:44px;height:44px;border:2px solid #506b61;border-top-color:#d4eabf;border-radius:50%;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.page{position:absolute;inset:0;z-index:10;overflow:auto;overscroll-behavior:contain}.screen{background:linear-gradient(90deg,rgba(7,15,18,.96) 0%,rgba(6,17,20,.83) 30%,rgba(6,17,20,.35) 64%,rgba(5,12,15,.12) 100%)}
#mainMenu{display:flex;flex-direction:column;justify-content:space-between;padding:32px clamp(24px,5.2vw,92px) 34px}.top-brand,.menu-footer{display:flex;justify-content:space-between;align-items:center;gap:20px}.top-brand{color:#c3d0cb;font-size:10px;letter-spacing:3px;font-weight:800}.brand-symbol{display:inline-grid;place-items:center;border:1px solid #a7bca7;border-radius:50%;width:34px;height:34px;margin-right:10px;font-size:19px}.top-brand i{font-style:normal;color:#7c9b95}.menu-footer{font-size:10px;color:#9daca8;letter-spacing:2.3px;font-weight:700}.menu-footer strong{color:#e6ecd9}
.menu-content{width:min(470px,100%);margin-bottom:3vh}.caption,.eyebrow{font-size:11px;color:#b7d0be;font-weight:800;letter-spacing:4px}h1,h2,p{margin-top:0}.menu-content h1{font:900 clamp(92px,12vw,175px)/.72 Barlow Condensed,Impact,sans-serif;letter-spacing:-1.3px;margin:33px 0 29px;filter:drop-shadow(0 4px 30px #0009)}.menu-content h1 span{display:block;color:#c6dbcc;letter-spacing:5px}.thinrule{height:1px;width:86px;background:#a9c4ba;margin:0 0 23px}.menu-content p{font-size:13px;color:#d0ddd3;line-height:1.8;max-width:350px;margin-bottom:39px;text-shadow:0 1px 9px #001}
.menu-items{display:flex;flex-direction:column;gap:1px;width:min(365px,100%)}.menu-item{width:100%;background:none;border:0;border-bottom:1px solid #a4bcb933;display:flex;align-items:center;gap:20px;text-align:left;padding:14px 6px;transition:background .2s,color .2s,padding .2s;font-size:13px;font-weight:800;letter-spacing:2.1px;color:#e1e8df}.menu-item span:nth-child(2){flex:1}.menu-item .menu-index{width:23px;color:#809c8c;font-size:12px}.menu-item i{font-style:normal;opacity:0;color:#d2f3c8}.menu-item:hover,.menu-item:focus-visible{background:#c4e0c412;color:#fff;padding-left:12px}.menu-item:hover i,.menu-item:focus-visible i{opacity:1}.menu-item.primary .menu-index{color:#d4eabe}
#saveScreen,#settingsScreen,#confirmScreen,#pauseScreen,#endingScreen{background:rgba(8,17,20,.88);backdrop-filter:blur(9px)}.panel-view{width:min(670px,calc(100% - 40px));margin:clamp(34px,8vh,100px) auto 50px}.back-button{display:flex;align-items:center;gap:10px;background:none;border:0;color:#a6bfb1;font-size:11px;font-weight:800;letter-spacing:2px;margin:0 0 55px;padding:9px 0}.back-button span:first-child{font-size:20px}.back-button:hover{color:#fff}.panel-view h2,.pause-content h2,.confirm-box h2,.ending-box h2{font:900 clamp(56px,8vw,88px)/.9 Barlow Condensed,Impact,sans-serif;letter-spacing:1px;margin:12px 0 23px}.panel-lead{color:#a6bcb6;font-size:13px;line-height:1.7;margin-bottom:40px}
.slot-list{display:grid;gap:12px;margin:22px 0 38px}.save-slot{border:1px solid #7b95945a;border-radius:5px;background:#18303850;display:flex;align-items:center;gap:14px;padding:17px;min-height:90px}.slot-index{font:800 37px Barlow Condensed,sans-serif;color:#92ae9b;padding:0 9px}.slot-details{display:flex;flex-direction:column;gap:7px;flex:1}.slot-details strong{font-size:13px;letter-spacing:1.6px}.slot-details small{font-size:11px;color:#9eaea7}.slot-button,.slot-delete{border:1px solid #859f93;background:#bcd4bd21;border-radius:3px;padding:11px 13px;font-size:10px;letter-spacing:1px;font-weight:800}.slot-button:hover{background:#b8d5bf42}.slot-delete{border-color:#7e6263;color:#b7a0a0}.slot-delete:hover{background:#963b3b55}
.setting{border-bottom:1px solid #a2b9b02f;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0}.setting>div:first-child{display:flex;flex-direction:column;gap:7px}.setting strong{font-size:12px;letter-spacing:1.6px}.setting small{font-size:11px;color:#91a9a1}.range-box{display:flex;align-items:center;gap:14px;min-width:205px}.range-box input{accent-color:#c0dfbe;width:170px}.range-box span{font-size:11px;width:36px;text-align:right}select{background:#182e31;color:#e9ece5;border:1px solid #64847b;padding:11px 16px;border-radius:3px;width:178px}input[type=range]{cursor:pointer}.switch input{display:none}.switch span{display:block;width:47px;height:25px;background:#52605d;border-radius:50px;position:relative;cursor:pointer}.switch span:before{content:'';position:absolute;left:3px;top:3px;width:19px;height:19px;background:#d7e0d3;border-radius:50%;transition:transform .2s}.switch input:checked+span{background:#6a947d}.switch input:checked+span:before{transform:translateX(22px)}.solid-btn{background:#c4dfc4;border:0;color:#193028;padding:17px 26px;font-size:11px;font-weight:900;letter-spacing:2px;margin-top:35px;transition:background .18s}.solid-btn:hover{background:#efffee}
.confirm-box,.ending-box{margin:16vh auto 0;width:min(600px,calc(100% - 40px))}.confirm-box .back-button{margin-top:25px}.pause-content{width:min(440px,calc(100% - 50px));margin:18vh auto 0}.pause-content .menu-items{width:100%}.ending-box{text-align:center}.ending-box p{max-width:350px;line-height:1.7;margin:0 auto;color:#c4d3c9}.ending-box .solid-btn{display:block;margin:33px auto 10px}.link-btn{border:0;background:none;color:#b8cbb9;font-size:11px;letter-spacing:1.5px;margin:10px auto;padding:12px}
#hud{position:absolute;inset:0;z-index:5;pointer-events:none}.hud-top{position:absolute;top:clamp(15px,4vh,38px);left:clamp(17px,3.6vw,60px);right:clamp(17px,3.6vw,60px);display:flex;justify-content:space-between;align-items:center;text-shadow:0 2px 7px #000b}.hud-title{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:2.3px;font-weight:800;color:#e4ebe1}.hud-symbol{font-size:23px;color:#d0e0bb}.hud-separator{color:#77958d}.hud-menu{background:#0b1b20a8;border:1px solid #b3c9b15e;border-radius:3px;width:39px;height:37px;pointer-events:auto;font-size:17px}.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid #faf8d8a8;display:grid;place-items:center;transition:border .2s}.crosshair-dot{display:block;width:3px;height:3px;border-radius:50%;background:#fff}.crosshair.target{border-color:#caefbc;box-shadow:0 0 8px #9bffa455}.focus-text{position:absolute;top:calc(50% + 31px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:#fcf7d9;letter-spacing:1px;text-align:center;max-width:300px;line-height:1.5;text-shadow:0 2px 10px #000;white-space:nowrap}.toast{position:absolute;top:19%;left:50%;transform:translate(-50%,-10px);opacity:0;transition:opacity .25s,transform .25s;background:#0e2827bd;border:1px solid #adcdb5a8;border-radius:3px;padding:12px 21px;color:#e7f9d5;font-size:11px;font-weight:800;letter-spacing:1.5px;text-align:center;max-width:85vw}.toast.show{opacity:1;transform:translate(-50%,0)}.hud-bottom{position:absolute;bottom:clamp(30px,6.3vh,73px);left:clamp(17px,3.6vw,60px);right:clamp(17px,3.6vw,60px);display:flex;align-items:end;justify-content:space-between;gap:20px}.hud-task{width:240px;text-shadow:0 2px 7px #000}.hud-task>small,.hud-tool small{display:block;font-size:9px;color:#d0ddcc;letter-spacing:2px;margin-bottom:7px}.hud-task strong{font-size:12px;font-weight:800;letter-spacing:1px}.hud-line{height:3px;background:#ffffff3b;margin:12px 0 6px}.hud-line div{width:0;height:100%;background:#d2edbe;transition:width .4s}.hud-task>span{display:block;font-size:11px;color:#e1e9d8}.hud-tool{display:flex;align-items:center;gap:12px;text-shadow:0 2px 7px #000}.tool-glyph{font-size:40px;color:#d5e6c2}.hud-tool strong{font-size:17px}.hint{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.5px;color:#d2d9ccbf;text-align:center;white-space:nowrap;text-shadow:0 1px 4px #000}
#mobileControls{position:absolute;inset:0;pointer-events:none}#mobileControls>*{pointer-events:auto}.joy{position:absolute;bottom:85px;left:25px;border-radius:50%;width:110px;height:110px;border:2px solid #e7f5d25c;background:#06191c60;touch-action:none}.joy:after{content:'+';position:absolute;top:39px;left:46px;color:#e5f5d4a8;font-size:21px}.joy-knob{position:absolute;left:31px;top:31px;width:45px;height:45px;border-radius:50%;background:#cde5c47d;border:1px solid #efffe3a8;transform:translate(0,0);z-index:1}#mobileRight{position:absolute;inset:0;pointer-events:none}.look-zone{position:absolute;top:8%;right:0;bottom:185px;width:58%;touch-action:none;pointer-events:auto}.touch-action,.touch-interact{position:absolute;bottom:99px;right:23px;pointer-events:auto;border-radius:50%;background:#cadcc0b8;color:#1c3d33;border:2px solid #ffffe3b8;width:89px;height:89px;touch-action:none;font-size:10px;font-weight:900;letter-spacing:.2px}.touch-action:active{background:#f4ffe9}.touch-interact{bottom:193px;right:23px;width:50px;height:50px;background:#12322bca;color:#e6f5db;border:1px solid #a9ddbd;font-size:10px}
#errorBox{position:absolute;inset:0;background:#102327;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}#errorBox p{font-size:13px;color:#adc5b9}
@media(max-width:760px){.screen{background:linear-gradient(90deg,#081317e8 0%,#0a171bd5 55%,#08131865 100%)}#mainMenu{padding:20px 24px 23px}.top-brand{font-size:8px;letter-spacing:1.5px}.menu-content{margin:0 0 6vh}.menu-content h1{font-size:clamp(84px,20vw,145px);margin:23px 0}.menu-content p{font-size:12px;margin-bottom:24px}.menu-item{font-size:12px;padding:12px 6px}.menu-footer{font-size:8px;letter-spacing:1px}.panel-view{margin-top:27px}.back-button{margin-bottom:28px}.setting{padding:14px 0}.setting small{font-size:10px}.range-box{min-width:145px}.range-box input{width:110px}.save-slot{min-height:80px;padding:10px;gap:9px}.slot-index{font-size:28px;padding:0 3px}.slot-details strong{font-size:11px}.slot-details small{font-size:9px}.slot-button,.slot-delete{padding:9px 7px;font-size:9px}.hud-top{top:13px}.hud-bottom{bottom:14px}.hud-task{width:175px}.hud-task strong{font-size:10px}.hud-tool small{font-size:8px;letter-spacing:1px}.hud-tool strong{font-size:12px}.tool-glyph{font-size:27px}.crosshair{width:18px;height:18px}.hint{display:none}.hud-bottom{bottom:15px;align-items:end}.hud-title{font-size:9px}.focus-text{font-size:10px}.toast{top:13%}.joy{bottom:92px;left:17px}.touch-action{bottom:95px;right:19px}.touch-interact{bottom:189px;right:23px}.look-zone{bottom:180px}.pause-content{margin-top:13vh}}
@media(max-height:590px){.menu-content{margin-top:20px;margin-bottom:10px}.menu-content h1{font-size:74px;margin:15px 0 12px}.menu-content p{margin-bottom:15px}.menu-item{padding:8px}.panel-view{margin:20px auto}.back-button{margin-bottom:10px}.setting{padding:7px}.panel-view h2{font-size:55px;margin:4px}.solid-btn{margin-top:14px}.joy{bottom:35px}.touch-action{bottom:39px}.touch-interact{bottom:139px}.hud-bottom{bottom:9px;left:40%;right:11px}.hud-tool{display:none}}
@media(max-width:760px){
 .hud-task{position:fixed;top:76px;left:17px;width:175px}
 .hud-task strong{font-size:10px}
 .hud-tool{position:fixed;bottom:14px;right:17px}
 .hud-bottom{left:0;right:0;bottom:0;display:block}
}

/* v0.3 mobile first-person twin sticks: pitch and yaw are continuous axes. */
@media(pointer:coarse){
  #joyMove.joy{left:18px;bottom:92px}
  #joyLook.joy-right{position:absolute;left:auto;right:18px;bottom:92px;width:112px;height:112px;z-index:3;border-color:#bce8da80;background:#0b272976;pointer-events:auto;touch-action:none}
  #joyLook.joy-right .joy-knob{left:32px;top:32px;background:#b6e2dfaa}
  #joyLook.joy-right:after{content:'+';position:absolute;left:46px;top:38px;color:#f2fff4b3;pointer-events:none}
  #lookSwipe{width:57%;top:7%;bottom:230px;right:0;touch-action:none;pointer-events:auto}
  #mobileUse.touch-action{right:28px;bottom:242px;width:77px;height:77px;z-index:4;pointer-events:auto}
  #mobileInteract.touch-interact{right:31px;bottom:327px;width:53px;height:53px;z-index:4;pointer-events:auto}
  #mobileControls{pointer-events:none}
  #mobileRight{pointer-events:none}
  .hud-task{top:70px}
  .hud-tool{bottom:14px}
}
@media(pointer:coarse) and (max-height:620px){
 #joyMove.joy,#joyLook.joy-right{bottom:20px;width:94px;height:94px}
 #joyMove.joy .joy-knob,#joyLook.joy-right .joy-knob{left:23px;top:23px}
 #mobileUse.touch-action{bottom:132px;right:28px;width:67px;height:67px}
 #mobileInteract.touch-interact{bottom:204px;right:29px}
 #lookSwipe{bottom:220px}
}