@font-face { font-family: "Rajdhani"; font-weight: 600; font-display: swap; src: url("/fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-display: swap; src: url("/fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #050506;
  --surface: #0c0d10;
  --surface-2: #13151a;
  --line: #22252c;
  --text: #eef3f7;
  --muted: #8a919c;
  --accent: #ff8a1e;
  --accent-hot: #ffc23d;
  --accent-ink: #1a0b00;
  --accent-soft: rgba(255, 138, 30, 0.12);
  --cyan: #2fc6f5;
  --cyan-soft: rgba(47, 198, 245, 0.12);
  --danger: #ff4d5e;
  --ok: #3ff0a0;
  --warn: #ffc23d;
  --radius: 16px;
  --display: "Rajdhani", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--text); font: 16px/1.45 var(--sans);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,138,30,.09), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, rgba(47,198,245,.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, .btn, .chip, .tab span, .top-text strong, .big { font-family: var(--display); letter-spacing: .02em; }
h1 { font-size: 30px; line-height: 1.1; margin: 4px 0 6px; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); text-shadow: 0 0 12px rgba(47,198,245,.4); }
h2 { font-size: 21px; margin: 0; }
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--cyan); margin: 18px 4px 8px; }
.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }
.error { color: var(--danger); font-size: 14px; margin: 0; }
.error:empty { display: none; }
.center-text { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; }
p { margin: 0; }

.card { background: rgba(12,13,16,.92); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.screen.center { min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); }
.screen .card { width: 100%; max-width: 420px; }
.hero { text-align: center; display: flex; flex-direction: column; gap: 14px; border-color: rgba(255,138,30,.35); box-shadow: 0 0 30px rgba(255,138,30,.08); }
.logo { width: 200px; height: auto; margin: 0 auto; display: block; }
.logo.small { width: 110px; }
.perks { list-style: none; padding: 0; margin: 2px 0; display: grid; gap: 8px; text-align: left; }
.perks li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; font-size: 15px; }
.perks span { font-size: 19px; }
.steps { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; text-align: left; }
.steps li { display: flex; gap: 12px; align-items: center; font-size: 15.5px; }
.steps .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.ios-share { width: 20px; height: 20px; vertical-align: -4px; }
.point-down { font-size: 28px; color: var(--accent); animation: bob 1.2s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(6px); } }
.qr { width: 180px; height: 180px; margin: 6px auto; border-radius: 12px; background: #fff; padding: 6px; display: block; }
.note { border-radius: 12px; padding: 12px 14px; text-align: left; display: grid; gap: 4px; }
.note.warn { background: rgba(255,194,61,.1); border: 1px solid rgba(255,194,61,.35); }

.field { display: grid; gap: 6px; text-align: left; }
.field span { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
input { font: inherit; font-size: 17px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#code-in { font-family: var(--mono); font-size: 26px; letter-spacing: .35em; text-align: center; }

.btn { font: inherit; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; cursor: pointer; }
.btn.block { width: 100%; }
.btn.primary { background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); border-color: transparent; text-transform: uppercase; letter-spacing: .12em; box-shadow: 0 0 16px rgba(255,138,30,.3); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(255,77,94,.4); background: transparent; }
.btn.small { padding: 6px 12px; font-size: 15px; }
.btn:disabled { opacity: .5; }

/* app shell */
.app { padding: calc(64px + var(--safe-top)) 14px calc(84px + var(--safe-bottom)); max-width: 640px; margin: 0 auto; }
.top { position: fixed; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-top)) 16px 10px; background: rgba(5,5,6,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--accent), var(--accent-hot), var(--accent), transparent) 1; }
.top-logo { width: 36px; height: auto; }
.top-text { display: grid; line-height: 1.15; }
.top-text strong { font-size: 20px; text-transform: uppercase; letter-spacing: .1em; }
.top-text .muted { font-size: 13px; }
.tabs { position: fixed; inset: auto 0 0; z-index: 5; display: grid; grid-template-columns: repeat(6, 1fr); padding: 6px 4px calc(6px + var(--safe-bottom)); background: rgba(5,5,6,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.tab { display: grid; justify-items: center; gap: 2px; font: inherit; color: var(--muted); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.tab svg { width: 24px; height: 24px; fill: currentColor; }
.tab span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tab.active { color: var(--accent); }
.tab.active svg { filter: drop-shadow(0 0 6px rgba(255,138,30,.6)); }

.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #444a55; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px rgba(63,240,160,.6); }
.dot.off { background: var(--danger); }

.me { display: grid; gap: 10px; border-color: rgba(47,198,245,.3); }
.me h2 { font-size: 24px; }
.me-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.me-main { flex: 1; min-width: 0; display: grid; }
.me-main .muted { font-size: 13.5px; }

.status { display: grid; gap: 10px; }
.status-head { display: flex; align-items: baseline; gap: 8px; }
.status-head strong { flex: 1; font-family: var(--display); font-size: 20px; }
.big { font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1; }
.maps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.maps li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line); }
.maps li:first-child { border-top: 0; }
.map-name { flex: none; font-weight: 600; }
.map-who { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-count { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 17px; }
.maps li.down .map-count { color: var(--danger); font-size: 14px; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: inherit; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.chip.sm { font-size: 13.5px; padding: 4px 11px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#tribe-clusters:not(:empty) { margin-bottom: 12px; }

.tribe-head { display: flex; align-items: center; gap: 12px; }
.badge { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(255,138,30,.35); }
.tribe-title { display: grid; }
.tribe-title strong { font-family: var(--display); font-size: 23px; line-height: 1.1; }
.members summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: 18px; }
.members summary::-webkit-details-marker { display: none; }
.members summary::after { content: "\25BE"; color: var(--muted); margin-left: 8px; }
.members[open] summary::after { content: "\25B4"; }
.members summary .muted { margin-left: auto; font-family: var(--sans); font-weight: 400; font-size: 14px; }
.members ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.members li { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); }
.m-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.m-where { font-size: 13px; }
.tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--accent); border: 1px solid rgba(255,138,30,.4); }

.log { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.log li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; }
.log .when { display: grid; font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.log .what { display: grid; gap: 2px; overflow-wrap: anywhere; }
.log li.k-bad, .log li.c-raid { border-left: 3px solid var(--danger); }
.log li.k-bad .what > span:first-child { color: #ff8e98; }
.log li.k-good, .log li.c-tame { border-left: 3px solid var(--ok); }
.log li.k-good .what > span:first-child { color: #9cf7cc; }
.log li.k-cool .what > span:first-child { color: var(--cyan); }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.switch > span { display: grid; gap: 1px; }
.switch .muted { font-size: 13px; }
.switch input { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--ok); }
.switch input:checked::after { transform: translateX(20px); }

.toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: var(--cyan); color: #001018; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.5); text-align: center; }
.toast.bad { background: var(--danger); color: #fff; }

/* tribe chat */
.chat-view { padding-bottom: 64px; }
.chat-note { margin: 8px 2px 0; }
.chat-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-list li { max-width: 84%; display: grid; gap: 2px; }
.chat-list li.mine { align-self: flex-end; text-align: right; }
.chat-list .who { font-size: 12.5px; color: var(--muted); padding: 0 6px; }
.chat-list .who strong { color: var(--cyan); font-weight: 600; }
.chat-list .bubble { padding: 9px 13px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font-size: 15.5px; }
.chat-list li.mine .bubble { background: var(--accent-soft); border-color: rgba(255,138,30,.4); }
.chat-day { align-self: center !important; max-width: none !important; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 6px 0 2px; }
.chat-composer { position: fixed; left: 0; right: 0; bottom: calc(62px + var(--safe-bottom)); z-index: 4; display: flex; gap: 8px; padding: 8px 12px; background: rgba(5,5,6,.95); border-top: 1px solid var(--line); max-width: 640px; margin: 0 auto; }
.chat-composer input { flex: 1; padding: 10px 14px; border-radius: 999px; }
.chat-composer .btn { padding: 8px 16px; letter-spacing: .06em; }
.chat-empty { text-align: center; padding: 30px 10px; }

/* ---------- loot ---------- */
.r-common { --rc: #b0b8c4; } .r-uncommon { --rc: #4ade80; } .r-rare { --rc: #3b82f6; } .r-epic { --rc: #a855f7; } .r-legendary { --rc: #facc15; } .r-mythic { --rc: #ef4444; }
.wallet { display: grid; gap: 12px; border-color: rgba(255,138,30,.4); }
.wallet-top { display: flex; align-items: center; gap: 12px; }
.coin { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 35% 30%, #ffe08a, #ff9a1e 60%, #a85300); box-shadow: 0 0 16px rgba(255,170,40,.45), inset 0 -3px 6px rgba(0,0,0,.25); }
.wallet-amount { display: grid; line-height: 1.05; }
.wallet-amount strong { font-family: var(--display); font-size: 34px; }
.wallet-amount span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.wallet .btn { margin-left: auto; }
.pt-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pt-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); }
.seg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.seg-tabs button { font: inherit; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--muted); background: none; border: 0; border-radius: 10px; padding: 8px 4px; cursor: pointer; }
.seg-tabs button.on { background: var(--accent-soft); color: var(--accent); }
.box-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.box-card { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 16px 10px 12px; border-radius: 16px; font: inherit; color: inherit; cursor: pointer; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--bc, #ff8a1e) 26%, transparent), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--bc, #ff8a1e) 55%, var(--line)); }
.box-card .box-icon { font-size: 40px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bc, #ff8a1e) 70%, transparent)); }
.box-card strong { font-family: var(--display); font-size: 17px; line-height: 1.15; }
.box-card .price { font-family: var(--display); font-weight: 700; color: var(--accent-hot); }
.box-card .badge-free { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--ok); color: #002313; }
.odds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.odds li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--rc); }
.odds .o-name { flex: 1; min-width: 0; }
.odds .o-name small { display: block; color: var(--rc); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.odds .o-chance { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.item-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 16%, transparent), var(--surface) 55%); border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--line)); }
.item-row .i-icon { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; background: color-mix(in srgb, var(--rc) 18%, var(--surface-2)); }
.item-row .i-text { flex: 1; min-width: 0; display: grid; }
.item-row .i-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .i-text small { color: var(--rc); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.item-row .i-text .muted { font-size: 12.5px; }
.item-row.claimed { opacity: .55; }
.item-list { display: grid; gap: 8px; }
.empty-box { text-align: center; padding: 26px 12px; color: var(--muted); }

.modal { position: fixed; inset: 0; z-index: 30; display: grid; align-items: end; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-card { max-height: 86dvh; overflow: auto; background: var(--surface); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + var(--safe-bottom)); display: grid; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; }
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-head .box-icon { font-size: 40px; }
.modal-head h2 { font-size: 24px; }

/* the case opening */
.spin { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(90% 60% at 50% 40%, #2a1d08, #050506 70%); }
.spin-inner { width: 100%; max-width: 720px; display: grid; gap: 18px; padding: 0 0 calc(20px + var(--safe-bottom)); }
.spin-title { text-align: center; font-family: var(--display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-hot); margin: 0; }
.spin-window { position: relative; height: 150px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.35); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.spin-strip { position: absolute; top: 15px; left: 0; display: flex; gap: 8px; will-change: transform; }
.spin-card { flex: none; width: 112px; height: 120px; border-radius: 10px; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 8px; text-align: center; background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--rc) 22%, var(--surface))); border-bottom: 4px solid var(--rc); box-shadow: inset 0 0 18px color-mix(in srgb, var(--rc) 22%, transparent); }
.spin-card .c-icon { font-size: 36px; }
.spin-card .c-name { font-size: 12px; font-weight: 600; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
.spin-marker { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: var(--accent-hot); box-shadow: 0 0 12px var(--accent-hot), 0 0 24px var(--accent); }
.spin-marker::before, .spin-marker::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 8px solid transparent; }
.spin-marker::before { top: 0; border-top-color: var(--accent-hot); }
.spin-marker::after { bottom: 0; border-bottom-color: var(--accent-hot); }
.spin-card.win { animation: winpulse 1.2s ease-in-out infinite alternate; }
@keyframes winpulse { from { box-shadow: 0 0 10px var(--rc); } to { box-shadow: 0 0 34px var(--rc), 0 0 60px color-mix(in srgb, var(--rc) 50%, transparent); } }
.spin-result.r-legendary .r-name, .spin-result.r-mythic .r-name { text-shadow: 0 0 18px var(--rc); }
.spin-result { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 0 20px; animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.spin-result .r-rarity { font-family: var(--display); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 14px var(--rc); }
.spin-result .r-name { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.1; }
.spin-result .row { width: 100%; max-width: 380px; margin-top: 6px; }
.spin-actions { display: flex; justify-content: center; gap: 10px; }

.store-card { border-color: rgba(245, 158, 11, .35); }
.store-id { display: flex; align-items: center; gap: 8px; }
.store-id code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); user-select: all; -webkit-user-select: all; }
a.btn { display: block; text-align: center; text-decoration: none; }

