.tutorial-confirm-layer,
.tutorial-dialogue,
.tutorial-mentor-launcher {
  --tutorial-ink: #171a1a;
  --tutorial-paper: #e8ddc3;
  --tutorial-paper-deep: #cdbb94;
  --tutorial-copper: #b6773e;
  --tutorial-teal: #173f42;
  --tutorial-teal-deep: #092629;
  font-family: Literata,Georgia,"Times New Roman",serif;
}

.tutorial-confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 10, 11, .78);
  backdrop-filter: blur(8px);
}

.tutorial-confirm-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 34%) 1fr;
  width: min(900px, 94vw);
  min-height: 440px;
  overflow: hidden;
  color: var(--tutorial-paper);
  border: 1px solid rgba(218, 177, 111, .65);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(29, 76, 79, .96), rgba(7, 28, 31, .98)),
    var(--tutorial-teal-deep);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .62), inset 0 0 0 5px rgba(224, 193, 133, .06);
}

.tutorial-confirm-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(227, 198, 142, .18);
  border-radius: 10px;
}

.tutorial-confirm-portrait {
  align-self: end;
  width: 118%;
  max-height: 470px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(18px 10px 20px rgba(0, 0, 0, .45));
  transform: translateX(-6%);
}

.tutorial-confirm-copy {
  align-self: center;
  position: relative;
  z-index: 1;
  padding: 62px 64px 52px 28px;
}

.tutorial-kicker,
.tutorial-dialogue-name,
.tutorial-dialogue-eyebrow {
  display: block;
  color: #d69b5f;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
}

.tutorial-confirm-copy h2 {
  margin: 14px 0 16px;
  font-size: clamp(31px, 4vw, 51px);
  line-height: 1.03;
  font-weight: 600;
}

.tutorial-confirm-copy p {
  max-width: 540px;
  margin: 0;
  color: rgba(237, 226, 201, .82);
  font: 17px/1.65 Arial, sans-serif;
}

.tutorial-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.tutorial-action-primary,
.tutorial-action-secondary,
.tutorial-dialogue-next {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #c48c53;
  border-radius: 6px;
  color: #1c1812;
  background: linear-gradient(#e1bc78, #bd7c3f);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  font: 800 12px/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.tutorial-action-secondary {
  color: var(--tutorial-paper);
  border-color: rgba(222, 196, 145, .34);
  background: rgba(1, 12, 14, .32);
}

.tutorial-action-primary:disabled {
  opacity: .7;
  cursor: wait;
}

.tutorial-confirm-close,
.tutorial-dialogue-close {
  position: absolute;
  z-index: 3;
  top: 17px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--tutorial-paper);
  border: 1px solid rgba(223, 197, 146, .38);
  border-radius: 50%;
  background: rgba(3, 17, 19, .45);
  font: 25px/1 Arial, sans-serif;
  cursor: pointer;
}

.tutorial-dialogue {
  position: fixed;
  z-index: 100000;
  left: 26px;
  right: 26px;
  bottom: 22px;
  display: grid;
  grid-template-columns: minmax(150px, 250px) minmax(0, 780px);
  align-items: end;
  justify-content: center;
  pointer-events: none;
}

.tutorial-dialogue-mentor {
  position: relative;
  z-index: 2;
  width: 128%;
  max-height: 520px;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(12px 10px 18px rgba(0, 0, 0, .58));
  transform: translate(16%, 18px);
}

.tutorial-dialogue-box {
  position: relative;
  min-height: 205px;
  padding: 30px 34px 24px 62px;
  pointer-events: auto;
  color: var(--tutorial-ink);
  border: 2px solid #b77b40;
  border-radius: 10px;
  background:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,0)),
    var(--tutorial-paper);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .58), inset 0 0 0 5px rgba(65, 42, 20, .08);
}

.tutorial-dialogue-box::before {
  content: "";
  position: absolute;
  left: -18px;
  bottom: 55px;
  width: 32px;
  height: 32px;
  background: var(--tutorial-paper);
  border-left: 2px solid #b77b40;
  border-bottom: 2px solid #b77b40;
  transform: rotate(45deg);
}

