/**
 * Code Kids — Responsive Adaptive Layout
 * Stage 7.1C.4
 *
 * Goal:
 * Make the accepted 7.1C UI scale fluidly across phone viewports.
 *
 * Reference device:
 * Galaxy S21 FE 5G
 * - portrait app viewport observed: ~360 × 699 CSS px
 * - landscape app viewport observed: ~699 × 330 CSS px
 *
 * These are reference points only — not hard-coded device targets.
 */

/* ==========================================================
   Shared adaptive tokens
   ========================================================== */

:root {
  --ck-adaptive-gap: clamp(4px, 1.1vw, 9px);
  --ck-adaptive-radius: clamp(11px, 2.1vw, 16px);
  --ck-adaptive-control-h: clamp(40px, 6.4dvh, 52px);
  --ck-adaptive-key-h: clamp(38px, 5.8dvh, 46px);
}

/* ==========================================================
   PORTRAIT — phones
   Designed for roughly 320–480 CSS px width.
   ========================================================== */

@media (orientation: portrait) and (max-width: 699px) {
  .app-shell {
    padding-inline:
      max(clamp(6px, 2vw, 10px), env(safe-area-inset-left))
      max(clamp(6px, 2vw, 10px), env(safe-area-inset-right));
  }

  #screen-game .game-grid {
    gap: clamp(5px, 1.6vw, 8px);
  }

  #screen-game .preview-panel,
  #screen-game .code-panel {
    border-radius: var(--ck-adaptive-radius);
  }

  #screen-game .preview-stage {
    min-height: clamp(100px, 17dvh, 148px);
    height: clamp(100px, 17dvh, 148px);
    max-height: 148px;
  }

  #screen-game .preview-object {
    max-width: min(210px, 64vw);
    max-height: min(210px, 19dvh);
  }

  #screen-game .code-panel-topbar {
    gap: clamp(5px, 1.8vw, 9px);
    margin-bottom: clamp(9px, 2.8vw, 14px);
  }

  #screen-game .code-panel-topbar .code-actions {
    grid-template-columns: minmax(58px, 0.7fr) minmax(92px, 1.3fr);
    gap: clamp(4px, 0.8vw, 7px);
  }

  #screen-game .code-panel-topbar .code-actions .btn {
    min-height: var(--ck-adaptive-control-h);
    padding-inline: clamp(6px, 2.2vw, 10px);
    font-size: clamp(0.82rem, 3.5vw, 0.98rem);
  }

  #screen-game .mobile-pause-slot {
    flex-basis: var(--ck-adaptive-control-h);
    min-width: var(--ck-adaptive-control-h);
    min-height: var(--ck-adaptive-control-h);
  }

  #screen-game .mobile-pause-slot #btn-pause {
    width: var(--ck-adaptive-control-h);
    height: var(--ck-adaptive-control-h);
  }

  #screen-game #code-input {
    min-height: clamp(104px, 18dvh, 148px);
    padding: clamp(10px, 2.8vw, 14px);
    font-size: clamp(0.92rem, 3.9vw, 1.05rem);
    line-height: 1.45;
  }

  #screen-game .code-panel-footer {
    min-height: clamp(28px, 4.5dvh, 36px);
    margin-top: clamp(5px, 1.8vw, 9px);
  }

  /* Contextual keyboard stretches to the actual phone width. */
  #screen-game #code-kids-keyboard.ck-keyboard--custom {
    gap: clamp(3px, 1vw, 5px);
    padding: clamp(4px, 1.2vw, 6px);
    border-radius: var(--ck-adaptive-radius);
  }

  #screen-game #code-kids-keyboard .ck-keyboard__row {
    gap: clamp(3px, 1vw, 5px);
  }

  #screen-game #code-kids-keyboard .ck-key {
    min-height: var(--ck-adaptive-key-h);
    padding-inline: clamp(4px, 1.6vw, 7px);
    border-radius: clamp(8px, 2.1vw, 11px);
    font-size: clamp(0.72rem, 3.2vw, 0.92rem);
  }

  /* Long-program keyboard remains compact instead of taking over the screen. */
  #screen-game #code-kids-keyboard[data-profile="L10_MIN_PROGRAM_VALUES"] .ck-key,
  #screen-game #code-kids-keyboard[data-profile="PROGRAM_FIRST"] .ck-key {
    min-height: clamp(36px, 5.2dvh, 42px);
    font-size: clamp(0.68rem, 2.9vw, 0.86rem);
  }
}

