/*
  Terms and Conditions: the few things the kit doesn't already style.
  Loads after /games/kit/kit.css on this page only.
*/

/* Your rights, top left: a pip each, filled while you still have it */
.tc-rights { display: flex; align-items: center; }
.tc-pips { display: inline-flex; gap: 0.22rem; margin-left: 0.1rem; }
.tc-pip {
  width: 0.62rem;
  height: 0.62rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 0 var(--ink);
}
.tc-pip.is-on { background: var(--accent); border-color: var(--accent); }
/* signed away: it flashes white and big, then goes hollow */
.tc-pip.is-lost { animation: tc-lost 600ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes tc-lost {
  0%   { transform: scale(1.9); background: var(--paper); border-color: var(--paper); }
  60%  { transform: scale(0.9); background: var(--paper); border-color: var(--paper); }
  100% { transform: scale(1); }
}

/* phones: small enough to stay clear of the pause button */
@media (max-width: 39.99rem) {
  .tc-pips { gap: 0.14rem; }
  .tc-pip { width: 0.5rem; height: 0.5rem; border-width: 1.5px; }
}
/* still running under the pause button (seven rights, or a small phone): the
   game drops the word "Rights" off the screen (screen readers still hear it),
   then makes the pips smaller */
.tc-tight .tc-rights small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tc-tighter .tc-pips { gap: 0.1rem; margin-left: 0; }
.tc-tighter .tc-pip { width: 0.42rem; height: 0.42rem; border-width: 1.5px; }

/*
  The kit fits its panels to the screen (kit.css, @container kit). Its
  smallest labels drop under 12px on a phone, so they stop at 12px here.
*/
#game-root .kit-stats dt,
#game-root .kit-choice-detail,
#game-root .kit-brief-text { font-size: 0.75rem; }
#game-root .kit-stat small { font-size: max(0.62em, 0.75rem); }

/*
  The clip frame (?clip) puts a phone-sized screen on a desktop-sized page.
  The kit fits the panels to the screen, but sizes the HUD's numbers and the
  in-game stamps by the page, so here they get the phone sizes.
*/
html.kit-clip-on .kit-stat { font-size: 1.05rem; }
html.kit-clip-on .kit-stat-big { font-size: 2rem; }
html.kit-clip-on .tc-pips { gap: 0.14rem; }
html.kit-clip-on .tc-pip { width: 0.5rem; height: 0.5rem; border-width: 1.5px; }
html.kit-clip-on .kit-callouts .stamp-label { font-size: 0.85rem; }

/* In-game stamps land on the app's header (the game sets where), so they
   never cover the clauses about to go off the top */
#game-root .kit-callouts {
  inset: var(--tc-callouts, 22%) 0 auto;
  transform: translateY(var(--tc-callouts-lift, 0));
}