/* ===== C: a Pokémon Ruby wild battle on a Game Boy Advance SP (Flame red) =====
   The battle screen (.gba) is built at the GBA's own 240x160 with the game's measured positions and colours,
   then scaled to the SP's screen by look-c.js. The SP is drawn from measured proportions: --w is its width,
   kept small enough on short screens that the whole screen half fits. */
@font-face{font-family:"GBA Small";src:url("../assets/fonts/gba-small.woff2") format("woff2"),url("../assets/fonts/gba-small.ttf") format("truetype");font-display:block}

.look-c{--w:min(calc(100vw - 24px),480px);--w:min(calc(100vw - 24px),480px,calc((100svh - 70px) / .95));
  --red:#D32528;--red-hi:#FE6757;--red-lo:#8F161C;--red-deep:#710F14;--grey:#5B5F5E;
  min-height:100vh;overflow-x:hidden;padding:76px 12px 44px;color:#F4ECEC;font-family:Rubik,sans-serif;touch-action:manipulation;
  background:radial-gradient(120% 60% at 50% 0%,#3A2440 0%,#1E1424 70%)}
.c-hint{margin:0 0 12px;text-align:center;font:32px/1 "GBA",monospace;color:#E8DCEC;text-shadow:2px 0 #5A3A64,0 2px #5A3A64,2px 2px #5A3A64}
.c-below{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;font:32px/1 "GBA",monospace;color:#E8DCEC;text-shadow:2px 0 #5A3A64,0 2px #5A3A64,2px 2px #5A3A64}
.c-below i{width:16px;height:32px;background:url("../assets/gen3/battle/arrow-frames.png") 0 0/16px 128px no-repeat;image-rendering:pixelated;animation:c-down .4s steps(1) infinite}
@keyframes c-down{0%{background-position:0 0}25%{background-position:0 -32px}50%{background-position:0 -64px}75%{background-position:0 -96px}}

/* ---------- the SP ---------- */
.sp{position:relative;width:var(--w);margin:0 auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.5))}
.sp-lid,.sp-base{position:relative;width:100%}
.sp-lid{height:calc(var(--w) * .903);border-radius:calc(var(--w) * .074) calc(var(--w) * .074) calc(var(--w) * .05) calc(var(--w) * .05);
  background:linear-gradient(170deg,var(--red-hi) 0%,#FB4038 8%,var(--red) 30%,#C01E24 75%,#AB1A20 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.18)}
.sp-bump{position:absolute;left:calc(var(--w) * var(--x));top:calc(var(--w) * var(--y));width:calc(var(--w) * .061);height:calc(var(--w) * .061);
  transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#E8D9BE,#BFAE8E 70%);box-shadow:0 1px 1px rgba(0,0,0,.3)}
.sp-lens{position:absolute;left:calc(var(--w) * .069);top:calc(var(--w) * .104);width:calc(var(--w) * .862);height:calc(var(--w) * .671);
  border-radius:calc(var(--w) * .022);background:#060C0E;box-shadow:inset 0 0 0 1px #1C2426,0 0 0 1px rgba(0,0,0,.35)}
.sp-screen{position:absolute;left:calc(var(--w) * .046);top:calc(var(--w) * .046);width:calc(var(--w) * .770);aspect-ratio:3/2;overflow:hidden;background:#000}
.sp-print{position:absolute;left:0;right:0;top:calc(var(--w) * .596);margin:0;text-align:center;
  font:italic 700 calc(var(--w) * .036)/1 Rubik,sans-serif;letter-spacing:.08em;color:#DBDBDB}
.sp-hinge{position:relative;height:calc(var(--w) * .15);margin:calc(var(--w) * -.01) 0;border-radius:calc(var(--w) * .075);z-index:1;
  background:linear-gradient(#580B17 0%,#A91A1C 18%,#E0353A 38%,#C01E24 58%,#8F161C 82%,#580B17 100%)}
.sp-hinge i{position:absolute;top:8%;bottom:8%;left:calc(var(--w) * var(--x));width:2px;background:var(--red-deep);opacity:.75}
.sp-base{height:calc(var(--w) * .886);border-radius:0 0 calc(var(--w) * .05) calc(var(--w) * .05);
  background:linear-gradient(175deg,#EB2D2C 0%,var(--red) 22%,#C01E24 70%,#9F181E 100%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.sp-base > *{position:absolute}
.sp-lamp{right:0;width:calc(var(--w) * .029);height:calc(var(--w) * .028);border-radius:2px 0 0 2px}
.sp-lamp.power{top:calc(var(--w) * .09);background:#5DAB23;box-shadow:0 0 calc(var(--w) * .02) #8BE04A}
.sp-lamp.charge{top:calc(var(--w) * .157);background:#6D6D6F}
.sp-light{left:calc(var(--w) * .5);top:calc(var(--w) * .127);width:calc(var(--w) * .083);height:calc(var(--w) * .083);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#5F605E 0 calc(var(--w) * .0235),#9F181E calc(var(--w) * .0245) 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.sp-dpad{left:calc(var(--w) * .246);top:calc(var(--w) * .345);width:calc(var(--w) * .343);height:calc(var(--w) * .343);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#9F181E,#B81D23 70%);box-shadow:inset 0 3px 5px rgba(0,0,0,.35)}
.sp-cross{position:absolute;left:50%;top:50%;width:calc(var(--w) * .225);height:calc(var(--w) * .225);transform:translate(-50%,-50%);
  background:linear-gradient(var(--grey),var(--grey)) center/calc(var(--w) * .072) 100% no-repeat,linear-gradient(var(--grey),var(--grey)) center/100% calc(var(--w) * .072) no-repeat;
  filter:drop-shadow(0 2px 0 #34393A)}
.sp-cross::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--w) * .03);height:calc(var(--w) * .03);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#B1B5B4,#6D7271)}
/* the four D-pad arms are big invisible buttons over the drawn cross */
.sp-dpad button{position:absolute;width:calc(var(--w) * .12);height:calc(var(--w) * .12);padding:0;background:transparent;border:0;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-dpad .u{left:50%;top:calc(var(--w) * .01);transform:translateX(-50%)}
.sp-dpad .d{left:50%;bottom:calc(var(--w) * .01);transform:translateX(-50%)}
.sp-dpad .l{top:50%;left:calc(var(--w) * .01);transform:translateY(-50%)}
.sp-dpad .r{top:50%;right:calc(var(--w) * .01);transform:translateY(-50%)}
.sp-dpad button:active{background:rgba(0,0,0,.15)}
.sp-abwell{left:calc(var(--w) * .746);top:calc(var(--w) * .337);width:calc(var(--w) * .353);height:calc(var(--w) * .187);transform:translate(-50%,-50%) rotate(-16.3deg);
  border-radius:calc(var(--w) * .094);background:linear-gradient(#9F181E,#B81D23);box-shadow:inset 0 3px 5px rgba(0,0,0,.35)}
.sp-btn{width:calc(var(--w) * .101);height:calc(var(--w) * .101);padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 42% 36%,#6A706E,#4A514E 55%,#3A403E);box-shadow:0 calc(var(--w) * .008) 0 #2C3130,0 calc(var(--w) * .012) calc(var(--w) * .01) rgba(0,0,0,.3);
  color:#D9DCDA;font:700 calc(var(--w) * .042)/1 Rubik,sans-serif;text-shadow:0 1px 0 #2C3130}
.sp-btn::before{content:"";position:absolute;inset:calc(var(--w) * -.025);border-radius:50%}
.sp-btn:active{transform:translate(-50%,calc(-50% + var(--w) * .006));box-shadow:0 calc(var(--w) * .002) 0 #2C3130}
.sp-b{left:calc(var(--w) * .668);top:calc(var(--w) * .365)}
.sp-a{left:calc(var(--w) * .828);top:calc(var(--w) * .318)}
.sp-speaker{left:calc(var(--w) * .398);top:calc(var(--w) * .458);width:calc(var(--w) * .2);height:calc(var(--w) * .195);display:grid;grid-template-columns:repeat(4,1fr);place-items:center}
.sp-speaker i{width:calc(var(--w) * .0095);height:calc(var(--w) * .0095);border-radius:50%;background:#3A0A0E;box-shadow:0 1px 0 rgba(255,255,255,.2)}
.sp-speaker i:nth-child(6),.sp-speaker i:nth-child(7),.sp-speaker i:nth-child(10),.sp-speaker i:nth-child(11){width:calc(var(--w) * .0125);height:calc(var(--w) * .0125)}
.sp-label{top:calc(var(--w) * .66);transform:translateX(-50%);font:700 calc(var(--w) * .026)/1 Rubik,sans-serif;letter-spacing:.06em;color:#FFD5D2;opacity:.75}
.sp-label.sel{left:calc(var(--w) * .413)}
.sp-label.sta{left:calc(var(--w) * .586)}
.sp-ss{top:calc(var(--w) * .778);width:calc(var(--w) * .135);height:calc(var(--w) * .135);padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle,#707372 0 calc(var(--w) * .031),#A31B21 calc(var(--w) * .032) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.sp-ss.sel{left:calc(var(--w) * .413)}
.sp-ss.sta{left:calc(var(--w) * .586);background:radial-gradient(circle,#595C5B 0 calc(var(--w) * .031),#A31B21 calc(var(--w) * .032) 100%)}
.sp-ss:active{filter:brightness(.85)}
.sp-dpad button:focus-visible,.sp-btn:focus-visible,.sp-ss:focus-visible{outline:3px solid #FFE739;outline-offset:2px}

/* ---------- the battle screen, native 240x160 ---------- */
.gba{position:absolute;left:0;top:0;width:240px;height:160px;transform-origin:0 0;overflow:hidden;background:#000;cursor:pointer;
  image-rendering:pixelated;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none;font:16px/16px "GBA",monospace;color:#fff}
.gba:focus-visible::after{content:"";position:absolute;inset:0;z-index:20;box-shadow:inset 0 0 0 2px #FFE739;pointer-events:none}
.gba button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}

/* the grass stripes stay still; only the platforms and the Pokemon slide, the wild side from the left, yours from the right */
.bt-scene{position:absolute;left:0;top:0;width:240px;height:112px}
.bt-stripes{position:absolute;inset:0;background:url("../assets/gen3/battle/stripes.png") repeat-x}
.bt-top,.bt-bot{position:absolute;left:0;width:240px}
.bt-top{top:0;height:80px}
.bt-bot{top:80px;height:32px}
.bt-plat{position:absolute;display:block}
.bt-plat.foe{left:112px;top:48px;width:128px;height:32px;background:url("../assets/gen3/battle/plat-foe.png") no-repeat}
.bt-plat.me{left:4px;top:21px;width:120px;height:11px;background:url("../assets/gen3/battle/plat-me.png") no-repeat}
.bt-foe{position:absolute;left:136px;top:0;width:80px;height:80px} /* bigger than the game's 64x64 so his face reads */
.bt-foe-pix{position:absolute;inset:0;width:80px;height:80px}
.bt-trainer{position:absolute;left:48px;top:-32px;width:64px;height:64px;background:url("../assets/gen3/battle/joji-back.png") 0 -192px no-repeat}
.bt-me{position:absolute;left:40px;top:-31px;width:64px;height:64px;opacity:0;transform-origin:50% 100%}
.bt-ball{position:absolute;left:18px;top:62px;width:12px;height:12px;opacity:0}

.gba.s-play .bt-scene{animation:bt-window .7s linear both}
.gba.s-play .bt-top{animation:bt-from-left 2s linear .5s both}
.gba.s-play .bt-bot{animation:bt-from-right 2s linear .5s both}
@keyframes bt-window{0%{clip-path:inset(79px 0 31px 0)}71%{clip-path:inset(48px 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes bt-from-left{from{transform:translateX(-240px)}}
@keyframes bt-from-right{from{transform:translateX(240px)}}
.gba.s-quick .bt-scene,.gba.s-quick .bt-top,.gba.s-quick .bt-bot{animation:none}
.gba .bt-msg,.gba .bt-foebox,.gba .bt-mebox{visibility:hidden}
.gba.s-in .bt-msg,.gba.s-foebox .bt-foebox,.gba.s-mebox .bt-mebox{visibility:visible}
.gba.s-foebox .bt-foebox{animation:bt-box-left .38s steps(23) both}
.gba.s-mebox .bt-mebox{animation:bt-box-right .38s steps(23) both}
.gba.s-quick .bt-foebox,.gba.s-quick .bt-mebox{animation:none}
@keyframes bt-box-left{from{transform:translateX(-115px)}}
@keyframes bt-box-right{from{transform:translateX(115px)}}

/* TAKUMI is turning ONE!: Joji turns to the screen, smiles (with a sparkle), and turns back.
   Sheet frames: 0-2 the throw, 3 standing (back), 4 looking at the screen, 5 smiling. */
.gba.s-turn .bt-trainer{animation:bt-turn 1.6s steps(1) forwards}
@keyframes bt-turn{0%{background-position:0 -192px}10%{background-position:0 -256px}28%{background-position:0 -320px}80%{background-position:0 -256px}90%,100%{background-position:0 -192px}}
.gba.s-turn .bt-trainer::after{content:"";position:absolute;left:43px;top:30px;width:1px;height:1px;background:#fff;
  box-shadow:0 -1px #fff,0 1px #fff,-1px 0 #fff,1px 0 #fff;opacity:0;animation:bt-sparkle 1.6s steps(1) forwards}
@keyframes bt-sparkle{0%,32%{opacity:0}33%,46%{opacity:1}47%,54%{opacity:0}55%,68%{opacity:1}69%,100%{opacity:0}}

/* Go! MEWTWO!: Joji winds up while sliding away, the ball arcs onto your platform, Mewtwo comes out */
.gba.s-throw .bt-trainer{animation:bt-wind .36s steps(1) forwards,bt-exit .84s linear forwards}
.gba.s-throw .bt-trainer::after{content:none}
@keyframes bt-wind{0%{background-position:0 0}33%{background-position:0 -64px}66%,100%{background-position:0 -128px}}
@keyframes bt-exit{to{transform:translateX(-88px)}}
.gba.s-throw .bt-ball{animation:bt-throw .42s linear .52s forwards}
@keyframes bt-throw{0%{opacity:1;transform:translate(0,0)}50%{opacity:1;transform:translate(24px,-22px)}99%{opacity:1;transform:translate(48px,32px)}100%{opacity:0;transform:translate(48px,32px)}}
.gba.s-throw .bt-me{animation:bt-pop .4s steps(6) .94s forwards}
@keyframes bt-pop{0%{opacity:1;transform:scale(.15);filter:brightness(4)}70%{opacity:1;transform:scale(1);filter:brightness(2.4)}100%{opacity:1;transform:scale(1);filter:none}}
.gba.s-out .bt-trainer,.gba.s-out .bt-ball{visibility:hidden}
.gba.s-out .bt-me{opacity:1;animation:none}
/* PUPPY EYES: Takumi hops, then Pikachu blinks as it is hit */
.gba.s-puppy .bt-foe{animation:bt-hop .5s steps(4) 2}
@keyframes bt-hop{50%{transform:translateY(-4px)}}
.gba.s-blink .bt-me{animation:bt-blink .53s steps(1) forwards}
@keyframes bt-blink{0%,25%,50%,75%{visibility:hidden}12.5%,37.5%,62.5%,87.5%,100%{visibility:visible}}

/* HP boxes, from the game's own box art; names and numbers in the small HP-box font */
.bt-foebox,.bt-mebox{position:absolute;font:8px/8px "GBA Small",monospace;color:#424242;text-shadow:1px 0 #DED6B5,0 1px #DED6B5,1px 1px #DED6B5}
.bt-foebox{left:13px;top:16px;width:100px;height:28px;background:url("../assets/gen3/battle/hpbox-foe.png") no-repeat}
.bt-mebox{left:127px;top:74px;width:103px;height:36px;background:url("../assets/gen3/battle/hpbox-me.png") no-repeat}
.bt-name,.bt-lv,.bt-hpnow,.bt-hpmax{position:absolute;top:6px;white-space:nowrap}
.bt-foebox .bt-name{left:7px}
.bt-foebox .bt-lv{left:76px}
.bt-mebox .bt-name{left:15px}
.bt-mebox .bt-lv{left:84px}
.bt-hpnow,.bt-hpmax{top:22px;width:24px;text-align:right}
.bt-hpnow{right:28px}
.bt-hpmax{right:8px}
.bt-hp{position:absolute;top:17px;width:48px;height:2px;background:linear-gradient(#4A425A 0 1px,#526B5A 1px 2px)}
.bt-foebox .bt-hp{left:39px}
.bt-mebox .bt-hp{left:47px}
.bt-hpfill{display:block;width:48px;height:2px;background:linear-gradient(#5AD684 0 1px,#73FFAD 1px 2px)}
.bt-hpfill.yellow{background:linear-gradient(#CEAD08 0 1px,#FFE739 1px 2px)}
.bt-hpfill.red{background:linear-gradient(#AD424A 0 1px,#FF5A39 1px 2px)}
.bt-exp{position:absolute;left:31px;top:33px;width:64px;height:2px}
.bt-exp i{display:block;width:23px;height:2px;background:#42CEFF}

/* message box: white text with the game's blue-grey shadow, the red arrow riding at the end of the text */
.bt-msg{position:absolute;left:0;top:112px;width:240px;height:48px;background:url("../assets/gen3/battle/msgbox.png") no-repeat}
.bt-text{position:absolute;left:16px;top:8px;width:212px;margin:0;white-space:pre-line;color:#fff;text-shadow:1px 0 #424A7B,0 1px #424A7B,1px 1px #424A7B}
.bt-next{display:inline-block;width:8px;height:16px;vertical-align:top;background:url("../assets/gen3/battle/arrow-frames.png") 0 0 no-repeat;animation:bt-arrow .4s steps(1) infinite}
@keyframes bt-arrow{0%{background-position:0 0}25%{background-position:0 -16px}50%{background-position:0 -32px}75%{background-position:0 -48px}}

/* action menu: "What should MEWTWO do?" on the left, the four choices in the white window */
.bt-menu{position:absolute;left:0;top:112px;width:240px;height:48px;display:none}
.gba.s-menu .bt-menu{display:block}
.gba.s-menu .bt-msg{visibility:hidden}
.bt-ask{position:absolute;left:0;top:0;width:136px;height:48px;margin:0;padding:8px 0 0 16px;background:url("../assets/gen3/battle/msgbox-left.png") no-repeat;color:#fff;
  text-shadow:1px 0 #424A7B,0 1px #424A7B,1px 1px #424A7B}
.bt-acts{position:absolute;left:136px;top:0;width:104px;height:48px;background:url("../assets/gen3/battle/actmenu.png") no-repeat}
/* each choice fills its quarter of the window (easier to tap); the label and the red cursor sit where Ruby draws them */
.bt-acts button{position:absolute;width:46px;height:18px;text-align:left;color:#4A4A4A;text-shadow:1px 0 #D6D6CE,0 1px #D6D6CE,1px 1px #D6D6CE}
.bt-acts button:nth-child(1){left:6px;top:6px}
.bt-acts button:nth-child(2){left:52px;top:6px}
.bt-acts button:nth-child(3){left:6px;top:24px}
.bt-acts button:nth-child(4){left:52px;top:24px}
.bt-acts button span{position:absolute;left:2px;top:2px}
.bt-acts button:nth-child(n+3) span{top:0}
.bt-acts button.sel::before,.bt-yesno button.sel::before{content:"";position:absolute;width:44px;height:16px;background:
  linear-gradient(#FF635A,#FF635A) 1px 0/calc(100% - 2px) 1px no-repeat,linear-gradient(#FF635A,#FF635A) 1px 100%/calc(100% - 2px) 1px no-repeat,
  linear-gradient(#FF635A,#FF635A) 0 1px/1px calc(100% - 2px) no-repeat,linear-gradient(#FF635A,#FF635A) 100% 1px/1px calc(100% - 2px) no-repeat}
.bt-acts button.sel::before{left:1px;top:2px}
.bt-acts button:nth-child(n+3).sel::before{top:0}
.bt-acts button:focus-visible span,.bt-yesno button:focus-visible span{outline:1px dotted #4A4A4A;outline-offset:1px}
.gba.s-menu .bt-mebox{animation:bt-bob .61s steps(1) infinite}
.gba.s-menu .bt-me{animation:bt-bob .61s steps(1) .15s infinite}
@keyframes bt-bob{0%{transform:none}50%{transform:translateY(1px)}}

/* Yes / No: the standard window frame, above the message box on the right; each half of the window is one choice */
.bt-yesno{position:absolute;left:192px;top:64px;width:48px;height:48px;display:none;border:8px solid transparent;border-image:url("../assets/gen3/battle/window9.png") 8 fill stretch}
.gba.s-yesno .bt-yesno{display:block}
.bt-yesno button{position:absolute;left:-8px;width:48px;height:24px;text-align:left;color:#4A4A4A;text-shadow:1px 0 #D6D6CE,0 1px #D6D6CE,1px 1px #D6D6CE}
.bt-yesno button:first-child{top:-8px}
.bt-yesno button:last-child{top:16px}
.bt-yesno button span{position:absolute;left:8px;top:8px}
.bt-yesno button:last-child span{top:0}
.bt-yesno button.sel::before{left:7px;top:8px;width:34px}
.bt-yesno button:last-child.sel::before{top:0}

/* ---------- the cartridge: every detail written out, like a Pokémon Ruby Game Pak ---------- */
.c-cart{position:relative;width:min(100%,480px);margin:26px auto 0;padding:calc(min(100vw,480px) * .1) 18px 26px;border-radius:14px 14px 22px 22px;
  background:linear-gradient(180deg,#C2464B 0%,#B31817 6%,#A80317 40%,#891417 100%);box-shadow:inset 0 2px 0 #DD8180,inset 0 -4px 0 #5F161A,0 18px 34px rgba(0,0,0,.45)}
.c-cart::before{content:"PARTY VERSION";content:"PARTY VERSION" / "";position:absolute;left:0;right:0;top:calc(min(100vw,480px) * .035);text-align:center;font:700 13px/1 Rubik,sans-serif;letter-spacing:.22em;color:rgba(0,0,0,.28);text-shadow:0 1px 0 rgba(255,255,255,.18)}
.c-sticker{position:relative;padding:22px 18px 22px;border-radius:6px;color:#F7EFEF;font-size:17px;line-height:1.5;
  background:radial-gradient(120% 60% at 15% 10%,rgba(209,92,89,.55),transparent 60%),radial-gradient(90% 50% at 90% 80%,rgba(36,42,54,.85),transparent 70%),
  linear-gradient(160deg,#7A3540 0%,#5E2A36 45%,#3A2632 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.c-sticker h1{margin:0;font:400 32px/1 "GBA",monospace;color:#E7CC34;text-shadow:2px 0 #35539A,0 2px #35539A,2px 2px #15234C}
.c-days{margin:8px 0 16px;font-size:15px;font-weight:700;color:#F3C9C6}
.c-dl{margin:0;display:grid;gap:12px}
.c-dl dt{font:32px/1 "GBA",monospace;color:#FFE739;text-shadow:2px 0 #424A7B,0 2px #424A7B,2px 2px #424A7B}
.c-dl dd{margin:4px 0 0;font-weight:500}
.c-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.c-btn{display:flex;align-items:center;justify-content:center;min-height:52px;text-decoration:none;color:#4A4A4A;font:32px/1 "GBA",monospace;
  text-shadow:2px 0 #D6D6CE,0 2px #D6D6CE,2px 2px #D6D6CE;border:16px solid transparent;border-image:url("../assets/gen3/battle/window9.png") 8 fill stretch;image-rendering:pixelated}
.c-btn:active{filter:brightness(.92)}
.c-btn:focus-visible{outline:3px solid #FFE739;outline-offset:2px}
.c-sticker h3{margin:26px 0 8px;font:32px/1 "GBA",monospace;color:#FFE739;text-shadow:2px 0 #424A7B,0 2px #424A7B,2px 2px #424A7B}
.c-sticker p{margin:0 0 8px}
.c-sticker ul{margin:8px 0;padding-left:22px}

/* ---------- Takumi's moves: he answers every choice, and after four turns MEWTWO faints ---------- */
.bt-fx{position:absolute;left:0;top:0;width:240px;height:112px;pointer-events:none}
.fx{position:absolute;display:block;opacity:0;background-repeat:no-repeat}
.fx.heart{width:7px;height:6px;background-image:url("../assets/gen3/battle/fx-heart.png")}
.fx.note{width:6px;height:8px;background-image:url("../assets/gen3/battle/fx-note.png")}
.fx.spark{width:5px;height:5px;background-image:url("../assets/gen3/battle/fx-sparkle.png")}
.fx.cake{left:166px;top:40px;width:14px;height:11px;background-image:url("../assets/gen3/battle/fx-cake.png")}
.fx.splat{left:62px;top:72px;width:16px;height:9px;background-image:url("../assets/gen3/battle/fx-splat.png")}
.fx.h1{left:60px;top:80px}.fx.h2{left:76px;top:70px}.fx.h3{left:92px;top:82px}
.fx.n1{left:160px;top:44px}.fx.n2{left:170px;top:38px}.fx.n3{left:152px;top:52px}
.fx.s1{left:148px;top:24px}.fx.s2{left:200px;top:30px}.fx.s3{left:174px;top:12px}

/* the attacker lunges toward MEWTWO */
.gba.s-lunge .bt-foe{animation:bt-lunge .3s steps(3)}
@keyframes bt-lunge{50%{transform:translate(-6px,4px)}}
/* BABY GIGGLE: hearts rise around MEWTWO */
.gba.s-fx-hearts .fx.heart{animation:fx-rise 1s steps(10) forwards}
.gba.s-fx-hearts .fx.h2{animation-delay:.15s}.gba.s-fx-hearts .fx.h3{animation-delay:.3s}
@keyframes fx-rise{0%{opacity:1;transform:translateY(6px)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* BABBLE: music notes float from TAKUMI to MEWTWO */
.gba.s-fx-notes .fx.note{animation:fx-notes .9s steps(12) forwards}
.gba.s-fx-notes .fx.n2{animation-delay:.15s}.gba.s-fx-notes .fx.n3{animation-delay:.3s}
@keyframes fx-notes{0%{opacity:1;transform:translate(0,0)}35%{transform:translate(-30px,4px)}65%{transform:translate(-60px,18px)}90%{opacity:1}100%{opacity:0;transform:translate(-84px,34px)}}
/* PUPPY EYES and the win: sparkles twinkle around TAKUMI */
.gba.s-fx-sparks .fx.spark{animation:fx-twinkle .9s steps(1) forwards}
.gba.s-fx-sparks .fx.s2{animation-delay:.2s}.gba.s-fx-sparks .fx.s3{animation-delay:.4s}
@keyframes fx-twinkle{0%{opacity:1}25%{opacity:0}50%{opacity:1}75%,100%{opacity:0}}
/* TINY TANTRUM: the whole scene shakes */
.gba.s-shake .bt-scene,.gba.s-quick.s-shake .bt-scene{animation:bt-shake .6s steps(12)}
@keyframes bt-shake{0%,100%{transform:none}10%{transform:translate(-4px,1px)}30%{transform:translate(4px,-1px)}50%{transform:translate(-4px,1px)}70%{transform:translate(3px,0)}90%{transform:translateX(-2px)}}
/* CAKE SMASH: a first-birthday cake flies over and splats */
.gba.s-fx-cake .fx.cake{animation:fx-cake .7s linear forwards}
@keyframes fx-cake{0%{opacity:1;transform:translate(0,0)}50%{opacity:1;transform:translate(-52px,-14px)}99%{opacity:1;transform:translate(-100px,36px)}100%{opacity:0;transform:translate(-100px,36px)}}
.gba.s-fx-cake .fx.splat{animation:fx-splat 1s steps(1) .7s forwards}
@keyframes fx-splat{0%{opacity:1;transform:scale(.5)}15%{transform:scale(1.2)}30%{transform:none}85%{opacity:1}100%{opacity:0}}

/* MEWTWO fainted: it drops out of sight behind the message box and its HP box slides away */
.gba.s-faint .bt-me{animation:bt-faint .5s steps(10) forwards}
@keyframes bt-faint{to{transform:translateY(64px)}}
.gba.s-faint .bt-mebox,.gba.s-quick.s-faint .bt-mebox{animation:bt-box-out .3s steps(8) forwards}
@keyframes bt-box-out{to{transform:translateX(115px)}}
/* JOJI whited out: the screen fades to white, then back */
.bt-white{position:absolute;inset:0;z-index:15;background:#fff;opacity:0;pointer-events:none}
.gba.s-white .bt-white{animation:fx-white .9s linear forwards}
@keyframes fx-white{to{opacity:1}}
.gba.s-unwhite .bt-white{opacity:1;animation:fx-unwhite .6s linear forwards}
@keyframes fx-unwhite{to{opacity:0}}