/* ==========================================================================
   TL-08: ความทรงจำวัยเรียนไทยตั้งแต่อดีตถึงปัจจุบัน (1960–2025)
   Theme: Open 2-Page Exercise Book & Friendship Scrapbook on Teakwood Desk
   ========================================================================== */

:root {
  --chalkboard-bg: #1e3d2f;
  --chalkboard-border: #6e4726;
  --chalk-text: #f4f6f0;
  --chalk-yellow: #ffe169;
  --desk-wood-1: #8c5830;
  --desk-wood-2: #6f4221;
  --paper-bg: #fffdf7;
  --paper-left-bg: #fbf7ec;
  --rule-line: rgba(92, 152, 218, 0.35);
  --margin-line: rgba(217, 56, 58, 0.55);
  --ink-primary: #1d2d44;
  --ink-secondary: #3c4f65;
  --accent-color: #b8332a;
  --accent-soft: #fce8e6;
  --stamp-red: #c92a2a;
  --font-heading: 'Noto Serif Thai', serif;
  --font-body: 'Sarabun', sans-serif;
  --font-hand: 'Itim', cursive;
}

/* 23 Unique Era Theme Palettes & Typography */
html[data-theme="1960"] {
  --chalkboard-bg: #1f382b; --paper-bg: #fcf8ee; --paper-left-bg: #f6efe0;
  --ink-primary: #2b2623; --accent-color: #9e4726; --accent-soft: #f5e2d3;
  --font-heading: 'Charmonman', cursive; --font-body: 'Noto Serif Thai', serif;
}
html[data-theme="1971"] {
  --chalkboard-bg: #223f32; --paper-bg: #fffcf5; --paper-left-bg: #faf2e3;
  --ink-primary: #263248; --accent-color: #c82829; --accent-soft: #fde8e8;
  --font-heading: 'Noto Serif Thai', serif; --font-body: 'Sarabun', sans-serif;
}
html[data-theme="1978"] {
  --chalkboard-bg: #1c4434; --paper-bg: #fffef9; --paper-left-bg: #f3f8f4;
  --ink-primary: #1d3c2e; --accent-color: #2b6f54; --accent-soft: #e1f3eb;
  --font-heading: 'Kodchasan', sans-serif; --font-body: 'Sarabun', sans-serif;
}
html[data-theme="1985"] {
  --chalkboard-bg: #1f3d35; --paper-bg: #fffdfd; --paper-left-bg: #fdf1f6;
  --ink-primary: #331e38; --accent-color: #d6336c; --accent-soft: #fce4ee;
  --font-heading: 'Mitr', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="1989"] {
  --chalkboard-bg: #1d4238; --paper-bg: #fffef8; --paper-left-bg: #fff6e8;
  --ink-primary: #2b3a4a; --accent-color: #e8590c; --accent-soft: #fff0e3;
  --font-heading: 'Mali', cursive; --font-body: 'Sarabun', sans-serif;
}
html[data-theme="1993"] {
  --chalkboard-bg: #1a432d; --paper-bg: #fafdfb; --paper-left-bg: #eef7f1;
  --ink-primary: #1a2e22; --accent-color: #1e8a4c; --accent-soft: #e2f5ea;
  --font-heading: 'Chakra Petch', sans-serif; --font-body: 'Sarabun', sans-serif;
}
html[data-theme="1996"] {
  --chalkboard-bg: #222f3e; --paper-bg: #fcfcfc; --paper-left-bg: #f1f2f6;
  --ink-primary: #1e272e; --accent-color: #3b5998; --accent-soft: #e6ecf7;
  --font-heading: 'Kanit', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="1999"] {
  --chalkboard-bg: #2d2640; --paper-bg: #fffafd; --paper-left-bg: #fff0f7;
  --ink-primary: #3b1c4a; --accent-color: #d63384; --accent-soft: #fce8f3;
  --font-heading: 'Sriracha', cursive; --font-body: 'Mali', cursive;
}
html[data-theme="2002"] {
  --chalkboard-bg: #1d3557; --paper-bg: #fbfdff; --paper-left-bg: #eef5fc;
  --ink-primary: #162944; --accent-color: #0077b6; --accent-soft: #e0f2fe;
  --font-heading: 'Prompt', sans-serif; --font-body: 'Sarabun', sans-serif;
}
html[data-theme="2005"] {
  --chalkboard-bg: #3b223c; --paper-bg: #fffcfe; --paper-left-bg: #fcf0f7;
  --ink-primary: #381d3a; --accent-color: #9c36b5; --accent-soft: #f5e6f8;
  --font-heading: 'Itim', cursive; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2007"] {
  --chalkboard-bg: #3a1c2e; --paper-bg: #fffbfd; --paper-left-bg: #fdf0f5;
  --ink-primary: #361829; --accent-color: #d81159; --accent-soft: #fce3ee;
  --font-heading: 'Sriracha', cursive; --font-body: 'Prompt', sans-serif;
}
html[data-theme="2008"] {
  --chalkboard-bg: #1e3746; --paper-bg: #fffef9; --paper-left-bg: #f6f8fa;
  --ink-primary: #1f2937; --accent-color: #d97706; --accent-soft: #fef3c7;
  --font-heading: 'Kanit', sans-serif; --font-body: 'Sarabun', sans-serif;
}
html[data-theme="2010"] {
  --chalkboard-bg: #1b3452; --paper-bg: #f9fcff; --paper-left-bg: #eef6ff;
  --ink-primary: #1e3a8a; --accent-color: #2563eb; --accent-soft: #dbeafe;
  --font-heading: 'Chakra Petch', sans-serif; --font-body: 'Sarabun', sans-serif;
}
html[data-theme="2011"] {
  --chalkboard-bg: #233831; --paper-bg: #fcfefd; --paper-left-bg: #eff6f3;
  --ink-primary: #1c2e28; --accent-color: #2f855a; --accent-soft: #e6fffa;
  --font-heading: 'Chakra Petch', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2013"] {
  --chalkboard-bg: #3b2838; --paper-bg: #fffcfd; --paper-left-bg: #fdf4f8;
  --ink-primary: #3b2236; --accent-color: #b56576; --accent-soft: #fce8ef;
  --font-heading: 'Mali', cursive; --font-body: 'Prompt', sans-serif;
}
html[data-theme="2015"] {
  --chalkboard-bg: #2b331f; --paper-bg: #fffdf9; --paper-left-bg: #fef7ec;
  --ink-primary: #2d2318; --accent-color: #dd6b20; --accent-soft: #feebc8;
  --font-heading: 'Mitr', sans-serif; --font-body: 'Prompt', sans-serif;
}
html[data-theme="2016"] {
  --chalkboard-bg: #22354a; --paper-bg: #fffef9; --paper-left-bg: #f5f9ff;
  --ink-primary: #1d3557; --accent-color: #3a86ff; --accent-soft: #e0edff;
  --font-heading: 'Kodchasan', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2018"] {
  --chalkboard-bg: #2b2d42; --paper-bg: #fdfcfb; --paper-left-bg: #f5f2ef;
  --ink-primary: #22223b; --accent-color: #6d597a; --accent-soft: #ede8f0;
  --font-heading: 'Prompt', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2019"] {
  --chalkboard-bg: #173b2c; --paper-bg: #fafefc; --paper-left-bg: #eefbf3;
  --ink-primary: #064e3b; --accent-color: #059669; --accent-soft: #d1fae5;
  --font-heading: 'Kanit', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2021"] {
  --chalkboard-bg: #1a2a3a; --paper-bg: #f9fbfd; --paper-left-bg: #edf2f7;
  --ink-primary: #1a202c; --accent-color: #2b6cb0; --accent-soft: #ebf8ff;
  --font-heading: 'IBM Plex Sans Thai', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2022"] {
  --chalkboard-bg: #183642; --paper-bg: #f8fdff; --paper-left-bg: #edf8fc;
  --ink-primary: #0f172a; --accent-color: #0284c7; --accent-soft: #e0f2fe;
  --font-heading: 'Prompt', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2024"] {
  --chalkboard-bg: #2b1d42; --paper-bg: #fdfaff; --paper-left-bg: #f7f0ff;
  --ink-primary: #2e1065; --accent-color: #7c3aed; --accent-soft: #ede9fe;
  --font-heading: 'Prompt', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}
