/* Raven Quay — game tables. Loaded on game pages only. */

.rq-stage > div { width: 100%; }
.rq-stage-msg {
  min-height: 2.6em; margin: var(--rq-4) auto 0; max-width: 60ch; text-align: center; color: var(--rq-ink);
  font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.rq-stage-msg[data-tone="up"] { color: var(--rq-good); }
.rq-stage-msg[data-tone="part"] { color: var(--rq-amber-hi); }
.rq-stage-msg[data-tone="none"] { color: var(--rq-muted); }
.rq-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(7, 12, 23, .75); border: 1px solid var(--rq-line-2); }
.rq-seg button { height: 34px; padding: 0 var(--rq-4); border: 0; border-radius: 999px; background: none; color: var(--rq-muted); font-weight: 700; font-size: .88rem; transition: background-color .16s, color .16s; }
.rq-seg button[aria-checked="true"] { background: var(--rq-ink); color: var(--rq-bg); }
.rq-seg.is-locked { opacity: .6; pointer-events: none; }
.rq-mini-select { display: inline-flex; align-items: center; gap: var(--rq-2); font-size: .85rem; color: var(--rq-dim); font-weight: 700; }

/* ---------- reels ---------- */

.rq-reels { display: grid; justify-items: center; }
.rq-reels-frame {
  width: min(100%, 720px); padding: 12px; border-radius: 26px;
  background: linear-gradient(180deg, #2b3c62, #121d33 40%, #0c1426); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 0 4px rgba(0, 0, 0, .25), 0 0 70px -30px var(--hue);
}
.rq-reels--3 .rq-reels-frame { width: min(100%, 460px); }
.rq-reels-window { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rq-reels--3 .rq-reels-window { grid-template-columns: repeat(3, 1fr); }
.rq-reel { position: relative; aspect-ratio: 1 / 3; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 60% at 50% 50%, #1d2c4b, #0a1222); box-shadow: inset 0 10px 18px -8px rgba(0, 0, 0, .8), inset 0 -10px 18px -8px rgba(0, 0, 0, .8); }
.rq-strip { display: flex; flex-direction: column; will-change: transform; }
.rq-cell { flex: none; aspect-ratio: 1; display: grid; place-items: center; padding: 8%; position: relative; }
.rq-cell img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); transition: transform .25s var(--rq-ease); }
.rq-reels.has-win .rq-cell:not(.is-win) img { opacity: .4; transition: opacity .25s; }
.rq-cell.is-win::before { content: ""; position: absolute; inset: 6%; border-radius: 14px; background: radial-gradient(circle, rgba(245, 181, 68, .35), transparent 70%); box-shadow: 0 0 0 2px var(--rq-amber); }
.rq-cell.is-win img { animation: rq-throb .7s var(--rq-ease) 2; }
@keyframes rq-throb { 50% { transform: scale(1.1); } }
.rq-cell.is-held::after { content: ""; position: absolute; inset: 4%; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--rq-glass), 0 0 18px rgba(61, 217, 193, .45); }
.rq-reel.is-expanded { box-shadow: inset 0 0 0 2px var(--rq-amber), 0 0 28px rgba(245, 181, 68, .5); }
.rq-reels.in-bonus .rq-reels-frame { background: linear-gradient(180deg, #5b3a8a, #23163e 40%, #120c24); }
.rq-reels-banner { margin: var(--rq-3) 0 0; padding: 6px var(--rq-4); border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #ec4899); color: #fff; font-weight: 800; font-size: .9rem; }
.rq-reels-msg { display: grid; justify-items: center; gap: 2px; min-height: 3.2em; margin-top: var(--rq-3); text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.rq-reels-msg b { font-size: 1.1rem; }
.rq-reels-msg span { color: var(--rq-muted); font-size: .88rem; }
.rq-reels-msg[data-tone="up"] b { color: var(--rq-good); }
.rq-reels-msg[data-tone="part"] b { color: var(--rq-amber-hi); }
.rq-reels-msg[data-tone="none"] b { color: var(--rq-muted); }

/* ---------- helm wheel ---------- */

.rq-helmwheel { position: relative; display: grid; justify-items: center; }
.rq-helmwheel-disc { width: min(380px, 80vw); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.rq-helmwheel-spin { transform-origin: 0 0; transform-box: view-box; }
.rq-helmwheel text { font: 800 9px var(--rq-sans); text-anchor: middle; dominant-baseline: middle; }
.rq-helmwheel text.is-mult { fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .45); stroke-width: 2px; }
.rq-helmwheel text.is-blank { fill: #4a5f88; font-size: 14px; }
.rq-helmwheel-hub { fill: #6b4a1f; stroke: var(--rq-amber); stroke-width: 4; }
.rq-helmwheel-pointer { position: absolute; top: -6px; left: 50%; margin-left: -13px; border: 13px solid transparent; border-top: 22px solid var(--rq-amber); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)); }

/* ---------- scratch ---------- */

.rq-scratch { display: grid; justify-items: center; }
.rq-scratch-card { position: relative; width: min(100%, 440px); padding: 14px; border-radius: 22px; background: linear-gradient(160deg, #f4e7c8, #e2c98f); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); }
.rq-scratch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-height: 300px; }
.rq-shell { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: #fff8e7; color: #333; }
.rq-shell svg { width: 52px; height: 52px; }
.rq-shell span { font-size: .72rem; font-weight: 800; color: #3b2f1a; }
.rq-shell.is-match { background: #ffe9a8; box-shadow: 0 0 0 3px #e7a21a; animation: rq-throb .6s var(--rq-ease) 2; }
.rq-scratch-foil { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 14px; touch-action: none; cursor: crosshair; }

/* ---------- drop ---------- */

.rq-drop { display: grid; justify-items: center; }
.rq-drop-board { position: relative; width: min(100%, 560px); aspect-ratio: 1 / .92; border-radius: 22px; background: radial-gradient(100% 80% at 50% 0%, rgba(251, 146, 60, .18), rgba(7, 12, 23, .85)); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.rq-peg { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe8b8, #c9902f 60%, #6b4a1f); box-shadow: 0 0 6px rgba(245, 181, 68, .4); }
.rq-drop-slots { position: absolute; bottom: 10px; display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
.rq-drop-slots span { display: grid; place-items: center; height: 30px; border-radius: 7px; font: 800 .66rem var(--rq-sans); color: #1b1305; background: hsl(calc(40 - var(--h, 0) * 8) 90% 60%); }
.rq-drop-slots span[data-heat="6"] { background: #f07a72; }
.rq-drop-slots span[data-heat="5"] { background: #f4935a; }
.rq-drop-slots span[data-heat="4"] { background: #f5a94a; }
.rq-drop-slots span[data-heat="3"] { background: #f5b544; }
.rq-drop-slots span[data-heat="2"] { background: #d8c25a; }
.rq-drop-slots span[data-heat="1"] { background: #9fd08a; }
.rq-drop-slots span[data-heat="0"] { background: #6fd9c4; }
.rq-drop-slots span.is-hit { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; transform: translateY(-3px); transition: transform .15s var(--rq-ease); }
.rq-drop-ball { position: absolute; top: 0; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d0, #ff9f43 55%, #d9480f); box-shadow: 0 0 14px rgba(255, 159, 67, .9); }

/* ---------- crates ---------- */

.rq-hold { display: grid; justify-items: center; }
.rq-hold-grid { width: min(100%, 470px); }
.rq-hold-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rq-crate {
  aspect-ratio: 1; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .4);
  background: repeating-linear-gradient(90deg, #7a5530 0 6px, #6b4826 6px 7px), #6b4826;
  box-shadow: inset 0 0 0 3px rgba(255, 220, 160, .18), 0 6px 12px -6px rgba(0, 0, 0, .8);
  transition: transform .14s var(--rq-ease), filter .16s;
}
.rq-crate:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.rq-crate:active:not(:disabled) { transform: scale(.94); }
.rq-crate:disabled:not(.is-sound):not(.is-leak) { opacity: .75; cursor: default; }
.rq-crate.is-sound { background: radial-gradient(circle, #5ef0d6 0 18%, #127a6a 60%, #0b3f37); animation: rq-throb .3s var(--rq-ease); }
.rq-crate.is-leak { background: radial-gradient(circle, #9ec5ff 0 12%, #1f4f9a 55%, #0a2550); animation: rq-throb .3s var(--rq-ease); }
.rq-hold-meter { margin: var(--rq-4) 0 0; color: var(--rq-muted); text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.rq-hold-meter b { color: var(--rq-ink); }

/* ---------- dice ---------- */

.rq-dice { display: grid; justify-items: center; gap: var(--rq-4); width: min(100%, 560px); margin: 0 auto; }
.rq-dice-face { display: grid; justify-items: center; }
.rq-dice-roll { font: 700 clamp(3.4rem, 2rem + 6vw, 5.4rem)/1 var(--rq-sans); font-variant-numeric: tabular-nums; text-shadow: 0 6px 22px rgba(0, 0, 0, .8); }
.rq-dice-sub { color: var(--rq-muted); font-weight: 600; }
.rq-dice-track { position: relative; width: 100%; container-type: inline-size; padding: 10px 0; }
.rq-dice-track input { width: 100%; appearance: none; -webkit-appearance: none; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--lo) 0 var(--mark), var(--hi) var(--mark) 100%); }
.rq-dice[data-mode="over"] { --lo: #3a1f2a; --hi: #2fbf86; }
.rq-dice[data-mode="under"] { --lo: #2fbf86; --hi: #3a1f2a; }
.rq-dice-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rq-ink); border: 4px solid var(--rq-amber); cursor: grab; }
.rq-dice-track input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--rq-ink); border: 4px solid var(--rq-amber); cursor: grab; }
.rq-dice-pin { position: absolute; top: -6px; left: 0; width: 4px; height: 36px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; transition: transform .3s var(--rq-ease); }
.rq-dice-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rq-3); width: 100%; }
.rq-dice-read div { display: grid; justify-items: center; padding: var(--rq-3); border-radius: var(--rq-r); background: rgba(7, 12, 23, .7); border: 1px solid var(--rq-line); }
.rq-dice-read span { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rq-dim); font-weight: 700; }
.rq-dice-read b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ---------- cards (hi-lo, blackjack) ---------- */

.rq-card {
  position: relative; display: grid; place-items: center; width: 120px; aspect-ratio: 5 / 7; border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #eef1f6); color: #10172a; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .9);
}
.rq-card--red { color: #c0262d; }
.rq-card--back { background: repeating-linear-gradient(45deg, #1f3b63 0 8px, #19304f 8px 16px); border: 3px solid #f2e3c0; }
.rq-card-r { position: absolute; top: 8px; left: 10px; font: 800 1.4rem var(--rq-serif); }
.rq-card-s { font-size: 3rem; line-height: 1; }
.rq-card.is-flip { animation: rq-flip .28s var(--rq-ease); }
@keyframes rq-flip { from { transform: rotateY(70deg) scale(.95); opacity: .3; } }
.rq-card--sm { width: 76px; }
.rq-card--sm .rq-card-r { font-size: 1.05rem; top: 5px; left: 7px; }
.rq-card--sm .rq-card-s { font-size: 2rem; }
.rq-hilo { display: grid; justify-items: center; }
.rq-hilo-table { display: grid; justify-items: center; gap: var(--rq-4); }
.rq-hilo-trail { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; max-width: 520px; }
.rq-chipcard { padding: 3px 8px; border-radius: 6px; background: #f3f5f9; color: #10172a; font-weight: 800; font-size: .85rem; }
.rq-chipcard--red { color: #c0262d; }
.rq-hilo-run { margin: var(--rq-4) 0 0; color: var(--rq-muted); text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.rq-hilo-run b { color: var(--rq-ink); }
.rq-bj { display: grid; gap: var(--rq-4); width: min(100%, 680px); margin: 0 auto; }
.rq-bj-row { display: grid; justify-items: center; gap: var(--rq-2); }
.rq-bj-row[data-hands] { grid-auto-flow: column; justify-content: center; gap: var(--rq-6); }
.rq-bj-label { margin: 0; color: var(--rq-muted); font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.rq-bj-label b { color: var(--rq-ink); margin-left: 4px; }
.rq-bj-label small { color: var(--rq-dim); margin-left: 6px; }
.rq-bj-hand { display: flex; justify-content: center; min-height: 106px; }
.rq-bj-hand .rq-card + .rq-card { margin-left: -28px; }
.rq-bj-handwrap { display: grid; justify-items: center; gap: var(--rq-2); padding: var(--rq-2); border-radius: var(--rq-r); }
.rq-bj-handwrap.is-active { box-shadow: 0 0 0 2px var(--rq-amber); background: rgba(245, 181, 68, .08); }
.rq-bj-felt { justify-self: center; padding: 6px var(--rq-5); border-radius: 999px; border: 1px solid rgba(242, 227, 192, .4); color: #f2e3c0; font: italic 600 .92rem var(--rq-serif); background: rgba(22, 101, 52, .35); }

/* ---------- keno ---------- */

.rq-keno { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--rq-4); width: min(100%, 760px); margin: 0 auto; align-items: start; }
.rq-keno-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.rq-ball {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: radial-gradient(circle at 35% 30%, rgba(124, 225, 210, .35), rgba(13, 60, 70, .9));
  color: #dff7f2; font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; transition: transform .12s var(--rq-ease), background-color .15s;
}
.rq-ball:hover { transform: scale(1.06); }
.rq-ball[aria-pressed="true"] { background: radial-gradient(circle at 35% 30%, #ffe2a6, var(--rq-amber) 60%, #b7741a); color: var(--rq-amber-ink); }
.rq-ball.is-drawn { box-shadow: 0 0 0 3px #7cb4ff; }
.rq-ball.is-hit { box-shadow: 0 0 0 3px var(--rq-good), 0 0 16px var(--rq-good); animation: rq-throb .4s var(--rq-ease); }
.rq-keno-side { padding: var(--rq-3); border-radius: var(--rq-r); background: rgba(7, 12, 23, .8); border: 1px solid var(--rq-line); }
.rq-keno-count { margin: 0 0 var(--rq-2); color: var(--rq-muted); }
.rq-keno-count b { color: var(--rq-ink); font-size: 1.3rem; }
.rq-keno-pays { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.rq-keno-pays li { display: flex; justify-content: space-between; gap: var(--rq-2); padding: 4px 6px; border-radius: 6px; background: var(--rq-surface-2); }
.rq-keno .rq-stage-msg { grid-column: 1 / -1; }

/* ---------- roulette ---------- */

.rq-roul { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--rq-5); align-items: center; width: 100%; }
.rq-roul-wheel { position: relative; display: grid; justify-items: center; gap: var(--rq-3); }
.rq-roul-wheel svg { width: 100%; max-width: 250px; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .7)); }
.rq-roul-spin { transform-origin: 0 0; transform-box: view-box; }
.rq-roul-wheel text { font: 700 7px var(--rq-sans); fill: #fff; text-anchor: middle; dominant-baseline: middle; }
.rq-roul-hub { fill: #3a2410; stroke: #c99a3b; stroke-width: 3; }
.rq-roul-ball { position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d7dbe4); box-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.rq-roul-result { display: grid; justify-items: center; gap: 4px; margin: 0; font-size: .78rem; color: var(--rq-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rq-roul-result [data-hist] { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rq-roul-result b { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 6px; font-size: .8rem; color: #fff; letter-spacing: 0; }
.rq-roul-result .is-red { background: #b91c1c; }
.rq-roul-result .is-black { background: #111827; border: 1px solid #374151; }
.rq-roul-result .is-zero { background: #138a5b; }
.rq-roul-table { display: grid; grid-template-columns: 1.1fr repeat(12, 1fr) 1.3fr; grid-template-rows: repeat(3, 40px) 36px 36px; gap: 3px; padding: 10px; border-radius: 16px; background: #0f5132; border: 2px solid #c99a3b; }
.rq-spot { position: relative; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; color: #fff; font-weight: 800; font-size: .8rem; background: transparent; padding: 0; transition: filter .12s; }
.rq-spot:hover { filter: brightness(1.25); }
.rq-spot--zero { grid-column: 1; grid-row: 1 / span 3; background: #138a5b; }
.rq-spot--red { background: #b91c1c; }
.rq-spot--black { background: #111827; }
.rq-spot--col, .rq-spot--out { background: rgba(0, 0, 0, .2); font-size: .74rem; }
.rq-spot--red.rq-spot--out { background: #b91c1c; }
.rq-spot--black.rq-spot--out { background: #111827; }
.rq-spot.is-hit { box-shadow: 0 0 0 2px var(--rq-amber-hi), 0 0 12px var(--rq-amber); }
.rq-spot [data-chip] { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 3px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--rq-amber); color: var(--rq-amber-ink); border: 2px dashed #fff8; font-style: normal; font-size: .62rem; font-weight: 900; box-shadow: 0 3px 6px rgba(0, 0, 0, .6); pointer-events: none; }
.rq-roul .rq-stage-msg { grid-column: 1 / -1; }
.rq-roul-total { margin: 0; font-weight: 700; color: var(--rq-ink); white-space: nowrap; }

@media (max-width: 900px) {
  .rq-reels-window { gap: 5px; }
  .rq-reels-frame { padding: 8px; border-radius: 18px; }
  .rq-reel { border-radius: 10px; }
  .rq-keno { grid-template-columns: 1fr; }
  .rq-keno-board { grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .rq-ball { font-size: .78rem; }
  .rq-roul { grid-template-columns: 1fr; }
  .rq-roul-wheel svg { max-width: 200px; }
  .rq-roul-table { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-auto-rows: 34px; }
  .rq-roul-table .rq-spot { grid-column: auto !important; grid-row: auto !important; }
  .rq-roul-table .rq-spot--zero { grid-column: 1 / -1 !important; }
  .rq-card { width: 96px; }
  .rq-card--sm { width: 62px; }
  .rq-bj-row[data-hands] { grid-auto-flow: row; }
  .rq-scratch-grid { min-height: 240px; }
  .rq-shell svg { width: 40px; height: 40px; }
}
@media (max-width: 900px) {
  /* columns of the table read left to right on phones: 1 2 3, 4 5 6 … */
  .rq-roul-table { direction: rtl; }
  .rq-roul-table .rq-spot { direction: ltr; }
}