/* ==========================================================================
   Screens: loading, main menu, multiplayer, lobby, game over
   ========================================================================== */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: auto;
}
.screen.screen-in { animation: fadeIn 0.35s var(--ease-out); }
.screen-dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5, 7, 18, 0.45), rgba(3, 4, 12, 0.88) 100%),
    linear-gradient(180deg, rgba(4, 5, 14, 0.5), rgba(4, 5, 14, 0.75));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.flex-spacer { flex: 1; }

/* ---------- Logo -------------------------------------------------------- */
.logo { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.rift-emblem { width: 7rem; height: 7rem; position: relative; filter: drop-shadow(0 0 1.2rem rgba(168, 120, 255, 0.55)); }
.rift-emblem svg { width: 100%; height: 100%; overflow: visible; }
.rift-emblem .ring { transform-origin: 60px 60px; }
.rift-emblem .ring-a { animation: spin 38s linear infinite; }
.rift-emblem .ring-b { animation: spin 24s linear infinite reverse; }
.rift-emblem .ring-c { animation: spin 60s linear infinite; }
.rift-emblem svg > path:first-of-type { animation: riftPulse 3.2s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes riftPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25) drop-shadow(0 0 6px #d8b8ff); } }

.logo-word {
  position: relative;
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.6rem;
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffaf0 0%, #f7e2a4 30%, #e0b156 52%, #9c6a24 62%, #e9c77c 80%, #fff0c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.18rem 0 rgba(40, 20, 0, 0.9)) drop-shadow(0 0 1.4rem rgba(232, 180, 90, 0.45));
}
.logo-word::after {
  /* moving highlight sweep */
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.95) 48%, transparent 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logoSweep 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes logoSweep { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }
.logo-sub {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.72em;
  padding-left: 0.72em;
  text-transform: uppercase;
  color: #d9c9ff;
  text-shadow: 0 0 0.8rem rgba(170, 120, 255, 0.8);
}
.logo-line { width: 3.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); position: relative; }
.logo-line.r { background: linear-gradient(-90deg, transparent, var(--gold)); }
.logo-line::after { content: ''; position: absolute; right: -0.2rem; top: -0.18rem; width: 0.38rem; height: 0.38rem; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0.4rem var(--gold); }
.logo-line.r::after { right: auto; left: -0.2rem; }
.logo-tagline { margin-top: 0.9rem; font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.logo-md .logo-word { font-size: 2.8rem; }
.logo-md .rift-emblem { width: 4.5rem; height: 4.5rem; }
.logo-md .logo-sub { font-size: 0.9rem; }

/* ---------- Loading ----------------------------------------------------- */
.screen-loading {
  z-index: 5;
  align-items: center;
  justify-content: center;
  background: #04050c;
  transition: opacity 0.6s ease, filter 0.6s ease;
}
.screen-loading.leaving { opacity: 0; filter: blur(6px); pointer-events: none; }
.load-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 35% at 50% 42%, rgba(120, 70, 230, 0.32), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(232, 170, 80, 0.12), transparent 70%),
    radial-gradient(circle at 20% 20%, rgba(60, 120, 255, 0.1), transparent 40%),
    #04050c;
}
.load-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 72%, #cbd 50%, transparent 51%), radial-gradient(1.5px 1.5px at 86% 64%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 86%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 44%, #dcf 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 36%, #fff 50%, transparent 51%);
  opacity: 0.7;
  animation: breathe 5s ease-in-out infinite;
}
.load-art { position: absolute; inset: 0; overflow: hidden; }
.load-art .art-img { transform: scale(1.06); animation: kenburns 24s ease-out forwards; }
.load-art .art-img.ready { opacity: 0.55; }
.load-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 40% at 50% 46%, rgba(4, 5, 12, 0.72), rgba(4, 5, 12, 0.2) 70%, transparent),
    linear-gradient(180deg, rgba(4, 5, 12, 0.55), rgba(4, 5, 12, 0.1) 35%, rgba(4, 5, 12, 0.85));
}
@keyframes kenburns { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.load-center { position: relative; display: flex; flex-direction: column; align-items: center; width: 30rem; max-width: 90vw; }
.load-center .logo { margin-bottom: 2.4rem; }
.load-bar {
  position: relative;
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(232, 193, 112, 0.35);
  overflow: hidden;
  box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.6);
}
.load-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #7a4cf0, #c79bff 45%, #f6d78e 85%, #fff6d6);
  box-shadow: 0 0 1rem rgba(200, 160, 255, 0.8);
}
.load-bar-glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
  mix-blend-mode: overlay;
}
.load-row { display: flex; justify-content: space-between; width: 100%; margin-top: 0.7rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.load-pct { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.load-tip { margin-top: 2.2rem; min-height: 2.6em; max-width: 26rem; text-align: center; color: var(--text-3); font-size: 0.86rem; font-style: italic; }
.load-tip.swap { animation: riseIn 0.5s var(--ease-out); }

/* ---------- Main menu --------------------------------------------------- */
.screen-menu { align-items: stretch; }
.menu-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 14, 0.94) 0%, rgba(4, 5, 14, 0.78) 26%, rgba(4, 5, 14, 0.15) 55%, rgba(4, 5, 14, 0) 70%),
    radial-gradient(ellipse 90% 90% at 65% 50%, transparent 50%, rgba(2, 3, 10, 0.75) 100%),
    linear-gradient(0deg, rgba(4, 5, 14, 0.8), transparent 22%);
}
.no-view .menu-vignette { background: radial-gradient(ellipse 60% 60% at 65% 45%, rgba(100, 60, 200, 0.25), transparent 70%), linear-gradient(90deg, rgba(4, 5, 14, 0.9), rgba(4, 5, 14, 0.4)); }
.menu-art { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 100%), linear-gradient(0deg, transparent, #000 20%); mask-image: linear-gradient(90deg, #000 25%, transparent 100%); }
.menu-art .art-img { object-position: 22% 50%; filter: saturate(0.95) brightness(0.8); }
.menu-art .art-img.ready { opacity: 0.3; }
.no-view .menu-art { width: 100%; -webkit-mask-image: none; mask-image: none; }
.no-view .menu-art .art-img.ready { opacity: 0.5; filter: none; }
.menu-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.menu-embers span {
  position: absolute;
  bottom: -2rem;
  width: var(--sz, 0.25rem);
  height: var(--sz, 0.25rem);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c8, #f2b24a 45%, transparent 70%);
  box-shadow: 0 0 0.6rem #f5c064;
  opacity: 0;
  animation: ember linear infinite;
}
.menu-embers span:nth-child(3n) { background: radial-gradient(circle, #f1e3ff, #a57bff 45%, transparent 70%); box-shadow: 0 0 0.6rem #b58cff; }
@keyframes ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  80% { opacity: 0.6; }
  100% { transform: translate(var(--drift, 2rem), -105vh); opacity: 0; }
}
.menu-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 32rem;
  padding: 3rem 0 4rem 5rem;
  gap: 1.6rem;
  animation: riseIn 0.7s var(--ease-out);
}
.menu-left .logo { align-items: center; width: 100%; margin-bottom: 0.4rem; }
.menu-name { width: 100%; }
.menu-name-row { display: flex; gap: 0.5rem; }
.menu-name-row .input { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; font-size: 1.05rem; }
.dice { --btn-h: 2.6rem; font-size: 1.2rem; }
.menu-buttons { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; }
.menu-btn { justify-content: flex-start; text-align: left; width: 100%; gap: 0.9rem; }
.menu-btn.btn-lg { --btn-h: 4rem; }
.menu-btn-ico {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 1rem;
  flex: none;
}
.btn-primary .menu-btn-ico { background: rgba(80, 45, 0, 0.18); box-shadow: inset 0 0 0 1px rgba(80, 45, 0, 0.35); }
.menu-btn-text { display: flex; flex-direction: column; gap: 0.12rem; flex: 1; }
.menu-btn-label { font-size: 1.05rem; }
.menu-btn-sub { font-family: var(--font-body); text-transform: none; letter-spacing: 0.01em; font-weight: 500; font-size: 0.78rem; opacity: 0.75; }
.menu-btn-arrow { font-size: 1.6rem; opacity: 0.4; transition: transform 0.2s var(--ease-out), opacity 0.2s; font-family: var(--font-body); }
.menu-btn:hover .menu-btn-arrow { transform: translateX(0.25rem); opacity: 0.9; }
.menu-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.menu-btn-row .menu-btn { --btn-h: 3rem; }
.menu-btn-row .menu-btn-ico { width: 1.8rem; height: 1.8rem; }
.menu-fast { align-self: flex-start; }
.menu-btn.attention { animation: pulseGlow 2.2s ease-in-out infinite; }
.new-badge {
  position: absolute; top: -0.6rem; right: -0.4rem; padding: 0.12rem 0.45rem; border-radius: 999px;
  background: linear-gradient(180deg, #b98cff, #6a3fd8); color: #fff; font-family: var(--font-body); font-size: 0.58rem;
  font-weight: 800; letter-spacing: 0.04em; text-transform: none; box-shadow: 0 0 0.8rem rgba(170, 120, 255, 0.7); pointer-events: none;
}
.menu-footer {
  position: absolute;
  left: 5rem;
  right: 2rem;
  bottom: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: var(--text-3);
  letter-spacing: 0.05em;
}
.menu-footer-keys { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.menu-footer-keys .kbd { margin-left: 0.5rem; }

.spotlight {
  position: absolute;
  right: 2.2rem;
  bottom: 3.8rem;
  width: 23rem;
  padding: 1rem 1.1rem 1.1rem;
  animation: riseIn 0.8s 0.2s var(--ease-out) both;
}
.spot-inner { animation: fadeIn 0.6s ease; }
.spot-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.spot-body { display: flex; gap: 0.9rem; align-items: center; }
.spot-portrait { width: 5.4rem; height: 5.4rem; border-radius: 0.5rem; flex: none; border: 1px solid rgba(232, 193, 112, 0.45); font-size: 1.3rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6); }
.spot-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); line-height: 1.15; }
.spot-cost { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 800; margin: 0.2rem 0 0.4rem; }
.spot-traits { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.spot-ability { margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-2); }
.spot-lore { margin-top: 0.75rem; font-size: 0.8rem; font-style: italic; color: var(--text-3); line-height: 1.45; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.5rem 0.16rem 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid color-mix(in srgb, var(--chip, #e8c170) 55%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.chip-ico { font-size: 0.85rem; }

/* ---------- Shared screen header / cards --------------------------------- */
.screen-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.screen-title { margin: 0; font-size: 2rem; flex: 1; }
.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.card-title .ico { color: var(--gold); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.card-head .card-title { margin: 0; }
.tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.08rem 0.45rem;
  border-radius: 0.25rem;
  background: rgba(93, 224, 138, 0.14);
  border: 1px solid rgba(93, 224, 138, 0.4);
  color: #9ff0bb;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tag.private { background: rgba(179, 79, 255, 0.14); border-color: rgba(179, 79, 255, 0.45); color: #dcb3ff; }

/* ---------- Multiplayer ----------------------------------------------------- */
.screen-mp { align-items: center; justify-content: center; }
.mp-wrap { position: relative; width: min(66rem, calc(100vw - 4rem)); animation: riseIn 0.45s var(--ease-out); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr 1.35fr; grid-template-rows: auto auto; gap: 1.1rem; }
.mp-card { padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.8rem; }
.mp-card .btn-block { margin-top: auto; }
.mp-rooms { grid-column: 3; grid-row: 1 / span 2; min-height: 26rem; }
.mp-grid > .mp-card:nth-child(1) { grid-column: 1 / span 2; }
.mp-grid > .mp-card:nth-child(2) { grid-column: 1 / span 2; }
.mp-desc, .mp-hint { margin: 0; color: var(--text-2); font-size: 0.86rem; }
.mp-hint { color: var(--text-3); font-size: 0.78rem; }
.mp-seg { align-self: flex-start; }
.mp-error {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  margin-bottom: 1rem; padding: 0.8rem 1rem; border-radius: 0.5rem;
  background: rgba(120, 20, 36, 0.35); border: 1px solid rgba(255, 110, 125, 0.45); color: #ffd3d8; font-size: 0.86rem;
}
.conn-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.78rem; font-weight: 700; color: var(--text-2);
}
.conn-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #888; }
.conn-pill.connecting .conn-dot { background: #ffcf5c; animation: breathe 0.9s infinite; }
.conn-pill.online .conn-dot { background: var(--green); box-shadow: 0 0 0.5rem var(--green); }
.conn-pill.error .conn-dot, .conn-pill.offline .conn-dot { background: var(--red); box-shadow: 0 0 0.5rem var(--red); }
.room-list { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; max-height: 26rem; padding-right: 0.2rem; }
.room-row {
  display: grid; grid-template-columns: 4.6rem 1fr auto auto; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.7rem; border-radius: 0.45rem; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.2s, border-color 0.2s, transform 0.2s; animation: riseIn 0.35s var(--ease-out) both;
}
.room-row:hover { background: rgba(232, 193, 112, 0.07); border-color: rgba(232, 193, 112, 0.3); transform: translateX(0.15rem); }
.room-row.closed { opacity: 0.55; }
.room-code { font-family: var(--font-num); font-weight: 900; font-size: 1.15rem; letter-spacing: 0.18em; color: var(--gold-hi); }
.room-host { font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; gap: 0.3rem; }
.room-host .ico { color: var(--gold); }
.room-meta { font-size: 0.72rem; color: var(--text-3); }
.room-count { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.72rem; color: var(--text-2); font-weight: 700; }
.room-seats { display: flex; gap: 0.15rem; }
.room-seats span { width: 0.42rem; height: 0.42rem; transform: rotate(45deg); background: rgba(255, 255, 255, 0.12); }
.room-seats span.on { background: var(--gold); box-shadow: 0 0 0.3rem var(--gold); }
.room-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; color: var(--text-2); text-align: center; font-size: 0.9rem; }
.room-empty-ico { font-size: 2.2rem; margin-bottom: 0.3rem; filter: grayscale(0.3); }
.spin-once { animation: spin 0.6s var(--ease-out); }

/* ---------- Lobby ------------------------------------------------------------- */
.screen-lobby { align-items: center; justify-content: center; }
.lobby-wrap { position: relative; width: min(72rem, calc(100vw - 4rem)); animation: riseIn 0.45s var(--ease-out); }
.lobby-code { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.7rem 0.5rem 1rem; }
.lobby-code-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; }
.lobby-code-value { font-family: var(--font-num); font-weight: 900; font-size: 1.9rem; letter-spacing: 0.3em; color: var(--gold-hi); text-shadow: 0 0 1rem rgba(232, 193, 112, 0.5); user-select: text; -webkit-user-select: text; }
.btn.copied { border-color: var(--green); color: #b6ffcf; }
.lobby-main { display: grid; grid-template-columns: 1fr 22rem; gap: 1.1rem; }
.lobby-seats, .lobby-chat { padding: 1.2rem 1.3rem 1.3rem; }
.lobby-count { margin-left: 0.4rem; color: var(--text-2); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0; }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; }
.seat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1rem 0.6rem 0.9rem;
  border-radius: 0.55rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(232, 193, 112, 0.2); text-align: center; transition: transform 0.2s var(--ease-out), border-color 0.2s, background 0.2s;
}
.seat.fresh { animation: popIn 0.4s var(--ease-back); }
.seat:hover { transform: translateY(-0.15rem); border-color: rgba(232, 193, 112, 0.45); }
.seat.you { border-color: var(--gold); box-shadow: 0 0 1.1rem rgba(232, 193, 112, 0.22), inset 0 0 1.2rem rgba(232, 193, 112, 0.08); }
.seat.empty { border-style: dashed; background: rgba(255, 255, 255, 0.015); color: var(--text-3); }
.seat.empty.can-add { cursor: pointer; }
.seat.empty.can-add:hover { background: rgba(232, 193, 112, 0.06); color: var(--gold-hi); }
.seat.offline { opacity: 0.55; }
.seat-avatar {
  position: relative; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--av, #777) 80%, #fff), var(--av, #555) 55%, color-mix(in srgb, var(--av, #444) 60%, #000));
  border: 2px solid rgba(255, 255, 255, 0.25); font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.45);
}
.seat-avatar .ico { font-size: 1.5rem; }
.seat-avatar.empty { background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 255, 255, 0.15); color: var(--text-3); }
.seat.bot .seat-avatar { background: radial-gradient(circle at 35% 30%, #5d6b8f, #2c3350 70%); }
.seat-crown { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 1.1rem; filter: drop-shadow(0 0 0.35rem rgba(232, 193, 112, 0.9)); }
.seat-name { font-weight: 700; font-size: 0.9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-sub { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.seat-remove {
  position: absolute; top: 0.35rem; right: 0.35rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid rgba(255, 110, 125, 0.5);
  background: rgba(60, 10, 20, 0.7); color: #ffb3bc; display: grid; place-items: center; cursor: pointer; font-size: 0.7rem; opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.seat:hover .seat-remove { opacity: 1; }
.seat-remove:hover { transform: scale(1.15); background: rgba(120, 20, 36, 0.9); }
.you-tag {
  margin-left: 0.35rem; padding: 0.02rem 0.32rem; border-radius: 0.2rem; background: var(--gold); color: #2a1a04;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.12em;
}
.lobby-host { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.lobby-wait { display: flex; align-items: center; gap: 0.7rem; color: var(--text-2); font-size: 0.9rem; padding: 0.6rem 0; }
.spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid rgba(232, 193, 112, 0.25); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
.lobby-chat { display: flex; flex-direction: column; min-height: 25rem; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; min-height: 12rem; max-height: 22rem; padding: 0.6rem; border-radius: 0.4rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.86rem; user-select: text; -webkit-user-select: text; }
.chat-line { animation: riseIn 0.25s var(--ease-out); word-break: break-word; }
.chat-line.system { color: var(--text-3); font-style: italic; }
.chat-from { font-weight: 800; }
.chat-row { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.chat-row .input { height: 2.2rem; font-size: 0.86rem; }

/* ---------- Game over ------------------------------------------------------------- */
.screen-gameover { align-items: center; justify-content: center; z-index: 5; }
.go-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(5, 6, 16, 0.55), rgba(2, 3, 9, 0.92)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn 0.6s ease; }
.go-panel { position: relative; width: min(34rem, calc(100vw - 3rem)); padding: 2.2rem 2rem 1.6rem; text-align: center; animation: popIn 0.6s var(--ease-back); }
.go-place { display: flex; flex-direction: column; align-items: center; margin-top: -4.4rem; margin-bottom: 0.4rem; }
.go-laurel {
  display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; font-size: 2.3rem; color: #2a1a04;
  background: radial-gradient(circle at 35% 30%, #fff6d5, #e8c170 50%, #8a5f22); border: 3px solid #fff0c2; box-shadow: 0 0 2rem rgba(232, 193, 112, 0.6), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.6);
}
.loss .go-laurel { background: radial-gradient(circle at 35% 30%, #d9dde8, #7d8599 55%, #3a3f50); border-color: #c8cede; color: #1a1d28; box-shadow: 0 0 1.4rem rgba(160, 170, 200, 0.35); }
.top4 .go-laurel { background: radial-gradient(circle at 35% 30%, #ffffff, #c9d3e6 50%, #6f7a93); border-color: #eef3ff; color: #20263a; }
.go-place-num { margin-top: 0.5rem; font-family: var(--font-num); font-weight: 900; font-size: 1.6rem; color: var(--gold-hi); letter-spacing: 0.08em; }
.go-title { margin: 0.2rem 0 0.3rem; font-family: var(--font-display); font-weight: 900; font-size: 3rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.win .go-title { background: linear-gradient(180deg, #fffaf0, #f3cf7c 50%, #b98331); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1.2rem rgba(232, 193, 112, 0.6)); }
.top4 .go-title { color: #e6ecff; text-shadow: 0 0 1.2rem rgba(180, 200, 255, 0.5); }
.loss .go-title { color: #ff8a96; text-shadow: 0 0 1.2rem rgba(255, 77, 94, 0.45); }
.go-sub { color: var(--text-2); font-size: 0.95rem; }
.go-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.6rem 0 1.4rem; text-align: left; }
.go-row {
  display: grid; grid-template-columns: 2.2rem 2.2rem 1fr auto; align-items: center; gap: 0.7rem; padding: 0.42rem 0.7rem;
  border-radius: 0.4rem; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); animation: riseIn 0.4s var(--ease-out) both;
}
.go-row.you { background: rgba(232, 193, 112, 0.12); border-color: rgba(232, 193, 112, 0.55); box-shadow: 0 0 1rem rgba(232, 193, 112, 0.18); }
.go-rank { font-family: var(--font-num); font-weight: 900; font-size: 1.15rem; text-align: center; }
.go-row.gold .go-rank { color: #ffd66b; text-shadow: 0 0 0.6rem rgba(255, 214, 107, 0.7); }
.go-row.silver .go-rank { color: #dfe6f5; }
.go-row.bronze .go-rank { color: #c08a5a; }
.go-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--av, #555); font-weight: 800; font-size: 0.75rem; color: #fff; font-family: var(--font-display); }
.go-name { font-weight: 700; }
.go-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.go-row.gold .go-tag { color: #ffd66b; }
.go-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.go-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.go-confetti span { position: absolute; top: -1rem; width: 0.5rem; height: 0.9rem; border-radius: 0.1rem; opacity: 0.9; animation: confetti linear infinite; }
@keyframes confetti {
  0% { transform: translate(0, -2rem) rotate(var(--rot)); }
  100% { transform: translate(var(--dx), 110vh) rotate(calc(var(--rot) + 720deg)); }
}