/* =====================================================================
   Gwop — design foundation (clean dark UI, red accents)
   ===================================================================== */
:root {
  --bg: #0b0b0c;
  --bg-2: #101011;
  --panel: #18181a;
  --panel-2: #1e1e21;
  --panel-3: #27272b;
  --ink: #ffffff;
  --muted: #9b9ba3;
  --dim: #5f5f66;
  --red-rgb: 240, 24, 64;
  --red: rgb(var(--red-rgb));
  --red-deep: #a80f2e;
  --red-grad: linear-gradient(135deg, #ff2452 0%, #e8133f 45%, #b80f33 100%);
  --gold-rgb: 245, 185, 66;
  --gold: rgb(var(--gold-rgb));
  --gold-hi: #ffd98a;
  --green: #3ddc84;
  --line: rgba(255, 255, 255, .07);
  --line-soft: rgba(255, 255, 255, .05);
  --bar-bg: rgba(11, 11, 12, .93);
  --win: var(--green);
  --lose: #ff4d6a;

  /* one clean family everywhere; the old names are kept so game styles keep working */
  --f-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: var(--f-text);
  --f-didone: var(--f-text);
  --f-mono: var(--f-text);

  --r: 14px;
  --r-lg: 20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* Light theme (Settings). Only the menus: a running game (body.in-game) keeps the dark tokens above.
   Tokens built from other tokens (--win, --gold) are repeated, since a var() resolves where it is declared. */
[data-theme="light"] body:not(.in-game) {
  --bg: #f3f3f6;
  --bg-2: #ebebef;
  --panel: #ffffff;
  --panel-2: #f1f1f4;
  --panel-3: #e6e6eb;
  --ink: #141416;
  --muted: #62626b;
  --dim: #9b9ba4;
  --green: #12a35a;
  --win: var(--green);
  --lose: #e0244b;
  --gold-rgb: 196, 132, 18;
  --gold: rgb(var(--gold-rgb));
  --line: rgba(0, 0, 0, .08);
  --line-soft: rgba(0, 0, 0, .05);
  --bar-bg: rgba(255, 255, 255, .93);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* the page itself never scrolls or rubber-bands: the app is a fixed full-screen shell and only
   the content area inside it scrolls (see .view in app.css) */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--ink); font-family: var(--f-text); font-size: 15px; line-height: 1.4; }
body { position: fixed; inset: 0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
a { color: var(--red); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
.hidden { display: none !important; }

/* ---------- typography helpers (kept for game modules) ---------- */
.t-display { font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.t-didone { font-weight: 800; }
.t-kicker { font-weight: 600; }
.t-micro { font-size: 12px; font-weight: 600; color: inherit; line-height: 1.3; }
.t-mono { font-variant-numeric: tabular-nums; }
.red { color: var(--red); }
.gold { color: var(--gold); }
.green { color: var(--green); }
.muted { color: var(--muted); }
.glow, .glow-gold, .chroma { text-shadow: none; }

/* ---------- icons, amounts ---------- */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coin { width: 1em; height: 1em; flex: none; }
.amount { display: inline-flex; align-items: center; gap: .3em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plus { color: var(--green); }
.minus { color: var(--lose); }
.spark { display: inline-block; width: .9em; height: .9em; color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px;
  border-radius: var(--r); background: var(--panel-3); color: var(--ink); font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform .15s var(--ease-out), filter .2s, opacity .2s, box-shadow .2s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.primary { background: var(--red-grad); color: #fff; box-shadow: 0 8px 24px -8px rgba(var(--red-rgb), .75); }
.btn.gold { background: linear-gradient(135deg, #ffd27a, #f0a83a); color: #2b1a02; }
.btn.green { background: linear-gradient(135deg, #4be08f, #22b866); color: #04210f; box-shadow: 0 8px 24px -10px rgba(61, 220, 132, .7); }
.btn.ghost { background: var(--panel-3); }
.btn.danger { background: rgba(var(--red-rgb), .12); color: #ff5c7a; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 11px; }
.btn.lg { height: 52px; font-size: 16px; padding: 0 26px; border-radius: 16px; }
.btn.block { width: 100%; }
.btn .ic { width: 18px; height: 18px; }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(0, 0, 0, .55);
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.pill.live { color: var(--green); }
.pill.live .d { background: var(--green); box-shadow: 0 0 8px var(--green); }
.pill.gold { color: var(--gold); }
.pill.gold .d { background: var(--gold); }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- player row ---------- */
.av { position: relative; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 345) 70% 52%), hsl(calc(var(--h, 345) + 30) 70% 36%)); }
.av img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.rank { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 255, 255, .06); }
.rank-bronze { color: #e0965f; } .rank-silver { color: #cfd2da; } .rank-gold { color: var(--gold); } .rank-platinum { color: #8fe3ee; } .rank-diamond { color: #ff7d97; }
.prow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--panel-2); transition: box-shadow .3s; position: relative; }
.prow.active { box-shadow: inset 0 0 0 2px var(--red), 0 0 24px -10px rgba(var(--red-rgb), .9); }
.prow .pname { flex: 1; min-width: 0; }
.prow .pname b { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .pname small { font-size: 12px; color: var(--muted); }

/* ---------- timers & clocks ---------- */
.timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timer .ic { width: 15px; height: 15px; }
.timer.low { color: var(--lose); }
.clock { font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; padding: 6px 12px; border-radius: 11px; background: var(--panel-3); color: var(--muted); min-width: 84px; text-align: center; }
.clock.running { background: #fff; color: #111; }
.clock.low.running { background: var(--red); color: #fff; }

/* ---------- banners & status ---------- */
.banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; padding: 10px 14px; margin: 10px 0;
  border-radius: var(--r); background: var(--panel-2); font-weight: 700; font-size: 15px; animation: bannerIn .35s var(--ease-out); }
.banner.win { background: rgba(61, 220, 132, .12); color: var(--green); }
.banner.lose { background: rgba(var(--red-rgb), .12); color: #ff5c7a; }
@keyframes bannerIn { from { opacity: 0; transform: translateY(6px); } }
.status-line { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; margin: 10px 0 0; min-height: 18px; }
.status-line b { color: var(--ink); }
.g-actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.score-big { font-weight: 800; font-size: 36px; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.score-big small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }

/* ---------- playing cards (shared by blackjack, durak, poker) ---------- */
.pc3 { --cw: 64px; width: var(--cw); height: calc(var(--cw) * 1.42); perspective: 800px; flex: none; position: relative; }
.pc3.sm { --cw: 44px; }
.pc3.lg { --cw: 78px; }
.pc3-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
.pc3.down .pc3-in { transform: rotateY(180deg); }
.pc3-face, .pc3-back { position: absolute; inset: 0; border-radius: calc(var(--cw) * .11); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pc3-face { background: #fff; color: #16161a; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .9); }
.pc3.red .pc3-face { color: #e3123b; }
/* corner index: rank with its suit centred right under it, big enough to read in a fanned hand */
.pc3-face .cr { position: absolute; display: flex; flex-direction: column; align-items: center; min-width: 1em;
  font-weight: 800; font-size: calc(var(--cw) * .31); line-height: .9; letter-spacing: -.06em; }
.pc3-face .cr b { display: block; margin-top: .06em; font-family: system-ui, sans-serif; font-weight: 400; font-size: .86em; line-height: 1; letter-spacing: 0; }
.pc3-face .tl { top: 5%; left: 6%; }
.pc3-face .br { bottom: 5%; right: 6%; transform: rotate(180deg); }
.pc3-face .cs { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); font-family: system-ui, sans-serif; }
.pc3-face .cs.court { font-family: var(--f-text); font-weight: 900; font-size: calc(var(--cw) * .5); }
.pc3-back { transform: rotateY(180deg); background: var(--red-grad); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), inset 0 0 0 5px #c4113a, 0 10px 22px -10px #000; }
.pc3-back::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.pc3.deal { animation: deal .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes deal { from { transform: translate(var(--dx, 0px), var(--dy, -60px)) rotate(-12deg) scale(.75); opacity: 0; } }
.pc3.trump .pc3-face { box-shadow: 0 0 0 2px var(--gold), 0 10px 22px -10px #000; }
.pc3.play { cursor: pointer; transition: transform .2s var(--ease-out); }
.pc3.play:hover { transform: translateY(-10px); }
.pc3.sel { transform: translateY(-14px); }
.pc3.sel .pc3-face { box-shadow: 0 0 0 3px var(--red), 0 12px 26px -8px rgba(var(--red-rgb), .8); }
.pc3.dim { filter: brightness(.5); }
.pc3.flip-in .pc3-in { animation: flipIn .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes flipIn { from { transform: rotateY(180deg); } }
/* Only the side that faces up is drawn. backface-visibility alone is not reliable in every
   webview (some draw the back on top of a face-up card), so the hidden side is also made
   invisible; while a card turns, the sides swap when it is edge-on. */
.pc3:not(.down) .pc3-back, .pc3.down .pc3-face { visibility: hidden; }
.pc3-face, .pc3-back { transition: visibility 0s linear .07s; }
.pc3.flip-in .pc3-back { animation: pcBackUp .08s step-end backwards; animation-delay: calc(var(--i, 0) * 110ms); }
.pc3.flip-in .pc3-face { animation: pcFaceDown .08s step-end backwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes pcBackUp { from { visibility: visible; } }
@keyframes pcFaceDown { from { visibility: hidden; } }

/* ---------- die ---------- */
.die3 { width: 64px; height: 64px; position: relative; flex: none; }
.die3 .die3-fb { position: absolute; inset: 0; border-radius: 17%; padding: 17%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  background: #c8102e; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 14px -8px rgba(0, 0, 0, .7); }
.die3 .die3-fb i { width: 76%; aspect-ratio: 1; border-radius: 50%; place-self: center; }
.die3 .die3-fb i.on { background: #f4f4f4; }
.die3.roll .die3-fb { animation: dieRoll .8s var(--ease-out) both; }
.die3.is-3d .die3-fb { opacity: 0; animation: none; }
.die3 .die3-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes dieRoll {
  0% { transform: translate(-40px, -50px) rotate(-280deg) scale(.6); opacity: 0; }
  55% { transform: translate(4px, 6px) rotate(18deg) scale(1.05); opacity: 1; }
  75% { transform: translate(0, -6px) rotate(-6deg); }
  100% { transform: none; }
}
.die3.ph .die3-fb { background: transparent; border: 2px dashed var(--panel-3); box-shadow: none; display: grid; place-items: center; grid-template-columns: 1fr; color: var(--dim); font-weight: 800; font-size: 22px; }

/* ---------- shared effects ---------- */
.fx-shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fx-pop { animation: pop .45s var(--ease-back); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.burst { position: fixed; pointer-events: none; z-index: 90; width: 0; height: 0; }
.burst i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--red)); animation: burst .8s var(--ease-out) forwards; }
@keyframes burst { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
.ripple { position: fixed; pointer-events: none; z-index: 90; border-radius: 50%; border: 2px solid var(--c, rgba(255, 255, 255, .6)); transform: translate(-50%, -50%); animation: ripple .8s var(--ease-out) forwards; }
@keyframes ripple { from { width: 0; height: 0; opacity: 1; } to { width: 90px; height: 90px; opacity: 0; } }

/* ---------- dice tray (a player's zone the dice are thrown into) ---------- */
.dice-tray { position: relative; width: 100%; height: 150px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 50%, #26262b, #1b1b1f); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .45); }
.dice-tray .tray-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; transition: opacity .2s; }
.dice-tray.is-3d .tray-fb, .gl3d .dice-tray .tray-fb { opacity: 0; transition: none; }
.dice-tray .die3-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dice-tray.bare { background: none; box-shadow: none; border-radius: 0; pointer-events: none; }
.dice-tray .die3.used { opacity: .35; }