/* ==========================================================================
   4 EN LÍNEA — CSS PROPIO (compatible con styleglobal + ../style.css)
   ========================================================================= */

:root {
  --color-neon-blue: #00b7ff;
  --color-neon-green: #39ff14;
  --color-neon-orange: #ff6c00;
  --color-neon-red: #ff2d55;
  --color-neon-yellow: #ffe600;
  --bg-dark-box: rgba(10, 21, 32, 0.85);
  --border-neon: 1px solid rgba(0, 183, 255, 0.2);
  --gap: 6px;
}

.logo-header {
  width: 100%;
  text-align: center;
  padding: 8px 0;
}
.logo-header img {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mesa {
  background: var(--bg-dark-box);
  border: var(--border-neon);
  border-radius: 16px;
  max-width: 420px;
  width: calc(100% - 24px);
  margin: 0 auto 20px auto;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(5, 10, 14, 0.6);
  border: 1px solid rgba(57, 255, 20, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.status-dot {
  width: 6px;
  height: 6px;
  background: var(--color-neon-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-neon-green);
  flex-shrink: 0;
}

.titulo-juego {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  margin: 5px 0;
  background: linear-gradient(90deg, var(--color-neon-orange), var(--color-neon-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.instrucciones-juego {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0 0 12px 0;
}

.board-relative {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  background: #000;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 183, 255, 0.08);
  min-height: 320px;
}

#game-core-content {
  width: 100%;
  padding: 12px 8px 16px;
  box-sizing: border-box;
}
#game-core-content.oculto { display: none !important; }

#game-board-container {
  position: relative;
  width: 100%;
}

.column-hints {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gap);
  margin-bottom: 6px;
  height: 18px;
}
.column-hints .hint {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.column-hints .hint.visible { opacity: 1; }
.column-hints .hint span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-neon-green);
  box-shadow: 0 0 10px var(--color-neon-green);
}

.board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gap);
  background: linear-gradient(180deg, #0a1520 0%, #061018 100%);
  border: 2px solid rgba(0, 183, 255, 0.25);
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    inset 0 0 30px rgba(0, 183, 255, 0.06),
    0 0 20px rgba(0, 183, 255, 0.1);
  position: relative;
}

.board::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 13px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    #ff2d55 0%,
    #ffe600 25%,
    transparent 40%,
    transparent 60%,
    #00b7ff 75%,
    #39ff14 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #03080c;
  border: 1px solid rgba(0, 183, 255, 0.12);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
  cursor: pointer;
  position: relative;
  transition: transform 0.1s, box-shadow 0.15s;
  min-height: 36px;
}

.cell:hover:not(.filled) {
  box-shadow: inset 0 0 12px rgba(57, 255, 20, 0.15), 0 0 8px rgba(57, 255, 20, 0.2);
}

.cell.filled { cursor: default; }

.token {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  box-shadow: 0 0 14px currentColor;
  animation: dropIn 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}

