:root {
  color-scheme: dark;
  --felt: #0f8b8d;
  --felt-deep: #232946;
  --felt-light: #ffd166;
  --panel: rgba(18, 24, 49, 0.72);
  --panel-strong: rgba(16, 19, 40, 0.92);
  --line: rgba(255, 255, 255, 0.18);
  --text: #f7fbfb;
  --muted: #c5d2ef;
  --gold: #ffd166;
  --red: #ef476f;
  --black: #172026;
  --green: #06d6a0;
  --blue: #54a8ff;
  --violet: #a78bfa;
  --pink: #ff6fb5;
  --card: #fffaf0;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 209, 102, 0.22), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(255, 111, 181, 0.18), transparent 28%),
    radial-gradient(circle at 50% 56%, rgba(6, 214, 160, 0.16), transparent 34%),
    linear-gradient(145deg, #17162e 0%, #1d3557 36%, var(--felt) 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell {
  width: min(1220px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
}

.auth-view,
.lobby-view,
.settings-view {
  min-height: calc(100vh - 36px);
  display: grid;
  align-content: center;
  gap: 18px;
}

.auth-card,
.lobby-hero,
.lobby-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-card {
  width: min(620px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 34px);
}

.hero-brand {
  margin-bottom: 20px;
}

.hero-brand h1,
.lobby-hero h1 {
  font-size: clamp(46px, 8vw, 82px);
}

.hero-brand p,
.lobby-hero p {
  color: var(--muted);
  font-weight: 850;
}

.screen-message {
  min-height: 44px;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0;
  background: rgba(16, 19, 40, 0.75);
  color: var(--gold);
  font-weight: 900;
}

.lobby-view {
  align-content: start;
  padding-top: 6vh;
}

.settings-view {
  align-content: start;
  padding-top: 12vh;
}

.lobby-hero {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lobby-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: end;
}

button {
  min-height: 40px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  white-space: normal;
}

button:not(.card):hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

button:not(.card):disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.table {
  width: min(1220px, 100%);
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto minmax(410px, 1fr) auto auto;
  gap: 14px;
}

.topbar,
.scoreboard,
.hand-tray,
.log {
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.topbar {
  border-radius: 8px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(360px, 0.9fr);
  align-items: center;
  gap: 16px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: 0;
}

.topbar p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 8px;
}

.controls button:first-child {
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.34), rgba(84, 168, 255, 0.22));
}

.controls button:nth-child(2) {
  background: linear-gradient(135deg, rgba(255, 111, 181, 0.18), rgba(167, 139, 250, 0.2));
}

.login-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.login-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.login-panel input,
.login-panel select {
  min-height: 48px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.login-panel select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 12px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.login-panel select option {
  background: #25364d;
  color: #f7fbfb;
  font-weight: 800;
}

.login-panel select option:checked,
.login-panel select option:hover {
  background: #ffd166;
  color: #172026;
}

.login-panel input::placeholder {
  color: rgba(247, 251, 251, 0.58);
}

.login-panel button {
  min-height: 50px;
  font-size: 17px;
}

.topbar .lobby-panel,
.lobby-panel {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 209, 102, 0.3);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.18), rgba(6, 214, 160, 0.12));
  color: #fff3c4;
  font-weight: 900;
}

.leaderboard-panel,
.account-panel {
  border: 1px solid rgba(84, 168, 255, 0.26);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgba(84, 168, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.account-panel {
  border-color: rgba(255, 209, 102, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 209, 102, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    var(--panel);
}

.lobby-panel[hidden] {
  display: none;
}

.lobby-head,
.game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.games-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
}

.password-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.password-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.password-panel input {
  min-height: 46px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.password-panel input::placeholder {
  color: rgba(247, 251, 251, 0.56);
}

.password-panel button {
  min-height: 46px;
  padding: 0 16px;
}

.game-row {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 209, 102, 0.14), transparent 36%),
    rgba(255, 255, 255, 0.08);
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.leaderboard-row > strong {
  color: var(--gold);
  font-size: 20px;
}

.leaderboard-row div {
  display: grid;
  gap: 2px;
}

.leaderboard-row span {
  color: var(--text);
  font-weight: 950;
}

.leaderboard-row small {
  color: var(--muted);
  font-weight: 850;
}

.leaderboard-row b {
  color: var(--green);
}

.game-row div {
  display: grid;
  gap: 2px;
}

.game-row span,
.empty-lobby {
  color: var(--muted);
  font-size: 13px;
}

.empty-lobby {
  grid-column: 1 / -1;
}

.scoreboard {
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 0.75fr) 1fr;
  gap: 8px;
}

.score-panel,
.round-panel {
  min-width: 0;
  min-height: 92px;
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.score-panel {
  display: grid;
  gap: 10px;
}

.score-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.score-panel span,
.round-number span,
.hand-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.score-panel > div:first-child span,
.hukum-badge {
  overflow-wrap: anywhere;
}

.score-panel strong {
  font-size: 34px;
  color: var(--gold);
  line-height: 0.95;
}

.mini-stat {
  font-size: 14px;
  color: var(--muted);
}

.stat-line {
  font-size: 12px;
}

.mini-stat b {
  color: var(--text);
}

.ten-row {
  min-height: 30px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.round-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.round-number {
  display: grid;
  align-content: center;
  gap: 3px;
}

.round-number b {
  font-size: 22px;
}

.hukum-badge {
  grid-column: 1 / -1;
  border-radius: 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.22), rgba(155, 124, 255, 0.15));
  color: #ffe598;
  font-weight: 900;
  text-align: center;
  border: 1px solid rgba(255, 200, 87, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.12;
}

.hukum-suit-symbol {
  font-size: 24px;
  line-height: 1;
}

.players {
  position: relative;
  min-height: 440px;
  display: grid;
  grid-template-areas:
    "strip strip strip"
    ". top ."
    "left center right"
    ". bottom .";
  grid-template-columns: minmax(150px, 1fr) minmax(280px, 1.45fr) minmax(150px, 1fr);
  grid-template-rows: 58px 110px minmax(210px, 1fr) 96px;
  gap: 10px;
  border-radius: 8px;
  padding: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255, 209, 102, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  background-size: 42px 42px, 42px 42px, auto;
}

.opponent-strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.opponent-pill {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  color: var(--muted);
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.opponent-pill.active {
  color: #fff5d6;
  border-color: rgba(255, 209, 102, 0.65);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.34), rgba(255, 111, 181, 0.22));
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.1), 0 0 24px rgba(255, 209, 102, 0.22);
}

.opponent-team {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.opponent-pill-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(10, 18, 35, 0.34);
  display: grid;
  gap: 8px;
  align-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.top {
  grid-area: top;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

.bottom {
  grid-area: bottom;
  border-color: rgba(91, 211, 139, 0.45);
}

.seat-team-tag {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.player-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 900;
}

.player-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.team-a-dot {
  background: var(--green);
}

.team-b-dot {
  background: var(--blue);
}

.back-row {
  height: 45px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.card-back-small {
  width: 34px;
  height: 45px;
  margin-left: -17px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.35), transparent 14%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, #2649a4, #e63955);
}

.card-back-small:first-child {
  margin-left: 0;
}

.center-stack {
  grid-area: center;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 10px;
}

.pile {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(4, minmax(68px, 92px));
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.played-slot {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.message {
  min-height: 50px;
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-strong);
  text-align: center;
  font-weight: 850;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hand-tray {
  border-radius: 8px;
  padding: 12px 12px 10px;
}

.hand-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.hand-head b {
  color: var(--gold);
  font-size: 13px;
  text-align: right;
}

.hand {
  width: 100%;
  max-width: 100%;
  min-height: 118px;
  display: flex;
  align-items: end;
  justify-content: center;
  overflow-x: auto;
  padding: 0 10px 8px 10px;
  scrollbar-width: thin;
}

.card {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  height: 106px;
  margin-left: -19px;
  border: 1px solid #e2ddd0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 200, 87, 0.13), transparent 26%),
    var(--card);
  color: var(--black);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 7px;
  font-weight: 950;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.card:first-child {
  margin-left: 0;
}

.card.playable {
  cursor: pointer;
}

.card.playable:hover {
  transform: translateY(-16px);
}

.card.playable {
  outline: 2px solid rgba(74, 222, 128, 0.54);
  outline-offset: -3px;
}

.card.selected {
  z-index: 4;
  transform: translateY(-18px);
  outline-color: var(--gold);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(255, 209, 102, 0.28);
}

.card.disabled {
  filter: brightness(0.64) saturate(0.72);
}

.card.red {
  color: var(--red);
}

.card-rank {
  font-size: 22px;
  line-height: 1;
}

.card-suit {
  place-self: center;
  font-size: 38px;
}

.card-corner {
  justify-self: end;
  transform: rotate(180deg);
  font-size: 18px;
}

.mini-card {
  width: 36px;
  height: 29px;
  border-radius: 5px;
  border: 1px solid #d5dde0;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--black);
  font-weight: 950;
  font-size: 15px;
}

.mini-card b,
.mini-card i {
  font: inherit;
  line-height: 1;
}

.mini-card.red {
  color: var(--red);
}

.mini-card.suit-s,
.mini-card.suit-c {
  color: var(--black);
}

.mini-card.suit-h,
.mini-card.suit-d {
  color: var(--red);
}

.log {
  max-height: 96px;
  overflow-y: auto;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
}

.log div + div {
  margin-top: 4px;
}

dialog {
  width: min(380px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #102932;
  color: var(--text);
  padding: 18px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

dialog p {
  margin: 6px 0 16px;
  color: var(--muted);
}

.glass-dialog {
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.16), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(255, 76, 219, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    rgba(15, 25, 52, 0.88);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
}

.glass-dialog h2 {
  margin: 0;
  color: #eef7ff;
  font-size: 26px;
}

.room-name-form {
  display: grid;
  gap: 14px;
}

.room-name-form input {
  min-height: 58px;
  border: 1px solid rgba(145, 237, 255, 0.28);
  border-radius: 8px;
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(7, 12, 32, 0.82);
  color: var(--text);
  font: inherit;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.room-name-form input:focus {
  outline: 2px solid rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dialog-actions button:last-child {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 48%),
    linear-gradient(180deg, #20d9f7, #10bddc);
  color: #062435;
  border: 0;
}

#roomNameDialog.glass-dialog {
  width: min(430px, calc(100vw - 30px));
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 18px;
  padding: clamp(22px, 5vw, 30px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.2), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    linear-gradient(160deg, rgba(11, 24, 52, 0.94), rgba(38, 24, 58, 0.88));
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.58),
    0 0 60px rgba(34, 211, 238, 0.12),
    0 0 48px rgba(255, 122, 217, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(145, 237, 255, 0.04);
  backdrop-filter: blur(28px) saturate(155%);
  animation: modal-glass-enter 220ms ease-out both;
}

#roomNameDialog::backdrop {
  background:
    radial-gradient(circle at 20% 16%, rgba(34, 211, 238, 0.12), transparent 34%),
    radial-gradient(circle at 78% 84%, rgba(255, 122, 217, 0.13), transparent 34%),
    rgba(2, 7, 18, 0.52);
  backdrop-filter: blur(7px) saturate(112%);
}

#roomNameDialog .room-name-form {
  gap: 16px;
}

#roomNameDialog h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: rgba(248, 252, 255, 0.98);
  font-size: clamp(25px, 6vw, 32px);
  line-height: 1.08;
  font-weight: 880;
  letter-spacing: 0;
  text-shadow: 0 0 24px rgba(145, 237, 255, 0.12);
}

#roomNameDialog h2::before {
  content: "";
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  border: 1px solid rgba(145, 237, 255, 0.2);
  background:
    radial-gradient(circle at 50% 50%, rgba(116, 232, 255, 0.88) 0 3px, transparent 3.5px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(34, 211, 238, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(34, 211, 238, 0.1);
}

#roomNameDialog h2::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 23px;
  left: clamp(34px, calc(5vw + 12px), 42px);
  top: clamp(28px, calc(5vw + 7px), 36px);
  border: 2px solid rgba(116, 232, 255, 0.9);
  border-radius: 5px;
  transform: rotate(-8deg);
  box-shadow:
    -5px 4px 0 -2px rgba(17, 31, 57, 0.96),
    -5px 4px 0 0 rgba(116, 232, 255, 0.34);
}

#roomNameDialog p {
  margin: -2px 0 2px;
  color: rgba(211, 225, 241, 0.68);
  font-size: 15px;
  line-height: 1.38;
  font-weight: 560;
}

#roomNameDialog .room-name-form input {
  min-height: 58px;
  border: 1px solid rgba(218, 241, 255, 0.12);
  border-radius: 13px;
  padding: 0 17px;
  color: rgba(248, 252, 255, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(5, 10, 27, 0.68);
  font-size: 16px;
  font-weight: 760;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(145, 237, 255, 0.025);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

#roomNameDialog .room-name-form input::placeholder {
  color: rgba(213, 225, 242, 0.42);
}

#roomNameDialog .room-name-form input:focus {
  outline: none;
  border-color: rgba(145, 237, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(5, 10, 27, 0.76);
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.08),
    0 0 24px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#roomNameDialog .dialog-actions {
  gap: 12px;
  margin-top: 2px;
}

#roomNameDialog .dialog-actions button {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  color: rgba(239, 248, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(18, 28, 54, 0.62);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  font-size: 15px;
  font-weight: 790;
  letter-spacing: 0;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

#roomNameDialog .dialog-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(218, 241, 255, 0.23);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

#roomNameDialog .dialog-actions button:active {
  transform: scale(0.97);
}

#roomNameDialog .dialog-actions button:last-child {
  border-color: rgba(86, 230, 255, 0.26);
  color: #eafcff;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.24), transparent 48%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.24), rgba(34, 211, 238, 0.09)),
    rgba(12, 39, 64, 0.68);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 28px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@keyframes modal-glass-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 480px) {
  #roomNameDialog.glass-dialog {
    width: min(400px, calc(100vw - 24px));
    padding: 22px;
    border-radius: 17px;
  }

  #roomNameDialog h2::after {
    left: 34px;
    top: 29px;
  }

  #roomNameDialog .dialog-actions {
    grid-template-columns: 1fr;
  }
}

/* Premium gameplay refresh */
.game-view.table {
  position: relative;
  isolation: isolate;
  gap: clamp(10px, 2vw, 16px);
}

.game-view.table::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.18), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(255, 122, 217, 0.12), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(13, 143, 146, 0.18), transparent 42%),
    radial-gradient(circle at 70% 96%, rgba(255, 45, 198, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(2, 7, 20, 0.82), rgba(6, 8, 25, 0.96));
}

.game-view .topbar,
.game-view .players,
.game-view .hand-tray {
  border: 1px solid rgba(216, 241, 255, 0.13);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026)),
    rgba(8, 16, 38, 0.58);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(145, 237, 255, 0.035);
  backdrop-filter: blur(24px) saturate(150%);
}

.game-view .topbar {
  border-radius: 14px;
  padding: 14px clamp(14px, 2.8vw, 22px);
}

.game-view .topbar .brand h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.92;
  color: #41e6ff;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.36), 0 0 42px rgba(34, 211, 238, 0.14);
}

.game-view .topbar p {
  margin-top: 5px;
  color: rgba(216, 231, 246, 0.58);
  font-size: 13px;
  font-weight: 650;
}

.game-view .game-actions {
  gap: 8px;
  align-items: center;
}

.game-view .game-actions button {
  min-height: 38px;
  min-width: 42px;
  padding: 0 14px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  border-radius: 11px;
  color: rgba(239, 249, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(18, 28, 54, 0.56);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
  backdrop-filter: blur(16px) saturate(145%);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.game-view .game-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.24);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25), 0 0 22px rgba(34, 211, 238, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.game-view .game-actions button:active {
  transform: scale(0.97);
}

.game-view #backToLobbyButton {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(16, 25, 50, 0.58);
}

.game-view #fillBotsButton {
  border-color: rgba(86, 230, 255, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.17), transparent 46%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(255, 255, 255, 0.035)),
    rgba(12, 35, 56, 0.58);
}

.game-view #endMatchButton {
  border-color: rgba(255, 208, 120, 0.22);
  color: rgba(255, 232, 190, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 208, 120, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(40, 31, 36, 0.58);
}

.game-view #leaveRoomButton.logout-icon {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  padding: 0;
  overflow: visible;
  color: transparent;
  border-color: rgba(255, 164, 178, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 180, 192, 0.14), rgba(255, 128, 166, 0.045)),
    rgba(28, 20, 44, 0.58);
}

.game-view #leaveRoomButton.logout-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 11px;
  top: 9px;
  width: 12px;
  height: 18px;
  border: 2px solid rgba(255, 174, 171, 0.9);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: transparent !important;
  background: transparent;
}

.game-view #leaveRoomButton.logout-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 20px;
  top: 14px;
  width: 17px;
  height: 14px;
  background: rgba(255, 174, 171, 0.94);
  clip-path: polygon(0 36%, 66% 36%, 66% 0, 100% 50%, 66% 100%, 66% 64%, 0 64%);
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.2);
}

.game-view .scoreboard {
  gap: 10px;
}

.game-view .round-panel,
.game-view .score-panel {
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(10, 19, 43, 0.58);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.game-view .score-panel {
  position: relative;
  padding: 14px 14px 13px;
  overflow: hidden;
}

.game-view .score-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 999px;
  background: rgba(65, 230, 255, 0.78);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.28);
}

