body {
      margin: 0;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: sans-serif;
      height: 100vh;
    }

    #contenedor {
      margin-top: 50px;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      width: 100%;
      justify-content: center;
    }
    
	#interno {
	  border: 1px #666;
	  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	  border-radius: 8px;
	}  
	
	#salida {
	  position: relative; 
	  width: 50px;
	  background: #fff;
	  border: 1px #666;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: flex-start;
	  padding: 10px;
	  margin-right: 5px;
	  min-height: 530px;
	  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	  border-radius: 8px;
	}

#contenedor { 
	display:flex; 
	align-items:stretch; 
}

.score-box {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #fafafa;
  border: 2px solid #222;
  border-radius: 12px;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}


/* El cubo: centrado horizontal y anclado arriba/abajo con clases */
#dobbling-cube{
  position: absolute;           
  left: 50%;                    
  transform: translateX(-50%);   
}

/* Estados */
#dobbling-cube.at-top{
  top: 12px;                     
  bottom: auto;
}

#dobbling-cube.at-bottom{
  bottom: 12px;                 
  top: auto;
}

#overlay-cube {
	background: url('/img/cubo.png') no-repeat center center;
	background-size: contain; 
}
  
#double-overlay {
  position: absolute;
  inset: 0;
  display: none;               
  pointer-events: none;        
}

#double-overlay .cube-layer {
  position: absolute;
  left: 75%;                 
  top: 50%;   
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
}

#double-overlay .cube {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  background: url('/img/cubo.png') no-repeat center center;
  background-size: contain;   
  border-radius: 12px;
  border: 0px solid #222;
  font-weight: 800; font-size: 22px;
  background:#fafafa;
}

#double-overlay .actions { display: flex; gap: 8px; }
#double-overlay .actions button { min-width: 72px; }

#ladoDerecho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px; /* más aire entre reloj de arriba y de abajo */
  height: 100%;
}

.cube-remote {
  background:#fafafa;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.reloj {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100px;    
  height: 80px;   
  background: #000;
  color: #fff;
  border-radius: 12px;
  padding: 10px;

  transform: rotate(90deg);
  transform-origin: center;
}

.reloj > span {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.reloj .turno {
  margin-top: 8px;
}

#confirmarTurno {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  background: crimson;
  color: #fff;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform .15s ease, opacity .15s ease;
}

#confirmarTurno:hover { transform: scale(1.08); }

#confirmarTurno:disabled { opacity: .5; cursor: default; }

.badge-match{
  min-width: 48px;
  height: 32px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border: 2px solid #222;
  border-radius: 10px;
  font-weight: 800;
  background: #fafafa;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  user-select: none;
}


	:root{
	  --board-bg: #000;   
	  --pico-a:   #fff;   
	  --pico-b:   #0054ff;   
	  --bar-bg:   #fff;       
	  --chip1:	  #000;
	  --chip2:    #fff;		
	}


	#tablero {
	  width: 70vw;
	  max-width: 980px;
	  aspect-ratio: 3 / 2;
	  height: auto;

	  background: var(--board-bg);
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  
	  display: grid;
	  grid-template-columns: 8% repeat(12, 1fr);
	  grid-template-rows: 1fr 1fr;
	 
	  border: 1px solid #fff;
	  position: relative;
	}

	.ficha{ 
	  position: relative; 
	  z-index: 2; 
      width: 3.5vw;
      max-width: 40px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      margin: 0.3vw;
      cursor: grab;
      box-shadow: 0 2px 4px rgba(0,0,0,0.5);
      position: relative;
    }
	
    .punto {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 5px;
      border-left: 1px solid rgba(0,0,0,0.1);
      border-right: 1px solid rgba(0,0,0,0.1);
      position: relative;
	  width: 100%;
	  height: 100%;
	  z-index: 0;
	  overflow: hidden;
	}

	.punto::before{
	  content:"";
	  z-index: 0;
	  position:absolute;
	  inset:0;
	  clip-path: polygon(0 0, 100% 0, 50% 100%); /* base arriba, punta abajo */
	  transition: background .2s ease;
	}

    .punto.inferior {
      grid-row: 2;
      justify-content: flex-end;
    }
	
	.die{ cursor:pointer; }
	
	.punto.inferior::before{
		clip-path: polygon(0 100%, 100% 100%, 50% 0); /* base abajo, punta arriba */
	}

	.pico-a, .pico-b {
	  position: relative;
	  box-shadow: inset 0 6px 12px rgba(0,0,0,0.35); /* 👈 sombra interna superior */
	}

	.pico-a::before{ 
		background:var(--pico-b); 
	} 
	
	.pico-b::before{ 
		background:var(--pico-a); 
	} 

	.punto > * { 
		position: relative; 
		z-index: 1; 
	}
 
