/* The Oinkbound app's welcome screen (app.html). The screen is laid out in a 390 px wide design box that app.js
   scales: on a phone held upright it fills the window, and anywhere else it sits in a phone frame on the Pricing
   page's striped wall. */
:root{--cream:#f1e3c6;--stripe:#e9d8b4;--tiny:Silkscreen,monospace;--pxf:'Pixelify Sans',monospace}
html,body{height:100%}
body{display:grid;place-items:center;align-content:center;gap:18px;padding:20px 16px;overflow:hidden;
  background:var(--cream) repeating-linear-gradient(90deg,transparent 0 24px,var(--stripe) 24px 32px)}
.pw{position:relative;flex:none}
.phone{position:absolute;left:0;top:0;width:414px;height:868px;padding:12px;border-radius:58px;background:#1d1b22;
  box-shadow:0 0 0 3px #3a3742,10px 14px 0 0 rgba(8,60,54,.2);transform-origin:0 0}
.screen{position:relative;width:390px;height:844px;overflow:hidden;border-radius:46px;background:#8fd0ff}
.screen canvas.art{position:absolute;left:0;top:0;width:390px}
.note{margin:0;max-width:414px;font:700 12px/1.4 var(--tiny);text-transform:uppercase;text-align:center;color:var(--teal-dark)}

/* the phone's own status bar and home bar, drawn only in the frame */
.sb{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 34px;
  font:700 15px/1 var(--tiny);color:var(--teal-dark);pointer-events:none}
.sb .ic{display:flex;align-items:flex-end;gap:6px}
.sb .sig{display:flex;align-items:flex-end;gap:2px}
.sb .sig i{display:block;width:3px;background:var(--teal-dark)}
.sb .sig i:nth-child(1){height:4px}.sb .sig i:nth-child(2){height:7px}.sb .sig i:nth-child(3){height:10px}.sb .sig i:nth-child(4){height:13px}
.sb .bat{position:relative;display:block;width:24px;height:12px;margin-right:3px;box-shadow:inset 0 0 0 2px var(--teal-dark)}
.sb .bat::before{content:'';position:absolute;left:3px;top:3px;width:14px;height:6px;background:var(--teal-dark)}
.sb .bat::after{content:'';position:absolute;right:-4px;top:4px;width:2px;height:4px;background:var(--teal-dark)}
.homebar{position:absolute;left:50%;bottom:9px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:var(--teal-dark);opacity:.85}

/* the header: "Welcome to" and the wordmark */
.hd{position:absolute;left:0;right:0;top:74px;margin:0;display:grid;justify-items:center;text-align:center;pointer-events:none}
.hd .wt{font:700 18px/1 var(--tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-dark);text-shadow:2px 2px 0 #fff6c8}
.hd canvas.wm{width:284px;height:44px;margin-top:12px}

/* the buttons: the arcade pair */
.btns{position:absolute;left:28px;right:28px;bottom:50px;display:grid;gap:16px}
.btns a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
.btns a *{pointer-events:none}
.btns a:focus-visible{outline:3px dashed var(--pink);outline-offset:8px}
.go{height:62px;margin:4px 4px 13px;font:700 22px/1 var(--tiny);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--pink);text-shadow:2px 2px 0 var(--plum);
  box-shadow:0 -4px 0 0 var(--plum),0 4px 0 0 var(--plum),-4px 0 0 0 var(--plum),4px 0 0 0 var(--plum),0 9px 0 0 #c9347d,0 13px 0 0 var(--plum);
  animation:halo 1.2s steps(2) infinite}
.go:active{transform:translateY(5px);box-shadow:0 -4px 0 0 var(--plum),0 4px 0 0 var(--plum),-4px 0 0 0 var(--plum),4px 0 0 0 var(--plum),0 8px 0 0 var(--plum)}
.go svg{width:12px;height:17px;flex:none}
@keyframes halo{50%{outline:8px solid rgba(255,95,168,.32);outline-offset:6px}}
.in{height:54px;margin:0 3px 9px;color:var(--coin);background:var(--teal);
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 9px 0 0 var(--teal-dark)}
.in:active{transform:translateY(4px);box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 5px 0 0 var(--teal-dark)}
.in .q{font:400 14px/1 var(--tiny);text-transform:uppercase;color:#fff6c8}
.in b{font:700 17px/1 var(--tiny);text-transform:uppercase}

canvas.wipe{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}

/* On a phone held upright the screen is the whole window: no frame, no drawn status bar or home bar, and the
   header and buttons keep clear of the phone's own bars. */
.fill body{display:block;padding:0;background:linear-gradient(#8fd0ff 50%,#c9935e 50%);overscroll-behavior:none}
.fill .pw{position:fixed;left:0;top:0}
.fill .phone{padding:0;border-radius:0;background:none;box-shadow:none}
.fill .screen{border-radius:0}
.fill .sb,.fill .homebar,.fill .note{display:none}
.fill .hd{top:calc(44px + env(safe-area-inset-top))}
.fill .btns{bottom:calc(30px + env(safe-area-inset-bottom))}
.fill .motion-toggle{top:calc(14px + env(safe-area-inset-top));bottom:auto;width:36px;height:36px}
.fill .motion-toggle canvas{width:18px;height:18px}