/* FC모바일 진화 시뮬레이터: PC의 1200×554 화면을 먼저 그린 뒤 전체를 기기 폭에 맞춰 축소한다.
   글자도 같은 비율로 축소해 모바일 브라우저의 최소 글꼴 크기로 인한 겹침을 막는다. */
body.evolution-sim-page .main-content { max-width: 1240px; padding: 12px 28px 36px; }
.evo-page { width: 100%; display: grid; gap: 14px; }
.evo-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.evo-screen {
  position: relative; width: 100%; aspect-ratio: 1200 / 554; overflow: hidden;
  container-type: inline-size; background: #000; border-radius: 6px; color: #fff;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.evo-ui { position: absolute; inset: 0; --u: calc(100cqw / 1200); font-size: calc(var(--u) * 14); line-height: 1.25; font-weight: 600; letter-spacing: calc(var(--u) * -.2); }
.evo-screen.evo-fitted .evo-ui {
  inset: auto; left: 0; top: 0; width: 1200px; height: 554px; --u: 1px;
  transform: scale(var(--evo-scale)); transform-origin: top left;
  -webkit-text-size-adjust: none; text-size-adjust: none;
}
.evo-ui button, .evo-ui select { font: inherit; color: inherit; }
.evo-ui :focus-visible { outline: calc(var(--u) * 2) solid #7dd3fc; outline-offset: calc(var(--u) * 2); }
.evo-view { position: absolute; inset: 0; }
.evo-view[hidden] { display: none; }
.evo-menu, .evo-picker { background: linear-gradient(#03131c77, #03131c55), #05080d url('/static/evolution-sim/menu-33.webp') center / cover no-repeat; }

/* 상단 바 */
.evo-topbar h2 { position: absolute; left: calc(var(--u) * 143); top: calc(var(--u) * 5); margin: 0; font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 40); font-weight: 700; letter-spacing: calc(var(--u) * -.5); }
.evo-back {
  position: absolute; left: calc(var(--u) * 79); top: calc(var(--u) * 6); width: calc(var(--u) * 42); height: calc(var(--u) * 42); display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: calc(var(--u) * 22); cursor: pointer; text-decoration: none;
}
.evo-back:hover { color: #fff; text-decoration: none; background: rgba(0, 0, 0, .6); }

/* 공통 패널 */
.evo-panel {
  position: absolute; top: calc(var(--u) * 77); height: calc(var(--u) * 385); box-sizing: border-box;
  border: calc(var(--u) * 1) solid rgba(83, 172, 184, .28); border-radius: calc(var(--u) * 4);
  background: rgba(7, 25, 34, .94);
}

/* 대상 선수 */
.evo-m-card { position: absolute; left: calc(var(--u) * 156); top: calc(var(--u) * 70); width: calc(var(--u) * 228); height: calc(var(--u) * 228); padding: 0; border: 0; background: none; cursor: pointer; }
.evo-card { position: relative; display: block; width: 100%; aspect-ratio: 1; }
@keyframes evo-card-fallback { to { opacity: 1; } }
.evo-card:not(.fimo-card-art) { opacity: 0; animation: evo-card-fallback 0s 1.5s forwards; }
.evo-card.fimo-card-art { animation: evo-card-in .12s ease-out; }
@keyframes evo-card-in { from { opacity: 0; } }
.evo-m-card-empty {
  position: absolute; left: calc(var(--u) * 32); top: calc(var(--u) * 14); width: calc(var(--u) * 164); height: calc(var(--u) * 200); display: grid; place-content: center; justify-items: center; gap: calc(var(--u) * 8);
  border: calc(var(--u) * 2) solid rgba(70, 220, 140, .6); border-radius: calc(var(--u) * 10); background: rgba(0, 0, 0, .35); color: #fff; font-size: calc(var(--u) * 15);
}
.evo-m-card-empty i { font-size: calc(var(--u) * 34); color: #2ee07a; }
.evo-m-card-empty[hidden] { display: none; }
.evo-m-level { position: absolute; left: calc(var(--u) * 186); top: calc(var(--u) * 300); display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); color: #d4dbe4; }
.evo-m-level select {
  height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 10); border: calc(var(--u) * 1) solid rgba(130, 170, 210, .45); border-radius: calc(var(--u) * 13);
  background: rgba(10, 16, 26, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23c3cad3'/%3E%3C/svg%3E") right calc(var(--u) * 9) center / calc(var(--u) * 9) calc(var(--u) * 6) no-repeat;
  font-size: calc(var(--u) * 12.5); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.evo-m-values { position: absolute; left: calc(var(--u) * 188); top: calc(var(--u) * 336); margin: 0; }
.evo-m-values dt { font-size: calc(var(--u) * 13.5); color: #e7ecf2; font-weight: 600; }
.evo-m-values dd { display: flex; align-items: center; gap: calc(var(--u) * 6); margin: calc(var(--u) * 4) 0 calc(var(--u) * 13); font-size: calc(var(--u) * 18.5); font-weight: 700; font-variant-numeric: tabular-nums; }
.evo-m-values img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); object-fit: contain; }

/* 가운데 패널 */
.evo-m-center { left: calc(var(--u) * 428); width: calc(var(--u) * 309); }
.evo-m-center > * { position: absolute; margin: 0; }
.evo-m-badges { inset: 0 0 auto 0; height: calc(var(--u) * 80); }
.evo-m-badges > * { position: absolute; }
.evo-m-from { left: calc(var(--u) * 39); top: calc(var(--u) * 16); width: calc(var(--u) * 54); height: calc(var(--u) * 54); }
.evo-m-to { left: calc(var(--u) * 208); top: calc(var(--u) * 10); width: calc(var(--u) * 66); height: calc(var(--u) * 66); }
.evo-m-badges .evo-chev { left: calc(var(--u) * 132); top: calc(var(--u) * 30); }
.evo-chev { position: absolute; display: flex; }
.evo-chev i { width: calc(var(--u) * 15); height: calc(var(--u) * 26); margin-right: calc(var(--u) * -3); background: linear-gradient(180deg, #f2f4f7, #a8afb9); clip-path: polygon(0 0, 48% 0, 100% 50%, 48% 100%, 0 100%, 52% 50%); }
.evo-m-line1 { left: 0; right: 0; top: calc(var(--u) * 87); text-align: center; font-size: calc(var(--u) * 11.5); color: #d4dae2; font-weight: 500; }
.evo-m-line1 i { font-size: calc(var(--u) * 11); }
.evo-m-line2 { left: 0; right: 0; top: calc(var(--u) * 108); text-align: center; font-size: calc(var(--u) * 11.5); color: #a0b5bd; font-weight: 500; }
.evo-m-gain { display: flex; align-items: center; justify-content: space-between; width: calc(var(--u) * 143); height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 9); box-sizing: border-box; border-radius: calc(var(--u) * 3); background: rgba(255, 255, 255, .07); font-size: calc(var(--u) * 14); font-weight: 600; }
.evo-m-gain b { color: #caff00; font-size: calc(var(--u) * 19); font-weight: 700; }
.evo-m-gain-ovr { left: calc(var(--u) * 7); top: calc(var(--u) * 164); }
.evo-m-gain-stat { left: calc(var(--u) * 157); top: calc(var(--u) * 164); }
.evo-m-gain-skill { left: calc(var(--u) * 7); top: calc(var(--u) * 207); }
.evo-m-divider { left: calc(var(--u) * 9); right: calc(var(--u) * 9); top: calc(var(--u) * 274); height: calc(var(--u) * 1); background: rgba(255, 255, 255, .13); }
.evo-m-protect { left: 0; right: 0; top: calc(var(--u) * 286); height: calc(var(--u) * 56); }
.evo-m-protect[hidden], .evo-m-protect-na[hidden] { display: none; }
.evo-m-shield {
  position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 5); width: calc(var(--u) * 44); height: calc(var(--u) * 44); display: grid; place-items: center; box-sizing: border-box;
  border-radius: 50%; border: calc(var(--u) * 3) solid #2fb7a3; background: radial-gradient(circle, #1d3a3e 0%, #12232a 70%);
  box-shadow: inset 0 0 0 calc(var(--u) * 3) #15262c, 0 0 0 calc(var(--u) * 1) rgba(47, 183, 163, .4); color: #4be3c4; font-size: calc(var(--u) * 24);
}
.evo-m-protect-count { position: absolute; left: calc(var(--u) * 72); top: calc(var(--u) * 18); font-size: calc(var(--u) * 13); color: #d4dae2; font-weight: 500; }
.evo-m-switch { position: absolute; right: calc(var(--u) * 12); top: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 10); cursor: pointer; }
.evo-m-switch-text { display: grid; justify-items: end; font-size: calc(var(--u) * 15); font-weight: 600; line-height: 1.2; }
.evo-m-switch-text em { font-style: normal; font-size: calc(var(--u) * 13); color: #d4dae2; font-weight: 500; }
.evo-ui input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.evo-m-switch-track { position: relative; width: calc(var(--u) * 38); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 9); background: #3b434e; transition: background .15s; }
.evo-m-switch-track::after { content: ""; position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 2); width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: #d9dde3; transition: transform .15s; }
.evo-ui input:checked + .evo-m-switch-track { background: #1f9ce8; }
.evo-ui input:checked + .evo-m-switch-track::after { transform: translateX(calc(var(--u) * 20)); background: #fff; }
.evo-ui input:focus-visible + .evo-m-switch-track { outline: calc(var(--u) * 2) solid #7dd3fc; outline-offset: calc(var(--u) * 2); }
.evo-m-protect-na { left: calc(var(--u) * 14); right: calc(var(--u) * 14); top: calc(var(--u) * 300); text-align: center; font-size: calc(var(--u) * 12); line-height: 1.5; color: #c7ced8; font-weight: 500; }
.evo-m-fine { left: calc(var(--u) * 6); right: calc(var(--u) * 6); bottom: calc(var(--u) * 8); text-align: center; font-size: calc(var(--u) * 8.4); color: #a0b5bd; font-weight: 500; letter-spacing: calc(var(--u) * -.3); }

/* 성공률 부스트 */
.evo-m-boost { left: calc(var(--u) * 755); width: calc(var(--u) * 307); }
.evo-p-boost { left: calc(var(--u) * 195); width: calc(var(--u) * 306); }
.evo-boost-title { position: absolute; left: calc(var(--u) * 11); top: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 600; color: #e7ecf2; }
.evo-gauge { position: absolute; left: calc(var(--u) * 11); top: calc(var(--u) * 33); width: calc(var(--u) * 285); height: calc(var(--u) * 13); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 3); }
.evo-gauge span { position: relative; overflow: hidden; display: grid; place-items: center; background: #233b46; font-size: calc(var(--u) * 9.5); font-weight: 600; color: #e9edf2; }
.evo-gauge span::before { content: ""; position: absolute; inset: 0; background: #00b9d7; transform-origin: left; transform: scaleX(var(--cell, 0)); transition: transform .35s ease; }
.evo-gauge span b { position: relative; font-weight: 600; }
.evo-gauge.is-full span::before { background: #b8f500; }
.evo-gauge.is-full span b { color: #142209; }
.evo-slots { position: absolute; left: calc(var(--u) * 13); top: calc(var(--u) * 56); width: calc(var(--u) * 281); display: grid; grid-template-columns: repeat(3, calc(var(--u) * 81)); justify-content: space-between; row-gap: calc(var(--u) * 9); }
.evo-slot { position: relative; width: calc(var(--u) * 81); height: calc(var(--u) * 102); padding: 0; border: 0; background: none; cursor: pointer; }
.evo-slot.is-empty { border: calc(var(--u) * 1.5) solid #1fd078; border-radius: calc(var(--u) * 3); background: rgba(0, 0, 0, .22); color: #2ee07a; font-size: calc(var(--u) * 30); }
.evo-slot.is-empty:hover { background: rgba(31, 208, 120, .1); }
.evo-slot.is-empty:disabled { opacity: .45; cursor: default; }
.evo-slot.is-locked { border: calc(var(--u) * 1) solid rgba(255, 255, 255, .13); border-radius: calc(var(--u) * 3); background: rgba(0, 0, 0, .28); color: #7a828d; font-size: calc(var(--u) * 19); cursor: default; }
.evo-slot.is-filled .evo-card { left: calc(var(--u) * -10); top: calc(var(--u) * -6); width: calc(var(--u) * 101); }
.evo-slot.is-filled:hover .evo-card { filter: brightness(.8); }
.evo-bar { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: 0; height: calc(var(--u) * 4); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 2); }
.evo-bar i { position: relative; overflow: hidden; background: #3d4652; }
.evo-bar i::before { content: ""; position: absolute; inset: 0; background: #00b9d7; transform-origin: left; transform: scaleX(var(--cell, 0)); }

/* 재료 목록 */
.evo-p-list { left: calc(var(--u) * 518); width: calc(var(--u) * 490); }
.evo-p-head { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 9); height: calc(var(--u) * 32); }
.evo-p-toggle { position: absolute; left: 0; top: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 14); cursor: pointer; }
.evo-p-select { position: absolute; left: calc(var(--u) * 166); top: calc(var(--u) * 2); width: calc(var(--u) * 166); height: calc(var(--u) * 28); }
.evo-p-select select { width: 100%; height: 100%; padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 12); border: 0; border-radius: calc(var(--u) * 14); background: rgba(0, 0, 0, .45); font-size: calc(var(--u) * 12); -webkit-appearance: none; appearance: none; cursor: pointer; }
.evo-p-select i { position: absolute; right: calc(var(--u) * 10); top: calc(var(--u) * 8); font-size: calc(var(--u) * 11); color: #c3cad3; pointer-events: none; }
.evo-p-auto { position: absolute; right: 0; top: 0; width: calc(var(--u) * 122); height: calc(var(--u) * 32); border: calc(var(--u) * 2) solid #2bd2b4; border-radius: calc(var(--u) * 4); background: rgba(10, 20, 26, .6); font-size: calc(var(--u) * 14); cursor: pointer; }
.evo-p-auto:hover { background: rgba(43, 210, 180, .12); }
.evo-p-grid { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 6); top: calc(var(--u) * 52); bottom: calc(var(--u) * 6); overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 14) calc(var(--u) * 6); align-content: start; padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 6) 0; scrollbar-width: thin; scrollbar-color: #4b5563 transparent; }
.evo-mat { position: relative; height: calc(var(--u) * 120); padding: 0; border: 0; background: none; cursor: pointer; }
.evo-mat .evo-card { margin: calc(var(--u) * -2) auto 0; width: calc(var(--u) * 112); }
.evo-mat .evo-bar { left: calc(var(--u) * 18); right: calc(var(--u) * 18); bottom: calc(var(--u) * 2); }
.evo-mat:hover .evo-card { filter: brightness(1.12); }
.evo-mat.is-zero { opacity: .45; }
.evo-mat-rate { position: absolute; right: calc(var(--u) * 8); top: calc(var(--u) * 2); z-index: 5; padding: calc(var(--u) * 1) calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: rgba(0, 0, 0, .7); font-size: calc(var(--u) * 10); color: #7cc8ff; font-weight: 700; }

/* 하단 바 */
.evo-bottombar { position: absolute; left: 0; right: 0; top: calc(var(--u) * 492); height: calc(var(--u) * 62); background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)); }
.evo-info-btn { position: absolute; left: calc(var(--u) * 79); top: calc(var(--u) * 10); height: calc(var(--u) * 40); display: flex; align-items: center; gap: calc(var(--u) * 14); padding: 0; border: 0; background: none; font-size: calc(var(--u) * 15.5); font-weight: 500; cursor: pointer; }
.evo-info-icon { display: grid; place-items: center; width: calc(var(--u) * 31); height: calc(var(--u) * 31); box-sizing: border-box; border: calc(var(--u) * 2) solid #fff; border-radius: 50%; font: 700 calc(var(--u) * 17)/1 Georgia, serif; }
.evo-hold-switch { right: auto; left: calc(var(--u) * 330); top: calc(var(--u) * 13); }
.evo-rate-readout { position: absolute; right: calc(var(--u) * 322); top: calc(var(--u) * 20); font-size: calc(var(--u) * 14); color: #d4dae2; font-variant-numeric: tabular-nums; }
.evo-rate-readout b { color: #fff; font-size: calc(var(--u) * 17); }
.evo-ui .evo-blue-btn {
  position: absolute; right: calc(var(--u) * 82); top: calc(var(--u) * 7); width: calc(var(--u) * 218); height: calc(var(--u) * 41); border: 0; border-radius: calc(var(--u) * 4); cursor: pointer;
  background: #caff00;
  box-shadow: none; font-size: calc(var(--u) * 18); font-weight: 700; color: #11220a;
}
.evo-blue-btn:hover:not(:disabled) { filter: brightness(1.08); }
.evo-blue-btn:disabled { background: #294049; color: #82979d; cursor: default; box-shadow: none; }
.evo-outline-btn { border: calc(var(--u) * 2) solid #2bd2b4; border-radius: calc(var(--u) * 4); background: rgba(7, 25, 34, .88); color: #fff; font-size: calc(var(--u) * 16); font-weight: 500; cursor: pointer; }
.evo-outline-btn:hover { background: rgba(43, 210, 180, .14); }

/* 알림 */
.evo-alert { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 0, .62); }
.evo-alert[hidden] { display: none; }
.evo-alert-box {
  position: absolute; left: calc(var(--u) * 262); top: calc(var(--u) * 158); width: calc(var(--u) * 676); height: calc(var(--u) * 237); box-sizing: border-box;
  border: calc(var(--u) * 1) solid #3fb3a5; border-radius: calc(var(--u) * 6); background: #0b2530;
}
.evo-alert-box h3 { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 10); margin: 0; font-size: calc(var(--u) * 22); font-weight: 700; }
.evo-alert-x { position: absolute; right: calc(var(--u) * 14); top: calc(var(--u) * 8); padding: calc(var(--u) * 4); border: 0; background: none; font-size: calc(var(--u) * 22); cursor: pointer; }
.evo-alert-box p { position: absolute; left: calc(var(--u) * 26); right: calc(var(--u) * 26); top: calc(var(--u) * 72); margin: 0; font-size: calc(var(--u) * 15.5); line-height: 1.55; font-weight: 500; }
.evo-alert-actions button { position: absolute; top: calc(var(--u) * 189); width: calc(var(--u) * 320); height: calc(var(--u) * 39); }
.evo-alert-actions .evo-outline-btn { left: calc(var(--u) * 14); }
.evo-alert-actions .evo-blue-btn { left: auto; right: calc(var(--u) * 14); top: calc(var(--u) * 189); width: calc(var(--u) * 320); height: calc(var(--u) * 39); font-size: calc(var(--u) * 16); }

/* ===== 연출: 녹화 영상(카드·배지 자리를 지운 것) 위에 고른 선수의 카드와 배지를 같은 위치에 올린다 ===== */
.evo-scene { background: #000; overflow: hidden; }
.evo-video, .evo-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.evo-scene.v-success .evo-video[data-video="success"],
.evo-scene.v-fail .evo-video[data-video="fail"] { opacity: 1; }
.evo-scene.plate-success .evo-plate-success, .evo-scene.plate-fail .evo-plate-fail { opacity: 1; }
.evo-scene.plate-success .evo-video, .evo-scene.plate-fail .evo-video { opacity: 0; }
.evo-s-card { position: absolute; left: calc(var(--u) * 486); top: calc(var(--u) * 161); width: calc(var(--u) * 228); opacity: 0; }
.evo-s-badge { position: absolute; left: calc(var(--u) * 531); top: calc(var(--u) * 203); width: calc(var(--u) * 138); height: auto; opacity: 0; pointer-events: none; will-change: transform, opacity, filter; }
.evo-s-flip { position: absolute; left: calc(var(--u) * 486); top: calc(var(--u) * 158); width: calc(var(--u) * 228); aspect-ratio: 1; opacity: 0; will-change: transform; }
.evo-s-flip .evo-card { position: absolute; inset: 0; }
.evo-s-back {
  position: absolute; left: 19%; top: 8%; width: 62%; height: 84%; border-radius: calc(var(--u) * 4); opacity: 0;
  background: linear-gradient(90deg, #0b0d10, #2a2f36 45%, #0b0d10); box-shadow: inset 0 0 0 calc(var(--u) * 2) #4b525c;
}
.evo-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }

/* 결과 */
.evo-result { position: absolute; inset: 0; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .35s; }
.evo-scene.p-result .evo-result { opacity: 1; pointer-events: auto; }
.evo-scene.p-result .evo-s-badge, .evo-scene.p-result .evo-s-flip, .evo-scene.p-result .evo-s-card { opacity: 0 !important; }
.evo-scene.p-result .evo-scene.p-result .evo-plate { filter: brightness(.55); }
.evo-r-panel { position: absolute; left: calc(var(--u) * 556); top: calc(var(--u) * 34); width: calc(var(--u) * 497); height: calc(var(--u) * 421); background: linear-gradient(90deg, rgba(6, 9, 14, .55), rgba(6, 9, 14, .78)); transform: translateX(calc(var(--u) * 40)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.evo-scene.p-result .evo-r-panel { transform: none; }
.evo-r-title { position: absolute; left: calc(var(--u) * 226); top: calc(var(--u) * 70); margin: 0; font-size: calc(var(--u) * 45); font-weight: 800; letter-spacing: calc(var(--u) * -1); }
.evo-r-card { position: absolute; left: calc(var(--u) * 214); top: calc(var(--u) * 178); width: calc(var(--u) * 230); }
.evo-r-from { position: absolute; left: calc(var(--u) * 663); top: calc(var(--u) * 60); width: calc(var(--u) * 80); }
.evo-r-chev { left: calc(var(--u) * 783); top: calc(var(--u) * 87); }
.evo-r-chev i { width: calc(var(--u) * 14); height: calc(var(--u) * 24); background: linear-gradient(180deg, #5af08a, #13b64b); }
.evo-r-to { position: absolute; left: calc(var(--u) * 857); top: calc(var(--u) * 52); width: calc(var(--u) * 98); filter: drop-shadow(0 0 calc(var(--u) * 16) rgba(40, 220, 110, .55)); }
.evo-scene.is-fail-result .evo-r-chev i { background: linear-gradient(180deg, #d1d5db, #6b7280); }
.evo-r-stats { position: absolute; left: calc(var(--u) * 585); top: calc(var(--u) * 186); width: calc(var(--u) * 432); margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 62); }
.evo-r-stats div { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 62); border-bottom: calc(var(--u) * 1) solid rgba(255, 255, 255, .13); }
.evo-r-stats div:nth-last-child(-n+2) { border-bottom: 0; }
.evo-r-stats dt { font-size: calc(var(--u) * 17); font-weight: 500; }
.evo-r-stats dt em { font-style: normal; color: #3ae06a; font-weight: 600; }
.evo-r-stats dt em.is-down { color: #ff5d5d; }
.evo-r-stats dd { margin: 0; padding-right: calc(var(--u) * 18); font-size: calc(var(--u) * 24); font-weight: 700; font-variant-numeric: tabular-nums; }
.evo-r-stats dd::after { content: ""; position: absolute; right: 0; top: calc(var(--u) * 13); width: calc(var(--u) * 13); height: calc(var(--u) * 13); background: center / contain no-repeat; }
.evo-r-stats dd.is-up::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l4-3.6L10 6M2 10l4-3.6L10 10' fill='none' stroke='%233ae06a' stroke-width='2'/%3E%3C/svg%3E"); }
.evo-r-stats dd.is-down::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l4 3.6L10 2M2 6l4 3.6L10 6' fill='none' stroke='%23ff5d5d' stroke-width='2'/%3E%3C/svg%3E"); top: calc(var(--u) * 22); }
.evo-r-strip { position: absolute; left: calc(var(--u) * 556); top: calc(var(--u) * 398); width: calc(var(--u) * 497); height: calc(var(--u) * 57); margin: 0; background: rgba(0, 0, 0, .86); text-align: center; line-height: calc(var(--u) * 57); font-size: calc(var(--u) * 25); font-weight: 800; color: #39e46a; }
.evo-r-strip.is-hold { color: #fff; }
.evo-r-bottom { position: absolute; left: 0; right: 0; top: calc(var(--u) * 500); height: calc(var(--u) * 54); background: rgba(0, 0, 0, .86); }
.evo-r-skip { position: absolute; left: calc(var(--u) * 527); top: 0; height: calc(var(--u) * 54); display: flex; align-items: center; gap: calc(var(--u) * 13); font-size: calc(var(--u) * 16.5); font-weight: 400; letter-spacing: calc(var(--u) * -.3); cursor: pointer; }
.evo-r-box { width: calc(var(--u) * 22); height: calc(var(--u) * 22); box-sizing: border-box; border: calc(var(--u) * 1.5) solid #6f7680; border-radius: calc(var(--u) * 3); background: #1b1e24; }
.evo-r-skip input:checked + .evo-r-box { background: #1b1e24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.6-6.8' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E") center / 78% no-repeat; }
.evo-r-skip input:focus-visible + .evo-r-box { outline: calc(var(--u) * 2) solid #7dd3fc; outline-offset: calc(var(--u) * 2); }
.evo-r-bottom .evo-outline-btn { position: absolute; left: calc(var(--u) * 716); top: calc(var(--u) * 4); width: calc(var(--u) * 218); height: calc(var(--u) * 41); }
.evo-r-bottom .evo-blue-btn { top: calc(var(--u) * 4); right: calc(var(--u) * 28); width: calc(var(--u) * 220); }



/* ===== 페이지 제목 / 선택 정보 / 기록 / 이용 안내 (팩 오프너와 같은 구성: 상자 없이 구분선과 여백) ===== */
.evo-page {
  --log-bg: #fff; --log-line: #dce3e8; --log-line-soft: #eef2f6; --log-ink: #172033; --log-sub: #70808d; --log-faint: #8b969f;
  --log-up: #059669; --log-down: #dc2626;
  gap: 0;
}
html[data-theme="dark"] .evo-page {
  --log-bg: #131d2e; --log-line: #334155; --log-line-soft: #243145; --log-ink: #e7ecf2; --log-sub: #a7b5c7; --log-faint: #7b8aa0;
  --log-up: #4ade80; --log-down: #f87171;
}
.evo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 24px; }
.evo-heading h1 { margin: 0; font-size: 32px; line-height: 1.25; font-weight: 800; letter-spacing: -1.2px; color: var(--log-ink); }

/* 화면 아래 선택 정보 줄 */
.evo-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--log-line); }
.evo-info strong { display: block; font-size: 14px; line-height: 1.6; color: var(--log-ink); }
.evo-info p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--log-sub); }
.evo-info p:empty { display: none; }
.evo-info button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--log-line); border-radius: 5px; background: transparent; color: var(--log-ink); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.evo-info button:hover { border-color: var(--log-sub); }
.evo-info button:focus-visible { outline: 2px solid #4b5563; outline-offset: 2px; }

/* 이용 안내 */
.evo-guide { margin-top: 6px; text-align: left; }
.evo-guide summary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; color: var(--log-sub); font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.evo-guide summary::-webkit-details-marker { display: none; }
.evo-guide summary::before { content: '▸'; font-size: 11px; transition: transform .15s ease; }
.evo-guide[open] summary::before { transform: rotate(90deg); }
.evo-guide summary:focus-visible { outline: 2px solid #4b5563; outline-offset: 2px; }
.evo-guide-content { max-width: 760px; margin-top: 2px; padding: 4px 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--log-sub); text-align: left; }
.evo-guide-content h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--log-ink); }
.evo-guide-content h3 { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--log-ink); }
.evo-guide-content ol, .evo-guide-content ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.7; }
.evo-guide-content p { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--log-faint); }
.evo-guide-content a { color: var(--brand-dark, #087f5b); }
.evo-guide-table { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 13px; }
.evo-guide-table th, .evo-guide-table td { padding: 7px 8px; border-bottom: 1px solid var(--log-line-soft); text-align: left; }
.evo-guide-table th { color: var(--log-faint); font-weight: 500; font-size: 12px; }
.evo-guide-table td { color: var(--log-ink); }

/* 진화 기록: 제목 + 한 줄 요약(라벨 위, 숫자 아래) + 표 */
.evo-log { padding: 22px 0 8px; color: var(--log-ink); }
.evo-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.evo-log-head h2 { margin: 4px 0; font-size: 17px; font-weight: 700; color: var(--log-ink); }
.evo-log-reset { padding: 8px 12px; border: 1px solid var(--log-line); border-radius: 5px; background: transparent; color: var(--log-sub); font: inherit; font-size: 12px; cursor: pointer; }
.evo-log-reset:hover { color: var(--log-ink); border-color: var(--log-sub); }
.evo-log-reset[hidden] { display: none; }
.evo-log-reset:focus-visible { outline: 2px solid #4b5563; outline-offset: 2px; }
.evo-log-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 24px; margin: 14px 0 20px; padding: 0; border: 0; }
.evo-log-stats div { display: block; padding: 0; border: 0; }
.evo-log-stats dt { margin-bottom: 4px; font-size: 12px; color: var(--log-sub); font-weight: 500; }
.evo-log-stats dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--log-ink); font-variant-numeric: tabular-nums; }
.evo-log-stats .is-success dd { color: var(--log-up); }
.evo-log-stats .is-fail dd { color: var(--log-down); }
.evo-log-table { max-width: 760px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.evo-log-table[hidden] { display: none; }
.evo-log-table table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; }
.evo-log-table th { position: sticky; top: 0; z-index: 1; padding: 8px 6px; background: var(--log-bg); color: var(--log-faint); font-size: 12px; font-weight: 500; text-align: center; border-bottom: 1px solid var(--log-line); }
.evo-log-table td { padding: 8px 6px; border-bottom: 1px solid var(--log-line-soft); vertical-align: middle; text-align: center; }
.evo-log-table th:nth-child(1) { width: 12%; }
.evo-log-table th:nth-child(2) { width: 34%; text-align: left; }
.evo-log-table th:nth-child(3) { width: 22%; }
.evo-log-table th:nth-child(4) { width: 16%; }
.evo-log-table th:nth-child(5) { width: 16%; }
.evo-log-no { color: var(--log-faint); font-variant-numeric: tabular-nums; }
.evo-log-name { text-align: left !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-log-step { white-space: nowrap; }
.evo-log-step img { width: 28px; height: 28px; vertical-align: middle; }
.evo-log-step i { margin: 0 2px; color: var(--log-faint); font-size: 11px; vertical-align: middle; }
.evo-log-result span { font-weight: 700; font-size: 13px; }
.is-success .evo-log-result span { color: var(--log-up); }
.is-fail .evo-log-result span { color: var(--log-down); }
.is-protected .evo-log-result span { color: var(--log-sub); }
.evo-log-rate { color: var(--log-sub); font-variant-numeric: tabular-nums; }
.evo-log-empty { margin: 0; padding: 4px 0 12px; text-align: left; font-size: 13px; color: var(--log-faint); }
.evo-log-empty[hidden] { display: none; }

.evo-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(82vh, 700px); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink, #1f2937); }
.evo-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.evo-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.evo-dialog-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.evo-dialog-close { border: 0; background: none; color: var(--muted); font-size: 17px; cursor: pointer; padding: 6px; }
.evo-dialog-close:hover { color: var(--ink); }
.evo-search { display: block; width: calc(100% - 32px); margin: 0 16px 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel, #fff); color: var(--ink); font: inherit; font-size: 16px; box-sizing: border-box; outline: none; }
.evo-search:focus { border-color: #4b5563; }
.evo-search::placeholder { color: var(--muted); }
.evo-player-results { display: grid; gap: 0; padding: 0 8px 12px; overflow-y: auto; max-height: calc(min(82vh, 700px) - 120px); }
.evo-player-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; padding: 4px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.evo-player-row:last-child { border-bottom: 0; }
.evo-player-row:hover, .evo-player-row:focus-visible { background: rgba(100, 116, 139, .1); outline: none; }
.evo-player-row .evo-card { width: 58px; }
.evo-player-meta { display: grid; gap: 2px; min-width: 0; }
.evo-player-meta b { font-size: 15px; font-weight: 700; }
.evo-player-meta small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-muted { margin: 20px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.evo-info-body { padding: 0 16px 16px; overflow-y: auto; max-height: calc(min(82vh, 700px) - 56px); }
.evo-info-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.evo-info-table th, .evo-info-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; }
.evo-info-table th { color: var(--muted); font-weight: 600; }
.evo-info-table tr.is-current td { color: var(--brand-dark); font-weight: 700; }
.evo-info-rules { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.evo-info-source { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.evo-info-source a { color: var(--brand-dark); }

@media (max-width: 620px) {
  body.evolution-sim-page .main-content { padding: 6px 0 28px; }
  .evo-screen { border-radius: 0; width: 100vw; margin-left: calc(50% - 50vw); }
  .evo-heading, .evo-info, .evo-log, .evo-guide { margin-left: 14px; margin-right: 14px; }
  .evo-heading { margin-top: 14px; margin-bottom: 16px; }
  .evo-heading h1 { font-size: 24px; letter-spacing: -.8px; }
  .evo-info { gap: 8px; padding: 12px 0; }
  .evo-info p { font-size: 11px; }
  .evo-info button { padding: 8px 10px; font-size: 11px; }
  .evo-log { padding-top: 16px; }
  .evo-log-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .evo-log-table th:nth-child(5), .evo-log-rate { display: none; }
  .evo-log-table th:nth-child(1) { width: 12%; }
  .evo-log-table th:nth-child(2) { width: 38%; }
  .evo-log-table th:nth-child(3) { width: 30%; }
  .evo-log-table th:nth-child(4) { width: 20%; }
  .evo-log-step img { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .evo-r-panel { transition: none; }
}

/* Version 33 scene controls and native loading sprite. */
.evo-boost-rate { position: absolute; right: calc(var(--u) * 12); top: calc(var(--u) * 7); color: #caff00; font-size: calc(var(--u) * 19); font-weight: 800; font-variant-numeric: tabular-nums; }
.evo-expand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 42px; padding: 8px 12px; border: 1px solid var(--log-line); border-radius: 4px; background: transparent; color: var(--log-ink); font: inherit; font-size: 12px; cursor: pointer; }
.evo-expand:hover { border-color: var(--log-sub); }
.evo-loading { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: #000b; }
.evo-loading[hidden] { display: none; }
.evo-loading img { width: calc(var(--u) * 100); height: calc(var(--u) * 100); }
.evo-sound, .evo-expand-stage { position: absolute; right: calc(var(--u) * 77); top: calc(var(--u) * 10); z-index: 40; display: grid; place-items: center; width: calc(var(--u) * 34); height: calc(var(--u) * 34); padding: 0; border: 1px solid #ffffff30; border-radius: calc(var(--u) * 4); background: #04131caa; color: #d3e4e9; cursor: pointer; font-size: calc(var(--u) * 16); }
.evo-expand-stage { right: calc(var(--u) * 35); }
.evo-screen:is(:fullscreen, .is-fullscreen) { position: fixed; inset: 0; z-index: 100000; width: 100vw; height: 100dvh; margin: 0; border-radius: 0; aspect-ratio: auto; background: #000; }
.evo-screen:is(:fullscreen, .is-fullscreen) .evo-ui { left: 50%; top: 50%; transform: scale(var(--evo-scale)) translate(-50%, -50%); }
@media (max-width: 620px) { .evo-heading h1 { font-size: 21px; } .evo-expand { padding: 8px 10px; font-size: 11px; } }