/* Hootscape panels.css — right-rail panel contents, chatbox, parchment windows, right-click menu, modals, dialogue,
   level-up, quest-complete scroll, world map (DESIGN_BRIEF §2.3, §3.1, §3.6, §3.7, §3.8).
   Requires theme.css + ui.css. */

/* =====================================================================
   Panel (rail content 288x464 stone)
   ===================================================================== */
.panel {
  position: relative; width: var(--rail-w); height: var(--panel-h);
  background-color: var(--stone-fill); background-image: var(--noise);
  border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
  box-shadow: 0 0 0 1px var(--stone-lo), inset 0 0 0 1px rgba(0,0,0,.18);
  color: var(--txt-orange); overflow: hidden;
}
.panel-title { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 8px; margin: 2px 2px 0; font-family: var(--font-display); font-size: var(--fs-header); color: var(--txt-orange); text-shadow: 1px 1px 0 var(--outline-ink); background-color: var(--bark); background-image: var(--bark-grain); border-bottom: 2px solid var(--bark-grain-lo); box-shadow: inset 0 1px 0 var(--bark-grain-hi); }
.panel-title .sub { font-family: var(--font-ui); font-size: var(--fs-body); color: var(--txt-grey); }
.panel-body { position: relative; padding: 6px; height: calc(100% - 28px); }
.panel-body.scroll { overflow-y: auto; }
.panel-footer { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 8px; font-size: var(--fs-body); color: var(--txt-orange); background: rgba(36,30,22,.55); border-top: 1px solid var(--stone-lo); box-shadow: inset 0 1px 0 var(--stone-hi); }
.panel-footer b { color: var(--txt-white); font-weight: normal; }
.subtabs { display: flex; height: 24px; margin: 0 0 4px; border-bottom: 2px solid var(--stone-lo); box-shadow: 0 1px 0 var(--stone-hi); }
.subtab { flex: 1; display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); color: var(--txt-orange); cursor: pointer; border-right: 1px solid var(--stone-lo); }
.subtab:last-child { border-right: 0; }
.subtab:hover { color: var(--txt-yellow); }
.subtab.active { color: var(--txt-yellow); box-shadow: inset 0 -2px 0 var(--amber); }

/* --- Inventory: 4x7 slots of 48x44, coin + weight readout --- */
.inv-grid { display: grid; grid-template-columns: repeat(4, var(--slot-w)); grid-auto-rows: var(--slot-h); gap: 6px 12px; justify-content: center; margin: 10px auto 0; }
.inv-readout { display: flex; justify-content: space-between; padding: 2px 10px 0; font-size: var(--fs-body); color: var(--txt-orange); }
.inv-readout .coins { color: var(--gilt); }
.inv-readout .weight { color: var(--txt-white); }
.inv-readout .weight.heavy { color: var(--txt-red); }

/* --- Skills: 3 cols x 8 rows of 90x44 cells --- */
.skills-grid { display: grid; grid-template-columns: repeat(3, 90px); grid-auto-rows: 44px; gap: 0; justify-content: center; }
.skill-cell { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 4px; cursor: pointer; border-radius: 2px; }
.skill-cell:hover { background: var(--slot-hover); }
.skill-cell .icon { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.skill-cell .lvl { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; color: var(--txt-yellow); font-size: var(--fs-body); text-shadow: 1px 1px 0 var(--outline-ink); margin-left: auto; }
.skill-cell .lvl .cur { align-self: flex-start; }
.skill-cell .lvl .max { color: var(--txt-yellow); }
.skill-cell .lvl.boosted .cur { color: var(--txt-green); }
.skill-cell .lvl.drained .cur { color: var(--txt-red); }
.skill-cell .xp-ul { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; background: var(--stone-lo); }
.skill-cell .xp-ul i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: var(--txt-yellow); }
.skill-cell.maxed .lvl { color: var(--amber); }
.skill-cell.night .icon { filter: drop-shadow(0 0 2px var(--moonlight)); }

