:root {
  --bg:#121212;        /* neutral dark background */
  --panel-bg:#0f0f0f;      /* panels/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:18px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial
}
body{ padding:0; }

/* Main wrapper */
.wrap{
  max-width:720px;
  margin:0 auto;
  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:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  column-gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
}

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

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

#hdrMenu{justify-self:start}
#hdrBack{justify-self:start;width:32px;height:32px;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .16s ease}
#hdrBack.is-visible{visibility:visible;pointer-events:auto;opacity:1}
#hdrBack svg{stroke-width:1.7}
#logo{justify-self:start;margin:0}
.header-icons{justify-self:end;display:flex;align-items:center;justify-content:flex-end;width:auto}
#hdrFilter{margin:0}

/* 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}

/* Panels */
.panel{
  background:var(--panel-bg);
  border-radius:10px;
  position:relative;
  margin:0;
  cursor:pointer;

  /* Keep the panel within the viewport so the bottom action bar never gets pushed off-screen */
  height:calc(100svh - 140px);
  max-height:calc(100svh - 140px);
  min-height:calc(100svh - 140px);

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  overflow:hidden;
  touch-action:pan-y
}
@supports (height: 100dvh){
  .panel{
    height:calc(100dvh - 140px);
    max-height:calc(100dvh - 140px);
    min-height:calc(100dvh - 140px);
  }
}
.panel .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}
.panel.open:not(.quiz) .prompt{display:none}
.panel.open .reveal{display:flex}
.panel.quiz .prompt{display:flex;align-items:center;justify-content:center;gap:0px;flex-wrap:wrap}
.panel.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}

/* Hub screens: Home / Play / Sentence */
#screen-home,
#screen-sentence,
#screen-play{
  position:static;
  inset:auto;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
}

.playScreen{
  position:static;
  inset:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:18px 0 28px;
  box-sizing:border-box;
  min-height:calc(100dvh - 96px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.playTitle{
  width:100%;
  max-width:720px;
  box-sizing:border-box;
}

#playHub{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

.playScreen.playHubMode #promptP{
  display:none !important;
}

.playScreen:not(.playHubMode) .playTitle{
  display:none;
}

.hubTitle {
    margin: 20px 0 20px;
    font-size: 20px;
    font-weight: 400;
	padding:0 18px;
}

.hubScreen{
  position:static;
  inset:auto;
  display:grid;
  place-items:start center;
  padding:18px 0 28px;
  box-sizing:border-box;
  height:calc(100dvh - 96px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.hubScreen > .homeGrid{
  width:100%;
}

.homeGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  width:100%;
  margin:0 auto;
  padding:0 18px;
  box-sizing:border-box;
  align-content:start;
}

.homeTile{
  all:unset;
  cursor:pointer;
  position:relative;
  display:block;
  min-height:164px;
  border-radius:10px;
  box-sizing:border-box;
  padding:22px 20px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  overflow:hidden;
}

.homeTile.quiz{
  background:linear-gradient(180deg, #b8d3f4 0%, #77a9ee 100%);
}

.homeTile.play{
  background:linear-gradient(180deg, #f3c387 0%, #f6a14b 100%);
}

.homeTile.sentence{
  background:linear-gradient(180deg, #a8d88c 0%, #72c965 100%);
}

.homeTile.dialog{
  background:linear-gradient(180deg, #c1b1ef 0%, #8d78ef 100%);
}

.homeTile.synonyms{
  background:linear-gradient(180deg, #9fd1e8 0%, #62b9e5 100%);
}

.homeTile.writing{
  background:linear-gradient(180deg, #f3d09a 0%, #efb85b 100%);
}

.homeTile.drill{
  min-height:150px;
  background:linear-gradient(180deg, #eea1ae 0%, #ef7d93 100%);
}

.homeTileLabel{
  position:absolute;
  left:18px;
  bottom:16px;
  color:#fff;
  font-weight:700;
  font-size:18px;
  line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.08);
}

.homeTileIcon{
  position:absolute;
  right:18px;
  top:14px;
  font-size:40px;
  line-height:1;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.16));
}

@media (max-width:520px){
  .homeGrid{
    gap:14px;
    max-width:420px;
  }

  .homeTile{
    min-height:100px;
    border-radius:10px;
    padding:18px 16px;
  }

  .homeTile.drill{
    min-height:100px;
  }

  .homeTileLabel{
    left:16px;
    bottom:14px;
    font-size:17px;
  }

  .homeTileIcon{
    right:16px;
    top:12px;
    font-size:36px;
  }
}

/* Menu */
#menu{
  position:fixed;
  top:calc(58px + env(safe-area-inset-top));
  right:14px;
  background:var(--panel-bg);
  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
}

/* ===== Satz-Baukasten Hub (Build/Train/Produce) ===== */
.builderHub{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.builderHubSub{display:none;/* simplified hub */

  width:100%;
  max-width:320px;
  font-size:13px;
  opacity:.7;
  text-align:center;
}
.builderHubGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:100%;
  max-width:320px;
}
.builderHubBtn{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  height:68px;
  border-radius:10px;
  border:1px solid #787878;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:0 14px;
  font-weight:800;
  text-align:left;
  transition:background .2s, border-color .2s, outline-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.builderHubBtn:hover{ background:var(--btn-hover); transform:translateY(-2px); }
.builderHubBtn svg{ width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:2; }
.builderHubBtnSimple{ justify-content:center; gap:12px; }
.builderHubLabel{ font-size:16px; font-weight:800; }

.builderHubTxt{display:flex;flex-direction:column;line-height:1.05}
.builderHubTxt .t{font-size:16px;}
.builderHubTxt .d{font-size:12px;opacity:.7;font-weight:600;margin-top:4px}
#menu .mi{all:unset;display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;transition:background .18s}
#menu .mi:hover{background:var(--btn-hover)}

#menu .mi svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;}
#menu .mi span{display:inline-block;}
#menu hr{border:none;border-top:1px solid var(--line);margin:0}

.mnemoBox{
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.35);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.4;
  margin: 6px 0 2px;
}

.prompt .ttsbtn + .infobtn{ vertical-align:middle; }

/* 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(--panel-bg);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}

.settingsField{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;}
.settingsLabel{color:var(--muted);font-size:13px;}
#settingsFields{margin:6px 0 4px;}
.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:100%;max-width:560px;grid-template-columns:1fr 1fr}
.opt{all:unset;cursor:pointer;background:var(--panel-bg);border:1px solid var(--line);padding:12px 14px;border-radius:10px;text-align:center;transition:background .2s, border-color .2s, outline-color .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}
.ttsbtn .voice-wave-static{display:flex;align-items:center;justify-content:center;gap:3px;height:16px}
.ttsbtn .voice-wave-static span{display:block;width:3px;background:var(--ink);border-radius:2px}
.ttsbtn .voice-wave-static span:nth-child(1){height:6px}
.ttsbtn .voice-wave-static span:nth-child(2){height:12px}
.ttsbtn .voice-wave-static span:nth-child(3){height:8px}
.ttsbtn .voice-wave-static span:nth-child(4){height:14px}

/* Info ("i") button used for translations (Drill + Dialog + Mnemo) */
.infobtn{
  all:unset;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--ink);
  font-weight:900;
  font-size:15px;
  line-height:1;
  margin-left:10px;
  -webkit-tap-highlight-color: transparent;
}
.infobtn:hover{ background:var(--btn-hover); }
.infobtn::before{ content:"i"; }

/* Schreiben/Drill Eingaben */
#screen-write .panel, #screen-drill .panel{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:15px;

  outline:none;
  box-shadow:none;
  transition:none;
}

.writeRow input:focus,
.writeRow textarea:focus {
  outline:none;
  box-shadow:none;
  border-color:var(--line);
}

*{
  -webkit-tap-highlight-color: transparent;
}

.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 #screen-reader .panel,
body.reader-mode #screen-reader .panel,
body.reader-mode #screen-reader .box{
  height:calc(100vh - 120px);
  max-height:calc(100vh - 120px);
  overflow:hidden;
}

/* 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; }

/* ===== Unified Panel Image ===== */
.panelImg{
  width:160px;
  height:120px;             
  overflow:hidden;
  border-radius:12px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
}

.panelImg img{
  width:100%;
  height:100%;
  object-fit:cover;          /* fill without distortion */
  object-position:center;    /* clean crop */
  image-rendering:auto;
}

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

/* Quiz: + button & expandable example sentences */
.quizPlusBtn{
  all:unset;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  margin-left:10px;
  border-radius:999px;
  color:var(--muted);
  font-size:22px;
  font-weight:900;
  line-height:1;
}
.quizPlusBtn:hover{ background:var(--btn-hover); color:var(--ink); }

.quizSentenceBox{
  width:min(560px, 92%);
  margin:10px auto 6px;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#1f1f1f;
  display:none;
}
.quizSentenceRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
}
.quizSentenceRow + .quizSentenceRow{
  border-top:1px solid var(--line);
}
.quizSentencePlay{
  /* uses existing .ttsbtn styles; keep right aligned */
  margin-left:0 !important;
}
.quizSentenceText{
  flex:1;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  text-align:left;
}

/* Quiz: bottom actions (speaker + plus) like Tinder */
.quizActions{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
  display:flex;
  gap:18px;
  z-index:6;
}

.quizActionBtn,
.drillActionBtn{
  all:unset;
  cursor:pointer;
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  -webkit-tap-highlight-color: transparent;
  color:var(--ink);
  line-height:1;
  flex:0 0 42px;
  box-sizing:border-box;
}

.quizActionBtn:hover,
.drillActionBtn:hover{ background:var(--btn-hover); }

.quizActionBtn:active,
.drillActionBtn:active{ transform:none; }

.quizActionBtn svg,
.drillActionBtn svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.quizActionBtn[disabled],
.drillActionBtn[disabled]{
  opacity:.42;
  pointer-events:none;
}

.trainCheckOk{
  color:#dcfce7;
  border-color:rgba(34,197,94,.72);
  background:rgba(34,197,94,.22);
  box-shadow:0 0 0 1px rgba(34,197,94,.22) inset, 0 0 18px rgba(34,197,94,.24);
}
.trainCheckOk:hover{
  background:rgba(34,197,94,.28);
}

/* Quiz: reserve space for bottom action buttons */
.panel.quiz{
  padding-bottom:96px;
  box-sizing:border-box;
}

/* Quiz: mini info panel opened by + (floats, does not push layout) */
.quizInfo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:78px;
  width:min(560px, 92%);
  margin:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:#1f1f1f;
  z-index:6;
  display:none;
}
.quizMiniRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.quizMiniText{
  flex:1;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  text-align:left;
  padding: 14px;
}
.quizMiniPlay{ margin-left:0 !important; }

