.urine-mage-battle{position:fixed;inset:0;z-index:40;width:100%;height:100dvh;overflow:hidden;background:#100d09;color:#fff6dc;font-family:system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;isolation:isolate}
.urine-mage-battle[hidden],.urine-mage-battle [hidden]{display:none!important}
.urine-mage-battle *{box-sizing:border-box}
.mage-battle-field{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:crosshair}
.mage-battle-world{position:absolute;inset:0;overflow:visible;will-change:transform;pointer-events:none}
.mage-battle-background{position:absolute;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.mage-battle-reticle-patch{position:absolute;background-image:url('./assets/urine-mage/battle/battle-background.png');background-repeat:no-repeat;pointer-events:none;mask-image:radial-gradient(ellipse,#000 75%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse,#000 75%,transparent 100%)}
.mage-battle-enemies{position:absolute;inset:0;pointer-events:none}
.mage-battle-enemy{position:absolute;width:0;height:0;pointer-events:none}
.mage-battle-enemy-sprite{position:absolute;left:0;top:0;transform:translate(-50%,-100%);transform-origin:50% 100%;pointer-events:none}
.mage-battle-enemy img{position:relative;left:auto;top:auto;display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:auto}
.mage-battle-explosion-image{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.urine-mage-enemy-hp{position:absolute;left:0;transform:translateX(-50%);height:7px;min-width:36px;overflow:hidden;border:1px solid #fff9;border-radius:4px;background:#341318;box-shadow:0 1px 3px #000c;pointer-events:none}
.urine-mage-enemy-hp-fill{width:100%;height:100%;background:linear-gradient(90deg,#ce3b28,#ffa656);transform-origin:left center}
.mage-battle-beam{position:absolute;z-index:700;transform-origin:50% 100%;pointer-events:none;overflow:visible;border-radius:50%;mix-blend-mode:screen;background:linear-gradient(90deg,transparent 0%,#ffd84a22 18%,#ffe36188 36%,#fff9ceee 47%,#fffef1 50%,#fff9ceee 53%,#ffe36188 64%,#ffd84a22 82%,transparent 100%);filter:drop-shadow(0 0 4px #ffd34c99)}
.mage-battle-beam::before{content:'';position:absolute;inset:0 35%;border-radius:50%;background:linear-gradient(0deg,#ffde7680,#fff7c7ee 80%,#fffef4);pointer-events:none}
.mage-battle-beam::after{content:'';position:absolute;left:50%;top:0;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fffce4b3 0%,#ffe17d66 25%,#ffdb4233 45%,transparent 72%);pointer-events:none}
.mage-battle-crosshair{position:absolute;z-index:710;width:32px;height:32px;border:2px solid #fff7d9;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0009,0 1px 5px #000}
.mage-battle-crosshair::before,.mage-battle-crosshair::after{content:'';position:absolute;background:#fff7d9;box-shadow:0 0 2px #000}
.mage-battle-crosshair::before{height:2px;width:42px;left:-7px;top:13px}
.mage-battle-crosshair::after{width:2px;height:42px;left:13px;top:-7px}
.mage-battle-crosshair i{position:absolute;inset:9px;border-radius:50%;background:#ffe394;box-shadow:0 0 0 3px #352719}
.mage-battle-crosshair.is-firing{border-color:#ffd244;box-shadow:0 0 12px #ffce5270}
/* The supplied illustration has painted HUD panels. Opaque outer panels cover
   those static numbers; all displayed battle values below are live DOM. */
.mage-battle-hud{position:absolute;z-index:800;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:18px;min-height:max(100px,17dvh);padding:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-right,0px) + 20px) 24px calc(env(safe-area-inset-left,0px) + 20px);background:linear-gradient(90deg,#15130ffc 0%,#15130ffc 30%,#15130fbb 38%,#15130f99 68%,#15130ffc 73%,#15130ffc 100%);pointer-events:none}
.mage-battle-player{display:flex;align-items:center;gap:12px;min-width:0;font-size:clamp(12px,1.7vw,18px);text-shadow:0 2px 3px #000}
.mage-battle-player>div{min-width:90px;width:min(190px,19vw)}
.mage-battle-portrait{display:block;flex:0 0 auto;width:clamp(44px,7vw,70px);aspect-ratio:1;border:2px solid #d3b276;border-radius:50%;background-image:url('./assets/urine-mage/battle/battle-background.png');background-size:1230% auto;background-position:1.55% 2.5%;box-shadow:0 2px 8px #0009}
.mage-battle-bladder{display:block;appearance:none;-webkit-appearance:none;width:100%;height:10px;margin-top:8px;border:1px solid #c59b5e;border-radius:6px;overflow:hidden;background:#3b3020}
.mage-battle-bladder::-webkit-progress-bar{background:#3b3020}.mage-battle-bladder::-webkit-progress-value{background:linear-gradient(90deg,#d89026,#ffd76b)}.mage-battle-bladder::-moz-progress-bar{background:#ffd76b}
.mage-battle-wave{padding:10px 18px;border:1px solid #c2a66866;border-radius:6px;background:#1c1813;font-size:clamp(16px,2.4vw,26px);letter-spacing:.1em;white-space:nowrap}
.mage-battle-kills{justify-self:end;min-width:80px;padding:8px 16px;border:1px solid #c2a66866;border-radius:6px;background:#1c1813;font-size:clamp(20px,2.8vw,32px);white-space:nowrap}
.mage-battle-footer{position:absolute;z-index:800;inset:auto 0 0;display:flex;align-items:end;justify-content:space-between;min-height:22dvh;padding:16px calc(env(safe-area-inset-right,0px) + 22px) calc(env(safe-area-inset-bottom,0px) + 14px) calc(env(safe-area-inset-left,0px) + 22px);background:linear-gradient(90deg,#15130ffc 0%,#15130ffc 24%,transparent 34%,transparent 79%,#15130ffc 83%,#15130ffc 100%);pointer-events:none}
.mage-battle-help{font-size:clamp(12px,1.5vw,16px);line-height:1.6;color:#dccba7;text-shadow:0 1px 3px #000;max-width:24%}
.urine-mage-battle button{min-height:44px;padding:10px 18px;border:1px solid #d4b472;border-radius:7px;background:#292116;color:#fff1cd;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;pointer-events:auto}
.urine-mage-battle button:focus-visible{outline:2px solid #fff0b6;outline-offset:4px}
.urine-mage-battle button:active{background:#554024}
.urine-mage-battle button:disabled{opacity:.5;cursor:wait}
.mage-battle-overlay{position:absolute;inset:0;z-index:900;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:#070706df;text-align:center;touch-action:manipulation}
.mage-battle-overlay>div{max-width:560px;max-height:100%;overflow:auto;padding:26px;border:1px solid #b28b4c99;border-radius:14px;background:#1b1813;box-shadow:0 16px 70px #0008}
.mage-battle-overlay strong,.mage-battle-overlay h1{display:block;margin:0 0 16px;font-size:clamp(22px,4vw,36px);color:#fff0c9}
.mage-battle-overlay p{margin:12px 0 22px;color:#c8bda8}
.mage-battle-overlay button+button{margin-left:12px}
.mage-battle-retry{background:#d9b558!important;color:#201a10!important}
body[data-app-screen="URINE_MAGE_BATTLE"] #crosshair{display:none!important}
@media(max-height:450px) and (orientation:landscape){.mage-battle-hud{gap:10px;min-height:80px;padding-top:calc(env(safe-area-inset-top,0px) + 7px);padding-bottom:10px}.mage-battle-wave,.mage-battle-kills{padding:6px 12px}.mage-battle-footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 7px)}.mage-battle-overlay>div{padding:18px}}

.mage-battle-actions{display:flex;align-items:center;gap:8px;pointer-events:none}.mage-battle-actions button{pointer-events:auto}
@media(max-width:480px){.mage-battle-actions{flex-direction:column;align-items:flex-end}.mage-battle-actions button{padding:8px 12px;font-size:13px}}