/* Shared layout for single-player game pages: controls on the left, the board on the right. */
.gpage { flex: 1; width: min(1180px, 100%); margin: 0 auto; padding: clamp(14px, 3vh, 24px) clamp(12px, 3vw, 28px) 40px; }
.gpage h1 { margin: 0 0 14px; font: 400 clamp(34px, 5vw, 64px)/.95 var(--display); color: #fff; text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--title-a); }
.gwrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.gpanel { background: var(--panel); border-radius: 16px; padding: 16px; display: grid; gap: 14px; }
.gboard { background: var(--panel); border-radius: 16px; padding: clamp(12px, 2vw, 22px); min-height: 380px; position: relative; overflow: hidden; }
.gpanel h3 { margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field label, .bet-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.betbox .bet-row { display: flex; gap: 6px; }
.betbox input { flex: 1; min-width: 0; padding: 10px; font-weight: 700; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1; min-width: 56px; }
/* selected option: must out-rank ".casino .btn:hover" (white), or hovering it shows white text on white */
.casino .seg button[aria-pressed="true"], .casino .seg button[aria-pressed="true"]:hover { background: var(--pink); color: #fff; }
.casino .seg button[aria-pressed="true"]:hover { background: #ff79b3; }
.big { width: 100%; padding: 15px !important; font-size: 18px !important; }
.line { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.line b { color: #fff; }
.muted { color: var(--muted); }
.result-msg { margin: 0; min-height: 1.4em; font-weight: 700; text-align: center; font-size: 18px; }
/* "win" is also the window-chrome class in site.css; undo its box so a win is just green text */
.result-msg.win { color: #4dff8f; background: none; box-shadow: none; padding: 0; border: 0; }
.result-msg.lose { color: #ff8aa8; }
.kbd { font: 12px ui-monospace, Consolas, monospace; background: rgba(255,255,255,.12); border-radius: 4px; padding: 1px 5px; }
.hintline { margin: 0; font-size: 13px; color: var(--muted); }
select { width: 100%; font: 500 16px var(--body); padding: 10px; border-radius: 10px; border: 0; background: #f7f3ff; color: var(--ink); }

/* browsers grey out text on disabled buttons, which fades emoji tiles; keep them bright */
button:disabled.tile, button:disabled.mtile { color: #fff; }

/* game tabs (slot machine picker etc.) */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs .btn[aria-current="true"] { background: var(--gold); color: var(--ink); }

/* big win splash */
.bigwin { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 60; text-align: center; pointer-events: none;
          background: var(--gold); color: var(--ink); padding: 18px 30px; border-radius: 18px; box-shadow: 8px 8px 0 var(--pink), 16px 16px 0 var(--title-a);
          animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); display: grid; gap: 4px; }
.bigwin b { font: 400 clamp(30px, 5vw, 54px)/1 var(--display); }
.bigwin span { font-weight: 700; font-size: 20px; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }


@media (max-width: 820px) {
  .gwrap { grid-template-columns: 1fr; }
  .gboard { order: -1; min-height: 0; }
}

/* ---- playing cards (shared by the card games) ---- */
.pcards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 92px; }
.pc { width: 62px; height: 88px; border-radius: 8px; background: #fffdf8; color: #1b1240; position: relative; flex: none;
      box-shadow: 2px 3px 0 rgba(0, 0, 0, .35); font: 700 18px/1 var(--body); animation: pc-deal .25s ease-out; }
.pc.red { color: #d8344d; }
.pc .r { position: absolute; top: 6px; left: 7px; text-align: center; }
.pc .r small { display: block; font-size: 14px; margin-top: 1px; }
.pc .big { position: absolute; right: 7px; bottom: 6px; font-size: 30px; }
.pc.back { background: var(--pink) repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, .25) 6px 9px); border: 3px solid #fff; }
.pc.dim { opacity: .45; }
.pc.held { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--gold), 2px 3px 0 rgba(0, 0, 0, .35); }
.pc.win { box-shadow: 0 0 0 3px #4dff8f, 2px 3px 0 rgba(0, 0, 0, .35); }
@keyframes pc-deal { from { transform: translateY(-16px) rotate(-6deg); opacity: 0; } }
.felt-box { background: #17603e; border-radius: 16px; padding: clamp(12px, 2.4vw, 22px); box-shadow: inset 0 0 0 6px #0f4a2f, inset 0 0 0 8px rgba(255, 216, 77, .35);
            display: grid; gap: 14px; min-height: 380px; align-content: center; }
.felt-box .label { font: 400 15px var(--display); color: #dfffe9; text-align: center; margin: 0 0 6px; letter-spacing: .03em; }
.felt-box .label b { font: 700 13px var(--body); background: rgba(0, 0, 0, .35); border-radius: 6px; padding: 2px 7px; margin-left: 6px; color: #fff; letter-spacing: 0; }
.paytable { width: 100%; border-collapse: collapse; font-size: 13px; }
.paytable td { padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.paytable td:last-child { text-align: right; font-weight: 700; color: var(--gold); }
.paytable tr.hit td { background: rgba(77, 255, 143, .2); color: #fff; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip-pick { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 560px) { .pc { width: 50px; height: 72px; font-size: 15px; } .pc .big { font-size: 24px; } .pc .r small { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .pc { animation: none; } }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--pink); }
/* betting spots on felt (baccarat, craps) */
.spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.spot { border: 2px solid rgba(255, 216, 77, .6); border-radius: 14px; background: rgba(0, 0, 0, .18); color: #fff; padding: 14px 6px; cursor: pointer;
        display: grid; gap: 3px; justify-items: center; font: 400 15px var(--display); min-height: 92px; align-content: center; }
.spot small { font: 500 11px var(--body); color: #bfe8cf; }
.spot b { font: 700 15px var(--body); color: var(--gold); min-height: 1.2em; }
.spot:hover { background: rgba(255, 255, 255, .08); }
.spot.tie { border-color: #4dff8f; }
.history { display: flex; flex-wrap: wrap; gap: 4px; }
.history span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font: 700 12px var(--body); color: #fff; }
.h-player { background: #2f7de0; } .h-banker { background: #d8344d; } .h-tie { background: #14a38a; }
@keyframes vp-pop { 50% { transform: scale(1.1); } }
/* phones: the table goes above the controls so you see the cards without scrolling */
@media (max-width: 820px) {
  .gwrap > .felt-box, .gwrap > .vp-board, .gwrap > .scratch-board, .gwrap > .bingo-board, .gwrap > .track-board { order: -1; min-height: 0; }
  .felt-box { gap: 10px; }
}