/* Ajustes propios de la versión 3D (la base viene de ../style.css) */
html, body { background: #f7f3e6; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }

#gl, #hud {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
}
#gl { z-index: 0; }
#hud { z-index: 1; cursor: crosshair; touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.overlay { background: rgba(40, 30, 20, 0.28); }

.tag3d {
  display: inline-block;
  font-size: 30px;
  color: #d33a2c;
  border: 3px solid #d33a2c;
  border-radius: 50% 45% 55% 40%;
  padding: 0 8px;
  transform: rotate(-8deg) translateY(-6px);
  text-shadow: none;
}

.hint a { color: #d33a2c; margin-left: 6px; }
.hint.center, .center { text-align: center; }
.hint.warn { color: #d33a2c; font-weight: bold; }

#onlineBtn { font-size: 32px; padding: 8px 40px; }
#netStatus { min-height: 22px; font-size: 17px; }

details#offlineBox {
  margin: 10px 0;
  padding: 2px 10px 6px;
  border: 2px dashed rgba(43, 43, 51, 0.35);
  border-radius: 10px 4px 12px 5px;
}
details#offlineBox summary {
  cursor: pointer;
  font-size: 21px;
  padding: 6px 0;
  color: #2b2b33;
}
details#offlineBox[open] summary { color: #d33a2c; }

.touch-only { display: none !important; }
body.touch .touch-only { display: grid !important; }
body.touch .desk-only { display: none !important; }
body.touch #hud { cursor: default; }

.pencil-spin {
  font-size: 40px;
  margin: 4px 0;
  display: inline-block;
  animation: pencil 1.2s ease-in-out infinite;
}
@keyframes pencil {
  0%, 100% { transform: rotate(-20deg) translateX(-10px); }
  50% { transform: rotate(20deg) translateX(10px); }
}

/* Aviso de girar el dispositivo: solo en táctil, en vertical y jugando */
#rotate { display: none; }
@media (orientation: portrait) {
  body.touch.ingame #rotate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 30;
    align-items: center;
    justify-content: center;
    background: rgba(40, 30, 20, 0.6);
  }
}

/* Pantallas pequeñas (móvil en horizontal o vertical) */
@media (max-height: 520px), (max-width: 560px) {
  .card { padding: 10px 14px 10px 44px; max-height: 96vh; }
  .paper {
    background-image:
      linear-gradient(90deg, transparent 30px, rgba(220, 70, 70, 0.55) 30px, rgba(220, 70, 70, 0.55) 32px, transparent 32px),
      repeating-linear-gradient(180deg, transparent 0, transparent 29px, rgba(90, 150, 210, 0.38) 29px, rgba(90, 150, 210, 0.38) 30px);
  }
  .title { font-size: 32px; }
  .subtitle { font-size: 17px; margin-bottom: 4px; }
  .row { margin: 5px 0; gap: 8px; }
  .row > label { width: 96px; font-size: 18px; }
  button { font-size: 17px; padding: 3px 10px; }
  button.big { font-size: 22px; margin: 8px auto 6px; }
  #onlineBtn { font-size: 26px; padding: 6px 30px; }
  .controls { font-size: 15px; }
  table.results { font-size: 17px; }
  table.results td { height: 24px; }
}