:root { --bg: #060a08; --panel: #0c1613; --panel2: #0f1e1a; --cyan: #2fe6e6; --cyan-dim: #1a8a8a; --felt: #063d2c; --felt-bright: #17c67e; --gold: #f0c419; --gold-dim: #8a701a; --text: #eaf6f0; --text-dim: #7fa39a; --green: #2ee6a6; --red: #ff5577; --border: rgba(47, 230, 230, 0.28); --border-soft: rgba(255, 255, 255, 0.08); --glow: 0 0 10px rgba(47, 230, 230, 0.35), 0 0 2px rgba(47, 230, 230, 0.6); --glow-gold: 0 0 12px rgba(240, 196, 25, 0.45), 0 0 2px rgba(240, 196, 25, 0.6); --glow-green: 0 0 12px rgba(46, 230, 166, 0.45); --glow-red: 0 0 12px rgba(255, 85, 119, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: radial-gradient(ellipse at top, rgba(6, 61, 44, 0.4) 0%, transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 2px, transparent 2px, transparent 7px), radial-gradient(ellipse at top, #0a1a14 0%, var(--bg) 62%); background-attachment: fixed; color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 17px; min-height: 100vh; -webkit-tap-highlight-color: transparent; } /* Background themes -- "Neon Noir" above is the default (data-bg unset). Same palette throughout, only the shape behind the screens changes. Picked from Settings, applied as an attribute on . */ body[data-bg="highroller"] { background: radial-gradient(ellipse 108% 62% at 50% 36%, rgba(23,198,126,.30) 0%, rgba(6,61,44,.22) 42%, transparent 68%), radial-gradient(ellipse 120% 74% at 50% 38%, transparent 54%, rgba(15,8,3,.55) 78%, rgba(15,8,3,.85) 100%), radial-gradient(ellipse 118% 72% at 50% 37%, transparent 56%, rgba(138,112,26,.10) 60%, transparent 64%), repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 2px, transparent 2px, transparent 7px), radial-gradient(ellipse at top, #0a1a14 0%, var(--bg) 62%); } body[data-bg="vegaswild"] { background: radial-gradient(ellipse 102% 60% at 50% 36%, rgba(255,47,209,.30) 0%, rgba(123,47,247,.22) 38%, transparent 68%), radial-gradient(ellipse 120% 74% at 50% 38%, transparent 50%, rgba(20,4,22,.6) 78%, rgba(14,3,16,.92) 100%), conic-gradient(from 210deg at 10% 6%, rgba(255,51,85,.4), transparent 32%), conic-gradient(from 30deg at 90% 8%, rgba(47,230,230,.35), transparent 32%), conic-gradient(from 120deg at 50% 96%, rgba(240,196,25,.3), transparent 30%), radial-gradient(ellipse 118% 72% at 50% 37%, transparent 55%, rgba(240,196,25,.16) 60%, transparent 65%), repeating-linear-gradient(135deg, rgba(255,255,255,.016) 0px, rgba(255,255,255,.016) 2px, transparent 2px, transparent 7px), radial-gradient(ellipse at top, #140a1c 0%, #0a0410 62%); } body[data-bg="deepoval"] { background: radial-gradient(ellipse 100% 90% at 50% 46%, rgba(23,198,126,.30) 0%, rgba(6,61,44,.20) 44%, transparent 64%), radial-gradient(ellipse 108% 98% at 50% 46%, transparent 58%, rgba(240,196,25,.32) 61%, rgba(240,196,25,.08) 64%, transparent 68%), radial-gradient(ellipse 116% 106% at 50% 46%, transparent 64%, rgba(30,16,6,.7) 68%, rgba(15,8,3,.94) 90%, rgba(10,5,2,1) 100%), repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 2px, transparent 2px, transparent 7px), radial-gradient(ellipse at top, #0a1a14 0%, var(--bg) 62%); } /* Live Light -- ambient pulsing corner glows, fixed behind the app content, toggled independently of the background theme. */ .livelight { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 0; } body.light-on .livelight { opacity: 1; } .livelight span { position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(46px); opacity: .28; animation: lightpulse 3.4s ease-in-out infinite; } .livelight span:nth-child(1) { top: -70px; left: -60px; background: #ff3355; animation-delay: 0s; } .livelight span:nth-child(2) { top: -70px; right: -60px; background: #2fe6e6; animation-delay: .85s; } .livelight span:nth-child(3) { bottom: -70px; left: 20%; background: #f0c419; animation-delay: 1.7s; } .livelight span:nth-child(4) { top: 40%; right: -90px; background: #ff2fd1; animation-delay: 2.55s; } @keyframes lightpulse { 0%, 100% { opacity: .2; transform: scale(.85); } 50% { opacity: .55; transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .livelight span { animation: none; opacity: .3; } } #app { position: relative; z-index: 1; } /* Toggle switch, used in Settings */ .switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: none; } .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; } .switch .track { position: absolute; inset: 0; background: var(--panel2); border: 1px solid var(--border-soft); border-radius: 999px; pointer-events: none; transition: .2s; } .switch .thumb { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--text-dim); transition: transform .2s, background .2s; pointer-events: none; } .switch input:checked ~ .track { background: rgba(47, 230, 230, .18); border-color: var(--cyan); } .switch input:checked ~ .thumb { transform: translateX(19px); background: var(--cyan); } #app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 28px; } header.topbar { display: flex; align-items: center; gap: 10px; padding: 18px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #08150f 0%, rgba(8, 21, 15, 0.4) 100%); position: sticky; top: 0; z-index: 10; } header.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 16px; color: var(--cyan); text-shadow: var(--glow); } header.topbar .brand img { width: 26px; height: 26px; } header.topbar .title { flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: .3px; } header.topbar .title.with-logo { display: flex; align-items: center; justify-content: center; gap: 7px; } header.topbar .title.with-logo img { width: 22px; height: 22px; } header.topbar .spacer { width: 26px; } .iconbtn { background: none; border: 1px solid var(--border); color: var(--cyan); border-radius: 12px; width: 44px; height: 44px; font-size: 19px; line-height: 1; cursor: pointer; } .iconbtn:active { box-shadow: var(--glow); } .iconbtn.small { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; border-color: var(--gold); color: var(--gold); } .iconbtn.small:active { box-shadow: var(--glow-gold); } [hidden] { display: none !important; } .backbtn { display: flex; align-items: center; gap: 3px; background: none; border: none; color: var(--cyan); font-size: 17px; font-weight: 700; letter-spacing: .2px; padding: 10px 14px 10px 8px; margin: -10px 0 -10px -8px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .backbtn .chevron { font-size: 28px; line-height: 1; margin-top: -1px; } .backbtn:active { background: rgba(47, 230, 230, 0.14); } main#screen { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 16px; } /* ---------------------------------------------------- Cards (forms/lists) */ .card { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--border-soft); border-radius: 20px; padding: 20px 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 22px rgba(0,0,0,0.45); position: relative; } .card::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); } .card.glow { border-color: var(--border); box-shadow: var(--glow), 0 6px 22px rgba(0,0,0,0.45); } .card.felt { background: linear-gradient(180deg, #0a2b20, #071a15); border-color: rgba(23,198,126,.35); } .card h2 { margin: 0 0 12px 0; font-size: 20px; color: var(--cyan); letter-spacing: .3px; } /* Game Log's header divider -- an HTML equivalent of the bot's plain-text "═══" separator line under its own "🎮 GAME LOG — {name}" header. */ .card h2 + hr.divider { border: none; border-top: 1px solid var(--border-soft); margin: -6px 0 12px; } .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; padding: 6px 0; } .row .label { color: var(--text-dim); } .row .value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; } .mono { font-family: "Consolas", "SFMono-Regular", monospace; } .pnl-pos { color: var(--green); text-shadow: 0 0 8px rgba(46,230,166,.4); } .pnl-neg { color: var(--red); text-shadow: 0 0 8px rgba(255,85,119,.4); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } button.btn { background: var(--panel2); border: 1px solid var(--border-soft); color: var(--text); padding: 20px 16px; border-radius: 18px; font-size: 17px; font-weight: 700; cursor: pointer; transition: box-shadow .15s ease, transform .05s ease; min-height: 60px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 8px rgba(0,0,0,.35); } button.btn:active { transform: scale(0.97) translateY(1px); box-shadow: var(--glow); } button.btn.primary { background: linear-gradient(135deg, #0d3330, #124a45); border-color: var(--cyan); color: var(--cyan); } button.btn.gold { background: linear-gradient(135deg, #2c2408, #3d3009); border-color: var(--gold); color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 8px rgba(0,0,0,.35); } button.btn.gold:active { box-shadow: var(--glow-gold); } button.btn.danger { border-color: var(--red); color: var(--red); } button.btn.success { border-color: var(--green); color: var(--green); } button.btn.ghost { background: transparent; } button.btn.full { width: 100%; } button.btn.small { padding: 12px 14px; min-height: 44px; font-size: 14px; border-radius: 12px; } button.btn:disabled { opacity: .4; } .stack { display: flex; flex-direction: column; gap: 14px; } input[type=text], input[type=number], input[type=password] { width: 100%; padding: 17px; border-radius: 14px; border: 1px solid var(--border-soft); background: #081210; color: var(--text); font-size: 18px; } input:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow); } .pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; } .pill.active { background: rgba(23,198,126,.15); color: var(--felt-bright); border: 1px solid var(--felt-bright); box-shadow: 0 0 8px rgba(23,198,126,.3); } .pill.closed { background: rgba(127,163,154,.12); color: var(--text-dim); border: 1px solid var(--border-soft); } .empty { text-align: center; color: var(--text-dim); padding: 48px 10px; font-size: 16px; } .logo-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 36px 0 12px; } .logo-hero img { width: 128px; height: 128px; filter: drop-shadow(0 0 18px rgba(47,230,230,.5)); } .logo-hero .name { font-size: 26px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); text-shadow: var(--glow); } .logo-hero .tag { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; } .event-line { font-size: 15px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.06); /* v0.14: direction now comes from the dir="rtl" attribute app.js sets per-line when the event's player name is Hebrew (absent = inherits the page's ltr default). Used to be forced ltr unconditionally here -- an embedded Hebrew name made the browser's own bidi auto-detection flip the whole line, with no dir attribute to override it. An explicit dir="rtl" doesn't have that problem since it's authoritative, not auto-detected, so the old blanket override is gone. */ } .event-line:last-child { border-bottom: none; } .event-time { color: var(--text-dim); margin-inline-end: 8px; } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--cyan); color: var(--cyan); padding: 13px 20px; border-radius: 12px; font-size: 15px; box-shadow: var(--glow); z-index: 100; max-width: 90%; text-align: center; animation: toast-in .2s ease-out; } .toast.strong { bottom: 30px; padding: 18px 26px; font-size: 17px; font-weight: 800; border: 2px solid var(--green); color: var(--green); box-shadow: var(--glow-green), 0 8px 24px rgba(0,0,0,.5); border-radius: 16px; } @keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } a.linklike { color: var(--cyan); text-decoration: underline; cursor: pointer; } .section-label { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin: 6px 2px -2px; } .badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--cyan); color: #04141a; font-size: 13px; font-weight: 800; } .money-big { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------- Chip-style quick amounts */ .chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0; } .chip-btn { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--text); background: radial-gradient(circle at 34% 30%, #163a38, #081a17 72%); border: 3px dashed rgba(47, 230, 230, 0.42); box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.45); position: relative; cursor: pointer; padding: 0; } .chip-btn::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); } .chip-btn:active { transform: scale(.93); box-shadow: var(--glow), inset 0 0 0 2px rgba(0,0,0,.4); border-color: var(--cyan); } .chip-btn.zero { border-color: rgba(127,163,154,.4); color: var(--text-dim); } /* ---------------------------------------------------------------- Reports (non-boxed) */ .report { display: flex; flex-direction: column; } .report-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 14px; border-bottom: 1px solid var(--border); } .report-head h2 { margin: 0; font-size: 22px; color: var(--cyan); text-shadow: var(--glow); } .stat-flow { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--border-soft); } .stat-flow:last-child { border-bottom: none; } .stat-flow .label { color: var(--text-dim); font-size: 14px; letter-spacing: .2px; } .stat-flow .value { font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; } .player-flow { padding: 18px 4px; border-bottom: 1px solid var(--border-soft); } .player-flow.clickable { cursor: pointer; transition: background .12s ease; border-radius: 12px; } .player-flow.clickable:active { background: rgba(47, 230, 230, .08); } .player-flow:last-child { border-bottom: none; } .player-flow .pname { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .player-flow .pmeta { display: flex; gap: 16px; color: var(--text-dim); font-size: 13px; margin-top: 6px; flex-wrap: wrap; } .player-flow .pmeta b { color: var(--text); font-weight: 700; } .player-flow .pnl-line { font-size: 24px; font-weight: 800; margin-top: 8px; } .stackbar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 10px; display: flex; } .stackbar .fill { height: 100%; } .stackbar .fill.invested { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); } .stackbar .fill.final { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); } .stackbar-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-dim); margin-top: 5px; } .stackbar-legend span::before { content: "●"; margin-right: 4px; } .stackbar-legend .l-invested::before { color: var(--cyan); } .stackbar-legend .l-final::before { color: var(--gold); } /* ------------------------------------------------------------------ Match badge */ .match-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .3px; } .match-badge.ok { background: rgba(46,230,166,.14); color: var(--green); border: 1px solid var(--green); box-shadow: var(--glow-green); } .match-badge.off { background: rgba(255,85,119,.14); color: var(--red); border: 1px solid var(--red); box-shadow: var(--glow-red); } /* ------------------------------------------------------------------- Game clock */ .game-clock { display: flex; align-items: center; justify-content: center; gap: 10px; font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800; letter-spacing: 2px; color: var(--gold); text-shadow: var(--glow-gold); padding: 14px 0; } .game-clock .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse-dot 1.4s infinite; } .game-clock .clock-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); text-shadow: none; margin-right: 4px; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .live-dot-inline { width: 7px; height: 7px; border-radius: 50%; background: var(--felt-bright); box-shadow: 0 0 6px var(--felt-bright); display: inline-block; margin-right: 6px; animation: pulse-dot 1.6s infinite; } /* ------------------------------------------------------------------- End Game reveal */ .reveal-hero { text-align: center; padding: 10px 4px 4px; } .reveal-hero .trophy { font-size: 40px; filter: drop-shadow(var(--glow-gold)); } .reveal-hero h1 { margin: 6px 0 0; font-size: 24px; color: var(--gold); text-shadow: var(--glow-gold); letter-spacing: .5px; } .podium { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin: 18px 0 24px; } .podium .spot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; } .podium .spot .medal { font-size: 22px; } .podium .spot .pname { font-size: 13px; font-weight: 700; text-align: center; } .podium .spot .pamt { font-size: 13px; font-weight: 800; } .podium .spot .bar { width: 68px; border-radius: 12px 12px 4px 4px; box-shadow: 0 4px 14px rgba(0,0,0,.4); } .podium .spot.gold .bar { height: 92px; background: linear-gradient(180deg, #ffe27a, var(--gold-dim)); box-shadow: var(--glow-gold); } .podium .spot.silver .bar { height: 66px; background: linear-gradient(180deg, #e6edf0, #8a9aa0); } .podium .spot.bronze .bar { height: 46px; background: linear-gradient(180deg, #e0a56f, #8a5a34); } .podium .spot.gold .pamt { color: var(--gold); } .podium .spot.silver .pamt { color: #cfd8dc; } .podium .spot.bronze .pamt { color: #d7995f; } .payout-flow { display: flex; flex-direction: column; } .payout-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px; border-bottom: 1px dashed var(--border-soft); font-size: 15px; } .payout-item:last-child { border-bottom: none; } .payout-item .who { display: flex; align-items: center; gap: 8px; } .payout-item .chip-ico { font-size: 18px; } .payout-item .amt { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- Awards */ .award-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin: 3px 5px 3px 0; cursor: pointer; } /* Tap-to-explain info modal -- reusable, not just for badges. */ .modal-overlay { position: fixed; inset: 0; background: rgba(2,4,3,.72); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; } .modal-card { max-width: 340px; width: 100%; text-align: center; } .modal-body { color: var(--text); font-size: 15px; line-height: 1.5; margin-bottom: 16px; } .award-badge.profit { background: rgba(240,196,25,.15); color: var(--gold); border: 1px solid var(--gold); } .award-badge.efficient { background: rgba(47,230,230,.15); color: var(--cyan); border: 1px solid var(--cyan); } .award-badge.balanced { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--border-soft); } .award-badge.noob { background: rgba(255,85,119,.12); color: var(--red); border: 1px solid var(--red); } .award-badge.whale { background: rgba(77,159,255,.15); color: #4d9fff; border: 1px solid #4d9fff; } .award-badge.cheapskate { background: rgba(180,180,180,.15); color: #b0b0b0; border: 1px solid #b0b0b0; } .award-badge.hottest { background: rgba(255,138,61,.15); color: #ff8a3d; border: 1px solid #ff8a3d; } .award-badge.coldest { background: rgba(126,200,240,.15); color: #7ec8f0; border: 1px solid #7ec8f0; } .award-badge.sharpshooter { background: rgba(46,230,166,.15); color: var(--green); border: 1px solid var(--green); } .award-badge.rebuyking { background: rgba(181,123,255,.15); color: #b57bff; border: 1px solid #b57bff; } .award-badge.rollercoaster { background: rgba(255,111,176,.15); color: #ff6fb0; border: 1px solid #ff6fb0; } .award-badge.grinder { background: rgba(138,154,91,.15); color: #8a9a5b; border: 1px solid #8a9a5b; } /* --------------------------------------------------------------- Multi-table switcher */ .table-switcher { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; margin: -2px -2px 4px; } .table-chip { flex: 0 0 auto; padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 700; background: var(--panel2); border: 1px solid var(--border-soft); color: var(--text-dim); cursor: pointer; white-space: nowrap; } .table-chip.current { border-color: var(--felt-bright); color: var(--felt-bright); box-shadow: 0 0 8px rgba(23,198,126,.3); background: rgba(23,198,126,.1); } /* ------------------------------------------------------- Button style: Royal Ace / Gold Leaf */ /* Home menu buttons carry .menu-card + a data-suit always, but the corner/ watermark/foil decoration only shows once Settings picks one of these two styles. Gold Leaf is identical to Royal Ace except it never gets the moving sheen (::before) -- selectors below are grouped so the static look is shared and only the animated layer is Royal-Ace-only. */ button.btn.menu-card { position: relative; overflow: hidden; } button.btn.menu-card .corner { display: none; } body[data-btnstyle="royalace"] button.btn.menu-card, body[data-btnstyle="goldleaf"] button.btn.menu-card { border-radius: 15px; min-height: 78px; background: linear-gradient(135deg, #171009 0%, #1c1608 35%, #0d0a05 65%); border: 1px solid rgba(240,196,25,.55); box-shadow: inset 0 0 0 2px rgba(6,10,8,1), inset 0 0 0 3px rgba(240,196,25,.32), 0 0 14px rgba(240,196,25,.14), 0 4px 12px rgba(0,0,0,.4); } body[data-btnstyle="royalace"] button.btn.menu-card::before { content: ""; position: absolute; top: -60%; left: -45%; width: 55%; height: 220%; background: linear-gradient(100deg, transparent 30%, rgba(240,196,25,.16) 47%, rgba(255,241,181,.36) 50%, rgba(240,196,25,.16) 53%, transparent 70%); transform: rotate(14deg); animation: foilsheen 3.4s ease-in-out infinite; } body[data-btnstyle="royalace"] button.btn.menu-card::after, body[data-btnstyle="goldleaf"] button.btn.menu-card::after { content: attr(data-suit); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; color: var(--gold); opacity: .10; } @keyframes foilsheen { 0%, 100% { left: -45%; } 50% { left: 115%; } } @media (prefers-reduced-motion: reduce) { body[data-btnstyle="royalace"] button.btn.menu-card::before { animation: none; opacity: .6; } } body[data-btnstyle="royalace"] button.btn.menu-card .corner, body[data-btnstyle="goldleaf"] button.btn.menu-card .corner { display: block; position: absolute; z-index: 1; font-size: 12px; font-weight: 900; color: var(--gold); } body[data-btnstyle="royalace"] button.btn.menu-card .corner.tl, body[data-btnstyle="goldleaf"] button.btn.menu-card .corner.tl { top: 6px; left: 8px; } body[data-btnstyle="royalace"] button.btn.menu-card .corner.br, body[data-btnstyle="goldleaf"] button.btn.menu-card .corner.br { bottom: 6px; right: 8px; transform: rotate(180deg); } body[data-btnstyle="royalace"] button.btn.menu-card .ico, body[data-btnstyle="goldleaf"] button.btn.menu-card .ico { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(240,196,25,.5); border-radius: 50%; font-size: 13px; background: rgba(0,0,0,.3); vertical-align: middle; } body[data-btnstyle="royalace"] button.btn.menu-card .lbl, body[data-btnstyle="goldleaf"] button.btn.menu-card .lbl { position: relative; z-index: 1; color: #f3e7c6; letter-spacing: .2px; } /* App-wide: every OTHER (non-semantic) button gets the same gold-foil family too, just without the corner/watermark markup that only the Home menu buttons carry (data-suit). Semantic-colored buttons (primary/ danger/success/ghost) keep their meaningful color -- a Delete button turning gold would be confusing, not thematic. */ body[data-btnstyle="royalace"] button.btn:not(.menu-card):not(.primary):not(.danger):not(.success):not(.ghost), body[data-btnstyle="goldleaf"] button.btn:not(.menu-card):not(.primary):not(.danger):not(.success):not(.ghost) { border-radius: 14px; background: linear-gradient(135deg, #171009 0%, #1c1608 35%, #0d0a05 65%); border: 1px solid rgba(240,196,25,.5); box-shadow: inset 0 0 0 2px rgba(6,10,8,1), inset 0 0 0 3px rgba(240,196,25,.26), 0 4px 10px rgba(0,0,0,.4); color: #f3e7c6; position: relative; overflow: hidden; } body[data-btnstyle="royalace"] button.btn:not(.menu-card):not(.primary):not(.danger):not(.success):not(.ghost)::before { content: ""; position: absolute; top: -60%; left: -45%; width: 55%; height: 220%; background: linear-gradient(100deg, transparent 30%, rgba(240,196,25,.14) 47%, rgba(255,241,181,.3) 50%, rgba(240,196,25,.14) 53%, transparent 70%); transform: rotate(14deg); animation: foilsheen 3.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { body[data-btnstyle="royalace"] button.btn:not(.menu-card)::before { animation: none; opacity: .6; } } /* ------------------------------------------------------- Active Game box style */ /* Independent of Button Style -- its own Settings picker, 3 options: the current plain box (default, data-agamestyle unset), Royal Table, and Royal Table Deluxe. .agame-suit corner marks were dropped in favor of a single centered watermark pip -- simpler, cleaner table look. No moving sheen either: both were flagged as visually off (corner marks cluttered the table shape, the sheen didn't suit a static table), so this style is now table shape + border + centered pip only. */ body[data-agamestyle="royaltable"] .card.glow, body[data-agamestyle="royaldeluxe"] .card.glow { position: relative; overflow: hidden; text-align: center; border-radius: 50%/56%; padding: 38px 26px; background: radial-gradient(ellipse at center, #1a4a36 0%, #0d2b1f 70%, #08170f 100%); border: 9px solid #2b1608; box-shadow: inset 0 0 0 3px rgba(240,196,25,.55), 0 12px 30px rgba(0,0,0,.55); } body[data-agamestyle="royaltable"] .card.glow::after, body[data-agamestyle="royaldeluxe"] .card.glow::after { /* inset pulls in from the card's edge on all sides so the glyph's own box (and a real font's ascent/descent padding around "♠") never reaches the border, however tall or short the card ends up being. */ content: "♠"; position: absolute; inset: 18px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; color: var(--gold); opacity: .09; pointer-events: none; } /* Deluxe only: the clock sits in its own medallion badge */ body[data-agamestyle="royaldeluxe"] .card.glow .game-clock { position: relative; z-index: 1; display: inline-flex; margin: 10px auto 0; border: 1px solid rgba(240,196,25,.5); border-radius: 999px; padding: 6px 18px; background: rgba(0,0,0,.3); } body[data-agamestyle="royaldeluxe"] .card.glow h2, body[data-agamestyle="royaldeluxe"] .card.glow .row, body[data-agamestyle="royaldeluxe"] .card.glow .table-switcher { position: relative; z-index: 1; } /* Home screen's active-game card only (.agame-box, added in app.js only while a game is running) -- NOT bare .card.glow, which is also used by the Final Report's settlement card and the Settings update-available box, neither of which should ever get a table photo. Applies under both shapes (current + Royal Table/Deluxe); a dark scrim + vignette keeps the name/clock/stats readable over the photo regardless of shape. */ /* Also re-applied under both Royal Table shapes at matching specificity, later in the file than their own `background:` shorthand above -- that shorthand resets background-image/size/position to initial as part of setting the flat felt gradient, which was silently erasing the photo on those two shapes (confirmed live: photo showed on the plain shape, not on Royal Table). Border/radius/shadow from that rule are untouched. */ .agame-box.bgphoto, body[data-agamestyle="royaltable"] .agame-box.bgphoto, body[data-agamestyle="royaldeluxe"] .agame-box.bgphoto { background-image: linear-gradient(180deg, rgba(4,8,7,.30) 0%, rgba(4,8,7,.62) 55%, rgba(4,8,7,.82) 100%), radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%), url("../img/agame-table.jpg"); background-size: cover; background-position: center 35%; } /* No more "Active Game"/"Current Table" heading -- the game name itself is the title, marked live via the existing .pill.active badge. */ .game-title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; z-index: 1; } .game-title { font-size: 21px; font-weight: 800; color: var(--cyan); text-shadow: var(--glow); letter-spacing: .3px; } body[data-agamestyle="royaltable"] .agame-box .game-title-row, body[data-agamestyle="royaldeluxe"] .agame-box .game-title-row { justify-content: center; gap: 12px; } /* Total Pot + Player count -- small chip-like badges sitting on the felt rather than plain text, so they read as part of the table. */ .tablestats { display: flex; justify-content: center; gap: 10px; margin-top: 12px; position: relative; z-index: 1; } .tablestats .stat { display: flex; align-items: center; gap: 7px; background: rgba(6,10,8,.55); border: 1px solid rgba(240,196,25,.35); border-radius: 999px; padding: 7px 16px; backdrop-filter: blur(2px); } .tablestats .stat .ico { font-size: 14px; } .tablestats .stat .val { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; color: var(--gold); text-shadow: 0 0 6px rgba(240,196,25,.4); } .tablestats .stat.players .val { color: var(--cyan); text-shadow: 0 0 6px rgba(47,230,230,.4); } .tablestats .stat .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; } /* Stats -> All Players net-P/L bar chart, same visual pattern as the Broadcast/viewer page's career chart (www/broadcast.html) -- reused here rather than invented fresh, so both places that show "who's up/down" look and behave the same way. */ .chart-card { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--border-soft); border-radius: 18px; padding: 14px 16px 12px; margin-bottom: 16px; } /* Nicer, more visual treatment matching the Broadcast/viewer page's chart cards -- a subtle glow instead of a completely flat panel. */ .chart-card.glow { border-color: var(--border); box-shadow: var(--glow), 0 6px 22px rgba(0,0,0,.35); } .sub-label { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim); margin: 14px 4px 6px; opacity: .75; } /* Career "money in, over time" line chart -- same look as the Broadcast/ viewer page's identical chart. */ .big-chart-card { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--border); border-radius: 20px; padding: 16px 14px 12px; box-shadow: var(--glow), 0 6px 22px rgba(0,0,0,.3); margin-bottom: 16px; } .big-chart-card h2 { margin: 0 0 2px 4px; font-size: 15px; color: var(--cyan); } .big-chart-card .hint { margin: 0 0 10px 4px; font-size: 11px; color: var(--text-dim); line-height: 1.4; } .big-chart-card svg { width: 100%; height: auto; display: block; overflow: hidden; } .legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; padding: 0 4px; } .legend .li { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; min-width: 0; } .legend .sw { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; } .bar-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .bar-row .bname { width: 30%; flex-shrink: 0; min-width: 0; font-size: 12.5px; font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { flex: 1; height: 18px; position: relative; } .bar-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; } .bar-fill.pos { left: 50%; background: linear-gradient(90deg, var(--green), #7dffce); } .bar-fill.neg { right: 50%; background: linear-gradient(90deg, #ff8ba3, var(--red)); } .bar-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-soft); } .bar-val { width: 58px; flex-shrink: 0; font-size: 11.5px; font-weight: 800; text-align: left; } [dir="rtl"] .bar-row .bname { text-align: left; } /* Stage-vs-prod visual indicator (banner injected by app.js when /api/version reports env:"stage") -- sits above everything, including the login screen, so it's unmistakable regardless of which screen loads first. */ .stage-banner { position: sticky; top: 0; z-index: 999; background: linear-gradient(90deg, #b8860b, #d4a017); color: #1a1300; font-weight: 800; font-size: 12px; letter-spacing: .6px; text-align: center; padding: 6px 10px; text-shadow: none; }