/* honour.css — the Honour Roll: the strip on the end screens (honourLine.js)
   and the notice board itself (honourRoll.js). */

/* ── The strip above the end screen's buttons ────────────── */
.honour-line { box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; width: min(94vw, 520px); padding: 10px 14px 10px 10px;
  color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 var(--ink); font-family: var(--ui);
  opacity: 0; transform: translateY(10px); transition: opacity .35s 1.3s, transform .4s 1.3s var(--spring); }
.report-page.is-in .honour-line, .book-page.is-in .honour-line { opacity: 1; transform: none; }
.book-page .honour-line { transition-delay: 2.9s; }                  /* with THE BOOK's buttons, once the stamp is down */
.honour-line .medal { flex: none; width: 34px; height: 34px; }
.honour-line .medal svg { width: 100%; height: 100%; }
.honour-line .body { flex: 1; min-width: 0; min-height: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.honour-line .say { margin: 0; font: 800 15px/1.25 var(--ui); }
.honour-line[data-state="queued"] .say { font-weight: 700; color: rgba(22, 18, 14, .7); }
.honour-line button { font: 800 15px/1 var(--ui); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.honour-line button:focus-visible, .honour-line input:focus-visible { outline: 3px solid var(--uniform-blue); outline-offset: 2px; }
.honour-line .see { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 8px 0 12px; background: #fff;
  border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); }
.honour-line .see svg { width: 18px; height: 18px; }
.honour-line .ask { flex: 1; }
.honour-line .row { display: flex; gap: 8px; margin-top: 6px; }
.honour-line input { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 2px 10px 0;
  font: 700 24px/1 var(--hand); color: #26306e; background: #fff; border: 2px solid var(--ink); border-radius: 8px; }
.honour-line input::placeholder { color: rgba(38, 48, 110, .4); }
.honour-line .save { min-height: 44px; padding: 0 16px; background: var(--pencil); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); }
.honour-line .save:disabled { opacity: .6; }
.honour-line .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.honour-line .later { flex: none; min-height: 40px; padding: 0 2px; background: none; border: 0; text-decoration: underline 2px; text-underline-offset: 4px; }
.honour-line .hint { margin: 0; font: 700 12px/1.3 var(--ui); color: rgba(22, 18, 14, .6); }
.honour-line .hint.is-bad { color: var(--red-ink); }

@media (prefers-reduced-motion: reduce) { .honour-line { transition: none; } }

/* ── The notice board ────────────────────────────────────── */
.honour-page { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; box-sizing: border-box;
  padding: calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 12px); font-family: var(--ui); color: var(--ink); opacity: 0; transition: opacity .25s; }
.honour-page.is-in { opacity: 1; }
.honour-page .backdrop { position: absolute; inset: 0; background: rgba(22, 18, 14, .62); backdrop-filter: blur(3px); }
/* Cork in a wooden frame, the sheet pinned on it. */
.honour-page .board { position: relative; box-sizing: border-box; width: min(100%, 470px); padding: 12px 8px 8px;
  background: radial-gradient(circle at 30% 40%, rgba(60, 30, 10, .16) 0 1px, transparent 1.6px) 0 0 / 8px 8px,
              radial-gradient(circle at 70% 70%, rgba(255, 236, 200, .14) 0 1px, transparent 1.6px) 0 0 / 11px 11px, #b8874f;
  border: 9px solid var(--wood-b); outline: 2.5px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(22, 18, 14, .35), 0 6px 0 var(--ink), 0 26px 60px rgba(0, 0, 0, .45);
  transform: translateY(30px) scale(.96); transition: transform .45s var(--spring); }
.honour-page.is-in .board { transform: none; }
/* The names scroll inside the sheet; the tabs and the player's own line stay put. */
.honour-page .sheet { position: relative; box-sizing: border-box; display: flex; flex-direction: column; max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 70px);
  padding: 14px 12px 10px; background: #fffdf4; border: 2px solid var(--ink); border-radius: 3px; box-shadow: 0 3px 0 rgba(22, 18, 14, .5); rotate: -.4deg; }
.honour-page .pin { position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7a6e, var(--red-ink) 60%); border: 2px solid var(--ink); }
.honour-page header { position: relative; padding-right: 48px; }
.honour-page header small { display: block; font: 800 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--uniform-blue); }
.honour-page h2 { margin: 4px 0 10px; font: 800 30px/1 var(--display); }
.honour-page button { font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.honour-page button:focus-visible, .honour-page input:focus-visible { outline: 3px solid var(--uniform-blue); outline-offset: 2px; }
.honour-page .close { position: absolute; top: -4px; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 2px 0 var(--ink); }
.honour-page .close svg { width: 20px; height: 20px; }
.honour-page .tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.honour-page .tabs button { min-width: 0; min-height: 40px; padding: 0 4px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; font: 800 14px/1 var(--ui); }
.honour-page .tabs button[aria-pressed="true"] { background: var(--pencil); box-shadow: 0 2px 0 var(--ink); }
.honour-page .levels-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.honour-page .levels-row .tag { font: 800 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(22, 18, 14, .55); }
.honour-page .levels { flex: 1; grid-template-columns: repeat(6, 1fr); }
.honour-page .levels button { min-height: 38px; }
.honour-page .period { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.honour-page .period button { min-height: 40px; background: #fff; border: 0; font: 800 14px/1 var(--ui); }
.honour-page .period button + button { border-left: 2px solid var(--ink); }
.honour-page .period button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.honour-page .list { flex: 1 1 auto; min-height: 120px; overflow-y: auto; margin-top: 6px; overscroll-behavior: contain; }
.honour-page .note { margin: 0; padding: 34px 8px; text-align: center; font: 700 15px/1.4 var(--ui); color: rgba(22, 18, 14, .65); }
.honour-page .names { list-style: none; margin: 0; padding: 0; }
.honour-page .names li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 6px; padding: 3px 4px;
  border-bottom: 1.5px dashed rgba(22, 18, 14, .2); }
.honour-page .rank { font: 700 26px/1 var(--hand); color: var(--red-ink); text-align: center; }
.honour-page .is-1 .rank { color: #b07800; }
.honour-page .is-top .rank { font-size: 30px; }
.honour-page .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 24px/1.15 var(--hand); color: #26306e; }
.honour-page .stars { display: flex; align-items: center; gap: 4px; font: 800 15px/1 var(--ui); }
.honour-page .stars svg { width: 18px; height: 18px; }
/* The player's own row: a highlighter stroke. */
.honour-page .names li.is-you { background: linear-gradient(transparent 12%, rgba(255, 198, 41, .6) 12% 88%, transparent 88%); }
.honour-page .names li.gap { display: block; padding: 0; text-align: center; font: 800 18px/1.2 var(--ui); color: rgba(22, 18, 14, .4); border: 0; }
.honour-page .count { margin: 6px 0 0; text-align: right; font: 700 12px/1 var(--ui); color: rgba(22, 18, 14, .55); }
.honour-page footer { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; padding-top: 10px;
  border-top: 2px solid rgba(22, 18, 14, .8); font: 700 14px/1.3 var(--ui); }
.honour-page footer p { margin: 0; }
.honour-page footer b { font: 700 21px/1 var(--hand); color: #26306e; }
.honour-page .edit { min-height: 40px; padding: 0 4px; background: none; border: 0; font: 800 14px/1 var(--ui); text-decoration: underline 2px; text-underline-offset: 4px; }
.honour-page .rename { flex: 1; }
.honour-page .rename label { font: 800 13px/1 var(--ui); }
.honour-page .rename .row { display: flex; gap: 8px; margin-top: 6px; }
.honour-page .rename input { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 2px 10px 0;
  font: 700 24px/1 var(--hand); color: #26306e; background: #fff; border: 2px solid var(--ink); border-radius: 8px; }
.honour-page .rename .save { min-height: 44px; padding: 0 16px; background: var(--pencil); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); font: 800 15px/1 var(--ui); }
.honour-page .hint { margin: 6px 0 0; font: 700 12px/1.3 var(--ui); color: rgba(22, 18, 14, .6); }
.honour-page .hint.is-bad { color: var(--red-ink); }

@media (prefers-reduced-motion: reduce) { .honour-page, .honour-page .board { transition: none; } }