/* Dino Casino – shared look for lobby and game pages. Mirrors hub tokens (homepage.css). */
:root {
    --bg: #0b0b1a; --bg-2: #13132b; --text: #f1f5f9; --muted: #a3aec1;
    --gold: #ffd23f; --orange: #ff8a3d; --green: #24d17e; --red: #ff4d6d;
    --felt: #0f5a3a; --felt-2: #0a3f29;
    --stroke: rgba(255,255,255,.12); --glass: rgba(255,255,255,.06);
    color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.casino {
    margin: 0; min-height: 100vh; color: var(--text); -webkit-font-smoothing: antialiased;
    font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    background: radial-gradient(ellipse at 80% 0, rgba(255,210,63,.10), transparent 50%),
                radial-gradient(ellipse at 0 60%, rgba(91,43,146,.28), transparent 55%), var(--bg);
}
.casino button, .casino input, .casino select { font: inherit; }
.casino :is(button, a, input, select):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.casino a { color: inherit; }

/* Top bar */
.c-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; justify-content: space-between;
    padding: .8rem clamp(1rem, 4vw, 3rem); background: rgba(11,11,26,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--stroke); }
.c-brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 900; letter-spacing: .03em; white-space: nowrap; }
.c-brand b { color: var(--gold); }
.c-brand .dino { font-size: 1.5rem; }
.c-nav { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.c-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--stroke); font-weight: 750; white-space: nowrap; text-decoration: none; }
.c-pill small { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.c-pill.gold { color: var(--gold); border-color: rgba(255,210,63,.35); }
.c-pill.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.12); box-shadow: 0 0 22px rgba(255,210,63,.55); } }

