/* Shared HUD components. Only presentation geometry changes between profiles. */
#sharedHUD{--hud-cyan:#6de2ff;--hud-edge:#69d7ff99;--hud-ink:#051018e6;position:absolute;inset:0;z-index:3;pointer-events:none;color:#effbff;font-size:14px}
#sharedHUD [hidden]{display:none!important}
#legacyHUD{display:none}
#game[data-debug-ui="true"] #legacyHUD{display:contents}
#game:not([data-debug-ui="true"]) #electricWireDebug{display:none!important}
#sharedHUD .hud-panel{border:1px solid var(--hud-edge,#69d7ff99);background:linear-gradient(125deg,#102733e8,#030b11e0 65%);box-shadow:inset 0 0 16px #22c8ff0c,0 0 12px #22c8ff19;position:relative;border-radius:2px}
#sharedHUD .hud-panel::before,#sharedHUD .hud-panel::after{content:"";position:absolute;width:15px;height:15px;pointer-events:none;border-color:#9bebff;border-style:solid}
#sharedHUD .hud-panel::before{left:-2px;top:-2px;border-width:2px 0 0 2px}
#sharedHUD .hud-panel::after{right:-2px;bottom:-2px;border-width:0 2px 2px 0}
#sharedHUD h2,#sharedHUD h3,#sharedHUD p{margin:0}
#sharedHUD .hud-heading{font-size:16px;font-weight:500;letter-spacing:1px}
#sharedHUD h2.hud-heading{padding-bottom:10px;border-bottom:1px solid #66dfff30;margin-bottom:12px}
#sharedHUD h2.hud-heading::before{content:"";display:inline-block;width:4px;height:14px;margin-right:10px;background:#81e9ff;box-shadow:0 0 8px #52d9ff80;vertical-align:-1px}
#sharedHUD button{pointer-events:auto;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#sharedHUD button:focus-visible,#pee:focus-visible{outline:2px solid #fff3a0;outline-offset:4px}
#sharedHUD .pee-expression-hud{position:absolute;top:var(--hud-top);left:var(--hud-left);width:clamp(76px,5.4vw,98px);padding:clamp(3px,.35vw,5px)}
.portrait-frame{aspect-ratio:1;overflow:hidden;border:1px solid #67deff66;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.portrait-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 25%;opacity:1;transition:opacity 50ms linear}
.portrait-frame img.is-changing{opacity:0}
@media(prefers-reduced-motion:reduce){.portrait-frame img{transition:none}}
#sharedHUD .bladder-hud{position:absolute;left:calc(env(safe-area-inset-left,0px) + clamp(8px,1.2vw,18px));bottom:calc(env(safe-area-inset-bottom,0px) + clamp(44px,5vh,58px));width:clamp(252px,20vw,310px);display:flex;align-items:center;gap:clamp(8px,.7vw,11px);padding:clamp(8px,.65vw,11px) clamp(10px,.8vw,13px)}
.bladder-icon{width:clamp(46px,3.5vw,58px);height:clamp(52px,4vw,66px);object-fit:contain;flex:none}.bladder-info{flex:1;min-width:0}.bladder-info>.hud-heading{font-size:clamp(12px,.75vw,14px)}.bladder-readout{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:1px 0 6px;white-space:nowrap}.bladder-readout>b{font-size:clamp(13px,.8vw,15px);font-weight:500}.bladder-readout>span{font-size:clamp(13px,.85vw,16px);font-variant-numeric:tabular-nums}.bladder-readout strong{font:500 clamp(22px,1.7vw,28px)/1.2 system-ui,sans-serif}.bladder-readout small{font-size:12px;color:#b7d3df}.bladder-progress{height:clamp(6px,.55vw,8px);border:1px solid #39caffaa;border-radius:8px;background:#000b;overflow:hidden}.bladder-progress i{display:block;width:var(--fill,0%);height:100%;background:linear-gradient(90deg,#00a5db,#2bdfff);box-shadow:0 0 12px #00caff;transition:width .1s linear}.bladder-hud[data-low="true"] .bladder-progress i{background:#ffe184}
#sharedHUD .function-hud{position:absolute;right:var(--hud-right);top:var(--hud-top);display:flex;gap:12px;padding:10px}
.function-hud button{width:68px;min-height:63px;display:grid;justify-items:center;align-content:center;gap:5px;background:#09202c80;border:1px solid #63ceff80;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.function-hud button[data-action="lobby"]{width:132px;grid-template-columns:auto auto;gap:9px}
.function-hud button:hover{background:#154255}.function-hud button:disabled{opacity:.4;cursor:default}.function-hud svg{width:26px;height:26px}.function-hud span{font-size:14px;white-space:nowrap}
.hud-side{position:absolute;right:var(--hud-right);top:calc(var(--hud-top) + 112px);width:280px;display:grid;gap:18px}
.dirt-map-hud,.mission-hud{padding:16px}.dirt-map-grid{height:130px;width:168px;margin:auto;border:1px solid #6addff8c;border-radius:9px 9px 40px 40px;background:linear-gradient(#70dfff13 1px,transparent 1px),linear-gradient(90deg,#70dfff13 1px,transparent 1px),radial-gradient(ellipse at center,#1043666b,transparent);background-size:17px 17px,17px 17px,100% 100%}
#sharedHUD .dirt-map-hud p{color:#92b5c5;font-size:12px;text-align:center;margin-top:10px}
#sharedHUD .mission-hud h2{color:#ffea96}#sharedHUD .mission-hud h2::before{background:#ffeb9c;box-shadow:0 0 8px #ffdd6b66}.mission-hud h3{font-size:16px;font-weight:500}.mission-hud ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}.mission-hud li{display:flex;align-items:center;gap:9px;line-height:1.5}.mission-hud li>b{margin-left:auto;color:#ffe78d;white-space:nowrap}.mission-check{color:#ffe78d;font-size:21px;line-height:1}
#sharedHUD .item-bar-hud{position:absolute;right:var(--hud-right);bottom:var(--hud-bottom);width:356px;padding:12px 14px}.item-bar-hud h2{display:flex;align-items:center}.item-bar-hud h2 small{font-size:12px;letter-spacing:0;margin-left:auto;color:#8eacb9}.item-bar-hud [data-item-slots]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.item-slot{position:relative;min-width:0;background:#071a25;border:1px solid #64cfff88;padding:6px 3px;display:grid;gap:4px;justify-items:center;border-radius:2px}.item-slot img{width:58px;height:60px;object-fit:contain;max-width:100%;opacity:1}.item-slot span{font-size:12px;white-space:nowrap}.item-slot b{position:absolute;top:2px;right:4px;font:12px system-ui;color:#b2d9e5}.item-slot[data-state="disabled"]{cursor:default;border-color:#53849866;color:#9eb9c5}.item-slot[data-state="disabled"] img{opacity:.66}.item-slot[data-state="selected"]{border-color:#ffea96;background:#184350;box-shadow:0 0 8px #74e4ff55}
#game{--hud-top:calc(env(safe-area-inset-top,0px) + 28px);--hud-left:calc(env(safe-area-inset-left,0px) + 28px);--hud-right:calc(env(safe-area-inset-right,0px) + 28px);--hud-bottom:calc(env(safe-area-inset-bottom,0px) + 62px)}
#game[data-presentation="desktop"] #pee{display:none}
#game .help{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);width:auto;font-size:12px;color:#d7edf6}
#game .level-selector{left:var(--hud-left);right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);top:auto;flex-direction:row;z-index:4}
#game .level-selector button{font-size:12px;padding:8px 10px}
#game #toast{z-index:4;pointer-events:none}
#game[data-presentation="mobilePortrait"]{--hud-top:calc(env(safe-area-inset-top,0px) + 12px);--hud-left:calc(env(safe-area-inset-left,0px) + 12px);--hud-right:calc(env(safe-area-inset-right,0px) + 12px);--hud-bottom:calc(env(safe-area-inset-bottom,0px) + 62px)}
[data-presentation="mobilePortrait"] #sharedHUD .pee-expression-hud{width:clamp(58px,17vw,68px);padding:3px}
[data-presentation="mobilePortrait"] .portrait-frame img{object-position:center 25%}
[data-presentation="mobilePortrait"] #sharedHUD .function-hud{padding:5px;height:66px}[data-presentation="mobilePortrait"] .function-hud button[data-action="lobby"]{width:96px;min-height:54px;grid-template-columns:auto auto;gap:6px;border-color:transparent;clip-path:none;background:transparent}[data-presentation="mobilePortrait"] .function-hud svg{width:21px;height:21px}[data-presentation="mobilePortrait"] .function-hud span{font-size:12px}
[data-presentation="mobilePortrait"] .hud-side{top:calc(var(--hud-top) + 80px);width:154px;gap:9px}[data-presentation="mobilePortrait"] .dirt-map-hud,[data-presentation="mobilePortrait"] .mission-hud{padding:9px 10px}[data-presentation="mobilePortrait"] #sharedHUD h2.hud-heading{font-size:14px;letter-spacing:0;padding-bottom:6px;margin-bottom:6px}[data-presentation="mobilePortrait"] #sharedHUD h2.hud-heading::before{width:3px;height:12px;margin-right:6px}[data-presentation="mobilePortrait"] .dirt-map-grid{display:none}[data-presentation="mobilePortrait"] #sharedHUD .dirt-map-hud p{font-size:12px;margin:0;text-align:left}[data-presentation="mobilePortrait"] .mission-hud h3{font-size:14px}[data-presentation="mobilePortrait"] .mission-hud ul{display:none}
[data-presentation="mobilePortrait"] #sharedHUD .bladder-hud{left:calc(env(safe-area-inset-left,0px) + clamp(8px,2.5vw,12px));right:auto;bottom:var(--hud-bottom);width:clamp(98px,31vw,122px);height:auto;display:block;padding:clamp(5px,1.5vw,7px)}
[data-presentation="mobilePortrait"] .bladder-icon{position:absolute;top:clamp(5px,1.5vw,7px);left:clamp(5px,1.5vw,7px);width:clamp(26px,8vw,31px);height:clamp(29px,9vw,35px)}[data-presentation="mobilePortrait"] .bladder-info>.hud-heading{display:block;min-height:clamp(29px,9vw,35px);padding-left:clamp(31px,9.5vw,38px);font-size:clamp(10px,2.8vw,11px);line-height:clamp(29px,9vw,35px);letter-spacing:0;white-space:nowrap}[data-presentation="mobilePortrait"] .bladder-readout{display:grid;grid-template-columns:auto 1fr;gap:2px;margin:1px 0 4px}[data-presentation="mobilePortrait"] .bladder-readout>b{font-size:clamp(10px,3vw,12px)}[data-presentation="mobilePortrait"] .bladder-readout>span{font-size:clamp(9px,2.7vw,11px);text-align:right}[data-presentation="mobilePortrait"] .bladder-readout strong{font-size:clamp(15px,4.4vw,17px)}[data-presentation="mobilePortrait"] .bladder-readout small{font-size:9px}[data-presentation="mobilePortrait"] .bladder-progress{height:6px}
[data-presentation="mobilePortrait"] #sharedHUD .item-bar-hud{width:112px;padding:7px;bottom:var(--hud-bottom)}[data-presentation="mobilePortrait"] .item-bar-hud h2 small{display:none}[data-presentation="mobilePortrait"] .item-bar-hud [data-item-slots]{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}[data-presentation="mobilePortrait"] .item-slot{padding:2px;min-height:38px}[data-presentation="mobilePortrait"] .item-slot img{width:33px;height:33px}[data-presentation="mobilePortrait"] .item-slot span{display:none}[data-presentation="mobilePortrait"] .item-slot b{right:2px;font-size:12px}
#game[data-presentation="mobilePortrait"] #pee{display:block;left:50%;right:auto;bottom:var(--hud-bottom);width:112px;height:112px;transform:translateX(-50%);padding:0;border:2px solid #6be2ff;border-radius:50%;background:radial-gradient(circle at 50% 38%,#164d79,#061c37 68%);color:#f6fdff;z-index:4;box-shadow:inset 0 0 0 7px #081c33,inset 0 0 0 10px #4edbff,0 0 18px #0dcaff4d;touch-action:none}
#game[data-presentation="mobilePortrait"] #pee::before{display:none}#game[data-presentation="mobilePortrait"] #pee:active{transform:translateX(-50%) scale(.96)}#game[data-presentation="mobilePortrait"] #pee.flowing{background:#14557a;box-shadow:inset 0 0 0 7px #081c33,inset 0 0 0 10px #a2efff,0 0 24px #0dcaff99}.pee-label{display:grid;gap:2px;font-size:25px;line-height:1.3;pointer-events:none}.pee-label small{font-size:14px;font-weight:400}
#game[data-presentation="mobilePortrait"] .help{display:none}
#game[data-presentation="mobilePortrait"] .level-selector{left:var(--hud-left);right:var(--hud-right);justify-content:center;bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
@media(min-width:1600px){[data-presentation="desktop"] .hud-side{width:316px;top:calc(var(--hud-top) + 128px);gap:22px}[data-presentation="desktop"] .dirt-map-grid{height:166px;width:190px}[data-presentation="desktop"] .function-hud button{width:78px;min-height:73px}[data-presentation="desktop"] #sharedHUD .item-bar-hud{width:414px}[data-presentation="desktop"] .item-slot img{height:74px;width:68px}}
@media(max-width:370px){[data-presentation="mobilePortrait"] #sharedHUD .item-bar-hud{width:91px}#game[data-presentation="mobilePortrait"] #pee{width:100px;height:100px}}
@media(max-height:740px) and (orientation:landscape){[data-presentation="desktop"] .hud-side{width:230px;gap:12px}[data-presentation="desktop"] .dirt-map-grid{height:70px;width:120px}[data-presentation="desktop"] #sharedHUD .item-bar-hud{width:310px}}
/* Keep prototype entry points available on the start screen as before. */
#game .level-selector{z-index:7}
#game #toast,#game #toast.compact{top:var(--hud-top);left:50%;width:max-content;max-width:440px;transform:translateX(-50%);font-size:14px;font-weight:500;letter-spacing:.5px;line-height:1.6;white-space:normal;padding:8px 12px;border:1px solid #6adeff55;border-radius:3px;background:#071925d9;color:#e4f8ff;text-shadow:none}
#game #toast:empty{display:none}
#game[data-presentation="mobilePortrait"] #toast,#game[data-presentation="mobilePortrait"] #toast.compact{top:calc(var(--hud-top) + 82px);left:var(--hud-left);max-width:calc(100% - var(--hud-left) - var(--hud-right) - 170px);width:auto;transform:none;padding:8px;font-size:12px}
@media(max-height:740px) and (orientation:portrait){
 #game[data-presentation="mobilePortrait"]{--hud-bottom:calc(env(safe-area-inset-bottom,0px) + 52px)}
 [data-presentation="mobilePortrait"] #sharedHUD .item-bar-hud{padding:6px}
 [data-presentation="mobilePortrait"] .item-slot{min-height:28px}
 [data-presentation="mobilePortrait"] .item-slot img{width:26px;height:26px}
 #game[data-presentation="mobilePortrait"] #pee{width:100px;height:100px}
}
@media(max-height:600px) and (orientation:portrait){
 #game[data-presentation="mobilePortrait"]{--hud-bottom:calc(env(safe-area-inset-bottom,0px) + 48px)}
 [data-presentation="mobilePortrait"] #sharedHUD .item-bar-hud{padding:4px}
 [data-presentation="mobilePortrait"] #sharedHUD .item-bar-hud h2{padding:0;margin-bottom:3px}
 [data-presentation="mobilePortrait"] .item-slot img{width:24px;height:24px}
 [data-presentation="mobilePortrait"] .item-slot{min-height:26px}
 #game[data-presentation="mobilePortrait"] #pee{width:90px;height:90px}
 [data-presentation="mobilePortrait"] .hud-side{gap:6px}
 [data-presentation="mobilePortrait"] #sharedHUD .dirt-map-hud,[data-presentation="mobilePortrait"] #sharedHUD .mission-hud{padding:6px 8px}
 #game[data-presentation="mobilePortrait"] .help{font-size:12px;line-height:1.5;bottom:calc(var(--hud-bottom) + 4px)}
}
@media(max-height:600px) and (orientation:portrait){
 [data-presentation="mobilePortrait"] .hud-side{top:calc(var(--hud-top) + 100px);left:var(--hud-left);right:var(--hud-right);width:auto;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
 #game[data-presentation="mobilePortrait"] #toast,#game[data-presentation="mobilePortrait"] #toast.compact{top:calc(var(--hud-top) + 68px);left:var(--hud-left);right:var(--hud-right);max-width:none;font-size:12px;padding:3px 5px}
}