* { margin:0; padding:0; box-sizing:border-box; } :root { --paper:var(--theme-paper); --ink:var(--theme-text); --muted:var(--theme-muted); --line:var(--theme-line-strong); --paper-background:var(--theme-background); } html, body { width:100%; height:100%; overflow:hidden; background:var(--paper); } body { font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:#fff; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:none; } /* Vignette, bloom and colour grade are the composite shader's (render/post-processing.js): no filter on this layer and no blend layer over it, which would add compositor work at the screen's own resolution. */ #c { display:block; width:100%; height:100%; } #hud { position:fixed; inset:0; pointer-events:none; z-index:2; } /* Launch and result cards own their screens. Live telemetry is initialized behind them for an instant handoff, but must not read as stacked debug UI. */ body:not(.running) #quiz, body:not(.running) #wordstats, body:not(.running) #pretzelhud, body:not(.running) #mistakehistory { opacity:0; visibility:hidden; } /* Sticker-arcade HUD. Every card is a solid chunky pill with a heavy ink rim and a hard offset shadow rather than a thin frosted sheet — against a bright, busy street a translucent 1px border simply disappears, and the numbers have to stay readable while the whole frame is moving. */ :root { --rim:rgba(190,222,255,.55); --card:linear-gradient(168deg, rgba(23,42,80,.94), rgba(13,25,52,.92)); --stamp:0 4px 0 rgba(6,12,28,.55), 0 12px 26px rgba(4,10,26,.38), inset 0 2px 0 rgba(255,255,255,.16), inset 0 0 0 2px rgba(9,17,38,.55); } .panel { position:absolute; background:var(--card); border:2px solid var(--rim); border-radius:20px; box-shadow:var(--stamp); } /* Outlined "sticker" numerals — a dark rim in eight directions plus a drop shadow, so a white digit survives on top of a white lane marking. */ .wordstat-num, #pretzelcount, .gameoverstat strong, #noun { paint-order:stroke fill; -webkit-text-stroke:0.5px rgba(9,17,38,.5); } /* ---------------------------------------------------------- word stats -- */ #wordstats { top:16px; left:16px; display:grid; grid-template-columns:repeat(4,84px); gap:6px; padding:11px 13px 10px; text-align:center; } .wordstat { padding:2px 5px 3px; border-left:1px solid rgba(210,224,255,.14); } .wordstat:first-child { border-left:0; } .wordstat-num { display:block; font-size:31px; line-height:1; font-weight:850; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 3px 12px rgba(0,0,0,.55); } .wordstat-label { display:block; margin-top:6px; font-size:8.5px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; color:#a6b6d8; } #currentstreak { color:#ffd45e; transition:color .2s, text-shadow .2s; } #wordstats.hot #currentstreak { color:#ffe89a; text-shadow:0 0 18px rgba(255,196,64,.75); } #mistakecount { color:#ff6b5e; } /* ------------------------------------------------------------- pretzels -- */ #pretzelhud { top:16px; right:16px; display:flex; align-items:center; gap:11px; padding:10px 15px 10px 13px; } #pretzelicon { width:23px; height:23px; flex:0 0 auto; filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)); } #pretzelmeta { display:flex; flex-direction:column; gap:3px; } #pretzelcount { font-size:23px; line-height:1; font-weight:850; font-variant-numeric:tabular-nums; text-shadow:0 2px 9px rgba(0,0,0,.5); } #pretzellabel { font-size:8.5px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; color:#a6b6d8; } /* ------------------------------------------------------- mistake recall -- */ #mistakehistory { top:104px; left:16px; width:264px; padding:11px 13px 12px; } #mistakelist { list-style:none; display:grid; gap:5px; } #mistakelist li { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:20px; padding-top:5px; border-top:1px solid rgba(210,224,255,.11); font-size:12px; color:#eef2ff; } #mistakelist li:first-child { padding-top:0; border-top:0; } .mistake-noun { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; } .mistake-answer { flex:0 0 auto; font-weight:800; letter-spacing:.03em; } .mistake-picked { color:#ff8b86; text-decoration:line-through; opacity:.85; } .mistake-arrow { margin:0 5px; color:#7b88a8; } .mistake-correct { color:#7bf0a8; } #mistakelist .mistake-empty { justify-content:center; color:#7b88a8; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } /* ------------------------------------------------------ the noun sign ---- */ /* Berlin U-Bahn station sign: deep transit blue plate, chunky white noun, BVG-yellow rule underneath. Readable at a glance at full sprint. */ #quiz { position:absolute; top:15px; left:0; right:0; width:min(470px,calc(100vw - 300px)); min-width:260px; margin:0 auto; padding:0; border-radius:9px; overflow:hidden; background:linear-gradient(178deg,#12315e 0%,#0d2143 62%,#0a1a36 100%); border:1px solid rgba(150,190,240,.30); box-shadow:0 16px 40px rgba(4,10,26,.55), 0 2px 0 rgba(255,255,255,.10) inset; transition:box-shadow .25s, border-color .25s; } #quiz.overdrive { border-color:rgba(255,206,92,.62); box-shadow:0 16px 46px rgba(255,150,30,.28), 0 2px 0 rgba(255,255,255,.14) inset; } #noun { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:1px 16px 13px; min-height:58px; } #nounword { display:block; font-size:clamp(34px,3.1vw,45px); line-height:1.16; font-weight:900; letter-spacing:.004em; text-align:center; color:#fff; overflow-wrap:anywhere; text-shadow:0 2px 14px rgba(0,0,0,.5); padding-bottom:2px; } #nountrans { display:block; font-size:clamp(11px,1.05vw,15px); line-height:1.2; font-weight:600; letter-spacing:.02em; text-align:center; color:#bcd2f2; overflow-wrap:anywhere; text-shadow:0 1px 6px rgba(0,0,0,.45); } #nountrans.empty { display:none; } #noun.long-word #nounword { font-size:clamp(30px,2.8vw,39px); } #noun.very-long-word #nounword { font-size:clamp(28px,2.6vw,37px); } /* Compounds get width and lines, rather than tiny type or an ellipsis. */ #quiz.giant-word { width:min(760px,calc(100vw - 120px)); } #quiz.giant-word #nounword { font-size:clamp(26px,2.3vw,34px); line-height:1.15; } /* Learn mode (game/learn.js): what kind of ask this is, above the noun. */ #learnphase { display:block; font-size:10px; font-weight:800; line-height:1.3; letter-spacing:.14em; text-transform:uppercase; color:#ffd23f; } #learnphase[hidden] { display:none; } /* --------------------------------------------------------- feedback ------ */ #answerfeedback { display:flex; align-items:center; gap:10px; width:100%; min-width:0; margin-top:6px; padding:6px 10px; border:2px solid; border-radius:10px; color:#fff; text-align:left; } #answerfeedback[hidden] { display:none; } #answerfeedback.feedback-correct { background:#087538; border-color:#79ffac; box-shadow:0 0 20px #29ff8066; } #answerfeedback.feedback-wrong { background:#b91e28; border-color:#ffaaa7; box-shadow:0 0 20px #ff3e5366; } #answericon { flex:0 0 auto; font-size:32px; line-height:1; font-weight:900; } .answer-copy { min-width:0; font-size:18px; line-height:1.15; font-weight:800; overflow-wrap:anywhere; } #answerstruck { margin-right:.35em; opacity:.75; text-decoration-thickness:2px; } #answerstruck:empty { display:none; } /* A single immediate, saturated pulse around the road. Its clear centre preserves the next noun, gates and hazards as the colour fades away. */ #verdictflash { position:absolute; inset:0; pointer-events:none; opacity:0; border:12px solid; z-index:1; } #verdictflash.feedback-correct { border-color:#36ed79; background:radial-gradient(ellipse at 50% 48%,transparent 38%,#16df5866 78%,#16df58bb 100%); box-shadow:inset 0 0 90px #20ff7099; animation:gateVerdictPulse .56s ease-out; } #verdictflash.feedback-wrong { border-color:#ff344b; background:radial-gradient(ellipse at 50% 48%,transparent 38%,#ff153b66 78%,#ff153bbb 100%); box-shadow:inset 0 0 90px #ff304a99; animation:gateVerdictPulse .56s ease-out; } @keyframes gateVerdictPulse { 0%,18% { opacity:1; } 100% { opacity:0; } } @media (prefers-reduced-motion:reduce) { #verdictflash.feedback-correct, #verdictflash.feedback-wrong { animation:none; } } #flash { position:absolute; inset:0; opacity:0; transition:opacity .32s; background:radial-gradient(circle at 50% 58%, rgba(255,80,80,0) 32%, rgba(230,50,50,.5) 100%); } /* Audio toggles. Bottom-right is the one corner the HUD leaves empty (score top-right, mistakes top-left, deck stats bottom-left). The voice toggle stacks directly above the music one and shares every rule below. */ #musicbtn, #voicebtn { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--theme-panel); color:var(--ink); font:600 15px/1.2 "Segoe UI",Arial,sans-serif; cursor:pointer; } #musicbtn:hover, #voicebtn:hover:not(:disabled) { border-color:var(--theme-accent-deep); background:var(--theme-panel-alt); } #musicbtn > [aria-hidden], #voicebtn > svg { flex:0 0 22px; text-align:center; font-size:22px; } .audio-state { margin-left:auto; min-width:43px; padding:5px 9px; border-radius:7px; background:var(--theme-accent); color:var(--theme-muted); font-size:12px; text-align:center; } .off .audio-state { background:var(--theme-panel-soft); color:var(--theme-muted); } #voicebtn:disabled { cursor:default; color:var(--theme-faint); } #voicebtn:disabled .audio-state { font-size:11px; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* -------------------------------------------------------- load screen ---- */ /* The preload owns the whole screen. The start card used to double as the loading screen -- a full control reference and a deck picker stacked over a city that was still assembling itself behind it, which read as a broken game rather than as a game loading. This is one flat field, the title, one German word and a bar: nothing of the street shows through until there is a finished street to show. */ #loadscreen { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; background:var(--paper-background); color:var(--ink); text-align:center; transition:opacity .5s ease; } #loadscreen.done { opacity:0; pointer-events:none; } #loadscreen[hidden] { display:none; } #loadtitle { font-size:clamp(30px,7.2vw,54px); font-weight:800; letter-spacing:-.045em; line-height:1.06; color:var(--ink); } #loadtitle img { display:block; width:min(300px,76vw); height:auto; } /* Word rotation and article colours are shared with every app loader. */ #loadbar { position:relative; margin-top:clamp(22px,6vh,44px); width:min(320px,74vw); height:6px; border-radius:99px; background:var(--theme-track); overflow:hidden; } #loadbarfill { position:absolute; inset:0; border-radius:99px; transform-origin:0 50%; transform:scaleX(0); background:var(--theme-brown); } /* Building the city blocks the main thread for seconds at a time, so no JS-driven animation survives it. A transform-only sweep is handed to the compositor and keeps moving straight through the block -- the one honest sign of life available while the percentage cannot update. */ #loadbar::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent); animation:loadSweep 1.6s linear infinite; } #loadpct { margin-top:13px; font-size:12px; font-weight:800; letter-spacing:.2em; color:var(--muted); } @keyframes loadSweep { from { transform:translateX(-100%); } to { transform:translateX(100%); } } /* Reduced motion keeps the bar itself -- it is information, not decoration -- and drops the sweep. The shared word preview holds one word still. */ @media (prefers-reduced-motion:reduce) { #loadbar::after { animation:none; } } /* ------------------------------------------------------------- start ----- */ #start { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; /* Light enough to read the street through: the city behind the card is the best argument for pressing a key. */ background:radial-gradient(ellipse at 50% 42%, rgba(18,16,38,.28), rgba(6,8,18,.72)); pointer-events:auto; cursor:pointer; transition:opacity .45s; z-index:3; } #start.loading { cursor:progress; } #startcard { text-align:center; padding:28px 44px 26px; max-width:620px; position:relative; background:linear-gradient(160deg, rgba(14,17,32,.80), rgba(9,11,22,.74)); box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09); } #startcard h1 { font-size:clamp(34px,5vw,50px); font-weight:900; letter-spacing:.05em; line-height:1; background:linear-gradient(180deg,#fff 10%,#ffd45e 118%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 5px 18px rgba(255,190,60,.28)); } #startcard .sub { margin-top:9px; font-size:11.5px; color:#a6b6d8; letter-spacing:.26em; text-transform:uppercase; } #startcard .rule { width:60px; height:3px; margin:19px auto 21px; border-radius:2px; background:linear-gradient(90deg,#f2b705,#ffd93d); } .keys { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; text-align:left; font-size:12.5px; color:#dae2f5; margin:0 auto 24px; width:max-content; max-width:100%; } .keys kbd { display:inline-block; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24); border-bottom-width:2px; border-radius:5px; padding:2px 7px; font:700 11.5px/1.45 "Segoe UI",Arial,sans-serif; } .keys .lane { font-weight:800; letter-spacing:.03em; } #deckpicker { width:min(100%,460px); margin:0 auto 18px; text-align:left; } #deckpicker label { display:block; margin-bottom:6px; font-size:8.5px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); } #deckselect { width:100%; min-height:40px; padding:8px 34px 8px 12px; border-radius:9px; border:1px solid var(--line); color:var(--ink); background:var(--theme-panel); font:700 12px/1.35 "Segoe UI",Arial,sans-serif; cursor:pointer; } #deckselect:focus { outline:2px solid var(--theme-accent-deep); outline-offset:2px; } #deckselect:disabled { cursor:progress; opacity:.72; } #deckstatus { white-space:pre-line; min-height:16px; margin-top:6px; font-size:9.5px; line-height:1.35; color:var(--muted); } #deckstatus.error { color:#b85a47; } /* Tempo choice. A two-way segmented control rather than another dropdown: there are exactly two answers, both should be readable without opening anything, and the pressed one has to be obvious at a glance from across a desk. Shares the deck picker's label style so the start card keeps one vocabulary of small-caps section headings. */ #speedpicker, #runnerpicker { width:min(100%,460px); margin:0 auto 16px; text-align:left; } #speedpicker > span, #runnerpicker > span { display:block; margin-bottom:6px; font-size:8.5px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); } #speedmodes, #runnermodes { display:grid; grid-template-columns:1fr 1fr; gap:8px; } /* Three rows show; a longer roster scrolls inside the card, so the start button stays on screen. */ #runnermodes { max-height:136px; overflow-y:auto; overscroll-behavior:contain; padding:2px; margin:-2px; } .speedmode, .runnermode { min-height:40px; padding:6px 10px; border-radius:9px; cursor:pointer; border:1px solid var(--line); background:var(--theme-panel); color:var(--muted); font:800 12px/1.15 "Segoe UI",Arial,sans-serif; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:border-color .15s, background .15s, color .15s; } .speedmode small, .runnermode small { font:700 9px/1.2 "Segoe UI",Arial,sans-serif; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; } .speedmode:hover, .runnermode:hover { border-color:var(--theme-accent-deep); background:var(--theme-panel-alt); } .speedmode[aria-pressed="true"], .runnermode[aria-pressed="true"] { background:var(--theme-accent); color:var(--ink); border-color:var(--theme-accent-deep); box-shadow:0 0 0 1px var(--theme-accent-deep) inset; } .speedmode[aria-pressed="true"] small, .runnermode[aria-pressed="true"] small { color:var(--theme-brown); } .speedmode:focus-visible, .runnermode:focus-visible { outline:2px solid var(--theme-accent-deep); outline-offset:2px; } .runnermode:disabled { cursor:progress; opacity:.72; } .runnermode[data-locked] { cursor:not-allowed; } /* Chunky moulded button: a hard colour ledge underneath instead of a soft glow, so it reads as something you press rather than something that lights up. The pulse keeps the eye on the only control that matters. */ #go { display:inline-block; padding:15px 38px; border-radius:999px; font-size:14px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:#3d2500; border:2px solid rgba(255,244,206,.9); background:linear-gradient(180deg,#fff0ae 4%,#ffd34e 46%,#f0a90d 100%); text-shadow:0 1px 0 rgba(255,246,214,.75); box-shadow:0 6px 0 rgba(150,86,4,.85), 0 16px 30px rgba(180,110,10,.34), inset 0 2px 0 rgba(255,255,255,.6); } #go { animation:ctaPulse 1.8s ease-in-out infinite; } #start.loading #go { color:#dbe5f7; cursor:progress; animation:none; background:linear-gradient(180deg,rgba(74,91,122,.92),rgba(44,57,83,.94)); box-shadow:0 8px 26px rgba(7,12,24,.34); } #start.loading #go::before { content:""; display:inline-block; width:10px; height:10px; margin-right:10px; border:2px solid rgba(255,255,255,.28); border-top-color:#fff; border-radius:50%; vertical-align:-1px; animation:loadSpin .72s linear infinite; } #start.load-error #go { color:#ffe7e7; animation:none; background:linear-gradient(180deg,#a33d47,#6f2732); } @keyframes loadSpin { to { transform:rotate(360deg); } } @keyframes ctaPulse { 0%,100% { transform:translateY(0) scale(1); box-shadow:0 8px 26px rgba(242,183,5,.34); } 50% { transform:translateY(-2px) scale(1.018); box-shadow:0 13px 34px rgba(255,201,35,.48); } } @keyframes hudPunch { 0%{transform:scale(1)} 42%{transform:scale(1.22)} 100%{transform:scale(1)} } .punch { animation:hudPunch .28s cubic-bezier(.2,.85,.3,1.35); } /* ------------------------------------------------ active-run HUD mode ---- */ /* The start and result screens retain the full learning dashboard. Once the run begins, the same DOM collapses to arcade-scale edge telemetry. */ body.running .panel { backdrop-filter:blur(4px) saturate(112%); -webkit-backdrop-filter:blur(4px) saturate(112%); box-shadow:0 6px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06); } /* Keep the plate's padding compact above the road. Long nouns add lines at readable sizes; measured bounds place the other HUD elements below it. */ body.running #quiz { top:8px; width:min(410px,calc(100vw - 300px)); min-width:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; padding:3px 14px 6px; border-radius:10px; overflow:hidden; border:1px solid rgba(190,222,255,.46); background:linear-gradient(100deg,#112d58,#174278 62%,#0c2349); box-shadow:0 3px 0 rgba(5,14,34,.56), 0 10px 24px rgba(4,10,26,.36), inset 0 1px 0 rgba(255,255,255,.18); } body.running #quiz.overdrive { box-shadow:0 8px 26px rgba(255,150,30,.20), inset 0 1px 0 rgba(255,255,255,.12); } body.running #noun { width:100%; min-width:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center; } body.running #nounword { font-size:clamp(25px,2.45vw,32px); line-height:1.06; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; max-width:100%; padding-bottom:1px; } body.running #nountrans { font-size:clamp(10px,1vw,14px); line-height:1.08; letter-spacing:.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; opacity:.92; } body.running #noun.long-word #nounword { font-size:clamp(25px,2.45vw,32px); } body.running #noun.very-long-word #nounword { font-size:clamp(24px,2.3vw,31px); } body.running #quiz.giant-word { width:min(760px,calc(100vw - 120px)); } body.running #quiz.giant-word #nounword { font-size:clamp(24px,2.3vw,31px); line-height:1.15; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; } body.running #quiz.giant-word #nountrans { white-space:normal; overflow:visible; text-overflow:clip; } /* Continuously blurring a live WebGL canvas beneath four compact HUD cards forces extra full-resolution compositor passes. Their existing translucent gradients preserve the frosted visual read in motion without that cost; the start and completion cards keep the full backdrop blur. */ body.running .panel { backdrop-filter:none; -webkit-backdrop-filter:none; } body.running #wordstats { top:auto; bottom:14px; left:14px; grid-template-columns:repeat(4,52px); gap:0; padding:8px 9px 7px; opacity:.9; border-radius:16px; text-align:center; transition:opacity .25s, border-color .25s; } body.running #wordstats:hover, body.running #wordstats.hot { opacity:1; } body.running .wordstat { padding:0 4px 1px; } body.running .wordstat-num { font-size:20px; text-shadow:0 2px 0 rgba(6,12,28,.6); } body.running .wordstat-label { margin-top:4px; font-size:7px; letter-spacing:.12em; } /* The pickup counter is the one HUD element that should feel like treasure: a gold pill with a dark rim, sized to be glanceable without ever reading as chrome. Everything else stays cool navy so gold means "collected". */ body.running #pretzelhud { top:12px; right:12px; gap:8px; padding:7px 15px 7px 11px; border-radius:999px; opacity:1; background:linear-gradient(180deg,#ffd964,#f0a90d 62%,#d98a06); border-color:rgba(255,240,190,.85); box-shadow:0 4px 0 rgba(120,66,3,.6), 0 12px 24px rgba(60,34,2,.4), inset 0 2px 0 rgba(255,255,255,.5); } body.running #pretzelicon { width:21px; height:21px; filter:drop-shadow(0 1px 1px rgba(90,50,0,.55)); } body.running #pretzelmeta { flex-direction:row; align-items:baseline; gap:5px; } body.running #pretzelcount { font-size:21px; color:#3d2500; text-shadow:0 1px 0 rgba(255,240,190,.7); } body.running #pretzellabel { font-size:7px; letter-spacing:.13em; color:#6b4406; } /* No resting mistake pill: the running total is the red Fehler count in the word stats, and this card only fades in with the correction for a moment after a wrong answer (the peek). It keeps one size whether shown or not, so it fades rather than resizing. */ body.running #mistakehistory { top:12px; left:12px; width:264px; max-height:148px; overflow:hidden; padding:9px 12px; border-radius:12px; background:linear-gradient(160deg,rgba(20,24,40,.88),rgba(12,14,26,.82)); border:1px solid rgba(225,246,245,.65); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .2s, transform .2s, visibility 0s linear .2s; } body.running:not(.tutorial-on) #mistakehistory.peek { opacity:.96; visibility:visible; transform:none; transition-delay:0s; } body.running #mistakelist li { font-size:11px; min-height:18px; } #audiostart { position:fixed; z-index:45; inset:0; width:100%; height:100%; border:0; background:var(--paper-background); color:var(--ink); font:800 28px/1.3 system-ui; cursor:pointer; touch-action:manipulation; pointer-events:auto; } #audiostart[hidden] { display:none; } #audiostart span { display:block; margin-top:12px; font-size:14px; font-weight:500; } #audiostart:focus-visible { outline:4px solid var(--theme-accent-deep); outline-offset:-8px; } #gohint { margin-top:13px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } #err { position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:40px; font-size:15px; line-height:1.6; color:var(--ink); background:var(--paper-background); z-index:4; } /* ---------------------------------------------------------- game over ---- */ #gameover { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; opacity:0; visibility:hidden; pointer-events:none; z-index:3; background:var(--paper-background); color:var(--ink); transition:opacity .28s, visibility 0s linear .28s; } /* The results fade in over the street where the run stopped, rather than the street vanishing into a blank page first: the HUD fades out, and the canvas and HUD layers stop compositing only once the results cover them (the 1.4 s delay outlasts the 300 ms hold in endRun plus this .5 s fade). */ #gameover.show { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .5s ease-out; } body.finished #c, body.finished #hud > :not(#gameover) { visibility:hidden!important; transition:opacity .3s, visibility 0s linear 1.4s; } body.finished { background:var(--paper-background); } /* The card takes what the döner leaves and scrolls inside itself, so a long list of missed words never pushes the buttons off a short screen. */ #doener { flex-shrink:0; } #gameovercard { position:relative; width:min(380px,92vw); min-height:0; overflow-y:auto; padding:24px 26px; text-align:center; border:1px solid var(--line); border-radius:20px; background:var(--theme-panel); box-shadow:0 12px 32px #3a281a12; } #unitresult { margin-bottom:16px; } #resulttitle { margin:0; font:700 23px/1.2 "Segoe UI",Arial,sans-serif; letter-spacing:-.015em; color:var(--ink); } #resultsub { margin:4px 0 0; font-size:13px; line-height:1.4; color:var(--muted); } /* After a Learn run: no döner yet, and where to get it. */ #gameover.learned #doener { display:none; } #resulthint { margin:12px 0 0; font-size:13px; font-weight:600; line-height:1.4; color:var(--ink); } #resultmodes { margin:14px 0 0; padding:12px 14px; text-align:left; border-radius:12px; background:rgba(58,40,26,.06); } #resultmodes h3 { margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #resultmodes p { margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--ink); } #gameoverstats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; } .gameoverstat strong { display:block; font-size:29px; line-height:1.15; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; -webkit-text-stroke:0; } .gameoverstat span { display:block; margin-top:4px; font-size:12px; color:var(--muted); } /* What the run added: the streak, then the stage's units as a bar. */ #resultprogress { display:grid; gap:9px; margin-top:18px; padding:12px 14px; border-radius:12px; background:var(--theme-panel-alt); text-align:left; } #resultprogress[hidden], #resultprogress p[hidden] { display:none; } #resultprogress p { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; line-height:1.35; color:var(--muted); } #resultstreak svg { flex:none; color:#e0622a; } #resultstreak strong, #resultstagename { flex:none; color:var(--ink); font-weight:700; } #resultstagecount { flex:none; font-variant-numeric:tabular-nums; } .result-bar { flex:1; height:6px; border-radius:99px; background:var(--theme-track); overflow:hidden; } .result-bar i { display:block; width:0; height:100%; border-radius:inherit; background:var(--theme-brown); } #gameover.show .result-bar i { transition:width .7s cubic-bezier(.2,.8,.3,1) .5s; } #resultmissed { margin-top:16px; text-align:left; } #resultmissed h3 { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); } #resultmissedlist { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; } #resultmissedlist li { padding:5px 10px 6px; border:1px solid var(--line); border-radius:9px; font-size:14px; font-weight:600; line-height:1.25; color:var(--ink); } #resultmissedlist b { padding:0 5px 1px; border-radius:6px; color:#0f2138; font-weight:800; } #resultmissedlist b.der { background:#5bb8ff; } #resultmissedlist b.die { background:#ff6fa8; } #resultmissedlist b.das { background:#46d98a; } #resultmissedlist li span { margin-left:7px; font-size:12px; font-weight:400; color:var(--muted); } #resultmissedlist .result-missed-more { border-color:transparent; padding-left:2px; font-size:12px; font-weight:400; color:var(--muted); } #resultsave { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } #resultsave[hidden] { display:none; } #resultsave p { margin:0 0 9px; font-size:12px; line-height:1.45; color:var(--muted); } #resultsavebtn { min-height:40px; padding:9px 16px; border:1px solid var(--theme-accent-deep); border-radius:10px; background:transparent; color:var(--ink); font:600 13px/1.2 "Segoe UI",Arial,sans-serif; cursor:pointer; } #resultsavebtn:hover { background:var(--theme-accent-soft); } #resultsavebtn:focus-visible { outline:3px solid var(--theme-accent-deep); outline-offset:3px; } .result-actions { display:flex; flex-direction:column; gap:10px; margin-top:22px; } /* With a unit to go on to, that is the one big button; the other two share the row under it. */ #gameover.has-next-unit .run-actions { display:grid; grid-template-columns:1fr 1fr; } #gameover.has-next-unit #nextunit { grid-column:1 / -1; min-height:54px; font-size:16px; } #gameover.has-next-unit #exitgame { border-color:var(--line); } .result-actions button { width:100%; min-height:46px; padding:12px 18px; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--ink); font:600 14px/1.2 "Segoe UI",Arial,sans-serif; cursor:pointer; transition:background .15s,transform .1s; } .result-actions button:hover { background:var(--theme-accent-soft); } .result-actions button:active { transform:translateY(1px); } #nextunit, #gameover:not(.has-next-unit) #restartgame { border-color:var(--theme-accent-deep); background:var(--theme-button); color:var(--ink); font-weight:700; } #nextunit:hover, #gameover:not(.has-next-unit) #restartgame:hover { background:var(--theme-button-hover); } .result-actions button:focus-visible { outline:3px solid var(--theme-accent-deep); outline-offset:3px; } #nextunit[hidden] { display:none; } #nextunit:disabled { opacity:.65; cursor:wait; } #exitgame { border-color:transparent; color:var(--muted); } /* Survival overlay and its poster-sized finish card. While the run is live the hearts and the words counter sit straight on the street: no panel, border or backdrop, only bright colour with a round ink rim so they read over anything from sunlit sky to a dark tunnel. The rim is sixteen text-shadows rather than -webkit-text-stroke, which grows sharp spikes on digits such as 4 and 7. */ body.challenge { --hud-ink:#3a1233; --rim-number:5.0px 0.0px 0 #3a1233,4.6px 1.9px 0 #3a1233,3.5px 3.5px 0 #3a1233,1.9px 4.6px 0 #3a1233,0.0px 5.0px 0 #3a1233,-1.9px 4.6px 0 #3a1233,-3.5px 3.5px 0 #3a1233,-4.6px 1.9px 0 #3a1233,-5.0px 0.0px 0 #3a1233,-4.6px -1.9px 0 #3a1233,-3.5px -3.5px 0 #3a1233,-1.9px -4.6px 0 #3a1233,0.0px -5.0px 0 #3a1233,1.9px -4.6px 0 #3a1233,3.5px -3.5px 0 #3a1233,4.6px -1.9px 0 #3a1233; --rim-label:3.0px 0.0px 0 #3a1233,2.6px 1.5px 0 #3a1233,1.5px 2.6px 0 #3a1233,0.0px 3.0px 0 #3a1233,-1.5px 2.6px 0 #3a1233,-2.6px 1.5px 0 #3a1233,-3.0px 0.0px 0 #3a1233,-2.6px -1.5px 0 #3a1233,-1.5px -2.6px 0 #3a1233,0.0px -3.0px 0 #3a1233,1.5px -2.6px 0 #3a1233,2.6px -1.5px 0 #3a1233; } #challengehud, #challengeresult { display:none; } .life-defs { position:absolute; width:0; height:0; } body.challenge.running #challengehud { display:flex; position:absolute; z-index:3; top:calc(var(--quiz-bottom, 118px) + 12px); left:max(12px,env(safe-area-inset-left)); align-items:center; } #challengelives { display:flex; gap:3px; } .life { width:42px; height:40px; flex:none; overflow:visible; transform-origin:50% 60%; } .life-shadow { fill:var(--hud-ink); } .life-body { fill:url(#lifeGradient); stroke:var(--hud-ink); stroke-width:3; stroke-linejoin:round; paint-order:stroke fill; } .life-shine { fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; opacity:.95; } /* A spent life is an empty heart: the same ink outline as a full one, so it shows over light scenery, with a translucent white body, so it shows over dark. */ .life.lost { transform:scale(.82); } .life.lost .life-body { fill:#fff; fill-opacity:.34; stroke:var(--hud-ink); } .life.lost .life-shadow, .life.lost .life-shine { display:none; } .life.breaking { animation:lifeBreak .55s cubic-bezier(.2,.8,.3,1); } @keyframes lifeBreak { 0% { transform:scale(1.55) rotate(-14deg); } 38% { transform:scale(1.12) rotate(11deg); } 100% { transform:scale(.8) rotate(0); } } body.challenge.running #pretzelhud { top:calc(var(--quiz-bottom, 118px) + 4px); bottom:auto; right:max(14px,env(safe-area-inset-right)); padding:0; gap:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none; } body.challenge.running #pretzelicon, body.challenge.running #mistakehistory { display:none!important; } body.challenge.running #pretzelmeta { flex-direction:column; align-items:flex-end; gap:5px; transform-origin:100% 50%; } body.challenge.running #pretzelcount { color:#ffe436; font-size:68px; line-height:.9; font-weight:950; letter-spacing:-.02em; -webkit-text-stroke:0; text-shadow:var(--rim-number),0 7px 0 var(--hud-ink); } body.challenge.running #pretzellabel { color:#fff; font-size:15px; font-weight:950; line-height:1; letter-spacing:.24em; margin-right:-.24em; text-transform:uppercase; text-shadow:var(--rim-label),0 3px 0 var(--hud-ink); } body.challenge.running #pretzelmeta.punch { animation:wordPunch .34s cubic-bezier(.2,.85,.3,1.35); } body.challenge.running #pretzelmeta.punch #pretzelcount { animation:wordFlash .34s ease-out; } @keyframes wordPunch { 0% { transform:scale(1); } 40% { transform:scale(1.3); } 100% { transform:scale(1); } } @keyframes wordFlash { 0% { color:#fff; } 100% { color:#ffe436; } } body.challenge.running #wordstats { display:none; } /* The count to beat, from a friend's link: a sticker under the counter that turns gold once it is passed. */ #challengetarget { display:none; } body.challenge.running #challengetarget:not([hidden]) { display:block; margin-top:4px; padding:5px 11px 6px; border:3px solid var(--hud-ink); border-radius:999px; background:#fff6e2; color:var(--hud-ink); font-size:15px; font-weight:950; line-height:1; white-space:nowrap; box-shadow:0 3px 0 var(--hud-ink); transform-origin:100% 50%; } body.challenge.running #challengetarget.beaten { background:#ffd23f; } body.challenge.running #challengetarget.pop { animation:targetPop .8s cubic-bezier(.2,.85,.3,1.35); } @keyframes targetPop { 0% { transform:scale(1); } 28% { transform:scale(1.75) rotate(-4deg); } 100% { transform:scale(1); } } /* A newcomer's warm-up (the tutorial lessons) does not count: no hearts and no counter until it is over. */ body.challenge.warmup #challengehud, body.challenge.warmup #pretzelhud { display:none; } /* Its hand-over card ("Now it counts!") arrives with them: on a narrow screen it hangs below their band. */ @media(max-width:820px) { body.challenge:not(.warmup) #tutorialcard { top:calc(var(--quiz-bottom, 96px) + 106px); } } /* The finish card is the shareable poster on top and the actions on the same ink plum the poster's outlines are drawn in. */ body.challenge #gameovercard { width:min(460px,94vw); padding:0; overflow:hidden; border:0; border-radius:26px; color:#fff6e6; background:var(--hud-ink); box-shadow:0 25px 70px #1a152ca0; } body.challenge #gameover { justify-content:flex-start; overflow-y:auto; } body.challenge #gameovercard { flex-shrink:0; margin:auto; } body.challenge #gameoverstats, body.challenge #doener, body.challenge #nextunit, body.challenge #unitresult, body.challenge #resultprogress, body.challenge #resultmissed, body.challenge #resultsave { display:none!important; } body.challenge #challengeresult { display:block; } /* Drawn at 1080 x 1350 and shown at whatever fits: on a short screen the poster shrinks (keeping its ratio) before the buttons are pushed off. */ .challenge-poster { display:block; width:auto; max-width:100%; height:auto; margin:0 auto; max-height:min(575px,max(230px,calc(100dvh - 370px))); } /* How the run did against the count it set out to beat, above the poster. */ .challenge-verdict { margin:0; padding:13px 20px 11px; color:#fff6e6; font-size:19px; font-weight:900; line-height:1.2; text-align:center; } .challenge-verdict.won { color:#ffd23f; } .has-verdict .challenge-poster { max-height:min(575px,max(230px,calc(100dvh - 418px))); } .challenge-share-note { margin:0; padding:9px 20px 0; color:#ffe1ad; font-size:12px; line-height:1.35; text-align:center; } body.challenge .result-actions { margin:0; padding:14px 18px 18px; } body.challenge .result-actions button { color:#fff5e8; border-color:#b98c70; } body.challenge .result-actions button:hover { background:#5b2a52; } body.challenge #exitgame { color:#fff5e8; border-color:transparent; } .challenge-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } #challengeshare { background:#ffd23f; border-color:#ffd23f; color:var(--hud-ink); font-weight:900; } body.challenge .result-actions #challengeshare:hover { background:#ffe27a; } @media(max-width:820px) { body.challenge { --rim-number:3.4px 0.0px 0 #3a1233,3.1px 1.3px 0 #3a1233,2.4px 2.4px 0 #3a1233,1.3px 3.1px 0 #3a1233,0.0px 3.4px 0 #3a1233,-1.3px 3.1px 0 #3a1233,-2.4px 2.4px 0 #3a1233,-3.1px 1.3px 0 #3a1233,-3.4px 0.0px 0 #3a1233,-3.1px -1.3px 0 #3a1233,-2.4px -2.4px 0 #3a1233,-1.3px -3.1px 0 #3a1233,0.0px -3.4px 0 #3a1233,1.3px -3.1px 0 #3a1233,2.4px -2.4px 0 #3a1233,3.1px -1.3px 0 #3a1233; } .life { width:33px; height:31px; } body.challenge.running #challengehud { left:max(10px,env(safe-area-inset-left)); } body.challenge.running #pretzelcount { font-size:48px; text-shadow:var(--rim-number),0 5px 0 var(--hud-ink); } body.challenge.running #pretzellabel { font-size:12px; } body.challenge.running #challengetarget:not([hidden]) { font-size:13px; padding:4px 9px 5px; } } /* ------------------------------------------------------ döner reward ---- */ /* Clearing a deck serves the courier a big döner: it springs out of the top of the results card over a slow golden burst, steams, and gets a "Guten Appetit!" sticker. It stacks above the card (beside it on short landscape screens). Every animation is scoped to #gameover.show, so nothing here ticks while a run is on screen. */ #doener { --doener-w:clamp(150px, min(46vh, 78vw), 380px); position:relative; z-index:1; flex:0 0 auto; pointer-events:none; width:var(--doener-w); aspect-ratio:260 / 294; margin-bottom:calc(var(--doener-w) * -0.12); } #doener .doener-burst { position:absolute; left:50%; top:48%; width:150%; aspect-ratio:1; margin-left:-75%; margin-top:-75%; border-radius:50%; opacity:0; background: radial-gradient(circle, rgba(255,214,110,.55), rgba(255,190,70,0) 46%), repeating-conic-gradient(rgba(255,214,94,.34) 0deg 9deg, rgba(255,214,94,0) 9deg 22.5deg); -webkit-mask:radial-gradient(circle, #000 20%, rgba(0,0,0,.55) 44%, transparent 70%); mask:radial-gradient(circle, #000 20%, rgba(0,0,0,.55) 44%, transparent 70%); } #doener .doener-pop, #doener .doener-bob { position:absolute; inset:0; transform-origin:50% 88%; } #doener .doener-art { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); } #doener .doener-tag { position:absolute; left:74%; top:47%; padding:7px 13px 8px; border:2px solid rgba(255,244,206,.9); border-radius:999px; white-space:nowrap; font:900 clamp(12px, 2.1vh, 17px)/1 "Segoe UI","Arial Black",Arial,sans-serif; letter-spacing:.05em; color:#3d2500; transform:rotate(-8deg); background:linear-gradient(180deg,#fff0ae 4%,#ffd34e 46%,#f0a90d 100%); text-shadow:0 1px 0 rgba(255,246,214,.75); box-shadow:0 4px 0 rgba(150,86,4,.85), 0 10px 22px rgba(0,0,0,.3); } #gameover.show #doener .doener-burst { animation:doenerGlow .5s ease-out .2s both, doenerSpin 22s linear infinite; } #gameover.show #doener .doener-pop { animation:doenerPop .95s cubic-bezier(.2,.8,.3,1) .12s both; } #gameover.show #doener .doener-bob { animation:doenerBob 2.8s ease-in-out 1.1s infinite; } #gameover.show #doener .doener-tag { animation:doenerTag .5s cubic-bezier(.2,.9,.3,1.45) .8s both; } #gameover.show #doener .doener-steam { transform-box:fill-box; transform-origin:50% 100%; animation:doenerSteam 2.4s ease-out infinite; } #gameover.show #doener .doener-steam:nth-child(2) { animation-delay:.8s; } #gameover.show #doener .doener-steam:nth-child(3) { animation-delay:1.6s; } #gameover.show #doener .doener-spark { transform-box:fill-box; transform-origin:50% 50%; animation:doenerTwinkle 1.7s ease-in-out infinite; } #gameover.show #doener .doener-spark:nth-child(2) { animation-delay:.45s; } #gameover.show #doener .doener-spark:nth-child(3) { animation-delay:.9s; } #gameover.show #doener .doener-spark:nth-child(4) { animation-delay:1.3s; } @keyframes doenerPop { 0% { opacity:0; transform:translateY(34%) scale(.12) rotate(-16deg); } 42% { opacity:1; transform:translateY(-7%) scale(1.14) rotate(5deg); } 62% { transform:translateY(2%) scale(.94) rotate(-2.5deg); } 80% { transform:translateY(-1%) scale(1.03) rotate(1deg); } 100% { opacity:1; transform:none; } } @keyframes doenerBob { 0%, 100% { transform:none; } 50% { transform:translateY(-3.5%) rotate(1.6deg); } } @keyframes doenerGlow { from { opacity:0; } to { opacity:1; } } @keyframes doenerSpin { to { transform:rotate(360deg); } } @keyframes doenerTag { from { transform:rotate(-8deg) scale(0); } to { transform:rotate(-8deg) scale(1); } } @keyframes doenerSteam { 0% { opacity:0; transform:translateY(12px) scaleY(.7); } 35% { opacity:.95; } 100% { opacity:0; transform:translateY(-16px) scaleY(1.15); } } @keyframes doenerTwinkle { 0%, 100% { opacity:.25; transform:scale(.55); } 50% { opacity:1; transform:scale(1.15); } } /* Phones: the sticker bridges döner and card instead of covering the text. */ @media (max-width:560px) { #doener { --doener-w:clamp(130px, min(24vh, 62vw), 380px); margin-bottom:0; } #gameovercard { padding:20px 22px; } #unitresult { margin-bottom:12px; } #resultprogress, #resultmissed { margin-top:14px; } .result-actions { margin-top:16px; } .result-actions button { min-height:44px; } #gameover.has-next-unit #nextunit { min-height:50px; } #resultsave { margin-top:12px; padding-top:12px; } #doener .doener-tag { left:0; right:0; top:auto; bottom:-3%; width:max-content; margin:0 auto; } } @media (orientation:portrait) and (max-height:560px) { #doener { --doener-w:clamp(110px, 34vh, 240px); } } @media (orientation:landscape) and (max-height:500px) { #gameover { flex-direction:row; } #doener { --doener-w:clamp(110px, 58vh, 260px); margin:0 calc(var(--doener-w) * -0.06) 0 0; } } /* Wide screens: the döner beside the card, so the whole card shows without scrolling. */ @media (min-width:900px) and (min-height:501px) { #gameover { flex-direction:row; gap:20px; } #doener { --doener-w:clamp(200px, min(52vh, 30vw), 380px); margin:0; } #gameovercard { max-height:calc(100dvh - 24px); } } @media (prefers-reduced-motion:reduce) { #gameover.show #doener .doener-pop, #gameover.show #doener .doener-burst, #gameover.show #doener .doener-tag { animation:doenerGlow .3s ease-out both; } #gameover.show #doener .doener-bob, #gameover.show #doener .doener-steam, #gameover.show #doener .doener-spark { animation:none; } } #doener .doener-plain, #doener .doener-loaded-only { display:none; } #doener[data-tier="plain"] .doener-plain { display:block; } #doener[data-tier="plain"] .doener-classic { display:none; } #doener[data-tier="plain"] .doener-burst { width:110%; margin-left:-55%; background:radial-gradient(circle,#d9c8a733,transparent 66%); animation:doenerGlow .5s ease-out both; } #doener[data-tier="plain"] .doener-tag { background:linear-gradient(#e7dfd0,#bfa784); color:#5c4731; border-color:#e6d9c4; box-shadow:0 3px 0 #755c41,0 7px 16px #0004; } #doener[data-tier="loaded"] .doener-loaded-only { display:inline; } #doener[data-tier="loaded"] .doener-art { filter:drop-shadow(0 0 15px #ffe794aa) drop-shadow(0 0 36px #93f8df88) drop-shadow(0 12px 18px #0006); } #doener[data-tier="loaded"] .doener-burst { width:170%; margin-left:-85%; background:radial-gradient(circle,#fff5bda6,#91efd76b 32%,transparent 63%), repeating-conic-gradient(#fff2a399 0deg 7deg,transparent 7deg 17deg,#abffed66 17deg 21deg,transparent 21deg 32deg); } #doener[data-tier="loaded"] .doener-tag { border-color:#fffde1; color:#184735; background:linear-gradient(135deg,#fff2ad,#c9ffdf 55%,#fff4c1); box-shadow:0 4px 0 #5a9679,0 0 23px #c9ffdf99; } #doener[data-tier="loaded"] .doener-crown { filter:drop-shadow(0 0 4px #fff2a9) drop-shadow(0 0 13px #f2b62e) drop-shadow(0 2px 2px #865315); } #doener[data-tier="loaded"] .doener-spark { fill:url(#dnRoyalStar); stroke:#fff9d4; stroke-width:.7; filter:drop-shadow(0 0 4px #fffefa) drop-shadow(0 0 10px #ffd844) drop-shadow(0 0 17px #edaa13); } #gameover.show #doener[data-tier="loaded"] .doener-spark { animation:royalSpark 1.8s ease-in-out infinite; } #gameover.show #doener[data-tier="loaded"] .crown-glint { transform-box:fill-box; transform-origin:center; animation:royalGlint 2.7s ease-in-out infinite; } @keyframes royalSpark { 0%,100% { opacity:.78; transform:scale(.95); } 45% { opacity:1; transform:scale(1.42); } } @keyframes royalGlint { 0%,100% { opacity:.5; transform:scale(.7); } 46% { opacity:1; transform:scale(1.2); } } @media (prefers-reduced-motion:reduce) { #gameover.show #doener[data-tier="loaded"] .doener-spark, #gameover.show #doener[data-tier="loaded"] .crown-glint { animation:none; opacity:1; } } #gameover.show #doener[data-tier="loaded"] .doener-sauce-drips { transform-box:fill-box; transform-origin:50% 0; animation:doenerSauce 2.5s ease-in-out infinite; } @keyframes doenerSauce { 0%,100% { transform:scaleY(.9); } 50% { transform:scaleY(1.09); } } @media (prefers-reduced-motion:reduce) { #gameover.show #doener .doener-sauce-drips { animation:none; } } /* --------------------------------------------------------- mobile taps -- */ #touchhint { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:none; gap:9px; font-size:9.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:#93a3c6; text-shadow:0 2px 8px rgba(0,0,0,.6); } /* Controls only matter before the run begins; once running they would just eat screen real estate, so drop them for the whole run. */ body.running #touchhint { display:none !important; } /* Embed (iframe inside Berlin Runner): hide the in-page deck picker. The exit back to the host app lives on the game-over card (see #exitgame), so no floating chip ever covers the brezel counter or other HUD elements. */ body.embed #deckpicker, body.embed #runnerpicker { display:none; } @media (max-width:1080px) { #quiz { width:min(420px, calc(100vw - 250px)); } body.running #quiz { width:min(420px,calc(100vw - 250px)); } /* Same specificity as the two rules above and later in the sheet, so the tapeworm plate has to be restated here or it loses its extra width. */ #quiz.giant-word, body.running #quiz.giant-word { width:min(640px,calc(100vw - 90px)); } } @media (max-width:820px) { #wordstats { top:auto; bottom:max(12px,calc(var(--ios-safe-bottom, 0px) + 8px)); left:max(10px,calc(var(--ios-safe-left, 0px) + 8px)); transform:scale(.76); transform-origin:bottom left; } #mistakehistory { display:none; } #pretzelhud { top:auto; bottom:max(12px,calc(var(--ios-safe-bottom, 0px) + 8px)); right:max(10px,calc(var(--ios-safe-right, 0px) + 8px)); transform:scale(.82); transform-origin:bottom right; } #quiz { top:calc(max(54px, var(--ios-safe-top, env(safe-area-inset-top, 0px))) + 4px); left:11px; right:auto; width:min(340px, calc(100vw - 130px)); margin:0; } #noun { min-height:60px; padding:2px 12px 12px; } #nounword { font-size:clamp(32px,7.2vw,42px); } #nountrans { font-size:clamp(12px,3vw,15px); } #noun.long-word #nounword { font-size:clamp(30px,6.5vw,38px); } #noun.very-long-word #nounword { font-size:clamp(28px,6vw,36px); } #quiz.giant-word { width:min(340px, calc(100vw - 130px)); } #quiz.giant-word #nounword { font-size:clamp(26px,5.8vw,34px); line-height:1.15; } #touchhint { display:flex; } /* Portrait iPhones used to let the intrinsic width of the two-column key legend widen the start card beyond the viewport, clipping both the instructions and deck picker. Give every grid track an explicit shrink path and keep the whole launch surface inside the safe viewport. */ #start { align-items:flex-start; overflow-y:auto; overflow-x:hidden; padding:calc(max(132px, env(safe-area-inset-top, 0px) + 112px)) 10px calc(env(safe-area-inset-bottom, 0px) + 94px); } #startcard { width:100%; max-width:600px; min-width:0; padding:26px 18px 22px; } .keys { width:100%; min-width:0; grid-template-columns:minmax(76px,auto) minmax(0,1fr); font-size:11.5px; gap:8px 12px; } .keys > * { min-width:0; } #deckpicker, #deckselect { min-width:0; max-width:100%; } body.running #quiz { top:calc(max(56px, var(--ios-safe-top, env(safe-area-inset-top, 0px))) + 5px); left:8px; right:8px; width:auto; min-width:0; margin:0; display:flex; align-items:center; justify-content:center; padding:4px 10px 5px; } body.running #noun { width:100%; min-height:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center; } body.running #nounword { font-size:clamp(25px,7vw,35px); line-height:1.05; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; text-align:center; padding-bottom:0; } body.running #nountrans { font-size:clamp(10px,2.8vw,13px); line-height:1.12; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } body.running #noun.long-word #nounword { font-size:clamp(25px,6.5vw,32px); } body.running #noun.very-long-word #nounword { font-size:clamp(24px,6.2vw,31px); } body.running #quiz.giant-word { width:auto; } body.running #quiz.giant-word #nounword { font-size:clamp(24px,6.2vw,31px); line-height:1.15; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; } body.running #quiz.giant-word #nountrans { white-space:normal; overflow:visible; text-overflow:clip; } body.running #wordstats { top:auto; bottom:max(12px,calc(var(--ios-safe-bottom, 0px) + 8px)); left:max(8px,calc(var(--ios-safe-left, 0px) + 6px)); transform:none; grid-template-columns:repeat(4,39px); padding:5px 5px 4px; } body.running .wordstat-num { font-size:14px; } body.running .wordstat-label { font-size:5.5px; } body.running #pretzelhud { top:auto; bottom:max(12px,calc(var(--ios-safe-bottom, 0px) + 8px)); right:max(8px,calc(var(--ios-safe-right, 0px) + 6px)); transform:none; } body.running #mistakehistory { display:block; top:calc(var(--quiz-bottom,118px) + 5px); bottom:auto; left:max(8px,calc(var(--ios-safe-left,0px) + 6px)); width:min(176px,calc(100vw - 16px)); padding:6px 14px; background:linear-gradient(160deg,rgba(20,24,40,.9),rgba(12,14,26,.84)); } body.running #mistakelist li { display:none; } body.running #mistakelist li:first-child { display:flex; } body.running #touchhint { display:none; } } /* 2026 art direction: warm sunlight, soft materials, compact transit UI. */ #start { justify-content:flex-start; padding:24px 5vw; background:linear-gradient(90deg,rgba(58,40,26,.42),rgba(58,40,26,.08) 47%,transparent 72%); } #startcard { width:400px; max-width:100%; padding:26px 28px 23px; border:1px solid var(--line); border-radius:28px; text-align:left; background:var(--theme-background); color:var(--ink); box-shadow:0 22px 65px rgba(58,40,26,.27),inset 0 1px 0 #fffaf0; } .edition { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:8px; letter-spacing:.14em; font-weight:800; color:var(--muted); } .edition span { font-size:7px; padding:5px 7px; border:1px solid var(--theme-accent-deep); border-radius:5px; color:var(--theme-brown); } #startcard h1 { margin:17px 0 9px; font-size:63px; line-height:.85; letter-spacing:-.055em; color:var(--theme-text-strong); background:none; filter:none; transform:skewY(-3deg); text-shadow:0 2px 0 #fffaf0; } #startcard h1 span { color:var(--theme-brown); font-size:65px; } #startcard .sub { font-size:10px; letter-spacing:.04em; color:var(--muted); text-transform:none; margin-top:17px; } #startcard .rule { width:100%; height:1px; margin:15px 0; background:linear-gradient(90deg,var(--theme-accent-deep),transparent); } #startcard .keys { width:100%; grid-template-columns:auto 1fr; gap:6px 12px; font-size:10px; margin-bottom:16px; color:var(--muted); } #startcard .keys kbd { font-size:9px; padding:1px 4px; background:var(--theme-panel); border-color:var(--line); } #startcard .keys span { align-self:center; } #startcard #go { width:100%; cursor:pointer; padding:14px 8px; font-size:12px; letter-spacing:.055em; border-radius:14px; animation:none; color:var(--ink); border-color:var(--theme-accent-deep); background:var(--theme-button); text-shadow:none; box-shadow:0 4px 0 #b08a5e,0 10px 22px #3a281a2e; transition:transform .15s,filter .15s; } #startcard #go:hover { transform:translateY(-2px); filter:brightness(1.06); } #startcard #go:hover { background:var(--theme-button-hover); } #startcard #go:focus-visible { outline:3px solid var(--theme-accent-deep); outline-offset:5px; } #start.loading #go { color:var(--muted); background:var(--theme-panel-alt); box-shadow:none; } #start.loading #go::before { border-color:var(--theme-track); border-top-color:var(--theme-brown); } #start.load-error #go { color:#7a2f1f; background:#f1d9d0; border-color:#b85a47; } #gohint { font-size:7px; letter-spacing:.04em; line-height:1.4; margin-top:15px; } #speedpicker, #runnerpicker { margin-bottom:12px; } #deckpicker { margin-bottom:12px; } body.running #quiz { border-radius:18px; border:2px solid #e3f1eb; background:linear-gradient(110deg,#184460,#23627a); padding:7px 16px 8px; box-shadow:0 4px 0 rgba(12,40,57,.35),0 9px 23px rgba(12,40,57,.18); } body.running #wordstats { background:rgba(21,54,72,.90); border-color:rgba(225,246,245,.65); } @media (max-width:820px) { #start { justify-content:center; padding:12px; } #startcard { width:360px; padding:19px 22px 20px; } #startcard h1, #startcard h1 span { font-size:54px; } } @media (max-height:650px) { #start { padding:10px 3vw; } #startcard { padding:16px 22px; max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; } #startcard h1, #startcard h1 span { font-size:45px; } #startcard h1 br { display:none; } #startcard h1 span { margin-left:8px; } #startcard .sub { margin-top:12px; } #startcard .rule { margin:10px 0; } #startcard .keys { margin-bottom:10px; } } /* Short landscape screens need a launch layout, not a clipped portrait card. The primary action and both choices stay visible without shrinking targets. */ @media (min-width:600px) and (max-height:500px) { #start { align-items:center; justify-content:center; padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); } #startcard { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); column-gap:24px; row-gap:8px; width:740px; padding:16px 22px; border-radius:22px; } #startcard .edition { grid-column:1 / -1; grid-row:1; } #startcard h1 { grid-column:1; grid-row:2; align-self:center; margin:8px 0; } #startcard h1, #startcard h1 span { font-size:34px; } #startcard .sub { grid-column:1; grid-row:3; margin:0; font-size:9px; } #startcard .rule { display:none; } #startcard .keys { grid-column:1; grid-row:4 / 8; align-self:start; margin:0; gap:5px 10px; } #startcard #speedpicker { grid-column:2; grid-row:2; margin:0; } #startcard #deckpicker { grid-column:2; grid-row:3 / 5; margin:0; align-self:center; } #startcard #go { grid-column:2; grid-row:5; align-self:start; min-height:44px; } #startcard #gohint { grid-column:2; grid-row:6; margin:7px 0 0; } body.running #quiz { top:max(8px,env(safe-area-inset-top)); padding:5px 12px 6px; left:0; right:0; margin:0 auto; width:min(420px,calc(100vw - 280px)); min-width:0; } body.running #quiz.giant-word { width:min(620px,calc(100vw - 300px)); } body.running #noun { min-height:0; } body.running #mistakehistory { top:calc(var(--quiz-bottom,82px) + 8px); left:max(8px,calc(var(--ios-safe-left,env(safe-area-inset-left,0px)) + 6px)); width:180px; padding:6px 10px; } body.running #mistakelist li { display:none; } body.running #mistakelist li:first-child { display:flex; } body.running #wordstats { left:max(12px,calc(var(--ios-safe-left,env(safe-area-inset-left,0px)) + 6px)); } body.running #pretzelhud { top:max(12px,env(safe-area-inset-top)); bottom:auto; right:max(12px,calc(var(--ios-safe-right,env(safe-area-inset-right,0px)) + 6px)); } #gameovercard { max-height:calc(100dvh - 20px); overflow-y:auto; touch-action:pan-y; padding:16px 24px; } #gameoverstats { gap:20px; } .result-actions { margin-top:20px; } } .touch-control { display:none; } @media (max-width:820px), (pointer:coarse) { #startcard .keyboard-control { display:none; } #startcard .touch-control { display:inline; color:var(--theme-brown); font-weight:750; } #startcard .keyboard-restart { display:none; } } @media (prefers-reduced-motion:reduce) { #go { animation:none; } } #pausebtn { position:absolute; right:max(16px,calc(var(--ios-safe-right,env(safe-area-inset-right,0px)) + 8px)); bottom:max(80px,calc(var(--ios-safe-bottom,env(safe-area-inset-bottom,0px)) + 76px)); display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--theme-accent-deep); border-radius:14px; color:var(--ink); background:var(--theme-panel); box-shadow:0 3px 12px #3a281a26; pointer-events:auto; cursor:pointer; } #pausebtn:hover { background:var(--theme-accent); } #pausebtn:focus-visible, #pausemenu button:focus-visible { outline:3px solid var(--theme-accent-deep); outline-offset:3px; } body:not(.running) #pausebtn { display:none; } #pausemenu { position:fixed; inset:0; margin:auto; width:min(360px,calc(100vw - 32px)); max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--paper-background); color:var(--ink); box-shadow:0 18px 70px #3a281a40; overflow-y:auto; touch-action:pan-y; } #pausemenu::backdrop { background:#3a281a99; } #pausetitle { margin:0 0 22px; font-size:24px; font-weight:650; } .pause-audio { display:grid; gap:10px; } #pausemenu .result-actions { margin-top:24px; } #resumegame { background:var(--theme-button); border-color:var(--theme-accent-deep); font-weight:700; } #resumegame:hover { background:var(--theme-button-hover); } #pauseexit { border-color:transparent; color:var(--muted); } #pausemenu #profilereport { position:static; transform:none; width:100%; max-height:none; margin-top:20px; } #profilereport { position:fixed; z-index:40; left:50%; top:max(12px,env(safe-area-inset-top)); transform:translateX(-50%); width:min(520px,calc(100vw - 24px)); max-height:calc(100vh - 176px); max-height:calc(100dvh - 176px); overflow:auto; padding:18px; box-sizing:border-box; background:var(--theme-panel); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 40px #3a281a40; pointer-events:auto; touch-action:pan-y; font:14px/1.45 "Segoe UI",Arial,sans-serif; } #profilereport[hidden] { display:none; } #profilereport h2 { margin:0 0 8px; font-size:20px; } #profilereport p { margin:8px 0; } #profilereport label { display:block; margin:12px 0 5px; } #profilereport input, #profilereport textarea { box-sizing:border-box; width:100%; border:1px solid var(--line); border-radius:8px; padding:9px; background:var(--theme-panel-alt); color:var(--ink); font:16px/1.4 "Segoe UI",Arial,sans-serif; user-select:text; -webkit-user-select:text; } #profilereport textarea { height:120px; margin-top:10px; font:12px/1.4 monospace; } #profilereport textarea[hidden] { display:none; } #profilereport button { margin:12px 0 0; min-height:44px; padding:10px 16px; border:1px solid var(--theme-accent-deep); border-radius:9px; background:var(--theme-button); color:var(--ink); font-weight:750; cursor:pointer; } #profilereport button:hover { background:var(--theme-button-hover); } #profilereport :is(input,textarea,button):focus-visible { outline:3px solid var(--theme-accent-deep); outline-offset:3px; } /* --------------------------------------------------- first-run tutorial -- */ /* A cream coach card, deliberately unlike the teal gameplay HUD so a lesson never reads as score telemetry. It hangs under the word sign, clear of the gate. Only the skip button takes pointer input; swipes on the card pass through to the canvas. */ #tutorial { position:absolute; inset:0; pointer-events:none; } #tutorial[hidden], body:not(.running) #tutorial, body.paused #tutorial { display:none; } body.tutorial-on #mistakehistory { visibility:hidden; } #tutorialcard { position:absolute; left:50%; top:calc(var(--quiz-bottom, 96px) + 12px); width:min(420px, calc(100vw - 24px)); padding:11px 16px 7px; box-sizing:border-box; border:2px solid #fffaf0; border-radius:18px; color:#1a1410; text-align:center; background:linear-gradient(180deg,#fdf9f1,#f1e6d2); box-shadow:0 4px 0 rgba(58,40,26,.32), 0 14px 32px rgba(20,14,8,.26); opacity:0; visibility:hidden; transform:translate(-50%,-6px) scale(.98); transition:opacity .16s, transform .2s, visibility .16s; } #tutorial.card-on #tutorialcard { opacity:1; visibility:visible; transform:translate(-50%,0); } #tutorialdots { display:flex; justify-content:center; gap:5px; margin:0 0 7px; } #tutorialdots i { width:18px; height:4px; border-radius:3px; background:rgba(58,40,26,.15); } #tutorialdots i.done { background:#c4a077; } #tutorialdots i.now { background:#795536; } #tutorialtitle { font-size:22px; line-height:1.2; font-weight:850; letter-spacing:-.01em; } #tutorialtext { margin-top:3px; font-size:14px; line-height:1.35; font-weight:600; color:#4a3a2c; } #tutorialtext:empty { display:none; } .tut-art { display:inline-block; padding:0 7px 1px; border-radius:7px; color:#0f2138; font-weight:900; box-shadow:inset 0 0 0 2px rgba(15,33,56,.22); } .tut-art.der { background:#5bb8ff; } .tut-art.die { background:#ff6fa8; } .tut-art.das { background:#46d98a; } #tutoriallanes { display:flex; justify-content:center; gap:8px; margin-top:8px; } #tutoriallanes[hidden] { display:none; } #tutoriallanes .tut-art { min-width:64px; padding:3px 8px 4px; font-size:16px; } #tutorialskip[hidden] { display:none; } #tutorialskip { pointer-events:auto; margin:4px auto 0; padding:5px 10px; border:0; background:none; color:#795536; font:700 10.5px/1.3 "Segoe UI", Arial, sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; cursor:pointer; } #tutorial:not(.card-on) #tutorialskip { pointer-events:none; } #tutorialskip:focus-visible { outline:3px solid #b08a5e; outline-offset:2px; border-radius:6px; } .tut-touch { display:none; } /* The move itself, drawn over the road between the hero and the obstacle: a swipe on touch screens, the key to press on keyboards. */ #tutorialgesture { position:absolute; left:50%; top:54%; width:170px; height:170px; margin:-85px 0 0 -85px; opacity:0; transition:opacity .18s; } #tutorial.gesture-on #tutorialgesture { opacity:1; } .tg-track { position:absolute; left:50%; top:50%; display:none; place-items:center; width:150px; height:52px; margin:-26px 0 0 -75px; border-radius:26px; background:rgba(26,20,16,.32); box-shadow:inset 0 0 0 2px rgba(255,250,240,.55); } #tutorialgesture[data-dir="up"] .tg-track, #tutorialgesture[data-dir="down"] .tg-track { width:52px; height:150px; margin:-75px 0 0 -26px; } .tg-arrow { color:rgba(255,250,240,.72); font:900 26px/1 "Segoe UI", Arial, sans-serif; } .tg-finger { position:absolute; left:50%; top:50%; display:none; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:#fffaf0; border:3px solid #795536; box-sizing:border-box; box-shadow:0 5px 14px rgba(20,14,8,.4); } #tutorialgesture[data-dir="left"] .tg-finger { animation:tgLeft 1.1s cubic-bezier(.35,0,.25,1) infinite; } #tutorialgesture[data-dir="right"] .tg-finger { animation:tgRight 1.1s cubic-bezier(.35,0,.25,1) infinite; } #tutorialgesture[data-dir="up"] .tg-finger { animation:tgUp 1.1s cubic-bezier(.35,0,.25,1) infinite; } #tutorialgesture[data-dir="down"] .tg-finger { animation:tgDown 1.1s cubic-bezier(.35,0,.25,1) infinite; } @keyframes tgLeft { 0% { transform:translateX(46px); opacity:0; } 18% { opacity:1; } 72% { transform:translateX(-46px); opacity:1; } 100% { transform:translateX(-50px); opacity:0; } } @keyframes tgRight { 0% { transform:translateX(-46px); opacity:0; } 18% { opacity:1; } 72% { transform:translateX(46px); opacity:1; } 100% { transform:translateX(50px); opacity:0; } } @keyframes tgUp { 0% { transform:translateY(46px); opacity:0; } 18% { opacity:1; } 72% { transform:translateY(-46px); opacity:1; } 100% { transform:translateY(-50px); opacity:0; } } @keyframes tgDown { 0% { transform:translateY(-46px); opacity:0; } 18% { opacity:1; } 72% { transform:translateY(46px); opacity:1; } 100% { transform:translateY(50px); opacity:0; } } .tg-key { position:absolute; left:50%; top:50%; display:grid; place-items:center; min-width:64px; height:60px; margin:-30px 0 0 -32px; padding:0 10px; box-sizing:border-box; border:2px solid #795536; border-bottom-width:7px; border-radius:13px; background:#fffaf0; color:#1a1410; font:900 30px/1 "Segoe UI", Arial, sans-serif; box-shadow:0 8px 18px rgba(20,14,8,.35); animation:tgKey 1.1s ease-in-out infinite; } @keyframes tgKey { 0%, 55%, 100% { transform:translateY(0); border-bottom-width:7px; } 30% { transform:translateY(5px); border-bottom-width:2px; } } .tg-badge { position:absolute; left:50%; top:2px; display:none; padding:3px 10px 4px; border-radius:10px; background:#ffd45e; color:#3a2410; font:900 12px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing:.14em; text-transform:uppercase; box-shadow:0 3px 0 rgba(58,40,26,.35); transform:translateX(-50%); } #tutorialgesture[data-flip="1"] .tg-badge { display:block; animation:tgBadge 1.1s ease-in-out infinite; } @keyframes tgBadge { 0%, 100% { transform:translateX(-50%) rotate(-5deg); } 50% { transform:translateX(-50%) rotate(5deg) scale(1.08); } } @media (max-width:820px), (pointer:coarse) { .tut-keys { display:none; } .tut-touch { display:inline; } .tg-track { display:grid; } .tg-finger { display:block; } .tg-key { display:none; } } @media (max-height:500px) { #tutorialcard { width:min(400px, calc(100vw - 260px)); min-width:250px; padding:8px 12px 5px; } #tutorialdots { margin-bottom:5px; } #tutorialtitle { font-size:18px; } #tutorialtext { font-size:12.5px; } #tutorialgesture { top:60%; transform:scale(.8); } } @media (prefers-reduced-motion:reduce) { .tg-finger, .tg-key, #tutorialgesture[data-flip="1"] .tg-badge { animation:none; } .tg-finger { opacity:0; } } .world-choice { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:16px 0; font-weight:700; } .world-choice select { font:inherit; color:inherit; background:#fff8ec; border:1px solid #c7bca6; border-radius:8px; padding:8px 12px; }