/* ===== Roster UI theme (in-game): ink-black panels, ember accent, hard corners. Loaded LAST.
   Keeps the generated slot textures (--skin-slot); drops leaf ornaments + wood/green skins. ===== */
:root {
  --ink: #0c0e12; --slate: #151922; --slate2: #1d222d; --edge: #2a303c; --edge2: #3a4252;
  --bone: #e9e4d6; --dim: #7d8594; --ember: #ff8a4c; --ember-hi: #ffa06c;
  --hud-leaf: url('/assets/ui/forest-chronicle/corner-v1.png'); --hud-divider: url('/assets/ui/forest-chronicle/divider-v1.png'); --hud-metal: #2a303c;
}

/* --- HUD panels --- */
#hotbar, #char-hud, #hud-target, #menu-bar, #party-panel, #pvp-board, #portal-info, #chat,
#hud-zone, #hud-dmod, #xp-boost-badge, #food-badge, #temper-badge, #torch-badge, #auto-ind, #dung-banner {
  background: var(--ink) !important; background-image: none !important;
  border: 1px solid var(--edge) !important; border-radius: 0 !important;
  box-shadow: 0 10px 28px #000a, inset 0 1px 0 #ffffff08 !important; color: var(--bone);
}
#chat { background: linear-gradient(90deg, #0c0e12e6, #0c0e1255) !important; }
#hotbar, #char-hud { box-shadow: 0 10px 28px #000a, inset 0 2px 0 var(--ember) !important; }
#minimap { border: 1px solid var(--edge2) !important; outline: 0 !important; border-radius: 0 !important; box-shadow: 0 4px 16px #000a !important; }
#hud-yang, #hud-dc, #hud-ping { background: #0c0e12e0 !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; }

/* --- bars --- */
.bar, #char-hud .bar, #hud-target .bar { background: #07080b !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: none !important; }
.bar::before { display: none; }
.bar .fill { border-radius: 0 !important; box-shadow: none !important; }
#char-hud .bar.hp .fill, #hud-target .bar.hp .fill { background: linear-gradient(#e0574a, #a82f2c) !important; }
#char-hud .bar.mp .fill { background: linear-gradient(#4fa3d8, #2a6aa0) !important; }
#char-hud .bar.xp .fill { background: linear-gradient(#ffb066, #e0742a) !important; }
#hud-name .char-lvl { background: var(--slate) !important; border: 1px solid var(--ember) !important; color: var(--ember) !important; border-radius: 0 !important; box-shadow: none !important; }

/* --- hotbar / menu --- */
#hotbar .hot-slot, .hot-slot {
  background-color: var(--slate) !important; background-image: var(--skin-slot, none) !important;
  border: 1px solid var(--edge2) !important; border-radius: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 1px #00000066 !important;
}
.hot-slot:hover { border-color: var(--ember) !important; }
#hotbar .hot-slot .key, .hot-slot .key { background: var(--ink) !important; border: 1px solid var(--edge2) !important; color: var(--ember) !important; border-radius: 0 !important; }
#hotbar .hb-mode, .hb-mode { background: var(--slate) !important; border: 1px solid var(--edge) !important; color: var(--dim) !important; border-radius: 0 !important; }
.hb-mode:hover { color: var(--bone) !important; border-color: var(--edge2) !important; }
.hb-mode.active { background: var(--slate2) !important; color: var(--ember) !important; border-color: var(--ember) !important; box-shadow: none !important; }
#menu-bar .menu-btn, .menu-btn {
  background: var(--slate) !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--bone) !important;
}
#menu-bar .menu-btn::after { background: none !important; }
#menu-bar .menu-btn:hover { background: var(--slate2) !important; border-color: var(--edge2) !important; }
#menu-bar .menu-btn.active { background: var(--slate2) !important; border-color: var(--ember) !important; box-shadow: inset 3px 0 var(--ember) !important; transform: none; }
#menu-bar .menu-btn .mk, .menu-btn .mk { color: var(--ember) !important; }
#menu-bar .menu-btn .menu-asset { filter: drop-shadow(0 1px 0 #000) !important; }
#chat-filters .chat-filter, .chat-filter { border: 1px solid var(--edge) !important; border-radius: 0 !important; color: var(--dim); box-shadow: none !important; }
.chat-filter.on { background: var(--slate2) !important; color: var(--ember) !important; border-color: var(--ember) !important; }
#chat-input { background: var(--ink) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: none !important; }

/* --- windows --- */
.win, .win.rpg-modal-win, .win:not(.inv-win), .win.rpg-modal-win:not(.inv-win), .cosm-slide, .mob-sheet-panel {
  background: var(--ink) !important; background-image: none !important;
  border: 1px solid var(--edge2) !important; border-radius: 0 !important;
  box-shadow: 0 24px 60px #000c !important; color: var(--bone);
}
.win .win-title, .win:not(.inv-win) .win-title, .inv-win .win-title, .cosm-slide-head, .mob-sheet-head {
  background: var(--slate) !important; background-image: none !important;
  border-bottom: 1px solid var(--edge) !important; box-shadow: inset 0 2px 0 var(--ember) !important;
  color: var(--bone) !important; font-family: 'Outfit', sans-serif !important; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 12px;
}
.win .win-body, .win:not(.inv-win) .win-body { background: transparent !important; background-image: none !important; }
.win .win-title .x { background: transparent !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; color: var(--dim) !important; box-shadow: none !important; }
.win .win-title .x:hover { color: var(--ember) !important; border-color: var(--ember) !important; }
:root[class] .win .win-title, :root[class] .win .win-body, :root[class] .npc-speech, :root[class] #tooltip { background-image: none !important; }

