/* The complete game lives inside one device-safe viewport. */
:root {
  --cutout-top: 0px; --cutout-side: 0px; --gesture-bottom: 0px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--cutout-top));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--cutout-side));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--gesture-bottom));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--cutout-side));
}
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
.game-shell { padding-top: max(20px, var(--safe-top)); padding-right: max(24px, var(--safe-right)); padding-bottom: max(20px, var(--safe-bottom)); padding-left: max(24px, var(--safe-left)); }
.modal {
  position: fixed;
  inset: calc(var(--safe-top) + 10px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 10px);
  margin: auto; width: min(480px, calc(100% - var(--safe-left) - var(--safe-right) - 20px));
  height: fit-content; max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 20px);
  overflow-y: auto; overscroll-behavior: contain;
}
.modal-close { width: 44px; height: 44px; top: 4px; right: 4px; }
.toast { bottom: calc(var(--safe-bottom) + 12px); max-width: calc(100% - var(--safe-left) - var(--safe-right) - 24px); }
.confetti { inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
@media (max-width: 780px) and (orientation: portrait) {
  :root { --cutout-top: 64px; --gesture-bottom: 24px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --cutout-side: 64px; --gesture-bottom: 24px; }
}
@media (max-width: 780px), (max-height: 500px) and (orientation: landscape) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .game-shell {
    position: fixed; top: var(--safe-top); right: var(--safe-right); bottom: auto; left: var(--safe-left);
    height: calc(100% - var(--safe-top) - var(--safe-bottom));
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    max-width: 680px; padding: 6px 10px;
    display: grid; grid-template-rows: 40px 86px minmax(0, 1fr) 28px; gap: 6px;
    overflow: hidden; overscroll-behavior: none;
  }
  .topbar { min-height: 0; padding: 0 0 4px; gap: 7px; }
  .brand { gap: 7px; }
  .brand-icon { width: 30px; height: 30px; border-radius: 9px; }
  .brand-icon svg { width: 23px; }
  .brand h1 { font-size: 17px; letter-spacing: 1px; }
  .brand p { font-size: 6px; margin-top: 4px; letter-spacing: .6px; }
  .top-actions { gap: 5px; }
  .top-actions small { font-size: 8px; }
  .top-actions strong, .level-counter strong { font-size: 14px; }
  .top-actions strong span { font-size: 10px; }
  .stat, .intro-line { display: none; }
  .icon-button { width: 36px; height: 36px; }
  .help-button { margin-left: 0; }
  .conveyor-section { min-height: 0; display: grid; grid-template-rows: 20px minmax(0, 1fr); gap: 3px; }
  .section-top { padding: 0 1px; min-height: 0; }
  .section-title { gap: 6px; }
  .section-title h2 { font-size: 11px; letter-spacing: 0; }
  .step-label { font-size: 9px; line-height: 16px; padding-inline: 4px; }
  .micro-label { display: none; }
  #belt-toggle { padding: 0 4px; min-height: 24px; gap: 8px; }
  #belt-status { font-size: 9px; }
  .belt { border-radius: 9px; padding: 5px 0; box-shadow: 0 2px 0 #202b39; }
  .belt-rail { height: 4px; }
  .belt-window, .belt-track, .belt-group { height: 100%; }
  .belt-track { width: 100%; animation: none; }
  .belt-group { width: 100%; padding: 2px 6px; gap: 5px; }
  .belt-group[aria-hidden] { display: none; }
  .box-option { width: calc((100% - 10px)/3); height: 100%; min-height: 0; flex-direction: row; gap: 6px; padding: 3px; border-radius: 6px; }
  .box-option svg { width: 46px; height: 40px; max-width: 54%; }
  .box-option .box-caption { min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; }
  .box-caption strong { font-size: 15px; }
  .box-caption strong small { font-size: 8px; margin-left: 2px; }
  .box-caption>span { display: block; font-size: 8px; }
  .box-option .box-check { font-size: 0; top: 1px; right: 2px; }
  .box-option .box-check::after { content: '✓'; font-size: 10px; }
  .belt-direction { display: none; }
  .workspace { min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) clamp(148px, 26dvh, 212px); gap: 6px; margin: 0; }
  .packing-panel { min-height: 0; display: grid; grid-template-rows: 22px minmax(0, 1fr) 32px; border-radius: 11px; }
  .panel-header { min-height: 0; padding: 4px 9px 0; gap: 4px; }
  .box-name { font-size: 9px; letter-spacing: 0; white-space: nowrap; }
  .board-area { min-height: 0; height: auto; margin: 0 6px; padding: 6px; overflow: hidden; }
  .board-decor { display: none; }
  .empty-prompt { padding: 10px 16px; gap: 6px; max-width: 96%; }
  .empty-prompt strong { font-size: 13px; }
  .empty-prompt>span:last-child { font-size: 9px; }
  .empty-arrow { width: 22px; height: 22px; font-size: 16px; }
  .packing-footer { padding: 1px 8px 4px; gap: 7px; min-height: 0; }
  .fill-status { gap: 3px; }
  .fill-status>span { font-size: 9px; }
  .fill-status>strong { font-size: 13px; white-space: nowrap; }
  #fill-total { font-size: 9px; }
  .progress-track { height: 3px; }
  .board-tools { gap: 4px; }
  .soft-button { height: 28px; min-width: 36px; padding: 3px 5px; font-size: 14px; border-radius: 6px; }
  .soft-button span { font-size: 9px; margin-left: 2px; }
  .goods-panel { min-height: 0; padding: 6px 8px; display: grid; grid-template-columns: 64px 64px minmax(0, 1fr); grid-template-rows: 16px minmax(0, 1fr) 40px; gap: 4px; border-radius: 11px; }
  .goods-header { grid-column: 1/-1; min-height: 0; }
  .goods-header .eyebrow, .rule-note, .goods-note { display: none; }
  .goods-header h2 { font-size: 11px; margin: 0; }
  .goods-count { font-size: 9px; padding: 0 4px; line-height: 15px; }
  .goods-grid { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); min-height: 0; margin: 0; gap: 4px; align-content: stretch; }
  .goods-grid.few-goods { grid-template-rows: minmax(0,1fr); }
  .piece-card, .piece-card.selected { min-height: 0; height: 100%; padding: 3px; gap: 2px; border-radius: 7px; }
  .piece-card .piece-art { height: calc(100% - 12px); min-height: 0; max-height: 52px; width: 100%; max-width: 100px; }
  .piece-card .piece-name { font-size: 8px; line-height: 10px; }
  .piece-card .packed-tag { font-size: 7px; top: 1px; right: 2px; }
  .piece-card:hover { transform: none; }
  .selected-tools, .order-summary { display: contents; }
  #selection-label, .order-summary>span, .rotate-button kbd { display: none; }
  .rotate-button { grid-column: 2; grid-row: 3; padding: 3px; min-height: 0; min-width: 0; justify-content: center; gap: 3px; font-size: 16px; }
  .rotate-button>span { font-size: 11px; }
  .hint-button { grid-column: 1; grid-row: 3; padding: 3px 0; min-height: 0; font-size: 10px; }
  .ship-button { grid-column: 3; grid-row: 3; min-height: 0; height: 100%; font-size: 11px; padding: 3px 5px; margin: 0; justify-content: center; border-bottom-width: 3px; border-radius: 7px; }
  #ship-icon, .ship-arrow { display: none; }
  .page-footer { display: block; min-height: 0; margin: 0; }
  .page-footer>div, .footer-stamp { display: none; }
  .page-footer nav { display: grid; grid-template-columns: repeat(8,1fr); gap: 3px; height: 100%; }
  .level-dot { width: 100%; height: 100%; border-radius: 7px; font-size: 10px; }
  .level-dot.current { background: var(--ink); }
  .hint-label { bottom: 1px; max-width: 100%; font-size: 9px; padding: 2px 5px; text-align: center; pointer-events: none; }
  .toast { top: auto; bottom: calc(var(--safe-bottom) + 5px); font-size: 9px; line-height: 1.3; padding: 5px 10px; }
  .modal { border-radius: 16px; padding: 20px; }
  .modal h2 { font-size: 20px; margin: 8px 0 12px; }
  .help-steps { gap: 12px; margin: 16px 0 8px; }
  .help-steps p { font-size: 11px; line-height: 1.6; }
  .help-extra { display: none; }
  .primary-button { min-height: 44px; margin-top: 12px; padding: 10px; }
  .replay-button { min-height: 34px; margin-top: 4px; font-size: 12px; }
  .success-mark { width: 48px; height: 48px; font-size: 28px; margin-bottom: 14px; }
  .success-stats { margin-top: 18px; padding: 15px 0; }
}
/* Short phones keep the goods beside the box, rather than shrinking the whole page. */
@media (max-width: 780px) and (max-height: 680px) and (orientation: portrait) {
  .game-shell { grid-template-rows: 36px 76px minmax(0,1fr) 24px; padding: 4px 8px; gap: 4px; }
  .brand p { display: none; }
  .brand h1 { font-size: 15px; }
  .brand-icon { width: 27px; height: 27px; }
  .workspace { grid-template-columns: minmax(0,1fr) 106px; grid-template-rows: minmax(0,1fr); gap: 5px; }
  .goods-panel { padding: 5px; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 15px minmax(0,1fr) 32px 38px; }
  .goods-header h2 { font-size: 0; }
  .goods-header h2::after { content: '商品'; font-size: 10px; }
  .goods-count { font-size: 8px; padding: 0 2px; border: 0; background: none; }
  .goods-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
  .goods-grid.few-goods { grid-template-rows: repeat(2,minmax(0,1fr)); }
  .piece-card .piece-name { display: none; }
  .piece-card .piece-art { height: 100%; }
  .ship-button { grid-column: 1/-1; grid-row: 4; font-size: 10px; }
  .hint-button { font-size: 9px; }
  .rotate-button { gap: 2px; }
  .rotate-button>span { font-size: 10px; }
  .panel-header { padding-inline: 5px; }
  .panel-header .step-label { display: none; }
  .panel-header h2 { font-size: 9px; }
  .box-name { font-size: 8px; }
  .packing-footer { padding-inline: 5px; gap: 4px; }
  .fill-status>span, .soft-button span { display: none; }
  .fill-status { grid-template-columns: 1fr; }
  .soft-button { min-width: 27px; padding-inline: 3px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .game-shell { max-width: none; grid-template-rows: 32px 66px minmax(0,1fr) 24px; gap: 4px; padding: 4px 8px; }
  .brand p { display: none; }
  .conveyor-section { grid-template-rows: 16px minmax(0,1fr); }
  .box-option { flex-direction: row; }
  .box-option svg { height: 30px; }
  .box-option .box-caption { flex-direction: row; gap: 6px; align-items: center; }
  .workspace { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
  .goods-panel { grid-template-rows: 14px minmax(0,1fr) 34px; }
  .modal { padding: 16px; }
  .success-mark { display: none; }
}

.account-entry{font:inherit;font-size:12px;padding:7px 11px;border:1px solid #d4dac9;background:#eef0e4;color:#3c5548;border-radius:14px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
@media(max-width:420px){.account-entry{max-width:72px;padding:6px;font-size:11px}}

@media(max-width:360px){#account-slot .account-entry{max-width:54px;padding:5px;font-size:10px}.topbar h1{white-space:nowrap}}