/* ── Mineforge mobile/commercial polish ──
   Tutorial overlay, settings panel, ⚙ HUD button, portrait fit,
   iOS safe-area padding, swipe surface hints.
   Loaded by mineforge/index.html.
   ----------------------------------------------------------------- */

html, body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* === ⚙ SETTINGS BUTTON IN HUD === */
.mf-gear-btn{
  position: fixed;
  top: max(48px, calc(env(safe-area-inset-top) + 48px));
  right: 8px;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(245,158,11,0.5);
  background: rgba(24,20,32,0.78);
  color: #fbbf24;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 60;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mf-gear-btn:active{ background: rgba(245,158,11,0.32); transform: scale(0.94); }

/* === SETTINGS PANEL === */
.mf-set{
  position: fixed; inset: 0;
  background: rgba(5,3,12,0.88);
  z-index: 999;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mf-set.open{ display: flex; }
.mf-set .panel{
  width: min(380px, 92vw);
  background: linear-gradient(180deg, rgba(36,26,48,0.96), rgba(10,10,20,0.96));
  border: 1px solid rgba(245,158,11,0.45);
  border-radius: 14px;
  padding: 22px 20px 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.65), 0 0 22px rgba(245,158,11,0.18);
  color: #e2e8f0;
  font-family: 'Rajdhani', sans-serif;
}
.mf-set h3{
  margin: 0 0 14px; font-size: 14px; letter-spacing: 4px;
  color: #fbbf24; text-transform: uppercase; text-align: center;
  font-family: 'Cinzel', serif; font-weight: 800;
}
.mf-set .row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 0;
  border-top: 1px solid rgba(245,158,11,0.15);
}
.mf-set .row:first-of-type{ border-top: 0; }
.mf-set .row label{
  font-size: 12px; color: #94a3b8; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 600;
}
.mf-set input[type=range]{
  flex: 1; max-width: 160px;
  accent-color: #f59e0b;
}
.mf-set .tg{
  width: 48px; height: 24px;
  border-radius: 12px;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.35);
  position: relative;
  cursor: pointer;
  transition: background 0.18s;
}
.mf-set .tg::after{
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fbbf24;
  transition: left 0.18s;
}
.mf-set .tg.on{ background: rgba(245,158,11,0.55); }
.mf-set .tg.on::after{ left: 26px; background: #fde047; }
.mf-set .val{ font-size: 11px; color: #fbbf24; min-width: 36px; text-align: right; font-family: 'JetBrains Mono', monospace; }
.mf-set .actions{ display: flex; gap: 8px; margin-top: 16px; }
.mf-set .btn{
  flex: 1; padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.18);
  color: #fbbf24;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
}
.mf-set .btn:active{ background: rgba(245,158,11,0.5); }
.mf-set .btn.primary{ background: rgba(34,197,94,0.18); color: #22c55e; border-color: rgba(34,197,94,0.5); }

/* === TUTORIAL OVERLAY === */
.mf-tut{
  position: fixed; inset: 0;
  background: rgba(5,3,12,0.9);
  z-index: 1000;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mf-tut.open{ display: flex; }
.mf-tut .card{
  width: min(360px, 92vw);
  background: linear-gradient(180deg, rgba(36,26,48,0.97), rgba(10,10,20,0.97));
  border: 1px solid rgba(245,158,11,0.55);
  border-radius: 14px;
  padding: 24px 22px;
  text-align: center;
  color: #e2e8f0;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 28px rgba(245,158,11,0.22);
}
.mf-tut .icn{
  font-size: 48px; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 14px rgba(245,158,11,0.6));
}
.mf-tut .ttl{
  font-family: 'Cinzel', serif;
  font-size: 16px; letter-spacing: 4px; color: #fbbf24;
  text-transform: uppercase; margin-bottom: 12px; font-weight: 800;
  text-shadow: 0 0 10px rgba(245,158,11,0.5);
}
.mf-tut .bdy{
  font-size: 14px; color: #cbd5e1; line-height: 1.55;
  max-width: 320px; margin: 0 auto 16px;
}
.mf-tut .dots{ display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.mf-tut .dots i{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(245,158,11,0.3);
  transition: background 0.2s;
}
.mf-tut .dots i.on{ background: #fde047; box-shadow: 0 0 6px rgba(253,224,71,0.7); }
.mf-tut .row{ display: flex; gap: 8px; }
.mf-tut .btn{
  flex: 1; padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.18);
  color: #fbbf24;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
}
.mf-tut .btn:active{ background: rgba(245,158,11,0.5); }
.mf-tut .btn.next{ background: rgba(34,197,94,0.18); color: #22c55e; border-color: rgba(34,197,94,0.5); }

/* === PORTRAIT FIT ===
   On phones the canvas should breathe — drop the desktop level-list
   sidebar gutter, tighten the stats bar, lift mobile controls above
   the home indicator, and shrink touch targets so the board sees as
   much of the viewport as possible. */
@media (orientation: portrait){
  #stats-bar{
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  #stats-bar .stat{ padding: 2px 6px !important; }
  #stats-bar .stat .label{ font-size: 0.55rem !important; }
  #stats-bar .stat .val{ font-size: 0.92rem !important; }
  #stats-bar .stats-actions .action-btn{
    padding: 4px 10px !important;
    font-size: 0.68rem !important;
  }
  /* hide the desktop level-list rail in portrait — exposed via settings */
  #level-list{ display: none !important; }
  /* let the canvas fill */
  #board-wrap{ padding-bottom: env(safe-area-inset-bottom) !important; }
  /* shrink the on-screen d-pad and tuck it above the home indicator */
  #mobile-controls{
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .arrow-pad .arrow{
    width: 50px !important; height: 50px !important;
    font-size: 22px !important;
  }
  .mf-gear-btn{
    top: max(44px, calc(env(safe-area-inset-top) + 44px));
    right: 6px;
    width: 32px; height: 32px; font-size: 16px;
  }
}

/* === LANDSCAPE — slim the gear === */
@media (orientation: landscape){
  .mf-gear-btn{ width: 30px; height: 30px; font-size: 15px; }
}

/* === Touch swipe hint (first 3s of fresh level) === */
.mf-swipe-hint{
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 6px;
  color: #fbbf24;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  pointer-events: none;
  opacity: 0;
  z-index: 12;
  transition: opacity 0.35s;
}
.mf-swipe-hint.on{ opacity: 0.95; }