:root {
  --green: #58cc02; --green-d: #58a700;
  --blue: #1cb0f6; --blue-d: #1899d6;
  --red: #ff4b4b; --red-d: #ea2b2b;
  --yellow: #ffc800; --yellow-d: #e5a800;
  --orange: #ff9600; --orange-d: #e08600;
  --purple: #ce82ff; --purple-d: #a568cc;
  --bg: #ffffff; --soft: #f7f7f7; --card: #ffffff;
  --text: #4b4b4b; --strong: #3c3c3c; --muted: #8e8e8e; --line: #e5e5e5;
  --radius: 16px;
  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
body.casino {
  --bg: #0a0517; --soft: #140b2b; --card: #160d30;
  --text: #e8e2ff; --strong: #ffffff; --muted: #8f86bd; --line: #2d2158;
  --neon-pink: #ff2bd6; --neon-cyan: #27f3ff; --neon-violet: #8a4dff; --neon-gold: #ffd84d;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-weight: 700; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; transition: background .3s;
}
h1, h2, h3 { color: var(--strong); margin: 0; font-weight: 900; }
button { font-family: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.avatar { display: block; flex: none; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--green); --bd: var(--green-d); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 900; font-size: 15px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--fg); background: var(--b); border: 0; border-radius: var(--radius);
  padding: 14px 20px; cursor: pointer; box-shadow: 0 4px 0 var(--bd);
  transition: transform .06s, box-shadow .06s, filter .15s; user-select: none; text-decoration: none;
}
.btn:hover { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--bd); }
.btn:disabled { --b: var(--line); --bd: var(--line); --fg: var(--muted); cursor: not-allowed; box-shadow: 0 4px 0 var(--line); }
.btn.blue { --b: var(--blue); --bd: var(--blue-d); }
.btn.red { --b: var(--red); --bd: var(--red-d); }
.btn.yellow { --b: var(--yellow); --bd: var(--yellow-d); --fg: #5a4200; }
.btn.purple { --b: var(--purple); --bd: var(--purple-d); }
.btn.ghost { --b: var(--card); --bd: var(--line); --fg: var(--blue); border: 2px solid var(--line); padding: 12px 18px; }
.btn.small { font-size: 12px; padding: 8px 12px; border-radius: 12px; box-shadow: 0 3px 0 var(--bd); }
.btn.block { width: 100%; }
.btn.big { font-size: 18px; padding: 18px 24px; }
body.casino .btn.ghost { --fg: var(--neon-cyan); }

.field {
  width: 100%; font: inherit; font-weight: 700; font-size: 16px; color: var(--strong);
  background: var(--soft); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; outline: none;
}
.field:focus { border-color: var(--blue); }
.field::placeholder { color: var(--muted); }

/* ---------- auth ---------- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.auth-hero { display: grid; justify-items: center; gap: 6px; margin-bottom: 8px; text-align: center; }
.auth-hero h1 { font-size: 34px; }
.auth-hero p { margin: 0; color: var(--muted); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tab { border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); padding: 10px; font: inherit; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; }
.tab.on { border-color: var(--blue); color: var(--blue); background: rgba(28,176,246,.1); }
.error { color: var(--red); font-weight: 800; min-height: 1.3em; text-align: center; }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; min-height: 100%; max-width: 1280px; margin: 0 auto; }
.side { position: sticky; top: 0; height: 100vh; padding: 20px 14px; border-right: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 12px 18px; font-size: 24px; font-weight: 900; color: var(--green); letter-spacing: -.3px; }
body.casino .brand { color: var(--neon-pink); text-shadow: 0 0 12px var(--neon-pink); }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 2px solid transparent;
  color: var(--muted); font-weight: 900; text-transform: uppercase; letter-spacing: .8px; font-size: 14px; text-decoration: none; cursor: pointer;
}
.nav a:hover { background: var(--soft); }
.nav a.on { background: rgba(28,176,246,.12); border-color: var(--blue); color: var(--blue); }
body.casino .nav a.on { background: rgba(255,43,214,.12); border-color: var(--neon-pink); color: var(--neon-pink); }
.nav .ico { font-size: 22px; width: 28px; text-align: center; }
.side-foot { margin-top: auto; display: grid; gap: 8px; }
.main { padding: 28px 28px 110px; min-width: 0; }
.rail { padding: 28px 20px; display: grid; gap: 16px; align-content: start; }

.card {
  background: var(--card); border: 2px solid var(--line); border-radius: 20px; padding: 18px;
}
.card h3 { font-size: 18px; margin-bottom: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 12px; }

/* stat chips */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; padding: 6px 12px; border-radius: 999px; background: var(--soft); border: 2px solid var(--line); font-size: 15px; }
.chip.coin { color: var(--yellow-d); }
.chip.fire { color: var(--orange); }
body.casino .chip.coin { color: var(--neon-gold); border-color: #4a3a12; box-shadow: 0 0 10px rgba(255,216,77,.25); }

/* ---------- home ---------- */
.hello { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hello h1 { font-size: 28px; }
.section-title { font-size: 20px; margin: 24px 0 12px; }
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tile {
  position: relative; overflow: hidden; border-radius: 22px; padding: 20px; color: #fff; display: grid; gap: 10px; align-content: space-between; min-height: 210px;
  border: 0; box-shadow: 0 6px 0 var(--tile-d, rgba(0,0,0,.2)); background: var(--tile, var(--green));
}
.tile h2 { color: #fff; font-size: 24px; }
.tile p { margin: 0; opacity: .92; font-weight: 700; }
.tile .art { position: absolute; right: -10px; top: -14px; font-size: 92px; opacity: .22; transform: rotate(12deg); pointer-events: none; }
.tile .tile-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.tile .btn { --b: #fff; --bd: rgba(0,0,0,.22); --fg: var(--tile-d); }
.tile.cards { --tile: var(--green); --tile-d: var(--green-d); }
.tile.casino-door {
  --tile-d: #3b1370; background: radial-gradient(circle at 20% 10%, #3b1370, #0b0620 70%); border: 2px solid var(--neon-pink, #ff2bd6);
  box-shadow: 0 0 22px rgba(255,43,214,.45), inset 0 0 22px rgba(138,77,255,.35), 0 6px 0 #1a0838;
}
.tile.casino-door h2 { color: #ff7ae9; text-shadow: 0 0 14px #ff2bd6; }
.tile.casino-door .btn { --b: #ff2bd6; --bd: #a3178b; --fg: #fff; box-shadow: 0 4px 0 #a3178b, 0 0 16px rgba(255,43,214,.6); }
.tile.board { --tile: var(--blue); --tile-d: var(--blue-d); filter: saturate(.55) brightness(.98); }
.tile .badge { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.25); border-radius: 999px; padding: 4px 10px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; }
.joinrow { display: flex; gap: 8px; }
.joinrow .field { max-width: 150px; text-transform: uppercase; letter-spacing: 3px; text-align: center; padding: 10px; font-weight: 900; }

/* ---------- friends ---------- */
.friend { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.friend .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); border: 2px solid var(--card); margin-left: -18px; margin-top: 30px; flex: none; }
.friend .dot.on { background: var(--green); }
.friend .nm { font-weight: 900; color: var(--strong); }
.friend .sub { font-size: 13px; color: var(--muted); }
.addrow { display: flex; gap: 8px; margin-top: 10px; }
.addrow .field { padding: 10px 12px; font-size: 14px; }
.reqs { display: grid; gap: 6px; margin: 8px 0; }

/* ---------- profile ---------- */
.profile-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.profile-head h1 { font-size: 32px; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 18px; }
.stat { border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.stat b { display: block; font-size: 24px; color: var(--strong); font-weight: 900; }
.stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.charGrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.char { border: 2px solid var(--line); border-radius: 18px; padding: 14px 10px; display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--card); cursor: pointer; font: inherit; color: var(--text); }
.char.on { border-color: var(--green); box-shadow: 0 4px 0 var(--green); }
.char.locked { cursor: default; }
.char.locked .avatar { filter: grayscale(1) brightness(.75); opacity: .55; }
.char b { color: var(--strong); font-weight: 900; }
.char small { color: var(--muted); font-weight: 700; font-size: 12px; min-height: 2.4em; }

/* ---------- toasts / modals ---------- */
.toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; width: min(92vw, 420px); }
.toast { background: var(--strong); color: var(--bg); border-radius: 14px; padding: 12px 16px; font-weight: 800; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex; align-items: center; gap: 10px; animation: drop .25s ease; }
.toast.error { background: var(--red); color: #fff; }
.toast.ok { background: var(--green-d); color: #fff; }
.toast .btn { margin-left: auto; --b: #fff; --bd: rgba(0,0,0,.25); --fg: var(--green-d); }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 40; padding: 16px; animation: fade .2s; }
.modal { background: var(--card); border-radius: 24px; padding: 24px; max-width: 460px; width: 100%; text-align: center; display: grid; gap: 14px; justify-items: center; max-height: 90vh; overflow: auto; border: 2px solid var(--line); }
.modal.left { text-align: left; justify-items: stretch; }
.modal h2 { font-size: 26px; }
.modal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
@keyframes fade { from { opacity: 0; } }
.banner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--orange); color: #fff; text-align: center; font-weight: 900; padding: 8px; z-index: 60; }

/* ---------- casino ---------- */
.neon-title { font-size: 38px; color: #ff7ae9; text-shadow: 0 0 6px #ff2bd6, 0 0 22px #ff2bd6, 0 0 40px #8a4dff; letter-spacing: 1px; animation: flicker 5s infinite; }
@keyframes flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
.vault { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 22px; border: 2px solid var(--neon-gold); background: linear-gradient(135deg, #261a06, #140b2b); box-shadow: 0 0 20px rgba(255,216,77,.25); flex-wrap: wrap; }
.vault .amount { font-size: 40px; color: var(--neon-gold); text-shadow: 0 0 14px rgba(255,216,77,.6); font-weight: 900; }
.neon-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 16px; }
.neon-tile { border-radius: 20px; padding: 18px; min-height: 160px; display: grid; align-content: space-between; gap: 8px; background: #120a28; border: 2px solid var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 20%, transparent); }
.neon-tile h3 { color: var(--c); text-shadow: 0 0 10px var(--c); font-size: 22px; }
.neon-tile .soon { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.neon-tile .ico { font-size: 40px; }

/* ---------- room: lobby ---------- */
.roomhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.code { font-size: 40px; letter-spacing: 8px; font-weight: 900; color: var(--blue); background: rgba(28,176,246,.1); border: 2px dashed var(--blue); border-radius: 16px; padding: 4px 18px; }
.seats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.seat { display: flex; align-items: center; gap: 10px; border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.seat.empty { border-style: dashed; color: var(--muted); justify-content: center; min-height: 64px; }
.tag { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; padding: 2px 8px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); }
.tag.host { color: var(--yellow-d); border-color: var(--yellow); }
.tag.bot { color: var(--purple-d); border-color: var(--purple); }

/* ---------- room: table ---------- */
.table-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.table-top .grow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.players { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pl { border: 2px solid var(--line); border-radius: 20px; padding: 12px 14px; display: grid; gap: 8px; background: var(--card); position: relative; transition: border-color .2s, box-shadow .2s; }
.pl.me { border-color: rgba(28,176,246,.7); }
.pl.turn { border-color: var(--green); box-shadow: 0 0 0 3px rgba(88,204,2,.25); }
.pl.busted { opacity: .72; border-color: var(--red); }
.pl.stayed, .pl.frozen { border-color: var(--blue); }
.pl-head { display: flex; align-items: center; gap: 10px; }
.pl-name { font-weight: 900; color: var(--strong); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-score { margin-left: auto; text-align: right; line-height: 1.1; }
.pl-score b { font-size: 26px; color: var(--strong); font-weight: 900; }
.pl-score small { display: block; font-size: 12px; color: var(--green-d); font-weight: 900; }
.status { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; padding: 2px 8px; border-radius: 999px; color: #fff; }
.status.busted { background: var(--red); } .status.stayed { background: var(--blue); }
.status.frozen { background: #62d0ff; } .status.active { background: var(--green); } .status.flip7 { background: var(--yellow-d); }
.hand { display: flex; gap: 6px; flex-wrap: wrap; min-height: 76px; align-items: flex-start; }
.card-f {
  --c: #999; width: 46px; height: 68px; border-radius: 10px; background: var(--c); color: #fff; display: grid; place-items: center; position: relative;
  box-shadow: 0 4px 0 rgba(0,0,0,.2); font-weight: 900; user-select: none; flex: none;
}
.card-f .v { font-size: 25px; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.card-f .k { position: absolute; top: 3px; left: 5px; font-size: 10px; opacity: .85; }
.card-f.mod { --c: var(--orange); }
.card-f.mod .v { font-size: 20px; }
.card-f.freeze { --c: #38c3ff; } .card-f.flip3 { --c: var(--yellow-d); } .card-f.second { --c: var(--red); }
.card-f.act .v { font-size: 22px; }
.card-f.act .k { font-size: 9px; left: 0; right: 0; text-align: center; top: auto; bottom: 4px; letter-spacing: .3px; }
.card-f.bust { outline: 3px solid var(--red); filter: saturate(.7); }
.card-f.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: translateY(-26px) scale(.6) rotate(-8deg); opacity: 0; } }
.dealer { font-size: 11px; background: var(--yellow); color: #5a4200; border-radius: 999px; padding: 1px 7px; font-weight: 900; }
.log { margin-top: 14px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.log div:last-child { color: var(--strong); }
.emote-pop { position: absolute; right: 10px; top: -14px; font-size: 34px; animation: floaty 2.2s ease-out forwards; pointer-events: none; }
@keyframes floaty { 0% { transform: translateY(10px) scale(.5); opacity: 0; } 15% { transform: translateY(0) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }

.actionbar {
  position: fixed; left: 250px; right: 340px; bottom: 0; background: var(--bg); border-top: 2px solid var(--line); padding: 12px 20px; z-index: 20;
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 84px;
}
.actionbar .msg { font-weight: 900; color: var(--strong); }
.actionbar .risk { font-size: 13px; color: var(--muted); }
.emotes { display: flex; gap: 4px; flex-wrap: wrap; }
.emotes button { font-size: 20px; background: var(--soft); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; padding: 2px 8px; }
.emotes button:active { transform: scale(.92); }
.scoretable { width: 100%; border-collapse: collapse; text-align: left; }
.scoretable td, .scoretable th { padding: 8px 6px; border-bottom: 2px solid var(--line); }
.scoretable th { font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .6px; }
.winner-avatar { animation: bounce 1s infinite; }
@keyframes bounce { 50% { transform: translateY(-10px); } }

/* ---------- responsive ---------- */
.bottomnav { display: none; }
@media (max-width: 1100px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .rail { grid-column: 2; padding-top: 0; }
  .actionbar { right: 0; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding: 16px 14px 150px; }
  .rail { grid-column: 1; padding: 0 14px 100px; }
  .actionbar { left: 0; bottom: 62px; }
  .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 2px solid var(--line); z-index: 30; }
  .bottomnav a { flex: 1; text-align: center; padding: 10px 0 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 900; text-decoration: none; }
  .bottomnav a .ico { display: block; font-size: 22px; }
  .bottomnav a.on { color: var(--blue); }
  body.casino .bottomnav a.on { color: var(--neon-pink); }
  .players { grid-template-columns: 1fr; }
  .table-top .chip { font-size: 12px; padding: 3px 9px; }
  .actionbar { gap: 8px; padding: 8px 12px; min-height: 0; }
  .actionbar .btn.big { font-size: 16px; padding: 12px 18px; }
  .emotes { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .emotes button { font-size: 18px; padding: 0 8px; flex: none; }
  .neon-title { font-size: 30px; }
  .code { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }