/* Math Cup – Hilfen im Spiel: Tipp-Banner im Feld und Tipp-Knopf in der Steuerung.
   Ruhig, gut lesbar am Beamer, passend zum dunklen Stadion-Look. */

:root {
  --mc-hint-gold: #f7d84a;
  --mc-hint-ink: #f4f8ff;
  --mc-hint-cyan: rgba(76, 201, 240, 0.9);
}

/* ---------- Banner unter der Aufgabe ---------- */
.math-hint {
  position: absolute;
  z-index: 7;
  /* Fallback; app.js setzt --mc-hint-top passend unter die Aufgabenkarte. */
  top: var(--mc-hint-top, calc(11.6% + clamp(118px, 30%, 190px) + 12px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  max-width: min(72%, 920px);
  padding: clamp(8px, 0.9vw, 12px) clamp(16px, 1.6vw, 24px) clamp(8px, 0.9vw, 12px) clamp(10px, 1vw, 14px);
  border: 1px solid rgba(247, 216, 74, 0.42);
  border-radius: 12px;
  translate: -50% 0;
  background:
    linear-gradient(135deg, rgba(6, 20, 36, 0.94), rgba(12, 36, 54, 0.9)),
    radial-gradient(circle at 8% 50%, rgba(247, 216, 74, 0.16), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(247, 216, 74, 0.12);
  color: var(--mc-hint-ink);
  pointer-events: none;
  animation: mcHintIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.math-hint[hidden] {
  display: none;
}

.math-hint-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border: 1px solid rgba(247, 216, 74, 0.4);
  border-radius: 999px;
  background: rgba(247, 216, 74, 0.12);
  color: var(--mc-hint-gold);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.math-hint-badge svg {
  width: 1.35em;
  height: 1.35em;
  flex: none;
}

.math-hint-text {
  font-size: clamp(18px, 1.75vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.005em;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Ziffernhilfe: jede Stelle als eigenes Feld, verdeckte Stellen gestrichelt. */
.math-hint-digits {
  display: inline-flex;
  align-items: flex-end;
  gap: clamp(4px, 0.45vw, 8px);
  font-size: clamp(26px, 2.3vw, 40px);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.math-hint-digit,
.math-hint-blank {
  display: inline-grid;
  place-items: center;
  width: 1.05em;
  height: 1.2em;
  border-radius: 8px;
}

.math-hint-digit {
  border: 2px solid rgba(247, 216, 74, 0.7);
  background: rgba(247, 216, 74, 0.12);
  color: #fff6cf;
}

.math-hint-blank {
  border: 2px dashed rgba(190, 214, 240, 0.55);
  background: rgba(255, 255, 255, 0.04);
}

.math-hint-sep {
  display: inline-block;
  min-width: 0.3em;
  color: rgba(230, 242, 255, 0.85);
  text-align: center;
}

@keyframes mcHintIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.performance-mode .math-hint {
  animation: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .math-hint {
    animation: none;
  }
}

@media (max-width: 760px) {
  .math-hint {
    max-width: 92%;
    gap: 8px;
  }

  .math-hint-text {
    font-size: 15px;
  }

  .math-hint-digits {
    font-size: 24px;
  }
}

/* ---------- Tipp-Knopf in der Steuerung ---------- */
.math-hint-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.math-hint-tool[hidden] {
  display: none !important;
}

.math-hint-tool svg {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  color: var(--mc-hint-gold);
}

.math-hint-tool .math-hint-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: rgba(247, 216, 74, 0.2);
  color: #fff3b8;
  font-size: 0.85em;
  line-height: 1;
}

.math-hint-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.math-hint-tool:disabled svg {
  color: currentColor;
}

/* Mit Tipp-Knopf: erste Reihe vier Knöpfe, zweite Reihe drei (Desktop-Raster). */
@media (min-width: 981px) and (min-height: 501px) {
  body:not(.possession-rush-active) .middle-panel:has(> .math-hint-tool:not([hidden])) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  body:not(.possession-rush-active) .middle-panel:has(> .math-hint-tool:not([hidden])) > .tool {
    grid-column: span 4;
  }

  body:not(.possession-rush-active) .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="next-round"],
  body:not(.possession-rush-active) .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="draw-new-word"],
  body:not(.possession-rush-active) .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="reveal-answer"],
  body:not(.possession-rush-active) .middle-panel:has(> .math-hint-tool:not([hidden])) > .math-hint-tool {
    grid-column: span 3;
  }

  body.possession-rush-active .middle-panel:has(> .math-hint-tool:not([hidden])) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  body.possession-rush-active .middle-panel:has(> .math-hint-tool:not([hidden])) > .tool {
    grid-column: span 3 !important;
  }

  body.possession-rush-active .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="undo"],
  body.possession-rush-active .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="reset"] {
    grid-column: span 6 !important;
  }
}