:root{
  --paper:#f3ead6;
  --paper2:#ece0c4;
  --ink:#2b2018;
  --ink-soft:#6b5a45;
  --accent:#b5471f;      /* gebranntes Orange-Rot */
  --accent2:#c98a2b;     /* Senf */
  --green:#5a7a3a;
  --die:#fffaf0;
  --die-edge:#d8c79e;
  --die-shadow:#9a865c;
  --line:#cdbd98;
}
*{box-sizing:border-box;}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
html, body{margin:0;}
/* Links app-weit im Papier-/Akzent-Look statt Browser-Blau/Unterstrich.
   Als Buttons gestylte Links (.wt-*-btn) setzen Farbe selbst und bleiben unberührt. */
a{color:var(--accent);text-decoration:none;}
a:hover{color:#8a3415;}
body{
  background:
    repeating-linear-gradient(135deg, rgba(120,90,40,.03) 0 2px, transparent 2px 6px),
    #e7d8b6;
}
.wt-root{
  width:100%;
  display:flex;
  justify-content:center;
  padding:22px 14px 40px;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #fbf4e3 0%, rgba(251,244,227,0) 60%);
}
.wt-paper{
  width:100%;
  max-width:680px;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper2) 100%);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 26px 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 18px 50px -22px rgba(60,40,15,.55),
    0 2px 0 rgba(120,90,40,.18);
  position:relative;
}
.wt-paper::after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(255,255,255,.35), transparent 60%),
    repeating-radial-gradient(circle at 30% 20%, rgba(120,90,40,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
}

/* Header */
.wt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
/* Spielseite: Kopf auf Tray-Breite begrenzen, Titel + Anzeigen in einer Zeile */
.wt-head-board{max-width:76%;margin:0 auto 14px;flex-wrap:nowrap;align-items:center;}
.wt-head-board .wt-title{min-width:0;}
/* Titel skaliert mit der Viewport-Breite, damit die Zeile nie ausbricht */
.wt-head-board .wt-title-main{font-size:clamp(22px, 14vw - 53px, 42px);white-space:nowrap;}
.wt-head-board .wt-stats{flex:none;}
.wt-title{display:flex;flex-direction:column;line-height:1;}
.wt-title-main{
  font-size:42px;font-weight:800;letter-spacing:-.5px;
  color:var(--accent);
  text-shadow:1px 1px 0 #fff, 2px 3px 0 rgba(120,60,20,.18);
}
.wt-title-link{
  display:inline-block;color:inherit;text-decoration:none;
  padding:6px 10px;margin:-6px -10px;   /* größere Klickfläche, Layout bleibt */
}
.wt-title-sub{margin-top:6px;font-size:13px;font-style:italic;color:var(--ink-soft);letter-spacing:.3px;}
.wt-stats{display:flex;gap:8px;}
.wt-stat{
  background:#fff8ea;border:1px solid var(--line);border-radius:10px;
  padding:6px 12px;min-width:62px;text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px -4px rgba(80,50,10,.5);
}
.wt-stat-val{display:block;font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.wt-stat-lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-soft);margin-top:2px;}
.wt-stat-warn .wt-stat-val{color:var(--accent);animation:wt-pulse 1s infinite;}
@keyframes wt-pulse{50%{opacity:.45;}}

/* Cards */
.wt-card{background:#fff8ea;border:1px solid var(--line);border-radius:14px;padding:22px;margin:6px 0 4px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;}
.wt-lead{font-size:17px;line-height:1.5;margin:0 0 14px;}
.wt-rules{margin:0 0 14px;padding-left:18px;color:var(--ink-soft);font-size:14px;line-height:1.7;}
.wt-rules li{margin-bottom:2px;}
.wt-best{font-size:14px;color:var(--ink-soft);margin-bottom:14px;}
.wt-best b{color:var(--accent);font-size:17px;}
.wt-big{
  appearance:none;border:none;cursor:pointer;
  font-family:inherit;font-size:19px;font-weight:800;letter-spacing:.3px;
  color:#fff8ea;background:linear-gradient(180deg,#c8541f,#a23c14);
  padding:14px 26px;border-radius:12px;width:100%;
  box-shadow:0 2px 0 #7e2c0c, 0 8px 20px -8px rgba(160,60,20,.8);
  transition:transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
/* Hover nur auf Geräten mit echtem Zeiger (kein klebriger Hover auf Touch).
   filter:brightness statt fester Schattenfarbe → wirkt für orangen und grünen
   Knopf gleichermaßen. */
@media (hover:hover){
  /* color explizit: der grüne Knopf ist ein <a>, sonst würde das globale
     a:hover (Zeile 20) die helle Schrift überschreiben. */
  .wt-big:hover{transform:translateY(-1px);filter:brightness(1.07);color:#fff8ea;}
}
.wt-big:active{transform:translateY(2px);box-shadow:0 0 0 #7e2c0c,0 4px 12px -8px rgba(160,60,20,.8);filter:none;}
/* Namensfeld auf der Startkarte: normaler Schriftschnitt, Abstand zum Knopf */
.wt-start .wt-input{font-size:18px;letter-spacing:1px;text-transform:none;margin-bottom:12px;}

/* Spielbrett: Tray volle Breite, darunter Eingabe + Buttons in Tray-Breite */
.wt-board{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  max-width:76%;margin:8px auto 14px;
}
.wt-actions{display:flex;gap:10px;}
.wt-actions .wt-go,.wt-actions .wt-del{width:58px;}
.wt-tray{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  background:
    repeating-linear-gradient(90deg, rgba(120,80,30,.06) 0 2px, transparent 2px 9px),
    linear-gradient(180deg,#caa86c,#b8945a);
  border-radius:14px;padding:12px;
  box-shadow:inset 0 2px 8px rgba(70,40,10,.35), 0 1px 0 rgba(255,255,255,.25);
  transition:grid-template-columns .18s ease, gap .18s ease, padding .18s ease;
}
.wt-die{
  appearance:none;font-family:inherit;padding:0;width:100%;
  position:relative;aspect-ratio:1/1;border-radius:12px;
  background:linear-gradient(155deg,#fffdf6 0%, var(--die) 55%, #efe3c4 100%);
  border:1px solid var(--die-edge);
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -3px 0 rgba(154,134,92,.35) inset,
    0 6px 0 var(--die-shadow),
    0 10px 16px -8px rgba(60,40,10,.6);
  animation:wt-drop .5s cubic-bezier(.2,1.3,.4,1) backwards;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  transition:transform .08s ease, box-shadow .08s ease;
}
.wt-die:active{
  transform:translateY(3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -3px 0 rgba(154,134,92,.35) inset,
    0 3px 0 var(--die-shadow),
    0 4px 8px -4px rgba(60,40,10,.6);
}
.wt-die span{
  font-size:24px;font-weight:800;color:var(--ink);
  text-shadow:0 1px 0 #fff;
}
.wt-die-pip{position:absolute;right:8px;bottom:7px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);opacity:.65;box-shadow:0 0 0 2px rgba(181,71,31,.18);}
.wt-die-hot{
  background:linear-gradient(155deg,#fff3d8,#ffe7b0);
  border-color:var(--accent2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 6px 0 #a8772a,
    0 0 0 2px rgba(201,138,43,.5),
    0 10px 18px -8px rgba(120,80,10,.7);
  transform:translateY(-2px);
}
.wt-die-benutzt,.wt-die-benutzt:active{
  transform:translateY(4px);cursor:default;
  background:linear-gradient(155deg,#efe6cd,#e2d4ae);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 0 var(--die-shadow),
    0 3px 6px -4px rgba(60,40,10,.4);
}
.wt-die-benutzt span{opacity:.35;}
.wt-die-benutzt .wt-die-pip{opacity:.2;}
@keyframes wt-drop{from{opacity:0;transform:translateY(-26px) rotate(-8deg) scale(.8);}}
.wt-tray-rolling .wt-die{animation:wt-shake .12s linear infinite;}
@keyframes wt-shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(1px,-2px) rotate(2deg)}75%{transform:translate(-1px,2px) rotate(-2deg)}}

/* Input */
.wt-inputwrap{grid-column:1;min-width:0;}
.wt-input{
  width:100%;min-width:0;font-family:inherit;font-size:24px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--ink);
  background:#fffaf0;border:2px solid var(--line);border-radius:12px;
  padding:12px 16px;outline:none;
  box-shadow:inset 0 2px 5px rgba(90,60,20,.12);
  transition:border-color .15s;
}
.wt-input:focus{border-color:var(--accent2);}
.wt-input::placeholder{color:#bcab87;letter-spacing:1px;font-weight:600;text-transform:none;font-style:italic;}
.wt-go{
  appearance:none;border:none;cursor:pointer;font-family:inherit;
  font-size:28px;font-weight:800;line-height:1;color:#fff8ea;
  background:linear-gradient(180deg,#6e8a44,#516a30);
  padding:0;border-radius:12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 0 #3c4f22,
    0 8px 14px -8px rgba(60,80,20,.9);
  transition:transform .08s, box-shadow .08s;
}
.wt-go:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 1px 0 #3c4f22;
}
.wt-del{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:24px;font-weight:800;line-height:1;color:var(--ink-soft);
  background:linear-gradient(155deg,#fffdf6 0%, var(--die) 55%, #efe3c4 100%);
  border:1px solid var(--die-edge);
  padding:0;border-radius:12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -3px 0 rgba(154,134,92,.35) inset,
    0 4px 0 var(--die-shadow),
    0 8px 12px -8px rgba(60,40,10,.6);
  transition:transform .08s, box-shadow .08s;
}
.wt-del:active{
  transform:translateY(3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -3px 0 rgba(154,134,92,.35) inset,
    0 1px 0 var(--die-shadow);
}

/* Flash */
.wt-flashline{height:26px;margin-bottom:8px;display:flex;align-items:center;}
.wt-flash{font-size:15px;font-weight:700;letter-spacing:.3px;animation:wt-flashin .25s ease backwards;}
@keyframes wt-flashin{from{opacity:0;transform:translateX(-6px);}}
.wt-flash-ok{color:var(--green);}
.wt-flash-err{color:var(--accent);}
.wt-flash-warn{color:var(--accent2);}

/* Found list */
.wt-empty{color:var(--ink-soft);font-style:italic;padding:8px 2px;font-size:15px;}
.wt-found{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.wt-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff8ea;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:15px;font-weight:700;letter-spacing:.5px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 3px 8px -6px rgba(80,50,10,.6);
  animation:wt-pop .25s cubic-bezier(.2,1.4,.4,1) backwards;
}
.wt-chip i{font-style:normal;font-size:12px;font-weight:800;color:var(--accent);background:rgba(181,71,31,.1);padding:1px 6px;border-radius:999px;}
@keyframes wt-pop{from{opacity:0;transform:scale(.7);}}

/* Over card */
.wt-over-top{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
.wt-over-score{font-size:52px;font-weight:800;color:var(--accent);line-height:.9;display:flex;flex-direction:column;}
.wt-over-score span{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);}
.wt-over-meta{font-size:20px;font-weight:700;}
.wt-over-sub{font-size:13px;font-weight:500;color:var(--ink-soft);margin-top:4px;}
.wt-bar{height:10px;background:#e3d4b0;border-radius:999px;overflow:hidden;margin-bottom:18px;box-shadow:inset 0 1px 3px rgba(90,60,20,.25);}
.wt-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:999px;transition:width .8s cubic-bezier(.2,.8,.2,1);}

/* Missed / solutions: <details> klappt erst auf Wunsch auf (kein JS nötig) */
.wt-missed{margin-top:18px;}
.wt-missed summary.wt-reveal{display:block;text-align:center;list-style:none;}
.wt-missed summary::-webkit-details-marker{display:none;}
.wt-missed .wt-verbergen,.wt-missed[open] .wt-zeigen{display:none;}
.wt-missed[open] .wt-verbergen{display:inline;}
.wt-reveal{
  appearance:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;
  color:var(--ink);background:transparent;border:1px dashed var(--accent);
  border-radius:10px;padding:9px 14px;width:100%;transition:background .15s,color .15s;
}
.wt-reveal:hover{background:#fff8ea;color:var(--ink);}
.wt-missedgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.wt-misschip{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-soft);
  background:#efe3c6;border-radius:999px;padding:4px 10px;font-weight:600;
  position:relative;cursor:pointer;user-select:none;}
.wt-misschip i{font-style:normal;font-size:11px;color:var(--accent2);font-weight:800;}
.wt-allfound{color:var(--green);font-weight:700;}

/* Wörter melden */
.wt-melden-hilf{font-size:13px;color:var(--ink-soft);margin:12px 0 0;text-align:center;}
.wt-misschip input{position:absolute;opacity:0;width:0;height:0;}
.wt-misschip:has(:checked){background:rgba(181,71,31,.14);color:var(--accent);
  text-decoration:line-through;box-shadow:inset 0 0 0 1.5px var(--accent);}
.wt-misschip:has(:focus-visible){outline:2px solid var(--accent2);outline-offset:2px;}
.wt-melden-btn{display:block;margin:14px auto 2px;font-size:14px;font-weight:normal;
  color:var(--ink);background:#fff8ea;border:1px solid var(--line);border-radius:999px;
  padding:8px 18px;cursor:pointer;}
.wt-melden-btn:hover{border-color:var(--accent2);}
.wt-melden-danke{text-align:center;color:var(--green);font-weight:700;margin-top:14px;}
.wt-vorschlag{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
.wt-vorschlag .wt-input{margin-top:8px;font-size:14px;letter-spacing:normal;text-transform:none;}
.wt-vorschlag-status{text-align:center;margin-top:10px;}
.wt-vorschlag-fehler{color:var(--accent);font-weight:700;font-size:13px;}

/* Meisterliste */
.wt-besten{margin-top:14px;display:flex;flex-direction:column;gap:5px;}
.wt-besten-zeile{display:flex;align-items:center;gap:10px;
  background:#fff8ea;border:1px solid var(--line);border-radius:10px;
  padding:6px 12px;font-size:15px;}
.wt-besten-zeile b{min-width:28px;text-align:right;font-variant-numeric:tabular-nums;}
.wt-besten-zeile span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wt-besten-zeile i{font-style:normal;font-weight:800;color:var(--accent);}
.wt-besten-ich{border-color:var(--accent);background:#fff3d8;font-weight:700;}
.wt-besten-trenn{text-align:center;color:var(--ink-soft);line-height:.8;}

/* Footer */
.wt-foot{margin-top:20px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-soft);text-align:center;font-style:italic;line-height:1.5;}
.wt-foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--line);}
.wt-foot a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* Rechtstexte (Impressum, Datenschutz) */
.wt-legal{font-size:15px;line-height:1.6;color:var(--ink);}
.wt-legal h1{font-size:26px;color:var(--accent);margin:0 0 16px;}
.wt-legal h2{font-size:17px;margin:20px 0 6px;color:var(--ink);}
.wt-legal p{margin:0 0 10px;}
.wt-legal a{color:var(--accent);}
.wt-legal code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  background:#efe3c6;border-radius:4px;padding:1px 5px;}
.wt-legal .wt-rules{font-size:15px;color:var(--ink);}
.wt-legal-stand{font-style:italic;color:var(--ink-soft);font-size:13px;margin-top:18px;}
.wt-zurueck{margin-top:14px;}
.wt-zurueck a{font-weight:700;text-decoration:none;}

/* Mobil */
@media(max-width:560px){
  .wt-root{padding:10px 8px calc(20px + env(safe-area-inset-bottom));}
  .wt-paper{padding:16px 14px 12px;border-radius:14px;}
  .wt-title-main{font-size:30px;}
  .wt-head{margin-bottom:10px;}
  .wt-head-board{max-width:100%;}
  .wt-head-board .wt-title-main{font-size:clamp(17px, 10vw - 12px, 24px);}
  .wt-stat{flex:1;padding:5px 8px;min-width:0;}
  .wt-stat-val{font-size:17px;}
  .wt-board{max-width:100%;}
  .wt-actions{gap:8px;}
  .wt-actions .wt-go,.wt-actions .wt-del{width:48px;}
  .wt-tray{gap:10px;}
  .wt-die span{font-size:30px;}
  /* Tastatur offen (Eingabefeld fokussiert): Würfel verkleinern, damit alle
     9 Würfel UND das Eingabefeld gleichzeitig im Rest-Viewport sichtbar bleiben.
     aspect-ratio:1/1 bleibt → Würfel werden nur kleiner, nicht verzerrt. */
  .wt-board:focus-within .wt-tray{
    grid-template-columns:repeat(3, clamp(40px, 9vh, 68px));
    justify-content:center;
    gap:7px;padding:8px;
  }
  .wt-board:focus-within .wt-die span{font-size:20px;}
  .wt-input{font-size:19px;letter-spacing:2px;padding:12px 12px;}
  .wt-input::placeholder{font-size:15px;}
  .wt-over-score{font-size:40px;}
  .wt-card{padding:16px;}
}

/* Teilen & Spenden */
.wt-teilen, .wt-spenden{margin-top:14px;text-align:center;}
.wt-teilen-text, .wt-spenden-text{font-size:14px;color:var(--ink-soft);margin:0 0 12px;line-height:1.6;}
.wt-teilen-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.wt-teilen-btn{display:inline-block;font-size:14px;font-weight:700;text-decoration:none;
  color:var(--ink);background:#fff8ea;border:1px solid var(--line);border-radius:999px;
  padding:9px 20px;}
.wt-teilen-btn:hover{border-color:var(--accent2);}
.wt-spenden-btn{background:var(--accent);color:#fff8ea;border-color:var(--accent);}
.wt-spenden-btn:hover{border-color:var(--accent);filter:brightness(1.06);}

/* Gegeneinander: Duell-Block & Hub */
.wt-big-zweit{margin-top:10px;background:linear-gradient(180deg,#6e8a44,#516a30);
  box-shadow:0 2px 0 #3c4f22, 0 8px 20px -8px rgba(60,80,20,.8);}
.wt-big-link{display:block;text-align:center;text-decoration:none;color:#fff8ea;}
.wt-duell{margin:6px 0 4px;text-align:center;}
.wt-duell-paar{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:8px;}
.wt-duell-spieler{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:12px;
  background:#fff8ea;border:1px solid var(--line);min-width:96px;}
.wt-duell-sieger{border-color:var(--accent);background:#fff3d8;box-shadow:0 0 0 2px rgba(181,71,31,.25);}
.wt-duell-name{font-size:14px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wt-duell-punkte{font-size:32px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.wt-duell-vs{font-size:24px;font-weight:800;color:var(--ink-soft);}
.wt-duell-urteil{font-size:18px;font-weight:700;color:var(--accent);margin:0 0 14px;}
.wt-duell-warten{font-size:16px;color:var(--ink-soft);}
/* Challenge-UX: Banner, Kopier-Feld, Wortlisten */
.wt-duell-banner{text-align:center;font-size:13px;color:var(--ink-soft);
  font-style:italic;margin:0 0 10px;}
.wt-teilen-hilf{font-size:13px;color:var(--ink-soft);margin:0 0 10px;line-height:1.5;}
.wt-copy{display:flex;gap:8px;justify-content:center;margin:0 0 12px;}
.wt-copy-feld{flex:1;min-width:0;font-size:13px;}
.wt-duell-woerter{display:flex;gap:14px;margin-top:14px;text-align:left;}
.wt-duell-wspalte{flex:1;min-width:0;}
.wt-duell-wspalte h4{margin:0 0 6px;font-size:13px;color:var(--ink-soft);
  border-bottom:1px solid var(--line);padding-bottom:4px;}
.wt-duell-w{display:inline-block;padding:1px 7px;margin:2px 3px 0 0;border-radius:6px;
  background:#fff8ea;border:1px solid var(--line);font-size:13px;color:var(--ink);}
.wt-duell-w-exklusiv{background:#eaf0dd;border-color:var(--green);color:var(--green);font-weight:700;}
.wt-duell-woerter-legende{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:8px;}