/* Layout pass (dialog fit, Dawnlight button, centred panels, title zoom, larger text, HUD badges) and the compact character window. Linked after style.css. */
/* Plain quest actions must fit the expanded quest names before the Pass 2 UI. */

#dawnlightBtn{position:fixed;right:24px;top:52%;z-index:25;border:1px solid #d7b566;background:#242033e8;color:#ffe0a0;padding:12px 18px;border-radius:5px;font:600 15px Georgia,serif}#dawnlightBtn:disabled{opacity:.55}#tbBar{background-size:100% 100%;isolation:isolate}#tbFill{position:relative;z-index:-1}

body:has(#panelR:not(.hidden)) .quest-panel{visibility:hidden;pointer-events:none}
/* Panels open in the middle of the screen, above the HUD: one panel centered, two (stash/vendor/character +
   inventory) side by side around the center; both scale up on large displays (--ui-zoom). */
body.single-panel .panel, body.paired .panel { top: 42%; max-height: calc((100vh - 314px) / var(--ui-zoom, 1)); }
body.single-panel .panel { left: 50%; right: auto; transform: translate(-50%, -50%) scale(var(--ui-zoom, 1)); transform-origin: center; }
body.paired .panel.left { left: auto; right: calc(50% + 8px); transform: translateY(-50%) scale(var(--pair-zoom, 1)); transform-origin: right center; }
body.paired .panel.right { right: auto; left: calc(50% + 8px); transform: translateY(-50%) scale(var(--pair-zoom, 1)); transform-origin: left center; }
/* The title screens (src/mobile/title.js; title.css): a gentler background drift keeps the painting crisp. */
#overlay.titlescr::before { animation-name: title-drift-soft; }
@keyframes title-drift-soft { from { transform: scale(1.01) translate(-.3%, -.2%); } to { transform: scale(1.035) translate(.3%, .2%); } }
/* Larger readable text across the in-game UI. */
.hint { font-size: 14px; }
#tooltip { font-size: 16.5px; }
#tooltip { max-height:calc(100vh - 12px); overflow-y:auto; scrollbar-color:#8a6535 #120d09; scrollbar-width:thin; }
#tooltip::-webkit-scrollbar { width:7px; } #tooltip::-webkit-scrollbar-track { background:#120d09; } #tooltip::-webkit-scrollbar-thumb { border:2px solid #120d09; border-radius:7px; background:#8a6535; }
.tt-compare { margin-top:8px; padding-top:7px; border-top:1px solid rgba(216,178,100,.45); color:#d8d0c0; }.tt-compare-label { margin:5px 0 2px; color:#e8c87e; font:700 13px/1.2 Cinzel,Georgia,serif; }
/* Voice subtitles stay clear of the central HUD callouts and shortcut icons. */
#ui #voiceSubtitle { left:16px; bottom:16px; width:auto; max-width:min(300px,calc(100vw - 32px)); transform:none; text-align:left; }
@keyframes points-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 8px rgba(255, 170, 40, .5); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 20px 3px rgba(255, 200, 70, .95); } }
.mini[data-badge] { animation: mini-bob 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 196, 70, .95)) drop-shadow(0 2px 2px #000); }
.mini[data-badge]::after { content: attr(data-badge); position: absolute; top: -22%; right: -20%; left: auto; min-width: 1.4em; min-height: 0; height: 1.4em; padding: 0 .25em; box-sizing: border-box; border-radius: 999px; transform: none; background: radial-gradient(circle at 35% 30%, #ff7a55, #c0180c 68%, #6a0804); border: 2px solid #ffd76a; color: #fff; font: 800 clamp(9px, .8vw, 13px)/1.2 Cinzel, Georgia, serif; text-align: center; box-shadow: 0 0 8px rgba(255, 80, 30, .85); }
@keyframes mini-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9%); } }
@media (prefers-reduced-motion: reduce) { }
/* townsfolk in the target frame: name only, no health bar */
#topbar.npc #tbBar { display: none; }
/* HUD shortcuts use the same icon language as the character tabs. */
.mini { position:relative; display:grid; place-items:center; overflow:visible; }.mini img { width:20px; height:20px; object-fit:contain; pointer-events:none; filter:sepia(.25) saturate(.85); }.mini span { position:absolute; right:1px; bottom:-1px; color:#f2ddb0; font:700 9px/1 Cinzel,Georgia,serif; text-shadow:0 1px 2px #000; pointer-events:none; }

/* Compact, vertical character window. It is scaled against the clear space above the HUD. */
#characterWindow { --cw-scale:var(--cw-fit,1); position:fixed; z-index:18; left:50%; top:var(--cw-center-y,calc((100vh - min(27vh,252px))/2)); width:560px; height:720px; pointer-events:auto; transform:translate(-50%,-50%) scale(var(--cw-scale)); transform-origin:center; color:#e7ddc7; font-size:16px; -webkit-font-smoothing:antialiased; }
.cw-frame { position:absolute; inset:0; border:22px solid transparent; border-image:url('assets/gen/ui/panel_frame.webp') 350 350 375 350 fill / 48px 48px 51px 48px stretch; background:linear-gradient(rgba(8,6,4,.67),rgba(8,6,4,.85)),url('assets/gen/ui/panel_bg.webp') center/420px 420px; box-shadow:0 20px 54px rgba(0,0,0,.76),inset 0 0 42px rgba(0,0,0,.72); }.cw-frame::before { content:''; position:absolute; inset:18px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(229,182,91,.26),inset 0 0 45px rgba(0,0,0,.66); }
.cw-nameplate { position:absolute; z-index:3; left:50%; top:-27px; width:348px; min-height:76px; padding:13px 34px 12px; transform:translateX(-50%); text-align:center; border:2px solid #9a7741; background:linear-gradient(#33271c,#100d0b 75%); box-shadow:0 0 0 2px #090706,0 9px 21px rgba(0,0,0,.72),inset 0 0 20px rgba(245,185,74,.1); }.cw-nameplate div { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:700 23px/1.05 Cinzel,Georgia,serif; color:#e8c87e; text-shadow:0 2px 2px #000; text-wrap:balance; }.cw-nameplate small { display:block; margin-top:4px; color:#d8c5a0; font:600 14px/1.15 Cinzel,Georgia,serif; }
.cw-close { position:absolute; z-index:4; right:-10px; top:-11px; display:grid; place-items:center; width:42px; height:42px; padding:0; color:#f2d18e; font:700 24px/1 Georgia,serif; background:linear-gradient(#61301d,#260b07); border:2px solid #a87a3b; box-shadow:0 2px 7px #000; transition-property:filter,transform; transition-duration:.14s; }.cw-close:hover { filter:brightness(1.24); transform:scale(1.05); }.cw-close:active,.cw-tab:active { transform:scale(.96); }
.cw-tabs { position:absolute; z-index:1; left:-65px; top:91px; display:grid; gap:7px; width:68px; }.cw-tab { position:relative; display:grid; place-items:center; width:64px; height:64px; margin:0; padding:5px; border:2px solid #5e4628; border-right:0; border-radius:7px 0 0 7px; background:linear-gradient(135deg,#312419,#100d0a); box-shadow:inset 0 0 12px #000,0 4px 8px rgba(0,0,0,.55); opacity:.72; transition-property:filter,opacity,transform; transition-duration:.16s; }.cw-tab:hover { opacity:1; filter:brightness(1.2); }.cw-tab.active { width:72px; opacity:1; border-color:#d5a553; background:linear-gradient(135deg,#574023,#21160e); box-shadow:inset 0 0 12px rgba(255,211,111,.18),5px 0 0 #21160e,0 0 12px rgba(224,171,74,.46); }.cw-tab img { width:46px; height:46px; object-fit:contain; filter:sepia(.3) saturate(.82); pointer-events:none; }.cw-tab.active img { filter:drop-shadow(0 0 5px rgba(255,211,111,.62)); }.cw-tab span { position:absolute; right:-7px; top:-8px; display:grid; place-items:center; min-width:22px; height:22px; padding:0 4px; border:2px solid #ffd66c; border-radius:50%; color:#fff3d4; background:#a4140c; font:700 13px/1 Cinzel,Georgia,serif; box-shadow:0 0 8px rgba(255,70,30,.85); font-variant-numeric:tabular-nums; }.cw-tab span:empty { display:none; }
.cw-body { position:absolute; inset:77px 33px 28px; overflow:hidden; }.cw-body .ptitle { min-height:39px; margin:0 0 8px; padding:0 36px 17px; font-size:20px; }.cw-body .px { right:0; top:-7px; }.cw-section-title { color:#e7c675; font:700 16px Cinzel,Georgia,serif; letter-spacing:.05em; text-align:center; text-transform:uppercase; }
.cw-gear-layout { position:relative; height:100%; display:grid; grid-template-columns:98px 1fr 98px; grid-template-rows:1fr 147px; column-gap:15px; }.cw-gear-column { display:grid; grid-template-rows:repeat(4,84px); align-content:center; gap:12px; z-index:2; }.cw-gear-slot { position:relative; display:flex; align-items:center; justify-content:center; width:84px; height:84px; overflow:hidden; border:2px solid rgba(166,119,61,.78); background:radial-gradient(circle at 50% 42%,rgba(70,48,30,.36),rgba(4,3,3,.82)); box-shadow:inset 0 0 17px #000,0 0 0 1px rgba(0,0,0,.8); }.cw-gear-slot::before { content:''; position:absolute; inset:4px; pointer-events:none; border:1px solid rgba(236,192,108,.2); }.cw-gear-slot img { position:relative; z-index:1; max-width:92%; max-height:92%; object-fit:contain; }.cw-gear-slot .cw-ghost { opacity:.18; filter:grayscale(1) brightness(.7); }.cw-gear-slot:hover { border-color:#f1c55f; box-shadow:inset 0 0 17px #000,0 0 16px rgba(241,197,95,.48); }.cw-figure { position:relative; min-width:0; margin:5px -2px 0; background:linear-gradient(90deg,rgba(7,5,4,.95),transparent 17%,transparent 83%,rgba(7,5,4,.95)),var(--hero-art) center 22px/238px auto no-repeat; filter:brightness(.43) saturate(.55); }.cw-figure::after { content:''; position:absolute; inset:17px 2px 7px; background:var(--hero-art) center 22px/238px auto no-repeat; opacity:.58; filter:brightness(0) drop-shadow(0 0 2px #d8973e) drop-shadow(0 0 7px #b86e28); mix-blend-mode:screen; }
.cw-weapon-row { grid-column:1/-1; display:grid; grid-template-columns:1.55fr 1fr 1fr; align-items:center; gap:12px; min-height:132px; padding:10px 9px 3px; border-top:1px solid rgba(188,140,72,.53); box-shadow:0 -12px 20px rgba(0,0,0,.34); }.cw-characteristics { min-width:0; height:112px; padding:8px 10px; border:1px solid rgba(176,131,67,.64); background:rgba(0,0,0,.36); box-shadow:inset 0 0 16px #000; }.cw-characteristics-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; margin-top:5px; font-size:13px; line-height:1.15; }.cw-characteristics-grid span { display:flex; justify-content:space-between; color:#bcb09a; }.cw-characteristics-grid b { color:#f1e1bd; font-variant-numeric:tabular-nums; }.cw-resists { display:flex; justify-content:space-between; margin-top:5px; font-size:12px; }.cw-resists span,.cw-resists b { color:var(--res-color); }.cw-weapon-slot { display:grid; justify-items:center; gap:3px; color:#bfa46c; font:600 11px Cinzel,Georgia,serif; text-transform:uppercase; }.cw-weapon-slot .cw-weapon { width:94px; height:94px; }
.cw-inv { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }.cw-inventory-grid { transform:scale(1.18); transform-origin:center; margin:17px auto 21px; }.cw-inv .hint { max-width:430px; text-align:center; }.cw-skills { overflow:auto; padding:0 7px 6px; }.cw-skills .tree { transform:scale(1.2); transform-origin:top center; margin-top:12px; margin-bottom:90px; }.cw-quests { overflow:hidden; }
body.character-open .quest-panel { visibility:hidden; pointer-events:none; } body.character-paired #characterWindow { --cw-scale:var(--cw-pair-fit,1); left:var(--cw-pair-window-left,50%); transform:translateY(-50%) scale(var(--cw-pair-fit,1)); transform-origin:left center; }.character-paired #panelL { top:var(--cw-center-y,calc((100vh - min(27vh,252px))/2)); left:var(--cw-pair-panel-left,0px); right:auto; width:400px; height:720px; max-height:none; transform:translateY(-50%) scale(var(--cw-pair-fit,1)); transform-origin:left center; }
@media (max-width:760px) { #characterWindow { --cw-scale:var(--cw-fit,1); left:calc(50% + 31px); }.cw-tabs { left:-59px; top:96px; }.cw-tab { width:58px; height:58px; }.cw-tab.active { width:63px; }.cw-tab img { width:41px; height:41px; }.cw-body { inset-inline:27px; }.cw-gear-layout { grid-template-columns:84px 1fr 84px; gap:6px; }.cw-gear-slot { width:72px; height:72px; }.cw-gear-column { grid-template-rows:repeat(4,72px); gap:10px; }.cw-weapon-slot .cw-weapon { width:78px; height:78px; }.cw-characteristics-grid { font-size:11px; }.cw-nameplate { width:310px; }.cw-nameplate div { font-size:24px; }.cw-nameplate small { font-size:14px; } body.character-paired #panelL { display:none; } body.character-paired #characterWindow { left:calc(50% + 31px); } }
@media (prefers-reduced-motion:reduce) { .cw-tab,.cw-close { transition:none; } }

/* Character-window refinements from the reference review. */
.cw-tab { opacity:1; background:#15100c linear-gradient(135deg,#312419,#100d0a); }.cw-tab:not(.active) img { filter:sepia(.35) saturate(.62) brightness(.62); }.cw-tab:hover { opacity:1; }.cw-tab.active { background:#21160e linear-gradient(135deg,#574023,#21160e); }.cw-tab img { filter:none; }
.cw-figure { background:linear-gradient(90deg,rgba(7,5,4,.95),rgba(8,6,4,.08) 18%,rgba(8,6,4,.08) 82%,rgba(7,5,4,.95)); filter:none; }.cw-figure::after { opacity:.91; filter:brightness(0) drop-shadow(0 0 2px #e2a052) drop-shadow(0 0 6px rgba(184,110,40,.75)); mix-blend-mode:normal; }
.cw-section-title { font-size:17px; text-transform:none; }.cw-weapon-row { grid-template-columns:minmax(0,1fr) 94px 94px; }.cw-characteristics .cw-section-title { font-size:14px; letter-spacing:.02em; }.cw-characteristics-grid { font-size:16px; line-height:1.25; }.cw-resists { font-size:14px; }.cw-weapon-slot { text-transform:none; font-size:12px; }.cw-inv .goldline { font-size:18px; }.cw-inventory-grid { transform:scale(1.3125); }.cw-inv .hint { font-size:16px; }.cw-skills .skpts { font-size:18px; }
.cw-stats::-webkit-scrollbar,.cw-skills::-webkit-scrollbar { width:8px; }.cw-stats::-webkit-scrollbar-track,.cw-skills::-webkit-scrollbar-track { background:#120d09; }.cw-stats::-webkit-scrollbar-thumb,.cw-skills::-webkit-scrollbar-thumb { border:2px solid #120d09; border-radius:8px; background:#8a6535; }.cw-stats,.cw-skills { scrollbar-color:#8a6535 #120d09; scrollbar-width:thin; }

/* ---------- The Stats tab (charHTML in src/ui/character.js) with the owner's icon art (assets/gen/ui/stats) ----------
   Fits the character window's 450x571 px body with no scrolling, all sixteen derived stats included: the XP bar, four
   attribute cards with the round + art, the Stat Points badge, the derived stats in two columns and four resistance
   tiles. The window scales as a whole, so this one layout serves every screen size and interface size. Phones:
   the "phone Stats tab" section of mobile.css. */
.cw-stats { --st-gold:#e7c675; --st-edge:rgba(166,119,61,.82); display:flex; flex-direction:column; justify-content:space-between; gap:6px; padding:0 1px; overflow:auto; }
.cw-stats > * { flex:none; }
.st-attr,.st-res-tile,.st-lv { position:relative; box-sizing:border-box; border:2px solid var(--st-edge); background:radial-gradient(ellipse at 30% 18%,rgba(84,58,33,.5),rgba(10,7,5,.9) 72%); box-shadow:inset 0 0 14px #000,0 0 0 1px rgba(0,0,0,.85),0 3px 8px rgba(0,0,0,.45); }
.st-attr::before,.st-res-tile::before { content:''; position:absolute; inset:3px; pointer-events:none; border:1px solid rgba(236,192,108,.2); }
.st-attr:hover,.st-res-tile:hover { border-color:#f1c55f; box-shadow:inset 0 0 14px #000,0 0 0 1px rgba(0,0,0,.85),0 0 12px rgba(241,197,95,.4); }
/* Experience: the level, then a slim gold bar with current / next. */
.st-xp { display:flex; align-items:center; gap:8px; }
.st-lv { display:grid; place-items:center; align-content:center; flex:none; min-width:48px; height:40px; padding:0 6px; }
.st-lv small { font:700 10.5px/1 Cinzel,Georgia,serif; letter-spacing:.1em; color:#bfa46c; text-transform:uppercase; }
.st-lv b { font:700 19px/1.05 Cinzel,Georgia,serif; color:#f6e2a8; text-shadow:0 1px 2px #000; }
.st-xp-bar { position:relative; flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; height:24px; padding:0 11px; box-sizing:border-box; overflow:hidden; border:1px solid #a07c43; border-radius:12px; background:linear-gradient(#070504,#1b130b); box-shadow:inset 0 2px 5px #000,0 0 0 1px rgba(0,0,0,.85); }
.st-xp-bar > i { position:absolute; inset:0 auto 0 0; background:linear-gradient(#ffe8a6,#d7a23f 48%,#8a5a16); box-shadow:0 0 10px rgba(255,196,80,.7); }
.st-xp-bar > span { position:relative; white-space:nowrap; text-shadow:0 1px 2px #000,0 0 3px #000,0 0 6px #000; }
.st-cap { font:700 12px/1 Cinzel,Georgia,serif; letter-spacing:.08em; color:#f3e0b4; text-transform:uppercase; }
.st-xp-num { font:700 14.5px/1 Georgia,serif; color:#fff6de; font-variant-numeric:tabular-nums; }
/* Attributes: framed cards, the big icon, the gold small-caps name, the value (green when gear raises it) and the + art. */
.st-attrs { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.st-attr { display:grid; grid-template:"ico name name" auto "ico val plus" auto / 58px minmax(0,1fr) auto; align-content:center; align-items:center; column-gap:10px; min-height:70px; padding:4px 8px 4px 4px; }
.st-attr-ico { grid-area:ico; width:58px; height:58px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.st-name { grid-area:name; align-self:end; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--st-gold); font:700 15px/1.15 Cinzel,Georgia,serif; letter-spacing:.04em; text-shadow:0 1px 2px #000; }
.st-attr .st-val { grid-area:val; color:#fff; font:700 25px/1.05 Georgia,serif; text-shadow:0 1px 3px #000; font-variant-numeric:tabular-nums; }
.st-attr .st-val.boost { color:#86e07c; }
#characterWindow .st-plus { grid-area:plus; width:38px; height:38px; min-width:0; margin:0; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; animation:points-pulse 1.3s ease-in-out infinite; transition:filter .12s,transform .12s; }
#characterWindow .st-plus:hover { background:none; filter:brightness(1.22) saturate(1.1); }
#characterWindow .st-plus:active { transform:scale(.92); }
.st-plus-art { display:block; width:100%; height:100%; pointer-events:none; }
/* Stat Points: a badge that glows while points wait to be spent. */
.st-points { display:flex; align-items:center; justify-content:center; gap:12px; min-height:28px; }
.st-badge { padding:4px 16px; border:1px solid #6e5634; border-radius:15px; background:linear-gradient(#2a1f15,#110c08); box-shadow:inset 0 0 8px #000; color:#a39170; font:700 14px/1.2 Cinzel,Georgia,serif; letter-spacing:.05em; }
.st-badge .st-val { color:inherit; }
.st-points.glow .st-badge { border-color:#e0b04c; color:#ffe08a; text-shadow:0 0 8px #a07000; animation:st-badge-glow 1.6s ease-in-out infinite; }
@keyframes st-badge-glow { 0%,100% { box-shadow:inset 0 0 8px rgba(0,0,0,.8),0 0 6px rgba(255,180,60,.35); } 50% { box-shadow:inset 0 0 8px rgba(0,0,0,.8),0 0 16px 2px rgba(255,200,80,.8); } }
.st-hint { color:#b8a58b; font:italic 14.5px/1.2 'EB Garamond',Georgia,serif; }
/* Derived stats: two columns of icon, label and right-aligned value. */
.st-derived { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; align-content:start; }
.st-row { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; column-gap:8px; min-height:30px; border-bottom:1px solid rgba(150,110,60,.24); }
.st-row:hover { background:linear-gradient(90deg,rgba(255,210,120,.08),transparent); }
.st-ico { width:26px; height:26px; }
.st-tint-red { filter:hue-rotate(-38deg) saturate(1.9) brightness(.95); }
.st-lbl { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#cfc0a0; font:17px/1.15 'EB Garamond',Georgia,serif; }
.st-row .st-val { justify-self:end; color:#fff; font:700 17px/1.15 'EB Garamond',Georgia,serif; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.st-row .st-val i { font-style:normal; }
.st-adds { grid-column:2/4; justify-self:end; margin-top:-2px; white-space:nowrap; font:700 14.5px/1.1 'EB Garamond',Georgia,serif; }.st-row.has-adds .st-ico { grid-row:span 2; }.st-adds i { font-style:normal; }
.st-derived.roomy .st-row { min-height:33px; }.st-derived.dense .st-row { min-height:27px; }
/* Resistances: the element's icon, the value under it; negative in red, at the cap in gold. */
.st-res { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.st-res-tile { display:grid; justify-items:center; align-content:center; padding:5px 4px 6px; }
.st-res-ico { width:48px; height:48px; margin-bottom:1px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.st-res-tile .st-val { color:#fff; font:700 19px/1.1 Georgia,serif; text-shadow:0 1px 3px #000; font-variant-numeric:tabular-nums; }
.st-res-tile .st-val.neg { color:#ff5b4b; }
.st-res-tile .st-val.max { color:#ffd66c; text-shadow:0 0 8px rgba(255,190,70,.85),0 1px 2px #000; }
.st-res-name { margin-top:2px; color:#bfa46c; font:700 11px/1 Cinzel,Georgia,serif; letter-spacing:.07em; text-transform:uppercase; }
@media (prefers-reduced-motion:reduce) { #characterWindow .st-plus,.st-points.glow .st-badge { animation:none; } }

/* The left panel (#panelL: the Vault, vendors, the Codex, Watchfires, a companion): the frame stands still and the inner
   .panel-scroll scrolls, so the close medallion (lifted out of it, src/ui.js refreshPanels) stands on the frame's corner
   above everything, placed like the character windows' (owner, 2026-09-26: "make sure the close buttons are always on
   top, not nested behind the frames"). Phones keep their sheet as it was. */
body:not(.mobile) #panelL { overflow: visible; }
body:not(.mobile) #panelL > .panel-scroll { position: absolute; inset: 0; overflow: hidden auto; padding: 8px 10px 12px; }
body:not(.mobile) #panelL > .panel-scroll::-webkit-scrollbar { width: 6px; } body:not(.mobile) #panelL > .panel-scroll::-webkit-scrollbar-thumb { background: #4a3a28; }
#panelL > .px { position: absolute; z-index: 6; top: -33px; right: -33px; }
body.mobile #panelL > .px { display: none; }