.game-view .score-panel.team-b::before {
  background: rgba(255, 122, 217, 0.78);
  box-shadow: 0 0 18px rgba(255, 55, 205, 0.25);
}

.game-view .score-panel span,
.game-view .round-number span,
.game-view .hand-head span {
  color: rgba(205, 221, 240, 0.62);
  font-size: 11px;
  font-weight: 780;
}

.game-view .score-panel strong {
  color: #c8fbff;
  font-size: clamp(30px, 5vw, 40px);
  text-shadow: 0 0 18px rgba(145, 237, 255, 0.16);
}

.game-view .mini-stat {
  color: rgba(215, 229, 244, 0.68);
  font-size: 13px;
}

.game-view .stat-line {
  color: rgba(215, 229, 244, 0.48);
  font-size: 11px;
}

.game-view .round-panel {
  padding: 14px;
  gap: 10px;
}

.game-view .round-number b {
  color: rgba(244, 250, 255, 0.95);
  font-size: clamp(22px, 4vw, 30px);
}

.game-view .hukum-badge {
  min-height: 54px;
  border: 1px solid rgba(255, 154, 214, 0.2);
  border-radius: 14px;
  color: #ffd0ee;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 122, 217, 0.18), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(28, 18, 46, 0.58);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 0 24px rgba(255, 55, 205, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-view .hukum-suit-symbol {
  font-size: 34px;
  filter: drop-shadow(0 0 12px rgba(255, 122, 217, 0.24));
}

.game-view .players {
  position: relative;
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(34, 211, 238, 0.13), transparent 30%),
    radial-gradient(ellipse at 50% 56%, rgba(19, 245, 174, 0.045), transparent 34%),
    radial-gradient(circle at 78% 84%, rgba(255, 45, 198, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(6, 18, 38, 0.62), rgba(9, 9, 32, 0.68));
}

.game-view .players::before {
  content: "";
  position: absolute;
  inset: 62px 18px 86px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(145, 237, 255, 0.07), transparent 58%),
    repeating-radial-gradient(ellipse at center, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px);
  opacity: 0.75;
  filter: blur(0.2px);
}

.game-view .players::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 42%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(145, 237, 255, 0.12), transparent);
}

.game-view .players.your-turn {
  animation: premium-turn-glow 1.35s ease-in-out infinite;
}

.game-view .opponent-pill {
  min-height: 44px;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(232, 242, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(15, 24, 48, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(135%);
}

.game-view .opponent-pill.active,
.game-view .seat.turn {
  color: #effdff;
  border-color: rgba(145, 237, 255, 0.34);
  background:
    radial-gradient(circle at 28% 0%, rgba(34, 211, 238, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03)),
    rgba(14, 33, 58, 0.62);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.08),
    0 0 26px rgba(34, 211, 238, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .seat {
  position: relative;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(9, 16, 35, 0.5);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.game-view .seat.bottom {
  border-color: rgba(25, 245, 174, 0.36);
  background:
    linear-gradient(145deg, rgba(25, 245, 174, 0.085), rgba(255, 255, 255, 0.02)),
    rgba(9, 23, 42, 0.58);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), 0 0 24px rgba(25, 245, 174, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-view .player-name {
  color: rgba(242, 250, 255, 0.94);
  font-weight: 820;
}

.game-view .seat-team-tag {
  color: rgba(205, 221, 240, 0.58);
  font-size: 12px;
}

.game-view .team-dot,
.game-view .opponent-team {
  box-shadow: 0 0 12px currentColor;
}

.game-view .pile {
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.22));
}

.game-view .pile .played-slot > span {
  border: 1px solid rgba(216, 241, 255, 0.15);
  color: rgba(226, 241, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(12, 22, 44, 0.66);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(135%);
}

.game-view .pile .played-slot .card {
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.game-view .message {
  min-height: 44px;
  width: min(530px, 100%);
  border: 1px solid rgba(145, 237, 255, 0.16);
  border-radius: 999px;
  padding: 9px 18px;
  color: rgba(191, 252, 255, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(12, 25, 50, 0.64);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(135%);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 760;
}

.game-view .hand-tray {
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(9, 13, 34, 0.78);
}

.game-view .hand-head {
  align-items: center;
}

.game-view .hand-head b {
  color: rgba(174, 238, 255, 0.92);
  font-weight: 760;
}

.game-view .player-bar-reaction.reaction-button {
  width: 40px;
  min-width: 40px;
  height: 30px;
  min-height: 30px;
  border-radius: 10px;
  border-color: rgba(145, 237, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(18, 31, 56, 0.62);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2), 0 0 18px rgba(34, 211, 238, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.game-view .player-bar-reaction.reaction-button:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.34);
}

.game-view .player-bar-reaction.reaction-button:active {
  transform: scale(0.96);
}

.game-view .reaction-button span {
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 0;
  border: 1.6px solid rgba(191, 252, 255, 0.9);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.12);
}

.game-view .reaction-button span::before,
.game-view .reaction-button span::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: currentColor;
}

.game-view .reaction-button span::before {
  width: 3px;
  height: 3px;
  left: 4px;
  top: 5px;
  box-shadow: 7px 0 0 currentColor;
}

.game-view .reaction-button span::after {
  width: 8px;
  height: 4px;
  left: 4px;
  bottom: 4px;
  border-radius: 0 0 999px 999px;
  background: transparent;
  border: 1.4px solid currentColor;
  border-top: 0;
}

#reactionDialog.glass-dialog {
  width: min(380px, calc(100vw - 28px));
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.2), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    rgba(13, 22, 48, 0.9);
  box-shadow: 0 32px 92px rgba(0, 0, 0, 0.56), 0 0 52px rgba(34, 211, 238, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(28px) saturate(155%);
  animation: modal-glass-enter 220ms ease-out both;
}

#reactionDialog::backdrop {
  background:
    radial-gradient(circle at 20% 16%, rgba(34, 211, 238, 0.11), transparent 34%),
    radial-gradient(circle at 78% 84%, rgba(255, 122, 217, 0.12), transparent 34%),
    rgba(2, 7, 18, 0.5);
  backdrop-filter: blur(7px) saturate(112%);
}

#reactionDialog .reaction-head {
  margin-bottom: 16px;
}

#reactionDialog .reaction-head h2 {
  color: rgba(248, 252, 255, 0.98);
  font-size: 26px;
  font-weight: 860;
}

#reactionDialog .dialog-close {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  color: rgba(232, 244, 255, 0.76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(18, 28, 54, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 22px;
}

#reactionDialog .reaction-options {
  gap: 12px;
}

#reactionDialog .reaction-options button {
  min-height: 64px;
  border: 1px solid rgba(218, 241, 255, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.1), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(16, 27, 54, 0.62);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 30px;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

#reactionDialog .reaction-options button:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(145, 237, 255, 0.28);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), 0 0 24px rgba(34, 211, 238, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

#reactionDialog .reaction-options button:active {
  transform: scale(0.95);
}

#reactionDialog .reaction-cancel {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(218, 241, 255, 0.12);
  color: rgba(232, 244, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(18, 28, 54, 0.54);
  font-weight: 760;
}

/* Stable hand tray and Hukum state polish */
.game-view .hand-tray {
  position: sticky;
  bottom: 0;
  z-index: 12;
  overflow: visible;
  padding: 13px 12px 11px;
  border-top: 1px solid rgba(145, 237, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(145, 237, 255, 0.075), rgba(255, 255, 255, 0.018) 34%),
    radial-gradient(circle at 22% 0%, rgba(34, 211, 238, 0.12), transparent 34%),
    radial-gradient(circle at 82% 100%, rgba(255, 122, 217, 0.08), transparent 34%),
    rgba(8, 12, 32, 0.86);
  box-shadow:
    0 -18px 46px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(34, 211, 238, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-view .hand-tray::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(145, 237, 255, 0.38), transparent);
}

.game-view .hand-head {
  margin-bottom: 8px;
  padding-inline: 2px;
}

.game-view .hand-head span {
  color: rgba(209, 225, 243, 0.68);
}

.game-view .hand-head b {
  color: rgba(177, 241, 255, 0.92);
  font-size: 12px;
  line-height: 1.2;
}

.game-view .hand {
  min-height: 112px;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 24px 14px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 237, 255, 0.28) rgba(255, 255, 255, 0.06);
  scroll-padding-inline: 16px;
}

.game-view .hand::-webkit-scrollbar {
  height: 8px;
  display: block;
}

.game-view .hand::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.game-view .hand::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.3), rgba(255, 122, 217, 0.18));
  border: 2px solid rgba(8, 12, 32, 0.8);
}

.game-view .hand .card {
  transition: transform 160ms ease, box-shadow 160ms ease, outline-color 160ms ease, filter 160ms ease;
  will-change: transform;
}

.game-view .hand .card.playable:hover {
  transform: translate3d(0, -10px, 0);
}

.game-view .hand .card.playable:active {
  transform: translate3d(0, -14px, 0) scale(0.99);
}

.game-view .hand .card.selected {
  z-index: 20;
  transform: translate3d(0, -22px, 0);
  outline-color: #91edff;
  filter: saturate(1.08);
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.42),
    0 0 0 3px rgba(145, 237, 255, 0.26),
    0 0 28px rgba(34, 211, 238, 0.16);
}

.game-view .selected-card-preview {
  position: absolute;
  left: 50%;
  top: -112px;
  z-index: 24;
  min-height: 0;
  width: 96px;
  height: 128px;
  margin: 0;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.game-view .selected-card-preview[hidden] {
  display: none;
}

.game-view .selected-card-preview .card {
  pointer-events: auto;
  width: 86px;
  height: 124px;
  margin: 0;
  transform: translate3d(0, 0, 0);
  z-index: 24;
  box-shadow:
    0 28px 52px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(145, 237, 255, 0.28),
    0 0 34px rgba(34, 211, 238, 0.18);
}

.game-view .hukum-badge {
  position: relative;
  min-height: 58px;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: 15px;
  line-height: 1.12;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}

.game-view .hukum-badge::before {
  content: "?";
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
  margin-right: 2px;
  opacity: 0.72;
  font-size: 14px;
  line-height: 1;
}

.game-view .hukum-badge.is-inactive {
  color: rgba(255, 205, 235, 0.86);
  border-color: rgba(255, 154, 214, 0.16);
  background:
    radial-gradient(circle at 32% 0%, rgba(255, 122, 217, 0.12), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(24, 17, 42, 0.58);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-view .hukum-badge.is-active {
  color: #f7fcff;
  border-color: rgba(145, 237, 255, 0.28);
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.09) 42%, transparent 52% 100%),
    radial-gradient(circle at 28% 0%, rgba(34, 211, 238, 0.22), transparent 48%),
    radial-gradient(circle at 78% 100%, rgba(255, 122, 217, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.026)),
    rgba(14, 28, 54, 0.66);
  background-size: 220% 100%, auto, auto, auto, auto;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(34, 211, 238, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: hukum-shimmer 3.8s ease-in-out infinite;
}

.game-view .hukum-badge.is-active::before {
  content: none;
}

.game-view .hukum-badge[data-suit="H"],
.game-view .hukum-badge[data-suit="D"] {
  border-color: rgba(255, 154, 214, 0.28);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(255, 122, 217, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .hukum-badge .hukum-suit-symbol {
  min-width: 32px;
  font-size: 36px;
  line-height: 0.9;
}

@keyframes hukum-shimmer {
  0%,
  100% {
    background-position: 140% 0, 0 0, 0 0, 0 0, 0 0;
  }

  50% {
    background-position: -40% 0, 0 0, 0 0, 0 0, 0 0;
  }
}

@keyframes premium-turn-glow {
  0%,
  100% {
    box-shadow:
      0 22px 70px rgba(0, 0, 0, 0.34),
      0 0 0 rgba(34, 211, 238, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);
  }

  50% {
    box-shadow:
      0 22px 70px rgba(0, 0, 0, 0.34),
      0 0 34px rgba(34, 211, 238, 0.24),
      inset 0 0 0 1px rgba(145, 237, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 760px) {
  .game-view.table {
    gap: 8px;
  }

  .game-view .topbar {
    border-radius: 0 0 14px 14px;
    padding: 13px 16px;
  }

  .game-view .game-actions {
    gap: 7px;
  }

  .game-view .game-actions button {
    width: auto;
    min-width: 42px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }

  .game-view #leaveRoomButton.logout-icon {
    width: 42px;
    min-width: 42px;
  }

  .game-view .scoreboard {
    padding: 10px 12px;
    gap: 8px;
  }

  .game-view .round-panel,
  .game-view .score-panel {
    border-radius: 12px;
  }

  .game-view .hukum-badge {
    min-height: 48px;
    font-size: 12px;
  }

  .game-view .players {
    margin: 0 10px;
    border-radius: 16px;
    padding: 10px;
  }

  .game-view .players::before {
    inset: 58px 10px 76px;
  }

  .game-view .opponent-pill {
    min-height: 38px;
    padding: 0 10px;
  }

  .game-view .message {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .game-view .hand-tray {
    border-radius: 14px 14px 0 0;
  }

  .game-view .hand-tray {
    padding: 10px 8px 8px;
    overflow: visible;
  }

  .game-view .hand {
    min-height: 102px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    padding: 22px 12px 9px;
  }

  .game-view .hand::-webkit-scrollbar {
    height: 7px;
    display: block;
  }

  .game-view .hand .card.selected {
    transform: translate3d(0, -20px, 0);
  }

  .game-view .selected-card-preview {
    top: -104px;
    width: 86px;
    height: 116px;
  }

  .game-view .selected-card-preview .card {
    width: 78px;
    height: 112px;
  }

  .game-view .hukum-badge {
    min-height: 52px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .game-view .hukum-badge .hukum-suit-symbol {
    min-width: 28px;
    font-size: 31px;
  }

  #reactionDialog .reaction-options {
    gap: 10px;
  }

  #reactionDialog .reaction-options button {
    min-height: 58px;
    border-radius: 16px;
  }
}

.reaction-dialog {
  width: min(330px, calc(100vw - 28px));
}

.end-vote-dialog {
  width: min(390px, calc(100vw - 28px));
}

.reaction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dialog-close {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #cfeeff;
  font-size: 24px;
  box-shadow: none;
}

.reaction-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.reaction-options button,
.reaction-button {
  display: grid;
  place-items: center;
}

.reaction-options button {
  min-height: 58px;
  font-size: 30px;
  background: rgba(255, 255, 255, 0.1);
}

.reaction-button {
  min-width: 42px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(145, 237, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(34, 211, 238, 0.18);
  color: #bdf4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 22px rgba(18, 211, 238, 0.1);
  backdrop-filter: blur(12px) saturate(135%);
}

.reaction-button span {
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}

.reaction-cancel {
  width: 100%;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.player-bar-reaction {
  justify-self: end;
  width: 46px;
  min-width: 46px;
  height: 34px;
  min-height: 34px;
  align-self: center;
  margin-right: 2px;
}

.player-reaction {
  position: absolute;
  right: 8px;
  top: -18px;
  z-index: 8;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 32, 0.8);
  border: 1px solid rgba(190, 225, 255, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
  font-size: 24px;
  animation: reaction-pop 3200ms ease-out forwards;
}

.opponent-pill,
.player-name {
  position: relative;
}

@keyframes reaction-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.72);
  }

  12%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.9);
  }
}

.result-banner {
  position: fixed;
  left: 50%;
  top: 24%;
  z-index: 90;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(145, 237, 255, 0.34);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 950;
  color: #d8fbff;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(11, 18, 38, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 42px rgba(34, 211, 238, 0.2);
  animation: result-pop 1500ms ease-out both;
}

.result-banner::after {
  content: attr(data-detail);
  display: block;
  min-height: 22px;
  margin-top: 8px;
  font-size: clamp(13px, 3vw, 17px);
  font-weight: 850;
  color: rgba(226, 247, 255, 0.76);
}

.result-banner.baga,
.result-banner.haas {
  border-color: rgba(255, 255, 255, 0.38);
  font-size: clamp(48px, 13vw, 86px);
  letter-spacing: 0;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.18);
  animation: special-result-pop 1700ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.result-banner.baga {
  color: #fff4b0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 220, 88, 0.48), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(34, 211, 238, 0.38), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(30, 18, 55, 0.94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54), 0 0 46px rgba(255, 208, 70, 0.3);
}

.result-banner.haas {
  color: #bffcff;
  background:
    radial-gradient(circle at 24% 16%, rgba(34, 211, 238, 0.52), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(255, 55, 205, 0.36), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(7, 18, 44, 0.95);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56), 0 0 52px rgba(34, 211, 238, 0.34);
}

.result-banner.match-win {
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
  font-size: clamp(38px, 10vw, 68px);
  letter-spacing: 0;
  text-shadow: 0 0 26px rgba(34, 211, 238, 0.28), 0 0 44px rgba(255, 55, 205, 0.2);
  background:
    radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.46), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(255, 55, 205, 0.4), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(8, 16, 39, 0.96);
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.58), 0 0 58px rgba(34, 211, 238, 0.28), 0 0 42px rgba(255, 55, 205, 0.18);
  animation: special-result-pop 2600ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.result-banner.match-win::after {
  color: #bffcff;
  font-size: clamp(15px, 4vw, 22px);
}

@keyframes turn-glow {
  0%,
  100% {
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(34, 211, 238, 0.24), 0 0 0 rgba(34, 211, 238, 0);
  }

  50% {
    box-shadow: var(--shadow), inset 0 0 0 2px rgba(34, 211, 238, 0.86), 0 0 32px rgba(34, 211, 238, 0.34);
  }
}

@keyframes special-result-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(22px) scale(0.72);
    filter: blur(8px);
  }

  18% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.06);
    filter: blur(0);
  }

  35%,
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-16px) scale(0.96);
  }
}

