/* Caesar-Scheibe — nur für caesar/index.html. Gemeinsames Design steht in ../assets/site.css. */

.caesar-wrap { max-width: 1320px; padding-top: 20px; }

:root {
  --klar: var(--sparks-teal);
  --klar-tint: var(--sparks-teal-050);
  --geheim: var(--ium);
  --geheim-tint: #fbeef0;

  /* Größe der Scheibe. Wenn sich das ändert: data-sizes an #disk in index.html mitändern. */
  --disk: min(760px, calc(100vw - 2 * var(--gutter)), 70vh);

  /* Ersatz-Scheibe (SVG), solange die Bilder fehlen: wie die Marmor-Scheibe,
     außen Goldring, innen heller Stein */
  --fb-rim-hi: #e6c46a;
  --fb-rim: #b88a2a;
  --fb-rim-lo: #7a5714;
  --fb-groove: #2a1f10;
  --fb-plate-hi: #f4f2ee;
  --fb-plate: #dcd8d2;
  --fb-plate-lo: #b9b3ab;
  --fb-hub-hi: #efe9df;
  --fb-hub-lo: #a8a097;
  --fb-line: rgba(60, 45, 25, .45);
  --fb-line-light: rgba(255, 252, 245, .55);
  --fb-pointer: #7b2333;

  /* Buchstaben, eingraviert: dunkle Füllung, helle Unterkante (edge), dunkler Rand oben (shade).
     Außen auf Gold: fast schwarzes Braun (Kontrast etwa 4,8 : 1 zum mittleren Gold, helles Creme nur 2,5 : 1).
     Innen auf weißgrauem Marmor: dunkles Steingrau. */
  --disk-letter-out: #2a1a06;
  --disk-letter-in: #3a3430;
  --disk-letter-edge: rgba(255, 240, 200, .5);
  --disk-letter-shade: rgba(0, 0, 0, .45);

  /* Markierung des aktuellen Buchstabenpaars */
  --disk-hl-fill: rgba(255, 244, 214, .22);
  --disk-hl-stroke: rgba(255, 226, 150, .95);
}
@supports (height: 1dvh) {
  :root { --disk: min(760px, calc(100vw - 2 * var(--gutter)), 70dvh); }
}

/* ---- Raster: Handy hochkant = untereinander ---------------- */
.caesar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "disk" "keys" "text";
  gap: 14px;
  align-items: start;
}
.c-head { grid-area: head; }
.c-disk { grid-area: disk; }
.c-keys { grid-area: keys; }
.c-text { grid-area: text; }

