@font-face{font-family:Knight;src:local('Georgia')}*{box-sizing:border-box}body{margin:0;background:#151b18;color:#e7e3d7;font:14px/1.5 'Segoe UI',sans-serif;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#252b25;border:1px solid #73795c66;padding:10px 15px;border-radius:3px;transition:background .18s,border-color .18s}button:hover{background:#3c4636;border-color:#b6a472}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid #e4c978;outline-offset:3px}button.active{border-color:#baa475;background:#494e31}small{font-size:10px;font-weight:600;letter-spacing:2px;color:#bcb899}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,serif;font-weight:400}#world{position:fixed;inset:0}#world canvas{display:block;touch-action:none;width:100%;height:100%}#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(#10171477,transparent 27%,transparent 63%,#0b120fd9),linear-gradient(90deg,#10161333,transparent 30%,transparent 75%,#10161333)}header{height:86px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#101715ed,#141b18cc);border-bottom:1px solid #a3915833;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:13px;color:#f1ead3;text-decoration:none;font:24px Georgia,serif;letter-spacing:3px}.brand .live{color:#c0ab70}.brand small{display:block;font:8px 'Segoe UI';letter-spacing:3px;margin-top:5px}.sigil{display:grid;place-items:center;width:43px;height:48px;border:1px solid #8c825e;clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);background:#454431;font-size:30px}nav{display:flex;gap:5px}nav button{border:0;background:none;color:#d1d2bf;padding:12px 20px}nav button:hover{background:#9b9d7622}.connection{font-size:10px;letter-spacing:1px;color:#acbca6;display:flex;align-items:center;gap:8px}.connection[hidden]{display:none}.connection i,.pulse{width:5px;height:5px;background:#a4c185;display:inline-block;border-radius:50%;box-shadow:0 0 8px #a4c185}.glass{background:linear-gradient(135deg,#17221deb,#18201acd);border:1px solid #9d90603d;box-shadow:0 8px 30px #0002;backdrop-filter:blur(12px);border-radius:4px}.hero-card{position:absolute;top:114px;left:32px;width:255px;padding:17px}.hero-heading{display:flex;gap:12px;align-items:center;margin-bottom:14px}.hero-heading small{font-size:8px}.hero-heading h1{font-size:23px}.level-medal{height:42px;width:38px;display:grid;place-items:center;border:1px solid #b6a267;background:#454632;color:#e7d299;font:25px Georgia}.badge{margin-left:auto;align-self:flex-start;font-size:8px;letter-spacing:1px;color:#9ca88a}.bar{height:12px;background:#0e1613;position:relative;margin-bottom:5px;border:1px solid #c8cead19;overflow:hidden}.bar span{display:block;height:100%;transition:width .45s;background:linear-gradient(90deg,#732e24,#bd6347)}.bar b{position:absolute;inset:0;text-align:center;font-size:8px;line-height:10px;color:#ffffffba;font-weight:500}.mp span{background:linear-gradient(90deg,#1b455b,#5792a9)}.xp{height:3px;background:#c3b57a15;margin:10px 0}.xp span{display:block;background:#c7b873;height:100%;transition:width .4s}.hero-stats{display:flex;gap:25px;font-size:12px;color:#acb4a6}.hero-stats b{font-weight:400}.gold{color:#d9bd7b}.location{position:absolute;right:32px;top:114px;width:233px;padding:17px 20px}.location h2{font-size:29px;margin:3px 0 7px}.location p{font-size:12px;color:#b8c4a5;display:flex;gap:8px;align-items:center}.text-button{border:0;background:none!important;padding:10px 0 0;font-size:10px;color:#c9c4a6;letter-spacing:.3px}.target{position:absolute;top:117px;left:50%;transform:translateX(-50%);width:235px;text-align:center;padding:9px 18px;background:#202018be}.target h2{font-size:22px;margin:0 0 6px}.target small{font-size:8px}.target .bar{height:5px}.target p{font-size:10px;color:#b4b2a3}.quest-tracker{position:absolute;bottom:200px;left:32px;width:255px;padding:16px 18px}.quest-tracker h3{font-size:18px;margin:7px 0}.quest-tracker p{color:#adbaa4;font-size:12px}.tracker-progress{display:flex;justify-content:space-between;align-items:center;color:#d0be83;font-size:11px}.tracker-progress button{padding-top:5px}.bottom{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:100vw;text-align:center}#event-feed{font-size:11px;color:#e6e1c9;text-shadow:0 1px 4px #000;margin-bottom:13px;height:16px}.action-bar{display:flex;align-items:center;gap:9px;padding:12px}.primary{background:linear-gradient(#9b8b50,#71623c);border:1px solid #ddc17e88;color:#fff4d1;box-shadow:inset 0 1px #f7dd9733;text-shadow:0 1px #0006;font-weight:600}.primary:hover{background:#a49456}.action-bar>.primary{min-width:214px;height:58px;margin-right:7px}.primary.running{background:linear-gradient(#485438,#35442e);border-color:#9fa97988}.skill-slot{width:60px;height:58px;position:relative;border:1px solid #89886766;background:linear-gradient(135deg,#444b38,#20291f);font:27px Georgia;display:flex;justify-content:center;align-items:center;padding-bottom:9px;color:#d5d5a0}.skill-slot span{position:absolute;top:2px;right:5px;font:9px 'Segoe UI';color:#f2e4ad}.skill-slot small{position:absolute;bottom:3px;left:0;right:0;font:8px 'Segoe UI';letter-spacing:0;color:#d3d4bf}.potion{color:#ce7865;background:linear-gradient(135deg,#4d2e28,#252720)}.hunt-info{padding:0 14px;text-align:left;display:flex;flex-direction:column;min-width:95px}.hunt-info small{font-size:7px;letter-spacing:1px}.hunt-info strong{font:22px Georgia;color:#d8d4bb}.hunt-info>span{font-size:10px;color:#b2bda5}.drawer{position:fixed;z-index:12;right:20px;top:102px;bottom:auto;width:360px;max-height:min(620px,calc(100dvh - 270px));max-width:calc(100vw - 28px);background:#16201bf5;border:1px solid #8f82565c;box-shadow:0 18px 90px #0009;backdrop-filter:blur(20px);padding:23px;border-radius:5px;overflow:auto}.drawer-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #bac99922;padding-bottom:17px;margin-bottom:18px}.drawer-heading h2{font-size:28px}.drawer-heading button{border:0;background:none}.drawer p{font-size:12px;color:#b0bba6}.section-label{display:block;margin:22px 0 12px}.list-card{border:1px solid #a4b08522;background:#7c8d4d09;padding:13px;margin-bottom:9px;border-radius:3px}.list-card.selected{border-color:#b9a47188;background:#b8ac6511}.list-card h3{font-size:19px;margin-bottom:4px}.list-card .row{display:flex;justify-content:space-between;align-items:center;gap:10px}.list-card button{padding:6px 12px;font-size:11px}.list-card small{font-size:11px;letter-spacing:.4px}.map-tile{display:flex;gap:12px;align-items:center}.map-tile img{width:60px;height:60px;object-fit:cover;border-radius:3px;opacity:.8}.map-tile h3{font-size:17px}.map-tile button{margin-left:auto}.inventory-item{display:flex;gap:13px;align-items:center}.inventory-item img{width:44px;height:44px;image-rendering:auto;background:#0003;border:1px solid #d2c07633}.inventory-item>div{flex:1}.inventory-item h3{font-size:16px}.filter-input,input,select{width:100%;border:1px solid #adb78344;background:#0e1712;color:#e9e2ce;padding:11px;margin:8px 0 15px;border-radius:3px}.codex-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.codex-counts div{background:#9ba6640c;border:1px solid #a3af7c22;padding:12px}.codex-counts b{display:block;font:26px Georgia;color:#d2c387}.codex-counts span{font-size:10px;color:#a9b79b}.codex-tabs{display:flex;gap:6px;flex-wrap:wrap}.codex-tabs button{font-size:10px;padding:7px}dialog{color:#e7e1cf;background:radial-gradient(ellipse at top,#37432b,#17221c 80%);border:1px solid #b4a46566;border-radius:5px;padding:35px;width:440px;max-width:calc(100vw - 30px);box-shadow:0 30px 160px #000a}dialog::backdrop{background:#0a110ed9;backdrop-filter:blur(10px)}dialog>small{font-size:10px}dialog h2{font-size:47px;letter-spacing:1px;margin:8px 0 14px}dialog h2 span{color:#d3bb7b}dialog p{color:#bec7b0;font-size:13px;margin-bottom:22px}dialog label{font-size:11px;color:#c6cdb6}dialog .primary{width:100%;padding:14px;margin-top:7px}dialog footer{color:#95a08e;font-size:10px;line-height:1.8;margin-top:20px;text-align:center}#loading{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;background:#18211bd9;padding:30px 45px;border:1px solid #b3a36744;border-radius:4px}#loading h2{font-size:25px;margin:14px 0 7px}#loading p{color:#c3c7ac;font-size:12px}.spinner{display:inline-block;width:28px;height:28px;border:1px solid #bcaf7844;border-top-color:#dfc782;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;z-index:50;top:95px;left:50%;transform:translateX(-50%);padding:12px 25px;background:#3a3925f2;border:1px solid #c2a35c;color:#f4e4bc;max-width:90vw;text-align:center}.damage{position:fixed;pointer-events:none;font:700 27px Georgia;color:#e8dbb4;text-shadow:0 2px 4px #000;animation:float 1.1s ease-out forwards}.damage.crit{font-size:36px;color:#ffc875}.damage.hurt{color:#ed9677}.damage.heal{color:#bbdf91}
.damage.overtime{font-size:21px;color:#c08ae0}
.damage.mana{color:#8fc7e8}
.damage.buff{font-size:20px;color:#9ed687}
.damage.buff-end{font-size:18px;color:#9aa3ad}
.damage.loot{font-size:19px;color:#e6c766}@keyframes float{0%{opacity:1;transform:translate(-50%,0) scale(.7)}25%{transform:translate(-50%,-18px) scale(1)}100%{opacity:0;transform:translate(-50%,-65px)}}#float-layer{position:fixed;inset:0;pointer-events:none}.empty-note{padding:25px 5px;text-align:center}.source-note{margin:18px 0;padding:12px;background:#a0964e12;border-left:2px solid #b8a663;color:#b9bda3!important;font-size:11px!important}#panel-body details{font-size:12px;margin:10px 0}#panel-body summary{cursor:pointer;color:#ddce9f}#panel-body pre{white-space:pre-wrap;font:10px/1.6 monospace;color:#adb7a1}
.hero-heading>div:nth-child(2){min-width:0;flex:1}.hero-heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){header{height:70px;padding:0 18px}.brand{font-size:19px}.brand small{font-size:6px}.sigil{width:30px;height:37px;font-size:23px}nav button{padding:12px 10px;font-size:12px}.connection{display:none}.hero-card{top:88px;left:16px;width:215px;padding:12px}.location{top:88px;right:16px;width:190px;padding:12px}.location h2{font-size:24px}.target{top:245px;width:180px;padding:7px 12px}.quest-tracker{left:16px;bottom:183px;width:215px;padding:13px}.drawer{top:85px}.bottom{bottom:12px}}
@media(max-width:600px){header{padding:0 12px;height:66px}.brand{gap:8px;font-size:17px;letter-spacing:1px}.brand small{letter-spacing:1.4px}.sigil{width:27px;height:34px;font-size:20px}nav{gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;max-width:calc(100vw - 150px)}nav::-webkit-scrollbar{display:none}nav button{padding:10px 7px;font-size:10px;flex:0 0 auto;white-space:nowrap}.hero-card{top:78px;left:12px;width:177px;padding:10px}.hero-heading{gap:8px;margin-bottom:10px}.hero-heading h1{font-size:19px}.hero-heading small{font-size:7px}.level-medal{width:28px;height:32px;font-size:21px}.badge{display:none}.hero-stats{font-size:10px;gap:16px}.location{right:12px;top:78px;width:150px;padding:10px}.location>small{font-size:6px;letter-spacing:1px}.location h2{font-size:22px}.location p{font-size:10px}.location .text-button{font-size:8px}.target{top:229px;width:155px;background:#1c231aa8}.target h2{font-size:19px}.quest-tracker{left:12px;bottom:164px;width:177px;padding:10px;background:#1b251ac7}.quest-tracker small{font-size:7px}.quest-tracker h3{font-size:16px}.quest-tracker p{font-size:10px}.bottom{width:calc(100vw - 20px);bottom:12px}.action-bar{gap:6px;padding:9px;justify-content:center;flex-wrap:wrap}.action-bar>.primary{height:40px;min-width:0;width:100%;margin:0;font-size:12px;order:2}.skill-slot{width:51px;height:45px;font-size:21px}.skill-slot small{font-size:7px}.hunt-info{padding:0 8px;min-width:82px}.hunt-info strong{font-size:18px}#event-feed{font-size:10px;margin-bottom:8px}.drawer{top:76px;bottom:12px;right:12px;padding:18px;width:calc(100vw - 24px);max-height:none}#loading{width:270px;padding:23px;top:49%}.quest-tracker .text-button{font-size:10px}dialog{padding:26px}dialog h2{font-size:40px}}

#npc-labels{position:fixed;inset:0;pointer-events:none;z-index:5}.npc-label{position:absolute;left:0;top:0;pointer-events:auto;padding:3px 7px;background:#151c18bb;border:0;border-radius:3px;font-size:11px;color:#f4dfa0;text-shadow:0 1px 3px #000;white-space:nowrap}.npc-label:hover{background:#42563d}#minimap-wrap{position:relative;margin-top:8px}#minimap{width:100%;aspect-ratio:1;border:1px solid #9d8c5855;cursor:crosshair;display:block;border-radius:3px}#coordinates{position:absolute;right:5px;bottom:3px;font:10px monospace;color:#fff;text-shadow:0 1px 2px #000}#npc-dialog{width:470px;max-width:calc(100vw - 28px)}#npc-dialog h2{font-size:30px;margin:8px 0 18px}#npc-content p{line-height:1.8;color:#d5d7c7}.quest-reward{display:grid;gap:4px;padding:15px 0;margin:12px 0;border-top:1px solid #80704955}.quest-reward span{font-size:12px;color:#c9b87b}.completed{color:#bbd796!important}#npc-dialog>.text-button{display:block;margin-top:16px}#target[hidden]{display:none!important}
.hero-card,.location,.quest-tracker,.bottom{z-index:10}header{z-index:12}#loading{z-index:20}
@media(max-width:600px){#minimap{height:116px;width:116px;margin:auto}#minimap-wrap{margin-top:4px}.location{width:140px}.npc-label{font-size:10px;padding:3px 5px}.quest-tracker{bottom:176px}#npc-dialog h2{font-size:27px}}

#npc-dialog{max-height:85vh;overflow-y:auto}.quest-actions{display:flex;gap:8px;flex-wrap:wrap}#npc-dialog .list-card h3{font-size:18px}#npc-dialog .list-card p{margin:7px 0}

#npc-dialog>[data-npc-close]{position:sticky;top:0;z-index:2;background:#252b25!important;width:100%;margin:0 0 12px;padding:10px;border:1px solid #73795c66}

.shop-product{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid #73795c44}.shop-product>img,.shop-placeholder{width:42px;height:42px;object-fit:contain;flex-shrink:0}.shop-description{min-width:0;flex:1}.shop-description h3{font-size:15px!important;margin:0 0 6px}.shop-description small{display:block}.shop-purchase{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.shop-purchase label{display:flex;gap:5px;align-items:center;font-size:12px}.shop-purchase select{width:65px;background:#252b25;color:#eee;padding:6px;border:1px solid #73795c66}.shop-purchase span{color:#c9b87b;font-size:12px}.shop-pagination{display:flex;justify-content:space-between;align-items:center;margin:18px 0}.shop-heading [aria-pressed=true]{border-color:#d4b268;background:#46513a}@media(max-width:600px){.shop-product{gap:8px}.shop-product>img{width:32px;height:32px}.shop-purchase{gap:6px}.shop-purchase button{padding:7px 10px}.shop-heading button{padding:8px;font-size:12px}}

.vault-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:16px 0}.vault-slot{height:58px;position:relative;padding:5px;min-width:0}.vault-slot img{width:32px;height:32px;object-fit:contain}.vault-slot span{position:absolute;right:3px;bottom:2px;font-size:10px}.vault-slot[aria-pressed=true]{border-color:var(--gold);background:#5e643a}.vault-gold{border-block:1px solid #ffffff18;padding:10px 0;margin-bottom:16px}.vault-gold input{width:100%;margin:8px 0}.shop-purchase input{width:80px;max-width:100%;padding:6px}.vault-slot:disabled{opacity:.35}

@supports(height:1dvh){#npc-dialog{max-height:85dvh}}

.hunt-filters{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.hunt-filters label{flex:1;min-width:130px}.hunt-filters input,.hunt-filters select{width:100%;margin-top:6px;padding:8px}

.quest-step{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #70613b55}.quest-step>b{color:#ad9c68}.quest-step>span{flex:1}.quest-step strong{float:right;color:#e9d28c}.quest-step small{display:block;margin-top:4px;color:#a6ac96}.quest-step.done>b,.quest-step.done strong{color:#a4ca83}

.npc-label[data-quest-state=ready]{color:#b6ed99;border-color:#88b768}.npc-label[data-quest-state=pickup]{color:#edd89b}
.tracker-progress{flex-wrap:wrap;gap:4px}.tracker-progress #quest-resume{order:2;flex-basis:100%;text-align:left}

.sound-btn{background:#211d13;border:1px solid #a78c51;color:#eddfae;padding:5px 9px;border-radius:4px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;margin-left:auto;margin-right:8px}
.sound-btn:hover{background:#3a301a;border-color:#f2dd55;color:#fff}
.sound-btn.muted{opacity:0.6;border-color:#665}

#quick-hp{color:#ef9b94}#quick-mp{color:#9bbff5}
@media(max-width:600px){.action-bar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.action-bar>.primary{grid-column:1/-1;width:100%}.action-bar .skill-slot{width:100%;min-width:0;padding:4px}.action-bar .hunt-info{display:none}}

/* Mobile HUD (user request, 13 Sep): only the map stays top right; the brand, character card,
   location text, camera reset and the second potion button go; a slim row at the top carries
   HP/MP, character switch and run/walk. Buttons do not double-tap zoom. */
button,[role=button],input,select{touch-action:manipulation}
.top-tools{display:none}
@media(max-width:600px){
 .brand,.hero-card,#camera-reset,.location>small,.location>h2,.location>p,#potion{display:none!important}
 header nav{max-width:100vw!important}
 .top-tools{display:flex;position:fixed;top:70px;left:12px;right:104px;z-index:12;align-items:center;gap:8px}
 .mini-bars{flex:1;display:grid;gap:3px;min-width:0}
 .mini{display:block;height:6px;background:#0009;border-radius:3px;overflow:hidden}
 .mini i{display:block;height:100%;width:100%;transition:width .3s}
 .mini.hp i{background:#c0503f}.mini.mp i{background:#4a82c0}
 .top-tools .text-button{font-size:10px;white-space:nowrap;padding:5px 8px;background:#211d13;border:1px solid #a78c51;color:#eddfae}
 #run-toggle{top:68px!important;right:12px!important;left:auto!important;bottom:auto!important;font-size:10px!important;padding:5px 8px!important}
 .location{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;width:auto!important;top:100px!important;right:12px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .action-bar{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}

/* Quest tracker: minimise (−) or close (×); the Görevler menu still opens the journal. */
.quest-tracker>small{display:block;padding-right:62px}
.tracker-controls{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:1}
.tracker-controls button{width:26px;height:26px;padding:0;font-size:15px;line-height:1;background:#211d13;border:1px solid #a78c51;color:#eddfae}
.quest-tracker.minimized>h3,.quest-tracker.minimized>p,.quest-tracker.minimized>.tracker-progress{display:none}
.quest-tracker.minimized{padding-bottom:9px}
.quest-tracker.closed{display:none!important}
@media(max-width:600px){
 .tracker-controls{top:4px;right:4px}.tracker-controls button{width:32px;height:30px;font-size:17px}
 /* The monster's name, level and health at the top, under the buff timers and left of the map. */
 .target{top:128px!important;left:12px!important;transform:none!important;width:calc(100vw - 152px)!important;max-width:238px}
}
/* Skill bar (hotkey-bar.js): 8 slots of the current page, as CUIHotKeyDlg. */
.hotkey-bar{display:flex;align-items:center;gap:5px;padding:6px 9px;margin:0 auto 8px;width:max-content;max-width:100%;flex-wrap:wrap;justify-content:center}.hotkey-slot{width:46px;height:46px;position:relative;padding:0;border:1px solid #89886766;background:linear-gradient(135deg,#444b38,#20291f);display:grid;place-items:center;font:18px Georgia;color:#d5d5a0;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.hotkey-slot img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}.hotkey-slot b{font:600 13px 'Segoe UI'}.hotkey-slot .key{position:absolute;top:1px;left:4px;font:9px 'Segoe UI';color:#f2e4ad;text-shadow:0 1px 2px #000;z-index:1}.hotkey-slot .count{position:absolute;bottom:1px;right:3px;font:9px 'Segoe UI';color:#f2e4ad;text-shadow:0 1px 2px #000}.hotkey-slot .cool{position:absolute;inset:0;display:grid;place-items:center;background:#000a;font:600 15px 'Segoe UI';color:#fff}.hotkey-slot.potion{color:#ce7865;background:linear-gradient(135deg,#4d2e28,#252720)}.hotkey-slot.queued{border-color:#e4c978;box-shadow:inset 0 0 0 1px #e4c978}.hotkey-slot.empty{opacity:.55}.hotkey-slot.locked img{filter:grayscale(1)}.hotkey-page{padding:4px 8px;font-size:14px}.hotkey-page-label{font:12px Georgia;color:#d2c387;min-width:12px;text-align:center}.hotkey-auto{padding:6px 9px;font-size:11px}.hotkey-auto.active{border-color:#baa475;background:#494e31}
.hotkey-slot.drag-source{opacity:.35}
.hotkey-slot.drop-allowed{outline:1px dashed #898867aa}
.hotkey-slot.drop-over{border-color:#ffd875!important;outline:2px solid #ffd875;box-shadow:0 0 12px #ffd875aa,inset 0 0 8px #ffd87566!important;transform:scale(1.08);transition:transform .1s ease}
.hotkey-slot.holding{animation:slot-hold-pulse .4s ease infinite alternate}
@keyframes slot-hold-pulse{from{transform:scale(1);filter:brightness(1)}to{transform:scale(.9);filter:brightness(1.5) saturate(1.8)}}
.hotkey-drag-ghost{position:fixed;left:0;top:0;width:46px;height:46px;z-index:10000;pointer-events:none;border:2px solid #efd492;background:linear-gradient(135deg,#333827,#182017);box-shadow:0 6px 18px #000c;display:grid;place-items:center;color:#efd492;will-change:transform;border-radius:4px;user-select:none}
.hotkey-drag-ghost img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.hotkey-drag-ghost.drop-remove{border-color:#f44336;background:#b71c1ccc;box-shadow:0 0 16px #f44336aa}
.hotkey-drag-ghost.drop-remove::after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:bold;color:#fff;text-shadow:0 0 6px #000;background:#0006}
@media(max-width:600px){.hotkey-bar{gap:3px;padding:4px}.hotkey-slot{width:36px;height:36px;font-size:14px}.hotkey-page{padding:3px 6px}}
.hotkey-potions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.hotkey-potions button{padding:6px 10px;font-size:11px}
/* A buff row spans the skill book's two columns; squeezed into one its text ran down letter by letter. */
.skill-book>.buff-row{grid-column:1/-1}
/* Movable boxes (hud-move.js). */
.hud-grip{position:absolute;top:2px;left:2px;z-index:3;width:18px;height:18px;padding:0!important;border:0!important;background:none!important;color:#bcb89999;font-size:12px;line-height:18px;cursor:move;touch-action:none;min-width:0!important}
/* On a touch screen an 18px faint handle cannot be grabbed: give it a real target and make it
   visible, so the windows can be moved there too (user report, 2026-09-21). */
@media(pointer:coarse){.hud-grip{width:30px;height:30px;font-size:18px;line-height:30px;color:#e8d9a8;background:#141a13cc!important;border-radius:6px}}.hud-grip:hover,.hud-grip:focus-visible{color:#e4c978}.bottom>.hud-grip{top:-2px;left:-2px}body .chat .chat-head{padding-left:16px}
/* Defaults above the bottom bars now that the skill bar sits over the action bar (body .chat outranks chat.css). */
body .chat{bottom:206px}.quest-tracker{bottom:206px}
@media(max-width:900px){body .chat{bottom:206px}.quest-tracker{bottom:206px}}
@media(max-width:600px){body .chat{bottom:206px}.quest-tracker{bottom:252px}.hotkey-bar{flex-wrap:nowrap;gap:3px;padding:4px}.hotkey-slot{width:33px;height:33px;font-size:13px}.hotkey-page[data-hotkey-step="-1"],.hotkey-page-label{display:none}.hotkey-page{padding:3px 6px}.hotkey-auto{padding:4px 6px;font-size:10px}}
/* Short desktop screens (1280×720, 1366×768): cards a little higher and a smaller minimap, so the location card
   clears the chat and the hero card clears the quest tracker. */
@media(max-height:800px) and (min-width:601px){.hero-card,.location{top:96px}#minimap-wrap,#minimap{width:125px;height:125px}}
/* On a desktop the open panel ends above the bottom bars (skill bar and action bar) instead of covering them. */
/* The character window holds a fixed amount: a paperdoll, the bag grid and its services. Cap it by
   the room actually left between the header and the hotkey bar rather than by a number, so it is
   shown whole wherever it fits (827px of content against 827px of room at 1920x1080, where a fixed
   680 made it scroll for nothing). Where it does not fit, it scrolls as before. */
@media(min-width:601px){body .classic-panel{max-height:calc(100dvh - 253px)}}
/* Sound panel (audio-ui.js): the header speaker button opens the effect and music levels. */
.sound-btn.muted{opacity:.65}
.audio-panel{position:fixed;z-index:40;top:92px;right:280px;width:248px;padding:12px 14px;display:flex;flex-direction:column;gap:9px}   /* left of the location card, which sits at right:32px (QA full39) */
.audio-panel[hidden]{display:none}
.audio-panel>small{color:#bcb899}
.audio-row{display:grid;grid-template-columns:62px 1fr 38px;align-items:center;gap:8px;font-size:12px;color:#d6d3c0}
.audio-row b{text-align:right;font:12px 'Segoe UI';color:#d2c387}
.audio-row input[type=range]{width:100%;margin:0;accent-color:#c0ab70;background:none;padding:0;border:0}
.audio-mute-btn{width:100%;margin-top:4px;padding:8px;font-size:12px;border:1px solid #9d9060;background:#252b25;color:#e7e3d7;border-radius:3px}
.audio-mute-btn[aria-pressed=true]{border-color:#c0ab70;background:#3c4636;color:#f2e4ad}
.audio-panel.muted .audio-row{opacity:.5}
@media(max-width:600px){.audio-panel{top:70px;left:10px;right:auto;width:228px}}   /* the minimap keeps the right side */
#activity-status{margin-top:9px;padding-top:8px;border-top:1px solid #73674766;font-size:11px;line-height:1.5;color:#dbd1ac}
#activity-status[data-kind=dead]{color:#ffb0a0}
.skill-target-dialog{width:min(360px,calc(100vw - 36px));padding:22px;border:1px solid #b19a62;border-radius:8px;background:#17201d;color:#eee7d2;box-shadow:0 12px 60px #000b}
.skill-target-dialog::backdrop{background:#0008}
.skill-target-dialog h3{margin:0 0 16px}.skill-target-dialog label{display:block;font-size:13px}
.skill-target-dialog input{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:10px;color:#fff;background:#0c1310;border:1px solid #827651;border-radius:4px}
.skill-target-dialog p{font-size:12px;color:#c3b994}.skill-target-dialog button{margin-right:8px;padding:9px 15px}

/* A right-side panel and the right-hand HUD column want the same edge: with a panel open the location
   card and the chat sat underneath it and could not be read (measured 1366x768 and 1920x1080). While
   one is open they move clear of it; the widths are the panel's own, 360 at right:20 as .drawer and
   405 at right:24 once it wears .classic-panel. It is one element in both cases, so the wider rule
   carries the id too: without it the id in the first selector outweighs a plain class and wins. */
/* Only where the row actually fits: the quest tracker ends at 287, the activity log is 340 wide and
   the chat 320, and the panel takes 429 from the right edge, so below about 1440 they cannot sit
   side by side (measured: forcing it at 1366 pushed the log into the tracker). There the panel
   covers the right column as it always did. */
@media(min-width:1440px){
 body:has(#panel:not([hidden])) .location,body:has(#panel:not([hidden])) .chat{right:396px}
 body:has(#panel.classic-panel:not([hidden])) .location,body:has(#panel.classic-panel:not([hidden])) .chat{right:445px}
 body:has(#panel:not([hidden])) .audio-panel{right:656px}
 body:has(#panel.classic-panel:not([hidden])) .audio-panel{right:705px}
 /* The activity log is centred on the screen; with a panel open it centres in what is left of it,
    so the chat that moved in beside it has room (measured: they collided by 25,375 px otherwise). */
 body:has(#panel:not([hidden])) .activity-log{transform:translateX(calc(-50% - 215px))}
 body:has(#panel.classic-panel:not([hidden])) .activity-log{transform:translateX(calc(-50% - 240px))}
}

/* Between 601 and 1440 the row does not fit, but the right column must still be readable with a panel
   open. The location card moves clear of the panel and the chat takes the empty band under the header,
   left of the map, where nothing else sits (measured 1366x768). */
@media(min-width:601px) and (max-width:1439px){
 body:has(#panel:not([hidden])) .chat{left:32px;right:auto;top:96px;bottom:auto}
}
/* From 1000 there is room for it between the hero card (ends at 287) and the panel (429 from the right):
   at left:32 it sat on the hero card (browser, 1280x800, 24 September). */
@media(min-width:1000px) and (max-width:1439px){
 body:has(#panel:not([hidden])) .chat{left:300px;width:min(320px,calc(100vw - 740px))}
}
/* The location card only has somewhere to go once the screen is wide enough to hold it beside the
   centred activity log: at 1280 moving it left put the minimap straight into that log. */
@media(min-width:1366px) and (max-width:1439px){
 body:has(#panel:not([hidden])) .location{right:396px}
 body:has(#panel.classic-panel:not([hidden])) .location{right:445px}
}
/* The world's NPC labels (z-index 5) drew over the header and the HUD cards (play test, 24 September 2026). */
header{z-index:6}main>section,main>#run-toggle{z-index:6}
/* The nation badge took a column of its own and cut short names ("RogueA…"); it sits in the card's corner now. */
.hero-card .badge{position:absolute;top:17px;right:17px;margin:0}

/* KnightLive party window: compact roster below the character card, with opt-in automation. */
#party-frame{position:absolute;z-index:10;top:300px;left:32px;width:255px;max-height:min(150px,calc(100dvh - 620px));overflow:auto;padding:10px 12px;background:#17221df0}
/* KnightLive: on tall desktop screens the party frame grows into the free space above the adventure log
   (log: bottom 206px, ~256px tall) instead of staying 150px and scrolling; short screens keep 150px. */
@media(min-width:901px){#party-frame{max-height:max(150px,calc(100dvh - 806px))}}
#party-frame[hidden]{display:none}
#party-frame h2{font:600 10px 'Segoe UI',sans-serif;letter-spacing:1.5px;color:#d9cb9e;display:flex;justify-content:space-between;margin:0 0 6px}
#party-frame h2 small{font-size:9px;letter-spacing:0}
#party-frame ol{list-style:none;margin:0;padding:0}
.party-frame-member{padding:5px 0;border-top:1px solid #9d90602b}
.party-frame-member.away{opacity:.42}
.party-frame-name{display:flex;justify-content:space-between;gap:4px;font-size:10px;line-height:1.2}
.party-frame-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.party-frame-name span{font-size:9px;color:#c8c5a7;white-space:nowrap}
.party-frame-meter{height:4px;background:#0e1613;margin-top:3px;overflow:hidden}
.party-frame-meter i{display:block;height:100%;background:#b95340}
.party-frame-meter.mp i{background:#568eb0}
.party-frame-actions{display:grid;gap:4px;margin-top:7px}
.party-frame-actions button{padding:5px 6px;text-align:left;font-size:10px}
.party-frame-actions button[aria-pressed=true]{border-color:#bba76e;background:#454d31}
@media(max-width:900px){#party-frame{left:16px;top:260px;width:215px;max-height:min(270px,calc(100dvh - 450px))}}
@media(max-width:600px){#party-frame{left:12px;top:240px;width:177px;max-height:160px;padding:7px 8px}.party-frame-name{font-size:9px}.party-frame-name span{font-size:8px}.party-frame-actions button{font-size:9px;padding:4px}}
@media(max-width:600px) and (max-height:700px){#party-frame{left:auto;right:12px;top:255px;max-height:calc(100dvh - 430px)}}
@media(orientation:landscape) and (max-height:500px),
       (orientation:landscape) and (max-height:1000px) and (pointer:coarse){
 #party-frame{left:auto;right:max(10px,env(safe-area-inset-right));top:130px;width:190px;max-height:calc(100dvh - 240px)}
}
/* The party frame's toggles in one row, and the frame above the adventure log it borders (play test, 25 September). */
.party-frame-actions{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.party-frame-actions button{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main>#party-frame{z-index:7}
@media(min-width:1101px){#party-frame{top:326px}}

/* KnightLive next-action card. It sits opposite the quest tracker. */
#next-step{position:absolute;z-index:8;right:32px;bottom:200px;width:245px;padding:12px 14px;background:#17221df0}
#next-step[hidden]{display:none}
#next-step h3{font-size:16px;margin:5px 0}
#next-step p{font-size:11px;color:#bdc8b4;margin:0 0 8px}
#next-step button{padding:6px 9px;font-size:11px}
.party-member-menu{font-size:9px;position:relative}
.party-member-menu summary{cursor:pointer;color:#d9cb9e}
.party-member-menu button{font-size:9px;padding:3px 5px}
.party-lead-prompt{border-top:1px solid #9d906055;padding-top:6px;font-size:10px}
.party-lead-prompt button{padding:3px 5px;margin-left:4px}
@media(max-width:600px){#next-step{right:12px;bottom:190px;width:177px;padding:7px 8px}#next-step h3{font-size:13px}#next-step p{font-size:10px}}
.party-frame-name{flex-wrap:wrap}
.party-member-menu{flex:0 0 100%}
/* The next-step card sat behind the chat box at bottom right (browser check, 25 September): on wide screens it goes
   under the top bar, centred, where no panel is. */
@media(min-width:601px){#next-step{top:96px;bottom:auto;right:auto;left:50%;transform:translateX(-50%);width:min(440px,42vw);z-index:11;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
#next-step small,#next-step h3,#next-step p{grid-column:1}
#next-step button{grid-column:2;grid-row:1/4}}
@media(max-width:600px){#next-step{top:104px;bottom:auto;right:auto;left:12px;width:calc(100vw - 150px);z-index:11}}
.region-event{position:fixed;top:68px;left:50%;transform:translateX(-50%);z-index:19;padding:7px 13px;max-width:90vw;text-align:center;color:#f3df9c;font-size:12px;pointer-events:none}
/* KnightLive window controls (hud-move.js): every HUD window has ⠿ move and × close; ▦ Pencereler brings them back. */
.hud-closed{display:none!important}
.hud-ctl{display:inline-flex;gap:3px;align-items:center;vertical-align:middle;margin-right:6px;flex:none}
.hud-ctl button,#next-step .hud-ctl button{position:static!important;min-width:0!important;width:22px;height:22px;padding:0!important;margin:0!important;display:grid;place-items:center;font:13px/1 'Segoe UI',sans-serif!important;letter-spacing:0!important;border:1px solid #9d906055!important;background:#141a13e6!important;border-radius:4px!important;color:#e8d9a8!important;box-shadow:none!important}
.hud-ctl .hud-grip{cursor:move;touch-action:none}
.hud-ctl button:hover{border-color:#d4b268!important;color:#fff4d1!important}
.hud-ctl-edge{position:absolute;top:-12px;right:8px;z-index:4;margin:0}
.hud-ctl-left{top:0;left:0;right:auto}
.bottom>.hud-ctl-left{top:-4px;left:-4px}
@media(pointer:coarse){.hud-ctl button,#next-step .hud-ctl button{width:28px;height:28px;font-size:16px!important}.hud-ctl-edge{top:-15px}}
.hud-menu{position:fixed;z-index:60;right:10px;top:90px;display:grid;gap:4px;min-width:200px;max-height:75dvh;overflow:auto;padding:12px 14px}
.hud-menu[hidden]{display:none}
.hud-menu label{display:flex;gap:9px;align-items:center;font-size:13px;color:#e7e3d7;padding:3px 0;cursor:pointer}
.hud-menu input{width:auto;margin:0;accent-color:#c0ab70}
.hud-menu button{margin-top:8px;padding:7px 10px;font-size:12px}
#hud-windows{font-size:18px}
/* A phone keeps the world visible: the next-step card is one line, the chat and party boxes narrower. */
@media(max-width:600px){#next-step{padding:8px 10px;display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:center}#next-step>small{display:none}#next-step h3{grid-column:1;margin:0}#next-step p{display:none}#next-step>button{grid-column:2;grid-row:1}}
.chat-head:has(.hud-ctl) .chat-clan{margin-right:0;padding:2px 6px}.chat-head:has(.hud-ctl){gap:5px}
.quest-tracker:has(.hud-ctl)>small{display:block;padding-right:94px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(pointer:coarse){.quest-tracker:has(.hud-ctl)>small{padding-right:108px}}

/* KnightLive settings screen (settings-ui.js): one place for windows, names, graphics, sound and camera. */
.settings-panel{position:fixed;z-index:70;top:92px;right:32px;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 120px);display:flex;flex-direction:column;padding:14px 16px;gap:10px}
.settings-panel[hidden]{display:none}
.settings-head{display:flex;align-items:center;justify-content:space-between}
.settings-head h2{margin:0;font:400 22px Georgia,serif;color:#eee7cf}
.settings-close{width:32px;height:32px;padding:0;font-size:18px}
.settings-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid #9d90603d;padding-bottom:8px}
.settings-tabs button{padding:6px 10px;font-size:12px;background:#1d241e;border:1px solid #9d906055;color:#d6d3c0;border-radius:3px}
.settings-tabs button.active{border-color:#c0ab70;background:#3c4636;color:#f2e4ad}
.settings-body{overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.settings-body h3{margin:6px 0 0;font:600 11px 'Segoe UI',sans-serif;letter-spacing:1.5px;color:#bcb899;text-transform:uppercase}
.settings-check{display:flex;gap:9px;align-items:center;font-size:13px;color:#e7e3d7;padding:3px 0;cursor:pointer;flex-wrap:wrap}
.settings-check input{width:auto;margin:0;accent-color:#c0ab70}
.settings-check small{flex-basis:100%;padding-left:24px;color:#a9ac98;font-size:11px}
.settings-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:10px;font-size:13px;color:#d6d3c0}
.settings-row select{padding:5px 6px;font-size:13px;background:#1d241e;color:#e7e3d7;border:1px solid #9d906066;border-radius:3px}
.settings-row input[type=range]{width:100%;margin:0;accent-color:#c0ab70;background:none;padding:0;border:0}
.settings-row b{min-width:38px;text-align:right;font:12px 'Segoe UI';color:#d2c387}
.settings-presets{display:flex;gap:6px;flex-wrap:wrap}
.settings-preset{padding:7px 10px;font-size:12px}
.settings-preset.active{border-color:#c0ab70;background:#3c4636;color:#f2e4ad}
.settings-reset{align-self:flex-start;margin-top:6px;padding:7px 10px;font-size:12px}
.settings-note,.settings-foot{margin:0;font-size:12px;color:#a9ac98}
.settings-windows{display:grid;gap:2px}
@media(max-width:600px){.settings-panel{top:64px;left:8px;right:8px;width:auto;max-height:calc(100dvh - 80px)}.settings-row{grid-template-columns:110px 1fr auto}}