/* base reset (mirrors the Claude artifact skeleton the game was first built in) */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
/* One-screen game: full-bleed 3D sketchbook scene, handwritten HUD pinned to the corners */
:root{
  --paper:#fbfaf4;
  --ink:#2a2a30;
  --ballpoint:#2b4fbf;
  --red-pencil:#c8443c;
  --wash:#fffef9;
  --pencil:#7d7d86;
  --rule:#cfdcef;
  --display:"Kalam","Patrick Hand","Comic Sans MS",cursive;
  --hand:"Patrick Hand","Kalam","Comic Sans MS",cursive;
  --sketch-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color-scheme:light;
}
html,body{height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--hand);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game,#overlay{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#overlay{pointer-events:none}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(70,50,30,.16) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-top:calc(env(safe-area-inset-top,0px) + 10px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  pointer-events:none}
.stats{display:flex;flex-direction:column;line-height:1}
.dist{font-family:var(--display);font-weight:700;font-size:3rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dist small{font-size:1.4rem;margin-left:4px;font-weight:400}
.best{font-size:1.15rem;color:var(--pencil);margin-top:2px}
.best span{color:var(--ink);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.chip{font-family:var(--hand);font-size:1.05rem;color:var(--ink);background:var(--wash);border:2px solid var(--ink);
  border-radius:var(--sketch-radius);padding:4px 12px;white-space:nowrap}
.chip.plane{transform:rotate(1.5deg)}
.chiprow{display:flex;gap:6px}
button.chip{pointer-events:auto;cursor:pointer;color:var(--ballpoint);border-color:var(--ballpoint)}
button:focus-visible{outline:3px dashed var(--ballpoint);outline-offset:3px}

.wind{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 124px);
  display:flex;align-items:center;gap:6px;font-size:1.05rem;pointer-events:none}
.wind svg{width:26px;height:26px;transition:transform .3s}
.hint{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);text-align:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  font-family:var(--display);font-size:1.3rem;pointer-events:none;text-wrap:balance}
.hint span{display:inline-block;max-width:min(330px,100%);box-sizing:border-box;background:var(--wash);border:2px solid var(--ink);border-radius:var(--sketch-radius);
  padding:7px 18px 8px;line-height:1.25;font-size:1.15rem;box-shadow:3px 4px 0 rgba(42,42,48,.85);transform:rotate(-1deg)}
.stall{position:fixed;left:50%;top:32%;transform:translateX(-50%) rotate(-6deg);font-family:var(--display);font-weight:700;
  font-size:2.6rem;color:var(--red-pencil);pointer-events:none;white-space:nowrap}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 205px);transform:translateX(-50%) rotate(-1.5deg);
  font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);background:#fff6c9;border:2px solid var(--ink);
  border-radius:var(--sketch-radius);padding:4px 14px;pointer-events:none;width:max-content;max-width:calc(100% - 32px);text-align:center;line-height:1.2;
  transition:opacity .35s, transform .35s}
.toast.off{opacity:0;transform:translateX(-50%) translateY(-8px) rotate(-1.5deg)}

