/* =====================================================================================================================
   OVERCHARGED UI DESIGN SYSTEM  ("Ley Enamel", v0.6.1, UI team)
   One stylesheet for every screen: the World HUD, toasts, banners, captions, and every team's panels.

   The look: magic is a public utility, so the interface is utility hardware drawn as a cartoon. Panels are deep plum
   enamel with a thick cel-shaded ink outline and a hard drop shadow; every window carries a brass "meter plate" title
   band; anything you can press is raised enamel that pushes down; ley cyan means interactive or focused; brass gold
   means value and selection. Fredoka (rounded display) for titles, numbers and buttons, Nunito for reading.

   Rules for every team:
   - Use the tokens below (var(--...)), never raw colours. Rarity colours live here too (--r-<rarity>).
   - Shared component classes: .oc-panel (window), .oc-band (brass title band), .oc-btn (+ .primary .gold .danger
     .ghost, .sel/.on for toggles), .oc-tab, .oc-slot (item / spell well, add data-rar="epic"), .oc-tip (tooltip),
     .oc-kbd (keycap), .oc-bar (meter). Other teams' existing classes are skinned to match in the "Skin" section.
   - HUD layout: never position HUD pieces with fixed pixel offsets that can collide. Read the layout variables that
     hud.js writes every 100 ms (see "Layout variables") or ask G.ui.lane / G.ui.layout (ui/lane.js).
   - Scale: --hs is the HUD scale (0.8 at 720p, 1 at 900p, 1.2 at 1080p, 1.6 at 1440p); --ps the panel scale (never
     below 1). Both are written by hud.js on resize.
   ===================================================================================================================== */
:root {
  /* scale (hud.js keeps these current) */
  --hs: 1; --ps: 1;
  /* ink and enamel */
  /* The Leylands (HUD, ARTDIR U3): warm ink instead of the purple glass. Was ink #170f22, enamel #15102a..#43387a, well #120d22 */
  --ink: #140f0c; --ink-60: rgba(20, 15, 12, .6); --ink-30: rgba(20, 15, 12, .3);
  --enamel-0: #17110d; --enamel-1: #231a14; --enamel-2: #33271e; --enamel-3: #463629; --enamel-glass: rgba(20, 15, 12, .86);
  --well: #100c09; --well-2: #1c1510;
  /* brass and ley */
  --brass-hi: #fff0b8; --brass: #f2bf55; --brass-lo: #b0761f; --brass-line: rgba(242, 191, 85, .38);
  --ley: #6ff6ff; --ley-2: #2fb6e6; --ley-glow: rgba(111, 246, 255, .42);
  /* text */
  --text: #fff7ea; --text-2: #ecdfca; --muted: #b5a68e; --text-ink: #140f0c;
  /* meanings */
  --hp: #ff4d64; --hp-2: #b8102c; --mana: #4d8cff; --mana-2: #1c3cb0; --xp: #c27dff; --gold: #ffd75a;
  --good: #6dff9e; --bad: #ff6a5a; --warn: #ffb340; --info: #9fe8ff;
  /* rarity (matches rpg/rarity.js) */
  --r-junk: #9d9d9d; --r-common: #f4f0ff; --r-uncommon: #3ce45a; --r-rare: #3b9cff; --r-epic: #b86bff; --r-utility: #2ff3ff; --r-legendary: #ff9a1f;
  /* shape */
  --rad-s: 8px; --rad-m: 12px; --rad-l: 18px; --rad-pill: 999px;
  --line: 3px solid var(--ink); --line-thin: 2px solid var(--ink);
  --bevel: inset 0 2px 0 rgba(255, 255, 255, .13), inset 0 -3px 0 rgba(0, 0, 0, .28);
  --drop: 0 5px 0 var(--ink-60); --drop-s: 0 3px 0 var(--ink);
  --panel-bg: rgba(20, 15, 12, .86); /* ARTDIR U3 warm ink (was the purple glass gradient) */
  --panel-shadow: var(--bevel), inset 0 0 0 1.5px var(--brass-line), var(--drop), 0 14px 40px rgba(10, 6, 20, .45);
  --band: linear-gradient(180deg, #fff3c4, #f6c860 46%, #dd9a33);
  /* spacing and type */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --font: 'Nunito', system-ui, sans-serif; --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --fs-xs: 11px; --fs-s: 13px; --fs-m: 15px; --fs-l: 18px; --fs-xl: 22px; --fs-xxl: 30px;
  /* layout variables (hud.js, from G.ui.layout): free space per region, in px */
  --oc-left-y: 150px;     /* first free y under the player frame, buffs and party frames (coach card, help) */
  --oc-top-y: 120px;      /* first free y under the target frame and boss bars (banner, toasts) */
  --oc-card-y: 130px;     /* where unlock and rank cards start (under the target frame, boss bars and guide line) */
  --oc-toast-y: 150px;    /* where the toast column starts (under the banner and any card) */
  --oc-right-y: 262px;    /* first free y under the minimap and zone name (quest tracker) */
  --oc-bottom-y: 196px;   /* distance from the bottom edge to the top of the action bar cluster (captions sit above) */
  --oc-hint-y: 236px;     /* distance from the bottom edge for the how-to hint (above the caption) */
  /* legacy names other teams read */
  --ley2: var(--ley-2); --glass: var(--enamel-glass); --glass2: rgba(255, 255, 255, .08);
}
html, body { margin: 0; height: 100%; background: #9fd0f0; overflow: hidden; font-family: var(--font); color: var(--text); user-select: none; -webkit-user-select: none; }
canvas#game { display: block; position: fixed; inset: 0; width: 100%; height: 100%; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui * { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------------------------------------------------------------------------------------------------- components */
.ink { text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink); }
.panel, .oc-panel { background: var(--panel-bg); border: var(--line); border-radius: var(--rad-l); box-shadow: var(--panel-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* the brass meter plate title band: bleeds to the panel's edges, ink text, two rivets */
.oc-band { display: flex; align-items: center; gap: var(--s2); margin: calc(-1 * var(--band-pt, 14px)) calc(-1 * var(--band-px, 16px)) var(--s3); padding: 8px 14px 8px 30px; background: var(--band); color: var(--text-ink); border-bottom: var(--line); border-radius: calc(var(--rad-l) - 3px) calc(var(--rad-l) - 3px) 0 0; font: 700 var(--fs-xl)/1.1 var(--display); letter-spacing: .3px; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 70, 10, .35); position: relative; }
.oc-band::before, .oc-band::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8d8, #a8701e 70%); box-shadow: 0 0 0 1.5px var(--ink); }
.oc-band::before { left: 12px; } .oc-band::after { right: 12px; }
/* buttons: raised enamel that pushes down */
.btn, .oc-btn { pointer-events: auto; font: 600 var(--fs-l)/1.1 var(--display); color: var(--text-ink); background: linear-gradient(#ffe89a, #ffcf3a 55%, #e0a622); /* ARTDIR: gold primary with dark text (was ley cyan) */ border: var(--line); border-radius: var(--rad-m); padding: 10px 22px; cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), var(--drop-s); transition: transform .08s, filter .12s, box-shadow .08s; }
.btn:hover, .oc-btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 5px 0 var(--ink); }
.btn:active, .oc-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 1px 0 var(--ink); }
.btn.alt, .btn.sel, .oc-btn.gold { background: linear-gradient(#fff3c4, var(--brass) 55%, #dd9a33); }
.btn.ghost, .oc-btn.ghost { background: linear-gradient(var(--enamel-3), var(--enamel-2)); color: var(--text); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), var(--drop-s); }
.oc-btn.danger { background: linear-gradient(#ff9a8a, #e0483a); }
.btn:disabled, .oc-btn:disabled { filter: grayscale(.9) brightness(.7); cursor: default; transform: none; box-shadow: 0 1px 0 var(--ink); }
.oc-kbd, kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.55em; padding: 0 .4em; border-radius: 6px; background: linear-gradient(#fbf5ff, #d9cff2); color: var(--text-ink); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 700 .82em/1 var(--display); }
/* focus: keyboard (focus-visible) and controller (.gp-focus, ui/gamepad.js) share one ring */
:focus-visible { outline: 3px solid #ffcf3a; outline-offset: 2px; }
.gp-focus { outline: 4px solid #ffcf3a !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px rgba(255, 207, 58, .35), 0 0 22px rgba(255, 207, 58, .35) !important; /* ARTDIR U3: gold focus (was ley cyan) */ filter: brightness(1.12); animation: ocFocus 1.2s ease-in-out infinite; }
@keyframes ocFocus { 50% { outline-color: #fff0b8; } }
/* item and spell wells; data-rar sets the rarity frame */
.oc-slot { position: relative; width: 52px; height: 52px; border-radius: var(--rad-m); border: 2.5px solid var(--ink); background: radial-gradient(circle at 50% 38%, var(--well-2), var(--well) 75%); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 2px 0 var(--ink-60); overflow: hidden; }
[data-rar] { --rar: var(--r-common); }
[data-rar=junk] { --rar: var(--r-junk); } [data-rar=uncommon] { --rar: var(--r-uncommon); } [data-rar=rare] { --rar: var(--r-rare); } [data-rar=epic] { --rar: var(--r-epic); } [data-rar=utility] { --rar: var(--r-utility); } [data-rar=legendary] { --rar: var(--r-legendary); }
.oc-slot[data-rar], .rpg-slot[data-rar] { border-color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--rar), inset 0 0 14px color-mix(in srgb, var(--rar) 45%, transparent), 0 2px 0 var(--ink-60) !important; }
.rpg-slot[data-rar=common], .rpg-slot[data-rar=junk] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rar) 40%, transparent), inset 0 3px 6px rgba(0, 0, 0, .5), 0 2px 0 var(--ink-60) !important; }
.rpg-slot[data-rar=legendary], .rpg-slot[data-rar=utility] { animation: ocRarPulse 2.4s ease-in-out infinite; }
@keyframes ocRarPulse { 50% { box-shadow: inset 0 0 0 2px var(--rar), inset 0 0 22px color-mix(in srgb, var(--rar) 70%, transparent), 0 0 10px color-mix(in srgb, var(--rar) 50%, transparent); } }
/* tooltips */
.oc-tip { position: fixed; z-index: 90; pointer-events: none; min-width: 220px; max-width: 320px; padding: 10px 12px 11px; background: linear-gradient(180deg, #2a2150, #17112c); border: var(--line); border-radius: var(--rad-m); box-shadow: inset 0 0 0 1.5px var(--brass-line), var(--drop); color: var(--text); font: 13px/1.38 var(--font); display: none; }
.oc-tip.on { display: block; }
.oc-tip .t { font: 700 17px/1.15 var(--display); color: #fff; }
.oc-tip .m { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 12px; margin-top: 2px; }
.oc-tip .d { margin-top: 6px; color: var(--text); }
.oc-tip .k { margin-top: 7px; color: var(--muted); font-size: 12px; }
.oc-tip .cost { color: var(--info); } .oc-tip .cd { color: var(--brass); }
/* meters */
.oc-bar { position: relative; height: 14px; border-radius: var(--rad-pill); border: var(--line-thin); background: linear-gradient(#0d0a1a, #1c1636); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); }
.oc-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(#ffe58a, #ffb030); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2); }

/* ---------------------------------------------------------------------------------------------------- HUD: bottom */
#bottom { position: absolute; left: 50%; bottom: calc(14px * var(--hs)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: calc(10px * var(--hs)); }
.orb { position: relative; width: calc(128px * var(--hs)); height: calc(128px * var(--hs)); flex: none; }
.orb canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(5px * var(--hs)) 0 var(--ink-60)); }
.orb .val { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-55%); text-align: center; font: 700 calc(21px * var(--hs))/1 var(--display); }
.orb .lbl { position: absolute; left: 50%; bottom: calc(-7px * var(--hs)); transform: translateX(-50%); padding: calc(2px * var(--hs)) calc(10px * var(--hs)); border-radius: var(--rad-pill); background: var(--enamel-1); border: var(--line-thin); font: 700 max(9.5px, calc(10.5px * var(--hs)))/1.1 var(--display); letter-spacing: .08em; color: var(--text-2); white-space: nowrap; box-shadow: 0 2px 0 var(--ink-60); }
#hporb .lbl { color: #ffc2ca; } #mporb .lbl { color: #c4d6ff; }
/* v0.8 Combat Balance: low mana is obvious (under 20%: the orb throbs and its number turns pale; hud.js toggles .low) */
#mporb.low canvas { animation: oc-mp-low .7s ease-in-out infinite alternate; }
#mporb.low .val { color: #ffd0d0; }
@keyframes oc-mp-low { from { transform: scale(1); filter: drop-shadow(0 calc(5px * var(--hs)) 0 var(--ink-60)) brightness(1); } to { transform: scale(1.07); filter: drop-shadow(0 0 calc(12px * var(--hs)) #ff5a7a) brightness(1.35) saturate(.6); } }
@media (prefers-reduced-motion: reduce) { #mporb.low canvas { animation: none; filter: drop-shadow(0 0 calc(10px * var(--hs)) #ff5a7a); } }
#barwrap { display: flex; flex-direction: column; align-items: stretch; gap: calc(5px * var(--hs)); margin-bottom: calc(4px * var(--hs)); }
#resource { width: 100%; height: calc(14px * var(--hs)); border-radius: var(--rad-pill); border: var(--line-thin); background: linear-gradient(#0d0a1a, #1c1636); overflow: hidden; display: none; position: relative; box-shadow: 0 2px 0 var(--ink-60); }
#resource i { display: block; height: 100%; background: linear-gradient(#ffe98a, #ffb030); width: 0; transition: width .1s; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); }
#resource b { position: absolute; inset: 0; font: 700 max(9.5px, calc(10px * var(--hs)))/1 var(--display); display: flex; align-items: center; justify-content: center; letter-spacing: .04em; }
#actionbar { display: flex; gap: calc(5px * var(--hs)); padding: calc(7px * var(--hs)) calc(8px * var(--hs)); border-radius: calc(16px * var(--hs)); }
.slot { position: relative; width: calc(52px * var(--hs)); height: calc(52px * var(--hs)); border-radius: calc(11px * var(--hs)); border: 2.5px solid var(--ink); background: radial-gradient(circle at 50% 38%, var(--well-2), var(--well) 75%); overflow: hidden; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55), 0 2px 0 var(--ink-60); pointer-events: auto; }
.slot canvas.icon { width: 100%; height: 100%; display: block; }
.slot canvas.cd { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .3); pointer-events: none; }
.slot .key { position: absolute; left: calc(2px * var(--hs)); top: calc(2px * var(--hs)); min-width: calc(15px * var(--hs)); height: calc(15px * var(--hs)); padding: 0 calc(3px * var(--hs)); border-radius: calc(5px * var(--hs)); background: rgba(23, 15, 34, .82); color: var(--text); font: 700 max(9.5px, calc(10.5px * var(--hs)))/calc(15px * var(--hs)) var(--display); text-align: center; text-shadow: none; z-index: 2; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 calc(19px * var(--hs))/1 var(--display); z-index: 1; }
.slot.nomana canvas.icon { filter: saturate(.3) brightness(.55) sepia(.4) hue-rotate(180deg); }
.slot.nomana .key { color: #9fb8ff; }
.slot.flash { animation: slotflash .3s; } @keyframes slotflash { from { box-shadow: 0 0 0 4px var(--ley), 0 0 16px var(--ley); } to { box-shadow: 0 0 0 0 transparent; } }
.slot.empty { background: rgba(18, 13, 34, .55); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
.slot.empty .key { opacity: .55; }
.slot:hover:not(.empty) { border-color: var(--ley); }
#actionbar .slot.ult { border-color: var(--brass) !important; box-shadow: inset 0 0 0 2px rgba(23, 15, 34, .9), inset 0 0 12px rgba(242, 191, 85, .35), 0 0 0 2px var(--ink), 0 0 12px rgba(242, 191, 85, .35) !important; overflow: visible; }
#actionbar .slot.ult:nth-child(11) { margin-left: calc(12px * var(--hs)); }
#actionbar .slot .ulttag { position: absolute; left: 50%; top: calc(-9px * var(--hs)); transform: translateX(-50%); padding: 0 calc(5px * var(--hs)); border-radius: var(--rad-pill); background: var(--band); border: 2px solid var(--ink); color: var(--ink); font: 700 max(9.5px, calc(8.5px * var(--hs)))/calc(12px * var(--hs)) var(--display); letter-spacing: .08em; text-shadow: none; pointer-events: none; z-index: 3; }
#actionbar .slot.ult canvas.icon { border-radius: calc(9px * var(--hs)); }
#xpbar { position: relative; width: 100%; height: calc(11px * var(--hs)); box-shadow: 0 2px 0 var(--ink-60); border: var(--line-thin); border-radius: var(--rad-pill); background: linear-gradient(#0d0a1a, #1c1636); overflow: hidden; }
#xpbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(23, 15, 34, .75) calc(10% - 2px) 10%); pointer-events: none; }
#xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(#e2b0ff, var(--xp) 60%, #8a4dff); transition: width .3s; }
#xpbar b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 700 max(9.5px, calc(8.5px * var(--hs)))/1 var(--display); z-index: 1; letter-spacing: .03em; opacity: 0; transition: opacity .2s; }
#xpbar:hover b, body.ow-panel-open #xpbar b, #xpbar.show b { opacity: 1; }

/* ---------------------------------------------------------------------------------------------------- HUD: unit frames */
.uframe { position: absolute; display: flex; align-items: center; gap: calc(9px * var(--hs)); padding: calc(7px * var(--hs)) calc(14px * var(--hs)) calc(7px * var(--hs)) calc(7px * var(--hs)); min-width: calc(236px * var(--hs)); }
.uframe .portrait { width: calc(52px * var(--hs)); height: calc(52px * var(--hs)); flex: none; border-radius: 50%; border: var(--line); background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 50% 120%, rgba(0, 0, 0, .45), transparent 60%), var(--pc, var(--ley-2)); display: flex; align-items: center; justify-content: center; font: 700 calc(22px * var(--hs))/1 var(--display); position: relative; box-shadow: 0 0 0 3px var(--brass), 0 0 0 5.5px var(--ink); margin: 3px; }
.uframe .lvl { position: absolute; bottom: calc(-8px * var(--hs)); right: calc(-9px * var(--hs)); min-width: calc(22px * var(--hs)); height: calc(20px * var(--hs)); border-radius: var(--rad-pill); background: var(--band); color: var(--ink); border: var(--line-thin); font: 700 calc(11.5px * var(--hs))/calc(16px * var(--hs)) var(--display); text-align: center; padding: 0 calc(4px * var(--hs)); text-shadow: none; }
.uframe .name { font: 600 calc(16px * var(--hs))/1.15 var(--display); white-space: nowrap; }
.uframe .sub { font-size: calc(11.5px * var(--hs)); color: var(--muted); font-weight: 700; }
.uframe .bar { height: calc(15px * var(--hs)); border-radius: var(--rad-pill); border: var(--line-thin); background: linear-gradient(#0d0a1a, #1c1636); overflow: hidden; position: relative; margin-top: calc(4px * var(--hs)); }
.uframe .bar i { display: block; height: 100%; background: linear-gradient(#ffa0aa, var(--hp) 55%, var(--hp-2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4); transition: width .12s; }
.uframe .bar.mp i { background: linear-gradient(#a8c8ff, var(--mana) 55%, var(--mana-2)); }
.uframe .bar b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 max(9.5px, calc(10px * var(--hs)))/1 var(--display); text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); }
#playerframe { left: calc(14px * var(--hs)); top: calc(14px * var(--hs)); }
#playerframe .pbars { flex: 1; min-width: calc(120px * var(--hs)); }
#playerframe .bar { height: calc(11px * var(--hs)); margin-top: calc(3px * var(--hs)); }
#target { left: 50%; top: max(calc(14px * var(--hs)), var(--oc-compass-b, 0px)); /* v2.6.11: under the compass bar */ transform: translateX(-50%); display: none; min-width: calc(340px * var(--hs)); }
#target.elite .portrait { box-shadow: 0 0 0 3px var(--ley), 0 0 0 5.5px var(--ink); }
#target.rare .portrait { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5.5px var(--ink), 0 0 14px var(--gold); }
#target.boss .portrait { box-shadow: 0 0 0 3px #ff5a4d, 0 0 0 5.5px var(--ink), 0 0 14px #ff5a4d; }
#target .affixes { font-size: max(9.5px, calc(11px * var(--hs))); font-weight: 800; letter-spacing: .3px; }
#target .debuffs { display: flex; gap: 3px; margin-top: calc(4px * var(--hs)); } #target .debuffs .buff { width: calc(20px * var(--hs)); height: calc(20px * var(--hs)); font-size: max(9.5px, calc(8px * var(--hs))); }
#target .castt { height: calc(9px * var(--hs)); border-radius: var(--rad-pill); border: var(--line-thin); background: rgba(0, 0, 0, .5); margin-top: 3px; overflow: hidden; display: none; }
#target .castt i { display: block; height: 100%; background: linear-gradient(#ffd0ff, #c77dff); }
#target .skull { font-size: 20px; }
#bossbar { position: absolute; left: 50%; top: max(calc(var(--oc-target-b, 14px) + 8px), calc(var(--oc-compass-b, 0px) + 4px)); /* v2.6.11: never on the compass */ transform: translateX(-50%); width: min(calc(620px * var(--hs)), 70vw); display: none; text-align: center; padding: calc(7px * var(--hs)) calc(14px * var(--hs)) calc(10px * var(--hs)); }
#bossbar .bn { font: 700 calc(19px * var(--hs))/1.1 var(--display); }
#bossbar .bb { height: calc(18px * var(--hs)); border-radius: var(--rad-pill); border: var(--line); background: linear-gradient(#0d0a1a, #1c1636); overflow: hidden; margin-top: 5px; position: relative; }
#bossbar .bb i { display: block; height: 100%; background: linear-gradient(#ffb09a, #ff5a4d 50%, #b8102c); transition: width .15s; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
#bossbar .bb s { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); }
#party { position: absolute; left: calc(14px * var(--hs)); top: var(--oc-party-y, 100px); display: flex; flex-direction: column; gap: calc(6px * var(--hs)); }
#party .uframe { position: relative; min-width: calc(200px * var(--hs)); }
#buffs { position: absolute; left: calc(18px * var(--hs)); top: calc(var(--oc-pf-b, 86px) + 8px); display: flex; flex-wrap: wrap; gap: calc(5px * var(--hs)); max-width: calc(260px * var(--hs)); }
.buff { width: calc(30px * var(--hs)); height: calc(30px * var(--hs)); border-radius: calc(8px * var(--hs)); border: var(--line-thin); position: relative; font: 700 max(9.5px, calc(10px * var(--hs)))/1 var(--display); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 2px 0 var(--ink-60); }
.buff.good { background: linear-gradient(#9dffc0, #2a9a5a); } .buff.bad { background: linear-gradient(#ffa090, #a02a2a); }
.buff span { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font-size: calc(13px * var(--hs)); }

/* ---------------------------------------------------------------------------------------------------- HUD: top right */
#minimap { position: absolute; right: calc(16px * var(--hs)); top: calc(16px * var(--hs)); width: calc(184px * var(--hs)); height: calc(184px * var(--hs)); border-radius: 50%; border: 4px solid var(--ink); overflow: hidden; box-shadow: 0 0 0 4px var(--brass), 0 0 0 7px var(--ink), 0 9px 0 var(--ink-60), inset 0 0 18px rgba(0, 0, 0, .45); background: #2a5a8a; }
#minimap canvas { width: 100%; height: 100%; display: block; }
#mmzone { position: absolute; right: calc(16px * var(--hs)); top: calc(212px * var(--hs)); width: calc(184px * var(--hs)); text-align: center; font: 700 calc(14px * var(--hs))/1.15 var(--display); }
#mmzone:not(:empty) { padding: calc(4px * var(--hs)) calc(10px * var(--hs)) calc(5px * var(--hs)); border-radius: var(--rad-m); background: var(--enamel-glass); border: var(--line-thin); box-shadow: 0 3px 0 var(--ink-60); text-shadow: 0 2px 0 var(--ink); }
#mmzone small { display: block; font: 700 max(9.5px, calc(11px * var(--hs)))/1.2 var(--font); color: var(--muted); text-shadow: none; }
#objective { position: absolute; right: calc(16px * var(--hs)); top: var(--oc-right-y); width: calc(250px * var(--hs)); padding: calc(10px * var(--hs)) calc(12px * var(--hs)); display: none; }
#objective h4 { margin: 0 0 4px; font: 700 calc(15px * var(--hs))/1.2 var(--display); color: var(--gold); }
#objective .ot { font-size: calc(13px * var(--hs)); } #objective .tm { float: right; font-family: var(--display); color: var(--ley); }
#objective .pb { height: 8px; border-radius: var(--rad-pill); border: var(--line-thin); background: rgba(0, 0, 0, .5); margin-top: 6px; overflow: hidden; } #objective .pb i { display: block; height: 100%; background: linear-gradient(90deg, #ffd75a, #ff9a3a); }
#streak { position: absolute; right: calc(240px * var(--hs)); top: 40%; text-align: right; font-family: var(--display); opacity: 0; transition: opacity .3s; }
#streak .n { font-size: calc(54px * var(--hs)); font-weight: 700; color: #ffe14a; line-height: 1; } #streak .l { font-size: calc(20px * var(--hs)); font-weight: 700; color: #ff7ad8; }
#streak.pop .n { animation: pop .18s; } @keyframes pop { from { transform: scale(1.4); } to { transform: scale(1); } }

/* ---------------------------------------------------------------------------------------------------- HUD: messages */
#radio { position: absolute; left: calc(14px * var(--hs)); bottom: calc(var(--oc-bottom-y) + 8px); width: min(calc(400px * var(--hs)), 34vw); padding: 10px 14px 10px 64px; display: none; }
#radio .who { font: 700 13px/1.2 var(--display); color: var(--ley); } #radio .txt { font-size: 14px; line-height: 1.35; }
#radio .av { position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: var(--line); background: radial-gradient(circle at 40% 35%, #fff6, #0003), var(--ley-2); display: flex; align-items: center; justify-content: center; font: 700 20px/1 var(--display); }
#radio .av.talk { animation: talk .18s infinite alternate; } @keyframes talk { to { transform: scale(1.06); } }
/* toasts: one column, under whatever holds the top of the screen (lane.js decides, hud.js writes --oc-toast-y) */
body.ow-panel-open #toasts, body.ow-panel-open .rpg-toasts { top: auto !important; bottom: calc(var(--oc-bottom-y) + 10px); flex-direction: column-reverse; }
#toasts { position: absolute; left: 50%; top: var(--oc-toast-y); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--hs)); z-index: 30; transition: top .25s ease; }
.toast { position: relative; font: 600 calc(17px * var(--hs))/1.2 var(--display); padding: calc(6px * var(--hs)) calc(18px * var(--hs)) calc(7px * var(--hs)) calc(28px * var(--hs)); border-radius: var(--rad-pill); animation: toast 3.2s forwards; color: var(--text); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.toast::before { content: ''; position: absolute; left: calc(11px * var(--hs)); top: 50%; width: calc(9px * var(--hs)); height: calc(9px * var(--hs)); margin-top: calc(-4.5px * var(--hs)); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--ink); }
.toast.panel { box-shadow: var(--bevel), inset 0 0 0 1.5px var(--brass-line), 0 3px 0 var(--ink-60); }
.toast.event, .toast.loot { color: var(--gold); } .toast.good { color: var(--good); } .toast.bad { color: #ffb0a8; } .toast.discover { color: var(--ley); } .toast.info { color: var(--text-2); } .toast.massacre { color: #ff7ad8; font-size: calc(21px * var(--hs)); }
.toast[data-n]::after { content: 'x' attr(data-n); margin-left: 8px; font-size: .8em; color: var(--text-2); }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 8% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.toast.bump { animation: owBump .25s ease-out, toast 3.2s forwards; } @keyframes owBump { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* zone and event banner */
#banner { position: absolute; left: 0; right: 0; top: max(19%, var(--oc-top-y)); text-align: center; pointer-events: none; opacity: 0; }
#banner h1 { margin: 0; font: 700 clamp(34px, calc(60px * var(--hs)), 96px)/1 var(--display); color: #fff; letter-spacing: .5px; text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 6px 0 var(--ink), 0 10px 18px rgba(10, 6, 20, .35); }
#banner p { display: inline-block; margin: calc(10px * var(--hs)) 0 0; padding: calc(4px * var(--hs)) calc(18px * var(--hs)) calc(5px * var(--hs)); border-radius: var(--rad-pill); background: var(--band); border: var(--line); color: var(--ink); font: 700 calc(16px * var(--hs))/1.2 var(--display); text-shadow: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), var(--drop-s); }
#banner p:empty { display: none; }
#banner.show { animation: banner 4s forwards; } @keyframes banner { 0% { opacity: 0; transform: scale(1.12); } 10% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* interact prompt */
#prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); padding: calc(7px * var(--hs)) calc(16px * var(--hs)) calc(7px * var(--hs)) calc(8px * var(--hs)); font: 600 calc(16px * var(--hs))/1.2 var(--display); display: none; border-radius: var(--rad-pill); }
#prompt kbd { margin-right: calc(8px * var(--hs)); font-size: calc(15px * var(--hs)); background: var(--band); }
/* a short how-to line above the caption */
.ow-hint { position: absolute; left: 50%; bottom: var(--oc-hint-y); transform: translateX(-50%) translateY(10px); padding: calc(7px * var(--hs)) calc(16px * var(--hs)); border-radius: var(--rad-pill); font: 600 calc(15px * var(--hs))/1.2 var(--display); opacity: 0; transition: opacity .35s, transform .35s, bottom .25s; pointer-events: none; white-space: nowrap; color: var(--ley); }
.ow-hint.on { opacity: 1; transform: translateX(-50%); }
/* new spell card: waits its turn in the top lane */
.newspell { position: absolute; left: 50%; top: calc(var(--oc-card-y) / var(--hs)); transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 10px 18px 10px 10px; min-width: 300px; max-width: 460px; animation: nsIn .35s cubic-bezier(.2, 1.6, .4, 1); transition: opacity .5s, transform .5s; pointer-events: none; zoom: var(--hs); }
.newspell canvas { width: 64px; height: 64px; border-radius: 12px; border: var(--line); background: var(--well); box-shadow: 0 0 0 2px var(--brass), 0 0 16px rgba(242, 191, 85, .5); }
.newspell small { display: block; color: var(--gold); font: 700 13px/1.2 var(--display); }
.newspell b { display: block; font: 700 22px/1.15 var(--display); color: #fff; }
.newspell p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.newspell.out { opacity: 0; transform: translateX(-50%) translateY(-14px); }
@keyframes nsIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
/* controls card (first minutes): yields to the coach card, never shares the left column with it */
#help { position: absolute; left: calc(14px * var(--hs)); top: var(--oc-left-y); padding: calc(10px * var(--hs)) calc(12px * var(--hs)); width: calc(250px * var(--hs)); font-size: calc(12px * var(--hs)); color: var(--text-2); transition: opacity .6s; display: grid; grid-template-columns: auto 1fr; gap: calc(5px * var(--hs)) calc(8px * var(--hs)); align-items: center; }
#help h5 { grid-column: 1 / -1; margin: 0 0 2px; font: 700 calc(13px * var(--hs))/1.2 var(--display); color: var(--brass); }
#help kbd { font-size: max(9.5px, calc(11px * var(--hs))); justify-self: start; }
#help span { font-weight: 700; }
body.ow-hasparty #help, body.ow-helpdone #help, body:has(.ocs-coach:not([style*="display: none"])) #help, body.ow-panel-open #help { opacity: 0; pointer-events: none; }
#hurt { position: absolute; inset: 0; box-shadow: inset 0 0 160px 40px rgba(255, 30, 40, .0); transition: box-shadow .15s; }
#reconnect { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(ellipse at center, rgba(34, 20, 60, .82), rgba(10, 6, 20, .92)); pointer-events: auto; text-align: center; }
#reconnect h2 { font: 700 clamp(36px, calc(46px * var(--hs)), 72px)/1 var(--display); margin: 0; } #reconnect p { color: var(--text-2); font-size: calc(15px * var(--hs)); }
#reconnect .spin { width: 64px; height: 64px; border-radius: 50%; border: 7px solid rgba(111, 246, 255, .2); border-top-color: var(--ley); animation: spin .9s linear infinite; margin-bottom: 18px; } @keyframes spin { to { transform: rotate(360deg); } }
#reconnect .killer { color: #ffb0a0; font: 600 18px/1.3 var(--display); display: inline-block; margin-top: 10px; }
#reconnect .tip { display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: var(--rad-pill); background: var(--enamel-glass); border: var(--line-thin); color: var(--text-2); font-size: 14px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px rgba(23, 15, 34, .55); }
#crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
#crosshair.hot { border-color: #ff6a5a; transform: scale(1.2); }
body.ow-panel-open #crosshair { opacity: 0; }
#overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
#perf { position: absolute; right: 14px; bottom: 150px; font: 11px/1.35 ui-monospace, monospace; padding: 6px 9px; white-space: pre; display: none; }
#guide { position: absolute; left: 50%; top: var(--oc-top-y); transform: translateX(-50%); padding: calc(5px * var(--hs)) calc(16px * var(--hs)) calc(6px * var(--hs)) calc(6px * var(--hs)); display: none; font: 600 calc(14px * var(--hs))/1.2 var(--display); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; border-radius: var(--rad-pill); }
#guide b { display: inline-block; padding: 1px 8px; margin-right: 8px; border-radius: var(--rad-pill); background: var(--band); color: var(--ink); border: 2px solid var(--ink); font-size: .8em; text-shadow: none; }
#guide span { color: var(--text); }
body:has(#banner.show) #guide { opacity: 0; }
/* action bar tooltip */
#bartip { bottom: calc(var(--oc-bar-top, 160px) + 14px); top: auto; z-index: 95; zoom: var(--hs); bottom: calc((var(--oc-bar-top, 160px) + 14px) / var(--hs)); }

/* ---------------------------------------------------------------------------------------------------- full-screen menus */
.screen { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; pointer-events: auto; background: radial-gradient(ellipse at center, rgba(30, 20, 60, .35), rgba(10, 6, 24, .82)); }
.screen.on { display: flex; }
.menu { width: min(760px, calc(94vw / var(--ps))); max-height: calc(90vh / var(--ps)); overflow: auto; padding: 0 26px 22px; zoom: var(--ps); }
.menu h2 { margin: 0 -26px 16px; padding: 12px 26px 12px 40px; background: var(--band); color: var(--ink); border-bottom: var(--line); border-radius: 15px 15px 0 0; font: 700 28px/1.1 var(--display); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7); position: relative; }
.menu h2.ink { text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.menu h2::before { content: ''; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8d8, #a8701e 70%); box-shadow: 0 0 0 1.5px var(--ink); }
.menu h3 { font: 700 var(--fs-l)/1.2 var(--display); margin: 16px 0 8px; color: var(--brass); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs .btn { font-size: 14px; padding: 6px 14px; border-radius: var(--rad-pill); }
.tabs .btn.sel { background: var(--band); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1.5px solid rgba(255, 255, 255, .07); }
.row:hover { background: rgba(111, 246, 255, .05); }
.row label { font-weight: 800; }
.row input[type=range] { width: 220px; pointer-events: auto; accent-color: var(--ley); }
.row select, .row .kb { pointer-events: auto; font: 600 14px/1.2 var(--display); background: var(--well-2); color: var(--text); border: var(--line-thin); border-radius: var(--rad-s); padding: 5px 10px; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.row .kb { min-width: 64px; text-align: center; background: linear-gradient(#fbf5ff, #d9cff2); color: var(--ink); }
.row .kb.wait { background: var(--ley); color: var(--ink); animation: kbwait 1s ease-in-out infinite; } @keyframes kbwait { 50% { box-shadow: 0 0 0 4px var(--ley-glow); } }
#menu .menu > p { font-size: 15px; }
#title { background: linear-gradient(180deg, rgba(20, 40, 90, .25), rgba(10, 14, 30, .75)); }
#title .logo { text-align: center; margin-bottom: 10px; }
#title .logo h1 { margin: 0; font-family: var(--display); font-size: clamp(48px, 8vw, 104px); font-weight: 700; line-height: .95; color: #fff; letter-spacing: 2px; }
#title .logo h1 span { color: var(--ley); }
#title .logo p { margin: 6px 0 0; font-family: var(--display); font-size: clamp(18px, 2.4vw, 30px); color: var(--gold); }
#title .col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#title .tag { color: var(--muted); font-size: 14px; margin-top: 16px; text-align: center; max-width: 560px; }
.classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cls { pointer-events: auto; cursor: pointer; padding: 12px; border-radius: 14px; border: var(--line); background: rgba(0, 0, 0, .35); text-align: center; transition: transform .1s; }
.cls:hover { transform: translateY(-3px); } .cls.sel { background: rgba(111, 246, 255, .22); box-shadow: 0 0 0 3px var(--ley); }
.cls .ic { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; border: var(--line); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.cls b { font-family: var(--display); display: block; } .cls small { color: var(--muted); font-size: 12px; }
.namein { pointer-events: auto; font-family: var(--display); font-size: 20px; padding: 8px 14px; border-radius: 12px; border: var(--line); background: rgba(0, 0, 0, .4); color: var(--text); width: 280px; text-align: center; }
#worldmap { position: fixed; inset: 0; z-index: 15; display: none; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(30, 20, 60, .55), rgba(10, 6, 24, .85)); pointer-events: auto; }
#worldmap.on { display: flex; }
#worldmap .wrap { position: relative; padding: 12px; border-radius: 22px; }
#worldmap canvas { display: block; width: min(84vh, 84vw); height: min(84vh, 84vw); border-radius: 14px; cursor: crosshair; border: var(--line); box-shadow: 0 0 0 3px var(--brass), 0 0 0 6px var(--ink); }
#worldmap .hint { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; padding: 5px 14px; border-radius: var(--rad-pill); background: var(--enamel-glass); border: var(--line-thin); font: 600 14px/1.2 var(--display); text-shadow: none; }
.fallback-panel { position: fixed; right: 240px; top: 120px; width: 340px; padding: 16px 18px; z-index: 12; pointer-events: auto; display: none; }
.fallback-panel h3 { margin: 0 0 8px; font-family: var(--display); color: var(--brass); }
.fallback-panel table { width: 100%; font-size: 13px; } .fallback-panel td:last-child { text-align: right; font-weight: 800; }
.fallback-panel .x { position: absolute; right: 10px; top: 8px; cursor: pointer; font-family: var(--display); }
#loading { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(#2c7ad6, #8fc8f0); font-family: var(--display); transition: opacity .6s; }
#loading h1 { font-size: 44px; margin: 0 0 18px; }
#loading .lb { width: 360px; height: 18px; border-radius: 10px; border: var(--line); background: rgba(0, 0, 0, .35); overflow: hidden; }
#loading .lb i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7df9ff, #ffd75a); transition: width .3s; }
#loading p { margin-top: 10px; font-size: 16px; }

/* ---------------------------------------------------------------------------------------------------- one HUD lane */
/* v0.6.0 lane (ui/lane.js): a holder that a higher-priority item covers hides until it is free again; a card that
   waits for its turn is not drawn yet. */
.ow-lane-yield { visibility: hidden !important; }
.ow-lane-wait { display: none !important; }
#xpbar.overtime i { background: linear-gradient(#fff0a0, #ffb340) !important; }
#xpbar.overtime b { color: #ffe14a; }
body.ow-title > *:not(#title):not(#game):not(#loading):not(#menu):not(#oc-version):not(.oc-access-screen):not(.ow-creator):not(.oc-cine):not(.oc-demo-pick):not(.ow-install):not(script):not(style):not(link) { visibility: hidden !important; }
body.ow-dungeon .rpg-tracker, body.ow-dungeon #guide { display: none !important; } /* the run tracker owns that corner inside an instance */

/* =====================================================================================================================
   SKIN: other teams' panels and HUD pieces, restyled to the design system. Presentational only; every selector is
   prefixed with "html body" so it outranks the team's own injected <style>. Owners: see docs/requests/ui.md.
   ===================================================================================================================== */
/* ---- shared window frame */
html body .rpg-panel, html body .ocs-panel, html body .pui .modal, html body .mmo-win, html body #ow-tiers, html body .pui .panel.modal { background: var(--panel-bg) !important; border: var(--line) !important; border-radius: var(--rad-l) !important; box-shadow: var(--panel-shadow) !important; color: var(--text); font-family: var(--font); backdrop-filter: blur(6px); }
html body .rpg-panel, html body .ocs-book, html body .ocs-grid, html body .pui .modal, html body .mmo-win, html body #ow-tiers { zoom: var(--ps); }
html body .rpg-panel { max-height: calc((100vh - 40px) / var(--ps)); }
/* RPG side panels open under the player frame, not over it */
html body .rpg-panel:is([data-id=char], [data-id=quests], [data-id=vendor], [data-id=bank], [data-id=home], [data-id=skills]) { top: calc((var(--oc-pf-b, 90px) + 10px) / var(--ps)) !important; max-height: calc((100vh - var(--oc-pf-b, 90px) - 26px) / var(--ps)); }
html body .pui .modal { max-height: calc(88vh / var(--ps)); }
html body .mmo-win { height: min(640px, calc(88vh / var(--ps))); width: min(960px, calc(94vw / var(--ps))); }
/* brass title bands */
html body .rpg-panel > h2:first-child { margin: -12px -14px 12px; padding: 9px 12px 9px 32px; background: var(--band); color: var(--ink); border-bottom: var(--line); border-radius: 15px 15px 0 0; font: 700 20px/1.15 var(--display); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7); position: sticky; top: -12px; z-index: 3; }
html body .rpg-panel > h2:first-child::before, html body .pui .modal > .x + h2::before, html body .ocs-panel h2::before, html body .mmo-win .hd h2::before { content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8d8, #a8701e 70%); box-shadow: 0 0 0 1.5px var(--ink); }
html body .rpg-panel h2 .x, html body .ocs-x, html body .gh-x { width: 28px; height: 28px; padding: 0 !important; margin-left: auto; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; background: linear-gradient(#ffb4a8, #e0483a) !important; color: var(--ink) !important; border: var(--line-thin) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 2px 0 var(--ink) !important; font: 700 15px/1 var(--display) !important; text-shadow: none !important; cursor: pointer; flex: none; }
html body .rpg-panel h2 .x:hover, html body .ocs-x:hover, html body .gh-x:hover { filter: brightness(1.1); transform: translateY(-1px); }
html body .ocs-panel h2 { position: relative; display: block; margin: -14px -16px 10px; padding: 10px 52px 10px 32px; background: var(--band); color: var(--ink); border-bottom: var(--line); border-radius: 15px 15px 0 0; font: 700 21px/1.15 var(--display); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7); }
html body .ocs-x { position: absolute; right: 12px; top: 10px; z-index: 4; }
html body .pui .modal { padding: 0 20px 18px !important; }
html body .pui .modal > .x { position: absolute; right: 14px; top: 9px; z-index: 4; font-size: 13px; padding: 5px 12px; }
html body .pui .modal > .x + h2 { position: relative; margin: 0 -20px 12px; padding: 11px 120px 11px 32px; background: var(--band); color: var(--ink); border-bottom: var(--line); border-radius: 15px 15px 0 0; font: 700 22px/1.15 var(--display); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7); }
html body .mmo-win .hd { position: relative; margin: 0 0 6px; padding: 8px 10px 8px 12px; background: var(--band); border-bottom: var(--line); border-radius: 15px 15px 0 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7); gap: 5px; }
html body .mmo-win .hd h2 { position: relative; padding-left: 20px; color: var(--ink) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important; font: 700 21px/1.1 var(--display) !important; }
html body .mmo-win .hd h2::before { left: 4px; }
html body .mmo-win .hd .tab { background: rgba(23, 15, 34, .14); color: var(--ink); border: 2px solid transparent; border-radius: var(--rad-pill); font: 600 13px/1.2 var(--display); }
html body .mmo-win .hd .tab:hover { background: rgba(23, 15, 34, .24); }
html body .mmo-win .hd .tab.on { background: var(--enamel-1); color: var(--text); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
html body .mmo-win .hd button:not(.tab):not(.x) { font-size: 13px; }
html body .rpg-panel h3, html body .pui .modal h3, html body .mmo-win h3, html body .pui .card h3 { font-family: var(--display); color: var(--brass); }
html body .rpg-panel::-webkit-scrollbar, html body .ocs-cards::-webkit-scrollbar, html body .pui .modal::-webkit-scrollbar, html body .mmo-win .bd::-webkit-scrollbar { width: 10px; }
html body .rpg-panel::-webkit-scrollbar-thumb, html body .ocs-cards::-webkit-scrollbar-thumb, html body .pui .modal::-webkit-scrollbar-thumb, html body .mmo-win .bd::-webkit-scrollbar-thumb { background: var(--enamel-3); border: 2px solid var(--ink); border-radius: 6px; }
html body .rpg-panel::-webkit-scrollbar-track, html body .ocs-cards::-webkit-scrollbar-track, html body .pui .modal::-webkit-scrollbar-track, html body .mmo-win .bd::-webkit-scrollbar-track { background: transparent; }
/* ---- buttons and tabs everywhere */
html body .rpg-btn, html body .pui .btn.ghost, html body .pui .btn.dim, html body .mmo-ui button, html body .ocs-btn.dim, html body #ow-tiers .x, html body .mmo-win .hd .x { font: 600 13px/1.2 var(--display); color: var(--text); background: linear-gradient(var(--enamel-3), var(--enamel-2)); border: var(--line-thin); border-radius: var(--rad-s); padding: 6px 12px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--ink); cursor: pointer; transition: transform .08s, filter .12s; text-shadow: none; }
html body .rpg-btn:hover, html body .pui .btn:hover, html body .mmo-ui button:hover, html body .ocs-btn:hover, html body .ocs-tab:hover { filter: brightness(1.15); transform: translateY(-1px); }
html body .rpg-btn:active, html body .pui .btn:active, html body .mmo-ui button:active, html body .ocs-btn:active, html body .ocs-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
html body .rpg-btn.on, html body .pui .btn.on, html body .mmo-ui button.on { background: linear-gradient(#c8fdff, var(--ley) 55%, var(--ley-2)); color: var(--ink); }
html body .rpg-btn.gold, html body .mmo-ui button.alt { background: var(--band); color: var(--ink); }
html body .rpg-btn.warn { background: linear-gradient(#ff9a8a, #d8403a); color: var(--ink); }
html body .rpg-btn:disabled, html body .mmo-ui button:disabled, html body .pui .btn:disabled, html body .ocs-btn:disabled { filter: grayscale(.85) brightness(.75); box-shadow: 0 1px 0 var(--ink); transform: none; cursor: default; opacity: .7; }
html body .pui .btn:not(.ghost):not(.dim):not(.on), html body .ocs-btn:not(.dim) { font: 600 14px/1.2 var(--display); color: var(--ink); background: linear-gradient(#c8fdff, var(--ley) 55%, var(--ley-2)); border: var(--line-thin); border-radius: var(--rad-s); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 var(--ink); }
html body .ocs-tab, html body .rpg-tabs .rpg-btn { font: 600 13.5px/1.2 var(--display); border-radius: var(--rad-pill); padding: 5px 13px; border: var(--line-thin); background: linear-gradient(var(--enamel-3), var(--enamel-2)); color: var(--text); box-shadow: 0 2px 0 var(--ink); }
html body .ocs-tab.on, html body .rpg-tabs .rpg-btn.on, html body .gh-tabs .rpg-btn.on { background: var(--band); color: var(--ink); }
/* ---- wells, slots and item frames (Item Art: draw the icon only; the frame and rarity glow come from here) */
html body .rpg-slot { width: 48px; height: 48px; border-radius: 10px; border: 2.5px solid var(--ink); background: radial-gradient(circle at 50% 38%, var(--well-2), var(--well) 75%); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55), 0 2px 0 var(--ink-60); }
html body .rpg-slot.empty { opacity: 1; background: rgba(18, 13, 34, .5); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }
html body .rpg-slot:hover { border-color: var(--ley) !important; }
html body .rpg-slot .lbl { color: rgba(222, 213, 245, .45); font: 600 9px/1 var(--display); }
html body .rpg-slot .q { font: 700 12px/1 var(--display); color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); }
html body .ocs-slot { border-radius: 11px; background: radial-gradient(circle at 50% 38%, var(--well-2), var(--well) 75%); border: 2.5px solid var(--ink); }
html body .ocs-card { border: var(--line-thin); border-radius: var(--rad-m); background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); box-shadow: 0 3px 0 var(--ink-60); }
html body .ocs-card:hover { background: rgba(111, 246, 255, .1); border-color: var(--ley); }
html body .ocs-card img { border-radius: 10px; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink-60); }
html body .ocs-card .ocs-lv { color: var(--brass); }
html body .ocs-chip { border-color: var(--ley); color: var(--ley); }
html body .rpg-li { border-radius: var(--rad-s); background: rgba(255, 255, 255, .045); }
html body .rpg-li.sel { border-color: var(--ley); background: rgba(111, 246, 255, .1); }
html body .rpg-figure { border: var(--line-thin); border-radius: var(--rad-m); background: radial-gradient(ellipse at 50% 35%, rgba(111, 246, 255, .2), rgba(18, 13, 34, .55) 70%); }
html body .rpg-gold, html body .gh-gold { color: var(--gold); font-family: var(--display); }
html body .pui .card, html body #ow-tiers .card, html body .mmo-card { border: var(--line-thin) !important; border-radius: var(--rad-m) !important; background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)) !important; box-shadow: 0 3px 0 var(--ink-60); }
html body .pui .card.sel, html body .mmo-card.sel { box-shadow: 0 0 0 3px var(--ley), 0 0 18px var(--ley-glow) !important; background: rgba(111, 246, 255, .12) !important; }
html body .gh-card, html body .gh-banner { border: var(--line-thin) !important; border-radius: var(--rad-m) !important; background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)) !important; }
html body .mmo-table th { font-family: var(--display); color: var(--muted); }
html body .mmo-table tr.you td { color: var(--gold); }
html body .mmo-ui .pnl:not(.mmo-win) { background: var(--panel-bg); border: var(--line); box-shadow: var(--panel-shadow); }
/* ---- tooltips */
html body .rpg-tipbox, html body .ocs-tt { background: linear-gradient(180deg, #2a2150, #17112c) !important; border: var(--line) !important; border-radius: var(--rad-m) !important; box-shadow: inset 0 0 0 1.5px var(--brass-line), var(--drop) !important; color: var(--text); }
html body .rpg-tipbox .name { font-family: var(--display); }
html body .rpg-tipbox { zoom: var(--ps); } /* the box inside the fixed .rpg-tip, so the tip's own position is untouched */
html body .rpg-tipbox .hdr { color: var(--muted); }
/* ---- HUD pieces other teams draw */
/* zoomed pieces: zoom scales an element's own offsets too, so offsets are divided by the scale */
html body .rpg-tracker { zoom: var(--hs); width: 250px !important; right: 16px !important; top: calc(var(--oc-right-y) / var(--hs)) !important; }
html body .rpg-tracker .focus { background: var(--panel-bg); border: var(--line); border-radius: var(--rad-m); box-shadow: var(--bevel), inset 0 0 0 1.5px var(--brass-line), 0 4px 0 var(--ink-60); padding: 8px 12px 9px; }
html body .rpg-tracker .qt { font-family: var(--display); color: var(--gold); }
html body .rpg-tracker .next b { background: var(--band); border: 2px solid var(--ink); line-height: 15px; }
html body .rpg-feed { zoom: var(--hs); left: auto; right: calc(50vw / var(--hs) + 330px); bottom: calc((var(--oc-bar-top, 160px) + 10px) / var(--hs)); }
html body .rpg-feed div { background: var(--enamel-glass); border: var(--line-thin); border-radius: var(--rad-pill); padding: 3px 12px 3px 6px; box-shadow: 0 2px 0 var(--ink-60); }
html body .rpg-toasts { top: var(--oc-toast-y) !important; z-index: 31; }
html body .rpg-toast { font: 600 calc(16px * var(--hs))/1.2 var(--display); background: var(--panel-bg); border: var(--line); border-radius: var(--rad-pill); box-shadow: var(--bevel), 0 3px 0 var(--ink-60); padding: calc(6px * var(--hs)) calc(18px * var(--hs)); }
body:has(.screen.on) .rpg-toasts, body:has(.screen.on) #toasts, body:has(.screen.on) .mmo-toast, body:has(#worldmap.on) .rpg-toasts { opacity: 0 !important; }
html body .mmo-toast { zoom: var(--hs); left: auto !important; right: 230px !important; top: 22px !important; transform: translate(0, -30px); background: var(--panel-bg); border: var(--line); border-radius: var(--rad-m); box-shadow: var(--panel-shadow); }
html body .mmo-toast.on, html body .mmo-toast.show { transform: translate(0, 0); }
html body .mmo-micro { zoom: var(--hs); right: 14px; bottom: 14px; }
html body .mmo-micro button { width: 38px; height: 34px; border-radius: 10px; background: linear-gradient(var(--enamel-3), var(--enamel-2)); border: var(--line-thin); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--ink); }
html body .mmo-micro .badge { background: var(--hp); border: 2px solid var(--ink); font: 700 10px/14px var(--display); }
html body .mmo-chat { zoom: var(--hs); left: 14px; bottom: calc(var(--oc-chat-b, 24px) / var(--hs)); background: rgba(21, 16, 42, .55); border: var(--line-thin); border-radius: var(--rad-m); }
html body .mmo-chat.collapsed { background: var(--enamel-glass); border-radius: var(--rad-pill); box-shadow: 0 3px 0 var(--ink-60); }
html body .mmo-chat.collapsed .pill { font: 600 12px/1.2 var(--display); padding: 5px 12px; }
html body .mmo-chat .tabs span.on { background: var(--ley); color: var(--ink); }
body.ow-panel-open .mmo-chat.collapsed, body.ow-panel-open .mmo-chat.idle .pill { opacity: 0; pointer-events: none; }
body:has(.rpg-panel.open) .mmo-micro { opacity: 0; pointer-events: none; }
/* party frames (Party team) stack under the player frame and buffs; the command bar sits under them */
html body .pui.world .frames { zoom: var(--hs); top: calc(var(--oc-party-y, 100px) / var(--hs)) !important; left: 14px !important; }
html body .pui .pf { background: var(--panel-bg) !important; border: var(--line) !important; border-radius: var(--rad-m) !important; box-shadow: var(--bevel), 0 3px 0 var(--ink-60) !important; }
html body .pui .pf.aggro { box-shadow: 0 0 0 3px #ff3b3b, 0 0 18px 4px rgba(255, 59, 59, .75) !important; }
html body .pui .bar { border: var(--line-thin); border-radius: var(--rad-pill); background: linear-gradient(#0d0a1a, #1c1636); }
html body .pui .bar.hp > i { background: linear-gradient(#ffa0aa, var(--hp) 55%, var(--hp-2)); }
html body .pui .bar.mp > i { background: linear-gradient(#a8c8ff, var(--mana) 55%, var(--mana-2)); }
html body .pui.world .cmd { top: calc(var(--oc-left-y) / .7); bottom: auto; transform: scale(.7); transform-origin: top left; transition: opacity .4s; }
body:not(.ow-hasparty) .pui.world .cmd { opacity: 0; pointer-events: none; }
html body .pui .boss { zoom: var(--hs); top: calc(max(var(--oc-target-b, 14px) + 6px, var(--oc-compass-b, 0px) + 4px) / var(--hs)); /* v2.6.11: under the compass */ background: var(--panel-bg); border: var(--line); border-radius: var(--rad-l); box-shadow: var(--panel-shadow); }
html body .pui .banner { zoom: var(--hs); top: calc(var(--oc-top-y) / var(--hs)); background: var(--panel-bg); border: var(--line); border-radius: var(--rad-pill); box-shadow: var(--bevel), 0 4px 0 var(--ink-60); font-family: var(--display); }
html body .pui.world .tracker { zoom: var(--hs); top: calc(var(--oc-right-y) / var(--hs)); background: var(--panel-bg); border: var(--line); border-radius: var(--rad-m); box-shadow: var(--panel-shadow); }
/* Classes: coach card in the left column under the party frames; unlock card in the top lane */
html body .ocs-coach { zoom: var(--hs); top: calc(var(--oc-left-y) / var(--hs)) !important; left: 14px !important; width: 300px !important; background: var(--panel-bg) !important; border: var(--line) !important; border-radius: var(--rad-m) !important; box-shadow: var(--bevel), inset 0 0 0 2px var(--ley), 0 4px 0 var(--ink-60) !important; }
html body .ocs-coach-h b { color: var(--ley); font-family: var(--display); }
html body .ocs-coach .ocs-x { width: 22px; height: 22px; font-size: 11px !important; }
html body .ocs-unlock { zoom: var(--hs); top: calc(var(--oc-card-y) / var(--hs)) !important; background: var(--panel-bg) !important; border: var(--line) !important; border-radius: var(--rad-l) !important; box-shadow: var(--panel-shadow) !important; }
html body .ocs-unlock .ocs-big { color: var(--gold); }
html body .ocs-unlock img { border: var(--line); box-shadow: 0 0 0 2px var(--brass), 0 0 16px rgba(242, 191, 85, .5); }
/* Story & Voice captions: above the action bar cluster, clear of the cast bar and hint */
.oc-cap:not(.cine):not(.card) { zoom: var(--hs); bottom: calc((var(--oc-bottom-y) + 18px) / var(--hs)) !important; width: min(620px, calc((100vw - 32px) / var(--hs))) !important; z-index: 35 !important; }
.oc-cap:not(.cine) .oc-cap-panel { border: var(--line) !important; border-radius: var(--rad-m) !important; box-shadow: 0 4px 0 var(--ink-60) !important; }
.oc-cap:not(.cine) .oc-cap-text { color: var(--ink); }
.oc-cap:not(.cine) .oc-cap-name { font-family: var(--display) !important; border: var(--line-thin) !important; box-shadow: 0 2px 0 var(--ink) !important; }
body.ow-panel-open .oc-cap { opacity: 0 !important; }
body:has(#worldmap.on) .oc-cap.on, body:has(#menu.on) .oc-cap.on { transform: translate(-50%, 175px) scale(.8); opacity: .85; }
/* Soul campfire, gear hub details */
html body .gh-tabs { gap: 5px; }
html body .gh-small { color: var(--text-2); }
/* screen sizes */
@media (max-height: 760px) { #help { display: none; } }

/* =====================================================================================================================
   v1.0 STEAM READY: settings pages, accessibility, Field Training, bug report, version and What's new
   ===================================================================================================================== */
.menu .oc-msg { min-height: 20px; color: var(--gold); font-weight: 800; margin: 0 0 6px; }
.menu .oc-ver { text-align: center; color: var(--muted); font-size: var(--fs-s); margin: 4px 0 0; }
.row.fixed label, .row.dim label { color: var(--muted); }
.row .kb.off { background: var(--well-2); color: var(--muted); cursor: default; }
.row input[type=range]:disabled { opacity: .4; }
/* difficulty cards (Game page and the new hire paperwork) */
.oc-diffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.oc-diff { text-align: left; padding: 10px 12px; border: var(--line); border-radius: var(--rad-m); background: var(--well-2); color: var(--text); cursor: pointer; box-shadow: var(--bevel), var(--drop-s); font: inherit; }
.oc-diff b { display: block; font: 700 var(--fs-l)/1.2 var(--display); color: var(--brass); }
.oc-diff small { display: block; margin-top: 3px; font-size: var(--fs-s); color: var(--text-2); line-height: 1.35; }
.oc-diff:hover:not(:disabled) { background: var(--enamel-2); }
.oc-diff.sel { background: linear-gradient(180deg, rgba(111, 246, 255, .28), var(--enamel-2)); box-shadow: 0 0 0 3px var(--ley), var(--drop-s); }
.oc-diff[data-d=hardcore] b, .oc-diff[data-diff=hardcore] b { color: var(--bad); }
.oc-diff:disabled { opacity: .45; cursor: not-allowed; }
/* full-screen v1.0 dialogs (paperwork, retired, bug report, What's new) sit above the HUD and the pause menu */
.oc-access-screen { z-index: 80; background: rgba(8, 6, 18, .55); }
.oc-access-screen .menu { max-width: 720px; }
.oc-paper p, .oc-retired p { font-size: var(--fs-m); }
.oc-retired .big { font: 700 var(--fs-xl)/1.25 var(--display); color: var(--brass); }
.oc-bugnote { width: 100%; min-height: 110px; box-sizing: border-box; resize: vertical; font: 600 var(--fs-m)/1.4 var(--font); color: var(--text); background: var(--well); border: var(--line-thin); border-radius: var(--rad-s); padding: 10px; user-select: text; -webkit-user-select: text; }
.oc-newspanel .oc-cl h3 small { font: 600 var(--fs-s) var(--font); color: var(--muted); margin-left: 6px; }
.oc-newspanel .oc-cl h4 { margin: 10px 0 2px; font: 700 var(--fs-m)/1.2 var(--display); color: var(--ley); }
.oc-newspanel .oc-cl ul { margin: 4px 0 8px; padding-left: 22px; } .oc-newspanel .oc-cl li { margin: 3px 0; }
.oc-newspanel .oc-cl:not(.first) { opacity: .85; border-top: 1.5px solid rgba(255, 255, 255, .08); }
/* the version badge: title and character select only */
#oc-version { position: fixed; right: 16px; bottom: 14px; z-index: 40; display: none; align-items: center; gap: 10px; font: 700 var(--fs-s) var(--display); color: var(--text); text-shadow: 0 2px 0 var(--ink); }
#oc-version .btn { font-size: 14px; padding: 5px 14px; }
body.ow-title #oc-version { display: flex; }
/* Field Training card: where the keybind card sits (it and the class coach step aside while training runs) */
.oc-tut { position: absolute; left: 14px; top: calc(var(--oc-left-y) / var(--hs)); zoom: var(--hs); width: 300px; z-index: 12; padding: 10px 12px 12px; background: var(--panel-bg); border: var(--line); border-radius: var(--rad-l); box-shadow: var(--panel-shadow); pointer-events: auto; }
body.oc-tut-on #help, body.oc-tut-on .ocs-coach { display: none !important; }
body.ow-panel-open .oc-tut { opacity: .25; pointer-events: none; }
.oc-tut-head { display: flex; align-items: center; gap: 6px; font: 700 var(--fs-xs)/1 var(--display); letter-spacing: .08em; color: var(--ley); }
.oc-tut-head small { color: var(--muted); letter-spacing: 0; }
.oc-tut-head .rad { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); animation: ocTutBlink 1s steps(2) infinite; }
@keyframes ocTutBlink { 50% { opacity: .2; } }
.oc-tut-skip { margin-left: auto; font: 700 var(--fs-xs) var(--display); color: var(--text-2); background: var(--well-2); border: var(--line-thin); border-radius: var(--rad-pill); padding: 2px 9px; cursor: pointer; }
.oc-tut-title { display: block; margin: 6px 0 2px; font: 700 var(--fs-xl)/1.15 var(--display); color: var(--brass); }
.oc-tut p { margin: 4px 0; font-size: var(--fs-m); line-height: 1.35; }
.oc-tut .oc-bar { margin: 6px 0 2px; }
.oc-tut-dist { font: 700 var(--fs-m) var(--display); color: var(--ley); min-height: 0; }
.oc-tut-dist .arrow { display: inline-block; transition: transform .15s; }
.oc-tut-steps { display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: s; }
.oc-tut-steps li { counter-increment: s; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: var(--rad-pill); background: var(--well); color: var(--muted); }
.oc-tut-steps li::before { content: counter(s) ' '; }
.oc-tut-steps li.ok { background: rgba(109, 255, 158, .18); color: var(--good); }
.oc-tut-steps li.ok::before { content: '\2713  '; }
.oc-tut-steps li.cur { background: var(--band); color: var(--ink); }
/* rarity shapes (ui/access.js writes one content rule per rarity) */
body.oc-shapes .oc-slot[data-rar]::before, body.oc-shapes .rpg-slot[data-rar]::before { position: absolute; left: 2px; top: 1px; z-index: 3; font: 700 12px/1 var(--display); color: var(--rar); text-shadow: 0 0 2px var(--ink), 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink); pointer-events: none; }
.oc-rarity-key { display: grid; grid-template-columns: repeat(7, auto); justify-content: center; gap: 4px 10px; align-items: center; margin: 4px 0 10px; }
.oc-rarity-key small { display: none; }
.oc-rarity-key .oc-slot { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.oc-rarity-key .oc-shape { font: 700 18px var(--display); font-style: normal; color: var(--rar); text-shadow: 0 2px 0 var(--ink); }
/* subtitles: size and background (Story's captions, .oc-cap) */
.oc-cap:not(.cine) .oc-cap-text { font-size: calc(clamp(13.5px, 1.1vw, 16.5px) * var(--oc-sub, 1)) !important; -webkit-line-clamp: 3 !important; }
.oc-cap:not(.cine) .oc-cap-name { font-size: calc(11.5px * min(var(--oc-sub, 1), 1.4)) !important; }
body.oc-sub-solid .oc-cap:not(.cine) .oc-cap-panel { background: #fff7e6 !important; }
body.oc-sub-dark .oc-cap:not(.cine) .oc-cap-panel { background: rgba(12, 9, 22, .94) !important; border-color: #000 !important; }
body.oc-sub-dark .oc-cap:not(.cine) .oc-cap-text { color: #fff !important; }
.oc-cap-demo { margin: 6px auto 10px; max-width: 520px; padding: 8px 12px; border-radius: var(--rad-m); border: 2.5px solid #2a1d12; color: #2a1d12; font-weight: 650; background: linear-gradient(180deg, rgba(255, 250, 236, .86), rgba(250, 238, 210, .8)); font-size: calc(15px * var(--oc-sub, 1)); }
.oc-cap-demo.solid { background: #fff7e6; } .oc-cap-demo.dark { background: rgba(12, 9, 22, .94); color: #fff; border-color: #000; }
.oc-cap-demo .n { font: 700 11px var(--display); background: #ffd98a; color: #2a1d12; border: 2px solid #2a1d12; border-radius: 999px; padding: 1px 8px; margin-right: 8px; }
/* high contrast: opaque panels, thicker ink, brighter muted text */
body.oc-hc { --muted: #e3dcff; --text-2: #ffffff; --enamel-glass: rgba(20, 14, 40, 1); --panel-bg: linear-gradient(180deg, #2a2050, #17112e); --line: 4px solid #000; --line-thin: 3px solid #000; }
body.oc-hc .row { border-bottom-color: rgba(255, 255, 255, .25); }
/* reduced motion: animations and transitions end at once (their final state still shows) */
body.oc-rm *, body.oc-rm *::before, body.oc-rm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }

/* =====================================================================================================================
   feelui (Feel & UI team, v2.4): FINAL POLISH. One layer order for everything, nothing over an open window, readable
   type for kids (nothing under 12 px on a 1280x800 Steam Deck), one close button, one focus ring.
   ===================================================================================================================== */
/* 1. layers: an open window, the pause menu or the map owns the screen. Trackers, the homestead guide, interact prompts
      and the compass step aside instead of drawing over it (Paul: "tracker over bags, toasts over sheets"). */
body.ow-panel-open .rpg-tracker, body.ow-panel-open .hs-guide, body.ow-panel-open .pui.world .tracker,
body:has(#menu.on) .rpg-tracker, body:has(#menu.on) .hs-guide, body:has(#menu.on) .pui.world .tracker, body:has(#menu.on) .oc-tut, body:has(#menu.on) .ocs-coach,
body:has(#worldmap.on) .rpg-tracker, body:has(#worldmap.on) .hs-guide, body:has(#worldmap.on) .pui.world .tracker { opacity: 0 !important; pointer-events: none !important; transition: opacity .15s; }
body.ow-panel-open #prompt, body:has(#menu.on) #prompt, body:has(#worldmap.on) #prompt, body:has(.screen.on) #prompt,
body.ow-panel-open .rpg-prompt, body:has(#menu.on) .rpg-prompt, body:has(#worldmap.on) .rpg-prompt, body:has(.screen.on) .rpg-prompt { display: none !important; }
body:has(#menu.on) #oc-compass, body:has(#worldmap.on) #oc-compass, body:has(.screen.on) #oc-compass { opacity: 0 !important; }
body.ow-panel-open .lw-bub, body:has(#menu.on) .lw-bub { opacity: 0 !important; }
/* the pause menu and full screens sit under the compass line, never through it */
#menu .menu { max-height: calc((100vh - 120px) / var(--ps)); margin-top: calc(34px / var(--ps)); }
/* tooltips and item cards always sit above every window (they used to slide under the Outlet and the spellbook) */
html body .rpg-tip, html body #bartip, html body .ocs-panel.ocs-tt { z-index: 90 !important; }
body:has(#menu.on) .rpg-tip, body:has(#menu.on) #bartip, body:has(#menu.on) .ocs-tt, body:has(#worldmap.on) .rpg-tip, body:has(#worldmap.on) #bartip { opacity: 0 !important; pointer-events: none !important; } /* no stale tooltip over the pause menu or the map */
/* the homestead guide card: same enamel as the other HUD cards, under the coach card column */
html body .hs-guide { zoom: var(--hs); top: calc(var(--oc-left2-y, var(--oc-left-y)) / var(--hs)) !important; left: 14px !important; background: var(--panel-bg) !important; border: var(--line) !important; border-radius: var(--rad-m) !important; box-shadow: var(--bevel), 0 4px 0 var(--ink-60) !important; text-shadow: none !important; }
html body .hs-guide .s { font-size: 12px !important; color: var(--muted) !important; letter-spacing: .04em; }
/* build mode: the build bar takes the bottom of the screen, so the orbs and action bar slide away while it is open */
#bottom, #hporb, #mporb, #barwrap, #xpbar { transition: opacity .2s, transform .2s; }
body:has(.rpg-buildbar.open) #bottom, body:has(.rpg-buildbar.open) #hporb, body:has(.rpg-buildbar.open) #mporb, body:has(.rpg-buildbar.open) #barwrap, body:has(.rpg-buildbar.open) #xpbar { opacity: 0 !important; transform: translateY(40px); pointer-events: none !important; }
html body .rpg-buildbar { border: var(--line) !important; border-radius: var(--rad-l) !important; background: var(--panel-bg) !important; box-shadow: var(--panel-shadow) !important; }
html body .rpg-buildbar .rpg-row span { font-size: 13px !important; color: var(--text-2) !important; }

/* 2. one close button: the red round X everywhere (Outlet, Collection Log), inside the title band, never over its edge */
html body .oco-x { width: 30px; height: 30px; padding: 0 !important; margin: 0 14px 0 6px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; background: linear-gradient(#ffb4a8, #e0483a) !important; color: var(--ink) !important; border: var(--line-thin) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 2px 0 var(--ink) !important; font: 700 15px/1 var(--display) !important; cursor: pointer; flex: none; }
#lw-log .lw-close { top: 3px !important; right: 30px !important; z-index: 3; padding: 1px 11px !important; font-size: 13.5px !important; line-height: 1.2 !important; min-height: 0 !important; }
html body .oco-x:hover, #lw-log .lw-close:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* 3. focus and controller states: the shared ring (:focus-visible and .gp-focus, top of this file) now also reaches the
      class cards, the look cards and the map key rows, which are focusable since v2.4; hover states to match */
.mapkey-row:hover { background: rgba(111, 246, 255, .12); }
.look:hover:not(.off) { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--ley); transition: transform .1s, box-shadow .1s; }

/* 4. readable type: the small print kids skipped (tooltip headers, chips, the caption skip hint, HUD sublabels) */
html body .bl-hdr, html body .bl-rar, html body .oco-deal, html body .oco-rar, html body .ocs-sub, html body .ocs-chip, html body .ocs-lv { font-size: max(12px, 1em) !important; }
html body .rpg-tipbox span, html body .rpg-tipbox small, html body .oco-card small, html body .rpg-small { font-size: max(12px, .92em); }
.oc-cap-skip { font-size: max(11px, calc(10px * var(--hs))) !important; opacity: .85; }
#mmzone small, #playerframe .sub { font-size: max(10.5px, calc(12px * var(--hs))) !important; }
.oc-tut-steps li { font-size: 12px; }

/* 5. class pick (title.js): 3 by 3 cards with a short teaser, the picked class's full story underneath */
.oc-classpick { width: min(900px, calc(96vw / var(--ps))) !important; }
.oc-classpick .classes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oc-classpick .cls { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; min-height: 0; }
.oc-classpick .cls .ic { width: 46px; height: 46px; margin: 0; flex: none; font-size: 22px; }
.oc-classpick .cls .tx { min-width: 0; }
.oc-classpick .cls b { font-size: 17px; line-height: 1.15; }
.oc-classpick .cls small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; color: var(--text-2); }
.oc-classpick .cls.sel small { color: var(--text); }
.oc-classpick .cls-detail { margin-top: 10px; padding: 10px 14px; min-height: 3.9em; border-radius: var(--rad-m); background: var(--well-2); border: var(--line-thin); font-size: 15px; line-height: 1.4; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--brass-line); }
.oc-classpick .cls-detail b { font-family: var(--display); color: var(--brass); margin-right: 4px; }
.oc-classpick .voicepick { margin-top: 10px !important; }
.oc-classpick .voicepick small { font-size: 12px !important; }
@media (max-height: 820px) { .oc-classpick .cls { padding: 6px 9px; } .oc-classpick .cls .ic { width: 40px; height: 40px; font-size: 19px; } .oc-classpick .cls-detail { font-size: 14px; } .oc-classpick h2 { font-size: 24px; } }

/* 6. full-screen pickers: look cards keep their buttons readable */
#title .kkrow .btn { font-size: 13px !important; padding: 5px 10px !important; }
/* 7. one E prompt (hud.js): the RPG's pill hides while E belongs to a world thing; both prompts wear the same pill */
html body .rpg-prompt.ow-yield { display: none !important; }
html body .rpg-prompt { zoom: var(--hs); background: var(--panel-bg) !important; border: var(--line) !important; border-radius: var(--rad-pill) !important; box-shadow: var(--bevel), 0 3px 0 var(--ink-60); padding: 6px 16px !important; font: 600 16px/1.2 var(--display) !important; }
html body .rpg-prompt b { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 7px; background: var(--band); color: var(--ink) !important; border: 2px solid var(--ink); }
/* 8. potion belt (rpg/belt.js): bigger key caps and counts, the empty flasks stay readable instead of fading out */
html body #potbelt .k { font-size: max(11px, calc(12px * var(--hs, 1))) !important; }
html body #potbelt .n { font-size: max(11px, calc(12.5px * var(--hs, 1))) !important; }
html body #potbelt .pslot { background: var(--panel-bg) !important; border: var(--line-thin) !important; box-shadow: var(--bevel), 0 2px 0 var(--ink-60) !important; }
html body #potbelt .pslot.empty { opacity: .7 !important; }
html body #potbelt .pslot.empty .flask { filter: grayscale(.7); }
/* 10. the Party Line window wears the same brass title band as every other window */
html body .opl-panel { padding-top: 0 !important; }
html body .opl-panel > h2 { margin: 0 -20px 12px !important; padding: 12px 20px 12px 40px; background: var(--band); color: var(--ink) !important; border-bottom: var(--line); border-radius: calc(var(--rad-l) - 3px) calc(var(--rad-l) - 3px) 0 0; font: 700 28px/1.1 var(--display) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7); position: relative; }
html body .opl-panel > h2::before { content: ''; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8d8, #a8701e 70%); box-shadow: 0 0 0 1.5px var(--ink); }

/* v2.6.41 install chip */
.ow-install { visibility: visible; pointer-events: auto; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 999px; background: #2a1650; color: #fff; border: 2px solid #ffc83c; font: 700 14px Nunito, system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.ow-install[hidden] { display: none; }
.ow-install button { font: inherit; cursor: pointer; border: 0; border-radius: 999px; }
.ow-install .go { background: #ffc83c; color: #2a1650; padding: 6px 14px; }
.ow-install .go[hidden] { display: none; }
.ow-install .x { background: transparent; color: #fff; font-size: 20px; line-height: 1; padding: 2px 8px; }