/* ===================================================== Swerte50 theme
   Royal blue night, festival red, gold trim and cream lottery balls.
   Loaded after app.css, so these win. */
:root {
  --bg: #120c3a;
  --panel: #2a0d2e;
  --panel-2: #44122f;
  --line: #7a3b2a;
  --text: #fff6df;
  --muted: #e2bf93;
  --gold: #ffc72c;
  --gold-2: #f59e0b;
  --gold-ink: #4a1300;
  --red: #e0261b;
  --mine: #2f6bff;
  --win: #2fbf4a;
  --bad: #ff5a4f;
  --ball: #fff8e6;
}

html, body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 160, 40, .35), transparent 60%),
    repeating-conic-gradient(from 0deg at 50% -5%, rgba(224, 38, 27, .16) 0 6deg, transparent 6deg 12deg),
    linear-gradient(180deg, #2a0c3c 0%, var(--bg) 45%, #0b0828 100%);
  background-color: var(--bg);
  background-attachment: fixed;
}

/* ---------- logo: gold "Swerte", red "50", crown on top */
.logo {
  position: relative; display: inline-block; font-weight: 900; font-style: italic; letter-spacing: -.5px; line-height: 1;
  font-family: "Arial Black", "Segoe UI Black", system-ui, sans-serif; padding: 8px 2px 0;
  background: linear-gradient(180deg, #fff3a8 0%, var(--gold) 45%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #7a1200) drop-shadow(0 0 6px rgba(255, 170, 0, .35));
}
.logo em {
  font-style: italic; margin-left: 1px;
  background: linear-gradient(180deg, #ff7a5a, var(--red) 55%, #9e0f0a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 22px; height: 14px; transform: translateX(-50%);
  background: url("crown.83c1ae0ccee0.svg") center / contain no-repeat;
}
.topbar .logo { font-size: 25px; }
.topbar .logo em { -webkit-text-stroke: 1.2px #ffe680; filter: drop-shadow(0 0 3px rgba(255, 230, 128, .6)); }
.auth-card .logo { display: block; font-size: 42px; text-align: center; padding-top: 18px; }
.auth-card .logo::before { width: 42px; height: 27px; top: -8px; }
.tagline { text-align: center; margin: 4px 0 14px; font-weight: 900; letter-spacing: .3px; font-size: 15px; color: var(--text); }
.tagline b { color: var(--gold); }

/* ---------- top bar and tab bar: festival red with gold trim */
.topbar {
  background: linear-gradient(180deg, #b3170f, #7d0d14); border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); padding-top: 14px;
}
.wallet { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 199, 44, .6); }
.menu summary { background: rgba(0, 0, 0, .25); border-color: rgba(255, 199, 44, .6); }
.avatar { background: linear-gradient(180deg, #4d86ff, #1b46c9); }
.tabbar { background: linear-gradient(180deg, #4a0f1c, #2a0816); border-top: 2px solid var(--gold); }
.tabbar button.active { color: var(--gold); }

/* ---------- cards: dark velvet in a gold frame */
.card, .auth-card, .sheet, .thread, .menu-list {
  background: linear-gradient(180deg, rgba(74, 18, 44, .97), rgba(36, 10, 40, .97));
  border: 1.5px solid rgba(255, 199, 44, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 230, 150, .12);
}
.row, .stat { background: rgba(0, 0, 0, .22); border-color: rgba(255, 199, 44, .25); }
input, textarea { background: rgba(10, 6, 30, .75); border-color: rgba(255, 199, 44, .35); }
h2 { color: var(--gold); }

/* ---------- buttons: shiny gold */
.btn { border-radius: 12px; }
.btn.primary {
  background: linear-gradient(180deg, #ffe680 0%, var(--gold) 45%, var(--gold-2) 100%); color: var(--gold-ink);
  border: 1px solid #b86b00; box-shadow: 0 3px 0 #9a4f00, 0 0 14px rgba(255, 190, 40, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4); font-weight: 800;
}
.btn.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #9a4f00; }
.btn.primary:disabled { filter: saturate(.5); opacity: .6; }
.chip.on, .seg button.on, .trade-seg label:has(input:checked) {
  background: linear-gradient(180deg, #ffe680, var(--gold)); color: var(--gold-ink); border-color: #b86b00;
}
.prize-total-btn { border: 1.5px solid var(--gold); background: rgba(224, 38, 27, .2); color: var(--gold); }

/* ---------- the board: cream lottery balls in a gold frame */
.grid {
  gap: 6px; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, #7a1d0f, #3d0a14);
  border: 2px solid var(--gold); box-shadow: inset 0 0 0 2px #7a3b00, 0 0 18px rgba(255, 180, 40, .25);
}
.cell {
  border-radius: 50%; border: 2px solid #e0a526; color: #2a1205; font-weight: 900; font-size: 14px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--ball) 45%, #e8d3a3 100%);
  box-shadow: inset 0 -3px 4px rgba(120, 70, 0, .25), 0 2px 3px rgba(0, 0, 0, .35);
  transition: transform .1s;
}
.cell:hover:not(:disabled) { border-color: #fff; transform: translateY(-1px); }
.cell.selected { color: #fff; border-color: #fff; background: radial-gradient(circle at 35% 30%, #ff8a7a 0%, var(--red) 55%, #8e0d08 100%); }
.cell.mine { color: #fff; border-color: #fff; background: radial-gradient(circle at 35% 30%, #8fb2ff 0%, var(--mine) 55%, #1335a3 100%); }
.cell.winner {
  color: var(--gold-ink); border-color: #fff;
  background: radial-gradient(circle at 35% 30%, #fffbd0 0%, var(--gold) 50%, #d98200 100%);
  box-shadow: 0 0 0 3px rgba(255, 199, 44, .5), 0 0 18px #ffc72c;
}
.cell.zero { opacity: .4; }
.cell .count { right: 50%; transform: translateX(50%); bottom: -1px; color: #7a4a1a; font-size: 9px; }
.cell.mine .count, .cell.selected .count { color: #fff; }

/* ---------- recent winners as coloured balls, like the banner */
.recent-strip .rw span {
  color: #2a1205; font-weight: 900; border: 2px solid #fff;
  background: radial-gradient(circle at 35% 30%, #fff, var(--ball) 50%, #e2c98f);
}
.recent-strip .rw:nth-child(5n+1) span { background: radial-gradient(circle at 35% 30%, #fffbd0, var(--gold) 55%, #d98200); }
.recent-strip .rw:nth-child(5n+2) span { background: radial-gradient(circle at 35% 30%, #ff9a8a, var(--red) 55%, #8e0d08); color: #fff; }
.recent-strip .rw:nth-child(5n+3) span { background: radial-gradient(circle at 35% 30%, #8fb2ff, var(--mine) 55%, #1335a3); color: #fff; }
.recent-strip .rw:nth-child(5n+4) span { background: radial-gradient(circle at 35% 30%, #9bf0a8, var(--win) 55%, #12752a); color: #fff; }
.recent-strip .rw:nth-child(5n+5) span { background: radial-gradient(circle at 35% 30%, #d7a6ff, #8b3dff 55%, #4b1499); color: #fff; }

.timer { color: var(--gold); text-shadow: 0 0 10px rgba(255, 199, 44, .5); }
.progress { background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 199, 44, .3); }
#progress-fill { background: linear-gradient(90deg, var(--red), var(--gold)); }
.banner { background: linear-gradient(180deg, #b3170f, #6d0a10); border: 2px solid var(--gold); }
.banner big { color: var(--gold); text-shadow: 0 2px 0 #4a0a00; }
.banner.win { background: linear-gradient(180deg, #2fbf4a, #13752b); border-color: var(--gold); color: #fff; }
.banner.win big { color: #fff; }

/* ---------- login / sign-up banner image */
.hero {
  display: block; width: calc(100% + 44px); height: auto; max-width: none; margin: -28px -22px 12px;
  border-radius: 18px 18px 0 0; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 2px solid var(--gold);
}
.auth-card:has(.hero) .logo { display: none; }

/* "page expired" note after a stale form */
.expired-note { position: sticky; top: 0; z-index: 30; text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 700;
  background: linear-gradient(180deg, #ffe680, var(--gold)); color: var(--gold-ink); border-bottom: 2px solid #b86b00; }

/* keep this pick */
.keep-btn { margin-top: 8px; border: 1.5px solid rgba(255, 199, 44, .6); background: rgba(47, 107, 255, .18); color: var(--text); }
.keep-btn.stop { background: linear-gradient(180deg, #ff6b5a, var(--red)); border-color: #fff; color: #fff; font-weight: 800; }

/* install sheet */
.install-steps { background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 199, 44, .3); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.install-steps ol { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.install-steps li { margin: 3px 0; }

/* how to play page */
.how-card { max-width: 520px; }
.how-title { margin: 4px 0 2px; font-size: 24px; color: var(--gold); }
.how-lead { margin: 0 0 14px; font-weight: 700; }
.how-sec { background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 199, 44, .3); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.how-sec h2 { margin: 0 0 6px; font-size: 16px; }
.how-sec ul, .how-sec ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.how-sec li { margin: 4px 0; }
.how-example { margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: rgba(255, 199, 44, .12); border-left: 3px solid var(--gold); }
.how-play { display: block; text-align: center; text-decoration: none; }
.how-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.how-top .btn { text-decoration: none; white-space: nowrap; }
.how-sec p { margin: 4px 0; font-size: 14px; }
.how-help ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.how-help li { margin: 3px 0; }
.how-editor { width: 100%; box-sizing: border-box; font: 13px/1.45 ui-monospace, Consolas, monospace; margin: 4px 0 10px; resize: vertical; }
.how-reset { margin-top: 8px; }
.inline-word { width: 120px !important; margin: 0 6px 0 0 !important; padding: 5px 8px !important; }

/* global chat, people list, forgot password */
.msg-del { font-size: 11px; color: var(--muted); padding: 0; }
.people-row { align-items: center; gap: 8px; }
.people-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#people-admin-search { margin: 6px 0 10px; }
.forgot-link { text-align: right; margin: 8px 0 0; }
.photo-btn.hidden { display: none; }

/* ---------- Games lobby: two illustrated game buttons */
.lobby-hello { text-align: center; margin: 0 0 10px; font-weight: 800; font-size: 16px; }
.lobby-hello b { color: var(--gold); }
.game-cards { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.game-card.wide { grid-column: 1 / -1; }
.game-card {
  display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; text-align: center; cursor: pointer;
  border-radius: 18px; border: 2px solid var(--gold); color: var(--text); text-decoration: none; font: inherit;
  box-shadow: inset 0 0 0 2px #7a3b00, 0 8px 22px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 180, 40, .22);
  transition: transform .15s, box-shadow .15s;
}
.game-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #7a3b00, 0 12px 26px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 199, 44, .45); }
.game-card:active { transform: translateY(1px) scale(.99); }
.game-card.swerte { background: linear-gradient(180deg, #7a1d0f, #3d0a14); }
.game-card.ginto { background: linear-gradient(180deg, #0b4f6c, #06283d); }
.game-card.closed { cursor: default; filter: grayscale(.55) brightness(.85); }
.game-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-bottom: 2px solid var(--gold); }
.game-body { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 12px 14px; }
.game-logo { font-size: 27px; padding-top: 2px; }
.game-logo::before { display: none; }
.ginto-logo { background: linear-gradient(180deg, #e9fdff 0%, #8fe6f0 50%, #2fb3c6 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #06283d) drop-shadow(0 0 6px rgba(120, 230, 240, .35)); }
.ginto-logo em { background: linear-gradient(180deg, #fff3a8 0%, var(--gold) 45%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0; }
.game-tag { font-size: 14px; font-weight: 600; color: var(--muted); max-width: 30ch; }
.ginto .game-tag { color: #bfe3ee; }
.game-live { font-size: 12px; font-weight: 800; color: var(--gold); background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 199, 44, .4);
  border-radius: 999px; padding: 3px 10px; }
.game-play {
  margin-top: 3px; min-width: 150px; padding: 9px 22px; border-radius: 999px; font-weight: 900; font-size: 17px; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffe680 0%, var(--gold) 45%, var(--gold-2) 100%); color: var(--gold-ink);
  border: 1px solid #b86b00; box-shadow: 0 3px 0 #9a4f00, 0 0 14px rgba(255, 190, 40, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.game-play.off { background: rgba(0, 0, 0, .35); color: var(--muted); border-color: rgba(255, 199, 44, .4); box-shadow: none; }

/* ---------- token calculations page */
.calc { max-width: 760px; margin: 0 auto; padding: 14px 16px 30px; }
body:has(.calc) { padding-bottom: 0; }
.calc .back-link { display: inline-block; margin-bottom: 6px; }
.calc .card { margin: 14px 0; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.calc-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 199, 44, .3); }
.calc-card.house { background: linear-gradient(180deg, rgba(255, 199, 44, .22), rgba(255, 199, 44, .08)); border-color: var(--gold); }
.calc-label { font-size: 13px; font-weight: 800; color: var(--muted); }
.calc-big { font-size: 26px; font-weight: 900; color: var(--gold); line-height: 1.15; }
.calc-sub { font-size: 12px; color: var(--muted); }
.calc-check { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: rgba(47, 191, 74, .12); border-left: 3px solid var(--win); }
.calc-check.off { background: rgba(255, 90, 79, .12); border-left-color: var(--bad); }
.calc-check .ok { color: var(--win); font-weight: 800; margin-left: 6px; }
.calc-periods { display: flex; gap: 8px; justify-content: center; margin: 4px 0; }
.calc-periods a { padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; text-decoration: none;
  border: 1.5px solid rgba(255, 199, 44, .6); color: var(--gold); background: rgba(0, 0, 0, .25); }
.calc-periods a.on { background: linear-gradient(180deg, #ffe680, var(--gold)); color: var(--gold-ink); border-color: #b86b00; }
.calc-table-wrap { overflow-x: auto; margin: 0 -4px; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.calc-table th { text-align: right; color: var(--muted); font-size: 12px; font-weight: 700; padding: 6px; border-bottom: 1px solid rgba(255, 199, 44, .35); }
.calc-table td { text-align: right; padding: 7px 6px; border-bottom: 1px solid rgba(255, 199, 44, .12); vertical-align: top; white-space: nowrap; }
.calc-table th:first-child, .calc-table td:first-child { text-align: left; }
.calc-table.holders td:nth-child(2), .calc-table.holders th:nth-child(2) { text-align: left; }
.calc-table tfoot td { border-top: 1px solid rgba(255, 199, 44, .35); border-bottom: 0; }
.calc-table .pos { color: var(--win); font-weight: 800; }
.calc-table .neg { color: var(--bad); font-weight: 800; }
.calc-rules { margin: 4px 0 0; padding-left: 18px; line-height: 1.5; }

.game-card.bulkan { background: linear-gradient(180deg, #4a120a, #120605); }
.bulkan-logo { background: linear-gradient(180deg, #fff3a8 0%, #ffb300 40%, #ff5a1f 75%, #d50000 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #1a0000) drop-shadow(0 0 6px rgba(255, 90, 31, .45)); }
.bulkan-logo em { background: inherit; -webkit-background-clip: text; background-clip: text;
  margin-left: 0; padding: 0; font-size: 1em; vertical-align: 0; }
.game-card.half .game-art { aspect-ratio: 2 / 1; }
.game-card.half .game-body { gap: 4px; padding: 8px 8px 12px; }
.game-card.half .game-logo { font-size: 21px; }
.game-card.half .game-tag { font-size: 12px; }
.game-card.half .game-play { min-width: 0; width: 100%; padding: 8px 10px; font-size: 15px; }

/* ---------- top bar: language (left), tap-to-request token counter, sound */
.topbar { gap: 8px; }
.lang-select {
  height: 32px; border-radius: 16px; border: 1px solid rgba(255, 199, 44, .6); background: rgba(0, 0, 0, .3);
  color: var(--gold); font: inherit; font-weight: 800; font-size: 12px; padding: 0 4px; cursor: pointer; flex: none;
}
.lang-select option { color: #222; }
.topbar .logo { flex: none; }
button.wallet { font: inherit; color: inherit; cursor: pointer; position: relative; padding-right: 14px; }
.wallet-plus {
  position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  background: var(--gold); color: var(--gold-ink); font-weight: 900; font-size: 14px; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #2a0c3c;
}
.sfx-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 199, 44, .6); background: rgba(0, 0, 0, .3);
  font-size: 15px; cursor: pointer; flex: none; padding: 0; line-height: 1;
}
@media (max-width: 400px) {
  .topbar .menu-name, .topbar .caret { display: none; }
  .topbar .logo { font-size: 21px; }
}
.tabbar button b { font-weight: inherit; }

/* ---------- Swerte50: Play | Stats */
.play-seg { display: flex; margin: 0 auto 10px; width: max-content; }
.play-seg button { min-width: 96px; }

/* ---------- LuckyNoybi card */
.game-card.noybi { background: linear-gradient(180deg, #17763f, #062a17); }
.noybi-logo { background: linear-gradient(180deg, #fffbd0 0%, #ffd23f 45%, #ff9f1c 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #3d2400) drop-shadow(0 0 6px rgba(255, 210, 63, .45)); }
.noybi-logo em { background: linear-gradient(180deg, #e6ffd0, #9be15d 50%, #4caf50); -webkit-background-clip: text; background-clip: text;
  margin-left: 0; padding: 0; font-size: 1em; vertical-align: 0; }
.game-card.swerte.half .game-live { font-size: 11px; }

/* ---------- calculations: each admin's own */
.admin-calc h2 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.admin-players { margin-top: 10px; }
.admin-players summary { cursor: pointer; font-weight: 700; color: var(--gold); padding: 6px 0; }