/* ===========================================================
   STYLE: PIXEL RPG (16-bit role-playing game screen).
   Idea: MotionFly / lemo-opuscar (MIT), styles/pixel-rpg/STYLE.md.
   A limited indexed palette (Sweetie 16 plus three greens), tile maps
   that scroll by whole tiles, bevelled dialog windows, HP/MP bars.
   Text lives in blue windows; titles sit on the map with a hard shadow.
   Font: VT323 (Vietnamese subset) at larger sizes than usual.
   Actors: grass (scrolling tile map), stone (castle floor that wipes
           in), road (dirt road, the timeline axis), dialog and panel
           (bevelled windows), rule (pixel rule under the title), hud
           (HP and MP bars), slime, chest, hero (16x16 sprites that
           walk along the window edges). DOM order = z-order.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

.deck-stage {
  --actors: "grass stone road dialog panel rule hud slime chest hero";
  --font-display: 'VT323', 'Courier New', monospace; --font-body: 'VT323', 'Courier New', monospace; --font-mono: 'VT323', monospace;
  --bg: #1f5a44; --fg: #f4f4f4; --muted: #c9d6f0; --accent: #ffcd75;
  --card-bg: #29366f; --card-fg: #f4f4f4; --card-radius: 0px;
  --title-weight: 400; --title-tracking: 0.03em; --title-case: uppercase; --bullet-radius: 0px;
  --ink: #1a1c2c; --sil: #94b0c2; --dk: #1b2350;
}

/* ---------- actor looks + off-stage defaults ---------- */
[data-actor="grass"] { background-color: #1f5a44; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' shape-rendering='crispEdges'%3E%3Crect x='24' y='16' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='16' y='24' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='32' y='24' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='88' y='8' width='8' height='8' fill='%23174536' /%3E%3Crect x='80' y='16' width='8' height='8' fill='%23174536' /%3E%3Crect x='96' y='16' width='8' height='8' fill='%23174536' /%3E%3Crect x='56' y='56' width='8' height='8' fill='%23174536' /%3E%3Crect x='48' y='64' width='8' height='8' fill='%23174536' /%3E%3Crect x='64' y='64' width='8' height='8' fill='%23174536' /%3E%3Crect x='112' y='48' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='104' y='56' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='120' y='56' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='16' y='96' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='8' y='104' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='24' y='104' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='80' y='88' width='8' height='8' fill='%23174536' /%3E%3Crect x='72' y='96' width='8' height='8' fill='%23174536' /%3E%3Crect x='88' y='96' width='8' height='8' fill='%23174536' /%3E%3Crect x='120' y='112' width='8' height='8' fill='%23174536' /%3E%3Crect x='112' y='120' width='8' height='8' fill='%23174536' /%3E%3Crect x='128' y='120' width='8' height='8' fill='%23174536' /%3E%3Crect x='48' y='120' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='40' y='128' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='56' y='128' width='8' height='8' fill='%232b7a58' /%3E%3Crect x='104' y='24' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='100' y='28' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='108' y='28' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='104' y='32' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='104' y='28' width='4' height='4' fill='%23e8c36b' /%3E%3Crect x='40' y='84' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='36' y='88' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='44' y='88' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='40' y='92' width='4' height='4' fill='%238cc59a' /%3E%3Crect x='40' y='88' width='4' height='4' fill='%23e8c36b' /%3E%3C/svg%3E"); background-size: 128px 128px; --x: -128px; --y: -128px; --w: 2560px; --h: 1536px; }
[data-actor="stone"] { background-color: #3b4663; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='128' height='128' fill='%231f2438' /%3E%3Crect x='4' y='4' width='56' height='24' fill='%233b4663' /%3E%3Crect x='4' y='4' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='4' y='4' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='4' y='24' width='56' height='4' fill='%232e3752' /%3E%3Crect x='68' y='4' width='56' height='24' fill='%233b4663' /%3E%3Crect x='68' y='4' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='68' y='4' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='68' y='24' width='56' height='4' fill='%232e3752' /%3E%3Crect x='132' y='4' width='56' height='24' fill='%233b4663' /%3E%3Crect x='132' y='4' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='132' y='4' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='132' y='24' width='56' height='4' fill='%232e3752' /%3E%3Crect x='-28' y='36' width='56' height='24' fill='%233b4663' /%3E%3Crect x='-28' y='36' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='-28' y='36' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='-28' y='56' width='56' height='4' fill='%232e3752' /%3E%3Crect x='36' y='36' width='56' height='24' fill='%233b4663' /%3E%3Crect x='36' y='36' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='36' y='36' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='36' y='56' width='56' height='4' fill='%232e3752' /%3E%3Crect x='100' y='36' width='56' height='24' fill='%233b4663' /%3E%3Crect x='100' y='36' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='100' y='36' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='100' y='56' width='56' height='4' fill='%232e3752' /%3E%3Crect x='4' y='68' width='56' height='24' fill='%233b4663' /%3E%3Crect x='4' y='68' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='4' y='68' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='4' y='88' width='56' height='4' fill='%232e3752' /%3E%3Crect x='68' y='68' width='56' height='24' fill='%233b4663' /%3E%3Crect x='68' y='68' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='68' y='68' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='68' y='88' width='56' height='4' fill='%232e3752' /%3E%3Crect x='132' y='68' width='56' height='24' fill='%233b4663' /%3E%3Crect x='132' y='68' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='132' y='68' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='132' y='88' width='56' height='4' fill='%232e3752' /%3E%3Crect x='-28' y='100' width='56' height='24' fill='%233b4663' /%3E%3Crect x='-28' y='100' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='-28' y='100' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='-28' y='120' width='56' height='4' fill='%232e3752' /%3E%3Crect x='36' y='100' width='56' height='24' fill='%233b4663' /%3E%3Crect x='36' y='100' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='36' y='100' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='36' y='120' width='56' height='4' fill='%232e3752' /%3E%3Crect x='100' y='100' width='56' height='24' fill='%233b4663' /%3E%3Crect x='100' y='100' width='56' height='4' fill='%234d5b7e' /%3E%3Crect x='100' y='100' width='4' height='24' fill='%234d5b7e' /%3E%3Crect x='100' y='120' width='56' height='4' fill='%232e3752' /%3E%3Crect x='20' y='12' width='8' height='4' fill='%232e3752' /%3E%3Crect x='92' y='50' width='8' height='4' fill='%232e3752' /%3E%3Crect x='44' y='76' width='12' height='4' fill='%231f2438' /%3E%3Crect x='110' y='108' width='8' height='4' fill='%231f2438' /%3E%3C/svg%3E"); background-size: 128px 128px; box-shadow: -8px 0 0 #1a1c2c; --x: 1920px; --y: 0px; --w: 1920px; --h: 1080px; }
[data-actor="road"] { background-color: #8c5a3a; background-image: linear-gradient(#4a2c18, #4a2c18), linear-gradient(#4a2c18, #4a2c18), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='64' height='64' fill='%238c5a3a' /%3E%3Crect x='8' y='12' width='8' height='4' fill='%236b4328' /%3E%3Crect x='40' y='20' width='8' height='4' fill='%23b07c52' /%3E%3Crect x='24' y='40' width='8' height='4' fill='%236b4328' /%3E%3Crect x='52' y='50' width='8' height='4' fill='%23b07c52' /%3E%3Crect x='12' y='56' width='8' height='4' fill='%23b07c52' /%3E%3Crect x='44' y='4' width='8' height='4' fill='%236b4328' /%3E%3C/svg%3E"); background-size: 100% 6px, 100% 6px, 64px 64px;
  background-position: 0 0, 0 100%, 0 0; background-repeat: no-repeat, no-repeat, repeat; --x: 0px; --y: 1120px; --w: 1920px; --h: 64px; }
[data-actor="dialog"] { --box: #29366f; padding: 8px; background-origin: content-box; background-color: var(--ink); background-repeat: no-repeat; background-image: linear-gradient(var(--sil), var(--sil)), linear-gradient(var(--sil), var(--sil)), linear-gradient(var(--dk), var(--dk)), linear-gradient(var(--dk), var(--dk)), linear-gradient(var(--box), var(--box)); background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%, 100% 100%; background-position: 0 0, 0 0, 0 100%, 100% 0, 0 0; box-shadow: 8px 8px 0 rgba(26, 28, 44, 0.55); --x: 80px; --y: 1120px; --w: 1000px; --h: 620px; }
[data-actor="panel"] { --box: #3a2a5e; padding: 8px; background-origin: content-box; background-color: var(--ink); background-repeat: no-repeat; background-image: linear-gradient(var(--sil), var(--sil)), linear-gradient(var(--sil), var(--sil)), linear-gradient(var(--dk), var(--dk)), linear-gradient(var(--dk), var(--dk)), linear-gradient(var(--box), var(--box)); background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%, 100% 100%; background-position: 0 0, 0 0, 0 100%, 100% 0, 0 0; box-shadow: 8px 8px 0 rgba(26, 28, 44, 0.55); --x: 1240px; --y: 1120px; --w: 580px; --h: 760px; }
[data-actor="rule"] { background-image: repeating-linear-gradient(90deg, #ffcd75 0 20px, transparent 20px 28px), repeating-linear-gradient(90deg, #ef7d57 0 20px, transparent 20px 28px);
  background-size: 100% 6px, 100% 6px; background-position: 0 0, 0 6px; background-repeat: no-repeat; --x: 120px; --y: -60px; --w: 1000px; --h: 12px; }
[data-actor="hud"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 112'%3E%3Crect x='0' y='0' width='360' height='112' fill='%231a1c2c' /%3E%3Crect x='6' y='6' width='348' height='100' fill='%2329366f' /%3E%3Crect x='6' y='6' width='348' height='4' fill='%2394b0c2' /%3E%3Crect x='6' y='6' width='4' height='100' fill='%2394b0c2' /%3E%3Crect x='6' y='102' width='348' height='4' fill='%231b2350' /%3E%3Crect x='350' y='6' width='4' height='100' fill='%231b2350' /%3E%3Cg shape-rendering='crispEdges'%3E%3Crect x='26' y='22' width='8' height='4' fill='%23e0475f'/%3E%3Crect x='46' y='22' width='8' height='4' fill='%23e0475f'/%3E%3Crect x='22' y='26' width='16' height='4' fill='%23e0475f'/%3E%3Crect x='42' y='26' width='16' height='4' fill='%23e0475f'/%3E%3Crect x='22' y='30' width='36' height='4' fill='%23e0475f'/%3E%3Crect x='22' y='34' width='36' height='4' fill='%23e0475f'/%3E%3Crect x='26' y='38' width='28' height='4' fill='%23e0475f'/%3E%3Crect x='30' y='42' width='20' height='4' fill='%23e0475f'/%3E%3Crect x='34' y='46' width='12' height='4' fill='%23e0475f'/%3E%3Crect x='38' y='50' width='4' height='4' fill='%23e0475f'/%3E%3C/g%3E%3Cg shape-rendering='crispEdges'%3E%3Crect x='72' y='18' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='18' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='22' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='22' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='26' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='26' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='30' width='20' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='34' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='34' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='38' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='38' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='42' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='42' width='4' height='4' fill='%23f4f4f4'/%3E%3C/g%3E%3Cg shape-rendering='crispEdges'%3E%3Crect x='100' y='18' width='16' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='22' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='116' y='22' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='26' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='116' y='26' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='30' width='16' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='34' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='38' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='42' width='4' height='4' fill='%23f4f4f4'/%3E%3C/g%3E%3Crect x='150' y='22' width='15' height='18' fill='%2338b764' /%3E%3Crect x='150' y='22' width='15' height='4' fill='%23a7f070' /%3E%3Crect x='169' y='22' width='15' height='18' fill='%2338b764' /%3E%3Crect x='169' y='22' width='15' height='4' fill='%23a7f070' /%3E%3Crect x='188' y='22' width='15' height='18' fill='%2338b764' /%3E%3Crect x='188' y='22' width='15' height='4' fill='%23a7f070' /%3E%3Crect x='207' y='22' width='15' height='18' fill='%2338b764' /%3E%3Crect x='207' y='22' width='15' height='4' fill='%23a7f070' /%3E%3Crect x='226' y='22' width='15' height='18' fill='%2338b764' /%3E%3Crect x='226' y='22' width='15' height='4' fill='%23a7f070' /%3E%3Crect x='245' y='22' width='15' height='18' fill='%2338b764' /%3E%3Crect x='245' y='22' width='15' height='4' fill='%23a7f070' /%3E%3Crect x='264' y='22' width='15' height='18' fill='%2338b764' /%3E%3Crect x='264' y='22' width='15' height='4' fill='%23a7f070' /%3E%3Crect x='283' y='22' width='15' height='18' fill='%23333c57' /%3E%3Crect x='302' y='22' width='15' height='18' fill='%23333c57' /%3E%3Crect x='321' y='22' width='15' height='18' fill='%23333c57' /%3E%3Cg shape-rendering='crispEdges'%3E%3Crect x='72' y='64' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='64' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='68' width='8' height='4' fill='%23f4f4f4'/%3E%3Crect x='84' y='68' width='8' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='72' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='80' y='72' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='72' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='76' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='76' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='80' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='80' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='84' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='84' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='72' y='88' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='88' y='88' width='4' height='4' fill='%23f4f4f4'/%3E%3C/g%3E%3Cg shape-rendering='crispEdges'%3E%3Crect x='100' y='64' width='16' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='68' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='116' y='68' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='72' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='116' y='72' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='76' width='16' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='80' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='84' width='4' height='4' fill='%23f4f4f4'/%3E%3Crect x='100' y='88' width='4' height='4' fill='%23f4f4f4'/%3E%3C/g%3E%3Crect x='150' y='68' width='15' height='18' fill='%2341a6f6' /%3E%3Crect x='150' y='68' width='15' height='4' fill='%2373eff7' /%3E%3Crect x='169' y='68' width='15' height='18' fill='%2341a6f6' /%3E%3Crect x='169' y='68' width='15' height='4' fill='%2373eff7' /%3E%3Crect x='188' y='68' width='15' height='18' fill='%2341a6f6' /%3E%3Crect x='188' y='68' width='15' height='4' fill='%2373eff7' /%3E%3Crect x='207' y='68' width='15' height='18' fill='%2341a6f6' /%3E%3Crect x='207' y='68' width='15' height='4' fill='%2373eff7' /%3E%3Crect x='226' y='68' width='15' height='18' fill='%2341a6f6' /%3E%3Crect x='226' y='68' width='15' height='4' fill='%2373eff7' /%3E%3Crect x='245' y='68' width='15' height='18' fill='%23333c57' /%3E%3Crect x='264' y='68' width='15' height='18' fill='%23333c57' /%3E%3Crect x='283' y='68' width='15' height='18' fill='%23333c57' /%3E%3Crect x='302' y='68' width='15' height='18' fill='%23333c57' /%3E%3Crect x='321' y='68' width='15' height='18' fill='%23333c57' /%3E%3C/svg%3E") center / 100% 100% no-repeat; --x: 1480px; --y: -200px; --w: 340px; --h: 106px; }
[data-actor="slime"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='4' width='6' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%231a1c2c'/%3E%3Crect x='5' y='5' width='6' height='1' fill='%23a7f070'/%3E%3Crect x='11' y='5' width='2' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='6' width='10' height='1' fill='%23a7f070'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23a7f070'/%3E%3Crect x='4' y='7' width='2' height='1' fill='%23f4f4f4'/%3E%3Crect x='6' y='7' width='8' height='1' fill='%23a7f070'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%23a7f070'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23f4f4f4'/%3E%3Crect x='4' y='8' width='9' height='1' fill='%23a7f070'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%2338b764'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='9' width='4' height='1' fill='%23a7f070'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='7' y='9' width='4' height='1' fill='%23a7f070'/%3E%3Crect x='11' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='12' y='9' width='2' height='1' fill='%23a7f070'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='10' width='4' height='1' fill='%23a7f070'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='7' y='10' width='4' height='1' fill='%23a7f070'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='12' y='10' width='2' height='1' fill='%23a7f070'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='11' width='11' height='1' fill='%23a7f070'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%2338b764'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%23a7f070'/%3E%3Crect x='3' y='12' width='11' height='1' fill='%2338b764'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='13' width='14' height='1' fill='%231a1c2c'/%3E%3C/svg%3E") center / 100% 100% no-repeat; --x: 2000px; --y: 846px; --w: 96px; }
[data-actor="chest"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='2' y='4' width='12' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='5' width='4' height='1' fill='%238b5a2f'/%3E%3Crect x='6' y='5' width='2' height='1' fill='%23ffcd75'/%3E%3Crect x='8' y='5' width='6' height='1' fill='%238b5a2f'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='6' width='12' height='1' fill='%238b5a2f'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%238b5a2f'/%3E%3Crect x='3' y='7' width='11' height='1' fill='%23b07c52'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%238b5a2f'/%3E%3Crect x='1' y='8' width='14' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='3' y='9' width='10' height='1' fill='%238b5a2f'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='3' y='10' width='4' height='1' fill='%238b5a2f'/%3E%3Crect x='7' y='10' width='2' height='1' fill='%23ffcd75'/%3E%3Crect x='9' y='10' width='4' height='1' fill='%238b5a2f'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='3' y='11' width='4' height='1' fill='%238b5a2f'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23ffcd75'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23ffcd75'/%3E%3Crect x='10' y='11' width='3' height='1' fill='%238b5a2f'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='3' y='12' width='10' height='1' fill='%238b5a2f'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%2394b0c2'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='1' y='13' width='14' height='1' fill='%231a1c2c'/%3E%3C/svg%3E") center / 100% 100% no-repeat; --x: 2000px; --y: 846px; --w: 96px; }
[data-actor="hero"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='6' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='5' y='1' width='6' height='1' fill='%23a8572f'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='2' width='8' height='1' fill='%23a8572f'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='3' width='8' height='1' fill='%23a8572f'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='4' width='8' height='1' fill='%23f7c59f'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23f7c59f'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='6' y='5' width='4' height='1' fill='%23f7c59f'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%23f7c59f'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='6' width='3' height='1' fill='%23f7c59f'/%3E%3Crect x='7' y='6' width='2' height='1' fill='%23b13e53'/%3E%3Crect x='9' y='6' width='3' height='1' fill='%23f7c59f'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='5' y='7' width='6' height='1' fill='%23b13e53'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='8' width='10' height='1' fill='%233b5dc9'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='9' width='10' height='1' fill='%233b5dc9'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='10' width='3' height='1' fill='%233b5dc9'/%3E%3Crect x='6' y='10' width='4' height='1' fill='%23ffcd75'/%3E%3Crect x='10' y='10' width='3' height='1' fill='%233b5dc9'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='3' y='11' width='2' height='1' fill='%23f7c59f'/%3E%3Crect x='5' y='11' width='6' height='1' fill='%233b5dc9'/%3E%3Crect x='11' y='11' width='2' height='1' fill='%23f7c59f'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='12' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='5' y='12' width='6' height='1' fill='%2329366f'/%3E%3Crect x='11' y='12' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='13' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='5' y='13' width='2' height='1' fill='%2329366f'/%3E%3Crect x='7' y='13' width='2' height='1' fill='%231a1c2c'/%3E%3Crect x='9' y='13' width='2' height='1' fill='%2329366f'/%3E%3Crect x='11' y='13' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='14' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='5' y='14' width='2' height='1' fill='%235d3a1f'/%3E%3Crect x='7' y='14' width='2' height='1' fill='%231a1c2c'/%3E%3Crect x='9' y='14' width='2' height='1' fill='%235d3a1f'/%3E%3Crect x='11' y='14' width='1' height='1' fill='%231a1c2c'/%3E%3Crect x='4' y='15' width='8' height='1' fill='%231a1c2c'/%3E%3C/svg%3E") center / 100% 100% no-repeat; --x: 2000px; --y: 846px; --w: 96px; }

/* ---------- poses: the map scrolls by whole tiles, windows and sprites move ---------- */
[data-layout="cover"] [data-actor="grass"] { --x: -128px; --y: -128px; --w: 2560px; --h: 1536px; }
[data-layout="cover"] [data-actor="stone"] { --x: 1920px; --y: 0px; --w: 1920px; --h: 1080px; }
[data-layout="cover"] [data-actor="road"] { --x: 0px; --y: 912px; --w: 1920px; --h: 64px; }
[data-layout="cover"] [data-actor="dialog"] { --x: 80px; --y: 230px; --w: 1000px; --h: 620px; }
[data-layout="cover"] [data-actor="slime"] { --x: 560px; --y: 858px; --w: 96px; }
[data-layout="cover"] [data-actor="chest"] { --x: 1000px; --y: 858px; --w: 96px; }
[data-layout="cover"] [data-actor="hero"] { --x: 150px; --y: 858px; --w: 96px; }

[data-layout="agenda"] [data-actor="grass"] { --x: -256px; --y: -256px; --w: 2560px; --h: 1536px; }
[data-layout="agenda"] [data-actor="stone"] { --x: 0px; --y: 0px; --w: 1920px; --h: 1080px; }
[data-layout="agenda"] [data-actor="dialog"] { --x: 80px; --y: 240px; --w: 1760px; --h: 780px; }
[data-layout="agenda"] [data-actor="rule"] { --x: 120px; --y: 196px; --w: 1000px; --h: 12px; }
[data-layout="agenda"] [data-actor="hud"] { --x: 1480px; --y: 62px; --w: 340px; --h: 106px; }
[data-layout="agenda"] [data-actor="slime"] { --x: 1580px; --y: 176px; --w: 64px; }
[data-layout="agenda"] [data-actor="chest"] { --x: 1740px; --y: 176px; --w: 64px; }
[data-layout="agenda"] [data-actor="hero"] { --x: 1660px; --y: 176px; --w: 64px; }

[data-layout="section"] [data-actor="grass"] { --x: -384px; --y: -128px; --w: 2560px; --h: 1536px; }
[data-layout="section"] [data-actor="stone"] { --x: 1100px; --y: 0px; --w: 820px; --h: 1080px; }
[data-layout="section"] [data-actor="dialog"] { --x: 100px; --y: 250px; --w: 960px; --h: 580px; }
[data-layout="section"] [data-actor="slime"] { --x: 1420px; --y: 650px; --w: 128px; }
[data-layout="section"] [data-actor="chest"] { --x: 1610px; --y: 650px; --w: 128px; }
[data-layout="section"] [data-actor="hero"] { --x: 1230px; --y: 650px; --w: 128px; }

[data-layout="content"][data-parity="even"] [data-actor="grass"] { --x: -512px; --y: -256px; --w: 2560px; --h: 1536px; }
[data-layout="content"][data-parity="even"] [data-actor="stone"] { --x: 0px; --y: 0px; --w: 1240px; --h: 1080px; }
[data-layout="content"][data-parity="even"] [data-actor="dialog"] { --x: 80px; --y: 250px; --w: 1120px; --h: 760px; }
[data-layout="content"][data-parity="even"] [data-actor="panel"] { --x: 1240px; --y: 250px; --w: 580px; --h: 760px; }
[data-layout="content"][data-parity="even"] [data-actor="rule"] { --x: 120px; --y: 196px; --w: 860px; --h: 12px; }
[data-layout="content"][data-parity="even"] [data-actor="hud"] { --x: 1480px; --y: 62px; --w: 340px; --h: 106px; }
[data-layout="content"][data-parity="even"] [data-actor="slime"] { --x: 2000px; --y: 186px; --w: 64px; }
[data-layout="content"][data-parity="even"] [data-actor="chest"] { --x: 1110px; --y: 186px; --w: 64px; }
[data-layout="content"][data-parity="even"] [data-actor="hero"] { --x: 1020px; --y: 186px; --w: 64px; }

[data-layout="content"] [data-actor="grass"] { --x: -384px; --y: -128px; --w: 2560px; --h: 1536px; }
[data-layout="content"] [data-actor="stone"] { --x: 1920px; --y: 0px; --w: 1920px; --h: 1080px; }
[data-layout="content"] [data-actor="dialog"] { --x: 80px; --y: 250px; --w: 1120px; --h: 760px; }
[data-layout="content"] [data-actor="panel"] { --x: 1240px; --y: 250px; --w: 580px; --h: 760px; }
[data-layout="content"] [data-actor="rule"] { --x: 120px; --y: 196px; --w: 860px; --h: 12px; }
[data-layout="content"] [data-actor="hud"] { --x: 1480px; --y: 62px; --w: 340px; --h: 106px; }
[data-layout="content"] [data-actor="slime"] { --x: 990px; --y: 186px; --w: 64px; }
[data-layout="content"] [data-actor="chest"] { --x: 1130px; --y: 186px; --w: 64px; }
[data-layout="content"] [data-actor="hero"] { --x: 1060px; --y: 186px; --w: 64px; }

[data-layout="two-col"] [data-actor="grass"] { --x: -256px; --y: -256px; --w: 2560px; --h: 1536px; }
[data-layout="two-col"] [data-actor="stone"] { --x: 0px; --y: 0px; --w: 1920px; --h: 1080px; }
[data-layout="two-col"] [data-actor="dialog"] { --x: 110px; --y: 866px; --w: 1700px; --h: 140px; }
[data-layout="two-col"] [data-actor="rule"] { --x: 120px; --y: 196px; --w: 780px; --h: 12px; }
[data-layout="two-col"] [data-actor="hud"] { --x: 1480px; --y: 62px; --w: 340px; --h: 106px; }
[data-layout="two-col"] [data-actor="slime"] { --x: 1420px; --y: 206px; --w: 64px; }
[data-layout="two-col"] [data-actor="chest"] { --x: 1580px; --y: 206px; --w: 64px; }
[data-layout="two-col"] [data-actor="hero"] { --x: 1500px; --y: 206px; --w: 64px; }

[data-layout="stats"] [data-actor="grass"] { --x: -128px; --y: -128px; --w: 2560px; --h: 1536px; }
[data-layout="stats"] [data-actor="stone"] { --x: 0px; --y: 1080px; --w: 1920px; --h: 1080px; }
[data-layout="stats"] [data-actor="dialog"] { --x: 80px; --y: 250px; --w: 1760px; --h: 760px; }
[data-layout="stats"] [data-actor="rule"] { --x: 120px; --y: 196px; --w: 1000px; --h: 12px; }
[data-layout="stats"] [data-actor="hud"] { --x: 1480px; --y: 62px; --w: 340px; --h: 106px; }
[data-layout="stats"] [data-actor="slime"] { --x: 260px; --y: 186px; --w: 64px; }
[data-layout="stats"] [data-actor="chest"] { --x: 360px; --y: 186px; --w: 64px; }
[data-layout="stats"] [data-actor="hero"] { --x: 160px; --y: 186px; --w: 64px; }

[data-layout="timeline"] [data-actor="grass"] { --x: -256px; --y: -256px; --w: 2560px; --h: 1536px; }
[data-layout="timeline"] [data-actor="stone"] { --x: 1920px; --y: 0px; --w: 1920px; --h: 1080px; }
[data-layout="timeline"] [data-actor="road"] { --x: 120px; --y: 598px; --w: 1680px; --h: 64px; }
[data-layout="timeline"] [data-actor="rule"] { --x: 120px; --y: 196px; --w: 880px; --h: 12px; }
[data-layout="timeline"] [data-actor="hud"] { --x: 1480px; --y: 62px; --w: 340px; --h: 106px; }
[data-layout="timeline"] [data-actor="hero"] { --x: 14px; --y: 556px; --w: 96px; }

[data-layout="quote"] [data-actor="grass"] { --x: -384px; --y: -128px; --w: 2560px; --h: 1536px; }
[data-layout="quote"] [data-actor="stone"] { --x: 0px; --y: 0px; --w: 1920px; --h: 1080px; }
[data-layout="quote"] [data-actor="dialog"] { --x: 200px; --y: 250px; --w: 1520px; --h: 580px; }
[data-layout="quote"] [data-actor="slime"] { --x: 1640px; --y: 186px; --w: 64px; }
[data-layout="quote"] [data-actor="chest"] { --x: 1720px; --y: 186px; --w: 64px; }
[data-layout="quote"] [data-actor="hero"] { --x: 1560px; --y: 186px; --w: 64px; }

[data-layout="closing"] [data-actor="grass"] { --x: -128px; --y: -128px; --w: 2560px; --h: 1536px; }
[data-layout="closing"] [data-actor="stone"] { --x: 0px; --y: -1080px; --w: 1920px; --h: 1080px; }
[data-layout="closing"] [data-actor="road"] { --x: 0px; --y: 900px; --w: 1920px; --h: 64px; }
[data-layout="closing"] [data-actor="dialog"] { --x: 360px; --y: 340px; --w: 1200px; --h: 400px; }
[data-layout="closing"] [data-actor="hud"] { --x: 790px; --y: 166px; --w: 340px; --h: 106px; }
[data-layout="closing"] [data-actor="chest"] { --x: 1030px; --y: 806px; --w: 128px; }
[data-layout="closing"] [data-actor="hero"] { --x: 760px; --y: 806px; --w: 128px; }

/* ---------- content tweaks: VT323 is small, so every size is raised ---------- */
.slide { font-size: 44px; }
b, strong { font-weight: 400; color: var(--accent); }
.slide .title { text-shadow: 4px 4px 0 var(--ink); line-height: 1.15; }
.slide > .title:first-child { font-size: 84px; }
.slide .kicker { font-size: 40px; font-weight: 400; letter-spacing: 0.22em; color: var(--accent); }
.slide .subtitle { font-size: 42px; }
.slide .meta { font-size: 34px; }
.slide[data-layout="cover"] { align-items: flex-start; text-align: left; padding: 0 880px 0 120px; }
.slide[data-layout="cover"] .title { font-size: 104px; line-height: 1.1; }
.slide[data-layout="closing"] .title { font-size: 168px; }
.slide[data-layout="section"] .num { font-size: 260px; color: var(--accent); text-shadow: 6px 6px 0 var(--ink); }
.slide[data-layout="section"] .title { font-size: 100px; }
.agenda-list { --agenda-gap: 140px; }
.agenda-list .num, .slide[data-layout="section"] .num { letter-spacing: -0.05em; }
.agenda-list li.is-right { flex-direction: row; text-align: left; }
.agenda-list li.is-right .num { text-align: left; }
[data-density="lg"] .agenda-list { --n-num: 150px; --n-h: 66px; --n-p: 42px; }
[data-density="md"] .agenda-list { --n-num: 110px; --n-h: 54px; --n-p: 36px; }
[data-density="lg"] .bullets { --b-fs: 62px; --b-gap: 48px; }
[data-density="md"] .bullets { --b-fs: 54px; --b-gap: 36px; }
[data-density="sm"] .bullets { --b-fs: 46px; --b-gap: 22px; }
.bullets li::before, .col li::before { background: var(--accent); box-shadow: 3px 3px 0 var(--ink); }
.hl-big { font-size: 200px; text-shadow: 6px 6px 0 var(--ink); }
.hl-text { font-size: 52px; font-weight: 400; }
[data-density="lg"] .cols { --c-h: 76px; --c-fs: 52px; }
[data-density="md"] .cols { --c-h: 68px; --c-fs: 46px; }
[data-density="sm"] .cols { --c-h: 58px; --c-fs: 40px; }
.col { border: 6px solid var(--ink); outline: 4px solid var(--sil); outline-offset: -10px; box-shadow: 8px 8px 0 rgba(26, 28, 44, 0.55); }
.col + .col { background: #3a2a5e; }
.takeaway { border-left: 0; padding-left: 64px; font-size: 52px; font-weight: 400; }
[data-density="lg"] .stats { --s-num: 250px; --s-fs: 48px; }
[data-density="md"] .stats { --s-num: 180px; --s-fs: 42px; }
.stat-num { color: var(--accent); text-shadow: 6px 6px 0 var(--ink); }
.timeline::before { display: none; }
.step::before { display: none; }
[data-density="lg"] .timeline { --t-when: 96px; --t-h: 64px; --t-fs: 42px; }
[data-density="md"] .timeline { --t-when: 84px; --t-h: 58px; --t-fs: 38px; }
.step .when { text-shadow: 4px 4px 0 var(--ink); }
.step p, .step h3 { text-shadow: 3px 3px 0 var(--ink); }
.slide[data-layout="quote"] .quote { font-size: 76px; font-weight: 400; line-height: 1.2; }
.slide[data-layout="quote"] .cite { font-size: 40px; color: var(--accent); letter-spacing: 0.06em; }