:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0d1422; color: #edf3ff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(circle at 50% 4%, #1b2b45, #0d1422 72%); }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, canvas:focus-visible { outline: 3px solid #f5bd60; outline-offset: 3px; }
.game-shell { width: min(100%, 1060px); padding: 13px 18px 11px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.game-header, .level-heading, .instruction, .queue-panel, .action-row, .stage-note { width: min(100%, 460px); }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 35px; height: 35px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.brand-mark i { background: #6b89fc; border-radius: 3px; }
.brand-mark i:last-child { background: #edb961; }
h1 { font-size: 17px; line-height: 1.1; margin: 0; letter-spacing: -.015em; }
.brand p { font-size: 11px; color: #91a3c0; margin: 4px 0 0; }
.text-button { color: #bed1ff; border: 1px solid #455676; padding: 9px 13px; border-radius: 10px; background: transparent; min-height: 41px; }
.text-button:hover { background: #253753; }
.level-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.level-kicker { font-size: 10px; letter-spacing: .14em; color: #93a8f3; font-weight: 800; }
h2 { font-size: 20px; line-height: 1.15; margin: 3px 0 0; }
.goals-badge { display: flex; gap: 6px; align-items: center; justify-content: center; background: #3b3327; color: #ffd889; border: 1px solid #93703b; border-radius: 22px; font-size: 14px; font-weight: 750; padding: 8px 11px; white-space: nowrap; min-width: 74px; }
.instruction { background: #1a2840; color: #d4def4; border-left: 3px solid #f1bd65; border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 1.33; margin: 0; padding: 8px 11px; }
.play-area { width: min(100%, 460px, calc(100dvh - 315px)); aspect-ratio: 1; position: relative; border: 2px solid #3a5374; border-radius: 12px; background: #111f35; overflow: hidden; flex-shrink: 1; }
#board { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.result-layer { position: absolute; inset: 0; background: #0b1324d9; display: grid; place-items: center; padding: 17px; }
.result-card { text-align: center; width: 100%; max-width: 270px; }
.result-symbol { width: 46px; height: 46px; line-height: 46px; border-radius: 50%; background: #2d7e6b; color: white; margin: auto; font-size: 25px; }
.result-card h3 { margin: 10px 0 5px; font-size: 20px; }
.result-card p { color: #bdcbe2; margin: 0 0 15px; font-size: 14px; }
.queue-panel { padding: 9px 11px; background: #152237; border: 1px solid #354761; border-radius: 11px; }
.queue-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.queue-header strong { font-size: 13px; }
.queue-header span { font-size: 11px; color: #92a4c0; }
.queue-list { display: flex; gap: 8px; min-height: 40px; overflow-x: auto; }
.piece-card { flex: 0 0 auto; border-radius: 9px; border: 1px solid #657fed; padding: 6px 12px; background: #24385d; display: flex; align-items: center; gap: 11px; font-size: 12px; }
.piece-card.future { opacity: .58; border-color: #4d5c78; }
.piece-card.used { opacity: .42; border-color: #435471; }
.piece-cells { display: grid; gap: 3px; align-items: center; }
.piece-cell { width: 15px; height: 15px; background: #83a0ff; border-radius: 3px; }
.piece-cell.placeholder { background: transparent; }
.action-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.secondary-button, .primary-button { padding: 10px 12px; min-height: 43px; border-radius: 10px; border: 1px solid #687baf; color: #e8eeff; background: #263755; white-space: nowrap; font-size: 13px; }
.primary-button { background: #4b6cd9; border-color: #7991f4; font-weight: 700; }
.secondary-button:hover { background: #334868; }
.primary-button:hover { background: #5979e4; }
.status-text { font-size: 11px; text-align: right; line-height: 1.3; color: #aebfe2; }
.status-text.error { color: #ff9d9b; }
.stage-note { margin: 0; font-size: 10px; line-height: 1.25; color: #7e93b3; text-align: center; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 10; background: #030916db; display: grid; place-items: center; padding: 20px; }
.dialog { width: min(100%, 390px); padding: 23px; background: #1a2942; border: 1px solid #637ba4; border-radius: 17px; box-shadow: 0 20px 60px #0008; }
.dialog h2 { margin: 0 0 13px; }
.dialog p { color: #d0dcf2; font-size: 14px; line-height: 1.42; }
.dialog button { margin-top: 5px; }
@media (max-height: 700px) { .game-shell { padding-top: 7px; padding-bottom: 5px; gap: 5px; } .instruction { font-size: 11.5px; padding: 5px 8px; } .queue-panel { padding: 6px 9px; } .queue-header { margin-bottom: 4px; } .stage-note { font-size: 9px; } h2 { font-size: 18px; } }
@media (min-width: 800px) { .game-shell { padding: 14px; gap: 9px; } .play-area { width: min(460px, calc(100dvh - 305px)); } }
@media (max-height: 700px) { .stage-note { display: none; } }
@media (min-width: 800px) { .play-area { width: min(460px, calc(100dvh - 385px)); } }
/* Контрольный срез 2А: меню задач, отмена, адаптивные команды. */
.header-actions { display: flex; gap: 5px; flex-shrink: 0; }
.header-actions .text-button { padding: 8px 10px; font-size: 13px; }
.secondary-button:disabled { opacity: .43; cursor: not-allowed; }
.result-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.result-actions button { min-height: 40px; padding: 8px 9px; font-size: 12px; }
.result-actions #resultNext { width: 100%; }
.level-list { display: grid; gap: 7px; margin: 12px 0; }
.level-option { text-align: left; white-space: normal; }
.level-option.is-selected { border-color: #9eb3ff; background: #314a78; }
@media (max-width: 420px) {
  .game-shell { padding-left: 9px; padding-right: 9px; gap: 6px; }
  .brand { gap: 7px; }
  .brand-mark { width: 29px; height: 29px; }
  h1 { font-size: 15px; }
  .header-actions .text-button { padding: 8px; font-size: 12px; }
  .action-row { gap: 5px; }
  .action-row button { padding: 9px 8px; font-size: 12px; }
  .action-row .status-text { max-width: 128px; }
  .play-area { width: min(100%, 460px, calc(100dvh - 317px)); }
}
/* Основные элементы ввода ориентированы на касание. */
.text-button, .secondary-button, .primary-button, .result-actions button { min-height: 44px; }
/* Этап 2Б: вся очередь помещается в сетку, без горизонтальной прокрутки. */
.queue-header { align-items: baseline; }
.queue-header span { max-width: 73%; text-align: right; }
.queue-list {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px; min-height: 46px; overflow: visible;
}
.piece-card {
  display: flex; position: relative; align-items: center; justify-content: center;
  min-width: 0; min-height: 45px; padding: 4px 2px;
  border-radius: 8px; font: inherit;
  --piece-unit: 10px;
  touch-action: none; user-select: none;
}
.piece-card.current { border: 2px solid #bed0ff; background: #314f82; cursor: grab; }
.piece-card.current:active { cursor: grabbing; }
.piece-card.future { opacity: .72; }
.piece-number {
  position: absolute; top: 1px; left: 4px;
  color: #b7caee; font-size: 9px; line-height: 1;
}
.piece-cells { gap: 2px; }
.piece-cell { width: var(--piece-unit); height: var(--piece-unit); border-radius: 2px; }
.piece-cell.placeholder { outline: 1px dashed #6784b7; outline-offset: -1px; }
.queue-hint { color: #a5bbdb; font-size: 10.5px; line-height: 1.2; margin: 5px 0 0; text-align: center; }
.drag-ghost {
  position: fixed; z-index: 20; pointer-events: none;
  background: #21375bea; border: 2px solid #b9caff;
  border-radius: 9px; padding: 10px; box-shadow: 0 5px 15px #0009;
}
.piece-cells.large { --piece-unit: 22px; gap: 3px; }
.piece-cells.large .piece-cell { border-radius: 4px; }
.play-area { width: min(100%, 460px, calc(100dvh - 374px)); }
.level-list { max-height: min(65dvh, 480px); overflow-y: auto; }
@media (max-width: 550px) {
  .queue-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .queue-panel { padding: 6px 8px; }
  .queue-hint { font-size: 10px; }
  .play-area { width: min(100%, 460px, calc(100dvh - 333px)); }
}
@media (max-height: 700px) {
  .game-shell { gap: 5px; }
  .queue-header { margin-bottom: 4px; }
  .play-area { width: min(100%, 460px, calc(100dvh - 341px)); }
  .queue-hint { margin-top: 3px; }
  .instruction { font-size: 11px; padding: 5px 8px; }
}
@media (max-width: 550px) and (max-height: 700px) {
  .play-area { width: min(100%, 460px, calc(100dvh - 394px)); }
  .result-layer { padding: 7px; }
  .result-symbol { width: 32px; height: 32px; line-height: 32px; font-size: 20px; }
  .result-card h3 { font-size: 16px; margin: 5px 0 3px; }
  .result-card p { font-size: 11px; margin-bottom: 6px; line-height: 1.3; }
  .result-actions { gap: 4px; }
  .result-actions button { min-height: 34px; font-size: 11px; padding: 5px 6px; }
}
@media (min-width: 800px) and (max-height: 850px) {
  .play-area { width: min(460px, calc(100dvh - 466px)); }
}
.dialog { max-height: calc(100dvh - 36px); overflow-y: auto; }
.level-list { max-height: min(50dvh, 410px); }

/* Этап 3: журнал не занимает места на игровом экране. */
.help-actions, .export-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.help-actions { margin-top: 12px; }
.export-buttons button { flex: 1 1 130px; }
.log-count { font-weight: 700; color: #fff !important; }
.reset-note { font-size: 12px !important; }
.dialog button.danger { border-color: #ab8b87; background: #49323b; width: 100%; white-space: normal; margin-bottom: 8px; }
#testDialog .dialog { max-height: calc(100dvh - 24px); }
/* Поворот телефона: игровое поле слева, действия справа, без сброса партии. */
@media (min-width: 600px) and (max-height: 520px) and (orientation: landscape) {
  .game-shell {
    width: 100%; max-width: none; height: 100dvh; min-height: 0;
    padding: 5px 7px; gap: 3px 9px; overflow: hidden;
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, min(46vw, calc(100dvh - 61px))) minmax(0,1fr);
    grid-template-rows: 44px auto auto minmax(0,1fr) 44px;
    grid-template-areas:
      'head head'
      'board heading'
      'board instruction'
      'board queue'
      'board actions';
  }
  .game-header { grid-area: head; width:100%; }
  .brand p { display: none; }
  .level-heading { grid-area: heading; width:100%; align-self:end; }
  .instruction { grid-area: instruction; width:100%; font-size:11px; line-height:1.25; padding:4px 7px; }
  .play-area {
    grid-area: board; width: min(100%, calc(100dvh - 61px)); max-width:none;
    align-self:center; justify-self:center; aspect-ratio:1;
  }
  .queue-panel { grid-area: queue; width:100%; min-height:0; overflow:hidden; }
  .queue-list { grid-template-columns: repeat(6,minmax(0,1fr)); gap:3px; }
  .piece-card { min-height:42px; padding:2px; }
  .queue-hint { display:none; }
  .queue-header { margin-bottom: 3px; }
  .action-row { grid-area:actions; width:100%; gap:4px; }
  .action-row button { min-height:44px; font-size:11px; padding:5px 7px; }
  .action-row .status-text { font-size:10px; }
  .stage-note { display:none; }
  h2 { font-size:16px; }
}
/* На невысоких телефонах резервируем реальную площадь под 44+ px ячейки. */
@media (max-width: 550px) and (min-height: 620px) and (max-height: 700px) and (orientation: portrait) {
  .play-area { width: min(100%, 460px, calc(100dvh - 350px)); }
}
@media (max-width: 550px) and (min-height: 620px) and (max-height: 700px) and (orientation: portrait) {
  .brand p { display:none; }
  h2 { font-size:17px; }
  .queue-hint { display:none; }
  .queue-header { margin-bottom:2px; }
  .queue-panel { padding:4px 7px; }
}