/* layout: top-down maze canvas fitted into one rect; portrait = header / maze / panel stacked, landscape = maze left + column right */
:root{
  --ink:#121014; --panel:#1c1420; --line:#2a2530; --fg:#f3eef1; --smoke:#9b9199;
  --brand:#ff2e88; --hi:#ffe600; --sem:#00d4ff;
  --f-led:"DotGothic16", ui-monospace, monospace;
  --f-head:"Unbounded", system-ui, sans-serif;
  --f-body:"IBM Plex Mono", ui-monospace, monospace;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);overflow:hidden;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#probe{position:fixed;visibility:hidden;pointer-events:none;
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)}
#game{position:fixed;image-rendering:pixelated;image-rendering:crisp-edges;outline:3px solid var(--line)}
#touch{position:fixed;inset:0;touch-action:none}
#stick{position:fixed;width:112px;height:112px;margin:-56px 0 0 -56px;border:3px solid var(--fg);border-radius:50%;opacity:.55;pointer-events:none}
#arrow{position:fixed;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--fg);border-radius:50%}
.hud{position:fixed;pointer-events:none;display:grid;gap:6px}
#head{align-content:end}
#brand{font-family:var(--f-led);font-size:15px;letter-spacing:.04em}
#brand b{color:var(--brand);font-weight:400}
#title{margin:0;font-family:var(--f-head);font-weight:900;font-size:clamp(18px,4.6vw,26px);letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
#panel{align-content:start}
#clock{font-family:var(--f-led);font-size:34px;line-height:1;font-variant-numeric:tabular-nums;color:var(--hi)}
#best{font-family:var(--f-led);font-size:14px;color:var(--smoke);min-height:1em}
#tip{font-size:14px;line-height:1.45;max-width:30ch;transition:opacity .4s}
#tip.off{opacity:0}
body.portrait #panel{grid-template-columns:auto 1fr;align-items:baseline;column-gap:14px}
body.portrait #tip{grid-column:1 / -1;max-width:none}
#win,#intro{position:fixed;inset:0;display:grid;place-items:center;background:rgba(18,16,20,.6);
  padding:calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) max(16px, env(safe-area-inset-left, 0px))}
.card{box-sizing:border-box;min-width:0;width:min(360px,100%);background:var(--panel);border:3px solid var(--fg);box-shadow:6px 6px 0 var(--brand);padding:22px 20px 18px;display:grid;gap:12px;text-align:center}
.card h2{margin:0;font-family:var(--f-head);font-weight:900;font-size:26px;letter-spacing:-.02em;text-wrap:balance}
.card .time{font-family:var(--f-led);font-size:18px;color:var(--hi);font-variant-numeric:tabular-nums}
.card .time small{display:block;font-size:13px;color:var(--smoke)}
.card .msg{margin:4px 0 0;font-size:15px;line-height:1.45}
.card .msg strong{display:block;font-size:17px;color:var(--fg)}
.cta{display:block;background:var(--brand);color:var(--ink);font-family:var(--f-head);font-weight:800;font-size:17px;text-decoration:none;padding:14px 12px;border:3px solid var(--fg)}
.cta:active{transform:translate(2px,2px)}
.fine{font-size:12px;color:var(--smoke)}
.again{background:none;border:0;color:var(--fg);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:6px;cursor:pointer}
.cta:focus-visible,.again:focus-visible{outline:3px solid var(--hi);outline-offset:3px}
.card{max-height:calc(100dvh - 32px);overflow:auto}
.share{display:grid;gap:8px;text-align:left;margin:2px 0 0}
.share label{font-size:13px;color:var(--smoke)}
.handle{display:flex;align-items:center;border:3px solid var(--fg);background:var(--ink)}
.handle span{padding:0 4px 0 10px;font-family:var(--f-led);font-size:18px;color:var(--brand)}
.handle input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:600 17px var(--f-body);padding:11px 10px 11px 0;outline:none;user-select:text;-webkit-user-select:text}
.handle:focus-within{outline:3px solid var(--hi);outline-offset:2px}
.dl{background:var(--fg);color:var(--ink);border:3px solid var(--fg);font-family:var(--f-head);font-weight:800;font-size:15px;padding:11px 10px;cursor:pointer}
.dl:disabled{opacity:.4;cursor:default}
.dl:focus-visible{outline:3px solid var(--hi);outline-offset:3px}
#dl-msg{min-height:1em}
#dl-preview{width:100%;border:2px solid var(--line)}
.card .eyebrow{font-family:var(--f-led);font-size:14px;color:var(--brand);letter-spacing:.06em}
#intro-art{width:180px;height:84px;margin:0 auto;image-rendering:pixelated;image-rendering:crisp-edges}
.go{cursor:pointer;width:100%}
.go:disabled{opacity:.4;cursor:default}
.card hr{border:0;border-top:2px dashed var(--line);margin:4px 0;width:100%}

/* 可操作的品牌入口与小屏控制，保留像素风格。 */
*{box-sizing:border-box}body{margin:0}.hud a,.hud button{pointer-events:auto}
#brand{color:var(--fg);text-decoration:none;width:max-content;min-height:24px}
.brand-link{color:var(--brand);text-underline-offset:4px}
#controls{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1;align-items:center;pointer-events:auto}
#controls button,#controls a{min-height:44px;padding:10px 12px;border:2px solid var(--line);background:var(--panel);color:var(--fg);font:500 12px var(--f-body);cursor:pointer;text-decoration:none}
#controls a{color:var(--brand)}
#controls :focus-visible,.brand-link:focus-visible,#brand:focus-visible{outline:3px solid var(--hi);outline-offset:3px}
#pause-dialog{position:fixed;inset:0;display:grid;place-items:center;background:#121014cc;padding:16px;z-index:12}
#intro,#win{z-index:10;overflow:auto}.card{touch-action:pan-y;overscroll-behavior:contain;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px)}
#intro-form{gap:10px}#intro-h{font-size:clamp(20px,5vw,26px)}#load-status{margin:0;min-height:16px}.again{min-height:40px}
.fallback{position:fixed;inset:0;background:var(--ink);padding:24px;display:grid;align-content:center;justify-items:center;gap:16px;z-index:30;text-align:center}.fallback a{color:var(--brand)}
.card{animation:card-in .18s ease-out}.cta,.dl,#controls button{transition:background-color .15s,transform .15s}.cta:hover,.dl:hover{filter:brightness(1.08)}
@keyframes card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:600px){#intro-art{width:120px;height:56px}.card{padding:16px;gap:8px}.card h2{font-size:21px}.card .msg{font-size:13px}.handle input{padding-top:8px;padding-bottom:8px}.cta{padding:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#intro .card,#win .card,#pause-dialog .card{max-height:calc(var(--visible-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px)}