/* The phone page in the 16-bit look of docs/mockups/16-bit. kit.css, linked first, holds the shared parts. */
:root{--pick:0 -3px 0 var(--gold),0 3px 0 var(--gold),-3px 0 0 var(--gold),3px 0 0 var(--gold);--frame:0 -4px 0 var(--edge),0 4px 0 var(--edge),-4px 0 0 var(--edge),4px 0 0 var(--edge);--sink:inset 0 -3px 0 #E8E6DC}
*{box-sizing:border-box}
html,body{-webkit-text-size-adjust:100%;background:var(--grass)}
body{margin:0;font-size:16px;line-height:23px;-webkit-tap-highlight-color:transparent}
main{position:relative;display:flex;flex-direction:column;max-width:480px;margin:0 auto;padding:16px 14px 0;min-height:100dvh}
/* The grass and the sand path at the foot of each screen. */
main::after{content:'';flex:none;height:118px;margin:auto -14px 0;padding-top:26px;
background:linear-gradient(transparent 30px,#C5BAAA 0 33px,var(--sand) 0 67px,#C5BAAA 0 70px,transparent 0) content-box,url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='30'><path fill='%23FAF9F5' d='M7 4h3v1H7zM8 3h1v3H8zM33 22h3v1h-3zM34 21h1v3h-1zM24 9h3v1h-3zM25 8h1v3h-1z'/></svg>") content-box}
h1{font-size:21px;line-height:27px;margin:0 0 8px;color:var(--gold-text);overflow-wrap:anywhere}
h2,.field>span,.feed li.day b{display:block;margin:0 0 8px;font:700 13px/18px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
p{margin:0 0 10px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:0;background:none;padding:0}
button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.soft{color:var(--edge)}
[hidden]{display:none!important}
.noscript{margin:14px}
.box{margin:0 0 14px;padding:14px}
.px{height:20px}
/* A full-screen notice stands halfway between the top and the path. */
.splash{margin:auto 0;padding:24px 18px 18px;text-align:center}
main:has(>.splash)::after{margin-top:0}
.splash p{margin:0}
/* The line under the splash needs no script, and with no style sheet it shows at once. */
.splash .stuck{margin-top:12px;visibility:hidden;animation:late 0s 8s forwards}
.splash .stuck a{color:inherit}
@keyframes late{to{visibility:visible}}
.splash-disc{margin:0 auto 14px;font-size:52px;line-height:64px;animation:bob 1.2s steps(2,jump-none) infinite}
.splash-disc .px{display:block;height:100px;margin:0 auto}
/* The loading screen's double door, ajar, in plain CSS because no script has run yet. */
.door{width:56px;height:64px;animation:none;background:linear-gradient(90deg,var(--ink) 0 4px,#B57A69 0 24px,var(--gold) 0 32px,#B57A69 0 52px,var(--ink) 0) 0 4px/100% 60px no-repeat,var(--ink)}
.walk{position:absolute;left:0;right:0;bottom:54px;display:flex;justify-content:center;gap:8px}
.walk .sprite{width:48px;height:48px}
.disc{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;background:var(--grey);box-shadow:inset 2px 2px 0 #fff5,inset -2px -3px 0 #0004}
.disc .sprite{display:block;width:16px;height:16px}
.disc.big{width:108px;height:108px}
.disc.big .sprite{width:96px;height:96px}
.disc>span{font-size:15px}.disc.big>span{font-size:66px}.disc.mid>span{font-size:32px}
.disc.mid{width:52px;height:52px}.disc.mid .sprite{width:48px;height:48px}
.btn{display:block;width:100%;min-height:58px;margin:26px 0 6px;padding:13px 10px;font-size:20px;font-weight:800;line-height:26px;letter-spacing:.1em}
.btn+.btn{margin-top:24px}
.btn.quiet,.btn.small{background:var(--navy);color:var(--edge);box-shadow:var(--frame),6px 8px 0 var(--ink)}
.btn.small{box-shadow:0 0 0 4px var(--red),6px 8px 0 var(--ink)}
.btn[disabled]{background:var(--off);color:var(--off-ink);box-shadow:none;pointer-events:none}
.box .btn{margin:18px 0 4px}
/* The sign-up buttons stick to the foot of the screen, on grass, and the box scrolls behind them. */
.foot{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:row-reverse;gap:14px;margin:0 -14px;padding:12px 14px calc(16px + env(safe-area-inset-bottom));background:var(--grass)}
.foot .btn{flex:1;margin:0}
.foot .quiet{flex:none;width:auto;padding:13px 16px}
.foot:has(.quiet) .btn{padding:13px 8px;font-size:16px}
.row{display:flex;gap:12px;align-items:center}
.row>.grow{flex:1;min-width:0}
.row .btn{width:auto;margin:0;min-height:48px;font-size:16px}
.row .btn+.btn{flex:1}
footer>.btn.quiet{display:inline-block;width:auto;min-height:44px;margin:0;padding:10px 12px;font:600 14px/24px var(--body);letter-spacing:0;text-transform:none;text-decoration:underline;background:#FAF9F5E0;box-shadow:none}
footer{text-align:center}
footer .box{text-align:left;box-shadow:0 0 0 4px var(--red),8px 8px 0 var(--ink)}
.steps{margin:4px 4px 26px}
form>.box{padding:16px 14px 18px}
form:has(.missions)>.box{margin-bottom:120px}
.hello{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:center}
.hello>div:last-child{display:contents}
.hello .soft{grid-column:1/-1;margin:14px 0 0}
.field{display:block;margin:16px 0 0}
.input{display:block;width:100%;height:48px;padding:0 12px;border:0;border-radius:0;background:var(--field);color:var(--field-ink);font:700 18px var(--mono);letter-spacing:.04em;box-shadow:var(--field-edge)}
.input::placeholder{color:var(--field-hint)}
.input:focus{outline:3px solid var(--sky)}
textarea.input{height:auto;padding:10px 12px;resize:none;font:600 16px/23px var(--body);letter-spacing:0}
.count{float:right;font:600 13px var(--body);letter-spacing:0;text-transform:none;color:#424241}
.dice{width:52px;height:48px;flex:none;background:var(--gold);font-size:24px;box-shadow:inset -3px -4px 0 var(--gold-dk),0 4px 0 var(--ink)}
.animals{display:grid;grid-template-columns:repeat(6,minmax(0,50px));justify-content:center;gap:6px;margin-top:18px}
.animals button{font-size:29px;aspect-ratio:1;display:grid;place-items:center;background:var(--line);box-shadow:var(--sink)}
.animals .sprite{width:48px;max-width:100%;height:auto}
.animals [aria-pressed=true]{background:#B0AEA5;box-shadow:var(--pick)}
.colours{display:grid;grid-template-columns:repeat(4,44px);justify-content:center;gap:12px 18px;margin-top:18px}
.colours button{height:44px;box-shadow:inset 3px 3px 0 #fff5,inset -3px -4px 0 #0004}
.colours [aria-pressed=true]{box-shadow:var(--pick)}
.colours [aria-pressed=true]::before{content:'';display:block;width:8px;height:16px;margin:6px auto 0;border:solid var(--tick);border-width:0 5px 5px 0;transform:rotate(45deg)}
.colours .deep[aria-pressed=true]::before{border-color:var(--tick-on-deep)}
.chips{display:flex;flex-wrap:wrap;gap:10px 8px;margin:16px 0 4px}
.chip{min-height:44px;padding:0 12px;background:var(--line);color:var(--edge);font-size:15px;box-shadow:var(--sink)}
.chip[aria-pressed=true]{background:var(--edge);color:var(--navy);box-shadow:var(--pick)}
.chip[aria-pressed=true]::before{content:'';display:inline-block;width:4px;height:8px;margin:0 9px 3px 1px;border:solid var(--navy);border-width:0 3px 3px 0;transform:rotate(45deg)}
.chips.full .chip[aria-pressed=false]{opacity:.45}
/* A fault: a red edge, and a red "!" drawn by a gradient. */
.error,.notice{margin:0 0 16px;padding:10px 12px;background:var(--edge);color:var(--navy)}
form:has(.missions) .notice::before{content:'';float:left;width:16px;height:20px;margin:2px 10px 0 0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'><path fill='%23FAF9F5' d='M0 0h8v1H7v2H6v1H5v2h1v1h1v2h1v1H0V9h1V7h1V6h1V4H2V3H1V1H0z'/><path fill='%23D97757' d='M2 1h4v2H2zM3 7h2v2H3z'/></svg>");animation:turn 1.6s steps(2,jump-none) infinite}
.error{padding-left:40px;box-shadow:inset 4px 0 0 var(--red);background:linear-gradient(var(--red) 10px,#0000 0 12px,var(--red) 0) 18px 13px/4px 16px no-repeat,var(--edge)}
.missions{display:grid;gap:10px;margin:16px 0 0}
.missions.two{display:flex;flex-wrap:wrap;gap:8px}
.missions .wide{margin:0;flex-basis:100%}
.pick{display:flex;gap:12px;align-items:center;width:100%;min-height:44px;padding:10px 12px;text-align:left;background:var(--line);font:700 15px/20px var(--mono);box-shadow:var(--sink)}
.pick .emoji{font-size:30px;line-height:32px;flex:none}
.pick small{display:block;margin-top:4px;font:600 15px/21px var(--body);color:#424241}
.pick[aria-pressed=true]{background:#B0AEA5;box-shadow:var(--pick)}
.missions.two .pick{width:auto;padding:6px 10px;gap:6px;font-size:14px;white-space:nowrap}
.missions.two .pick .emoji{font-size:18px}
.left{margin:14px 0 0;text-align:center;font-size:13px;color:#424241}
.fine{margin:0 0 6px;font-size:13px;line-height:19px;color:#424241}
.fine+.fine{margin-bottom:16px}
.me{display:flex;gap:14px;align-items:center}
.me h1{margin:0}
.me .status{margin:6px 0 0}
.me .grow{flex:1;min-width:0}
.me .disc{position:relative}
.state-active .me .disc{animation:bob 1s steps(2,jump-none) infinite}
.state-queued .me .disc{animation:sway 1.6s steps(2,jump-none) infinite alternate}
.state-idle .me .disc,.state-hotel .me .disc{box-shadow:inset 0 0 0 54px #FAF9F580}
.disc>.badge{position:absolute;right:-8px;top:-8px}
.map{position:relative;padding:8px;aspect-ratio:16/10}
.map canvas{display:block;width:100%;height:100%;background:var(--slate)}
.map .where{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:2px 8px;background:#FAF9F5E0;font:700 13px var(--mono)}
.running{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center}
.running>div{display:contents}
.running h2{margin:0}
.running .soft{grid-column:1/-1;margin:8px 0 0}
.tabs{display:flex;gap:4px;margin:-10px -8px 6px;padding:0 0 4px;border-bottom:2px solid var(--line);overflow-x:auto}
.tabs button{flex:auto;min-height:44px;padding:0 2px;font:700 17px var(--mono);color:var(--dim);white-space:nowrap}
.tabs [aria-selected=true]{color:var(--gold-text)}
.tabs [aria-selected=true]::before{content:'';display:inline-block;width:24px;height:14px;margin-right:6px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 2 12 7'><path fill='%23141413' d='M0 2h12v3H7v4H0z'/><path fill='%23FAF9F5' d='M1 3h10v1H6v4H1z'/><path fill='%2387867F' d='M2 5h3v1H2zM1 7h5v1H1z'/></svg>") 0 0/100% 100%;animation:nudge .8s steps(2,jump-none) infinite}
.tabs:has(:nth-child(4)) button{font-size:15px}
@media (max-width:349px){.tabs:has(:nth-child(4)) button{font-size:13px}}
.feed{list-style:none;margin:-8px -14px;padding:0}
.feed li{display:flex;gap:14px;padding:14px 14px 14px 16px;align-items:flex-start}
.feed li+li{border-top:2px dashed var(--line)}
.feed li.day{display:block;padding:12px 14px 10px}
.feed li.day .soft{font-size:13px;color:#424241}
.feed .icon{display:grid;place-items:center;flex:none;width:44px;height:44px;font-size:24px;background:var(--line);outline:2px solid var(--edge)}
.feed .icon .px{height:30px}
.feed .body{flex:1;min-width:0;overflow-wrap:anywhere}
.feed .quote{display:block;margin-top:6px;padding:6px 10px;background:var(--line);box-shadow:inset 3px 0 0 var(--dim)}
.feed .quote.mine{box-shadow:inset 3px 0 0 var(--teal)}
.feed .meta{display:block;margin-top:4px;font-size:13px;color:#424241}
.feed .hide{margin-left:14px;padding:12px 0;text-decoration:underline}
.feed .open{text-align:left;text-decoration:underline}
.feed .who{white-space:nowrap}
.feed .who .disc{vertical-align:-5px;margin-right:4px}
.own{display:inline-block;margin-left:6px;padding:0 6px;background:var(--edge);color:var(--navy);font:700 11px/20px var(--mono);text-transform:uppercase}
.feed li.report{background:#E8E6DC;box-shadow:inset 4px 0 0 var(--gold)}
.feed li.report b{color:var(--gold-text)}
.feed li.gone{align-items:center;color:#424241;font-size:13px}
.feed li.gone .icon{width:24px;height:24px;font-size:14px;outline:0;background:none}
.feed li.fresh{animation:pop .4s steps(3)}
.feed img.thumb{display:block;width:100%;max-width:240px;aspect-ratio:400/192;margin:10px 0 4px 4px;object-fit:cover;object-position:top;background:var(--line);box-shadow:0 0 0 4px var(--edge)}
.empty{padding:22px 8px;text-align:center;color:var(--dim)}
.empty .emoji{display:block;margin-bottom:8px;font-size:30px}
.empty .px{height:32px;opacity:.7}
.bizcard{display:flex;gap:12px;align-items:center;padding:12px;margin-bottom:12px;background:var(--edge);color:var(--navy);box-shadow:4px 4px 0 var(--ink)}
.bizcard b{display:block;font-family:var(--mono)}
.bizcard .soft{font-size:15px;color:var(--navy)}
.bizcard .soft:last-child{font-size:13px;color:var(--slate)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.tags span{padding:0 6px;background:var(--navy);color:var(--edge);font-size:13px;line-height:22px}
.gallery figure{margin:0 0 18px}
.gallery img{display:block;width:100%;background:var(--line);box-shadow:0 0 0 3px var(--edge)}
.gallery figcaption{margin-top:8px;font-size:13px;color:#424241}
.offline{position:fixed;left:14px;right:14px;top:8px;z-index:5;margin:0;padding:8px 12px;text-align:center;background:var(--edge);color:var(--navy);box-shadow:4px 4px 0 var(--ink)}
.confetti{position:fixed;top:-8px;z-index:6;width:6px;height:6px;pointer-events:none;animation:fall 2s steps(16) forwards}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes turn{to{transform:rotate(180deg)}}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes nudge{50%{transform:translateX(3px)}}
@keyframes pop{from{opacity:.35;transform:translateY(-8px)}}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
/* It only appears, after a delay, which is no motion. */
.splash .stuck{animation:late 0s 8s forwards!important}}