@keyframes result-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(0.9);
  }

  18%,
  82% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(0.96);
  }
}

.suit-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.suit-options button {
  min-height: 66px;
  font-size: 28px;
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 209, 102, 0.24), transparent 36%),
      radial-gradient(circle at 90% 6%, rgba(255, 111, 181, 0.2), transparent 34%),
      linear-gradient(165deg, #1b1a35, #1d3557 34%, #0f8b8d 100%);
  }

  .app-shell {
    padding: 8px;
  }

  .auth-view,
  .lobby-view,
  .settings-view {
    min-height: calc(100svh - 16px);
  }

  .auth-card,
  .lobby-hero,
  .lobby-panel {
    padding: 14px;
  }

  .lobby-hero {
    display: grid;
  }

  .lobby-actions {
    justify-content: stretch;
  }

  .lobby-actions button {
    flex: 1;
  }

  .table {
    width: 100%;
    min-height: 100svh;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    grid-template-rows: auto auto minmax(292px, 1fr) auto;
    gap: 8px;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
  }

  h1 {
    font-size: 30px;
  }

  .topbar p {
    font-size: 13px;
  }

  .controls {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-width: 0;
  }

  .controls button {
    min-height: 38px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.1;
    overflow: hidden;
  }

  .login-panel {
    gap: 6px;
  }

  .login-panel input,
  .login-panel select,
  .login-panel button {
    min-height: 44px;
  }

  .lobby-panel {
    font-size: 12px;
  }

  .account-panel {
    padding: 12px;
  }

  .password-panel {
    grid-template-columns: 1fr;
  }

  .scoreboard {
    grid-template-columns: 1fr 1fr;
    padding: 6px;
    overflow: hidden;
  }

  .round-panel {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 58px;
    grid-template-columns: 0.65fr 0.65fr 1.25fr;
    align-items: stretch;
    padding: 8px;
  }

  .hukum-badge {
    grid-column: auto;
    display: grid;
    place-items: center;
    padding: 6px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .score-panel {
    min-height: 72px;
    padding: 9px;
    gap: 6px;
  }

  .score-panel strong {
    font-size: 27px;
  }

  .ten-row {
    min-height: 24px;
    overflow-x: auto;
  }

  .mini-card {
    width: 31px;
    height: 25px;
    font-size: 13px;
  }

  .players {
    min-height: 292px;
    grid-template-areas:
      "strip strip strip"
      "center center center"
      "bottom bottom bottom";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 44px minmax(170px, 1fr) 42px;
    padding: 8px 8px 6px;
    gap: 7px;
    overflow: hidden;
  }

  .opponent-strip {
    gap: 6px;
  }

  .opponent-pill {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .top,
  .left,
  .right {
    display: none;
  }

  .seat.bottom {
    padding: 7px 12px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-color: rgba(6, 214, 160, 0.45);
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.18), rgba(84, 168, 255, 0.1));
  }

  .bottom .player-name {
    font-size: 12px;
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .bottom .player-name span:last-child,
  .bottom .seat-team-tag {
    font-size: 12px;
  }

  .center-stack {
    padding: 0;
    gap: 6px;
  }

  .pile {
    min-height: 148px;
    grid-template-columns: repeat(2, minmax(72px, 82px));
    gap: 8px;
  }

  .played-slot {
    gap: 4px;
    font-size: 11px;
  }

  .message {
    min-height: 38px;
    padding: 8px;
    font-size: 12px;
    display: grid;
    place-items: center;
  }

  .hand-tray {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 9px 8px 8px;
    overflow: hidden;
  }

  .hand-head {
    margin-bottom: 7px;
  }

  .hand-head b {
    max-width: 62%;
    font-size: 12px;
  }

  .hand {
    min-height: 80px;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 2px 4px 7px;
  }

  .card {
    flex: 0 0 58px;
    width: 58px;
    height: 78px;
    margin-left: -10px;
    padding: 5px;
    touch-action: manipulation;
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .hand .card {
    flex: 0 0 38px;
    width: 38px;
    height: 72px;
    margin-left: -16px;
    padding: 5px 3px;
    border-radius: 7px;
  }

  .hand .card:first-child {
    margin-left: 0;
  }

  .hand::-webkit-scrollbar {
    display: none;
  }

  .card.playable:hover {
    transform: none;
  }

  .card.playable:active {
    transform: translateY(-4px);
  }

  .hand .card.selected {
    transform: translateY(-14px);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(255, 209, 102, 0.3);
  }

  .card-rank {
    font-size: 18px;
    text-align: center;
  }

  .card-suit {
    place-self: center;
    font-size: 25px;
    line-height: 1;
  }

  .hand .card-rank {
    font-size: 21px;
    line-height: 1;
  }

  .hand .card-suit {
    font-size: 24px;
  }

  .card-corner {
    display: none;
  }

  .back-row {
    display: none;
  }

  .log {
    display: none;
  }
}

@media (max-width: 380px) {
  .controls button {
    font-size: 11px;
  }

  .opponent-pill {
    padding: 0 8px;
    font-size: 11px;
  }

  .card {
    flex-basis: 54px;
    width: 54px;
    height: 74px;
  }

  .hand .card {
    flex-basis: 36px;
    width: 36px;
    height: 68px;
    margin-left: -16px;
  }

  .pile {
    min-height: 136px;
    grid-template-columns: repeat(2, 64px);
  }

  .card-rank {
    font-size: 17px;
  }

  .card-suit {
    font-size: 23px;
  }

  .hand .card-rank {
    font-size: 19px;
  }

  .hand .card-suit {
    font-size: 22px;
  }
}

/* Glass refresh */
:root {
  --felt: #0d8f92;
  --felt-deep: #070d20;
  --felt-light: #22d3ee;
  --panel: rgba(18, 29, 56, 0.58);
  --panel-strong: rgba(8, 14, 32, 0.86);
  --line: rgba(190, 225, 255, 0.18);
  --text: #eef7ff;
  --muted: #aebbd1;
  --gold: #91edff;
  --red: #ff9ecf;
  --black: #edf7ff;
  --green: #19f5ae;
  --blue: #2fd6ff;
  --violet: #c48cff;
  --pink: #ff7ad9;
  --card: rgba(24, 36, 66, 0.88);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

body {
  background:
    linear-gradient(132deg, rgba(34, 211, 238, 0.18) 0%, transparent 32%),
    linear-gradient(316deg, transparent 42%, rgba(255, 45, 198, 0.2) 74%, transparent 100%),
    radial-gradient(circle at 18% 28%, rgba(13, 143, 146, 0.42), transparent 38%),
    radial-gradient(circle at 72% 82%, rgba(117, 21, 116, 0.42), transparent 40%),
    linear-gradient(180deg, #071327 0%, #081024 42%, #07111f 100%);
  background-attachment: scroll;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 20%, rgba(255, 255, 255, 0.06) 20.2%, transparent 20.8% 62%, rgba(255, 255, 255, 0.05) 62.2%, transparent 62.8%),
    linear-gradient(315deg, transparent 0 34%, rgba(34, 211, 238, 0.05) 34.2%, transparent 34.9% 78%, rgba(255, 122, 217, 0.05) 78.2%, transparent 78.9%);
  mix-blend-mode: screen;
}

.app-shell {
  width: min(1040px, 100%);
  padding: clamp(14px, 3vw, 32px);
}

.auth-view {
  min-height: 100svh;
  align-content: center;
}

.auth-card,
.lobby-hero,
.lobby-panel,
.leaderboard-panel,
.account-panel,
.topbar,
.scoreboard,
.hand-tray,
.log,
.players {
  border: 1px solid rgba(190, 225, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(15, 25, 52, 0.58);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(22px) saturate(150%);
}

.auth-card {
  width: min(690px, calc(100vw - 28px));
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
}

.hero-brand h1,
.lobby-hero h1,
.brand h1 {
  color: #38dfff;
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.35);
  font-weight: 950;
}

.hero-brand p {
  width: min(520px, 100%);
  margin: 14px auto 22px;
  color: #c6d5e7;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.35;
  font-weight: 500;
}

.login-panel {
  width: min(600px, 100%);
  margin: 0 auto;
  gap: 18px;
  text-align: left;
}

.login-panel label,
.password-panel label {
  color: #c5d2e4;
  font-size: 18px;
  text-transform: none;
  font-weight: 650;
}

.login-panel input,
.login-panel select,
.password-panel input {
  min-height: 62px;
  border: 0;
  border-radius: 8px;
  background: rgba(9, 14, 36, 0.68);
  color: #eef7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

button {
  border-radius: 8px;
  border-color: rgba(190, 225, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #eef7ff;
}

.login-panel button,
#createGameButton,
.game-actions button,
.game-row button {
  min-height: 56px;
  background: linear-gradient(180deg, #20d9f7, #10bddc);
  color: #062435;
  border: 0;
  box-shadow: 0 14px 30px rgba(18, 211, 238, 0.2);
}

.screen-message {
  margin-top: 24px;
  border: 1px solid rgba(25, 245, 174, 0.16);
  background: rgba(8, 14, 32, 0.72);
  color: #19f5ae;
  text-align: center;
}

.auth-view .screen-message {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 1;
  width: auto;
  transform: none;
  margin-top: 16px;
  border-color: rgba(25, 245, 174, 0.16);
  background: rgba(8, 14, 32, 0.72);
  box-shadow: none;
  backdrop-filter: none;
}

.auth-view .screen-message::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}

.lobby-view,
.settings-view {
  align-content: start;
  gap: 22px;
  padding-bottom: 90px;
}

.lobby-hero {
  position: sticky;
  top: 0;
  z-index: 8;
  margin-inline: calc(clamp(14px, 3vw, 32px) * -1);
  padding: 18px clamp(18px, 4vw, 32px);
  border-radius: 0;
  border-width: 0 0 1px;
  background: rgba(7, 13, 32, 0.72);
}

.lobby-actions {
  align-items: center;
}

.lobby-actions button,
#refreshLobbyButton {
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px;
}

.lobby-panel,
.leaderboard-panel,
.account-panel {
  padding: clamp(18px, 4vw, 30px);
}

.lobby-head span {
  color: #b7edff;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 950;
}

.lobby-head button {
  background: rgba(145, 237, 255, 0.12);
}

.games-list {
  grid-template-columns: 1fr;
  gap: 14px;
}

.game-row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  padding: 22px;
  gap: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(20, 32, 60, 0.56);
}

.game-token {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(145, 237, 255, 0.12);
  color: #56e6ff;
  font-weight: 950;
  font-size: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-token::before {
  content: "\25C7";
  font-size: 30px;
  line-height: 1;
  transform: rotate(-14deg);
}

.game-row strong {
  color: #eef7ff;
  font-size: 24px;
}

.game-row span,
.empty-lobby {
  color: #b6c3d8;
  font-size: 18px;
}

.empty-lobby {
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(190, 225, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.empty-lobby b {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 32, 0.46);
  color: #7d8ca4;
  font-size: 0;
}

.empty-lobby b::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 4px solid currentColor;
  border-top-width: 10px;
  border-radius: 4px 4px 10px 10px;
}

.empty-lobby span {
  color: #edf4ff;
  font-style: italic;
}

.empty-lobby small {
  color: #8e9bb2;
  font-weight: 750;
}

.table {
  width: min(1180px, 100%);
  grid-template-rows: auto auto minmax(510px, 1fr) auto auto;
}

.topbar {
  grid-template-columns: auto 1fr;
  padding: 16px;
}

.game-actions {
  justify-self: end;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.scoreboard {
  grid-template-columns: 1fr minmax(420px, 1.1fr) 1fr;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.score-panel,
.round-panel {
  border: 1px solid rgba(190, 225, 255, 0.16);
  background: rgba(14, 24, 48, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.round-panel {
  border-radius: 999px;
  padding: 14px 24px;
}

.hukum-badge {
  color: #ffb5df;
  background: transparent;
  border-color: rgba(255, 158, 207, 0.16);
}

.score-panel.team-a {
  border-left: 6px solid #2fd6ff;
}

.score-panel.team-b {
  border-left: 6px solid #ff4fd8;
}

.score-panel strong {
  color: #b9f3ff;
  text-shadow: 0 0 18px rgba(47, 214, 255, 0.25);
}

.players {
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 44%, rgba(34, 211, 238, 0.12), transparent 30%),
    radial-gradient(circle at 78% 84%, rgba(255, 45, 198, 0.18), transparent 42%),
    rgba(4, 20, 38, 0.46);
}

.players.your-turn {
  animation: turn-glow 1.15s ease-in-out infinite;
}

.seat {
  border-color: rgba(190, 225, 255, 0.15);
  background: rgba(15, 24, 45, 0.48);
}

.seat.turn,
.opponent-pill.active {
  border-color: rgba(34, 211, 238, 0.72);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.13), 0 18px 40px rgba(34, 211, 238, 0.12);
}

.team-a-dot {
  background: #19f5ae;
}

.team-b-dot {
  background: #ff7ad9;
}

.message {
  width: min(560px, 100%);
  justify-self: center;
  border-radius: 999px;
  background: rgba(19, 31, 58, 0.78);
  color: #aeeeff;
  font-size: clamp(16px, 2.5vw, 24px);
}

.pile {
  min-height: 230px;
}

.played-slot {
  min-width: 0;
}

.card {
  border: 1px solid rgba(145, 237, 255, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 255, 255, 0.16), transparent 18%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    rgba(22, 34, 62, 0.96);
  color: #e9f3ff;
}

.card.red {
  color: #ffafa4;
}

.card-rank {
  font-size: 26px;
}

.card-suit {
  color: currentColor;
  opacity: 0.95;
}

.hand {
  justify-content: center;
  overflow-x: auto;
}

.selected-card-preview {
  min-height: 118px;
  display: grid;
  place-items: center;
  margin: -2px 0 6px;
}

.selected-card-preview .card {
  width: 86px;
  height: 124px;
  margin: 0;
  transform: none;
  z-index: 8;
}

.hand .card {
  flex-basis: clamp(46px, 6vw, 76px);
}

.card.playable {
  outline-color: rgba(34, 211, 238, 0.64);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32), 0 0 26px rgba(34, 211, 238, 0.08);
}

.card.selected {
  outline-color: #91edff;
  box-shadow: 0 24px 42px rgba(0, 0, 0, 0.42), 0 0 0 3px rgba(145, 237, 255, 0.28);
}

.mini-card {
  background: rgba(24, 36, 66, 0.9);
  color: #e9f3ff;
  border-color: rgba(145, 237, 255, 0.22);
}

.mini-card.red,
.mini-card.suit-h,
.mini-card.suit-d {
  color: #ffafa4;
}

.mini-card.suit-s,
.mini-card.suit-c {
  color: #e9f3ff;
}

@media (max-width: 760px) {
  .app-shell {
    padding: 0;
  }

  .auth-view,
  .lobby-view,
  .settings-view {
    padding: 20px 14px 96px;
  }

  .auth-card {
    padding: 34px 22px;
  }

  .hero-brand p {
    font-size: 20px;
  }

  .login-panel input,
  .login-panel select,
  .login-panel button {
    min-height: 56px;
  }

  .lobby-hero {
    margin-inline: -14px;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 16px 22px;
  }

  .lobby-hero .brand p {
    display: none;
  }

  .lobby-actions {
    display: flex;
    flex-wrap: nowrap;
  }

  .lobby-actions button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    position: relative;
  }

  .lobby-actions button::before {
    color: #eef7ff;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 950;
  }

  #settingsButton::before {
    content: "S";
  }

  #logoutLobbyButton::before {
    content: "L";
  }

  #createGameButton {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 12;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    font-size: 0;
  }

  #createGameButton::before {
    content: "+";
    color: #062435;
    font-size: 42px;
    line-height: 1;
    font-weight: 300;
  }

  .lobby-panel,
  .leaderboard-panel,
  .account-panel {
    padding: 22px;
  }

  .game-row {
    grid-template-columns: 52px 1fr;
  }

  .game-row button {
    grid-column: 2;
    justify-self: start;
    min-height: 44px;
    padding: 0 20px;
  }

  .game-token {
    width: 48px;
    height: 48px;
  }

  .table {
    padding: 0 0 82px;
    gap: 0;
    grid-template-rows: auto auto minmax(440px, 1fr) auto;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 9;
    grid-template-columns: 1fr auto;
    border-radius: 0;
    border-width: 0 0 1px;
    background: rgba(7, 13, 32, 0.78);
  }

  .topbar p {
    display: none;
  }

  .game-actions button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
  }

  .scoreboard {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }

  .round-panel {
    grid-column: 1 / -1;
    border-radius: 8px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .players {
    min-height: 444px;
    margin: 0 12px;
    grid-template-rows: 46px minmax(284px, 1fr) 44px;
  }

  .pile {
    min-height: 210px;
    grid-template-columns: repeat(2, minmax(78px, 92px));
  }

  .message {
    min-height: 46px;
    font-size: 16px;
  }

  .hand-tray {
    margin: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(12, 19, 39, 0.78);
  }

  .hand {
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: 12px;
  }

  .hand .card {
    flex: 0 0 44px;
    width: 44px;
    height: 82px;
    margin-left: -13px;
  }

  .hand .card:first-child {
    margin-left: 0;
  }

  .hand .card-rank {
    font-size: 22px;
  }

  .hand .card-suit {
    font-size: 26px;
  }
}

