/* 2D overlays over the 3D school (SANAD spec §6): speech bubbles, the "note recorded" slip, the
   folder button, the short question panel, the grade record and the sketchbook. Restrained paper
   and ink in the game's palette (style.css: --paper, --ink, --green, --gold). Colours mark
   interface states only, always with words or icons beside them.
   --ts is the text-size setting (main.js), 1 / 1.15 / 1.3. */
:root {
  --ts: 1;
  --bubble-paper: #f4ebdd;
  --bubble-ink: #29343a;
  --bubble-muted: #59646a;
  --teal: #476d70;
  --ochre: #a57d43;
}

[hidden] { display: none !important; }

/* ---------- speech bubbles ---------- */
#bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
body:not([data-state="play"]) #bubbles { visibility: hidden; }
.bubble {
  position: absolute; left: 0; top: 0; width: max-content; max-width: clamp(240px, 19vw, 360px);
  padding: 12px 16px 14px; background: var(--bubble-paper); color: var(--bubble-ink);
  border: 2px solid var(--bubble-ink); border-radius: 14px 16px 13px 15px / 15px 13px 16px 14px;
  box-shadow: 0 3px 0 rgba(41, 52, 58, 0.18), 0 8px 18px rgba(0, 0, 0, 0.18);
  opacity: 0; transition: opacity 0.18s ease-out, translate 0.18s ease-out; translate: 0 4px;
  will-change: transform;
}
.bubble.on { opacity: 1; translate: 0 0; }
.bubble-name { font-size: calc(13px * var(--ts)); font-weight: 800; color: var(--bubble-muted); margin-bottom: 2px; }
.bubble-text { font-size: calc(clamp(18px, 1.15vw, 22px) * var(--ts)); font-weight: 600; line-height: 1.5; }
/* The tail, pointing down at the speaker (--tail: its x inside the bubble). */
.bubble::before, .bubble::after { content: ''; position: absolute; top: 100%; left: var(--tail, 50%); translate: -50% 0; border: solid transparent; }
.bubble::before { border-width: 13px 9px 0; border-top-color: var(--bubble-ink); }
.bubble::after { border-width: 10px 6.5px 0; border-top-color: var(--bubble-paper); margin-top: -1px; }
.bubble.no-tail::before, .bubble.no-tail::after { display: none; }
/* The teacher's own words: the same bubble, low in the middle, with a gold edge. */
.bubble.teacher { border-color: var(--teal); }
.bubble.teacher .bubble-name { color: var(--teal); }
/* A group the teacher looks at: a small neutral "…" (the same for every group). */
.bubble-marker {
  position: absolute; left: 0; top: 0; width: 36px; height: 24px; display: grid; place-items: center;
  padding-bottom: 6px; border: 2px solid var(--bubble-ink); border-radius: 12px; background: var(--bubble-paper);
  font-weight: 900; color: var(--bubble-ink); letter-spacing: 1px; opacity: 0; transition: opacity 0.18s;
}
.bubble-marker.on { opacity: 0.9; }

/* ---------- the notebook button and the "new evidence" card (game/notify.js) ---------- */
/* Bottom corner, a paper chip: icon, «الملاحظات», the key; an amber dot while something new
   hasn't been looked at in the folder. */
#touch-folder { display: none; }
body[data-state="play"] #touch-folder {
  display: flex; align-items: center; gap: 10px; position: fixed; z-index: 2;
  right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  padding: 9px 16px 9px 12px; border: 2px solid #2f4b45; border-radius: 10px;
  background: var(--bubble-paper); color: var(--bubble-ink);
  box-shadow: 0 0 0 3px rgba(244, 235, 221, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);
  font-size: calc(17px * var(--ts)); font-weight: 800;
}
#touch-folder svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hud-key { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #e2dccd; color: var(--bubble-ink); font-size: 13px; font-weight: 900; border: 1px solid rgba(41, 52, 58, 0.25); }
body.touch .hud-key { display: none; }
.hud-dot { position: absolute; top: -6px; left: -6px; width: 14px; height: 14px; border-radius: 50%; background: #e09a2c; box-shadow: 0 0 0 2px var(--bubble-paper), 0 1px 3px rgba(0, 0, 0, 0.4); }
/* A card just went in: a short glow. */
#touch-folder.pulse, #talk-folder.pulse { animation: hud-pulse 0.9s ease-out; }
@keyframes hud-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 154, 44, 0.75), 0 6px 18px rgba(0, 0, 0, 0.3); }
  100% { box-shadow: 0 0 0 16px rgba(224, 154, 44, 0), 0 6px 18px rgba(0, 0, 0, 0.3); }
}