.result,.guide{position:fixed;inset:0;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.card{pointer-events:auto;background:var(--wash);border:2.5px solid var(--ink);border-radius:var(--sketch-radius);
  box-shadow:5px 6px 0 var(--ink);padding:18px 26px 22px;text-align:center;transform:rotate(-1.5deg);width:min(320px,100%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background-image:repeating-linear-gradient(to bottom,transparent 0 29px,var(--rule) 29px 30px);background-position:0 12px}
.card .why{font-size:1.3rem;margin:0}
.card .big{font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:1;font-variant-numeric:tabular-nums;margin:4px 0}
.card .big small{font-size:1.6rem;font-weight:400}
.card .found{font-size:1.05rem;margin:0;color:var(--pencil)}
.card .reset{margin:2px 0 8px;font-size:.95rem;padding:3px 12px;color:var(--pencil);border-color:var(--pencil)}
.card .found.fresh{color:var(--red-pencil);font-family:var(--display);font-weight:700}
.card .sub{font-size:1.15rem;color:var(--pencil);margin:0 0 10px}
.card .sub.newbest{color:var(--red-pencil);font-family:var(--display);font-weight:700;transform:rotate(-2deg)}
.again{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--wash);background:var(--ballpoint);border:2px solid var(--ink);
  border-radius:var(--sketch-radius);padding:8px 26px;cursor:pointer}
.again:active{transform:translateY(2px)}
.tricks{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;justify-content:space-between;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.trick{pointer-events:auto;width:74px;height:74px;border-radius:50%;font-family:var(--display);font-weight:700;font-size:1.2rem;
  background:var(--wash);color:var(--ballpoint);border:2.5px solid var(--ink);box-shadow:3px 4px 0 var(--ink);cursor:pointer;touch-action:none}
.trick:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.card .stats2{font-size:1.1rem;margin:0}

.guide{background:rgba(251,250,244,.55)}
/* hangar: plane on show at the top, folding studio in a bottom sheet */
.chip.plane{pointer-events:auto;cursor:pointer;font-family:var(--hand)}
body.in-panel .toast,body.in-panel .hint{visibility:hidden}
body.in-hangar .hud,body.in-hangar .wind,body.in-hangar .hint,body.in-hangar .toast{visibility:hidden}
.hangar{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.hcard{pointer-events:auto;max-height:64%;overflow-y:auto;background:var(--wash);border-top:2.5px solid var(--ink);
  background-image:repeating-linear-gradient(to bottom,transparent 0 29px,var(--rule) 29px 30px);
  padding:12px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:12px;box-shadow:0 -6px 18px rgba(42,42,48,.18)}
.hcard>*{flex-shrink:0}
.hhead{display:flex;align-items:center;justify-content:space-between}
.hhead h2{font-family:var(--display);font-weight:700;font-size:1.7rem;margin:0}
.hx{font-size:1.2rem;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;background:var(--wash);cursor:pointer;color:var(--ink)}
.hlist{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.hlist button{flex:0 0 auto;font-family:var(--hand);font-size:1.02rem;color:var(--ink);background:var(--wash);border:2px solid var(--ink);
  border-radius:var(--sketch-radius);padding:5px 12px;cursor:pointer;white-space:nowrap}
.hlist button[aria-pressed="true"]{background:var(--ballpoint);color:#fff}
.hlist button .tag{font-size:.8rem;opacity:.75;margin-left:5px}
.hname{display:grid;grid-template-columns:4.2em 1fr;align-items:center;gap:8px;font-size:1.08rem}
.hname input{font-family:var(--display);font-size:1.15rem;padding:4px 10px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);min-width:0}
.hname input:disabled{background:transparent;border-color:transparent;padding-left:0}
.fold{display:flex;flex-direction:column;gap:10px}
.frow{display:flex;flex-direction:column;gap:5px}
.frow .fl{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.04em;color:var(--red-pencil)}
.fopts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fopts.paper{grid-template-columns:repeat(4,1fr)}
.fopt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:2px solid var(--ink);border-radius:10px;background:#fff;cursor:pointer;
  font-family:var(--hand);font-size:1rem;color:var(--ink);line-height:1.1;min-width:0}
.fopt small{font-size:.8rem;color:var(--pencil);text-align:center}
.fopt svg{width:46px;height:26px}
.fopt[aria-pressed="true"]{background:#e8eefc;border-color:var(--ballpoint);box-shadow:0 0 0 2px var(--ballpoint) inset}
.fopt .sw{width:30px;height:20px;border-radius:4px;border:1.5px solid var(--ink)}
.hstats{display:grid;grid-template-columns:5.6em 1fr;gap:4px 10px;align-items:center;font-size:1.02rem}
.bar{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.bar i{height:10px;border-radius:2px;background:#e3e0d6;border:1px solid rgba(42,42,48,.25)}
.bar i.on{background:var(--ballpoint)}
.hact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mini{font-family:var(--hand);font-size:1.05rem;padding:6px 12px;border:2px solid var(--ink);border-radius:var(--sketch-radius);background:var(--wash);color:var(--ink);cursor:pointer}
.mini.danger{color:var(--red-pencil);border-color:var(--red-pencil)}
.mini:disabled{opacity:.4;cursor:default}
.hnote{margin:0;font-size:.98rem;color:var(--pencil);min-height:1.2em}
.guide .card{width:min(380px,100%);max-height:calc(100% - 20px);overflow-y:auto;transform:rotate(.8deg);text-align:left;align-items:stretch;gap:0;padding:16px 18px 18px}
.guide h2{font-family:var(--display);font-weight:700;font-size:1.7rem;margin:0 0 2px;text-align:center}
.guide .lede{margin:0 0 8px;text-align:center;color:var(--pencil);font-size:1.05rem}
.guide h3{font-family:var(--display);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red-pencil);margin:10px 0 2px}
.guide ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.guide li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;font-size:1.08rem;line-height:1.2}
.guide li b{font-family:var(--display);font-weight:700}
.guide svg{width:34px;height:34px}
.guide .again{margin-top:14px;align-self:center}
.sound .card{width:min(340px,100%);gap:10px;transform:rotate(-.6deg)}
.srow{display:grid;grid-template-columns:4.4em auto 1fr;gap:10px;align-items:center}
.sl{font-family:var(--display);font-weight:700;font-size:1.15rem}
.stog{min-width:3.4em}
.stog[aria-pressed="false"]{color:var(--pencil);border-color:var(--pencil);text-decoration:line-through}
.srow input[type=range]{width:100%;min-width:0;height:32px;accent-color:var(--ballpoint);margin:0}
.srow input[type=range]:disabled{opacity:.4}
.now{margin:-4px 0 4px;font-size:.98rem;color:var(--pencil);min-height:1.2em}
@media (prefers-reduced-motion:reduce){.wind svg,.toast{transition:none}}