/* Navigation and card table refinements */
.leaderboard-view {
  min-height: calc(100vh - 36px);
  display: grid;
  align-content: start;
  gap: 22px;
  padding-bottom: 110px;
}

.icon-button {
  width: 54px;
  min-width: 54px;
  padding: 0;
  color: transparent;
  position: relative;
  overflow: hidden;
}

.icon-button::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d6edff;
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
}

.settings-icon::before {
  content: "\2699";
}

.logout-icon::before {
  content: "\21AA";
  color: #ff9f9f;
  font-size: 32px;
  font-weight: 950;
}

.logout-icon::after {
  content: none;
}

.logout-icon {
  position: relative;
}

.logout-icon::before,
.logout-icon::after {
  position: static;
}

.lobby-actions .icon-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(190, 225, 255, 0.22);
  box-shadow: none;
}

.game-actions .logout-icon {
  background: rgba(255, 112, 140, 0.1);
  border: 1px solid rgba(255, 159, 159, 0.3);
}

.app-tabbar {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 30;
  width: min(560px, calc(100vw - 20px));
  transform: translateX(-50%);
  min-height: 76px;
  padding: 9px 14px;
  border: 1px solid rgba(190, 225, 255, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(16, 12, 38, 0.88);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px) saturate(150%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tab-button {
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  color: #8f98ad;
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.tab-button.active {
  color: #ffe9ff;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.24), transparent 46%),
    linear-gradient(180deg, #ff35db, #b329d4);
  box-shadow: 0 14px 34px rgba(255, 55, 205, 0.42), 0 0 28px rgba(255, 55, 205, 0.28);
}

.tab-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: currentColor;
  position: relative;
}

.tab-icon::before,
.tab-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.tab-lobby::before {
  width: 22px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 7px 7px 10px 10px;
}

.tab-lobby::after {
  width: 4px;
  height: 4px;
  left: 6px;
  top: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 9px 0 0 currentColor, 4px -3px 0 -1px currentColor, 13px -3px 0 -1px currentColor;
}

.tab-leaderboard::before {
  width: 22px;
  height: 18px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(1px);
}

.tab-leaderboard::after {
  width: 4px;
  height: 8px;
  bottom: 5px;
  left: 7px;
  background: currentColor;
  box-shadow: 6px -5px 0 currentColor, 12px -2px 0 currentColor;
}

.tab-games::before {
  width: 13px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(-22deg);
  box-shadow: -6px 3px 0 -2px currentColor, 6px 3px 0 -2px currentColor;
}

.tab-games::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 5px 4px 0 currentColor;
  transform: rotate(-22deg);
}

.tab-profile::before {
  width: 10px;
  height: 10px;
  top: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.tab-profile::after {
  width: 18px;
  height: 9px;
  bottom: 3px;
  border: 2px solid currentColor;
  border-radius: 12px 12px 4px 4px;
}

.lobby-view,
.settings-view {
  padding-bottom: 112px;
}

.leaderboard-view[hidden],
.app-tabbar[hidden] {
  display: none !important;
}

.pile {
  position: relative;
  min-height: 250px;
  display: block;
}

.pile .played-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 98px;
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.pile .played-slot > span {
  order: -1;
  max-width: 118px;
  padding: 4px 10px;
  border: 1px solid rgba(190, 225, 255, 0.22);
  border-radius: 999px;
  background: rgba(20, 32, 60, 0.74);
  color: #c9d7ea;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pile .played-slot .card {
  width: 92px;
  height: 130px;
  margin: 0;
}

.pile .played-slot-0 {
  transform: translate(-90%, -52%) rotate(-8deg);
  z-index: 4;
}

.pile .played-slot-1 {
  transform: translate(-28%, -58%) rotate(4deg);
  z-index: 5;
}

.pile .played-slot-2 {
  transform: translate(-60%, -16%) rotate(-2deg);
  z-index: 3;
}

.pile .played-slot-3 {
  transform: translate(-3%, -14%) rotate(7deg);
  z-index: 6;
}

.pile.trick-count-1 .played-slot-0 {
  transform: translate(-50%, -50%) rotate(0deg);
}

.pile.trick-count-2 .played-slot-0 {
  transform: translate(-88%, -50%) rotate(-7deg);
}

.pile.trick-count-2 .played-slot-1 {
  transform: translate(-12%, -50%) rotate(7deg);
}

.pile.trick-count-3 .played-slot-0 {
  transform: translate(-94%, -50%) rotate(-8deg);
}

.pile.trick-count-3 .played-slot-1 {
  transform: translate(-50%, -60%) rotate(0deg);
}

.pile.trick-count-3 .played-slot-2 {
  transform: translate(-6%, -50%) rotate(8deg);
}

@media (min-width: 761px) {
  .app-tabbar {
    width: min(640px, calc(100vw - 44px));
  }
}

@media (max-width: 760px) {
  .leaderboard-view {
    min-height: 100svh;
    padding: 20px 14px 112px;
  }

  .lobby-actions #createGameButton {
    position: fixed;
    top: auto;
    right: 22px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 35;
    width: 68px;
    min-width: 68px;
    height: 68px;
    min-height: 68px;
    border-radius: 50%;
  }

  .lobby-actions #createGameButton::before {
    content: "+";
    color: #062435;
    font-size: 42px;
    line-height: 1;
    font-weight: 300;
  }

  .lobby-actions .icon-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }

  .lobby-actions .settings-icon::before {
    content: "\2699";
    color: #d6edff;
  }

  .lobby-actions .logout-icon::before {
    content: "\21AA";
    color: #ff9f9f;
  }

  .app-tabbar {
    width: 100%;
    left: 0;
    bottom: 0;
    transform: none;
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    min-height: 78px;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  }

  .tab-button {
    min-height: 58px;
    font-size: 12px;
  }

  .tab-icon::before {
    font-size: 23px;
  }

  .game-actions .logout-icon {
    font-size: 0;
  }

  .game-actions .logout-icon::before {
    content: "\21AA";
    color: #ff9f9f;
  }

  .pile {
    min-height: 230px;
  }

  .pile .played-slot {
    width: 82px;
  }

  .pile .played-slot > span {
    max-width: 96px;
    font-size: 11px;
    padding: 3px 8px;
  }

  .pile .played-slot .card {
    width: 68px;
    height: 98px;
  }

  .pile .played-slot-0 {
    transform: translate(-88%, -52%) rotate(-8deg);
  }

  .pile .played-slot-1 {
    transform: translate(-24%, -58%) rotate(5deg);
  }

  .pile .played-slot-2 {
    transform: translate(-66%, -12%) rotate(-2deg);
  }

  .pile .played-slot-3 {
    transform: translate(-6%, -10%) rotate(8deg);
  }
}

/* Specific mobile overrides for the persistent top buttons */
@media (max-width: 760px) {
  #settingsButton::before {
    content: "\2699" !important;
    color: #d6edff !important;
    font-size: 30px !important;
  }

  #logoutLobbyButton::before,
  #leaveRoomButton::before {
    content: "\21AA" !important;
    color: #ff9f9f !important;
    font-size: 32px !important;
  }
}

#createGameButton {
  display: none !important;
}

.create-game-inline {
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  border: 1px solid rgba(145, 237, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(34, 211, 238, 0.18);
  color: #dff8ff;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(18, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(140%);
}

.create-game-inline::before {
  content: none;
}

@media (max-width: 760px) {
  .create-game-inline {
    display: grid;
    place-items: center;
  }

  #createGameButton {
    display: none !important;
  }
}

/* Retired floating create button. */
body #createGameButton {
  display: none !important;
}

/* Premium lobby refresh */
.lobby-view {
  position: relative;
  isolation: isolate;
  gap: clamp(18px, 3vw, 28px);
  animation: lobby-enter 520ms ease both;
}

.lobby-view::before,
.lobby-view::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.lobby-view::before {
  background:
    radial-gradient(circle at 18% 6%, rgba(34, 211, 238, 0.22), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(255, 122, 217, 0.14), transparent 30%),
    radial-gradient(circle at 58% 74%, rgba(19, 245, 174, 0.09), transparent 32%),
    radial-gradient(circle at 82% 92%, rgba(186, 78, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(2, 8, 22, 0.82), rgba(7, 10, 28, 0.94));
}

.lobby-view::after {
  background:
    linear-gradient(132deg, transparent 0 18%, rgba(145, 237, 255, 0.055) 18.2%, transparent 19% 64%, rgba(255, 122, 217, 0.045) 64.2%, transparent 65%),
    radial-gradient(ellipse at center, transparent 42%, rgba(1, 4, 14, 0.48) 100%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.lobby-view .lobby-hero,
.lobby-view .lobby-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(208, 236, 255, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.028)),
    rgba(8, 16, 38, 0.58);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(145, 237, 255, 0.05);
  backdrop-filter: blur(26px) saturate(150%);
}

.lobby-view .lobby-hero::before,
.lobby-view .lobby-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255, 122, 217, 0.1), transparent 32%);
  opacity: 0.86;
}

.lobby-view .lobby-hero > *,
.lobby-view .lobby-panel > * {
  position: relative;
  z-index: 1;
}

.lobby-view .lobby-hero {
  min-height: 104px;
  align-items: center;
  border-radius: 0 0 14px 14px;
  border-width: 0 0 1px;
  background:
    linear-gradient(180deg, rgba(7, 14, 34, 0.86), rgba(7, 12, 30, 0.64)),
    rgba(8, 14, 32, 0.62);
}

.lobby-view .brand {
  display: grid;
  gap: 3px;
}

.lobby-view .brand h1 {
  margin: 0;
  font-size: clamp(46px, 8vw, 76px);
  line-height: 0.92;
  letter-spacing: 0;
  color: #41e6ff;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.42), 0 0 42px rgba(34, 211, 238, 0.16);
}

.lobby-view .brand p {
  margin: 0;
  color: rgba(219, 236, 250, 0.62);
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 650;
}

.lobby-view .lobby-actions {
  gap: 12px;
}

.lobby-view .lobby-actions .icon-button,
.lobby-view #refreshLobbyButton,
.lobby-view .game-row button,
.lobby-view .create-game-inline {
  border: 1px solid rgba(217, 241, 255, 0.16);
  border-radius: 12px;
  color: #edf8ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(18, 28, 54, 0.58);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(145, 237, 255, 0.05);
  backdrop-filter: blur(18px) saturate(145%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.lobby-view .lobby-actions .icon-button {
  font-size: 0;
}

.lobby-view .lobby-actions .icon-button:hover,
.lobby-view #refreshLobbyButton:hover,
.lobby-view .game-row button:hover,
.lobby-view .create-game-inline:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.28);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.26),
    0 0 26px rgba(34, 211, 238, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lobby-view .lobby-actions .icon-button:active,
.lobby-view #refreshLobbyButton:active,
.lobby-view .game-row button:active,
.lobby-view .create-game-inline:active {
  transform: scale(0.97);
}

.lobby-view .lobby-actions .logout-icon {
  background:
    linear-gradient(180deg, rgba(255, 180, 192, 0.16), rgba(255, 128, 166, 0.055)),
    rgba(28, 20, 44, 0.58);
  border-color: rgba(255, 164, 178, 0.2);
}

.lobby-view .lobby-actions .logout-icon::before {
  color: #ffaaa5;
  text-shadow: 0 0 18px rgba(255, 143, 160, 0.24);
}

.lobby-view #settingsButton.settings-icon::before {
  content: "" !important;
  left: 13px;
  right: 13px;
  top: 15px;
  bottom: auto;
  height: 2px;
  border-radius: 999px;
  background: rgba(226, 244, 255, 0.9);
  box-shadow:
    0 8px 0 rgba(226, 244, 255, 0.9),
    0 16px 0 rgba(226, 244, 255, 0.9),
    0 0 16px rgba(145, 237, 255, 0.16);
}

.lobby-view #settingsButton.settings-icon::after {
  content: "" !important;
  position: absolute;
  left: 18px;
  top: 12px;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(226, 244, 255, 0.92);
  box-shadow:
    13px 8px 0 rgba(226, 244, 255, 0.92),
    5px 16px 0 rgba(226, 244, 255, 0.92),
    0 0 18px rgba(145, 237, 255, 0.12);
}

.lobby-view #logoutLobbyButton.logout-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 14px;
  top: 14px;
  width: 14px;
  height: 20px;
  border: 2px solid rgba(255, 174, 171, 0.9);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: transparent !important;
  background: transparent;
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.14);
}

.lobby-view #logoutLobbyButton.logout-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 24px;
  top: 17px;
  width: 19px;
  height: 16px;
  border-radius: 0;
  background: rgba(255, 174, 171, 0.94);
  box-shadow: 0 0 18px rgba(255, 143, 160, 0.22);
  transform: none;
}

.lobby-view .lobby-actions .logout-icon span,
.lobby-view .lobby-actions .settings-icon span {
  display: none;
}

.lobby-view .lobby-actions .logout-icon {
  overflow: visible;
}

.lobby-view .lobby-actions .logout-icon > * {
  pointer-events: none;
}

.lobby-view .lobby-actions .logout-icon::marker {
  content: "";
}

.lobby-view .lobby-actions .logout-icon {
  --exit-arrow: rgba(255, 174, 171, 0.94);
}

.lobby-view .lobby-actions .logout-icon {
  background:
    linear-gradient(180deg, rgba(255, 180, 192, 0.16), rgba(255, 128, 166, 0.055)),
    rgba(28, 20, 44, 0.58);
  border-color: rgba(255, 164, 178, 0.2);
}

.lobby-view .lobby-actions .logout-icon i {
  display: none;
}

.lobby-view .lobby-actions .logout-icon {
  clip-path: none;
}

.lobby-view #logoutLobbyButton.logout-icon::after {
  clip-path: polygon(0 36%, 66% 36%, 66% 0, 100% 50%, 66% 100%, 66% 64%, 0 64%);
}

.lobby-view .lobby-panel {
  border-radius: 14px;
  padding: clamp(20px, 4.6vw, 34px);
}

.lobby-view .lobby-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(145, 237, 255, 0.035), inset 0 0 42px rgba(34, 211, 238, 0.035);
}

.lobby-view .lobby-head {
  margin-bottom: 4px;
}

.lobby-view .lobby-head span {
  color: #d9f7ff;
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1;
  font-weight: 860;
  text-shadow: 0 0 22px rgba(145, 237, 255, 0.14);
}

.lobby-view #refreshLobbyButton {
  min-height: 44px;
  padding: 0 18px;
  color: rgba(236, 249, 255, 0.92);
  font-size: 14px;
  font-weight: 760;
}

.lobby-view .games-list {
  gap: 16px;
}

.lobby-view .game-row {
  position: relative;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 14px;
  padding: clamp(16px, 4vw, 22px);
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.11), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    rgba(14, 24, 48, 0.6);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lobby-view .game-row:hover {
  transform: translateY(-2px);
  border-color: rgba(145, 237, 255, 0.22);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3), 0 0 30px rgba(34, 211, 238, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lobby-view .game-token {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  color: #54e7ff;
  font-size: 0 !important;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(145, 237, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.lobby-view .game-token::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 13px;
  width: 19px;
  height: 26px;
  border: 2px solid rgba(116, 232, 255, 0.9);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 58%, rgba(116, 232, 255, 0.9) 0 3px, transparent 3.5px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025));
  box-shadow:
    -6px 4px 0 -2px rgba(17, 31, 57, 0.96),
    -6px 4px 0 0 rgba(116, 232, 255, 0.36),
    6px -4px 0 -2px rgba(17, 31, 57, 0.96),
    6px -4px 0 0 rgba(116, 232, 255, 0.28),
    0 0 18px rgba(34, 211, 238, 0.16);
  transform: rotate(-8deg);
  opacity: 0.94;
}

.lobby-view .game-token::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 21px;
  width: 7px;
  height: 7px;
  background: rgba(116, 232, 255, 0.88);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.28));
}

.lobby-view .game-row strong {
  color: rgba(248, 252, 255, 0.96);
  font-size: clamp(20px, 4.4vw, 26px);
  line-height: 1.05;
  font-weight: 760;
}

.lobby-view .game-row div span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(210, 225, 241, 0.68);
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 650;
}

.lobby-view .game-row div span::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1.8px solid #19f5ae;
  border-radius: 50%;
  box-shadow: 8px 0 0 -5px #19f5ae, -8px 0 0 -5px #19f5ae, 0 0 14px rgba(25, 245, 174, 0.18);
  opacity: 0.92;
}

.lobby-view .game-row button {
  min-height: 42px;
  padding: 0 18px;
  color: #eafaff;
  font-size: 14px;
  font-weight: 760;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  letter-spacing: 0;
}

.lobby-view .game-row button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.9;
}

.lobby-view .game-row button[data-spectate-code]::before {
  border: 2px solid rgba(226, 244, 255, 0.84);
  border-radius: 75% 18%;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(145, 237, 255, 0.12);
}

.lobby-view .game-row button[data-spectate-code]::after {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  margin-left: -33px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(226, 244, 255, 0.9);
  box-shadow: 0 0 12px rgba(145, 237, 255, 0.2);
  pointer-events: none;
}

.lobby-view .game-row button[data-join-code]::before {
  border-radius: 50%;
  border: 2px solid rgba(226, 244, 255, 0.82);
  background:
    linear-gradient(90deg, transparent 0 43%, rgba(226, 244, 255, 0.82) 43% 57%, transparent 57%),
    linear-gradient(180deg, transparent 0 43%, rgba(226, 244, 255, 0.82) 43% 57%, transparent 57%);
  box-shadow: 0 0 14px rgba(145, 237, 255, 0.12);
}