html[data-theme="2025"] {
  --chalkboard-bg: #231942; --paper-bg: #fcfbff; --paper-left-bg: #f3effe;
  --ink-primary: #21183c; --accent-color: #6c2bd9; --accent-soft: #ede9fe;
  --font-heading: 'Prompt', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink-primary);
  background: var(--desk-wood-2);
  user-select: none;
}

/* ==========================================================================
   1. TOP CLASSROOM CHALKBOARD BAR (กระดานดำหน้าห้องเรียน)
   ========================================================================== */
.chalkboard-header {
  position: relative;
  z-index: 20;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(180deg, var(--chalkboard-bg) 0%, #14281f 100%);
  border-bottom: 8px solid var(--chalkboard-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  color: var(--chalk-text);
  padding: 0.45rem 1rem 0.4rem;
}

.chalkboard-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.chalkboard-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}

.hub-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.chalk-date-wrap {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.9);
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  padding-left: 0.65rem;
}

.chalk-label {
  color: var(--chalk-yellow);
  font-weight: 600;
  margin-right: 0.25rem;
}

.chalkboard-center {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.chalk-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.era-theme-badge {
  background: rgba(255, 225, 105, 0.18);
  border: 1px solid var(--chalk-yellow);
  color: var(--chalk-yellow);
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.chalkboard-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chalk-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chalk-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.chalk-btn-accent {
  background: rgba(255, 225, 105, 0.22);
  border-color: var(--chalk-yellow);
  color: var(--chalk-yellow);
}

.chalk-btn-accent.active {
  background: var(--chalk-yellow);
  color: #14281f;
}

.chalk-ledge {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  max-width: 1400px;
  margin: 0.2rem auto -0.35rem;
  padding-right: 1rem;
  pointer-events: none;
}

.chalk-piece {
  width: 24px;
  height: 5px;
  border-radius: 2px;
  display: inline-block;
}
.chalk-piece.white { background: #f1f5f9; }
.chalk-piece.yellow { background: #fde047; }
.chalk-piece.pink { background: #f472b6; }
.chalk-eraser {
  font-size: 0.62rem;
  background: #3b2818;
  color: #e2d5c4;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  border-top: 3px solid #cbd5e1;
}

/* ==========================================================================
   2. SCRATCHED TEAKWOOD SCHOOL DESK & 2-PAGE EXERCISE BOOK
   ========================================================================== */
.wooden-desk-stage {
  position: relative;
  height: calc(100vh - 134px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(45, 22, 6, 0.08) 0px,
      rgba(45, 22, 6, 0.08) 2px,
      transparent 2px,
      transparent 48px
    ),
    linear-gradient(135deg, var(--desk-wood-1) 0%, var(--desk-wood-2) 100%);
  overflow: hidden;
}

.desk-carving {
  position: absolute;
  font-family: var(--font-hand);
  font-size: 0.9rem;
  color: rgba(255, 235, 205, 0.22);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.carving-left { bottom: 14px; left: 22px; transform: rotate(-5deg); }
.carving-right { top: 14px; right: 26px; transform: rotate(4deg); }

.exercise-book {
  position: relative;
  width: 100%;
  max-width: 1220px;
  height: 100%;
  max-height: 650px;
  display: grid;
  grid-template-columns: 45% 55%;
  background: var(--paper-bg);
  border-radius: 10px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 0 4px #2f3e52,
    0 0 0 7px #d9cfc1;
  overflow: hidden;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

.exercise-book.flipping-next {
  transform: perspective(1400px) rotateY(-4deg) scale(0.99);
}
.exercise-book.flipping-prev {
  transform: perspective(1400px) rotateY(4deg) scale(0.99);
}

/* Center Spine & Staples */
.book-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 45%;
  width: 24px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  z-index: 10;
  pointer-events: none;
}

.staple {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 28px;
  border-radius: 3px;
  background: linear-gradient(180deg, #cbd5e1, #64748b, #cbd5e1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.staple.top { top: 22%; }
.staple.bottom { bottom: 22%; }

.book-page {
  padding: 1.15rem 1.45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

/* LEFT PAGE: Scrapbook & Polaroid Illustration */
.page-left {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6), transparent 70%),
    var(--paper-left-bg);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  padding-right: 1.65rem;
}

.page-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.year-badge-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.year-badge {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  background: var(--accent-color);
  color: #fff;
  padding: 0.1rem 0.65rem;
  border-radius: 6px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.be-year-badge {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-color);
  background: var(--accent-soft);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--accent-color);
}

.page-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.polaroid-frame {
  position: relative;
  background: #ffffff;
  border: 2px solid #dcd3c6;
  border-radius: 6px;
  padding: 0.65rem 0.65rem 0.75rem;
  margin: 0.45rem 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: rotate(-0.8deg);
}

.masking-tape {
  position: absolute;
  width: 64px;
  height: 18px;
  background: rgba(245, 224, 166, 0.78);
  border: 1px solid rgba(190, 165, 110, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  z-index: 3;
}
.tape-tl { top: -8px; left: 14px; transform: rotate(-14deg); }
.tape-tr { top: -8px; right: 14px; transform: rotate(12deg); }

.svg-canvas {
  width: 100%;
  height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
}

.svg-canvas svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.polaroid-caption {
  margin-top: 0.4rem;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 0.92rem;
  color: var(--ink-primary);
}

/* Red-Ink Rubber Teacher Stamp */
.teacher-stamp {
  position: absolute;
  bottom: 30px;
  right: 12px;
  border: 2.5px double var(--stamp-red);
  color: var(--stamp-red);
  background: rgba(255, 250, 250, 0.86);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  transform: rotate(-8deg);
  text-align: center;
  box-shadow: 0 2px 6px rgba(201, 42, 42, 0.15);
  pointer-events: none;
}

.stamp-star {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 2px;
}

.stamp-main {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
}

.stamp-sub {
  display: block;
  font-size: 0.62rem;
  opacity: 0.85;
}

/* Friendship Quote Box */
.friendship-box {
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent-color);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
}

.friendship-box-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0.25rem;
}

.friendship-quote {
  font-family: var(--font-hand);
  font-size: 0.94rem;
  line-height: 1.42;
  color: var(--ink-primary);
}

.friendship-cite {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.74rem;
  font-style: normal;
  color: var(--ink-secondary);
  text-align: right;
}

/* RIGHT PAGE: Ruled Notebook Lines */
.page-right {
  position: relative;
  padding-left: 2.3rem;
  background-color: var(--paper-bg);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 27px,
    var(--rule-line) 27px,
    var(--rule-line) 28px
  );
}

.margin-red-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.45rem;
  width: 3px;
  border-left: 1.5px solid var(--margin-line);
  border-right: 1px solid var(--margin-line);
  pointer-events: none;
}

.notebook-heading {
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 0.45rem;
  margin-bottom: 0.55rem;
}

.notebook-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 0.15rem;
}

.cm-indicator {
  color: var(--accent-color);
  background: var(--accent-soft);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
}

.era-title {
  font-family: var(--font-heading);
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1.25;
}

.era-subtitle {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-top: 0.15rem;
}

/* 4 School Specs Grid */
.school-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.spec-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-left: 3.5px solid var(--accent-color);
  border-radius: 6px;
  padding: 0.38rem 0.6rem;
}

.spec-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-color);
}