.token.player {
  background: radial-gradient(circle at 35% 30%, #7dff5a, #39ff14 55%, #1a8a00);
  color: #39ff14;
  border: 2px solid rgba(255,255,255,0.35);
}

.token.ai {
  background: radial-gradient(circle at 35% 30%, #ff9a4a, #ff6c00 55%, #a33e00);
  color: #ff6c00;
  border: 2px solid rgba(255,255,255,0.3);
}

.token.win {
  animation: winPulse 0.7s ease-in-out infinite alternate;
}

@keyframes dropIn {
  0% { transform: translateY(-280%) scale(0.85); opacity: 0.6; }
  70% { transform: translateY(8%) scale(1.05); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes winPulse {
  from { box-shadow: 0 0 12px currentColor, 0 0 4px #fff; transform: scale(1); }
  to   { box-shadow: 0 0 28px currentColor, 0 0 12px #fff; transform: scale(1.08); }
}

.overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(2, 6, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 12px;
}
.overlay.oculto { display: none !important; }

.mensaje-alerta {
  padding: 18px 16px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.mensaje-alerta h2 {
  color: var(--color-neon-green);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.35rem;
  margin: 0 0 8px 0;
  text-shadow: 0 0 14px rgba(57, 255, 20, 0.45);
  letter-spacing: 1.5px;
}
.menu-subtitle {
  color: #94a3b8;
  font-size: 0.78rem;
  margin: 0 0 16px 0;
}
.overlay-diff {
  color: #94a3b8;
  font-size: 0.75rem;
  margin: -6px 0 14px 0;
}

.btn-action {
  width: 100%;
  background: transparent;
  padding: 10px;
  border-radius: 6px;
  font-family: 'Chakra Petch', 'Courier New', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-sizing: border-box;
}

.btn-orange { border: 1px solid var(--color-neon-orange); color: var(--color-neon-orange); }
.btn-orange:hover { background: rgba(255, 108, 0, 0.12); box-shadow: 0 0 12px rgba(255, 108, 0, 0.25); }

.btn-blue { border: 1px solid var(--color-neon-blue); color: var(--color-neon-blue); }
.btn-blue:hover { background: rgba(0, 183, 255, 0.12); box-shadow: 0 0 12px rgba(0, 183, 255, 0.25); }

.btn-green { border: 1px solid var(--color-neon-green); color: var(--color-neon-green); }
.btn-green:hover { background: rgba(57, 255, 20, 0.12); box-shadow: 0 0 12px rgba(57, 255, 20, 0.25); }

.btn-red { border: 1px solid var(--color-neon-red); color: var(--color-neon-red); }
.btn-red:hover { background: rgba(255, 45, 85, 0.12); box-shadow: 0 0 12px rgba(255, 45, 85, 0.25); }

.btn-ghost {
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #94a3b8;
  margin-top: 8px;
}
.btn-ghost:hover {
  background: rgba(148, 163, 184, 0.08);
  color: #e2e8f0;
}

.btn-action:disabled,
.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.btn-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  margin-bottom: 10px;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.mode-title {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.mode-desc {
  font-size: 0.65rem;
  font-weight: 400;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0.5px;
}

.btn-diff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px;
  margin-bottom: 8px;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
.diff-name {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.diff-level {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.7;
  text-transform: none;
}

.arcade-dashboard {
  margin-top: 15px;
  width: 100%;
}

.marcador-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: rgba(5, 10, 14, 0.8);
  border: 1px solid rgba(0, 183, 255, 0.15);
  border-radius: 8px;
  padding: 8px 5px;
  margin-bottom: 12px;
}
.marcador-box small { font-size: 0.6rem; color: #64748b; letter-spacing: 1px; }
.marcador-box b { font-size: 1.1rem; color: var(--color-neon-green); }

.panel-estado {
  background: rgba(5, 10, 14, 0.8);
  border: 1px solid rgba(0, 183, 255, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 0.7rem;
  color: #e2e8f0;
  text-align: left;
  line-height: 1.3;
}
.panel-estado strong {
  display: block;
  font-size: 0.6rem;
  color: var(--color-neon-green);
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.zona-botones-arcade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.staff-footer-note {
  margin-top: 15px;
  font-size: 0.85rem;
}
.staff-footer-note a {
  color: var(--color-neon-blue);
  text-decoration: none;
  font-weight: bold;
}

.mesa:fullscreen,
.mesa:-webkit-full-screen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 4px;
  background: #050a0e;
}
.mesa:fullscreen .instrucciones-juego,
.mesa:-webkit-full-screen .instrucciones-juego { display: none; }
.mesa:fullscreen .titulo-juego,
.mesa:-webkit-full-screen .titulo-juego { font-size: 1rem; margin: 2px 0; }
.mesa:fullscreen .board-relative,
.mesa:-webkit-full-screen .board-relative {
  width: min(85vw, 380px);
  max-width: none;
}
.mesa:fullscreen .arcade-dashboard,
.mesa:-webkit-full-screen .arcade-dashboard {
  width: min(94vw, 380px);
  margin-top: 6px;
}

@media (max-width: 400px) {
  :root { --gap: 4px; }
  .zona-botones-arcade { grid-template-columns: 1fr; }
  .btn-mode, .btn-diff { max-width: 100%; }
  .cell { min-height: 32px; }
}

.input-online {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid #00b7ff55;
  background: #04080c;
  color: #eafcff;
  font-family: "Chakra Petch", sans-serif;
  font-size: 1rem;
  text-align: center;
}

.input-online:focus {
  outline: none;
  border-color: #00b7ff;
  box-shadow: 0 0 8px #00b7ff88;
}

.unirse-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.input-codigo {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.online-status {
  min-height: 1.2em;
  color: #ff7b00;
  font-size: 0.9rem;
  margin: 6px 0;
}

.codigo-sala {
  font-family: "Orbitron", sans-serif;
  font-size: 2.2rem;
  letter-spacing: 6px;
  color: #39ff14;
  text-shadow: 0 0 10px #39ff1488;
  margin: 14px 0;
}


/* ==========================================================================
   LOBBY ONLINE — MODAL COMPARTIR MESA
   ========================================================================== */
.waiting-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7f91a6;
  font-size: .62rem;
  letter-spacing: 1.6px;
  margin-bottom: 10px;
}
.waiting-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-neon-green);
  box-shadow: 0 0 10px var(--color-neon-green);
  animation: shareBlink 1.2s ease-in-out infinite;
}
@keyframes shareBlink { 50% { opacity: .35; transform: scale(.7); } }

.menu-waiting {
  width: min(100%, 570px);
  padding: 25px 19px 24px;
  border: 1px solid rgba(0,183,255,.42);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(11,20,43,.98), rgba(3,12,22,.98));
  box-shadow: 0 0 32px rgba(0,183,255,.12), inset 0 0 36px rgba(0,183,255,.035);
}
.menu-waiting h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-neon-blue);
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  letter-spacing: 3px;
  text-shadow: 0 0 13px rgba(0,183,255,.45);
  margin-bottom: 11px;
}
.share-heading-icon { font-size: 1.55em; line-height: .7; color: #a6d9ea; }
.menu-waiting .menu-subtitle { color: #aeb9c9; font-size: .9rem; margin-bottom: 0; }
.menu-waiting .codigo-sala {
  font-size: clamp(2.7rem, 13vw, 4rem);
  letter-spacing: clamp(7px, 2vw, 13px);
  margin: 13px 0 18px;
  color: var(--color-neon-green);
  text-shadow: 0 0 18px rgba(57,255,20,.6);
}
.share-link-box {
  width: 100%;
  box-sizing: border-box;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(0,183,255,.24);
  border-radius: 10px;
  background: rgba(1,8,14,.82);
  color: #9caabd;
  font-size: .83rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.btn-share-primary {
  margin-top: 14px;
  padding: 15px 10px;
  border: 1px solid #39ff14;
  border-radius: 13px;
  background: linear-gradient(180deg, #45ff19, #25e900);
  color: #071207;
  font-size: 1rem;
  box-shadow: 0 0 17px rgba(57,255,20,.23);
}
.btn-share-primary:hover { background: #6dff4e; color: #020a02; box-shadow: 0 0 25px rgba(57,255,20,.43); }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 12px; }
.share-btn { padding: 14px 7px; border: 0; border-radius: 12px; color: #eefaff; font-size: .82rem; letter-spacing: 1px; }
.share-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.share-whatsapp { background: #20c96b; }
.share-facebook { background: #1877e8; }
.share-telegram { background: #209fd5; }
.share-twitter { background: #209ddd; }
.share-feedback { height: 18px; margin: 9px 0 0; color: var(--color-neon-green); font-size: .78rem; }
.btn-close-share {
  margin-top: 8px;
  padding: 13px 10px;
  border-color: rgba(0,183,255,.35);
  color: var(--color-neon-blue);
  text-transform: none;
  font-size: .92rem;
  letter-spacing: 0;
}
.btn-close-share:hover { background: rgba(0,183,255,.1); }
@media (max-width: 430px) {
  .menu-waiting { padding: 20px 13px 18px; border-radius: 16px; }
  .share-btn { font-size: .7rem; letter-spacing: .5px; }
}