/* Eight Quarters, game skin. Sits on top of texterous.css, which owns the
   tokens, the grid-and-grain background and the type. Phone first, portrait,
   one thumb, nothing below the fold that matters. */

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.screen { display: none; height: 100dvh; }
.screen.on { display: flex; flex-direction: column; }

.pad {
  padding: max(22px, env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  max-width: 620px; width: 100%; margin: 0 auto;
  overflow-y: auto; flex: 1;
}

.brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }
.brandline span { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); }

.kicker { color: var(--accent); text-transform: uppercase; font-size: .7rem; letter-spacing: .14em; font-weight: 600; margin: 0 0 8px; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.04; margin: 0 0 .38em; color: var(--ink); letter-spacing: -.015em; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; line-height: 1.22; margin: 0 0 .4em; color: var(--ink); }
.accent { color: var(--accent); }
.lede { font-size: 1.02rem; line-height: 1.6; color: var(--body-text); margin: 0 0 26px; max-width: 30em; }
.sub { color: var(--body-text); line-height: 1.55; margin: 0 0 14px; font-size: .94rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }

.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  border: 0; border-radius: var(--radius-btn); padding: 15px 26px;
  cursor: pointer; transition: background .2s var(--ease-out), opacity .2s;
  min-height: 50px;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.primary:disabled { opacity: .38; cursor: default; }
.btn.wide { width: 100%; }
.linky { background: none; border: 0; color: var(--muted); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 12px 4px; }
.linky:hover { color: var(--ink); }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- briefing ---------- */
.pad.brief { padding-bottom: 8px; }
.dots { display: flex; gap: 6px; margin-bottom: 26px; }
.dots i { height: 3px; flex: 1; background: rgba(12,14,20,.13); border-radius: 2px; transition: background .25s var(--ease-out); }
.dots i.on { background: var(--accent); }
.bcard { display: none; animation: bfade .3s var(--ease-out) both; }
.bcard.on { display: block; }
@keyframes bfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bcard h2 { font-size: clamp(1.4rem, 6vw, 1.72rem); line-height: 1.22; margin-bottom: .55em; }
.goalbox { border-left: 3px solid var(--accent); padding: 3px 0 3px 16px; margin: 22px 0 0; }
.goalbox p { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; color: var(--body-text); }
.goalbox p:last-child { margin-bottom: 0; }
.goalbox b { color: var(--ink); font-weight: 600; }

.blocks { display: flex; align-items: flex-end; gap: 14px; height: 108px; margin: 26px 0 22px;
  border-bottom: 1px solid var(--line); padding-bottom: 0; }
.bk { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.bk i { display: block; width: 100%; max-width: 46px; border-radius: 3px 3px 0 0; }
.bk i.mand { max-width: 22px; border-top: 4px solid var(--accent); }
.bk span { font-size: .6rem; color: var(--muted); margin-top: 7px; text-align: center; line-height: 1.25; font-weight: 600; }

.blist, .mlist { list-style: none; padding: 0; margin: 4px 0 0; }
.blist li, .mlist li { border-bottom: 1px solid var(--line); padding: 11px 0; font-size: .87rem;
  line-height: 1.5; color: var(--body-text); }
.blist b, .mlist b { color: var(--ink); font-weight: 600; }
.mlist .cost { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.mlist .eff { display: block; color: var(--muted); font-size: .82rem; margin-top: 3px; }

.ladder { list-style: none; padding: 0; margin: 24px 0 20px; display: grid; gap: 7px; }
.ladder li { display: grid; grid-template-columns: 1fr 6.6rem; gap: 12px; align-items: center; }
.ladder i { display: block; height: 9px; background: var(--accent); border-radius: 2px; opacity: .3; }
.ladder li:last-child i { opacity: 1; }
.ladder li:nth-child(2) i { opacity: .45; }
.ladder li:nth-child(3) i { opacity: .6; }
.ladder li:nth-child(4) i { opacity: .8; }
.ladder span { font-size: .76rem; color: var(--muted); font-weight: 600; }

.bfoot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 44px;
  background: linear-gradient(rgba(251,251,251,0), var(--bg)); pointer-events: none; }
.bfoot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line); padding: 11px 22px calc(13px + env(safe-area-inset-bottom));
  background: rgba(251,251,251,.96); max-width: 620px; width: 100%; margin: 0 auto; }
.bfoot .btn { min-width: 8.5rem; }

