:root{color-scheme:dark;--ink:#f1ecd9;--muted:#b4c7b8;--forest:#102b25;--leaf:#d5eb93;--orange:#f5ac64;--board-width:480px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Nur die Namenseingabe braucht die normale Textauswahl und das Bearbeitungsmenü. */
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b1916;color:var(--ink);overscroll-behavior:none}
body{height:100dvh;background:radial-gradient(ellipse at 50% 32%,#254538 0,#10271f 43%,#0a1714 85%);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-tap-highlight-color:transparent}
button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.58}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--orange);outline-offset:3px}button:active{transform:translateY(1px)}
#shell{height:100%;display:flex;flex-direction:column;align-items:center;gap:0;padding:5px 0 0}
#room{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#arena{position:relative;width:480px;height:800px;isolation:isolate;overflow:hidden;box-shadow:0 14px 80px #0008,0 0 0 1px #91b69c30;border-radius:14px;background:#244132 url('assets/waldboden.png') center/100% auto}
#trail{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:-4px!important}
#hud{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr .8fr 1fr;align-items:center;gap:8px;padding:10px 14px 12px;background:linear-gradient(#0b251ff7,#0b251fe6 87%,#0b251fc4);pointer-events:none;font-variant-numeric:tabular-nums;box-shadow:0 3px 22px #10201745}
.metric{min-width:0;display:flex;flex-direction:column;gap:3px}.metric>span,.metric>small{font-size:10px;color:#b9c9b9;letter-spacing:.3px}.metric>strong{font-size:23px;line-height:1.1}.metric>small{font-size:9px;opacity:.78}.right{text-align:right;align-items:flex-end}.metric>.brand{font-size:13px;white-space:nowrap;font-weight:700}.brand i{color:var(--orange);font-style:normal}
.clock{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}.clock>strong{font-size:31px;line-height:1;letter-spacing:-1px;font-weight:750}.clock>strong>span{font-size:12px;margin-left:3px;letter-spacing:0;font-weight:400;color:var(--muted)}.clock>span{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--leaf)}.clock.urgent{color:#ffb09b}
.text-button{background:none;border:0;color:var(--muted);font-size:11px;padding:5px 0 0;pointer-events:auto;min-height:26px}.text-button:hover{color:#fff}
#progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#61796855}#progress-fill{height:100%;width:0;background:var(--leaf)}
#notice{position:absolute;left:50%;top:29%;transform:translateX(-50%);white-space:nowrap;padding:9px 16px;border-radius:30px;background:#173e33ef;color:#edfac6;font-size:17px;font-weight:750;box-shadow:0 3px 15px #0003;pointer-events:none}#notice[data-kind=sturz]{background:#692e24ef;color:#ffe5cd}#notice[data-kind=runde]{font-size:21px;letter-spacing:1px}
#jump-state{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);color:#f8f5d9;text-shadow:0 1px 5px #143628;letter-spacing:2px;text-transform:uppercase;font-size:10px;font-weight:800;pointer-events:none}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,#0a251aeb,#173d2add 53%,#0c221def);display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.panel{width:100%;max-width:410px;padding:38px 25px 24px;text-align:center;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:3.4px;font-weight:750;color:var(--leaf);margin:0 0 12px}h1,h2,p{margin:0}h1{font-size:clamp(31px,8.3vw,45px);letter-spacing:-1.8px;line-height:1.05;font-weight:780}h1 span{font-size:.68em;color:var(--orange);font-weight:450}h2{font-size:30px;letter-spacing:-1px;font-weight:750}.subtitle{margin-top:9px;color:var(--muted);font-size:15px}
#hero{display:block;width:150px;height:121px;margin:14px auto 8px;filter:drop-shadow(0 9px 9px #0006)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 0 20px}.legend>div{display:flex;align-items:center;flex-direction:column;gap:5px}.legend canvas{width:70px;height:42px}.legend strong{font-size:12px;font-weight:650}.legend span{font-size:9px;color:var(--muted)}
.primary,.secondary{width:100%;min-height:46px;border-radius:7px;padding:11px 16px;font-size:14px;font-weight:750;transition:background .15s}
.primary{border:1px solid #e0efac;background:var(--leaf);color:#183725;box-shadow:0 4px 0 #08181035}.primary:hover{background:#e6f4b8}.secondary{background:#133b2c88;border:1px solid #9ab69c55;color:var(--ink);margin-top:9px}.secondary:hover{background:#2a513d}kbd{font:inherit;font-size:10px;border:1px solid #b7c7b859;border-radius:3px;padding:1px 4px;margin-left:4px;color:var(--muted)}
.instructions{font-size:11px;line-height:1.65;color:#d3dfc9;margin-top:16px}.instructions b{padding:0 5px;font-weight:400;color:#94ae96}.rule{font-size:10px;line-height:1.65;margin-top:10px;color:#9db39f}.keyboard-help{display:block}.touch-help{display:none}
#load-status:empty{display:none}#load-status{font-size:11px;color:var(--orange);margin:8px 0}
.compact{padding:30px;display:flex;flex-direction:column;gap:15px}.compact>p:not(.eyebrow){font-size:13px;line-height:1.6;color:var(--muted)}.compact .eyebrow{margin:0}.compact .secondary{margin:0}.big-score{font-size:54px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1.1;color:var(--leaf)}#result{margin-top:-10px}#score-form{margin:8px 0 0;text-align:left}#score-form label{font-size:12px;color:var(--muted)}.name-row{display:flex;gap:10px;margin-top:9px}.name-row input{border:1px solid #9fbd9355;background:#0b271e;color:var(--ink);font-size:22px;font-weight:750;letter-spacing:5px;text-align:center;text-transform:uppercase;width:105px;min-width:0;border-radius:7px;padding:6px;user-select:text}.name-row button{flex:1}#save-feedback:empty{display:none}#save-feedback{font-size:12px!important}
.list-panel{height:100%;max-height:700px;display:flex;flex-direction:column;gap:14px;padding-top:48px}.list-panel .eyebrow{margin:0}#list-status{font-size:11px;line-height:1.6;color:var(--muted)}#scores{list-style:none;padding:0;margin:0;flex:1;min-height:50px;overflow:auto;text-align:left;font-variant-numeric:tabular-nums}#scores li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:6px;padding:11px 4px;border-bottom:1px solid #9db39f22;font-size:14px}#scores .rank{font-size:11px;color:var(--muted)}#scores .score{text-align:right;color:var(--leaf);font-weight:700}#scores small{font-weight:400;font-size:9px;color:var(--muted);display:block;margin-top:2px}#scores .empty{display:block;text-align:center;font-size:13px;line-height:1.7;padding:30px 12px;color:var(--muted)}
#arena:not([data-screen=laeuft]) #hud{visibility:hidden}#arena[data-screen=titel] #notice,#arena[data-screen=aus] #notice{display:none}
#footer{display:flex;justify-content:space-between;align-items:center;gap:10px;width:var(--board-width);max-width:100%;min-height:28px;padding:5px 8px;font-size:10px;color:#acb9a9}.version{font-size:9px;color:#799383;white-space:nowrap}
#zurueck{position:fixed;z-index:20;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));color:#c6d5bf;background:#102b25dc;border:1px solid #9cb99c40;border-radius:30px;padding:7px 12px;font-size:12px;text-decoration:none;line-height:1.3}
@media(pointer:coarse){.touch-help{display:block}.keyboard-help{display:none}kbd{display:none}.text-button{min-height:30px;padding-top:3px}#hud{padding-bottom:8px}}
@media(max-width:500px){#shell{padding-top:0}#arena{border-radius:0}#hud{padding-left:12px;padding-right:12px}#zurueck{padding:6px 11px;font-size:11px}.title-panel{padding-top:40px}#footer{min-height:26px}}
@media(max-height:650px){.title-panel{padding:30px 21px 15px}#hero{width:94px;height:76px;margin:8px auto 0}.legend{padding-bottom:10px}.legend canvas{width:53px;height:32px}.instructions{margin-top:9px}.rule{margin-top:6px}.eyebrow{margin-bottom:8px}.compact{gap:11px;padding:24px}.list-panel{padding:30px 20px 15px}.primary,.secondary{min-height:40px;padding:9px 12px}.metric>.brand{font-size:11px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}