/* ============ Fonts (offline im APK) ============ */
@font-face { font-family: "Anton"; src: url(../fonts/anton-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "PressStart"; src: url(../fonts/press-start-2p-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url(../fonts/nunito-latin-700-normal.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "Nunito"; src: url(../fonts/nunito-latin-800-normal.woff2) format("woff2"); font-weight: 800; }
@font-face { font-family: "Nunito"; src: url(../fonts/nunito-latin-900-normal.woff2) format("woff2"); font-weight: 900; }

:root {
  --bg: #170d2e;
  --bg2: #22154a;
  --card: #2a1c5c;
  --card2: #34246e;
  --line: #4b3a96;
  --ink: #fbf7ff;
  --muted: #c6bce8;
  --yellow: #ffd23f;
  --pink: #ff4fa3;
  --cyan: #3de0ff;
  --green: #45e58a;
  --red: #ff5d6c;
  --purple: #9b6bff;
  --shadow: #0a0518;
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --nav-h: 74px;
  --top-h: 116px;
  --radius: 14px;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(255,79,163,.22), transparent 55%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
.pixel { font-family: "PressStart", monospace; letter-spacing: .5px; }
b { font-weight: 900; }
.muted { color: var(--muted); font-size: 16px; }
.center { text-align: center; }

/* ============ Kopfzeile ============ */
#topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding: calc(var(--sat) + 8px) 12px 8px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px;
  background: rgba(23,13,46,.94);
  border-bottom: 3px solid var(--line);
  backdrop-filter: blur(6px);
}
.lvl-badge {
  font-family: "PressStart", monospace; font-size: 11px; color: var(--bg);
  background: var(--yellow); border: 0; border-radius: 8px; padding: 9px 9px;
  box-shadow: 0 3px 0 #b48c00; cursor: pointer; white-space: nowrap; flex: none;
}
.lvl-badge b { font-size: 13px; }
.hdr-stat { display: flex; align-items: baseline; gap: 4px; font-size: 18px; white-space: nowrap; }
.hdr-stat b { font-size: 19px; }
.hdr-stat small { font-size: 12px; color: var(--muted); margin-left: 2px; }
.hdr-stat.coin { margin-left: auto; }
.icon-btn {
  width: 44px; height: 44px; flex: none; border-radius: 12px; border: 2px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 20px; cursor: pointer;
}
.icon-btn.help { background: var(--pink); border-color: var(--pink); font-family: "PressStart"; font-size: 16px; }

/* ============ Screens ============ */
#screens {
  padding: calc(var(--sat) + var(--top-h) + 12px) 16px calc(var(--sab) + var(--nav-h) + 20px);
  max-width: 1100px; margin: 0 auto;
}
.screen { display: none; animation: pop .25s ease-out; }
.screen.active { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.intro-mode #topbar, body.intro-mode #bottomNav { display: none; }
body.intro-mode #screens { padding-top: calc(var(--sat) + 16px); padding-bottom: calc(var(--sab) + 16px); }

/* ============ Buttons ============ */
.btn {
  font: inherit; font-weight: 900; font-size: 18px;
  min-height: 56px; padding: 10px 16px; border-radius: var(--radius);
  border: 3px solid var(--shadow); color: var(--bg);
  background: var(--ink); cursor: pointer;
  box-shadow: 0 5px 0 var(--shadow);
  transition: transform .06s, box-shadow .06s, filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--shadow); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; }
.btn-big { min-height: 68px; font-size: 21px; width: 100%; }
.btn-wide { width: 100%; margin-top: 10px; }
.btn-small { min-height: 44px; font-size: 15px; padding: 6px 12px; box-shadow: 0 3px 0 var(--shadow); }
.btn-yellow { background: var(--yellow); }
.btn-cyan { background: var(--cyan); }
.btn-green { background: var(--green); }
.btn-red { background: var(--red); color: #fff; }
.btn-purple { background: var(--purple); color: #fff; }
.btn-ghost { background: var(--card2); color: var(--ink); border-color: var(--line); box-shadow: 0 5px 0 var(--shadow); }
.btn-launch {
  margin-top: 14px;
  background: linear-gradient(90deg, var(--pink), #ff8a3d, var(--yellow));
  color: #1a0b2e; text-shadow: 0 1px 0 rgba(255,255,255,.5);
  animation: glow 2.2s ease-in-out infinite;
}
@keyframes glow { 50% { filter: brightness(1.12) drop-shadow(0 0 10px rgba(255,79,163,.6)); } }

/* ============ Intro ============ */
.intro-wrap { text-align: center; max-width: 560px; margin: 0 auto; padding: 10px 4px 20px; position: relative; }
.intro-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.intro-wrap > *:not(.intro-stars) { position: relative; z-index: 1; }
.intro-kicker { color: var(--cyan); font-size: 12px; margin: 10px 0 18px; }
.intro-title { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 54px; line-height: 1.02; margin: 0;
  text-transform: uppercase; color: var(--ink); text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--shadow); }
.intro-title span { color: var(--yellow); }
.intro-late { color: var(--cyan); font-size: 13px; margin: 16px 0 0; }
.intro-rocket { font-size: 72px; margin: 14px 0 4px; animation: float 2.6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-6deg); } }
.intro-text { font-size: 20px; margin: 8px 0 22px; }
.intro-small { color: var(--muted); font-size: 16px; margin-top: 16px; }

/* ============ Start / Level-Karte ============ */
.home-hello { display: flex; gap: 14px; align-items: center; background: var(--card); border: 3px solid var(--line);
  border-radius: 18px; padding: 14px; margin-bottom: 18px; }
.bit-face { font-size: 46px; background: var(--bg2); border-radius: 14px; width: 66px; height: 66px; display: grid; place-items: center; flex: none; }
.home-hi { margin: 0; font-size: 24px; font-weight: 900; }
.home-sub { margin: 2px 0 0; color: var(--muted); font-size: 17px; }
.level-map { display: grid; gap: 14px; }
@media (min-width: 760px) { .level-map { grid-template-columns: 1fr 1fr; } }
.level-card {
  position: relative; text-align: left; font: inherit; color: var(--ink);
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  background: var(--card); border: 3px solid var(--line); border-radius: 18px; padding: 16px;
  box-shadow: 0 6px 0 var(--shadow); cursor: pointer; min-height: 110px;
}
.level-card .lv-icon { font-size: 40px; width: 64px; height: 64px; border-radius: 14px; background: var(--bg2); display: grid; place-items: center; }
.level-card .lv-num { font-family: "PressStart"; font-size: 11px; color: var(--cyan); }
.level-card .lv-name { font-size: 22px; font-weight: 900; margin: 4px 0 2px; }
.level-card .lv-desc { color: var(--muted); font-size: 16px; margin: 0; }
.level-card.current { border-color: var(--yellow); animation: pulseBorder 1.6s infinite; }
@keyframes pulseBorder { 50% { box-shadow: 0 6px 0 var(--shadow), 0 0 0 6px rgba(255,210,63,.25); } }
.level-card.done { border-color: var(--green); }
.level-card.done::after { content: "✓ GESCHAFFT"; position: absolute; top: 10px; right: 12px; font-family: "PressStart"; font-size: 9px; color: var(--green); }
.level-card.locked { opacity: .55; cursor: default; }
.level-card.locked::after { content: "🔒"; position: absolute; top: 10px; right: 12px; font-size: 20px; }
.section-title { font-size: 13px; color: var(--yellow); margin: 26px 0 12px; }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.trophy { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 10px; text-align: center; font-size: 15px; }
.trophy .t-icon { font-size: 32px; display: block; }
.trophy.off { opacity: .4; filter: grayscale(1); }
.home-footer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.home-footer .btn { flex: 1 1 200px; }

/* ============ Meme-Editor ============ */
.editor { display: grid; gap: 14px; }
@media (min-width: 900px) { .editor { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .editor-left { position: sticky; top: calc(var(--top-h) + 20px); } }
.photo-strip { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.btn-photo { flex: none; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; flex: 1; }
.thumb { flex: none; width: 58px; height: 58px; border-radius: 10px; border: 3px solid var(--line); background-size: cover; background-position: center; cursor: pointer; padding: 0; }
.thumb.active { border-color: var(--yellow); }
.canvas-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 4px solid var(--shadow); box-shadow: 0 0 0 3px var(--line), 0 10px 0 var(--shadow); background: #0d0820; touch-action: none; }
#memeCanvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; touch-action: none; }
.canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 21px; pointer-events: none; }
.canvas-empty small { font-size: 16px; }
.canvas-tip { text-align: center; color: var(--muted); font-size: 15px; margin: 10px 0 0; }
.text-inputs { display: grid; gap: 10px; }
.field { display: grid; gap: 4px; }
.field span { font-size: 15px; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-weight: 800; font-size: 20px; color: var(--ink);
  background: var(--bg2); border: 3px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 56px; width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 0; }
.tab { font: inherit; font-size: 15px; font-weight: 900; color: var(--muted); background: var(--bg2); border: 3px solid var(--line); border-bottom: 0;
  border-radius: 12px 12px 0 0; min-height: 52px; padding: 4px 2px; cursor: pointer; }
.tab.active { color: var(--ink); background: var(--card); }
.tab-panel { display: none; background: var(--card); border: 3px solid var(--line); border-radius: 0 0 14px 14px; padding: 14px; }
.tab-panel.active { display: block; }
.sel-info { margin: 0 0 8px; font-size: 16px; }
.sel-info small { color: var(--muted); }
.panel-hint { margin: 0 0 10px; color: var(--muted); font-size: 16px; }
.slider-row { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 10px; min-height: 52px; font-size: 17px; }
.slider-row output { text-align: right; color: var(--muted); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 12px; border-radius: 8px; background: var(--bg2); border: 2px solid var(--line); width: 100%; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--shadow); }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--shadow); }
.swatch-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; margin: 8px 0; font-size: 17px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--shadow); cursor: pointer; box-shadow: 0 0 0 2px var(--line); }
.swatch.active { box-shadow: 0 0 0 4px var(--yellow); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
.sticker-btn { font-size: 34px; min-height: 62px; border-radius: 12px; background: var(--bg2); border: 2px solid var(--line); cursor: pointer; color: var(--ink); font-family: inherit; }
.sticker-btn.badge { font-size: 13px; font-weight: 900; font-family: "Anton", sans-serif; letter-spacing: .5px; }
.layout-grid, .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.layout-card, .template-card { font: inherit; color: var(--ink); background: var(--bg2); border: 3px solid var(--line); border-radius: 12px; padding: 8px; cursor: pointer; text-align: center; font-size: 16px; }
.layout-card.active { border-color: var(--yellow); }
.layout-card canvas, .template-card canvas { width: 100%; height: auto; border-radius: 8px; display: block; margin-bottom: 6px; background: #000; }
.action-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* ============ Börse ============ */
.play-money-banner { background: repeating-linear-gradient(45deg, var(--yellow), var(--yellow) 14px, #ffe27a 14px, #ffe27a 28px); color: #241400;
  font-weight: 900; text-align: center; border-radius: 12px; padding: 8px 10px; margin-bottom: 14px; border: 3px solid var(--shadow); font-size: 16px; }
.market-layout { display: grid; gap: 16px; }
@media (min-width: 900px) { .market-layout { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.coin-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.coin-head img, .coin-avatar { width: 64px; height: 64px; border-radius: 14px; border: 3px solid var(--line); object-fit: cover; background: var(--bg2); display: grid; place-items: center; font-size: 32px; flex: none; }
.coin-head .ch-name { font-size: 22px; font-weight: 900; margin: 0; line-height: 1.1; }
.coin-head .ch-ticker { color: var(--cyan); font-size: 16px; margin: 0; }
.coin-head .ch-price { margin-left: auto; text-align: right; }
.coin-head .ch-price b { display: block; font-size: 20px; }
.up { color: var(--green); } .down { color: var(--red); }
.chart-card, .curve-card, .position-card, .trade-card, .ultra-card, .card {
  background: var(--card); border: 3px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px;
}
#priceChart { width: 100%; height: auto; display: block; }
.curve-label { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 6px; }
.curve-bar { height: 22px; border-radius: 11px; background: var(--bg2); border: 2px solid var(--line); overflow: hidden; }
#curveFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width .6s; }
.curve-sub { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.position-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-cell { background: var(--bg2); border-radius: 12px; padding: 10px; }
.pos-cell span { display: block; color: var(--muted); font-size: 14px; }
.pos-cell b { font-size: 20px; }
.trade-title { margin: 0 0 8px; }
.buy-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sell-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ultra-card { border-color: var(--pink); background: linear-gradient(160deg, #3b1d63, var(--card)); }
.ultra-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.ultra-title { margin: 0; color: var(--pink); font-size: 15px; }
.ultra-sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.toggle { width: 84px; height: 46px; border-radius: 30px; background: var(--bg2); border: 3px solid var(--line); position: relative; flex: none; cursor: pointer; }
.toggle span { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--muted); transition: left .2s, background .2s; }
.toggle[aria-checked=true] { background: var(--pink); border-color: var(--pink); }
.toggle[aria-checked=true] span { left: 42px; background: #fff; }
.risk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.risk { font: inherit; color: var(--ink); background: var(--bg2); border: 3px solid var(--line); border-radius: 12px; padding: 8px 4px; cursor: pointer; font-size: 26px; display: grid; gap: 2px; justify-items: center; }
.risk b { font-size: 15px; } .risk small { font-size: 12px; color: var(--muted); }
.risk.active { border-color: var(--yellow); background: #44307f; }
.bot-log { background: #120a26; border-radius: 12px; padding: 10px; height: 190px; overflow-y: auto; font-size: 15px; border: 2px solid var(--line); }
.bot-log p { margin: 0 0 6px; }
.bot-log .t { color: var(--muted); font-size: 12px; margin-right: 6px; }
.ultra-honest { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.coin-list { display: grid; gap: 8px; }
.coin-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; background: var(--card); border: 3px solid var(--line);
  border-radius: 14px; padding: 8px 10px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; min-height: 68px; }
.coin-row.active { border-color: var(--yellow); }
.coin-row .coin-avatar { width: 52px; height: 52px; font-size: 26px; border-width: 2px; }
.coin-row .cr-name { font-weight: 900; font-size: 17px; line-height: 1.15; }
.coin-row .cr-sub { color: var(--muted); font-size: 13px; }
.coin-row .cr-chg { font-weight: 900; font-size: 17px; text-align: right; }
.tag-mine { background: var(--yellow); color: #241400; font-size: 11px; border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.tag-grad { background: var(--green); color: #002914; font-size: 11px; border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }

/* ============ Echte Welt ============ */
.real-wrap { max-width: 760px; margin: 0 auto; }
.real-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.real-hero h2 { font-size: 18px; margin: 0 0 6px; color: var(--cyan); }
.real-hero p { margin: 0; }
.real-icon { font-size: 54px; }
.card h3 { margin: 16px 0 8px; font-size: 21px; }
.card h3:first-child { margin-top: 2px; }
.rules { padding-left: 24px; margin: 0; } .rules li { margin-bottom: 10px; }
.quiz { margin-top: 12px; }
.quiz-q { background: var(--bg2); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.quiz-q p { margin: 0 0 8px; }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt { font: inherit; text-align: left; color: var(--ink); background: var(--card2); border: 3px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 52px; cursor: pointer; }
.quiz-opt.right { border-color: var(--green); background: #1d5a3e; }
.quiz-opt.wrong { border-color: var(--red); background: #5a1d2a; }
.locked-card.is-locked { opacity: .45; pointer-events: none; filter: grayscale(.6); }
.status-line { font-size: 17px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.row-btns .btn { flex: 1 1 220px; }
.real-meme { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: start; }
.real-meme img { width: 130px; height: 130px; border-radius: 12px; border: 3px solid var(--line); object-fit: cover; background: var(--bg2); }
.real-fields { display: grid; gap: 8px; }
.cheat { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 8px; background: var(--bg2); border-radius: 10px; padding: 6px 8px; }
.cheat span { color: var(--muted); font-size: 14px; }
.cheat b { font-size: 18px; word-break: break-word; }
.steps-list { padding-left: 26px; } .steps-list li { margin-bottom: 8px; }
@media (max-width: 420px) { .real-meme { grid-template-columns: 1fr; } .real-meme img { width: 100%; height: auto; aspect-ratio: 1; } }

/* ============ Untere Navigation ============ */
#bottomNav {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(var(--sab) + 6px); background: rgba(23,13,46,.96); border-top: 3px solid var(--line);
}
.nav-btn { font: inherit; font-size: 14px; font-weight: 900; color: var(--muted); background: none; border: 0; border-radius: 12px; min-height: 60px; display: grid; justify-items: center; align-content: center; gap: 2px; cursor: pointer; position: relative; }
.nav-btn span { font-size: 26px; line-height: 1; }
.nav-btn.active { color: var(--ink); background: var(--card); }
.nav-btn.locked { opacity: .45; }
.nav-btn.locked::after { content: "🔒"; position: absolute; top: 4px; right: 18%; font-size: 13px; }

/* ============ Coach (Bit) ============ */
#coachLayer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#coachHole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(8,4,20,.62); border: 4px solid var(--yellow); transition: all .3s ease; pointer-events: none; animation: holePulse 1.4s infinite; }
@keyframes holePulse { 50% { border-color: #fff3b0; } }
#coachHole.none { width: 0 !important; height: 0 !important; border-width: 0; left: 50% !important; top: 50% !important; }
#coachBubble { position: fixed; left: 12px; right: 12px; max-width: 520px; margin: 0 auto; pointer-events: auto;
  background: #fffaf0; color: #1d1236; border: 4px solid var(--shadow); border-radius: 18px; padding: 14px 16px; box-shadow: 0 8px 0 var(--shadow); transition: top .3s ease, bottom .3s ease; }
.coach-top { display: flex; align-items: center; gap: 8px; }
.coach-bit { font-size: 28px; }
.coach-name { font-size: 12px; color: var(--pink); }
.coach-speak { margin-left: auto; font: inherit; font-size: 14px; font-weight: 900; background: #efe7ff; color: #1d1236; border: 2px solid #1d1236; border-radius: 10px; padding: 6px 10px; min-height: 40px; cursor: pointer; }
#coachText { font-size: 20px; margin: 8px 0 12px; font-weight: 800; }
.coach-btns { display: flex; justify-content: space-between; gap: 10px; }
.coach-btns .btn-ghost { background: #efe7ff; color: #1d1236; border-color: #1d1236; }
.coach-wait { font-size: 15px; color: #6a5a94; font-weight: 800; align-self: center; }

/* ============ Modal ============ */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(8,4,20,.75); display: grid; place-items: center; padding: calc(var(--sat) + 12px) 12px calc(var(--sab) + 12px); }
.modal[hidden] { display: none; }
.modal-card { width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; background: var(--card); border: 4px solid var(--yellow); border-radius: 20px; padding: 18px; box-shadow: 0 10px 0 var(--shadow); animation: pop .2s; }
.modal-card h2 { margin: 0 0 10px; font-size: 24px; }
.modal-card .pixel-h { font-family: "PressStart"; font-size: 14px; color: var(--yellow); margin: 0 0 12px; line-height: 1.5; }
.modal-btns { display: grid; gap: 10px; margin-top: 16px; }
.modal-card .field { margin-bottom: 10px; }
.field-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.launch-choice { display: grid; gap: 10px; margin-top: 10px; }
.choice { font: inherit; color: var(--ink); text-align: left; background: var(--bg2); border: 3px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.choice .c-i { font-size: 34px; }
.choice b { display: block; font-size: 19px; }
.choice small { color: var(--muted); font-size: 15px; }
.choice.recommended { border-color: var(--green); }
.choice:disabled { opacity: .5; }
.explain-card { text-align: center; }
.explain-card .big-emoji { font-size: 70px; margin: 6px 0; }
.explain-dots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.explain-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.explain-dots i.on { background: var(--yellow); }

/* ============ Toasts / Achievements ============ */
#toastArea { position: fixed; left: 0; right: 0; top: calc(var(--sat) + var(--top-h) + 10px); z-index: 80; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast { background: var(--ink); color: #1d1236; border: 3px solid var(--shadow); border-radius: 14px; padding: 10px 16px; font-weight: 900; box-shadow: 0 5px 0 var(--shadow); max-width: 520px; animation: toastIn .3s ease-out; font-size: 17px; }
.toast.achv { background: linear-gradient(90deg, var(--yellow), #ffe98a); display: flex; gap: 12px; align-items: center; }
.toast.achv .a-i { font-size: 34px; }
.toast.achv small { display: block; font-family: "PressStart"; font-size: 9px; color: #7a5800; margin-bottom: 4px; }
.toast.out { animation: toastOut .3s ease-in forwards; }
@keyframes toastIn { from { transform: translateY(-20px) scale(.9); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-20px); opacity: 0; } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.conf { position: absolute; top: -20px; width: 10px; height: 14px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (max-width: 430px) { .hdr-stat small { display: none; } #topbar { gap: 6px; } }
@media (max-width: 380px) {
  body { font-size: 18px; }
  .tab { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ============ Paul-Edition: Modus-Schalter, Wallet, LIVE ============ */
#modeBar { flex: 0 0 100%; display: flex; gap: 8px; align-items: center; }
.mode-seg { display: flex; flex: 1; min-width: 0; background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.mode-seg button { flex: 1; min-width: 0; font: inherit; font-size: 14px; font-weight: 900; color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 6px 2px; min-height: 38px; cursor: pointer; white-space: nowrap; }
.mode-seg button.on { color: #241400; background: var(--yellow); box-shadow: 0 2px 0 #b48c00; }
.mode-seg button[data-mode="REAL"].on { background: var(--cyan); color: #00262e; box-shadow: 0 2px 0 #1b8aa0; }
.mode-seg button[data-mode="LIVE"].on { background: var(--red); color: #fff; box-shadow: 0 2px 0 #a02a38; }
.wallet-chip { flex: none; font: inherit; font-size: 14px; font-weight: 900; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 0 12px; min-height: 44px; cursor: pointer; white-space: nowrap; }
.wallet-chip.on { border-color: var(--green); }
body.live-on #topbar { border-bottom-color: var(--red); background: rgba(58,10,26,.95); }
body.live-on .lvl-badge { background: var(--red); color: #fff; box-shadow: 0 3px 0 #a02a38; }
.hdr-stat.real-money b { color: #ffd7dc; }

#pendingBar { position: fixed; z-index: 19; left: 0; right: 0; top: calc(var(--sat) + var(--top-h)); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--yellow); color: #241400; padding: 6px 14px; font-weight: 900; font-size: 15px; border-bottom: 3px solid var(--shadow); }
#pendingBar button { flex: none; background: #241400; color: var(--yellow); border: 0; border-radius: 8px; width: 38px; height: 38px; font-size: 16px; font-weight: 900; cursor: pointer; }
body.has-pending:not(.intro-mode) #screens { padding-top: calc(var(--sat) + var(--top-h) + 60px); }
body.intro-mode #pendingBar { display: none; }

.play-money-banner.real { background: repeating-linear-gradient(45deg, var(--cyan), var(--cyan) 14px, #7aeaff 14px, #7aeaff 28px); color: #00262e; }
.play-money-banner.live { background: repeating-linear-gradient(45deg, var(--red), var(--red) 14px, #ff8a95 14px, #ff8a95 28px); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.feed-status { font-size: 14px; color: var(--muted); margin: -6px 0 12px; text-align: center; }
.feed-status.ok { color: var(--green); } .feed-status.err { color: var(--red); }
.feed-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.feed-tabs button { flex: 1; font: inherit; font-size: 14px; font-weight: 900; color: var(--muted); background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 6px 2px; min-height: 42px; cursor: pointer; }
.feed-tabs button.on { color: var(--ink); border-color: var(--cyan); background: var(--card2); }
.live-note { font-size: 15px; background: rgba(255,93,108,.15); border: 2px dashed var(--red); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.mini-link { display: block; margin-left: auto; font: inherit; font-size: 13px; color: var(--cyan); background: none; border: 0; padding: 6px 0 0; cursor: pointer; text-decoration: underline; }
.coin-head .ch-price { display: flex; flex-direction: column; align-items: flex-end; }
body.is-live .trade-card { border-color: var(--red); }

.ack-list { padding-left: 22px; margin: 0 0 8px; }
.ack-list li { margin-bottom: 8px; font-size: 17px; }
.ack-list.bad li { color: #ffd7dc; }
.cost-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 17px; }
.cost-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cost-table td:last-child { text-align: right; font-weight: 900; white-space: nowrap; }
.cost-table tr.sum td { border-bottom: 0; border-top: 3px solid var(--yellow); font-size: 19px; }
.check-line { font-size: 14px; }
.warn-line { background: rgba(255,210,63,.12); border-left: 5px solid var(--yellow); padding: 8px 10px; border-radius: 6px; font-size: 16px; }
.busy-box { text-align: center; padding: 14px 4px; }
.spinner { width: 54px; height: 54px; margin: 0 auto 12px; border: 6px solid var(--line); border-top-color: var(--yellow); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.set-h { font-size: 16px; margin: 14px 0 6px; color: var(--cyan); }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { font: inherit; font-size: 16px; font-weight: 900; color: var(--ink); background: var(--bg2); border: 3px solid var(--line); border-radius: 10px; padding: 6px 12px; min-height: 44px; cursor: pointer; }
.opt.on { border-color: var(--yellow); background: var(--card2); color: var(--yellow); }
.wallet-box { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg2); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 20px; }
.wallet-bal { display: grid; margin-bottom: 8px; }
.wallet-bal b { font-size: 30px; }
@media (max-width: 380px) { .mode-seg button { font-size: 13px; } .wallet-chip { padding: 0 8px; font-size: 13px; } }

/* Hinweise dürfen wichtige Fenster (Kosten, Warnungen) nie verdecken */
body.modal-open #toastArea { z-index: 60; }

.diag { list-style: none; padding: 0; margin: 0 0 6px; }
.diag li { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.diag li b { display: block; font-size: 17px; }
.diag li small { display: block; color: var(--muted); font-size: 14px; word-break: break-word; margin-top: 2px; }
.diag li.bad small { color: #ffd7dc; }