/* The main page's arcade-wide features: today's challenge, leagues, profiles, the shop and the new games
   in the feed. The page's base styles are in index.html. */

.feed li.hc .row { --accent: #ffb13b; } .feed li.wc .row { --accent: #ff4fd8; } .feed li.st .row { --accent: #ff6fb5; }
.feed li.dg .row { --accent: #ff5a4e; } .feed li.dm .row { --accent: #d4ff3a; } .feed li.cl .row { --accent: #ff6b4a; }
.feed li.dp .row { --accent: #ffd23f; } .feed li.kt .row { --accent: #36e0a0; }
.feed li.badge .row { --accent: #ffd23f; background: #1d1a10; }
.feed .badge-name { color: #ffd23f !important; }

/* a player's name: tap it for their profile */
.who { font: inherit; color: inherit; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button.who { color: var(--text); text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 3px; }
button.who:hover, button.who:focus-visible { color: var(--accent, var(--marquee)); outline: none; }
.who .crown { text-decoration: none; display: inline-block; }
.player .namebtn { font: 700 14px var(--body); letter-spacing: .04em; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 3px; }
.boards-btn.tokens { color: #ffd23f; border-color: #ffd23f; }
.boards-btn.tokens:hover, .boards-btn.tokens:focus-visible { background: #ffd23f; color: #111; }
.player .linkbtn { justify-self: start; font: 600 13px var(--body); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.player .linkbtn:hover { color: var(--text); }
.boards-btn.alt { background: transparent; color: var(--marquee); }
.boards-btn.alt:hover, .boards-btn.alt:focus-visible { background: var(--marquee); color: #111; filter: none; }

/* share buttons on your own scores */
.mini-share { font-size: 14px; line-height: 1; background: none; border: 1px solid var(--cab-edge); border-radius: 6px; padding: 4px 6px; cursor: pointer; }
.mini-share:hover, .mini-share:focus-visible { border-color: var(--accent, var(--marquee)); outline: none; }
.boards td.sh, .mine-card td.sh { width: 2.4em; text-align: right; }
.boards .today-note { margin: 0 0 8px; color: var(--text); }

/* your scores */
.mine-card h3 .held { color: var(--muted); letter-spacing: .1em; }
.mine-card tr { cursor: pointer; }
.mine-card tr:hover th { color: var(--text); }
.mine-card th small { color: var(--muted); opacity: .8; }
.mine-card .more { margin-top: 8px; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--cab-edge); border-radius: 6px; padding: 6px 10px; }
.mine-card .more:hover { color: var(--text); }

/* today's challenge */
.today {
  justify-self: center; width: min(700px, 100%); display: grid; gap: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--cab)), var(--cab) 60%);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--cab-edge)); border-radius: 12px; padding: 14px 16px;
}
.today-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.today-lbl { font-family: "Bungee", Impact, sans-serif; font-size: 18px; color: var(--accent); }
.today-left { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.today-game { display: flex; gap: 12px; align-items: center; }
.today-game img { border-radius: 12px; flex: none; }
.today-game b { display: block; font-size: 18px; }
.today-game span { color: var(--muted); font-size: 14px; }
.today-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.today-top li { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.today-top li.me { color: var(--accent); }
.today-top li.note { display: block; color: var(--muted); }
.today-top .sc { font-weight: 700; }
.today .streak { margin: 0; font-size: 14px; color: var(--text); }
.today .streak:empty { display: none; }
.today-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.today-play, .today-see {
  font: 700 13px var(--body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: none;
  border-radius: 6px; padding: 9px 18px; border: 1px solid var(--accent);
}
.today-play { background: var(--accent); color: #111; }
.today-see { background: transparent; color: var(--accent); }

/* leagues */
.leagues h3, .profile h3 { margin: 18px 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.league-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.league { background: #0d0f13; border: 1px solid var(--cab-edge); border-radius: 8px; padding: 12px; display: grid; gap: 8px; }
.lg-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lg-top b { font-size: 17px; }
.lg-top code { font: 700 16px var(--body); letter-spacing: .2em; color: var(--marquee); background: #1f1216; border-radius: 4px; padding: 3px 8px; }
.lg-members { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.lg-acts, .lg-form { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-acts button, .lg-form button, .pf-report button, .shop-grid button {
  font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  color: #111; background: var(--marquee); border: 1px solid var(--marquee); border-radius: 6px; padding: 7px 12px;
}
.lg-acts button.quiet, .pf-report button.quiet { color: var(--muted); background: transparent; border-color: var(--cab-edge); }
.lg-form input, .pf-report input {
  flex: 1 1 180px; min-width: 0; font: 15px var(--body); color: var(--text); background: #0d0f13;
  border: 1px solid var(--cab-edge); border-radius: 6px; padding: 8px 10px;
}
.lg-form button:disabled, .lg-form input:disabled { opacity: .5; cursor: default; }
.leagues .msg, .shop .msg { margin: 10px 0 0; font-size: 14px; min-height: 1.3em; color: var(--muted); }
.leagues .msg.err, .shop .msg.err { color: #ff8fa3; }
.leagues .msg.ok { color: #8fe3b0; }

/* profiles */
.portrait { width: 120px; height: 120px; flex: none; background: radial-gradient(circle at 50% 60%, #242833, #12151b); border-radius: 12px; }
.pf-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pf-head > div { flex: 1 1 220px; display: grid; gap: 8px; }
.pf-since, .pf-fav { margin: 0; color: var(--muted); font-size: 14px; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-stats div { background: #0d0f13; border-radius: 8px; padding: 8px; display: grid; }
.pf-stats b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--marquee); }
.pf-stats span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.pf-badges li { display: flex; gap: 10px; align-items: center; background: #0d0f13; border: 1px solid #3a3214; border-radius: 8px; padding: 8px 10px; }
.pf-badges .bi { font-size: 24px; }
.pf-badges b { display: block; font-size: 14px; color: #ffd23f; }
.pf-badges small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-list button { width: 100%; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; text-align: left; cursor: pointer;
  font: 14px var(--body); color: var(--text); background: #0d0f13; border: 1px solid var(--cab-edge); border-radius: 6px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
.pf-list button:hover { border-color: var(--marquee); }
.pf-list small { color: var(--muted); }
.pf-list .rk { color: var(--marquee); font-size: 12px; }
.pf-totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 14px; }
.pf-totals dt { color: var(--muted); }
.pf-totals dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-report { margin-top: 18px; }
.pf-report button.danger { color: #fff; background: #c0303a; border-color: #c0303a; }
.pf-report a { color: var(--muted); font-size: 13px; }
.pf-report form { display: flex; gap: 6px; flex-wrap: wrap; }

/* shop */
.shop-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.shop-head .portrait { width: 140px; height: 140px; }
.shop-head > div:last-child { flex: 1 1 220px; }
.shop-bal { margin: 0 0 6px; font: 400 22px "Bungee", Impact, sans-serif; color: #ffd23f; }
.shop .seg { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.shop-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.shop-grid li { display: grid; justify-items: center; gap: 6px; background: #0d0f13; border: 1px solid var(--cab-edge); border-radius: 8px; padding: 10px 8px; text-align: center; }
.shop-grid li.owned { border-color: #3a3214; }
.shop-grid li.wearing { border-color: #ffd23f; box-shadow: 0 0 0 1px #ffd23f inset; }
.shop-grid canvas { width: 72px; height: 72px; }
.shop-grid .swatch { width: 60px; height: 60px; border-radius: 12px; display: grid; place-items: center; font-size: 26px; border: 2px solid #16161a; }
.shop-grid b { font-size: 13px; line-height: 1.2; }
.shop-grid button { width: 100%; }
.shop-grid button.buy { background: #ffd23f; border-color: #ffd23f; }
.shop-grid button:not(.buy):not(.on) { background: transparent; color: var(--text); border-color: var(--muted); }
.shop-grid button.on { background: transparent; color: #ffd23f; border-color: #ffd23f; }
.shop-grid button:disabled { opacity: .45; cursor: default; }

#alertsOpt small { text-transform: none; letter-spacing: 0; }

/* on phones the game tabs are one row that scrolls sideways */
@media (max-width: 560px) {
  .boards .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .boards .tabs::-webkit-scrollbar { display: none; }
  .boards .tabs button { flex: none; }
}