:root {
  --bg-a: #08141f;
  --bg-b: #10283a;
  --panel: #0f2432d9;
  --panel-soft: #122d3fd9;
  --line: #2f4e63;
  --text: #f3f7f3;
  --muted: #a9becb;
  --accent: #22d3a5;
  --accent-2: #ffb347;
  --danger: #ff5d5d;
  --ok: #39e088;
  --radius: 16px;
  --tap-scale: 0.97;
  --wb-grid-size: 72px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: "Trebuchet MS", "Verdana", "Geneva", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, #16364a 0%, #08141f 45%),
    linear-gradient(150deg, #08141f 0%, #10283a 55%, #143145 100%);
  overflow: hidden;
  touch-action: manipulation;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.brand h1 {
  margin: 0;
  font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  letter-spacing: 0.03em;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: #ffdd8c;
}

.brand h1 span {
  color: var(--accent);
}

.brand p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hud-card {
  min-width: 72px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 10px;
  text-align: center;
}

.hud-card span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hud-card strong {
  display: block;
  font-size: 1rem;
}

.icon-btn {
  border: 1px solid var(--line);
  background: #12344a;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 44px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.canvas-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 52%) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.graph-pane {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 10%, #20475f 0%, #102839 42%, #08141f 100%);
  min-height: 0;
}

.mission-overlay {
  position: relative;
  width: 100%;
  border-radius: 14px;
  border: 1px solid #8f9fb0;
  background:
    linear-gradient(180deg, rgba(249, 251, 255, 0.96) 0%, rgba(238, 245, 252, 0.97) 100%);
  padding: 10px 14px;
  margin-bottom: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.mission-problem,
.mission-step,
.mission-prompt {
  margin: 0;
}

.mission-problem {
  color: #1d2a36;
  font-weight: 900;
  font-size: clamp(1.02rem, 2.25vw, 1.42rem);
  line-height: 1.28;
}

.mission-step {
  margin-top: 4px;
  color: #3e5b74;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.mission-prompt {
  margin-top: 6px;
  color: #1f3446;
  font-weight: 800;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  line-height: 1.28;
}

.mission-overlay #problemText {
  margin: 0;
  color: #1d2a36;
  font-weight: 900;
  font-size: clamp(1.02rem, 2.25vw, 1.42rem);
  line-height: 1.28;
  white-space: pre-line;
}

.mission-overlay #stepStatus {
  margin: 4px 0 0;
  color: #3e5b74;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.mission-overlay #stepPrompt {
  margin: 6px 0 0;
  color: #1f3446;
  font-weight: 800;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  line-height: 1.28;
}

.whiteboard-pane {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(11, 33, 47, 0.92);
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

.whiteboard-pane h2 {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffd88b;
}

.whiteboard-pane p {
  margin: 0;
  color: #c7dfec;
  line-height: 1.3;
  font-size: 0.9rem;
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

#flashOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 44, 44, 0.5);
  transition: opacity 0.12s linear;
}

#flashOverlay.flash-fail {
  opacity: 1;
}

.canvas-badges {
  position: absolute;
  top: 10px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.canvas-badges > div,
.daily-pill {
  border: 1px solid #33586f;
  border-radius: 999px;
  background: rgba(7, 20, 31, 0.75);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.84rem;
}

.daily-pill {
  position: absolute;
  right: 8px;
  top: 10px;
  max-width: 62%;
  text-align: right;
  z-index: 5;
}

.orientation-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(7, 20, 31, 0.85);
  border: 1px solid #33586f;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: #ffd88b;
  display: none;
}

.panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 10px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.controls-block {
  border: 1px solid #2f4e63;
  border-radius: 14px;
  background: rgba(11, 32, 46, 0.75);
  padding: 10px;
}

.controls-block h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffd88b;
}

#problemText,
#stepStatus,
#stepPrompt,
#hintText,
#feedback,
#dailyText {
  margin: 0 0 8px;
  line-height: 1.35;
}

#problemText {
  color: #deedf6;
}

#stepStatus {
  font-size: 0.85rem;
  color: #86b3ca;
}

#stepPrompt {
  font-weight: 700;
}

#hintText {
  min-height: 22px;
  color: #ffe1a6;
  background: rgba(75, 55, 18, 0.38);
  border: 1px solid rgba(255, 195, 94, 0.45);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
}

#feedback {
  min-height: 22px;
  font-weight: 700;
  color: #b8d8e8;
}

#feedback.feedback-ok {
  color: var(--ok);
}

#feedback.feedback-bad {
  color: #ff8f8f;
}

