/* public/app.css */
:root {
  --bg: #f6f7f9; --fg: #111; --muted: #667; --card: #fff; --line: #dde;
  --primary: #1f6feb; --primary-fg: #fff; --wait: #fff4d6; --ready: #d9f7e4; --error: #ffe0e0;
}
* { box-sizing: border-box; }
body { margin: 0; font: 18px/1.4 -apple-system, system-ui, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--fg); }
.page { max-width: 520px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 24px; margin: 0 0 16px; }
.muted { color: var(--muted); font-size: 15px; }
.row { display: flex; gap: 8px; align-items: center; }
input[type=text], input[type=password], input[type=tel] { width: 100%; font-size: 20px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.btn { font-size: 18px; padding: 12px 18px; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-fg); cursor: pointer; }
.btn:disabled { opacity: .5; }
.btn-secondary { background: #e6e8ee; color: var(--fg); }
.btn-big { width: 100%; font-size: 22px; font-weight: 700; padding: 22px 12px; margin: 6px 0; border-radius: 16px; line-height: 1.2; }
.btn-soon { background: var(--primary); }
.btn-here { background: #1f9d4d; }
.row .btn-big { width: auto; min-width: 0; flex: 1 1 0; }

/* Parent entry cards */
.entry { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 14px; margin: 14px 0; box-shadow: 0 2px 6px rgba(16, 24, 40, .06); }
.entry.is-waiting { background: var(--wait); border-color: #efd27a; }
.entry.is-ready { background: var(--ready); border-color: #8fd3aa; }
.entry.is-error { background: var(--error); border-color: #efb0b0; }
.campus-pill { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1a4fb5; background: #e3ecff; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.entry-name { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 0 0 14px; overflow-wrap: anywhere; }
.status { font-size: 18px; margin: 0 0 12px; color: #223; }
.status strong { font-weight: 800; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin: 12px 0; }
.card h2 { margin: 0 0 6px; font-size: 22px; }
.card-waiting { background: var(--wait); }
.card-ready { background: var(--ready); }
.card-error { background: var(--error); }
.link { background: none; border: 0; color: var(--primary); text-decoration: underline; font-size: 16px; cursor: pointer; padding: 0; }
select.campus { width: 100%; font-size: 18px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* Board (TV). Sizes scale with the viewport: phone, 720p, 1080p and 4K all work. */
.board { --pad: clamp(16px, 2.5vw, 48px); padding: var(--pad); min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, #1b2a5e 0%, #0b1020 55%); color: #fff; }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 32px); }
.board-kicker { font-size: clamp(14px, 1.4vw, 24px); letter-spacing: .12em; text-transform: uppercase; color: #8fa3d9; font-weight: 700; }
.board-title { font-size: clamp(28px, 4vw, 64px); font-weight: 800; line-height: 1.05; margin: 4px 0 0; }
.board-meta { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 28px); }
.board .count { font-size: clamp(14px, 1.4vw, 24px); font-weight: 700; color: #cfe; background: #26346a; padding: .35em .9em; border-radius: 999px; }
.board .clock { font-size: clamp(24px, 3vw, 52px); font-weight: 700; color: #cbd6f5; font-variant-numeric: tabular-nums; }
.board-note { font-size: clamp(14px, 1.2vw, 20px); color: #f3c969; margin: 0 0 12px; }
.board-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(320px, 31vw, 640px)), 1fr)); gap: clamp(12px, 1.5vw, 28px); }
.board-card { background: #172040; border: 2px solid #22305f; border-radius: clamp(16px, 1.5vw, 28px); padding: clamp(16px, 1.8vw, 32px); display: flex; justify-content: space-between; align-items: center; gap: clamp(12px, 1.5vw, 24px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.board-card.is-here { border-color: #2ea043; background: #14301f; }
.board-card .info { min-width: 0; flex: 1 1 auto; }
.board-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: .35em; }
.board-card .name { font-size: clamp(26px, 2.6vw, 48px); font-weight: 800; line-height: 1.1; overflow-wrap: break-word; }
.eta { display: inline-block; padding: .3em .8em; border-radius: 999px; font-size: clamp(13px, 1.2vw, 22px); font-weight: 700; background: #2b3a6b; color: #cfe; white-space: nowrap; }
.eta-here { background: #2ea043; color: #fff; }
.board-card .since { font-size: clamp(14px, 1.3vw, 24px); color: #9ab; }
.board-card .outside { flex: 0 0 auto; font-size: clamp(18px, 1.6vw, 28px); font-weight: 700; padding: .8em 1.2em; background: #2ea043; border-radius: 14px; }
.board-card .outside:hover { background: #3cb551; }
.board-card.flash { animation: flash 1.2s ease-in-out 3; }
@keyframes flash { 0%,100% { background: #172040; } 50% { background: #3b5bdb; } }
.board-card.is-here.flash { animation: flash-here 1.2s ease-in-out 3; }
@keyframes flash-here { 0%,100% { background: #14301f; } 50% { background: #2ea043; } }
.board-empty { margin: clamp(40px, 12vh, 160px) auto 0; text-align: center; color: #8fa3d9; font-size: clamp(20px, 2.4vw, 40px); }
.board-empty-mark { width: 2.2em; height: 2.2em; margin: 0 auto .4em; border-radius: 50%; background: #16244d; color: #2ea043; display: flex; align-items: center; justify-content: center; font-size: 1.2em; font-weight: 800; }
.board-foot { margin-top: clamp(24px, 4vh, 64px); text-align: right; }
.board .link { color: #6f86c9; font-size: clamp(13px, 1.1vw, 18px); }
@media (max-width: 600px) {
  .board-card { flex-direction: column; align-items: stretch; }
  .board-card .outside { width: 100%; }
  .board-foot { text-align: center; }
}
.pin-form { max-width: 360px; margin: 20vh auto; text-align: center; }
.pin-form input { text-align: center; letter-spacing: 6px; font-size: 32px; margin: 12px 0; }