/* ============================================================
   OCEANS 3-13 · deep sea theme
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }

:root {
  --deep-0: #010b1a;
  --deep-1: #031c38;
  --deep-2: #063056;
  --deep-3: #0a4a77;
  --glow:   #5df2e2;
  --glow-2: #8be9ff;
  --coral:  #ff7e67;
  --coral-2:#ff5f6d;
  --gold:   #ffd166;
  --sand:   #e8d5a7;
  --ink:    #eaf7ff;
  --ink-dim:#9fc4dd;
  --navy-suit: #14425f;
  --red-suit:  #f0556a;
  --panel:  rgba(4, 30, 56, 0.72);
  --panel-line: rgba(93, 242, 226, 0.22);
  --cw: clamp(52px, 13.5vw, 84px);       /* card width */
  --radius: 18px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--deep-0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button { font-family: inherit; }
input { font-family: inherit; }

/* ============================================================
   OCEAN BACKGROUND
   ============================================================ */
#ocean {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -20%, #0f6a96 0%, transparent 55%),
    linear-gradient(180deg, #084a74 0%, #063056 28%, #041f3e 58%, #02132a 82%, #010b1a 100%);
}
#ocean::after { /* subtle caustic shimmer */
  content: ""; position: absolute; inset: -50%;
  background:
    radial-gradient(35% 25% at 30% 30%, rgba(139,233,255,.07), transparent 70%),
    radial-gradient(30% 22% at 70% 60%, rgba(93,242,226,.06), transparent 70%),
    radial-gradient(28% 20% at 45% 80%, rgba(139,233,255,.05), transparent 70%);
  animation: caustics 26s ease-in-out infinite alternate;
}
@keyframes caustics {
  0%   { transform: translate(-4%, -3%) scale(1); }
  50%  { transform: translate(3%, 2%) scale(1.08); }
  100% { transform: translate(-2%, 4%) scale(1.02); }
}

.rays {
  position: absolute; top: -12%; left: 8%; width: 46%; height: 85%;
  background: linear-gradient(172deg, rgba(139,233,255,0.16), rgba(139,233,255,0.0) 65%);
  clip-path: polygon(18% 0, 42% 0, 92% 100%, 30% 100%);
  filter: blur(6px);
  transform-origin: top center;
  animation: raySway 11s ease-in-out infinite alternate;
  pointer-events: none;
}
.rays2 {
  left: 46%; width: 40%;
  clip-path: polygon(30% 0, 48% 0, 78% 100%, 12% 100%);
  animation-duration: 15s; animation-delay: -6s; opacity: .7;
}
@keyframes raySway {
  from { transform: rotate(-3.5deg); opacity: .55; }
  to   { transform: rotate(3deg);  opacity: 1; }
}

/* bubbles are spawned by JS as .bubble */
#bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubble {
  position: absolute; bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), rgba(160,225,255,.12) 55%, rgba(160,225,255,.03));
  box-shadow: inset 0 0 6px rgba(190,240,255,.35);
  animation: rise linear forwards;
  will-change: transform, opacity;
}
@keyframes rise {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  8%   { opacity: .9; }
  55%  { transform: translate(var(--driftx, 14px), -55vh) scale(.95); }
  100% { transform: translate(calc(var(--driftx, 14px) * -0.6), -108vh) scale(1.08); opacity: 0; }
}

/* marine snow — tiny drifting particles for depth */
#snow { position: absolute; inset: 0; pointer-events: none; }
.flake {
  position: absolute; top: -10px; border-radius: 50%;
  background: rgba(200, 228, 245, .5);
  animation: snowfall linear forwards;
  will-change: transform, opacity;
}
@keyframes snowfall {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .55; }
  90%  { opacity: .4; }
  100% { transform: translate(var(--sway, 20px), 106vh); opacity: 0; }
}

/* silhouette sea life spawned by JS */
#critters { position: absolute; inset: 0; pointer-events: none; }
.critter {
  position: absolute;
  animation: swim linear forwards;
  will-change: transform;
}
.critter svg { display: block; width: 100%; height: auto; overflow: visible; transform: scaleX(-1); }
/* the artwork faces left; default motion is left→right, so flip the art —
   rtl reverses the motion, so those keep the original left-facing art */
