/* Student page: phone-first, same exchange world as the deck. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.top-host { color: #aab3c8; font-family: var(--mono); font-size: 13px; letter-spacing: 0; text-transform: none; }

.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); }

.intro { padding: 24px 0 8px; }
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 17vw, 96px);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.intro p { margin: 12px 0 14px; max-width: 46ch; }
.me {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 2px solid var(--navy);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 14px;
}
.me b { font-weight: 600; }

.block { margin-top: 28px; }
h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 6px;
}

/* lamps (shared look with the deck) */
.lamp { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--lamp-off); flex: none; }
.lamp.on { background: radial-gradient(circle at 40% 35%, #fff4cf, var(--amber) 55%, #b98100); box-shadow: 0 0 10px 2px var(--amber-glow); }
.lamp.b1 { background: radial-gradient(circle at 40% 35%, #d7e2ff, var(--b1) 60%); }
.lamp.b2 { background: radial-gradient(circle at 40% 35%, #ffd9d9, var(--b2) 60%); }
.lamp.b3 { background: radial-gradient(circle at 40% 35%, #d6f5e2, var(--b3) 60%); }

/* method switch */
.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.m {
  appearance: none;
  text-align: left;
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  border-radius: 4px;
  padding: 9px 10px 8px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  font: inherit;
  min-height: 56px;
  transition: background-color 160ms var(--ease-out);
}
.m b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; }
.m span { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.m[aria-checked="true"] { background: var(--navy); color: var(--paper); }
.m[aria-checked="true"] span { color: #c9d0e0; }
.m:hover { background: var(--amber-soft); }
.m[aria-checked="true"]:hover { background: var(--navy-2); }

.send { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.go {
  appearance: none;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--paper);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 16px 18px 13px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out);
}
.go:active { transform: translateY(1px); }
.go.go-2 { background: var(--paper); color: var(--navy); font-size: 22px; padding: 12px 16px 9px; }
.go.go-2:hover { background: var(--amber-soft); }
.go[disabled] { opacity: 0.55; cursor: progress; }
.go.is-busy .lamp { background: radial-gradient(circle at 40% 35%, #fff4cf, var(--amber) 55%, #b98100); box-shadow: 0 0 10px 2px var(--amber-glow); }

/* answer */
.answer { background: var(--paper); border: 2px solid var(--navy); min-height: 128px; display: grid; }
.answer.is-empty { place-items: center; border-style: dashed; border-color: var(--navy-3); }
.answer-empty { margin: 0; padding: 18px; color: var(--ink-soft); text-align: center; }
.ans-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px 10px; }
.ans-jack { width: 34px; height: 34px; border-radius: 50%; background: #0b1224; flex: none; box-shadow: inset 0 0 0 6px var(--line, var(--navy)); }
.ans-name { font-family: var(--display); font-size: clamp(40px, 12vw, 58px); line-height: 0.9; text-transform: uppercase; letter-spacing: 0.02em; }
.ans-sub { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.ans-strip { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--navy); margin: 0; }
.ans-strip > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--rule); }
.ans-strip > div:first-child dd { white-space: nowrap; overflow-wrap: normal; }
.ans-strip > div { padding: 8px 12px; border-right: 1px solid var(--rule); min-width: 0; }
.ans-strip > div:last-child { border-right: 0; }
.ans-strip dt { font-family: var(--display); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.ans-strip dd { margin: 0; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.answer.is-error { border-color: var(--navy); background-image: repeating-linear-gradient(135deg, rgba(139, 147, 166, 0.25) 0 3px, transparent 3px 10px); }
.ans-err { padding: 16px; }
.ans-err b { display: block; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.answer.flash { animation: flash 520ms var(--ease-out); }
@keyframes flash { from { box-shadow: 0 0 0 6px var(--amber); } to { box-shadow: 0 0 0 0 transparent; } }

/* tape */
.tape { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; min-height: 30px; }
.chip {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  color: #fff;
  background: var(--navy);
  animation: chip-in 280ms var(--ease-out);
}
.chip.b1 { background: var(--b1); }
.chip.b2 { background: var(--b2); }
.chip.b3 { background: var(--b3); }
.chip.fail { background: var(--paper) repeating-linear-gradient(135deg, var(--down) 0 3px, transparent 3px 8px); color: var(--navy); border: 2px solid var(--navy); }
.chip.hit { background: var(--amber); color: var(--navy); }
@keyframes chip-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* headers */
.hdrs { margin-top: 12px; border: 2px solid var(--navy); background: var(--paper); }
.hdrs summary { cursor: pointer; padding: 10px 14px; font-family: var(--display); font-size: 21px; letter-spacing: 0.06em; text-transform: uppercase; list-style: none; display: flex; align-items: center; gap: 12px; }
.hdrs summary::-webkit-details-marker { display: none; }
.hdrs summary::before { content: ""; width: 9px; height: 9px; border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); transform: rotate(-45deg); transition: transform 200ms var(--ease-out); flex: none; }
.hdrs[open] summary::before { transform: rotate(45deg); }
.hdrs-grid { display: grid; gap: 12px; padding: 0 14px 14px; }
.hdrs-h { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.hdrs dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-family: var(--mono); font-size: 13px; }
.hdrs dt { color: var(--navy); font-weight: 700; }
.hdrs dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) { .hdrs-grid { grid-template-columns: 1fr 1fr; } }

/* shields */
.shield { border: 2px solid var(--navy); background: var(--paper); padding: 12px 14px; margin-bottom: 10px; }
.shield-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shield-row b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.shield-row span { font-size: 15px; color: var(--ink-soft); }
.out:empty { display: none; }
.out { margin-top: 10px; font-family: var(--mono); font-size: 14px; line-height: 1.5; }
.out .big { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: 0.03em; }

/* class tally */
.tally { display: grid; gap: 6px; }
.t-row { display: grid; grid-template-columns: 18px 110px 1fr 64px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.t-row .lamp { width: 14px; height: 14px; }
.t-name { font-family: var(--display); font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; }
.t-bar { height: 14px; background: var(--ground-2); position: relative; overflow: hidden; }
.t-bar span { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform 500ms var(--ease-out); }
.t-num { font-family: var(--display); font-size: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.t-row.is-down .t-name { text-decoration: line-through 2px; color: var(--ink-faint); }
.t-row.is-down .t-bar { background-image: repeating-linear-gradient(135deg, var(--down) 0 3px, transparent 3px 8px); }
.t-row.is-down .t-num { font-size: 18px; color: var(--ink-soft); }

.muted { color: var(--ink-faint); font-size: 14px; }
.foot { margin-top: 36px; padding-top: 14px; border-top: 2px solid var(--navy); font-size: 15px; }
.foot p { margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}