/* Interactive training: compact coach above the playfield, not a blocking modal. */
#tutorial-coach {
  position: fixed;
  z-index: 65;
  top: clamp(86px, 13vh, 136px);
  left: max(15px, env(safe-area-inset-left));
  width: min(348px, calc(100vw - 30px));
  padding: 17px 18px 14px;
  border: 1px solid #bdac7a;
  border-radius: 12px;
  color: #f5e9cf;
  background: linear-gradient(146deg, rgba(15, 31, 43, .98), rgba(8, 23, 34, .96));
  box-shadow: 0 16px 45px #020912b8;
  pointer-events: auto;
  font-family: inherit;
}
#tutorial-coach .tutorial-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
  color: #e7c77f;
}
#tutorial-coach .tutorial-meter {
  height: 4px;
  overflow: hidden;
  margin: 11px 0 14px;
  border-radius: 5px;
  background: #344959;
}
#tutorial-coach .tutorial-meter i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #eac579;
  transition: width .2s ease;
}
#tutorial-coach h3 {
  font-size: 19px;
  font-weight: 750;
  margin: 0 0 7px;
  line-height: 1.25;
  color: #fff8eb;
}
#tutorial-coach p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #cfdce2;
}
#tutorial-coach .tutorial-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
}
#tutorial-coach .tutorial-actions button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
  border-radius: 6px;
}
#tutorial-coach .tutorial-actions button:last-child:not(:first-child) {
  opacity: .8;
}
@media (max-width: 760px) {
  #tutorial-coach {
    top: calc(env(safe-area-inset-top) + 64px);
    left: calc(env(safe-area-inset-left) + 9px);
    width: min(430px, calc(100vw - 18px));
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 18px);
    padding: 11px 13px;
  }
  #tutorial-coach h3 { font-size: 16px; margin-bottom: 5px; }
  #tutorial-coach p { font-size: 12px; line-height: 1.4; }
  #tutorial-coach .tutorial-meter { margin: 8px 0 9px; }
  #tutorial-coach .tutorial-actions { margin-top: 9px; }
  #tutorial-coach .tutorial-actions button { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  #tutorial-coach .tutorial-meter i { transition: none; }
}

/* Optional academy drills: separate from the main game-modes grid. */

.tutorial-hub {max-width:960px;max-height:90dvh;overflow-y:auto;}
.tutorial-hub-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:12px 0 20px;}
.tutorial-hub-basic {grid-column:1/-1;text-align:left;display:flex;flex-direction:column;gap:5px;border:1px solid #c9a66a;background:#222a30;color:#f5e3c4;padding:18px;cursor:pointer;}
.tutorial-hub-basic strong {font:700 23px Georgia,serif;}
.tutorial-hub-basic small,.tutorial-hub-basic span {color:#b9c4c7;}
.tutorial-hub-group {min-width:0;display:flex;flex-direction:column;gap:7px;padding:13px;background:#16212c;border:1px solid #455161;}
.tutorial-hub-group h3 {margin:0 0 5px;color:#e8c78d;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.tutorial-hub-group button {text-align:left;display:flex;flex-direction:column;gap:3px;background:#26313d;border:1px solid #4a5866;padding:11px;color:#f4efe6;cursor:pointer;min-height:60px;}
.tutorial-hub-group button:hover,.tutorial-hub-basic:hover {background:#394855;border-color:#dfb97a;}
.tutorial-hub-group small {font-size:11px;color:#c3ccd0;}
#tutorial-coach.tutorial-coach-lab {max-height:min(82dvh,750px);overflow-y:auto;}
.tutorial-choices {display:flex;flex-direction:column;gap:7px;margin:12px 0;}
.tutorial-choices button {text-align:left;white-space:normal;line-height:1.35;min-height:36px;padding:9px 11px;border:1px solid #64798b;color:#eaf1ed;background:#233241;}
.tutorial-choices button:hover {border-color:#dfc080;background:#344457;}
.tutorial-primary {width:100%;white-space:normal;margin:8px 0;}
@media(max-width:650px){.tutorial-hub-grid{grid-template-columns:1fr;}.tutorial-hub-basic{grid-column:1;}#tutorial-coach.tutorial-coach-lab{max-height:56dvh;}}