/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #EEF1F6;
  --white:  #FFFFFF;
  --text:   #2C2C2C;
  --muted:  #9A9A9A;
  --shadow: 0 4px 24px rgba(0,0,0,.09);
  --r:      18px;
  --r-sm:   10px;

  /* Operations */
  --add-bg:  #D0EDDA; --add:  #2A7A3A; --add-bd:  #A6D5B5;
  --sub-bg:  #FAD7DA; --sub:  #B83232; --sub-bd:  #F0AAAE;
  --mul-bg:  #CEE5F7; --mul:  #1456A0; --mul-bd:  #9EC8E8;
  --mix-bg:  #E8D6F5; --mix:  #6A2FA0; --mix-bd:  #CCA8E8;
  --div-bg:  #FFFBD0; --div:  #8A7000; --div-bd:  #E8DA58;
  --clk-bg:  #D0F2EE; --clk:  #1A7A6A; --clk-bd:  #8AD4CC;
  --rel-bg:  #FDE0EC; --rel:  #B02868; --rel-bd:  #F0A0C8;

  /* Buttons */
  --btn:   #6B9FD4;
  --btn-h: #4F83BA;
}

body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 64px;
}

/* ── Confetti canvas ──────────────────────────────────────────── */
#confetti-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ── Utility ──────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Views ────────────────────────────────────────────────────── */
.view      { display: none; width: 100%; max-width: 1000px; }
.view-wide { max-width: 820px; }
.view.active { display: block; }

/* ── Card ─────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--r);
  padding: 32px 28px;
  box-shadow: var(--shadow);
}

h1 { font-size: 2rem; text-align: center; margin-bottom: 8px; letter-spacing: -.01em; }
.app-intro { text-align: center; color: var(--muted); font-size: .95rem; margin: 0 0 30px; }
h2 { font-size: 1.35rem; margin-bottom: 14px; letter-spacing: -.01em; }

.section-title    { margin-bottom: 4px; }
.section-subtitle { color: var(--muted); font-size: .9rem; margin: 0 0 20px; }
.section-divider  { border: none; border-top: 1px solid #E0E0E0; margin: 28px 0; }

/* ── Setup form ───────────────────────────────────────────────── */
.field-group { margin-bottom: 22px; }

.field-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 9px;
}

.inline-inputs { display: flex; align-items: center; gap: 10px; }
.sep      { color: var(--muted); font-weight: 500; }
.sep-note { color: var(--muted); font-size: .82rem; }

input[type="number"],
input[type="text"] {
  padding: 10px 14px;
  border: 2px solid #E0E0E0;
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: #FAFAFA;
  width: 100px;
  outline: none;
  transition: border-color .15s;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: .4; }
input[type="number"]:focus,
input[type="text"]:focus { border-color: var(--btn); }

/* Operation toggles */
.op-toggles { display: flex; gap: 10px; flex-wrap: wrap; }

.op-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  user-select: none;
  transition: opacity .15s;
}
.op-toggle input { cursor: pointer; accent-color: currentColor; }
.op-toggle.unchecked { opacity: .45; }

.op-toggle.op-add      { background: var(--add-bg); color: var(--add); border-color: var(--add-bd); }
.op-toggle.op-sub      { background: var(--sub-bg); color: var(--sub); border-color: var(--sub-bd); }
.op-toggle.op-mul      { background: var(--mul-bg); color: var(--mul); border-color: var(--mul-bd); }
.op-toggle.op-div      { background: var(--div-bg); color: var(--div); border-color: var(--div-bd); }
.op-toggle.op-clk-read { background: var(--clk-bg); color: var(--clk); border-color: var(--clk-bd); }
.op-toggle.op-clk-set  { background: var(--clk-bg); color: var(--clk); border-color: var(--clk-bd); }
.op-toggle.op-clk-text { background: var(--clk-bg); color: var(--clk); border-color: var(--clk-bd); }
.op-toggle.op-rel      { background: var(--rel-bg); color: var(--rel); border-color: var(--rel-bd); }

