/* ==========================================================================
   Pronostics Hockey — stylesheet

   Direction: the page sits on ice, the score entry is an arena scoreboard.
   Amber-on-dark is reserved exclusively for the board, so the one bright
   thing on the page is the one thing the visitor has to fill in.
   Section rules borrow the rink's own markings: red for the centre line
   (the board, the submit), blue for the blue lines (section headings).
   ========================================================================== */

:root {
  /* Ice */
  --ice:        #eef3f7;
  --ice-deep:   #dce7ef;
  --ice-edge:   #c2d3e0;

  /* Boards and lettering */
  --board:      #101820;
  --board-lift: #1b2733;
  --ink:        #16202a;
  --ink-soft:   #5b6b7a;

  /* Rink markings */
  --red:        #c8102e;
  --blue:       #1b4f9c;

  /* Scoreboard bulbs */
  --amber:      #ffb000;
  --amber-dim:  #6b4b06;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ice);
  background-image:
    radial-gradient(120% 60% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 60%);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--ink-soft); }

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 3px solid var(--red);
}

.masthead__logo { max-height: 40px; width: auto; }

/* --- Shell --------------------------------------------------------------- */

.shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px calc(48px + env(safe-area-inset-bottom));
}

.title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.intro {
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.section {
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--blue);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section--ranking { border-bottom-color: var(--red); }

/* --- The scoreboard ------------------------------------------------------ */

.board {
  padding: 16px 14px 14px;
  border-radius: var(--radius);
  background: var(--board);
  background-image: linear-gradient(180deg, var(--board-lift) 0%, var(--board) 46%);
  box-shadow: 0 12px 28px -14px rgba(16, 24, 32, 0.7);
}

.board__clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.board__clock-label {
  color: #8494a3;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.board__clock-time {
  color: var(--amber);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.board__clock-time i {
  font-style: normal;
  animation: blink 1s step-end infinite;
}

/* Shown only when the match is more than a day out. */
.board__clock-unit {
  margin-left: 1px;
  color: var(--amber-dim);
  font-size: 0.75em;
}

@keyframes blink { 50% { opacity: 0.25; } }

.board__ice {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 18px 0 14px;
}

.side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

.side__crest { width: 46px; height: 46px; object-fit: contain; }

.side__tag {
  color: #7b8b9a;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.side__name {
  color: #e8eef3;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.digits { display: flex; align-items: center; gap: 6px; }

.digits__sep {
  color: var(--amber-dim);
  font-family: var(--mono);
  font-size: 1.6rem;
}

.digit {
  width: 58px;
  padding: 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: #06090c;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
  color: var(--amber);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: none;
}

.digit::placeholder { color: var(--amber-dim); }

.digit:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-color: var(--amber);
}

.board__meta {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #8494a3;
  font-size: 0.82rem;
  text-align: center;
}

.hint {
  margin: 8px 2px 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

/* Sub-question sitting directly under a section heading rather than after a
   field: pulls up against the heading's rule and spaces the control below. */
.hint--above { margin: 6px 2px 10px; }

/* --- Enterprise picker ---------------------------------------------------- */

.picker {
  border: 1px solid var(--ice-edge);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.search {
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--ice-deep);
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  appearance: none;
}

.search:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.picker__list {
  max-height: 264px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--ice);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.option:last-child { border-bottom: 0; }

.option[aria-selected="true"] {
  background: #eaf1fa;
  box-shadow: inset 4px 0 0 var(--blue);
  font-weight: 600;
}

.option[disabled] { color: #9aa8b4; cursor: not-allowed; }

.option:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.option__left { display: flex; flex-direction: column; }

.option__slots {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.76rem;
  white-space: nowrap;
}

.option[disabled] .option__slots { color: var(--red); }

.picker__empty { margin: 0; padding: 16px 14px; color: var(--ink-soft); font-size: 0.9rem; }

/* --- Fields and actions ---------------------------------------------------- */

.text-field {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ice-edge);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  appearance: none;
}

.text-field:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }

.submit {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.submit[disabled] { background: var(--ice-edge); color: #7d8d99; cursor: not-allowed; }

.submit:focus-visible { outline: 3px solid var(--board); outline-offset: 2px; }

.error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--red);
  background: #fdecef;
  color: #8e1023;
  font-size: 0.9rem;
}

.link-button {
  margin-top: 12px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Rules ---------------------------------------------------------------- */

.rules { margin-top: 28px; font-size: 0.9rem; }

.rules summary {
  padding: 10px 0;
  color: var(--blue);
  cursor: pointer;
  list-style-position: inside;
}

.rules__list { margin: 4px 0 0; padding: 0; list-style: none; }

.rules__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ice-deep);
}

.rules__list b { font-family: var(--mono); font-weight: 600; white-space: nowrap; }

.rules__note { margin: 12px 0 0; color: var(--ink-soft); font-size: 0.85rem; }

/* --- Panels: loading, confirmation, blackout ------------------------------- */

.panel {
  padding: 32px 20px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--ice-edge);
  text-align: center;
}

.panel--quiet { border-style: dashed; color: var(--ink-soft); }

.panel--dark {
  border: 0;
  background: var(--board);
  background-image: linear-gradient(180deg, var(--board-lift) 0%, var(--board) 46%);
  color: #e8eef3;
  padding: 48px 24px;
}

.done__flag, .closed__flag {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.done__flag { color: var(--blue); }
.closed__flag { color: var(--amber); }

.done__score {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
}

.done__line, .closed__line { margin: 0 0 6px; font-size: 0.95rem; }

.panel--dark .muted { color: #8494a3; }

/* --- Ranking --------------------------------------------------------------- */

.ranking { margin: 0; padding: 0; list-style: none; }

.ranking li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--ice-deep);
}

.ranking__rank {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.ranking li:nth-child(-n+3) .ranking__rank { color: var(--red); font-weight: 600; }

.ranking__name { font-size: 0.95rem; }

.ranking__points {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.ranking__empty { padding: 16px 2px; color: var(--ink-soft); font-size: 0.9rem; }

/* --- Wider screens ---------------------------------------------------------- */

@media (min-width: 600px) {
  .board { padding: 20px 22px 18px; }
  .side__crest { width: 60px; height: 60px; }
  .side__name { font-size: 1.15rem; }
  .digit { width: 72px; font-size: 2.6rem; }
  .board__clock-time { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .board__clock-time i { animation: none; }
  * { transition: none !important; }
}