/* ===== shared ===== */
/* Pokémon Ruby's own text font, rebuilt as a 2 KB web font: at 16px one font pixel is one CSS pixel */
@font-face{font-family:"GBA";src:url("../assets/fonts/gba-ruby.woff2") format("woff2"),url("../assets/fonts/gba-ruby.ttf") format("truetype");font-display:block}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
button{font:inherit}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* one scene at a time: the gate, the meadow (a) or the battle (c) */
.gate,.look{display:none}
html[data-look="gate"] .gate,
html[data-look="a"] .look-a,
html[data-look="c"] .look-c{display:block}
/* the page colour behind each scene (shows when a phone bounces past the top or bottom) */
html[data-look="gate"],html[data-look="gate"] body{background:#E0F0E8}
html[data-look="a"],html[data-look="a"] body{background:#FFF8E8}
html[data-look="c"],html[data-look="c"] body{background:#1E1424}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pending-tag{display:inline-block;margin-top:10px;font:600 12px/1.2 Rubik,sans-serif;color:#A62A63;background:#FFE4F0;border:1.5px dashed #E0559A;border-radius:999px;padding:5px 10px}
.pending-tag.flash{animation:tag-flash .6s ease 2}
@keyframes tag-flash{50%{background:#E0559A;color:#fff}}

.takumi-photo{position:relative;display:grid;place-items:center;overflow:hidden;background:#F6F1E7 repeating-linear-gradient(45deg,transparent 0 14px,rgba(224,85,154,.08) 14px 28px)}
.takumi-photo::after{content:attr(data-ph);max-width:82%;font:600 14px/1.35 Rubik,sans-serif;color:#A62A63;text-align:center;padding:10px 14px;border:2px dashed #E0559A;border-radius:10px;background:#FFE4F0}
.takumi-photo.has-photo{background:var(--photo) center/cover no-repeat}
.takumi-photo.has-photo::after{display:none}

.ball{display:inline-block;flex:none;position:relative;width:1em;height:1em;border-radius:50%;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.8) 0 7%,transparent 8%),linear-gradient(#E8432E 0 45%,#2A211C 45% 55%,#fff 55%);
  box-shadow:inset 0 0 0 .065em #2A211C,inset -.06em -.08em 0 .05em rgba(0,0,0,.1)}
.ball::after{content:"";position:absolute;left:50%;top:50%;width:.3em;height:.3em;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 0 .065em #2A211C,inset 0 0 0 .05em #E4E0DA}

/* switch between the meadow and the battle: floating bottom-left on the meadow (its footer gets room for it),
   and at the top of the battle page, so it never sits on the Game Boy's buttons */
.switch-chip{position:fixed;left:12px;bottom:14px;z-index:40;display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 10px;border-radius:999px;cursor:pointer;text-decoration:none;transition:opacity .25s,transform .25s}
html[data-look="a"] .switch-chip,
html[data-look="c"] .switch-chip{display:inline-flex}
.switch-chip:focus-visible{outline:3px solid #3E9BE0;outline-offset:3px}
.switch-chip .ball{font-size:22px}
html[data-look="a"] .switch-chip{background:#fff;border:2.5px solid #4A3428;color:#4A3428;font:700 15px/1 Alegreya,Georgia,serif;box-shadow:0 3px 0 #4A3428}
html[data-look="a"] .a-foot{padding-bottom:84px}
html[data-look="c"] .switch-chip{position:absolute;top:14px;bottom:auto;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:#F8F8F8;border:3px solid #383838;border-radius:6px;color:#383838;font:32px/1 "GBA",monospace;box-shadow:0 3px 0 rgba(0,0,0,.35)}

/* scene change flashes */
.wipe{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0}
.wipe.white{background:#fff}
.wipe.on{animation:wipe-in .5s ease forwards}
.wipe.off{opacity:1;animation:wipe-out .6s ease forwards}
@keyframes wipe-in{to{opacity:1}}
@keyframes wipe-out{to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
}