:root{
    --wood-1:#4c9a4c;
    --wood-2:#428642;
    --court-border:#1f4d2e;
    --court-line:#ffffff;
    --panel:#F4F1E8;
    --panel-2:#DDD6C4;
    --ink:#17241C;
    --ink-dim:#5B6660;
    --accent:#A6640F;
    --on-accent:#FFFFFF;
    --danger-text:#9C2B1F;
    --tbtn-bg:#DDD6C4;
    --teamA:#c0392b;
    --teamB:#1f4e79;
    --teamC:#c9971f;
    --teamR:#2f2f2f;
    --teamK:#7b3fa8;
    --obstacle:#f4b942;
    --danger:#a23b2e;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; height:100%;
    background:var(--panel);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    overflow:hidden;
    touch-action:none;
    user-select:none;
  }
  #app{
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
  }
  header{
    padding:0;
    flex-shrink:0;
  }
  header h1{
    margin:0;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.3px;
    color:var(--ink);
  }
  header p{
    margin:2px 0 0;
    font-size:11.5px;
    color:var(--ink-dim);
  }
  #court-wrap{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    position:relative;
    overflow:hidden;
  }
  #court{
    height:100%;
    max-width:100%;
    touch-action:none;
    border-radius:6px;
    box-shadow:0 6px 24px rgba(0,0,0,0.45);
    transform-origin:center center;
  }
  /* One vertical menu (playback + view + a handle), docked bottom-right or bottom-left; it can also fold away. */
  #side-menu{
    position:absolute;
    right:8px; bottom:8px;
    max-height:calc(100% - 16px - var(--nav-over, 0px));
    overflow-y:auto;
    scrollbar-width:none;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    z-index:5;
  }
  #side-menu::-webkit-scrollbar{display:none;}
  #side-menu.dock-left{right:auto; left:8px; align-items:flex-start;}
  #side-menu.collapsed .collapsible:not(#sm-playback){display:none;}
  /* (a folded menu keeps the whole playback cluster: speed, loop, stop, play - the board can always be controlled) */
  .sm-group{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:3px;
    border-radius:14px;
    background:var(--tbtn-bg);
    border:1px solid rgba(255,255,255,0.15);
  }
  .sm-sep{display:block; height:1px; margin:3px 6px; background:var(--ink); opacity:0.18; flex-shrink:0;}
  #side-menu button{
    flex-shrink:0;
    width:36px; height:36px;
    border-radius:10px;
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:18px;
    font-weight:700;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
  #side-menu button:active{transform:scale(0.94);}
  #side-menu button svg{width:20px; height:20px;}
  /* every button stays in view: on a short screen the menu gets denser, then it goes into two columns (see fitSideMenu) */
  #side-menu.dense{gap:6px;}
  #side-menu.dense .sm-group{padding:2px; gap:1px; border-radius:12px;}
  #side-menu.dense button{width:32px; height:32px; border-radius:9px;}
  #side-menu.dense button svg{width:18px; height:18px;}
  #side-menu.dense .sm-sep{margin:2px 5px;}
  /* a phone with a short court area keeps ONE column: the buttons shrink a step further (fitSideMenu) */
  #side-menu.compact{gap:4px;}
  #side-menu.compact .sm-group{padding:1px; gap:0; border-radius:10px;}
  #side-menu.compact button{width:30px; height:30px; border-radius:8px;}
  #side-menu.compact button svg{width:17px; height:17px;}
  #side-menu.compact .sm-sep{margin:1px 4px;}
  #side-menu.micro{gap:3px;}
  #side-menu.micro .sm-group{padding:1px; gap:0; border-radius:9px;}
  #side-menu.micro button{width:26px; height:26px; border-radius:7px;}
  #side-menu.micro button svg{width:15px; height:15px;}
  #side-menu.micro .sm-sep{margin:1px 3px;}
  #side-menu.two-col{flex-direction:row; align-items:flex-end; gap:8px;}
  #side-menu.two-col.dock-left{flex-direction:row-reverse; align-items:flex-end;}
  #side-menu .sm-col{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;}
  #side-menu.dense .sm-col{gap:6px;}
  #side-menu.dock-left .sm-col{align-items:flex-start;}
  #court-wrap.menu-two-col{padding-right:124px;}                       /* the court makes room for the second column */
  #court-wrap.menu-two-col.menu-left{padding-right:10px; padding-left:124px;}
  #btn-menu-toggle svg{transition:transform .15s;}
  #side-menu.collapsed #btn-menu-toggle svg{transform:rotate(180deg);}
  #zoom-reset{font-size:10px !important; font-weight:700;}
  #btn-play-speed{font-weight:700;}
  #btn-court{flex-direction:column; gap:1px;}
  #btn-fullview{flex-direction:column; gap:1px;}
  #btn-fullview svg{width:15px !important; height:15px !important;}
  #btn-fullview span{font-size:7px; font-weight:700; line-height:1;}
  #btn-court svg{width:15px !important; height:15px !important;}
  #btn-court #court-label{font-size:7px !important; font-weight:700; line-height:1;}
  .icon-recording circle{ animation: rec-pulse 1s ease-in-out infinite; }
  @keyframes rec-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
  #btn-play-export:disabled{opacity:0.6;}
  .icon-pause.hidden, .icon-play.hidden{display:none;}
  .icon-curve.hidden, .icon-wave.hidden{display:none;}
  .icon-export.hidden, .icon-recording.hidden{display:none;}
  #help-guide.hidden, #help-eula.hidden{display:none;}
  #btn-play-pause.active, #btn-play-loop.active, #btn-fullview.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--on-accent);
  }
  #court.has-photo .ln{
    filter: drop-shadow(0 0 0.6px rgba(0,0,0,0.65)) drop-shadow(0 0 0.6px rgba(0,0,0,0.65));
  }
  .token{cursor:grab;}
  .token.dragging{cursor:grabbing;}
  .token .ring{
    fill:none;
    stroke:#fff;
    stroke-width:3;
    opacity:0;
    transition:opacity .12s;
  }
  .token.selected .ring{opacity:1;}
  /* select several (see multi_select.py): the frame, the dashed box round the selection, the glow of the picked items */
  .marquee{fill:rgba(227,168,87,0.14); stroke:var(--accent); stroke-width:2; stroke-dasharray:6 4; pointer-events:none;}
  .multi-box{fill:rgba(227,168,87,0.08); stroke:var(--accent); stroke-width:2; stroke-dasharray:7 5; cursor:move; pointer-events:all;}
  .token.multi .ring{opacity:1;}
  .name-label{
    font-size:12px;
    font-weight:700;
    font-family:-apple-system,Segoe UI,Roboto,sans-serif;
    fill:#fff;
    paint-order:stroke;
    stroke:#000;
    stroke-width:3;
    stroke-linejoin:round;
    text-anchor:middle;
  }
  .arrow-path{
    fill:none;
    stroke-width:5;
    stroke-linecap:round;
    cursor:pointer;
  }
  .arrow-hit{
    fill:none;
    stroke:transparent;
    stroke-width:22;
    cursor:pointer;
  }
  .arrow-path.selected{stroke:var(--accent) !important; stroke-dasharray:2 8;}
  .arrow-path.heavy{stroke-width:11;}
  .arrow-inner{fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; opacity:0.85; pointer-events:none;}
  .arrow-path.selected + .arrow-inner{display:none;}
  /* rotation handle of text labels and benches: only while the item is selected */
  .rot-handle{opacity:0; pointer-events:none;}
  .token.selected .rot-handle{opacity:1;}
  .token.selected .rot-handle circle{pointer-events:auto; cursor:grab;}
  .res-handle{opacity:0; pointer-events:none;}
  .token.selected .res-handle{opacity:1;}
  .token.selected .res-handle circle{pointer-events:auto; cursor:nwse-resize;}
  .arrow-handle{
    fill:#fff;
    stroke:var(--accent);
    stroke-width:2.5;
    opacity:0;
    pointer-events:none;
    cursor:grab;
  }
  .token.selected .arrow-handle{opacity:1; pointer-events:auto;}
  #toolbar{
    flex-shrink:0;
    display:flex;
    gap:8px;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    overflow-x:auto;
    background:var(--panel-2);
    border-top:1px solid rgba(255,255,255,0.06);
  }
  .tbtn{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:58px;
    height:58px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:var(--tbtn-bg);
    color:var(--ink);
    font-size:9.5px;
    font-weight:600;
    letter-spacing:0.2px;
  }
  .tbtn:active{transform:scale(0.94);}
  /* the bottom bar on a phone: the buttons share the width (nothing hides behind a scroll), a little smaller */
  @media (max-width:600px){
    #toolbar{gap:2px; padding-left:3px; padding-right:3px;}
    #toolbar .tbtn{flex:1 1 auto; min-width:0; width:auto; padding:0; font-size:clamp(7px, 2.05vw, 9.5px); letter-spacing:-0.1px; white-space:nowrap; gap:3px;}
    #toolbar .tbtn svg{width:18px; height:18px;}
    #toolbar .tbtn:not(.active){background:transparent; border-color:transparent;}      /* (a longer label may reach past its button: the next button must not cover it) */
  }
  .tbtn.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--on-accent);
  }
  .tbtn.danger{color:var(--danger-text);}
  .tbtn.danger.confirming{background:var(--danger); color:#fff; border-color:var(--danger);}
  .tbtn.flash{background:#3f7a4a; border-color:#3f7a4a; color:#fff;}
  .tbtn:disabled{opacity:0.35;}
  .tbtn:disabled:active{transform:none;}
  .tbtn svg{width:19px; height:19px;}
  .dot{
    width:18px; height:18px; border-radius:50%;
    border:2px solid #fff;
  }
  .dot.a{background:var(--teamA);}
  .dot.b{background:var(--teamB);}
  .dot.c{background:var(--teamC);}
  .dot.ref{
    background:repeating-linear-gradient(45deg, #111 0 3px, #fff 3px 6px);
    border:2px solid #111;
  }
  .dot.coach{background:var(--teamK);}
  .dot.ball{background:radial-gradient(circle at 35% 30%, #f2954c, #c9601a);}
  .dot.cone{
    width:0; height:0; border-radius:0; border:none;
    border-left:9px solid transparent;
    border-right:9px solid transparent;
    border-bottom:16px solid var(--obstacle);
  }
  .dot.disc{
    width:24px; height:9px; border-radius:50%;
    background:var(--obstacle); border:2px solid #7a4a00;
  }
  .dot.hurdle{
    width:20px; height:16px; border-radius:2px; border:2px solid #241a06;
    background:repeating-linear-gradient(90deg, #241a06 0 3px, var(--obstacle) 3px 6px);
  }
  .dot.ring{
    width:19px; height:19px; border-radius:50%;
    border:4px solid var(--obstacle); background:transparent;
  }
  .dot.bench{
    width:28px; height:11px; border-radius:3px; border:1.5px solid #241a06;
    background:repeating-linear-gradient(45deg, #241a06 0 3px, var(--obstacle) 3px 7px);
  }
  .dot.pole{
    width:18px; height:18px; border-radius:50%; border:3px solid #f5f5f5;
    background:#d23b2a; box-shadow:0 0 0 1.5px #241a06;
  }
  .dot.gate{
    width:24px; height:16px; border-radius:12px 12px 0 0; border:4px solid #3d86ea; border-bottom:none;
    background:transparent; box-shadow:0 0 0 0 #14407f;
  }
  .dot.goal{
    width:28px; height:15px; border-radius:2px; border:2px solid #1a1a1a;
    background:repeating-linear-gradient(45deg, #ffffff 0 1.4px, transparent 1.4px 4px), #8fb98f;
  }
  .dot.hoop{
    width:24px; height:20px; border-radius:0; border:none;
    background:linear-gradient(#f5f1e8, #f5f1e8) 50% 0 / 24px 4px no-repeat, radial-gradient(circle at 50% 72%, transparent 5.5px, #e2762a 5.5px 8.5px, transparent 9px);
  }
  .dot.text-ico{
    width:20px; height:20px; border-radius:4px;
    background:var(--panel-2); border:1px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); font-weight:800; font-size:12px;
  }
  .dot.bubble-ico{
    width:20px; height:20px; border-radius:4px;
    background:var(--panel-2); border:1px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink);
  }
  .dot.bubble-ico svg{width:14px; height:14px;}
  .dot.pen{
    width:18px; height:18px; border-radius:50%;
    border:2px solid #fff;
    background:var(--tbtn-bg);
  }
  #hint{
    position:absolute;
    top:8px; left:50%; transform:translateX(-50%);
    background:var(--tbtn-bg);
    color:var(--ink);
    font-size:11.5px;
    padding:6px 12px;
    border-radius:20px;
    pointer-events:none;
    opacity:0;
    transition:opacity .2s;
    white-space:nowrap;
  }
  #hint.show{opacity:1;}

  /* the two mini menus sit just above the toolbar; the engine slides them over the active action button */
  #geometry-bar{
    position:absolute;
    bottom:8px; left:0;
    background:var(--tbtn-bg);
    color:var(--ink);
    padding:4px;
    border-radius:20px;
    display:none;
    gap:2px;
    white-space:nowrap;
    z-index:6;
  }
  #geometry-bar.show{display:flex;}
  #geo-wave-group{display:flex; align-items:center; gap:2px;}
  .geo-sep{width:1px; align-self:stretch; margin:5px 3px; background:currentColor; opacity:0.25;}
  #geometry-bar button{
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:11.5px;
    font-weight:700;
    padding:5px 11px;
    border-radius:16px;
  }
  #geometry-bar button.active{background:var(--accent); color:var(--on-accent);}

  #slalom-stepper{
    position:absolute;
    bottom:46px; left:0;
    background:var(--tbtn-bg);
    color:var(--ink);
    font-size:11.5px;
    padding:6px 10px;
    border-radius:20px;
    display:none;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    z-index:6;
  }
  #slalom-stepper.show{display:flex;}
  #slalom-stepper button{
    width:22px; height:22px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.08);
    color:var(--ink);
    font-size:14px;
    font-weight:800;
    line-height:1;
    padding:0;
  }
  #slalom-stepper button:active{transform:scale(0.9);}
  #slalom-count{font-weight:800; min-width:14px; text-align:center;}

  /* Floating bar right above the selected item (Edit / Duplicate / Delete); the engine positions it. */
  #ctx-bar{
    position:absolute;
    left:0; top:0;
    display:none;
    gap:2px;
    padding:3px;
    background:var(--tbtn-bg);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:14px;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
    z-index:7;
  }
  #ctx-bar.show{display:flex;}
  #ctx-bar .tbtn{
    flex-shrink:0;
    width:auto; min-width:48px; height:56px; padding:0 3px;
    flex-direction:column; justify-content:center; align-items:center;
    gap:5px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--menu-fg, #fff);
    font-size:11px; font-weight:700; line-height:1; white-space:nowrap;
  }
  #ctx-bar .tbtn svg{width:24px; height:24px; flex:none;}
  #ctx-bar .tbtn:active{transform:scale(0.95);}
  /* the bar over any item is the bubble of the player: padded glass, a coloured icon over a label */
  #ctx-bar{padding:6px; gap:2px; border-radius:16px;}
  #btn-edit svg{color:#e86bff;} #btn-rotate-item svg{color:#5ac8fa;} #btn-duplicate svg{color:#ffd60a;} #btn-flip-h svg, #btn-flip-v svg{color:#64d2ff;} #btn-back svg, #btn-front svg{color:#c7c7cc;} #btn-delete svg{color:#ff7b6e;}
  html.hc #ctx-bar .tbtn svg{color:#000 !important;}
  #ctx-bar .tbtn:disabled{display:none;}
  #ctx-bar::after{
    content:'';
    position:absolute;
    left:calc(50% + var(--caret-dx, 0px));
    bottom:-6px;
    width:10px; height:10px;
    background:var(--tbtn-bg);
    border-right:1px solid rgba(255,255,255,0.15);
    border-bottom:1px solid rgba(255,255,255,0.15);
    transform:translateX(-50%) rotate(45deg);
  }
  #ctx-bar.below::after{
    bottom:auto; top:-6px;
    transform:translateX(-50%) rotate(225deg);
  }

  /* Export video: pick the shape of the clip */
  .video-sub{font-size:11.5px; color:var(--ink-dim); margin:8px 0 10px; line-height:1.45;}
  .video-sub.hidden{display:none;}
  .video-q{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px;}
  .video-qchip{text-align:left; padding:9px 11px; border-radius:12px; border:2px solid transparent; background:var(--tbtn-bg); color:var(--ink); cursor:pointer;}
  .video-qchip b{display:block; font-size:13.5px; font-weight:800;}
  .video-qchip i{display:block; font-style:normal; font-size:11px; color:var(--ink-dim); margin-top:2px;}
  .video-qchip.on{border-color:var(--accent);}
  .video-tiles{display:flex; flex-direction:column; gap:8px;}
  .video-tile{display:flex; align-items:center; gap:12px; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,0.1); background:var(--tbtn-bg); color:var(--ink); cursor:pointer; font:inherit;}
  .video-tile:active{transform:scale(0.98);}
  .video-tile svg{width:30px; height:30px; flex-shrink:0; color:var(--accent);}
  .video-tile b{display:block; font-size:14px; font-weight:800;}
  .video-tile i{display:block; font-style:normal; font-size:11.5px; color:var(--ink-dim); margin-top:2px;}
  /* Play brief: one card per step (picture + text + optional note) */
  .brief-box{max-width:480px; max-height:90vh; display:flex; flex-direction:column;}
  .brief-box .modal-actions{display:grid; grid-template-columns:1fr 1fr;}      /* four buttons: two by two, they would not fit in a row on a phone */
  .brief-pics{display:flex; gap:4px; margin:0 0 8px; padding:3px; border-radius:10px; background:var(--tbtn-bg); border:1px solid rgba(0,0,0,0.08);}
  .brief-pics button{flex:1 1 0; min-width:0; padding:7px 2px; border:none; border-radius:8px; background:transparent; color:var(--ink-dim); font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;}
  .brief-pics button.on{background:var(--accent); color:var(--on-accent);}
  .brief-pics button:disabled{opacity:0.55; cursor:default;}
  #brief-list{overflow-y:auto; min-height:0; flex:1 1 auto; display:flex; flex-direction:column; gap:10px; margin-bottom:10px;}
  .brief-step{display:flex; gap:10px; padding:8px; border-radius:12px; background:var(--tbtn-bg); border:1px solid rgba(0,0,0,0.08);}
  .brief-thumb{width:112px; flex-shrink:0; align-self:flex-start; border-radius:8px; background:rgba(0,0,0,0.12); object-fit:contain;}
  .brief-step.wide{flex-direction:column;}
  .brief-step.wide .brief-thumb{width:100%; align-self:stretch;}
  .brief-thumb.loading{animation:brief-pulse 1.1s ease-in-out infinite;}
  @keyframes brief-pulse{0%,100%{opacity:0.55;} 50%{opacity:1;}}
  .brief-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;}
  .brief-head{display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--ink);}
  .brief-num{flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;}
  .brief-text{flex:1; min-width:0; box-sizing:border-box; margin:-2px 0 0; padding:1px 4px; border:0; border-bottom:1px dashed rgba(0,0,0,0.28); border-radius:4px; background:transparent; color:var(--ink); font:inherit; line-height:1.45; outline:none; resize:none; overflow:hidden; display:block;}
  .brief-text:focus{background:rgba(255,255,255,0.4); border-bottom-style:solid; border-bottom-color:var(--accent);}
  .brief-note{width:100%; box-sizing:border-box; border:1px solid rgba(0,0,0,0.15); border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-size:12px; line-height:1.4; padding:6px 8px; outline:none; resize:none; overflow:hidden; display:block;}

  #custom-grid, #erase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 4px;}
  #custom-grid .tbtn, #erase-grid .tbtn{width:auto; height:72px; gap:6px; font-size:11px; padding:0 2px;}
  #custom-grid .tbtn svg, #erase-grid .tbtn svg{width:22px; height:22px;}
  #erase-grid{grid-template-columns:repeat(2,1fr);}
  .tile-note{margin:8px 2px 12px; font-size:11.5px; line-height:1.45; color:var(--ink-dim);}

  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(10,7,5,0.45);
    display:flex; align-items:center; justify-content:center;
    z-index:50;
    padding:20px;
    touch-action:auto;
    overflow-y:auto;
  }
  .modal-overlay.hidden{display:none;}
  #positions-box.wide{max-width:900px !important;}
  #lib-wrap[hidden], #slot-list[hidden], #slot-hint[hidden]{display:none !important;}
  #positions-overlay{align-items:flex-start;}                                          /* (the box is taller than a phone: it must be scrollable from its top, not centred and cut) */
  #positions-overlay .modal-box{margin:auto;}
  .modal-box{
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    padding:18px;
    width:100%;
    max-width:340px;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
  }
  .modal-title{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:12px;
  }
  .modal-field{margin-bottom:10px;}
  .modal-field.hidden{display:none;}
  .modal-field label{
    display:block;
    font-size:11px;
    color:var(--ink-dim);
    margin-bottom:4px;
    font-weight:600;
  }
  .modal-box input[type="text"], .modal-box input[type="number"]{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:var(--panel-2);
    color:var(--ink);
    font-size:15px;
    outline:none;
  }
  .modal-box input:focus{border-color:var(--accent);}
  .modal-box textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.15); background:var(--panel-2); color:var(--ink); font-size:15px; font-family:inherit; line-height:1.35; resize:vertical; min-height:84px; outline:none; user-select:text; -webkit-user-select:text; touch-action:auto;}
  .modal-box textarea:focus{border-color:var(--accent);}
  .modal-field input[type="range"]{width:100%; accent-color:var(--accent);}
  .modal-field label b{color:var(--ink); margin-left:6px;}
  .bb-sw{display:flex; gap:8px; flex-wrap:wrap;}
  .bb-sw button{width:30px; height:30px; border-radius:50%; border:2px solid rgba(0,0,0,0.3); padding:0; cursor:pointer;}
  .bb-sw button.on{outline:3px solid var(--accent); outline-offset:2px;}
  .modal-actions{
    display:flex;
    gap:8px;
    margin-top:14px;
  }
  .modal-btn{
    flex:1;
    padding:10px 0;
    border-radius:10px;
    border:none;
    font-size:13px;
    font-weight:700;
  }
  .modal-btn.ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.15);
    color:var(--ink-dim);
  }
  .modal-btn.primary{
    background:var(--accent);
    color:var(--on-accent);
  }
  .swatch-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .swatch{
    aspect-ratio:1;
    border-radius:12px;
    border:2px solid rgba(255,255,255,0.14);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:6px;
    font-size:10px;
    font-weight:700;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.7);
  }
  .swatch.active{border-color:#fff; box-shadow:0 0 0 2px var(--accent) inset;}

  .section-title{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.4px;
    color:var(--ink-dim);
    margin:14px 0 8px;
  }
  .section-title:first-of-type{margin-top:0;}
  .asset-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }
  .asset-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:10px 2px;
    color:var(--ink);
    font-size:9.5px;
    font-weight:600;
  }
  .asset-btn:active{transform:scale(0.94);}
  .asset-btn:disabled{opacity:0.3;}
  .asset-btn.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}

  .color-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:4px;
  }
  .color-row input[type="color"]{
    -webkit-appearance:none;
    appearance:none;
    width:44px; height:44px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:none;
    padding:0;
    flex-shrink:0;
  }
  .color-row span{font-size:11px; color:var(--ink-dim);}
  .tab-row{
    display:flex;
    gap:8px;
    background:var(--panel-2);
    border-radius:10px;
    padding:4px;
  }
  .tab-btn{
    flex:1;
    padding:9px 0;
    border-radius:8px;
    border:none;
    background:transparent;
    color:var(--ink-dim);
    font-size:12.5px;
    font-weight:700;
  }
  .help-lang-btn{
    flex:0 0 auto !important;
    padding:6px 10px !important;
    font-size:11px !important;
    background:rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
  }
  .help-lang-btn.active{
    background:var(--accent) !important;
    color:var(--on-accent) !important;
    border-color:var(--accent) !important;
  }
  .tab-btn.active{
    background:var(--accent);
    color:var(--on-accent);
  }
  .position-carousel{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:4px 2px 8px;
    -webkit-overflow-scrolling:touch;
  }
  .position-card{
    flex:0 0 auto;
    width:152px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .position-thumb{
    width:152px; height:284px;
    border-radius:14px;
    background-color:var(--panel-2);
    background-size:cover;
    background-position:center;
    border:2px solid rgba(255,255,255,0.14);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .position-card.empty .position-thumb{
    border:2px dashed rgba(255,255,255,0.22);
  }
  .position-card.empty .position-thumb::after{
    content:'+';
    font-size:38px;
    font-weight:300;
    color:var(--ink-dim);
  }
  .position-num-badge{
    position:absolute; top:8px; left:8px;
    width:26px; height:26px;
    border-radius:50%;
    background:var(--tbtn-bg);
    color:var(--ink);
    font-size:12.5px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,0.2);
  }
  .position-name{
    font-size:11.5px;
    font-weight:600;
    color:var(--ink);
    text-align:center;
    width:152px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .position-card.empty .position-name{color:var(--ink-dim);}
  .position-actions{display:flex; gap:6px;}
  .position-actions button{
    width:32px; height:26px;
    border-radius:7px;
    border:1px solid rgba(255,255,255,0.15);
    background:var(--panel-2);
    color:var(--ink);
    font-size:13px;
    font-weight:700;
  }
  .position-actions button:active{transform:scale(0.92);}

  .slot-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:360px;
    overflow-y:auto;
  }
  .slot-row{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    padding:8px 10px;
  }
  .slot-num{
    width:26px; height:26px;
    border-radius:50%;
    background:var(--accent);
    color:var(--on-accent);
    font-weight:800;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .slot-row.empty .slot-num{
    background:transparent;
    border:1.5px solid rgba(255,255,255,0.25);
    color:var(--ink-dim);
  }
  .slot-status{
    flex:1;
    font-size:11.5px;
    color:var(--ink-dim);
    min-width:0;
  }
  .slot-row:not(.empty) .slot-status{color:var(--ink);}
  .slot-btn{
    flex-shrink:0;
    padding:7px 12px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.15);
    background:transparent;
    color:var(--ink);
    font-size:11.5px;
    font-weight:700;
  }
  .slot-btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .slot-btn:disabled{opacity:0.3;}
  .color-swatch-btn{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:var(--panel-2);
    color:var(--ink);
    font-size:12.5px;
    font-weight:600;
    text-align:left;
  }
  .color-swatch-btn .swatch-preview{
    width:28px; height:28px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.25);
    flex-shrink:0;
  }
  #sv-canvas{
    width:100%;
    height:170px;
    border-radius:10px;
    display:block;
    touch-action:none;
    cursor:crosshair;
  }
  .sv-cursor{
    position:absolute;
    width:16px; height:16px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,0.5);
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  #sv-wrap{ position:relative; }
  #hue-slider{
    position:relative;
    height:22px;
    border-radius:11px;
    margin-top:14px;
    touch-action:none;
    cursor:pointer;
    background:linear-gradient(to right,
      #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  }
  #hue-handle{
    position:absolute;
    top:50%;
    width:22px; height:22px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,0.4);
    transform:translate(-50%,-50%);
    pointer-events:none;
    background:transparent;
  }
  .hex-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
  }
  .hex-row .swatch-preview{
    width:36px; height:36px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.25);
    flex-shrink:0;
  }
  .hex-row input{
    flex:1;
    padding:9px 11px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.15);
    background:var(--panel-2);
    color:var(--ink);
    font-size:14px;
    font-family:monospace;
    text-transform:uppercase;
  }

  .swatch-dot{
    width:34px; height:34px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.2);
    flex-shrink:0;
  }
  .swatch-dot.active{border-color:#fff; box-shadow:0 0 0 2px var(--accent);}
  .swatch-dot-row{display:flex; gap:8px; flex-wrap:wrap;}
  #kit-preview{display:flex; justify-content:center; margin:8px 0 6px;}
  #kit-preview svg{width:104px; height:110px;}
  #kit-field .brief-pics{width:100%;}
  #kit-field .brief-pics button{flex:1;}
  .tc-row{margin:6px 0;}
  .tc-name{display:block; margin-bottom:4px; font-size:12px; font-weight:700; color:var(--ink-dim);}
  .tc-row .swatch-dot-row{gap:5px;}
  .tc-row .swatch-dot{width:24px; height:24px;}
  #logo-overlay{align-items:flex-start;}              /* (a tall dialog on a short screen starts at the top and scrolls) */
  #logo-overlay .modal-box{margin:auto;}
  .swatch-dot.tc-custom{display:flex; align-items:center; justify-content:center; padding:0; font-size:16px; font-weight:800; line-height:1; color:var(--ink); background:var(--tbtn-bg);}

  .pe-photo-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
  }
  #logo-overlay #logo-photo-preview{background-size:contain; background-repeat:no-repeat;}                  /* (a logo is shown whole) */
  #crop-frame.checker{background-color:#fff; background-image:conic-gradient(#d6d6d6 25%, #fff 0 50%, #d6d6d6 0 75%, #fff 0); background-size:20px 20px;}
  #pe-photo-preview, #logo-photo-preview, #roster-photo-preview{
    width:56px; height:56px;
    border-radius:50%;
    background-color:var(--panel-2);
    background-size:cover;
    background-position:center;
    border:1px solid rgba(255,255,255,0.15);
    flex-shrink:0;
  }
  #field-photo-preview{
    width:56px; height:56px;
    border-radius:10px;
    background-color:var(--panel-2);
    background-size:cover;
    background-position:center;
    border:1px solid rgba(255,255,255,0.15);
    flex-shrink:0;
  }
  #crop-frame{
    position:relative;
    width:260px; height:260px;
    max-width:100%;
    margin:0 auto;
    overflow:hidden;
    border-radius:12px;
    background:#000;
    touch-action:none;
    cursor:grab;
  }
  #crop-img{
    position:absolute;
    top:0; left:0;
    transform-origin:top left;
    -webkit-user-drag:none;
    user-select:none;
    pointer-events:none;
  }
  #crop-mask{
    position:absolute; inset:0;
    border-radius:50%;
    box-shadow:0 0 0 999px rgba(0,0,0,0.55);
    border:2px solid rgba(255,255,255,0.85);
    pointer-events:none;
  }
  .pe-photo-buttons{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
  }

  /* While the animation plays with "full court view" on, the side buttons get out of the way. */
  body.play-full #side-menu{display:none;}
  body.play-full #view3d .v3-bar, body.play-full #view3d .v3-hint{padding-right:0; padding-left:0;}   /* the side menu is away: no gap left for it */

  /* formations + player type */
  .modal-box select{
    width:100%; padding:10px 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:var(--panel-2); color:var(--ink); font-size:15px; outline:none;
  }
  .modal-box select option, .modal-box select optgroup{background:#fff; color:#1a1a1a;}      /* (the list of a select is drawn by the system on white: dark text, not the light text of the dialog) */
  .formations-list{
    overflow-y:auto; margin-top:10px; padding-right:4px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  }
  .formation-group{
    grid-column:1 / -1; margin-top:4px;
    font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-dim);
  }
  .formation-card{
    background:none; border:none; padding:0; color:var(--ink);
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size:12px; font-weight:700;
  }
  .formation-card svg{
    width:100%; max-width:84px; aspect-ratio:1; border-radius:50%;
    border:2px solid rgba(255,255,255,0.25);
  }
  .formation-card.applied svg{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent);}

  /* ---- 3D view (board-3d.js) ---- */
  #view3d{position:absolute; inset:0; z-index:4; background:#16301f; border-radius:6px; overflow:hidden;}
  #view3d .v3-canvas{position:absolute; inset:0;}
  #view3d canvas{display:block; width:100%; height:100%; cursor:grab; touch-action:none;}
  #view3d canvas:active{cursor:grabbing;}
  #view3d .v3-bar{position:absolute; top:8px; left:8px; right:8px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:6px; pointer-events:none;}
  .v3-seg{display:flex; gap:2px; padding:3px; border-radius:12px; background:var(--tbtn-bg); pointer-events:auto;}
  .v3-seg button, .v3-btn{border:0; border-radius:9px; background:transparent; color:var(--ink); font-size:12px; font-weight:700; line-height:1; padding:7px 11px; pointer-events:auto;}
  .v3-btn{background:var(--tbtn-bg); border-radius:12px; padding:10px 12px;}
  .v3-seg button.on, .v3-btn.on{background:var(--accent); color:var(--on-accent);}
  #view3d .v3-bar, #view3d .v3-hint{padding-right:calc(var(--sm-w, 44px) + 14px);}   /* keep clear of the side menu (docked right) */
  #side-menu.dock-left ~ #view3d .v3-bar, #side-menu.dock-left ~ #view3d .v3-hint{padding-right:0; padding-left:calc(var(--sm-w, 44px) + 14px);}
  @media (max-width:520px){
    .v3-bar{gap:5px;}
    .v3-seg button, .v3-btn{font-size:11.5px; padding:8px 9px;}
  }
  .v3-anrow{flex-basis:100%; display:none;}
  .v3-anrow.open{display:flex;}
  .v3-mountrow{flex-basis:100%; display:none;}
  .v3-mountrow.open{display:flex;}
  .v3-mountrow{flex-wrap:wrap; gap:6px; justify-content:center;}
  .v3-edrow{flex-basis:100%; display:none;}
  .v3-edrow.open{display:flex;}
  .v3-edrow .v3-seg{flex-wrap:wrap;}
  .v3-pathrow{flex-basis:100%; display:none; align-items:center; flex-wrap:wrap; gap:6px;}
  .v3-pathrow.open{display:flex;}
  .v3-ptrack{position:relative; flex:1 1 150px; min-width:130px; max-width:380px; height:34px; box-sizing:border-box; padding:0 10px; display:flex; align-items:center; border-radius:12px; background:var(--tbtn-bg); pointer-events:auto;}
  .v3-ptrack input{position:relative; z-index:1; width:100%; margin:0; background:transparent; accent-color:var(--accent);}
  .v3-pticks{position:absolute; left:0; right:0; top:3px; height:8px; pointer-events:none;}
  .v3-pticks i{position:absolute; top:0; width:8px; height:8px; margin-left:-4px; border-radius:2px; background:var(--accent); transform:rotate(45deg);}
  #view3d .v3-info{position:absolute; left:10px; bottom:84px; max-width:calc(100% - 90px); padding:8px 11px; border-radius:12px; background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); color:var(--menu-fg); font-size:11.5px; font-weight:600; line-height:1.55; pointer-events:none;}
  #view3d .v3-leg{display:flex; align-items:center; gap:7px; margin-top:2px;}
  #view3d .v3-leg b{display:block; width:78px; height:8px; border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,0.25);}
  #view3d .v3-zones{border-collapse:separate; border-spacing:2px; margin-top:4px; font-size:10.5px; font-weight:700; text-align:center;}
  #view3d .v3-zones td{min-width:34px; padding:2px 3px; border-radius:4px; color:#fff;}
  #view3d .v3-info i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}
  #side-menu.dock-left ~ #view3d .v3-info{left:58px; max-width:calc(100% - 72px);}
          /* clear of the side menu, on whichever side it is docked */
  /* two columns of menu: the 3D view gives them their own room, like the 2D court does, so it needs no clearance of its own */
  #court-wrap.menu-two-col #view3d{right:108px;}
  #court-wrap.menu-two-col.menu-left #view3d{right:0; left:108px;}
  #side-menu.two-col ~ #view3d .v3-bar, #side-menu.two-col ~ #view3d .v3-hint{padding-left:0; padding-right:0;}
  #side-menu.two-col ~ #view3d .v3-info{left:10px; max-width:calc(100% - 20px);}
  body.play-full #side-menu ~ #view3d .v3-info{left:10px; max-width:calc(100% - 20px);}     /* (the menu is away while the play runs full view) */
  #view3d .v3-hint{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:11.5px; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.7); pointer-events:none; transition:opacity 1s;}
  #view3d .v3-hint.gone{opacity:0;}
  body.view3d #toolbar button:not(#btn-demo):not(#btn-custom), body.view3d #sm-view button:not(#btn-court):not(#zoom-in):not(#zoom-out):not(#zoom-reset):not(#btn-rotate){opacity:0.35; pointer-events:none;}   /* drawing and adding are off in 3D (the Edit button of the 3D bar moves things there); Demo and More, the full / half court, zoom and rotate still work */
  /* (the 2D | 3D switch lives in the top bar now: see tactixnav.css) */

  /* A shared play or the demo: a bar instead of the hint line, and a first-visit invitation over the court */
  #view-bar{display:none;}
  body.view-mode .nav-hint{display:none;}
  body.view-mode.view-demo .nav-hint{display:flex;}                 /* (in a demo the hint line shows only "Start from an existing scheme") */
  .hint-link{display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:4px 13px 4px 10px; border-radius:12px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:700; line-height:1.2;
    color:var(--menu-fg, #F4F1E8); background:var(--glass, rgba(23,36,28,0.60)); border:1px solid var(--glass-edge, rgba(255,255,255,0.16));
    -webkit-backdrop-filter:var(--glass-blur, blur(12px)); backdrop-filter:var(--glass-blur, blur(12px));}
  .hint-link::before{content:''; flex:none; width:15px; height:15px; background:#E3A857;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E") center/contain no-repeat;}
  .hint-link:active{transform:scale(0.97);}
  .hint-link.confirming{color:#ff9d8a; border-color:#ff9d8a;}
  html.hc .hint-link{border:2px solid #000;}
  .hint-link[hidden]{display:none;}
  body.view-mode #view-bar:empty{display:none;}
  body.view-mode #view-bar{display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:2px 46px 2px 10px; font-size:12px; font-weight:700; color:var(--ink);}
  #view-bar .vb-title{margin-right:4px;}
  #view-bar button{border:0; border-radius:12px; padding:8px 10px; font-size:12px; font-weight:800; line-height:1; background:var(--accent); color:var(--on-accent);}
  #view-bar button.ghost{background:var(--tbtn-bg); color:var(--ink);}
  #demo-pill{position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6; display:flex; align-items:center; border-radius:999px; background:var(--accent); color:var(--on-accent); box-shadow:0 6px 20px rgba(0,0,0,0.35); overflow:hidden;}
  #demo-pill button{border:0; background:transparent; color:inherit; font-size:13px; font-weight:800; padding:10px 12px; line-height:1;}
  #demo-pill #demo-x{padding:10px 12px 10px 4px; font-size:16px; opacity:0.8;}
  body.view3d #demo-pill, body.view-mode #demo-pill{display:none;}

  /* ---------- Board tabs: a few boards one tap apart ---------- */
  #board-tabs{flex-shrink:0; display:flex; align-items:center; gap:6px; padding:5px 10px; overflow-x:auto; scrollbar-width:none; background:var(--panel);}
  #board-tabs::-webkit-scrollbar{display:none;}
  #board-tabs .bt{flex:0 1 auto; min-width:0; max-width:132px; padding:6px 13px; border-radius:999px; border:1px solid rgba(0,0,0,0.14); background:var(--tbtn-bg); color:var(--ink); font:inherit; font-size:12px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;}
  #board-tabs .bt.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  #board-tabs .bt-add{flex:0 0 auto; width:32px; padding:6px 0; text-align:center; font-size:16px; line-height:1;}
  body.view-mode #board-tabs, body.play-full #board-tabs, body.play-full #sm-zoom{display:none;}
  .modal-btn.danger{color:var(--danger-text); border-color:var(--danger);}
  .modal-btn.danger.confirming{background:var(--danger); color:#fff;}

  /* ---------- Lock: the board on its own, nothing to touch by accident ---------- */
  #btn-lock.active{background:var(--accent) !important; color:var(--on-accent) !important;}
  #lock-pill{display:none; position:absolute; right:12px; bottom:12px; z-index:8; align-items:center; gap:8px;}
  body.locked #lock-pill{display:flex;}
  #lock-pill button{position:relative; overflow:hidden; width:46px; height:46px; border-radius:50%; border:1px solid rgba(0,0,0,0.18); background:var(--tbtn-bg); color:var(--ink); padding:0; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px rgba(0,0,0,0.3); opacity:0.88; touch-action:none;}
  #lock-pill button svg{width:22px; height:22px; position:relative;}
  #lock-play .lp-pause{display:none;}
  #lock-play.playing .lp-play{display:none;}
  #lock-play.playing .lp-pause{display:block;}
  #lock-unlock::before{content:''; position:absolute; left:0; right:0; bottom:0; height:0; background:var(--accent); opacity:0.45; transition:none;}
  #lock-unlock.holding::before{height:100%; transition:height .65s linear;}
  #lock-hint{position:absolute; right:0; bottom:56px; white-space:nowrap; padding:7px 12px; border-radius:12px; background:rgba(16,20,24,0.85); color:#fff; font-size:12px; font-weight:700; opacity:0; transition:opacity .25s; pointer-events:none;}
  #lock-hint.show{opacity:1;}
  body.locked nav, body.locked header, body.locked #toolbar, body.locked #side-menu, body.locked #sm-zoom, body.locked #ctx-bar, body.locked #hint, body.locked #geometry-bar,
  body.locked #slalom-stepper, body.locked #demo-pill, body.locked #view-bar{display:none !important;}
  body.locked #court{pointer-events:none;}
  body.locked.cam-frozen #view3d canvas{pointer-events:none;}      /* (a locked board's 3D view can still be turned while its camera is free and its view not locked) */
  body.locked .v3-bar, body.locked #view3d .v3-hint, body.locked #view3d .v3-info{display:none;}
  header > p{margin-right:84px;}

  /* the bubble over a player tapped in the 3D view: Move / Path / Edit / Stats (and his statistics above them) */
  .v3-ctx{position:absolute; z-index:7; transform:translate(-50%, -100%); margin-top:-14px; display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:6px;
    background:var(--glass); border:1px solid var(--glass-edge); border-radius:16px; box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); color:#fff; pointer-events:auto;}      /* (see-through glass like the other menus: Move / Path / Edit / Stats float over the pitch) */
  .v3-ctx .v3-ctxrow button, .v3-ctx .v3-stats h4, .v3-ctx .v3-sgrid b, .v3-ctx .v3-sgrid span, .v3-ctx .v3-stats p{text-shadow:0 1px 3px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.6);}
  .v3-ctx .v3-ctxrow button svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.65));}
  .v3-ctx[hidden]{display:none;}
  .v3-ctx.below{transform:translate(-50%, 0); margin-top:14px;}
  .v3-ctxrow{display:flex; gap:2px;}
  .v3-ctxrow button{width:48px; height:56px; border:0; border-radius:12px; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; font:700 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
  .v3-ctxrow button svg{width:24px; height:24px; flex:none;}
  .v3-ctxrow button.on{background:rgba(255,255,255,0.16);}
  .v3-ctxrow button:active{transform:scale(0.95);}
  .v3-caret{position:absolute; left:calc(50% + var(--caret-dx, 0px)); bottom:-7px; width:13px; height:13px; margin-left:-6.5px; background:var(--glass); border-right:1px solid var(--glass-edge); border-bottom:1px solid var(--glass-edge); transform:rotate(45deg); clip-path:polygon(100% 0, 100% 100%, 0 100%);}      /* (only the outer half of the square: nothing doubles up over the see-through panel) */
  .v3-ctx.below .v3-caret{bottom:auto; top:-7px; transform:rotate(225deg);}
  .v3-stats{padding:6px 8px 2px; min-width:226px;}
  .v3-stats h4{margin:0 0 8px; font-size:13px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:250px;}
  .v3-sgrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; text-align:center;}
  .v3-sgrid b{display:block; font-size:18px; font-weight:800; line-height:1.1; color:#fff;}
  .v3-sgrid span{display:block; margin-top:3px; font-size:10px; font-weight:600; color:#aab4bd;}
  .v3-stats p{margin:6px 0 0; font-size:10.5px; color:#aab4bd;}
  html.hc .v3-ctx{background:#fff; color:#000; border-color:#000; box-shadow:none;}
  html.hc .v3-ctxrow button, html.hc .v3-stats h4, html.hc .v3-sgrid b{color:#000;}
  html.hc .v3-caret{background:#fff; border-color:#000;}
  html.hc .v3-ctx *{text-shadow:none !important; filter:none !important;}
  body.locked .v3-ctx{display:none !important;}
  html.embed .v3-ctx{display:none !important;}
  @media (max-width:430px){ .v3-ctxrow button{width:46px; height:54px;} .v3-stats{min-width:216px;} }
  /* ---------- Menu v3/v4: the floating menus are glass - see-through and softly blurred - over a dark "stage" that fills the whole app ----------
     Every menu (side menu, bottom bar, board tabs, the bar over a selected item, the line-style bar, the 3D bar) has the same dark glass with light icons in 2D and in 3D.
     The colours follow the app theme (--menu-bg / --menu-fg are set with the theme: a light theme gets dark glass, a dark theme keeps its own panel colour);
     the stage takes the colour of the court's frame; Sunlight mode turns it all into solid white on black. The blur is left out over the moving 3D scene to keep it smooth. */
  :root{
    --menu-bg:#17241C; --menu-fg:#F4F1E8; --menu-fg-dim:#b9c4bb; --menu-danger:#ffb4a3;
    --stage:#12261a;
    --glass:rgba(80,92,86,0.36);
    --glass-strong:rgba(34,46,40,0.9);
    --glass-edge:rgba(255,255,255,0.26);
    --glass-shadow:0 6px 20px rgba(0,0,0,0.28);
    --glass-blur:blur(14px) saturate(1.35);
    --menu-chip:rgba(255,255,255,0.13);
    --stage-fg:var(--menu-fg); --stage-fg-dim:var(--menu-fg-dim); --stage-chip:var(--menu-chip);   /* what sits straight on the stage (the hint line, the board tabs) */
  }
  @supports (color:color-mix(in srgb, red 50%, blue)){
    :root{
      --menu-fg-dim:color-mix(in srgb, var(--menu-fg) 72%, transparent);
      --menu-chip:color-mix(in srgb, var(--menu-fg) 13%, transparent);
      --stage:color-mix(in srgb, var(--court-border) 42%, #070d09);
      --glass:color-mix(in srgb, var(--menu-fg) 11%, rgba(6, 12, 9, 0.28));          /* a light tint over a little darkness: frosted, see-through */
      --glass-strong:color-mix(in srgb, var(--menu-fg) 10%, rgba(6, 12, 9, 0.9));
    }
  }
  /* Sunlight: solid white menus with black icons on a black stage. !important, because the app theme (applyAppTheme) writes the --menu-* / --stage colours inline on <html>. */
  html.hc{--menu-bg:#ffffff !important; --menu-fg:#000000 !important; --menu-fg-dim:#1c1c1c !important; --menu-danger:#8a0000 !important; --menu-chip:rgba(0,0,0,0.08) !important; --stage:#0d0d0d !important;
          --stage-fg:#ffffff !important; --stage-fg-dim:#e6e6e6 !important; --stage-chip:rgba(255,255,255,0.16) !important;
          --glass:#ffffff !important; --glass-strong:#ffffff !important; --glass-edge:#000000 !important; --glass-shadow:none !important; --glass-blur:none !important;}
  body.view3d{--glass-blur:none;}
  html:not(.embed), html:not(.embed) body{background:var(--stage);}      /* the whole page is the stage: the slim logo bar on top is transparent over it */
  html:not(.embed) #app{background:var(--stage);}
  #side-menu, #sm-zoom, #toolbar, #dock-3d, #ctx-bar, #geometry-bar, #slalom-stepper, .v3-bar{
    --ink:var(--menu-fg); --ink-dim:var(--menu-fg-dim); --danger-text:var(--menu-danger); --tbtn-bg:var(--menu-chip);
  }
  header, #board-tabs{
    --ink:var(--stage-fg); --ink-dim:var(--stage-fg-dim); --danger-text:var(--menu-danger); --tbtn-bg:var(--stage-chip);
  }
  html:not(.embed) header{background:transparent;}
  .sm-group, #geometry-bar, #slalom-stepper, #ctx-bar, #toolbar, .v3-seg, .v3-btn, .v3-ptrack{
    background:var(--glass);
    border:1px solid var(--glass-edge);
    box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
  }
  .v3-btn.on{background:var(--accent);}
  /* the 3D bar: three capsules (camera, tools, display) instead of a heap of loose pills; the buttons inside a capsule are flat */
  .v3-grp:empty{display:none;}
  .v3-seg .v3-btn{background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:9px; padding:7px 11px;}
  .v3-seg .v3-seg{background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0;}
  .v3-seg .v3-btn.on, .v3-seg button.on{background:var(--accent); color:var(--on-accent);}
  @media (max-width:520px){
    .v3-seg .v3-btn{padding:8px 9px;}
  }
  #ctx-bar::after{background:var(--glass-strong);}
  /* Menu v15 (2026-10-12, "all the menus have the same transparency"): the dialogs (Add, More, Erase, Video, the bubble message, Club ...), the hint pill and the 3D analysis panel are the same glass as the bars. */
  .modal-box{
    --ink:var(--menu-fg); --ink-dim:var(--menu-fg-dim); --danger-text:var(--menu-danger); --tbtn-bg:var(--menu-chip); --panel:rgba(0,0,0,0.2); --panel-2:var(--menu-chip);
    background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); color:var(--menu-fg); color-scheme:dark;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  body.view3d .modal-box{--glass-blur:blur(14px) saturate(1.35);}           /* (nothing moves behind a dialog: it keeps its blur over the 3D scene) */
  .modal-box a{color:#E3A857;}
  html.hc .modal-box a{color:#000;}
  html.hc .modal-box button{border:2px solid #000;}
  html.hc body.view3d .modal-box{--glass-blur:none;}
  html.hc .modal-box{color-scheme:light; --panel:#ffffff; --panel-2:#ffffff; border:2px solid #000;}
  #hint{background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);}
  #v3-sound{padding:7px 10px;}
  #v3-sound svg{width:18px; height:18px; display:block;}
  /* the board tabs float over the stage, no strip behind them; the zoom sits to the right of them, in the same row */
  #tabs-row{flex-shrink:0; display:flex; align-items:center; gap:8px; padding-right:10px;}
  #tabs-row #board-tabs{flex:1 1 0; min-width:0;}
  #board-tabs{background:transparent;}
  #sm-zoom{flex:0 0 auto; flex-direction:row; align-items:center; gap:0; padding:2px; border-radius:16px;}
  #sm-zoom button{width:34px; height:34px; border:0; border-radius:12px; background:transparent; color:var(--ink); font-size:19px; font-weight:700; line-height:1; padding:0; display:flex; align-items:center; justify-content:center;}
  #sm-zoom button:active{transform:scale(0.94);}
  #sm-zoom button:disabled{opacity:0.35;}
  #sm-zoom #zoom-reset{width:auto; min-width:48px; padding:0 4px; font-size:12px;}
  #board-tabs .bt{border-color:var(--glass-edge);}
  html.hc #board-tabs .bt:not(.on){border-color:#fff;}
  /* the bottom bar: a floating capsule (a dock on a wide screen) instead of a solid strip */
  #toolbar{
    margin:0 8px calc(8px + env(safe-area-inset-bottom));
    padding:5px 6px;
    border-radius:22px;
    gap:2px;
  }
  #toolbar .tbtn:not(.active){background:transparent; border-color:transparent;}
  #toolbar .tbtn:not(.active):hover{background:var(--menu-chip);}
  @media (max-width:600px){
    #toolbar{padding:5px 2px;}
  }
  @media (min-width:601px){
    #toolbar{align-self:center; max-width:calc(100% - 16px); gap:6px;}
  }
  html.hc #toolbar{border:2px solid #000;}
  /* the 3D controls live in the bottom dock while the 3D view is open (the 2D toolbar has nothing to do there): the scene is not covered by them */
  #dock-3d{
    display:none; flex-shrink:0; position:relative; align-self:center; align-items:center; justify-content:center; gap:2px;
    margin:0 62px calc(8px + env(safe-area-inset-bottom)); max-width:calc(100% - 124px);
    padding:5px 6px; border-radius:22px;
    background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  #dock-3d .v3-bar, #dock-3d .v3-cap{display:contents;}                       /* the buttons are the dock's own: a capsule like the 2D toolbar */
  #dock-3d .tbtn:not(.on){background:transparent; border-color:transparent;}
  #dock-3d .tbtn:not(.on):hover{background:var(--menu-chip);}
  .v3-bar .tbtn.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .v3-bar .tbtn span{white-space:nowrap;}
  .v3-bar .tbtn.tog.on{background:transparent; border-color:transparent; color:#E3A857;}      /* a switch that is on shows in the accent colour, not as a filled block */
  .v3-bar .tbtn.tog:not(.on){opacity:0.6;}
  html.hc .v3-bar .tbtn.tog.on{color:var(--accent);}
  body.view3d #toolbar{display:none;}
  body.view3d #dock-3d{display:flex;}
  body.locked #dock-3d, html.embed #dock-3d{display:none !important;}
  #dock-3d .v3-edrow, #dock-3d .v3-pathrow, #dock-3d .v3-anrow, #dock-3d .v3-mountrow{position:absolute; left:0; right:0; bottom:100%; margin-bottom:86px; justify-content:center;}      /* (the tool rows float over the scene only while they are open: above the board tabs and the hint) */
  #dock-3d{min-height:70px; z-index:6;}      /* (over the 3D view, so that the tool rows that float above the dock are seen) */                                    /* (as high as the 2D toolbar: nothing moves between 2D and 3D) */
  @media (max-width:600px){
    #dock-3d{align-self:stretch; margin:0 58px calc(6px + env(safe-area-inset-bottom)) 4px; max-width:none; padding:5px 2px; min-height:0;}
    #dock-3d .tbtn{flex:1 1 auto; min-width:0; width:auto; padding:0; font-size:clamp(7px, 2.05vw, 9.5px); letter-spacing:-0.1px; gap:3px;}
    #dock-3d .tbtn svg{width:18px; height:18px;}
    /* the tool rows float over the scene: they keep clear of the vertical side menu, on whichever side it is docked (--sm-w = its width, set by the engine) */
    #dock-3d .v3-edrow, #dock-3d .v3-pathrow, #dock-3d .v3-anrow, #dock-3d .v3-mountrow{right:max(0px, calc(var(--sm-w, 54px) - 44px));}
    html.menu-on-left #dock-3d .v3-edrow, html.menu-on-left #dock-3d .v3-pathrow, html.menu-on-left #dock-3d .v3-anrow, html.menu-on-left #dock-3d .v3-mountrow{left:calc(var(--sm-w, 54px) + 10px); right:0;}
  }
  /* the bar over the scene of an embed: the same capsule, at the top */
  #view3d .v3-cap{display:flex; flex-wrap:wrap; justify-content:center; gap:2px; padding:5px 6px; border-radius:22px; pointer-events:auto; background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);}
  #view3d .v3-cap .tbtn{width:50px; height:50px; font-size:9px;}
  /* a wide court / the 3D view keep a strip for the side menu, so that it never hides the end of the court (class menu-pad, see updateMenuPad) */
  #court-wrap.menu-pad{padding-right:74px;}
  #court-wrap.menu-pad.menu-left{padding-right:10px; padding-left:74px;}
  /* Menu v13: the 2D court runs on under the board tabs and the bottom bar too (glass): the board area is clipped at the bottom of the screen (--below-h), not at its own end.
     At 100% the court is fitted above the bars; zoomed in, it shows through them. The empty parts of the tabs row let the touches through. */
  #court-wrap{overflow:visible; clip-path:inset(0 0 calc(-1 * var(--below-h, 0px)) 0);}
  html.embed #court-wrap{overflow:hidden; clip-path:none;}
  #toolbar{position:relative; z-index:6;}
  #tabs-row, #board-tabs{pointer-events:none;}
  #tabs-row > #sm-zoom, #board-tabs > *{pointer-events:auto;}
  /* the 3D scene is full-bleed: it runs on under the board tabs and the bottom dock (--below-h, set by the engine); their glass shows it. The court is fitted to the free part. */
  #view3d{bottom:calc(-1 * var(--below-h, 0px));}
  body.view3d #court-wrap{overflow:visible;}
  #tabs-row{position:relative; z-index:6;}
  #view3d .v3-hint{bottom:calc(10px + var(--below-h, 0px));}
  #view3d .v3-info{bottom:calc(84px + var(--below-h, 0px));}
  /* the icons and labels on the glass keep a soft shadow so that they read over a bright court too */
  #side-menu button, #sm-zoom button, #toolbar .tbtn, #dock-3d .tbtn, #ctx-bar .tbtn{text-shadow:0 1px 2px rgba(0,0,0,0.55);}
  #side-menu button svg, #sm-zoom button svg, #toolbar .tbtn svg, #dock-3d .tbtn svg, #ctx-bar .tbtn svg{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.5));}
  html.hc #side-menu button, html.hc #sm-zoom button, html.hc #toolbar .tbtn, html.hc #dock-3d .tbtn, html.hc #ctx-bar .tbtn{text-shadow:none;}
  html.hc #side-menu button svg, html.hc #sm-zoom button svg, html.hc #toolbar .tbtn svg, html.hc #dock-3d .tbtn svg, html.hc #ctx-bar .tbtn svg{filter:none;}
  /* the lock: always in the bottom right corner (the same spot as the unlock button of a locked board); the bottom bar leaves room for it */
  #btn-lock, #lock-pill{position:fixed; right:8px; bottom:calc(17px + env(safe-area-inset-bottom)); z-index:30;}
  #btn-lock{
    width:46px; height:46px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  #btn-lock svg{width:22px; height:22px;}
  #btn-lock:active{transform:scale(0.94);}
  body.locked #btn-lock{display:none;}
  html.embed #btn-lock{display:none !important;}
  #lock-pill button{background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); opacity:1;}
  #lock-speed{font-size:13px; font-weight:800; letter-spacing:-0.2px;}
  body.locked #tabs-row{padding-right:290px;}
  #lock-pill button[hidden]{display:none;}
  #lock-3d, #lock-speed{font-size:13px; font-weight:800; letter-spacing:-0.2px;}
  #lock-viewlock.on{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
  @media (max-width:600px){
    #lock-pill{gap:6px;}
    #lock-pill button{width:42px; height:42px;}
    body.locked #tabs-row{padding-right:262px;}
  }
  header > p{margin-right:0;}
  @media (max-width:600px){
    #toolbar{margin:0 58px calc(6px + env(safe-area-inset-bottom)) 4px;}
  }
  @media (min-width:601px){
    #toolbar{margin-left:62px; margin-right:62px; max-width:calc(100% - 124px);}
  }
  /* Menu v14: the animation cluster is the one that has to be easy to hit - bigger buttons with a label under the icon, a more solid panel, and a big round Play (the lowest one:
     nearest to the thumb) with a ring that fills while the play runs. It keeps its size on a phone (the other clusters shrink; this one does not). */
  #side-menu #sm-playback{padding:5px; gap:2px; border-radius:24px; background:color-mix(in srgb, var(--menu-fg) 9%, rgba(6, 12, 9, 0.62)); border-color:var(--glass-edge);}
  html.hc #side-menu #sm-playback{background:#ffffff;}
  #side-menu{--pb-w:46px; --pb-h:44px; --pb-play:50px; --pb-ico:20px; --pb-val:15px;}
  #side-menu.compact{--pb-w:42px; --pb-h:38px; --pb-play:44px; --pb-ico:18px; --pb-val:13px;}
  #side-menu.micro{--pb-w:34px; --pb-h:25px; --pb-play:32px; --pb-ico:15px; --pb-val:11px;}
  #side-menu.micro #sm-playback{padding:2px; border-radius:18px;}
  #side-menu.micro #sm-playback #btn-play-pause{margin:2px 0 0;}
  #side-menu.micro #sm-playback .pb-lbl{display:none;}
  #side-menu #sm-playback button{width:var(--pb-w); height:var(--pb-h); border-radius:13px; flex-direction:column; gap:3px; font-size:9px;}
  #side-menu #sm-playback button svg{width:var(--pb-ico); height:var(--pb-ico);}
  #side-menu #sm-playback .pb-lbl{font-size:8.5px; font-weight:700; line-height:1; opacity:0.9; letter-spacing:0.1px;}
  #side-menu #sm-playback .sp-val{font-size:var(--pb-val); font-weight:800; line-height:1;}
  #side-menu #sm-playback #btn-play-pause{width:var(--pb-play); height:var(--pb-play); margin:5px -2px 0; border-radius:50%; background:var(--accent); color:var(--on-accent); position:relative; box-shadow:0 3px 12px rgba(0,0,0,0.42);}
  #side-menu #sm-playback #btn-play-pause svg{width:calc(var(--pb-ico) + 6px); height:calc(var(--pb-ico) + 6px);}
  #side-menu #sm-playback #btn-play-pause.active{background:var(--accent); color:var(--on-accent);}
  #btn-play-pause::after{
    content:''; position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
    background:conic-gradient(#ffffff calc(var(--p, 0) * 360deg), rgba(255,255,255,0.22) 0);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  }
  html.hc #btn-play-pause::after{background:conic-gradient(#000000 calc(var(--p, 0) * 360deg), rgba(0,0,0,0.2) 0);}
  /* the side menu clusters: a little air between them */
  #side-menu{gap:7px;}
  #side-menu .sm-group{border-radius:16px;}

  /* ---------- Sunlight mode: white court, thick black lines, strong colours (html.hc; the same colours go into pictures and videos) ---------- */
  html.hc{
    --wood-1:#ffffff !important; --wood-2:#dedede !important; --court-border:#111111 !important; --court-line:#000000 !important;
    --panel:#ffffff !important; --panel-2:#ffffff !important; --tbtn-bg:#ffffff !important;
    --ink:#000000 !important; --ink-dim:#1c1c1c !important; --accent:#b00000 !important; --on-accent:#ffffff !important; --danger-text:#8a0000 !important; --danger:#b00000 !important;
    --teamA:#e00000 !important; --teamB:#0033cc !important; --teamA2:#e00000 !important; --teamB2:#0033cc !important; --teamA3:#ffffff !important; --teamB3:#ffffff !important; --teamC:#ff8a00 !important; --teamR:#000000 !important; --teamK:#7000b8 !important; --obstacle:#ff8a00 !important;
  }
  html.hc #court .ln{stroke:#000 !important; stroke-width:5px !important;}
  html.hc .token circle[stroke="#fff"], html.hc .token ellipse[stroke="#fff"]{stroke:#000; stroke-width:3.5px;}
  html.hc .token.player text{fill:#fff; stroke:#000; stroke-width:3px; paint-order:stroke; font-weight:800;}
  html.hc .arrow-path{stroke-width:8px;}
  html.hc .arrow-path.heavy{stroke-width:15px;}
  html.hc .token .ring{stroke:#000; stroke-width:4px;}
  html.hc .tbtn, html.hc #side-menu .sm-group, html.hc #board-tabs .bt, html.hc #lock-pill button{border:2px solid #000;}
  html.hc #toolbar{border-top:2px solid #000;}
  html.hc #board-tabs .bt.on{border-color:#000;}

  /* ---------- Embed: the board inside another site's iframe (html.embed, see ?embed=1) ---------- */
  #embed-bar{display:none; position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:9; align-items:center; gap:8px; white-space:nowrap;}
  html.embed #embed-bar{display:flex;}
  #embed-bar button, #embed-bar a{height:38px; padding:0 15px; border-radius:19px; border:1px solid rgba(0,0,0,0.18); background:var(--tbtn-bg); color:var(--ink); font:800 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,0.25);}
  #embed-bar .eb-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  #embed-bar .eb-t-pause, #embed-bar .eb-t-2d{display:none;}
  #eb-play.playing .eb-t-play{display:none;}
  #eb-play.playing .eb-t-pause{display:inline;}
  #eb-3d.on .eb-t-3d{display:none;}
  #eb-3d.on .eb-t-2d{display:inline;}
  html.embed nav, html.embed header, html.embed #toolbar, html.embed #side-menu, html.embed #tabs-row, html.embed #board-tabs, html.embed #ctx-bar, html.embed #hint,
  html.embed #geometry-bar, html.embed #slalom-stepper, html.embed #demo-pill, html.embed #view-bar, html.embed #lock-pill{display:none !important;}
  html.embed #court-wrap{padding:8px 8px 58px;}
  html.embed body.locked #view3d canvas{pointer-events:auto;}                       /* the 3D camera can still be turned and zoomed */
  html.embed body.locked #view3d .v3-bar{display:flex; padding-left:0; padding-right:0;}
  html.embed #view3d .v3-hint{display:none;}
  html.embed #view3d{bottom:54px;}                                                  /* (the bar below it) */
  /* the embed code dialog */
  #embed-code{width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid rgba(0,0,0,0.18); border-radius:10px; background:var(--panel); color:var(--ink); font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,Menlo,monospace; resize:none; user-select:text; -webkit-user-select:text; touch-action:auto;}

  /* ---------- Pro: the badge that marks what is part of Pro, and its dialog ---------- */
  .pro-badge{display:inline-block; padding:2px 5px; margin-left:4px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-size:8.5px; font-weight:800; letter-spacing:0.5px; line-height:1.2; vertical-align:middle;}
  .v3-btn.on .pro-badge, .modal-btn.primary .pro-badge, .tbtn.active .pro-badge{background:var(--on-accent); color:var(--accent);}
  .pro-list{list-style:none; margin:4px 0 8px; padding:0; display:flex; flex-direction:column; gap:7px;}
  .pro-list li{padding:9px 11px; border-radius:11px; background:var(--tbtn-bg); border:1px solid rgba(0,0,0,0.08);}
  .pro-list b{display:block; font-size:13px; color:var(--ink);}
  .pro-list span{display:block; font-size:11.5px; color:var(--ink-dim); margin-top:2px; line-height:1.4;}
  #board-tabs .bt-add.pro{width:auto; padding:6px 10px; display:inline-flex; align-items:center; gap:4px;}
  #board-tabs .bt-add.pro::after{content:'PRO'; padding:2px 4px; border-radius:5px; background:var(--accent); color:var(--on-accent); font-size:7.5px; font-weight:800; letter-spacing:0.4px;}
  .position-card[data-pro]{position:relative;}
  .position-card[data-pro]::after{content:'PRO'; position:absolute; top:6px; right:6px; padding:2px 5px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-size:8px; font-weight:800; letter-spacing:0.4px; pointer-events:none;}

  /* basketball: the shot chips of the Shoot tool take a second row on a phone */
  #geo-shot-group, #geo-pass-group{display:inline-flex; gap:2px;}
  @media (max-width:600px){
    #geometry-bar{flex-wrap:wrap; justify-content:center; max-width:calc(100% - 78px);}
    #geo-shot-group, #geo-pass-group{flex:1 1 100%; justify-content:center;}
    #geo-shot-group .geo-sep, #geo-pass-group .geo-sep{display:none;}
  }
  #tb-toast{position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translate(-50%,16px); z-index:70; max-width:84%; padding:10px 16px; border-radius:999px; background:#1d242c; color:#fff; font-size:13px; font-weight:700; text-align:center; opacity:0; pointer-events:none; transition:0.25s;}
  #tb-toast.on{opacity:1; transform:translate(-50%,0);}

/* Boards: the name at the top is the selector ([Board 1 v | Demo]); the list of the boards floats under it. Only the zoom is left in the bottom row (right). */
#tabs-row{justify-content:flex-end;}
#btn-myboard{display:inline-flex; align-items:center; gap:5px;}
#btn-myboard #nav-board-name{max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#btn-myboard .nav-chev{width:9px; height:6px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s;}
#btn-myboard[aria-expanded="true"] .nav-chev{transform:rotate(180deg);}
@media (max-width:600px){ #btn-myboard #nav-board-name{max-width:66px;} }
#board-menu{position:fixed; z-index:55; min-width:200px; max-width:min(300px, calc(100vw - 16px)); padding:6px; border-radius:14px; display:flex; flex-direction:column; gap:3px;
  background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-family:'Inter',sans-serif;}
#board-menu[hidden]{display:none;}
#board-menu .bm-row{display:flex; align-items:center; gap:4px;}
#board-menu .bm-pick{flex:1; min-width:0; text-align:left; border:0; background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:700; padding:11px 12px; min-height:44px; border-radius:10px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#board-menu .bm-pick:hover{background:var(--menu-chip, rgba(255,255,255,.13));}
#board-menu .bm-row.on .bm-pick{background:var(--accent); color:var(--on-accent);}
#board-menu .bm-edit{flex:none; width:44px; height:44px; border:0; border-radius:10px; background:var(--menu-chip, rgba(255,255,255,.13)); color:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer;}
#board-menu .bm-edit svg{width:18px; height:18px;}
#board-menu .bm-add{display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; margin-top:2px; border:1px dashed var(--glass-edge); background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:700; padding:8px 12px; min-height:44px; border-radius:10px; cursor:pointer; text-align:left;}
#board-menu .bm-add small{font-size:11px; font-weight:600; color:var(--menu-fg-dim);}
#board-menu .bm-add:hover{background:var(--menu-chip, rgba(255,255,255,.13));}
#board-menu .bm-add.pro span::after{content:'PRO'; margin-left:6px; padding:2px 4px; border-radius:5px; background:var(--accent); color:var(--on-accent); font-size:8px; font-weight:800; letter-spacing:.4px; vertical-align:middle;}
html.hc #board-menu{background:#fff; color:#000; border:2px solid #000; -webkit-backdrop-filter:none; backdrop-filter:none; --menu-chip:#fff; --menu-fg-dim:#1c1c1c;}
html.hc #board-menu .bm-row.on .bm-pick{border:2px solid #000;}
html.hc #board-menu .bm-edit, html.hc #board-menu .bm-add{border:2px solid #000;}
html.embed #board-menu{display:none;}

.token.armed .ring{opacity:1;}
#pbubble{z-index:7;}
html.embed #pbubble{display:none !important;}

#pbubble .v3-stats{min-width:0; width:100%;}

/* The share group of the side menu is labelled like the animation cluster (Save, Photo, Share, Video) */
#side-menu #sm-share{padding:5px; gap:2px; border-radius:20px; background:color-mix(in srgb, var(--menu-fg) 9%, rgba(6, 12, 9, 0.62)); border-color:var(--glass-edge);}
html.hc #side-menu #sm-share{background:#ffffff;}
#side-menu #sm-share button{width:var(--pb-w); height:var(--pb-h); border-radius:13px; flex-direction:column; gap:3px; font-size:9px;}
#side-menu #sm-share button svg{width:var(--pb-ico); height:var(--pb-ico);}
#side-menu #sm-share .pb-lbl{font-size:8.5px; font-weight:700; line-height:1; opacity:0.9; letter-spacing:0.1px;}
#side-menu.micro #sm-share .pb-lbl{display:none;}
#side-menu.micro #sm-share{padding:2px; border-radius:16px;}
#custom-grid .tbtn[hidden]{display:none;}
/* Quick save: the popover of the floppy disk */
#qs-menu{position:fixed; z-index:56; width:230px; padding:10px; border-radius:14px; background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); font-family:'Inter',sans-serif; display:flex; flex-direction:column; gap:8px;}
#qs-menu[hidden]{display:none;}
#qs-menu .qs-t{font-size:14px; font-weight:800;}
#qs-menu .qs-in{width:100%; box-sizing:border-box; min-height:40px; padding:8px 10px; border-radius:10px; border:1px solid var(--glass-edge); background:var(--menu-chip); color:var(--menu-fg); font-size:14px; font-family:inherit; outline:none;}
#qs-menu .qs-in:focus{border-color:var(--accent);}
#qs-menu .qs-row{display:flex; gap:8px;}
#qs-menu .qs-b{flex:1; min-height:52px; border:0; border-radius:12px; background:var(--accent); color:var(--on-accent); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; font-family:inherit; font-size:14px;}
#qs-menu .qs-b small{font-size:11px; font-weight:600; opacity:.9;}
#qs-menu .qs-b[disabled]{opacity:.4; cursor:default;}
#qs-menu .qs-more{border:0; background:transparent; color:var(--menu-fg-dim); font-size:12px; font-weight:700; padding:4px; cursor:pointer; text-decoration:underline; font-family:inherit;}
html.hc #qs-menu{background:#fff; color:#000; border:2px solid #000; -webkit-backdrop-filter:none; backdrop-filter:none; --menu-chip:#fff; --menu-fg-dim:#1c1c1c;}
html.embed #qs-menu{display:none;}

#toolbar .tbtn[hidden]{display:none !important;}

#tb-toast.on{pointer-events:auto; cursor:pointer;}
#tb-toast{line-height:1.35;}
#tb-toast{border-radius:18px; text-align:center;}

/* the arrow colours: five fixed, a separator, two custom (empty = a plus) */
#arrow-swatch-row{align-items:center;}
#arrow-type-row .asset-btn svg, #arrow-pass-row .asset-btn svg{width:22px; height:22px; flex:none;}
#arrow-type-section > .section-title:first-child{margin-top:14px;}
.swatch-dot.empty{background:transparent !important; border:2px dashed rgba(255,255,255,0.55) !important; color:var(--ink); font-size:16px; font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0;}
#arrow-swatch-row{flex-wrap:nowrap; gap:7px; justify-content:space-between;}
#arrow-swatch-row .swatch-dot{width:32px; height:32px; flex:none;}

/* Team names (Club dialog) and the kit cards of the Formations dialog */
.asset-btn .tn{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px;}
.tn-row{display:flex; gap:6px;}
.tn-row input{flex:1 1 0; min-width:0; box-sizing:border-box; padding:8px 8px; border-radius:9px; border:1px solid var(--glass-edge, rgba(255,255,255,.18)); background:var(--tbtn-bg, rgba(255,255,255,.08)); color:var(--ink); font-size:12.5px;}
.tab-btn.team-card{display:flex; align-items:center; gap:8px; padding:6px 8px; text-align:left; min-width:0;}
.team-card .tc-kit svg{display:block; width:30px; height:32px;}
.team-card .tc-kit{flex:0 0 auto;}
.team-card .tc-txt{display:flex; flex-direction:column; min-width:0; gap:1px;}
.team-card .tc-txt b{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.team-card .tc-txt small{font-size:10px; font-weight:600; line-height:1.25; opacity:.85;}

/* Icons: colourful (App colors > Icons). A colour for each tool; what has none keeps the colour of the text. */
html.icons-color :is(#btn-add, #btn-roster, #btn-bg, #btn-present, #btn-duplicate){--ic:#4cd964;}
html.icons-color :is(#v3-edit, #btn-edit){--ic:#e86bff;}
html.icons-color :is(#btn-move, #btn-quicksave, #btn-share, #v3-view, #btn-planner, #btn-planner-more, #btn-more-numbers){--ic:#38b6ff;}
html.icons-color :is(#btn-dribble, #btn-brief, #btn-player-style, #btn-rotate-item){--ic:#ff9f43;}
html.icons-color :is(#btn-pass, #btn-more-sound, #btn-save, #btn-rotate, #btn-flip-h, #btn-flip-v, #btn-rotate-screen){--ic:#2ee6c5;}
html.icons-color :is(#btn-shoot, #btn-erase, #dock-clear, #btn-clear, #btn-reset, #btn-delete, #btn-play-export){--ic:#ff5c5c;}
html.icons-color #btn-play-stop{--ic:#6ea8ff;}      /* (Stop must not look like Record, which is red) */
html.icons-color :is(#btn-screen, #btn-positions, #btn-import, #btn-more-stands, #btn-back, #btn-front){--ic:#b18cff;}
html.icons-color :is(#btn-presets, #dock-formations, #btn-court, #btn-sunlight, #btn-pro, #v3-an, #btn-play-speed, #btn-play-loop){--ic:#ffd23f;}
html.icons-color :is(#btn-app-theme, #btn-logo, #btn-embed){--ic:#e86bff;}
html.icons-color :is(#toolbar .tbtn, #side-menu button, #dock-3d .tbtn, .v3-bar .tbtn, #custom-grid .tbtn, #ctx-bar button, nav .nav-help) svg{color:var(--ic);}
html.icons-color #btn-play-speed .sp-val{color:var(--ic);}
html.icons-color :is(.tbtn.on, #side-menu button.active, #side-menu button.on, .tbtn.active, .nav-rot.active) svg{color:inherit;}
html.icons-color.hc :is(#toolbar .tbtn, #side-menu button, #dock-3d .tbtn, .v3-bar .tbtn, #custom-grid .tbtn, #ctx-bar button, nav .nav-help) svg{color:inherit;}

/* Undo / Redo (the top bar), tooltips, the presentation */
.nav-hist:disabled{opacity:0.35; pointer-events:none;}
#tb-tip{position:fixed; left:0; top:0; z-index:2147483000; max-width:min(280px, 84vw); box-sizing:border-box; padding:6px 10px; border-radius:9px; background:rgba(22,17,13,.95); color:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:0 4px 18px rgba(0,0,0,.45);
  font:600 12px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; pointer-events:none; opacity:0; transition:opacity .12s;}
#tb-tip.on{opacity:1;}
#tb-tip kbd{display:inline-block; margin-left:8px; padding:1px 6px; border-radius:5px; background:rgba(255,255,255,.16); font:700 11px/1.4 ui-monospace,Consolas,monospace; vertical-align:1px;}
body.presenting #tb-tip{display:none;}

/* More: the flat / 3D players switch means nothing in the 3D view (the figures are always 3D there) */
body.view3d #custom-grid #btn-player-style{display:none;}
/* ... and the grandstands are only seen in 3D: their switch is not offered in 2D */
body:not(.view3d) #custom-grid #btn-more-stands{display:none;}

/* Share: the small menu (Send link / QR code), like the one of Save, and the QR dialog */
#share-menu{position:fixed; z-index:56; width:230px; padding:10px; border-radius:14px; background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); font-family:'Inter',sans-serif; display:flex; flex-direction:column; gap:8px;}
#share-menu[hidden]{display:none;}
#share-menu .qs-t{font-size:14px; font-weight:800;}
#share-menu .qs-in{width:100%; box-sizing:border-box; min-height:40px; padding:8px 10px; border-radius:10px; border:1px solid var(--glass-edge); background:var(--menu-chip); color:var(--menu-fg); font-size:14px; font-family:inherit; outline:none;}
#share-menu .qs-in:focus{border-color:var(--accent);}
#share-menu .qs-row{display:flex; gap:8px;}
#share-menu .qs-b{flex:1; min-height:52px; border:0; border-radius:12px; background:var(--accent); color:var(--on-accent); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; font-family:inherit; font-size:14px;}
#share-menu .qs-b small{font-size:11px; font-weight:600; opacity:.9;}
#share-menu .qs-b[disabled]{opacity:.4; cursor:default;}
#share-menu .qs-more{border:0; background:transparent; color:var(--menu-fg-dim); font-size:12px; font-weight:700; padding:4px; cursor:pointer; text-decoration:underline; font-family:inherit;}
html.hc #share-menu{background:#fff; color:#000; border:2px solid #000; -webkit-backdrop-filter:none; backdrop-filter:none; --menu-chip:#fff; --menu-fg-dim:#1c1c1c;}
html.embed #share-menu{display:none;}
#qr-canvas{display:block; margin:6px auto 10px; width:min(270px, 72vw); height:auto; image-rendering:pixelated; border-radius:10px; background:#fff;}

/* The types of a player (Roster, Edit player): chips in the look of the menus instead of the system list; the hint of an empty field can be read */
.role-chips{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:6px; max-height:200px; overflow-y:auto; padding:2px;}
.role-chip{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:46px; padding:6px 4px; border-radius:11px; border:1px solid var(--glass-edge, rgba(255,255,255,.15)); background:var(--menu-chip, var(--panel-2)); color:var(--menu-fg, var(--ink)); font-family:inherit; cursor:pointer;}
.role-chip b{font-size:13.5px; font-weight:800; line-height:1.15;}
.role-chip small{font-size:9.5px; font-weight:600; opacity:.82; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2;}
.role-chip:active{transform:scale(.96);}
.role-chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.modal-box input::placeholder, .modal-box textarea::placeholder{color:var(--menu-fg-dim, rgba(255,255,255,.6)); opacity:1;}

/* Groups (Roster, Groups dialog) */
.grp-row{margin:0 0 10px; max-height:none; overflow:visible;}
.grp-row[hidden]{display:none;}
.grp-chip b{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px;}
.grp-chip small{font-size:10.5px;}
.grp-manage{border-style:dashed;}
.grp-add{display:flex; gap:8px; margin:8px 0 4px;}
.grp-add input{flex:1; min-width:0;}
.grp-add .modal-btn{flex:0 0 auto; padding:0 16px;}
.grp-name{flex:1 1 auto; min-width:0; width:auto !important; padding:7px 10px !important; font-size:14px !important;}
.slot-btn.confirming{background:#e0473f; color:#fff;}

/* Save: Update the open scheme */
#qs-menu .qs-upd{min-height:58px;}
#qs-menu .qs-sub{font-size:11.5px; font-weight:700; color:var(--menu-fg-dim); margin:2px 0 -2px;}

/* The top bar is transparent in 3D too: the scene fills the whole screen and the bar floats over it (in 2D the stage has the colour of the page, so it already looks so) */
body.view3d:not(.locked) nav{position:absolute; top:0; left:0; right:0;}
body.view3d:not(.locked) nav, body.view3d:not(.locked) nav *{pointer-events:none;}                       /* (the empty parts of the floating bar let the 3D view be turned) */
body.view3d:not(.locked) nav :is(button, a, .sport-list, .sport-list *){pointer-events:auto;}

/* The sports list: the same glass as the board list - rounded rows, a quiet hover, the families' main sports in bold and their variants indented */
#sport-list{
  background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); border-radius:14px; box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  padding:6px; display:flex; flex-direction:column; gap:2px; min-width:210px;
}
#sport-list[hidden]{display:none;}
#sport-list li[role="option"]{display:flex; align-items:center; min-height:42px; padding:8px 12px; border-radius:10px; font-size:14px; font-weight:700; color:var(--menu-fg);}
#sport-list li[role="option"].sport-sub{padding-inline-start:28px; font-weight:600; color:var(--menu-fg-dim);}
#sport-list li[role="option"]:hover, #sport-list li[role="option"].sport-sub:hover{background:var(--menu-chip, rgba(255,255,255,.13)); color:var(--menu-fg);}
#sport-list .sport-list-header{padding:8px 12px 6px; font-size:11.5px; font-weight:800; letter-spacing:.5px; color:var(--menu-fg-dim);}
@media (max-width:600px){
  #sport-list{min-width:190px;}
  #sport-list li[role="option"]{font-size:14px; padding:8px 12px; min-height:42px;}
}
body.view3d #sport-list, body.view3d #board-menu{--glass-blur:blur(14px) saturate(1.35);}           /* (a list is open for a moment: it keeps its blur over the moving 3D scene, so the names stay readable) */
html.hc body.view3d #sport-list, html.hc body.view3d #board-menu{--glass-blur:none;}
.more-ver{margin:12px 0 0; text-align:center; font-size:11.5px; font-weight:700; color:var(--menu-fg-dim); letter-spacing:.2px;}

/* Teams (the groups with a coach and a place) and Sponsors */
.team-card{display:flex; flex-direction:column; gap:6px; padding:10px; margin:0 0 8px; border-radius:14px; background:var(--menu-chip, rgba(255,255,255,.1));}
.team-card input{width:100%; box-sizing:border-box; padding:9px 11px; border-radius:10px; border:1px solid var(--glass-edge); background:rgba(0,0,0,.28); color:var(--menu-fg); font:inherit; font-size:14px; min-height:40px;}
.team-card input.grp-name{font-weight:800; font-size:15px;}
.team-card input::placeholder{color:var(--menu-fg-dim); opacity:1;}
.team-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:700; color:var(--menu-fg-dim);}
.sp-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:0 0 10px;}
.sp-item{position:relative; height:74px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; padding:8px; box-sizing:border-box;}
.sp-item img{max-width:100%; max-height:100%; object-fit:contain;}
.sp-del{position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(20,32,44,.85); color:#fff; font-size:18px; line-height:1; cursor:pointer;}
.sp-bar{display:flex; align-items:center; gap:10px; margin:2px 0 6px;}
.sp-count{font-size:12px; font-weight:700; color:var(--menu-fg-dim);}

/* More: a colour per row (planning, club, views) and one for the customisations; Pro keeps its gold */
html.icons-color #custom-grid .mc-plan{--ic:#38b6ff;}
html.icons-color #custom-grid .mc-club{--ic:#4cd964;}
html.icons-color #custom-grid .mc-view{--ic:#ff9f43;}
html.icons-color #custom-grid .mc-custom{--ic:#b18cff;}
html.icons-color #custom-grid #btn-sunlight{--ic:#ffd23f;}                /* (Sunlight stays yellow, the sun) */
.sp-add{display:flex; gap:8px; margin:0 0 8px;}
.sp-add input{flex:1; min-width:0; padding:9px 11px; border-radius:10px; border:1px solid var(--glass-edge); background:rgba(0,0,0,.28); color:var(--menu-fg); font:inherit; font-size:14px; min-height:40px;}
.sp-add input::placeholder{color:var(--menu-fg-dim); opacity:1;}
.sp-item.sp-txt{background:#1c2a38; color:#fff; font-weight:800; font-size:15px; text-align:center; text-transform:uppercase; letter-spacing:.3px; overflow:hidden;}
.sp-col{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px;}
.sp-col label{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--menu-fg-dim);}
.sp-col input[type=color]{width:40px; height:32px; padding:0; border:1px solid var(--glass-edge); border-radius:8px; background:none; cursor:pointer;}
.sp-prev{flex:1 1 110px; min-width:110px; text-align:center; padding:8px 10px; border-radius:10px; font-weight:800; font-size:14px; letter-spacing:.3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.sp-item.sp-edit{outline:3px solid var(--accent);}
.sp-item.sp-txt{cursor:pointer;}

/* the search of a sport in the Sports list */
#sport-list li[hidden]{display:none !important;}
#sport-list .sport-search{position:sticky; top:-6px; z-index:2; margin:-6px -6px 4px; padding:10px 8px 8px; list-style:none; border-radius:14px 14px 0 0; background:var(--glass-strong, rgba(34,24,15,.9));}
#sport-list .sport-q{
  width:100%; box-sizing:border-box; padding:9px 12px 9px 36px; min-height:42px; border-radius:12px; outline:none; -webkit-appearance:none; appearance:none;
  border:1px solid var(--glass-edge); color:var(--menu-fg); font:inherit; font-size:16px;
  background:rgba(0,0,0,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c4bb' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 11px center/16px no-repeat;
}
#sport-list .sport-q::placeholder{color:var(--menu-fg-dim); opacity:1;}
#sport-list .sport-q:focus{border-color:#E3A857; box-shadow:0 0 0 3px rgba(227,168,87,.22);}
#sport-list .sport-none{padding:14px 12px; list-style:none; color:var(--menu-fg-dim); font-size:13px;}
#sport-list.searching li[role="option"].sport-sub{padding-inline-start:12px;}
/* Saved schemes: a big dialog full of text and pictures over a busy court - the stronger glass of the bars, so the list and the preview read clearly. */
#positions-box{background:var(--glass-strong);}

/* Saved schemes: the tabs and the bottom buttons smaller, the bottom ones as icon + word tiles (like the actions of a scheme) */
#slot-tabs{padding:3px; gap:4px;}
#slot-tabs .tab-btn{padding:6px 0; font-size:12px; border-radius:7px;}
#positions-box .modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px;}
.act-tile{flex:none !important; width:76px; min-height:52px; padding:6px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; font-weight:700; line-height:1.1; border-radius:12px;}
.act-tile svg{width:20px; height:20px;}

/* Saved schemes: a head with Backup / Restore / close, a slim segmented switch, touch-sized targets */
.pos-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px;}
.pos-head .modal-title{margin:0; flex:1; min-width:0;}
.pos-tools{display:flex; align-items:center; gap:6px; flex:none;}
.pos-ib{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 13px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.1)); color:var(--menu-fg); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;}
.pos-ib svg{width:17px; height:17px; flex:none;}
.pos-ib:active{transform:scale(.96);}
.pos-x{width:40px; padding:0; background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
@media (max-width:560px){ .pos-ib span{display:none;} .pos-ib{width:40px; padding:0;} }
#slot-tabs{padding:3px; gap:4px; border-radius:999px;}
#slot-tabs .tab-btn{padding:9px 0; font-size:13px; border-radius:999px;}
@media (pointer:coarse){ #slot-tabs .tab-btn{padding:11px 0;} .pos-ib, .pos-x{min-height:44px;} .pos-x{width:44px;} }
#share-menu .qs-row{gap:8px;}
#share-menu .sh-tile{flex:1 1 0; min-width:64px; min-height:62px; padding:8px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center;}
#share-menu .sh-tile svg{width:22px; height:22px;}
#share-menu .sh-tile b{font-size:12px; line-height:1.1;}
#share-menu .qs-row{gap:6px;}
#share-menu .sh-tile{flex:1 1 0; min-width:56px; min-height:50px; padding:6px 4px; gap:4px; background:var(--menu-chip, rgba(255,255,255,.12)); color:var(--menu-fg); border:1px solid var(--glass-edge);}
#share-menu .sh-tile svg{width:20px; height:20px;}
#share-menu .sh-tile b{font-size:11px; font-weight:700;}
html.icons-color #share-menu [data-sh=link]{--ic:#38b6ff;}
html.icons-color #share-menu [data-sh=photo]{--ic:#2ee6c5;}
html.icons-color #share-menu [data-sh=qr]{--ic:#b18cff;}
html.icons-color #share-menu .sh-tile svg{color:var(--ic);}

/* Zones */
.zone-ico svg{width:20px; height:20px;}
.zn-row button{padding:8px 14px;}
#pe-bibs button.none{background:repeating-linear-gradient(45deg,#fff 0 3px,#d33 3px 5px);}

.v3-spc{display:flex;gap:2px;margin:4px 0 2px;border-radius:8px;overflow:hidden;font-size:11px;font-weight:700}
.v3-spc b{min-width:0;padding:4px 6px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.snap-guide{stroke:#ffd23a; stroke-width:1.4; stroke-dasharray:6 5; opacity:.85; pointer-events:none;}

.dot.ladder{width:14px; height:26px; border-radius:2px; border:2px solid #241a06; background:repeating-linear-gradient(0deg, #241a06 0 2px, var(--obstacle) 2px 6px);}
.dot.mannequin{width:14px; height:24px; border-radius:7px 7px 3px 3px; border:2px solid #7a5a00; background:#e8b83a;}

.token.drop-del{opacity:.35; filter:grayscale(1);}

#pe-hl button.none{background:repeating-linear-gradient(45deg,#fff 0 3px,#d33 3px 5px);}

.rc-card textarea{width:100%; box-sizing:border-box; margin-top:8px; border-radius:10px; padding:8px 10px; font:inherit; font-size:13px; background:var(--menu-chip, rgba(255,255,255,.1)); color:var(--menu-fg); border:1px solid var(--glass-edge); resize:vertical;}
.rc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px;}
.rc-grid.rc-ev{grid-template-columns:repeat(4,1fr);}
.rc-grid label{display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; opacity:.9;}
.rc-grid input, .rc-grid select{width:100%; box-sizing:border-box; min-height:34px; border-radius:9px; padding:4px 8px; font:inherit; font-size:13px; background:var(--menu-chip, rgba(255,255,255,.1)); color:var(--menu-fg); border:1px solid var(--glass-edge);}
.rc-sub{display:block; opacity:.75; font-weight:600; font-size:11px; white-space:normal;}
html.icons-color #share-menu [data-sh=file]{--ic:#ffb84d;}

/* the Save menu: a coloured icon and a line of description for every action */
#qs-menu{width:268px;}
#qs-menu .qs-list{display:flex; flex-direction:column; gap:6px;}
#qs-menu .qs-act{display:flex; align-items:center; gap:11px; width:100%; min-height:54px; padding:7px 10px; border:1px solid var(--glass-edge); border-radius:14px; background:var(--menu-chip, rgba(255,255,255,.1)); color:var(--menu-fg); text-align:left; cursor:pointer; font-family:inherit;}
#qs-menu .qs-act:active{transform:scale(.98);}
#qs-menu .qs-ic{flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.1); color:var(--ic, var(--menu-fg));}
#qs-menu .qs-ic svg{width:21px; height:21px;}
#qs-menu .qs-tx{display:flex; flex-direction:column; min-width:0;}
#qs-menu .qs-tx b{font-size:13px; font-weight:800; line-height:1.2;}
#qs-menu .qs-tx small{font-size:11px; font-weight:600; opacity:.8; line-height:1.25;}
#qs-menu .qs-act[data-qs=update]{--ic:#3ddc84;}
#qs-menu .qs-act[data-qs=game]{--ic:#38b6ff;}
#qs-menu .qs-act[data-qs=training]{--ic:#ffb84d;}
#qs-menu .qs-act[data-qs=open]{--ic:#b18cff;}
html.hc #qs-menu .qs-act{background:#fff; border:2px solid #000;}

/* the Background colour popover (top bar) */
#bg-menu{position:fixed; z-index:56; width:252px; padding:10px; border-radius:14px; background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); display:flex; flex-direction:column; gap:8px;}
#bg-menu[hidden]{display:none;}
#bg-menu .qs-t{font-size:14px; font-weight:800;}
#bg-menu .bgm-sub{font-size:11.5px; font-weight:600; opacity:.8; margin-top:-4px;}
#bg-menu .bgm-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
#bg-menu .bgm-sw{position:relative; width:100%; aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,255,255,.35); padding:0; cursor:pointer; display:grid; place-items:center; color:#fff; font:inherit; font-size:10px; font-weight:800; background:var(--menu-chip, rgba(255,255,255,.12));}
#bg-menu .bgm-sw.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent);}
#bg-menu .bgm-custom{background:conic-gradient(#f55,#fd5,#5f8,#5df,#85f,#f5c,#f55); overflow:hidden;}
#bg-menu .bgm-custom input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;}
#bg-menu .bgm-custom span{pointer-events:none; font-size:16px; text-shadow:0 1px 3px rgba(0,0,0,.6);}
#btn-bgcolor.on{color:var(--accent);}
html.hc #bg-menu{background:#fff; color:#000; border:2px solid #000; -webkit-backdrop-filter:none; backdrop-filter:none;}
html.embed #bg-menu, html.embed #btn-bgcolor{display:none;}

/* Club | Teams | Players: one way round the three dialogs of the club */
.club-nav{display:flex; gap:4px; padding:3px; margin:0 0 12px; border-radius:999px; background:var(--menu-chip, rgba(255,255,255,.1)); border:1px solid var(--glass-edge);}
.club-nav .cn-b{flex:1; min-height:38px; border:0; border-radius:999px; background:transparent; color:inherit; font:inherit; font-size:13px; font-weight:800; cursor:pointer;}
.club-nav .cn-b i{font-style:normal; opacity:.7; font-weight:700; margin-left:3px;}
.club-nav .cn-b.on{background:var(--accent); color:var(--on-accent);}
.roster-team-info{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 10px; padding:8px 10px; border-radius:12px; background:var(--menu-chip, rgba(255,255,255,.1)); font-size:12px; font-weight:700;}
.roster-team-info[hidden]{display:none;}
.roster-team-info span{min-width:0;}
.team-foot .slot-btn.primary{margin-left:auto; margin-right:8px;}

.fs-tabs{display:flex; gap:4px; padding:3px; margin:0 0 12px; border-radius:999px; background:var(--menu-chip, rgba(255,255,255,.1)); border:1px solid var(--glass-edge);}
.fs-tabs .cn-b{flex:1; min-height:38px; border:0; border-radius:999px; background:transparent; color:inherit; font:inherit; font-size:13px; font-weight:800; cursor:pointer;}
.fs-tabs .cn-b.on{background:var(--accent); color:var(--on-accent);}
.fs-panel[hidden]{display:none;}
.fs-panel .video-sub{margin:10px 0 0;}

/* one look for every row of colours (Themes, Field, kits, zones, bubbles, bibs, rings, sponsors, arrows): round dots and a "+" that opens the colour picker */
.bb-sw{align-items:center;}
.bb-sw button, .swatch-dot{width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,.45); padding:0; cursor:pointer; flex:none; box-sizing:border-box;}
.bb-sw button.on, .swatch-dot.active{border-color:#fff; box-shadow:0 0 0 2px var(--accent); outline:none;}
.bb-sw .sw-plus.on{border-color:#fff; box-shadow:0 0 0 2px var(--accent);}
.swatch-dot.tc-custom{display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; line-height:1; color:var(--ink); background:var(--tbtn-bg);}
.sp-dot{vertical-align:middle; margin-left:6px;}

/* the Analysis menu and panel of the 2D board */
#an2-menu{position:fixed; z-index:56; width:250px; padding:10px; border-radius:14px; background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); display:flex; flex-direction:column; gap:8px;}
#an2-menu[hidden]{display:none;}
#an2-menu .qs-t{font-size:14px; font-weight:800;}
#an2-menu .an2-list{display:flex; flex-direction:column; gap:6px;}
#an2-menu .qs-act{display:flex; align-items:center; gap:11px; width:100%; min-height:50px; padding:6px 10px; border:1px solid var(--glass-edge); border-radius:14px; background:var(--menu-chip, rgba(255,255,255,.1)); color:var(--menu-fg); text-align:left; cursor:pointer; font-family:inherit;}
#an2-menu .qs-act.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}
#an2-menu .qs-ic{flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.1); color:var(--ic, var(--menu-fg));}
#an2-menu .qs-ic svg{width:20px; height:20px;}
#an2-menu .qs-tx{display:flex; flex-direction:column; min-width:0;}
#an2-menu .qs-tx b{font-size:13px; font-weight:800;}
#an2-menu .qs-tx small{font-size:11px; font-weight:600; opacity:.8;}
#btn-an2d.on{color:var(--accent);}
#an2-info{position:fixed; left:12px; bottom:92px; z-index:20; max-width:min(300px, calc(100% - 100px)); padding:8px 11px; border-radius:12px; background:var(--glass); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:12px; font-weight:700;}
#an2-info .v3-leg{display:flex; align-items:center; gap:7px; margin:2px 0;}
#an2-info .v3-zones{border-collapse:separate; border-spacing:2px; margin-top:4px; font-size:10.5px; font-weight:700; text-align:center;}
#an2-info .v3-zones td{min-width:34px; padding:2px 3px; border-radius:4px; color:#fff;}
#an2-info .v3-spc, .v3-spc{display:flex; gap:2px; margin:4px 0 2px; border-radius:8px; overflow:hidden; font-size:11px; font-weight:700;}
#an2-info .v3-spc b{min-width:0; padding:4px 6px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#an2-info .an2-line{font-weight:600; opacity:.9; margin:1px 0;}
body.view3d #an2-info, body.view3d #an2-menu, body.locked #an2-info, html.embed #an2-info{display:none;}

.team-mine{align-self:flex-start; min-height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;}
.team-mine.on{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}

/* Analysis: four tiles (a coloured icon, the name, its state) and a small panel that can be folded, on every screen size */
#dock-3d .v3-anrow{flex-direction:column; align-items:center; gap:6px;}
#dock-3d .v3-anrow .v3-seg{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:6px; border-radius:16px; width:100%; max-width:420px; box-sizing:border-box; background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);}
#dock-3d .v3-anrow .v3-seg button{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 3px; min-width:0; border-radius:12px; background:var(--menu-chip, rgba(255,255,255,.1)); color:var(--menu-fg); line-height:1.15;}
#dock-3d .v3-anrow .v3-seg button.on{background:var(--accent); color:var(--on-accent);}
#dock-3d .v3-anrow .an-ic{display:grid; place-items:center; color:var(--ic);}
#dock-3d .v3-anrow .v3-seg button.on .an-ic{color:inherit;}
#dock-3d .v3-anrow .an-ic svg{width:20px; height:20px;}
#dock-3d .v3-anrow .v3-seg button b{font-size:11.5px; font-weight:800;}
#dock-3d .v3-anrow .v3-seg button small{font-size:10px; font-weight:600; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
#dock-3d .v3-anrow .v3-info{position:static; left:auto; bottom:auto; max-width:min(420px, 100%); width:100%; box-sizing:border-box; pointer-events:auto; max-height:34vh; overflow:auto;}
.an-hd{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px;}
.an-hd b{font-size:11px; letter-spacing:.04em; text-transform:uppercase; opacity:.75;}
.an-min{width:26px; height:22px; border:0; border-radius:8px; background:var(--menu-chip, rgba(255,255,255,.12)); color:inherit; font:inherit; font-weight:800; line-height:1; cursor:pointer; pointer-events:auto;}
.v3-info.min .an-bd, #an2-info.min .an-bd{display:none;}
@media (max-width:760px){
  #dock-3d .v3-anrow .v3-info, #an2-info{font-size:10.5px; padding:6px 8px; line-height:1.4;}
  #an2-info{max-width:min(62vw, 300px); max-height:30vh; overflow:auto;}
  #an2-info .v3-zones td{min-width:26px; font-size:9.5px;}
  #an2-menu{width:min(300px, calc(100vw - 16px));}
}
#an2-menu .an2-list{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
#an2-menu .qs-act{min-height:46px; padding:5px 8px; gap:8px;}
#an2-menu .qs-ic{width:28px; height:28px;}
#an2-menu .qs-tx b{font-size:12.5px;}
#an2-menu .qs-tx small{font-size:10.5px;}
#an2-menu{width:296px;}
/* the panel of the 3D analysis lives in the analysis row of the dock (not in #view3d): the same glass card */
#dock-3d .v3-anrow .v3-info{padding:8px 11px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); color:var(--menu-fg); font-size:11.5px; font-weight:600; line-height:1.5;}
#dock-3d .v3-anrow .v3-leg{display:flex; align-items:center; gap:7px; margin-top:2px;}
#dock-3d .v3-anrow .v3-leg b{display:block; width:78px; height:8px; border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,0.25);}
#dock-3d .v3-anrow .v3-zones{border-collapse:separate; border-spacing:2px; margin-top:4px; font-size:10.5px; font-weight:700; text-align:center;}
#dock-3d .v3-anrow .v3-zones td{min-width:34px; padding:2px 3px; border-radius:4px; color:#fff;}
#dock-3d .v3-anrow .v3-info i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}
#dock-3d .v3-anrow .v3-spc{display:flex; gap:2px; margin:4px 0 2px; border-radius:8px; overflow:hidden; font-size:11px; font-weight:700;}
#dock-3d .v3-anrow .v3-spc b{min-width:0; padding:4px 6px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
body.locked #dock-3d .v3-anrow .v3-info{display:none;}

/* the club dialog: the logo and the name side by side, the logo tools as icon pills */
.club-id{display:flex; gap:14px; align-items:flex-start; margin:0 0 12px;}
.club-logo{flex:none; width:96px; height:96px; border-radius:18px; border:2px dashed var(--glass-edge); background-color:var(--menu-chip, rgba(255,255,255,.1)); background-size:contain; background-repeat:no-repeat; background-position:center; cursor:pointer; position:relative;}
.club-logo:not([style*="url"])::after{content:"+"; position:absolute; inset:0; display:grid; place-items:center; font-size:34px; font-weight:800; opacity:.55;}
.club-id-r{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.club-id-r label{font-size:12px; font-weight:800;}
.club-id-r input{width:100%; box-sizing:border-box; min-height:40px; border-radius:12px; padding:6px 12px; font:inherit; font-size:14px; font-weight:700; background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; border:1px solid var(--glass-edge);}
.club-logo-tools{display:flex; flex-wrap:wrap; gap:6px;}
.ci-b{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px 0 9px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; font:inherit; font-size:12px; font-weight:800; cursor:pointer;}
.ci-b svg{width:17px; height:17px; color:var(--ic, currentColor); flex:none;}
.ci-b.danger{color:var(--menu-danger, #ff9a8a);}
.team-coaches{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0;}
.team-coaches small, .team-kit small{font-size:11px; font-weight:800; opacity:.75; margin-right:2px;}
.team-coaches .role-chip{min-height:32px; padding:0 12px; flex-direction:row;}
.team-kit{display:flex; flex-direction:column; gap:6px; margin:6px 0;}
.team-kit .brief-pics{margin:0;}

html.icons-color #custom-grid .mc-tools{--ic:#ff9f43;}
.nav-badge{position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--accent); color:var(--on-accent); font:800 10px/16px Arial,Helvetica,sans-serif; font-style:normal; text-align:center; box-sizing:border-box;}
.nav-badge[hidden]{display:none;}
#btn-planner{position:relative;}
.club-nav .cn-b{white-space:nowrap; font-size:12.5px; padding:0 4px;}
.club-nav .cn-b i{margin-left:2px;}

/* the club menus: icons in the tabs, details that fold, the coaches table, compact teams */
.club-nav .cn-b{display:inline-flex; align-items:center; justify-content:center; gap:5px;}
.club-nav .cn-ic{display:inline-grid; place-items:center; color:var(--ic);}
.club-nav .cn-ic svg{width:17px; height:17px;}
.club-nav .cn-b.on .cn-ic{color:inherit;}
.club-nav .cn-b span:last-child{display:inline-flex; align-items:baseline; gap:3px;}
@media (max-width:420px){ .club-nav .cn-ic svg{width:15px; height:15px;} .club-nav .cn-b{gap:3px; font-size:12px;} }
.club-more{margin:8px 0; border:1px solid var(--glass-edge); border-radius:14px; padding:2px 12px 8px; background:rgba(255,255,255,.04);}
.club-more > summary{cursor:pointer; list-style:none; font-size:13px; font-weight:800; padding:10px 0; display:flex; align-items:center; justify-content:space-between;}
.club-more > summary::-webkit-details-marker{display:none;}
.club-more > summary::after{content:"\25BE"; opacity:.7;}
.club-more[open] > summary::after{content:"\25B4";}
.club-info{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 6px;}
.club-info label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:800;}
.club-info input, .rp-two input{width:100%; box-sizing:border-box; min-height:38px; border-radius:11px; padding:5px 10px; font:inherit; font-size:13px; background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; border:1px solid var(--glass-edge);}
@media (max-width:420px){ .club-info{grid-template-columns:1fr;} }
.rp-two{display:grid; grid-template-columns:90px 1fr; gap:10px; align-items:start;}
.club-scroll{overflow-x:auto; margin:0 -4px 8px; padding:0 4px;}
.club-tbl{border-collapse:separate; border-spacing:0 6px; width:100%;}
.club-tbl th{font-size:11px; font-weight:800; opacity:.85; text-align:center; vertical-align:bottom; padding:0 2px 2px;}
.club-tbl th.ct-team span{display:inline-block; max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.club-tbl th.ct-name{text-align:left;}
.club-tbl td{padding:0 2px; text-align:center;}
.club-tbl td.ct-name{text-align:left; min-width:120px;}
.club-tbl td.ct-name input{width:100%; box-sizing:border-box; min-height:40px; border-radius:11px; padding:4px 10px; font:inherit; font-size:13px; font-weight:700; background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; border:1px solid var(--glass-edge);}
.ct-cell{width:38px; height:38px; border-radius:11px; border:2px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.1)); cursor:pointer; padding:0; position:relative; color:var(--on-accent);}
.ct-cell.on{background:var(--accent); border-color:var(--accent);}
.ct-cell.on::after{content:"\2713"; font-size:18px; font-weight:800; line-height:34px;}
.ct-radio{border-radius:50%;}
.ct-radio.on::after{content:""; position:absolute; inset:9px; border-radius:50%; background:var(--on-accent);}
.ct-x{width:30px; height:30px; border:0; border-radius:9px; background:transparent; color:var(--menu-danger, #ff9a8a); font-size:20px; font-weight:800; cursor:pointer;}
.ct-x.confirming{background:var(--menu-danger, #c0392b); color:#fff;}
#coaches-hint{display:flex; flex-direction:column; gap:8px; margin-bottom:8px;}
.tc-meta{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0;}
.tc-chip{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; font:inherit; font-size:12px; font-weight:700; cursor:pointer;}
.tc-dot{width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); display:inline-block;}
.ct-cell{width:34px; height:34px;}
.ct-cell.on::after{line-height:30px;}
.club-tbl td.ct-name{min-width:92px;}
.club-tbl td.ct-name input{min-height:36px;}
.club-tbl th.ct-del, .club-tbl td.ct-del{width:26px;}
.ct-x{width:24px;}
@media (max-width:420px){ .club-nav .cn-b{font-size:11.5px; gap:2px; padding:0 2px;} .club-nav .cn-ic svg{width:14px; height:14px;} .club-nav .cn-b i{display:none;} }
.pe-photo-buttons{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}

/* classic coloured buttons: New (green), Update (blue), Delete (red) */
.cb-row{display:flex; gap:8px; margin-top:12px;}
.cb{display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1; min-height:46px; padding:0 10px; border:0; border-radius:13px; color:#fff; font:inherit; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.28);}
.cb svg{width:18px; height:18px; flex:none;}
.cb:active{transform:translateY(1px); box-shadow:none;}
.cb-new{background:#2f9e57;}
.cb-upd{background:#2f7de1;}
.cb-del{background:#d64545;}
.cb-del.armed{background:#a02020; outline:2px solid #ffb3b3;}
.cb[disabled]{opacity:.38; cursor:default; box-shadow:none;}
.cb-wide{width:100%; flex:none; margin-top:10px;}
/* the lists and the forms of Coaches, Teams, Players */
.md-list{display:flex; flex-direction:column; gap:5px; max-height:30vh; overflow-y:auto; padding:2px; margin:0 0 10px; border-radius:12px;}
.md-row{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:6px 12px; border-radius:12px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.08)); color:inherit; font:inherit; text-align:left; cursor:pointer;}
.md-row b{font-size:14px; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.md-row small{font-size:11.5px; font-weight:600; opacity:.75; flex:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.md-row.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.md-form{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; border:1px solid var(--glass-edge); background:rgba(255,255,255,.05);}
.md-f{display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:800;}
.md-f input{width:100%; box-sizing:border-box; min-height:42px; border-radius:11px; padding:5px 11px; font:inherit; font-size:14px; background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; border:1px solid var(--glass-edge);}
.md-lbl{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:800; margin-top:2px;}
.md-q{display:flex; gap:6px;}
.md-q button{min-height:28px; padding:0 10px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; font:inherit; font-size:11.5px; font-weight:800; cursor:pointer;}
.md-checks{display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; padding:2px;}
.md-chips{display:flex; flex-wrap:wrap; gap:6px;}
.md-close{align-self:center; margin-top:8px; min-height:34px; padding:0 18px; border:0; background:transparent; color:inherit; opacity:.75; font:inherit; font-size:12.5px; font-weight:800; text-decoration:underline; cursor:pointer;}
.chk-row{display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 10px; border-radius:11px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.08)); color:inherit; font:inherit; text-align:left; cursor:pointer;}
.chk-row b{font-size:13.5px; font-weight:700;}
.chk-bx{flex:none; width:22px; height:22px; border-radius:7px; border:2px solid var(--glass-edge); position:relative; background:rgba(0,0,0,.18);}
.chk-row.on{border-color:var(--accent);}
.chk-row.on .chk-bx{background:var(--accent); border-color:var(--accent);}
.chk-row.on .chk-bx::after{content:"\2713"; position:absolute; inset:0; display:grid; place-items:center; color:var(--on-accent); font-size:14px; font-weight:900;}
.chk-row.grp-manage{border-style:dashed;}
#roster-input-group{display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; padding:2px;}
.rp-filter{display:flex; gap:8px; margin:0 0 10px;}
.rp-filter select, .rp-filter input{min-height:42px; border-radius:11px; padding:5px 11px; font:inherit; font-size:14px; background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; border:1px solid var(--glass-edge); box-sizing:border-box;}
.rp-filter select{flex:1.2; min-width:0;} .rp-filter input{flex:1; min-width:0;}
#roster-list{max-height:34vh; overflow-y:auto;}
.tc-chip[disabled]{opacity:.4;}
#tf-kit{--kc:#e67e22;}
#tf-kit::before{content:""; width:14px; height:14px; border-radius:50%; background:var(--kc); border:1.5px solid rgba(255,255,255,.6); display:inline-block;}

/* two panes: the list on the left, the form on the right; both scroll */
#coaches-overlay .modal-box.md-wide, #groups-overlay .modal-box.md-wide, #roster-overlay .modal-box.md-wide{width:min(760px, calc(100vw - 20px)); max-width:none; box-sizing:border-box;}
.md-grid{display:grid; grid-template-columns:minmax(118px, 38%) minmax(0, 1fr); gap:10px; align-items:start; margin-bottom:8px;}
.md-left{min-width:0; display:flex; flex-direction:column; gap:8px;}
.md-right{min-width:0;}
.md-grid .md-list{max-height:min(54vh, 480px); margin:0;}
.md-left .md-row{flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; min-height:48px;}
.md-left .md-row small{max-width:100%;}
.md-right .md-form{max-height:min(60vh, 560px); overflow-y:auto;}
.md-right .md-checks{max-height:min(32vh, 260px);}
.md-form.hidden{display:none;}
.md-t{font-size:14px; font-weight:800;}
.md-ph{padding:22px 12px; text-align:center; opacity:.7; font-size:13px; font-weight:600; border:1px dashed var(--glass-edge); border-radius:14px;}
.md-ph[hidden]{display:none;}
#roster-list{max-height:min(46vh, 420px);}
#roster-list .slot-row{cursor:pointer; padding:6px 8px; gap:8px;}
#roster-list .slot-row.on{background:var(--accent); color:var(--on-accent);}
#roster-list .slot-row.on .rc-sub{color:inherit;}
.md-left .rp-filter{flex-direction:column; gap:6px; margin:0;}
.md-left .cb-wide{margin-top:0;}
@media (max-width:560px){
  .md-grid{grid-template-columns:minmax(104px, 36%) minmax(0, 1fr); gap:8px;}
  .md-form{padding:9px;}
  .md-right .cb-row{flex-direction:column;}
  .md-right .cb{min-height:42px; font-size:13px;}
  #roster-list .slot-status{font-size:12.5px;}
  #roster-list .slot-num{width:30px; height:30px; font-size:13px;}
}
/* on a phone the two panes are stacked: the list above (it scrolls), the form below */
@media (max-width:560px){
  .md-grid{grid-template-columns:1fr; gap:10px;}
  .md-grid .md-list{max-height:26vh;}
  #roster-list{max-height:28vh;}
  .md-right .md-form{max-height:none; overflow:visible;}
  .md-left .md-row{flex-direction:row; align-items:center; justify-content:space-between;}
  .md-left .md-row small{max-width:55%;}
  .md-right .cb-row{flex-direction:row;}
  .md-left .rp-filter{flex-direction:row;}
  .md-right .md-checks{max-height:30vh;}
  #roster-input-group{max-height:26vh;}
}
.grp-add[hidden]{display:none !important;}

/* a list of choices in the style of the board */
.ss{position:relative; min-width:0;}
.ss-native{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none;}
.ss-btn{width:100%; min-height:42px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 12px; border-radius:11px; border:1px solid var(--glass-edge); background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; font:inherit; font-size:14px; font-weight:700; text-align:left; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.ss-btn::after{content:"\25BE"; opacity:.7; flex:none;}
.ss-btn[aria-expanded=true]{border-color:var(--accent);}
.ss-list{position:fixed; z-index:90; overflow-y:auto; padding:6px; border-radius:14px; background:var(--glass-strong, rgba(24,30,27,.97)); color:var(--menu-fg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); display:flex; flex-direction:column; gap:3px;}
.ss-list[hidden]{display:none;}
.ss-opt{flex:none; min-height:40px; padding:6px 12px; border:0; border-radius:10px; background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:700; text-align:left; cursor:pointer;}
.ss-opt:hover{background:var(--menu-chip, rgba(255,255,255,.1));}
.ss-opt.on{background:var(--accent); color:var(--on-accent);}
.rc-grid .ss-btn{min-height:34px; font-size:13px;}
.rp-filter .ss{flex:1.2;}
html.hc .ss-list{background:#fff; color:#000; border:2px solid #000;}

/* the logo options open: the court shows through, the dialog is a small panel */
#logo-overlay.peek{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; pointer-events:none; align-items:flex-end; padding-bottom:calc(8px + env(safe-area-inset-bottom));}
#logo-overlay.peek[data-peek=top]{align-items:flex-start; padding-top:64px;}
#logo-overlay.peek .modal-box{pointer-events:auto; max-height:46vh; overflow-y:auto; box-shadow:0 8px 30px rgba(0,0,0,.45);}
#logo-overlay.peek .modal-box > :not(.modal-title):not(#logo-details):not(.modal-actions){display:none;}
#logo-overlay.peek .modal-title{display:none;}

/* the teams of a player: chips to tick (several at once), no scrolling inside the form */
#roster-input-group{flex-direction:row; flex-wrap:wrap; max-height:none; overflow:visible; gap:6px;}
#roster-input-group .chk-row{min-height:38px; padding:3px 10px 3px 8px; gap:7px; flex:0 1 auto;}
#roster-input-group .chk-row b{font-size:13px;}
#roster-input-group .chk-bx{width:18px; height:18px; border-radius:6px;}
#roster-input-group .chk-row.on{background:color-mix(in srgb, var(--accent) 22%, transparent);}
@media (max-width:560px){ #roster-input-group{max-height:none;} }
/* the club tabs always fit the dialog */
.club-nav{overflow:hidden;}
.club-nav .cn-b{min-width:0; overflow:hidden;}
@media (max-width:560px){ .club-nav .cn-b i{display:none;} .club-nav .cn-b{font-size:12px; gap:3px; padding:0 2px;} .club-nav .cn-ic svg{width:15px; height:15px;} }

/* player form: everything on one screen, the teams in a searchable list, Save always in sight */
#roster-edit-overlay{display:flex; flex-direction:column; gap:8px; padding-bottom:0; max-height:min(72vh, 640px);}
#roster-edit-overlay.hidden{display:none;}
#roster-edit-overlay .md-t{flex:none;}
#roster-edit-overlay .pe-photo-row{display:flex; align-items:center; gap:10px; margin:0;}
#roster-edit-overlay #roster-photo-preview{width:54px; height:54px; flex:none;}
#roster-edit-overlay .pe-photo-buttons{display:flex; flex-direction:row; flex-wrap:wrap; gap:6px;}
#roster-edit-overlay .pe-photo-buttons .ci-b{min-height:34px; padding:0 12px; font-size:12.5px;}
#roster-edit-overlay .rp-two{margin:0;}
#roster-edit-overlay .modal-field{margin:0;}
#roster-edit-overlay .pf-tl{display:flex; justify-content:space-between; align-items:baseline;}
#roster-edit-overlay .pf-tl em{font-style:normal; font-weight:800; color:var(--accent);}
.pf-search{width:100%; box-sizing:border-box; min-height:38px; margin:4px 0;}
#roster-edit-overlay #roster-input-group{flex-direction:column; flex-wrap:nowrap; flex:0 1 auto; min-height:90px; max-height:max(96px, 24vh); overflow-y:auto; gap:3px; padding:2px;}
#roster-edit-overlay #roster-input-group .chk-row{min-height:34px; padding:2px 10px 2px 8px; flex:none;}
#roster-edit-overlay #roster-input-group .chk-row[hidden]{display:none;}
#roster-edit-overlay .club-more{flex:none; margin:0;}
#roster-edit-overlay .club-more[open]{max-height:34vh; overflow-y:auto;}
.pf-foot{position:sticky; bottom:0; flex:none; padding:8px 0 8px; margin-top:auto; background:linear-gradient(to bottom, transparent, var(--glass-strong, rgba(24,30,27,.97)) 22%);}
.pf-foot .cb-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:0;}
.pf-foot .cb{min-height:44px; padding:0 4px; font-size:13px; gap:5px;}
.pf-foot .cb svg{width:17px; height:17px;}
.cb-cancel{background:var(--menu-chip, rgba(255,255,255,.12)); color:inherit; border:1px solid var(--glass-edge);}

/* Club, Coaches, Teams, Players: one and the same window */
#logo-overlay .modal-box.md-wide, #coaches-overlay .modal-box.md-wide, #groups-overlay .modal-box.md-wide, #roster-overlay .modal-box.md-wide{width:min(760px, calc(100vw - 20px)); max-width:none; box-sizing:border-box; height:min(92vh, 740px); max-height:92vh; overflow-y:auto; display:flex; flex-direction:column;}
#logo-overlay .modal-box.md-wide > .modal-actions, #coaches-overlay .modal-box.md-wide > .modal-actions, #groups-overlay .modal-box.md-wide > .modal-actions, #roster-overlay .modal-box.md-wide > .modal-actions{margin-top:auto;}
#logo-overlay .modal-box.md-wide > *, #coaches-overlay .modal-box.md-wide > *, #groups-overlay .modal-box.md-wide > *, #roster-overlay .modal-box.md-wide > *{flex-shrink:0;}
#logo-overlay.peek .modal-box.md-wide{height:auto; width:min(520px, calc(100vw - 20px)); max-height:46vh;}
/* player form v2: no inner scroll, Save sticks to the bottom of the window */
#roster-edit-overlay{max-height:none !important; overflow:visible !important;}
#roster-edit-overlay #roster-input-group{max-height:max(96px, 22vh);}
#roster-edit-overlay > *{flex-shrink:0;}
.pf-search{min-height:40px; border-radius:11px; padding:5px 11px; font:inherit; font-size:14px; background:var(--menu-chip, rgba(255,255,255,.1)); color:inherit; border:1px solid var(--glass-edge);}
.pf-foot{margin-left:-2px; margin-right:-2px; z-index:2; background:var(--glass-strong, rgba(24,30,27,.97)); border-top:1px solid var(--glass-edge);}
.pf-foot .cb-row{grid-template-columns:repeat(auto-fit, minmax(0, 1fr));}
/* player form v3: photo, number and name on one row */
#roster-edit-overlay{display:grid !important; grid-template-columns:auto minmax(0, 1fr); column-gap:10px; row-gap:8px; align-content:start;}
#roster-edit-overlay.hidden{display:none !important;}
#roster-edit-overlay > *{grid-column:1 / -1;}
#roster-edit-overlay > .pe-photo-row{grid-column:1; flex-direction:column; align-items:flex-start; gap:6px;}
#roster-edit-overlay > .rp-two{grid-column:2; align-self:end; display:grid; grid-template-columns:72px minmax(0, 1fr); gap:8px;}
#roster-edit-overlay .pe-photo-row{display:flex;}
#roster-edit-overlay .pe-photo-row #roster-photo-preview{width:64px; height:64px;}
#roster-edit-overlay .pe-photo-buttons{flex-direction:row; flex-wrap:nowrap; gap:5px;}
#roster-edit-overlay .pe-photo-buttons .ci-b{min-height:30px; padding:0 9px; font-size:11.5px;}

/* one action bar on top of every form of the club: New, Save, Delete, Cancel */
.md-bar{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; position:sticky; top:0; z-index:3; padding:2px 0 8px; background:var(--glass-strong, rgba(24,30,27,.97)); margin:0;}
.md-bar .cb{min-height:44px; padding:0 4px; font-size:13px; gap:5px;}
.md-bar .cb svg{width:17px; height:17px;}
.md-bar .cb:disabled{opacity:.4;}
.md-right .md-form{max-height:none; overflow:visible;}
.md-right .md-checks{max-height:min(34vh, 280px);}
#logo-overlay.peek .modal-box{margin:0 auto;}
#logo-overlay.peek[data-peek=bottom] .modal-box{margin-top:auto;}
#logo-overlay.peek[data-peek=top] .modal-box{margin-bottom:auto;}

/* Players: the same as Teams and Coaches (the bar of the form is the New button; no title over the form) */
#roster-add-btn, #roster-edit-title{display:none !important;}
#roster-edit-overlay > .md-bar{padding-top:0;}
#roster-edit-overlay{padding-top:10px;}

body.view3d.view-mode:not(.locked) header{padding-top:var(--nav-h, 52px); box-sizing:border-box;}

/* the zoom follows the vertical menu: on the left when the menu is on the left, on the right otherwise */
html.menu-on-left #tabs-row{justify-content:flex-start; padding-right:0; padding-left:10px;}

/* Themes > Icons: monochrome makes every icon the colour of its text, wherever it is (planner, club, bubbles, tiles) */
html:not(.icons-color) [style*="--ic"]{--ic:currentColor !important;}
html:not(.icons-color) :is(#pbubble, .v3-ctx, .v3-bar) svg{filter:grayscale(1) brightness(2.6);}
html:not(.icons-color) .pl-t-edit .pl-ic, html:not(.icons-color) #roster-team-info svg{color:inherit !important;}
html.icons-color .pl-t-edit .pl-ic{color:#e86bff;}

/* ONE look for every action button of the app: the one of the toolbar (a line icon over a small label, no fill, in a glass group). The icon is coloured only in the colour icon style (Themes). */
html body .cb, html body .pl-tile{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:transparent !important; border:0 !important; box-shadow:none !important; color:var(--ink, var(--menu-fg, #f4f1e8)); font-size:11px; font-weight:700; line-height:1.1; min-height:54px; padding:4px 2px; border-radius:12px; text-shadow:0 1px 2px rgba(0,0,0,.55); cursor:pointer;}
html body .cb svg, html body .pl-tile .pl-ic{width:24px; height:24px; flex:none;}
html body .cb span, html body .pl-tile span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html body .cb:active, html body .pl-tile:active{background:rgba(255,255,255,.12) !important;}
html body .cb[disabled], html body .pl-tile[disabled]{opacity:.38; pointer-events:none;}
html body .cb-wide{flex-direction:row; gap:8px; width:100%; min-height:46px; font-size:13px; background:var(--glass, rgba(24,30,27,.7)) !important; border:1px solid var(--glass-edge, rgba(255,255,255,.16)) !important; box-shadow:var(--glass-shadow, none) !important;}
html body .cb-wide svg{width:20px; height:20px;}
html body .cb-del.armed, html body .pl-t-del.armed{background:rgba(214,69,69,.38) !important; outline:1px solid #ff9a9a;}
html body .md-bar, html body .pl-tiles, html body .pl-tsm, html body .pl-dact:has(.cb){background:var(--glass-strong, rgba(24,30,27,.9)); border:1px solid var(--glass-edge, rgba(255,255,255,.16)); border-radius:18px; padding:3px; gap:2px;}
html body .pl-tiles{margin-top:8px; flex-wrap:nowrap; overflow:hidden;}
html body .pl-sct .pl-tile, html body .pl-tiles .pl-tile{flex:1 1 0; max-width:none; min-width:0; width:auto;}
html body .pl-trbar{margin:-12px -12px 8px; border-radius:0 0 18px 18px; border-top:0;}
html body .pl-trtools{background:var(--glass, rgba(24,30,27,.7)); border:1px solid var(--glass-edge, rgba(255,255,255,.16)); border-radius:18px; padding:3px; gap:2px; overflow-x:auto;}
html body .pl-trtools .pl-tile{flex:0 0 66px;}
html body .pl-tsm{flex:0 0 62px; width:62px; max-width:none;}
html.icons-color .cb-new svg, html.icons-color .pl-t-go svg, html.icons-color .pl-t-new svg{color:#4cd964;}
html.icons-color .cb-upd svg{color:#38b6ff;}
html.icons-color .cb-del svg, html.icons-color .pl-t-del svg{color:#ff7b6e;}
html.icons-color .pl-t-edit svg{color:#e86bff;}
html.icons-color .cb-cancel svg{color:#c7c7cc;}
html.icons-color .pl-trtools .pl-tile:nth-child(1) svg{color:#4cd964;}
html.icons-color .pl-trtools .pl-tile:nth-child(2) svg{color:#ff6bd6;}
html.icons-color .pl-trtools .pl-tile:nth-child(3) svg{color:#38b6ff;}
html.icons-color .pl-trtools .pl-tile:nth-child(4) svg{color:#ffd60a;}
html.icons-color .pl-trtools .pl-tile:nth-child(5) svg{color:#5ac8fa;}
html.icons-color .pl-trtools .pl-tile:nth-child(6) svg{color:#ffd60a;}
html body .pl-tiles .pl-tile span{font-size:9.5px; letter-spacing:-.2px;}
/* a training: the check list and the coaches come with the team, nothing to fill in here (the attendance is taken in Today) */
html body .pl-runby, html body .pl-card.pl-att:not(.pl-att2){display:none !important;}
html body .pl-rpbtns{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:12px; background:var(--glass-strong, rgba(24,30,27,.9)); border:1px solid var(--glass-edge, rgba(255,255,255,.16)); border-radius:18px; padding:3px;}

@media (max-height:900px){ #dock-3d .v3-anrow .v3-info{max-height:22vh;} #dock-3d .v3-anrow .v3-seg button small{display:none;} }
html.icons-color #v3-cam{--ic:#2dd4bf;}
/* My trainings | Club trainings: two real tabs (a line under the open one) */
html body .pl-seg2{display:flex; gap:0; margin:4px 0 12px; border-bottom:1px solid var(--glass-edge, rgba(255,255,255,.16));}
html body .pl-seg2 .pl-btn{flex:1; background:transparent !important; border:0 !important; border-bottom:3px solid transparent !important; border-radius:0 !important; box-shadow:none !important; min-height:44px; color:inherit; opacity:.65; font-weight:800; margin-bottom:-1px;}
html body .pl-seg2 .pl-btn.on{border-bottom-color:var(--accent, #e3a857) !important; opacity:1; color:inherit;}
html body .pl-seg2 .pl-btn i{font-style:normal; opacity:.8; margin-left:6px; padding:0 7px; border-radius:999px; background:rgba(255,255,255,.14); font-size:12px;}