/* ==========================================================================
   TAP WAR (tw-) — all surfaces, scoped selectors.
   Wall: a tug-of-war arena split by a moving rope knot + escalation flare +
   winner flood. Phone: side picker → big tap pad (batched) → result. Team
   colours are the shared OPTION_COLORS (set inline in JS), never gold/orange.
   Tokens only; gold/orange strictly as gradients (brand rule).
   ========================================================================== */

/* ================================ PHONE =================================== */
/* --- side picker --- */
.play-body .tw-pickwrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.play-body .tw-pick-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 340px; }
.play-body .tw-pick {
  display: flex; align-items: center; gap: 14px; padding: 26px 22px; border: none; border-radius: 20px;
  color: var(--ewc-off-white); cursor: pointer; box-shadow: 0 14px 34px -16px rgba(0,0,0,.6);
  transition: transform 0.1s ease, filter 0.1s ease;
}
.play-body .tw-pick:active { transform: scale(0.97); filter: brightness(1.1); }
.play-body .tw-pick-lock { filter: brightness(0.85); pointer-events: none; }
.play-body .tw-pick-shape { font-size: 22px; }
.play-body .tw-pick-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 1; }
.play-body .tw-pick-vs { font-family: var(--font-display); font-weight: 900; color: var(--text-dim); font-size: 18px; letter-spacing: 0.1em; }
.play-body .tw-pick.tw-selected { outline:3px solid var(--text); outline-offset:3px; }
.play-body .tw-pick:disabled { cursor:wait; opacity:.7; }
.play-body .tw-lobby-status { display:grid; gap:8px; max-width:340px; color:var(--text-dim); font:400 15px/1.45 var(--font-body); }
.play-body .tw-lobby-status strong { font-weight:650; color:var(--text); font-size:18px; }
.play-body .tw-launch { display:flex; align-items:center; justify-content:center; gap:18px; width:100%; padding:12px; border-top:1px solid var(--line); }
.play-body .tw-launch span { font:600 18px/1.3 var(--font-body); }
.play-body .tw-launch .cd-num-play { margin:0; font-size:48px; line-height:1; }

/* --- HUD (taps · power · points) --- */
.play-body .tw-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; }
.play-body .tw-hud-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 74px; }
.play-body .tw-hud-label { font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; color: var(--text-faint); }
.play-body .tw-hud-val { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.play-body .tw-hud-val.grad { background: var(--grad-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.play-body .tw-power-chip {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 11px; color: var(--text-faint); padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--surface-2); opacity: 0.5; transition: opacity 0.2s;
}
.play-body .tw-power-chip.on {
  opacity: 1; color: var(--on-accent); border-color: transparent;
  background: var(--grad-warm); animation: twChipPulse 0.9s ease-in-out infinite;
}
@keyframes twChipPulse { 50% { transform: scale(1.06); } }

/* --- mini rope (my share of the field) --- */
.play-body .tw-mini { height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); margin-bottom: 12px; }
.play-body .tw-mini-fill { height: 100%; width: 50%; border-radius: 999px; transition: width 0.15s linear; }

/* --- the tap pad --- */
.play-body .tw-pad-wrap { flex: 1; display: flex; }
.play-body .tw-pad {
  position: relative; flex: 1; width: 100%; border: none; border-radius: 26px; cursor: pointer;
  color: var(--ewc-off-white); overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.14);
}
.play-body .tw-pad.tw-hit { animation: twHit 0.09s ease-out; }
@keyframes twHit { 0% { transform: scale(0.975); filter: brightness(1.25); } 100% { transform: scale(1); filter: brightness(1); } }
.play-body .tw-pad-shape { font-size: 34px; opacity: 0.9; }
.play-body .tw-pad-label { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 58px; line-height: 0.9; letter-spacing: 0.02em; }
.play-body .tw-pad-team { font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 15px; opacity: 0.9; }
.play-body .tw-ripple {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: rgba(255,255,255,.55); pointer-events: none; transform: scale(0); animation: twRipple 0.46s ease-out forwards;
}
@keyframes twRipple { to { transform: scale(11); opacity: 0; } }

