/* Casino theme for the player site (1.1.0-mvp.6): dark navy and purple, gold calls to action.
   Loaded after base.css on player pages only; the admin panel keeps base.css. */
body.casino {
  --bg: #0d0b24; --fg: #f2f0ff; --muted: #b9b4d9; --accent: #ffcb2e; --accent-fg: #1a1406;
  --card: #1b1846; --line: #34307a; --ok: #7fe0a0; --err: #ff8f86; --warn: #ffd166;
  --panel: #241f5c; --panel-2: #2e2873;
  background: radial-gradient(1200px 500px at 50% -150px, #2a2170 0%, var(--bg) 60%) fixed, var(--bg);
  color-scheme: dark;
}
body.casino a { color: #ffd65c; }
body.casino .top { background: #0a0920; border-bottom: 1px solid var(--line); }
body.casino .brand { color: #ffffff; font-size: 1.15rem; letter-spacing: 0.02em; }
body.casino .top nav a { color: var(--fg); text-decoration: none; font-weight: 600; }
body.casino .top nav a:hover { color: #ffd65c; }
body.casino .top nav a.nav-join { background: var(--accent); color: var(--accent-fg); padding: 0 1rem; border-radius: 8px; }
body.casino footer { color: var(--muted); }
body.casino.wide main { max-width: 76rem; }
body.casino .card { background: var(--card); border-color: var(--line); }
body.casino input, body.casino select { background: #120f33; color: var(--fg); border-color: var(--line); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Category bar */
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 0 1rem; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #2c2366, #221a52); border: 1px solid #3d3488; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cats a { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 64px; padding: .6rem .8rem; color: #fff !important;
  text-decoration: none; font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; border-inline-start: 1px solid rgba(255, 255, 255, .09); }
.cats a:first-child { border-inline-start: 0; }
.cats .cat-ico { flex: none; color: #a9b8ff; }
.cats a:hover { background: rgba(255, 255, 255, .06); }
.cats a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #ffd65c !important; box-shadow: inset 0 -3px 0 #ffd65c; }
.cats a[aria-current="page"] .cat-ico { color: #ffd65c; }
.cats a:focus-visible { outline: 3px solid #ffd65c; outline-offset: -3px; }
@media (max-width: 720px) {
  .cats a { flex-direction: column; gap: .25rem; min-height: 68px; padding: .5rem .2rem; font-size: .74rem; line-height: 1.15; text-align: center; }
  .cats .cat-ico { width: 24px; height: 24px; }
}

/* Welcome banner */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem clamp(1rem, 4vw, 3rem); border-radius: 16px;
  background: linear-gradient(115deg, #1c1652 0%, #3a1f7a 55%, #6b1f6e 100%); border: 1px solid #4b3fa8; overflow: hidden; }
.hero h1 { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.1; color: #fff; letter-spacing: -0.01em; }
.hero p { margin: 0.25rem 0; color: #e6e1ff; font-size: 1.05rem; }
.hero-actions { margin-top: 1.25rem !important; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-art { width: clamp(120px, 22vw, 220px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); flex: 0 0 auto; }
.hero-balance { display: flex; flex-direction: column; }
.hero-balance strong { font-size: clamp(1.8rem, 5vw, 2.6rem); color: #ffd65c; font-variant-numeric: tabular-nums; }
.cta, .cta-2 { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6rem; border-radius: 999px; font-weight: 800; text-decoration: none; letter-spacing: 0.02em; }
.cta { background: var(--accent); color: var(--accent-fg) !important; box-shadow: 0 6px 18px rgba(255, 203, 46, 0.25); }
.cta:hover { background: #ffd95e; }
.cta-2 { border: 2px solid #fff; color: #fff !important; }

/* Shelves */
.shelf { margin-top: 2rem; }
.shelf h2 { font-size: 1.4rem; margin: 0 0 0.9rem; color: #fff; }
.shelf h2 .count { color: var(--muted); font-weight: 400; }
.shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
.game-search input { min-height: 44px; border-radius: 999px; padding: 0 1rem; border: 1px solid var(--line); width: min(18rem, 100%); }

/* Featured: large cards in a row that scrolls sideways on small screens */
.featured { list-style: none; margin: 0; padding: 0 0 0.5rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 14rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.featured li { scroll-snap-align: start; }
.feature-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem; border-radius: 14px; text-decoration: none; height: 100%;
  background: linear-gradient(180deg, var(--panel-2), var(--card)); border: 1px solid var(--line); color: var(--fg) !important; transition: transform 0.15s ease, border-color 0.15s ease; }
.feature-card:hover, .feature-card:focus-visible { transform: translateY(-3px); border-color: #ffd65c; }
.feature-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; }
.fc-name { font-weight: 800; font-size: 1.05rem; }
.fc-meta { color: var(--muted); font-size: 0.9rem; }
.fc-play { margin-top: auto; align-self: flex-start; background: var(--accent); color: var(--accent-fg); font-weight: 800; padding: 0.45rem 1.2rem; border-radius: 999px; }

/* All games: icon grid */
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1rem; }
.game-icon { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; text-decoration: none; color: var(--fg) !important; font-weight: 600; padding: 0.5rem; border-radius: 12px; }
.game-icon img { width: 100%; max-width: 120px; height: auto; aspect-ratio: 1; border-radius: 14px; transition: transform 0.15s ease; }
.game-icon:hover img, .game-icon:focus-visible img { transform: scale(1.05); }
.game-icon:hover, .game-icon:focus-visible { background: var(--panel); }
.helpline { margin-top: 2rem; }

@media (max-width: 40rem) {
  .hero { flex-direction: column-reverse; align-items: flex-start; padding: 1.5rem 1rem; }
  .hero-art { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .game-icon img { transition: none; }
  .feature-card:hover, .feature-card:focus-visible { transform: none; }
}

/* 1.2: Play for Real is locked; when the admin chooses "coming soon" it shows as a disabled label under the tile. */
.mode-soon { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted); text-align: center; }

/* 1.4.0: language menu in the header. */
body.casino .top { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.lang-menu { position: relative; margin-inline-start: auto; }
.lang-menu summary { display: flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); cursor: pointer; list-style: none; font-weight: 600; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: #ffd65c; }
.lang-menu summary:focus-visible { outline: 3px solid #ffd65c; outline-offset: 2px; }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: .35rem; list-style: none; min-width: 12rem;
  background: #14123a; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.lang-menu li a { display: block; padding: .55rem .75rem; border-radius: 6px; color: var(--fg) !important; text-decoration: none; }
.lang-menu li a:hover, .lang-menu li a:focus-visible { background: rgba(255, 255, 255, .08); }
.lang-menu li a[aria-current="true"] { color: #ffd65c !important; font-weight: 700; }

/* Scripts: system fonts that cover each language (no outside font services). */
:lang(zh) { font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
:lang(ja) { font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; }
:lang(ko) { font-family: system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif; }
:lang(ar) { font-family: system-ui, "Segoe UI", "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif; }