:root{--bg-main:#070a09;--bg-deep:#030504;--bg-panel:#101512;--bg-raised:#151c18;--bg-soft:#0c110e;--green:#70f2a2;--green-strong:#3ee883;--green-dark:#1e9e58;--green-muted:rgba(112,242,162,.14);--gold:#d8b55b;--red:#ef6464;--blue:#64a5ef;--text:#f3f6f4;--sub:#a3ada7;--muted:#68736c;--line:rgba(255,255,255,.08);--active:rgba(112,242,162,.48);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:var(--bg-main);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{padding-bottom:calc(84px + var(--safe-bottom));background:radial-gradient(circle at 50% -10%,rgba(112,242,162,.08),transparent 38%),var(--bg-main)}button,input,select{font:inherit}.arena-bg{position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(112,242,162,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(112,242,162,.035) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 65%)}#app{position:relative;width:min(760px,100%);margin:auto;padding:calc(16px + var(--safe-top)) 16px 20px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.brand{display:flex;gap:10px;align-items:center}.mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--active);border-radius:12px;background:var(--green-muted);color:var(--green);font-size:19px}.brand strong{display:block;font-size:14px;letter-spacing:.07em}.brand small,.eyebrow{color:var(--green);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.avatar{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#244630,#101512);font-weight:800}.group{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:15px;background:var(--bg-soft);color:var(--sub);font-size:12px}.status{color:var(--green);white-space:nowrap}.status:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}.card{padding:18px;margin-bottom:12px;border:1px solid var(--line);border-radius:20px;background:rgba(16,21,18,.96)}.balance{position:relative;overflow:hidden}.balance:after{content:"";position:absolute;right:-55px;top:-55px;width:140px;height:140px;border:1px solid rgba(112,242,162,.12);border-radius:50%}.balance-main{margin:5px 0 15px;font-size:38px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.balance-main small{font-size:13px;color:var(--green);letter-spacing:.05em}.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.stat{padding-top:10px;border-top:1px solid var(--line)}.stat b{display:block;font-size:15px}.stat span{font-size:10px;color:var(--muted)}.action-card{padding:22px;background:linear-gradient(125deg,rgba(30,158,88,.22),rgba(16,21,18,.96) 55%)}h1,h2,h3,p{margin-top:0}h1{font-size:26px;letter-spacing:-.04em;margin-bottom:6px}h2{font-size:17px;margin:22px 0 10px}h3{font-size:14px;margin-bottom:5px}.muted{color:var(--sub);font-size:12px;line-height:1.5}.row{display:flex;gap:9px;align-items:center}.btn{min-height:48px;padding:0 16px;border:1px solid transparent;border-radius:14px;background:var(--green);color:#071109;font-weight:800;cursor:pointer}.btn.secondary{background:var(--bg-raised);border-color:var(--line);color:var(--text)}.btn.small{min-height:42px;margin-left:auto}.btn:focus-visible,.nav:focus-visible{outline:2px solid var(--green);outline-offset:2px}.filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}.chip{min-height:36px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);color:var(--sub);font-size:11px;white-space:nowrap}.chip.active{border-color:var(--active);color:var(--green);background:var(--green-muted)}.match,.challenge{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.game-icon{width:46px;height:46px;border:1px solid var(--line);border-radius:14px;background:var(--bg-raised);display:grid;place-items:center;font-size:23px}.meta{font-size:11px;color:var(--sub);line-height:1.45}.live{color:var(--red)}.live:before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}.tabs{display:flex;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);overflow:auto}.tabs button{flex:1;min-height:38px;border:0;border-radius:10px;background:transparent;color:var(--sub);font-size:11px}.tabs .active{background:var(--bg-raised);color:var(--text)}.rank{display:grid;grid-template-columns:28px 40px 1fr auto;gap:10px;align-items:center}.rank .place{font-weight:800;color:var(--gold)}.profile-head{text-align:center;padding:24px}.profile-head .avatar{width:74px;height:74px;margin:0 auto 12px;font-size:25px;border-color:var(--active)}.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.profile-grid .card{text-align:center;margin:0}.profile-grid b{display:block;font-size:22px}.activity{padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.form-step{margin-bottom:18px}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.option{min-height:78px;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--bg-soft);color:var(--text);text-align:left}.option strong{display:block;margin-bottom:5px}.option small{color:var(--sub)}.option.selected{border-color:var(--active);background:var(--green-muted)}label{display:block;margin-bottom:7px;color:var(--sub);font-size:11px}.field{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-deep);color:var(--text)}.summary{line-height:1.9;font-size:12px}.summary b{float:right}.empty{text-align:center;padding:32px 20px;color:var(--sub)}.bottom-nav{position:fixed;z-index:5;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,100%);height:calc(70px + var(--safe-bottom));padding:7px 8px var(--safe-bottom);display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:rgba(7,10,9,.94);backdrop-filter:blur(18px)}.bottom-nav button{min-height:54px;border:0;background:transparent;color:var(--muted);font-size:9px}.bottom-nav span{display:block;margin-bottom:3px;font-size:20px}.bottom-nav .active{color:var(--green)}.bottom-nav .create span{width:42px;height:42px;margin:-19px auto 2px;display:grid;place-items:center;border:4px solid var(--bg-main);border-radius:14px;background:var(--green);color:#071109;font-size:25px}#toast{position:fixed;z-index:10;left:50%;bottom:92px;transform:translate(-50%,20px);padding:12px 16px;border:1px solid var(--active);border-radius:12px;background:var(--bg-raised);opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}@media(min-width:560px){#app{padding-left:28px;padding-right:28px}.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.cards-2 .card{margin:0}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* ---- v2: live-app components (formatted; new styles go here) ---- */
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); color: var(--sub); font-size: 17px; cursor: pointer; }
.status-dot { color: var(--green); font-size: 8px; vertical-align: 1px; }
.chev { color: var(--muted); font-size: 22px; }
.center { text-align: center; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.btn.danger { background: rgba(239, 100, 100, .14); border-color: rgba(239, 100, 100, .4); color: var(--red); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn.roll-big { width: 100%; min-height: 58px; margin-top: 12px; font-size: 15px; letter-spacing: .04em; }
.rps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rps-row .btn { min-height: 56px; }
.versus { text-align: center; }
.versus h1 { font-size: 21px; }
.versus h1 small { display: block; margin: 2px 0; color: var(--muted); font-size: 11px; }
.big-score { margin: 10px 0 4px; font-size: 44px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.round-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.round-row:last-child { border-bottom: 0; }
.round-row > span:first-child { color: var(--muted); font-weight: 800; }
.result-banner { margin-top: 14px; padding: 14px; border-radius: 14px; font-weight: 800; }
.result-banner.win { border: 1px solid var(--active); background: var(--green-muted); color: var(--green); }
.result-banner.loss { border: 1px solid rgba(239, 100, 100, .35); background: rgba(239, 100, 100, .1); color: var(--red); }
.form-problem { margin: 4px 0 10px; color: var(--gold); font-size: 12px; }
.option.wide { width: 100%; min-height: 58px; margin-bottom: 8px; }
.rank.is-me { border-color: var(--active); }
.avatar.big { width: 74px; height: 74px; margin: 0 auto 12px; font-size: 25px; border-color: var(--active); }
.avatar { cursor: pointer; }
.ledger-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.card.skeleton { min-height: 96px; border-color: transparent; background: linear-gradient(100deg, var(--bg-panel) 40%, var(--bg-raised) 50%, var(--bg-panel) 60%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
#toast.error { border-color: rgba(239, 100, 100, .5); color: var(--red); }
.match[role="button"] { cursor: pointer; }

/* ---- v3: persistent top chrome + progressive create flow ---- */
body { padding-bottom: calc(78px + var(--safe-bottom)); }
.app-head { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: var(--safe-top); background: rgba(7, 10, 9, .93); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.app-head .topbar { width: min(760px, 100%); margin: 0 auto; padding: 10px 16px 7px; }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-id { min-width: 0; }
.tb-id strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-id small { color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.tb-right { display: flex; align-items: center; gap: 9px; }
.tb-lng { text-align: right; padding: 5px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); line-height: 1.15; }
.tb-lng b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tb-lng small { margin-left: 4px; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.tb-lng span { display: block; color: var(--muted); font-size: 9px; }
.avatar.sm { width: 34px; height: 34px; font-size: 14px; flex: none; }
.main-nav { position: fixed; left: 50%; bottom: 0; z-index: 20; transform: translateX(-50%); width: min(760px, 100%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 7px 8px calc(7px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(7, 10, 9, .93); backdrop-filter: blur(16px); }
.main-nav button { min-height: 50px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .03em; cursor: pointer; }
.main-nav button span { display: block; margin-bottom: 1px; font-size: 17px; line-height: 1; }
.main-nav button.active { color: var(--green); background: var(--green-muted); }
/* the raised Create button: the bar's focal point */
.main-nav button.create { overflow: visible; background: transparent !important; color: var(--sub); }
.main-nav button.create span { display: grid; place-items: center; width: 52px; height: 52px; margin: -24px auto 3px; border: 1px solid var(--active); border-radius: 17px; background: linear-gradient(160deg, rgba(112, 242, 162, .28), rgba(112, 242, 162, .12)); color: var(--green); font-size: 27px; box-shadow: 0 -2px 18px rgba(112, 242, 162, .18), 0 8px 20px rgba(0, 0, 0, .45); }
.main-nav button.create:active span { transform: scale(.93); }
.main-nav button.create.active { color: var(--green); }
.main-nav button.create.active span { background: linear-gradient(160deg, rgba(112, 242, 162, .45), rgba(112, 242, 162, .2)); }
#app { padding-top: calc(76px + var(--safe-top)); }
#toast { bottom: calc(88px + var(--safe-bottom)); }
.page-title { margin-bottom: 12px; }

/* progressive create flow */
.seg-row { display: flex; gap: 7px; margin-top: 8px; }
.seg-row.wrap { flex-wrap: wrap; }
.cat-row { margin-top: 0; }
.seg { flex: 1 1 auto; min-height: 46px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-soft); color: var(--sub); font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color .16s, background .16s, color .16s, transform .1s; }
.seg:active { transform: scale(.97); }
.seg.big { min-height: 54px; font-size: 13px; }
.seg.selected { border-color: var(--active); background: var(--green-muted); color: var(--green); }
.seg i { display: block; margin-top: 2px; font-style: normal; font-size: 10px; font-weight: 800; }
.seg-row.wrap .seg { flex: 1 1 30%; }
.create-card { padding: 18px 16px; }
.game-desc { margin: 2px 0 14px; padding: 11px 13px; border-left: 2px solid var(--active); border-radius: 4px 12px 12px 4px; background: rgba(112, 242, 162, .06); color: var(--sub); font-size: 12px; line-height: 1.5; }
.form-step { margin-top: 18px; margin-bottom: 0; }
.lock-btn { width: 100%; min-height: 52px; margin-top: 12px; font-size: 14px; letter-spacing: .04em; }
.small-note { margin-top: 10px; font-size: 11px; }
.reveal { animation: fadeUp .24s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } }
#step-summary .summary { margin-top: 16px; margin-bottom: 0; }

/* rankings */
.place.medal { font-size: 19px; }
.rank-net { text-align: right; line-height: 1.1; }
.rank-net small { display: block; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
h3 small { color: var(--muted); font-size: 11px; font-weight: 600; }

/* profile */
.profile-lng { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.profile-lng b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.profile-lng small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.history-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; cursor: pointer; }
.game-icon.sm { width: 40px; height: 40px; font-size: 19px; }
.history-out { text-align: right; }
.history-out b { display: block; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pill { padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 1000; letter-spacing: .08em; }
.pill.win { border: 1px solid var(--active); background: var(--green-muted); color: var(--green); }
.pill.loss { border: 1px solid rgba(239, 100, 100, .4); background: rgba(239, 100, 100, .12); color: var(--red); }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* live spectate view (matches auto-play after accept) */
.live-banner { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; padding: 11px 13px; border: 1px solid var(--active); border-radius: 13px; background: var(--green-muted); color: var(--green); font-size: 11px; font-weight: 800; text-align: left; }
.live-banner i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); animation: pulse 1.4s infinite; }
.spectate { margin-top: 10px; }
.spectate-line { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.spectate-line:last-child { border-bottom: 0; }
.spectate-line b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* following */
.follow-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 16px; cursor: pointer; transition: color .15s, border-color .15s, transform .1s; }
.follow-btn:active { transform: scale(.9); }
.follow-btn.on { border-color: rgba(216, 181, 91, .55); background: rgba(216, 181, 91, .12); color: var(--gold); }
.card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.match { grid-template-columns: auto 1fr auto auto; }
.rank-right { display: flex; align-items: center; gap: 10px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 12px; }
.pref-seg { flex: none; margin-top: 0; }
.pref-seg .seg { flex: none; min-height: 36px; min-width: 52px; }
.follow-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.follow-row:last-child { border-bottom: 0; }
.follow-row h3 { margin: 0 0 2px; }
.pill.mutual { margin-left: 4px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--sub); font-size: 8px; vertical-align: 2px; }
.list-note { margin: 12px 0 4px; }
.main-nav ~ #toast { bottom: calc(92px + var(--safe-bottom)); }

/* help button + rules popup */
.help-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 1px solid var(--active); border-radius: 50%; background: var(--green-muted); color: var(--green); font-size: 12px; font-weight: 900; cursor: pointer; vertical-align: -4px; }
.modal-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px; background: rgba(3, 5, 4, .72); backdrop-filter: blur(6px); animation: fadeUp .18s ease-out; }
.modal-panel { position: relative; width: min(420px, 100%); max-height: 82vh; overflow-y: auto; padding: 20px 18px; border: 1px solid rgba(188, 232, 203, .2); border-radius: 20px; background: linear-gradient(155deg, rgba(24, 40, 43, .98), rgba(9, 11, 23, .99)); box-shadow: 0 28px 75px rgba(0, 0, 0, .6); }
.modal-panel h2 { margin: 0 40px 10px 0; }
.modal-panel h3 { margin: 16px 0 9px; font-size: 13px; color: var(--green); letter-spacing: .05em; text-transform: uppercase; }
.modal-panel p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
.modal-close { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; padding: 0 0 2px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-soft); color: #fff; font-size: 19px; cursor: pointer; }
.hand-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hand-row:last-of-type { border-bottom: 0; }
.hand-row b { display: block; font-size: 12px; }
.hand-row small { color: var(--sub); font-size: 10px; line-height: 1.35; }
.reels { display: inline-flex; gap: 3px; flex: none; }
.reels i, .strength-row i { display: grid; place-items: center; width: 30px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-deep); font-style: normal; font-size: 15px; }
.strength-row { display: flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 800; }

/* ---- v4: midnight arena visual system ---- */
:root {
  --bg-main: #0D1117;
  --bg-deep: #0D1117;
  --bg-panel: #222834;
  --bg-raised: #222834;
  --bg-soft: #181C24;
  --green: #59C7FF;
  --green-strong: #59C7FF;
  --green-dark: #59C7FF;
  --green-muted: rgba(89, 199, 255, .11);
  --gold: #FFD166;
  --red: #FF5D73;
  --blue: #59C7FF;
  --orange: #FF7A1A;
  --orange-hover: #FF7A1A;
  --success: #47D16C;
  --text: #F3F6FA;
  --sub: #96A2B5;
  --muted: #6B7280;
  --line: #303847;
  --active: rgba(89, 199, 255, .5);
}
html, body { color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse 85% 42% at 50% -8%, rgba(89, 199, 255, .15), transparent 68%),
    radial-gradient(circle at 105% 34%, rgba(89, 199, 255, .07), transparent 32%),
    var(--bg-main);
}
.arena-bg {
  opacity: .5;
  background-image:
    linear-gradient(rgba(139, 153, 197, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 153, 197, .025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.app-head {
  background: rgba(13, 17, 23, .9);
  border-bottom-color: rgba(180, 196, 232, .09);
  box-shadow: 0 8px 30px rgba(1, 3, 10, .22);
}
.app-head .topbar { padding-top: 11px; padding-bottom: 10px; }
.avatar {
  border-color: rgba(89, 199, 255, .35);
  background: linear-gradient(145deg, rgba(89, 199, 255, .25), var(--bg-soft));
  color: var(--text);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.tb-id strong { font-size: 13px; }
.tb-id small { color: #8d94ad; }
.tb-lng {
  padding: 6px 11px;
  border-color: rgba(93, 228, 242, .18);
  background: rgba(93, 228, 242, .07);
}
.tb-lng b { color: #fff; }
.tb-lng small { color: var(--green); }
.icon-btn { background: rgba(255,255,255,.035); transition: .16s ease; }
.icon-btn:active { transform: scale(.94); background: var(--bg-raised); }
#app { padding-top: calc(84px + var(--safe-top)); padding-bottom: 26px; }
.page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 8px 2px 20px;
}
.page-intro h1 { margin: 4px 0 5px; font-size: clamp(25px, 7vw, 34px); line-height: 1.02; letter-spacing: -.045em; }
.page-intro p { max-width: 430px; margin: 0; color: var(--sub); font-size: 12px; line-height: 1.5; }
.quick-create {
  flex: none;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(93,228,242,.24);
  border-radius: 13px;
  background: var(--green-muted);
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}
.quick-create span { margin-right: 4px; font-size: 16px; vertical-align: -1px; }
.page-title { margin-top: 8px; font-size: 29px; }
h2 { color: #e7eaff; letter-spacing: -.015em; }
.card {
  border-color: var(--line);
  background: var(--bg-panel);
  box-shadow: 0 12px 30px rgba(1, 3, 12, .18), inset 0 1px rgba(255,255,255,.025);
}
.card.challenge, .card.match, .history-row, .rank { transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.card.challenge:active, .card.match:active, .history-row:active { transform: scale(.985); border-color: rgba(93,228,242,.25); }
.game-icon {
  border-color: rgba(89,199,255,.24);
  background: linear-gradient(145deg, rgba(89,199,255,.17), rgba(89,199,255,.06));
  box-shadow: inset 0 1px rgba(255,255,255,.07);
}
.tabs { margin-bottom: 12px; padding: 5px; border: 0; background: rgba(4, 7, 17, .68); }
.tabs button { min-height: 40px; border-radius: 10px; font-weight: 750; }
.tabs .active { background: var(--bg-raised); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.05); }
.btn {
  background: linear-gradient(135deg, var(--orange-hover), var(--orange));
  color: #17100b;
  box-shadow: 0 8px 18px rgba(255, 122, 26, .2), inset 0 1px rgba(255,255,255,.28);
  transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(.97); filter: brightness(.95); }
.btn.secondary { background: var(--bg-soft); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.chip, .seg, .option, .field { border-color: var(--line); background: rgba(6, 9, 20, .62); }
.chip.active, .seg.selected, .option.selected { border-color: rgba(93,228,242,.38); background: rgba(93,228,242,.1); color: #84edf6; box-shadow: inset 0 0 0 1px rgba(93,228,242,.04); }
.field:focus { outline: 0; border-color: rgba(93,228,242,.5); box-shadow: 0 0 0 3px rgba(93,228,242,.08); }
.game-desc { border-left-color: var(--blue); background: rgba(140,130,255,.07); }
.rank.is-me { border-color: rgba(89,199,255,.4); background: linear-gradient(145deg, rgba(89,199,255,.09), var(--bg-panel)); }
.profile-head { background: radial-gradient(circle at 50% 0, rgba(89,199,255,.17), transparent 48%), var(--bg-panel); }
.main-nav {
  gap: 4px;
  border-top-color: rgba(180,196,232,.1);
  background: rgba(13, 17, 23, .94);
  box-shadow: 0 -14px 34px rgba(1,3,12,.3);
}
.main-nav button { color: #747e99; }
.main-nav button span { font-size: 19px; }
.main-nav button.active { color: var(--green); background: rgba(93,228,242,.08); }
.main-nav button.create span {
  border-color: rgba(93,228,242,.4);
  background: linear-gradient(145deg, #72edf5, #40cbdc);
  color: #071318;
  box-shadow: 0 -2px 22px rgba(93,228,242,.2), 0 10px 24px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.4);
}
.main-nav button.create.active span { background: linear-gradient(145deg, #9af4fa, #54d9e7); }
.modal-panel { border-color: var(--line); background: linear-gradient(155deg, var(--bg-panel), var(--bg-main)); }
#toast { border-color: rgba(89,199,255,.3); background: var(--bg-soft); box-shadow: 0 14px 38px rgba(0,0,0,.4); }
.pos { color: var(--success); }
@media (hover:hover) {
  .btn:hover { background: var(--orange-hover); filter: brightness(1.04); }
  .quick-create:hover { filter: brightness(1.07); }
  .card.match:hover, .history-row:hover { border-color: rgba(93,228,242,.25); }
}
@media (max-width: 420px) {
  .page-intro { align-items: center; }
  .page-intro p { max-width: 250px; }
  .quick-create { padding: 0 11px; }
  .match { grid-template-columns: auto 1fr auto; }
  .match .follow-btn { display: none; }
  .tb-right { gap: 6px; }
  .tb-lng { padding-left: 9px; padding-right: 9px; }
}

/* ---- v5: server-side provably-fair play ---- */
/* Roll reveal: plays once per landed value (app.js tracks seen rolls). */
.roll-val.roll-pop { animation: rollPop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rollPop {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  60% { transform: scale(1.25) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.rolling { color: var(--sub); font-weight: 600; animation: rollingShimmer 1.1s ease-in-out infinite; }
@keyframes rollingShimmer { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Fairness (commit-reveal) panel */
.fair-card .fair-row { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.fair-card .fair-row:last-of-type { border-bottom: 0; }
.fair-card .fair-row span { display: block; margin-bottom: 3px; color: var(--sub); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 9px; }
.fair-card code { display: block; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.45; color: var(--text); }
.fair-card .btn { margin-top: 10px; }

/* Points rankings */
.points-key { margin: -6px 0 12px; font-size: 11px; }
.points-key b { color: var(--gold); }