:root{font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;color:#243b35;font-synthesis:none;letter-spacing:0;--green:#176d52;--accent:#dbf57d;--ink:#203831;--muted:#7c8b83;--line:#e1e8e1}*{box-sizing:border-box}body{margin:0;background:#97b1a0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #56bba2;outline-offset:3px}[hidden]{display:none!important}#game{position:fixed;inset:0}#game canvas{display:block}h1,h2,h3,p{margin:0}.topbar{position:fixed;top:0;left:0;right:0;height:88px;padding:0 32px;background:#fcfdf8f5;border-bottom:1px solid #d2dfd0;display:flex;align-items:center;justify-content:space-between;z-index:5;gap:16px}.brand{display:flex;gap:13px;align-items:center}.brand-icon{display:grid;place-items:center;width:43px;height:43px;background:#1b4c3b;color:#dcf398;border-radius:8px}.brand-icon svg{width:29px;height:29px}.brand-icon img{width:100%;height:100%;object-fit:contain;border-radius:6px}.brand h1{font-size:23px;font-weight:900}.brand div>span{font-size:11px;letter-spacing:0;color:#728276;font-weight:600}.match-stats{display:flex;gap:36px;align-items:center}.match-stats>div{display:flex;flex-direction:column;gap:2px}.match-stats small{font-size:10px;color:#849085}.match-stats strong{font-family:Consolas,monospace;font-size:28px;line-height:32px;font-weight:500}.match-stats em{font-size:15px;font-style:normal;color:#95a194}.stat-line{width:1px;height:34px;background:#dbe3d8}.hunter-stat strong{color:#c16a52}.top-actions{display:flex;gap:10px;align-items:center}.connection{font-size:11px;color:#74887b;white-space:nowrap}.icon-button{width:36px;height:36px;background:#fffdf8e8;border:1px solid #d9e1d7;border-radius:6px;display:inline-grid;place-items:center;flex-shrink:0}.icon-button:hover{background:#e3eddc}.icon-button svg{width:18px;height:18px}.world-tag{position:fixed;top:112px;left:32px;display:flex;align-items:center;gap:10px;background:#f7fbf1ed;border:1px solid #e2e9d9;padding:9px 14px;border-radius:4px;font-size:11px;box-shadow:0 2px 12px #223b2910}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#508857;box-shadow:0 0 0 3px #50885716}.tag-divider{color:#b7c0ae}#district{color:#7a8a71}.panel{background:#fcfdf8f7;border:1px solid #eef2e5;border-radius:8px;box-shadow:0 12px 60px #173d2b25}.setup{position:fixed;top:166px;left:32px;width:354px;padding:25px;max-height:calc(100dvh - 194px);overflow-y:auto}.eyebrow{font-family:Consolas,monospace;font-size:10px;color:#82917e;font-weight:600}.eyebrow>span{float:right;color:#3e6950}.setup h2{font-size:28px;line-height:1.5;margin:16px 0 22px;font-weight:800}.setup-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:19px}.setup-tabs button{background:none;padding:10px 0;font-size:12px;color:#8b9789;border-bottom:2px solid transparent}.setup-tabs button.active{border-color:var(--green);color:var(--green);font-weight:700}.field{display:block;font-size:11px;color:#798675;margin:12px 0 7px}.field input,.field select{display:block;width:100%;height:38px;background:#f4f7ef;border:1px solid #dfe6d8;border-radius:5px;padding:0 10px;color:#354c3c;margin-top:7px;font-size:12px}.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme{position:relative;text-align:left;padding:8px;border:1px solid #dbe3d6;background:#f3f5ed;border-radius:6px;overflow:hidden}.theme.active{border-color:#5a8b66;box-shadow:inset 0 0 0 1px #5a8b66}.theme strong{font-size:12px;display:block;margin:7px 0 2px}.theme small{font-size:8px;color:#8d9684}.theme>svg{position:absolute;bottom:24px;right:8px;width:14px;height:14px;color:#487c54}.theme-art{height:64px;position:relative;overflow:hidden;background:#c9d7bd}.theme-art:after{content:'';position:absolute;left:-10px;bottom:9px;width:180px;height:12px;background:#e6e9dd;transform:rotate(-12deg)}.theme-art span{position:absolute;z-index:1;background:#e9eae0;border-bottom:10px solid #96ada1;border-right:9px solid #b9c7b6;width:35px;height:35px;left:22px;top:13px;box-shadow:6px 8px 0 #82977755;transform:skewY(-8deg)}.theme-art span:nth-child(2){left:74px;top:20px;background:#d7e6dd;width:28px;height:23px}.theme-art span:nth-child(3){width:17px;height:25px;left:4px;top:38px;background:#497b59;border:0;border-radius:50%}.ancient-art{background:#c5cbb5}.ancient-art span{border:0;background:#a96951;height:25px;top:27px}.ancient-art span:before{content:'';position:absolute;left:-6px;top:-12px;width:46px;height:15px;background:#425f55;clip-path:polygon(8% 50%,50% 0,92% 50%,100% 100%,0 100%)}.ancient-art span:nth-child(2){background:#b87957}.ancient-art span:nth-child(2):before{width:40px}.ancient-art span:nth-child(3):before{display:none}.config-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.roles{display:flex;gap:9px}.roles button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 5px;border:1px solid #dbe3d7;background:#f4f6ee;border-radius:5px;font-size:12px}.roles button.active{color:#266146;border-color:#83a98b;background:#e7f0dd}.roles svg{width:16px;height:16px}.primary{display:flex;align-items:center;justify-content:space-between;background:#244e3c;color:#f2f9e8;width:100%;padding:14px 17px;font-weight:600;font-size:13px;border-radius:5px;margin-top:20px}.primary:hover{background:#34674e}.primary svg{width:19px;height:19px;color:#d5f398}.setup-footer{display:flex;align-items:center;gap:7px;font-size:9px;color:#8a9682;margin-top:15px}.setup-footer>span:last-child{margin-left:auto}.lobby{position:fixed;top:190px;left:32px;width:345px;padding:26px}.lobby h2{font-size:26px;margin-top:16px}.room-code{background:#e8efdf;width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px;margin:18px 0;font-family:Consolas,monospace;font-size:25px}.room-code svg{width:18px}.roster-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.roster-row small{font-size:10px;color:#89947f}.mission{position:fixed;right:26px;top:113px;width:260px;background:#fcfdf6f2;padding:20px;border-top:3px solid #658a50;box-shadow:0 4px 24px #273b2514}.section-label{display:flex;align-items:center;gap:8px;font-size:10px;color:#7d8c75;font-weight:600}.section-label svg{width:14px;height:14px}.section-label>span:last-child{margin-left:auto;font-size:9px}.mission h3{font-size:18px;margin-top:19px}.mission-detail{font-size:10px;color:#919b85;margin-top:18px}.alarm-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 8px}.alarm-row strong{font-family:Consolas,monospace;font-size:28px;font-weight:400}.alarm-row span{font-size:10px;color:#65865a}.meter{height:4px;background:#dfe6d5;overflow:hidden;border-radius:2px}.meter>span{display:block;width:100%;height:100%;background:#7d9b5d;transition:width .15s}.mission-objective{display:flex;gap:7px;align-items:center;font-size:11px;margin-top:19px}.objective-dot{width:7px;height:7px;border:2px solid #b99b4d;transform:rotate(45deg)}.mission-objective b{font-size:10px;margin-left:auto;color:#8b997b}.mission-reward{display:flex;align-items:center;gap:5px;margin-top:17px;padding-top:14px;border-top:1px solid #e4e9dc;font-size:9px;color:#859274}.mission-reward svg{width:12px;height:12px;color:#73aaa7}.mission-reward>span{margin-left:auto}#task-progress{margin-top:12px;font-size:10px;color:#64814a}#task-progress .meter{margin-top:8px}.team-panel{position:fixed;right:26px;top:420px;width:260px;padding:16px 20px;background:#fcfdf3e8;max-height:calc(100dvh - 560px);overflow-y:auto}.team-member{display:flex;align-items:center;gap:9px;font-size:11px;padding:9px 0;border-bottom:1px solid #e3e9d955}.team-member>i{display:block;width:7px;height:7px;border-radius:50%;background:#7b9e61}.team-member.dead{opacity:.5}.team-member.dead>i{background:#bf6d60}.team-member small{margin-left:auto;font-size:9px;color:#88977b}.events{position:fixed;left:28px;top:164px;max-width:360px;display:flex;flex-direction:column;gap:6px;pointer-events:none}.events>div{font-size:10px;padding:8px 11px;background:#203c31db;border-left:2px solid #c9e687;color:#edf4e3;animation:slide .3s}.events>div small{color:#b7c7a6;margin-right:10px}.toast{position:fixed;left:50%;top:112px;transform:translateX(-50%);padding:12px 20px;background:#233e32ee;color:#f2f7e7;border:1px solid #75946a;border-radius:5px;font-size:12px;z-index:30;text-align:center;max-width:90vw}.map-controls{position:fixed;right:26px;bottom:137px;display:flex;flex-direction:column;gap:6px}.player-state{position:fixed;left:28px;bottom:30px;display:flex;gap:12px;align-items:center;padding:14px 16px;background:#f9fcf2f2;min-width:225px;border:1px solid #e1e7d5;border-radius:6px}.player-avatar{width:40px;height:40px;display:grid;place-items:center;background:#e4edd7;color:#508146;border-radius:5px}.player-state>div{width:111px}.player-state strong{display:block;font-size:12px}.player-state>div>span{display:block;font-size:9px;color:#869579;margin:4px 0 7px}.player-state>b{align-self:flex-start;font:14px Consolas,monospace;color:#6a7e5e}.stamina{height:3px}.action-bar{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:7px;background:#f8fbf2ed;border:1px solid #e7ecdd;border-radius:7px;box-shadow:0 4px 20px #183c2520}.action-bar button{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;width:64px;height:62px;border-radius:4px;background:transparent}.action-bar button:hover{background:#e3ecd6}.action-bar button svg{width:21px;height:21px;color:#597650}.action-bar button span{font-size:9px;color:#859075}.action-bar button b{position:absolute;top:3px;right:4px;font:9px Consolas,monospace;background:#e1eaca;padding:2px 3px;border-radius:2px;color:#6a814e}.compass{position:fixed;right:32px;bottom:35px;display:flex;flex-direction:column;align-items:center;color:#faffee;text-shadow:0 1px 4px #173522}.compass span{font:12px Consolas,monospace}.compass svg{width:25px;height:25px;transform:rotate(-45deg);margin-top:5px}.context-action{position:fixed;bottom:128px;left:50%;transform:translateX(-50%)}.context-action button{padding:11px 18px;background:#263f30e8;color:#eff7e1;border:1px solid #97ac77;border-radius:5px;font-size:12px}.modal-backdrop{position:fixed;inset:0;z-index:20;background:#14291bc4;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}.map-modal{width:min(620px,94vw);max-height:94dvh;padding:22px;overflow:auto}.modal-title{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:15px}.modal-title h2{font-size:20px;margin-top:4px}.modal-title>span{font:14px Consolas,monospace;color:#5b8353}.map-modal canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:4px}.map-legend{display:flex;gap:20px;justify-content:center;margin-top:15px;font-size:10px}.map-legend span{display:flex;gap:6px;align-items:center}.map-legend b{width:7px;height:7px;border-radius:50%}.green{background:#439b69}.red{background:#cf6955}.yellow{background:#c2a555}.compact-modal{padding:25px;width:360px}.compact-modal .roster-row{width:100%;background:transparent}.result{padding:30px;width:400px;text-align:center;max-height:90dvh;overflow:auto}.result-emblem{width:64px;height:64px;background:#e4efd2;color:#436c3e;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%}.result h2{font-size:30px;margin:12px 0}.result p{font-size:12px;color:#839071;margin-bottom:18px}.result .roster-row{text-align:left}.joystick{position:fixed;bottom:108px;left:30px;width:104px;height:104px;background:#f7ffe52b;border:1px solid #e5f5cf90;border-radius:50%;touch-action:none}.joystick>div{position:absolute;width:42px;height:42px;left:30px;top:30px;background:#eff9daaa;border:1px solid #fff;border-radius:50%;pointer-events:none}body.alarming .mission{border-top-color:#c66c57}body.alarming #alarm-clock,body.alarming #alarm-status{color:#bd5e4b}body.alarming #alarm-meter{background:#c06d54}@keyframes slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@media(max-height:850px) and (min-width:761px){.setup{top:155px;padding:20px;max-height:calc(100dvh - 177px)}.setup h2{font-size:25px;margin:10px 0}.setup-tabs{margin-bottom:10px}.theme-art{height:48px}.field{margin-top:9px}.primary{margin-top:15px;padding:12px 16px}.setup-footer{margin-top:10px}.team-panel{max-height:calc(100dvh - 535px)}}
@media(max-width:1100px){.player-state{min-width:180px;padding:10px;left:18px;bottom:23px}.player-state>div{width:90px}.player-state>b{display:none}.action-bar{left:52%}.action-bar button{width:54px}.mission,.team-panel{width:222px;right:18px}.match-stats{gap:22px}}
@media(max-width:760px){.topbar{height:72px;padding:0 14px;gap:8px}.brand{gap:8px}.brand-icon{width:33px;height:33px}.brand-icon svg{width:23px}.brand h1{font-size:17px}.brand div>span{font-size:6px}.match-stats{gap:12px}.match-stats strong{font-size:20px;line-height:24px}.match-stats small{font-size:8px}.match-stats em{font-size:10px}.stat-line,.hunter-stat,.connection{display:none!important}.top-actions{gap:5px}.top-actions .icon-button{width:31px;height:31px}.world-tag{left:14px;top:86px;padding:7px 10px;font-size:9px}.setup{left:14px;top:129px;width:min(320px,calc(100vw - 28px));max-height:calc(100dvh - 145px);padding:18px}.setup h2{font-size:24px;margin:10px 0 13px}.setup-tabs{margin-bottom:10px}.theme-art{height:48px}.field{margin-top:8px}.field input,.field select{height:34px}.primary{margin-top:13px;padding:12px 14px}.setup-footer{margin-top:10px}.lobby{left:14px;top:140px;width:calc(100vw - 28px)}.mission{top:128px;right:12px;width:174px;padding:12px}.mission h3{font-size:14px;margin-top:10px}.mission-detail{margin-top:10px}.alarm-row strong{font-size:23px}.mission-reward{display:none}.mission-objective{font-size:9px;flex-wrap:wrap;margin-top:12px}.section-label{font-size:9px}.team-panel{display:none}.events{top:130px;left:12px;max-width:calc(100vw - 208px)}.events>div{font-size:8px;padding:7px;line-height:1.7}.events>div small{display:none}.player-state{bottom:102px;left:auto;right:12px;min-width:146px;padding:9px}.player-avatar{width:29px;height:29px}.player-avatar svg{width:19px}.player-state>div{width:85px}.player-state strong{font-size:10px}.player-state>div>span{font-size:8px}.action-bar{bottom:13px;left:50%;width:calc(100vw - 24px);justify-content:space-between;padding:5px;gap:1px}.action-bar button{width:calc((100vw - 49px)/6);height:58px}.action-bar button span{font-size:8px;white-space:nowrap}.action-bar button svg{width:19px;height:19px}.map-controls{right:12px;bottom:193px}.map-controls .icon-button{width:31px;height:31px}.compass{display:none}.context-action{bottom:167px;left:auto;right:12px;transform:none;max-width:200px}.context-action button{font-size:10px;padding:9px 12px}.toast{top:83px;font-size:11px;width:max-content;max-width:92vw}.joystick{left:21px;bottom:108px}.map-modal{padding:14px}.map-legend{gap:15px}.result{padding:24px}.modal-title h2{font-size:18px}}
/* The game camera is rendered by Three.js; Phaser remains available for legacy HUD/map layers. */
#game > canvas:not(.city-3d) { display: none !important; }
#game > canvas.city-3d { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; display: block; pointer-events: auto; }
.setup,.lobby,.topbar,.world-tag,.mission,.team-panel,.events,.toast,.map-controls,.player-state,.action-bar,.joystick,.compass,.context-action,.modal-backdrop { z-index: 5; }
.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.character-card{padding:7px 4px;border:1px solid #dbe3d7;background:#f4f6ee;border-radius:5px;text-align:center}.character-card.active{border-color:#5a8b66;background:#e7f0dd;box-shadow:inset 0 0 0 1px #5a8b66}.character-card strong,.character-card small{display:block}.character-card strong{font-size:10px;margin-top:4px}.character-card small{font-size:8px;color:#8a9682}.character-swatch{display:block;width:25px;height:25px;margin:auto;border-radius:50% 50% 35% 35%;border:2px solid #263d32;box-shadow:0 5px 0 -2px #1b2822}.agent-swatch{background:#c89358}.scout-swatch{background:#668e9e}.guardian-swatch{background:#66745b}.analyst-swatch{background:#9a78a1}
.movement-hint{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);z-index:6;background:#203b31e8;color:#f0f6df;border:1px solid #9cb879;padding:10px 16px;border-radius:5px;font-size:12px;pointer-events:none;white-space:nowrap}
@media(max-width:760px){.movement-hint{bottom:178px;font-size:10px;max-width:calc(100vw - 28px);white-space:normal;text-align:center}}

.capture-notice{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:31;display:flex;align-items:center;gap:12px;width:min(430px,calc(100vw - 32px));padding:18px 20px;background:#273a31f2;color:#f5fae8;border:1px solid #d5e991;border-left:5px solid #d5e991;border-radius:8px;box-shadow:0 16px 60px #10221866;font-size:15px;line-height:1.7;text-align:left;animation:capture-in .25s ease-out}.capture-notice svg{width:25px;height:25px;flex:none;color:#d8f08d}.capture-notice.final{border-color:#d98a72;border-left-color:#d98a72}.capture-notice.final svg{color:#f0a18a}@keyframes capture-in{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:760px){.capture-notice{top:42%;padding:15px 16px;font-size:13px;line-height:1.65}}

.joystick{left:50%;top:auto;right:auto;bottom:calc(112px + env(safe-area-inset-bottom));transform:translateX(-50%)}
.mobile-brand-break{display:none}
.character-card{padding:4px 4px 7px;overflow:hidden;min-width:0}
.character-portrait{display:block;width:100%;height:auto;aspect-ratio:12/13;object-fit:cover;border-radius:3px;background:#e0e9ee}
.character-card strong{font-size:11px;line-height:17px;margin-top:6px}
.character-card small{font-size:9px;line-height:14px;color:#637768}
.character-card:focus-visible{outline:2px solid #286647;outline-offset:2px}
.events>div{animation:none}
.mission #mission-title{margin-top:0}
.alarm-message{margin-top:12px;font-size:12px;line-height:1.7;color:#526a5e;overflow-wrap:anywhere}body.alarming .alarm-message{color:#a14630}
.field.field-inline,.field:has(>#movement-field-label){display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:8px}
.field.field-inline input,.field:has(>#movement-field-label) .movement-mode-trigger{margin-top:0;min-width:0;width:100%}
#leave::after{content:none}
.top-actions #sound,.top-actions #leave{width:48px;height:40px;padding:0;display:grid;place-items:center}
.top-actions #sound svg,.top-actions #leave svg{display:block;width:20px;height:20px;margin:0}
#leave{width:42px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#fff3ee;border-color:#dbb3a3;color:#88442e}
.movement-mode-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:38px;margin-top:6px;padding:8px 10px;border:1px solid #dbe3d7;border-radius:5px;background:#f4f6ee;color:#385345;text-align:left;font-size:12px}
.movement-mode-trigger svg{width:16px;height:16px;flex-shrink:0}
.movement-mode-dialog{position:fixed;inset:0;margin:auto;width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border:1px solid #d7e1da;border-radius:8px;background:#fafcf9;color:#263d32;box-shadow:0 16px 56px #10281e40;letter-spacing:0}
.movement-mode-dialog::backdrop{background:#14291b88;backdrop-filter:blur(3px)}
.movement-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.movement-dialog-header h2{margin:0;font-size:18px;line-height:26px}
.movement-dialog-header .icon-button{width:36px;height:36px;flex-shrink:0}
.movement-options{display:grid;gap:10px}
.movement-option{display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;gap:12px;min-height:88px;width:100%;padding:14px 12px;border:1px solid #dce3df;border-radius:6px;background:#fff;color:#385345;text-align:left}
.movement-option[aria-pressed="true"]{border-color:#56876a;background:#edf5ee;box-shadow:inset 0 0 0 1px #56876a}
.movement-option-icon{width:24px;height:24px;color:#537965}
.movement-option strong{display:block;font-size:15px;line-height:22px;font-weight:600}
.movement-option small{display:block;margin-top:5px;font-size:12px;line-height:19px;color:#687970;overflow-wrap:anywhere}
.movement-check{width:18px;height:18px;color:#286647;visibility:hidden}
.movement-option[aria-pressed="true"] .movement-check{visibility:visible}
.movement-mode-trigger:focus-visible,.movement-mode-dialog button:focus-visible{outline:2px solid #286647;outline-offset:3px}
@media(max-width:760px){.movement-mode-trigger{min-height:34px}.movement-mode-dialog{padding:16px}.movement-option{gap:10px}}
.match-stats{background:#edf3f5;border:1px solid #cbd9de;border-radius:6px;padding:8px 16px;box-shadow:0 1px 3px #2038310a}
@media(max-width:760px){
  .topbar{padding:0 8px;gap:8px}
  .brand{gap:5px;flex-shrink:0}
  .brand-icon{width:20px;height:24px}
  .brand-icon svg{width:18px;height:18px}
  .brand h1{font-size:11px;line-height:16px;white-space:nowrap}
  .brand div>span{font-size:8px;line-height:11px;display:block}
  .mobile-brand-break{display:block}
  .match-stats{flex:1;display:grid;grid-template-columns:1.1fr 1.15fr .8fr;gap:4px;min-width:0;padding:7px 5px}
  .match-stats small{font-size:8px;white-space:nowrap}
  .match-stats strong{font-size:16px;line-height:22px;white-space:nowrap}
  .match-stats em{font-size:10px}
  .match-stats .hunter-stat{display:flex!important}
  .top-actions{flex-direction:column;gap:4px;flex:0 0 44px}
  .top-actions #sound,.top-actions #leave{width:44px;height:30px}
}

/* The roster heading should sit directly on the panel surface; avoid a
   separate rectangular fill behind the “玩家” label. */
#team-panel .section-label,
#team-panel .team-panel-title{background:transparent}
body:has(#walking-controls:not([hidden])) .joystick{bottom:calc(228px + env(safe-area-inset-bottom))}
#walking-controls{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom));transform:translateX(-50%);width:320px;height:104px;max-width:calc(100vw - 24px);z-index:6;padding:12px 14px;border:1px solid #cbd9de;border-radius:6px;color:#294338;background:#f5faf8f5;box-shadow:0 3px 12px #16382a18;text-align:left;overflow:auto}
.motion-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.motion-heading>span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.motion-heading svg{width:18px;height:18px;color:#4b7960}
.motion-heading strong{font-size:13px}
#enable-motion{min-width:88px;min-height:34px;padding:7px 12px;border-radius:4px;background:#285e47;color:#fff;font-size:12px;font-weight:600}
#enable-motion:disabled{background:#e0e9e4;color:#526a5e;cursor:wait}
#enable-motion:focus-visible{outline:2px solid #285e47;outline-offset:3px}
#walking-controls small{display:block;margin-top:7px;font-size:11px;line-height:17px;color:#5b7066}
#walking-controls[data-status="error"] small{color:#a14630}
#walking-controls[data-status="ready"]{border-color:#80a993}
#join-mode{font-size:12px;line-height:1.6;margin-top:8px}
@media(max-width:760px){
  #walking-controls{bottom:calc(92px + env(safe-area-inset-bottom));width:calc(100vw - 24px)}
  body:has(#walking-controls:not([hidden])) .joystick{left:64px;bottom:calc(208px + env(safe-area-inset-bottom))}
  body:has(#walking-controls:not([hidden])) .player-state{bottom:calc(208px + env(safe-area-inset-bottom))}
  body:has(#walking-controls:not([hidden])) .context-action{bottom:calc(280px + env(safe-area-inset-bottom))}
  body:has(#walking-controls:not([hidden])) .map-controls{bottom:calc(326px + env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-height:500px){
  #walking-controls{left:12px;transform:none;width:280px;bottom:112px}
  body:has(#walking-controls:not([hidden])) .joystick{left:50%;bottom:112px}
  body:has(#walking-controls:not([hidden])) .player-state{left:auto;right:12px;bottom:112px}
  body:has(#walking-controls:not([hidden])) .map-controls{left:304px;right:auto;bottom:112px}
  body:has(#walking-controls:not([hidden])) .mission{top:96px;right:12px;width:320px;padding:8px}
  body:has(#walking-controls:not([hidden])) .mission h3{font-size:13px;line-height:18px;margin-top:4px}
  body:has(#walking-controls:not([hidden])) .mission-detail{display:none}
  body:has(#walking-controls:not([hidden])) .alarm-row{margin:0}
  body:has(#walking-controls:not([hidden])) .alarm-row strong{font-size:20px;line-height:22px}
  body:has(#walking-controls:not([hidden])) .mission-objective{margin-top:5px;font-size:10px}
  body:has(#walking-controls:not([hidden])) .mission-reward{display:none}
  body:has(#walking-controls:not([hidden])) .context-action{left:auto;right:12px;bottom:24px;transform:none;max-width:180px}
}
body:has(#walking-controls:not([hidden])) .movement-hint{display:none}
#walking-controls{height:auto;max-height:160px}
#motion-toggle{display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 0;background:transparent;color:inherit;width:100%}
#motion-toggle svg{width:18px;height:18px}
#motion-details{margin-top:6px}
#walking-controls[data-expanded="false"]{width:130px;padding:5px 10px}
#walking-controls[data-expanded="false"] #motion-details{display:none}
.motion-error-icon{display:none}
#walking-controls[data-status="error"] .motion-error-icon{display:block;color:#b32b22}
#walking-controls[data-status="error"]{border-color:#c75545}

.launch-actions{display:grid;gap:12px}.secondary{background:#fff;color:#142a27}.room-item{display:flex;flex-direction:column;width:100%;text-align:left;padding:12px;margin:6px 0;border:1px solid #ccd;border-radius:8px;background:#fff}.room-item small,.room-item span{display:block}
#joystick{background:#edf4e6b8;border:2px solid #78947e}
#joystick #joystick-knob{left:23%;top:23%;width:54%;height:54%;display:grid;place-items:center;box-sizing:border-box;background:#f8fff4;border:2px solid #52775c}
#joystick svg{pointer-events:none;color:#315d41}
#joystick-knob svg{width:26px;height:26px}
#joystick #joystick-knob{position:absolute;border-radius:50%;pointer-events:auto;padding:0;touch-action:manipulation}
#joystick>.steer-left,#joystick>.steer-right{position:absolute;top:calc(50% - 9px);width:18px;height:18px}
#joystick>.steer-left{left:1px}#joystick>.steer-right{right:1px}
#joystick[data-active="forward"] #joystick-knob{background:#c9e7a6}
#joystick #joystick-knob[aria-pressed="true"]{background:#c9e7a6;border-color:#176d52;box-shadow:inset 0 0 0 1px #176d52}
#joystick #joystick-knob[aria-pressed="true"] svg{color:#176d52;fill:#b0d88d}
#joystick[data-active="turn"]{border-color:#254f35;background:#bfd5bcbf}
body #joystick.joystick{left:50%;right:auto;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%)}
body:has(#walking-controls:not([hidden])) #joystick.joystick{left:50%;bottom:calc(16px + env(safe-area-inset-bottom))}
#world-name{font-weight:600}
@media(max-width:760px){
  .world-tag{top:calc(var(--mission-bottom, 210px) - 36px);left:14px}
  #mission.mission{left:14px;right:auto;top:80px;width:min(360px,calc(100vw - 28px));}
  body:has(#mission:not([hidden])) .events{left:64px;right:auto;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom));width:180px;max-width:calc(100vw - 76px);height:auto!important;max-height:86px;overflow:hidden}
  #map-controls,.map-controls{right:12px;bottom:calc(210px + env(safe-area-inset-bottom));gap:8px}
  .map-controls .icon-button{width:46px;height:46px}
  .map-controls .icon-button svg{width:24px;height:24px}
  #player-state.player-state{left:calc(50% + 66px);right:auto;bottom:calc(24px + env(safe-area-inset-bottom));min-width:112px;width:112px;padding:7px}
  #player-state>div{width:66px}
  #player-state strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #player-state>div>span{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body #joystick.joystick{bottom:calc(24px + env(safe-area-inset-bottom));width:116px;height:116px}
  #joystick-knob{width:50px!important;height:50px!important;left:33px!important;top:33px!important}
  #joystick-knob svg{width:28px;height:28px}
  #joystick>.steer-left,#joystick>.steer-right{display:block;top:calc(50% - 10px);width:20px;height:20px}
}
.mission-header{display:flex;align-items:center;gap:6px}
.mission .mission-header #mission-title{font-size:12px;line-height:18px;margin:0;flex:1;min-width:0}
#mission-countdown{color:#c62828;font-size:14px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.mission-header .icon-button{width:32px;height:36px;background:transparent;border:0}
.mission-header .icon-button svg{transform:rotate(180deg)}
.mission.is-collapsed .mission-header .icon-button svg{transform:none}
.mission.is-collapsed>:not(.mission-header){display:none!important}
.mission.is-collapsed{width:286px;max-width:calc(100vw - 24px);padding:8px 10px}
.mission:not(.is-collapsed) #mission-countdown{display:none}
.map-legend{display:flex;flex-direction:column;gap:10px}
.map-legend-row{display:flex;justify-content:center;gap:16px}
.map-legend .task-key{background:#946c12}
#radar-overlay{position:fixed;right:8px;top:42%;z-index:5;width:168px;pointer-events:none;color:#fff;background:#253c37eb;border:1px solid #a4d1b6;border-radius:6px;padding:7px}
#radar-overlay>strong{display:block;font-size:11px;color:#b9edcc;margin-bottom:4px}
.radar-target{display:grid;grid-template-columns:20px minmax(0,1fr) 44px;align-items:center;gap:5px;height:32px;font-size:11px}
.radar-bearing{display:grid;place-items:center;width:20px;height:20px;color:#b8f8cd}.radar-bearing svg{width:18px;height:18px}
.radar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radar-target b{text-align:right;font-variant-numeric:tabular-nums}
body:has(dialog[open]) #radar-overlay,body:has(.modal-backdrop:not([hidden])) #radar-overlay{visibility:hidden}
@media(max-height:500px){#radar-overlay{top:90px;right:calc(50% - 84px)}}
body:has(#map-modal:not([hidden])) .movement-hint{display:none}
.map-legend .loot-key{width:18px;height:18px;border-radius:3px;color:#fff;display:inline-grid;place-items:center;font-size:11px}
.gun-key{background:#147caa}.revive-key{background:#b9456d}.radar-key{background:#825cad}
.terminal-dialog{width:360px;max-width:calc(100vw - 28px);max-height:90dvh;overflow:auto;border:1px solid #93aaa8;border-radius:8px;padding:20px;background:#f4f8f7;color:#203831}
.terminal-dialog::backdrop{background:#162d3659}
.terminal-device{padding:24px 20px;background:#607780;border:5px solid #a9b9be;border-radius:6px;box-shadow:inset 0 -7px #425960}
.terminal-screen{background:#152f35;color:#96efe1;padding:18px 8px;display:grid;justify-items:center;gap:12px;border:3px solid #40575a;min-height:105px}
.terminal-screen strong{font-size:17px}.terminal-lamps{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:20px 0}
.terminal-lamps span{height:8px;background:#2d434b;border-radius:2px}.terminal-lamps .lit{background:#86f2ac;box-shadow:0 0 5px #86f2ac}
.terminal-start{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;border-radius:6px;background:#b93542;color:white;font-weight:700;border-bottom:6px solid #782431}
.terminal-start:active,.terminal-dialog[data-state=working] .terminal-start{transform:translateY(3px);border-bottom-width:3px}
.terminal-dialog[data-state=success] .terminal-start{background:#227b56;border-color:#19563f}
.terminal-detail{font-size:12px;line-height:1.7;min-height:42px;margin-top:16px;text-align:center}
.ancient-terminal .terminal-device{background:#695b50;border-color:#b6a378}.ancient-terminal .terminal-screen{border-color:#bb9e59}
#lobby .lobby-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#lobby .lobby-heading h2{font-size:22px;line-height:30px;margin:0}
#lobby .lobby-tag{font-family:'Microsoft YaHei',sans-serif;font-size:11px;line-height:20px;font-weight:600;padding:2px 7px;border-radius:4px;background:#dcebe7;color:#356b5c;white-space:nowrap}
#lobby #lobby-mode{font-size:13px;line-height:24px;padding:3px 10px;background:#d8efc9;color:#2d7044;border:1px solid #b8dca8;border-radius:6px;font-weight:700}
#lobby .room-code .lobby-tag{background:#e4edf3;color:#486779;border-color:#cadce6;font-size:10px;padding:1px 7px}
#lobby .room-code{gap:10px;border-radius:6px;margin:16px 0 8px}
#lobby-code{flex:1;text-align:left;font-size:25px}
#lobby .lobby-share-note{font-size:11px;line-height:1.8;color:#758479;margin:0 0 16px;overflow-wrap:anywhere}
#lobby{max-height:calc(100dvh - 210px);overflow-y:auto}
@media(max-width:760px){#lobby{padding:20px;max-height:calc(100dvh - 156px)}#lobby .lobby-heading h2{font-size:20px}}
#loot-pickup{position:fixed;z-index:9;left:50%;bottom:calc(146px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px;background:#f6fbff;border:1px solid #aec8d8;border-radius:8px;width:270px;max-width:calc(100vw - 76px);box-shadow:0 5px 20px #16374633}
#loot-pickup .pickup-icon{color:#147ba4;display:grid;place-items:center;width:36px;height:40px}#loot-pickup .pickup-icon svg{width:32px;height:32px}
#loot-pickup strong{display:block;font-size:14px}#loot-pickup small{display:block;font-size:11px;margin-top:4px;color:#667982}#loot-pickup button{margin-left:auto;min-width:56px;height:40px;border-radius:5px;color:white;background:#187c9d;font-weight:700}
body:has(#loot-pickup:not([hidden])) #player-state,body:has(#loot-pickup:not([hidden])) #context-action{visibility:hidden}
#action-bar.action-bar{left:calc(6px + env(safe-area-inset-left));right:auto;bottom:calc(112px + env(safe-area-inset-bottom));top:auto;transform:none;width:46px;max-height:calc(100dvh - 92px);display:flex;flex-direction:column;justify-content:flex-start;gap:3px;padding:3px;background:#f4f9f5eb;border:1px solid #d7e4dc;border-radius:8px;box-shadow:0 3px 12px #173d2b20}
#action-bar.action-bar button{width:38px;height:40px;min-height:0;flex:0 1 40px;display:grid;place-items:center;padding:0;border-radius:5px;touch-action:none}
#action-bar.action-bar button svg{width:21px;height:21px;color:#426b57}
#action-bar.action-bar button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#action-bar.action-bar button b{top:0;right:0;min-width:12px;text-align:center;font-size:9px;background:#e0ecd4;color:#4e7044}
#action-bar.action-bar button:active{background:#d7e9dd}
#walk-pc{display:none!important}
/* Keep the vertical ability rail above the player card on narrow screens. */
@media(max-width:760px){#action-bar.action-bar{bottom:calc(176px + env(safe-area-inset-bottom));}}
@media(max-height:500px){#action-bar.action-bar{gap:1px;bottom:calc(102px + env(safe-area-inset-bottom));max-height:calc(100dvh - 194px - env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden}#action-bar.action-bar button{height:28px;flex:0 0 28px}body:has(#action-bar:not([hidden])) .world-tag,body:has(#action-bar:not([hidden])) .events{left:64px}}
#mission.mission{top:98px;right:12px;width:320px;max-width:calc(100vw - 24px);padding:12px 14px;border:1px solid #d4e2e2;border-radius:8px;background:#f7fbfcf5;box-shadow:0 4px 16px #163d3820}
#mission .mission-header{gap:8px}
#mission .mission-tag{font-size:10px;line-height:20px;padding:1px 6px;border-radius:4px;background:#dcece8;color:#246450;white-space:nowrap;font-weight:700}
#mission .mission-header #mission-title{font-size:13px;line-height:20px;white-space:nowrap}
#mission .mission-header .icon-button{width:28px;height:32px;color:#416f66}
#mission .alarm-message{margin-top:10px;line-height:1.8;color:#53686c}
#mission .alarm-number{font-size:16px;color:#c62828;font-weight:800;font-variant-numeric:tabular-nums}
#mission.is-collapsed{padding:8px 10px}
@media(max-width:760px){
 #mission.mission{top:80px}
 body:has(#mission:not([hidden])) .world-tag{top:var(--mission-bottom,240px)}
 body:has(#mission:not([hidden])) .events{top:calc(var(--mission-bottom,240px) + 40px);max-width:calc(100vw - 24px)}
 body:has(#mission:not([hidden])) .toast{top:calc(var(--mission-bottom,240px) + 84px)}
}
@media(max-width:760px){body:has(.mission.is-collapsed:not([hidden])) .events{top:194px}}
#team-panel:not([hidden]){display:block;top:auto;bottom:calc(230px + env(safe-area-inset-bottom));right:54px;width:240px;max-width:calc(100vw - 72px);max-height:calc(100dvh - 330px);overflow:auto;z-index:8;padding:12px}
#team-panel .section-label{position:sticky;top:-12px;background:#fcfdf3;min-height:34px}
#team-alive{margin-left:auto}
#team-close{width:28px;height:28px;margin-left:6px}
#hideout-info{width:min(320px,calc(100vw - 32px));padding:20px;border:1px solid #c5d5cb;border-radius:6px;background:#f4f8f4;color:#233d32;max-height:85dvh;overflow:auto}
#hideout-info::backdrop{background:#10251cb3}
#hideout-info dl{display:grid;grid-template-columns:1fr auto;gap:16px 12px;font-size:14px}
#hideout-info dd{margin:0;font-weight:600}
#hideout-info-button{padding:9px;margin-left:6px;vertical-align:middle}
#hideout-info-button svg{width:18px;height:18px;display:block}
#scene-loading{position:fixed;inset:0;z-index:100;background:#20382c80;display:grid;place-items:center;cursor:wait}
#scene-loading>div{display:flex;align-items:center;gap:12px;padding:20px 24px;border-radius:6px;background:#f8fcf9;color:#244d3a;font-size:14px;box-shadow:0 6px 28px #0003}
#scene-loading svg{width:24px;height:24px;animation:scene-loading-spin 1s linear infinite}
@keyframes scene-loading-spin{to{transform:rotate(360deg)}}
@media(max-height:500px){#team-panel:not([hidden]){bottom:20px;max-height:calc(100dvh - 120px)}}

/* Final HUD placement, shared by expanded and collapsed mission states. */
#landscape-prompt{display:none}
.rear-view{position:fixed;z-index:6;top:58px;width:calc(var(--game-width,100vw) * .198);max-width:275px;background:#edf4f3;border:1px solid #8ca9a5;border-radius:6px;overflow:hidden}
.rear-left{left:12px}.rear-right{right:12px}
.rear-view canvas{display:block;width:100%;aspect-ratio:2;filter:brightness(1.22) saturate(1.08) contrast(1.04)}
.rear-view.danger{border:3px solid #e34545}
@media(orientation:portrait){body.playing-landscape #landscape-prompt:not([hidden]){display:flex;align-items:center;gap:12px;position:fixed;bottom:180px;left:50%;transform:translateX(-50%);z-index:10;background:#edf4f3;padding:8px;border-radius:6px;white-space:nowrap;font-size:12px}#landscape-prompt button{width:36px;height:36px;display:grid;place-items:center}#landscape-prompt svg{width:20px;height:20px}}
body:has(#mission:not([hidden])) .world-tag{left:12px;right:auto;top:96px;max-width:calc(100vw - 24px);overflow-wrap:anywhere}
body #mission.mission{left:12px;right:auto;top:140px}
body #joystick.joystick{width:126px;height:126px;bottom:calc(16px + env(safe-area-inset-bottom));touch-action:none}
body #joystick #joystick-knob{width:46px!important;height:46px!important;left:40px!important;top:40px!important}
body #player-state.player-state{left:calc(50% + 82px);right:8px;bottom:calc(24px + env(safe-area-inset-bottom));width:auto;min-width:0;max-width:124px;padding:8px;gap:5px;flex-wrap:wrap}
body #player-state.player-state>div{width:100%;min-width:0}
body #player-state .player-avatar{display:none}
body #player-state strong,body #player-state #player-status{white-space:normal;overflow-wrap:anywhere}
body:has(#mission:not([hidden])) #events.events{left:0;right:auto;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom));width:calc(50% - 82px);max-width:calc(50% - 82px);max-height:96px;overflow:auto;gap:3px}
body #events.events>div{white-space:normal;overflow-wrap:anywhere;padding:5px;font-size:10px;line-height:1.4;flex-shrink:0}
body #action-bar.action-bar{bottom:calc(112px + env(safe-area-inset-bottom))}
body .map-controls .icon-button{width:48px;height:48px}
body .map-controls .icon-button svg{width:25px;height:25px}
@media(max-height:500px){body #action-bar.action-bar{bottom:calc(100px + env(safe-area-inset-bottom));max-height:80px;overflow-y:auto}body #mission.mission{max-height:64px;overflow-y:auto}}
@media(max-width:760px){
 body:has(#mission:not([hidden])) .world-tag{top:80px}
 body #mission.mission{top:116px;width:calc(100vw - 24px);max-width:360px}
}
@media all{
 body.playing-landscape .topbar{height:48px;padding:0 12px;gap:12px}
 body.playing-landscape .brand h1{font-size:14px}body.playing-landscape .brand div>span{display:none}
 body.playing-landscape .brand-icon{width:28px;height:28px}
 body.playing-landscape .match-stats{gap:16px;padding:2px 12px}
 body.playing-landscape .match-stats strong{font-size:19px;line-height:22px}
 body.playing-landscape .match-stats small{font-size:9px}
 body.playing-landscape .top-actions{flex-direction:row}.playing-landscape .connection{display:none}
 body.playing-landscape:has(#mission:not([hidden])) .world-tag{top:54px;left:50%;transform:translateX(-50%);font-size:10px;padding:3px 8px;max-width:calc(var(--game-width) * .48)}
body.playing-landscape:has(#mission:not([hidden])) .world-tag{left:12px;right:auto;top:54px;transform:none;width:calc(var(--game-width) * .18);max-width:250px;overflow:hidden;white-space:nowrap}
/* Keep the landscape location card readable beside the right mission card. */
body.playing-landscape:has(#mission:not([hidden])) .world-tag{width:calc(var(--game-width) * .45);max-width:360px;overflow:visible;white-space:nowrap}
 body.playing-landscape #mission.mission{top:54px;left:auto;right:12px;transform:none;width:calc(var(--game-width) * .18);max-width:250px;max-height:32px;overflow:hidden;padding:6px 10px}
 body.playing-landscape #joystick.joystick,body.playing-landscape:has(#walking-controls:not([hidden])) #joystick.joystick{left:calc(16px + env(safe-area-inset-left));bottom:12px;transform:none;width:126px;height:126px}
 body.playing-landscape #action-bar.action-bar{left:auto;right:12px;bottom:12px;width:144px;max-height:none;display:grid;grid-template-columns:repeat(3,40px);gap:5px;padding:6px;overflow:visible}
 body.playing-landscape #action-bar.action-bar button{width:40px;height:40px}
 body.playing-landscape #player-state.player-state{left:176px;right:auto;bottom:12px;width:100px;padding:5px}
 body.playing-landscape .map-controls,body.playing-landscape:has(#walking-controls:not([hidden])) .map-controls{left:auto;right:172px;bottom:12px;flex-direction:row;gap:6px}
 body.playing-landscape:has(#mission:not([hidden])) #events.events{left:180px;right:auto;bottom:78px;max-width:180px;width:180px;max-height:52px}
 body.playing-landscape #events.events>div:not(:first-child){display:none}
 body.playing-landscape #events.events>div{animation:landscape-event 7s forwards}
 body.playing-landscape #context-action{left:auto;right:172px;bottom:70px;transform:none;max-width:180px}
 body.playing-landscape #walking-controls{left:50%;bottom:12px;transform:translateX(-50%);max-width:250px;max-height:130px}
 body.playing-landscape #hunter-warning{display:none!important}
 body.playing-landscape .movement-hint,body.playing-landscape .compass{display:none!important}
 body.playing-landscape #team-panel:not([hidden]){bottom:170px;right:66px;max-height:calc(100dvh - 230px)}
 body.playing-landscape .toast{top:150px}
}
@keyframes landscape-event{0%,80%{opacity:1}100%{opacity:0}}

/* Desktop play HUD: keep movement controls beside the player card and group
   the navigation/mission controls lower on the right edge. */
@media(min-width:761px){
  body:has(#joystick:not([hidden])) #joystick.joystick{left:275px;bottom:28px;transform:none}
  body:has(#joystick:not([hidden])) .map-controls{right:26px;bottom:34px}
  body:has(#joystick:not([hidden])) #team-panel.team-panel{right:26px;bottom:34px;top:auto;max-height:calc(100dvh - 180px)}
  body:has(#joystick:not([hidden])) #mission.mission{top:auto;right:26px;bottom:118px}
}

/* Final desktop landscape HUD placement.  These rules intentionally come
   after the legacy landscape touch layout so desktop cannot inherit its
   left-edge sprint rail. */
@media(min-width:761px){
  body:not(.touch-directional):has(#action-bar:not([hidden])) .map-controls{
    left:auto!important; right:24px!important; bottom:28px!important;
    top:auto!important; flex-direction:row!important; gap:6px!important;
  }
  body:not(.touch-directional):has(#action-bar:not([hidden])) #mission.mission{
    left:auto!important; right:24px!important; bottom:96px!important; top:auto!important;
    width:320px!important; max-width:320px!important; max-height:90px!important; overflow:auto!important;
  }
  body:not(.touch-directional):has(#action-bar:not([hidden])) #action-bar.action-bar{
    left:274px!important; right:auto!important; top:auto!important; bottom:28px!important;
    width:104px!important; height:46px!important; display:flex!important; flex-direction:row!important;
    gap:6px!important; padding:3px!important; z-index:12!important;
  }
  body:not(.touch-directional):has(#action-bar:not([hidden])) #action-bar.action-bar button{width:44px!important;height:38px!important;flex:0 0 44px!important}
  body:not(.touch-directional):has(#action-bar:not([hidden])) #action-bar #walk-pc{display:grid!important}
  /* PC always exposes both movement choices, even when the viewport is
     classified as landscape by the rotation/layout code. */
  body:not(.touch-directional):has(#joystick:not([hidden])) #action-bar.action-bar{
    position:fixed!important; left:274px!important; right:auto!important;
    top:auto!important; bottom:28px!important; width:46px!important; height:46px!important;
    display:block!important; padding:3px!important; z-index:12!important;
  }
  body:not(.touch-directional):has(#joystick:not([hidden])) #action-bar #sprint{width:38px!important;height:38px!important}
  body:not(.touch-directional):has(#joystick:not([hidden])) #joystick-knob{
    position:fixed!important; left:332px!important; top:auto!important; bottom:28px!important;
    display:grid!important; width:46px!important; height:46px!important; z-index:12!important;
    background:#f7fff1e8!important; border:1px solid #759578!important;
  }
  body:not(.touch-directional):has(#joystick:not([hidden])) #joystick-knob .movement-label{display:block!important}
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick.joystick{
    left:274px!important; right:auto!important; bottom:26px!important;
    width:112px!important; height:48px!important; transform:none!important;
    background:transparent!important; border:0!important;
  }
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick .steer-left,
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick .steer-right,
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick #joystick-back{display:none!important}
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick #action-bar.action-bar{
    position:absolute!important; left:0!important; top:0!important; right:auto!important;
    bottom:auto!important; width:46px!important; height:46px!important; display:block!important;
    padding:3px!important; background:#f4f9f5eb!important; border:1px solid #d7e4dc!important;
  }
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick #action-bar #sprint{
    width:38px!important; height:38px!important;
  }
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick #joystick-knob{
    display:grid!important; width:46px!important; height:46px!important;
    left:58px!important; top:0!important; background:#f7fff1e8!important;
    border:1px solid #759578!important; box-shadow:0 1px 4px #17352222!important;
  }
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #joystick #joystick-knob .movement-label{display:block!important}
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) .map-controls{right:24px!important; bottom:28px!important;}
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #team-panel{right:24px!important; bottom:84px!important; top:auto!important;}
  body:not(.touch-directional).playing-landscape:has(#joystick:not([hidden])) #mission.mission{right:24px!important; bottom:92px!important; top:auto!important;}
}
.result{padding-top:22px}.result h2{margin-top:0}
.welcome-backdrop{z-index:25;background:#10261bd9}
.welcome-modal{width:min(430px,calc(100vw - 32px));padding:28px 30px 24px;border:1px solid #dcebd3;background:#fbfdf5;box-shadow:0 20px 70px #102e2140}
.welcome-kicker{display:flex;align-items:center;gap:7px;color:#6b8b5c;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.welcome-kicker svg{width:16px;height:16px;color:#8caf58}
.welcome-modal h2{margin:12px 0 22px;color:#244637;font-size:25px;line-height:1.25;font-weight:700}
.welcome-modal h2 strong{color:#176d52;font-weight:900}
.welcome-roles{display:grid;gap:12px}
.welcome-role{padding:14px 15px 13px;border:1px solid #e1e9db;border-radius:9px;background:#f5f9ef}
.welcome-role p{margin-top:10px;color:#4f6657;font-size:15px;line-height:1.7;font-weight:500}
.welcome-role-heading{display:flex;align-items:center;gap:10px;min-width:0}
.welcome-role-heading>strong{color:#202923;font-size:16px;font-weight:900;line-height:1.2}
.welcome-role-tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:800;line-height:1;background:#dcefd0;color:#286243}
.hunter-role{background:#faf4ee;border-color:#eee0d4}
.hunter-role .welcome-role-tag{background:#f3ddd0;color:#9a573f}
.welcome-cta{margin-top:20px;padding:13px 16px;font-size:13px;justify-content:center;gap:8px}
.welcome-cta svg{width:17px;height:17px}
@media(max-width:760px){.welcome-modal{padding:23px 20px 19px}.welcome-modal h2{font-size:22px;margin-bottom:17px}.welcome-role{padding:12px}.welcome-role p{font-size:13px;line-height:1.65}.welcome-role-heading>strong{font-size:15px}.welcome-role-tag{font-size:12px}.welcome-cta{margin-top:16px;min-height:46px}}
body.rotated-game{position:fixed;width:var(--game-width);height:var(--game-height);left:100%;top:0;transform-origin:0 0;transform:rotate(90deg);overflow:hidden}
body.rotated-game #game>canvas.city-3d{width:var(--game-width);height:var(--game-height)}
body.playing-landscape .hunter-stat{display:flex!important}
body.playing-landscape .map-modal{width:min(620px,calc(var(--game-height) - 40px));max-width:calc(var(--game-width) - 40px);max-height:calc(var(--game-height) - 24px);padding:10px}
body.playing-landscape .map-modal canvas{max-height:calc(var(--game-height) - 130px);width:auto;max-width:100%;margin:auto}
body.playing-landscape #team-panel:not([hidden]){max-height:calc(var(--game-height) - 180px);bottom:80px}
body.playing-landscape .result{max-height:calc(var(--game-height) - 24px)}
/* Native modal dialogs live in the top layer and do not inherit the body transform. */
body.rotated-game dialog[open]:modal{position:fixed;left:50%;top:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%) rotate(90deg);width:min(360px,calc(var(--game-width) - 32px));max-width:calc(var(--game-width) - 32px);max-height:calc(var(--game-height) - 24px);overflow:auto}
/* Non-modal terminals inherit the game rotation and use game coordinates. */
body.playing-landscape .terminal-dialog[open]{
  position:fixed;left:50%;top:50%;right:auto;bottom:auto;margin:0;z-index:12;transform:translate(-50%,-50%);
  width:min(560px,calc(var(--game-width,100vw) - 32px));
  max-width:calc(var(--game-width,100vw) - 32px);
  max-height:calc(var(--game-height,100dvh) - 24px);
  padding:16px 20px;
}
body.playing-portrait .top-actions{display:grid;grid-template-columns:36px;grid-template-rows:repeat(2,30px);gap:2px;align-content:center}
body.playing-portrait .top-actions .icon-button{width:36px;height:30px}
body.playing-portrait .connection{display:none}
body.playing-portrait .topbar{height:72px;padding:0 8px;gap:5px}
body.playing-portrait .brand{gap:4px}body.playing-portrait .brand h1{font-size:11px}
body.playing-portrait .brand div>span{display:none}
body.playing-portrait .match-stats{gap:6px;padding:4px}.playing-portrait .match-stats strong{font-size:17px;line-height:22px}
body.playing-portrait #mission.mission{left:12px;top:116px;right:auto;width:calc(var(--game-width) - 24px);max-width:360px;transform:none}
body.playing-portrait:has(#mission:not([hidden])) .world-tag{top:80px;left:12px;transform:none}
body.playing-portrait .topbar{display:grid;grid-template-columns:72px minmax(0,1fr) 74px}
body.playing-portrait .brand{min-width:0}.playing-portrait .brand h1{white-space:normal}
body.playing-portrait .brand-icon{width:20px;height:24px;flex-shrink:0}
body.playing-portrait .match-stats{width:100%;min-width:0;display:grid;grid-template-columns:1.15fr 1fr .7fr;gap:3px;padding:3px}
body.playing-portrait .match-stats>div{min-width:0}
body.playing-portrait .match-stats strong{font-size:13px;white-space:nowrap}
body.playing-portrait .match-stats small{font-size:8px;white-space:normal}
body.playing-portrait .match-stats em{font-size:9px}
body.playing-portrait .stat-line{display:none}
/* Keep the create/join panels clear of the bottom multiplayer footer. */
#setup.setup{top:118px;max-height:calc(100dvh - 132px)}
#setup.setup .modal-title{margin-bottom:9px}
#setup.setup .modal-title h2{margin:0;font-size:24px;line-height:1.25}
#setup.setup .field{margin-top:9px}
@media(max-width:760px){#setup.setup{top:88px;max-height:calc(100dvh - 98px)}#setup.setup .modal-title{margin-bottom:7px}#setup.setup .modal-title h2{font-size:21px}#setup.setup .field{margin-top:7px}}
body.playing-portrait #runners{font-size:10px}
#result-honors{white-space:pre-line;overflow-wrap:anywhere;line-height:1.8;margin:16px 0;text-align:left;font-size:14px}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable]:not([contenteditable="false"]){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#orientation-toggle{position:fixed;z-index:7;right:12px;top:80px;width:44px;height:32px;display:grid;place-items:center}
#orientation-toggle .orientation-screen{width:21px;height:17px}
#orientation-toggle .orientation-arrow{position:absolute;width:14px;height:14px;right:4px;top:1px;background:#fffdf8e8}
#launch.setup{padding:10px}
#launch .launch-actions{gap:8px}
#launch .primary{margin-top:0;min-height:44px}
#existing-rooms .room-item{display:flex;gap:8px;margin:0;padding:12px 0;border:0;border-bottom:1px solid #d2ded8;border-radius:0;background:transparent;font-size:12px}
#existing-rooms .room-item:last-child{border-bottom:0}
#existing-rooms .room-item:hover,#existing-rooms .room-item:active{background:#e2ede54d}
#existing-rooms .room-heading{display:flex;align-items:center;gap:5px;width:100%;min-width:0;font-size:12px;line-height:20px}
#existing-rooms .room-phase,#existing-rooms .room-mode{flex-shrink:0;padding:0 4px;border-radius:3px;font-weight:500;white-space:nowrap}
#existing-rooms .room-phase{background:#dcebe4;color:#28634c}
#existing-rooms .room-mode{background:#e1eaf4;color:#45657f}
#existing-rooms .room-theme{flex-shrink:0;white-space:nowrap}
#existing-rooms .room-creator{margin-left:auto;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#556b60}
#existing-rooms .room-details{display:flex;gap:14px;align-items:center;font-size:12px;line-height:20px;color:#66796f;font-variant-numeric:tabular-nums;white-space:nowrap}
#existing-rooms{max-height:min(300px,34vh);overflow-y:auto;scrollbar-width:auto;scrollbar-color:#5a806c #e2ebe4;padding-right:4px}
#existing-rooms::-webkit-scrollbar{width:12px}
.revive-puzzle{margin-top:16px;padding-top:14px;border-top:1px solid #bdcfc6;font-size:12px;line-height:1.7}
.revive-puzzle h3{font-size:15px}.revive-puzzle button{padding:10px 12px;min-height:40px;background:#275f48;color:#fff;border-radius:5px;margin-top:8px}
.revive-puzzle input{width:100%;padding:8px;border:1px solid #9ebbac;border-radius:4px;box-sizing:border-box}
.revive-puzzle label,.revive-puzzle small{display:block}.puzzle-question{font-size:16px;font-weight:700;margin:10px 0}
#existing-rooms::-webkit-scrollbar-track{background:#e2ebe4;border-radius:6px}
#existing-rooms::-webkit-scrollbar-thumb{background:#5a806c;border-radius:6px;border:2px solid #e2ebe4}
#setup:has(#existing-rooms:not([hidden])){max-height:calc(100dvh - 28px);overflow:hidden}
@media(max-width:760px){#existing-rooms{max-height:29vh}#setup:has(#existing-rooms:not([hidden])){max-height:calc(100dvh - 24px)}}
body.playing-landscape #orientation-toggle{top:54px;right:12px}
body.playing-portrait #orientation-toggle{top:80px;right:12px}
body.playing-landscape .rear-right{right:12px}
body.playing-landscape .rear-view{top:96px;width:calc(var(--game-width,100vw) * .198);max-width:275px}
/* Leave separate touch areas for the mission, sprint and nearby HUD controls. */
body.playing-landscape #mission.mission{top:auto;left:auto;right:calc(12px + env(safe-area-inset-right));bottom:120px;transform:none;width:min(250px,calc(var(--game-width,100vw) - 320px));max-width:250px;max-height:92px;overflow:auto;padding:8px 11px}
body.playing-landscape #action-bar.action-bar{left:calc(176px + env(safe-area-inset-left));right:auto;bottom:12px;width:52px;display:flex;flex-direction:column;gap:4px;padding:5px}
body.playing-landscape #action-bar.action-bar button{width:40px;height:40px;flex:0 0 40px}
body.playing-landscape #player-state.player-state{bottom:72px}
body.playing-landscape:has(#mission:not([hidden])) #events.events{bottom:120px}
body.playing-landscape .map-controls,body.playing-landscape:has(#walking-controls:not([hidden])) .map-controls{right:12px;bottom:132px}
body.playing-landscape #context-action{right:12px;bottom:194px}
body.playing-portrait:has(#mission:not([hidden])) .world-tag{max-width:calc(var(--game-width) - 80px);gap:5px;padding:7px}

/* Horizontal HUD refinements: keep the information dense without covering the scene. */
body.playing-landscape .world-tag{
  width:fit-content;
  max-width:min(360px,calc(var(--game-width,100vw) - 310px));
  padding:3px 8px;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
}
body.playing-landscape .world-tag #world-name,
body.playing-landscape .world-tag #district{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.playing-landscape:has(#mission:not([hidden])) .world-tag{
  width:fit-content;
  max-width:min(360px,calc(var(--game-width,100vw) - 310px));
  padding:3px 8px;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
}
body.playing-landscape #mission.mission{
  right:calc(12px + env(safe-area-inset-right));
  bottom:120px;
  width:min(250px,calc(var(--game-width,100vw) - 320px));
  max-width:250px;
  max-height:calc(var(--game-height,100vh) - 24px);
  padding:4px 8px;
  overflow:auto;
}
body.playing-landscape #mission .mission-header{gap:4px;min-height:20px}
body.playing-landscape #mission .mission-header #mission-title{font-size:12px;line-height:18px}
body.playing-landscape #mission .mission-header .icon-button{width:24px;height:24px}
body.playing-landscape #mission .alarm-message{margin-top:3px;line-height:1.35}
body.playing-landscape #mission .mission-detail{margin-top:3px}
body.playing-landscape #mission .alarm-row{margin:1px 0 3px}
body.playing-landscape #mission .mission-objective{margin-top:4px;line-height:16px}
body.playing-landscape #mission #task-progress{margin-top:5px}
body.playing-landscape #mission .mission-reward{margin-top:5px;padding-top:5px}

/* The team panel is a compact, readable roster rather than a second large card. */
#team-panel .section-label{gap:7px;padding:2px 0 8px;border-bottom:1px solid #dce7dd;background:#fcfdf3}
#team-panel .team-panel-title{font-size:15px;line-height:22px;color:#244c3b;font-weight:800}
#team-panel #team-alive{font-size:10px;color:#78907f;font-variant-numeric:tabular-nums}
#team-panel .team-member{gap:8px;padding:8px 2px;font-size:12px}
#team-panel .team-member>i{width:8px;height:8px;flex:0 0 8px}
#team-panel .team-member small{font-size:10px;color:#72877b}
#team-panel .team-member:last-child{border-bottom:0}

/* A separate bottom button gives the pad a direct 180-degree turn action. */
#joystick{isolation:isolate}
#joystick #action-bar.action-bar{position:absolute;left:50%;right:auto;top:4px;bottom:auto;z-index:2;width:34px;height:28px;transform:translateX(-50%);display:block;padding:0;background:transparent;border:0;border-radius:999px;box-shadow:none;overflow:visible}
#joystick #action-bar.action-bar #sprint{width:34px;height:28px;min-height:0;display:grid;place-items:center;padding:0;background:transparent;border:0;border-radius:0;color:#8a7412;touch-action:manipulation}
#joystick #action-bar.action-bar #sprint svg{width:18px;height:18px;color:#8a7412}
#joystick #action-bar.action-bar #sprint:active,#joystick #action-bar.action-bar #sprint.active{background:transparent;transform:scale(.94)}
#joystick #action-bar.action-bar #sprint[aria-pressed="true"] svg{color:#b37800;fill:#ffcf33;filter:drop-shadow(0 0 3px #ffe77b)}
#joystick-back{position:absolute;left:50%;bottom:4px;z-index:2;width:34px;height:28px;transform:translateX(-50%);display:grid;place-items:center;padding:0;background:#f7fff1e8;border:1px solid #759578;border-radius:999px;color:#315d41;touch-action:manipulation}
#joystick-back svg{width:18px;height:18px}
#joystick-back:active{transform:translateX(-50%) scale(.94)}
#joystick-knob,#sprint,#joystick-back{-webkit-tap-highlight-color:transparent}
#joystick #joystick-knob .movement-label{display:block;font-size:8px;line-height:9px;color:#315d41;white-space:nowrap}
body:not(.walking-mode) #joystick #joystick-knob{background:#f7fff1e8;border:1px solid #759578;box-shadow:0 1px 4px #17352222}
body:not(.walking-mode) #joystick #joystick-knob svg{color:#315d41}
body:not(.walking-mode) #joystick-back{background:transparent;border:0;border-radius:0;box-shadow:none}
body.walking-mode #joystick #joystick-knob{display:none!important}
body.walking-mode #action-bar.action-bar{display:none!important}
body.walking-mode #sprint{display:none!important}

/* Landscape puts the compact player card at the visual center of the bottom edge. */
body.playing-landscape #player-state.player-state{
  left:50%;
  right:auto;
  bottom:12px;
  transform:translateX(-50%);
  width:138px;
  min-width:0;
  max-width:138px;
  padding:6px 8px;
  gap:4px;
  flex-wrap:nowrap;
}
body.playing-landscape #player-state.player-state>div{width:100%;min-width:0}
body.playing-landscape #player-state strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.playing-landscape #player-state #player-status{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.playing-landscape #player-state>b{display:block;align-self:flex-start;margin-left:auto;font-size:12px}

/* Walking mode keeps a single sensor icon beside the steering pad; details expand on tap. */
body.playing-landscape #walking-controls{
  left:calc(176px + env(safe-area-inset-left));
  right:auto;
  bottom:12px;
  transform:none;
  width:44px;
  height:44px;
  max-width:none;
  max-height:none;
  padding:0;
  overflow:visible;
}
body.playing-landscape #walking-controls[data-expanded="false"]{width:44px;height:44px;padding:0}
body.playing-landscape #walking-controls[data-expanded="false"] .motion-heading,
body.playing-landscape #walking-controls[data-expanded="false"] #motion-toggle{width:44px;height:44px}
body.playing-landscape #walking-controls[data-expanded="false"] #motion-toggle{gap:0;padding:0}
body.playing-landscape #walking-controls[data-expanded="false"] #motion-toggle strong{display:none}
body.playing-landscape #walking-controls[data-expanded="false"] #motion-toggle>svg:first-child{width:22px;height:22px}
body.playing-landscape #walking-controls[data-expanded="false"] .motion-error-icon{position:absolute;right:-3px;top:-3px;width:16px;height:16px;padding:1px;background:#fff3f0;border-radius:50%}
body.playing-landscape #walking-controls[data-expanded="true"]{
  left:calc(176px + env(safe-area-inset-left));
  bottom:72px;
  width:min(250px,calc(var(--game-width,100vw) - 200px));
  height:auto;
  max-width:250px;
  max-height:calc(var(--game-height,100vh) - 100px);
  padding:8px;
  overflow:auto;
}
body.playing-landscape #walking-controls[data-expanded="true"] #motion-toggle{width:auto;height:30px;justify-content:flex-start;padding:4px 0}
body.playing-landscape #walking-controls[data-expanded="true"] #motion-toggle strong{display:inline}

/* Narrower landscape stats leave room for sound/exit controls. */
body.playing-landscape .topbar{gap:8px;padding-left:10px;padding-right:10px}
body.playing-landscape .match-stats{gap:8px;padding:2px 8px;min-width:0;flex:0 1 auto}
body.playing-landscape .match-stats strong{font-size:17px;line-height:21px}
body.playing-landscape .match-stats small{font-size:8px}
body.playing-landscape .match-stats em{font-size:10px}
body.playing-landscape .top-actions{gap:4px;flex-shrink:0}

/* Read-only inventory: no panel or button chrome, only owned items. */
.inventory-hud{position:fixed;z-index:6;display:flex;gap:8px;align-items:center;pointer-events:none;color:#f7fff9;text-shadow:0 1px 4px #102a20,0 0 2px #102a20}
.inventory-hud>span{display:flex;align-items:center;gap:3px;min-width:27px}
.inventory-hud svg{width:21px;height:21px;stroke-width:2.4}
.inventory-hud b{font:800 13px/1 Consolas,monospace;color:#fff}
.inventory-hud #inventory-gun svg{color:#8ee5ff}.inventory-hud #inventory-revive svg{color:#ff9bb6}.inventory-hud #inventory-radar svg{color:#cfb4ff}.inventory-hud #inventory-energy svg{color:#ffe47b}
body.playing-portrait .inventory-hud{right:18px;top:auto;bottom:calc(96px + env(safe-area-inset-bottom));flex-direction:column;align-items:flex-end;gap:7px}
body.playing-landscape .inventory-hud{left:calc(176px + env(safe-area-inset-left));right:auto;bottom:70px;flex-direction:row;flex-wrap:wrap;max-width:210px}

/* Portrait HUD: keep the player card at the lower-right edge. Walking status
   collapses to a touch target above it and expands only on demand. */
body.playing-portrait #player-state.player-state{
  left:auto;
  right:12px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:124px;
  max-width:124px;
}
body.playing-portrait #walking-controls{
  left:auto;
  right:12px;
  bottom:calc(88px + env(safe-area-inset-bottom));
  transform:none;
  width:44px;
  height:44px;
  max-width:44px;
  padding:0;
  overflow:visible;
  border-radius:50%;
}
body.playing-portrait #walking-controls[data-expanded="false"] .motion-heading,
body.playing-portrait #walking-controls[data-expanded="false"] #motion-toggle{
  width:44px;
  height:44px;
}
body.playing-portrait #walking-controls[data-expanded="false"] #motion-toggle{gap:0;padding:0;justify-content:center}
body.playing-portrait #walking-controls[data-expanded="false"] #motion-toggle strong{display:none}
body.playing-portrait #walking-controls[data-expanded="false"] #motion-toggle>svg:first-child{width:22px;height:22px}
body.playing-portrait #walking-controls[data-expanded="false"] .motion-error-icon{position:absolute;right:-3px;top:-3px;width:16px;height:16px;padding:1px;background:#fff3f0;border-radius:50%}
body.playing-portrait #walking-controls[data-expanded="true"]{
  right:12px;
  bottom:calc(88px + env(safe-area-inset-bottom));
  width:min(250px,calc(100vw - 24px));
  max-width:250px;
  height:auto;
  max-height:calc(100dvh - 120px);
  padding:8px;
  border-radius:6px;
  overflow:auto;
}
#player-state .player-status-row{display:flex;align-items:center;gap:6px;min-width:0;width:100%}
.player-status-row #player-status{min-width:0;overflow:hidden;text-overflow:ellipsis}
.player-status-row #player-speed{margin-left:auto;flex:none;font:800 10px/1 Consolas,monospace;color:#4d7758}
@media(max-width:760px){.player-status-row{gap:4px}.player-status-row #player-speed{font-size:10px}}

/* Portrait top bar: give the brand one uninterrupted line and keep the
   sound/exit stack inset from the right edge. The stats card gets the space
   between them and uses readable mobile type sizes. */
body.playing-portrait .topbar{
  grid-template-columns:82px minmax(0,1fr) 46px;
  padding-left:8px;
  padding-right:0;
  gap:6px;
}
body.playing-portrait .brand{gap:5px;min-width:0;white-space:nowrap}
body.playing-portrait .brand h1{font-size:12px;line-height:18px;white-space:nowrap}
body.playing-portrait .match-stats{width:calc(100% - 10px);margin-left:6px;gap:4px;padding:5px 6px}
body.playing-portrait .match-stats small{font-size:9px;line-height:12px}
body.playing-portrait .match-stats strong{font-size:16px;line-height:21px}
body.playing-portrait .match-stats em{font-size:11px}
body.playing-portrait .top-actions{width:46px;gap:2px;justify-items:end;transform:none}
body.playing-portrait .top-actions .icon-button,
body.playing-portrait .top-actions #sound,
body.playing-portrait .top-actions #leave{width:40px;height:30px;justify-self:end}
body.playing-portrait .top-actions #sound{justify-self:end}

/* Player card readability: keep the compact lower-right layout while making
   the name, status, speed, and stamina indicator easy to read on phones. */
#player-state.player-state{
  width:150px;
  max-width:150px;
  padding:10px 11px;
}
#player-state.player-state>div{width:100%;min-width:0}
#player-state strong{font-size:16px;line-height:21px}
#player-state #player-status{font-size:12px;line-height:18px}
#player-state .player-status-row{gap:5px}
#player-state .player-status-row #player-speed{font-size:13px;line-height:18px}
#player-state .stamina{height:5px;margin-top:5px}
@media(max-width:760px){
  body.playing-portrait #player-state.player-state{
    right:12px;width:min(124px,calc(50% - 83px));max-width:124px;padding:6px;
  }
}

/* Remove the extra rectangular fill behind the roster title. */
body.playing-portrait #player-state strong{font-size:14px;line-height:18px}
body.playing-portrait #player-state #player-status{font-size:11px;line-height:15px}
body.playing-portrait #player-state .player-status-row{flex-wrap:wrap;gap:2px 4px;margin:2px 0 4px}
body.playing-portrait #player-state .player-status-row #player-speed{font-size:11px;line-height:15px}
body.playing-portrait #player-state .stamina{height:4px;margin-top:3px}
#team-panel .section-label,
#team-panel .team-panel-title{background:transparent}

/* Keep the pre-game mobile top bar aligned with the in-game portrait HUD. */
@media (max-width:760px){
  body:not(.playing-portrait):not(.playing-landscape) .topbar{
    height:72px;
    display:grid;
    grid-template-columns:82px minmax(0,1fr) 46px;
    padding-left:8px;
    padding-right:0;
    gap:6px;
  }
  body:not(.playing-portrait):not(.playing-landscape) .brand{gap:5px;min-width:0;white-space:nowrap}
  body:not(.playing-portrait):not(.playing-landscape) .brand h1{font-size:12px;line-height:18px;white-space:nowrap}
  body:not(.playing-portrait):not(.playing-landscape) .match-stats{margin-left:6px;gap:4px;padding:5px 6px}
  body:not(.playing-portrait):not(.playing-landscape) .match-stats small{font-size:9px;line-height:12px}
  body:not(.playing-portrait):not(.playing-landscape) .match-stats strong{font-size:16px;line-height:21px}
  body:not(.playing-portrait):not(.playing-landscape) .match-stats em{font-size:11px}
  body:not(.playing-portrait):not(.playing-landscape) .top-actions{width:46px;gap:2px;justify-items:end;transform:none}
  body:not(.playing-portrait):not(.playing-landscape) .top-actions .icon-button{width:40px;height:30px;justify-self:end}
}
/* Welcome modal starts directly with its title; the former kicker is removed. */
.welcome-modal>h2:first-child{margin-top:0}
/* Initial welcome loading state. */
.welcome-backdrop{z-index:101}
#scene-loading{z-index:110}
#scene-loading>div span::after{content:'';display:inline-block;width:1.1em;text-align:left;animation:loading-dots 1.2s steps(4,end) infinite}
@keyframes loading-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}



/* Palace guide: one aligned key panel, independent of map height. */
#map-modal{z-index:200}
#map-modal .modal-title{flex-wrap:wrap;gap:6px;margin-bottom:12px}
#map-modal .modal-title>div{flex:1}
#map-modal .modal-title>span{order:3;flex-basis:100%;font:12px "Microsoft YaHei",sans-serif}
#map-modal .modal-title h2{font-size:19px}
#map-modal .map-sidebar{display:flex;flex-direction:column;gap:16px;min-width:0;padding-top:4px;color:#394d43}
#map-modal .map-note{font-size:13px;line-height:1.75;color:#657365;margin:0}
#map-modal .map-key-group{margin:0;padding:12px 0 0;border-top:1px solid #dce3d9}
#map-modal .map-key-group h3{font-size:13px;line-height:1.5;margin:0 0 10px;color:#657365;font-weight:600}
#map-modal .map-terrain-key{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;font-size:14px;color:#76684e}
#map-modal .map-terrain-key>span{white-space:nowrap}
#map-modal .map-legend{display:block;margin:0;font-size:14px}
#map-modal .map-legend-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#map-modal .map-legend-row>span{display:flex;align-items:center;gap:6px;white-space:nowrap;line-height:24px}
#map-modal .map-legend b{flex-shrink:0}
#map-modal .map-legend .loot-key{width:22px;height:22px;line-height:22px;text-align:center;font-size:14px;border-radius:4px}
#map-modal .map-sidebar{margin-top:12px}
@media(min-width:600px) and (max-height:500px){
#map-modal .map-modal{display:grid;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:auto minmax(0,1fr);gap:0 18px;width:min(800px,94vw);max-width:94vw;padding:12px;max-height:94dvh}
#map-modal .modal-title{grid-column:1 / -1}
#map-modal .modal-title>span{order:initial;flex-basis:auto}
#map-modal .map-modal canvas{grid-column:1;grid-row:2;width:min(100%,calc(94dvh - 90px));height:auto;aspect-ratio:1;max-width:100%;margin:auto}
#map-modal .map-sidebar{grid-column:2;grid-row:2;margin:0;max-height:calc(94dvh - 90px);overflow-y:auto;padding-right:4px}
}
body.playing-landscape #map-modal .map-modal{display:grid;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:auto minmax(0,1fr);gap:0 18px;width:min(800px,calc(var(--game-width) - 30px));max-width:calc(var(--game-width) - 30px);padding:12px;max-height:calc(var(--game-height) - 24px)}
body.playing-landscape #map-modal .modal-title{grid-column:1 / -1}
body.playing-landscape #map-modal .modal-title>span{order:initial;flex-basis:auto}
body.playing-landscape #map-modal .map-modal canvas{grid-column:1;grid-row:2;width:min(100%,calc(var(--game-height) - 100px));height:auto;aspect-ratio:1;max-height:calc(var(--game-height) - 100px);max-width:100%;margin:auto}
body.playing-landscape #map-modal .map-sidebar{grid-column:2;grid-row:2;margin:0;max-height:calc(var(--game-height) - 100px);overflow-y:auto;padding-right:4px}
@media(max-width:450px){#map-modal .map-legend{font-size:13px}#map-modal .map-terrain-key{font-size:13px}#map-modal .map-sidebar{gap:12px}#map-modal .map-key-group{padding-top:10px}}

body.playing-landscape #map-modal .map-sidebar{gap:8px}
body.playing-landscape #map-modal .map-note{line-height:1.6}
body.playing-landscape #map-modal .map-key-group{padding-top:8px}
body.playing-landscape #map-modal .map-key-group h3{margin-bottom:6px}
body.playing-landscape #map-modal .map-terrain-key{gap:8px}

/* Approved running logo and unavailable walking option. */
.brand .brand-icon{background:#fffdf7}
.movement-option:disabled{opacity:1;cursor:not-allowed;background:#f1f3f0;border-color:#e0e5dd;color:#89928a}
.movement-option:disabled small{color:#738074}
.movement-option:disabled .movement-option-icon{color:#98a198}

/* Map sidebar now contains only people/tasks and loot. */
#map-modal .map-sidebar>.map-key-group:first-child{border-top:0;padding-top:0}

#map-modal .map-legend-row>.energy-legend{grid-column:span 2}
#map-modal .energy-key{background:#397653;color:#fff8de;box-shadow:inset 0 0 0 1px #fff8de}

/* Keep the steering wheel off the character in both screen orientations. */
body #joystick.joystick,
body:has(#joystick:not([hidden])) #joystick.joystick,
body.playing-landscape:has(#joystick:not([hidden])) #joystick.joystick{left:calc(12px + env(safe-area-inset-left))!important;right:auto!important;top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;transform:none!important}

/* Mobile hold-to-move pad: center selects pace, directions supply movement. */
body.touch-directional:not(.walking-mode) #joystick.joystick{width:126px!important;height:126px!important;background:#f7fff1d9!important;border:1px solid #759578!important;border-radius:50%;isolation:isolate}
body.touch-directional.playing-landscape:not(.walking-mode) #joystick.joystick{left:22px!important;bottom:20px!important;transform:none!important}
body.touch-directional:not(.walking-mode) #joystick #action-bar.action-bar{position:absolute!important;left:50%!important;top:3px!important;bottom:auto!important;right:auto!important;transform:translateX(-50%)!important;width:36px!important;height:28px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;display:block!important}
body.touch-directional #joystick #action-bar #walk-pc{display:none!important}
body.touch-directional:not(.walking-mode) #joystick #action-bar #sprint{width:36px!important;height:28px!important;color:#315d41;background:transparent!important}
body.touch-directional:not(.walking-mode) #joystick #joystick-knob{position:absolute!important;left:39px!important;top:39px!important;bottom:auto!important;width:46px!important;height:46px!important;display:grid!important;place-content:center;gap:1px;transform:none!important}
body.touch-directional:not(.walking-mode) #joystick #joystick-knob.active{background:#fff0bb!important;border-color:#ad8b23!important}
body.touch-directional:not(.walking-mode) #joystick #joystick-knob .run-selected{color:#a17212}
body.touch-directional:not(.walking-mode) #joystick .steer-left,body.touch-directional:not(.walking-mode) #joystick .steer-right{display:block!important;pointer-events:none}
body.touch-directional:not(.walking-mode) #joystick #joystick-back{display:grid!important;position:absolute!important;left:50%!important;top:auto!important;bottom:3px!important;transform:translateX(-50%)!important;width:36px!important;height:28px!important}

body:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick{width:126px!important;height:126px!important;background:#edf4e6b8!important;border:2px solid #78947e!important}
body:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick #joystick-knob{position:absolute!important;left:40px!important;top:40px!important;right:auto!important;bottom:auto!important;width:46px!important;height:46px!important;transform:none!important}
body:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick>.steer-left,body:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick>.steer-right{display:block!important}
body:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick #joystick-back{display:grid!important;position:absolute!important;left:50%!important;top:auto!important;bottom:4px!important;transform:translateX(-50%)!important}
body:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick #action-bar.action-bar{position:absolute!important;left:50%!important;right:auto!important;top:4px!important;bottom:auto!important;width:34px!important;height:28px!important;transform:translateX(-50%)!important;padding:0!important;background:transparent!important;border:0!important}
body:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick #action-bar #sprint{width:34px!important;height:28px!important;min-height:0!important;padding:0!important;background:transparent!important;border:0!important}
body.playing-portrait:has(#joystick:not([hidden])) #events.events{left:12px;right:auto;top:auto;bottom:calc(154px + env(safe-area-inset-bottom))}

body.walking-mode:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick #joystick-knob,body.walking-mode:is(.playing-portrait,.playing-landscape):has(#joystick:not([hidden])) #joystick.joystick #action-bar.action-bar{display:none!important}

#joystick #sprint,#joystick #joystick-back,#joystick #joystick-knob{touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Compact, operable item inventory on the right edge. */
body .inventory-hud{pointer-events:auto;right:10px;left:auto;top:40%;bottom:auto;flex-direction:column;align-items:stretch;gap:6px;max-height:42vh;overflow:auto}
.inventory-hud>span,.inventory-hud>button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:58px;min-height:40px;padding:7px 9px;border:1px solid #b7d6d155;border-radius:12px;background:#173a3cd9;color:#f7fff9;cursor:pointer;box-shadow:0 2px 9px #102b2522}
.inventory-hud>[hidden]{display:none!important}
.inventory-hud>button:disabled{opacity:.75;cursor:default}
.inventory-hud #inventory-mirror svg{color:#9bd9ff}
body.playing-portrait .rear-view{top:100px;width:calc((100vw - 36px)/2);max-width:180px}
body .rear-view[hidden]{display:none!important}

.inventory-hud #inventory-fireWheel svg{color:#ffab55}

.inventory-hud #inventory-timeStop svg{color:#e8c66d}
body .time-stop-dialog[open]{position:fixed;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;box-sizing:border-box;width:min(420px,calc(var(--game-width,100vw) - 24px));max-height:calc(var(--game-height,100dvh) - 24px);overflow:auto;padding:25px 18px 16px;border:1px solid #e5b955;border-radius:22px;background:radial-gradient(ellipse at top,#244459,#0b1528 80%);color:#f3e4ba;text-align:center;box-shadow:0 0 50px #41cbdf35}
.time-stop-dialog::backdrop{background:#050c1899}
.time-stop-dialog h2{font-size:23px;margin:14px 0}
.time-stop-dialog p{line-height:1.6;font-size:14px}
.time-stop-dialog small{color:#72d8e4;font-size:11px;letter-spacing:1px}
.time-stop-dialog .time-stop-close{position:absolute;right:8px;top:6px;padding:4px 10px;background:transparent;color:#dfcd9b;border:0;font-size:24px}
.time-stop-lamps{display:flex;justify-content:center;gap:12px;margin:20px}
.time-stop-lamps span{width:40px;height:8px;border:1px solid #796d4c;border-radius:6px;background:#101c2a}
.time-stop-lamps .won{background:#63e2ee;box-shadow:0 0 15px #63e2ee}
.time-stop-hands{display:flex;gap:10px;justify-content:center}
.time-stop-hands button{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-height:90px;min-width:0;padding:12px 4px;font-size:28px;background:#20364e;color:#fff0bd;border:1px solid #bd9b51;border-radius:14px}
.time-stop-hands button b{font-size:14px}
.time-stop-hands button:disabled{opacity:.45;cursor:default}
.time-stop-dialog .time-stop-rule{color:#abb6c5;font-size:12px}

/* Center transient feedback consistently across viewport sizes. */
.toast{top:50%;left:50%;bottom:auto;transform:translate(-50%,-50%);z-index:100;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}

#opening-escape{position:fixed;z-index:8;top:98px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 16px;background:#203e33ed;color:#f6f7e7;border:1px solid #aebc82;border-radius:12px;max-width:calc(var(--game-width,100vw) - 24px);pointer-events:none;box-shadow:0 4px 20px #102c3320}
#opening-escape>span{font-size:12px;white-space:nowrap}#opening-escape strong{font:700 22px Consolas,monospace;color:#e6efac;white-space:nowrap}#opening-escape small{font-size:11px;color:#c9d7bf;line-height:1.5}
body.touch-directional #opening-escape{top:132px;width:max-content}body.touch-directional #opening-escape small{max-width:148px}
@media(max-width:360px){#opening-escape{gap:7px;padding:8px 10px}#opening-escape strong{font-size:19px}#opening-escape small{font-size:10px;max-width:120px}}

/* Opening countdown: allow the complete sentence to wrap on narrow screens. */
#opening-escape{justify-content:center;flex-wrap:wrap;gap:4px 6px;box-sizing:border-box;text-align:center;width:max-content}
#opening-escape>span,#opening-escape small{font-size:13px;line-height:1.5;color:#f6f7e7;max-width:none}
#opening-escape strong{font-size:20px}
body.touch-directional #opening-escape small{max-width:none}
@media(max-width:360px){#opening-escape{gap:3px 5px}#opening-escape>span,#opening-escape small{font-size:12px}#opening-escape strong{font-size:18px}}

/* Keep live events below the opening countdown, including when mission HUD is hidden. */
body:has(#opening-escape#opening-escape:not([hidden])) #events.events{top:calc(var(--opening-banner-bottom,180px) + 8px)!important;bottom:auto!important;left:12px;right:auto;width:max-content;max-width:calc(var(--game-width,100vw) - 24px);max-height:72px;overflow:hidden}