/* Shared game header: matches the Mathlooq homepage exactly. */
.topbar {
  align-items: center;
  backdrop-filter: blur(24px);
  background: rgba(255, 250, 248, .9);
  border-bottom: 1px solid rgba(234, 223, 228, .95);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 13px clamp(16px, 4vw, 60px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar .brand {
  align-items: center;
  color: #30323a;
  display: inline-flex;
  flex-shrink: 0;
  gap: 11px;
  text-decoration: none;
}

.topbar .brand strong,
.topbar .brand small,
.topbar .brand-copy strong,
.topbar .brand-copy small {
  display: block;
  line-height: 1.05;
}

.topbar .brand strong,
.topbar .brand-copy strong {
  color: #30323a;
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
}

.topbar .brand small,
.topbar .brand-copy small {
  color: #6d7079;
  font-family: "Source Sans 3", sans-serif;
  font-size: 11px;
  font-weight: 400;
  margin: 1px 0 0;
}

.topbar .brand-mark {
  align-items: center;
  background: linear-gradient(135deg, #30323a, #4a4d59);
  border-radius: 10px;
  display: inline-flex;
  flex-shrink: 0;
  gap: 3px;
  height: 44px;
  justify-content: center;
  position: relative;
  width: 44px;
}

.topbar .mark-eye,
.topbar .eye {
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  position: relative;
  width: 10px;
}

.topbar .mark-eye::after,
.topbar .eye::after {
  background: #30323a;
  border-radius: 50%;
  content: "";
  height: 4px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 4px;
}

.topbar .mark-lens,
.topbar .lens {
  border: 2px solid #fed3d9;
  border-radius: 50%;
  display: inline-block;
  height: 11px;
  margin-left: 1px;
  position: relative;
  width: 11px;
}

.topbar .mark-lens::after,
.topbar .lens::after {
  background: #fed3d9;
  border-radius: 3px;
  content: "";
  height: 8px;
  position: absolute;
  right: -5px;
  top: 7px;
  transform: rotate(-42deg);
  width: 2px;
}

.topbar .back-link,
.topbar .back {
  background: #fdf0d7;
  border: 1px solid rgba(213, 166, 66, .22);
  border-radius: 999px;
  color: #30323a;
  font: 900 .86rem "Nunito", sans-serif;
  padding: 9px 15px;
  text-decoration: none;
}

.topbar .back-link:hover,
.topbar .back:hover {
  background: #f9e4b9;
  color: #30323a;
}

@media (max-width: 540px) {
  .topbar .brand small,
  .topbar .brand-copy small { display: none; }
  .topbar .back-link,
  .topbar .back { font-size: 12px; padding: 7px 9px; }
}

/* Oyun sayfalarındaki özgün öğretmen rehberi */
.teacher-guide {
  background:
    radial-gradient(circle at 8% 8%, rgba(254, 211, 217, .42), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(206, 244, 248, .6), transparent 32%),
    #fff;
  border: 1px solid rgba(209, 204, 235, .72);
  border-radius: 24px;
  box-shadow: 0 16px 42px rgba(48, 50, 58, .07);
  box-sizing: border-box;
  color: #30323a;
  margin: 28px auto 10px;
  padding: clamp(24px, 4vw, 38px);
  width: 100%;
}

.teacher-guide__intro {
  margin: 0 auto 24px;
  max-width: 820px;
  text-align: center;
}

.teacher-guide__eyebrow {
  color: #7d72b8;
  display: block;
  font: 900 .76rem/1.2 "Nunito", sans-serif;
  letter-spacing: .13em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.teacher-guide h2 {
  color: #30323a;
  font: 900 clamp(1.45rem, 2.6vw, 2rem)/1.12 "Nunito", sans-serif;
  letter-spacing: -.025em;
  margin: 0 0 10px;
}

.teacher-guide__intro p {
  color: #626672;
  font: 600 clamp(.96rem, 1.4vw, 1.05rem)/1.65 "Nunito", sans-serif;
  margin: 0;
}

.teacher-guide__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-guide__grid article {
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(224, 217, 221, .9);
  border-radius: 17px;
  box-shadow: 0 7px 18px rgba(48, 50, 58, .045);
  padding: 18px;
}

.teacher-guide__grid h3 {
  color: #30323a;
  font: 900 1rem/1.25 "Nunito", sans-serif;
  margin: 0 0 7px;
}

.teacher-guide__grid p {
  color: #666a75;
  font: 600 .92rem/1.58 "Nunito", sans-serif;
  margin: 0;
}

@media (max-width: 760px) {
  .teacher-guide { border-radius: 19px; margin-top: 20px; padding: 22px 18px; }
  .teacher-guide__intro { text-align: left; }
  .teacher-guide__grid { grid-template-columns: 1fr; }
}