/* --- Worn equipment: paper doll with 11 slots over an owl-helmed silhouette --- */
.doll { position: relative; width: 272px; height: 230px; margin: 4px auto 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,180,58,.08), transparent 60%); }
.doll .silhouette { position: absolute; left: 50%; top: 10px; width: 84px; height: 200px; transform: translateX(-50%); background: rgba(36,30,22,.45); clip-path: polygon(38% 0, 62% 0, 70% 10%, 64% 22%, 90% 32%, 100% 60%, 88% 62%, 80% 48%, 80% 80%, 90% 100%, 10% 100%, 20% 80%, 20% 48%, 12% 62%, 0 60%, 10% 32%, 36% 22%, 30% 10%); }
.doll .eq-slot { position: absolute; width: var(--slot-w); height: var(--slot-h); display: flex; align-items: center; justify-content: center; background: rgba(36,30,22,.6); border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 rgba(110,92,63,.4); cursor: pointer; }
.doll .eq-slot:hover { background: var(--slot-hover); }
.doll .eq-slot .icon { width: 32px; height: 32px; image-rendering: pixelated; }
.doll .eq-slot.empty .icon { opacity: .35; }
.doll .eq-head { left: 112px; top: 0; }
.doll .eq-cape { left: 56px; top: 44px; } .doll .eq-neck { left: 112px; top: 44px; } .doll .eq-ammo { left: 168px; top: 44px; }
.doll .eq-weapon { left: 40px; top: 96px; } .doll .eq-body { left: 112px; top: 96px; } .doll .eq-shield { left: 184px; top: 96px; }
.doll .eq-legs { left: 112px; top: 140px; }
.doll .eq-hands { left: 40px; top: 184px; } .doll .eq-feet { left: 112px; top: 184px; } .doll .eq-ring { left: 184px; top: 184px; }
.eq-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 4px 8px; font-size: var(--fs-body); line-height: 18px; color: var(--txt-orange); }
.eq-stats h4 { grid-column: 1 / -1; font-weight: normal; color: var(--txt-yellow); font-family: var(--font-display); }
.eq-stats .v { color: var(--txt-white); } .eq-stats .v.pos { color: var(--txt-green); } .eq-stats .v.neg { color: var(--txt-red); }

