:root{
  --wood1:#7A4E2A;
  --wood2:#5D3A1F;
  --wood3:#8A5B33;

  --card-bg: rgba(0,0,0,.18);
  --card-border: rgba(255,255,255,.25);
  --text: #ffffff;
  --text-dim: rgba(255,255,255,.7);

  --die-size: 140px;
  --die-radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body{
  /* Base + vetas (sin imágenes) */
  background:
    /* brillo suave superior */
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.14), transparent 55%),
    /* sombra suave inferior */
    radial-gradient(1200px 700px at 80% 90%, rgba(0,0,0,.22), transparent 60%),

    /* vetas largas (madera) */
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.10) 0px,
      rgba(0,0,0,.06) 18px,
      rgba(255,255,255,.05) 34px,
      rgba(0,0,0,.08) 52px,
      rgba(0,0,0,.03) 80px
    ),

    /* variación tonal principal */
    linear-gradient(
      135deg,
      #7b4e2a 0%,
      #6a4123 35%,
      #8a5b33 70%,
      #5a371d 100%
    );

  /* leve “saturación cálida” */
  filter: saturate(1.08) contrast(1.05);

  display:flex;
  align-items:stretch;
  justify-content:center;
  margin:0;
  min-height:100vh;

  /* sensación de textura */
  background-blend-mode: soft-light, multiply, overlay, normal;
}

.app{
  width:min(900px, 100%);
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding: 16px 16px 22px;
}

/* Top bar */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top: 6px;
}

.mode-label{
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}

.mode-card{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(2px);
}

.mode-text{
  color: var(--text);
  font-weight: 700;
}

/* Switch */
.switch{
  position:relative;
  width: 52px;
  height: 30px;
  display:inline-block;
}
.switch input{ display:none; }
.slider{
  position:absolute; inset:0;
  background: rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  cursor:pointer;
  transition: .2s ease;
}
.slider::after{
  content:"";
  position:absolute;
  width: 24px; height: 24px;
  left: 3px; top: 2px;
  background:#fff;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
  transition: .2s ease;
}
.switch input:checked + .slider{
  background: rgba(255,255,255,.40);
}
.switch input:checked + .slider::after{
  transform: translateX(22px);
}

/* Stage */
.stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 0;
}

.dice-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
}

.gap{
  width: 0;
  height: 0;
}
.gap.show{
  width: 18px;
}

/* Dice */
.die{
  width: var(--die-size);
  height: var(--die-size);
  padding: calc(var(--die-size) * 0.12);
  background: #fff;
  border-radius: var(--die-radius);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 14px rgba(0,0,0,.25);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items:center;
  user-select:none;
}

.die.hidden{
  display:none;
}

/* Pips positions in 3x3 grid */
.pip{
  width: calc(var(--die-size) * 0.16);
  height: calc(var(--die-size) * 0.16);
  background:#000;
  border-radius:50%;
  opacity:0;
  transform: scale(.95);
}

/* Animation when rolling */
@keyframes pop {
  0%   { transform: scale(.96); }
  100% { transform: scale(1); }
}
.die.rolling{
  animation: pop .18s ease-out;
}

/* Footer */
.footer{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.roll-btn{
  width:100%;
  height:54px;
  border:none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 800;
  cursor:pointer;
  background:#ffffff;
  color:#2b1a0f;
  box-shadow: 0 12px 20px rgba(0,0,0,.18);
}

.roll-btn:active{
  transform: translateY(1px);
}

.hint{
  text-align:center;
  color: var(--text-dim);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 480px){
  :root{ --die-size: 120px; --die-radius: 20px; }
  .mode-label{ font-size: 15px; }
  .roll-btn{ font-size: 17px; }
}