#bar{
  grid-column: 7;
  grid-row: 1 / span 2;
  background: var(--bar-bg);
  display: grid;
  grid-template-rows: 1fr 1fr; /* arriba / abajo */
  position: relative;          /* para posicionar el cubo al centro */
  align-items: stretch;
}
 

/* Comportamiento visual: arriba apila desde arriba, abajo desde abajo */
.bar-zone.top{    justify-content: flex-start; }
.bar-zone.bottom{ justify-content: flex-end; }

.bar-zone{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 4px;
  overflow: hidden;
  pointer-events: auto !important;          /* ✅ antes estaba none */
}

/* Las fichas en la barra deben poder agarrarse */
.bar-zone .ficha{
  position: relative !important;
  margin: 0 !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  cursor: grab !important;                  /* ✅ antes decía default */
}
    .blanca {
      background: var(--chip1);
      border: 2px solid #000;
    }

    .negra {
      background: var(--chip2);
      border: 2px solid #fff;
    }

    .ficha.moved.blanca {
      background-color: #fae086;
    }

    .ficha.moved.negra {
      background-color: #404e61;
    }

    .numero {
      font-size: 12px;
      color: #222;
      position: absolute;
    }

    .numero-top {
      top: 2px;
    }

    .numero-bottom {
      bottom: 2px;
    }

    #selector {
      margin: 15px;
      color: white;
    }
	
    #confirmarTurno {
      margin-top: 10px;
      padding: 8px 12px;
    }

    @media (max-width: 768px) {
      .ficha {
        width: 9vw;
        max-width: 40px;
        aspect-ratio: 1 / 1;
      }

      #selector, #confirmarTurno {
        font-size: 0.9em;
      }

      #salida {
        min-height: 400px;
        padding: 8px;
      }
    }
	
	#ladoDerecho {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: center;
	  margin-left: 20px;
	  height: 100%;
	  min-height: 530px;
	  padding: 10px 0;
      box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	    border-radius: 8px;
	}

	#relojes {
	  display: flex;
	  flex-direction: column;
	  gap: 10px;
	  margin-bottom: 20px;
	  font-size: 1rem;
	  font-weight: bold;
	  color: white;
	}

	.reloj {
	  background: #222;
	  padding: 8px 12px;
	  border-radius: 6px;
	  text-align: center;
	  width: 120px;
	  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
	}

	.reloj span {
	  font-family: monospace;
	  font-size: 1.2rem;
	  color: #4ef54e;
	}

	.reloj.critico span {
	  color: #ff4d4d;
	  animation: parpadeo 1s infinite;
	}

	@keyframes parpadeo {
	  0%, 100% { opacity: 1; }
	  50% { opacity: 0.5; }
	}

.ficha.insertada {
  animation: resaltarInsercion 0.6s ease;
}

@keyframes resaltarInsercion {
  0% {
    transform: scale(1.3);
    box-shadow: 0 0 8px #ffd700;
    z-index: 10;
  }
  100% {
    transform: scale(1);
    box-shadow: none;
    z-index: auto;
  }
}

.contador-fichas {
  font-family: monospace;
  font-weight: bold;
  pointer-events: none;
}


