/* Dueling Ox - styles. Phone-first, one column, max 480px. */
:root {
  --bg1: #1c1745; --bg2: #2d1b5e; --card: rgba(255,255,255,.07); --card2: rgba(255,255,255,.12); --line: rgba(255,255,255,.13);
  --text: #f4f2ff; --muted: #b9b3e0; --x: #ff5a5f; --o: #2ec4b6; --gold: #ffd166; --good: #4ade80; --bad: #f87171;
  --accent: linear-gradient(135deg, #ff5a5f, #ff8a4c); --accent2: linear-gradient(135deg, #2ec4b6, #3b82f6);
  --r: 18px; --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(120% 80% at 50% 0%, #3a2580 0%, var(--bg2) 40%, var(--bg1) 100%) fixed; color: var(--text); overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
p { margin: 6px 0; }

#app { position: relative; max-width: 480px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; }

/* ---------- HUD ---------- */
#hud { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top)) 16px 8px; }
.hud-me { display: flex; align-items: center; gap: 8px; }
.hud-lvl { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.hud-lvl b { font-size: 12px; background: var(--card2); padding: 1px 7px; border-radius: 8px; }
.hud-lvl i { display: block; width: 64px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.hud-lvl em { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #60a5fa); border-radius: 4px; transition: width .5s; }
.hud-rank { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; background: var(--card); padding: 6px 10px; border-radius: 20px; border: 1px solid var(--line); }
.hud-coins { display: flex; align-items: center; gap: 5px; background: var(--card); padding: 6px 6px 6px 10px; border-radius: 20px; border: 1px solid var(--line); font-weight: 800; }
.hud-coins .plus { background: var(--gold); color: #3b2a00; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
body[data-screen=game] #hud, body[data-screen=game] #tabs { display: none; }

/* ---------- screens ---------- */
#screens { flex: 1; position: relative; overflow: hidden; }
.screen { position: absolute; inset: 0; overflow-y: auto; padding: 4px 16px 24px; display: none; -webkit-overflow-scrolling: touch; }
.screen.active { display: block; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#screen-game { padding: calc(8px + var(--safe-top)) 16px calc(12px + var(--safe-bot)); display: none; flex-direction: column; }
#screen-game.active { display: flex; }

/* ---------- tabs ---------- */
#tabs { display: flex; justify-content: space-around; padding: 6px 6px calc(6px + var(--safe-bot)); background: rgba(18,14,48,.85); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
#tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 10px; border-radius: 12px; }
#tabs button .ti { font-size: 22px; filter: grayscale(.6); opacity: .8; transition: transform .15s; }
#tabs button.on { color: #fff; background: var(--card2); }
#tabs button.on .ti { filter: none; opacity: 1; transform: translateY(-2px) scale(1.1); }
.badge { position: absolute; top: 0; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--x); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; display: grid; place-items: center; }

/* ---------- cards and buttons ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; padding: 12px 18px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); transition: transform .08s, filter .15s; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--accent); border: 0; box-shadow: 0 6px 18px rgba(255,90,95,.35); color: #fff; }
.btn.teal { background: var(--accent2); border: 0; box-shadow: 0 6px 18px rgba(46,196,182,.3); color: #fff; }
.btn.gold { background: linear-gradient(135deg, #ffd166, #f59e0b); color: #3b2a00; border: 0; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 11px; }
.btn.xl { padding: 16px 22px; font-size: 20px; border-radius: 18px; width: 100%; }
.btn.block { width: 100%; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; background: var(--card2); font-size: 12px; font-weight: 700; }
.bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #a78bfa, #60a5fa); transition: width .6s; }
.bar.gold > i { background: linear-gradient(90deg, #ffd166, #f59e0b); }
.bar.green > i { background: linear-gradient(90deg, #4ade80, #22c55e); }
.sec-t { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 18px 2px 8px; }

/* ---------- play screen ---------- */
.logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 12px; font-weight: 900; font-size: 34px; letter-spacing: -.02em; }
.logo .lw { text-align: left; line-height: 1.05; }
.logo .lw small { margin-top: 5px; letter-spacing: .28em; }
.logo .ox-art { flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.logo .lx { color: var(--x); } .logo .lo { color: var(--o); }
.logo small { display: block; font-size: 12px; letter-spacing: .3em; color: var(--muted); font-weight: 800; margin-top: -4px; }
.hero { background: linear-gradient(160deg, rgba(255,90,95,.25), rgba(124,58,237,.25)); border: 1px solid rgba(255,255,255,.18); }
.hero .rk { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rank-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: var(--rk, #c98a52); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.25); }
.mode-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 10px; background: rgba(0,0,0,.2); border-radius: 10px; margin-bottom: 10px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tile { text-align: left; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.tile b { font-size: 16px; }
.tile small { color: rgba(255,255,255,.8); font-size: 12px; }
.tile .ic { font-size: 28px; }
.tile.t1 { background: linear-gradient(150deg, #2ec4b6, #1d7f9e); }
.tile.t2 { background: linear-gradient(150deg, #7c3aed, #4c1d95); }
.tile.t3 { background: linear-gradient(150deg, #f59e0b, #c2410c); }
.tile.t4 { background: linear-gradient(150deg, #ec4899, #9d174d); }
.tile .done { position: absolute; top: 10px; right: 10px; font-size: 18px; }
.quest { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.quest:first-of-type { border-top: 0; }
.quest .qt { font-weight: 700; font-size: 14px; }
.quest .qr { font-size: 12px; color: var(--gold); font-weight: 800; }
.quest .bar { grid-column: 1; }
.login-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 8px 0 10px; }
.login-days div { text-align: center; padding: 6px 0; border-radius: 10px; background: var(--card); font-size: 11px; font-weight: 800; border: 1px solid var(--line); }
.login-days div.got { background: rgba(74,222,128,.2); border-color: rgba(74,222,128,.5); }
.login-days div.today { background: var(--gold); color: #3b2a00; transform: scale(1.06); }
.login-days span { display: block; font-size: 15px; }
.fg { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.fg:first-of-type { border-top: 0; }
.fg .who { flex: 1; } .fg .who b { display: block; }
.turn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.offer { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(255,209,102,.25), rgba(245,158,11,.15)); border-color: rgba(255,209,102,.45); }
.offer .big { font-size: 34px; }
.offer .grow { flex: 1; }

/* ---------- avatar and frames ---------- */
.avatar { --sz: 44px; width: var(--sz); height: var(--sz); border-radius: 50%; display: inline-grid; place-items: center; font-size: calc(var(--sz) * .58); background: rgba(255,255,255,.14); flex: none; position: relative; }
.fr-bronze { box-shadow: 0 0 0 3px #c98a52; }
.fr-silver { box-shadow: 0 0 0 3px #cbd5e1; }
.fr-gold { box-shadow: 0 0 0 3px #fbbf24, 0 0 12px rgba(251,191,36,.6); }
.fr-neon { box-shadow: 0 0 0 3px #22d3ee, 0 0 14px #f472b6; }
.fr-rainbow { box-shadow: 0 0 0 3px transparent; background: linear-gradient(rgba(40,30,90,1), rgba(40,30,90,1)) padding-box, conic-gradient(#ff5a5f, #ffd166, #4ade80, #22d3ee, #a78bfa, #ff5a5f) border-box; border: 3px solid transparent; }

/* ---------- game screen ---------- */
.g-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--card2); display: grid; place-items: center; font-size: 18px; border: 1px solid var(--line); }
.g-title { flex: 1; text-align: center; font-weight: 800; }
.g-title small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.players { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.pl { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 16px; background: var(--card); border: 2px solid transparent; transition: border-color .2s, background .2s; position: relative; min-width: 0; }
.pl.right { flex-direction: row-reverse; text-align: right; }
.pl.on { border-color: rgba(255,255,255,.55); background: var(--card2); }
.pl .nm { min-width: 0; }
.pl .nm b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .nm small { font-size: 11px; color: var(--muted); }
.pl .pm { width: 24px; height: 24px; flex: none; }
.pl .clock { position: absolute; left: 10px; right: 10px; bottom: -4px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.pl .clock i { display: block; height: 100%; background: var(--good); }
.pl .clock i.low { background: var(--bad); }
.vs { font-weight: 900; color: var(--muted); font-size: 13px; }
.status { text-align: center; font-weight: 800; min-height: 26px; margin: 4px 0 8px; font-size: 16px; }
.status.mine { color: var(--gold); }
.board-wrap { flex: 1; display: grid; place-items: center; min-height: 0; position: relative; }
.bubble { position: absolute; top: -6px; z-index: 5; background: #fff; color: #1e1b4b; font-weight: 800; padding: 8px 12px; border-radius: 14px; font-size: 14px; animation: bubble 2.6s forwards; box-shadow: 0 6px 20px rgba(0,0,0,.3); white-space: nowrap; }
.bubble.l { left: 10px; } .bubble.r { right: 10px; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.g-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.g-actions .btn { flex: 1; max-width: 140px; }
.wait-card { text-align: center; padding: 18px; }
.code { font-size: 40px; font-weight: 900; letter-spacing: .25em; margin: 6px 0 4px; color: var(--gold); }

/* ---------- boards ---------- */
.board { --gap: 7px; --cellbg: #fffaf0; --gapc: #e2d6b8; --bbg: #fdf6e3; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); gap: var(--gap); padding: var(--gap); border-radius: 22px; background: var(--gapc); box-shadow: 0 14px 40px rgba(0,0,0,.35); width: min(100%, 420px, calc(100vh - 330px)); aspect-ratio: 1; }
.board.n5 { --gap: 5px; } .board.n9 { --gap: 3px; border-radius: 16px; }
.cell { background: var(--cellbg); border-radius: 14px; display: grid; place-items: center; position: relative; transition: background .15s, transform .1s; min-width: 0; min-height: 0; }
.board.n5 .cell { border-radius: 10px; } .board.n9 .cell { border-radius: 5px; }
.cell:active { transform: scale(.95); }
.cell .mark { width: 86%; height: 86%; }
.cell.last { box-shadow: inset 0 0 0 3px rgba(255,209,102,.7); }
.cell.hint { animation: hint 1s infinite; }
@keyframes hint { 50% { box-shadow: inset 0 0 0 4px #ffd166, 0 0 16px #ffd166; } }
.cell.win { animation: winpulse .9s ease-in-out 3; }
@keyframes winpulse { 50% { transform: scale(1.08); } }
.cell.dim .mark { opacity: .35; }
.winline { position: absolute; inset: var(--gap); pointer-events: none; width: calc(100% - 2 * var(--gap)); height: calc(100% - 2 * var(--gap)); overflow: visible; }
.winline line { stroke: #fff; stroke-width: .12; stroke-linecap: round; stroke-dasharray: 10; stroke-dashoffset: 10; animation: drawline .45s .1s forwards; filter: drop-shadow(0 0 .08px rgba(0,0,0,.6)); }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.mark.anim .ln { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: drawmark .32s ease-out forwards; }
.mark.anim .fl { transform-origin: 50% 50%; animation: popmark .3s cubic-bezier(.2,1.6,.4,1) both; }
.mark.dash .ln { stroke-dasharray: 9 4; animation: none; stroke-dashoffset: 0; opacity: .95; }
.mark.glow { filter: drop-shadow(0 0 5px var(--glow)); }
@keyframes drawmark { 99% { stroke-dashoffset: 0; stroke-dasharray: 100 100; } to { stroke-dashoffset: 0; stroke-dasharray: none; } }
@keyframes popmark { from { transform: scale(0); } to { transform: scale(1); } }
/* Ultimate */
.ult { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); --gap: 6px; }
.sub { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; min-width: 0; min-height: 0; padding: 3px; border-radius: 12px; background: var(--gapc); position: relative; transition: box-shadow .2s, opacity .2s; }
.sub .cell { border-radius: 6px; }
.sub.active { background: #ffd166; box-shadow: 0 0 0 3px #ffd166, 0 0 16px rgba(255,209,102,.7); z-index: 1; }
.sub.done .cell { opacity: .35; }
.sub .big { position: absolute; inset: 6%; pointer-events: none; display: grid; place-items: center; }
.sub .big .mark { width: 100%; height: 100%; }
.ult.wait .sub:not(.active) { opacity: .8; }
/* themes */
.th-paper { --bbg: #fdf6e3; --cellbg: #fffaf0; --gapc: #dccfae; }
.th-midnight { --cellbg: #1e293b; --gapc: #3a4a63; }
.th-wood { --cellbg: #e3b47f; --gapc: #8a5a2b; }
.th-chalkboard { --cellbg: #24463a; --gapc: #c9dccf; }
.th-ocean { --cellbg: rgba(255,255,255,.18); --gapc: linear-gradient(135deg, #0ea5e9, #1e3a8a); background: linear-gradient(135deg, #0ea5e9, #1e3a8a); }
.th-ocean .sub { background: rgba(255,255,255,.12); }
.th-neongrid { --cellbg: #12052e; --gapc: #ff2bd6; box-shadow: 0 0 22px rgba(255,43,214,.6), 0 14px 40px rgba(0,0,0,.35); }
.th-sunset { --cellbg: rgba(255,255,255,.22); background: linear-gradient(135deg, #f97316, #db2777); }
.th-sunset .sub { background: rgba(255,255,255,.14); }
.th-marble { --cellbg: #f8fafc; --gapc: #9ca3af; background: linear-gradient(135deg, #e5e7eb, #9ca3af 40%, #e5e7eb 60%, #cbd5e1); }

/* ---------- modal, sheet, toast ---------- */
#modal { position: fixed; inset: 0; z-index: 40; background: rgba(8,5,30,.65); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: fadein .15s; }
#modal.center { align-items: center; }
.modal-card { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, #2f2470, #221a55); border: 1px solid var(--line); border-radius: 24px 24px 0 0; padding: 20px 18px calc(18px + var(--safe-bot)); animation: up .22s cubic-bezier(.2,.9,.3,1); }
#modal.center .modal-card { border-radius: 24px; margin: 16px; width: calc(100% - 32px); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-card h2 { margin-bottom: 4px; }
.modal-card .row { margin-top: 14px; }
.buyline { display: flex; justify-content: space-between; padding: 14px; border-radius: 14px; background: var(--card); margin: 12px 0 4px; font-weight: 800; }
#toast { position: fixed; left: 50%; top: calc(14px + var(--safe-top)); transform: translate(-50%, calc(-100% - 40px)); z-index: 60; background: #fff; color: #1e1b4b; font-weight: 800; padding: 10px 16px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .25s; max-width: 90vw; text-align: center; font-size: 14px; }
#toast.on { transform: translate(-50%, 0); }
.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 30; }
.ad-overlay { position: fixed; inset: 0; z-index: 80; background: #000; display: grid; place-items: center; }
.ad-box { text-align: center; color: #fff; }
.ad-box .ad-art { font-size: 80px; margin: 20px; }
.ad-box small { color: #aaa; letter-spacing: .1em; text-transform: uppercase; }

/* variant picker */
.vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.vopt { text-align: left; padding: 12px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); position: relative; }
.vopt b { display: block; font-size: 15px; }
.vopt small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.3; }
.vopt.on { border-color: var(--gold); background: rgba(255,209,102,.12); }
.vopt.locked { opacity: .65; }
.vopt .lk { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 8px; }
.seg { display: flex; background: var(--card); border-radius: 12px; padding: 4px; gap: 4px; margin: 6px 0 4px; }
.seg button { flex: 1; padding: 9px 4px; border-radius: 9px; font-weight: 800; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--card2); color: #fff; }
.code-in { width: 100%; text-align: center; font-size: 28px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase; padding: 10px; border-radius: 14px; border: 2px solid var(--line); background: rgba(0,0,0,.2); color: #fff; outline: none; }
.code-in:focus { border-color: var(--gold); }
.spinner { width: 64px; height: 64px; margin: 18px auto; border-radius: 50%; border: 6px solid rgba(255,255,255,.15); border-top-color: var(--x); border-right-color: var(--o); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* results */
.result { text-align: center; }
.result .big-t { font-size: 38px; font-weight: 900; margin: 4px 0; }
.result .big-t.win { background: linear-gradient(90deg, #ffd166, #ff8a4c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rewards { display: flex; justify-content: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.rw { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-weight: 900; font-size: 18px; min-width: 84px; }
.rw small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.rw.up { color: var(--good); } .rw.down { color: var(--bad); }
.notes { text-align: left; margin: 10px 0; }
.notes div { padding: 8px 10px; border-radius: 10px; background: var(--card); margin-top: 6px; font-size: 14px; font-weight: 700; }
.lvl-burst { font-size: 64px; font-weight: 900; background: linear-gradient(135deg, #a78bfa, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- pass ---------- */
.pass-head { background: linear-gradient(140deg, #7c3aed, #db2777); border: 0; }
.pass-head .row { margin-top: 10px; flex-wrap: wrap; }
.pass-head .row .btn { flex: 1 1 auto; }
.tier { display: grid; grid-template-columns: 42px 1fr 1fr; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.tier .tn { display: grid; place-items: center; font-weight: 900; border-radius: 12px; background: var(--card); }
.tier.reached .tn { background: linear-gradient(135deg, #a78bfa, #60a5fa); }
.rwd { border-radius: 12px; background: var(--card); border: 1px solid var(--line); padding: 8px; font-size: 12px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; justify-content: space-between; min-height: 64px; }
.rwd.prem { background: rgba(255,209,102,.08); border-color: rgba(255,209,102,.3); }
.rwd .btn { padding: 5px 8px; font-size: 12px; border-radius: 9px; }
.rwd .got { color: var(--good); }
.rwd .pv { display: flex; align-items: center; gap: 6px; }
.rwd .pv svg { width: 22px; height: 22px; }
.track-h { display: grid; grid-template-columns: 42px 1fr 1fr; gap: 8px; font-size: 12px; font-weight: 800; color: var(--muted); margin: 14px 0 6px; text-align: center; }

/* ---------- ranks ---------- */
.rank-hero { text-align: center; }
.rank-hero .rank-badge { width: 84px; height: 84px; font-size: 46px; border-radius: 24px; margin: 4px auto 10px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); }
.lb-row:first-child { border-top: 0; }
.lb-row .pos { width: 28px; text-align: center; font-weight: 900; color: var(--muted); }
.lb-row .who { flex: 1; min-width: 0; } .lb-row .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row.you { background: rgba(255,209,102,.12); border-radius: 12px; }
.tier-list div { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.tier-list i { width: 18px; height: 18px; border-radius: 6px; }

/* ---------- shop ---------- */
.tabs2 { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin: 0 -16px 10px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.tabs2::-webkit-scrollbar { display: none; }
.tabs2 button { flex: none; padding: 8px 14px; border-radius: 12px; background: var(--card); font-weight: 800; font-size: 13px; color: var(--muted); border: 1px solid var(--line); }
.tabs2 button.on { background: #fff; color: #1e1b4b; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.item.eq { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.item .pv { height: 92px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,0,0,.18); overflow: hidden; }
.item .pv.light { background: #fdf6e3; }
.item .pv .pair { display: flex; gap: 6px; } .item .pv .pair svg { width: 52px; height: 52px; }
.item .pv .mini { width: 78px; height: 78px; --gap: 3px; border-radius: 10px; box-shadow: none; }
.item .pv .mini .cell { border-radius: 4px; }
.item .pv .emo { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.6; padding: 4px; }
.item .nm { font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; }
.item .tag { position: absolute; top: 8px; left: 8px; background: var(--x); color: #fff; font-size: 10.5px; font-weight: 900; padding: 2px 7px; border-radius: 8px; z-index: 1; }
.item .acts { display: flex; gap: 6px; } .item .acts .btn { flex: 1; padding: 8px 6px; font-size: 12.5px; border-radius: 10px; }
.was { text-decoration: line-through; color: rgba(59,42,0,.6); font-size: 11px; margin-left: 4px; }
.iap { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; position: relative; }
.iap .big { font-size: 30px; width: 44px; text-align: center; }
.iap .grow { flex: 1; } .iap .grow small { display: block; color: var(--muted); font-size: 12px; }
.iap.feat { background: linear-gradient(135deg, rgba(255,209,102,.18), rgba(255,90,95,.12)); border-color: rgba(255,209,102,.45); }
.iap .tag { position: absolute; top: -8px; right: 12px; background: var(--x); color: #fff; font-size: 10.5px; font-weight: 900; padding: 2px 8px; border-radius: 8px; }

/* ---------- profile ---------- */
.prof-head { display: flex; align-items: center; gap: 14px; }
.prof-head .grow { flex: 1; min-width: 0; }
.prof-head input { width: 100%; background: transparent; border: 0; border-bottom: 2px dashed var(--line); color: #fff; font-size: 20px; font-weight: 900; padding: 2px 0; outline: none; }
.av-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
.av-grid button { aspect-ratio: 1; border-radius: 14px; background: var(--card); font-size: 24px; border: 2px solid transparent; }
.av-grid button.on { border-color: var(--gold); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { background: var(--card); border-radius: 14px; padding: 10px; text-align: center; }
.stats b { display: block; font-size: 20px; } .stats small { font-size: 11px; color: var(--muted); font-weight: 700; }
.ach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ach div { background: var(--card); border-radius: 14px; padding: 10px; font-size: 12px; border: 1px solid var(--line); }
.ach div b { display: block; font-size: 13px; }
.ach div.got { border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.1); }
.ach div:not(.got) { opacity: .6; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); gap: 10px; }
.set-row:first-child { border-top: 0; }
.toggle { width: 50px; height: 30px; border-radius: 16px; background: rgba(255,255,255,.2); position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--good); } .toggle.on::after { transform: translateX(20px); }
.fine { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.fine a { color: var(--o); }

@media (max-height: 700px) { .board { width: min(100%, 420px, calc(100vh - 280px)); } .players .pl { padding: 6px; } }