/* Build: reserve space for bottom action buttons */
.panel.build{
  padding-bottom:42px;
  box-sizing:border-box;
}

/* Build: mini info panel opened by i (floats, does not push layout) */
.buildInfo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:78px;
  width:min(560px, 92%);
  margin:0;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#1f1f1f;
  z-index:6;
  display:none;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  text-align:left;
}

/* Dialog: accordion (Q in prompt) + inline + buttons per step */
.dialogBox{
  width:min(560px, 92%);
  margin:12px auto 6px;
  /* no outer frame – only the sentence bubbles are framed */
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  display:block;
}

.dlgPlusRow{
  display:flex;
  justify-content:center;
  padding:2px 0 10px;
}

.dlgPlusBtn{
  all:unset;
  cursor:pointer;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--ink);
  font-size:22px;
  font-weight:900;
  line-height:1;
}
.dlgPlusBtn:hover{ background:var(--btn-hover); }

.dlgLine{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  padding:10px 0;
}
.dlgLine + .dlgLine{ border-top:1px solid var(--line); }

.dlgBubble{
  flex:1;
  background:#121212;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  color:var(--ink);
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  text-align:left;
}

.dlgPlay{ margin-left:0 !important; }

/* Dialog: small info button (uses global tooltip handler) */
.dlgInfo{ margin-left:2px; }

/* ===== Step 0 Language Gate ===== */
#langGate{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.60);
  backdrop-filter:blur(3px);
  z-index:60;
}
#langGate .lgPanel{
  width:min(360px, 92vw);
  background:var(--panel-bg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.40);
  position:relative;
}
#langGate .lgTitle{
  font-weight:800;
  font-size:15px;
  text-align:center;
  margin-bottom:8px;
}
#langGate .lgHint{
  color:var(--muted);
  font-size:13px;
  text-align:center;
  margin:8px 0 12px;
}
#langGate .lgGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
#langGate .lgBtn{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:60px;
  border-radius:12px;
  background:var(--panel-bg);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  font-weight:800;
}
#langGate .lgBtn:hover{ background:var(--btn-hover); transform:translateY(-2px); transition:background .2s, border-color .2s, outline-color .2s; }
#langGate .lgFlag{ font-size:20px; }
#langGate .lgBack{
  position:absolute;
  left:12px;
  top:12px;
  all:unset;
  cursor:pointer;
  width:38px;height:38px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
  display:grid;
  place-items:center;
  font-weight:900;
}
#langGate .lgBack:hover{ background:var(--btn-hover); }


/* ===== App loading guard (prevents clicks during heavy manifest load) ===== */
body.is-loading{pointer-events:none;cursor:progress;}

/* ===== Play mode (match pairs) ===== */
.playBoard{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  /* match Quiz options sizing + true center */
  width:95%;
  max-width:560px;
  margin:0 auto;
  justify-content:center;
  justify-items:stretch;
}
.playCol{ display:grid; gap:10px; }
.playCell{
  all:unset;
  cursor:pointer;
  background:var(--panel-bg);
  border:1px solid var(--line);
  padding:12px 14px;
  border-radius:10px;
  text-align:center;
  transition:background .2s, border-color .2s, outline-color .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.playCell:active{ transform:none; }
.playCell .playAudioIcon{
  display:inline-grid;
  place-items:center;
  width:100%;
  min-height:24px;
  font-size:22px;
  line-height:1;
}
.playCell[title="Anhören"]{
  font-size:0;
}

/* Play: fixed language sides (Left=Spanish, Right=German) */
.playCell.leftLang{
  background:#343434;
  color:#ffffff;
}
.playCell.rightLang{
  background:#282828;
  color:#ffffff;
}
.playCell.leftLang.selected{ outline-color:#1E88E5; }
.playCell.rightLang.selected{ outline-color:#F57C00; }

.playCell.selected{
  outline:2px solid var(--ink);
  outline-color: var(--ink);
  outline-offset:2px;
}
.playEnd{
  width:95%;
  max-width:420px;
  margin:0 auto 4px;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
}
.playEndScore{ color:var(--muted); font-size:15px; }

/* Play start screen */
.playStart{width:min(560px,92%); margin:10px auto 0; display:flex; flex-direction:column; align-items:center; gap:10px;}
.playStart .btn{width:100%;}
.playStartHint{color:var(--muted); font-size:13px; text-align:center;}

/* In Play, #optsl uses class .options for consistent sizing.
   But .options is a 2-col grid by default, and Play renders another 2-col grid inside (.playBoard).
   That created an empty second column on the wrapper and made the board look left-aligned.
   We make the wrapper a 1-col grid and let .playBoard handle the 2 columns (like Quiz). */

/* center any options wrapper */
.options{ margin-left:auto; margin-right:auto; }

/* Play wrapper: single column */
#optsl.options{ grid-template-columns: 1fr; }

/* Play actual board: two columns */
#optsl .playBoard{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  width:100%;
}

/* Start panel should span full width */
#optsl .playStart{ grid-column: 1 / -1; width:100%; }

/* ===== Play Mode layout fix: avoid nested 2-col grids =====
   Problem: In Play, the options wrapper (.options) is a 2-col grid (needed for Quiz).
   Play renders its own 2-col board inside that wrapper, which makes the whole board sit in the left column.
   Fix: Only in Play view (panelI has class .play) force the wrapper to 1 column and let .playBoard handle the 2 columns. */

/* center options wrapper (safety) */
.options{ margin-left:auto; margin-right:auto; }

/* Play wrapper: single column (only when panel is in Play mode) */
.play #optsI.options{ grid-template-columns: 1fr; }

/* Play actual board: two columns (only in Play mode) */
.play #optsI .playBoard{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  width:100%;
}

/* Start panel should span full width */
.play #optsI .playStart{ grid-column: 1 / -1; width:100%; }

#screen-write #writeInput.writeInputDock:focus{
  outline:none;
  box-shadow:none;
  border-color:var(--line);
}

#screen-write .writeInnerCheck.trainCheckOk{
  color:#dcfce7;
  background:rgba(34,197,94,.22);
  box-shadow:0 0 0 1px rgba(34,197,94,.22) inset, 0 0 18px rgba(34,197,94,.24);
}

@media (max-width:520px){
  
  
  
  
  
}

/* ===== Hide placeholder image tile in Play / Build / Dialog / Train / Produce ===== */
.panel.play .panelImg,
.panel.build .panelImg,
.panel.dialog .panelImg,
.panel.train .panelImg,

