/* Doughnut Run UI: overlays on top of the full-screen 3D canvas. Same fonts and colours as the other Doughnut.com games. */
@font-face{font-family:Space;src:url('/escape/assets/fonts/space-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Space;src:url('/escape/assets/fonts/space-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Mono;src:url('/escape/assets/fonts/mono-regular.ttf') format('truetype');font-display:swap}
:root{--pink:#ffb1c1;--hot:#ff568b;--amber:#feb300;--green:#88e7c0;--text:#f8f2ed;--muted:#b9adb2}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#0f141a;color:var(--text);font-family:Space,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#run-canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
kbd{font:10px Mono,monospace;padding:2px 6px;border-radius:4px;border:1px solid #ffffff33;background:#ffffff12}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 55%,#0008 100%);transition:box-shadow .3s}
body.danger .vignette{box-shadow:inset 0 0 120px #ff2a4a88;animation:pulse .6s ease-in-out infinite alternate}
body.coffee .vignette{box-shadow:inset 0 0 140px #ff9bb3aa}
@keyframes pulse{from{opacity:.55}to{opacity:1}}

/* menu */
.menu{position:fixed;inset:0;display:none;flex-direction:column;background:linear-gradient(90deg,#0f141af2 0%,#0f141ab8 38%,transparent 70%)}
body[data-mode=menu] .menu{display:flex}
.menu-top{display:flex;justify-content:space-between;align-items:center;padding:clamp(12px,2.6vh,24px) 4.5%}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:1px;text-decoration:none;color:var(--text);font-size:14px}
.ring{width:18px;height:18px;border-radius:50%;border:5px solid var(--pink)}
.menu-top nav{display:flex;gap:4px}.menu-top nav a,.menu-top nav button{font-size:13px;font-weight:700;padding:8px 12px;border-radius:8px;text-decoration:none;color:#e3d8dc}
.menu-top nav a:hover,.menu-top nav button:hover{background:#ffffff12}
.menu-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 5.5% clamp(16px,5vh,60px);max-width:720px}
.kicker{font:11px Mono,monospace;letter-spacing:2.4px;color:var(--pink);margin:0 0 clamp(6px,1.6vh,16px);display:flex;gap:10px;align-items:center}
.kicker i{width:5px;height:5px;border-radius:50%;background:var(--amber);display:inline-block}
.logo{margin:0;font-size:clamp(46px,min(9vw,14vh),150px);line-height:.88;letter-spacing:-.055em}
.logo span{display:block}.logo em{display:block;font-style:normal;color:var(--pink);text-shadow:0 0 44px #ff568b66}
.sub{font:13px Mono,monospace;letter-spacing:3.5px;text-transform:uppercase;color:#d8c7cc;margin:clamp(8px,1.6vh,16px) 0 0}
.story{font-size:clamp(15px,1.3vw,18px);color:#d9cfd3;max-width:30em;margin:clamp(10px,2vh,20px) 0 clamp(14px,3vh,28px)}
.menu-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.go,.ghost{display:inline-flex;align-items:center;gap:10px;font-weight:700;border-radius:14px;padding:16px 28px;font-size:18px;transition:transform .15s,box-shadow .15s}
.go{background:linear-gradient(135deg,#ff9bb3,#ff568b);color:#2d0818;box-shadow:0 12px 34px #ff568b55;border:1px solid #ffb1c1aa}
.go:hover,.go:focus-visible{transform:translateY(-2px);box-shadow:0 16px 40px #ff568b77;outline:none}
.ghost{background:#0f141a99;border:1px solid #ffffff33;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ghost:hover,.ghost:focus-visible{background:#ffffff1a;outline:none}
.best{font:12px Mono,monospace;letter-spacing:1px;color:var(--amber);margin:18px 0 0}
.keys{font:11px Mono,monospace;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:14px 0 0}
@media (max-height:520px){.story,.keys{display:none}.logo{font-size:clamp(40px,12vh,80px)}}
@media (hover:none){.keys{display:none}}

/* HUD */
.hud{position:fixed;inset:0 0 auto 0;display:none;justify-content:space-between;align-items:flex-start;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));pointer-events:none}
body[data-mode=run] .hud,body[data-mode=paused] .hud{display:flex}
.hud-left,.hud-right{display:flex;gap:10px;align-items:flex-start}
.stat{background:#0f141acc;border:1px solid #ffffff22;border-radius:14px;padding:8px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:92px}
.stat small{display:block;font:10px Mono,monospace;letter-spacing:1.5px;color:var(--pink)}
.stat b{font-size:clamp(18px,2.4vw,26px);letter-spacing:-.02em}
.stat.sprinkle b{color:var(--amber)}
.pause{pointer-events:auto;width:48px;height:48px;border-radius:14px;background:#0f141acc;border:1px solid #ffffff22;font-size:18px;font-weight:700}
.banner{position:fixed;left:0;right:0;top:22vh;text-align:center;margin:0;font:700 clamp(22px,4vw,44px)/1 Space,sans-serif;letter-spacing:-.02em;opacity:0;pointer-events:none;text-shadow:0 6px 24px #000c}
.banner.show{animation:banner 2.2s ease forwards}
.banner.warn{color:#ff6b7f;top:30vh}.banner.power{color:var(--pink);top:30vh}
@keyframes banner{0%{opacity:0;transform:translateY(16px) scale(.96)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}

/* panels */
.panel{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:radial-gradient(ellipse at 50% 50%,#0f141ab0,#0f141aee 70%);padding:24px}
body[data-mode=paused] .paused-panel,body[data-mode=over] .over-panel{display:flex}
.panel h2{font-size:clamp(44px,8vw,96px);letter-spacing:-.05em;margin:0;line-height:.9}
.over-panel h2{color:var(--pink)}
.results{display:flex;gap:12px;margin:10px 0 0;flex-wrap:wrap;justify-content:center}
.results div{background:#161b22;border:1px solid #ffffff1c;border-radius:16px;padding:14px 22px;min-width:130px}
.results small{display:block;font:10px Mono,monospace;letter-spacing:1.5px;color:var(--pink)}
.results b{font-size:clamp(26px,3.4vw,38px)}
.panel .menu-actions{justify-content:center;margin-top:8px}

/* help */
.help{max-width:520px;width:calc(100% - 32px);background:#161b22;color:var(--text);border:1px solid #ffffff22;border-radius:20px;padding:26px 28px}
.help::backdrop{background:#0009;backdrop-filter:blur(4px)}
.help h2{margin:0 0 10px;font-size:30px;letter-spacing:-.03em}.help ul{padding-left:20px;line-height:1.55;color:#d9cfd3}.help li{margin:6px 0}
.post{font-size:14px;color:#d9cfd3;margin:4px 0 0;min-height:1.2em}.post a,.help a{color:var(--pink)}
.sponsors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;max-width:640px}
.sponsors small{width:100%;font:10px Mono,monospace;letter-spacing:1.5px;color:var(--muted)}
.sponsors a{background:#161b22;border:1px solid #ffffff22;border-radius:12px;padding:9px 14px;color:var(--text);text-decoration:none;font-weight:700;font-size:14px}
.sponsors a span{color:var(--pink);font-weight:400;font-size:12px;margin-left:6px}
.sponsors a:hover{border-color:#ffb1c199}
.muted{color:var(--muted)}
.scores-list{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:6px;max-height:50vh;overflow:auto}
.scores-list li{display:grid;grid-template-columns:30px 1fr auto auto;gap:12px;align-items:baseline;background:#0f141a;border-radius:10px;padding:8px 12px}
.scores-list .rk{font:700 13px Mono,monospace;color:var(--amber)}.scores-list .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scores-list .sc{font-weight:700;color:var(--pink)}.scores-list .dt{font:11px Mono,monospace;color:var(--muted)}
.scores-list li.muted{display:block}
body[data-mode=over] .banner,body[data-mode=menu] .banner{display:none}
/* phones held upright: menu text at the bottom so Sprinkles stays visible above it */
@media (max-aspect-ratio:3/4){
 .menu{background:linear-gradient(0deg,#0f141af5 0%,#0f141ad0 45%,transparent 72%)}
 .menu-body{justify-content:flex-end;padding-bottom:max(28px,env(safe-area-inset-bottom))}
 .logo{font-size:clamp(46px,15vw,72px)}
}

/* advert card: a tap on a sign pauses the run and shows who it is */
body[data-mode=adcard] .ad-panel{display:flex}
body[data-mode=adcard] .hud,body[data-mode=resume] .hud{display:flex}
.ad-card{width:min(460px,100%);background:#161b22f2;border:1px solid #ffb1c155;border-radius:22px;padding:22px 22px 16px;text-align:left;box-shadow:0 30px 80px #000a}
.ad-card>small{font:10px Mono,monospace;letter-spacing:1.8px;color:var(--amber)}
.ad-card-head{display:flex;gap:14px;align-items:center;margin:10px 0 16px}
.ad-card-head img{width:68px;height:68px;border-radius:14px;background:#fff;object-fit:cover;flex:0 0 auto}
.ad-card-head div{display:flex;flex-direction:column;min-width:0}
.ad-card-head b{font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.ad-card-head span{color:#d9cfd3;font-size:15px}
.ad-card .menu-actions{justify-content:flex-start;margin:0;flex-wrap:wrap}
.ad-card-note{margin:12px 0 0;font-size:14px;color:var(--green)}
.ad-card-foot{margin:14px 0 0;font:11px Mono,monospace;color:var(--muted)}
.ad-card-foot a{color:var(--pink)}
.countdown{position:fixed;inset:0;display:none;align-items:center;justify-content:center;margin:0;font:700 clamp(80px,16vw,180px)/1 Space,sans-serif;color:#fff;text-shadow:0 10px 40px #000c;pointer-events:none}
body[data-mode=resume] .countdown{display:flex}