/* KaBoomz - Player "You're in!" (Batch 4): the Friendly Join
   Confirmation. Scoped STRICTLY to body.player-youre-in-live - active
   ONLY for the initial waiting state (predicate: lobby_open === true &&
   !activity && !last_result), removed by every other view so the
   between-round/result idle state keeps its existing presentation and
   the activity's normal skin behaviour returns unchanged.
   The plain coral player environment - never the Host Lobby tunnel.
   Palette is the approved locked set with no inherited theme
   variables (a non-default room skin can never recolour this screen).
   Typography remains the provisional project stack. */

body.player-youre-in-live {
  margin: 0;
  padding: 0;
  background: #FF6B4A;
  color: #20242C;
  font-family: var(--font-body);
}

/* gentle warm depth, no tunnel, never purple */
body.player-youre-in-live::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 14%,
      rgba(255, 138, 80, 0.5) 0%, rgba(255, 122, 68, 0) 40%),
    radial-gradient(circle at 50% 110%,
      rgba(200, 52, 20, 0.45) 0%, rgba(200, 52, 20, 0) 48%);
  z-index: 0;
}

body.player-youre-in-live #view-idle {
  position: relative;
  z-index: 1;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding:
    calc(env(safe-area-inset-top, 0px) + 18px)
    0
    calc(env(safe-area-inset-bottom, 0px) + 22px);
}
body.player-youre-in-live .player #app,
body.player-youre-in-live #app { padding: 0; }

/* later-waiting result line: the activity-owned last result, on the
   approved card (owner correction 2026-09-22b) */
body.player-youre-in-live .yi-result {
  margin: clamp(8px, 1.8vh, 12px) 0 0;
  max-width: 100%;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 107, 74, 0.14);
  border: 1.5px solid rgba(255, 107, 74, 0.45);
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 700;
  color: #20242C;
  overflow-wrap: anywhere;
}
body.player-youre-in-live .yi-result.hidden { display: none; }

/* hidden one-time announcement region - always visually hidden (SR
   only), regardless of which idle mode is showing */
.yi-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- the confirmation stage ---------- */

body.player-youre-in-live .yi {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* entrance: one settled success moment per identity (never per poll) */
body.player-youre-in-live .yi.yi-entering .yi-card {
  animation: yi-settle 0.45s ease both;
}
body.player-youre-in-live .yi.yi-entering .yi-check {
  animation: yi-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
body.player-youre-in-live .yi.yi-entering .yi-rays {
  animation: yi-rays-in 0.6s ease 0.15s both;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes yi-settle {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes yi-pop {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}
@keyframes yi-rays-in {
  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }
}

/* genuine logo above the card */
body.player-youre-in-live .yi-logo img {
  display: block;
  width: clamp(120px, 46vw, 232px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(120, 22, 4, 0.4));
  margin-bottom: clamp(10px, 2vh, 16px);
}

/* ---------- the cream card (signature moment: check + headline are
   the strongest elements, per the approved reference) ---------- */

body.player-youre-in-live .yi-card {
  width: min(90%, 440px);
  box-sizing: border-box;
  background: #FFF7ED;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow: 0 16px 34px rgba(140, 28, 8, 0.4);
  padding: clamp(24px, 6vh, 38px) 24px clamp(22px, 5.4vh, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* lime success circle: white check + six controlled green rays */
body.player-youre-in-live .yi-check {
  position: relative;
  width: clamp(68px, 23.6vw, 100px);
  height: clamp(68px, 23.6vw, 100px);
  display: block;
}
body.player-youre-in-live .yi-check svg { width: 100%; height: 100%; display: block; }

body.player-youre-in-live .yi-title {
  margin: clamp(10px, 2.6vh, 18px) 0 0;
  font-size: clamp(30px, 11.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #20242C;
}

/* short rounded coral underline */
body.player-youre-in-live .yi-underline {
  display: block;
  width: clamp(72px, 24vw, 108px);
  height: clamp(8px, 2vh, 11px);
  border-radius: 999px;
  background: #FF6B4A;
  margin: clamp(8px, 1.8vh, 12px) auto clamp(10px, 2.2vh, 16px);
}

body.player-youre-in-live .yi-label {
  margin: 0;
  font-size: clamp(16px, 4.4vw, 18px);
  font-weight: 600;
  color: rgba(32, 36, 44, 0.78);
}
body.player-youre-in-live .yi-nick {
  margin: clamp(4px, 1vh, 8px) 0 0;
  font-size: clamp(28px, 9.5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  color: #FF6B4A;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* coral dotted separator - decorative, light */
body.player-youre-in-live .yi-dots {
  width: min(84%, 320px);
  height: 12px;
  margin: clamp(14px, 3.2vh, 22px) auto;
  background-image: radial-gradient(circle, rgba(255, 107, 74, 0.85) 2.8px, rgba(255, 107, 74, 0) 3.6px);
  background-size: 17px 12px;
  background-position: center;
  background-repeat: repeat-x;
  border-radius: 6px;
}

/* waiting row: small static bomb + exact copy (never competes with the
   headline) */
body.player-youre-in-live .yi-waiting {
  margin: clamp(2px, 0.6vh, 6px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 700;
  color: #20242C;
}
body.player-youre-in-live .yi-waiting svg,
body.player-youre-in-live .yi-waiting .yi-bomb {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Milestone 2: gentle idle life for the approved bomb. Reduced motion
   removes the loop (see css/motion.css) and leaves the still artwork. */
@media (prefers-reduced-motion: reduce) {
  body.player-youre-in-live .yi-waiting .yi-bomb { animation: none !important; }
}

/* guidance below the card: secondary, readable on coral */
body.player-youre-in-live .yi-guidance {
  margin: clamp(14px, 3.2vh, 24px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #FFFFFF;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(120, 22, 4, 0.35), 0 0 12px rgba(255, 255, 255, 0.28);
}
body.player-youre-in-live .yi-guidance svg {
  width: 22px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---------- controlled confetti, edges only ---------- */

body.player-youre-in-live .yi-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body.player-youre-in-live .yi-bit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(8px, 2.4vw, 15px);
  height: clamp(8px, 2.4vw, 15px);
  transform: rotate(var(--rot, 0deg)) scale(var(--s, 1));
}
body.player-youre-in-live .yi-bit.hex {
  background: var(--c);
  clip-path: polygon(25% 6%, 75% 6%, 98% 50%, 75% 94%, 25% 94%, 2% 50%);
}
body.player-youre-in-live .yi-bit.dot { background: var(--c); border-radius: 50%; }
body.player-youre-in-live .yi-bit.bar {
  background: var(--c);
  border-radius: 2px;
  width: clamp(4px, 1.4vw, 8px);
  height: clamp(12px, 3.6vw, 22px);
}
body.player-youre-in-live .yi-bit.rect {
  background: var(--c);
  border-radius: 2px;
  width: clamp(10px, 2.8vw, 18px);
  height: clamp(6px, 1.6vw, 10px);
}
body.player-youre-in-live .yi-bit.star {
  background: var(--c);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ---------- short screens: proportionally reduced, scroll allowed ---------- */

@media (max-height: 620px) {
  body.player-youre-in-live #view-idle { align-items: flex-start; }
  body.player-youre-in-live .yi-logo img { width: clamp(104px, 34vw, 150px); margin-bottom: 8px; }
  body.player-youre-in-live .yi-card { padding: 16px 20px 18px; border-radius: 20px; }
  body.player-youre-in-live .yi-title { font-size: 25px; }
  body.player-youre-in-live .yi-nick { font-size: 23px; }
  body.player-youre-in-live .yi-check { width: 60px; height: 60px; }
  body.player-youre-in-live .yi-guidance { margin-top: 12px; }
}

/* desktop/tablet: centred column, capped, breathing room */
@media (min-width: 700px) {
  body.player-youre-in-live .yi-logo img { width: 232px; }
  body.player-youre-in-live .yi-card { width: min(460px, 64vw); }
  body.player-youre-in-live .yi-title { font-size: 36px; }
  body.player-youre-in-live .yi-nick { font-size: 32px; }
}

/* ---------- reduced motion: present the final state immediately ---------- */

@media (prefers-reduced-motion: reduce) {
  body.player-youre-in-live .yi.yi-entering .yi-card,
  body.player-youre-in-live .yi.yi-entering .yi-check,
  body.player-youre-in-live .yi.yi-entering .yi-rays { animation: none; }
}

/* ---------- leave escape hatch while this state is active ---------- */

body.player-youre-in-live .leave-btn {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  font-size: clamp(12px, 3.2vw, 14px);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 0 rgba(120, 22, 4, 0.4);
}
body.player-youre-in-live .leave-btn:focus-visible {
  outline: 3px solid #20242C;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85);
}

/* Host-disconnected warning clearance (owner corrections 2026-09-23 /
   2026-09-24): while the warning shows, the waiting view reserves the
   banner's own measured band (fallback covers a wrapped banner at the
   narrowest phone), and compact heights tighten the column's gaps and
   sizes so the banner, the genuine logo, the waiting card, "Waiting for
   the host to start..." and the "Look at the big screen" guidance all
   stay fully on screen with no scrolling. Nothing is hidden. */
body.player-youre-in-live.kb-host-banner-live #view-idle,
body.player-youre-in-live:has(#host-banner:not(.hidden)) #view-idle {
  justify-content: flex-start;
  padding-top: var(--kb-host-banner-clearance, calc(env(safe-area-inset-top, 0px) + 168px));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}
@media (max-height: 700px) {
  body.player-youre-in-live.kb-host-banner-live .yi-logo img,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-logo img {
    width: clamp(88px, 26vw, 116px);
    margin-bottom: 6px;
  }
  body.player-youre-in-live.kb-host-banner-live .yi-card,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-card {
    padding: 14px 18px 16px;
    border-radius: 20px;
  }
  body.player-youre-in-live.kb-host-banner-live .yi-check,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-check { width: 54px; height: 54px; }
  body.player-youre-in-live.kb-host-banner-live .yi-title,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-title { margin-top: 8px; font-size: 22px; }
  body.player-youre-in-live.kb-host-banner-live .yi-underline,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-underline { height: 7px; margin: 6px auto 8px; }
  body.player-youre-in-live.kb-host-banner-live .yi-label,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-label { font-size: 14px; }
  body.player-youre-in-live.kb-host-banner-live .yi-nick,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-nick { font-size: 22px; }
  body.player-youre-in-live.kb-host-banner-live .yi-dots,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-dots { margin: 8px auto; }
  body.player-youre-in-live.kb-host-banner-live .yi-waiting,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-waiting { font-size: 14px; }
  body.player-youre-in-live.kb-host-banner-live .yi-waiting svg,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-waiting .yi-bomb { width: 22px; height: 22px; }
  body.player-youre-in-live.kb-host-banner-live .yi-result,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-result { margin-top: 6px; padding: 6px 12px; font-size: 14px; }
  body.player-youre-in-live.kb-host-banner-live .yi-guidance,
  body.player-youre-in-live:has(#host-banner:not(.hidden)) .yi-guidance { margin-top: 8px; font-size: 14px; }
}