/* 판 밖 층: 결과 화면 진행도, 판 중 「해냈다」 띠, 타이틀 확장(항로·어둠·도감·등잔), 도감.
   결과 화면은 #overlay 안(em 단위, 1em ≈ 8도트), 나머지는 .ui-layer 안(--px 도트 단위). 색은 src/ui/ui.css의 --ui-*. */

.mt-lamp { display: inline-block; vertical-align: middle; }
.mt-lamp.lit { filter: drop-shadow(0 0 calc(2 * var(--px, 2px)) rgba(255, 138, 61, 0.55)); }

/* ═════════════ 결과 화면 ═════════════ */
#overlay .mt-panel {
  --px: 0.125em;
  width: min(64em, 96%);
  max-height: 96%;
  overflow: hidden;
  padding: 0.9em 1.4em 1em;
  font-size: 0.8em;
  text-align: left;
}
#overlay .mt-panel h1 { margin: 0 0 0.5em; text-align: center; display: flex; justify-content: center; align-items: baseline; gap: 0.6em; }
#overlay .mt-asc { font-size: 0.6em; color: var(--ui-bone); background: #2e2824; padding: 0.1em 0.6em; font-weight: 400; }
#overlay .mt-buttons { margin: 0 0 0.9em; align-items: center; }
#overlay .mt-buttons button { font-size: 0.9em; padding: 0.3em 1.1em; }
#overlay .mt-buttons button.mt-main {
  font-size: 1.35em;
  padding: 0.35em 2.4em;
  background: var(--ui-ember);
  box-shadow: 0 3px 0 #a0441b;
  animation: mt-main 1.6s steps(2) 1.2s infinite;
}
#overlay .mt-buttons button.mt-main:hover, #overlay .mt-buttons button.mt-main:focus-visible { background: var(--ui-ember-hi); }
@keyframes mt-main { 50% { box-shadow: 0 3px 0 #a0441b, 0 0 0 3px rgba(255, 138, 61, 0.35); } }

.mt-res { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0 1.8em; }
.mt-col { min-width: 0; }
#overlay .mt-recs { grid-template-columns: auto 1fr; gap: 0.15em 1em; margin: 0 0 0.8em; }
#overlay .mt-recs dd { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.6em; }
#overlay .mt-recs dd small { color: #6d5a48; font-size: 0.8em; }
#overlay .mt-recs dd small::before { content: "/ "; }
#overlay .mt-recs dd.new b { color: var(--ui-gold); animation: mt-flash 0.5s steps(2) 3; }
.mt-newrec { font-size: 0.75em; color: #171311; background: var(--ui-gold); padding: 0 0.4em; animation: mt-flash 0.5s steps(2) infinite; }
@keyframes mt-flash { 50% { opacity: 0.35; } }
#overlay .mt-res .build { justify-content: flex-start; flex-wrap: wrap; }

.mt-sec { margin: 0 0 0.7em; }
.mt-sec h2, .mt-wake h2 { margin: 0 0 0.3em; font-size: 0.85em; font-weight: 400; color: #a4927c; letter-spacing: 0.08em; }
.mt-deeds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15em; }
.mt-deeds li { display: flex; align-items: center; gap: 0.5em; animation: mt-in 0.25s steps(3) both; }
.mt-deeds li b { color: var(--ui-ember-hi); white-space: nowrap; }
.mt-deeds li span { color: #857666; font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-deeds li.more { color: #857666; }
@keyframes mt-in { from { opacity: 0; transform: translateX(-0.4em); } }

.mt-near { margin: 0 0 0.45em; }
.mt-near-top { display: flex; justify-content: space-between; gap: 1em; font-size: 0.9em; }
.mt-near-top b { color: var(--ui-bone); font-variant-numeric: tabular-nums; }
.mt-bar { height: 0.45em; background: #171311; box-shadow: inset 0 0 0 1px #3a332d; margin-top: 0.15em; }
.mt-bar i { display: block; height: 100%; width: calc(var(--r) * 100%); background: var(--ui-ember); animation: mt-grow 0.6s steps(6) 0.3s both; }
@keyframes mt-grow { from { width: 0; } }
.mt-near-prize { display: flex; align-items: center; gap: 0.4em; font-size: 0.75em; color: #6d5a48; margin-top: 0.1em; }

.mt-foot { border-top: 1px solid #3a332d; padding-top: 0.5em; }
.mt-fire { display: flex; align-items: center; gap: 0.5em; }
.mt-fire b { color: var(--ui-ember-hi); font-size: 1.2em; }
.mt-news { color: var(--ui-gold); font-size: 0.85em; margin-top: 0.15em; animation: mt-in 0.3s steps(3) 0.6s both; }

.mt-wake { margin-top: 0.7em; border-top: 1px solid #3a332d; padding-top: 0.5em; }
.mt-cards { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: flex-start; }
.mt-card { width: 5.6em; height: 6em; perspective: 30em; }
.mt-cards.many .mt-card { width: 5.2em; height: 4.6em; }
.mt-cards.many .mt-back small { display: none; }
.mt-cards-more { align-self: center; color: var(--ui-ember-hi); }
.mt-card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: mt-flip 0.5s steps(6) var(--d) both; }
@keyframes mt-flip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.mt-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25em; background: #171311; box-shadow: inset 0 0 0 2px #3a332d; }
.mt-back { transform: rotateY(180deg); box-shadow: inset 0 0 0 2px var(--ui-ember); background: #261d17; }
.mt-back b { font-size: 0.85em; color: var(--ui-bone); text-align: center; line-height: 1.2; }
.mt-back small { font-size: 0.7em; color: #a4927c; }
.mt-back .mt-lamp { position: absolute; top: 0.3em; right: 0.3em; }

/* ═════════════ 판 중 띠 ═════════════ */
.mt-band-layer {
  --fs: calc(6 * var(--px));
  position: absolute;
  left: 0; right: 0;
  top: calc(34 * var(--px));
  display: flex;
  justify-content: center;
  pointer-events: none;
  font-family: "Galmuri11", monospace;
  font-size: var(--fs);
  line-height: 1.5;
  z-index: 9;
}
.mt-band {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  padding: calc(3 * var(--px)) calc(8 * var(--px));
  background: rgba(23, 19, 17, 0.86);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ui-ember-lo), 0 0 0 var(--px) #2e2824;
  color: var(--ui-text);
  animation: mt-band var(--ms) steps(1) both;
}
.mt-band .mt-band-k { color: var(--ui-ember); font-weight: 700; }
.mt-band i { font-style: normal; color: var(--ui-dim); }
.mt-band b { color: var(--ui-bone); }
@keyframes mt-band {
  0% { opacity: 0; transform: translateY(calc(-4 * var(--px))); }
  6% { opacity: 1; transform: none; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

/* ═════════════ 타이틀 확장 ═════════════ */
.mt-title::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(5, 4, 3, calc(var(--dark, 0) * 0.85)) 100%);
}
.mt-title .ti-title { top: calc(18 * var(--px)); }
.mt-title .ti-ships { top: calc(100 * var(--px)); }
.mt-title .ti-shipname { top: calc(134 * var(--px)); min-height: calc(9 * var(--px)); }
.mt-title .ti-shipname.hint { color: var(--ui-ash); font-weight: 400; }
.mt-title .ti-ship .ti-lock { right: calc(2 * var(--px)); bottom: calc(2 * var(--px)); }
.mt-opts {
  position: absolute;
  left: 0; right: 0;
  top: calc(147 * var(--px));
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--px));
  animation: ui-fade 0.3s steps(3) 0.25s both;
}
.mt-seg { display: flex; background: var(--ui-rule); padding: var(--px); gap: var(--px); }
.mt-seg-b { padding: 0 calc(5 * var(--px)) !important; height: calc(11 * var(--px)); color: var(--ui-ash) !important; background: var(--ui-panel) !important; }
.mt-seg-b:hover { color: var(--ui-text) !important; }
.mt-seg-b.on { background: #2e2622 !important; color: var(--ui-ember-hi) !important; box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ui-ember); }
.mt-ascpick { display: flex; align-items: center; gap: calc(3 * var(--px)); background: var(--ui-rule); padding: var(--px) calc(2 * var(--px)); }
.mt-arrow { color: var(--ui-ember) !important; padding: 0 calc(2 * var(--px)) !important; }
.mt-arrow:disabled { color: var(--ui-dim) !important; cursor: default; }
.mt-ascv { min-width: calc(34 * var(--px)); text-align: center; color: var(--ui-bone); }
.mt-ascline {
  position: absolute;
  left: 0; right: 0;
  top: calc(161 * var(--px));
  text-align: center;
  color: var(--ui-ash-hi);
  text-shadow: var(--px) var(--px) 0 var(--ui-out);
  min-height: calc(9 * var(--px));
}
.mt-title .ti-btns { top: calc(174 * var(--px)); }
.mt-sub {
  position: absolute;
  left: 0; right: 0;
  top: calc(200 * var(--px));
  display: flex;
  justify-content: center;
  gap: calc(6 * var(--px));
  animation: ui-fade 0.3s steps(3) 0.35s both;
}
.ui-layer .mt-sub .ui-btn { height: calc(14 * var(--px)); padding: 0 calc(7 * var(--px)); }
.mt-lampb b { color: var(--ui-ember-hi) !important; }
.mt-title .ti-rec { top: calc(222 * var(--px)); }

/* 등잔: 불 나눠 붙이기 */
.mt-share-dim { position: absolute; inset: 0; background: rgba(13, 11, 10, 0.78); display: flex; align-items: center; justify-content: center; z-index: 5; }
.mt-share {
  width: calc(250 * var(--px));
  padding: calc(8 * var(--px)) calc(10 * var(--px)) !important;
  background: var(--ui-panel);
  box-shadow: 0 0 0 var(--px) var(--ui-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--px));
}
.mt-share-h { display: flex; align-items: center; gap: calc(4 * var(--px)); font-size: var(--fs2); color: var(--ui-ember-hi); }
.mt-share-list { display: flex; flex-direction: column; gap: calc(4 * var(--px)); width: 100%; }
.mt-share-row { display: flex; align-items: center; gap: calc(6 * var(--px)); padding: calc(3 * var(--px)) calc(4 * var(--px)); background: var(--ui-panel2); }
.mt-share-row.woke { background: #2e2218; box-shadow: inset 0 0 0 var(--px) var(--ui-ember); }
.mt-share-what { flex: 1; min-width: 0; }
.mt-share-names { display: flex; align-items: center; gap: calc(3 * var(--px)); color: var(--ui-bone); }
.mt-share-what small { display: block; color: var(--ui-ash); font-size: var(--fs); }
.mt-share-none { color: var(--ui-ash); text-align: center; }

/* ═════════════ 도감 ═════════════ */
.cx-layer { background: rgba(13, 11, 10, 0.86); display: flex; align-items: center; justify-content: center; z-index: 12; }
.cx-panel {
  position: relative;
  width: calc(400 * var(--px));
  height: calc(230 * var(--px));
  padding: calc(8 * var(--px)) calc(10 * var(--px));
  background: var(--ui-panel);
  box-shadow: 0 0 0 var(--px) var(--ui-dim);
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--px));
}
.cx-tabs { display: flex; gap: var(--px); background: var(--ui-rule); padding: var(--px); }
.cx-tab { flex: 1; height: calc(12 * var(--px)); color: var(--ui-ash) !important; background: var(--ui-panel) !important; }
.cx-tab:hover { color: var(--ui-text) !important; }
.cx-tab.on { color: var(--ui-ember-hi) !important; background: #2e2622 !important; box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ui-ember); }
.cx-body { flex: 1; display: grid; grid-template-columns: 1fr calc(130 * var(--px)); gap: calc(8 * var(--px)); min-height: 0; }
.cx-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: calc(3 * var(--px)); overflow: hidden; }
.cx-cell {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--px);
  background: var(--ui-panel2) !important;
  box-shadow: inset 0 0 0 var(--px) var(--ui-rule);
}
.cx-cell:hover, .cx-cell.on { box-shadow: inset 0 0 0 var(--px) var(--ui-ember); }
.cx-cell.q { opacity: 0.55; }
.cx-cell.off { background: #151210 !important; }
.cx-cell.pair { width: calc(52 * var(--px)); }
.cx-cell.pair.found { background: #261d17 !important; }
.cx-half { display: flex; align-items: center; justify-content: center; width: calc(20 * var(--px)); }
.cx-plus { font-style: normal; color: var(--ui-dim); }
.cx-cell.big { width: calc(64 * var(--px)); height: calc(52 * var(--px)); overflow: hidden; padding: calc(3 * var(--px)) !important; }
.cx-cell.big img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cx-break { flex-basis: 100%; height: 0; }
.cx-cell.zone { width: calc(40 * var(--px)); height: calc(30 * var(--px)); }
.cx-roman { font-size: var(--fs2); color: var(--ui-ember-hi); }
.cx-cell.zone.q .cx-roman { color: var(--ui-dim); }
.cx-cell.page { flex-direction: column; width: calc(26 * var(--px)); height: calc(30 * var(--px)); color: var(--ui-ash); }
.cx-grid.cx-foe .cx-cell { width: calc(30 * var(--px)); height: calc(30 * var(--px)); }
.cx-info { background: var(--ui-panel2); padding: calc(6 * var(--px)); overflow: hidden; }
.cx-info-t { display: block; color: var(--ui-ember-hi); margin-bottom: calc(3 * var(--px)); }
.cx-info p { margin: 0 0 calc(4 * var(--px)); color: var(--ui-text); line-height: 1.6; }
.cx-info small { color: var(--ui-ash); }
.ui-layer .cx-back { align-self: center; height: calc(14 * var(--px)); padding: 0 calc(10 * var(--px)); }

@media (prefers-reduced-motion: reduce) {
  .mt-card-in { animation-duration: 0.01s; }
  .mt-band, #overlay .mt-buttons button.mt-main, .mt-newrec { animation: none; }
}

/* ═════════════ 세계의 글: 결과 머리 표식·등잔서 한 줄, 도감 표지·등잔서·가둔 자 둘째 쪽 ═════════════ */
#overlay .mt-head { display: flex; flex-direction: column; align-items: center; margin: 0 0 0.6em; }
#overlay .mt-head .mt-sigil { margin-bottom: 0.3em; filter: drop-shadow(0 0 0.25em rgba(255, 138, 61, 0.55)); }
#overlay .mt-head h1 { margin: 0; }
#overlay .mt-head .mt-subline, #overlay .panel > .sub { margin: 0.15em 0 0; color: #a4927c; font-size: 0.8em; }
#overlay .panel > .sub { margin: -0.7em 0 0.9em; }
#overlay .mt-verse { margin: 0.7em 0 0; padding-top: 0.5em; border-top: 1px solid #3a332d; text-align: center; color: #a4927c; font-size: 0.9em; }
#overlay .mt-verse b { color: #857666; font-weight: 400; margin-right: 0.6em; }
#overlay .mt-verse.fresh span { color: #ffc070; }

.cx-cover { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--px)); color: var(--ui-ash-hi); }
.cx-cover .cx-sigil { filter: drop-shadow(0 0 calc(2 * var(--px)) rgba(255, 138, 61, 0.6)); }
.cx-cover b { font-weight: 700; letter-spacing: 0.2em; }
.cx-tab { padding: 0 !important; white-space: nowrap; }
.cx-cell.verse { width: calc(26 * var(--px)); height: calc(26 * var(--px)); }
.cx-cell.verse.hidden { box-shadow: inset 0 0 0 var(--px) var(--ui-red); }
.cx-vnum { color: var(--ui-ember-hi); }
.cx-cell.verse.q .cx-vnum { color: var(--ui-dim); }
.cx-info p.cx-verse { color: var(--ui-ember-hi); font-size: 1.1em; line-height: 1.8; }
.cx-info .cx-more { margin-top: calc(3 * var(--px)); padding-top: calc(4 * var(--px)); border-top: var(--px) solid var(--ui-rule); }
.cx-info p.cx-after { color: var(--ui-ash-hi); }
.cx-info { overflow-y: auto; }

/* 함께 날기(협동 2P): 기체 줄 오른쪽 칸. 2P는 한 단계 밝은 결 */
.mt-title .ti-duo {
  position: absolute;
  top: calc(94 * var(--px));
  right: calc(34 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--px));
  animation: ui-fade 0.2s steps(3) both;
}
.mt-title .ti-duo[hidden] { display: none; }
.ti-duo-h { color: var(--ui-ember-hi); font-weight: 700; }
.ti-duo-pick { display: flex; align-items: center; gap: calc(2 * var(--px)); }
.ti-duo-tile { display: block; width: calc(46 * var(--px)); height: calc(32 * var(--px)); padding: var(--px); background: var(--ui-ember-hi); }
.ti-duo-tile > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #2a2019; }
.ti-duo-tile .ui-icon { animation: ti-bob 0.6s steps(1) infinite 0.3s; }
.ti-duo-name { color: var(--ui-bone); font-weight: 700; min-height: calc(9 * var(--px)); }

/* 협동 결과: 두 사람 빌드 줄. 기체 아이콘 + 빛으로 돌린 재 수, 2P는 한 단계 밝은 결 */
.duo-builds { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.build.duo { align-items: center; }
.build.duo .duo-st { color: var(--ui-ember); font-weight: 700; margin-left: calc(2 * var(--px)); }
.build.duo.p2 .duo-st { color: var(--ui-ember-hi); }