:root{
  --bg1:#eef3ff; --bg2:#f7f8fa; --card:#ffffff; --text:#1c2230; --muted:#6b7280;
  --primary:#0b74ff; --primary-600:#0a63d6; --outline:#c7d2fe;
  --focus:#facc15; /* amber focus ring for inputs */
  --ok:#16a34a; --warn:#f59e0b; --info:#0ea5e9; --danger:#ef4444;
  --grid-border:#e5e7eb; --grid-gap:2px; --cell-border:#d1d5db;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#1f2937; --bg2:#0b1220; --card:#0f1729; --text:#e5e7eb; --muted:#9ca3af;
    --primary:#3b82f6; --primary-600:#2563eb; --outline:#1d4ed8;
    --focus:#fbbf24; /* amber focus ring in dark */
    --ok:#22c55e; --warn:#fbbf24; --info:#38bdf8; --danger:#f87171;
    --grid-border:#1f2a44; --cell-border:#1f2937;
  }
}

@media (min-width: 601px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }
}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--bg1), transparent),
    radial-gradient(800px 500px at 100% 0%, #ffe8f5, transparent),
    var(--bg2);
  padding: 2rem; margin:0; min-height:100vh; color:var(--text);
}
h1{ text-align:center; color:var(--text); text-shadow:none; font-size:clamp(1.6rem,2.3vw,2.2rem); letter-spacing:.2px; margin-top:.4rem; }
/* Centered sticky clue bar with arrows left/right */
.navigation{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: .6rem;
  margin: .6rem 0 1rem;
  position: sticky;
  top: 0;
  background: transparent;
  backdrop-filter: saturate(180%) blur(8px);
  border: none;
  border-radius: 12px;
  padding: 0;
  z-index: 1000;
}
.navigation #currentClue,
.navigation .clue,
.navigation .clue-text{
  text-align: center;
  font-weight: 600;
  color: var(--text);
  padding: 0 .25rem;
  /* Allow multi-line clues without truncation */
  white-space: normal;
  overflow-wrap: anywhere; /* break long tokens/compounds if needed */
  word-break: break-word;  /* legacy/Safari support */
  text-overflow: clip;
  line-height: 1.25;
  min-width: 0;            /* important in grid/flex to avoid overflow */
}
/* Clue pill, visually aligned with control buttons */
.navigation .clue-text{
  background: transparent; border:none; border-radius:12px;
  padding:.25rem .4rem; margin:.25rem 0; box-shadow:none;
  grid-column: 2;              /* always the center column */
  justify-self: center;        /* center within middle column */
  display:flex; align-items:center; justify-content:center;
  min-width: 0; max-width: 100%;
  font-size: 1.075rem;         /* a touch larger on desktop */
}
@media (prefers-color-scheme: dark){
  .navigation .clue-text{ background:transparent; color:var(--text); border:none; box-shadow:none; grid-column:2; justify-self:center; display:flex; align-items:center; justify-content:center; max-width:100%; font-size:1.075rem; }
}
.grid{
  display:grid;
  grid-template-columns:repeat(10,50px);
  grid-template-rows:repeat(10,50px);
  gap:var(--grid-gap);
  background:transparent;
  border:1px solid var(--grid-border);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:6px;
  margin:1.2rem auto .6rem auto;
  width:fit-content; max-width:100%; justify-content:center;
}
input.cell{
  width:50px; height:50px; line-height:50px; text-align:center; font-weight:700; text-transform:uppercase;
  font-size:20px; border:1px solid var(--cell-border); border-radius:0px; box-sizing:border-box; background:#fff; color:#111111;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
@media (prefers-color-scheme: dark){
  input.cell{ color:#111111 !important; }
}
input.cell:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(250,204,21,.35) inset, 0 0 0 2px var(--focus);
  border-color: var(--focus);
}
.black{ background:#000 !important; border:1px solid #000; pointer-events:none; border-radius:0px; box-sizing:border-box; }
@media (prefers-color-scheme: dark){ .black{ background:#0b1220 !important; border-color:#1f2a44; } }
    .clue-cell {
      align-self: start;
      justify-self: start;
      padding-left: 4px;
      font-size: 12px;
      white-space: nowrap;
    }
.highlight{ background: rgba(255,214,10,.28) !important; box-shadow: inset 0 0 0 2px rgba(252,211,77,.60); }
/* Force bright highlight fill on inputs (light & dark) */
input.cell.highlight{
  background: #fff6a6 !important; /* soft light yellow on light mode */
  border-color: var(--focus) !important;
}
@media (prefers-color-scheme: dark){
  input.cell.highlight{
    background: #fde68a !important; /* bright amber for dark mode */
    border-color: var(--focus) !important;
  }
}
@media (prefers-color-scheme: dark){
  .highlight{ 
    background: rgba(250,204,21,.32) !important; 
    box-shadow: inset 0 0 0 2px rgba(253,230,138,.75);
    color:#000 !important; /* Text im Highlight hell */
  }
}

/* Dark mode: bessere Lesbarkeit der Buttons */
@media (prefers-color-scheme: dark){
  .navigation button{
    background:#111827 !important; color:#e5e7eb !important; border-color:#334155 !important; 
    box-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  .navigation button:hover{ background:#0f1729 !important; }

  button.control{
    background:#111827 !important; color:#e5e7eb !important; border-color:#334155 !important;
    box-shadow: inset 4px 0 0 var(--accent, transparent), 0 2px 12px rgba(0,0,0,.5);
  }
  button.control:hover{ background:#0f1729 !important; }
}

/* Disabled-Zustände: gut lesbar, aber deutlich deaktiviert */
button.control:disabled, .navigation button:disabled{
  opacity:.55; color:#9ca3af; cursor:not-allowed; box-shadow:none;
}
.correct{ background:#dcfce7 !important; color:#065f46; }
.incorrect{ background:#fee2e2 !important; color:#7f1d1d; }
/* Navigation: neutral outline buttons */
.navigation button{
  background:#fff; color:var(--primary); border:1px solid var(--grid-border);
  border-radius:12px; cursor:pointer; padding:.5rem .9rem; margin:0 .25rem; font-size:1rem;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.navigation button:hover{ background:#f8fafc; transform: translateY(-1px); }
/* Controls: neutral buttons with subtle color accent on the left */
button.control{
  background:#fff; color:var(--text); border:1px solid var(--grid-border); border-radius:12px;
  box-shadow: inset 4px 0 0 var(--accent, transparent), 0 2px 8px rgba(0,0,0,.06);
  transition: background .2s ease, transform .08s ease, box-shadow .2s ease;
  padding: .65em 1.1em; font-size: .95rem;
}
button.control:hover{ background:#f8fafc; transform: translateY(-1px); }
button.control.check{ --accent: var(--ok); }
button.control.hint{ --accent: var(--warn); }
button.control.reset{ --accent: var(--info); }
button.control.new{ --accent: var(--danger); }
    /* Footer Impressum */
    .footer {
      position: static;
      width: 100%;
      text-align: center;
      margin-top: 1rem;
      padding: 1rem 0;
    }

    #impressumBtn {
      background: none;
      border: none;
      color: #007BFF;
      font-size: 1rem;
      cursor: pointer;
    }
    #impressumBtn:hover {
      text-decoration: underline;
    }
.card{ max-width:650px; margin:2rem auto; background:var(--card); padding:1.6rem 1.6rem 1.2rem; border-radius:20px; box-shadow:0 12px 40px rgba(16,24,40,.12); overflow:hidden; }

/* Layout für Button-Gruppe */
.controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
/* Navigation Icons */
.navigation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.navigation button .icon {
  width: 1.2em;
  height: 1.2em;
}
@media (max-width: 768px) {
  .card {
    margin: 1rem;
    padding: 1.5rem;
  }
  .grid {
    grid-template-columns: repeat(10, 40px);
    grid-template-rows: repeat(10, 40px);
    padding: 0.75rem;
  }
  input.cell{ width:40px; height:40px; font-size:18px; border-radius:6px; }
  .controls {
    flex-direction: column;
    gap: 0.75rem;
  }
  .controls button.control {
    width: 100%;
  }
  .navigation {
    gap: 0.5rem;
  }
  .navigation button {
    padding: 0.4rem;
  }
}
@media (max-width: 480px) {
  body {
    padding: .5rem;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, auto);
    gap: 1px;                      /* zarte Trennlinien */
    background: var(--grid-border);/* Gutters als Hintergrund */
    padding: 0;                    /* Remove inner padding for more usable width */
    border: none;
    box-shadow: none;
    overflow-x: hidden;
    max-width: 100%;
    margin: .4rem auto 0;          /* Remove extra margins, tighter to top */
  }
  .clue-cell {
    display: none;
  }
  input.cell{
    width: 100%;
    aspect-ratio: 1;
    font-size: 17px;               /* Slightly larger for readability */
    line-height: normal;
    height: auto;
    border: none;                  /* keine doppelten Linien, Gutters übernehmen die Trennung */
    border-radius: 2px;            /* minimal rund, wirkt ruhiger im engen Raster */
  }
  h1 {
    font-size: 1.25rem;
  }
  .card {
    max-width: 100vw;
    margin: .25rem;
    padding: .4rem .35rem .7rem;
    border-radius: 16px;
  }
  .navigation {
    margin: .35rem 0 .45rem;
    grid-template-columns: 36px 1fr 36px;
  }
  .navigation button {
    padding: .35rem;
  }
  .navigation .clue-text {
    padding: .45rem .6rem;
    font-size: .95rem;
  }
  .black{ background:#000; border:none; border-radius:4px; }
}
.back-to-menu button{
  font-size:1rem; border-radius:12px; padding:.5rem .9rem;
  background:#fff; border:1px solid var(--grid-border); color:var(--text);
  cursor:pointer; transition: background .2s, transform .08s; box-shadow:0 2px 8px rgba(0,0,0,.06);
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.back-to-menu button:hover{ background:#e5e7eb; transform:translateY(-1px); }
@media (prefers-color-scheme: dark){
  .back-to-menu button{ background:#111827; color:#e5e7eb; border-color:#334155; box-shadow:0 2px 12px rgba(0,0,0,.5); }
  .back-to-menu button:hover{ background:#0f1729; }
}

.back-to-menu {
  position: fixed;
  top: 3rem;
  left: 3rem;
  z-index: 200;
}
@media (max-width: 600px) {
  .back-to-menu {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + .8rem);
    left: .6rem;
  }
  .back-to-menu button{
    padding:.35rem .6rem; font-size:1rem; border-radius:12px; line-height:1;
  }
}