/* ---------- move explanation, in the band ---------- */
#moveinfo[hidden], #explain[hidden] { display: none; }
.mi-h { margin: 0 0 3px; display: flex; gap: 10px; align-items: baseline; }
.mi-h b { font-size: .84rem; color: var(--ink); font-weight: 600; }
.mi-h span { font-size: .74rem; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.mi-w { margin: 0; font-size: .78rem; color: var(--body-text); line-height: 1.4; }
.mi-e { margin: 3px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.4; }

/* ---------- spotlight tour ---------- */
#tour[hidden] { display: none; }
#tour { position: fixed; inset: 0; z-index: 40; }
#tourHole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(12,14,20,.74);
  transition: top .3s var(--ease-out), left .3s var(--ease-out), width .3s var(--ease-out), height .3s var(--ease-out);
  pointer-events: none; }
#tourTip { position: fixed; left: 14px; right: 14px; max-width: 460px; margin: 0 auto;
  background: var(--bg); border-radius: 14px; padding: 16px 17px 13px; box-shadow: var(--shadow-lift); }
#tourTip p { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; color: var(--body-text); }
#tourTip b { color: var(--ink); font-weight: 600; }
.trow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.btn.small { padding: 9px 18px; min-height: 40px; font-size: .88rem; }

.helpb { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--card-border);
  background: #fff; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 600;
  cursor: pointer; line-height: 1; padding: 0; flex: 0 0 auto; }
.helpb:hover { color: var(--ink); border-color: var(--accent); }