/* Safety: if any panelImg is empty (no <img>), hide it */
.panelImg:empty{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* ===== Build: bottom bar with 4 buttons (undo, speak, info, next) ===== */
.buildBottomBar{ gap:18px; }

/* ===== Drill: modern bottom actions (like Quiz) ===== */
.panel.drill{
  padding-bottom:110px;
  box-sizing:border-box;
}

.drillActions{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  display:flex;
  gap:18px;
  z-index:6;
}

.drillActionBtn.primary{
  background:var(--ok);
  border-color:var(--ok);
  color:#fff;
}

.drillActionBtn.primary:hover{ background:#16a34a; }

/* Hide the centered next button inside Drill (we use bottom action bar instead) */
.panel.drill .navArrows{ display:none !important; }

/* Drill: sentences list like a modern panel with per-line speak button */
.drillSentenceBox{
  width:100%;
  max-width:560px;
  margin:16px auto 0;
  padding:14px 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  border-radius:10px;
  text-align:left;
}

.drillSentenceRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
}

.drillSentenceRow + .drillSentenceRow{ border-top:1px solid rgba(255,255,255,0.06); }

.drillSentenceText{ flex:1; align-items: center; line-height:1.45; }

.drillSentencePlay{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.drillSentencePlay:hover{ background:var(--btn-hover); }

/* Drill typing feels more like a panel than a form */
#screen-drill textarea.field,
#screen-drill input.field{
  background:#1f1f1f;
  border-radius:14px;
  font-size:18px;
  text-align:center;
}

/* Drill: per-sentence actions (speaker + info) */
.drillSentenceActions{display:flex;align-items:center;gap:0;}
.drillSentenceInfo{margin-left:10px;}
/* ===== DRILL LAYOUT FIX (responsive, no shifting) =====
   - Do NOT change panel layout/centering.
   - Keep sentences box responsive.
   - Prevent bottom action buttons from covering the last sentence on small screens
     by (a) adding a bit more bottom padding in Drill, and (b) letting the sentence
     list scroll inside its own box only on short viewports. */
.panel.drill{
  padding-bottom:160px; /* was 110px */
}

/* Sentence box: responsive width without changing overall alignment */
.drillSentenceBox{
  width:min(560px, 92%);
  max-width:none;         /* width:min() handles it */
  margin:16px auto 0;
}

/* On short screens: keep layout stable, but allow the sentence list to scroll */
@media (max-height: 700px){
  .drillSentenceBox{
    max-height: min(45vh, 340px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ===== Train mode ===== */
.panel.train .prompt{
  display:flex !important;
  font-size:18px;
  text-align:center;
  max-width: 560px;
}
.trainWrap{
  width:95%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:90px;
}
.trainHint{
  color:var(--muted);
  font-size:13px;
  text-align:center;
  font-weight:700;
}
.trainInputRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.trainInputRow .field{
  flex:1;
}
.trainBottomBar{
  justify-content:center;
  gap:18px;
}

/* ===== Train: word bank like Build (clean, centered, scrollable) ===== */
.panel.train #optsI.options,
.train #optsI.options{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
}

.trainWrap{
  width:95%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:110px; /* reserve space for bottom actions */
  height:100%;
  max-height:100%;
  min-height:0;
}

.trainWords{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-content:flex-start;
  padding:6px 4px 10px;
}

.trainWordBtn{
  all:unset;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-size:15px;
  letter-spacing:.01em;
}
.trainWordBtn:hover{ filter:brightness(1.08); }
.trainWordBtn:active{ transform: translateY(1px); }

.trainMsg{
  min-height:18px;
  color:var(--muted);
  font-size:15px;
  text-align:center;
}

/* ===== BuilderHub should look exactly like Home menu ===== */
.panel.builderhub{justify-content:center !important;}
.panel.builderhub .prompt{display:none !important;}
.panel.builderhub .panelImg{display:none !important;}
.panel.builderhub #optsI{display:block !important;width:100%;box-sizing:border-box;}
.hubMenuGrid{display:grid;grid-template-columns:1fr;gap:8px;width:100%;max-width:420px;margin:0 auto;}
.hubMenuBtn{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 16px;border-radius:12px;font-weight:700;text-align:center;transition:background .18s;-webkit-tap-highlight-color:transparent;}
.hubMenuBtn:hover{background:var(--btn-hover)}
.hubMenuBtn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2}

/* ===== Header layout: hamburger + brand left, pill actions right ===== */
header{ gap:12px; }
.hdr-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.hdr-brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.hdr-brand .brand-name{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:0;
  font-weight:900;
  font-size:20px;
  letter-spacing:-.2px;
  line-height:1;
}
.hdr-brand .brand-name span{ display:inline-block; }
.hdr-brand .l1{ color:#ffd84d; }
.hdr-brand .l2{ color:#ff9f1c; }
.hdr-brand .l3{ color:#ff595e; }
.hdr-brand .l4{ color:#8ac926; }
.hdr-brand .l5{ color:#3a86ff; }
.hdr-brand .l6{ color:#9b5de5; }
.hdr-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }

#hdrMenu.iconbtn{
  width:30px;
  height:30px;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0;
}
#hdrMenu.iconbtn:hover{ background:transparent !important; }
#hdrMenu.iconbtn svg{
  width:20px;
  height:20px;
  stroke:#a8a8a8;
  stroke-width:2.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#hdrMenu.iconbtn:hover svg{ stroke:#f2f2f2; }

.hdrPill{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
}
.hdrPill .iconbtn{
  border:none !important;
  background:transparent !important;
  width:30px;
  height:30px;
}

/* ===== Drawer menu (ChatGPT-style) ===== */
.menuBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  display:none;
  z-index:19;
}
.menuBackdrop.show{ display:block; }

#menu.drawer{
  position:fixed;
  inset:0 auto 0 0;
  width:min(320px, 86vw);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  border-radius:0 18px 18px 0;
  display:flex;
  flex-direction:column;
  transform:translateX(-110%);
  transition:transform .22s ease;
  z-index:20;
  overflow:hidden;
  box-sizing:border-box;
  height:100svh;
  min-height:100svh;
}
@supports (height: 100dvh){
  #menu.drawer{
    height:100dvh;
    min-height:100dvh;
  }
}
#menu.drawer.open{ transform:translateX(0); }

.drawerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  background:rgba(15,15,15,.9);
}
.drawerTitle{ font-weight:900; font-size:15px; }
.drawerClose{
  all:unset;
  cursor:pointer;
  width:34px;height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
  display:grid;
  place-items:center;
  font-weight:900;
}
.drawerClose:hover{ background:var(--btn-hover); }

.drawerNav{
  display:flex;
  flex-direction:column;
  padding:6px 0 14px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.drawerSep{ height:10px; border-top:1px solid var(--line); margin:10px 0; }

#menu.drawer .mi{
  padding:12px 14px;
}
#menu.drawer .mi.sub{
  padding-left:34px;
}
/* ===== Right drawer (Filter) ===== */
.filterBackdrop{ z-index:29; }

#unitSheet.filterDrawer{
  position:fixed;
  inset:0 0 0 auto;
  width:min(380px, 92vw);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  border-radius:18px 0 0 18px;
  border:1px solid var(--line);
  background:var(--panel-bg);
  display:flex;
  flex-direction:column;
  transform:translateX(110%);
  transition:transform .22s ease;
  z-index:30;
  overflow:hidden;
  box-sizing:border-box;
  height:100svh;
  min-height:100svh;
}
@supports (height: 100dvh){
  #unitSheet.filterDrawer{
    height:100dvh;
    min-height:100dvh;
  }
}
#unitSheet.filterDrawer.open{ transform:translateX(0); }

#unitSheet.filterDrawer .filterBody{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 14px 18px;
  box-sizing:border-box;
}
.filterSectionTitle{
  font-weight:900;
  font-size:12px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin:10px 0 8px;
}
.unitList{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:#121212;
  overflow:hidden;
}
.unitList label{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.unitList label:last-child{ border-bottom:none; }
.unitList input{ width:16px; height:16px; }

#unitSheet.filterDrawer .filterActions{
  display:flex;
  gap:10px;
  margin-top:12px;
  position:sticky;
  bottom:0;
  padding:12px 0 6px;
  background:linear-gradient(to top, rgba(15,15,15,1), rgba(15,15,15,.8), rgba(15,15,15,0));
}
#unitSheet.filterDrawer .filterActions .btn{
  flex:1;
}
.drawerGroup .groupLabel{ display:flex; align-items:center; gap:10px; font-weight:600; }
.drawerGroup .groupDot{
  width:8px;height:8px;border-radius:50%;
  background:#888;
  display:inline-block;
}
.drawerGroup .groupChevron{ transition:transform .18s ease; opacity:.7; margin-left:auto; }
/* Chevron points down when collapsed, up when open */
.drawerGroup:not(.collapsed) .groupChevron{ transform:rotate(180deg); }

