/* World War II. Everything scoped under .ww2-*. */

.ww2-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ww2-sc.open { flex: 1; justify-content: center; }
.ww2-note { font: 600 12px var(--sans); color: var(--faint); text-align: center; }

/* 0. Willow Run */
.ww2-line { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 380px; }
.ww2-photo { position: relative; width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 12px rgba(0, 0, 0, .4); }
.ww2-photo img { display: block; width: 100%; height: 190px; object-fit: cover; }
.ww2-clock { position: absolute; right: 8px; top: 8px; padding: 4px 10px; border-radius: 99px; background: rgba(20, 14, 40, .85); font: 700 13px var(--sans); color: var(--text); }
.ww2-clock b { color: var(--gold); font-variant-numeric: tabular-nums; }
.ww2-run { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 6px; width: 100%; min-height: 132px; align-content: start; }
.ww2-park { width: 100%; height: 40px; object-fit: contain; animation: ww2-out .45s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes ww2-out { from { transform: translate(-60px, -30px) scale(.5); opacity: 0; } }
.ww2-count { font: 700 15px var(--sans); color: var(--dim); }
.ww2-count b { font-size: 24px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* 1. the two sides */
.ww2-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; max-width: 340px; }
.ww2-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 18px; background: var(--raised); border: 1.5px solid var(--line-strong); text-align: center; }
.ww2-side img { width: 100%; height: 70px; object-fit: contain; }
.ww2-side b { font: 700 18px var(--serif); color: var(--text); }
.ww2-side span { font: 600 13px/1.3 var(--sans); color: var(--dim); }

/* 2. the Atlantic */
.ww2-sea { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 350px; padding: 10px; border-radius: 18px; background: linear-gradient(#1b2a52, #12193a); border: 1.5px solid var(--line-strong); }
.ww2-top { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.ww2-yard, .ww2-sub { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ww2-yard span, .ww2-sub span { font: 800 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.ww2-hull { --p: 0%; position: relative; width: 140px; height: 50px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1.5px dashed var(--line-strong); }
.ww2-hull img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ww2-sub img { width: 110px; height: 40px; object-fit: contain; }
.ww2-sub.fire img { animation: ww2-bob .5s ease-out; }
@keyframes ww2-bob { 30% { transform: translateY(-6px) scale(1.06); } }
.ww2-rates { display: flex; justify-content: space-between; gap: 6px; width: 100%; }
.ww2-rates span { flex: 1; padding: 4px 6px; border-radius: 8px; font: 700 12px/1.25 var(--sans); text-align: center; }
.ww2-rb { background: rgba(255, 200, 80, .14); color: #ffd36a; }
.ww2-rs { background: rgba(255, 255, 255, .07); color: var(--dim); }
.ww2-sea.win .ww2-rb { background: rgba(255, 200, 80, .3); }
.ww2-fleetlab { font: 700 14px var(--sans); color: var(--text); }
.ww2-fleetlab b { color: var(--gold); font-size: 20px; font-variant-numeric: tabular-nums; }
.ww2-sea.low .ww2-fleetlab b { color: #b3a9e0; }
.ww2-fleet { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px 4px; width: 100%; min-height: 84px; align-content: start; }
.ww2-ship { width: 100%; height: 36px; object-fit: contain; transition: transform .6s, opacity .6s; }
.ww2-ship.new { animation: ww2-in .4s cubic-bezier(.3, 1.4, .5, 1); }
.ww2-ship.down { transform: translateY(14px) rotate(18deg); opacity: 0; }
@keyframes ww2-in { from { transform: scale(.3); opacity: 0; } }

/* 3. sunk against built */
.ww2-face { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 340px; }
.ww2-duel { display: flex; justify-content: center; gap: 18px; }
.ww2-duel img { width: 130px; height: 60px; object-fit: contain; }
.ww2-tons { width: 100%; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s; }
.ww2-face.shown .ww2-tons { opacity: 1; transform: none; }
.ww2-face.shown .ww2-tons.built { transition-delay: .35s; }
.ww2-tons span { display: block; font: 700 13px var(--sans); color: var(--dim); margin-bottom: 2px; }
.ww2-tons div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.ww2-tons img { width: 100%; height: 20px; object-fit: contain; }
.ww2-tons.sunk img { filter: grayscale(1) brightness(.55); }

/* 5. tanks */
.ww2-tanks { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.ww2-trow { display: block; width: 100%; padding: 6px 8px; border-radius: 14px; background: transparent; border: 1.5px solid transparent; color: var(--text); text-align: left; cursor: pointer; }
.ww2-trow.right { border-color: var(--mint); }
.ww2-trow.wrong { border-color: var(--red); }
.ww2-trow span { display: block; font: 700 13px var(--sans); color: var(--dim); margin-bottom: 2px; }
.ww2-trow.tiger img { width: 64px; height: 34px; object-fit: contain; }
.ww2-shermans { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px 2px; min-height: 120px; align-content: start; }
.ww2-shermans img { width: 100%; height: 26px; object-fit: contain; animation: ww2-in .35s cubic-bezier(.3, 1.4, .5, 1); }

/* 6. planes */
.ww2-planes { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.ww2-prow span { display: block; font: 700 13px var(--sans); color: var(--dim); margin-bottom: 2px; }
.ww2-prow div { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.ww2-prow img { width: 100%; height: 28px; object-fit: contain; }
.ww2-prow.jp div { opacity: 0; transition: opacity .5s; }
.ww2-prow.jp img { filter: hue-rotate(160deg) saturate(.5); }
.ww2-planes.shown .ww2-prow.jp div { opacity: 1; }

/* 7. Yamamoto */
.ww2-yama { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 340px; }
.ww2-yama img { width: 110px; height: auto; border-radius: 12px; filter: grayscale(.2); box-shadow: 0 10px 20px rgba(0, 0, 0, .4); }
.ww2-yama blockquote { margin: 0; font: italic 600 15px/1.35 var(--serif); color: var(--text); }

@media (max-height: 700px) {
  .ww2-side img { height: 54px; }
  .ww2-hull { height: 42px; }
  .ww2-run { min-height: 110px; }
  .ww2-photo img { height: 140px; }
  .ww2-line { gap: 4px; }
  .ww2-park { height: 32px; }
  .ww2-duel img { height: 48px; }
  .ww2-yama img { width: 92px; }
  .ww2-yama blockquote { font-size: 14px; }
  .ww2-shermans { min-height: 110px; }
}