/* ===== Base ===== */
:root{
  --card-w: clamp(92px, 18vw, 130px);
  --card-h: calc(var(--card-w) * 1.42);
  --gap: 14px;
}

*{ box-sizing: border-box; }

/* ===== Fondo tipo pergamino ===== */
body{
  font-family: Arial, sans-serif;
  background: linear-gradient(180deg, #efe6c8 0%, #e0d5b2 100%);
  color:#222;
  text-align:center;
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
}

/* Textura sutil tipo papel */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(900px 700px at 20% 30%, rgba(120,90,40,0.10), transparent 55%),
    radial-gradient(900px 700px at 80% 40%, rgba(120,90,40,0.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.02) 100%);
}

/* Fibra suave del papel */
body::after{
  content:"";
  position:fixed;
  inset:-60px;
  z-index:-1;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,0,0,0.035), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.03), transparent 60%);
  filter: blur(12px);
  opacity: .95;
}

/* ===== Layout ===== */
.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 16px 30px;
}

.header h1{
  margin: 10px 0 6px;
  font-size: 40px;
  letter-spacing: .3px;
}

.header p{
  margin: 0 0 16px;
  opacity: .85;
}

/* Logo */
.brand-logo{
  width: 140px;
  height: auto;
  display:block;
  margin: 0 auto 10px;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.25));
}

/* ===== Controles ===== */
.controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.segmented{
  display:flex;
  gap:10px;
  align-items:center;
}

.seg-btn{
  padding:10px 14px;
  font-size:16px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.55);
  color:#222;
  cursor:pointer;
}

.seg-btn.is-active{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.25);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  justify-content:center;
}

button{
  padding:10px 14px;
  font-size:16px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.55);
  color:#222;
  cursor:pointer;
}

button.primary{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.25);
  font-weight:700;
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* ===== Tablero ===== */
.board{
  margin-top:18px;
  position:relative;
}

/* Panel tipo mesa */
.board::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:22px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.25), rgba(0,0,0,.03) 70%);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  z-index:0;
}

/* ===== Imagen inicial ===== */
.start-image{
  position:relative;
  z-index:5;
  margin:16px auto 8px;
  width:min(260px,55vw);
  opacity:.96;
  transition: opacity .45s ease, transform .45s ease;
}

.start-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,0.10);
}

.start-image.is-hidden{
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  height:0;
  margin:0;
  overflow:hidden;
}

/* ===== Hint superior ===== */
.board-hint{
  position:relative;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.12);
  font-size:13px;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}

.board-hint::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(170,120,40,.55);
  box-shadow:0 0 0 2px rgba(170,120,40,.18);
}

/* ===== Grid ===== */
.grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:var(--gap);
  justify-content:center;
  margin-top:12px;
  padding:18px 12px 12px;
}

/* ===== Cartas ===== */
.card{
  width:var(--card-w);
  height:var(--card-h);
  border-radius:12px;
  background:transparent;
  border:none;
  box-shadow:0 14px 34px rgba(0,0,0,0.20);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transform:translateZ(0);
  perspective:800px;
}

.card img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* ===== Flip ===== */
.card-inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition: transform 420ms ease;
}

.card.is-revealed .card-inner{
  transform: rotateY(180deg);
}

.card-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
}

.card-front{ transform:rotateY(0deg); }
.card-back{ transform:rotateY(180deg); }

/* ===== Animación barajar ===== */
.grid.is-shuffling{
  animation: shuffleShake 520ms ease-in-out;
}

@keyframes shuffleShake{
  0%{ transform: translateY(0); }
  20%{ transform: translateY(-2px) rotate(-0.6deg); }
  50%{ transform: translateY(1px) rotate(0.7deg); }
  80%{ transform: translateY(-1px) rotate(-0.4deg); }
  100%{ transform: translateY(0); }
}

/* ===== Carta destacada ===== */
.card.is-highlight{
  box-shadow:
    0 0 0 2px rgba(170,120,40,.40),
    0 14px 34px rgba(0,0,0,.20);
  transform:translateY(-2px);
  transition: box-shadow .18s ease, transform .18s ease;
}

/* ===== Espiral ===== */
.spiral-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4; /* debajo del hint/imagen, encima del panel */
}

.spiral-layer svg{
  width:100%;
  height:100%;
}

.spiral-path{
  fill:none;
  stroke:rgba(170,120,40,.22);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.20));
}

.spiral-path.is-active{
  stroke:rgba(170,120,40,.40);
}

/* ===== Footer ===== */
.footer{
  margin-top:18px;
  opacity:.85;
  font-size:13px;
}

/* ===== Mobile ===== */
@media (max-width:480px){
  .wrap{ padding:18px 12px 24px; }
  .header h1{ font-size:30px; }
  .brand-logo{ width:120px; }
  :root{ --gap:10px; }
  .start-image{ width:min(230px,70vw); }
}