/* The notification: a slip of paper on a second sheet, a teal tape, the type icon in a teal
   circle (on the left in RTL), «ملاحظة جديدة», the title, the type word. Above the notebook button;
   in a conversation, above the dialogue box near «ملف الطالب»; over the folder or a record, low in
   the other corner. Only the card itself takes clicks. */
#slip {
  position: fixed; z-index: 6; right: max(18px, env(safe-area-inset-right)); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px);
  width: clamp(300px, 30vw, 500px); pointer-events: none;
  opacity: 0; translate: 0 14px; transition: opacity 0.26s ease-out, translate 0.26s ease-out;
}
#slip.on { opacity: 1; translate: 0 0; }
#slip.on .slip-card { pointer-events: auto; }
/* Leaving: into the notebook button (--to-x, --to-y from game/notify.js), or a fade. */
#slip.shrink { transition: opacity 0.46s ease-in, transform 0.46s cubic-bezier(0.5, 0, 0.75, 0.4); transform: translate(var(--to-x, 0), var(--to-y, 0)) scale(0.12); opacity: 0; }
#slip.fade { transition: opacity 0.2s; }
body.talking #slip { right: auto; left: max(4vw, env(safe-area-inset-left)); bottom: calc(3.5vh + 290px); }
body:has(#folder.on, #record.on) #slip { right: auto; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); }
.slip-card {
  position: relative; width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 22px 14px 18px;
  border: none; border-radius: 3px 5px 4px 6px / 6px 4px 5px 3px; background: var(--bubble-paper); color: var(--bubble-ink); text-align: right;
  background-image: radial-gradient(ellipse at 80% 0%, rgba(255, 255, 255, 0.5), transparent 60%), radial-gradient(ellipse at 10% 100%, rgba(165, 125, 67, 0.12), transparent 55%);
  box-shadow: 0 1px 0 rgba(41, 52, 58, 0.15), 0 10px 26px rgba(0, 0, 0, 0.32); cursor: pointer;
}
/* The sheet underneath, a little askew. */
.slip-card::before { content: ''; position: absolute; inset: 6px -5px -6px 5px; z-index: -1; border-radius: 4px; background: #e7dcc8; transform: rotate(-1.3deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.slip-tape { position: absolute; top: -7px; right: 14%; width: 64px; height: 16px; background: #476d70; opacity: 0.9; transform: rotate(-2deg); border-radius: 1px; }
.slip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.slip-head { font-size: calc(14px * var(--ts)); font-weight: 800; color: var(--ochre); }
.slip-title { font-size: calc(clamp(18px, 1.35vw, 24px) * var(--ts)); font-weight: 900; line-height: 1.35; }
.slip-type { font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--bubble-muted); }
.slip-icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #3f6e6a; color: #f4ebdd; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18); }
.slip-icon svg { width: 30px; height: 30px; }
.slip-card:hover { filter: brightness(1.03); }
.slip-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-height: 520px) {
  #slip { width: min(340px, 60vw); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 56px); }
  .slip-card { padding: 12px 14px 10px 12px; gap: 10px; }
  .slip-icon { width: 42px; height: 42px; }
  .slip-icon svg { width: 22px; height: 22px; }
  body[data-state="play"] #touch-folder { padding: 6px 12px 6px 10px; font-size: calc(14px * var(--ts)); }
}
/* ---------- a short question ---------- */
#ask { z-index: 7; background: rgba(22, 29, 33, 0.55); }
.ask-panel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(560px, 92vw); max-height: 90vh; overflow-y: auto; }
.ask-text { margin: 4px 0 14px; font-size: calc(17px * var(--ts)); line-height: 1.7; white-space: pre-line; }
.ask-buttons { display: flex; flex-direction: column; gap: 8px; }

/* ---------- the grade record and the sketchbook: a register on the folder's cloth ---------- */
/* Built from the folder's look (folder.css: brass corners, cloth, cream page, the Ocean Brush hand,
   Cila's tab, tape and ✕ masks). Sized to fit the screen: no scrolling. */
