/* ─── CrazyGames Layout (Portrait game in landscape iframe) ─── */
/* Included only in CrazyGames builds via build.js */
/*
 * CrazyGames iframe sizes:
 *   Min:  821 × 462  (sidebar open)
 *   Norm: 907 × 510  (sidebar open)
 *   HD:  1366 × 768  (fullscreen)
 *   FHD: 1920 × 1080 (fullscreen)
 *
 * Strategy: Use dvh/vw + clamp() for fluid scaling across all sizes.
 * All screens must fit within 462px minimum height without scrolling.
 */

/* =========================================================
   SHARED
   ========================================================= */
.seo-content { display: none; }

/* Appbars — scale height with viewport */
.mode-appbar,
.select-appbar,
.daily-appbar {
  width: 100%;
  height: clamp(28px, 6dvh, 44px);
  padding: 0 16px;
  box-sizing: border-box;
}

/* Game navbar */
.nav-bar {
  height: clamp(28px, 6dvh, 44px);
}
.nav-inner {
  width: 100%;
  max-width: 100%;
  height: clamp(28px, 6dvh, 44px);
  padding: 0 16px;
  box-sizing: border-box;
}

/* Container width — wider on bigger screens, narrower on small */
:root {
  --cg-container-w: clamp(300px, 45vw, 480px);
}

/* =========================================================
   MODE SELECT
   Total height budget @462px: appbar(28) + padding(8) + 3×card(~52ea) + gaps(8)
     + continue(28) + stats(24) ≈ 252px → fits comfortably
   ========================================================= */
.mode-screen {
  overflow: hidden;
  align-items: center;
}

.mode-cards-container {
  width: var(--cg-container-w);
  gap: clamp(8px, 2dvh, 16px);
  padding: clamp(8px, 3dvh, 20px) clamp(8px, 1.5vw, 16px);
  justify-content: center;
  align-items: stretch;
  flex: 1 1 auto;
  box-sizing: border-box;
}

.mode-card {
  height: clamp(48px, 12dvh, 84px);
  padding: 0 clamp(10px, 2vw, 20px);
  gap: clamp(8px, 1.5vw, 14px);
  border-width: 2px;
  box-sizing: border-box;
}

.mode-card-icon {
  width: clamp(32px, 8dvh, 56px);
  height: clamp(32px, 8dvh, 56px);
  border-width: 2px;
  flex-shrink: 0;
}
.mode-card-icon svg {
  width: clamp(20px, 5dvh, 36px);
  height: clamp(20px, 5dvh, 36px);
}

.mode-card-name {
  font-size: clamp(0.7rem, 1.8dvh, 1rem);
  white-space: nowrap;
}
.mode-card-desc {
  font-size: clamp(0.55rem, 1.3dvh, 0.8rem);
  white-space: nowrap;
}
.mode-card-progressbar {
  height: clamp(3px, 0.6dvh, 5px);
  margin-top: 2px;
}

.mode-continue-btn {
  height: clamp(28px, 7dvh, 44px);
  padding: 0 16px;
  font-size: clamp(0.65rem, 1.5dvh, 0.85rem);
  margin-top: clamp(4px, 1dvh, 10px);
}

