/*
 * 线路拼图手机 / 平板响应式补丁
 * 放在线路拼图.html的内联样式和classroom.css之后加载。
 * 桌面宽横屏沿用原布局；仅竖屏和低高度横屏进入重排。
 */

@media (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
  .game-shell {
    --responsive-topbar-height: 54px;
    --responsive-toolbox-height: 62px;
    --responsive-dock-space: 0px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      var(--responsive-topbar-height)
      minmax(0, 1fr)
      var(--responsive-toolbox-height);
    gap: 6px;
    height: 100vh;
    height: 100dvh;
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      calc(max(6px, env(safe-area-inset-bottom)) + var(--responsive-dock-space))
      max(6px, env(safe-area-inset-left));
  }

  .classroom .game-shell {
    --responsive-dock-space: 72px;
  }

  .boardwrap {
    position: relative;
    inset: auto;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    width: auto;
    height: min(100%, 60vw);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 5 / 3;
    border-width: 4px;
    border-radius: 22px;
  }

  .boardwrap::after {
    border-radius: 17px;
  }

  .board {
    width: 100%;
    height: 100%;
  }

  .bar {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    gap: 5px;
  }

  .bar > * {
    min-width: 0;
  }

  .iconbutton,
  .toolbox .railtool,
  .scene-button {
    min-width: 44px;
    min-height: 44px;
  }

  .iconbutton {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    border-width: 2px;
  }

  .iconbutton svg {
    width: 25px;
    height: 25px;
  }

  .bar .spacer {
    min-width: 0;
  }

  .stagepips,
  .pips {
    flex: 0 1 auto;
    justify-content: center;
    overflow: hidden;
  }

  .counter {
    flex: 1 1 90px;
    min-width: 34px;
    max-width: 110px;
  }

  .local-save-mode #submit,
  .classroom #submit,
  .teacher-mode #submit {
    flex: 0 1 auto;
    height: 48px;
  }

  .local-save-mode #submit .local-save-copy {
    min-width: 0;
    line-height: 1.1;
    text-align: left;
    white-space: normal;
  }

  .classroom #submit .submit-copy {
    min-width: 0;
  }

  .toolbox {
    position: relative;
    inset: auto;
    grid-row: 3;
    align-self: stretch;
    justify-self: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: min(100%, 460px);
    height: 100%;
    padding: 6px 12px;
    gap: 7px;
    border-width: 3px;
    border-radius: 19px;
  }

  .toolbox::before,
  .toolbox::after {
    display: none;
  }

  .toolbox .railtool {
    flex: 1 1 58px;
    width: auto;
    height: 100%;
    max-width: 66px;
    max-height: none;
    border-width: 2px;
    border-radius: 14px;
  }

  .toolbox .railtool svg {
    width: min(43px, 100%);
    height: min(43px, 100%);
  }

  .scene-dock,
  .teacher-mode .scene-dock {
    box-sizing: border-box;
    max-width: calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
    bottom: max(6px, env(safe-area-inset-bottom));
  }

  .scene-button,
  .teacher-mode .scene-button {
    min-height: 44px;
  }
}

/* 竖屏手机：顶栏改成两行六列，提交按钮占两列，确保全屏键始终在视口内。 */
@media (orientation: portrait) and (max-width: 700px) {
  .game-shell {
    --responsive-topbar-height: 98px;
    --responsive-toolbox-height: 60px;
  }

  .bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, 44px);
    align-content: center;
    align-items: stretch;
    gap: 5px;
  }

  .bar .spacer {
    display: none;
  }

  .bar .iconbutton {
    width: 100%;
    height: 44px;
  }

  .bar #home {
    grid-column: 1;
    grid-row: 1;
  }

  .bar .stagepips {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .classroom .bar .stagepips {
    grid-column: 1 / 4;
  }

  .bar .pips {
    grid-column: 4 / 6;
    grid-row: 1;
  }

  .bar .counter {
    grid-column: 6;
    grid-row: 1;
  }

  .bar #rotate {
    grid-column: 1;
    grid-row: 2;
  }

  .bar #undo {
    grid-column: 2;
    grid-row: 2;
  }

  .bar #play {
    grid-column: 3;
    grid-row: 2;
  }

  .bar #submit {
    grid-column: 4 / 6;
    grid-row: 2;
  }

  .bar #full {
    grid-column: 6;
    grid-row: 2;
  }

  .bar .stagepips,
  .bar .pips,
  .bar .counter {
    width: 100%;
    height: 44px;
    max-width: none;
    padding: 6px;
  }

  .bar .stagepips {
    gap: 5px;
  }

  .bar .pips {
    gap: 3px;
  }

  .bar .counter {
    justify-content: center;
    gap: 2px;
  }

  .local-save-mode #submit,
  .classroom #submit,
  .teacher-mode #submit {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 7px;
    justify-content: center;
  }

  .local-save-mode #submit .local-save-copy {
    font-size: 12px;
  }

  .classroom #submit .submit-copy b {
    font-size: 11px;
  }

  .classroom #submit .submit-copy small {
    font-size: 8px;
  }

  .scene-dock,
  .teacher-mode .scene-dock {
    width: min(100%, 332px);
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    gap: 4px;
    padding: 6px;
    border-radius: 17px;
  }

  .scene-button,
  .teacher-mode .scene-button {
    width: 100%;
    height: 46px;
    padding: 3px;
    border-radius: 12px;
  }
}

