/* سند UI, after concepts/ui_concept_01.webp: notebook paper, dark green, gold. */
:root {
  --paper: #f7f1e3;
  --paper-2: #efe6d1;
  --line: rgba(110, 135, 165, 0.16);
  --green: #1f4d40;
  --green-2: #2f6b55;
  --gold: #c9a24a;
  --ink: #2b2622;
  --muted: #8a8274;
  --shadow: 0 10px 30px rgba(20, 15, 5, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1d1d1d; overscroll-behavior: none; }
body {
  /* The game's two fonts (the user's choice): Zain for all the interface and the conversations,
     and Ocean Brush (folder.css) for the notebook and what's handwritten or painted: the records,
     notes, the menu's «سند» and the step titles. */
  font-family: 'Zain', 'Segoe UI', Tahoma, sans-serif; color: var(--ink);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* no double-tap zoom on phones */
}
#view, #view canvas { position: fixed; inset: 0; width: 100% !important; height: 100% !important; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------- HUD ---------- */
#crosshair {
  position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, background 0.15s; pointer-events: none; display: none;
}
#crosshair.active { transform: scale(2.2); background: rgba(201, 162, 74, 0.95); }
body[data-state="play"] #crosshair { display: block; }

#prompt {
  position: fixed; left: 50%; top: calc(50% + 34px); transform: translate(-50%, 6px);
  display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px;
  background: var(--paper); border-radius: 8px; box-shadow: var(--shadow);
  font-weight: 700; font-size: calc(17px * var(--ts, 1)); opacity: 0; transition: opacity 0.15s, transform 0.15s; pointer-events: none;
}
#prompt.on { opacity: 1; transform: translate(-50%, 0); }
body:not([data-state="play"]) #prompt { opacity: 0; }
#prompt .key {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: var(--green); color: var(--paper); font-weight: 800; font-size: calc(14px * var(--ts, 1)); border: 1.5px solid var(--gold);
}

#location {
  position: fixed; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--paper); border-radius: 8px; box-shadow: var(--shadow);
  font-weight: 700; font-size: calc(17px * var(--ts, 1));
}
#location svg { width: 18px; height: 18px; fill: var(--ink); }
body[data-state="start"] #location, body[data-state="loading"] #location { display: none; }

/* The current task: always at the top while playing, in the plain UI font so it reads at a
   glance (game/main.js currentTask). A new task slides in. */
#task {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); max-width: min(640px, 56vw);
  display: none; align-items: center; gap: 10px; padding: 7px 16px 7px 8px;
  background: var(--paper); border-radius: 8px; box-shadow: var(--shadow); pointer-events: none;
  font-size: calc(16px * var(--ts, 1)); font-weight: 700; line-height: 1.4; transition: opacity 0.2s;
}
#task.on { display: flex; }
#task.new { animation: task-in 0.6s ease-out; }
@keyframes task-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.task-label { flex: none; padding: 2px 9px; border-radius: 5px; background: var(--green); color: var(--paper); font-size: 0.8em; font-weight: 800; }
body:not([data-state="play"]) #task { opacity: 0; }

/* Area title, written in like ink: a big Ruqaa line revealed right to left through a sliding
   mask with a soft edge, a gold rule drawn under it, then the subtitle. Whole-line reveal (not
   letter by letter) so the Arabic stays joined. */
#title-card {
  position: fixed; top: 16vh; right: 7vw; max-width: 80vw; text-align: right;
  pointer-events: none; display: none;
}
#title-card::before {
  content: ''; position: absolute; inset: -6vh -8vw -5vh -10vw; z-index: -1;
  background: radial-gradient(ellipse at 70% 50%, rgba(8, 14, 12, 0.42), transparent 68%);
  opacity: 0; transition: opacity 0.8s;
}
#title-card.on { display: block; }
#title-card.on::before { opacity: 1; }
.title-main {
  font-family: 'Ocean Brush', 'Zain', sans-serif; font-weight: 400; font-size: clamp(60px, 13vh, 170px);
  line-height: 1.35; color: #fbf6ea; white-space: nowrap;
  text-shadow: 0 0 1px rgba(20, 15, 5, 0.6), 0 6px 28px rgba(0, 0, 0, 0.45);
  -webkit-mask-image: linear-gradient(to left, #000 44%, transparent 52%);
  mask-image: linear-gradient(to left, #000 44%, transparent 52%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
}
#title-card.on .title-main { animation: write-in 1.6s cubic-bezier(0.5, 0.05, 0.3, 1) forwards; }
@keyframes write-in {
  0% { -webkit-mask-position: 0% 0; mask-position: 0% 0; filter: blur(3px); transform: translateX(-0.12em); }
  70% { filter: blur(0.4px); }
  100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(0); transform: none; }
}
.title-rule { height: 3px; width: 0; margin: 0.2vh 0 1.4vh auto; background: var(--gold); border-radius: 2px; box-shadow: 0 0 8px rgba(201, 162, 74, 0.5); }
#title-card.on .title-rule { animation: rule-in 0.8s 1.05s ease-out forwards; }
@keyframes rule-in { to { width: min(38%, 340px); } }
.title-sub {
  font-size: calc(clamp(18px, 3.2vh, 38px) * var(--ts, 1)); font-weight: 700; color: #f1ead8; letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); opacity: 0;
}
#title-card.on .title-sub { animation: sub-in 0.7s 1.3s ease-out forwards; }
@keyframes sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#title-card.out { transition: opacity 0.85s ease-in, transform 0.85s ease-in, filter 0.85s; opacity: 0; transform: translateY(-14px); filter: blur(2px); }

/* The teacher's thought: a line under the location chip. */
#thought {
  position: fixed; top: 70px; right: 20px; max-width: min(520px, 70vw); padding: 10px 18px 12px;
  font-size: calc(clamp(22px, 3.5vh, 38px) * var(--ts, 1)); font-weight: 700; line-height: 1.5; color: #fbf6ea;
  background: linear-gradient(to left, rgba(12, 22, 18, 0.78), rgba(12, 22, 18, 0.5) 70%, rgba(12, 22, 18, 0));
  border-radius: 4px 0 0 4px;
  border-right: 3px solid var(--gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateX(10px); transition: opacity 0.8s, transform 0.8s; pointer-events: none;
}
#thought.on { opacity: 1; transform: none; }
body:not([data-state="play"]) #thought { opacity: 0; }
.pause-notes { display: none; padding: 2px 4px 6px; }
.pause-notes.on { display: block; }
#pause-thought { font-size: calc(22px * var(--ts, 1)); font-weight: 700; line-height: 1.55; color: var(--ink); }

/* Main-menu mode buttons carry a one-line description. */
.option-sub { display: block; margin-top: 3px; font-size: calc(14px * var(--ts, 1)); font-weight: 500; opacity: 0.75; }

#toast {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%);
  padding: 9px 18px; background: var(--green); color: var(--paper); border-radius: 8px; border: 1.5px solid var(--gold);
  font-weight: 700; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
#toast.on { opacity: 1; }

#loading {
  position: fixed; left: 20px; bottom: 18px; color: var(--paper); font-weight: 700; opacity: 0; transition: opacity 0.2s;
}
#loading.on { opacity: 0.9; }

#fade { position: fixed; inset: 0; background: #0d0c0a; opacity: 0; transition: opacity 0.35s; pointer-events: none; }
#fade.on { opacity: 1; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: block; }
#pause { background: rgba(10, 28, 22, 0.55); z-index: 3; }   /* (also over a conversation: «القائمة») */
/* (Above a conversation: the counsellor hands his note over while talking.) */
#note { background: rgba(10, 10, 8, 0.45); display: none; place-items: center; z-index: 5; }
#note.on { display: grid; }

