:root {
  font-family: Inter, "Pretendard", "Segoe UI", system-ui, sans-serif;
  color: #e8edf7;
  background: #080d17;
  color-scheme: dark;
  --bg: #080d17;
  --surface: #101827;
  --surface-2: #151f31;
  --surface-3: #1b273b;
  --line: #26344b;
  --line-soft: #ffffff12;
  --text: #e8edf7;
  --muted: #8f9bb0;
  --accent: #7568ff;
  --accent-2: #4bc7e8;
  --danger: #ff6676;
}

* { box-sizing: border-box; }

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 2%, #263265 0, transparent 31rem),
    radial-gradient(circle at 88% 95%, #123b4f 0, transparent 28rem),
    linear-gradient(145deg, #080d17, #0c1321 52%, #09101b);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .19;
  background-image:
    linear-gradient(#b8c6ff0a 1px, transparent 1px),
    linear-gradient(90deg, #b8c6ff0a 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.shell { max-width: 1240px; margin: auto; padding: 24px; }
.public-site-footer { display:flex; width:min(1192px,calc(100% - 48px)); margin:4px auto 28px; padding:15px 4px; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid #ffffff12; color:#66758b; font-size:10px; }
.public-site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px 13px; }
.public-site-footer a { color:#8290a5; text-decoration:none; }
.public-site-footer a:hover { color:#dfe6f2; }
@media(max-width:640px){.public-site-footer{width:calc(100% - 32px);align-items:flex-start;flex-direction:column}.public-site-footer nav{justify-content:flex-start}}

header {
  display: flex;
  min-height: 52px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}

header b {
  color: #a99fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-shadow: 0 0 22px #7668ff66;
}

header span { margin-left: 12px; color: var(--muted); }
#user-bar { display:flex; align-items:center; gap:8px; }
#user-bar > span { margin-left:0; }
.coin-wallet { display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:6px 10px; border-color:#c8923766; color:#ffe09a; background:linear-gradient(135deg,#3a2a13,#201b18); }
.coin-wallet strong { color:#ffd767; font-variant-numeric:tabular-nums; }
#daily-coin { min-height:36px; padding:6px 10px; color:#a7f6c1; border-color:#55bf7c55; background:#143326; font-size:12px; }
.golden-slot-button { min-height:38px; color:#fff4c8; border-color:#ffd76a; background:linear-gradient(135deg,#4a000d,#b70927 47%,#53000f); box-shadow:0 0 0 1px #7a0718,0 0 19px #ffb72e66,inset 0 1px #fff2ad88; font-weight:900; text-shadow:0 1px 2px #320006,0 0 8px #ffca55aa; }
#retry-support { min-height:36px; padding:6px 10px; color:#fff0bd; border-color:#f3bd4d99; background:linear-gradient(135deg,#5d3d12,#2e2215); font-size:12px; box-shadow:0 0 14px #e9a92a33; animation:retrySupportPulse 1.8s ease-in-out infinite; }
@keyframes retrySupportPulse { 50% { box-shadow:0 0 22px #ffd46a88; transform:translateY(-1px); } }

.panel {
  margin-bottom: 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  background: linear-gradient(145deg, #151e2ee8, #0f1725f2);
  box-shadow: 0 22px 55px #0007, inset 0 1px #ffffff0a;
  backdrop-filter: blur(18px);
}

.auth {
  position: relative;
  max-width: 410px;
  margin: 9vh auto;
  padding: 32px;
  border-color: #8e83ff38;
  box-shadow: 0 28px 80px #000a, 0 0 0 1px #ffffff08, 0 0 70px #6558e820;
}

.auth::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #786cff, #4bc7e8, transparent);
}

.auth h1 { margin: 7px 0 22px; font-size: 30px; letter-spacing: -.04em; }
.auth input, .auth button { width: 100%; margin-top: 10px; }
.oauth-login { display: grid; gap: 10px; }
.oauth-login .oauth-button { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 0; border: 0; font-weight: 800; }
.oauth-button span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 900; }
.oauth-button.google { color: #202124; background: #fff; }
.oauth-button.google span { color: #4285f4; border: 1px solid #dadce0; background: #fff; }
.oauth-button.kakao { color: #191919; background: #fee500; }
.oauth-button.kakao span { color: #fee500; background: #191919; }
.oauth-button:hover { transform: translateY(-1px); filter: brightness(.97); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 3px; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-divider span { white-space: nowrap; }
.legacy-login-notice { margin: 14px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; }

.eyebrow {
  margin: 0;
  color: #988eff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}

.layout { display: flex; gap: 18px; }
.grow { flex: 1; min-width: 0; }
aside { width: 330px; }
.section-title, .game-head { display: flex; align-items: center; justify-content: space-between; }
.section-title h2 { margin: 5px 0 0; letter-spacing: -.035em; }

button, input, select {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #34435a;
  border-radius: 10px;
  outline: 0;
  color: var(--text);
  background: #111a29;
  font: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

input::placeholder { color: #69768b; }
input:focus, select:focus {
  border-color: #8176ff;
  box-shadow: 0 0 0 3px #7568ff26;
  background: #162135;
}

button { cursor: pointer; background: #1a2538; }
button:hover:not(:disabled) { border-color: #536680; background: #223048; transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { cursor: not-allowed; opacity: .46; }
.waiting-room-actions { display:grid; grid-template-columns:minmax(180px,.72fr) minmax(220px,1.28fr); align-items:stretch; gap:10px; }
.waiting-room-actions .wide { margin-top:0; }
.room-slot-button { display:flex; min-height:52px; padding:8px 14px; align-items:center; justify-content:center; gap:10px; text-align:left; }
.room-slot-button>span:first-child { color:#fff5ad; font-size:24px; filter:drop-shadow(0 0 8px #ffd34f); }
.room-slot-button>span:last-child { display:flex; flex-direction:column; }
.room-slot-button b { color:#fff1ba; font-size:13px; }
.room-slot-button small { color:#e8c57d; font-size:9px; font-weight:700; }
@media(max-width:560px){.waiting-room-actions{grid-template-columns:1fr}.room-slot-button{min-height:48px}}

.primary {
  border-color: #776bff;
  color: white;
  background: linear-gradient(135deg, #776bff, #594be8);
  box-shadow: 0 8px 22px #594be833;
}

.primary:hover:not(:disabled) { border-color: #9c94ff; background: linear-gradient(135deg, #877dff, #6759ef); }
.danger { border-color: #ff66764a; color: #ff9aa5; background: #3a1822; }
.danger:hover:not(:disabled) { border-color: #ff7d89; background: #4a1c28; }
.link { min-height: auto; border: 0; color: #a9a1ff; background: transparent; box-shadow: none; }
.link:hover:not(:disabled) { color: #d2ceff; background: #ffffff08; }
.error { min-height: 20px; color: #ff8190; }

.rooms { display: grid; gap: 10px; margin-top: 18px; color: var(--muted); }
.room-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(120deg, #172235, #121b2a);
  box-shadow: inset 0 1px #ffffff08;
  transition: border-color .15s ease, transform .15s ease;
}
.room-card:hover { border-color: #4b5d78; transform: translateY(-1px); }
.room-card-actions { display:flex; flex:0 0 auto; gap:7px; }
.room-card-actions button { min-width:68px; }
.room-watch-button { border-color:#40c9d26b; color:#bdfaff; background:linear-gradient(135deg,#123642,#182743); }
.room-watch-button:hover:not(:disabled) { border-color:#65ecf3; background:linear-gradient(135deg,#18505d,#20345a); box-shadow:0 0 18px #3bd7de2d; }

body:has(#room:not([hidden])) .shell { max-width:1660px; }
.room-spectator-panel { display:flex; flex:0 0 230px; width:230px; min-height:610px; padding:14px; flex-direction:column; gap:12px; border-color:#3b536d; background:radial-gradient(circle at 50% 8%,#244e6650,transparent 32%),linear-gradient(180deg,#101d2e,#09131f); }
.room-spectator-panel[hidden] { display:none!important; }
.room-spectator-toggle { width:100%; min-height:48px; border-color:#54d6df88; color:#d9fdff; background:linear-gradient(135deg,#12505b,#21335f); box-shadow:0 9px 24px #0006,inset 0 1px #ffffff13; font-weight:900; }
.room-spectator-toggle.join-mode { border-color:#8c7bff99; background:linear-gradient(135deg,#4d3eb1,#6657e8); }
.room-spectator-panel>section { display:flex; min-height:0; flex:1; flex-direction:column; padding:13px; border:1px solid #ffffff10; border-radius:14px; background:#07111daa; }
.room-spectator-panel>section>header { min-height:44px; margin:0 0 10px; }
.room-spectator-panel>section>header>div { display:grid; gap:2px; }
.room-spectator-panel>section>header small { color:#65dce5; font-size:8px; font-weight:900; letter-spacing:.16em; }
.room-spectator-panel>section>header b { color:#eefcff; font-size:16px; }
.room-spectator-panel>section>header>span { margin:0; padding:4px 8px; border:1px solid #4ecfd95c; border-radius:999px; color:#8de7ed; background:#12313b; font-size:9px; font-weight:900; }
.waiting-spectators { display:grid; align-content:start; gap:7px; overflow:auto; }
.waiting-spectator { display:flex; min-width:0; padding:9px; align-items:center; gap:9px; border:1px solid #263d54; border-radius:11px; background:linear-gradient(135deg,#112135,#0c1725); }
.waiting-spectator.self { border-color:#7167ec; box-shadow:inset 3px 0 #7568ff; }
.waiting-spectator>span { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border:1px solid #4bc9d45c; border-radius:10px; background:#163642; }
.waiting-spectator>div { display:grid; min-width:0; gap:2px; }
.waiting-spectator b { overflow:hidden; color:#ecf5ff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.waiting-spectator small { color:#72879d; font-size:8px; }
.waiting-spectators-empty { margin:14px 0; color:#65768b; font-size:10px; line-height:1.5; text-align:center; }
.game-spectator-count { margin-left:auto!important; padding:4px 8px; border:1px solid #4acbd456; border-radius:999px; color:#a9edf1!important; background:#102a35; font-size:10px; font-weight:900; white-space:nowrap; }
.game-spectator-count[hidden] { display:none!important; }

body.game-active #room>.room-spectator-panel { display:none!important; }
#room>.panel.grow { position:relative; }
.game-pause-menu { position:absolute; z-index:30; inset:0; display:grid; place-items:center; overflow:hidden; padding:18px; border-radius:inherit; }
.game-pause-menu[hidden] { display:none!important; }
.game-pause-backdrop { position:absolute; inset:0; background:#020712c7; backdrop-filter:blur(8px); }
.game-pause-menu>section { position:relative; display:grid; width:min(380px,calc(100% - 30px)); max-height:calc(100% - 30px); gap:10px; overflow:auto; padding:28px; border:1px solid #746bdb8f; border-radius:21px; background:radial-gradient(circle at 50% 0,#4857a34a,transparent 42%),linear-gradient(160deg,#17243a,#0b1321 72%); box-shadow:0 30px 90px #000d,0 0 35px #6255dc38; animation:pause-menu-in .18s ease-out both; }
.game-pause-menu>section>small { color:#7ee7ec; font-size:9px; font-weight:900; letter-spacing:.2em; text-align:center; }
.game-pause-menu h2 { margin:0; color:#fff; font-size:30px; text-align:center; }
.game-pause-menu p { margin:1px 0 9px; color:#9cabc0; font-size:12px; line-height:1.55; text-align:center; }
.game-pause-menu button { width:100%; min-height:48px; font-weight:900; }
.game-pause-menu>section>span { margin:3px 0 0; color:#617188; font-size:9px; text-align:center; }
@keyframes pause-menu-in { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
.room-card small { color: var(--muted); line-height: 2; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 99px; color: #c4beff; background: #776bff20; font-size: 12px; }

.messages {
  height: 240px;
  padding: 10px;
  overflow: auto;
  border: 1px solid #ffffff0b;
  border-radius: 12px;
  color: #cbd4e3;
  background: #09111de0;
  scrollbar-color: #3d4b63 transparent;
}
.messages > div { margin-bottom: 4px; padding: 7px 9px; border: 1px solid #a56fe73d; border-left: 3px solid #a66bff; border-radius: 7px; color: #eadff8; background: linear-gradient(90deg, #29183d, #21172f); word-break: break-word; }
.messages > div:last-child { margin-bottom: 0; }
.messages b { color: #f0a9ff; }
.messages > div.system-message { color: #d4f4ef; border-color: #61d9c952; border-left-color: #58ddcf; background: linear-gradient(90deg, #123b3a, #132c33); font-size: 12px; }
.messages > div.system-message b { color: #72f0e1; }
.messages .whisper-message { color:#f4cef8; background:#b75fd516; border-left:2px solid #d983e7; }
.messages .whisper-message b { color:#f0a7ff; }
.online-button { min-height:0; margin-left:5px; padding:2px 7px; color:#a8e8ff; border-color:#4a9ec466; background:#123547; font-size:11px; vertical-align:middle; }
.lobby-users-list { display:grid; max-height:min(52vh,380px); gap:7px; overflow:auto; }.lobby-user-row { display:flex; align-items:center; gap:10px; width:100%; padding:10px; text-align:left; }.lobby-user-row .lobby-user-avatar { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:#eaf4ff; background:#4056a8; font-weight:900; }.lobby-user-row small { margin-left:auto; color:#8bd9a4; }
.send { display: flex; gap: 6px; margin-top: 8px; }
.send input { flex: 1; min-width: 0; }

.room-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.room-columns > div { padding: 4px 14px 14px; border: 1px solid #ffffff0c; border-radius: 14px; background: #0b1421a6; }
.player { padding: 12px; border-bottom: 1px solid #ffffff0c; color: #d6deeb; }
.player.spectator { color: #76d8ec; }
.player.inspectable { cursor: context-menu; border-radius: 10px; }
.player.inspectable:hover { background: #ffffff0a; }
.waiting-participants { padding: 6px 14px 18px; margin-bottom: 16px; border: 1px solid #ffffff0c; border-radius: 14px; background: #0b1421a6; }
.waiting-participants h3 { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.waiting-participants h3 small { color:#75839a; font-size:12px; font-weight:500; }
.toggle-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-row input { width:auto; margin:0; }
.context-menu { position:fixed; z-index:1000; min-width:190px; padding:7px; border:1px solid #38465e; border-radius:12px; background:#101a2a; box-shadow:0 16px 45px #0009; }
.context-menu[popover] { inset:auto; margin:0; z-index:2147483647; color:var(--text); }
.context-menu[popover]::backdrop { background:transparent; }
.context-menu button { display:flex; width:100%; justify-content:space-between; align-items:center; border:0; background:transparent; text-align:left; }
.context-menu button:hover { background:#ffffff10; }
.context-menu small { color:#77849a; }
.user-info-card { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.user-info-card h2, .user-info-card p { margin:0; }
.user-info-avatar { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; color:#eef0ff; font-size:26px; font-weight:900; background:linear-gradient(145deg,#6c5ce7,#2f80ed); box-shadow:0 10px 28px #334fd755; }
.user-info-list { margin:0 0 20px; border:1px solid #ffffff12; border-radius:14px; overflow:hidden; }
.user-info-list div { display:flex; justify-content:space-between; gap:24px; padding:12px 14px; border-bottom:1px solid #ffffff0c; }
.user-info-list div:last-child { border-bottom:0; }
.user-info-list dt { color:#8390a5; }
.user-info-list dd { margin:0; color:#e4e9f2; font-weight:700; }
.setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.setting-grid label { color: var(--muted); font-size: 12px; }
.setting-grid input { display: block; width: 100%; margin-top: 4px; }
.wide { width: 100%; margin-top: 16px; }
.tall { height: 440px; }

canvas { display: block; max-width: 100%; margin: 15px auto; border-radius: 8px; background: #202b3b; }
.apple-board { display: grid; max-width: 900px; margin: 15px auto; gap: 4px; user-select: none; touch-action: none; }
.apple-board.spectating { cursor: default; filter: saturate(.88); }
.apple { display: grid; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #ffad73; font-weight: 800; cursor: crosshair; }
.apple.selected { background: #ff653f; transform: scale(1.08); }
.apple.cleared { visibility: hidden; }

/* Texas Hold'em */
#poker-play-area { width:min(930px,100%); margin:8px auto 0; }
.poker-table { position:relative; min-height:520px; padding:24px; overflow:hidden; border:1px solid #be98505c; border-radius:46% / 24%; background:radial-gradient(ellipse at center,#315f3f 0,#19422d 55%,#0b1d17 100%); box-shadow:inset 0 0 0 12px #15120ddd,inset 0 0 0 14px #bf96574f,0 20px 55px #0009; }
.poker-table::before { content:"TEXAS HOLD'EM"; position:absolute; top:54%; left:50%; color:#fff4c31a; font-family:Georgia,serif; font-size:clamp(18px,4vw,38px); font-weight:900; letter-spacing:.2em; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap; }
.poker-table-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:10px; color:#e5cf97; font-size:13px; }
#poker-pot { padding:7px 15px; border:1px solid #f4d17866; border-radius:999px; color:#ffe7a5; background:#0a1711aa; font-variant-numeric:tabular-nums; }
.poker-cards { position:relative; z-index:1; display:flex; min-height:60px; justify-content:center; gap:7px; margin:24px 0; }
.poker-card { display:grid; width:42px; height:58px; place-items:center; border:1px solid #d6dbe5; border-radius:6px; color:#16202f; background:linear-gradient(145deg,#fff,#dde3ec); box-shadow:0 4px 10px #0007; font-family:Georgia,serif; font-size:16px; font-weight:900; }
.poker-card.red { color:#d42f43; }
.poker-card.hidden-card { color:#f5dfad; background:repeating-linear-gradient(45deg,#682d3e 0 4px,#3f1930 4px 8px); border-color:#eac476; }
.poker-players { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; max-width:740px; margin:0 auto 18px; }
.poker-player { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; min-height:72px; padding:9px 10px; border:1px solid #ffffff24; border-radius:12px; background:#07120eda; box-shadow:0 6px 17px #0006; }
.poker-player b { overflow:hidden; color:#eff7e8; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.poker-player > span { color:#cad7ca; font-size:11px; }
.poker-player.turn { border-color:#ffe28a; box-shadow:0 0 0 2px #ffdb6b55,0 7px 22px #0008; }
.poker-player.folded { opacity:.48; filter:grayscale(.8); }
.poker-player.me { background:#10291cdd; }
.poker-mini-cards { display:flex; grid-row:1 / span 2; grid-column:2; gap:2px; }
.poker-mini-cards .poker-card { width:20px; height:30px; font-size:9px; }
.poker-hand { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:12px; color:#f6e6ba; font-size:13px; font-weight:800; }
.poker-hand .poker-cards { min-height:0; margin:0; }
.poker-action-info { position:relative; z-index:1; min-height:23px; margin-top:14px; color:#dcead5; text-align:center; font-size:13px; }
.poker-actions { position:relative; z-index:1; display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:8px; }
.poker-actions button { min-width:82px; min-height:38px; padding:7px 10px; }
.poker-raise-row { position:relative; z-index:1; display:flex; max-width:300px; gap:6px; margin:8px auto 0; }
.poker-raise-row input { min-width:0; flex:1; }

/* A restrained casino glow: clear game information first, atmosphere second. */
.poker-table { isolation:isolate; border:2px solid #d9aa4fcc; background:radial-gradient(ellipse at 50% 42%,#3d8454 0,#1d593b 43%,#0a1b15 100%),repeating-radial-gradient(circle at 50% 50%,#ffffff06 0 1px,transparent 1px 5px); box-shadow:inset 0 0 0 10px #07100d,inset 0 0 0 13px #b98d3888,inset 0 0 80px #f8cc4e20,0 20px 55px #0009,0 0 38px #d69f2b3d; animation:poker-casino-ambient 6s ease-in-out infinite; }
.poker-table::before { content:"✦  TEXAS HOLD'EM  ✦"; color:#ffe4a541; text-shadow:0 0 17px #ffcc4a33; }
.poker-table::after { content:""; position:absolute; z-index:0; inset:14px; border:2px solid #ffe9aa45; border-radius:inherit; box-shadow:inset 0 0 45px #ffe7a322,0 0 18px #efbb4a29; pointer-events:none; }
.poker-table-head { min-height:42px; padding:4px 5px; flex-wrap:wrap; justify-content:center; }
.poker-round-hud { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; }
.poker-mode-badge, #poker-blinds, #poker-street { display:inline-flex; min-height:30px; padding:6px 10px; align-items:center; border:1px solid #f6d37b66; border-radius:999px; color:#fff0c6; background:#08150fdd; box-shadow:0 0 14px #f3c45a18; font-size:12px; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.poker-mode-badge.practice { color:#cdefff; border-color:#76c9ff70; background:#10283add; }
#poker-blinds { color:#ffd772; }
#poker-street { color:#e8ffc5; border-color:#9dd96b66; }
#poker-pot { position:relative; overflow:hidden; border-color:#ffe292aa; box-shadow:0 0 20px #f6b52e35,inset 0 0 12px #fff2ae12; animation:poker-pot-glow 2.4s ease-in-out infinite; }
#poker-pot::before { content:"◆"; margin-right:7px; color:#ffdd70; font-size:10px; }
.poker-table .poker-cards { z-index:1; }
.poker-card { border-color:#fff5d1; box-shadow:0 5px 12px #0008,0 0 9px #ffffff2a; transform:translateY(0); transition:transform .16s ease,box-shadow .16s ease; }
.poker-card:hover { transform:translateY(-3px); box-shadow:0 9px 16px #0009,0 0 14px #ffe5a066; }
.poker-card-deal { animation:poker-card-deal .46s cubic-bezier(.18,.8,.26,1.18) var(--deal-delay,0ms) both; }
.poker-card-reveal, #poker-community .poker-card-deal { position:relative; overflow:hidden; transform-style:preserve-3d; backface-visibility:hidden; }
.poker-card-reveal { animation:poker-card-reveal .64s cubic-bezier(.25,.82,.2,1.1) var(--deal-delay,0ms) both; }
#poker-community .poker-card-deal { animation:poker-community-deal .98s cubic-bezier(.14,.77,.19,1) var(--deal-delay,0ms) both; }
.poker-card-reveal::after, #poker-community .poker-card-deal::after { content:"♠"; position:absolute; inset:2px; display:grid; place-items:center; border:1px solid #f0c664; border-radius:4px; color:#ffe8aa; background:repeating-linear-gradient(45deg,#6b1e3b 0 4px,#331125 4px 8px); box-shadow:inset 0 0 0 2px #ffffff26; font-size:17px; transform:rotateY(180deg); backface-visibility:hidden; }
.poker-player { position:relative; border-color:#f3d27b3d; background:linear-gradient(145deg,#0b2119e8,#07120eda); }
.poker-player::after { content:""; position:absolute; right:8px; bottom:7px; width:7px; height:7px; border-radius:50%; background:#efc45c; box-shadow:0 0 9px #ffd75e; opacity:.7; }
.poker-player.turn { border-color:#ffe28a; background:linear-gradient(145deg,#1b4128ed,#0b2119e8); box-shadow:0 0 0 2px #ffdb6b55,0 7px 22px #0008,0 0 20px #f5cd4b36; animation:poker-turn-glow 1.4s ease-in-out infinite; }
.poker-player.me { border-color:#85d4a173; background:linear-gradient(145deg,#173d2aec,#0b2119e8); }
.poker-player.all-in { border-color:#ffe37a; background:radial-gradient(circle at 18% 15%,#fff2ad3d,transparent 38%),linear-gradient(145deg,#5c3710ed,#1b130aec); box-shadow:0 0 0 2px #ffd45d58,0 0 26px #ffc3438a,0 7px 22px #0008; animation:poker-allin-seat .85s cubic-bezier(.18,.82,.22,1) both; }
.poker-player.all-in::before { content:"ALL IN"; position:absolute; top:-10px; left:8px; z-index:2; padding:2px 6px; border:1px solid #ffe58a; border-radius:999px; color:#392204; background:linear-gradient(135deg,#fff6b4,#ffbd3e); box-shadow:0 0 13px #ffcd4b; font-size:8px; font-weight:1000; letter-spacing:.09em; }
.poker-actions button { border-color:#e4b95177; box-shadow:0 5px 14px #0005; transition:transform .14s ease,box-shadow .14s ease,filter .14s ease; }
.poker-actions button:not(:disabled):hover, .poker-results-button:hover { transform:translateY(-2px); box-shadow:0 7px 17px #0008,0 0 14px #f7cc5660; filter:brightness(1.08); }
.poker-hand-guide { position:relative; z-index:2; display:flex; flex-direction:column; min-width:190px; padding:13px 14px; overflow:hidden; border:1px solid #d9af5c70; border-radius:16px; color:#d9e6d5; background:linear-gradient(155deg,#172b20f2,#0a1511ed); box-shadow:0 12px 30px #0008,0 0 20px #ecb8461b; }
.poker-guide-head { display:flex; flex-direction:column; gap:4px; padding-bottom:10px; border-bottom:1px solid #f0cd7233; }
.poker-guide-head span { color:#e9bf5b; font-size:10px; font-weight:900; letter-spacing:.14em; }
.poker-guide-head strong { color:#fff0bd; font-size:15px; }
.poker-hand-guide ol { display:grid; gap:2px; margin:10px 0 8px; padding:0; list-style:none; counter-reset:hand-rank; }
.poker-hand-guide li { position:relative; display:flex; align-items:center; gap:7px; padding:4px 5px; border-radius:6px; color:#a8b6a6; font-size:11px; }
.poker-hand-guide li::before { counter-increment:hand-rank; content:counter(hand-rank,decimal-leading-zero); color:#bd9a52; font-size:9px; font-variant-numeric:tabular-nums; }
.poker-hand-guide li.active { color:#fff3c9; background:linear-gradient(90deg,#d89f2d43,#d89f2d08); box-shadow:inset 3px 0 #ffd569; font-weight:900; }
.poker-hand-guide li.active::after { content:"◀"; position:absolute; right:6px; color:#ffdc72; font-size:12px; text-shadow:0 0 7px #ffc62c; }
.poker-hand-guide li.active.rank-up { z-index:1; animation:poker-rank-up 1.02s cubic-bezier(.12,.82,.18,1.12) both; }
.poker-hand-guide li.active.rank-up::after { content:"➤"; right:4px; font-size:18px; animation:poker-rank-pointer 1.02s cubic-bezier(.12,.82,.18,1.12) both; }
.poker-hand-guide.rank-up::after { content:""; position:absolute; z-index:0; inset:-35%; pointer-events:none; background:radial-gradient(ellipse at 48% 50%,#fff0aab8 0 4%,#ffc22980 14%,#f3a81429 31%,transparent 62%); animation:poker-rank-guide-flash 1.02s ease-out both; }
.poker-hand-guide.rank-up .poker-guide-head, .poker-hand-guide.rank-up ol, .poker-hand-guide.rank-up p { position:relative; z-index:1; }
.poker-hand-guide.rank-up .poker-guide-head strong { animation:poker-rank-title 1.02s ease-out both; }
.poker-hand-guide p { margin:0; color:#aebaa8; font-size:10px; line-height:1.45; }
.poker-results-button { display:block; margin:11px auto 0; }
.poker-showdown-hand { grid-column:1 / -1; margin-top:1px; color:#ffe29a; font-size:10px; font-weight:800; letter-spacing:.02em; line-height:1.35; text-shadow:0 0 8px #f8bf3f55; }

/* Desktop showdown gets a dedicated 4 × 2 seat layout: every revealed hand
   is large enough to read while an eight-player table remains collision-free. */
@media (min-width:851px) {
  .poker-table.poker-showdown .poker-players { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:840px; gap:10px; }
  .poker-table.poker-showdown .poker-player { min-height:105px; padding:10px 11px; grid-template-columns:minmax(0,1fr) auto; }
  .poker-table.poker-showdown .poker-mini-cards { gap:4px; }
  .poker-table.poker-showdown .poker-mini-cards .poker-card { width:34px; height:48px; border-radius:7px; font-size:13px; box-shadow:0 5px 12px #0009,0 0 10px #ffe4a544; }
  .poker-table.poker-showdown .poker-player b { font-size:14px; }
}
@keyframes poker-turn-glow { 50% { box-shadow:0 0 0 2px #ffdb6b77,0 7px 22px #0008,0 0 29px #f5cd4b60; } }
@keyframes poker-card-deal { 0% { opacity:0; transform:translateY(-38px) rotate(-8deg) scale(.82); filter:brightness(1.6); } 68% { opacity:1; transform:translateY(3px) rotate(1deg) scale(1.03); } 100% { opacity:1; transform:translateY(0) rotate(0) scale(1); filter:brightness(1); } }
@keyframes poker-card-reveal { 0% { opacity:1; transform:perspective(480px) rotateY(180deg) scale(.86); filter:brightness(1.3); } 52% { transform:perspective(480px) rotateY(82deg) scale(1.05); filter:brightness(1.8); } 100% { opacity:1; transform:perspective(480px) rotateY(0) scale(1); filter:brightness(1); } }
@keyframes poker-community-deal { 0% { opacity:0; transform:perspective(560px) translateY(-96px) rotateY(180deg) rotateZ(-5deg) scale(.72); filter:brightness(1.35); } 15% { opacity:1; } 42% { transform:perspective(560px) translateY(3px) rotateY(180deg) rotateZ(1deg) scale(1.03); filter:brightness(1.15); } 52% { transform:perspective(560px) translateY(-4px) rotateY(180deg) rotateZ(0) scale(1); } 62% { transform:perspective(560px) translateY(0) rotateY(180deg) scale(1); filter:brightness(1); } 82% { transform:perspective(560px) translateY(0) rotateY(25deg) scale(1.04); filter:brightness(1.7); } 100% { opacity:1; transform:perspective(560px) translateY(0) rotateY(0) scale(1); filter:brightness(1); } }
@keyframes poker-casino-ambient { 50% { box-shadow:inset 0 0 0 10px #07100d,inset 0 0 0 13px #d8ad5288,inset 0 0 104px #f8cc4e30,0 20px 55px #0009,0 0 52px #d69f2b56; } }
@keyframes poker-pot-glow { 50% { border-color:#fff1aa; box-shadow:0 0 27px #f6b52e70,inset 0 0 16px #fff2ae28; } }
@keyframes poker-rank-up { 0% { color:#fff3c9; transform:translateY(48px) scale(.68); filter:brightness(2.2); box-shadow:inset 4px 0 #fff7b4,0 16px 34px #ffcd4980,0 0 0 #ffde6988; } 36% { transform:translateY(-8px) scale(1.12); filter:brightness(1.9); box-shadow:inset 4px 0 #fff7b4,0 10px 30px #ffcd4988,0 0 25px #ffde6999; } 62% { transform:translateY(4px) scale(.98); filter:brightness(1.35); } 100% { transform:translateY(0) scale(1); filter:brightness(1); } }
@keyframes poker-rank-pointer { 0% { opacity:0; transform:translate(44px,49px) scale(.25) rotate(-25deg); filter:brightness(2.5); } 38% { opacity:1; transform:translate(-7px,-6px) scale(1.55) rotate(5deg); color:#fff8bb; filter:drop-shadow(0 0 10px #ffe16b); } 67% { transform:translate(3px,2px) scale(.92); } 100% { opacity:1; transform:translate(0,0) scale(1); } }
@keyframes poker-rank-title { 0% { color:#fff0bd; transform:translateY(15px) scale(.8); text-shadow:0 0 0 transparent; } 38% { color:#fff7ce; transform:translateY(-4px) scale(1.12); text-shadow:0 0 18px #ffcc4c,0 0 42px #ffc12c,0 0 65px #fff0a4; } 100% { transform:translateY(0) scale(1); } }
@keyframes poker-rank-guide-flash { 0% { opacity:0; transform:scale(.3); } 28% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.55); } }
@keyframes poker-showdown-ring { 0% { opacity:0; transform:scale(.12); } 22% { opacity:1; } 100% { opacity:0; transform:scale(1.45); } }
@keyframes poker-showdown-flash { 0% { opacity:0; transform:scale(.6); } 18% { opacity:.95; } 58% { opacity:.26; transform:scale(1.12); } 100% { opacity:0; transform:scale(1.36); } }
@keyframes poker-showdown-text { 0% { opacity:0; letter-spacing:.65em; transform:translateY(13px) scale(.75); } 24% { opacity:1; } 75% { opacity:1; } 100% { opacity:0; letter-spacing:.18em; transform:translateY(-5px) scale(1.08); } }
.poker-table.showdown-active { animation:poker-showdown-table 1.15s ease-out both; }
.poker-showdown-flare { position:absolute; z-index:5; inset:0; display:grid; place-items:center; overflow:hidden; border-radius:inherit; pointer-events:none; }
.poker-showdown-flare::before { content:""; position:absolute; width:min(70vw,720px); aspect-ratio:1; border:2px solid #ffe382; border-radius:50%; box-shadow:0 0 22px #ffd25f,0 0 60px #ffc13caa,inset 0 0 45px #fff2a9aa; animation:poker-showdown-ring 1.25s cubic-bezier(.08,.7,.22,1) both; }
.poker-showdown-flare::after { content:""; position:absolute; inset:-20%; background:radial-gradient(circle, #fff5b68f 0 4%,#ffc53946 15%,#e6a31a14 34%,transparent 60%); animation:poker-showdown-flash 1.25s ease-out both; }
.poker-showdown-flare span { position:relative; z-index:1; color:#fff4c9; font-family:Georgia,serif; font-size:clamp(23px,4vw,48px); font-weight:900; letter-spacing:.18em; text-shadow:0 0 8px #fff,0 0 24px #ffc83e,0 4px 8px #000; animation:poker-showdown-text 1.15s ease-out both; }
.poker-table.allin-active { animation:poker-allin-table .54s cubic-bezier(.2,.8,.3,1) both; }
.poker-allin-flare { position:absolute; z-index:30; inset:0; display:grid; place-content:center; justify-items:center; gap:6px; overflow:hidden; border-radius:inherit; color:#fff6c9; background:radial-gradient(ellipse at center,#fff7bf62 0 7%,#ffc32b36 24%,#2d0b0094 62%,#100502ca 100%); box-shadow:inset 0 0 55px #ffcf4952,0 0 30px #ffd35b; pointer-events:none; animation:poker-allin-flare 1.05s cubic-bezier(.12,.73,.2,1) both; }
.poker-allin-flare::before { content:""; position:absolute; inset:-75%; background:conic-gradient(from 0deg,transparent 0 5%,#fff6b3 7%,transparent 10% 18%,#ffbd2f 20%,transparent 24% 38%,#fff2a0 41%,transparent 45% 59%,#ffce45 62%,transparent 66%); animation:poker-allin-rays .96s linear both; }
.poker-allin-flare::after { content:""; position:absolute; z-index:1; width:122%; height:clamp(82px,15vw,160px); border-top:2px solid #fff3a2; border-bottom:2px solid #fff3a2; background:linear-gradient(90deg,transparent,#9e3e05e6 9%,#ffb51ff2 35%,#fff1a5 50%,#ffb51ff2 65%,#9e3e05e6 91%,transparent); box-shadow:0 0 18px #fff4a0,0 0 42px #ffae1f,inset 0 0 18px #fff7b8; transform:skewY(-5deg); animation:poker-allin-banner .98s cubic-bezier(.12,.8,.2,1) both; }
.poker-allin-flare strong,.poker-allin-flare span { position:relative; z-index:2; text-align:center; text-shadow:0 0 7px #fff,0 0 26px #ff9f00,0 5px 7px #320900; }
.poker-allin-flare strong { color:#fff9d1; font-family:Impact,"Arial Black",sans-serif; font-size:clamp(44px,8.5vw,104px); font-weight:1000; letter-spacing:.08em; line-height:.82; -webkit-text-stroke:2px #8a2800; filter:drop-shadow(0 0 12px #fff5a6) drop-shadow(0 0 24px #ff9400); animation:poker-allin-text 1s cubic-bezier(.1,.8,.2,1) both; }
.poker-allin-flare span { max-width:86%; margin-top:5px; color:#fff7bf; font-size:clamp(12px,2vw,18px); font-weight:1000; letter-spacing:.08em; }
@keyframes poker-allin-seat { 0% { transform:scale(.92); filter:brightness(1.9); } 48% { transform:scale(1.035); filter:brightness(1.35); } 100% { transform:scale(1); } }
@keyframes poker-allin-flare { 0% { opacity:0; } 10% { opacity:1; } 78% { opacity:1; } 100% { opacity:0; } }
@keyframes poker-allin-rays { from { transform:rotate(0deg) scale(.45); opacity:0; } 10% { opacity:1; } to { transform:rotate(185deg) scale(1.1); opacity:0; } }
@keyframes poker-allin-banner { 0% { opacity:0; transform:translateX(-72%) skewY(-5deg) scaleY(.25); } 20% { opacity:1; transform:translateX(0) skewY(-5deg) scaleY(1.08); } 72% { opacity:1; transform:translateX(0) skewY(-5deg) scaleY(1); } 100% { opacity:0; transform:translateX(45%) skewY(-5deg) scaleY(.78); } }
@keyframes poker-allin-text { 0% { opacity:0; transform:scale(.18) rotate(-9deg); } 19% { opacity:1; transform:scale(1.15) rotate(2deg); } 35% { transform:scale(.96) rotate(0); } 77% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.16); } }
@keyframes poker-allin-table { 0%,100% { transform:translateX(0); filter:brightness(1) saturate(1); } 15% { transform:translateX(-5px) rotate(-.18deg); filter:brightness(1.4) saturate(1.5); } 30% { transform:translateX(5px) rotate(.18deg); } 45% { transform:translateX(-3px); } 60% { transform:translateX(3px); } }
@keyframes poker-showdown-table { 0% { filter:brightness(1) saturate(1); } 18% { filter:brightness(1.34) saturate(1.28); } 100% { filter:brightness(1) saturate(1); } }

@media (max-width: 850px) {
  header { align-items:flex-start; }
  #user-bar { flex-wrap:wrap; justify-content:flex-end; }
  #daily-coin, #retry-support { display:none; }
  .poker-table { min-height:0; padding:16px 10px 18px; border-radius:32px; }
  .poker-players { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .poker-player { min-height:65px; padding:8px; }
  .poker-card { width:38px; height:54px; }
  .poker-hand-guide { min-width:0; margin-top:9px; }
}

.settings-actions { display:grid; gap:9px; margin:18px 0 8px; }
.settings-actions button { width:100%; min-height:46px; text-align:left; }
.settings-account-links { margin:16px 0; padding:15px; border:1px solid #ffffff16; border-radius:14px; background:#0b1423aa; }
.settings-account-links > div:first-child { display:grid; gap:4px; }
.settings-account-links small { color:var(--muted); line-height:1.45; }
.account-link-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.account-link-buttons button { display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; min-width:0; text-align:left; }
.account-link-buttons button > span { grid-row:1 / 3; display:grid; width:26px; height:26px; place-items:center; border-radius:50%; color:#18202c; background:#fff; font-weight:900; }
.account-link-buttons button:nth-child(2) > span { color:#fee500; background:#191919; }
.account-link-buttons button > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-link-buttons button.linked { border-color:#38ce9477; color:#8cf0c5; background:#113329; opacity:1; }
.slot-dialog { width:min(94vw,510px); min-width:0; padding:0; overflow:hidden; border-color:#f3c34f; background:#210e04; }
.slot-machine { position:relative; padding:24px; overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 0,#ffdb7857,transparent 38%),linear-gradient(145deg,#5b2103,#170803 58%,#471904); box-shadow:inset 0 0 0 5px #f5c34d33,inset 0 0 35px #ff9d2644; }
.slot-machine h2 { margin:5px 0 4px; color:#fff0b5; font-family:Georgia,serif; font-size:30px; text-shadow:0 0 12px #ffd66b,0 3px 2px #4a1800; }
.slot-machine .eyebrow { color:#ffdb83; }
.slot-close { position:absolute; top:10px; right:10px; min-width:32px; min-height:32px; padding:0; border-radius:50%; color:#ffe5a5; background:#4a1904; font-size:22px; }
.slot-balance { margin:0 0 14px; color:#ffe0a0; font-size:13px; }.slot-balance strong { color:#fff7d2; font-size:17px; }
.slot-reels { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:10px; border:4px solid #d99b28; border-radius:14px; background:#180806; box-shadow:0 0 0 3px #7c3505,inset 0 0 22px #000c,0 0 27px #ffb53077; }
.slot-reels span { display:grid; min-height:88px; place-items:center; border:2px solid #ffe89a; border-radius:8px; color:#4b1900; background:linear-gradient(135deg,#fffbe8,#f3bf4a 54%,#fff2ae); box-shadow:inset 0 0 12px #fff,0 4px 10px #0008; font-family:Impact,"Arial Black",sans-serif; font-size:36px; text-shadow:0 1px #fff; }
.slot-reels.spinning span { animation:slot-reel-spin .16s linear infinite; }.slot-reels.spinning span:nth-child(2) { animation-delay:.04s; }.slot-reels.spinning span:nth-child(3) { animation-delay:.08s; }
.slot-reels.win { animation:slot-win-flash .7s ease-out 1; box-shadow:0 0 0 3px #fff1a0,0 0 42px 15px #ffbd32cc,inset 0 0 22px #fff0; }.slot-reels.win span { animation:slot-win-symbol .68s cubic-bezier(.15,.8,.2,1) both; }.slot-reels.win span:nth-child(2) { animation-delay:.05s; }.slot-reels.win span:nth-child(3) { animation-delay:.1s; }
.slot-coin-burst { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible; }.slot-coin-burst i { position:absolute; left:50%; top:48%; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#fff6bc; background:radial-gradient(circle at 35% 28%,#fffde2 0 13%,#ffd75a 15% 44%,#a85b08 48%); box-shadow:0 0 11px #ffd24aaa; font-style:normal; font-size:11px; animation:slot-coin-burst .85s cubic-bezier(.12,.7,.25,1) both; }
.slot-machines { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:14px 0 10px; }.slot-machines button { min-width:0; min-height:58px; padding:5px; color:#ffeec1; border-color:#dca844; background:linear-gradient(160deg,#562006,#2d0d03); font-size:10px; font-weight:800; }.slot-machines button strong { display:block; margin-top:2px; color:#ffd057; font-size:15px; }.slot-machines button.active { border-color:#fff1a0; background:linear-gradient(160deg,#a44a09,#572003); box-shadow:0 0 16px #ffc44188; }
.slot-spin { width:100%; min-height:50px; color:#421300; border-color:#fff0a5; background:linear-gradient(135deg,#fff2a4,#f5ad23 48%,#fff0a5); box-shadow:0 5px 0 #7b2d03,0 0 20px #ffbd3d88; font-size:17px; font-weight:1000; letter-spacing:.1em; }.slot-spin:disabled { opacity:.55; }
.slot-result { min-height:20px; margin:14px 0 6px; color:#ffe7ac; font-weight:800; }.slot-result.win { color:#fff8cb; text-shadow:0 0 13px #ffd354; }
.slot-odds { margin-top:12px; color:#f7d58a; font-size:11px; text-align:left; }.slot-odds summary { cursor:pointer; text-align:center; }.slot-odds p { line-height:1.6; }
@keyframes slot-reel-spin { 50% { transform:translateY(-7px); filter:brightness(1.3) blur(.5px); } }
@keyframes slot-win-flash { 0%,100% { filter:brightness(1); } 30% { filter:brightness(1.8); } 52% { filter:brightness(1.18); } }
@keyframes slot-win-symbol { 0% { transform:scale(.8) rotateX(50deg); } 42% { transform:scale(1.19) rotateX(0); } 72% { transform:scale(.95); } 100% { transform:scale(1); } }
@keyframes slot-coin-burst { from { transform:translate(-50%,-50%) scale(.4) rotate(0); opacity:1; } to { transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.72) rotate(var(--r)); opacity:0; } }
.slot-win-banner { position:fixed; z-index:1100; top:12px; left:50%; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 28px); padding:9px 14px; border:1px solid #f4c852aa; border-radius:999px; color:#fff1b9; background:linear-gradient(110deg,#311504ed,#6b3009ed,#301304ed); box-shadow:0 6px 22px #0009,0 0 18px #ffbb3b66; font-size:13px; pointer-events:none; transform:translate(-50%,-18px) scale(.96); opacity:0; transition:opacity .18s ease,transform .18s ease; }.slot-win-banner strong { color:#fff8cf; white-space:nowrap; }.slot-win-banner span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.slot-win-banner.show { transform:translate(-50%,0) scale(1); opacity:1; }
.slot-machine::before { content:""; position:absolute; z-index:0; inset:-60%; pointer-events:none; opacity:.28; background:conic-gradient(from 0deg at 50% 48%,transparent 0 8deg,#ffe978 9deg 12deg,transparent 13deg 25deg,#ff8f15 26deg 29deg,transparent 30deg 42deg); animation:slot-light-wheel 12s linear infinite; }.slot-machine::after { content:"✦  ✦  ✦  ✦  ✦  ✦"; position:absolute; z-index:0; inset:8px; display:flex; justify-content:space-around; align-items:flex-start; color:#ffe58d; font-size:12px; letter-spacing:18px; opacity:.55; pointer-events:none; text-shadow:0 0 10px #ffcf4a; }.slot-machine > :not(.slot-jackpot-burst) { position:relative; z-index:1; }
.slot-machine.spinning { animation:slot-machine-rumble .16s linear infinite; }.slot-machine.spinning::before { opacity:.82; animation-duration:1s; }.slot-machine.spinning::after { color:#fff9c6; opacity:1; animation:slot-marquee .36s steps(2) infinite; }
.slot-reels { position:relative; overflow:visible; }.slot-reels.spinning { box-shadow:0 0 0 3px #9b3905,0 0 52px 15px #ff9410c9,inset 0 0 28px #000; animation:slot-reel-frame-pulse .22s ease-in-out infinite alternate; }.slot-reels.spinning span { animation:slot-reel-spin .095s linear infinite; filter:brightness(1.55) saturate(1.4); }.slot-reels .reel-stop { animation:slot-reel-stop .36s cubic-bezier(.1,.9,.25,1.35) both !important; filter:brightness(1.65) saturate(1.3); }
.slot-machine.jackpot { animation:slot-jackpot-machine .32s ease-in-out 6; }.slot-machine.jackpot::before { opacity:1; animation-duration:.58s; }.slot-machine.jackpot::after { color:#fffacd; opacity:1; animation:slot-marquee .12s steps(2) 12; }.slot-reels.win { box-shadow:0 0 0 4px #fff6a5,0 0 85px 31px #ffc01ee8,inset 0 0 25px #fff7; animation:slot-win-flash .33s ease-out 6; }.slot-reels.win span { animation:slot-win-symbol .56s cubic-bezier(.05,.95,.1,1.25) both; }
.slot-coin-burst { z-index:8; }.slot-coin-burst i { width:22px; height:22px; border:1px solid #fff4a5; font-size:12px; animation-duration:1.2s; }.slot-jackpot-burst { position:absolute; z-index:12; top:36%; left:50%; display:grid; gap:2px; width:min(100%,430px); pointer-events:none; transform:translate(-50%,-50%); color:#fffbd0; text-shadow:0 0 8px #ffb700,0 0 24px #ff7c00,0 4px 1px #642000; animation:slot-jackpot-title 2.15s cubic-bezier(.1,.8,.16,1) both; }.slot-jackpot-burst strong { font-family:Impact,"Arial Black",sans-serif; font-size:clamp(42px,11vw,72px); letter-spacing:.06em; }.slot-jackpot-burst span { font-size:15px; font-weight:1000; letter-spacing:.06em; }
@keyframes slot-light-wheel { to { transform:rotate(1turn); } } @keyframes slot-machine-rumble { 25% { filter:brightness(1.05); } 75% { filter:brightness(1.14); } } @keyframes slot-marquee { 50% { filter:brightness(1.9); transform:translateY(1px); } } @keyframes slot-reel-frame-pulse { to { filter:brightness(1.32); } } @keyframes slot-reel-stop { 0% { transform:translateY(-28px) scale(.82); } 64% { transform:translateY(6px) scale(1.13); } 100% { transform:translateY(0) scale(1); } } @keyframes slot-jackpot-machine { 25% { filter:brightness(1.35) saturate(1.15); } 75% { filter:brightness(1.6) saturate(1.3); } } @keyframes slot-jackpot-title { 0% { transform:translate(-50%,-50%) scale(.2) rotate(-7deg); opacity:0; } 16% { transform:translate(-50%,-50%) scale(1.18) rotate(2deg); opacity:1; } 55% { transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; } 100% { transform:translate(-50%,-80%) scale(1.12); opacity:0; } }
.slot-dialog { width:min(94vw,548px); border:2px solid #ffd361; box-shadow:0 0 0 3px #682500,0 0 44px #ff9f2377,0 28px 90px #000d; }.slot-machine { padding:62px 34px 28px; border-radius:16px; background:radial-gradient(ellipse at 50% 0,#ffd56d55,transparent 43%),radial-gradient(circle at 50% 50%,#a84b093d,transparent 62%),linear-gradient(145deg,#7b2b03,#321102 48%,#160704); box-shadow:inset 0 0 0 3px #fff0a15c,inset 0 0 0 9px #9b3b0680,inset 0 0 46px #0a0200,0 0 20px #ffb32188; }.slot-machine h2 { position:relative; margin:1px 0 7px; font-size:36px; letter-spacing:.06em; text-shadow:0 0 7px #fff8bf,0 0 22px #ffb31a,0 4px 0 #662000,0 7px 9px #000; }.slot-machine .eyebrow { font-weight:1000; letter-spacing:.16em; text-shadow:0 0 9px #ffdc79; }.slot-balance { display:inline-block; padding:5px 14px; border:1px solid #ffe09280; border-radius:999px; background:#210b02aa; box-shadow:inset 0 0 12px #ffac2428,0 0 12px #0008; }.slot-reels { padding:14px; border:5px solid #f7bd37; border-radius:18px; background:linear-gradient(145deg,#3a0d01,#160301); box-shadow:0 0 0 4px #692000,0 0 0 7px #da7c10,inset 0 0 27px #000,0 0 38px #ff9900b0; }.slot-reels span { min-height:103px; border:3px solid #8ee9ff; border-radius:11px;color:#fff;background:radial-gradient(circle at 25% 18%,#6477c7 0,#293b78 34%,#171c49 68%,#080d26 100%);box-shadow:inset 0 1px 12px #bff6ff66,inset 0 -16px 24px #05071999,0 5px 0 #43155f,0 8px 15px #000b; font-size:43px;text-shadow:0 2px 3px #000,0 0 10px #fff8; }.slot-machines { margin:17px 0 13px; gap:10px; }.slot-machines button { min-height:68px; border:2px solid #ffcf5c; border-radius:13px; background:linear-gradient(165deg,#8e3b04,#3e1001 63%,#160501); box-shadow:inset 0 1px #ffe39b80,0 4px 0 #4a1200,0 7px 14px #0008; text-shadow:0 1px #2a0800; transition:transform .16s ease,filter .16s ease; }.slot-machines button:hover { transform:translateY(-3px); filter:brightness(1.2); }.slot-machines button.active { background:linear-gradient(165deg,#e2760d,#702100 65%,#310c00); box-shadow:inset 0 1px #fff6b6,0 0 20px #ffca4aaa,0 5px 0 #6a1900; }.slot-spin { min-height:61px; border:3px solid #fff3a9; border-radius:15px; background:linear-gradient(180deg,#fff7b1,#ffc940 48%,#ee8d10); box-shadow:inset 0 2px #fffde7,0 6px 0 #7b2100,0 0 27px #ffbd35bb; font-size:19px; text-shadow:0 1px #fff4aa; }.slot-spin:not(:disabled):hover { filter:brightness(1.14); transform:translateY(-2px); }.slot-result { margin:17px 0 8px; padding:7px; border-top:1px solid #ffd15a35; border-bottom:1px solid #ffd15a35; }.slot-jackpot-strip { display:flex; justify-content:center; gap:12px; margin:10px 8px 0; padding:6px; border:1px solid #ffcb4c88; border-radius:8px; color:#fff3ae; background:linear-gradient(90deg,#310a01,#9d3b05,#310a01); box-shadow:inset 0 0 12px #ffbf2644,0 0 14px #ff9b1e44; font-size:10px; font-weight:1000; letter-spacing:.18em; text-shadow:0 0 7px #ffc738; }.slot-jackpot-strip span { color:#fff6bc; animation:slot-strip-spark 1.2s steps(2) infinite; }
.slot-crown { position:absolute; z-index:2; top:12px; left:36px; right:36px; display:flex; justify-content:space-between; pointer-events:none; }.slot-crown i { display:grid; width:19px; height:19px; place-items:center; border:1px solid #ffd66d; border-radius:50%; color:#fff8c0; background:radial-gradient(circle at 35% 28%,#fffef2 0 12%,#ffd24c 31%,#b64a02 72%); box-shadow:0 0 11px #ffd343,0 0 2px 2px #7e2d00; font-size:10px; font-style:normal; animation:slot-bulb 1.05s steps(2) infinite; }.slot-crown i:nth-child(2n) { animation-delay:.48s; }.slot-side-lights { position:absolute; z-index:2; top:125px; bottom:56px; width:12px; border:1px solid #ffcc5b; border-radius:999px; background:repeating-linear-gradient(to bottom,#fff8b4 0 7px,#e28a12 8px 13px,#5f1800 14px 23px); box-shadow:0 0 12px #ffbd32,inset 0 0 7px #fff4a9; animation:slot-side-glow .8s steps(2) infinite; }.slot-side-lights.left { left:11px; }.slot-side-lights.right { right:11px; animation-delay:.35s; }.slot-lever { position:absolute; z-index:3; right:10px; top:42%; width:22px; height:104px; border-radius:13px; background:linear-gradient(90deg,#3c0c00,#d07712 48%,#4d1100); box-shadow:inset 0 0 4px #fff2a7,0 2px 8px #000a; transform:rotate(-4deg); }.slot-lever::before { content:""; position:absolute; top:-20px; left:-7px; width:35px; height:35px; border:3px solid #ffe783; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fffbd0,#f09b1d 48%,#7e2300 72%); box-shadow:0 0 19px #ffbd39,0 4px 4px #260600; }.slot-lever i { position:absolute; bottom:9px; left:5px; width:11px; height:43px; border-radius:8px; background:#f8bb3d; box-shadow:inset 0 0 5px #fff3af; }.slot-machine.spinning .slot-lever { animation:slot-lever-pull .45s ease-in-out infinite alternate; }.slot-machine.spinning .slot-crown i,.slot-machine.jackpot .slot-crown i { animation-duration:.22s; }.slot-machine.jackpot .slot-side-lights { animation-duration:.13s; }
.slot-live-win-banner { position:absolute; z-index:18; top:104px; left:50%; display:flex; align-items:center; gap:8px; width:min(78%,360px); padding:8px 12px; border:1px solid #fff0a0; border-radius:999px; color:#fff9ca; background:linear-gradient(100deg,#4a1604ef,#b15008ef,#4a1604ef); box-shadow:0 0 0 2px #8d3100,0 0 27px #ffc43ad9; font-size:12px; pointer-events:none; transform:translate(-50%,-14px) scale(.9); opacity:0; transition:opacity .18s ease,transform .18s ease; }.slot-live-win-banner strong { white-space:nowrap; font-size:11px; letter-spacing:.06em; }.slot-live-win-banner span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:900; }.slot-live-win-banner.show { transform:translate(-50%,0) scale(1); opacity:1; animation:slot-live-banner-pulse .45s ease-in-out 5; }
@keyframes slot-bulb { 50% { filter:brightness(1.7); box-shadow:0 0 19px #fff09a,0 0 4px 3px #ffb01f; } } @keyframes slot-side-glow { 50% { filter:brightness(1.9); } } @keyframes slot-strip-spark { 50% { opacity:.42; transform:scale(.72); } } @keyframes slot-lever-pull { to { transform:translateY(12px) rotate(-4deg); } } @keyframes slot-live-banner-pulse { 50% { filter:brightness(1.65); } }
 .slot-machine > .slot-close { position:absolute; z-index:5; top:13px; right:13px; width:34px; height:34px; min-height:34px; border:2px solid #ffcb57; background:radial-gradient(circle at 35% 28%,#8f3a08,#3a0d02); box-shadow:0 0 12px #ffad2d88,0 3px 0 #250500; }
.slot-dialog { max-height:calc(100dvh - 28px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#f6bd39 #2d0a00; }.slot-dialog::-webkit-scrollbar { width:7px; }.slot-dialog::-webkit-scrollbar-thumb { border-radius:99px; background:#d47b14; }

/* Las Vegas: deep crimson velvet, black glass reels, and warm marquee gold. */
.slot-dialog { border-color:#ffe08a; background:#180006; box-shadow:0 0 0 3px #7a0719,0 0 55px #ffac276e,0 28px 90px #000e; }
.slot-machine { background:radial-gradient(ellipse at 50% -5%,#ffce674f 0,transparent 38%),radial-gradient(circle at 50% 46%,#e718393b 0,transparent 58%),linear-gradient(145deg,#980b25 0,#4a020f 45%,#180006 76%,#070003 100%); box-shadow:inset 0 0 0 3px #fff0a35c,inset 0 0 0 9px #b3092885,inset 0 0 52px #050001,0 0 28px #ffb3218f; }
.slot-machine h2 { color:#fff1b9; text-shadow:0 0 5px #fff7c4,0 0 22px #ffc233,0 4px 0 #7e071a,0 8px 11px #000; }
.slot-machine .eyebrow { color:#ffd773; }
.slot-balance { border-color:#ffd86e9c; color:#ffe7a4; background:#190006c9; box-shadow:inset 0 0 15px #d9183938,0 0 15px #0009; }
.slot-reels { border-color:#ffd76b; background:linear-gradient(145deg,#240007,#060003 58%,#200007); box-shadow:0 0 0 4px #6f0618,0 0 0 7px #e29b20,inset 0 0 29px #000,0 0 42px #ffb21ab8; }
.slot-reels span { border-color:#ffe49a; color:#fff; background:radial-gradient(circle at 30% 16%,#9f1a35 0,#500817 38%,#21030a 68%,#080003 100%); box-shadow:inset 0 2px 13px #fff1b33b,inset 0 -18px 28px #090003c7,0 5px 0 #8e1028,0 9px 17px #000c; text-shadow:0 3px 3px #000,0 0 11px #fff9; filter:drop-shadow(0 0 4px #ffdd7c55); }
.slot-machines button { border-color:#ffd767; color:#fff0bc; background:linear-gradient(165deg,#77091d,#350008 64%,#130003); box-shadow:inset 0 1px #ffe7a56e,0 4px 0 #45000b,0 7px 14px #0009; }
.slot-machines button strong { color:#ffd45e; }
.slot-machines button.active { border-color:#fff0a1; background:linear-gradient(165deg,#d51a3b,#780a21 62%,#38000c); box-shadow:inset 0 1px #fff4bd,0 0 24px #ffc943b8,0 5px 0 #620012; }
.slot-spin { color:#43000a; background:linear-gradient(180deg,#fff4b4,#ffd34d 47%,#f09810); box-shadow:inset 0 2px #fffde9,0 6px 0 #720717,0 0 31px #ffbd35cf; }
.slot-result { color:#ffe7ae; border-color:#ffd15a45; }
.slot-jackpot-strip { border-color:#ffd76aa8; color:#fff0ab; background:linear-gradient(90deg,#240006,#b70e2e,#4b0010,#b70e2e,#240006); box-shadow:inset 0 0 15px #ffcf4d40,0 0 17px #ff9b1e52; }
.slot-machine > .slot-close { border-color:#ffd86d; background:radial-gradient(circle at 35% 28%,#c3203e,#51000f); box-shadow:0 0 14px #ffbd398f,0 3px 0 #250006; }
.slot-live-win-banner { background:linear-gradient(100deg,#3b000bef,#c41335ef,#3b000bef); box-shadow:0 0 0 2px #7d071b,0 0 30px #ffc43ae0; }
.slot-machine > .slot-coin-burst { position:absolute; inset:0; z-index:8; overflow:hidden; }
.slot-machine > .eyebrow { margin-top:-10px; margin-bottom:0; }
.slot-machine[class*="win-tier-"] .slot-reels.win { box-shadow:0 0 0 4px #fff6d5,0 0 88px 32px color-mix(in srgb,var(--slot-win-color) 88%,transparent),inset 0 0 28px #fff9; }
.slot-machine.win-tier-3.jackpot,.slot-machine.win-tier-4.jackpot { animation-duration:.26s; animation-iteration-count:8; }
.slot-machine.win-tier-5.jackpot,.slot-machine.win-tier-6.jackpot { animation-duration:.21s; animation-iteration-count:10; }
.slot-machine.win-tier-7.jackpot,.slot-machine.win-tier-8.jackpot { animation-duration:.17s; animation-iteration-count:13; }
.slot-machine.win-tier-5 .slot-jackpot-burst strong,.slot-machine.win-tier-6 .slot-jackpot-burst strong { font-size:clamp(48px,12vw,78px); }
.slot-machine.win-tier-7 .slot-jackpot-burst strong,.slot-machine.win-tier-8 .slot-jackpot-burst strong { font-size:clamp(54px,13vw,86px); text-shadow:0 0 9px #fff,0 0 27px var(--slot-win-color),0 5px 1px #341100; }
.slot-tier-aura { position:absolute; z-index:7; inset:8% 4%; display:grid; place-items:center; overflow:hidden; border-radius:22px; pointer-events:none; }
.slot-tier-aura i { position:absolute; width:110px; aspect-ratio:1; border:3px solid var(--slot-win-color); border-radius:50%; box-shadow:0 0 26px var(--slot-win-color),inset 0 0 22px var(--slot-win-color); animation:slot-tier-ring 1.15s ease-out both; }
.slot-tier-aura i:nth-child(2){animation-delay:.14s}.slot-tier-aura i:nth-child(3){animation-delay:.28s}.slot-tier-aura i:nth-child(4){animation-delay:.42s}.slot-tier-aura i:nth-child(5){animation-delay:.56s}
.slot-balance { margin-bottom:8px; }
.slot-pity { width:calc(100% - 12px); min-width:0; margin:0 auto 12px; padding:7px 10px 8px; border:1px solid #ffd76a70; border-radius:11px; color:#ffe8af; background:linear-gradient(100deg,#1b0007d9,#4a0614d9,#1b0007d9); box-shadow:inset 0 0 13px #0008,0 0 10px #ffb52b25; text-align:left; transition:border-color .2s ease,box-shadow .2s ease,filter .2s ease; }
.slot-pity-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:1000; }
.slot-pity-head span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.04em; }
.slot-pity-head b { flex:none; color:#ffd45d; font-size:13px; }
.slot-pity-track { height:7px; margin:5px 0 4px; overflow:hidden; border:1px solid #ffdf7a42; border-radius:999px; background:#080003; box-shadow:inset 0 1px 4px #000; }
.slot-pity-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d91337,#ff7a24 58%,#ffe977); box-shadow:0 0 9px #ffbd3d; transition:width .38s cubic-bezier(.2,.8,.2,1); }
.slot-pity small { display:block; overflow:hidden; color:#dcbf8a; font-size:10.5px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.slot-hard-pity { display:flex; align-items:center; justify-content:space-between; margin-top:5px; padding-top:5px; border-top:1px solid #ffd76a30; color:#ffecc3; font-size:10.5px; font-weight:900; }
.slot-hard-pity b { color:#fff29a; font-size:12px; }
.slot-pity.hard-ready .slot-hard-pity { color:#fff; text-shadow:0 0 8px #fff06a; }
.slot-pity.ready { border-color:#fff09a; background:linear-gradient(100deg,#4d0615,#b61535,#4d0615); box-shadow:inset 0 0 15px #ffcc4935,0 0 21px #ffc5368f; animation:slot-pity-ready .72s ease-in-out infinite alternate; }
.slot-pity.ready .slot-pity-head b,.slot-pity.ready small { color:#fff5bd; text-shadow:0 0 8px #ffd24f; }
.slot-machine.pity-ready .slot-spin { box-shadow:inset 0 2px #fffde9,0 6px 0 #720717,0 0 38px #ffe35de8; animation:slot-pity-spin 1s ease-in-out infinite alternate; }
@keyframes slot-pity-ready { to { filter:brightness(1.18); transform:translateY(-1px); } }
@keyframes slot-pity-spin { to { filter:brightness(1.16); transform:translateY(-1px) scale(1.01); } }
@keyframes slot-tier-ring { from{opacity:.95;transform:scale(.3)} to{opacity:0;transform:scale(5.4)} }
@media (max-height:920px) and (min-width:561px) { .slot-machine { padding:43px 34px 2px; }.slot-machine h2 { font-size:31px; }.slot-balance { margin-bottom:7px; }.slot-reels { padding:10px; }.slot-reels span { min-height:82px; font-size:36px; }.slot-machines { margin:8px 0 6px; }.slot-machines button { min-height:53px; }.slot-spin { min-height:51px; font-size:17px; }.slot-result { margin:8px 0 4px; padding:5px; }.slot-jackpot-strip { margin-top:4px; padding:4px; }.slot-odds { margin-top:5px; }.slot-side-lights { top:100px; bottom:34px; } }
@media (max-width:460px) { .slot-machines { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.slot-machines button { min-height:54px; } }
@media (max-width:560px) { .slot-machine { padding:57px 28px 23px; }.slot-machine h2 { font-size:30px; }.slot-reels span { min-height:84px; font-size:35px; }.slot-side-lights { width:9px; }.slot-lever { display:none; }.slot-crown { left:30px; right:30px; }.slot-crown i { width:15px; height:15px; font-size:8px; } }
@media (max-height:920px) and (min-width:561px) { .slot-pity { margin-bottom:8px; padding:5px 9px 6px; }.slot-pity-track { margin:3px 0; }.slot-pity small { font-size:10px; }.slot-hard-pity{margin-top:3px;padding-top:3px;font-size:10px}.slot-hard-pity b{font-size:11px} }
@media (max-width:560px) { .slot-pity { width:100%; padding-inline:8px; }.slot-pity-head { font-size:12px; }.slot-pity-head b { font-size:12px; }.slot-pity small { font-size:10px; }.slot-hard-pity{font-size:10px}.slot-hard-pity b{font-size:11px} }
#settings-dialog p { margin:5px 0 0; color:var(--muted); font-size:13px; }

dialog {
  min-width: 360px;
  padding: 24px;
  border: 1px solid #ffffff1c;
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(145deg, #182337, #0d1522);
  box-shadow: 0 25px 90px #000c;
}
dialog::backdrop { background: #030712c7; backdrop-filter: blur(5px); }
dialog label { display: block; margin: 10px 0; color: #aab5c7; }
dialog input, dialog select { display: block; width: 100%; margin-top: 4px; }
#create-dialog { width:min(560px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow-y:auto; overscroll-behavior:contain; }
menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 8px; border-bottom: 1px solid #ffffff16; text-align: left; }
th { color: #a69eff; }
#result-dialog { width:min(680px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; }
#results { min-height:92px; }
.result-pending td { padding:22px 10px; color:var(--muted); text-align:center; }
.result-pending-participant td { color:#8996aa; }
.result-pending-participant td:nth-child(2) { color:#d7deea; font-weight:700; }
.result-pending-spinner { display:inline-block; width:13px; height:13px; margin-right:7px; border:2px solid #8b82ff55; border-top-color:#a69eff; border-radius:50%; vertical-align:-2px; animation:result-pending-spin .8s linear infinite; }
@keyframes result-pending-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .result-pending-spinner { animation:none; } }

#toast {
  position: fixed;
  top: auto;
  right: auto;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 2147483647;
  display: none;
  width: max-content;
  max-width: min(560px, calc(100vw - 28px));
  margin: 0;
  padding: 11px 17px;
  transform: translateX(-50%);
  border: 1px solid #ffffff18;
  border-radius: 10px;
  color: white;
  background: #151e2ff2;
  box-shadow: 0 12px 35px #0009;
  text-align: center;
  pointer-events: none;
}

.global-announcement-ticker {
  position: fixed;
  inset: max(8px, env(safe-area-inset-top)) 0 auto;
  z-index: 2147483600;
  display:grid;
  width:100%;
  max-width:none;
  min-height:46px;
  margin:0;
  padding:0;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid #ffffff24;
  border-right:0;
  border-left:0;
  color:#fff;
  background:linear-gradient(90deg,#05070af7,#11151bf8 46%,#05070af7);
  box-shadow:0 8px 28px #000b,0 0 18px #5ad9d72b;
  pointer-events:none;
}
.global-announcement-ticker[hidden] { display:none; }
.global-announcement-ticker::backdrop { background:transparent; pointer-events:none; }
.global-announcement-ticker>strong { position:relative; z-index:2; align-self:stretch; display:flex; align-items:center; padding:0 18px; color:#79f3df; background:#080c11; box-shadow:12px 0 22px #000; font-size:11px; letter-spacing:.12em; white-space:nowrap; }
.global-announcement-ticker>div { min-width:0; overflow:hidden; }
.global-announcement-ticker p { width:max-content; margin:0; padding-left:100%; color:#f4f7fb; font-size:14px; font-weight:800; letter-spacing:.02em; white-space:nowrap; text-shadow:0 1px 5px #000; }
.global-announcement-ticker p.running { animation:global-announcement-marquee var(--ticker-duration,24s) linear both; }
@keyframes global-announcement-marquee { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@media (max-width:560px) { .global-announcement-ticker { min-height:40px; }.global-announcement-ticker>strong { padding:0 10px; font-size:9px; }.global-announcement-ticker p { font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .global-announcement-ticker p.running { animation-timing-function:linear; } }
#toast:popover-open { display: block; }
#toast::backdrop { background: transparent; pointer-events: none; }
#toast.toast-dialog-fallback {
  position: absolute;
  top: auto;
  right: auto;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 2147483647;
  box-shadow: 0 16px 46px #000d, 0 0 0 2px #8c7cff55, 0 0 28px #7568ff4d;
}

.wordchain-play-area {
  display: grid;
  gap: 13px;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #6856a4;
  border-radius: 18px;
  background: radial-gradient(circle at top, #7660bc35, transparent 54%), #111827;
}
.wordchain-hud { position:relative; display:grid; grid-template-columns:1fr; gap:6px 14px; align-items:center; }
.wordchain-hud strong { display:flex; grid-column:1 / -1; min-height:74px; align-items:center; justify-content:center; color:#f0ecff; font-size:clamp(34px,8vw,52px); letter-spacing:.08em; text-align:center; }
.wordchain-hud #wordchain-required { position:absolute; top:26px; right:0; color:#c6bbf7; }
.wordchain-hud strong.revealing { color:#ffffff; text-shadow:0 0 10px #f8fafc,0 0 26px #8b7dff,0 4px 10px #000c; }
.wordchain-typed-letter { display:inline-block; font-style:normal; animation:wordchain-typed-letter .18s cubic-bezier(.15,1.45,.45,1); }
@keyframes wordchain-typed-letter { from { opacity:0; transform:translateY(18px) scale(.55) rotate(-5deg); filter:blur(2px); } to { opacity:1; transform:translateY(0) scale(1) rotate(0); filter:blur(0); } }
.wordchain-hud span { color:#c6bbf7; font-weight:800; text-align:right; }
.wordchain-hud #wordchain-turn { grid-column:1 / -1; padding:8px 10px; border-radius:9px; color:#dbeafe; background:#0b1220; text-align:center; }
.wordchain-time { display:grid; grid-column:1 / -1; gap:5px; color:#dbeafe; font-size:13px; font-weight:800; }
.wordchain-time-track { height:13px; overflow:hidden; border:1px solid #8d7ad2; border-radius:999px; background:#0a1020; box-shadow:inset 0 1px 5px #0009; }
.wordchain-time-track i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#34d399,#a3e635 55%,#facc15); box-shadow:0 0 14px #7cffb199; transition:background .2s ease; }
.wordchain-time-track i.low { background:linear-gradient(90deg,#fb7185,#f97316); }
.wordchain-round-time { display:grid; grid-column:1 / -1; gap:5px; color:#b8c8dc; font-size:12px; font-weight:800; }
.wordchain-round-time-track { height:8px; overflow:hidden; border:1px solid #51647d; border-radius:999px; background:#0a1020; }
.wordchain-round-time-track i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#60a5fa,#38bdf8); transition:background .2s ease; }
.wordchain-round-time-track i.low { background:linear-gradient(90deg,#f59e0b,#fb7185); }
.wordchain-dictionary { grid-column:1 / -1; color:#9caad0; font-size:12px; font-weight:700; text-align:center; }
.wordchain-invalid-flash { position:absolute; z-index:2; top:0; right:0; left:0; display:grid; min-height:74px; place-items:center; color:#ff5269; font-size:clamp(37px,8.3vw,57px); font-weight:1000; letter-spacing:.06em; text-align:center; text-decoration:line-through; text-decoration-thickness:4px; text-decoration-color:#ff9aa8; text-shadow:0 0 18px #ff375d88,0 3px 8px #000b; pointer-events:none; animation:wordchain-invalid-flash .22s ease-out; }
.wordchain-hud.flash-active #wordchain-current { visibility:hidden; }
@keyframes wordchain-invalid-flash { from { opacity:0; transform:scale(.86); } to { opacity:1; transform:scale(1); } }
.wordchain-one-shot-setting { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:62px; padding:10px 12px; border:1px solid #7c6cf060; border-radius:12px; color:#e6e1ff !important; background:linear-gradient(120deg,#332765c9,#191b3bc9); cursor:pointer; }
.wordchain-one-shot-setting span { display:grid; gap:3px; }.wordchain-one-shot-setting b { color:#f4f1ff; font-size:14px; }.wordchain-one-shot-setting small { color:#bdb6e8; line-height:1.35; }
.setting-grid .wordchain-one-shot-setting input { position:absolute; width:1px; height:1px; min-height:0; margin:0; opacity:0; pointer-events:none; }
.wordchain-one-shot-setting i { position:relative; flex:0 0 48px; width:48px; height:28px; border:1px solid #7d7699; border-radius:999px; background:#131526; box-shadow:inset 0 1px 5px #0009; transition:background .18s ease,border-color .18s ease; }
.wordchain-one-shot-setting i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#a4abc0; box-shadow:0 2px 5px #0009; transition:transform .18s ease,background .18s ease; }
.wordchain-one-shot-setting input:checked + i { border-color:#a99bff; background:#6c5ce7; }.wordchain-one-shot-setting input:checked + i::after { transform:translateX(20px); background:#fff; }
.wordchain-one-shot-setting:has(input:focus-visible) { outline:3px solid #7568ff55; }
.wordchain-answer, .wordchain-result-answer { padding:10px 12px; border:1px solid #fbbf2470; border-radius:10px; color:#ffe7a6; background:#3a260a88; font-size:13px; line-height:1.55; }
.wordchain-answer { max-height:94px; overflow:auto; }
.wordchain-result-answer { margin-top:12px; }
.wordchain-result-answer b { color:#fff2bd; }.wordchain-result-answer p { margin:5px 0 0; color:#f5d885; }
.wordchain-form { display:flex; gap:8px; }
.wordchain-form input { min-width:0; flex:1; font-size:18px; }
.wordchain-form button { min-width:92px; }
.wordchain-item-row { display:flex; align-items:stretch; gap:8px; }
.wordchain-item-row > button { min-height:42px; border-color:#8b7cf0; background:linear-gradient(135deg,#292451,#181b37); }
.wordchain-item-row > button:disabled { border-color:#465066; background:#171d2b; }
.wordchain-item-row #use-wordchain-hint { flex:0 0 auto; color:#f1edff; }
.wordchain-hint { min-width:0; flex:1; overflow:hidden; color:#fff0a8 !important; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.wordchain-history { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); max-height:250px; margin:0; padding:0; overflow:auto; list-style:none; }
.wordchain-history li { display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid #ffffff12; background:#0a1020; }
.wordchain-history b { color:#fff; }.wordchain-history span { color:#aebbd1; font-size:12px; white-space:nowrap; }
@media (max-width:520px) { .wordchain-play-area { padding:13px; }.wordchain-hud { grid-template-columns:1fr; }.wordchain-hud span { text-align:left; }.wordchain-form button { min-width:74px; }.wordchain-item-row { flex-wrap:wrap; }.wordchain-item-row > button { flex:1 1 100%; }.wordchain-history { grid-template-columns:1fr; } }

@media (max-width: 850px) {
  .layout { display: block; }
  aside { width: auto; }
  .room-spectator-panel { width:auto; min-height:0; margin-bottom:12px; }
  .room-spectator-panel>section { max-height:210px; }
  .room-card { align-items:flex-start; gap:10px; }
  .room-card-actions { flex-direction:column; }
  .room-columns { grid-template-columns: 1fr; }
  .shell { padding: 12px; }
  .auth { margin: 7vh auto; padding: 25px; }
}