/* Unit contests (plan 97 §5, §7, §8): the Halat Çekme rope over the duel lanes, its lane items, the
   result's rope chart and the Konular "Yarışmalar" row. Colours come from tokens.css (light, dark, high
   contrast). Only transform, opacity and colour animate; nothing here uses filter or animated shadows. */

/* ---------- Live surface: the same inert rules as is-duel-live, under the engine-neutral name ---------- */
html.duel-live, html.duel-live body, .arena-dialog.live-surface, .arena-dialog.live-surface *, .arena-dialog.live-surface::backdrop { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.arena-dialog.live-surface #arenaBody, .arena-dialog.live-surface .arena-header, .arena-dialog.live-surface #arenaFooter { pointer-events: none; }
.arena-dialog.live-surface button { pointer-events: auto; }

/* ---------- The rope: names at the ends, a groove with 25 positions, the knot riding a sliding cord ---------- */
.tug-rope {
  position: relative;
  display: grid;
  width: min(1120px, 100%);
  margin: 0 auto 10px;
  grid-template-columns: minmax(110px, 17%) minmax(0, 1fr) minmax(110px, 17%);
  grid-template-areas: "end0 track end1" "rules rules rules";
  align-items: center;
  gap: 4px 14px;
  /* Nothing in the shared middle is a tap target; a finger resting here never starts a gesture. */
  pointer-events: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  contain: layout paint;
}
.tug-rope * { pointer-events: none; }
.tug-rope__end { display: grid; min-width: 0; grid-template-rows: auto 20px; justify-items: end; align-content: center; gap: 5px; }
.tug-rope__state { display: flex; align-items: center; gap: 6px; }
.tug-rope__end.side-0 .tug-rope__state { flex-direction: row-reverse; }
.tug-rope__end.side-0 { grid-area: end0; }
.tug-rope__end.side-1 { grid-area: end1; justify-items: start; }
.tug-rope__name {
  max-width: 100%;
  overflow: hidden;
  padding: 5px 14px 6px;
  color: var(--player-a-ink);
  background: var(--player-a-tint);
  border: 2px solid var(--player-a);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--player-a);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tug-rope__name.is-long { padding-inline: 10px; font-size: clamp(13px, 1vw, 15px); }
.tug-rope__end.side-1 .tug-rope__name { color: var(--player-b-ink); background: var(--player-b-tint); border-color: var(--player-b); box-shadow: 0 3px 0 var(--player-b); }
.tug-rope__pips { display: flex; gap: 5px; }
.tug-rope__pips i { width: 11px; height: 11px; background: var(--surface); border: 2px solid var(--player-a-line); border-radius: 50%; transition: background-color .2s ease, transform .2s ease; }
.tug-rope__end.side-1 .tug-rope__pips i { border-color: var(--player-b-line); }
.tug-rope__end.side-0 .tug-rope__pips i.is-on { background: var(--player-a); border-color: var(--player-a); transform: scale(1.15); }
.tug-rope__end.side-1 .tug-rope__pips i.is-on { background: var(--player-b); border-color: var(--player-b); transform: scale(1.15); }
.tug-rope__power { padding: 2px 9px; color: var(--gold-ink); background: var(--gold-tint); border: 1.5px solid var(--gold-base); border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.tug-rope__power:empty { display: none; }
.tug-rope__end.is-strong .tug-rope__power { animation: tug-power .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tug-power { from { opacity: 0; transform: scale(.6); } }
/* A short heave outward on a pull, a recoil inward on a slip. */
.tug-rope__end.side-0.is-pulling .tug-rope__name { animation: tug-heave-0 .36s ease-out; }
.tug-rope__end.side-1.is-pulling .tug-rope__name { animation: tug-heave-1 .36s ease-out; }
.tug-rope__end.side-0.is-slipping .tug-rope__name { animation: tug-heave-1 .3s ease-out; }
.tug-rope__end.side-1.is-slipping .tug-rope__name { animation: tug-heave-0 .3s ease-out; }
@keyframes tug-heave-0 { 40% { transform: translateX(-7px) scale(1.04); } }
@keyframes tug-heave-1 { 40% { transform: translateX(7px) scale(1.04); } }

.tug-rope__track {
  position: relative;
  grid-area: track;
  height: 52px;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: inset 0 3px 6px rgba(11, 27, 51, .1);
}
.tug-rope__half { position: absolute; top: 0; bottom: 0; width: 50%; }
.tug-rope__half--0 { left: 0; background: linear-gradient(90deg, var(--player-a-tint), transparent); }
.tug-rope__half--1 { right: 0; background: linear-gradient(270deg, var(--player-b-tint), transparent); }
/* The knockout line: the last step at each end. */
.tug-rope__goal {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  width: calc(100% / 24);
  min-width: 22px;
  place-items: start center;
  padding-top: 3px;
  color: var(--on-brand, #fff);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
}
.tug-rope__goal--0 { left: 0; background: var(--player-a); }
.tug-rope__goal--1 { right: 0; background: var(--player-b); }
.tug-rope__tick { position: absolute; bottom: 5px; left: calc(50% + var(--at) * 100% / 24); width: 2px; height: 8px; margin-left: -1px; background: var(--line-strong); border-radius: 1px; }
.tug-rope__tick.is-major { height: 14px; background: var(--ink-3); }
.tug-rope__tick.is-center { top: 4px; bottom: 4px; width: 4px; height: auto; margin-left: -2px; background: var(--gold-base); border-radius: 2px; }
/* The lead bar grows from the centre toward whoever the rope leans to. */
.tug-rope__lead {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 22px;
  margin-top: -11px;
  background: var(--player-a);
  opacity: .22;
  transform: scaleX(calc(var(--rope) / 12));
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background-color .2s ease;
}
.tug-rope[data-leader="1"] .tug-rope__lead { background: var(--player-b); }
.tug-rope[data-leader="none"] .tug-rope__lead { opacity: 0; }
/* The rail spans the track and slides by one 24th of it per step; the cord and knot ride on it. */
.tug-rope__rail {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--rope) * 100% / 24));
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.tug-rope__cord {
  position: absolute;
  top: 50%;
  right: -60%;
  left: -60%;
  height: 12px;
  margin-top: -6px;
  background: repeating-linear-gradient(115deg, var(--rope-fiber) 0 7px, var(--rope-twist) 7px 10px);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(11, 27, 51, .2);
}
.tug-rope__knot {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  place-items: center;
  color: var(--ink);
  background: var(--gold-fill);
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--gold-base), 0 6px 12px -4px rgba(11, 27, 51, .4);
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* The ribbon tied on the rope at the knot. */
.tug-rope__knot::before { position: absolute; z-index: -1; top: -9px; bottom: -9px; left: 50%; width: 8px; margin-left: -4px; background: var(--gold-base); border-radius: 3px; content: ""; }
.tug-rope[data-leader="0"] .tug-rope__knot { box-shadow: 0 0 0 3px var(--player-a), 0 6px 12px -4px rgba(11, 27, 51, .4); }
.tug-rope[data-leader="1"] .tug-rope__knot { box-shadow: 0 0 0 3px var(--player-b), 0 6px 12px -4px rgba(11, 27, 51, .4); }
/* Three steps from a knockout the threatened end's line flashes its warning colour (statically). */
.tug-rope.is-danger[data-leader="0"] .tug-rope__goal--1,
.tug-rope.is-danger[data-leader="1"] .tug-rope__goal--0 { color: var(--ink); background: var(--gold-fill); }
.tug-rope__rules { display: flex; flex-wrap: wrap; justify-content: center; grid-area: rules; gap: 2px 16px; margin: 2px 0 0; color: var(--ink-2); font-size: 12.5px; font-weight: 800; }
.tug-rope__rules span + span::before { margin-right: 16px; color: var(--line-strong); content: "·"; }

/* ---------- Lane items ---------- */
#arenaPlay[data-activity] .duel-side .tug-problem { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; }
#arenaPlay[data-activity] .duel-side .tug-problem__hint { color: var(--ink-2); font-size: clamp(14px, 1.2vw, 17px); font-weight: 750; letter-spacing: 0; }
#arenaPlay[data-activity] .duel-side .tug-problem--long .tug-problem__main { font-size: .74em; }
#arenaPlay[data-activity] .duel-side .tug-problem--story { max-width: 30ch; margin-inline: auto; font-size: clamp(19px, min(1.75vw, 3.4vh), 30px); font-weight: 800; line-height: 1.28; letter-spacing: -.005em; text-wrap: balance; }
/* Every contest and result screen (MatolyeUnitMath): a number stays on one line, and a repeating period has the MEB
   bar, at least 2 px so it reads on the board, in the text colour of every theme and of forced colours. */
.unit-num { white-space: nowrap; }
.tug-period__d { padding-top: .07em; border-top: max(2px, .075em) solid currentColor; }
/* An inline border sits on the font's full ascent, well above the digits. Trimmed to the cap height (which lining
   digits share in any font), the box starts at the digit tops, so the bar sits just over them; the negative margin
   keeps the bar out of line layout like an inline border, so the line's height and baseline never move. */
@supports (text-box: trim-both cap alphabetic) {
  .tug-period__d { display: inline-block; margin-top: calc(-.07em - max(2px, .075em)); text-box: trim-both cap alphabetic; }
}
/* The period's parentheses stay in the text (and the reading order); the bar replaces them on screen. */
.tug-period__p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tug-blank { display: inline-block; width: 1em; height: 1em; color: transparent; vertical-align: -.12em; border: .07em dashed var(--ink-2); border-radius: .18em; line-height: 1; overflow: hidden; }
.tug-power-chip { color: var(--gold-ink) !important; background: var(--gold-tint) !important; border-color: var(--gold-base) !important; }

/* ---------- Boards around 1366×768: the rope takes the height other duels give their rules chips ---------- */
/* So the rope and lanes tighten their spacing; the lane header (name and points) never shrinks (arena-stage.css). */
@media (min-width: 681px) and (min-height: 521px) and (max-height: 860px) {
  .tug-rope { margin-bottom: 6px; row-gap: 2px; }
  .tug-rope__end { grid-template-rows: auto 14px; gap: 3px; }
  .tug-rope__track { height: 46px; }
  #arenaPlay:has(#tugRope) .duel-side { padding-block: 12px; }
  #arenaPlay:has(#tugRope) .duel-side header { padding-bottom: 6px; }
  #arenaPlay:has(#tugRope) .duel-progress { margin-top: 4px; }
  #arenaPlay:has(#tugRope) .duel-side .arena-problem { margin-block: 6px 8px; }
  #arenaPlay:has(#tugRope) .duel-options { gap: 8px; }
  #arenaPlay:has(#tugRope) .duel-options .button { min-height: 50px; }
  #arenaPlay:has(#tugRope) .duel-feedback { margin-top: 6px; }
}

/* ---------- Phones: names over a slimmer groove, rules in the setup only ---------- */
@media (max-width: 680px), (max-height: 520px) {
  .tug-rope { flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "end0 end1" "track track"; gap: 4px 8px; margin: 0; }
  .tug-rope__end { display: flex; align-items: center; justify-content: flex-start; gap: 5px; }
  .tug-rope__end.side-1 { flex-direction: row-reverse; justify-content: flex-start; }
  .tug-rope__end.side-0 .tug-rope__state { flex-direction: row; }
  .tug-rope__state { min-width: 0; gap: 4px; }
  /* The rope's pips and badge already show each streak on a phone; the lane keeps its name and score. */
  #arenaPlay:has(#tugRope) .duel-side .duel-combo { display: none; }
  .tug-rope__name { padding: 2px 9px 3px; border-width: 1.5px; box-shadow: none; font-size: 13px; }
  .tug-rope__pips { gap: 3px; }
  .tug-rope__pips i { width: 7px; height: 7px; border-width: 1.5px; }
  .tug-rope__power { padding: 1px 6px; font-size: 10.5px; }
  .tug-rope__track { height: 36px; border-radius: 12px; }
  .tug-rope__knot { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-width: 2px; font-size: 14px; }
  .tug-rope__cord { height: 9px; margin-top: -4.5px; }
  .tug-rope__goal { min-width: 16px; font-size: 9px; }
  .tug-rope__rules { display: none; }
  #arenaDialog .duel-side .tug-problem { font-size: clamp(22px, 6.6vw, 32px); }
  #arenaDialog .duel-side .tug-problem--long .tug-problem__main { font-size: .78em; }
  #arenaDialog .duel-side .tug-problem--story { font-size: clamp(13.5px, 3.7vw, 16px); line-height: 1.3; }
  #arenaDialog .duel-side .tug-problem__hint { font-size: 12px; }
  #arenaDialog .duel-options button:has(.tug-period), #arenaDialog .duel-options button[data-option*=" "] { font-size: clamp(16px, 4.6vw, 22px); }
}

/* ---------- Result: the rope's journey ---------- */
.tug-chart .tug-chart__band { opacity: .5; }
.tug-chart .tug-chart__band.side-0 { fill: var(--player-a-tint); }
.tug-chart .tug-chart__band.side-1 { fill: var(--player-b-tint); }
.tug-chart .tug-chart__zero line { stroke: var(--gold-base); stroke-width: 2; stroke-dasharray: none; }
.tug-result__ko strong { color: var(--gold-ink); }

/* ---------- Konular: the Yarışmalar row between the unit header and its topics ---------- */
.unit-contests {
  margin: 0 0 20px;
  padding: 14px 16px 16px;
  background: linear-gradient(120deg, var(--player-a-tint), var(--surface) 42%, var(--surface) 58%, var(--player-b-tint));
  border: 1px solid var(--line);
  border-radius: 22px;
}
.unit-contests__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.unit-contests__head h3 { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 19px; font-weight: 850; letter-spacing: -.01em; }
.unit-contests__head h3::before { display: grid; width: 30px; height: 30px; place-items: center; color: var(--ink); background: var(--gold-fill); border: 2px solid var(--gold-base); border-radius: 50%; font-size: 10.5px; font-weight: 900; content: "VS"; }
.unit-contests__head p { margin: 0; color: var(--ink-2); font-size: 14px; }
.unit-contests__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 620px), 1fr)); gap: 14px; }
.game-card--contest { --card-accent: var(--player-a); min-height: 0; }
.game-card--contest::before { background: linear-gradient(90deg, var(--player-a), var(--gold-base) 50%, var(--player-b)); }
.game-card--contest .game-card__meta-row > .game-card__meta { color: var(--ink); background: var(--gold-tint); }
.game-card--contest .game-card__art { background: linear-gradient(90deg, color-mix(in srgb, var(--player-a-tint) 80%, var(--surface)), color-mix(in srgb, var(--player-b-tint) 80%, var(--surface))); }
.game-card--contest .game-card__description { margin-bottom: 8px; }
.contest-card__packs { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.contest-card__packs > span { margin-right: 4px; color: var(--ink); font-weight: 800; }
.contest-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.contest-card__chips li { padding: 3px 10px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 800; }
.contest-card__chips li:first-child { color: var(--player-a-ink); background: var(--player-a-tint); border-color: var(--player-a-line); }
.contest-card__chips li:nth-child(2) { color: var(--player-b-ink); background: var(--player-b-tint); border-color: var(--player-b-line); }
@media (min-width: 900px) {
  .game-card--contest { display: grid; grid-template-columns: minmax(240px, 34%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .game-card--contest .game-card__art { grid-row: 1 / span 2; height: auto; min-height: 100%; padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 0; }
  .game-card--contest .game-card__preview { width: 100%; max-width: 400px; height: auto; }
  .game-card--contest .game-card__body { padding: 16px 18px 8px; }
  .game-card--contest .game-card__title { font-size: clamp(22px, 1.8vw, 26px); }
  .game-card--contest .card-shortcuts { padding: 0 18px 16px; }
}

/* ---------- High contrast: outlines carry the sides; dashed for the far side ---------- */
body.high-contrast .tug-rope__track { border-color: var(--ink); box-shadow: none; }
body.high-contrast .tug-rope__half { display: none; }
body.high-contrast .tug-rope__end.side-1 .tug-rope__name { border-style: dashed; }
body.high-contrast .tug-rope__knot { color: var(--ink); background: #ffd500; border-color: #000; }
body.high-contrast .tug-rope__cord { background: repeating-linear-gradient(115deg, #000 0 7px, #fff 7px 10px); border: 1px solid #000; }
body.high-contrast .tug-rope__lead { opacity: .35; }
body.high-contrast .unit-contests { background: var(--surface); border: 2px solid var(--ink); }

/* ---------- Reduced motion: the knot jumps, nothing on the rope animates ---------- */
body.reduced-motion .tug-rope, body.reduced-motion .tug-rope * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .tug-rope, body:not(.motion-on) .tug-rope * { transition: none !important; animation: none !important; }
}
/* The digit a place-value / digit-value item asks about (grades 5–6), shared by Halat Çekme and Hızlı Parmak. */
.arena-problem mark.unit-digit { padding: 0 .08em; color: inherit; background: color-mix(in srgb, var(--coral) 32%, transparent); border-bottom: .09em solid var(--coral); border-radius: .14em; }
.arena-problem sup, .duel-options sup, .buzzer-option sup { font-size: .62em; line-height: 0; }