/* ============================================================
   TRUC — Home screen v2 ("Versión C · Rompedora")
   Añadir como <link rel="stylesheet" href="/truc-home-v2.css?v=1">
   DESPUÉS de styles.css en public/index.html (cascada = override).
   No toca IDs ni handlers: app.js / accounts.js siguen funcionando igual.
   Requiere el cambio de marcado descrito en truc-home-v2.diff.html
   (saca #quick-button de .home-card y lo envuelve en .quick-chip-wrap).
   ============================================================ */

/* Fondo tipo tapete con textura de puntos sutil, sin tocar el resto de pantallas */
.home-screen {
  background:
    radial-gradient(circle at 50% 20%, rgba(245,190,76,.05), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 14px),
    linear-gradient(rgba(3,19,19,.45), rgba(3,19,19,.95)),
    radial-gradient(circle at 50% 25%, #18594f 0, #062725 42%, #031313 78%);
}

/* CTA circular ("ficha de póker") en vez de la barra ancha */
.quick-chip-wrap {
  position: relative;
  width: 190px; height: 190px;
  margin: 6px auto 20px;
  display: grid; place-items: center;
}
.quick-chip-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgba(245,190,76,.35);
  animation: chipSpin 18s linear infinite;
  pointer-events: none;
}
.quick-chip-wrap::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px solid rgba(245,190,76,.2);
  pointer-events: none;
}
@keyframes chipSpin { to { transform: rotate(360deg); } }

.primary-button.quick-chip {
  width: 160px; height: 160px; min-height: 0;
  margin: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 32% 26%, #ffd6a3, #ff8f4d 32%, #d83c27 62%, #8f2a17 100%);
  box-shadow:
    0 0 0 6px #7a2415, 0 0 0 10px #d83c27, 0 0 0 13px rgba(245,190,76,.55),
    inset 0 6px 10px rgba(255,255,255,.45), inset 0 -14px 22px rgba(0,0,0,.4),
    0 10px 0 rgba(90,20,10,.55), 0 26px 50px -10px rgba(0,0,0,.65);
  animation: chipPulse 2.6s ease-in-out infinite;
  transition: transform .12s, box-shadow .12s;
}
.primary-button.quick-chip:hover { transform: translateY(-3px); }
.primary-button.quick-chip:active {
  transform: translateY(3px) scale(.96);
  box-shadow:
    0 0 0 6px #7a2415, 0 0 0 10px #d83c27, 0 0 0 13px rgba(245,190,76,.55),
    inset 0 4px 8px rgba(0,0,0,.35), 0 3px 0 rgba(90,20,10,.55), 0 10px 20px -6px rgba(0,0,0,.55);
}
.primary-button.quick-chip::after { content: none; } /* anula el brillo diagonal del .ember-button */
.primary-button.quick-chip .button-kicker { order: 2; margin: 0; font-size: 9.5px; letter-spacing: .05em; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.primary-button.quick-chip strong { font: 800 21px Georgia, serif; text-shadow: 0 2px 4px rgba(0,0,0,.35); letter-spacing: 0; text-transform: none; }
@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 6px #7a2415, 0 0 0 10px #d83c27, 0 0 0 13px rgba(245,190,76,.55), inset 0 6px 10px rgba(255,255,255,.45), inset 0 -14px 22px rgba(0,0,0,.4), 0 10px 0 rgba(90,20,10,.55), 0 26px 50px -10px rgba(0,0,0,.65); }
  50% { box-shadow: 0 0 0 6px #7a2415, 0 0 0 10px #d83c27, 0 0 0 13px rgba(245,190,76,.7), inset 0 6px 10px rgba(255,255,255,.45), inset 0 -14px 22px rgba(0,0,0,.4), 0 10px 0 rgba(90,20,10,.55), 0 30px 56px -8px rgba(0,0,0,.7); }
}

/* La tarjeta pasa a bottom-sheet: ancho completo, esquinas superiores redondeadas */
.home-screen .home-card.ceramic-panel {
  width: min(100%, 480px);
  border-radius: 28px 28px 0 0;
  margin-top: auto;
  box-shadow: 0 -20px 50px -10px rgba(0,0,0,.5);
}
.home-screen .home-card.ceramic-panel::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 3px;
  background: rgba(16,45,44,.2); margin: -6px auto 14px;
}

/* Buscar taula: botó verd a ample complet, sota Crear taula */
#room-search-button.search-green {
  background: linear-gradient(160deg, #3fae7a, #1d7a4f 55%, #0f4a2e);
  color: #eafff2; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.35), 0 6px 14px -4px rgba(15,74,46,.7), 0 3px 0 rgba(8,40,26,.6);
  transition: transform .12s, box-shadow .12s;
}
#room-search-button.search-green:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 2px 0 rgba(8,40,26,.6); }

/* Entrar amb codi: botó a l'esquerra, camp de codi a la dreta.
   Mateix verd que "Buscar taula oberta" (#room-search-button.search-green),
   perquè els dos són accions equivalents d'entrar a una taula. */
.join-row #join-confirm {
  background: linear-gradient(160deg, #3fae7a, #1d7a4f 55%, #0f4a2e);
  color: #eafff2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.35), 0 6px 14px -4px rgba(15,74,46,.7), 0 3px 0 rgba(8,40,26,.6);
  transition: transform .12s, box-shadow .12s;
}
.join-row #join-confirm:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 2px 0 rgba(8,40,26,.6); }