/* Lumora Online - UI refresh: one look for the whole HUD (night-blue glass with gold trim), clearer bars and
   buttons, branded window headers, plus the world map and the poker room. Loaded after style.css. */
:root { --glass: linear-gradient(180deg, rgba(28,42,82,.92), rgba(12,20,44,.94)); --trim: rgba(255,214,120,.55); --trim2: rgba(140,170,240,.35);
  --title: "Lilita One", "Segoe UI Black", "Segoe UI", sans-serif; }

/* ---------- HUD panels ---------- */
.card { background: var(--glass); border: 1px solid var(--trim2); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,230,160,.25), inset 0 0 0 1px rgba(255,255,255,.03); backdrop-filter: blur(4px); }
.card::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--trim), transparent); pointer-events: none; }
.qhead b, .feed-head b, .mhead b, .pp-head b, .np-head b { font-family: var(--title); font-weight: 400; letter-spacing: .3px; font-size: 15px; }
.count { background: linear-gradient(180deg, #ffe27a, #e0a020); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.mini-btn { background: linear-gradient(180deg, #34508e, #1f3366); border-color: rgba(140,170,240,.5); border-radius: 99px; transition: transform .1s, border-color .1s; }
.mini-btn:hover { border-color: #ffd860; transform: translateY(-1px); }

/* the player card: dark glass, framed portrait, shiny bars */
.me { background: var(--glass); color: #eef3ff; border: 1px solid var(--trim2); padding: 8px; gap: 10px; }
.me #portrait { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #4a6ab8, #1a2a54); box-shadow: 0 0 0 3px #e0b040, 0 0 0 5px rgba(20,14,0,.6), 0 4px 10px rgba(0,0,0,.5); align-self: center; }
.me-top b { font-family: var(--title); font-weight: 400; font-size: 17px; letter-spacing: .3px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.me .job { background: linear-gradient(180deg, #4a7ad0, #2f5cb0); color: #fff; border-radius: 99px; padding: 1px 10px; font-size: 11px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.me .lvrow span { color: #b8c8ec; font-size: 11px; } .me .lvrow b { color: #ffe08a; }
.bar { border-radius: 7px; background: #0b1226; border: 1px solid rgba(0,0,0,.7); box-shadow: inset 0 2px 3px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06); }
.bar i { border-radius: 6px; }
.bar::after { content: ''; position: absolute; left: 2px; right: 2px; top: 1px; height: 40%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; }
.bar.hp i { background: linear-gradient(180deg, #8af08a, #2fb848 55%, #1f8a30); } .bar.sp i { background: linear-gradient(180deg, #8ac8ff, #3a7ef0 55%, #2556c0); }
.bar.xp i { background: linear-gradient(180deg, #fff09a, #f0b020 55%, #c88010); } .bar.xp.job i { background: linear-gradient(180deg, #e0c0ff, #8a5af0 55%, #6234c8); }

/* chips under the card */
.chip { background: var(--glass); border: 1px solid var(--trim2); box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); padding: 4px 11px; }

/* top menu: a gold-trimmed bar, icons lift and glow */
.topmenu { background: var(--glass); border: 1px solid var(--trim2); border-radius: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 -2px 0 rgba(255,214,120,.35); }
.topmenu button { border-radius: 10px; transition: background .12s; color: #e8eefc; }
.topmenu button:hover { background: radial-gradient(circle at 50% 35%, rgba(255,220,120,.28), rgba(255,220,120,0) 70%); color: #ffe890; }
.topmenu button:hover svg { filter: drop-shadow(0 0 6px rgba(255,220,120,.7)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }

/* hotbar */
.hotbar-wrap { background: var(--glass) !important; border: 1px solid var(--trim2) !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,160,.25) !important; }
.hotbar .slot { background: radial-gradient(circle at 50% 35%, #1e2c52, #0a1024); border: 1px solid rgba(140,170,240,.35); border-radius: 9px; box-shadow: inset 0 2px 4px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.06); transition: transform .08s, border-color .1s; }
.hotbar .slot:hover { border-color: #ffd860; transform: translateY(-2px); }
.hb-page { background: radial-gradient(circle at 40% 30%, #fff6c8, #ffd040 50%, #c88a10); color: #3a2400; border-radius: 50%; width: 32px; align-self: center; height: 32px; box-shadow: 0 2px 0 #7a5208, 0 3px 6px rgba(0,0,0,.4); font-family: var(--title); font-weight: 400; }
.hb-btn { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 rgba(0,0,0,.35); transition: transform .08s, filter .1s; }
.hb-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }

/* chat */
.chat-tabs button { border-radius: 99px; border-color: rgba(140,170,240,.35); padding: 2px 13px; transition: background .12s; }
.chat-tabs button:hover { background: rgba(255,255,255,.14); }
.chat-tabs button.on { background: linear-gradient(180deg, #ffd768, #e0a22a); color: #3a2400; border-color: #b07a10; }
.chat-row #chatIn { border-radius: 99px; padding-left: 14px; }

/* zone banner and toasts */
.banner { font-family: var(--title); font-weight: 400 !important; letter-spacing: 1px; }
.toast { border-radius: 99px; box-shadow: 0 8px 22px rgba(0,0,0,.4); }

/* ---------- windows ---------- */
.win { border: 1px solid #7f9cd0; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4) inset; background: linear-gradient(180deg, #f5f8fd, #e4ebf6); }
.win .win-head { background: linear-gradient(180deg, #3a64b8, #23468e 60%, #1c3a7a); border-bottom: 2px solid #e8b840; border-radius: 13px 13px 0 0; padding: 8px 12px 8px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.win .win-head .wt { font-family: var(--title); font-weight: 400; font-size: 17px; letter-spacing: .4px; color: #fff; text-shadow: 0 2px 0 rgba(10,20,50,.6); }
.win .win-head button { border-radius: 50%; width: 26px; height: 26px; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); transition: background .12s, transform .12s; }
.win .win-head button:hover { background: #e0483a; border-color: #ff9a8a; transform: rotate(90deg); }
.win h3 { font-family: var(--title); font-weight: 400; font-size: 15px; letter-spacing: .3px; color: #2a56b0; }
.win .btn { border-radius: 10px; box-shadow: 0 2px 0 rgba(30,50,100,.18); transition: transform .08s, box-shadow .08s, border-color .1s; }
.win .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(30,50,100,.22); }
.win .btn:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.win .btn.gold { box-shadow: 0 2px 0 #8a5a08; }
.win-body::-webkit-scrollbar, .chat-log::-webkit-scrollbar, .cc-panel::-webkit-scrollbar { width: 9px; }
.win-body::-webkit-scrollbar-thumb { background: #a8bce0; border-radius: 9px; border: 2px solid #e8eef7; }
.chat-log::-webkit-scrollbar-thumb, .cc-panel::-webkit-scrollbar-thumb { background: rgba(140,170,240,.45); border-radius: 9px; }

/* title screen logo */
.logo-img { position: absolute; left: 18px; top: 6px; width: min(440px, 38vw); filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); pointer-events: none; animation: logoIn .9s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes logoIn { from { opacity: 0; transform: translateY(-20px) scale(.9); } }
.cc-panel { background: var(--glass); border: 1px solid var(--trim2); box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,230,160,.25); }
.cc-title { font-family: var(--title); font-weight: 400 !important; letter-spacing: .4px; }

/* ---------- world map ---------- */
.wm-wrap { display: grid; grid-template-columns: 640px 1fr; gap: 12px; align-items: start; }
.wm-canvas { width: 640px; height: 392px; border-radius: 10px; border: 3px solid #6a4a2a; box-shadow: 0 0 0 2px #e8c890, 0 6px 18px rgba(0,0,0,.35); image-rendering: pixelated; display: block; }
.wm-info { display: grid; gap: 6px; } .wm-info h3 { margin: 0; font-size: 19px; } .wm-lv { font-weight: 800; color: #b07800; font-size: 12px; }
.wm-info.empty b { font-family: var(--title); font-weight: 400; font-size: 18px; color: #2a56b0; }
.wm-thumb { width: 100%; height: auto; border-radius: 8px; border: 2px solid #9ab4dc; image-rendering: auto; }
.wm-mons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wm-mon { display: grid; justify-items: center; padding: 3px; border-radius: 8px; background: #fff; border: 1px solid #c8d8ee; text-align: center; }
.wm-mon small { font-size: 10px; font-weight: 700; color: #1c2a44; line-height: 1.1; } .wm-mon i { font-size: 10px; font-style: normal; color: #5a6c8c; }
.wm-mon.boss { border-color: #c070ff; background: linear-gradient(180deg, #fbf4ff, #efe0ff); } .wm-mon canvas { image-rendering: pixelated; }
.wm-here { text-align: center; font-weight: 800; color: #b07800; padding: 6px; border-radius: 8px; background: #fff6d8; border: 1px solid #f0d080; }
.wm-legend { display: grid; gap: 5px; font-size: 12px; color: #3a4a6a; } .wm-legend span { display: flex; align-items: center; gap: 8px; }
.wm-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1.5px solid #0e1424; }
.wm-legend .wm-me { background: #ffd84a; } .wm-legend .pt { background: #7affc8; } .wm-legend .away { background: #ffb040; }
.wm-legend .road { border-radius: 0; height: 0; border: 0; border-top: 3px dashed #c8a060; } .wm-legend .magic { border-radius: 0; height: 0; border: 0; border-top: 3px dotted #b070ff; }

/* ---------- poker room ---------- */
.pk-ov { position: fixed; inset: 0; z-index: 8000; background: radial-gradient(ellipse at 50% 40%, rgba(40,20,10,.9), rgba(8,6,10,.97)); display: grid; place-items: center; animation: pkFade .3s; }
@keyframes pkFade { from { opacity: 0; } }
.pk-room { width: min(1180px, 96vw); height: min(720px, 96vh); display: grid; grid-template-rows: auto 1fr auto; gap: 8px; color: #fff; }
.pk-top { display: flex; align-items: center; gap: 12px; } .pk-top > div:first-child { flex: 1; }
.pk-title { display: block; font-family: var(--title); font-weight: 400; font-size: 26px; color: #ffd860; text-shadow: 0 3px 0 #5a3008, 0 0 20px rgba(255,180,60,.4); letter-spacing: .5px; }
.pk-top small { color: #d8c8a8; }
.pk-session { padding: 6px 14px; border-radius: 99px; font-weight: 800; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); } .pk-session.up { color: #8af0a0; } .pk-session.down { color: #ff9a8a; }
.pk-leave { padding: 8px 16px; border-radius: 10px; border: 1px solid #c8a060; background: linear-gradient(180deg, #5a3a1a, #3a2410); color: #ffe8c0; font-weight: 800; cursor: pointer; }
.pk-leave:hover { filter: brightness(1.2); }
.pk-table { position: relative; margin: 30px 70px; border-radius: 50% / 50%; background: radial-gradient(ellipse at 50% 30%, #8a5a32, #4a2c14 70%); box-shadow: 0 0 0 6px var(--trim, #c87a3a), 0 0 0 10px #2a160a, 0 30px 60px rgba(0,0,0,.6), inset 0 6px 14px rgba(255,220,160,.25); }
.pk-felt { position: absolute; inset: 22px; border-radius: 50% / 50%; background: radial-gradient(ellipse at 50% 40%, #2f8a52, #1a5a34 65%, #0e3a20); box-shadow: inset 0 0 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.08); display: grid; place-items: center; align-content: center; gap: 10px; }
.pk-logo { position: absolute; top: 22%; font-family: var(--title); font-size: 30px; letter-spacing: 6px; color: rgba(255,255,255,.07); }
.pk-board { display: flex; gap: 8px; z-index: 1; }
.pk-pot { display: flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; background: rgba(0,0,0,.45); font-weight: 800; color: #ffe890; z-index: 1; }
.pk-pot i, .pk-bet i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: repeating-conic-gradient(#e83a3a 0 30deg, #fff 30deg 60deg); border: 2px solid #8a1a1a; }
.pk-msg { max-width: 70%; text-align: center; padding: 6px 16px; border-radius: 10px; background: rgba(10,20,10,.75); border: 1px solid rgba(255,216,96,.6); color: #ffe890; font-weight: 800; z-index: 1; animation: pkPop .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes pkPop { from { transform: scale(.6); opacity: 0; } }
.pk-card { position: relative; width: 52px; height: 74px; border-radius: 7px; background: linear-gradient(180deg, #ffffff, #eef0f4); border: 1px solid #9aa0b0; box-shadow: 0 3px 8px rgba(0,0,0,.45); color: #14141e; font-family: var(--title); }
.pk-card.red { color: #d8283a; }
.pk-card b { position: absolute; left: 5px; top: 2px; font-size: 18px; font-weight: 400; } .pk-card i { position: absolute; left: 6px; top: 22px; font-style: normal; font-size: 13px; }
.pk-card span { position: absolute; right: 6px; bottom: 2px; font-size: 30px; line-height: 1; }
.pk-card.back { background: repeating-linear-gradient(45deg, #2a3a8a 0 6px, #22307a 6px 12px); border: 3px solid #fff; }
.pk-card.slot { background: rgba(255,255,255,.06); border: 2px dashed rgba(255,255,255,.18); box-shadow: none; }
.pk-card.deal { animation: pkDeal .35s ease-out; } @keyframes pkDeal { from { transform: translateY(-30px) rotateY(90deg); opacity: 0; } }
.pk-card.sm { width: 34px; height: 48px; } .pk-card.sm b { font-size: 13px; } .pk-card.sm i { top: 16px; font-size: 10px; } .pk-card.sm span { font-size: 18px; }
.pk-card.big { width: 70px; height: 100px; } .pk-card.big b { font-size: 24px; } .pk-card.big i { top: 28px; font-size: 16px; } .pk-card.big span { font-size: 44px; }
.pk-seat { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 150px; transition: opacity .3s; z-index: 2; }
.pk-seat.folded { opacity: .45; }
.pk-avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #4a6ab8, #1a2a54); box-shadow: 0 0 0 3px #c8a060, 0 4px 10px rgba(0,0,0,.6); }
.pk-face { position: absolute; width: 112px; height: 112px; left: -24px; top: -10px; image-rendering: pixelated; }
.pk-seat.turn .pk-avatar { box-shadow: 0 0 0 3px #ffd860, 0 0 22px 6px rgba(255,216,96,.7); animation: pkTurn 1s ease-in-out infinite; } @keyframes pkTurn { 50% { box-shadow: 0 0 0 3px #fff2a0, 0 0 30px 10px rgba(255,216,96,.9); } }
.pk-seat.pk-won .pk-avatar { box-shadow: 0 0 0 3px #8af0a0, 0 0 26px 8px rgba(120,255,160,.75); }
.pk-btn { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #14141e; font-weight: 900; font-size: 12px; display: grid; place-items: center; border: 2px solid #14141e; }
.pk-plate { display: grid; justify-items: center; min-width: 110px; padding: 3px 10px; border-radius: 10px; background: rgba(8,10,20,.85); border: 1px solid rgba(255,216,96,.45); }
.pk-plate b { font-size: 12px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-chips { font-size: 12px; font-weight: 800; color: #ffe890; }
.pk-seat.pk-me .pk-plate { border-color: #8af0a0; }
.pk-last { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: #2f6fe0; } .pk-last.fold { background: #5a5a6a; } .pk-last.hot { background: #e0483a; }
.pk-hole { display: flex; gap: 3px; } .pk-hand { font-size: 11px; font-weight: 800; color: #8af0a0; text-shadow: 0 1px 2px #000; }
.pk-bet { position: absolute; z-index: 3; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0,0,0,.4); display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.6); font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; }

.pk-bottom { display: grid; grid-template-columns: auto 1fr 260px; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 16px; background: rgba(10,12,24,.85); border: 1px solid rgba(255,216,96,.35); }
.pk-mine { display: flex; gap: 6px; align-items: center; min-width: 150px; } .pk-strength { margin-left: 8px; } .pk-strength small { display: block; color: #a8b0c8; font-size: 11px; } .pk-strength b { color: #ffe890; }
.pk-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pk-act { padding: 12px 20px; border-radius: 12px; border: 0; font-weight: 900; font-size: 15px; color: #fff; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.4); transition: transform .08s, filter .1s; }
.pk-act:hover { filter: brightness(1.15); transform: translateY(-1px); } .pk-act:active { transform: translateY(2px); box-shadow: none; }
.pk-act.fold { background: linear-gradient(180deg, #6a6a7a, #44444e); } .pk-act.call { background: linear-gradient(180deg, #3aaa5a, #22743a); } .pk-act.raise { background: linear-gradient(180deg, #ffb040, #d8701a); color: #2a1400; }
.pk-raise { display: grid; gap: 4px; justify-items: stretch; } .pk-raise input { width: 230px; accent-color: #ffb040; }
.pk-quick { display: flex; gap: 4px; } .pk-q { flex: 1; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.pk-q:hover { background: rgba(255,255,255,.18); }
.pk-wait { color: #c8c8d8; font-weight: 700; text-align: center; }
.pk-log { font-size: 11px; color: #b8c0d8; display: grid; gap: 2px; max-height: 84px; overflow: hidden; } .pk-log div:first-child { color: #ffe890; font-weight: 700; }
.pk-bust { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 3; padding: 20px 26px; border-radius: 16px; background: #1a1424; border: 2px solid #ffd860; display: grid; gap: 12px; justify-items: center; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.pk-bust b { font-family: var(--title); font-weight: 400; font-size: 24px; color: #ffd860; }
.pk-lobby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0; }
.pk-tcard { display: grid; gap: 5px; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #1f6a40, #12482a); color: #fff; border: 3px solid var(--trim); box-shadow: 0 4px 12px rgba(0,0,0,.3); text-align: center; }
.pk-tname { font-family: var(--title); font-size: 19px; color: var(--trim); text-shadow: 0 2px 0 rgba(0,0,0,.5); } .pk-tblinds { font-weight: 800; } .pk-tcard small { color: #c8e8d0; } .pk-tcard input { accent-color: #ffd860; } .pk-tcard > b { color: #ffe890; }
.pk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .pk-stats div { display: grid; padding: 6px; border-radius: 8px; background: #fff; border: 1px solid #c8d8ee; text-align: center; }
.pk-stats small { color: #5a6c8c; font-size: 11px; } .pk-stats b { color: #1c2a44; }

/* fit the taller player card, and one-line "on the way" rows in a big party */
.chips { top: 114px; } .quests { top: 178px; } .party-panel { top: 320px; }
.pp-row { position: relative; } .pp-eta { display: none; font-style: normal; }
.party-panel.compact .pp-row.away small { display: none !important; }
.party-panel.compact .pp-eta { display: block; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; color: #ffd27a; }
.pk-seat.pk-won .pk-plate { border-color: #8af0a0; box-shadow: 0 0 14px rgba(120,255,160,.5); }

/* ---------- ultimates ---------- */
.ult-btn { position: relative; width: 64px; border-radius: 14px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; display: grid; place-items: center; align-content: center; gap: 0; color: #fff;
  background: conic-gradient(var(--uc, #ffd060) var(--f, 0%), rgba(255,255,255,.06) 0) border-box; box-shadow: inset 0 0 0 3px rgba(10,16,34,.92), 0 2px 0 rgba(0,0,0,.4); }
.ult-btn::before { content: ''; position: absolute; inset: 4px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, #2a3a6a, #0c1428); z-index: 0; }
.ult-btn b, .ult-btn small { position: relative; z-index: 1; } .ult-btn b { font-family: var(--title); font-weight: 400; font-size: 17px; letter-spacing: 1px; } .ult-btn small { font-size: 10px; font-weight: 800; color: #c8d6f4; }
.ult-btn.full { animation: ultGlow 1s ease-in-out infinite; } .ult-btn.full small { color: #ffe890; }
@keyframes ultGlow { 50% { box-shadow: inset 0 0 0 3px rgba(10,16,34,.92), 0 0 22px 6px var(--uc, #ffd060); transform: translateY(-2px); } }
.ult-btn.locked { opacity: .55; filter: grayscale(.7); }
.ult-cut { position: fixed; inset: 0; z-index: 7000; pointer-events: none; display: grid; align-items: center; animation: ultFade 1.5s ease forwards; }
@keyframes ultFade { 0% { background: rgba(0,0,0,0); } 15% { background: rgba(0,0,0,.45); } 80% { background: rgba(0,0,0,.35); } 100% { background: rgba(0,0,0,0); opacity: 0; } }
.ult-band { position: relative; height: 150px; display: flex; align-items: center; gap: 24px; padding-left: 12vw; overflow: hidden; background: linear-gradient(90deg, rgba(10,8,24,.0), rgba(10,8,24,.92) 20%, rgba(10,8,24,.92) 80%, rgba(10,8,24,0));
  border-top: 3px solid var(--uc); border-bottom: 3px solid var(--uc); box-shadow: 0 0 40px var(--uc); animation: ultBand 1.5s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes ultBand { 0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.ult-face { width: 190px; height: 190px; image-rendering: pixelated; margin-top: 30px; animation: ultSlide 1.5s cubic-bezier(.2,.9,.2,1) forwards; filter: drop-shadow(0 0 16px var(--uc)); }
@keyframes ultSlide { 0% { transform: translateX(-60vw); } 20% { transform: translateX(0); } 80% { transform: translateX(3vw); } 100% { transform: translateX(80vw); } }
.ult-text { display: grid; animation: ultText 1.5s cubic-bezier(.2,.9,.2,1) forwards; } .ult-text small { color: var(--uc); font-weight: 900; letter-spacing: 6px; font-size: 14px; }
.ult-text b { font-family: var(--title); font-weight: 400; font-size: 64px; color: #fff; -webkit-text-stroke: 3px rgba(0,0,0,.6); paint-order: stroke fill; text-shadow: 0 0 24px var(--uc), 0 5px 0 rgba(0,0,0,.5); }
@keyframes ultText { 0% { transform: translateX(60vw); opacity: 0; } 22% { transform: translateX(0); opacity: 1; } 80% { transform: translateX(-2vw); opacity: 1; } 100% { transform: translateX(-40vw); opacity: 0; } }
.ult-card { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; border: 2px solid var(--uc); background: linear-gradient(135deg, #1a1430, #2a1e4a); color: #fff; }
.ult-card small { color: var(--uc); font-weight: 900; letter-spacing: 2px; font-size: 11px; } .ult-card b { font-family: var(--title); font-weight: 400; font-size: 20px; display: block; } .ult-card .note { color: #c8c0e8 !important; margin: 2px 0 0; }
.ult-meter { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; } .ult-meter i { display: block; height: 100%; background: var(--uc); }

/* ---------- simulated players in chat and the feed ---------- */
.chat-log .sim { opacity: .78; font-style: italic; } .chat-log .sim b { color: #8fd8c8 !important; font-style: normal; }
.chat-log .sim b::before { content: 'SIM'; display: inline-block; margin-right: 4px; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 900; line-height: 13px; vertical-align: 1px; color: #0e2a26; background: #6fc8b8; font-style: normal; }
.feed-item.sim { opacity: .8; } .feed-item.sim::before { content: 'SIM'; float: right; font-size: 9px; font-weight: 900; padding: 0 4px; border-radius: 4px; color: #0e2a26; background: #6fc8b8; }
.pk-ai { font-style: normal; font-size: 9px; font-weight: 900; margin-left: 4px; padding: 0 4px; border-radius: 4px; background: #6fc8b8; color: #0e2a26; vertical-align: 1px; }
.sim-set { margin-top: 10px; padding-top: 6px; border-top: 1px solid #c8d8ee; }

/* ---------- Lumen Market and Auction House ---------- */
.tr-banner { display: grid; gap: 2px; padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; color: #fff; }
.tr-banner b { font-family: var(--title); font-weight: 400; font-size: 20px; } .tr-banner span { font-size: 12px; opacity: .9; }
.tr-banner.lumen { background: linear-gradient(120deg, #2a4aa8, #6a3ac8 60%, #9a5ae0); box-shadow: 0 4px 14px rgba(90,60,200,.35); }
.tr-banner.auction { background: linear-gradient(120deg, #8a3a10, #c8701a 55%, #e8a83a); box-shadow: 0 4px 14px rgba(200,110,30,.35); }
.tr-need { padding: 18px; text-align: center; border-radius: 12px; background: #fff; border: 1px dashed #9ab4dc; } .tr-need b { font-family: var(--title); font-weight: 400; font-size: 18px; color: #2a56b0; }
.tr-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.tr-row { grid-template-columns: 40px 1fr auto auto !important; align-items: center; }
.ah-row { grid-template-columns: 40px 1fr 92px auto !important; } .ah-row.lead { background: #f0fff4 !important; border-color: #8ad8a0 !important; }
.ah-time { display: grid; font-size: 12px; font-weight: 800; color: #2a56b0; text-align: center; } .ah-time.soon { color: #d8402a; } .ah-time small { font-size: 10px; color: #5a6c8c; font-weight: 700; }
.ah-bidbox { display: flex; gap: 4px; align-items: center; } .tr-bid { width: 90px; }
.tr-st { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; text-transform: capitalize; background: #e8eef7; color: #5a6c8c; } .tr-st.sold { background: #e3f6e8; color: #1f6a3a; } .tr-st.open { background: #e3f6e8; color: #1f6a3a; }
.tr-curf { margin-bottom: 8px; }
.tr-tabs { margin-bottom: 8px; align-items: center; } .tr-tabs .eq-tabs { margin-bottom: 0; flex: 1; }

/* ---------- Lumen Exchange, drag-to-sell, side dock ---------- */
.tr-banner.lumen { grid-template-columns: 1fr auto; align-items: center; display: grid; }
.x-ticker { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.14); }
.x-ticker small { display: block; font-size: 10px; letter-spacing: 2px; opacity: .85; } .x-ticker b { font-family: var(--title); font-weight: 400; font-size: 20px; margin-right: 6px; }
.x-chg { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,.2); } .x-chg.up { color: #b8ffcc; } .x-chg.down { color: #ffc0b8; }
.x-spark { width: 120px; height: 34px; background: rgba(255,255,255,.9); border-radius: 6px; }
.x-chart { width: 100%; height: auto; border: 1px solid #c8d8ee; border-radius: 10px; display: block; }
.x-stats { display: flex; gap: 14px; justify-content: center; margin: 6px 0; font-size: 12px; color: #5a6c8c; } .x-stats b { color: #1c2a44; }
.x-main { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items: start; }
.x-book { display: grid; gap: 2px; padding: 6px; border-radius: 10px; background: #fff; border: 1px solid #c8d8ee; font-size: 12px; }
.x-bh, .x-lvl { display: grid; grid-template-columns: 1fr 1fr 60px; gap: 6px; padding: 3px 6px; } .x-bh { color: #7a8aa8; font-weight: 700; font-size: 11px; }
.x-lvl { border-radius: 6px; cursor: pointer; font-weight: 700; } .x-lvl small { color: #8a9ab8; font-weight: 400; } .x-lvl:hover { filter: brightness(.95); }
.x-lvl.ask { background: #fdeceb; color: #c03a30; } .x-lvl.bid { background: #e8f7ee; color: #1f8a4c; }
.x-mid { display: flex; justify-content: space-between; align-items: baseline; padding: 6px; margin: 2px 0; border-top: 1px solid #e4ebf5; border-bottom: 1px solid #e4ebf5; } .x-mid b { font-size: 15px; color: #1c2a44; } .x-mid small { color: #7a8aa8; }
.x-form { display: grid; gap: 5px; } .x-form label { font-size: 12px; font-weight: 700; color: #3a4a6a; }
.x-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .x-sides button { padding: 8px; border-radius: 8px; border: 1px solid #c8d8ee; background: #fff; font-weight: 800; color: #5a6c8c; cursor: pointer; }
.x-sides .buy.on { background: linear-gradient(180deg, #34b874, #1f9a5a); color: #fff; border-color: #1a7a48; } .x-sides .sell.on { background: linear-gradient(180deg, #ee6a5e, #d8443a); color: #fff; border-color: #b0362e; }
.x-quick { display: flex; gap: 4px; flex-wrap: wrap; } .x-total { padding: 6px 8px; border-radius: 8px; background: #f4f7fc; border: 1px dashed #b8cce6; font-size: 12px; font-weight: 700; color: #2a3a5a; }
.win .btn.x-buy { background: linear-gradient(180deg, #34b874, #1f9a5a); color: #fff; border-color: #1a7a48; } .win .btn.x-sell { background: linear-gradient(180deg, #ee6a5e, #d8443a); color: #fff; border-color: #b0362e; }
.win.tr-dropping { outline: 3px dashed #f2b632; outline-offset: -6px; }
.win.tr-dropping .win-body::after { content: 'Drop the item here'; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: #f2b632; color: #3a2400; font-weight: 800; font-size: 13px; pointer-events: none; }
.tr-dock { position: absolute; right: 12px; bottom: 96px; display: grid; gap: 8px; z-index: 5; }
.tr-dock-btn { position: relative; width: 58px; padding: 6px 0 4px; display: grid; justify-items: center; gap: 1px; border-radius: 14px; border: 1px solid var(--trim2); background: var(--glass); color: #e8eefc; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,230,160,.25); transition: transform .12s; }
.tr-dock-btn:hover { transform: translateX(-3px); border-color: #ffd860; } .tr-dock-ic { width: 34px; height: 34px; } .tr-dock-ic svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.tr-dock-btn small { font-size: 10.5px; font-weight: 800; }
.tr-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #e0483a; color: #fff; font-size: 10px; font-weight: 900; font-style: normal; display: grid; place-items: center; box-shadow: 0 0 0 2px #0e1424; }
.tr-badge.lead { background: #1f9a5a; } .tr-badge[hidden] { display: none; }
.tr-banner.lumen > div > b { display: block; } .tr-tabs .eq-tabs button { white-space: nowrap; }

/* ---------- healer ---------- */
.heal-row { grid-template-columns: 38px 1fr auto auto !important; align-items: center; } .heal-on { font-weight: 800; color: #1f8a4c; font-size: 11px; }
.heal-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.heal-pack { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; text-align: center; border: 2px solid #f0c050; background: linear-gradient(180deg, #fffbe8, #fff0c0); }
.heal-pack b { font-family: var(--title); font-weight: 400; font-size: 18px; color: #8a5a08; } .heal-pack small { color: #6a5a3a; } .heal-price { font-weight: 900; font-size: 16px; color: #3a2400; }
.heal-pack.royal { border-color: #b07aff; background: linear-gradient(180deg, #f8f0ff, #e8d8ff); } .heal-pack.royal b { color: #6a3ab0; }

/* buff icons sit in a column beside the minimap */
#buffs.buffs { position: absolute; left: auto; right: 240px; top: 12px; display: flex; flex-direction: column; gap: 4px; max-height: calc(var(--hud-h, 100vh) - 220px); flex-wrap: wrap-reverse; align-content: flex-end; }
#buffs .buff { width: 38px; padding: 2px; border-radius: 9px; background: var(--glass); border: 1px solid var(--trim2); display: grid; justify-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
#buffs .buff canvas { width: 30px !important; height: 30px !important; } #buffs .buff small { font-size: 9px; font-weight: 800; color: #ffe890; line-height: 11px; }
#buffs .buff { height: auto; overflow: visible; } #buffs .buff small { position: static; text-shadow: none; }

/* ---------- vehicles: (drawn in code) · slots ---------- */
.sl-machine { display: grid; gap: 8px; justify-items: center; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, #c8282e, #8a1218); border: 4px solid #ffd040; box-shadow: inset 0 0 0 3px #5a0a0e, 0 8px 20px rgba(0,0,0,.35); }
.sl-machine.won { animation: slWin .5s ease-in-out 3; } @keyframes slWin { 50% { box-shadow: inset 0 0 0 3px #5a0a0e, 0 0 30px 8px #ffd040; } }
.sl-top { font-family: var(--title); font-size: 22px; color: #ffe890; letter-spacing: 3px; text-shadow: 0 3px 0 #5a0a0e; }
.sl-reels { width: 360px; height: 130px; border-radius: 10px; border: 4px solid #2a0a0e; background: #fff; }
.sl-msg { min-height: 22px; font-weight: 900; color: #ffe8c0; text-align: center; } .sl-msg.win { color: #fff36a; font-size: 17px; text-shadow: 0 0 10px #ffb000; }
.sl-bets { display: flex; gap: 6px; } .sl-bets button { padding: 6px 12px; border-radius: 99px; border: 2px solid #ffd040; background: #5a0a0e; color: #ffe890; font-weight: 800; cursor: pointer; } .sl-bets button.on { background: #ffd040; color: #5a0a0e; }
.sl-spin { width: 200px; padding: 12px; border-radius: 14px; border: 0; cursor: pointer; font-family: var(--title); font-size: 26px; letter-spacing: 4px; color: #3a2400; background: linear-gradient(180deg, #fff3a0, #ffc020 55%, #e08a10); box-shadow: 0 5px 0 #7a4a08, 0 8px 18px rgba(0,0,0,.35); }
.sl-spin:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a4a08; } .sl-spin:disabled { filter: grayscale(.6); cursor: default; }
.sl-odds { color: #ffd8c8 !important; text-align: center; }
.sl-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 0; } .sl-pays > div { display: flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 8px; background: #fff; border: 1px solid #c8d8ee; }
.sl-pays canvas { width: 24px; height: 24px; } .sl-pays b { margin-left: auto; color: #b07800; } .sl-pays small { font-size: 11px; color: #3a4a6a; } .sl-pays .sl-chest { grid-column: 1 / -1; background: #fff6d8; border-color: #f0c050; }
.sl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .sl-stats div { display: grid; text-align: center; padding: 4px; border-radius: 8px; background: #fff; border: 1px solid #c8d8ee; } .sl-stats small { font-size: 10px; color: #5a6c8c; }

/* ---------- titles and the Monster Log ---------- */
.ti-list { display: grid; gap: 4px; margin-top: 8px; max-height: 470px; overflow-y: auto; }
.ti-row { display: grid; grid-template-columns: 1.2fr 1fr 110px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: #f2f5fa; border: 1px solid #d8e2f0; opacity: .75; }
.ti-row.have { opacity: 1; background: #fff; border-left: 4px solid var(--tc); } .ti-row.on { box-shadow: 0 0 0 2px var(--tc); }
.ti-name b { display: block; color: #1c2a44; } .ti-row.have .ti-name b { color: var(--tc); text-shadow: 0 0 1px rgba(0,0,0,.4); } .ti-name small { font-size: 11px; color: #5a6c8c; }
.ti-fx { font-size: 11px; font-weight: 700; color: #2f6a3a; }
.ti-bar { position: relative; height: 14px; border-radius: 7px; background: #dfe6f2; overflow: hidden; } .ti-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6aa8ff, #2f6fe0); }
.ti-bar span { position: relative; display: block; text-align: center; font-size: 9px; font-weight: 800; line-height: 14px; color: #1c2a44; } .ti-bar.small { height: 5px; width: 100%; }
.ml-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 440px; overflow-y: auto; }
.ml-card { display: grid; justify-items: center; gap: 1px; padding: 6px; border-radius: 10px; background: #fff; border: 1px solid #c8d8ee; text-align: center; } .ml-card canvas { image-rendering: pixelated; }
.ml-card b { font-size: 11px; color: #1c2a44; } .ml-card small { font-size: 10px; color: #5a6c8c; } .ml-card.unseen canvas { filter: brightness(0) opacity(.3); }
.ml-tier { font-size: 10px; font-weight: 900; min-height: 12px; color: #b07800; } .ml-card.t0 { border-color: #8ad0ff; } .ml-card.t1 { border-color: #c070ff; } .ml-card.t2 { border-color: #ffb020; box-shadow: 0 0 8px rgba(255,176,32,.5); }
.ml-max { font-size: 10px; font-weight: 900; color: #ffb020; }

/* ---------- price charts ---------- */
.mk-row { grid-template-columns: 38px 1fr auto auto auto !important; } .pc-btn { padding: 2px 4px !important; } .pc-spark { display: block; border-radius: 4px; }
.pc-mini { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; background: #fff; border: 1px solid #c8d8ee; cursor: pointer; } .pc-mini small { display: block; font-size: 10px; color: #5a6c8c; } .pc-mini b { color: #1c2a44; margin-right: 6px; }
.pc-dem { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; } .pc-dem.hi { background: #e3f6e8; color: #1f6a3a; } .pc-dem.lo { background: #fde8e4; color: #a03020; } .pc-dem.mid { background: #eef2f8; color: #3a4a6a; }
.pc-stats .pc-dem { border-radius: 8px; font-size: inherit; }
.pc-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; } .pc-now { display: grid; justify-items: end; } .pc-now b { font-family: var(--title); font-weight: 400; font-size: 22px; color: #1c2a44; }
.pc-head .x-chg.up { background: #e3f6e8; color: #1f8a4c; } .pc-head .x-chg.down { background: #fde8e4; color: #c03a30; }
.pc-chart { width: 100%; height: auto; border: 1px solid #c8d8ee; border-radius: 10px; display: block; }
.pc-legend { display: flex; gap: 16px; justify-content: center; margin: 6px 0; font-size: 12px; color: #3a4a6a; } .pc-legend i { display: inline-block; width: 14px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }
.pc-legend .ln { background: #1f9a5a; height: 3px; vertical-align: 2px; } .pc-legend .br { background: rgba(90,140,220,.4); }
.pc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .pc-stats > div { display: grid; text-align: center; padding: 5px; border-radius: 8px; background: #fff; border: 1px solid #c8d8ee; } .pc-stats small { font-size: 10px; color: #5a6c8c; }
.ti-row.have .ti-name b { color: color-mix(in srgb, var(--tc) 55%, #10182c); text-shadow: none; }