/* VATSAL.LOL V3 mobile guardrails.
   Late-loaded, scoped polish only: preserve each game's design and gameplay. */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin-inline: 0;
  overscroll-behavior-x: none;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
[role="button"],
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
a.restart-button,
a.retry-button,
a.keep-playing-button,
a.undo-button {
  min-height: 44px;
  touch-action: manipulation;
}

input,
textarea,
select {
  max-width: 100%;
  font-size: 16px;
}

.vatsal-header {
  max-width: 100%;
  min-height: 44px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.vatsal-home {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.vatsal-related {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 480px) {
  :root {
    --v3-safe-top: env(safe-area-inset-top, 0px);
    --v3-safe-right: env(safe-area-inset-right, 0px);
    --v3-safe-bottom: env(safe-area-inset-bottom, 0px);
    --v3-safe-left: env(safe-area-inset-left, 0px);
    --v3-header-h: 0px;
  }

  body {
    min-width: 0;
  }

  h1,
  .title,
  .game-title,
  .home-title,
  .menu-title,
  .overlay-title,
  .result-title,
  .score-title,
  .screen-title,
  .header {
    overflow-wrap: anywhere;
  }

  button {
    max-width: 100%;
  }

  /* 2048 */
  body:not(.game-started) .start-page .container {
    min-height: calc(100dvh - var(--v3-header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px calc(16px + var(--v3-safe-bottom));
  }

  body.game-started {
    overflow: hidden;
    touch-action: none;
  }

  body.game-started .game-page .container {
    height: calc(100dvh - var(--v3-header-h));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: center;
    gap: 8px;
    padding: 8px 12px calc(8px + var(--v3-safe-bottom));
  }

  body.game-started .game-explanation {
    font-size: 0.82rem;
    line-height: 1.25;
    margin: 0;
  }

  /* Full-screen canvas/touch games */
  #home.screen,
  #game.screen,
  #startScreen.v-screen,
  #gameScreen.v-screen,
  #pauseScreen.v-screen,
  #overScreen.v-screen,
  #menuScreen,
  #playScreen {
    max-width: 100vw;
  }

  #game.screen:not(.hidden),
  #gameScreen.v-screen.active {
    overflow: hidden;
    touch-action: none;
  }

  #result.screen,
  #overScreen.v-screen,
  #resultScreen,
  #scoreScreen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bubbles */
  body:has(#home.screen:not(.hidden)),
  body:has(#game.screen:not(.hidden)) {
    overflow: hidden !important;
  }

  body:has(#result.screen:not(.hidden)) {
    overflow-y: auto !important;
  }

  #home.screen {
    min-height: 100dvh;
    padding-bottom: calc(16px + var(--v3-safe-bottom));
  }

  #home .home-title {
    font-size: clamp(3rem, 19vw, 5.25rem);
    line-height: 0.86;
  }

  #home .home-desc,
  #home .home-best {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
  }

  #game .hud {
    max-width: calc(100vw - 16px);
    gap: 6px;
  }

  #game .hud-item {
    min-width: 0;
  }

  /* Bug Smash */
  #gameScreen .hud {
    max-width: calc(100vw - 12px);
    gap: 6px;
    align-items: stretch;
  }

  #gameScreen .hud-item {
    min-width: 0;
  }

  #infestationWrapper {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    max-width: calc(100vw - 20px);
  }

  /* Color Switch */
  body:has(#gameArea:not(.hidden)) {
    overflow: hidden;
    touch-action: none;
  }

  #startOverlay.screen-panel {
    max-width: calc(100vw - 24px);
    padding: 18px;
  }

  .canvas-wrapper canvas,
  #gameCanvas {
    width: min(100vw - 24px, 400px) !important;
    height: auto !important;
    max-height: calc(100dvh - 130px);
  }

  /* Draw a Circle */
  body:has(#canvas + .controls) {
    overflow: hidden;
    touch-action: none;
  }

  .instructions {
    max-width: calc(100vw - 20px);
  }

  /* Emoji to Movies */
  #startScreen.start-screen {
    overflow: hidden;
  }

  #startScreen .start-inner {
    min-height: calc(100dvh - var(--v3-header-h));
    justify-content: center;
    gap: 12px;
    padding: 10px 14px calc(12px + var(--v3-safe-bottom));
  }

  #startScreen .title {
    font-size: clamp(2rem, 11vw, 3.4rem);
    line-height: 0.98;
  }

  #startScreen .subtitle {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  #startScreen .how {
    display: none;
  }

  #startScreen .mode-buttons {
    position: sticky;
    bottom: calc(8px + var(--v3-safe-bottom));
    width: 100%;
    gap: 10px;
  }

  .game-screen {
    overflow: hidden;
  }

  .game-screen .topbar {
    gap: 8px;
  }

  .game-screen .stats {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .game-screen .stat {
    min-width: 0;
    padding: 7px 8px;
  }

  .quiz-card {
    max-width: calc(100vw - 20px);
  }

  /* Fast Tap / Flash Memory / Guess the Lie */
  #screen,
  #game,
  .app,
  .shell {
    max-width: 100vw;
  }

  #menuScreen {
    min-height: calc(100dvh - var(--v3-header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px calc(12px + var(--v3-safe-bottom));
  }

  #menuScreen .menu-title {
    font-size: clamp(2.5rem, 15vw, 4.4rem);
    line-height: 0.9;
  }

  #menuScreen .menu-sub,
  #menuScreen .menu-rules {
    font-size: 0.92rem;
    line-height: 1.3;
  }

  #menuScreen .mode-grid {
    gap: 8px;
  }

  #playScreen input#input {
    inputmode: numeric;
    width: min(76vw, 280px);
    text-align: center;
  }

  /* HardWord */
  body:has(#game-app[style*="grid"]) {
    overflow: hidden;
  }

  #game-app {
    min-height: calc(100dvh - var(--v3-header-h));
    height: calc(100dvh - var(--v3-header-h)) !important;
    align-content: center;
    padding: 8px 10px calc(8px + var(--v3-safe-bottom));
  }

  #game-app .header {
    align-items: center;
    gap: 8px;
  }

  #game-app .title h1 {
    font-size: clamp(1.75rem, 9vw, 2.7rem);
    letter-spacing: 2px;
  }

  .guess-board {
    row-gap: 5px;
    margin-bottom: 6px;
  }

  .guess-row {
    grid-template-columns: repeat(4, minmax(34px, 10.5vw)) minmax(54px, 16vw);
    gap: 5px;
  }

  .letter-box,
  .score {
    width: auto;
    height: clamp(34px, 6dvh, 42px);
    font-size: clamp(1.35rem, 5.8vw, 1.8rem);
  }

  .keyboard {
    width: 100%;
    margin-top: 10px;
  }

  .krow {
    gap: 4px;
  }

  .key {
    min-width: 0;
    flex: 1 1 0;
    height: clamp(36px, 6dvh, 44px);
    font-size: clamp(0.95rem, 4.4vw, 1.2rem);
  }

  .key.wide {
    flex-basis: 1.7em;
  }

  .guess-row.shake {
    animation: hardwordShake 260ms linear;
  }

  @keyframes hardwordShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(4px); }
  }

  /* Mastermind */
  .page:has(.game) {
    width: min(100vw, 760px);
    padding: 10px 12px calc(12px + var(--v3-safe-bottom));
  }

  .page .rules {
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .rows {
    max-width: 100%;
  }

  /* Memory Tiles */
  body:has(.memory-grid),
  body:has(#board.memory-board) {
    overflow: hidden;
  }

  .memory-grid,
  #board.memory-board {
    margin-inline: auto;
  }

  /* One Rule Only */
  .v-screen-body.center .rule-card {
    max-width: calc(100vw - 24px);
  }

  /* PaddleClub / Snake / Sudoku */
  .game-wrap,
  .game-body,
  .screen-body {
    max-width: 100vw;
  }

  .game-wrap canvas,
  .game-body canvas,
  #c {
    width: min(100vw - 20px, 400px) !important;
    height: auto !important;
    max-height: calc(100dvh - 210px);
  }

  .dpad,
  .touch-controls {
    padding-bottom: var(--v3-safe-bottom);
  }

  /* Stacking / Tetris result screens are allowed to scroll */
  body.game-ended,
  body:has(.game-over),
  body:has(#gameOver),
  body:has(#overScreen.active) {
    overflow-y: auto !important;
  }

  /* Tower of Hanoi */
  .disk-control,
  .controls {
    flex-wrap: wrap;
  }

  .game-area {
    max-width: 100%;
  }

  .peg-container {
    min-width: 0;
  }

  /* Under Limit */
  .game:has(#mug) {
    width: min(100vw - 24px, 520px);
    min-height: calc(100dvh - var(--v3-header-h));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-bottom: calc(12px + var(--v3-safe-bottom));
  }

  .game:has(#mug) .hint::before {
    content: "Hold your nerve: ";
  }

  .stack {
    max-height: 48dvh;
  }

  #mug {
    touch-action: manipulation;
  }

  /* Which Number */
  .guess-input-row {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .guess-input-row input {
    font-size: 18px;
    text-align: center;
  }

  /* Would You Press The Button */
  body:has(#pressStartScreen:not(.hidden)) {
    overflow: hidden;
  }

  #pressStartScreen {
    min-height: calc(100dvh - var(--v3-header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 16px 18px calc(18px + var(--v3-safe-bottom));
  }

  #questionCounter {
    color: var(--muted, #888);
    font-size: 0.88rem;
    margin-top: 4px;
  }

  body.press-playing {
    overflow: hidden;
  }

  .container {
    max-width: 100vw;
  }

  body.press-playing .container {
    min-height: calc(100dvh - var(--v3-header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: calc(12px + var(--v3-safe-bottom));
  }

  body.press-finished {
    overflow-y: auto;
  }

  /* Life in Numbers: calm the highest-frequency motion on mobile. */
  .heart,
  .heart-pulse-ring,
  .metric-card,
  .slow-star,
  .tape-row {
    animation-duration: 7s !important;
  }
  /* Life in Numbers: lock the start screen to exactly one viewport. */
  body:has(#hero):not(.revealed) {
    overflow: hidden;
    height: 100dvh;
  }

  body:has(#hero):not(.revealed) #hero {
    min-height: calc(100dvh - var(--v3-header-h));
  }

  .generation-layout,
  .generation-tape,
  .tape-row {
    max-width: 100%;
    overflow: hidden;
  }

  .visual-stage {
    max-width: 100%;
    overflow: hidden;
  }

  /* Future Timeline SVG Mobile Containment */
  .earth-fall-dry-wrap,
  #earth-fall-dry-wrap,
  .svg-wrap-mobile {
    max-width: 100% !important;
    max-height: 75vh !important;
    overflow: hidden !important;
  }

  /* Everything Is Progressing GPU acceleration */
  .progress-fill,
  .progress-bar-fill {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Flash Memory Focus Accessibility */
  .diff-btn:focus-visible,
  .mode-btn:focus-visible,
  .difficulty-btn:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
  }

  /* Guess The Lie Touch Target Compliance */
  .option-btn,
  .choice-btn,
  .lie-option {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hardword Keyboard basis on narrow screens */
  .key-tile,
  .keyboard-row button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Jokes text container wrap */
  .joke-text,
  .joke-content {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Let's Settle tactile tap feedback */
  button:active,
  .btn:active,
  .choice-card:active {
    transform: scale(0.98);
    transition: transform 0.05s ease;
  }

  /* Luck or Predict 3D card flip containment */
  .prediction-card,
  .card-flip-wrap {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-style: preserve-3d;
  }

  /* Mastermind color palette wrap */
  .color-palette,
  .peg-picker {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  /* Jump Scare overlay positioning */
  .scare-overlay,
  #scareOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* One Light Day grid container scaling */
  .grid-board,
  .light-grid {
    max-height: calc(100dvh - 120px) !important;
    margin: 0 auto !important;
  }

  /* Paddle Club touch action lock */
  .paddle-canvas,
  #paddleCanvas {
    touch-action: none !important;
  }

  /* Snake DPAD tactile feedback */
  .dpad-btn:active,
  .control-btn:active {
    background-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(0.94) !important;
  }

  /* Soundbar tile active state */
  .sound-tile:active,
  .pad-button:active {
    transform: scale(0.96) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5) !important;
  }

  /* Standing balance HUD padding */
  .standing-hud,
  .balance-gauge {
    gap: 8px !important;
    padding-bottom: calc(8px + var(--v3-safe-bottom)) !important;
  }

  /* Tower of Hanoi canvas touch lock */
  .hanoi-canvas,
  #hanoiCanvas {
    touch-action: none !important;
  }

  /* Which Number fluid grid */
  .number-grid,
  .num-board {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)) !important;
    gap: 8px !important;
  }

  /* Wordle touch key targets */
  .wordle-key,
  .key-button {
    min-height: 48px !important;
    touch-action: manipulation !important;
  }

  /* Would You Press The Button container bounds */
  body.press-playing .container {
    min-height: calc(100dvh - 80px) !important;
  }

  /* XO responsive grid cells */
  .xo-grid button,
  .board-cell {
    width: min(22vw, 100px) !important;
    height: min(22vw, 100px) !important;
  }

  /* 8bit Lab pixelated canvas rendering */
  .lab-canvas,
  #gameCanvas,
  canvas {
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
  }

  /* Can You Guess Indian Mom safe bottom */
  .choice-buttons,
  .mom-answers {
    padding-bottom: calc(16px + var(--v3-safe-bottom)) !important;
  }

  /* Memory Tiles touch action */
  .memory-tile,
  .tile-btn {
    touch-action: manipulation !important;
  }

  /* Under Limit progress transition */
  .progress-bar-fill,
  .limit-bar-fill {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

@media (max-width: 380px) {
  .vatsal-header {
    min-height: 42px;
  }

  .mode-btn,
  .action-btn,
  .btn-play,
  .primary-btn,
  .result-btn,
  .small-btn,
  .option-btn {
    padding-left: 12px;
    padding-right: 12px;
  }

  #startScreen .mode-buttons {
    gap: 8px;
  }

  .buttons {
    gap: 12px;
  }
}