/* Kru Ink · workout — the screen blocks of mockups 04-workout, 05-pause and 08-recovery (round 2), on the real viewport.
   Full-screen phase fields readable from 3 m by colour AND shape: work = charcoal + red brushed arc · rest = jade +
   breathing ring · reps = ochre + brush stroke + »weiter« pill · glove-up = blue + glove pictogram · pause = ink veil.
   Text pairs ≥ 7:1 in every phase (style.css surfaces). Type scales with the viewport (plan UI §4, AC 20): timer
   min(34vw, 28vh) and never under 26vw, callout clamp(28px, …, 64px) and never under 10vw, top line 5vw caps; on a
   short screen the ring gives way instead of the type (a size container), so 320×568 stays on one screen.
   The whole field is the one tap target; the accessible button is an empty layer over it (ui/workout.js: .tap-zone). */

/* 1 · FIELD + LAYOUT — every direct child of the workout section is a full-screen layer (field, overlay, wipe) */
/* touch-action none (plan "Forearm tap"): a finger or forearm that slides is never taken over as a pan, so a
   pointercancel here only means Android palm rejection (a press, runtime/tap.js and ui activate()), never a swipe */
.workout{position:fixed;inset:0;overflow:hidden;touch-action:none;color:#f3efe6;background:var(--work)}
.workout>*{position:absolute;inset:0}
.ph-work,.ph-rest,.ph-reps,.ph-glove,.ph-pause{color:var(--fg);background:radial-gradient(120% 62% at 50% 38%,var(--bg-hi),var(--bg) 72%)}
.tap-zone{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tap-zone:focus-visible,.tapall:focus-visible{outline:4px solid var(--fg);outline-offset:-10px}
.ws{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:max(28px,calc(env(safe-area-inset-top) + 12px)) max(16px,env(safe-area-inset-right)) calc(128px + env(safe-area-inset-bottom))
  max(16px,env(safe-area-inset-left))}
.ws-mid{flex:1;width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:min(16px,2vh)}
.ws .t-caps{margin:0;max-width:100%;font-size:clamp(15px,4.7vw,24px);line-height:1.15;white-space:normal;text-wrap:balance}
.caps-ic{display:inline-flex;align-items:center;gap:8px}
.caps-ic svg{width:1.3em;height:1.3em;flex:none;color:var(--accent)}
.timer{font:800 min(34vw,28vh)/.9 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.timer.sm{font-size:min(max(26vw,min(29vw,13vh)),28vh)}
.timer.xs{font-size:min(22vw,10vh)}
.timer.last10{animation:beat 1s ease-in-out infinite} /* scale only: no luminance change */
.callout{margin:0;max-width:min(100%,600px);font:800 clamp(28px,max(10vw,min(13vw,6.4vh)),64px)/1.04 var(--sans);letter-spacing:-.02em;
  text-align:center;text-wrap:balance}
.callout.sm{font-size:clamp(28px,max(10vw,min(11.5vw,5.4vh)),56px)}
.callout.xs{font-size:clamp(28px,10vw,64px)}
/* rests and rep steps only (never in work rounds): one quiet line on what follows */
.next{margin:0;font:700 clamp(17px,5.5vw,24px)/1.25 var(--sans);color:var(--fg-2);text-wrap:balance}
.grp{display:flex;flex-direction:column;align-items:center;gap:8px}

/* 2 · BRUSHED RING / ARC — --p = remaining % (0–100), set by ui/ once per second (no CSS tween, so reduced motion
   still steps); <svg class="ring" viewBox="0 0 352 352"><circle class="trk"/><g class="arc"><use class="m" href="#ki-r-main"/>… */
/* --dial may come from ui/ (CSSOM); the min() caps it so a ring never outgrows a short or narrow screen */
.dial{--d:min(var(--dial,88vw),88vw,40vh);position:relative;width:var(--d);height:var(--d);display:grid;place-items:center;flex:none}
/* the ring's box (work, burnout, rest, work round): a size container that starts at the ring's size and is the first
   to give way when a long callout needs the height, so text never runs into the status row */
.dial-box{--box:min(88vw,40vh);container-name:ring}
.dial-box,.combo.hero{flex:0 1 var(--box);min-height:0;align-self:stretch;container-type:size;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.dial-box>.dial{--dial:100cqh}
/* digits inside the ring follow its size (m:ss stays inside the track) and never drop under 26vw (AC 20); a long callout
   that squeezes the ring under 65vw (= 26vw / .4) makes the ring and its flames step aside, never the digits */
.dial>.timer:not(.xs){font-size:min(max(26vw,min(34vw,calc(var(--d) * .4))),28vh)}
@container ring (max-height:65vw){.dial>.ring,.dial>.fire,.dial>.heat{display:none}}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.ring .trk{stroke:var(--track);stroke-width:22}
.ring .arc{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:var(--p,100) 100}
.ring .m{stroke-width:22}.ring .f{stroke-width:6}.ring .b{stroke:var(--accent-2);stroke-width:1.5}
.ring.breathe{transform-origin:50% 50%;animation:breathe 8s ease-in-out infinite} /* 4 s in / 4 s out */
.dial>.timer,.dial>.breath-count{position:relative}
.breath-count{display:none;font:800 clamp(18px,6vw,26px)/1.2 var(--sans);color:var(--fg-2)} /* reduced motion: the ring becomes a count */

/* 3 · BRUSH STROKE PROGRESS (rep sets: --p = 0–100 of E′, --tick = auto-advance mark) + »weiter« PILL + PAUSE BARS */
.stroke{position:relative;width:min(300px,78vw);height:30px;margin:16px 0}
.stroke::before,.stroke>i{content:"";position:absolute;inset:0;background:var(--accent);clip-path:var(--taper)}
.stroke::before{opacity:.3}
.stroke>i{transform-origin:0 50%;transform:scaleX(calc(var(--p,50) / 100))}
.stroke>b{position:absolute;top:-14px;bottom:-14px;left:var(--tick,97%);width:6px;margin-left:-3px;border-radius:3px;background:var(--accent)}
.pill{position:relative;isolation:isolate;min-height:min(84px,10vh);padding:0 36px;display:inline-flex;align-items:center;justify-content:center;
  gap:12px;font:800 min(38px,4.8vh)/1 var(--sans);color:var(--bg)}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);clip-path:var(--pill)}
.pill svg{width:34px;height:34px;flex:none}
.pill.ask{animation:ask 2.4s ease-in-out infinite}
.ph-pause .pill,.ov .pill{color:var(--ink)}
.ph-pause .pill::before,.ov .pill::before{background:var(--reps)}
.pbars{display:flex;gap:30px;height:150px}
.pbars i{width:46px;background:var(--fg);border-radius:40% 55% 45% 50%/9% 7% 10% 8%}
.pbars.sm{height:104px;gap:24px}
.pbars.sm i{width:36px}

/* 4 · STATUS — mic indicator = recognizer truth (»Mikro hört« visible from 3 m), screen icon, forearm hint row */
.status{position:absolute;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));
  bottom:calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:4px;color:var(--fg-2)}
