/* The world occupies the browser; controls live in a compact corner menu. */
html:has(body.immersive),body.immersive{width:100%;height:100%;overflow:hidden;background:#163f42}
body.immersive{min-height:100dvh}
body.immersive main{max-width:none;width:100%;height:100dvh;margin:0;padding:0}
body.immersive main>.heading,body.immersive main>.lower,body.immersive main>footer{display:none}
body.immersive .game-shell{position:fixed;inset:0;width:100vw;height:100dvh;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at 45% 35%,#305b55,#17383e 75%);container-type:inline-size}
body.immersive #game{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;outline:none}
body.immersive .game-toolbar{position:fixed;z-index:60;inset:12px 14px auto;display:flex;align-items:center;justify-content:space-between;height:auto;min-height:36px;padding:0;border:0;gap:12px;pointer-events:none}
body.immersive .game-toolbar>*{pointer-events:auto}
body.immersive .game-toolbar .brand{font-size:15px;line-height:1;letter-spacing:2.2px;text-shadow:0 2px 7px #00191d}
body.immersive .game-toolbar .brand small{display:none}
body.immersive .game-toolbar .toolbar-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
body.immersive .game-toolbar button{font-size:11px;padding:8px 11px;border-color:#a0b5a25c;background:#142e38dc;box-shadow:0 2px 10px #00171c38;backdrop-filter:blur(12px)}
body.immersive .game-toolbar button:hover{background:#315352}
body.immersive .game-toolbar button[aria-expanded="true"]{border-color:#e2c67d;background:#375651}
body.immersive .game-toolbar>.gameMenu,body.immersive .game-toolbar>#gameMenu{position:absolute;right:0;top:46px;width:min(430px,calc(100vw - 28px));height:auto;max-height:calc(100dvh - 78px);padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;overflow-y:auto;background:#162d39f5;border:1px solid #8aa99b8c;border-radius:12px;box-shadow:0 16px 60px #00131880;backdrop-filter:blur(18px)}
body.immersive .game-toolbar #gameMenu[hidden]{display:none!important}
body.immersive .game-toolbar #gameMenu>*{min-width:0;margin:0}
body.immersive .game-toolbar #gameMenu .status{display:none}
body.immersive .game-toolbar #gameMenu button,body.immersive .game-toolbar #gameMenu .lab-open{display:flex;justify-content:center;align-items:center;min-height:36px;font-size:12px;text-align:center;text-decoration:none;padding:7px 10px;border:1px solid #55766e;border-radius:6px;color:#ebefe4;background:#263f48}
body.immersive .game-toolbar #gameMenu .volume-control{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px;font-size:11px}
body.immersive .game-toolbar #gameMenu .volume-control input{min-width:45px;width:64%;max-width:140px}
body.immersive .game-toolbar #gameMenu #travelLabel{grid-column:1/-1;font-size:11px}
body.immersive .game-toolbar #gameMenu #travelLabel select{max-width:100%;margin-left:10px}
body.immersive .game-toolbar #gameMenu #tourRefill{grid-column:1/-1}
body.immersive .dialog{z-index:30;max-height:calc(100dvh - 100px)}
body.immersive .dialog.keybind-dialog{position:fixed;inset:auto 3vw auto;top:64px;width:94vw;height:min(700px,calc(100dvh - 80px));max-height:none}
body.immersive .dialog.skill-tree,body.immersive .dialog.skill-settings{position:fixed;top:64px;bottom:18px;left:50%;right:auto;transform:translateX(-50%);width:min(1100px,94vw);max-height:calc(100dvh - 82px)}
body.immersive .dialog.inventory-panel{position:fixed;top:64px;right:18px;bottom:auto;left:auto;max-height:calc(100dvh - 82px)}
body.immersive .overlay{padding:clamp(22px,5vw,80px);padding-top:max(66px,6vh)}
body.immersive .welcome{width:min(440px,46%)}
#skillPointBadge{position:fixed;z-index:24;left:18px;top:45%;width:50px;height:50px;padding:0;border:1px solid #f8e0a1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff2c1;background:linear-gradient(145deg,#65512f,#2a3d40);box-shadow:0 0 0 4px #f6d68c14,0 5px 25px #13232a80;cursor:pointer;transition:transform .16s,box-shadow .16s;font-size:25px;font-weight:700}
#skillPointBadge:hover{transform:scale(1.07);box-shadow:0 0 0 6px #f6d68c22,0 5px 25px #13232a80}
#skillPointBadge .skill-point-count{position:absolute;right:-5px;top:-5px;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:1px solid #fff2c3;border-radius:14px;font-size:11px;font-weight:800;color:#28332e;background:#f0d18b}
#skillPointBadge .skill-point-label{position:absolute;top:57px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff3d6;font-size:10px;font-weight:600;text-shadow:0 2px 4px #123}
#skillPointBadge[hidden]{display:none!important}
.immersive-screen-notice{position:fixed;z-index:90;top:65px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 30px);padding:9px 16px;border-radius:7px;background:#172f3aee;border:1px solid #91b6a8;color:#f5edce;font-size:12px;pointer-events:none}
body.immersive .touch{display:none}
@media(max-width:700px){body.immersive .game-toolbar{inset:8px 10px auto;gap:6px}body.immersive .game-toolbar .brand{font-size:11px;letter-spacing:1.2px}body.immersive .game-toolbar button{font-size:10px;padding:7px 9px}body.immersive .dialog.keybind-dialog{top:54px;height:calc(100dvh - 64px);left:2vw;right:2vw;width:96vw}body.immersive .dialog.skill-tree,body.immersive .dialog.skill-settings{top:54px;bottom:10px;max-height:calc(100dvh - 64px);width:96vw}body.immersive .dialog.inventory-panel{top:54px;right:8px;max-height:calc(100dvh - 64px)}#skillPointBadge{left:10px;width:43px;height:43px;font-size:22px}#skillPointBadge .skill-point-label{top:49px;font-size:9px}body.immersive .welcome{width:min(440px,65%)}body.immersive .overlay{padding:62px 18px 18px}}
@media(max-height:600px){body.immersive .game-toolbar{top:7px}body.immersive .dialog.keybind-dialog{top:48px;height:calc(100dvh - 58px)}body.immersive .dialog.keybind-dialog .kb-key{height:27px}body.immersive .dialog.keybind-dialog .kb-row-0 .kb-key{height:20px}body.immersive .dialog.keybind-dialog .kb-action{min-height:28px}body.immersive .dialog.keybind-dialog .kb-heading h3{font-size:17px}body.immersive .dialog.keybind-dialog .kb-instructions{margin:3px 0 5px}body.immersive .dialog.keybind-dialog .kb-message{min-height:19px;padding:3px 1px}body.immersive .dialog.keybind-dialog .kb-tools{margin-top:4px}body.immersive .dialog.keybind-dialog .dialog-actions{margin-top:4px;padding-top:4px}body.immersive .dialog.keybind-dialog .dialog-content{overflow:auto}}
