:root {
  --bg: #14101f; --pink: #ff3d7f; --yellow: #ffd23f; --cyan: #2de2e6; --green: #4ade80; --red: #ff4b4b; --purple: #8b5cf6;
  --card: rgba(22, 16, 38, 0.9); --line: rgba(255, 255, 255, 0.16); --ink: #fff;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
  --btn: 58px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.off { display: none !important; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

/* Laden */
#loading { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 30%, #3b1d5e, var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .6s; }
#loading.gone { opacity: 0; pointer-events: none; }
.ld-title, .logo { font-weight: 900; font-size: clamp(40px, 12vw, 104px); letter-spacing: -1px; line-height: .92; text-align: center;
  color: var(--yellow); text-shadow: 0 5px 0 #b4004e, 0 10px 30px rgba(0,0,0,.55); transform: rotate(-3deg); }
.ld-title span, .logo span { color: var(--pink); text-shadow: 0 5px 0 #6b0030, 0 10px 30px rgba(0,0,0,.5); display: block; }
.logo { animation: logoBob 3s ease-in-out infinite; }
@keyframes logoBob { 50% { transform: rotate(-1deg) scale(1.03); } }
.ld-sub { opacity: .8; }
.ld-bar { width: 180px; height: 8px; border-radius: 6px; background: #ffffff22; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--pink), var(--yellow)); animation: ld 1s ease-in-out infinite alternate; }
@keyframes ld { to { transform: translateX(150%); } }

/* Overlays */
#disco { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .25s;
  background: conic-gradient(from 0deg, #ff2bd6, #2de2e6, #ffe14d, #7cff4f, #ff7a1a, #8b5cf6, #ff2bd6); mix-blend-mode: overlay; }
body.turnup #disco { opacity: .36; animation: spin 1.2s linear infinite, pulse .469s ease-out infinite; }
body.turnup #c { animation: hue 2s linear infinite; }
body.q-low.turnup #c { animation: none; }
@keyframes spin { from { transform: rotate(0) scale(2.2); } to { transform: rotate(360deg) scale(2.2); } }
@keyframes pulse { 0% { filter: brightness(1.6); } 100% { filter: brightness(.9); } }
@keyframes hue { from { filter: hue-rotate(0) saturate(1.5); } to { filter: hue-rotate(360deg) saturate(1.5); } }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at center, transparent 55%, rgba(20,10,40,.38) 100%); }
body.turnup #vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(255,43,214,.35) 100%); animation: vig .469s ease-out infinite; }
@keyframes vig { 0% { opacity: 1; } 100% { opacity: .5; } }
#flash { position: fixed; inset: 0; z-index: 50; background: #000; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #tasks, #map { pointer-events: auto; }
#topbar { position: absolute; top: calc(8px + var(--st)); left: calc(10px + var(--sl)); right: calc(10px + var(--sr)); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; font-size: 14px; white-space: nowrap; display: flex; gap: 8px; align-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
#phaseChip { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; justify-content: center; font-weight: 800; }
.chip.hot { background: #7a0f3a; border-color: var(--pink); animation: wob .6s ease-in-out infinite alternate; }
.chip.warn { background: #8a5a00; border-color: var(--yellow); animation: wob .25s ease-in-out infinite alternate; }
.chip.go { background: #14532d; border-color: var(--green); }
@keyframes wob { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
.chip.slack b { color: var(--yellow); font-size: 15px; }
.chip.dmg b { color: #ff9b5a; font-size: 14px; }
.meters { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; }
.meter { position: relative; flex: 1; height: 28px; background: rgba(0,0,0,.55); border: 2px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.meter .fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .25s; }
.meter.sus .fill { background: linear-gradient(90deg, #ffb020, #ff3b3b); }
.meter.sus.danger { animation: alarm .5s infinite alternate; }
@keyframes alarm { to { border-color: var(--red); box-shadow: 0 0 18px var(--red); } }
.meter.charm .fill { background: linear-gradient(90deg, #ff8fb8, var(--pink)); }
#charmCap { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #fff; opacity: .8; }
.meter span { position: relative; z-index: 1; font-size: 13px; line-height: 24px; padding-left: 8px; text-shadow: 0 1px 2px #000; font-weight: 700; }
.ibtn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.35); flex: none; }
#goal { position: absolute; left: 50%; transform: translateX(-50%); top: calc(92px + var(--st)); background: var(--yellow); color: #1a1a1a; font-weight: 900; font-size: 14px; padding: 6px 14px; border-radius: 20px; box-shadow: 0 3px 0 #b38900; white-space: nowrap; animation: goalB 1.2s ease-in-out infinite; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
@keyframes goalB { 50% { transform: translateX(-50%) scale(1.05); } }
#tasks { position: absolute; top: calc(92px + var(--st)); left: calc(10px + var(--sl)); max-width: 290px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; overflow: hidden; }
#tasksHead { padding: 7px 10px; font-weight: 800; cursor: pointer; }
#tasksList { list-style: none; margin: 0; padding: 0 10px 8px; }
#tasksList li { display: flex; gap: 6px; padding: 3px 0; align-items: baseline; }
#tasksList li b { margin-left: auto; color: var(--yellow); padding-left: 6px; white-space: nowrap; }
#tasksList li.done { opacity: .6; text-decoration: line-through; }
#map { position: absolute; top: calc(92px + var(--st)); right: calc(10px + var(--sr)); width: 204px; height: 140px; border-radius: 12px; border: 2px solid var(--line); box-shadow: 0 3px 0 rgba(0,0,0,.35); background: #3a6e30; }
#toasts { position: absolute; left: 50%; transform: translateX(-50%); top: calc(130px + var(--st)); display: flex; flex-direction: column; gap: 5px; align-items: center; width: min(460px, 60vw); }
.toast { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--cyan); padding: 7px 12px; border-radius: 10px; font-size: 13px; animation: tin .3s ease-out; transition: opacity .4s, transform .4s; text-align: center; }
.toast.good { border-left-color: var(--green); } .toast.warn { border-left-color: var(--yellow); } .toast.bad { border-left-color: var(--red); background: #3a0a14; }
.toast.tu { border-left-color: var(--pink); background: linear-gradient(90deg, #6d28d9, #db2777); } .toast.love { border-left-color: var(--pink); background: #4a1030; } .toast.info { border-left-color: var(--cyan); }
.toast.out { opacity: 0; transform: translateY(-12px); }
@keyframes tin { from { transform: translateY(-16px); opacity: 0; } }

#pops, #bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pop { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 30px; color: #fff; -webkit-text-stroke: 2px #1a0010; text-shadow: 0 4px 0 #1a0010; white-space: nowrap; will-change: transform; }
.pop.kick { color: var(--yellow); font-size: 38px; text-shadow: 0 4px 0 #b4004e; }
.pop.bonk { color: #fff; font-size: 30px; text-shadow: 0 3px 0 #2563eb; }
.pop.boom { color: #ff7a1a; font-size: 54px; text-shadow: 0 5px 0 #7a1a00, 0 0 30px #ffb020; }
.pop.money { color: #7cff4f; font-size: 20px; -webkit-text-stroke: 1px #052e16; text-shadow: 0 2px 0 #052e16; }
.pop.sus { color: #ffb020; font-size: 18px; -webkit-text-stroke: 1px #3a1a00; text-shadow: 0 2px 0 #3a1a00; }
.pop.small { font-size: 22px; color: #fde68a; }
.pop.love { color: var(--pink); font-size: 44px; -webkit-text-stroke: 2px #fff; }
.pop.stink { color: #a3e635; font-size: 34px; text-shadow: 0 4px 0 #365314; }
.bubble { position: absolute; left: 0; top: 0; background: #fff; color: #111; font-weight: 800; font-size: 14px; padding: 7px 11px; border-radius: 14px; max-width: 240px; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.25); line-height: 1.2; animation: bin .2s ease-out; }
.bubble b { display: block; font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: 1px; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble.teacher { background: #fff6c8; } .bubble.teacher::after { border-top-color: #fff6c8; }
.bubble.kid { background: #ffd6e7; font-size: 13px; } .bubble.kid::after { border-top-color: #ffd6e7; }
.bubble.player { background: #c8ffd9; } .bubble.player::after { border-top-color: #c8ffd9; }
.bubble.edge { opacity: .85; }
@keyframes bin { from { opacity: 0; } }
#roomlabel { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 900; font-size: clamp(20px, 5vw, 34px); color: #fff; text-shadow: 0 3px 0 #000, 0 0 20px rgba(0,0,0,.6); opacity: 0; white-space: nowrap; }
#roomlabel.show { animation: rl 1.8s ease-out forwards; }
@keyframes rl { 0% { opacity: 0; transform: translateX(-50%) translateY(10px); } 15%, 70% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; } }
#combo { position: absolute; right: calc(16px + var(--sr)); top: calc(245px + var(--st)); font-weight: 900; font-size: 20px; color: var(--yellow); text-shadow: 0 3px 0 #b4004e; opacity: 0; text-align: right; }
#combo b { font-size: 36px; } #combo small { display: block; font-size: 12px; color: #fff; }
#combo.show { animation: cmb 2.6s ease-out forwards; } #combo.hot b { color: #ff7a1a; }
@keyframes cmb { 0% { opacity: 1; transform: scale(1.5) rotate(-6deg); } 12% { transform: scale(1) rotate(-3deg); } 80% { opacity: 1; } 100% { opacity: 0; } }

#bigtext { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0); font-weight: 900; font-size: clamp(32px, 8.5vw, 100px); width: 94vw; text-align: center; line-height: 1;
  color: var(--yellow); -webkit-text-stroke: 3px #1a0010; text-shadow: 0 6px 0 #b4004e, 0 0 40px rgba(255,61,127,.8); pointer-events: none; opacity: 0; }
#bigtext.show { animation: pop .9s cubic-bezier(.2,1.6,.4,1) forwards; }
#bigtext.tu { background: linear-gradient(90deg, #ff2bd6, #ffe14d, #2de2e6, #7cff4f, #ff2bd6); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop .7s cubic-bezier(.2,1.6,.4,1) forwards, slide .5s linear infinite; }
#bigtext.bad { color: var(--red); text-shadow: 0 6px 0 #5a0000, 0 0 40px rgba(255,0,0,.8); }
#bigtext.warn { color: var(--yellow); } #bigtext.go { color: var(--green); text-shadow: 0 6px 0 #14532d, 0 0 40px rgba(74,222,128,.7); }
#bigtext.fire { color: #ff7a1a; text-shadow: 0 6px 0 #7a1a00, 0 0 50px #ff7a1a; }
#bigtext.day { color: #fff; font-size: clamp(28px, 7.5vw, 76px); text-shadow: 0 6px 0 var(--pink), 0 0 30px rgba(0,0,0,.6); }
@keyframes pop { 0% { transform: translate(-50%,-50%) scale(0) rotate(-12deg); opacity: 0; } 30% { opacity: 1; } 60% { transform: translate(-50%,-50%) scale(1.1) rotate(3deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1) rotate(-2deg); opacity: 0; } }
@keyframes slide { to { background-position: 200% 0; } }

#status { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--sb)); background: var(--card); border: 1px solid var(--line); padding: 7px 14px; border-radius: 20px; font-size: 14px; white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
#status.bad { background: #7a0f1a; border-color: var(--red); animation: wob .2s infinite alternate; } #status.nerd { background: #1e3a8a; border-color: #60a5fa; }
#prompt { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(62px + var(--sb)); background: var(--yellow); color: #1a1a1a; font-weight: 800; padding: 8px 14px; border-radius: 14px; font-size: 15px; box-shadow: 0 4px 0 #b38900; white-space: nowrap; animation: bob 1s ease-in-out infinite; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
#prompt kbd { background: #1a1a1a; color: var(--yellow); border-radius: 6px; padding: 1px 7px; margin-right: 6px; font-family: inherit; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px); } }

/* Steuerung */
#controls { position: absolute; inset: 0; pointer-events: none; }
#stickZone { position: absolute; left: 0; bottom: 0; width: 46vw; height: 46vh; display: none; pointer-events: auto; touch-action: none; }
#stickBase { position: absolute; left: 90px; top: 70%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.2)); border: 2px solid rgba(255,255,255,.35); opacity: .55; transition: opacity .15s; pointer-events: none; }
#stickBase.on { opacity: 1; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 4px 0 rgba(0,0,0,.3); }
body.touch #stickZone { display: block; }
#slackRow { position: absolute; left: calc(14px + var(--sl)); bottom: calc(16px + var(--sb)); display: flex; gap: 7px; pointer-events: auto; }
body.touch #slackRow { bottom: auto; top: calc(250px + var(--st)); flex-direction: column; }
.sbtn, .abtn { position: relative; width: 50px; height: 50px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); font-size: 22px; box-shadow: 0 4px 0 rgba(0,0,0,.4); pointer-events: auto; display: grid; place-items: center; padding: 0; }
.sbtn small, .abtn small { position: absolute; bottom: 1px; right: 4px; font-size: 9px; opacity: .65; }
body.touch .sbtn small, body.touch .abtn small { display: none; }
.sbtn:active, .abtn:active, .abtn.press { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
#actGrid { position: absolute; right: calc(14px + var(--sr)); bottom: calc(14px + var(--sb)); display: grid; grid-template-columns: var(--btn) var(--btn); gap: 8px; pointer-events: auto; }
#actGrid .abtn { width: var(--btn); height: var(--btn); font-size: 27px; }
.abtn.kick { background: linear-gradient(160deg, #ff7a1a, #e11d48); border-color: #ffb37a; }
.abtn.punch { background: linear-gradient(160deg, #f59e0b, #b45309); border-color: #fcd34d; }
.abtn.item { background: linear-gradient(160deg, #0ea5e9, #6d28d9); border-color: #7dd3fc; }
.abtn.cyc { font-size: 22px !important; }
.abtn.dim { opacity: .5; }
.abtn i { position: absolute; top: -7px; right: -7px; background: var(--pink); font-style: normal; font-size: 11px; border-radius: 10px; padding: 1px 6px; font-weight: 900; }
.abtn i:empty { display: none; }
#turnup { position: absolute; right: calc(14px + var(--sr)); bottom: calc(220px + var(--sb)); width: 110px; height: 110px; border-radius: 50%; pointer-events: auto;
  border: 4px solid #fff; color: #fff; font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: 1px; text-shadow: 0 2px 0 #000;
  background: conic-gradient(rgba(0,0,0,0) var(--cd, 100%), rgba(0,0,0,.62) 0), linear-gradient(135deg, #ff2bd6, #8b5cf6 40%, #2de2e6 75%, #ffe14d);
  box-shadow: 0 6px 0 #5b1a7a; transition: transform .1s; }
#turnup em { position: absolute; left: 0; right: 0; bottom: 18px; font-style: normal; font-size: 12px; opacity: .9; }
#turnup small { position: absolute; top: 8px; left: 0; right: 0; font-size: 10px; opacity: .7; }
body.touch #turnup small { display: none; }
#turnup.ready { animation: tuReady 1s ease-in-out infinite; }
#turnup.active { animation: tuActive .234s ease-in-out infinite alternate; }
#turnup:active { transform: scale(.94); }
@keyframes tuReady { 0%,100% { box-shadow: 0 6px 0 #5b1a7a, 0 0 0 0 rgba(255,43,214,.8); transform: rotate(-4deg); } 50% { box-shadow: 0 6px 0 #5b1a7a, 0 0 0 20px rgba(255,43,214,0); transform: rotate(4deg) scale(1.06); } }
@keyframes tuActive { from { transform: scale(1.0) rotate(-8deg); filter: hue-rotate(0); } to { transform: scale(1.16) rotate(8deg); filter: hue-rotate(180deg); } }
body.in-dialog #controls, body.in-dialog #prompt, body.in-dialog #status, body.in-dialog #goal { visibility: hidden; }

/* Dialog */
#dialog { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(transparent 40%, rgba(10,6,20,.55)); padding: 12px calc(12px + var(--sr)) calc(12px + var(--sb)) calc(12px + var(--sl)); pointer-events: auto; }
.dlg-card { width: min(700px, 100%); max-height: 70vh; overflow-y: auto; background: var(--card); border: 2px solid var(--pink); border-radius: 20px; padding: 14px 16px 16px; box-shadow: 0 10px 0 rgba(0,0,0,.4); animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.dlg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#dPortrait { font-size: 34px; width: 50px; height: 50px; display: grid; place-items: center; background: #fff3; border-radius: 50%; flex: none; }
#dSpeaker { font-size: 18px; color: var(--yellow); }
#dText { font-size: 16px; line-height: 1.45; }
#dText .desc { opacity: .8; font-size: 14px; }
#dText .shout { color: var(--red); font-size: 20px; }
#dText .good { color: var(--green); } #dText .bad { color: #ff7b7b; }
#dText .hot { margin-top: 8px; background: linear-gradient(90deg, #ff7a1a, #e11d48); padding: 6px 10px; border-radius: 10px; font-weight: 800; display: inline-block; }
#dText .boss { font-weight: 900; color: var(--yellow); margin-bottom: 6px; }
#dText ul.ev { margin: 8px 0; padding-left: 18px; }
#dText .rating { font-size: 52px; text-align: center; animation: pop2 .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop2 { from { transform: scale(0) rotate(-30deg); } }
#dHint { margin-top: 8px; font-size: 13px; color: var(--cyan); }
#dOpts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#dOpts.grid { display: grid; grid-template-columns: 1fr 1fr; }
.opt { display: flex; gap: 10px; align-items: center; text-align: left; padding: 11px 12px; border-radius: 14px; border: 2px solid var(--line); background: #ffffff12; font-size: 15px; line-height: 1.25; }
.opt:hover:not(:disabled) { background: #ff3d7f33; border-color: var(--pink); }
.opt:disabled { opacity: .4; cursor: not-allowed; }
.opt kbd { flex: none; background: var(--pink); color: #fff; border-radius: 7px; padding: 2px 7px; font-family: inherit; font-size: 13px; }
.opt small { display: block; opacity: .7; font-size: 12px; margin-top: 2px; }
body.touch .opt kbd { display: none; }

/* Screens */
#screen { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: calc(14px + var(--st)) calc(14px + var(--sr)) calc(14px + var(--sb)) calc(14px + var(--sl)); background: radial-gradient(ellipse at center, rgba(20,16,31,.45), rgba(20,16,31,.88)); }
.scr-card { width: min(580px, 100%); max-height: 100%; overflow-y: auto; text-align: center; padding: 20px 18px; background: var(--card); border: 2px solid var(--line); border-radius: 24px; box-shadow: 0 12px 0 rgba(0,0,0,.4); animation: up .3s ease-out; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.scr-card.title { background: transparent; border: 0; box-shadow: none; }
.scr-card h2 { margin: 6px 0 8px; font-size: 27px; color: var(--yellow); } .scr-card h3 { margin: 14px 0 6px; font-size: 16px; color: var(--cyan); text-align: left; }
.scr-card h2.bad { color: var(--red); } .scr-card h2.win { color: var(--pink); font-size: 34px; }
.tag { opacity: .9; line-height: 1.4; margin: 8px 0 14px; } .fine { font-size: 12px; opacity: .6; margin-top: 12px; } .best { margin-top: 12px; font-size: 13px; color: var(--cyan); }
.btns { display: flex; flex-direction: column; gap: 9px; align-items: stretch; max-width: 380px; margin: 0 auto; }
.btns.row { flex-direction: row; justify-content: center; } .btns.row > button { flex: 1; }
.btns button, .skill button, .setrow button, .seg button { padding: 12px 16px; border-radius: 16px; border: 2px solid var(--line); background: #ffffff14; font-size: 16px; font-weight: 800; box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.btns button.primary { background: linear-gradient(135deg, var(--pink), #ff7a1a); border-color: #ffb3c9; font-size: 18px; }
button.danger { background: #7a0f1a !important; border-color: var(--red) !important; }
.btns button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.link { background: none; border: 0; opacity: .6; margin-top: 10px; text-decoration: underline; box-shadow: none; }
.tut-ico, .go-ico { font-size: 62px; }
p.tut { line-height: 1.5; font-size: 16px; text-align: left; }
.dots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 16px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff3; } .dots i.on { background: var(--pink); }
.tasklist { list-style: none; padding: 0; text-align: left; margin: 10px auto; max-width: 420px; } .tasklist li { padding: 5px 0; border-bottom: 1px solid var(--line); } .tasklist li.no { opacity: .6; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 12px 0; }
.stats div { background: #ffffff10; border-radius: 14px; padding: 7px 4px; display: flex; flex-direction: column; } .stats span { font-size: 20px; } .stats b { font-size: 15px; } .stats small { opacity: .7; font-size: 11px; }
.rank { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px; border-radius: 18px; background: #ffffff12; margin: 4px 0; }
.rank span { font-size: 52px; font-weight: 900; line-height: 1; color: var(--yellow); text-shadow: 0 4px 0 #b4004e; animation: pop2 .6s cubic-bezier(.2,1.6,.4,1); }
.rank.rS span { color: #ff2bd6; } .rank.rF span { color: #94a3b8; } .rank small { font-size: 13px; text-align: left; }
.achs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; } .achip { background: linear-gradient(90deg, #6d28d9, #db2777); padding: 4px 10px; border-radius: 12px; font-size: 13px; }
.skills { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; text-align: left; }
.skill { display: flex; align-items: center; gap: 10px; background: #ffffff0d; border-radius: 14px; padding: 7px 10px; }
.skill .si { font-size: 26px; } .skill .st { flex: 1; } .skill .st small { display: block; opacity: .75; font-size: 12px; } .skill .lv { color: var(--pink); font-size: 12px; letter-spacing: 2px; }
.skill button { padding: 8px 12px; font-size: 14px; white-space: nowrap; } .skill.maxed { opacity: .65; }
.wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.wgrid button { padding: 8px 4px; border-radius: 14px; border: 2px solid var(--line); background: #ffffff10; font-size: 13px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wgrid button span { font-size: 26px; } .wgrid button small { font-weight: 400; opacity: .7; font-size: 10px; } .wgrid button.on { border-color: var(--green); background: #14532d88; }
.setrow { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; margin: 10px 0; } .setrow small { opacity: .65; font-size: 12px; }
.seg { display: flex; gap: 6px; } .seg button { flex: 1; padding: 9px 6px; font-size: 14px; } .seg button.on { border-color: var(--green); background: #14532d; }
.daygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }
.dayb { padding: 10px; border-radius: 14px; border: 2px solid var(--line); background: #ffffff12; text-align: left; font-size: 15px; } .dayb small { display: block; opacity: .7; font-size: 12px; }
.achlist { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 14px; }
.ach { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: #ffffff08; opacity: .6; } .ach.ok { opacity: 1; background: #6d28d933; }
.ach span { font-size: 26px; } .ach small { display: block; font-size: 12px; opacity: .75; }
.help p { text-align: left; line-height: 1.6; } .help kbd { background: #ffffff22; border-radius: 6px; padding: 1px 6px; font-family: inherit; }
.achpop { position: fixed; z-index: 60; left: 50%; top: calc(14px + var(--st)); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: linear-gradient(90deg, #6d28d9, #db2777); border: 2px solid #fff; border-radius: 16px; padding: 8px 16px; box-shadow: 0 6px 0 rgba(0,0,0,.4); animation: achIn .5s cubic-bezier(.2,1.6,.4,1); transition: opacity .5s, transform .5s; }
.achpop span { font-size: 32px; } .achpop small { display: block; font-size: 11px; opacity: .85; } .achpop.out { opacity: 0; transform: translateX(-50%) translateY(-20px); }
@keyframes achIn { from { transform: translateX(-50%) scale(0); } }

/* Abblende */
#fade { position: fixed; inset: 0; z-index: 60; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.6s; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
#fade.on { opacity: 1; pointer-events: auto; }
#fade .fin p { opacity: 0; font-size: clamp(18px, 4.5vw, 30px); line-height: 1.4; margin: 18px auto; max-width: 640px; }
#fade.on .f1 { animation: fin 1s 1.6s forwards; } #fade.on .f2 { animation: fin 1s 3.2s forwards; color: var(--pink); }
#fade.on .f3 { animation: fin 1s 5.2s forwards; font-size: clamp(14px, 3.5vw, 20px); color: #bbb; }
@keyframes fin { to { opacity: 1; } }

/* Handy hochkant */
@media (max-width: 640px) {
  :root { --btn: 54px; }
  #topbar { gap: 5px; }
  .chip { font-size: 12px; padding: 5px 8px; }
  #dayChip span { display: none; }
  .meter { height: 24px; } .meter span { line-height: 20px; font-size: 11px; }
  .chip.slack b, .chip.dmg b { font-size: 12px; }
  .ibtn { width: 32px; height: 32px; font-size: 15px; }
  #tasks { top: calc(78px + var(--st)); max-width: 58vw; font-size: 12px; }
  #tasks:not(.open) #tasksList { display: none; }
  #map { top: calc(78px + var(--st)); width: 128px; height: 88px; }
  #goal { top: auto; bottom: calc(300px + var(--sb)); font-size: 12px; }
  #toasts { top: calc(176px + var(--st)); width: 92vw; }
  .toast { font-size: 12px; padding: 6px 10px; }
  #turnup { width: 92px; height: 92px; font-size: 17px; bottom: calc(206px + var(--sb)); }
  #status { bottom: calc(262px + var(--sb)); left: calc(14px + var(--sl)); transform: none; font-size: 12px; max-width: calc(100vw - 150px); }
  #prompt { bottom: calc(222px + var(--sb)); left: calc(14px + var(--sl)); transform: none; font-size: 13px; max-width: calc(100vw - 150px); animation: none; }
  .sbtn { width: 44px; height: 44px; font-size: 20px; }
  body.touch #slackRow { top: auto; bottom: calc(246px + var(--sb)); left: auto; right: calc(118px + var(--sr)); flex-direction: column; display: none; }
  body.touch #slackRow { display: flex; flex-direction: row; right: auto; left: calc(14px + var(--sl)); bottom: calc(306px + var(--sb)); }
  #combo { top: calc(170px + var(--st)); }
  .dlg-card { padding: 12px; } #dText { font-size: 14px; } .opt { font-size: 13px; padding: 9px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bubble { font-size: 12px; max-width: 170px; }
  .wgrid { grid-template-columns: repeat(2, 1fr); }
  .daygrid { grid-template-columns: 1fr; }
  #stickZone { width: 58vw; height: 40vh; }
}
/* Handy quer */
@media (max-height: 500px) {
  :root { --btn: 48px; }
  #topbar { top: calc(4px + var(--st)); flex-wrap: nowrap; }
  #phaseChip { flex: 1 1 0; font-size: 11px; }
  .meters { flex: 1.7 1 0; }
  .meter span { padding-left: 5px; }
  .chip { font-size: 12px; padding: 4px 7px; }
  #dayChip span { display: none; }
  .meter { height: 24px; } .meter span { line-height: 20px; font-size: 11px; }
  .ibtn { width: 30px; height: 30px; font-size: 14px; }
  #tasks { top: calc(44px + var(--st)); font-size: 12px; max-width: 40vw; }
  #tasks:not(.open) #tasksList { display: none; }
  #map { top: calc(44px + var(--st)); width: 120px; height: 82px; }
  #goal { top: calc(44px + var(--st)); font-size: 12px; padding: 4px 10px; }
  #toasts { top: calc(76px + var(--st)); width: 46vw; }
  .toast { font-size: 11px; padding: 5px 9px; }
  #stickZone { width: 40vw; height: 72vh; }
  #actGrid { grid-template-columns: var(--btn) var(--btn) var(--btn); }
  #actGrid .abtn { font-size: 23px; }
  #turnup { width: 84px; height: 84px; font-size: 15px; bottom: calc(14px + var(--sb)); right: calc(188px + var(--sr)); }
  body.touch #slackRow { top: auto; bottom: calc(108px + var(--sb)); right: calc(14px + var(--sr)); left: auto; flex-direction: row; }
  .sbtn { width: 40px; height: 40px; font-size: 18px; }
  #status { bottom: calc(10px + var(--sb)); font-size: 11px; max-width: 34vw; left: 50%; }
  #prompt { bottom: calc(46px + var(--sb)); font-size: 12px; max-width: 40vw; }
  #combo { top: calc(130px + var(--st)); }
  #roomlabel { top: 24%; }
  .dlg-card { max-height: 90vh; padding: 10px 12px; } #dPortrait { font-size: 24px; width: 36px; height: 36px; } #dText { font-size: 13px; }
  #dOpts { gap: 6px; } .opt { padding: 7px 9px; font-size: 12px; } #dOpts:not(.grid) { display: grid; grid-template-columns: 1fr 1fr; }
  .scr-card { padding: 12px; } .tut-ico, .go-ico { font-size: 40px; } .scr-card h2 { font-size: 22px; }
  .logo { font-size: clamp(34px, 9vh, 60px); } .stats { grid-template-columns: repeat(4, 1fr); }
  .bubble { font-size: 11px; max-width: 160px; }
}