.groupBody{ display:block; }

/* ===== Sentence group icon (drawer) ===== */
.drawerGroup .groupLabel svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;opacity:.95}
.drawerGroup .groupLabel span{display:inline-block}

/* ===== Filter drawer (Units) slides from right like menu ===== */
#unitSheet.sheet{
  place-items:stretch end;
  padding:0;
}
#unitSheet.sheet .panel{
  width:min(420px, 92vw);
  height:100%;
  border-radius:16px 0 0 16px;
  border:1px solid var(--line);
  border-right:none;
  transform:translateX(100%);
  transition:transform .22s ease;
  box-shadow:-12px 0 40px rgba(0,0,0,.45);
}
#unitSheet.sheet.open{display:grid;}
#unitSheet.sheet.open .panel{transform:translateX(0);}

/* ===== v6: Sentence group matches normal items + premium chevron ===== */
#menu.drawer .mi.groupHead{ font-weight:500; }
#menu.drawer .drawerGroup .groupLabel{ font-weight:inherit; flex:1; min-width:0; }
#menu.drawer .drawerGroup .groupChevron{ flex:0 0 auto; display:block; opacity:.65; margin-left:0; }
#menu.drawer .drawerGroup:not(.collapsed) .groupChevron{ opacity:.9; }

/* ===== v7: Sentence row identical to normal menu items + proper chevron on the right ===== */
#menu.drawer .drawerNav .mi{font-weight:500;}
#menu.drawer .mi.groupHead{font-weight:500;}
#menu.drawer .drawerGroup .groupLabel{font-weight:inherit;flex:1;min-width:0;}
#menu.drawer .drawerGroup .groupChevron{display:block;flex:0 0 auto;margin-left:auto;opacity:.65;}
#menu.drawer .drawerGroup:not(.collapsed) .groupChevron{transform:rotate(180deg);opacity:.9;}

/* hide legacy dot in header brand */
#hdrBrand .brand-dot{ display:none !important; }

/* ===== Train UX refresh ===== */
.panel.train .prompt{
  font-weight:500;
  padding:24px 20px 18px;
}
.trainPromptWrap{
  width:100%;
  display:flex;
  justify-content:center;
}
.trainPrompt{
  width:min(560px, 92%);
  line-height:1.55;
  font-weight:560;
  color:var(--ink);
}
.trainPrompt.needsGap{
  animation:trainPromptNudge .42s ease;
}
@keyframes trainPromptNudge{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(5px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.trainPrompt .gap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  padding:6px 10px;
  margin:0 3px;
  border-radius:12px;
  border:1px solid transparent;
  background:rgba(255,255,255,.04);
  color:var(--ink);
  cursor:pointer;
  transition:transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.trainPrompt .gap:hover{
  background:rgba(255,255,255,.07);
}
.trainPrompt .gap.active{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 0 0 4px rgba(255,255,255,.05);
  transform:translateY(-1px);
}
.trainPrompt .gap.filled{
  background:rgba(255,255,255,.08);
}
.trainPrompt .gap.filled:not(.active){
  border-color:transparent;
  box-shadow:none;
}
.trainPrompt .gap[data-state="active"]{
  animation:trainGapPulse 1.35s ease-in-out infinite;
}
@keyframes trainGapPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.10); }
  50%{ box-shadow:0 0 0 6px rgba(255,255,255,.05); }
}
.trainWordBtn{
  transition:transform .12s ease, filter .16s ease, background .18s ease, border-color .18s ease;
}
.trainWordBtn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
}
.trainMsg{
  min-height:20px;
  margin-top:-6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.trainInlineHint{
  color:var(--muted);
  font-size:15px;
  text-align:center;
}
.trainInlineHintWarn{ color:#e7c47f; }
.trainFeedback{
  width:min(560px, 95%);
  border-radius:16px;
  padding:8px 6px;
  border:1px solid var(--line);
  background:#1a1a1a;
  text-align:center;
  margin-bottom: 25%;
}
.trainFeedbackTitle{
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
}
.trainFeedbackSub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}
.trainFeedbackOk{
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.09);
}
.trainFeedbackBad{
  border-color:rgba(239,68,68,.34);
  background:rgba(239,68,68,.08);
}
.trainFeedbackWarn{
  border-color:rgba(245,158,11,.30);
  background:rgba(245,158,11,.08);
}

/* ===== Filter drawer modern controls ===== */
.filterSettingsSection{
  border:1px solid var(--line);
  border-radius:16px;
  background:#121212;
  margin-top:14px;
  overflow:hidden;
}
.filterSettingsToggle{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  box-sizing:border-box;
  padding:14px 14px;
  font-weight:800;
}
.filterSettingsBody{
  padding:0 14px 14px;
  border-top:1px solid var(--line);
}
.filterFieldWrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.filterFieldWrap > span{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.filterDangerBtn{
  width:100%;
  max-width:100%;
  margin-top:14px;
  border-color:rgba(239,68,68,.5);
  color:#f3c0c0;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:center;
}
.filterCheckRow{
  display:flex !important;
  align-items:center;
  gap:12px !important;
  padding:14px 12px !important;
  cursor:pointer;
  user-select:none;
}
.filterCheckInput{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.filterCheckUi{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1.5px solid #6b7280;
  background:transparent;
  flex:0 0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.filterCheckUi::after{
  content:'';
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
  transform:scale(0);
  transition:transform .18s ease;
}
.filterCheckInput:checked + .filterCheckUi{ border-color:#f2f2f2; }
.filterCheckInput:checked + .filterCheckUi::after{ transform:scale(1); }
.unitList{
  gap:8px;
  border:none;
  background:transparent;
  overflow:visible;
}
.unitList label{
  border:1px solid var(--line);
  border-radius:14px;
  background:#121212;
  margin:0;
}
.unitList label:last-child{ border-bottom:1px solid var(--line); }
.filterDifficultyRow{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.filterDifficultyRow .btn.active{
  background:var(--btn-hover);
  border-color:#4a4a4a;
  color:#fff;
  opacity:1 !important;
}
#playModeRow .filterDifficultyRow{
  grid-template-columns:1fr 1fr 1fr;
}
#playModeRow .btn{
  min-width:0;
}
#screen-write #writeInput.is-ok,
#screen-write #writeInput[data-ok="1"]{
  border-color:var(--line) !important;
  box-shadow:none !important;
}
#screen-write #writeInput.is-bad,
#screen-write #writeInput[data-ok="0"]{
  border-color:rgba(239,68,68,.75) !important;
  box-shadow:none !important;
}
.writeMsg .produceTypedRow{ justify-content:center; }

/* ===== Disable placeholders globally ===== */
input::placeholder,
textarea::placeholder{
  color:transparent !important;
  opacity:0 !important;
}

/* Build should not introduce extra vertical gaps */
.buildWrap{
  align-content:flex-start;
}

/* ===== iPhone full-height fix (global) ===== */
html{
  height:-webkit-fill-available;
  min-height:100%;
  background:var(--bg);
}
body{
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  background:var(--bg);
}

.wrap,
#screen-home,
#menu.drawer,
#unitSheet.filterDrawer,
#sheet,
#packSheet,
#langGate{
  min-height:100vh;
  min-height:100svh;
}
@supports (height: 100dvh){
  .wrap,
  #screen-home,
  #menu.drawer,
  #unitSheet.filterDrawer,
  #sheet,
  #packSheet,
  #langGate{
    min-height:100dvh;
  }
}

#screen-home,
#sheet,
#packSheet,
#langGate{
  inset:0;
}

#menu.drawer{
  inset:0 auto 0 0 !important;
  height:100vh !important;
  height:100svh !important;
  min-height:100svh !important;
  padding-bottom:max(env(safe-area-inset-bottom), 16px) !important;
}
@supports (height: 100dvh){
  #menu.drawer{
    height:100dvh !important;
    min-height:100dvh !important;
  }
}

#unitSheet.filterDrawer{
  inset:0 0 0 auto !important;
  height:100vh !important;
  height:100svh !important;
  min-height:100svh !important;
  padding-bottom:max(env(safe-area-inset-bottom), 16px) !important;
}
@supports (height: 100dvh){
  #unitSheet.filterDrawer{
    height:100dvh !important;
    min-height:100dvh !important;
  }
}

