/* Kalimat im Stil von JetPunk: weiss, dicht, dünne graue Rahmen, blaue
   Spaltenköpfe, Knöpfe mit fester Farbbedeutung (grün = los, rot = abbrechen,
   gold = Nebenaktion). Eine Zeile pro Wort statt Karten. */
:root{
  --bg:#ffffff; --ink:#333333; --muted:#666666; --line:#cccccc; --panel:#f2f2f2;
  --head:#3366cc; --head-ink:#ffffff; --link:#3b3bdc; --nav:#3366cc;
  --green:#28a745; --green-ink:#ffffff; --gold:#ffc107; --gold-ink:#212529;
  --red:#dc3545; --red-ink:#ffffff; --btn:#e9e9e9; --btn-line:#c4c4c4;
  --found:#118a11; --miss:#d00000; --study:#888888; --row:#ffffff; --row-alt:#fafafa;
  --f-ui:Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --f-ar:'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1c1d20; --ink:#dddddd; --muted:#a0a0a0; --line:#45474d; --panel:#26282c;
  --head:#2f5cb8; --head-ink:#ffffff; --link:#9cb2ff; --nav:#22468f;
  --btn:#34363b; --btn-line:#4a4c52; --gold-ink:#1a1a1a;
  --found:#5fd35f; --miss:#ff6b6b; --study:#8d8d8d; --row:#1f2023; --row-alt:#232428;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1c1d20; --ink:#dddddd; --muted:#a0a0a0; --line:#45474d; --panel:#26282c;
  --head:#2f5cb8; --head-ink:#ffffff; --link:#9cb2ff; --nav:#22468f;
  --btn:#34363b; --btn-line:#4a4c52; --gold-ink:#1a1a1a;
  --found:#5fd35f; --miss:#ff6b6b; --study:#8d8d8d; --row:#1f2023; --row-alt:#232428;
  color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--f-ui);
  padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--head);outline-offset:2px}
.ar,[lang="ar"]{font-family:var(--f-ar)}
.container{max-width:900px;margin:0 auto;padding-inline:16px}
.content{padding-block:18px 60px}

