:root{
  color-scheme:dark;--bg:#101923;--panel:#172532;--panel2:#253849;--line:#344b5d;
  --text:#f0f6fc;--muted:#a8bccb;--teal:#47d8aa;--red:#ff929b;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--bg)}
body{background:radial-gradient(ellipse at 50% -18%,#25475e 0%,var(--bg) 49%);margin:0;color:var(--text);min-height:100vh}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
[hidden]{display:none!important}
.shell{width:min(100%,860px);margin:auto;padding:21px 18px 35px}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.brand{font-size:35px;font-weight:900;letter-spacing:-1.8px}.brand>span{color:var(--teal)}.brand small{display:block;font-size:10px;font-weight:800;letter-spacing:2.6px;color:var(--muted);margin-top:-4px}
.edition{font-size:11px;font-weight:800;color:#b1e8d6;border:1px solid #366c63;border-radius:50px;padding:7px 11px;letter-spacing:.9px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#1b2b39;padding:5px;border:1px solid #344c60;border-radius:13px;gap:5px;margin-bottom:19px}
.tab{color:var(--muted);border:0;border-radius:9px;background:transparent;min-height:43px;font-weight:750;font-size:14px}.tab.is-active{color:#0d2722;background:var(--teal)}.tab:hover:not(.is-active){background:#2a4051}
.top-settings{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:13px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field>span{color:#c2d5e3;font-size:11px;font-weight:800;letter-spacing:.2px}
.field input,.field select{height:43px;width:100%;padding:9px 12px;background:#263a4b;border:1px solid #526a7c;color:var(--text);border-radius:9px;outline:none}
.field input::placeholder{color:#9aafbe}
.mode-tag{height:43px;display:flex;justify-content:center;align-items:center;background:#213a47;border:1px solid #3b6668;border-radius:9px;font-size:13px;font-weight:800;letter-spacing:1px}.mode-tag b{font-size:20px;color:var(--teal);margin-left:8px}
.arena,.tutorial-app{background:var(--panel);border:1px solid #2a3c4d;border-radius:17px;padding:18px;display:flex;flex-direction:column;gap:13px}
.stats{display:flex;gap:20px;justify-content:flex-end}.stats>div{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:65px}.stats span{font-size:10px;font-weight:800;color:#aec4d3;letter-spacing:.6px}.stats b{font-size:23px;line-height:1.1;font-weight:900;font-variant-numeric:tabular-nums}
.progress,.tutorial-meter{height:10px;overflow:hidden;border-radius:20px;background:#34495a}
#progress-fill,.tutorial-meter>div{height:100%;width:100%;background:var(--teal);border-radius:20px;transition:background-color .15s}
.stage-display,.tutorial-display{background:var(--panel2);min-height:170px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;text-align:center;padding:22px 9px}
.stage-label,.tutorial-display>span{font-size:11px;letter-spacing:1px;font-weight:850;color:#b4ccda}
.last-answer,.tutorial-display b{font-size:clamp(30px,7vw,60px);font-weight:950;line-height:1.08;letter-spacing:-1.4px;overflow-wrap:anywhere}
.game-status,.tutorial-display small{color:#bed1de;font-size:13px}.game-status.success{color:var(--teal)}.game-status.danger{color:var(--red)}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.answer{border:1px solid transparent;min-height:75px;border-radius:11px;font-size:clamp(15px,3vw,23px);font-weight:900;color:#fff;padding:10px 7px;touch-action:manipulation}
.answer:active:not(:disabled){transform:scale(.975)}.answer:disabled{opacity:.43}
.answer.number{background:#e3eff8;color:#173144;font-size:32px}.answer.one{background:#2f7196}.answer.two{background:#435c9b}.answer.three,.answer.four{background:#615198;grid-column:span 2}
.answer.hint{outline:3px solid #48e8b7;outline-offset:2px;box-shadow:0 0 0 5px #41caa23b,0 0 26px #40dba44a;opacity:1;animation:pulse 1.3s ease-in-out infinite alternate}
@keyframes pulse{from{filter:brightness(1)}to{filter:brightness(1.2)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.answer.shake{animation:shake .2s linear 2}
.feedback{padding:13px 15px;border:1px solid #935660;background:#3a3039;border-radius:10px;font-size:13px;line-height:1.6;color:#f2dadd}.feedback strong{display:block;font-size:16px;color:#ffa8b2;margin-bottom:5px}
.primary-button,.secondary-button{border:0;border-radius:9px;padding:13px 17px;min-height:46px;font-weight:850;font-size:14px}
.primary-button{background:var(--teal);color:#102a25}.primary-button.light{background:#edf4fa;color:#14293a}.primary-button:hover:not(:disabled){filter:brightness(.94)}
.secondary-button{border:1px solid #587184;background:#2d4254;color:#e6f1f7}.secondary-button:hover{background:#35546c}
.game-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;border-top:1px solid var(--line);padding-top:15px}
.game-controls .field select{padding:8px 5px;font-size:12px;min-width:0}
.round-kind{color:#afc2d0;font-size:12px;line-height:1.45}.round-kind.official{color:#82eac8;font-weight:750}
.api-error{background:#4a2834;border:1px solid #965363;border-radius:9px;padding:12px;color:#ffb3c1;font-size:13px}
.subtle-note,.footer{color:var(--muted);font-size:12px;line-height:1.6}.subtle-note{margin-top:13px}.footer{text-align:center;margin:28px 0 10px}
kbd{background:#2b4050;border:1px solid #587184;border-radius:4px;padding:2px 5px;color:#fff}
.tutorial-hero{padding:2px 2px 19px}.eyebrow{color:var(--teal);font-size:11px;font-weight:900;letter-spacing:1.8px}.tutorial-hero h1,.score-heading h1{font-size:clamp(23px,5vw,32px);line-height:1.2;margin:8px 0 10px;letter-spacing:-.5px}.tutorial-hero p{max-width:600px;color:#b9cbd8;font-size:14px;line-height:1.6;margin:0}
.tutorial-top{display:flex;justify-content:space-between;color:#c6d5e2;font-size:12px;font-weight:850}
.tutorial-meter>div{width:0%;transition:width .16s}
.tutorial-info{background:#1c3e46;border:1px solid #326d66;border-radius:10px;padding:16px}.tutorial-info strong{color:#a1f8d8;font-size:17px}.tutorial-info p{color:#d4e8e5;font-size:14px;line-height:1.5;margin:8px 0 0}
.tutorial-display{min-height:141px}.tutorial-display b{font-size:45px}.tutorial-note{font-size:13px;color:#b9d5ce;padding:1px 2px;min-height:21px}
.score-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:3px 0 18px}.score-filter{max-width:290px;margin-bottom:13px}.score-condition{font-size:12px;color:#b2c7d4;line-height:1.55;margin-bottom:16px}
.scores-list{background:var(--panel);border:1px solid #344a5d;border-radius:12px;overflow:hidden}.empty-scores{color:#bbced9;text-align:center;padding:26px 17px;line-height:1.5}
.score-row{display:grid;grid-template-columns:60px minmax(0,1fr) 90px 116px;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid #304659;font-variant-numeric:tabular-nums;font-size:14px}.score-row:last-child{border-bottom:0}.score-head{font-weight:850;color:#afc6d5;font-size:10px;letter-spacing:.3px;background:#203445}.score-row span:nth-child(3),.score-row span:nth-child(4){text-align:right}.score-player{font-weight:750;overflow-wrap:anywhere}
@media(max-width:600px){.shell{padding:13px 11px 24px}.site-header{margin-bottom:14px}.arena,.tutorial-app{padding:13px;border-radius:13px}.game-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.answer{min-height:69px}.stats{justify-content:space-around;gap:8px}.stats b{font-size:20px}.stage-display{min-height:145px}.score-row{grid-template-columns:38px minmax(0,1fr) 59px 81px;gap:4px;padding:11px 9px;font-size:12px}.score-head{font-size:9px}.score-heading{align-items:flex-start;flex-direction:column}.score-heading .secondary-button{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Alpha 0.1.1: Hinweis bei automatisch zugewiesenem Spielernamen */
.nickname-note { margin: 0 0 12px; padding: 11px 14px; border: 1px solid #3a947f;
  border-radius: 10px; background: #183d3c; color: #c5ffeb; font-size: 13px; }
.nickname-note[hidden] { display: none; }
