/* ===== the gate: Professor Oak's welcome, Pokémon FireRed style =====
   Everything is drawn at the GBA's native size and scaled by gate.js: --ku scales the text box,
   --ks the scene (exactly twice --ku, so the two pixel grids line up) and --kq the YES/NO window. */
@font-face{font-family:"GBA FRLG";src:url("../assets/fonts/gba-frlg.woff2") format("woff2"),url("../assets/fonts/gba-frlg.ttf") format("truetype");font-display:block}

.gate{--ks:3;--ku:1.5;--kq:3;--scene-top:120px;--box-bottom:10px;
  position:relative;height:100vh;height:100svh;min-height:300px;overflow:hidden;background:#E0F0E8;
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  font-family:"GBA FRLG",monospace;color:#636363;image-rendering:pixelated}
.gate img{-webkit-user-drag:none}

.g-scene{position:absolute;left:50%;top:var(--scene-top);width:240px;height:160px;transform-origin:50% 0;transform:translateX(-50%) scale(var(--ks))}
/* FireRed's floor bands, carried out past the 240px edges and down to the bottom of the screen */
.g-floor{position:absolute;left:-2000px;right:-2000px;top:84px;height:4000px;
  background:linear-gradient(#C8E0D8 0 4px,#B0D0C8 4px 8px,#98C0B8 8px 12px,#80B0A8 12px 16px,#68A098 16px 20px,#509088 20px 24px,#408880 24px)}
.g-platform{position:absolute;left:76px;top:96px;width:88px;height:24px}
.g-oak{position:absolute;left:88px;top:16px;width:64px;height:96px}
.g-pika{position:absolute;left:60px;top:55px;width:64px;height:64px;opacity:0;transform-origin:50% 85%}
.g-ball{position:absolute;left:88px;top:54px;width:12px;height:12px;opacity:0}

/* "This world...": Oak tosses the ball and Pikachu comes out */
.gate.s-release .g-ball{animation:g-throw .5s linear forwards}
.gate.s-release .g-pika{animation:g-pop .42s steps(6) .5s forwards}
.gate.s-out .g-pika{opacity:1;animation:none}
.gate.s-out .g-ball{visibility:hidden}
@keyframes g-throw{
  0%{opacity:1;transform:translate(0,0)}
  40%{opacity:1;transform:translate(-4px,-14px)}
  99%{opacity:1;transform:translate(-9px,35px)}
  100%{opacity:0;transform:translate(-9px,35px)}
}
@keyframes g-pop{0%{opacity:1;transform:scale(.1);filter:brightness(4)}70%{opacity:1;transform:scale(1);filter:brightness(2.4)}100%{opacity:1;transform:scale(1);filter:none}}

/* the message box: FireRed's own box art, text at its measured place (cell 11,6, 15 px line pitch) */
.g-ui{position:absolute;left:50%;bottom:var(--box-bottom);width:230px;height:42px;transform-origin:50% 100%;transform:translateX(-50%) scale(var(--ku))}
.g-box{position:relative;width:230px;height:42px;background:url("../assets/gen3/frlg-box.png") no-repeat}
.g-text{position:absolute;left:11px;top:6.5px;width:211px;margin:0;font-size:16px;line-height:15px;white-space:pre-line;color:#636363;
  text-shadow:1px 0 #D6D6CE,0 1px #D6D6CE,1px 1px #D6D6CE}
.g-next{display:inline-block;width:10px;height:6px;vertical-align:3px;background:url("../assets/gen3/frlg-arrow.png") no-repeat;animation:g-bob .52s steps(1) infinite}
@keyframes g-bob{0%{transform:translateY(0)}25%{transform:translateY(1px)}50%{transform:translateY(2px)}75%{transform:translateY(1px)}}

/* YES / NO: FireRed's window, items 14 px apart; drawn at twice the box scale on phones so it is easy to tap */
.g-yesno{position:absolute;right:max(10px,calc(50% - 115px * var(--ku)));bottom:calc(var(--box-bottom) + 42px * var(--ku) + 10px);
  width:62px;height:46px;transform-origin:100% 100%;transform:scale(var(--kq));background:url("../assets/gen3/frlg-window.png") no-repeat;cursor:default}
.g-yesno.pop{animation:g-appear .12s steps(2)}
@keyframes g-appear{from{opacity:0}}
.g-yesno button{position:absolute;left:0;width:62px;height:23px;margin:0;padding:0;background:none;border:0;cursor:pointer;outline:none;
  font:16px/16px "GBA FRLG",monospace;color:#636363;text-shadow:1px 0 #D6D6CE,0 1px #D6D6CE,1px 1px #D6D6CE}
.g-yesno button:first-child{top:0}
.g-yesno button:last-child{top:23px}
.g-yesno button span{position:absolute;left:15px;top:9px}
.g-yesno button:last-child span{top:0}
.g-yesno button.sel::before{content:"";position:absolute;left:8px;top:11px;width:6px;height:10px;background:url("../assets/gen3/frlg-cursor.png") no-repeat}
.g-yesno button:last-child.sel::before{top:2px}
/* the arrow already shows the choice; a keyboard user who tabs off it still gets a ring */
.g-yesno button:focus-visible:not(.sel){outline:1px dashed #4A73A5;outline-offset:-2px}

.g-skip{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5;min-height:44px;padding:0 18px;
  background:rgba(255,255,255,.88);border:2px solid #4A73A5;border-radius:999px;color:#4A73A5;font:32px/1 "GBA FRLG",monospace;cursor:pointer}
.g-skip:focus-visible{outline:3px solid #4A73A5;outline-offset:3px}

/* leaving for the battle: the Gen III encounter flash (three grey pulses), then black */
.g-flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;background:#5A5A5A}
.gate.s-battle .g-flash{animation:g-encounter 1.1s linear forwards}
@keyframes g-encounter{
  0%{opacity:0;background:#5A5A5A}12%{opacity:.6}24%{opacity:0}36%{opacity:.6}48%{opacity:0}60%{opacity:.6}
  72%{opacity:.2;background:#5A5A5A}73%{background:#000}100%{opacity:1;background:#000}
}