* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d1530; color: #fff; font-family: Inter, system-ui, sans-serif, "Noto Color Emoji"; user-select: none; -webkit-user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
:root { --t0: #2fd0ff; --t1: #ff5a5a; }

#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 2px 4px rgba(0,0,0,.55); }
#feed { position: absolute; left: 14px; top: 90px; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
#feed div { background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 6px; animation: fin .25s; }
@keyframes fin { from { transform: translateX(-30px); opacity: 0; } }
@keyframes aw { 0% { transform: scale(.3); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
#big { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 96px; line-height: 1; color: #fff; -webkit-text-stroke: 3px #2a1a50; text-shadow: 0 7px 0 #2a1a50; white-space: nowrap; }
#big small { display: block; font-size: 28px; -webkit-text-stroke: 1px #2a1a50; text-shadow: 0 3px 0 #2a1a50; margin-top: 8px; }
#big.pop { animation: pop .4s cubic-bezier(.2,1.8,.4,1); }
@keyframes pop { from { transform: translateX(-50%) scale(.3); } }
#replay { position: absolute; top: 96px; right: 20px; font-weight: 800; color: #ff4a5a; letter-spacing: 2px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
#help { position: absolute; left: 14px; bottom: 14px; background: rgba(12,14,34,.8); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.6; }
#help h4 { color: #ffd34d; letter-spacing: 3px; margin-bottom: 4px; } #help b { color: #ffd34d; }
#hint { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); font-weight: 700; background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 8px; }
#table { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(12,14,34,.9); border-radius: 14px; padding: 14px 18px; min-width: 460px; }
table { border-collapse: collapse; width: 100%; } td, th { padding: 4px 10px; text-align: left; font-size: 14px; } th { color: #9fb0e0; font-size: 12px; letter-spacing: 1px; }
tr.me td { color: #ffd34d; }
#tut { position: absolute; right: 16px; top: 90px; width: 320px; background: rgba(12,14,34,.88); border: 2px solid rgba(255,211,77,.5); border-radius: 14px; padding: 12px 14px; pointer-events: auto; }
#tut h4 { color: #ffd34d; letter-spacing: 3px; }
#tutstep { font-size: 17px; font-weight: 800; margin: 8px 0; line-height: 1.35; } #tutstep b { color: #ffd34d; }
#tutlist { font-size: 12px; color: #9fb0e0; line-height: 1.6; } #tutlist .ok { color: #7dff6a; } #tutlist .now { color: #fff; font-weight: 800; }
#tutskip { margin-top: 8px; font: 700 12px Inter, sans-serif, "Noto Color Emoji"; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; }

#tags { position: fixed; inset: 0; pointer-events: none; }
#tags div { position: absolute; transform: translate(-50%, -100%); font-weight: 800; font-size: 13px; white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 2px #000; text-align: center; }
#tags div em { display: block; font-style: normal; font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 22px; color: #ff5a4a; }

#menu, #pause, #end { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-start; padding: 16px 16px 16px max(16px, 4vw); background: radial-gradient(ellipse at 30% 30%, rgba(255,140,60,.25), transparent 55%), rgba(8,12,30,.35); }
#pause, #end { justify-content: center; background: rgba(8,12,30,.6); }
.card { width: min(560px, 100%); max-height: 100%; overflow: auto; background: rgba(16,20,48,.92); border: 2px solid rgba(255,255,255,.14); border-radius: 20px; padding: 22px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.card.wide { width: min(820px, 100%); text-align: center; }
.logo { font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 70px; line-height: .95; color: #ff4a5a; -webkit-text-stroke: 2px #4a0010; text-shadow: 0 6px 0 #4a0010; transform: rotate(-2deg); }
.logo span { display: block; color: #fff; -webkit-text-stroke-color: #1a1030; text-shadow: 0 6px 0 #1a1030; }
.logo.small { font-size: 54px; transform: none; text-align: center; }
.tag { margin: 12px 0; color: #d8def5; font-size: 15px; line-height: 1.4; }
.teams { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 6px 0 12px; font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 20px; }
.teams .tb { display: flex; align-items: center; gap: 8px; } .teams i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.teams .t0 { color: var(--t0); } .teams .t0 i { background: var(--t0); } .teams .t1 { color: var(--t1); } .teams .t1 i { background: var(--t1); }
.row { display: flex; align-items: center; gap: 12px; margin: 8px 0; } .row > span { width: 60px; font-weight: 800; color: #9fb0e0; font-size: 13px; letter-spacing: 1px; }
.seg { display: flex; gap: 6px; flex: 1; } .seg button { flex: 1; padding: 8px; border-radius: 10px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font: 800 14px Inter, sans-serif, "Noto Color Emoji"; cursor: pointer; }
.seg button small { display: block; font-weight: 400; font-size: 11px; color: #c9d1ee; } .seg button.on { border-color: #ffd34d; background: rgba(255,211,77,.15); }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .btns { grid-template-columns: 1fr; } .logo { font-size: 52px; } }
.go { margin-top: 12px; width: 100%; padding: 13px; border: 0; border-radius: 12px; cursor: pointer; font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 22px; letter-spacing: 1px;
  background: linear-gradient(180deg, #ff6a6a, #e0303a); color: #fff; box-shadow: 0 5px 0 #8a1020; }
.go.blue { background: linear-gradient(180deg, #5fd2ff, #2a8ff0); box-shadow: 0 5px 0 #1a5fb0; }
.go#tutbtn { background: linear-gradient(180deg, #ffe066, #ffb400); color: #3a1d6e; box-shadow: 0 5px 0 #b36b00; }
.go.small { font-size: 16px; padding: 8px; }
.go:disabled { filter: grayscale(1); opacity: .6; cursor: default; }
#lobby h3 { margin: 14px 0 6px; font-size: 13px; letter-spacing: 4px; color: #9fb0e0; }
#lcode { font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 26px; letter-spacing: 4px; color: #ffd34d; }
.lcols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.lcols > div { background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px; min-height: 120px; font-size: 14px; font-weight: 700; }
.lcols > div h5 { font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 16px; font-weight: 400; margin-bottom: 4px; }
#lt0 h5 { color: var(--t0); } #lt1 h5 { color: var(--t1); } .lcols .bot { color: #8a94bb; font-weight: 400; }
#lstatus { margin-top: 8px; font-size: 13px; color: #c9d1ee; text-align: center; }
.sens { display: block; margin-top: 14px; font-size: 12px; color: #9fb0e0; } .sens input { width: 100%; }
#endscore { font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 48px; margin: 6px 0; }
#endtitles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 12px; }
#endtitles div { background: rgba(255,211,77,.14); border: 2px solid #ffd34d; border-radius: 10px; padding: 6px 12px; font-weight: 800; } #endtitles div b { color: #ffd34d; display: block; font-size: 12px; letter-spacing: 2px; }
#touch { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#stick { position: absolute; left: 24px; bottom: 24px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.35); pointer-events: auto; }
#stick i { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: rgba(255,255,255,.6); }
#look { position: absolute; left: 35%; right: 0; top: 0; bottom: 0; pointer-events: auto; }
#tbtns { position: absolute; right: 12px; bottom: 110px; width: 260px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; pointer-events: auto; }
#tbtns button { width: 62px; height: 50px; border-radius: 12px; border: 0; background: rgba(255,255,255,.22); color: #fff; font: 800 11px Inter, sans-serif, "Noto Color Emoji"; }
#tbtns button.big { width: 90px; height: 90px; border-radius: 50%; font-size: 30px; background: rgba(255,90,90,.6); } #tbtns small { display: block; font-size: 10px; }

#fxov { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,0) 20%, rgba(255,255,255,.9) 70%), repeating-conic-gradient(from 0deg, rgba(0,0,0,.25) 0deg 2deg, transparent 2deg 9deg); mix-blend-mode: screen; }
#paper { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .07; background-image: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 7px); mix-blend-mode: multiply; }
.logo { color: #2fd0ff; -webkit-text-stroke: 2px #001a33; text-shadow: 0 6px 0 #001a33, 4px 0 0 #ff4a5a; }

/* ---------- HUD wie im Roblox-Original ---------- */
#board { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-shadow: none; }
#board .sb { position: relative; display: flex; align-items: center; gap: 14px; background: #f7f1ea; color: #1a1622; padding: 4px 22px; font: 800 46px "Roboto Condensed", "Arial Narrow", Inter, sans-serif, "Noto Color Emoji"; line-height: 1.05; }
#board .sb::before, #board .sb::after { content: ""; position: absolute; width: 12px; height: 12px; border: 3px solid #c9a27a; }
#board .sb::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; } #board .sb::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
#board .sb span { color: #c9a27a; font-size: 30px; } #board .sb .c { width: 16px; height: 16px; } #board .t0 { background: var(--t0); } #board .t1 { background: var(--t1); }
#board .sb b { position: relative; } #board .sb b.du::after { content: "DU"; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font: 800 9px Inter, sans-serif, "Noto Color Emoji"; background: #ff3a6a; color: #fff; padding: 0 5px; }
#clock { background: #1d1a22; color: #f0e8dc; font: 700 18px "Roboto Condensed", Inter, sans-serif, "Noto Color Emoji"; padding: 3px 12px; outline: 2px solid #3a3440; outline-offset: 2px; }
#clock.ot { color: #ffb400; }
#notes { position: absolute; right: 16px; top: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-shadow: none; }
#notes div { background: #f7f1ea; color: #1a1622; font: 800 15px "Roboto Condensed", Inter, sans-serif, "Noto Color Emoji"; padding: 4px 10px; animation: nin .25s ease-out, nout .4s ease-in 2.6s forwards; }
#notes div b { color: #1aa84a; margin-left: 6px; }
@keyframes nin { from { transform: translateX(40px); opacity: 0; } } @keyframes nout { to { transform: translateX(40px); opacity: 0; } }
#cross { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; gap: 22px; font: 400 26px Inter, sans-serif, "Noto Color Emoji"; color: rgba(255,255,255,.85); text-shadow: 0 0 3px rgba(0,0,0,.5); }
#chargebox { position: absolute; display: flex; gap: 3px; transform: translate(-50%, 0); padding: 3px; background: rgba(0,0,0,.35); }
#chargebox i { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); }
#chargebox i { position: relative; overflow: hidden; } #chargebox i u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffd34d; }
#chargebox.full i u { background: #4cff8a; } #chargebox.full i { box-shadow: 0 0 6px #4cff8a; border-color: #4cff8a; }
#keys { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-shadow: none; }
#keys div { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; background: rgba(247,241,234,.38); color: rgba(26,22,34,.6); font: 700 21px "Roboto Condensed", "Arial Narrow", Inter, sans-serif, "Noto Color Emoji"; transition: background .12s, color .12s; }
#keys div.on { background: #f7f1ea; color: #1a1622; }
#keys b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; background: #1d1a22; color: #fff; font: 800 13px Inter, sans-serif, "Noto Color Emoji"; }
#keys b.m { font-size: 14px; } #keys .sep { display: block; width: 18px; height: 2px; background: #f7f1ea; margin: 2px 0; }
#lb { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-shadow: none; }
#lb div { display: flex; align-items: center; gap: 8px; background: #1d1a22; color: #fff; padding: 4px 6px 4px 12px; font: 700 21px "Roboto Condensed", "Arial Narrow", Inter, sans-serif, "Noto Color Emoji"; }
#lb b { background: #f7f1ea; color: #1a1622; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px Inter, sans-serif, "Noto Color Emoji"; padding: 0 4px; }
#bottom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: none; }
#state { font: 800 14px Inter, sans-serif, "Noto Color Emoji"; color: #fff; text-shadow: 0 1px 3px #000; min-height: 18px; }
#items { display: flex; gap: 6px; }
#items .slot { position: relative; width: 74px; height: 72px; border: 2px dashed rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; }
#items .slot span { font-size: 38px; line-height: 1; } #items .slot b { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); background: #f7f1ea; color: #1a1622; font: 800 15px Inter, sans-serif, "Noto Color Emoji"; padding: 1px 7px; }
#items .slot.full { border-style: solid; border-color: #ffd34d; background: rgba(255,211,77,.18); }
#stam { display: flex; gap: 4px; margin-top: 6px; }
#stam i { width: 72px; height: 16px; background: rgba(20,20,26,.75); border: 2px solid rgba(255,255,255,.25); position: relative; overflow: hidden; }
#stam i::after { content: ""; position: absolute; inset: 0; width: var(--f, 100%); background: #3ff0a0; }
#awards { display: none; }

#fxsel { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
#fxsel button { padding: 6px 2px; border-radius: 10px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font: 800 11px Inter, sans-serif, "Noto Color Emoji"; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#fxsel button i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
#fxsel button small { font-weight: 400; font-size: 10px; color: #c9d1ee; }
#fxsel button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
@media (max-width: 560px) { #fxsel { grid-template-columns: repeat(4, 1fr); } }

.go.green { background: linear-gradient(180deg, #5fe08a, #23a85a); color: #fff; box-shadow: 0 5px 0 #136a38; }

#ballarrow { position: fixed; z-index: 2; pointer-events: none; transform: translate(-50%, -50%); font-size: 22px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); border-radius: 50%; border: 2px solid #fff; }
#ballarrow i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid #fff; transform-origin: 50% 0; }

#tutbtn { position: absolute; top: 14px; right: 16px; z-index: 11; padding: 8px 14px; border: 2px solid rgba(255,211,77,.7); border-radius: 10px; background: rgba(16,20,48,.85); color: #ffd34d; font: 800 14px Inter, sans-serif, "Noto Color Emoji"; cursor: pointer; }
#tutbtn:hover { background: rgba(255,211,77,.18); }
#slide { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(6,8,22,.72); padding: 16px; }
#slide .sl { width: min(620px, 100%); background: linear-gradient(160deg, #1b2050, #10132e); border: 2px solid rgba(255,255,255,.15); border-radius: 22px; padding: 28px 32px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: slide .45s cubic-bezier(.2,1.4,.4,1); }
#slide .sln { font: 800 12px Inter, sans-serif, "Noto Color Emoji"; letter-spacing: 4px; color: #9fb0e0; }
#slide .sli { font-size: 64px; margin: 6px 0; }
#slide h2 { font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-weight: 400; font-size: 46px; color: #ffd34d; -webkit-text-stroke: 1px #5a2a00; text-shadow: 0 4px 0 #5a2a00; }
#slide p { margin: 14px 0; font-size: 18px; line-height: 1.5; color: #e6eaff; } #slide p b { color: #ffd34d; }
#slide .slk { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 6px 0 16px; }
#slide .slk b { background: #f7f1ea; color: #1a1622; font: 800 16px Inter, sans-serif, "Noto Color Emoji"; padding: 8px 14px; border-radius: 8px; box-shadow: 0 4px 0 #9a8f80; } #slide .slk i { font-style: normal; color: #9fb0e0; font-weight: 800; }
#slide button { padding: 12px 34px; border: 0; border-radius: 12px; cursor: pointer; font-family: "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; font-size: 24px; background: linear-gradient(180deg, #ffe066, #ffb400); color: #3a1d6e; box-shadow: 0 5px 0 #b36b00; }
#slide small { display: block; margin-top: 8px; color: #9fb0e0; font-size: 12px; }
/* Ultimate-Filmsequenz: HUD ausblenden */
body.ulting #hud, body.ulting #tags, body.ulting #ballarrow, body.ulting #fxov { display: none !important; }
.credit { margin: 8px 0 0; font-size: 10px; opacity: 0.5; text-align: center; }
/* Avatar-Designer */
.go.purple { background: linear-gradient(180deg, #b07cff, #7a3cf0); color: #fff; box-shadow: 0 5px 0 #4a1fa0; }
#avatar { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 8, 22, .72); backdrop-filter: blur(6px); }
#avatar.hidden { display: none; }
.avcard { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.avwrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
#avprev { width: 300px; height: 380px; max-width: 100%; border-radius: 18px; background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.14), rgba(255,255,255,.02) 70%); cursor: grab; touch-action: none; }
.avopts { flex: 1; min-width: 260px; }
.avopts h5 { margin: 10px 0 6px; font: 800 12px Inter, sans-serif, "Noto Color Emoji"; letter-spacing: .08em; color: #c9d1ee; }
.avopts h5 small { font-weight: 400; letter-spacing: 0; opacity: .7; margin-left: 6px; }
.avrow { display: flex; flex-wrap: wrap; gap: 6px; }
.avrow button { padding: 7px 10px; border-radius: 10px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font: 700 12px Inter, sans-serif, "Noto Color Emoji"; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.avrow button i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.avrow button.on { border-color: #ffd23a; background: rgba(255,210,58,.16); }
.avrow.faces button { padding: 3px; }
.avrow.faces canvas { width: 54px; height: 54px; border-radius: 8px; display: block; }
#avdone { margin-top: 14px; width: 100%; }
/* ---------- Touch-Steuerung (Tablet/Handy) ---------- */
#touch { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#tzone { position: absolute; left: 0; top: 12%; width: 42%; bottom: 0; pointer-events: auto; touch-action: none; }
#look { position: absolute; left: 42%; right: 0; top: 0; bottom: 0; pointer-events: auto; touch-action: none; }
#stick { position: absolute; left: 18%; top: 72%; width: 22vmin; height: 22vmin; margin: -11vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.18)); border: 3px solid rgba(255,255,255,.35); pointer-events: none; opacity: .45; transition: opacity .15s, border-color .15s; bottom: auto; }
#stick.on { opacity: 1; }
#stick.sprint { border-color: #5ff0ff; box-shadow: 0 0 22px rgba(95,240,255,.7); }
#stick i { position: absolute; left: 50%; top: 50%; width: 9vmin; height: 9vmin; margin: -4.5vmin; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 3px 12px rgba(0,0,0,.4); }
#tbtns { position: absolute; right: 0; bottom: 0; width: 0; height: 0; pointer-events: none; }
#tbtns button, #titems button, #tpause, #tball { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: rgba(14,18,40,.55); color: #fff; font: 800 11px Inter, sans-serif, "Noto Color Emoji"; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; backdrop-filter: blur(3px); -webkit-user-select: none; user-select: none; }
#tbtns button b { font-size: 2.6vmin; line-height: 1; } #tbtns button small { font-size: 1.45vmin; letter-spacing: .03em; }
#tbtns .b-shoot { background: radial-gradient(circle at 40% 35%, rgba(255,120,120,.85), rgba(220,40,60,.75)); border-color: #fff; }
#tbtns .b-shoot b { font-size: 6vmin; } #tbtns .b-shoot small { font-size: 2vmin; }
#tbtns .b-red { border-color: #ff6a7a; } #tbtns .b-blue { border-color: #5fd0ff; }
#tbtns button.down, #titems button.down { transform: scale(.9); background: rgba(255,255,255,.35); }
#titems { position: absolute; right: 2vmin; top: 14vmin; display: flex; gap: 1.5vmin; pointer-events: none; }
#titems button { position: relative; width: 11vmin; height: 11vmin; border-color: #ffd23a; } #titems button b { font-size: 4.5vmin; } #titems button small { font-size: 1.5vmin; }
#titems button.hidden { display: none; }
#tpause { left: 2vmin; top: 2vmin; width: 8vmin; height: 8vmin; font-size: 2.6vmin; border-radius: 18px; }
#tball { left: 11vmin; top: 2vmin; height: 8vmin; padding: 0 2vmin; border-radius: 18px; font-size: 1.8vmin; display: none; }
body.training #tball, body.tutorial #tball { display: flex; }
body.touchmode #keys, body.touchmode #lb, body.touchmode #hint { display: none !important; }
body.touchmode .go { min-height: 54px; }
body.touchmode .seg button { min-height: 48px; }
/* Startfrage */
#askinput { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(6,8,22,.85); padding: 16px; }
#askinput.hidden { display: none; }
#askinput .card { max-width: 640px; text-align: center; }
#askinput .go.big { min-height: 150px; font-size: 22px; line-height: 1.2; } #askinput .go.big small { display: block; font: 600 12px Inter, sans-serif, "Noto Color Emoji"; opacity: .85; margin-top: 6px; }
body.touchmode #tut { left: 2vmin; right: auto; top: 12vmin; max-width: 36vw; padding: 10px 12px; }
body.touchmode #tutlist { display: none; }
body.touchmode #tutskip { font-size: 12px; padding: 8px 10px; }
/* Ultimate-Leiste (Regenbogen) über der Ausdauer */
#ultbar { position: relative; width: min(340px, 70vw); height: 16px; border-radius: 9px; background: rgba(10,12,30,.7); border: 2px solid rgba(255,255,255,.35); overflow: hidden; }
#ultbar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--u, 0%); background: linear-gradient(90deg, #ff3b5c, #ff9a1a, #ffe14a, #3be36a, #2fd6ff, #6a6cff, #c45cff); background-size: 340px 100%; transition: width .25s; }
#ultbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 10px Inter, sans-serif, "Noto Color Emoji"; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
#ultbar.full { border-color: #fff; box-shadow: 0 0 14px rgba(255,255,255,.8), 0 0 28px rgba(200,120,255,.7); animation: ultglow 1s linear infinite; }
#ultbar.full i { animation: ultflow 1.2s linear infinite; }
@keyframes ultflow { to { background-position: 340px 0; } }
@keyframes ultglow { 50% { box-shadow: 0 0 22px rgba(255,255,255,1), 0 0 40px rgba(120,200,255,.9); } }
/* ---------- Tor-Ablauf wie im Original ---------- */
#scorer { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-shadow: none; }
#scorer small { background: #1aa84a; color: #fff; font: 900 11px Inter, sans-serif, "Noto Color Emoji"; letter-spacing: .12em; padding: 2px 8px; border-radius: 3px 3px 0 0; }
#scorer b { display: flex; align-items: center; gap: 10px; background: #f7f1ea; color: #1a1622; padding: 6px 22px; font: 800 30px "Roboto Condensed", "Arial Narrow", Inter, sans-serif, "Noto Color Emoji"; }
#scorer b i { width: 14px; height: 14px; display: inline-block; }
#scorer em { margin-top: 4px; font: 700 13px Inter, sans-serif, "Noto Color Emoji"; font-style: normal; color: #fff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 4px; }
#scorer.pop { animation: pop .4s cubic-bezier(.2,1.8,.4,1); }
#scorer.hidden, #board.hidden { display: none; }
/* Replay im Kamera-Look */
#rec { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#rec.hidden { display: none; }
#rec .bt, #rec .bb { position: absolute; left: 0; right: 0; height: 11vh; background: #0b0b0e; }
#rec .bt { top: 0; } #rec .bb { bottom: 0; }
#rec b { position: absolute; left: 4.2vw; top: calc(11vh + 3vh); display: flex; align-items: center; gap: 10px; color: #fff; font: 800 clamp(16px, 2.4vw, 30px) "Roboto Condensed", Inter, sans-serif, "Noto Color Emoji"; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
#rec b u { width: .8em; height: .8em; border-radius: 50%; background: #ff3b5c; animation: blink 1s infinite; }
#rec s { position: absolute; width: 3vw; height: 3vw; border: 3px solid rgba(255,255,255,.9); }
#rec .c1 { left: 2vw; top: calc(11vh + 1.5vh); border-right: 0; border-bottom: 0; } #rec .c2 { right: 2vw; top: calc(11vh + 1.5vh); border-left: 0; border-bottom: 0; }
#rec .c3 { left: 2vw; bottom: calc(11vh + 1.5vh); border-right: 0; border-top: 0; } #rec .c4 { right: 2vw; bottom: calc(11vh + 1.5vh); border-left: 0; border-top: 0; }
body.replaying #hud, body.replaying #touch { visibility: hidden; }
#wipe, #confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#wipe { z-index: 20; } #confetti { z-index: 3; }
#wipe.hidden, #confetti.hidden { display: none; }
#countdown { position: absolute; left: 58%; top: 40%; font: 900 64px "Roboto Condensed", Impact, sans-serif, "Noto Color Emoji"; color: #fff; text-shadow: 0 3px 0 #2a1a50, 0 0 18px rgba(0,0,0,.5); }
#countdown.pop { animation: pop .35s cubic-bezier(.2,1.8,.4,1); }
#countdown.hidden { display: none; }
/* Spielende */
#endtoast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: rgba(14,16,30,.85); color: #c9d1ee; padding: 7px 16px; border-radius: 6px; font: 600 14px Inter, sans-serif, "Noto Color Emoji"; white-space: nowrap; text-shadow: none; animation: fin .3s; }
#endtoast i { color: #3be36a; font-style: normal; margin-right: 6px; } #endtoast b { color: #3be36a; margin-right: 6px; }
#endtoast .rw { margin-left: 10px; color: #ffd23a; font-weight: 800; } #endtoast .rw b { color: #ff9ad0; }
#endtoast.hidden { display: none; }
#tags .awb { background: #f4f0ea; color: #1a1622; padding: 4px 16px 5px; text-shadow: none; font: 800 17px "Roboto Condensed", Inter, sans-serif, "Noto Color Emoji"; box-shadow: 0 3px 10px rgba(0,0,0,.35); animation: awin .5s cubic-bezier(.2,1.6,.4,1) both; }
#tags .awb small { display: block; font: 600 10px Inter, sans-serif, "Noto Color Emoji"; color: #7a7488; }
#tags .awb::before, #tags .awb::after { content: ""; position: absolute; top: 6px; border: 11px solid #e6dfd4; }
#tags .awb::before { left: -16px; border-left-color: transparent; } #tags .awb::after { right: -16px; border-right-color: transparent; }
#tags .awb.mvp { background: #ffe08a; font-size: 21px; }
@keyframes awin { from { opacity: 0; transform: translate(-50%, -60%) scale(.6); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
#endtitles div small { display: block; font-size: 10px; opacity: .7; font-weight: 600; }


/* ---------- Fortschritt: Profil, Shop, Belohnung ---------- */
.coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -0.14em; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcc33 45%, #c98a10 100%); box-shadow: inset 0 0 0 .1em #e0a020, 0 1px 2px rgba(0,0,0,.4); }
#profile { margin: 10px 0 6px; background: linear-gradient(135deg, rgba(255,210,58,.16), rgba(120,90,255,.12)); border: 2px solid rgba(255,210,58,.45); border-radius: 14px; padding: 10px 12px; }
.pf-top { display: flex; align-items: center; gap: 12px; }
.pf-lv { width: 58px; height: 58px; border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 30%, #ffe680, #f0a818); color: #3a2400; box-shadow: 0 3px 0 #a86a00, 0 0 18px rgba(255,200,60,.45); }
.pf-lv small { font: 900 9px Inter, sans-serif, "Noto Color Emoji"; letter-spacing: .1em; } .pf-lv b { font: 900 24px "Luckiest Guy", Impact, sans-serif, "Noto Color Emoji"; line-height: 1; }
.pf-lv.small { width: 46px; height: 46px; } .pf-lv.small b { font-size: 19px; }
.pf-info { flex: 1; min-width: 0; }
.pf-name { font: 800 16px Inter, sans-serif, "Noto Color Emoji"; color: #fff; margin-bottom: 4px; }
.pf-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2); overflow: hidden; flex: 1; }
.pf-bar u { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffd23a, #ff9a1a); box-shadow: 0 0 10px rgba(255,200,60,.6); }
.pf-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 11px Inter, sans-serif, "Noto Color Emoji"; color: #fff; text-shadow: 0 1px 2px #000; }
.pf-hint { margin-top: 4px; font: 500 11px Inter, sans-serif, "Noto Color Emoji"; color: #c9d1ee; } .pf-hint b { color: #ffd23a; }
.pf-coins { display: flex; align-items: center; gap: 6px; font: 900 20px Inter, sans-serif, "Noto Color Emoji"; color: #ffd23a; background: rgba(0,0,0,.35); padding: 6px 12px; border-radius: 10px; }
#shopbtn { width: 100%; margin-top: 8px; } #shopbtn small { display: block; font: 600 10px Inter, sans-serif, "Noto Color Emoji"; opacity: .85; }
.go.gold { background: linear-gradient(180deg, #ffe066, #f0a818); color: #3a2400; box-shadow: 0 5px 0 #a86a00; }
#shop { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6,8,22,.78); backdrop-filter: blur(6px); }
#shop.hidden { display: none; }
.shopcard { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: center; }
.shbal { display: inline-flex; align-items: center; gap: 8px; font: 900 26px Inter, sans-serif, "Noto Color Emoji"; color: #ffd23a; margin: 4px 0 12px; }
.shgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.shitem { background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.14); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shitem canvas { width: 86px; height: 86px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.shitem b { font: 800 15px Inter, sans-serif, "Noto Color Emoji"; color: #fff; }
.shitem.eq { border-color: #3be36a; background: rgba(59,227,106,.12); } .shitem.own { border-color: rgba(90,180,255,.5); }
.shitem button { width: 100%; } .shitem .go.off { background: #3a3d52; color: #8a8fa8; box-shadow: 0 4px 0 #24263a; }
#reward { margin: 10px 0; background: rgba(255,210,58,.08); border: 2px solid rgba(255,210,58,.35); border-radius: 12px; padding: 10px 12px; }
#reward:empty { display: none; }
.rw-lines div { display: grid; grid-template-columns: 1fr 80px 80px; gap: 6px; font: 600 13px Inter, sans-serif, "Noto Color Emoji"; color: #dfe4f6; padding: 2px 0; animation: fin .3s both; }
.rw-lines div:nth-child(2) { animation-delay: .1s } .rw-lines div:nth-child(3) { animation-delay: .2s } .rw-lines div:nth-child(4) { animation-delay: .3s } .rw-lines div:nth-child(5) { animation-delay: .4s } .rw-lines div:nth-child(6) { animation-delay: .5s }
.rw-lines em { color: #9fe0ff; font-style: normal; text-align: right; font-weight: 800; } .rw-lines b { color: #ffd23a; text-align: right; }
.rw-lines .lvup span { color: #ffd23a; font-weight: 900; }
.rw-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rw-bar.flash .pf-lv { animation: pop .5s cubic-bezier(.2,1.8,.4,1); }
.shtabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.shtabs button { padding: 7px 12px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: 800 12px Inter, sans-serif, "Noto Color Emoji"; cursor: pointer; }
.shtabs button.on { border-color: #ffd23a; background: rgba(255,210,58,.18); color: #ffd23a; }
.shic { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 3px var(--c, rgba(255,255,255,.15)); }
/* Namensrahmen */
.fr-gold { padding: 1px 8px; border: 2px solid #ffd23a; border-radius: 6px; background: rgba(255,210,58,.18); box-shadow: 0 0 10px rgba(255,210,58,.6); }
.fr-fire { padding: 1px 8px; border: 2px solid #ff6a1a; border-radius: 6px; background: linear-gradient(0deg, rgba(255,90,20,.45), rgba(255,200,60,.1)); box-shadow: 0 0 12px rgba(255,90,20,.8); }
.fr-diamond { padding: 1px 8px; border: 2px solid #bff6ff; border-radius: 6px; background: rgba(140,230,255,.2); box-shadow: 0 0 14px rgba(160,240,255,.9); }
.fr-rainbow { padding: 1px 8px; border-radius: 6px; border: 2px solid transparent; background: linear-gradient(rgba(20,20,40,.6), rgba(20,20,40,.6)) padding-box, linear-gradient(90deg,#f44,#fa2,#fe4,#4e6,#4cf,#86f) border-box; animation: frhue 2s linear infinite; }
@keyframes frhue { to { filter: hue-rotate(360deg); } }
.shic.fr-gold, .shic.fr-fire, .shic.fr-diamond, .shic.fr-rainbow { border-radius: 50%; padding: 0; }
.devsel { display: flex; width: 100%; margin-bottom: 10px; }
.devsel button { flex: 1; padding: 10px 6px !important; font-size: 14px !important; }
#fps { position: fixed; left: 8px; bottom: 6px; z-index: 50; font: 700 11px Inter, sans-serif; color: rgba(255,255,255,.55); pointer-events: none; display: none; }
#fps.on { display: block; }
#avprev { position: sticky; top: 0; align-self: flex-start; }
.avrow.chars button { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; background: linear-gradient(135deg, rgba(255,210,58,.12), rgba(120,140,255,.10)); }
.avrow.chars button b { font: 800 13px Inter, sans-serif; }
.avrow.chars button small { font: 500 10px Inter, sans-serif; opacity: .7; }

/* Highlight-Video */
#hltitle { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(8, 8, 14, 0.82); pointer-events: none; animation: hlin .35s ease-out; }
#hltitle.hidden { display: none; }
#hltitle small { color: #ffd24a; font: 900 18px Inter, sans-serif; letter-spacing: .2em; }
#hltitle b { color: #fff; font: 400 64px "Luckiest Guy", Inter, sans-serif, "Noto Color Emoji"; letter-spacing: .02em; text-shadow: 0 4px 0 #000; }
#hltitle em { color: #9ad0ff; font: 800 24px Inter, sans-serif; font-style: normal; }
@keyframes hlin { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
button.go.hl { background: linear-gradient(#ffd24a, #f0a020); color: #2a1a00; }