/* Movable fantasy HUD. The world remains the focus between the edge widgets. */
:root{--hud-gold:#d9bf88;--hud-shadow:0 12px 32px #030b0b55,inset 0 1px #fff1}
.panel,.actionbar,#game .chat-panel{background:linear-gradient(135deg,#20332bf5,#101e1cf2);border:1px solid #c8ae725c;border-radius:12px;box-shadow:var(--hud-shadow);backdrop-filter:blur(14px)}
.panel::before,.actionbar::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,#e8cb8a99,transparent);pointer-events:none}
.hud-widget{transition:opacity .16s,box-shadow .16s;max-width:calc(100% - 16px)}


.hud-widget.widget-dragging{opacity:.45;z-index:var(--z-drag)!important;box-shadow:0 18px 48px #0008;user-select:none;transition:none}

.top-actions #catalog-btn{width:auto;padding:0 12px;font:12px "Noto Sans Thai",Tahoma,system-ui;height:34px;white-space:nowrap}
.top-actions #reset-hud,.top-actions #help-btn{height:34px;width:34px;border-radius:8px}
.topbar h1{font-size:20px}.topbar .eyebrow{letter-spacing:3px;font-size:8px}.session-tag{border-radius:6px}
.player-card{width:230px;top:90px;left:22px;padding:14px;align-items:center;gap:11px}.player-card .portrait{width:42px;height:42px;border-radius:50%;font-size:25px;background:radial-gradient(#69826b66,#16261e);box-shadow:inset 0 0 0 3px #172820}
.player-card .card-heading{padding-right:17px;margin:0 0 7px}.player-subtitle{font-size:8px;letter-spacing:1px;color:#9fae9f}
.resource-card{bottom:37px;width:270px;padding:15px 35px 15px 14px;display:flex;align-items:center;gap:12px}.health-card{left:22px}.mana-card{right:22px}
.resource-orb{flex:0 0 46px;height:46px;display:grid;place-items:center;font:24px Georgia;border-radius:50%;border:2px solid #d2b583;box-shadow:0 0 0 4px #081515,inset 0 2px 12px #ffddd433,0 0 20px #de565d22;background:radial-gradient(circle at 35% 28%,#ee8d82,#a73548 52%,#471c2a);color:#ffe1cc}
.mana-card .resource-orb{background:radial-gradient(circle at 35% 28%,#93e4f3,#347aaf 52%,#142c62);box-shadow:0 0 0 4px #081515,inset 0 2px 12px #b6eaff66,0 0 20px #549ddd22;color:#d5f6ff}
.resource-detail{flex:1;min-width:0}.resource-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;gap:6px}.resource-heading strong{font-size:11px;font-weight:500}.resource-heading>span{font-size:8px;letter-spacing:1.5px;color:#b9958f}.mana-card .resource-heading>span{color:#83b5cf}
.resource-card .meter{height:18px;border-radius:4px;border:1px solid #ffffff15;background:#070f13;margin:0}.resource-card .meter span{line-height:16px;font-size:10px;font-variant-numeric:tabular-nums}.resource-card .hp i{background:linear-gradient(90deg,#8c3347,#dc766f);box-shadow:inset 0 2px #ffc5ad33}.resource-card .mp i{background:linear-gradient(90deg,#275c95,#6bc8e2);box-shadow:inset 0 2px #c6f4ff44}
.experience-card{position:absolute;bottom:0;left:0;width:100%;height:24px;max-width:100%;background:#091316ef;border-top:1px solid #d7b98077;z-index:var(--z-status)}.experience-card .xp{position:absolute;inset:0;height:100%;margin:0;background:transparent}.experience-card .xp i{background:linear-gradient(90deg,#726138,#baa367,#edd29a);box-shadow:0 0 12px #d2b77d55;transition:width .2s}.experience-card #xp-text{position:absolute;inset:0;text-align:center;line-height:23px;font-size:9px;letter-spacing:1px;color:#fff0d3;text-shadow:0 1px 4px #000,0 1px 2px #000;font-variant-numeric:tabular-nums}
.actionbar{bottom:37px;min-width:460px;padding:13px 16px 10px;border-radius:14px}.actionbar .bar-top{padding-right:26px}.bar-buttons button{border-radius:8px;height:58px;background:linear-gradient(#334636aa,#12221d);border-color:#cebb8550}.bar-buttons .skill{min-width:66px}.bar-buttons small{font-size:8px}.bar-top>span:first-child{font-size:9px}.bar-bottom{padding-top:7px;margin-top:8px}.bar-bottom #tonic-btn{border-radius:5px}.bar-bottom>span{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.journey{top:90px;right:22px;width:225px;padding:20px;max-height:calc(100dvh - 370px)}.journey>.eyebrow{display:block;padding-right:20px}.journey h2{font-size:18px;color:#f0dfb8}.journey li{font-size:11px}.journey-footer{color:#acb7a6}
.map-card{right:22px;bottom:142px;width:190px;padding:12px}.map-card .section-title{padding-right:24px;margin-bottom:8px}.map-card canvas{border-radius:6px;border:1px solid #9ab38c33}.map-legend{padding-top:7px}
.party-card{top:174px;left:22px}.party-card .section-title{padding-right:23px}.target-card{top:90px}.target-card .card-heading{padding-right:24px}#boss-bar{border-radius:12px;padding-right:35px}.cast-panel{bottom:204px;padding:12px 35px 12px 15px;border-radius:10px;background:#11201ceb;border:1px solid #baa77855}
.bottom-left{bottom:142px;left:22px;width:275px;pointer-events:auto}.bottom-left #event-log{padding:13px 32px 13px 13px;border-radius:10px;background:#12211de8;backdrop-filter:blur(12px);font-size:9px}.bottom-left .debug{font-size:8px;margin-top:5px}
#game .chat-panel{width:275px;padding:12px;gap:9px}#game .chat-header{padding-right:26px;min-height:24px}#game .chat-panel .chat-tabs button{border-radius:5px;font-size:9px}#game .chat-panel input{border-radius:6px;padding:7px;background:#0b171a}#game .chat-panel .chat-list{font-size:10px}#game .chat-panel.chat-collapsed{width:100px;padding:8px}#game .chat-panel.chat-collapsed .chat-header{padding-right:27px}
@media(max-width:1100px){.resource-card{width:225px}.actionbar{min-width:410px}.bar-buttons .skill{min-width:55px}.bar-bottom>span{max-width:160px}.bottom-left{bottom:140px;width:225px}.journey{width:200px}.map-card{width:165px}.player-card{width:215px}}
@media(max-width:750px){.topbar h1{font-size:14px}.topbar .eyebrow{font-size:7px;letter-spacing:1px}.top-actions{gap:5px}.top-actions #catalog-btn{padding:0 7px;font-size:10px}.player-card{top:68px;left:12px;width:190px;padding:10px}.player-card .portrait{width:32px;height:32px;font-size:21px}.player-subtitle{font-size:7px}.resource-card{bottom:31px;width:calc(50% - 18px);padding:10px 30px 10px 10px;gap:8px}.health-card{left:12px}.mana-card{right:12px}.resource-orb{flex-basis:30px;height:30px;font-size:17px}.resource-heading>span{display:none}.resource-heading strong{font-size:10px}.resource-heading{margin-bottom:5px}.resource-card .meter{height:14px}.resource-card .meter span{line-height:12px;font-size:8px}.experience-card{height:20px}.experience-card #xp-text{line-height:19px;font-size:8px}.actionbar{left:12px;right:auto;bottom:111px;transform:none;min-width:0;width:calc(100% - 24px);padding:10px}.bar-buttons button{height:48px;min-height:48px}.bar-buttons .utility{flex-basis:38px}.bar-buttons .skill{min-width:0}.bar-bottom{height:28px}.party-card{top:145px;left:12px}.map-card{top:68px;right:12px;bottom:auto;width:125px;padding:8px}.journey{top:208px;right:12px;width:180px;max-height:165px;padding:12px}.journey h2{font-size:14px}.journey li{font-size:10px}.bottom-left{left:12px;bottom:267px;width:175px}.cast-panel{bottom:280px}#game .chat-panel{width:230px;padding:9px}#joystick{bottom:278px;left:18px;z-index:var(--z-control)}.target-card{top:385px}}
@media(max-height:550px) and (min-width:751px){.player-card,.target-card{top:65px}.party-card{top:145px}.journey{display:none}.map-card{top:65px;bottom:auto;width:140px}.actionbar{bottom:35px}.resource-card{width:210px}.bottom-left{bottom:138px}}
@media(max-height:510px) and (max-width:750px){.actionbar{left:50%;right:auto;transform:translateX(-50%);bottom:105px;width:min(390px,calc(100% - 24px))}.journey{display:none}.bottom-left{display:none}#joystick{bottom:120px}.map-card{width:110px}.cast-panel{bottom:270px}}
@media(prefers-reduced-motion:reduce){.hud-widget,.experience-card .xp i{transition:none}}
@media(min-width:751px) and (max-width:960px){.actionbar{bottom:141px}.bottom-left{bottom:292px}.map-card{bottom:292px}.cast-panel{bottom:310px}}
@media(max-width:750px) and (min-height:511px){.bottom-left{bottom:380px}}

/* The existing title areas are the drag surfaces; controls inside remain clickable. */
.widget-heading{cursor:grab;touch-action:none;user-select:none}
.widget-heading:focus-visible{outline:1px solid var(--hud-gold);outline-offset:4px}
.widget-dragging .widget-heading{cursor:grabbing}
.player-card .card-heading,.target-card .card-heading,.party-card .section-title,.map-card .section-title,.actionbar .bar-top,#game .chat-header,#game .chat-panel.chat-collapsed .chat-header{padding-right:0}
.journey>.journey-heading .eyebrow{display:block;padding-right:0}
#boss-name{display:block}#boss-bar{padding-right:12px}
.cast-panel{padding-right:15px}
.event-heading{font-size:9px;letter-spacing:.5px;color:var(--gold);padding:7px 11px;background:#12211de8;border:1px solid #bda77833;border-bottom:0}
.bottom-left #event-log{padding-right:13px}
#game,.actionbar,.experience-card,.experience-card .xp,.experience-card .xp i,.bottom-left #event-log,.event-heading{border-radius:0}

/* CP preparation becomes a persistent charge meter after the wind-up. */
.cast-panel.cp-prepared{border-color:#ffc06799;box-shadow:0 0 16px #ffb13b28}
.cast-panel.cp-prepared .cast-meter{position:relative;height:10px;border:1px solid #d9a85c77;background:#18241e;border-radius:5px;overflow:hidden}
.cast-panel.cp-prepared #cast-fill{height:100%;background:linear-gradient(90deg,#d97925,#ffc75b,#fff0b7);box-shadow:0 0 9px #ffc65b;transition:width .12s linear}
.cast-panel.cp-prepared[data-stage="ready"] .cast-meter::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--cp-segment) - 2px),#18241ee6 calc(var(--cp-segment) - 2px),#18241ee6 var(--cp-segment))}
.cast-panel.cp-prepared #cast-time{color:#ffe6a0;font-weight:700;white-space:nowrap}
@media(max-width:750px) and (min-height:600px){#game .cast-panel.cp-prepared{bottom:calc(var(--safe-bottom,0px) + 320px);width:min(250px,70vw)}}