.critter.rtl { animation-direction: reverse; }
.critter.rtl svg { transform: none; }
.critter.jelly svg { transform: none; }
.critter .bob { animation: bob 5s ease-in-out infinite; transform-origin: center; }
.critter.far { filter: blur(1.6px); }
.critter.near { filter: blur(.4px); }
@keyframes swim { from { transform: translateX(-16vw); } to { transform: translateX(114vw); } }
@keyframes bob { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
.critter.rtl .bob { animation-name: bobR; }
@keyframes bobR { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
.critter.jelly { animation-name: jellyDrift; }
@keyframes jellyDrift {
  from { transform: translate(-10vw, 10vh); }
  to   { transform: translate(114vw, -16vh); }
}
.critter .pulse { animation: jellyPulse 3.4s ease-in-out infinite; transform-origin: 50% 30%; }
@keyframes jellyPulse { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(.92, 1.08); } }

/* distant reef silhouette */
.reef { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 14vh, 160px); pointer-events: none; }
.reef svg { width: 100%; height: 100%; display: block; }

/* kelp forest — dark backlit silhouettes, generated at runtime */
.kelp { position: absolute; bottom: -4px; width: clamp(160px, 24vw, 300px); height: clamp(340px, 58vh, 680px); pointer-events: none; }
.kelp-l { left: -40px; }
.kelp-r { right: -40px; }
.kelp svg { width: 100%; height: 100%; }
.kelp .blade { transform-origin: 50% 100%; animation: kelpSway 10s ease-in-out infinite alternate; }
@keyframes kelpSway {
  from { transform: rotate(-1.1deg) skewX(-.8deg); }
  to   { transform: rotate(1.2deg) skewX(.9deg); }
}

.sand {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: linear-gradient(180deg, rgba(20,24,20,0) 0%, rgba(8,14,16,.55) 60%, rgba(4,9,12,.8) 100%);
}

/* ============================================================
   WAVE WIPE TRANSITION
   ============================================================ */
#wave-wipe {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  transform: translateY(105%);
  background: linear-gradient(180deg, #0ac2c2 0%, #067196 30%, #03395e 100%);
}
#wave-wipe .wave-crest {
  position: absolute; top: -58px; left: 0; width: 200%; height: 60px;
  fill: #0ac2c2;
  animation: crestSlide 1.2s linear infinite;
}
@keyframes crestSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#wave-wipe.washing { animation: wash 1.15s cubic-bezier(.4,0,.35,1) forwards; }
@keyframes wash {
  0%   { transform: translateY(105%); }
  38%  { transform: translateY(-2%); }
  60%  { transform: translateY(-2%); }
  100% { transform: translateY(-110%); }
}

/* ============================================================
   LAYOUT / SCREENS
   ============================================================ */
#app { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; }

