/* A calm first path for children: recognise a picture, choose, then try. */
:root {
  --child-green:#28765c;
  --child-green-light:#eef8f1;
  --child-gold:#a66a10;
  --child-gold-light:#fff2cf;
}

body {background:#fffcf6;}
main {min-width:0;}
header {height:auto;min-height:70px;padding-top:12px;padding-bottom:12px;}
.brand {flex-wrap:wrap;row-gap:3px;line-height:1.3;}
.intro h1 {max-width:100%;overflow-wrap:anywhere;}
.intro>p {line-height:1.5;}
.operation-switch {background:#fff;border-color:#d5e1eb;}
.operation-switch button {min-height:70px;border-radius:12px;}
.operation-switch button.active {background:#e8f2ff;}
.operation-switch .operation-symbol {display:grid;place-items:center;flex:none;width:30px;height:30px;min-height:30px;}
.operation-switch .operation-symbol svg {display:block;width:30px;height:30px;fill:currentColor;}

/* The words always accompany the pictures; colour is an extra cue. */
.tabs.child-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:24px;
  padding:0;
  border:0;
}
.tabs.child-tabs:has([data-tab="trainer"]) {grid-template-columns:repeat(4,minmax(0,1fr));}
.child-tabs button {
  --child-tab-color:#246b55;
  --child-tab-fill:#eef8f1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  min-height:90px;
  margin:0;
  padding:13px 8px;
  border:2px solid #dce5ed;
  border-radius:16px;
  background:#fff;
  color:#3f5971;
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
.child-tabs [data-tab="train"] {--child-tab-color:#1757a5;--child-tab-fill:#edf4ff;}
.child-tabs [data-tab="test"] {--child-tab-color:#77519b;--child-tab-fill:#f5effb;}
.child-tabs [data-tab="dojo"] {--child-tab-color:#9a5c16;--child-tab-fill:#fff5e5;}
.child-tabs [data-tab="trainer"] {--child-tab-color:#087b72;--child-tab-fill:#eaf7f3;grid-column:auto;}
.child-tabs button .nav-icon {
  display:block;
  flex:none;
  width:30px;
  height:30px;
  margin:0;
  color:var(--child-tab-color);
}
.child-tabs button>span {display:block;margin:0;font:inherit;color:inherit;}
.child-tabs button.active {
  border-color:var(--child-tab-color);
  background:var(--child-tab-fill);
  color:var(--child-tab-color);
  box-shadow:0 3px 0 color-mix(in srgb,var(--child-tab-color) 16%,transparent);
}
@media(hover:hover) and (pointer:fine) {
  .child-tabs button:hover {background:var(--child-tab-fill);}
}

/* One inviting start, with detail kept in the learning areas below. */
.daily-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:22px;
  border-color:#e7d9af;
  border-radius:20px;
  background:#fffaf0;
}
.daily-symbol {
  display:grid;
  place-items:center;
  flex:none;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--child-gold-light);
  color:var(--child-gold);
  font-size:32px;
  line-height:1;
}
.daily-symbol svg {display:block;width:32px;height:32px;}
.daily-copy {min-width:0;}
.daily-copy .daily-eyebrow {margin:0 0 5px;font-size:.8125rem;font-weight:600;line-height:1.4;color:var(--muted);}
.daily-card h2 {font-size:1.4rem;line-height:1.35;overflow-wrap:anywhere;}
.daily-card #daily-goal {margin:5px 0;font-size:1rem;line-height:1.5;font-weight:400;}
.daily-card #daily-method {font-size:.9375rem;line-height:1.5;}
.daily-card .daily-actions {min-width:140px;width:auto;}
.daily-card .primary {min-height:54px;}

/* The main field remains spacious; optional explanations are closed steps. */
.visual-card,.sharing-card {background:#fff;border-color:#cbded4;border-radius:20px;}
.learn-prompt,.child-hint {
  margin:0 0 16px;
  color:#3e614f;
  font-size:1.0625rem;
  line-height:1.5;
}
.learn-prompt {padding:12px 15px;border-radius:12px;background:var(--child-green-light);}
.learn-controls .row-picker {flex-wrap:wrap;gap:8px 14px;}
.learn-controls .row-picker>span {font-size:1.0625rem;}
.row-picker select {font-size:1.125rem;border-radius:12px;}
.card-top {font-size:1rem;line-height:1.5;}
.visual-card #equation {margin-top:16px;}
.stepper {padding:14px 0 6px;}
.stepper label {display:flex;flex-wrap:wrap;align-items:center;gap:10px;white-space:normal;font-size:1rem;}
.stepper #factor-label {display:inline;max-width:100%;white-space:normal;}
#factor-value {
  display:inline-grid;
  place-items:center;
  min-width:44px;
  min-height:38px;
  padding:2px 10px;
  border:1px solid #b5d4c2;
  border-radius:12px;
  background:var(--child-green-light);
  color:#20593e;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.4;
}
.stepper #factor {min-height:48px;cursor:pointer;}
.swap-controls .secondary {border-radius:12px;}
.fact-family {padding-top:10px;margin-top:16px;}
.fact-family>summary,.tip>summary {font-size:1.0625rem;font-weight:600;line-height:1.5;}
.fact-family h4 {font-size:1rem;line-height:1.5;}
.family-equations p {white-space:normal;overflow-wrap:anywhere;}
.tip {margin-top:14px;}
.tip>summary {color:#28694d;}
.tip #tip {max-width:50ch;font-size:1.0625rem;line-height:1.6;}
.tip .tips-more-link a {display:inline-block;min-height:48px;padding:9px 0;line-height:1.5;}

/* Touchable controls for the learning flow; game boards keep their own sizes. */
:is(.operation-switch,.child-tabs,.daily-card,#learn,#train,#test,.quiz,#results,.trainer,dialog,footer) button,
:is(#learn,#train,#test,.quiz,.trainer,dialog) select {
  min-height:48px;
}
#learn .sharing-coin {flex-basis:48px;width:48px;height:48px;min-width:48px;}
.rows button {height:auto;min-height:48px;padding:6px 2px;border-radius:12px;overflow-wrap:anywhere;}
summary {min-height:48px;}
:is(.daily-card,#learn,#train,#test,.quiz,#results,.trainer,dialog) :is(.primary,.secondary) {border-radius:12px;}
:is(.daily-card,#learn,#train,#test,.quiz,#results,.trainer,dialog) .primary {font-weight:700;}
.mode-options {flex-wrap:wrap;}
.mode-options span {min-height:48px;line-height:1.5;}
.settings {background:#f0f6fb;border:1px solid #d5e4f3;border-radius:16px;}
.settings label {min-width:0;max-width:100%;}
.settings select {width:100%;}

/* A visible answer label makes the next action clear without instructions. */
.quiz {background:#fff;border:1px solid #c7dced;border-radius:22px;}
.quiz h2 {font-variant-numeric:tabular-nums;line-height:1.3;overflow-wrap:anywhere;}
.quiz .answer-label {display:block;width:100%;margin:0 0 7px;color:#3f5971;font-size:1.0625rem;font-weight:600;line-height:1.5;}
.quiz #answer-help {margin:8px 0 0;font-size:1rem;line-height:1.5;color:#526b80;}
.quiz #answer {min-height:58px;border-width:2px;border-radius:12px;}
.quiz #keypad-toggle {width:48px;min-width:48px;min-height:52px;border-radius:12px;}
.number-pad {width:230px;gap:8px;padding:10px;border-radius:16px;}
.number-pad button {min-height:54px;border-radius:10px;}
.number-pad [data-key="clear"] {font-size:1rem;}
#feedback {min-height:1.4em;font-size:clamp(1.5rem,4vw,2rem);font-weight:700;line-height:1.4;overflow-wrap:anywhere;}
footer>a {min-width:0;max-width:100%;overflow-wrap:anywhere;}
.dojo-heading>div {min-width:0;}
.dojo-heading :is(h2,p) {overflow-wrap:anywhere;}

@media(max-width:750px) {
  .daily-card {grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:18px;}
  .daily-card .daily-actions {grid-column:1/-1;min-width:0;width:100%;}
  .daily-card .daily-actions button {width:100%;}
  .daily-symbol {width:50px;height:50px;font-size:29px;}
  .child-tabs button {min-height:90px;}
}
@media(max-width:600px) {
  .tabs.child-tabs,.tabs.child-tabs:has([data-tab="trainer"]) {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .child-tabs [data-tab="trainer"] {grid-column:auto;min-height:90px;}
  .child-tabs button {padding:12px 8px;font-size:1.0625rem;}
  .daily-card h2 {font-size:1.3rem;}
  .rows {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
}
@media(max-width:400px) {
  .brand {max-width:100%;font-size:17px;letter-spacing:-.7px;}
  .brand-icon {flex:none;margin-right:8px;}
  .operation-switch button {padding:8px 3px;font-size:1rem;overflow-wrap:anywhere;}
  .visual-card {padding:20px;}
  .daily-card {padding:16px;gap:10px;}
  .daily-symbol {width:44px;height:44px;font-size:26px;}
  .daily-card h2 {font-size:1.2rem;}
  .learn-controls .row-picker select {flex-basis:100%;}
  .quiz {padding:20px 12px;}
  .quiz #answer {width:138px;}
  .family-equations {grid-template-columns:1fr;}
}

/* The current calculation is the visual focus, with room for long facts. */
.visual-card #equation {
  font-size:clamp(30px,6.5vw,64px);
  font-weight:800;
  line-height:1.2;
  color:#123a63;
  margin:22px 0 26px;
  font-variant-numeric:tabular-nums;
}
.quiz #question,.trainer #trainer-question {
  font-size:clamp(38px,7vw,72px);
  font-weight:800;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.sharing-card .sharing-equation,.mixed-equation {
  font-size:clamp(32px,5.5vw,52px);
  font-weight:800;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}

/* Kleine und weitere Malreihen getrennt anbieten. */
.rows.grouped-rows {display:block;}
.row-group-heading {display:block;margin-bottom:8px;font-weight:700;}
.row-selection-grid {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;}
.more-rows {margin-top:14px;}
.more-rows summary {min-height:48px;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #8ab3df;border-radius:12px;background:#f5faff;color:var(--ink);font-weight:700;cursor:pointer;list-style:none;}
.more-rows summary::-webkit-details-marker {display:none;}
.more-rows summary::before {content:'▸';font-size:1.1em;}
.more-rows[open] summary::before {content:'▾';}
.more-rows .row-selection-grid {margin-top:10px;}
@media(max-width:600px) {.row-selection-grid {grid-template-columns:repeat(4,minmax(0,1fr));}}