/* SKULL.EXE — [FOREVER] · retro-OS chrome over a black void (spec §6) */

:root {
  --bg: #050508;
  --bone: #e8e4da;
  --amber: #ffb347;
  --red: #ff4646;
  --panel: rgba(10, 10, 15, 0.84);
  --edge: #2b2b36;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --scrawl: "Segoe Print", "Comic Sans MS", "Chalkboard SE", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--bone); font-family: var(--mono); font-size: 13px; user-select: none; }
.hidden { display: none !important; }
.dim { color: #8a8a96; }
.scrawl { font-family: var(--scrawl); letter-spacing: 0.5px; }

#view, #view canvas { position: fixed; inset: 0; display: block; }

/* nameplates layer */
#plates { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.np { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; }
.np-name { font-size: 11px; color: #cfcfd8; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.np-title { display: block; font-size: 9px; color: #d4af37; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
.np-title.hidden { display: none; }
.np-mob .np-name { color: #ffb0a0; }
.np-remote .np-name { color: var(--amber); }
.np-npc .np-name { color: #d4af37; font-size: 12px; letter-spacing: 1px; }
.np-npc .np-hp { display: none; }
.np-smith .np-name { color: #d9a05a; font-size: 12px; letter-spacing: 1px; }
.np-smith .np-hp { display: none; }
.np-hp { width: 74px; height: 4px; margin: 2px auto 0; background: #1c1014; border: 1px solid #000; }
.np-hp i { display: block; height: 100%; background: linear-gradient(180deg, #ff7a5c, #c22c2c); }

/* atmosphere overlays */
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
#scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); }
#hurt-flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0;
  box-shadow: inset 0 0 120px 40px rgba(200, 20, 20, 0.55); transition: opacity .45s; }
#hurt-flash.flash { opacity: 1; transition: opacity .06s; }

/* fake OS frame */
#frame { position: fixed; inset: 8px; pointer-events: none; border: 1px solid var(--edge); z-index: 7; }
#frame::before, #frame::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--amber); border-style: solid; }
#frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
#frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
#frame-title { position: absolute; top: 4px; left: 14px; font-size: 12px; color: var(--amber); opacity: .8; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
.panel { background: var(--panel); border: 1px solid var(--edge); padding: 8px; }

#player-frame { position: absolute; top: 26px; left: 26px; display: flex; gap: 10px; align-items: center; }
#portrait { image-rendering: pixelated; border: 1px solid var(--edge); background: #000; }
.pf-col { display: flex; flex-direction: column; gap: 3px; min-width: 170px; }
.pf-name { font-weight: bold; color: var(--bone); }
.pf-class { font-size: 10px; letter-spacing: 1px; font-weight: normal; }
.pf-title { font-size: 10px; color: #d4af37; letter-spacing: 1px; }
.res-text { color: #9fc4e8; }
.bar { height: 10px; background: #150d10; border: 1px solid #000; position: relative; }
.bar i { display: block; height: 100%; width: 100%; transition: width .15s; }
.bar.hp i { background: linear-gradient(180deg, #ff6b5c, #b32626); }
.bar.xp i { background: linear-gradient(180deg, #ffcf7d, #c98a1e); }
.bar.res { height: 7px; }
.bar.res.mana i { background: linear-gradient(180deg, #7dc6ff, #1e5fa8); }
.bar.res.rage i { background: linear-gradient(180deg, #ff8a5c, #a8321e); }
.bar.tf { height: 12px; width: 240px; }
.bar.tf i { background: linear-gradient(180deg, #ffb347, #b3651e); }
#target-frame.friendly .bar.tf i { background: linear-gradient(180deg, #7dff8a, #2f9e4f); }
#target-frame.friendly .tf-name { color: #7dff8a; }
.res-text { color: #9fc4e8; }
.pf-hptext { font-size: 11px; color: #d8d8de; }
.pf-marrow { font-size: 11px; color: #d8c9a8; display: flex; align-items: center; gap: 5px; }
.marrow-gem { width: 8px; height: 8px; background: var(--amber); transform: rotate(45deg); display: inline-block;
  box-shadow: 0 0 6px rgba(255, 179, 71, .8); }
.pf-marrow b { color: var(--amber); }

#target-frame { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); text-align: center; }
.tf-name { color: #ffb0a0; font-weight: bold; margin-bottom: 4px; letter-spacing: 1px; }
.tf-range { font-size: 9px; color: var(--red); letter-spacing: 1px; margin-top: 3px; }

#hotbar { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.slot { position: relative; width: 54px; height: 54px; background: var(--panel); border: 1px solid var(--edge);
  pointer-events: auto; cursor: inherit; }
.slot:hover { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255, 179, 71, .3) inset; }
.slot:active { transform: translateY(1px); }
.slot .key { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #9a9aa6; z-index: 2; }
.slot .icon { position: absolute; inset: 10px; color: var(--bone); }
.slot .icon svg { width: 100%; height: 100%; }
.slot .cd { position: absolute; inset: 0; z-index: 2; }
.slot .cd-text { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3;
  color: #fff; font-weight: bold; font-size: 16px; text-shadow: 0 1px 3px #000; }
.slot.locked-level .icon { color: #4a4a55; }
.slot.locked-level .key { color: #4a4a55; }
.slot .lvl-lock { position: absolute; bottom: 3px; right: 4px; font-size: 9px; color: #8a8a96; z-index: 2; }

#xp-wrap { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 420px; text-align: center; }
#xp-text { font-size: 10px; margin-top: 2px; }

/* chat (spec §10): bottom-left pane, Enter to speak */
#chat { position: absolute; left: 26px; bottom: 150px; width: 360px; pointer-events: none; }
#chat-log { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; background: rgba(8, 8, 12, 0.55); border: 1px solid var(--edge); }
.chat-line { font-size: 12px; color: #d8d8de; text-shadow: 0 1px 2px #000; word-break: break-word; }
.chat-line b { color: var(--amber); font-weight: normal; }
.chat-line.self b { color: #ffd9a0; }
#chat-input { width: 100%; pointer-events: auto; margin-top: 4px; padding: 6px 8px;
  background: rgba(8, 8, 12, 0.85); border: 1px solid var(--amber); color: var(--bone);
  font-family: var(--mono); font-size: 13px; outline: none; }

/* right stack: death feed + quest tracker (spec §12 M2) */
#right-stack { position: absolute; top: 26px; right: 26px; width: 300px; display: flex; flex-direction: column; gap: 8px; }
#deathfeed .df-head { font-size: 11px; letter-spacing: 1px; color: #a05555; margin-bottom: 6px; }
#feed-list { display: flex; flex-direction: column; gap: 3px; }
.df-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: #d0d0d8; }
.df-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-name { color: #ffb0a0; }
.df-age { color: #6a6a76; flex: none; font-size: 10px; }
.df-empty { font-size: 11px; color: #6a6a76; }
#quest-tracker .qt-name { color: var(--amber); font-size: 12px; font-weight: bold; letter-spacing: .5px; }
#quest-tracker .qt-progress { font-size: 11px; color: #c8c8d0; margin-top: 3px; }

/* Skullkeeper dialog (spec §9) */
#dialog { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 3, 6, 0.45); }
.dialog-window { min-width: 480px; max-width: 560px; box-shadow: 0 20px 80px rgba(0, 0, 0, .8); }
#dialog-quest { color: var(--amber); font-weight: bold; letter-spacing: 1px; }
#dialog-text { font-size: 13px; line-height: 1.55; color: #d8d8de; min-height: 64px; }
.dlg-buttons { display: flex; gap: 8px; justify-content: flex-end; }

/* floating combat text (spec §6) */
#floats { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.float { position: absolute; font-weight: bold; font-size: 14px;
  text-shadow: 0 1px 3px #000, 0 0 6px #000; animation: floatUp .95s ease-out forwards; }
.float.dmg { color: #ffd9a0; }
.float.crit { color: var(--amber); font-size: 19px; }
.float.heal { color: #7dff8a; }
.float.mana { color: #7dc6ff; }
.float.absorb { color: #ffe08a; }
.float.hurt { color: var(--red); font-size: 15px; }
.float.info { color: #cfcfd8; font-size: 11px; letter-spacing: 1px; }
.float.item { color: #ffd9a0; font-size: 12px; }
@keyframes floatUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-46px); opacity: 0; } }

/* panels: character / bags / vendor (spec M5) */
.panel-window { position: fixed; z-index: 9; background: var(--panel); }
#char-panel { left: 26px; bottom: 200px; width: 330px; }
#bags-panel { right: 26px; bottom: 200px; width: 330px; }
#vendor-window { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 380px; }
.panel-window .win-body { padding: 12px; }
.doll { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.doll-col { display: flex; flex-direction: column; gap: 6px; }
#doll-portrait { image-rendering: pixelated; border: 1px solid var(--edge); background: #000; }
.equip-slot { width: 52px; height: 52px; background: #0c0c12; border: 1px solid var(--edge); position: relative;
  display: grid; place-items: center; pointer-events: auto; }
.equip-slot:hover { border-color: var(--amber); }
.equip-slot svg { width: 30px; height: 30px; }
.equip-slot .q-name { display: none; }
.char-stats { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #c8c8d0; }
.char-stats b { color: var(--amber); font-weight: normal; }
#bag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bag-cell { width: 66px; height: 66px; background: #0c0c12; border: 1px solid var(--edge); position: relative;
  display: grid; place-items: center; pointer-events: auto; cursor: inherit; }
.bag-cell:hover { border-color: var(--amber); }
.bag-cell svg { width: 32px; height: 32px; }
.bag-cell .count { position: absolute; bottom: 2px; right: 4px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; }
.bag-hint { font-size: 9px; color: #6a6a76; margin-top: 8px; }
.vendor-marrow { margin-bottom: 8px; }
#vendor-list { display: flex; flex-direction: column; gap: 6px; }
.vendor-row { display: flex; align-items: center; gap: 8px; background: #0c0c12; border: 1px solid var(--edge); padding: 6px 8px; }
.vendor-row svg { width: 24px; height: 24px; color: var(--amber); flex: none; }
.vendor-row .v-info { flex: 1; font-size: 11px; }
.vendor-row .v-price { color: var(--amber); font-size: 12px; }
.vendor-row button { padding: 4px 10px; font-size: 11px; }
.vendor-row.cant button { opacity: .4; }

/* party frames / duel banner / invites / minimap (spec M7) */
#party-frames { position: absolute; top: 170px; left: 26px; width: 180px; display: flex; flex-direction: column; gap: 6px; }
.party-frame { background: var(--panel); border: 1px solid var(--edge); padding: 6px 8px; pointer-events: auto; }
.party-frame:hover { border-color: var(--amber); }
.pf-name2 { font-size: 11px; color: #c8c8d0; margin-bottom: 3px; }
.party-frame .bar { height: 7px; }
#duel-banner { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); padding: 5px 12px;
  background: rgba(90, 20, 20, 0.85); border: 1px solid var(--red); color: #ffd9d9; font-size: 11px; letter-spacing: 1px; }
#invites { position: fixed; top: 130px; left: 50%; transform: translateX(-50%); z-index: 11;
  display: flex; flex-direction: column; gap: 6px; }
.invite-banner { background: var(--panel); border: 1px solid var(--amber); padding: 8px 12px; font-size: 12px;
  color: var(--bone); display: flex; gap: 8px; align-items: center; }
.invite-banner button { padding: 4px 10px; font-size: 10px; }
#minimap { position: relative; border: 1px solid var(--edge); background: #0a0a0f; image-rendering: auto; display: block; width: 150px; height: 150px; }

/* trade window (spec M7) */
#trade-window { left: 50%; top: 42%; transform: translate(-50%, -50%); width: 420px; }
.trade-cols { display: flex; gap: 12px; }
.trade-cols > div { flex: 1; }
.trade-col-head { font-size: 11px; color: var(--amber); letter-spacing: 1px; margin-bottom: 4px; }
.offer-list { min-height: 90px; background: #0c0c12; border: 1px solid var(--edge); padding: 4px;
  display: flex; flex-direction: column; gap: 3px; }
.offer-item { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 4px; background: #10101a; }
.offer-item svg { width: 16px; height: 16px; }
.offer-empty { color: #6a6a76; font-size: 10px; padding: 4px; }
.ready-flag { font-size: 10px; margin-top: 4px; color: #8a8a96; }
.ready-flag.ok { color: #7dff8a; }
#trade-ready-btn { width: 100%; margin-top: 8px; }
#trade-ready-btn.ok { background: var(--amber); color: #0a0a10; }

#menu-bar { position: absolute; right: 26px; bottom: 44px; display: flex; gap: 6px; }
.menu-btn { width: 46px; height: 46px; background: var(--panel); border: 1px solid var(--edge); color: var(--amber);
  display: grid; place-items: center; pointer-events: auto; cursor: inherit; padding: 0; }
.menu-btn:hover { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255, 179, 71, .3) inset; }
.menu-btn:active { transform: translateY(1px); }
.menu-btn svg { width: 26px; height: 26px; }

/* tooltip */
#tooltip { position: fixed; z-index: 12; background: rgba(8, 8, 12, 0.95); border: 1px solid var(--edge);
  padding: 8px 10px; max-width: 240px; font-size: 11px; pointer-events: none; }
.tip-name { font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.tip-sub { color: #8a8a96; font-size: 10px; margin-bottom: 4px; }
.tip-stat { color: #7dff8a; }
.tip-use { color: #7dc6ff; margin-top: 3px; }
.tip-price { color: var(--amber); margin-top: 4px; }
.tip-hint { color: #6a6a76; font-size: 10px; margin-top: 4px; }

/* floating combat text (spec §6) */
#floats { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.float { position: absolute; font-weight: bold; font-size: 14px;
  text-shadow: 0 1px 3px #000, 0 0 6px #000; animation: floatUp .95s ease-out forwards; }
.float.dmg { color: #ffd9a0; }
.float.crit { color: var(--amber); font-size: 19px; }
.float.heal { color: #7dff8a; }
.float.absorb { color: #ffe08a; }
.float.hurt { color: var(--red); font-size: 15px; }
.float.info { color: #cfcfd8; font-size: 11px; letter-spacing: 1px; }
@keyframes floatUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-46px); opacity: 0; } }

/* class picker (spec §7) */
#class-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.class-card { background: #0c0c12; border: 1px solid var(--edge); border-top: 2px solid var(--cc, var(--amber));
  padding: 8px 6px; cursor: inherit; color: var(--bone); font-family: var(--mono); text-align: center; }
.class-card:hover { border-color: var(--cc, var(--amber)); }
.class-card.sel { border-color: var(--cc, var(--amber)); box-shadow: 0 0 0 1px var(--cc, var(--amber)) inset; }
.cc-name { color: var(--cc, var(--amber)); font-weight: bold; font-size: 12px; margin-bottom: 4px; }
.cc-blurb { font-size: 9px; color: #8a8a96; line-height: 1.4; }

/* quest marker over the Skullkeeper (spec §9 presentation) */
.sk-marker { position: absolute; left: 0; top: 0; font-size: 30px; color: var(--amber);
  text-shadow: 0 2px 4px #000, 0 0 14px rgba(255, 179, 71, .55); }
.sk-marker.grey { color: #8a8a96; text-shadow: 0 2px 4px #000; }

/* boss cast bar (spec M6) */
.cast-bar { text-align: center; }
.cast-bar .cast-name { font-size: 11px; color: #ffb0a0; letter-spacing: 1px; text-shadow: 0 1px 3px #000; display: block; margin-bottom: 3px; }
.cast-fill-wrap { width: 160px; height: 9px; background: #150d10; border: 1px solid #000; margin: 0 auto; }
.cast-fill { display: block; height: 100%; width: 0%; background: linear-gradient(180deg, #ff8a5c, #a81414); }
.np-mob.boss .np-name { color: var(--red); font-weight: bold; }
.np-mob.boss .np-name::before { content: '☠ '; }
.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #0c0c12; border: 1px solid var(--edge); padding: 5px 8px; font-size: 12px; color: #c8c8d0; }
.rank-row button { padding: 3px 8px; font-size: 10px; }
.rank-row button:disabled { opacity: .4; }
#dlg-extras { display: flex; flex-direction: column; gap: 4px; }

/* toasts */
#toasts { position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%); z-index: 9;
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.toast { font-size: 13px; text-shadow: 0 1px 3px #000; animation: toast-in .12s ease-out; }
.toast.error { color: var(--red); font-weight: bold; }
.toast.info { color: var(--amber); }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }

/* screens */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  gap: 18px; background: rgba(3, 3, 6, 0.55); }
.window { background: var(--panel); border: 1px solid var(--edge); min-width: 380px; max-width: 430px; }
.titlebar { padding: 6px 10px; border-bottom: 1px solid var(--edge); background: rgba(20, 20, 28, 0.9);
  color: var(--amber); font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.tb-close { margin-left: auto; color: #8a8a96; font-family: var(--mono); padding: 0 3px; cursor: inherit; }
.tb-close:hover { color: var(--red); }
.win-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.lbl { font-size: 11px; color: #9a9aa6; letter-spacing: 1px; }
#name-input { background: #0a0a10; border: 1px solid var(--edge); color: var(--bone); padding: 8px 10px;
  font-family: var(--mono); font-size: 14px; outline: none; }
#name-input:focus { border-color: var(--amber); }
#style-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chip { display: flex; align-items: center; gap: 8px; background: #0c0c12; border: 1px solid var(--edge);
  padding: 6px 8px; cursor: pointer; color: var(--bone); font-family: var(--mono); font-size: 12px; }
.chip canvas { image-rendering: pixelated; }
.chip:hover { border-color: #55555f; }
.chip.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.hints { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: #8a8a96; }
kbd { border: 1px solid var(--edge); background: #101017; padding: 1px 5px; font-size: 10px; color: #c8c8d0; }
button { background: #14141c; border: 1px solid var(--amber); color: var(--amber); padding: 10px 16px;
  font-family: var(--mono); font-weight: bold; letter-spacing: 1px; cursor: inherit; }
button:hover { background: var(--amber); color: #0a0a10; }
.permadeath-note { font-size: 10px; color: #a05555; border-top: 1px dashed var(--edge); padding-top: 8px; }

.legacy-window { align-self: center; max-height: 74vh; }
.legacy-window .win-body { overflow-y: auto; }
#legacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.no-graves { color: #6a6a76; font-size: 12px; padding: 8px; }
.grave { background: #0c0c12; border: 1px solid var(--edge); padding: 6px 8px; display: flex; gap: 8px; align-items: center; }
.grave canvas { image-rendering: pixelated; filter: grayscale(.4); }
.g-name { font-size: 12px; color: #c8c8d0; }
.g-sub { font-size: 10px; color: #7a7a86; }
.g-cause { font-size: 9px; color: #a05555; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* crash dialog */
.crash { background: #17171e; border: 1px solid #3a3a44; min-width: 440px; box-shadow: 0 20px 80px rgba(0,0,0,.8); }
.crash-title { background: #7a1c1c; color: #ffd9d9; padding: 8px 12px; font-weight: bold; display: flex; gap: 8px; }
.crash-body { padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
#death-portrait { image-rendering: pixelated; border: 1px solid #3a3a44; background: #000; }
.crash-head { color: var(--red); font-weight: bold; font-size: 15px; margin-bottom: 10px; }
.fault { color: #ffb0a0; font-size: 12px; margin-bottom: 8px; }
.crash-body .line { font-size: 12px; color: #d0d0d8; margin-bottom: 5px; }
.crash-body .line.dim { color: #7a7a86; }
.crash button { margin: 0 18px 18px; }