:root{
  --bg:#F6F7F4;
  --card:#FFFFFF;
  --text:#141A17;
  --sub:#6B736E;
  --green:#1A6B42;
  --green-dark:#0F291C;
  --green-soft:#EAF4EE;
  --border:#DBE0DB;
  --danger:#B82929;
  --danger-bg:#FAE8E8;
  --shadow:0 8px 24px rgba(15,41,28,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif}
body{min-height:100vh}
button,select,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
.app-shell{max-width:480px;margin:0 auto;min-height:100vh;padding:env(safe-area-inset-top) 20px calc(102px + env(safe-area-inset-bottom))}
.header{padding-top:26px;margin-bottom:16px}
h1{font-size:28px;line-height:1.2;margin:0 0 8px}
.subtitle{color:var(--sub);font-size:14px}
.top-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.top-nav .btn{min-height:42px;border-radius:12px}
.match-card{background:white;border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:16px;box-shadow:var(--shadow)}
.match-label{font-size:12px;color:var(--sub);margin-bottom:6px}
.match-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.match-title{font-size:17px;font-weight:800;line-height:1.3}
.match-date{font-size:12px;color:var(--sub);margin-top:4px}
.small-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 14px}
.small-actions.single{grid-template-columns:1fr}
.small-actions .btn{min-height:44px;border-radius:12px;font-size:14px}
.player-list,.stack{display:flex;flex-direction:column;gap:10px}
.player-row{display:grid;grid-template-columns:1fr 118px;gap:10px}
.player-name,.role-btn,.option-card,.btn{
  min-height:56px;border-radius:16px;border:1px solid var(--border);background:var(--card);color:var(--text)
}
.player-name{padding:0 16px;text-align:left;font-weight:700;font-size:17px;box-shadow:var(--shadow)}
.role-btn{padding:0 12px;color:var(--green);font-weight:700;background:#fff}
.add-btn{width:100%;margin-top:12px;min-height:54px;border-radius:16px;border:1px dashed #9BA49E;background:transparent;color:var(--green);font-weight:800;font-size:17px}
.bottom-bar,.footer-actions{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(480px,100%);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(246,247,244,0),#F6F7F4 30%)
}
.bottom-bar{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.footer-actions{display:grid;grid-template-columns:112px 1fr;gap:10px;background:var(--bg)}
.btn{padding:0 16px;font-weight:800}
.btn.primary{background:var(--green-dark);color:white;border-color:var(--green-dark)}
.btn.soft{background:var(--green-soft);color:var(--green);border-color:transparent}
.btn.danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.btn.success{background:var(--green);color:white;border-color:var(--green)}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action-grid .option-card:last-child:nth-child(odd){grid-column:1/-1}
.option-card{padding:0 16px;text-align:left;font-weight:700;font-size:17px}
.option-card.selected{border-color:var(--green);color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.option-card.positive,.option-card.positive.selected{background:var(--green);color:#fff;border-color:var(--green);box-shadow:none}
.option-card.negative,.option-card.negative.selected{background:var(--danger-bg);color:var(--danger);border-color:transparent;box-shadow:none}
.divider{height:1px;background:var(--border);margin:18px 0}
.section-label{font-size:14px;color:var(--sub);margin:0 0 10px;font-weight:700}
.secondary-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.secondary-row.three{grid-template-columns:repeat(3,1fr)}
.secondary-row .btn{min-width:0;padding:0 8px}
.toast{position:fixed;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#142219;color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;z-index:30;box-shadow:var(--shadow)}
.role-menu{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.role-chip{border:1px solid var(--border);background:white;border-radius:999px;padding:10px 12px;font-weight:700}
.role-chip.active{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.metric{background:white;border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.metric small{display:block;color:var(--sub);margin-bottom:4px}
.metric strong{font-size:22px}
.stats-card,.match-list-card{background:white;border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.stats-head,.match-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.stats-head h2,.match-list-head h2{font-size:18px;margin:0}
.badge{font-size:12px;color:var(--green);font-weight:800}
.stat-section{padding:11px 0;border-top:1px solid #EEF0EE}
.stat-section:first-of-type{border-top:0}
.stat-section-title{font-weight:800;margin-bottom:6px}
.stat-line{font-size:13px;line-height:1.75;color:#343B37}
.stat-percent{font-size:12px;color:var(--sub);line-height:1.7;margin-top:3px}
.formula-pill{display:inline-block;background:var(--green-soft);color:var(--green);padding:5px 8px;border-radius:999px;margin:3px 4px 0 0;font-weight:700}
.empty{padding:32px 12px;text-align:center;color:var(--sub)}
.install-hint,.note{font-size:12px;color:var(--sub);margin-top:12px;line-height:1.6}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:24px;z-index:20}
.modal{width:min(360px,100%);max-height:80vh;overflow:auto;background:white;border-radius:20px;padding:20px;box-shadow:0 18px 48px rgba(0,0,0,.18)}
.modal h3{margin:0 0 8px}
.modal p{color:var(--sub);font-size:14px;line-height:1.5}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.rename-input,.form-input{width:100%;height:48px;border:1px solid var(--border);border-radius:12px;padding:0 12px;margin-top:8px;background:white}
.match-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #EEF0EE}
.match-row:first-of-type{border-top:0}
.match-row-main{min-width:0}
.match-row-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-row-meta{font-size:12px;color:var(--sub);margin-top:3px}
.match-row-actions{display:flex;gap:6px}
.mini-btn{border:1px solid var(--border);background:white;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:800}
.mini-btn.active{background:var(--green-dark);color:white;border-color:var(--green-dark)}
.mini-btn.danger{color:var(--danger);background:var(--danger-bg);border-color:transparent}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}

/* v4 scouting refinements */
.set-strip{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid #EEF0EE}
.set-strip>span{font-size:12px;color:var(--sub);margin-right:2px}
.set-chip{min-width:36px;height:36px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--sub);font-weight:800}
.set-chip.active{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.set-filter{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.set-filter::-webkit-scrollbar{display:none}
.last-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 13px;margin:0 0 10px;box-shadow:var(--shadow)}
.last-entry.empty-last{color:var(--sub);justify-content:center;box-shadow:none}
.last-kicker{font-size:11px;color:var(--sub);margin-bottom:3px}.last-main{font-size:13px;font-weight:800;line-height:1.35}
.player-name{display:flex;align-items:center;justify-content:space-between;gap:12px}.player-name small{font-size:11px;color:var(--sub);font-weight:800;background:var(--green-soft);padding:4px 7px;border-radius:999px}
.history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #EEF0EE}.history-row:first-child{border-top:0}
.history-main{min-width:0}.history-title{font-size:13px;font-weight:800;line-height:1.45}.history-meta{font-size:11px;color:var(--sub);margin-top:3px}.set-dot{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-right:6px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:11px}
@media (max-width:360px){.player-row{grid-template-columns:1fr 98px}.secondary-row.three{grid-template-columns:1fr}.action-grid{gap:8px}.set-chip{min-width:34px;padding:0 8px}}

/* v5: role-aware quick action ordering */
.option-card{position:relative}
.option-card.recommended{border-color:#9eb9aa;background:#f7fbf8}
.quick-tag{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:#496b5a;background:#e5f0e9;border-radius:999px;padding:4px 8px}

/* v8: structured attack/defense/setter choices */
.secondary-row.attack-types{grid-template-columns:repeat(2,1fr)}
.secondary-row.two-by-two{grid-template-columns:repeat(2,1fr)}
.secondary-row.setter-types{grid-template-columns:repeat(4,1fr)}
.secondary-row.setter-repair{grid-template-columns:repeat(3,1fr)}
.secondary-row.setter-types .btn,.secondary-row.setter-repair .btn{background:#fff;color:var(--text);border-color:var(--border);font-size:13px;padding:0 4px}
.secondary-row .btn.selected-neutral{background:#fff;color:var(--text);border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
@media (max-width:390px){
  .secondary-row.setter-types{gap:6px}
  .secondary-row.setter-types .btn,.secondary-row.setter-repair .btn{font-size:12px;min-height:52px}
}


/* v10: layered water ripple + local distortion + blur dissolve */
.splash-screen{
  --tap-x:50%;
  --tap-y:50%;
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  background:#9fd8c4;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  transform:translateZ(0);
  opacity:1;
  filter:blur(0);
  transition:filter .52s cubic-bezier(.22,.75,.25,1),opacity .52s ease,transform .52s cubic-bezier(.22,.75,.25,1);
}
.splash-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  pointer-events:none;
  transform:scale(1.002);
}
.splash-distortion{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  clip-path:circle(0 at var(--tap-x) var(--tap-y));
}
.splash-distortion img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.035);
  transform-origin:var(--tap-x) var(--tap-y);
  filter:blur(1px) saturate(1.04) contrast(1.02);
}
.splash-distortion.animate{
  animation:splashDistortion .5s cubic-bezier(.16,.76,.24,1) forwards;
}
.splash-ripple{
  position:fixed;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transform:scale(.15);
  border:2px solid rgba(255,255,255,.86);
  box-shadow:0 0 18px rgba(255,255,255,.18),inset 0 0 10px rgba(255,255,255,.12);
}
.splash-ripple.ripple-2{border-width:1.5px;opacity:0;border-color:rgba(255,255,255,.68)}
.splash-ripple.ripple-3{border-width:1px;opacity:0;border-color:rgba(255,255,255,.48)}
.splash-ripple.animate.ripple-1{animation:splashRipple1 .46s cubic-bezier(.12,.72,.25,1) forwards}
.splash-ripple.animate.ripple-2{animation:splashRipple2 .5s .055s cubic-bezier(.12,.72,.25,1) forwards}
.splash-ripple.animate.ripple-3{animation:splashRipple3 .54s .11s cubic-bezier(.12,.72,.25,1) forwards}
.splash-screen.is-exiting{filter:blur(15px);opacity:0;transform:scale(1.045)}
@keyframes splashRipple1{
  0%{transform:scale(.15);opacity:.96}
  60%{opacity:.55}
  100%{transform:scale(8);opacity:0}
}
@keyframes splashRipple2{
  0%{transform:scale(.22);opacity:.76}
  62%{opacity:.38}
  100%{transform:scale(10);opacity:0}
}
@keyframes splashRipple3{
  0%{transform:scale(.3);opacity:.52}
  65%{opacity:.24}
  100%{transform:scale(12.5);opacity:0}
}
@keyframes splashDistortion{
  0%{clip-path:circle(0 at var(--tap-x) var(--tap-y));opacity:0}
  18%{opacity:.78}
  65%{clip-path:circle(24vmax at var(--tap-x) var(--tap-y));opacity:.52}
  100%{clip-path:circle(42vmax at var(--tap-x) var(--tap-y));opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .splash-screen{transition:opacity .18s linear}
  .splash-screen.is-exiting{filter:none;transform:none}
  .splash-distortion{display:none}
  .splash-ripple.animate.ripple-1,.splash-ripple.animate.ripple-2,.splash-ripple.animate.ripple-3{animation-duration:.2s;animation-delay:0s}
}

/* v12: feature menu + advanced tactical board */
.feature-menu,.feature-menu-page{position:fixed;inset:0;background:#fff;display:grid;place-items:center;padding:28px}
.feature-menu-inner{width:min(420px,100%);display:flex;flex-direction:column;gap:28px}
.feature-menu-title{text-align:center;font-size:30px;font-weight:850;letter-spacing:-.8px;color:var(--ink)}
.feature-menu-grid{display:grid;gap:16px}
.feature-menu-btn{min-height:112px;border:1px solid #acd6bc;border-radius:24px;background:#fff;color:var(--green);box-shadow:0 8px 24px rgba(31,62,46,.07);font-size:20px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:14px}
.feature-menu-btn.primary-menu{background:#fff;color:var(--green);border-color:#acd6bc}
.feature-icon{font-size:32px;line-height:1;color:var(--green)}
.recorder-header{position:relative;min-height:45px;display:flex;align-items:center;justify-content:center}
.recorder-header h1{margin:0;text-align:center;font-size:26px;padding:0 86px}
.page-back{appearance:none;border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:800;white-space:nowrap}
.recorder-header .page-back{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.recorder-header-no-title{justify-content:flex-start;min-height:45px}
.recorder-header-no-title .page-back{left:0}


.tactics-page{position:fixed;inset:0;background:#fff;overflow:hidden;touch-action:none}
.tactics-top-panel{position:fixed;z-index:40;left:10px;right:10px;top:calc(8px + env(safe-area-inset-top));padding:6px 8px 7px;border:1px solid rgba(172,214,188,.78);border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 5px 16px rgba(31,62,46,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
.tactics-top-row{display:grid;grid-template-columns:66px minmax(0,1fr) 72px;align-items:center;gap:7px;min-height:31px}
.tactics-back{position:static!important;transform:none!important;padding:7px 8px;font-size:12px}
.tactics-match-info{min-width:0;text-align:center;line-height:1.05}.tactics-match-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink)}.tactics-match-info small{display:block;margin-top:3px;font-size:9.5px;color:var(--muted);font-weight:650}
.tactics-manage{padding:7px 7px;font-size:11px;white-space:nowrap}
.tactics-set-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:5px;height:28px}.tactics-set-row>span{font-size:10.5px;font-weight:800;color:var(--muted);margin-right:1px}.tactics-set-row .set-chip{width:31px;height:27px;min-height:27px;padding:0;border-radius:9px;font-size:11px}
.tactics-stage{position:absolute;inset:0;overflow:hidden;background:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
.volleyball-court{position:absolute;left:50%;top:50%;width:min(76vw,350px);height:min(68svh,650px);max-height:calc(100% - 110px);aspect-ratio:1/2;transform:translate(-50%,-50%);border:3px solid #657067;background:#fbfcfa;box-shadow:0 10px 30px rgba(15,41,28,.06);overflow:hidden;z-index:1;pointer-events:none}
.court-half{position:absolute;left:0;right:0;height:33.333%;background:#fbfcfa}.court-half-top{top:0}.court-half-bottom{bottom:0}
.court-middle-zone{position:absolute;left:0;right:0;top:33.333%;height:33.334%;background:#dcefe3}
.court-net{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:#526058;z-index:3}
.attack-line{position:absolute;left:0;right:0;height:2px;background:#657067;z-index:2}.attack-line-top{top:33.333%}.attack-line-bottom{top:66.667%}
.volleyball-court:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(101,112,103,.16);transform:translateX(-50%)}

.tactic-drawing-layer{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.tactic-stroke{fill:none;stroke:#3c9d64;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tactic-stroke.selected{stroke-width:5px;filter:drop-shadow(0 0 3px rgba(60,157,100,.35))}
.stroke-hit{fill:none;stroke:transparent;stroke-width:18px;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke;cursor:grab}
.range-face{fill:rgba(129,205,156,.40);stroke:#3c9d64;stroke-width:2.5px;vector-effect:non-scaling-stroke;pointer-events:none}
.range-point{position:absolute;z-index:9;width:10px;height:10px;border-radius:50%;background:#3c9d64;border:0;box-shadow:none;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;touch-action:none}

.tactic-player{position:absolute;z-index:12;width:42px;min-height:52px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;touch-action:none;user-select:none;-webkit-user-select:none}
.tactic-player-dot{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.98);box-shadow:0 3px 8px rgba(0,0,0,.18);display:grid;place-items:center}
.tactic-player-number{display:block;color:#111;font-size:13px;line-height:1;font-weight:900;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.25);pointer-events:none}
.tactic-player-name{max-width:98px;min-height:15px;white-space:nowrap;overflow:visible;text-align:center;font-size:12.6px;line-height:1.05;font-weight:800;color:#2d332f;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.color-green .tactic-player-dot{background:#43a86b}.color-yellow .tactic-player-dot{background:#f3d64e}.color-blue .tactic-player-dot{background:#4b8dd8}.color-amber .tactic-player-dot{background:#f0ad3d}
.tactic-player-source{position:absolute;left:18px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:25;width:42px;height:42px;display:grid;place-items:center;touch-action:none;cursor:grab}
.tactic-player-source .tactic-player-dot{width:35px;height:35px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.tactic-field-label{display:block;margin:9px 0 5px;font-size:12px;font-weight:800;color:var(--muted)}
.source-preview{pointer-events:none}

.tactic-ball{position:absolute;z-index:13;width:22px;height:22px;transform:translate(-50%,-50%);touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.16));font-size:20px;line-height:22px;text-align:center;display:grid;place-items:center}

.tactic-tools{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:25;display:flex;gap:12px}
.tactic-tool{width:54px;height:44px;border:1px solid #acd6bc;border-radius:11px;background:#f9fffb;display:grid;place-items:center;box-shadow:0 4px 12px rgba(40,91,63,.08);touch-action:none}
.tactic-tool svg{width:29px;height:29px;fill:#dcefe3;stroke:#3c9d64;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tactic-tool.active{background:#e7f5ec;border-color:#3c9d64;box-shadow:0 0 0 2px rgba(60,157,100,.12)}

.compact-modal{width:min(330px,100%)}
.color-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 4px 4px}.color-swatch{aspect-ratio:1;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 1px var(--border),0 4px 12px rgba(0,0,0,.12)}
.color-swatch.green{background:#43a86b}.color-swatch.yellow{background:#f3d64e}.color-swatch.blue{background:#4b8dd8}.color-swatch.amber{background:#f0ad3d}.modal-actions.one{grid-template-columns:1fr}

@media (max-width:390px){
  .volleyball-court{width:min(76vw,300px);height:min(66svh,560px);max-height:calc(100% - 105px)}
  .tactic-player{width:39px;min-height:49px}.tactic-player-dot{width:31px;height:31px}.tactic-player-number{font-size:12.5px}.tactic-player-name{font-size:12px;max-width:94px}.tactic-player-source{width:39px;height:39px}.tactic-player-source .tactic-player-dot{width:34px;height:34px}
  .tactics-top-panel{left:7px;right:7px;padding-left:6px;padding-right:6px}.tactics-top-row{grid-template-columns:61px minmax(0,1fr) 68px;gap:5px}.tactics-match-info strong{font-size:12px}.tactics-set-row{gap:5px}
  .tactic-ball{width:20px;height:20px;font-size:18px;line-height:20px}
  .tactic-tool{width:50px;height:42px}.tactic-tool svg{width:27px;height:27px}
}

/* v15: shared compact match controls + tactical tool placement + setter mix */
.recorder-match-panel{
  margin:4px 0 12px;
  padding:7px 8px 8px;
  border:1px solid rgba(172,214,188,.78);
  border-radius:15px;
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 16px rgba(31,62,46,.06);
}
.recorder-match-row{
  display:grid;
  grid-template-columns:66px minmax(0,1fr) 72px;
  align-items:center;
  gap:7px;
  min-height:31px;
}
.recorder-match-label{font-size:10.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.recorder-match-info{text-align:center}
.recorder-set-row{margin-top:5px}

/* Ball source starts directly above the player source. */
.tactic-ball{ }
.tactic-tools{
  left:auto;
  right:14px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:none;
}

.setter-mix{margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
.setter-mix-title{font-size:12px;font-weight:850;color:var(--ink);margin-bottom:7px}
.setter-mix-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.setter-mix-pill{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name rate" "count count";gap:2px 8px;padding:8px 9px;border:1px solid #dbe9df;border-radius:10px;background:#f8fcf9;color:var(--ink)}
.setter-mix-pill b{grid-area:name;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setter-mix-pill em{grid-area:rate;font-size:11.5px;font-style:normal;font-weight:900;color:var(--green)}
.setter-mix-pill small{grid-area:count;font-size:9.5px;color:var(--muted)}
@media (max-width:390px){
  .recorder-match-row{grid-template-columns:61px minmax(0,1fr) 68px;gap:5px}
  .recorder-match-label{font-size:10px}
  .tactic-tools{right:9px}
}