@font-face{
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.pzk{
  --bg:#f6f7fb;
  --ink:#111;
  --muted:#6b7280;
  --accent:#2563eb;
  --good:#16a34a;
  --bad:#dc2626;

  --grid-bold:#64748b;
  --grid-thin:#cbd5e1;
  --cell-bg:#ffffff;
  --select:#ef4444;
  --note:#64748b;
  --overlay:#111;

  --palette-gap:1.1rem;
  --palette-item-width:3.25rem;
  --palette-item-height:4rem;
  --palette-key-size:.8rem;
  --palette-number-size:2.2rem;
  --palette-symbol-size:3.55rem;
  --palette-shape-size:3.55rem;
}


.pzk .board-grid{
  display:grid;
  gap: var(--pico-spacing,1rem);
  grid-template-columns: 1fr minmax(260px,340px);
  align-items:start;
}
@media (max-width: 1100px){ .pzk .board-grid{ grid-template-columns:1fr } }

.pzk article{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  padding:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

/* Status & Messages */
.pzk .status{ color:var(--muted); font-size:.95rem }
.pzk .msg{ padding:.5rem .75rem; border-radius:.6rem; margin:.25rem 0 }
.pzk .msg.ok{ background:#ecfdf5; color:var(--good); border:1px solid #bbf7d0 }
.pzk .msg.warn{ background:#fff7ed; color:#c2410c; border:1px solid #fed7aa }
.pzk .msg.bad{ background:#fef2f2; color:var(--bad); border:1px solid #fecaca }

/* Board */
.pzk .board { position: relative; }

.pzk #svg { width: 100%; height: auto; display: block; aspect-ratio: 1/1; }

.pzk #svg .grid .outer {
  stroke: var(--grid-bold, #64748b);
  stroke-width: 2;
  fill: none;
  shape-rendering: crispEdges;
}

.pzk #svg .grid line { stroke:#cbd5e1; stroke-width:1; shape-rendering:crispEdges; stroke-linecap:butt; }
.pzk #svg .grid line.bold { stroke:#64748b; stroke-width:3; }

/* dünne Gitterlinien */
.pzk #svg .grid rect {
  fill: var(--grid-thin, #cbd5e1);
}

/* fette Gitterlinien */
.pzk #svg .grid rect.bold {
  fill: var(--grid-bold, #64748b);
}

.pzk #svg .grid { pointer-events:none; }   /* Grid blockiert keine Klicks */
.pzk #svg .ui   { pointer-events:none; }   /* UI-Overlay auch nicht */
.pzk #svg .bg-over,
.pzk #svg .grid { pointer-events:none; }

.pzk #svg .cell { cursor:pointer; }

/* Zellenhintergrund */
.pzk #svg .cell rect.bg {
  fill: var(--cell-bg, #ffffff);
}

/* selektierte Zelle */
.pzk #svg .cell.sel rect.bg {
  stroke: var(--select, #ef4444);
  stroke-width: 3;
}

.pzk #svg .cell rect.hl { fill:#dbeafe; opacity:0; }
.pzk #svg .cell.fixed text,
.pzk #svg .cell text.given { font-weight:700; }
.pzk #svg .cell text {
  dominant-baseline: middle;
  text-anchor: middle;
  font-family: "Inter", sans-serif;
}

.pzk #svg .cell .overlay { fill:#111; }
.pzk #svg .cell.error rect.bg { stroke:var(--bad); stroke-width:2; }

/* Notizen */
.pzk #svg .note {
  fill: var(--note, #64748b);
  opacity: .95;
}

/* Palette */
.pzk .palette{
  display:flex;
  flex-wrap:wrap;
  gap:var(--palette-gap);
  justify-content:center;
  align-items:flex-end;
  width:auto;
  max-width:100%;
}

.pzk .palette .chip{
  width:var(--palette-item-width);
  min-width:var(--palette-item-width);
  height:var(--palette-item-height);
  min-height:var(--palette-item-height);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border: 1px solid #111;
  background: #ffffff;
  border-radius:.35rem;
  padding:.22rem .2rem .16rem;
  cursor:pointer;
  position:relative;
  color:#111;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}

.pzk .palette .chip.chip-symbol,
.pzk .palette .chip.chip-svg{
  padding-top:.6rem;
}

.pzk .palette .chip.chip-number{
  padding-top:.08rem;
}

.pzk .palette .chip.chip-number > span:last-child{
  transform:translateY(-0.22rem);
}

.pzk .palette .chip > span:last-child{
  line-height:1;
  font-weight:400;
  display:block;
  margin-top:auto;
}

.pzk .palette .chip.chip-number > span:last-child{
  font-size:var(--palette-number-size);
  color:#111;
}

.pzk .palette .chip.chip-symbol > span:last-child{
  font-size:var(--palette-symbol-size);
}

.pzk .palette .chip svg{
  width:var(--palette-shape-size);
  height:var(--palette-shape-size);
  display:block;
  overflow:visible;
  margin-top:auto;
}

.pzk .palette .chip .kbd{
  position:absolute;
  top:0.16rem;
  right:0.35rem;
  font-size:var(--palette-key-size);
  line-height:1;
  color:#777;
  border:none;
  background:transparent;
  padding:0;
}

.pzk .palette .chip.active{
  color:#111;
  outline:none;
  box-shadow:none;
}

.pzk .palette .chip:hover{
  background:#f4f8fc;
  border-color:#111;
  transform:translateY(-1px);
}

/* Hilfstexte */
.pzk .small{ font-size:.85rem; color:var(--muted) }
.pzk .hint{ color:#374151; font-size:.9rem }

/* Range vollbreit in der Sidebar */
.pzk #noteScale{ width:100% }

.pzk-pdf-puzzle-type-category{
  font-weight:700;
  margin:.75rem 0 .45rem;
}

/* Spieler-Werte */
.pzk #svg .cell text.value:not(.given) {
  fill: var(--ink, #111) !important;
}

/* Fallback für Givens-Text, falls class "base" verwendet wird */
.pzk #svg .cell text.base {
  fill: var(--ink, #111) !important;
}

.pzk #svg .note,
.pzk #svg .cell text.value,
.pzk #svg .cell text.base,
.pzk #svg .layers-under text,
.pzk #svg .layers-over text {
  font-family: "Inter", sans-serif;
}




/* Puzzle soll seine nativen Masse behalten (Desktop) */
.pzk-board{ flex:0 0 auto; }           /* nicht schrumpfen */
.pzk-board svg{ display:block; width:auto; height:auto; max-width:none; }

/* Mobile: darf auf Containerbreite schrumpfen */
@media (max-width: 767.98px){
  .pzk-board svg{ width:100%; max-width:100%; height:auto; }
}

.pzk-board-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.pzk-puzzle-anchor{
  display:block;
  height:0;
  scroll-margin-top:7.5rem;
  visibility:hidden;
}

.pzk-puzzle-solved-indicator{
  display:inline-block;
  margin-left:0.45em;
  color:#008000;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.95em;
  font-weight:900;
  line-height:1;
  vertical-align:0.04em;
}

.pzk-menu {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}

.pzk-controls {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: center;
}

.pzk-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.pzk-control-button {
  appearance: none;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  position: relative;
  border-color:#111;
}

.pzk-control-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.pzk-control-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.pzk-control-button .pzk-control-icon {
  font-size:1rem;
}

.pzk-control-button .btn-label {
  letter-spacing:0;
}

.pzk-control-button .pzk-control-key {
  position: absolute;
  top: 0.28rem;
  right: 0.45rem;
  font-size: 0.72rem;
  line-height: 1;
  color:#777;
  font-weight: 500;
  pointer-events: none;
}


.pzk #messages,
.pzk .status {
  text-align: center;
}

.pzk-dropdown-field{
  width:100%;
  display:block;
}

.pzk-puzzle-type-select,
.pzk-puzzle-difficulty-select{
  width:100%;
  max-width:100%;
  min-height:3.45rem;
  display:block;
  padding:0.7rem 3rem 0.7rem 1.15rem;
  border:1px solid #d7dfe6;
  border-radius:0.45rem;
  background-color:#fff;
  color:#111;
  font-size:1rem;
  line-height:1.25;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:0.95rem 0.95rem;
  box-sizing:border-box;
}

.pzk-puzzle-type-select:focus,
.pzk-puzzle-difficulty-select:focus{
  outline:none;
  border-color:#9fbdd5;
  box-shadow:0 0 0 1px rgba(159,189,213,0.28);
}

.pzk-puzzle-pagination{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:1rem;
  padding:0.55rem 0;
  margin:0 0 1.5rem;
  border-top:1px solid #d7dfe6;
  border-bottom:1px solid #d7dfe6;
}

.pzk-puzzle-pagination .fusion-tb-previous,
.pzk-puzzle-pagination .fusion-tb-next{
  min-width:0;
}

.pzk-puzzle-pagination .fusion-tb-next{
  justify-self:end;
}

.pzk-pagination-link{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  color:#111;
  font-size:0.96rem;
  line-height:1.1;
  text-decoration:none;
  white-space:nowrap;
}

.pzk-pagination-link:hover,
.pzk-pagination-link:focus{
  color:#205c8a;
  text-decoration:none;
}

.pzk-pagination-link i{
  font-size:0.95rem;
  line-height:1;
}

.pzk-puzzle-pagination .scroll-to-puzzle{
  justify-self:center;
  text-align:center;
  white-space:nowrap;
}

.pzk-puzzle-pagination .scroll-to-puzzle a{
  color:#111;
  font-size:0.96rem;
  line-height:1.1;
  text-decoration:none;
}

.pzk-puzzle-pagination .scroll-to-puzzle a:hover,
.pzk-puzzle-pagination .scroll-to-puzzle a:focus{
  color:#205c8a;
  text-decoration:none;
}

@media (max-width: 767.98px){
  .pzk-puzzle-pagination{
    gap:0.65rem;
  }
}