/* MataMath - sci-fi console skin.
 *
 * Built to the brief "sci-fi layout, futuristic, metallic colours, creative
 * game interface". The vocabulary is consistent throughout so it reads as one
 * machine rather than a set of themed widgets:
 *
 *   - brushed-metal panels: a light top bevel, dark body, faint bottom sheen
 *   - chamfered corners (clip-path), never rounded ones
 *   - corner brackets on anything that frames content
 *   - one cyan accent that glows, one amber accent that does not
 *   - uppercase, wide-tracked labels; tabular monospace numerals
 *
 * No external fonts or images - the page still has to run from file://.
 */

:root {
  --bg:          #05070d;
  --bg-2:        #0a0e18;
  --panel-top:   #3d4860;
  --panel:       #1a2130;
  --panel-2:     #131926;
  --edge:        #48566f;
  --edge-dim:    #2a3348;
  --cyan:        #38e1ff;
  --cyan-dim:    #1c7f99;
  --amber:       #ffb03a;
  --danger:      #ff4d5e;
  --text:        #dbe6f5;
  --text-dim:    #7d8ba3;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 10px 16px 14px;
  color: var(--text);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(120% 80% at 50% 0%, #101a2b 0%, var(--bg-2) 45%, var(--bg) 100%);
  background-attachment: fixed;
}

/* A faint engineering grid over the whole console. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(56, 225, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 225, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
}

.huelle { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }

/* --------------------------------------------------------------- shapes */

/* Cut corners, top-left and bottom-right - the house shape. */
.chamfer,
.hud,
.overlay,
.slot,
.knopf,
.levelwahl,
.ton,
.numpad button {
  clip-path: polygon(
    var(--cut, 10px) 0, 100% 0,
    100% calc(100% - var(--cut, 10px)), calc(100% - var(--cut, 10px)) 100%,
    0 100%, 0 var(--cut, 10px));
}

/* Brushed metal: bright bevel, dark body, faint sheen at the foot. */
.metal {
  background:
    linear-gradient(180deg,
      var(--panel-top) 0,
      var(--panel) 2px,
      var(--panel-2) 55%,
      #1b2333 100%);
}

/* ------------------------------------------------------------------ head */

h1 {
  font-size: 16px;
  letter-spacing: 0.22em;
  margin: 0 0 8px;
  color: var(--cyan);
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(56, 225, 255, 0.5);
}
h1 small {
  margin-left: 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-shadow: none;
}

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

.hud {
  --cut: 12px;
  display: flex;
  gap: 0;
  align-items: center;
  padding: 8px 16px;
  margin-bottom: 10px;
  background:
    linear-gradient(180deg, var(--panel-top) 0, var(--panel) 2px,
                    var(--panel-2) 55%, #1b2333 100%);
  box-shadow: inset 0 0 24px rgba(56, 225, 255, 0.06);
}
.hud > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 18px;
  border-right: 1px solid rgba(72, 86, 111, 0.5);   /* segment dividers */
}
.hud > div:first-child { padding-left: 0; }
.hud > div:last-child {
  margin-left: auto;
  border-right: 0;
  padding-right: 0;
  gap: 14px;
}
.etikett {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hud b {
  font-family: var(--mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 10px rgba(56, 225, 255, 0.35);
}
.hud em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-dim);
}
.herzen {
  color: var(--danger) !important;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255, 77, 94, 0.6) !important;
}
.combo {
  color: var(--amber) !important;
  text-shadow: 0 0 12px rgba(255, 176, 58, 0.5) !important;
}

.ton {
  --cut: 7px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, #2c374d 0, #1a2130 100%);
  color: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 7px 11px;
  cursor: pointer;
}
.ton:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(56, 225, 255, 0.3); }

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

.feldbox { position: relative; width: 100%; }

canvas {
  display: block;
  background: #070b14;
  border: 1px solid rgba(72, 86, 111, 0.55);
}

/* Bracket corners around the viewport - drawn in CSS so the canvas keeps
   every pixel for gameplay. */
.feldbox::before,
.feldbox::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  border: 2px solid var(--cyan);
  filter: drop-shadow(0 0 6px rgba(56, 225, 255, 0.6));
}
.feldbox::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.feldbox::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.banner {
  position: absolute;
  top: 32%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(56, 225, 255, 0.75), 0 2px 12px #000;
  pointer-events: none;
}
.banner span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255, 176, 58, 0.6);
}

/* -------------------------------------------------------------- overlays */

.overlay {
  --cut: 18px;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(5, 8, 14, 0.97));
  box-shadow: inset 0 0 60px rgba(56, 225, 255, 0.07);
}
/* Horizontal scanlines, the cheapest possible "this is a screen" cue. */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(56, 225, 255, 0.05) 0 1px, transparent 1px 4px);
}
.overlay > * { position: relative; }
.overlay h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(56, 225, 255, 0.6);
}
.overlay p { margin: 0; max-width: 470px; color: #b6c4da; }
.overlay .klein { font-size: 13px; color: var(--text-dim); }
.overlay .ruf {
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.overlay[hidden] { display: none; }

kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  background: #1c2434;
  font: inherit;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cyan);
}

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