.mode-stats-bar {
  position: absolute !important;
  bottom: clamp(4px, 1dvh, 12px);
  left: 0;
  right: 0;
  width: var(--cg-container-w);
  margin: 0 auto !important;
  height: clamp(22px, 5dvh, 36px);
  padding: 0 12px;
  font-size: clamp(0.55rem, 1.3dvh, 0.7rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   PUZZLE SELECT
   appbar + tabs + scrollable grid
   ========================================================= */
.select-screen {
  align-items: center;
}
.select-screen > *:not(.bigpic-overlay):not(.select-appbar) {
  max-width: var(--cg-container-w);
  width: 100%;
}

.select-tabs {
  padding: 0 12px;
}
.select-tab {
  padding: clamp(6px, 1.5dvh, 12px) 0;
  font-size: clamp(0.65rem, 1.5dvh, 0.85rem);
}
.select-tab-indicator {
  height: clamp(2px, 0.5dvh, 4px);
}

.select-grid {
  padding: clamp(4px, 1dvh, 8px) 12px;
}

/* =========================================================
   GAME SCREEN
   appbar + board (fills remaining) + info + buttons
   ========================================================= */
.main-layout {
  height: 100dvh;
  padding: 0 4px;
}
.board-container {
  /* Leave room for navbar + info row + button bar */
  max-height: calc(100dvh - clamp(130px, 28dvh, 180px));
}

.game-buttons {
  gap: clamp(4px, 1vw, 10px);
}
.game-btn--small {
  width: clamp(30px, 7dvh, 44px);
  height: clamp(30px, 7dvh, 44px);
}
.game-btn--large {
  width: clamp(38px, 9dvh, 52px);
  height: clamp(38px, 9dvh, 52px);
}

/* =========================================================
   DAILY CALENDAR
   appbar + today-card(hidden) + calendar(fills) + play btn
   ========================================================= */
.daily-screen {
  overflow: hidden !important;
  align-items: center !important;
}

/* Force content children to be width-constrained (not appbar) */
.daily-screen > *:not(.daily-appbar) {
  max-width: var(--cg-container-w) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.daily-today-card {
  max-width: var(--cg-container-w) !important;
  margin: clamp(2px, 0.5dvh, 8px) auto !important;
  padding: clamp(6px, 1.5dvh, 16px) !important;
  gap: clamp(6px, 1vw, 14px) !important;
}

.daily-calendar {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-width: clamp(220px, 30vw, 360px) !important;
  margin: clamp(2px, 0.5dvh, 6px) auto !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.daily-cal-header {
  margin-bottom: clamp(2px, 0.5dvh, 6px);
  flex-shrink: 0;
}
.daily-cal-header button {
  font-size: clamp(0.7rem, 1.6dvh, 1rem);
}
.daily-cal-weekdays {
  flex-shrink: 0;
}
.daily-cal-grid {
  gap: clamp(1px, 0.3dvh, 3px);
  flex: 0 1 auto;
  min-height: 0;
  align-content: start;
}
.daily-cal-day {
  font-size: clamp(0.55rem, 1.4dvh, 0.85rem);
  aspect-ratio: 1 !important;
  max-height: clamp(40px, 8dvh, 56px);
  max-width: clamp(40px, 8dvh, 56px);
}

.daily-play-btn {
  flex-shrink: 0 !important;
  height: clamp(28px, 7dvh, 44px) !important;
  margin: clamp(2px, 0.5dvh, 6px) auto clamp(4px, 1dvh, 8px) !important;
  padding: 0 16px !important;
  font-size: clamp(0.65rem, 1.5dvh, 0.85rem);
  max-width: var(--cg-container-w) !important;
}

/* =========================================================
   CLEAR SCREEN
   title + preview(flexible) + stats + buttons
   ========================================================= */
.gameclear-content {
  padding-bottom: 0;
  gap: clamp(8px, 2dvh, 20px);
}

.gameclear-title {
  height: clamp(28px, 7dvh, 56px);
  width: auto;
  margin-top: clamp(4px, 1dvh, 20px);
}

.gameclear-preview {
  max-width: clamp(120px, 30dvh, 320px);
  max-height: clamp(120px, 30dvh, 320px);
}

.gameclear-stats {
  gap: clamp(12px, 3vw, 32px);
}
.gameclear-stat {
  font-size: clamp(0.85rem, 2dvh, 1.4rem);
}
.gameclear-stat-label {
  font-size: clamp(0.5rem, 1.2dvh, 0.7rem);
}

.gameclear-buttons {
  position: relative;
  bottom: auto;
  padding: clamp(4px, 1dvh, 12px) 16px;
}
.gameclear-btn {
  height: clamp(28px, 7dvh, 44px);
  font-size: clamp(0.6rem, 1.4dvh, 0.8rem);
  min-width: clamp(60px, 10vw, 100px);
  padding: 0 clamp(8px, 1.5vw, 16px);
}

/* =========================================================
   GAME OVER SCREEN
   ========================================================= */
.gameover-content {
  gap: clamp(8px, 2dvh, 20px);
}
.gameover-title {
  font-size: clamp(1.2rem, 4dvh, 2rem);
}
.gameover-btn {
  height: clamp(32px, 8dvh, 48px);
  font-size: clamp(0.65rem, 1.5dvh, 0.85rem);
  padding: 0 clamp(12px, 2vw, 24px);
}