.tutorial-dialogue-name { color: #805024; }
.tutorial-dialogue-eyebrow { margin-top: 18px; color: #2d6a6a; font-size: 12px; }
.tutorial-dialogue-box h2 { margin: 6px 42px 8px 0; font-size: clamp(25px, 3vw, 36px); line-height: 1.08; }
.tutorial-dialogue-box p { margin: 0; font: 16px/1.55 Arial, sans-serif; color: #45423c; }
.tutorial-dialogue-close { top: 14px; right: 14px; color: #4a321d; border-color: rgba(87, 52, 23, .3); background: rgba(117, 79, 40, .08); }

.tutorial-dialogue-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}

.tutorial-dialogue-dots { display: flex; gap: 7px; }
.tutorial-dialogue-dots i { width: 18px; height: 3px; background: rgba(70, 49, 29, .25); }
.tutorial-dialogue-dots i.is-active { background: #a56731; }
.tutorial-dialogue-next { min-height: 40px; padding-inline: 19px; }
.tutorial-dialogue-next.is-instruction {
  color: #6f6659;
  border-color: #aa9877;
  background: #d5c8ab;
  box-shadow: none;
  cursor: default;
}

.tutorial-target {
  position: relative !important;
  z-index: 99992 !important;
  outline: 4px solid #f2bd58 !important;
  outline-offset: 5px !important;
  box-shadow: 0 0 0 9px rgba(242,189,88,.2), 0 0 38px 14px rgba(242,189,88,.7) !important;
  animation: tutorial-target-pulse 1s ease-in-out infinite alternate !important;
}

.tutorial-target-label {
  position: fixed;
  z-index: 100002;
  padding: 9px 13px;
  color: #1b1710;
  border: 1px solid #ffe2a0;
  border-radius: 5px;
  background: linear-gradient(#f7cd79,#d99643);
  box-shadow: 0 8px 25px #0009;
  font: 800 13px/1 Arial,sans-serif;
  letter-spacing: .11em;
  pointer-events: none;
}

@keyframes tutorial-target-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.2); outline-color: #fff0ad; }
}

.tutorial-mentor-launcher {
  position: fixed;
  z-index: 99990;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  height: 58px;
  padding: 3px 14px 3px 3px;
  overflow: hidden;
  color: var(--tutorial-paper);
  border: 1px solid rgba(209, 156, 91, .76);
  border-radius: 30px;
  background: linear-gradient(135deg, #1c5555, #092629);
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  cursor: pointer;
}

.tutorial-mentor-launcher img { width: 50px; height: 58px; object-fit: cover; object-position: 50% 16%; }
.tutorial-mentor-launcher span { display: grid; text-align: left; }
.tutorial-mentor-launcher b { font: 700 15px/1.2 Literata,Georgia,"Times New Roman",serif; }
.tutorial-mentor-launcher small { opacity: .65; font: 10px/1.3 Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }

/* The API withholds turn actions until the scenario opens them. */
html.tutorial-script-locked .turn-indicator b {
  color: #d5ad68;
  animation: none !important;
}

/* Classic: original parchment, timber and warm brass. */
html[data-home-theme="classic"] .tutorial-confirm-card {
  color: #ead6ad;
  border-color: #795425;
  border-radius: 4px;
  background: linear-gradient(120deg, rgba(37,22,12,.98), rgba(16,10,7,.98));
  box-shadow: 0 26px 90px #000c, inset 0 0 0 5px #b9863521;
}
html[data-home-theme="classic"] .tutorial-confirm-card::after { border-color: #b889413d; border-radius: 1px; }
html[data-home-theme="classic"] :is(.tutorial-kicker,.tutorial-dialogue-name,.tutorial-dialogue-eyebrow) { color: #c69a53; }
html[data-home-theme="classic"] .tutorial-action-primary { border-color:#a97733; background:linear-gradient(#8c5a28,#4d2a13); color:#f1dbac; }
html[data-home-theme="classic"] .tutorial-action-secondary { border-color:#755128; background:#1b100a; color:#d8c49d; }

/* Mrak: charcoal, iron and restrained blood-red accents. */
html[data-home-theme="mrak"] .tutorial-confirm-card {
  color:#d9d2c7;
  border-color:#665d52;
  border-radius:2px;
  background:linear-gradient(132deg,#242321fa,#090909fc 72%);
  box-shadow:0 28px 100px #000, inset 0 0 65px #0009;
}
html[data-home-theme="mrak"] .tutorial-confirm-card::after { border-color:#6e65583d; border-radius:0; }
html[data-home-theme="mrak"] :is(.tutorial-kicker,.tutorial-dialogue-name,.tutorial-dialogue-eyebrow) { color:#a33630; }
html[data-home-theme="mrak"] .tutorial-action-primary { border-color:#7e2924; color:#ded6ca; background:linear-gradient(#7f2924,#3a1210); }
html[data-home-theme="mrak"] .tutorial-action-secondary { border-color:#625b52; color:#bcb3a7; background:#111; }

/* Worlds: deep ocean glass, cyan edges and old gold. */
html[data-home-theme="worlds"] .tutorial-confirm-card {
  color:#e6e1d4;
  border-color:#69b9b4;
  border-radius:15px;
  background:linear-gradient(135deg,#183c47f7,#091c29fc 72%);
  box-shadow:0 30px 100px #030b12d9, inset 0 0 0 5px #79c3be12;
}
html[data-home-theme="worlds"] .tutorial-confirm-card::after { border-color:#79c3be42; }
html[data-home-theme="worlds"] :is(.tutorial-kicker,.tutorial-dialogue-name,.tutorial-dialogue-eyebrow) { color:#79c3be; }
html[data-home-theme="worlds"] .tutorial-action-primary { border-color:#79c3be; color:#071a22; background:linear-gradient(#91d0cc,#5ca9a5); }
html[data-home-theme="worlds"] .tutorial-action-secondary { border-color:#5d8587; color:#d9e6e3; background:#0a202b; }

/* Kids: the established ink-purple palette, without white cards. */
html[data-home-theme="kids"] .tutorial-confirm-card {
  color:#fff1c7;
  border-color:#8e80d8;
  border-radius:20px;
  background:linear-gradient(135deg,#373b78fa,#201e43fc 72%);
  box-shadow:0 28px 90px #0d0c24dc, inset 0 0 0 5px #fff1c70d;
}
html[data-home-theme="kids"] .tutorial-confirm-card::after { border-color:#8e80d852; }
html[data-home-theme="kids"] :is(.tutorial-kicker,.tutorial-dialogue-name,.tutorial-dialogue-eyebrow) { color:#f4bd4f; }
html[data-home-theme="kids"] .tutorial-action-primary { border-color:#f4bd4f; color:#272249; background:linear-gradient(#f7cb68,#e89a5a); }
html[data-home-theme="kids"] .tutorial-action-secondary { border-color:#8e80d8; color:#fff1c7; background:#242147; }

@media (max-width: 720px) {
  .tutorial-confirm-layer { padding: 10px; }
  .tutorial-confirm-card { grid-template-columns: 118px 1fr; min-height: 430px; }
  .tutorial-confirm-portrait { width: 170%; transform: translateX(-25%); }
  .tutorial-confirm-copy { padding: 54px 24px 36px 8px; }
  .tutorial-confirm-copy p { font-size: 14px; line-height: 1.5; }
  .tutorial-confirm-actions { display: grid; }
  .tutorial-confirm-actions button { width: 100%; }
  .tutorial-dialogue { left: 8px; right: 8px; bottom: 8px; grid-template-columns: 82px 1fr; }
  .tutorial-dialogue-mentor { width: 185%; transform: translate(4%, 8px); }
  .tutorial-dialogue-box { min-height: 220px; padding: 24px 20px 18px 36px; }
  .tutorial-dialogue-box p { font-size: 13px; }
  .tutorial-dialogue-footer { gap: 8px; }
  .tutorial-dialogue-next { padding-inline: 11px; font-size: 13px; }
  .tutorial-mentor-launcher { left: 8px; bottom: 8px; min-width: 58px; width: 58px; padding: 3px; }
  .tutorial-mentor-launcher span { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .tutorial-confirm-card,
  .tutorial-dialogue-box { animation: tutorial-rise .28s ease-out both; }
  .tutorial-dialogue-mentor { animation: tutorial-mentor-in .38s ease-out both; }
  @keyframes tutorial-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }
  @keyframes tutorial-mentor-in { from { opacity: 0; transform: translate(8%, 40px); } }
}