/* The fixed answer length is the mechanic's keystone, so the interface says
   it out loud: N sockets to fill, no guessing how long the answer is. */
.slots {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 16px 0 10px;
}
.slot {
  --cut: 11px;
  width: 60px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #202b3d 0, #101725 70%, #16202f 100%);
  box-shadow: inset 0 0 0 2px #2793b0,
              inset 0 0 20px rgba(56, 225, 255, 0.16),
              0 0 12px rgba(56, 225, 255, 0.12);
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: box-shadow 0.1s, color 0.1s;
}
.slot.voll {
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--cyan),
              inset 0 0 26px rgba(56, 225, 255, 0.3),
              0 0 20px rgba(56, 225, 255, 0.35);
  text-shadow: 0 0 14px rgba(56, 225, 255, 0.9);
}
.slot.falsch {
  box-shadow: inset 0 0 0 2px var(--danger),
              inset 0 0 26px rgba(255, 77, 94, 0.35),
              0 0 20px rgba(255, 77, 94, 0.4);
}

.hilfe {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ---------------------------------------------------------- level picker */

.levelwahl {
  --cut: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 7px 9px;
  background: linear-gradient(180deg, #263049 0, #131926 100%);
  box-shadow: inset 0 0 0 1px var(--cyan-dim),
              inset 0 0 22px rgba(56, 225, 255, 0.1);
}
.levelwahl .name {
  min-width: 15em;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.levelwahl button {
  --cut: 8px;
  width: 42px;
  height: 42px;
  border: 0;
  background: linear-gradient(180deg, #38455e 0, #1b2333 60%, #222c3e 100%);
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--cyan);
  font: inherit;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.levelwahl button:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--cyan), 0 0 16px rgba(56, 225, 255, 0.35);
}
.levelwahl button:disabled { opacity: 0.28; cursor: default; }

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

.knopf {
  --cut: 14px;
  margin-top: 6px;
  padding: 13px 32px;
  border: 0;
  background: linear-gradient(180deg, #2a628a 0, #123c56 55%, #0e2c40 100%);
  box-shadow: inset 0 0 0 2px var(--cyan),
              inset 0 0 26px rgba(56, 225, 255, 0.22),
              0 0 22px rgba(56, 225, 255, 0.28);
  color: #eafaff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.knopf:hover {
  box-shadow: inset 0 0 0 2px var(--cyan),
              inset 0 0 34px rgba(56, 225, 255, 0.35),
              0 0 32px rgba(56, 225, 255, 0.45);
}
.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 {
  --cut: 9px;
  padding: 11px 0;
  border: 0;
  background: linear-gradient(180deg, #36425a 0, #1a2231 55%, #212b3d 100%);
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--text);
  font: inherit;
  font-family: var(--mono);
  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 {
  box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 20px rgba(56, 225, 255, 0.4);
  color: #fff;
}
body.touch .numpad .neben { font-size: 20px; color: var(--cyan-dim); }

/* The pad already takes a good share of a phone screen, so give the rest
   back: smaller sockets, 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: 26px; }
body.touch h1 { display: none; }        /* the HUD says what this is */
body.touch .hud { padding: 6px 10px; margin-bottom: 6px; }
body.touch .hud > div { padding: 0 10px; }
body.touch .hud b { font-size: 16px; }
body.touch .hud .etikett { font-size: 9px; letter-spacing: 0.12em; }
body.touch .hud em { display: none; }   /* topic name costs a whole line */
body.touch .hilfe { display: none; }    /* keyboard hints mean nothing here */
body.touch .feldbox::before,
body.touch .feldbox::after { width: 16px; height: 16px; }

/* A phone gives the overlay a fraction of the room a desktop does, and the
   start screen carries the most text of any of them. Scale the type down and
   let it scroll rather than letting the clip-path amputate the button.
   `safe center` keeps the heading reachable when content does overflow -
   plain centring pushes the top out of a scroll container's reach. */
body.touch .overlay {
  --cut: 12px;
  padding: 12px 14px;
  gap: 7px;
  justify-content: safe center;
  overflow-y: auto;
}
body.touch .overlay h2 { font-size: 18px; letter-spacing: 0.14em; }
body.touch .overlay p { font-size: 13px; line-height: 1.35; }
body.touch .overlay .klein { font-size: 11px; }
body.touch .knopf {
  --cut: 10px;
  font-size: 15px;
  padding: 10px 22px;
  letter-spacing: 0.1em;
}
body.touch .levelwahl { gap: 8px; padding: 5px 6px; }
body.touch .levelwahl .name { min-width: 0; font-size: 12px; }
body.touch .levelwahl button { width: 34px; height: 34px; font-size: 19px; }
/* Keyboard hints are noise on a device with no keyboard, and the long start
   explanation does not fit a phone panel - the digit sockets and the numpad
   teach the same thing by being visible. */
body.touch .tasten,
body.touch .erklaerung { display: none; }

body.touch .banner { font-size: 18px; }
body.touch .banner span { font-size: 12px; }

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

/* Footer: build stamp, deliberately quiet. It exists so a bug report from a
   classroom can name a version, not to be read while playing. */
.fusszeile {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.55;
}