#menu.drawer .drawerNav,
#unitSheet.filterDrawer .filterBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

#sheet .panel,
#packSheet .panel{
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}

/* ===== FINAL iPhone safe-area override v4 ===== */
html, body {
  height: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
}

@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

.menuBackdrop,
.filterBackdrop,
.sheet {
  inset: 0;
}

#menu.drawer,
#unitSheet.filterDrawer {
  position: fixed;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@supports (-webkit-touch-callout: none) {
  #menu.drawer,
  #unitSheet.filterDrawer {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
  }
}

@supports (height: 100dvh) {
  #menu.drawer,
  #unitSheet.filterDrawer {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

#menu.drawer {
  left: 0 !important;
  right: auto !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: 0 !important;
}

#menu.drawer .drawerNav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
}

#unitSheet.filterDrawer {
  right: 0 !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: 0 !important;
}

#unitSheet.filterDrawer .filterBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 16px !important;
}

#unitSheet.filterDrawer .filterActions {
  flex: 0 0 auto;
  margin-top: auto !important;
  position: sticky;
  bottom: 0;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 12px) !important;
  background: #0f0f0f !important;
}

#sheet.sheet {
  align-items: end;
}

#sheet.sheet .panel {
  width: min(720px, 100%);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

/* ===== Shared Writing + Produce layout ===== */
#screen-write {
  --write-vh: 100dvh;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: var(--write-vh);
  min-height: var(--write-vh);
  max-height: var(--write-vh);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#writeRoot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  overflow: hidden;
}

#writeRoot.write-mode,
#writeRoot.produce-mode {
  background: transparent;
}

#promptW {
  width: 100%;
  max-width: 760px;
  min-height: calc(2.4em + 8px);
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  box-sizing: border-box;
  flex: 0 0 auto;
}

#writeMsg {
  width: 100%;
  max-width: 760px;
  height: 86px;
  min-height: 86px;
  margin: 0 auto;
  padding: 6px 6px 2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  touch-action: pan-x;
  flex: 0 0 86px;
}

#writeMsg::-webkit-scrollbar {
  display: none;
}

#writeMsg .produceTypedRow,
.produceTypedRow,
.produceMissingRow {
  display: flex;
  align-items: center;
}

#writeMsg .produceTypedRow {
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  width: max-content;
  min-width: max-content;
  min-height: 78px;
  margin: 0 auto;
  padding: 0;
}

.produceTypedRow,
.produceMissingRow {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#writeMsg .produceTypedRow > * {
  flex: 0 0 auto;
}

#writeMsg:empty,
#writeMsg.is-empty {
  visibility: hidden;
}

#writeMsg > * {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.produceTypedChip.is-wrong {
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.14);
  color: #fecaca;
}

.produceHintChip {
  font-weight: 400;
}

#writeDock {
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
}

#writeDock .writeInputShell {
  position: relative;
  width: 100%;
  min-height: 56px;
  border: 1px solid #3f3f46;
  border-radius: 30px;
  background: rgba(43,43,43,.9);
  box-shadow: 0 10px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);
  overflow: visible;
}

#writeDock .writeInputShell.is-editing {
  border-color: #5a5a5a;
  box-shadow: none;
}

#writeInput.writeInputDock,
#writeInput {
  width: 100%;
  height: 58px;
  min-height: 58px;
  margin: 0;
  padding: 15px 108px 15px 50px;
  border: none;
  border-radius: 28px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  resize: none;
  overflow-y: hidden;
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.01em;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

textarea#writeInput.writeInputDock,
#writeInput.writeInputDockArea {
  display: block;
  height: 58px;
  min-height: 58px;
  max-height: 82px;
  padding-top: 18px;
  padding-bottom: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#writeDock .writeInputShell.is-textarea,
#writeDock .writeInputShell.is-grown {
  min-height: 58px;
}

#writeInput.writeInputDock:focus,
#writeInput:focus,
#screen-write #writeInput.writeInputDock:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--line);
}

#writeDock .writeInnerSpeak,
#writeDock .writeInnerCheck,
#writeDock .writeInnerNext {
  all: unset;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #d7d7d7;
  z-index: 3;
  pointer-events: auto;
}

#writeDock .writeInnerSpeak { left: 12px; }
#writeDock .writeInnerCheck { right: 54px; }
#writeDock .writeInnerNext {
  right: 8px;
  background: rgba(255,255,255,.10);
}

#writeDock .writeInnerSpeak:hover,
#writeDock .writeInnerCheck:hover,
#writeDock .writeInnerNext:hover {
  background: rgba(255,255,255,.12);
}

#writeDock .writeInnerSpeak svg,
#writeDock .writeInnerCheck svg,
#writeDock .writeInnerNext svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

#writeDock .writeInnerCheck.trainCheckOk,
#screen-write .writeInnerCheck.trainCheckOk {
  color: #dcfce7;
  background: rgba(34,197,94,.22);
  box-shadow: 0 0 0 1px rgba(34,197,94,.22) inset, 0 0 18px rgba(34,197,94,.24);
}

#writeInput.is-ok,
#writeInput[data-ok="1"],
#screen-write #writeInput.is-ok,
#screen-write #writeInput[data-ok="1"] {
  border-color: var(--line);
  box-shadow: none;
}

#writeInput.is-bad,
#writeInput[data-ok="0"],
#screen-write #writeInput.is-bad,
#screen-write #writeInput[data-ok="0"] {
  border-color: rgba(239,68,68,.75);
  box-shadow: none;
}

.writeMsg .produceTypedRow {
  justify-content: center;
}

html.write-keyboard-lock,
body.write-keyboard-lock {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

body.write-keyboard-lock {
  position: fixed;
  inset: 0;
  width: 100%;
}

@media (min-width: 701px) {
  #writeRoot {
    width: 100%;
    bottom: 50vh;
    gap: 18px;
  }
}

@media (max-width: 700px) {
  #screen-write {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--write-vh);
    min-height: var(--write-vh);
    max-height: var(--write-vh);
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    padding: 0;
  }

  #writeRoot {
    width: 100%;
    bottom: 50vh !important;
    gap: 12px;
	padding: 0 12px;
  }

  #promptW {
    max-width: 620px;
    font-size: 22px;
    line-height: 1.35;
  }

  #writeMsg {
    max-width: 620px;
    height: 72px;
    min-height: 72px;
    flex: 0 0 72px;
  }

  #writeDock {
    max-width: 680px;
  }

  #writeDock .writeInputShell {
    width: 100%;
  }
  
  #screen-write.write-mobile-layout:not(.write-keyboard-open) #writeRoot {
    top: 30vh !important;
  }
}


/* ===== Header fix: clean menu, rainbow brand, final filter ===== */

header h1{justify-self:start;font-size:18px;font-weight:700;letter-spacing:0;gap:0;margin:0;}
header .header-icons{justify-self:end;gap:0;}
.brand-dot{display:none !important;}
.brand-rainbow{
  background:linear-gradient(
    90deg,
    #ff5f6d 0%,
    #ffc371 22%,
    #47cf73 45%,
    #5bc0ff 68%,
    #b56cff 100%
  );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
  -webkit-text-fill-color: transparent;
}
#hdrMenu{justify-self:start;}
#hdrMenu.iconbtn{width:30px;height:30px;border:none !important;background:transparent !important;box-shadow:none !important;padding:0;}
#hdrMenu.iconbtn svg{width:22px;height:22px;stroke:var(--ink);stroke-width:2.4;}
.hdr-left,.hdr-right,.hdr-brand,#hdrBrand,.hdrPill{all:unset;}

/* ===== Dedicated Quiz Screen (no panel system) ===== */
#screen-quiz{
  --quiz-vh: 100dvh;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: var(--quiz-vh);
  min-height: var(--quiz-vh);
  max-height: var(--quiz-vh);
  overflow: hidden;
}

.quizScreen{
  position: absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 20px;
  box-sizing:border-box;
  text-align:center;
  transform:translateY(-7vh);
}

.quizHero{
  width:160px;
  height:120px;
  overflow:hidden;
  border-radius:14px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 6px;
}

.quizHero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.quizPrompt{
  width:100%;
  max-width:760px;
  min-height:calc(2.4em + 4px);
  padding:10px 0px 18px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:400;
  text-align:center;
  line-height:1.2;
}