.spec-value {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.3;
  margin-top: 0.1rem;
}

.section-mini-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0.25rem;
}

.ruled-story-text {
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--ink-primary);
  text-align: justify;
  background: rgba(255, 255, 255, 0.55);
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}

.memories-wrap {
  margin-top: 0.45rem;
}

.memories-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.memories-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-primary);
}

.memories-list li::before {
  content: "✎";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
  font-weight: bold;
}

/* ==========================================================================
   3. BOTTOM WOODEN/STEEL RULER TIMELINE (ไม้บรรทัดวัดปี 1 ซม. – 23 ซม.)
   ========================================================================== */
.ruler-footer {
  position: relative;
  z-index: 20;
  height: 76px;
  background: linear-gradient(180deg, #f3d078 0%, #dfb04c 60%, #c89632 100%);
  border-top: 3px solid #6b4c1b;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35);
  padding: 0.2rem 1rem 0.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ruler-header-row {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #3d280a;
}

.ruler-hint {
  font-weight: 600;
  color: #523710;
}

.ruler-track {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(23, 1fr);
  gap: 0.18rem;
}

.ruler-tick-btn {
  position: relative;
  background: rgba(255, 252, 240, 0.55);
  border: 1px solid rgba(90, 58, 16, 0.45);
  border-top: 4px solid #4a300d;
  border-radius: 4px;
  padding: 0.18rem 0.08rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ruler-tick-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 6px;
  background: #3d280a;
}

.ruler-tick-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.ruler-tick-btn.active {
  background: var(--accent-color);
  border-color: #fff;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.tick-cm {
  font-size: 0.58rem;
  font-weight: 700;
  opacity: 0.85;
}

.tick-year {
  font-size: 0.7rem;
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  html, body { overflow-y: auto; }
  .wooden-desk-stage { height: auto; min-height: calc(100vh - 140px); padding: 1rem; }
  .exercise-book { grid-template-columns: 1fr; max-height: none; }
  .book-spine { display: none; }
  .page-left { border-right: none; border-bottom: 2px dashed rgba(0, 0, 0, 0.2); }
  .ruler-footer { height: auto; }
  .ruler-track { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 640px) {
  .school-specs-grid { grid-template-columns: 1fr; }
  .ruler-track { grid-template-columns: repeat(4, 1fr); }
  .ruler-hint { display: none; }
}