#dobbling-cube {
  width: 50px;
  height: 50px;
  background: url('/img/cubo.png') no-repeat center center;
  background-size: contain;   
  color: #222;
  font-weight: bold;
  font-size: 22px;
  border: 0px solid #444;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
   display: flex;                   
  align-items: center;            
  justify-content: center;        /* ✅ Centrado horizontal */
  transform: translate(-50%, -50%); /* Centrado en la barra */
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  z-index: 10;
}

/* Cuando lo toma el jugador blanco */
#dobbling-cube.negra {
  top: 10px;
  transform: translateX(-50%);
}

/* Cuando lo toma el jugador negro */
#dobbling-cube.blanca {
  top: auto;
  bottom: 10px;
  transform: translateX(-50%);
}

#log {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
      max-width: 400px;
      height: 200px;
      overflow-y: auto;
      background: #f9f9f9;
    }
    .own { color: green; }
    .incoming { color: blue; }
	
	#webSocketConnect {
		min-height: 100vh;
		display: flex; 
		align-items: center; 
		justify-content: center;
		font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	}

 /* --- LIGHT por defecto (ya lo tenés arriba) --- */
.login-wrap{
  min-height:100vh; display:grid; place-items:center;
  background:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.login-card{
  width:min(360px, 92vw);
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.login-card h1{
  margin:0 0 14px;
  font-size:20px;
  font-weight:700;
  color:#111827;
  text-align:center;
}

.field{ display:block; margin:10px 0; }
.field input{
  width:100%;
  padding:12px 14px;
  font-size:15px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#f9fafb;
  outline:none;
}
.field input:focus{ border-color:#2563eb; background:#fff; }

.meta{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px;
}
.remember{ color:#374151; display:flex; gap:8px; align-items:center; }
.register{ color:#2563eb; text-decoration:none; }
.register:hover{ text-decoration:underline; }

/* --- DARK sólo cuando el SO navega en oscuro --- */
@media (prefers-color-scheme: dark){
  .login-wrap{ background:#0b1220; }
  .login-card{
    background:#0f172a;
    border-color:#1f2937;
    box-shadow:none;
  }
  .login-card h1{ color:#e5e7eb; }
  .field input{
    background:#111827; border-color:#1f2937; color:#e5e7eb;
  }
  .field input::placeholder{ color:#9ca3af; }
  .remember{ color:#cbd5e1; }
}
/* ← IMPORTANTE: cerrar aquí el @media. No metas más reglas dentro. */

/* Estas reglas van FUERA del @media */
.fab-btn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 1100;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.fab-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.28); background:#0f172a; }

.modal[aria-hidden="true"] { display: none; }
.modal{ position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; }
.modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.modal__dialog{
  position: relative; width: min(520px, 92vw); max-height: min(86vh, 720px);
  background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0,0,0,.25);
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  animation: popIn .16s ease-out;
}
.modal__header,.modal__footer{ padding: 14px 16px; background: #f8fafc; }
.modal__header{ display:flex; align-items:center; justify-content: space-between; }
.modal__body{ padding: 16px; overflow:auto; }
.modal__close{ border: none; background: transparent; cursor: pointer; color:#111; font-size: 20px; line-height: 1; padding: 6px; border-radius: 8px; }
.modal__close:hover{ background:#e5e7eb; }

@keyframes popIn{ from{ transform: scale(.98); opacity: 0; } to{ transform: scale(1); opacity: 1; } }

/* Dark para el modal, opcional */
@media (prefers-color-scheme: dark){
  .modal__dialog{ background:#0f172a; color:#e5e7eb; border-color:#1f2937; }
  .modal__header, .modal__footer{ background:#0b1220; }
  .modal__close{ color:#e5e7eb; }
}

@keyframes shake {
  0%   { transform: rotate(0deg) translate(0,0); }
  20%  { transform: rotate(5deg)  translate(2px, -2px); }
  40%  { transform: rotate(-5deg) translate(-2px, 2px); }
  60%  { transform: rotate(4deg)  translate(2px, 2px); }
  80%  { transform: rotate(-4deg) translate(-2px, -2px); }
  100% { transform: rotate(0deg) translate(0,0); }
}
#dice-cup img.shake { animation: shake 2s ease; }
.die.used { opacity: .35; }