/* Small / short portrait phones. */
@media (orientation: portrait) and (max-width: 360px),
       (orientation: portrait) and (max-height: 640px) {
  #screen-game .preview-stage {
    min-height: 92px;
    height: clamp(92px, 15dvh, 118px);
    max-height: 118px;
  }

  #screen-game .preview-object {
    max-height: min(170px, 16dvh);
  }

  #screen-game #code-input {
    min-height: 96px;
    height: clamp(96px, 17dvh, 124px);
  }

  #screen-game #code-kids-keyboard .ck-key {
    min-height: 38px;
  }

  #screen-game .task-panel #btn-hint {
    min-height: 40px;
  }
}

/* Larger phones: give the useful space to preview/editor, not huge controls. */
@media (orientation: portrait) and (min-width: 400px) and (min-height: 740px) {
  #screen-game .preview-stage {
    height: clamp(132px, 19dvh, 170px);
    max-height: 170px;
  }

  #screen-game #code-input {
    min-height: clamp(128px, 19dvh, 166px);
  }
}

/* ==========================================================
   LANDSCAPE — phone working mode
   Reference: 699 × 330 CSS px.
   ========================================================== */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  :root {
    --ck-landscape-gap: clamp(3px, 0.6vw, 6px);
    --ck-side-keyboard-width: clamp(112px, 21vw, 168px);
  }

  .app-shell {
    padding:
      max(clamp(3px, 1.2vh, 6px), env(safe-area-inset-top))
      max(clamp(4px, 0.9vw, 8px), env(safe-area-inset-right))
      max(clamp(3px, 1.2vh, 6px), env(safe-area-inset-bottom))
      max(clamp(4px, 0.9vw, 8px), env(safe-area-inset-left));
  }

  #screen-game .game-grid {
    gap: var(--ck-landscape-gap);
  }

  body.ck-custom-keyboard-active.ck-keyboard-side-right #screen-game .game-grid {
    grid-template-columns:
      minmax(0, clamp(160px, 30vw, 250px))
      minmax(0, 1fr)
      var(--ck-side-keyboard-width);
  }

  body.ck-custom-keyboard-active.ck-keyboard-side-left #screen-game .game-grid {
    grid-template-columns:
      var(--ck-side-keyboard-width)
      minmax(0, 1fr)
      minmax(0, clamp(160px, 30vw, 250px));
  }

  #screen-game .preview-panel,
  #screen-game .code-panel {
    padding: clamp(6px, 1.2vw, 9px);
    border-radius: clamp(11px, 1.8vw, 15px);
  }

  #screen-game .preview-level-heading {
    margin-bottom: clamp(3px, 1vh, 6px);
    font-size: clamp(0.66rem, 1.65vw, 0.86rem);
  }

  #screen-game .preview-object {
    max-width: min(160px, 76%);
    max-height: min(160px, 70%);
  }

  #screen-game .feedback {
    min-height: clamp(14px, 4.5vh, 18px);
    margin-top: clamp(3px, 1.2vh, 6px);
    font-size: clamp(0.62rem, 1.45vw, 0.72rem);
  }

  #screen-game .code-panel-topbar {
    grid-template-columns: minmax(0, 1fr) var(--ck-landscape-toolbar-h);
    gap: clamp(4px, 0.8vw, 7px);
    min-height: var(--ck-landscape-toolbar-h);
    margin-bottom: clamp(4px, 1.5vh, 8px);
  }

  :root {
    --ck-landscape-toolbar-h: clamp(36px, 13vh, 44px);
  }

  #screen-game .code-panel-topbar .code-actions {
    grid-template-columns: minmax(58px, 0.7fr) minmax(92px, 1.3fr);
    gap: clamp(4px, 0.8vw, 7px);
  }

  #screen-game .code-panel-topbar .code-actions .btn,
  #screen-game .mobile-pause-slot #btn-pause {
    min-height: var(--ck-landscape-toolbar-h);
    height: var(--ck-landscape-toolbar-h);
    padding-inline: clamp(5px, 1.2vw, 9px);
    border-radius: clamp(9px, 1.5vw, 12px);
    font-size: clamp(0.68rem, 1.7vw, 0.86rem);
  }

  #screen-game .mobile-pause-slot,
  #screen-game .mobile-pause-slot #btn-pause {
    width: var(--ck-landscape-toolbar-h);
    min-width: var(--ck-landscape-toolbar-h);
  }

  #screen-game #code-input {
    padding: clamp(7px, 1.4vw, 11px);
    font-size: clamp(0.72rem, 1.8vw, 0.94rem);
    line-height: 1.34;
  }

  #screen-game .code-panel-footer {
    min-height: clamp(19px, 6vh, 26px);
    margin-top: clamp(3px, 1vh, 6px);
  }

  /* Side keyboard scales by both width and available height. */
  #screen-game #code-kids-keyboard.ck-keyboard--custom {
    padding: clamp(4px, 0.8vw, 6px);
    gap: clamp(3px, 0.7vw, 5px);
    border-radius: clamp(11px, 1.7vw, 15px);
  }

  #screen-game #code-kids-keyboard .ck-keyboard__handle {
    min-height: clamp(22px, 8vh, 28px);
    margin-bottom: 1px;
  }

  #screen-game #code-kids-keyboard .ck-keyboard__handle-label {
    font-size: clamp(0.48rem, 1.15vw, 0.6rem);
  }

  #screen-game #code-kids-keyboard .ck-keyboard__row {
    gap: clamp(3px, 0.7vw, 5px);
  }

  #screen-game #code-kids-keyboard .ck-key {
    min-height: clamp(29px, 10vh, 36px);
    padding: 2px clamp(3px, 0.8vw, 5px);
    border-radius: clamp(7px, 1.2vw, 9px);
    font-size: clamp(0.62rem, 1.65vw, 0.82rem);
  }
}