.lobby-view .create-game-inline {
  min-height: 54px;
  margin-top: 2px;
  border-color: rgba(86, 230, 255, 0.25);
  color: #e9fbff;
  font-size: 16px;
  font-weight: 820;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(145, 237, 255, 0.16), rgba(34, 211, 238, 0.07)),
    rgba(14, 28, 52, 0.58);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lobby-view .empty-lobby {
  min-height: 208px;
  border: 1px dashed rgba(215, 239, 255, 0.13);
  border-radius: 14px;
  color: rgba(218, 232, 247, 0.64);
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.035);
  font-size: clamp(14px, 3.7vw, 17px);
  font-weight: 720;
}

.lobby-view .screen-message {
  min-height: 46px;
  margin-top: 0;
  border-radius: 12px;
  border: 1px solid rgba(25, 245, 174, 0.12);
  color: rgba(36, 255, 187, 0.92);
  background:
    linear-gradient(145deg, rgba(25, 245, 174, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(6, 12, 28, 0.66);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(145%);
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 760;
}

.lobby-view ~ .app-tabbar,
.leaderboard-view ~ .app-tabbar,
.settings-view ~ .app-tabbar {
  border: 1px solid rgba(225, 242, 255, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.026)),
    rgba(12, 10, 32, 0.66);
  box-shadow:
    0 22px 66px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(145, 237, 255, 0.035);
  backdrop-filter: blur(28px) saturate(155%);
}

.app-tabbar .tab-button {
  color: rgba(210, 222, 238, 0.58);
  font-weight: 780;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.app-tabbar .tab-button:hover {
  color: rgba(238, 248, 255, 0.9);
}

.app-tabbar .tab-button:active {
  transform: scale(0.96);
}

.app-tabbar .tab-button.active {
  color: #f6fdff;
  background:
    radial-gradient(circle at 50% 10%, rgba(145, 237, 255, 0.28), transparent 48%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(255, 55, 205, 0.12)),
    rgba(34, 211, 238, 0.08);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.16), 0 0 28px rgba(255, 55, 205, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@keyframes lobby-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .lobby-view {
    padding-inline: 14px;
    padding-top: 20px;
    gap: 18px;
  }

  .lobby-view .lobby-hero {
    min-height: 94px;
    margin-inline: -14px;
    padding: 16px 22px;
  }

  .lobby-view .brand h1 {
    font-size: clamp(44px, 12vw, 58px);
  }

  .lobby-view .lobby-actions {
    gap: 10px;
  }

  .lobby-view .lobby-actions .icon-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
  }

  .lobby-view .lobby-panel {
    padding: 22px;
  }

  .lobby-view .game-row {
    grid-template-columns: 52px 1fr;
    gap: 14px;
  }

  .lobby-view .game-row button {
    grid-column: 2;
    justify-self: start;
  }

  .lobby-view ~ .app-tabbar,
  .leaderboard-view ~ .app-tabbar,
  .settings-view ~ .app-tabbar {
    width: calc(100% - 16px);
    left: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
    border-radius: 22px;
    border-width: 1px;
  }
}

/* Wider fan so every played card remains visible */
.pile .played-slot-0 {
  transform: translate(-132%, -56%) rotate(-16deg);
}

.pile .played-slot-1 {
  transform: translate(-74%, -68%) rotate(-5deg);
}

.pile .played-slot-2 {
  transform: translate(-16%, -68%) rotate(6deg);
}

.pile .played-slot-3 {
  transform: translate(42%, -56%) rotate(16deg);
}

.pile.trick-count-2 .played-slot-0 {
  transform: translate(-106%, -56%) rotate(-11deg);
}

.pile.trick-count-2 .played-slot-1 {
  transform: translate(6%, -56%) rotate(11deg);
}

.pile.trick-count-3 .played-slot-0 {
  transform: translate(-122%, -56%) rotate(-14deg);
}

.pile.trick-count-3 .played-slot-1 {
  transform: translate(-50%, -68%) rotate(0deg);
}

.pile.trick-count-3 .played-slot-2 {
  transform: translate(22%, -56%) rotate(14deg);
}

@media (max-width: 760px) {
  .pile .played-slot-0 {
    transform: translate(-126%, -54%) rotate(-15deg);
  }

  .pile .played-slot-1 {
    transform: translate(-74%, -68%) rotate(-5deg);
  }

  .pile .played-slot-2 {
    transform: translate(-22%, -68%) rotate(6deg);
  }

  .pile .played-slot-3 {
    transform: translate(30%, -54%) rotate(15deg);
  }
}

/* Card motion */
.animation-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
}

.flying-card {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--to-w);
  height: var(--to-h);
  transform: translate3d(var(--from-x), var(--from-y), 0) scale(var(--from-scale-x), var(--from-scale-y));
  transform-origin: center;
  animation: card-flight 430ms cubic-bezier(0.2, 0.82, 0.18, 1) forwards;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.34));
  contain: layout paint;
  will-change: transform, opacity;
}

.flying-card .card {
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.card-arriving {
  opacity: 0;
}

.card-collecting {
  opacity: 0;
}

.collect-card {
  position: fixed;
  z-index: 82;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.38));
  animation: collect-trick 680ms cubic-bezier(0.22, 0.86, 0.2, 1) forwards;
  contain: layout paint;
  will-change: transform, opacity;
}

.collect-card .card {
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.collect-card.collect-win {
  --collect-glow: rgba(34, 211, 238, 0.46);
}

.collect-card.collect-loss {
  --collect-glow: rgba(255, 118, 218, 0.34);
}

.hand.dealing .card {
  opacity: 0;
  transform: translate3d(0, -78px, 0) rotate(-7deg) scale(0.9);
  animation: deal-card 520ms cubic-bezier(0.2, 0.86, 0.22, 1) forwards;
  animation-delay: calc(var(--deal-index, 0) * 38ms);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

@keyframes deal-card {
  0% {
    opacity: 0;
    transform: translate3d(0, -78px, 0) rotate(-7deg) scale(0.9);
  }

  68% {
    opacity: 1;
    transform: translate3d(0, 5px, 0) rotate(1deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes card-flight {
  0% {
    opacity: 0.8;
    transform: translate3d(var(--from-x), var(--from-y), 0) scale(var(--from-scale-x), var(--from-scale-y)) rotate(-6deg);
  }

  42% {
    opacity: 1;
    transform: translate3d(var(--to-x), calc(var(--to-y) - 26px), 0) scale(1.02) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(var(--to-x), var(--to-y), 0) scale(1) rotate(0deg);
  }
}

@keyframes collect-trick {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    box-shadow: 0 0 0 rgba(34, 211, 238, 0);
  }

  38% {
    opacity: 1;
    transform: translate3d(var(--collect-x), -12px, 0) scale(1.06) rotate(var(--collect-rotate));
    box-shadow: 0 0 28px var(--collect-glow);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--collect-x), var(--collect-y), 0) scale(0.72) rotate(var(--collect-rotate));
    box-shadow: 0 0 38px var(--collect-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand.dealing .card,
  .flying-card,
  .collect-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .card-arriving,
  .card-collecting {
    opacity: 1;
  }

  .players.your-turn,
  .game-view .players.your-turn,
  .game-view .players.your-turn::after,
  .game-view .players.your-turn .seat.bottom,
  .game-view .players.your-turn .seat.bottom::before,
  .game-view .players.your-turn .center-stack::before,
  .game-view .opponent-pill.active,
  .game-view .hukum-badge.is-active,
  .game-view:has(.players.your-turn) .hand .card.playable {
    animation: none;
  }
}

/* Login entrance refresh */
.auth-view {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.creator-credit {
  margin: -2px 0 0;
  color: rgba(199, 242, 255, 0.46);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.08);
}

.auth-view::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 18%, rgba(34, 211, 238, 0.24), transparent 22%),
    radial-gradient(circle at 20% 68%, rgba(25, 245, 174, 0.16), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(255, 76, 219, 0.22), transparent 30%);
  filter: none;
}

.auth-view::after {
  content: "";
  position: absolute;
  inset: 10% -20% auto;
  height: 46%;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(145, 237, 255, 0.12) 44.4%, transparent 45.1%),
    linear-gradient(62deg, transparent 0 58%, rgba(255, 122, 217, 0.12) 58.4%, transparent 59.1%);
  transform: rotate(-7deg);
}

.login-stage {
  position: absolute;
  left: 50%;
  top: clamp(22px, 8vh, 72px);
  z-index: -1;
  width: min(430px, 84vw);
  height: 190px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.92;
}

.stage-card {
  position: absolute;
  left: 50%;
  top: 18px;
  width: clamp(62px, 14vw, 96px);
  height: clamp(92px, 20vw, 136px);
  border: 1px solid rgba(145, 237, 255, 0.24);
  border-radius: 8px;
  padding: 11px;
  background:
    radial-gradient(circle at 50% 76%, rgba(255, 255, 255, 0.14), transparent 20%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02)),
    rgba(19, 31, 58, 0.7);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), 0 0 34px rgba(34, 211, 238, 0.1);
  backdrop-filter: blur(8px);
  color: #edf8ff;
  display: grid;
  align-content: space-between;
  font-weight: 950;
  animation: stage-card-reveal 520ms ease-out both;
  will-change: opacity;
}

.stage-card span {
  font-size: clamp(24px, 6vw, 40px);
  line-height: 1;
}

.stage-card b {
  justify-self: center;
  color: currentColor;
  font-size: clamp(32px, 8vw, 58px);
  line-height: 1;
}

.stage-card-1 {
  color: #eaf5ff;
  transform: translateX(-164%) rotate(-18deg);
}

.stage-card-2 {
  color: #ffafa4;
  transform: translateX(-70%) translateY(-16px) rotate(-7deg);
  animation-delay: 80ms;
}

.stage-card-3 {
  color: #ff9ecf;
  transform: translateX(18%) translateY(-16px) rotate(8deg);
  animation-delay: 150ms;
}

.stage-card-4 {
  color: #dff7ff;
  transform: translateX(110%) rotate(19deg);
  animation-delay: 220ms;
}

.auth-card {
  position: relative;
  margin-top: clamp(104px, 18vh, 164px);
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 36%),
    rgba(15, 25, 52, 0.7);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(circle at 50% 100%, rgba(255, 76, 219, 0.16), transparent 36%);
  opacity: 0.9;
}

.auth-card > * {
  position: relative;
}

.hero-brand h1 {
  font-size: clamp(64px, 12vw, 104px);
  letter-spacing: 0;
  text-shadow:
    0 0 22px rgba(34, 211, 238, 0.65),
    0 8px 38px rgba(34, 211, 238, 0.22);
}

.hero-brand p {
  color: #d9e8f8;
  font-weight: 800;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.16);
}

.login-panel {
  position: relative;
}

.login-panel label span {
  color: #d8e5f4;
  text-shadow: 0 0 12px rgba(145, 237, 255, 0.1);
}

.login-panel input,
.login-panel select {
  border: 1px solid rgba(145, 237, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    rgba(7, 12, 32, 0.76);
}

.login-panel input:focus,
.login-panel select:focus {
  outline: 2px solid rgba(34, 211, 238, 0.42);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.login-panel #loginButton {
  min-height: 62px;
  font-size: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(34, 211, 238, 0.18);
  color: #dff8ff;
  border: 1px solid rgba(145, 237, 255, 0.28);
  box-shadow: 0 14px 34px rgba(18, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-panel #loginButton:hover {
  transform: translateY(-1px);
}

.guest-login-button {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035)),
    rgba(255, 122, 217, 0.16) !important;
  color: #dff8ff !important;
  border: 1px solid rgba(255, 122, 217, 0.28) !important;
  box-shadow: 0 14px 34px rgba(255, 76, 219, 0.14) !important;
}

.guest-tag {
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  margin-left: 5px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 217, 0.3);
  background: rgba(255, 122, 217, 0.14);
  color: #ffd7f6;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  vertical-align: middle;
}

@keyframes hero-card-float {
  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -10px;
  }
}

@keyframes stage-card-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .auth-card,
  .lobby-hero,
  .lobby-panel,
  .leaderboard-panel,
  .account-panel,
  .topbar,
  .scoreboard,
  .hand-tray,
  .log,
  .players,
  .app-tabbar {
    backdrop-filter: blur(10px) saturate(125%);
  }

  .login-stage {
    top: 18px;
    height: 156px;
    opacity: 0.78;
  }

  .auth-card {
    margin-top: 120px;
  }

  .stage-card {
    width: 68px;
    height: 98px;
    padding: 8px;
    backdrop-filter: none;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 18px rgba(34, 211, 238, 0.08);
  }

  .stage-card-1 {
    transform: translateX(-150%) rotate(-18deg);
  }

  .stage-card-2 {
    transform: translateX(-68%) translateY(-12px) rotate(-7deg);
  }

  .stage-card-3 {
    transform: translateX(12%) translateY(-12px) rotate(8deg);
  }

  .stage-card-4 {
    transform: translateX(92%) rotate(19deg);
  }

  .hero-brand h1 {
    font-size: 54px;
  }

  .hero-brand p {
    font-size: 19px;
  }
}

/* Mobile gameplay fit and action menu */
.game-view.table {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.game-view .log {
  display: none;
}

.game-view .game-actions {
  position: relative;
}

.game-view #leaveRoomButton {
  display: none !important;
}

.game-view .game-menu-button {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(18, 28, 54, 0.58);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(145%);
  display: grid;
  place-items: center;
}

.game-view .game-menu-button span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(226, 244, 255, 0.9);
  box-shadow: 0 -6px 0 rgba(226, 244, 255, 0.9), 0 6px 0 rgba(226, 244, 255, 0.9);
}

.game-view .game-menu-button:hover,
.game-view .game-menu-button[aria-expanded="true"] {
  border-color: rgba(145, 237, 255, 0.3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), 0 0 24px rgba(34, 211, 238, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.game-view .game-menu-button:active {
  transform: scale(0.96);
}

.game-view .game-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  min-width: 178px;
  padding: 8px;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.16), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(10, 17, 39, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(155%);
  animation: menu-pop 160ms ease-out both;
}

.game-view .game-menu[hidden] {
  display: none !important;
}

.game-view .game-menu button {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  color: rgba(239, 249, 255, 0.9);
  display: flex;
}

.game-view .game-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}

.game-view .game-menu button::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  box-sizing: border-box;
  opacity: 0.86;
}

.game-view .game-menu button[data-menu-icon="lobby"]::before {
  border: 2px solid currentColor;
  border-radius: 4px;
  box-shadow: 5px 5px 0 -2px currentColor;
}

.game-view .game-menu button[data-menu-icon="bots"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: -7px 6px 0 -4px currentColor, 7px 6px 0 -4px currentColor;
}

.game-view .game-menu button[data-menu-icon="end"] {
  color: rgba(255, 222, 188, 0.94);
}

.game-view .game-menu button[data-menu-icon="end"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0 42%, currentColor 42% 58%, transparent 58%);
}

.game-view .center-stack {
  position: relative;
}

.game-view .center-stack::before {
  content: "YOUR TURN";
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 10;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  padding: 6px 14px;
  border: 1px solid rgba(145, 237, 255, 0.34);
  border-radius: 999px;
  color: #eaffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.22), transparent 52%),
    rgba(9, 24, 48, 0.78);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 28px rgba(34, 211, 238, 0.18);
  backdrop-filter: blur(16px) saturate(145%);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.game-view .players.your-turn .center-stack::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: your-turn-badge 1.65s ease-in-out infinite;
}

.game-view .players.your-turn .seat.bottom {
  border-color: rgba(145, 237, 255, 0.58);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.24),
    0 0 34px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .players.your-turn + .hand-tray,
