/* Lumora Online v1.0: salon, pets, armor shop, arena, newcomer gift (windows use the light theme from ui2.css) */
.bad { color: #c8302a; font-weight: 700; }

/* ---------- Vela's salon ---------- */
.sty { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.sty-left { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.sty-left canvas.sty-pv { width: 200px; height: 230px; margin: 0 auto; border-radius: 14px; background: radial-gradient(circle at 50% 60%, #fff4fb, #f0d8ec 70%, #e2c4e0); border: 2px solid #e8b0d8; image-rendering: pixelated; }
.sty-sum { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 14px; color: #1c2a44; }
.sty-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1c2a44; display: inline-block; }
.sty-bill { background: #fff; border: 1px solid #c8d8ee; border-radius: 10px; padding: 6px 10px; font-size: 13px; color: #3a4a6a; }
.sty-bill > div { display: flex; justify-content: space-between; padding: 2px 0; }
.sty-bill .tot { border-top: 1px solid #dde6f4; margin-top: 3px; padding-top: 5px; color: #8a5a08; font-size: 14px; }
.sty-hat { font-size: 12px; color: #3a4a6a; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.sty-right h3 { margin: 2px 0 6px; }
.sty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 330px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.sty-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 3px; border-radius: 10px; border: 1px solid #c8d8ee; background: #fff; color: #1c2a44; cursor: pointer; }
.sty-card:hover { border-color: #e870b8; transform: translateY(-1px); }
.sty-card.on { border: 2px solid #e04aa0; background: #fff0f8; box-shadow: 0 0 0 3px rgba(224, 74, 160, .18); }
.sty-card.cur::after { content: 'Now'; position: absolute; top: 2px; left: 3px; font-size: 9px; background: #2f6fe0; color: #fff; border-radius: 4px; padding: 0 3px; }
.sty-card canvas { border-radius: 8px; background: linear-gradient(180deg, #eef3fb, #dce6f6); }
.sty-card small { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 66px; }
.sty-card .sty-new { position: absolute; top: 2px; right: 3px; font-size: 8px; font-style: normal; font-weight: 800; background: #ff4a8a; color: #fff; border-radius: 4px; padding: 0 3px; }
.sty-sw button { width: 22px; height: 22px; box-shadow: 0 0 0 1px #9ab4dc; border-color: #fff; }
.sty-cf { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #3a4a6a; }
.sty-cf canvas { border-radius: 10px; background: radial-gradient(circle at 50% 60%, #fff4fb, #ecd2e8); border: 1px solid #e8b0d8; display: block; }
.sty-arrow { font-size: 26px; color: #e04aa0; }

/* ---------- pets ---------- */
.pet-top { margin-bottom: 4px; color: #1c2a44; font-weight: 700; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 470px; overflow-y: auto; padding: 2px; }
.pet-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 12px; border: 1px solid #c8d8ee; background: #fff; text-align: center; color: #1c2a44; }
.pet-card canvas { width: 96px; height: 84px; }
canvas.pet-pv { border-radius: 10px; background: radial-gradient(circle at 50% 75%, #4a5a92, #232c52 75%); }
.pet-card.own { border-color: #5a9ae8; }
.pet-card.on { border: 2px solid #e8b840; background: #fffbea; box-shadow: 0 0 0 3px rgba(232, 184, 64, .2); }
.pet-card small { font-size: 11px; line-height: 1.25; min-height: 28px; }
.pet-bonus { font-size: 12px; color: #1f8a4a; font-weight: 800; }

/* ---------- Brannoc's Armory and the arena shop ---------- */
.arm-tabs button { padding: 4px 9px; }
.arm-zeny { color: #8a5a08; font-weight: 800; }
.arm-list, .ar-shop { display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow-y: auto; margin-top: 6px; padding-right: 3px; }
.arm-row { display: grid; grid-template-columns: 40px 1fr auto auto auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: #fff; border: 1px solid #c8d8ee; color: #1c2a44; }
.arm-row:hover { border-color: #7f9cd0; }
.arm-row.locked { opacity: .6; }
.arm-info { display: flex; flex-direction: column; line-height: 1.25; }
.arm-info small { font-size: 11px; color: #3a4a6a; }
.arm-price { color: #8a5a08; font-weight: 800; white-space: nowrap; }
.arm-cmp { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.arm-cmp.up { color: #17733c; background: #dcf5e4; }
.arm-cmp.down { color: #b0302a; background: #fde2de; }
.arm-cmp.same { color: #4a5a7a; background: #e8eef7; }
.arm-eq { display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }

/* ---------- Grand Arena ---------- */
.ar-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.ar-top .eq-tabs { margin-left: auto; }
.ar-pts { color: #8a5a08; font-weight: 800; font-size: 15px; }
.ar-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ar-mode { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; border: 2px solid var(--ac); background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 16%, #fff), #fff 60%); color: #1c2a44; }
.ar-mode-head b { font-size: 24px; display: block; color: #1c2a44; font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; }
.ar-mode-head span { color: color-mix(in srgb, var(--ac) 70%, #000); font-weight: 800; font-size: 13px; }
.ar-icons { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ar-icons i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ar-icons i.blue { background: #3a8aff; } .ar-icons i.red { background: #ff4a3a; }
.ar-icons em { font-size: 11px; color: #3a4a6a; margin: 0 3px; font-weight: 800; }
.ar-rec { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; }
.ar-mode small { font-size: 11px; line-height: 1.3; flex: 1; }
.ar-search { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #1c2a44; }
.ar-search h3 { margin: 4px 0 0; }
.ar-radar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #3a8aff; position: relative; overflow: hidden; background: radial-gradient(circle, #dcebff, #a8c8f0); }
.ar-radar i { position: absolute; left: 50%; top: 50%; width: 50%; height: 3px; background: linear-gradient(90deg, #1a5ad8, transparent); transform-origin: 0 50%; animation: ar-spin 1.4s linear infinite; }
.ar-search.found .ar-radar { border-color: #e8b840; background: radial-gradient(circle, #fff6d0, #f0d890); } .ar-search.found .ar-radar i { background: #b07800; animation-duration: .4s; }
@keyframes ar-spin { to { transform: rotate(360deg); } }
.ar-teams { display: flex; align-items: center; gap: 12px; justify-content: center; width: 100%; }
.ar-team { display: flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 8px; border-radius: 12px; background: #fff; text-align: left; }
.ar-team > b { font-size: 13px; }
.ar-team.blue { border: 2px solid #3a8aff; } .ar-team.blue > b { color: #1a5ad8; }
.ar-team.red { border: 2px solid #ff4a3a; } .ar-team.red > b { color: #c8302a; }
.ar-vs { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 28px; color: #b07800; }
.ar-slot { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; background: #f2f6fc; }
.ar-slot.on { background: #e6efff; animation: ar-pop .3s ease-out; } .ar-team.red .ar-slot.on { background: #ffeceb; }
.ar-slot.ar-me { box-shadow: inset 0 0 0 2px #e8b840; }
.ar-slot .ar-q { width: 44px; height: 40px; display: grid; place-items: center; font-weight: 900; color: #8a9ab8; border: 1px dashed #9ab4dc; border-radius: 8px; }
.ar-slot small { font-size: 12px; font-weight: 700; }
@keyframes ar-pop { from { transform: scale(.9); opacity: .3; } }
.ar-result { text-align: center; color: #1c2a44; } .ar-result h2 { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 42px; margin: 4px 0; }
.ar-result.win h2 { color: #c88a08; text-shadow: 0 3px 0 #f4dc90; } .ar-result.lose h2 { color: #c8302a; }
.ar-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.ar-res-grid div { background: #fff; border: 1px solid #c8d8ee; border-radius: 10px; padding: 6px; } .ar-res-grid small { display: block; color: #5a6c8c; font-size: 11px; } .ar-res-grid b { font-size: 18px; }
/* over the game world (dark glass) */
.ar-hud { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 14px; background: rgba(10, 14, 30, .82); border: 1px solid #3a4a72; z-index: 30; pointer-events: none; }
.ar-side { display: flex; gap: 5px; }
.ar-pip { width: 14px; height: 30px; border-radius: 4px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; display: inline-block; border: 1px solid rgba(255, 255, 255, .35); }
.ar-pip i { position: absolute; left: 0; right: 0; bottom: 0; }
.ar-side.blue .ar-pip i { background: linear-gradient(0deg, #2a6ad8, #7ac0ff); } .ar-side.red .ar-pip i { background: linear-gradient(0deg, #c82a1a, #ff8a6a); }
.ar-pip.ar-mine { border-color: #ffd040; } .ar-pip.ko { opacity: .35; }
.ar-mid { text-align: center; color: #fff; min-width: 120px; } .ar-mid small { display: block; font-size: 11px; color: #c8d4ee; } .ar-mid b { font-size: 22px; font-family: 'Lilita One', sans-serif; font-weight: 400; }
.ar-chip { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 25; padding: 5px 14px; border-radius: 20px; border: 1px solid #5ab0ff; background: rgba(10, 20, 44, .9); color: #dfe8ff; font-weight: 700; cursor: pointer; }
body.arena-on #trDock, body.arena-on .feed { display: none; }
.nb-card { margin-bottom: 8px; }
@media (max-width: 700px) { .sty { grid-template-columns: 1fr; } .ar-modes { grid-template-columns: 1fr; } .ar-teams { flex-direction: column; } }
#win-job .jobs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { #win-job .jobs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- skill levels ---------- */
.skill[data-k] { grid-template-columns: 50px 44px 1fr auto; }
.skill.locked[data-k] { grid-template-columns: 44px 1fr auto; }
.sk-lv { display: grid; justify-items: center; line-height: 1; padding: 3px 0; border-radius: 8px; background: #eef3fb; border: 1px solid #c8d8ee; }
.sk-lv b { font-size: 17px; color: #2a56b0; } .sk-lv small { font-size: 9px; color: #5a6c8c; font-weight: 700; }
.sk-lv.plan { background: #fff6d8; border-color: #e8b840; } .sk-lv.plan b { color: #b07800; }
.sk-pm { display: flex; gap: 2px; margin-top: 3px; }
.sk-btn { width: 20px; height: 18px; padding: 0; border-radius: 5px; border: 1px solid #9ab4dc; background: #fff; color: #2a56b0; font-weight: 900; line-height: 1; cursor: pointer; }
.sk-btn.plus:not(:disabled) { background: #2f6fe0; border-color: #2f6fe0; color: #fff; } .sk-btn:disabled { opacity: .35; cursor: default; }
.sk-lvtxt { font-size: 11px; color: #2a56b0; font-weight: 700; margin-top: 2px; }
.sk-points { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid #c8d8ee; color: #1c2a44; }
.sk-points b { color: #2a56b0; font-size: 16px; } .sk-points .note { margin-right: auto; }
/* ---------- new items ---------- */
.new-badge { position: absolute; top: 0; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ff3a4a; color: #fff; font: 900 12px/16px 'Segoe UI', sans-serif; font-style: normal; text-align: center; border: 2px solid #fff; animation: nb-pulse 1.2s ease-in-out infinite; pointer-events: none; }
[data-win="inv"] { position: relative; }
@keyframes nb-pulse { 50% { transform: scale(1.18); } }
.bag-new { position: absolute; top: 3px; left: 3px; font-size: 8px; font-weight: 900; color: #fff; background: #ff3a4a; border-radius: 4px; padding: 0 3px; }
/* ---------- Monster Log rewards ---------- */
.ml-coll { padding: 8px 10px; margin: 6px 0 8px; border-radius: 10px; background: #fff; border: 1px solid #c8d8ee; color: #1c2a44; }
.ml-total { font-size: 12px; font-weight: 800; color: #1f8a4a; }
.ml-sets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 6px; }
.ml-set { display: grid; padding: 4px 6px; border-radius: 8px; background: #f2f6fc; border: 1px dashed #9ab4dc; text-align: center; }
.ml-set b { font-size: 12px; } .ml-set small { font-size: 10px; color: #5a6c8c; }
.ml-set.on { background: #dcf5e4; border: 1px solid #3ab06a; } .ml-set.on small { color: #17733c; font-weight: 700; }
.ml-stat { font-size: 10px; font-weight: 800; color: #8a9ab8; } .ml-stat.got { color: #1f8a4a; } .ml-stat small { font-weight: 600; }

/* ---------- guilds ---------- */
.gd-emblem { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--gc, #2f6fe0); color: #fff; font-size: 15px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.gd-emblem.big { width: 54px; height: 54px; font-size: 30px; border-radius: 14px; }
.gd-preview, .gd-head, .gd-cf { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #c8d8ee; color: #1c2a44; }
.gd-head { border-left: 5px solid var(--gc); } .gd-head .gd-emblem { background: var(--gc); }
.gd-preview b, .gd-title { font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 22px; display: block; }
.gd-lbl { display: block; font-size: 12px; font-weight: 800; color: #2a56b0; margin: 8px 0 3px; }
.gd-name { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid #9ab4dc; font: inherit; }
.gd-pick { display: flex; gap: 5px; flex-wrap: wrap; }
.gd-sym { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #9ab4dc; background: #fff; font-size: 18px; cursor: pointer; } .gd-sym.on { border: 2px solid #e8b840; background: #fff6d8; }
.gd-col { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9ab4dc; cursor: pointer; } .gd-col.on { box-shadow: 0 0 0 3px #e8b840; }
.gd-cost { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; color: #1c2a44; }
.gd-bar-l { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; color: #1c2a44; }
.gd-bar { height: 12px; border-radius: 6px; background: #e2e9f4; overflow: hidden; margin-top: 3px; } .gd-bar i { display: block; height: 100%; border-radius: 6px; }
.gd-bar.small { height: 7px; } .gd-bar.small i { background: linear-gradient(90deg, #f0b030, #ffd860); }
.gd-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; } .gd-perks div { padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid #c8d8ee; color: #1c2a44; } .gd-perks small { display: block; color: #5a6c8c; font-size: 11px; } .gd-perks b { font-size: 12px; color: #1f8a4a; }
.gd-mem { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #fff; border: 1px solid #c8d8ee; color: #1c2a44; } .gd-mem small { color: #5a6c8c; font-size: 11px; }

/* ---------- right side: a compact dock beside the Feed (they no longer overlap) ---------- */
.tr-dock { gap: 5px; bottom: 92px; }
.tr-dock-btn { width: 54px; padding: 4px 0 3px; border-radius: 12px; }
.tr-dock-ic, .tr-dock-ic svg { width: 30px; height: 30px; }
.tr-dock-btn small { font-size: 10px; }
.feed { right: 74px; width: 210px; }

/* ---------- mount picker on the Ride button ---------- */
.rp-box { position: fixed; z-index: 60; width: max-content; max-width: min(560px, calc(var(--hud-w, 100vw) - 16px)); padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #f5f8fd, #e4ebf6); border: 1px solid #7f9cd0; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); color: #1c2a44; animation: rp-in .14s ease-out; }
@keyframes rp-in { from { opacity: 0; transform: translateY(6px); } }
.rp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .rp-head b { font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 17px; color: #2a56b0; } .rp-head small { color: #5a6c8c; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, 98px); gap: 6px; max-height: 320px; overflow-y: auto; }
.rp-card { position: relative; display: grid; justify-items: center; gap: 1px; padding: 5px 3px; border-radius: 10px; border: 1px solid #c8d8ee; background: #fff; color: #1c2a44; cursor: pointer; }
.rp-card:hover { border-color: #e8b840; transform: translateY(-2px); }
.rp-card.on { border: 2px solid #3ab06a; background: #effaf2; } .rp-card.last { border-color: #9ab4dc; }
.rp-card canvas { width: 74px; height: 58px; }
.rp-card b { font-size: 11px; line-height: 1.15; text-align: center; } .rp-card small { font-size: 10px; color: #1f8a4a; font-weight: 700; }
.rp-tag { position: absolute; top: 3px; right: 3px; font-style: normal; font-size: 9px; font-weight: 900; color: #fff; background: #3ab06a; border-radius: 4px; padding: 0 4px; }
.rp-empty { max-width: 300px; margin: 4px 0; font-size: 13px; }
.rp-foot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.ult-btn.cooling { filter: grayscale(.7) brightness(.85); } .ult-btn.cooling small { color: #9ad0ff; font-variant-numeric: tabular-nums; }

/* ---------- guild life: tabs, joining, members, the Vault, Top Guilds ---------- */
.gd-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-bottom: 8px; }
.gd-tab { border: 1px solid #c8d8ee; background: #f4f7fc; color: #4a5c7c; border-radius: 10px; padding: 6px 4px; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.gd-tab.on { background: linear-gradient(180deg, #ffd768, #e0a22a); color: #3a2400; border-color: #b07a10; }
.gd-joinlist { display: grid; gap: 6px; max-height: min(430px, calc(var(--hud-h, 100vh) - 260px)); overflow-y: auto; scrollbar-gutter: stable; }
.gd-jcard { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #c8d8ee; border-left: 5px solid var(--gc); color: #1c2a44; }
.gd-jcard .gd-emblem.big { width: 44px; height: 44px; font-size: 24px; background: var(--gc); }
.gd-jinfo { display: grid; gap: 1px; min-width: 0; } .gd-jinfo b { font-size: 14px; } .gd-jinfo small { color: #5a6a88; font-size: 11px; } .gd-jinfo i { color: #3a4a68; font-size: 11.5px; }
.gd-jtags { display: flex; gap: 4px; margin-top: 2px; } .gd-jtags span { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.gd-jtags .ok { background: #e3f6e8; color: #1f6a3a; } .gd-jtags .bad { background: #fde6e6; color: #a02a2a; } .gd-jtags .warn { background: #fff2d8; color: #8a5a08; }
.gd-pending { position: absolute; top: 4px; right: 10px; font-size: 10px; font-weight: 800; color: #b07a10; }
.gd-memlist { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.gd-memlist .gd-mem, .gd-app { grid-template-columns: auto 1fr auto; } .gd-mem div, .gd-app div { display: grid; min-width: 0; } .gd-mem small, .gd-app small { color: #5a6a88; font-size: 11px; }
.gd-mem .rk-face, .gd-app .rk-face { border-radius: 50%; background: #e4ecf8; }
.gd-app { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #fffaf0; border: 1px solid #f0d8a0; color: #1c2a44; margin-top: 4px; }
.gd-app i { font-size: 11.5px; color: #6a5a38; }
.gd-vault { display: grid; gap: 2px; padding: 12px; border-radius: 12px; color: #fff4c0; background: linear-gradient(135deg, #1a2a5a, #3a2c16); border: 2px solid #c8a040; }
.gd-vault b { font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 22px; } .gd-vault small { color: #e8dcb0; }
.gd-lvpill { flex: none; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 99px; background: #1c3166; color: #ffe28a; }
.gd-top .gd-emblem { flex: none; background: var(--gc); } .gd-top .rk-n { width: 30px; } .gd-top.t1 { background: #fff8e0; border-color: #ffd060; }
.gd-toplist { max-height: min(460px, calc(var(--hud-h, 100vh) - 280px)); }
.rk-tabs { grid-template-columns: repeat(4, 1fr); } .rk-tab { padding: 7px 3px; font-size: 12px; white-space: nowrap; }
.gv-coins, .gv-cost { color: #a06a10; }
.gv-panel { border-color: #c8a040; } .gv-panel .np-head b { color: #ffe28a; }
.gv-panel { background: linear-gradient(180deg, rgba(26,36,80,.94), rgba(30,22,10,.94)); box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 18px rgba(255,200,64,.25); }

/* ---------- item rarity colours ---------- */
canvas.icon.r-common, canvas.icon.r-uncommon, canvas.icon.r-rare, canvas.icon.r-epic, canvas.icon.r-legendary { border-radius: 8px; box-shadow: inset 0 0 0 2px var(--rc); background: radial-gradient(circle at 50% 55%, var(--rg) 0%, transparent 72%); }
.r-common { --rc: #b8c0cc; --rg: rgba(154,164,178,.18); } .r-uncommon { --rc: #3ab06a; --rg: rgba(58,176,106,.28); } .r-rare { --rc: #2f8ae0; --rg: rgba(47,138,224,.32); }
.r-epic { --rc: #a04ae8; --rg: rgba(160,74,232,.36); } .r-legendary { --rc: #f0902a; --rg: rgba(255,170,40,.45); }
canvas.icon.r-epic { box-shadow: inset 0 0 0 2px var(--rc), 0 0 8px rgba(160,74,232,.55); }
canvas.icon.r-legendary { box-shadow: inset 0 0 0 2px var(--rc), 0 0 10px rgba(255,160,40,.75); animation: r-leg 2.4s ease-in-out infinite; }
@keyframes r-leg { 50% { box-shadow: inset 0 0 0 2px #ffd060, 0 0 14px rgba(255,190,60,.95); } }
.bag-card:has(.r-uncommon) .bag-name, .shop-row:has(.r-uncommon) b, .eq-slot:has(.r-uncommon) .eq-lbl { color: #1f8a4a; }
.bag-card:has(.r-rare) .bag-name, .shop-row:has(.r-rare) b, .eq-slot:has(.r-rare) .eq-lbl { color: #1f6ac0; }
.bag-card:has(.r-epic) .bag-name, .shop-row:has(.r-epic) b, .eq-slot:has(.r-epic) .eq-lbl { color: #8a34d0; }
.bag-card:has(.r-legendary) .bag-name, .shop-row:has(.r-legendary) b, .eq-slot:has(.r-legendary) .eq-lbl { color: #d06a10; }
.bag-card:has(.r-uncommon) { border-color: #9ad8b0; } .bag-card:has(.r-rare) { border-color: #8ab8ec; }
.bag-card:has(.r-epic) { border-color: #c8a0f0; background: linear-gradient(180deg, #faf4ff, #fff); } .bag-card:has(.r-legendary) { border-color: #f0b860; background: linear-gradient(180deg, #fff6e4, #fff); }
.r-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 900; vertical-align: middle; color: #fff; background: var(--rc); }
.r-tag.r-common { color: #3a4458; }
/* Endless Tower */
.et-panel { border-color: var(--ea, #b89aff); background: linear-gradient(180deg, rgba(30,20,60,.94), rgba(14,12,30,.94)); box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 18px rgba(184,154,255,.25); }
.et-panel .np-head b { color: #e0d0ff; }
.et-floor { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; } .et-floor b { font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 30px; line-height: 1; color: var(--ea, #ffd060); text-shadow: 0 0 10px rgba(255,255,255,.25); } .et-floor small { color: #c8b8e8; }
.et-prog { height: 6px; border-radius: 3px; background: #1e1438; overflow: hidden; margin-bottom: 6px; } .et-prog i { display: block; height: 100%; background: linear-gradient(90deg, #9adf7a, #f08ad0, #ff8a3a, #bfe8ff, #ffd060); background-size: 250px 100%; }
.et-card { display: grid; gap: 2px; padding: 12px; border-radius: 12px; color: #f0e8ff; background: linear-gradient(135deg, #2a1650, #10203a); border: 2px solid #b89aff; margin-bottom: 8px; }
.et-card b { font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 22px; } .et-card small { color: #d8ccf0; }
.et-starts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.et-coins, .et-cost { color: #6a4ac0; }
/* Leveling Guide and level spots */
.qitem.guide { border-left-color: #3ab06a; } .qtag.guide { background: #2a9a5a; }
.lg-now { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #fff4c8, #ffe08a); border: 2px solid #e0a22a; margin-bottom: 8px; }
.lg-now small { display: block; color: #7a5a1a; } .lg-now b { color: #3a2400; font-size: 15px; }
.lg-steps { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.lg-step { border-radius: 10px; border: 1px solid #d8dce8; background: #f6f7fb; padding: 6px 10px; }
.lg-step summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; } .lg-step summary::-webkit-details-marker { display: none; }
.lg-step summary small { margin-left: auto; color: #7a8090; font-size: 11px; }
.lg-step.on { border: 2px solid #e0a22a; background: #fffaf0; } .lg-step.on summary small { color: #c07a10; font-weight: 700; }
.lg-step.done { opacity: .7; } .lg-step.done summary small { color: #2a9a5a; }
.lg-step ul { margin: 6px 0 2px; padding-left: 18px; font-size: 12px; color: #4a5060; } .lg-step li { margin: 2px 0; }
.lg-lv { display: inline-block; min-width: 62px; text-align: center; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 6px; background: #2f6fe0; color: #fff; }
.lg-hunt { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; margin: 3px 0; background: #fff; border: 1px solid #e2e5ee; }
.lg-hunt.fit { border-color: #e0a22a; background: #fffaf0; } .lg-hunt > div { flex: 1; } .lg-hunt b { display: block; font-size: 13px; } .lg-hunt small { color: #6a7080; font-size: 11px; }
.lg-thumb { width: 34px; height: 34px; image-rendering: pixelated; } .lg-ico { width: 34px; text-align: center; font-size: 22px; }
.lg-spotlist { display: grid; gap: 3px; } .lg-spot { display: flex; align-items: center; gap: 6px; font-size: 12px; } .lg-spot > span:nth-child(2) { flex: 1; }
.lg-spot.fit .lg-lv { background: #e0a22a; color: #3a2400; } .lg-open { margin-top: 8px; }
/* the World Map as an EXP map */
.lg-rank-title { font-family: var(--title); font-weight: 400; font-size: 19px; color: #2a56b0; }
.lg-ranklist { display: grid; gap: 4px; max-height: 330px; overflow-y: auto; padding-right: 3px; }
.lg-opt { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 8px; background: #fff; border: 1px solid #e2e5ee; }
.lg-opt.top { border: 2px solid #e0a22a; background: #fffaf0; } .lg-opt.lock { opacity: .55; }
.lg-opt b { display: block; font-size: 12.5px; } .lg-opt small { display: block; font-size: 10.5px; color: #6a7080; }
.lg-exp { text-align: right; } .lg-exp b { color: #2a9a5a; } .lg-exp small { white-space: nowrap; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1.5px solid #3a2a14; flex: none; }
.lg-spot small { color: #2a9a5a; font-weight: 700; }
.lg-ranklist { overflow-x: hidden; } .lg-opt > div { min-width: 0; } .lg-opt small { overflow-wrap: anywhere; }

/* ---------- Monster Cards (cards.js) ---------- */
.cd-head { display: grid; gap: 4px; margin-bottom: 8px; }
.cd-head b { font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 18px; color: #2a2040; }
.cd-head small { color: #6a6478; }
.cd-bar { height: 8px; border-radius: 4px; background: #e4e0ec; overflow: hidden; }
.cd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a4ad0, #ffd060); }
.cd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cd-chips button { border: 1px solid #d4cfe0; background: #fff; border-radius: 12px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: #3a3450; }
.cd-chips button.on { background: #3a2a6a; color: #fff; border-color: #3a2a6a; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; max-height: 214px; overflow-y: auto; padding: 2px; }
.cd-cell { position: relative; border: 2px solid transparent; background: none; border-radius: 8px; padding: 2px; cursor: pointer; transition: transform .12s; }
.cd-cell:hover { transform: translateY(-3px) rotate(-1.5deg); }
.cd-cell.sel { border-color: #ffb020; box-shadow: 0 0 10px rgba(255, 176, 32, .6); }
.cd-cell.unseen { opacity: .8; }
.cd-thumb { display: block; border-radius: 6px; }
.cd-n { position: absolute; right: 4px; bottom: 4px; background: #2a2040; color: #ffe070; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 8px; }
.cd-detail { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e4e0ec; align-items: flex-start; }
.cd-big { width: 120px; height: 168px; border-radius: 10px; box-shadow: 0 6px 18px rgba(30, 20, 60, .35); flex: none; }
.detail .cd-big { float: left; width: 100px; height: 140px; margin: 0 10px 6px 0; }
.cd-info { flex: 1; display: grid; gap: 6px; align-content: start; }
.cd-info h4 { margin: 0; font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 20px; color: #2a2040; }
.cd-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-mods span { background: #efe8ff; color: #4a2a9a; border-radius: 10px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.cd-targets { display: grid; gap: 4px; max-height: 96px; overflow-y: auto; }
.cd-target { display: flex; align-items: center; gap: 8px; border: 1px solid #d4cfe0; background: #fff; border-radius: 8px; padding: 3px 8px; cursor: pointer; text-align: left; color: #2a2040; }
.cd-target:hover { border-color: #7a4ad0; background: #f6f2ff; }
.cd-target em { margin-left: auto; font-size: 11px; color: #2a8a4a; font-style: normal; font-weight: 700; }
.cd-pip { position: absolute; left: 3px; top: 3px; width: 9px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, #ffe070, #c87aff); border: 1px solid #2a2040; }
.bag-card { position: relative; }

/* ---------- Rubies (ruby.js) ---------- */
.chip.ruby { cursor: pointer; }
.chip.ruby i { display: inline-block; width: 11px; height: 10px; margin-right: 5px; vertical-align: -1px; background: linear-gradient(160deg, #ffc0cc, #e8203e 55%, #8a0a1e); clip-path: polygon(20% 0, 80% 0, 100% 35%, 50% 100%, 0 35%); }
.chip.ruby b { font-weight: 800; color: #ffd0d8; }
.rb-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #fff0f2, #ffe0e6); border: 1px solid #f4b8c4; border-radius: 10px; padding: 10px 14px; margin: 6px 0; }
.rb-hero b { display: block; font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; font-size: 24px; color: #9a0a24; }
.rb-hero small { color: #7a4a54; }
.rb-gem { width: 38px; height: 34px; background: linear-gradient(160deg, #ffd0d8, #f02848 50%, #7a0418); clip-path: polygon(20% 0, 80% 0, 100% 35%, 50% 100%, 0 35%); filter: drop-shadow(0 2px 3px rgba(120, 0, 20, .4)); flex: none; }
.rb-form { display: grid; grid-template-columns: 130px 1fr auto; gap: 6px; margin: 4px 0 8px; }
.rb-form input { padding: 6px 8px; border: 1px solid #d4cfe0; border-radius: 6px; font: inherit; min-width: 0; }
#win-ruby h4 { margin: 10px 0 4px; color: #2a2040; }
.rb-list { display: grid; gap: 3px; max-height: 170px; overflow-y: auto; }
.rb-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 4px 8px; background: #faf8fd; border-radius: 6px; font-size: 12.5px; }
.rb-row small { color: #7a7488; }
.rb-plus { color: #1a8a4a; } .rb-minus { color: #c0283e; }
.rb-st { font-style: normal; font-weight: 700; font-size: 11.5px; padding: 1px 8px; border-radius: 9px; background: #eee; }
.rb-st.wait { background: #fff2c8; color: #8a5a00; } .rb-st.ok { background: #d8f4e0; color: #1a6a3a; } .rb-st.no { background: #ffe0e4; color: #a01a2e; } .rb-st.off { color: #777; }
.rb-req { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; background: #faf8fd; border: 1px solid #ece8f4; border-radius: 8px; }
.rb-req small { display: block; color: #7a7488; }
.rb-pay { font-size: 12.5px; color: #2a2040; background: #fff; border: 1px dashed #d4cfe0; border-radius: 6px; padding: 3px 6px; margin-top: 3px; word-break: break-word; }
.rb-acts { display: flex; gap: 4px; align-items: center; } .rb-acts input { width: 120px; padding: 4px 6px; border: 1px solid #d4cfe0; border-radius: 6px; }
.rb-look { margin-top: 8px; display: grid; gap: 4px; }

/* party level gap (party.js PARTY_GAP) */
.pp-row.gap { opacity: .7; } .pp-row.gap small { color: #ff9a9a; }
.pp-eta.pp-gap { background: #c0283e; color: #fff; font-style: normal; }
/* v1.1.2 poker table calls */
.chat-log .poker { color: #8af0c0; } .chat-log .poker .pk-call-link { color: #ffe070; font-weight: 800; text-decoration: underline; cursor: pointer; margin-left: 2px; }
.feed-item.poker b { color: #8af0c0; } .feed-item.poker i { color: #ffe070; }
.pk-live { font-size: 11.5px; font-weight: 800; color: #a8c8b0; } .pk-live.on { color: #7dff9a; text-shadow: 0 0 6px rgba(80,255,140,.5); }
.pk-tcard.live { box-shadow: 0 0 0 2px rgba(125,255,154,.5), 0 4px 14px rgba(0,0,0,.35); }
.chat-log.f-say .poker, .chat-log.f-trade .poker, .chat-log.f-party .poker { display: none; } /* calls show in All, World and System */

/* right-click item stats (js/iteminfo.js) */
.itip { position: fixed; z-index: 9500; width: 270px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #1c2c56, #121e3e); border: 2px solid #4a6aae; color: #e8eefc;
  box-shadow: 0 10px 26px rgba(0,0,0,.55); font-size: 12.5px; transform-origin: 0 0; animation: cfIn .1s ease-out; pointer-events: auto; }
.itip-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.itip-head .icon { flex: none; background: rgba(255,255,255,.06); border-radius: 8px; }
.itip-name { display: block; font-size: 14.5px; line-height: 1.2; }
.itip-kind { color: #9fb0d4; font-size: 11.5px; margin-top: 3px; } .itip-kind .r-tag { margin: 0 6px 0 0; }
.itip-nums { display: flex; gap: 6px; margin: 6px 0; } .itip-nums > div { flex: 1; background: rgba(255,255,255,.07); border-radius: 8px; padding: 4px 6px; text-align: center; }
.itip-nums small { display: block; color: #9fb0d4; font-size: 10px; font-weight: 800; letter-spacing: .5px; } .itip-nums b { font-size: 16px; }
.itip-nums em { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; } .itip-nums em.up { color: #6ae08a; } .itip-nums em.down { color: #ff7a6a; }
.itip-mods { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; } .itip-mods span { background: rgba(122,224,138,.14); color: #8af0a0; border-radius: 99px; padding: 1px 8px; font-weight: 700; font-size: 11.5px; }
.itip-needs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0; font-size: 11.5px; } .itip-needs .ok { color: #9fb0d4; } .itip-needs .bad { color: #ff7a6a; font-weight: 700; }
.itip-card { margin: 6px 0; padding: 5px 8px; border-radius: 8px; background: rgba(200,122,255,.14); border: 1px solid rgba(200,122,255,.35); } .itip-card b { display: block; color: #e0bcff; } .itip-card span { font-size: 11.5px; }
.itip-card.empty { color: #9fb0d4; background: rgba(255,255,255,.05); border-style: dashed; border-color: rgba(255,255,255,.2); }
.itip-line { color: #9fb0d4; font-size: 11px; margin: 3px 0; } .itip-line.on { color: #8af0a0; font-weight: 700; }
.itip-desc { margin: 6px 0 0; color: #c8d4ee; font-style: italic; line-height: 1.35; }
.itip-foot { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); color: #f6c845; font-size: 11.5px; font-weight: 700; }
.itip-btn { margin-top: 8px; width: 100%; }
html.ui-small .itip { transform: scale(var(--ui)); }

/* Vending (js/vend.js) */
.hb-btn.vend { background: linear-gradient(180deg, #2f9a8a, #1a6458); border-color: #5ad0b8; } .hb-btn.vend.on { background: linear-gradient(180deg, #e0b030, #a07010); border-color: #ffd060; }
.vd-title { display: flex; flex-direction: column; gap: 4px; font-weight: 700; margin-bottom: 6px; } .vd-title input { padding: 7px 10px; border-radius: 8px; border: 1px solid #b8c4dc; font: inherit; font-size: 14px; }
.vd-cart .shop-row { grid-template-columns: 32px 1fr auto auto auto; align-items: center; }
.vd-f { display: flex; flex-direction: column; font-size: 10.5px; font-weight: 700; color: #6a7894; } .vd-f input, .vd-qty { width: 84px; padding: 4px 6px; border-radius: 6px; border: 1px solid #b8c4dc; font: inherit; }
.vd-qty { width: 56px; }
.vd-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; max-height: 210px; overflow-y: auto; padding: 2px; }
.vd-sign { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: linear-gradient(180deg, #b8743c, #9a5e2e); border: 2px solid #5a3418; color: #fff; font-size: 15px; margin-bottom: 6px; }
.vd-sign i { width: 16px; height: 16px; border-radius: 3px; background: #2f6fe0; }
.vd-out { opacity: .5; }
.shop-row:has(.vd-qty) { grid-template-columns: 38px 1fr auto auto auto; }

/* buff rings + tooltip, movable Feed / buffs (hudmove.js) */
#buffs .buff { cursor: grab; position: relative; touch-action: none; }
#buffs .buff-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: conic-gradient(var(--bc, #ffd84a) calc(var(--p, 1) * 360deg), rgba(255,255,255,.14) 0); }
#buffs .buff-ic canvas { width: 28px !important; height: 28px !important; border-radius: 7px; background: #15203e; }
#buffs .buff:hover { border-color: var(--bc, #ffd84a); box-shadow: 0 0 10px var(--bc, #ffd84a); }
#buffs .buff.ending .buff-ic { animation: buffBlink .5s ease-in-out infinite alternate; }
#buffs .buff.ending small { color: #ff8a7a; }
@keyframes buffBlink { from { opacity: 1; } to { opacity: .35; } }
#buffs.hm-drag, .feed.hm-drag { opacity: .85; outline: 2px dashed #ffd84a; outline-offset: 3px; cursor: grabbing; }
#buffs.hm-drag .buff { cursor: grabbing; }
.feed-head { cursor: grab; display: flex; align-items: center; justify-content: space-between; user-select: none; touch-action: none; }
.feed-head .hm-grip { color: rgba(255,255,255,.45); font-size: 13px; letter-spacing: -1px; }
.feed-head:hover .hm-grip { color: #ffd84a; }
.btip { pointer-events: none; width: 250px; }
.btip-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 8px; }
.btip-bar i { display: block; height: 100%; border-radius: 99px; transition: width .25s linear; }
.btip-bar.ending i { animation: buffBlink .5s ease-in-out infinite alternate; }

/* War of the Roots (siege.js) */
.sg-panel { border-color: #5aa850; } .sg-panel .np-head b { color: #b8f08a; }
.sg-phase { margin: 2px 0 6px; padding: 4px 8px; border-radius: 8px; font-weight: 800; font-size: 11.5px; }
.sg-phase.atk { background: rgba(255,90,74,.18); color: #ffb0a0; } .sg-phase.hold { background: rgba(255,208,64,.18); color: #ffe28a; }
.sg-bar i { background: linear-gradient(90deg, #1a8a5a, #5affb0) !important; } .sg-bar.mine i { background: linear-gradient(90deg, #c08a10, #ffe070) !important; }
.sg-board { margin: 4px 0; } .sg-board small { color: #ffb0a0; font-weight: 700; } .sg-board div { display: flex; justify-content: space-between; color: #e8dcff; }
.sg-chip { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); padding: 6px 16px; border-radius: 99px; border: 2px solid #ffd860; background: linear-gradient(180deg, #7a1a14, #3a0a08); color: #fff0c0; font-weight: 900; font-size: 13px; cursor: pointer; box-shadow: 0 0 18px rgba(255,90,40,.55); animation: sgPulse 1.6s ease-in-out infinite; }
@keyframes sgPulse { 50% { box-shadow: 0 0 6px rgba(255,90,40,.3); } }
.sg-top { display: flex; gap: 12px; align-items: stretch; margin: 8px 0; }
.sg-owner { flex: 1; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 22%, #fff), #fff); border: 2px solid var(--gc); }
.sg-owner small { display: block; color: #6a6a7a; font-size: 11px; } .sg-owner b { font-size: 18px; color: #1a1a2a; }
.sg-emblem { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gc) 60%, #fff), var(--gc)); border: 3px solid #ffd860; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.sg-live, .sg-next { flex: none; width: 170px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border-radius: 12px; padding: 8px; text-align: center; }
.sg-live { background: #3a0a08; color: #fff0c0; border: 2px solid #ff6a4a; } .sg-live b { font-size: 16px; letter-spacing: 1px; } .sg-live span { font-variant-numeric: tabular-nums; color: #ffd860; font-weight: 800; }
.sg-live i { width: 10px; height: 10px; border-radius: 50%; background: #ff4a3a; box-shadow: 0 0 10px #ff4a3a; animation: buffBlink .6s ease-in-out infinite alternate; }
.sg-next { background: #eef2f8; color: #4a5468; border: 2px dashed #b8c4d8; font-size: 12px; } .sg-next b { color: #1a2a4a; }
.sg-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; } .sg-rules div { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 10px; background: #f3f6ea; font-size: 12px; line-height: 1.3; } .sg-rules i { font-style: normal; font-size: 16px; }
.sg-tabs { margin-bottom: 6px; }
.sg-slot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 8px 10px; margin: 4px 0; border-radius: 10px; background: #f3f6ea; border: 1px solid #dfe6cf; }
.sg-slot.bad { border-color: #ff9a8a; background: #fff1ee; } .sg-slot.sg-add { background: #eef4ff; border-color: #cbd8f2; }
.sg-days { display: flex; gap: 3px; flex-wrap: wrap; } .sg-days button { min-width: 38px; padding: 5px 6px; border-radius: 7px; border: 1px solid #c8d0b8; background: #fff; color: #4a5468; font-weight: 800; font-size: 11.5px; cursor: pointer; }
.sg-days button.on { background: linear-gradient(180deg, #5aa850, #3a7e3a); color: #fff; border-color: #2e6a24; } .sg-days .sg-all { min-width: 0; color: #2f6fe0; }
.sg-f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 800; color: #6a7488; } .sg-f input, .sg-f select { padding: 4px 6px; border-radius: 7px; border: 1px solid #c8d0dc; font: inherit; font-size: 13px; color: #1a2a4a; background: #fff; }
.sg-date { flex: 1; align-self: center; color: #1a2a4a; }
.sg-soon { display: grid; gap: 3px; margin: 4px 0 8px; } .sg-soon div { display: flex; justify-content: space-between; padding: 4px 10px; border-radius: 8px; background: #f4f6fa; font-size: 12.5px; }
.sg-soon div.live { background: #3a0a08; color: #fff0c0; } .sg-soon small { font-weight: 800; color: #8a94a8; text-transform: uppercase; font-size: 10px; } .sg-soon .live small { color: #ff8a6a; }

/* War of the Roots: defender warps */
.sg-warps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0 2px; }
.sg-warps small { width: 100%; color: #ffe28a; font-weight: 700; }
.sg-warps.off small { color: #9aa0b0; font-weight: 400; }
.sg-warps .btn.small { padding: 2px 7px; font-size: 11px; }

/* Starlit Koi costume gacha */
.gc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .gc-head b { color: #ffd88a; font-size: 15px; } .gc-head small { color: var(--muted); }
.gc-hero { display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: radial-gradient(circle at 25% 40%, rgba(255,170,80,.25), transparent 60%), linear-gradient(135deg, #1a2350, #3a1f55 60%, #12324a); border: 1px solid #f0902a; }
.gc-views { display: flex; gap: 4px; flex-shrink: 0; } .gc-views canvas { background: rgba(0,0,0,.18); border-radius: 10px; }
.gc-info { flex: 1; min-width: 0; } .gc-info h3 { margin: 4px 0 2px; color: #ffcf7a; text-shadow: 0 0 8px rgba(255,160,40,.6); }
.gc-tag { display: inline-block; padding: 1px 8px; border-radius: 99px; background: linear-gradient(90deg, #f0902a, #ffd24a); color: #3a1800; font-size: 10px; font-weight: 900; letter-spacing: .5px; }
.gc-pity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; } .gc-pity div { background: rgba(0,0,0,.28); border-radius: 8px; padding: 4px 6px; text-align: center; }
.gc-pity small { display: block; color: var(--muted); font-size: 10px; } .gc-pity b { color: #ffe08a; }
.gc-feats { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; justify-content: center; }
.gc-mini { border-radius: 8px; padding: 2px; border: 2px solid; background: rgba(0,0,0,.25); } .gc-mini.r4 { border-color: #a04ae8; } .gc-mini.r3 { border-color: #2f8ae0; } .gc-mini.owned { opacity: .55; }
.gc-pulls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gc-pull { display: flex; flex-direction: column; align-items: center; padding: 8px !important; } .gc-pull b { font-size: 16px; } .gc-pull small { font-size: 11px; opacity: .85; }
.gc-pull.ten { background: linear-gradient(180deg, #ffb84a, #e0701a) !important; }
.gc-shards { font-size: 15px; color: #c8b8ff; margin: 4px 0 8px; } .gc-shards b { color: #fff; }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; }
.gc-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; border: 2px solid; background: rgba(0,0,0,.22); text-align: center; font-size: 12px; }
.gc-item.r5 { border-color: #f0902a; } .gc-item.r4 { border-color: #a04ae8; } .gc-item.r3 { border-color: #2f8ae0; } .gc-item.owned { background: rgba(80,200,120,.12); }
.gc-stars { color: #ffd24a; font-size: 11px; letter-spacing: 1px; text-shadow: 0 0 4px rgba(255,180,40,.8); }
.gc-rate { display: grid; grid-template-columns: 1.2fr 1.4fr .6fr; padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.08); } .gc-rate b { text-align: right; color: #ffe08a; }
.gc-hist { max-height: 200px; overflow: auto; } .gc-hist div { display: flex; gap: 8px; align-items: baseline; padding: 2px 4px; font-size: 12px; } .gc-hist small { margin-left: auto; color: var(--muted); }
.gc-hist .r5 b { color: #f0902a; } .gc-hist .r4 b { color: #c08aff; } .gc-hist .r3 b { color: #6ab4ff; } .gc-hist span { color: #ffd24a; min-width: 48px; }
.gc-link { margin-left: 6px; }
/* the capsule show */
.gc-ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(circle, rgba(40,30,80,.82), rgba(5,5,15,.94)); animation: gc-fade .3s; }
.gc-ov.best5 { background: radial-gradient(circle, rgba(140,90,20,.85), rgba(10,6,2,.95)); } .gc-ov.best4 { background: radial-gradient(circle, rgba(80,30,120,.85), rgba(8,4,16,.95)); }
.gc-ovbox { width: min(760px, calc(100vw - 32px)); text-align: center; }
.gc-ovhead { font-size: 22px; font-weight: 900; color: #ffe08a; text-shadow: 0 0 12px rgba(255,180,60,.8); margin-bottom: 14px; }
.gc-caps { display: grid; gap: 10px; justify-content: center; grid-template-columns: repeat(5, minmax(0, 124px)); } .gc-caps.n1 { grid-template-columns: 160px; }
.gc-cap { position: relative; height: 150px; border: 0; background: none; cursor: pointer; animation: gc-drop .7s cubic-bezier(.3,1.5,.6,1) both; animation-delay: var(--d); }
.gc-cap i { position: absolute; left: 50%; width: 70px; height: 35px; margin-left: -35px; border: 3px solid #1a1020; }
.gc-cap .gc-top { top: 40px; border-radius: 35px 35px 0 0; background: linear-gradient(160deg, #fff 0 15%, var(--c) 30%); border-bottom-width: 1.5px; }
.gc-cap .gc-bot { top: 75px; border-radius: 0 0 35px 35px; background: linear-gradient(180deg, #f4f4fa, #b8bccc); border-top-width: 1.5px; }
.gc-cap.r2 { --c: #9aa4b2; } .gc-cap.r3 { --c: #2f8ae0; } .gc-cap.r4 { --c: #a04ae8; } .gc-cap.r5 { --c: #ffb020; }
.gc-cap.r4, .gc-cap.r5 { filter: drop-shadow(0 0 12px var(--c)); } .gc-cap.r5 i { animation: gc-shake .5s infinite; }
.gc-cap:hover i { transform: translateY(-3px); }
.gc-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; min-height: 150px; border-radius: 12px; border: 2px solid; background: rgba(10,14,30,.9); animation: gc-pop .45s both; font-size: 12px; }
.gc-card.r2 { border-color: #9aa4b2; } .gc-card.r3 { border-color: #2f8ae0; box-shadow: 0 0 10px rgba(47,138,224,.5); } .gc-card.r4 { border-color: #a04ae8; box-shadow: 0 0 16px rgba(160,74,232,.7); }
.gc-card.r5 { border-color: #ffb020; box-shadow: 0 0 26px rgba(255,176,32,.9); background: radial-gradient(circle at 50% 35%, rgba(255,190,60,.35), rgba(20,12,4,.95) 70%); }
.gc-zeny { font-size: 34px; height: 60px; display: grid; place-items: center; }
.gc-name { line-height: 1.15; } .gc-new { background: #ff3a6a; color: #fff; font-weight: 900; font-size: 10px; padding: 1px 6px; border-radius: 99px; } .gc-dup { color: #c8b8ff; font-size: 11px; }
.gc-ovbtns { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
@keyframes gc-fade { from { opacity: 0; } }
@keyframes gc-drop { from { transform: translateY(-90vh) rotate(-30deg); opacity: 0; } 60% { opacity: 1; } }
@keyframes gc-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes gc-pop { from { transform: scale(.3) rotateY(90deg); opacity: 0; } 70% { transform: scale(1.08); } }
@media (max-width: 640px) { .gc-hero { flex-direction: column; align-items: center; } .gc-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gc-caps.n1 { grid-template-columns: 160px; } .gc-pity { grid-template-columns: 1fr 1fr 1fr; } }
.gc-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); } .gc-views canvas { width: 150px; height: 166px; }
@media (max-width: 640px) { .gc-hero { grid-template-columns: 1fr; justify-items: center; } }
.gc-info .note { color: #c8d2ec; } .gc-shards { color: #5a3ac8; font-weight: 700; } .gc-shards b { color: #2a1a6a; }
/* capsule pets: level cards in the Pet House */
.gp-sec { margin-top: 12px; } .gp-head { display: flex; flex-direction: column; margin-bottom: 6px; } .gp-head b { font-size: 15px; color: #1a4a9a; } .gp-head small { color: #5a6a8a; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.gp-card { display: flex; gap: 8px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px 6px 14px 6px; background: linear-gradient(135deg, #2a6ae8, #1a4ac0); border: 3px solid #e8f2ff; box-shadow: 0 3px 0 #0e2a7a, 0 4px 10px rgba(0,0,0,.25); color: #fff; }
.gp-card.r5 { background: linear-gradient(135deg, #f0a020, #c86a10); box-shadow: 0 3px 0 #6a3a08, 0 0 14px rgba(255,180,40,.6); }
.gp-card.r4 { background: linear-gradient(135deg, #8a4ae8, #5a2ab8); box-shadow: 0 3px 0 #2e1270, 0 4px 10px rgba(0,0,0,.25); }
.gp-card.on { outline: 3px solid #7aff9a; outline-offset: 1px; } .gp-card.locked .gp-pic canvas { filter: brightness(0) opacity(.45); }
.gp-pic { flex-shrink: 0; width: 78px; height: 70px; border-radius: 12px; background: radial-gradient(circle at 50% 60%, #ffffff, #cfe2ff); display: grid; place-items: center; border: 2px solid rgba(255,255,255,.8); }
.gp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gp-lv { display: flex; align-items: center; gap: 5px; } .gp-lv b { font-size: 16px; font-style: italic; text-shadow: 0 2px 0 rgba(0,0,0,.35); } .gp-el { display: inline-flex; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.gp-star { margin-left: auto; color: #ffe070; font-size: 10px; letter-spacing: 1px; }
.gp-name { font-weight: 900; font-size: 14px; letter-spacing: .5px; background: rgba(255,255,255,.92); color: #142a5a; border-radius: 6px; padding: 1px 8px; text-align: center; }
.gp-bar { display: flex; align-items: center; gap: 4px; } .gp-bar span { background: #0e1a3a; color: #fff; font-size: 9px; font-weight: 900; border-radius: 4px; padding: 0 4px; }
.gp-bar div { flex: 1; height: 9px; border-radius: 99px; background: #0e1a3a; border: 1.5px solid #0e1a3a; overflow: hidden; } .gp-bar i { display: block; height: 100%; background: linear-gradient(180deg, #8af06a, #3ac03a); border-radius: 99px; }
.gp-num { text-align: center; font-size: 11px; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.gp-bonus { font-size: 10.5px; opacity: .92; line-height: 1.2; } .gp-body .btn.small { align-self: flex-start; margin-top: 2px; }
.gc-kind { font-size: 9px; font-weight: 900; color: #3a1a00; background: #7affc8; border-radius: 99px; padding: 0 6px; } .gc-dup.lv { color: #7aff9a; font-weight: 800; }
/* World Boss: layered HP bar and portrait */
.wb-hp.wb-layers { height: 16px; border: 1.5px solid #000; } .wb-hp.wb-layers i { transition: none; } .wb-hp.wb-layers span { line-height: 16px; }
.wb-x { position: absolute; right: 5px; top: 0; font-size: 11px; font-weight: 900; font-style: italic; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.wb-face { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ffb070; background: radial-gradient(circle, #6a1a10, #1a0606); vertical-align: middle; margin-right: 6px; image-rendering: auto; }
.gp-pic canvas.pet-pv { background: none !important; border: 0 !important; box-shadow: none !important; width: 74px; height: 66px; }
.gp-card.locked .gp-pic canvas.pet-pv { filter: brightness(0) opacity(.5); }
.gc-card.pet canvas.pet-pv, .gc-item canvas.pet-pv, .gc-mini canvas.pet-pv { background: radial-gradient(circle at 50% 60%, #ffffff, #cfe2ff) !important; border-radius: 10px; }
/* stamina chip (stamina.js) */
.chip.stam { cursor: pointer; border: 1px solid var(--edge); color: inherit; font: inherit; font-weight: 700; } .chip.stam b { font-weight: 800; }
.chip.stam i { display: inline-block; width: 8px; height: 11px; margin-right: 5px; vertical-align: -1px; background: linear-gradient(180deg, #e8ff7a, #5ac82a); clip-path: polygon(60% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 56% 38%); }
.chip.stam.low { background: linear-gradient(180deg, #ffd768, #e0a22a); color: #3a2400; border-color: #b07a10; } .chip.stam.out { background: linear-gradient(180deg, #ff7a6a, #c8302a); color: #fff; border-color: #8a1a10; animation: pulse 1.2s infinite; }
/* the Aurora Wish (lumgacha.js) */
#win-lgacha .gc-head b { color: #14967e; }
#win-lgacha .gc-hero { background: radial-gradient(circle at 25% 35%, rgba(90,255,190,.22), transparent 60%), radial-gradient(circle at 80% 20%, rgba(190,120,255,.25), transparent 55%), linear-gradient(135deg, #0e1a3a, #1a2a5a 55%, #2a1a50); border-color: #6ae8c8; }
#win-lgacha .gc-info h3 { color: #b8fff0; text-shadow: 0 0 8px rgba(90,255,200,.6); } #win-lgacha .gc-tag { background: linear-gradient(90deg, #5affc0, #a88aff); color: #0a1a30; }
#win-lgacha .gc-pity b { color: #b8fff0; } #win-lgacha .gc-pull.ten { background: linear-gradient(180deg, #8a7aff, #4a3ad8) !important; } #win-lgacha .gc-shards { color: #14967e; }
.gc-ov.lg { background: radial-gradient(circle, rgba(20,70,90,.85), rgba(4,6,20,.95)); } .gc-ov.lg.best5 { background: radial-gradient(circle, rgba(40,140,110,.85), rgba(4,10,16,.95)); } .gc-ov.lg.best4 { background: radial-gradient(circle, rgba(70,40,140,.85), rgba(6,4,20,.95)); }
.gc-ov.lg .gc-ovhead { color: #b8fff0; text-shadow: 0 0 12px rgba(90,255,200,.8); }
.gc-ov.lg .gc-cap .gc-top { background: radial-gradient(circle at 35% 40%, #fff 0 10%, var(--c) 45%, #1a1a4a); } .gc-ov.lg .gc-cap .gc-bot { background: radial-gradient(circle at 50% 0, var(--c), #1a1a4a 70%); }
.gc-ov.lg .gc-cap.r5 { --c: #5affc0; } .gc-ov.lg .gc-card.r5 { border-color: #5affc0; box-shadow: 0 0 26px rgba(90,255,190,.9); background: radial-gradient(circle at 50% 35%, rgba(90,255,190,.3), rgba(4,16,20,.95) 70%); }
.lg-link { margin-left: 6px; }
/* fishing (fishing.js) */
.fs-hud { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 99px; background: rgba(10,24,40,.88); border: 1px solid #4a8ab8; color: #e8f4ff; font-size: 12px; white-space: nowrap; }
.fs-hud small { color: #9ab8d0; } .fs-hud .fs-tip { color: #9ae8ff; font-weight: 700; }
.fs-bait { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: inherit; border-radius: 99px; padding: 1px 8px 1px 2px; cursor: pointer; font: inherit; }
.fs-reel { position: fixed; left: 50%; top: 150px; transform: translateX(-50%); z-index: 150; width: min(340px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, #10283e, #0a1a2a); border: 2px solid var(--tc, #4a8ab8); box-shadow: 0 0 20px rgba(0,0,0,.5), 0 0 14px var(--tc); color: #e8f4ff; user-select: none; }
.fs-reel .fs-rt { display: block; font-size: 17px; color: #9ae8ff; } .fs-reel small { color: #9ab8d0; }
.fs-bar { position: relative; height: 22px; margin: 10px 0 8px; border-radius: 99px; background: #1a3a50; border: 2px solid #0a1420; overflow: hidden; }
.fs-zone { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, #7aff9a, #2ab85a); transition: left .15s; }
.fs-mark { position: absolute; top: -2px; bottom: -2px; width: 5px; margin-left: -2px; background: #fff; box-shadow: 0 0 6px #fff; border-radius: 3px; }
.fs-pips, .fs-lives { display: inline-flex; gap: 5px; margin: 0 6px; } .fs-pips i { width: 12px; height: 12px; border-radius: 50%; background: #2a4a60; border: 1px solid #0a1420; } .fs-pips i.on { background: #ffd24a; box-shadow: 0 0 6px #ffd24a; }
.fs-lives i { font-style: normal; color: #ff5a6a; } .fs-lives i.off { color: #3a3a4a; }
.fs-go { display: block; width: 100%; margin-top: 8px; font-size: 18px !important; padding: 8px !important; }
.fs-reel.shake { animation: gc-shake .3s; }
.fs-rods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fs-rod { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 10px; border: 2px solid #c8a050; background: rgba(200,160,80,.08); font-size: 12px; } .fs-rod.lum { border-color: #6a8ae8; background: rgba(100,130,230,.08); } .fs-rod.on { box-shadow: 0 0 0 2px #3ac87a inset; }
.fs-rod small { color: var(--muted); line-height: 1.25; } .fs-rodstat { font-weight: 700; color: #2f8ae0; } .fs-left { color: #2a9a5a; font-weight: 800; } .fs-rod .btn { margin-top: auto; }
.fs-rodpic { height: 26px; position: relative; } .fs-rodpic i { position: absolute; left: 10%; top: 50%; width: 80%; height: 4px; background: linear-gradient(90deg, #4a2c14 25%, var(--rc) 25%); transform: rotate(-14deg); border-radius: 2px; }
.fs-albhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .fs-albhead small { color: var(--muted); } .fs-albbar { flex-basis: 100%; height: 8px; border-radius: 99px; background: rgba(0,0,0,.15); overflow: hidden; } .fs-albbar i { display: block; height: 100%; background: linear-gradient(90deg, #5ac8f0, #8af0d0); }
.fs-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.fs-fish { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; border: 2px solid #9aa4b2; text-align: center; font-size: 12px; } .fs-fish.tr { border-color: #2f8ae0; } .fs-fish.tl { border-color: #ffb020; box-shadow: 0 0 8px rgba(255,176,32,.5); }
.fs-fish small { color: var(--muted); font-size: 10.5px; } .fs-fish.unk canvas { filter: brightness(0) opacity(.35); }
@media (max-width: 640px) { .fs-rods { grid-template-columns: 1fr; } .fs-hud { bottom: 150px; font-size: 11px; gap: 6px; } .fs-hud .fs-tip { display: none; } }
.fs-auto { background: #3a4a5a !important; color: #c8d8e8 !important; } .fs-auto.on { background: linear-gradient(180deg, #5aff9a, #1aa85a) !important; color: #0a2a14 !important; animation: pulse 1.6s infinite; }
#win-mounts .mnt-info h3 { color: #fff; text-shadow: 0 0 10px var(--tc), 0 1px 0 rgba(0,0,0,.6); } /* mount2.js: keep the mount name readable on the dark hero */

/* ===== casino2: roulette, dice, derby, scratch cards, prize counter ===== */
.c2-chips { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 8px 0 4px; flex-wrap: wrap; }
.c2-chipbtn { width: 46px; height: 46px; border-radius: 50%; border: 3px dashed #fff; font-weight: 900; font-size: 13px; color: #fff; cursor: pointer; box-shadow: 0 0 0 3px #1a1020, 0 3px 6px rgba(0,0,0,.35); text-shadow: 0 1px 2px #000; }
.c2-chipbtn.c1000 { background: #2f6fe0; } .c2-chipbtn.c10000 { background: #c81e2a; } .c2-chipbtn.c100000 { background: #1a1a24; border-color: #ffd040; color: #ffd040; }
.c2-chipbtn.on { transform: translateY(-4px); box-shadow: 0 0 0 3px #ffd040, 0 0 14px #ffd040; } .c2-chipbtn:disabled { opacity: .5; }
.c2-chip { position: absolute; right: 2px; top: 2px; min-width: 22px; padding: 1px 4px; border-radius: 99px; background: #ffd040; color: #3a2400; font: 900 10px/14px sans-serif; font-style: normal; border: 1px solid #7a4a08; box-shadow: 0 1px 3px rgba(0,0,0,.4); pointer-events: none; }
.c2-msg { min-height: 20px; font-weight: 900; color: #3a2a4a; text-align: center; } .c2-msg.c2-won { color: #c07800; font-size: 16px; text-shadow: 0 0 8px rgba(255,200,0,.5); }
.c2-stake { font-size: 13px; color: #5a6c8c; }
.c2-go { min-width: 130px; padding: 9px 14px; border-radius: 12px; border: 0; cursor: pointer; font-family: var(--title); font-size: 20px; letter-spacing: 3px; color: #3a2400; background: linear-gradient(180deg, #fff3a0, #ffc020 55%, #e08a10); box-shadow: 0 4px 0 #7a4a08, 0 6px 14px rgba(0,0,0,.3); }
.c2-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a4a08; } .c2-go:disabled { filter: grayscale(.7); cursor: default; }
.c2-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 6px 0; } .c2-row .c2-msg { flex: 1; text-align: left; }
.rl-top { display: flex; gap: 12px; align-items: center; }
.rl-wheel { width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,.4); flex: none; }
.rl-side { flex: 1; display: grid; gap: 8px; justify-items: center; }
.rl-hist { width: 100%; } .rl-hist small { color: #5a6c8c; } .rl-hist > div { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.rl-h { min-width: 22px; padding: 2px 4px; border-radius: 6px; text-align: center; font-weight: 900; font-size: 12px; color: #fff; background: #8a9ab8; }
.rl-h.red { background: #c81e2a; } .rl-h.black { background: #1a1a24; } .rl-h.green { background: #1a9a4a; } .rl-h:first-child { box-shadow: 0 0 0 2px #ffd040; }
.rl-board { display: grid; grid-template-columns: 34px repeat(12, 1fr); grid-template-rows: repeat(3, 34px) 28px 28px; gap: 2px; margin-top: 10px; padding: 6px; border-radius: 10px; background: #0e5a32; border: 3px solid #e0b030; }
.rl-c { position: relative; border: 1px solid rgba(255,255,255,.55); border-radius: 4px; color: #fff; font-weight: 900; font-size: 13px; cursor: pointer; padding: 0; background: transparent; }
.rl-c.red span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #c81e2a; } .rl-c.black span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1a1a24; }
.rl-c.green { background: #1a9a4a; } .rl-c.out { font-size: 12px; } .rl-c.out.red span, .rl-c.out.black span { width: 22px; height: 16px; border-radius: 3px; color: transparent; }
.rl-c:hover:not(:disabled) { background: rgba(255,255,255,.15); } .rl-c:disabled { cursor: default; }
.rl-c.hit { box-shadow: 0 0 0 3px #ffd040, 0 0 12px #ffd040; z-index: 1; animation: slWin .5s ease-in-out 3; }
.dc-felt, .db-track { display: block; width: 100%; border-radius: 12px; border: 3px solid #e0b030; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.db-track { image-rendering: auto; }
.dc-main { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dc-b { position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 8px; border: 2px solid #e0b030; background: #0e5a32; color: #fff; cursor: pointer; font-size: 13px; }
.dc-b small { color: #ffe890; font-size: 11px; } .dc-b.gold { background: #7a4a08; } .dc-b.gold b { color: #ffe070; } .dc-b:hover:not(:disabled) { filter: brightness(1.2); }
.dc-b.hit { box-shadow: 0 0 0 3px #ffd040, 0 0 12px #ffd040; }
.dc-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .dc-b.tri, .dc-b.face { padding: 5px 2px; }
#win-dice h4 { margin: 8px 0 4px; font-size: 12px; color: #3a4a6a; }
.dc-hist { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; font-size: 12px; } .dc-hist small { color: #5a6c8c; } .dc-hist span { padding: 2px 6px; border-radius: 6px; background: #eef3fb; border: 1px solid #c8d8ee; font-weight: 700; }
.db-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.db-r { position: relative; display: grid; grid-template-columns: 18px 34px 1fr auto auto; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 8px; border: 1px solid #c8d8ee; background: #fff; cursor: pointer; text-align: left; }
.db-r.on { border-color: #e0a010; background: #fff6d8; } .db-r:hover:not(:disabled) { border-color: #2f6fe0; }
.db-r .c2-chip { right: auto; left: 18px; top: -4px; }
.db-n { width: 18px; height: 18px; border-radius: 50%; background: #2a1a3a; color: #ffe070; font: 900 11px/18px sans-serif; text-align: center; }
.db-r small { font-size: 10px; color: #8a6a10; } .db-odds { font-weight: 900; color: #b07800; }
.sc-wrap { display: flex; gap: 12px; align-items: flex-start; }
.sc-left { display: grid; gap: 6px; justify-items: center; }
.sc-card { width: 282px; height: 282px; border-radius: 10px; cursor: crosshair; touch-action: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.sc-empty { width: 262px; height: 262px; padding: 10px; display: grid; place-items: center; text-align: center; border-radius: 10px; border: 2px dashed #c8d8ee; color: #5a6c8c; font-weight: 700; }
.sc-buy { flex: 1; display: grid; gap: 6px; }
.sc-t { display: grid; gap: 1px; padding: 8px; border-radius: 10px; border: 2px solid #7a4a08; cursor: pointer; text-align: left; color: #2a1a08; }
.sc-t.copper { background: linear-gradient(135deg, #f0b890, #c8784a); } .sc-t.silver { background: linear-gradient(135deg, #f4f8ff, #a8b8d0); } .sc-t.gold { background: linear-gradient(135deg, #fff3a0, #e8a820); }
.sc-t span { font-weight: 900; } .sc-t small { font-size: 11px; opacity: .8; } .sc-t:disabled { filter: grayscale(.6); opacity: .6; cursor: default; }
.sc-pays { display: grid; gap: 2px; font-size: 11px; color: #3a4a6a; } .sc-pays div { display: flex; align-items: center; gap: 4px; }
.c2-pz { display: grid; } .c2-pz small { font-size: 11px; } .c2-tix { font-weight: 900; color: #b07800; white-space: nowrap; }
#win-bar .shop-row { grid-template-columns: 40px 1fr auto auto; }
.c2-stats { grid-template-columns: repeat(4, 1fr); margin: 6px 0; }

/* daily tasks (daily.js) */
.qtag.daily { background: #d8762a; } .qitem.daily { border-left-color: #d8762a; }
.dt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.dt-head small { color: var(--muted, #8a7a66); }
.dt-row { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; border-radius: 8px; background: rgba(120, 90, 50, .08); border: 1px solid rgba(120, 90, 50, .18); }
.dt-row .icon { flex: none; }
.dt-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dt-mid small { font-size: 11px; opacity: .85; }
.dt-rw { color: #b07a1a; font-weight: 700; }
.dt-bar { position: relative; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .18); overflow: hidden; margin: 2px 0; }
.dt-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .3s; }
.dt-bar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.dt-ready { border-color: #e0b030; box-shadow: 0 0 0 1px #e0b030 inset, 0 0 10px rgba(240, 190, 60, .35); }
.dt-got { opacity: .6; }
.dt-ok { font-size: 11px; font-weight: 800; color: #3a9a5a; }
.dt-bonus { background: rgba(240, 190, 60, .12); }