/* Notebook panel with spiral holes down its left edge. */
.notebook {
  position: absolute; background:
    repeating-linear-gradient(to bottom, transparent 0 35px, var(--line) 35px 36px),
    var(--paper);
  box-shadow: var(--shadow);
}
.notebook::before {
  content: ''; position: absolute; left: 10px; top: 18px; bottom: 18px; width: 12px;
  background: radial-gradient(circle at 6px 6px, #6f675a 0 3.5px, transparent 4.5px) 0 0 / 12px 34px repeat-y;
}
.notebook.side {
  top: 0; bottom: 0; right: 0; width: min(430px, 92vw); padding: 70px 48px 40px 56px;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 6px solid var(--gold);
}
.logo { font-family: 'Ocean Brush', 'Zain', sans-serif; font-size: calc(96px * var(--ts, 1)); font-weight: 400; color: var(--green); line-height: 1; text-align: center; position: relative; }
.logo .diamond { position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); }
.tagline { text-align: center; font-size: calc(22px * var(--ts, 1)); font-weight: 500; color: var(--muted); }
.panel-title { font-size: calc(40px * var(--ts, 1)); font-weight: 900; text-align: center; color: var(--green); }
.rule { width: 56px; height: 3px; background: var(--gold); margin: 6px auto 14px; border-radius: 2px; }

.option {
  position: relative; width: 100%; padding: 14px 22px; border: none; border-radius: 3px; text-align: right;
  background: var(--paper-2); color: var(--ink); font-size: calc(22px * var(--ts, 1)); font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
.option:hover:not(:disabled), .option.primary { background: var(--green); color: var(--paper); }
.option.primary::after, .option:hover:not(:disabled)::after {
  content: ''; position: absolute; right: -10px; top: 50%; width: 0; height: 0; transform: translateY(-50%);
  border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 12px solid var(--gold);
}
.option:disabled { color: #b4ab9a; cursor: default; }
.option.small { width: auto; padding: 9px 22px; font-size: calc(18px * var(--ts, 1)); }

.hint { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: calc(15px * var(--ts, 1)); color: var(--muted); }
.hint b { color: var(--green); font-weight: 800; }
.credits { font-size: calc(11px * var(--ts, 1)); color: var(--muted); opacity: 0.8; direction: rtl; }

/* Keyboard focus: a gold ring (only for keyboard use, not clicks). */
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The main menu: a teacher's desk from above (game/menu.js). The picture (game/ui/menu/desk.webp,
   1672 × 941, generator/tools/prepare-desk.mjs) keeps its proportions and covers the screen.
   .desk-frame lies on it, a container, so what's on it is sized in cqw: hundredths of the
   picture's width. The paper slip sits where the mockup painted its paper. */
#start { background: #3b2512; overflow: hidden; }
.desk { position: fixed; inset: 0; transform-origin: 50% 46%; }
#start.arrive .desk { animation: desk-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#start.leaving .desk { opacity: 0; transform: scale(1.1); transition: opacity 0.55s ease-in, transform 0.6s ease-in; }
@keyframes desk-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.desk-stage {
  position: absolute; left: 50%; top: 50%; overflow: hidden;
  width: max(100vw, calc(100vh * 1672 / 941)); height: max(100vh, calc(100vw * 941 / 1672));
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) scale(1.02);
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.desk-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.desk-frame { position: absolute; inset: 0; container-type: size; }
/* The middle: the logo, its ochre stroke and the slip, placed where the mockup painted them and
   drawn at 80% round their own middle, for more desk round them (the user's choice). */
.desk-center { position: absolute; inset: 0; transform-origin: 50.36% 53.8%; transform: scale(0.8); pointer-events: none; }
.desk-center .desk-slip { pointer-events: auto; }
.desk-logo { position: absolute; left: 33.134%; top: 31.668%; width: 34.569%; margin: 0; }
.desk-logo img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.desk-logo-stroke {
  position: absolute; left: 35.4%; top: 57.6%; width: 27.4%; height: 4.4%;
  /* (A dry brush stroke: thin where the brush came down on the left, lighter streaks along it.) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M4 25C30 17 90 11 170 9s170-3 222 1c6 1 7 12 3 15-24 3-58 4-96 5-60 2-140 3-210 5-30 1-58 2-80 2-8 0-17-4-9-12z' fill='%23c8952c'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M40 20c70-6 180-9 340-8' stroke='%23e6c15e' stroke-width='2.2' opacity='.55'/%3E%3Cpath d='M70 26c80-3 190-5 300-6' stroke='%23e6c15e' stroke-width='1.4' opacity='.45'/%3E%3Cpath d='M110 15c90-3 180-4 260-3' stroke='%23e6c15e' stroke-width='1.2' opacity='.4'/%3E%3Cpath d='M30 31c90-2 220-5 350-7' stroke='%23a5761e' stroke-width='1.6' opacity='.45'/%3E%3Cpath d='M150 12c70-1 150-1 230 0' stroke='%23a5761e' stroke-width='1' opacity='.35'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Life on the desk: the shadows of the window's curtains (drawn by menu.js) over two corners,
   swaying in and out as if a breeze moved the curtains, each in its own time; a warm glow from
   the window that comes and goes, as if a cloud passed; and steam over the coffee. */
.desk-curtains { position: absolute; inset: -5%; pointer-events: none; mix-blend-mode: multiply; }
.curtain { position: absolute; inset: 0; background: var(--shade) center / 100% 100% no-repeat; opacity: 0.62; }
/* (Each moves across the light: the right one down and left into it, the left one up and right.) */
.curtain.right { transform-origin: 100% 0; animation: curtain-right 7.5s ease-in-out infinite; }
.curtain.left { transform-origin: 0 100%; animation: curtain-left 9.5s ease-in-out infinite; }
@keyframes curtain-right {
  0%, 100% { transform: translate(0.8%, -1.3%) skewX(-0.6deg); }
  30% { transform: translate(-0.9%, 1.5%) skewX(0.8deg); }
  55% { transform: translate(-0.3%, 0.5%) skewX(0.2deg); }
  75% { transform: translate(-1.2%, 2%) skewX(1deg); }
}
@keyframes curtain-left {
  0%, 100% { transform: translate(-0.7%, 1.2%) skewX(0.5deg); }
  40% { transform: translate(0.9%, -1.6%) skewX(-0.8deg); }
  65% { transform: translate(0.3%, -0.4%) skewX(-0.2deg); }
  85% { transform: translate(1.1%, -1.9%) skewX(-0.9deg); }
}
.desk-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 70% 60% at 26% 20%, rgba(255, 214, 140, 0.95), rgba(255, 196, 120, 0) 70%);
  opacity: 0.2; animation: desk-glow 15s ease-in-out infinite;
}
@keyframes desk-glow { 0%, 100% { opacity: 0.18; } 35% { opacity: 0.45; } 55% { opacity: 0.32; } 75% { opacity: 0.5; } }
.desk-steam { position: absolute; left: 80.1%; top: 31%; width: 0; height: 0; pointer-events: none; }
.desk-steam i {
  position: absolute; left: -2.6cqw; top: -2.6cqw; width: 5.2cqw; height: 5.2cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 240, 0.6), rgba(255, 250, 240, 0) 66%); filter: blur(0.5cqw);
  opacity: 0; animation: desk-steam 5.6s ease-out infinite;
}
.desk-steam i:nth-child(2) { animation-delay: 1.9s; }
.desk-steam i:nth-child(3) { animation-delay: 3.8s; }
@keyframes desk-steam {
  0% { opacity: 0; transform: translate(0, 0) scale(0.55); }
  25% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-3.2cqw, -3.6cqw) scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
  .curtain, .desk-glow { animation: none; }
  .desk-steam { display: none; }
}

