/* MathBlitz - prototype styling. Deliberately plain: phase 1 exists to
   answer whether the mechanic feels right, not what it looks like. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 18px 16px 28px;
  background: #0a0e1a;
  color: #eef3ff;
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

.huelle { max-width: 940px; margin: 0 auto; }

h1 {
  font-size: 20px;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  color: #7ee0ff;
  text-transform: uppercase;
}
h1 small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #6b7794;
  text-transform: none;
}

/* ------------------------------------------------------------------- HUD */

.hud {
  display: flex;
  gap: 26px;
  align-items: baseline;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: #131a2c;
  border-radius: 10px;
}
.hud > div { display: flex; align-items: baseline; gap: 8px; }
.etikett {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7794;
}
.hud b { font-size: 20px; font-variant-numeric: tabular-nums; }
.hud em { font-style: normal; color: #9fb0d0; font-size: 14px; }
.herzen { color: #e25858; letter-spacing: 2px; }
.combo { color: #f4c259; }
.hud > div:last-child { margin-left: auto; gap: 14px; }

.ton {
  border: 1px solid #3a4763;
  border-radius: 8px;
  background: #1d2740;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
}
.ton:hover { border-color: #7ee0ff; }

/* ----------------------------------------------------------------- field */

.feldbox { position: relative; width: 100%; }
canvas { display: block; border-radius: 12px; background: #0f1424; }

.banner {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #7ee0ff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.banner span {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  color: #f4c259;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 14, 26, 0.9);
  border-radius: 12px;
}
.overlay h2 { margin: 0; font-size: 26px; color: #7ee0ff; }
.overlay p { margin: 0; max-width: 460px; color: #c3cee6; }
.overlay .klein { font-size: 14px; color: #9fb0d0; }
.overlay .ruf { color: #f4c259; font-weight: 600; margin-top: 6px; }
.overlay[hidden] { display: none; }

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #3a4763;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #1d2740;
  font: inherit;
  font-size: 13px;
}

/* ----------------------------------------------------------- digit slots */

/* The fixed answer length is the mechanic's keystone, so the interface says
   it out loud: N boxes to fill, no guessing how long the answer is. */
.slots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 18px 0 10px;
}
.slot {
  width: 58px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #2f8fb3;
  border-radius: 12px;
  background: #131a2c;
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #eef3ff;
  transition: border-color 0.1s, background 0.1s;
}
.slot.voll { border-color: #7ee0ff; background: #1d2740; }
.slot.falsch { border-color: #e25858; background: #3a2030; }

.hilfe { text-align: center; color: #6b7794; font-size: 13px; margin: 0; }

/* --------------------------------------------------------------- buttons */

.knopf {
  margin-top: 6px;
  padding: 12px 26px;
  border: 3px solid #7ee0ff;
  border-radius: 12px;
  background: #1d2740;
  color: #eef3ff;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.knopf:hover { background: #2a3550; }
.knopf:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- numpad */

/* Hidden on anything with a real keyboard; the `touch` class is set from JS
   by capability, not by screen width. */
.numpad { display: none; }

body.touch .numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 300px;
  margin: 0 auto 6px;
}
body.touch .numpad button {
  padding: 10px 0;
  border: 2px solid #3a4763;
  border-radius: 10px;
  background: #1d2740;
  color: #eef3ff;
  font: inherit;
  font-size: 23px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;      /* no double-tap zoom, no 300ms delay */
  user-select: none;
}
body.touch .numpad button:active { background: #2f8fb3; }
body.touch .numpad .neben { font-size: 21px; color: #9fb0d0; }

/* The pad already takes a good share of a phone screen, so give the rest
   back: smaller slots, tighter margins. */
body.touch { padding: 8px 8px 10px; }
body.touch .slots { margin: 8px 0; gap: 10px; }
body.touch .slot { width: 46px; height: 54px; font-size: 28px; }
body.touch h1 { display: none; }        /* the HUD says what this is */
body.touch .hud { gap: 12px; padding: 6px 10px; margin-bottom: 6px; }
body.touch .hud b { font-size: 16px; }
body.touch .hud .etikett { font-size: 10px; }
body.touch .hud em { display: none; }   /* topic name costs a whole line */
body.touch .hilfe { display: none; }   /* keyboard hints mean nothing here */

@media (prefers-reduced-motion: reduce) {
  .slot { transition: none; }
}