body[data-scene=run] header,body[data-scene=run] footer,.game-top,.game-bottom,#terrainStatus,#run>.hero{display:none!important}
#referenceUI{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;pointer-events:none;z-index:4}
#referenceUI button{pointer-events:auto}
.reference-clock{position:absolute;left:22px;top:22px;height:47px;width:335px;background:#07181be8;border:2px solid #aaa681;box-shadow:inset 0 0 0 3px #1d3331,0 3px 6px #0007;clip-path:polygon(4% 0,96% 0,100% 24%,100% 80%,97% 100%,4% 100%,0 76%,0 24%);display:flex;align-items:center;padding:0 12px;gap:17px;color:#eddbb0}
.clock-face{font-size:35px;line-height:1}.reference-clock strong{font-size:28px;letter-spacing:1px;min-width:91px;border-right:2px solid #738b7777;padding-right:17px}
.reference-clock{pointer-events:auto;cursor:pointer}.reference-clock:focus-visible{outline:3px solid #fff0bc}
#referenceBalls{display:flex;gap:15px;align-items:center}
.ref-ball{display:block;position:relative;width:29px;height:29px;border:3px solid #040e12;border-radius:50%;background:linear-gradient(#ed5552 0 44%,#0a1619 44% 57%,#f8f8e7 57%);box-shadow:0 1px 0 1px #98a693}
.ref-ball:after{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;background:#f6f5dc;border:2px solid #071213;border-radius:50%}
.ref-ball.empty{filter:grayscale(1);opacity:.45}
#referenceUI .hud-party{position:absolute;left:22px;top:712px;display:flex;flex-direction:column;width:296px;gap:18px}
#referenceUI .hud-mon{position:relative;display:flex;align-items:center;width:296px;min-height:84px;height:84px;flex:none;padding:6px;background:linear-gradient(110deg,#061719ed,#102727ed);border:2px solid #aba984;border-radius:4px;box-shadow:inset 0 0 0 3px #30403b,0 4px 8px #0009;clip-path:polygon(5% 0,95% 0,100% 18%,100% 83%,95% 100%,5% 100%,0 83%,0 18%)}
#referenceUI .hud-mon.active{border-color:#d6c89b}
.portrait-box{width:78px;height:72px;flex-shrink:0;overflow:hidden;border-right:2px solid #d2bd7e;display:block;background:#0b201e}
#referenceUI .portrait-box img{width:108px;height:108px;max-width:none;object-fit:contain;image-rendering:pixelated;float:none;transform:translate(-17px,-8px) scale(1.2)}
.ref-stats{padding-left:12px;flex:1;min-width:0;text-align:left;color:#f8efc9}
#referenceUI .hud-mon b{font-size:18px;line-height:24px}
.ref-health{display:flex;align-items:center;gap:5px}
.ref-health span{font-size:16px;font-weight:700;white-space:nowrap}
#referenceUI .hp{margin:0;flex:1;height:13px;border:1px solid #111e1c;border-radius:3px;box-shadow:0 0 0 1px #506059;background:#040e11}
#referenceUI .hp i{background:linear-gradient(#6bfa79,#24d843)}
.ref-xp{display:flex;align-items:center;gap:9px}
.ref-xp label{font-size:16px;font-weight:bold;color:#7ad9ff}
#referenceUI .xp{margin:5px 0;flex:1;height:11px;border:1px solid #071519;border-radius:2px;background:#26383e}
#referenceUI .xp i{background:linear-gradient(#6cbbff,#3b8feb)}
#referenceUI .controls{position:absolute;left:652px;top:823px;display:flex;flex-wrap:nowrap;gap:19px;width:auto}
#referenceUI .controls button{position:relative;width:74px;height:72px;padding:0;margin:0;overflow:visible;border:0;border-radius:0;font-size:0;background-color:transparent;background-image:url('assets/reference-actions.png');background-repeat:no-repeat;background-size:382px 127px;box-shadow:0 4px 9px #0006;filter:drop-shadow(0 0 1px #a58e58);transition:filter .12s}
#referenceUI .controls button:hover{filter:brightness(1.25);transform:none}
#referenceUI #skillBtn{background-position:-16px -22px}
#referenceUI #catchBtn{background-position:-107px -22px}
#referenceUI #healBtn{background-position:-196px -22px}
#referenceUI #extractBtn{background-position:-288px -22px}
#referenceUI .controls button:after{content:attr(data-key);position:absolute;left:24px;bottom:-22px;font:21px Georgia,serif;color:#e8e4ce;background:#102022;border:2px solid #a7a88b;border-radius:4px;width:25px;height:27px;line-height:24px;text-align:center;box-shadow:0 2px #091411}
#referenceUI #skillBtn:before{content:attr(data-cooldown);position:absolute;inset:0;display:grid;place-items:center;font:bold 26px sans-serif;color:#fff;text-shadow:0 2px 4px #000}
#referenceUI .lesson-action{outline:2px solid #fff1b5;outline-offset:3px}
#tutorialCard{top:90px;left:22px;max-width:365px;background:#092122e6;border-color:#b5ba92;padding:10px 13px}
#tutorialCard b{font-size:15px}#tutorialCard p{font-size:12px}
.overlay{background:#06151666}
.camp-backdrop:after{background:radial-gradient(ellipse at 40% 40%,#061e1922,#041414aa)}
/* A portrait viewport follows the player while retaining readable touch controls. */
#referenceUI.portrait{width:680px;height:var(--portrait-h)}
#referenceUI.portrait .reference-clock{left:18px;top:20px}
#referenceUI.portrait .hud-party{left:18px;top:auto;bottom:155px;width:296px;gap:8px}
#referenceUI.portrait .controls{left:150px;top:auto;bottom:45px}
@media(max-width:740px){#tutorialCard{left:12px;right:12px;top:68px;max-width:none}#mobile{bottom:260px!important;z-index:5}.dialog .row{flex-wrap:wrap}}