/* Biggr: the two sides, fuse and tally. Everything else is in shared/core.css. */
:root { --brand: var(--orange); --brand-text: var(--orange-text); --on-brand: var(--on-orange); }

/* Sums read left to right in every language, and ← / → pick the left / right side, so the pairs never mirror */
#logo, .pair, .p-pairs { direction: ltr; }

/* home logo: a short tile and a tall one */
#logo { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
#logo i {
  display: grid; place-items: center; width: 64px; border-radius: 12px;
  font: normal 600 17px Inter, Heebo, sans-serif; font-variant-numeric: tabular-nums; animation: grow .4s var(--ease) both;
}
#logo i:first-child { height: 64px; background: var(--grain), var(--stock); box-shadow: inset 0 0 0 1px var(--hair), var(--lift); }
#logo i:last-child { height: 96px; background: var(--speck), var(--brand); color: var(--on-brand); box-shadow: 2px 3px 0 var(--reg); animation-delay: 100ms; }
#logo b { align-self: center; font: italic 500 26px var(--display); color: var(--muted); }
@keyframes grow { from { transform: scaleY(.6); transform-origin: bottom; opacity: 0; } }

/* ---------- game ---------- */
#game { gap: 10px; }
#clock { font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: end; display: inline-block; }
.bar-end { position: relative; }
.minus {
  --away: -1; /* towards the board's middle: left here, right on a right-to-left page */
  position: absolute; inset-inline-end: 52px; top: 100%; font-weight: 700; color: var(--red-text);
  animation: drop .9s both; pointer-events: none;
}
.minus:dir(rtl) { --away: 1; }
/* the −3s is knocked off the clock: it pops out big, then tumbles away and fades */
@keyframes drop {
  from { opacity: 0; transform: translate(0, -22px) scale(.6); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  18% { opacity: 1; transform: translate(calc(var(--away) * 10px), -16px) scale(1.25) rotate(calc(var(--away) * 8deg)); animation-timing-function: ease-in; }
  to { opacity: 0; transform: translate(calc(var(--away) * 46px), 22px) scale(.9) rotate(calc(var(--away) * 28deg)); }
}

.fuse { width: 100%; height: 6px; background: radial-gradient(circle, var(--dot) .9px, transparent 1.25px) 0 0 / 4px 4px; overflow: hidden; }
.fuse i { display: block; height: 100%; background: var(--speck), var(--brand); transition: background-color .3s; }
.hurry .fuse i { background: var(--red); }
.hurry #clock { color: var(--red-text); }

.ask { margin: 14px 0 0; font: italic 500 22px var(--display); letter-spacing: -0.01em; }

.pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; min-height: 180px; max-height: 280px; margin: 6px 0 12px; }
.side {
  position: relative; container-type: inline-size; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px;
  border: 0; border-radius: 20px; background: var(--grain), var(--stock); box-shadow: inset 0 0 0 1px var(--hair), 3px 4px 0 var(--reg);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background-color .2s;
  user-select: none; -webkit-user-select: none;
}
.side:active { transform: translate(3px, 4px); box-shadow: inset 0 0 0 1px var(--hair), 0 0 0 var(--reg); }
@media (hover: hover) { .side:hover { box-shadow: inset 0 0 0 1.5px var(--brand), 3px 4px 0 var(--reg); } }
.expr {
  /* long sums wrap onto two balanced lines rather than shrink */
  font-size: min(44px, calc(300cqi * var(--cq, 1) / (var(--len) + 4))); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
  font-variant-numeric: tabular-nums; text-align: center; text-wrap: balance;
}
.val { min-height: 1.3em; font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--muted); }
.side kbd { position: absolute; bottom: 10px; opacity: .6; }
@media (hover: none) { .side kbd { display: none; } }
.side.pop { animation: enter .25s var(--ease); }
.side.big { box-shadow: inset 0 0 0 2px var(--teal), 3px 4px 0 var(--reg); }
.side.big .val { color: var(--ink); }
.side.small:not(.picked) { box-shadow: inset 0 0 0 1px var(--hair); }
.side.right { background: var(--speck), var(--teal); color: var(--on-teal); opacity: 1; }
.side.wrong { background: var(--speck), var(--red); color: var(--on-red); animation: shake .4s; }
.side.right .val, .side.wrong .val { color: inherit; }

.tally { margin: 0 0 8px; display: flex; flex-direction: column; align-items: center; font-variant-numeric: tabular-nums; }
.tally b { font-family: var(--display); font-size: 20px; font-weight: 600; }
.tally small { color: var(--muted); font-size: 14px; }

@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) {
  .ask { margin-top: 24px; font-size: 32px; }
  .pair { gap: 20px; min-height: 260px; max-height: 560px; margin: 14px 0 20px; }
  .side { border-radius: 28px; }
  .expr { font-size: min(76px, calc(300cqi * var(--cq, 1) / (var(--len) + 4))); }
  .val { font-size: 32px; }
  .tally b { font-size: 26px; }
  .tally small { font-size: 16px; }
}

/* ---------- end ---------- */
.big-score { font-size: 76px; font-weight: 600; letter-spacing: -0.04em; margin: -8px 0 10px; line-height: 1; color: var(--brand-text); text-shadow: .03em .03em 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.big-score small { display: block; font-family: Inter, Heebo, sans-serif; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-shadow: none; margin-top: 6px; }
#end-stars:empty { display: none; }

/* ---------- print ---------- */
.p-pairs { width: 100%; margin: 0; padding: 0; list-style: none; font-size: 18pt; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-pairs li { display: grid; grid-template-columns: 1fr 22mm 1fr; align-items: end; gap: 6mm; padding: 4.5mm 0; }
.p-pairs span:first-child { text-align: right; }
.p-pairs i { height: 11mm; border-bottom: 1.2pt solid #000; text-align: center; font-style: normal; }
.p-pairs small { font-size: 11pt; font-weight: 400; }

/* Tutorial: no clock (core.css hides the shared ones) */
.tut :is(#clock, .fuse) { visibility: hidden; }