/* --- cards / tabs / slots --- */
.win :is(.skill-card, .quest-card, .pet-card, .bb-arena, .trade-col, .bsp-cols, .wb-panel, .premium-detail, .cos-card) {
  background: var(--slate) !important; background-image: none !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; box-shadow: none !important;
}
.win :is(.guild-title, .bp-section-h, .fr-head, .pet-feed-head, .trade-h, .wb-panel h3, .aw-cur) { background-image: none !important; border-bottom: 1px solid var(--edge) !important; }
.inv-tab, .win :is(.inv-tab, .guild-tab, .sk-filter, .premium-nav-btn, .bank-tab, .quest-tab, .mail-tab), .sv-tab {
  background: var(--slate) !important; background-image: none !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; color: var(--dim) !important; box-shadow: none !important;
}
.inv-tab.active, .sv-tab.active, .win :is(.guild-tab, .bank-tab, .quest-tab, .mail-tab, .premium-nav-btn).active {
  background: var(--slate2) !important; color: var(--ember) !important; border-color: var(--ember) !important;
}
.inv-slot, .eq-slot, .sv-slot, .shop-slot, .bank-slot {
  background-color: var(--slate) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px #00000066 !important;
}
.inv-slot:hover, .eq-slot:hover, .shop-slot:hover, .bank-slot:hover { border-color: var(--ember) !important; }
.eq-slot.eq-empty { background-color: #0c0e1280 !important; border-style: dashed !important; border-color: var(--edge) !important; }

/* --- buttons --- */
.rpg-btn, .win .rpg-btn {
  background: var(--slate2) !important; background-image: none !important; color: var(--bone) !important;
  border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
  font-weight: 700; letter-spacing: 1.5px;
}
.rpg-btn:hover { border-color: var(--ember) !important; color: var(--ember-hi) !important; background: #232936 !important; }

.rpg-btn.btn-accept, .win .rpg-btn.btn-accept { background: var(--ember) !important; color: #140a04 !important; border-color: var(--ember) !important; }
.rpg-btn.btn-accept:hover { background: var(--ember-hi) !important; color: #140a04 !important; }
.rpg-btn.danger { background: #3a1614 !important; border-color: #7a2c28 !important; color: #ffb4a8 !important; }

/* --- tooltips / small overlays --- */
#tooltip, #tooltip-compare, .center-notice-item, .shot-toast, .fish-prompt-inner, .fd-panel, .fi-box, .dv-tut-box, .dv-sum, .npc-speech, .quest-progress-popup, .mail-toast {
  background: var(--ink) !important; background-image: none !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: 0 8px 24px #000b !important; color: var(--bone);
}
.quest-progress-popup { box-shadow: 0 8px 24px #000b, inset 0 2px 0 var(--ember) !important; }
.fd-head, .dv-top { background-image: none !important; border-bottom: 1px solid var(--edge) !important; }

/* --- specificity bump: forest-ui.css targets .win.inv-win with !important --- */
html .win, html .win.inv-win, html .win.rpg-modal-win {
  background: var(--ink) !important; background-image: none !important; border-color: var(--edge2) !important; border-radius: 0 !important;
}
html .inv-win .win-body { background: transparent !important; }
html .inv-win .win-title { padding-left: 16px; padding-right: 48px; min-height: 40px; }
html .inv-win .eq-doll, html .win.eqdoll-win .eq-doll {
  background: radial-gradient(ellipse 60% 40% at 50% 78%, #ff8a4c26, transparent 70%), linear-gradient(180deg, #11151c, #0a0c10) !important;
  border: 1px solid var(--edge) !important; border-radius: 0 !important;
}
html .inv-win :is(.inv-slot, .eq-slot) { background-image: var(--skin-slot, none) !important; }
html .inv-win :is(.rpg-btn, .inv-tab, .inv-filter-btn) { background-image: none !important; background-color: var(--slate) !important; border-radius: 0 !important; border-color: var(--edge2) !important; }
html .inv-win .inv-filter-btn.active, html .inv-win .inv-tab.active { background-color: var(--slate2) !important; border-color: var(--ember) !important; color: var(--ember) !important; }
html .inv-win .inv-search, html .inv-win input { background: var(--ink) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: none !important; }
html .inv-win .inv-currency { border-top: 1px solid var(--edge); padding-top: 9px; }

/* --- forest-ui variables + recurring green components --- */
:root { --forest-panel: #0c0e12; --forest-inset: #07080b; --forest-edge: #3a4252; --forest-brass: #ff8a4c; --forest-text: #e9e4d6; --forest-muted: #7d8594; --forest-active: #1d222d; }
html .win :is(.sk-banner, .skill-card, .sk-filter, .sk-util-btn, .gs-skill, .sk-detail, .sk-list-item, .sk-row) {
  background: var(--slate) !important; background-image: none !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--bone);
}
html .win :is(.sk-filter.on, .skill-card.sel, .skill-card.selected, .skill-card.active, .skill-card.on, .sk-util-btn:hover, .skill-card:hover) {
  background: var(--slate2) !important; border-color: var(--ember) !important; box-shadow: inset 3px 0 var(--ember) !important; color: var(--bone) !important;
}
html .win button:not(.x):not(.rpg-btn):not(.inv-tab):not(.menu-btn) {
  background: var(--slate2); background-image: none; border: 1px solid var(--edge2); border-radius: 0; color: var(--bone); box-shadow: none; text-shadow: none;
}
html .win button:not(.x):not(.rpg-btn):hover { border-color: var(--ember); color: var(--ember-hi); }
html .win :is(h1, h2, h3, h4, .win-sub) { color: var(--bone); }
html .win :is(.sk-banner, .skill-card) :is(b, strong, .skill-card-name) { color: var(--bone) !important; }

/* --- leftover green panels (found by scanning every preview window) --- */
html .win :is(.bank-head, .bank-lock, .bank-silver-panel, .bb-result, .bp-head, .bp-quest, .bp-row, .character-section, .combat-cell, .dl-cell, .dl-showcase,
  .fr-head, .fr-row, .graphics-section, .guild-tab-body, .journal-detail, .mail-list, .mail-read, .mail-row, .menu-hero, .menu-settings-row, .npc-portrait,
  .pc-foot, .pd-desc, .pd-price, .pi-loot, .pi-tag, .pn-ic, .premium-balance, .premium-hero, .premium-nav, .qty, .rb-path, .settings-nav, .settings-shell,
  .shop-slot-price, .shop-to, .stat-pts-row, .stat-row, .trade-grid-slot, .trade-h) {
  background-color: var(--slate) !important; background-image: none !important; border-color: var(--edge) !important; border-radius: 0 !important; box-shadow: none !important;
}
html .win :is(.settings-tab, .social-tab, .social-tabs, .premium-nav-btn) { background: var(--slate) !important; background-image: none !important; border-color: var(--edge) !important; border-radius: 0 !important; color: var(--dim) !important; }
html .win :is(.settings-tab, .social-tab, .premium-nav-btn).active, html .win :is(.settings-tab, .social-tab, .premium-nav-btn).on { background: var(--slate2) !important; color: var(--ember) !important; border-color: var(--ember) !important; }
html #portal-info :is(.pi-close, .pi-enter) { border-radius: 0 !important; }
html .sk-detail, html .win .skill-detail, html .win [class*="skill-detail"] { border-color: var(--edge) !important; background: var(--slate) !important; }

/* --- login / char loading + auth screen --- */
#login-loading { background: #05060aeb !important; }
#login-loading .ll-card { background: var(--ink) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: 0 20px 60px #000c, inset 0 2px 0 var(--ember) !important; }
#login-loading .ll-text { color: var(--bone) !important; letter-spacing: 2px; text-transform: uppercase; font-size: 12px !important; }
#login-loading .ll-sub { color: var(--dim) !important; }
#screen-auth .auth-panel { background: var(--ink) !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; box-shadow: 0 30px 80px #000c, inset 0 2px 0 var(--ember) !important; }
#screen-auth .auth-panel :is(input:not([type="range"])) { background: var(--slate) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--bone) !important; }
#screen-auth .auth-panel :is(input:not([type="range"])):focus { border-color: var(--ember) !important; }
#screen-auth .auth-panel button { background: var(--slate2) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; color: var(--bone) !important; letter-spacing: 1.5px; box-shadow: none !important; }
#screen-auth .auth-panel button:hover { border-color: var(--ember) !important; color: var(--ember-hi) !important; }
#screen-auth .auth-panel button#btn-login { background: var(--ember) !important; color: #140a04 !important; border-color: var(--ember) !important; }
#login-loading .ll-spinner { border-color: #ff8a4c2e !important; border-top-color: var(--ember) !important; border-radius: 0 !important; }
html :is(.pi-close, .pi-loot, .pi-tag, .qty) { background-color: var(--slate) !important; background-image: none !important; border-color: var(--edge) !important; border-radius: 0 !important; box-shadow: none !important; }
html :is(.hero-banner, .character-profile) { background: linear-gradient(180deg, #11151c, #0a0c10) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: inset 0 2px 0 var(--ember) !important; }
/* title ornament must not collide with title text / content below */
html .win .win-title { padding-bottom: 16px; margin-bottom: 8px; }
html .win .win-title::after { bottom: -9px; opacity: .9; pointer-events: none; }
/* ornament below the title was painted over by the (later) body -> lift the title above it */
html .win .win-title { position: relative; z-index: 6; overflow: visible; }
html .win .win-title::after { z-index: 7; height: 20px; bottom: -11px; }
/* hotbar: divider gets its own band between the F-tabs and the slots (was cutting through both) */
html #hotbar .hb-modes { padding-bottom: 20px; margin-bottom: 4px; }
html #hotbar .hb-modes::after { bottom: 0; height: 18px; left: 18%; right: 18%; z-index: 0; opacity: .85; }
html #hotbar .hb-mode { position: relative; z-index: 1; }
html #hotbar::before, html #hotbar::after { width: 52px; height: 52px; }

/* --- character select + login: same generated ornaments as the in-game windows --- */
#screen-chars .chars-panel, #screen-auth .auth-panel { position: relative; }
#screen-chars .chars-panel::before, #screen-chars .chars-panel::after,
#screen-auth .auth-panel::before, #screen-auth .auth-panel::after {
  content: '' !important; display: block !important; position: absolute; width: 74px; height: 74px; border: 0 !important;
  background: var(--hud-leaf) center/contain no-repeat !important; pointer-events: none; z-index: 3;
}
#screen-chars .chars-panel::before, #screen-auth .auth-panel::before { top: 0; left: 0; right: auto; bottom: auto; }
#screen-chars .chars-panel::after, #screen-auth .auth-panel::after { bottom: 0; right: 0; left: auto; top: auto; transform: scale(-1); }
#screen-chars .chars-panel > h2 { position: relative; text-align: center; border-bottom: 0; padding-bottom: 26px; margin-bottom: 14px; color: var(--bone) !important; }
#screen-chars .chars-panel > h2::after, #screen-auth .auth-panel .game-title::after {
  content: ''; position: absolute; left: 15%; right: 15%; bottom: 0; height: 20px; background: var(--hud-divider) center/100% auto no-repeat; pointer-events: none;
}
#screen-auth .auth-panel .game-title { position: relative; padding-bottom: 22px; margin-bottom: 10px; }
#screen-chars #btn-enter-char { clip-path: none; }

/* --- screen-corner frame: replace the bronze filigree with slim ember brackets --- */
#hud-frame .hf-corner { display: none !important; }
#hud-frame {
  --b: #ff8a4c99;
  background:
    linear-gradient(var(--b), var(--b)) left 10px top 10px / 34px 2px no-repeat, linear-gradient(var(--b), var(--b)) left 10px top 10px / 2px 34px no-repeat,
    linear-gradient(var(--b), var(--b)) right 10px top 10px / 34px 2px no-repeat, linear-gradient(var(--b), var(--b)) right 10px top 10px / 2px 34px no-repeat,
    linear-gradient(var(--b), var(--b)) left 10px bottom 10px / 34px 2px no-repeat, linear-gradient(var(--b), var(--b)) left 10px bottom 10px / 2px 34px no-repeat,
    linear-gradient(var(--b), var(--b)) right 10px bottom 10px / 34px 2px no-repeat, linear-gradient(var(--b), var(--b)) right 10px bottom 10px / 2px 34px no-repeat;
}

/* character select: scale the panel to the window height so nothing is cut (logo stays visible above) */
#screen-chars { padding-top: 130px; padding-bottom: 12px; }
#screen-chars .chars-panel { transform-origin: top center; padding: 22px 26px 24px; }
#screen-chars .chars-panel > h2 { padding-bottom: 22px; margin-bottom: 8px; }
#screen-chars .char-select-layout { min-height: 340px; }
@media (max-height: 900px) { #screen-chars { padding-top: 110px; } #screen-chars .chars-panel { transform: scale(.92); } }
@media (max-height: 800px) { #screen-chars { padding-top: 96px; } #screen-chars .chars-panel { transform: scale(.82); } }
@media (max-height: 700px) { #screen-chars { padding-top: 80px; } #screen-chars .chars-panel { transform: scale(.72); } }
@media (max-height: 600px) { #screen-chars { padding-top: 64px; } #screen-chars .chars-panel { transform: scale(.62); } }

/* ROOT CAUSE of the "cut" ornament: divider-v1.png is 3:1 with lots of empty margin; `100% auto` in a 16-20px box showed only the middle slice
   (diamond + leaves cropped). Size it by a fixed WIDTH so the ornament band (~22% of image height) fits the box exactly. */
html .win .win-title::after, #screen-chars .chars-panel > h2::after, #screen-auth .auth-panel .game-title::after {
  height: 36px !important; bottom: -18px !important; left: 0 !important; right: 0 !important;
  background: var(--hud-divider) center / 440px auto no-repeat !important;
}
#screen-chars .chars-panel > h2::after, #screen-auth .auth-panel .game-title::after { bottom: -6px !important; }
#screen-chars .chars-panel > h2 { padding-bottom: 30px; }
html #hotbar .hb-modes::after { height: 26px !important; left: 0 !important; right: 0 !important; bottom: -3px !important; background: var(--hud-divider) center / 300px auto no-repeat !important; }
html #hud-name::after { height: 22px !important; bottom: -9px !important; background: var(--hud-divider) center / 220px auto no-repeat !important; }
html #portal-info .pi-hero::after, html .cosm-slide-head::after, html .mob-sheet-head::after, html .fd-head, html .dv-top {
  background-size: 360px auto !important;
}
html #portal-info .pi-hero::after, html .cosm-slide-head::after, html .mob-sheet-head::after { height: 30px !important; bottom: -14px !important; background-repeat: no-repeat !important; background-position: center !important; }
.dmt-fallback svg { width: 38px; height: 38px; opacity: .75; color: #b9a487; }

/* Fit character selection to phones and short landscape viewports without scaling controls. */
@media (max-width: 1100px), (max-height: 760px), (pointer: coarse) {
  #screen-chars, .mobile #screen-chars {
    align-items: center; justify-content: center; overflow: hidden;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  #screen-chars .chars-panel {
    width: min(980px, 100%); max-width: 100%; height: 100%; max-height: 720px;
    min-height: 0; flex-shrink: 1; margin: 0; padding: 12px; transform: none !important; overflow: hidden; gap: 8px;
  }
  #screen-chars .chars-panel > h2 { flex: none; font-size: 13px; margin: 0; padding-bottom: 24px; letter-spacing: 3px; }
  #screen-chars .char-select-layout { flex: 1; min-height: 0; min-width: 0; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 10px; overflow: hidden; }
  #screen-chars .char-select-list { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
  #screen-chars #char-list { display: flex; flex-direction: column; max-height: none; overflow: visible; }
  #screen-chars .char-row { min-height: 54px; padding: 6px 10px; }
  #screen-chars #char-showcase { min-height: 0; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  #screen-chars .char-showcase-stage { min-height: 0; }
  #screen-chars #char-showcase-model { width: min(180px, 100%); height: min(240px, 48dvh); }
  #screen-chars .char-showcase-info { min-height: 0; padding: 10px; overflow: hidden; gap: 6px; }
  #screen-chars #char-showcase-name { font-size: 22px; margin: 0; }
  #screen-chars #char-showcase-stats { margin-bottom: 0; flex-shrink: 0; }
  #screen-chars #char-showcase-equipment { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #screen-chars #btn-enter-char { flex-shrink: 0; margin-top: 0; min-height: 44px; padding: 10px !important; }
  #screen-chars #btn-char-back, #screen-chars #btn-new-char { min-height: 44px; padding: 8px !important; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #screen-chars .char-select-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(100px, .65fr) minmax(0, 1.35fr); }
  #screen-chars #char-showcase { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); }
  #screen-chars .char-row { min-height: 48px; }
  #screen-chars #char-showcase-class { font-size: 10px; letter-spacing: 1px; }
  #screen-chars #char-showcase-name { font-size: 20px; }
}

/* ===== Settings (graphics) layout redesign — desktop: top tab strip, 2-column flowing cards, rows with controls on the right ===== */
body:not(.mobile) .settings-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
body:not(.mobile) .settings-nav {
  flex-direction: row; gap: 0; padding: 0 14px; overflow: visible; background: var(--slate) !important;
  border-right: 0 !important; border-bottom: 1px solid var(--edge) !important;
}
body:not(.mobile) .settings-tab {
  display: flex !important; align-items: center; gap: 8px; width: auto !important; min-height: 46px !important; padding: 0 18px !important;
  background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important;
  color: var(--dim) !important; text-transform: uppercase; letter-spacing: 1.6px;
}
body:not(.mobile) .settings-tab small, body:not(.mobile) .settings-tab-chevron { display: none !important; }
body:not(.mobile) .settings-tab b { font: 700 12px/1 'Outfit', sans-serif; }
body:not(.mobile) .settings-tab-icon { width: 18px; height: 18px; font-size: 14px; color: inherit; }
body:not(.mobile) .settings-tab:hover { color: var(--bone) !important; background: #ffffff06 !important; }
body:not(.mobile) .settings-tab.active { color: var(--ember) !important; border-bottom-color: var(--ember) !important; background: transparent !important; box-shadow: none !important; }
body:not(.mobile) .settings-pages { padding: 20px 26px 26px; }
body:not(.mobile) .settings-page.active { display: block; columns: 2 330px; column-gap: 20px; }
body:not(.mobile) .settings-page-head { column-span: all; border: 0; padding: 0 0 16px; gap: 0; }
body:not(.mobile) .settings-page-head > span { display: none; }
body:not(.mobile) .settings-page-head h3 { color: var(--bone); font: 700 22px/1.1 'Cinzel', serif; }
body:not(.mobile) .settings-page-head p { color: var(--dim); font-size: 12px; margin-top: 5px; }

.graphics-remake .graphics-section {
  break-inside: avoid; margin: 0 0 20px !important; padding: 4px 18px 6px !important;
  background: var(--slate) !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; box-shadow: inset 0 2px 0 var(--ember) !important;
}
.graphics-remake .graphics-section-title {
  margin: 0 !important; padding: 13px 0 11px; border-bottom: 1px solid var(--edge);
  color: var(--bone) !important; font: 700 11px/1 'Outfit', sans-serif !important; letter-spacing: 2.4px; text-transform: uppercase;
}
.graphics-remake .graphics-section > label {
  display: flex !important; align-items: center; justify-content: space-between; gap: 18px; margin: 0 !important; padding: 12px 0;
  border-top: 1px solid #ffffff0a; color: var(--bone) !important; font-size: 13px !important; cursor: pointer;
}
.graphics-remake .graphics-section > .graphics-section-title + label { border-top: 0; }
.graphics-remake .graphics-section > label:has(> input[type="checkbox"]) { flex-direction: row-reverse; }
/* checkbox -> toggle switch */
.graphics-remake .graphics-section input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none !important; width: 38px !important; height: 20px !important;
  background: var(--ink); border: 1px solid var(--edge2); border-radius: 0; cursor: pointer; transition: background .15s, border-color .15s;
}
.graphics-remake .graphics-section input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--dim); transition: transform .15s, background .15s;
}
.graphics-remake .graphics-section input[type="checkbox"]:checked { background: #ff8a4c26; border-color: var(--ember); }
.graphics-remake .graphics-section input[type="checkbox"]:checked::after { transform: translateX(18px); background: var(--ember); }
.graphics-remake .graphics-section input[type="checkbox"]:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.graphics-remake .graphics-section select {
  min-width: 170px !important; padding: 8px 10px !important; background: var(--ink) !important; border: 1px solid var(--edge2) !important;
  border-radius: 0 !important; color: var(--bone) !important; font: 600 12px 'Outfit', sans-serif;
}
.graphics-remake .graphics-section select:focus { border-color: var(--ember) !important; outline: 0; }
.graphics-remake .graphics-section input[type="range"] { accent-color: var(--ember); }
.graphics-remake .graphics-section > div:not(.graphics-section-title) { color: var(--dim) !important; font-size: 12px !important; }
.graphics-remake .hud-editor-settings { column-span: none; margin-bottom: 20px !important; }
.graphics-remake .graphics-section select { width: 210px !important; min-width: 0 !important; }
.graphics-remake .hud-editor-settings { padding: 4px 18px 14px !important; }
body:not(.mobile) .settings-page[data-page="performance"].active, body:not(.mobile) .settings-page[data-page="controls"].active { columns: 1; max-width: 760px; }
.settings-perf-log-summary { background: var(--ink) !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; color: var(--bone) !important; }
.settings-perf-log-title { border-top-color: var(--edge) !important; color: var(--bone) !important; }
.settings-perf-log-hint { color: var(--dim) !important; }
.graphics-remake .graphics-section button { border-radius: 0 !important; }

/* ===== Quest journal layout redesign: top tab strip, flat status list (stripe per state) + roomy detail pane ===== */
html #win-quests { width: min(900px, 94vw); max-width: 94vw; }
html #win-quests > .win-body { padding: 0 !important; max-height: 76vh; display: flex; flex-direction: column; overflow: hidden; }
html #win-quests .inv-tabs { display: flex; gap: 0 !important; margin: 0 !important; padding: 0 14px; background: var(--slate); border-bottom: 1px solid var(--edge); flex: none; }
html #win-quests .inv-tab {
  flex: 0 0 auto !important; padding: 0 22px !important; min-height: 46px; display: flex; align-items: center; background: transparent !important; border: 0 !important;
  border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--dim) !important; font: 700 12px 'Outfit', sans-serif !important; letter-spacing: 1.6px; text-transform: uppercase;
}
html #win-quests .inv-tab:hover { color: var(--bone) !important; }
html #win-quests .inv-tab.active { color: var(--ember) !important; border-bottom-color: var(--ember) !important; background: transparent !important; }
html #win-quests .journal-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 0; align-items: stretch; min-height: 0; flex: 1; }
html #win-quests .journal-index { gap: 0; padding: 8px 0; max-height: none; height: 100%; overflow-y: auto; background: #0a0c10; border-right: 1px solid var(--edge); }
html #win-quests .journal-entry {
  position: relative; min-height: 62px; padding: 11px 16px 11px 20px; background: transparent !important; border: 0 !important; border-bottom: 1px solid #ffffff08 !important;
  border-radius: 0 !important; box-shadow: none !important; color: var(--bone) !important; font: 600 13px/1.3 'Outfit', sans-serif !important;
}
html #win-quests .journal-entry::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--edge2); }
html #win-quests .journal-entry small { margin-top: 4px; color: var(--dim) !important; font: 700 10px 'Outfit', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
html #win-quests .journal-entry[data-state="ready"]::before { background: var(--ember); }
html #win-quests .journal-entry[data-state="ready"] small { color: var(--ember) !important; }
html #win-quests .journal-entry[data-state="active"]::before { background: #4d9fff; }
html #win-quests .journal-entry[data-state="active"] small { color: #7ab8ff !important; }
html #win-quests .journal-entry[data-state="done"] { opacity: .5; }
html #win-quests .journal-entry:hover { background: #ffffff06 !important; }
html #win-quests .journal-entry.selected { background: var(--slate2) !important; box-shadow: none !important; }
html #win-quests .journal-entry.selected::before { width: 5px; background: var(--ember); }
html #win-quests .journal-detail { padding: 26px 30px; background: transparent !important; border: 0 !important; overflow-y: auto; }
html #win-quests .journal-detail .qcard:not(.journal-inactive) { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 22px; align-items: start; opacity: 1; box-shadow: none !important; border: 0 !important; }
html #win-quests .qc-icon { width: 72px !important; height: 72px !important; display: grid; place-items: center; background: var(--slate) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; box-shadow: inset 0 2px 0 var(--ember) !important; animation: none !important; }
html #win-quests .qcard.qc-ready .qc-icon::after { background: var(--ember) !important; color: #140a04 !important; border-radius: 0 !important; }
html #win-quests .qc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html #win-quests .qc-title { color: var(--bone) !important; font: 700 26px/1.15 'Cinzel', serif !important; margin-right: auto; }
html #win-quests .qc-lv { color: var(--dim) !important; background: transparent !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; padding: 2px 8px; font: 700 11px 'Outfit', sans-serif; }
html #win-quests .qcard .qc-state { margin-left: 0 !important; border-radius: 0 !important; padding: 3px 9px; font-weight: 800; letter-spacing: 1.4px; }
html #win-quests .qcard.qc-available .qc-state { background: transparent !important; color: var(--bone) !important; border: 1px solid var(--edge2); }
html #win-quests .qcard.qc-active .qc-state { background: #4d9fff22 !important; color: #7ab8ff !important; border: 1px solid #4d9fff; }
html #win-quests .qcard.qc-ready .qc-state { background: var(--ember) !important; color: #140a04 !important; }
html #win-quests .qcard.qc-done .qc-state { background: transparent !important; color: var(--dim) !important; border: 1px solid var(--edge); }
html #win-quests .qc-desc { color: #c4c0b3 !important; font: 14px/1.7 'Outfit', sans-serif !important; margin: 14px 0 !important; }
html #win-quests .qcard .qc-prog { height: 22px !important; min-height: 22px; margin: 4px 0 14px !important; background: var(--ink) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; position: relative; }
html #win-quests .qcard .qc-fill, html #win-quests .qcard.qc-active .qc-fill { background: var(--ember) !important; border-radius: 0 !important; }
html #win-quests .qcard .qc-prog span, html #win-quests .qcard .qc-prog b { font-size: 12px !important; line-height: 1 !important; text-shadow: 0 1px 2px #000 !important; }
html #win-quests .qc-who { padding: 11px 14px; margin: 0; background: var(--slate); border-left: 3px solid var(--ember); color: var(--dim) !important; font: 13px 'Outfit', sans-serif !important; }
html #win-quests .qc-who b { color: var(--bone) !important; }
html #win-quests .qc-rewards { margin-top: 18px !important; padding: 14px 0 0 !important; border-top: 1px solid var(--edge) !important; gap: 8px; align-items: center; }
html #win-quests .qc-rew-lbl { color: var(--dim); font: 700 10px 'Outfit', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; margin-right: 4px; }
html #win-quests .qc-chip { background: var(--slate) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; color: var(--bone) !important; padding: 5px 10px; font: 700 12px 'Outfit', sans-serif; }
html #win-quests .qc-btn { border-radius: 0 !important; }
@media (max-width: 650px) { html #win-quests .journal-layout { grid-template-columns: 1fr; } html #win-quests .journal-index { max-height: 190px; border-right: 0; border-bottom: 1px solid var(--edge); } html #win-quests .journal-detail { padding: 16px; } }
html #win-quests .qc-main { display: flex; flex-direction: column; min-width: 0; }
html .inv-win .eq-doll .eq-doll-model{left:0!important;right:0!important;top:22px!important;bottom:88px!important;width:100%!important;height:calc(100% - 110px)!important}
html #win-quests .qc-main > * { order: 1; }
html #win-quests .qc-main > .qc-head { order: 0; }
html #win-quests .qc-main > .qc-rewards { order: 3; }
html #win-quests .qc-main > .qc-who { order: 2; }
html #win-quests .journal-sep, html .journal-index .journal-sep { margin: 10px 0 0; padding: 12px 20px 8px; color: var(--dim); font: 800 10px 'Outfit', sans-serif; letter-spacing: 2px; text-transform: uppercase; border-top: 1px solid var(--edge2); background: #ffffff04; }

/* DoF usor: cand e deschis un dialog cu NPC, lumea din spate se estompeaza putin */
#canvas { transition: filter .28s ease; }
body.dof-on #canvas { filter: blur(1.6px) brightness(.88) saturate(1.06); }

/* ===== NPC function windows (Forja, Nicovala, Topitor, Gatit, Negustor...) — LAYOUT (independent de tema) =====
   Doar structura: banner strip, bara de silver inline, taburi subliniate, retete ca randuri cu 3 zone [icon | info | actiune].
   Culorile/texturile vin din tema activa (Roster / aesthetic.css); aici nu setam fundaluri. Accentul = --fn-tint al mestesugului. */
html body:not(.mobile) .win.smith-station, html body:not(.mobile) .win.npc-fn-win { width: min(700px, 94vw); max-width: 94vw; }
html .npc-fn-win .win-body { padding: 0 !important; min-width: 0; max-height: 78vh; overflow-y: auto; display: flex; flex-direction: column; }
html .npc-fn-win .fn-banner {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 0 !important; padding: 16px 20px;
  border-radius: 0 !important; border-width: 0 0 1px 0 !important; box-shadow: inset 4px 0 var(--fn-tint, #c9a35c) !important;
}
html .npc-fn-win .fn-medallion { width: 52px; height: 52px; flex: none; border-radius: 0; font-size: 26px; box-shadow: none; }
html .npc-fn-win .fn-btitle { font-size: 20px; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; }
html .npc-fn-win .fn-bflavor { font-size: 12px; margin-top: 4px; }
html .npc-fn-win .craft-bar { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 9px 20px; border-radius: 0; box-shadow: none; }
html .npc-fn-win .craft-bar .cb-item b { font-size: 14px; }
html .npc-fn-win :is(.craft-tabs, .sv-tabs) { display: flex; gap: 0; padding: 0 12px; flex: none; }
html .npc-fn-win .sv-tab {
  top: 0; padding: 0 20px; min-height: 42px; display: flex; align-items: center; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; box-shadow: none !important; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; font-variant: normal;
}
html .npc-fn-win .sv-tab.on { border-bottom-color: var(--fn-tint, #c9a35c) !important; }
html .npc-fn-win .craft-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px; flex: 1; }
html .npc-fn-win .craft-row {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) 128px; gap: 4px 16px; align-items: center; padding: 12px 14px 12px 16px;
  border-left-width: 3px; border-radius: 0 !important; opacity: 1;
}
html .npc-fn-win .craft-row.locked { opacity: .62; }
html .npc-fn-win .craft-row.locked .cr-ic img { filter: grayscale(.7) brightness(.8); }
html .npc-fn-win .craft-row .cr-ic { width: 60px; height: 60px; border-radius: 0; }
html .npc-fn-win .craft-row .cr-ic img { width: 44px; height: 44px; }
html .npc-fn-win .craft-row .cr-nm { gap: 10px; align-items: baseline; }
html .npc-fn-win .craft-row .cr-nm b { font-size: 15px; line-height: 1.2; }
html .npc-fn-win .craft-row .cr-nm .cr-rar { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
html .npc-fn-win .craft-row .cr-mats { gap: 6px; margin-top: 8px; }
html .npc-fn-win .craft-row .cr-chip { padding: 4px 8px; border-radius: 0; box-shadow: none; font-size: 12px; font-weight: 600; }
html .npc-fn-win .craft-row .cr-act { min-width: 0; align-self: stretch; justify-content: center; }
html .npc-fn-win .craft-row .cr-btn { min-height: 44px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; }
html .npc-fn-win .craft-row .cr-btn-magic { border-radius: 0 !important; }
html .npc-fn-win :is(.shop-row, .title-row) { border-radius: 0 !important; box-shadow: none !important; }
html .npc-fn-win .sv-grid { border-radius: 0 !important; padding: 16px !important; max-height: none; gap: 12px 10px; }
html .npc-fn-win .shop-vitrine { margin: 0; }
html .npc-fn-win .win-body > :is(p, .muted, .rpg-btn) { margin-left: 20px; margin-right: 20px; }

/* ===== ALT layout NPC (v2): grila de CARDURI verticale, 2 pe rand — icon+nume sus, materiale ca lista cu cantitati la dreapta, buton pe toata latimea.
   Revenire la layoutul "rand cu 3 zone": sterge acest bloc. ===== */
html body:not(.mobile) .win.smith-station, html body:not(.mobile) .win.npc-fn-win { width: min(780px, 94vw); }
html .npc-fn-win .craft-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 20px; align-content: start; }
html .npc-fn-win .craft-row {
  grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 12px 14px; padding: 14px 14px 14px 16px; align-items: center; align-content: start;
}
html .npc-fn-win .craft-row .cr-mid { display: contents; }
html .npc-fn-win .craft-row .cr-ic { grid-column: 1; grid-row: 1; width: 64px; height: 64px; }
html .npc-fn-win .craft-row .cr-ic img { width: 48px; height: 48px; }
html .npc-fn-win .craft-row .cr-nm { grid-column: 2; grid-row: 1; flex-wrap: wrap; align-content: center; row-gap: 4px; }
html .npc-fn-win .craft-row .cr-nm b { flex: 1 1 100%; font-size: 16px; }
html .npc-fn-win .craft-row .cr-nm .cr-rar { margin-left: 0; }
html .npc-fn-win .craft-row .cr-mats { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 3px; margin-top: 0; }
html .npc-fn-win .craft-row .cr-chip { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 10px; }
html .npc-fn-win .craft-row .cr-chip b { margin-left: auto; font-variant-numeric: tabular-nums; }
html .npc-fn-win .craft-row .cr-chip.cr-silver { justify-content: flex-end; font-size: 13px; }
html .npc-fn-win .craft-row .cr-act { grid-column: 1 / -1; grid-row: 3; flex-direction: row; gap: 8px; }
html .npc-fn-win .craft-row .cr-btn { flex: 1; min-height: 46px; }
@media (max-width: 760px) { html .npc-fn-win .craft-list { grid-template-columns: 1fr; } }

/* ===== Grimoar de skilluri — design plat slate/ember, ca jurnalul de questuri ===== */
html #win-skills > .win-body { background: var(--ink) !important; background-image: none !important; padding: 0 !important; gap: 0 !important; }
html #win-skills .sk-banner { background: var(--slate) !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--edge) !important; border-radius: 0 !important; padding: 12px 18px !important; }
html #win-skills .sk-banner .sb-emj { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--ember); font-size: 24px; }
html #win-skills .sb-cls { font: 700 16px 'Cinzel', serif; color: var(--bone); letter-spacing: 1px; }
html #win-skills .sb-meta { color: var(--dim) !important; font: 12px 'Outfit', sans-serif; }
html #win-skills .sb-pts { display: flex; align-items: baseline; gap: 8px; }
html #win-skills .sb-pts-k { color: var(--dim); font: 700 10px 'Outfit', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; }
html #win-skills .sb-pts-v { min-width: 36px; padding: 2px 10px; text-align: center; font: 800 20px 'Outfit', sans-serif; color: var(--dim); background: var(--ink); border: 1px solid var(--edge2); }
html #win-skills .sb-pts-v.has { color: var(--ink); background: var(--ember); border-color: var(--ember); }
html #win-skills .sk-ults.sk-spec { background: var(--ink) !important; border: 0 !important; border-bottom: 1px solid var(--edge) !important; border-radius: 0 !important; padding: 8px 18px !important; }
html #win-skills .sk-ult { border-radius: 0; border: 1px solid var(--edge); color: var(--dim); background: transparent; }
html #win-skills .sk-ult b { color: var(--dim); }
html #win-skills .sk-ult.on { border-color: var(--ember); background: #ff8a4c14; color: var(--bone); }
html #win-skills .sk-ult.on b { color: var(--ember); }
html #win-skills .sk-bar { background: var(--slate); border-bottom: 1px solid var(--edge); padding: 0 12px 0 0; gap: 0; }
html #win-skills .sk-filter { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--dim) !important; min-height: 44px; padding: 0 18px !important; font: 700 12px 'Outfit', sans-serif !important; letter-spacing: 1.6px; text-transform: uppercase; }
html #win-skills .sk-filter:hover { color: var(--bone) !important; }
html #win-skills .sk-filter.on { color: var(--ember) !important; border-bottom-color: var(--ember) !important; background: transparent !important; }
html #win-skills .sk-bar .sk-util { display: flex; gap: 6px; }
html #win-skills .sk-util-btn { background: var(--ink) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; color: var(--bone) !important; font: 700 11px 'Outfit', sans-serif !important; letter-spacing: .6px; }
html #win-skills .sk-util-btn:hover { border-color: var(--ember) !important; color: var(--ember) !important; }
html #win-skills .sk-guide { padding: 8px 18px; background: var(--slate); border-bottom: 1px solid var(--edge); }
html #win-skills .journal-layout { gap: 0; grid-template-columns: 290px minmax(0, 1fr); }
html #win-skills .sk-tree-wrap { background: #090b0e !important; border: 0; border-right: 1px solid var(--edge); border-radius: 0; padding: 6px 0 14px; background-image: radial-gradient(circle, #ffffff0a 1px, transparent 1.5px) !important; background-size: 22px 22px !important; }
html #win-skills .journal-index.sk-tree { background: none !important; }
html #win-skills .sk-tree-lines line { stroke: #232936; stroke-width: 3; }
html #win-skills .sk-tree-lines line.on { stroke: var(--ember); }
html #win-skills .journal-entry.sk-node { background: var(--slate) !important; background-image: none !important; border: 2px solid var(--edge2) !important; border-radius: 50% !important; box-shadow: 0 4px 12px #000a !important; }
html #win-skills .journal-entry.sk-node.passive { border-radius: 4px !important; transform: rotate(0); }
html #win-skills .journal-entry.sk-node > span b { color: var(--bone); font: 600 10.5px 'Outfit', sans-serif; }
html #win-skills .journal-entry.sk-node::after { color: var(--bone); background: var(--ink); border: 1px solid var(--edge2); border-radius: 0; }
html #win-skills .journal-entry.sk-node.locked { border-color: var(--edge) !important; }
html #win-skills .journal-entry.sk-node.locked > span b { color: var(--dim); }
html #win-skills .journal-entry.sk-node.maxed { border-color: #ffd24a !important; box-shadow: 0 0 14px #ffd24a55 !important; }
html #win-skills .journal-entry.sk-node.can { border-color: var(--ember) !important; }
html #win-skills .journal-entry.sk-node.selected { border-color: var(--bone) !important; background: var(--slate2) !important; box-shadow: 0 0 0 3px var(--ember) !important; }
html #win-skills .journal-detail { padding: 22px 26px !important; background: var(--slate) !important; }
html #win-skills .journal-detail .skill-card, html #win-skills .skill-card { background: transparent !important; background-image: none !important; border: 0 !important; }
html #win-skills .journal-detail .skill-icon-container { background: var(--ink) !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; }
html #win-skills .skill-card-name { font: 700 22px 'Cinzel', serif; color: var(--bone); }
html #win-skills .skill-level-bar { background: var(--ink); border: 1px solid var(--edge2); border-radius: 0; height: 8px; }
html #win-skills .skill-level-fill { background: var(--ember); }
html #win-skills .desc { color: #b8bfcc; }
html #win-skills .skill-btn { background: var(--ink) !important; background-image: none !important; border: 1px solid var(--edge2) !important; border-radius: 0 !important; color: var(--bone) !important; font: 700 12px 'Outfit', sans-serif !important; letter-spacing: .8px; text-transform: uppercase; }
html #win-skills .skill-btn:hover:not(:disabled) { border-color: var(--ember) !important; color: var(--ember) !important; }
html #win-skills .skill-btn.sk-up { background: var(--ember) !important; border-color: var(--ember) !important; color: var(--ink) !important; }
html #win-skills .skill-btn:disabled { opacity: .4; }
html #win-skills .journal-detail .sk-spec { background: var(--ink) !important; border: 1px solid var(--edge) !important; border-radius: 0 !important; padding: 12px !important; display: flex; flex-wrap: wrap; gap: 8px; }
html #win-skills .journal-detail .sk-spec .sp-section { flex: 1 1 100%; color: var(--ember); font: 700 10px 'Outfit', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; }
html #win-skills .skill-milestones, html #win-skills .skill-card-meta span { border-radius: 0 !important; }

/* ===== Vitrina negustorului — design plat slate/ember ===== */
html .win .shop-vitrine { display: flex; flex-direction: column; gap: 0; }
html .win .sv-tabs { gap: 0; padding: 0; background: var(--slate); border-bottom: 1px solid var(--edge); }
html .win .sv-tab { padding: 0 20px; min-height: 42px; display: flex; align-items: center; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--dim); font: 700 12px 'Outfit', sans-serif; font-variant: normal; letter-spacing: 1.4px; text-transform: uppercase; box-shadow: none; }
html .win .sv-tab:hover { color: var(--bone); }
html .win .sv-tab.on { color: var(--ember); border-bottom-color: var(--ember) !important; background: transparent !important; box-shadow: none; }
html .win .sv-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; justify-items: stretch; padding: 14px; background: var(--ink) !important; background-image: none !important; border: 0; max-height: 46vh; overflow-y: auto; scrollbar-width: none; }
html .win .sv-grid::-webkit-scrollbar { display: none; }
html .win .sv-item { position: relative; align-items: stretch; gap: 6px; padding: 10px 8px 8px; background: var(--slate); border: 1px solid var(--edge); transition: border-color .12s, transform .12s; }
html .win .sv-item:hover { border-color: var(--ember); transform: translateY(-1px); }
html .win .sv-item.sv-picked { border-color: var(--ember); background: #ff8a4c12; box-shadow: inset 0 2px 0 var(--ember); }
html .win .sv-item .sv-slot { align-self: center; width: 56px; height: 56px; background: var(--ink) !important; background-image: none !important; border: 1px solid var(--edge2); border-radius: 0; outline: 0 !important; box-shadow: none; }
html .win .sv-item .sv-slot .icimg { width: 44px; height: 44px; }
html .win .sv-iname { text-align: center; font: 600 11.5px/1.25 'Outfit', sans-serif; color: var(--bone); min-height: 28px; display: flex; align-items: center; justify-content: center; }
html .win .sv-plate { margin: 0; padding: 3px 0; background: var(--ink) !important; border: 1px solid var(--edge) !important; border-top-color: var(--edge) !important; border-radius: 0; color: var(--ember) !important; font: 700 12px 'Outfit', sans-serif; }
html .win .sv-foot { margin: 0; padding: 12px 14px; background: var(--slate); border-top: 1px solid var(--edge2); display: grid; gap: 10px; }
html .win .sv-detail { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 0; border: 0; background: none !important; }
html .win .sv-detail .sv-slot { width: 56px; height: 56px; background: var(--ink) !important; background-image: none !important; border: 1px solid var(--ember); border-radius: 0; }
html .win .sv-dname { font: 700 16px 'Cinzel', serif; color: var(--bone); }
html .win .sv-dmeta { font: 12px 'Outfit', sans-serif; color: var(--dim); min-height: 0; }
html .win .sv-dmeta:empty { display: none; }
html .win .sv-lvl-no { color: #ff6a5c; }
html .win .sv-ddesc { margin-top: 3px; font: 12px/1.4 'Outfit', sans-serif; color: #b8bfcc; }
html .win .sv-qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--edge2); background: var(--ink); }
html .win .sv-qty .ibtn { min-width: 34px; padding: 6px 4px; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; color: var(--bone); font: 700 12px 'Outfit', sans-serif; }
html .win .sv-qty .ibtn:hover { background: var(--slate2) !important; color: var(--ember); }
html .win .sv-qnum { min-width: 34px; font: 700 14px 'Outfit', sans-serif; color: var(--ember); }
html .win .sv-buyrow { margin: 0; display: flex; align-items: center; gap: 12px; }
html .win .sv-bal { padding: 6px 12px; background: var(--ink); border: 1px solid var(--edge); font: 12px 'Outfit', sans-serif; color: var(--dim); } html .win .sv-bal b { color: var(--bone); }
html .win .sv-buy { min-width: 180px; padding: 11px 18px; background: var(--ember) !important; background-image: none !important; border: 1px solid var(--ember) !important; border-radius: 0 !important; color: var(--ink) !important; font: 800 13px 'Outfit', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; box-shadow: none; }
html .win .sv-buy:hover:not(:disabled) { background: var(--ember-hi) !important; }
html .win .sv-buy.sv-poor, html .win .sv-buy:disabled { background: var(--ink) !important; border-color: var(--edge2) !important; color: var(--dim) !important; cursor: not-allowed; }
html .win .sv-hint { padding: 6px 2px; font: 13px 'Outfit', sans-serif; }
@media (max-width: 560px) { html .win .sv-detail { grid-template-columns: auto 1fr; } html .win .sv-qty { grid-column: 1 / -1; justify-self: start; } }

/* ===== Pagina de gătit ===== */
html .win.cook-win { width: min(920px, 96vw); max-width: 96vw; }
html .win.cook-win > .win-body { padding: 0 !important; max-width: none !important; min-width: 0 !important; max-height: 82vh; overflow: hidden; background: var(--ink) !important; background-image: none !important; }
.ck-page { display: flex; flex-direction: column; min-height: 0; max-height: 82vh; color: var(--bone); font-family: 'Outfit', sans-serif; }
.ck-top { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 14px 18px; background: var(--slate); border-bottom: 1px solid var(--edge); }
.ck-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ck-ico { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; background: var(--ink); border: 1px solid var(--ember); flex: none; }
.ck-title b { display: block; font: 700 17px 'Cinzel', serif; letter-spacing: .5px; }
.ck-title small { display: block; color: var(--dim); font-size: 11.5px; margin-top: 2px; }
.ck-chef { display: flex; align-items: center; gap: 12px; }
.ck-lvl { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--ember); color: var(--ember); font: 800 18px 'Outfit', sans-serif; }
.ck-chef-mid { min-width: 130px; } .ck-chef-mid b { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); } .ck-chef-mid small { color: var(--dim); font-size: 10.5px; }
.ck-xp { height: 6px; margin: 4px 0 3px; background: var(--ink); border: 1px solid var(--edge2); } .ck-xp i { display: block; height: 100%; background: var(--ember); }
.ck-tree { position: relative; padding: 9px 14px; background: var(--ink); border: 1px solid var(--edge2); color: var(--bone); font: 700 12px 'Outfit', sans-serif; letter-spacing: .8px; text-transform: uppercase; cursor: pointer; }
.ck-tree:hover, .ck-tree.has { border-color: var(--ember); color: var(--ember); }
.ck-pts { position: absolute; top: -8px; right: -8px; min-width: 18px; padding: 0 5px; background: var(--ember); color: var(--ink); font: 800 11px/18px 'Outfit', sans-serif; text-align: center; }
.ck-silver { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--ink); border: 1px solid var(--edge); } .ck-silver b { font-variant-numeric: tabular-nums; }
.ck-tabs { display: flex; background: var(--slate); border-bottom: 1px solid var(--edge); }
.ck-tab { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--dim); font: 700 12px 'Outfit', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.ck-tab:hover { color: var(--bone); } .ck-tab.on { color: var(--ember); border-bottom-color: var(--ember); }
.ck-badge { padding: 1px 7px; background: var(--ink); border: 1px solid var(--edge2); color: var(--bone); font-size: 10.5px; letter-spacing: 0; }
.ck-main { display: grid; grid-template-columns: minmax(0, 1fr) 230px; min-height: 0; flex: 1; overflow: hidden; }
.ck-pane { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, 1fr); min-height: 0; overflow: hidden; border-right: 1px solid var(--edge); }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; padding: 14px; overflow-y: auto; scrollbar-width: none; max-height: 56vh; }
.ck-grid::-webkit-scrollbar, .ck-detail::-webkit-scrollbar, .ck-lab::-webkit-scrollbar { display: none; }
.ck-card { display: grid; justify-items: center; gap: 5px; padding: 10px 6px 8px; background: var(--slate); border: 1px solid var(--edge); color: var(--bone); cursor: pointer; text-align: center; }
.ck-card .icimg { width: 44px; height: 44px; image-rendering: pixelated; }
.ck-card:hover { border-color: var(--ember); } .ck-card.sel { border-color: var(--ember); background: #ff8a4c12; box-shadow: inset 0 2px 0 var(--ember); }
.ck-card.off { opacity: .55; } .ck-card.off.sel { opacity: 1; }
.ck-card.secret { border-style: dashed; }
.ck-cname { font: 600 11.5px/1.2 'Outfit', sans-serif; min-height: 28px; display: flex; align-items: center; }
.ck-cbuff { font: 700 10.5px 'Outfit', sans-serif; color: var(--ember); }
.ck-detail { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--slate); border-left: 1px solid var(--edge); overflow-y: auto; scrollbar-width: none; max-height: 56vh; }
.ck-dhead { display: flex; gap: 12px; align-items: center; }
.ck-dicon { width: 60px; height: 60px; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--ember); flex: none; } .ck-dicon .icimg { width: 48px; height: 48px; image-rendering: pixelated; }
.ck-dname { font: 700 17px 'Cinzel', serif; margin-bottom: 4px; }
.ck-mats { display: grid; gap: 4px; }
.ck-mat { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--ink); border: 1px solid var(--edge); font-size: 12.5px; }
.ck-mat.ok b { color: #7fe08a; } .ck-mat.no b { color: #ff6a5c; }
.ck-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ck-stats > div { padding: 6px 10px; background: var(--ink); border: 1px solid var(--edge); } .ck-stats small { display: block; color: var(--dim); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; } .ck-stats b { font-size: 13px; } .ck-stats b.good { color: #7fe08a; } .ck-stats b.bad { color: #ff9a5c; }
.ck-go { margin-top: auto; padding: 12px 16px; background: var(--ember); border: 1px solid var(--ember); color: var(--ink); font: 800 13px 'Outfit', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
.ck-go:hover:not(:disabled) { background: var(--ember-hi); } .ck-go:disabled { background: var(--ink); border-color: var(--edge2); color: var(--dim); cursor: not-allowed; }
.ck-note { padding: 8px 10px; border: 1px dashed var(--edge2); color: #e0b070; font-size: 12px; }
.ck-lab { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow-y: auto; scrollbar-width: none; max-height: 56vh; }
.ck-lab h4 { margin: 0; font: 700 15px 'Cinzel', serif; color: var(--ember); } .ck-lab p { margin: 0; font-size: 12.5px; }
.ck-hint { padding: 9px 12px; background: var(--slate); border-left: 3px solid var(--ember); font-style: italic; color: #c8cfdb; } .ck-hint.done { border-left-color: #7fe08a; font-style: normal; }
.ck-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ck-pick select { min-width: 0; padding: 9px 8px; background: var(--slate); border: 1px solid var(--edge2); color: var(--bone); font: 12.5px 'Outfit', sans-serif; }
.ck-lab .ck-go { align-self: flex-start; margin-top: 4px; }
.ck-side { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #090b0e; overflow-y: auto; scrollbar-width: none; }
.ck-sidehead { display: flex; justify-content: space-between; font: 700 11px 'Outfit', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); } .ck-sidehead span { color: var(--ember); }
.ck-qslot { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 8px; background: var(--slate); border: 1px dashed var(--edge2); font-size: 12px; }
.ck-qslot.busy { border-style: solid; border-color: var(--ember); } .ck-qslot .icimg { width: 30px; height: 30px; image-rendering: pixelated; } .ck-qslot .cq-time { margin-left: auto; font-weight: 800; color: var(--ember); font-variant-numeric: tabular-nums; }
.ck-qempty { color: var(--dim); margin: 0 auto; letter-spacing: 1px; text-transform: uppercase; font-size: 10.5px; }
.ck-vip { margin-top: auto; font-size: 11px; color: #7ac0ff; }
@media (max-width: 760px) { .ck-top { grid-template-columns: 1fr; } .ck-main { grid-template-columns: 1fr; overflow-y: auto; } .ck-pane { grid-template-columns: 1fr; border-right: 0; } .ck-detail { border-left: 0; max-height: none; } }
.ck-ico img { width: 30px; height: 30px; image-rendering: pixelated; }
.ck-special { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #ff8a4c14; border: 1px solid var(--ember); }
.ck-special img { width: 36px; height: 36px; image-rendering: pixelated; } .ck-special small { display: block; color: var(--dim); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; } .ck-special b { font: 700 14px 'Cinzel', serif; } .ck-special span { margin-left: auto; font: 800 16px 'Outfit', sans-serif; color: var(--ember); }
.ck-sell { display: grid; gap: 6px; }
.ck-sellrow { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--slate); border: 1px solid var(--edge); }
.ck-sellrow .icimg { width: 36px; height: 36px; image-rendering: pixelated; }
.ck-sname b { display: block; font-size: 13px; } .ck-sname small { color: var(--dim); font-size: 11px; }
.ck-sprice { display: grid; justify-items: end; font-variant-numeric: tabular-nums; } .ck-sprice b { color: var(--ember); font-size: 14px; } .ck-sprice small { font-size: 10.5px; color: var(--dim); } .ck-sprice small.good { color: #7fe08a; } .ck-sprice small.bad { color: #ff9a5c; }
.ck-mini { padding: 7px 12px; background: var(--ink); border: 1px solid var(--edge2); color: var(--bone); font: 700 11px 'Outfit', sans-serif; letter-spacing: .8px; text-transform: uppercase; cursor: pointer; } .ck-mini:hover { border-color: var(--ember); color: var(--ember); }
@media (max-width: 760px) { .ck-sellrow { grid-template-columns: auto 1fr; } .ck-sprice { justify-items: start; } }

/* ===== Quiz (Arena OX): banner cu texturi din tema UI, fara emoji ===== */
#quiz-banner { position: fixed; top: 14%; left: 50%; transform: translateX(-50%); z-index: 6500; width: min(640px, 92vw); padding: 18px 26px 16px; text-align: center; pointer-events: none;
  background: #1b130a var(--art-page, none) repeat; background-size: 128px 128px; image-rendering: pixelated; border: 3px solid var(--art-gold, #c9a35c); outline: 2px solid #0a0704; outline-offset: -7px;
  box-shadow: 0 10px 34px #000b, inset 0 0 0 1px #00000088; font-family: 'MedievalSharp', 'Cinzel', serif; }
#quiz-banner .qz-title { display: inline-block; padding: 3px 16px; margin-bottom: 8px; background: #2a1a30 var(--art-wood, none) repeat; background-size: 128px 128px; border: 1px solid #c98bff; color: #e2c4ff; font-size: 13px; letter-spacing: 3px; font-weight: 700; }
#quiz-banner .qz-q { font-size: 21px; line-height: 1.35; color: #f4d79a; margin: 6px 0 14px; text-shadow: 0 2px 0 #000a; }
#quiz-banner .qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#quiz-banner .qz-opt { padding: 11px 10px; font-size: 17px; font-weight: 800; letter-spacing: 2px; border: 2px solid; background-repeat: repeat; background-size: 128px 128px; image-rendering: pixelated; box-shadow: inset 0 0 0 2px #00000066; }
#quiz-banner .qz-opt.yes { color: #aef0a2; border-color: #4a8a4a; background-color: #17301a; background-image: var(--art-wood, none); }
#quiz-banner .qz-opt.no { color: #f2a5a5; border-color: #8a4a4a; background-color: #361818; background-image: var(--art-wood, none); }
#quiz-banner .qz-time { position: relative; height: 22px; margin-top: 14px; background: #0c0804; border: 1px solid #5a4630; }
#quiz-banner .qz-time i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#e1a23a, #a8641c); }
#quiz-banner .qz-time b { position: relative; font: 700 12px 'Outfit', sans-serif; line-height: 22px; color: #fff0cf; text-shadow: 0 1px 0 #000; }
#quiz-banner .qz-verdict { padding: 12px; font-size: 28px; font-weight: 800; letter-spacing: 4px; border: 2px solid; background-repeat: repeat; background-size: 128px 128px; image-rendering: pixelated; background-image: var(--art-wood, none); }
#quiz-banner .qz-verdict.ok { color: #aef0a2; border-color: #4a8a4a; background-color: #17301a; }
#quiz-banner .qz-verdict.no { color: #f2a5a5; border-color: #8a4a4a; background-color: #361818; }

/* ===== Selector de iteme (GM) ===== */
.ip-overlay { position: fixed; inset: 0; z-index: 7200; display: grid; place-items: center; background: #000a; }
.ip-panel { width: min(820px, 94vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--ink); border: 1px solid var(--edge2); box-shadow: 0 20px 60px #000c; color: var(--bone); font-family: 'Outfit', sans-serif; }
.ip-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--slate); border-bottom: 1px solid var(--edge); }
.ip-head b { font: 700 16px 'Cinzel', serif; }
.ip-x { width: 32px; height: 32px; background: var(--ink); border: 1px solid var(--edge2); color: var(--bone); font-size: 20px; line-height: 1; cursor: pointer; } .ip-x:hover { border-color: var(--ember); color: var(--ember); }
.ip-tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--edge); }
.ip-search { flex: 1 1 220px; padding: 9px 12px; background: var(--slate); border: 1px solid var(--edge2); color: var(--bone); font: 13px 'Outfit', sans-serif; } .ip-search:focus { outline: 0; border-color: var(--ember); }
.ip-cats { display: flex; gap: 0; }
.ip-cat { padding: 8px 14px; background: transparent; border: 1px solid var(--edge2); margin-left: -1px; color: var(--dim); font: 700 11px 'Outfit', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; } .ip-cat.on { background: #ff8a4c1c; border-color: var(--ember); color: var(--ember); position: relative; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 14px 16px; overflow-y: auto; scrollbar-width: none; min-height: 220px; flex: 1; align-content: start; }
.ip-grid::-webkit-scrollbar { display: none; }
.ip-cell { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; background: var(--slate); border: 1px solid var(--edge); color: var(--bone); cursor: pointer; min-width: 0; }
.ip-cell img { width: 40px; height: 40px; image-rendering: pixelated; }
.ip-cell span { font: 600 10.5px/1.2 'Outfit', sans-serif; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ip-cell:hover { border-color: var(--edge2); background: var(--slate2); } .ip-cell.on { border-color: var(--ember); background: #ff8a4c14; box-shadow: inset 0 2px 0 var(--ember); }
.ip-empty { grid-column: 1 / -1; padding: 16px; text-align: center; color: var(--dim); font-size: 12.5px; }
.ip-foot { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--slate); border-top: 1px solid var(--edge2); }
.ip-sel { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; } .ip-sel img { width: 36px; height: 36px; image-rendering: pixelated; background: var(--ink); border: 1px solid var(--edge2); } .ip-sel b { display: block; font-size: 13.5px; } .ip-sel small { color: var(--dim); font-size: 11px; }
.ip-qty { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; } .ip-qty input { width: 76px; padding: 7px; background: var(--ink); border: 1px solid var(--edge2); color: var(--bone); font: 700 13px 'Outfit', sans-serif; }
.ip-ok { padding: 10px 24px; background: var(--ember); border: 1px solid var(--ember); color: var(--ink); font: 800 12px 'Outfit', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; } .ip-ok:disabled { background: var(--ink); border-color: var(--edge2); color: var(--dim); cursor: not-allowed; }

/* ===== Panou GM Quiz ===== */
html .win.quizgm-win { width: min(860px, 96vw); }
html .win.quizgm-win > .win-body { padding: 0 !important; background: var(--ink) !important; background-image: none !important; max-width: none !important; max-height: 84vh; overflow-y: auto; scrollbar-width: none; }
.qg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, 1fr); color: var(--bone); font-family: 'Outfit', sans-serif; }
.qg-form { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-right: 1px solid var(--edge); }
.qg-side { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--slate); }
.qg-lab { display: flex; justify-content: space-between; margin-top: 6px; font: 700 10.5px 'Outfit', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); } .qg-lab span { color: var(--ember); }
.qg textarea { resize: none; padding: 10px 12px; background: var(--slate); border: 1px solid var(--edge2); color: var(--bone); font: 14px/1.4 'Outfit', sans-serif; } .qg textarea:focus { outline: 0; border-color: var(--ember); }
.qg-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qg-ans button { padding: 14px; background: var(--slate); border: 2px solid var(--edge2); color: var(--dim); font: 800 15px 'Outfit', sans-serif; letter-spacing: 2px; cursor: pointer; }
.qg-ans button.on.yes { border-color: #4a8a4a; background: #17301a; color: #aef0a2; } .qg-ans button.on.no { border-color: #8a4a4a; background: #361818; color: #f2a5a5; }
.qg input[type=range] { width: 100%; accent-color: var(--ember); }
.qg-chips { display: flex; gap: 6px; } .qg-chips button { padding: 6px 14px; background: var(--slate); border: 1px solid var(--edge2); color: var(--dim); font: 700 12px 'Outfit', sans-serif; cursor: pointer; } .qg-chips button.on { border-color: var(--ember); color: var(--ember); background: #ff8a4c14; }
.qg-rew { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.qg-rew button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; background: var(--slate); border: 1px solid var(--edge2); color: var(--bone); cursor: pointer; } .qg-rew b { font-size: 13.5px; } .qg-rew small { color: var(--dim); font-size: 11px; }
.qg-rew button.on { border-color: var(--ember); background: #ff8a4c14; box-shadow: inset 0 2px 0 var(--ember); } .qg-rew button.on b { color: var(--ember); }
.qg-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qg-extra > button:first-child { display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 9px 12px; background: var(--slate); border: 1px dashed var(--edge2); color: var(--bone); font: 600 13px 'Outfit', sans-serif; cursor: pointer; } .qg-extra > button:first-child:hover { border-color: var(--ember); } .qg-extra img { width: 28px; height: 28px; image-rendering: pixelated; }
.qg-n { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; } .qg-n input { width: 70px; padding: 7px; background: var(--ink); border: 1px solid var(--edge2); color: var(--bone); font: 700 13px 'Outfit', sans-serif; }
.qg-clear { padding: 7px 12px; background: transparent; border: 1px solid var(--edge2); color: var(--dim); font: 700 11px 'Outfit', sans-serif; text-transform: uppercase; cursor: pointer; }
.qg-prev { padding: 16px; text-align: center; background: #1b130a var(--art-page, none) repeat; background-size: 128px 128px; image-rendering: pixelated; border: 3px solid var(--art-gold, #c9a35c); font-family: 'MedievalSharp', 'Cinzel', serif; }
.qg-prev .qz-title { display: inline-block; padding: 2px 14px; margin-bottom: 6px; background: #2a1a30 var(--art-wood, none) repeat; background-size: 128px 128px; border: 1px solid #c98bff; color: #e2c4ff; font-size: 12px; letter-spacing: 3px; font-weight: 700; }
.qg-prev .qz-q { font-size: 17px; line-height: 1.35; color: #f4d79a; margin: 6px 0 12px; min-height: 46px; }
.qg-prev .qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qg-prev .qz-opt { padding: 9px 6px; font-size: 14px; font-weight: 800; letter-spacing: 2px; border: 2px solid; opacity: .55; } .qg-prev .qz-opt.pick { opacity: 1; box-shadow: 0 0 0 2px #fff3; }
.qg-prev .qz-opt.yes { color: #aef0a2; border-color: #4a8a4a; background: #17301a; } .qg-prev .qz-opt.no { color: #f2a5a5; border-color: #8a4a4a; background: #361818; }
.qg-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; } .qg-sum > div { padding: 7px 10px; background: var(--ink); border: 1px solid var(--edge); } .qg-sum small { display: block; color: var(--dim); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; } .qg-sum b { font-size: 13px; }
.qg-note { min-height: 16px; font-size: 12px; color: #e0b070; }
.qg-actions { display: grid; gap: 8px; margin-top: auto; }
.qg-actions button { padding: 11px 14px; background: var(--ink); border: 1px solid var(--edge2); color: var(--bone); font: 700 12px 'Outfit', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; } .qg-actions button:hover { border-color: var(--ember); color: var(--ember); }
.qg-actions .qg-primary { background: var(--ember); border-color: var(--ember); color: var(--ink); font-weight: 800; font-size: 13px; padding: 14px; } .qg-actions .qg-primary:hover { background: var(--ember-hi); color: var(--ink); }
.qg-actions .qg-danger { border-color: #6a3030; color: #f2a5a5; }
.gm-pick-btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
@media (max-width: 720px) { .qg { grid-template-columns: 1fr; } .qg-form { border-right: 0; } }

/* ===== Invitatie Quiz deasupra chatului ===== */
#quiz-invite { position: fixed; left: 12px; z-index: 6400; width: min(440px, calc(100vw - 24px)); box-sizing: border-box; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 12px 12px 14px 16px; background: var(--slate); border: 1px solid var(--edge2); border-left: 4px solid #c98bff; box-shadow: 0 10px 30px #000b; color: var(--bone); font-family: 'Outfit', sans-serif; }
#quiz-invite .qi-body { display: grid; gap: 2px; min-width: 0; } #quiz-invite b { font: 700 14px 'Cinzel', serif; color: #e2c4ff; } #quiz-invite span { font-size: 13px; } #quiz-invite small { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#quiz-invite button { width: 42px; height: 42px; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--edge2); cursor: pointer; }
#quiz-invite .qi-no { color: #f2a5a5; } #quiz-invite .qi-no:hover { border-color: #8a4a4a; background: #361818; }
#quiz-invite .qi-yes { color: #aef0a2; } #quiz-invite .qi-yes:hover { border-color: #4a8a4a; background: #17301a; }
#quiz-invite .qi-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #c98bff; }

/* Panou Quiz: mai lat (altfel era turtit si taia butoanele) */
html body .win.quizgm-win { width: min(900px, 96vw) !important; min-width: min(760px, 96vw) !important; max-width: 96vw !important; }
html body .win.quizgm-win > .win-body { width: 100% !important; }
html body .qg { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); }
html body .qg-rew { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Misiuni de sezon: descrierea pe tot rândul, dedesubt progres + SP + butonul (altfel „Revendică” iese din card) */
html #win-rewards .bp-quest { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 10px; }
html #win-rewards .bp-q-main { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
html #win-rewards .bp-q-side { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 10px; }
html #win-rewards .bp-q-side .bp-q-sp { margin-left: auto; }
html #win-rewards .bp-q-claim { flex: 0 0 auto; padding: 6px 12px; white-space: nowrap; }

/* Înălțare (+10..+15): căsuța Sigiliului Neclintit în panoul fierarului */
.smith-protect { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; background: var(--ink); border: 1px solid var(--edge2); cursor: pointer; font-size: 12.5px; color: var(--bone); }
.smith-protect input { accent-color: var(--ember); } .smith-protect img { width: 24px; height: 24px; image-rendering: pixelated; }
.smith-protect.off { opacity: .5; cursor: not-allowed; }
.smith-protect:has(input:checked) { border-color: var(--ember); background: #ff8a4c14; }