.lbmini { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- leaderboard rows ---------- */
.lbrow { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.lbrow .rk { color: var(--muted); font-variant-numeric: tabular-nums; }
.lbrow .who { color: var(--ink); font-weight: 600; }
.lbrow .org { color: var(--muted); font-weight: 400; }
.lbrow .sc { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.lbrow.me { background: var(--accent-soft); margin: 0 -10px; padding: 11px 10px; border-radius: 8px; border-bottom-color: transparent; }
.lbrows { margin-top: 6px; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 6px 0 4px; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--muted); padding: 9px 16px 8px; cursor: pointer; margin-bottom: -1px; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- play ---------- */
#play { background: var(--bg); }

#hud { padding: max(10px, env(safe-area-inset-top)) 14px 9px; border-bottom: 1px solid var(--line); background: rgba(251,251,251,.94); }
.hudtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.hudtop b { color: var(--ink); }
.hudtop .mv { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.st { min-width: 0; }
.st .k { display: block; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
/* The meters are buttons now: tap one and it says what it is. "A small
   explanation per element of what it does", for a visitor who has not read
   anything. */
.st { position: relative; appearance: none; background: none; border: 0; padding: 0;
  margin: 0; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.st::after { content: ""; position: absolute; left: 0; right: 30%; bottom: -3px; height: 1px;
  background: var(--accent); opacity: 0; transition: opacity .18s; }
.st.explaining::after { opacity: 1; }
.st:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.st .v { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }

/* The single most useful thing on the screen: what your last move just did to
   this number. Without it the board moves and nobody knows why. */
.delta { position: absolute; left: 0; top: -2px; font-family: var(--font-display); font-weight: 700;
  font-size: .92rem; font-style: normal; font-variant-numeric: tabular-nums; pointer-events: none;
  opacity: 0; white-space: nowrap; }
.delta.up { color: var(--accent); }
.delta.down { color: #d1493f; }
.delta.on { animation: pop 1.5s var(--ease-out) both; }
@keyframes pop {
  0%   { opacity: 0; transform: translateY(6px); }
  18%  { opacity: 1; transform: translateY(-11px); }
  70%  { opacity: 1; transform: translateY(-13px); }
  100% { opacity: 0; transform: translateY(-19px); }
}
.st.wide .v { font-size: .82rem; }
.st .bar { display: block; height: 3px; background: rgba(12,14,20,.12); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.st .bar i { display: block; height: 100%; background: var(--ink); transition: width .45s var(--ease-out); }
#riskWrap .bar i { background: var(--accent); }
#riskWrap.hot .bar i, #mandateWrap.hot .bar i { background: #d1493f; }
#riskWrap.hot .v, #mandateWrap.hot .v { color: #d1493f; }

#stage { position: relative; flex: 1; min-height: 0; }
#board { width: 100%; height: 100%; display: block; touch-action: manipulation; }

/* The board leaves real slack on a tall phone, so the quarter log lives in it
   rather than floating over the thing you are trying to read. */
#band { padding: 4px 12px 2px; max-width: 644px; margin: 0 auto; width: 100%; min-height: 58px;
  display: flex; flex-direction: column; justify-content: flex-end; }
#toast { display: grid; gap: 3px; }
#forecast { margin: 5px 0 0; font-size: .76rem; color: var(--muted); line-height: 1.35; min-height: 1.1em; }
.tline { color: var(--body-text); font-size: .8rem; line-height: 1.35; padding: 5px 0 5px 12px;
  border-left: 2px solid var(--accent); animation: rise .28s var(--ease-out) both; }
.tline.warn { border-left-color: #b53f36; color: #b53f36; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

#bottom { border-top: 1px solid var(--line); padding: 0 12px calc(11px + env(safe-area-inset-bottom)); background: rgba(251,251,251,.96); }

/* What you are trying to do and how far along you are, permanently on screen.
   Without it the board is a simulator you poke at; with it there is a target
   and a clock. */
.goalbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line); padding: 9px 0 10px; margin-bottom: 9px;
  max-width: 644px; margin-left: auto; margin-right: auto; }
.goal { min-width: 0; }
.goal.right { text-align: right; }
.goal .gk { display: block; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; }
.goal .gv { display: block; font-family: var(--font-display); font-weight: 700; font-size: .96rem;
  color: var(--ink); line-height: 1.2; margin-top: 1px; }
.pips { display: flex; gap: 3px; margin-top: 5px; }
.goal.right .pips { justify-content: flex-end; }
.pips i { display: block; width: 15px; height: 4px; border-radius: 2px; background: rgba(12,14,20,.13);
  transition: background .35s var(--ease-out); }
.pips i.on { background: var(--accent); }
.pips i.now { background: var(--ink); }
@media (max-width: 380px) { .pips i { width: 11px; } }

.hint { margin: 0 0 8px; font-size: .78rem; color: var(--muted); min-height: 1.1em; line-height: 1.3; }
.endsub { display: block; font-size: .72rem; font-weight: 500; opacity: .8; margin-top: 1px; }
.endsub:empty { display: none; }
#tray { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 9px; }
.move { background: #fff; border: 1px solid var(--card-border); border-radius: 10px; padding: 7px 3px;
  cursor: pointer; font: inherit; text-align: center; transition: border-color .18s, background .18s, opacity .18s;
  height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.move .mn { display: block; font-size: .64rem; font-weight: 600; color: var(--ink); line-height: 1.15; }
.move .mc { display: block; font-size: .62rem; color: var(--accent); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.move:disabled { opacity: .34; cursor: default; }
.move.armed { background: var(--accent); border-color: var(--accent); }
.move.armed .mn, .move.armed .mc { color: #fff; }

/* ---------- intro card over the board ---------- */
.intro { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px;
  background: rgba(251,251,251,.93); }
.intro.on { display: flex; }
.introcard { max-width: 380px; }
.introcard h2 { font-size: 1.6rem; margin-bottom: .25em; }
.introcard .goalline { font-size: .92rem; line-height: 1.5; color: var(--ink); margin: 14px 0 4px;
  font-weight: 500; }
.introcard .note { font-size: .9rem; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 14px; margin: 16px 0; line-height: 1.5; }

/* ---------- overlays, centred ----------
   Both the event and the quarter report land in the middle of the screen.
   They used to slide up from the bottom edge, where the thing you most needed
   to read sat furthest from where you were looking. */
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(12,14,20,.62); z-index: 20; padding: 18px; }
.overlay.on { display: flex; animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal, .card { background: var(--bg); border-radius: 18px; padding: 22px 20px;
  width: 100%; max-width: 480px; max-height: calc(100dvh - 36px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(12,14,20,.34); animation: up .28s var(--ease-out) both; }
@keyframes up { from { transform: translateY(16px) scale(.98); } to { transform: none; } }
.modal h2 { font-size: 1.24rem; }
.evframe { font-size: .78rem; color: var(--muted); line-height: 1.45; margin: 0 0 4px;
  border-left: 2px solid var(--accent); padding-left: 11px; }
/* Three cards that lift off the page and rise into place one after another,
   rather than a list of A, B and C. The glyph is the stance you are taking,
   which is something you would know in the room. What it costs you is not. */
.picks { display: grid; gap: 10px; margin-top: 4px; }
.evopt { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--card-border); border-radius: 14px;
  padding: 14px 16px 14px 13px; box-shadow: 0 2px 0 rgba(12,14,20,.05);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), border-color .16s;
  animation: lift .34s var(--ease-out) both; }
.evopt:nth-child(1) { animation-delay: .05s; }
.evopt:nth-child(2) { animation-delay: .13s; }
.evopt:nth-child(3) { animation-delay: .21s; }
@keyframes lift { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.evopt:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(12,14,20,.13); border-color: rgba(0,155,255,.45); }
.evopt:active { transform: translateY(0) scale(.985); box-shadow: 0 2px 0 rgba(12,14,20,.05); }
.evopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evopt .glyph { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; }
.evopt .glyph svg { width: 21px; height: 21px; stroke: var(--accent); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.evopt .tone { display: block; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 3px; }
.evopt .lb { color: var(--ink); font-size: .95rem; line-height: 1.4; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .evopt { animation: none; } }

/* ---------- the quarter report ---------- */
.report h2 { font-size: 1.16rem; margin-bottom: .5em; }
.deltas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line);
  border-radius: 100px; padding: 6px 13px; font-size: .8rem; color: var(--body-text); }
.chip b { font-family: var(--font-display); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.chip.up { border-color: rgba(0,155,255,.4); background: var(--accent-soft); }
.chip.up b { color: var(--accent); }
.chip.down { border-color: rgba(209,73,63,.35); background: rgba(209,73,63,.07); }
.chip.down b { color: #d1493f; }
.chip.flat b { color: var(--muted); }
.happened { list-style: none; padding: 0; margin: 0 0 20px; }
.happened li { border-top: 1px solid var(--line); padding: 9px 0 9px 13px; font-size: .86rem;
  line-height: 1.45; color: var(--body-text); position: relative; }
.happened li::before { content: ""; position: absolute; left: 0; top: 15px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); }
.happened li:last-child { border-bottom: 1px solid var(--line); }
.happened li.bad::before { background: #d1493f; }
.happened:empty { display: none; }

/* ---------- the practice round ---------- */
.coach { position: absolute; left: 12px; right: 12px; bottom: 12px; max-width: 460px; margin: 0 auto;
  background: var(--bg); border-radius: 14px; padding: 14px 16px 13px; box-shadow: var(--shadow-lift);
  border-left: 3px solid var(--accent); }
.coach[hidden] { display: none; }
.coach .cn { margin: 0 0 4px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; }
.coach .ct { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.coach .ct b { font-weight: 600; }
.coach .btn { margin-top: 12px; }
.coach .linky.tiny { display: block; margin-top: 8px; padding: 2px 0; font-size: .76rem; }
.coach .linky.tiny[hidden] { display: none; }
.coach .btn[hidden] { display: none; }

/* ---------- result ---------- */
.bigscore { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 20vw, 5rem);
  line-height: 1; color: var(--ink); letter-spacing: -.02em; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.rank { font-size: 1rem; color: var(--body-text); border-left: 3px solid var(--accent); padding-left: 15px; margin: 18px 0 24px; line-height: 1.5; }
.rank b { color: var(--ink); font-weight: 600; }
.rlines { border-top: 1px solid var(--line); }
.rline { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.rline .rl { color: var(--body-text); }
.rline .rv { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rline .rv.neg { color: #b53f36; }
.rline.mult .rl, .rline.mult .rv { color: var(--accent); font-weight: 600; }

.claim { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 18px; }
.fields { display: flex; gap: 12px; margin-top: 4px; }
.fl { display: flex; flex-direction: column; gap: 5px; }
.fl.grow { flex: 1; min-width: 0; }
.fl span { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }
.fl input { font: inherit; font-size: 1rem; padding: 12px 13px; border: 1px solid var(--card-border); border-radius: 10px;
  background: #fff; color: var(--ink); width: 100%; min-width: 0; }
#who { width: 5.4rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.fl input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#mailField { margin-top: 12px; }

/* What is on offer and the small print that comes with it. Quiet enough not to
   compete with the score, loud enough to be legible on a phone in a hall. */
.prizeline { font-size: .82rem; line-height: 1.55; color: var(--muted); margin: 14px 0 0; }
.prizeline a { color: var(--accent); text-underline-offset: 2px; }
#startPrize { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (min-width: 700px) {
  .stats { max-width: 620px; margin: 0 auto; }
  .hudtop { max-width: 620px; margin: 0 auto 8px; }
  #tray { max-width: 620px; margin: 0 auto 9px; }
  #bottom .hint, #bottom .btn { max-width: 620px; margin-left: auto; margin-right: auto; }
  #bottom .btn { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}