/* Sector 02: the portal artwork and the active stage share one desktop row. */
.double-main { min-width: 0; }
.double-navigation { display: flex; align-items: stretch; gap: 7px; }
.double-navigation .double-levels { flex: 1; min-width: 0; }
.double-level {
  flex: 1;
  min-width: 0;
  border: 1px solid #3a5d72;
  background: #132437;
  color: #b9d5df;
  padding: 7px 9px;
  text-align: left;
  font: 700 11px Consolas, 'Courier New', monospace;
  cursor: pointer;
}
.double-level span, .double-level small { display: block; }
.double-level small { margin-top: 3px; font-size: 9px; letter-spacing: .08em; }
.double-level.active { border-color: var(--cyan); color: var(--cyan); background: #174354; }
.double-level.complete { border-color: #69cbbb; }
.double-level:disabled { opacity: .48; cursor: not-allowed; }
.double-nav-action {
  border: 1px solid #42697d;
  background: #102638;
  color: var(--cyan);
  padding: 7px 10px;
  font: 700 10px Consolas, 'Courier New', monospace;
  letter-spacing: .04em;
}
.double-nav-action:hover, .double-level:not(:disabled):hover { border-color: var(--cyan); background: #1b4052; }
.double-navigation button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.double-story .button + .button { margin-top: 8px; }

@media (max-width: 900px) {
  .double-navigation { flex-wrap: wrap; }
  .double-navigation .double-levels { order: 2; flex-basis: 100%; }
}

@media (min-width: 901px) and (min-height: 700px) {
  body[data-screen="double"] .shell { overflow: visible; }
  body[data-screen="double"] .topbar { height: 56px; }
  body[data-screen="double"] .footer {
    min-height: 32px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  body[data-screen="double"] #app { min-height: 0; }

  .double-screen {
    min-height: calc(100vh - 88px);
    min-height: calc(100dvh - 88px);
    display: grid;
    grid-template-rows: auto auto auto minmax(min-content, 1fr) auto;
    gap: 7px;
    padding: 9px clamp(20px, 3vw, 48px) 7px;
  }
  .double-heading { align-items: center; margin: 0; }
  .double-heading .section-number { margin-bottom: 3px; }
  .double-heading h1 { font-size: clamp(38px, 3.45vw, 52px); }
  .double-heading p { margin-top: 4px; font-size: 13px; line-height: 1.3; }
  .double-level { padding: 6px 8px; }

  .double-main {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-rows: minmax(min-content, 1fr);
    gap: 14px;
    min-height: 0;
  }
  .double-main > * { min-width: 0; }
  .double-main .portal-room {
    height: auto;
    min-height: 0;
    margin: 0;
  }
  .double-main .double-panel,
  .double-main .double-story {
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 13px 17px;
  }
  .double-main .double-story {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .double-story p {
    margin: 11px auto 16px;
    font-size: 16px;
    line-height: 1.5;
  }
  .double-story .button { margin: 0 auto; }
  .double-finale .reward { margin: 0 auto 14px; width: 100%; }

  .double-panel-head { padding-bottom: 9px; }
  .double-panel .feedback { margin: 9px 0 0; }
  .double-help, .empty-evidence { margin: 9px 0 0; }

  /* Eight cards occupy four rows; the two drop targets remain below them. */
  .sort-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 10px; }
  .evidence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .evidence-card { min-height: 48px; padding: 7px 10px; font-size: 14px; }
  .sort-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .drop-portal {
    min-height: 99px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-content: start;
    align-items: center;
    justify-content: stretch;
    gap: 2px 6px;
    padding: 7px;
    text-align: left;
  }
  .drop-portal > span:first-child { grid-row: 1 / 3; font-size: 27px; }
  .drop-portal strong { font-size: 12px; }
  .drop-portal small { font-size: 9px; }
  .placed-evidence {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px 0 0;
  }
  .placed-evidence i { font-size: 10px; line-height: 1.2; padding: 3px 4px; }

  .situation-context { margin: 11px 0; padding: 10px 14px; }
  .situation-context p { margin-top: 5px; font-size: 15px; line-height: 1.4; }
  .sentence-gap { margin: 12px 0; font-size: clamp(21px, 2.2vw, 29px); }
  .choose-options .choice { min-height: 54px; font-size: 15px; }
  .choose-panel > .button, .build-panel > .button { margin-top: 10px; }

  .build-pair { margin-top: 10px; }
  .build-pair span { padding: 8px; }
  .sentence-assembly { min-height: 57px; margin: 10px 0; padding: 8px; }
  .sentence-assembly span { padding: 6px 8px; font-size: 15px; }
  .tile-bank { gap: 6px; min-height: 44px; }
  .word-tile { min-height: 42px; padding: 7px 10px; font-size: 15px; }
  .build-controls { margin-top: 10px; }
  .build-controls .button { min-height: 46px; }

  .double-screen > .chapter-footer { padding-top: 0; }
  .double-screen > .chapter-footer .text-button { padding: 6px; }
}

.portal-target{appearance:none;background:#112b44;color:inherit;padding:0;cursor:pointer;touch-action:manipulation;flex:none;clip-path:circle(50%);transition:filter .18s,box-shadow .18s,border-color .18s}
.action-portal .portal-target{background:#33263c}
.portal-target:hover,.portal-target:focus-visible{filter:brightness(1.25);outline:2px solid currentColor;outline-offset:4px}
.portal-target .portal-glyph{pointer-events:none}
.portal-drop-label{position:absolute;bottom:17px;font:800 10px Consolas,monospace;letter-spacing:.08em;opacity:0;pointer-events:none}
.drag-active .portal-target{filter:brightness(1.2);box-shadow:inset 0 0 28px currentColor,0 0 30px currentColor,0 0 0 6px #a8edee22}
.drag-active .portal-drop-label{opacity:1}
.portal-target.drag-over{filter:brightness(1.5);box-shadow:inset 0 0 35px currentColor,0 0 42px currentColor,0 0 0 8px #a8edee33}
.reject-state .state-portal .portal-target,.reject-action .action-portal .portal-target{animation:portalReject .45s ease-out}
@keyframes portalReject{50%{border-color:#ff7683;box-shadow:inset 0 0 25px #ff7683,0 0 30px #ff7683}}
.sort-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sort-result{min-height:99px;border:1px solid #467f89;background:#12313b;padding:10px 12px;display:grid;grid-template-columns:24px 1fr;align-content:center;gap:2px 6px;color:#d9f8f8}
.sort-result>span{grid-row:1 / 3;font:800 25px Consolas,monospace;color:var(--cyan)}
.sort-result strong{font:800 11px Consolas,monospace;letter-spacing:.08em;color:var(--cyan)}
.sort-result b{font:800 25px Consolas,monospace;line-height:1}
.sort-result small{grid-column:1 / -1;font:11px/1.3 Consolas,monospace;color:#b3cdd2}
.incorrect-result{border-color:#a46c5b;background:#342833}
.incorrect-result>span,.incorrect-result strong{color:#ffad8e}
.level-done .sort-results{width:min(440px,100%);margin:0 auto 12px;text-align:left}
@media (prefers-reduced-motion:reduce){.portal-target,.portal-target:after{animation:none!important;transition:none!important}}