/* --- Prayer: 5x6 grid of 30 prayers, lit amber when active --- */
.prayer-grid { display: grid; grid-template-columns: repeat(5, 50px); grid-auto-rows: 50px; gap: 2px; justify-content: center; }
.prayer { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.prayer .icon { width: 32px; height: 32px; image-rendering: pixelated; }
.prayer:hover { background: var(--slot-hover); }
.prayer.locked .icon { opacity: .35; filter: grayscale(1); }
.prayer.active { background: radial-gradient(circle, rgba(255,180,58,.65), rgba(255,180,58,.15) 70%, transparent 72%); box-shadow: 0 0 0 1px var(--amber); }
.prayer.quick::after { content: ""; position: absolute; right: 2px; top: 2px; width: 6px; height: 6px; background: var(--txt-green); box-shadow: 0 0 0 1px var(--outline-ink); }
.prayer-readout { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 0; font-size: var(--fs-body); }
.prayer-readout .drain { color: var(--txt-cyan); }

/* --- Spellbook: 5 columns --- */
.spell-grid { display: grid; grid-template-columns: repeat(5, 50px); grid-auto-rows: 44px; gap: 2px; justify-content: center; }
.spell { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.spell .icon { width: 32px; height: 32px; image-rendering: pixelated; }
.spell:hover { background: var(--slot-hover); }
.spell.locked .icon { opacity: .35; filter: grayscale(1); }
.spell.autocast { box-shadow: inset 0 0 0 1px var(--txt-cyan); }
.spell-rune { color: var(--txt-white); } .spell-rune.short { color: var(--txt-red); }

/* --- Quest list: red / yellow / green rows --- */
.quest-list .row { display: flex; align-items: center; height: 22px; padding: 0 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quest-list .row:hover { background: var(--slot-hover); }
.quest-list .row.todo { color: var(--txt-red); }
.quest-list .row.started { color: var(--txt-yellow); }
.quest-list .row.done { color: var(--txt-green); }
.quest-list .row .star { color: var(--amber); margin-right: 4px; }
.quest-list .row .tracked { margin-left: auto; color: var(--txt-cyan); }
.quest-points { padding: 4px 6px; color: var(--txt-orange); }
.quest-points b { color: var(--txt-white); font-weight: normal; }
.diary-grid { display: grid; grid-template-columns: 1fr repeat(4, 36px); gap: 2px 4px; align-items: center; padding: 0 6px; font-size: var(--fs-body); }
.diary-grid .tier { text-align: center; }
.diary-grid .tier.done { color: var(--txt-green); } .diary-grid .tier.part { color: var(--txt-yellow); } .diary-grid .tier.none { color: var(--txt-red); }
.ach-row { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; }
.ach-row .icon { width: 16px; height: 16px; }
.ach-row .pct { margin-left: auto; color: var(--txt-cyan); }
.ach-row.done { color: var(--txt-green); }
.ach-row.near { color: var(--txt-yellow); }

/* --- Friends: telephone wire with perched owls on top, OSRS list below --- */
.wire { position: relative; height: 96px; margin: 2px 0 4px; background: linear-gradient(to bottom, transparent 54px, var(--stone-lo) 54px, var(--stone-lo) 56px, transparent 56px), linear-gradient(to bottom, transparent 55px, var(--bark-grain-hi) 55px, var(--bark-grain-hi) 56px, transparent 56px); }
.wire .pole { position: absolute; bottom: 0; width: 6px; height: 96px; background-color: var(--bark); background-image: var(--bark-grain); border: 1px solid var(--stone-lo); }
.wire .pole.l { left: 6px; } .wire .pole.r { right: 6px; }
.wire .pole::before { content: ""; position: absolute; left: -6px; top: 36px; width: 16px; height: 4px; background: var(--bark); border: 1px solid var(--stone-lo); }
.wire .owl { position: absolute; top: 34px; width: 16px; height: 22px; image-rendering: pixelated; cursor: pointer; background: var(--owl-open) no-repeat center top; background-size: 16px 16px; }
.wire .owl::after { content: ""; position: absolute; left: 3px; bottom: 0; width: 10px; height: 6px; background: var(--owl-open); background-size: 16px 16px; background-position: 0 -10px; opacity: 0; }
.wire .owl.offline { filter: brightness(.55); background-image: var(--owl-shut); }
.wire .owl.roosting::before { content: "z"; position: absolute; right: -8px; top: -10px; color: var(--moonlight); font-size: var(--fs-min); text-shadow: 1px 1px 0 var(--outline-ink); animation: zzz 2s ease-in-out infinite; }
@keyframes zzz { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
.friend-row { display: flex; align-items: center; height: 22px; padding: 0 6px; cursor: pointer; white-space: nowrap; }
.friend-row:hover { background: var(--slot-hover); }
.friend-row .name { color: var(--txt-white); }
.friend-row.online .name { color: var(--txt-green); }
.friend-row .where { margin-left: auto; color: var(--txt-orange); }
.friend-row.roosting .where { color: var(--moonlight); }
.friend-row.offline .name, .friend-row.offline .where { color: var(--txt-red); }

/* --- Parliament: party / clan --- */
.party-list .row { display: grid; grid-template-columns: 18px 1fr 60px 20px; gap: 4px; align-items: center; height: 24px; padding: 0 6px; }
.party-list .row .crown { color: var(--amber); }
.party-list .role { color: var(--txt-cyan); }
.party-list .ready { color: var(--txt-green); }
.party-list .notready { color: var(--txt-red); }
.loot-mode { display: flex; gap: 4px; padding: 4px 6px; }
.crest { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--stone-lo); background: var(--stone-lo); }
.clan-rank { color: var(--txt-clan); }
.motd { padding: 4px 6px; color: var(--txt-yellow); }

/* --- Settings --- */
.setting { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px; }
.setting label { color: var(--txt-orange); white-space: nowrap; }
.setting .val { color: var(--txt-white); text-align: right; min-width: 36px; }

/* --- Emotes: grid of 20x20 icons at 2x --- */
.emote-grid { display: grid; grid-template-columns: repeat(5, 50px); grid-auto-rows: 50px; gap: 2px; justify-content: center; }
.emote { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.emote .icon { width: 40px; height: 40px; image-rendering: pixelated; }
.emote:hover { background: var(--slot-hover); }
.emote.locked .icon { opacity: .3; filter: grayscale(1); }

/* --- Music player: track list green / red --- */
.track-list .row { display: flex; align-items: center; height: 20px; padding: 0 6px; cursor: pointer; white-space: nowrap; }
.track-list .row:hover { background: var(--slot-hover); }
.track-list .row.unlocked { color: var(--txt-green); }
.track-list .row.locked { color: var(--txt-red); cursor: default; }
.track-list .row.playing { color: var(--txt-white); }
.now-playing { display: flex; align-items: center; gap: 6px; padding: 4px 6px; color: var(--txt-orange); }
.now-playing b { color: var(--txt-white); font-weight: normal; }

/* --- Account & Owl Link --- */
.node-dots { display: inline-flex; gap: 6px; align-items: center; }
.node-dot { display: inline-flex; align-items: center; gap: 3px; color: var(--txt-owllink); }
.node-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--txt-green); box-shadow: 0 0 0 1px var(--outline-ink); }
.node-dot.down::before { background: var(--txt-red); }
.node-dot.slow::before { background: var(--txt-yellow); }

/* --- Logout --- */
.logout-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; }
.logout-wrap .hint { color: var(--txt-grey); text-align: center; }

/* =====================================================================
   Chatbox (0,800 → 560x200): bark tab row 24px, --chat-paper pane, input 24px
   ===================================================================== */
#chat.stone, .chatbox { padding: 0; }
.chat-grip { position: absolute; left: 0; right: 0; top: -3px; height: 6px; cursor: ns-resize; z-index: 2; }
.chat-tabs { display: flex; flex: 0 0 var(--chat-tabs); height: var(--chat-tabs); background-color: var(--bark); background-image: var(--bark-grain); border-bottom: 2px solid var(--bark-grain-lo); box-shadow: inset 0 1px 0 var(--bark-grain-hi); }
.chat-tab { position: relative; flex: 1 1 auto; min-width: 0; padding: 0 3px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); line-height: 1; color: var(--txt-orange); text-shadow: 1px 1px 0 var(--outline-ink); cursor: pointer; border-right: 1px solid var(--bark-grain-lo); white-space: nowrap; overflow: hidden; }
.chat-tab:last-child { border-right: 0; }
.chat-tab:hover { color: var(--txt-yellow); box-shadow: inset 0 1px 0 var(--amber); }
.chat-tab.active { color: var(--txt-yellow); background: rgba(36,30,22,.5); box-shadow: inset 0 -2px 0 var(--amber); }
.chat-tab.unread { animation: chat-unread 1s steps(1) infinite; }
.chat-tab.report { color: var(--txt-red); }
/* channel filter state (On / Friends / Off): a 4px pip under the label, the word lives in the tab's title tooltip */
.chat-tab .filter { position: absolute; left: 50%; bottom: 2px; width: 12px; height: 3px; margin-left: -6px; overflow: hidden; color: transparent; background: var(--txt-grey); box-shadow: 0 0 0 1px var(--outline-ink); }
.chat-tab.off .filter { background: var(--txt-red); } .chat-tab.friends .filter { background: var(--txt-yellow); } .chat-tab.on .filter { background: var(--txt-green); } .chat-tab.hide .filter { background: var(--txt-grey); }
@keyframes chat-unread { 50% { color: var(--txt-white); } }
.chat-paper { position: relative; flex: 1 1 auto; min-height: 0; background: var(--chat-paper); color: var(--parchment-ink); padding: 2px 4px; font-size: var(--fs-body); line-height: var(--chat-line); overflow-y: auto; overflow-x: hidden; }
.chat-paper .scroll-inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.chat-line { height: var(--chat-line); line-height: var(--chat-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--parchment-ink); }
.chat-line .ts { color: var(--txt-grey); margin-right: 4px; }
.chat-line .name { color: var(--txt-white); text-shadow: 1px 1px 0 var(--outline-ink); }
.chat-line .name.me { color: var(--txt-white); }
.chat-line .name.friend { color: var(--txt-green); }
.chat-line .name.bot { color: var(--txt-bot); }
.chat-line .name.npc { color: var(--txt-yellow); }
.chat-line .badge { display: inline-block; width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; image-rendering: pixelated; }
.chat-line .badge.mod { background: var(--eq-steel); clip-path: polygon(20% 0, 80% 0, 100% 30%, 70% 100%, 30% 100%, 0 30%); }
.chat-line .badge.admin { background: var(--gilt); clip-path: polygon(20% 0, 80% 0, 100% 30%, 70% 100%, 30% 100%, 0 30%); }
.chat-line .msg { color: var(--txt-input); }
.chat-line.game { color: var(--txt-red); }
.chat-line.game .msg { color: var(--txt-red); }
.chat-line.public .msg { color: var(--txt-input); }
.chat-line.private { color: var(--txt-cyan); }
.chat-line.private .msg { color: var(--txt-cyan); }
.chat-line.party { color: var(--txt-party); } .chat-line.party .msg { color: var(--txt-party); }
.chat-line.clan { color: var(--txt-clan); } .chat-line.clan .msg { color: var(--txt-clan); }
.chat-line.trade .msg { color: var(--txt-orange); }
.chat-line.owllink { color: var(--txt-owllink); } .chat-line.owllink .msg { color: var(--txt-owllink); }
.chat-line.bot .msg { color: var(--txt-bot); }
.chat-line.levelup .msg { color: var(--txt-yellow); text-shadow: 1px 1px 0 var(--outline-ink); }
.chat-line.success .msg { color: var(--txt-green); }
.chat-line.gz .msg { color: var(--amber-deep); }
.chat-line .name, .chat-line.private, .chat-line.clan .msg, .chat-line.trade .msg, .chat-line.owllink .msg, .chat-line.bot .msg, .chat-line.levelup .msg, .chat-line.success .msg, .chat-line .name.bot, .chat-line .name.friend {
  text-shadow: 1px 0 0 var(--outline-ink), -1px 0 0 var(--outline-ink), 0 1px 0 var(--outline-ink), 0 -1px 0 var(--outline-ink);
}
.chat-line .icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin: 0 2px; image-rendering: pixelated; }
.chat-input { display: flex; align-items: center; flex: 0 0 var(--chat-input); height: var(--chat-input); padding: 0 6px; gap: 4px; background: var(--chat-paper); border-top: 1px solid var(--parchment-rule); color: var(--parchment-ink); font-size: var(--fs-body); line-height: 1; }
.chat-input .chat-name { color: var(--txt-white); text-shadow: 1px 1px 0 var(--outline-ink); white-space: nowrap; }
.chat-input input { flex: 1; min-width: 0; outline: none; color: var(--txt-input); caret-color: var(--txt-input); background: transparent; }
.chat-input input::placeholder { color: var(--txt-grey); }
.chat-input .cursor { color: var(--txt-input); animation: blink-dot 1s steps(1) infinite; }

