/* 正式网页版：按可用屏高分配行动区，保留场景比例与原有选卡/确认流程。 */
@media (max-width: 600px) {
  #app { width: 100%; }
  body.game-active #app { padding: 0; }
  #screen-title { padding-inline: 16px; }
  #screen-title .menu { width: 100%; max-width: none; }
  #screen-title .menu .btn { min-height: 48px; }
  body.game-active #screen-game.active {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    overflow-y: auto;
    grid-template-rows: auto auto auto auto minmax(240px, 1fr);
  }
  body.game-active .hud .btn-icon { width: 44px; height: 44px; }
  body.game-active .quickbar .qbtn { min-height: 44px; }
  body.game-active .panel {
    align-self: stretch;
    display: flex;
    min-height: 0;
    margin: 6px 10px 8px;
    padding: 8px;
    border-radius: 16px;
  }
  body.game-active .narr {
    flex: none;
    max-height: 2.7em;
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 7px;
  }
  body.game-active .actions.op-desk { flex: 1 1 0; min-height: 0; }
  body.game-active .op-deck {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 8px;
  }
  body.game-active .op-top { min-height: 28px; padding: 4px 8px; }
  body.game-active .op-hand {
    height: 100%;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(56px, 1fr);
    gap: 8px;
  }
  body.game-active .op-card {
    min-height: 56px;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "ic name" "ic tag" "desc desc";
    padding: 10px;
    column-gap: 8px;
    row-gap: 4px;
    border-radius: 14px;
  }
  body.game-active .op-card-ic { width: 36px; height: 36px; font-size: 23px; }
  body.game-active .op-card-name { font-size: 14px; line-height: 1.25; }
  body.game-active .op-card-tag { font-size: 10px; }
  body.game-active .op-card-desc {
    grid-area: desc;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-dim);
  }
  body.game-active .op-planner { gap: 7px; }
  body.game-active .op-forecast {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding: 0 3px;
    font-size: 11px;
    line-height: 1.35;
  }
  body.game-active .op-forecast span { padding: 0; font-size: inherit; background: none; }
  body.game-active .op-forecast .op-risk { display: none; }
  body.game-active .op-exec { min-height: 52px; padding: 7px 10px; }
  body.game-active .op-exec b { font-size: 15px; }
  .op-card:focus-visible, .op-exec:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  body.game-active .op-card { padding: 6px; row-gap: 2px; }
  body.game-active .op-card-desc, body.game-active .op-forecast { display: none; }
  body.game-active .op-card { grid-template-areas: "ic name" "ic tag"; }
  body.game-active .op-card-ic { width: 30px; height: 30px; font-size: 20px; }
  body.game-active .op-deck, body.game-active .op-hand { gap: 6px; }
  body.game-active .op-exec { min-height: 46px; }
  body.game-active #screen-game.active { grid-template-rows: auto auto auto auto minmax(224px, 1fr); }
}
@media (max-width: 600px) and (max-height: 600px) {
  body.game-active #scene { max-height: 26dvh; object-fit: contain; background: var(--panel-2); }
  body.game-active .narr { font-size: 11px; margin-bottom: 4px; }
  body.game-active .panel { margin-top: 4px; padding: 6px; }
  body.game-active .op-card-name { font-size: 12px; }
  body.game-active #screen-game.active { grid-template-rows: auto auto auto auto minmax(210px, 1fr); }
}
/* 横屏以自然滚动承接内容，避免锁屏后截断最后一排按钮。 */
@media (orientation: landscape) and (max-height: 600px) {
  body.game-active { overflow-y: auto; }
  body.game-active #app { height: auto; overflow: visible; }
  body.game-active #screen-game.active { height: auto; min-height: 100dvh; overflow: visible; }
}
@media (max-width: 600px) and (max-height: 740px) {
  body.game-active .op-deck:not([data-count="4"]) .op-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.game-active .op-deck:not([data-count="4"]) .op-card { grid-template-columns: 22px minmax(0, 1fr); column-gap: 4px; padding-inline: 4px; }
  body.game-active .op-deck:not([data-count="4"]) .op-card-ic { width: 22px; height: 26px; font-size: 17px; }
  body.game-active .op-deck:not([data-count="4"]) .op-card-name { font-size: 12px; }
}
@media (max-width: 600px) and (max-height: 600px) {
  body.game-active #scene { max-height: 22dvh; }
}
@media (max-width: 600px) {
  body.game-active .op-deck:not([data-count="4"]) .op-card { grid-template-areas: "ic name" "ic tag"; }
  body.game-active .op-deck:not([data-count="4"]) .op-card-desc { display: none; }
  body.game-active .op-deck[data-count="5"] .op-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) and (max-height: 740px) {
  body.game-active .op-deck[data-count="5"] .op-hand { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.game-active .op-deck[data-count="5"] .op-card { grid-column: span 2; }
  body.game-active .op-deck[data-count="5"] .op-card:nth-child(n+4) { grid-column: span 3; }
}