/* Cold And Pressed: all UI is DOM over one WebGL canvas. */
:root {
  --cell: 40px;
  --gold: #c9a45c;
  --gold-hi: #f0d28c;
  --ink: #d9cfbd;
  --muted: #8d8372;
  --dim: #5b5346;
  --panel: rgba(13, 11, 10, 0.88);
  --panel-hi: rgba(28, 24, 20, 0.92);
  --line: #3d3428;
  --line-hi: #6b5a3e;
  --red: #b8352a;
  --hp: #a32a22;
  --mana: #3a64d0;
  --ward: #9fd8ff;
  --ice: #a8e8ff;
  --party: #7fd08a;
  --party-hi: #c4f2c9;
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, 'URW Palladio L', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050404; color: var(--ink); font: 14px/1.35 var(--serif); user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui .live { pointer-events: auto; }
/* split screen: each player's part of the window (.seat) holds their UI laid out at its own size, scaled down
   to fit (.seatui: the box its fixed panels fill and its cq units measure; --cell is set with the size) */
.seat { position: absolute; overflow: clip; }
.seatui { position: absolute; left: 0; top: 0; transform-origin: 0 0; container-type: size; }
button { font: inherit; color: inherit; }
input { font: inherit; }
.hidden { display: none !important; }
/* the gamepad: its cursor over the panels (.padhover stands in for :hover), drawn as big as the UI and scaled
   about its tip; on a control the D-pad went to a ring (.padfocus) in place of it. The mouse's arrow hidden while
   it plays */
.padcursor { position: fixed; left: -2px; top: -2px; z-index: 70; pointer-events: none; will-change: transform; transform-origin: 2px 2px; filter: drop-shadow(0 0 4px rgba(255, 190, 90, 0.55)); }
.padcursor.snap { display: none; }
.padcursor svg { display: block; }
.padfocus { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
html.pad, html.pad * { cursor: none !important; }

/* ---------- shared bits */
.panel {
  /* gold brackets on the four corners over a faint warm glow from the top */
  --k: rgba(201, 164, 92, 0.6);
  background:
    linear-gradient(var(--k), var(--k)) left top / 12px 1px, linear-gradient(var(--k), var(--k)) left top / 1px 12px,
    linear-gradient(var(--k), var(--k)) right top / 12px 1px, linear-gradient(var(--k), var(--k)) right top / 1px 12px,
    linear-gradient(var(--k), var(--k)) left bottom / 12px 1px, linear-gradient(var(--k), var(--k)) left bottom / 1px 12px,
    linear-gradient(var(--k), var(--k)) right bottom / 12px 1px, linear-gradient(var(--k), var(--k)) right bottom / 1px 12px,
    radial-gradient(ellipse 80% 120px at 50% 0, rgba(255, 214, 150, 0.05), transparent),
    var(--panel);
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 230, 190, 0.03), inset 0 0 24px rgba(0, 0, 0, 0.7), 0 8px 30px rgba(0, 0, 0, 0.6);
  padding: 10px;
}
.panel > h3, .head {
  margin: -10px -10px 10px; padding: 7px 10px 6px; font-size: 13px; font-weight: normal; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 1px 0 #000, 0 0 10px rgba(240, 200, 120, 0.18);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-hi) 12%, var(--line-hi) 88%, transparent) 1;
  background: linear-gradient(#251e16, #15110d);
  display: flex; align-items: center; gap: 8px;
}
/* a small gold lozenge before each header */
.panel > h3::before, .head::before {
  content: ''; width: 5px; height: 5px; flex: none; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 6px rgba(240, 200, 120, 0.6);
}

/* scrollbars: thin, dark, gold thumb */
* { scrollbar-width: thin; scrollbar-color: var(--line-hi) rgba(0, 0, 0, 0.4); }
.head .grow { flex: 1; }
.btn {
  background: linear-gradient(#2a2219, #18130e); border: 1px solid var(--line-hi); color: var(--ink);
  padding: 6px 12px; cursor: pointer; letter-spacing: 0.06em; box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.08);
}
.btn:hover, .btn.padhover { border-color: var(--gold); color: var(--gold-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.big {
  font-size: 22px; padding: 12px 34px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi);
  border: 1px solid var(--gold); background: linear-gradient(#4a2414, #22100a);
  box-shadow: 0 0 22px rgba(255, 120, 40, 0.25), inset 0 0 18px rgba(255, 160, 80, 0.18);
}
.btn.big:hover, .btn.big.padhover { box-shadow: 0 0 30px rgba(255, 140, 60, 0.45), inset 0 0 22px rgba(255, 180, 90, 0.3); }
.btn.danger { border-color: #7a2a20; }
.btn.danger:hover, .btn.danger.padhover { border-color: #e0553f; color: #ffb3a3; }
.gold { color: #f1cf6b; font-variant-numeric: tabular-nums; }
.coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #e2b13c 45%, #8a5f12); box-shadow: 0 0 4px rgba(255, 200, 80, 0.5); vertical-align: -1px; margin-right: 4px; }
.kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--line-hi); border-radius: 3px; background: #1c1712; color: var(--gold-hi); font: 11px/16px monospace; text-align: center; }
.muted { color: var(--muted); }

/* ---------- tooltip */
.tip {
  position: fixed; z-index: 50; min-width: 220px; max-width: 300px; pointer-events: none; padding: 8px 10px;
  background: rgba(8, 7, 6, 0.97); border: 1px solid var(--line-hi); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
}
.tip .tn { font-size: 16px; font-weight: bold; }
.tip .tr { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; opacity: 0.85; }
.tip .tl { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.tip .tl.mod { color: #7fb4ff; }
.tip .tl.neg b { color: #e07060; }
.tip .tf { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.tip .bad { color: #e05a48; }

/* ---------- toasts */
.toasts { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 40; }
.toast { padding: 4px 14px; background: rgba(10, 8, 6, 0.8); border: 1px solid var(--line); color: #f0dfbd; animation: toast 2.6s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- inventory grids */
.grid {
  position: relative; width: calc(var(--w) * var(--cell)); height: calc(var(--h) * var(--cell));
  background-color: rgba(0, 0, 0, 0.45);
  background-image: linear-gradient(rgba(120, 100, 70, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 100, 70, 0.16) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); border: 1px solid var(--line);
}
.grid .hl { position: absolute; pointer-events: none; outline: 2px solid rgba(110, 220, 120, 0.8); background: rgba(80, 200, 100, 0.18); z-index: 3; }
.grid .hl.no { outline-color: rgba(230, 80, 60, 0.85); background: rgba(220, 60, 40, 0.18); }
.item {
  position: absolute; display: flex; align-items: center; justify-content: center; cursor: grab;
  background: radial-gradient(ellipse at 50% 60%, var(--rc-bg, rgba(255, 255, 255, 0.06)), rgba(0, 0, 0, 0.35) 75%);
  border: 1px solid var(--rc, #555); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.item:hover, .item.padhover { filter: brightness(1.3); z-index: 2; }
.item img { width: 92%; height: 92%; object-fit: contain; pointer-events: none; image-rendering: auto; }
.item .q { position: absolute; right: 2px; bottom: 0; font: bold 12px/14px monospace; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.item.kit::after { content: ''; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: #6f6656; box-shadow: 0 0 0 1px #000; }
.item.ghost { position: fixed; pointer-events: none; z-index: 60; opacity: 0.85; cursor: grabbing; }
.item.dragging { opacity: 0.25; }

.equip { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; justify-content: center; align-items: start; }
.slot {
  position: relative; width: calc(var(--cell) * 2); height: calc(var(--cell) * 2); background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.slot.tall { height: calc(var(--cell) * 3); }
.slot.small { width: var(--cell); height: var(--cell); }
.slot .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; text-align: center; }
.slot .item { inset: 0; }
.slot.hl { outline: 2px solid rgba(110, 220, 120, 0.8); }
.slot.hl.no { outline-color: rgba(230, 80, 60, 0.85); }
.slots-col { display: flex; flex-direction: column; gap: 6px; }

/* ---------- login */
#login {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(9cqh + 6cqh) 0 calc(9cqh + 4cqh);
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent 30%, transparent 60%, rgba(0, 0, 0, 0.62));
}
/* letterbox bars: shut over the screen at first, opening like eyes on the hall */
#login .lid { position: fixed; left: 0; right: 0; height: 9cqh; background: #000; animation: lids 2.2s cubic-bezier(0.3, 0, 0.15, 1) both; }
#login .lid.top { top: 0; transform-origin: top; }
#login .lid.bot { bottom: 0; transform-origin: bottom; }
@keyframes lids { 0%, 25% { transform: scaleY(5.6); } }
#login .crest { text-align: center; animation: crest 2.6s 0.7s ease-out both; }
#login .title {
  font-size: clamp(40px, 6cqw, 92px); line-height: 1; letter-spacing: 0.2em; margin-right: -0.2em; text-transform: uppercase;
  color: transparent; background: linear-gradient(#ffffff 15%, #d4f0ff 45%, #7eb2d4 62%, #eef9ff 88%); background-clip: text; -webkit-background-clip: text;
  filter: drop-shadow(0 0 16px rgba(120, 196, 255, 0.5)) drop-shadow(0 3px 0 #04101a);
}
#login .rule {
  position: relative; width: min(620px, 62cqw); height: 1px; margin: 18px auto 14px;
  background: linear-gradient(90deg, transparent, rgba(168, 232, 255, 0.75) 30%, rgba(168, 232, 255, 0.75) 70%, transparent);
}
#login .rule i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--ice); background: #08121b; box-shadow: 0 0 10px rgba(168, 232, 255, 0.8);
}
#login .sub { font-size: 14px; letter-spacing: 0.55em; margin-right: -0.55em; text-transform: uppercase; color: var(--ice); opacity: 0.85; text-shadow: 0 1px 6px #000; }
@keyframes crest { from { opacity: 0; letter-spacing: 0.42em; filter: blur(8px); } }
#login .entry { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: rise 1.4s 2s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
#login form { display: flex; gap: 12px; }
#login input {
  width: 290px; padding: 11px 16px; background: rgba(5, 8, 12, 0.72); border: 1px solid rgba(201, 164, 92, 0.55); color: #f3e6c8;
  font-size: 20px; letter-spacing: 0.08em; text-align: center; outline: none; box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.8);
}
#login input::placeholder { color: rgba(217, 207, 189, 0.38); }
#login input:focus { border-color: var(--gold-hi); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.8), 0 0 18px rgba(240, 210, 140, 0.22); }
#login .btn.big { font-size: 17px; padding: 10px 26px; }
#login .err { color: #ff8a73; min-height: 20px; text-shadow: 0 1px 4px #000; }
#login .hint { color: rgba(217, 207, 189, 0.6); font-size: 13px; text-align: center; max-width: 540px; text-shadow: 0 1px 4px #000; }

/* ---------- tavern */
#tavern { position: fixed; inset: 0; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; gap: 12px; padding: 12px; }
#tavern .top { grid-column: 1 / 4; display: flex; align-items: center; gap: 18px; padding: 6px 14px; }
#tavern .top .name { font-size: 20px; color: var(--gold-hi); letter-spacing: 0.08em; }
#tavern .top .stats { display: flex; gap: 14px; color: var(--muted); font-size: 13px; }
#tavern .top .stats b { color: var(--ink); font-weight: normal; }
#tavern .top .grow { flex: 1; }
#tavern .top .logo {
  font-size: 18px; letter-spacing: 0.32em; text-transform: uppercase; color: transparent;
  background: linear-gradient(#ffffff 20%, #bfe6ff 55%, #7eb2d4 75%, #eef9ff); background-clip: text; -webkit-background-clip: text;
  filter: drop-shadow(0 0 8px rgba(120, 196, 255, 0.45));
}
#tavern .left, #tavern .right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#tavern .mid { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 14px; padding-bottom: 8px; }
.classes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.races { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.cls, .race {
  width: 62px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 4px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.5); cursor: pointer; font-size: 11px; color: var(--muted);
}
.cls canvas, .cls img { width: 40px; height: 40px; }
.race { width: auto; height: 74px; }
.race canvas { width: 40px; height: 50px; }
.cls:hover, .race:hover, .cls.padhover, .race.padhover { border-color: var(--line-hi); color: var(--ink); }
.cls.on, .race.on { border-color: var(--gold); color: var(--gold-hi); box-shadow: inset 0 0 14px rgba(240, 200, 120, 0.2); }
.abil { display: flex; gap: 8px; margin-top: 8px; }
.abil .ab { flex: 1; display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 4px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); }
.abil canvas { width: 30px; height: 30px; flex: none; }
.book-slots { display: flex; gap: 5px; margin-bottom: 8px; }
.book-slots .slot { position: relative; width: 40px; height: 40px; border: 1px solid var(--gold); background: rgba(0, 0, 0, 0.5); cursor: pointer; }
.book-slots .slot.free { border: 1px dashed var(--line-hi); cursor: default; }
.book-slots .k { position: absolute; left: 2px; top: 0; font: bold 10px monospace; color: var(--gold-hi); text-shadow: 0 0 3px #000; }
.book-slots canvas, .book-grid canvas { width: 100%; height: 100%; display: block; }
.book-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.book-grid .spell { aspect-ratio: 1; border: 1px solid var(--line); cursor: pointer; opacity: 0.5; }
.book-grid .spell:hover, .book-grid .spell.padhover { opacity: 1; border-color: var(--line-hi); }
.book-grid .spell.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 8px rgba(240, 200, 120, 0.35); }
.book-hint { margin-top: 8px; font-size: 11px; color: var(--muted); }
.charstats { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; gap: 1px 10px; font-size: 12px; margin-top: 8px; color: var(--muted); }
.charstats b { color: var(--ink); font-weight: normal; text-align: right; font-variant-numeric: tabular-nums; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: 6px; max-height: 236px; overflow-y: auto; padding-right: 4px; }
.ware { position: relative; height: 74px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ware:hover, .ware.padhover { border-color: var(--gold); }
.ware img { width: 46px; height: 46px; object-fit: contain; }
.ware .p { font-size: 11px; }
.ware.poor .p { color: #b24a3a; }
.sellzone { margin-top: 8px; padding: 8px; border: 1px dashed var(--line-hi); color: var(--muted); text-align: center; font-size: 12px; }
.sellzone.hl { border-color: #f1cf6b; color: #f1cf6b; background: rgba(240, 200, 100, 0.08); }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs .btn { padding: 3px 10px; font-size: 12px; }
.tabs .btn.on { border-color: var(--gold); color: var(--gold-hi); }
.queue-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.queue-box .sub { color: var(--muted); font-size: 13px; letter-spacing: 0.08em; }
.panel > h3 .grow { flex: 1; }

/* the party: a strip of member cards at the top of the room (invitations land in it), a plate over each member;
   four to a row, two where that leaves no room for the names (a 1280-wide room, as a split screen's quarter) */
#tavern .party { align-self: stretch; margin-bottom: auto; }
.party .rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(120px, 25% - 5px), 1fr)); gap: 6px; }
.party .rows:not(:empty) { margin-bottom: 8px; }
.member { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); }
.member canvas, .member img, .member .blank { width: 32px; height: 32px; flex: none; border: 1px solid #000; }
.member .blank { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-hi); color: var(--muted); font-size: 15px; }
.member .who { flex: 1; min-width: 0; }
.member .nm { color: var(--party-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member .st { font-size: 11px; color: var(--muted); }
.member.away { opacity: 0.5; }
.member.asked .nm { color: var(--muted); font-style: italic; }
.member .x { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.6); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 14px; }
.member .x:hover, .member .x.padhover { border-color: #e0553f; color: #ffb3a3; }
.crown { color: var(--gold-hi); margin-left: 5px; text-shadow: 0 0 6px rgba(240, 200, 120, 0.6); }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: #5a5248; }
.dot.tavern { background: var(--party); box-shadow: 0 0 5px var(--party); }
.dot.queue { background: var(--gold-hi); box-shadow: 0 0 5px var(--gold); }
.dot.raid { background: var(--ice); box-shadow: 0 0 5px var(--ice); }
.invite-row { display: flex; gap: 6px; align-items: center; }
.invite-row input { width: 210px; padding: 4px 8px; background: rgba(8, 7, 6, 0.85); border: 1px solid var(--line-hi); color: var(--ink); outline: none; }
.invite-row input:focus { border-color: var(--party); }
.patrons { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 8px; }
.patrons .lbl { margin-right: 4px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.patron { padding: 2px 9px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); color: var(--ink); font-size: 12px; cursor: pointer; }
.patron:hover, .patron.padhover { border-color: var(--party); color: var(--party-hi); }
.invites { display: flex; flex-direction: column; gap: 4px; }
.invites:not(:empty) { margin-bottom: 6px; }
.invite { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--party); background: rgba(40, 90, 50, 0.25); box-shadow: 0 0 14px rgba(110, 210, 130, 0.25); animation: rise 0.4s ease-out both; }
.invite .grow { flex: 1; }
.invite b { color: var(--party-hi); font-weight: normal; }
.plates { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.plate { position: absolute; left: 0; top: 0; will-change: transform; }
.plate .in { transform: translate(-50%, -100%); white-space: nowrap; font-size: 15px; letter-spacing: 0.05em; color: var(--party-hi); text-shadow: 0 0 4px #000, 0 0 2px #000, 0 0 10px #000; }
.plate .crown { margin: 0 5px 0 0; }
.plate .ready { margin-left: 6px; color: var(--party); }

/* chat */
.chat { position: fixed; left: 12px; bottom: 12px; width: 380px; z-index: 5; }
.chat .log { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; font-size: 13px; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.chat .log div { padding: 1px 4px; }
.chat .log .from { color: var(--gold); }
.chat .log .sys { color: #9ec7e6; }
.chat input { width: 100%; margin-top: 4px; padding: 5px 8px; background: rgba(8, 7, 6, 0.85); border: 1px solid var(--line-hi); color: var(--ink); outline: none; }
.chat.faded .log div { animation: fadeline 9s forwards; }
@keyframes fadeline { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- overlays */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); z-index: 30; }
.overlay .box { min-width: 340px; text-align: center; }
.overlay .box h2 { margin: 0 0 6px; font-weight: normal; letter-spacing: 0.2em; text-transform: uppercase; }
.queuing { display: flex; gap: 10px; align-items: center; height: 16px; font-size: 13px; letter-spacing: 0.06em; color: var(--ink); }
.queuing .spin { width: 12px; height: 12px; border: 2px solid var(--line-hi); border-top-color: var(--ice); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 40px; }
.result h1 { margin: 0; font-size: 46px; font-weight: normal; letter-spacing: 0.3em; text-transform: uppercase; }
.result.dead h1 { color: #d33a2c; text-shadow: 0 0 24px rgba(200, 30, 20, 0.6); }
.result.esc h1 { color: #bfefff; text-shadow: 0 0 24px rgba(120, 210, 255, 0.6); }
.result .rows { display: grid; grid-template-columns: auto auto; gap: 4px 28px; font-size: 16px; }
.result .rows span:nth-child(odd) { color: var(--muted); text-align: right; }
.menu { display: flex; flex-direction: column; gap: 8px; }
.menu .cols { display: flex; gap: 28px; }
.menu .set { display: flex; flex-direction: column; gap: 8px; width: 320px; }
.menu .acts { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
.menu label { display: grid; grid-template-columns: 110px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.menu input[type=range] { width: 100%; accent-color: var(--gold); }
.menu select { background: #120f0c; color: var(--ink); border: 1px solid var(--line-hi); padding: 3px; font: inherit; }
.menu .v { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; color: var(--muted); text-align: left; margin-top: 4px; }
.keys .kh { grid-column: 1 / -1; margin-top: 6px; color: var(--ink); letter-spacing: 0.06em; }

/* ---------- raid HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
.xhair { position: fixed; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 2px #000; }
.hitmark { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; }
.hitmark::before, .hitmark::after { content: ''; position: absolute; left: 12px; top: -2px; width: 2px; height: 30px; background: #fff; box-shadow: 0 0 2px #000; }
.hitmark::before { transform: rotate(45deg); }
.hitmark::after { transform: rotate(-45deg); }
.hitmark.on { animation: hitmark 0.28s ease-out; }
.hitmark.head::before, .hitmark.head::after { background: #ffcf4a; }
.hitmark.kill::before, .hitmark.kill::after { background: #ff4a3a; height: 34px; top: -4px; }
@keyframes hitmark { 0% { opacity: 1; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.15); } }
.parrymark { position: fixed; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid #ffe3a0; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 200, 90, 0.9), inset 0 0 6px rgba(255, 200, 90, 0.6); opacity: 0; pointer-events: none; }
.parrymark.on { animation: parrymark 1.2s ease-out; }
@keyframes parrymark { 0% { opacity: 1; transform: scale(0.4); } 12% { opacity: 1; transform: scale(1.15); } 30% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
.dmgdir { position: fixed; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; pointer-events: none; }
.dmgdir i { position: absolute; left: 50%; top: 0; width: 60px; height: 22px; margin-left: -30px; border-top: 4px solid rgba(220, 30, 20, 0.9); border-radius: 50% / 100% 100% 0 0; transform-origin: 30px 110px; filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8)); animation: dmgdir 1.1s forwards; }
@keyframes dmgdir { 0% { opacity: 1; } 100% { opacity: 0; } }

.bars { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; width: 420px; }
.bar { position: relative; height: 18px; background: rgba(0, 0, 0, 0.7); border: 1px solid #2a221a; box-shadow: 0 0 0 1px #000; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; }
.bar .fill { background: linear-gradient(#c8463a, #7a1d16); transition: width 0.12s; }
.bar .lag { background: #e8c9a0; opacity: 0.55; transition: width 0.6s 0.25s; }
.bar .ward { background: linear-gradient(rgba(190, 235, 255, 0.85), rgba(110, 180, 255, 0.6)); }
.bar.mana { height: 10px; }
.bar.mana .fill { background: linear-gradient(#5f86f0, #26409a); }
.bar span { position: absolute; inset: 0; text-align: center; font: bold 12px/18px var(--serif); text-shadow: 0 0 3px #000, 0 0 2px #000; letter-spacing: 0.06em; }
.bar.mana span { font-size: 10px; line-height: 10px; }
.bar.low { animation: lowhp 0.9s infinite; }
@keyframes lowhp { 50% { box-shadow: 0 0 10px 2px rgba(255, 30, 20, 0.6); } }
.status { display: flex; gap: 4px; justify-content: center; min-height: 26px; }
.status .st { position: relative; width: 26px; height: 26px; border: 1px solid #000; }
.status .st canvas,.status .st img { width: 100%; height: 100%; display: block; }

.abilities { position: fixed; left: calc(50% - 210px - 12px); bottom: 22px; transform: translateX(-100%); display: flex; gap: 6px; }
.consum { position: fixed; left: calc(50% + 210px + 12px); bottom: 22px; display: flex; gap: 6px; }
.abox { position: relative; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.7); border: 1px solid var(--line-hi); box-shadow: 0 0 0 1px #000; }
.abox canvas, .abox img { width: 100%; height: 100%; display: block; }
.abox .k { position: absolute; left: 2px; top: 1px; font: bold 11px monospace; color: var(--gold-hi); text-shadow: 0 0 3px #000; }
.abox .n { position: absolute; right: 3px; bottom: 1px; font: bold 13px monospace; color: #fff; text-shadow: 0 0 3px #000; }
.abox .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.78) var(--a, 0deg), transparent 0); }
.abox .cdn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: bold 16px monospace; color: #fff; text-shadow: 0 0 4px #000; }
.abox.empty { opacity: 0.35; }
.abox.sel { border-color: var(--ice); box-shadow: 0 0 10px rgba(140, 210, 255, 0.6); }
.spellname { min-height: 18px; text-align: center; font: 13px/18px var(--serif); letter-spacing: 0.06em; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.spellname .kbd { margin-left: 4px; }
.spellbar { display: flex; gap: 4px; justify-content: center; margin-bottom: 2px; }
.spellbar .abox { width: 40px; height: 40px; }

.coldbox { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.compass { position: relative; width: 460px; height: 26px; overflow: hidden; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.6) 85%, transparent); border-top: 1px solid rgba(120, 100, 70, 0.3); border-bottom: 1px solid rgba(120, 100, 70, 0.3); }
.compass .mk { position: absolute; top: 0; height: 26px; transform: translateX(-50%); font: 12px/26px var(--serif); color: var(--muted); white-space: nowrap; }
.compass .mk.card { color: var(--ink); font-weight: bold; }
.compass .mk.safe { color: var(--ice); font-size: 15px; text-shadow: 0 0 6px rgba(140, 210, 255, 0.8); }
.compass .mk.portal { color: #ffb36b; font-size: 15px; text-shadow: 0 0 6px rgba(255, 150, 60, 0.9); }
.compass .mk.boss { color:#f5b0a0; font-size:10px; font-weight:bold; letter-spacing:.04em; text-shadow:0 0 5px #240f19; }
.compass::after { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 6px; margin-left: -1px; background: var(--gold); }
.coldtimer { padding: 2px 12px; font-size: 14px; letter-spacing: 0.08em; color: var(--ice); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(140, 200, 255, 0.25); text-shadow: 0 0 6px rgba(120, 200, 255, 0.6); }
.coldtimer.closing { color: #fff; border-color: rgba(200, 240, 255, 0.7); animation: pulse 1.4s infinite; }
.coldtimer.out { color: #ff9b8c; border-color: rgba(255, 120, 100, 0.6); }
.floor-objective { max-width:min(440px,82vw); padding:2px 8px; color:#ead9b4; font:12px/1.35 var(--serif); text-align:center; text-wrap:balance; text-shadow:0 1px 3px #000; }
.floor-objective.cleared { color:#bcebd6; }
@keyframes pulse { 50% { box-shadow: 0 0 12px rgba(160, 220, 255, 0.6); } }
.feed { position: fixed; right: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; }
.feed div { padding: 2px 10px; background: rgba(0, 0, 0, 0.6); border-right: 2px solid var(--line-hi); animation: feed 8s forwards; text-shadow: 0 0 2px #000; }
.feed .death { border-right-color: #b8352a; }
.feed .escape { border-right-color: #8fd8ff; }
.feed .portal { border-right-color: #ff9f4a; color: #ffd2a0; }
.feed .boss { border-right-color: #c6a0ff; color: #e6d4ff; }
.feed .jail { border-right-color: #b8a070; color: #e8dcc0; }
@keyframes feed { 0% { opacity: 0; transform: translateX(20px); } 5% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
/* the party: a row each at the top left, a tag over each head, a mark on the compass */
.partyframe { position: fixed; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 5px; }
.ally { display: flex; align-items: center; gap: 8px; width: 214px; padding: 4px 10px 4px 4px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)); border-left: 2px solid var(--party); }
.ally canvas, .ally img { width: 30px; height: 30px; flex: none; border: 1px solid #000; }
.ally .who { flex: 1; min-width: 0; }
.ally .nm { font-size: 13px; color: var(--party-hi); text-shadow: 0 0 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpb { position: relative; height: 5px; margin-top: 3px; background: rgba(0, 0, 0, 0.75); box-shadow: 0 0 0 1px #000; }
.hpb i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#d24a3a, #85201a); transition: width 0.2s; }
.ally.low .hpb i { animation: lowhp 0.9s infinite; }
.ally.dead { border-left-color: var(--red); opacity: 0.55; filter: grayscale(1); }
.ally.out { border-left-color: var(--ice); opacity: 0.7; }
.ally .fate { color: var(--ink); }
.tags { position: fixed; inset: 0; overflow: hidden; }
.atag { position: absolute; left: 0; top: 0; will-change: transform; }
.atag .in { transform: translate(-50%, -100%); text-align: center; white-space: nowrap; font-size: 13px; color: var(--party-hi); text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 6px #000; }
.atag .d { font-size: 11px; color: var(--muted); }
.atag .hpb { width: 64px; height: 3px; margin: 2px auto 0; }
.compass .mk.mate { color: var(--party); font-size: 11px; text-shadow: 0 0 5px rgba(120, 220, 140, 0.8); }
.chat .log .party, .chat .log .party .from { color: var(--party-hi); }
.prompt { position: fixed; left: 50%; top: calc(50% + 42px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 15px; text-shadow: 0 0 4px #000, 0 0 2px #000; white-space: nowrap; }
.prog { width: 180px; height: 6px; background: rgba(0, 0, 0, 0.7); border: 1px solid #000; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #d9b46a, #fff0c0); }
.prog.extract i { background: linear-gradient(90deg, #ff8a2a, #ffe2a0); box-shadow: 0 0 8px rgba(255, 150, 50, 0.9); }
.clickplay { position: fixed; left: 50%; top: calc(50% - 70px); transform: translateX(-50%); padding: 8px 22px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(160, 220, 255, 0.35); font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase; color: #dff6ff; text-shadow: 0 0 12px rgba(120, 200, 255, 0.9); white-space: nowrap; animation: clickplay 1.6s ease-in-out infinite alternate; }
@keyframes clickplay { from { opacity: 0.65; } to { opacity: 1; } }
.vignette-msg { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); font-size: 26px; letter-spacing: 0.25em; text-transform: uppercase; color: #dff6ff; text-shadow: 0 0 16px rgba(120, 200, 255, 0.9); animation: toast 4s forwards; white-space: nowrap; }
.dmgnum { position: fixed; font: bold 16px var(--serif); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; animation: dmgnum 0.8s forwards; }
.dmgnum.head { color: #ffd04a; font-size: 19px; }
@keyframes dmgnum { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -34px); } }

/* raid inventory */
.rinv { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; background: rgba(0, 0, 0, 0.35); }
.rinv .col { display: flex; flex-direction: column; gap: 12px; }
.dropzone { position: fixed; inset: 0; z-index: -1; }

/* map */
.mapwrap { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.mapwrap canvas { width: min(76cqh, 84cqw); height: min(76cqh, 84cqw); image-rendering: pixelated; border: 1px solid var(--line-hi); box-shadow: 0 0 40px #000; }
.mapwrap .legend { display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.mapwrap .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 50%; }

.spectate { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); }
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; z-index: 45; font-size: 18px; letter-spacing: 0.3em; color: var(--ice); text-transform: uppercase; }

/* ---------- tavern extras */
.btn.small { padding: 2px 8px; font-size: 11px; letter-spacing: 0.04em; text-transform: none; }
#tavern .left, #tavern .right { overflow-y: auto; scrollbar-width: thin; }
#tavern .chat { position: static; width: min(440px, 100%); }
#tavern .chat .log { max-height: 130px; }

.bar.stamina {height:12px;}.bar.stamina .fill {background:linear-gradient(#c7c15a,#727327);}.bar.stamina span {font:10px/12px sans-serif;letter-spacing:.04em;}
#characters {position:absolute;inset:0;color:var(--text);}
.character-top {position:absolute;inset:18px 22px auto;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;}
.character-top h1 {margin:0 0 5px;font:26px var(--serif);letter-spacing:.05em;}
.character-roster,.character-sheet {position:absolute;top:112px;bottom:26px;padding:20px;overflow:auto;}
.character-roster {left:22px;width:27%;}.character-sheet {right:22px;width:25%;}
.character-list {display:flex;flex-direction:column;gap:9px;}
.character-card {display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px;border:1px solid #494137;background:#151310df;color:#d4c5aa;cursor:pointer;}
.character-card.on {border-color:var(--class-color);background:#302a21f0;box-shadow:inset 3px 0 var(--class-color);}
.character-card:focus-visible {outline:2px solid #f1d69c;outline-offset:3px;}
.character-card img {width:48px;height:48px;}.character-card strong {display:block;font:17px var(--serif);}.character-card small {display:block;margin-top:6px;color:#a89c88;font-size:11px;}
.character-sheet h2 {font:26px var(--serif);margin:3px 0 24px;}.character-sheet form {display:flex;flex-direction:column;gap:18px;}
.character-sheet label {display:flex;flex-direction:column;gap:8px;color:#b8ab96;font-size:13px;}.character-sheet input,.character-sheet select {width:100%;padding:10px;background:#14120f;color:#eee1c6;border:1px solid #675944;font:16px var(--serif);}
.character-level {padding:14px 0;border-block:1px solid #514331;font:24px var(--serif);}.character-level small {display:block;margin-top:7px;color:#ac9e85;font:12px sans-serif;}
.character-summary {display:flex;justify-content:space-between;gap:8px;}.character-summary div {text-align:center;}.character-summary b {display:block;font:24px var(--serif);}.character-summary span {font-size:11px;color:#b7aa94;}
.character-roster p,.character-sheet p {font-size:12px;line-height:1.6;}.character-caption {position:absolute;bottom:8%;left:32%;width:36%;text-align:center;text-shadow:0 2px 4px #000;pointer-events:none;}
.character-caption strong {display:block;font:30px var(--serif);}.character-caption span {display:block;margin-top:8px;color:#c1b293;font-size:14px;}
@container (max-width:850px) {.character-roster {width:29%;padding:12px;}.character-sheet {width:29%;padding:14px;}.character-caption {left:34%;width:32%;}.character-card {padding:7px;gap:6px;}.character-card img {width:34px;height:34px;}.character-card strong {font-size:14px;}.character-top {inset:12px 14px auto;}.character-roster {left:14px;}.character-sheet {right:14px;}}

.spell.locked {filter:grayscale(1);opacity:.4;cursor:not-allowed;}

.spectator {position:absolute;bottom:145px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px;background:#101315eb;border:1px solid #ab9b62;white-space:nowrap;z-index:40;}.party-ping {position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:#ffd97d;text-shadow:0 2px 3px #000;z-index:12;}.party-ping b {display:block;font-size:28px;line-height:34px;}.party-ping span {background:#17140edb;border:1px solid #79643c;padding:3px 6px;font:12px sans-serif;white-space:nowrap;}

.depth-label {text-align:center;font:12px sans-serif;color:#cabb90;letter-spacing:.08em;margin-top:4px;}.ab select {max-width:150px;font-size:12px;}

.stash-tabs {display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}.stash-tabs .on {border-color:#e4c878;color:#f9e2a3;background:#3f3625;}

.item-tooltip {min-width:250px;max-width:330px;}.itemtip-head {display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid #78634066;margin-bottom:9px;}.itemtip-art {width:52px;height:62px;object-fit:contain;filter:drop-shadow(0 2px 4px #000);}.itemtip-head .tr {margin:4px 0 0;line-height:1.5;font-size:10px;letter-spacing:.06em;}.item-stats .tl {display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5px 0;border-bottom:1px solid #ffffff08;font-size:13px;}.item-stats .tl b {font-variant-numeric:tabular-nums;color:#e5dcc4;}.item-stats .tl.mod b {color:#98c1f5;}.item-access {margin:10px 0;}.access-label {font:10px sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#b8aa8f;margin-bottom:5px;}.class-chips {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;}.class-chip {display:flex;align-items:center;gap:5px;padding:3px 5px;border:1px solid #77644155;background:#131a1e;font:11px sans-serif;color:#c6c1b4;}.class-chip.current {border-color:#c9b578;color:#f4e6bd;background:#363525;}.item-tooltip .tf {line-height:1.6;padding-top:8px;}.item-tooltip .bad {margin-top:5px;color:#ff9b8b;}
.camp-screen{position:absolute;inset:0;pointer-events:none;padding:24px;display:grid;grid-template-columns:minmax(350px,1fr) minmax(160px,1fr) minmax(300px,.8fr);grid-template-rows:auto 1fr auto;gap:16px}
.camp-screen .panel{padding:16px;pointer-events:auto;background:#14131cdb}.camp-top{grid-column:1/-1}.camp-top h1{margin:0;font-size:25px}.camp-top p{margin:6px 0}.camp-countdown{color:#d4b3ff;font-size:18px;font-weight:600}.camp-left{grid-column:1;overflow:auto}.camp-right{grid-column:3;overflow:auto}.camp-bottom{grid-column:1/-1;display:flex;align-items:center;gap:20px}.camp-bottom p{flex:1}.camp-roster{display:flex;gap:24px}.camp-member{display:flex;flex-direction:column}.camp-member span{color:#c5b7d5;font-size:12px}.camp-stock,.camp-sales{display:flex;flex-direction:column;gap:8px}.camp-stock button,.camp-sell{display:flex;align-items:center;gap:10px;text-align:left}.camp-sell span{flex:1}.camp-left .grid{margin-top:10px}.camp-left h2,.camp-right h2{margin-top:0}
.accounts-screen .account-panel{position:absolute;right:7%;top:30%;width:370px;max-height:65%;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:12px;background:#171814ed}.account-list{display:flex;flex-direction:column;gap:8px}.account-card{display:flex;gap:12px;align-items:center;text-align:left}.account-card span{display:flex;flex-direction:column}.account-card strong{font-size:18px}.account-card small{color:#c4b99f;font-size:11px}.account-panel form{display:flex;flex-direction:column;gap:10px}.account-panel form.hidden{display:none}.account-panel h2{margin:0}.account-panel input{width:100%;padding:12px;font:inherit;color:inherit;background:#12120f;border:1px solid #695d43}

/* Quiver: item-owned storage and server-confirmed arrow selection. */
.quiver-panel{margin-top:12px}.quiver-panel h3{margin:8px 0}.arrow-choices{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.arrow-choices .on{border-color:#d8b56f;color:#ffe2a1;background:#433320}.arrow-hud{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);padding:6px 12px;background:#100f13db;border:1px solid #726450;border-radius:4px;font-size:13px;pointer-events:none}
.friends{max-height:280px;overflow:auto;padding:12px}.friends summary{cursor:pointer;color:#dfc696;font-weight:600}.friends[open] summary{margin-bottom:10px}.friend-row{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid #c3a16b22}.friend-row>span:first-child,.friend-row>strong:first-child{margin-right:auto}.friend-row small{display:block;color:#aba392}.friend-row .btn{padding:4px 7px}.friend-setting{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px}.friend-setting input{width:auto}

/* Health owns its damage trail; ward is a separate resource, never painted over life. */
.vitals{--blood:#bd463e;--blood-deep:#701f25;position:relative;padding:6px 8px 7px;border:1px solid #8b7148;background:linear-gradient(120deg,#201b19ee,#0d1013ee);box-shadow:0 2px 12px #000b,inset 0 0 0 2px #11171b;border-radius:2px}
.vitals::before,.vitals::after{content:'';position:absolute;top:50%;width:7px;height:7px;background:#b49a64;border:2px solid #2e2720;transform:translateY(-50%) rotate(45deg)}
.vitals::before{left:-5px}.vitals::after{right:-5px}
.vital-heading{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;font:10px/1.2 sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c8b690}
.vital-condition{letter-spacing:.08em;color:#a7b49b}
.vital-track{position:relative;overflow:hidden;height:22px;background:#10090c;border:1px solid #574035;box-shadow:inset 0 1px 5px #000}
.vital-track>i{position:absolute;inset:0 auto 0 0;pointer-events:none}
.vital-fill{background:linear-gradient(180deg,#f5a07f55,transparent 35%),linear-gradient(90deg,var(--blood-deep),var(--blood));box-shadow:inset 0 1px #e9957770,inset 0 -2px #31091180}
.vital-trail{background:#e2b475;opacity:.75}
.vital-marks{width:100%;background:repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),#180b0d80 calc(25% - 1px),#180b0d80 25%);z-index:1}
.vital-value{position:absolute;inset:0;text-align:center;font:600 13px/20px sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#fff2df;text-shadow:0 1px 3px #000,0 0 5px #000;z-index:2}
.vitals[data-severity=wounded]{--blood:#ce573c;--blood-deep:#6c2022}.vitals[data-severity=wounded] .vital-condition{color:#e5b67a}
.vitals[data-severity=critical]{--blood:#ed4a45;--blood-deep:#9d2630;border-color:#dc6a58;animation:vital-warning 1.8s ease-in-out infinite}.vitals[data-severity=critical] .vital-condition{color:#ff9e88}
.vitals[data-severity=empty]{filter:saturate(.25)}.vitals[data-severity=empty] .vital-condition{color:#b8aaa5}
.vitals[data-effect=hurt] .vital-track{outline:1px solid #ffb28d88}.vitals[data-effect=healing] .vital-track{outline:1px solid #b8e3ac99}
.vital-ward{position:relative;height:16px;margin-top:4px;background:#101c2a;border:1px solid #436d85}
.vital-ward[hidden]{display:none}.vital-ward>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#345477,#78b8ce)}
.vital-ward>span{position:absolute;inset:0;text-align:center;font:10px/14px sans-serif;color:#e3f6ff;text-shadow:0 1px 3px #000}
@keyframes vital-warning{50%{box-shadow:0 0 12px #e33d3533,inset 0 0 0 2px #381a1c}}
@media(prefers-reduced-motion:reduce){.vitals{animation:none!important}.bar .fill{transition:none}}
.touch-ui .vitals{padding:4px}.touch-ui .vital-heading{font-size:9px;letter-spacing:.06em}.touch-ui .vital-condition{display:none}.touch-ui .vital-value{font-size:12px}
.rinv .inventory-close{position:absolute;right:18px;top:18px;min-height:40px;z-index:5}
.rinv .loot-close{min-width:36px;min-height:36px;font:24px/1 sans-serif;padding:2px 8px}
.touch-ui .rinv .inventory-close{position:sticky;display:block;top:0;margin:0 0 10px auto;min-height:44px}
.spellbar{flex-wrap:wrap}.spellbar .abox{flex:none}
.touch-spells{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:290px;display:flex;gap:6px}.touch-spells button{min-height:42px;min-width:58px;font-size:11px}.touch-spells button[hidden]{display:none}
@media(max-height:540px) and (orientation:landscape){.touch-spells{bottom:215px}}

/* Cached icon art and the item action sheet share tooltip spacing. */
.glyph-icon{flex:none;object-fit:contain;vertical-align:middle}.fantasy-surface .glyph-icon{filter:none}
.book-slots .glyph-icon,.book-grid .glyph-icon{width:100%;height:100%;display:block}
.item-stats .tl>b{flex:none;white-space:nowrap}.item-tooltip .tn{font-size:16px;font-weight:bold}.touch-item-card .item-tooltip{min-width:0;max-width:none}
/* Touch notices sit below the compass, timer and floor label. */
.touch-ui .seatui:has(#hud)>.toasts{top:max(144px,calc(env(safe-area-inset-top) + 132px));width:min(320px,calc(100% - 28px));align-items:stretch}
.touch-ui .seatui:has(#hud)>.toasts .toast{padding:8px 12px;font:12px/1.4 var(--serif);background:#101416eb;text-align:center}
.touch-ui .spellname{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:338px;width:130px;font-size:12px;letter-spacing:0;line-height:17px}.touch-ui .spellname .kbd{font-size:10px;margin-left:2px}
@media(max-width:900px) and (orientation:landscape){.touch-ui .seatui:has(#hud)>.toasts{top:96px;width:min(300px,36%)}}
@media(max-height:540px) and (orientation:landscape){.touch-ui .spellname{bottom:263px}}