.quizInfo{
  position:static;
  transform:none;
  left:auto;
  bottom:auto;
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:block !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.quizInfo.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.quizOptions{
  width:100%;
  max-width:560px;
  margin:0 auto;
}

.quizOptions .opt{
  background:var(--btn);
  border-color:var(--line);
  color:var(--ink);
  transform:none !important;
}

.quizOptions .opt:hover,
.quizOptions .opt:active{
  background:var(--btn);
  transform:none !important;
}

.quizOptions .opt[disabled]{
  opacity:1;
}

.quizOptions .opt.correct{
  background:var(--ok);
  border-color:var(--ok);
  color:#fff !important;
}

.quizOptions .opt.wrong{
  background:var(--bad);
  border-color:var(--bad);
  color:#fff !important;
}

.quizDock{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:0;
}

.quizActions{
  position:static;
  left:auto;
  transform:none;
  bottom:auto;
  display:flex;
  justify-content:center;
  gap:18px;
}
@media (max-width:520px){
  .quizScreen{ padding:0 16px; transform:translateY(3vh); }
  .quizHero{ width:160px; height:120px; }
  .quizPrompt{ font-size:20px; }
  .quizFeedback{ font-size:15px; min-height:26px; }
  .quizOptions{ grid-template-columns:1fr 1fr; }
}


/* ===== Header filter button: fully right aligned + 4-tile icon ===== */
header .header-icons{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}




/* === CLEAN FILTER BUTTON === */
#hdrFilter {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

#hdrFilter svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* no hover effect */
#hdrFilter:hover {
  background: none;
}




/* ===== Dedicated Sentence Hub (Home layout clone) ===== */
.sentenceScreen{}

.sentenceBuild{
  background:linear-gradient(180deg, #9fd1e8 0%, #62b9e5 100%);
}

.sentenceTrain{
  background:linear-gradient(180deg, #a8d88c 0%, #72c965 100%);
}

.sentenceProduce{
  min-height:150px;
  background:linear-gradient(180deg, #f3c387 0%, #f6a14b 100%);
}

.sentenceDrill{
  min-height:150px;
  background:linear-gradient(180deg, #eea1ae 0%, #ef7d93 100%);
}

@media (max-width:520px){
  .sentenceProduce,
  .sentenceDrill{
    min-height:100px;
  }
}

/* ===== Dedicated Play Screen ===== */
.playScreen.playHubMode{
  justify-content:flex-start;
}

.playScreen.playHubMode .playOptions{
  width:100%;
  max-width:100%;
  margin:0;
}

.playPrompt{
  width:100%;
  max-width:760px;
  min-height:calc(2.4em + 4px);
  padding:8px 18px 24px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:400;
  text-align:center;
  line-height:1.2;
  box-sizing:border-box;
}

.playOptions{
  width:100%;
  max-width:560px;
  margin:0 auto;
  grid-template-columns:1fr;
}

.playOptions .playBoard{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
}

.playOptions .playStart{
  grid-column: 1 / -1;
  width:100%;
}

.playOptions.isEnd{
  display:grid;
  place-items:center;
  min-height:220px;
}

.playEndOverlay{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.playContinueBtn{
  all:unset;
  cursor:pointer;
  width:96px;
  height:96px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #f6a14b 0%, #f97316 100%);
  color:#fff;
  font-size:24px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 18px 40px rgba(0,0,0,.34);
  -webkit-tap-highlight-color: transparent;
}

.playContinueBtn:hover{
  transform:translateY(-1px);
}

.playContinueBtn:active{
  transform:translateY(0);
}


.playHubTile:hover{
  transform:none;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.playModeListen{
  background:linear-gradient(180deg, #9fd1e8 0%, #62b9e5 100%);
}

.playModeRead{
  background:linear-gradient(180deg, #a8d88c 0%, #72c965 100%);
}

.playModeMix{
  grid-column:1 / -1;
  min-height:150px;
  background:linear-gradient(180deg, #f3c387 0%, #f6a14b 100%);
}
@media (max-width:520px){
  .playModeMix{
    min-height:100px;
  }
}


.playAudioIcon{display:inline-grid;place-items:center;line-height:1}
.playAudioIcon svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


#unitActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}


.playOptions.isHub{
  width:100%;
  max-width:100%;
  display:block;
  margin:0;
  padding:0;
}

.playOptions.isHub .homeGrid{
  width:100%;
  max-width:690px;
  margin:0 auto;
  padding:0 18px;
  box-sizing:border-box;
}

.playOptions.isHub .playModeMix{
  min-height:150px;
}

@media (max-width:520px){
  .playOptions.isHub .playModeMix{
    min-height:100px;
  }
}


/* ===== Play header refresh ===== */
.playPrompt{
  min-height: 92px;
}

.playMeta{
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.playMetaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.playTimerSmall{
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  letter-spacing: .02em;
}

.playTimeTrack{
  width:100%;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}

.playTimeFill{
  height:100%;
  border-radius:999px;
  background: rgba(255,255,255,.72);
}

.playScoreCircle{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1.5px solid #8e8e8e;
  color: var(--ink);
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:700;
  flex:0 0 auto;
}

.playOptions .playBoard{
  margin-top: 8px;
  gap: 14px;
}

.playCol{
  gap: 14px;
}

.playCell{
  min-height: 68px;
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.25;
}

.playCell .playAudioIcon{
  min-height: 28px;
}

@media (max-width:520px){
  .playPrompt{
    min-height: 84px;
    padding-bottom: 24px;
  }

  .playScoreCircle{
    width:44px;
    height:44px;
    font-size:17px;
  }

  .playCell{
    min-height: 64px;
    padding: 15px 14px;
  }
}

/* ===== Dedicated Build Screen (no panel system) ===== */
#screen-build,
#screen-train{
  --mode-vh: var(--quiz-vh, 100dvh);
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: var(--mode-vh);
  min-height: var(--mode-vh);
  max-height: var(--mode-vh);
  overflow: hidden;
}

.buildScreen,
.trainScreen{
position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:27vh 18px 10px;
  box-sizing:border-box;
  text-align:center;
  transform:none;
}

.buildPrompt,
.trainPromptHost{
  width:100%;
  max-width:760px;
  min-height:calc(2.4em + 4px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.buildBoard,
.trainBoard{
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.buildDock,
.trainDock{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:0;
}

#screen-build .buildInfo,
#screen-train .buildInfo{
  position:static;
  transform:none;
  left:auto;
  bottom:auto;
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:block !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

#screen-build .buildInfo.open,
#screen-train .buildInfo.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.buildPrompt{
  font-size:22px;
  line-height:1.2;
}

.buildWrap{
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-content:stretch;
}

.buildOut{
  min-height:72px;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:16px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#121212;
  box-sizing:border-box;
}

.buildWrap.correct .buildOut{
  border-color:rgba(34,197,94,.55);
  box-shadow:0 0 0 1px rgba(34,197,94,.16) inset;
}

.buildPlaceholder{
  color:var(--muted);
  opacity:.7;
}

.buildChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  font-size:16px;
}

.buildBank{
  width:100% !important;
  max-width:560px !important;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  align-content:flex-start;
    gap:10px;
    min-height:72px;
}

.buildOpt{
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.buildMsg{
  min-height:20px;
  color:var(--muted);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.trainScreen .trainPromptWrap{
  width:100%;
  display:flex;
  justify-content:center;
}

.trainScreen .trainPrompt{
  width:min(560px, 100%);
  line-height:1.55;
  font-weight:560;
  color:var(--ink);
  text-align:center;
}

.trainScreen .trainWrap{
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:0;
  height:auto;
}

.trainScreen .trainWords{
  overflow:visible;
  min-height:auto;
  justify-content:center;
}

@media (max-width:520px){
  .buildPrompt{ font-size:20px; }
}

#screen-play .hubTitle{
  margin: 0px 0 40px;
  padding: 0 18px;
}

/* ===== Clean final header fix ===== */
header > *{min-width:0}
.header-icons{justify-self:end}
#hdrFilter{display:grid;place-items:center;width:32px;height:32px;padding:0;border:none;background:none}

/* ===== FINAL HEADER ROW FIX ===== */
header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  grid-template-columns:none !important;
}

.header-left{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  flex:0 0 auto !important;
  min-width:auto !important;
}

.header-icons{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
}

#hdrMenu,
#hdrBack,
#hdrFilter{
  flex:0 0 32px;
}

.learny {
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Synonyms uses the quiz layout 1:1 on its own screen */
#screen-syn{
  --quiz-vh: var(--quiz-vh, 100dvh);
}


/* ===== Dialog own screen (detached from panel system) ===== */
#screen-dialog{
  position:fixed;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  height:var(--quiz-vh, 100dvh);
  min-height:var(--quiz-vh, 100dvh);
  max-height:var(--quiz-vh, 100dvh);
  overflow:hidden;
}

.dialogScreen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 20px;
  box-sizing:border-box;
  text-align:center;
  transform:translateY(-4vh);
}

.dialogHero{
  width:160px;
  height:120px;
  overflow:hidden;
  border-radius:14px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 6px;
}

.dialogHero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.dialogPrompt{
  width:100%;
  max-width:760px;
  min-height:calc(2.4em + 4px);
  padding:10px 0 14px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:400;
  text-align:center;
  line-height:1.2;
}

.dialogBoard{
  width:100%;
  max-width:560px;
  margin:0 auto;
}

.dialogDock{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:0;
}

#screen-dialog #dialogNav.navArrows{
  justify-content:center;
  gap:18px;
  margin-top:8px;
}

#screen-dialog .dialogBox{
  width:100%;
  max-width:560px;
  margin:0 auto;
}

@media (max-width:520px){
  .dialogScreen{ padding:0 16px; transform:translateY(2vh); }
  .dialogHero{ width:160px; height:120px; }
  .dialogPrompt{ font-size:20px; }
}


/* ===== Drill clean layout ===== */
#screen-drill{
  --drill-vh: var(--quiz-vh, 100dvh);
  position:fixed;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  height:var(--drill-vh);
  min-height:var(--drill-vh);
  max-height:var(--drill-vh);
  overflow:hidden;
}

.drillScreen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 20px;
  box-sizing:border-box;
  text-align:center;
  transform:none;
}

.drillHero{
  width:160px;
  height:120px;
  overflow:hidden;
  border-radius:14px;
  background:#111;
  display:none;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  flex:0 0 auto;
}

.drillHero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}


.drillPrompt{
  width:100%;
  max-width:760px;
  min-height:calc(2.4em + 4px);
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:400;
  text-align:center;
  line-height:1.2;
}

.drillBoard{
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:12px;
  min-height:180px;
}

.drillDock{
  width:100%;
  max-width:770px;
  display:flex;
  justify-content:center;
  margin:0 auto;
  min-height:60px;
}

#screen-drill .drillActions,
#screen-drill .drillActionsQuiz{
  position:static;
  left:auto;
  transform:none;
  bottom:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:52px;
  margin:0;
}

#screen-drill .drillActions .drillActionBtn{
  width:52px;
  min-width:52px;
  height:52px;
  min-height:52px;
  flex:0 0 52px;
  padding:0;
}