/* Tablet/Laptop quer: Scheibe links, so groß wie die Höhe erlaubt */
@media (min-width: 900px) and (orientation: landscape) {
  .caesar-wrap { padding-top: 24px; }
  :root { --disk: min(760px, calc(100vh - 112px), calc(100vw - 460px)); }
  @supports (height: 1dvh) {
    :root { --disk: min(760px, calc(100dvh - 112px), calc(100vw - 460px)); }
  }
  .caesar {
    grid-template-columns: var(--disk) minmax(320px, 520px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "disk head" "disk keys" "disk text";
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: 12px;
    justify-content: center;
  }
  .c-keys { justify-self: start; }
}

.c-head h1 { font-size: clamp(26px, 3.4vw, 40px); margin: 0; }

/* ---- Die Scheibe ------------------------------------------ */
.disk {
  position: relative;
  width: var(--disk);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  isolation: isolate;
  border-radius: 50%;
  overflow: hidden;               /* Ersatz für ältere Safari ohne clip */
  overflow: clip;                 /* die gedrehte innere Bildebene ragt sonst als Quadrat heraus */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Schatten folgt der runden Scheibe (die Bilder haben 3 % transparenten Rand) */
/* Rahmen um die Scheibe: trägt den Schatten als Kreis knapp innerhalb des Bildrands
   (die Bilder haben 3 % transparenten Rand; ein filter: drop-shadow malt in Chrome unzuverlässig) */
.disk-frame { position: relative; width: var(--disk); max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.disk-frame::before {
  content: ""; position: absolute; inset: 1.6%; border-radius: 50%;
  box-shadow: 0 6px 14px rgba(30, 20, 8, .25), 0 22px 44px rgba(30, 20, 8, .18);
}
.disk-frame > .disk { width: 100%; }
.disk.dragging { cursor: grabbing; }
/* Beim Ziehen die Gravur nur an den bewegten inneren Buchstaben abschalten (spart Rechenzeit) */
.disk.dragging .disk-inner-letters { filter: none; }
.disk:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 50%; }
.disk > svg, .disk > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  display: block; pointer-events: none;
}
.disk-layer { visibility: hidden; }
.disk-layer-inner { transform-origin: 50% 50%; will-change: transform; }
.disk.has-images .disk-layer { visibility: visible; }
.disk.has-images .disk-fallback { visibility: hidden; }

/* Ersatz-Scheibe */
.fb-rim-hi { stop-color: var(--fb-rim-hi); }
.fb-rim { stop-color: var(--fb-rim); }
.fb-rim-lo { stop-color: var(--fb-rim-lo); }
.fb-plate-hi { stop-color: var(--fb-plate-hi); }
.fb-plate { stop-color: var(--fb-plate); }
.fb-plate-lo { stop-color: var(--fb-plate-lo); }
.fb-hub-hi { stop-color: var(--fb-hub-hi); }
.fb-hub-lo { stop-color: var(--fb-hub-lo); }
.fb-groove { fill: var(--fb-groove); }
.fb-incise { fill: none; stroke: var(--fb-line); stroke-width: 5; }
.fb-incise-light { fill: none; stroke: var(--fb-line-light); stroke-width: 3; }
.fb-div { stroke: var(--fb-line); stroke-width: 5; stroke-linecap: round; }
.fb-pointer { fill: var(--fb-pointer); stroke: rgba(40, 10, 10, .5); stroke-width: 4; }

/* Buchstaben über der Scheibe */
.disk-letters text {
  font-family: var(--font-roman);
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}
.disk-letters .o { font-size: 168px; fill: var(--disk-letter-out); }
.disk-letters .i { font-size: 128px; fill: var(--disk-letter-in); }
.disk-letters .eng-edge { flood-color: var(--disk-letter-edge); }
.disk-letters .eng-shade { flood-color: var(--disk-letter-shade); }
/* Auf den gerenderten Marmor-Ebenen (Goldring außen, Marmor innen); einzeln nachstellbar */
.disk.has-images {
  --disk-letter-out: #2a1a06;
  --disk-letter-in: #3a3430;
  --disk-letter-edge: rgba(255, 240, 200, .5);
  --disk-letter-shade: rgba(0, 0, 0, .45);
}
.disk-hl { fill: var(--disk-hl-fill); stroke: var(--disk-hl-stroke); stroke-width: 8; stroke-linejoin: round; }

/* ---- Schlüssel-Anzeige (dreht sich nicht mit) ------------- */
/* Schlüssel und Schalter als eine Gruppe, Schalter mittig unter der Anzeige */
.c-keys { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.keybar { display: flex; align-items: center; justify-content: center; gap: 16px; }
.readout { display: flex; align-items: baseline; gap: 12px; min-width: 11em; justify-content: center; }
.readout-label { font-weight: 600; color: var(--ink-700); }
.readout-num { font: 700 36px/1 var(--font); font-variant-numeric: tabular-nums lining-nums; color: var(--sparks-teal-900); min-width: 1.4em; text-align: center; }
.readout-pair { font: 700 24px/1 var(--font); color: var(--ink-500); white-space: nowrap; }
.readout-pair .klar { color: var(--klar); }
.readout-pair .geheim { color: var(--geheim); }

/* ---- Text -------------------------------------------------- */
.c-text { display: flex; flex-direction: column; gap: 8px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; margin: 0; border: 0; border-radius: var(--r-pill); background: var(--sparks-teal-050); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; color: var(--sparks-teal-900); }
.seg input:checked + span { background: var(--sparks-teal); color: var(--white); }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.field-label { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: 15px; margin-top: 6px; }
.field-label::before { content: ""; width: .65em; height: .65em; border-radius: 50%; background: currentColor; flex: none; }
.field-label.klar { color: var(--klar); }
.field-label.geheim { color: var(--geheim); }

.caesar textarea, .attack textarea { resize: vertical; min-height: 5.2em; }
textarea.klar { color: var(--klar); }
textarea.geheim { color: var(--geheim); }
.out {
  font: 400 17px/1.45 var(--font);
  padding: 12px 14px; min-height: 5.2em;
  border-radius: var(--r-md); border: 2px dashed var(--ink-100); background: var(--white);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.out.klar { color: var(--klar); }
.out.geheim { color: var(--geheim); }
.out:empty::before { content: "Das Ergebnis erscheint hier."; color: var(--ink-300); }
.out span[data-p] { border-radius: 3px; cursor: pointer; }
.out span[data-p]:hover, .out span.on { background: rgba(250, 178, 11, .28); }

.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.row-actions .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.status { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--ink-700); }
.status:empty { min-height: 0; }
.check { display: inline-flex; align-items: center; gap: .55em; cursor: pointer; font-weight: 600; min-height: 32px; }
.check input { width: 1.2em; height: 1.2em; accent-color: var(--sparks-teal); margin: 0; }
.fine { font-size: 14px; color: var(--ink-500); margin: 0; max-width: 62ch; }

/* ---- Angriffe ---------------------------------------------- */
.extras { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.sum-sub { font-weight: 500; color: var(--ink-500); font-size: 14px; }
.attack { display: flex; flex-direction: column; gap: 10px; }
.bf-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bf-controls .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.count { color: var(--ink-500); margin-left: auto; font-size: 14px; }
.empty { color: var(--ink-500); margin: 0; padding: 16px; border: 2px dashed var(--ink-100); border-radius: var(--r-md); text-align: center; }
.bf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-row {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; font: inherit; padding: 8px 14px; min-height: 44px;
  border: 1px solid var(--ink-100); border-radius: var(--r-sm); background: var(--white); color: var(--ink-900); cursor: pointer;
}
.bf-row:hover { border-color: var(--sparks-teal-300); background: var(--sparks-teal-050); }
.bf-key { font: 600 22px/1 var(--font-roman); color: var(--sparks-teal); text-align: right; }
.bf-text { color: var(--klar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-open { color: var(--ink-500); font-size: 13px; font-weight: 600; }
.flash { animation: flash 1s ease-out; }
@keyframes flash { from { background: var(--ium-100); } to { background: var(--white); } }

.stats { margin: 0; }
.warn { color: var(--ium-700); font-weight: 700; }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ink-100); border-radius: var(--r-md); background: var(--white); padding: 10px 6px 4px; }
#fa-chart { display: block; width: 100%; min-width: 600px; height: auto; }
.c-bar { fill: var(--geheim); }
.r-bar { fill: var(--klar); fill-opacity: .12; stroke: var(--klar); stroke-width: 1.5; }
.grid { stroke: var(--ink-100); stroke-width: 1; }
.grid-t { fill: var(--ink-500); font-family: var(--font); font-size: 12px; }
.ax-c { fill: var(--geheim); font-family: var(--font-roman); font-weight: 600; font-size: 19px; }
.ax-p { fill: var(--klar); font-family: var(--font-roman); font-weight: 600; font-size: 20px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--ink-500); }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 7px; }
.sw.c { background: var(--geheim); }
.sw.r { border: 2px solid var(--klar); background: rgba(34, 92, 103, .12); }
.fa-slider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 14px; border: 1px solid var(--ink-100); border-radius: var(--r-md); background: var(--white); }
.fa-slider output { font-weight: 700; color: var(--sparks-teal-900); min-width: 13em; text-align: right; }
.fa-slider input[type="range"] { width: 100%; accent-color: var(--sparks-teal); height: 34px; margin: 0; }

.teacher-link { margin: 28px 0 0; font-weight: 600; }

@media (max-width: 600px) {
  .fa-slider { grid-template-columns: minmax(0, 1fr); }
  .fa-slider output { text-align: left; }
  .count { margin-left: 0; width: 100%; }
  .bf-row { grid-template-columns: 2em minmax(0, 1fr); }
  .bf-open { display: none; }
  .bf-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .readout-num { font-size: 32px; }
  .readout-pair { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
}