@charset "utf-8";
/* ==========================================================================
   MaeliOS Kobold   -   usr/lib/kritzel.css
   --------------------------------------------------------------------------
   Kritzelrunde: Kopfzeile, Zeichenblatt, Werkzeugleiste und Ratespalte.
   Farben und Größen kommen aus den --ui-*-Variablen des Farbschemas.
   Ausnahmen sind das weiße Papier und die Farbtöpfchen: Das sind
   Zeichenmittel, keine Oberfläche.
   ========================================================================== */

.kz{
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ui-body);color:var(--ui-text);
  font-family:"Inter","Segoe UI","Noto Sans",system-ui,sans-serif;
  container-type:inline-size;
}

/* ------------------------------------------------------------- Kopf */
.kz-kopf{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;min-height:58px;
  padding:9px 14px;background:var(--ui-face-2);
  border-bottom:1px solid var(--ui-border-color);
}
.kz-marke{display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 auto;max-width:34%}
.kz-marke b{font-size:15px;font-weight:650;letter-spacing:.01em}
.kz-lage{
  font-size:11.5px;color:var(--ui-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.kz-wort{
  flex:1 1 auto;min-width:0;text-align:center;white-space:pre;
  font:600 19px/1.15 "Courier New","Liberation Mono",ui-monospace,monospace;
  letter-spacing:.18em;color:var(--ui-accent);
  overflow:hidden;text-overflow:ellipsis;
}
.kz-wort-gross{font-size:23px;letter-spacing:.22em}
.kz-zeit{
  position:relative;flex:0 0 auto;width:112px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--ui-body);border:1px solid var(--ui-border-color);
}
.kz-zeit-zahl{position:relative;z-index:1;font:700 13.5px/1 "Inter","Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.kz-zeit-balken{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  background:color-mix(in srgb, var(--ui-accent) 24%, transparent);
  transition:width .18s linear;
}
.kz-knapp .kz-zeit-balken{background:color-mix(in srgb, #e04b4b 30%, transparent)}
.kz-knapp .kz-zeit-zahl{color:#d33}
/* Im Vollbild liegen Menue und Ausstieg oben rechts ueber dem Fenster. */
.kiosk .kz-kopf{padding-right:104px}

/* ------------------------------------------------------------ Koerper */
.kz-koerper{flex:1 1 auto;min-height:0;display:flex}
.kz-buehne{
  position:relative;flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:10px;
  background:var(--ui-face);
}
.kz-rahmen{
  position:relative;flex:0 0 auto;border-radius:10px;overflow:hidden;
  background:#ffffff;
  box-shadow:0 12px 30px rgba(0,0,0,.18),0 0 0 1px var(--ui-border-color);
}
.kz-blatt{display:block;width:100%;height:100%;background:#ffffff;touch-action:none;cursor:default}
.kz-blatt.kz-aktiv{cursor:crosshair}

/* ----------------------------------------------------------- Werkzeug */
.kz-werkzeuge{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px;max-width:100%;
}
.kz-werkzeuge.kz-gesperrt{opacity:.5}
.kz-farben{display:flex;align-items:center;gap:5px}
.kz-farbe{
  width:27px;height:27px;min-width:27px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
.kz-farbe.an{
  border-color:var(--ui-text);
  box-shadow:0 0 0 2px var(--ui-face),0 0 0 3px var(--ui-text),inset 0 0 0 1px rgba(0,0,0,.2);
}
.kz-farbe:disabled{cursor:default}
.kz-farbe:focus-visible,.kz-stift:focus-visible,.kz-werkzeug:focus-visible,
.kz-wortknopf:focus-visible,.kz-senden:focus-visible{
  outline:2px solid var(--ui-accent);outline-offset:2px;
}
.kz-stifte{display:flex;align-items:center;gap:4px}
.kz-stift,.kz-werkzeug{
  min-width:32px;height:31px;padding:0 7px;border-radius:8px;cursor:pointer;
  border:1px solid var(--ui-border-color);background:var(--ui-body);color:var(--ui-text);
  font:600 13px/1 "Inter","Segoe UI",system-ui,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;
}
.kz-stift:hover:not(:disabled),.kz-werkzeug:hover:not(:disabled){background:var(--ui-face-2)}
.kz-stift.an,.kz-werkzeug.an{
  background:var(--ui-sel-bg);color:var(--ui-sel-fg);border-color:var(--ui-sel-bg);
}
.kz-stift:disabled,.kz-werkzeug:disabled{cursor:default}
.kz-stiftpunkt{display:block;border-radius:50%;background:currentColor}

/* ------------------------------------------------------------ Schichten */
.kz-schicht{
  position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;
  padding:14px;background:color-mix(in srgb, var(--ui-body) 84%, transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.kz-schicht.an{display:flex}
.kz-karte{
  width:min(430px,100%);max-height:100%;overflow:auto;text-align:center;
  padding:20px 20px 18px;border-radius:14px;background:var(--ui-body);
  border:1px solid var(--ui-border-color);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}
.kz-kartentitel{font-size:19px;font-weight:650;margin:0 0 8px;line-height:1.25}
.kz-kartentext{font-size:12.5px;line-height:1.5;color:var(--ui-dim);margin:6px 0 14px}
.kz-wortwahl{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.kz-wortknopf{
  width:100%;padding:12px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--ui-accent);background:var(--ui-body);color:var(--ui-text);
  font:650 15px/1.2 "Inter","Segoe UI",system-ui,sans-serif;
}
.kz-wortknopf:hover{background:var(--ui-sel-bg);color:var(--ui-sel-fg)}
.kz-wortknopf.kz-neben{margin-top:8px;border-color:var(--ui-border-color);font-size:13px}
.kz-kartenzeit{font-size:12px;color:var(--ui-dim);margin-top:12px;font-variant-numeric:tabular-nums}
.kz-wartepunkte{display:flex;justify-content:center;gap:8px;margin-top:10px}
.kz-wartepunkte i{
  width:9px;height:9px;border-radius:50%;background:var(--ui-accent);
  animation:kz-puls 1.1s infinite ease-in-out;
}
.kz-wartepunkte i:nth-child(2){animation-delay:.16s}
.kz-wartepunkte i:nth-child(3){animation-delay:.32s}
@keyframes kz-puls{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.kz-ladebalken{height:8px;border-radius:999px;background:var(--ui-face-2);overflow:hidden;margin-top:12px}
.kz-ladebalken i{
  display:block;height:100%;width:38%;border-radius:999px;background:var(--ui-accent);
  animation:kz-laden 1.2s infinite ease-in-out;
}
@keyframes kz-laden{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.kz-rangliste{display:flex;flex-direction:column;gap:5px;margin:12px 0 16px}
.kz-rangzeile{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
  background:var(--ui-face);font-size:13px;
}
.kz-rang{width:22px;color:var(--ui-dim);font-variant-numeric:tabular-nums}
.kz-rangname{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kz-rangzahl{font-weight:700;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- Seite */
.kz-seite{
  flex:0 0 296px;min-height:0;display:flex;flex-direction:column;
  border-left:1px solid var(--ui-border-color);background:var(--ui-body);
}
.kz-punkte{
  flex:0 1 auto;max-height:42%;overflow:auto;padding:7px 8px;
  border-bottom:1px solid var(--ui-border-color);display:flex;flex-direction:column;gap:2px;
}
.kz-punktzeile{
  display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:7px;
  font-size:12.5px;line-height:1.25;
}
.kz-punktzeile:nth-child(odd){background:var(--ui-face)}
.kz-punkt{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.kz-punktname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kz-du{
  margin-left:5px;font-size:9.5px;font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ui-dim);border:1px solid var(--ui-border-color);
  border-radius:999px;padding:1px 5px;
}
.kz-zeichner{color:var(--ui-accent);font-weight:700}
.kz-fertig{color:#3f9d5a;font-weight:800}
.kz-punktzahl{font-weight:700;font-variant-numeric:tabular-nums}
.kz-verlauf{
  flex:1 1 auto;min-height:60px;overflow:auto;padding:8px 10px;
  display:flex;flex-direction:column;gap:4px;
  font-size:12.5px;line-height:1.42;
}
.kz-zeile{word-break:break-word}
.kz-zeile b{font-weight:650}
.kz-system{color:var(--ui-dim);font-style:italic}
.kz-richtig{color:#2f8a4a;font-weight:650}
.kz-raten{
  flex:0 0 auto;display:flex;gap:6px;padding:8px;
  border-top:1px solid var(--ui-border-color);background:var(--ui-face-2);
}
.kz-raten input{
  flex:1;min-width:0;height:34px;padding:0 10px;border-radius:8px;
  border:1px solid var(--ui-border-color);background:var(--ui-body);color:var(--ui-text);
  font:inherit;font-size:13px;
}
.kz-raten input::placeholder{color:var(--ui-dim)}
.kz-raten input:focus{outline:2px solid var(--ui-accent);outline-offset:1px}
.kz-senden{
  flex:0 0 auto;height:34px;min-width:64px;padding:0 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--ui-sel-bg);background:var(--ui-sel-bg);color:var(--ui-sel-fg);
  font:650 12.5px/1 "Inter","Segoe UI",system-ui,sans-serif;
}
.kz-senden:disabled{opacity:.45;cursor:default}

/* ------------------------------------------------------ Schmale Fenster */
@container (max-width: 640px){
  .kz-kopf{gap:8px;padding:7px 10px;min-height:50px}
  .kz-marke{max-width:44%}
  .kz-marke b{font-size:13px}
  .kz-lage{font-size:10.5px}
  .kz-wort{font-size:15px;letter-spacing:.12em}
  .kz-wort-gross{font-size:17px;letter-spacing:.15em}
  .kz-zeit{width:76px;height:29px}
  .kz-zeit-zahl{font-size:12px}
  .kz-koerper{flex-direction:column}
  .kz-seite{flex:0 0 43%;border-left:0;border-top:1px solid var(--ui-border-color)}
  .kz-buehne{padding:6px;gap:6px}
  .kz-punkte{max-height:34%;padding:4px 6px}
  .kz-verlauf{padding:6px 8px;font-size:12px}
  .kz-raten{padding:6px}
  .kz-farbe{width:30px;height:30px;min-width:30px}
  .kz-stift,.kz-werkzeug{height:31px;min-height:31px}
  .kz-werkzeuge{gap:6px}
  .kz-zeichner,.kz-fertig{font-size:13px}
}

@container (max-width: 440px){
  .kz-kopf{flex-wrap:wrap}
  .kz-wort{order:3;flex-basis:100%;text-align:left}
  .kz-zeit{margin-left:auto}
  .kz-karte{padding:16px 14px 14px}
  .kz-kartentitel{font-size:17px}
  .kz-wortknopf{padding:11px 10px;font-size:14px}
  .kz-punktzeile{font-size:12px}
}

/* Vollbild auf Geraeten mit Notch und Gestenleiste: Inhalt freihalten. */
.kz-kopf{padding-top:calc(9px + env(safe-area-inset-top, 0px))}
.kz-raten{padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
@container (max-width: 640px){
  /* 16 Pixel verhindern das Hineinzoomen von iOS beim Tippen. */
  .kz-raten input{font-size:16px}
}

/* ------------------------------------------------ Eigenes Wort in der Wortwahl */
.kz-eigenes{display:flex;gap:6px;margin-top:8px}
.kz-eigenes input{
  flex:1;min-width:0;height:38px;padding:0 10px;border-radius:9px;outline:0;
  border:1px solid var(--ui-border-color);background:var(--ui-body);color:var(--ui-text);
  font:500 14px/1 "Inter","Segoe UI","Noto Sans",system-ui,sans-serif;
}
.kz-eigenes input::placeholder{color:var(--ui-dim)}
.kz-eigenes input:focus{outline:2px solid var(--ui-accent);outline-offset:1px}
.kz-eigenes .kz-wortknopf{width:auto;flex:0 0 auto;padding:0 14px;font-size:13px}
.kz-eigenes-hilfe{font-size:11.5px;line-height:1.4;color:var(--ui-dim);margin:12px 0 0}
@container (max-width: 640px){
  .kz-eigenes{flex-wrap:wrap}
  .kz-eigenes input{font-size:16px}
  .kz-eigenes .kz-wortknopf{flex:1 1 100%}
}