:root {
  --ink: #17110d;
  --cream: #f4ead3;
  --gold: #d7ad55;
  --gold-pale: #f0d694;
  --felt: #153c31;
  --oxblood: #6e2526;
  color: var(--cream);
  background: #0e0b09;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #0e0b09; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 50% 38%, #3e291b 0, #140f0b 48rem, #080706 100%); }
button, input { font: inherit; }
button { color: inherit; }

.loading-screen, .install-needed { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.loading-chip { width: 74px; aspect-ratio: 1; display: grid; place-items: center; margin: auto; border: 2px solid #e1bc6c; border-radius: 50%; background: #72272a; color: #f9e9bf; box-shadow: inset 0 0 0 6px #290e0f66, 0 20px 50px #000a; font: 700 32px Georgia, serif; }
.install-card { width: min(540px, 100%); border: 1px solid #d7ad5555; border-radius: 24px; padding: 34px; background: #1b1612; box-shadow: 0 30px 90px #0009; }
.install-card h1 { font: 500 clamp(36px, 7vw, 62px)/1 Georgia, serif; }

.portal-shell { min-height: 100vh; padding: clamp(10px, 2vw, 24px); }
.portal-header { width: min(1480px, 100%); min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 auto 12px; padding: 0 clamp(2px, 1.2vw, 14px); }
.brand { display: flex; align-items: baseline; gap: 9px; color: var(--cream); text-decoration: none; }
.brand span { color: var(--gold-pale); font: 800 clamp(15px, 1.7vw, 23px)/1 Georgia, serif; letter-spacing: .16em; }
.brand em { color: #f4ead3bb; font: italic 500 clamp(17px, 2vw, 28px)/1 Georgia, serif; }
.house-note { color: #f4ead36e; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.player-menu { display: flex; align-items: center; gap: 12px; color: #f4ead3b5; font-size: 13px; font-weight: 800; }
.player-menu button { border: 0; border-bottom: 1px solid #f4ead35c; padding: 6px 0; background: transparent; color: #f4ead38e; cursor: pointer; }
.player-menu button:hover { color: white; border-color: white; }

.poker-stage { position: relative; width: min(1480px, 100%); min-height: calc(100vh - 104px); aspect-ratio: 16 / 9.7; overflow: hidden; margin: auto; border: 1px solid #d8ac5f40; border-radius: clamp(22px, 3vw, 46px); isolation: isolate; box-shadow: 0 38px 100px #000c, inset 0 0 0 1px #fff1; }
.painting, .stage-shade { position: absolute; inset: 0; }
.painting { z-index: -3; background: #153a2e url("poker-dogs.webp") center / cover no-repeat; transform: scale(1.012); }
.stage-shade { z-index: -2; background: radial-gradient(ellipse at center, #06261b12 10%, #0a130e10 36%, #05040372 76%, #050403c7 100%), linear-gradient(#00000025, transparent 28%, #00000028); }
.poker-stage::after { content: ""; position: absolute; z-index: -1; inset: 2.2%; pointer-events: none; border: 1px solid #e0ba7040; border-radius: inherit; }

.eyebrow { margin: 0 0 10px; color: var(--gold-pale); font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }
.primary-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 12px 22px; background: linear-gradient(#edd18b, #c89a40); color: #21170f; box-shadow: 0 7px 20px #0004, inset 0 1px #fff8; cursor: pointer; font-weight: 900; text-decoration: none; }
.primary-button:disabled { opacity: .55; cursor: wait; }

.auth-card { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(390px, calc(100% - 34px)); transform: translate(-50%, -50%); border: 1px solid #e2bc7070; border-radius: 22px; padding: clamp(22px, 3vw, 34px); background: linear-gradient(145deg, #17120fef, #291d16f2); box-shadow: 0 28px 75px #000c, inset 0 1px #fff1; backdrop-filter: blur(12px); }
.auth-card h1 { margin-bottom: 8px; color: #fff7e4; font-size: clamp(38px, 5vw, 58px); font-weight: 500; letter-spacing: -.04em; }
.auth-lede { margin-bottom: 23px; color: #f4ead399; font-family: Georgia, serif; font-style: italic; line-height: 1.45; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid #ffffff16; border-radius: 999px; background: #05040370; }
.auth-tab { border: 0; border-radius: 999px; padding: 9px; background: transparent; color: #f4ead36f; cursor: pointer; font-size: 13px; font-weight: 850; }
.auth-tab.active { background: #f0d694; color: #2a1d13; box-shadow: 0 3px 10px #0004; }
.field { display: block; margin: 13px 0; }
.field span { display: block; margin-bottom: 6px; color: #f4ead3c7; font-size: 12px; font-weight: 850; }
.field input { width: 100%; border: 1px solid #e7d7b130; border-radius: 11px; padding: 12px 13px; outline: none; background: #080605a8; color: white; }
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #d7ad5528; }
.auth-card .primary-button { width: 100%; margin-top: 4px; }
.form-error { min-height: 20px; margin: 2px 0 3px; color: #ef9a8c; font-size: 13px; font-weight: 750; }

.table-center { position: absolute; z-index: 2; top: 50%; left: 50%; width: 34%; transform: translate(-50%, -50%); text-align: center; text-shadow: 0 3px 18px #00160dcc; }
.table-center h1 { margin-bottom: 9px; color: #f8ebca; font-size: clamp(32px, 4.5vw, 66px); font-weight: 500; line-height: .94; letter-spacing: -.04em; }
.table-center p:last-child { color: #f4ead38c; font: italic clamp(14px, 1.5vw, 20px) Georgia, serif; }
.game-ring { position: absolute; inset: 0; z-index: 3; }
.game-token { position: absolute; width: clamp(155px, 17vw, 236px); min-height: clamp(82px, 8vw, 108px); display: grid; grid-template-columns: clamp(54px, 5.8vw, 78px) 1fr; gap: 13px; align-items: center; border: 1px solid #edcb844d; border-radius: 18px; padding: 12px; color: #fff4d9; text-decoration: none; background: linear-gradient(145deg, #160f0ddf, #3b2318e3); box-shadow: 0 15px 35px #0009, inset 0 1px #fff1; backdrop-filter: blur(7px); transform: translate(-50%, -50%); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.game-token.available:hover { transform: translate(-50%, calc(-50% - 5px)); border-color: #f0d694c0; box-shadow: 0 22px 44px #000b, 0 0 30px #d7ad5518, inset 0 1px #fff2; }
.game-token.north-west { top: 28%; left: 28%; }
.game-token.north-east { top: 28%; left: 72%; }
.game-token.south-west { top: 72%; left: 28%; }
.game-token.south-east { top: 72%; left: 72%; }
.game-icon { width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 2px solid #e9c577a0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #9c3b3a, #5c1b1e 70%); box-shadow: inset 0 0 0 5px #1d080a5c, 0 6px 15px #0007; }
.game-icon img { width: 72%; height: 72%; object-fit: contain; }
.game-copy { min-width: 0; }
.game-copy strong { display: block; margin-bottom: 5px; font: 600 clamp(20px, 2vw, 28px)/1 Georgia, serif; }
.game-copy small { display: block; color: #f4ead384; font-size: clamp(10px, .9vw, 12px); line-height: 1.35; }
.deal-in { position: absolute; right: 11px; bottom: -9px; border-radius: 999px; padding: 4px 9px; background: var(--gold); color: #24170e; font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.game-token.unavailable { filter: saturate(.4); opacity: .62; }
.game-token.unavailable .game-icon { background: radial-gradient(circle at 35% 28%, #64564d, #2d2622 72%); }
.table-signature { position: absolute; z-index: 2; bottom: 3.5%; left: 50%; margin: 0; transform: translateX(-50%); color: #ebcc8867; font: 700 9px Georgia, serif; letter-spacing: .34em; white-space: nowrap; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; max-width: min(90vw, 520px); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; border: 1px solid #e7c7794a; border-radius: 999px; padding: 11px 18px; background: #130e0b; color: white; box-shadow: 0 12px 40px #000b; transition: .2s ease; text-align: center; font-weight: 750; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .portal-shell { padding: 8px; }
  .portal-header { min-height: 52px; margin-bottom: 7px; }
  .house-note { display: none; }
  .poker-stage { min-height: calc(100vh - 75px); aspect-ratio: auto; border-radius: 24px; }
  .painting { background-position: center; }
  .poker-stage.is-open { padding: 38vh 14px 48px; }
  .poker-stage.is-open .stage-shade { background: linear-gradient(#02030233 0 28%, #070604d9 58%, #070604f7 100%); }
  .table-center { top: 24%; width: 82%; }
  .table-center h1 { font-size: clamp(38px, 10vw, 58px); }
  .game-ring { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-token { position: relative; top: auto !important; left: auto !important; width: 100%; min-height: 88px; grid-template-columns: 58px 1fr; transform: none; }
  .game-token.available:hover { transform: translateY(-3px); }
  .game-copy strong { font-size: 22px; }
  .auth-card { top: 52%; }
}

@media (max-width: 560px) {
  .brand em { display: none; }
  .brand span { font-size: 14px; }
  .player-menu span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .poker-stage.is-open { padding-top: 36vh; }
  .game-ring { grid-template-columns: 1fr; }
  .game-token { min-height: 78px; }
  .game-token.unavailable { display: none; }
  .table-signature { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}