.status .icons{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px}
.si{display:block;width:32px;height:32px;flex:none}
.si-wide{width:44px;height:28px}
.si.is-alert{color:var(--alert)}
.si.is-warn{color:var(--sun)}
.mic-on{display:inline-flex;align-items:center;gap:10px;font:800 24px/1 var(--sans);color:var(--fg-2);white-space:nowrap}
.mic-on .si-wide{width:60px;height:38px}
.tap-hint{display:flex;align-items:center;gap:12px;min-height:56px;padding-top:6px;border-top:1.5px solid var(--track);text-align:left;
  font:700 22px/1.15 var(--sans);color:var(--fg-2)}
.tap-hint .t{width:48px;height:48px;flex:none}
.tap-hint .a{width:14px;height:14px;flex:none}
.tap-hint .r{width:15px;height:22px;flex:none}
.tap-hint b{font-weight:800;color:var(--fg)}
/* an icon-only hint (no .th text, e.g. the pause overlay): the DS row — icons left, hint right */
.status:not(:has(.th)){flex-direction:row;align-items:center;justify-content:space-between}
.status:not(:has(.th)) .tap-hint{gap:4px;min-height:48px;padding-top:0;border-top:0}
.status:not(:has(.th)) .tap-hint .t{width:34px;height:34px}