#screen-drill .drillActions .drillActionBtn svg{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:block;
}

#screen-drill .options,
#screen-drill .drillQuizMode{
  width:100%;
  max-width:560px;
  margin:0 auto;
}

#screen-drill .drillQuizOptions{
  width:100%;
  gap:10px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

#screen-drill .drillQuizOptions .opt{
  min-height:40px;
  border-radius:10px;
  background:#2d2d2d;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.3;
  padding:10px 12px;
}

#screen-drill .drillInputShell{
  width:100%;
  max-width:770px;
}

#screen-drill .drillInputShell.is-textarea{
  min-height:56px;
  border-radius:30px;
}

#screen-drill #drillInput.drillInputDock{
  width:100%;
  height:58px;
  min-height:58px;
  margin:0;
  padding:15px 108px 15px 50px;
  border:none;
  border-radius:28px;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  resize:none;
  overflow-y:auto;
  text-align:left;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-.01em;
  box-sizing:border-box;
  position:relative;
  z-index:1;
}

#screen-drill textarea#drillInput.drillInputDockArea{
  display:block;
  height:58px;
  min-height:58px;
  max-height:82px;
  padding-top:18px;
  padding-bottom:18px;
  border-radius:28px;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  white-space:pre-wrap;
  word-break:break-word;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

#screen-drill .drillInputShell.is-grown{
  min-height:58px;
}

#screen-drill #drillInput.drillInputDock:focus{
  outline:none;
  box-shadow:none;
}

#screen-drill .drillInnerSpeak,
#screen-drill .drillInnerCheck,
#screen-drill .drillInnerNext{
  all:unset;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto 0;
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#d7d7d7;
  z-index:3;
  pointer-events:auto;
}

#screen-drill .drillInnerSpeak{ left:12px; }
#screen-drill .drillInnerCheck{ right:54px; }
#screen-drill .drillInnerNext{ right:8px; background:rgba(255,255,255,.10); }
#screen-drill .drillInnerSpeak:hover,
#screen-drill .drillInnerCheck:hover,
#screen-drill .drillInnerNext:hover{ background:rgba(255,255,255,.12); }
#screen-drill .drillInnerSpeak svg,
#screen-drill .drillInnerCheck svg,
#screen-drill .drillInnerNext svg{
  width:19px;
  height:19px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
}
#screen-drill .drillInnerCheck.trainCheckOk{
  color:#dcfce7;
  background:rgba(34,197,94,.22);
  box-shadow:0 0 0 1px rgba(34,197,94,.22) inset, 0 0 18px rgba(34,197,94,.24);
}

#screen-drill .writeRow,
#screen-drill .msg,
#screen-drill .mnemoBox,
#screen-drill .drillSentenceBox{
  width:100%;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

#screen-drill textarea.field,
#screen-drill input.field{
  width:100%;
  box-sizing:border-box;
}

#screen-drill.is-quiz-layout{
  position:fixed;
  inset:0;
  width:100%;
}

#screen-drill.is-quiz-layout .drillScreen{
  position:relative;
  inset:auto;
  width:100%;
  max-width:720px;
  min-height:calc(100dvh - 96px);
  margin:0 auto;
  padding:62px 20px 18px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  text-align:center;
}

#screen-drill.is-quiz-layout .drillPrompt,
#screen-drill.is-quiz-layout .drillBoard,
#screen-drill.is-quiz-layout .drillQuizMode,
#screen-drill.is-quiz-layout .options,
#screen-drill.is-quiz-layout .drillDock{
  width:100%;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

#screen-drill.is-quiz-layout .drillPrompt{
  min-height:calc(2.4em + 8px);
  font-size:clamp(22px, 3vw, 30px);
}

#screen-drill.is-quiz-layout .drillHero{
  display:flex;
  width:160px;
  max-width:160px;
  min-width:160px;
  height:120px;
  margin:0 auto;
  flex:0 0 120px;
}

#screen-drill.is-quiz-layout .drillBoard,
#screen-drill.is-quiz-layout .drillQuizMode,
#screen-drill.is-quiz-layout .options{
  min-height:auto;
  height:auto;
  box-sizing:border-box;
  flex:0 0 auto;
  margin-top: 20px;
}

#screen-drill.is-quiz-layout .drillBoard{
  align-items:center;
  justify-content:flex-start;
}

#screen-drill.is-quiz-layout .drillSentenceBox,
#screen-drill.is-quiz-layout .quizSentenceBox{
  width:100%;
  max-width:100%;
  margin:0 auto;
}

#screen-drill.is-quiz-layout .drillDock{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:auto;
  padding-bottom:18px;
  min-height:70px;
  flex:0 0 70px;
}

#screen-drill.is-quiz-layout .drillQuizOptions .opt.correct{ background:var(--ok); border-color:var(--ok); color:#fff !important; }
#screen-drill.is-quiz-layout .drillQuizOptions .opt.wrong{ background:var(--bad); border-color:var(--bad); color:#fff !important; }

#screen-drill.is-write-layout{
  --drill-write-vh: 100dvh;
  position:fixed;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  height:var(--drill-write-vh);
  min-height:var(--drill-write-vh);
  max-height:var(--drill-write-vh);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

#screen-drill.is-write-layout #drillRoot{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
  margin:0;
  padding:16px 12px max(12px, env(safe-area-inset-bottom));
  box-sizing:border-box;
  overflow:hidden;
  width:100%;
}

#screen-drill.is-write-layout #promptD{
  width:100%;
  max-width:760px;
  min-height:calc(2.4em + 8px);
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:clamp(22px, 3vw, 30px);
  font-weight:400;
  line-height:1.2;
  box-sizing:border-box;
  flex:0 0 auto;
}

#screen-drill.is-write-layout #drillContent{
  width:100%;
  max-width:760px;
  height:86px;
  min-height:86px;
  margin:0 auto;
  padding:6px 6px 2px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  touch-action:pan-x;
  flex:0 0 86px;
}

#screen-drill.is-write-layout #drillContent::-webkit-scrollbar{ display:none; }
#screen-drill.is-write-layout #drillContent > *{ width:100%; max-width:100%; margin:0; }
#screen-drill.is-write-layout .drillWriteMsg,
#screen-drill.is-write-layout .drillWriteMsg .produceTypedRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:max-content;
  min-width:max-content;
}