/* The slip: white paper with torn ends, lifting a little when the pointer is over it. */
.desk-slip {
  position: absolute; left: 35.6%; top: 63.8%; width: 29.1%; min-height: 12.2%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2cqw; padding: 1.1cqw 3cqw;
  filter: drop-shadow(0 0.45cqw 0.45cqw rgba(74, 38, 10, 0.42)) drop-shadow(0 0.08cqw 0.08cqw rgba(74, 38, 10, 0.35));
  transition: transform 0.28s cubic-bezier(0.3, 0.7, 0.3, 1), filter 0.28s;
}
.desk-slip:hover, .desk-slip:focus-within {
  transform: translateY(-0.4cqw) rotate(-0.3deg);
  filter: drop-shadow(0 1cqw 0.9cqw rgba(74, 38, 10, 0.34)) drop-shadow(0 0.1cqw 0.12cqw rgba(74, 38, 10, 0.3));
}
.slip-paper {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(90, 80, 60, 0.12), transparent 4%, transparent 96%, rgba(90, 80, 60, 0.12)),
    linear-gradient(to bottom, #fbfaf5, #f1eee4);
  clip-path: polygon(1.6% 0, 98.4% 0, 99.6% 7%, 98.1% 15%, 100% 25%, 98.6% 35%, 99.8% 46%, 98.3% 57%, 100% 67%, 98.7% 77%, 99.6% 88%, 98.2% 100%,
    1.7% 100%, 0.3% 91%, 1.9% 80%, 0 69%, 1.4% 58%, 0.2% 47%, 1.9% 36%, 0.4% 25%, 1.6% 14%, 0 6%);
}
.slip-option {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 0.3cqw 1.2cqw 0.75cqw;
  border: none; background: none; color: #1f4a35; font-weight: 800; font-size: 2.3cqw; line-height: 1.25; cursor: pointer;
}
.slip-option[hidden] { display: none; }
.slip-option:focus-visible { outline: none; }
.desk-slip.two .slip-option[data-id="new"] { font-size: 1.85cqw; }
.slip-label { position: relative; }
/* The ochre brush stroke under the chosen option, drawn in from the right. */
.slip-label::after {
  content: ''; position: absolute; left: -8%; right: -8%; bottom: -0.5cqw; height: 0.42cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5C22 2.6 62 1.8 97.5 3.6c1.4.9 1.2 3-.6 3.4C62 7.4 26 8.6 3.4 9.2 1 9.2.4 6.6 2 5.5z' fill='%23c8952c'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: right; transition: transform 0.24s ease-out;
}
.slip-option.current .slip-label::after { transform: scaleX(1); }
/* (At least 11 px as seen: the slip is drawn at 80%.) */
.slip-sub { margin-top: 0.6cqw; font-size: max(0.95cqw, 14px); font-weight: 700; color: #6f6a5c; }
.slip-sub:empty { display: none; }

/* «وضع الإدارة»: small in the bottom-right corner; it opens a little card with the settings and
   free roam. */
.desk-corner {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.admin-toggle, .admin-panel button {
  position: relative; border: none; background: none; color: #234a33; font-weight: 800; cursor: pointer;
}
/* (Light ink: it sits on the picture's dark margin, or on the desk where a screen crops that.) */
.admin-toggle { padding: 4px 2px; font-size: calc(15px * var(--ts, 1)); color: #f4e8cf; opacity: 0.8; text-shadow: 0 1px 4px rgba(30, 16, 4, 0.85); transition: opacity 0.2s; }
.admin-toggle:hover, .admin-toggle[aria-expanded="true"], .admin-toggle:focus-visible { opacity: 1; }
.admin-toggle::after, .admin-panel button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 3px; border-radius: 2px; background: #c8952c;
  transform: scaleX(0); transform-origin: right; transition: transform 0.2s ease-out;
}
.admin-toggle:hover::after, .admin-toggle[aria-expanded="true"]::after, .admin-panel button:hover::after, .admin-panel button:focus-visible::after { transform: scaleX(1); }
.admin-toggle:focus-visible, .admin-panel button:focus-visible { outline: none; }
.admin-panel {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 12px;
  background: linear-gradient(to bottom, #fbfaf5, #f1eee4); border-radius: 2px; transform: rotate(-1deg);
  box-shadow: 0 6px 14px rgba(74, 38, 10, 0.4), 0 1px 2px rgba(74, 38, 10, 0.3);
}
.admin-panel[hidden] { display: none; }
.admin-panel button { padding: 6px 12px; font-size: calc(17px * var(--ts, 1)); text-align: right; }
/* The paper pack's credit, at the foot of the settings (moved off the main menu at the user's
   request; the licence asks for credit). */
.settings-credits { margin-top: 16px; text-align: center; }

/* Settings: a paper panel of its own, over the main menu or the pause menu. */
#settings-screen { background: rgba(10, 28, 22, 0.5); z-index: 7; }
.settings-panel {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); max-height: 92vh; overflow: auto;
  padding: 26px 34px 26px 46px;
}
#settings { padding: 6px 2px 4px; }
.setting-label { font-size: calc(15px * var(--ts, 1)); font-weight: 700; color: var(--muted); margin: 8px 0 6px; }
.segmented { display: flex; gap: 6px; }
.segmented button {
  flex: 1; padding: 8px 4px; border: 1.5px solid var(--green); background: transparent; color: var(--green);
  border-radius: 4px; font-size: calc(15px * var(--ts, 1)); font-weight: 700;
}
.segmented button.selected { background: var(--green); color: var(--paper); }
/* Sound volumes: one slider a bus (game/audio.js). */
.volumes { display: grid; gap: 4px; }
.volume { display: grid; grid-template-columns: 8.5em 1fr; align-items: center; gap: 12px; font-size: calc(15px * var(--ts, 1)); font-weight: 700; color: var(--green); }
.volume input[type="range"] { width: 100%; margin: 6px 0; accent-color: var(--green); cursor: pointer; }

.paper-note {
  width: min(520px, 90vw); padding: 44px 46px 30px; transform: rotate(-1.2deg);
  background: repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px), #fbf8ef;
  box-shadow: var(--shadow); border-top: 5px solid var(--gold);
  font-size: calc(24px * var(--ts, 1)); font-weight: 500; line-height: 34px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
/* A long note (the counsellor's, naming what was missed: ui.js showNote) is wider, in smaller
   writing; and a note taller than the screen scrolls, its ruled lines with it. */
.paper-note { max-height: 92vh; overflow-y: auto; background-attachment: local; scrollbar-width: thin; scrollbar-color: rgba(29, 38, 33, 0.3) transparent; }
.paper-note.long {
  width: min(800px, 92vw); padding: 34px 42px 24px; gap: 14px; font-size: calc(20px * var(--ts, 1)); line-height: 30px;
  background: repeating-linear-gradient(to bottom, transparent 0 29px, var(--line) 29px 30px) local, #fbf8ef;
}
#note-text { align-self: stretch; white-space: pre-line; }
#note-text:empty { display: none; }
/* A drawn note (the crumpled page): no lined paper behind it, just the drawing. */
.paper-note.drawn { width: auto; padding: 0; background: none; box-shadow: none; border: none; transform: none; align-items: center; }
#note-image canvas { display: block; width: min(720px, 86vw, 110vh); height: auto; transform: rotate(-2.5deg); filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.5)); }

/* End-of-day reflection. */
#reflection { background: rgba(10, 20, 16, 0.6); z-index: 4; }
.reflection-page { inset: 5vh auto 5vh 50%; }
#reflection-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-left: 8px; }
.reflection-entry { padding: 4px 4px 2px; }
.reflection-summary { font-size: calc(21px * var(--ts, 1)); font-weight: 700; line-height: 1.6; }
.reflection-note {
  margin-top: 8px; padding: 8px 14px; background: var(--paper-2); border-right: 4px solid var(--gold);
  font-size: calc(17px * var(--ts, 1)); font-weight: 500; line-height: 1.6; color: #4a443c;
}
.reflection-footer { margin-top: 10px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
/* The interpretations saved in the student folder: the teacher's own reading, no judgement. */
.reflection-readings { margin-top: 8px; padding: 8px 14px 6px; border: 1.5px dashed rgba(31, 59, 92, 0.35); border-radius: 3px; }
.readings-title { font-size: calc(14px * var(--ts, 1)); font-weight: 800; color: #1f3b5c; margin-bottom: 4px; }
.reading { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.reading-sign { flex: none; font-family: 'Ocean Brush', 'Zain', sans-serif; font-size: calc(19px * var(--ts, 1)); color: #1f3b5c; }
.reading-items { font-size: calc(15px * var(--ts, 1)); font-weight: 500; line-height: 1.6; color: #4a443c; }
.readings-note { margin-top: 2px; font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
.reflection-buttons { display: flex; gap: 10px; margin-top: 12px; }

/* ---------- conversation ---------- */
/* The view blurs while you talk, the person too (the focus pass, generator/post-effects.js
   focusFloor); low quality has no focus pass, so the canvas itself is blurred, a touch enlarged so
   its edges don't blur in from black. */
#view canvas { transition: filter 0.35s ease-out, transform 0.35s ease-out; }
body[data-quality="low"].talking #view canvas { filter: blur(3px); transform: scale(1.02); }
body.talking #view::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(10, 20, 16, 0.45) 100%);
}
/* The dialogue box, after the user's reference (2026-10-29): a sheet of lined paper on a dark green
   block set off below and to its right, the top-left corner turned down; the speaker's name on a
   green tab over its top-right edge, in the hand font; the line in bold beside a gold bar. Its
   controls stand beside it on the scene, a column with icons (.dialogue-controls). */
.dialogue-box {
  position: absolute; left: calc(3vw + 172px); right: 3.5vw; bottom: 7vh; padding: 42px 52px 32px 46px;
  isolation: isolate; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
}
.db-block, .db-paper, .db-fold { position: absolute; pointer-events: none; }
.db-block { inset: 0; z-index: -2; background: #1f4d3d; transform: translate(9px, 9px); border-radius: 2px; }
.db-paper {
  inset: 0; z-index: -1; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, transparent 0 33px, rgba(150, 140, 120, 0.16) 33px 34px), linear-gradient(180deg, #fbf7ee, #f3ecdd);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}
/* The turned-down corner: the sheet's back showing, with a soft shadow under the fold. */
.db-fold {
  left: 0; top: 0; width: 24px; height: 24px; z-index: 0;
  background: linear-gradient(135deg, transparent 50%, #e2d7c0 50%, #d6cab0);
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.18));
}
.name-plate {
  position: absolute; top: -34px; right: 24px; min-width: 200px; padding: 2px 42px 12px; text-align: center;
  background: linear-gradient(180deg, #2f7357, #23604a); color: #f6f1e4; border-radius: 4px;
  box-shadow: inset 0 -7px 0 #163f30, 0 4px 8px rgba(0, 0, 0, 0.3);
  font-family: 'Ocean Brush', 'Zain', sans-serif; font-size: calc(38px * var(--ts, 1)); font-weight: 400; line-height: 1.15;
}
.name-plate:empty { display: none; }   /* narration */
/* One size for every line (the user's notes, 2026-10-29): the text always has room for as many
   lines as the game's longest line takes on this screen at this text size (--dlg-lines, measured
   by ui.js fitDialogue: two almost everywhere, three on an iPad at the largest text size), so the
   box doesn't grow and shrink from sentence to sentence (font size × line height × lines, and 2 px
   for rounding). */
.dialogue-text {
  margin-top: 4px; padding-right: 22px; border-right: 4px solid var(--gold);
  font-size: calc(28px * var(--ts, 1)); font-weight: 800; line-height: 1.6; min-height: calc(var(--dlg-lines, 2) * 1.6 * 28px * var(--ts, 1) + 2px); color: #1d2621;
}
.name-plate .expr { margin-right: 12px; font-family: 'Zain', sans-serif; font-size: calc(15px * var(--ts, 1)); font-weight: 500; color: var(--gold); }

/* The controls: a column beside the box, over the scene, each an icon with its name. */
.dialogue-controls {
  position: absolute; left: 3vw; bottom: 7vh; width: 158px; display: flex; flex-direction: column; gap: 6px;
}
.dc-item {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 5px 4px; border: none; background: none;
  color: #f6f1e6; font: inherit; font-size: calc(16px * var(--ts, 1)); font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
  transition: color 0.15s, opacity 0.15s;
}
.dc-item svg {
  flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.dc-item.continue, #talk-menu { font-size: calc(19px * var(--ts, 1)); }
.dc-item.continue svg { fill: currentColor; stroke: none; }
.dc-item:hover, .dc-item:focus-visible { color: #f3d38a; outline: none; }

/* The answers («اختر ردك»), after the user's reference: over the scene above the dialogue box,
   toward the left, a heading with a gold rule running from it, then the answers as paper cards.
   Each card (built in ui.js choose()) is layered: a dark green block set off behind it, the cream
   paper with slightly uneven edges, its number in a column on the right behind a thin rule, and
   the text. The chosen one (hover, arrows) also has a gold sheet peeking out behind its top and a
   green pointer at its left edge. */
#choices {
  position: absolute; display: none; left: calc(3vw + 186px); bottom: calc(7vh + 172px); width: min(600px, 48vw);
  flex-direction: column; gap: 12px;
}
#choices.on { display: flex; }
.choices-head { display: flex; align-items: center; gap: 16px; margin: 0 0 4px 18px; }
.choices-head::after {
  content: ''; flex: 1; height: 2px; border-radius: 1px;
  background: linear-gradient(to left, var(--gold), rgba(201, 162, 74, 0.2));
}
.choices-title {
  font-size: calc(26px * var(--ts, 1)); font-weight: 900; color: var(--paper);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.45);
}
#choice-list { display: flex; flex-direction: column; gap: 20px; padding: 10px 0 10px 16px; }
.choice {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  width: 100%; min-height: 66px; padding: 12px 0 12px 22px; border: none; background: none; text-align: right;
  color: #1d2621; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.28));
}
.choice-gold, .choice-block, .choice-paper, .choice-pointer { position: absolute; pointer-events: none; }
.choice-paper {
  inset: 0; z-index: -1; background: linear-gradient(180deg, #fcf7ec, #f1e7d2);
  clip-path: polygon(0.8% 4%, 99.3% 0, 100% 95%, 0 100%);
}
.choice-block {
  inset: 0; z-index: -2; background: var(--green); transform: translate(-10px, 9px);
  clip-path: polygon(0 3%, 98.6% 0, 100% 97%, 1% 100%);
}
/* (A whole sheet under the card, turned about its right end, so it shows as a wedge at the top
   and left: widest at the left corner, gone by the right. A strip offset straight up read as a
   stray line.) */
.choice-gold {
  inset: 0; z-index: -3; transform-origin: 100% 50%; transform: translateX(-5px) rotate(2deg);
  background: linear-gradient(180deg, #e3bf66, #c99d3e);
  clip-path: polygon(0 1%, 100% 0, 99.5% 100%, 0.5% 98%); opacity: 0; transition: opacity 0.12s;
}
.choice-pointer {
  left: -27px; top: 50%; width: 30px; height: 40px; margin-top: -20px; z-index: 1;
  background: var(--paper); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; transition: opacity 0.12s;
}
.choice-pointer::after {
  content: ''; position: absolute; left: 3px; top: 7px; width: 21px; height: 26px;
  background: var(--green); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.choice.selected .choice-gold, .choice.selected .choice-pointer { opacity: 1; }
.choice-num {
  align-self: stretch; display: grid; place-items: center; padding: 0 20px 0 18px; margin: 2px 0;
  border-inline-end: 2px solid rgba(29, 38, 33, 0.3);
  font-size: calc(30px * var(--ts, 1)); font-weight: 900; line-height: 1; color: #1d2621;
}
.choice-text { padding: 0 20px; font-size: calc(22px * var(--ts, 1)); font-weight: 800; line-height: 1.45; }
.choice:focus-visible { outline: none; }
.choice:focus-visible .choice-paper { background: linear-gradient(180deg, #fffaf0, #f4ead6); }

/* The teacher's name (ui.js askName): where the answers go, one card like theirs with the gold
   sheet showing, «أستاذ» in the number's column, the field, and «تم». While it's up the dialogue
   box keeps the line that asked, without its buttons. */
#name-card {
  position: absolute; display: none; left: calc(3vw + 186px); bottom: calc(7vh + 172px); width: min(560px, 48vw);
  flex-direction: column; gap: 12px; margin: 0;
}
#name-card.on { display: flex; }
#talk.naming #choices, #talk.naming .dialogue-controls { visibility: hidden; }
.name-field {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px;
  margin: 10px 0 10px 16px; min-height: 74px; padding: 12px 0 12px 16px;
  color: #1d2621; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.28));
}
.name-field .choice-gold { opacity: 1; }
.name-prefix {
  align-self: stretch; display: grid; place-items: center; padding: 0 20px 0 16px; margin: 2px 0;
  border-inline-end: 2px solid rgba(29, 38, 33, 0.3);
  font-size: calc(24px * var(--ts, 1)); font-weight: 900;
}
#name-input {
  flex: 1; min-width: 0; padding: 4px 2px; border: none; border-bottom: 2px dashed rgba(29, 38, 33, 0.4); border-radius: 0;
  background: transparent; color: #1d2621; font: inherit; font-size: max(18px, calc(24px * var(--ts, 1))); font-weight: 800;
  outline: none; user-select: text; -webkit-user-select: text; caret-color: var(--green);
}
#name-input:focus { border-bottom: 2px solid var(--gold); }
#name-done {
  flex: none; padding: 7px 26px 9px 30px; border: none; border-bottom: 3px solid var(--gold);
  background: var(--green); color: var(--paper); font: inherit; font-size: calc(20px * var(--ts, 1)); font-weight: 900;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%); transition: opacity 0.15s;
}
#name-done:disabled { opacity: 0.4; }
#name-done:not(:disabled):hover, #name-done:focus-visible { background: var(--green-2); outline: none; }
/* Touch: at the top, clear of the on-screen keyboard. */
body.touch #name-card { bottom: auto; top: calc(10vh + env(safe-area-inset-top)); left: max(5vw, env(safe-area-inset-left)); width: min(560px, 58vw); }
/* «متابعة»: its arrow nudges once the line is all there; dimmed while it types. */
.dialogue-box:not(.typing) ~ .dialogue-controls .continue svg { animation: nudge 1.1s ease-in-out infinite; }
.dialogue-box.typing ~ .dialogue-controls .continue { opacity: 0.45; }
@keyframes nudge { 50% { transform: translateX(4px); } }

/* ---------- the wipe between the classroom and the hallway (ui.js wipe), after Persona's train
   transition: a dark green panel with Najdi triangles along its edges and soft light streaks,
   the passing student over it, the new place's name in the middle ---------- */
#wipe { position: fixed; inset: 0; z-index: 9; display: none; overflow: hidden; pointer-events: none; }
#wipe.on { display: block; }
.wipe-band {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; will-change: transform, width;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56'%3E%3Cg fill='%23e8dcbf' fill-opacity='0.08'%3E%3Cpath d='M0 0h32L16 28zM32 28h32L48 56zM0 56l16-28 16 28z'/%3E%3C/g%3E%3C/svg%3E") right 6% top / 64px 56px repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56'%3E%3Cg fill='%23e8dcbf' fill-opacity='0.06'%3E%3Cpath d='M0 0h32L16 28zM32 28h32L48 56zM0 56l16-28 16 28z'/%3E%3C/g%3E%3C/svg%3E") left var(--lead, 10%) top 28px / 64px 56px repeat-y,
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.022) 0 90px, rgba(255, 255, 255, 0) 90px 210px),
    /* (Darkened twice after the user's notes, «too catchy», then «much darker»: a green that's
       nearly black, so it sits back behind the student and the name. It was #2c5544 / #3e6c57 /
       #2a5040, then #15332a / #1d4639 / #132e25.) */
    linear-gradient(100deg, #0a1a15, #0f261e 55%, #091712);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}
/* (Drawn as the picture is, crisp; the panel's edge is tucked behind his body, ui.js wipe.) */
.wipe-student { position: absolute; left: 0; width: auto; transform-origin: 50% 100%; will-change: transform; user-select: none; }
.wipe-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); text-align: center;
  color: #f7f1e3; opacity: 0; transition: opacity 0.3s ease-out, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.4);
}
.wipe-title::before {
  content: ''; position: absolute; inset: -40% -30%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(12, 24, 19, 0.45), transparent 68%);
}
.wipe-title.on { opacity: 1; transform: translate(-50%, -50%); }
.wipe-title.out { opacity: 0; transition-duration: 0.45s; }
.wipe-main { font-size: calc(clamp(50px, 10.5vh, 104px) * var(--ts, 1)); font-weight: 900; line-height: 1.15; white-space: nowrap; }
.wipe-sub { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; font-size: calc(clamp(18px, 3.3vh, 30px) * var(--ts, 1)); font-weight: 700; color: #e8dcbf; }
.wipe-sub::before, .wipe-sub::after { content: ''; width: 64px; height: 1.5px; background: rgba(232, 220, 191, 0.7); }
.wipe-title.no-sub .wipe-sub { display: none; }

/* ---------- the minimap (game/minimap.js): a dark plan in the top-left corner while playing, after
   the user's wayfinding reference: a header with the building, the plan, and a small legend ---------- */
#minimap {
  position: fixed; top: 18px; left: 18px; z-index: 2; width: 236px; display: none; flex-direction: column;
  background: #101c18; border: 2px solid #3a5a4c; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.04); pointer-events: none;
}
body[data-state="play"] #minimap { display: flex; }
.mm-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 7px; background: #1d3a2f; border-bottom: 2px solid var(--gold);
  color: #f1ead8; font-size: calc(15px * var(--ts, 1)); font-weight: 800;
}
.mm-head svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#minimap canvas { display: block; width: 100%; height: 212px; }
.mm-legend {
  display: flex; justify-content: space-around; gap: 6px; padding: 4px 8px 6px; border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #cfc7b2; font-size: calc(12px * var(--ts, 1)); font-weight: 700;
}
.mm-legend span { display: flex; align-items: center; gap: 5px; }
.mm-legend i { display: inline-block; width: 10px; height: 10px; }
.lg-me { background: #4b95ec; clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); }
.lg-saad { background: #3fae72; border-radius: 50%; }
.lg-goal { background: #e8b54a; transform: rotate(45deg) scale(0.85); }
body.touch #minimap { top: calc(12px + env(safe-area-inset-top)); left: calc(max(14px, env(safe-area-inset-left)) + 58px); width: 210px; }
body.touch #minimap canvas { height: 170px; }

/* ---------- one-time tips (game/tips.js): a popup that stops the day, after Persona's tutorial
   cards. The room dims; a tilted paper card swings in over a gold slash, its title on a slanted
   green band («تلميح» above it in gold), the text, and «فهمت» (with its key on a computer). ---------- */
#tip {
  position: fixed; inset: 0; z-index: 6; display: none; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 20, 16, 0.5), rgba(10, 20, 16, 0.82));
}
#tip.on { display: grid; animation: tip-dim 0.25s ease-out; }
@keyframes tip-dim { from { opacity: 0; } }
.tip-card {
  position: relative; width: min(560px, 88vw); padding: 70px 46px 28px; transform: rotate(-1.6deg);
  background: repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px), var(--paper);
  clip-path: polygon(0 2%, 100% 0, 99% 100%, 1% 97%);
  box-shadow: var(--shadow); color: var(--ink);
  animation: tip-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
@keyframes tip-in { from { opacity: 0; transform: translate(-60px, 10px) rotate(-7deg) scale(0.92); } }
/* The gold slash behind the card. */
#tip::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(760px, 120vw); height: 120px;
  transform: translate(-50%, -50%) rotate(-12deg); background: linear-gradient(90deg, transparent, var(--gold) 18%, #e3bf66 50%, var(--gold) 82%, transparent);
  clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%); opacity: 0.85;
}
#tip.on::before { animation: tip-slash 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes tip-slash { from { transform: translate(-50%, -50%) rotate(-12deg) scaleX(0); } }
.tip-band {
  position: absolute; top: 18px; right: -6px; left: 30%; padding: 6px 30px 9px 40px;
  background: var(--green); clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); border-bottom: 4px solid var(--gold);
  display: flex; align-items: baseline; gap: 14px;
}
.tip-label { font-size: calc(15px * var(--ts, 1)); font-weight: 900; color: var(--gold); letter-spacing: 0.02em; }
.tip-title { margin: 0; font-size: calc(26px * var(--ts, 1)); font-weight: 900; line-height: 1.2; color: var(--paper); }
.tip-text { margin: 14px 0 0; font-size: calc(21px * var(--ts, 1)); font-weight: 700; line-height: 34px; }
.tip-ok {
  display: flex; align-items: center; gap: 10px; margin: 18px auto 0 0; padding: 8px 22px 10px 26px;
  border: none; border-bottom: 3px solid var(--gold); background: var(--green); color: var(--paper);
  font: inherit; font-size: calc(19px * var(--ts, 1)); font-weight: 900;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%);
}
.tip-ok:hover, .tip-ok:focus-visible { background: var(--green-2); outline: none; }
.tip-key {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px;
  background: var(--paper); color: var(--ink); font-size: 0.72em; font-weight: 900;
}
body.touch .tip-key { display: none; }
.tips-reset { margin-top: 12px; }
.tip-demo:empty { display: none; }

/* ---------- the drag-and-drop demo (game/drag-demo.js), in the «اربط ملاحظتك» tip and the guide:
   the notebook in miniature, a finger carrying the first card to the sign's first slot. Laid out
   in px from the left (direction: ltr) so the move is exact; it reads as the notebook does, the
   observations on the right page and the sign's page on the left. One 4.4 s loop. ---------- */
.drag-demo { position: relative; flex: none; width: 360px; height: 150px; margin: 8px auto 2px; direction: ltr; }
.dd-page { position: absolute; top: 4px; height: 142px; border-radius: 4px; background: #fbf7ee; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.dd-sign { left: 6px; width: 174px; background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(90, 120, 150, 0.12) 13px 14px), repeating-linear-gradient(90deg, transparent 0 13px, rgba(90, 120, 150, 0.12) 13px 14px), #f6f4ee; }
.dd-board { left: 188px; width: 166px; }
.dd-head { position: absolute; top: 7px; right: 12px; direction: rtl; font-size: 13px; font-weight: 900; color: var(--green); white-space: nowrap; }
.dd-slot { position: absolute; left: 21px; width: 144px; height: 42px; border: 2px dashed rgba(43, 38, 34, 0.28); border-radius: 4px; }
.dd-slot.s1 { top: 34px; animation: dd-slot 4.4s infinite; }
.dd-slot.s2 { top: 86px; }
.dd-tick { position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--paper); font-size: 12px; font-weight: 900; opacity: 0; animation: dd-tick 4.4s infinite; }
.dd-card { position: absolute; width: 124px; height: 36px; border-radius: 3px; background: #fffdf7; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); }
.dd-card i { position: absolute; top: 5px; right: 8px; width: 32px; height: 8px; background: #b9cfa9; }
.dd-card b { position: absolute; top: 18px; right: 8px; width: 92px; height: 4px; border-radius: 2px; background: rgba(43, 38, 34, 0.32); }
.dd-card b.short { top: 26px; width: 56px; }
.dd-card.c1 { left: 208px; top: 32px; animation: dd-src 4.4s infinite; }
.dd-card.c2 { left: 208px; top: 80px; }
.dd-card.c2 i { background: #a9c9e2; }
.dd-mover { left: 208px; top: 32px; z-index: 1; opacity: 0; animation: dd-move 4.4s ease-in-out infinite; }
.dd-hand { position: absolute; left: 256px; top: 44px; z-index: 2; width: 30px; height: 38px; transform-origin: 46% 6%; opacity: 0; animation: dd-hand 4.4s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
@keyframes dd-move {
  0%, 18% { transform: translate(0, 0); opacity: 0; }
  22% { transform: translate(2px, -4px) rotate(-3deg); opacity: 1; box-shadow: 0 9px 16px rgba(0, 0, 0, 0.3); }
  58% { transform: translate(-176px, 1px) rotate(-3deg); opacity: 1; box-shadow: 0 9px 16px rgba(0, 0, 0, 0.3); }
  64%, 90% { transform: translate(-176px, 5px); opacity: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); }
  98%, 100% { transform: translate(-176px, 5px); opacity: 0; }
}
@keyframes dd-src { 0%, 20% { opacity: 1; } 22%, 92% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes dd-slot {
  0%, 60%, 100% { border-color: rgba(43, 38, 34, 0.28); background: transparent; }
  64%, 90% { border-color: var(--gold); border-style: solid; background: rgba(201, 162, 74, 0.16); }
}
@keyframes dd-tick { 0%, 64% { opacity: 0; transform: scale(0.4); } 68%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes dd-hand {
  0% { transform: translate(40px, 70px); opacity: 0; }
  12% { transform: translate(0, 0); opacity: 1; }
  17% { transform: translate(0, 0) scale(0.86); opacity: 1; }
  22% { transform: translate(2px, -4px) scale(0.9); }
  58% { transform: translate(-176px, 1px) scale(0.9); opacity: 1; }
  64% { transform: translate(-176px, 5px) scale(1); opacity: 1; }
  76%, 100% { transform: translate(-150px, 62px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .drag-demo *, .drag-demo *::before { animation: none !important; }
  .dd-mover { opacity: 1; transform: translate(-176px, 5px); }
  .dd-card.c1 { opacity: 0.3; }
  .dd-slot.s1 { border-color: var(--gold); border-style: solid; background: rgba(201, 162, 74, 0.16); }
  .dd-tick { opacity: 1; }
  .dd-hand { display: none; }
}

/* ---------- the guide («الدليل», game/guide.js): section titles on one side, a section a page ---------- */
#guide { background: rgba(10, 20, 16, 0.55); z-index: 5; }
.guide-page { width: min(900px, 94vw); }
.guide-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 24%) minmax(0, 1fr); gap: 22px; }
#guide-toc { display: flex; flex-direction: column; gap: 4px; border-left: 1.5px solid rgba(138, 130, 116, 0.35); padding-left: 14px; }
.guide-tab {
  padding: 8px 12px; border: none; border-radius: 4px; background: none; text-align: right; color: var(--ink);
  font-size: calc(16px * var(--ts, 1)); font-weight: 700; line-height: 1.35;
}
/* (Hover only where there's a pointer to hover with: on a touch screen it stayed on the last tab
   touched, which then looked like a second chosen one.) */
@media (hover: hover) { .guide-tab:not(.on):hover { background: var(--paper-2); } }
.guide-tab.on { background: var(--green); color: var(--paper); }
/* The section scrolls when it's longer than the page (the signs on a small screen), its foot
   («السابق» / «التالي») after it, at the bottom when the section is short. */
#guide-section { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.guide-content { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
.guide-heading { margin: 2px 0 0; font-size: calc(26px * var(--ts, 1)); font-weight: 900; color: var(--green); }
.guide-sub { margin: 8px 0 0; font-size: calc(15px * var(--ts, 1)); font-weight: 800; color: var(--muted); }
.guide-text { margin: 0; font-size: calc(19px * var(--ts, 1)); font-weight: 600; line-height: 1.7; }
.guide-steps { margin: 0; padding: 0 1.4em 0 0; display: flex; flex-direction: column; gap: 6px; font-size: calc(18px * var(--ts, 1)); font-weight: 600; line-height: 1.6; }
.guide-steps li::marker { color: var(--green); font-weight: 900; }
.guide-keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 4px 0 0; align-items: center; font-size: calc(18px * var(--ts, 1)); }
.guide-keys dt { justify-self: start; padding: 3px 12px; border-radius: 5px; background: var(--green); color: var(--paper); font-weight: 800; direction: ltr; }
.guide-keys dd { margin: 0; font-weight: 700; }
.guide-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1.5px solid rgba(138, 130, 116, 0.3);
}
.guide-step {
  max-width: 42%; padding: 7px 12px; border: 1.5px solid var(--green); border-radius: 4px; background: transparent;
  color: var(--green); font: inherit; font-size: calc(15px * var(--ts, 1)); font-weight: 800; line-height: 1.3; text-align: center;
}
.guide-step:disabled { visibility: hidden; }
@media (hover: hover) { .guide-step:not(:disabled):hover { background: var(--green); color: var(--paper); } }
.guide-step:focus-visible { background: var(--green); color: var(--paper); outline: none; }
.guide-count { font-size: calc(14px * var(--ts, 1)); font-weight: 800; color: var(--muted); white-space: nowrap; }
.guide-types { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: calc(18px * var(--ts, 1)); font-weight: 600; }
.guide-types li { display: flex; align-items: center; gap: 12px; }
.guide-tape { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 92px; padding: 3px 10px; font-weight: 800; color: #2b2622; }
.guide-tape svg { width: 1.05em; height: 1.05em; }
.guide-tape.type-observation { background: #b9cfa9; }
.guide-tape.type-statement { background: #a9c9e2; }
.guide-tape.type-object { background: #e4d3ab; }
.guide-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.guide-sign { display: flex; flex-direction: column; align-items: center; text-align: center; }
.guide-sign-art { width: 100%; height: min(17vh, 150px); object-fit: contain; }
.guide-sign-name { font-size: calc(17px * var(--ts, 1)); font-weight: 900; color: var(--green); }
.guide-sign-text { margin: 2px 0 0; font-size: calc(14px * var(--ts, 1)); font-weight: 600; line-height: 1.5; color: #4a443c; }

/* ---------- dialogue log ---------- */
#log { background: rgba(10, 20, 16, 0.55); z-index: 5; }
.log-page {
  inset: 6vh auto 6vh 50%; transform: translateX(-50%); width: min(760px, 92vw);
  padding: 30px 44px 26px 58px; display: flex; flex-direction: column;
  border-top: 5px solid var(--gold);
}
.log-top { display: flex; align-items: center; justify-content: space-between; }
.log-top .panel-title { font-size: calc(32px * var(--ts, 1)); }
.log-page .rule { margin: 4px 0 12px; }
#log-list { flex: 1; overflow-y: auto; padding-left: 8px; display: flex; flex-direction: column; gap: 12px; scrollbar-color: var(--gold) transparent; }
.log-header {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 2px;
  font-size: calc(15px * var(--ts, 1)); font-weight: 800; color: var(--muted);
}
.log-header::before, .log-header::after { content: ''; flex: 1; height: 1px; background: rgba(138, 130, 116, 0.35); }
.log-entry { padding: 2px 4px; }
.log-name { font-size: calc(15px * var(--ts, 1)); font-weight: 800; color: var(--green); margin-bottom: 2px; }
.log-text { font-size: calc(21px * var(--ts, 1)); font-weight: 700; line-height: 1.55; }
.log-entry.action .log-text { font-weight: 500; color: var(--muted); }
/* The teacher's answers: a gold-edged card. */
.log-entry.teacher { background: var(--paper-2); border-right: 4px solid var(--gold); padding: 8px 14px; border-radius: 2px; }
.log-entry.teacher .log-name { color: #9a7a2e; }
.log-empty { margin: auto; color: var(--muted); font-size: calc(20px * var(--ts, 1)); font-weight: 700; }

/* Revealed text, with the rest laid out but invisible so lines never reflow and Arabic
   letters keep their joined shapes while typing. */
.dialogue-text .unrevealed { color: transparent; }

/* ---------- speaker portrait ---------- */
/* Stands to the right behind the dialogue box, like the concept. Layers: .portrait slides in,
   .portrait-hop bounces on an expression change, .portrait-breathe idles, frames swap. */
.portrait {
  position: absolute; right: 3vw; bottom: 0; height: 92vh; aspect-ratio: 2 / 3;
  opacity: 0; transform: translateX(10%); pointer-events: none;
  transition: opacity 0.22s ease-out, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.portrait.on { opacity: 1; transform: none; }
/* A slanted green card behind the figure, edged in gold. */
.portrait::before {
  content: ''; position: absolute; left: 14%; right: 8%; top: 10%; bottom: 22%;
  background: linear-gradient(160deg, rgba(31, 77, 64, 0.82), rgba(31, 77, 64, 0.55));
  border-left: 5px solid var(--gold); border-right: 2px solid rgba(201, 162, 74, 0.6);
  transform: skewX(-9deg) translateX(18%); opacity: 0;
  transition: opacity 0.25s 0.05s, transform 0.4s 0.05s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.portrait.on::before { opacity: 1; transform: skewX(-9deg); }
.portrait-hop, .portrait-breathe { position: absolute; inset: 0; transform-origin: 50% 100%; }
.portrait-hop.hop { animation: hop 0.24s ease-out; }
@keyframes hop { 35% { transform: translateY(-1.6%); } 70% { transform: translateY(0.3%); } }
.portrait-breathe {
  animation: breathe 3.8s ease-in-out infinite;
  /* Thin ink edge, and a flat green silhouette offset behind (cut-out look). */
  filter: drop-shadow(0 0 1px rgba(20, 15, 5, 0.6)) drop-shadow(-12px 6px 0 rgba(18, 48, 40, 0.7));
}
@keyframes breathe { 50% { transform: scale(1.004, 1.008); } }
.portrait .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.portrait .frame.open { visibility: hidden; }
.portrait.mouth-open .frame.open { visibility: visible; }

/* ---------- touch screens (body.touch) ---------- */
#touch-pause { display: none; }
/* The joystick (game/touch.js): a dark ring at the bottom left with a cream knob, edged in gold. */
#touch-stick {
  display: none; position: fixed; z-index: 2; width: 136px; height: 136px; border-radius: 50%;
  /* Up off the bottom edge and in a little from the side, under the thumb (the user's notes, 2026-10-29). */
  left: max(50px, calc(env(safe-area-inset-left) + 38px)); bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px));
  background: radial-gradient(circle, rgba(16, 30, 25, 0.25) 0 40%, rgba(16, 30, 25, 0.5) 72%);
  border: 2px solid rgba(241, 234, 216, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 6px rgba(241, 234, 216, 0.08);
  touch-action: none; transition: opacity 0.15s;
}
body.touch[data-state="play"] #touch-stick { display: block; }
.ts-knob {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fbf5e6, #ddcfae); border: 2.5px solid var(--gold);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); pointer-events: none; transition: transform 0.12s ease-out;
}
#touch-stick.active { border-color: rgba(201, 162, 74, 0.85); }
#touch-stick.active .ts-knob { transition: none; }
.hint-touch { display: none; }
body.touch .hint-keys { display: none; }
body.touch .hint-touch { display: grid; }
/* No aiming with the screen centre: no crosshair, and the prompt names what's being walked to. */
body.touch #crosshair, body.touch #prompt .key { display: none !important; }
body.touch #prompt { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); }
body.touch[data-state="play"] #touch-pause {
  display: grid; place-items: center; grid-auto-flow: column; gap: 5px;
  position: fixed; top: calc(14px + env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left));
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold);
  background: rgba(31, 77, 64, 0.85); box-shadow: var(--shadow);
}
#touch-pause span { width: 5px; height: 16px; border-radius: 2px; background: var(--paper); }
/* Clear of the notch and rounded corners when held sideways. */
body.touch #location { top: calc(12px + env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
body.touch #thought { right: max(14px, env(safe-area-inset-right)); }
body.touch .notebook.side { padding-right: max(48px, calc(env(safe-area-inset-right) + 24px)); }
body.touch .dialogue-box { right: max(3.5vw, env(safe-area-inset-right)); }
body.touch .dialogue-controls { left: max(3vw, env(safe-area-inset-left)); }
body.touch .portrait { right: max(3vw, env(safe-area-inset-right)); }

/* Held upright: ask for landscape. */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 20;
    background: radial-gradient(ellipse at 50% 40%, #2a5a4b, #10241d);
  }
}
.rotate-card { text-align: center; color: var(--paper); font-size: calc(30px * var(--ts, 1)); font-weight: 800; }
.rotate-card svg { width: 96px; height: 96px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; margin-bottom: 12px; animation: tilt 2.4s ease-in-out infinite; }
.rotate-sub { margin-top: 6px; font-size: calc(17px * var(--ts, 1)); font-weight: 500; opacity: 0.8; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* ---------- short screens (phones held sideways) ---------- */
@media (max-height: 520px) {
  .notebook.side { width: min(340px, 48vw); padding: 22px 30px 16px 40px; gap: 8px; }
  .notebook::before { top: 10px; bottom: 10px; background-size: 12px 26px; }
  .logo { font-size: calc(58px * var(--ts, 1)); }
  .tagline { font-size: calc(16px * var(--ts, 1)); }
  .rule { margin: 2px auto 6px; }
  .panel-title { font-size: calc(28px * var(--ts, 1)); }
  .option { padding: 9px 16px; font-size: calc(17px * var(--ts, 1)); }
  .option-sub { font-size: calc(12px * var(--ts, 1)); }
  .option.small { padding: 7px 16px; font-size: calc(15px * var(--ts, 1)); }
  .hint { font-size: calc(12px * var(--ts, 1)); gap: 4px 10px; }
  .segmented button { padding: 6px 4px; font-size: calc(13px * var(--ts, 1)); }
  .setting-label { font-size: calc(13px * var(--ts, 1)); margin: 4px 0 4px; }
  #location { padding: 5px 10px; font-size: calc(14px * var(--ts, 1)); }
  #location svg { width: 14px; height: 14px; }
  #task { top: calc(10px + env(safe-area-inset-top)); padding: 4px 12px 4px 6px; gap: 8px; font-size: calc(13px * var(--ts, 1)); }
  #toast { font-size: calc(14px * var(--ts, 1)); }
  #prompt { font-size: calc(15px * var(--ts, 1)); padding: 5px 12px; }

  .dialogue-box { left: calc(2vw + 112px); right: 2.5vw; bottom: 3vh; min-height: 0; padding: 22px 30px 16px 26px; }
  .db-block { transform: translate(6px, 6px); }
  .db-paper { background: repeating-linear-gradient(to bottom, transparent 0 25px, rgba(150, 140, 120, 0.16) 25px 26px), linear-gradient(180deg, #fbf7ee, #f3ecdd); clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }
  .db-fold { width: 16px; height: 16px; }
  .name-plate { top: -20px; right: 16px; padding: 2px 24px 8px; min-width: 110px; font-size: calc(21px * var(--ts, 1)); box-shadow: inset 0 -5px 0 #163f30, 0 3px 6px rgba(0, 0, 0, 0.3); }
  .dialogue-text { padding-right: 14px; border-right-width: 3px; font-size: calc(18px * var(--ts, 1)); line-height: 1.55; min-height: calc(var(--dlg-lines, 2) * 1.55 * 18px * var(--ts, 1) + 2px); }
  .dialogue-controls { left: 2vw; bottom: 3vh; width: 104px; gap: 0; }
  .dc-item { gap: 8px; padding: 3px 2px; font-size: calc(12px * var(--ts, 1)); }
  .dc-item.continue, #talk-menu { font-size: calc(13px * var(--ts, 1)); }
  .dc-item svg { width: 18px; height: 18px; }
  #choices { left: calc(2vw + 120px); bottom: calc(3vh + 96px); width: min(460px, 56vw); gap: 6px; }
  .choices-head { gap: 10px; margin: 0 0 0 12px; }
  .choices-title { font-size: calc(17px * var(--ts, 1)); }
  #choice-list { gap: 12px; padding: 6px 0 6px 12px; }
  .choice { min-height: 40px; padding: 6px 0 6px 14px; }
  .choice-block { transform: translate(-6px, 6px); }
  .choice-gold { transform: translateX(-4px) rotate(2deg); }
  .choice-pointer { left: -19px; width: 21px; height: 28px; margin-top: -14px; }
  .choice-pointer::after { left: 2px; top: 5px; width: 15px; height: 18px; }
  .choice-num { padding: 0 12px 0 10px; font-size: calc(19px * var(--ts, 1)); }
  .choice-text { padding: 0 12px; font-size: calc(15px * var(--ts, 1)); }
  #name-card { left: calc(2vw + 120px); bottom: calc(3vh + 96px); width: min(460px, 56vw); gap: 6px; }
  body.touch #name-card { top: calc(4vh + env(safe-area-inset-top)); width: min(460px, 62vw); }
  .name-field { min-height: 46px; gap: 10px; margin: 6px 0 6px 12px; padding: 6px 0 6px 10px; }
  .name-prefix { padding: 0 12px 0 10px; font-size: calc(17px * var(--ts, 1)); }
  #name-input { font-size: max(18px, calc(17px * var(--ts, 1))); }
  #name-done { padding: 4px 18px 6px 22px; font-size: calc(15px * var(--ts, 1)); }

  .log-page { inset: 3vh auto 3vh 50%; padding: 16px 26px 14px 40px; }
  .log-top .panel-title { font-size: calc(22px * var(--ts, 1)); }
  .guide-body { gap: 14px; }
  #guide-toc { gap: 2px; padding-left: 8px; }
  .guide-tab { padding: 4px 8px; font-size: calc(13px * var(--ts, 1)); }
  #guide-section { gap: 6px; }
  .guide-heading { font-size: calc(18px * var(--ts, 1)); }
  .guide-text, .guide-keys, .guide-types { font-size: calc(14px * var(--ts, 1)); line-height: 1.55; }
  .guide-keys { gap: 5px 12px; }
  .guide-types { gap: 6px; }
  .guide-signs { gap: 6px 12px; }
  .guide-sign { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 10px; align-items: start; text-align: start; }
  .guide-sign-art { grid-row: 1 / span 2; height: auto; aspect-ratio: 3 / 2; }
  .guide-sign-name { font-size: calc(13px * var(--ts, 1)); }
  .guide-sign-text { font-size: calc(11px * var(--ts, 1)); line-height: 1.4; }
  #touch-stick { width: 108px; height: 108px; left: max(40px, calc(env(safe-area-inset-left) + 28px)); bottom: max(48px, calc(env(safe-area-inset-bottom) + 36px)); }
  .ts-knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  #minimap, body.touch #minimap { width: 150px; border-radius: 8px; }
  #minimap canvas, body.touch #minimap canvas { height: 118px; }
  .mm-head { padding: 3px 8px 4px; gap: 5px; font-size: calc(11px * var(--ts, 1)); }
  .mm-head svg { width: 14px; height: 14px; }
  .mm-legend { padding: 2px 4px 3px; font-size: calc(9px * var(--ts, 1)); }
  .mm-legend i { width: 7px; height: 7px; }
  .tip-card { width: min(520px, 74vw); padding: 50px 30px 16px; background: repeating-linear-gradient(to bottom, transparent 0 25px, var(--line) 25px 26px), var(--paper); }
  .tip-band { top: 10px; padding: 4px 22px 6px 30px; }
  .tip-label { font-size: calc(12px * var(--ts, 1)); }
  .tip-title { font-size: calc(19px * var(--ts, 1)); }
  .tip-text { margin-top: 8px; font-size: calc(16px * var(--ts, 1)); line-height: 26px; }
  .tip-ok { margin-top: 10px; padding: 5px 16px 7px 20px; font-size: calc(15px * var(--ts, 1)); }
  .drag-demo { transform: scale(0.72); transform-origin: 50% 0; margin: 6px auto -40px; }
  .guide-steps { font-size: calc(14px * var(--ts, 1)); gap: 3px; }
  .guide-step { padding: 4px 8px; font-size: calc(12px * var(--ts, 1)); }
  .guide-foot { margin-top: 10px; padding-top: 6px; }
  .log-text, .reflection-summary { font-size: calc(16px * var(--ts, 1)); }
  .log-name { font-size: calc(13px * var(--ts, 1)); }
  .reflection-note { font-size: calc(13px * var(--ts, 1)); padding: 6px 10px; }
  #reflection-list { gap: 10px; }
  .paper-note { padding: 24px 28px 18px; font-size: calc(18px * var(--ts, 1)); line-height: 28px; gap: 14px; }
  .paper-note.long {
    padding: 12px 22px 10px; gap: 6px; font-size: calc(14px * var(--ts, 1)); line-height: 21px;
    background: repeating-linear-gradient(to bottom, transparent 0 20px, var(--line) 20px 21px) local, #fbf8ef;
  }
  #note-image canvas { width: min(560px, 70vw, 120vh); }
  #pause-thought { font-size: calc(17px * var(--ts, 1)); }
}