/* Radio options */
.radio-group { display: flex; flex-direction: column; gap: 9px; }
.radio-opt   { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .95rem; }
.radio-opt em { color: var(--muted); font-style: normal; font-size: .82rem; }
.radio-opt input { cursor: pointer; accent-color: var(--btn); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-row { display: flex; gap: 10px; margin-top: 24px; }

.btn {
  flex: 1;
  padding: 13px 20px;
  border: none;
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-start { background: var(--btn); color: #fff; }
.btn-start:hover { background: var(--btn-h); }

.btn-ghost { background: #E6E6E6; color: #555; }
.btn-ghost:hover { background: #D8D8D8; }

.btn-sm   { flex: none; padding: 8px 16px; font-size: .85rem; margin-top: 0; }

.btn-check {
  flex: none;
  padding: 12px 22px;
  margin-top: 0;
  background: rgba(0,0,0,.16);
  color: var(--text);
  font-size: 1rem;
}
.btn-check:hover:not(:disabled) { background: rgba(0,0,0,.24); }

/* ── Problem card ─────────────────────────────────────────────── */
.problem-card {
  border: 3px solid transparent;
  transition: background .35s, border-color .35s;
}

.practice-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.practice-progress {
  flex: 1;
  min-width: 0;
}

.btn-exit {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(0,0,0,.35);
  cursor: pointer;
  border-radius: 6px;
  margin-top: 2px;
}
.btn-exit:hover { color: rgba(0,0,0,.65); background: rgba(0,0,0,.06); }
.problem-card.op-add { background: var(--add-bg); border-color: var(--add-bd); }
.problem-card.op-sub { background: var(--sub-bg); border-color: var(--sub-bd); }
.problem-card.op-mul { background: var(--mul-bg); border-color: var(--mul-bd); }
.problem-card.op-div { background: var(--div-bg); border-color: var(--div-bd); }
.problem-card.op-mix { background: var(--mix-bg); border-color: var(--mix-bd); }
.problem-card.op-clk { background: var(--clk-bg); border-color: var(--clk-bd); }
.problem-card.op-rel { background: var(--rel-bg); border-color: var(--rel-bd); }

/* Progress */
.prog-bar {
  height: 7px;
  background: rgba(0,0,0,.1);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
  margin-bottom: 4px;
}
.prog-fill {
  height: 100%;
  background: rgba(0,0,0,.22);
  border-radius: 4px;
  transition: width .4s ease;
}
.prog-label {
  text-align: right;
  font-size: .78rem;
  color: rgba(0,0,0,.4);
  margin-bottom: 28px;
}

/* Problem expression */
.problem-display {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}
.equals { font-weight: 400; }
.qmark  { opacity: .35; }

/* Coloured operator signs inside the expression */
.op-sign          { font-weight: 900; }
.op-sign.op-add   { color: var(--add); }
.op-sign.op-sub   { color: var(--sub); }
.op-sign.op-mul   { color: var(--mul); }
.op-sign.op-div   { color: var(--div); }

/* ── Analog clock ─────────────────────────────────────────────── */
.clock-prompt {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(0,0,0,.65);
  margin-bottom: 14px;
}

/* Large Hungarian text description for clk-text mode */
.clock-text-desc {
  text-align: center;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 18px;
  padding: 14px 10px;
  background: rgba(0,0,0,.06);
  border-radius: var(--r-sm);
}

.clock-face {
  display: block;
  margin: 0 auto 14px;
  width: 220px;
  height: 220px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.12));
}

.clock-face.interactive { cursor: crosshair; }

/* Clock read — answer inputs */
.clock-answer-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.time-inputs {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.time-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.time-label {
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(0,0,0,.45);
}

.time-split {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-colon {
  font-size: 1.6rem;
  font-weight: 700;
  color: #555;
  line-height: 1;
  margin-bottom: 2px;
}

.time-split input[type="number"] {
  width: 54px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  padding: 12px 6px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.time-split input[type="number"]::-webkit-inner-spin-button,
.time-split input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.clock-answer-row .btn-check {
  width: 100%;
  padding: 12px;
}

.clock-step-hint {
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(0,0,0,.4);
  margin-bottom: 10px;
  min-height: 20px;
}

/* Disambiguation prompt */
.clock-disambig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,.06);
  border-radius: var(--r-sm);
  font-size: .88rem;
  font-weight: 600;
}

/* Clock action buttons (Következő / Kész) */
.clock-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.clock-actions .btn { margin-top: 0; }

/* ── Tries dots ───────────────────────────────────────────────── */
.tries-row { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.try-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  transition: background .25s, transform .25s;
}
.try-dot.on   { background: rgba(0,0,0,.38); }
.try-dot.off  { background: rgba(0,0,0,.1); transform: scale(.7); }

/* ── Math answer row ──────────────────────────────────────────── */
.answer-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* Quotient + optional remainder side by side */
.answer-inputs {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.answer-inputs > input[type="number"] {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 12px;
}

/* Remainder field (shown only for division problems) */
.remainder-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.rem-label {
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(0,0,0,.45);
  white-space: nowrap;
}
.remainder-group input[type="number"] {
  width: 90px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 12px 8px;
}

.answer-row .btn-check {
  width: 100%;
  padding: 12px;
}

/* Feedback */
.feedback-msg {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  min-height: 30px;
  color: rgba(0,0,0,.55);
}

/* Shake animation */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-9px); }
  40%     { transform: translateX(9px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}
.shake { animation: shake .38s ease; }

/* ── Summary ──────────────────────────────────────────────────── */
.summary-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.s-box {
  padding: 22px 16px;
  border-radius: var(--r-sm);
  text-align: center;
}
.s-box.correct { background: var(--add-bg); color: var(--add); }
.s-box.wrong   { background: var(--sub-bg); color: var(--sub); }
.s-num { font-size: 3rem; font-weight: 800; line-height: 1; }
.s-lbl { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; }

.summary-table-wrap { overflow-x: auto; margin-bottom: 6px; }

/* ── History ──────────────────────────────────────────────────── */
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.history-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

.h-stat {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 700;
}
.h-stat.total { background: #EBEBEB; color: #555; }
.h-stat.right { background: var(--add-bg); color: var(--add); }
.h-stat.wrong { background: var(--sub-bg); color: var(--sub); }

.history-table-wrap { overflow-x: auto; }

/* ── Tables ───────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }

th {
  text-align: left;
  padding: 9px 12px;
  background: #F4F4F4;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}

td { padding: 9px 12px; border-bottom: 1px solid #F0F0F0; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFAFA; }

/* Operation color labels */
.op-add      { color: var(--add); font-weight: 700; }
.op-sub      { color: var(--sub); font-weight: 700; }
.op-mul      { color: var(--mul); font-weight: 700; }
.op-mix      { color: var(--mix); font-weight: 700; }
.op-div      { color: var(--div); font-weight: 700; }
.op-clk      { color: var(--clk); font-weight: 700; }
.op-clk-read { color: var(--clk); font-weight: 700; }
.op-clk-set  { color: var(--clk); font-weight: 700; }
.op-clk-text { color: var(--clk); font-weight: 700; }
.op-rel      { color: var(--rel); font-weight: 700; }

.r-ok   { color: var(--add); font-weight: 700; }
.r-fail { color: var(--sub); font-weight: 700; }

.date-cell { color: var(--muted); font-size: .8rem; }
.empty-msg { text-align: center; padding: 48px 16px; color: var(--muted); font-size: 1rem; }

/* ── Relation mode ────────────────────────────────────────────── */
.rel-qmark {
  color: var(--rel);
  opacity: .55;
}

.rel-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.rel-btn {
  flex: 1;
  font-size: 2.2rem;
  font-weight: 900;
  padding: 14px 8px;
  background: var(--rel-bg);
  color: var(--rel);
  border: 2px solid var(--rel-bd);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
}
.rel-btn:hover:not(:disabled) { opacity: .72; }
.rel-btn:active:not(:disabled) { transform: scale(.95); }
.rel-btn:disabled { opacity: .25; cursor: not-allowed; transform: none; }