:root {
  --bg:#212121;        /* neutral dark background */
  --card:#171717;      /* cards/boxes dark gray */
  --ink:#f5f5f5;       /* primary text */
  --muted:#b0b0b0;     /* secondary text */
  --ok:#22c55e;        /* green */
  --bad:#ef4444;       /* red */
  --line:#333333;      /* subtle lines */
  --btn:#2d2d2d;       /* button base */
  --btn-hover:#3a3a3a; /* hover slightly lighter */
}

/* Root + Body */
html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial
}
body{ padding:0; }

/* Main wrapper */
.wrap{
  max-width:720px;
  margin:0 auto;
  padding:16px 14px calc(86px + env(safe-area-inset-bottom));
  min-height:100svh;
  box-sizing:border-box;
}
@supports (height: 100dvh){
  .wrap{ min-height:100dvh; }
}

/* Header */
header{
  position:sticky;
  top:0;
  backdrop-filter:saturate(1.2) blur(6px);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
}


h1{font-size:18px;margin:0;display:flex;align-items:center;gap:10px}
.brand-dot{width:10px;height:10px;border-radius:50%;background:#888;display:inline-block}

/* Minimal header icons (no boxes) */
.header-icons{display:flex;gap:17px;align-items:center}
.iconbtn{all:unset;cursor:pointer;display:grid;place-items:center}
.iconbtn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.8;transition:stroke .2s}
.iconbtn:hover svg{stroke:#fff}

/* Star counter chip (⭐) */
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* Cards */
.card{
  background:var(--card);
  border-radius:10px;
  position:relative;
  margin:0;
  cursor:pointer;
  min-height:calc(100svh - 200px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  overflow:hidden;
  touch-action:pan-y
}
@supports (height: 100dvh){
  .card{ min-height:calc(100dvh - 200px); }
}
.card .prompt{font-size:22px;font-weight:700;letter-spacing:.2px;padding:20px 20px 30px;box-sizing:border-box;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;gap:0px;flex-wrap:wrap}
.reveal{display:none;flex-direction:column;gap:12px;width:100%;padding:0 20px;box-sizing:border-box}
.card.open:not(.quiz) .prompt{display:none}
.card.open .reveal{display:flex}
.card.quiz .prompt{display:flex;align-items:center;justify-content:center;gap:0px;flex-wrap:wrap}
.card.quiz .reveal{display:none}
.reveal .answer{font-size:20px;font-weight:800;margin:0;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}

/* Neutral examples box (no blue) */
.examples{
  margin-top:0;
  padding:8px 14px;
  background:#1f1f1f;
  border-radius:0 0 8px 8px;
  overflow:hidden;
  text-align:left
}
.examples b{color:#e8e8e8}

/* Toolbar */
.toolbar{
  position:fixed;
  bottom:calc(16px + env(safe-area-inset-bottom));
  left:0;right:0;
  display:flex;gap:24px;justify-content:center;
  pointer-events:none;z-index:6
}
.toolbar button{width:64px;height:64px;border:0;border-radius:9999px;cursor:pointer;display:grid;place-items:center;pointer-events:auto;transition:transform .12s ease, box-shadow .12s ease}
.toolbar button svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:2.5}
.toolbar button#next{background:var(--ok)}
.toolbar button#again{background:var(--bad)}
.toolbar button.flash{transform:scale(1.12);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* Chooser */
#chooser{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:5}
#chooser .grid{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:320px}
#chooser button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:64px;border-radius:10px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);font-weight:700;text-align:center;transition:transform .15s ease, background .2s}
#chooser button:hover{transform:translateY(-2px);background:var(--btn-hover)}
#chooser button svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2}

/* Menu */
#menu{
  position:fixed;
  top:calc(58px + env(safe-area-inset-top));
  right:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  display:none;
  z-index:20;
  min-width:240px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  pointer-events:auto;overflow:hidden
}
#menu .mi{all:unset;display:block;width:100%;padding:10px 12px;cursor:pointer;transition:background .18s}
#menu .mi:hover{background:var(--btn-hover)}
#menu hr{border:none;border-top:1px solid var(--line);margin:0}

/* Bottom sheets (Settings & Pack) */
.sheet{position:fixed;inset:0;display:none;place-items:end center;background:rgba(0,0,0,.55);z-index:30}
.sheet.open{display:grid}
.sheet .panel{background:var(--card);border-top-left-radius:16px;border-top-right-radius:16px;border:1px solid var(--line);width:min(720px,100%);padding:16px;display:flex;flex-direction:column;gap:12px;z-index:31}
.modal .panel{width:min(520px,100%)}

.field{border:1px solid var(--line);background:#212121;color:var(--ink);border-radius:10px;padding:12px 14px;font-size:16px}
.btn{all:unset;cursor:pointer;padding:12px 14px;border-radius:10px;background:var(--btn);color:var(--ink);font-weight:600;text-align:center;transition:background .2s, transform .15s; border:1px solid var(--line)}
.btn:hover{background:var(--btn-hover);transform:translateY(-2px)}
.btn.block{display:block;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* Quiz options (no blue on hover) */
.options{display:grid;gap:10px;width:95%;max-width:560px;grid-template-columns:1fr 1fr}
.opt{all:unset;cursor:pointer;background:var(--card);border:1px solid var(--line);padding:12px 14px;border-radius:10px;text-align:center;transition:transform .12s ease, background .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
@media (hover: hover) and (pointer: fine){.opt:hover{transform:translateY(-2px);background:var(--btn-hover)}}
.opt.correct{background:var(--ok);color:#fff !important;border-color:var(--ok)}
.opt.wrong{background:var(--bad);color:#fff !important;border-color:var(--bad)}
.opt[disabled]{opacity:.75;pointer-events:none}

/* TTS */
.ttsbtn{all:unset;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;cursor:pointer;margin-left: 10px}
.ttsbtn:hover{background:var(--btn-hover)}
.ttsbtn svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:2}

/* Schreiben/Drill Eingaben */
#screen-write .card, #screen-drill .card{cursor:default}
.writeWrap, .drillWrap{width:100%;max-width:560px;padding:0 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
.writeRow{display:flex;flex-direction:column;gap:10px}
.writeRow input, .writeRow textarea{border:1px solid var(--line);background:#212121;color:var(--ink);border-radius:10px;padding:12px 14px;font-size:16px;}
.msg{font-size:14px;color:var(--muted);min-height:1.2em}

.navArrows{display:flex;gap:8px;justify-content:center;margin-top:8px}
.navArrows .round{width:48px;height:48px;border-radius:999px;border:1px solid var(--line);background:var(--btn);display:grid;place-items:center;cursor:pointer}
.navArrows .round:hover{background:var(--btn-hover)}
.navArrows svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2}

/* Tooltip */
.tooltip-popup {
  position:fixed;
  max-width:min(90vw, 320px);
  background:#111;
  color:#fff;
  font-size:.9rem;
  padding:8px 12px;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:9999;
  white-space:normal;
  word-break:break-word;
}

/* Reader Mode */
body.reader-mode #readerContainer{
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:calc(96vh - 160px);
  padding-bottom:24px;
  word-break:break-word;
}
body.reader-mode #readerContainer p,
body.reader-mode #readerContainer span,
body.reader-mode #readerContainer div{
  max-width:100%;
  white-space:normal;
}
body.reader-mode #readerScreen .card,
body.reader-mode #readerScreen .panel,
body.reader-mode #readerScreen .box{
  height:calc(100vh - 120px);
  max-height:calc(100vh - 120px);
  overflow:hidden;
}
/* Hide judge/toolbar buttons in reader */
body.reader-mode .toolbar,
body.reader-mode #ok,
body.reader-mode #bad,
body.reader-mode .judge,
body.reader-mode .judge-bar,
body.reader-mode .round-judge,
body.reader-mode .toolbar-judge,
body.reader-mode .judge-buttons{
  display:none !important;
}

/* Reader page-level scrolling */
html:has(body.reader-mode) { overflow:auto !important; }
body.reader-mode { overflow:auto !important; }
html:has(body.reader-mode) .wrap { min-height:auto !important; padding-bottom: 24px !important; }
html:has(body.reader-mode) #cardR { min-height:auto !important; height:auto !important; overflow:visible !important; cursor:default !important; }
html:has(body.reader-mode) #readerContainer { overflow:visible !important; max-height:none !important; min-height:0 !important; }
html:has(body.reader-mode) .toolbar { display:none !important; }

/* Underlined word trigger */
.uword{ text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

.opt:focus{outline:none}

.opt:active{transform:none}

/* Tooltip für Vokabeln */
.vocab {
  position: relative;
  cursor: help;
  border-bottom: 2px dotted currentColor;
  padding-bottom: 1px;
  --shift: 0;
}
.vocab:focus { outline: 2px solid #6ea8fe; outline-offset: 2px; }

.vocab:hover::after,
.vocab:focus::after,
.vocab.is-open::after { opacity: 1; }

.cardImg {
  width:100%;
  max-height:180px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 10px;
  padding: 10px;
}
.cardImg img {
  max-width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:10px;
}

/* Toolbar auf der Home/Chooser-Seite verstecken */
body[data-mode="home"] .toolbar { display: none !important; }

.vocab.is-open::after{
  width: var(--tip-w, 300px);
  transform: translateX(var(--shift, 0));
}