.game-shell {
  max-width: 1080px;
}

.game-auth-notice[hidden],
.tictactoe-lobby[hidden],
.tictactoe-room[hidden],
.gomoku-lobby[hidden],
.gomoku-room[hidden],
.big-two-lobby[hidden],
.big-two-room[hidden],
.casino-lobby[hidden],
.casino-room[hidden] {
  display: none;
}

.big-two-room {
  overflow: clip;
}

.casino-room {
  overflow: clip;
}

.tictactoe-room.is-room-created,
.gomoku-room.is-room-created,
.big-two-room.is-room-created,
.casino-room.is-room-created {
  animation: private-room-created 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.big-two-room.is-game-started .big-two-table,
.big-two-room.is-game-started .big-two-hand-area {
  animation: big-two-game-section-in 0.46s ease both;
}

.big-two-room.is-game-started .big-two-table {
  animation-delay: 90ms;
}

.big-two-room.is-game-started .big-two-hand-area {
  animation-delay: 170ms;
}

.game-auth-notice,
.game-picker,
.tictactoe-lobby,
.tictactoe-room,
.gomoku-lobby,
.gomoku-room,
.casino-lobby,
.casino-room {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.game-auth-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  align-items: center;
}

.game-auth-notice > span {
  color: var(--muted);
}

.game-auth-notice > .login-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.game-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.game-section-head h2 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 24px;
}

.game-section-head > span,
.game-section-head div > span {
  color: var(--muted);
  font-size: 13px;
}

.game-eyebrow {
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.game-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-items: center;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.game-card.is-ready {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.game-card.is-coming {
  opacity: 0.78;
}

.game-card-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--control-bg));
  font-size: 28px;
}

.kahoot-card-icon {
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(145deg, #7425c9, #46178f);
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -.08em;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18);
  transform: rotate(-3deg);
}

.game-card b {
  color: var(--text);
  font-size: 18px;
}

.game-card p,
.private-room-create p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.game-card > button {
  grid-column: 1 / -1;
}

.game-card.is-disabled {
  opacity: .65;
  filter: grayscale(.35);
}

.game-access-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(22, 163, 74, .12);
  color: #15803d;
  font-size: .75rem;
  font-weight: 700;
}

.game-access-badge.is-closed {
  background: rgba(220, 38, 38, .12);
  color: #dc2626;
}

.game-access-controls {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.game-access-controls > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.game-access-controls > div:first-child b {
  color: var(--text);
  font-size: 1.05rem;
}

.game-access-controls > div:first-child span {
  color: var(--muted);
  line-height: 1.5;
  text-align: right;
}

.game-access-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.game-access-switch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.game-access-switch:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--control-bg));
  transform: translateY(-1px);
}

.game-access-switch > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.game-access-switch b { overflow-wrap: anywhere; }
.game-access-switch small { color: var(--good); font-weight: 700; }
.game-access-switch.is-closed small { color: var(--muted); }

.game-access-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.game-access-switch i {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #b8bdc8;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
  transition: background .2s ease;
}

.game-access-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .3);
  transition: transform .2s cubic-bezier(.22, .8, .2, 1);
}

.game-access-switch input:checked + i { background: #34c759; }
.game-access-switch input:checked + i::after { transform: translateX(20px); }
.game-access-switch input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, #34c759 30%, transparent); }
.game-access-switch input:disabled + i { opacity: .55; }

@media (max-width: 920px) {
  .game-access-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .game-access-controls > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .game-access-controls > div:first-child span {
    text-align: left;
  }

  .game-access-buttons { grid-template-columns: 1fr; }
  .game-access-switch { min-height: 60px; }
}

.private-room-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.private-room-create,
.private-room-join {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.private-room-join > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.private-room-join input {
  width: 100%;
  min-width: 0;
  appearance: none;
  padding: 11px 13px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  outline: none;
  background: #f8fafc;
  color: #0f172a;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.1em;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.private-room-join input::placeholder {
  color: #64748b;
  opacity: 1;
}

.private-room-join input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.big-two-type-options {
  display: grid;
  gap: 10px;
  margin: 4px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--control-bg) 70%, transparent);
}

.big-two-type-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.big-two-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.big-two-type-grid label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.big-two-type-grid label:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: translateY(-1px);
}

.big-two-type-grid label:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.big-two-type-grid input {
  appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  background: #ffffff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.big-two-type-grid input:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3.2 8.3 3 3 6.6-6.6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}

.big-two-type-grid input:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.big-two-type-grid input:disabled {
  opacity: 1;
}

.big-two-type-grid span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.big-two-type-grid small {
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--control-bg));
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
}

.big-two-type-grid .is-fixed {
  cursor: default;
}

.big-two-timeout-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-weight: 800;
}

.big-two-timeout-input {
  display: flex;
  width: 118px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
  color: #475569;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.big-two-timeout-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.big-two-timeout-input input {
  width: 100%;
  min-width: 0;
  appearance: textfield;
  padding: 9px 4px 9px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-weight: 900;
  text-align: right;
}

.big-two-timeout-input input::-webkit-inner-spin-button,
.big-two-timeout-input input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.big-two-timeout-input > span {
  padding: 0 11px 0 5px;
  font-size: 13px;
  font-weight: 800;
}

.big-two-rule-switches {
  display: grid;
  gap: 8px;
}

.big-two-rule-switches label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.big-two-rule-switches label > span {
  display: grid;
  gap: 2px;
}

.big-two-rule-switches b {
  color: var(--text);
  font-size: 13px;
}

.big-two-rule-switches small {
  color: var(--muted);
  font-size: 11px;
}

.big-two-rule-switches input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.big-two-rule-switches i {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 42px;
  height: 24px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  background: #cbd5e1;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.big-two-rule-switches i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  content: "";
  transition: transform 0.18s ease;
}

.big-two-rule-switches input:checked + i {
  border-color: var(--accent);
  background: var(--accent);
}

.big-two-rule-switches input:checked + i::after {
  transform: translateX(18px);
}

.big-two-rule-switches input:focus-visible + i {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.tictactoe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.tictactoe-toolbar h2 {
  margin: 3px 0;
  font-size: 23px;
}

.tictactoe-toolbar h2 strong {
  color: var(--accent);
  letter-spacing: 0.08em;
}

.tictactoe-toolbar > div > span:last-child {
  color: var(--muted);
  font-size: 13px;
}

.tictactoe-toolbar-actions {
  display: flex;
  gap: 8px;
}

.tictactoe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  margin-top: 18px;
}

.tictactoe-main {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-width: 0;
}

.tictactoe-status {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: center;
  font-size: 17px;
  font-weight: 900;
}

.tictactoe-status.is-your-turn {
  background: color-mix(in srgb, var(--good) 14%, var(--surface));
  color: var(--good);
}

.tictactoe-status.is-finished {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-dark);
}

.tictactoe-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: min(100%, 430px);
  aspect-ratio: 1;
  gap: 8px;
  overflow: hidden;
}

.tictactoe-cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--control-bg);
  color: var(--text);
  font-size: clamp(42px, 10vw, 78px);
  font-weight: 1000;
  line-height: 1;
}

.tictactoe-cell:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--control-bg));
}

.tictactoe-cell.is-x {
  color: #2563eb;
}

.tictactoe-cell.is-o {
  color: #e11d48;
}

.tictactoe-cell.is-winning {
  border-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 16%, var(--control-bg));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #f59e0b 30%, transparent);
}

.tictactoe-cell:disabled {
  opacity: 1;
}

.tictactoe-players {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.game-section-head.compact {
  align-items: center;
}

.game-section-head.compact > div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#tictactoe-player-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.gomoku-board-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 4px;
  overscroll-behavior-x: contain;
}

.gomoku-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: repeat(15, minmax(0, 1fr));
  width: min(100%, 680px);
  min-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #7c4a1d;
  border-radius: 8px;
  background: #d9a85e;
  box-shadow: 0 12px 28px rgba(58, 35, 14, 0.2);
}

.gomoku-winning-line {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gomoku-winning-line line {
  stroke: #ef4444;
  stroke-width: 12;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: gomoku-winning-line-in 0.42s ease-out both;
}

.gomoku-board .gomoku-cell {
  --gomoku-horizontal-position: center;
  --gomoku-horizontal-size: 100% 1px;
  --gomoku-vertical-position: center;
  --gomoku-vertical-size: 1px 100%;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #d9a85e !important;
  background-image:
    linear-gradient(rgba(69, 39, 13, 0.72), rgba(69, 39, 13, 0.72)),
    linear-gradient(rgba(69, 39, 13, 0.72), rgba(69, 39, 13, 0.72)) !important;
  background-position: var(--gomoku-horizontal-position), var(--gomoku-vertical-position);
  background-repeat: no-repeat;
  background-size: var(--gomoku-horizontal-size), var(--gomoku-vertical-size);
  box-shadow: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.gomoku-cell.is-first-column {
  --gomoku-horizontal-position: right center;
  --gomoku-horizontal-size: 50% 1px;
}

.gomoku-cell.is-last-column {
  --gomoku-horizontal-position: left center;
  --gomoku-horizontal-size: 50% 1px;
}

.gomoku-cell.is-first-row {
  --gomoku-vertical-position: center bottom;
  --gomoku-vertical-size: 1px 50%;
}

.gomoku-cell.is-last-row {
  --gomoku-vertical-position: center top;
  --gomoku-vertical-size: 1px 50%;
}

.gomoku-cell::after {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gomoku-cell.is-x::after {
  background: radial-gradient(circle at 35% 30%, #4b5563 0, #111827 42%, #020617 100%);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.38);
  opacity: 1;
  transform: scale(1);
}

.gomoku-cell.is-o::after {
  border: 1px solid #cbd5e1;
  background: radial-gradient(circle at 35% 30%, #ffffff 0, #f8fafc 48%, #dbe3ec 100%);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25);
  opacity: 1;
  transform: scale(1);
}

.gomoku-cell.is-last::before {
  position: absolute;
  z-index: 1;
  inset: 38%;
  border-radius: 50%;
  background: #ef4444;
  content: "";
  pointer-events: none;
}

.gomoku-board .gomoku-cell:hover,
.gomoku-board .gomoku-cell:active,
.gomoku-board .gomoku-cell:disabled,
.gomoku-board .gomoku-cell:disabled:hover {
  background-color: #d9a85e !important;
  background-image:
    linear-gradient(rgba(69, 39, 13, 0.72), rgba(69, 39, 13, 0.72)),
    linear-gradient(rgba(69, 39, 13, 0.72), rgba(69, 39, 13, 0.72)) !important;
  color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

.gomoku-cell:focus,
.gomoku-cell:focus-visible {
  outline: 0;
  box-shadow: none;
}

.gomoku-cell.is-preview-x:hover:not(:disabled)::after {
  background: radial-gradient(circle at 35% 30%, #4b5563 0, #111827 42%, #020617 100%);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
  opacity: 0.46;
  transform: scale(0.88);
}

.gomoku-cell.is-preview-o:hover:not(:disabled)::after {
  border: 1px solid rgba(100, 116, 139, 0.55);
  background: radial-gradient(circle at 35% 30%, #ffffff 0, #f8fafc 48%, #dbe3ec 100%);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.16);
  opacity: 0.66;
  transform: scale(0.88);
}

.gomoku-cell:disabled {
  opacity: 1;
}

.gomoku-player-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.gomoku-player-slot {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
}

.gomoku-player-slot.is-black {
  background: #111827;
  color: #ffffff;
}

.gomoku-player-slot.is-white {
  background: #ffffff;
  color: #111827;
}

.big-two-layout {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.big-two-player-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.big-two-player {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.big-two-player.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: big-two-current-pulse 1.6s ease-in-out infinite;
}

.big-two-player.is-you {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.big-two-player b,
.big-two-player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.big-two-player span {
  color: var(--muted);
  font-size: 12px;
}

.big-two-player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.big-two-player-actions:empty {
  display: none;
}

.big-two-player-actions button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 11px;
}

.big-two-player-actions .danger {
  border-color: color-mix(in srgb, #dc2626 45%, var(--line));
  color: #dc2626;
}

.big-two-pass-indicator {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 8px;
  overflow: visible !important;
  color: #f59e0b !important;
  font-size: 13px !important;
  font-weight: 1000;
  letter-spacing: 0.08em;
  pointer-events: none;
  animation: big-two-pass-float 2.4s ease-out both;
}

.big-two-reaction-indicator {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 50%;
  overflow: visible !important;
  font-size: 28px !important;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.28));
  animation: big-two-reaction-float 3.2s ease-out both;
}

.big-two-card-backs {
  display: flex;
  height: 30px;
  margin-top: 2px;
  padding-left: 4px;
}

.big-two-card-backs i {
  width: 20px;
  height: 28px;
  margin-right: -9px;
  border: 2px solid #f8fafc;
  border-radius: 4px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.08) 0 2px, transparent 3px) 0 0 / 7px 7px,
    radial-gradient(circle at 75% 75%, rgba(89, 0, 12, 0.13) 0 2px, transparent 3px) 0 0 / 7px 7px,
    linear-gradient(135deg, #d7283f, #a70f28);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.28), inset 0 0 0 1px #cbd5e1;
  transform: rotate(calc((var(--back-index) - 4) * 1.1deg));
  transform-origin: 50% 120%;
}

.big-two-card-backs i.is-dealt {
  animation: big-two-deal 0.4s both;
  animation-delay: calc(var(--deal-order, 0) * 60ms);
}

.big-two-revealed-hand {
  display: flex;
  min-width: 0;
  min-height: 60px;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 7px 3px 3px;
  scrollbar-width: thin;
}

.big-two-revealed-hand .big-two-card {
  flex: 0 0 38px;
  width: 38px;
  height: 56px;
  min-height: 56px;
  margin-right: -13px;
  padding: 3px;
  border-width: 2px;
  border-radius: 7px;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
  animation: game-hand-reveal .34s calc(var(--card-index) * 45ms) both;
}

.big-two-revealed-hand .big-two-card:last-child {
  margin-right: 0;
}

.big-two-revealed-hand .big-two-card.is-revealed-static,
.uno-revealed-hand .uno-card.is-revealed-static {
  animation: none !important;
}

.big-two-revealed-hand .big-two-card-rank,
.big-two-revealed-hand .big-two-card-suit {
  font-size: 10px;
}

.big-two-revealed-hand .big-two-card-corner-bottom {
  display: none;
}

@keyframes game-hand-reveal {
  from { opacity: 0; transform: translateY(12px) rotateY(70deg); }
  to { opacity: 1; transform: translateY(0) rotateY(0); }
}

.uno-revealed-hand {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 7px 3px 3px;
  scrollbar-width: thin;
}

.uno-revealed-hand .uno-card {
  flex: 0 0 40px;
  width: 40px;
  height: 58px;
  min-height: 58px;
  margin-right: -12px;
  padding: 2px;
  border-width: 2px;
  border-radius: 7px;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
  animation: game-hand-reveal .34s calc(var(--card-index) * 45ms) both;
}

.uno-revealed-hand .uno-card:last-child {
  margin-right: 0;
}

.uno-revealed-hand .uno-card > span,
.uno-revealed-hand .uno-card > small {
  font-size: 8px;
}

.uno-revealed-hand .uno-card > b {
  width: 25px;
  height: 36px;
  font-size: 10px;
}

.uno-color-wash {
  position: absolute;
  z-index: 1;
  inset: -12%;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.uno-color-wash.color-R { background: radial-gradient(circle, rgba(239,68,68,.62), rgba(220,38,38,.08) 68%, transparent 78%); }
.uno-color-wash.color-Y { background: radial-gradient(circle, rgba(250,204,21,.58), rgba(234,179,8,.08) 68%, transparent 78%); }
.uno-color-wash.color-G { background: radial-gradient(circle, rgba(74,222,128,.55), rgba(22,163,74,.08) 68%, transparent 78%); }
.uno-color-wash.color-B { background: radial-gradient(circle, rgba(96,165,250,.6), rgba(37,99,235,.08) 68%, transparent 78%); }

.uno-color-wash.is-showing {
  animation: uno-color-wash 1.05s ease-out both;
}

@keyframes uno-color-wash {
  0% { opacity: 0; transform: scale(.55); }
  24% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

.uno-draw-attack {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: 92px;
  place-items: center;
  padding: 8px 12px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 14px;
  background: rgba(15,23,42,.9);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  pointer-events: none;
  animation: uno-draw-attack 1.45s cubic-bezier(.2,.8,.2,1) both;
}

.uno-draw-attack i {
  position: absolute;
  z-index: -1;
  width: 30px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: radial-gradient(ellipse,#dc2626 34%,#111827 36%);
}

.uno-draw-attack i:first-child { transform: translate(-35px,-19px) rotate(-18deg); }
.uno-draw-attack i:nth-child(2) { transform: translate(37px,-16px) rotate(17deg); }
.uno-draw-attack strong { color: #facc15; font-size: 24px; line-height: 1; }
.uno-draw-attack span { color: #fff !important; font-size: 11px !important; }
.uno-draw-attack.is-stacking strong { color: #fb7185; }

.uno-player-reaction {
  position: absolute;
  z-index: 24;
  top: 8px;
  left: 50%;
  overflow: visible !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(0,0,0,.45);
  pointer-events: none;
  transform: translateX(-50%);
  animation: uno-player-reaction-float 3s ease-out both;
}

.uno-shuffle-deck {
  border-color: #facc15 !important;
  background: color-mix(in srgb, #facc15 18%, var(--surface)) !important;
  color: color-mix(in srgb, #facc15 75%, var(--text)) !important;
  box-shadow: 0 0 0 3px rgba(250,204,21,.12);
  animation: uno-shuffle-button-pulse 1.1s ease-in-out infinite alternate;
}

.uno-card.is-underlined-number > span,
.uno-card.is-underlined-number > b,
.uno-card.is-underlined-number > small {
  text-decoration-line: underline;
  text-decoration-thickness: .11em;
  text-underline-offset: .13em;
}

.uno-shuffle-deck:disabled {
  animation: none;
}

.uno-table.is-shuffling .uno-pile.is-deck {
  animation: uno-deck-shuffle .82s cubic-bezier(.2,.8,.2,1) both !important;
}

.uno-table.is-shuffling .uno-pile.is-deck::before {
  animation: uno-deck-shuffle-left .82s ease-in-out both;
}

.uno-table.is-shuffling .uno-pile.is-deck::after {
  animation: uno-deck-shuffle-right .82s ease-in-out both;
}

@keyframes uno-shuffle-button-pulse {
  to { box-shadow: 0 0 0 6px rgba(250,204,21,.2); transform: translateY(-2px); }
}

@keyframes uno-deck-shuffle {
  0%,100% { transform: rotate(-3deg); }
  28% { transform: translateX(-26px) rotate(-13deg); }
  56% { transform: translateX(25px) rotate(11deg); }
  78% { transform: translateX(-8px) rotate(-6deg); }
}

@keyframes uno-deck-shuffle-left {
  35% { transform: translate(-28px,-5px) rotate(-16deg); }
}

@keyframes uno-deck-shuffle-right {
  55% { transform: translate(28px,-4px) rotate(16deg); }
}

@keyframes uno-player-reaction-float {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.7); }
  16%, 68% { opacity: 1; transform: translate(-50%, -5px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1.08); }
}

@keyframes uno-draw-attack {
  0% { opacity: 0; transform: translate(-50%,-130%) scale(.55) rotate(-7deg); }
  24%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%,-75%) scale(.9); }
}

.big-two-host-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.big-two-host-controls[hidden] {
  display: none;
}

.big-two-host-controls label {
  font-weight: 900;
}

.big-two-host-controls select {
  min-height: 38px;
  appearance: none;
  padding: 7px 38px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 11px) 50% / 6px 6px no-repeat,
    var(--control-bg);
  color: var(--text);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.big-two-host-controls select:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.big-two-host-controls select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.big-two-host-controls small {
  color: var(--muted);
}

.big-two-status {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: center;
  font-size: 17px;
  font-weight: 900;
}

.big-two-countdown {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.big-two-countdown.is-urgent {
  color: #dc2626;
}

.big-two-status.is-your-turn {
  background: color-mix(in srgb, var(--good) 14%, var(--surface));
  color: var(--good);
}

.big-two-status.is-finished {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-dark);
}

.big-two-table,
.big-two-hand-area,
.big-two-rules {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.big-two-table,
.big-two-hand-area {
  overflow: hidden;
}

.big-two-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.big-two-subhead span {
  color: var(--muted);
  font-size: 13px;
}

.big-two-audio-controls {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-bottom: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.big-two-audio-controls button {
  min-width: 92px;
  min-height: 36px;
  padding: 6px 10px;
}

.big-two-audio-controls button.is-active {
  border-color: color-mix(in srgb, var(--good) 60%, var(--line));
  background: color-mix(in srgb, var(--good) 18%, var(--surface));
  color: var(--good);
}

.big-two-bgm-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.big-two-bgm-controls strong {
  overflow: hidden;
  color: var(--text);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.big-two-bgm-controls button {
  min-width: 78px;
}

.big-two-audio-controls label {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) 42px;
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.big-two-audio-controls output {
  color: var(--muted);
  text-align: right;
  font-size: 11px;
}

.big-two-audio-controls input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(
    to right,
    var(--accent) 0,
    var(--accent) var(--volume-percent, 10%),
    color-mix(in srgb, var(--line) 70%, transparent) var(--volume-percent, 10%),
    color-mix(in srgb, var(--line) 70%, transparent) 100%
  );
}

.big-two-audio-controls input[type="range"]::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  appearance: none;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.28);
  cursor: pointer;
}

.big-two-audio-controls input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.28);
  cursor: pointer;
}

.big-two-table-stage {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 330px);
  gap: 14px;
  align-items: center;
  min-height: 164px;
  padding: 8px;
  border: 1px dashed transparent;
  border-radius: 11px;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.big-two-table-stage.is-drop-play {
  border-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}

.big-two-table-cards {
  position: relative;
  min-height: 148px;
  overflow: hidden;
}

.big-two-table-cards:empty::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  content: "目前桌面沒有牌";
}

.big-two-table-cards .big-two-card.is-pile-card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--pile-index, 1);
  transform: translate(calc(-50% + var(--pile-x, 0px)), calc(-50% + var(--pile-y, 0px))) rotate(var(--pile-angle, 0deg)) scale(1);
  pointer-events: none;
}

.big-two-table-cards .big-two-card.is-pile-added {
  animation: big-two-pile-add 0.4s cubic-bezier(0.18, 0.72, 0.25, 1) both;
}

.big-two-last-play {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

#big-two-last-play-cards {
  display: flex;
  gap: 5px;
  min-height: 80px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

#big-two-last-play-cards .big-two-card {
  flex-basis: 52px;
  width: 52px;
  min-width: 52px;
  height: 76px;
  min-height: 76px;
}

.big-two-hand {
  display: flex;
  min-height: 118px;
  gap: 6px;
  align-items: end;
  padding: 18px 4px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-color: color-mix(in srgb, var(--accent) 68%, #64748b) transparent;
  scrollbar-width: thin;
}

.big-two-hand::-webkit-scrollbar {
  height: 7px;
}

.big-two-hand::-webkit-scrollbar-track {
  border-radius: 999px;
  background: transparent;
}

.big-two-hand::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, #64748b), var(--accent));
}

.big-two-hand::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

#big-two-last-play-cards::-webkit-scrollbar {
  height: 6px;
}

#big-two-last-play-cards::-webkit-scrollbar-track {
  background: transparent;
}

#big-two-last-play-cards::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 75%, var(--muted));
}

.big-two-card {
  position: relative;
  display: grid;
  flex: 0 0 62px;
  width: 62px;
  min-width: 62px;
  height: 92px;
  min-height: 92px;
  place-items: center;
  padding: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 5px 13px rgba(15, 23, 42, 0.16);
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.big-two-hand .big-two-card.is-dealt {
  animation: big-two-deal 0.38s ease-out both;
  animation-delay: calc(var(--card-index, 0) * 70ms);
}

.big-two-last-play .big-two-card.is-played {
  animation: big-two-play 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--card-index, 0) * 38ms);
}

.big-two-hand .big-two-card.is-playing-out {
  pointer-events: none;
  animation: big-two-card-out 0.28s cubic-bezier(0.4, 0, 1, 1) both;
  animation-delay: calc(var(--play-index, 0) * 35ms);
}

.big-two-card.is-organizable {
  cursor: grab;
}

.big-two-card.is-dragging {
  z-index: 2;
  opacity: 0.42;
  cursor: grabbing;
  transform: translateY(-8px) scale(0.96);
}

.big-two-drag-ghost {
  position: fixed;
  z-index: 10020;
  top: var(--ghost-y, -200px);
  left: var(--ghost-x, -200px);
  width: 62px;
  min-width: 62px;
  height: 92px;
  min-height: 92px;
  pointer-events: none;
  opacity: 0.68;
  transform: translate(-50%, -58%) rotate(2deg);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.3);
}

.big-two-drag-ghost.is-native {
  top: -200px;
  left: -200px;
  transform: none;
}

.big-two-card.is-drop-before {
  box-shadow: -5px 0 0 #f59e0b, 0 5px 13px rgba(15, 23, 42, 0.16);
}

.big-two-card.is-drop-after {
  box-shadow: 5px 0 0 #f59e0b, 0 5px 13px rgba(15, 23, 42, 0.16);
}

.big-two-card.is-red {
  color: #dc2626;
}

.big-two-card.is-selected {
  border-color: var(--accent);
  transform: translateY(-14px);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.22);
}

.big-two-card:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #111827;
  transform: translateY(-5px);
}

.big-two-card.is-red:hover {
  color: #dc2626;
}

.big-two-card.is-selected:hover {
  border-color: var(--accent);
  transform: translateY(-14px);
}

.big-two-card:disabled {
  opacity: 1;
}

.big-two-card-rank {
  position: absolute;
  top: 6px;
  left: 7px;
  font-size: 15px;
}

.big-two-card-suit {
  font-size: 28px;
}

.big-two-card-corner-bottom {
  position: absolute;
  right: 7px;
  bottom: 6px;
  display: grid;
  gap: 1px;
  place-items: center;
  font-size: 13px;
  line-height: 0.85;
  transform: rotate(180deg);
}

.big-two-card-corner-bottom span:last-child {
  font-size: 11px;
}

.big-two-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
}

.big-two-actions button {
  min-width: 110px;
}

.big-two-reactions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.big-two-reactions button {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 21px;
  box-shadow: none;
}

.big-two-reactions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: var(--surface-soft);
  transform: none;
}

.casino-layout {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  overflow-anchor: none;
}

.casino-player-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.casino-player-grid.is-holdem {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.casino-host-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.casino-host-controls[hidden] {
  display: none;
}

.casino-host-controls small {
  color: var(--muted);
}

.casino-toolbar-actions {
  align-items: center;
  max-width: 560px;
}

.casino-volume {
  display: grid;
  grid-template-columns: auto 90px 38px;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.casino-volume input {
  width: 90px;
  accent-color: var(--accent);
}

.casino-volume output {
  color: var(--text);
  text-align: right;
}

.casino-bgm-controls {
  display: grid;
  flex: 1 1 100%;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.casino-bgm-controls strong {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.casino-bgm-controls button {
  min-width: 74px;
}

.casino-player {
  display: grid;
  grid-template-rows: auto minmax(30px, auto) 42px auto;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.casino-player.is-current {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 14%, transparent);
}

.casino-player.is-folded {
  opacity: 0.55;
}

.casino-player > span {
  color: var(--muted);
  font-size: 12px;
}

.casino-player-actions {
  display: flex;
  flex-wrap: wrap;
  min-height: 28px;
  gap: 5px;
}

.casino-player-actions button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 11px;
}

.casino-player-actions .danger {
  color: var(--bad);
}

.casino-status {
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--surface-soft);
  text-align: center;
  font-size: 17px;
  font-weight: 900;
}

.casino-table {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  overflow: hidden;
}

.holdem-felt {
  min-height: 178px;
  background: color-mix(in srgb, #166534 23%, var(--surface));
}

.holdem-pot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.casino-card-row {
  display: flex;
  min-height: 100px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
}

.casino-card-row.is-community {
  min-height: 112px;
}

#blackjack-dealer-cards,
#holdem-community {
  flex-wrap: wrap;
  overflow: hidden;
  padding: 8px 2px;
}

#holdem-community {
  flex-wrap: nowrap;
}

#holdem-community .big-two-card {
  flex: 0 1 62px;
  width: 62px;
  min-width: 42px;
}

.casino-card-row .big-two-card.is-dealt {
  animation: big-two-deal 0.4s ease-out both;
  animation-delay: calc(var(--card-index, 0) * 90ms);
}

.casino-card:hover {
  transform: none;
}

.casino-card.is-card-empty {
  border: 2px dashed color-mix(in srgb, #ffffff 58%, var(--line));
  background: color-mix(in srgb, #ffffff 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
  opacity: 0.62;
}

.casino-card.is-card-back {
  position: relative;
  overflow: hidden;
  border: 4px solid #f8fafc;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.08) 0 2px, transparent 3px) 0 0 / 10px 10px,
    radial-gradient(circle at 75% 75%, rgba(89,0,12,0.13) 0 2px, transparent 3px) 0 0 / 10px 10px,
    linear-gradient(135deg, #d7283f, #a70f28);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.28), inset 0 0 0 1px #cbd5e1;
}

.casino-card.is-card-back::before,
.casino-card.is-card-back::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.casino-card.is-card-back::before {
  inset: 5px;
  border: 2px solid rgba(255, 231, 231, 0.9);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(116, 7, 25, 0.55);
}

.casino-card.is-card-back::after {
  inset: 10px;
  border: 1px solid rgba(255, 210, 215, 0.7);
  border-radius: 2px;
}

#holdem-community .casino-card.is-card-empty {
  position: relative;
  overflow: hidden;
  border: 4px solid #f8fafc;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.08) 0 2px, transparent 3px) 0 0 / 10px 10px,
    radial-gradient(circle at 75% 75%, rgba(89,0,12,0.13) 0 2px, transparent 3px) 0 0 / 10px 10px,
    linear-gradient(135deg, #d7283f, #a70f28);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.28), inset 0 0 0 1px #cbd5e1;
  opacity: 1;
}

#holdem-community .casino-card.is-card-empty::before,
#holdem-community .casino-card.is-card-empty::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#holdem-community .casino-card.is-card-empty::before {
  inset: 5px;
  border: 2px solid rgba(255, 231, 231, 0.9);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(116, 7, 25, 0.55);
}

#holdem-community .casino-card.is-card-empty::after {
  inset: 10px;
  border: 1px solid rgba(255, 210, 215, 0.7);
  border-radius: 2px;
}

.casino-mini-cards {
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  height: 42px;
  min-height: 42px;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.casino-mini-cards .big-two-card {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 40px;
  min-height: 40px;
  padding: 2px;
  border-radius: 4px;
  font-size: 11px;
}

.casino-mini-cards .big-two-card-rank {
  top: 3px;
  left: 3px;
  font-size: 9px;
}

.casino-mini-cards .big-two-card-suit {
  font-size: 14px;
}

.casino-mini-cards .big-two-card-corner-bottom {
  display: none;
}

.blackjack-hands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.blackjack-hand {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s, opacity 0.3s;
}

.blackjack-hand.is-winner {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5), 0 8px 22px rgba(245, 158, 11, 0.28);
  animation: blackjack-winner-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.blackjack-hand.is-loser {
  opacity: 0.58;
}

@keyframes blackjack-winner-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.casino-card.is-revealing {
  animation: casino-card-reveal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes casino-card-reveal {
  0% { transform: rotateY(90deg) scale(0.92); opacity: 0.15; }
  55% { transform: rotateY(-10deg) scale(1.03); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

.blackjack-hand .casino-card-row {
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.casino-audio-controls {
  margin-top: 18px;
}

.casino-actions {
  position: sticky;
  z-index: 8;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 44px;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px);
}

.casino-layout > .login-message {
  min-height: 20px;
  margin: -6px 0 0;
  text-align: center;
}

.uno-room{background:linear-gradient(150deg,color-mix(in srgb,#dc2626 7%,var(--surface)),var(--surface) 44%,color-mix(in srgb,#2563eb 6%,var(--surface)))}.uno-player-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.uno-player{display:grid;gap:5px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft);transition:.2s}.uno-player.is-current{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.16)}.uno-player>span{color:var(--muted);font-size:12px}.uno-player button{min-height:28px;padding:4px}.uno-card-backs{display:flex;height:34px}.uno-card-backs i{width:22px;margin-right:-10px;border:2px solid white;border-radius:5px;background:repeating-linear-gradient(135deg,#dc2626 0 5px,#111827 5px 10px);box-shadow:0 2px 4px rgba(0,0,0,.22)}.uno-table{position:relative;display:flex;min-height:260px;align-items:center;justify-content:center;gap:34px;overflow:hidden;border:3px solid #14532d;border-radius:50% / 28%;background:radial-gradient(ellipse,#237a48,#0d4a2b 58%,#07351d);box-shadow:inset 0 0 48px rgba(0,0,0,.3),0 15px 32px rgba(2,44,20,.2)}.uno-direction{position:absolute;top:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:42px;font-weight:1000}.uno-pile{position:relative;display:grid;width:94px;height:140px;place-items:center;border:5px solid white;border-radius:13px;background:#111827;color:white;box-shadow:0 8px 20px rgba(0,0,0,.3);transform:rotate(3deg)}button.uno-pile{cursor:pointer}.uno-pile.is-deck{background:radial-gradient(ellipse,#dc2626 35%,#111827 37%);font-size:24px;font-weight:1000;transform:rotate(-3deg)}.uno-pile small{position:absolute;right:5px;bottom:4px}.uno-current-color{position:absolute;right:22px;bottom:20px;padding:7px 13px;border:2px solid white;border-radius:999px;color:white;font-weight:900}.uno-actions{position:sticky;z-index:8;bottom:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px)}.uno-call{background:linear-gradient(135deg,#ef4444,#eab308,#22c55e,#3b82f6);color:white;font-size:18px;font-weight:1000}.uno-hand-area{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.uno-hand{display:flex;min-height:158px;align-items:flex-end;overflow-x:auto;padding:14px 8px 8px}.uno-card{position:relative;display:grid;flex:0 0 94px;width:94px;height:140px;min-height:140px;margin-right:-22px;place-items:center;padding:5px;border:5px solid white;border-radius:13px;color:white;box-shadow:0 6px 13px rgba(15,23,42,.28);transition:transform .18s,filter .18s}.uno-card:hover:not(:disabled){z-index:5;transform:translateY(-16px) rotate(-2deg)}.uno-card:disabled{filter:grayscale(.72) brightness(.75);cursor:not-allowed}.uno-card>span,.uno-card>small{position:absolute;font-weight:1000}.uno-card>span{top:5px;left:7px}.uno-card>small{right:7px;bottom:5px;transform:rotate(180deg)}.uno-card>b{display:grid;width:58px;height:86px;place-items:center;border-radius:50%;background:white;color:inherit;font-size:25px;transform:rotate(-22deg)}.uno-card.color-R{background:#dc2626;color:#dc2626}.uno-card.color-Y{background:#eab308;color:#a16207}.uno-card.color-G{background:#16a34a;color:#15803d}.uno-card.color-B{background:#2563eb;color:#1d4ed8}.uno-card.color-W{background:conic-gradient(#dc2626 0 25%,#eab308 0 50%,#16a34a 0 75%,#2563eb 0);color:#111827}.uno-card.is-small{position:absolute;width:94px;height:140px;margin:0;pointer-events:none}.uno-card.is-dealt{animation:big-two-deal .4s calc(var(--card-index)*45ms) both}.uno-card.is-played{animation:uno-play-card .42s ease-out both}@keyframes uno-play-card{from{opacity:.3;transform:translate(-90px,55px) rotate(-18deg) scale(.75)}}.color-R{background-color:#dc2626}.color-Y{background-color:#eab308}.color-G{background-color:#16a34a}.color-B{background-color:#2563eb}.uno-color-dialog{padding:0;border:0;border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.35)}.uno-color-dialog::backdrop{background:rgba(2,6,23,.65);backdrop-filter:blur(4px)}.uno-color-dialog form{display:grid;gap:16px;padding:22px;text-align:center}.uno-color-dialog form>div{display:grid;grid-template-columns:repeat(2,110px);gap:10px}.uno-color-dialog form>div button{color:white}.uno-color-dialog .is-red{background:#dc2626}.uno-color-dialog .is-yellow{background:#eab308}.uno-color-dialog .is-green{background:#16a34a}.uno-color-dialog .is-blue{background:#2563eb}
@media(max-width:760px){.uno-player-list{grid-template-columns:repeat(2,minmax(0,1fr))}.uno-table{min-height:220px}.uno-card{flex-basis:78px;width:78px;height:118px;min-height:118px;margin-right:-18px}.uno-card>b{width:48px;height:72px;font-size:20px}}

.uno-room { overflow-x: clip; }
.uno-table { overflow: hidden; }
.uno-current-color { right: 34px; bottom: 36px; max-width: calc(100% - 68px); }
.uno-hand { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
.uno-hand-area { overflow: hidden; }
.uno-card.is-dealt { will-change: transform, opacity; }
#uno-current-color { display: none; }
#uno-volume { background: linear-gradient(90deg,var(--accent) 0 var(--volume-percent,10%),color-mix(in srgb,var(--line) 70%,transparent) var(--volume-percent,10%) 100%); }
.uno-direction { top: 6px; }
.uno-color-dialog[open]{animation:uno-dialog-in .2s ease-out both}.uno-color-dialog.is-closing{animation:uno-dialog-out .18s ease-in both}
.uno-color-dialog[open]::backdrop{animation:uno-backdrop-in .2s ease-out both}
@keyframes uno-dialog-in{from{opacity:0;transform:translateY(12px) scale(.96)}}@keyframes uno-dialog-out{to{opacity:0;transform:translateY(8px) scale(.97)}}@keyframes uno-backdrop-in{from{opacity:0}}
.uno-pile.is-drawing{animation:uno-draw-pile .38s ease}.uno-player.is-receiving .uno-card-backs i:last-child{animation:uno-receive .45s ease-out both}
@keyframes uno-draw-pile{50%{transform:translate(32px,-12px) rotate(8deg) scale(.92)}}@keyframes uno-receive{from{opacity:0;transform:translateY(-55px) rotate(18deg)}}

/* UNO enhanced interactions */
.uno-settings{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;width:100%;padding-top:8px;border-top:1px solid var(--line)}
.uno-settings label{display:flex;align-items:center;gap:6px;color:var(--text);font-size:13px}.uno-settings input[type="number"]{width:66px;padding:6px}.uno-settings select{padding:7px;border:1px solid var(--line);border-radius:8px;background:var(--control-bg);color:var(--text)}
.uno-reactions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px}.uno-reactions>span{color:var(--muted);font-size:13px}.uno-reactions button{min-width:42px;padding:7px;font-size:18px}
.uno-reaction-float{position:absolute;z-index:20;top:24%;left:50%;pointer-events:none;opacity:0;color:#fff;font-size:24px;font-weight:900;text-shadow:0 3px 8px #000;transform:translate(-50%,20px) scale(.7)}.uno-reaction-float.is-showing{animation:uno-reaction 2.2s ease-out both}@keyframes uno-reaction{15%,70%{opacity:1;transform:translate(-50%,0) scale(1)}to{opacity:0;transform:translate(-50%,-55px) scale(1.1)}}
.uno-table.is-drop-target{outline:5px solid rgba(255,255,255,.75);outline-offset:-12px}.uno-table.is-drop-target::after{content:"放開以出牌";position:absolute;z-index:12;padding:10px 16px;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-weight:900}
.uno-pile.can-flip{cursor:pointer;border-style:dashed;animation:uno-ready-pulse 1.15s ease-in-out infinite}.uno-pile.can-flip b{padding:8px;text-align:center;color:#fff}@keyframes uno-ready-pulse{50%{box-shadow:0 0 0 9px rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.3)}}
.uno-card.is-unplayable{opacity:.42}.uno-card.is-received{animation:uno-card-received .5s ease-out both}@keyframes uno-card-received{from{opacity:0;transform:translateY(-90px) scale(.75) rotate(12deg)}}
.uno-player.is-receiving .uno-card-backs i:last-child{animation:uno-opponent-receive .55s ease-out both}@keyframes uno-opponent-receive{from{opacity:0;transform:translateY(-65px) rotate(20deg) scale(.7)}}
.uno-card-backs i{transform:rotate(calc((var(--back-index) - 4) * 1.2deg));transform-origin:50% 120%}.uno-player.is-receiving .uno-card-backs i:nth-last-child(2){animation:uno-opponent-receive .55s .08s ease-out both}
.uno-player.is-receiving .uno-card-backs i:nth-last-child(3){animation:uno-opponent-receive .55s .16s ease-out both}.uno-player.is-receiving .uno-card-backs i:nth-last-child(4){animation:uno-opponent-receive .55s .24s ease-out both}
.uno-player.is-dealing .uno-card-backs i{animation:uno-deal-back .38s calc(var(--deal-order)*110ms) both}@keyframes uno-deal-back{from{opacity:0;transform:translate(120px,80px) rotate(24deg) scale(.65)}}
.uno-pile.is-drawing::after{content:"";position:absolute;inset:0;border:5px solid #fff;border-radius:13px;background:radial-gradient(ellipse,#dc2626 35%,#111827 37%);animation:uno-card-to-player .42s ease-out both}@keyframes uno-card-to-player{to{opacity:0;transform:translate(120px,80px) rotate(20deg) scale(.75)}}
.uno-pile .uno-card.is-played{animation:uno-stack-play .48s cubic-bezier(.2,.8,.2,1) both;transform:rotate(calc((var(--uno-discard-rotation, 0))*1deg))}@keyframes uno-stack-play{from{opacity:.2;transform:translate(-110px,75px) rotate(-24deg) scale(.65)}}
.uno-pile:not(.is-deck)::before,.uno-pile:not(.is-deck)::after{content:"";position:absolute;z-index:0;inset:-5px;border:5px solid #fff;border-radius:13px;background:#263244;box-shadow:0 5px 12px rgba(0,0,0,.2);pointer-events:none}.uno-pile:not(.is-deck)::before{transform:rotate(-7deg)}.uno-pile:not(.is-deck)::after{transform:rotate(6deg)}.uno-pile:not(.is-deck)>.uno-card,.uno-pile:not(.is-deck)>b{z-index:2}
.uno-color-dialog{opacity:0;transform:translateY(12px) scale(.96);transition:opacity .18s ease,transform .18s ease,display .18s allow-discrete,overlay .18s allow-discrete}.uno-color-dialog[open]{opacity:1;transform:none}.uno-color-dialog::backdrop{opacity:0;transition:opacity .18s ease,display .18s allow-discrete,overlay .18s allow-discrete}.uno-color-dialog[open]::backdrop{opacity:1}.uno-color-dialog.is-closing{opacity:0;transform:translateY(10px) scale(.97)}
@starting-style{.uno-color-dialog[open]{opacity:0;transform:translateY(12px) scale(.96)}.uno-color-dialog[open]::backdrop{opacity:0}}
@media(max-width:760px){.uno-settings{align-items:flex-start;flex-direction:column}.uno-reactions{gap:4px}.uno-reactions button{min-width:38px;padding:6px}}


.casino-actions > button {
  min-width: 112px;
}

.holdem-raise {
  display: flex;
  align-items: center;
  gap: 7px;
}

.holdem-raise input {
  width: 94px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text);
}

#sort-big-two-hand.is-active {
  border-color: color-mix(in srgb, var(--good) 60%, var(--line));
  background: color-mix(in srgb, var(--good) 18%, var(--surface));
  color: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 10%, transparent);
}

#auto-pass-big-two.is-active {
  border-color: color-mix(in srgb, #f59e0b 65%, var(--line));
  background: color-mix(in srgb, #f59e0b 17%, var(--surface));
  color: #d97706;
  box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 10%, transparent);
}

#reset-big-two.is-ready {
  border-color: color-mix(in srgb, var(--good) 60%, var(--line));
  background: color-mix(in srgb, var(--good) 18%, var(--surface));
  color: var(--good);
}

#reset-tictactoe.is-ready,
#reset-gomoku.is-ready {
  border-color: color-mix(in srgb, var(--good) 60%, var(--line));
  background: color-mix(in srgb, var(--good) 18%, var(--surface));
  color: var(--good);
}

.big-two-rules summary {
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.big-two-rules p {
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

@keyframes big-two-deal {
  from {
    opacity: 0;
    transform: translateY(34px) rotate(4deg) scale(0.92);
  }
}

@keyframes private-room-created {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@keyframes big-two-game-section-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes gomoku-winning-line-in {
  from {
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  to {
    opacity: 0.88;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes big-two-play {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.9);
  }
}

@keyframes big-two-pile-add {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--pile-start-x, 0px)), calc(-50% + var(--pile-start-y, 0px))) rotate(var(--pile-start-angle, 0deg)) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% + var(--pile-x, 0px)), calc(-50% + var(--pile-y, 0px))) rotate(var(--pile-angle, 0deg)) scale(1);
  }
}

@keyframes big-two-pass-float {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.94);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) scale(1.02);
  }
}

@keyframes big-two-reaction-float {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.72);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.08);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(1);
  }
}

@keyframes big-two-card-out {
  to {
    opacity: 0;
    transform: translateY(-70px);
  }
}

@keyframes big-two-current-pulse {
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.tictactoe-player {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.tictactoe-player-slot {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  background: var(--control-bg);
  font-size: 23px;
  font-weight: 1000;
}

.tictactoe-player-slot.is-x {
  color: #2563eb;
}

.tictactoe-player-slot.is-o {
  color: #e11d48;
}

.tictactoe-player b,
.tictactoe-player span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tictactoe-player span {
  color: var(--muted);
  font-size: 12px;
}

.tictactoe-player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.tictactoe-player-actions:empty {
  display: none;
}

.tictactoe-player-actions button {
  min-height: 27px;
  padding: 4px 7px;
  font-size: 11px;
}

.tictactoe-player-actions .danger {
  border-color: color-mix(in srgb, #dc2626 45%, var(--line));
  color: #dc2626;
}

@media (max-width: 760px) {
  .game-card-grid,
  .private-room-actions,
  .tictactoe-layout {
    grid-template-columns: 1fr;
  }

  .gomoku-layout {
    grid-template-columns: 1fr;
  }

  .game-section-head,
  .tictactoe-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tictactoe-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .casino-toolbar-actions {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .casino-volume,
  .casino-bgm-controls {
    width: 100%;
  }

  .tictactoe-players {
    order: -1;
  }

  .big-two-player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .casino-player-grid,
  .casino-player-grid.is-holdem,
  .blackjack-hands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .big-two-table-stage {
    grid-template-columns: 1fr;
  }

  .big-two-audio-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .big-two-audio-controls label {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .big-two-card {
    flex-basis: 54px;
    width: 54px;
    min-width: 54px;
    height: 82px;
    min-height: 82px;
  }

  .big-two-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .big-two-actions button {
    min-width: 0;
  }

  #reset-big-two {
    grid-column: 1 / -1;
  }

  .game-auth-notice {
    grid-template-columns: 1fr;
  }

  .game-auth-notice > .login-toggle {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .big-two-player.is-current,
  .big-two-countdown.is-urgent,
  .big-two-hand .big-two-card.is-dealt,
  .big-two-last-play .big-two-card.is-played,
  .big-two-hand .big-two-card.is-playing-out,
  .big-two-table-cards .big-two-card.is-pile-added,
  .big-two-pass-indicator,
  .big-two-reaction-indicator,
  .tictactoe-room.is-room-created,
  .gomoku-room.is-room-created,
  .big-two-room.is-room-created,
  .big-two-room.is-game-started .big-two-table,
  .big-two-room.is-game-started .big-two-hand-area {
    animation: none;
  }

  .big-two-card {
    transition: none;
  }
}
/* UNO custom controls and motion */
.uno-pile.is-deck{isolation:isolate}.uno-pile.is-deck>span{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;line-height:1;transform:none!important}.uno-pile.is-deck>small{z-index:3}.uno-hand{gap:10px;align-items:flex-end}.uno-hand .uno-card{margin-right:0}.uno-reaction-float.is-showing{animation:uno-reaction 2.2s ease-out both!important}.uno-player .uno-reaction-float.is-showing{animation:big-two-reaction-float 3.2s ease-out both!important}.uno-player.is-dealing .uno-card-backs i,.uno-player.is-receiving .uno-card-backs i:last-child{animation:big-two-deal .38s ease-out both!important;animation-delay:calc(var(--deal-order,0)*70ms)}.uno-card.is-dealt,.uno-card.is-received{animation:big-two-deal .38s ease-out both!important;animation-delay:calc(var(--card-index,0)*70ms)!important}.uno-pile:not(.is-deck):not(.has-stack)::before,.uno-pile:not(.is-deck):not(.has-stack)::after{display:none!important}.uno-pile:not(.is-deck):empty,.uno-pile.can-flip{color:transparent!important}.uno-pile.can-flip>b{color:#fff}.uno-pile .uno-card.is-small{transform:translate(var(--uno-discard-x,0),var(--uno-discard-y,0)) rotate(calc(var(--uno-discard-rotation,0)*1deg))}.uno-pile .uno-card.is-played{animation:uno-random-play .3s cubic-bezier(.2,.8,.2,1) both!important}@keyframes uno-random-play{from{opacity:0;transform:translate(calc(var(--uno-discard-x,0) - 70px),calc(var(--uno-discard-y,0) + 48px)) rotate(calc((var(--uno-discard-rotation,0) - 14)*1deg)) scale(.78)}to{opacity:1;transform:translate(var(--uno-discard-x,0),var(--uno-discard-y,0)) rotate(calc(var(--uno-discard-rotation,0)*1deg)) scale(1)}}.uno-actions button:hover:not(:disabled),#uno-sort:hover:not(:disabled),#uno-hint-toggle:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.04)}.uno-actions .secondary:hover:not(:disabled),#uno-sort:hover:not(:disabled),#uno-hint-toggle:hover:not(:disabled){background:inherit!important;color:inherit}.uno-reactions button,.uno-reactions button:hover:not(:disabled){border-color:transparent!important;background:transparent!important;color:inherit!important;box-shadow:none!important}
.uno-hand-area .big-two-subhead>b{flex:0 0 auto;white-space:nowrap}.uno-hand-area .big-two-subhead>span{flex:1 1 auto;min-width:90px}
.uno-hand-area .big-two-subhead{align-items:flex-start}.uno-hand-controls{display:grid;flex:0 0 132px;gap:7px}.uno-hand-controls #uno-sort,.uno-hand-controls #uno-hint-toggle{width:100%;min-height:44px;margin:0;flex-basis:auto}.uno-hand-controls+*{min-width:0}
#uno-hint-toggle{flex-basis:100%;margin-left:auto}.uno-pile.is-deck::before,.uno-pile.is-deck::after{z-index:0}.uno-pile.is-deck>span,.uno-pile.is-deck>small{z-index:2}
.casino-status{position:relative;padding-bottom:28px}.casino-status::after{content:attr(data-countdown);position:absolute;right:0;bottom:5px;left:0;height:18px;color:#22c55e;font-size:13px;font-weight:900;line-height:18px;text-align:center}.casino-status.is-urgent::after{color:#ef4444}.uno-countdown{display:none!important}.uno-reaction-float,.uno-reaction-float.is-showing{opacity:1!important;transform:translate(-50%,0)!important;animation:none!important}.uno-pile.is-drawing{animation:none!important}.uno-pile.is-drawing::after{animation:uno-card-down .42s ease-out both!important}.uno-pile:not(.is-deck)::before,.uno-pile:not(.is-deck)::after{display:none}.uno-pile:not(.is-deck).has-stack::before,.uno-pile:not(.is-deck).has-stack::after{display:block}.uno-pile.is-deck::before,.uno-pile.is-deck::after{content:"";position:absolute;z-index:-1;inset:-5px;border:5px solid #fff;border-radius:13px;background:radial-gradient(ellipse,#dc2626 35%,#111827 37%);box-shadow:0 5px 12px rgba(0,0,0,.2);pointer-events:none}.uno-pile.is-deck::before{transform:translate(-5px,4px) rotate(-4deg)}.uno-pile.is-deck::after{transform:translate(5px,3px) rotate(4deg)}.uno-card.is-flipped{animation:uno-flip-fade .45s ease-out both!important}@keyframes uno-flip-fade{from{opacity:0;transform:scale(.92) rotateY(35deg)}to{opacity:1}}#uno-sort,#uno-hint-toggle{display:block;width:max-content}#uno-hint-toggle{margin-top:7px}#uno-hint-toggle.is-active{border-color:#16a34a;background:#16a34a;color:#fff}
.uno-player{position:relative}.uno-player .uno-reaction-float{top:2px;left:50%}.uno-pile:not(.is-deck):empty,.uno-pile.can-flip{border-color:transparent;background:transparent;box-shadow:none}.uno-pile:not(.is-deck):empty::before,.uno-pile:not(.is-deck):empty::after,.uno-pile.can-flip::before,.uno-pile.can-flip::after{display:none}.uno-pile.can-flip b{padding:9px 13px;border:2px dashed rgba(255,255,255,.85);border-radius:999px;background:rgba(15,23,42,.38)}.uno-card.is-received{animation:big-two-deal .38s ease-out both;animation-delay:calc(var(--card-index,0)*70ms)}.uno-pile .uno-card.is-played{animation:big-two-play .3s cubic-bezier(.2,.8,.2,1) both}.uno-countdown{display:block;margin-top:5px;color:#22c55e;font-size:13px;font-weight:900}.casino-status.is-urgent .uno-countdown{color:#ef4444;animation:uno-countdown-pulse .65s ease-in-out infinite alternate}@keyframes uno-countdown-pulse{to{opacity:.55}}
.uno-card-backs i{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse,#dc2626 34%,#111827 36%)!important}.uno-card-backs i::after{content:"UNO";color:#fff;font-size:7px;font-style:normal;font-weight:1000;transform:rotate(-18deg);text-shadow:0 1px 2px #000}.uno-hand{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 68%,#64748b) transparent}.uno-hand::-webkit-scrollbar{height:9px}.uno-hand::-webkit-scrollbar-track{border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent)}.uno-hand::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--accent) 70%,#64748b);background-clip:padding-box}.uno-hand::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}.casino-audio-controls button.is-active{border-color:#16a34a!important;background:#16a34a!important;color:#fff!important;box-shadow:0 0 0 3px rgba(22,163,74,.18)}.casino-audio-controls button:not(.is-active){background:var(--surface-soft);color:var(--muted)}.uno-card.is-dragging{z-index:30;opacity:.45}.uno-card.is-drop-before{box-shadow:-7px 0 0 #22c55e,0 6px 13px rgba(15,23,42,.28)}.uno-card.is-drop-after{box-shadow:7px 0 0 #22c55e,0 6px 13px rgba(15,23,42,.28)}
.uno-create-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,#dc2626 7%,var(--surface-soft)),color-mix(in srgb,#2563eb 6%,var(--surface-soft)))}.uno-create-settings label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);font-weight:700}.uno-create-settings input[type=number],.uno-create-settings select{width:92px;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--control-bg);color:var(--text)}.uno-create-settings .uno-switch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 48px;min-height:54px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--control-bg);cursor:pointer}.uno-create-settings .uno-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.uno-create-settings .uno-switch i{position:relative;width:48px;height:28px;border-radius:999px;background:#b8bdc8;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);transition:background .2s}.uno-create-settings .uno-switch i::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.3);transition:transform .2s cubic-bezier(.22,.8,.2,1)}.uno-create-settings .uno-switch input:checked~i{background:#34c759}.uno-create-settings .uno-switch input:checked~i::after{transform:translateX(20px)}.uno-create-settings .uno-switch input:focus-visible~i{box-shadow:0 0 0 3px color-mix(in srgb,#34c759 30%,transparent)}.uno-actions button:hover:not(:disabled),.uno-reactions button:hover:not(:disabled),#uno-sort:hover:not(:disabled){transform:translateY(-3px)}#uno-sort.is-active{border-color:#16a34a;background:#16a34a;color:#fff}.uno-reactions button{border-color:transparent!important;background:transparent!important;box-shadow:none!important}.uno-reaction-float{top:8%}.uno-pile.can-flip{animation:uno-ready-pulse 1.15s ease-in-out infinite,uno-flip-ready .7s ease-out both}@keyframes uno-flip-ready{from{transform:rotateY(90deg) scale(.85)}}.uno-pile.is-drawing::after{animation:uno-card-down .42s ease-out both}@keyframes uno-card-down{to{opacity:0;transform:translateY(125px) rotate(8deg) scale(.78)}}
@media(max-width:760px){.uno-create-settings{grid-template-columns:1fr}}
/* UNO final authoritative presentation */
.uno-pile.is-deck>span{padding:0!important}
.uno-player .uno-reaction-float.is-showing{opacity:1!important;animation:uno-reaction-visible 2.8s ease-out both!important}@keyframes uno-reaction-visible{0%{top:18px}18%,72%{top:-8px}100%{top:-38px}}.uno-pile.is-deck>span{box-sizing:border-box;padding:0 10px 18px!important}.uno-pile.is-deck>small{right:8px!important;bottom:7px!important}.uno-card.color-R>span,.uno-card.color-R>small{color:#fff!important}
.uno-pile.is-deck>span{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;color:#fff!important;line-height:1!important;text-align:center!important;transform:none!important}.uno-card>span,.uno-card>small{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.45)}.uno-card>b{color:inherit}.uno-hand{gap:12px!important}.uno-hand>.uno-card{margin-right:0!important}.uno-reaction-float{opacity:0!important;transform:translate(-50%,8px) scale(.72)!important}.uno-player .uno-reaction-float.is-showing{animation:big-two-reaction-float 3.2s ease-out both!important}.uno-pile:not(.is-deck):empty{visibility:hidden!important}.uno-pile.can-flip{visibility:visible!important;border:0!important;background:transparent!important;box-shadow:none!important}.uno-pile.can-flip::before,.uno-pile.can-flip::after{display:none!important}.uno-call:hover:not(:disabled){background:linear-gradient(135deg,#ef4444,#eab308,#22c55e,#3b82f6)!important;color:#fff!important;transform:translateY(-3px)!important;box-shadow:inherit!important}.uno-reactions button:hover:not(:disabled){background:transparent!important;color:inherit!important;transform:translateY(-3px)!important}.uno-player.is-dealing .uno-card-backs i,.uno-player.is-receiving .uno-card-backs i{animation:big-two-deal .38s ease-out both!important}.uno-card.is-dealt,.uno-card.is-received{animation:big-two-deal .38s ease-out both!important}.uno-pile .uno-card.is-played{animation:uno-random-play .3s cubic-bezier(.2,.8,.2,1) both!important}

/* ===== 你畫我猜 Draw & Guess ===== */
.draw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.draw-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.draw-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.draw-timer {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}
.draw-timer.is-low {
  color: var(--bad);
}
.draw-word-bar {
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.08em;
}
.draw-word-bar.is-reveal {
  background: color-mix(in srgb, var(--good) 14%, var(--surface));
  color: var(--good);
}
.draw-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--accent);
}
.draw-choices button {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.draw-choices button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.draw-canvas-wrap {
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #ffffff;
}
#draw-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  touch-action: none;
}
#draw-canvas.is-drawing {
  cursor: crosshair;
}
#draw-canvas.is-drawing.is-fill {
  cursor: cell;
}
.draw-tools {
  display: grid;
  grid-template-columns: auto repeat(5, max-content);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.draw-colors,
.draw-widths {
  display: flex;
  gap: 6px;
}
.draw-colors {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
  gap: clamp(8px, 1.5vw, 14px);
  padding: 2px 0 5px;
}
.draw-widths {
  flex: 0 0 auto;
}
.draw-color {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  aspect-ratio: 1 / 1;
  flex: 0 0 30px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--swatch);
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.draw-color.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.draw-color:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  background: var(--swatch);
  color: inherit;
  box-shadow: none;
}
.draw-color.is-active:hover {
  border-color: var(--accent);
  background: var(--swatch);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.draw-width {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.draw-width.is-active {
  border-color: var(--accent);
}
.draw-width i {
  display: block;
  border-radius: 50%;
  background: var(--text);
}
.draw-tools .secondary.is-active {
  border-color: var(--accent);
  color: var(--accent);
}
.draw-tool-icon {
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
}
.draw-tool-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 760px) {
  .draw-tools {
    align-items: flex-start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .draw-colors {
    grid-column: 1 / -1;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .draw-widths {
    grid-column: 1 / -1;
  }

  .draw-tools > button {
    width: 100%;
  }
}
.draw-guess-form {
  display: flex;
  gap: 8px;
}
.draw-guess-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--control-bg);
  color: var(--text);
  font-size: 1rem;
}
.draw-guess-form input:disabled {
  opacity: 0.6;
}
.draw-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.draw-player-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.draw-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.draw-player.is-drawer {
  border-color: var(--accent);
}
.draw-player.is-correct {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, var(--surface));
}
.draw-player b {
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw-player span {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.draw-guess-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}
.draw-guess-item {
  display: flex;
  gap: 6px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.draw-guess-item b {
  flex-shrink: 0;
}
.draw-guess-item span {
  word-break: break-all;
}
.draw-guess-item.is-correct span {
  color: var(--good);
  font-weight: 700;
}
.draw-guess-item.is-near span {
  color: var(--warning);
}
.draw-create-panel .draw-create-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.draw-create-settings label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
}
.draw-create-settings input,
.draw-create-settings select {
  width: 110px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--control-bg);
  color: var(--text);
}
.draw-actions {
  display: flex;
  gap: 10px;
}
@media (max-width: 860px) {
  .draw-layout {
    grid-template-columns: 1fr;
  }
  .draw-guess-feed {
    max-height: 200px;
  }
}
.spectate-lobby{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.spectate-lobby>p{color:var(--muted);margin:0 0 14px}
.spectate-room-list{display:grid;gap:10px}
.spectate-room-list article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}
.spectate-room-list article div{display:grid;gap:4px;min-width:0}.spectate-room-list article span{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.player-spectate-dialog{width:min(920px,calc(100vw - 24px));max-height:90vh;padding:0;border:0;border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 25px 80px #0f172a66}
.player-spectate-dialog::backdrop{background:#0f172a99;backdrop-filter:blur(4px)}
.player-spectate-shell{padding:20px}.player-spectate-grid{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);gap:14px}
.player-spectate-grid>section{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);min-width:0}.player-spectate-grid h3{margin:0 0 10px}
.spectate-stage{min-height:300px;max-height:58vh;overflow:auto;border-radius:12px;background:color-mix(in srgb,var(--surface) 82%,#0f172a 18%);padding:14px}
.player-spectate-player{display:grid;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}.player-spectate-player:last-child{border-bottom:0}.player-spectate-player small{color:var(--muted);overflow-wrap:anywhere}
.spectate-player-head{display:grid;gap:3px}.spectate-hand{display:flex;align-items:flex-end;min-height:76px;overflow-x:auto;padding:4px 2px 8px}.spectate-hand.is-compact{min-height:52px}.spectate-hand .spectate-card{margin-right:-14px}.spectate-hand .spectate-card:last-child{margin-right:0}
.spectate-card{display:grid;place-items:center;flex:0 0 46px;width:46px;height:66px;border:2px solid #e2e8f0;border-radius:7px;background:#fff;color:#111827;box-shadow:0 3px 8px #0f172a38;font-style:normal;font-weight:900}.spectate-card b{font-size:14px}.spectate-card i{font-size:20px;font-style:normal}.spectate-card.is-red{color:#dc2626}.spectate-card.is-back{border-color:#fff;background:repeating-linear-gradient(45deg,#9f1239 0 6px,#be123c 6px 12px);color:#fff}.spectate-card.is-uno{border-width:3px;border-color:#f8fafc;border-radius:9px;color:#fff;text-shadow:0 1px 2px #0008}.spectate-card.color-R{background:#dc2626}.spectate-card.color-Y{background:#eab308}.spectate-card.color-G{background:#16a34a}.spectate-card.color-B{background:#2563eb}.spectate-card.color-W{background:conic-gradient(#dc2626,#eab308,#16a34a,#2563eb,#dc2626)}.spectate-empty{align-self:center;color:var(--muted)}
.spectate-card-table{display:grid;place-items:center;min-height:330px;border-radius:18px;background:radial-gradient(circle at center,#16824b,#075d39 70%,#06452d);box-shadow:inset 0 0 0 8px #7c4a25,inset 0 0 0 11px #b8793f}.spectate-table-center{display:grid;justify-items:center;gap:12px;max-width:90%;padding:20px;color:#fff;text-align:center}.spectate-table-center>.spectate-hand{justify-content:center;max-width:100%}
.spectate-board{display:grid;grid-template-columns:repeat(var(--board-size),1fr);width:min(100%,520px);aspect-ratio:1;margin:auto}.spectate-board-cell{display:grid;place-items:center;aspect-ratio:1;font-weight:900}.spectate-board.is-tictactoe{gap:7px;max-width:360px}.spectate-board.is-tictactoe .spectate-board-cell{border-radius:12px;background:var(--surface);font-size:clamp(2rem,8vw,4rem);box-shadow:0 4px 12px #0f172a24}.spectate-board-cell.is-x{color:#2563eb}.spectate-board-cell.is-o{color:#ef4444}.spectate-board-cell.is-last{box-shadow:inset 0 0 0 3px #f59e0b}.spectate-board.is-gomoku{padding:16px;border:8px solid #9a5b2a;border-radius:8px;background:#d9a85f}.spectate-board.is-gomoku .spectate-board-cell{position:relative;border-right:1px solid #754414;border-bottom:1px solid #754414;color:transparent}.spectate-board.is-gomoku .spectate-board-cell.is-x::after,.spectate-board.is-gomoku .spectate-board-cell.is-o::after{content:"";width:74%;height:74%;border-radius:50%;background:#111827;box-shadow:inset -2px -2px 5px #000,0 2px 4px #0005}.spectate-board.is-gomoku .spectate-board-cell.is-o::after{background:#f8fafc;box-shadow:inset -2px -2px 5px #94a3b8,0 2px 4px #0004}
.spectate-draw{display:grid;gap:10px}.spectate-draw-caption{font-weight:800}.spectate-draw svg{width:100%;aspect-ratio:5/3;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 8px 20px #0f172a18}
.spectate-boss{display:grid;justify-items:center;gap:13px;padding:30px 12px}.spectate-boss-icon{font-size:72px;filter:drop-shadow(0 10px 12px #0f172a42)}.spectate-hp-bar{width:min(100%,560px);height:24px;overflow:hidden;border:3px solid #fff;border-radius:999px;background:#3f1d2a;box-shadow:0 4px 12px #0f172a40}.spectate-hp-bar i{display:block;height:100%;background:linear-gradient(90deg,#ef4444,#f97316);transition:width .35s ease}
.spectate-kahoot{display:grid;gap:14px}.spectate-kahoot-index{justify-self:start;padding:5px 9px;border-radius:999px;background:#7c3aed;color:#fff;font-weight:800}.spectate-kahoot h4{margin:0;font-size:1.3rem}.spectate-ranking{display:grid;gap:7px;margin:0;padding-left:28px}.spectate-ranking li{padding:9px 12px;border-radius:10px;background:var(--surface)}
.spectate-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.spectate-facts>div{display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.spectate-facts small{color:var(--muted)}
@media(max-width:700px){.player-spectate-grid{grid-template-columns:1fr}.spectate-stage{min-height:240px;max-height:48vh;padding:10px}.spectate-room-list article{align-items:stretch;flex-direction:column}.spectate-room-list article button{width:100%}.spectate-facts{grid-template-columns:1fr}.spectate-card-table{min-height:270px}.spectate-card{flex-basis:40px;width:40px;height:58px}.spectate-hand .spectate-card{margin-right:-12px}}