@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  src: url('assets/fonts/baloo2_var.woff2') format('woff2');
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* Canvas-scaler (Unity-style): the page is designed at 1440x900 and every
   size inside the stage is expressed in design pixels via --u, so the whole
   slide scales uniformly with the window and "does the text fit" has the
   same answer at every resolution. Toolbar/dots (chrome) stay unscaled. */
:root { --u: min(100vw / 1440, 100vh / 900); }
body {
  background: #17140c;
  color: #eee;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

#app { height: 100vh; display: flex; flex-direction: column; }

/* ---------- toolbar ---------- */
#toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 18px;
  background: #0f0d08;
  border-bottom: 1px solid #2a2618;
  font-size: 13px;
  z-index: 20;
}
.toolbar-group { display: flex; align-items: center; gap: 10px; }
.nav-group button {
  background: #2a2618; color: #eee; border: none; border-radius: 6px;
  width: 30px; height: 30px; font-size: 16px; cursor: pointer;
}
.nav-group button:hover { background: #43391f; }
#menuBtn {
  background: #2a2618; color: #b8b29c; text-decoration: none; border-radius: 6px;
  height: 30px; display: flex; align-items: center; padding: 0 12px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  margin-right: 6px;
}
#menuBtn:hover { background: #43391f; color: #eee; }
#pageIndicator { min-width: 54px; text-align: center; color: #b8b29c; }
.read-group label { display: flex; align-items: center; gap: 6px; color: #b8b29c; }
.read-group select { accent-color: #e0a838; }

.size-buttons { display: flex; gap: 4px; }
.size-buttons button {
  background: #2a2618; color: #b8b29c; border: none; border-radius: 5px;
  width: 26px; height: 24px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.size-buttons button:hover { background: #43391f; }
.size-buttons button.active { background: #e0a838; color: #1a1710; }

/* ---------- stage ---------- */
#stage {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

.poem {
  position: absolute;
  inset: 0;
  display: none;
  background-color: #eecb6a;
  background-image: url('assets/texture.png');
  background-repeat: repeat;
  background-size: calc(440 * var(--u)) calc(440 * var(--u));
  background-blend-mode: soft-light;
  font-family: 'Baloo 2', ui-rounded, sans-serif;
}
.poem.active { display: flex; }

/* Every slide is 2 or 3 equal-width columns centered as a group (see
   buildColumns in script.js). Images scale to their column's width. */
.content {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: calc(30 * var(--u)) calc(56 * var(--u));
  gap: calc(42 * var(--u));
  z-index: 2;
}

.col {
  flex: 0 0 auto;
  width: calc(400 * var(--u));
  min-width: 0;
  min-height: 0;
}

.col-text {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 4px;
}
/* margin:auto centers when content is short but still allows full scrolling
   when it isn't (justify-content:center would clip the top). */
.col-inner { margin: auto 0; }

.col-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
}

.illus {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s ease;
}
.illus img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(255,225,100,.9))
    drop-shadow(0 0 16px rgba(250,230,50,.7))
    drop-shadow(0 0 32px rgba(255,180,50,.45))
    drop-shadow(0 6px 10px rgba(40,20,50,.25));
}

.title {
  margin: 0 0 .5em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--title, #8a3a52);
  font-size: calc(38 * var(--u));
  line-height: 1.05;
}

.stanzas {
  color: var(--ink, #2a2617);
  font-size: var(--body-size, calc(18 * var(--u)));
  line-height: 1.5;
  font-weight: 600;
}
.stanzas p { margin: 0 0 .8em; }
.stanzas .moral { font-style: italic; opacity: .85; margin-top: 1em; }

.page-badge {
  position: absolute; right: 16px; bottom: 12px;
  background: rgba(0,0,0,.28); color: #fff;
  font-size: 12px; padding: 3px 9px; border-radius: 20px; z-index: 3;
}
body.hide-badges .page-badge { display: none; }

/* ---------- font choices ---------- */
body.font-baloo .stanzas, body.font-baloo .title { font-family: 'Baloo 2', ui-rounded, sans-serif; }
body.font-serif .stanzas { font-family: Georgia, 'Times New Roman', serif; }
body.font-serif .title { font-family: Georgia, serif; }
body.font-sans .stanzas { font-family: Verdana, Tahoma, system-ui, sans-serif; }
body.font-sans .title { font-family: Verdana, Tahoma, system-ui, sans-serif; }

/* ---------- dots ---------- */
#dots {
  flex: 0 0 auto;
  display: flex; justify-content: center; gap: 6px;
  padding: 8px; background: #0f0d08;
}
#dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: #3a3220; cursor: pointer; padding: 0;
}
#dots button.active { background: #e0a838; }