
/* ===== Unified control system v1: Prolog + Mission 1 ===== */
:root{
  --ctl-yellow-1:#ffe56b;
  --ctl-yellow-2:#ffc928;
  --ctl-yellow-shadow:#d6a200;
  --ctl-blue:#0e4e84;
  --ctl-blue-dark:#083a65;
  --ctl-blue-light:#eaf4fb;
  --ctl-border:#9fcff0;
  --ctl-text:#173f6b;
  --ctl-radius-pill:999px;
  --ctl-radius:18px;
}
.btn,
.big-action,
.prolog-open-button,
.enter-world,
#mission1Start,
.next-step,
.secondary-action,
.nav-button{
  font-family:inherit;
  font-weight:900;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover,
.big-action:hover,
.prolog-open-button:hover,
.enter-world:hover,
#mission1Start:hover,
.next-step:hover,
.secondary-action:hover,
.nav-button:hover{
  filter:brightness(1.03);
}
.btn:active,
.big-action:active,
.prolog-open-button:active,
.enter-world:active,
#mission1Start:active,
.next-step:active,
.secondary-action:active,
.nav-button:active{
  transform:translateY(2px);
}

/* Main CTA */
.big-action,
.prolog-open-button,
.enter-world,
#mission1Start,
.btn.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:16px 34px;
  border:0;
  border-radius:var(--ctl-radius-pill);
  background:linear-gradient(180deg,var(--ctl-yellow-1),var(--ctl-yellow-2));
  color:#4a3500;
  box-shadow:0 7px 0 var(--ctl-yellow-shadow),0 12px 22px rgba(0,0,0,.12);
  text-decoration:none;
  cursor:pointer;
  font-size:1.08rem;
}
.big-action:disabled,
.btn.primary:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* Secondary actions */
.btn.secondary,
.secondary-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:12px 24px;
  border:2px solid var(--ctl-border);
  border-radius:var(--ctl-radius);
  background:#fff;
  color:var(--ctl-text);
  box-shadow:0 4px 10px rgba(20,80,120,.08);
  text-decoration:none;
  cursor:pointer;
}

/* Map button */
.nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:18px;
  background:#fff;
  color:var(--ctl-text);
  border:1px solid #d4e7f5;
  box-shadow:0 4px 10px rgba(20,80,120,.12);
  text-decoration:none;
}

/* Header prev/next buttons */
.header-step-button,
#previousStep,
#followingStep{
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  border:0!important;
  background:var(--ctl-blue)!important;
  color:#fff!important;
  box-shadow:0 4px 10px rgba(0,0,0,.18)!important;
  font-size:1.3rem!important;
  cursor:pointer!important;
}
.header-step-button:hover,
#previousStep:hover,
#followingStep:hover{
  background:var(--ctl-blue-dark)!important;
}
.header-step-button:disabled,
#previousStep:disabled,
#followingStep:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}

/* Answer tiles */
.choice-grid button,
.scored button,
.activity-card button:not(.big-action):not(.btn):not(.header-step-button),
.mission-tile,
.answer-tile{
  border:2px solid var(--ctl-border);
  border-radius:16px;
  background:#fff;
  color:var(--ctl-text);
  box-shadow:0 3px 8px rgba(20,80,120,.06);
}
.choice-grid button:hover,
.scored button:hover,
.activity-card button:not(.big-action):not(.btn):not(.header-step-button):hover{
  border-color:#5eb2e7;
  transform:translateY(-1px);
}
.correct,
.is-correct,
button.correct{
  background:#e9fff1!important;
  border-color:#2ebd67!important;
}
.wrong,
.is-wrong,
button.wrong{
  background:#fff0f0!important;
  border-color:#e05a5a!important;
}

/* Keep start CTA consistent and centered */
#mission1Start,
.prolog-open-button,
.enter-world{
  width:min(650px,82%);
  margin:18px auto 22px;
}

/* Read-aloud stays compact */
button[id*="read"],
.read-button,
.tts-button{
  border-radius:14px!important;
  min-height:44px!important;
  padding:10px 16px!important;
}

/* ===== Internet a komunikace · standard wide yellow action controls (M8–M9) ===== */
body[data-page^="internet-mise8-"] .btn.primary,
body[data-page^="internet-mise9-"] .btn.primary,
body[data-page^="internet-mise10-"] .btn.primary{
  width:100%!important;
  max-width:980px!important;
  min-height:52px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:12px 24px!important;
  text-align:center;
  justify-content:center;
  align-items:center;
  font-size:19px!important;
  line-height:1.3!important;
}

/* ===== Final production harmonization · Internet a komunikace ===== */
body.lesson-page,
body.lesson-page button,
body.lesson-page input,
body.lesson-page select,
body.lesson-page textarea{
  font-family:"Segoe UI",Arial,sans-serif;
}

/* M11–M12 use the same primary CTA geometry as the preceding missions. */
body[data-page^="internet-mise11-"] .btn.primary,
body[data-page^="internet-mise12-"] .btn.primary{
  width:100%!important;
  max-width:980px!important;
  min-height:52px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:12px 24px!important;
  text-align:center;
  justify-content:center;
  align-items:center;
  font-size:19px!important;
  line-height:1.3!important;
}

/* Mission 13 is a single continuous exam and uses custom semantic classes.
   Keep those controls visually aligned with the common control language. */
body .start,
body .check,
body .continue,
body .mapbtn{
  font-family:inherit;
  font-weight:900;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
body .start:hover,
body .check:hover,
body .continue:hover,
body .mapbtn:hover{filter:brightness(1.03)}
body .start:active,
body .check:active,
body .continue:active,
body .mapbtn:active{transform:translateY(2px)}
