/* Game UIs added in the AAA pass (Spire v2, Pit/Dots/Phalanx/Bet Inc
   extras, Career). Loaded after app.css + sys.css. */

/* =============================== SPIRE ================================== */
.sp2 { position: relative; }
.sp2-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.sp2-chip { font: 800 11px system-ui, sans-serif; letter-spacing: .08em; padding: 5px 9px; border-radius: 999px; background: #140e08; border: 1px solid var(--c, #4a3010); color: var(--c, var(--amber)); }
.sp2-hpbar { position: relative; flex: 1 1 140px; max-width: 220px; height: 22px; border-radius: 999px; background: #1a0c0c; border: 1px solid #4a1818; overflow: hidden; }
.sp2-hpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a2030, #e04040); transition: width .35s ease; }
.sp2-hpbar b { position: relative; display: block; text-align: center; font-size: 11px; line-height: 22px; }
.sp2-pots { display: inline-flex; gap: 4px; }
.sp2-pot { width: 30px; height: 30px; padding: 0; font-size: 16px; border-radius: 50%; background: #120d18 !important; border: 1px solid #5a3a7a !important; display: inline-grid; place-items: center; }
.sp2-pot.empty { border-style: dashed !important; opacity: .4; }
.sp2-small { padding: 6px 9px; font-size: 12px; }
.sp2-relics { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sp2-relic { width: 28px; height: 28px; display: grid; place-items: center; font-size: 17px; border-radius: 8px; background: #16110a; border: 1px solid #3a2a14; cursor: help; }
.sp2-title { font: 900 22px/1.1 system-ui, sans-serif; letter-spacing: .14em; color: var(--amber); text-align: center; margin: 8px 0; }
.sp2-title.gold { color: #ffd700; text-shadow: 0 0 18px rgba(255,215,0,.5); }
.sp2-title.red { color: #ff6060; text-shadow: 0 0 18px rgba(255,60,60,.4); }
.sp2-sub { font: 800 11px system-ui, sans-serif; letter-spacing: .16em; color: var(--amber); margin: 12px 0 6px; text-align: center; }

/* character select */
.sp2-select { text-align: center; }
.sp2-chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.sp2-charcard { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 14px 10px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #0c0a08), #0a0908); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.sp2-charcard b { color: var(--c); letter-spacing: .18em; }
.sp2-charcard select { padding: 4px 6px; font-size: 12px; }

/* hero figures: CSS-drawn, tinted per character/skin */
.sp2-hero-art { --h: #c4483a; width: 84px; height: 104px; position: relative; margin: 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.sp2-hero-art.sp-red { --h: #c4483a; } .sp2-hero-art.sp-green { --h: #3dba6a; } .sp2-hero-art.sp-gold { --h: #e0c35a; }
.sp2-hero-art::before { content: ""; position: absolute; left: 24px; right: 24px; top: 4px; height: 34px; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 35% 30%, #f3d9b0, #b08058 70%); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2); }
.sp2-hero-art::after { content: ""; position: absolute; left: 12px; right: 12px; top: 36px; bottom: 0; border-radius: 18px 18px 8px 8px; background: linear-gradient(180deg, var(--h), color-mix(in srgb, var(--h) 45%, #000)); box-shadow: inset 0 8px 0 rgba(255,255,255,.12), 0 0 22px color-mix(in srgb, var(--h) 40%, transparent); }
.sp2-hero-art.st-wrath { filter: drop-shadow(0 0 16px #ff3030); }
.sp2-hero-art.st-calm { filter: drop-shadow(0 0 16px #60b0ff); }
.sp2-hero-art.st-divinity { filter: drop-shadow(0 0 22px #ffd700); }

/* map */
.sp2-maphead { text-align: center; font-size: 12px; letter-spacing: .12em; color: #cfc4a8; margin-bottom: 6px; }
.sp2-map { position: relative; height: min(520px, 70vh); border-radius: 14px; background: radial-gradient(ellipse at 50% 100%, rgba(160,80,40,.18), transparent 60%), linear-gradient(180deg, #120c14, #0a0808); border: 1px solid #3a2a14; overflow: hidden; }
.sp2-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp2-map line { stroke: #5a4020; stroke-width: .5; stroke-dasharray: 1.2 1; vector-effect: non-scaling-stroke; }
.sp2-map line.walked { stroke: #ffb020; stroke-dasharray: none; stroke-width: 2.5; }
.sp2-node { position: absolute; transform: translate(-50%, -50%); width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 17px; background: #1a1410 !important; border: 2px solid #4a3418 !important; opacity: .55; }
.sp2-node.done { opacity: .35; filter: grayscale(.6); }
.sp2-node.here { opacity: 1; border-color: #ffb020 !important; }
.sp2-node.can { opacity: 1; border-color: #ffe08a !important; box-shadow: 0 0 0 4px rgba(255,224,138,.15), 0 0 18px rgba(255,176,32,.55); animation: sp2-pulse 1.3s ease-in-out infinite; cursor: pointer; }
.sp2-node.boss { width: 58px; height: 58px; font-size: 28px; border-color: #8a2040 !important; }
.sp2-node.t-elite { border-color: #8a3030 !important; }
@keyframes sp2-pulse { 50% { transform: translate(-50%, -50%) scale(1.12); } }

/* combat stage */
.sp2-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; min-height: 250px; padding: 18px 14px 12px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 70% 10%, rgba(120,60,160,.18), transparent 60%), linear-gradient(180deg, #120c16, #070508); border: 1px solid #2a1a30; transition: box-shadow .3s; }
.sp2-stage.k-elite { background: radial-gradient(ellipse at 70% 0%, rgba(200,140,40,.25), transparent 55%), linear-gradient(180deg, #1a1208, #0c0804); }
.sp2-stage.k-boss { background: radial-gradient(ellipse at 70% 0%, rgba(180,30,80,.35), transparent 55%), linear-gradient(180deg, #1a0610, #070308); }
.sp2-stage.stance-wrath { box-shadow: inset 0 0 60px rgba(255,40,40,.35); }
.sp2-stage.stance-calm { box-shadow: inset 0 0 60px rgba(60,140,255,.3); }
.sp2-stage.stance-divinity { box-shadow: inset 0 0 70px rgba(255,215,0,.4); }
.sp2-fighter { text-align: center; position: relative; }
.sp2-foe-art { width: 110px; height: 110px; margin: 0 auto 6px; border-radius: 46% 46% 40% 40%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--foe, #8a4a3a) 80%, #fff), var(--foe, #8a4a3a) 45%, color-mix(in srgb, var(--foe, #8a4a3a) 30%, #000) 80%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--foe, #b04040) 45%, transparent); animation: sp2-idle 2.6s ease-in-out infinite; }
.sp2-foe-art:not(.jaw):not(.cult):not(.louse):not(.nob):not(.champ)::before { content: ""; position: absolute; width: 12px; height: 12px; left: 30%; top: 32%; border-radius: 50%; background: #ffe08a; box-shadow: 30px 0 0 #ffe08a; }
.sp2-foe-art:not(.jaw):not(.cult):not(.louse):not(.nob):not(.champ)::after { content: ""; position: absolute; left: 30%; right: 30%; top: 60%; height: 8px; border-radius: 6px; background: rgba(0,0,0,.6); }
.k-boss .sp2-foe-art { width: 150px; height: 150px; }
@keyframes sp2-idle { 50% { transform: translateY(-4px) scale(1.02, .98); } }
.sp2-name { letter-spacing: .16em; font-size: 12px; color: #e8d6ff; margin-bottom: 4px; }
.sp2-intent { display: inline-block; font: 900 15px system-ui, sans-serif; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid #5a3a20; margin-bottom: 6px; animation: sp2-bob 1.4s ease-in-out infinite; }
.sp2-intent.k-atk, .sp2-intent.k-mix { color: #ff8a6a; border-color: #8a3a2a; }
.sp2-intent.k-def { color: #9cf; } .sp2-intent.k-buff { color: #ffd27a; } .sp2-intent.k-debuff { color: #c9a4ff; }
@keyframes sp2-bob { 50% { transform: translateY(-3px); } }
.sp2-bar { position: relative; height: 16px; border-radius: 999px; background: #1a1220; border: 1px solid #3a2040; overflow: visible; margin: 4px 6px; }
.sp2-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #8a2030, #e04040); transition: width .35s ease; }
.sp2-bar.you i { background: linear-gradient(90deg, #206030, #4cda7a); }
.sp2-bar b { position: relative; font-size: 10px; line-height: 16px; display: block; }
.sp2-block { position: absolute; left: -10px; top: -7px; font: 900 11px system-ui, sans-serif; font-style: normal; background: #16243a; border: 1px solid #5a8ad0; color: #9cf; padding: 3px 6px; border-radius: 8px; box-shadow: 0 0 12px rgba(80,140,220,.5); }
.sp2-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 20px; margin-top: 4px; }
.sp2-status i { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.45); border: 1px solid #3a2a2a; cursor: help; }
.sp2-status i.stance { color: #ffd27a; border-color: #8a6030; }
.sp2-log { grid-column: span 2; font-size: 11px; color: #b8a888; min-height: 34px; }
.sp2-banner-host { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; z-index: 3; }
.sp2-banner { grid-area: 1/1; text-align: center; padding: 10px 40px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.8), transparent); animation: sp2-banner 1.2s ease forwards; }
.sp2-banner b { display: block; font: 900 26px system-ui, sans-serif; letter-spacing: .3em; color: #fff; }
.sp2-banner span { font-size: 12px; opacity: .8; }
.sp2-banner.gold b { color: #ffd700; } .sp2-banner.red b { color: #ff6060; } .sp2-banner.foe b { color: #ff9a7a; }
.sp2-banner.wrath b { color: #ff4040; } .sp2-banner.calm b { color: #7ab8ff; } .sp2-banner.divinity b { color: #ffd700; }
@keyframes sp2-banner { 0% { opacity: 0; transform: scaleX(.3); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }

/* controls + hand */
.sp2-controls { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; flex-wrap: wrap; }
.sp2-energy { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; grid-auto-flow: column; background: radial-gradient(circle at 35% 30%, #ffe08a, #ff8a00 55%, #7a3000); color: #1a0c00; box-shadow: 0 0 22px rgba(255,160,0,.55); }
.sp2-energy b { font-size: 22px; } .sp2-energy span { font-size: 11px; align-self: end; margin-bottom: 12px; }
.sp2-end { margin-left: auto; padding: 12px 18px; }
.sp2-hand { display: flex; justify-content: center; gap: 0; padding: 26px 8px 8px; min-height: 190px; perspective: 800px; }
.sp2-hand .sp2-card { margin: 0 -10px; transform: rotate(var(--rot)) translateY(var(--lift)); transform-origin: 50% 120%; transition: transform .15s ease, box-shadow .15s; }
.sp2-hand .sp2-card:hover, .sp2-hand .sp2-card.pad-focus { transform: translateY(-26px) scale(1.12); z-index: 5; box-shadow: 0 14px 30px rgba(0,0,0,.6); }
@media (max-width: 600px) { .sp2-hand { flex-wrap: wrap; gap: 6px; } .sp2-hand .sp2-card { margin: 0; transform: none; } }

.sp2-card { position: relative; width: 112px; min-height: 158px; padding: 8px 8px 10px; border-radius: 12px; cursor: pointer; text-align: center; flex: 0 0 auto;
  background: linear-gradient(180deg, #221a14, #120d0a); border: 2px solid #5a4020; color: var(--text); user-select: none; }
.sp2-card.atk { border-color: #a04030; background: linear-gradient(180deg, #2a1410, #140a08); }
.sp2-card.sk { border-color: #3060a0; background: linear-gradient(180deg, #121a2a, #0a0e16); }
.sp2-card.pw { border-color: #a070c0; background: linear-gradient(180deg, #221430, #110a18); }
.sp2-card.curse, .sp2-card.status { border-color: #444; background: linear-gradient(180deg, #1a1a1a, #0c0c0c); cursor: not-allowed; }
.sp2-card.r-uncommon { box-shadow: inset 0 0 0 1px #6aa0e0; } .sp2-card.r-rare { box-shadow: inset 0 0 0 1px #ffd700, 0 0 12px rgba(255,215,0,.25); }
.sp2-card.up b { color: #7ef08a; }
.sp2-card.dim { filter: grayscale(.6) brightness(.7); }
.sp2-cost { position: absolute; left: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 900 13px system-ui, sans-serif; background: radial-gradient(circle at 35% 30%, #ffe08a, #ff8a00 60%, #7a3000); color: #1a0c00; border: 2px solid #1a0c00; }
.sp2-art { font-size: 30px; line-height: 1.2; margin: 2px 0; }
.sp2-card b { display: block; font-size: 12px; }
.sp2-type { font-size: 8px; letter-spacing: .2em; opacity: .55; margin: 2px 0; }
.sp2-card p { font-size: 10.5px; line-height: 1.3; color: #d8c8a8; margin: 4px 0 0; }
.sp2-ghost { position: fixed; z-index: 76; pointer-events: none; }

/* rooms: rewards, shop, rest, events */
.sp2-room { text-align: center; padding: 10px 4px; }
.sp2-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0; }
.sp2-pick.scroll { max-height: 58vh; overflow: auto; padding: 14px 4px; }
.sp2-reward { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px auto; max-width: 420px; width: 100%; background: #16110a !important; color: var(--text) !important; border: 1px solid #5a4020 !important; }
.sp2-reward.big { width: 180px; min-height: 110px; justify-content: center; font-size: 22px; }
.sp2-reward.big b { font-size: 13px; }
.sp2-reward .tiny { font-weight: 400; opacity: .75; }
.sp2-shopcard { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp2-shopcard em, .sp2-shopitem em { font-style: normal; font-weight: 800; color: #ffd700; font-size: 12px; }
.sp2-shopcard.sold { opacity: .3; }
.sp2-shoprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sp2-shopitem { display: flex; flex-direction: column; gap: 4px; background: #16110a !important; color: var(--text) !important; border: 1px solid #5a4020 !important; font-size: 13px; }
.sp2-shopitem.sold { opacity: .3; text-decoration: line-through; }
.sp2-event-art { font-size: 64px; filter: drop-shadow(0 0 20px rgba(255,176,32,.4)); animation: sp2-idle 3s ease-in-out infinite; }
.sp2-evopts { display: flex; flex-direction: column; gap: 8px; max-width: 460px; margin: 10px auto; }
.sp2-evopts button { text-align: left; }
.sp2-msg { color: #ffd27a; font-style: italic; }
.sp2-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 420px; margin: 10px auto; font-size: 12px; }
.sp2-statgrid span { background: #140e08; border: 1px solid #3a2a14; border-radius: 8px; padding: 6px; }
.sp2-statgrid b { display: block; font-size: 16px; color: var(--amber); }
.sp2-modal { position: fixed; inset: 0; z-index: 65; background: rgba(4,5,8,.82); display: grid; place-items: center; padding: 16px; }
.sp2-modal-box { width: min(900px, 100%); background: #0e0c0a; border: 1px solid #4a3010; border-radius: 16px; padding: 14px; }

/* ================================= PIT ==================================== */
.pit-runs { display: flex; flex-direction: column; gap: 4px; }
.pit-run { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; font-size: 12px; padding: 5px 8px; border-radius: 8px; background: #120d09; border: 1px solid #2a1d10; }
.pit-run.won { border-color: #8a7020; background: linear-gradient(90deg, rgba(255,215,0,.08), #120d09); }
.pit-run > span:nth-child(2) { display: flex; gap: 3px; flex-wrap: wrap; }
.pit-run > span:nth-child(2) i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pit-run > span.tiny { grid-column: 1 / 3; }
.pit-run button { grid-row: 1 / 3; grid-column: 3; padding: 4px 8px; font-family: ui-monospace, Consolas, monospace; }
.pit-chip.syn { background: linear-gradient(135deg, #d32ce6, #8847ff); color: #fff; }

/* =============================== PHALANX ================================== */
.px-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.px-modes button { background: #160f08; color: var(--amber); border: 1px solid #4a3010; font-size: 12px; padding: 8px 12px; }
.px-modes button.on { background: linear-gradient(135deg, var(--amber), var(--amber2)); color: #140e04; }
.px-panel { background: #0e0c0a; border: 1px solid #3a2a14; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.px-panel .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.px-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0; }
.px-lvl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #161008 !important; color: var(--text) !important; border: 1px solid #4a3010 !important; font-size: 12px; }
.px-lvl span { font-size: 10px; opacity: .7; font-weight: 600; }
.px-lvl.on { border-color: var(--amber) !important; box-shadow: 0 0 12px rgba(255,176,32,.3); }
.px-lvl.lock { opacity: .4; }
.px-pzgrid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.px-pzgrid button.done { color: #7fe0a0; border-color: #2a6a40; }
.px-pzgrid button.on { border-color: var(--amber); color: var(--amber); }
.px-review { margin-bottom: 10px; }
#px-graph { width: 100%; height: 90px; border-radius: 8px; margin: 6px 0; display: block; }
.px-acc { display: flex; gap: 16px; font-size: 12px; }
.px-acc b { color: var(--amber); font-size: 16px; }
.px-keys { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.mk.blunder, .px-moves .mk.blunder { color: #ff6060 !important; }
.mk.mistake, .px-moves .mk.mistake { color: #ff9a40 !important; }
.mk.dubious, .px-moves .mk.dubious { color: #e0c040 !important; }
.mk.best, .px-moves .mk.best { color: #7fe0a0 !important; }

/* =============================== BET INC ================================== */
.bi-tools { justify-content: center; }
.bi-boost { text-align: center; font: 800 12px system-ui, sans-serif; color: #ffd700; margin: 4px 0; animation: sp2-bob 1.2s ease-in-out infinite; }
.bi-event { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #1e1608, #120c06); border: 1px solid #8a6a20; box-shadow: 0 0 20px rgba(255,176,32,.2); animation: tab-in .3s ease-out; }
.bi-event b { color: #ffd700; letter-spacing: .08em; }
.bi-event p { margin: 4px 0 6px; font-size: 13px; }
.bi-taxi { position: absolute; bottom: 18%; left: -60px; font-size: 34px; background: none !important; border: 0 !important; padding: 0; z-index: 5; filter: drop-shadow(0 0 12px #ffd700); animation: bi-drive 9s linear forwards; cursor: pointer; }
@keyframes bi-drive { to { left: calc(100% + 60px); } }
.bi-panel { width: min(760px, calc(100vw - 32px)); max-height: 86vh; overflow: auto; text-align: left; }
.bi-tree3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bi-branch { display: flex; flex-direction: column; gap: 6px; }
.bi-brname { font: 900 11px system-ui, sans-serif; letter-spacing: .2em; color: var(--amber); text-align: center; }
.bi-node { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #16110a !important; color: var(--text) !important; border: 1px solid #5a4020 !important; font-size: 12px; }
.bi-node span { font-size: 11px; opacity: .8; font-weight: 500; }
.bi-node em { font-style: normal; font-size: 11px; color: #ffd700; }
.bi-node.max { border-color: #3a8a40 !important; } .bi-node.max em { color: #7fe0a0; }
.bi-node.locked { opacity: .45; }
.bi-mgrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.bi-mgr { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: #16110a !important; color: var(--text) !important; border: 1px solid #5a4020 !important; }
.bi-mgr span { font-size: 11px; opacity: .8; font-weight: 500; }
.bi-mgr .bi-mgr-i { font-size: 30px; opacity: 1; }
.bi-mgr em { font-style: normal; font-size: 11px; color: #ffd700; }
.bi-mgr.hired { border-color: #6a6a30 !important; } .bi-mgr.on { border-color: #3dba6a !important; box-shadow: 0 0 14px rgba(61,186,106,.25); } .bi-mgr.on em { color: #7fe0a0; }
.bi-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.bi-statgrid span { background: #140e08; border: 1px solid #3a2a14; border-radius: 8px; padding: 6px 8px; font-size: 11px; }
.bi-statgrid b { display: block; font-size: 15px; color: var(--amber); }
#bi-graph { width: 100%; height: 120px; background: #0c0a08; border-radius: 8px; }

/* ================================ DOTS ==================================== */
.dots-editor { position: fixed; inset: 0; z-index: 64; background: rgba(4,5,8,.82); display: grid; place-items: center; padding: 12px; }
.dots-editor.hidden { display: none; }
.de-box { width: min(620px, 100%); max-height: 90vh; overflow: auto; background: #0e1020; border: 1px solid #3a4a7a; border-radius: 16px; padding: 12px; }
.de-box .row { display: flex; justify-content: space-between; align-items: center; }
.de-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: 12px; }
.de-row input { width: 64px; padding: 6px; font-size: 12px; }
.de-row #de-name { width: 140px; }
.de-row i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.de-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.de-tools button { min-width: 40px; padding: 8px 10px; font-size: 11px; background: #1a2040; color: #fff; border: 2px solid transparent; }
.de-tools button.on { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.4); }
.de-grid { display: grid; gap: 4px; margin: 10px auto; max-width: 420px; }
.de-cell { aspect-ratio: 1; padding: 0; border-radius: 50%; font-size: 14px; color: #fff; border: 2px solid rgba(0,0,0,.3); }
.de-cell.x-ice { box-shadow: 0 0 0 4px rgba(207,232,244,.8); }
.de-cell.x-anc { box-shadow: 0 0 0 4px #8a7a68; }
.de-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.de-list span { display: inline-flex; gap: 2px; }

/* =============================== CAREER =================================== */
.lv-chip { position: relative; overflow: hidden; min-width: 58px; padding: 6px 9px !important; font: 900 11px system-ui, sans-serif !important; letter-spacing: .06em; }
.lv-chip b { position: relative; z-index: 1; }
.lv-chip i { position: absolute; left: 0; bottom: 0; height: 3px; background: #7fe0c4; transition: width .5s ease; }
.ach-pop { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 73; display: flex; gap: 12px; align-items: center; max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, #1a1608, #0c0a06); border: 1px solid #ffd700; box-shadow: 0 0 30px rgba(255,215,0,.3);
  transform: translateX(120%); transition: transform .4s cubic-bezier(.2,1.3,.4,1); }
.ach-pop.on { transform: none; }
.ach-pop .ach-i { font-size: 34px; }
.ach-pop em { display: block; font: 800 9px system-ui, sans-serif; letter-spacing: .18em; color: #ffd700; font-style: normal; }
.ach-pop b { display: block; font-size: 15px; }
.ach-pop small { opacity: .75; font-size: 12px; }
.cr-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.cr-level { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--amber) 70%, #fff), var(--amber2) 70%); color: #140e04; box-shadow: 0 0 26px var(--glow); }
.cr-level b { font: 900 28px/1 system-ui, sans-serif; } .cr-level span { font: 800 8px system-ui, sans-serif; letter-spacing: .2em; }
.cr-xp .row { display: flex; justify-content: space-between; font-size: 12px; }
.cr-xpbar { height: 10px; border-radius: 999px; background: #1a140c; margin: 6px 0; overflow: hidden; }
.cr-xpbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber2), var(--amber)); transition: width .6s ease; }
.cr-track { display: flex; gap: 6px; }
.cr-track span { font-size: 11px; padding: 3px 7px; border-radius: 8px; background: #140e08; border: 1px solid #3a2a14; }
.cr-track b { color: var(--amber); margin-right: 3px; }
.cr-ach { text-align: center; } .cr-ach b { display: block; font: 900 26px system-ui, sans-serif; color: #ffd700; } .cr-ach span { font-size: 9px; letter-spacing: .14em; opacity: .7; }
@media (max-width: 600px) { .cr-head { grid-template-columns: auto 1fr; } .cr-ach { grid-column: span 2; } }
.cr-charts { margin-top: 12px; }
/* single-series bars: one accent hue, 4px rounded data ends, 2px gaps, quiet axis */
.cr-vbars { display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.cr-vbar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: default; }
.cr-vbar i { width: 100%; max-width: 14px; background: var(--amber); border-radius: 4px 4px 0 0; opacity: .85; }
.cr-vbar:hover i, .cr-vbar:focus i { opacity: 1; box-shadow: 0 0 10px var(--glow); }
.cr-vbar span { position: absolute; bottom: -16px; font-size: 8px; opacity: .5; }
.cr-vbar:not(:nth-child(5n)) span { display: none; }
.cr-hbars { display: flex; flex-direction: column; gap: 6px; }
.cr-hbar { display: grid; grid-template-columns: 80px 1fr 44px; gap: 8px; align-items: center; font-size: 11px; }
.cr-hbar div { height: 10px; background: rgba(255,255,255,.04); border-radius: 0 4px 4px 0; }
.cr-hbar i { display: block; height: 100%; background: var(--amber); border-radius: 0 4px 4px 0; }
.cr-hbar b { text-align: right; color: #cfc4a8; font-weight: 600; }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.cr-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.cr-stat .row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.cr-stat b { color: var(--text); }
.card > .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.cr-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-filter button.on { color: var(--amber); border-color: var(--amber); }
.cr-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; }
.cr-trophy { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; background: #0e0c0a; border: 1px solid #2a2014; opacity: .6; }
.cr-trophy.have { opacity: 1; border-color: #8a7020; background: linear-gradient(180deg, rgba(255,215,0,.07), #0e0c0a); }
.cr-ti { font-size: 26px; filter: grayscale(1); } .cr-trophy.have .cr-ti { filter: none; }
.cr-trophy b { font-size: 13px; } .cr-trophy small { font-size: 11px; opacity: .75; }
.cr-trophy em { font-style: normal; font-size: 10px; opacity: .6; }
.cr-prog { height: 4px; border-radius: 999px; background: #1a140c; overflow: hidden; } .cr-prog i { display: block; height: 100%; background: var(--amber); }
.cr-slot { margin-top: 10px; } .cr-sub { font: 800 10px system-ui, sans-serif; letter-spacing: .16em; color: var(--amber); margin-bottom: 4px; }
.cr-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.cr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #120e0a !important; color: var(--text) !important; border: 1px solid #3a2a14 !important; font-size: 12px; }
.cr-item i { width: 42px; height: 22px; border-radius: 6px; }
.cr-item em { font-style: normal; font-size: 10px; color: #ffd700; }
.cr-item.owned em { color: #7fe0c4; } .cr-item.on { border-color: var(--amber) !important; box-shadow: 0 0 12px var(--glow); } .cr-item.locked { opacity: .45; }
.av.fr { outline: 2px solid var(--fr, var(--amber)); outline-offset: 1px; }
.av.fr-prism { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(255,120,220,.8); animation: prism 3s linear infinite; }
@keyframes prism { to { filter: hue-rotate(360deg); } }

/* ============================ HOME PANEL ================================= */
.home-me { margin-top: 12px; }
.hm-askrow { display: flex; gap: 6px; }
.hm-askrow input { flex: 1; min-width: 0; }
.hm-remrow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.hm-remrow input[type=datetime-local] { padding: 8px; font-size: 12px; }
@media (max-width: 560px) { .hm-remrow { grid-template-columns: 1fr; } }
.hm-sugs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.hm-answer { padding: 10px 12px; border-radius: 12px; background: #0c0e14; border: 1px solid #2a3a50; font-size: 13px; line-height: 1.5; white-space: normal; }
.hm-answer.busy { opacity: .6; animation: st-blink 1s infinite; }
.hm-grid { margin-top: 12px; }
.hm-grid .row { display: flex; justify-content: space-between; font-size: 12px; }
.hm-quests { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-top: 4px; }
.hm-quests em { font-style: normal; color: var(--amber); font-size: 10px; }
.hm-quests .good { color: #7fe0a0; }
.hm-season { display: flex; gap: 4px; margin-top: 4px; }
.hm-season i { flex: 1; height: 8px; border-radius: 4px; background: #1a140c; border: 1px solid #3a2a14; }
.hm-season i.on { background: var(--amber); border-color: var(--amber); }
.hm-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 220px; overflow: auto; }
.hm-item { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 12px; }
.hm-item.done span { text-decoration: line-through; opacity: .5; }
/* components that set their own display must still honour .hidden */
.dots-editor.hidden, .px-panel.hidden, .bi-event.hidden, .bi-boost.hidden { display: none !important; }

/* ============================== CASINO (BET) ============================== */
.cs-jackpot { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px; align-items: baseline; padding: 10px 14px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,215,0,.16), rgba(255,120,0,.06)); border: 1px solid #8a7020; box-shadow: 0 0 24px rgba(255,215,0,.15); }
.cs-jackpot span { font: 900 11px system-ui, sans-serif; letter-spacing: .2em; color: #ffd700; }
.cs-jackpot b { font: 900 26px system-ui, sans-serif; color: #fff; text-shadow: 0 0 14px rgba(255,215,0,.6); }
.cs-jackpot em { font-style: normal; opacity: .7; font-size: 12px; }
.cs-jackpot small { justify-self: end; font-size: 11px; opacity: .7; text-align: right; }
@media (max-width: 560px) { .cs-jackpot { grid-template-columns: auto auto auto; } .cs-jackpot small { grid-column: 1 / -1; justify-self: start; text-align: left; } }
.cs-crash-card, .cs-scratch-card { margin: 12px 0; padding: 12px; border-radius: 14px; background: #0c0e14; border: 1px solid #2a3040; }
#cs-crash { width: 100%; max-width: 720px; display: block; margin: 6px auto; border-radius: 12px; border: 1px solid #2a3040; }
.cs-controls { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 6px 0; }
.cs-controls input { width: 110px; padding: 7px; font-size: 13px; }
.cs-go { flex: 1; min-width: 180px; padding: 14px; font-size: 15px; }
.cs-go.out:not([disabled]) { background: linear-gradient(135deg, #3dba6a, #1f8a4a); color: #fff; animation: sp2-bob 0.8s ease-in-out infinite; }
.cs-go[disabled] { opacity: .6; }
.cs-players { display: flex; flex-wrap: wrap; gap: 5px; font-size: 11px; margin: 6px 0; }
.cs-players span { padding: 3px 8px; border-radius: 999px; background: #161a24; border: 1px solid #2a3040; }
.cs-players span.won { border-color: #3dba6a; color: #7fe0a0; }
.cs-players span.lost { border-color: #8a2a2a; color: #f19a9a; text-decoration: line-through; }
.cs-hist { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-hist i { font-style: normal; font: 800 10px ui-monospace, Consolas, monospace; padding: 3px 6px; border-radius: 6px; background: #1a1010; color: #f19a9a; }
.cs-hist i.mid { background: #101a14; color: #7fe0a0; }
.cs-hist i.hi { background: #1a1608; color: #ffd700; }
.cs-scratch { display: grid; grid-template-columns: repeat(3, minmax(0, 88px)); gap: 8px; justify-content: center; margin: 10px 0; }
.cs-scratch .cs-tile { aspect-ratio: 1; font-size: 40px !important; line-height: 1; padding: 0; border-radius: 12px; background: #fff8e8 !important; color: #140e04 !important; border: 2px solid #c9a227 !important; }
.cs-scratch .cs-tile.covered { background: repeating-linear-gradient(45deg, #b8b8c0 0 8px, #9a9aa4 8px 16px) !important; color: #4a4a50 !important; font-size: 24px !important; cursor: pointer; }
.cs-tile.covered:hover { filter: brightness(1.1); }
#cs-scratch-go { width: 100%; }
.cs-vip { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 14px; margin-bottom: 10px; border-radius: 12px; background: #0f1118; border: 1px solid #2a3040; }
.cs-vip-badge { font: 900 12px system-ui, sans-serif; letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; background: #3a2616; color: #e0a070; }
.cs-vip-badge.t1 { background: #2a2e36; color: #d8dee8; }
.cs-vip-badge.t2 { background: #3a3010; color: #ffd700; }
.cs-vip-badge.t3 { background: #10303a; color: #8fe8ff; }
.cs-vip-badge.t4 { background: linear-gradient(135deg, #30206a, #10406a); color: #fff; box-shadow: 0 0 14px rgba(140,180,255,.5); }
.cs-vip-bar { height: 8px; border-radius: 999px; background: #1a1e28; overflow: hidden; }
.cs-vip-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9a227, #ffd700); }
.cs-vip small { grid-column: 1 / 3; font-size: 11px; opacity: .7; }
.cs-vip button { grid-row: 1 / 3; grid-column: 3; padding: 8px 12px; font-size: 12px; }
.cs-vip button[disabled] { opacity: .45; filter: grayscale(1); cursor: default; }
.bet-sides { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.bet-sides select { padding: 4px 6px; font-size: 12px; }
.bet-sub { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; margin: 0 4px; border-radius: 10px; border: 1px dashed transparent; }
.bet-sub.on { border-color: #ffd700; background: rgba(255,215,0,.06); }
.bet-sub small { font-size: 11px; opacity: .8; }
.bet-sub.win small, .bet-sub.blackjack small { color: #7fe0a0; }
.bet-sub.lose small, .bet-sub.bust small { color: #f19a9a; }
.bet-side-res { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.bet-side-res span { padding: 3px 8px; border-radius: 999px; background: #161a24; border: 1px solid #2a3040; }
.bet-side-res span.won { border-color: #ffd700; color: #ffd700; }
#bet-acts button[disabled] { opacity: .4; }
#bet-acts button.hidden { display: none; }
.bet-bots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.bet-bot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,215,0,.18); min-width: 96px; }
.bet-bot.folded { opacity: .38; }
.bet-bot-name { font: 800 11px system-ui, sans-serif; color: #ffe8a8; }
.bet-bot small { font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .08em; min-height: 12px; }
.bet-hand.mini .bet-card { transform: scale(.62); margin: -14px -10px; }
.bet-chat { font-size: 12px; opacity: .85; margin: 4px 0; }
.bet-chat div { padding: 2px 0; }
.cs-duel-card, .cs-king-card, .cs-me-card { margin: 12px 0; padding: 12px; border-radius: 14px; background: #0c0e14; border: 1px solid #2a3040; }
.cs-duel-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cs-duel-form input { flex: 1; min-width: 120px; padding: 7px; }
.cs-duel-form select { padding: 6px; }
.cs-duel-list .cs-duel { display: flex; gap: 6px; align-items: center; padding: 6px 8px; margin: 4px 0; border-radius: 10px; background: #131722; font-size: 12px; }
.cs-duel-list .cs-duel span { flex: 1; }
.cs-duel.in { background: linear-gradient(90deg, rgba(255,215,0,.12), #131722); border: 1px solid #6a5418; }
.cs-duel-recent div { font-size: 11px; padding: 3px 0; opacity: .85; border-top: 1px solid #1a1e28; }
.cs-duel-recent .won b { color: #7fe0a0; }
.cs-duel-recent .lost b { color: #f19a9a; }
.cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-two > div { margin: 0; }
@media (max-width: 720px) { .cs-two { grid-template-columns: 1fr; } }
.cs-king-crown { font-size: 13px; padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: linear-gradient(90deg, rgba(255,215,0,.14), transparent); }
.cs-king-card .row.is-me { background: rgba(127,224,196,.08); }
.pos { color: #7fe0a0; }
.neg { color: #f19a9a; }
.cs-me-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin: 6px 0; }
.cs-me-hist { max-height: 220px; overflow-y: auto; font-size: 11px; }
.cs-me-hist div { display: grid; grid-template-columns: 1fr auto 34px; gap: 8px; padding: 3px 0; border-top: 1px solid #1a1e28; }
.cs-me-hist i { font-style: normal; opacity: .5; text-align: right; }
.im-card, .pl-card { margin: 12px 0; padding: 12px; border-radius: 14px; background: #0c0e14; border: 1px solid #2a3040; }
.im-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 320px; margin: 8px auto; }
.im-grid .im-tile { aspect-ratio: 1; padding: 0; font-size: 22px !important; border-radius: 10px !important; background: #1a2030 !important; color: #fff !important; border: 1px solid #2e3850 !important; transition: transform .08s; }
.im-grid .im-tile:not([disabled]):hover { transform: translateY(-2px); background: #243048 !important; cursor: pointer; }
.im-grid .im-tile.open { background: #10302a !important; border-color: #3dba6a !important; }
.im-grid .im-tile.bomb { background: #2a1010 !important; border-color: #8a2a2a !important; }
.im-grid .im-tile.hit { background: #6a1010 !important; }
.im-grid .im-tile[disabled] { opacity: 1; }
.im-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.im-controls select { padding: 6px; }
.im-go { flex: 1; min-width: 120px; padding: 10px; }
.im-go.out:not([disabled]) { background: linear-gradient(135deg, #3dba6a, #1f8a4a) !important; color: #fff !important; }
#pl-canvas { width: 100%; max-width: 480px; display: block; margin: 6px auto; border-radius: 12px; border: 1px solid #2a3040; }
#pl-hist i { color: #0c0e14; }
.cs-wager-card { margin: 12px 0; padding: 12px; border-radius: 14px; background: #0c0e14; border: 1px solid #2a3040; }
.cs-wager-card code { font-size: 11px; background: #161a24; padding: 1px 5px; border-radius: 4px; }
.cs-wager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; margin: 4px 0; border-radius: 10px; background: #131722; font-size: 12px; }
.cs-wager span { flex: 1; min-width: 200px; }
.cs-wager.done { opacity: .6; background: none; }

/* ============================== OBSERVATORY ============================== */
.obs-desk { padding: 16px 18px 28px; max-width: 1280px; display: grid; gap: 14px; }
.obs-status { font-size: 11px; opacity: .65; letter-spacing: .06em; }
.obs-status.bad { color: #f19a9a; opacity: 1; }
.obs-wait { padding: 24px 0; opacity: .7; letter-spacing: .1em; }
.obs-wait.bad { color: #f19a9a; }
.obs-dots::after { content: "…"; animation: obs-blink 1s steps(3) infinite; }
@keyframes obs-blink { 50% { opacity: .2; } }
.obs-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.obs-totals div { padding: 8px 12px; border: 1px solid rgba(79,227,255,.14); border-radius: 4px; background: rgba(7,10,18,.7); }
.obs-totals span { display: block; font: 700 8px/1 var(--mono); letter-spacing: .22em; color: #6c8494; }
.obs-totals b { display: block; margin-top: 5px; font: 700 18px/1 var(--mono); color: var(--amber); }
.obs-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.obs-scroll { max-height: 360px; overflow: auto; margin-top: 10px; }
.obs-setup p { line-height: 1.6; }
@media (max-width: 900px) { .obs-grid2 { grid-template-columns: 1fr; } .obs-totals { grid-template-columns: repeat(2, 1fr); } }
.obs-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.obs-form input, .obs-form textarea { flex: 1; min-width: 160px; padding: 8px; }
.obs-log-f textarea { flex-basis: 100%; }
.obs-moon { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(2,8,16,.6); border: 1px solid rgba(122,212,255,.18); }
.obs-moon-disc { width: 46px; height: 46px; border-radius: 50%; flex: none; background: linear-gradient(90deg, #0c1020 calc(100% - var(--lit)), #f4ecd0 calc(100% - var(--lit))); box-shadow: 0 0 18px rgba(244,236,208,.35); }
.obs-up { display: flex; flex-wrap: wrap; gap: 6px; }
.obs-up span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(122,212,255,.08); border: 1px solid rgba(122,212,255,.2); }
.obs-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.obs-tbl td { padding: 5px 6px; border-top: 1px solid rgba(122,212,255,.1); }
.obs-tbl td:first-child { font-weight: 600; }
.obs-pick { position: relative; display: flex; flex-direction: column; padding: 6px 10px; margin: 4px 0; border-radius: 8px; background: rgba(2,8,16,.6); overflow: hidden; }
.obs-pick i { position: absolute; left: 0; bottom: 0; height: 2px; background: #9ad8ff; }
.obs-obs { padding: 8px 0; border-top: 1px solid rgba(122,212,255,.12); }
.obs-obs b { margin-right: 8px; }
.obs-obs p { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.cs-stock-card { margin: 12px 0; padding: 12px; border-radius: 14px; background: #0c0e14; border: 1px solid #2a3040; }
.cs-stock-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; font-size: 12px; }
.st-rows { display: flex; flex-direction: column; gap: 2px; }
.st-row { display: grid; grid-template-columns: 52px 1fr 90px 62px 70px 90px auto auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; font-size: 12px; }
.st-row:nth-child(odd) { background: #10131c; }
.st-row.is-me { outline: 1px dashed #3a4460; }
.st-tick { font-family: ui-monospace, Consolas, monospace; color: #ffd27a; }
.st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.st-spark { width: 90px; height: 22px; }
.st-px { font-family: ui-monospace, Consolas, monospace; text-align: right; }
.st-own { font-size: 11px; opacity: .8; }
.st-row button { padding: 4px 8px; font-size: 11px; }
@media (max-width: 720px) { .st-row { grid-template-columns: 48px 1fr 62px 62px auto auto; } .st-spark, .st-own { display: none; } }
.cs-market-card { margin: 12px 0; padding: 12px; border-radius: 14px; background: #0c0e14; border: 1px solid #2a3040; }
.mk-new { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mk-new.hidden { display: none; }
.mk-new input { flex: 1; min-width: 200px; padding: 7px; }
.mk { padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: #131722; }
.mk.done { opacity: .6; }
.mk-q { font-size: 13px; margin-bottom: 6px; }
.mk-bar { position: relative; display: flex; justify-content: space-between; height: 20px; border-radius: 6px; overflow: hidden; background: #3a1a1e; font-size: 10px; font-weight: 700; }
.mk-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #1f6a44; }
.mk-bar span { position: relative; padding: 0 8px; line-height: 20px; }
.mk-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.mk-foot select { padding: 3px 5px; font-size: 11px; }
.mk-foot button { padding: 4px 10px; font-size: 11px; }
.mk-mine { font-size: 11px; color: #ffd27a; }
.mk-host { margin-left: auto; font-size: 11px; opacity: .85; }

/* ============================== LEKKERDLE ============================== */
.lk-card { margin-bottom: 14px; }
.lk-wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin: 8px 0; }
.lk-grid { display: flex; flex-direction: column; gap: 5px; }
.lk-row { display: flex; gap: 5px; }
.lk-c { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font: 800 20px system-ui, sans-serif; border: 2px solid #2e3444; border-radius: 6px; background: #0e1118; text-transform: uppercase; }
.lk-c.g { background: #2f8a4a; border-color: #2f8a4a; color: #fff; }
.lk-c.y { background: #b8932a; border-color: #b8932a; color: #fff; }
.lk-c.x { background: #2a2e38; border-color: #2a2e38; color: #9aa0ac; }
.lk-c.pop { animation: lk-pop .3s ease; }
@keyframes lk-pop { 50% { transform: scale(1.15) rotateX(40deg); } }
.lk-side { flex: 1; min-width: 200px; }
.lk-info b { font-size: 15px; }
.lk-info .tiny { margin-top: 3px; opacity: .8; }
.lk-board { margin-top: 10px; }
.lk-b { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.lk-b span:first-child { min-width: 80px; }
.lk-mini { line-height: 6px; }
.lk-mini i { display: inline-block; width: 6px; height: 6px; margin: 0 1px 0 0; background: #2a2e38; }
.lk-mini i.g { background: #2f8a4a; }
.lk-mini i.y { background: #b8932a; }
.lk-form { display: flex; flex-wrap: nowrap; gap: 6px; max-width: 260px; align-items: stretch; }
.lk-form.hidden { display: none; }
.lk-form input { flex: 1; width: auto !important; min-width: 0; text-transform: uppercase; letter-spacing: .3em; font-weight: 800; padding: 8px; }
.lk-keys { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.lk-keys div { display: flex; gap: 3px; }
.lk-keys .k { width: 24px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border-radius: 4px; background: #1a1e28; }
.lk-keys .k.g { background: #2f8a4a; }
.lk-keys .k.y { background: #b8932a; }
.lk-keys .k.x { background: #0c0e14; color: #555; }

/* CISTERN (STARBORNE): the same hologram panels as OPS/INTEL (hub.css .hub-panel) */
.cst-desk { padding: 16px 18px 28px; max-width: 1100px; }
.cst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cst-card { padding: 14px 16px; min-width: 0; }
.cst-card > * { position: relative; z-index: 3; }
.cst-card h3 { margin: 0 0 10px; font: 700 10px/1 var(--mono); letter-spacing: .28em; color: var(--holo); }
.cst-card p { font-size: 13px; line-height: 1.55; margin: 6px 0; }
.cst-vigil, .cst-pages { grid-column: span 2; }
@media (max-width: 720px) { .cst-vigil, .cst-pages { grid-column: auto; } .cst-grid { grid-template-columns: 1fr; } }
.cst-btn { padding: 7px 12px; border-radius: 6px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .08);
  color: var(--holo); font: 700 10px var(--mono); letter-spacing: .16em; cursor: pointer; }
.cst-btn:hover { border-color: var(--holo); box-shadow: 0 0 12px rgba(79, 227, 255, .25); }
.cst-btn.ghost { background: transparent; opacity: .7; }
.cst-code { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cst-code code { padding: 6px 10px; border-radius: 6px; background: rgba(2, 8, 14, .9); border: 1px dashed var(--holo); color: var(--holo);
  font: 12px var(--mono); word-break: break-all; user-select: all; }
.cst-board { width: 100%; border-collapse: collapse; font-size: 13px; }
.cst-board th { text-align: left; font: 500 9px var(--mono); letter-spacing: .2em; color: var(--holo); opacity: .6; padding: 4px 6px; }
.cst-board td { padding: 7px 6px; border-top: 1px solid var(--holo-dim); }
.cst-board td:first-child { width: 28px; color: var(--holo); font-family: var(--mono); }
.cst-board td:nth-child(4), .cst-board td:nth-child(5) { font-family: var(--mono); opacity: .85; }
.cst-board tr.me td { color: var(--amber); text-shadow: 0 0 8px var(--glow); }
.cst-msgs, .cst-best { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cst-msgs li, .cst-best li { padding: 7px 0; border-top: 1px solid var(--holo-dim); }
.cst-msgs li:first-child, .cst-best li:first-child { border-top: 0; }
.cst-msgs q { color: #bff4ff; font-style: italic; text-shadow: 0 0 10px rgba(79, 227, 255, .35); }
.cst-amen { margin-left: 6px; font: 11px var(--mono); color: var(--amber); }
.cst-page { padding: 10px 12px; margin: 8px 0; border-left: 2px solid var(--holo); background: rgba(79, 227, 255, .04); }
.cst-page.won { border-left-color: var(--amber); background: rgba(255, 180, 60, .05); }
.cst-page header { display: flex; justify-content: space-between; gap: 8px; font: 11px var(--mono); letter-spacing: .06em;
  position: static; background: none; border: 0; padding: 0; margin: 0 0 2px; box-shadow: none; min-height: 0; }
.cst-page header b { color: var(--holo); }
.cst-page header span { opacity: .55; }
.cst-page p { font-family: Georgia, "Times New Roman", serif; font-size: 14px; opacity: .9; }
.cst-clock { position: relative; height: 70px; width: 34px; margin: 4px 0 8px; border: 1px solid var(--holo);
  border-radius: 6px 6px 14px 14px; overflow: hidden; background: rgba(2, 8, 14, .9); box-shadow: 0 0 14px rgba(79, 227, 255, .2); }
.cst-siege { height: 10px; border: 1px solid var(--holo-dim); border-radius: 5px; overflow: hidden; background: rgba(2, 8, 14, .8); margin: 8px 0 4px; }
.cst-siege i { display: block; height: 100%; background: linear-gradient(90deg, #3a7aff, var(--holo)); box-shadow: 0 0 10px rgba(79, 227, 255, .5); }
.cst-nem { color: var(--alert); }
.cst-bars { display: flex; gap: 8px; align-items: flex-end; height: 70px; margin: 8px 0; }
.cst-bars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.cst-bars i { width: 100%; min-height: 2px; background: linear-gradient(0deg, rgba(79, 227, 255, .2), var(--holo)); border-radius: 3px 3px 0 0; }
.cst-bars em { font: 9px var(--mono); font-style: normal; opacity: .6; }
.cst-clock i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #1b5a8a, var(--holo)); opacity: .8; }

/* ---- CAROM (static/js/games/carom.js) ---- */
.crm-desk { padding: 16px 18px 28px; max-width: 1400px; }
.crm-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; margin-top: 10px; align-items: start; }
@media (max-width: 1000px) { .crm-main { grid-template-columns: 1fr; } }
.crm-stage { padding: 10px; min-width: 0; }
.crm-stage canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; border-radius: 4px; position: relative; z-index: 3; }
.crm-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crm-card { padding: 14px 16px; }
.crm-card > * { position: relative; z-index: 3; }
.crm-card h3 { margin: 0 0 10px; font: 700 10px/1 var(--mono); letter-spacing: .28em; color: var(--holo); }
.crm-card p { font-size: 13px; line-height: 1.55; margin: 6px 0; }
.crm-name { font: 800 15px var(--mono); letter-spacing: .08em; color: var(--amber); text-shadow: 0 0 12px var(--glow); }
.crm-stats { display: flex; flex-wrap: wrap; gap: 14px; font: 600 12px var(--mono); color: #cfe9ff; margin: 10px 0; }
.crm-stats b { color: var(--amber); font-size: 15px; }
.crm-tray { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.crm-tray i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--mono); font-style: normal;
  color: #fff; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--c) 35%, #000 100%); box-shadow: 0 0 8px var(--c); }
.crm-tray i.in { opacity: .18; box-shadow: none; filter: grayscale(.7); }
.crm-won { color: #7dff8a; font-weight: 700; }
.crm-lost { color: var(--alert); font-weight: 700; }
.crm-kinds { margin: 10px 0; flex-wrap: wrap; }
.crm-tips b { color: var(--amber); }
.crm-camp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 4px; }
.crm-camp button { padding: 7px 0; border-radius: 5px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .05);
  color: #cfe9ff; font: 700 12px var(--mono); cursor: pointer; }
.crm-camp button.on { border-color: var(--holo); box-shadow: 0 0 10px rgba(79, 227, 255, .35); }
.crm-camp button.done { color: var(--holo); }
.crm-camp button.par { color: #1a1204; background: var(--amber); border-color: var(--amber); }
.crm-camp button:disabled { opacity: .3; cursor: default; }
.crm-stakes button.on { border-color: var(--amber); color: var(--amber); }
.crm-drop { width: 100%; margin: 6px 0 8px; padding: 10px; font-weight: 800; letter-spacing: .2em; }
.crm-drop:disabled { opacity: .45; }
.crm-verify { font: 12px var(--mono); color: #7dff8a; line-height: 1.6; }
.crm-card td.up { color: #7dff8a; } .crm-card td.dn { color: var(--alert); }
.crm-card code { font: 11px var(--mono); color: var(--holo); }
.crm-challenge { display: flex; gap: 8px; }
.crm-challenge select { flex: 1; min-width: 0; background: rgba(2, 8, 14, .9); color: #cfe9ff; border: 1px solid var(--holo-dim); border-radius: 6px; padding: 6px; font: 12px var(--mono); }
.crm-duels { display: flex; flex-direction: column; gap: 6px; }
.crm-duel { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .04); color: #cfe9ff; cursor: pointer; font: 12px var(--mono); }
.crm-duel span { grid-column: 1; opacity: .6; font-size: 11px; } .crm-duel em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; color: var(--amber); }
.crm-duel.on { border-color: var(--holo); box-shadow: 0 0 10px rgba(79, 227, 255, .3); }
.crm-forms h4 { margin: 10px 0 6px; font: 700 9px var(--mono); letter-spacing: .24em; color: var(--holo); opacity: .8; }
.crm-forms h4:first-child { margin-top: 0; }
.crm-fgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-fgroup button { padding: 6px 10px; border-radius: 5px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .05); color: #cfe9ff; font: 11px var(--mono); cursor: pointer; }
.crm-fgroup button.on { border-color: var(--holo); } .crm-fgroup button.done { color: #7dff8a; }
.crm-fgroup h4 { flex-basis: 100%; }

/* ---- FLIPPER (static/js/games/flipper.js, PUZZLE tab third mode) ---- */
.flip-desk { position: relative; display: grid; grid-template-columns: 86px minmax(0, 460px) minmax(0, 340px); gap: 12px;
  justify-content: center; align-items: start; max-width: 960px; margin: 0 auto 80px; }
.flip-desk.hidden { display: none; }
.flip-rail { display: flex; flex-direction: column; gap: 8px; }
.flip-chip { font-family: var(--mono); border-radius: 4px; border: 1px solid rgba(79, 227, 255, .22); background: rgba(79, 227, 255, .04);
  padding: 9px 6px; text-align: center; color: #cfe9ff; }
.flip-chip b { display: block; color: var(--amber); font-size: 14px; text-shadow: 0 0 8px var(--glow); overflow: hidden; text-overflow: ellipsis; }
.flip-chip span { font-size: 9px; letter-spacing: .16em; color: #7a94a4; }
button.flip-chip { cursor: pointer; }
button.flip-chip:hover { border-color: var(--holo); }
.flip-daily.on { border-color: var(--amber); box-shadow: 0 0 12px rgba(255, 176, 32, .3); }
.flip-daily.done b { color: #7dff8a; }
.flip-main { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.flip-dmd { display: block; border-radius: 4px; border: 1px solid rgba(255, 176, 32, .3); background: #070503; }
.flip-stage { position: relative; width: 100%; display: flex; justify-content: center; }
.flip-stage canvas { display: block; touch-action: none; border-radius: 6px; border: 1px solid var(--holo-dim);
  box-shadow: 0 0 24px rgba(79, 227, 255, .08); user-select: none; -webkit-user-select: none; }
.flip-over { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.flip-over.hidden { display: none; }
.flip-over-in { pointer-events: auto; text-align: center; padding: 18px 22px; border-radius: 6px; background: rgba(4, 7, 13, .92);
  border: 1px solid var(--amber); box-shadow: 0 0 24px rgba(255, 176, 32, .25); font-family: var(--mono); min-width: 230px; }
.flip-over-h { font: 800 11px var(--mono); letter-spacing: .32em; color: var(--holo); }
.flip-over-s { font: 900 30px var(--mono); color: var(--amber); text-shadow: 0 0 14px var(--glow); margin: 8px 0 4px; }
.flip-over-m { font: 700 11px var(--mono); color: #cfe9ff; letter-spacing: .12em; }
.flip-over-st { font: 11px var(--mono); color: #7a94a4; margin: 6px 0 12px; }
.flip-over-v { font: 700 11px var(--mono); margin: 4px 0; }
.flip-over-v.ok { color: #7dff8a; } .flip-over-v.bad { color: var(--alert); }
.flip-over-in button { margin: 3px; }
.flip-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.flip-bar button { font: 800 11px var(--mono); letter-spacing: .14em; padding: 9px 12px; }
.flip-touch { display: none; }
@media (hover: none), (pointer: coarse) { .flip-touch { display: inline-block; } }
.flip-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.flip-card { padding: 14px 16px; }
.flip-card > * { position: relative; z-index: 3; }
.flip-card h3, .flip-help h3 { margin: 0 0 10px; font: 700 10px/1 var(--mono); letter-spacing: .28em; color: var(--holo); }
.flip-card p { font-size: 13px; line-height: 1.55; margin: 6px 0; }
.flip-name { font: 800 15px var(--mono); letter-spacing: .08em; color: var(--amber); text-shadow: 0 0 12px var(--glow); }
.flip-tables, .flip-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flip-tables button, .flip-tabs button, .flip-grid button { padding: 6px 10px; border-radius: 5px; border: 1px solid var(--holo-dim);
  background: rgba(79, 227, 255, .05); color: #cfe9ff; font: 11px var(--mono); cursor: pointer; }
.flip-tables button.on, .flip-tabs button.on, .flip-grid button.on { border-color: var(--holo); box-shadow: 0 0 10px rgba(79, 227, 255, .3); color: var(--holo); }
.flip-tables button.lock { opacity: .5; }
.flip-missions { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
.flip-missions b { font-family: var(--mono); color: #cfe9ff; }
.flip-missions li.on b { color: var(--amber); } .flip-missions li.done b { color: #7dff8a; }
.flip-missions li.done { opacity: .7; }
.flip-help { position: absolute; z-index: 20; left: 50%; top: 40px; transform: translateX(-50%); width: min(92%, 420px); padding: 16px 18px; }
.flip-help.hidden { display: none; }
.flip-help p { font-size: 13px; line-height: 1.55; }
.flip-help b { color: var(--amber); font-family: var(--mono); }
.flip-board { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.flip-board td { padding: 3px 4px; border-bottom: 1px solid rgba(79, 227, 255, .08); }
.flip-board td:last-child { text-align: right; color: var(--amber); }
.flip-board tr.me td { color: var(--holo); }
.flip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0; }
.flip-grid button { padding: 7px 0; text-align: center; font-weight: 700; }
.flip-grid button.s3 { color: #1a1204; background: var(--amber); border-color: var(--amber); }
.flip-grid button.s1, .flip-grid button.s2 { color: #7dff8a; }
.flip-grid button:disabled { opacity: .3; cursor: default; }
.flip-skins { display: flex; flex-wrap: wrap; gap: 8px; }
.flip-skins button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--holo-dim); cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--c) 40%, #111 100%); position: relative; }
.flip-skins button.on { border-color: var(--amber); box-shadow: 0 0 10px var(--glow); }
.flip-skins button.lock { opacity: .45; }
.flip-skins button i { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font: 700 8px var(--mono); color: #7a94a4; font-style: normal; white-space: nowrap; }
.flip-ed { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.flip-ed button { font: 700 10px var(--mono); padding: 6px 8px; border-radius: 5px; border: 1px solid var(--holo-dim);
  background: rgba(79, 227, 255, .05); color: #cfe9ff; cursor: pointer; box-shadow: none; }
.flip-ed button.on { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 10px rgba(255, 176, 32, .25); }
.flip-card label input { background: rgba(2, 8, 14, .9); color: #cfe9ff; border: 1px solid var(--holo-dim); border-radius: 5px; padding: 5px 8px; font: 12px var(--mono); }
.flip-views { margin: 0 0 2px; }
@media (max-width: 900px) {
  .flip-desk { grid-template-columns: minmax(0, 460px); }
  .flip-rail { flex-direction: row; flex-wrap: wrap; }
  .flip-rail > * { flex: 1; min-width: 56px; }
  .flip-side { order: 3; }
}
.flip-board a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(79, 227, 255, .4); }
.flip-board a:hover { color: var(--holo); }
.obs-voice { margin-left: auto; font-size: 10px !important; padding: 5px 10px !important; }
.obs-voice.on { color: var(--amber) !important; border-color: var(--amber) !important; }
.obs-mode { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px; border: 1px dashed rgba(143, 166, 182, .45); border-radius: 6px; font: 11px/1.4 var(--mono); color: #8fa6b6; }
.obs-mode b { color: #cfe0ea; letter-spacing: .2em; }
.obs-offline { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.obs-offline > div { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 12px; border-left: 2px solid var(--sv); border-radius: 4px;
  background: rgba(7, 10, 18, .7); font: 11px var(--mono); opacity: .8; }
.obs-offline b { color: var(--sv); letter-spacing: .2em; }
.obs-offline span { color: #8fa6b6; }
.obs-offline i { font-style: normal; color: #f19a9a; font-size: 10px; letter-spacing: .16em; }
.obs-offline em { grid-column: 1 / -1; font-style: normal; color: #6c8494; }
.obs-mode.hidden, #obs-gal-card.hidden { display: none; }
.pinet-desk { padding: 4px 18px 28px; max-width: 1320px; }
#pinet-local a { color: var(--holo); }

/* the CODEX frame (THE VAULT, a finished card set): a holo ring that turns between cyan and amber */
.av.fr-codex { outline: none; box-shadow: 0 0 0 2px #4fe3ff, 0 0 10px 2px rgba(79, 227, 255, .6); animation: codexfr 4s ease-in-out infinite; }
@keyframes codexfr { 50% { box-shadow: 0 0 0 2px #ffc23d, 0 0 12px 3px rgba(255, 194, 61, .6); } }
/* the LENSING frame (THE BLACK HOLE, SUPERMASSIVE): a photon ring round the avatar */
.av.fr-lensing { outline: none; box-shadow: 0 0 0 2px #fff3d6, 0 0 0 4px #ff8a30, 0 0 14px 4px rgba(255, 138, 48, .55); }

/* ---- ASCENT (static/js/games/ascent.js) ---------------------------------- */
.asc-desk { padding: 16px 18px 28px; max-width: 1200px; }
.asc-main { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 340px); gap: 12px; margin-top: 10px; align-items: start; justify-content: center; }
@media (max-width: 900px) { .asc-main { grid-template-columns: 1fr; } }
.asc-stage { padding: 8px; min-width: 0; }
.asc-stage canvas { display: block; width: 100%; touch-action: none; cursor: grab; border-radius: 4px; position: relative; z-index: 3; }
.asc-stage canvas:active { cursor: grabbing; }
.asc-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.asc-card { padding: 14px 16px; }
.asc-card > * { position: relative; z-index: 3; }
.asc-card h3 { margin: 0 0 10px; font: 700 10px/1 var(--mono); letter-spacing: .28em; color: var(--holo); }
.asc-card p { font-size: 13px; line-height: 1.55; margin: 6px 0; }
.asc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 8px; }
.asc-stats span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border: 1px solid var(--holo-dim); border-radius: 5px;
  font: 600 9px var(--mono); letter-spacing: .18em; color: #8fb6d9; background: rgba(79, 227, 255, .04); }
.asc-stats b { font-size: 20px; letter-spacing: 0; color: var(--amber); text-shadow: 0 0 10px var(--glow); margin-top: 2px; }
.asc-won { color: #7dff8a; font-weight: 700; font-family: var(--mono); }
.asc-hard input { width: auto; margin: 0; }
.asc-hard { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font: 700 11px var(--mono); letter-spacing: .08em; color: #ff8a5a; cursor: pointer; }
.asc-hard .mute { font-weight: 400; letter-spacing: 0; }
.asc-board { list-style: none; counter-reset: asc; margin: 0; padding: 0; }
.asc-board li { counter-increment: asc; display: flex; justify-content: space-between; gap: 8px; padding: 5px 2px; border-bottom: 1px solid rgba(79, 227, 255, .08); font: 13px var(--mono); }
.asc-board li::before { content: counter(asc) "."; color: var(--holo); width: 22px; }
.asc-board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asc-board li b { color: var(--amber); }
.asc-board li.me span { color: var(--amber); }
.asc-how p { font-size: 12px; }
.asc-k { padding: 0 4px; border-radius: 3px; font: 700 11px var(--mono); }
.asc-k.turf { color: #3dffb0; } .asc-k.ice { color: #c8f7ff; } .asc-k.bump { color: #ff5ac8; } .asc-k.water { color: #6cc6ff; } .asc-k.rough { color: #c08cff; }
.asc-picks { flex-wrap: wrap; }
.asc-pal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-bottom: 8px; }
.asc-pal button { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font: 600 10px var(--mono); letter-spacing: .1em; text-align: left;
  border-radius: 5px; border: 1px solid var(--holo-dim); background: rgba(79, 227, 255, .05); color: #cfe9ff; box-shadow: none; }
.asc-pal button i { font-style: normal; width: 18px; text-align: center; color: var(--holo); font-weight: 800; }
.asc-pal button.on { border-color: var(--amber); color: var(--amber); background: rgba(255, 180, 60, .1); box-shadow: 0 0 10px rgba(255, 180, 60, .3); }
.asc-side input[type=text] { width: 100%; margin: 6px 0; }
.asc-saved { display: flex; align-items: center; gap: 6px; padding: 4px 0; font: 12px var(--mono); }
.asc-saved span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.asc-saved button { padding: 3px 8px; font-size: 10px; }