/* Kopfleiste */
.nav{background:var(--nav);color:#fff;padding-top:env(safe-area-inset-top,0px)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:46px}
.brand{color:#fff;text-decoration:none;font-weight:bold;font-size:18px;display:flex;align-items:center;gap:8px}
.brand [lang="ar"]{font-size:26px;line-height:1}
.nav-link{background:none;border:0;color:#fff;opacity:.9;font-size:13px}
.nav-link:hover{opacity:1;text-decoration:underline}

/* Knöpfe */
.btn,.btn-sm{border:1px solid var(--btn-line);background:var(--btn);color:var(--ink);border-radius:3px;line-height:1.2}
.btn{padding:8px 14px;font-size:16px}
.btn-sm{padding:4px 9px;font-size:13px}
.btn.big{font-size:22px;padding:11px 26px}
.green{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.red{background:var(--red);border-color:var(--red);color:var(--red-ink)}
.blue,.btn-sm[aria-pressed="true"]{background:var(--head);border-color:var(--head);color:var(--head-ink)}
.btn:hover,.btn-sm:hover{filter:brightness(1.06)}
.link{background:none;border:0;padding:0;color:var(--link);font-size:inherit}
.link:hover{text-decoration:underline}

/* Kopf einer Seite: Vorschaubild links, Titel rechts */
.quiz-top{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px}
.thumb{flex:0 0 130px;height:130px;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.thumb-logo{background:var(--head);border-color:var(--head);color:#fff;font-size:46px;font-weight:700}
.thumb-ico{font-size:52px;line-height:1}
.thumb-ar{font-size:20px;color:var(--muted);direction:rtl;text-align:center;padding-inline:4px;line-height:1.2}
.thumb-right{flex:1;min-width:0}
h1{font-size:26px;font-weight:normal;margin:0 0 6px}
.instructions{font-size:16px;margin-bottom:10px}
.dir{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dir span{color:var(--muted);margin-right:2px}

.info-box{border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:10px 14px;margin-bottom:18px}
.info-box>div+div{margin-top:5px}
.info-box.slim{margin:0;padding:8px 12px;font-size:13px}

/* Fortschritt wie die Level-Leiste */
.level{display:flex;align-items:center;gap:0;margin-top:10px!important}
.level .lbl{margin-right:10px;color:var(--muted)}
.level .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex:0 0 auto;z-index:1}
.level .dot.now{background:var(--gold);color:var(--gold-ink)}
.level .dot.max{background:var(--line);color:var(--ink)}
.level .bar{flex:0 1 220px;height:16px;margin-inline:-4px;background:var(--line);opacity:.8;position:relative}
.level .bar i{position:absolute;inset:0 auto 0 0;background:var(--gold)}

/* Gruppenübersicht als Tabellen */
.std{width:100%;border-collapse:collapse;margin-bottom:20px;background:var(--row)}
.std th{background:var(--head);color:var(--head-ink);font-weight:normal;font-size:15px;text-align:left;padding:5px 10px}
.std th small{opacity:.85;font-size:12px;margin-left:6px}
.std td{border:1px solid var(--line);padding:6px 10px;vertical-align:middle}
.std tr.g{cursor:pointer}
.std tr.g:hover td{background:var(--panel)}
.std .nm{color:var(--link)}
.std .ico{display:inline-block;width:1.6em}
.std .arn{font-size:18px;direction:rtl;text-align:right;color:var(--muted);white-space:nowrap}
.std .cnt,.std .best{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.std .best.full{color:var(--found);font-weight:bold}

/* Vor dem Spiel */
.pre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block:6px 18px}

/* Bedienleiste während des Spiels */
.controls{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;gap:14px;align-items:flex-start;padding:10px 0;margin-bottom:12px;border-bottom:1px solid var(--line)}
.timer-cell{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:96px}
.timer{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.timer.low{color:var(--miss)}
.right-of-timer{flex:1;min-width:0}
.answer-label{display:block;margin-bottom:4px}
#answer{width:100%;max-width:380px;font:inherit;font-size:18px;padding:6px 8px;border:1px solid var(--line);border-radius:3px;background:var(--row);color:var(--ink)}
#answer:focus{border-color:var(--head);outline:none}
#answer.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.guessed-line{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;margin-top:6px;font-size:16px}
.guessed-line b{font-weight:bold}
#last{color:var(--found);font-size:14px}
#last .ar{font-size:17px}
.kb{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;direction:rtl}
.kb button{font-family:var(--f-ar);font-size:19px;min-width:34px;height:34px;padding:0 5px;border:1px solid var(--btn-line);background:var(--btn);color:var(--ink);border-radius:3px}
.kb button.wide{font-family:var(--f-ui);font-size:13px;min-width:70px}

/* Nach dem Spiel */
.post{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.stat-box{flex:1 1 300px;border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:10px 14px}
.stat-box .head{font-size:18px;margin-bottom:6px}
.stat-box .line+.line{margin-top:6px}
.stat-box .big{font-size:22px;font-weight:bold}
.stat-box .new{color:var(--found);font-weight:bold}
.times{display:flex;gap:10px}
.tbox{border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:8px 14px;text-align:center;color:var(--muted);font-size:13px;min-width:120px}
.tbox .timer{color:var(--ink);font-size:26px;margin-top:4px}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}

/* Die Bildertafel über der Liste: alle Wörter auf einen Blick, wie die
   Karte bei JetPunk. Gefunden = grüner Rahmen, verpasst = roter Rahmen. */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;
  border:1px solid var(--line);background:var(--panel);padding:8px;margin-bottom:16px}
.tile{background:var(--row);border:1px solid var(--line);border-radius:3px;padding:6px 4px 5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;min-width:0}
.board-info{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin:-12px 0 16px;min-height:1.5em}
.board-info .hint-r{color:var(--muted)}
#hovered .ar{font-size:16px}
.board:has(+ .board-info:not([hidden])) .tile{cursor:default}
.tile.found{border-color:var(--found);box-shadow:0 0 0 2px var(--found)}
.tile.miss{border-color:var(--miss);box-shadow:0 0 0 2px var(--miss)}
.tile.found .t-de{color:var(--found)}
.t-emo{font-size:30px;line-height:1.1}
.t-num{font-size:24px;font-weight:bold;line-height:1.1;display:flex;flex-direction:column;align-items:center}
.t-num small{font-family:var(--f-ar);font-weight:normal;font-size:15px;color:var(--muted)}
.t-sw{width:30px;height:30px;border-radius:50%;background:var(--sw);border:1px solid var(--line)}
.t-ar{font-family:var(--f-ar);font-size:22px;line-height:1.3;direction:rtl}
.t-de{font-size:12px;line-height:1.2;color:var(--muted);overflow-wrap:anywhere}

/* Das Raster: schmale Spalten mit blauem Kopf, eine Zeile pro Wort */
.grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.block{border-collapse:collapse;flex:1 1 270px;max-width:420px;background:var(--row)}
.block th{background:var(--head);color:var(--head-ink);font-weight:normal;font-size:15px;padding:4px 10px;text-align:center}
.block td{border:1px solid var(--line);padding:3px 8px;height:34px;vertical-align:middle}
.block tr:nth-child(odd) td{background:var(--row-alt)}
.block .q{width:50%}
.block .e{display:inline-block;width:1.5em;text-align:center;margin-right:3px}
.block .sw{display:inline-block;width:13px;height:13px;border-radius:50%;background:var(--sw);border:1px solid var(--line);margin-right:6px;vertical-align:-1px}
.block .n small{font-family:var(--f-ar);color:var(--muted);margin-left:6px}
.block .a{text-align:center;position:relative}
.block .ar{font-size:19px;line-height:1.3;direction:rtl}
.block .q .ar{font-size:19px}
.block .tr{font-size:12px;color:var(--muted);margin-left:5px}
.block .info{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.block tr.found .a,.block tr.found .a .tr,.block tr.found .a .info{color:var(--found)}
.block tr.miss .a,.block tr.miss .a .tr,.block tr.miss .a .info{color:var(--miss)}
.block tr.study .a{color:var(--study)}
.block tr.pop td{animation:pop .4s ease-out}
@keyframes pop{0%{background:color-mix(in srgb,var(--found) 25%,transparent)}100%{background:transparent}}
.say{background:none;border:0;padding:2px;color:var(--muted);vertical-align:middle;margin-left:4px;opacity:.7}
.say:hover{opacity:1;color:var(--link)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:3px;font-size:13px;max-width:calc(100% - 32px)}

@media (max-width:600px){
  .quiz-top{gap:12px}
  .thumb{flex-basis:84px;height:84px}
  .thumb-logo{font-size:30px}
  .thumb-ico{font-size:34px}
  .thumb-ar{font-size:15px}
  h1{font-size:21px}
  .instructions{font-size:15px}
  .std .arn{display:none}
  .timer-cell{min-width:74px}
  .timer{font-size:26px}
  .block{max-width:none}
  .board{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:5px;padding:6px}
  .t-emo{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}