#record { z-index: 5; background: rgba(8, 16, 12, 0.55); --hand: 'Ocean Brush', 'Zain', sans-serif; }
.record-book { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.reg {
  --u: calc(min(1000px, 94vw, 150vh) / 100);
  position: relative; width: min(1000px, 94vw, 150vh); padding: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 1);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 35% 25%, #2f574a, #24463b 70%);
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 5) rgba(0, 0, 0, 0.55), inset 0 0 calc(var(--u) * 2.2) rgba(0, 0, 0, 0.35);
}
.reg-page {
  position: relative; max-height: calc(92vh - var(--u) * 4.8); overflow: hidden;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 6) calc(var(--u) * 2.2) calc(var(--u) * 3.2);
  color: var(--ink); border-radius: calc(var(--u) * 0.3);
  background:
    linear-gradient(90deg, transparent 0 calc(100% - var(--u) * 4.2), rgba(190, 80, 70, 0.32) calc(100% - var(--u) * 4.2) calc(100% - var(--u) * 4.2 + 2px), transparent 0),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 3.2 - 1px), rgba(110, 135, 165, 0.2) calc(var(--u) * 3.2 - 1px) calc(var(--u) * 3.2)),
    radial-gradient(ellipse at 70% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    #f4ecd9;
  box-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 1) rgba(0, 0, 0, 0.35);
  font-size: calc(max(15px, var(--u) * 1.6) * var(--ts));
}
.reg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px calc(var(--u) * 2); margin-bottom: calc(var(--u) * 0.6); }
.reg-title { margin: 0; font-family: var(--hand); font-size: calc(max(28px, var(--u) * 4) * var(--ts)); font-weight: 700; line-height: 1.15; color: #1f3b5c; }
.reg-sub { font-family: var(--hand); font-size: calc(max(17px, var(--u) * 1.9) * var(--ts)); color: #3e5568; border-bottom: 2px solid rgba(110, 150, 90, 0.75); }
.reg-hint { margin: 0 0 calc(var(--u) * 1.2); font-weight: 600; color: #5d5446; }
.reg-close { position: absolute; top: calc(var(--u) * 1); left: calc(var(--u) * 1); width: max(36px, calc(var(--u) * 3.4)); height: max(36px, calc(var(--u) * 3.4)); display: grid; place-items: center; padding: 0; border: none; border-radius: 50%; background: none; color: var(--ink); }
.reg-close:hover { background: rgba(0, 0, 0, 0.07); }
.reg-close .ico { width: 50%; height: 50%; }
/* Back to the list: a maroon paper label before the student's name, pointing back. */
.reg-tab {
  position: relative; z-index: 0; align-self: center; padding: calc(var(--u) * 0.5) calc(var(--u) * 2.6) calc(var(--u) * 0.5) calc(var(--u) * 1.4);
  border: none; background: none; color: #fbf3e4; font-family: var(--hand); font-size: calc(max(16px, var(--u) * 1.7) * var(--ts));
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}
.reg-tab::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: #8f3a35; border-radius: 3px;
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
}
.reg-tab:hover::before { background: #a5453f; }/* The class list: names written on the ruled lines, numbered, two columns. */
.roster { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: calc(var(--u) * 5); }
.roster li { break-inside: avoid; }
.roster-name {
  display: flex; align-items: baseline; gap: calc(var(--u) * 1.4); width: 100%; height: calc(var(--u) * 3.2 * 1.4); padding: 0 calc(var(--u) * 0.6);
  border: none; border-radius: 3px; background: none; text-align: right; color: #1d2a33;
  font-family: var(--hand); font-size: calc(max(20px, var(--u) * 2.5) * var(--ts)); line-height: calc(var(--u) * 3.2 * 1.4);
}
.roster-n { min-width: 1.4em; font-family: 'Zain', sans-serif; font-size: 0.8em; color: #8f3a35; }
.roster-name:hover { background: rgba(167, 201, 148, 0.35); }
/* A student's page: two ledger columns, written into. */
.grade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); }
.grade-table { width: 100%; border-collapse: collapse; }
.grade-table caption { caption-side: top; text-align: right; padding-bottom: calc(var(--u) * 0.4); font-family: var(--hand); font-size: 1.25em; color: #1f3b5c; }
.grade-table th, .grade-table td { height: calc(var(--u) * 3.2); padding: 0 calc(var(--u) * 0.8); border-bottom: 1.5px solid rgba(43, 38, 34, 0.25); text-align: right; }
.grade-table th { font-size: 0.8em; font-weight: 800; color: #6f6658; }
.grade-table td { font-weight: 700; }
.grade-table .score { font-size: 1.15em; font-weight: 900; color: #23344a; }
.rec-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px calc(var(--u) * 1.6); margin-top: calc(var(--u) * 2); }
.rec-why { font-weight: 700; color: #5d5446; }
/* The record button: the folder's navy save button. */
.rec-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: calc(var(--u) * 0.9) calc(var(--u) * 2.8); border: none; border-radius: calc(var(--u) * 0.5);
  background: linear-gradient(180deg, #284a70, #1f3b5c); color: #f4f0e6; font-size: 1em; font-weight: 800;
  box-shadow: 0 calc(var(--u) * 0.2) 0 #142a42, 0 calc(var(--u) * 0.4) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.25);
}
.rec-btn:hover:not(:disabled) { filter: brightness(1.12); }
.rec-btn:disabled { opacity: 0.55; cursor: default; }
/* Small paper chips (sketchbook sections and page turns). */
.reg-chip { padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6); border: 1.5px solid rgba(43, 38, 34, 0.35); border-radius: calc(var(--u) * 0.4); background: #fffdf7; color: var(--ink); font-weight: 800; font-size: 0.9em; }
.reg-chip:hover:not(:disabled) { border-color: #1f3b5c; }
.reg-chip:disabled { opacity: 0.4; cursor: default; }

.sk-sections { display: flex; gap: 8px; margin: 0 0 calc(var(--u) * 0.8); }
.sk-page { position: relative; display: grid; justify-items: center; gap: 4px; }
.sk-date { font-family: var(--hand); font-size: calc(max(20px, var(--u) * 2.4) * var(--ts)); color: #2b2622; }
.sk-canvas { height: min(42vh, 420px); width: auto; max-width: 100%; aspect-ratio: 640 / 460; border-radius: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); background: #fbf7ec; }
.sk-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.sk-count { font-weight: 700; color: #6f6658; min-width: 9em; text-align: center; }
.sk-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 8px; }
.sk-tick { padding: 2px 7px; border: 1px solid rgba(41, 52, 58, 0.3); border-radius: 4px; background: #fffdf7; font-size: calc(12px * var(--ts)); font-weight: 700; color: var(--ink); }
.sk-tick.blank { color: #8a8274; }
.sk-tick.on { border-color: #1f3b5c; box-shadow: inset 0 0 0 1.5px #1f3b5c; background: #eef2f6; }
/* Keyboard focus (also see style.css). */
#record :focus-visible, #ask :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* The reflection's notes review. */
.reading.done .reading-items { color: #2f5a3a; font-weight: 700; }

@media (max-height: 520px), (max-width: 700px) {
  /* Phones held sideways: the register fills the screen, lines and type tighten. */
  .reg { --u: calc(min(100vw, 190vh) / 100); width: 100vw; height: 100vh; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); border-radius: 0; }
  .reg .brass { display: none; }
  .reg-page { height: 100%; max-height: none; padding: 10px 46px 8px 14px; font-size: calc(14px * var(--ts)); }
  .reg-title { font-size: calc(24px * var(--ts)); }
  .reg-sub { font-size: calc(14px * var(--ts)); }
  .reg-hint { margin-bottom: 4px; }
  .roster-name { height: 34px; line-height: 34px; font-size: calc(18px * var(--ts)); }
  .grade-cols { gap: 14px; }
  .grade-table th, .grade-table td { height: 28px; }
  .rec-foot { margin-top: 8px; }
  .reg-tab { padding: 4px 12px 4px 14px; font-size: calc(14px * var(--ts)); }
  .sk-canvas { height: 48vh; }
  .bubble { max-width: min(300px, 60vw); padding: 8px 12px 10px; }
  .bubble-text { font-size: calc(16px * var(--ts)); }
}

@media (prefers-reduced-motion: reduce) {
  .bubble, #slip { transition: opacity 0.15s; translate: none !important; }
}
.reading-sign { min-width: 8.5em; }
.reading.missed .reading-items { color: #6b4e22; }
.reading-wrong { font-size: calc(13px * var(--ts)); font-weight: 600; color: #8f3a35; }