/* =====================================================================
   Parchment (quest journal page, Night Report, diaries, dialogue)
   ===================================================================== */
.parchment {
  position: relative; background: var(--parchment); color: var(--parchment-ink);
  box-shadow: inset 0 0 0 4px var(--parchment), inset 0 0 0 6px var(--parchment-rule), 0 0 0 1px var(--stone-lo), 3px 3px 0 rgba(0,0,0,.45);
  padding: 12px 14px; font-size: var(--fs-body); line-height: 20px;
}
.parchment h2, .parchment .pq-title { font-family: var(--font-display); font-size: var(--fs-header); color: var(--parchment-red); text-align: center; margin-bottom: 6px; }
.parchment h3 { font-family: var(--font-ui); font-size: var(--fs-body); color: var(--parchment-red); margin: 6px 0 2px; font-weight: normal; }
.parchment .rule { height: 2px; background: var(--parchment-rule); box-shadow: none; margin: 4px 0 6px; }
.parchment p { margin: 0 0 4px; }
.parchment .ink { color: var(--parchment-ink); }
.parchment .faded { color: #7B6648; }
.parchment .num { color: var(--parchment-red); }
.parchment .scroll::-webkit-scrollbar-track { background: var(--parchment-rule); }
.pq-step { display: flex; align-items: flex-start; gap: 6px; line-height: 20px; }
.pq-step .box { flex: none; width: 14px; height: 14px; margin-top: 3px; border: 2px solid var(--parchment-ink); background: transparent; display: flex; align-items: center; justify-content: center; font-size: var(--fs-min); line-height: 1; color: var(--parchment-red); }
.pq-step.done { color: #7B6648; text-decoration: line-through; }
.pq-step.done .box::after { content: "\2714"; }
.pq-step.current { color: var(--parchment-ink); }
.pq-step.current .box { border-color: var(--parchment-red); box-shadow: 0 0 0 1px var(--parchment-red); }
.parchment:has(> .seal) { padding-bottom: 66px; }
.seal { position: absolute; right: 14px; bottom: 10px; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #B23A2F, var(--parchment-red) 60%, #5E1010); color: var(--gilt); font-family: var(--font-display); font-size: var(--fs-min); line-height: 1; text-shadow: 1px 1px 0 #3B0A0A; box-shadow: 0 0 0 2px rgba(142,27,27,.35), 2px 2px 0 rgba(0,0,0,.35); cursor: pointer; clip-path: polygon(50% 0, 61% 8%, 74% 4%, 80% 16%, 94% 18%, 93% 32%, 100% 42%, 93% 54%, 96% 68%, 85% 76%, 83% 90%, 70% 90%, 60% 100%, 48% 94%, 36% 100%, 28% 90%, 15% 90%, 12% 76%, 2% 68%, 6% 54%, 0 42%, 7% 30%, 6% 16%, 20% 14%, 27% 4%, 39% 8%); }
.seal:hover { filter: brightness(1.12); }
.seal.on { color: var(--txt-white); }
.stamp { display: inline-block; padding: 2px 6px; border: 2px solid var(--parchment-red); color: var(--parchment-red); font-family: var(--font-display); transform: rotate(-6deg); animation: stamp var(--t-stamp) cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp { from { transform: rotate(-6deg) scale(1.6); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
/* Night Report parchment (300 ms slide-in). Not `.report`: that is the chat's Report tab. */
.night-report { animation: report-in var(--t-report) ease-out; }
@keyframes report-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.night-report .tally { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
.night-report .tally .v { text-align: right; color: var(--parchment-red); }

/* --- Dialogue box: docks over the chatbox; head 64x64 left, options 1–5 --- */
.dialogue { position: absolute; z-index: 7; left: 0; bottom: 0; width: var(--chat-w); height: var(--chat-h); display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto 1fr auto; column-gap: 8px; padding: 10px 14px; }
.dialogue-head { grid-row: 1 / 4; width: 64px; height: 64px; margin-top: 4px; background: rgba(59,42,20,.12); border: 2px solid var(--parchment-rule); display: flex; align-items: flex-end; justify-content: center; image-rendering: pixelated; }
.dialogue-head .icon { width: 64px; height: 64px; }
.dialogue-name { color: var(--parchment-red); font-size: var(--fs-header); line-height: 1; margin-bottom: 4px; text-align: center; }
.dialogue-text { color: var(--parchment-ink); font-size: var(--fs-body); line-height: 20px; text-align: center; align-self: center; }
.dialogue-continue { color: var(--txt-input); text-align: center; cursor: pointer; }
.dialogue-continue:hover { color: var(--parchment-red); }
.dialogue-options { grid-column: 1 / 3; display: flex; flex-direction: column; align-items: center; }
.dialogue-option { display: flex; gap: 8px; cursor: pointer; color: var(--parchment-ink); line-height: 20px; }
.dialogue-option .n { color: var(--parchment-red); min-width: 14px; text-align: right; }
.dialogue-option:hover { color: var(--parchment-red); }
.dialogue-title { grid-column: 1 / 3; text-align: center; color: var(--parchment-red); font-size: var(--fs-header); }

/* =====================================================================
   Right-click menu: --menu-bg, 1px --menu-head border, "Choose Option" header, orange rows, yellow hover
   ===================================================================== */
.menu { position: absolute; min-width: 120px; background: var(--menu-bg); border: 1px solid var(--menu-head); box-shadow: 2px 2px 0 rgba(0,0,0,.6); font-size: var(--fs-body); line-height: 1; z-index: 30; }
.menu-head { height: 20px; padding: 0 4px; display: flex; align-items: center; background: var(--menu-head); color: var(--txt-white); white-space: nowrap; }
.menu-head::before { content: "Choose Option"; }
.menu-head.custom::before { content: none; }
.menu-item { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 4px; color: var(--txt-orange); cursor: pointer; white-space: nowrap; }
.menu-item:hover { color: var(--txt-yellow); background: rgba(93,84,71,.35); }
.menu-item .target { color: var(--txt-cyan); }
.menu-item .target.npc { color: var(--txt-yellow); }
.menu-item .target.player { color: var(--txt-white); }
.menu-item .target.item { color: var(--txt-orange); }
.menu-item .lvl { color: var(--txt-green); }
.menu-item .lvl.above { color: var(--txt-red); }
.menu-item.cancel { color: var(--txt-orange); }
.menu-item.disabled { color: var(--txt-grey); cursor: default; }
.menu-item .key { margin-left: auto; padding-left: 12px; color: var(--txt-grey); }

/* =====================================================================
   Modals (520x360 centred; world dims 40% behind)
   ===================================================================== */
.modal { position: relative; width: var(--modal-w); height: var(--modal-h); display: flex; flex-direction: column; background-color: var(--stone-fill); background-image: var(--noise); border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); box-shadow: 0 0 0 1px var(--stone-lo), 4px 4px 0 rgba(0,0,0,.5); color: var(--txt-orange); }
.modal-tall { height: 400px; }
.modal-title { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; position: relative; margin: 2px; font-family: var(--font-display); font-size: var(--fs-header); color: var(--txt-orange); text-shadow: 1px 1px 0 var(--outline-ink); background-color: var(--bark); background-image: var(--bark-grain); border-bottom: 2px solid var(--bark-grain-lo); box-shadow: inset 0 1px 0 var(--bark-grain-hi); }
.modal-close { position: absolute; right: 4px; top: 3px; width: 20px; height: 20px; padding: 0; min-height: 0; font-size: var(--fs-min); }
.modal-body { flex: 1 1 auto; min-height: 0; padding: 8px; position: relative; }
.modal-body.scroll { overflow-y: auto; }
.modal-foot { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 0 8px; border-top: 2px solid var(--stone-lo); box-shadow: inset 0 1px 0 var(--stone-hi); }

/* Bank: 8 cols, tabs, search, placeholders */
.bank-tabs { display: flex; gap: 2px; margin-bottom: 4px; }
.bank-tab { width: 44px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(36,30,22,.5); border: 1px solid var(--stone-lo); cursor: pointer; }
.bank-tab.active { box-shadow: inset 0 -2px 0 var(--amber); background: rgba(36,30,22,.8); }
.bank-grid { display: grid; grid-template-columns: repeat(8, var(--slot-w)); grid-auto-rows: var(--slot-h); justify-content: center; }
.bank-grid .slot.placeholder .icon { opacity: .3; filter: grayscale(1); }
.bank-search { width: 150px; flex: 0 1 150px; }
.bank-cap { color: var(--txt-orange); white-space: nowrap; }
.bank-cap b { color: var(--txt-white); font-weight: normal; }

/* Shop, trade, Grand Hootchange */
.shop-grid { display: grid; grid-template-columns: repeat(8, var(--slot-w)); grid-auto-rows: var(--slot-h); justify-content: center; }
.trade-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
.trade-side { background: rgba(36,30,22,.4); border: 1px solid var(--stone-lo); padding: 4px; }
.trade-side h4 { font-weight: normal; color: var(--txt-yellow); text-align: center; }
.trade-grid { display: grid; grid-template-columns: repeat(4, var(--slot-w)); grid-auto-rows: var(--slot-h); justify-content: center; }
.trade-status { text-align: center; color: var(--txt-cyan); }
.ge-offer { display: grid; grid-template-columns: var(--slot-w) 1fr auto; gap: 6px; align-items: center; padding: 4px; border: 1px solid var(--stone-lo); background: rgba(36,30,22,.4); }
.ge-offer .bar { height: 6px; }
.ge-offer.buy .bar i { background: var(--txt-green); } .ge-offer.sell .bar i { background: var(--amber); }
.ge-price { color: var(--gilt); }

/* Owlraid board / Roost Planner */
.board-row { display: grid; grid-template-columns: 32px 1fr 80px 60px; gap: 6px; align-items: center; height: 28px; padding: 0 4px; border-bottom: 1px solid var(--stone-lo); }
.board-row .when { color: var(--txt-cyan); } .board-row .slots { color: var(--txt-white); }
.planner-steps { display: flex; flex-direction: column; gap: 2px; }
.planner-step { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center; height: 26px; padding: 0 4px; background: rgba(36,30,22,.4); border: 1px solid var(--stone-lo); }
.planner-step .n { color: var(--txt-yellow); } .planner-step .stop { color: var(--txt-cyan); }

/* =====================================================================
   Level-up panel (520x360): Pixelify title, skill icon, flashing stars
   ===================================================================== */
.levelup .modal-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.levelup-title { font-family: var(--font-display); font-size: 26px; color: var(--txt-yellow); text-shadow: 2px 2px 0 var(--outline-ink); }
.levelup-skill { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.levelup-skill .icon { width: 64px; height: 64px; image-rendering: pixelated; }
.levelup-star { position: absolute; width: 14px; height: 14px; background: var(--txt-yellow); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: star-flash .8s steps(1) infinite; }
/* counted among the stars only, so the skill icon may sit anywhere in .levelup-skill */
.levelup-star:nth-child(1 of .levelup-star) { left: 0; top: 10px; animation-delay: 0s; } .levelup-star:nth-child(2 of .levelup-star) { right: 0; top: 4px; animation-delay: .2s; } .levelup-star:nth-child(3 of .levelup-star) { left: 8px; bottom: 6px; animation-delay: .4s; } .levelup-star:nth-child(4 of .levelup-star) { right: 10px; bottom: 0; animation-delay: .6s; } .levelup-star:nth-child(5 of .levelup-star) { left: 44px; top: -4px; animation-delay: .3s; }
@keyframes star-flash { 50% { opacity: .15; transform: scale(.7); } }
.levelup-line { color: var(--txt-white); font-size: var(--fs-header); }
.levelup-line b { color: var(--txt-yellow); font-weight: normal; }
.levelup-continue { color: var(--txt-yellow); cursor: pointer; }
.levelup-continue:hover { color: var(--txt-white); }
.levelup.ninety-nine .levelup-title { color: var(--amber); }

/* =====================================================================
   Quest-complete scroll (480x320 parchment; the ONLY place .blackletter is allowed)
   ===================================================================== */
.questscroll { width: 480px; height: 320px; display: grid; grid-template-columns: 1fr 150px; grid-template-rows: auto 1fr auto; column-gap: 10px; padding: 16px 20px; }
.questscroll .blackletter { grid-column: 1 / 3; font-family: var(--font-blackletter); font-weight: 700; font-size: 30px; line-height: 1; text-align: center; color: var(--parchment-red); margin-bottom: 8px; }
/* .blackletter outside a .questscroll renders as plain VT323 on purpose (brief §2.2 lint: one component only) */
.blackletter:not(.questscroll .blackletter) { font-family: var(--font-ui); font-weight: normal; }
.questscroll-rewards { list-style: none; }
.questscroll-rewards li { display: flex; align-items: center; gap: 6px; line-height: 22px; }
.questscroll-rewards li .icon { width: 20px; height: 20px; }
.questscroll-rewards li .num { color: var(--parchment-red); }
.questscroll-art { display: flex; align-items: center; justify-content: center; background: rgba(59,42,20,.1); border: 2px solid var(--parchment-rule); }
.questscroll-art .icon { width: 96px; height: 96px; image-rendering: pixelated; }
.questscroll-qp { grid-column: 1 / 3; text-align: center; color: var(--parchment-red); }
.questscroll-qp b { color: var(--parchment-ink); font-weight: normal; }
.questscroll-close { grid-column: 1 / 3; text-align: center; color: var(--txt-input); cursor: pointer; }

/* =====================================================================
   World map: full screen with a 48px stone border, parchment inside
   ===================================================================== */
.worldmap { position: absolute; inset: 0; padding: var(--map-border); background-color: var(--stone-fill); background-image: var(--noise); border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); z-index: 25; }
.worldmap-paper { position: relative; width: 100%; height: 100%; background: var(--parchment); box-shadow: inset 0 0 0 2px var(--parchment-rule), inset 0 0 0 3px var(--parchment); overflow: hidden; cursor: crosshair; }
.worldmap-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.worldmap-label { position: absolute; font-family: var(--font-display); font-size: 22px; color: var(--parchment-ink); text-shadow: 1px 1px 0 var(--parchment); white-space: nowrap; pointer-events: none; letter-spacing: 1px; }
.worldmap-label.town { color: var(--parchment-red); }
.worldmap-legend { position: absolute; right: 12px; bottom: 12px; width: 200px; padding: 6px 8px; background: var(--parchment); box-shadow: inset 0 0 0 2px var(--parchment-rule), 2px 2px 0 rgba(0,0,0,.3); color: var(--parchment-ink); font-size: var(--fs-body); line-height: 20px; }
.worldmap-legend .k { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--parchment-ink); }
.worldmap-title { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-family: var(--font-display); font-size: 24px; color: var(--txt-orange); text-shadow: 2px 2px 0 var(--outline-ink); white-space: nowrap; }
.worldmap-close { position: absolute; right: 56px; top: 9px; z-index: 4; }
.worldmap-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 0 1px var(--outline-ink); }
.worldmap-lantern { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--torch); box-shadow: 0 0 6px 2px rgba(255,140,26,.6); }
.worldmap-you { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--txt-yellow); box-shadow: 0 0 0 1px var(--outline-ink); animation: blink-dot 1s steps(1) infinite; }

/* =====================================================================
   Achievement banner / level-up chat flash
   ===================================================================== */
.banner { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); padding: 8px 18px; font-family: var(--font-display); font-size: 24px; color: var(--amber); text-shadow: 2px 2px 0 var(--outline-ink); background-color: var(--stone-base); background-image: var(--noise); border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); box-shadow: 0 0 0 1px var(--stone-lo), 3px 3px 0 rgba(0,0,0,.5); white-space: nowrap; animation: stamp var(--t-stamp) cubic-bezier(.2,1.6,.4,1); z-index: 9; }