/* Piano Attack: THE DEBRIEF, FIVE WAYS (2026-10-02, round piano-attack-debrief-r1; js/attack-debrief.js).
   Lionel: "this information needs to be presented better. the skills need 'bars' and overall we need some kind of
   fun visualization rather than a bunch of numbers." Five presentations of one flight's results, switched by
   [data-style] on the stage's own #debrief. Shared: the panel that fits the stage, the head (stars, title), the
   foot (the notes and the two buttons, always in sight), the skills' bars, the coins. Then a block a style.
   The colours are written out, not the page's variables: the lab and the game both link this file. */

@font-face { font-family: "Barlow"; src: url("fonts/Barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-800i.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

/* ---- the panel: as wide as the stage allows, never taller than it, the middle scrolls */
.pa-debrief[data-style] { top: 50%; transform: translate(-50%, -50%); width: min(1080px, calc(100% - 20px)); max-height: calc(100% - 14px); padding: 0; text-align: left;
  display: flex; flex-direction: column; overflow: hidden; container: dx / inline-size; background: rgba(15, 17, 23, .97); box-shadow: 0 20px 70px rgba(0, 0, 0, .6);
  color: #ecebe4; font: 500 14px/1.3 Barlow, -apple-system, "Segoe UI", sans-serif; }
.pa-debrief[data-style][hidden] { display: none; }
.pa-debrief[data-style] h4 { font: 700 12.5px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: #c9a94a; margin: 2px 0 7px; }
.pa-debrief[data-style] h4 small { font: 500 11px/1.2 Barlow, sans-serif; text-transform: none; letter-spacing: 0; color: #8b8f9a; margin-left: 6px; }
.dx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px 12px; scrollbar-width: thin; scrollbar-color: #3a3f4c transparent; }
.dx-px { image-rendering: pixelated; }
.dx-none { margin: 0 0 6px; font-size: 12.5px; color: #a7aab4; }

/* ---- the head: the stars, the verdict, the mission */
.dx-head { flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 11px 18px 10px; border-bottom: 1px solid rgba(255, 228, 92, .22); background: linear-gradient(180deg, rgba(255, 228, 92, .11), rgba(255, 228, 92, 0)); }
.pa-debrief[data-style] .dx-head h3 { font: 800 36px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 2px; color: #ffe45c; margin: 0; }
.dx-head p { margin: 4px 0 0; font-size: 12.5px; color: #a7aab4; }
.dx-head p span { color: #c9c6bb; }
.pa-debrief[data-style] .dx-head.tone-down h3, .pa-debrief[data-style] .dx-head.tone-fuel h3 { color: #ff7a6a; }
.pa-debrief[data-style] .dx-head.tone-escaped h3 { color: #ffb23e; }
.dx-head.tone-down, .dx-head.tone-fuel { background: linear-gradient(180deg, rgba(255, 90, 74, .13), rgba(255, 90, 74, 0)); border-bottom-color: rgba(255, 90, 74, .25); }
.dx-stars { flex: none; font-size: 42px; line-height: 1; letter-spacing: 3px; color: #2c303b; white-space: nowrap; }
.dx-stars i { font-style: normal; display: inline-block; }
.dx-stars i.on { color: #ffe45c; text-shadow: 0 2px 0 #a8791a, 0 0 18px rgba(255, 228, 92, .45); }

/* ---- the foot: what the host has to say, and the two buttons */
.dx-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 16px 10px; border-top: 1px solid #2a2e38; background: rgba(0, 0, 0, .28); }
.dx-notes { min-width: 0; }
.dx-notes p { margin: 0; font-size: 12.5px; line-height: 1.35; color: #a7aab4; }
.dx-notes p.lost { color: #ff9b8f; font-weight: 700; }
.dx-notes p.skip { color: #8ff0a0; font-weight: 700; }
.dx-notes p.skip.lost { color: #ffd9a0; }
.dx-notes p.guest { color: #ffd9a0; }
.dx-btns { flex: none; display: flex; gap: 8px; }
.pa-debrief[data-style] .dx-btns button { white-space: nowrap; }

/* ---- a skill's bar: what it had, and what this flight added */
.dx-sks { display: grid; gap: 2px 18px; }
.dx-sk { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 3px 0; }
.dx-ico { font-size: 18px; line-height: 1; text-align: center; }
.dx-skt { display: flex; align-items: baseline; gap: 7px; font-size: 13px; line-height: 1.15; white-space: nowrap; }
.dx-skt b { font-weight: 700; color: #ecebe4; overflow: hidden; text-overflow: ellipsis; }
.dx-lv { font: 700 11px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .9px; text-transform: uppercase; font-style: normal; color: #c9a94a; }
.dx-plus { margin-left: auto; font: 700 15px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #8ff0a0; font-variant-numeric: tabular-nums; }
.dx-up { text-decoration: none; font: 800 9.5px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1px; background: #ffe45c; color: #14161c; padding: 2px 5px 1px; border-radius: 3px; }
.dx-up[hidden] { display: none; }
.dx-bar { display: flex; height: 9px; margin-top: 4px; background: #0b0d12; border-radius: 99px; overflow: hidden; box-shadow: inset 0 0 0 1px #2a2e38; }
.dx-bar i { display: block; height: 100%; flex: none; }
.dx-bar .was { background: #5f8a5a; }
.dx-bar .gain { background: linear-gradient(90deg, #8ff0a0, #d6ff8f); box-shadow: 0 0 10px rgba(143, 240, 160, .55); }
.dx-sk.up .dx-lv { color: #ffe45c; }
.dx-sk.up .dx-bar .gain { background: linear-gradient(90deg, #ffc93c, #fff3a0); box-shadow: 0 0 10px rgba(255, 228, 92, .6); }
.dx-sk.same { opacity: .5; }
.dx-sk.wait .dx-bar { animation: dx-wait 1.1s ease-in-out infinite; }
.dx-sk.flash .dx-bar { animation: dx-flash .3s ease-out; }
.dx-sks.many .dx-sk:not(.dx-card) { padding: 1px 0; }
.dx-sks.many .dx-sk:not(.dx-card) .dx-bar { height: 7px; margin-top: 3px; }

/* ---- the coins */
.dx-pile { display: inline-flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 3px; min-height: 30px; }
.dx-coin { image-rendering: pixelated; }
.dx-pile i { font: 700 13px/1 Barlow, sans-serif; font-style: normal; color: #ffe9a6; align-self: center; margin: 0 4px 0 1px; }
.dx-payline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.dx-payline > b { font: 800 36px/1 "Barlow Condensed", Barlow, sans-serif; color: #8ff0a0; font-variant-numeric: tabular-nums; }
.dx-payline > i { font-style: normal; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #a7aab4; }
.dx-payline small { flex-basis: 100%; font-size: 11.5px; color: #8b8f9a; }

/* ---- rings (the dial, the wheel's four) and chips */
.dx-ring { display: block; width: 100%; }
.dx-ring .bg { fill: none; stroke: #23262f; }
.dx-ring .fg { fill: none; stroke: #8ff0a0; stroke-linecap: round; }
.dx-ring .fg.bad { stroke: #ff7a6a; }
.dx-ring .fg.fuel { stroke: #ffb23e; }
.dx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 11px; }
.dx-chip { display: inline-flex; align-items: baseline; gap: 5px; background: #1b1e26; border: 1px solid #2a2e38; border-radius: 99px; padding: 5px 11px 5px 8px; white-space: nowrap; }
.dx-chip .ic { font-size: 14px; align-self: center; }
.dx-chip b { font: 800 19px/1 "Barlow Condensed", Barlow, sans-serif; color: #fff; }
.dx-chip b i { font: 700 12px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #8b8f9a; }
.dx-chip > i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: #a7aab4; }
.dx-chip.bad b { color: #ff9b8f; }
.dx-chips.mini { justify-content: flex-start; gap: 4px; margin: 7px 0 10px; }
.dx-chips.mini .dx-chip { padding: 3px 9px 3px 6px; }
.dx-chips.mini .dx-chip b { font-size: 15px; }
.dx-chips.mini .dx-chip > i { font-size: 10px; }
.dx-chips.mini .dx-chip .ic { font-size: 12px; }

/* ======================================================== A · the flight report */
.dxa { display: grid; grid-template-columns: minmax(250px, 300px) minmax(220px, 262px) minmax(0, 1fr); }
.dxa > section { padding: 2px 16px; }
.dxa > section:first-child { padding-left: 2px; }
.dxa > section:last-child { padding-right: 2px; }
.dxa > section + section { border-left: 1px solid #2a2e38; }
.dx-dial { position: relative; width: 144px; margin: 0 auto; }
.dx-dial .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dx-dial .in b { font: 800 50px/.9 "Barlow Condensed", Barlow, sans-serif; color: #fff; }
.dx-dial .in b.word { font-size: 32px; text-transform: uppercase; letter-spacing: 1px; }
.dx-dial .in i { font: 700 16px/1.2 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #a7aab4; }
.dx-dialcap { margin: 5px 0 10px; font-size: 11px; text-align: center; text-transform: uppercase; letter-spacing: .7px; color: #a7aab4; }
.dx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dx-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline; background: #1b1e26; border: 1px solid #2a2e38; border-radius: 8px; padding: 6px 9px 7px; }
.dx-tile .ic { font-size: 14px; align-self: center; }
.dx-tile b { font: 800 22px/1 "Barlow Condensed", Barlow, sans-serif; color: #fff; }
.dx-tile i { grid-column: 1 / 3; font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: #a7aab4; margin-top: 1px; }
.dx-tile small { grid-column: 1 / 3; font-size: 10.5px; line-height: 1.2; color: #7f8492; margin-top: 2px; }
.dx-tile .m { grid-column: 1 / 3; height: 4px; margin-top: 5px; background: #0b0d12; border-radius: 9px; overflow: hidden; }
.dx-tile .m u { display: block; height: 100%; background: #8ff0a0; }
.dx-tile.bad b { color: #ff9b8f; }
.dx-tile .m.bad u { background: #ff7a6a; }
.dx-tile .m.fuel u { background: #ffb23e; }
.dxa-pay { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dx-total { margin-top: 4px; }
.dx-total b { display: block; font: 800 58px/1 "Barlow Condensed", Barlow, sans-serif; color: #8ff0a0; font-variant-numeric: tabular-nums; }
.dx-total i { display: block; font-style: normal; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: #a7aab4; }
.dx-stack { display: flex; width: 100%; height: 14px; margin: 13px 0 8px; border-radius: 99px; overflow: hidden; background: #0b0d12; }
.dx-stack i, .dx-legend li i { background: var(--c); }
.dx-stack i + i { box-shadow: -2px 0 0 #0f1117; }
.soldiers { --c: #ffe45c; } .rush { --c: #8ff0a0; } .home { --c: #6fb7ff; } .bullets { --c: #d9a25e; }
.dx-legend { list-style: none; width: 100%; margin: 0; padding: 0; font-size: 12.5px; color: #c9c6bb; text-align: left; }
.dx-legend li { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.dx-legend li i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.dx-legend b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.dx-legend li.kept { color: #8b8f9a; font-size: 11.5px; }

/* ========================================================= B · the arcade tally, PICKED: a deck of three cards
   Lionel, the same afternoon: "i like B the best. and this card can be divided into like multiple cards that come
   out every round ... and then you can just press a key on your keyboard to move to the next card." The panel is
   card-shaped; its three cards (the fight, the plane, the skills) share ONE cell of a grid, so it is as tall as the
   tallest and nothing moves when a card turns but the card; the purse (.dxb-total) and the foot stay put under it. */
.pa-debrief[data-style="b"] { width: min(820px, calc(100% - 12px)); max-height: calc(100% - 12px); background: radial-gradient(120% 90% at 50% 0%, #17203f, #090b14 70%); }
.pa-debrief[data-style="b"] .dx-head { background: none; border-bottom: 3px double #ffe45c; }
.pa-debrief[data-style="b"] .dx-head h3 { font: italic 800 46px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 3px; text-shadow: 3px 3px 0 #a8431a; }
.pa-debrief[data-style="b"] .dx-head.tone-down h3, .pa-debrief[data-style="b"] .dx-head.tone-fuel h3 { text-shadow: 3px 3px 0 #5a1410; }
.dxk { display: grid; grid-template: "card" minmax(0, 1fr) / minmax(0, 1fr); padding: 0; overflow: hidden; }
.dxk-card { grid-area: card; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 10px 20px 8px; visibility: hidden; cursor: pointer; scrollbar-width: thin; scrollbar-color: #2a3150 transparent; }
.dxk-card.on { visibility: visible; }
.dxk-card[data-card="skills"] { cursor: default; }
.dxk-in { margin-block: auto; }                /* (centred while it fits, from the top when it scrolls) */
.dxb label { flex: none; font: 800 15px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #6fd3ff; }
.dxb-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 70px; align-items: center; gap: 10px; min-height: 54px; padding: 6px 0; border-bottom: 2px dotted #2a3150; }
.dxb-row:last-child { border-bottom: 0; }
.dxb-row.thin { min-height: 44px; padding: 4px 0; }
.dxb-row .mid { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.dxb-row .mid small { font-size: 13px; line-height: 1.25; color: #8b93b0; }
.dxb-row.army { padding-bottom: 10px; }
.dxb-row canvas { display: block; grid-column: 1 / -1; width: 100%; margin-top: 6px; }
.dxb-row .n { font: 700 16px/1 "Barlow Condensed", Barlow, sans-serif; color: #c9c6bb; text-align: right; white-space: nowrap; }
.dxb-row .n b { font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.dxb-row .n.won { font-size: 22px; letter-spacing: 2px; color: #ffe45c; }
.dxb-row em { font: 800 30px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #ffe45c; text-align: right; font-variant-numeric: tabular-nums; }
.dxb-row em:not(:empty)::before { content: "+"; font-size: 18px; color: #8a7a35; margin-right: 1px; }
.dxb-row em[data-n="0"] { color: #4a5480; }       /* (a row that paid nothing: said, not shouted) */
.dxb-row em[data-n="0"]::before { color: #4a5480; }
.dxb .chev i { font: 800 30px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #232a48; margin-right: 1px; }
.dxb .chev i.on { color: #8ff0a0; text-shadow: 0 0 10px rgba(143, 240, 160, .6); }
.dxb .plane { height: 46px; width: auto; }
.dxb .plane.lost { filter: grayscale(1) brightness(.6); transform: rotate(16deg); }
.dxb .boss { height: 50px; width: auto; }
.dxb .boss.down { filter: grayscale(.85) brightness(.7); transform: rotate(-4deg); }
.dxb .hp { flex: 1; height: 12px; background: #2a1414; }
.dxb .hp u { display: block; height: 100%; background: #e2362f; }
.dx-tally { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 3px; }
.dx-tally i { font-style: normal; font-size: 12px; color: #8b93b0; }
.dx-crate { display: inline-flex; align-items: center; gap: 3px; }
.dxb .pips { display: inline-flex; gap: 2px; }
.dxb .pips i { width: 10px; height: 16px; background: #3a1d1d; }
.dxb .pips i.on { background: #e2362f; }
.dxb .tank { display: block; flex: none; width: 166px; height: 16px; background: #2a2414; -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); }
.dxb .tank u { display: block; height: 100%; background: #ffb23e; }
.dxk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 10px; }
.dxk-sum { font-size: 13px; color: #a7aab4; }
.dxk-sum b { font: 800 24px/1 "Barlow Condensed", Barlow, sans-serif; color: #8ff0a0; margin-right: 4px; }
.dxk-sum u { text-decoration: none; margin-left: 10px; font: 800 12px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1px; text-transform: uppercase; background: #ffe45c; color: #14161c; padding: 3px 7px 2px; border-radius: 3px; }
.dxk-sum .wait { font-style: normal; animation: dx-wait 1.1s ease-in-out infinite; }
/* the skills: a column, or two read down (the climbers lead) */
.dxb .dx-sks.cols { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; gap: 4px 30px; }
.dxb .dx-sk { padding: 4px 0; }
.dxb .dx-skt { font-size: 14px; }
/* the bars in blocks, as the HUD's own hull is */
.dxb .dx-bar { height: 12px; border-radius: 0; background: #1a2140; box-shadow: none; -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); }
.dxb .dx-bar .was { background: #3f8f5a; }
.dxb .dx-bar .gain, .dxb .dx-sk.up .dx-bar .gain { box-shadow: none; }
.dxb .dx-lv { color: #6fd3ff; }
.dxb .dx-sk.up .dx-lv { color: #ffe45c; }
/* the purse, under the cards: the coins as far as the cards have counted them */
.pa-debrief[data-style="b"] .dxb-total { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 20px; padding: 8px 0 9px; border-top: 2px dotted #2a3150; }
.dxb-total label { font: 800 22px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.dxb-total .dx-pile { justify-content: flex-start; min-height: 42px; }
.dxb-total em { margin-left: auto; font: 800 54px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #ffe45c; text-shadow: 3px 3px 0 #7a5a10; font-variant-numeric: tabular-nums; }
.dxb-total > i, .dxk-unit > i { align-self: flex-end; margin-bottom: 8px; font: 700 14px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: #a7aab4; }
/* (the word "coins", and under it the player's own purse counting on as the flight pays into it) */
.dxk-unit { flex: none; display: flex; flex-direction: column; align-self: flex-end; gap: 3px; margin-bottom: 6px; }
.dxk-unit > i { align-self: flex-start; margin: 0; }
.dxk-unit small { font: 600 12px/1 Barlow, sans-serif; color: #8b93b0; white-space: nowrap; }
.dxk-unit small b { font: 800 15px/1 "Barlow Condensed", Barlow, sans-serif; color: #ffe45c; font-variant-numeric: tabular-nums; }
/* the foot: what the host has to say, the cards as dots, and the buttons. Next turns the card; on the last card
   the stage's own "Next mission" (#db-next) stands in its place */
.dxk-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; }
.dxk-foot[data-last="0"] #db-next, .dxk-foot[data-last="1"] #dx-step { display: none; }
.dxk-dots { display: flex; align-items: center; gap: 7px; }
.dxk-dots button { width: 14px; height: 14px; padding: 0; border: 2px solid #4a5480; border-radius: 0; background: #12182e; cursor: pointer; }
.dxk-dots button.done { background: #8a7a35; border-color: #8a7a35; }
.dxk-dots button.on { background: #ffe45c; border-color: #ffe45c; box-shadow: 0 0 8px rgba(255, 228, 92, .55); }
.dxk-foot .dx-hint { color: #c9c6bb; }
/* a card coming out: dealt in from the right (from the left when going back) */
@keyframes dxk-deal { from { opacity: 0; transform: translateX(38px) rotate(.8deg); } }
@keyframes dxk-deal-back { from { opacity: 0; transform: translateX(-38px) rotate(-.8deg); } }
@keyframes dxk-lit { from { color: #232a48; text-shadow: none; } 60% { transform: scale(1.35); } }
.dxk.live .dxk-card.on { animation: dxk-deal .28s cubic-bezier(.2, .9, .3, 1) both; }
.dxk.live.back .dxk-card.on { animation-name: dxk-deal-back; }
.dxk-card.play .dxb-row { animation: dx-rise .32s both; animation-delay: calc(var(--i, 0) * 200ms + 140ms); }
.dxk-card.play [data-dx="skills"] .dx-sk { animation: dx-rise .3s both; animation-delay: calc(var(--i, 0) * 55ms + 150ms); }

/* ---- THE SHOW (js/attack-debrief.js, "WHAT GOT BETTER"): what a card's intro moves, each step driven by the
   script, so a sound and its sight are one moment. A thing still to come waits dimmed (.off, an unlit chevron); a
   card drawn again as it ends has no .play and none of this. */
@keyframes dxk-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dxk-fly-in { 0% { transform: translate(-170px, -16px) rotate(-8deg); opacity: 0; } 70% { transform: translate(6px, 2px) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dxk-fall { 0% { transform: translate(-150px, -20px); opacity: 0; } 60% { transform: translate(0, 0) rotate(4deg); opacity: 1; } 100% { transform: rotate(16deg) translateY(4px); opacity: 1; } }
@keyframes dxk-chip { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dxk-flare { 0% { background: rgba(255, 228, 92, .34); box-shadow: 0 0 0 2px rgba(255, 228, 92, .8), 0 0 26px rgba(255, 228, 92, .55); } 100% { background: rgba(255, 228, 92, 0); box-shadow: 0 0 0 2px rgba(255, 228, 92, 0), 0 0 26px rgba(255, 228, 92, 0); } }
.dxk-card.play .chev i.on:not(.lit) { color: #232a48; text-shadow: none; }
.dxk-card.play .chev i.on.lit { display: inline-block; animation: dxk-lit .3s both; }
.dxk-card.play .pips i.on.off { background: #3a1d1d; }
.dxk-card.play .dx-crate.off, .dxk-card.play .n.won i.off { opacity: 0; }
.dxk-card.play .dx-crate.pop, .dxk-card.play .n.won i.pop { display: inline-flex; animation: dxk-pop .32s cubic-bezier(.2, 1.4, .4, 1) both; }
.dxk-card.play .plane { animation: dxk-fly-in .65s cubic-bezier(.2, .8, .3, 1) both; animation-delay: .1s; }
.dxk-card.play .plane.lost { animation-name: dxk-fall; }
.dxk-card.play .dx-sk .dx-up:not([hidden]) { animation: dxk-chip .42s cubic-bezier(.2, 1.5, .4, 1) both; }
.dx-sk.flare { border-radius: 6px; animation: dxk-flare .8s ease-out; }
.dxk-sum u.off { opacity: 0; }
.dxk-sum u.stamp { display: inline-block; animation: dx-stamp .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.dx-lv { display: inline-block; }
/* the layer the coins fly in and the sparks burst in, over the cards */
.dx-fx { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.dx-fly { position: absolute; left: 0; top: 0; width: 18px; height: 18px; image-rendering: pixelated; will-change: transform; filter: drop-shadow(0 0 4px rgba(255, 228, 92, .55)); }
.dx-spark { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: #ffe45c; box-shadow: 0 0 8px #ffe45c; will-change: transform; }
/* a word floating up off what it is about: a row's coins over the purse, LEVEL UP off its bar */
.dx-float { position: absolute; left: 0; top: 0; font: italic 800 26px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1px; color: #ffe45c; text-shadow: 2px 2px 0 #a8431a, 0 0 14px rgba(255, 228, 92, .55); white-space: nowrap; will-change: transform, opacity; }
.dx-float.up { font-size: 30px; color: #fff3a0; }
/* NEW BEST / FIRST CLEAR, stamped beside the stars after they land */
.dx-head { position: relative; }
.dx-best { position: absolute; right: 22px; top: 12px; padding: 6px 12px 5px; font: italic 800 22px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1.5px; color: #14161c; background: #ffe45c; box-shadow: 3px 3px 0 #a8431a; transform: rotate(-6deg); white-space: nowrap; }
.dx-best[data-best="first"] { background: #8ff0a0; box-shadow: 3px 3px 0 #2f6b45; }
@keyframes dx-best { 0% { transform: rotate(-6deg) scale(3); opacity: 0; } 60% { transform: rotate(-6deg) scale(.88); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
.dx-anim .dx-best { animation: dx-best .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: .82s; }

/* ============================================================== C · level up */
.dxc-cards .dx-sks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dxc-cards .dx-card { flex: 1 1 178px; max-width: 230px; }
.dx-card { display: block; position: relative; background: linear-gradient(180deg, #242834, #1a1d26); border: 1px solid #343945; border-radius: 12px; padding: 9px 11px 8px; }
.dx-card .top { display: flex; align-items: center; gap: 7px; }
.dx-card .top b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.1; }
.dx-card .dx-ico { font-size: 23px; }
.dx-card .badge { flex: none; display: grid; place-items: center; width: 28px; height: 30px; font: 800 16px/1 "Barlow Condensed", Barlow, sans-serif; color: #14161c; background: #c9a94a; clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); }
.dx-card .lvl { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 14px; }
.dx-card .dx-lv { font-size: 12.5px; }
.dx-card .dx-bar { height: 10px; margin-top: 5px; }
.dx-card .bot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 6px; }
.dx-card .dx-plus { margin: 0; font-size: 22px; }
.dx-card small { font-size: 11px; color: #8b8f9a; font-variant-numeric: tabular-nums; }
.dx-card.up { border-color: #ffe45c; background: linear-gradient(180deg, #3d3414, #1f1c12); box-shadow: 0 0 0 1px #ffe45c, 0 0 28px rgba(255, 228, 92, .28); }
.dx-card.up .badge { background: #ffe45c; }
.dx-card.up .dx-plus { color: #ffe45c; }
.dx-card.same .dx-plus { font: 500 11.5px/1 Barlow, sans-serif; color: #8b8f9a; }
.dx-card.flash { animation: dx-pop .3s ease-out; }
.dxc .dx-payline { justify-content: center; margin-top: 11px; }
.dxc .dx-payline small { text-align: center; }

/* ============================================================ D · the flight map */
.dxd { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
.dxd-map { padding-right: 18px; min-width: 0; }
.dxd-side { padding-left: 18px; border-left: 1px solid #2a2e38; min-width: 0; }
.dxd-track { position: relative; height: 34px; }
.dxd-plane { position: absolute; left: var(--end); bottom: 1px; height: 30px; width: auto; transform: translateX(-100%); }
.dxd-plane.lost { transform: translateX(-55%) rotate(24deg); filter: grayscale(.8) brightness(.75); }
.dxd-strip { display: flex; gap: 6px; height: 46px; }
.dxd-strip .g { display: flex; gap: 2px; min-width: 0; padding-bottom: 5px; border-bottom: 2px solid #343945; }
.dxd-strip .c { flex: 1 1 0; min-width: 0; }
.dxd-strip .c, .dxd-key .c { position: relative; display: block; border-radius: 3px; font-style: normal; }
.c.early { background: #8ff0a0; }
.c.clean { background: #3f9e62; }
.c.hit { background: #e2362f; }
.c.rest { background: none; box-shadow: inset 0 0 0 1px #343945; }
.c.unflown, .c.part { background: repeating-linear-gradient(-45deg, #2a2e38 0 4px, #191c24 4px 8px); }
.c.dyn { box-shadow: inset 0 5px 0 #ff5a4a; }
.c b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); font: 800 15px/.55 Barlow, sans-serif; color: #fff; text-align: center; overflow-wrap: anywhere; }
.c.veil { background: #191c24 !important; box-shadow: inset 0 0 0 1px #2a2e38 !important; }
.c.veil b { opacity: 0; }
.c.lit { outline: 2px solid #ffe45c; outline-offset: 1px; z-index: 1; }
.dxd-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 12px; font-size: 11px; color: #a7aab4; }
.dxd-key span { display: inline-flex; align-items: center; gap: 5px; }
.dxd-key .c { width: 14px; height: 14px; }
.dxd-key .c b { font-size: 11px; }
.dx-chips.mini.dxd-stats { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #2a2e38; }
.dxd-side .dx-payline { margin-bottom: 10px; }
.dxd-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.dx-part { display: inline-flex; align-items: center; gap: 7px; background: #1b1e26; border: 1px solid #2a2e38; border-left: 3px solid #3f9e62; border-radius: 6px; padding: 4px 8px 4px 7px; font-size: 12.5px; cursor: default; }
.dx-part b { font-weight: 600; color: #ecebe4; }
.dx-part.hit { border-left-color: #e2362f; }
.dx-part.meh { border-left-color: #555b6b; }
.dx-part.weak b::after { content: " · weak spot"; font-weight: 500; color: #ff9b8f; }
.dx-part.lit { border-color: #ffe45c; background: #2a2416; }
.dx-part .rungs { display: inline-flex; gap: 2px; }
.dx-part .rungs i { width: 8px; height: 8px; border-radius: 50%; background: #2a2e38; }
.dx-part .rungs i.on { background: #6f9a66; }
.dx-part .rungs i.new { background: #ffe45c; box-shadow: 0 0 6px rgba(255, 228, 92, .8); }
.dx-part em { font: 700 13.5px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #8ff0a0; }
.dx-part em.bad { color: #ff9b8f; }

/* ============================================================ E · the skill wheel */
.dxe { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 0 22px; align-items: center; }
.dx-wheel { display: block; width: 100%; height: auto; max-height: 430px; overflow: visible; }
.dx-wheel .slot { fill: #171a22; }
.dx-wheel .was { fill: #5f8a5a; }
.dx-wheel .gain { fill: #8ff0a0; filter: drop-shadow(0 0 5px rgba(143, 240, 160, .55)); }
.dx-wheel .gain.up { fill: #ffe45c; filter: drop-shadow(0 0 6px rgba(255, 228, 92, .6)); }
.dx-wheel .ring { fill: none; stroke: #0f1117; stroke-width: 1.4; }
.dx-wheel .lvl { font: 700 8.5px Barlow, sans-serif; fill: #8b8f9a; text-anchor: middle; paint-order: stroke; stroke: #0f1117; stroke-width: 3px; }
.dx-wheel .hub { fill: #0f1117; stroke: #2a2e38; }
.dx-wheel .sum { font: 800 17px "Barlow Condensed", Barlow, sans-serif; fill: #8ff0a0; text-anchor: middle; }
.dx-wheel .sumcap { font: 600 6.5px Barlow, sans-serif; fill: #8b8f9a; text-anchor: middle; text-transform: uppercase; letter-spacing: .5px; }
.dx-wheel .ico { font-size: 16px; text-anchor: middle; dominant-baseline: middle; opacity: .38; }
.dx-wheel .lab.fed .ico { font-size: 19px; opacity: 1; }
.dx-wheel .plus { font: 800 12px "Barlow Condensed", Barlow, sans-serif; fill: #8ff0a0; text-anchor: middle; }
.dx-wheel .lab.up .plus { fill: #ffe45c; }
.dxe-wheel .cap { margin: 2px 0 0; font-size: 11px; color: #8b8f9a; text-align: center; }
.dxe-rings { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.dxe-ring { position: relative; width: 84px; text-align: center; }
.dxe-ring svg { width: 70px; margin: 0 auto; }
.dxe-ring > b { position: absolute; left: 0; right: 0; top: 25px; font: 800 18px/1 "Barlow Condensed", Barlow, sans-serif; color: #fff; }
.dxe-ring > b i { font: 700 10.5px/1 "Barlow Condensed", Barlow, sans-serif; font-style: normal; color: #8b8f9a; }
.dxe-ring span { display: block; margin-top: 1px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: #a7aab4; }
.dxe .dx-sks { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dxe .dx-lv { display: none; }                 /* the wheel says the level */
/* two columns of bars: a level climbed is a gold arrow, the words would push the name out */
.dxe .dx-up { font-size: 0; padding: 1px 4px 2px; }
.dxe .dx-up::after { content: "▲"; font-size: 8px; }

/* ------------------------------------------------------------- the intro, played by .dx-anim */
@keyframes dx-stamp { 0% { transform: scale(2.6) rotate(-25deg); opacity: 0; } 60% { transform: scale(.86) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dx-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dx-sweep { from { stroke-dashoffset: var(--c); } }
@keyframes dx-grow { from { transform: scaleX(0); } }
@keyframes dx-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 228, 92, .95); } 100% { box-shadow: 0 0 0 10px rgba(255, 228, 92, 0); } }
@keyframes dx-pop { 50% { transform: scale(1.06); } }
@keyframes dx-wait { 50% { opacity: .45; } }
.dx-anim .dx-stars i.on { animation: dx-stamp .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 170ms + 60ms); }
.dx-anim .dx-title { animation: dx-rise .35s both; }
.dx-anim .dx-tile, .dx-anim .dx-chip, .dx-anim .dxe-ring, .dx-anim .dxb-total { animation: dx-rise .35s both; animation-delay: calc(var(--i, 0) * 240ms + 150ms); }
.dx-anim .dx-tile:nth-child(1), .dx-anim .dx-chip:nth-child(1) { --i: .2; } .dx-anim .dx-tile:nth-child(2), .dx-anim .dx-chip:nth-child(2) { --i: .5; }
.dx-anim .dx-tile:nth-child(3), .dx-anim .dx-chip:nth-child(3) { --i: .8; } .dx-anim .dx-tile:nth-child(4), .dx-anim .dx-chip:nth-child(4) { --i: 1.1; }
.dx-anim .dx-tile:nth-child(5), .dx-anim .dx-chip:nth-child(5) { --i: 1.4; } .dx-anim .dx-tile:nth-child(6), .dx-anim .dx-chip:nth-child(6) { --i: 1.7; }
.dx-anim .dx-tile:nth-child(7), .dx-anim .dx-chip:nth-child(7) { --i: 2; }
.dx-anim .dx-ring .fg { animation: dx-sweep 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .25s; }
.dx-anim .dx-stack i { transform-origin: left center; animation: dx-grow .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .55s; }
/* (the deck's rows and bars rise with their own card, by .play, not with the panel) */
.dx-anim:not([data-style="b"]) [data-dx="skills"] .dx-sk, .dx-in .dx-sk, .dx-anim .dx-part, .dx-in .dx-part { animation: dx-rise .3s both; animation-delay: calc(var(--i, 0) * 55ms + 250ms); }
.dx-anim [data-dx="skills"] .dx-sk.wait, .dx-in .dx-sk.wait, .dxk-card.play [data-dx="skills"] .dx-sk.wait { animation: none; }
@media (prefers-reduced-motion: reduce) { .dx-anim *, .dx-in *, .dxk-card, .dxk-card * { animation: none !important; } }

/* ------------------------------------------------------- a narrower stage: fold, and scroll inside */
/* a laptop's stage: the same columns, a little tighter */
@container dx (max-width: 960px) {
  .dxa .dx-up, .dxd .dx-up { font-size: 0; padding: 1px 4px 2px; }
  .dxa .dx-up::after, .dxd .dx-up::after { content: "▲"; font-size: 8px; }
  .dxc-cards .dx-card { flex-basis: 158px; }
  .dxc .dx-chips { gap: 4px; margin-bottom: 9px; }
  .dxc .dx-chip { padding: 3px 8px 3px 6px; }
  .dxc .dx-chip b { font-size: 15px; }
  .dxc .dx-chip > i { font-size: 10px; }
  .dx-wheel { max-height: 372px; }
}
@container dx (max-width: 820px) {
  .dxa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .dxa-flight { grid-row: 1; }
  .dxa > section.dxa-pay { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid #2a2e38; margin-top: 10px; padding: 10px 14px 0 2px; }
  .dxa-skills { grid-column: 2; grid-row: 1 / 3; }
  .dxd, .dxe { grid-template-columns: 1fr; }
  .dxd-map { padding-right: 0; }
  .dxd-side { padding: 10px 0 0; margin-top: 10px; border-left: 0; border-top: 1px solid #2a2e38; }
  .dx-wheel { max-height: 300px; }
}
@container dx (max-width: 620px) {
  .dx-body { padding: 10px 10px; }
  .dx-head { gap: 10px; padding: 8px 10px; }
  .pa-debrief[data-style] .dx-head h3, .pa-debrief[data-style="b"] .dx-head h3 { font-size: 25px; letter-spacing: 1px; }
  .dx-head p { font-size: 11.5px; }
  .dx-stars { font-size: 26px; letter-spacing: 0; }
  .dx-foot { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; text-align: center; }
  .dx-btns { justify-content: center; }
  .dxa { grid-template-columns: 1fr; }
  .dxa > section, .dxa > section.dxa-pay { grid-column: 1; grid-row: auto; padding: 10px 0 0; margin-top: 10px; border-left: 0; border-top: 1px solid #2a2e38; }
  .dxa > section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  /* the deck on a phone: a card is a column, the purse a line, the foot two */
  .dxk-card { padding: 8px 12px 6px; }
  .dxb-row { grid-template-columns: 62px minmax(0, 1fr) auto 48px; gap: 6px; min-height: 46px; padding: 4px 0; }
  .dxb-row em { font-size: 22px; }
  .dxb-row .n b { font-size: 19px; }
  .dxb-row .mid small { font-size: 12px; }
  .dxb label { font-size: 12px; letter-spacing: 1px; }
  .dxb .chev i { font-size: 22px; }
  .dxb .plane { height: 34px; }
  .dxb-row.thin { min-height: 38px; }
  .dxb-row .more { display: none; }
  .dxb-row .n.won { font-size: 17px; letter-spacing: 0; }
  .dxb .dx-tally { zoom: .8; }
  /* (a card taller than its room scrolls, and says so: its last lines fade) */
  .dxk-card { padding-bottom: 18px; -webkit-mask: linear-gradient(#000 calc(100% - 18px), transparent); mask: linear-gradient(#000 calc(100% - 18px), transparent); }
  .dxb .tank { width: 106px; }
  .dxb .dx-sk { padding: 2px 0; }
  .dxb .dx-skt { font-size: 13px; }
  .dxb .dx-bar { height: 9px; margin-top: 3px; }
  .dxb .dx-sks.cols { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .pa-debrief[data-style="b"] .dxb-total { margin: 0 12px; padding: 6px 0 7px; gap: 8px; }
  .dxb-total label { font-size: 15px; letter-spacing: 1px; }
  .dxb-total em { font-size: 38px; }
  .dx-best { right: 6px; top: 6px; margin: 0; padding: 4px 7px 3px; font-size: 13px; letter-spacing: 1px; box-shadow: 2px 2px 0 #a8431a; }
  .dxk-unit { margin-bottom: 4px; }
  .dxk-unit small { font-size: 10.5px; }
  /* (the pile on one line: the chests and sacks lead, and the small change fades out at the edge) */
  .dxb-total .dx-pile { flex: 1 1 0; min-width: 0; min-height: 26px; flex-wrap: nowrap; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .dxb-total .dx-coin { flex: none; height: 22px; width: auto; }
  .dxb-total em { margin-left: 0; }
  .dxk-foot kbd { display: none; }             /* (the keys they name are a desk's) */
  .dxk-foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; text-align: left; }
  .dxk-foot .dx-notes { grid-column: 1 / -1; text-align: center; }
  .dxk-foot .dx-btns { justify-content: flex-end; }
  .dxc-cards .dx-sks { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 6px; }
  .dx-hint { display: none; }                  /* (the keys it names are a desk's) */
  .dx-chips { justify-content: flex-start; gap: 4px; margin-bottom: 9px; }
  .dx-chip { padding: 3px 8px 3px 6px; }
  .dx-chip b { font-size: 15px; }
  .dx-chip > i { font-size: 10px; }
  .dx-chip .ic { font-size: 12px; }
  .dx-total b { font-size: 46px; }
}