.game-view:has(.players.your-turn) .hand-tray {
  border-top-color: rgba(145, 237, 255, 0.42);
  box-shadow:
    0 -18px 46px rgba(0, 0, 0, 0.28),
    0 0 36px rgba(34, 211, 238, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .players.your-turn ~ .hand-tray .card.playable,
.game-view:has(.players.your-turn) .hand .card.playable {
  outline-color: rgba(145, 237, 255, 0.88);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(145, 237, 255, 0.18),
    0 0 24px rgba(34, 211, 238, 0.18);
}

@keyframes menu-pop {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes your-turn-badge {
  0%,
  100% {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 20px rgba(34, 211, 238, 0.12);
  }

  50% {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 34px rgba(34, 211, 238, 0.28);
  }
}

@media (max-width: 760px) {
  .game-view.table {
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    padding: 6px 0 0;
    gap: 6px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  @supports (height: 100dvh) {
    .game-view.table {
      min-height: 100dvh;
      height: 100dvh;
    }
  }

  .game-view .topbar {
    min-height: 56px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 0 0 12px 12px;
  }

  .game-view .topbar .brand h1 {
    font-size: clamp(28px, 8.5vw, 38px);
  }

  .game-view .topbar p {
    display: none;
  }

  .game-view .game-menu-button {
    width: 40px;
    min-width: 40px;
    min-height: 38px;
  }

  .game-view .game-menu {
    right: 4px;
    top: calc(100% + 8px);
  }

  .game-view .scoreboard {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px 10px;
  }

  .game-view .round-panel {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 52px;
    padding: 8px 10px;
    gap: 7px;
  }

  .game-view .score-panel {
    min-height: 82px;
    padding: 9px 10px;
    gap: 5px;
  }

  .game-view .score-panel strong {
    font-size: 30px;
  }

  .game-view .round-number b {
    font-size: 24px;
  }

  .game-view .mini-stat {
    font-size: 12px;
  }

  .game-view .stat-line {
    font-size: 10px;
  }

  .game-view .ten-row {
    min-height: 18px;
  }

  .game-view .hukum-badge {
    min-height: 42px;
    padding: 5px 8px;
    border-radius: 12px;
  }

  .game-view .hukum-badge .hukum-suit-symbol {
    font-size: 27px;
  }

  .game-view .players {
    min-height: 0;
    margin: 0 8px;
    padding: 8px;
    gap: 6px;
    grid-template-rows: 38px minmax(0, 1fr) 38px;
  }

  .game-view .opponent-strip {
    gap: 6px;
  }

  .game-view .opponent-pill {
    min-height: 34px;
    padding: 0 9px;
    font-size: 11px;
  }

  .game-view .seat {
    padding: 7px 9px;
  }

  .game-view .seat.left,
  .game-view .seat.right,
  .game-view .seat.top {
    display: none;
  }

  .game-view .center-stack {
    gap: 7px;
    padding: 4px 2px;
    min-height: 0;
  }

  .game-view .pile {
    min-height: clamp(128px, 24svh, 210px);
  }

  .game-view .message {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .game-view .seat.bottom {
    min-height: 36px;
    padding: 6px 10px;
  }

  .game-view .player-name {
    font-size: 12px;
  }

  .game-view .hand-tray {
    position: relative;
    z-index: 12;
    padding: 7px 6px 6px;
    border-radius: 12px 12px 0 0;
  }

  .game-view .hand-head {
    min-height: 20px;
    margin-bottom: 5px;
  }

  .game-view .hand-head span,
  .game-view .hand-head b {
    font-size: 11px;
  }

  .game-view .hand {
    min-height: 91px;
    padding: 18px 10px 7px;
  }

  .game-view .hand .card {
    height: 76px;
  }

  .game-view .hand .card.selected {
    transform: translate3d(0, -18px, 0);
  }

  .game-view .selected-card-preview {
    top: -96px;
    height: 106px;
  }

  .game-view .selected-card-preview .card {
    width: 72px;
    height: 104px;
  }
}

@media (max-height: 760px) and (max-width: 760px) {
  .game-view .score-panel {
    min-height: 72px;
  }

  .game-view .players {
    grid-template-rows: 34px minmax(0, 1fr) 34px;
  }

  .game-view .opponent-pill {
    min-height: 31px;
  }

  .game-view .pile {
    min-height: clamp(112px, 22svh, 178px);
  }

  .game-view .message {
    min-height: 32px;
    font-size: 12px;
  }

  .game-view .hand {
    min-height: 84px;
  }

  .game-view .hand .card {
    height: 70px;
  }
}

/* Gameplay density and integrated turn state refinement */
.game-view .center-stack::before {
  content: "";
  top: 1px;
  width: 46px;
  height: 3px;
  padding: 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(145, 237, 255, 0.72), transparent);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.24);
}

.game-view .players.your-turn .center-stack::before {
  opacity: 0.72;
  transform: translateX(-50%) translateY(0);
  animation: table-turn-glint 1.8s ease-in-out infinite;
}

.game-view .opponent-pill.active,
.game-view .seat.turn {
  border-color: rgba(145, 237, 255, 0.62);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(145, 237, 255, 0.18) inset,
    0 0 28px rgba(34, 211, 238, 0.22);
}

.game-view .opponent-pill.active {
  transform: translateY(-1px) scale(1.015);
  animation: active-pill-breathe 1.8s ease-in-out infinite;
}

.game-view .opponent-pill.active::after {
  content: "TURN";
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(145, 237, 255, 0.28);
  border-radius: 999px;
  color: rgba(188, 246, 255, 0.94);
  background: rgba(34, 211, 238, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.game-view .players.your-turn .seat.bottom {
  transform: translateY(-1px);
  animation: active-strip-breathe 1.85s ease-in-out infinite;
}

.game-view .players.your-turn .seat.bottom::after {
  content: "YOUR TURN";
  position: absolute;
  right: 54px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  border-radius: 999px;
  color: rgba(201, 249, 255, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026)),
    rgba(34, 211, 238, 0.1);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.game-view .players {
  gap: 8px;
}

.game-view .center-stack {
  gap: 8px;
  padding-block: 4px;
}

.game-view .pile {
  min-height: 224px;
}

.game-view .pile .played-slot .card {
  box-shadow:
    0 28px 48px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(34, 211, 238, 0.12),
    0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  filter: saturate(1.04) contrast(1.03);
}

.game-view .pile .played-slot > span {
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-view .hand-tray {
  padding-top: 9px;
}

.game-view .hand-head {
  min-height: 18px;
  margin-bottom: 4px;
}

@keyframes active-pill-breathe {
  0%,
  100% {
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(145, 237, 255, 0.18) inset,
      0 0 22px rgba(34, 211, 238, 0.18);
  }

  50% {
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(145, 237, 255, 0.28) inset,
      0 0 36px rgba(34, 211, 238, 0.32);
  }
}

@keyframes active-strip-breathe {
  0%,
  100% {
    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.24),
      0 0 28px rgba(34, 211, 238, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  50% {
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.26),
      0 0 40px rgba(34, 211, 238, 0.31),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
}

@keyframes table-turn-glint {
  0%,
  100% {
    opacity: 0.42;
    transform: translateX(-50%) scaleX(0.72);
  }

  50% {
    opacity: 0.82;
    transform: translateX(-50%) scaleX(1.05);
  }
}

@media (max-width: 760px) {
  .game-view .players {
    gap: 5px;
    padding-block: 7px;
    grid-template-rows: 36px minmax(0, 1fr) 36px;
  }

  .game-view .center-stack {
    gap: 5px;
    padding-block: 2px;
  }

  .game-view .pile {
    min-height: clamp(116px, 21svh, 184px);
  }

  .game-view .pile .played-slot .card {
    box-shadow:
      0 20px 34px rgba(0, 0, 0, 0.48),
      0 0 28px rgba(34, 211, 238, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.13);
  }

  .game-view .opponent-pill.active::after {
    padding: 2px 5px;
    font-size: 8px;
  }

  .game-view .players.your-turn .seat.bottom::after {
    right: 48px;
    padding: 2px 7px;
    font-size: 9px;
  }

  .game-view .hand-tray {
    padding: 6px 6px 5px;
  }

  .game-view .hand-head {
    min-height: 17px;
    margin-bottom: 3px;
  }

  .game-view .hand {
    min-height: 88px;
    padding-top: 16px;
    padding-bottom: 6px;
  }
}

@media (max-width: 380px) {
  .game-view .players.your-turn .seat.bottom::after {
    content: "TURN";
  }
}

@media (max-height: 760px) and (max-width: 760px) {
  .game-view .players {
    grid-template-rows: 33px minmax(0, 1fr) 33px;
  }

  .game-view .pile {
    min-height: clamp(100px, 19svh, 160px);
  }

  .game-view .hand-tray {
    padding-top: 5px;
  }

  .game-view .hand {
    min-height: 82px;
    padding-top: 15px;
  }
}

/* Turn HUD clarity, mobile overflow containment, and smoother card motion */
html,
body,
.app-shell,
.table,
.game-view.table {
  max-width: 100%;
  overflow-x: hidden;
}

.game-view.table,
.game-view .topbar,
.game-view .scoreboard,
.game-view .round-panel,
.game-view .score-panel,
.game-view .players,
.game-view .center-stack,
.game-view .hand-tray,
.game-view .hand {
  min-width: 0;
}

.game-view .hand-tray {
  max-width: 100%;
}

.game-view .hand {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.game-view .hand .card {
  flex-shrink: 0;
}

.game-view .message.message-stacked {
  min-height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-block: 6px;
  line-height: 1.08;
}

.game-view .message-primary {
  color: rgba(235, 251, 255, 0.98);
  font-size: 15px;
  font-weight: 930;
  text-shadow: 0 0 18px rgba(145, 237, 255, 0.2);
}

.game-view .message-secondary {
  color: rgba(205, 225, 240, 0.68);
  font-size: 11px;
  font-weight: 760;
}

.game-view .message.is-local-turn {
  border-color: rgba(145, 237, 255, 0.36);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026)),
    rgba(13, 26, 52, 0.72);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(34, 211, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.game-view .message.is-local-turn .message-primary {
  color: #c8fbff;
  letter-spacing: 0.06em;
}

.game-view .players.your-turn {
  outline: 1px solid rgba(145, 237, 255, 0.28);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(145, 237, 255, 0.12) inset,
    0 0 46px rgba(34, 211, 238, 0.2),
    0 0 84px rgba(34, 211, 238, 0.12);
}

.game-view .players.your-turn::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 1px solid rgba(145, 237, 255, 0.36);
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0 28%, rgba(145, 237, 255, 0.12) 42%, transparent 58% 100%);
  box-shadow:
    inset 0 0 22px rgba(34, 211, 238, 0.12),
    0 0 34px rgba(34, 211, 238, 0.18);
  animation: turn-border-sweep 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.game-view .players.your-turn .seat.bottom {
  border-color: rgba(145, 237, 255, 0.72);
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(25, 245, 174, 0.13), rgba(255, 255, 255, 0.026)),
    rgba(9, 23, 42, 0.68);
}

.game-view .players.your-turn .seat.bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 22%, rgba(145, 237, 255, 0.16) 42%, transparent 60% 100%);
  transform: translateX(-120%);
  animation: active-strip-sweep 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.game-view:has(.players.your-turn) .hand .card.playable {
  animation: playable-card-breathe 1.7s ease-in-out infinite;
}

.flying-card,
.collect-card,
.hand.dealing .card,
.game-view .hand .card,
.game-view .pile .played-slot .card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flying-card {
  animation: card-flight 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

.collect-card {
  animation: collect-trick 660ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

.hand.dealing .card {
  animation: deal-card 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--deal-index, 0) * 32ms);
}

@keyframes turn-border-sweep {
  0%,
  100% {
    opacity: 0.45;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.16));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 28px rgba(34, 211, 238, 0.32));
  }
}

@keyframes active-strip-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }

  30%,
  58% {
    opacity: 1;
  }

  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes playable-card-breathe {
  0%,
  100% {
    box-shadow:
      0 16px 32px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(145, 237, 255, 0.18),
      0 0 20px rgba(34, 211, 238, 0.18);
  }

  50% {
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.36),
      0 0 0 1px rgba(145, 237, 255, 0.34),
      0 0 34px rgba(34, 211, 238, 0.34);
  }
}

@media (max-width: 760px) {
  .game-view .message.message-stacked {
    min-height: 34px;
    padding-block: 4px;
  }

  .game-view .message-primary {
    font-size: 13px;
  }

  .game-view .message-secondary {
    font-size: 10px;
  }

  .game-view .hand {
    min-width: 0;
    max-width: 100%;
    padding-inline: 10px;
  }
}

/* Premium competitive leaderboard refresh */
.leaderboard-view {
  position: relative;
  isolation: isolate;
}

.leaderboard-view::before,
.leaderboard-view::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

.leaderboard-view::before {
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(34, 211, 238, 0.18), transparent 34%),
    radial-gradient(circle at 78% 74%, rgba(255, 55, 205, 0.14), transparent 35%),
    linear-gradient(145deg, rgba(4, 20, 36, 0.72), rgba(12, 8, 32, 0.74));
}

.leaderboard-view::after {
  inset: 12% 0 auto;
  height: 48%;
  background:
    repeating-linear-gradient(115deg, rgba(145, 237, 255, 0.035) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse at center, rgba(145, 237, 255, 0.06), transparent 64%);
  opacity: 0.7;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
}

.leaderboard-view .lobby-hero {
  padding-block: clamp(18px, 3vw, 28px);
}

.leaderboard-view .lobby-hero .brand h1 {
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing: 0;
}

.leaderboard-view .lobby-hero .brand p {
  color: rgba(210, 226, 242, 0.58);
  font-weight: 720;
}

.leaderboard-view #refreshLeaderboardButton {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(216, 241, 255, 0.16);
  border-radius: 12px;
  color: rgba(235, 248, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03)),
    rgba(14, 24, 48, 0.64);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.leaderboard-view #refreshLeaderboardButton:hover {
  border-color: rgba(145, 237, 255, 0.3);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.leaderboard-view #refreshLeaderboardButton:active {
  transform: scale(0.97);
}

.leaderboard-panel {
  position: relative;
  overflow: hidden;
  gap: 14px;
  padding: clamp(16px, 3.2vw, 24px);
  border: 1px solid rgba(216, 241, 255, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.13), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(255, 55, 205, 0.09), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025)),
    rgba(7, 16, 36, 0.68);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(140%);
}

.leaderboard-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(145, 237, 255, 0.11), transparent 28% 72%, rgba(255, 122, 217, 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%);
  opacity: 0.64;
}

.leaderboard-panel > * {
  position: relative;
  z-index: 1;
}

.leaderboard-view .lobby-head span {
  color: rgba(190, 242, 255, 0.96);
  font-size: clamp(22px, 3.4vw, 34px);
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.16);
}

.leaderboard-list {
  gap: 7px;
}

.leaderboard-row {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 74px;
  gap: 12px;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(216, 241, 255, 0.105);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(10, 18, 40, 0.58);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.leaderboard-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: rgba(145, 237, 255, 0.34);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.18);
}

.leaderboard-row:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 237, 255, 0.2);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.leaderboard-rank-1 {
  border-color: rgba(255, 217, 135, 0.22);
  background:
    radial-gradient(circle at 0% 10%, rgba(255, 209, 102, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.024)),
    rgba(12, 19, 40, 0.64);
}

.leaderboard-rank-1::before {
  background: rgba(255, 217, 135, 0.62);
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.2);
}

.leaderboard-rank-2::before {
  background: rgba(202, 224, 242, 0.46);
  box-shadow: 0 0 18px rgba(202, 224, 242, 0.14);
}

.leaderboard-rank-3::before {
  background: rgba(255, 165, 124, 0.44);
  box-shadow: 0 0 18px rgba(255, 165, 124, 0.14);
}

.rank-badge {
  width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(216, 241, 255, 0.12);
  border-radius: 12px;
  color: rgba(200, 251, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.026)),
    rgba(14, 24, 48, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
  font-size: 17px;
  font-weight: 900;
}

.rank-badge span {
  margin-right: -1px;
  color: rgba(205, 221, 240, 0.48);
  font-size: 10px;
  font-weight: 820;
}