@media (orientation: portrait) and (max-width: 390px) {
  .game-shell {
    --responsive-topbar-height: 96px;
    --responsive-toolbox-height: 58px;
    gap: 4px;
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }

  .bar {
    gap: 4px;
  }

  .bar .stagepips,
  .bar .pips,
  .bar .counter {
    padding: 4px;
  }

  .stagepips b {
    width: 8px;
    height: 8px;
  }

  .pips i {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }

  .counter i {
    width: 4px;
    height: 9px;
  }

  .iconbutton svg {
    width: 22px;
    height: 22px;
  }

  .local-save-mode #submit {
    gap: 4px;
    padding-inline: 4px;
  }

  .local-save-mode #submit .local-save-copy {
    font-size: 11px;
  }

  .classroom #submit {
    gap: 3px;
    padding-inline: 4px;
  }

  .classroom #submit svg {
    width: 20px;
    height: 20px;
  }

  .classroom #submit .submit-copy b {
    font-size: 10px;
  }

  .classroom #submit .submit-copy small {
    font-size: 7px;
  }

  .toolbox {
    width: 100%;
    padding-inline: 7px;
    gap: 4px;
  }

  .toolbox .railtool {
    flex-basis: 44px;
    min-width: 44px;
  }

  .scene-dock,
  .teacher-mode .scene-dock {
    width: calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* 低高度横屏：保留单行顶栏并压缩非按钮状态区，给地图和两个底栏留出独立空间。 */
@media (orientation: landscape) and (max-height: 500px) {
  .game-shell {
    --responsive-topbar-height: 50px;
    --responsive-toolbox-height: 56px;
  }

  .bar {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .bar .spacer {
    display: none;
  }

  .bar .iconbutton {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .bar .stagepips,
  .bar .pips {
    flex: 0 1 auto;
    min-width: 29px;
    height: 42px;
    padding: 5px;
    gap: 2px;
  }

  .bar .stagepips b,
  .bar .pips i {
    width: 8px;
    height: 8px;
  }

  .bar .counter {
    flex: 1 1 70px;
    width: auto;
    min-width: 30px;
    max-width: 86px;
    height: 42px;
    padding: 4px;
    gap: 1px;
  }

  .local-save-mode #submit {
    flex-basis: 112px;
    min-width: 100px;
    max-width: 122px;
    padding: 0 5px;
    gap: 4px;
  }

  .local-save-mode #submit .local-save-copy {
    font-size: 11px;
  }

  .classroom #submit,
  .teacher-mode #submit {
    flex-basis: 96px;
    min-width: 90px;
    max-width: 112px;
    padding: 0 4px;
    gap: 3px;
  }

  .classroom #submit svg {
    width: 21px;
    height: 21px;
  }

  .classroom #submit .submit-copy b {
    font-size: 10px;
  }

  .classroom #submit .submit-copy small {
    font-size: 7px;
  }

  .toolbox {
    width: min(100%, 430px);
    padding-block: 5px;
  }

  .scene-dock,
  .teacher-mode .scene-dock {
    grid-template-columns: repeat(6, 46px);
    gap: 4px;
    padding: 5px;
  }

  .scene-button,
  .teacher-mode .scene-button {
    width: 46px;
    height: 46px;
  }
}

@media (orientation: landscape) and (max-height: 360px) {
  .classroom .game-shell {
    --responsive-dock-space: 62px;
  }

  .game-shell {
    --responsive-topbar-height: 48px;
    --responsive-toolbox-height: 52px;
    gap: 4px;
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .bar .iconbutton,
  .local-save-mode #submit,
  .classroom #submit,
  .teacher-mode #submit {
    height: 44px;
  }

  .toolbox {
    padding-block: 3px;
  }

  .scene-dock,
  .teacher-mode .scene-dock {
    bottom: max(3px, env(safe-area-inset-bottom));
    padding: 3px 5px;
  }

  .scene-button,
  .teacher-mode .scene-button {
    height: 44px;
  }
}