@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #080a09;
  --panel: #0e110f;
  --panel-2: #141815;
  --ink: #f1f2ec;
  --muted: #7e867f;
  --red: #e54137;
  --green: #72f7a6;
  --violet: #9775ff;
  --line: rgba(255,255,255,.1);
  --mono: "DM Mono", monospace;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; }
button { color: inherit; font: inherit; }
.game-shell { height: 100svh; display: grid; grid-template: 64px 1fr / 58px 1fr 286px; }
.game-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: rgba(8,10,9,.96);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
.game-brand { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-size: 11px; font-weight: 900; }
.game-brand b { color: var(--red); }
.game-logo { width: 36px; height: 36px; display: block; object-fit: cover; border-radius: 5px; }
.network-status { margin-left: auto; margin-right: 30px; display: flex; align-items: center; gap: 8px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.network-status i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px var(--green); }
.network-status span { border-left: 1px solid var(--line); padding-left: 8px; color: var(--ink); }
.header-actions { display: flex; gap: 8px; }
.game-buy-button {
  height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #65e8a0;
  color: #092b1b;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.game-buy-button:hover { background: #86f9b9; transform: translateY(-1px); }
.pump-mark {
  position: relative;
  display: inline-block;
  width: 21px;
  height: 13px;
  border: 2px solid #0b3e29;
  border-radius: 999px;
  overflow: hidden;
  transform: rotate(-35deg);
  flex: 0 0 auto;
  background: white;
}
.pump-mark i { position: absolute; inset: 50% 0 0; display: block; background: #22b968; border-top: 1px solid #0b3e29; }
.chat-toggle { display: none; height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent; font: 8px var(--mono); text-transform: uppercase; cursor: pointer; }
.icon-button, .wallet-button { height: 36px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.icon-button { width: 36px; }
.wallet-button { padding: 0 15px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.wallet-button span { color: #764dff; font-size: 15px; margin-right: 7px; }

.left-rail { grid-row: 2; padding: 12px 8px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.rail-button { width: 41px; height: 41px; border: 0; background: transparent; color: #687069; cursor: pointer; font-size: 16px; border-left: 2px solid transparent; }
.rail-button:hover, .rail-button.active { color: white; background: rgba(255,255,255,.05); border-left-color: var(--red); }
.rail-spacer { flex: 1; }

.table-stage {
  --camera-x: 0px;
  --camera-y: 0px;
  --far-x: 0px;
  --far-y: 0px;
  --seat-x: 0px;
  --pedestal-x: 0px;
  --tilt-x: 0deg;
  --tilt-z: 0deg;
  --avatar-yaw: 0deg;
  --avatar-pitch: 0deg;
  --avatar-shift: 0px;
  grid-row: 2;
  grid-column: 2;
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: radial-gradient(ellipse at 50% 28%, #283128 0, #111512 37%, #080a09 72%);
}
.room-architecture { position: absolute; inset: 0; overflow: hidden; pointer-events: none; perspective: 900px; }
.back-wall {
  position: absolute; left: -8%; right: -8%; top: -18%; height: 69%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 23% 77%, rgba(0,0,0,.72)),
    repeating-linear-gradient(90deg, transparent 0 11.8%, rgba(255,255,255,.035) 12% 12.2%),
    linear-gradient(180deg, #171c18, #0b0e0c);
  transform: translate3d(var(--far-x), var(--far-y), -120px) scale(1.18);
  box-shadow: inset 0 -55px 80px rgba(0,0,0,.8);
  transition: transform .18s ease-out;
}
.wall-emblem {
  position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%);
  font-size: clamp(54px, 8vw, 120px); font-weight: 900; color: rgba(255,255,255,.025);
  text-shadow: 0 8px 20px rgba(0,0,0,.65);
}
.wall-emblem span { color: rgba(229,65,55,.12); }
.wall-light {
  position: absolute; top: 21%; width: 8px; height: 86px; border-radius: 8px;
  background: #f4e3b4; box-shadow: 0 0 14px #f4e3b4, 0 0 80px 25px rgba(244,227,180,.12);
}
.wall-light-left { left: 17%; }
.wall-light-right { right: 17%; }
.floor-plane {
  position: absolute; left: -30%; right: -30%; bottom: -54%; height: 94%;
  transform: rotateX(67deg) translate3d(var(--far-x), var(--far-y), 0);
  transform-origin: center top;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(ellipse at center top, #242a25, #080a09 58%);
  background-size: 70px 70px, 70px 70px, auto;
  mask-image: linear-gradient(to bottom, black, transparent 89%);
  transition: transform .18s ease-out;
}
.room-meta { position: absolute; top: 18px; left: 22px; right: 22px; display: flex; justify-content: space-between; z-index: 5; }
.room-meta div { display: grid; gap: 3px; }
.room-meta small { color: var(--muted); font: 8px var(--mono); }
.room-meta strong { font-size: 12px; }
.room-meta .blinds { text-align: right; }
.ambient-light { position: absolute; top: -170px; width: 280px; height: 460px; filter: blur(40px); opacity: .11; transform: rotate(18deg); }
.light-left { left: 5%; background: var(--violet); }
.light-right { right: 5%; background: var(--green); transform: rotate(-18deg); }
.world-grid {
  position: absolute; inset: 0; opacity: .08;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.poker-world {
  position: absolute; inset: 22px 0 138px; perspective: 1100px; transform-style: preserve-3d;
  transform: translate3d(var(--camera-x), var(--camera-y), 0);
  transition: transform .16s ease-out;
  animation: camera-arrive 1.1s cubic-bezier(.16,.8,.2,1) both;
}
@keyframes camera-arrive {
  from { opacity: 0; transform: translate3d(0,55px,-170px) scale(.88); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(var(--camera-x),var(--camera-y),0) scale(1); filter: blur(0); }
}
.deal-deck {
  position: absolute; z-index: 12; left: 50%; top: 16%; width: 42px; height: 59px;
  transform: translate(-50%, -50%) rotate(-4deg);
  border: 2px solid #eee; border-radius: 4px;
  background: repeating-linear-gradient(45deg,#141715,#141715 4px,#773833 4px,#773833 8px);
  box-shadow: 3px 3px 0 #252925, 6px 6px 0 #111;
  opacity: 0; transition: opacity .25s ease;
}
.poker-world.dealing .deal-deck { opacity: 1; }
.poker-world.shuffling .deal-deck { opacity: 1; animation: deck-shuffle .18s steps(2) infinite; }
@keyframes deck-shuffle {
  0% { transform: translate(-58%, -50%) rotate(-8deg); }
  50% { transform: translate(-42%, -52%) rotate(7deg); }
}
.shuffle-cloud { position: absolute; z-index: 13; left: 50%; top: 16%; width: 120px; height: 85px; transform: translate(-50%,-50%); pointer-events: none; opacity: 0; }
.poker-world.shuffling .shuffle-cloud { opacity: 1; }
.shuffle-cloud i {
  position: absolute; left: 39px; top: 19px; width: 38px; height: 54px; border: 2px solid white; border-radius: 4px;
  background: repeating-linear-gradient(45deg,#141715,#141715 3px,#773833 3px,#773833 6px);
  animation: shuffle-card .72s ease-in-out infinite;
}
.shuffle-cloud i:nth-child(2) { animation-delay: -.14s; }
.shuffle-cloud i:nth-child(3) { animation-delay: -.28s; }
.shuffle-cloud i:nth-child(4) { animation-delay: -.42s; }
.shuffle-cloud i:nth-child(5) { animation-delay: -.56s; }
@keyframes shuffle-card {
  0%,100% { transform: translateX(-34px) rotate(-18deg); opacity: .2; }
  50% { transform: translateX(34px) rotate(18deg); opacity: 1; }
}
.flying-card {
  position: fixed; z-index: 80; width: 30px; height: 42px; border: 2px solid white; border-radius: 3px;
  background: repeating-linear-gradient(45deg,#141715,#141715 3px,#773833 3px,#773833 6px);
  box-shadow: 0 7px 18px rgba(0,0,0,.5); pointer-events: none;
}
.dealer-light {
  position: absolute; left: 50%; top: -15%; width: 42%; height: 68%;
  transform: translateX(-50%); background: linear-gradient(to bottom, rgba(255,245,218,.2), transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(15px);
}
.chair {
  position: absolute; z-index: 1; width: 82px; height: 112px; border-radius: 28px 28px 13px 13px;
  background: linear-gradient(90deg, #080908, #282c28 28%, #3d423d 50%, #171a17 78%, #050605);
  border: 3px solid #353a35;
  box-shadow: inset 0 7px 9px rgba(255,255,255,.08), 0 22px 24px rgba(0,0,0,.55);
  transform-style: preserve-3d;
}
.chair::before {
  content: ""; position: absolute; inset: 15px 13px 24px; border-radius: 19px;
  background: linear-gradient(135deg, #202420, #090b09); border: 1px solid rgba(255,255,255,.07);
}
.chair i { position: absolute; left: 14px; right: 14px; bottom: -13px; height: 24px; background: #080a08; border-radius: 50%; }
.chair-top { left: 50%; top: -5%; transform: translateX(-50%) translateZ(-80px) scale(.82); }
.chair-left { left: 1%; top: 42%; transform: rotateY(23deg) translateZ(-30px); }
.chair-right { right: 1%; top: 42%; transform: rotateY(-23deg) translateZ(-30px); }
.chair-bottom { display: none; }
.table-base {
  position: absolute; left: 50%; top: 49%; width: min(70vw, 790px); height: min(42vw, 470px);
  border-radius: 50%; transform: translate(-50%, -50%) rotateX(calc(58deg + var(--tilt-x))) rotateZ(var(--tilt-z)) translateY(45px);
  background: linear-gradient(180deg, #252a25 0 18%, #090b09 19% 63%, #020302 64%);
  box-shadow: 0 18px 0 #020302, 0 34px 0 #111411, 0 85px 70px rgba(0,0,0,.82);
}
.table-pedestal {
  position: absolute; left: 50%; top: 63%; z-index: 0; width: min(27vw, 280px); height: 180px;
  transform: translateX(calc(-50% + var(--pedestal-x)));
  background: linear-gradient(90deg, #050605, #252a25 24%, #3a403a 50%, #171b18 77%, #030403);
  clip-path: polygon(24% 0, 76% 0, 88% 100%, 12% 100%);
  filter: drop-shadow(0 35px 25px rgba(0,0,0,.8));
}
.table-pedestal i {
  position: absolute; left: 50%; bottom: -14px; width: 150%; height: 38px; border-radius: 50%;
  transform: translateX(-50%); background: radial-gradient(ellipse, #353a35, #070907 62%, #020302 70%);
}
.poker-table {
  position: absolute; left: 50%; top: 43%; width: min(67vw, 760px); height: min(39vw, 440px);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(calc(58deg + var(--tilt-x))) rotateZ(var(--tilt-z)) translateZ(14px);
  transition: transform .16s ease-out;
}
.table-rail {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(155deg, #545a54 0, #1a1d1a 20%, #090b09 55%, #343934 82%, #111411);
  border: 6px solid #3d433e;
  box-shadow: inset 0 3px 2px rgba(255,255,255,.28), inset 0 -12px 18px rgba(0,0,0,.85),
    inset 0 0 0 8px #080a08, 0 13px 0 #161916, 0 26px 0 #050605, 0 36px 34px rgba(0,0,0,.72);
}
.table-rail::after {
  content: ""; position: absolute; inset: 7px 13%; height: 18%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent); filter: blur(2px);
}
.felt {
  position: absolute; inset: 23px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(80,168,116,.18), transparent 36%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    radial-gradient(circle, #24583e, #123a29 70%);
  border: 1px solid rgba(255,255,255,.12); overflow: hidden;
  box-shadow: inset 0 8px 20px rgba(0,0,0,.5), inset 0 0 45px rgba(0,0,0,.32);
  transform: translateZ(8px);
}
.felt::after {
  content: ""; position: absolute; inset: 6%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%;
}
.felt-logo { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); font-weight: 900; font-size: 48px; color: rgba(255,255,255,.04); }
.felt-logo span { color: rgba(229,65,55,.12); }
.pot-display { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) rotateX(-5deg); text-align: center; display: grid; z-index: 2; }
.pot-display small { font: 7px var(--mono); color: rgba(255,255,255,.5); }
.pot-display strong { font-size: 14px; }
.pot-display span { font: 7px var(--mono); color: var(--green); }
.community-cards { position: absolute; display: flex; gap: 6px; left: 50%; top: 48%; transform: translate(-50%, -50%) translateZ(25px); z-index: 3; }
.playing-card {
  width: 55px; height: 76px; padding: 6px; background: #eeefe8; color: #101210; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 1px 2px 0 #bbbdb7, 3px 6px 11px rgba(0,0,0,.42);
  display: flex; flex-direction: column; font-size: 13px; font-weight: 900; transform-style: preserve-3d;
}
.playing-card b { align-self: center; font-size: 25px; line-height: 1; margin-top: 7px; }
.playing-card.red { color: #d63b33; }
.board-card { opacity: 0; transform: translateY(-18px) rotateY(90deg); }
.board-card.revealed { animation: board-reveal .55s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes board-reveal {
  45% { opacity: 1; transform: translateY(-8px) rotateY(90deg) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
.pot-chips { position: absolute; left: 61%; top: 62%; z-index: 3; transform: rotate(-7deg) translateZ(34px); filter: drop-shadow(8px 11px 6px rgba(0,0,0,.5)); }
.pot-chips i {
  display: block; width: 39px; height: 13px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 24%, #ff7169 0 14%, #e54137 16% 57%, #741c17 59% 76%, #d63a31 78%);
  border: 3px dashed #f7eee7; box-shadow: inset 0 -3px 2px rgba(0,0,0,.35), 0 4px 0 #641815, 0 6px 7px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(-8px) scale(.75); transition: opacity .25s ease, transform .25s ease;
}
.pot-chips i.visible { opacity: 1; transform: translateY(0) scale(1); }
.pot-chips i:nth-child(3n) { margin-left: 13px; background: radial-gradient(ellipse at 50% 24%, #8cffa9 0 14%, #31b961 16% 57%, #14592c 59% 76%, #249e4d 78%); }
.pot-chips i:nth-child(4n) { margin-left: -8px; background: radial-gradient(ellipse at 50% 24%, #d3bcff 0 14%, #7657d9 16% 57%, #32236c 59% 76%, #6248b8 78%); }
.pot-chips.pulse-pot { animation: pot-pulse .42s ease; }
@keyframes pot-pulse { 50% { transform: scale(1.24); filter: brightness(1.45); } }
.flying-chip {
  position: fixed; z-index: 90; width: 35px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 22%, #ff7169, var(--red) 55%, #711a16 72%);
  border: 3px dashed white; box-shadow: 0 4px 0 #6d1814, 0 8px 10px rgba(0,0,0,.55); pointer-events: none;
}

.seat { position: absolute; z-index: 7; display: flex; align-items: center; gap: 7px; transform-style: preserve-3d; transition: transform .18s ease-out, opacity .3s; }
.seat.active-player .avatar { animation: active-seat 1s ease infinite; }
@keyframes active-seat { 50% { box-shadow: 0 0 0 5px rgba(114,247,166,.18), 0 0 28px rgba(114,247,166,.45); } }
.seat.winner .avatar { border-color: var(--green); box-shadow: 0 0 0 7px rgba(114,247,166,.18), 0 0 45px var(--green); animation: winner-pop .65s ease; }
.seat.winner .player-label { border-color: var(--green); background: rgba(17,58,35,.94); }
.seat.folded { opacity: .34; filter: grayscale(1); }
.seat.folded .card-backs, .seat.folded .hole-cards { transform: translateY(15px) scale(.7); opacity: 0; }
@keyframes winner-pop { 50% { transform: scale(1.18); } }
.seat-top { left: 50%; top: 3%; transform: translateX(-50%) translateZ(55px); flex-direction: column; }
.seat-left { left: 7%; top: 46%; transform: translateZ(70px) translateX(var(--seat-x)); }
.seat-right { right: 7%; top: 46%; transform: translateZ(70px) translateX(var(--seat-x)); flex-direction: row-reverse; }
.seat-bottom { left: 50%; bottom: 2%; transform: translateX(-50%) translateZ(105px); flex-direction: column-reverse; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #555; background: #1b1e1c;
  display: grid; place-items: center; font: 8px var(--mono);
  box-shadow: inset 5px 7px 12px rgba(255,255,255,.14), inset -8px -10px 15px rgba(0,0,0,.48), 0 0 0 4px rgba(0,0,0,.45), 0 13px 18px rgba(0,0,0,.45);
}
.seat:not(.seat-bottom) .avatar {
  position: relative;
  width: 58px;
  height: 68px;
  overflow: hidden;
  border-radius: 25px 25px 14px 14px;
  transform-style: preserve-3d;
}
.seat:not(.seat-bottom) .avatar > span { display: none; }
.mini-body {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 54px;
  height: 37px;
  transform: translateX(-50%);
  border-radius: 22px 22px 5px 5px;
  background: linear-gradient(90deg, #080a09, var(--avatar-suit) 45%, #080a09);
  box-shadow: inset 0 5px 7px rgba(255,255,255,.12);
}
.mini-neck {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 34px;
  width: 13px;
  height: 15px;
  transform: translateX(-50%);
  background: var(--avatar-skin);
}
.mini-head {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 8px;
  width: 30px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 46% 46% 43% 43%;
  background:
    radial-gradient(circle at 33% 54%, #171a18 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 68% 54%, #171a18 0 1.4px, transparent 1.8px),
    linear-gradient(90deg, color-mix(in srgb, var(--avatar-skin), #000 18%), var(--avatar-skin) 48%, color-mix(in srgb, var(--avatar-skin), #000 24%));
  box-shadow: inset 4px 0 6px rgba(255,255,255,.08), inset -4px -3px 7px rgba(0,0,0,.24);
}
.mini-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 9px;
  height: 3px;
  transform: translateX(-50%);
  border-bottom: 1px solid rgba(50,25,20,.65);
  border-radius: 50%;
}
.mini-head b {
  position: absolute;
  left: -2px;
  right: -2px;
  top: -3px;
  height: 17px;
  border-radius: 17px 17px 7px 7px;
  background: var(--avatar-hair);
  clip-path: polygon(0 0,100% 0,100% 72%,82% 52%,70% 82%,52% 57%,35% 79%,19% 51%,0 72%);
}
.avatar-purple { --avatar-skin: #b77758; --avatar-hair: #18131e; --avatar-suit: #6045ac; border-color: var(--violet); background: radial-gradient(circle at 50% 25%, #59477b, #17121f); }
.avatar-red { --avatar-skin: #80513e; --avatar-hair: #080a09; --avatar-suit: #9c332e; border-color: var(--red); background: radial-gradient(circle at 50% 25%, #683431, #1d1010); }
.avatar-green { --avatar-skin: #d1a27e; --avatar-hair: #664124; --avatar-suit: #28764a; border-color: var(--green); background: radial-gradient(circle at 50% 25%, #3b7553, #102419); }
.avatar-user { width: 62px; height: 62px; border-color: white; background: radial-gradient(circle at 50% 25%, #d9ddd7, #3c433e); color: black; font-weight: 700; }
.seat-bottom > .avatar-user { opacity: 0; pointer-events: none; }

.third-person-player {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: -188px;
  width: 300px;
  height: 240px;
  transform: translateX(calc(-50% + var(--avatar-shift))) translateZ(180px);
  transform-style: preserve-3d;
  perspective: 720px;
  pointer-events: none;
  filter: drop-shadow(0 24px 25px rgba(0,0,0,.72));
}
.player-ground-shadow {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 238px;
  height: 48px;
  border-radius: 50%;
  transform: translateX(-50%) rotateX(72deg);
  background: radial-gradient(ellipse, rgba(0,0,0,.84), transparent 70%);
  filter: blur(8px);
}
.player-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: player-idle 3.8s ease-in-out infinite;
}
@keyframes player-idle {
  0%, 100% { transform: translateY(0) rotateZ(-.25deg); }
  50% { transform: translateY(3px) rotateZ(.25deg); }
}
.player-torso {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -10px;
  width: 182px;
  height: 152px;
  overflow: hidden;
  transform: translateX(-50%) rotateX(-5deg) translateZ(18px);
  border-radius: 82px 82px 18px 18px;
  border: 2px solid #292f2b;
  background:
    linear-gradient(90deg, transparent 49.3%, rgba(255,255,255,.08) 50%, transparent 50.7%),
    radial-gradient(circle at 50% 2%, #313a34, transparent 26%),
    linear-gradient(105deg, #0a0d0b, #252b27 34%, #151a17 60%, #050706);
  box-shadow: inset 18px 8px 28px rgba(255,255,255,.05), inset -30px -14px 38px rgba(0,0,0,.64);
}
.jacket-panel {
  position: absolute;
  top: 25px;
  width: 62px;
  height: 116px;
  border: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(150deg, rgba(255,255,255,.06), transparent 45%);
}
.jacket-panel-left { left: 15px; transform: skewY(8deg); }
.jacket-panel-right { right: 15px; transform: skewY(-8deg); }
.jacket-mark {
  position: absolute;
  left: 50%;
  top: 66px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.28);
  font: 900 17px var(--sans);
  letter-spacing: 2px;
}
.jacket-mark b { color: rgba(229,65,55,.75); }
.player-neck {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 74px;
  width: 46px;
  height: 41px;
  transform: translateX(-50%) translateZ(38px);
  border-radius: 12px 12px 23px 23px;
  background: linear-gradient(90deg, #603c30, #b77d61 42%, #8a5843 70%, #3e271f);
  box-shadow: inset 0 -10px 14px rgba(0,0,0,.32);
}
.player-head {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 23px;
  width: 68px;
  height: 82px;
  transform-origin: 50% 85%;
  transform: translateX(-50%) rotateY(var(--avatar-yaw)) rotateX(var(--avatar-pitch)) translateZ(55px);
  border-radius: 46% 46% 41% 41%;
  background:
    radial-gradient(circle at 72% 42%, rgba(255,255,255,.15), transparent 20%),
    linear-gradient(90deg, #432920, #a56b52 36%, #bd7d60 57%, #704532 82%, #322019);
  box-shadow: inset 9px 0 15px rgba(255,255,255,.07), inset -12px -5px 18px rgba(0,0,0,.35), 0 8px 14px rgba(0,0,0,.38);
  transition: transform .14s ease-out;
}
.player-hair {
  position: absolute;
  left: -3px;
  right: -3px;
  top: -4px;
  height: 45px;
  border-radius: 48px 48px 20px 20px;
  background:
    repeating-linear-gradient(105deg, transparent 0 7px, rgba(255,255,255,.035) 8px 9px),
    linear-gradient(140deg, #131714, #292d29 46%, #090b09);
  clip-path: polygon(0 0, 100% 0, 97% 66%, 85% 49%, 78% 78%, 63% 59%, 52% 83%, 37% 57%, 24% 78%, 13% 52%, 2% 68%);
  box-shadow: inset 0 8px 8px rgba(255,255,255,.06);
}
.player-ear {
  position: absolute;
  top: 37px;
  width: 10px;
  height: 20px;
  border-radius: 50%;
  background: #8e5b47;
  box-shadow: inset 0 0 0 3px rgba(70,38,29,.22);
}
.player-ear-left { left: -7px; }
.player-ear-right { right: -7px; }
.player-arm {
  position: absolute;
  z-index: 4;
  top: 111px;
  width: 125px;
  height: 47px;
  border: 2px solid #252b27;
  border-radius: 27px;
  background: linear-gradient(180deg, #303733, #111512 60%, #070907);
  box-shadow: inset 0 7px 8px rgba(255,255,255,.055), 0 13px 18px rgba(0,0,0,.48);
  transform-origin: 24px 50%;
}
.player-arm-left { left: 18px; transform: rotate(-28deg) rotateY(-12deg) translateZ(48px); }
.player-arm-right { right: 18px; transform: rotate(28deg) rotateY(12deg) translateZ(48px); }
.player-hand {
  position: absolute;
  right: -14px;
  top: 4px;
  width: 39px;
  height: 38px;
  border-radius: 48% 55% 45% 48%;
  background: linear-gradient(135deg, #bd8063, #865340 68%, #5b382d);
  box-shadow: inset 5px 4px 7px rgba(255,255,255,.1), 0 6px 8px rgba(0,0,0,.35);
}
.player-hand::after {
  content: "";
  position: absolute;
  right: 3px;
  top: -8px;
  width: 32px;
  height: 13px;
  border-radius: 9px;
  background: #9f694f;
  box-shadow: 0 7px 0 #a97055, 0 14px 0 #8e5a46;
  transform: rotate(7deg);
}
.wrist-display {
  position: absolute;
  z-index: 2;
  right: 24px;
  top: 5px;
  width: 27px;
  height: 42px;
  border: 4px solid #080b09;
  border-radius: 6px;
  background: #12221a;
  box-shadow: 0 0 0 2px #343a36, 0 0 14px rgba(114,247,166,.22);
}
.wrist-display span {
  position: absolute;
  inset: 5px;
  background: linear-gradient(180deg, var(--green) 0 2px, transparent 2px 6px, rgba(114,247,166,.55) 6px 8px, transparent 8px);
}
.poker-world.dealing .player-arm-left { animation: left-hand-deal .62s ease-in-out 2; }
.poker-world.dealing .player-arm-right { animation: right-hand-deal .62s ease-in-out 2; }
@keyframes left-hand-deal {
  50% { transform: rotate(-25deg) rotateY(-12deg) translate3d(17px,-8px,58px); }
}
@keyframes right-hand-deal {
  50% { transform: rotate(25deg) rotateY(12deg) translate3d(-17px,-8px,58px); }
}
.player-label { padding: 7px 10px; background: rgba(5,6,5,.84); border: 1px solid var(--line); min-width: 105px; display: grid; text-align: center; }
.player-label strong { font-size: 9px; }
.player-label small { margin-top: 2px; color: var(--green); font: 8px var(--mono); }
.player-label small.balance-up { animation: balance-up .65s ease; }
.player-label small.balance-down { animation: balance-down .5s ease; }
@keyframes balance-up { 45% { color: white; text-shadow: 0 0 14px var(--green); transform: scale(1.28); } }
@keyframes balance-down { 45% { color: var(--red); transform: translateY(2px); } }
.bet-chip {
  position: absolute; font: 7px var(--mono); color: white; border: 3px dashed white;
  background: radial-gradient(circle at 38% 30%, #666, #252825 48%, #090a09 71%);
  border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center;
  box-shadow: inset 0 -5px 4px rgba(0,0,0,.6), 0 5px 0 #050605, 0 9px 10px rgba(0,0,0,.55);
  transform: rotateX(48deg);
}
.seat-top .bet-chip { top: 118px; }
.seat-left .bet-chip { left: 165px; top: 47px; }
.seat-right .bet-chip { right: 165px; top: 47px; }
.card-backs { display: flex; position: absolute; opacity: 0; transition: opacity .2s ease; }
.card-backs.dealt { opacity: 1; }
.card-backs i { width: 26px; height: 37px; background: repeating-linear-gradient(45deg,#171a18,#171a18 3px,#6b302d 3px,#6b302d 6px); border: 2px solid white; border-radius: 3px; }
.card-backs i + i { margin-left: -17px; transform: rotate(8deg); }
.card-backs.showdown i {
  position: relative; background: #eeefe8; color: #151815; border-color: #eeefe8;
  animation: opponent-flip .5s ease both;
}
.card-backs.showdown i::before { content: attr(data-card); position: absolute; left: 4px; top: 3px; font: 900 9px var(--sans); }
.card-backs.showdown i.red-card::before { color: var(--red); }
@keyframes opponent-flip {
  0% { transform: rotateY(90deg) scale(.85); }
  100% { transform: rotateY(0) scale(1); }
}
.seat-top .card-backs { top: 85px; left: 56px; }
.seat-left .card-backs { top: 53px; left: 61px; }
.seat-right .card-backs { top: 53px; right: 61px; }
.hole-cards { display: flex; gap: 4px; position: absolute; bottom: 39px; left: 69px; transform: scale(.82) rotate(4deg); opacity: 0; transition: opacity .25s ease; }
.hole-cards.dealt { opacity: 1; }
.hole-cards .playing-card:first-child { transform: rotate(-7deg); }
.dealer-button { position: absolute; right: -31px; top: 3px; background: white; color: black; border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; font-size: 9px; font-weight: 900; }
.winner-banner {
  position: absolute; z-index: 40; left: 50%; top: 49%; width: min(390px, 86vw);
  transform: translate(-50%, -50%) scale(.82); padding: 24px; text-align: center;
  background: rgba(8,10,9,.94); border: 1px solid var(--green); box-shadow: 0 0 70px rgba(114,247,166,.2);
  opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease;
}
.winner-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.winner-banner small { color: var(--green); font: 8px var(--mono); }
.winner-banner strong { display: block; margin: 8px 0 5px; font-size: 24px; }
.winner-banner span { display: block; color: var(--muted); font: 8px var(--mono); }
.winner-banner button { margin-top: 17px; padding: 10px 16px; border: 0; background: var(--green); color: #081009; font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; }

.action-panel {
  position: absolute; z-index: 15; left: 18px; right: 18px; bottom: 14px; height: 112px;
  display: grid; grid-template-columns: 170px 1fr 265px; gap: 20px; align-items: center;
  padding: 13px 16px; background: rgba(13,16,14,.94); border: 1px solid var(--line); backdrop-filter: blur(14px);
}
.action-panel.cinematic { opacity: .42; pointer-events: none; }
.action-panel.your-turn { border-color: rgba(114,247,166,.5); box-shadow: 0 0 28px rgba(114,247,166,.08); }
.action:disabled, .raise-button:disabled, .quick-bets button:disabled { opacity: .28; cursor: not-allowed; transform: none; }
.hand-info { display: grid; gap: 4px; }
.hand-info small, .raise-control small { font: 7px var(--mono); color: var(--muted); }
.hand-info strong { font-size: 11px; }
.hand-info span { color: var(--green); font: 8px var(--mono); }
.action-buttons { display: flex; justify-content: center; gap: 7px; }
.action { min-width: 108px; height: 48px; border: 1px solid var(--line); background: #191d1a; cursor: pointer; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.action:hover { border-color: rgba(255,255,255,.35); transform: translateY(-2px); }
.action.primary { background: var(--red); border-color: var(--red); }
kbd { margin-left: 7px; padding: 2px 4px; font: 7px var(--mono); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.15); }
.raise-control { display: grid; grid-template-columns: 75px 1fr; gap: 6px 9px; align-items: center; }
.raise-control > div:first-child { display: grid; }
.raise-control strong { font-size: 11px; }
input[type="range"] { width: 100%; accent-color: var(--red); }
.quick-bets { display: flex; gap: 3px; }
.quick-bets button { border: 1px solid var(--line); background: transparent; font: 7px var(--mono); padding: 5px; cursor: pointer; }
.quick-bets button:hover { background: rgba(255,255,255,.08); }
.raise-button { grid-column: 2; border: 0; background: white; color: black; height: 27px; font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; }

.right-panel { grid-row: 2; grid-column: 3; background: var(--panel); border-left: 1px solid var(--line); z-index: 10; min-width: 0; }
.panel-tabs { height: 48px; display: flex; border-bottom: 1px solid var(--line); }
.panel-tabs button { flex: 1; border: 0; background: none; color: var(--muted); font: 8px var(--mono); text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; }
.panel-tabs button.active { color: white; border-bottom-color: var(--red); }
.panel-content { display: none; padding: 16px; height: calc(100% - 48px); }
.panel-content.active { display: flex; flex-direction: column; }
.hand-number { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.hand-number span { font: 9px var(--mono); }
.hand-number small { color: var(--green); font: 7px var(--mono); }
.activity-feed { margin-top: 7px; }
.activity-feed > div { display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; align-items: start; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.activity-feed i { width: 5px; height: 5px; background: var(--red); border-radius: 50%; margin-top: 5px; }
.activity-feed i.green { background: var(--green); }
.activity-feed p { margin: 0; font-size: 9px; line-height: 1.5; color: var(--muted); }
.activity-feed p strong { color: white; }
.activity-feed p b { color: var(--green); }
.activity-feed time { color: #515752; font: 7px var(--mono); }
.activity-feed .system-entry p { font-family: var(--mono); font-size: 8px; }
.chain-proof { margin-top: auto; border: 1px solid rgba(114,247,166,.2); background: rgba(114,247,166,.04); padding: 13px; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.chain-proof div { display: grid; gap: 3px; }
.chain-proof small { font: 7px var(--mono); color: var(--muted); }
.chain-proof strong { color: var(--green); font-size: 9px; }
.proof-hash { font: 8px var(--mono); }
.chain-proof button { border: 0; background: none; cursor: pointer; color: var(--muted); }
.player-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; padding: 15px 0; border-bottom: 1px solid var(--line); align-items: center; }
.player-row .dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.purple { background: var(--violet); }.dot.red { background: var(--red); }.dot.green { background: var(--green); }.dot.white { background: white; }
.player-row strong { font-size: 9px; }.player-row small { font: 8px var(--mono); color: var(--muted); }
.chat-panel { padding-bottom: 12px; }
.chat-room-title { display: flex; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); font: 8px var(--mono); }
.chat-room-title small { color: var(--green); font: inherit; }
.chat-messages { flex: 1; overflow-y: auto; padding: 8px 2px; scrollbar-width: thin; }
.chat-message { position: relative; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.chat-message strong { display: block; color: var(--green); font-size: 8px; margin-bottom: 4px; }
.chat-message p { margin: 0; padding-right: 30px; color: #c5cac5; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-message time { position: absolute; right: 0; top: 10px; color: #555d56; font: 7px var(--mono); }
.chat-message.you strong { color: white; }
.chat-form { display: grid; grid-template-columns: 1fr 35px; border: 1px solid var(--line); background: #090b0a; }
.chat-form input { min-width: 0; height: 40px; padding: 0 11px; border: 0; outline: 0; background: transparent; color: white; font: 9px var(--mono); }
.chat-form input::placeholder { color: #5e655f; }
.chat-form button { border: 0; border-left: 1px solid var(--line); background: var(--red); color: white; cursor: pointer; }

.toast { position: absolute; z-index: 30; top: 22px; left: 50%; transform: translate(-50%,-120px); padding: 12px 18px; background: #f1f2ec; color: #0b0d0c; display: flex; gap: 10px; align-items: center; box-shadow: 0 15px 40px rgba(0,0,0,.4); transition: transform .35s ease; }
.toast.show { transform: translate(-50%,0); }
.toast i { width: 25px; height: 25px; display: grid; place-items: center; background: var(--green); border-radius: 50%; font-style: normal; }
.toast div { display: grid; gap: 2px; }.toast strong { font-size: 9px; text-transform: uppercase; }.toast span { font: 7px var(--mono); color: #5f665f; }

.wallet-modal { display: none; position: fixed; inset: 0; z-index: 100; place-items: center; }
.wallet-modal.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.74); backdrop-filter: blur(8px); }
.modal-dialog { position: relative; width: min(410px, calc(100vw - 30px)); padding: 32px; background: #111411; border: 1px solid rgba(255,255,255,.17); }
.modal-close { position: absolute; right: 15px; top: 12px; border: 0; background: none; font-size: 23px; cursor: pointer; }
.modal-dialog > small { color: var(--red); font: 8px var(--mono); }
.modal-dialog h2 { margin: 12px 0; font-size: 34px; }
.modal-dialog p { color: var(--muted); line-height: 1.6; font-size: 12px; }
.wallet-option { width: 100%; height: 62px; margin-top: 8px; padding: 0 15px; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); background: #181c19; text-align: left; cursor: pointer; }
.wallet-option:hover { border-color: var(--green); }
.wallet-option div { display: grid; }.wallet-option strong { font-size: 11px; }.wallet-option small { font: 8px var(--mono); color: var(--muted); }
.demo-option { width: 100%; border: 0; background: none; color: var(--muted); padding: 17px; font: 8px var(--mono); cursor: pointer; text-decoration: underline; }

@media (max-width: 1050px) {
  .game-shell { grid-template-columns: 52px 1fr; }
  .right-panel { display: none; }
  .right-panel.open { display: block; position: fixed; z-index: 60; top: 64px; right: 0; bottom: 0; width: min(320px, 88vw); box-shadow: -25px 0 60px rgba(0,0,0,.55); }
  .chat-toggle { display: block; }
  .table-stage { grid-column: 2; }
  .action-panel { grid-template-columns: 130px 1fr; }
  .raise-control { display: none; }
  .poker-table { width: min(78vw, 760px); height: min(45vw, 440px); }
}
@media (max-width: 700px) {
  body { overflow: auto; }
  .game-shell { height: 100svh; grid-template: 55px 1fr / 1fr; }
  .game-header { grid-column: 1; padding: 0 10px; }
  .game-brand > span { display: none; }
  .right-panel.open { top: 55px; }
  .game-logo { width: 32px; height: 32px; }
  .left-rail, .network-status { display: none; }
  .table-stage { grid-column: 1; grid-row: 2; }
  .room-architecture { opacity: .7; }
  .wallet-button { padding: 0 10px; font-size: 8px; }
  .game-buy-button { padding: 0 9px; font-size: 8px; }
  .game-buy-button .pump-mark { width: 18px; height: 11px; }
  .icon-button { display: none; }
  .poker-world { inset: 50px 0 177px; }
  .poker-table { width: 95vw; height: 61vw; top: 45%; }
  .table-base { width: 98vw; height: 63vw; }
  .table-pedestal { width: 42vw; top: 60%; height: 135px; }
  .chair { display: none; }
  .community-cards { gap: 3px; }
  .playing-card { width: 39px; height: 56px; font-size: 9px; padding: 4px; }
  .playing-card b { font-size: 18px; margin-top: 5px; }
  .seat-top { top: 4%; }
  .seat-left { left: 2%; top: 48%; flex-direction: column; }
  .seat-right { right: 2%; top: 48%; flex-direction: column; }
  .seat-bottom { bottom: -1%; }
  .avatar { width: 40px; height: 40px; }
  .avatar-user { width: 49px; height: 49px; }
  .third-person-player { bottom: -151px; width: 250px; height: 214px; transform: translateX(-50%) translateZ(150px) scale(.68); }
  .player-ground-shadow { width: 205px; }
  .player-torso { width: 164px; height: 140px; }
  .player-head { top: 28px; width: 60px; height: 73px; }
  .player-neck { top: 76px; width: 40px; height: 36px; }
  .player-arm { top: 112px; width: 105px; height: 43px; }
  .player-arm-left { left: 16px; }
  .player-arm-right { right: 16px; }
  .jacket-mark { top: 70px; }
  .player-label { min-width: 83px; padding: 5px; }
  .seat .bet-chip, .card-backs { display: none; }
  .hole-cards { left: 58px; bottom: 31px; }
  .action-panel { height: 164px; left: 8px; right: 8px; bottom: 8px; grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .hand-info { grid-template-columns: auto 1fr auto; align-items: center; }
  .action-buttons { width: 100%; }
  .action { min-width: 0; flex: 1; height: 52px; }
  kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .poker-world, .poker-table, .back-wall, .floor-plane, .player-rig, .player-arm { transition: none; animation: none; }
}
@media (max-width: 470px) {
  .wallet-button { width: 36px; padding: 0; overflow: hidden; white-space: nowrap; color: transparent; }
  .wallet-button span { display: inline; margin: 0; color: #764dff; }
  .chat-toggle { padding: 0 8px; }
  .game-buy-button { padding: 0 8px; }
}