/* Daily game (and phone page). Grid rules for every text style:
   - line-height is one rule pitch (--line) and spacing is in whole lines;
   - no glyph may be taller than one line: Bricolage accented capitals reach 0.84 em and Caveat
     0.89 em, so printed text stays ≤ ~2.15rem and handwriting ≤ ~2.1rem on the 34 px pitch;
   - js/ruling.js then puts every baseline exactly on a rule. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The header: the compact lockup (a sticker, so ruling.js leaves it alone), the grade slots and the sound button, in
   a row centred on the first rule. */
.top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 31px;
  margin-bottom: 19px;
}
.slots {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.slots li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.slots li.empty::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
}
.slots li.current::after { background: var(--pen); }
.slots .mark { width: 30px; height: 30px; }
/* The sound button is a 44 px tap target; the negative margin keeps the row as it was (a 34 px button). */
.top .icon-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -5px; padding: 0; }

/* intro: the primary lockup (ritka.css), where the paper bird's intro lands (js/crane.js). The block is the room
   for the flight above the label (the bird rises 0.54em over its border) plus the label, in whole lines. The label
   (6.07em with its 0.11em overhang) and the 5-star's ~20 px beyond it fit the column: 98 px is the 58 + 20 px page
   padding plus that overhang. From 389 px down it shrinks with the screen, to the 40 px primary minimum at 320. */
.intro-hero {
  font-size: clamp(2.5rem, min(max(3rem, 11vw), (100vw - 98px) / 6.07), 5.2rem);
  padding-top: calc(1em - 21px);
  height: calc(2.36em - 17px);
  height: round(up, calc(2.36em - 17px), 34px);
}
.dateline { margin: 0; color: var(--pencil); }
/* one line down to 320 px (216 px of the 242 px column); balanced if a fallback face is wider */
.tagline { margin: 0; font-family: var(--hand); font-weight: 600; font-size: clamp(23px, 7.2vw, 32px); color: var(--pen); text-wrap: balance; }
.lede { margin: var(--line) 0 0; font-size: 1.25rem; text-wrap: balance; }
.intro-actions { display: flex; align-items: baseline; gap: 22px; margin-top: var(--line); }
.how { margin-top: var(--line); max-width: 40ch; }
.how p { margin: 0; }
.scale { display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; padding: 0; margin: 0; }
.scale li { display: flex; align-items: baseline; gap: 6px; font-size: 0.92rem; color: var(--pencil); height: var(--line); }
.scale .mark { width: 30px; height: 30px; align-self: center; }

/* round */
.task-no { margin: 0; font-weight: 650; color: var(--pencil); }
.task {
  margin: 0;
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  font-weight: 760;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
/* The timer is drawn on a ruled line (data-align="line" centres it on the rule). */
.timer {
  margin: calc(var(--line) - 2px) 0 0;
  height: 4px;
  border-radius: 4px;
  background: rgba(28, 42, 107, 0.12);
  overflow: hidden;
}
.timer span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pen);
  border-radius: 4px;
  transform-origin: left center;
}
.timer.late span { background: var(--red); }

.answer-line { display: flex; gap: 10px; align-items: center; margin-top: var(--line); }
/* The ruled line is the writing line: the input has no border of its own. */
.pen-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 2rem;
  line-height: var(--line);
  color: var(--pen);
  padding: 0 2px;
  border-radius: 4px;
}
.pen-input::placeholder { font-family: var(--hand); font-weight: 500; color: #9aa1af; }
.pen-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(36, 72, 216, 0.25); }
.answer-line.shake { animation: shake 0.32s; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
}
.hint { min-height: var(--line); margin: 0; color: var(--red); font-weight: 550; }

/* reveal */
.task-small { margin: 0; font-size: 1.1rem; font-weight: 650; max-width: 34ch; }
.written {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: var(--line);
}
.written-answer {
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(1.9rem, 7vw, 2.1rem);
  color: var(--pen);
  overflow-wrap: anywhere;
}
.written-answer.none { color: var(--pencil); }
.written-mark { flex: none; width: 88px; height: 88px; align-self: center; margin: -40px 0 -6px; }
.written-mark .mark { width: 100%; height: 100%; }
/* a grade the bird lands on (a csillagos ötös) gets a free line above it, so its wings never touch the task text */
.written.has-bird { margin-top: calc(2 * var(--line)); }
.verdict { margin: 0; font-size: 1.05rem; text-wrap: pretty; }
.verdict strong { color: var(--red); font-weight: 700; }
.verdict .landed { opacity: 0; transition: opacity 0.3s ease-out; }
.verdict[data-landed] .landed { opacity: 1; }
.others { margin-top: var(--line); }

/* "Szerintem ez jó": appeal a rejected answer */
.flag { margin-top: 0; }
.flag p { margin: 0; color: var(--pencil); }
.flag-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.flag-btn {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: 4px 14px;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--pen); color: var(--pen); font-weight: 600; line-height: 1.4;
}
.flag-btn:hover { background: #e9ecf6; }
.flag-btn .hand { font-size: 1.25rem; line-height: 1; margin-right: 4px; }
.flag .thanks { font-family: var(--hand); font-weight: 600; font-size: 1.45rem; color: var(--pen); margin: 0; }

/* teacher's note in red pen when a flagged answer was approved (red may cross the rules) */
.notice {
  margin: 0 0 var(--line);
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--red);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.others-title { margin: 0; color: var(--pencil); }
.others ol { list-style: none; padding: 0; margin: 0 0 var(--line); }
.others li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 52px; align-items: baseline; gap: 12px; max-width: 420px; height: var(--line); }
.others li .ans { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.others li .bar { align-self: center; }
.others li .pct { color: var(--pencil); font-variant-numeric: tabular-nums; text-align: right; }
.others li.mine .ans { font-weight: 700; color: var(--pen); }

/* report card */
.report-title {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.grades { list-style: none; padding: 0; margin: var(--line) 0 0; }
/* Rows mixing fonts must stay exactly one line tall, or baseline alignment adds a few px and the
   next row would land a rule further down. The subject takes whatever room its answer leaves (the player's answer
   keeps its own first), and never less than a column's width, so the answers line up wherever the subjects are
   short. Only a long subject next to a long answer ends in an ellipsis. */
.grades { --subj: 38%; }
@media (min-width: 501px) { .grades { --subj: 45%; } } /* room for the longer subjects, still in one column */
.grades li { display: flex; align-items: baseline; height: var(--line); }
.grades .subj { flex: 0 1 auto; min-width: var(--subj); font-weight: 550; color: var(--pencil); font-size: 0.95rem; padding-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grades .ans { flex: none; max-width: calc(100% - var(--subj) - 44px); font-family: var(--hand); font-weight: 600; color: var(--pen); font-size: 1.55rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grades .ans.none { color: var(--pencil); }
.grades .g { flex: none; display: flex; justify-content: flex-end; width: 44px; margin-left: auto; align-self: center; height: 30px; }
.grades .mark { width: 30px; height: 30px; }
.average {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--line);
  font-weight: 650;
}
.average-num { font-family: var(--hand); font-weight: 700; color: var(--red); font-size: 3.4rem; line-height: var(--line); }
.rank { margin: 0; font-size: 1.05rem; }
.report-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: var(--line); }
.report-actions .btn { text-decoration: none; display: inline-block; }
.tomorrow { margin-top: var(--line); }

.foot {
  display: flex;
  flex-wrap: wrap; /* at 320 px the domain takes the next rule */
  gap: 0 22px;
  margin-top: calc(var(--line) * 2);
  font-size: 0.95rem;
}
/* 44 px tall tap targets on the 34 px line, without moving the text (the 22 px gap keeps neighbours apart) */
.foot a { position: relative; }
.foot a::after { content: ''; position: absolute; inset: -5px -8px; }
/* the domain as people read it (accented); links and QR codes use the ASCII ritkamadar.hu */
.foot-domain { margin-left: auto; color: var(--pencil); font-weight: 600; }

/* Narrow phones: seven grade slots, the brand and the sound button must fit on one line. The compact lockup is
   116 px at 19 px, so its header needs this from 500 px down (the 428–440 px iPhones included). */
@media (max-width: 500px) {
  .top { gap: 6px; }
  .top .slots { gap: 0; }
  .top .slots :is(li, .mark) { width: 24px; height: 24px; }
  .top .icon-btn { margin: -7px; }
  .lockup-compact .label-sticker { font-size: 16px; }
}
@media (max-width: 370px) {
  .top .slots :is(li, .mark) { width: 20px; height: 20px; }
}
/* 320 px: the header may reach into the page's right padding, never past the screen */
@media (max-width: 340px) {
  .top { gap: 4px; }
  .top .slots :is(li, .mark) { width: 17px; height: 17px; }
  .top .icon-btn { margin: -9px; }
}