.input-area {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.field-block label {
  display: block;
  margin-bottom: 4px;
  color: #d2e3ee;
  font-size: 0.9rem;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(76px, 110px) 1fr;
  gap: 8px;
  align-items: center;
}

.field-row.single {
  grid-template-columns: 1fr;
}

input[type="number"],
input[type="text"] {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #3f667f;
  background: #0f3147;
  color: var(--text);
  font-size: 1rem;
  padding: 8px 10px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  min-height: 36px;
}

.choice-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.choice-btn {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #3f667f;
  background: #0f3147;
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
}

.choice-btn.is-active {
  background: #1a4f6c;
  border-color: var(--accent);
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.difficulty-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mode-btn,
.difficulty-btn,
.primary-btn,
.secondary-btn {
  border-radius: 12px;
  border: 1px solid #3e627b;
  background: #14364b;
  color: var(--text);
  font-weight: 800;
  font-size: 0.95rem;
  min-height: 48px;
  padding: 8px 10px;
}

.mode-btn.is-active,
.difficulty-btn.is-active {
  border-color: var(--accent);
  background: #215570;
}

.primary-btn {
  background: linear-gradient(160deg, #1a8f75 0%, #0f765d 100%);
  border-color: #46c9ad;
}

.primary-btn.alt {
  background: linear-gradient(160deg, #2c8fb4 0%, #1c6f8f 100%);
  border-color: #76c6e5;
}

.secondary-btn {
  background: #17384d;
}

.wb-toolbar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.wb-btn {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #3f667f;
  background: #103247;
  color: var(--text);
  font-weight: 800;
  font-size: 0.82rem;
}

.wb-btn.is-active {
  border-color: var(--accent);
  background: #1a4f6c;
}

.wb-btn.warn {
  border-color: #e58a8a;
  background: #5a2525;
}

#whiteboardCanvas {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
  border-radius: 12px;
  border: 1px solid #3f667f;
  background-color: #0f2b3a;
  background-image:
    linear-gradient(rgba(155, 205, 231, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 205, 231, 0.12) 1px, transparent 1px);
  background-size: var(--wb-grid-size) var(--wb-grid-size), var(--wb-grid-size) var(--wb-grid-size);
  background-position: 0 0, 0 0;
  touch-action: none;
}

button:active {
  transform: scale(var(--tap-scale));
}

.action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.action-row.single {
  grid-template-columns: 1fr;
}

button:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.skill-row {
  display: grid;
  grid-template-columns: 120px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.86rem;
}

.formula-builder {
  border: 1px solid #3f667f;
  border-radius: 12px;
  padding: 10px;
  background: rgba(10, 39, 56, 0.85);
  display: grid;
  gap: 10px;
}

.formula-preview {
  margin: 0;
  text-align: center;
  font-weight: 800;
  color: #d2ffe5;
  background: #0c2f43;
  border: 1px solid #3b6078;
  border-radius: 10px;
  padding: 8px;
}

.formula-row {
  display: grid;
  grid-template-columns: 42px minmax(72px, 92px) 1fr;
  gap: 8px;
  align-items: center;
}

.formula-row span {
  font-weight: 800;
  color: #ffdb90;
}

.formula-number {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid #3f667f;
  background: #0f3147;
  color: var(--text);
  font-size: 1rem;
  padding: 6px 8px;
}

.formula-sign-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.formula-sign {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #3f667f;
  background: #0f3147;
  color: var(--text);
  font-weight: 800;
  font-size: 1.05rem;
}

.formula-sign.is-active {
  background: #1a4f6c;
  border-color: var(--accent);
}

.skill-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  border: 1px solid #355a71;
  background: #0b2536;
  overflow: hidden;
}

.skill-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #18b68f, #66e28c);
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .canvas-wrap {
    min-height: 0;
  }
}

@media (max-width: 1023px) {
  body {
    overflow: auto;
  }

  .app {
    min-height: 100dvh;
    height: auto;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .canvas-wrap {
    grid-template-columns: minmax(220px, 50%) minmax(0, 1fr);
    height: 58dvh;
  }
}

@media (max-width: 900px) {
  .canvas-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, 35dvh) minmax(220px, 34dvh);
    height: auto;
  }

  #whiteboardCanvas {
    min-height: 220px;
  }

  .mission-overlay {
    padding: 9px 12px;
  }

  .mission-problem {
    font-size: clamp(0.94rem, 2.7vw, 1.18rem);
  }

  .mission-prompt {
    font-size: clamp(0.86rem, 2.2vw, 1.02rem);
  }

  .mission-overlay #problemText {
    font-size: clamp(0.94rem, 2.7vw, 1.18rem);
  }

  .mission-overlay #stepPrompt {
    font-size: clamp(0.86rem, 2.2vw, 1.02rem);
  }
}

@media (max-width: 720px) {
  .wb-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .difficulty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    padding: 10px;
  }

  .brand h1 {
    font-size: 1.25rem;
  }

  .hud {
    width: 100%;
  }

  .hud-card {
    flex: 1 1 30%;
  }
}

@media (orientation: portrait) and (max-width: 940px) {
  .orientation-hint {
    display: block;
  }
}