/* Town service windows, bestiary, stash tabs, action-bar drag, buff chips, round close buttons and vendor trading. Linked after ui-layout.css. */
/* Emberwatch services reuse the ornate quest frame and existing icon atlas. */
.service-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; box-sizing: border-box; pointer-events: auto; background: rgba(15, 12, 8, .28); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.service-modal .service-frame { width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 40px); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding: 6px 20px 12px; color: #e5d5b9; font: 16px/1.45 Georgia, serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.service-frame > header { flex-shrink: 0; padding: 8px 0 20px; gap: 20px; border-bottom: 1px solid #b1935040; }
.service-frame h2, .service-frame h3 { text-wrap: balance; text-transform: none; letter-spacing: 0; }
.service-frame h3 { margin: 0 0 6px; font: 600 18px/1.35 Cinzel, Georgia, serif; color: #efd69c; }
.service-frame h3 small { margin-left: 12px; color: #9bc999; font: 13px Georgia, serif; }
.service-frame p { margin: 0 0 12px; text-wrap: pretty; }
.service-frame small { color: #b8ad97; font-size: 13px; }
.service-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 20px 10px 4px 0; scrollbar-color: #977742 #20170f; }
.service-intro { color: #d8cbb2; }
.service-current { color: #cbb478; font-size: 14px; padding-bottom: 8px; }
.service-option { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid #bd9f5529; }
.service-option p { margin: 0; font-size: 15px; color: #bfc0af; }
.service-frame button { min-height: 40px; padding: 8px 16px; flex-shrink: 0; font: 15px Georgia, serif; cursor: pointer; transition: transform .12s, filter .12s; }
.service-frame button:active, .stash-tabs button:active { transform: scale(.96); }
.service-frame button:focus-visible, .service-search input:focus-visible, .stash-tabs button:focus-visible { outline: 2px solid #f6d987; outline-offset: 3px; }
.service-frame button:disabled { opacity: .42; cursor: default; }
.service-active { box-shadow: inset 3px 0 #b7a365; padding-left: 12px; }
.service-reward, .service-rumor, .service-unmake { margin-top: 26px; padding-top: 20px; border-top: 1px solid #b1935055; }
.service-reward { color: #c8d6b2; }
.service-confirm { margin-top: 18px; padding: 16px; background: #8f512520; box-shadow: inset 0 0 0 1px #d2a15f55; }
.service-confirm > div { display: flex; gap: 12px; flex-wrap: wrap; }
.service-frame > footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding-top: 12px; border-top: 1px solid #b1935055; }
.service-gold { color: #ebc570; }
.service-notice { padding: 12px; color: #cfdfb0; background: #6f893b1f; }
.service-search { display: grid; gap: 6px; margin: 20px 0; font-size: 14px; color: #b8ad97; }
.service-search input { min-height: 40px; box-sizing: border-box; padding: 8px 12px; border: 1px solid #b1935055; background: #09070499; color: #eedfbe; font: 16px Georgia, serif; }
.bestiary-entry { padding: 20px 0; border-top: 1px solid #b193503b; }
.bestiary-summary { display: flex; align-items: center; gap: 20px; }
.bestiary-summary canvas, .service-trophy canvas { width: 84px; height: 90px; background: radial-gradient(ellipse, #a0853924, transparent 70%); }
.bestiary-summary p { font-variant-numeric: tabular-nums; color: #c7b075; }
.bestiary-resists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; margin: 10px 0; font-size: 14px; }
.bestiary-resists span { display: flex; justify-content: space-between; gap: 8px; }
.service-immune { color: #e98b79; }
.service-locked, .bestiary-lore { color: #a99e89; font-size: 14px; }
.bestiary-abilities { margin-top: 20px !important; }
.service-trophies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.service-trophy { text-align: center; }
.stash-tabs { display: flex; gap: 8px; margin: 8px 0; }
.stash-tabs button { min-height: 40px; flex: 1; font: 16px Georgia, serif; }
.stash-tabs [aria-selected="true"] { color: #ffe1a0; box-shadow: inset 0 -2px #ba9547; }
.stash-page-note { color: #b7ac95; font-size: 13px; margin: 10px 0 16px; }
.cw-gear-slot.bad { border-color: #ed6d5a; background-color: #65221d80; box-shadow: inset 0 0 20px #b1293f66; }
.cw-gear-slot.bad img { filter: sepia(.5) saturate(.6); opacity: .65; }
@media (max-width: 600px) { .service-modal { padding: 8px; } .service-modal .service-frame { width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding-left: 8px; padding-right: 8px; border-width: 14px; } .service-option { gap: 10px; } .service-frame h3 { font-size: 16px; } .bestiary-resists { grid-template-columns: repeat(2, 1fr); } }
/* Action bar drag and drop */
#skillGhost { position: fixed; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; opacity: .88; border-radius: 6px; box-shadow: 0 0 0 2px #d9a74a, 0 6px 14px rgba(0, 0, 0, .6); transform: scale(calc(var(--ui-zoom, 1))); }
#hud .aslot.drop { outline: 2px solid #ffd45a; outline-offset: -2px; box-shadow: inset 0 0 14px rgba(255, 212, 90, .45); }
/* Buff row: larger squares with painted icons, minutes past 60 s */
#buffs { gap: 6px; }
#buffs .hud-chip { width: 46px; height: 46px; padding: 3px; border-radius: 6px; border-color: #9a7a45; background: radial-gradient(circle at 50% 40%, #2a2016, #120e0a); }
#buffs .hud-chip.status { border-color: #9a4a3c; background: radial-gradient(circle at 50% 40%, #2a1614, #120b0a); }
#buffs .hud-chip img { width: 38px; height: 38px; border-radius: 4px; }
#buffs .hud-chip b { font-size: 26px; }
#buffs .hud-chip i { right: -3px; bottom: -6px; padding: 1px 4px; border: 1px solid #5d4426; border-radius: 4px; background: #120e0aee; color: #f7ead0; font: 600 12px/1 Georgia, serif; font-style: normal; }

/* One close button everywhere: the round bronze medallion (every window, dialog and panel uses .ui-close) */
.ui-close { width: 42px !important; height: 42px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-image: none !important; border-radius: 50% !important; background: url('assets/gen/ui/close.webp') center / contain no-repeat !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-shadow: none !important; box-shadow: 0 3px 8px rgba(0, 0, 0, .55) !important; cursor: pointer; transition: transform .14s, filter .14s; }
.ui-close:hover { filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 200, 90, .55)); transform: scale(1.06); }
.ui-close:active { transform: scale(.95); }
.quest-dialog > header .ui-close, .quest-log > header .ui-close { flex: 0 0 auto; margin-left: auto; }
.service-frame > header { position: relative; }
.service-frame > header .ui-close { position: absolute; right: 0; top: 2px; }

/* Inventory trading controls retain the established bronze surfaces and item artwork. */
.vendor-tabs { display:flex; gap:8px; margin:16px 0; }
.vendor-tabs button { flex:1; }
.vendor-tabs [aria-pressed="true"] { color:#ffe1a0; box-shadow:inset 0 -2px #ba9547; }
.vendor-tabs button,.junk-actions button,.junk-confirm button,.buyback-row button { margin:0; min-height:50px; font:16px Georgia,serif; }
.vendor-tabs button:focus-visible,.junk-actions button:focus-visible,.junk-confirm button:focus-visible,.buyback-row button:focus-visible { outline:2px solid #f6d987; outline-offset:2px; }
/* The vendor pages: the owner's pictures standing free on a thin gold rule, no button frame (owner, 2026-09-26: "i dont
   like those buttons, lets replace them but keep the icons"). The open page's picture is lit, with a small gold diamond
   on the rule under it; the others are dimmed and brighten on hover. The name is each button's aria-label and title;
   Buyback's count is a badge on its picture. (#ui #panelL: the generic button rule's :not(#id) outranks classes.) */
#ui #panelL .vendor-tabs { position:relative; display:flex; justify-content:space-evenly; align-items:flex-end; gap:0; margin:6px 0 16px; padding:0 0 10px; }
#ui #panelL .vendor-tabs::after { content:''; position:absolute; left:4%; right:4%; bottom:0; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(217,166,76,.6) 16%,rgba(217,166,76,.6) 84%,transparent); }
#ui #panelL .vendor-tabs .vtab { position:relative; flex:1 1 0; display:grid; place-items:center; min-width:0; min-height:0; height:auto; margin:0; padding:2px 0 4px; border:0; border-image:none; border-radius:10px; background:none; box-shadow:none; cursor:pointer; }
#ui #panelL .vendor-tabs .vtab[aria-pressed="true"]::after { content:''; position:absolute; left:50%; bottom:-15px; width:9px; height:9px; transform:translateX(-50%) rotate(45deg); background:linear-gradient(135deg,#ffe7a8,#c8872e); box-shadow:0 0 7px rgba(255,190,90,.75); pointer-events:none; }
#ui #panelL .vendor-tabs .vtab:focus-visible { outline:2px solid #f6d987; outline-offset:1px; }
.vendor-tabs .vtab-art { position:relative; display:inline-block; line-height:0; }
.vendor-tabs .vtab img { display:block; width:auto; height:58px; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.75)) saturate(.7) brightness(.68); transition:filter .15s,transform .15s; }
.vendor-tabs .vtab:hover img { filter:drop-shadow(0 3px 4px rgba(0,0,0,.75)) saturate(.95) brightness(.95); transform:translateY(-2px); }
.vendor-tabs .vtab[aria-pressed="true"] img { filter:drop-shadow(0 0 10px rgba(255,190,90,.5)) drop-shadow(0 3px 4px rgba(0,0,0,.75)); }
.vendor-tabs .vtab-count { position:absolute; right:-12px; bottom:-3px; padding:0 5px; font:700 11px/1.4 Georgia,serif; color:#f3e1ad; background:rgba(12,8,5,.85); border:1px solid rgba(217,166,76,.45); border-radius:8px; text-shadow:0 1px 1px #000; pointer-events:none; }
body.mobile .vendor-tabs .vtab img { height:50px; }
@media (prefers-reduced-motion: reduce) { .vendor-tabs .vtab img { transition:none; } }
.junk-actions { display:flex; align-items:center; gap:12px; margin-top:18px; }
.junk-actions span,.vendor-gold,.buyback-name small,.junk-confirm strong { font-variant-numeric:tabular-nums; }
.junk-actions span { font-size:16px; color:#d8c5a0; }
.junk-actions button:disabled { opacity:.5; cursor:default; }
.junk-note { margin:8px 0 16px; color:#b7ac95; font-size:15px; line-height:1.3; }
.junk-confirm { margin:16px 0; padding:14px; border:1px solid #a87a3b; background:#322216; }
.junk-confirm strong { display:block; color:#ffe1a0; font-size:20px; line-height:1.25; text-wrap:balance; }
.junk-confirm p { margin:10px 0 14px; font-size:16px; line-height:1.3; }
.junk-confirm > div { display:flex; gap:8px; }
.buyback-list { height:290px; overflow:auto; scrollbar-width:thin; scrollbar-color:#98703c #1b130b; }
.buyback-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid #5e4628; }
.buyback-icon { width:42px; height:56px; flex:none; display:grid; place-items:center; }
.buyback-icon img { max-width:100%; max-height:56px; }
.buyback-name { flex:1; min-width:0; font-size:17px; line-height:1.2; overflow-wrap:anywhere; }
.buyback-name small { display:block; margin-top:6px; color:#d8c5a0; font-size:15px; }
.buyback-row button { flex:none; }
.vendor-empty { margin:28px 14px; text-align:center; color:#b7ac95; }
/* Phones (heat, art/production/reports/heat.md): no backdrop blur behind the service windows; a darker veil instead. */
body.mobile .service-modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15, 12, 8, .55); }