/* Extra-compact landscape: short screens / older phones. */
@media (orientation: landscape) and (max-height: 300px),
       (orientation: landscape) and (max-width: 620px) and (max-height: 360px) {
  :root {
    --ck-side-keyboard-width: clamp(104px, 20vw, 126px);
    --ck-landscape-toolbar-h: 34px;
  }

  #screen-game .preview-level-heading {
    display: none;
  }

  #screen-game .feedback {
    display: none;
  }

  #screen-game .preview-panel,
  #screen-game .code-panel {
    padding: 5px;
  }

  #screen-game .code-panel-topbar {
    margin-bottom: 4px;
  }

  #screen-game .code-panel-footer {
    min-height: 18px;
    margin-top: 2px;
  }

  #screen-game .code-panel-footer label {
    font-size: 0.66rem;
  }

  #screen-game #code-kids-keyboard .ck-keyboard__handle {
    min-height: 21px;
  }

  #screen-game #code-kids-keyboard .ck-key {
    min-height: 27px;
    font-size: 0.62rem;
  }
}

/* Larger phone landscape: preserve comfortable keyboard size and invest
   the extra width into code + preview. */
@media (orientation: landscape) and (min-width: 760px) and (min-height: 330px) and (max-height: 520px) {
  :root {
    --ck-side-keyboard-width: clamp(145px, 20vw, 174px);
  }

  body.ck-custom-keyboard-active.ck-keyboard-side-right #screen-game .game-grid {
    grid-template-columns:
      minmax(220px, 0.95fr)
      minmax(300px, 1.35fr)
      var(--ck-side-keyboard-width);
  }

  body.ck-custom-keyboard-active.ck-keyboard-side-left #screen-game .game-grid {
    grid-template-columns:
      var(--ck-side-keyboard-width)
      minmax(300px, 1.35fr)
      minmax(220px, 0.95fr);
  }
}

/* ==========================================================
   Result screen — also fluid across landscape phone heights.
   ========================================================== */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  #screen-result .result-panel {
    width: min(86vw, 510px);
    max-height: calc(var(--ck-visual-height, 100dvh) - clamp(6px, 2vh, 12px));
    padding:
      clamp(8px, 3vh, 14px)
      clamp(12px, 3vw, 20px);
  }

  #screen-result .result-icon {
    font-size: clamp(1.7rem, 8vh, 2.7rem);
  }

  #screen-result #result-title {
    font-size: clamp(1.08rem, 5.6vh, 1.55rem);
  }

  #screen-result .stars {
    font-size: clamp(1.2rem, 6vh, 1.75rem);
  }

  #screen-result .btn-large {
    min-height: clamp(36px, 12vh, 44px);
  }
}

/* ==========================================================
   Safety guarantees
   ========================================================== */

@media (max-width: 900px) {
  #screen-game,
  #screen-game .game-grid,
  #screen-game .preview-panel,
  #screen-game .code-panel,
  #screen-game #code-kids-keyboard {
    max-width: 100%;
    box-sizing: border-box;
  }

  #screen-game #code-input {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================
   Code Kids — 7.1C.4.2
   Portrait content compaction
   NOTE: Code Kids Keyboard sizing is intentionally untouched.
   ========================================================== */