.leaderboard-rank-1 .rank-badge {
  color: rgba(255, 234, 190, 0.98);
  border-color: rgba(255, 217, 135, 0.24);
  box-shadow:
    0 0 20px rgba(255, 209, 102, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.leaderboard-team {
  gap: 3px;
  min-width: 0;
}

.leaderboard-pair {
  min-width: 0;
  color: rgba(244, 250, 255, 0.94);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
}

.leaderboard-record,
.leaderboard-specials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: rgba(205, 221, 240, 0.58);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.2;
}

.leaderboard-record span {
  color: rgba(210, 229, 244, 0.72);
}

.leaderboard-specials {
  color: rgba(205, 221, 240, 0.42);
  font-size: 10px;
}

.points-badge {
  min-width: 64px;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0;
  padding: 6px 9px;
  border: 1px solid rgba(25, 245, 174, 0.18);
  border-radius: 12px;
  color: rgba(201, 255, 236, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(25, 245, 174, 0.14), transparent 58%),
    rgba(11, 28, 42, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.points-badge span {
  font-size: 19px;
  font-weight: 930;
  line-height: 1;
}

.points-badge small {
  color: rgba(201, 255, 236, 0.56);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.guest-tag {
  min-height: 16px;
  margin-left: 4px;
  padding: 0 5px;
  vertical-align: 1px;
  border-radius: 5px;
  border-color: rgba(216, 241, 255, 0.16);
  color: rgba(226, 238, 250, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.045);
  font-size: 9px;
  font-style: normal;
  font-weight: 820;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.leaderboard-list .empty-lobby {
  min-height: 220px;
  border-color: rgba(216, 241, 255, 0.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 15%, rgba(34, 211, 238, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

@media (max-width: 760px) {
  .leaderboard-view {
    gap: 14px;
    padding: 14px 10px 104px;
  }

  .leaderboard-view .lobby-hero {
    padding: 18px 18px;
  }

  .leaderboard-view .lobby-hero .brand h1 {
    font-size: 40px;
  }

  .leaderboard-view #refreshLeaderboardButton {
    position: relative;
    width: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 0;
  }

  .leaderboard-view #refreshLeaderboardButton::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 12px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(226, 244, 255, 0.82);
    border-left-color: transparent;
    border-radius: 50%;
    filter: drop-shadow(0 0 8px rgba(145, 237, 255, 0.18));
  }

  .leaderboard-view #refreshLeaderboardButton::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-top: 2px solid rgba(226, 244, 255, 0.82);
    border-right: 2px solid rgba(226, 244, 255, 0.82);
    transform: rotate(22deg);
  }

  .leaderboard-panel {
    padding: 14px 12px;
    border-radius: 18px;
  }

  .leaderboard-view .lobby-head span {
    font-size: 24px;
  }

  .leaderboard-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 66px;
    gap: 9px;
    padding: 9px 9px 9px 10px;
    border-radius: 13px;
  }

  .rank-badge {
    width: 32px;
    min-height: 32px;
    border-radius: 10px;
    font-size: 14px;
  }

  .rank-badge span {
    font-size: 8px;
  }

  .leaderboard-pair {
    font-size: 13px;
  }

  .leaderboard-record,
  .leaderboard-specials {
    gap: 4px 8px;
    font-size: 10px;
  }

  .leaderboard-specials {
    font-size: 9px;
  }

  .points-badge {
    min-width: 52px;
    padding: 5px 7px;
    border-radius: 10px;
  }

  .points-badge span {
    font-size: 16px;
  }
}

/* Phase 2: mobile-only GPU load reduction on gameplay surfaces. */
@media (max-width: 760px) {
  .game-view .opponent-pill,
  .game-view .message,
  .game-view .center-stack::before {
    backdrop-filter: blur(8px);
  }

  .game-view .pile .played-slot > span,
  .game-view .reaction-button {
    backdrop-filter: blur(6px);
  }

  .game-view .game-menu-button {
    backdrop-filter: blur(10px);
  }

  .game-view .game-menu {
    backdrop-filter: blur(14px);
  }

  .players.your-turn,
  .game-view .players.your-turn,
  .game-view .players.your-turn::after,
  .game-view .players.your-turn .seat.bottom,
  .game-view .players.your-turn .seat.bottom::before,
  .game-view .opponent-pill.active,
  .game-view .hukum-badge.is-active,
  .game-view:has(.players.your-turn) .hand .card.playable {
    animation: none;
  }
}

/* Phase 1: top-bar action buttons (Add Bot, End Game) visible in header. */
.game-view .action-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game-view .action-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  box-sizing: border-box;
  opacity: 0.92;
}

.game-view .action-button[data-action-icon="bots"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: -7px 6px 0 -4px currentColor, 7px 6px 0 -4px currentColor;
}

.game-view .action-button[data-action-icon="end"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0 42%, currentColor 42% 58%, transparent 58%);
}

.game-view #endMatchButton {
  color: rgba(255, 222, 188, 0.94);
}

/* Phase 2: reaction/emote button with clear icon + label. */
.reaction-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.reaction-button .reaction-icon {
  width: 16px;
  height: 12px;
  flex: 0 0 16px;
  border: 1.5px solid currentColor;
  border-radius: 6px 6px 6px 2px;
  position: relative;
  box-sizing: border-box;
}

.reaction-button .reaction-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -4px;
  width: 5px;
  height: 5px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 0 3px;
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.player-bar-reaction {
  width: auto;
  min-width: 76px;
}

@media (max-width: 760px) {
  /* Phase 1: top-bar buttons go icon-only on phones. */
  .game-view .action-button {
    gap: 0;
    padding: 0;
    min-width: 40px;
  }

  .game-view .action-button .action-label {
    display: none;
  }

  .game-view .action-button::before {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  /* Phase 2: keep reaction button compact but with visible label. */
  .player-bar-reaction {
    min-width: 64px;
    padding: 0 8px;
    gap: 5px;
  }

  .player-bar-reaction .reaction-label {
    font-size: 10px;
  }

  .player-bar-reaction .reaction-icon {
    width: 14px;
    height: 11px;
    flex: 0 0 14px;
  }

  /* Phase 2: move YOUR TURN pill up 4px so it never grazes the emote button. */
  .game-view .center-stack::before {
    top: -22px;
  }

  /* Static YOUR TURN reinforcement: stronger border + static inset glow on bottom seat. No animation. */
  .game-view .players.your-turn .seat.bottom {
    border-color: rgba(145, 237, 255, 0.82);
    box-shadow:
      0 0 0 1px rgba(145, 237, 255, 0.26) inset,
      0 14px 32px rgba(0, 0, 0, 0.28),
      0 0 26px rgba(34, 211, 238, 0.16);
  }
}

/* Refinement pass: SVG icons + sharper YOUR TURN. Dimensions unchanged. */

/* Disable the older CSS-drawn ::before glyphs; SVG icons take over. */
.game-view .action-button::before {
  content: none;
}

.game-view .action-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  color: currentColor;
}

.game-view .action-button {
  gap: 7px;
}

/* End Game keeps its warm text + gains a softer warm border for clarity. */
.game-view #endMatchButton {
  border-color: rgba(255, 180, 140, 0.34);
  color: rgba(255, 210, 175, 0.96);
}

/* Reaction button: SVG sizing only; existing flex layout from earlier rules. */
.reaction-button .reaction-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  /* override prior CSS-drawn border/shape pseudo-elements that don't apply to <svg>. */
  border: 0;
  border-radius: 0;
}

.reaction-button .reaction-icon::after {
  content: none;
}

/* YOUR TURN pill: sharper cyan edges, cleaner background, no fade transition.
   Removing the transition ties the pill 1:1 to the JS-toggled .players.your-turn class. */
.game-view .center-stack::before {
  border-color: rgba(145, 237, 255, 0.6);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.06)),
    rgba(8, 22, 44, 0.86);
  letter-spacing: 0.08em;
  transition: none;
}

@media (max-width: 760px) {
  /* Phase-1 patch hid the label on mobile; show it again as readable short text. */
  .game-view .action-button {
    gap: 6px;
    padding: 0 9px;
    min-width: 0;
  }

  .game-view .action-button .action-label {
    display: inline;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .game-view .action-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }

  .reaction-button .reaction-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
}

/* Polish pass: Emote button balance + YOUR TURN typography. No dimension change. */
.reaction-button {
  gap: 8px;
  padding: 0 12px;
}

.reaction-button .reaction-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.game-view .center-stack::before {
  border-color: rgba(145, 237, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.04)),
    rgba(6, 18, 38, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 0 16px rgba(34, 211, 238, 0.12);
  color: #f0fcff;
  font-weight: 800;
  letter-spacing: 0.14em;
}

@media (max-width: 760px) {
  .reaction-button {
    gap: 6px;
    padding: 0 10px;
  }

  .reaction-button .reaction-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .reaction-button .reaction-label {
    font-size: 10.5px;
  }
}

/* Final polish: YOUR TURN tag + Emote chip. Footprint preserved, no animation. */

.game-view .center-stack::before {
  content: "▸ YOUR TURN";
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid rgba(145, 237, 255, 0.82);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(8, 22, 46, 0)),
    rgba(8, 22, 46, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(8, 22, 46, 0.55),
    inset 0 0 0 2px rgba(145, 237, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.34);
  color: #e6feff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.reaction-button {
  gap: 8px;
  padding: 0 12px 0 5px;
  border-color: rgba(145, 237, 255, 0.2);
}

.reaction-icon-chip {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.22);
  border: 1px solid rgba(145, 237, 255, 0.34);
  display: grid;
  place-items: center;
  color: #d8f7ff;
}

.reaction-button .reaction-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(218, 246, 255, 0.94);
}

@media (max-width: 760px) {
  .reaction-button {
    gap: 7px;
    padding: 0 10px 0 4px;
  }

  .reaction-icon-chip {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .reaction-button .reaction-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
  }

  .reaction-button .reaction-label {
    font-size: 10.5px;
  }
}

/* Cleanup pass: remove duplicate floating chip; the .message banner is the sole indicator. */

.game-view .center-stack::before {
  content: none;
}

.game-view .message.is-local-turn {
  border-color: rgba(145, 237, 255, 0.6);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.04)),
    rgba(10, 24, 50, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 26px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(34, 211, 238, 0.12);
}

.game-view .message.is-local-turn .message-primary {
  color: #e6feff;
  letter-spacing: 0.16em;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
  font-weight: 850;
}

/* Emote button simplified: no chip wrapper, clean icon + label inside the existing glass surface. */
.reaction-button {
  gap: 6px;
  padding: 0 12px;
}

.reaction-button .reaction-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  color: rgba(189, 244, 255, 0.94);
}

.reaction-button .reaction-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(189, 244, 255, 0.92);
}

@media (max-width: 760px) {
  /* Slight breathing room above the banner so it sits comfortably below the played cards. */
  .game-view .center-stack {
    gap: 7px;
  }

  .game-view .message.is-local-turn .message-primary {
    font-size: 14px;
  }

  .reaction-button {
    gap: 5px;
    padding: 0 10px;
  }

  .reaction-button .reaction-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
}

/* Phase B: passive chat bubbles. One-shot animation, dedicated overlay layer. */

.chat-bubble-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 28;
}

.chat-bubble {
  position: absolute;
  max-width: min(220px, 70vw);
  padding: 6px 10px;
  border-radius: 12px 12px 12px 4px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  background: rgba(8, 22, 46, 0.88);
  color: rgba(220, 246, 255, 0.96);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.32;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  pointer-events: none;
  animation: chat-bubble-pop 5000ms ease-out forwards;
}

@keyframes chat-bubble-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-100% + 6px)) scale(0.86);
  }
  10%,
  88% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 6px)) scale(0.96);
  }
}

@media (max-width: 760px) {
  .chat-bubble {
    max-width: min(160px, 60vw);
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 10px 10px 10px 4px;
  }
}

/* Phase C: chat dialog (compose) + unread indicator. */

.reaction-button {
  position: relative;
}

.reaction-button .unread-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6fb5;
  box-shadow: 0 0 0 2px rgba(8, 22, 46, 0.95);
  display: none;
  pointer-events: none;
}

.reaction-button.has-unread .unread-dot {
  display: block;
}

#chatDialog.chat-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  height: 50svh;
  max-height: 60svh;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(145, 237, 255, 0.18);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(8, 22, 46, 0.96);
  color: rgba(232, 245, 255, 0.94);
  box-shadow:
    0 -18px 50px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(135%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 200ms ease;
}

#chatDialog.chat-dialog::backdrop {
  background: rgba(2, 7, 18, 0.5);
}

.chat-dialog .chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(145, 237, 255, 0.1);
  flex: 0 0 auto;
}

.chat-dialog .chat-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d8f7ff;
}

.chat-dialog .dialog-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(145, 237, 255, 0.22);
  background: rgba(8, 22, 46, 0.6);
  color: #d8f7ff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.chat-dialog .chat-emoji-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(145, 237, 255, 0.08);
  flex: 0 0 auto;
}

.chat-dialog .chat-emoji-row button {
  flex: 1;
  min-height: 44px;
  font-size: 22px;
  border-radius: 12px;
  border: 1px solid rgba(145, 237, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(8, 22, 46, 0.5);
  color: inherit;
  cursor: pointer;
}

.chat-dialog .chat-emoji-row button:active {
  transform: scale(0.96);
}

.chat-history {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 14px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

.chat-history-item {
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(8, 22, 46, 0.55);
  border: 1px solid rgba(145, 237, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-history-item.is-local {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(145, 237, 255, 0.22);
  align-self: flex-end;
  max-width: 86%;
}

.chat-history-item:not(.is-local) {
  align-self: flex-start;
  max-width: 86%;
}

.chat-history-name {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(145, 237, 255, 0.78);
}

.chat-history-guest {
  font-style: normal;
  font-size: 9px;
  margin-left: 4px;
  padding: 1px 4px;
  background: rgba(255, 200, 120, 0.16);
  border-radius: 6px;
  color: rgba(255, 222, 178, 0.96);
}

.chat-history-text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(232, 245, 255, 0.95);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.chat-history:empty::after {
  content: "No messages yet. Say hello.";
  display: block;
  text-align: center;
  font-size: 11px;
  color: rgba(180, 210, 232, 0.5);
  padding: 12px 0;
}

.chat-compose {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(145, 237, 255, 0.1);
  flex: 0 0 auto;
}

#chatTextInput {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(145, 237, 255, 0.22);
  border-radius: 10px;
  background: rgba(6, 18, 38, 0.7);
  color: #f0fcff;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
}

#chatTextInput:focus {
  outline: none;
  border-color: rgba(145, 237, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.16);
}

#chatTextInput::placeholder {
  color: rgba(180, 210, 232, 0.45);
}

#chatSendButton {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0.14)),
    rgba(8, 22, 46, 0.55);
  color: #f0fcff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

#chatSendButton:disabled {
  opacity: 0.5;
  cursor: default;
}

#chatSendButton:active {
  transform: scale(0.97);
}

@media (max-width: 760px) {
  #chatDialog.chat-dialog {
    height: 48svh;
    max-height: 52svh;
    backdrop-filter: blur(10px) saturate(125%);
  }

  .chat-dialog .chat-emoji-row button {
    min-height: 40px;
    font-size: 20px;
  }

  .chat-history-text {
    font-size: 12.5px;
  }
}

/* Bugfix: keep #chatDialog hidden whenever the native dialog is closed.
   The earlier `display: flex` rule on #chatDialog.chat-dialog was overriding
   the user-agent `dialog:not([open]) { display: none }` rule, causing the
   bottom sheet to render visible on login/lobby. */
#chatDialog.chat-dialog:not([open]) {
  display: none;
}

/* Polish: End Match dialog — bring it in line with the post-redesign gameplay UI.
   Overrides the legacy bright-cyan rectangle on the Accept button. */

#endVoteDialog.glass-dialog {
  width: min(420px, calc(100vw - 28px));
  padding: clamp(20px, 4.5vw, 26px);
  border: 1px solid rgba(218, 241, 255, 0.18);
  border-radius: 18px;
  color: rgba(232, 245, 255, 0.95);
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.18), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 217, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    linear-gradient(160deg, rgba(10, 22, 50, 0.94), rgba(28, 18, 50, 0.9));
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(145, 237, 255, 0.06);
  backdrop-filter: blur(18px) saturate(135%);
}

#endVoteDialog form {
  display: grid;
  gap: 14px;
}

#endVoteDialog h2 {
  margin: 0;
  font-size: clamp(20px, 4.6vw, 24px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #eafdff;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
}

#endVoteDialog p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: rgba(200, 220, 240, 0.78);
}

#endVoteDialog .dialog-actions {
  gap: 10px;
  margin-top: 4px;
}

#endVoteDialog .dialog-actions button {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 12px;
  color: rgba(232, 245, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(14, 26, 52, 0.6);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 120ms ease;
}

#endVoteDialog .dialog-actions button:active {
  transform: scale(0.97);
}

#endVoteDialog .dialog-actions button:last-child {
  border-color: rgba(86, 230, 255, 0.32);
  color: #eafcff;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 237, 255, 0.24), transparent 50%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.26), rgba(34, 211, 238, 0.1)),
    rgba(12, 38, 64, 0.7);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(34, 211, 238, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

@media (max-width: 760px) {
  #endVoteDialog.glass-dialog {
    width: min(380px, calc(100vw - 24px));
    padding: 22px;
    border-radius: 16px;
  }

  #endVoteDialog h2 {
    font-size: 19px;
  }

  #endVoteDialog p {
    font-size: 12.5px;
  }

  #endVoteDialog .dialog-actions button {
    min-height: 44px;
  }
}

/* Rules / How to Play view — lightweight, static, glass-consistent. */

.rules-view {
  display: grid;
  gap: 14px;
  padding-bottom: 28px;
}

.rules-view .lobby-hero {
  margin-bottom: 0;
}

.rules-view .lobby-hero h1 {
  font-size: clamp(28px, 5.5vw, 38px);
  letter-spacing: 0.02em;
}

.rules-view .lobby-hero p {
  color: rgba(200, 220, 240, 0.7);
}

.rules-view .lobby-actions button {
  min-width: 96px;
}

.rules-content {
  display: grid;
  gap: 12px;
}

.rules-card {
  padding: 14px 16px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(10, 22, 46, 0.7);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(232, 245, 255, 0.94);
}

.rules-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.rules-card-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6feff;
}

.rules-card-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(180, 210, 232, 0.62);
  text-transform: none;
}

.rules-card-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(145, 237, 255, 0.32);
  background: rgba(34, 211, 238, 0.16);
  color: #d8f7ff;
  font-size: 13px;
  line-height: 1;
}

.rules-card p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(212, 230, 246, 0.86);
}

.rules-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.rules-list li {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(212, 230, 246, 0.86);
}

.rules-list li b {
  color: #e6feff;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-right: 2px;
}

/* Team diagram — 4 seats in a + pattern, table center empty. */
.rules-team-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 160px;
  height: 124px;
  margin: 8px auto 10px;
  align-items: center;
  justify-items: center;
}

.rules-diagram-seat {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.rules-diagram-seat.team-a {
  background: rgba(34, 211, 238, 0.18);
  border: 1px solid rgba(145, 237, 255, 0.55);
  color: #d8f7ff;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
}

.rules-diagram-seat.team-b {
  background: rgba(255, 122, 217, 0.16);
  border: 1px solid rgba(255, 174, 222, 0.5);
  color: #ffe1f4;
  box-shadow: 0 0 14px rgba(255, 122, 217, 0.16);
}

.rules-diagram-seat.seat-top { grid-column: 2; grid-row: 1; }
.rules-diagram-seat.seat-left { grid-column: 1; grid-row: 2; }
.rules-diagram-seat.seat-right { grid-column: 3; grid-row: 2; }
.rules-diagram-seat.seat-bottom { grid-column: 2; grid-row: 3; }

/* Suit symbols row for Turn Flow card. */
.rules-suit-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 8px;
}

.rules-suit {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(218, 241, 255, 0.14);
  background: rgba(8, 22, 46, 0.5);
  font-size: 16px;
  color: #d8f7ff;
}

.rules-suit.red {
  color: #ffb4dc;
  border-color: rgba(255, 174, 222, 0.3);
}