/* --- result --- */
.play-body .tw-result-stats { display: flex; justify-content: center; gap: 26px; margin: 6px 0 4px; }
.play-body .tw-result-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.play-body .tw-result-cell b { font-family: var(--font-display); font-weight: 900; font-size: 30px; color: var(--text); }
.play-body .tw-result-cell b.grad { background: var(--grad-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* NB: no RTL flip for the team labels — the tug-of-war is a SPATIAL metaphor
   (team A owns the left colour band), not reading-order text, so each name must
   stay pinned over its own band in every language. The Arabic text inside the
   label still renders right-to-left via body.lang-ar's plaintext bidi. */

/* ================================ ADMIN =================================== */
#dash .tw-live { display: flex; flex-direction: column; gap: 10px; }

/* Tap War operator-only visuals; shared workspace controls use lfs-* classes. */
#tab-tapwar .tw-matchup { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:16px; margin:18px 0; }
#tab-tapwar .tw-matchup > span { align-self:center; }
#tab-tapwar .tw-matchup input { width:100%; min-width:0; height:36px; font:400 12px var(--font-body); background:var(--bg); border:1px solid var(--line-strong); border-radius:5px; padding:8px 10px; color:var(--text); }
#tab-tapwar .tw-rope { position:relative; height:18px; margin:24px 6px 12px; background:var(--surface-3); border:1px solid var(--line-strong); border-radius:9px; }
#tab-tapwar .tw-rope-centre { position:absolute; left:50%; top:0; bottom:0; border-left:1px solid var(--text-faint); }
#tab-tapwar .tw-rope-marker { position:absolute; left:50%; top:-4px; width:6px; height:24px; border-radius:3px; background:var(--grad-warm); transform:translateX(-50%); }
#tab-tapwar .tw-rope-labels { display:flex; justify-content:space-between; gap:16px; font-size:12px; }
#tab-tapwar .tw-rope-labels span { overflow-wrap:anywhere; max-width:48%; }
#tab-tapwar .tw-team-row { margin:0 18px 16px; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
#tab-tapwar .tw-team-row > strong { display:block; margin-bottom:10px; font-size:13px; overflow-wrap:anywhere; }
#tab-tapwar .tw-team-row .lfs-pulse-row { display:flex; justify-content:space-between; font-size:11px; padding:5px 0; gap:10px; }
@media(max-width:560px) { #tab-tapwar .tw-matchup { grid-template-columns:minmax(0,1fr); gap:10px; } }

/* Tap War audience canvas: spatial team colours, bounded rope and a centred winner. */
.tb-shell :is(.tbw-team,.tbw-tapper){--team-color:var(--tb-blue)}
.tb-shell .tbw-round{display:grid;grid-template-rows:110px minmax(0,1fr);gap:30px}
.tb-shell .tbw-head{display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:center;gap:30px}
.tb-shell .tbw-title{height:110px;display:flex;align-items:center;font:700 80px/1.1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .tbw-clock{font:700 96px/1 var(--tb-font);text-align:right;font-variant-numeric:tabular-nums}
.tb-shell .tbw-clock svg{width:78px;height:78px}
.tb-shell .tbw-body{display:grid;grid-template-rows:minmax(0,1fr) 180px 100px;gap:28px;min-height:0}
.tb-shell .tbw-teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;min-height:0}
.tb-shell .tbw-team{display:grid;grid-template-rows:58px 120px 96px 48px;gap:8px;align-content:center;justify-items:center;padding:20px 40px;background:var(--tb-surface);border:3px solid var(--team-color);border-radius:28px;min-height:0;min-width:0;position:relative}
.tb-shell .tbw-symbol{width:56px;height:56px;background:var(--team-color);clip-path:polygon(50% 0,100% 100%,0 100%)}
.tb-shell .tbw-team[data-team='1'] .tbw-symbol{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tb-shell .tbw-name{width:100%;height:120px;display:flex;align-items:center;justify-content:center;text-align:center;font:750 100px/1.12 var(--tb-font);overflow-wrap:anywhere;unicode-bidi:plaintext}
.tb-shell .tbw-taps{width:100%;height:96px;display:flex;align-items:center;justify-content:center;font:700 96px/1 var(--tb-font);font-variant-numeric:tabular-nums}
.tb-shell .tbw-unit{width:100%;height:48px;display:flex;align-items:center;justify-content:center;font:600 42px/1.1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .tbw-verdict{width:100%;height:96px;display:flex;align-items:center;justify-content:center;text-align:center;font:700 76px/1.1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .tbw-arena{padding:20px 30px 0;display:grid;grid-template-rows:66px minmax(0,1fr);gap:24px;min-width:0}
.tb-shell .tbw-track{position:relative;direction:ltr;border:4px solid var(--tb-white);border-radius:40px;isolation:isolate;background:var(--tb-base)}
.tb-shell .tbw-fill{height:100%;position:absolute;top:0;transition:width .22s linear}
.tb-shell .tbw-fill-a{left:0;width:var(--rope,50%);background:var(--danger);border-radius:36px 0 0 36px}
.tb-shell .tbw-fill-b{right:0;width:calc(100% - var(--rope,50%));background:var(--tb-blue);border-radius:0 36px 36px 0}
.tb-shell .tbw-knot{position:absolute;width:42px;height:96px;left:var(--rope,50%);top:50%;transform:translate(-50%,-50%);border:6px solid var(--tb-white);border-radius:12px;background:var(--tb-base);transition:left .22s linear;box-shadow:0 4px 16px var(--tb-base)}
.tb-shell .tbw-centre{position:absolute;left:50%;top:-4px;bottom:-4px;border-left:4px dashed var(--tb-white);opacity:.7}
.tb-shell .tbw-lead{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font:600 54px/1.1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .tbw-power{display:flex;align-items:center;justify-content:center;gap:30px;height:100px}
.tb-shell .tbw-power span{width:400px;height:80px;display:flex;align-items:center;justify-content:flex-end;font:600 44px/1.1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .tbw-power strong{font:700 80px/1 var(--tb-font);width:400px}
.tb-shell .tbw-tappers{display:grid;grid-template-rows:70px minmax(0,1fr);gap:18px;min-height:0}
.tb-shell .tbw-tappers h2{height:70px;display:flex;align-items:center;justify-content:center;font:700 52px/1.1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .tbw-tapper-list{display:grid;grid-template-columns:repeat(var(--tapper-count,3),minmax(0,1fr));width:100%;max-width:calc(var(--tapper-count,3)*560px);margin-inline:auto;gap:24px;min-height:0}
.tb-shell .tbw-tapper{display:grid;grid-template-columns:24px minmax(0,1fr) 130px;align-items:center;gap:16px;padding:20px;background:var(--tb-surface);border:1px solid var(--tb-border);min-height:0;border-radius:16px}
.tb-shell .tbw-dot{width:24px;height:24px;background:var(--team-color);border-radius:50%}
.tb-shell .tbw-tapper-name,.tb-shell .tbw-tapper-count{height:100%;display:flex;align-items:center;font:600 44px/1.1 var(--tb-font);overflow-wrap:anywhere;unicode-bidi:plaintext;min-width:0}
.tb-shell .tbw-tapper-count{justify-content:flex-end;font-size:48px;font-variant-numeric:tabular-nums}
.tb-shell .tbw-round[data-phase='done'] .tbw-body{grid-template-rows:minmax(0,1fr) 270px;gap:36px}
.tb-shell .tbw-round[data-phase='done'] :is(.tbw-arena,.tbw-power){display:none}
.tb-shell .tbw-round[data-phase='done'] .tbw-team{grid-template-rows:48px 120px 80px 42px 90px;gap:8px;padding:18px 40px}
.tb-shell .tbw-round[data-phase='done'] .tbw-taps{height:80px;font-size:80px}
.tb-shell .tbw-round[data-phase='done'] .tbw-unit{height:42px}
.tb-shell .tbw-round[data-phase='done'][data-winner='0'] .tbw-team[data-team='1'],.tb-shell .tbw-round[data-phase='done'][data-winner='1'] .tbw-team[data-team='0']{display:none}
.tb-shell .tbw-round[data-phase='done']:is([data-winner='0'],[data-winner='1']) .tbw-teams{grid-template-columns:minmax(0,1000px);justify-content:center}
.tb-shell[data-mainboard-layout='ewc26'] :is(.tbw-title,.tbw-clock,.tbw-taps,.tbw-verdict){font-family:var(--tb-display);font-weight:900}
.tb-shell[data-mainboard-layout='ewc26'] :is(.tbw-team,.tbw-tapper){border-radius:0;background:var(--tb-white);color:var(--tb-bg)}
.tb-shell.is-arabic :is(.tbw-title,.tbw-clock,.tbw-taps,.tbw-verdict){font-family:var(--tb-font)}
@media(prefers-reduced-motion:reduce){.tb-shell :is(.tbw-fill,.tbw-knot){transition:none}}
#dash #tab-tapwar :is(.tw-title-row,.tw-header-actions){display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#dash #tab-tapwar .tw-title-row{margin-top:7px}#dash #tab-tapwar .tw-title-row h1{margin:0}
#dash #tab-tapwar .tw-header-actions{justify-content:flex-end}#dash #twPrimary{min-width:108px}
#dash #tab-tapwar .lfs-close{width:36px;height:36px;min-width:36px;padding:0}
@media(max-width:850px){#dash #tab-tapwar .tw-header-actions{justify-content:flex-start}}

.tb-shell .tbw-round[data-phase='done']:not(.has-tappers) .tbw-body{grid-template-rows:minmax(0,1fr)}

#tab-tapwar .tw-rope{height:28px;isolation:isolate}
#tab-tapwar .tw-rope-fill{position:absolute;top:0;bottom:0;transition:width .25s;border-radius:8px}
#tab-tapwar .tw-rope-fill-a{left:0;width:var(--team-share,50%);border-top-right-radius:0;border-bottom-right-radius:0}
#tab-tapwar .tw-rope-fill-b{right:0;width:calc(100% - var(--team-share,50%));border-top-left-radius:0;border-bottom-left-radius:0}
#tab-tapwar .tw-rope-marker{top:-5px;height:36px;width:8px;background:var(--text);transition:left .25s;box-shadow:0 0 0 2px var(--bg)}
#tab-tapwar .tw-rope-centre{z-index:1;border-color:var(--text)}
@media(prefers-reduced-motion:reduce){#tab-tapwar :is(.tw-rope-fill,.tw-rope-marker){transition:none}}