:root {
  --bg: #14101f;
  --pink: #ff3d7f;
  --yellow: #ffd23f;
  --cyan: #2de2e6;
  --green: #4ade80;
  --red: #ff4b4b;
  --card: rgba(22, 16, 38, 0.92);
  --line: rgba(255, 255, 255, 0.14);
  --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);
}
* { 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: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: opacity .5s; }
#loading.gone { opacity: 0; pointer-events: none; }
.ld-title, .logo { font-weight: 900; font-size: clamp(38px, 11vw, 92px); letter-spacing: -1px; line-height: .95; text-align: center;
  color: var(--yellow); text-shadow: 0 4px 0 #b4004e, 0 8px 24px rgba(0,0,0,.5); transform: rotate(-3deg); }
.ld-title span, .logo span { color: var(--pink); text-shadow: 0 4px 0 #6b0030, 0 8px 24px rgba(0,0,0,.5); display: block; }
.ld-sub { opacity: .7; }

/* Disco-Overlay bei Turn Up */
#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: .38; animation: spin 1.2s linear infinite, pulse .469s ease-out infinite; }
body.turnup #c { animation: hue 2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) scale(2.2); } from { transform: rotate(0) scale(2.2); } }
@keyframes pulse { 0% { filter: brightness(1.6); } 100% { filter: brightness(.9); } }
@keyframes hue { to { filter: hue-rotate(360deg) saturate(1.5); } from { filter: hue-rotate(0) saturate(1.5); } }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #tasks { 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); }
.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; }
@keyframes wob { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.chip.slack b { color: var(--yellow); font-size: 16px; }
.meters { display: flex; gap: 6px; flex: 1 1 260px; min-width: 200px; }
.meter { position: relative; flex: 1; height: 30px; 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)); }
.meter span { position: relative; z-index: 1; font-size: 13px; line-height: 26px; 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); }

#tasks { position: absolute; top: calc(92px + var(--st)); left: calc(10px + var(--sl)); max-width: 300px; 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; }
#tasksList li.done { opacity: .6; text-decoration: line-through; }

#status { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(150px + var(--sb)); background: var(--card); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 20px; font-size: 14px; white-space: nowrap; max-width: 94vw; 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(190px + 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; }
#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); } }

#toasts { position: absolute; right: calc(10px + var(--sr)); top: calc(92px + var(--st)); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-width: min(380px, 70vw); }
.toast { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--cyan); padding: 8px 12px; border-radius: 10px; font-size: 13px; animation: tin .3s ease-out; transition: opacity .4s, transform .4s; }
.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.out { opacity: 0; transform: translateX(30px); }
@keyframes tin { from { transform: translateX(40px); opacity: 0; } }

#bubbles { position: absolute; inset: 0; overflow: hidden; }
.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: 220px;
  text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.25); white-space: normal; line-height: 1.2; }
.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; }

#bigtext { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0); font-weight: 900; font-size: clamp(32px, 8.5vw, 100px); white-space: normal; 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(30px, 8vw, 80px); text-shadow: 0 6px 0 var(--pink), 0 0 30px rgba(0,0,0,.6); }
#bigtext.kick { font-size: clamp(30px, 8vw, 80px); }
@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; } }

