/* WinLogger demo games — shared styles * Inherits the global CSS variables from winlogger_head.php: * --bg, --bg-card, --bg-input, --bg-panel, --border * --text-1, --text-2, --text-3 * --cyan, --green, --red, --font-head */ /* Force body visible. The site's noir.css keeps body at opacity:0 until * gets the "loaded" class via a script in the main site footer that game pages * don't include. This override makes game pages render regardless. */ html body { opacity: 1 !important; } /* ---------- Per-game sidebar header (title + balance pill) ---------- */ .wl-game-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .wl-game-title { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 22px; color: var(--text-1); letter-spacing: .02em; } .wl-balance-pill { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; line-height: 1; } .wl-balance-lab { font-family: var(--font-head); font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); } .wl-balance-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--green); transition: color .25s; } .wl-balance-val.low { color: var(--red); } /* ---------- Sidebar footer: PF + Reset links ---------- */ .wl-game-footer-links { display: flex; justify-content: space-around; gap: 8px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); } .wl-link { background: transparent; border: none; color: var(--text-3); font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; padding: 6px 10px; border-radius: 4px; transition: color .12s, background .12s; } .wl-link:hover { color: var(--text-1); background: rgba(255,255,255,.04); } /* ---------- Fun-play-only info box ---------- */ .wl-funplay-box { margin: 28px 0 0; padding: 22px; background: linear-gradient(135deg, rgba(34,211,238,.04), var(--bg-card) 60%, rgba(0,232,122,.03)); border: 1px solid var(--border); border-radius: 12px; position: relative; overflow: hidden; } .wl-funplay-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--green)); opacity: .55; } .wl-fp-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .wl-fp-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25); font-size: 22px; flex-shrink: 0; } .wl-fp-tag-line { font-family: var(--font-head); font-size: 10px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; } .wl-fp-title { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 18px; color: var(--text-1); letter-spacing: .01em; } .wl-fp-body { color: var(--text-2); font-size: 13px; line-height: 1.6; margin-bottom: 18px; } .wl-fp-body p { margin: 0; } .wl-fp-body strong { color: var(--text-1); font-weight: 700; } .wl-fp-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .wl-fp-divider::before, .wl-fp-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .wl-fp-divider-label { font-family: var(--font-head); font-size: 10px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .wl-fp-other-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .wl-fp-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: inherit; transition: transform .12s, border-color .12s, background .12s; } .wl-fp-pill:hover { transform: translateY(-1px); border-color: var(--accent, var(--cyan)); background: rgba(255,255,255,.02); } .wl-fp-pill[data-acc="cyan"] { --accent: var(--cyan); } .wl-fp-pill[data-acc="green"] { --accent: var(--green); } .wl-fp-pill[data-acc="purple"] { --accent: #c084fc; } .wl-fp-pill[data-acc="rose"] { --accent: #fb7185; } .wl-fp-pill[data-acc="amber"] { --accent: #fbbf24; } .wl-fp-pill[data-acc="orange"] { --accent: #f5a623; } .wl-fp-pill-icon { font-size: 20px; flex-shrink: 0; } .wl-fp-pill-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wl-fp-pill-name { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 14px; color: var(--text-1); line-height: 1.1; } .wl-fp-pill-tag { font-family: var(--font-head); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent, var(--text-3)); line-height: 1.2; } @media (max-width: 600px) { .wl-funplay-box { padding: 16px; } .wl-fp-title { font-size: 16px; } .wl-fp-body { font-size: 12px; } .wl-fp-other-grid { grid-template-columns: repeat(2, 1fr); } } .wl-btn-ghost { background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-2); border-radius: 6px; padding: 8px 12px; font-family: var(--font-head); font-weight: 900; font-size: 12px; letter-spacing: 1px; cursor: pointer; transition: all .15s; } .wl-btn-ghost:hover { color: var(--text-1); border-color: var(--accent, var(--cyan)); background: rgba(255,255,255,.08); } .wl-btn { background: var(--accent, var(--cyan)); color: #020616; border: none; border-radius: 8px; padding: 12px 20px; font-family: var(--font-head); font-weight: 900; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all .15s; box-shadow: 0 2px 10px rgba(0,0,0,.5); } .wl-btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.55); } .wl-btn:disabled { background: rgba(255,255,255,.05); color: var(--text-2); cursor: not-allowed; filter: none; opacity: 1; box-shadow: inset 0 0 0 1px var(--border); transform: none; } .wl-btn:disabled:hover { transform: none; box-shadow: inset 0 0 0 1px var(--border); filter: none; } .wl-btn.wide { padding: 14px 22px; font-size: 14px; width: 100%; } @keyframes wl-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .wl-btn.shake { animation: wl-shake .4s; background: var(--red) !important; } @media (max-width: 700px) { .wl-game-title { font-size: 18px; } .wl-balance-val { font-size: 14px; } } /* ---------- Two-column game layout (controls | playfield) ---------- */ .wl-game-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; } .wl-game-controls { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; } .wl-game-playfield { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; min-height: 480px; } @media (max-width: 900px) { /* Single-column stack with explicit ordering — playfield on top. grid-template-areas is robust against any conflicting `order:` interpretation across browsers, which `order:` alone is not. */ .wl-game-grid { grid-template-columns: 1fr; grid-template-areas: "play" "ctrl"; } .wl-game-playfield { grid-area: play; padding: 16px; min-height: 320px; } .wl-game-controls { grid-area: ctrl; position: static; } } /* ---------- Compact mobile layout (≤700px) ---------- * Placed AFTER the unconditional .wl-game-controls / .wl-game-playfield * rules and the 900px stack rules so the cascade resolves in this block's * favour. Tightens spacing throughout to match Thrill / Stake density. */ @media (max-width: 700px) { /* Controls panel — tighter overall density */ .wl-game-controls { padding: 12px; gap: 9px; } /* Head row + balance pill */ .wl-game-head { gap: 8px; padding-bottom: 8px; margin-bottom: 0; } .wl-balance-pill { padding: 6px 10px; } /* Input groups + stat rows — less vertical breathing */ .wl-input-group { gap: 4px; } .wl-stat-row { padding: 8px 11px; } /* Place-Bet button — slightly less padded */ .wl-btn.wide { padding: 12px 18px; } /* History strip + PF/Reset links — flush to controls */ .wl-history-strip { margin-top: 6px; } .wl-game-footer-links { padding-top: 8px; margin-top: 0; } /* Playfield — shorter so the controls below come up the screen */ .wl-game-playfield { padding: 14px; min-height: 280px; } } /* ---------- Bet panel components ---------- */ .wl-input-group { display: flex; flex-direction: column; gap: 6px; } .wl-input-label { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); } .wl-input-label .wl-aux { color: var(--text-2); letter-spacing: .5px; text-transform: none; font-size: 11px; font-weight: 600; } .wl-input-row { display: flex; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .wl-input-row:focus-within { border-color: var(--accent, var(--cyan)); box-shadow: 0 0 0 3px rgba(34,211,238,.10); } .wl-input-row input { flex: 1; background: transparent; border: none; color: var(--text-1); font-family: JetBrains Mono, monospace; font-size: 14px; font-weight: 700; padding: 10px 12px; outline: none; min-width: 0; } .wl-input-row input::-webkit-outer-spin-button, .wl-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wl-input-row input[type=number] { -moz-appearance: textfield; } .wl-input-suffix { padding: 0 12px; display: flex; align-items: center; color: var(--text-2); font-family: var(--font-head); font-size: 11px; font-weight: 900; letter-spacing: 1px; border-left: 1px solid var(--border); background: rgba(255,255,255,.03); } .wl-input-btn { background: rgba(255,255,255,.05); border: none; color: var(--text-1); font-family: var(--font-head); font-weight: 900; font-size: 11px; letter-spacing: 1px; padding: 0 14px; border-left: 1px solid var(--border); cursor: pointer; transition: background .12s, color .12s; } .wl-input-btn:hover { background: rgba(255,255,255,.12); color: #fff; } .wl-stat-row { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; font-family: JetBrains Mono, monospace; font-size: 13px; } .wl-stat-row .wl-stat-lab { color: var(--text-3); font-weight: 600; } .wl-stat-row .wl-stat-val { color: var(--text-1); font-weight: 900; } .wl-stat-row .wl-stat-val.pos { color: var(--green); } .wl-stat-row .wl-stat-val.neg { color: var(--red); } .wl-stat-row .wl-stat-val.cyan { color: var(--cyan); } /* ---------- History strip (horizontal recent results) ---------- */ .wl-history-strip { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .wl-history-strip::-webkit-scrollbar { height: 4px; } .wl-history-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .wl-hist-cell { flex-shrink: 0; padding: 6px 10px; border-radius: 5px; font-family: JetBrains Mono, monospace; font-size: 11px; font-weight: 900; background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; } .wl-hist-cell.win { background: rgba(0,232,122,.10); color: var(--green); border-color: rgba(0,232,122,.25); } .wl-hist-cell.loss { background: rgba(248,113,113,.08); color: var(--red); border-color: rgba(248,113,113,.20); } .wl-hist-empty { color: var(--text-3); font-size: 11px; padding: 8px 4px; } /* ---------- Result toast (big multiplier announcement) ---------- */ .wl-result { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85); background: var(--bg-card); border: 2px solid var(--border); border-radius: 14px; padding: 20px 36px; font-family: JetBrains Mono, monospace; font-size: 36px; font-weight: 900; letter-spacing: -.02em; pointer-events: none; opacity: 0; transition: all .25s cubic-bezier(.16,1.05,.5,1); z-index: 999; box-shadow: 0 12px 40px rgba(0,0,0,.6); } .wl-result.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .wl-result.win { color: var(--green); border-color: rgba(0,232,122,.4); } .wl-result.loss { color: var(--red); border-color: rgba(248,113,113,.3); } /* ---------- Provably Fair modal ---------- */ .wl-verify { position: fixed; inset: 0; background: rgba(2,6,22,.78); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; z-index: 9000; padding: 40px 16px; } .wl-verify.open { display: flex; } .wl-verify-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; width: min(720px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.6); } .wl-verify-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); } .wl-verify-head h3 { margin: 0; font-family: var(--font-head); font-weight: 900; font-style: italic; font-size: 22px; color: var(--text-1); letter-spacing: .01em; } .wl-verify-close { background: transparent; border: none; color: var(--text-3); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px; transition: color .12s; } .wl-verify-close:hover { color: var(--text-1); } .wl-verify-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; } .wl-verify-intro { color: var(--text-2); font-size: 13px; line-height: 1.5; margin: 0 0 6px 0; } .wl-verify-intro code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--cyan); } .wl-verify-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; } .wl-verify-row label { font-family: var(--font-head); font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); } .wl-verify-mono { font-family: JetBrains Mono, monospace; font-size: 11px; font-weight: 600; color: var(--text-1); word-break: break-all; line-height: 1.5; } .wl-verify-row input[type=text] { background: transparent; border: 1px solid var(--border); color: var(--text-1); font-family: JetBrains Mono, monospace; font-size: 13px; padding: 8px 10px; border-radius: 6px; outline: none; } .wl-verify-row input[type=text]:focus { border-color: var(--cyan); } .wl-verify-log { padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; } .wl-verify-log summary { cursor: pointer; font-family: var(--font-head); font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); } .wl-v-log-row { margin-top: 12px; padding: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; } .wl-v-log-ts { font-size: 10px; color: var(--text-3); font-family: JetBrains Mono, monospace; } .wl-v-log-cell { display: flex; flex-direction: column; gap: 2px; } .wl-v-log-cell label { font-size: 8px; color: var(--text-3); font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; } .wl-v-log-cell code { font-family: JetBrains Mono, monospace; font-size: 10px; color: var(--text-2); word-break: break-all; } .wl-v-log-empty { color: var(--text-3); font-size: 12px; padding: 10px 0 4px; font-style: italic; } /* ============================================================ * Mobile overflow defenses (fixes progressive page right-shift) * ============================================================ * Without min-width:0 on grid items, the history strip's * min-content width forces the controls panel wider than the * mobile viewport. That horizontal overflow lets the browser * auto-scroll the focused Bet button into view, pushing * content right with each tap. */ .wl-game-controls, .wl-game-playfield { min-width: 0; } /* Belt-and-braces: prevent any horizontal scroll on body. */ html, body { overflow-x: hidden; } /* Also constrain the history strip explicitly so it stays in * its lane regardless of cell count or content width. */ .wl-history-strip { max-width: 100%; } /* === WL rules-box (collapsible game rules) === */ .wl-rules-box { margin-top: 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; transition: border-color .25s; } .wl-rules-box[data-expanded="true"] { border-color: rgba(34,211,238,.4); } .wl-rules-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; } .wl-rules-title { font-family: var(--font-head); font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-1); margin: 0; } .wl-rules-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-2); padding: 7px 14px; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 5px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; white-space: nowrap; } .wl-rules-toggle:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,.06); } .wl-rules-body { max-height: 0; overflow: hidden; transition: max-height .45s ease, margin-top .3s ease, opacity .3s ease; margin-top: 0; opacity: 0; color: var(--text-2); font-size: 13px; line-height: 1.65; } .wl-rules-box[data-expanded="true"] .wl-rules-body { max-height: 3000px; margin-top: 16px; opacity: 1; } .wl-rules-body h3 { font-family: var(--font-head); font-size: 11px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-1); margin: 16px 0 7px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } .wl-rules-body h3:first-child { margin-top: 0; } .wl-rules-body p { margin: 0 0 9px; } .wl-rules-body ul { margin: 0 0 9px; padding-left: 22px; } .wl-rules-body li { margin: 0 0 4px; } .wl-rules-body strong { color: var(--text-1); font-weight: 700; } .wl-rules-body code { font-family: JetBrains Mono, Menlo, monospace; background: var(--bg-input); padding: 1px 6px; border-radius: 3px; font-size: 12px; color: var(--cyan); } .wl-rules-body .wl-rules-formula { background: var(--bg-input); border-left: 3px solid var(--cyan); padding: 8px 12px; margin: 8px 0; font-family: JetBrains Mono, Menlo, monospace; font-size: 12.5px; color: var(--text-1); border-radius: 0 4px 4px 0; } @media (max-width: 520px) { .wl-rules-head { flex-direction: column; align-items: flex-start; } .wl-rules-toggle { align-self: stretch; text-align: center; } } /* === WL cross-game nav dropdown (mobile) === */ /* Caret hidden on desktop; cross-game grid always visible on desktop. */ .wl-fp-other-caret { display: none; } @media (max-width: 700px) { .wl-fp-other-toggle { cursor: pointer; user-select: none; margin-bottom: 0; padding: 6px 0; } .wl-fp-other-toggle:active { opacity: .7; } .wl-fp-other-caret { display: inline-flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; font-size: 10px; color: var(--text-2); border: 1px solid var(--border); border-radius: 50%; transition: transform .25s; flex-shrink: 0; } .wl-fp-other-toggle[data-collapsed="false"] .wl-fp-other-caret { transform: rotate(180deg); } /* !important guarantees the grid hides even if another rule sets display: */ .wl-fp-other-toggle[data-collapsed="true"] + .wl-fp-other-grid { display: none !important; } .wl-fp-other-toggle[data-collapsed="false"] + .wl-fp-other-grid { margin-top: 10px; } } /* === WL funplay collapse + prominent toggle === */ /* Desktop default: caret hidden, body always visible. */ .wl-fp-collapse-caret { display: none; } @media (max-width: 700px) { /* Make the head clickable and show the caret on the right. */ .wl-fp-collapse-trigger { cursor: pointer; user-select: none; } .wl-fp-collapse-trigger:active { opacity: .8; } .wl-fp-collapse-caret { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; font-size: 12px; color: var(--text-2); border: 1px solid var(--border); border-radius: 50%; transition: transform .25s ease; flex-shrink: 0; } .wl-funplay-box:not([data-collapsed="true"]) .wl-fp-collapse-caret { transform: rotate(180deg); } /* Hide the body paragraph when collapsed. !important so no other rule wins. */ .wl-funplay-box[data-collapsed="true"] .wl-fp-body { display: none !important; } /* When body is visible, give it a touch of breathing room. */ .wl-funplay-box:not([data-collapsed="true"]) .wl-fp-body { margin-top: 8px; } /* === Prominent "Try another game" button (mobile) === */ /* Kill the divider lines on either side of the label. */ .wl-fp-other-toggle.wl-fp-divider::before, .wl-fp-other-toggle.wl-fp-divider::after { display: none !important; } /* Turn the toggle into a button: background + border + centered. */ .wl-fp-other-toggle.wl-fp-divider { background: var(--bg-input) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 13px 18px !important; margin: 16px 0 !important; justify-content: center !important; gap: 10px !important; transition: border-color .15s, background .15s; } .wl-fp-other-toggle.wl-fp-divider:hover, .wl-fp-other-toggle.wl-fp-divider:active, .wl-fp-other-toggle.wl-fp-divider:focus { border-color: var(--cyan) !important; background: rgba(34, 211, 238, 0.04) !important; } .wl-fp-other-toggle.wl-fp-divider .wl-fp-divider-label { color: var(--text-1) !important; font-size: 11px !important; } /* Caret popped: cyan tint, slightly larger. */ .wl-fp-other-toggle.wl-fp-divider .wl-fp-other-caret { width: 26px !important; height: 26px !important; font-size: 13px !important; border-color: var(--cyan) !important; color: var(--cyan) !important; } } /* ============================================================ * v3 — Unified cyan primary action button * ============================================================ */ .wl-btn.wide, .wl-btn.wide:hover, .wl-btn.wide:focus { background: var(--cyan) !important; color: #020616 !important; } .wl-btn.wide:hover { filter: brightness(1.12); } .wl-btn.wide:disabled, .wl-btn.wide:disabled:hover { background: rgba(255,255,255,.05) !important; color: var(--text-2) !important; filter: none; } /* ============================================================ * v4 — Total cyan unification + structural cleanup * ============================================================ * - All active mode-tabs / risk-toggle / grid-size selectors cyan * - Picked-tile highlights cyan (keno picks, mines auto-pick) * - Sidebar "Possible payout" stat hidden everywhere except mines + keno * - Header-to-funplay-box gap tightened * - Blackjack insurance modal repositioned so cards stay visible */ /* --- Unified cyan on all active in-game tabs / toggles / selectors --- */ [class$="-mode-tabs"] button.active, [class$="-mode-toggle"] button.active, [class$="-risk-toggle"] button.active, [class$="-grid-size-select"] button.active, [class$="-grid-size-select"] button.active * { background: var(--cyan) !important; color: #020616 !important; border-color: var(--cyan) !important; } /* mines/keno picked-state and auto-pick: cyan */ .kn-cell.picked { background: rgba(34,211,238,.18) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; box-shadow: 0 0 12px rgba(34,211,238,.30) inset !important; } .kn-cell:hover { border-color: var(--cyan) !important; } .mn-cell.auto-pick { background: linear-gradient(180deg, rgba(34,211,238,.18), rgba(34,211,238,.10)) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; } .mn-cell.auto-pick::after { color: var(--cyan) !important; } .mn-cell:hover { border-color: var(--cyan) !important; } /* keno paytable cell "win" highlight: cyan */ .kn-paytable-cell.win { background: rgba(34,211,238,.18) !important; color: var(--cyan) !important; box-shadow: 0 0 10px rgba(34,211,238,.20) inset !important; } .kn-paytable-cell.win .kn-pt-hits { color: var(--cyan) !important; } /* checkbox accent (legacy stop-on-win element; now hidden, but harmless) */ .kn-sow-label input[type="checkbox"], .mn-sow-label input[type="checkbox"] { accent-color: var(--cyan) !important; } /* mines grid-size active card */ .mn-grid-size-select button.active { background: rgba(34,211,238,.15) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; } /* plinko ball + accent border */ .pk-ball { fill: var(--cyan) !important; filter: drop-shadow(0 0 10px rgba(34,211,238,.85)) !important; } .pk-rows-control button.active { background: rgba(34,211,238,.15) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; } /* dice mode toggle (roll over/under) */ [id$="-roll-mode"] button.active, .dc-rollmode button.active { background: var(--cyan) !important; color: #020616 !important; } /* crash secondary cashout button: keep green (different semantic — it's a distinct action, not the primary bet). Already inline-styled green. */ /* --- Remove "Possible payout" sidebar row everywhere except mines --- */ .wl-stat-row:has(#kn-max-payout), .wl-stat-row:has(#pk-max-payout), .wl-stat-row:has(#dc-payout), .wl-stat-row:has(#lb-payout), .wl-stat-row:has(#cr-payout-stat) { display: none !important; } /* --- Tighten header → first-content gap --- */ main { padding-top: 0 !important; } .wl-funplay-box { margin-top: 4px !important; } /* Some games set inline padding-top on .page-wrap; cap to minimal */ main > .page-wrap[style*="padding-top"] { padding-top: 4px !important; } /* --- Keno: hide "Picked X/10" stat row (paytable already shows pick count) --- */ .wl-stat-row:has(#kn-pick-count) { display: none !important; } /* Keno auto-controls + stop-on-win are wrapped into a flex row by the patch JS. */ /* --- Keno: manual actions — auto-flowing 2-column grid --- */ /* The obfuscated code controls display via inline style on #kn-manual-actions and #kn-auto-actions. Only style when NOT display:none. */ #kn-manual-actions:not([style*="display: none"]) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #kn-manual-actions > button { margin-top: 0 !important; width: 100% !important; } /* Bet button spans full width when shown (after picks made) */ #kn-manual-actions > #kn-bet-btn:not(:disabled) { grid-column: 1 / -1; } /* Hide the disabled "Pick numbers" placeholder — confusing UX; the Auto pick button is the actionable button until picks exist */ #kn-bet-btn:disabled { display: none !important; } /* Override any inline margin-top from the markup */ #kn-clear-btn[style*="margin-top"], #kn-auto-clear-btn[style*="margin-top"] { margin-top: 0 !important; } /* --- Keno: auto actions — Start/Stop + Clear side-by-side --- */ #kn-auto-actions:not([style*="display: none"]) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #kn-auto-actions > button { margin-top: 0 !important; width: 100% !important; } #kn-auto-actions > .kn-auto-progress { grid-column: 1 / -1; } /* Hide the disabled "Start auto-bet" placeholder until picks are made */ #kn-auto-start-btn:disabled { display: none !important; } /* --- Blackjack insurance modal: don't cover the cards --- */ .bj-modal-bg { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none !important; /* allow clicks through the empty backdrop */ align-items: flex-start !important; justify-content: flex-end !important; padding: 12px !important; } .bj-modal-card { pointer-events: auto !important; /* card itself stays interactive */ max-width: 320px !important; padding: 18px 20px 16px !important; box-shadow: 0 12px 36px rgba(0,0,0,.85), 0 0 0 1px rgba(251,191,36,.25) !important; } .bj-modal-title { font-size: 13px !important; margin-bottom: 6px !important; } .bj-modal-text { font-size: 12px !important; margin-bottom: 14px !important; } @media (max-width: 700px) { /* On mobile, anchor to top so it doesn't sit over the controls. */ .bj-modal-bg { justify-content: center !important; padding-top: 60px !important; } .bj-modal-card { max-width: 92vw !important; } } /* === WL mobile compaction v1 (superseded by v2 below) === */ @media (max-width: 500px) { /* Let playfield height be determined by content, not min-height. */ .wl-game-playfield { min-height: 0 !important; padding: 10px !important; } } /* ============================================================ * v2 — Unified compact menus across all funplay games * ============================================================ * Goals (from desktop + mobile screenshots vs Stake/Shuffle refs): * - Primary action button (.wl-btn.wide) moves to TOP on mobile. * - Stat rows + small inputs become side-by-side pairs (2-col grid). * - Slightly bigger, more readable fonts on stat labels/values. * - Tighter padding across the panel. * - Per-game inline mode-tabs / risk-toggle / grid-size selectors * inherit unified padding via attribute selectors on shared classes * (no PHP changes needed). */ /* ---------- Desktop: slight font + density bump for readability ---------- */ .wl-stat-row { padding: 11px 13px; font-size: 14px; } .wl-stat-row .wl-stat-lab { font-size: 12px; } .wl-stat-row .wl-stat-val { font-size: 14px; } .wl-input-label { font-size: 10px; } .wl-input-label .wl-aux { font-size: 12px; } .wl-input-row input { font-size: 15px; padding: 11px 13px; } .wl-input-btn { font-size: 12px; padding: 0 15px; } .wl-balance-lab { font-size: 10px; } .wl-balance-val { font-size: 17px; } .wl-game-title { font-size: 23px; } /* Cross-game: unify in-game tab/toggle/select height so per-game inline * styles (kn-risk-toggle, mn-mode-tabs, pk-risk-toggle, mn-grid-size-select, * kn-mode-tabs) all line up visually even though they keep their own * accent colors. */ [class$="-mode-tabs"] button, [class$="-risk-toggle"] button, [class$="-grid-size-select"] button { font-size: 12px !important; padding: 11px 10px !important; letter-spacing: 1.5px !important; } /* ---------- Mobile ≤700px: unified compact layout ---------- */ @media (max-width: 500px) { /* Tighter controls panel */ .wl-game-controls { padding: 10px !important; gap: 8px !important; } /* Head + balance pill: minimal vertical footprint */ .wl-game-head { gap: 6px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; } .wl-game-title { font-size: 17px !important; } .wl-balance-pill { padding: 6px 10px !important; } .wl-balance-lab { font-size: 9px !important; letter-spacing: 1.5px !important; } .wl-balance-val { font-size: 14px !important; } /* Re-order children so the primary action button sits right under * the head, like Stake/Shuffle mobile layouts. .wl-game-controls is * already display:flex; flex-direction:column, so order: works. */ .wl-game-head { order: 1; } /* Primary action button promoted to top */ .wl-game-controls > .wl-btn.wide, #mn-manual-actions, #mn-auto-actions, #kn-manual-actions, #kn-auto-actions { order: 2; } /* Bet amount input — keep right under the action button */ .wl-input-group:has(#kn-bet), .wl-input-group:has(#mn-bet), .wl-input-group:has(#bj-bet), .wl-input-group:has(#dc-bet), .wl-input-group:has(#pk-bet), .wl-input-group:has(#lb-bet), .wl-input-group:has(#wh-bet), .wl-input-group:has(#hl-bet), .wl-input-group:has(#cr-bet) { order: 3; } /* All other input groups (mode tabs, risk, grid size, mines count) */ .wl-input-group { order: 4; } /* Stat rows (multiplier, payout, picks, etc) */ .wl-stat-row { order: 5; } /* Per-game action button rows (hit/stand/double, cashout) */ .bj-actions { order: 6; } /* History strip + footer links */ .wl-history-strip { order: 7; margin-top: 4px !important; } .wl-game-footer-links { order: 8; padding-top: 8px !important; margin-top: 0 !important; } /* Primary button — prominent on mobile */ .wl-btn.wide { padding: 13px 18px !important; font-size: 14px !important; font-weight: 900 !important; margin: 2px 0 !important; } /* Stat rows — readable but compact */ .wl-stat-row { padding: 9px 12px !important; } .wl-stat-row .wl-stat-lab, .wl-stat-row .wl-stat-val { font-size: 13px !important; } /* Input groups — less vertical breathing */ .wl-input-group { gap: 4px !important; } .wl-input-label { font-size: 10px !important; } .wl-input-label .wl-aux { font-size: 11px !important; } .wl-input-row input { font-size: 14px !important; padding: 10px 12px !important; } .wl-input-btn { font-size: 12px !important; padding: 0 13px !important; } /* In-game tabs/toggles/selects: tighter padding, readable */ [class$="-mode-tabs"] button, [class$="-risk-toggle"] button, [class$="-grid-size-select"] button { font-size: 11px !important; padding: 9px 6px !important; letter-spacing: 1px !important; } /* ====== SIDE-BY-SIDE pairs on mobile via 2-col grid ====== * .wl-game-controls is normally display:flex column. On mobile we * switch it to a 2-col CSS grid. Everything full-width by default * (grid-column: 1/-1) EXCEPT stat-rows, which naturally pair up * into the two columns. The `order:` properties above still work * because grid items respect `order` just like flex items do. */ .wl-game-controls { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 8px; align-items: start; } /* Default: every direct child spans both columns */ .wl-game-controls > * { grid-column: 1 / -1; } /* Stat rows are the only thing that auto-pairs */ .wl-game-controls > .wl-stat-row { grid-column: auto; } /* Info box trigger: compact title row */ .wl-funplay-box { margin: 14px 0 0 !important; padding: 12px 14px !important; } .wl-fp-head { margin-bottom: 0 !important; gap: 10px !important; } .wl-fp-icon { width: 34px !important; height: 34px !important; font-size: 18px !important; } .wl-fp-title { font-size: 14px !important; line-height: 1.25 !important; } .wl-fp-tag-line { font-size: 9px !important; margin-bottom: 2px !important; } .wl-fp-body { font-size: 12px !important; line-height: 1.5 !important; } .wl-fp-collapse-caret { width: 22px !important; height: 22px !important; font-size: 11px !important; } .wl-fp-other-toggle.wl-fp-divider { padding: 10px 14px !important; margin: 10px 0 !important; } /* History strip — shorter on mobile */ .wl-hist-cell { padding: 5px 8px !important; font-size: 10px !important; } }