/* 5 · WORK ROUND (combo playback inside the arc) · BURNOUT (clock in brush flames) */
.arena{--dial:min(86vw,38vh,100cqh);--cs:calc(var(--d) * .74)}
.arena .still{display:none;--ps:calc(var(--d) * .6)}
.arena .cp{--cs:calc(var(--d) * .62)} /* combo-player inside the arc: pose + label + step dots fit the ring */
.combo.hero{--box:min(86vw,38vh);gap:12px}
.burn .dial-box{margin-bottom:min(34px,4vh)}
.fire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--accent);--fl-in:var(--reps)}
.fire .back{color:var(--accent-2);--fl-in:var(--accent)}
.fire .disc{fill:var(--bg-hi)}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite alternate}
.fire g:nth-of-type(2n) .fl{animation-duration:1.25s;animation-delay:-.5s}
.fire g:nth-of-type(3n) .fl{animation-duration:2.05s;animation-delay:-1.1s}
.heat{position:absolute;left:50%;top:62%;width:min(400px,110vw);height:250px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,72,62,.34),rgba(224,72,62,0));animation:heat 1.4s ease-in-out infinite}

/* 6 · REST (next task as pictogram + count) · REP SET (count first; stroke = expected time, tick = auto) · GLOVE-UP */
.task{display:flex;align-items:center;justify-content:center;gap:12px}
.task svg{width:min(96px,12vh);height:min(130px,16vh);flex:none;overflow:visible;color:var(--fig)}
.task-t{margin:0;display:flex;flex-direction:column;align-items:flex-start;font:800 clamp(22px,8vw,30px)/1.1 var(--sans);letter-spacing:-.01em;text-align:left}
.task-t b{font:800 min(76px,9.5vh)/.9 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* Die Ecke (update 3): the next round's first combo under »Danach« — one line of text (≤ 2 by clamp) and a still strip
   at ≈ 60 % of the glove-up strip; the ring gives way first; nothing here animates */
.ph-rest .next-combo{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.next-combo-t{margin:0;max-width:min(100%,560px);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font:800 clamp(18px,6vw,26px)/1.2 var(--sans);letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.ph-rest .next-combo .cstrip{gap:5px}
.ph-rest .next-combo .cstrip li{max-width:min(50px,6.6vh);gap:4px;font-size:12px;color:var(--fg-2)}
.ph-rest .next-combo .cstrip svg{aspect-ratio:368/472}
.reps-mid{gap:min(28px,3vh)}
.reps-mid>.grp{flex:0 1 auto;min-height:0}
/* the pictures are the first to give way when a long name, a detail line and »Danach« meet on one screen */
.rep-pic{display:block;width:min(300px,80vw);height:min(111px,14vh);flex:0 1 auto;min-height:min(56px,7vh);overflow:visible;color:var(--fig)}
.rep-n{margin:0;text-align:center;font:800 min(40px,5vh)/1.05 var(--sans);letter-spacing:-.015em}
.rep-n b{display:block;font-size:min(96px,12vh);line-height:.9;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.prog{display:flex;flex-direction:column;align-items:center;gap:6px}
.prog .t-num{font-size:min(56px,7vh)}
.prog .stroke{width:min(200px,52vw);height:26px;margin:0 min(100px,26vw) 0 0}
.prog .stroke::after{content:"";position:absolute;top:50%;left:100%;width:50%;height:4px;margin-top:-2px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 14px)}
.fertig{z-index:4;min-height:104px;font-size:34px;letter-spacing:.01em} /* pre-glove rep steps: a big bare-hand button */
.fertig svg{width:24px;height:36px}
.glove-mid{gap:min(22px,2.6vh)}
.glove-pic{width:min(96px,11vh);height:min(228px,26vh);flex:0 1 auto;min-height:min(96px,12vh);overflow:visible;color:var(--fig)}
.mini{font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.theme{display:flex;flex-direction:column;align-items:center;gap:8px}
.theme b{font:800 clamp(26px,9.5vw,34px)/1.05 var(--sans);letter-spacing:-.015em}
.ws .kdt{width:100%;gap:10px}
.ws .kdt .cstrip{gap:8px}
.ws .kdt .cstrip li{color:var(--fg);max-width:min(84px,11vh)}
.ws .kdt .cstrip svg{aspect-ratio:368/472}

/* 7 · INK WIPE between phases (one pass; ui/ sets --next to the coming field colour) */
.wipe{position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--next,var(--rest));transform:translateX(-112%);
  clip-path:polygon(0 0,92% 0,96% 9%,93% 22%,97% 35%,94% 50%,98% 63%,93% 77%,96% 90%,92% 100%,0 100%);animation:wipe .8s cubic-bezier(.6,.05,.3,1) both}

/* 8 · PAUSE OVERLAY — a true modal (role=dialog, aria-modal, background inert); ANGEHALTEN dominates; the regions are
   huge for forearm skin with gloves and ≥ 24 px apart (FND-0036/0040); their confirm steps use the same regions */
.ov{position:absolute;inset:0;z-index:10;color:var(--fg);
  background:linear-gradient(rgba(59,57,53,.96),rgba(59,57,53,.93) 18%,rgba(59,57,53,.93) 44%,var(--pause) 56%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ov .ws{z-index:1;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.ov .ws-mid{gap:min(22px,2.6vh)}
.frozen{position:absolute;inset:0}
.frozen .picto{--ps:min(180px,22vh)}
.motif{position:absolute;top:84px;left:50%;--ps:min(430px,110vw);transform:translateX(-50%);opacity:.065;pointer-events:none}
.pause-h{margin:0;font:900 clamp(36px,12.5vw,56px)/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.ov .pbars.sm{height:min(120px,12vh);gap:24px}
.ov .pbars.sm i{width:38px}
.pill.say{min-height:64px;padding:0 24px;gap:10px;font-size:26px}
.pill.say svg{width:26px;height:26px}
.glove-tip{margin:0;max-width:300px;font:700 16px/1.3 var(--sans);color:var(--fg-2);text-wrap:balance}
.dock{width:100%;display:grid;gap:24px;flex:none}
.btn-line{--btn-bg:var(--fg);--btn-fill:var(--pause)}
.btn-soft{--btn-bg:rgba(243,239,230,.42);--btn-fill:var(--pause);color:var(--fg)}
.btn-soft svg{width:24px;height:24px;color:var(--fg-2)}
.dock .btn{min-height:max(80px,10vh);font-size:clamp(18px,6vw,22px)}
.dock .resume,.resume{min-height:max(104px,15vh);font-size:clamp(26px,8vw,34px)}
.resume::after{inset:4px}
.resume svg{width:30px;height:30px}
.confirm.big{width:100%;margin:0;padding:22px 20px 20px;gap:14px;text-align:left}
.confirm.big p{font-size:clamp(26px,8.5vw,34px);line-height:1.08;letter-spacing:-.01em}
.confirm.big .note{font:600 16px/1.35 var(--sans);letter-spacing:0;color:var(--fg-2)}
.confirm.big .acts{grid-template-columns:1fr;gap:24px}
.confirm.big .btn{min-height:max(88px,11vh);font-size:22px}
/* the safe choice (last, at the bottom) is as tall as the two regions that open a confirm, so a forearm that bounces on
   »Block überspringen« or »Beenden« lands on Weitertrainieren, and »Ja« sits where Fortsetzen was */
.confirm.big .stay{min-height:calc(2 * max(80px,10vh) + 4px)}
.dial.stop .timer{font-size:min(40vw,19vh)} /* STOP_CONFIRM: ochre 10-s arc, seconds inside */
.pill.stopp{min-height:76px;padding:0 24px;gap:10px;font-size:26px;white-space:nowrap}
.pill.stopp svg{width:28px;height:28px}
.ov .mic-on{display:flex;gap:8px;min-height:48px;font-size:17px;color:var(--fg)}
.ov .mic-on .si-wide{width:48px;height:30px}

/* 9 · RECOVERY — cards mirror the spoken messages (all texts ≥ 7:1 on their banner colour) */
.banner.rc{flex-direction:column;justify-content:center;gap:8px;padding:24px 22px 26px;text-align:center}
.banner.rc>svg{width:56px;height:56px}
.banner.rc>svg.wide{width:76px;height:48px}
.rc h2{margin:0;font:900 clamp(30px,11vw,44px)/1.04 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.rc h2.long{font-size:clamp(26px,9.2vw,36px)}
.rc p{margin:0;font:700 20px/1.3 var(--sans);text-wrap:balance}
.rc p.lead{font-size:22px;font-weight:800}
/* wake-lock alarm: edge-to-edge block + halo + field-edge flash at 0.625 Hz; the text background never changes */
.banner.rc.xxl{width:calc(100% + 32px);margin:0 -16px;padding:32px 26px 34px;gap:12px}
.banner.rc.xxl>svg{width:76px;height:76px}
.rc.xxl h2{font-size:clamp(32px,12vw,46px);line-height:1.02;letter-spacing:0;text-transform:uppercase}
.rc.xxl p{font:800 clamp(21px,7.2vw,26px)/1.2 var(--sans)}
.alarm::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;box-shadow:inset 0 0 0 10px var(--alert);opacity:.15;
  animation:edge 1.6s ease-in-out infinite}
/* Zeitmodus chip on ochre: sun-yellow fill inside an ink rim; a voice-recovered chip is the small green banner-ok */
.mode-chip{position:relative;isolation:isolate;min-height:78px;padding:0 32px 0 26px;display:inline-flex;align-items:center;gap:12px;
  font:900 clamp(26px,9.5vw,34px)/1 var(--sans);color:var(--ink)}
.mode-chip::before,.mode-chip::after{content:"";position:absolute;z-index:-1;inset:0;clip-path:var(--pill);background:var(--ink)}
.mode-chip::after{inset:4px;background:var(--sun)}
.mode-chip svg{width:40px;height:40px}
.rmsg{margin:0;max-width:300px;font:700 20px/1.32 var(--sans);text-wrap:balance}
/* audio unusable: the whole screen is one button whose name includes the reason */
.tapall{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--fg);
  padding:max(34px,calc(env(safe-area-inset-top) + 16px)) 16px calc(64px + env(safe-area-inset-bottom))}
.tapall .ws-mid{gap:26px}
.tapall .callout{display:block}
.rsub{display:block;max-width:300px;font:700 20px/1.32 var(--sans);color:var(--fg-2);text-wrap:balance}
.tapdisk{position:relative;isolation:isolate;width:min(232px,30vh);height:min(232px,30vh);display:grid;place-items:center;color:var(--ink);--knock:var(--reps)}
.tapdisk::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--reps);border-radius:52% 48% 50% 50%/48% 52% 47% 53%}
.tapdisk::after{content:"";position:absolute;inset:-16px;z-index:-2;border:5px solid var(--reps);border-radius:50% 48% 52% 50%/49% 52% 48% 51%;
  opacity:0;animation:ripple 2s ease-out infinite}
.tapdisk svg{width:65%;height:65%}

/* 10 · MOTION */
@keyframes breathe{0%,100%{transform:scale(.95);opacity:.85}50%{transform:scale(1);opacity:1}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes flick{0%{transform:scale(1,1)}50%{transform:scale(.9,1.12)}100%{transform:scale(1.06,.86)}}
@keyframes heat{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes wipe{from{transform:translateX(-112%)}to{transform:translateX(112%)}}
@keyframes edge{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes ripple{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.16);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .arena{--dial:min(70vw,30vh,100cqh)}
  .arena .still,.breath-count{display:block}
  .wipe{display:none}
  .alarm::after{opacity:.7}
  .banner.pulse::after{opacity:.4}
  .tapdisk::after{opacity:.45;transform:scale(1.04)}
}
/* short screens (320×568): the pause veil drops its decoration so the three regions keep their size; the status row
   and the glove-up pictures shrink so every phase still fits on one screen */
@media (max-height:700px){
  .ov .pbars,.ov .pill.say,.motif{display:none}
}
@media (max-height:640px){
  .ws{padding-bottom:calc(116px + env(safe-area-inset-bottom))} /* the status row is 108 px here */
  .mic-on{font-size:19px}
  .mic-on .si-wide{width:48px;height:30px}
  .tap-hint{min-height:44px;font-size:18px}
  .tap-hint .t{width:38px;height:38px}
  .glove-pic{height:20vh}
  .ws .kdt .cstrip li{max-width:9vh}
  .ph-rest .next-combo .cstrip{display:none} /* Die Ecke keeps only its text */
}

/* 11 · UI HOOKS (ui/workout.js, workout-phases.js, workout-bits.js) — playback host above the ring, the left status
   group, the dropped-command note (FND-0053), compact layouts under a recovery card, the small voice-back chip */
.cp-host{position:relative}
.status .si-l{display:flex;align-items:center;gap:18px;min-width:0}
/* a chip floating just above the status row for its 4 s: it never pushes the row into the content or the pause regions,
   and taps pass through it */
.drop-note{position:absolute;z-index:6;left:0;right:0;bottom:calc(100% + 8px);margin:0;padding:8px 14px;border:2px solid var(--fg);
  border-radius:14px;background:var(--bg);font:700 17px/1.25 var(--sans);color:var(--fg);text-align:left;text-wrap:balance;pointer-events:none}
.rc-mid{gap:min(28px,3.2vh)}
.rep-more{display:block;margin-top:6px;font-size:min(24px,3vh);font-weight:700;letter-spacing:0;color:var(--fg-2)}
.banner.chip-ok{width:auto;min-height:52px;padding:8px 22px;font-size:19px}
.banner.chip-ok svg{width:44px;height:28px}
/* the one accessible button: an empty layer over the phase field (inherits its --fg for the focus ring); the bare-hand
   »Fertig« (z-index 4) stays above it */
.wk-field>.tap-zone{position:absolute;inset:0}
/* Zeitmodus icon on the light fields (ochre, glove blue): ink, not sun-yellow */
.ph-reps .si.is-warn,.ph-glove .si.is-warn{color:var(--fg)}
/* reduced motion / "Bewegungen zeigen: aus": the static strip wraps inside the ring, readable from 3 m */
.arena .cp-strip{width:calc(var(--d) * .74);flex-wrap:wrap;row-gap:6px}
.arena .cp-strip .cp-cell{flex:0 0 calc(50% - 6px);max-width:none}
.arena .many .cp-strip .cp-cell{flex-basis:calc(33.3% - 6px)}
/* short screens (320×568): the bare-hand »Fertig« and the rep detail line give way so the set still fits */
@media (max-height:640px){
  .fertig{min-height:76px;font-size:28px}
  .reps-mid .rep-more{display:none}
}