@font-face{
  font-family:"Orbitron";
  src:url("./fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root {
  --ink: #172027;
  --muted: #65727a;
  --surface: rgba(255,255,255,.72);
  --line: rgba(26,37,44,.13);
  --card-w: 124px;
  --card-h: calc(var(--card-w) * 1.46);
  --hand-step: 70px;
  --card-radius: calc(var(--card-w) * .145);
  --shadow: 0 18px 45px rgba(31,43,50,.17);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(circle at 14% 18%, rgba(226,80,98,.72) 0%, rgba(226,80,98,.26) 22%, rgba(226,80,98,0) 44%),
    radial-gradient(circle at 84% 18%, rgba(61,110,168,.7) 0%, rgba(61,110,168,.24) 22%, rgba(61,110,168,0) 42%),
    radial-gradient(circle at 24% 82%, rgba(118,216,168,.74) 0%, rgba(118,216,168,.26) 22%, rgba(118,216,168,0) 42%),
    radial-gradient(circle at 84% 84%, rgba(237,165,46,.78) 0%, rgba(237,165,46,.28) 24%, rgba(237,165,46,0) 44%),
    radial-gradient(circle at 52% 52%, rgba(56,64,72,.44) 0%, rgba(56,64,72,.14) 22%, rgba(56,64,72,0) 44%),
    linear-gradient(135deg, rgba(255,242,245,.96) 0%, rgba(246,250,255,.94) 24%, rgba(243,255,248,.94) 54%, rgba(255,249,238,.96) 100%);
  background-attachment: fixed;
}
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  color: var(--ink);
  font-family: "Orbitron", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 18%, rgba(226,80,98,.72) 0%, rgba(226,80,98,.26) 22%, rgba(226,80,98,0) 44%),
    radial-gradient(circle at 84% 18%, rgba(61,110,168,.7) 0%, rgba(61,110,168,.24) 22%, rgba(61,110,168,0) 42%),
    radial-gradient(circle at 24% 82%, rgba(118,216,168,.74) 0%, rgba(118,216,168,.26) 22%, rgba(118,216,168,0) 42%),
    radial-gradient(circle at 84% 84%, rgba(237,165,46,.78) 0%, rgba(237,165,46,.28) 24%, rgba(237,165,46,0) 44%),
    radial-gradient(circle at 52% 52%, rgba(56,64,72,.44) 0%, rgba(56,64,72,.14) 22%, rgba(56,64,72,0) 44%),
    linear-gradient(135deg, rgba(255,242,245,.96) 0%, rgba(246,250,255,.94) 24%, rgba(243,255,248,.94) 54%, rgba(255,249,238,.96) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(-24deg, rgba(255,255,255,.12) 0 2px, transparent 2px 20px);
  mix-blend-mode: soft-light;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 16%),
    radial-gradient(circle at 84% 12%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 14%),
    linear-gradient(155deg, rgba(255,255,255,.08), transparent 58%);
  mix-blend-mode: screen;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding: clamp(14px, 3vw, 26px);
}

.app{
  width:min(980px, 100%);
  display:grid;
  gap:clamp(10px, 2.1vw, 18px);
}

.site-footer{
  width:min(980px, 100%);
  align-self:center;
  display:flex;
  justify-content:center;
  padding:2px 0 6px;
}

.site-footer__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
  flex-wrap:wrap;
  padding:4px 2px;
}

.site-footer__link{
  color:#516171;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  opacity:.88;
  display:inline-block;
  padding:0;
  transition:color .18s ease, opacity .18s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible{
  color:#1f3f63;
  opacity:1;
}

.page-header{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(128, 146, 164, .75);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.28) 24%, transparent 26%),
    linear-gradient(145deg, rgba(251,253,255,.96) 0%, rgba(232,238,244,.94) 46%, rgba(212,221,231,.92) 100%);
  box-shadow:0 18px 48px rgba(52,74,101,.22), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(120,138,156,.32);
  padding:14px 18px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 16px;
  overflow:hidden;
}
.page-header::after{
  display:none;
}
.page-header-copy{
  position:relative;
  z-index:1;
  min-width:0;
  display:grid;
  gap:2px;
}

.eyebrow{
  color:#566779;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.page-header h1{
  margin:0;
  font-size:clamp(1.4rem, 4vw, 2.15rem);
  line-height:.96;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#182534;
}
.header-counter{
  position:relative;
  z-index:1;
  grid-column:2 / 3;
  grid-row:1;
  justify-self:end;
  align-self:start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(154,180,205,.34);
  background:linear-gradient(145deg, rgba(255,255,255,.56), rgba(213,225,237,.48));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
  color:rgba(86,103,121,.66);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.header-counter strong{
  color:#314456;
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.02em;
}

.lobby-panels{
  display:grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
}

.accordion-dock{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:center;
  gap:10px;
  padding:2px 2px 0;
}

.dock-orb{
  width:100%;
  aspect-ratio:1;
  max-width:64px;
  justify-self:center;
  border-radius:50%;
  border:1px solid rgba(126,144,161,.72);
  display:grid;
  place-items:center;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.04em;
  color:#223345;
  text-transform:uppercase;
  box-shadow:0 14px 28px rgba(52,74,101,.18), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(120,138,156,.22);
  backdrop-filter:blur(14px);
}
.dock-orb:disabled{
  opacity:.58;
  filter:saturate(.74);
  box-shadow:0 10px 18px rgba(52,74,101,.12), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(120,138,156,.16);
}

.dock-orb--rules{
  background:linear-gradient(145deg, rgba(249,252,255,.95), rgba(222,231,239,.92) 48%, rgba(197,210,221,.9));
}

.dock-orb--create{
  background:linear-gradient(145deg, rgba(245,252,255,.96), rgba(220,236,245,.94) 44%, rgba(188,211,225,.9) 100%);
}

.dock-orb--join{
  background:linear-gradient(145deg, rgba(248,246,255,.96), rgba(230,224,248,.94) 44%, rgba(201,193,233,.9) 100%);
}

.dock-orb--room{
  background:linear-gradient(145deg, rgba(247,251,253,.96), rgba(223,230,237,.94) 44%, rgba(193,204,215,.9) 100%);
}

.dock-orb--stats{
  background:linear-gradient(145deg, rgba(245,250,255,.96), rgba(223,233,247,.94) 44%, rgba(196,208,228,.9) 100%);
}

.dock-orb--special{
  background:linear-gradient(145deg, rgba(251,247,255,.96), rgba(235,228,247,.94) 44%, rgba(213,202,234,.9) 100%);
}
.dock-orb--start{
  background:linear-gradient(145deg, rgba(232,250,255,.98), rgba(58,198,227,.9) 45%, rgba(8,120,143,.92));
  color:#f3fcff;
  border-color:rgba(8,120,143,.46);
  box-shadow:0 16px 32px rgba(8,120,143,.26), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(7,94,111,.24);
}

.modal-shell{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:16px;
  overflow-y:auto;
  overflow-x:visible;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,29,36,.5);
  backdrop-filter:blur(12px);
}

.modal-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:min(78vh, 720px);
  overflow:auto;
  padding:16px 16px 14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.34) 18%, transparent 20%),
    linear-gradient(145deg, rgba(251,253,255,.97) 0%, rgba(232,238,244,.95) 46%, rgba(212,221,231,.94) 100%);
  box-shadow:0 26px 70px rgba(26,37,44,.28);
}

.modal-card--special{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(248,252,255,.97) 0%, rgba(231,238,244,.94) 48%, rgba(212,221,231,.92) 100%);
}

.modal-card--special-boost{
  background:
    radial-gradient(circle at 18% 16%, rgba(226,80,98,.24), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(226,80,98,.18), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(255,244,247,.98) 0%, rgba(246,228,234,.95) 48%, rgba(233,209,217,.92) 100%);
}

.modal-card--special-block{
  background:
    radial-gradient(circle at 18% 16%, rgba(61,110,168,.26), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(61,110,168,.18), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(243,248,255,.98) 0%, rgba(224,234,246,.95) 48%, rgba(209,220,236,.92) 100%);
}

.modal-card--special-reverse{
  background:
    radial-gradient(circle at 18% 16%, rgba(118,216,168,.28), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(41,149,101,.14), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(244,255,249,.98) 0%, rgba(226,244,235,.95) 48%, rgba(210,232,221,.92) 100%);
}

.modal-card--special-draw2{
  background:
    radial-gradient(circle at 18% 16%, rgba(237,165,46,.28), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(186,107,8,.16), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(255,249,239,.98) 0%, rgba(247,235,212,.95) 48%, rgba(234,219,190,.92) 100%);
}

.modal-card--special-core{
  background:
    radial-gradient(circle at 18% 16%, rgba(226,80,98,.18), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(61,110,168,.18), transparent 20%),
    radial-gradient(circle at 24% 84%, rgba(118,216,168,.18), transparent 20%),
    radial-gradient(circle at 82% 84%, rgba(237,165,46,.2), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(248,251,255,.98) 0%, rgba(233,237,247,.95) 48%, rgba(219,224,236,.92) 100%);
}

.modal-card--special-lock{
  background:
    radial-gradient(circle at 18% 16%, rgba(226,80,98,.22), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(137,53,73,.14), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(255,245,248,.98) 0%, rgba(244,230,235,.95) 48%, rgba(230,214,220,.92) 100%);
}

.modal-card--special-all{
  background:
    radial-gradient(circle at 18% 16%, rgba(61,110,168,.24), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(61,110,168,.14), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.26) 18%, transparent 20%),
    linear-gradient(145deg, rgba(244,249,255,.98) 0%, rgba(228,236,246,.95) 48%, rgba(213,223,237,.92) 100%);
}

.modal-card--special-tornado{
  background:
    radial-gradient(circle at 18% 16%, rgba(223,79,148,.18), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(61,110,168,.18), transparent 20%),
    radial-gradient(circle at 24% 84%, rgba(118,216,168,.18), transparent 20%),
    radial-gradient(circle at 82% 84%, rgba(237,165,46,.2), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.24) 18%, transparent 20%),
    linear-gradient(145deg, rgba(248,249,252,.98) 0%, rgba(228,233,240,.95) 48%, rgba(210,217,225,.92) 100%);
}

.modal-card h2{
  margin:0 28px 10px 0;
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#203245;
}

.modal-card--color{
  width:min(620px, calc(100vw - 20px));
  padding:14px 14px 12px;
  border-radius:22px;
  background:
    radial-gradient(circle at 14% 12%, rgba(226,80,98,.12), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(61,110,168,.12), transparent 24%),
    radial-gradient(circle at 24% 88%, rgba(118,216,168,.12), transparent 24%),
    radial-gradient(circle at 82% 86%, rgba(237,165,46,.14), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.34) 18%, transparent 20%),
    linear-gradient(145deg, rgba(251,253,255,.98) 0%, rgba(232,238,244,.96) 46%, rgba(212,221,231,.94) 100%);
}
.color-modal-head{
  display:grid;
  gap:2px;
  margin:0 34px 12px 0;
}
.color-modal-head h2{
  margin:0;
}
.color-modal-head p{
  display:none;
}
.modal-card--result{
  width:min(520px, calc(100vw - 24px));
  margin:auto;
  justify-self:center;
  max-width:calc(100vw - 24px);
  max-height:none;
  overflow:visible;
}
.result-hero{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:0;
  width:100%;
}
.result-badge{
  min-height:auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(147,163,181,.28);
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(233,239,244,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px rgba(52,74,101,.1);
  color:#203245;
  font-size:.82rem;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  position:relative;
  z-index:2;
}
.result-card-box{
  display:grid;
  justify-items:center;
  align-content:start;
  gap:6px;
  margin-top:10px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:visible;
  padding:0 0 4px;
}
.result-winning-card-shell{
  display:grid;
  justify-items:center;
  gap:8px;
  margin-top:10px;
  width:100%;
}
.result-winning-card-label{
  color:#5b6b79;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
}
.result-winning-card{
  width:clamp(112px, 22vw, 152px);
  aspect-ratio:.72 / 1;
  margin:0 auto;
}
.result-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
  width:100%;
  min-width:0;
}
.result-confetti{
  position:relative;
  justify-self:center;
  width:min(100%, 420px);
  height:112px;
  overflow:visible;
  pointer-events:none;
  max-width:100%;
}
.result-confetti-card{
  position:absolute;
  left:var(--start-x);
  bottom:-10px;
  width:var(--size);
  height:calc(var(--size) * 1.46);
  border-radius:calc(var(--size) * .18);
  transform:translate3d(0, 0, 0) rotate(var(--rotate)) scale(.96);
  transform-origin:50% 100%;
  animation:result-card-float var(--duration) linear infinite;
  animation-delay:var(--delay);
  opacity:0;
  will-change:transform, opacity;
  overflow:visible;
}
.result-confetti-card__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(31,43,50,.16));
}
.result-name-stage{
  position:relative;
  justify-self:center;
  width:100%;
  max-width:100%;
  min-height:114px;
  padding:8px 10px 6px;
  pointer-events:none;
  box-sizing:border-box;
  overflow:visible;
  z-index:1;
}
.result-name-card__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.result-name-stage__rail{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  min-height:92px;
  overflow:visible;
}
.result-name-stage__cards{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:3px;
  width:100%;
  max-width:100%;
  overflow:visible;
}
.result-name-card{
  position:relative;
  display:block;
  flex:0 1 min(54px, calc((100% - 21px) / 8));
  width:min(54px, calc((100% - 21px) / 8));
  aspect-ratio:.68 / 1;
  opacity:0;
  transform:translate3d(0, 8px, 0) scale(.94);
  animation:result-name-deal .52s ease-out both;
  animation-delay:var(--deal-delay, 0s);
  will-change:transform, opacity;
  backface-visibility:hidden;
  contain:none;
  overflow:visible;
}
.result-name-card__hop{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  transform:translate3d(0, 0, 0);
  animation:result-name-hop 2.2s linear infinite;
  animation-delay:var(--hop-delay, 1.92s);
  will-change:transform;
  backface-visibility:hidden;
  overflow:visible;
}
.result-name-card__image{
  transform:translateZ(0);
  filter:none;
}
.result-scoreboard{
  display:grid;
  gap:6px;
  margin-top:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid rgba(147,163,181,.28);
  border-radius:18px;
  padding:10px;
  background:linear-gradient(145deg, rgba(255,255,255,.82), rgba(239,244,248,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.result-scoreboard-head,
.result-score-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
}
.result-scoreboard-head{
  color:#647483;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:0 2px 2px;
}
.result-scoreboard-body{
  display:grid;
  gap:6px;
}
.result-score-row{
  min-height:36px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(147,163,181,.18);
  background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(231,238,244,.7));
}
.result-score-row.is-winner{
  border-color:rgba(22,169,200,.26);
  background:linear-gradient(145deg, rgba(245,253,255,.98), rgba(217,241,247,.86));
}
.result-score-row.is-self{
  box-shadow:inset 0 0 0 1px rgba(120,107,216,.12);
}
.result-score-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#223549;
  font-size:.82rem;
  font-weight:850;
}
.result-score-value{
  min-width:36px;
  text-align:center;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#203245;
  font-size:.78rem;
  font-weight:950;
}
@keyframes result-name-deal{
  0%{
    opacity:0;
    transform:translate3d(0, 10px, 0) scale(.92);
  }
  60%{
    opacity:1;
    transform:translate3d(0, 2px, 0) scale(.985);
  }
  100%{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
  }
}
@keyframes result-name-hop{
  0%, 100%{
    transform:translate3d(0, 0, 0);
  }
  25%{
    transform:translate3d(0, -4px, 0);
  }
  50%{
    transform:translate3d(0, -10px, 0);
  }
  75%{
    transform:translate3d(0, -4px, 0);
  }
}
.color-choice-grid{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 8px;
  margin:0 auto;
  width:100%;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.color-choice-grid::-webkit-scrollbar{
  display:none;
}

.color-choice{
  position:relative;
  flex:0 0 auto;
  min-height:0;
  padding:0;
  display:grid;
  place-items:center;
  overflow:visible;
  border:none;
  color:#f6fbfd;
  text-align:center;
  background:transparent;
  box-shadow:none;
  transition:transform .18s ease, filter .18s ease;
}

.color-choice::before{
  content:none;
}

.color-choice::after{
  content:none;
}

.color-choice:hover,
.color-choice:focus-visible{
  transform:translateY(-3px) scale(1.025);
  filter:saturate(1.08) brightness(1.02);
}

.color-choice-card{
  --card-w: 96px;
  --card-h: calc(var(--card-w) * 1.46);
  --card-radius: calc(var(--card-w) * .145);
  position:relative;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 16px 24px rgba(27,39,54,.18));
}

.color-choice__meta{
  display:none;
}

.color-choice--red,
.color-choice--blue,
.color-choice--green,
.color-choice--gold,
.color-choice--anthracite{
  background:
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(232,238,244,.72)),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
}

.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(147,163,181,.78);
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(214,224,234,.88));
  color:#516577;
  font-size:1.2rem;
  line-height:1;
}

.modal-content{
  display:grid;
  gap:12px;
}

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

.modal-list p{
  margin:0;
  color:#4f6070;
  line-height:1.45;
}

.modal-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.modal-actions--room{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

body.modal-open{
  overflow:hidden;
}

body.in-room #lobbyPanels,
body.in-room #roomShell,
body.game-live #specialRulesAccordion{
  display:none !important;
}

.panel-card,
.seat-pill {
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 8px 19px rgba(46,58,65,.08), inset 0 1px 0 #fff;
  backdrop-filter: blur(16px);
}

.panel-card{
  border-radius: 24px;
  border:1px solid rgba(128, 146, 164, .75);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.28) 24%, transparent 26%),
    linear-gradient(145deg, rgba(251,253,255,.96) 0%, rgba(232,238,244,.94) 46%, rgba(212,221,231,.92) 100%);
  padding: clamp(12px, 1.6vw, 18px);
  box-shadow: 0 18px 48px rgba(52,74,101,.22);
  display:grid;
  gap:10px;
}

.panel-card--hero{
  grid-column: 1 / -1;
  padding: 8px 14px;
  gap: 6px;
}

.panel-card--rules-static{
  padding: 12px 14px 14px;
  gap: 10px;
}

.rules-static-head{
  display:grid;
  gap:4px;
}

.eyebrow--panel{
  display:block;
  margin-bottom:4px;
}

.panel-card--rules-static h2{
  margin:0;
  font-size:1.02rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#203245;
}

.panel-card--hero summary{
  min-height: 26px;
}

.panel-card--setup{
  min-width:0;
}

.panel-card--setup.panel-card--accordion{
  position:relative;
  padding: 10px 12px;
  overflow:hidden;
}

.panel-card--setup.panel-card--accordion::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 28%),
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.34), transparent 22%),
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.22), transparent 18%);
  opacity:.88;
}

.panel-card--setup.panel-card--accordion::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:10px;
  height:22px;
  border-radius:999px;
  pointer-events:none;
  opacity:.7;
  filter:blur(16px);
}

.panel-card--bottom{
  margin-top: -2px;
}

.panel-card--accordion summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:32px;
  font-weight:900;
  color:#203245;
  user-select:none;
  line-height:1.1;
  position:relative;
  z-index:1;
}
.panel-card--accordion summary::-webkit-details-marker{ display:none; }
.panel-card--accordion summary::after{
  content:"+";
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(147,163,181,.78);
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(214,224,234,.88));
  color:#52677c;
  font-size:1.05rem;
}
.panel-card--accordion[open] summary::after{ content:"–"; }
.accordion-content{
  padding-top:8px;
}
.rules-list{
  display:grid;
  gap:6px;
}
.rules-list p{
  margin:0;
  color:#556674;
  line-height:1.45;
  font-size:.92rem;
}

.rules-table{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}

.deck-link-row{
  display:flex;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  padding-top:10px;
}
.deck-link-row p{
  flex:1 1 100%;
}

.rule-accordion{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.76);
  background:linear-gradient(145deg, rgba(255,255,255,.76), rgba(235,241,246,.68));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(52,74,101,.08);
  overflow:hidden;
}

.rule-accordion[open]{
  background:linear-gradient(145deg, rgba(255,255,255,.84), rgba(237,243,248,.74));
}

.rule-accordion__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  min-height:54px;
  user-select:none;
}

.rule-accordion__summary::-webkit-details-marker{
  display:none;
}

.rule-accordion__summary::after{
  content:"+";
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(147,163,181,.74);
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(214,224,234,.88));
  color:#52677c;
  font-size:1.05rem;
  font-weight:900;
}

.rule-accordion[open] .rule-accordion__summary::after{
  content:"–";
}

.rule-accordion__eyebrow{
  display:block;
  min-width:0;
  font-size:.76rem;
  font-weight:1000;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.rule-accordion__eyebrow--ruby{ color:#c94366; }
.rule-accordion__eyebrow--cyan{ color:#3e74bc; }
.rule-accordion__eyebrow--jade{ color:#369f6e; }
.rule-accordion__eyebrow--amber{ color:#bd7d0d; }
.rule-accordion__eyebrow--violet{ color:#705acb; }

.rule-accordion__body{
  padding:0 16px 14px;
}

.rule-accordion__body p{
  margin:0;
  color:#526576;
  line-height:1.55;
  font-size:.94rem;
}

.rule-accordion__body .deck-link-row{
  padding-top:12px;
}

.special-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(112px, 1fr));
  gap:12px;
  margin-top:12px;
}

.special-card-tile{
  border:1px solid rgba(147,163,181,.22);
  border-radius:22px;
  background:linear-gradient(145deg, rgba(255,255,255,.62), rgba(240,245,249,.44));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 10px 22px rgba(52,74,101,.08);
  padding:12px 10px 10px;
  display:grid;
  justify-items:center;
  gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.special-card-tile:hover,
.special-card-tile:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(95,139,178,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94), 0 14px 28px rgba(52,74,101,.12);
}

.special-card-tile .card{
  --card-w: 88px;
  --card-h: calc(var(--card-w) * 1.46);
  --card-radius: calc(var(--card-w) * .145);
  position:relative;
  width:var(--card-w);
  height:var(--card-h);
  filter:drop-shadow(0 14px 22px rgba(31,43,50,.16));
  pointer-events:none;
}

.special-card-tile__label{
  color:#223549;
  display:block;
  width:100%;
  padding:4px 8px 0;
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.08em;
  line-height:1.15;
  text-transform:uppercase;
  text-align:center;
  text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.62);
}

.special-card-modal{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  align-items:start;
}

.special-card-modal__preview{
  display:grid;
  justify-items:center;
}

.special-card-modal__preview .card{
  --card-w: 116px;
  --card-h: calc(var(--card-w) * 1.46);
  --card-radius: calc(var(--card-w) * .145);
  width:var(--card-w);
  height:var(--card-h);
  pointer-events:none;
  filter:drop-shadow(0 18px 28px rgba(31,43,50,.18));
}

.special-card-modal__copy{
  display:grid;
  gap:8px;
  width:100%;
}

.special-card-modal__copy p{
  margin:0;
  color:#000000;
  line-height:1.55;
  font-size:.94rem;
  width:100%;
}

.panel-card--accent{
  border-color:rgba(20,119,216,.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.32) 22%, transparent 24%),
    linear-gradient(145deg, rgba(245,252,255,.96) 0%, rgba(220,236,245,.94) 44%, rgba(188,211,225,.9) 100%);
  box-shadow:
    0 18px 48px rgba(52,74,101,.18),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(120,138,156,.22);
}

#createAccordion{
  border-color: rgba(104,176,214,.48);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.42) 20%, transparent 23%),
    linear-gradient(145deg, rgba(249,253,255,.98) 0%, rgba(230,242,250,.96) 38%, rgba(206,226,240,.92) 100%);
  box-shadow:
    0 20px 52px rgba(72,121,155,.16),
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 0 -1px 0 rgba(124,156,178,.2);
}

#createAccordion::after{
  background:linear-gradient(90deg, rgba(106,205,236,.28), rgba(74,169,214,.1));
}

#joinAccordion{
  border-color: rgba(143,126,214,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.4) 20%, transparent 23%),
    linear-gradient(145deg, rgba(251,249,255,.98) 0%, rgba(238,232,251,.96) 38%, rgba(217,207,243,.92) 100%);
  box-shadow:
    0 20px 52px rgba(103,87,171,.15),
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 0 -1px 0 rgba(136,128,190,.2);
}

#joinAccordion::after{
  background:linear-gradient(90deg, rgba(173,152,240,.24), rgba(120,105,205,.1));
}

#createAccordion summary,
#joinAccordion summary{
  min-height:38px;
  padding:2px 0 4px;
}

#createAccordion summary span,
#joinAccordion summary span{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

#typeworksAccordion summary{
  min-height:38px;
  padding:2px 0 4px;
}

.typeworks-summary-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:calc(100% - 18px);
  overflow:hidden;
}

.typeworks-summary-cards{
  display:inline-flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
}

.typeworks-summary-mark img{
  width:20px;
  height:auto;
  flex:0 0 auto;
  display:block;
  border-radius:4px;
  filter:drop-shadow(0 4px 8px rgba(52,74,101,.12));
}

.typeworks-summary-text{
  display:inline-block;
  min-width:0;
  color:#233548;
  font-size:.92rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

#createAccordion summary span::before,
#joinAccordion summary span::before{
  content:"";
  width:28px;
  height:28px;
  border-radius:50%;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 20px rgba(49,72,91,.14);
}

#createAccordion summary span::before{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 14%, transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(214,236,247,.9) 58%, rgba(153,199,225,.88));
}

#joinAccordion summary span::before{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 14%, transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(230,223,247,.9) 58%, rgba(188,177,230,.88));
}

#createAccordion .accordion-content,
#joinAccordion .accordion-content{
  position:relative;
  z-index:1;
  padding-top:10px;
}

#createAccordion .card-copy,
#joinAccordion .card-copy{
  font-size:.9rem;
  line-height:1.5;
  color:#506473;
}

#createAccordion .field,
#joinAccordion .field{
  gap:6px;
  margin-bottom:10px;
}

#createAccordion .field span,
#joinAccordion .field span{
  color:#5f7484;
  font-size:.66rem;
  letter-spacing:.15em;
}

#createAccordion input,
#joinAccordion input{
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(164,184,200,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,250,.88)),
    linear-gradient(145deg, rgba(255,255,255,.4), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 22px rgba(55,78,97,.06);
}

#createAccordion input::placeholder,
#joinAccordion input::placeholder{
  color:#97a6b1;
}

#createAccordion .primary-button,
#joinAccordion .secondary-button{
  display:block;
  width:100%;
  min-height:48px;
  border-radius:16px;
  letter-spacing:.05em;
  box-shadow:
    0 14px 28px rgba(58,102,129,.2),
    inset 0 1px 0 rgba(255,255,255,.28);
}

#createAccordion .primary-button{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(145deg, #33bdd8, #1389ad 58%, #0c6e8f 100%);
}

#joinAccordion .secondary-button{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(145deg, #8d7ee9, #6552c6 58%, #4b399e 100%);
}

#createAccordion .status-inline{
  padding:8px 10px;
  border-radius:18px;
  border:1px solid rgba(174,195,210,.34);
  background:linear-gradient(145deg, rgba(255,255,255,.7), rgba(235,244,249,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
}

#createAccordion .status-inline-copy strong{
  color:#233649;
}

#createAccordion .status-inline-copy span{
  color:#607482;
}

.panel-card h2{
  margin:0;
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#203245;
}

.card-copy{
  margin:0;
  color:#5b6d7c;
  line-height:1.45;
  font-size:.88rem;
}

.status-inline{
  display:flex;
  align-items:center;
  gap:10px;
}

.status-inline--compact{
  margin:-2px 0 2px;
}

.status-inline-copy{
  display:grid;
  gap:1px;
}

.status-inline-copy strong{
  font-size:.85rem;
}

.status-inline-copy span{
  color:var(--muted);
  font-size:.7rem;
}

.status-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border:1px solid #86c5ff;
  background:
    radial-gradient(circle at 35% 24%, #ffffff 0 10%, transparent 29%),
    linear-gradient(145deg, #ffffff, #dce5ed 58%, #bdc9d4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -2px 3px rgba(112,132,151,.2),
    0 0 0 4px rgba(20,119,216,.08),
    0 7px 13px rgba(56,82,111,.16);
}
.status-orb--small{
  width:20px;
  height:20px;
  box-shadow:none;
}

.form-label{
  color:#566779;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.code-pill{
  margin-top:6px;
  min-height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(147,163,181,.78);
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(214,224,234,.88));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:1.1rem;
  font-weight:900;
  letter-spacing:.2em;
  color:#203245;
}
.field {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}
.field span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
input, select {
  min-height: 42px;
  width: 100%;
  border: 1px solid rgba(38,50,57,.12);
  border-radius: 14px;
  padding: 0 12px;
  color: #26333a;
  background: linear-gradient(#fff, #edf2f5);
  box-shadow: inset 0 1px 0 #fff;
}
input:focus, select:focus {
  outline: 2px solid rgba(17,167,198,.18);
  border-color: rgba(17,167,198,.45);
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.primary-button,
.secondary-button,
.ghost-button,
.stack-button,
.pill-btn {
  border: 0;
  border-radius: 14px;
}
.primary-button,
.secondary-button,
.ghost-button,
.pill-btn {
  min-height: 44px;
  padding: 0 14px;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  text-wrap: nowrap;
}
.primary-button {
  color: #fff;
  background: linear-gradient(145deg, #16a9c8, #08788f);
  box-shadow: 0 8px 18px rgba(8,120,143,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
.secondary-button {
  color: #fff;
  background: linear-gradient(145deg, #786bd8, #4d3ba1);
  box-shadow: 0 8px 18px rgba(77,59,161,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.ghost-button,
.stack-button {
  color: #26333a;
  background: linear-gradient(#fff, #d8dfe3);
  box-shadow: 0 3px 8px rgba(44,56,63,.14), inset 0 1px 0 #fff;
}

.room-shell{
  display:grid;
  gap:8px;
  width:100%;
  padding: 10px 12px;
}
.room-shell__body{
  display:grid;
  gap:8px;
}
.room-shell__meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 140px)) minmax(0, 1fr);
  gap:6px;
  align-items:end;
}
.room-shell__actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}
.room-shell__actions .pill-btn,
.result-actions .pill-btn,
.modal-actions .pill-btn{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.host-start-shell{
  display:flex;
  justify-content:center;
  align-items:center;
}
.host-start-btn{
  width:auto;
  min-width:0;
  padding-inline:18px;
  white-space:nowrap;
  font-size:.58rem;
  letter-spacing:.015em;
}
.room-shell__code{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(147,163,181,.76);
  background:rgba(255,255,255,.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:900;
  color:#203245;
}
.hud-pill{
  border-radius:999px;
  border:1px solid rgba(147,163,181,.7);
  padding:5px 9px;
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(214,224,234,.9));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-height:30px;
}
.hud-pill--status{
  min-height:36px;
  padding:6px 9px;
  justify-content:flex-start;
  gap:9px;
  border-radius:15px;
}
.hud-pill--room{
  justify-content:space-between;
  align-items:center;
}
.status-copy{
  min-width:0;
  display:grid;
  gap:0;
}
.status-title{
  color:#1f2d3b;
  font-size:.82rem;
  font-weight:850;
  line-height:1.15;
}
.status-meta{
  color:#566779;
  font-size:.58rem;
  font-weight:700;
}
.value{
  font-size:.68rem;
  font-weight:700;
}
.value.meta{
  font-size:.56rem;
  letter-spacing:.08em;
  opacity:.78;
}
.room-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.14em;
  font-size:.68rem;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(147,163,181,.76);
  background:rgba(255,255,255,.62);
}
.pill-btn{
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.62rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(214,224,234,.9));
  color:#27405a;
  border:1px solid rgba(147,163,181,.8);
}
.pill-btn.primary{
  background:linear-gradient(135deg, #1477d8, #0a4f95);
  color:#eef7ff;
  border:none;
}
.typeworks-link-word{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin-top:10px;
  text-decoration:none;
  width:100%;
}

.typeworks-link-word img{
  width:33px;
  height:auto;
  display:block;
  flex:0 0 auto;
  border-radius:4px;
  filter:drop-shadow(0 6px 10px rgba(52,74,101,.14));
  transition:transform .16s ease, filter .16s ease;
}

.typeworks-link-word:hover img,
.typeworks-link-word:focus-visible img{
  transform:translateY(-1px);
  filter:drop-shadow(0 8px 14px rgba(52,74,101,.18));
}
.pill-btn.danger{
  color:#8b2f3c;
  border-color:rgba(157,52,64,.34);
}
.field--share{
  margin-bottom:0;
}

.game-table {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.98) 0 8%, rgba(236,240,242,.97) 38%, rgba(207,215,220,.97) 100%),
    linear-gradient(145deg, #f5f7f8, #cad3d8);
  box-shadow: var(--shadow), inset 0 1px 0 #fff, inset 0 -45px 100px rgba(67,81,89,.09);
}
.game-table[data-active-color="red"]{
  background:
    radial-gradient(circle at 50% 44%, rgba(255,246,248,.99) 0 10%, rgba(245,210,216,.98) 40%, rgba(224,180,190,.94) 100%),
    linear-gradient(145deg, #fff6f8, #e9ccd4);
}
.game-table[data-active-color="red"].game-table--color-flash{
  background:
    radial-gradient(circle at 50% 44%, rgba(255,244,247,1) 0 13%, rgba(244,198,207,.99) 41%, rgba(222,164,179,.96) 100%),
    linear-gradient(145deg, #fff7f9, #e4bec9);
}
.game-table[data-active-color="blue"]{
  background:
    radial-gradient(circle at 50% 44%, rgba(244,248,255,.99) 0 10%, rgba(197,213,235,.98) 40%, rgba(135,162,196,.94) 100%),
    linear-gradient(145deg, #f3f7ff, #bfd0e3);
}
.game-table[data-active-color="blue"].game-table--color-flash{
  background:
    radial-gradient(circle at 50% 44%, rgba(242,247,255,1) 0 13%, rgba(184,205,234,.99) 41%, rgba(122,151,191,.96) 100%),
    linear-gradient(145deg, #f1f6ff, #b4c9e0);
}
.game-table[data-active-color="green"]{
  background:
    radial-gradient(circle at 50% 44%, rgba(247,255,251,.99) 0 10%, rgba(220,248,234,.98) 40%, rgba(162,223,191,.94) 100%),
    linear-gradient(145deg, #f6fff9, #d4eddf);
}
.game-table[data-active-color="green"].game-table--color-flash{
  background:
    radial-gradient(circle at 50% 44%, rgba(245,255,250,1) 0 13%, rgba(207,244,224,.99) 41%, rgba(148,216,181,.96) 100%),
    linear-gradient(145deg, #f4fff8, #c9e8d8);
}
.game-table[data-active-color="gold"]{
  background:
    radial-gradient(circle at 50% 44%, rgba(255,252,246,.99) 0 10%, rgba(246,231,204,.98) 40%, rgba(228,206,163,.94) 100%),
    linear-gradient(145deg, #fffaf0, #e6d5ad);
}
.game-table[data-active-color="gold"].game-table--color-flash{
  background:
    radial-gradient(circle at 50% 44%, rgba(255,251,243,1) 0 13%, rgba(245,226,191,.99) 41%, rgba(226,198,148,.96) 100%),
    linear-gradient(145deg, #fff9ec, #e1cb98);
}
.game-table[data-active-color="anthracite"]{
  background:
    radial-gradient(circle at 50% 44%, rgba(248,248,249,.98) 0 10%, rgba(126,126,126,.5) 34%, rgba(0,0,0,.96) 100%),
    linear-gradient(145deg, #f2f2f2, #6c6c6c 30%, #000000 100%);
}
.game-table[data-active-color="anthracite"].game-table--color-flash{
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,1) 0 13%, rgba(162,162,162,.62) 38%, rgba(0,0,0,.98) 100%),
    linear-gradient(145deg, #fafafa, #808080 30%, #000000 100%);
}
.game-table--self-turn-flash{
  animation:self-turn-flash 1.05s ease;
}
.game-table--self-turn-pending{
  animation:none;
}
.self-turn-pending .player-zone.player-zone--active-turn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 0 0 2px rgba(22,169,200,.28);
  border-color:rgba(22,169,200,.5);
  background:
    linear-gradient(145deg, rgba(236,249,255,.995), rgba(193,234,244,.97));
}
.self-turn-pending .player-zone.player-zone--active-turn .self-turn-banner{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98);
  border-color:rgba(22,169,200,.42);
  background:
    linear-gradient(145deg, rgba(229,248,255,.995), rgba(180,228,241,.96));
}
.self-turn-pending .player-zone.player-zone--active-turn .self-turn-banner strong{
  color:#0a4f61;
}
.self-turn-pending .player-zone.player-zone--active-turn .self-turn-banner span{
  color:#096b81;
}
.game-table::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .55;
  pointer-events: none;
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.18) 0 2px, transparent 2px 15px),
    linear-gradient(90deg, transparent 8%, rgba(255,255,255,.55) 50%, transparent 92%);
  mix-blend-mode: overlay;
}
.game-table::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(62,75,83,.08);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
}
.table-tag {
  display:none;
  position: absolute;
  color: #79858c;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .17em;
  text-transform: uppercase;
  max-width: calc(100% - 230px);
}
.turn-indicator {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 7px 19px rgba(43,55,62,.1);
  color: #4d5a62;
  font-size: .73rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  overflow: hidden;
}
.room-code-chip{
  flex:0 0 auto;
  min-width:0;
  max-width:132px;
  min-height:32px;
  padding:0 11px;
  border:1px solid rgba(147,163,181,.76);
  border-radius:999px;
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(214,224,234,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
  color:#203245;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.room-code-chip:disabled{
  opacity:.62;
}
.turn-indicator.turn-indicator--self{
  color:#0f5f72;
  background:linear-gradient(145deg, rgba(247,255,255,.96), rgba(222,240,246,.88));
}
#turnTextBadge{
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}
.turn-badge-label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-stats-pill{
  position:relative;
  z-index:2;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(226,236,243,.86));
  box-shadow:0 8px 18px rgba(41,54,61,.12), inset 0 1px 0 rgba(255,255,255,.98);
  color:#50606d;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
}
.table-stats-pill:disabled{
  opacity:.5;
  cursor:default;
}
.turn-countdown{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  min-width:52px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(20,119,216,.2);
  background:rgba(255,255,255,.84);
  color:#0f5f72;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.turn-dot {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #11a7c6;
  box-shadow: 0 0 0 5px rgba(17,167,198,.12), 0 0 15px rgba(17,167,198,.45);
}
.seat-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.seat-strip--side{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:92px;
  align-items:stretch;
  justify-content:flex-start;
  overflow:visible;
}
.seat-strip--left{
  position:absolute;
  left:0;
  top:0;
  width:92px;
  max-width:92px;
  justify-self:start;
  align-self:start;
}
.seat-strip--right{
  display:none;
}
.seat-pill {
  width:100%;
  padding: 5px 7px;
  min-width:0;
  border-radius:18px;
}
.seat-pill.is-current {
  outline: 2px solid rgba(17,167,198,.22);
}
.seat-pill strong {
  display: block;
  font-size: .64rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat-pill span {
  display: block;
  color: var(--muted);
  font-size: .5rem;
  margin-top: 1px;
  line-height: 1.05;
}

.center-layout {
  position: relative;
  display: grid;
  grid-template-columns:1fr;
  justify-items:center;
}
.table-center-band{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:start;
  min-height:calc(var(--card-h) * 1.95);
}
.table-side-panel{
  display:none;
}
.table-chat-launcher{
  position:relative;
  z-index:42;
  display:flex;
  justify-content:flex-end;
  margin-top:-4px;
  margin-bottom:-2px;
}
.live-chat-rail{
  position:relative;
  width:100%;
  height:258px;
  min-height:258px;
  max-height:258px;
  overflow:hidden;
  display:block;
  padding:0 2px 6px;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.live-chat-feed{
  position:relative;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  gap:8px;
  min-width:0;
}
.live-chat-bubble{
  position:relative;
  width:auto;
  max-width:100%;
  padding:8px 10px 8px 12px;
  border-radius:18px 18px 6px 18px;
  border:1px solid rgba(255,255,255,.82);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(224,233,240,.88));
  box-shadow:0 10px 18px rgba(41,54,61,.12), inset 0 1px 0 rgba(255,255,255,.96);
  color:#223445;
  align-self:flex-end;
  transform:translateX(10px);
  opacity:0;
  animation:chat-bubble-in .24s cubic-bezier(.17,.82,.24,1) forwards;
}
.live-chat-bubble::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:-6px;
  width:12px;
  height:12px;
  border-right:1px solid rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.82);
  background:linear-gradient(145deg, rgba(224,233,240,.88), rgba(255,255,255,.96));
  transform:rotate(45deg);
}
.live-chat-bubble.is-expiring{
  animation:chat-bubble-out .3s ease forwards;
}
.live-chat-bubble__name{
  display:block;
  margin-bottom:3px;
  color:#60717d;
  font-size:.53rem;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-chat-bubble__text{
  display:block;
  color:#1f2e3d;
  font-size:.78rem;
  font-weight:900;
  line-height:1.15;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.live-chat-bubble--emoji .live-chat-bubble__text{
  font-size:1.52rem;
  line-height:1;
  letter-spacing:0;
}
.live-chat-bubble--emoji{
  padding-top:7px;
  padding-bottom:7px;
}
.live-chat-bubble--self{
  background:
    linear-gradient(145deg, rgba(237,250,255,.98), rgba(185,229,241,.92));
  border-color:rgba(17,167,198,.22);
}
.live-chat-bubble--self::after{
  border-color:rgba(17,167,198,.22);
  background:linear-gradient(145deg, rgba(185,229,241,.92), rgba(237,250,255,.98));
}

.incoming-preview-stage{
  position:absolute;
  inset:70px 12px 150px;
  z-index:9;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
}
.incoming-preview-stage:not(.hidden){
  opacity:1;
}
.incoming-preview-grid{
  display:grid;
  grid-template-columns:repeat(var(--preview-cols, 2), minmax(0, var(--preview-card-w, 120px)));
  gap:12px;
  justify-content:center;
  align-content:center;
  padding:18px;
  border-radius:28px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.52), rgba(255,255,255,.12) 56%, rgba(255,255,255,0) 100%);
}
.incoming-preview-card{
  --card-w:var(--preview-card-w, 120px);
  --card-h:calc(var(--card-w) * 1.46);
  --card-radius:calc(var(--card-w) * 0.145);
  animation:incoming-preview-pop .82s cubic-bezier(.16,.84,.28,1) both;
  animation-delay:calc(var(--preview-index, 0) * .045s);
  filter:drop-shadow(0 18px 22px rgba(31,43,50,.22));
}
.incoming-preview-card--penalty{
  box-shadow:0 0 0 4px rgba(120,107,216,.18);
}
.incoming-preview-card--draw{
  box-shadow:0 0 0 4px rgba(22,169,200,.14);
}
.ui-effect-layer{
  position:fixed;
  inset:0;
  z-index:28;
  pointer-events:none;
}
.incoming-flight-card{
  position:fixed;
  margin:0;
  transform-origin:50% 50%;
  opacity:1;
  filter:drop-shadow(0 18px 22px rgba(31,43,50,.22));
  transition:
    transform .72s cubic-bezier(.16,.84,.24,1),
    opacity .72s ease,
    filter .72s ease;
  transition-delay:var(--flight-delay, 0s);
}
.incoming-flight-card.is-flying{
  transform:translate(var(--flight-x), var(--flight-y)) scale(var(--flight-scale, .72));
  opacity:.18;
  filter:drop-shadow(0 8px 12px rgba(31,43,50,.08));
}

.stacks {
  display: flex;
  align-items: center;
  justify-content: center;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  gap: 16px;
}
.self-turn-banner{
  position: relative;
  z-index: 4;
  display:grid;
  gap:4px;
  margin:52px 12px 0;
  height:72px;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid rgba(131,148,164,.22);
  background:linear-gradient(145deg, rgba(247,250,252,.96), rgba(227,234,239,.88));
  box-shadow:0 10px 22px rgba(52,74,101,.10), inset 0 1px 0 rgba(255,255,255,.98);
}
.self-turn-banner strong{
  color:#435565;
  font-size:.86rem;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.self-turn-banner span{
  color:#6a7b89;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.03em;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.player-zone.player-zone--active-turn .self-turn-banner{
  border-color:rgba(17,167,198,.24);
  background:linear-gradient(145deg, rgba(228,247,255,.995), rgba(176,226,239,.96));
  box-shadow:0 12px 28px rgba(17,167,198,.14), inset 0 1px 0 rgba(255,255,255,.98);
}
.player-zone.player-zone--active-turn .self-turn-banner strong{
  color:#0a4f61;
}
.player-zone.player-zone--active-turn .self-turn-banner span{
  color:#096b81;
}
.stack-wrap {
  position: relative;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 38px;
}
.stack {
  position: relative;
  width: calc(var(--card-w) * 1.34);
  height: calc(var(--card-h) * 1.34);
}
.stack--discard{
  width: calc(var(--card-w) * 1.92);
  height: calc(var(--card-h) * 1.92);
}
.stack--wish-red{
  background: radial-gradient(circle at 50% 46%, rgba(255,245,247,.92), rgba(231,80,98,.22) 44%, rgba(165,38,59,.18) 100%);
  border-radius: calc(var(--card-radius) + 10px);
}
.stack--wish-blue{
  background: radial-gradient(circle at 50% 46%, rgba(246,249,255,.92), rgba(61,110,168,.26) 44%, rgba(22,52,90,.2) 100%);
  border-radius: calc(var(--card-radius) + 10px);
}
.stack--wish-green{
  background: radial-gradient(circle at 50% 46%, rgba(246,255,250,.92), rgba(118,216,168,.28) 44%, rgba(41,149,101,.18) 100%);
  border-radius: calc(var(--card-radius) + 10px);
}
.stack--wish-gold{
  background: radial-gradient(circle at 50% 46%, rgba(255,251,242,.92), rgba(237,165,46,.26) 44%, rgba(186,107,8,.18) 100%);
  border-radius: calc(var(--card-radius) + 10px);
}
.stack--wish-anthracite{
  background: radial-gradient(circle at 50% 46%, rgba(252,252,252,.95), rgba(88,88,88,.3) 42%, rgba(0,0,0,.34) 100%);
  border-radius: calc(var(--card-radius) + 10px);
}
.stack--discard::before,
.stack--discard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius: calc(var(--card-radius) + 8px);
  border:1px solid rgba(39,51,58,.16);
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(214,222,228,.94) 48%, rgba(188,199,207,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 22px rgba(31,43,50,.16);
}
.stack--discard::before{
  transform: translate(-8px, 6px) rotate(-4deg);
  opacity:.86;
}
.stack--discard::after{
  transform: translate(6px, 2px) rotate(2.5deg);
  opacity:.94;
}
.stack .card {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.stack--discard > .card{
  width: 100%;
  height: 100%;
  transform:none;
  filter:drop-shadow(0 16px 18px rgba(31,43,50,.18));
}
.discard-wish-banner{
  position:absolute;
  left:50%;
  bottom:-6px;
  z-index:4;
  transform:translateX(-50%);
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(27,36,44,.72);
  color:#f7fbfd;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(15,21,25,.24);
}
.discard-effect-banner{
  position:absolute;
  left:50%;
  top:-18px;
  z-index:4;
  transform:translateX(-50%);
  min-width:min(72%, 220px);
  max-width:84%;
  padding:7px 10px 8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(145deg, rgba(255,255,255,.88), rgba(220,229,236,.9));
  box-shadow:0 14px 24px rgba(18,26,32,.18), inset 0 1px 0 rgba(255,255,255,.92);
  text-align:center;
}
.discard-effect-banner--lock{
  background:linear-gradient(145deg, rgba(255,242,248,.98), rgba(243,206,224,.92));
}
.discard-effect-banner--tornado{
  background:linear-gradient(145deg, rgba(245,248,251,.98), rgba(215,224,232,.94));
}
.effect-kicker{
  display:block;
  color:#61717d;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.effect-value{
  display:block;
  margin-top:2px;
  color:#203142;
  font-size:.82rem;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.effect-meta{
  display:block;
  margin-top:2px;
  color:#5a6a77;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.05em;
}
.tornado-effect-stage{
  position:absolute;
  left:50%;
  top:50%;
  z-index:8;
  width:min(420px, 88vw);
  height:min(420px, 88vw);
  transform:translate(-50%, -50%);
  pointer-events:none;
  opacity:0;
}
.tornado-effect-stage.is-active{
  opacity:1;
}
.tornado-effect-stage::before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,0) 58%);
  filter:blur(8px);
}
.tornado-effect-stage--red::before{
  background:radial-gradient(circle, rgba(226,80,98,.24), rgba(255,255,255,0) 60%);
}
.tornado-effect-stage--blue::before{
  background:radial-gradient(circle, rgba(61,110,168,.24), rgba(255,255,255,0) 60%);
}
.tornado-effect-stage--green::before{
  background:radial-gradient(circle, rgba(118,216,168,.24), rgba(255,255,255,0) 60%);
}
.tornado-effect-stage--gold::before{
  background:radial-gradient(circle, rgba(237,165,46,.26), rgba(255,255,255,0) 60%);
}
.tornado-effect-stage--anthracite::before{
  background:radial-gradient(circle, rgba(0,0,0,.36), rgba(255,255,255,0) 60%);
}
.tornado-effect-core{
  position:absolute;
  left:50%;
  top:50%;
  width:44%;
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  display:grid;
  place-items:center;
  animation:tornado-core-pulse 1.55s ease both;
}
.tornado-effect-core__img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(35,48,58,.24));
}
.tornado-effect-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:58%;
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.74);
  box-shadow:0 0 0 10px rgba(255,255,255,.08), 0 0 34px rgba(255,255,255,.24);
  animation:tornado-ring-spin 1.3s linear both;
}
.tornado-effect-cards{
  position:absolute;
  inset:0;
}
.tornado-effect-card{
  position:absolute;
  left:50%;
  top:50%;
  width:12.8%;
  aspect-ratio:.71;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.9);
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), transparent 26%),
    var(--card-fill);
  box-shadow:
    0 12px 18px rgba(31,43,50,.18),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -5px 8px rgba(0,0,0,.16);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--slot) * 29deg))
    translateY(-150px)
    scale(.62);
  opacity:0;
  animation:tornado-card-deal-cycle 1.72s cubic-bezier(.18,.83,.27,1) forwards;
  animation-delay:var(--delay);
}
.tornado-effect-card::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.58);
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));
}
.tornado-effect-card.vortex-card--red{ --card-fill:linear-gradient(135deg, #e25062, #a5263b); }
.tornado-effect-card.vortex-card--blue{ --card-fill:linear-gradient(135deg, #3d6ea8, #16345a); }
.tornado-effect-card.vortex-card--green{ --card-fill:linear-gradient(135deg, #76d8a8, #299565); }
.tornado-effect-card.vortex-card--gold{ --card-fill:linear-gradient(135deg, #eda52e, #ba6b08); }
.tornado-effect-card.vortex-card--anthracite{ --card-fill:linear-gradient(135deg, #4b4b4b, #000000); }

@keyframes tornado-core-pulse{
  0%{ transform:translate(-50%, -50%) scale(.54); opacity:0; }
  20%{ transform:translate(-50%, -50%) scale(.98); opacity:1; }
  70%{ transform:translate(-50%, -50%) scale(1.06); opacity:1; }
  100%{ transform:translate(-50%, -50%) scale(.94); opacity:0; }
}

@keyframes tornado-ring-spin{
  0%{ transform:translate(-50%, -50%) scale(.32) rotate(0deg); opacity:0; }
  18%{ opacity:1; }
  100%{ transform:translate(-50%, -50%) scale(1.16) rotate(320deg); opacity:0; }
}

@keyframes tornado-card-deal-cycle{
  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--slot) * 29deg))
      translateY(-170px)
      scale(.52);
  }
  14%{
    opacity:1;
  }
  46%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--slot) * 62deg))
      translateY(-74px)
      scale(.88);
  }
  62%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--slot) * 105deg))
      translateY(-12px)
      scale(.42);
  }
  72%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      translate(0, 0)
      scale(.34);
  }
  100%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--deal-r))
      translate(var(--deal-x), var(--deal-y))
      scale(.86);
  }
}
.stack:not(.stack--discard) .card:nth-child(1) { transform: translate(-5px, 5px) rotate(-3deg); filter: brightness(.93); }
.stack:not(.stack--discard) .card:nth-child(2) { transform: translate(4px, 2px) rotate(1.8deg); filter: brightness(.98); }
.stack:not(.stack--discard) .card:nth-child(3) { transform: translate(0, -2px); }
.stack-button {
  padding: 0;
  width: calc(var(--card-w) * 1.34);
  height: calc(var(--card-h) * 1.34);
}
.stack-label {
  margin-top: 8px;
  color: #68757d;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hidden { display: none !important; }

.card {
  --accent: #13a8c7;
  --accent-dark: #087b92;
  --accent-rgb: 19,168,199;
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
  flex: 0 0 auto;
  border-radius: var(--card-radius);
  user-select: none;
  transform-style: preserve-3d;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 12px 12px rgba(31,43,50,.18));
}
.card.face {
  overflow: hidden;
  border: 1px solid rgba(42,54,61,.19);
  background:
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(224,230,233,.96) 43%, rgba(249,250,251,.98) 44%, rgba(197,207,212,.97));
  box-shadow: inset 0 1px 2px #fff, inset 0 -3px 5px rgba(48,61,68,.16);
}
.card.face::before {
  content: "";
  position: absolute;
  inset: calc(var(--card-w) * .065);
  z-index: 12;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: calc(var(--card-radius) - 5px);
  box-shadow: inset 0 0 0 1px rgba(29,41,48,.07), 0 0 0 1px rgba(255,255,255,.24);
}
.card.face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  opacity: .75;
  background:
    linear-gradient(111deg, transparent 0 37%, rgba(255,255,255,.57) 38%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.017) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light;
}
.color-sweep {
  position: absolute;
  left: -18%;
  top: 20%;
  width: 136%;
  height: 42%;
  transform: rotate(-13deg);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.42), inset 0 -5px 9px rgba(0,0,0,.14), 0 8px 19px rgba(var(--accent-rgb),.25);
}
.color-sweep::before,
.color-sweep::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}
.color-sweep::before {
  inset: 11% 10%;
  border: 1px solid rgba(255,255,255,.34);
}
.color-sweep::after {
  left: 18%;
  right: 18%;
  bottom: -11%;
  height: 17%;
  opacity: .38;
  background: var(--accent-dark);
  filter: blur(5px);
}
.corner {
  position: absolute;
  left: calc(var(--card-w) * .10);
  top: calc(var(--card-w) * .085);
  z-index: 14;
  display: grid;
  justify-items: center;
  min-width: calc(var(--card-w) * .17);
  line-height: .84;
  color: #263139;
  text-shadow: 0 1px 0 #fff;
}
.corner.bottom {
  inset: auto calc(var(--card-w) * .10) calc(var(--card-w) * .085) auto;
  transform: rotate(180deg);
}
.corner--top-right {
  left: auto;
  right: calc(var(--card-w) * .10);
}
.corner--bottom-left {
  top: auto;
  bottom: calc(var(--card-w) * .085);
  transform: rotate(180deg);
}
.corner--bottom-right {
  top: auto;
  bottom: calc(var(--card-w) * .085);
  left: auto;
  right: calc(var(--card-w) * .10);
  transform: rotate(180deg);
}
.corner-value {
  display:grid;
  place-items:center;
  min-width:100%;
  min-height:calc(var(--card-w) * .205);
  text-align:center;
  font-size: calc(var(--card-w) * .205);
  font-weight: 1000;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.corner-pip {
  width: calc(var(--card-w) * .075);
  aspect-ratio: 1;
  margin-top: calc(var(--card-w) * .035);
  transform: rotate(45deg);
  border-radius: 28%;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.center-medallion {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 13;
  width: calc(var(--card-w) * .60);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-7deg);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 28%;
  color: #fff;
  font-size: calc(var(--card-w) * .40);
  font-weight: 1000;
  line-height: 1;
  text-align:center;
  letter-spacing:-.04em;
  text-shadow: 0 3px 8px rgba(0,0,0,.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.54), inset 0 -7px 12px rgba(0,0,0,.14), 0 9px 21px rgba(var(--accent-rgb),.31);
}
.symbol-glyph{
  display:block;
  width:100%;
  height:100%;
  color:currentColor;
}
.symbol-glyph--text{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  line-height:1;
}
.symbol-glyph--corner{
  width:calc(var(--card-w) * .18);
  height:calc(var(--card-w) * .18);
}
.symbol-glyph--center{
  width:calc(var(--card-w) * .34);
  height:calc(var(--card-w) * .34);
}
.card.special .symbol-glyph--center{
  width:calc(var(--card-w) * .36);
  height:calc(var(--card-w) * .36);
}
.card.special .symbol-glyph--corner{
  width:calc(var(--card-w) * .165);
  height:calc(var(--card-w) * .165);
}
.center-medallion::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 23%;
}
.card-title {
  position: absolute;
  left: 50%;
  bottom: 12.5%;
  z-index: 14;
  transform: translateX(-50%);
  width:72%;
  color: #344149;
  font-size: calc(var(--card-w) * .062);
  font-weight: 1000;
  letter-spacing: .13em;
  line-height:1.04;
  text-align:center;
  text-transform: uppercase;
  text-wrap: balance;
}
.card.special .color-sweep {
  top: 15%;
  height: 49%;
  transform: rotate(13deg);
  background:
    linear-gradient(108deg, transparent 0 34%, rgba(255,255,255,.26) 38%, rgba(255,255,255,.08) 49%, transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.42), inset 0 -5px 9px rgba(0,0,0,.14), 0 8px 19px rgba(var(--accent-rgb),.25);
}
.card.special .center-medallion {
  top: 47%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 210deg, rgba(255,255,255,.42), transparent 18%, rgba(255,255,255,.11) 36%, transparent 57%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.card.special .center-medallion::after { border-radius: 50%; }
.card.special .card-title {
  bottom: 10.1%;
  width:76%;
  font-size: calc(var(--card-w) * .053);
}
.card.card--lock .color-sweep{
  top:16%;
  height:48%;
  transform:rotate(-10deg);
  background:
    linear-gradient(108deg, transparent 0 34%, rgba(255,255,255,.24) 38%, rgba(255,255,255,.07) 49%, transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.3), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, white 28%), var(--accent-dark) 66%, color-mix(in srgb, var(--accent-dark) 82%, black 18%));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.42), inset 0 -6px 10px rgba(32,48,64,.20), 0 10px 22px rgba(var(--accent-rgb),.24);
}
.card.card--lock .center-medallion{
  border-radius:24%;
  transform:translate(-50%, -50%);
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 62%, white 38%), color-mix(in srgb, var(--accent-dark) 88%, black 12%) 72%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.5), inset 0 -8px 14px rgba(33,49,65,.22), 0 11px 24px rgba(var(--accent-rgb),.28);
}
.card.card--lock .center-medallion::after{
  border-radius:20%;
}

.card.card--all .center-medallion{
  display:none;
}

.card.card--all .all-field{
  position:absolute;
  inset:calc(var(--card-w) * .13) calc(var(--card-w) * .08) calc(var(--card-w) * .22);
  display:grid;
  place-items:center;
}

.card.card--all .all-plus{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--card-w) * .64);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:calc(var(--card-w) * .34);
  font-weight:1000;
  letter-spacing:-.08em;
  text-shadow:0 3px 8px rgba(0,0,0,.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.44),
    inset 0 -8px 14px rgba(0,0,0,.2),
    0 12px 24px rgba(var(--accent-rgb),.28);
}

.card.card--all .all-plus::before{
  content:"";
  position:absolute;
  inset:11%;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
}

.card.card--all .all-receiver,
.card.card--all .all-arrow{
  display:none;
}

.card.card--tornado{
  --accent:#eef2f6;
  --accent-dark:#aeb9c4;
  --accent-rgb:138,151,165;
}

.card.card--tornado .color-sweep,
.card.card--tornado .center-medallion{
  display:none;
}

.card.card--tornado .corner-pip{
  display:none;
}

.card.card--tornado .corner-value{
  width:calc(var(--card-w) * .13);
  height:calc(var(--card-w) * .13);
  display:grid;
  place-items:center;
}

.card.card--tornado .corner-value img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(46,60,72,.14));
}

.card.card--tornado .tornado-field{
  position:absolute;
  inset:calc(var(--card-w) * .08);
  border-radius:calc(var(--card-radius) - 12px);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(252,253,255,.98) 0%, rgba(241,245,249,.94) 100%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1px rgba(23,33,42,.06);
}

.card.card--tornado .vortex{
  position:absolute;
  inset:6% 4% 14%;
  display:block;
}

.card.card--tornado .vortex-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 16px 18px rgba(41,57,70,.14));
}

.card.card--tornado .vortex-cards{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.card.card--tornado .vortex-card{
  position:absolute;
  width:17%;
  aspect-ratio:.71;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.92);
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 26%),
    var(--card-fill);
  box-shadow:
    0 10px 20px rgba(41,57,70,.16),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -5px 8px rgba(0,0,0,.16);
  overflow:hidden;
}

.card.card--tornado .vortex-card::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.6);
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

.card.card--tornado .vortex-card::after{
  content:"";
  position:absolute;
  inset:0 0 5px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:clamp(8px, 1.15vw, 12px);
  font-weight:1000;
  letter-spacing:-.04em;
  text-shadow:0 2px 4px rgba(0,0,0,.18);
}

.card.card--tornado .vortex-card .mini-corner,
.card.card--tornado .vortex-card .mini-corner-bottom{
  display:none;
}

.card.card--tornado .vortex-card--red{ --card-fill:linear-gradient(135deg, #e25062, #a5263b); }
.card.card--tornado .vortex-card--blue{ --card-fill:linear-gradient(135deg, #3d6ea8, #16345a); }
.card.card--tornado .vortex-card--green{ --card-fill:linear-gradient(135deg, #76d8a8, #299565); }
.card.card--tornado .vortex-card--gold{ --card-fill:linear-gradient(135deg, #eda52e, #ba6b08); }
.card.card--tornado .vortex-card--anthracite{ --card-fill:linear-gradient(135deg, #4b4b4b, #000000); }

.card.card--tornado .vortex-card.a{ left:2%; top:10%; transform:rotate(-20deg); }
.card.card--tornado .vortex-card.b{ right:4%; top:8%; transform:rotate(16deg); }
.card.card--tornado .vortex-card.c{ left:-1%; top:43%; width:15%; transform:rotate(22deg); }
.card.card--tornado .vortex-card.d{ right:1%; top:41%; width:15%; transform:rotate(-15deg); }
.card.card--tornado .vortex-card.e{ left:15%; bottom:4%; width:14%; transform:rotate(-11deg); }
.card.card--tornado .vortex-card.f{ right:15%; bottom:6%; width:14%; transform:rotate(12deg); }
.card.card--tornado .vortex-card.g{ left:41%; bottom:-1%; width:15%; transform:rotate(7deg); }
.card.card--tornado .vortex-card.h{ left:37%; top:3%; width:14%; transform:rotate(-6deg); }
.card.card--tornado .vortex-card.i{ left:34%; top:28%; width:13%; transform:rotate(-18deg); }
.card.card--tornado .vortex-card.j{ right:33%; top:31%; width:13%; transform:rotate(14deg); }
.card.card--tornado .vortex-card.k{ left:43%; top:43%; width:12%; transform:rotate(6deg); }

.card.card--tornado .card-title{
  bottom:8.8%;
  width:76%;
  font-size:calc(var(--card-w) * .068);
  letter-spacing:.16em;
}

@keyframes orbit-ring {
  to { transform: rotate(360deg); }
}

.cyan    { --accent:#3d6ea8; --accent-dark:#16345a; --accent-rgb:61,110,168; }
.ruby    { --accent:#e25062; --accent-dark:#a5263b; --accent-rgb:226,80,98; }
.amber   { --accent:#eda52e; --accent-dark:#ba6b08; --accent-rgb:237,165,46; }
.jade    { --accent:#76d8a8; --accent-dark:#299565; --accent-rgb:118,216,168; }
.onyx    { --accent:#3f3f3f; --accent-dark:#000000; --accent-rgb:63,63,63; }
.violet  { --accent:#786bd8; --accent-dark:#4d3ba1; --accent-rgb:120,107,216; }
.pink    { --accent:#df4f94; --accent-dark:#9e245f; --accent-rgb:223,79,148; }
.graphite{ --accent:#64717a; --accent-dark:#27323a; --accent-rgb:100,113,122; }
.card.wild {
  --accent:#8b6bd5;
  --accent-dark:#28343b;
  --accent-rgb:139,107,213;
}
.card.wild .color-sweep {
  background:
    linear-gradient(108deg, transparent 0 34%, rgba(255,255,255,.25) 38%, rgba(255,255,255,.08) 49%, transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.25), transparent 30%),
    conic-gradient(from 20deg, #16a9c8, #43ab7e, #eda52e, #f2c94c, #e25062, #df4f94, #786bd8, #16a9c8);
}
.card.wild .center-medallion {
  background: conic-gradient(from 20deg, #16a9c8, #43ab7e, #eda52e, #f2c94c, #e25062, #df4f94, #786bd8, #16a9c8);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.55), inset 0 -7px 12px rgba(0,0,0,.17), 0 9px 21px rgba(69,79,87,.28);
}
.card.back {
  overflow: hidden;
  border: 1px solid rgba(39,51,58,.23);
  background:
    linear-gradient(145deg, rgba(255,255,255,.995), rgba(240,245,249,.98) 42%, rgba(252,253,254,.995) 43%, rgba(220,229,237,.985));
  box-shadow: inset 0 1px 2px #fff, inset 0 -4px 7px rgba(35,47,54,.14);
}
.back-field {
  position: absolute;
  inset: calc(var(--card-w) * .065);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: calc(var(--card-radius) - 5px);
  background:
    radial-gradient(circle at 18% 18%, rgba(226,80,98,.76), transparent 22%),
    radial-gradient(circle at 82% 16%, rgba(61,110,168,.72), transparent 22%),
    radial-gradient(circle at 24% 82%, rgba(118,216,168,.66), transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(237,165,46,.78), transparent 24%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.11) 0 2px, transparent 2px 9px),
    linear-gradient(145deg, rgba(248,250,252,.98), rgba(225,235,243,.96) 48%, rgba(210,223,233,.97));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), inset 0 0 24px rgba(132,156,177,.10);
}
.back-field::before,
.back-field::after {
  content: "";
  position: absolute;
  width: 118%;
  height: 31%;
  left: -9%;
  border-radius: 999px;
  transform: rotate(-28deg);
}
.back-field::before {
  display: none;
}
.back-field::after {
  top: 48%;
  height: 28%;
  background: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22);
}
.back-emblem {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 76%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #223446;
  font-size: calc(var(--card-w) * .52);
  font-weight: 1000;
  font-style: italic;
  letter-spacing: 0;
  text-shadow: 0 8px 18px rgba(59,78,94,.10), 0 1px 0 rgba(255,255,255,.26);
  background: none;
  box-shadow: none;
}
.back-emblem::after {
  display: none;
}
.back-emblem span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
  transform: translateX(-.03em);
}
.back-name {
  display:none;
}

.player-zone {
  position: relative;
  min-height: 248px;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.37), rgba(255,255,255,.74));
  box-shadow: 0 -10px 30px rgba(56,69,77,.08), inset 0 1px 0 #fff;
  backdrop-filter: blur(16px);
}
.player-zone.player-zone--active-turn{
  border-color:rgba(17,167,198,.32);
  background:linear-gradient(145deg, rgba(240,251,255,.995), rgba(192,234,244,.965));
  box-shadow:
    0 22px 44px rgba(17,167,198,.16),
    inset 0 1px 0 rgba(255,255,255,.99),
    0 0 0 4px rgba(17,167,198,.08);
}
.player-zone.player-zone--round-lost{
  border-color:rgba(156,169,181,.24);
  background:linear-gradient(145deg, rgba(240,243,246,.92), rgba(214,221,227,.86));
  box-shadow:
    0 -8px 22px rgba(56,69,77,.06),
    inset 0 1px 0 rgba(255,255,255,.94);
}
.player-zone.player-zone--round-lost .hand-viewport,
.player-zone.player-zone--round-lost .hand-controls,
.player-zone.player-zone--round-lost .player-meta{
  opacity:.34;
  filter:grayscale(.18);
  transition:opacity .22s ease, filter .22s ease;
}
.player-zone.player-zone--round-lost .self-turn-banner{
  border-color:rgba(227,181,82,.34);
  background:linear-gradient(145deg, rgba(255,250,239,.98), rgba(245,228,191,.9));
  box-shadow:0 14px 28px rgba(146,112,28,.12), inset 0 1px 0 rgba(255,255,255,.98);
}
.player-zone.player-zone--round-lost .self-turn-banner strong{
  color:#6d4d13;
}
.player-zone.player-zone--round-lost .self-turn-banner span{
  color:#8b6931;
}
.player-meta {
  position: absolute;
  left: 13px;
  top: 11px;
  z-index: 40;
  max-width: calc(100% - 218px);
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}
.player-tools{
  position:absolute;
  right:12px;
  top:11px;
  z-index:41;
  display:flex;
  align-items:center;
  gap:8px;
}
.quick-chat-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 6px);
  z-index:42;
  width:min(178px, calc(100vw - 28px));
  max-height:220px;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  align-items:stretch;
  padding:9px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(221,232,239,.9));
  box-shadow:0 16px 28px rgba(41,54,61,.14), inset 0 1px 0 rgba(255,255,255,.98);
}
.quick-chat-panel__chips{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  max-height:170px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:2px;
  scrollbar-width:thin;
}
.chat-toggle,
.quick-chat-chip,
.quick-chat-send,
.sort-toggle,
.sound-toggle{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  min-width:94px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.92);
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(225,235,241,.88));
  box-shadow:0 8px 18px rgba(41,54,61,.12), inset 0 1px 0 rgba(255,255,255,.98);
  color:#4f616d;
  font-size:.62rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.chat-toggle{
  min-width:64px;
}
.chat-toggle--table{
  position:relative;
  right:auto;
  bottom:auto;
  min-width:68px;
  min-height:30px;
  z-index:43;
}
.chat-toggle[aria-expanded="true"]{
  border-color:rgba(17,167,198,.34);
  color:#0b5669;
}
.quick-chat-chip{
  min-height:30px;
  width:100%;
  min-width:0;
  padding:6px 9px;
  justify-content:flex-start;
  text-align:left;
  border-radius:14px;
  font-size:1.32rem;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.18;
  text-transform:none;
  cursor:pointer;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.quick-chat-chip.is-selected{
  border-color:rgba(17,167,198,.3);
  background:linear-gradient(145deg, rgba(232,248,255,.98), rgba(191,231,242,.92));
  color:#0b5669;
}
.quick-chat-chip:disabled{
  opacity:.44;
  cursor:default;
}
.quick-chat-send{
  width:100%;
  min-width:0;
  min-height:34px;
  padding:0;
  justify-self:stretch;
  border-radius:14px;
  font-size:.92rem;
  letter-spacing:0;
}
.quick-chat-send:disabled{
  opacity:.42;
  cursor:default;
}
.sort-toggle:active,
.sound-toggle:active{
  transform:translateY(1px);
}
.sort-toggle:focus-visible,
.sound-toggle:focus-visible{
  outline:2px solid rgba(17,167,198,.28);
  outline-offset:2px;
}
.sort-toggle:disabled,
.sound-toggle:disabled{
  opacity:.48;
  cursor:default;
  box-shadow:0 3px 10px rgba(41,54,61,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
.avatar {
  width: 40px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  font-size: .72rem;
  font-weight: 1000;
  background: linear-gradient(145deg, #18afd0, #08758b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 7px 16px rgba(8,117,139,.22);
}
.player-name { font-size: .85rem; font-weight: 1000; }
.player-count { margin-top: 1px; color: var(--muted); font-size: .67rem; }
.player-meta > div:last-child{
  min-width: 0;
}
.player-meta .player-name,
.player-meta .player-count{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hand-viewport {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  display: block;
  padding: 0 10px 6px;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}
.hand-viewport--tornado-hidden .hand{
  opacity:0;
}
.hand-effect-stage{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  overflow:visible;
}
.hand {
  width: max-content;
  min-width: 100%;
  min-height: calc(var(--card-h) + 12px);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: auto;
}
.hand .card {
  position: relative;
  cursor: pointer;
  transform-origin: 50% 100%;
  outline: none;
  pointer-events: auto;
  flex: 0 0 auto;
}
.hand .card:hover,
.hand .card:focus-visible,
.hand .card.selected {
  transform: translateY(-4px);
  filter: drop-shadow(0 18px 16px rgba(31,43,50,.26));
}
.hand .card.selected {
  box-shadow: 0 0 0 4px rgba(17,167,198,.19);
}
.hand .card.disabled {
  opacity: 1;
  filter: drop-shadow(0 12px 12px rgba(31,43,50,.18));
}
.hand .card.incoming{
  animation: hand-card-incoming .42s cubic-bezier(.16,.84,.34,1);
  box-shadow: 0 0 0 3px rgba(22,169,200,.22);
}
.hand .card.incoming--penalty{
  animation: hand-card-penalty-incoming .52s cubic-bezier(.16,.84,.34,1);
  box-shadow: 0 0 0 3px rgba(120,107,216,.24);
}
.hand .card.incoming--tornado{
  animation: hand-card-tornado-incoming .88s cubic-bezier(.14,.82,.22,1);
  box-shadow: 0 0 0 3px rgba(118,130,144,.22);
}
.hand-effect-card{
  position:absolute;
  margin:0;
  animation:hand-card-tornado-collapse .92s cubic-bezier(.17,.79,.22,1) forwards;
  animation-delay:var(--delay, 0s);
  transform-origin:50% 60%;
}
.hand .card.incoming--tornado{
  animation: hand-card-tornado-incoming .72s cubic-bezier(.14,.82,.22,1);
  box-shadow: 0 0 0 3px rgba(118,130,144,.22);
}

.hand--scrollable{
  padding-right:8px;
}

.hand-controls{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
  align-items:end;
  gap:10px;
  padding: 8px 10px 10px;
}
.hand-controls .primary-button,
.hand-controls .secondary-button{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.modal-list--stats{
  display:grid;
  gap:10px;
}
.stats-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.92);
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(225,233,240,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98), 0 10px 20px rgba(39,51,58,.08);
}
.stats-row.is-current{
  border-color:rgba(17,167,198,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98), 0 12px 24px rgba(17,167,198,.12);
}
.stats-row.is-self{
  background:linear-gradient(145deg, rgba(248,253,255,.96), rgba(220,239,246,.9));
}
.stats-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.stats-copy strong{
  color:#203245;
  font-size:.82rem;
  font-weight:1000;
  letter-spacing:.03em;
}
.stats-copy span{
  color:#697a87;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.04em;
}
.stats-score{
  min-width:54px;
  min-height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  border:1px solid rgba(209,86,157,.28);
  background:linear-gradient(145deg, rgba(255,233,244,.98), rgba(240,122,188,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 10px 18px rgba(199,86,153,.16);
  color:#fff8fc;
  font-size:1rem;
  font-weight:1000;
  letter-spacing:.04em;
}

.hand-draw-btn{
  width:100%;
  min-width:0;
  max-width:none;
  justify-self:start;
  min-height:36px;
  padding:0 10px;
  font-size:.64rem;
  letter-spacing:.015em;
}
.hand-draw-btn.is-penalty{
  animation: draw-penalty-pulse 1s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(120,107,216,.30), 0 10px 22px rgba(77,59,161,.24), inset 0 1px 0 rgba(255,255,255,.22);
}

.hand-color-field{
  grid-column:1 / -1;
  margin-bottom:0;
}

.hand-play-btn{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:0 12px;
  font-size:.67rem;
  letter-spacing:.015em;
  transition: box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
}

.hand-play-btn.is-ready{
  animation: play-ready-pulse 1.05s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(22,169,200,.14), 0 14px 26px rgba(8,120,143,.3), inset 0 1px 0 rgba(255,255,255,.34);
  filter: saturate(1.12);
}

.discard-drop-in{
  animation:none;
}

@media (max-width: 1120px) {
  .app{ width:min(960px, 100%); }
  .stacks {
    justify-self: center;
  }
}

@media (min-width: 761px) and (max-width: 1280px) and (orientation: portrait) {
  :root{
    --card-w: 92px;
  }
  .wrap{ padding:14px; }
  .app{
    width:min(820px, 100%);
    gap:12px;
  }
  .page-header{
    padding:16px;
  }
  .header-counter{
    grid-column:2 / 3;
    grid-row:1;
    justify-self:end;
  }
  .lobby-panels{
    grid-template-columns:1fr;
    max-width:720px;
    width:100%;
    margin:0 auto;
  }
  .panel-card{
    padding:13px;
    gap:8px;
  }
  .panel-card--setup.panel-card--accordion{
    padding:10px 11px;
  }
  .settings-grid{
    grid-template-columns:1fr;
  }
  .room-shell{
    max-width:none;
    width:100%;
    margin:0;
    padding:10px 11px;
  }
  .hud-pill--room{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .room-shell__meta{
    grid-template-columns:1fr;
  }
  .room-shell__actions{
    grid-template-columns:1fr;
  }
  .game-table{
    border-radius:26px;
    gap:12px;
    padding:16px 12px 12px;
  }
  .game-table::after{
    inset:10px;
    border-radius:19px;
  }
  .turn-indicator{
    justify-self:stretch;
    width:100%;
    justify-content:center;
    padding:8px 10px;
  }
  .table-stats-pill{
    min-height:32px;
    padding:6px 12px;
    font-size:.62rem;
  }
  .table-center-band{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:calc(var(--card-h) * 2.05);
  }
  .table-side-panel{
    display:none;
  }
  .seat-strip{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .seat-strip--side{
    width:92px;
    max-width:92px;
  }
  .seat-strip--left{
    position:absolute;
    left:0;
    top:0;
    justify-self:start;
    align-self:start;
    z-index:2;
  }
  .live-chat-rail{
    height:226px;
    min-height:226px;
    max-height:226px;
    padding:0 1px 6px;
  }
  .live-chat-bubble{
    padding:7px 9px 7px 10px;
    border-radius:16px 16px 5px 16px;
  }
  .live-chat-bubble__name{
    font-size:.5rem;
  }
  .live-chat-bubble__text{
    font-size:.7rem;
  }
  .center-layout{
    gap:12px;
  }
  .stacks{
    width:max-content;
    max-width:100%;
    gap:18px;
    flex-direction:row;
    justify-content:center;
    margin-inline:auto;
  }
  .player-zone{
    min-height:236px;
    border-radius:20px;
  }
  .player-meta{
    top:9px;
    left:10px;
  }
  .player-tools{
    right:10px;
    top:9px;
    gap:7px;
  }
  .sort-toggle,
  .sound-toggle,
  .chat-toggle{
    min-height:32px;
    min-width:76px;
    padding:6px 11px;
    font-size:.6rem;
  }
  .chat-toggle--table{
    min-height:28px;
    min-width:58px;
    padding:5px 9px;
    font-size:.53rem;
  }
  .quick-chat-panel{
    right:0;
    bottom:calc(100% + 6px);
    width:min(164px, calc(100vw - 24px));
    max-height:208px;
    padding:8px;
  }
  .quick-chat-panel__chips{
    max-height:160px;
  }
  .quick-chat-chip{
    min-height:28px;
    padding:5px 8px;
    font-size:1rem;
  }
  .quick-chat-send{
    min-height:32px;
  }
  .avatar{
    width:38px;
    border-radius:12px;
  }
  .player-name{
    font-size:.82rem;
  }
  .hand-viewport{
    margin-top:8px;
    padding:0 9px 9px;
  }
  .hand{
    gap:10px;
  }
  .hand-controls{
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
    padding:7px 9px 9px;
  }
  .hand-draw-btn{
    min-height:40px;
    font-size:.66rem;
  }
  .hand-play-btn{
    min-height:40px;
    font-size:.69rem;
  }
  .rule-row,
  .special-rule-row{
    grid-template-columns:64px minmax(0, 1fr);
    gap:9px;
  }
  .rules-table{
    grid-template-columns:1fr;
  }
  .rule-badge,
  .special-rule-preview .card{
    min-height:60px;
    border-radius:17px;
  }
  .rule-badge{
    font-size:.84rem;
  }
  .rule-text,
  .special-rule-text{
    min-height:60px;
    padding:10px 11px;
    font-size:.86rem;
  }
  .modal-card{
    width:min(100vw - 24px, 620px);
    padding:15px 15px 13px;
  }
  .modal-card--color{
    width:min(100vw - 24px, 520px);
    padding:13px 13px 11px;
  }
  .modal-actions{
    grid-template-columns:1fr;
  }
  .modal-actions--room{
    grid-template-columns:1fr;
  }
  .color-modal-head{
    margin-right:32px;
    margin-bottom:8px;
  }
  .color-choice-card{
    --card-w: 88px;
  }
  .room-code-chip{
    max-width:112px;
    min-height:30px;
    padding:0 9px;
    font-size:.56rem;
  }
  .site-footer{
    width:min(820px, 100%);
    padding:0 0 4px;
  }
  .site-footer__nav{
    width:100%;
    padding:4px 2px;
  }
}

@media (max-width: 760px) {
  :root{
    --card-w: 96px;
  }
  .lobby-panels{
    grid-template-columns:1fr;
    max-width:640px;
    width:100%;
    margin:0 auto;
  }
  .wrap{ padding:10px; }
  .app{ gap:10px; }
  .site-footer{
    padding:0 0 4px;
  }
  .site-footer__nav{
    width:100%;
    justify-content:center;
    gap:8px;
    padding:0;
  }
  .site-footer__link{
    font-size:.66rem;
    letter-spacing:.08em;
  }
  .page-header{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    padding:14px;
  }
  .header-counter{
    grid-column:2 / 3;
    grid-row:1;
    justify-self:end;
    align-self:start;
  }
  .panel-card{ padding:12px; gap:8px; }
  .panel-card--setup.panel-card--accordion{ padding:9px 10px; }
  .settings-grid{ grid-template-columns:1fr; }
  .field span{ font-size:.64rem; }
  input, select{ min-height:40px; }
  .primary-button, .secondary-button, .ghost-button, .pill-btn{ min-height:40px; font-size:.68rem; letter-spacing:.015em; }
  .room-shell__actions .pill-btn,
  .result-actions .pill-btn,
  .modal-actions .pill-btn{
    font-size:.62rem;
  }
  .status-inline{ align-items:flex-start; }
  .status-inline-copy span{ font-size:.68rem; line-height:1.35; }
  .room-shell{
    max-width:none;
    width:100%;
    margin:0;
    padding:9px 10px;
  }
  .hud-pill--room{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .room-shell__meta{
    grid-template-columns:1fr;
  }
  .room-shell__actions{
    grid-template-columns:1fr;
  }
  .game-table {
    border-radius: 23px;
    gap:10px;
    padding:14px 10px 10px;
  }
  .game-table::after { inset: 8px; border-radius: 17px; }
  .turn-indicator {
    justify-self:stretch;
    width:100%;
    justify-content:center;
    padding: 7px 9px;
  }
  .table-stats-pill{
    width:100%;
    min-height:32px;
    padding:6px 12px;
    font-size:.62rem;
  }
  .seat-strip{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .seat-strip--side{
    width:100%;
  }
  .table-center-band{
    grid-template-columns:minmax(0, 1fr) minmax(0, auto) minmax(76px, 92px);
    column-gap:7px;
  }
  .seat-strip--side{
    max-width:102px;
  }
  .table-side-panel{
    gap:7px;
  }
  .live-chat-rail{
    height:206px;
    min-height:206px;
    max-height:206px;
    padding:0 0 5px;
  }
  .live-chat-feed{
    gap:6px;
  }
  .live-chat-bubble{
    padding:6px 8px 6px 9px;
    border-radius:14px 14px 4px 14px;
  }
  .live-chat-bubble__name{
    margin-bottom:2px;
    font-size:.46rem;
  }
  .live-chat-bubble__text{
    font-size:.66rem;
  }
  .seat-pill{
    padding:4px 6px;
  }
  .seat-pill strong{
    font-size:.56rem;
  }
  .seat-pill span{
    font-size:.48rem;
  }
  .center-layout { gap: 11px; }
  .stacks { gap: 16px; flex-direction:row; }
  .player-zone {
    min-height:226px;
    border-radius: 18px;
  }
  .self-turn-banner{
    margin:48px 10px 0;
    height:64px;
    padding:9px 12px;
  }
  .self-turn-banner strong{
    font-size:.8rem;
  }
  .self-turn-banner span{
    font-size:.66rem;
  }
  .player-meta { top: 8px; left: 9px; }
  .player-tools{
    right:9px;
    top:8px;
    gap:5px;
  }
  .sort-toggle,
  .sound-toggle,
  .chat-toggle{
    min-height:30px;
    min-width:62px;
    padding:5px 8px;
    font-size:.52rem;
  }
  .chat-toggle--table{
    min-height:25px;
    min-width:50px;
    padding:4px 6px;
    font-size:.46rem;
  }
  .quick-chat-panel{
    right:0;
    bottom:calc(100% + 5px);
    width:min(150px, calc(100vw - 20px));
    max-height:196px;
    padding:7px;
    gap:6px;
    border-radius:15px;
  }
  .quick-chat-panel__chips{
    gap:5px;
    max-height:148px;
  }
  .quick-chat-chip{
    min-height:24px;
    padding:4px 7px;
    font-size:.92rem;
  }
  .quick-chat-send{
    min-height:32px;
    font-size:.86rem;
  }
  .avatar { width: 35px; border-radius: 11px; }
  .player-name { font-size: .78rem; }
  .hand-viewport {
    margin-top: 8px;
    padding: 0 8px 8px;
  }
  .hand{
    gap:8px;
  }
  .hand-controls{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    padding: 6px 8px 8px;
  }
  .hand-draw-btn{
    max-width:none;
    min-height:38px;
    font-size:.62rem;
  }
  .hand-play-btn{
    max-width:none;
    font-size:.61rem;
  }
  .host-start-btn{
    font-size:.55rem;
  }
  .rules-list p{ font-size:.84rem; }
  .rule-row{
    grid-template-columns:60px minmax(0, 1fr);
    gap:8px;
  }
  .rules-static-head{
    align-items:stretch;
  }
  .rules-static-head .deck-link-row{
    width:100%;
  }
  .rules-static-head .pill-btn{
    width:100%;
  }
  .rule-badge{
    min-height:56px;
    font-size:.8rem;
    border-radius:16px;
  }
  .rule-text{
    min-height:56px;
    padding:9px 10px;
    font-size:.84rem;
  }
  .special-rule-row{
    grid-template-columns:72px minmax(0, 1fr);
    gap:10px;
    align-items:start;
  }
  .special-rule-preview{
    justify-items:start;
    align-items:start;
    padding-top:2px;
  }
  .special-rule-preview .card{
    --card-w: 72px;
  }
  .special-rule-text{
    min-height:0;
    padding:9px 10px;
    font-size:.84rem;
  }
  .modal-card{
    width:min(100vw - 16px, 520px);
    padding:14px 14px 12px;
  }
  .modal-card--color{
    width:min(100vw - 16px, 320px);
    padding:12px 12px 10px;
    border-radius:18px;
  }
  .modal-card--result{
    width:100%;
    max-width:calc(100vw - 20px);
    margin:0 auto;
    justify-self:center;
    padding:14px 12px 12px;
  }
  .modal-actions{
    grid-template-columns:1fr;
  }
  .modal-actions--room{
    grid-template-columns:1fr;
  }
  .result-confetti{
    width:100%;
    height:96px;
  }
  .result-name-stage{
    width:100%;
    min-height:104px;
    padding:8px 0 6px;
  }
  .result-name-stage__rail{
    min-height:84px;
  }
  .result-name-stage__cards{
    gap:3px;
  }
  .result-name-card{
    flex:0 1 min(42px, calc((100vw - 72px) / 8));
    width:min(42px, calc((100vw - 72px) / 8));
  }
  .result-winning-card{
    width:min(132px, 42vw);
  }
  .result-scoreboard{
    padding:9px;
    border-radius:16px;
  }
  .result-score-row{
    min-height:34px;
    padding:7px 9px;
  }
  .result-score-name{
    font-size:.78rem;
  }
  .result-score-value{
    min-width:34px;
    font-size:.74rem;
  }
  .color-modal-head{
    margin:0 30px 7px 0;
  }
  .color-choice-grid{
    gap:8px;
    padding-bottom:6px;
  }
  .color-choice-card{
    --card-w: 76px;
  }
  .accordion-dock{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:8px;
  }
  .room-code-chip{
    max-width:98px;
    font-size:.52rem;
  }
  .dock-orb{
    max-width:50px;
    font-size:.58rem;
  }
}

@media (min-width: 980px) and (orientation: landscape) {
  .game-table{
    gap:12px;
    padding:16px 16px 12px;
  }
  .table-center-band{
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  .seat-strip--left{
    max-width:82px;
  }
  .seat-strip--side{
    gap:4px;
  }
  .seat-pill{
    padding:4px 6px;
    border-radius:15px;
  }
  .seat-pill strong{
    font-size:.55rem;
  }
  .seat-pill span{
    font-size:.45rem;
  }
  .live-chat-rail{
    height:206px;
    min-height:206px;
    max-height:206px;
  }
  .live-chat-bubble{
    padding:6px 8px 6px 9px;
    border-radius:15px 15px 4px 15px;
  }
  .live-chat-bubble__name{
    font-size:.48rem;
  }
  .live-chat-bubble__text{
    font-size:.67rem;
  }
  .player-zone{
    min-height:194px;
  }
  .player-meta{
    top:9px;
    left:10px;
    gap:7px;
    max-width: calc(100% - 196px);
  }
  .player-tools{
    right:10px;
    top:9px;
    gap:6px;
  }
  .sort-toggle,
  .sound-toggle{
    min-height:28px;
    min-width:72px;
    padding:5px 9px;
    font-size:.52rem;
  }
  .chat-toggle--table{
    min-height:24px;
    min-width:48px;
    padding:3px 6px;
    font-size:.44rem;
  }
  .quick-chat-panel{
    right:0;
    bottom:calc(100% + 5px);
    width:142px;
    max-height:188px;
    padding:6px;
  }
  .quick-chat-panel__chips{
    max-height:142px;
  }
  .quick-chat-chip{
    min-height:28px;
    padding:4px 6px;
    font-size:1.08rem;
    line-height:1.12;
  }
  .quick-chat-send{
    min-height:24px;
    font-size:.72rem;
  }
  .self-turn-banner{
    margin:52px 10px 0;
    height:58px;
    padding:8px 10px;
  }
  .self-turn-banner strong{
    font-size:.72rem;
  }
  .self-turn-banner span{
    font-size:.6rem;
    -webkit-line-clamp:1;
  }
  .hand-viewport{
    margin-top:6px;
    padding:0 8px 5px;
  }
  .hand{
    gap:4px;
  }
  .hand .card{
    transform:scale(.84);
    transform-origin:50% 100%;
  }
  .hand .card:hover,
  .hand .card:focus-visible,
  .hand .card.selected{
    transform:translateY(-4px) scale(.84);
  }
  .hand-controls{
    padding:4px 8px 8px;
    gap:8px;
  }
  .hand-draw-btn,
  .hand-play-btn{
    min-height:32px;
    font-size:.58rem;
  }
}

@media (max-width: 430px) {
  .page-header h1 { font-size: 1.15rem; letter-spacing: .12em; }
  .eyebrow{ font-size:.64rem; letter-spacing:.18em; }
  .header-counter{
    font-size:.54rem;
    padding:5px 9px;
  }
  .header-counter strong{
    font-size:.8rem;
  }
  .game-table { padding:12px 6px 6px; }
  .panel-card--accordion summary{
    min-height:28px;
    padding-block:0;
  }
  #typeworksAccordion summary{
    min-height:30px;
    padding-block:0;
  }
  .typeworks-summary-mark{
    gap:7px;
    max-width:calc(100% - 16px);
  }
  .typeworks-summary-cards{
    gap:1px;
  }
  .typeworks-summary-mark img{
    width:16px;
  }
  .typeworks-summary-text{
    font-size:.74rem;
    letter-spacing:.045em;
  }
  .room-shell.panel-card{
    width:100%;
  }
  .panel-card{ padding:10px; gap:7px; }
  .panel-card h2{ font-size:.92rem; }
  .pill-btn{ font-size:.58rem; padding:8px 9px; letter-spacing:.01em; }
  .room-shell__actions .pill-btn,
  .result-actions .pill-btn,
  .modal-actions .pill-btn{
    font-size:.55rem;
  }
  .result-hero{
    justify-content:center;
  }
  .result-badge{
    padding:8px 12px;
    border-radius:999px;
    font-size:.7rem;
  }
  .result-actions{
    grid-template-columns:1fr;
  }
  .turn-indicator{ width:100%; }
  .table-stats-pill{
    min-height:30px;
    padding:5px 10px;
    font-size:.56rem;
  }
  .accordion-dock{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:6px;
  }
  .stacks{
    gap:10px;
    justify-content:space-between;
  }
  .stack{
    width: calc(var(--card-w) * 1.14);
    height: calc(var(--card-h) * 1.14);
  }
  .stack--discard{
    width: calc(var(--card-w) * 1.56);
    height: calc(var(--card-h) * 1.56);
  }
  .self-turn-banner{
    margin:46px 8px 0;
    height:60px;
    padding:8px 10px;
    border-radius:15px;
  }
  .self-turn-banner strong{
    font-size:.74rem;
  }
  .self-turn-banner span{
    font-size:.62rem;
  }
  .stack-button{
    width: calc(var(--card-w) * 1.14);
    height: calc(var(--card-h) * 1.14);
  }
  .status-inline-copy strong{ font-size:.78rem; }
  .status-inline-copy span{ font-size:.64rem; }
  .hand--scrollable{
    gap:8px;
    padding-right:6px;
  }
  .rule-accordion__summary{
    min-height:46px;
    padding:10px 12px;
  }
  .rule-accordion__summary::after{
    width:22px;
    height:22px;
    font-size:.98rem;
  }
  .rule-accordion__eyebrow{
    font-size:.69rem;
    letter-spacing:.16em;
  }
  .rule-accordion__eyebrow--ruby{ color:#c94366; }
  .rule-accordion__eyebrow--cyan{ color:#3e74bc; }
  .rule-accordion__eyebrow--jade{ color:#369f6e; }
  .rule-accordion__eyebrow--amber{ color:#bd7d0d; }
  .rule-accordion__eyebrow--violet{ color:#705acb; }
  .rule-accordion__body{
    padding:0 12px 12px;
  }
  .rule-accordion__body p{
    font-size:.82rem;
    line-height:1.42;
  }
  .special-rule-row{
    grid-template-columns:58px minmax(0, 1fr);
    gap:8px;
    align-items:start;
  }
  .special-rule-preview{
    justify-items:start;
    align-items:start;
    padding-top:1px;
  }
  .special-rule-preview .card{
    --card-w: 54px;
  }
  .special-rule-text{
    min-height:0;
    padding:8px 9px;
    font-size:.8rem;
    line-height:1.38;
  }
  .dock-orb{
    max-width:42px;
    font-size:.54rem;
  }
}

.toast-shell{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:160;
  transform:translateX(-50%);
  min-width:min(540px, calc(100vw - 24px));
  max-width:min(540px, calc(100vw - 24px));
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(88,173,128,.34);
  background:linear-gradient(145deg, rgba(244,255,248,.98), rgba(207,242,220,.96));
  color:#214032;
  font-size:.9rem;
  font-weight:800;
  box-shadow:0 18px 40px rgba(26,37,44,.22);
}

.toast-shell--success{
  border-color:rgba(88,173,128,.34);
  background:linear-gradient(145deg, rgba(244,255,248,.98), rgba(207,242,220,.96));
  color:#214032;
}

.room-close-overlay{
  position:fixed;
  inset:0;
  z-index:210;
  display:grid;
  place-items:center;
  padding:18px;
}

.room-close-overlay__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 24%, rgba(226,80,98,.22), transparent 28%),
    radial-gradient(circle at 76% 18%, rgba(61,110,168,.2), transparent 26%),
    radial-gradient(circle at 68% 82%, rgba(237,165,46,.22), transparent 30%),
    radial-gradient(circle at 36% 76%, rgba(118,216,168,.2), transparent 24%),
    rgba(10,14,18,.72);
  backdrop-filter:blur(12px);
  opacity:0;
}

.room-close-overlay__card{
  position:relative;
  z-index:1;
  width:min(500px, calc(100vw - 28px));
  padding:24px 20px 18px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.24) 18%, transparent 20%),
    linear-gradient(145deg, rgba(246,249,252,.98) 0%, rgba(226,233,240,.94) 54%, rgba(205,214,223,.9) 100%);
  box-shadow:0 34px 92px rgba(11,16,22,.42), inset 0 1px 0 rgba(255,255,255,.84);
  display:grid;
  justify-items:center;
  gap:14px;
  overflow:hidden;
  opacity:0;
  transform:translateY(18px) scale(.95);
}

.room-close-overlay__storm{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.room-close-overlay__storm-card,
.room-close-overlay__stack-card,
.room-close-overlay__trump-card{
  position:absolute;
  width:118px;
  height:170px;
  border-radius:18px;
  box-shadow:0 22px 34px rgba(9,14,20,.28);
  overflow:visible;
}

.room-close-overlay__storm-card{
  left:50%;
  top:50%;
  margin:-85px 0 0 -59px;
  opacity:0;
  filter:blur(.2px);
}

.room-close-overlay__storm-card:nth-child(1){ --storm-from-x:-250px; --storm-from-y:-160px; --storm-to-x:-112px; --storm-to-y:-26px; --storm-rot:-26deg; --storm-delay:.04s; }
.room-close-overlay__storm-card:nth-child(2){ --storm-from-x:230px; --storm-from-y:-170px; --storm-to-x:88px; --storm-to-y:-36px; --storm-rot:18deg; --storm-delay:.12s; }
.room-close-overlay__storm-card:nth-child(3){ --storm-from-x:-280px; --storm-from-y:80px; --storm-to-x:-128px; --storm-to-y:30px; --storm-rot:14deg; --storm-delay:.18s; }
.room-close-overlay__storm-card:nth-child(4){ --storm-from-x:255px; --storm-from-y:94px; --storm-to-x:110px; --storm-to-y:18px; --storm-rot:-16deg; --storm-delay:.08s; }
.room-close-overlay__storm-card:nth-child(5){ --storm-from-x:-58px; --storm-from-y:-230px; --storm-to-x:-18px; --storm-to-y:-66px; --storm-rot:-8deg; --storm-delay:.26s; }
.room-close-overlay__storm-card:nth-child(6){ --storm-from-x:286px; --storm-from-y:-28px; --storm-to-x:140px; --storm-to-y:54px; --storm-rot:22deg; --storm-delay:.22s; }
.room-close-overlay__storm-card:nth-child(7){ --storm-from-x:-270px; --storm-from-y:-12px; --storm-to-x:-148px; --storm-to-y:66px; --storm-rot:-18deg; --storm-delay:.3s; }
.room-close-overlay__storm-card:nth-child(8){ --storm-from-x:42px; --storm-from-y:228px; --storm-to-x:28px; --storm-to-y:86px; --storm-rot:9deg; --storm-delay:.34s; }

.room-close-overlay__stack{
  position:relative;
  width:100%;
  min-height:318px;
  display:grid;
  place-items:center;
}

.room-close-overlay__stack-shadow{
  position:absolute;
  width:248px;
  height:62px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(9,14,20,.26), rgba(9,14,20,0) 72%);
  bottom:16px;
  opacity:0;
  transform:scale(.72);
}

.room-close-overlay__stack-card{
  left:50%;
  top:50%;
  margin:-85px 0 0 -59px;
  opacity:0;
}

.room-close-overlay__stack-card--1{ transform:translate(-70px, 16px) rotate(-16deg) scale(.96); }
.room-close-overlay__stack-card--2{ transform:translate(-26px, 4px) rotate(-8deg) scale(.98); }
.room-close-overlay__stack-card--3{ transform:translate(24px, 6px) rotate(8deg) scale(.98); }
.room-close-overlay__stack-card--4{ transform:translate(70px, 16px) rotate(15deg) scale(.96); }

.room-close-overlay__trump-card{
  left:50%;
  top:50%;
  margin:-94px 0 0 -66px;
  width:132px;
  height:188px;
  box-shadow:0 28px 42px rgba(0,0,0,.44);
  opacity:0;
  transform:translateY(-160px) scale(.78) rotate(-16deg);
  overflow:hidden;
}

.room-close-overlay__card-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(9,14,20,.24));
}

.room-close-overlay__card-image--trump{
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));
}

.room-close-overlay__copy{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:8px;
  opacity:0;
  transform:translateY(10px);
}

.room-close-overlay__title{
  color:#1f3141;
  font-size:1.26rem;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}

.room-close-overlay__message{
  margin:0;
  color:#243548;
  font-size:.98rem;
  line-height:1.55;
  text-align:center;
  max-width:31ch;
}

.room-close-overlay.is-active .room-close-overlay__backdrop{
  animation:room-close-backdrop-in .34s ease-out forwards;
}

.room-close-overlay.is-active .room-close-overlay__card{
  animation:room-close-shell-in .42s cubic-bezier(.18,.88,.2,1) forwards;
}

.room-close-overlay.is-active .room-close-overlay__stack-shadow{
  animation:room-close-shadow-in .46s ease-out .5s forwards;
}

.room-close-overlay.is-active .room-close-overlay__storm-card{
  animation:room-close-storm-card 1s cubic-bezier(.17,.78,.25,1) var(--storm-delay, 0s) forwards;
}

.room-close-overlay.is-active .room-close-overlay__stack-card{
  animation:room-close-stack-card .46s cubic-bezier(.2,.84,.22,1) .64s forwards;
}

.room-close-overlay.is-active .room-close-overlay__stack-card--1{ animation-delay:.62s; }
.room-close-overlay.is-active .room-close-overlay__stack-card--2{ animation-delay:.72s; }
.room-close-overlay.is-active .room-close-overlay__stack-card--3{ animation-delay:.8s; }
.room-close-overlay.is-active .room-close-overlay__stack-card--4{ animation-delay:.9s; }

.room-close-overlay.is-active .room-close-overlay__trump-card{
  animation:room-close-trump-drop .66s cubic-bezier(.14,.86,.18,1) 1.08s forwards;
}

.room-close-overlay.is-active .room-close-overlay__copy{
  animation:room-close-copy-in .42s ease-out 1.46s forwards;
}

@keyframes room-close-backdrop-in{
  0%{ opacity:0; }
  100%{ opacity:1; }
}

@keyframes room-close-shell-in{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.95);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes room-close-shadow-in{
  0%{
    opacity:0;
    transform:scale(.72);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes room-close-storm-card{
  0%{
    opacity:0;
    transform:translate(var(--storm-from-x), var(--storm-from-y)) rotate(calc(var(--storm-rot) * 1.2)) scale(.7);
  }
  16%{
    opacity:1;
  }
  58%{
    opacity:1;
    transform:translate(var(--storm-to-x), var(--storm-to-y)) rotate(var(--storm-rot)) scale(1);
  }
  82%{
    opacity:1;
    transform:translate(calc(var(--storm-to-x) * .6), calc(var(--storm-to-y) * .6)) rotate(calc(var(--storm-rot) * .55)) scale(.94);
  }
  100%{
    opacity:0;
    transform:translate(0, 0) rotate(0deg) scale(.9);
    filter:blur(.3px);
  }
}

@keyframes room-close-stack-card{
  0%{
    opacity:0;
    transform:translate(0, 0) rotate(0deg) scale(.84);
  }
  100%{
    opacity:1;
  }
}

@keyframes room-close-trump-drop{
  0%{
    opacity:0;
    transform:translateY(-160px) scale(.78) rotate(-16deg);
  }
  58%{
    opacity:1;
    transform:translateY(10px) scale(1.04) rotate(-4deg);
  }
  76%{
    opacity:1;
    transform:translateY(-8px) scale(1) rotate(-1deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes room-close-copy-in{
  0%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width: 640px){
  .room-close-overlay__card{
    width:min(420px, calc(100vw - 22px));
    padding:20px 14px 16px;
    border-radius:24px;
  }

  .room-close-overlay__stack{
    min-height:272px;
  }

  .room-close-overlay__storm-card,
  .room-close-overlay__stack-card{
    width:94px;
    height:136px;
    margin:-68px 0 0 -47px;
    border-radius:15px;
  }

  .room-close-overlay__trump-card{
    width:108px;
    height:156px;
    margin:-78px 0 0 -54px;
    border-radius:16px;
  }

  .room-close-overlay__title{
    font-size:1.08rem;
  }

  .room-close-overlay__message{
    font-size:.9rem;
  }
}

@keyframes play-ready-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(22,169,200,.14), 0 14px 26px rgba(8,120,143,.3), inset 0 1px 0 rgba(255,255,255,.34);
    filter: saturate(1.08) brightness(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(22,169,200,.18), 0 16px 30px rgba(8,120,143,.34), inset 0 1px 0 rgba(255,255,255,.34);
    filter: saturate(1.16) brightness(1.03);
  }
}

@keyframes draw-penalty-pulse {
  0% {
    box-shadow:0 0 0 0 rgba(120,107,216,.30), 0 10px 22px rgba(77,59,161,.24), inset 0 1px 0 rgba(255,255,255,.22);
    filter:brightness(1);
  }
  55% {
    box-shadow:0 0 0 12px rgba(120,107,216,0), 0 14px 28px rgba(77,59,161,.32), inset 0 1px 0 rgba(255,255,255,.22);
    filter:brightness(1.04);
  }
  100% {
    box-shadow:0 0 0 0 rgba(120,107,216,0), 0 10px 22px rgba(77,59,161,.24), inset 0 1px 0 rgba(255,255,255,.22);
    filter:brightness(1);
  }
}

@keyframes discard-drop-in {
  0% {
    transform: translateY(-26px) scale(.88) rotate(-7deg);
    opacity: .22;
  }
  65% {
    transform: translateY(3px) scale(1.03) rotate(1.5deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes result-card-float {
  0% {
    transform:translate3d(0, 0, 0) rotate(var(--rotate)) scale(.78);
    opacity:0;
  }
  10% {
    transform:translate3d(calc(var(--drift) * .1), calc(var(--rise) * -.12), 0) rotate(calc(var(--rotate) * .92)) scale(.98);
    opacity:1;
  }
  100% {
    transform:translate3d(var(--drift), calc(var(--rise) * -1.18), 0) rotate(calc(var(--rotate) * -.55)) scale(.86);
    opacity:1;
  }
}

@keyframes self-turn-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(22,169,200,0), var(--shadow), inset 0 1px 0 #fff, inset 0 -45px 100px rgba(67,81,89,.09);
    filter: brightness(1);
  }
  35% {
    box-shadow: 0 0 0 10px rgba(22,169,200,.12), 0 22px 52px rgba(22,169,200,.18), inset 0 1px 0 #fff, inset 0 -45px 100px rgba(67,81,89,.05);
    filter: brightness(1.03);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22,169,200,0), var(--shadow), inset 0 1px 0 #fff, inset 0 -45px 100px rgba(67,81,89,.09);
    filter: brightness(1);
  }
}

@keyframes hand-card-incoming {
  0% {
    transform: translateY(-18px) translateX(18px) scale(.96);
    opacity:.24;
  }
  72% {
    transform: translateY(2px) translateX(0) scale(1.02);
    opacity:1;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity:1;
  }
}

@keyframes hand-card-penalty-incoming {
  0% {
    transform: translateY(-30px) translateX(26px) rotate(-5deg) scale(.94);
    opacity:.14;
    filter: drop-shadow(0 24px 26px rgba(91,71,184,.22));
  }
  58% {
    transform: translateY(3px) translateX(0) rotate(0deg) scale(1.03);
    opacity:1;
    filter: drop-shadow(0 18px 20px rgba(91,71,184,.18));
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity:1;
    filter: drop-shadow(0 12px 12px rgba(31,43,50,.18));
  }
}

@keyframes hand-card-tornado-incoming {
  0% {
    transform: translateY(-132px) translateX(0) rotate(-9deg) scale(.34);
    opacity:.04;
    filter: drop-shadow(0 28px 28px rgba(79,90,101,.22));
  }
  42% {
    transform: translateY(-48px) translateX(8px) rotate(6deg) scale(.82);
    opacity:.94;
    filter: drop-shadow(0 22px 24px rgba(79,90,101,.18));
  }
  78% {
    transform: translateY(3px) translateX(0) rotate(0deg) scale(1.03);
    opacity:1;
    filter: drop-shadow(0 15px 18px rgba(79,90,101,.14));
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity:1;
    filter: drop-shadow(0 12px 12px rgba(31,43,50,.18));
  }
}

@keyframes hand-card-tornado-collapse {
  0% {
    opacity:1;
    transform:translate3d(0,0,0) rotate(0deg) scale(1);
    filter:drop-shadow(0 12px 12px rgba(31,43,50,.18));
  }
  54% {
    opacity:1;
    transform:translate3d(calc(var(--to-x) * .62), calc(var(--to-y) * .62), 0) rotate(calc(var(--to-r) * .66)) scale(.66);
    filter:drop-shadow(0 22px 24px rgba(79,90,101,.16));
  }
  100% {
    opacity:0;
    transform:translate3d(var(--to-x), var(--to-y), 0) rotate(var(--to-r)) scale(.24);
    filter:drop-shadow(0 30px 26px rgba(79,90,101,.08));
  }
}

@keyframes incoming-preview-pop {
  0% {
    opacity:0;
    transform:translateY(18px) scale(.76);
  }
  24% {
    opacity:1;
  }
  54% {
    opacity:1;
    transform:translateY(-4px) scale(1.02);
  }
  100% {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes chat-bubble-in{
  from{ opacity:0; transform:translateX(10px) translateY(4px); }
  to{ opacity:1; transform:translateX(0) translateY(0); }
}
@keyframes chat-bubble-out{
  from{ opacity:1; transform:translateX(0) translateY(0); }
  to{ opacity:0; transform:translateX(10px) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .panel-card { transition: none; }
  .hand-play-btn.is-ready{ animation:none; }
  .hand-draw-btn.is-penalty{ animation:none; }
  .discard-drop-in{ animation:none; }
  .game-table--self-turn-flash{ animation:none; }
  .hand-effect-card{ animation:none; }
  .hand .card.incoming,
  .hand .card.incoming--penalty,
  .hand .card.incoming--tornado,
  .incoming-preview-card{ animation:none; }
  .incoming-flight-card{ transition:none; }
}