/* SAVE AS: app.css · LOCATION: C:/MarvelApps/cmmgsite/css/app.css
 * Shared look for every member page (cmmgsports.com/app/...). Locked: tier colors ICE cyan / EDGE green / FIRE orange. */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,600;0,700;0,800;1,800&family=Inter:wght@400;500;600;700;800&display=swap');
:root { --bg:#060d1a; --panel:#0c1929; --panel2:#0f2036; --line:rgba(127,216,255,.16); --text:#e8f4ff; --dim:#8fb0cc; --ice:#7fd8ff; --edge:#22c55e; --fire:#ff5a2b; --gold:#ffd700; --disc:#5865f2; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,"Segoe UI",system-ui,sans-serif; }
a { color:inherit; }
button { font-family:inherit; cursor:pointer; }
.top { display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); background:#081325; position:sticky; top:0; z-index:5; }
.logo { font-weight:900; letter-spacing:.05em; line-height:.9; text-decoration:none; }
.logo b { display:block; font-size:22px; background:linear-gradient(180deg,#fff6c2,var(--gold) 60%,#b98a00); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo span { font-size:10px; letter-spacing:.3em; color:var(--ice); }
.grow { flex:1; }
.btn { border:0; border-radius:10px; padding:9px 14px; font-weight:800; font-size:14px; }
.btn.disc { background:var(--disc); color:#fff; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn.go { background:#16a34a; color:#fff; }
.me { display:flex; align-items:center; gap:8px; font-size:13px; }
.me img { width:30px; height:30px; border-radius:50%; }
.pill { display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--dim); }
.pill.pro { color:var(--gold); border-color:rgba(255,215,0,.5); }
.layout { display:grid; grid-template-columns:220px 1fr 300px; gap:16px; padding:16px; max-width:1500px; margin:0 auto; }
@media (max-width:1150px) { .layout { grid-template-columns:1fr 300px; } .rail { display:none; } }
@media (max-width:820px) { .layout { grid-template-columns:1fr; } }
.rail, .side > div, .main > .box { background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.rail { padding:12px; align-self:start; }
.rail h4 { margin:12px 6px 6px; font-size:11px; letter-spacing:.14em; color:var(--dim); }
.rail a { display:block; padding:8px 10px; border-radius:8px; text-decoration:none; font-size:14px; color:var(--dim); }
.rail a.on { background:rgba(34,197,94,.14); color:#fff; border:1px solid rgba(34,197,94,.4); }
.rail a .soon { font-size:10px; margin-left:4px; opacity:.7; }
h1 { margin:0; font-size:28px; }
.sub { color:var(--dim); margin:4px 0 14px; font-size:14px; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.tile { border-radius:12px; padding:12px; border:1px solid var(--line); background:var(--panel2); }
.tile .n { font-size:26px; font-weight:900; } .tile .l { font-size:12px; color:var(--dim); }
.tile.ice { border-color:rgba(127,216,255,.5); } .tile.edge { border-color:rgba(34,197,94,.5); } .tile.fire { border-color:rgba(255,90,43,.5); }
.bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 12px; }
.chip { border:1px solid var(--line); background:transparent; color:var(--dim); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:700; }
.chip.on { background:var(--text); color:#06101f; }
.seg { margin-left:auto; display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg button { background:transparent; border:0; color:var(--dim); padding:7px 12px; font-weight:700; }
.seg button.on { background:#16a34a; color:#fff; }
.tag { display:inline-block; font-weight:900; font-size:12px; padding:4px 10px; border-radius:7px; letter-spacing:.04em; }
.tag.ICE { background:rgba(127,216,255,.16); color:var(--ice); border:1px solid rgba(127,216,255,.5); }
.tag.EDGE { background:rgba(34,197,94,.14); color:var(--edge); border:1px solid rgba(34,197,94,.5); }
.tag.FIRE { background:rgba(255,90,43,.14); color:#ff7a50; border:1px solid rgba(255,90,43,.5); }
.cards { display:grid; gap:10px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; display:grid; grid-template-columns:110px 1fr 150px; gap:14px; align-items:center; }
@media (max-width:640px) { .card { grid-template-columns:1fr; } }
.when b { display:block; font-size:16px; } .when span { color:var(--dim); font-size:13px; }
.pick { font-size:18px; font-weight:800; } .game { color:var(--dim); font-size:13px; margin-top:2px; }
.why { color:#c9dcef; font-size:13px; margin-top:6px; }
.conf { height:6px; background:rgba(255,255,255,.08); border-radius:9px; margin-top:4px; } .conf i { display:block; height:100%; border-radius:9px; background:#22c55e; }
.right { text-align:right; } .odds { font-size:18px; font-weight:800; } .book { color:var(--dim); font-size:12px; }
.locked .pick { filter:blur(5px); user-select:none; }
.lockmsg { color:var(--gold); font-size:13px; font-weight:700; }
table { width:100%; border-collapse:collapse; font-size:14px; background:var(--panel); border-radius:14px; overflow:hidden; }
th, td { padding:10px; border-bottom:1px solid var(--line); text-align:left; } th { color:var(--dim); font-size:11px; letter-spacing:.1em; }
.side { display:grid; gap:14px; align-self:start; } .side > div { padding:14px; }
.side h3 { margin:0 0 10px; font-size:15px; letter-spacing:.06em; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.stats div { background:var(--panel2); border-radius:10px; padding:8px; } .stats b { display:block; font-size:20px; } .stats span { font-size:11px; color:var(--dim); }
.row { display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line); }
.res { font-weight:900; font-size:11px; padding:2px 8px; border-radius:6px; } .res.WIN { background:#14532d; color:#86efac; } .res.LOSS { background:#5c1414; color:#fca5a5; } .res.PENDING, .res.PUSH, .res.VOID { background:#1e293b; color:var(--dim); }
.empty { color:var(--dim); text-align:center; padding:30px; background:var(--panel); border-radius:14px; border:1px solid var(--line); }
dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:14px; max-width:380px; width:92%; }
dialog label { display:block; font-size:13px; color:var(--dim); margin:8px 0 4px; }
dialog input { width:100%; padding:9px; border-radius:8px; border:1px solid var(--line); background:#081325; color:var(--text); font:inherit; }
.toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#16a34a; color:#fff; padding:10px 16px; border-radius:10px; font-weight:700; display:none; }
.rg { color:var(--dim); font-size:12px; text-align:center; padding:20px 16px 30px; }

.rail a.soonlink { opacity:.55; }
.page-h { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.box { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; }
.box h3 { margin:0 0 10px; font-size:15px; letter-spacing:.06em; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:640px) { .kpis { grid-template-columns:repeat(2,1fr); } .tiles { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px; }
.kpi .n { font-size:24px; font-weight:900; } .kpi .l { font-size:11px; color:var(--dim); letter-spacing:.08em; }
.pos { color:#86efac; } .neg { color:#fca5a5; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:820px) { .grid2 { grid-template-columns:1fr; } }
.field { display:grid; gap:4px; margin-bottom:10px; } .field span { font-size:12px; color:var(--dim); }
.field input, .field select { padding:9px; border-radius:8px; border:1px solid var(--line); background:#081325; color:var(--text); font:inherit; }
.out { background:var(--panel2); border-radius:10px; padding:10px 12px; font-size:14px; } .out b { font-size:18px; }
.check { list-style:none; padding:0; margin:0; } .check li { padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; display:flex; justify-content:space-between; }
.soonpage { text-align:center; padding:40px 20px; } .soonpage .ic { font-size:48px; } .soonpage p { color:var(--dim); max-width:520px; margin:8px auto; }
/* narrow screens: the rail is hidden, so a scrolling menu bar sits under the top bar */
.main, .side, .grid2 > *, .layout > * { min-width:0; }
.field input, .field select { width:100%; }
.mnav { display:none; gap:6px; overflow-x:auto; padding:8px 12px; border-bottom:1px solid var(--line); background:#081325; position:sticky; top:57px; z-index:4; scrollbar-width:none; }
.mnav::-webkit-scrollbar { display:none; }
.mnav a { flex:0 0 auto; text-decoration:none; font-size:13px; font-weight:700; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:6px 11px; white-space:nowrap; }
.mnav a.on { background:var(--text); color:#06101f; }
@media (max-width:1150px) { .mnav { display:flex; } }
/* Lion splash (Scott 10/11, docs/cmmg_app/splash_lion_2026-10-11.png): once per visit. The art has a loading bar baked
   in at 24-75% across / 86% down; a live bar is laid exactly over it. */
.splash { position:fixed; inset:0; z-index:50; background:#03070f; display:grid; place-items:center; transition:opacity .45s ease; }
.splash.out { opacity:0; pointer-events:none; }
.splash .art { position:relative; height:100vh; height:100dvh; aspect-ratio:941 / 1672; max-width:100vw; background:url(/img/splash.jpg) center / contain no-repeat; }
@media (max-aspect-ratio:941/1672) { .splash .art { height:auto; width:100vw; } }
.splash .track { position:absolute; left:24.6%; width:50.6%; top:85.6%; height:1.55%; border-radius:99px; background:#05080f; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); overflow:hidden; }
.splash .fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#0a5cff,#29a8ff); box-shadow:0 0 14px #1e90ff; transition:width 1.2s ease; }
@media (prefers-reduced-motion: reduce) { .splash .fill { transition:none; } }
.splash::before { content:""; position:absolute; inset:-40px; background:url(/img/splash.jpg) center / cover; filter:blur(28px) brightness(.45); }
.splash .art { z-index:1; }
/* team badges + where to watch (feed: ESPN abbr/colour/TV) */
.tb { display:inline-block; min-width:38px; text-align:center; font:900 11px/1 Arial, sans-serif; letter-spacing:.04em; padding:5px 6px; border-radius:6px; border:2px solid; }
.mu { display:inline-flex; align-items:center; gap:5px; margin-right:6px; vertical-align:middle; } .mu i { font-style:normal; color:var(--dim); font-size:11px; }
.tv { margin-top:6px; font-size:12px; color:#c9dcef; background:rgba(127,216,255,.08); border:1px solid var(--line); border-radius:6px; padding:3px 7px; display:inline-block; }

/* Sport banner sections (WEB_DESIGNS #8). Backgrounds are CSS-drawn field lines - our own art, no league marks. */
.sportsec { margin-bottom:18px; scroll-margin-top:120px; }
.sbanner { position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px 14px 4px 4px; margin-bottom:8px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); }
.sbanner b { font-size:24px; letter-spacing:.06em; text-shadow:0 2px 6px rgba(0,0,0,.6); }
.sbanner .sic { font-size:28px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.sbanner .scount { margin-left:auto; font-size:12px; font-weight:800; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:4px 10px; color:#fff; }
.sb-fb   { background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.16) 54px 56px), linear-gradient(100deg, #7f1d1d, #b91c1c 55%, #450a0a); }
.sb-bb   { background: radial-gradient(circle at 88% 50%, transparent 46px, rgba(255,255,255,.22) 47px 49px, transparent 50px), linear-gradient(90deg, transparent 87.6%, rgba(255,255,255,.2) 87.6% 88%, transparent 88%), linear-gradient(100deg, #7c2d12, #ea580c 60%, #431407); }
.sb-hk   { background: linear-gradient(90deg, transparent 58%, rgba(220,38,38,.6) 58% 59%, transparent 59%), linear-gradient(90deg, transparent 38%, rgba(147,197,253,.55) 38% 39.5%, transparent 39.5% 78%, rgba(147,197,253,.55) 78% 79.5%, transparent 79.5%), radial-gradient(circle at 58.5% 50%, transparent 30px, rgba(147,197,253,.55) 31px 33px, transparent 34px), linear-gradient(100deg, #1e3a8a, #3b82f6 60%, #0c1e4a); }
.sb-base { background: radial-gradient(ellipse 140px 90px at 92% 120%, rgba(180,120,60,.55) 0 60%, transparent 62%), repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.06) 22px 44px), linear-gradient(100deg, #172554, #1d4ed8 55%, #7f1d1d); }
.sb-soc  { background: radial-gradient(circle at 75% 50%, transparent 32px, rgba(255,255,255,.28) 33px 35px, transparent 36px), linear-gradient(90deg, transparent 74.8%, rgba(255,255,255,.28) 74.8% 75.2%, transparent 75.2%), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 44px, transparent 44px 88px), linear-gradient(100deg, #14532d, #16a34a 60%, #052e16); }
.sb-ten  { background: linear-gradient(90deg, transparent 70%, rgba(255,255,255,.55) 70% 70.4%, transparent 70.4%), linear-gradient(0deg, transparent 22%, rgba(255,255,255,.45) 22% 24%, transparent 24% 76%, rgba(255,255,255,.45) 76% 78%, transparent 78%), linear-gradient(100deg, #3f6212, #84cc16 55%, #365314); }
.sb-fight{ background: repeating-linear-gradient(45deg, transparent 0 16px, rgba(255,255,255,.06) 16px 18px), linear-gradient(100deg, #111827, #991b1b 60%, #0b0f19); }
.sb-golf { background: radial-gradient(ellipse 120px 60px at 85% 50%, rgba(255,255,255,.18), transparent 70%), linear-gradient(100deg, #14532d, #22c55e 60%, #052e16); }
.sb-other{ background: linear-gradient(100deg, #1e293b, #334155 60%, #0f172a); }
/* #1's coloured stripe on each card, so a card still says its sport after the banner scrolls away */
.card.sp-fb { border-left:4px solid #dc2626; } .card.sp-bb { border-left:4px solid #f97316; } .card.sp-hk { border-left:4px solid #3b82f6; }
.card.sp-base { border-left:4px solid #1d4ed8; } .card.sp-soc { border-left:4px solid #22c55e; } .card.sp-ten { border-left:4px solid #a3e635; }
.card.sp-fight { border-left:4px solid #b91c1c; } .card.sp-golf { border-left:4px solid #16a34a; } .card.sp-other { border-left:4px solid #64748b; }
@media (max-width:640px) { .sbanner b { font-size:20px; } .sbanner { padding:12px; } }
/* #8 v2: bigger glowing tier badge on pick cards - locked icons + order (ICE > EDGE > FIRE, EDGE = 🗡️) */
.card .tag { font-size:13px; padding:5px 12px; border-radius:9px; }
.card .tag.ICE { box-shadow:0 0 14px rgba(127,216,255,.45), inset 0 0 8px rgba(127,216,255,.18); }
.card .tag.EDGE { box-shadow:0 0 14px rgba(34,197,94,.45), inset 0 0 8px rgba(34,197,94,.18); }
.card .tag.FIRE { box-shadow:0 0 14px rgba(255,90,43,.5), inset 0 0 8px rgba(255,90,43,.2); }

/* STORE MODE (Play build): no links to paid plans anywhere in the app */
html.store-play a[href*="winible.com"], html.store-play .buy { display:none !important; }

/* Grades (WEB_DESIGNS #9): W / L / P / V */
.card.graded { opacity:.97; }
.card.r-WIN  { border-color:rgba(34,197,94,.65); box-shadow:0 0 0 1px rgba(34,197,94,.25), 0 0 18px rgba(34,197,94,.12); }
.card.r-LOSS { border-color:rgba(239,68,68,.65); box-shadow:0 0 0 1px rgba(239,68,68,.25), 0 0 18px rgba(239,68,68,.12); }
.card.r-PUSH { border-color:rgba(250,204,21,.65); box-shadow:0 0 0 1px rgba(250,204,21,.25); }
.card.r-VOID { border-color:rgba(148,163,184,.5); }
.final { display:block; color:#86efac; font-size:11px; letter-spacing:.14em; margin-bottom:2px; }
.card.r-LOSS .final { color:#fca5a5; } .card.r-PUSH .final { color:#fde047; } .card.r-VOID .final { color:#cbd5e1; }
.grade { display:inline-flex; flex-direction:column; align-items:center; margin-top:8px; }
.grade .hex { width:54px; height:60px; display:grid; place-items:center; font:900 28px/1 Arial, sans-serif;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.grade b { font-size:13px; letter-spacing:.12em; margin-top:3px; }
.g-WIN .hex  { background:linear-gradient(160deg,#4ade80,#15803d); color:#04140a; box-shadow:0 0 16px #22c55e; } .g-WIN b  { color:#4ade80; }
.g-LOSS .hex { background:linear-gradient(160deg,#f87171,#b91c1c); color:#1f0505; } .g-LOSS b { color:#f87171; }
.g-PUSH .hex { background:linear-gradient(160deg,#fde047,#ca8a04); color:#1f1600; } .g-PUSH b { color:#fde047; }
.g-VOID .hex { background:linear-gradient(160deg,#cbd5e1,#64748b); color:#0f172a; } .g-VOID b { color:#cbd5e1; }
.stally { display:flex; gap:5px; margin-left:8px; } .stally i { font-style:normal; font-weight:900; font-size:12px; padding:4px 8px; border-radius:7px; background:rgba(0,0,0,.4); }
.stally .tw { color:#4ade80; border:1px solid rgba(74,222,128,.6); } .stally .tl { color:#f87171; border:1px solid rgba(248,113,113,.6); } .stally .tp { color:#fde047; border:1px solid rgba(253,224,71,.5); }
@media (max-width:640px) { .stally i { padding:3px 6px; font-size:11px; } .grade .hex { width:46px; height:52px; font-size:24px; } }
html.store-play a[href*="github.io/join"], html.store-play a[href*="discord.gg"] { display:none !important; }
.rg a { color:var(--dim); }

/* ================= PREMIUM LOOK (Scott 10/11: "takes away cheapness and look new age") =================
   Display font Saira for headings / numbers, Inter for text; lit stadium backdrop with a faint grid; glass panels with a
   thin light edge; glowing primary buttons; our own neon line icons (js/icons.js) instead of emoji. */
body { font-family:Inter, "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(900px 480px at 85% -8%, rgba(0,140,255,.20), transparent 62%),
    radial-gradient(700px 380px at 0% -5%, rgba(255,200,0,.08), transparent 60%),
    linear-gradient(rgba(127,216,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(127,216,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    #050b16;
  background-attachment:fixed; }
h1, h2, h3, .n, .odds, .count, .pick, .sbanner b, .logo b, .kpi .n, .tile .n, .stats b, .price, .grade .hex, .when b {
  font-family:Saira, Inter, sans-serif; }
h1 { font-weight:800; letter-spacing:.01em; } h3, .side h3, .box h3 { font-weight:800; letter-spacing:.12em; font-size:13px; color:#bfe6ff; }
.pick { font-weight:800; letter-spacing:.01em; } .sbanner b { font-style:italic; font-weight:800; letter-spacing:.04em; }
.top { background:rgba(5,11,22,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(127,216,255,.14); }
.mnav { background:rgba(5,11,22,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.rail, .side > div, .box, .card, .kpi, .tile, .empty, table {
  background:linear-gradient(180deg, rgba(22,44,78,.55), rgba(8,17,32,.78));
  border:1px solid rgba(127,216,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.card { border-radius:16px; }
.tile.ice { border-color:rgba(127,216,255,.55); box-shadow:0 0 22px rgba(127,216,255,.12), inset 0 1px 0 rgba(255,255,255,.06); }
.tile.edge { border-color:rgba(34,197,94,.55); box-shadow:0 0 22px rgba(34,197,94,.12), inset 0 1px 0 rgba(255,255,255,.06); }
.tile.fire { border-color:rgba(255,90,43,.55); box-shadow:0 0 22px rgba(255,90,43,.12), inset 0 1px 0 rgba(255,255,255,.06); }
.btn.go { background:linear-gradient(180deg,#2fe07a,#13a34f); box-shadow:0 0 18px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.disc { background:linear-gradient(180deg,#6f7cff,#4752d8); box-shadow:0 0 18px rgba(88,101,242,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.btn { transition:transform .12s ease, box-shadow .2s ease; } .btn:hover { transform:translateY(-1px); }
.chip { background:rgba(10,22,40,.6); } .chip.on { background:linear-gradient(180deg,#e8f4ff,#b9dcff); box-shadow:0 0 14px rgba(127,216,255,.35); }
.rail a.on { background:linear-gradient(90deg, rgba(34,197,94,.22), rgba(34,197,94,.05)); box-shadow:inset 3px 0 0 #22c55e; }
/* icons */
.ic { width:1.15em; height:1.15em; vertical-align:-.2em; flex:0 0 auto; }
.ic.t-ICE { color:#7fd8ff; filter:drop-shadow(0 0 4px rgba(127,216,255,.8)); }
.ic.t-EDGE { color:#4ade80; filter:drop-shadow(0 0 4px rgba(74,222,128,.8)); }
.ic.t-FIRE { color:#ff7a45; filter:drop-shadow(0 0 4px rgba(255,122,69,.85)); }
.sbanner .sic .ic { width:30px; height:30px; color:#fff; filter:drop-shadow(0 0 6px rgba(255,255,255,.55)); }
.rail a .ic, .mnav a .ic { margin-right:4px; color:#9fd2ff; }
.rail a.on .ic, .mnav a.on .ic { color:#4ade80; }
.tv .ic, .lockmsg .ic { width:1em; height:1em; }
.when .ic, .chip .ic { color:#9fd2ff; }
.layout.wide { grid-template-columns:220px 1fr; } @media (max-width:1150px) { .layout.wide { grid-template-columns:1fr; } }
.rb { display:inline-block; min-width:28px; text-align:center; font-weight:900; border-radius:7px; padding:4px 6px; font-family:Saira, Inter, sans-serif; }
.rb.WIN { background:#16a34a; color:#04140a; } .rb.LOSS { background:#dc2626; color:#fff; } .rb.PUSH { background:#ca8a04; color:#1f1600; } .rb.VOID { background:#64748b; color:#fff; }
.gm[data-go]:hover { background:rgba(127,216,255,.05); }

/* ===== PHONE LAYOUT (design list #2): bottom tab bar + More sheet; slim top bar ===== */
.tabbar, .moresheet { display:none; }
@media (max-width:760px) {
  .mnav { display:none !important; }
  .tabbar { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:30;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:rgba(5,11,22,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid rgba(127,216,255,.18); }
  .tabbar a, .tabbar button { display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:#8fb0cc; background:none; border:0;
    font:700 11px Inter, sans-serif; padding:4px 0; position:relative; }
  .tabbar .ic { width:24px; height:24px; }
  .tabbar .on { color:#3ba9ff; } .tabbar .on .ic { filter:drop-shadow(0 0 6px rgba(59,169,255,.8)); }
  .tabbar .on::before { content:""; position:absolute; top:-7px; left:22%; right:22%; height:3px; border-radius:0 0 4px 4px; background:#3ba9ff; box-shadow:0 0 10px #3ba9ff; }
  body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .rg { padding-bottom:20px; }
  .moresheet:not([hidden]) { display:block; position:fixed; inset:0; z-index:40; }
  .ms-bg { position:absolute; inset:0; background:rgba(0,0,0,.55); }
  .ms-panel { position:absolute; left:0; right:0; bottom:0; padding:10px 14px calc(18px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0;
    background:linear-gradient(180deg,#0f2036,#070f1d); border-top:1px solid rgba(127,216,255,.25); box-shadow:0 -20px 40px rgba(0,0,0,.5);
    display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .ms-grab { grid-column:1 / -1; width:44px; height:5px; border-radius:9px; background:rgba(255,255,255,.25); margin:0 auto 6px; }
  .ms-panel a, .ms-panel button { display:flex; align-items:center; gap:8px; text-decoration:none; color:#e8f4ff; font:700 14px Inter, sans-serif;
    padding:13px 12px; border-radius:12px; background:rgba(10,22,40,.7); border:1px solid rgba(127,216,255,.14); text-align:left; }
  .ms-panel .on { border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.12); }
  .ms-panel .ic { width:20px; height:20px; color:#9fd2ff; }
  .ms-foot { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
  .top { padding:8px 12px; } .top .logo img { width:30px; height:30px; } .top .logo b { font-size:19px; }
  #installBtn { padding:6px 10px; font-size:12px; }
  .layout { padding:12px; }
}

/* SPORT THEMES (Settings > Display). Fixed, faint playing-surface drawings behind every page - sports only. */
body[class*="theme-"]::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55; }
body.theme-fb::before { background: repeating-linear-gradient(90deg, transparent 0 9.5%, rgba(255,255,255,.07) 9.5% 9.7%), radial-gradient(1000px 600px at 50% 0%, rgba(22,163,74,.28), transparent 70%), linear-gradient(180deg, rgba(20,83,45,.35), transparent 70%); }
body.theme-bb::before { background: radial-gradient(circle at 50% 42%, transparent 120px, rgba(255,255,255,.08) 121px 124px, transparent 125px), linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.07) 49.9% 50.1%, transparent 50.1%), radial-gradient(1000px 600px at 50% 0%, rgba(234,88,12,.28), transparent 70%); }
body.theme-base::before { background: radial-gradient(700px 500px at 50% 110%, rgba(180,120,60,.28), transparent 65%), repeating-linear-gradient(135deg, transparent 0 40px, rgba(255,255,255,.035) 40px 80px), radial-gradient(1000px 600px at 50% 0%, rgba(29,78,216,.25), transparent 70%); }
body.theme-hk::before { background: linear-gradient(90deg, transparent 49.8%, rgba(220,38,38,.22) 49.8% 50.2%, transparent 50.2%), linear-gradient(90deg, transparent 30%, rgba(147,197,253,.14) 30% 30.6%, transparent 30.6% 69.4%, rgba(147,197,253,.14) 69.4% 70%, transparent 70%), radial-gradient(1000px 600px at 50% 0%, rgba(147,197,253,.22), transparent 70%); }
body.theme-soc::before { background: radial-gradient(circle at 50% 45%, transparent 110px, rgba(255,255,255,.08) 111px 114px, transparent 115px), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 6%, transparent 6% 12%), radial-gradient(1000px 600px at 50% 0%, rgba(22,163,74,.28), transparent 70%); }
body.theme-ten::before { background: linear-gradient(0deg, transparent 20%, rgba(255,255,255,.07) 20% 20.4%, transparent 20.4% 79.6%, rgba(255,255,255,.07) 79.6% 80%, transparent 80%), linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.09) 49.9% 50.1%, transparent 50.1%), radial-gradient(1000px 600px at 50% 0%, rgba(132,204,22,.24), transparent 70%); }
/* team / player page heroes use their SPORT's surface (never team colours) */
.thero.sb-fb, .thero.sb-bb, .thero.sb-hk, .thero.sb-base, .thero.sb-soc, .thero.sb-ten, .thero.sb-other, .thero.sb-fight, .thero.sb-golf { box-shadow:inset 0 0 0 999px rgba(5,11,22,.45); }
.bell { position:relative; display:grid; place-items:center; width:38px; height:38px; margin-right:8px; border-radius:10px; color:#ffd700; text-decoration:none; }
.bell .ic { width:24px; height:24px; filter:drop-shadow(0 0 6px rgba(255,215,0,.5)); }
.bell b { position:absolute; top:2px; right:0; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:#ef4444; color:#fff; font:800 10px/17px Inter, sans-serif; text-align:center; box-shadow:0 0 8px #ef4444; }
.btn.pro { background:linear-gradient(180deg,#ffe45c,#e6b800); color:#241a00; box-shadow:0 0 18px rgba(255,215,0,.3); }