.screen {
  display: none; flex: 1; flex-direction: column; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(18px + var(--safe-b));
  gap: 14px; width: 100%; max-width: 560px; margin: 0 auto;
  animation: surface .5s ease-out;
}
.screen.active { display: flex; }
@keyframes surface { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

#screen-game { max-width: 900px; padding-left: 8px; padding-right: 8px; gap: 6px; }

.hidden { display: none !important; }

/* ============================================================
   TYPE & PANELS
   ============================================================ */
.screen-title {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.7rem;
  margin: 0; text-align: center;
  text-shadow: 0 2px 14px rgba(93,242,226,.35);
}
.panel {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(139,233,255,.12);
  display: flex; flex-direction: column; gap: 12px;
}
.panel-title { font-family: 'Outfit', sans-serif; margin: 0; font-size: 1.1rem; color: var(--glow-2); }

/* ============================================================
   LOGO
   ============================================================ */
.logo-wrap { text-align: center; margin-top: 4vh; }
.logo { margin: 0; line-height: .95; }
.logo .row { display: flex; justify-content: center; gap: .02em; }
.logo .ltr {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 13vw, 4.6rem);
  color: var(--ink);
  text-shadow:
    0 0 18px rgba(93,242,226,.5),
    0 3px 0 rgba(2,20,40,.9),
    0 8px 24px rgba(0,0,0,.5);
  animation: buoy 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.28s);
  display: inline-block;
}
.logo .row2 .ltr {
  font-size: clamp(3.4rem, 18vw, 6rem);
  background: linear-gradient(180deg, #aef7ff 0%, #5df2e2 45%, #1e9fd4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(93,242,226,.45)) drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
@keyframes buoy { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(1.4deg); } }
.tagline { color: var(--ink-dim); margin: 10px 0 0; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; font-weight: 700; }

/* ============================================================
   BUTTONS & INPUTS
   ============================================================ */
.btn {
  border: none; border-radius: 999px; cursor: pointer;
  font-weight: 800; font-size: 1rem; color: var(--ink);
  padding: 12px 20px;
  background: rgba(139,233,255,.12);
  border: 1px solid rgba(139,233,255,.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.95); }
.btn:disabled { opacity: .38; pointer-events: none; }
.btn-emoji { font-size: 1.15em; margin-right: 2px; }

.btn-primary {
  background: linear-gradient(180deg, #23d5c0 0%, #0e9fb0 100%);
  border: 1px solid rgba(174,247,255,.6);
  color: #032430;
  box-shadow: 0 6px 20px rgba(35,213,192,.35), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:not(:disabled):hover { filter: brightness(1.08); }
.btn-big { font-size: 1.15rem; padding: 15px 26px; }
.btn-secondary {
  background: linear-gradient(180deg, rgba(139,233,255,.22), rgba(139,233,255,.08));
  border: 1px solid rgba(139,233,255,.4);
}
.btn-gold {
  background: linear-gradient(180deg, #ffe29a 0%, #ffb84d 100%);
  color: #4a2c00; border: 1px solid #ffedb8;
  box-shadow: 0 6px 24px rgba(255,209,102,.5), inset 0 1px 0 rgba(255,255,255,.6);
  animation: goldPulse 1.4s ease-in-out infinite;
}
@keyframes goldPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(255,209,102,.45); transform: scale(1); }
  50%     { box-shadow: 0 6px 34px rgba(255,209,102,.85); transform: scale(1.04); }
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-dim); font-weight: 700; }
.btn-ghost.danger { color: #ff9d90; }
.btn-chip { padding: 10px 14px; font-size: .95rem; }

.text-input {
  width: 100%; padding: 13px 16px; border-radius: 14px;
  border: 1px solid rgba(139,233,255,.3);
  background: rgba(2, 16, 33, .55); color: var(--ink);
  font-size: 1.05rem; font-weight: 700; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.text-input:focus { border-color: var(--glow); box-shadow: 0 0 0 3px rgba(93,242,226,.18); }
.text-input::placeholder { color: #567b96; font-weight: 600; }
.field-label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

.home-panel { gap: 10px; }
.home-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.join-row { display: flex; gap: 10px; }
.join-row .btn { white-space: nowrap; }
.code-input { text-transform: uppercase; letter-spacing: .12em; font-family: 'Outfit', sans-serif; }
.credits { color: #4e7591; font-size: .78rem; margin-top: auto; text-align: center; }

/* avatar picker */
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-opt {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 27px;
  background: rgba(2,16,33,.5); border: 2px solid rgba(139,233,255,.2);
  cursor: pointer; transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s, background .18s;
}
.avatar-opt.sel {
  border-color: var(--glow); background: rgba(93,242,226,.16);
  transform: scale(1.16) rotate(-6deg);
  box-shadow: 0 0 18px rgba(93,242,226,.45);
}

/* ============================================================
   LOBBY
   ============================================================ */
.lobby-head { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.party-code-wrap { text-align: center; }
.party-code-label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; }
.party-code {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 9vw, 2.8rem); letter-spacing: .08em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(255,209,102,.5), 0 3px 0 rgba(2,20,40,.8);
}
.share-feedback { min-height: 1.2em; color: var(--glow); font-weight: 700; font-size: .85rem; }

.lobby-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lobby-player {
  display: flex; align-items: center; gap: 12px;
  background: rgba(2,16,33,.4); border: 1px solid rgba(139,233,255,.14);
  border-radius: 14px; padding: 10px 14px;
  animation: splashIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes splashIn { from { opacity: 0; transform: translateX(-24px) scale(.9); } to { opacity: 1; transform: none; } }
.lobby-player .av { font-size: 30px; animation: bob 3s ease-in-out infinite; }
.lobby-player .nm { font-weight: 800; font-size: 1.05rem; flex: 1; }
.lobby-player .tag { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(93,242,226,.15); color: var(--glow); }
.lobby-player .tag.bot { background: rgba(255,126,103,.18); color: var(--coral); }
.lobby-player .tag.off { background: rgba(255,255,255,.08); color: #7d95a8; }
.lobby-player .kick { background: none; border: none; color: #ff9d90; font-size: 1.05rem; cursor: pointer; padding: 4px 8px; }
.lobby-host-tools { display: flex; flex-direction: column; gap: 10px; }
.lobby-wait { color: var(--ink-dim); text-align: center; font-weight: 700; }
.dots::after { content: ''; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ============================================================
   GAME · TOP
   ============================================================ */
.game-top { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.round-chip, .wild-chip {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px;
  padding: 6px 10px; text-align: center; min-width: 54px;
  display: flex; flex-direction: column; justify-content: center;
}
.round-label { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; }
.round-value, .wild-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.wild-chip { border-color: rgba(255,209,102,.4); }
.wild-value { color: var(--gold); text-shadow: 0 0 12px rgba(255,209,102,.6); animation: wildShimmer 2.6s ease-in-out infinite; }
@keyframes wildShimmer { 0%,100% { text-shadow: 0 0 8px rgba(255,209,102,.4); } 50% { text-shadow: 0 0 20px rgba(255,209,102,.95); } }

.opponents { flex: 1; display: flex; gap: 6px; justify-content: center; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.opponents::-webkit-scrollbar { display: none; }
.opp {
  position: relative;
  background: var(--panel); border: 1.5px solid var(--panel-line); border-radius: 14px;
  padding: 5px 10px 6px; text-align: center; min-width: 76px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.opp .av { font-size: 24px; line-height: 1.15; display: block; }
.opp .nm { font-size: .72rem; font-weight: 800; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp .meta { font-size: .66rem; color: var(--ink-dim); font-weight: 700; }
.opp .meta b { color: var(--glow-2); }
.opp.turn {
  border-color: var(--glow);
  box-shadow: 0 0 22px rgba(93,242,226,.5), inset 0 0 12px rgba(93,242,226,.12);
  transform: translateY(-2px);
  animation: oppPulse 1.6s ease-in-out infinite;
}
@keyframes oppPulse { 0%,100% { box-shadow: 0 0 14px rgba(93,242,226,.35); } 50% { box-shadow: 0 0 28px rgba(93,242,226,.75); } }
.opp.me { border-style: dashed; }
.opp.out { border-color: rgba(255,209,102,.65); }
.opp.gone { opacity: .45; filter: grayscale(.7); }
.opp .outflag {
  /* stays inside the chip so the scroll container can't clip it */
  position: absolute; top: 2px; right: 2px; font-size: .56rem; font-weight: 800;
  background: var(--gold); color: #4a2c00; border-radius: 999px; padding: 2px 6px;
  box-shadow: 0 2px 10px rgba(255,209,102,.6); letter-spacing: .05em;
  animation: splashIn .4s cubic-bezier(.34,1.56,.64,1);
  z-index: 3;
}
.opp .emote-bubble {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; pointer-events: none;
  animation: emotePop 2.4s cubic-bezier(.34,1.56,.64,1) forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
  z-index: 5;
}
@keyframes emotePop {
  0%   { opacity: 0; transform: scale(.2) translateY(10px); }
  12%  { opacity: 1; transform: scale(1.3) translateY(0); }
  22%  { transform: scale(1.05) translateY(-1px); }
  80%  { opacity: 1; transform: scale(1.05) translateY(-4px); }
  100% { opacity: 0; transform: scale(.85) translateY(-10px); }
}

/* ============================================================
   GAME · TABLE
   ============================================================ */
.table { position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; }
.turn-banner {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--ink-dim); text-align: center; min-height: 1.5em;
  transition: color .3s;
}
.turn-banner.yours {
  color: var(--glow);
  text-shadow: 0 0 16px rgba(93,242,226,.6);
  animation: yourTurnBounce .6s cubic-bezier(.34,1.56,.64,1);
  font-size: 1.25rem;
}
@keyframes yourTurnBounce { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.piles { display: flex; gap: clamp(18px, 6vw, 44px); align-items: flex-start; }
.pile-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pile {
  position: relative; width: var(--cw); aspect-ratio: 5 / 7;
  border-radius: 12px; cursor: pointer;
  transition: transform .2s;
}
.pile .card { position: absolute; inset: 0; margin: 0; }
.pile-label { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.pile.stock::before, .pile.stock::after { /* stacked deck illusion */
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: #072c4d; border: 1.5px solid rgba(139,233,255,.25);
  z-index: -1;
}
.pile.stock::before { transform: translate(3px, 3px); }
.pile.stock::after  { transform: translate(6px, 6px); opacity: .7; }
.pile.drawable { animation: pilePulse 1.5s ease-in-out infinite; }
@keyframes pilePulse {
  0%,100% { filter: drop-shadow(0 0 4px rgba(93,242,226,.25)); transform: translateY(0); }
  50%     { filter: drop-shadow(0 0 18px rgba(93,242,226,.8)); transform: translateY(-4px); }
}
.pile:active { transform: scale(.94); }
.discard-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; opacity: .5;
  border: 2px dashed rgba(139,233,255,.3); border-radius: 12px; }

#fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.fly-card { position: absolute; z-index: 61; transition: transform .5s cubic-bezier(.3,.9,.35,1.05), opacity .5s; will-change: transform; }

/* toasts — fixed overlay so chat previews & events show on every screen */
.toasts {
  position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 86px);
  left: 50%; transform: translateX(-50%); z-index: 66;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  pointer-events: none; width: 100%; max-width: 560px;
}
.toast {
  background: rgba(2,16,33,.85); border: 1px solid var(--panel-line);
  color: var(--ink); font-weight: 700; font-size: .82rem;
  border-radius: 999px; padding: 7px 16px;
  animation: toastIn .35s cubic-bezier(.34,1.56,.64,1), toastOut .4s ease-in 2.4s forwards;
  backdrop-filter: blur(6px);
  max-width: 92%; text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  width: var(--cw); aspect-ratio: 5 / 7;
  border-radius: 10px; position: relative; flex-shrink: 0;
  background: linear-gradient(168deg, #fdfcf7 0%, #edf6f4 70%, #dceeee 100%);
  border: 1.5px solid #b9d4d8;
  box-shadow: 0 3px 10px rgba(0, 8, 20, .45);
  color: var(--navy-suit);
  font-weight: 800;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.card .corner { position: absolute; top: 5px; left: 6px; line-height: .95; text-align: center; }
.card .corner .r { display: block; font-size: calc(var(--cw) * .27); font-family: 'Outfit', sans-serif; }
.card .corner .s { display: block; font-size: calc(var(--cw) * .2); }
.card .corner.br { top: auto; left: auto; bottom: 5px; right: 6px; transform: rotate(180deg); }
.card .pip {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--cw) * .48);
  opacity: .92;
}
.card.red { color: var(--red-suit); }
.card.joker { color: #7a3ff2; }
.card.joker .pip { font-size: calc(var(--cw) * .52); }
.card.joker .corner .r { font-size: calc(var(--cw) * .2); letter-spacing: 0; }

/* wild glow — bioluminescent */
.card.wild {
  border-color: #ffd166;
  box-shadow: 0 0 0 1.5px rgba(255,209,102,.8), 0 0 16px rgba(255,209,102,.55), 0 3px 10px rgba(0,8,20,.45);
  animation: wildGlow 2s ease-in-out infinite;
}
@keyframes wildGlow {
  0%,100% { box-shadow: 0 0 0 1.5px rgba(255,209,102,.7), 0 0 10px rgba(255,209,102,.35), 0 3px 10px rgba(0,8,20,.45); }
  50%     { box-shadow: 0 0 0 1.5px rgba(255,225,150,1), 0 0 22px rgba(255,209,102,.85), 0 3px 10px rgba(0,8,20,.45); }
}
.card.wild::after {
  content: "🪼"; position: absolute; top: 3px; right: 5px; font-size: calc(var(--cw) * .17);
  filter: drop-shadow(0 0 4px rgba(255,209,102,.9));
}

/* card back */
.card.back {
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(93,242,226,.25), transparent 65%),
    repeating-linear-gradient(-35deg, rgba(139,233,255,.09) 0 7px, transparent 7px 15px),
    linear-gradient(165deg, #0a4a77 0%, #063056 55%, #04223f 100%);
  border-color: rgba(139,233,255,.45);
  color: var(--ink);
}
.card.back .back-art { position: absolute; inset: 4px; border: 1.5px solid rgba(139,233,255,.35); border-radius: 7px;
  display: grid; place-items: center; font-size: calc(var(--cw) * .38); }
.card.back .back-art span { filter: drop-shadow(0 0 6px rgba(93,242,226,.6)); }

/* meld highlighting in hand */
.card.melded { --meldc: var(--glow); box-shadow: 0 0 0 2px var(--meldc), 0 0 14px color-mix(in srgb, var(--meldc) 60%, transparent), 0 3px 10px rgba(0,8,20,.45); }
.card.melded.m1 { --meldc: #5df2e2; }
.card.melded.m2 { --meldc: #86a8ff; }
.card.melded.m3 { --meldc: #7ef29a; }
.card.melded.m4 { --meldc: #f2a2ff; }
.card.melded::before {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -7px; height: 4px;
  background: var(--meldc); border-radius: 4px;
  box-shadow: 0 0 8px var(--meldc);
}

/* ============================================================
   GAME · BOTTOM / HAND
   ============================================================ */
.game-bottom {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-bottom: var(--safe-b);
}
.hand-info { min-height: 1.3em; font-size: .82rem; font-weight: 700; color: var(--ink-dim); text-align: center; }
#meld-status b { color: var(--glow); }
#meld-status .can-out { color: var(--gold); animation: wildShimmer 1.8s infinite; }

.hand {
  display: flex; justify-content: center; align-items: flex-end;
  width: 100%; min-height: calc(var(--cw) * 1.55);
  padding: 14px 10px 6px;
  position: relative;
}
.hand .card {
  margin-left: var(--overlap, -26px);
  cursor: pointer;
  transform: translateY(var(--fan-y, 0)) rotate(var(--fan-r, 0deg));
  z-index: var(--z, 1);
  touch-action: none;
}
.hand .card:first-child { margin-left: 0; }
.hand .card.sel {
  transform: translateY(calc(var(--fan-y, 0px) - 20px)) rotate(var(--fan-r, 0deg)) scale(1.06);
  z-index: 40 !important;
  box-shadow: 0 0 0 2.5px var(--glow-2), 0 0 22px rgba(139,233,255,.7), 0 10px 24px rgba(0,8,20,.6);
}
.hand .card.dragging { transition: none; z-index: 50 !important; opacity: .92; }
.hand .card.dealt { animation: dealIn .5s cubic-bezier(.3,.9,.35,1.05) backwards; animation-delay: var(--deal-delay, 0s); }
@keyframes dealIn {
  from { transform: translate(0, -55vh) rotate(180deg) scale(.6); opacity: 0; }
  to   { transform: translateY(var(--fan-y, 0)) rotate(var(--fan-r, 0deg)); opacity: 1; }
}
.hand .card.drawn { animation: drawnPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes drawnPop { 0% { transform: translateY(-30px) scale(1.25); } 100% { transform: translateY(var(--fan-y,0)) rotate(var(--fan-r,0deg)); } }

.action-bar { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.emote-tray {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 8px 12px;
  animation: splashIn .3s cubic-bezier(.34,1.56,.64,1);
}
.emote-tray button { background: none; border: none; font-size: 26px; cursor: pointer; padding: 4px; transition: transform .15s; }
.emote-tray button:active { transform: scale(1.5); }

/* ============================================================
   OVERLAYS (round end, game end, rules)
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 18px; background: rgba(1, 8, 18, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.overlay.active { display: flex; animation: overlayIn .35s ease-out; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.overlay-card {
  width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(6,48,86,.97), rgba(3,24,46,.97));
  border: 1px solid var(--panel-line); border-radius: 22px;
  padding: 22px 18px calc(18px + var(--safe-b));
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(139,233,255,.15);
  animation: cardRise .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cardRise { from { transform: translateY(40px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.overlay-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.roundend-sub { text-align: center; color: var(--ink-dim); font-weight: 700; margin: -6px 0 0; }

.roundend-results { display: flex; flex-direction: column; gap: 10px; }
.re-player {
  background: rgba(2,16,33,.5); border: 1px solid rgba(139,233,255,.14);
  border-radius: 14px; padding: 10px 12px;
  animation: splashIn .4s cubic-bezier(.34,1.56,.64,1) backwards;
}
.re-player.winner-row { border-color: rgba(255,209,102,.6); box-shadow: 0 0 18px rgba(255,209,102,.25); }
.re-head { display: flex; align-items: center; gap: 8px; }
.re-head .av { font-size: 22px; }
.re-head .nm { font-weight: 800; flex: 1; font-size: .95rem; }
.re-head .pts { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--coral); }
.re-head .pts.zero { color: var(--glow); }
.re-head .total { font-size: .72rem; color: var(--ink-dim); font-weight: 700; }
.re-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.re-meld { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(93,242,226,.1); border: 1px solid rgba(93,242,226,.35); }
.re-dead { display: flex; gap: 2px; padding: 3px; border-radius: 8px; border: 1px dashed rgba(255,126,103,.5); }
.re-cards .card { --cw: 30px; border-radius: 5px; box-shadow: none; }
.re-cards .card .pip { font-size: 13px; }
.re-cards .card .corner .r { font-size: 10px; }
.re-cards .card .corner .s { font-size: 8px; }
.re-cards .card.wild::after { display: none; }
.re-cards .card.wild { animation: none; }

.winner-splash { text-align: center; }
.winner-splash .crown { font-size: 60px; display: block; animation: buoy 2.6s ease-in-out infinite; }
.winner-splash .who { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.9rem; color: var(--gold);
  text-shadow: 0 0 24px rgba(255,209,102,.6); }
.winner-splash .sub { color: var(--ink-dim); font-weight: 700; }

.rules-card .rules-body { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; line-height: 1.5; color: #cfe7f5; }
.rules-body b { color: var(--glow-2); }

/* connection banner */
.conn-banner {
  position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 95; background: rgba(50, 12, 12, .92); border: 1px solid rgba(255,126,103,.5);
  color: #ffc9c0; font-weight: 700; font-size: .85rem;
  padding: 9px 18px; border-radius: 999px;
  animation: toastIn .3s ease-out;
  max-width: 92vw; text-align: center;
}
.conn-banner.ok { background: rgba(6, 46, 40, .92); border-color: rgba(93,242,226,.5); color: #b8fff4; }

/* bubble confetti on win */
.party-bubble {
  position: fixed; bottom: -30px; z-index: 96; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.8), var(--pb, rgba(93,242,226,.5)) 60%, transparent);
  animation: rise 3.2s ease-out forwards;
}

/* ============================================================
   BIGGER SCREENS
   ============================================================ */
@media (min-width: 700px) {
  :root { --cw: clamp(70px, 7.5vw, 96px); }
  .opp .av { font-size: 30px; }
  .opp { min-width: 96px; }
  .hand { padding-bottom: 10px; }
}
@media (max-height: 640px) {
  .table { min-height: 130px; }
  .logo-wrap { margin-top: 1vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ============================================================
   REFINEMENT PASS · calmer motion, illustrated avatars
   ============================================================ */
/* subtler logo float (no cartoon wobble) */
@keyframes buoy { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.logo .ltr { animation-duration: 4.6s; }
.logo .row1 { letter-spacing: .1em; }
.logo .row1 .ltr { font-weight: 700; }

/* gold button: glow pulse only, no bounce */
@keyframes goldPulse {
  0%,100% { box-shadow: 0 6px 22px rgba(255,209,102,.4); }
  50%     { box-shadow: 0 6px 34px rgba(255,209,102,.8); }
}

/* illustrated creature avatars */
.cre { display: inline-block; line-height: 0; }
.cre svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
.cre-txt { font-size: 26px; line-height: 1.1; }

.avatar-opt { width: 56px; height: 56px; }
.avatar-opt .cre { width: 44px; height: 44px; }
.avatar-opt .cre-txt { font-size: 27px; }

.lobby-player .av { animation: none; line-height: 0; }
.lobby-player .av .cre { width: 40px; height: 40px; }

.opp { padding-top: 7px; }
.opp .av { line-height: 0; display: flex; justify-content: center; }
.opp .av .cre { width: 34px; height: 34px; }
.opp .av .cre-txt { font-size: 24px; line-height: 1.2; }
.opp .nm { display: block; margin-top: 3px; }

.re-head .av { line-height: 0; }
.re-head .av .cre { width: 28px; height: 28px; }
.re-head .medal { font-size: 18px; margin-right: 2px; }

.winner-splash .who { display: flex; align-items: center; justify-content: center; gap: 10px; }
.winner-splash .who .cre { width: 46px; height: 46px; }

.turn-banner .cre { width: 22px; height: 22px; vertical-align: -5px; margin-right: 3px; }
.roundend-sub .cre { width: 20px; height: 20px; vertical-align: -4px; }

/* hidden opponent score until they go out */
.opp .meta .hid { color: #55788f; letter-spacing: .04em; }

/* slightly deeper, less saturated wave wipe */
#wave-wipe { background: linear-gradient(180deg, #0b93a6 0%, #075d84 30%, #032c4c 100%); }
#wave-wipe .wave-crest { fill: #0b93a6; }

/* room inside the opponents scroll strip so the active-turn glow and
   chip tops are never clipped (it is an overflow container) */
.opponents { padding: 8px 3px; margin: -6px 0; }
.opp.turn { transform: none; }

/* narrow phones: all four player chips share the row — nothing scrolls off */
@media (max-width: 520px) {
  .game-top { gap: 5px; }
  .round-chip, .wild-chip { min-width: 42px; padding: 4px 5px; }
  .round-value, .wild-value { font-size: 1.05rem; }
  .opponents { gap: 4px; overflow: visible; }
  .opp { min-width: 0; flex: 1 1 0; padding: 5px 3px 5px; }
  .opp .av .cre { width: 26px; height: 26px; }
  .opp .av .cre-txt { font-size: 19px; }
  .opp .nm { font-size: .6rem; max-width: 100%; }
  .opp .meta { font-size: .56rem; }
  .opp .outflag { font-size: .5rem; padding: 1px 5px; }
}

/* ============================================================
   REEF CHAT
   ============================================================ */
.chat-scrim { position: fixed; inset: 0; z-index: 84; background: rgba(1,8,18,.45); }
.chat-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: linear-gradient(180deg, rgba(6,48,86,.98), rgba(3,24,46,.99));
  border: 1px solid var(--panel-line); border-bottom: none;
  border-radius: 22px 22px 0 0;
  max-width: 560px; margin: 0 auto;
  padding: 12px 14px calc(10px + var(--safe-b));
  display: flex; flex-direction: column;
  box-shadow: 0 -18px 60px rgba(0,0,0,.55);
  animation: sheetUp .28s cubic-bezier(.3,.9,.35,1.05);
}
@keyframes sheetUp { from { transform: translateY(60%); opacity: .4; } to { transform: none; opacity: 1; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chat-close { background: none; border: none; color: var(--ink-dim); font-size: 1.1rem; cursor: pointer; padding: 4px 10px; }
.chat-msgs {
  overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
  min-height: 130px; max-height: 38dvh; overscroll-behavior: contain;
  padding: 2px;
}
.chat-empty { color: #55788f; font-size: .85rem; text-align: center; padding: 30px 0; }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; line-height: 1.35; animation: splashIn .25s ease-out; }
.chat-msg .cre { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.chat-msg .cre-txt { font-size: 16px; }
.chat-msg .body { min-width: 0; overflow-wrap: anywhere; }
.chat-msg .who { font-weight: 800; color: var(--glow-2); margin-right: 5px; }
.chat-msg.mine .who { color: var(--gold); }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1; font-size: 16px; padding: 11px 14px; }
.chat-send { padding: 10px 16px; }
.chat-badge {
  display: inline-block; margin-left: 5px;
  background: var(--coral-2); color: #fff; font-size: .68rem; font-weight: 800;
  border-radius: 999px; padding: 1px 6px; vertical-align: 2px;
}