.c-main { max-width: 1280px; margin: auto; padding: 1.6rem clamp(1rem, 4vw, 3rem) 3rem; }
.c-eyebrow { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 0 0 .5rem; }
.c-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; margin: 0 0 .4rem; letter-spacing: -.02em; }
.c-title span { color: var(--gold); }
.c-sub { color: var(--muted); margin: 0 0 1.5rem; line-height: 1.6; }
.c-panel { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid var(--stroke); border-radius: 18px; padding: 1.2rem; }
.c-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Lobby hero */
.c-hero { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,210,63,.25); padding: clamp(1.4rem, 4vw, 2.6rem);
    background: radial-gradient(circle at 85% 30%, rgba(255,210,63,.25), transparent 40%), linear-gradient(120deg, #1d1140, #0d1b3a 60%, #0a2a22); margin-bottom: 1.5rem; }
.c-hero::after { content: "🦖"; position: absolute; right: clamp(.5rem, 4vw, 3rem); bottom: -1.5rem; font-size: clamp(6rem, 16vw, 11rem); opacity: .9; filter: drop-shadow(0 0 30px rgba(255,210,63,.45)); transform: rotate(-8deg); }
.c-hero-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; position: relative; z-index: 1; max-width: calc(100% - 8rem); }
.c-stat { background: rgba(0,0,0,.28); border: 1px solid var(--stroke); border-radius: 14px; padding: .8rem 1.1rem; min-width: 150px; }
.c-stat strong { display: block; font-size: 1.6rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.c-stat.jackpot strong { background: linear-gradient(90deg, #ffd23f, #ff8a3d, #ffd23f); background-size: 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3s linear infinite; }
@keyframes shimmer { to { background-position: 200% 0; } }

/* Game tiles */
.c-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; margin: 1rem 0 2rem; }
.c-card { position: relative; display: flex; flex-direction: column; text-decoration: none; border-radius: 18px; overflow: hidden; border: 1px solid var(--stroke); background: var(--bg-2); transition: transform .2s ease, border-color .2s, box-shadow .2s; }
.c-card:hover { transform: translateY(-4px); border-color: rgba(255,210,63,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,210,63,.15); }
.c-card.off { filter: grayscale(.8); opacity: .65; }
.c-cover { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.c-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.c-card:hover .c-cover img { transform: scale(1.05); }
.c-cover .art { font-size: 4.5rem; filter: drop-shadow(0 6px 20px rgba(0,0,0,.6)); }
.cover-slots { background: radial-gradient(circle at 50% 40%, #ff8a3d55, transparent 60%), linear-gradient(135deg, #3a0f4a, #120a2a); }
.cover-blackjack { background: radial-gradient(circle at 50% 40%, #24d17e40, transparent 60%), linear-gradient(135deg, var(--felt), #06241a); }
.cover-roulette { background: radial-gradient(circle at 50% 40%, #ff4d6d40, transparent 60%), linear-gradient(135deg, #3b0b16, #10101f); }
.cover-hilo { background: radial-gradient(circle at 50% 40%, #4da3ff40, transparent 60%), linear-gradient(135deg, #0b2a55, #0b0b1a); }
.cover-coinflip { background: radial-gradient(circle at 50% 40%, #ffd23f45, transparent 60%), linear-gradient(135deg, #4a3505, #12101a); }
.c-info { padding: 1rem 1.1rem 1.2rem; }
.c-kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 .3rem; font-weight: 750; }
.c-name { font-size: 1.25rem; font-weight: 850; margin-bottom: .25rem; }
.c-desc { color: #b6bfd1; font-size: .92rem; line-height: 1.5; }
.c-badge { position: absolute; top: .8rem; left: .8rem; z-index: 2; padding: .25rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 900; letter-spacing: .08em; background: var(--green); color: #04150b; }
.c-badge.closed { background: #59607a; color: #fff; }
.c-badge.live { background: var(--red); color: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* Missions, achievements, daily */
.c-mission { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--stroke); }
.c-mission:last-child { border-bottom: 0; }
.c-mission .t { flex: 1; } .c-mission .t small { color: var(--muted); }
.c-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: .35rem; }
.c-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); border-radius: inherit; transition: width .6s ease; }
.c-achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.c-ach { text-align: center; padding: .8rem .5rem; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--stroke); }
.c-ach .i { font-size: 2rem; display: block; }
.c-ach b { display: block; font-size: .85rem; margin: .3rem 0 .15rem; }
.c-ach small { color: var(--muted); font-size: .72rem; line-height: 1.3; display: block; }
.c-ach.locked .i { filter: grayscale(1) brightness(.5); }
.c-ach.unlocked { border-color: rgba(255,210,63,.45); box-shadow: inset 0 0 20px rgba(255,210,63,.12); }

/* Buttons & controls */
.c-btn { appearance: none; border: 0; cursor: pointer; padding: .8rem 1.3rem; border-radius: 12px; font-weight: 850; color: #1a1300;
    background: linear-gradient(180deg, #ffe27a, #ffb52e); box-shadow: 0 4px 0 #b37500, 0 8px 20px rgba(255,180,46,.25); transition: transform .08s, filter .2s; }
.c-btn:hover { filter: brightness(1.06); } .c-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b37500; }
.c-btn:disabled { filter: grayscale(.9) brightness(.6); cursor: not-allowed; transform: none; }
.c-btn.ghost { background: var(--glass); color: var(--text); box-shadow: none; border: 1px solid var(--stroke); }
.c-btn.green { background: linear-gradient(180deg, #5cf0a5, #1fb86b); box-shadow: 0 4px 0 #0c6b3c; color: #03170b; }
.c-btn.red { background: linear-gradient(180deg, #ff8197, #e3304f); box-shadow: 0 4px 0 #8d1027; color: #fff; }
.c-btn.small { padding: .45rem .8rem; font-size: .85rem; }
.c-controls { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: center; margin-top: 1rem; }
.c-chips { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.c-chip { width: 54px; height: 54px; border-radius: 50%; border: 4px dashed rgba(255,255,255,.75); cursor: pointer; font-weight: 900; font-size: .85rem; color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 0 0 4px rgba(0,0,0,.18); transition: transform .15s; }
.c-chip:hover { transform: translateY(-3px); }
.c-chip[aria-pressed="true"] { transform: translateY(-6px) scale(1.08); box-shadow: 0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.6); }
.chip-10 { background: #2f6fe0; } .chip-25 { background: #1fa65a; } .chip-50 { background: #d9442e; } .chip-100 { background: #222; } .chip-500 { background: #8e3fd6; }
.c-bet { display: inline-flex; align-items: center; gap: .5rem; background: rgba(0,0,0,.3); border: 1px solid var(--stroke); border-radius: 12px; padding: .35rem .5rem; }
.c-bet input { width: 6.5rem; background: transparent; border: 0; color: var(--gold); font-weight: 900; font-size: 1.15rem; text-align: center; }
.c-bet button { width: 2rem; height: 2rem; border-radius: 8px; border: 0; background: var(--glass); color: var(--text); cursor: pointer; font-weight: 900; }
.c-msg { min-height: 1.6rem; text-align: center; font-weight: 750; margin: .8rem 0 0; }
.c-msg.win { color: var(--gold); text-shadow: 0 0 18px rgba(255,210,63,.6); font-size: 1.25rem; }
.c-msg.lose { color: #ff9aac; }

/* Playing cards */
.pcard { --w: clamp(62px, 9vw, 92px); width: var(--w); height: calc(var(--w) * 1.4); border-radius: 10px; position: relative; flex: none;
    background: #fdfdf8; color: #15151d; box-shadow: 0 6px 14px rgba(0,0,0,.45); font-weight: 900; font-family: Georgia, "Times New Roman", serif;
    animation: deal .35s ease both; }
.pcard.red { color: #d0203c; }
.pcard .c1, .pcard .c2 { position: absolute; line-height: 1; font-size: calc(var(--w) * .22); text-align: center; }
.pcard .c1 { top: 6%; left: 8%; } .pcard .c2 { bottom: 6%; right: 8%; transform: rotate(180deg); }
.pcard .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .5); }
.pcard.back { background: repeating-linear-gradient(45deg, #7a1430 0 6px, #9b1d3f 6px 12px); border: 4px solid #fff; }
.pcard.back::after { content: "🦖"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .45); }
@keyframes deal { from { transform: translateY(-40px) rotate(-8deg); opacity: 0; } }
.hand { display: flex; gap: .5rem; justify-content: center; min-height: calc(clamp(62px, 9vw, 92px) * 1.4); flex-wrap: wrap; }

.confetti { position: fixed; top: -2rem; z-index: 50; pointer-events: none; font-size: 1.6rem; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (max-width: 760px) {
    .c-grid-2 { grid-template-columns: 1fr; }
    .c-topbar { flex-wrap: wrap; }
    .c-hero-stats { max-width: 100%; }
    .c-hero::after { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }