/* =====================================================================
   KaBoomz - Player Home (owner correction 2026-09-22b).

   The ONE coral house identity for every player state OUTSIDE join /
   waiting / live game: startup loading, removed, game full, event ended,
   Photo Dedication and the moderation queue. It replaces the purple
   legacy environment those states inherited from the default theme.

   Brand rule: whenever the brand is displayed the genuine logo asset is
   used (assets/logo/kaboomz-logo.png). The wordmark is never recreated
   as styled text here.

   The game shell, the join screen and the waiting screen paint their own
   identical coral values, so no approved state is restyled by this file.
   ===================================================================== */

/* ---------- base player identity ---------- */
body.player {
  background: #FF6B4A;
  color: #20242C;
}
/* the status views own their full-viewport composition (the join and
   waiting screens already zero this padding themselves) */
body.player #app { padding: 0; }

/* ---------- startup loading (owner correction 2026-09-22b) ----------
   Coral field, genuine logo, ONE restrained loader. The spin stops
   entirely under reduced motion (the static ring is the status). */
body.player .loading {
  flex-direction: column;
  gap: 0;
  background: #FF6B4A;
}
body.player .loading-logo {
  display: block;
  width: clamp(168px, 46vw, 244px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(120, 22, 4, 0.4));
}
body.player .loading-spin {
  display: block;
  width: 30px;
  height: 30px;
  margin-top: clamp(18px, 4vh, 28px);
  border: 4px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFF7ED;
  border-radius: 50%;
  /* keyframes live in css/player-join.css (the join busy ring) */
  animation: pj-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.player .loading-spin { animation: none; }
}

/* ---------- shared branded status composition ----------
   Coral field + genuine logo + one cream card when content/actions need
   a surface. Used by removed / full / ended / photo / moderator. */
.view-home {
  position: relative;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  gap: clamp(14px, 3vh, 22px);
  box-sizing: border-box;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    clamp(16px, 5vw, 24px)
    calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.view-home::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;
}
.view-home > * { position: relative; z-index: 1; }

.home-logo {
  display: block;
  width: clamp(150px, 44vw, 224px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(120, 22, 4, 0.4));
}

.home-card {
  width: min(100%, 26rem);
  box-sizing: border-box;
  background: #FFF7ED;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(140, 28, 8, 0.38);
  padding: clamp(20px, 5vw, 30px) clamp(18px, 4.6vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.6vh, 18px);
  text-align: center;
  color: #20242C;
}
.home-title {
  margin: 0;
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  line-height: 1.1;
  color: #20242C;
}
.home-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(32, 36, 44, 0.78);
}
.home-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-card .btn.ghost {
  background: #FFFFFF;
  color: #20242C;
  border: 3px solid #20242C;
}
.home-card .btn.ghost:hover { filter: brightness(0.97); }
/* the house primary (gold + ink), same as the join and shell actions -
   the legacy coral CTA gradient would put white on light coral here */
body.player .home-card .btn.join-btn {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
body.player .home-card .form-error { color: #8E2B10; }

/* the photo / moderator card hosts a form or a list: wider, left-aligned */
.home-card-form {
  width: min(100%, 27rem);
  align-items: stretch;
  text-align: left;
}
.home-card-form .home-title,
.home-card-form .photo-title { text-align: center; }

/* house styling for form controls on the cream card */
body.player .home-card .field {
  background: #FFFCF4;
  color: #20242C;
  border-color: rgba(32, 36, 44, 0.35);
}
body.player .home-card .field::placeholder { color: rgba(32, 36, 44, 0.45); }
body.player .home-card .field:focus {
  border-color: #20242C;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.65);
}
body.player .home-card .photo-instr { color: rgba(32, 36, 44, 0.78); }
body.player .home-card .photo-hint { color: rgba(32, 36, 44, 0.65); }
body.player .home-card .photo-add { color: #20242C; }
body.player .home-card .photo-full {
  background: rgba(255, 212, 59, 0.35);
  border-color: rgba(150, 32, 8, 0.35);
  color: #20242C;
}
body.player .home-card #photo-sent .status-text { color: #20242C; }
body.player .home-card #photo-sent .status-sub { color: rgba(32, 36, 44, 0.72); }
body.player .home-card .mod-list {
  max-width: none;
  margin: 0;
  padding: 0;
}
body.player .home-card .mod-card {
  background: #FFFFFF;
  border: 1px solid rgba(32, 36, 44, 0.14);
  color: #20242C;
}
body.player .home-card .mod-photo { background: rgba(32, 36, 44, 0.08); }
body.player .home-card #mod-status { color: rgba(32, 36, 44, 0.8); }

/* the dedicated recovery screen owns the full viewport; the suspended
   live game stays mounted and alive BEHIND it (opaque coral layer),
   never torn down (owner correction 2026-09-23) */
#view-reconnecting {
  position: fixed;
  inset: 0;
  z-index: 940; /* above the shell (900), below the countdown (9999) */
  background: #FF6B4A;
  overflow-y: auto;
}

/* ---------- activity fallback (unknown / unsupported module) ----------
   Owner correction 2026-09-22d: a DELIBERATE full-screen status screen -
   coral field, genuine logo, one cream card centred beneath it, generic
   player copy. It owns the screen above the (empty) shell while polling
   continues; a module hides it. The card keeps a stable height so the
   message can change without layout shift. */
#activity-fallback {
  position: fixed;
  inset: 0;
  z-index: 901; /* above the shell (900), below the countdown (9999) */
  background: #FF6B4A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 22px);
  box-sizing: border-box;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    clamp(16px, 5vw, 24px)
    calc(env(safe-area-inset-bottom, 0px) + 24px);
}
#activity-fallback::before {
  content: "";
  position: absolute;
  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%);
}
#activity-fallback > * { position: relative; }
#activity-fallback .home-card {
  min-height: clamp(150px, 26vh, 220px);
  justify-content: center;
}
#activity-fallback #activity-info {
  margin: 0;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  color: #20242C;
}
#activity-fallback .activity-info { width: 100%; }

/* ---------- Player recovery corrections (owner 2026-09-23) ---------- */

/* Game Full: approved dedicated state - bomb accent above a cream card
   with the exact copy and two useful actions. */
.full-bomb {
  display: block;
  width: clamp(56px, 17vw, 76px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(120, 22, 4, 0.35));
}
.home-card-full { gap: clamp(10px, 2.2vh, 16px); }
.home-text-quiet {
  font-size: 0.9rem;
  color: rgba(32, 36, 44, 0.62);
}
.home-card-full .home-actions { margin-top: 0.2rem; }
.home-card-full .btn.join-btn {
  background: #FFD43B;
  color: #20242C;
  border: none;
  font-weight: 800;
  min-height: 50px;
  border-radius: 12px;
  box-shadow: 0 3px 0 #E8A200;
}
.home-card-full .btn.join-btn:hover { filter: brightness(1.04); }
.home-card-full .btn.join-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #E8A200; }
.home-card-full .btn.ghost {
  background: transparent;
  border: none;
  color: #20242C;
  font-weight: 700;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reconnecting: dedicated full-screen recovery composition - the bomb
   with a slow rotating dashed ring, the message and the automatic-retry
   status. No waiting card sits underneath. */
.rc-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(6px, 1.6vh, 12px);
}
.rc-bomb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(128px, 40vw, 172px);
  height: clamp(128px, 40vw, 172px);
}
.rc-bomb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(120, 22, 4, 0.4));
}
.rc-ring {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 3px dashed rgba(255, 212, 59, 0.95);
  border-right-color: transparent;
  border-bottom-color: rgba(255, 212, 59, 0.35);
  animation: rc-spin 2.6s linear infinite;
}
@keyframes rc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rc-title {
  margin: clamp(4px, 1.2vh, 10px) 0 0;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.05;
  color: #FFF7ED;
  text-shadow: 0 2px 0 rgba(140, 28, 8, 0.35);
}
.rc-text {
  margin: 0;
  max-width: 20rem;
  font-size: clamp(0.95rem, 4.2vw, 1.1rem);
  font-weight: 600;
  color: rgba(255, 247, 237, 0.95);
  text-shadow: 0 1px 0 rgba(140, 28, 8, 0.3);
}
.rc-status {
  margin: clamp(8px, 2vh, 14px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.85rem, 3.8vw, 1rem);
  font-weight: 700;
  color: rgba(255, 247, 237, 0.95);
}
.rc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #7ED957;
  box-shadow: 0 0 0 3px rgba(126, 217, 87, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  /* continuous motion stops entirely (never merely slows): the reconnect
     ring and the start-up loader ring both hold their static state */
  .rc-ring { animation: none; }
  body.player .loading-spin { animation: none; }
}

/* Game Ended: text DIRECTLY on the coral field - no cream card, no
   button (owner written override). */
.view-ended-flat { gap: clamp(10px, 2.4vh, 18px); text-align: center; }
.ended-title {
  margin: 0;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.05;
  color: #FFF7ED;
  text-shadow: 0 2px 0 rgba(140, 28, 8, 0.35);
}
.ended-text {
  margin: 0;
  font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  font-weight: 700;
  color: #FFF7ED;
  text-shadow: 0 1px 0 rgba(140, 28, 8, 0.3);
}

/* Unknown-activity fallback: the approved waiting composition (bomb +
   status + big-screen nudge), not an invented screen. */
.fallback-card .yi-bomb {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.fallback-guidance {
  margin: clamp(4px, 1.4vh, 10px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(32, 36, 44, 0.78);
  font-size: clamp(0.9rem, 4vw, 1rem);
  font-weight: 700;
}
.fallback-guidance svg { width: 22px; height: 14px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .fallback-card .yi-bomb { animation: none !important; }
  /* consolidated reduced-motion close for this stylesheet: the start-up
     loader ring holds its static state whenever this block is the last
     one consulted */
  body.player .loading-spin { animation: none; }
}