html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1220; font: 13px Verdana, Geneva, sans-serif; color: #f3ead8; }
#world { position: fixed; inset: 0; }
#world canvas { position: absolute; inset: 0; display: block; }
#world .sky { position: absolute; inset: 0; transition: background 1.5s linear; }
#tip { position: fixed; z-index: 5; pointer-events: none; display: none; padding: 3px 8px; border-radius: 4px; background: rgba(30,24,14,.9); color: #f6ecd4; font-size: 12px; border: 1px solid rgba(255,220,150,.35); white-space: pre; }
#status { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(8,10,16,.82); }
#status.hidden { display: none; }
#status .box { min-width: 320px; padding: 18px 22px; border-radius: 8px; background: #2b2216; border: 1px solid #6d5634; text-align: center; }
#charList button { display: block; width: 100%; margin-top: 8px; padding: 8px; background: #4a3a22; color: #f3ead8; border: 1px solid #8a6c3c; border-radius: 4px; cursor: pointer; font: inherit; }
#charList button:hover { background: #5d4a2b; }
#chat { position: fixed; left: 0; bottom: 0; width: 420px; z-index: 4; display: flex; flex-direction: column; }
#chatLog { height: 160px; overflow-y: auto; padding: 6px 8px; background: rgba(214,204,170,.92); color: #1b1408; font-size: 12px; }
#chatLog .Im { color: #a3260f; } #chatLog .sys { color: #2c6b16; }
#chatInput { border: 0; border-top: 1px solid #8a7a50; padding: 6px 8px; font: inherit; background: #f4efe0; }
#fade { position: fixed; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .18s linear; }
#loginForm input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px; border: 1px solid #8a6c3c; border-radius: 4px; background: #f4efe0; font: inherit; }
#loginForm button { display: block; width: 100%; margin-top: 10px; padding: 8px; background: #4a3a22; color: #f3ead8; border: 1px solid #8a6c3c; border-radius: 4px; cursor: pointer; font: inherit; }
#loginForm .err { margin-top: 8px; color: #ff9a7a; min-height: 1em; }
/* ---- interface toolkit (osa-gapi) ---- */
#ui { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.gapi-screen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gapi-full { background: #000; pointer-events: auto; }
.gapi-stage { position: absolute; transform-origin: 0 0; }
.gapi-stage > * { pointer-events: auto; }
.gapi-stage > .gapi-art { pointer-events: none; }
.gapi-art { position: absolute; }
.gapi-btn { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: #fff; font: bold 10px Verdana, Tahoma, sans-serif; outline: none; }
.gapi-btn .gapi-skin { position: absolute; left: 0; top: 0; pointer-events: none; }
.gapi-btn .gapi-skin.down { visibility: hidden; }
.gapi-btn:active:not(:disabled) .gapi-skin.down, .gapi-btn.on .gapi-skin.down { visibility: visible; }
.gapi-btn:active:not(:disabled) .gapi-skin.up, .gapi-btn.on .gapi-skin.up { visibility: hidden; }
.gapi-btn:hover:not(:disabled) { filter: brightness(1.12); }
.gapi-btn:disabled { filter: grayscale(.7) brightness(.75); cursor: default; }
.gapi-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.gapi-btn-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0,0,0,.6); pointer-events: none; white-space: nowrap; }
.gapi-btn.big .gapi-btn-label { font-size: 12px; }
.gapi-label { position: absolute; font-family: Verdana, Tahoma, sans-serif; white-space: nowrap; overflow: hidden; line-height: 1.5; color: #fff; }
.WhiteCenterBigBoldLabel { font-size: 12px; font-weight: bold; text-align: center; }
.WhiteCenterMediumBoldLabel { font-size: 11px; font-weight: bold; text-align: center; }
.WhiteCenterSmallLabel { font-size: 9px; text-align: center; }
.WhiteLeftSmallLabel { font-size: 10px; }
.WhiteLeftMediumBoldLabel { font-size: 11px; font-weight: bold; }
.WhiteLeftBigBoldLabel { font-size: 13px; font-weight: bold; }
.ErrorSmallLabel { font-size: 10px; text-align: center; white-space: normal; color: #ffb08a; }
.BrownLeftSmallLabel { font-size: 10px; color: #514a3c; }
.gapi-input { position: absolute; box-sizing: border-box; background: transparent; border: 0; padding: 0 6px; font: 12px Verdana, Tahoma, sans-serif; color: #3d3527; outline: none; }
.gapi-check { position: absolute; margin: 0; accent-color: #8a6c3c; }
.gapi-news { position: absolute; box-sizing: border-box; padding: 6px 8px; overflow: auto; color: #e8dfc8; font: 11px/1.45 Verdana, Tahoma, sans-serif; white-space: normal; }
.gapi-news p { margin: 0 0 8px; }
.gapi-listbtn { display: block; width: 100%; margin: 4px 0; padding: 6px; background: #5c513c; color: #fff; border: 1px solid #8a7a50; border-radius: 4px; font: bold 11px Verdana, Tahoma, sans-serif; cursor: pointer; text-align: left; }
.gapi-listbtn:hover { background: #6d6047; } .gapi-listbtn.back { background: none; border-color: transparent; color: #d8cfb5; }
.gapi-slot { position: absolute; cursor: default; border-radius: 10px; }
.gapi-slot.used { cursor: pointer; }
.gapi-slot.selected { box-shadow: 0 0 0 2px #f2c14e, 0 0 14px rgba(242,193,78,.55); }
.gapi-slot .slot-name { left: 0; top: 150px; width: 100%; height: 18px; }
.gapi-slot .slot-level { left: 0; top: 168px; width: 100%; height: 16px; }
.gapi-slot .slot-sprite { position: absolute; left: -157px; top: -318px; width: 440px; height: 520px; pointer-events: none; }
#status { z-index: 20; }
/* ---- banner ---- */
.hud-block { background: transparent; }
.hud-chat { position: absolute; box-sizing: border-box; padding: 2px 6px; overflow-y: auto; overflow-x: hidden; background: #d5cfaa; color: #000; font: 10px/1.35 Verdana, Tahoma, sans-serif; white-space: normal; word-break: break-word; user-select: text; }
.hud-chat::-webkit-scrollbar { width: 8px; } .hud-chat::-webkit-scrollbar-track { background: #beb998; } .hud-chat::-webkit-scrollbar-thumb { background: #514a3c; border-radius: 4px; }
.chat-line b { font-weight: bold; }
.ch-general { color: #000; } .ch-party { color: #006699; } .ch-guild { color: #663399; } .ch-align { color: #996600; } .ch-recruit { color: #737373; }
.ch-trade { color: #663300; } .ch-admin { color: #ff00ff; } .ch-private { color: #0066ff; } .ch-info { color: #009900; } .ch-error { color: #c80000; } .ch-team { color: #cc3300; }
.hud-chat-input { position: absolute; box-sizing: border-box; border: 0; background: #fff; border-radius: 3px; padding: 0 4px; font: 10px Verdana, Tahoma, sans-serif; color: #000; outline: none; }
.hud-chat-prefix { position: absolute; color: #fff; font: bold 9px Verdana, sans-serif; display: flex; align-items: center; justify-content: center; cursor: default; }
.hud-heart { position: absolute; pointer-events: auto; }
.hud-heart canvas { position: absolute; left: 0; top: 0; }
.hud-life { position: absolute; left: 0; top: 11px; width: 44px; text-align: center; color: #fff; font: bold 11px Verdana, sans-serif; text-shadow: 0 0 2px #600, 0 1px 1px #000; pointer-events: none; }
.hud-points { position: absolute; text-align: center; font: bold 13px Verdana, sans-serif; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
.hud-points.ap { color: #0000ff; } .hud-points.mp { color: #006600; }
.hud-slot { position: absolute; cursor: pointer; }
.hud-slot canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.hud-slot:hover { filter: brightness(1.15); }
.gapi-window { position: absolute; box-sizing: border-box; overflow: hidden; }
.gapi-window-title { position: absolute; left: 0; top: 0; right: 0; box-sizing: border-box; padding: 0 10px; display: flex; align-items: center; white-space: nowrap; }
.gapi-overlay .gapi-stage > * { pointer-events: auto; }
/* Fight overlays (timeline, challenge menu, fight options, center texts…) sit over the battlefield: like the Flash
stage, only their components take the mouse; the empty layer lets the clicks through to the map. */
.fight-timeline-ui .gapi-stage > .gc-layer, .fight-challengemenu .gapi-stage > .gc-layer, .fight-options .gapi-stage > .gc-layer,
.fight-centertext .gapi-stage > .gc-layer, .fight-challenge-ui .gapi-stage > .gc-layer { pointer-events: none; }
.fight-cm-btn, .ftl-item, .ftl-turnhit, .fight-chicon { pointer-events: auto; }
.gapi-bar { position: absolute; overflow: hidden; border-radius: 2px; }
.gapi-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.gapi-ico { position: absolute; pointer-events: none; }
.gapi-ico canvas { position: absolute; left: 0; top: 0; }
.stats-portrait { overflow: hidden; border-radius: 4px; }
.stats-portrait canvas { position: absolute; left: -81px; top: -128px; width: 220px; height: 260px; }
.gapi-btn.gapi-close .gapi-btn-label { font: bold 15px Verdana, sans-serif; color: #fff; text-shadow: none; }
.gapi-btn.gapi-close:hover .gapi-btn-label { color: #ffcf8a; }
.inv-slot, .inv-cell { position: absolute; cursor: pointer; }
.inv-slot canvas, .inv-cell canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.inv-slot canvas.icon, .inv-cell canvas.icon { left: 1px; top: 1px; }
.inv-grid { overflow-y: auto; overflow-x: hidden; }
.inv-grid .inv-cell { position: relative; display: inline-block; width: 28px; height: 28px; vertical-align: top; }
.inv-grid::-webkit-scrollbar { width: 6px; } .inv-grid::-webkit-scrollbar-thumb { background: #514a3c; border-radius: 3px; }
.qty { position: absolute; right: 1px; bottom: 0; font: bold 8px Verdana, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.inv-preview { overflow: hidden; pointer-events: none; }
.inv-preview canvas { position: absolute; left: -30px; top: -60px; width: 220px; height: 260px; transform: scale(1.6); transform-origin: 110px 210px; }
.inv-detail-icon { position: absolute; }
.inv-effects { overflow-y: auto; font: 10px/1.45 Verdana, sans-serif; color: #514a3c; padding: 2px 4px; box-sizing: border-box; }
.inv-effects .eff.neg { color: #c80000; }
.inv-desc { overflow-y: auto; font: 10px/1.35 Verdana, sans-serif; color: #514a3c; white-space: normal; }
.spell-list { overflow-y: auto; }
.spell-row { position: relative; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 4px; background: #c9c09d; cursor: pointer; font: 11px Verdana, sans-serif; color: #514a3c; }
.spell-row.odd { background: #b4ac8e; } .spell-row:hover { background: #e2d7b0; }
.spell-icon { width: 22px; height: 22px; position: relative; } .spell-icon canvas { position: absolute; left: 0; top: 0; }
.spell-name { flex: 1; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spell-level { width: 46px; text-align: right; }
.spell-up { width: 16px; height: 16px; padding: 0; border: 1px solid #4e4028; border-radius: 2px; background: #ff6600; color: #fff; font: bold 11px/1 Verdana; cursor: pointer; }
.spell-up:disabled { background: #8c8368; cursor: default; }
.spell-info { box-sizing: border-box; padding: 10px 12px; background: #d5cfaa; border-radius: 13px; box-shadow: inset 0 0 0 3px #fff; color: #514a3c; font: 11px/1.4 Verdana, sans-serif; overflow-y: auto; white-space: normal; }
.si-title { font-weight: bold; font-size: 12px; margin-bottom: 6px; } .si-desc { margin-bottom: 8px; }
.si-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-bottom: 8px; } .si-grid div:nth-child(odd) { font-weight: bold; }
.si-eff div { padding: 2px 0; border-top: 1px solid #bdb48f; }
.gapi-btn.on { filter: brightness(1.15); }
@font-face { font-family: "bitMini6"; src: url("../data/fonts/bitMini6.woff2") format("woff2"); }
/* ---- fights ---- */
#fightUi { position: absolute; inset: 0; pointer-events: none; --banner: 0px; }
#fightUi > * { pointer-events: auto; }
.fight-timeline { position: absolute; right: 8px; bottom: calc(var(--banner) + 10px); display: flex; flex-direction: row-reverse; gap: 3px; }
.tl-item { position: relative; width: 34px; height: 40px; border-radius: 4px; background: #d5cfaa; box-shadow: inset 0 0 0 2px #514a3c; overflow: hidden; }
.tl-item.team0 { box-shadow: inset 0 0 0 2px #c0302a; } .tl-item.team1 { box-shadow: inset 0 0 0 2px #2a5ec0; }
.tl-item.current { transform: translateY(-6px); box-shadow: inset 0 0 0 2px #ffb000, 0 0 8px #ffb000; }
.tl-item.dead { opacity: .35; } .tl-item.ready::after { content: '✓'; position: absolute; left: 3px; top: 0; color: #1d8a1d; font: bold 12px Verdana; }
.tl-face { position: absolute; left: 2px; top: 3px; width: 26px; height: 34px; }
.tl-life { position: absolute; right: 3px; top: 3px; bottom: 3px; width: 5px; background: #514a3c; border-radius: 2px; display: flex; align-items: flex-end; }
.tl-life div { width: 100%; background: #e0302a; border-radius: 2px; }
.fight-btn { position: absolute; right: 8px; bottom: calc(var(--banner) + 60px); min-width: 110px; padding: 7px 14px; border: 2px solid #4e4028; border-radius: 8px; background: #ff6600; color: #fff; font: bold 13px Verdana, sans-serif; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.fight-btn.on { background: #3a9a2a; } .fight-btn:disabled { background: #8c8368; cursor: default; }
.fight-quit { position: absolute; right: 126px; bottom: calc(var(--banner) + 64px); padding: 4px 9px; border: 1px solid #4e4028; border-radius: 6px; background: #514a3c; color: #e8dfc8; font: 10px Verdana, sans-serif; cursor: pointer; }
.fight-chrono { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--banner) + 4px); width: 260px; height: 6px; background: rgba(81,74,60,.8); border-radius: 3px; overflow: hidden; }
.fight-chrono div { height: 100%; background: #9a9a9a; } .fight-chrono.mine div { background: #ff6600; }
.fight-tip { position: fixed; display: none; padding: 3px 8px; border-radius: 4px; background: rgba(30,24,14,.9); color: #f6ecd4; font-size: 12px; white-space: pre; pointer-events: none; }
.fight-floats { position: absolute; inset: 0; pointer-events: none !important; }
.fight-float { position: absolute; transform: translateX(-50%); font: bold 15px Verdana, sans-serif; text-shadow: 0 0 3px #000, 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
.fight-result { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); min-width: 420px; padding: 0 0 12px; background: #d5cfaa; border-radius: 13px; box-shadow: inset 0 0 0 3px #fff, 0 6px 30px rgba(0,0,0,.4); font: 11px Verdana, sans-serif; color: #514a3c; pointer-events: auto; text-align: center; overflow: hidden; }
.fight-result .fr-title { background: #514a3c; color: #fff; font: bold 13px Verdana; padding: 6px 12px; text-align: left; }
.fight-result table { margin: 10px auto; border-collapse: collapse; } .fight-result td, .fight-result th { padding: 3px 8px; text-align: left; }
.fight-result tr.lost { opacity: .7; } .fight-result th { border-bottom: 1px solid #8c8368; }
.fight-result button { padding: 5px 22px; border: 2px solid #4e4028; border-radius: 8px; background: #ff6600; color: #fff; font: bold 12px Verdana; cursor: pointer; }
/* custom windows (no original symbol) styled like LightBrownWindow */
.cwin { position: absolute; inset: 0; pointer-events: none; }
.cwin-frame { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(900px, 86vw); height: min(620px, 72vh); background: #d5cfaa; border-radius: 13px; box-shadow: inset 0 0 0 3px #fff, 0 8px 30px rgba(0,0,0,.35); pointer-events: auto; overflow: hidden; display: flex; flex-direction: column; }
.cwin-title { height: 22px; flex: none; background: #514a3c; color: #fff; font: bold 11px Verdana, sans-serif; display: flex; align-items: center; padding: 0 10px; position: relative; }
.cwin-close { position: absolute; right: 8px; top: 4px; width: 14px; height: 14px; padding: 0; border: 1px solid #4e4028; border-radius: 2px; background: #ff6600; color: #fff; font: bold 11px/1 Verdana; cursor: pointer; }
.wm-view { position: relative; flex: 1; overflow: hidden; margin: 6px; border-radius: 6px; background: #1d4f7a; cursor: grab; }
.wm-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; }
.wm-me { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #ff3a1e; box-shadow: 0 0 0 2px #fff, 0 0 8px #ff3a1e; pointer-events: none; }
.wm-info { flex: none; padding: 4px 10px 8px; font: 11px Verdana, sans-serif; color: #514a3c; }
.gapi-list { overflow-y: auto; background: #bfb896; }
.gapi-list .row { position: relative; display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; background: #d5cfaa; font: 11px Verdana, sans-serif; color: #514a3c; cursor: pointer; white-space: nowrap; overflow: hidden; }
.gapi-list .row.odd { background: #c9c19e; } .gapi-list .row:hover { background: #e2d7b0; } .gapi-list .row.empty { cursor: default; font-style: italic; }
.gapi-list .row.done { color: #8c8368; }
.gapi-list .dot { width: 7px; height: 7px; border-radius: 50%; background: #8c8368; flex: none; } .gapi-list .row.on .dot { background: #3aa53a; }
.gapi-list .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; font-weight: bold; } .gapi-list .lv { width: 52px; } .gapi-list .cl { width: 70px; }
.gapi-list .del { width: 14px; height: 14px; padding: 0; border: 1px solid #4e4028; border-radius: 2px; background: #ff6600; color: #fff; font: bold 10px/1 Verdana; cursor: pointer; }
.gapi-detail { overflow-y: auto; white-space: pre-wrap; font: 10px/1.45 Verdana, sans-serif; color: #514a3c; padding: 4px; box-sizing: border-box; }
.friends-input { background: #fff; border-radius: 3px; }
.quest-steps .qstep { margin-bottom: 8px; } .quest-steps .qstep b { display: block; margin-bottom: 2px; }
/* ---- popup menu & NPC dialogs ---- */
.popup-menu { position: absolute; min-width: 150px; background: #514a3c; border: 1px solid #fff; border-radius: 4px; padding: 2px 0; pointer-events: auto; box-shadow: 0 4px 14px rgba(0,0,0,.35); z-index: 30; }
.pm-title { padding: 3px 10px; color: #d5cfaa; font: bold 11px Verdana, sans-serif; border-bottom: 1px solid #6d6047; }
.pm-item { padding: 3px 10px; color: #fff; font: bold 10px Verdana, sans-serif; cursor: pointer; white-space: nowrap; }
.pm-item:hover { background: #ff6600; } .pm-item.off { color: #8c8368; cursor: default; } .pm-item.off:hover { background: none; }
.npc-dialog { position: absolute; left: 50%; bottom: calc(30vh + 10px); transform: translateX(-50%); width: min(760px, 92vw); display: flex; align-items: flex-end; gap: 0; pointer-events: auto; z-index: 25; }
.nd-art { flex: none; margin-right: -30px; position: relative; z-index: 1; }
.nd-art canvas { display: block; }
.nd-box { flex: 1; background: #ffffce; border: 5px solid #e6e8ba; border-radius: 5px; box-shadow: 0 0 0 2px #000, 0 6px 24px rgba(0,0,0,.35); padding: 8px 12px 10px 40px; font: 11px/1.45 Verdana, sans-serif; color: #000; }
.nd-name { font-weight: bold; margin-bottom: 4px; } .nd-q { white-space: pre-wrap; margin-bottom: 8px; }
.nd-a { padding: 2px 4px; cursor: pointer; color: #3d2b00; font-weight: bold; } .nd-a::before { content: '› '; } .nd-a:hover { background: #ffcc66; } .nd-a.bye { color: #7a6a4a; font-weight: normal; }
/* ---- dialogs (AskYesNo / PopupQuantity / menu), LightBrownWindow look */
.osa-dlg-layer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); pointer-events: auto; }
.osa-dlg-layer.free { background: none; pointer-events: none; } .osa-dlg-layer.free .osa-dlg { pointer-events: auto; }
.osa-dlg { min-width: 300px; max-width: 460px; background: #d5cfaa; border-radius: 13px; box-shadow: inset 0 0 0 3px #fff, 0 6px 22px rgba(0,0,0,.45); overflow: hidden; font: 11px Verdana, Tahoma, sans-serif; color: #514a3c; }
.osa-dlg-title { height: 22px; line-height: 22px; padding: 0 12px; background: #514a3c; color: #fff; font-weight: bold; border-radius: 13px 13px 0 0; margin: 3px 3px 0; }
.osa-dlg-body { padding: 14px 16px 6px; text-align: center; white-space: pre-line; line-height: 1.45; }
.osa-dlg-body .osa-dlg-btn.wide { display: block; width: 100%; margin: 5px 0; }
.osa-dlg-input { display: block; margin: 8px auto 0; width: 120px; padding: 3px 5px; border: 1px solid #8c8368; border-radius: 3px; background: #fff; font: 12px Verdana, sans-serif; text-align: center; color: #333; }
.osa-dlg-buttons { display: flex; gap: 8px; justify-content: center; padding: 6px 12px 12px; }
.osa-dlg-btn { min-width: 86px; height: 22px; padding: 0 12px; border: 0; border-radius: 4px; background: #ff6600; color: #fff; font: bold 11px Verdana, sans-serif; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.osa-dlg-btn:hover { background: #ff7d26; } .osa-dlg-btn:active { background: #d95700; }
.osa-dlg.opts { min-width: 360px; } .osa-dlg.opts .osa-dlg-body { text-align: left; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(81,74,60,.15); cursor: pointer; }
.opt-row input[type=range] { width: 150px; accent-color: #ff6600; } .opt-row input[type=checkbox] { accent-color: #ff6600; width: 15px; height: 15px; }
.osa-dlg-body.help div { padding: 2px 0; }
/* ---- main menu (top right) */
.osa-mainmenu { position: fixed; top: 4px; right: 6px; z-index: 40; display: flex; gap: 3px; pointer-events: auto; }
.osa-mm-btn { width: 26px; height: 22px; border: 0; border-radius: 4px; background: #ff6600; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.4); }
.osa-mm-btn:hover { background: #ff7d26; } .osa-mm-btn canvas { width: 14px; height: 14px; pointer-events: none; }
/* ---- shops and exchanges */
.tr-grid { overflow-y: auto; overflow-x: hidden; line-height: 0; }
.tr-grid .inv-cell { position: relative; display: inline-block; width: 28px; height: 28px; vertical-align: top; }
.tr-grid::-webkit-scrollbar { width: 6px; } .tr-grid::-webkit-scrollbar-thumb { background: #514a3c; border-radius: 3px; }
.inv-cell.sel { outline: 2px solid #ff6600; outline-offset: -2px; z-index: 1; }
.gapi-window.ready { box-shadow: inset 0 0 0 3px #4fd14f !important; }
.gapi-label.clickable { cursor: pointer; text-decoration: underline dotted; }
.gapi-btn.off { filter: grayscale(.7) brightness(.75); cursor: default; }
/* ---- character creation */
.cc-dome { overflow: visible; pointer-events: none; }
.cc-slide { position: absolute; bottom: 0; width: 160px; margin-left: -80px; display: flex; align-items: flex-end; justify-content: center; pointer-events: auto; cursor: pointer; transition: filter .2s; }
.cc-slide:not(.cur) { filter: brightness(.55) saturate(.6); } .cc-slide:not(.cur):hover { filter: brightness(.85); }
.cc-slide.cur { cursor: default; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.cc-arrow { display: flex; align-items: center; justify-content: center; font: bold 30px Verdana, sans-serif; color: #514a3c; cursor: pointer; user-select: none; }
.cc-arrow:hover { color: #ff6600; }
.cc-icon canvas { width: 42px; height: 42px; }
.cc-desc { overflow-y: auto; white-space: pre-line; font: 10px Verdana, sans-serif; color: #514a3c; line-height: 1.35; padding-right: 4px; }
.cc-desc::-webkit-scrollbar { width: 5px; } .cc-desc::-webkit-scrollbar-thumb { background: #8c8368; border-radius: 3px; }
.cc-sex { display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #bdb38f; color: #514a3c; font: bold 10px Verdana, sans-serif; cursor: pointer; }
.cc-sex.on { background: #ff6600; color: #fff; }
.cc-ped { display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.cc-ped { overflow: visible; } .cc-ped canvas { position: absolute; }
.cc-colors { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; font: bold 10px Verdana, sans-serif; color: #514a3c; }
.cc-color-row { display: flex; align-items: center; gap: 6px; }
.cc-color-row input { width: 34px; height: 18px; padding: 0; border: 1px solid #fff; background: none; cursor: pointer; }
.cc-color-row:not(.set) input { opacity: .45; } .cc-color-row span { flex: 1; }
.cc-reset { border: 0; border-radius: 4px; background: #ff6600; color: #fff; font: bold 10px Verdana, sans-serif; cursor: pointer; height: 18px; padding: 0 6px; }
.cc-reset.wide { margin-top: 2px; }
.cc-dice { display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
.wp-list { overflow-y: auto; }
.wp-row { display: flex; align-items: center; height: 25px; padding: 0 6px; cursor: pointer; }
.wp-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wp-row .pos { width: 110px; text-align: center; } .wp-row .cost { width: 70px; text-align: center; }
.wp-row.sel { background: #ff9a4d !important; color: #fff; } .wp-row.saved .nm { font-weight: bold; } .wp-row.expensive .cost { color: #c0392b; }
/* ---- group members (right side) */
.osa-party { position: fixed; right: 6px; top: 34px; z-index: 30; display: flex; flex-direction: column; gap: 4px; }
.pt-member { display: flex; align-items: center; gap: 4px; width: 150px; padding: 2px 4px 2px 2px; background: rgba(81,74,60,.82); border-radius: 15px 4px 4px 15px; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.pt-member.leader .pt-name::before { content: '★ '; color: #ffcf3a; }
.pt-face { width: 28px; height: 30px; border-radius: 50%; background: #d5cfaa; flex: none; }
.pt-info { flex: 1; min-width: 0; }
.pt-name { font: bold 10px Verdana, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-bar { height: 5px; margin-top: 2px; background: #2b2620; border-radius: 3px; overflow: hidden; } .pt-bar div { height: 100%; background: linear-gradient(#e64d4d, #b52a2a); }
.gd-body .row { height: 22px; } .gd-body .row .nm { flex: 1.3; font-weight: bold; } .gd-body .row .rk { flex: 1; } .gd-body .row .lv { width: 60px; } .gd-body .row .xp { width: 160px; text-align: right; }
.gd-info { padding: 10px; white-space: pre-line; font: 11px Verdana, sans-serif; color: #514a3c; line-height: 1.5; }
.gd-note { font: 10px Verdana, sans-serif; color: #514a3c; overflow: hidden; padding: 2px 4px; }
.gd-emblem { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(#ff9a4d, #c75000); color: #fff; font: bold 28px Verdana, sans-serif; box-shadow: inset 0 0 0 3px #fff; }
.gd-invite { display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #ff6600; color: #fff; font: bold 10px Verdana, sans-serif; cursor: pointer; }
.osa-dlg.jobs { min-width: 420px; } .osa-dlg-body.jb { text-align: left; max-height: 360px; overflow-y: auto; }
.jb-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(81,74,60,.15); }
.jb-icon { width: 40px; height: 40px; flex: none; border-radius: 6px; background: #bdb38f; } .jb-icon canvas { width: 40px; height: 40px; }
.jb-main { flex: 1; } .jb-name { font-weight: bold; } .jb-bar { position: relative; height: 7px; margin: 3px 0; background: #514a3c; border-radius: 3px; overflow: hidden; } .jb-bar .gapi-bar-fill { height: 100%; background: #ff6600; }
.jb-skills { font-size: 10px; color: #6e6450; }
.job-progress { position: fixed; left: 50%; top: 38%; width: 160px; height: 9px; margin-left: -80px; background: rgba(43,38,32,.85); border-radius: 5px; box-shadow: 0 0 0 2px #fff; overflow: hidden; z-index: 30; pointer-events: none; }
.job-progress div { height: 100%; width: 0; background: linear-gradient(#ffb066, #ff6600); }
.st-kamas { display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font: bold 11px Verdana, sans-serif; color: #514a3c; cursor: pointer; border-radius: 3px; } .st-kamas:hover { background: rgba(255,102,0,.15); }
.cr-recipes { overflow-y: auto; } .cr-recipes .cr-row { flex-direction: column; align-items: flex-start; height: auto; padding: 3px 6px; gap: 1px; white-space: normal; }
.cr-row b { font-size: 10px; } .cr-row span { font-size: 9px; color: #7a6e55; } .cr-row.ok b { color: #2f7d1f; }
.cr-only { font: 10px Verdana, sans-serif; color: #fff; display: flex; align-items: center; gap: 4px; } .cr-only input { accent-color: #ff6600; }
.cr-btn { display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #ff6600; color: #fff; font: bold 10px Verdana, sans-serif; cursor: pointer; }
.cr-qty { border: 1px solid #8c8368; border-radius: 3px; font: bold 10px Verdana, sans-serif; text-align: center; padding: 0; }
.tr-grid.cr-ing { overflow: hidden; }
.mt-head { font-weight: bold; font-size: 12px; text-align: center; margin-bottom: 6px; }
.mt-bar { flex: 1; height: 7px; background: #514a3c; border-radius: 3px; overflow: hidden; } .mt-bar div { height: 100%; background: #ff6600; }
.opt-row b { min-width: 80px; text-align: right; }
.hud-slot.drop { outline: 2px solid #ff6600; outline-offset: -1px; }
.spell-row[draggable=true] { cursor: grab; }
.hud-emote { display: flex; align-items: center; justify-content: center; font-size: 13px; color: #514a3c; cursor: pointer; border-radius: 3px; } .hud-emote:hover { background: rgba(255,102,0,.25); }
/* ---- fight results (UI_GameResult) */
.gr-body { overflow-y: auto; font: 10px Verdana, sans-serif; color: #514a3c; }
.gr-row { display: flex; align-items: center; height: 20px; border-bottom: 1px solid rgba(81,74,60,.18); }
.gr-row span { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid rgba(81,74,60,.18); height: 100%; display: flex; align-items: center; }
.gr-row .n { width: 150px; font-weight: bold; } .gr-row .l { width: 32px; justify-content: center; } .gr-row .x { width: 110px; } .gr-row .w { width: 110px; justify-content: flex-end; } .gr-row .k { width: 60px; justify-content: flex-end; } .gr-row .d { flex: 1; border-right: 0; gap: 2px; }
.gr-row .x i { display: block; height: 6px; width: 0; background: #ff6600; border-radius: 3px; box-shadow: 0 0 0 1px #514a3c; }
.gr-head { background: #514a3c; color: #fff; font-weight: bold; } .gr-head span { border-color: rgba(255,255,255,.2); }
.gr-team { padding: 2px 6px; font-weight: bold; color: #fff; } .gr-team.win { background: #4c7a2e; } .gr-team.lose { background: #8a3a2a; }
.gr-row.dead .n { color: #8a3a2a; } .gr-row.me { background: rgba(255,102,0,.12); }
.gr-row .d .gr-drop { border: 0; padding: 0; overflow: visible; } .gr-drop { position: relative; width: 18px; height: 18px; display: inline-block; } .gr-drop canvas { width: 18px; height: 18px; } .gr-drop b { position: absolute; right: -2px; bottom: -3px; font-size: 8px; color: #fff; text-shadow: 0 0 2px #000; }
.osa-dlg.levelup { animation: lvlpop .45s ease-out; } .osa-dlg.levelup .osa-dlg-title { background: linear-gradient(#ff8a1a, #c75000); }
@keyframes lvlpop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tl-buffs { position: absolute; left: 1px; top: 1px; min-width: 13px; height: 13px; border-radius: 7px; background: #3a7bd5; color: #fff; font: bold 9px Verdana, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px #fff; }
/* ---- auction house */
.osa-dlg.hdv { position: relative; width: min(900px, 94vw); max-width: none; height: min(520px, 62vh); margin-bottom: 20vh; display: flex; flex-direction: column; }
.hdv-x { position: absolute; right: 9px; top: 6px; width: 18px; height: 16px; border: 0; border-radius: 3px; background: #ff6600; color: #fff; font: bold 12px Verdana; cursor: pointer; line-height: 14px; }
.hdv-body { flex: 1; display: flex; gap: 6px; padding: 8px; min-height: 0; }
.hdv-col { display: flex; flex-direction: column; min-height: 0; background: #bfb896; border-radius: 6px; overflow: hidden; }
.hdv-col.cats { width: 170px; overflow-y: auto; } .hdv-col.tpls { width: 250px; } .hdv-col.lines { flex: 1; } .hdv-col.sells { flex: 1; } .hdv-col.bag { width: 330px; }
.hdv-col .row { display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 6px; background: #d5cfaa; font: 10px Verdana, sans-serif; color: #514a3c; cursor: pointer; } .hdv-col .row.odd { background: #cbc5a0; } .hdv-col .row.sel { background: #ff9a4d; color: #fff; } .hdv-col .row.empty { cursor: default; color: #8c8368; }
.hdv-list { flex: 1; overflow-y: auto; } .hdv-search { margin: 4px; padding: 3px 5px; border: 1px solid #8c8368; border-radius: 3px; font: 10px Verdana; }
.hdv-tpl .ic { width: 20px; height: 20px; flex: none; } .hdv-tpl .ic canvas { width: 20px; height: 20px; } .hdv-tpl .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hdv-tpl .lv { color: #7a6e55; }
.hdv-head { display: flex; align-items: center; gap: 8px; padding: 5px 6px; background: #514a3c; color: #fff; font: 10px Verdana; } .hdv-head b { flex: 1; } .hdv-head .q { width: 74px; text-align: center; font-weight: bold; }
.hdv-line .ef { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdv-buy { width: 74px; height: 18px; border: 0; border-radius: 3px; background: #ff6600; color: #fff; font: bold 10px Verdana; cursor: pointer; } .hdv-buy:disabled { background: #a99f80; cursor: default; }
.hdv-foot { padding: 4px 6px; background: #514a3c; color: #fff; font: 10px Verdana; }
.hdv-bag { flex: 1; overflow-y: auto; padding: 4px; } .hdv-avg { margin-top: 6px; font-size: 10px; color: #7a6e55; }
.hdv-bag .inv-cell { background: #d5cfaa; box-shadow: inset 0 0 0 1px #a99f80; margin: 1px; }
.hdv-buy.own { background: #8c6d3a; }
.osa-perf { position: fixed; left: 50%; transform: translateX(-50%); top: 4px; z-index: 90; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #9f9; font: 11px monospace; pointer-events: none; }
.fight-challenges { position: fixed; left: 8px; top: 40px; display: flex; flex-direction: column; gap: 4px; width: 230px; pointer-events: auto; }
.fc-item { padding: 5px 7px; border-radius: 6px; background: rgba(81,74,60,.88); color: #fff; font: 10px Verdana, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.fc-item b { display: block; color: #ffcf8a; } .fc-item span { display: block; margin: 2px 0; } .fc-item i { font-style: normal; color: #cfc6a6; font-size: 9px; }
.fc-item.ok { box-shadow: inset 0 0 0 2px #4fd14f; } .fc-item.ko { box-shadow: inset 0 0 0 2px #e64d4d; opacity: .7; }
.smiley-grid { display: grid; grid-template-columns: repeat(5, 32px); gap: 3px; padding: 6px; }
.sm-cell { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; } .sm-cell:hover { background: rgba(255,102,0,.35); }
.smiley-bubble { position: fixed; z-index: 20; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.4); pointer-events: none; animation: lvlpop .3s ease-out; }
.hdv-col .row.sub { padding-left: 18px; font-size: 9px; }
.ach-row { padding: 5px 8px; background: #d5cfaa; border-bottom: 1px solid rgba(81,74,60,.15); font: 10px Verdana, sans-serif; color: #514a3c; } .ach-row.odd { background: #cbc5a0; } .ach-row.done b { color: #2f7d1f; }
.ach-top { display: flex; align-items: center; gap: 6px; } .ach-top b { flex: 1; } .ach-top .pts { color: #7a6e55; }
.ach-obj { white-space: pre-line; margin: 3px 0; color: #6e6450; } .ach-rw { font-size: 9px; color: #8c6d3a; }
.osa-mapinfo { position: fixed; left: 8px; top: 6px; z-index: 25; pointer-events: none; font: bold 12px Verdana, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; display: flex; flex-direction: column; }
.osa-mapinfo span { font-weight: normal; font-size: 11px; }
.osa-mm-btn.shop { font-size: 12px; color: #fff; }
.shop-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; padding: 6px; align-content: start; }
.shop-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; background: #d5cfaa; border-radius: 6px; cursor: pointer; font: 10px Verdana, sans-serif; color: #514a3c; text-align: center; box-shadow: inset 0 0 0 1px #a99f80; }
.shop-item:hover { box-shadow: inset 0 0 0 2px #ff6600; } .shop-item .ic { width: 44px; height: 44px; } .shop-item .ic canvas { width: 44px; height: 44px; }
.shop-item .pr { color: #c75000; font-weight: bold; } .shop-item i { position: absolute; top: 3px; right: 3px; padding: 1px 4px; border-radius: 3px; background: #ff6600; color: #fff; font-style: normal; font-size: 8px; }
.hdv-head .og { color: #ffcf8a; font-weight: bold; }
.fight-weapon { position: absolute; right: 12px; bottom: calc(var(--banner) + 96px); width: 40px; height: 40px; border: 0; border-radius: 8px; background: #d5cfaa; box-shadow: inset 0 0 0 2px #514a3c, 0 1px 4px rgba(0,0,0,.4); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 0; }
.fight-weapon:hover { box-shadow: inset 0 0 0 2px #ff6600, 0 1px 4px rgba(0,0,0,.4); } .fight-weapon canvas { width: 30px; height: 30px; pointer-events: none; }
/* ---- gapi components rebuilt from loader.swf (osa-gapi-ui.js) ---- */
@font-face { font-family: "OsaFont1"; src: url("../fonts/OsaFont1.woff2") format("woff2"); }
@font-face { font-family: "OsaFont2"; src: url("../fonts/OsaFont2.woff2") format("woff2"); }
@font-face { font-family: "OsaFont4"; src: url("../fonts/OsaFont4.woff2") format("woff2"); }
@font-face { font-family: "OsaFont5"; src: url("../fonts/OsaFont5.woff2") format("woff2"); }
@font-face { font-family: "OsaFont6"; src: url("../fonts/OsaFont6.woff2") format("woff2"); }
.gc-layer { position: absolute; left: 0; top: 0; width: 742px; height: 556px; pointer-events: none; }
.gc { position: absolute; box-sizing: border-box; pointer-events: auto; }
.gc-Label, .gc-BackgroundHidder, .gc-StylizedRectangle { pointer-events: none; }
.gc-Label.over { pointer-events: auto; }
.gc-text { position: absolute; left: 0; top: 1px; right: 0; bottom: 0; padding: 2px 2px 0 2px; line-height: 1.215; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; font-family: OsaFont1, Verdana, sans-serif; font-size: 11px; }
.gc-text.ml { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.gc-text b { font-family: OsaFont2, Verdana, sans-serif; font-weight: normal; }
.gc canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.gc-btn { cursor: pointer; }
.gc-btn .gc-skin.down { visibility: hidden; }
.gc-btn.pressed .gc-skin.down, .gc-btn.selected .gc-skin.down { visibility: visible; }
.gc-btn.pressed .gc-skin.up, .gc-btn.selected .gc-skin.up { visibility: hidden; }
.gc-btn.pressed .gc-icon, .gc-btn.selected .gc-icon, .gc-btn.pressed .gc-btn-label { transform: translate(.5px, .5px); }
.gc-btn.gc-disabled { cursor: default; }
.gc-btn-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-55%); text-align: center; white-space: nowrap; overflow: hidden; line-height: 1.215; pointer-events: none; }
.gc-ProgressBar { overflow: hidden; }
.gc-pb-up, .gc-pb-uber { position: absolute; left: 1px; top: 1px; bottom: 1px; }
.gc-Window { pointer-events: auto; }
.gc-win-bg, .gc-win-bar { position: absolute; }
.gc-win-title { left: 5px; top: 6px; right: 30px; height: 18px; bottom: auto; }
.gc-ctr-content { position: absolute; inset: 0; pointer-events: none; }
.gc-ctr-hl { visibility: hidden; }
.gc-Container:hover .gc-ctr-hl, .gc-Container.selected .gc-ctr-hl { visibility: visible; }
.gc-ctr-label { top: auto; bottom: 0; height: 14px; text-align: right; }
.gc-input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; background: #fff; padding: 1px 3px; box-sizing: border-box; }
.gc-textarea { position: absolute; inset: 0; overflow-y: auto; padding: 2px; white-space: normal; line-height: 1.215; font-family: OsaFont1, Verdana, sans-serif; font-size: 11px; }
.gc-list { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
.gc-row { position: relative; display: flex; align-items: center; cursor: pointer; }
.gc-row.empty { cursor: default; }
.gc-row .gc-text { position: relative; top: 0; flex: 0 0 auto; }
.gc-grid-head { position: absolute; left: 0; right: 0; top: 0; display: flex; }
.gc-grid-head .gc-text, .gc-row .gc-col { position: relative; top: 0; }
.gc-combo { position: absolute; inset: 0; width: 100%; border: 0; background: #fff; }
.gc-tooltip { position: fixed; z-index: 1000; display: none; max-width: 260px; padding: 4px 7px; background: rgba(81, 74, 60, .92); color: #fff; border-radius: 3px; font: 11px OsaFont1, Verdana, sans-serif; line-height: 1.3; pointer-events: none; white-space: normal; }
.gc-art { position: absolute; pointer-events: none; }
.gc-row.sym { position: relative; display: block; }
.gc-row.sym .gc { pointer-events: none; }
.gc-grid-head .gc-col { position: absolute; top: 0; }
.gc-row .gc-col { position: absolute; top: 0; height: 100%; }
.gc-list::-webkit-scrollbar { width: 8px; } .gc-list::-webkit-scrollbar-thumb { background: #9e927a; border-radius: 4px; } .gc-list::-webkit-scrollbar-track { background: transparent; }
.gc-TextField { pointer-events: none; } .gc-tf { top: 0; }
.gc-hidden-parent { display: none !important; }
/* achievements (UI_Achievements port) */
.ach-list { position: absolute; left: 350px; top: 129px; width: 375px; height: 300px; overflow-y: auto; overflow-x: hidden; z-index: 900; pointer-events: auto; }
.ach-list::-webkit-scrollbar { width: 12px; } .ach-list::-webkit-scrollbar-thumb { background: #9e927a; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .ach-list::-webkit-scrollbar-track { background: transparent; }
.ach-item { position: relative; width: 363px; }
.ach-head { position: relative; height: 50px; }
.ach-obj { position: relative; height: 20px; }
.ach-rewards { position: relative; height: 60px; }
.ach-synth { position: absolute; width: 363px; height: 238px; z-index: 900; pointer-events: auto; }
.ach-sitem { position: absolute; width: 175px; height: 55px; }
.ach-item .gc, .ach-sitem .gc { pointer-events: auto; }
.gc-Container.claimed .gc-ctr-bg { filter: sepia(.4); }
.ach-inner { box-shadow: inset 0 2px 4px rgba(81,74,62,.7); overflow: hidden; }
.gc-chatarea { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 0 4px; line-height: 1.3; color: #000; white-space: normal; overflow-wrap: anywhere; user-select: text; }
.gc-chatarea::-webkit-scrollbar { width: 10px; } .gc-chatarea::-webkit-scrollbar-thumb { background: #514a3c; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } .gc-chatarea::-webkit-scrollbar-track { background: rgba(0,0,0,.06); }
.gc-chatarea a { color: inherit; text-decoration: underline; cursor: pointer; }
.gc-chrono { position: absolute; inset: 0; border-radius: 50%; }
/* banner (UI_Banner port) */
.hud-console { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 2px; box-sizing: border-box; }
.hud-xtra { position: absolute; overflow: hidden; cursor: pointer; pointer-events: auto; }
.hud-xtra canvas { position: absolute; }
.hud-pv-bg { position: absolute; width: 0; height: 0; pointer-events: auto; }
.hud-pv-bg canvas { position: absolute; }
.hud-heart-hit { position: absolute; cursor: pointer; pointer-events: auto; }
.hud-smiley-cell { position: absolute; cursor: pointer; border-radius: 3px; }
.hud-smiley-cell:hover { background: rgba(255,102,0,.3); }
.hud-smiley-cell canvas { position: absolute; }
.hud-emote-txt { font: 9px OsaFont1, Verdana; color: #514a3c; }
.gc-Container.drop { outline: 2px solid #ff6600; outline-offset: -1px; }
/* spells (Osatopia HTML spell book: electron css/osatopia-spell-panel.css + components/spell-panel-progress.css, genome and priority styles) */
#osp-root{position:fixed;inset:0;z-index:210000;font-family:Arial,sans-serif;color:#514c3b;pointer-events:none}#osp-root *{box-sizing:border-box}.osp-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:2vh 2vw;pointer-events:auto}.osp-overlay[hidden],.osp-detail[hidden]{display:none!important}.osp-book{position:relative;width:min(1480px,96vw);height:min(850px,94vh);display:grid;grid-template-columns:1fr 1fr;border:9px solid #57442d;border-radius:22px;background:#eee8c5;box-shadow:0 12px 45px #000,inset 0 0 30px rgba(98,74,35,.35);overflow:hidden}.osp-book:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:8px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(62,43,24,.24),rgba(255,255,255,.55),rgba(62,43,24,.2));pointer-events:none}.osp-page{min-width:0;padding:26px 30px;background:radial-gradient(circle at 50% 42%,#fffde7 0,#eeebc9 58%,#d5cba2 100%)}.osp-left{display:grid;grid-template-rows:42% 58%;gap:18px}.osp-class,.osp-deck{min-height:0}.osp-class h1,.osp-section-title h1,.osp-collection-head h1{margin:0;color:#4f4a3a;font-size:clamp(23px,2vw,38px)}.osp-class h2{margin:10px 0 4px;font-size:18px}.osp-class p,.osp-collection-head p{margin:0;line-height:1.35;font-size:clamp(13px,1.05vw,18px)}.osp-class-spells{display:flex;gap:16px;margin-top:18px;justify-content:center}.osp-class-spells button,.osp-detail-spells button{cursor:pointer}.osp-class-spells button{width:84px;height:84px;padding:7px;border:3px solid #c5bb8c;border-radius:12px;background:#a9a387}.osp-icon{width:100%;height:100%;display:block;pointer-events:none}.osp-section-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:3px solid #9c9371;padding-bottom:7px}.osp-deck-tabs{display:flex;gap:7px;margin:12px 0}.osp-deck-tabs button{width:43px;height:32px;border:2px solid #897d5c;border-radius:7px;background:#dad3ac;font-weight:bold}.osp-deck-tabs .active{background:#f36b08;color:white}.osp-deck-name{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;font-weight:bold}.osp-deck-name input,.osp-filters input,.osp-filters select{height:40px;border:2px solid #aa936d;background:#fffdf4;border-radius:7px;padding:0 11px;min-width:0}.osp-deck-name button,.osp-rename{height:40px;border:2px solid #a94700;border-radius:9px;background:linear-gradient(#ff8b1c,#ed5c00);color:white;font-weight:bold;padding:0 14px}.osp-deck-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:17px}.osp-slot{position:relative;min-width:0;aspect-ratio:1;border:3px solid #a59a79;background:#c9c3a4;border-radius:8px;display:flex;align-items:center;justify-content:center}.osp-slot>span{font-size:22px;color:#8b8368}.osp-slot strong{position:absolute;left:2px;right:2px;bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:10px;background:rgba(246,241,207,.88)}.osp-remove{position:absolute;right:-6px;top:-7px;width:22px;height:22px;border:2px solid white;border-radius:50%;background:#ed3318;color:white;font-weight:bold;line-height:16px}.osp-kroma{position:absolute;left:3px;top:3px;background:#d938ce;color:white;border-radius:50%;font:bold 11px Arial;padding:2px 4px}.osp-deck-help{margin:8px 0 0;font-size:12px}.osp-collection-head{padding-bottom:14px;border-bottom:3px solid #a49a77}.osp-collection-head p{margin-top:7px}.osp-filters{display:grid;grid-template-columns:minmax(180px,2fr) minmax(130px,1fr) minmax(155px,1fr);gap:8px;margin-top:13px}.osp-results{height:calc(100% - 155px);overflow:auto;padding:13px 8px 10px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:9px}.osp-card{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:9px;align-items:center;min-height:75px;padding:6px;border:2px solid #b4a985;border-radius:9px;background:#f6f2d8;cursor:pointer}.osp-card:hover{border-color:#ee6b0b;transform:translateY(-1px)}.osp-card.missing{filter:saturate(.35);opacity:.74}.osp-card-icon{position:relative;width:60px;height:60px;border-radius:8px;background:#aea889;padding:4px}.osp-card strong,.osp-card span,.osp-card small{display:block}.osp-card span{font-size:12px;margin-top:3px}.osp-card small{font-size:11px}.osp-card>b{font-size:10px;color:#8c7648;align-self:start}.osp-close{position:absolute;z-index:5;right:13px;top:12px;width:37px;height:37px;border:3px solid white;border-radius:4px;background:#f36508;color:white;font:bold 27px/28px Arial;box-shadow:0 0 0 2px #9d4a09;cursor:pointer}.osp-detail{position:absolute;inset:0;z-index:10;background:rgba(31,25,15,.68);display:flex;align-items:center;justify-content:center;padding:4%}.osp-detail-card{position:relative;width:min(940px,94%);max-height:94%;overflow:auto;border:7px solid #5a4d37;border-radius:18px;background:#eee9c4;padding:24px;box-shadow:0 10px 35px #000}.osp-detail-card header{display:flex;gap:16px;align-items:center;border-bottom:3px solid #9d9370;padding-bottom:12px}.osp-detail-card header>div:first-child{position:relative;width:86px;height:86px}.osp-detail-card h2{margin:0;font-size:31px}.osp-detail-card h3{margin:16px 0 8px}.osp-detail-card ul{columns:2;margin:0}.osp-detail-spells{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.osp-detail-spells button{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto 1fr;text-align:left;gap:3px 9px;min-height:94px;border:2px solid #a5966e;border-radius:9px;background:#f9f5dc;padding:8px}.osp-detail-spells .osp-icon{grid-row:1/3;width:58px;height:58px}.osp-detail-spells span{font-size:11px}.osp-empty{grid-column:1/-1;text-align:center;margin-top:40px}
@media(max-width:1050px){.osp-book{grid-template-columns:46% 54%}.osp-page{padding:20px}.osp-results{grid-template-columns:1fr}.osp-class-spells{gap:7px}.osp-class-spells button{width:62px;height:62px}.osp-filters{grid-template-columns:1fr 1fr}.osp-filters input{grid-column:1/-1}.osp-collection-head h1,.osp-class h1,.osp-section-title h1{font-size:24px}}
@media(max-height:720px){.osp-book{height:96vh}.osp-page{padding:14px 20px}.osp-left{grid-template-rows:39% 61%;gap:8px}.osp-class p{font-size:12px;max-height:58px;overflow:auto}.osp-class-spells{margin-top:8px}.osp-class-spells button{width:54px;height:54px}.osp-deck-tabs{margin:6px 0}.osp-deck-slots{margin-top:8px}.osp-results{height:calc(100% - 135px)}.osp-filters{margin-top:7px}.osp-collection-head p{font-size:12px}}
.osp-page{min-height:0;overflow:hidden}.osp-left{grid-template-rows:minmax(0,42%) minmax(0,58%)}.osp-class,.osp-deck{min-height:0}.osp-class{overflow-y:auto;overflow-x:hidden}.osp-deck{overflow:hidden}
@media(max-height:720px){.osp-left{grid-template-rows:minmax(0,39%) minmax(0,61%)}}
/* The deck and collection deliberately share one responsive thumbnail size. */
.osp-book{--osp-thumb-size:60px}
.osp-deck-slots{grid-template-columns:repeat(6,var(--osp-thumb-size));grid-auto-rows:var(--osp-thumb-size);justify-content:center;gap:8px;overflow:visible;padding:7px 8px 3px}
.osp-follower-toggle{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;margin-top:10px;padding:6px 9px;border:1px solid #b3a57a;border-radius:7px;background:#ded7af;cursor:pointer}.osp-follower-toggle input{width:18px;height:18px;accent-color:#ef6508}.osp-follower-toggle span{font-weight:bold}.osp-follower-toggle small{opacity:.78}.osp-follower-toggle:has(input:disabled){opacity:.55;cursor:not-allowed}
.osp-slot{width:var(--osp-thumb-size);height:var(--osp-thumb-size);min-width:var(--osp-thumb-size);min-height:var(--osp-thumb-size);aspect-ratio:auto;overflow:hidden}
.osp-slot .osp-icon{width:100%;height:100%;min-width:0;min-height:0}
.osp-card{grid-template-columns:var(--osp-thumb-size) minmax(0,1fr) auto}
.osp-card-icon{width:var(--osp-thumb-size);height:var(--osp-thumb-size)}
.osp-kroma{display:none!important}
@media(max-width:850px){
.osp-overlay{padding:3px}
.osp-book{--osp-thumb-size:48px;width:calc(100vw - 6px);height:calc(100vh - 6px);grid-template-columns:48% 52%;border-width:5px;border-radius:14px}
.osp-book:after{width:5px}
.osp-page{padding:10px 12px}
.osp-left{grid-template-rows:minmax(0,38%) minmax(0,62%);gap:6px}
.osp-class h1,.osp-section-title h1,.osp-collection-head h1{font-size:20px;line-height:1.05}
.osp-class h2{font-size:15px;margin:7px 0 3px}
.osp-class p,.osp-collection-head p{font-size:11px;line-height:1.22}
.osp-class-spells{gap:5px;margin-top:6px;justify-content:flex-start}
.osp-class-spells button{width:46px;height:46px;padding:3px;border-width:2px;border-radius:8px}
.osp-section-title{padding-bottom:4px}
.osp-section-title span{font-size:11px;white-space:nowrap}
.osp-deck-tabs{gap:5px;margin:6px 0}
.osp-deck-tabs button{width:39px;height:29px}
.osp-deck-name{gap:5px;font-size:12px;grid-template-columns:auto minmax(0,1fr) auto}
.osp-deck-name input,.osp-deck-name button,.osp-filters input,.osp-filters select{height:34px;padding:0 8px}
.osp-deck-name button{padding:0 9px}
.osp-deck-slots{gap:4px;margin-top:5px;padding:7px 2px 3px;justify-content:start}
.osp-slot{border-width:2px;border-radius:6px}
.osp-slot strong{font-size:8px}
.osp-remove{right:-1px;top:-1px;width:18px;height:18px;line-height:13px;font-size:11px}
.osp-deck-help{font-size:10px;line-height:1.15;margin-top:4px}
.osp-collection-head{padding-bottom:7px}
.osp-collection-head p{margin-top:4px;padding-right:34px}
.osp-filters{gap:5px;margin-top:6px}
.osp-results{height:calc(100% - 122px);padding:7px 3px;gap:6px}
.osp-card{min-height:58px;gap:6px;padding:4px;border-radius:7px}
.osp-card-icon{padding:3px;border-radius:6px}
.osp-card strong{font-size:13px}
.osp-card span,.osp-card small{font-size:10px;margin-top:1px}
.osp-card>b{font-size:8px}
.osp-close{right:9px;top:8px;width:31px;height:31px;font-size:22px;line-height:22px}
}
@media(max-width:650px){
.osp-book{--osp-thumb-size:42px;grid-template-columns:47% 53%}
.osp-page{padding:8px}
.osp-class h1,.osp-section-title h1,.osp-collection-head h1{font-size:17px}
.osp-class-spells button{width:39px;height:39px}
.osp-deck-tabs button{width:32px}
.osp-deck-name{grid-template-columns:1fr auto}
.osp-deck-name>input{grid-column:1}
.osp-deck-name{font-size:0}
.osp-filters{grid-template-columns:1fr}
.osp-filters input{grid-column:auto}
.osp-results{height:calc(100% - 158px)}
}
/* The Electron page can be desktop-sized while the Flash game itself is windowed.
These classes are driven from the real #flashGame bounds, not the page viewport. */
#osp-root.osp-flash-foreground{visibility:hidden}
#osp-root .osp-overlay{padding:2%}
#osp-root .osp-book{width:min(1480px,96%);height:min(850px,94%)}
#osp-root.osp-compact .osp-overlay{padding:3px}
#osp-root.osp-compact .osp-book{--osp-thumb-size:48px;width:calc(100% - 6px);height:calc(100% - 6px);grid-template-columns:48% 52%;border-width:5px;border-radius:14px}
#osp-root.osp-compact .osp-book:after{width:5px}
#osp-root.osp-compact .osp-page{padding:10px 12px}
#osp-root.osp-compact .osp-left{grid-template-rows:minmax(0,38%) minmax(0,62%);gap:6px}
#osp-root.osp-compact .osp-class h1,#osp-root.osp-compact .osp-section-title h1,#osp-root.osp-compact .osp-collection-head h1{font-size:20px;line-height:1.05}
#osp-root.osp-compact .osp-class h2{font-size:15px;margin:7px 0 3px}
#osp-root.osp-compact .osp-class p,#osp-root.osp-compact .osp-collection-head p{font-size:11px;line-height:1.22}
#osp-root.osp-compact .osp-class-spells{gap:5px;margin-top:6px;justify-content:flex-start}
#osp-root.osp-compact .osp-class-spells button{width:46px;height:46px;padding:3px;border-width:2px;border-radius:8px}
#osp-root.osp-compact .osp-section-title{padding-bottom:4px}
#osp-root.osp-compact .osp-section-title span{font-size:11px;white-space:nowrap}
#osp-root.osp-compact .osp-deck-tabs{gap:5px;margin:6px 0}
#osp-root.osp-compact .osp-deck-tabs button{width:39px;height:29px}
#osp-root.osp-compact .osp-deck-name{gap:5px;font-size:12px;grid-template-columns:auto minmax(0,1fr) auto}
#osp-root.osp-compact .osp-deck-name input,#osp-root.osp-compact .osp-deck-name button,#osp-root.osp-compact .osp-filters input,#osp-root.osp-compact .osp-filters select{height:34px;padding:0 8px}
#osp-root.osp-compact .osp-deck-name button{padding:0 9px}
#osp-root.osp-compact .osp-deck-slots{gap:4px;margin-top:5px;padding:7px 2px 3px;justify-content:start}
#osp-root.osp-compact .osp-slot{border-width:2px;border-radius:6px}
#osp-root.osp-compact .osp-slot strong{font-size:8px}
#osp-root.osp-compact .osp-remove{right:-1px;top:-1px;width:18px;height:18px;line-height:13px;font-size:11px}
#osp-root.osp-compact .osp-deck-help{font-size:10px;line-height:1.15;margin-top:4px}
#osp-root.osp-compact .osp-collection-head{padding-bottom:7px}
#osp-root.osp-compact .osp-collection-head p{margin-top:4px;padding-right:34px}
#osp-root.osp-compact .osp-filters{gap:5px;margin-top:6px;grid-template-columns:1fr 1fr}
#osp-root.osp-compact .osp-filters input{grid-column:1/-1}
#osp-root.osp-compact .osp-results{height:calc(100% - 122px);padding:7px 3px;gap:6px;grid-template-columns:1fr}
#osp-root.osp-compact .osp-card{min-height:58px;gap:6px;padding:4px;border-radius:7px}
#osp-root.osp-compact .osp-card-icon{padding:3px;border-radius:6px}
#osp-root.osp-compact .osp-card strong{font-size:13px}
#osp-root.osp-compact .osp-card span,#osp-root.osp-compact .osp-card small{font-size:10px;margin-top:1px}
#osp-root.osp-compact .osp-card>b{font-size:8px}
#osp-root.osp-compact .osp-close{right:9px;top:8px;width:31px;height:31px;font-size:22px;line-height:22px}
#osp-root.osp-short .osp-book{height:calc(100% - 6px)}
#osp-root.osp-short .osp-page{padding-top:8px;padding-bottom:8px}
#osp-root.osp-small .osp-book{--osp-thumb-size:42px;grid-template-columns:47% 53%}
#osp-root.osp-small .osp-page{padding:8px}
#osp-root.osp-small .osp-class h1,#osp-root.osp-small .osp-section-title h1,#osp-root.osp-small .osp-collection-head h1{font-size:17px}
#osp-root.osp-small .osp-class-spells button{width:39px;height:39px}
#osp-root.osp-small .osp-deck-tabs button{width:32px}
#osp-root.osp-small .osp-deck-name{grid-template-columns:1fr auto;font-size:0}
#osp-root.osp-small .osp-deck-name>input{grid-column:1}
#osp-root.osp-small .osp-filters{grid-template-columns:1fr}
#osp-root.osp-small .osp-filters input{grid-column:auto}
#osp-root.osp-small .osp-results{height:calc(100% - 158px)}
/* Keep breathing room around the book on genuinely small game windows. */
#osp-root.osp-compact .osp-book,#osp-root.osp-compact.osp-short .osp-book{width:min(900px,92%);height:min(680px,92%)}
/* Historical rarity tabs: four normal tiers followed by four Kroma tiers. */
.osp-right{display:flex;min-height:0;flex-direction:column}
.osp-results{height:auto;min-height:0;flex:1}
.osp-rarity-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.osp-rarity-tabs button{height:30px;border:2px solid #958966;border-radius:12px;background:#d4cfaa;color:#e7b900;font:bold 17px/22px Arial;cursor:pointer;text-shadow:0 1px #735f00;white-space:nowrap}
.osp-rarity-tabs button.kroma{color:#e839d8;text-shadow:0 1px #7b146f}
.osp-rarity-tabs button.active{border-color:#ef7008;background:#fff7cf;box-shadow:inset 0 0 0 2px #f29a32}
.osp-card.in-deck{border-color:#ef7008;background:#fff0bd;box-shadow:inset 4px 0 #ef7008}
.osp-card.in-deck small{color:#a54800;font-weight:bold}
.osp-release{position:absolute;right:4px;top:4px;width:20px;height:20px;padding:0;border:2px solid #fff;border-radius:3px;background:#ed3318;color:#fff;font:bold 16px/14px Arial;box-shadow:0 0 0 1px #963515;cursor:pointer;z-index:2}
.osp-card>b{margin-right:20px}
/* Use the available lower half instead of compressing the Ouginak passive. */
#osp-root.osp-compact .osp-left{grid-template-rows:minmax(0,46%) minmax(0,48%);align-content:start;gap:12px}
#osp-root.osp-compact .osp-class p{max-height:none;overflow:visible}
#osp-root.osp-compact .osp-class-spells{margin-top:12px}
#osp-root.osp-compact .osp-deck-tabs{margin:9px 0}
#osp-root.osp-compact .osp-deck-slots{gap:7px;margin-top:11px}
#osp-root.osp-compact .osp-rarity-tabs{gap:3px;margin-top:6px}
#osp-root.osp-compact .osp-rarity-tabs button{height:25px;border-radius:9px;font-size:13px;line-height:17px}
#osp-root.osp-compact .osp-results{height:auto}
#osp-root.osp-small .osp-left{grid-template-rows:minmax(0,47%) minmax(0,47%);gap:8px}
#osp-root.osp-small .osp-class-spells{margin-top:7px}
.osp-collection-body{display:grid;grid-template-columns:54px minmax(0,1fr);min-height:0;flex:1}
.osp-collection-body .osp-rarity-tabs{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(8,1fr);gap:5px;margin:13px 5px 10px 0;min-height:0}
.osp-collection-body .osp-rarity-tabs button{width:49px;height:auto;min-height:28px;padding:0 2px}
.osp-collection-body .osp-rarity-tabs button span{display:block;height:13px;line-height:13px;white-space:nowrap}
.osp-collection-body .osp-results{margin:0}
#osp-root.osp-compact .osp-collection-body{grid-template-columns:43px minmax(0,1fr)}
#osp-root.osp-compact .osp-collection-body .osp-rarity-tabs{gap:3px;margin:7px 3px 7px 0}
#osp-root.osp-compact .osp-collection-body .osp-rarity-tabs button{width:40px;height:auto;min-height:22px;padding:0;font-size:10px}
#osp-root.osp-compact .osp-collection-body .osp-rarity-tabs button span{height:10px;line-height:10px}
/* Real spell shortcut bar: the eleven active class/Altered shortcuts can be
reordered here and stay visually identical to the native spell cells. */
.osp-deck{display:flex;flex-direction:column}
.osp-shortcuts{margin-top:auto;padding-top:12px;border-top:3px solid #9c9371}
.osp-shortcut-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.osp-shortcut-title h2{margin:0;font-size:18px;color:#514c3b}
.osp-shortcut-title span{font-size:11px}
.osp-shortcut-slots{display:grid;grid-template-columns:repeat(7,var(--osp-thumb-size));grid-template-rows:repeat(2,var(--osp-thumb-size));justify-content:center;gap:4px}
.osp-shortcut{position:relative;width:var(--osp-thumb-size);height:var(--osp-thumb-size);min-width:var(--osp-thumb-size);min-height:var(--osp-thumb-size);overflow:hidden;border:2px solid #a59a79;border-radius:6px;background:#c9c3a4;display:flex;align-items:center;justify-content:center;color:#8b8368;font-weight:bold}
.osp-shortcut.filled{background:#eee9c9;cursor:grab}
.osp-shortcut.filled:active{cursor:grabbing}
.osp-shortcut>div{position:absolute;inset:0;padding:1px}
.osp-shortcut .osp-icon{width:100%;height:100%}
.osp-shortcut:hover{border-color:#ef7008}
#osp-root.osp-compact .osp-shortcuts{padding-top:7px;border-top-width:2px}
#osp-root.osp-compact .osp-shortcut-title{margin-bottom:4px}
#osp-root.osp-compact .osp-shortcut-title h2{font-size:14px}
#osp-root.osp-compact .osp-shortcut-title span{font-size:9px}
#osp-root.osp-compact .osp-shortcut-slots{gap:2px}
#osp-root.osp-small .osp-shortcut-title span{display:none}
#osp-root.osp-compact .osp-book{--osp-thumb-size:42px}
#osp-root.osp-compact .osp-deck-slots{margin-top:5px;padding-top:3px;padding-bottom:1px}
#osp-root.osp-compact .osp-deck-help{margin-top:2px;white-space:nowrap;font-size:9px}
#osp-root.osp-compact .osp-shortcuts{padding-top:4px}
#osp-root.osp-compact .osp-left{grid-template-rows:minmax(0,43%) minmax(0,57%);gap:8px}
#osp-root.osp-compact .osp-book{--osp-thumb-size:40px}
#osp-root.osp-compact.osp-short .osp-book{--osp-thumb-size:34px}
/* Allocate the deck from content instead of two percentage rows plus a gap
(which exceeded 100% and clipped the bottom shortcut cells). The class passive
retains its own scroll; tiny game windows can scroll the deck as a fallback. */
#osp-root .osp-left{display:flex;flex-direction:column;gap:10px}
#osp-root .osp-class{flex:0 1 auto;max-height:32%;min-height:100px;overflow-y:auto}
#osp-root .osp-deck{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px;padding-bottom:6px}
#osp-root .osp-deck>*{flex-shrink:0}
#osp-root .osp-section-title{flex-wrap:wrap;gap:5px 9px;align-items:center}
.osp-bonus-button{padding:4px 10px;border:2px solid #a94700;border-radius:14px;background:#f66a08;color:white;font-weight:bold;cursor:pointer}
.osp-bonus-card{font-size:15px;line-height:1.45}
.osp-bonus-card h2{padding-right:38px}
.osp-bonus-total{font-weight:bold;color:#a94700}
.osp-bonus-card ul{columns:1;padding-left:24px}
#osp-root.osp-short .osp-class{max-height:25%;min-height:84px}
#osp-root.osp-short .osp-section-title span{display:none}
#osp-root.osp-short .osp-follower-toggle small{display:none}
#osp-root.osp-short .osp-deck-tabs{margin:4px 0}
#osp-root.osp-short .osp-follower-toggle{margin-top:5px;padding:3px 6px}
/* Collection progress: preserve native stars, click targets and scrolling. */
#osp-root .osp-collection-body .osp-rarity-tabs button { flex-shrink: 0; min-height: 62px; }
#osp-root.osp-compact .osp-collection-body .osp-rarity-tabs button { min-height: 54px; }
#osp-root .osp-collection-body .osp-rarity-tabs { overflow-y: auto; grid-template-rows: repeat(8, minmax(62px, 1fr)); }
#osp-root.osp-compact .osp-collection-body .osp-rarity-tabs { grid-template-rows: repeat(8, minmax(54px, 1fr)); }
#osp-root .osp-collection-progress { display: flex; flex-direction: column; gap: 2px; width: 100%; pointer-events: none; line-height: 12px; }
#osp-root .osp-collection-body .osp-rarity-tabs button span.osp-collection-progress { display: flex; height: auto; margin-top: 4px; line-height: 12px; }
#osp-root .osp-collection-progress progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 3px; overflow: hidden; appearance: none; }
#osp-root .osp-collection-progress progress::-webkit-progress-bar { background: #544c35; }
#osp-root .osp-collection-progress progress::-webkit-progress-value { background: #96af42; }
#osp-root .kroma .osp-collection-progress progress::-webkit-progress-value { background: #d4ad48; }
#osp-root .osp-collection-progress small { font: bold 10px Arial, sans-serif; color: #514b32; white-space: nowrap; text-align: center; }
#osp-root .osp-collection-head h1 > .osp-collection-progress { display: inline-flex; width: 100px; margin-left: 12px; vertical-align: middle; }
.osp-shortcut{position:relative}.osp-auto-start-spell{position:absolute;right:1px;top:1px;z-index:3;background:#eee7bd;border:1px solid #958c66;border-radius:3px;line-height:18px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.osp-auto-start-spell input{margin:0;width:16px;height:16px;cursor:pointer}.osp-auto-start-control input:disabled{cursor:default}
.osp-priority-overlay{position:fixed;inset:0;z-index:2147483000;background:#0006;display:flex;align-items:center;justify-content:center;color:#514c3b;font:15px Arial}.osp-priority-dialog{width:420px;max-width:90vw;background:#e9e0b8;border:4px solid #fffdf0;border-radius:16px;box-shadow:0 8px 30px #0008;overflow:hidden}.osp-priority-dialog header{background:#514c3b;color:white;padding:14px 48px 14px 16px;font-weight:bold;position:relative}.osp-priority-dialog p{margin:14px 16px;line-height:1.4}.osp-priority-row{display:flex;align-items:center;justify-content:space-between;margin:8px 16px;padding:10px 12px;border-radius:8px;background:#d2c9a4}.osp-priority-row select{background:#fff9e9;border:1px solid #a69974;border-radius:6px;padding:5px 12px;color:#514c3b}.osp-priority-dialog button{background:#ff8100;border:2px solid #fff6d7;border-radius:9px;color:white;padding:7px 18px;cursor:pointer;font-weight:bold}.osp-priority-close{position:absolute;right:9px;top:7px;padding:2px 8px!important;font-size:22px}.osp-priority-save{display:block;margin:12px auto 18px}.osp-priority-dialog button:disabled{opacity:.55;cursor:wait}.osp-priority-notice{min-height:22px;font-size:13px}
.osp-priority-attitude{display:flex;gap:12px;align-items:center;margin:16px;font-weight:bold}.osp-priority-attitude select{flex:1;padding:7px;background:#fff9e9;color:#514c3b;border:1px solid #a69974;border-radius:6px}.osp-priority-enabled{display:flex;align-items:center;gap:10px;margin:16px;font-weight:bold;cursor:pointer}.osp-priority-enabled input{width:18px;height:18px;accent-color:#ff8100}.osp-priority-help{font-size:13px}.osp-priority-row{gap:12px}.osp-priority-row>span{flex:1}.osp-priority-row select:disabled{opacity:.45}.osp-priority-dialog .osp-priority-icon{width:42px;height:42px;flex:0 0 42px;padding:2px;border-radius:8px;background:#aaa080;border:2px solid #fff6d7;position:relative}.osp-priority-icon object,.osp-priority-icon img{width:34px;height:34px;pointer-events:none;display:block}.osp-priority-icon:hover{border-color:#ff8100}.osp-priority-dialog{max-height:94vh;overflow:auto}
/* new client: the book is a custom window inside #ui; spell icons are canvases instead of Flash