@font-face{font-family:Toast;src:url(assets/title.ttf);font-weight:800;font-display:swap}
:root{--ink:#412f2b;--red:#af382c;--cream:#fff8e5;--edge:#604439;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#f6efd9}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;align-items:center;background:repeating-linear-gradient(90deg,transparent 0 17px,#ddc58b26 17px 18px),#f6efd9}
main{width:min(calc(100% - 52px),990px);margin:20px auto}
header,.brand,.best,.strip,.console,.buttons,#move{display:flex;align-items:center}
header{justify-content:space-between;margin:0 0 16px}
.brand{gap:12px}.brand .mark{width:48px;object-fit:contain;transform:rotate(-9deg)}h1,h2,.action,.readout strong,.strip{font-family:Toast,"Hiragino Sans","Yu Gothic",sans-serif;font-weight:800}
h1{font-size:clamp(25px,3.5vw,44px);line-height:1.25;letter-spacing:-.065em;margin:0}
.best{align-items:baseline;gap:6px;font-weight:bold}.best strong,.score b{font-family:ui-monospace,Menlo,monospace;font-weight:900;font-variant-numeric:tabular-nums}.best strong{font-size:23px}.best small{font-size:12px}
.machine{border:3px solid var(--ink);background:var(--cream);box-shadow:0 5px 0 #957559;position:relative}
.strip{background:#46372f;color:#fff2d9;padding:0 16px;min-height:34px;gap:12px;font-size:13px;letter-spacing:.08em}
.steps{display:flex;gap:4px}.steps i{width:10px;height:6px;background:#857667}.steps i.on{background:#ffcb68}
#pause{margin-left:auto;align-self:stretch;font-size:15px;min-width:44px;color:white;background:none;border:0}.stage{position:relative;background:#d1ddc5}#scene{width:100%;height:clamp(256px,min(45vw,57svh),490px);display:block;image-rendering:auto}
.console{border-top:3px solid var(--ink);justify-content:space-between;gap:14px;padding:18px 20px 20px}
.readout{display:grid;gap:4px}.readout strong{font-size:clamp(15px,2vw,22px);line-height:1.5}.readout span,#keys{font-size:13px;color:#665348}.buttons,#move{gap:8px}button{font:inherit;font-weight:700;color:var(--ink);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.buttons button,#resume{border:2px solid var(--ink);background:#ffedc3;min-height:46px;min-width:46px;padding:0 12px;box-shadow:0 3px 0 var(--ink)}
.buttons .action,#resume{color:#fff7df;background:var(--red);padding:0 22px;min-width:140px}.buttons button:active,.buttons button.held,#resume:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}button:focus-visible{outline:3px solid #16786e;outline-offset:3px}
#keys{margin:16px 0 0;text-align:right}
#result{position:absolute;left:5%;top:7%;pointer-events:none}.ticket{background:#fff9df;border:2px solid var(--ink);padding:14px 20px 17px;box-shadow:4px 4px 0 #75554277;min-width:180px;transform:rotate(-2deg)}.ticket h2{color:var(--red);font-size:clamp(18px,2.4vw,27px);margin:0}.score{font-size:14px}.score b{font-size:32px}.ticket dl{margin:5px 0 0;border-top:1px dashed #92775c;padding-top:6px}.ticket dl div{display:flex;justify-content:space-between;gap:14px;font-size:13px;line-height:1.7}.ticket dd{margin:0;font-weight:bold}
#veil{position:absolute;inset:0;display:grid;place-items:center;background:#46372f70}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden],#move[hidden],#veil[hidden]{display:none}
@media(max-width:650px){main{width:calc(100% - 24px);margin:12px auto}header{margin-bottom:12px}.brand{gap:7px}.brand .mark{width:40px}.best{gap:3px}.best small{font-size:11px}.best strong{font-size:20px}.strip{padding:0 10px;min-height:32px}#scene{height:min(52svh,450px)}.console{padding:12px;flex-wrap:wrap;gap:12px}.buttons{width:100%}.buttons .action{flex:1}.readout strong{font-size:17px}.readout span{font-size:12px}.ticket{min-width:145px;padding:8px 12px}.score b{font-size:25px}#keys{text-align:center;font-size:11px;margin-top:12px}}
@media(pointer:coarse){#keys{display:none}}
@media(max-height:480px) and (orientation:landscape){main{width:min(92%,800px);margin:6px auto}header{margin-bottom:5px}h1{font-size:22px}.brand .mark{width:30px}.strip{min-height:24px}#scene{height:48svh}.console{padding:6px 12px}#keys{display:none}}

#flight-hud{color:#ffe49d;font-size:12px;letter-spacing:0}
#flight-hud:not([hidden]){margin-left:auto}
#flight-hud:not([hidden]) + #pause{margin-left:0}
.ticket dl div[hidden]{display:none}
@media(max-width:650px){.strip{gap:7px}#flight-hud{font-size:11px}}
#places{display:flex;gap:3px;margin-bottom:8px}
#places button{border:1px solid #b9a98b;background:#f8efd9;padding:7px 16px;min-height:36px;font-size:14px}
#places button[aria-pressed=true]{background:#544236;border-color:#544236;color:#fff4d9}
#places button:disabled{cursor:default}
#bake-guide,#radar{position:absolute;top:10px;left:12px;pointer-events:none}
#bake-guide{background:#fff8e8f2;padding:5px 9px;border:1px solid #957c60;font-size:12px}
#bake-guide div{display:flex;align-items:center;gap:6px;height:19px}
#bake-guide b{min-width:2.3em;font-size:11px}
.zones{display:flex;gap:2px}.zones i{width:11px;height:10px;border:1px solid #8e7355}
#radar{left:7%;right:7%;height:15px;border-bottom:2px solid #665344;background:#fff9e3b8}
#radar span{position:absolute;bottom:0;transform:translateX(-50%)}
.radar-plate{height:6px;border:2px solid #346e73;border-top:0;border-radius:0 0 14px 14px;background:#d4e6d5}
.radar-bread{width:8px;height:11px;background:#9a4726;clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}
.buttons{flex-shrink:0}#retry,#flip{white-space:nowrap}
@media(max-width:650px){#places button{flex:1;padding:4px 2px}.buttons{gap:5px}#move{gap:4px}.buttons .action{min-width:0;padding:0 10px}.buttons button{font-size:14px;padding:0 8px}.readout{min-height:44px}#scene{height:min(46svh,420px)}}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px}.toolbar{margin-bottom:8px}.toolbar #places{margin:0;flex:1;min-width:0}#sound,#music-toggle{align-self:stretch;min-width:52px;white-space:nowrap;border:1px solid #ae9879;background:#fffaeb;font-size:13px}#pause{font-size:12px;white-space:nowrap}#bake-guide b{min-width:4em}
#boost{padding:0 8px}.buttons button:disabled{opacity:.65}
.zones{gap:0}.zones i{width:7px;height:9px;border:0}
@media(max-width:650px){#boost{font-size:12px;padding:0 4px}.buttons .action{padding:0 5px}}

.radar-butter{width:11px;height:7px;background:#ffd35b;border:1px solid #947028}

#scene{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
#scene:active{cursor:grabbing}
#scene:focus-visible{outline:3px solid #16786e;outline-offset:-3px}
.buttons[hidden]{display:none}
@media(max-width:650px) and (orientation:portrait){#scene{height:clamp(240px,58svh,560px)}}

/* Keep one-finger movement inside the game, including drags started in its margins. */
html,body{overscroll-behavior:none}
html,body{height:100%;overflow:hidden;touch-action:pinch-zoom}
body{
  position:fixed;inset:0;height:100%;height:100dvh;min-height:0;
  padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
          max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
main{
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  height:100%;max-height:900px;min-height:0;width:min(100%,990px);margin:0 auto;
}
.machine{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
.stage{min-height:0}
#scene{position:absolute;inset:0;height:100%}
#keys:empty{display:none}
.sr{margin:0}
@media (min-width:651px) and (pointer:fine){main{max-height:780px}}
@media (max-height:580px) and (orientation:portrait){
  header,.toolbar{margin-bottom:4px}
  .console{padding:6px 9px;gap:6px}
  .readout{min-height:0}
  #result{top:5px}
  .ticket{transform:none;padding:5px 10px}
  .ticket dl div{line-height:1.35}
}
@media (max-height:480px) and (orientation:landscape){
  main{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto minmax(0,1fr)}
  header,.toolbar{margin:0 0 4px}
  header{margin-right:12px}
  h1{font-size:19px}
  .best small{display:none}
  .machine{grid-column:1/-1}
  .console{flex-wrap:nowrap;gap:8px;padding:4px 8px}
  .readout{min-width:0;min-height:0}
  .readout strong{font-size:15px}
  .readout span{font-size:11px}
  .buttons{width:auto}
  .buttons button{min-height:38px}
  #result{top:4px;left:3%}
  .ticket{transform:none;padding:4px 9px;min-width:0}
  .ticket h2,.ticket .score{display:inline-block}
  .ticket h2{font-size:17px;margin-right:10px}
  .score b{font-size:20px}
  .ticket dl{margin-top:2px;padding-top:2px}
  .ticket dl div{font-size:12px;line-height:1.23}
}

/* Feedback sits across from the slice so the player can keep steering. */
.air-reward,.landing-reward{
  position:absolute;pointer-events:none;z-index:1;
  color:#40291c;font:800 clamp(16px,3vw,28px)/1 Toast,"Hiragino Sans",sans-serif;
  transform-origin:left center;
}
.air-reward{
  top:clamp(32px,12%,72px);left:6%;
  display:flex;align-items:baseline;gap:.22em;
  border-bottom:4px solid #ce6927;padding:0 .22em .07em;
  transform:rotate(-6deg);animation:toast-trick .64s both;
  text-shadow:1px 2px #fff3c4,-1px -1px #fff3c4;
}
.air-reward[hidden],.landing-reward[hidden]{display:none}
.air-reward.opposite{left:auto;right:6%}
.air-reward b,.landing-reward b{
  font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  font-weight:950;letter-spacing:-.065em;font-variant-numeric:tabular-nums;
}
.air-reward b{font-size:2.45em}
.air-reward.multiple{border-color:#a23c1e;color:#8b321e}
@keyframes toast-trick{
  0%{opacity:.65;transform:translateY(7px) rotate(-12deg) scale(.75)}
  18%{opacity:1;transform:translateY(0) rotate(-5deg) scale(1.12)}
  32%,80%{opacity:1;transform:rotate(-6deg)}
  100%{opacity:0;transform:translateY(-8px) rotate(-6deg)}
}
.landing-reward{
  top:18%;left:6%;color:#fff2c5;background:#553626;
  border-left:5px solid #efba52;padding:.38em .68em;box-shadow:3px 3px 0 #a78158;
  animation:toast-land .24s ease-out both;transform:rotate(-3deg);
}
.landing-reward span{font-size:.75em}
.landing-reward b{font-size:2.1em;color:#ffdc85}
.landing-reward[data-tier="2"]{border-color:#973a20;background:#ffe7a1;color:#5e2c19}
.landing-reward[data-tier="2"] b{color:#863719}
@keyframes toast-land{from{transform:translateY(8px) rotate(-7deg) scale(.82)}}
@media (prefers-reduced-motion:reduce){
  .air-reward,.landing-reward{animation:none;transform:none}
}
#result{inset:0;display:grid;place-items:center}
#result[hidden]{display:none}
#card-preview:not(:empty){
  position:absolute;inset:0;display:grid;place-items:center;background:#e8dcc5;
  background-image:repeating-linear-gradient(90deg,transparent 0 18px,#af876412 18px 19px);
}
#card-preview canvas{display:block;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain}
#card-preview:not(:empty) + .ticket{
  position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden
}
.ticket #verdict{font-size:.85em}.ticket>small{font-weight:bold}
#share-status{position:absolute;z-index:2;bottom:8%;left:50%;transform:translateX(-50%);margin:0;padding:8px 14px;background:#47392e;color:#fff8e3;pointer-events:none;text-align:center;font-size:13px}
#share-status:empty{display:none}
#share-result{background:#ffdc89;border-color:#75532b}
@media(max-width:650px){
  .buttons{gap:4px}
  #share-result,#retry{padding:0 7px;white-space:nowrap}
}
@media(max-height:480px) and (orientation:landscape){
  .landing-reward{font-size:16px;top:12%}
  #result{display:block}
  #card-preview{display:none!important}
  #result .ticket{position:absolute;left:3%;top:2px;clip-path:none;width:auto;height:auto;overflow:visible}
  #result .ticket>small,#result .ticket>#verdict{display:none}
  .console:has(.buttons:not([hidden])) .readout{display:none}
  .console:has(.buttons:not([hidden])){justify-content:flex-end}
}
#share-sheet{
  width:min(92vw,460px);max-height:94dvh;padding:0;overflow:auto;
  color:var(--ink);background:var(--cream);border:3px solid var(--ink);
}
#share-sheet::backdrop{background:#30251fc7}
.share-inner{display:grid;padding:14px;gap:8px}
.share-inner h2{margin:0;font-size:20px}
#share-image{width:100%;height:auto;max-height:53dvh;object-fit:contain;touch-action:auto;-webkit-touch-callout:default}
#share-text,#sheet-note{margin:0;line-height:1.4}
#share-text{user-select:text;font-size:15px;font-weight:bold}
#sheet-note{font-size:12px}
.share-actions{display:flex;gap:6px;flex-wrap:wrap}
.share-actions button{min-height:42px;padding:0 9px;border:2px solid var(--ink);background:#fff4d9}
.share-actions #save-card{background:#ffdc89}
.share-actions #close-share{margin-left:auto}
@media(max-height:480px) and (orientation:landscape){
  #share-sheet{width:min(96vw,660px)}
  .share-inner{grid-template-columns:minmax(0,40%) minmax(0,1fr);padding:9px}
  #share-image{grid-column:1;grid-row:1/5;align-self:center;max-height:80dvh}
  .share-inner h2,#share-text,#sheet-note,.share-actions{grid-column:2}
}
.landing-reward{
  left:auto;right:clamp(6%,calc(100% - var(--plate-x) - 11%),35%);
  top:auto;bottom:34%;font-size:clamp(20px,4.5vw,30px);transform-origin:70% 100%;
}
.landing-reward[data-tier="2"]{font-size:clamp(25px,5.3vw,34px);border-width:7px}
.buttons #share-result{color:#fff7df;background:#a73c2c;border-color:#5c3527}
.buttons:has(#share-result) .action{background:#fff0c9;color:var(--ink)}
@media(max-height:480px) and (orientation:landscape){
  .landing-reward,.landing-reward[data-tier="2"]{font-size:17px;bottom:36%}
}

@media(max-width:370px),(max-height:480px) and (orientation:landscape){.toolbar{gap:3px}#places button,#music-toggle,#sound{font-size:12px;padding:3px 2px}#music-toggle,#sound{min-width:45px}}
#post-preview{white-space:pre-line;overflow-wrap:anywhere;line-height:1.45}
#share-text{font-size:14px}
#challenge-link{font-size:13px;color:#266766;text-underline-offset:2px}
.share-actions #post-x{
  display:inline-flex;align-items:center;padding:0 12px;background:#3d3029;color:#fff5db;
  border:2px solid var(--ink);font-weight:700;text-decoration:none;min-height:42px
}
@media(max-height:480px) and (orientation:landscape){
  #post-preview{grid-column:2}
  #share-image{grid-row:1/6}
}
#share-sheet{touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
@media(orientation:portrait){#share-image{max-height:clamp(80px,calc(90dvh - 320px),440px)}}