/* Steuerung */
#controls { position: absolute; inset: 0; }
#stickZone { position: absolute; left: calc(16px + var(--sl)); bottom: calc(16px + var(--sb)); width: 136px; height: 136px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.18)); border: 2px solid rgba(255,255,255,.3); display: none; pointer-events: auto; touch-action: none; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 4px 0 rgba(0,0,0,.3); pointer-events: none; }
body.touch #stickZone { display: block; }
#slackRow { position: absolute; left: calc(16px + var(--sl)); bottom: calc(16px + var(--sb)); display: flex; gap: 8px; }
body.touch #slackRow { bottom: calc(164px + var(--sb)); }
.sbtn, .abtn { position: relative; width: 52px; height: 52px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); font-size: 24px; box-shadow: 0 4px 0 rgba(0,0,0,.4); pointer-events: auto; }
.sbtn small, .abtn small { position: absolute; bottom: 1px; right: 4px; font-size: 9px; opacity: .7; }
.sbtn:active, .abtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
#actGrid { position: absolute; right: calc(16px + var(--sr)); bottom: calc(16px + var(--sb)); display: grid; grid-template-columns: 60px 60px; gap: 8px; }
#actGrid .abtn { width: 60px; height: 60px; font-size: 28px; }
.abtn.kick { background: linear-gradient(160deg, #ff7a1a, #e11d48); border-color: #ffb37a; }
.abtn.dim { opacity: .45; }
.abtn i { position: absolute; top: -6px; right: -6px; background: var(--pink); font-style: normal; font-size: 12px; border-radius: 10px; padding: 1px 6px; }
.abtn i:empty { display: none; }

#turnup { position: absolute; right: calc(16px + var(--sr)); bottom: calc(160px + var(--sb)); width: 124px; height: 124px; border-radius: 50%; pointer-events: auto;
  border: 4px solid #fff; color: #fff; font-weight: 900; font-size: 22px; 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,.65) 0), linear-gradient(135deg, #ff2bd6, #8b5cf6 40%, #2de2e6 75%, #ffe14d);
  box-shadow: 0 6px 0 #5b1a7a, 0 0 0 0 rgba(255,43,214,.7); transition: transform .1s; }
#turnup small { position: absolute; bottom: 10px; left: 0; right: 0; font-size: 11px; opacity: .8; }
#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 18px 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.18) rotate(8deg); filter: hue-rotate(180deg); } }
body.in-dialog #controls, body.in-dialog #prompt, body.in-dialog #status { visibility: hidden; }

/* Dialog */
#dialog { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(10,6,20,.35); padding: 12px calc(12px + var(--sr)) calc(12px + var(--sb)) calc(12px + var(--sl)); }
.dlg-card { width: min(680px, 100%); max-height: 78vh; 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: 38px; width: 54px; height: 54px; display: grid; place-items: center; background: #fff3; border-radius: 50%; }
#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 ul.ev { margin: 8px 0; padding-left: 18px; }
#dText .rating { font-size: 56px; 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(16px + var(--st)) calc(16px + var(--sr)) calc(16px + var(--sb)) calc(16px + var(--sl));
  background: radial-gradient(ellipse at center, rgba(20,16,31,.55), rgba(20,16,31,.9)); }
.scr-card { width: min(560px, 100%); max-height: 100%; overflow-y: auto; text-align: center; padding: 22px 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; }
.scr-card.title { background: transparent; border: 0; box-shadow: none; }
.scr-card h2 { margin: 6px 0 8px; font-size: 28px; color: var(--yellow); }
.scr-card h2.bad { color: var(--red); font-size: 30px; }
.scr-card h2.win { color: var(--pink); font-size: 34px; }
.tag { opacity: .9; line-height: 1.4; margin: 10px 0 16px; }
.fine { font-size: 12px; opacity: .6; margin-top: 14px; }
.best { margin-top: 14px; font-size: 13px; color: var(--cyan); }
.btns { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 360px; margin: 0 auto; }
.btns.row { flex-direction: row; justify-content: center; }
.btns button, .skill button { padding: 13px 18px; border-radius: 16px; border: 2px solid var(--line); background: #ffffff14; font-size: 17px; 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: 19px; }
.btns button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
button.link { background: none; border: 0; opacity: .6; margin-top: 10px; text-decoration: underline; }
.tut-ico, .go-ico { font-size: 64px; }
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: 400px; }
.tasklist li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.tasklist li.no { opacity: .6; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.stats div { background: #ffffff10; border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; }
.stats span { font-size: 22px; } .stats b { font-size: 18px; } .stats small { opacity: .7; font-size: 11px; }
.skills { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; text-align: left; }
.skill { display: flex; align-items: center; gap: 10px; background: #ffffff0d; border-radius: 14px; padding: 8px 10px; }
.skill .si { font-size: 28px; }
.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 button:disabled { opacity: .4; }
.skill.maxed { opacity: .65; }

/* 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); opacity: 0; color: #bbb; }
@keyframes fin { to { opacity: 1; } }

/* Handy hochkant */
@media (max-width: 600px) {
  #topbar { gap: 5px; }
  .chip { font-size: 12px; padding: 5px 8px; }
  #phaseChip { order: 5; flex: 1 1 100%; justify-content: center; }
  .meters { order: 6; flex: 1 1 100%; min-width: 0; }
  .meter { height: 24px; } .meter span { line-height: 20px; font-size: 11px; }
  .ibtn { width: 32px; height: 32px; font-size: 15px; }
  #tasks { top: calc(112px + var(--st)); max-width: 62vw; font-size: 12px; }
  #tasks:not(.open) #tasksList { display: none; }
  #toasts { top: calc(150px + var(--st)); max-width: 80vw; }
  .toast { font-size: 12px; }
  #turnup { width: 100px; height: 100px; font-size: 19px; bottom: calc(150px + var(--sb)); }
  #status { bottom: calc(262px + var(--sb)); font-size: 12px; }
  body:not(.touch) #status { bottom: calc(150px + var(--sb)); }
  #prompt { bottom: calc(300px + var(--sb)); font-size: 13px; }
  .sbtn { width: 44px; height: 44px; font-size: 20px; }
  body.touch #slackRow { bottom: calc(164px + var(--sb)); }
  .dlg-card { padding: 12px; }
  #dText { font-size: 14px; }
  #dOpts.grid { grid-template-columns: 1fr 1fr; }
  .opt { font-size: 13px; padding: 9px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bubble { font-size: 12px; max-width: 160px; }
}
/* Handy quer */
@media (max-height: 500px) {
  #topbar { top: calc(4px + var(--st)); }
  .chip { font-size: 12px; padding: 4px 8px; }
  .meter { height: 24px; } .meter span { line-height: 20px; font-size: 11px; }
  .ibtn { width: 30px; height: 30px; }
  #tasks { top: calc(46px + var(--st)); font-size: 12px; }
  #tasks:not(.open) #tasksList { display: none; }
  #toasts { top: calc(46px + var(--st)); }
  #stickZone { width: 120px; height: 120px; }
  body.touch #slackRow { left: calc(148px + var(--sl)); bottom: calc(14px + var(--sb)); }
  #actGrid { grid-template-columns: 54px 54px; }
  #actGrid .abtn { width: 54px; height: 54px; font-size: 24px; }
  #turnup { width: 92px; height: 92px; font-size: 17px; bottom: calc(16px + var(--sb)); right: calc(146px + var(--sr)); }
  #status { bottom: calc(76px + var(--sb)); font-size: 12px; }
  #prompt { bottom: calc(112px + var(--sb)); font-size: 13px; }
  .dlg-card { max-height: 92vh; padding: 10px 12px; }
  #dPortrait { font-size: 26px; width: 38px; height: 38px; }
  #dText { font-size: 14px; }
  #dOpts { gap: 6px; } .opt { padding: 7px 9px; font-size: 13px; }
  #dOpts:not(.grid) { display: grid; grid-template-columns: 1fr 1fr; }
  .scr-card { padding: 12px; }
  .tut-ico, .go-ico { font-size: 40px; }
}