/* Dino stat rolls */
.dino-mini { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.dino-mini b { color: var(--text); font-weight: 700; }
.dino-mini .best { color: var(--rc); font-weight: 700; }
.item-row.has-roll { cursor: pointer; }
.dino-sheet { width: 100%; max-width: 360px; justify-self: center; display: grid; gap: 8px; text-align: left; }
.dino-sheet .ds-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dino-sheet .ds-head strong { font-family: var(--display); font-size: 20px; letter-spacing: .04em; }
.dino-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dino-sheet li { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: 10px; font-size: 14px; }
.dino-sheet .ds-name { color: var(--muted); }
.dino-sheet .ds-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.dino-sheet .ds-bar i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--rc, #f59e0b) 70%, #fff 0%); transition: width .7s cubic-bezier(.2,.9,.3,1); }
.dino-sheet .ds-pts { font-family: var(--mono); font-weight: 700; text-align: right; }
.dino-sheet li.best .ds-name, .dino-sheet li.best .ds-pts { color: var(--rc, #f59e0b); }
.dino-sheet li.best .ds-bar i { box-shadow: 0 0 10px var(--rc, #f59e0b); }
.spin-result .dino-sheet { margin: 4px 0 6px; }
.modal-head .r-tag { color: var(--rc); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.odds .o-sub { display: block; font-size: 12px; color: var(--muted); }
/* Let the result scroll on short phones (the dino sheet makes it taller). */
.spin { overflow-y: auto; overscroll-behavior: contain; }
.spin-inner { padding-top: calc(16px + var(--safe-top)); }
@media (max-height: 700px) { .spin-result .dino-sheet ul { gap: 4px; } .spin-result .dino-sheet li { font-size: 13px; } .spin-inner { gap: 12px; } }

/* Six tabs fit a phone: slightly smaller labels */
.tab span { font-size: 11px; letter-spacing: .05em; }

/* Trading */
.seg-tabs.four { grid-template-columns: repeat(4, 1fr); }
.seg-tabs.four button { font-size: 14px; padding: 8px 2px; }
.wallet.slim { padding-top: 10px; padding-bottom: 10px; }
.wallet.slim .wallet-amount strong { font-size: 26px; }
.tax-pill { margin-left: auto; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.notice { border-color: rgba(245,158,11,.45); color: #fcd34d; font-size: 14px; }
.filter-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.filter-row select { width: auto; }
.price-btn { min-width: 74px; font-variant-numeric: tabular-nums; }
.trade-row .i-text .muted { font-size: 12.5px; }
.auc-side { flex: none; display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; }
.auc-side b { font-family: var(--display); font-size: 18px; color: var(--accent); }
.ends { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ends.soon { color: #f87171; font-weight: 700; }
.auc-now { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.auc-now b { font-family: var(--display); font-size: 24px; color: var(--accent); }
.bid-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.bid-hist li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.offer { display: grid; gap: 10px; }
.offer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.offer-note { margin: 0; font-style: italic; color: var(--muted); }
.offer-side { display: grid; gap: 6px; }
.field-label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.coin-line { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid rgba(245,158,11,.35); }
.coin-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.coin-in span:first-child { font-size: 22px; }
.num-in { font-variant-numeric: tabular-nums; }
.tick { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; color: var(--accent-ink); }
.tick.on { background: var(--accent); border-color: var(--accent); }
.player-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.player-pick strong { flex: 1; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.act-grid .btn { font-size: 15px; padding: 10px 6px; }
details.mine summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 16px; }
details.mine[open] summary { margin-bottom: 10px; }
.recent-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 4px; }
.recent-strip::-webkit-scrollbar { display: none; }
.recent { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 92px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--line)); font-size: 12px; }
.recent span:first-child { font-size: 22px; }
.recent .r-n { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent b { color: var(--accent); font-family: var(--display); font-size: 15px; }
.trade-tag { color: var(--accent); }
select { font: inherit; font-size: 16px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Opening several at once ---------- */
.box-card .badge-count { position: absolute; top: 8px; right: 8px; font-family: var(--display); font-size: 15px; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.qty-pick { display: flex; align-items: center; gap: 8px; }
.qty-pick .muted { margin-right: auto; }
.open-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.spin-multi { display: grid; gap: 5px; padding: 0 8px; }
.mini-lane { position: relative; height: 56px; overflow: hidden; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.06); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mini-strip { position: absolute; top: 4px; left: 0; display: flex; gap: 6px; will-change: transform; }
.mini-card { flex: none; width: 64px; height: 48px; border-radius: 8px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--rc) 26%, var(--surface))); border-bottom: 3px solid var(--rc); }
.mini-card.win { box-shadow: 0 0 0 2px var(--rc), 0 0 16px var(--rc); }
.mini-card.win.hot { animation: winpulse .8s ease-in-out infinite alternate; }
.mini-marker { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--accent-hot); box-shadow: 0 0 10px var(--accent-hot); }
.spin-result.multi { gap: 12px; width: 100%; max-width: 560px; justify-self: center; }
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; max-height: 46dvh; overflow-y: auto; }
.res-card { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; text-align: center; background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--rc) 20%, var(--surface))); border: 1px solid color-mix(in srgb, var(--rc) 55%, var(--line)); animation: pop .4s cubic-bezier(.2,1.4,.4,1) both; }
.res-card .res-icon { font-size: 28px; }
.res-card small { color: var(--rc); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.res-card strong { font-size: 14px; line-height: 1.2; }
.res-card .muted { font-size: 11.5px; font-family: var(--mono); }
.res-card.has-roll { cursor: pointer; }
.res-card.r-mythic, .res-card.r-legendary { box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent); }

/* ---------- Big moment: Mythic dino ---------- */
.fx { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden; animation: fxin .25s ease-out; }
.fx.fx-out { animation: fxout .35s ease-in forwards; }
@keyframes fxin { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxout { to { opacity: 0; transform: scale(1.04); } }
.fx-mythic { background: radial-gradient(60% 45% at 50% 45%, color-mix(in srgb, var(--rc) 55%, #000), #070102 75%); }
.fx-flash { position: absolute; inset: 0; background: #fff; animation: flash .7s ease-out forwards; pointer-events: none; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.fx-rays { position: absolute; width: 220vmax; height: 220vmax; left: 50%; top: 45%; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0deg 7deg, transparent 7deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 38%); mask-image: radial-gradient(circle, #000 0, transparent 38%); animation: spinrays 9s linear infinite; opacity: .85; pointer-events: none; }
@keyframes spinrays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fx-sparks { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.fx-sparks i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff, var(--rc) 60%, transparent 70%); animation: spark 1.6s cubic-bezier(.1,.7,.3,1) var(--d) both; }
@keyframes spark { 0% { transform: translate(0,0) scale(.4); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
.fx-center { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px; }
.fx-tier { font-family: var(--display); font-weight: 800; font-size: clamp(42px, 13vw, 84px); letter-spacing: .18em; color: #fff; text-shadow: 0 0 18px var(--rc), 0 0 42px var(--rc), 0 0 80px var(--rc); animation: tierin .9s cubic-bezier(.2,1.5,.4,1) .15s both; }
@keyframes tierin { from { transform: scale(2.4); opacity: 0; letter-spacing: .6em; } to { transform: scale(1); opacity: 1; letter-spacing: .18em; } }
.fx-icon { font-size: 110px; line-height: 1; filter: drop-shadow(0 0 24px var(--rc)); animation: iconin 1s cubic-bezier(.2,1.6,.4,1) .45s both, bob 2.4s ease-in-out 1.5s infinite; }
@keyframes iconin { from { transform: scale(0) rotate(-25deg); } to { transform: scale(1) rotate(0); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
.fx-name { font-family: var(--display); font-size: 30px; letter-spacing: .04em; animation: fadeup .6s ease-out .8s both; }
.fx-sub { color: rgba(255,255,255,.75); animation: fadeup .6s ease-out 1s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fx-go { margin-top: 14px; min-width: 220px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; pointer-events: none; }
.fx-go.show { opacity: 1; transform: none; pointer-events: auto; animation: pulseglow 1.6s ease-in-out infinite; }
@keyframes pulseglow { 50% { box-shadow: 0 0 26px var(--rc); } }
body.fx-shake .app, body.fx-shake .spin { animation: shake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } }

/* ---------- Stat-roll screen ---------- */
.fx-stats { background: radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--rc) 28%, #050506), #050506 80%); padding: 16px; }
.sr-card { width: 100%; max-width: 440px; display: grid; gap: 14px; padding: 20px 18px calc(18px + var(--safe-bottom)); border-radius: 22px; background: rgba(10,10,12,.88); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--rc) 35%, transparent); animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
.sr-head { display: flex; align-items: center; gap: 12px; }
.sr-icon { font-size: 48px; filter: drop-shadow(0 0 12px var(--rc)); }
.sr-head h2 { margin: 0; font-size: 24px; }
.sr-level { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); }
.sr-level b { font-size: 34px; color: var(--rc); text-shadow: 0 0 14px var(--rc); }
.sr-level .muted { margin-left: auto; font-family: inherit; font-size: 13px; }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sr-row { display: grid; grid-template-columns: 76px 1fr 54px; align-items: center; gap: 10px; }
.sr-name { color: var(--muted); font-size: 15px; }
.sr-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.sr-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rc); transition: width .55s cubic-bezier(.2,.9,.3,1); }
.sr-num { font-family: var(--mono); font-size: 24px; font-weight: 800; text-align: right; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.sr-row.locked .sr-num { color: #fff; animation: lockin .35s cubic-bezier(.2,1.6,.4,1); }
.sr-row.locked .sr-name { color: var(--text); }
@keyframes lockin { from { transform: scale(1.6); } to { transform: scale(1); } }
.sr-row.best .sr-num, .sr-row.best .sr-name { color: var(--rc); text-shadow: 0 0 12px var(--rc); }
.sr-row.best .sr-bar i { box-shadow: 0 0 12px var(--rc); }
.sr-foot { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
.sr-total { font-family: var(--display); font-size: 26px; }
.sr-actions { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .fx-rays, .fx-icon, .fx-go.show { animation: none; } body.fx-shake .app, body.fx-shake .spin { animation: none; } }
.sr-head .r-tag { display: block; color: var(--rc); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.spin-result.multi .res-grid { max-height: 62dvh; }

/* ===== Reveal effects v2 ===== */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.fx > :not(.fx-canvas) { z-index: 2; }
.fx-center { position: relative; z-index: 3; }

/* Legendary: gold */
.fx-legend { background: radial-gradient(70% 55% at 50% 42%, #3a2a03 0%, #140e02 55%, #050403 100%); }
.fx-godrays { position: absolute; width: 240vmax; height: 240vmax; left: 50%; top: 42%; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(250,204,21,.22) 0deg 4deg, transparent 4deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 34%); mask-image: radial-gradient(circle, #000 0, transparent 34%); animation: spinrays 26s linear infinite, raysin .9s ease-out both; pointer-events: none; }
@keyframes raysin { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.fx-bloom { position: absolute; left: 50%; top: 42%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(253,224,71,.55), rgba(250,204,21,.18) 40%, transparent 70%); filter: blur(8px); animation: bloom 2.8s ease-in-out infinite; pointer-events: none; }
@keyframes bloom { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .8; } }
.fx-tier.gold { color: transparent; background: linear-gradient(100deg, #8a5a00 0%, #facc15 22%, #fff7c2 38%, #fde047 50%, #b45309 64%, #facc15 80%, #fff3b0 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 18px rgba(250,204,21,.65)) drop-shadow(0 2px 0 #5c3d00); animation: tierin .8s cubic-bezier(.2,1.5,.4,1) .1s both, goldshine 2.6s linear .9s infinite; letter-spacing: .14em; font-size: clamp(36px, 11vw, 72px); }
@keyframes goldshine { to { background-position: -250% 0; } }
.fx-medal { position: relative; width: 168px; height: 168px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7c2, #facc15 35%, #a16207 75%, #5c3d00); box-shadow: 0 0 0 4px rgba(255,247,194,.55), 0 0 40px rgba(250,204,21,.8), inset 0 -10px 22px rgba(92,61,0,.6); overflow: hidden; animation: iconin .9s cubic-bezier(.2,1.6,.4,1) .3s both; }
.fx-medal .fx-icon { font-size: 84px; filter: drop-shadow(0 4px 6px rgba(60,40,0,.6)); animation: none; }
.fx-shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); transform: translateX(-120%); animation: shine 2.4s ease-in-out 1s infinite; }
@keyframes shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.fx-legend .fx-name { color: #fff8d6; text-shadow: 0 0 16px rgba(250,204,21,.6); }
.fx-legend .fx-go.show { animation: none; box-shadow: 0 0 26px rgba(250,204,21,.6); }

/* Mythic: charge, then detonate */
.fx-mythic { background: radial-gradient(55% 45% at 50% 42%, #3d0606 0%, #120202 60%, #000 100%); transition: background .3s; }
.fx-mythic.charging { background: #000; }
.fx-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 160px 60px rgba(255,0,0,.35); opacity: 0; }
.fx-mythic.charging .fx-vignette { animation: heartbeat .42s ease-out 2; }
.fx-mythic.boom .fx-vignette { opacity: 1; animation: vig 2.2s ease-in-out infinite; }
@keyframes heartbeat { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vig { 50% { opacity: .55; } }
.fx-mythic .fx-flash { opacity: 0; animation: none; }
.fx-mythic.boom .fx-flash { animation: flash 1s ease-out forwards; background: radial-gradient(circle at 50% 42%, #fff, #ffd1d1 40%, #ff3b3b 100%); }
.fx-mythic .fx-rays { opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255,40,40,.45) 0deg 5deg, transparent 5deg 13deg, rgba(255,140,90,.2) 13deg 15deg, transparent 15deg 22deg); }
.fx-mythic.boom .fx-rays { opacity: .9; transition: opacity .4s; animation: spinrays 7s linear infinite; }
.fx-shock { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); border: 6px solid rgba(255,220,220,.95); box-shadow: 0 0 30px #ff3b3b, inset 0 0 30px #ff3b3b; opacity: 0; pointer-events: none; }
.fx-mythic.boom .fx-shock { animation: shock .9s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes shock { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(30); border-width: 1px; } }
.fx-core { position: relative; width: 180px; height: 180px; display: grid; place-items: center; }
.fx-core .fx-icon { font-size: 104px; position: relative; z-index: 2; filter: drop-shadow(0 0 22px #ff3b3b) drop-shadow(0 0 50px #ff3b3b); }
.fx-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,80,80,.8); box-shadow: 0 0 22px rgba(255,40,40,.8), inset 0 0 22px rgba(255,40,40,.5); }
.fx-ring.r1 { animation: ringspin 3s linear infinite; border-style: dashed; }
.fx-ring.r2 { inset: -18px; border-color: rgba(255,160,120,.5); animation: ringspin 5s linear infinite reverse; border-width: 1px; border-style: dotted; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.fx-center.pre .fx-tier, .fx-center.pre .fx-name, .fx-center.pre .fx-sub, .fx-center.pre .fx-go, .fx-center.pre .fx-ring { opacity: 0; animation: none; }
.fx-center.pre .fx-icon { animation: charge 1.25s ease-in forwards; }
@keyframes charge { 0% { transform: scale(.15); filter: brightness(4) blur(3px); opacity: .2; } 80% { transform: scale(.35); filter: brightness(6) blur(1px); opacity: 1; } 100% { transform: scale(.08); filter: brightness(10); } }
.fx-mythic .fx-center:not(.pre) .fx-icon { animation: slam .7s cubic-bezier(.2,1.8,.35,1) both, bob 2.4s ease-in-out .9s infinite; }
@keyframes slam { from { transform: scale(3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fx-tier.glitch { position: relative; color: #fff; font-size: clamp(46px, 15vw, 96px); letter-spacing: .14em; text-shadow: 0 0 20px #ff2d2d, 0 0 50px #ff2d2d, 0 0 90px #b00000; }
.fx-center:not(.pre) .fx-tier.glitch { animation: tierin .7s cubic-bezier(.2,1.5,.4,1) both, jitter 3.2s steps(1) .8s infinite; }
.fx-tier.glitch::before, .fx-tier.glitch::after { content: attr(data-text); position: absolute; inset: 0; mix-blend-mode: screen; opacity: .85; pointer-events: none; }
.fx-tier.glitch::before { color: #ff004c; transform: translate(-3px, 0); clip-path: inset(0 0 55% 0); animation: glitchA 2.2s steps(2) infinite; }
.fx-tier.glitch::after { color: #00e5ff; transform: translate(3px, 0); clip-path: inset(50% 0 0 0); animation: glitchB 1.7s steps(2) infinite; }
@keyframes glitchA { 0%, 86% { transform: translate(-3px, 0); clip-path: inset(0 0 55% 0); } 88% { transform: translate(-9px, -2px); clip-path: inset(10% 0 70% 0); } 92% { transform: translate(6px, 1px); clip-path: inset(40% 0 30% 0); } 96% { transform: translate(-2px, 0); clip-path: inset(0 0 80% 0); } }
@keyframes glitchB { 0%, 82% { transform: translate(3px, 0); clip-path: inset(50% 0 0 0); } 85% { transform: translate(10px, 2px); clip-path: inset(70% 0 5% 0); } 90% { transform: translate(-7px, -1px); clip-path: inset(30% 0 45% 0); } }
@keyframes jitter { 0%, 92%, 100% { transform: none; } 94% { transform: translate(2px, -1px) skewX(-4deg); } 96% { transform: translate(-3px, 1px) skewX(3deg); } }
.fx-mythic .fx-name { font-size: 32px; text-shadow: 0 0 18px #ff2d2d; }
.fx-mythic .fx-center:not(.pre) .fx-name { animation: fadeup .6s ease-out .45s both; }
.fx-mythic .fx-center:not(.pre) .fx-sub { animation: fadeup .6s ease-out .65s both; }
body.fx-shake-hard .fx { animation: shakehard .9s cubic-bezier(.36,.07,.19,.97); }
@keyframes shakehard { 10% { transform: translate(-10px, 6px) rotate(-1deg); } 20% { transform: translate(12px, -8px) rotate(1deg); } 30% { transform: translate(-14px, 4px); } 40% { transform: translate(10px, 10px) rotate(-.5deg); } 50% { transform: translate(-8px, -6px); } 60% { transform: translate(6px, 4px); } 75% { transform: translate(-3px, -2px); } 100% { transform: none; } }
.fx-go { position: relative; z-index: 4; }
.fx .fx-go.show { pointer-events: auto; }
.fx-hint { position: absolute; bottom: calc(18px + var(--safe-bottom)); left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); z-index: 3; }

/* Stat roll v2 */
.fx-stats .sr-card { position: relative; z-index: 2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sr-row.locked .sr-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 60%, #000), var(--rc), #fff 140%); }
.sr-num { min-width: 2.2ch; }
.sr-row:not(.locked) .sr-num { filter: blur(.6px); }

@media (prefers-reduced-motion: reduce) { .fx-godrays, .fx-bloom, .fx-shine, .fx-ring, .fx-tier.glitch::before, .fx-tier.glitch::after { animation: none !important; } body.fx-shake-hard .fx { animation: none; } }

/* ===== Stat quality colours (each stat's own rarity) ===== */
.t-common { --tc: #b0b8c4; } .t-uncommon { --tc: #4ade80; } .t-rare { --tc: #3b82f6; } .t-epic { --tc: #a855f7; } .t-legendary { --tc: #facc15; } .t-mythic { --tc: #ef4444; }
.dino-mini span[class^="t-"], .dino-mini span[class*=" t-"] { color: color-mix(in srgb, var(--tc) 85%, #fff); }
.dino-mini .t-common { color: var(--muted); }
.dino-mini .best { font-weight: 800; text-shadow: 0 0 8px var(--tc); }
.dino-sheet li[class*="t-"] .ds-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, #000), var(--tc)); }
.dino-sheet li[class*="t-"] .ds-pts { color: var(--tc); }
.dino-sheet li.t-common .ds-pts { color: var(--text); }
.dino-sheet .ds-name { display: grid; line-height: 1.1; }
.dino-sheet .ds-name small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tc, var(--muted)); }
.dino-sheet li { grid-template-columns: 86px 1fr 36px; }
.dino-sheet li.best .ds-name, .dino-sheet li.best .ds-pts { color: var(--tc); }
.dino-sheet li.best .ds-bar i { box-shadow: 0 0 12px var(--tc); }
.dino-sheet li.t-legendary .ds-bar i, .dino-sheet li.t-mythic .ds-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, #000), var(--tc), #fff 160%); box-shadow: 0 0 10px var(--tc); }
.sr-row.locked .sr-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--tc, var(--rc)) 50%, #000), var(--tc, var(--rc))); }
.sr-row.locked .sr-num { color: var(--tc, #fff); text-shadow: 0 0 10px color-mix(in srgb, var(--tc, #fff) 60%, transparent); }
.sr-row.locked.t-common .sr-num { color: #fff; text-shadow: none; }
.sr-name { display: grid; line-height: 1.05; }
.sr-tier { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); animation: fadeup .35s ease-out both; }
.sr-row { grid-template-columns: 88px 1fr 54px; }
.sr-row.t-legendary .sr-bar i, .sr-row.t-mythic .sr-bar i { box-shadow: 0 0 14px var(--tc); }
.sr-row.t-mythic .sr-num { animation: lockin .35s cubic-bezier(.2,1.6,.4,1), mythicnum 1.2s ease-in-out .4s infinite alternate; }
@keyframes mythicnum { to { text-shadow: 0 0 22px var(--tc), 0 0 40px var(--tc); } }
.sr-row.best .sr-num, .sr-row.best .sr-name { text-shadow: 0 0 12px var(--tc, var(--rc)); }
.sr-row.best .sr-bar i { box-shadow: 0 0 12px var(--tc, var(--rc)); }
.res-card .best-common { color: var(--muted); } .res-card .best-uncommon { color: #4ade80; } .res-card .best-rare { color: #60a5fa; } .res-card .best-epic { color: #c084fc; } .res-card .best-legendary { color: #facc15; } .res-card .best-mythic { color: #f87171; }

/* ===== Chat sections ===== */
.sec-chips { position: sticky; top: calc(58px + var(--safe-top)); z-index: 3; padding-top: 6px; padding-bottom: 8px; background: linear-gradient(var(--bg, #050506) 70%, transparent); }
.sec-chips .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hot, #ff5a1f); box-shadow: 0 0 8px var(--accent-hot, #ff5a1f); }
.chip .cnt, .dm-side .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--accent-hot, #ff5a1f); color: #fff; }
.chip.on .cnt { background: #fff; color: var(--accent-ink); }
.tab { position: relative; }
.tab.has-dot::after { content: ""; position: absolute; top: 6px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent-hot, #ff5a1f); box-shadow: 0 0 0 2px #050506; }
.who-btn { font: inherit; font-weight: 700; color: var(--cyan); background: none; border: 0; padding: 0; cursor: pointer; }
.chat-list li.removed .bubble { font-style: italic; color: var(--muted); }
.thread-head { position: sticky; top: calc(108px + var(--safe-top)); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.thread-head strong { flex: 1; font-size: 17px; }
.icon-back { font: inherit; font-size: 30px; line-height: 1; color: var(--accent); background: none; border: 0; padding: 0 6px 4px; cursor: pointer; }
.comm-box { margin-top: 10px; }
.dm-list { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.dm-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px; cursor: pointer; }
.dm-row:last-child { border-bottom: 0; }
.dm-row.unread strong { color: var(--accent); }
.dm-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dm-txt .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.dm-side { display: grid; justify-items: end; gap: 4px; }
.news-card, .event-card, .gw-card { display: grid; gap: 10px; }
.news-top, .ev-top, .gw-top { display: flex; align-items: center; gap: 12px; }
.news-ico, .ev-ico, .gw-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: var(--surface-2); }
.news-top > span:last-child, .ev-head { flex: 1; min-width: 0; display: grid; gap: 2px; }
.news-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: color-mix(in srgb, var(--text) 88%, transparent); }
.ev-when { flex: none; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ev-when.soon { background: rgba(250,204,21,.15); color: #facc15; }
.ev-when.live { background: rgba(74,222,128,.15); color: #4ade80; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 14px rgba(74,222,128,.6); } }
.event-card.ended { opacity: .6; }
.event-card.live { border-color: rgba(74,222,128,.5); }
.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gw-card { border-color: rgba(250,204,21,.35); background: linear-gradient(160deg, rgba(250,204,21,.08), var(--surface) 45%); }
.gw-card.done { opacity: .75; border-color: var(--line); background: var(--surface); }
.gw-card.won { opacity: 1; border-color: #facc15; box-shadow: 0 0 22px rgba(250,204,21,.25); }
.gw-prize { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.gw-prize strong { font-family: var(--display); font-size: 20px; color: #facc15; }
.gw-in { font-weight: 800; color: #4ade80; }
.gw-result { display: grid; gap: 4px; }
.gw-won { color: #facc15; }

/* Global chat: where each message came from */
.src-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; background: rgba(255,255,255,.07); color: var(--muted); }
.src-tag.app { background: rgba(47,198,245,.15); color: #7dd3fc; }
.src-tag.admin { background: rgba(255,138,30,.18); color: var(--accent); }
.chat-list li.game .bubble { background: var(--surface); }

/* ---------- Account: profile, avatars, membership themes ---------- */
.avatar { flex: none; overflow: hidden; line-height: 1; }
.avatar.tinted { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: inset 0 -6px 12px rgba(0,0,0,.18); }
.avatar.xs { width: 22px; height: 22px; font-size: 12px; }
.avatar.lg { width: 52px; height: 52px; font-size: 26px; }
.avatar.xl { width: 68px; height: 68px; font-size: 34px; }
.who-btn { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.dm-txt strong, .player-pick strong { display: inline-flex; align-items: center; gap: 6px; }

/* Each tier's look. --m is the "metal" gradient used for titles, emblems and badges. */
.theme-gold { --bg1: #2b1e05; --bg2: #110b02; --m: linear-gradient(135deg, #fff4c8 0%, #f5c542 38%, #b8860b 68%, #ffe18a 100%); --line: rgba(245,197,66,.55); --glow: rgba(245,197,66,.32); --ink: #2a1800; --hi: #f5c542; }
.theme-diamond { --bg1: #072438; --bg2: #03101b; --m: linear-gradient(135deg, #ffffff 0%, #a8ecff 32%, #4fb3ff 64%, #e8fbff 100%); --line: rgba(130,222,255,.55); --glow: rgba(110,210,255,.32); --ink: #04213a; --hi: #8fe2ff; }
.theme-dodo { --bg1: #1c2a33; --bg2: #10181e; --m: linear-gradient(135deg, #fbe9bd 0%, #e2b56d 40%, #7fb4d2 74%, #c1e2f3 100%); --line: rgba(150,200,226,.5); --glow: rgba(226,181,109,.28); --ink: #1a2630; --hi: #e2b56d; }
.theme-stego { --bg1: #14280f; --bg2: #0a1407; --m: linear-gradient(135deg, #e2fbb0 0%, #8bd11c 38%, #f2701e 72%, #ffc08a 100%); --line: rgba(139,209,28,.5); --glow: rgba(242,112,30,.28); --ink: #102006; --hi: #9ad83a; }
.theme-giga { --bg1: #2c0505; --bg2: #0c0101; --m: linear-gradient(135deg, #ffd6c8 0%, #ff4d2e 38%, #a60000 70%, #ff8a5c 100%); --line: rgba(255,77,46,.6); --glow: rgba(255,60,30,.38); --ink: #fff; --hi: #ff5a3a; }

.mem-card, .profile-card, .person-card.themed { position: relative; overflow: hidden; isolation: isolate; }
.mem-card { display: grid; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--text); padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg1), var(--bg2)); box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 10px 30px -12px var(--glow); }
button.mem-card { cursor: pointer; }
button.mem-card:active { transform: scale(.99); }
.mem-card.mine { box-shadow: 0 0 0 1px var(--line) inset, 0 0 28px -4px var(--glow); }
.mem-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; }
.mem-top { display: flex; align-items: center; gap: 12px; }
.mem-emblem { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 27px; background: var(--m); box-shadow: 0 0 18px var(--glow), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.25); }
.mem-title { display: grid; min-width: 0; flex: 1; }
.mem-title small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--hi); opacity: .85; font-weight: 700; }
.mem-title strong { font-family: var(--display); font-size: 25px; line-height: 1.05; text-transform: uppercase; letter-spacing: .04em; background: var(--m); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mem-flag { flex: none; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--m); color: var(--ink); }
.mem-blurb { margin: 0; font-size: 14px; color: rgba(238,243,247,.82); }
.mem-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mem-perks li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.05); }
.mem-perks li > span:last-child { display: grid; font-size: 14px; line-height: 1.3; }
.mem-perks strong { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--hi); }
.perk-ico { font-size: 18px; line-height: 1.3; }
.mem-prices { display: flex; flex-wrap: wrap; gap: 6px; }
.mem-prices span { font-family: var(--display); font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--hi); background: rgba(0,0,0,.25); }
.mem-foot { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(238,243,247,.8); }
.mem-foot .btn { margin-left: auto; }
.mem-claim { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.mem-claim > span { display: grid; flex: 1; min-width: 0; font-size: 14px; }
.mem-claim strong { font-family: var(--display); font-size: 16px; }
.mem-claim.plain { border-color: var(--line); background: var(--surface-2); }
.mem-list { display: grid; gap: 12px; }
.no-mem { border-style: dashed; }

/* Patterns (decoration only). */
.theme-gold .mem-pattern { background: linear-gradient(115deg, transparent 30%, rgba(255,236,170,.13) 45%, transparent 60%) 0 0 / 250% 100% no-repeat, radial-gradient(120% 80% at 100% 0%, rgba(245,197,66,.16), transparent 60%); animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 20% { background-position: 120% 0, 0 0; } 60%, 100% { background-position: -120% 0, 0 0; } }
.theme-diamond .mem-pattern { background:
  radial-gradient(circle at 82% 22%, rgba(255,255,255,.9) 0 1.2px, transparent 2px),
  radial-gradient(circle at 70% 60%, rgba(200,245,255,.8) 0 1px, transparent 1.8px),
  radial-gradient(circle at 92% 75%, rgba(255,255,255,.8) 0 1.4px, transparent 2.2px),
  radial-gradient(circle at 58% 18%, rgba(200,245,255,.7) 0 .9px, transparent 1.6px),
  conic-gradient(from 210deg at 100% 0%, rgba(160,235,255,.14), transparent 12%, rgba(160,235,255,.08) 18%, transparent 26%, rgba(160,235,255,.12) 34%, transparent 42%); animation: twinkle 3.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .6; } to { opacity: 1; } }
.theme-dodo .mem-pattern { background:
  radial-gradient(circle at 20% 30%, rgba(251,233,189,.22) 0 1.2px, transparent 1.8px) 0 0 / 34px 30px,
  radial-gradient(circle at 70% 75%, rgba(193,226,243,.18) 0 1px, transparent 1.6px) 0 0 / 26px 38px,
  radial-gradient(110% 70% at 100% 100%, rgba(127,180,210,.16), transparent 60%),
  radial-gradient(70% 60% at 100% 0%, rgba(226,181,109,.14), transparent 70%); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.theme-stego .mem-pattern { background:
  linear-gradient(135deg, rgba(242,112,30,.30) 25%, transparent 25%) 0 0 / 28px 14px repeat-x,
  linear-gradient(225deg, rgba(242,112,30,.30) 25%, transparent 25%) 0 0 / 28px 14px repeat-x,
  radial-gradient(120% 80% at 0% 100%, rgba(139,209,28,.16), transparent 60%); }
.theme-giga .mem-pattern { background:
  linear-gradient(118deg, transparent 47%, rgba(255,77,46,.22) 48%, rgba(255,77,46,.22) 49%, transparent 50%) 78% 0 / 120px 100% no-repeat,
  linear-gradient(118deg, transparent 47%, rgba(255,77,46,.18) 48%, rgba(255,77,46,.18) 49%, transparent 50%) 88% 0 / 120px 100% no-repeat,
  linear-gradient(118deg, transparent 47%, rgba(255,77,46,.14) 48%, rgba(255,77,46,.14) 49%, transparent 50%) 98% 0 / 120px 100% no-repeat,
  radial-gradient(90% 60% at 50% 120%, rgba(255,60,20,.30), transparent 70%); animation: ember 2.8s ease-in-out infinite alternate; }
@keyframes ember { from { filter: brightness(.85); } to { filter: brightness(1.2); } }
@media (prefers-reduced-motion: reduce) { .mem-pattern { animation: none !important; } }

/* Small badge next to names. */
.tier-badge { display: inline-flex; align-items: center; gap: 3px; flex: none; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 2px 6px 2px 4px; border-radius: 999px; color: var(--ink); background: var(--m); box-shadow: 0 0 8px var(--glow); }
.tier-badge > span:first-child { font-size: 11px; }
.tb-gold { --m: linear-gradient(135deg, #fff4c8, #f5c542 45%, #c99a1c); --ink: #2a1800; --glow: rgba(245,197,66,.35); }
.tb-diamond { --m: linear-gradient(135deg, #fff, #a8ecff 45%, #5cbcff); --ink: #04213a; --glow: rgba(110,210,255,.35); }
.tb-dodo { --m: linear-gradient(135deg, #fbe9bd, #e2b56d 50%, #8fc0dc); --ink: #1a2630; --glow: rgba(226,181,109,.3); }
.tb-stego { --m: linear-gradient(135deg, #e2fbb0, #8bd11c 50%, #f2701e); --ink: #102006; --glow: rgba(139,209,28,.3); }
.tb-giga { --m: linear-gradient(135deg, #ffb39e, #ff4d2e 50%, #a60000); --ink: #fff; --glow: rgba(255,60,30,.45); }

/* Profile card at the top of Account. */
.profile-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(12,13,16,.92); }
.profile-card[class*="theme-"] { background: linear-gradient(160deg, var(--bg1), var(--bg2)); box-shadow: 0 10px 30px -12px var(--glow); }
.profile-card[class*="theme-"] .avatar { box-shadow: 0 0 0 3px var(--bg2), 0 0 0 5px var(--hi), 0 0 18px var(--glow); }
.pc-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.pc-text h2 { margin: 0; font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; }
.pc-tier { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.profile-card[class*="theme-"] .pc-tier > span:last-child, .person-card.themed .pc-tier > span:last-child { background: var(--m); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--display); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.pc-meta { font-size: 12.5px; color: var(--muted); }
.pc-edit { align-self: flex-start; }
.person-card { display: flex; align-items: center; gap: 14px; }
.person-card h2 { margin: 0; }
.person-card.themed { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg1), var(--bg2)); }

/* Profile editor. */
.pe-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.pe-preview > span:last-child { display: grid; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.pe-av { aspect-ratio: 1; font: inherit; font-size: 22px; font-weight: 800; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pe-av.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: var(--accent-soft); }
.pe-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.color-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); cursor: pointer; padding: 0; }
.color-dot.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }

/* Buying. */
.opt-list { display: grid; gap: 8px; }
.opt-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.opt-row > span:nth-last-child(2) { display: grid; flex: 1; min-width: 0; }
.opt-price { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--accent); }
[class*="theme-"] .opt-row { border-color: var(--line); background: rgba(0,0,0,.3); }
[class*="theme-"] .opt-price { color: var(--hi); }
.cp-coin { font-size: 26px; }
.tier-sheet .mem-card { margin-bottom: 2px; }
.buy-head { display: grid; gap: 4px; }
.buy-head h2 { margin: 0; }
.buy-sheet[class*="theme-"] .buy-head h2 { background: var(--m); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; }
.buy-price { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--accent); }
.buy-sheet[class*="theme-"] .buy-price { color: var(--hi); }
.buy-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.buy-steps li { counter-increment: s; display: grid; gap: 4px; padding: 12px 12px 12px 48px; position: relative; border-radius: 12px; background: var(--surface-2); }
.buy-steps li::before { content: counter(s); position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.buy-sheet[class*="theme-"] .buy-steps li::before { background: var(--m); color: var(--ink); }

/* Loot wallet additions. */
.wallet .btn.buy-coins { margin-left: auto; color: var(--accent-hot); border-color: rgba(255,138,30,.45); }
.wallet-tier { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; color: var(--text); text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg1), var(--bg2)); cursor: pointer; }
.wallet-tier strong { font-family: var(--display); font-size: 16px; text-transform: uppercase; letter-spacing: .03em; background: var(--m); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wallet-tier.plain { background: var(--surface-2); }
.wallet-tier.plain strong { background: none; color: var(--accent-hot); }
.wt-more { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.daily-row { display: flex; align-items: center; gap: 10px; }
.daily-ico { font-size: 24px; }
.daily-txt { display: grid; flex: 1; min-width: 0; }
.wallet-tap { display: flex; align-items: center; gap: 12px; font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.buy-coins-bar { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent-hot); border-color: rgba(255,138,30,.45); background: linear-gradient(180deg, rgba(255,194,61,.12), rgba(255,138,30,.06)); }
.wallet .btn.buy-coins-bar { margin-left: 0; }
.bc-from { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--muted); letter-spacing: 0; }

/* Cryopod capsule for preset dinos (an original design): metal caps, a glass tube glowing in the rarity colour. */
.pod { --rc: #8fe2ff; position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: .74em; height: 1.16em; vertical-align: middle; flex: none; line-height: 1; }
.pod-glass { position: relative; display: grid; place-items: center; width: .62em; height: .9em; border-radius: .2em; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 60%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, #0b1220), color-mix(in srgb, var(--rc) 38%, #050a12));
  border: .035em solid color-mix(in srgb, var(--rc) 70%, #ffffff); box-shadow: 0 0 .22em color-mix(in srgb, var(--rc) 75%, transparent), inset 0 0 .16em color-mix(in srgb, var(--rc) 60%, transparent); }
.pod-glass::after { content: ""; position: absolute; top: .05em; bottom: .05em; left: .07em; width: .1em; border-radius: .05em; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08)); }
.pod-emoji { font-size: .46em; filter: drop-shadow(0 0 .12em color-mix(in srgb, var(--rc) 80%, transparent)); }
.pod-cap { width: .7em; height: .13em; border-radius: .06em .06em .03em .03em; background: linear-gradient(180deg, #e6ebf0, #8a95a3 60%, #5b6573); box-shadow: 0 .02em .04em rgba(0,0,0,.5); }
.pod-cap.bottom { border-radius: .03em .03em .06em .06em; background: linear-gradient(180deg, #8a95a3, #5b6573 50%, #3d4552); }
.pod-cap::after { content: ""; display: block; margin: .035em auto 0; width: .22em; height: .04em; border-radius: .02em; background: var(--rc); box-shadow: 0 0 .08em var(--rc); }
.pod-cap.bottom::after { display: none; }
.i-icon.pod, .box-icon.pod { width: .74em; }
.odds li > .pod { font-size: 26px; }
.pod > .pod-cap, .pod > .pod-glass { font-size: inherit !important; }
.pod.r-common { --rc: #b0b8c4; } .pod.r-uncommon { --rc: #4ade80; } .pod.r-rare { --rc: #3b82f6; } .pod.r-epic { --rc: #a855f7; } .pod.r-legendary { --rc: #facc15; } .pod.r-mythic { --rc: #ef4444; }
.pod > .pod-glass { width: .66em; }
.pod-emoji { font-size: .56em; }
.pod-logo { width: .6em; height: .6em; object-fit: contain; filter: drop-shadow(0 0 .06em color-mix(in srgb, var(--rc) 90%, transparent)) drop-shadow(0 0 .12em color-mix(in srgb, var(--rc) 60%, transparent)); }
.r-name .r-pod { font-size: 1.3em; margin-right: .2em; }
.sr-icon.pod { font-size: 54px; }

/* ---------- Dino stats (redesign) ---------- */
.st, .dm, .ds-dots i { --tc: #9aa3b0; }
.st.t-uncommon, .dm.t-uncommon, .ds-dots i.t-uncommon { --tc: #34d399; }
.st.t-rare, .dm.t-rare, .ds-dots i.t-rare { --tc: #3b9bff; }
.st.t-epic, .dm.t-epic, .ds-dots i.t-epic { --tc: #b26bff; }
.st.t-legendary, .dm.t-legendary, .ds-dots i.t-legendary { --tc: #fbbf24; }
.st.t-mythic, .dm.t-mythic, .ds-dots i.t-mythic { --tc: #ff4d5e; }

.dino-sheet { gap: 10px; max-width: 380px; }
.dino-sheet .ds-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds-level { display: grid; line-height: 1; }
.ds-level small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ds-level strong { font-family: var(--display); font-size: 30px; letter-spacing: .02em; background: linear-gradient(180deg, #fff, #c9d2dc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-sum { display: grid; justify-items: end; gap: 4px; }
.ds-dots { display: flex; gap: 4px; }
.ds-dots i { width: 14px; height: 6px; border-radius: 3px; background: var(--tc); box-shadow: 0 0 6px color-mix(in srgb, var(--tc) 60%, transparent); }

ul.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
ul.st-list li.st { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico name val" "ico bar val"; column-gap: 11px; row-gap: 6px; align-items: center;
  padding: 8px 12px 8px 8px; border-radius: 14px; font-size: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 13%, transparent), rgba(255,255,255,.02) 55%, color-mix(in srgb, var(--tc) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--tc) 24%, transparent); }
li.st .st-ico { grid-area: ico; position: relative; width: 36px; height: 36px; border-radius: 11px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 30%, #10141b), #0a0d12 80%); border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 10px -3px var(--tc); }
.st-ico::before { content: ""; position: absolute; inset: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc));
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
li.st .st-name { grid-area: name; display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; color: var(--text); }
.st-tier { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
  color: color-mix(in srgb, var(--tc) 80%, #fff); background: color-mix(in srgb, var(--tc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 38%, transparent); }
.st-star { color: var(--tc); font-size: 13px; text-shadow: 0 0 8px var(--tc); }
li.st .st-bar { grid-area: bar; position: relative; height: 9px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(255,255,255,.05)), repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.4) calc(10% - 1px) 10%); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
li.st .st-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 40%, #000), var(--tc) 75%, color-mix(in srgb, var(--tc) 55%, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 55%, transparent); transition: width .8s cubic-bezier(.2,.9,.3,1); }
li.st .st-bar i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 1px; height: 40%; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); }
.st-avg { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.8); }
li.st .st-val { grid-area: val; min-width: 2.4ch; text-align: right; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: .95; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tc) 75%, #fff); text-shadow: 0 0 14px color-mix(in srgb, var(--tc) 45%, transparent); }
li.st .st-val small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-shadow: none; color: color-mix(in srgb, var(--tc) 60%, var(--muted)); }
li.st.t-common .st-val { color: #e6ebf0; text-shadow: none; }
li.st.best { border-color: color-mix(in srgb, var(--tc) 80%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent), 0 6px 22px -8px var(--tc); }
li.st.best .st-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 16px -2px var(--tc); }
/* Legendary and Mythic stats shimmer. */
li.st.t-legendary .st-bar i::before, li.st.t-mythic .st-bar i::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 66%) 0 0 / 220% 100%; animation: stshine 2.4s ease-in-out infinite; }
li.st.t-mythic { animation: stpulse 1.8s ease-in-out infinite alternate; }
@keyframes stshine { 0% { background-position: 160% 0; } 60%, 100% { background-position: -60% 0; } }
@keyframes stpulse { from { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent), 0 0 12px -6px var(--tc); } to { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent), 0 0 24px -4px var(--tc); } }
@media (prefers-reduced-motion: reduce) { li.st, li.st .st-bar i::before { animation: none !important; } }

/* The live stat roll (big moments). */
li.st.rolling { --tc: #6b7480; }
li.st.rolling .st-val { color: rgba(255,255,255,.45); filter: blur(.6px); }
li.st.locked .st-val { animation: lockin .35s cubic-bezier(.2,1.6,.4,1); }
li.st.locked .st-tier { animation: fadeup .35s ease-out both; }
.sr-card ul.st-list li.st .st-val { font-size: 30px; }

/* Compact pills (item rows, market). */
.dino-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin-top: 5px; font-family: var(--display); font-size: 13px; }
.dino-mini .dm-lvl { font-weight: 700; color: var(--text); margin-right: 2px; }
.dino-mini .dm { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 4px; border-radius: 99px; font-weight: 700; line-height: 1.5;
  color: color-mix(in srgb, var(--tc) 75%, #fff); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 32%, transparent); text-shadow: none; }
.dino-mini .dm .st-ico { position: relative; width: 13px; height: 13px; }
.dino-mini .dm .st-ico::before { inset: 0; }
.dino-mini .dm.t-common { color: #cfd6de; }
.dino-mini .dm.best { border-color: var(--tc); box-shadow: 0 0 8px -2px var(--tc); }

/* ================= THE REVEAL (Rare and up) ================= */
.fx.rv { --rc: #3b9bff; --rc2: #a8d6ff; --aura: var(--rc); display: block; z-index: 80; background: #020305; color: #fff; }
.rv > .rv-world { position: absolute; inset: 0; z-index: 1; }
.rv > .rv-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, #fff 0, color-mix(in srgb, var(--rc2) 80%, #fff) 25%, color-mix(in srgb, var(--rc) 50%, transparent) 55%, transparent 80%); }
.rv > .rv-vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(0,0,0,.78) 100%); }
.rv-world .fx-canvas { z-index: 3; }
.rv-bg { position: absolute; inset: -10%; z-index: 0;
  background: radial-gradient(55% 40% at 50% 40%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 72%), radial-gradient(120% 70% at 50% 115%, color-mix(in srgb, var(--aura) 26%, transparent), transparent 62%), radial-gradient(80% 60% at 50% -10%, color-mix(in srgb, var(--rc2) 10%, transparent), transparent 60%), #030407;
  transition: filter .35s ease-out; }
.rv.charging .rv-bg { filter: brightness(.38) saturate(.6); }
.rv-rays { position: absolute; z-index: 1; left: calc(var(--rx, 50%) - 115vmax); top: calc(var(--ry, 40%) - 115vmax); width: 230vmax; height: 230vmax; scale: .35; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 60%, transparent) 0deg 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.55) 14%, transparent 42%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.55) 14%, transparent 42%);
  transition: opacity .6s ease-out, scale 1.4s cubic-bezier(.2,.9,.3,1); animation: rvspin 40s linear infinite; }
.rv.boom .rv-rays { opacity: calc(.22 + var(--lv) * .13); scale: 1; }
.rv-caustics { display: none; }
.rv-stage { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 20px calc(28px + var(--safe-bottom)); text-align: center; pointer-events: none; }

/* the pod charging, then popping */
.rv-hero { position: relative; width: 210px; height: 210px; display: grid; place-items: center; margin-bottom: 8px; }
.rv-pod { position: absolute; inset: 0; display: grid; place-items: center; font-size: 150px; }
.rv-pod > .pod, .rv-pod > span { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 70%, transparent)); }
.rv-cracks { position: absolute; left: 34%; right: 34%; top: 22%; bottom: 22%; border-radius: 40%; opacity: 0; mix-blend-mode: screen; filter: blur(8px);
  background: radial-gradient(circle, #fff 0, var(--rc2) 25%, var(--rc) 50%, transparent 72%); }
.rv.charging .rv-pod { animation: rvpodshake .08s linear infinite; }
.rv.charging .rv-cracks { animation: rvleak var(--charge, 1s) cubic-bezier(.5,0,1,1) forwards; }
.rv.boom .rv-pod { animation: rvpodpop .32s ease-out forwards; }
@keyframes rvpodshake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(calc(var(--lv) * 1px), calc(var(--lv) * -.6px)) rotate(calc(var(--lv) * .5deg)); } 50% { transform: translate(calc(var(--lv) * -1px), calc(var(--lv) * .5px)) rotate(calc(var(--lv) * -.5deg)); } 75% { transform: translate(calc(var(--lv) * .6px), calc(var(--lv) * 1px)); } 100% { transform: none; } }
@keyframes rvleak { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: .9; } 100% { opacity: 1; transform: scale(2.4); } }
@keyframes rvpodpop { to { transform: scale(1.9); opacity: 0; filter: brightness(3) blur(6px); } }

/* the emblem */
.rv-emblem { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.3); }
.rv.boom .rv-emblem { animation: rvemblem .95s cubic-bezier(.2,1.45,.35,1) .04s forwards; }
@keyframes rvemblem { 0% { opacity: 0; transform: scale(.25) rotate(-25deg); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.rv-halo { position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--aura) 55%, transparent) 0, color-mix(in srgb, var(--rc) 22%, transparent) 40%, transparent 68%); filter: blur(6px); animation: rvbreathe 2.6s ease-in-out infinite alternate; }
.rv-ring { position: absolute; inset: 3%; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--rc), var(--rc2), #fff, var(--rc), color-mix(in srgb, var(--rc) 35%, #000), var(--rc2), var(--rc));
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 69%, transparent 70%);
  filter: drop-shadow(0 0 10px var(--rc)); animation: rvspin 5s linear infinite; }
.rv-ring2 { position: absolute; inset: -7%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--rc2) 45%, transparent); opacity: .55; animation: rvspin 22s linear infinite reverse; }
.rv-core { position: relative; width: 60%; height: 60%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 50%, #121722), #04060a 78%);
  border: 1px solid color-mix(in srgb, var(--rc2) 65%, transparent); box-shadow: inset 0 0 34px color-mix(in srgb, var(--rc) 65%, transparent), 0 0 46px -4px var(--rc); }
.rv-core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 60%) 0 0 / 250% 100%; animation: rvglass 3.2s ease-in-out 1s infinite; }
.rv-logo { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--aura)) drop-shadow(0 0 26px var(--rc)); animation: rvfloat 3.2s ease-in-out infinite alternate; }
.rv-emoji { font-size: 70px; filter: drop-shadow(0 0 16px var(--rc)); animation: rvfloat 3.2s ease-in-out infinite alternate; }

/* the words */
.rv-tier { position: relative; display: flex; justify-content: center; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 12vw, 68px); letter-spacing: .13em; line-height: 1; margin-right: -.13em; }
.rv-tier span { display: inline-block; opacity: 0; transform: translateY(34px) scale(1.7);
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 220% 0 / 300% 100% no-repeat, linear-gradient(180deg, #fff 0, var(--rc2) 42%, var(--rc) 58%, color-mix(in srgb, var(--rc) 50%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 75%, transparent)); }
.rv.boom .rv-tier span { animation: rvletter .55s cubic-bezier(.2,1.6,.4,1) calc(.2s + var(--i) * .055s) forwards, rvglint 3s ease-in-out calc(1.4s + var(--i) * .05s) infinite; }
.rv-name { font-family: var(--display); font-size: clamp(26px, 8vw, 40px); line-height: 1.05; letter-spacing: .02em; opacity: 0; transform: translateY(14px); text-shadow: 0 0 22px color-mix(in srgb, var(--rc) 65%, transparent), 0 2px 0 rgba(0,0,0,.6); }
.rv-line { font-size: 11.5px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: color-mix(in srgb, var(--aura) 65%, #fff); opacity: 0; text-shadow: 0 0 12px var(--aura); }
.rv-meta { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.88); padding: 6px 14px; border-radius: 99px; opacity: 0; background: color-mix(in srgb, var(--rc) 16%, rgba(0,0,0,.45)); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); box-shadow: 0 0 18px -6px var(--rc); }
.rv.boom .rv-name { animation: rvup .5s ease-out .6s forwards; }
.rv.boom .rv-line { animation: rvup .5s ease-out .78s forwards; }
.rv.boom .rv-meta { animation: rvup .5s ease-out .92s forwards; }
.rv-go { margin-top: 16px; min-width: 230px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc2) 70%, #fff), var(--rc)) !important; color: #0b0d12 !important; box-shadow: 0 0 26px -2px var(--rc) !important; }
.rv-go.show { opacity: 1; transform: none; pointer-events: auto; }
.rv.boom > .rv-flash { animation: rvflash calc(.3s + var(--lv) * .12s) ease-out forwards; }
.rv.strike > .rv-flash { opacity: .55; }

@keyframes rvspin { to { rotate: 360deg; } }
@keyframes rvbreathe { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes rvfloat { from { transform: translateY(-3px) scale(1); } to { transform: translateY(3px) scale(1.04); } }
@keyframes rvglass { 0%, 100% { background-position: 220% 0; } 50% { background-position: -40% 0; } }
@keyframes rvletter { to { opacity: 1; transform: none; } }
@keyframes rvglint { 0%, 55% { background-position: 220% 0, 0 0; } 85%, 100% { background-position: -80% 0, 0 0; } }
@keyframes rvup { to { opacity: 1; transform: none; } }
@keyframes rvflash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rvbeat { 0%, 100% { opacity: 1; } 30% { opacity: .55; } }

/* rarity flavours */
.rv-rare .rv-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 45%, transparent) 0deg 3deg, transparent 3deg 20deg); }
.rv-legendary .rv-rays { background: repeating-conic-gradient(from 0deg, rgba(255,214,90,.75) 0deg 3deg, rgba(255,240,180,.25) 3deg 6deg, transparent 6deg 12deg); }
.rv-legendary .rv-ring2 { border-style: solid; border-width: 1px; box-shadow: 0 0 22px rgba(251,191,36,.45); }
.rv-mythic .rv-rays { background: repeating-conic-gradient(from 0deg, rgba(255,40,70,.8) 0deg 2deg, transparent 2deg 9deg, rgba(255,120,90,.35) 9deg 11deg, transparent 11deg 16deg); animation-duration: 18s; }
.rv-mythic.charging > .rv-vignette { box-shadow: inset 0 0 160px rgba(255,20,50,.55); animation: rvbeat .42s ease-in-out infinite; }
.rv-mythic .rv-tier span { filter: drop-shadow(2px 0 0 rgba(0,255,255,.45)) drop-shadow(-2px 0 0 rgba(255,0,70,.75)) drop-shadow(0 0 16px var(--rc)); }
.rv-mythic.boom .rv-tier { animation: rvglitch 2.6s steps(1) 1.2s infinite; }
@keyframes rvglitch { 0%, 88%, 100% { transform: none; } 90% { transform: translate(3px, -1px) skewX(-6deg); } 92% { transform: translate(-3px, 1px); } 94% { transform: translate(1px, 0) skewX(4deg); } }
.rv-mythic .rv-core { box-shadow: inset 0 0 40px rgba(255,40,70,.8), 0 0 70px -2px rgba(255,40,70,.9); }

/* theme flavours */
.rv-fx-water .rv-caustics { display: block; position: absolute; inset: -20%; z-index: 1; opacity: .16; mix-blend-mode: screen;
  background: radial-gradient(circle at 20% 30%, #9ff 0 2%, transparent 9%), radial-gradient(circle at 70% 60%, #9ff 0 1.5%, transparent 8%), radial-gradient(circle at 40% 80%, #bff 0 2%, transparent 10%);
  background-size: 180px 180px, 240px 240px, 300px 300px; animation: rvcaust 9s linear infinite; }
@keyframes rvcaust { to { background-position: 180px 120px, -240px 240px, 300px -300px; } }
.rv-fx-frost > .rv-vignette { background: radial-gradient(ellipse at 50% 42%, transparent 45%, rgba(0,0,0,.6) 92%), radial-gradient(ellipse at 50% 42%, transparent 60%, rgba(160,220,255,.14) 100%); }
.rv-fx-shadow .rv-bg { background: radial-gradient(55% 40% at 50% 40%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 72%), radial-gradient(120% 70% at 50% 115%, rgba(120,50,220,.28), transparent 62%), #020104; }
.rv-fx-fire .rv-bg { background: radial-gradient(55% 40% at 50% 40%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 72%), radial-gradient(130% 70% at 50% 120%, rgba(255,110,20,.4), transparent 60%), #050302; }
.rv-fx-storm.boom .rv-bg { animation: rvflicker 4s steps(1) infinite; }
@keyframes rvflicker { 0%, 100% { filter: none; } 31% { filter: brightness(1.8); } 32% { filter: none; } 33% { filter: brightness(1.4); } 34% { filter: none; } 77% { filter: brightness(1.6); } 78% { filter: none; } }

/* Reduced motion: keep the reveal (fades, title, glow) but drop shaking, flashing, flicker and spinning. */
@media (prefers-reduced-motion: reduce) {
  .rv.charging .rv-pod, .rv-rays, .rv-ring, .rv-ring2, .rv-mythic.boom .rv-tier, .rv-fx-storm.boom .rv-bg, .rv-caustics, .rv-mythic.charging > .rv-vignette { animation: none !important; }
  .rv > .rv-flash { display: none; }
}
.seg-tabs.four button { font-size: 14px; padding-left: 4px; padding-right: 4px; }
.storage-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--cyan-soft); border: 1px solid rgba(47,198,245,.3); font-size: 13px; color: var(--text); }
.storage-note > span:first-child { font-size: 18px; }

.rv-odds { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: color-mix(in srgb, var(--rc2) 80%, #fff); opacity: 0; }
.rv.boom .rv-odds { animation: rvup .5s ease-out 1.05s forwards; }

/* ================= STAT REVEAL (Legendary / Mythic dinos) ================= */
.fx.sr2 { --rc: #fbbf24; --rc2: #fff1b8; z-index: 85; background: #020305; padding: 14px; }
.sr2 > .rv-world { position: absolute; inset: 0; z-index: 0; }
.sr2 > .rv-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.9), color-mix(in srgb, var(--rc) 50%, transparent) 40%, transparent 75%); }
.sr2.flashing > .rv-flash { animation: rvflash .6s ease-out forwards; }
.sr2-card { position: relative; z-index: 2; width: min(440px, 100%); max-height: calc(100dvh - 28px); overflow: auto; display: grid; gap: 12px; padding: 18px 16px calc(16px + var(--safe-bottom)); border-radius: 22px;
  background: linear-gradient(180deg, rgba(14,16,22,.92), rgba(6,7,10,.95)); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset, 0 20px 60px -20px var(--rc), 0 0 80px -30px var(--rc); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sr2-head { display: flex; align-items: center; gap: 12px; }
.sr2-head .sr2-pod { font-size: 56px; }
.sr2-head h2 { margin: 0; font-size: 24px; line-height: 1.1; }
.sr2-tag { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.sr2-level { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); }
.sr2-level span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sr2-level b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, var(--rc2) 50%, var(--rc)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rc) 60%, transparent)); }
.sr2-cap { margin: 0; min-height: 1.3em; text-align: center; font-size: 13.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--rc2) 70%, #fff); }
.sr2.final .sr2-cap { font-family: var(--display); font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 14px var(--rc); animation: rvbeat .5s ease-in-out infinite; }
.sr2-actions { justify-content: center; }

.sr2 li.st { position: relative; transition: transform .25s ease, opacity .35s ease, filter .35s ease, box-shadow .25s ease; }
.sr2 li.st.pending { --tc: #4b5563; opacity: .5; }
.sr2 li.st.pending .st-val { color: rgba(255,255,255,.3); text-shadow: none; }
.sr2 li.st.pending .st-tier { color: rgba(255,255,255,.35); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.sr2 li.st.active { --tc: var(--rc2); opacity: 1; transform: scale(1.035); z-index: 1; border-color: color-mix(in srgb, var(--rc) 80%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent), 0 0 26px -6px var(--rc); }
.sr2 li.st.active .st-val { color: #fff; filter: blur(.5px); text-shadow: 0 0 12px var(--rc); }
.sr2 li.st.active .st-bar i { transition: width .08s linear; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.45)); }
.sr2 li.st.locked .st-val { animation: lockin .4s cubic-bezier(.2,1.6,.4,1); }
.sr2 li.st.locked .st-tier { animation: rvletter .45s cubic-bezier(.2,1.6,.4,1) both; opacity: 0; transform: scale(1.8); }
.sr2.final li.st.done:not(.best) { opacity: .32; filter: saturate(.4); }
.sr2.final li.st.active { transform: scale(1.06); }
.sr2 li.st.best { transform: scale(1.04); }
.sr2-bestbadge { position: absolute; top: -9px; right: 12px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 9px; border-radius: 99px;
  color: #0b0d12; background: linear-gradient(180deg, #fff, var(--tc)); box-shadow: 0 0 14px var(--tc); animation: rvletter .5s cubic-bezier(.2,1.8,.4,1) both; opacity: 0; transform: scale(2); }
@media (prefers-reduced-motion: reduce) { .sr2.final .sr2-cap { animation: none; } .sr2 li.st.active { transform: none; } }

/* Inventory: Sell + Send to game side by side */
.inv-acts { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.inv-acts .btn.small { white-space: nowrap; min-width: 104px; }

/* ---------- preset gear ---------- */
/* Grade colours: how good the roll was inside its rarity's range. */
.g-low { --tc: #9aa4b2; } .g-solid { --tc: #3b9bff; } .g-high { --tc: #b26bff; } .g-perfect { --tc: #fbbf24; }
/* Icon tile: rarity-coloured plate with the gear icon; blueprints get a little BP tag. */
.gtile { --rc: #8fe2ff; position: relative; display: inline-grid; place-items: center; width: 1em; height: 1em; flex: none; vertical-align: middle; border-radius: .24em; line-height: 1;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 38%, #121823), #0a0d12 78%); border: .035em solid color-mix(in srgb, var(--rc) 70%, transparent);
  box-shadow: inset 0 .03em 0 rgba(255,255,255,.12), 0 0 .2em -.05em color-mix(in srgb, var(--rc) 70%, transparent); }
.gtile.r-common { --rc: #b0b8c4; } .gtile.r-uncommon { --rc: #4ade80; } .gtile.r-rare { --rc: #3b82f6; } .gtile.r-epic { --rc: #a855f7; } .gtile.r-legendary { --rc: #facc15; } .gtile.r-mythic { --rc: #ef4444; }
.gtile .gt-ico { width: 66%; height: 66%; object-fit: contain; filter: drop-shadow(0 0 .06em color-mix(in srgb, var(--rc) 90%, transparent)); }
.gtile.is-bp { background-image: linear-gradient(color-mix(in srgb, var(--rc) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rc) 12%, transparent) 1px, transparent 1px), radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 34%, #0f2236), #081320 78%); background-size: .2em .2em, .2em .2em, auto; }
.gtile .gt-bp { position: absolute; right: -.08em; bottom: -.08em; font-family: var(--display); font-size: .2em; font-weight: 800; letter-spacing: .04em; padding: .1em .32em; border-radius: .5em; color: #0b0f14; background: var(--rc); box-shadow: 0 0 0 .12em #0b0f14; }
.item-row .i-icon.gtile { width: 42px; height: 42px; font-size: 42px; border-radius: 10px; }
.odds li > .gtile { font-size: 26px; }
.sr2-head .gtile.sr2-pod { font-size: 56px; }
.spin-card .c-icon.gtile, .mini-card .gtile { font-size: 54px; }
.res-card .res-icon.gtile { font-size: 40px; }
.box-icon.gtile { font-size: 48px; }

/* List pills */
.gear-mini .gm-amt { font-family: var(--display); font-size: 15px; letter-spacing: .02em; color: color-mix(in srgb, var(--tc) 75%, #fff); text-shadow: 0 0 10px color-mix(in srgb, var(--tc) 45%, transparent); }
.gear-mini .dm { color: color-mix(in srgb, var(--tc) 80%, #fff); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 34%, transparent); }
.gear-mini .dm.g-low { color: #cfd6de; }

/* Range bar: where the roll landed between this rarity's min and max */
.gb { display: grid; gap: 3px; }
.gb-track { position: relative; height: 10px; border-radius: 99px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(255,255,255,.05)), repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.4) calc(10% - 1px) 10%); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.gb-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--tc, var(--rc)) 40%, #000), var(--tc, var(--rc)) 75%, color-mix(in srgb, var(--tc, var(--rc)) 55%, #fff)); box-shadow: 0 0 10px color-mix(in srgb, var(--tc, var(--rc)) 55%, transparent); transition: width .8s cubic-bezier(.2,.9,.3,1); }
.gb-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.gb.big .gb-track { height: 16px; }
.g-perfect .gb-track i::before, li.g-perfect .gb-track i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 66%) 0 0 / 220% 100%; animation: stshine 2.4s ease-in-out infinite; }

/* Info sheet (inventory, results, trade) */
.gear-sheet { display: grid; gap: 10px; }
.gs-amt { display: flex; align-items: baseline; gap: 10px; }
.gs-amt strong { font-family: var(--display); font-size: 40px; line-height: 1; color: color-mix(in srgb, var(--tc) 70%, #fff); text-shadow: 0 0 18px color-mix(in srgb, var(--tc) 45%, transparent); }
.gs-grade { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; color: color-mix(in srgb, var(--tc, #9aa4b2) 80%, #fff); background: color-mix(in srgb, var(--tc, #9aa4b2) 15%, transparent); border: 1px solid color-mix(in srgb, var(--tc, #9aa4b2) 38%, transparent); }
.gs-grade:empty { display: none; }
.gs-q { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); }
.gs-q small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gs-q strong { font-size: 22px; color: var(--rc, var(--text)); }
ul.gs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.gs-list li { --tc: #6b7280; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico name val" "bar bar bar"; column-gap: 11px; row-gap: 6px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 13%, transparent), rgba(255,255,255,.02) 55%, color-mix(in srgb, var(--tc) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--tc) 26%, transparent); transition: transform .25s ease, opacity .35s ease; }
ul.gs-list li .st-ico { grid-area: ico; position: relative; width: 36px; height: 36px; border-radius: 11px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 30%, #10141b), #0a0d12 80%); border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); }
ul.gs-list .gs-name { grid-area: name; display: flex; align-items: center; gap: 7px; font-weight: 600; }
ul.gs-list .gs-val { grid-area: val; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--tc) 75%, #fff); text-shadow: 0 0 14px color-mix(in srgb, var(--tc) 45%, transparent); }
ul.gs-list .gb { grid-area: bar; }
ul.gs-list li.g-low .gs-val { color: #e6ebf0; text-shadow: none; }

/* The gear reveal */
.gr .gr-amt { display: grid; justify-items: center; gap: 10px; padding: 6px 2px 2px; --tc: var(--rc); }
.gr .gr-amt .gb { width: 100%; }
.gr-numrow { display: flex; align-items: baseline; gap: 4px; font-family: var(--display); font-weight: 700; }
.gr-x { font-size: 34px; color: var(--muted); }
.gr-num { font-size: clamp(54px, 18vw, 84px); line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, var(--rc2) 55%, var(--rc)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 50%, transparent)); }
.gr-amt.done .gr-num { animation: lockin .45s cubic-bezier(.2,1.6,.4,1); }
.gr-grade { font-size: 12px; padding: 3px 12px; }
.gr-amt.done .gr-grade { animation: rvletter .45s cubic-bezier(.2,1.6,.4,1) both; }
.gr-amt.g-perfect .gr-num { background: linear-gradient(100deg, #8a5a00 0%, #facc15 22%, #fff7c2 38%, #fde047 50%, #b45309 64%, #facc15 80%, #fff3b0 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; animation: lockin .45s cubic-bezier(.2,1.6,.4,1), goldshine 2.6s linear .5s infinite; }
.gr-list li.pending { --tc: #4b5563; opacity: .5; }
.gr-list li.pending .gs-val { color: rgba(255,255,255,.3); text-shadow: none; }
.gr-list li.active { --tc: var(--rc2); opacity: 1; transform: scale(1.035); }
.gr-list li.active .gs-val { color: #fff; filter: blur(.4px); }
.gr-list li.active .gb-track i { transition: width .08s linear; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.45)); }
.gr-list li.locked .gs-val { animation: lockin .4s cubic-bezier(.2,1.6,.4,1); }
.gr-list li.locked .gs-grade { animation: rvletter .45s cubic-bezier(.2,1.6,.4,1) both; }
.sr2.gr.final .gr-list li.locked:not(.active) { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .gb-track i::before, .gr-num { animation: none !important; } }
ul.gs-list li.g-low { --tc: #9aa4b2; } ul.gs-list li.g-solid { --tc: #3b9bff; } ul.gs-list li.g-high { --tc: #b26bff; } ul.gs-list li.g-perfect { --tc: #fbbf24; }
ul.gs-list li.g-perfect { border-color: color-mix(in srgb, var(--tc) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent), 0 6px 22px -8px var(--tc); }
.gr-list li.pending { --tc: #4b5563; }
.gr-list li.active { --tc: var(--rc2); }

/* ---------- Dino Crates ---------- */
.crate-banner { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 14px 14px 14px 12px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(168,85,247,.28), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(239,68,68,.22), transparent 55%), linear-gradient(135deg, #141a26, #0d1119);
  border: 1px solid rgba(168,85,247,.45); box-shadow: 0 10px 30px -14px rgba(168,85,247,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.crate-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.12) 48%, transparent 60%) 0 0 / 250% 100%; animation: sheen 6s ease-in-out infinite; pointer-events: none; }
.cb-pods { display: flex; flex: none; }
.cb-pods .cb-pod { font-size: 34px; margin-left: -9px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.cb-pods .cb-pod:first-child { margin-left: 0; }
.cb-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cb-text strong { font-family: var(--display); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #fff, #e9d5ff 40%, #fca5a5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cb-text span { font-size: 12.5px; color: var(--muted); }
.cb-go { font-size: 28px; color: #c084fc; }
.modal-card.tall-modal { max-height: 92dvh; }
.crate-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.crate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.cg-tile { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.cg-tile:active { transform: scale(.97); }
.cg-tile .cg-pod { font-size: 40px; }
.crate-tiers { display: grid; gap: 8px; }
.crate-tier { --cc: #94a3b8; display: grid; gap: 8px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 12px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 14%, transparent), rgba(255,255,255,.02) 60%); border: 1px solid color-mix(in srgb, var(--cc) 30%, var(--line)); transition: border-color .2s, box-shadow .2s, transform .15s; }
.crate-tier.on { border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc), 0 8px 24px -10px var(--cc); }
.crate-tier:active { transform: scale(.99); }
.ct-head { display: flex; align-items: baseline; gap: 8px; }
.ct-head strong { font-family: var(--display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 60%, #fff); }
.ct-from { flex: 1; font-size: 12.5px; color: var(--muted); }
.ct-price { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; }
.ct-bar { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; }
.ct-bar i { display: block; min-width: 3px; }
.ct-odds { display: flex; flex-wrap: wrap; gap: 2px 10px; font-family: var(--mono); font-size: 11px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .crate-banner::after { animation: none; } }
.cg-tile span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }

/* in-app Tip4Serv store */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ws-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; border-radius: 14px; border: 1px solid var(--line, #252a35); background: var(--surface, #0f1218); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.ws-card:active { transform: scale(.98); }
.ws-card img, .ws-card .ws-noimg { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: var(--surface-2, #161a22); }
.ws-card .ws-noimg { display: grid; place-items: center; font-size: 30px; }
.ws-card strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.ws-price { font-weight: 800; color: var(--accent, #ff8a1e); }
.ws-price s { font-weight: 500; margin-right: 4px; }
.ws-price.big { font-size: 20px; margin: 2px 0 8px; }
.ws-hero { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; }
.ws-desc { white-space: pre-line; font-size: 14px; line-height: 1.5; max-height: 40vh; overflow: auto; }
.chips.scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips.scroll .chip { flex: none; }
.center { text-align: center; }
.ws-gives { border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--text); border-radius: 12px; padding: 8px 12px; font-size: 14px; margin-bottom: 8px; }