@font-face{font-family:"IM Fell English";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/im-fell-english-regular.woff2") format("woff2")}
@font-face{font-family:"IM Fell English";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/im-fell-english-italic.woff2") format("woff2")}
:root{
--ink:#eadfc4; --gold:#e3b95d; --bronze:#8c6a3a; --bronze-hi:#c49a55;
--panel-a:rgba(38,31,25,.90); --panel-b:rgba(20,17,14,.92);
--red:#b8423a; --green:#6b9a4a; --blue:#4a7aa8;
--font:"IM Fell English", "Palatino Linotype", Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#161a14;color:var(--ink);font-family:var(--font);font-size:15px;user-select:none;-webkit-user-select:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
#game.c-attack{cursor:url("data:image/svg+xml;utf8,") 4 28, crosshair}
#game.c-interact{cursor:url("data:image/svg+xml;utf8,") 16 16, pointer}
.hidden{display:none !important}
.panel{
background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
border:2px solid var(--bronze);
border-radius:5px;
box-shadow:0 0 0 1px #000, inset 0 0 0 1px rgba(255,220,150,.12), inset 0 0 24px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.5);
text-shadow:1px 1px 0 #000, 0 0 6px rgba(0,0,0,.6);
}
.btn{
font-family:var(--font);font-size:15px;color:var(--ink);cursor:pointer;
background:linear-gradient(180deg,#5b4630,#3a2c1d);
border:2px solid var(--bronze);border-radius:4px;padding:5px 14px;
text-shadow:1px 1px 0 #000;box-shadow:inset 0 1px 0 rgba(255,230,170,.25),0 2px 4px rgba(0,0,0,.5);
}
.btn:hover{border-color:var(--bronze-hi);background:linear-gradient(180deg,#6d5538,#473621);color:#fff3d4}
.btn:active{transform:translateY(1px)}
.btn.big{font-size:19px;padding:9px 22px;width:100%;margin-top:6px}
.btn:disabled{opacity:.5;cursor:default}
.err{color:#ff8a7a;min-height:1.3em;margin-top:8px;font-size:14px;text-align:center}
.hint{color:#b9aa88;font-size:13px;line-height:1.55;margin-top:10px;text-align:center}
.hint.small{font-size:12px;margin-top:6px}
.hint b{color:var(--gold);font-weight:normal}
/* login */
#login{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,92vw);padding:24px 26px 20px;z-index:20;
background:linear-gradient(180deg,rgba(46,37,28,.94),rgba(18,15,12,.95))}
#login h1{margin:0;text-align:center;font-weight:normal;font-size:46px;letter-spacing:3px;color:var(--gold);text-shadow:0 2px 0 #000,0 0 18px rgba(227,185,93,.35)}
#login .sub{margin:2px 0 16px;text-align:center;font-style:italic;color:#b9aa88}
#login label{display:block;margin-bottom:10px;color:#cdbd98;font-size:14px}
#login input{display:block;width:100%;margin-top:4px;font:inherit;font-size:17px;color:var(--ink);padding:7px 9px;background:rgba(0,0,0,.45);border:1px solid #6b5230;border-radius:3px;outline:none;user-select:text;-webkit-user-select:text}
#login input:focus{border-color:var(--gold);box-shadow:0 0 6px rgba(227,185,93,.35)}
/* hud */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud > *{pointer-events:auto}
#plate{position:absolute;left:12px;top:12px;width:236px;padding:8px 10px}
#target{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:230px;padding:7px 10px;border-color:#8a4038}
.row{display:flex;justify-content:space-between;align-items:baseline;font-size:16px}
.row.small{font-size:13px;color:var(--gold);margin-top:5px}
#hud-level,#t-level{color:var(--gold);font-size:14px}
.bar{position:relative;height:15px;margin-top:5px;background:#0d0b09;border:1px solid #000;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 4px #000}
.bar .fill{height:100%;width:100%;transition:width .18s ease-out}
.bar.hp .fill{background:linear-gradient(180deg,#d0564a,#8c2a24)}
.bar.xp{height:9px}
.bar.xp .fill{background:linear-gradient(180deg,#8cbcdc,#3e6f98);width:0}
#target .bar.hp .fill{background:linear-gradient(180deg,#d98a3a,#9a4e1a)}
.bar span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:14px;color:#fff;text-shadow:1px 1px 0 #000}
.bar.xp span{display:none}
.bar.xp .rest{position:absolute;top:0;bottom:0;left:0;width:0;background:repeating-linear-gradient(90deg,rgba(150,210,255,.55) 0 4px,rgba(150,210,255,.3) 4px 6px);transition:width .18s ease-out,left .18s ease-out}
#minimap-wrap{position:absolute;right:12px;top:12px;width:176px;text-align:center}
#minimap{width:168px;height:168px;border-radius:50%;border:3px solid var(--bronze);box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.6),inset 0 0 20px rgba(0,0,0,.6);background:#0b0d0a;display:block;margin:0 auto}
#minimap{cursor:pointer}
#btn-map{margin-top:5px;padding:1px 8px;font-size:13px}
#btn-map kbd{margin-left:4px;padding:0 3px;border:1px solid rgba(227,185,93,.4);border-radius:2px;font:11px var(--font);color:var(--gold)}
#quests{max-height:calc(100vh - 420px);overflow-y:auto;scrollbar-width:thin;margin-top:10px;text-align:left;padding:7px 9px;background:rgba(14,11,9,.62);border:1px solid rgba(140,106,58,.55);border-radius:4px;font-size:13px;line-height:1.35;text-shadow:1px 1px 0 #000}
#quests .qn{color:var(--gold);font-weight:600}
#quests .qs{color:#e8dcc0}
#quests .done{color:#9bb86a}
#quests .qi{color:#cfc3a6;font-size:12px;padding-left:6px}
#inv-grid .slot.cd{filter:grayscale(1);opacity:.55;position:relative}
#inv-grid .slot .cdt{position:absolute;left:2px;top:1px;font-size:11px;color:#fff;text-shadow:1px 1px 0 #000}
#zone-name{margin-top:5px;font-size:14px;color:var(--gold);text-shadow:1px 1px 0 #000,0 0 6px #000}
/* full-area map: terrain detail complements the circular, rotating minimap */
#world-map-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,6,5,.78);backdrop-filter:blur(3px)}
#world-map-panel{width:min(1180px,96vw);height:min(820px,94vh);display:flex;flex-direction:column;padding:12px 14px 9px;background:linear-gradient(180deg,rgba(38,31,25,.98),rgba(13,12,10,.98))}
.wm-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:1px 4px 10px;border-bottom:1px solid rgba(196,154,85,.36)}
.wm-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#aa9163}
.wm-head h2{margin:0;font-size:27px;line-height:1.08;font-weight:normal;color:var(--gold)}
#world-map-subtitle{margin-top:3px;color:#b9aa88;font-size:13px}
.wm-head .x{flex:none}
.wm-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px;padding:12px 0 8px}
.wm-tabs{display:flex;gap:4px;margin-left:auto}
.wm-tab{padding:5px 12px;font:14px var(--font);color:#c9b88f;background:rgba(0,0,0,.35);border:1px solid rgba(140,106,58,.55);border-radius:3px;cursor:pointer}
.wm-tab.on{color:#1b1409;background:linear-gradient(180deg,#e3c37a,#b98f45);border-color:#e3c37a}
.wm-tab:focus-visible{outline:2px solid #fff1c2;outline-offset:1px}
#atlas-frame{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid rgba(140,106,58,.64);border-radius:4px;background:#0d0c09;box-shadow:inset 0 0 32px rgba(0,0,0,.8)}
#atlas-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.atlas-zoom{position:absolute;right:8px;top:8px;display:flex;gap:4px}
.atlas-zoom .btn{min-width:30px;padding:4px 8px;font-size:14px;background:rgba(20,15,10,.82)}
.wm-key.town{background:#f3e2b6;border-radius:2px}.wm-key.waystone{background:#8fd0ff;transform:rotate(45deg);border-radius:1px}.wm-key.gate{background:#c8a8e0;border-radius:6px 6px 1px 1px}
#atlas-side{min-height:0;display:flex;flex-direction:column;gap:7px;padding:1px 2px 0 0}
#atlas-search{width:100%;padding:6px 8px;color:var(--ink);font:14px var(--font);background:rgba(0,0,0,.42);border:1px solid rgba(140,106,58,.65);border-radius:3px;outline:none;user-select:text;-webkit-user-select:text}
#atlas-search:focus{border-color:var(--gold);box-shadow:0 0 6px rgba(227,185,93,.25)}
#atlas-zones{flex:1;min-height:48px;overflow:auto;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
#atlas-detail{font-size:12px;line-height:1.35;color:#c9bc9d}
.atlas-line{margin:0 0 4px}.atlas-line b{color:#e3c37a;font-weight:normal}
.wm-key.road{background:#d6b06c;border-radius:0;height:3px;align-self:center}
.wm-key.ferry{background:repeating-linear-gradient(90deg,#78bee6 0 5px,transparent 5px 8px);border-radius:0;height:3px;align-self:center}
.wm-key.coach{background:repeating-linear-gradient(90deg,#f0ce78 0 2px,transparent 2px 5px);border-radius:0;height:3px;align-self:center}
#world-map-frame{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(140,106,58,.64);border-radius:4px;background:radial-gradient(ellipse at center,#1d2119,#0a0b09 78%);box-shadow:inset 0 0 32px rgba(0,0,0,.8)}
#world-map-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#world-map-side{min-height:0;display:flex;flex-direction:column;gap:7px;padding:1px 2px 0 0}
.wm-readout{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 9px;background:rgba(0,0,0,.3);border:1px solid rgba(140,106,58,.4);border-radius:4px}
.wm-readout span{color:#aa9875;font-size:12px}
.wm-readout b{color:#e8d6ac;font-weight:normal;text-align:right}
.wm-readout small{grid-column:1/-1;color:#b9aa88;font-size:12px}
.wm-search-label{color:var(--gold);font-size:13px}
#world-map-search{width:100%;padding:6px 8px;color:var(--ink);font:14px var(--font);background:rgba(0,0,0,.42);border:1px solid rgba(140,106,58,.65);border-radius:3px;outline:none;user-select:text;-webkit-user-select:text}
#world-map-search:focus{border-color:var(--gold);box-shadow:0 0 6px rgba(227,185,93,.25)}
#world-map-places{flex:1;min-height:48px;overflow:auto;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
.wm-place{display:flex;width:100%;gap:8px;align-items:center;padding:5px 7px;margin:2px 0;text-align:left;color:var(--ink);font:13px var(--font);background:rgba(0,0,0,.18);border:1px solid rgba(140,106,58,.27);border-radius:3px;cursor:pointer}
.wm-place:hover,.wm-place.selected{border-color:var(--bronze-hi);background:rgba(115,83,40,.26)}
.wm-place-dot{flex:none;width:9px;height:9px;border:1px solid #140f0a;border-radius:50%;background:var(--map-mark,#d5b05d);box-shadow:0 0 4px color-mix(in srgb,var(--map-mark,#d5b05d) 55%,transparent)}
.wm-place-copy{min-width:0;display:flex;flex-direction:column}
.wm-place-copy b{font-weight:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-place-copy small{font-size:11px;color:#a99a7b}
.wm-empty{padding:8px 4px;color:#a99a7b;font-size:13px;font-style:italic}
.wm-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;padding:7px 3px;border-top:1px solid rgba(140,106,58,.3);border-bottom:1px solid rgba(140,106,58,.3);font-size:11px;color:#c7b895}
.wm-legend span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.wm-key{display:inline-block;flex:none;width:9px;height:9px;border:1px solid #160f08;border-radius:50%;background:#fff}
.wm-key.player{background:#fff}
.wm-key.quest{background:#e8d08a}
.wm-key.qoffer{width:13px;height:13px;background:#1a120a;border:1.5px solid #ffd75a;color:#ffd75a;font:bold 9px/11px Georgia,serif;text-align:center;font-style:normal}
.wm-key.qarea{width:12px;height:12px;background:rgba(255,215,90,.18);border:1.5px dashed #ffd75a}
.wm-key.service{background:#ffd75a}
.wm-key.exit{background:#b99cff}
#world-map-selection{min-height:32px;color:#c9bc9d;font-size:12px;line-height:1.25}
#world-map-go{width:100%;padding:5px 8px}
.wm-foot{padding:5px 3px 1px;border-top:1px solid rgba(196,154,85,.3);color:#aa9875;font-size:12px;text-align:center}
.wm-foot b{color:var(--gold);font-weight:normal}
#chat{position:absolute;left:12px;bottom:12px;width:min(430px,56vw)}
#chat-log{height:150px;overflow-y:auto;padding:6px 9px;font-size:14px;line-height:1.35;background:rgba(14,11,9,.55);border:1px solid rgba(140,106,58,.55);border-bottom:none;border-radius:4px 4px 0 0;text-shadow:1px 1px 0 #000;user-select:text;-webkit-user-select:text;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
#chat-log div{margin:1px 0;word-wrap:break-word}
#chat-log{pointer-events:auto} #chat-log .clink{pointer-events:auto;cursor:pointer} /* the log scrolls with the wheel (owner 2026-10-30) */
#chat-log div.hid{display:none}
#chat-tabs{display:flex;gap:3px}
#chat-tabs button{font:inherit;font-size:12px;color:#b9aa88;background:rgba(14,11,9,.6);border:1px solid rgba(140,106,58,.5);border-bottom:none;border-radius:4px 4px 0 0;padding:1px 8px;cursor:pointer}
#chat-tabs button.on{color:#fff3d4;background:rgba(60,44,22,.8)}
#chat-log .clink{color:#e8c870;text-decoration:underline dotted}
#chat-log .clink.loc{color:#9fd0e8}
#chat-log .clink.quest{color:#f0d890}
#chat-log .k-local{color:#d6dccb}
#chat-log .k-raid{color:#f0a060}
#chat-log .k-guild{color:#8fe08f}
#chat-log .k-officer{color:#5fc08f}
#chat-log .k-alliance{color:#a0e0c0}
#chat-log .k-city{color:#e8c890}
#chat-log .k-religion{color:#d8b0ff}
#chat-log .k-college{color:#90c8ff}
.k-say{color:#efe6d0}.k-whisper{color:#d9a0ff;font-style:italic}.k-trade{color:#ffb050}.k-lfg{color:#9fd6a0}.k-help{color:#9ad0e8}.k-system{color:#8ec5ff}.k-npc{color:#f4d77a;font-style:italic}
.k-error{color:#ff8a7a}
#chat-log .from{color:#fff}
#chat-input{width:100%;font:inherit;font-size:14px;color:var(--ink);padding:6px 9px;background:rgba(14,11,9,.8);border:1px solid rgba(140,106,58,.7);border-radius:0 0 4px 4px;outline:none;user-select:text;-webkit-user-select:text}
#chat-input:focus{border-color:var(--gold);background:rgba(10,8,6,.92)}
#toolbar{position:absolute;right:12px;bottom:34px;display:flex;gap:6px}
#toolbar .btn{padding:4px 8px;font-size:13px}
@media (max-width:1400px){#toolbar{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 770px)}}
/* inventory */
#inv{position:absolute;right:12px;top:230px;width:292px;padding:10px 12px 10px}
#inv .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:8px}
.x{background:none;border:none;color:#b9aa88;font-size:24px;line-height:18px;cursor:pointer;font-family:inherit}
.x:hover{color:#fff}
.equip{display:flex;gap:10px;margin-bottom:10px;align-items:flex-end}
.eq{text-align:center}
.eqlabel{font-size:11px;color:#b9aa88;margin-bottom:2px;letter-spacing:1px;text-transform:uppercase}
.goldbox{margin-left:auto;text-align:right}
#inv-gold{color:var(--gold);font-size:18px}
#inv-grid{display:grid;grid-template-columns:repeat(6,40px);gap:4px;justify-content:center}
.slot{position:relative;width:40px;height:40px;background:rgba(0,0,0,.45);border:1px solid #5d4628;border-radius:3px;box-shadow:inset 0 0 6px #000;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:default;text-shadow:none}
.slot.full{cursor:pointer;border-color:#7d6032;background:rgba(60,46,28,.55)}
.slot.full:hover{border-color:var(--gold);box-shadow:inset 0 0 6px #000,0 0 6px rgba(227,185,93,.5)}
.slot .qty{position:absolute;right:2px;bottom:0;font-size:11px;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.eqslot{width:46px;height:46px;border-color:#8c6a3a}
#tooltip{position:fixed;z-index:50;pointer-events:none;padding:6px 10px;max-width:220px;font-size:14px;background:rgba(18,14,11,.96);border:1px solid var(--bronze);border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.6);text-shadow:1px 1px 0 #000}
#tooltip.over-map{z-index:75} /* quest icons on the Area Map (ui.js questMapTip) */
#tooltip .tn{font-size:16px}
#tooltip .tt{color:#a89a7a;font-size:12px;text-transform:capitalize}
.t-weapon{color:#ff9a60}.t-armor{color:#7ac0ff}.t-potion{color:#7adf8a}.t-junk{color:#b0a890}
/* fx */
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.dmg{position:absolute;transform:translate(-50%,-50%);font-size:20px;font-weight:bold;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 0 6px rgba(0,0,0,.7);white-space:nowrap;will-change:transform,opacity}
.dmg.crit{color:#ffd940;font-size:30px}
.dmg.me{color:#ff5a4a}
.dmg.other{color:#cfc8b4;font-size:16px}
.dmg.lvl{color:#ffe27a;font-size:28px;letter-spacing:2px}
#levelflash{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;background:radial-gradient(ellipse at center,rgba(255,226,130,.55),rgba(255,226,130,0) 65%)}
#levelflash.go{animation:lvl 1.4s ease-out}
@keyframes lvl{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);pointer-events:none;z-index:9;font-size:38px;letter-spacing:3px;color:var(--gold);text-shadow:0 2px 0 #000,0 0 16px rgba(0,0,0,.9);opacity:0;white-space:nowrap}
#toast.go{animation:toast 3s ease-in-out}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}15%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}
#ping{position:fixed;right:8px;bottom:6px;z-index:12;font-size:12px;color:#c8bb9a;text-shadow:1px 1px 0 #000;pointer-events:none}
#death{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(40,0,0,.35),rgba(0,0,0,.78))}
.deathbox{text-align:center;padding:26px 44px;background:rgba(14,10,8,.72);border:2px solid #6a2a24;border-radius:6px;box-shadow:0 0 40px #000}
.deathbox h2{margin:0 0 4px;font-weight:normal;font-size:40px;color:#d0584c;letter-spacing:2px;text-shadow:0 2px 0 #000}
.deathbox p{margin:0 0 14px;font-style:italic;color:#b9aa88}
#banner{position:fixed;left:50%;top:0;transform:translateX(-50%);z-index:40;display:flex;gap:14px;align-items:center;padding:10px 18px;background:rgba(70,20,16,.95);border:2px solid #b8423a;border-top:none;border-radius:0 0 6px 6px;box-shadow:0 4px 14px #000;text-shadow:1px 1px 0 #000}
@media (max-height:640px){
#chat-log{height:100px}
#minimap{width:130px;height:130px}#minimap-wrap{width:140px}
#inv{top:180px}
}
@media (max-width:760px){
#plate{width:190px}
#target{top:78px;left:12px;transform:none}
#chat{width:62vw}
#world-map-overlay{padding:7px}
#world-map-panel{width:98vw;height:96vh;padding:9px 10px 7px}
.wm-body{grid-template-columns:minmax(0,1fr) 230px;gap:8px}
}
@media (max-width:560px){
.wm-head h2{font-size:23px}
.wm-body{grid-template-columns:minmax(0,1fr) 190px;gap:6px}
.wm-legend{grid-template-columns:1fr;font-size:10px;gap:2px}
.wm-place{padding:4px 5px;font-size:12px}
.wm-readout{padding:5px 6px}
.wm-foot{font-size:10px}
}
@media (max-width:420px){
.wm-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,31vh) minmax(220px,1fr)}
#world-map-side,#atlas-side{display:flex;overflow:auto}
#wm-world.wm-body{grid-template-rows:minmax(300px,50vh) minmax(200px,1fr)} /* the world schematic needs the height */
#world-map-places{max-height:none;min-height:44px}
#world-map-go{flex:none}
.wm-legend{grid-template-columns:repeat(2,1fr)}
.wm-foot{display:none}
}
@media (max-height:520px){
#world-map-panel{height:98vh;padding-top:5px}
.wm-head{padding-bottom:4px}
.wm-head h2{font-size:20px}
.wm-body{padding:6px 0 4px}
.wm-foot{padding-top:3px}
}
/* ===== Paths: mana, hotbar, casts, buffs ===== */
.bar.mp{height:12px;margin-top:4px}
.bar.mp .fill{background:linear-gradient(180deg,#6aa0e0,#2e5496);width:100%}
.bar.mp span{font-size:11px;line-height:11px}
#hud-level{white-space:nowrap}
.buffrow{display:flex;flex-wrap:wrap;gap:3px;min-height:0}
.buffrow:empty{display:none}
#buffs{position:absolute;left:12px;top:132px;width:236px}
#target .buffrow{margin-top:6px;justify-content:center}
.buff{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;border-radius:3px;
background:rgba(14,11,9,.85);border:2px solid var(--bc,#6b9a4a);box-shadow:0 0 0 1px #000,inset 0 0 6px rgba(0,0,0,.7);cursor:help;text-shadow:none}
.buff.bad{border-style:solid;box-shadow:0 0 0 1px #000,inset 0 0 8px rgba(160,30,20,.55)}
.buff.good{box-shadow:0 0 0 1px #000,inset 0 0 8px rgba(80,150,60,.35)}
.buff .bt{position:absolute;right:-1px;bottom:-5px;font-size:10px;line-height:10px;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;pointer-events:none}
.buff.fading{animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}
#barwrap{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none !important}
#barwrap > *{pointer-events:auto}
#hotbar,.hotbar-x{display:flex;gap:4px;padding:6px 7px;background:linear-gradient(180deg,rgba(40,32,25,.9),rgba(18,15,12,.92));border:2px solid var(--bronze);border-radius:5px;
box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,220,150,.12),inset 0 0 18px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.5)}
.hslot{position:relative;width:46px;height:46px;border-radius:4px;background:rgba(0,0,0,.5);border:1px solid #5d4628;box-shadow:inset 0 0 8px #000;
display:flex;align-items:center;justify-content:center;cursor:default;user-select:none}
.hslot.filled{cursor:pointer;border-color:var(--sc,#8c6a3a);background:radial-gradient(circle at 50% 40%,rgba(90,70,42,.65),rgba(20,15,10,.7));box-shadow:inset 0 0 8px #000,inset 0 0 0 1px rgba(255,230,170,.1)}
.hslot.filled:hover{box-shadow:inset 0 0 8px #000,0 0 8px var(--sc,#e3b95d);filter:brightness(1.15)}
.hslot.dropping{outline:2px dashed var(--gold);outline-offset:-2px}
.hslot .hi{font-size:26px;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.6);pointer-events:none}
.hslot .hk{position:absolute;left:3px;top:1px;font-size:11px;color:#d8c8a0;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;pointer-events:none;z-index:3}
.hslot .hcd{position:absolute;inset:0;border-radius:3px;pointer-events:none;z-index:2}
.hslot .hct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;pointer-events:none;z-index:3}
.hslot.nomana .hi{filter:saturate(.25) brightness(.65)}
.hslot.nomana::after{content:"";position:absolute;inset:0;border-radius:3px;background:rgba(40,80,190,.38);pointer-events:none;z-index:1}
.hslot.pressed{transform:translateY(2px);filter:brightness(1.4)}
.hslot.ready{animation:ready .45s ease-out}
@keyframes ready{0%{box-shadow:inset 0 0 14px rgba(255,235,170,.95),0 0 12px rgba(255,235,170,.8)}100%{box-shadow:inset 0 0 8px #000}}
.hslot.denied{animation:denied .3s}
@keyframes denied{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
#notice{height:20px;line-height:20px;font-size:16px;color:#ff9a8a;text-shadow:1px 1px 0 #000,0 0 6px #000;opacity:0;pointer-events:none !important}
#notice.go{animation:notice 1.6s ease-out}
@keyframes notice{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
.castbar{position:relative;width:270px;height:19px;background:#0d0b09;border:2px solid var(--bronze);border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px #000,0 3px 8px rgba(0,0,0,.6);--cc:#e3b95d;pointer-events:none !important}
.castbar .fill{height:100%;width:0;background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 85%,#fff),var(--cc) 55%,color-mix(in srgb,var(--cc) 60%,#000))}
.castbar .cname{position:absolute;left:0;right:0;top:0;text-align:center;font-size:13px;line-height:15px;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.castbar .ctime{position:absolute;right:6px;top:0;font-size:12px;line-height:15px;color:#e9dcb4;text-shadow:1px 1px 0 #000}
.castbar.fail .fill{background:#8c2a24}.castbar.fail{border-color:#b8423a}
.castbar.done{border-color:#9ad07a}
.castbar.mini{width:100%;height:14px;margin-top:6px;border-width:1px}
.castbar.mini .cname{font-size:11px;line-height:12px;text-align:left;padding-left:6px}
.castbar.mini .ctime{font-size:10px;line-height:12px}
#toolbar{bottom:34px}
@media (max-width:1400px){ #barwrap{left:456px;transform:none;align-items:flex-start} }
@media (max-width:980px){ .hslot{width:38px;height:38px}.hslot .hi{font-size:21px}#barwrap{left:12px;bottom:200px} }
/* tooltip additions */
#tooltip .tx{text-transform:none}
#tooltip .tm{color:#cdbd98;font-size:12px;margin:3px 0}
#tooltip .td{color:#eadfc4;font-size:13px;line-height:1.35;margin-top:3px}
#tooltip{max-width:260px}
/* floating text */
.dmg.heal{color:#7bf08a;font-size:22px}
.dmg.absorb{color:#aab4c4;font-size:15px;font-style:italic;letter-spacing:1px}
/* ===== skill book / trainer ===== */
#book{position:fixed;right:316px;top:205px;width:520px;max-height:calc(100vh - 305px);display:flex;flex-direction:column;padding:10px 12px 8px;z-index:12}
#book .title,#trainer .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
#book-body{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b5230 transparent;padding-right:3px;min-height:80px}
#trainer{position:fixed;left:50%;top:calc(50% - 44px);transform:translate(-50%,-50%);width:min(700px,96vw);max-height:calc(100vh - 100px);display:flex;flex-direction:column;padding:12px 16px 12px;z-index:25;pointer-events:auto;border-color:var(--pc,#8c6a3a)}
#trainer-body{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b5230 transparent;padding-right:4px}
.path-head{display:flex;gap:12px;align-items:center;padding:8px 10px;margin-bottom:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 28%,#120f0c),rgba(10,8,6,.5));border-left:5px solid var(--pc)}
.path-sigil{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:#120f0c;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pc) 60%,#fff),var(--pc));border:2px solid #000;box-shadow:0 0 12px var(--pc);text-shadow:none}
.path-title{font-size:18px;color:color-mix(in srgb,var(--pc) 55%,#fff)}
.path-blurb{font-size:13px;color:#cdbd98;line-height:1.35;margin-top:2px}
#book .path-sigil{width:36px;height:36px;font-size:21px}
#book .path-blurb{font-size:12px}
#book .path-title{font-size:16px}
.tier{margin-bottom:8px}
.tier-head{display:flex;gap:10px;align-items:baseline;font-size:12px;color:#b9aa88;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px;border-bottom:1px solid rgba(140,106,58,.4)}
.tier-n{color:var(--gold)}
.tier-c{margin-left:auto;color:#d9a0ff;letter-spacing:0}
.tier-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tier-grid.one{grid-template-columns:1fr}
#book .tier-grid.one{grid-template-columns:1fr}
.tier-grid .or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#2a2118;border:1px solid var(--bronze);color:var(--gold);font-size:11px;line-height:20px;text-align:center;z-index:2;text-shadow:none}
.sk{position:relative;display:flex;gap:8px;padding:6px 8px;border-radius:4px;background:rgba(0,0,0,.35);border:1px solid #4d3b24;min-width:0}
.sk-ic{flex:none;width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:22px;background:radial-gradient(circle,rgba(70,54,34,.9),rgba(14,10,7,.9));border:2px solid var(--sc);box-shadow:inset 0 0 6px #000;text-shadow:none}
.sk-body{min-width:0;flex:1;display:flex;flex-direction:column}
.sk-name{font-size:14px;color:#fff3d4;line-height:1.15}
.sk-meta{font-size:10.5px;color:#a89a7a;line-height:1.25;margin-top:1px}
.sk-desc{font-size:12px;color:#d6caa8;line-height:1.3;margin:3px 0 4px}
.sk-tag{position:absolute;right:6px;top:4px;font-size:10px;color:#a89a7a;text-align:right;max-width:80px}
.sk.learned{border-color:var(--sc);background:linear-gradient(180deg,rgba(60,48,30,.65),rgba(20,15,10,.55))}
.sk.learned .sk-tag{color:#9fe08a}
.sk.available{border-color:#8c6a3a}
.sk.locked{opacity:.55;filter:saturate(.45)}
.sk.preview.locked{opacity:.78;filter:saturate(.7)}
.sk.preview{padding:5px 8px}
#book .sk.learned{cursor:grab}
#book .sk.learned:hover{box-shadow:0 0 8px var(--sc)}
.sk-top{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:20px}
.sk-foot{display:flex;justify-content:flex-end;font-size:12px;white-space:nowrap}
.sk-known{color:#9fe08a}.sk-lock{color:#a89a7a;font-style:italic}
.btn.learn{padding:1px 9px;font-size:12px;line-height:18px}
.btn.learn.poor{color:#ff9a8a}
.btn.armed{border-color:#ff9a6a;background:linear-gradient(180deg,#8a4a2a,#5a2c18);color:#fff}
.btn.swear{margin-top:4px}
.path-head.compact .path-blurb{display:none}
.path-head.compact{padding:5px 10px;margin-bottom:5px}
.tr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.tr-stat{background:rgba(0,0,0,.35);border:1px solid #4d3b24;border-radius:4px;padding:4px 8px;text-align:center}
.tr-stat .k{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#b9aa88}
.tr-stat .v{font-size:15px;color:var(--gold)}
.tr-sub{font-size:13px;color:#b9aa88;letter-spacing:1px;text-transform:uppercase;margin:6px 0 4px}
.tr-bar{display:flex;justify-content:space-between;font-size:14px;color:#cdbd98;margin:0 2px 6px}
.tr-bar .gold{color:var(--gold)}
.tr-foot{margin-top:8px;position:sticky;bottom:-1px;padding:6px 0 2px;background:linear-gradient(180deg,rgba(20,17,14,0),rgba(20,17,14,.96) 22%)}
.tr-foot.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tr-foot.lap-foot{position:static;background:none}
.tr-warn{font-size:12px;color:#b9aa88;font-style:italic}
.tr-line{color:#cdbd98;font-size:14px;line-height:1.4}
/* routes to Dedication (paths_ui.js renderDedRoutes) */
.ded-routes{margin:4px 0 6px}
.ded-route{border:1px solid rgba(185,170,136,.25);border-radius:6px;padding:5px 8px;margin-top:5px;background:rgba(0,0,0,.18)}
.ded-route.open{border-color:rgba(214,178,94,.6)}
.ded-rh{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ded-rn{color:#e6d6b0;font-size:14px}
.ded-rs{color:#b9aa88;font-size:12px;white-space:nowrap}
.ded-route.open .ded-rs{color:#d6b25e}
.pres .pi-ded{font-style:italic}
/* Phase 8/9: Lineage and Rekindling rows (not sticky like .tr-foot) */
.lin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:4px 0}
.lin-row .tr-warn{flex:1 1 60%;min-width:0}
.lin-row select{background:#221d18;color:#e6d8b8;border:1px solid #5a4a36;border-radius:4px;padding:2px 4px;max-width:100%}
.lin-list{margin:2px 0 6px 18px;padding:0;color:#cdbd98;font-size:13px;line-height:1.4}
.tr-sub{margin-top:12px}
@media (max-height:760px){ .sk-desc{font-size:11.5px;margin:2px 0 3px}.sk{padding:5px 7px}.path-head{padding:5px 8px;margin-bottom:5px}.tier{margin-bottom:5px} }
@media (max-width:1100px){ #book{right:12px;top:80px;max-height:calc(100vh - 190px)} }
/* ===== Faith: shrines, faith tab, invocation ===== */
#dtoasts{position:fixed;left:30%;bottom:150px;transform:translateX(-50%);z-index:11;pointer-events:none;display:flex;flex-direction:column-reverse;align-items:center;gap:4px}
.dtoast{display:flex;align-items:baseline;gap:7px;padding:3px 14px 4px;border-radius:14px;background:linear-gradient(90deg,transparent,rgba(16,12,9,.78) 18%,rgba(16,12,9,.78) 82%,transparent);
border-bottom:1px solid color-mix(in srgb,var(--gc) 55%,transparent);animation:dtoast 2.8s ease-out forwards;white-space:nowrap;text-shadow:1px 1px 0 #000,0 0 8px #000}
.dtoast .di{font-size:17px;filter:drop-shadow(0 0 5px var(--gc))}
.dtoast .dt{font-size:19px;color:color-mix(in srgb,var(--gc) 55%,#fff)}
.dtoast .dr{font-size:13px;color:#cdbd98;font-style:italic}
@keyframes dtoast{0%{opacity:0;transform:translateY(12px) scale(.94)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
.hslot.invoke{margin-left:8px;border-color:var(--sc,#e3b95d);box-shadow:inset 0 0 8px #000,0 0 0 1px #000,0 0 10px color-mix(in srgb,var(--sc,#e3b95d) 45%,transparent)}
.hslot.invoke::before{content:"";position:absolute;left:-7px;top:6px;bottom:6px;width:1px;background:rgba(196,154,85,.5)}
.hslot.invoke.filled{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--sc) 35%,#3a2c1d),rgba(20,15,10,.8))}
.hslot.invoke .hi{filter:drop-shadow(0 0 5px var(--sc))}
.buff.bless{box-shadow:0 0 0 1px #000,inset 0 0 8px color-mix(in srgb,var(--bc) 50%,transparent),0 0 7px color-mix(in srgb,var(--bc) 60%,transparent)}
.sigil{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;line-height:1;text-shadow:none;
background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 55%,#fff),color-mix(in srgb,var(--gc) 85%,#000) 70%);border:2px solid #000;box-shadow:0 0 12px color-mix(in srgb,var(--gc) 70%,transparent),inset 0 -3px 6px rgba(0,0,0,.35)}
.sigil.big{width:54px;height:54px;font-size:30px}
#shrine,#faith{--gc:#c9b88a;border-color:var(--gc)}
#shrine .title,#faith .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:color-mix(in srgb,var(--gc) 55%,#fff);margin-bottom:6px}
#shrine{position:fixed;left:min(calc(50% + 30px),calc(100vw - 452px));top:190px;width:min(440px,96vw);max-height:calc(100vh - 250px);display:flex;flex-direction:column;padding:11px 15px 12px;z-index:25;pointer-events:auto}
#shrine-body,#faith-body{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b5230 transparent;padding-right:4px;min-height:0}
#faith{position:fixed;right:316px;top:92px;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 230px);display:flex;flex-direction:column;padding:10px 14px 8px;z-index:12;pointer-events:auto}
@media (max-width:1100px){ #faith{right:12px;top:80px;max-height:calc(100vh - 190px)} }
.sh-head{display:flex;gap:12px;align-items:center;padding:8px 10px;margin-bottom:8px;border-radius:4px;border-left:5px solid var(--gc);background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 26%,#120f0c),rgba(10,8,6,.5))}
.sh-epi{font-size:16px;color:color-mix(in srgb,var(--gc) 50%,#fff);font-style:italic;min-height:1em}
.sh-dom{font-size:13px;color:#cdbd98}
.ft-name{font-size:18px;color:color-mix(in srgb,var(--gc) 50%,#fff)}
.sh-blurb{font-size:13.5px;color:#d6caa8;line-height:1.4;margin:0 2px 8px}
.sh-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.sh-chip{display:inline-flex;gap:6px;align-items:baseline;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.4);border:1px solid color-mix(in srgb,var(--cc) 60%,#000);font-size:12px}
.sh-chip .ck{color:#a89a7a;text-transform:uppercase;letter-spacing:.8px;font-size:10.5px}
.sh-chip .cv{color:color-mix(in srgb,var(--cc) 45%,#fff)}
.sh-stand{margin:0 2px 8px;font-size:14px}
.sh-stand .ok{color:#9fe08a}.sh-stand .bad{color:#ff9a8a}.sh-stand .dim,.dim{color:#a89a7a;font-style:italic}
.sh-rite{margin:0 0 9px;padding:7px 10px;border-radius:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 24%,#1a140f),rgba(12,9,7,.8));border:1px solid var(--gc);box-shadow:0 0 12px color-mix(in srgb,var(--gc) 40%,transparent)}
.sh-rite.done{border-color:#9ad07a}.sh-rite.failed{border-color:#b8423a;filter:saturate(.6)}
.rt-title{font-size:15px;color:color-mix(in srgb,var(--gc) 45%,#fff);margin-bottom:3px}
.rt-row{display:flex;justify-content:space-between;font-size:13px;color:#cdbd98}
.rt-count{color:#fff;font-size:17px;font-variant-numeric:tabular-nums}
.rt-bar{height:7px;margin:5px 0 6px;background:#0d0b09;border:1px solid #000;border-radius:3px;overflow:hidden}
.rt-fill{height:100%;width:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 70%,#fff),var(--gc))}
.rt-list{display:flex;flex-wrap:wrap;gap:4px}
.rt-p{padding:1px 8px;border-radius:9px;font-size:12.5px;background:rgba(0,0,0,.45);border:1px solid #5d4628;color:#eadfc4}
.rt-p.lead{border-color:var(--gc);color:color-mix(in srgb,var(--gc) 40%,#fff)}
.rt-p.lead::before{content:"\2605 ";color:var(--gc)}
.rt-p.me{background:rgba(70,56,30,.7)}
.sh-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:2px}
.sh-act{display:flex;flex-direction:column;gap:3px}
.sh-act .btn{width:100%;padding:6px 8px}
.sh-act .btn.big{margin-top:0}
.sh-acts .btn.pledge{grid-column:1/-1}
.sh-acts .sh-act:has(.pledge){grid-column:1/-1}
.sh-acts .sh-note{grid-column:1/-1}
.btn.pray:not(:disabled),.btn.rite:not(:disabled){border-color:var(--gc);background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 40%,#3a2c1d),color-mix(in srgb,var(--gc) 22%,#2a1f14))}
.btn.pledge:not(:disabled){border-color:var(--gc);background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 50%,#3a2c1d),color-mix(in srgb,var(--gc) 25%,#2a1f14));color:#fff}
.sh-why{font-size:11.5px;color:#a89a7a;font-style:italic;line-height:1.25;text-align:center}
.sh-note{font-size:12px;color:#b9aa88;font-style:italic;margin:5px 2px 0;line-height:1.35}
.sh-foot{margin-top:10px;text-align:right}
.btn.small{padding:2px 10px;font-size:12.5px}
.btn.renounce{color:#d9a398}
.btn.renounce:hover{color:#fff}
.of-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.of-title{font-size:16px;color:color-mix(in srgb,var(--gc) 50%,#fff)}
.of-tabs{display:flex;gap:2px;margin-bottom:8px;border-bottom:1px solid rgba(140,106,58,.5)}
.of-tab{font:inherit;font-size:14px;color:#a89a7a;background:none;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;padding:3px 16px;cursor:pointer;text-shadow:1px 1px 0 #000}
.of-tab.on{color:#fff3d4;background:rgba(80,62,38,.6);border-color:rgba(140,106,58,.7)}
.of-grid{display:grid;grid-template-columns:repeat(8,40px);gap:4px;justify-content:center;margin-bottom:8px;max-height:132px;overflow-y:auto;padding:2px;scrollbar-width:thin}
.of-grid .slot.sel{border-color:var(--gc);box-shadow:inset 0 0 6px #000,0 0 9px var(--gc)}
.of-detail{padding:8px 10px;border-radius:4px;background:rgba(0,0,0,.32);border:1px solid #4d3b24;display:flex;flex-direction:column;gap:7px}
.of-name{display:flex;align-items:center;gap:8px;font-size:15px;color:#fff3d4}
.of-ic{font-size:22px}
.of-step{display:flex;align-items:center;gap:8px}
.of-qty{min-width:42px;text-align:center;font-size:16px;color:var(--gold)}
.of-est{font-size:12.5px;color:#b9aa88;font-style:italic}
.of-detail .btn.big{margin-top:0;font-size:16px;padding:6px 14px;border-color:var(--gc)}
.of-gold{display:flex;gap:6px;align-items:center}
.of-gold input{width:84px;font:inherit;font-size:16px;color:var(--ink);padding:4px 7px;background:rgba(0,0,0,.5);border:1px solid #6b5230;border-radius:3px;outline:none;user-select:text;-webkit-user-select:text}
.of-gold input:focus{border-color:var(--gold)}
.ft-intro{margin-bottom:8px}
.ft-line{font-size:18px;color:var(--gold);margin-bottom:2px}
.ft-lock{margin-top:5px;font-size:13px;color:#ff9a8a;font-style:italic}
.ft-six{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.god-card{padding:7px 9px;border-radius:4px;border:1px solid color-mix(in srgb,var(--gc) 55%,#000);border-left:4px solid var(--gc);background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 14%,#17120e),rgba(12,9,7,.7))}
.gc-top{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.god-card .sigil{width:34px;height:34px;font-size:19px}
.gc-name{font-size:14.5px;color:color-mix(in srgb,var(--gc) 45%,#fff);line-height:1.15}
.gc-dom{font-size:11.5px;color:#a89a7a;font-style:italic}
.gc-blurb{font-size:12px;color:#d6caa8;line-height:1.32;margin-bottom:4px}
.gc-meta{font-size:11.5px;color:#cdbd98;line-height:1.35}
.gc-meta b{color:#a89a7a;font-weight:normal}
@media (max-width:640px){ .ft-six{grid-template-columns:1fr} }
.ft-rank{display:flex;justify-content:space-between;align-items:baseline;margin:2px 2px 3px}
.rk-name{font-size:20px;color:color-mix(in srgb,var(--gc) 50%,#fff)}
.rk-dev{font-size:13px;color:#cdbd98}
.ft-bar{height:13px;background:#0d0b09;border:1px solid #000;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 4px #000}
.ft-fill{height:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 65%,#fff),var(--gc) 55%,color-mix(in srgb,var(--gc) 55%,#000));transition:width .3s}
.ft-ladder{display:flex;justify-content:space-between;margin:4px 0 9px;font-size:11px;color:#756a52}
.ft-ladder .pip.past{color:#a89a7a}.ft-ladder .pip.on{color:color-mix(in srgb,var(--gc) 45%,#fff);text-decoration:underline}
.ft-rows{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.ft-row{display:flex;justify-content:space-between;gap:12px;padding:3px 8px;background:rgba(0,0,0,.3);border:1px solid #3d2f1d;border-radius:3px;font-size:14px}
.ft-row .k{color:#a89a7a;text-transform:uppercase;letter-spacing:1px;font-size:11.5px;line-height:20px}
.ft-row .v{color:#eadfc4;text-align:right}
.ft-row .v.ready{color:#9fe08a}
.ft-inv{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 20%,#16100c),rgba(12,9,7,.7));border:1px solid color-mix(in srgb,var(--gc) 60%,#000)}
.inv-ic{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:27px;border-radius:5px;border:2px solid var(--gc);background:radial-gradient(circle,rgba(70,54,34,.9),rgba(14,10,7,.9));box-shadow:0 0 10px color-mix(in srgb,var(--gc) 50%,transparent);text-shadow:none}
.inv-tx{flex:1;min-width:0}
.inv-name{font-size:16px;color:color-mix(in srgb,var(--gc) 45%,#fff)}
.inv-desc{font-size:12px;color:#cdbd98;line-height:1.3}
.invoke-btn{flex:none;min-width:116px;border-color:var(--gc)}
.invoke-btn:not(:disabled){background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 50%,#3a2c1d),color-mix(in srgb,var(--gc) 25%,#2a1f14));color:#fff}
.ft-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:6px;border-top:1px solid rgba(140,106,58,.35)}
.dtoast.neg .dt{color:#d9a398}
.ft-titles{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 8px;margin-bottom:6px;font-size:14px}
.ft-titles .k{color:#a89a7a;text-transform:uppercase;letter-spacing:1px;font-size:11.5px}
.ft-titles select{background:#1c150e;color:#eadfc4;border:1px solid #3d2f1d;border-radius:3px;font:inherit;padding:2px 4px}
.ft-hist{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;font-size:13px;color:#cdbd98}
/* v0.5 Character panel: attributes, passive slots */
.attr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin:6px 0}
.attr{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid rgba(201,184,138,.25);border-radius:6px;background:rgba(0,0,0,.18)}
.attr .k{font-weight:700;width:34px;color:#e8d9b0}
.attr .v{min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.attr .v.pend{color:#9fe08a}
.btn.tiny{padding:0 7px;min-width:24px;line-height:20px;font-size:14px}
.pas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 10px}
.pas-slot{display:flex;align-items:center;gap:6px;min-height:38px;padding:4px 8px;border:1px dashed rgba(201,184,138,.4);border-radius:6px;color:#a8987a;cursor:default}
.pas-slot.filled{border-style:solid;color:#efe2c2;cursor:pointer;background:rgba(0,0,0,.2)}
.pas-slot .ic{font-size:18px}
.sk.passive .sk-meta{color:#9fd0a8}
#downed{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:30;text-align:center;min-width:280px}
#downed .big{font:600 26px "IM Fell English",Georgia,serif;color:#f0b8a0;margin-bottom:4px}
#services .offer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0}
#charselect{max-width:560px}
#charselect .char{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(201,184,138,.3);border-radius:8px;margin:6px 0;background:rgba(0,0,0,.2)}
#charselect .char .meta{color:#b8a888;font-size:13px}
#charselect .bodies{display:flex;gap:8px;margin:6px 0}
#charselect .bodies label{display:flex;align-items:center;gap:6px;cursor:pointer}
#charselect{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:90vh;overflow:auto;padding:22px 24px 18px;z-index:20}
#charselect h1{margin:0;text-align:center;font-weight:normal;font-size:32px;color:var(--gold);text-shadow:0 2px 0 #000}
#charselect h3{margin:14px 0 8px;font-weight:normal;color:var(--gold)}
#charselect .sub{text-align:center;font-style:italic;color:#b9aa88}
#charselect label{display:block;margin-bottom:8px;color:#cdbd98;font-size:14px}
#charselect input[type=text]{display:block;width:100%;margin-top:4px;font:inherit;font-size:17px;color:var(--ink);padding:7px 9px;background:rgba(0,0,0,.45);border:1px solid #6b5230;border-radius:3px;outline:none;user-select:text;-webkit-user-select:text}
#charselect .bodies label{display:inline-flex;margin:0 14px 0 0}
#charselect .err{color:#f08a7a;min-height:18px;margin-top:6px}
#charselect .hint{font-size:13px;color:#9a8a6a;margin-top:6px}
#services{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,92vw);max-height:min(640px,82vh);overflow:auto;z-index:15;padding:10px 14px}
/* ---- Phase 2: class resource bar, 12 equipment slots, derived-stat breakdown, combat text ---- */
.bar.res{height:10px;margin-top:4px}
.bar.res .fill{background:var(--rc,#c0603a);width:0}
.bar.res span{font-size:10px;line-height:10px}
.bar.res.hidden{display:none}
.equip{align-items:flex-start}
.equip-grid{display:grid;grid-template-columns:repeat(4,44px);gap:3px}
.equip-grid .eq{display:flex;flex-direction:column;align-items:center}
.equip-grid .eqlabel{font-size:8px;letter-spacing:.5px;margin-bottom:1px;white-space:nowrap}
.equip-grid .eqslot{width:38px;height:38px;font-size:20px}
.equip-grid .eqslot.inert{filter:grayscale(1);opacity:.5;border-color:#a33}
.equip-grid .eqslot.ph{font-size:10px;color:#6d5c40}
.eq-side{display:flex;flex-direction:column;gap:6px;margin-left:auto;align-items:flex-end}
.eq-access{font-size:10px;color:#b9aa88;text-align:right;max-width:70px}
.tt.stat{color:#cfe0b0}
.tt.bad{color:#ff8a7a}
.dmg.miss{color:#c9c2b0;font-size:15px;font-style:italic}
.dmg.blocked::after{content:' (block)';font-size:11px;color:#aab4c4}
.dmg.status{color:#9fd0ff;font-size:15px;font-style:italic}
.derived{display:flex;flex-direction:column;gap:2px;margin:6px 0}
.drow{border:1px solid #3b2e1c;border-radius:3px;background:rgba(0,0,0,.25);cursor:pointer}
.drow .dh{display:flex;justify-content:space-between;padding:3px 6px;font-size:13px}
.drow .dh .dv{color:#eadfc4}
.drow .dsrc{display:none;padding:2px 10px 5px;font-size:11px;color:#b9aa88}
.drow.open .dsrc{display:block}
.drow .dsrc div{display:flex;justify-content:space-between}
.drow .dnote{font-style:italic;margin-top:3px;color:#8f826a}
/* ---- Phase 3: clock, region line, region banner, Journal, dialogue, Waystones ---- */
#region-name{font-size:13px;color:#e8dcc0;min-height:0;text-shadow:1px 1px 0 #000,0 0 6px #000}
#region-name:empty{display:none}
#clock{margin-top:2px;font-size:12px;color:#c8bb9a;letter-spacing:.5px;text-shadow:1px 1px 0 #000,0 0 6px #000}
#weather{margin-top:1px;font-size:11px;color:#c3d0cc;text-shadow:1px 1px 0 #000,0 0 6px #000}
#weather:empty{display:none}
#region-banner{position:fixed;left:50%;top:30%;transform:translateX(-50%);pointer-events:none;z-index:9;text-align:center;opacity:0;white-space:nowrap}
#region-banner .rb-s{font-size:15px;letter-spacing:4px;text-transform:uppercase;color:#cdbd98;text-shadow:0 2px 0 #000,0 0 10px #000}
#region-banner .rb-t{font-size:30px;letter-spacing:2px;color:var(--gold);text-shadow:0 2px 0 #000,0 0 16px rgba(0,0,0,.9)}
#region-banner.go{animation:toast 3.4s ease-in-out}
#journal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,94vw);max-height:min(620px,86vh);display:flex;flex-direction:column;padding:12px 16px;z-index:24}
#journal .title,#dialogue .title,#waystones .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
#journal .tabs{display:flex;gap:6px;margin-bottom:8px}
#journal .tabs button{flex:1;font:inherit;font-size:14px;color:#cdbd98;background:rgba(0,0,0,.3);border:1px solid #6b5230;border-radius:3px;padding:4px 0;cursor:pointer}
#journal .tabs button.on{color:#fff3d4;border-color:var(--gold);background:rgba(120,90,40,.35)}
#journal-body{overflow:auto;padding-right:4px;min-height:120px}
#journal h4{margin:10px 0 4px;font-weight:normal;color:var(--gold);font-size:15px;border-bottom:1px solid rgba(140,106,58,.45)}
#journal .jempty{color:#9a8a6a;font-style:italic;font-size:13px;margin:4px 0}
#journal .jq{padding:6px 8px;margin:6px 0;background:rgba(0,0,0,.25);border:1px solid rgba(140,106,58,.35);border-radius:4px}
#journal .jq.done{opacity:.85}
#journal .jqn{color:#efe2c2;font-size:15px}
#journal .jqp{float:right;margin-top:-18px;font-size:12px;color:#9bb86a}
#journal .jqs{font-size:13px;color:#cfc3a6;margin-top:3px;line-height:1.35}
#journal .jqstep{font-size:13px;color:var(--gold);margin-top:3px}
#journal .jqc{margin:4px 0 0 16px;padding:0;font-size:12px;color:#b9aa88}
#journal .jz{color:#efe2c2;font-size:14px;margin-top:6px}
#journal .jl{margin:2px 0 4px 16px;padding:0;font-size:13px;color:#cfc3a6;line-height:1.45}
#journal .jd,#waystones .jd{color:#8f8062;font-size:12px;margin-left:8px}
#journal .jh{font-size:13px;color:#cfc3a6;margin:4px 0}
#dialogue{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);width:min(560px,94vw);padding:10px 16px 12px;z-index:22}
#dialogue-text{font-size:16px;line-height:1.45;color:#efe2c2;margin-bottom:8px}
#dialogue-choices{display:flex;flex-direction:column;gap:5px}
.dchoice{display:flex;align-items:baseline;gap:8px;text-align:left;font:inherit;font-size:15px;color:var(--ink);background:rgba(0,0,0,.3);border:1px solid #6b5230;border-radius:3px;padding:5px 9px;cursor:pointer}
.dchoice:hover{border-color:var(--gold);background:rgba(120,90,40,.3);color:#fff3d4}
.dchoice .dn{color:#8f8062;font-size:13px}
.dchoice .dt{font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:1px 5px;border-radius:2px;min-width:52px;text-align:center}
.dchoice.t-decision .dt{background:#6a3a24;color:#ffd8b0}
.dchoice.t-information .dt{background:#2c4a5c;color:#cfe6f5}
.dchoice.t-expression .dt{background:#3c4a2c;color:#dcefc0}
#waystones{position:fixed;right:18px;top:120px;width:min(380px,92vw);z-index:15;padding:10px 14px}
#waystones .offer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0}
/* ---- Phase 4: item model, Bank / Vault, vendors, crafting, professions, meal ---- */
.row.small.meal{color:#b9d98a;font-size:12px;margin-top:2px;cursor:help}
#inv .title .tbtns{display:flex;align-items:center;gap:6px}
.slot.r-fine{border-color:#5f9a4a;box-shadow:inset 0 0 6px #000,0 0 0 1px rgba(110,190,90,.35)}
.slot.r-superior{border-color:#4a7ac0;box-shadow:inset 0 0 6px #000,0 0 0 1px rgba(90,140,230,.4)}
.slot.r-rare{border-color:#9a5ac8;box-shadow:inset 0 0 6px #000,0 0 0 1px rgba(170,110,230,.45)}
.slot.r-low::after{content:'';position:absolute;inset:0;background:rgba(160,30,20,.28);border-radius:2px;pointer-events:none}
.slot .mark{position:absolute;left:1px;top:-1px;font-size:10px;line-height:12px;color:#ffd75a;text-shadow:1px 1px 0 #000}
#tooltip{max-width:260px}
#tooltip .tn.r-fine,.r-fine{color:#8fd46e}
#tooltip .tn.r-superior,.r-superior{color:#7fb0ff}
#tooltip .tn.r-rare,.r-rare{color:#c98cff}
#tooltip .tt.rar{text-transform:none}
#tooltip .tt.prov{color:#d8c79a;font-style:italic;text-transform:none}
#tooltip .tt.good{color:#9fd08a;text-transform:none}
#tooltip .tt.bad,#tooltip .tt.hintline{text-transform:none}
#tooltip .tt.hintline{color:#8f826a;margin-top:3px}
.t-meal{color:#e8c070}.t-tool{color:#c0b090}.t-material{color:#c8b48a}
#bank,#shop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;padding:10px 14px} /* centred (owner 2026-10-28: the vendor window covered the HUD) */
#bank{width:min(392px,94vw)}
#shop{width:min(360px,94vw);max-height:min(640px,82vh);display:flex;flex-direction:column}
#bank .title,#shop .title,#craft .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
.eco-sub{color:var(--gold);font-size:14px;margin:8px 0 4px;border-bottom:1px solid rgba(140,106,58,.45);display:flex;justify-content:space-between;align-items:baseline}
.eco-note{color:#9a8a6a;font-size:12px;font-style:italic}
.eco-empty{color:#9a8a6a;font-style:italic;font-size:12px;margin:4px 0}
.eco-grid{display:grid;grid-template-columns:repeat(8,40px);gap:4px;justify-content:center}
.eco-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.eco-gold{margin-left:auto;color:#cdbd98;font-size:13px}.eco-gold b{color:var(--gold);font-weight:normal;font-size:16px}
#vault-list{max-height:132px;overflow:auto;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
.vrow,.srow{display:flex;align-items:center;gap:8px;padding:2px 4px;border-radius:3px;font-size:14px}
.vrow:hover,.srow:hover{background:rgba(120,90,40,.22)}
.vrow .vi,.srow .si{width:24px;text-align:center;font-size:18px;text-shadow:none}
.vrow .vn,.srow .sn{flex:1;color:#efe2c2}
.vrow .vq{color:#cdbd98;font-variant-numeric:tabular-nums}
.srow .sm{color:#9a8a6a;font-size:12px;min-width:34px;text-align:right}
.srow .sm.bad{color:#ff8a7a}
.srow .btn.tiny,.vrow .btn.tiny{min-width:48px}
#shop-stock{overflow:auto;max-height:340px;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
#shop-buyback{max-height:110px;overflow:auto}
#craft{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:min(640px,88vh);display:flex;flex-direction:column;padding:12px 16px;z-index:23}
#craft-station{margin-bottom:6px}
#craft .tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
#craft .tabs button{flex:1 1 0;min-width:84px;font:inherit;font-size:13px;color:#cdbd98;background:rgba(0,0,0,.3);border:1px solid #6b5230;border-radius:3px;padding:3px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.15}
#craft .tabs button .ct-s{font-size:10px;color:#9a8a6a}
#craft .tabs button.on{color:#fff3d4;border-color:var(--gold);background:rgba(120,90,40,.35)}
#craft-list{overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
.crec{padding:6px 8px;margin:5px 0;background:rgba(0,0,0,.25);border:1px solid rgba(140,106,58,.35);border-radius:4px}
.crec.locked{opacity:.6}
.cr-head{display:flex;align-items:center;gap:8px}
.cr-out{font-size:22px;width:30px;text-align:center;text-shadow:none;cursor:help}
.cr-name{flex:1;color:#efe2c2;font-size:15px}
.cr-req{font-size:11px;color:#9a8a6a;text-transform:uppercase;letter-spacing:1px}
.cr-mats{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 4px 38px;font-size:12px;color:#cfe0b0}
.cr-mat.short{color:#ff8a7a}
.cr-foot{display:flex;align-items:center;gap:6px;margin-left:38px}
.cr-st{flex:1;font-size:11px;color:#8f8062;font-style:italic}
.cr-n{width:48px;font:inherit;font-size:13px;color:var(--ink);background:rgba(0,0,0,.45);border:1px solid #6b5230;border-radius:3px;padding:1px 4px;user-select:text;-webkit-user-select:text}
.book-tabs{display:flex;gap:6px;margin-bottom:8px}
.book-tabs button{flex:1;font:inherit;font-size:14px;color:#cdbd98;background:rgba(0,0,0,.3);border:1px solid #6b5230;border-radius:3px;padding:4px 0;cursor:pointer}
.book-tabs button.on{color:#fff3d4;border-color:var(--gold);background:rgba(120,90,40,.35)}
.prof-list{display:flex;flex-direction:column;gap:3px;margin:4px 0 8px}
.prof-row{display:grid;grid-template-columns:24px 1fr auto;grid-template-rows:auto 5px;column-gap:8px;align-items:center;padding:3px 6px;border:1px solid #3b2e1c;border-radius:3px;background:rgba(0,0,0,.25)}
.prof-row.muted{opacity:.6}
.prof-ic{grid-row:1 / span 2;font-size:17px;text-align:center;text-shadow:none}
.prof-n{color:#efe2c2;font-size:14px}
.prof-r{color:var(--gold);font-size:12px}
.prof-bar{grid-column:2 / span 2;height:4px;background:#0d0b09;border-radius:2px;overflow:hidden}
.prof-fill{height:100%;background:linear-gradient(90deg,#8c6a3a,#e3b95d)}
#tooltip .tt.ml{text-transform:none}
#craft .tabs{flex-wrap:nowrap}
#craft .tabs button{min-width:0;font-size:12px;padding:3px 2px}
#craft .tabs button .ct-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ---- Phase 5: groups. Party frame, invites, Group Finder, instance entry/HUD, boss frame, wipe summary ---- */
.k-party{color:#8fe3c4}
.k-party .from{color:#c4f5e2}
#t-actions{margin-top:6px;text-align:center}
#t-actions .btn{line-height:18px;font-size:13px;padding:1px 10px}
/* role / crown glyphs (inline SVG, colour via currentColor) */
.gico{display:inline-block;width:14px;height:14px;vertical-align:-2px}
.gico svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 1px 0 #000)}
.role-tank{color:#7fb4ff}.role-healer{color:#8fe08a}.role-dps{color:#ff9a6a}
#party{position:absolute;left:12px;top:196px;width:236px;padding:6px 8px 7px;max-height:calc(100vh - 430px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
.pt-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid rgba(140,106,58,.45)}
.pt-title{flex:1;font-size:15px;color:var(--gold)}
.pt-title small{color:#b9aa88;font-size:12px;margin-left:4px}
.btn.mini{padding:0 8px;font-size:12px;line-height:18px;border-width:1px;border-radius:3px}
.btn.mini.on{border-color:var(--gold);background:linear-gradient(180deg,#7a5f30,#4d3a1c);color:#fff3d4}
.btn.mini.warn{color:#e8b0a0}
.pm{display:grid;grid-template-columns:18px 1fr;gap:5px;padding:3px 4px 3px 3px;margin:2px 0;border-radius:3px;border:1px solid transparent;background:rgba(0,0,0,.22);cursor:pointer}
.pm:hover{border-color:rgba(196,154,85,.7);background:rgba(70,54,30,.4)}
.pm.sel{border-color:#ffd75a}
.pm.me{background:rgba(60,50,28,.45)}
.pm.off{opacity:.55}
.pm.dead .pm-name{text-decoration:line-through;text-decoration-color:rgba(255,120,100,.8)}
.pm-role{padding-top:2px}
.pm-main{min-width:0}
.pm-top{display:flex;align-items:center;gap:4px;font-size:14px;line-height:16px}
.pm-top .gico{width:12px;height:12px;color:#ffd75a;flex:none}
.pm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-lv{font-size:12px;color:var(--gold)}
.pm-mn{background:none;border:none;color:#b9aa88;font-size:15px;line-height:12px;cursor:pointer;padding:0 2px;font-family:inherit}
.pm-mn:hover{color:#fff}
.pm .bar{height:11px;margin-top:2px}
.pm .bar span{font-size:10px;line-height:10px}
.pm .bar.hp .fill{background:linear-gradient(180deg,#6cc05a,#3a7a30)}
.pm.low .bar.hp .fill{background:linear-gradient(180deg,#d98a3a,#9a4e1a)}
.pm.crit .bar.hp .fill{background:linear-gradient(180deg,#d0564a,#8c2a24)}
.pm-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.pm-tags:empty{display:none}
.tg{font-size:10.5px;line-height:13px;padding:0 5px;border-radius:7px;background:rgba(0,0,0,.45);border:1px solid #5d4628;color:#cdbd98;white-space:nowrap}
.tg.sync{border-color:#6aa0e0;color:#bcd8ff}
.tg.jt{border-color:#e3b95d;color:#ffe2a0}
.tg.bad{border-color:#b8423a;color:#ffb0a0}
.tg.ok{border-color:#6b9a4a;color:#b8e8a0}
.tg.dim{color:#9a8a6a}
.pt-note{margin:4px 1px 0;font-size:12px;color:#cdbd98;line-height:1.3}
.pt-note.vote{color:#ffd8b0}
.pt-note b{color:var(--gold);font-weight:normal}
.pt-foot{margin-top:6px;padding-top:4px;border-top:1px solid rgba(140,106,58,.35)}
.pt-foot .lab{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#9a8a6a;margin-bottom:2px}
.pt-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pt-roles .btn{justify-content:center;padding:0 2px}
.pt-tog{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.pt-tog .btn{padding:0 2px;font-size:11.5px}
.rolebtn{display:inline-flex;align-items:center;gap:3px}
.rolebtn .gico{width:12px;height:12px}
.btn.rolebtn:disabled{opacity:.35}
/* member / player menu */
#gmenu{position:fixed;z-index:60;min-width:170px;padding:4px;display:flex;flex-direction:column;gap:1px}
#gmenu .mh{padding:2px 8px 3px;font-size:13px;color:var(--gold);border-bottom:1px solid rgba(140,106,58,.45);margin-bottom:2px}
#gmenu button{text-align:left;font:inherit;font-size:14px;color:var(--ink);background:none;border:none;border-radius:3px;padding:3px 8px;cursor:pointer;text-shadow:1px 1px 0 #000}
#gmenu button:hover{background:rgba(120,90,40,.45);color:#fff3d4}
#gmenu button.dim{color:#9a8a6a}
/* popups: invites, ready check, votes, join requests */
#gpops{position:absolute;left:50%;top:108px;transform:translateX(-50%);width:min(320px,92vw);display:flex;flex-direction:column;gap:6px;z-index:31;pointer-events:none !important}
#gpops > *{pointer-events:auto}
.gpop{padding:8px 11px 9px;border-color:#c49a55;animation:gpin .22s ease-out}
@keyframes gpin{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
.gpop .gp-t{font-size:16px;color:var(--gold);margin-bottom:2px}
.gpop .gp-b{font-size:14px;color:#e8dcc0;line-height:1.35}
.gpop .gp-b i{color:#b9aa88}
.gpop .gp-r{display:flex;gap:6px;margin-top:7px;align-items:center}
.gpop .gp-r .btn{flex:1;padding:3px 8px;font-size:14px}
.gpop .gp-r .gp-s{flex:none;font-size:12px;color:#b9aa88;min-width:30px;text-align:right}
.gpop .gp-bar{height:3px;margin-top:6px;background:#0d0b09;border-radius:2px;overflow:hidden}
.gpop .gp-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8c6a3a,#e3b95d)}
.gpop.ready{border-color:#9ad07a}.gpop.vote{border-color:#c8785a}
.btn.yes{border-color:#6b9a4a;background:linear-gradient(180deg,#4a6a36,#2c4220)}
.btn.yes:hover{border-color:#9ad07a;background:linear-gradient(180deg,#5a7e44,#37512a)}
.btn.no{border-color:#8a4038;background:linear-gradient(180deg,#6a3028,#43201a)}
.btn.no:hover{border-color:#c8685a;background:linear-gradient(180deg,#7e3a30,#522a22)}
/* Group Finder */
#gf{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:min(660px,88vh);display:flex;flex-direction:column;padding:12px 16px;z-index:24}
#gf .title,#instentry .title,#wipe .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
.gf-filter{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.gf-filter button{font:inherit;font-size:13px;color:#cdbd98;background:rgba(0,0,0,.3);border:1px solid #6b5230;border-radius:11px;padding:1px 10px;cursor:pointer}
.gf-filter button.on{color:#fff3d4;border-color:var(--gold);background:rgba(120,90,40,.35)}
#gf-list{overflow:auto;min-height:96px;max-height:290px;padding-right:4px;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
.gfrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:6px 8px;margin:4px 0;background:rgba(0,0,0,.25);border:1px solid rgba(140,106,58,.35);border-radius:4px}
.gfrow.mine{border-color:var(--gold)}
.gf-n{font-size:15px;color:#efe2c2}
.gf-n small{font-size:12px;color:var(--gold);margin-left:6px}
.gf-n .kind{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#9a8a6a;margin-left:6px}
.gf-a{font-size:13px;color:#b8d4f0;grid-column:1}
.gf-note{font-size:12.5px;color:#cfc3a6;font-style:italic;grid-column:1}
.gf-roles{display:inline-flex;gap:3px;align-items:center;margin-left:8px;vertical-align:middle}
.gf-roles .gico{width:13px;height:13px}
.gfrow .btn{grid-column:2;grid-row:1 / span 2;padding:2px 10px;font-size:13px}
.gf-age{font-size:11px;color:#8f8062;margin-left:6px}
.gf-form{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;margin-top:4px;font-size:14px;color:#cdbd98}
.gf-form select,.gf-form input[type=text]{width:100%;font:inherit;font-size:14px;color:var(--ink);background:rgba(0,0,0,.45);border:1px solid #6b5230;border-radius:3px;padding:3px 6px;outline:none;user-select:text;-webkit-user-select:text}
.gf-form select{background:#1c150e}
.gf-form select:focus,.gf-form input:focus{border-color:var(--gold)}
.gf-form .roles{display:flex;gap:10px}
.gf-form .roles label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.gf-form .acts{grid-column:1 / span 2;display:flex;gap:8px;justify-content:flex-end}
/* instance entry */
#instentry{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(500px,94vw);max-height:90vh;overflow:auto;padding:12px 16px 14px;z-index:24;scrollbar-width:thin;scrollbar-color:#6b5230 transparent}
.ie-sub{font-size:13px;color:#b9aa88;font-style:italic;margin-bottom:6px}
.ie-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ie-diffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;margin:6px 0 8px}
.ie-diff{text-align:left;font:inherit;color:var(--ink);background:rgba(0,0,0,.32);border:1px solid #5d4628;border-radius:4px;padding:6px 8px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.ie-diff:hover:not(:disabled){border-color:var(--bronze-hi)}
.ie-diff.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(120,90,40,.4),rgba(40,30,16,.5));box-shadow:0 0 8px rgba(227,185,93,.25)}
.ie-diff:disabled{opacity:.5;cursor:default}
.ie-diff .dn{font-size:16px;color:#fff3d4}
.ie-diff .dl{font-size:12px;color:#b8d4f0}
.ie-diff .dx{font-size:11.5px;color:#b9aa88;line-height:1.3}
.ie-diff .dx.bad{color:#ff9a8a}
.ie-run{padding:6px 9px;margin:6px 0;border-radius:4px;background:rgba(40,60,40,.35);border:1px solid #4a6a36;font-size:13.5px;color:#d6e8c4;line-height:1.4}
.ie-note{font-size:13px;color:#cdbd98;line-height:1.4;margin:6px 1px}
.ie-note.warn{color:#ffc8a0}
.ie-acts{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}
.ie-acts .btn{padding:5px 18px}
.ie-acts .btn.big{width:auto;margin:0;font-size:17px;padding:6px 26px}
/* instance HUD (inside the minimap column) */
#insthud{margin-top:8px;text-align:left;padding:7px 9px;background:rgba(14,11,9,.7);border:1px solid rgba(196,154,85,.7);border-radius:4px;font-size:13px;line-height:1.35;text-shadow:1px 1px 0 #000}
#insthud .ih-n{color:var(--gold);font-size:15px;line-height:1.2}
#insthud .ih-n small{color:#c8d8f0;font-size:12px;margin-left:4px}
#insthud .ih-c{color:#b8e8c0;font-size:12.5px;margin-top:2px}
#insthud .ih-e{margin-top:5px;padding-top:4px;border-top:1px solid rgba(140,106,58,.4)}
#insthud .ih-b{color:#ffb0a0;font-size:14px}
#insthud .ih-p{color:#cdbd98;font-size:12px;font-style:italic}
#insthud .ih-r{color:#e8dcc0;font-size:12px}
#insthud .ih-r .low{color:#ff9a8a}
#insthud .ih-x{margin-top:6px;display:flex;gap:5px;align-items:center}
#insthud .ih-x span{font-size:12px;color:#ffd8b0;flex:1}
/* boss frame, cast bar and Break Meter */
#bossframe{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:min(460px,56vw);padding:6px 14px 8px;border-color:#a8483e}
.bf-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bf-name{font-size:20px;color:#ffd0c0;letter-spacing:.5px}
.bf-phase{font-size:12.5px;color:#cdbd98;font-style:italic;white-space:nowrap}
.bf-hp{position:relative;height:17px;margin-top:3px;background:#0d0b09;border:1px solid #000;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 4px #000}
.bf-hp .fill{height:100%;background:linear-gradient(180deg,#d9604a,#8c2a24);transition:width .15s}
.bf-hp span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:16px;color:#fff;text-shadow:1px 1px 0 #000}
.bf-brk{position:relative;height:12px;margin-top:4px;background:#0d0b09;border:1px solid #000;border-radius:3px;overflow:hidden}
.bf-brk .fill{height:100%;width:0;background:linear-gradient(180deg,#7f9cc0,#44628a);transition:width .12s}
.bf-brk span{position:absolute;inset:0;text-align:center;font-size:10.5px;line-height:11px;letter-spacing:1.2px;text-transform:uppercase;color:#dfe8f2;text-shadow:1px 1px 0 #000}
.bf-brk.broken{border-color:#ffd75a;box-shadow:0 0 8px rgba(255,215,90,.6)}
.bf-brk.broken .fill{background:linear-gradient(180deg,#e0a838,#a8701a)}
.bf-cast{position:relative;height:21px;margin-top:5px;background:#0d0b09;border:2px solid var(--bronze);border-radius:4px;overflow:hidden;--cc:#7fc4ff;box-shadow:0 0 0 1px #000}
.bf-cast .fill{height:100%;width:0;background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 85%,#fff),var(--cc) 55%,color-mix(in srgb,var(--cc) 55%,#000))}
.bf-cast .cn{position:absolute;left:8px;top:0;line-height:17px;font-size:13px;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.bf-cast .cl{position:absolute;right:8px;top:0;line-height:17px;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.bf-cast.Interruptible{--cc:#7fc4ff;border-color:#7fc4ff}
.bf-cast.BreakCast{--cc:#ffb030;border-color:#ffb030}
.bf-cast.Unstoppable{--cc:#e04a3a;border-color:#e04a3a}
.bf-cast.end-ok .fill{filter:brightness(1.4)}
.bf-cast.end-fail{border-color:#9ad07a}
.bf-cast.end-fail .fill{background:#4a6a36}
.dmg.break{color:#c8dcf0;font-size:16px;font-style:italic;letter-spacing:.5px}
/* wipe summary: calm, no names */
#wipe{position:fixed;left:50%;top:70px;transform:translateX(-50%);width:min(440px,94vw);padding:12px 18px 14px;z-index:32;border-color:#7a6a4a}
#death.wipe-shift .deathbox{transform:translateY(210px)}
#ctoasts{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:11;pointer-events:none;display:flex;flex-direction:column-reverse;align-items:center;gap:4px}
#wipe .title{color:#e8dcc0}
.wp-sub{font-size:14px;font-style:italic;color:#b9aa88;margin-bottom:8px}
.wp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.wp-stat{background:rgba(0,0,0,.35);border:1px solid #4d3b24;border-radius:4px;padding:4px 6px;text-align:center}
.wp-stat .k{display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#b9aa88}
.wp-stat .v{font-size:17px;color:var(--gold)}
.wp-tips{margin:4px 0 0 18px;padding:0;font-size:14px;color:#e0d4b4;line-height:1.45}
.wp-h{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#9a8a6a;margin:8px 0 2px}
.wp-act{display:flex;justify-content:flex-end;margin-top:10px}
/* codex toast + Journal Codex */
.dtoast.codex{max-width:min(520px,92vw);white-space:normal;align-items:flex-start;border-radius:6px;padding:5px 14px 6px;animation-duration:6s}
.dtoast.codex .dt{font-size:16px}
.dtoast.codex .dr{display:block;font-size:12.5px;margin-top:1px}
#journal .cx-b{color:#efe2c2;font-size:15px;margin-top:8px}
#journal .cx-e{padding:5px 8px;margin:4px 0;background:rgba(0,0,0,.25);border:1px solid rgba(140,106,58,.35);border-radius:4px}
#journal .cx-n{color:#efe2c2;font-size:14px}
#journal .cx-l{margin-left:8px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;padding:0 6px;border-radius:7px;border:1px solid #5d4628;color:#cdbd98}
#journal .cx-l.Cone,#journal .cx-l.cone,#journal .cx-l.ground{color:#ffb0a0;border-color:#b8423a}
#journal .cx-t{font-size:12.5px;color:#cfc3a6;line-height:1.4;margin-top:2px}
@media (max-width:1100px){ #party{top:200px} }
@media (max-height:700px){ #party{max-height:calc(100vh - 330px)} }
/* ---- Phase 6: First-20 quest line, Bestiary, creature casts ---- */
#quests .qb{margin-left:6px;font-size:10px;font-weight:400;color:#bfae86;text-transform:uppercase;letter-spacing:.05em}
#quests .qo{color:#d8cdb2;font-size:12px;padding-left:8px}
#quests .qo.done{color:#9bb86a;text-decoration:line-through;opacity:.8}
#quests .qo i{color:#a8957a;font-style:normal}
#quests .qmore{color:#a8957a;font-size:11px;margin-top:3px}
#journal .jqb{margin-left:8px;font-size:11px;color:#bfae86;font-weight:400}
#journal ul.jqo{margin:4px 0 4px 16px;padding:0;font-size:12px;color:#d8cdb2}
#journal ul.jqo li.done{color:#9bb86a;text-decoration:line-through}
#journal .jqx{margin-top:5px}
#journal li.later{color:#9b8f78}
.dchoice.qtag .dq{margin-left:auto;font-weight:700;color:#e8e2c8;padding-left:8px}
.dchoice.qtag .dq.new{color:#ffd75a}
.bx-f{border-bottom:1px solid rgba(140,106,58,.35);padding:7px 2px 8px}
.bx-n{color:var(--gold);font-weight:600;font-size:14px}
.bx-r{margin-left:8px;font-size:11px;font-weight:400;padding:1px 6px;border-radius:3px;background:#3a2e20;color:#d8c8a0}
.bx-r.r-encountered{background:#2e3a24;color:#cfe3a8}.bx-r.r-studied{background:#24323a;color:#a8d8ef}.bx-r.r-known{background:#3a2440;color:#e3c8f0}
.bx-m{color:#cfc3a6;font-size:12px;margin:2px 0}
.bx-t{color:#d8cdb2;font-size:12px;margin:2px 0}
.bx-role,.bx-ab{color:#d8cdb2;font-size:12px;margin:2px 0}
.bx-role b,.bx-ab b{color:#e8dcc0}
.bx-ab .cx-l{margin:0 4px}
.bx-rare{color:#ffcf5a;font-size:12px;margin:2px 0}
.bx-lore{color:#b8a888;font-style:italic;font-size:12px;margin-top:3px}
.bx-next{color:#9b8f78;font-size:11px;margin-top:3px}
/* Phase 7: Social window (Legend, Chronicle, institutions) */
#social{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:min(640px,86vh);display:flex;flex-direction:column;padding:12px 16px;z-index:24}
#social .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
#social .tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
#social .tabs button{flex:1;min-width:64px;font:inherit;font-size:13px;color:#cdbd98;background:rgba(0,0,0,.3);border:1px solid #6b5230;border-radius:3px;padding:4px 0;cursor:pointer}
#social .tabs button.on{color:#fff3d4;border-color:var(--gold);background:rgba(120,90,40,.35)}
#social-body{overflow:auto;padding-right:4px;min-height:140px}
#social h4{margin:10px 0 4px;font-weight:normal;color:var(--gold);font-size:15px;border-bottom:1px solid rgba(140,106,58,.45)}
#social .jempty{color:#9a8a6a;font-style:italic;font-size:13px;margin:4px 0}
#social .jq{padding:6px 8px;margin:6px 0;background:rgba(0,0,0,.25);border:1px solid rgba(140,106,58,.35);border-radius:4px}
#social .jqn{color:#efe2c2;font-size:14px;line-height:1.35}
/* Pets tab (client/pets_ui.js) */
#social .pet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
#social .pet-card{margin:0}
#social .pet-card.on{border-color:rgba(230,190,110,.8);box-shadow:0 0 0 1px rgba(230,190,110,.35) inset}
#social .pet-card.off{opacity:.55}
#social .pet-head{display:flex;gap:8px;align-items:center}
#social .pet-thumb{width:64px;height:64px;flex:0 0 64px;display:flex;align-items:flex-end;justify-content:center;font-size:30px;background:rgba(255,240,200,.05);border-radius:4px}
#social .pet-thumb canvas{max-width:64px;max-height:64px;image-rendering:pixelated}
#social .pet-desc{margin:4px 0}
#social .jqs{font-size:13px;color:#cfc3a6;margin-top:3px;line-height:1.35}
#social .sl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
#social .sl-name{font-size:17px;color:#fff3d4}
#social .sl-ids{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
#social .sl-id{font-size:12px;color:#d9c79c;border:1px solid rgba(140,106,58,.5);border-radius:10px;padding:1px 8px;background:rgba(0,0,0,.25)}
#social .sl-wd{font-size:13px;color:var(--gold);display:flex;justify-content:space-between;gap:8px}
#social .sl-k{font-size:11px;color:#9a8a6a}
#social .sl-note{font-size:13px;color:#b9c9e0;font-style:italic;margin-top:3px}
#social .sl-e.priv{opacity:.65}
#social .sl-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:4px}
#social .sl-id-t{font-size:10px;color:#6f6450;margin-left:auto}
#social .sl-ta,#social input.sl-in,#social select.sl-in{width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:#efe2c2;background:rgba(0,0,0,.4);border:1px solid #6b5230;border-radius:3px;padding:4px;margin-top:4px}
#social .sl-ta{min-height:54px;resize:vertical}
#social .sl-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px;color:#cfc3a6}
#social .sl-grid b{color:#efe2c2;font-weight:normal}
#social .jq.unread{border-color:var(--gold)}
#social .ml-body{white-space:pre-wrap;margin:4px 0}
#social .ml-att{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#social .ml-it{font-size:12px;color:#cfc3a6;border:1px solid rgba(140,106,58,.45);border-radius:3px;padding:1px 6px;cursor:pointer}
#social .ml-it.on{color:#fff3d4;border-color:var(--gold);background:rgba(120,90,40,.35)}
/* Phase 7: boards */
#board{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,94vw);max-height:min(620px,86vh);display:flex;flex-direction:column;padding:12px 16px;z-index:25}
#board .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:4px}
#board-body{overflow:auto;padding-right:4px;min-height:120px}
#board .bp{padding:6px 8px;margin:6px 0;background:rgba(40,30,18,.55);border:1px solid rgba(140,106,58,.45);border-radius:2px;box-shadow:1px 2px 0 rgba(0,0,0,.35)}
#board .bp.pin{border-color:var(--gold)}
#board .bp-t{color:#fff3d4;font-size:15px}
#board .bp-m{font-size:11px;color:#9a8a6a;display:flex;justify-content:space-between;gap:8px}
#board .bp-b{font-size:13px;color:#cfc3a6;white-space:pre-wrap;margin-top:3px}
#board .bp-cat{font-size:11px;color:#d9c79c;border:1px solid rgba(140,106,58,.5);border-radius:8px;padding:0 6px;margin-right:6px}
#board .sl-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:4px}
#board input,#board textarea,#board select{width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:#efe2c2;background:rgba(0,0,0,.4);border:1px solid #6b5230;border-radius:3px;padding:4px;margin-top:4px}
#board textarea{min-height:60px}
#board h4{margin:10px 0 4px;font-weight:normal;color:var(--gold);font-size:15px;border-bottom:1px solid rgba(140,106,58,.45)}
#board .jempty{color:#9a8a6a;font-style:italic;font-size:13px;margin:4px 0}
#social .st-bar{height:6px;background:rgba(0,0,0,.45);border:1px solid rgba(140,106,58,.45);border-radius:3px;margin:3px 0}
#social .st-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6a30,#e0c070);border-radius:3px}
#social .st-bar.hostile i{background:linear-gradient(90deg,#702020,#c05040)}
/* Phase 7 guilds (§37) */
#social .tabs.sub button{min-width:54px;font-size:12px;padding:2px 0}
#social .gd-head{display:flex;gap:10px;align-items:center}
.crest{display:inline-flex;align-items:center;justify-content:center;flex:none;border:2px solid;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.crest-shield{border-radius:4px 4px 50% 50% / 4px 4px 60% 60%}
.crest-round{border-radius:50%}
.crest-banner{border-radius:2px 2px 0 0;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.crest-knot{border-radius:30%;transform:rotate(45deg)}
#social .jq.warn{border-color:#c06a4a;color:#f0c8b0}
#social .jq.done{opacity:.75}
#social .jq.pin{border-color:var(--gold)}
/* Phase 8: lineage hotbar slots (keys 7-9) */
.hslot.lin{border-style:dashed}
.hslot.lin.hidden{display:none}
/* Phase 10: lesson offer and proficiency rows */
#teachoffer{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:60;background:rgba(20,17,14,.95);border:1px solid #6a5638;border-radius:6px;padding:10px 14px;color:#e6d8b8;display:flex;gap:10px;align-items:center}
.lin-in{background:#221d18;color:#e6d8b8;border:1px solid #5a4a36;border-radius:4px;padding:2px 4px;width:7em}
.sk-foot{margin-top:4px}
.lin-row .prof-bar{flex:0 0 80px}
/* Phase 12: crafting tier chips */
#craft-tiers{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px}
#craft-tiers.hidden{display:none}
#craft-tiers .ctier{font:inherit;font-size:11px;padding:2px 7px;border-radius:9px;border:1px solid #6b5a3e;background:#2a2219;color:#d9c9a8;cursor:pointer}
#craft-tiers .ctier.on{background:#7a5a2a;color:#fff3d6;border-color:#c79a52}
#craft-tiers .ctier.locked{opacity:.55}
#craft-list .cr-later{font-size:11px;opacity:.7;text-align:center;padding:6px 0}
/* Phase 13: raid entry panel (pools and the Vault Reliquary) */
#instentry .ie-relic{margin-top:8px;border-top:1px solid #5a4a36;padding-top:6px;max-height:260px;overflow:auto}
#instentry .ie-rhead{font-size:12px;margin-bottom:6px}
#instentry .ie-rname{font-size:12px;color:#e8c890;margin:4px 0 2px}
#instentry .ie-ritems{display:flex;flex-wrap:wrap;gap:3px}
#instentry .ie-ritem{font:inherit;font-size:11px;padding:2px 6px;border-radius:4px;border:1px solid #5a4a36;background:#241d16;color:#e0d2b4;cursor:pointer}
#instentry .ie-ritem.dim{opacity:.6}
#instentry .ie-ritem:disabled{cursor:default}
/* painted item icons (client/icons.js): sit in the text where the emoji was */
img.hm-ico { width: 1.3em; height: 1.3em; vertical-align: -0.28em; display: inline-block; pointer-events: none; }
.slot img.hm-ico, .eqslot img.hm-ico { width: 82%; height: 82%; vertical-align: middle; }
/* ---------- pixel style (client/pixel.js; ?style=pixel or Shift+P): the owner's 2026-10-26 mockups ---------- */
html.style-pixel{
--ink:#e6e2d6; --gold:#e8c060; --bronze:#4a4a4e; --bronze-hi:#8a8a90;
--panel-a:rgba(24,25,28,.94); --panel-b:rgba(14,15,17,.95);
--font:"Segoe UI","Trebuchet MS","DejaVu Sans",Arial,sans-serif;
}
html.style-pixel #game{filter:contrast(1.04) saturate(1.05)}
html.style-pixel .panel{border:2px solid #3c3d42;border-radius:3px;
box-shadow:0 0 0 1px #000,inset 0 0 0 1px #5a5b60,inset 0 0 0 3px #17181b,0 6px 16px rgba(0,0,0,.6);text-shadow:1px 1px 0 #000}
html.style-pixel .btn{border:2px solid #3c3d42;border-radius:3px;background:linear-gradient(180deg,#2e2f34,#1b1c20);
box-shadow:inset 0 1px 0 #55565c,0 2px 3px rgba(0,0,0,.6);font-size:13px}
html.style-pixel .btn:hover{border-color:#8a8a90;background:linear-gradient(180deg,#3a3b41,#24252a)}
/* unit frame: portrait, name, red health, blue mana, experience */
html.style-pixel #plate{width:300px;padding:8px 10px 8px 86px;min-height:92px}
html.style-pixel #plate .px-portrait{position:absolute;left:8px;top:8px;width:68px;height:68px;border:2px solid #3c3d42;background:#0e0f11;
box-shadow:inset 0 0 0 1px #5a5b60;image-rendering:pixelated}
html.style-pixel #plate .px-lv{position:absolute;left:8px;top:76px;width:68px;text-align:center;font-size:12px;color:#e6e2d6;background:#17181b;border:2px solid #3c3d42;border-top:none}
html.style-pixel #hud-name{font-size:17px;color:#fff;font-weight:600}
html.style-pixel #hud-level{display:none}
html.style-pixel .bar{border:1px solid #000;border-radius:0;height:16px;background:#0b0b0d;box-shadow:inset 0 0 0 1px #2a2a2e}
html.style-pixel .bar.hp .fill,html.style-pixel #t-fill{background:linear-gradient(180deg,#e0453a 0,#c22a22 50%,#8e1a16 100%)}
html.style-pixel .bar.mp .fill{background:linear-gradient(180deg,#4d8ae8 0,#2a62c8 50%,#1a3f8e 100%)}
html.style-pixel .bar.xp{height:13px}
html.style-pixel .bar.xp .fill{background:linear-gradient(180deg,#d8a640,#9c6e1c)}
html.style-pixel .bar.xp span{display:block;font-size:10px;line-height:12px}
html.style-pixel .bar span{font-size:12px;font-weight:600}
/* action bar: square slots, the key number under each */
html.style-pixel #hotbar,html.style-pixel .hotbar-x{border:2px solid #3c3d42;border-radius:3px;background:linear-gradient(180deg,rgba(26,27,31,.95),rgba(14,15,17,.96));padding:6px 7px 18px;
box-shadow:0 0 0 1px #000,inset 0 0 0 1px #5a5b60,0 6px 16px rgba(0,0,0,.6)}
html.style-pixel .hslot{width:50px;height:50px;border-radius:0;border:2px solid #3c3d42;background:#0e0f11;box-shadow:inset 0 0 0 1px #000}
html.style-pixel .hslot.filled{border-color:#6a6b70;background:radial-gradient(circle at 50% 40%,#2a2b30,#111214)}
html.style-pixel .hslot .hk{left:0;right:0;top:auto;bottom:-17px;text-align:center;font-size:12px;color:#cfcac0}
/* minimap: a square map under a header with the zone name */
html.style-pixel #minimap-wrap{display:flex;flex-direction:column;align-items:stretch;width:224px}
html.style-pixel #zone-name{order:-1;margin:0;padding:4px 0;font-size:15px;color:#e6e2d6;background:linear-gradient(180deg,#26272c,#16171a);border:2px solid #3c3d42;border-bottom:none}
html.style-pixel #minimap{width:224px;height:224px;border-radius:0;border:2px solid #3c3d42;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #5a5b60}
html.style-pixel #region-name,html.style-pixel #clock,html.style-pixel #weather{font-size:12px}
/* chat: dark panel, square tabs */
html.style-pixel #chat-log{background:rgba(12,13,15,.86);border:2px solid #3c3d42;border-bottom:none;border-radius:0;font-size:14px}
html.style-pixel #chat-tabs button{border:2px solid #3c3d42;border-bottom:none;border-radius:0;background:#16171a;color:#a8a49a;padding:3px 14px;font-size:13px}
html.style-pixel #chat-tabs button.on{background:#2a2b30;color:#fff}
html.style-pixel #chat-input{border:2px solid #3c3d42;border-radius:0;background:#0e0f11}
/* the menu: square buttons */
html.style-pixel #toolbar{gap:4px;padding:5px;background:linear-gradient(180deg,rgba(26,27,31,.95),rgba(14,15,17,.96));border:2px solid #3c3d42;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #5a5b60}
html.style-pixel #toolbar{flex-wrap:nowrap;max-width:none;bottom:12px}
html.style-pixel #toolbar .btn{min-width:0;padding:9px 7px;font-size:12px}
html.style-pixel #region-banner .rb-t{font-family:var(--font)}
/* the Sound window (client/sound_ui.js) */
#sound-panel{position:absolute;right:12px;bottom:84px;width:250px;padding:8px 12px 10px;z-index:30}
#sound-panel .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--gold)}
#sound-panel .x{background:none;border:none;color:var(--ink);font-size:20px;cursor:pointer}
.snd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;font-size:14px}
.snd-row input[type=range]{width:140px;accent-color:var(--gold)}
/* Combat feel (2026-10-26): damage chip behind health bars, low-health edge pulse */
.bar .chip{position:absolute;left:0;top:0;height:100%;width:0;background:#f1dfae;opacity:.85;transition:width .45s ease-in .4s}
.bar .fill{position:relative}
body.low-hp::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 90px 20px rgba(170,20,10,.55);animation:lowhp 1.1s ease-in-out infinite}
@keyframes lowhp{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){body.low-hp::after{animation:none;opacity:.6}}
/* character creator (2026-10-28 paper doll) */
#cs-look{display:flex;gap:14px;align-items:flex-start;margin:4px 0 10px}
#cs-look .cs-stage{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
#cs-preview{width:168px;height:208px;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 80%,rgba(120,140,90,.55),rgba(30,34,24,.6) 70%);border:1px solid rgba(201,184,138,.3);border-radius:10px}
#cs-look .cs-turn{display:flex;gap:6px}
#cs-look .cs-turn .btn{padding:2px 10px;font-size:16px}
#cs-look .cs-opts{flex:1;min-width:0}
#cs-look .cs-row{display:flex;align-items:center;gap:8px;margin:7px 0}
#cs-look .cs-row>span{width:58px;color:#cdbd98;font-size:14px;flex:none}
#cs-look .cs-swatches{display:flex;flex-wrap:wrap;gap:5px}
#cs-look .cs-swatches button{width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.6);cursor:pointer;padding:0}
#cs-look .cs-swatches button.on{border-color:var(--gold,#e8c070);box-shadow:0 0 0 2px rgba(232,192,112,.4)}
#cs-look .cs-pick{display:flex;align-items:center;gap:6px}
#cs-look .cs-pick b{min-width:92px;text-align:center;font-weight:normal;color:var(--ink,#eee)}
#cs-look .cs-pick .btn{padding:1px 9px}
#cs-look .cs-try span{color:#9a8a6a}
#charselect .char .btns{display:flex;gap:6px}
@media (max-width:520px){#cs-look{flex-direction:column;align-items:center}}
#cs-look.cs-off{display:block}
#cs-look.cs-off .cs-stage,#cs-look.cs-off .cs-row{display:none}
.hotbar-x.hidden{display:none}
#barwrap > .hotbar-x{margin-bottom:-2px}
.hslot .hk{white-space:nowrap}
/* Account-scoped player ticket history in the existing report panel. */
#feedback .fb-ticket{border:1px solid #665a40;border-radius:9px;background:rgba(24,25,21,.55);padding:12px;margin:11px 0}
#feedback .fb-ticket-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#e3c78c}
#feedback .fb-ticket-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}
#feedback .fb-thread{border-left:3px solid #a68c53;padding:7px 10px;margin:7px 0;background:#302b23;white-space:pre-wrap;overflow-wrap:anywhere}
#feedback .fb-ticket textarea{width:100%;margin:8px 0}
#feedback .fb-ticket .btn{margin-right:10px}
#feedback .title .btn{font-size:12px;margin-left:auto;margin-right:12px}
#update-notice{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:41;padding:8px 16px;background:rgba(40,32,16,.95);border:1px solid #c9a65a;border-radius:10px;color:#f3e2b5;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.6);pointer-events:none}
#update-notice.hidden{display:none}
/* player trade window (trade_ui.js) */
#trade{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:16;padding:10px 14px;width:min(430px,96vw)}
#trade .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
#trade .tr-cols{display:flex;gap:12px}
#trade .tr-col{flex:1;min-width:0}
#trade .tr-grid{display:grid;grid-template-columns:repeat(4,40px);gap:4px;justify-content:center;margin:4px 0}
#trade .tr-gold{display:flex;gap:6px;align-items:center;justify-content:center;font-size:13px;margin:4px 0}
#trade .tr-gold input{width:70px}
#trade .tr-ok{color:#8fd16a;font-size:12px;margin-left:4px}
#trade .tr-qty{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px;margin-top:4px}
#trade .tr-qty input{width:52px}
#trade #trade-accept.on{border-color:#8fd16a;color:#8fd16a}
#trade.both-ok{box-shadow:0 0 0 2px rgba(143,209,106,.6)}
/* Inspect and Who (presence_ui.js) */
.pres{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:16;padding:10px 14px;width:min(400px,96vw);max-height:84vh;overflow:auto}
#who{width:min(560px,96vw)}
.pres .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
.pres .pi-head{text-align:center;margin-bottom:6px}
.pres .pi-name{font-size:20px;color:#f1e3c2}
.pres .pi-title{font-style:italic;color:var(--gold);font-size:14px}
.pres .pi-sub{font-size:13px;color:#cdbf9f}
.pi-status{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;margin-top:3px;background:rgba(255,255,255,.08);color:#d8ccb0}
.pi-status.st-lfg{background:rgba(90,150,230,.25);color:#b9d4ff}.pi-status.st-solo{background:rgba(200,160,80,.22);color:#f0d49a}
.pi-status.st-help{background:rgba(220,80,60,.3);color:#ffc0b0}.pi-status.st-grouped{background:rgba(110,190,90,.22);color:#c4ecb0}
.pi-status.st-none{background:none}
.pres .pi-gear{display:grid;grid-template-columns:repeat(6,40px);gap:4px;justify-content:center;margin:4px 0}
.pres .pi-bio{white-space:pre-wrap;font-size:13px;line-height:1.4;color:#e8dcc0;padding:4px 2px}
.pres .pi-bio-edit{width:100%;min-height:70px;box-sizing:border-box;font:inherit;font-size:13px}
.pres .pi-marks{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}.pres .pi-mark{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:rgba(0,0,0,.3);border:1px solid rgba(201,162,90,.55);border-radius:50%;cursor:help}.pres .pi-mark img{width:22px;height:22px}
.pres .pi-le{font-size:12.5px;color:#e0d4b8;margin:2px 0}.pres .pi-wd{color:#b9aa88;margin-right:6px}
.pres .pw-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.pres .pw-q{flex:1;min-width:140px}
.pres .pw-list{display:flex;flex-direction:column;gap:2px;margin:6px 0}
.pres .pw-row{display:grid;grid-template-columns:1.6fr .4fr 1fr 1.4fr 1fr;gap:6px;align-items:center;font-size:13px;padding:3px 6px;border-radius:6px;cursor:pointer}
.pres .pw-row:hover{background:rgba(227,185,93,.12)}.pres .pw-row.me{color:var(--gold)}
.pres .pw-l{text-align:right;color:#cdbf9f}.pres .pw-z{color:#b9aa88;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-lv{display:flex;align-items:center;gap:4px}.gf-num{width:52px}
.gf-caps{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px}.gf-caps .gf-num{width:38px}
.gf-ad{font-size:12px;color:#b9d4ff;margin-top:2px}
.k-emote{color:#e8c98a;font-style:italic}
/* dialogue portrait (world_ui.js) */
#dialogue-main{display:flex;gap:14px;align-items:flex-start}
#dialogue-col{flex:1;min-width:0}
#dialogue-portrait{flex:none;width:120px;height:120px;border-radius:10px;border:1px solid rgba(227,185,93,.45);background:radial-gradient(circle at 50% 40%,rgba(90,74,50,.65),rgba(20,16,10,.85));display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
#dialogue-portrait canvas,#dialogue-portrait img{max-width:112px;max-height:116px;image-rendering:pixelated}
@media (max-width:520px){#dialogue-portrait{width:72px;height:72px}#dialogue-portrait canvas,#dialogue-portrait img{max-width:68px;max-height:70px}}
/* the Market window (market_ui.js) */
#market{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:16;padding:10px 14px;width:min(620px,96vw);max-height:84vh;display:flex;flex-direction:column}
#market .title{display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--gold);margin-bottom:6px}
#market .mk-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
#market .mk-tabs button.on{color:var(--gold)}
#market .mk-body{overflow:auto;min-height:120px}
#market .mk-search{display:flex;gap:6px;margin-bottom:6px}#market .mk-search input{flex:1}
#market .mk-row{display:grid;grid-template-columns:40px 1.2fr 1.6fr .8fr auto auto;gap:6px;align-items:center;padding:3px 2px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
#market .mk-n{color:#f1e3c2}#market .mk-s{color:#b9aa88;font-size:12px}#market .mk-p{color:var(--gold);text-align:right}
#market .mk-q{width:52px}
#market .mk-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
#market .mk-form input[type=number]{width:80px}
#market .mk-mats,#market .mk-note{font-size:12.5px;color:#cdbf9f;margin:4px 0}
@media (max-width:560px){#market .mk-row{grid-template-columns:40px 1fr auto auto}#market .mk-s{display:none}}
/* the events board (presence_ui.js) */
#events{width:min(560px,96vw)}
.pres .ev-row{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:start;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
.pres .ev-row.now .ev-when{color:#8fd16a}
.pres .ev-when{color:var(--gold);font-size:13px}.pres .ev-t{color:#f1e3c2;font-size:15px}.pres .ev-s{color:#b9aa88;font-size:12px}
.pres .ev-note{font-size:12.5px;color:#e0d4b8;white-space:pre-wrap;margin:2px 0}
.pres .ev-form{display:flex;flex-direction:column;gap:5px}.pres .ev-form textarea{min-height:50px;font:inherit;font-size:13px}
.gpop.tunes .gp-r{flex-wrap:wrap}.gpop.tunes .gp-r .btn{flex:1 1 45%}
/* local world event banner (main.js, server/happenings.js) */
#happening{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:20;max-width:min(560px,70vw);padding:7px 14px;border-radius:12px;
background:linear-gradient(180deg,rgba(60,44,20,.92),rgba(30,22,12,.92));border:1px solid rgba(232,192,96,.6);color:#f1e3c2;font-size:13.5px;text-align:center;pointer-events:none}
#happening b{color:var(--gold);margin-right:6px}#happening span{color:#e8c060;margin-left:8px;white-space:nowrap}
/* Legend Marks (social_ui.js renderMarks / markToast; server/marks.js) */
#social .mk-switch{display:flex;gap:4px;margin:2px 0 6px}
#social .mk-switch button{font:inherit;font-size:12px;color:#d9c79c;background:rgba(0,0,0,.3);border:1px solid rgba(140,106,58,.5);border-radius:10px;padding:2px 10px;cursor:pointer}
#social .mk-switch button.on{color:#1d1408;background:var(--gold);border-color:var(--gold)}
#social .mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin:4px 0 8px}
#social .mk-card{position:relative;display:flex;gap:8px;align-items:flex-start;padding:6px 8px;background:rgba(0,0,0,.25);border:1px solid rgba(140,106,58,.35);border-radius:6px}
#social .mk-card.on{border-color:rgba(201,162,90,.8);background:linear-gradient(180deg,rgba(201,162,90,.14),rgba(0,0,0,.25))}
#social .mk-card.off{opacity:.55}
#social .mk-card.off .mk-i{filter:grayscale(1) brightness(.75)}
#social .mk-card.secret .mk-n{color:#b9aa88;letter-spacing:2px}
#social .mk-card.priv{opacity:.7}
#social .mk-i{flex:0 0 34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid rgba(201,162,90,.5)}
#social .mk-i img{width:28px;height:28px}
#social .mk-m{min-width:0;flex:1}
#social .mk-n{color:#fff3d4;font-size:14px}
#social .mk-t{color:#cfc3a6;font-size:12px;line-height:1.3;margin-top:1px}
#social .mk-d{color:var(--gold);font-size:11px;margin-top:2px}
#social .mk-vis{position:absolute;right:4px;top:4px;font-size:10px;padding:0 5px;opacity:.55}
#social .mk-card.on .mk-n{padding-right:50px}
#social .mk-card:hover .mk-vis{opacity:1}
#mark-toasts{position:fixed;left:50%;top:15%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.mark-toast{pointer-events:auto;cursor:pointer;display:flex;gap:10px;align-items:center;min-width:300px;max-width:440px;padding:8px 14px 8px 10px;background:linear-gradient(180deg,rgba(40,28,14,.94),rgba(20,14,8,.94));border:1px solid #c9a25a;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.6),0 0 14px rgba(201,162,90,.35);animation:markIn .5s ease-out;transition:opacity .6s,transform .6s}
.mark-toast.out{opacity:0;transform:translateY(-8px)}
.mark-toast .mt-i{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:28px;border-radius:50%;background:rgba(0,0,0,.4);border:1px solid #c9a25a}
.mark-toast .mt-i img{width:36px;height:36px}
.mark-toast .mt-s{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#cdbd98}
.mark-toast .mt-t{font-size:18px;color:var(--gold);text-shadow:0 1px 0 #000}
.mark-toast .mt-x{font-size:12px;color:#e0d4b8;line-height:1.3}
@keyframes markIn{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
/* The GM window (gm_ui.js; Game Masters only) and GM chat lines */
.k-gm{color:#ff9d6e;font-weight:600}
.gmw-dock{position:relative;border-color:#c86a3c !important}
.gmw-badge{position:absolute;top:-7px;right:-7px;min-width:16px;padding:0 4px;border-radius:8px;background:#c43c2a;color:#fff;font:700 11px/16px sans-serif;text-shadow:none}
#hm#hm #gmwin{background:linear-gradient(180deg,rgba(38,30,21,.97),rgba(22,18,13,.97))}
.gmw{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(980px,96vw);height:min(720px,90vh);display:flex;flex-direction:column;padding:10px 14px}
.gmw .title{display:flex;align-items:center;gap:12px;font-size:19px;color:var(--gold);margin-bottom:8px}
.gmw .title .pt{color:#ff9d6e}
.gmw .gmw-tabs{margin-right:auto}
.gmw .gmw-tabs button.on{background:rgba(255,215,140,.18);color:#fff3d4}
.gmw-body{flex:1;overflow:auto;min-height:0;padding-right:4px}
.gmw-status{min-height:20px;font-size:13px;color:#9fd6a0;padding-top:6px;border-top:1px solid rgba(255,220,150,.15)}
.gmw-status.bad{color:#ff8a7a}
.gmw-sect{border:1px solid rgba(255,220,150,.18);border-radius:7px;padding:6px 10px 8px;margin:0 0 8px;background:rgba(0,0,0,.18)}
.gmw-sect h4{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#d8bd84}
.gmw-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0;font-size:13px}
.gmw input,.gmw select,.gmw textarea{font-size:13px}
.gmw-pick input{width:100%;box-sizing:border-box}
.gmw-list{max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:1px;margin-top:4px}
.gmw-li{display:flex;align-items:center;gap:8px;text-align:left;background:rgba(0,0,0,.25);border:1px solid transparent;color:var(--ink);padding:2px 6px;border-radius:4px;cursor:pointer;font:13px var(--font)}
.gmw-li:hover,.gmw-li.on{border-color:var(--bronze-hi);background:rgba(255,215,140,.12)}
.gmw-li small{margin-left:auto;opacity:.6;font-size:11px}
.gmw-ico{width:20px;text-align:center}
.gmw-ico .hm-ico{width:20px;height:20px;vertical-align:middle}
.gmw-chosen{color:#f1e3c2;font-weight:600;margin-right:auto}
.gmw-chosen .hm-ico{width:18px;height:18px;vertical-align:middle}
.gmw-card{border:1px solid rgba(255,220,150,.18);border-radius:7px;padding:6px 10px;margin:6px 0;background:rgba(0,0,0,.2)}
.gmw-card-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;font-size:13px}
.gmw-card-head b{font-size:15px;color:#f1e3c2}
.gmw-tag{font-size:11px;padding:0 6px;border-radius:8px;background:#3d5b33;color:#d4f5c0}
.gmw-tag.bad{background:#6a2a20;color:#ffd0c0}
.gmw-danger{border-color:#a8442e !important}
.gmw-desk{display:grid;grid-template-columns:minmax(220px,36%) 1fr;gap:10px;min-height:0;height:calc(100% - 40px)}
.gmw-tlist{overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}
.gmw-tdet{overflow:auto;border:1px solid rgba(255,220,150,.18);border-radius:7px;padding:8px 10px;background:rgba(0,0,0,.2);font-size:13px}
.gmw-trow{text-align:left;background:rgba(0,0,0,.25);border:1px solid rgba(255,220,150,.12);border-left:3px solid #8a7a58;border-radius:5px;color:var(--ink);padding:5px 7px;cursor:pointer;font:13px var(--font)}
.gmw-trow.k-help{border-left-color:#ff9d6e}.gmw-trow.k-bug{border-left-color:#e05a48}.gmw-trow.k-suggestion{border-left-color:#7fc7e8}
.gmw-trow.on,.gmw-trow:hover{border-color:var(--bronze-hi)}
.gmw-trow-top{display:flex;gap:6px;align-items:center}
.gmw-trow-text{opacity:.85;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmw-trow small{opacity:.6;font-size:11px}
.gmw-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:0 5px;border-radius:4px;background:#4a4030}
.gmw-kind.k-help{background:#7a3c20}.gmw-kind.k-bug{background:#6a2a20}.gmw-kind.k-suggestion{background:#24485a}
.gmw-st{margin-left:auto;font-size:11px;opacity:.85}
.gmw-st.st-new{color:#ffd75a}.gmw-st.st-in_progress{color:#8ec5ff}.gmw-st.st-resolved,.gmw-st.st-closed{color:#9fd6a0}
.gmw-tkick{color:#e3c78c;font-size:12px;letter-spacing:.04em}
.gmw-tmeta{opacity:.8;font-size:12px;margin:2px 0}
.gmw-ttext{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0;font-size:14px;color:#f1e3c2}
.gmw-sub{margin-top:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#d8bd84}
.gmw-errs{font-size:11px;max-height:90px;overflow:auto;background:rgba(0,0,0,.35);padding:4px 6px;white-space:pre-wrap}
.gmw-shot{display:block;max-width:100%;max-height:260px;margin:6px 0;border:1px solid var(--bronze);cursor:zoom-in}
.gmw-msg{border-left:3px solid #a68c53;padding:4px 8px;margin:4px 0;background:#302b23;white-space:pre-wrap;overflow-wrap:anywhere}
.gmw-msg.gm{border-left-color:#ff9d6e}.gmw-msg.note{border-left-color:#777;font-style:italic}
.gmw-msg small{opacity:.55}
.gmw-ta{width:100%;box-sizing:border-box;margin:4px 0}
.gmw-kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:13px}
.gmw-kv span{opacity:.75}
@media (max-width:700px){.gmw-desk{grid-template-columns:1fr}}
#happening .hap-x{margin-left:10px;background:none;border:0;color:#e8c060;font-size:17px;line-height:1;cursor:pointer;padding:0 2px;vertical-align:middle}
#happening .hap-x:hover{color:#fff}
#happening{pointer-events:auto}
#hm#hm #tooltip{z-index:70} /* over every window, the GM window included */
.gmw-pick .gmw-list.items{max-height:340px}
/* Master modifiers (§11): the A / B picker on a Master ability's card (paths_ui.js modPicker) */
.sk-mods{display:block;margin-top:4px;white-space:normal;font-size:11px;color:#cfc2a0}
.sk-mod-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:3px}
.sk-mod-btn.on,#hm#hm .sk-mod-btn.on{background:#6a58b0;color:#fff;border-color:#c8b8ff;box-shadow:0 0 0 1px #c8b8ff inset}
.sk-mod-desc{line-height:1.25;opacity:.75;margin-top:2px}
.sk-mod-desc.on{opacity:1;color:#e6dcff}
.sk-mod-lock{color:#a89a7a;font-style:italic}
.sk-mod-btn.coming,#hm#hm .sk-mod-btn.coming{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.sk-mod-desc.coming{opacity:.45;font-style:italic}
#tooltip .tmod{color:#c8b8ff;margin-top:4px}
/* the Dedication threshold: the bar is full and waits for the choice (journey.js holdAtThreshold) */
.bar.xp.ready{height:14px}
.bar.xp.ready .fill{background:linear-gradient(180deg,#f3d27a,#b8862e);animation:xpReady 1.6s ease-in-out infinite}
.bar.xp.ready span{display:block;font-size:10px;line-height:14px;color:#2a1a08;font-weight:600;text-align:center;position:absolute;inset:0}
@keyframes xpReady{50%{filter:brightness(1.25)}}
/* Stance bar (owner 2026-10-30): stances and auras beside the hotbars, smaller buttons, no hotbar slot */
#hbrow{position:relative;display:flex}
#stancebar{position:absolute;left:100%;bottom:0;margin-left:10px;display:flex;flex-direction:column;gap:4px;padding:5px;
background:linear-gradient(180deg,rgba(40,32,25,.9),rgba(18,15,12,.92));border:2px solid var(--bronze);border-radius:5px;
box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,220,150,.12),0 6px 16px rgba(0,0,0,.5)}
#stancebar.hidden{display:none}
.hslot.stance{width:34px;height:34px}
.hslot.stance .hi{font-size:19px}
.hslot.stance .hk{font-size:9px;left:2px;top:0}
.hslot.stance .hct{font-size:13px}
.hslot.stance.on{box-shadow:inset 0 0 8px #000,0 0 9px var(--sc,#e3b95d),inset 0 0 0 2px var(--sc,#e3b95d)}
/* the lineage slots (keys 7-9) form their own group after slot 6; the padlock closes the bottom bar at its far right end */
.hslot.lin-first{margin-left:8px}
#hotbar .hb-lock{flex:0 0 auto}
/* too little room beside the bars (narrow window, big interface size, the menu dock): paths_ui.js placeStances moves it above the bars */
#barwrap > #stancebar.flip{left:auto;right:0;bottom:100%;margin:0 0 6px;flex-direction:row}
.gmw-params{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
/* sticky chat channel (ui.js stickyChat): the box shows which channel you are talking in */
#chat-input.chan::placeholder{color:#e3b95d;opacity:.85}
#chat-input.chan{box-shadow:inset 3px 0 0 #e3b95d}
/* character select: Delete and its confirmation (charsel.js askDelete) */
#charselect .char .cs-del-btn{color:#e9a08f;border-color:rgba(200,110,90,.45)}
#charselect .char .cs-del-btn:disabled{opacity:.4;cursor:not-allowed}
#charselect .cs-online{color:#c9b06a;font-style:italic}
#charselect .cs-note{color:#cdbd98}
.cs-del-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(6,5,4,.62);padding:16px}
.cs-del-overlay .cs-del{position:relative;width:min(460px,94vw);max-height:90vh;overflow:auto;padding:20px 22px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(34,28,22,.97),rgba(16,14,11,.98));border:1px solid rgba(200,110,90,.5);color:var(--ink,#eee)}
.cs-del h3{margin:0 0 2px;font-weight:normal;color:#f0b49f;font-size:22px}
.cs-del .meta{color:#b8a888;font-size:13px}
.cs-del .cs-del-list{margin:12px 0;padding-left:20px;color:#d8c9a6;font-size:14px;line-height:1.45}
.cs-del .cs-del-list li{margin:3px 0}
.cs-del label{display:block;color:#cdbd98;font-size:14px}
.cs-del input[type=text]{display:block;width:100%;box-sizing:border-box;margin-top:4px;font:inherit;font-size:17px;color:var(--ink,#eee);padding:7px 9px;background:rgba(0,0,0,.45);border:1px solid #8a4a38;border-radius:3px;outline:none;user-select:text;-webkit-user-select:text}
.cs-del .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.cs-del .cs-del-go{background:#7a2e22;color:#fbe3d9;border-color:#b0513e}
.cs-del .cs-del-go:disabled{opacity:.45;cursor:not-allowed}
.cs-del .err{color:#f08a7a;min-height:18px;margin-top:6px}
#hm#hm #charselect .char .cs-del-btn:not(:disabled),#hm#hm .cs-del .cs-del-go:not(:disabled){border-color:#a8442e;color:#f6cbbd}
#hm#hm .cs-del .cs-del-go:not(:disabled){background:linear-gradient(180deg,#8a3424,#5e2016)}
/* Edit Home dock (home_ui.js, 2026-10-31): beside the room, not over it */
#home-dock{position:fixed;right:12px;top:312px;width:300px;background:rgba(26,19,12,.95);max-height:calc(100vh - 420px);min-height:120px;overflow:auto;padding:8px 10px;z-index:23;font-size:13px;color:#e6d9b8}
#home-dock.hidden{display:none}
#home-dock .hd-t{color:var(--gold);font-size:15px;margin-bottom:4px}
#home-dock .hd-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:4px 0}
#home-dock .hd-s{color:#cfc3a6;font-size:12px;margin:3px 0;flex:1 1 100%}
#home-dock .hd-list{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px}
#home-dock .hd-it{font-size:12px;color:#cfc3a6;border:1px solid rgba(140,106,58,.45);border-radius:3px;padding:1px 6px;cursor:pointer}
#home-dock .hd-it.on{color:#fff3d4;border-color:var(--gold);background:rgba(120,90,40,.35)}
#home-dock select{font:inherit;font-size:12px}