/* === Mullats i Cremats - estils del joc (scoped a .mic-wrap) ===
   Tot està limitat a .mic-wrap perquè no afecti la resta de la pàgina WordPress. */

/* ---------- Ranquing public (shortcode) ---------- */
.mic-ranking{
  max-width:560px; margin:1em auto; padding:18px;
  background:#101018; color:#fff; border-radius:10px;
  font-family:'Courier New',monospace; box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.mic-ranking *{ box-sizing:border-box; }
.mic-rk-stats{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.mic-rk-team{ flex:1; min-width:160px; padding:12px; border-radius:8px; font-weight:bold; letter-spacing:1px; }
.mic-rk-team small{ display:block; font-weight:normal; opacity:.9; margin-top:4px; letter-spacing:0; }
.mic-rk-team.mic-rk-m{ background:#1f6fd6; }
.mic-rk-team.mic-rk-c{ background:#d2541a; }
.mic-rk-letter{ display:inline-block; min-width:22px; text-align:center; }
.mic-rk-title{ text-align:center; color:#ffd700; letter-spacing:4px; margin:6px 0 12px; }
.mic-rk-table{ width:100%; border-collapse:collapse; font-size:18px; }
.mic-rk-table td{ padding:7px 6px; border-bottom:1px solid rgba(255,255,255,.08); }
.mic-rk-pos{ color:#ffd35e; width:40px; }
.mic-rk-tm{ font-weight:bold; width:28px; text-align:center; }
.mic-rk-tm.mic-rk-m{ color:#39c5ff; }
.mic-rk-tm.mic-rk-c{ color:#ff7b00; }
.mic-rk-name{ letter-spacing:3px; }
.mic-rk-score{ text-align:right; color:#ffd700; }
.mic-rk-empty{ text-align:center; opacity:.7; padding:18px; }

.mic-wrap, .mic-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

.mic-wrap {
  --mic-max: 960px;
  display: block;
  width: 100%;
  margin: 1em 0;
  -webkit-tap-highlight-color: transparent;
}

.mic-wrap .mic-frame {
  position: relative;
  width: min(96vw, var(--mic-max));
  max-width: var(--mic-max);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background: #2B85FC;
  box-shadow: 0 0 0 4px #1a1a1a, 0 0 0 8px #444, 0 10px 30px rgba(0,0,0,.5);
  font-family: 'Courier New', monospace;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
/* res de menú contextual / selecció / callout en mantenir premut dins del joc */
.mic-wrap .mic-frame, .mic-wrap .mic-frame * {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}

.mic-wrap canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #2B85FC;
  touch-action: none;
}

/* ---------- Botons cantonada (so / pantalla completa) ---------- */
.mic-wrap #sound, .mic-wrap #fs {
  position: absolute;
  top: 10px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.4);
  color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; z-index: 6;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.mic-wrap #sound { right: 10px; }
.mic-wrap #fs { right: 58px; }
.mic-wrap #sound:active, .mic-wrap #fs:active { transform: scale(.92); }

/* ---------- Controls tàctils ---------- */
.mic-wrap #touch {
  position: absolute;
  inset: auto 0 0 0;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px 22px 20px;
  pointer-events: none;
  touch-action: none;
}
.mic-wrap #touch .pad { display: flex; gap: 20px; pointer-events: auto; align-items: flex-end; touch-action: none; }
.mic-wrap #touch .btn {
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  touch-action: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.mic-wrap #touch .btn[data-key="jump"]  { width: 96px; height: 96px; background: rgba(40,160,60,.5); }
.mic-wrap #touch .btn[data-key="shoot"] { background: rgba(200,70,20,.5); }
.mic-wrap #touch .btn.pressed { background: rgba(255,255,255,.55); }
.mic-wrap #touch .btn > * { pointer-events: none; }   /* tot el botó és superfície tàctil */

@media (pointer: coarse) {
  .mic-wrap #touch { display: flex; }
}

/* ---------- Pantalla completa ---------- */
.mic-wrap .mic-frame:fullscreen,
.mic-wrap .mic-frame:-webkit-full-screen {
  width: 100vw; height: 100vh; max-width: none;
  border-radius: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.mic-wrap .mic-frame:fullscreen canvas#game,
.mic-wrap .mic-frame:-webkit-full-screen canvas#game {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}

/* Fallback de pantalla completa per CSS (iOS, sense Fullscreen API) */
.mic-wrap .mic-pseudo-fs {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100vh !important; max-width: none !important;
  margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  z-index: 99999 !important; background: #000 !important;
  display: flex !important; align-items: center; justify-content: center;
}
.mic-wrap .mic-pseudo-fs canvas#game {
  width: min(100vw, calc(100vh * 16 / 9)) !important;
  height: min(100vh, calc(100vw * 9 / 16)) !important;
}
body.mic-noscroll { overflow: hidden !important; }
@media (orientation: portrait) {
  .mic-wrap .mic-pseudo-fs #rotate { display: flex; }
  .mic-wrap .mic-pseudo-fs canvas#game { visibility: hidden; }
  .mic-wrap .mic-pseudo-fs #touch { display: none; }
}

/* ---------- Avís: gira el mòbil (NOMÉS dins de pantalla completa vertical) ---------- */
.mic-wrap #rotate {
  display: none;
  position: absolute; inset: 0;
  background: #111; color: #ffd35e;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 24px; z-index: 5;
}
.mic-wrap #rotate .phone { font-size: 60px; animation: mic-tilt 1.4s ease-in-out infinite; }
.mic-wrap #rotate p { font-size: 14px; line-height: 1.7; letter-spacing: 1px; }
@keyframes mic-tilt { 0%,100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }

@media (orientation: portrait) {
  .mic-wrap .mic-frame:fullscreen #rotate,
  .mic-wrap .mic-frame:-webkit-full-screen #rotate { display: flex; }
  .mic-wrap .mic-frame:fullscreen canvas#game,
  .mic-wrap .mic-frame:-webkit-full-screen canvas#game { visibility: hidden; }
  .mic-wrap .mic-frame:fullscreen #touch,
  .mic-wrap .mic-frame:-webkit-full-screen #touch { display: none; }
}