@media (orientation: portrait) and (max-width: 699px) {
  /* Reduce card chrome, not content readability. */
  #screen-game .preview-panel,
  #screen-game .code-panel {
    padding: clamp(9px, 2.4vw, 11px);
  }

  #screen-game .preview-panel h3 {
    margin-bottom: clamp(4px, 1.3vw, 6px);
  }

  /* Preview remains meaningful, but consumes less vertical space. */
  #screen-game .preview-stage {
    min-height: clamp(94px, 15.5dvh, 132px);
    height: clamp(94px, 15.5dvh, 132px);
    max-height: 132px;
  }

  #screen-game .preview-object {
    max-height: min(190px, 17dvh);
  }

  #screen-game .feedback {
    min-height: 18px;
    margin: clamp(4px, 1.2vw, 6px) 2px 0;
  }

  /* Keep touch controls large, only tighten surrounding space. */
  #screen-game .code-panel-topbar {
    margin-bottom: clamp(6px, 1.8vw, 9px);
  }

  /* Editor keeps all 3 Level-10 lines visible on the reference phone. */
  #screen-game #code-input {
    min-height: clamp(100px, 16dvh, 132px);
  }

  #screen-game .code-panel-footer {
    min-height: clamp(24px, 3.8dvh, 31px);
    margin-top: clamp(3px, 1vw, 6px);
  }

  #screen-game .code-panel label {
    margin-bottom: clamp(4px, 1.2vw, 6px);
  }
}

/* Do not over-compress very short portrait screens. */
@media (orientation: portrait) and (max-width: 360px) and (max-height: 640px) {
  #screen-game .preview-stage {
    min-height: 90px;
    height: clamp(90px, 14.5dvh, 108px);
    max-height: 108px;
  }

  #screen-game #code-input {
    min-height: 96px;
    height: auto;
  }
}

/* ==========================================================
   Code Kids — 7.1C.4.3
   Landscape menu flexible height
   ========================================================== */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  :root {
    --ck-menu-landscape-gap: clamp(5px, 2vh, 10px);
    --ck-menu-landscape-pad-y: clamp(7px, 2.4vh, 12px);
    --ck-menu-landscape-pad-x: clamp(14px, 2.5vw, 20px);
  }

  /* Fit the whole menu to the actually available PWA viewport. */
    #screen-menu.active {
    display: flex;
    width: 100vw;
   max-width: none;
    height: 100%;
    min-height: 0;

    justify-content: center;
    align-items: stretch;

    margin: 0;
    overflow: hidden;
}

  #screen-menu .menu-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ck-menu-landscape-gap);

    width: min(92vw, 760px);
  height: 100%;
  max-height: 100%;
  margin-inline: auto;


    padding:
      var(--ck-menu-landscape-pad-y)
      var(--ck-menu-landscape-pad-x);

    overflow: hidden;
  }

  #screen-menu .eyebrow {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(0.64rem, 3.2vh, 0.82rem);
    line-height: 1.1;
  }

  #screen-menu #menu-title {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(2.15rem, 17vh, 3.65rem);
    line-height: 0.96;
  }

  #screen-menu .lead {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(0.82rem, 4.5vh, 1.05rem);
    line-height: 1.18;
  }

  #screen-menu #btn-new-game {
    flex: 0 0 auto;
    min-height: clamp(42px, 15vh, 56px);
    margin: 0;
    padding-block: clamp(6px, 2vh, 10px);
    font-size: clamp(0.9rem, 4.5vh, 1.05rem);
  }

  #screen-menu .progress-card {
    flex: 0 0 auto;
    min-height: clamp(44px, 15vh, 58px);
    margin: 0;
    padding:
      clamp(7px, 2.4vh, 11px)
      clamp(12px, 2.2vw, 18px);
    font-size: clamp(0.82rem, 4.2vh, 1rem);
  }

  #screen-menu .progress-card strong {
    font-size: clamp(0.9rem, 4.8vh, 1.08rem);
  }
}

/* Extra-short landscape: compress only vertical presentation,
   never the touch target below ~40px. */
@media (orientation: landscape) and (max-height: 300px) and (max-width: 900px) {
  :root {
    --ck-menu-landscape-gap: 4px;
    --ck-menu-landscape-pad-y: 5px;
  }

  #screen-menu #menu-title {
    font-size: clamp(1.9rem, 16vh, 2.8rem);
  }

  #screen-menu .lead {
    font-size: clamp(0.75rem, 4vh, 0.9rem);
  }

  #screen-menu #btn-new-game {
    min-height: 40px;
  }

  #screen-menu .progress-card {
    min-height: 40px;
  }
}