/* Player side. Single deliberate look: night-time reef, gold machine, neon buttons like the Orion family's game pages. */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, p, form { margin: 0; padding: 0; }
button, input { font: inherit; }
:root {
  --deep: #04121f;
  --sea: #07304a;
  --teal: #0fa3b1;
  --aqua: #39e6ff;
  --gold: #ffc42e;
  --gold-dark: #b86b00;
  --coral: #ff5d3a;
  --ink: #eaf8ff;
  --cell: min(25vw, 15.5dvh, 150px);
  /* The notch, the rounded corners and the home bar. Zero on screens that have none. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}
html { background: var(--deep); color-scheme: dark; }
body.game {
  min-height: 100dvh;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Trebuchet MS", Verdana, "Segoe UI", sans-serif;
  background:
    radial-gradient(120% 70% at 50% -10%, #0f6a86 0%, transparent 60%),
    radial-gradient(90% 50% at 15% 105%, #123a6b 0%, transparent 60%),
    radial-gradient(90% 50% at 90% 110%, #5b1d6e 0%, transparent 60%),
    var(--deep);
}
.symbols { position: absolute; width: 0; height: 0; }
.game__sea { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bubble { position: absolute; bottom: -24px; border: 1px solid rgba(180, 240, 255, .55); border-radius: 50%; background: rgba(120, 220, 255, .08); animation: rise 16s linear infinite; }
.bubble--1 { left: 6%; width: 12px; height: 12px; animation-delay: -1s; }
.bubble--2 { left: 14%; width: 22px; height: 22px; animation-delay: -6s; animation-duration: 21s; }
.bubble--3 { left: 23%; width: 9px; height: 9px; animation-delay: -11s; }
.bubble--4 { left: 33%; width: 16px; height: 16px; animation-delay: -3s; animation-duration: 19s; }
.bubble--5 { left: 44%; width: 10px; height: 10px; animation-delay: -14s; }
.bubble--6 { left: 52%; width: 24px; height: 24px; animation-delay: -8s; animation-duration: 24s; }
.bubble--7 { left: 61%; width: 11px; height: 11px; animation-delay: -2s; }
.bubble--8 { left: 70%; width: 18px; height: 18px; animation-delay: -12s; animation-duration: 20s; }
.bubble--9 { left: 78%; width: 9px; height: 9px; animation-delay: -5s; }
.bubble--10 { left: 86%; width: 20px; height: 20px; animation-delay: -15s; animation-duration: 23s; }
.bubble--11 { left: 92%; width: 12px; height: 12px; animation-delay: -9s; }
.bubble--12 { left: 97%; width: 8px; height: 8px; animation-delay: -4s; }
@keyframes rise { to { transform: translateY(-110dvh) translateX(14px); opacity: .1; } }

.logo { display: flex; flex-direction: column; align-items: center; font-size: clamp(52px, 15vw, 104px); font-weight: 900; line-height: .95; letter-spacing: .02em; text-transform: uppercase; text-align: center; filter: drop-shadow(0 4px 0 #063a55) drop-shadow(0 0 18px rgba(57, 230, 255, .55)); }
.logo span { background: linear-gradient(#fff 8%, var(--aqua) 48%, #1277c9 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo span + span { background-image: linear-gradient(#fff6c2 8%, var(--gold) 50%, var(--coral) 95%); }
.logo--small { font-size: clamp(34px, 8vw, 54px); }
.brand img { display: block; width: min(320px, 76vw); height: auto; filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .6)); }
.brand--small img { width: min(340px, 78vw); }

.landing { position: relative; min-height: calc(100dvh - var(--sat) - var(--sab)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 24px 16px; }
.neon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 58px; padding: 10px 34px; border: 0; color: #fff; background: linear-gradient(#27c7ff, #0b5fd6); font-size: 22px; font-weight: 900; letter-spacing: .04em; text-decoration: none; cursor: pointer; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.neon-btn--play { min-width: 240px; background: linear-gradient(#ffc42e, #ff5d3a 70%); text-shadow: 0 2px 0 rgba(120, 30, 0, .55); }
.neon-btn:hover, .neon-btn:focus-visible { filter: brightness(1.12); }

.sign-in { width: min(340px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 2px solid rgba(57, 230, 255, .45); border-radius: 16px; background: rgba(4, 18, 31, .82); box-shadow: 0 0 26px rgba(57, 230, 255, .18); }
.sign-in label { font-weight: 700; color: var(--aqua); }
.sign-in input { height: 46px; margin-bottom: 8px; padding: 0 12px; border: 1px solid #2e6f8c; border-radius: 8px; color: #fff; background: #082238; font-size: 16px; }
.sign-in input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sign-in__error { color: #ff9c86; font-size: 14px; }
.sign-in .neon-btn { width: 100%; margin-top: 8px; }

.hud { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: rgba(2, 10, 19, .72); border-bottom: 1px solid rgba(57, 230, 255, .28); }
.hud__who { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: #a9d8ea; }
.hud__who strong { overflow: hidden; color: #fff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.hud__credit { display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 3px 18px; border: 1px solid var(--gold); border-radius: 22px; background: #0a2133; font-variant-numeric: tabular-nums; }
.hud__credit span { color: #ffdf8a; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.hud__credit strong { color: var(--gold); font-size: 20px; line-height: 1.1; }
.hud__btn { min-height: 38px; padding: 6px 14px; border: 1px solid var(--aqua); border-radius: 8px; color: var(--ink); background: rgba(15, 163, 177, .2); font-weight: 700; cursor: pointer; }
.hud__btn:disabled { opacity: .5; cursor: default; }
.hud__btn[aria-pressed="false"] { border-color: #6f8fa0; color: #a9d8ea; background: rgba(2, 16, 32, .6); }

.lobby { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 16px 32px; }
.tiles { width: 100%; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; gap: 16px; }
.tile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px; border: 3px solid var(--gold); border-radius: 18px; color: #fff; background: linear-gradient(160deg, #0b4d6b, #122a63 60%, #471a66); box-shadow: 0 0 26px rgba(255, 196, 46, .32); text-decoration: none; transition: transform .15s ease; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); }
.tile__art { display: flex; justify-content: center; gap: 6px; }
.tile__art { align-items: center; }
.tile__art svg { width: 66px; height: 66px; }
.tile__art .tile__big { width: 92px; height: 92px; }
.tile--fish { background: linear-gradient(160deg, #0a7f8f, #0b3f7d 60%, #0a1f5c); box-shadow: 0 0 26px rgba(57, 230, 255, .4); border-color: var(--aqua); }
.tile--keno { background: linear-gradient(160deg, #4a2a9c, #1f1a63 60%, #120d3f); border-color: #b9a2ff; box-shadow: 0 0 22px rgba(185, 162, 255, .35); }
.cards { width: 100%; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(42vw, 200px), 225px)); justify-content: center; gap: 16px; }
.card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: linear-gradient(160deg, #0b4d6b, #122a63 60%, #471a66); box-shadow: 0 0 0 2px #ffe9a8, 0 0 0 5px #b86b00, 0 0 0 7px #ffc42e, 0 10px 26px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 196, 46, .32); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.card--fish { box-shadow: 0 0 0 2px #dffaff, 0 0 0 5px #0f7f8f, 0 0 0 7px var(--aqua), 0 10px 26px rgba(0, 0, 0, .55), 0 0 26px rgba(57, 230, 255, .35); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover, .card:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 2px #fff, 0 0 0 5px #b86b00, 0 0 0 7px #ffc42e, 0 14px 30px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 196, 46, .7); outline: none; }
.card:hover img, .card:focus-visible img { transform: scale(1.06); }
.card__shine { position: absolute; top: -30%; bottom: -30%; left: -60%; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: rotate(12deg); animation: shine 5.5s ease-in-out infinite; pointer-events: none; }
.card:nth-child(2n) .card__shine { animation-delay: -2s; }
.card:nth-child(3n) .card__shine { animation-delay: -3.6s; }
@keyframes shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.card__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 52px 8px 14px; background: linear-gradient(transparent, rgba(4, 8, 28, .9) 62%); }
.card__play { min-width: 62%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 20px; border-radius: 999px; background: linear-gradient(#fff6b8, #ffc42e 40%, #ff7a1f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(150, 50, 0, .55), 0 0 0 2px #7a3a00, 0 6px 14px rgba(0, 0, 0, .55), 0 0 20px rgba(255, 180, 40, .6); color: #4a1f00; font-family: Impact, "Arial Black", "Trebuchet MS", sans-serif; font-size: clamp(15px, 1.7vw, 20px); letter-spacing: .1em; text-transform: uppercase; transition: transform .16s ease, box-shadow .16s ease; }
.card__play::before { content: ""; border-style: solid; border-width: .42em 0 .42em .68em; border-color: transparent transparent transparent #4a1f00; }
.card:hover .card__play, .card:focus-visible .card__play { transform: scale(1.08); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -3px 0 rgba(150, 50, 0, .55), 0 0 0 2px #7a3a00, 0 6px 14px rgba(0, 0, 0, .55), 0 0 32px rgba(255, 200, 70, .95); }
.card:active .card__play { transform: scale(.97); }
.card__title { font-family: Impact, "Arial Black", "Trebuchet MS", sans-serif; font-size: clamp(21px, 2.7vw, 31px); font-weight: 900; line-height: 1.02; letter-spacing: .02em; text-align: center; text-transform: uppercase; background: linear-gradient(#fffbe0 12%, #ffd96b 46%, #e8901a 86%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .6px rgba(90, 40, 0, .85); filter: drop-shadow(0 2px 0 #4a2200) drop-shadow(0 0 7px rgba(0, 0, 0, .9)); }
.lobby__group { width: 100%; max-width: 1180px; text-align: center; color: var(--aqua); font-size: 19px; text-transform: uppercase; letter-spacing: .1em; }
.slot--lantern-fortune .machine { background: linear-gradient(145deg, #ff8a6b, #e8261e 34%, #7a0f0a 72%, #ffb36b); }
.slot--orchard-spin .machine { background: linear-gradient(145deg, #c9f29b, #5fbf45 34%, #2c6e1f 72%, #e6f7a8); }
.keno { position: relative; }
.hud__actions { display: flex; align-items: center; gap: 6px; }
.hud__actions .hud__btn { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.sign-in__title { color: var(--gold); font-size: 22px; text-align: center; }
.sign-in__note { color: #ffe9b0; font-size: 14px; text-align: center; }
.sign-in__hint { margin-top: -6px; color: #a9d8ea; font-size: 12px; }
.sign-in__link { color: var(--aqua); text-align: center; }
.sign-in textarea { min-height: 110px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #2e6f8c; border-radius: 8px; color: #fff; background: #082238; font: inherit; resize: vertical; }
.sign-in textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sign-in__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.report { position: relative; width: min(460px, 100%); }
.wheel { position: relative; }
.wheel__stage { position: relative; width: min(88vw, max(190px, calc(100dvh - var(--sat) - var(--sab) - 330px)), 480px); aspect-ratio: 1; }
.wheel__stage canvas { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 0 34px rgba(255, 196, 46, .55); }
.wheel__pointer { position: absolute; top: -8px; left: 50%; z-index: 2; width: 34px; height: 46px; transform: translateX(-50%); background: linear-gradient(#ff5d3a, #a81f0a); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.keno__main { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 10px 14px; }
.keno__hint { color: #bfe9f7; font-size: 15px; }
.keno__board { width: min(100%, 720px, 130dvh); display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; padding: 8px; border: 2px solid #b9a2ff; border-radius: 14px; background: rgba(8, 6, 40, .82); }
.ball { aspect-ratio: 1.45; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #3f3a7a; border-radius: 8px; color: #dfe6ff; background: #17134f; font-size: clamp(12px, 2.6vw, 17px); font-weight: 700; cursor: pointer; }
.ball.is-picked { color: #1a1000; background: linear-gradient(#ffe07a, #ffc42e); border-color: #fff0a0; }
.ball.is-drawn { background: #39418f; color: #fff; }
.ball.is-picked.is-drawn { color: #fff; background: linear-gradient(#2bd49a, #0d7a57); }
.ball.is-hit { outline: 3px solid var(--gold); outline-offset: -1px; }
.ball:focus-visible { outline: 3px solid var(--aqua); }
.keno-pay { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(57, 230, 255, .2); font-size: 14px; }
.keno-pay strong { color: var(--gold); }
.tile__name { font-size: 28px; font-weight: 900; color: var(--gold); text-shadow: 0 2px 0 #5c3200; }
.tile__play { padding: 7px 32px; border-radius: 20px; background: linear-gradient(#ffc42e, #ff5d3a 70%); font-weight: 900; letter-spacing: .05em; }

.reef { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 10px 14px; }
.reef__title { color: var(--gold); font-size: clamp(22px, 4.6dvh, 34px); font-weight: 900; text-shadow: 0 2px 0 #5c3200, 0 0 14px rgba(255, 196, 46, .5); }
.machine { padding: 10px; border-radius: 18px; background: linear-gradient(145deg, #ffe07a, var(--gold) 34%, var(--gold-dark) 72%, #ffd65a); box-shadow: 0 0 34px rgba(255, 196, 46, .42), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.machine__reels { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #021020; }
.reel { width: var(--cell); height: calc(var(--cell) * 3); overflow: hidden; border-radius: 6px; background: linear-gradient(#0c3a57, #083048 50%, #0c3a57); }
.reel__strip { display: flex; flex-direction: column; will-change: transform; }
.cell { flex: none; width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; }
.cell svg { width: 80%; height: 80%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45)); }
.cell.is-win svg { animation: glow .75s ease-in-out infinite alternate; }
@keyframes glow { to { transform: scale(1.12); filter: drop-shadow(0 0 12px var(--gold)) drop-shadow(0 0 4px #fff); } }
.machine__lines { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); pointer-events: none; }
.machine__lines polyline { fill: none; stroke: var(--gold); stroke-width: 5; vector-effect: non-scaling-stroke; opacity: 0; }
.machine__lines polyline.is-win { opacity: .85; }
.reef__win { min-height: 34px; color: #bfe9f7; font-size: 19px; font-weight: 700; text-align: center; }
.reef__win.is-loss { color: #ffb3a6; }
.reef__win.is-even { color: #ffe9b0; }
.machine__lines polyline.is-paid { stroke: #bfe9f7; opacity: .35; }
.reef__win.is-win { color: var(--gold); font-size: 22px; font-weight: 900; text-shadow: 0 0 12px rgba(255, 196, 46, .7); }
.controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.bet { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid rgba(57, 230, 255, .5); border-radius: 14px; background: rgba(2, 16, 32, .75); }
.bet__btn { width: 46px; height: 46px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(#27c7ff, #0b5fd6); font-size: 26px; font-weight: 900; cursor: pointer; }
.bet__btn:disabled { opacity: .4; cursor: default; }
.bet__value { display: flex; flex-direction: column; align-items: center; min-width: 74px; font-variant-numeric: tabular-nums; }
.bet__value span { color: #a9d8ea; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.bet__value strong { font-size: 20px; line-height: 1.1; }
.spin { min-width: 150px; min-height: 66px; padding: 8px 30px; border: 3px solid #ffe9a8; border-radius: 40px; color: #fff; background: linear-gradient(#ff8a3a, #e62f1e 75%); font-size: 26px; font-weight: 900; letter-spacing: .05em; text-shadow: 0 2px 0 rgba(90, 10, 0, .6); box-shadow: 0 4px 0 #8a1b0d, 0 0 18px rgba(255, 93, 58, .55); cursor: pointer; }
.spin:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a1b0d; }
.spin:disabled { filter: grayscale(.55); cursor: default; }
.hud__btn:focus-visible, .bet__btn:focus-visible, .spin:focus-visible, .tile:focus-visible, .neon-btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* Five reels: a column made for a phone held upright, centred on a computer. */
body.game--reels { --cell: min(calc((100vw - var(--sal) - var(--sar) - 52px) / 5), 14dvh, 104px); display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow-x: hidden; overflow-y: auto; }
body.game--reels > .jackpots { flex: none; width: min(100%, 720px); }
.rg { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rg__main { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 6px; padding: 6px 8px 8px; }
.rg__ladder { min-height: 30px; display: flex; align-items: center; gap: 6px; }
.rg__ladder span { min-width: 44px; padding: 3px 10px; border: 1px solid rgba(255, 196, 46, .4); border-radius: 999px; color: #d9c98f; background: rgba(4, 10, 28, .7); font-size: 15px; font-weight: 900; text-align: center; transition: transform .15s ease; }
.rg__ladder span.is-on { border-color: var(--gold); color: #3a1c00; background: linear-gradient(#fff3a6, var(--gold) 60%, #ff9a2e); transform: scale(1.12); box-shadow: 0 0 14px rgba(255, 196, 46, .75); }
.rg__machine { position: relative; padding: 7px; }
.rg__grid { position: relative; display: flex; gap: 3px; padding: 3px; overflow: hidden; border-radius: 10px; background: #021020; }
.rg__col { width: var(--cell); height: calc(var(--cell) * 4); overflow: hidden; border-radius: 6px; background: linear-gradient(#17204f, #0d1436 50%, #17204f); }
.rg .cell { position: relative; }
.rg .cell b { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; color: #fff; background: rgba(60, 20, 0, .82); font-size: max(11px, calc(var(--cell) * .19)); font-variant-numeric: tabular-nums; }
.rg.is-hold .cell:not(.is-held) { opacity: .28; }
.rg .cell.is-held svg { filter: drop-shadow(0 0 8px var(--gold)); }
.rg__hold { position: absolute; top: -14px; left: 50%; display: flex; align-items: center; gap: 8px; padding: 2px 12px; transform: translateX(-50%); border: 2px solid #fff3a6; border-radius: 999px; color: #fff; background: linear-gradient(#ff5d3a, #a81f0a); font-size: 13px; font-weight: 900; white-space: nowrap; }
.rg__hold[hidden] { display: none; }
.rg__hold strong { color: var(--gold); font-size: 18px; }
.spin.is-free { background: linear-gradient(#b44bff, #5a18c9 75%); box-shadow: 0 4px 0 #2e0a70, 0 0 18px rgba(180, 75, 255, .6); }
.rg--pharaoh-gold .machine { background: linear-gradient(145deg, #ffe9a8, #d9841e 34%, #6e3a08 72%, #ffd65a); }
.rg--lantern-riches .machine { background: linear-gradient(145deg, #ff8a6b, #e8261e 34%, #7a0f0a 72%, #ffb36b); }
.rg .pay-row { grid-template-columns: 54px 72px 1fr; font-size: 13px; }
.bigwin { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(2, 6, 18, .62); pointer-events: none; animation: bigwin-in .25s ease-out; }
.bigwin[hidden] { display: none; }
.bigwin span { font-family: Impact, "Arial Black", sans-serif; font-size: clamp(44px, 13vw, 92px); letter-spacing: .03em; background: linear-gradient(#fffbe0 12%, #ffd96b 46%, #e8901a 86%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #4a2200) drop-shadow(0 0 22px rgba(255, 196, 46, .85)); }
.bigwin strong { color: #fff; font-size: clamp(34px, 10vw, 64px); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 196, 46, .9); }
@keyframes bigwin-in { from { opacity: 0; transform: scale(.85); } }
.wins { width: 100%; max-width: 720px; overflow: hidden; border: 1px solid rgba(255, 196, 46, .4); border-radius: 10px; background: rgba(4, 10, 28, .72); }
.wins__track { display: flex; gap: 34px; width: max-content; padding: 6px 12px; animation: wins 34s linear infinite; font-size: 14px; white-space: nowrap; }
.wins b { color: var(--gold); }
@keyframes wins { to { transform: translateX(-50%); } }
.eye-box { position: relative; display: block; margin-bottom: 8px; }
.eye-box input { width: 100%; margin-bottom: 0; padding-right: 48px; }
.eye { position: absolute; top: 0; right: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; color: var(--aqua); background: none; cursor: pointer; }
.eye svg { width: 24px; height: 24px; fill: currentColor; }
.eye .eye__off { display: block; }
.eye.is-on .eye__off { display: none; }
.eye:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.start { width: min(340px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.start .neon-btn { width: 100%; min-width: 0; }
.start__app { gap: 10px; min-height: 52px; padding: 8px 18px; font-size: 16px; background: linear-gradient(#2a3b66, #0f1c3f); box-shadow: inset 0 0 0 2px rgba(57, 230, 255, .6); }
.start__app svg { flex: none; width: 24px; height: 24px; fill: currentColor; }
.get-app h2:target { color: var(--gold); }
.get-app .neon-btn { min-width: 0; padding: 10px 16px; font-size: 17px; }
.get-app { align-items: stretch; color: #d7f2fb; font-size: 15px; }
.get-app h2 { margin-top: 10px; color: var(--aqua); font-size: 17px; }
.get-app ol { margin: 0; padding-left: 22px; }
.get-app .neon-btn { margin-top: 0; }
.rg .controls { flex-wrap: nowrap; }
.rg .spin { min-width: 132px; padding: 8px 14px; white-space: nowrap; }

.pays { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: max(14px, var(--sat)) max(14px, var(--sar)) max(14px, var(--sab)) max(14px, var(--sal)); background: rgba(0, 6, 14, .72); }
.pays[hidden] { display: none; }
.pays__box { width: min(460px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border: 2px solid var(--gold); border-radius: 16px; background: #071b2e; }
.pays__box h2 { color: var(--gold); font-size: 24px; }
#max-win { color: var(--gold); font-weight: 700; }
.pays__box p { color: #bfe9f7; font-size: 14px; text-align: center; }
#pay-rows { width: 100%; }
.pay-row { display: grid; grid-template-columns: 54px 84px 1fr; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(57, 230, 255, .2); font-size: 14px; }
.pay-row .cell { width: 50px; height: 50px; }
body.game--table { --tw: calc(100vw - var(--sal) - var(--sar)); --th: calc(100dvh - var(--sat) - var(--sab)); height: 100dvh; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #020b14; }
body.game--table .game__sea { display: none; }
.table { position: relative; flex: none; width: min(var(--tw), calc(var(--th) * 16 / 9)); height: min(var(--th), calc(var(--tw) * 9 / 16)); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.table canvas#sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.table__top { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.table__top > * { pointer-events: auto; }
.table__right { display: flex; gap: 6px; }
.table .hud__btn { background: rgba(2, 16, 32, .68); }
.table__bet { position: absolute; left: 12px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid rgba(57, 230, 255, .5); border-radius: 14px; background: rgba(2, 16, 32, .72); }
.table__note { position: absolute; left: 50%; bottom: 96px; max-width: 80%; transform: translateX(-50%); color: #ffe066; font-weight: 700; text-align: center; text-shadow: 0 2px 4px #000; pointer-events: none; }
.table__turn { display: none; }
.fish-pays { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.fish-pay { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 6px; border-bottom: 1px solid rgba(57, 230, 255, .2); font-size: 13px; }
.fish-pay canvas { width: 72px; height: 44px; }
.fish-pay strong { color: var(--gold); font-size: 16px; }
@media (orientation: portrait) and (max-width: 700px) {
  .table__turn { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--gold); background: #04121f; font-size: 26px; font-weight: 900; text-align: center; }
}
@media (max-height: 460px) {
  .hud__credit { min-width: 96px; padding: 1px 12px; }
  .hud__credit strong { font-size: 16px; }
  .hud__btn { min-height: 30px; padding: 3px 9px; font-size: 13px; }
  .table .bet__btn { width: 34px; height: 34px; font-size: 20px; }
  .fish-pays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pays__box:has(.fish-pays) { width: min(780px, 100%); gap: 6px; padding: 10px 14px; }
  .pays__box:has(.fish-pays) h2 { font-size: 18px; }
  .pays__box:has(.fish-pays) p { font-size: 12px; }
  .pays__box .neon-btn { min-height: 40px; font-size: 16px; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 4px; }
  .card__title { font-size: 19px; }
  .card__foot { gap: 7px; padding: 40px 6px 11px; }
  .card__play { min-width: 74%; padding: 7px 14px; font-size: 14px; }
  .hud { padding: 6px 8px; gap: 6px; }
  .hud__credit { min-width: 84px; padding: 2px 10px; }
  .hud__credit strong { font-size: 16px; }
  .hud__actions .hud__btn { min-height: 30px; padding: 3px 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wins__track { animation: none; flex-wrap: wrap; width: auto; white-space: normal; }
  .bubble, .cell.is-win svg { animation: none; }
}

.jackpots { width: min(100%, 720px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.jackpots[hidden] { display: none; }
.jp { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 5px 4px; border: 1px solid var(--tone); border-radius: 10px; background: rgba(4, 10, 28, .82); box-shadow: 0 0 12px color-mix(in srgb, var(--tone) 45%, transparent); font-variant-numeric: tabular-nums; }
.jp span { color: var(--tone); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.jp strong { color: #fff; font-size: clamp(15px, 4vw, 22px); line-height: 1.15; }
.jp--grand { --tone: #ffc42e; }
.jp--major { --tone: #ff5fd2; }
.jp--minor { --tone: #39e6ff; }
.jp--mini { --tone: #7dffa8; }
.jackpots__note { margin-top: -12px; color: #a9d8ea; font-size: 13px; text-align: center; }
body:not(.game--table) > .jackpots { position: relative; margin: 0 auto; padding: 5px 8px 0; }
body:not(.game--table) > .jackpots .jp { flex-direction: row; justify-content: center; gap: 6px; padding: 2px 4px; }
body:not(.game--table) > .jackpots .jp strong { font-size: clamp(12px, 3vw, 15px); }
body:not(.game--table) > .jackpots .jp span { font-size: 9px; }
body.game--table > .jackpots { position: fixed; top: calc(var(--sat) + (var(--th) - min(var(--th), var(--tw) * 9 / 16)) / 2 + 56px); left: 50%; z-index: 5; width: min(46vw, 430px); transform: translateX(-50%); opacity: .86; pointer-events: none; }
body.game--table > .jackpots .jp { padding: 2px; }
body.game--table > .jackpots .jp strong { font-size: clamp(11px, 1.5vw, 15px); }
body.game--table > .jackpots .jp span { font-size: 9px; }

.perks { width: min(100%, 520px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.perk { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 62px; padding: 8px; border: 1px solid #ff5fd2; border-radius: 12px; color: #fff; background: linear-gradient(160deg, rgba(107, 47, 184, .75), rgba(4, 10, 28, .9)); cursor: pointer; }
.perk strong { color: var(--gold); font-size: 17px; }
.perk span { color: #d9c9ff; font-size: 13px; }
.perk.is-ready { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 196, 46, .6); }
.perk.is-ready span { color: #fff; font-weight: 700; }
.perk:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.perks__locked { max-width: 520px; color: #ffe9b0; font-size: 13px; text-align: center; }
.daily__stage { position: relative; flex: none; width: min(62vw, 34dvh, 260px); aspect-ratio: 1; }
.daily__stage canvas { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 0 24px rgba(255, 196, 46, .55); transition: transform 4.2s cubic-bezier(.12, .7, .1, 1); }
.pays__box .daily__result { min-height: 22px; color: var(--gold); font-size: 18px; font-weight: 900; }
.daily__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.daily__actions .neon-btn { min-width: 0; min-height: 46px; padding: 6px 18px; font-size: 18px; }
.daily__rules { width: 100%; margin: 0; padding: 0; list-style: none; color: #ffd9a8; font-size: 13px; text-align: left; }
.daily__rules li::before { content: "\2022  "; }
.daily__rules li.is-done { color: #7dffa8; }
.daily__rules li.is-done::before { content: "\2713  "; }
.daily__odds { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.daily__odds div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(57, 230, 255, .2); }
.daily__odds strong { color: var(--gold); }
.daily__odds span { color: #bfe9f7; }
.pays__box .neon-btn:disabled { opacity: .5; cursor: default; }
.jackpot { z-index: 30; }
.jackpot__box { box-shadow: 0 0 40px rgba(255, 196, 46, .6); }
.jackpot__score { color: var(--gold); font-size: clamp(38px, 10vw, 60px); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 196, 46, .7); }
@media (prefers-reduced-motion: reduce) { .daily__stage canvas { transition: none; } }
.spin.is-free { min-width: 150px; background: linear-gradient(#b26bff, #6b2fb8 75%); box-shadow: 0 4px 0 #3b1a6e, 0 0 22px rgba(178, 107, 255, .75); }

/* Short screens, so the play button is never off the bottom. Upright phones with little height get tighter spacing. */
@media (orientation: portrait) and (max-height: 680px) {
  :root { --cell: min(25vw, 13.5dvh, 150px); }
  .reef__title { font-size: 22px; }
  .reef, .keno__main { gap: 5px; }
  .spin { min-height: 54px; }
  .keno__board { width: min(100%, 720px, 112dvh); }
}

/* A phone held sideways: the board on the left, the win line and the buttons stacked on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --cell: min(18vw, calc((100dvh - var(--sat) - var(--sab) - 120px) / 3), 150px); }
  body.game--reels { --cell: min(14vw, calc((100dvh - var(--sat) - var(--sab) - 175px) / 4), 104px); }
  .reef__title { display: none; }
  .reef, .rg__main, .keno__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto); justify-items: center; align-content: center; align-items: center; column-gap: 14px; row-gap: 4px; padding: 4px 12px; }
  .reef > :is(.machine, .wheel__stage) { grid-column: 1; grid-row: 1 / span 2; }
  .rg__main > .rg__ladder { grid-column: 1; grid-row: 1; min-height: 24px; }
  .rg__main > .rg__machine { grid-column: 1; grid-row: 2; }
  .keno__main > .keno__hint { grid-column: 1; grid-row: 1; }
  .keno__main > .keno__board { grid-column: 1; grid-row: 2; width: min(100%, 720px, calc((100dvh - var(--sat) - var(--sab) - 150px) * 1.8)); }
  :is(.reef, .rg__main, .keno__main) > .reef__win { grid-column: 2; grid-row: 1; align-self: end; min-height: 28px; font-size: 16px; }
  :is(.reef, .rg__main, .keno__main) > .controls { grid-column: 2; grid-row: 2; align-self: start; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .keno__main > .controls { display: grid; grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .keno__main > .controls > :is(.bet, .spin) { grid-column: 1 / -1; }
  .spin, .rg .spin { min-width: 132px; min-height: 52px; font-size: 22px; }
  .bet__btn { width: 38px; height: 38px; }
  .wheel__stage { width: max(150px, calc(100dvh - var(--sat) - var(--sab) - 110px)); }
}

/* The narrowest phones: the bet box and SPIN share one row on the five-reel games, so each gives up a little width. */
@media (max-width: 360px) {
  .rg .controls { gap: 8px; }
  .rg .spin { min-width: 104px; padding: 8px 10px; font-size: 22px; }
  .bet__value { min-width: 60px; }
  .bet__btn { width: 40px; height: 40px; }
}

.start-about { width: min(420px, 100%); margin-top: 18px; text-align: center; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.5; }
.start-about h1 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #fff; }
.start-about p { margin: 0; }