/* Login screen "How to Play" link button — subtle glass treatment. */
.rules-link-button {
  width: max-content;
  margin: 4px auto 0;
  padding: 8px 14px;
  border: 1px solid rgba(145, 237, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(8, 22, 46, 0.5);
  color: rgba(212, 240, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 120ms ease, border-color 120ms ease;
}

.rules-link-button:hover {
  border-color: rgba(145, 237, 255, 0.4);
  color: #e6feff;
}

.rules-link-button:active {
  transform: scale(0.97);
}

/* Lobby Rules icon-button — uses .icon-button glass style with "?" glyph. */
.icon-button.rules-icon {
  position: relative;
  font-size: 0;
}

.icon-button.rules-icon::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  color: currentColor;
  letter-spacing: 0;
}

/* Game-menu Rules icon — hollow circle with question mark inside. */
.game-view .game-menu button[data-menu-icon="rules"]::before {
  content: "?";
  border: 2px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: currentColor;
  line-height: 1;
}

@media (max-width: 760px) {
  .rules-card {
    padding: 12px 14px;
    border-radius: 13px;
  }

  .rules-card-head h2 {
    font-size: 14px;
  }

  .rules-card p,
  .rules-list li {
    font-size: 12.5px;
  }

  .rules-team-diagram {
    width: 142px;
    height: 110px;
  }

  .rules-diagram-seat {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .rules-suit {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
}

/* Cleanup pass: compact lobby Rules cue + proper Rules back button. */

.rules-cue-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(218, 241, 255, 0.16);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(8, 22, 46, 0.55);
  color: rgba(232, 245, 255, 0.88);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.rules-cue-button .rules-cue-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 18px;
}

.rules-cue-button:hover {
  border-color: rgba(145, 237, 255, 0.32);
  color: #e6feff;
}

.rules-cue-button:active {
  transform: scale(0.97);
}

.rules-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(218, 241, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(14, 26, 52, 0.6);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(232, 245, 255, 0.94);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.rules-back-button .rules-back-chevron {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  margin-top: -2px;
}

.rules-back-button:hover {
  border-color: rgba(145, 237, 255, 0.32);
}

.rules-back-button:active {
  transform: scale(0.97);
}

@media (max-width: 760px) {
  .rules-cue-button {
    min-height: 36px;
    padding: 0 11px;
    font-size: 10.5px;
    gap: 6px;
  }

  .rules-cue-button .rules-cue-icon {
    width: 16px;
    height: 16px;
    font-size: 9px;
    flex: 0 0 16px;
  }

  .rules-back-button {
    min-height: 38px;
    padding: 0 12px 0 10px;
    font-size: 12.5px;
  }

  .rules-back-button .rules-back-chevron {
    font-size: 18px;
  }
}

/* Specificity override: defeat the mobile .lobby-actions button rule
   (`color: transparent; overflow: hidden; width: 44px`) so the Rules cue and
   Rules back-button keep their inline icon+label markup visible. */

.lobby-actions .rules-cue-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(218, 241, 255, 0.18);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(8, 22, 46, 0.55);
  color: rgba(232, 245, 255, 0.92);
  overflow: visible;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.lobby-actions .rules-cue-button .rules-cue-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  color: inherit;
}

.lobby-actions .rules-cue-button .rules-cue-label {
  color: inherit;
}

.rules-view .lobby-actions .rules-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(218, 241, 255, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(14, 26, 52, 0.6);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(232, 245, 255, 0.96);
  overflow: visible;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.rules-view .lobby-actions .rules-back-button .rules-back-chevron {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  margin-top: -2px;
  color: inherit;
}

.rules-view .lobby-actions .rules-back-button .rules-back-label {
  color: inherit;
}

@media (max-width: 760px) {
  .lobby-actions .rules-cue-button {
    min-height: 36px;
    padding: 0 11px;
    font-size: 10.5px;
    gap: 6px;
  }

  .lobby-actions .rules-cue-button .rules-cue-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    font-size: 9px;
  }

  .rules-view .lobby-actions .rules-back-button {
    min-height: 38px;
    padding: 0 12px 0 10px;
    font-size: 12.5px;
  }

  .rules-view .lobby-actions .rules-back-button .rules-back-chevron {
    font-size: 18px;
  }
}

/* Branding: inline SVG mark + refined Thaas wordmark.
   Mark is static SVG; wordmark uses a single static text-shadow stack. */

.brand-mark-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.brand-mark-row.brand-mark-large {
  gap: 14px;
  justify-content: center;
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.32));
}

.brand-mark-large .brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.36));
}

.brand-mark-row h1 {
  margin: 0;
  font-style: italic;
  letter-spacing: -0.01em;
  text-shadow:
    0 0 4px rgba(34, 211, 238, 0.55),
    0 0 18px rgba(34, 211, 238, 0.4),
    0 0 42px rgba(34, 211, 238, 0.14);
}

@media (max-width: 760px) {
  .brand-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .brand-mark-large .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .brand-mark-row {
    gap: 10px;
  }

  .brand-mark-row.brand-mark-large {
    gap: 12px;
  }
}

/* Branding: transparent inline SVG lockup + icon. No crops, no PNGs. */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.brand-lockup .brand-icon-svg {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
}

.brand-lockup .brand-wordmark-svg {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  width: auto;
}

/* Login screen — hero lockup, centered, larger. */
.hero-brand .brand-lockup-hero {
  height: 56px;
  margin: 0 auto 4px;
  justify-content: center;
  gap: 12px;
}

.hero-brand p {
  text-align: center;
  margin-top: 6px;
}

/* Lobby header — compact lockup. */
.lobby-view .brand .brand-lockup-lobby {
  height: 40px;
  gap: 9px;
  margin-bottom: 2px;
}

/* Gameplay topbar — micro horizontal lockup (icon + small wordmark). */
.game-view .topbar .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.game-view .topbar .brand .brand-lockup-game {
  height: 26px;
  gap: 6px;
}

@media (max-width: 760px) {
  .game-view .topbar .brand .brand-lockup-game {
    height: 22px;
    gap: 5px;
  }
}

/* Rules header — icon only beside "How to Play" h1. */
.rules-brand-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rules-brand-head h1 {
  margin: 0;
}

.brand-icon-rules {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 32px;
}

@media (max-width: 760px) {
  .hero-brand .brand-lockup-hero {
    height: 48px;
    gap: 10px;
  }

  .lobby-view .brand .brand-lockup-lobby {
    height: 34px;
    gap: 7px;
  }

  .game-view .topbar .brand .brand-icon-game {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .rules-brand-head {
    gap: 10px;
  }

  .brand-icon-rules {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
}

/* Final branding consistency: replace legacy oversized cyan headings on
   Leaderboard and Settings with a compact, integrated section header style.
   Specificity (0,3,1) matches the legacy `.{view} .lobby-hero .brand h1`
   rules; appended at end so cascade order wins on both desktop and mobile. */

.leaderboard-view .lobby-hero .brand h1,
.settings-view .lobby-hero .brand h1 {
  margin: 0;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #f0fcff;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.16);
}

.leaderboard-view .lobby-hero .brand p,
.settings-view .lobby-hero .brand p {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(195, 218, 235, 0.66);
}

@media (max-width: 760px) {
  .leaderboard-view .lobby-hero .brand h1,
  .settings-view .lobby-hero .brand h1 {
    font-size: clamp(22px, 5.4vw, 28px);
  }

  .leaderboard-view .lobby-hero .brand p,
  .settings-view .lobby-hero .brand p {
    font-size: 11.5px;
  }
}

/* Mobile responsiveness pass: gesture hints + instant press feedback.
   - touch-action: manipulation removes Safari gesture-detection latency
   - Hand-tray declares pan-x scroll intent; cards inside re-assert
     manipulation so a finger landing on a card resolves as a tap rather
     than as the start of a horizontal scroll gesture.
   - .is-pressed visual state is applied by a top-level pointerdown
     listener (app.js pressFor) within ~10 ms of finger contact, well
     before any click or async work begins. Static transform/opacity
     only -- no continuous animation, no GPU loop. */

button,
.card,
[role="button"],
.app-tabbar .tab-button {
  touch-action: manipulation;
}

.game-view .hand {
  touch-action: pan-x;
}

.game-view .hand .card {
  touch-action: manipulation;
}

button.is-pressed {
  opacity: 0.78;
  transform: scale(0.97);
}

button:disabled {
  opacity: 0.72;
  pointer-events: none;
  cursor: default;
}

/* ===== iOS PWA safe-area insets =====
   When Thaas is added to the iPhone Home Screen and opened in standalone
   mode, the status bar (and on newer phones, the home indicator at the
   bottom) overlays the viewport because `viewport-fit=cover` is set on
   the viewport meta. Without compensation, the top buttons sit under the
   status bar and become untappable.

   Fix: pad .app-shell by env(safe-area-inset-*) on all four sides.
   max() keeps the larger of our default 18px and the device inset, so
   desktop / Android / mobile Safari (where every inset is 0) see no
   change — max(18px, 0) = 18px.

   Bottom and side insets were already handled inline at specific spots
   earlier in this file (chat dialog, tabbar, pinned overlays). This block
   adds the missing TOP inset and aligns view min-heights with the new
   padded content box. */

/* Desktop / tablet keep the original 18px breathing room, capped against
   the PWA safe-area insets so notched displays in landscape don't bleed
   under the camera notch. */
.app-shell {
  padding-top: max(18px, env(safe-area-inset-top));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  padding-left: max(18px, env(safe-area-inset-left));
  overflow-x: hidden;
}

/* Mobile: revert to the original "app-shell is edge-to-edge, views supply
   their own padding" pattern. Safe-area insets are still applied so the
   PWA status bar / home indicator don't cover content, but we no longer
   add the desktop 18px which was stacking on top of view padding and
   shrinking usable width. */
@media (max-width: 760px) {
  .app-shell {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* Normalize horizontal padding across all views so the sticky hero's
     margin-inline: -14px bleed cancels out for every view. Without this,
     .leaderboard-view (was 10px) and .rules-view (was 0) caused the hero
     to overflow the parent by 8px and 28px respectively, which body's
     overflow-x: hidden was silently clipping — the source of "right side
     cut off." */
  .auth-view,
  .lobby-view,
  .leaderboard-view,
  .settings-view,
  .rules-view {
    padding-inline: 14px;
    box-sizing: border-box;
    max-width: 100%;
  }
}

.auth-view,
.lobby-view,
.settings-view,
.leaderboard-view {
  min-height: calc(100vh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
}

/* In PWA standalone mode on phones the status bar steals ~47px from the
   top; the lobby/settings vertical centering offset becomes excessive once
   that padding is also added. Tighten the original padding-top so the
   hero/card doesn't drift toward the middle. Browser/desktop unaffected. */
@media (display-mode: standalone) and (max-width: 760px) {
  .lobby-view { padding-top: 3vh; }
  .settings-view { padding-top: 6vh; }
}

/* ===== Lobby header — match the in-game topbar's compact mobile lockup =====
   Was 40px tall brand-lockup with a 94px min-height hero — significantly
   chunkier than the game topbar (22px lockup, ~50px header). Tighten so
   the lobby reads as the same design family. */
@media (max-width: 760px) {
  .lobby-view > .lobby-hero {
    min-height: 0;
    padding: 10px 16px;
  }

  .lobby-view > .lobby-hero .brand-lockup-lobby {
    height: 22px;
    gap: 6px;
    margin-bottom: 0;
  }

  /* The visually-hidden h1 doesn't show, so the desktop 44-58px size
     value is harmless on screen, but the brand <p> account text below
     does — keep it discreet (matches the game topbar's hidden statusText
     pattern). */
  .lobby-view > .lobby-hero .brand > p {
    font-size: 11px;
    opacity: 0.65;
    margin: 0;
    line-height: 1.1;
  }
}

/* ===== Mobile game-view: fit entire match into one screen =====
   On phones the desktop layout reserves 440px+ for the play table, which
   forces the hand below the viewport and requires scrolling. We cap the
   game-view to the live viewport height (excluding the safe-area padding
   the .app-shell already applies) and shrink the .pile / scoreboard /
   hand-tray spacings so the whole match — topbar, scoreboard, table, hand
   — fits on one iPhone screen without scrolling.

   The .game-view.table::before fixed gradient sits behind everything, so
   any unused vertical space at the bottom of the layout blends into the
   game's felt background — there's no visible gap between hand-tray and
   the bottom tabbar. */
@media (max-width: 760px) {
  .game-view.table {
    min-height: 0;
    max-height: calc(100dvh
      - max(18px, env(safe-area-inset-top))
      - max(18px, env(safe-area-inset-bottom)));
    grid-template-rows: auto auto auto auto;
  }

  .game-view .scoreboard {
    padding: 8px 10px;
    gap: 6px;
  }

  .game-view .scoreboard .round-panel {
    padding: 6px 12px;
  }

  .game-view .players {
    min-height: 0;
    margin: 0 8px;
    padding: 6px;
  }

  .game-view .pile {
    /* Was clamp(128px, 24svh, 210px). Tighter — keeps four card slots
       comfortably tappable while reclaiming ~50-70px of vertical space. */
    min-height: clamp(96px, 16dvh, 150px);
  }

  .game-view .center-stack {
    gap: 6px;
    padding: 4px 2px;
  }

  .game-view .hand-tray {
    padding: 6px 6px 4px;
  }

  .game-view .hand-head {
    margin-bottom: 4px;
    min-height: 18px;
  }
}

/* ===== Header consistency: lobby / leaderboard / settings / rules =====
   The in-game .topbar uses a sticky, compact, dark-glass treatment that
   reads cleaner on mobile than the lighter lobby-hero defaults. Apply the
   same treatment to all non-game headers so they feel like one design
   language. Safe-area padding is intentionally NOT added here — the
   .app-shell already applies it once at the top, and we don't want
   stacked top padding. */
@media (max-width: 760px) {
  .lobby-view > .lobby-hero,
  .leaderboard-view > .lobby-hero,
  .settings-view > .lobby-hero,
  .rules-view > .lobby-hero {
    position: sticky;
    top: 0;
    z-index: 9;
    margin-inline: -14px;
    padding: 10px 16px;
    border-radius: 0;
    border-width: 0 0 1px;
    background: rgba(7, 13, 32, 0.78);
    backdrop-filter: blur(22px) saturate(150%);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
  }

  /* Page-titled headers (leaderboard / settings / rules) use a compact
     icon-plus-title row matching the game topbar's vertical rhythm. */
  .leaderboard-view > .lobby-hero .rules-brand-head,
  .settings-view > .lobby-hero .rules-brand-head,
  .rules-view > .lobby-hero .rules-brand-head {
    gap: 10px;
    align-items: center;
  }

  .leaderboard-view > .lobby-hero .rules-brand-head h1,
  .settings-view > .lobby-hero .rules-brand-head h1,
  .rules-view > .lobby-hero .rules-brand-head h1 {
    font-size: clamp(20px, 4.8vw, 28px);
    line-height: 1.1;
    margin: 0;
  }

  .leaderboard-view > .lobby-hero .rules-brand-head .brand-icon-rules,
  .settings-view > .lobby-hero .rules-brand-head .brand-icon-rules,
  .rules-view > .lobby-hero .rules-brand-head .brand-icon-rules {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  /* Hide the long subtitle on phones — the title alone is enough, mirroring
     the game topbar which already hides its status text on phones. */
  .leaderboard-view > .lobby-hero > .brand > p,
  .settings-view > .lobby-hero > .brand > p,
  .rules-view > .lobby-hero > .brand > p {
    display: none;
  }

  /* Action buttons match the game .game-actions sizing: compact 44px. */
  .leaderboard-view > .lobby-hero .lobby-actions button,
  .settings-view > .lobby-hero .lobby-actions button {
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ===== Page background harmony (mobile) =====
   Settings has no ::before/::after overlay and looks "seamless" — the body
   gradient shows through directly. Leaderboard has a light fixed overlay
   that also looks fine. Login and Lobby were defining heavier overlays
   (0.82-0.94 alpha on .lobby-view, and an absolute-positioned -20% inset
   gradient on .auth-view that's clipped by overflow: hidden — producing
   the visible "rectangle behind the content" on iPhone PWA).

   Match Settings on mobile: disable those overlays so the body gradient
   shows through edge-to-edge. The glass panels (.auth-card, .lobby-hero,
   .lobby-panel) keep their own backgrounds and are unaffected. Desktop is
   not touched — the overlays still apply at >760px. */
@media (max-width: 760px) {
  .auth-view::before,
  .auth-view::after,
  .lobby-view::before,
  .lobby-view::after {
    display: none;
  }
}

/* ===== Keyboard-aware modal positioning (iPhone Safari + PWA) =====
   On iOS the on-screen keyboard covers the bottom of the layout viewport
   without resizing it, so the natively-centered <dialog> can end up with
   its action buttons behind the keyboard. wireDialogKeyboard() in app.js
   exposes the visible viewport via two CSS variables on the dialog:

   --visual-viewport-height : px height of the visible area
   --keyboard-offset        : px height the keyboard is covering

   We cap the dialog's max-height to the visible area so it can never
   render beyond the keyboard, and override the auto margin-bottom by the
   keyboard offset — with margin:auto centering, growing margin-bottom
   shifts the dialog upward by that amount.

   Both fall back gracefully: when the keyboard is closed the offset is 0,
   margin-bottom matches the original 16px gap, and behaviour is identical
   to before. Desktop browsers never see this — gated behind max-width. */
@media (max-width: 760px) {
  #roomNameDialog[open],
  #guestNameDialog[open] {
    max-height: min(calc(var(--visual-viewport-height, 100dvh) - 24px), 100dvh);
    overflow-y: auto;
    margin-bottom: max(16px, calc(var(--keyboard-offset, 0px) + 16px));
  }
}