#screen-drill.is-write-layout #drillDock{
  width:100%;
  max-width:770px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  flex:0 0 auto;
}

#screen-drill.is-write-layout .drillInputShell{
  position:relative;
  width:100%;
  min-height:56px;
  border:1px solid #3f3f46;
  border-radius:30px;
  background:rgba(43,43,43,.9);
  box-shadow:0 10px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}

#screen-drill.is-write-layout .drillInputShell.is-editing{ border-color:#5a5a5a; box-shadow:none; }
#screen-drill.is-write-layout .drillInnerSpeak,
#screen-drill.is-write-layout .drillInnerCheck,
#screen-drill.is-write-layout .drillInnerNext{
  all:unset;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto 0;
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#d7d7d7;
  z-index:3;
  pointer-events:auto;
}
#screen-drill.is-write-layout .drillInnerSpeak{ left:12px; }
#screen-drill.is-write-layout .drillInnerCheck{ right:54px; }
#screen-drill.is-write-layout .drillInnerNext{ right:8px; background:rgba(255,255,255,.10); }
#screen-drill.is-write-layout .drillInnerSpeak:hover,
#screen-drill.is-write-layout .drillInnerCheck:hover,
#screen-drill.is-write-layout .drillInnerNext:hover{ background:rgba(255,255,255,.12); }
#screen-drill.is-write-layout .drillInnerSpeak svg,
#screen-drill.is-write-layout .drillInnerCheck svg,
#screen-drill.is-write-layout .drillInnerNext svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; }
#screen-drill.is-write-layout .drillInnerCheck.trainCheckOk{ color:#dcfce7; background:rgba(34,197,94,.22); box-shadow:0 0 0 1px rgba(34,197,94,.22) inset, 0 0 18px rgba(34,197,94,.24); }

@media (min-width:701px){
  #screen-drill.is-quiz-layout .drillScreen{
    min-height:calc(100dvh - 96px);
    padding:clamp(23vh, 18vh, 190px) 0px 55px;
    gap:18px;
  }

  #screen-drill.is-quiz-layout .drillDock{
    padding-bottom:20px;
  }

  #screen-drill.is-write-layout #drillRoot{ top:21vh; gap:18px; }
}

@media (max-width:700px){
  #screen-drill.is-quiz-layout .drillScreen{ padding:64px 16px 14px; gap:12px; }
  #screen-drill.is-quiz-layout .drillPrompt,
  #screen-drill.is-quiz-layout .drillBoard,
  #screen-drill.is-quiz-layout .drillQuizMode,
  #screen-drill.is-quiz-layout .options,
  #screen-drill.is-quiz-layout .drillDock{ max-width:520px; }
  #screen-drill.is-quiz-layout .drillDock{ padding-bottom:16px; }
  #screen-drill.is-write-layout #drillRoot{ top:21vh !important; gap:12px; padding:0 12px; }
  #screen-drill.is-write-layout #promptD{ max-width:620px; font-size:22px; line-height:1.35; }
  #screen-drill.is-write-layout #drillContent{ max-width:620px; height:72px; min-height:72px; flex:0 0 72px; }
  #screen-drill.is-write-layout #drillDock{ max-width:680px; }
}

@media (max-width:520px){
  #screen-drill.is-quiz-layout .drillScreen{ min-height:calc(100dvh - 88px); padding:21vh 18px 10vh; gap:10px; }
  #screen-drill.is-quiz-layout .drillPrompt{ font-size:22px; line-height:1.35; }
  #screen-drill.is-quiz-layout .drillHero{ width:160px; height:120px; }
  #screen-drill.is-quiz-layout .drillDock{ padding-bottom:14px; }
  #screen-drill .drillQuizOptions{ gap:8px; }
  #screen-drill .drillQuizOptions .opt{ min-height:40px; padding:10px; font-size:15px; }
}

@media (max-width: 520px){
  #screen-play #playRoot:not(.playHubMode) .playOptions{ padding: 0 18px; box-sizing: border-box; }
}
/* ===== 2026-03 fullscreen / iPhone web-app fix ===== */
:root{
  --app-height: 100dvh;
}

html,
body{
  width:100%;
  height:var(--app-height);
  min-height:var(--app-height);
  max-height:var(--app-height);
  overflow:hidden;
}

body{
  padding:0;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

.wrap{
  width:100%;
  height:var(--app-height);
  min-height:var(--app-height);
  max-height:var(--app-height);
  overflow:hidden;
}

#screen-home,
#screen-sentence,
#screen-play,
#screen-write,
#screen-drill,
#screen-dialog,
#screen-quiz,
#screen-syn,
#screen-reader,
#screen-build,
#screen-train,
#screen-vocab,
#screen-idioms,
#screen-grammar{
  min-height:var(--app-height);
}

#menu.drawer,
#unitSheet.filterDrawer,
#sheet.sheet,
#packSheet,
#langGate{
  height:var(--app-height) !important;
  min-height:var(--app-height) !important;
  max-height:var(--app-height) !important;
}

#menu.drawer,
#unitSheet.filterDrawer{
  top:0 !important;
  bottom:auto !important;
  padding-bottom:0 !important;
}

#menu.drawer .drawerNav{
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px) !important;
}

#unitSheet.filterDrawer .filterBody{
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px) !important;
}

#unitSheet.filterDrawer .filterActions,
#sheet .panel,
#packSheet .panel,
.writeDock,
.drillDock,
.dialogDock,
.quizDock,
.trainDock,
.buildDock{
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px);
}

@supports (height: 100dvh){
  :root{
    --app-height: 100dvh;
  }
}


.homeTile.grammar{
  background:linear-gradient(180deg, #89d4c7 0%, #3eb7a6 100%);
}

#screen-grammar{
  position:static;
  inset:auto;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
}

.grammarScreen{
  position:static;
  inset:auto;
  display:block;
  padding:0 18px 28px;
  box-sizing:border-box;
  height:calc(100dvh - 96px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.grammarWrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.grammarAccordionItem{
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  padding:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.grammarAccordionItem.open{
  background:rgba(255,255,255,0.04);
}

.grammarAccordionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.grammarAccordionMain{
  flex:1 1 auto;
  min-width:0;
}

.grammarAccordionKicker{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.grammarAccordionTitle{
  margin:0;
  font-size:18px;
  line-height:1.25;
}

.grammarAccordionMeta{
  margin-top:8px;
  color:var(--muted);
  line-height:1.4;
}

.grammarToggleBtn{
  flex:0 0 42px;
  align-self:flex-start;
}

.grammarToggleBtn svg{
  transition:transform .2s ease;
}

.grammarAccordionItem.open .grammarToggleBtn svg{
  transform:rotate(90deg);
}

.grammarAccordionActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.grammarAccordionBody{
  display:grid;
  gap:10px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .26s ease, opacity .18s ease, margin-top .18s ease, padding-top .18s ease;
  margin-top:0;
  padding-top:0;
}

.grammarAccordionItem.open .grammarAccordionBody{
  max-height:1200px;
  opacity:1;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.grammarDetailText{
  color:var(--ink);
  line-height:1.45;
}

.grammarDetailSubtitle{
  font-weight:600;
}

.grammarDetailHint{
  color:var(--muted);
}

.grammarExamplesBlock{
  display:grid;
  gap:10px;
}

.grammarExampleItem{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:12px 14px;
}

.grammarExampleL2{
  font-size:17px;
  font-weight:700;
  margin-bottom:6px;
}

.grammarExampleL1{
  color:var(--muted);
  line-height:1.35;
}

.grammarEmptyState{
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  padding:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.grammarEmptyState h3{
  margin:0 0 8px;
  font-size:22px;
}

.grammarEmptyState p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

@media (max-width:520px){
  .grammarScreen{ padding:0 16px 24px; }
  .grammarAccordionHead{
    gap:10px;
  }
  .grammarAccordionActions{
    gap:8px;
  }
}


#writeInput.writeInputDockArea::-webkit-scrollbar,
#screen-drill #drillInput.drillInputDockArea::-webkit-scrollbar{
  display:none;
}


/* ===== Build/Train info bubble stays inside layout ===== */
#screen-build .buildInfo,
#screen-train .buildInfo{
  width:min(560px, 100%);
  max-width:100%;
  box-sizing:border-box;
}

@media (max-width:520px){
  #screen-build .buildInfo,
  #screen-train .buildInfo{
    width:min(520px, 100%);
    max-width:100%;
    padding:12px 14px;
  }
}