/* -----------------------------
   Design tokens
----------------------------- */

:root{
  --container: min(1200px, 96vw);
  --content-max: 1200px;        
  --content-pad: 16px;
  --ui-hidden-left-clearance: 0px;
  --ui-hidden-top-clearance: 0px;
  --ui-hidden-bottom-clearance: 0px;
  --toast-top-offset: clamp(80px, calc(env(safe-area-inset-top, 0px) + 10vh), 120px);
  
  --teamO:#ff5a5f;   
  --teamD:#1ea7ff;   
  --mode-formation:#2fb36d;
  --mode-playbook:#d9b441;
  --mode-accent:var(--mode-formation);
  --mode-accent-soft:rgba(47,179,109,.16);
  --bg:#0b0f14;
  --panel:#0f141a;
  --panel-2:#0f1a20;
  --border:#223;
  --ink:#e8eef0;
  --muted:#a9b3bd;

  --pitch:#1f6b3a;
  --wide:#1a5b33;
  --end-top:#1ea7ff;      
  --end-bottom:#ff5a5f;
  --line:#d9d9d9;
  --grid: rgba(217,217,217,.75);
  --hash:#bcd7c2;

  --o:#ff5a5f;
  --d:#1ea7ff;
  
  --sel:#ffffff;

  --accent:#ff3b30;
  --focus:#4da3ff;
  --ui-metal:#8d7a58;

  --asset-icon-info:url("assets/ui/icons/icon-info.svg?v=Beta%20v.1.0");
  --asset-icon-ui-toggle:url("assets/ui/icons/icon-ui-toggle.svg?v=Beta%20v.1.0");
  --asset-icon-lock:url("assets/ui/icons/icon-lock.svg?v=Beta%20v.1.0");
  --asset-icon-return-top:url("assets/ui/icons/icon-return-top.svg?v=Beta%20v.1.0");
  --asset-icon-mode-switch:url("assets/ui/icons/icon-mode-switch.svg?v=Beta%20v.1.0");
  --asset-icon-pitch:url("assets/ui/icons/icon-pitch.svg?v=Beta%20v.1.0");
  --asset-icon-sketch:url("assets/ui/icons/icon-sketch.svg?v=Beta%20v.1.0");
  --asset-icon-player:url("assets/ui/icons/icon-player.svg?v=Beta%20v.1.0");
  --asset-icon-settings:url("assets/ui/icons/icon-settings.svg?v=Beta%20v.1.0");
  --asset-icon-save:url("assets/ui/icons/icon-save.svg?v=Beta%20v.1.0");
  --asset-icon-load:url("assets/ui/icons/icon-load.svg?v=Beta%20v.1.0");
  --asset-icon-formation-save:url("assets/ui/icons/icon-save.svg?v=Beta%20v.1.0");
  --asset-icon-formation-load:url("assets/ui/icons/icon-load.svg?v=Beta%20v.1.0");
  --asset-icon-image:url("assets/ui/icons/icon-image.svg?v=Beta%20v.1.0");
  --asset-icon-import:url("assets/ui/icons/icon-import.svg?v=Beta%20v.1.0");
  --asset-icon-export:url("assets/ui/icons/icon-export.svg?v=Beta%20v.1.0");
  --asset-icon-undo:url("assets/ui/icons/icon-undo.svg?v=Beta%20v.1.0");
  --asset-icon-reset:url("assets/ui/icons/icon-reset.svg?v=Beta%20v.1.0");
  --asset-icon-rotate:url("assets/ui/icons/icon-rotate.svg?v=Beta%20v.1.0");
  --asset-icon-clear:url("assets/ui/icons/icon-clear.svg?v=Beta%20v.1.0");
  --asset-icon-dugout:url("assets/ui/icons/icon-dugout.svg?v=Beta%20v.1.0");
  --asset-icon-deploy:url("assets/ui/icons/icon-deploy.svg?v=Beta%20v.1.0");
  --asset-icon-gather:url("assets/ui/icons/icon-gather.svg?v=Beta%20v.1.0");
  --asset-icon-reserve-add:url("assets/ui/icons/icon-reserve-add.svg?v=Beta%20v.1.0");
  --asset-icon-reserve-remove:url("assets/ui/icons/icon-reserve-remove.svg?v=Beta%20v.1.0");
  --asset-icon-tackle-zones:url("assets/ui/icons/icon-tackle-zones.svg?v=Beta%20v.1.0");
  --asset-icon-skill-bands:url("assets/ui/icons/icon-skill-bands.svg?v=Beta%20v.1.0");
  --asset-icon-new-session:url("assets/ui/icons/icon-new-session.svg?v=Beta%20v.1.0");
  --asset-icon-install:url("assets/ui/icons/icon-install.svg?v=Beta%20v.1.0");
  --asset-icon-logo-upload:url("assets/ui/icons/icon-logo-upload.svg?v=Beta%20v.1.0");
  --asset-icon-logo-clear:url("assets/ui/icons/icon-logo-clear.svg?v=Beta%20v.1.0");
  --asset-icon-legal:url("assets/ui/icons/icon-legal.svg?v=Beta%20v.1.0");
  --asset-icon-copy:url("assets/ui/icons/icon-copy.svg?v=Beta%20v.1.0");
  --asset-icon-print:url("assets/ui/icons/icon-print.svg?v=Beta%20v.1.0");
  --asset-icon-close:url("assets/ui/icons/icon-close.svg?v=Beta%20v.1.0");
  --asset-icon-dock:url("assets/ui/icons/icon-dock.svg?v=Beta%20v.1.0");
  --asset-icon-select:url("assets/ui/icons/icon-select.svg?v=Beta%20v.1.0");
  --asset-icon-delete:url("assets/ui/icons/icon-delete.svg?v=Beta%20v.1.0");
  --asset-icon-pen:url("assets/ui/icons/icon-pen.svg?v=Beta%20v.1.0");
  --asset-icon-line:url("assets/ui/icons/icon-line.svg?v=Beta%20v.1.0");
  --asset-icon-arrow:url("assets/ui/icons/icon-arrow.svg?v=Beta%20v.1.0");
  --asset-icon-rectangle:url("assets/ui/icons/icon-rectangle.svg?v=Beta%20v.1.0");
  --asset-icon-ellipse:url("assets/ui/icons/icon-ellipse.svg?v=Beta%20v.1.0");
  --asset-icon-text:url("assets/ui/icons/icon-text.svg?v=Beta%20v.1.0");
  --asset-icon-style:url("assets/ui/icons/icon-style.svg?v=Beta%20v.1.0");
  --asset-icon-view:url("assets/ui/icons/icon-view.svg?v=Beta%20v.1.0");
  --asset-icon-edit-text:url("assets/ui/icons/icon-edit-text.svg?v=Beta%20v.1.0");
  --asset-icon-hide-sketch:url("assets/ui/icons/icon-hide-sketch.svg?v=Beta%20v.1.0");
  --asset-icon-rewind:url("assets/ui/icons/icon-rewind.svg?v=Beta%20v.1.0");
  --asset-icon-previous:url("assets/ui/icons/icon-previous.svg?v=Beta%20v.1.0");
  --asset-icon-play:url("assets/ui/icons/icon-play.svg?v=Beta%20v.1.0");
  --asset-icon-pause:url("assets/ui/icons/icon-pause.svg?v=Beta%20v.1.0");
  --asset-icon-next:url("assets/ui/icons/icon-next.svg?v=Beta%20v.1.0");
  --asset-icon-current-step:url("assets/ui/icons/icon-current-step.svg?v=Beta%20v.1.0");
  --asset-icon-timeline:url("assets/ui/icons/icon-timeline.svg?v=Beta%20v.1.0");
  --asset-icon-delete-step:url("assets/ui/icons/icon-delete-step.svg?v=Beta%20v.1.0");
  --asset-icon-reset-actions:url("assets/ui/icons/icon-reset-actions.svg?v=Beta%20v.1.0");

  --asset-panel-tool-pitch:url("assets/ui/panels/panel-tool-pitch.svg?v=Beta%20v.1.0");
  --asset-panel-tool-sketch:url("assets/ui/panels/panel-tool-sketch.svg?v=Beta%20v.1.0");
  --asset-panel-tool-player:url("assets/ui/panels/panel-tool-player.svg?v=Beta%20v.1.0");
  --asset-panel-tool-settings:url("assets/ui/panels/panel-tool-settings.svg?v=Beta%20v.1.0");
  --asset-panel-ghost-dock:url("assets/ui/panels/panel-ghost-dock.svg?v=Beta%20v.1.0");
  --asset-panel-footer:url("assets/ui/panels/panel-footer.svg?v=Beta%20v.1.0");
  --asset-panel-formation-dugout:url("assets/ui/panels/panel-formation-dugout.svg?v=Beta%20v.1.0");
  --asset-panel-import-side:url("assets/ui/panels/panel-import-side.svg?v=Beta%20v.1.0");
  --asset-panel-formation-load:url("assets/ui/panels/panel-formation-load.svg?v=Beta%20v.1.0");
  --asset-panel-info-modal:url("assets/ui/panels/panel-info-modal.svg?v=Beta%20v.1.0");
  --asset-panel-export-modal:url("assets/ui/panels/panel-export-modal.svg?v=Beta%20v.1.0");
  --asset-panel-texture:url("assets/ui/panels/panel-texture.svg?v=Beta%20v.1.0");
  --asset-panel-frame:url("assets/ui/panels/panel-frame.svg?v=Beta%20v.1.0");
  --asset-bg-app:url("assets/ui/backgrounds/bg-app-vignette.svg?v=Beta%20v.1.0");
  --asset-bg-footer:url("assets/ui/backgrounds/bg-footer-vignette.svg?v=Beta%20v.1.0");

  
  --cell:34px;
  --gap:1px;
  --r-8:8px; --r-10:10px; --r-12:12px;
  --shadow-1:0 2px 8px rgba(0,0,0,.25);
  --shadow-2:0 10px 30px rgba(0,0,0,.35);
  --shadow-3:0 20px 60px rgba(0,0,0,.5);
  --fast:.15s;
  --e:ease;
}


@media (max-width:768px){ :root{ --cell:28px } }

/* -----------------------------
   Base
----------------------------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(circle at 50% -12%, var(--mode-accent-soft), transparent 34rem),
    radial-gradient(circle at 0 18%, color-mix(in srgb, var(--mode-accent) 10%, transparent), transparent 22rem),
    var(--bg);
  color:var(--ink);
  font:14px/1.4 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px;
}

body[data-app-mode="formation"]{
  --mode-accent:var(--mode-formation);
  --mode-accent-soft:rgba(47,179,109,.14);
}

body[data-app-mode="playbook"]{
  --mode-accent:var(--mode-playbook);
  --mode-accent-soft:rgba(217,180,65,.14);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* Asset scaffold: dormant until the final integration pass enables .ui-assets-enabled. */
[data-ui-icon="info"]{ --ui-icon-mask:var(--asset-icon-info); }
[data-ui-icon="ui-toggle"]{ --ui-icon-mask:var(--asset-icon-ui-toggle); }
[data-ui-icon="lock"]{ --ui-icon-mask:var(--asset-icon-lock); }
[data-ui-icon="return-top"]{ --ui-icon-mask:var(--asset-icon-return-top); }
[data-ui-icon="mode-switch"]{ --ui-icon-mask:var(--asset-icon-mode-switch); }
[data-ui-icon="pitch"]{ --ui-icon-mask:var(--asset-icon-pitch); }
[data-ui-icon="sketch"]{ --ui-icon-mask:var(--asset-icon-sketch); }
[data-ui-icon="player"]{ --ui-icon-mask:var(--asset-icon-player); }
[data-ui-icon="settings"]{ --ui-icon-mask:var(--asset-icon-settings); }
[data-ui-icon="save"]{ --ui-icon-mask:var(--asset-icon-save); }
[data-ui-icon="load"]{ --ui-icon-mask:var(--asset-icon-load); }
[data-ui-icon="formation-save"]{ --ui-icon-mask:var(--asset-icon-formation-save); }
[data-ui-icon="formation-load"]{ --ui-icon-mask:var(--asset-icon-formation-load); }
[data-ui-icon="image"]{ --ui-icon-mask:var(--asset-icon-image); }
[data-ui-icon="import"]{ --ui-icon-mask:var(--asset-icon-import); }
[data-ui-icon="export"]{ --ui-icon-mask:var(--asset-icon-export); }
[data-ui-icon="undo"]{ --ui-icon-mask:var(--asset-icon-undo); }
[data-ui-icon="reset"]{ --ui-icon-mask:var(--asset-icon-reset); }
[data-ui-icon="rotate"]{ --ui-icon-mask:var(--asset-icon-rotate); }
[data-ui-icon="clear"]{ --ui-icon-mask:var(--asset-icon-clear); }
[data-ui-icon="dugout"]{ --ui-icon-mask:var(--asset-icon-dugout); }
[data-ui-icon="deploy"]{ --ui-icon-mask:var(--asset-icon-deploy); }
[data-ui-icon="gather"]{ --ui-icon-mask:var(--asset-icon-gather); }
[data-ui-icon="reserve-add"]{ --ui-icon-mask:var(--asset-icon-reserve-add); }
[data-ui-icon="reserve-remove"]{ --ui-icon-mask:var(--asset-icon-reserve-remove); }
[data-ui-icon="tackle-zones"]{ --ui-icon-mask:var(--asset-icon-tackle-zones); }
[data-ui-icon="skill-bands"]{ --ui-icon-mask:var(--asset-icon-skill-bands); }
[data-ui-icon="new-session"]{ --ui-icon-mask:var(--asset-icon-new-session); }
[data-ui-icon="install"]{ --ui-icon-mask:var(--asset-icon-install); }
[data-ui-icon="logo-upload"]{ --ui-icon-mask:var(--asset-icon-logo-upload); }
[data-ui-icon="logo-clear"]{ --ui-icon-mask:var(--asset-icon-logo-clear); }
[data-ui-icon="legal"]{ --ui-icon-mask:var(--asset-icon-legal); }
[data-ui-icon="copy"]{ --ui-icon-mask:var(--asset-icon-copy); }
[data-ui-icon="print"]{ --ui-icon-mask:var(--asset-icon-print); }
[data-ui-icon="close"]{ --ui-icon-mask:var(--asset-icon-close); }
[data-ui-icon="dock"]{ --ui-icon-mask:var(--asset-icon-dock); }
[data-ui-icon="select"]{ --ui-icon-mask:var(--asset-icon-select); }
[data-ui-icon="delete"]{ --ui-icon-mask:var(--asset-icon-delete); }
[data-ui-icon="pen"]{ --ui-icon-mask:var(--asset-icon-pen); }
[data-ui-icon="line"]{ --ui-icon-mask:var(--asset-icon-line); }
[data-ui-icon="arrow"]{ --ui-icon-mask:var(--asset-icon-arrow); }
[data-ui-icon="rectangle"]{ --ui-icon-mask:var(--asset-icon-rectangle); }
[data-ui-icon="ellipse"]{ --ui-icon-mask:var(--asset-icon-ellipse); }
[data-ui-icon="text"]{ --ui-icon-mask:var(--asset-icon-text); }
[data-ui-icon="style"]{ --ui-icon-mask:var(--asset-icon-style); }
[data-ui-icon="view"]{ --ui-icon-mask:var(--asset-icon-view); }
[data-ui-icon="edit-text"]{ --ui-icon-mask:var(--asset-icon-edit-text); }
[data-ui-icon="hide-sketch"]{ --ui-icon-mask:var(--asset-icon-hide-sketch); }
[data-ui-icon="rewind"]{ --ui-icon-mask:var(--asset-icon-rewind); }
[data-ui-icon="previous"]{ --ui-icon-mask:var(--asset-icon-previous); }
[data-ui-icon="play"]{ --ui-icon-mask:var(--asset-icon-play); }
[data-ui-icon="pause"]{ --ui-icon-mask:var(--asset-icon-pause); }
[data-ui-icon="next"]{ --ui-icon-mask:var(--asset-icon-next); }
[data-ui-icon="current-step"]{ --ui-icon-mask:var(--asset-icon-current-step); }
[data-ui-icon="timeline"]{ --ui-icon-mask:var(--asset-icon-timeline); }
[data-ui-icon="delete-step"]{ --ui-icon-mask:var(--asset-icon-delete-step); }
[data-ui-icon="reset-actions"]{ --ui-icon-mask:var(--asset-icon-reset-actions); }

[data-panel-art="tool-pitch"]{ --ui-panel-art-image:var(--asset-panel-tool-pitch); }
[data-panel-art="tool-sketch"]{ --ui-panel-art-image:var(--asset-panel-tool-sketch); }
[data-panel-art="tool-player"]{ --ui-panel-art-image:var(--asset-panel-tool-player); }
[data-panel-art="tool-settings"]{ --ui-panel-art-image:var(--asset-panel-tool-settings); }
[data-panel-art="ghost-dock"]{ --ui-panel-art-image:var(--asset-panel-ghost-dock); }
[data-panel-art="footer"]{ --ui-panel-art-image:var(--asset-panel-footer); }
[data-panel-art="formation-dugout"]{ --ui-panel-art-image:var(--asset-panel-formation-dugout); }
[data-panel-art="import-side"]{ --ui-panel-art-image:var(--asset-panel-import-side); }
[data-panel-art="formation-load"]{ --ui-panel-art-image:var(--asset-panel-formation-load); }
[data-panel-art="info-modal"]{ --ui-panel-art-image:var(--asset-panel-info-modal); }
[data-panel-art="export-modal"]{ --ui-panel-art-image:var(--asset-panel-export-modal); }

.ui-assets-enabled .has-ui-icon,
.ui-assets-enabled .ghost-tabs .has-ui-icon,
.ui-assets-enabled #dugoutTitle.has-ui-icon,
.ui-assets-enabled .fullscreen-footer__inner a.has-ui-icon{
  display:inline-flex;
  align-items:center;
  gap:var(--ui-icon-gap, .55rem);
}

.ui-assets-enabled .has-ui-icon::before,
.ui-assets-enabled .ghost-tabs .has-ui-icon::before,
.ui-assets-enabled #dugoutTitle.has-ui-icon::before,
.ui-assets-enabled .fullscreen-footer__inner a.has-ui-icon::before{
  content:"";
  inline-size:var(--ui-icon-size, 1rem);
  block-size:var(--ui-icon-size, 1rem);
  flex:0 0 var(--ui-icon-size, 1rem);
  background:currentColor;
  opacity:var(--ui-icon-opacity, .92);
  -webkit-mask-image:var(--ui-icon-mask);
  mask-image:var(--ui-icon-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.ui-assets-enabled .tool-title.has-ui-icon{
  --ui-icon-size:1.05rem;
}

.ui-assets-enabled .ghost-tabs .has-ui-icon{
  --ui-icon-size:.95rem;
  --ui-icon-gap:.4rem;
}

.ui-assets-enabled .ghost-btn.has-ui-icon,
.ui-assets-enabled .ui-fab.has-ui-icon{
  --ui-icon-size:1.08rem;
}

.ui-assets-enabled .formation-dugout-close.has-ui-icon,
.ui-assets-enabled .roster-overlay-btn.has-ui-icon,
.ui-assets-enabled .import-side-card .has-ui-icon,
.ui-assets-enabled .formation-load-card .has-ui-icon,
.ui-assets-enabled .modal-box .has-ui-icon,
.ui-assets-enabled .modal__card .has-ui-icon{
  --ui-icon-size:.95rem;
}

.ui-assets-enabled .ui-icon-only{
  font-size:0;
  line-height:0;
}

.ui-assets-enabled .ui-fab.has-ui-icon,
.ui-assets-enabled .ghost-btn.has-ui-icon.ui-icon-only,
.ui-assets-enabled .roster-overlay-btn.ui-icon-only,
.ui-assets-enabled .modal__close.ui-icon-only,
.ui-assets-enabled .formation-load-close.ui-icon-only{
  justify-content:center;
  gap:0;
}

.ui-assets-enabled .panel-art-shell{
  position:relative;
  isolation:isolate;
  background-image:var(--ui-panel-art-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

.ui-assets-enabled .tool-overlay.panel-art-shell{
  position:fixed;
}

.ui-assets-enabled .ghost-dock.panel-art-shell,
.ui-assets-enabled .formation-dugout.panel-art-shell{
  position:fixed;
}

.ui-assets-enabled .panel-art-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background-image:var(--asset-panel-texture), var(--asset-panel-frame);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.55;
  z-index:0;
}

.ui-assets-enabled .panel-art-shell > *:not(.formation-dugout-resize):not(.tool-overlay__resize){
  position:relative;
  z-index:1;
}



#topbar.panel,
.pal,
#wrap,
#playbookPanel{
  width:min(1200px, 96vw);
  margin-inline:auto;
  box-sizing:border-box;
}

/* App mode selector (Formation / Roster / Plays / Game) */
#modeBar{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:8px 0 0;
  display:flex;
  justify-content:center;
}

.app-mode-bar{
  margin:8px 0 4px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  justify-content:center;
}

.app-mode-btn{
  flex:0 0 auto;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--ink);
  font-size:.85rem;
  cursor:pointer;
}

.app-mode-btn.active{
  border-color:var(--mode-accent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--mode-accent) 92%, #ffffff 8%), var(--mode-accent));
  color:#071016;
  box-shadow:0 8px 18px color-mix(in srgb, var(--mode-accent) 26%, transparent);
}

body[data-app-mode="formation"] #modeFormation.app-mode-btn.active,
#modeFormation.app-mode-btn.active{
  --mode-accent:var(--mode-formation);
}

body[data-app-mode="playbook"] #modePlaybook.app-mode-btn.active{
  --mode-accent:var(--mode-playbook);
}

.app-mode-version{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,14,19,.62);
  color:rgba(232,238,240,.76);
  font:700 10px/1 system-ui,sans-serif;
  letter-spacing:.03em;
  white-space:nowrap;
}

/* Roster panel */
.roster-panel{
  width: 100%;
  margin-top:8px;
  padding:12px;
  border-radius:12px;
  background:var(--panel);
  box-shadow:var(--shadow-1);
}

.playbook-panel{
  width:100%;
  margin-top:8px;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(219,199,164,.16);
  background:linear-gradient(180deg, rgba(18,24,32,.97), rgba(11,16,22,.95));
  box-shadow:var(--shadow-1);
}

.playbook-panel[hidden]{
  display:none !important;
}

.playbook-panel__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}

.playbook-panel__copy{
  display:grid;
  gap:6px;
}

.playbook-panel__eyebrow{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.playbook-panel__copy h2{
  margin:0;
  font-size:1.15rem;
}

.playbook-panel__summary,
.playbook-panel__meta{
  margin:0;
  color:var(--muted);
}

.playbook-panel__status{
  min-width:220px;
  display:grid;
  gap:8px;
  justify-items:end;
  text-align:right;
}

.playbook-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(77,163,255,.28);
  background:rgba(77,163,255,.12);
  color:#d9edff;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.playbook-shells{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.playbook-shell{
  min-height:148px;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.playbook-shell__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.playbook-shell__head--overlay{
  align-items:flex-start;
}

.playbook-shell__head-copy{
  min-width:0;
  display:grid;
  gap:6px;
}

.playbook-shell__head h3{
  margin:0;
  font-size:1rem;
}

.playbook-shell__tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.playbook-shell__summary{
  margin:0;
  color:var(--muted);
}

.playbook-shell__meta{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.85rem;
}

.playbook-shell__link{
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.76rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.playbook-shell__footer{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

.playbook-controls{
  display:grid;
  gap:12px;
  margin-bottom:12px;
}

.playbook-control-group{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.playbook-control-group--selection{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.playbook-tool-btn{
  min-height:38px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  cursor:pointer;
}

.sketch-mode-toggle{
  width:100%;
  justify-content:center;
}

.playbook-tool-btn.is-active,
.sketch-mode-toggle.is-active{
  border-color:rgba(74,222,128,.96);
  background:rgba(34,197,94,.14);
  box-shadow:0 0 0 1px rgba(74,222,128,.2) inset;
  color:#fff;
}

.playbook-setting-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.playbook-setting{
  display:grid;
  gap:6px;
  font-size:.84rem;
  color:var(--muted);
}

.playbook-setting input[type="color"],
.playbook-setting input[type="number"],
.playbook-setting input[type="text"],
.playbook-setting input[type="range"],
.playbook-setting select,
.playbook-setting textarea{
  width:100%;
  min-width:0;
  max-width:100%;
}

.playbook-setting--toggle{
  align-items:center;
  grid-template-columns:auto 1fr;
  gap:8px;
}

.playbook-setting--toggle input{
  margin:0;
}

.playbook-setting__value{
  min-height:34px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--ink);
  line-height:1.35;
}

.playbook-action-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.playbook-action-row--compact{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.playbook-sequence-controls{
  display:grid;
  gap:10px;
}

.playbook-sequence-controls__row{
  display:grid;
  gap:8px;
}

.playbook-sequence-controls__row--playback{
  grid-template-columns:repeat(5, minmax(0, 1fr));
}

.playbook-sequence-controls__row--destructive{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.playbook-sequence-controls__status{
  margin-top:0;
}

.playbook-sequence-transport-btn{
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  min-height:48px;
  padding:7px 8px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
}

.playbook-disclosure{
  display:grid;
  gap:10px;
}

.playbook-disclosure__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  list-style:none;
  cursor:pointer;
}

.playbook-disclosure__summary::-webkit-details-marker{
  display:none;
}

.playbook-disclosure__summary::after{
  content:'+';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font:700 .9rem/1 system-ui,sans-serif;
}

.playbook-disclosure[open] .playbook-disclosure__summary::after{
  content:'-';
}

.playbook-disclosure__panel{
  display:grid;
  gap:12px;
}

.playbook-disclosure--timeline .playbook-disclosure__panel{
  gap:0;
}

.playbook-disclosure--timeline .playbook-sequence-list{
  margin-top:0;
}

.playbook-option-group{
  display:grid;
  gap:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.playbook-option-group__title{
  margin:0;
  font:700 .72rem/1 system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#aeb8c2;
}

.playbook-action-stage{
  display:grid;
  gap:4px;
  margin-top:12px;
}

.playbook-action-flow{
  display:grid;
  gap:10px;
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.playbook-action-flow h4{
  margin:0;
  font-size:.95rem;
  color:#fff;
}

.playbook-action-outcomes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.playbook-action-subflow{
  display:grid;
  gap:8px;
}

.playbook-action-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.playbook-sequence-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.playbook-sequence-card{
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.playbook-sequence-card.is-active{
  border-color:rgba(77,163,255,.34);
  background:rgba(77,163,255,.08);
}

.playbook-sequence-card.is-current{
  box-shadow:inset 0 0 0 1px rgba(255, 204, 77, .18);
}

.playbook-sequence-card__header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  align-items:start;
}

.playbook-sequence-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}

.playbook-sequence-card__actions button{
  min-height:36px;
  padding:0 10px;
}

.playbook-sequence-strip{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--ink);
  cursor:pointer;
  font-weight:600;
}

.playbook-sequence-strip.is-active{
  border-color:rgba(255, 204, 77, .88);
  background:rgba(255, 204, 77, .12);
}

.playbook-sequence-strip:disabled{
  opacity:.58;
  cursor:not-allowed;
}

.playbook-action-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  cursor:pointer;
}

.playbook-action-item.is-active{
  border-color:rgba(255, 204, 77, .9);
  background:rgba(255, 204, 77, .14);
}

.playbook-sequence-item{
  width:100%;
  display:grid;
  gap:4px;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  cursor:pointer;
}

.playbook-sequence-card.is-draft .playbook-sequence-item{
  background:rgba(255, 204, 77, .06);
}

.playbook-sequence-item.is-active{
  border-color:rgba(77, 163, 255, .92);
  background:rgba(77, 163, 255, .16);
}

.playbook-sequence-item.is-current{
  box-shadow:inset 0 0 0 1px rgba(255, 204, 77, .22);
}

.playbook-sequence-item:disabled{
  opacity:.58;
  cursor:not-allowed;
}

.playbook-sequence-item__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:700;
}

.playbook-sequence-item__meta{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.35;
}

.playbook-action-detail{
  display:grid;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.playbook-action-detail h4{
  margin:0;
  font-size:.95rem;
  color:#fff;
}

.playbook-action-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:11945;
}

.playbook-action-overlay[hidden]{
  display:none !important;
}

body:not([data-app-mode="playbook"]) .playbook-action-overlay{
  display:none !important;
}

.playbook-action-radial{
  position:fixed;
  left:0;
  top:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.playbook-action-radial[hidden]{
  display:none !important;
}

.playbook-action-radial__buttons{
  position:absolute;
  inset:0;
}

.playbook-action-radial__button{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--playbook-radial-button-size, 48px);
  height:var(--playbook-radial-button-size, 48px);
  display:grid;
  place-items:center;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 42%, rgba(0,0,0,.18) 100%),
    radial-gradient(circle at 50% 22%, rgba(255,209,102,.18), transparent 46%),
    rgba(9,14,21,.96);
  color:#f7fbff;
  font-size:.58rem;
  font-weight:700;
  line-height:1.08;
  text-align:center;
  letter-spacing:.04em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -4px 8px rgba(0,0,0,.34),
    0 12px 26px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  pointer-events:auto;
  cursor:pointer;
  transform:translate(calc(-50% + var(--playbook-radial-x, 0px)), calc(-50% + var(--playbook-radial-y, 0px)));
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  isolation:isolate;
}

.playbook-action-radial__button::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  pointer-events:none;
  z-index:0;
}

.playbook-action-radial__button:hover,
.playbook-action-radial__button:focus-visible{
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 42%, rgba(0,0,0,.2) 100%),
    radial-gradient(circle at 50% 22%, rgba(255,209,102,.26), transparent 48%),
    rgba(17,24,36,.98);
  border-color:rgba(255,209,102,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -4px 8px rgba(0,0,0,.34),
    0 14px 28px rgba(0,0,0,.34),
    0 0 0 2px rgba(255,209,102,.18);
}

.playbook-action-radial__button:active{
  transform:translate(calc(-50% + var(--playbook-radial-x, 0px)), calc(-50% + var(--playbook-radial-y, 0px))) scale(.96);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.42),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 8px 18px rgba(0,0,0,.28);
}

.playbook-action-dock{
  position:fixed;
  left:50%;
  top:auto;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 8px + var(--ui-hidden-bottom-clearance, 0px));
  width:min(560px, calc(100vw - 20px));
  max-width:calc(100vw - 20px);
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:start;
  gap:5px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(219,199,164,.18);
  background:rgba(10,16,22,.94);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
  transform:translateX(-50%);
  pointer-events:none;
  overflow:clip;
  z-index:11945;
}

body.ui-assets-enabled .playbook-action-dock.panel-art-shell{
  position:fixed;
}

.playbook-action-dock > *{
  pointer-events:none;
}

.playbook-action-dock button,
.playbook-action-dock [role="group"]{
  pointer-events:auto;
}

.playbook-action-dock[hidden]{
  display:none !important;
}

.playbook-action-dock__head{
  display:grid;
  gap:2px;
}

.playbook-action-dock__title{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.playbook-action-dock__stage{
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.playbook-action-dock__body{
  margin:0;
  min-height:0;
  font-size:.82rem;
  line-height:1.22;
  color:rgba(232,239,247,.86);
}

.playbook-action-dock__context{
  margin:0;
  min-height:0;
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  line-height:1.25;
}

.playbook-action-dock .playbook-action-row{
  gap:5px;
}

.playbook-action-dock .playbook-action-row--compact{
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
}

.playbook-action-dock button{
  min-height:34px;
  padding:6px 9px;
}

.playbook-action-outcomes--dock{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px;
}

.playbook-throw-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.playbook-quickbar{
  position:fixed;
  left:50%;
  top:max(76px, calc(env(safe-area-inset-top, 0px) + 68px));
  transform:translateX(-50%);
  width:fit-content;
  min-width:min(760px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  display:grid;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(219,199,164,.18);
  background:rgba(10,16,22,.92);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  backdrop-filter:blur(10px);
  z-index:11940;
}

.playbook-quickbar[hidden]{
  display:none !important;
}

body:not([data-app-mode="playbook"]) .playbook-quickbar,
body.ui-hidden .playbook-quickbar{
  display:none !important;
}

.playbook-quickbar__row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.playbook-quickbar__row--tools{
  justify-content:center;
  flex-wrap:wrap;
}

.playbook-quickbar__row--actions{
  justify-content:center;
  flex-wrap:wrap;
}

.playbook-tool-btn--compact,
.playbook-quickbar__action{
  min-height:34px;
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
}

.playbook-tool-btn--compact{
  flex:0 0 auto;
}

.overlay-sketch-stack{
  display:grid;
  gap:10px;
}

.overlay-sketch-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.overlay-sketch-row .playbook-tool-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.overlay-sketch-row .sketch-mode-toggle{
  width:auto;
}

.overlay-sketch-row--tools{
  align-items:stretch;
}

.overlay-sketch-row--controls{
  gap:10px;
  align-items:stretch;
}

.overlay-sketch-row--controls > *{
  flex:0 0 auto;
}

.overlay-sketch-chip{
  border-radius:999px;
  padding-inline:14px;
}

.overlay-sketch-chip.is-active{
  border-color:rgba(74,222,128,.96);
  background:rgba(34,197,94,.14);
  box-shadow:0 0 0 1px rgba(74,222,128,.2) inset;
  color:#fff;
}

.overlay-sketch-panels{
  display:grid;
  gap:10px;
}

.overlay-sketch-panels[hidden],
.overlay-sketch-row--panel[hidden]{
  display:none !important;
}

.overlay-sketch-row--panel{
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}

.overlay-sketch-control{
  min-width:120px;
  display:grid;
  gap:6px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.82rem;
}

.overlay-sketch-control span{
  font-weight:700;
  color:var(--ink);
}

.overlay-sketch-control input[type="color"],
.overlay-sketch-control input[type="range"],
.overlay-sketch-control select{
  width:100%;
  min-width:0;
  margin-top:0;
}

.overlay-sketch-control--scope{
  min-width:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px 4px 14px;
  border-radius:999px;
  white-space:nowrap;
}

.overlay-sketch-control--scope-chip{
  min-height:42px;
}

.overlay-sketch-control--scope-chip span{
  font-size:.74rem;
  letter-spacing:.03em;
}

.overlay-sketch-control--scope select{
  min-inline-size:96px;
  max-inline-size:116px;
  block-size:32px;
  padding:0 28px 0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(13,18,24,.9);
  color:#edf3f7;
  font:700 .72rem/1 system-ui,sans-serif;
}

.overlay-sketch-control--color{
  min-width:120px;
}

.overlay-sketch-control--color input[type="color"]{
  inline-size:52px;
  block-size:34px;
  padding:0;
}

.overlay-sketch-control--range{
  min-width:180px;
  flex:1 1 220px;
}

.overlay-sketch-control--toggle{
  min-width:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.overlay-sketch-control--toggle input{
  margin:0;
}

.playbook-quickbar__status{
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

#toolPlaybookActions,
#toolPlaybookSequence{
  display:none;
}

body[data-app-mode="playbook"] #toolPlaybookActions,
body[data-app-mode="playbook"] #toolPlaybookSequence{
  display:block !important;
}

[data-mode-scope="playbook"]{
  display:none;
}

body[data-app-mode="playbook"] [data-mode-scope="formation"]{
  display:none !important;
}

body[data-app-mode="playbook"] [data-mode-scope="playbook"]{
  display:block;
}

@media (max-width: 820px){
  #playbookPanel{
    width:min(var(--content-max), calc(100vw - 16px));
  }

  .playbook-panel__header{
    flex-direction:column;
  }

  .playbook-panel__status{
    min-width:0;
    width:100%;
    justify-items:start;
    text-align:left;
  }

  .playbook-shells{
    grid-template-columns:1fr;
  }

  .playbook-control-group,
  .playbook-action-outcomes,
  .playbook-setting-grid,
  .playbook-action-row,
  .playbook-throw-meta{
    grid-template-columns:1fr;
  }

  .playbook-control-group--selection{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .playbook-sequence-card__header{
    grid-template-columns:1fr;
  }

  .playbook-sequence-card__actions{
    justify-content:stretch;
  }

  .playbook-control-group{
    display:grid;
  }

  .playbook-shell{
    min-height:0;
    padding:12px;
  }

  .playbook-shell__head{
    align-items:flex-start;
  }

  .playbook-shell__head-actions{
    width:100%;
    justify-content:space-between;
  }

  .playbook-sequence-controls__row--playback{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:6px;
  }

  .playbook-sequence-controls__row--destructive{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .playbook-sequence-transport-btn{
    min-height:40px;
    padding:6px 4px;
    font-size:.72rem;
    gap:3px;
  }

  .playbook-sequence-controls__row--playback .has-ui-icon::before{
    inline-size:14px;
    block-size:14px;
  }

  .playbook-disclosure--timeline .playbook-disclosure__panel{
    max-block-size:min(40vh, 320px);
    overflow:auto;
  }

  .playbook-sequence-card{
    padding:8px;
  }

  .playbook-sequence-item{
    padding:8px 10px;
  }

  .playbook-sequence-card__actions button{
    min-height:32px;
    padding:0 8px;
    font-size:.78rem;
  }

  .playbook-quickbar{
    top:max(66px, calc(env(safe-area-inset-top, 0px) + 58px));
    width:calc(100vw - 16px);
    min-width:0;
    padding:8px 10px;
  }

  .playbook-quickbar__row{
    gap:6px;
  }

  .playbook-quickbar__row--actions{
    justify-content:flex-start;
  }

  .playbook-quickbar__status{
    display:none;
  }

  .playbook-action-dock{
    left:8px;
    right:8px;
    top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 6px);
    width:auto;
    max-width:none;
    min-height:0;
    gap:5px;
    padding:9px 10px;
    transform:none;
    border-radius:14px;
  }

  .playbook-action-dock__stage{
    font-size:.95rem;
  }

  .playbook-action-dock__body{
    font-size:.82rem;
  }

  .playbook-action-dock__context{
    font-size:.72rem;
  }

  .playbook-action-outcomes--dock{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .playbook-action-dock .playbook-action-row--compact{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .playbook-action-dock button{
    min-height:40px;
    padding:8px 9px;
  }

  .playbook-action-radial__button{
    font-size:.66rem;
  }
}

.roster-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
}

.roster-header h2{
  margin:0;
  font-size:1.1rem;
}

.roster-meta{
  margin:0;
  font-size:.85rem;
  color:var(--muted);
}

.roster-table{
  width:100%;
  border-collapse:collapse;
  font-size:.85rem;
}

.roster-table th,
.roster-table td{
  padding:4px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  vertical-align:top;
}

/* ---- Staff Controls ---- */

.roster-staff{
  padding: 0.5rem 0 1rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
}

.staff-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.9rem;
}

.staff-row label{
  flex: 1;
  opacity: 0.8;
}

.staff-row input[type="number"]{
  width: 70px;
}

.staff-row input[type="checkbox"]{
  transform: scale(1.2);
}



.roster-table th{
  font-weight:600;
  color:var(--muted);
}

.roster-empty{
  text-align:center;
  padding:12px 6px;
  color:var(--muted);
}


/* Alias used by JS in roster header */
.roster-sub{
  margin:0;
  font-size:.85rem;
  color:var(--muted);
}

.staff-note{
  font-weight:400;
  font-size:.8em;
  opacity:.85;
  margin-left:6px;
}

/* Totals grid */
.roster-totals{
  margin-top:10px;
  padding:10px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 10px;
}
.roster-totals > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.9rem;
}
.roster-totals span{
  color:var(--muted);
}


.roster-overlay-controls select,
.roster-overlay-controls input[type="number"]{
  width:80px;
}

.roster-overlay-controls input[type="checkbox"]{
  transform:scale(1.15);
  transform-origin:left center;
}

/* ---- Bench (Dugout) ---- */

.bench-container{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
  padding:8px;
  margin:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  min-height:44px;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}

.bench-container::before{
  content:none;
  display:none;
}

.bench-container .piece{
  position:relative;
  align-self:flex-start;
  width:calc(var(--cell) - 8px);
  height:calc(var(--cell) - 8px);
  min-width:calc(var(--cell) - 8px);
  min-height:calc(var(--cell) - 8px);
  flex:0 0 auto;
}

.bench-container.drop-hot{
  border-color:rgba(77,163,255,.85);
  box-shadow:0 0 0 2px rgba(77,163,255,.20) inset;
}

.bench-store{
  display:none !important;
}

.formation-dugout{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:14000;
  width:min(380px, 30vw);
  min-width:340px;
  min-height:220px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(9,14,19,.92);
  box-shadow:var(--shadow-2);
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  overscroll-behavior:contain;
}

.formation-dugout[hidden]{
  display:none !important;
}

body.ui-hidden .formation-dugout{
  bottom:calc(96px + env(safe-area-inset-bottom, 0px));
}

.formation-dugout-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:grab;
  touch-action:none;
}

.formation-dugout-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.formation-dugout.is-dragging .formation-dugout-head{
  cursor:grabbing;
}

.formation-dugout.is-hit-test-transparent{
  pointer-events:none;
}

.formation-dugout.is-resizing{
  user-select:none;
}

.formation-dugout-resize{
  position:absolute;
  left:auto;
  right:8px;
  bottom:8px;
  width:22px;
  height:22px;
  margin:0;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.18));
  cursor:nwse-resize;
  touch-action:none;
  z-index:4;
}

.formation-dugout-resize::before{
  content:"";
  position:absolute;
  inset:4px;
  border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
  border-radius:0 0 3px 0;
}

.formation-dugout-resize:focus-visible{
  outline:2px solid rgba(77,163,255,.9);
  outline-offset:1px;
}

.formation-dugout-counts{
  font-size:.72rem;
  letter-spacing:.02em;
  color:rgba(227,236,247,.86);
  padding:0 2px;
}

.dugout-zones{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

.dugout-zone{
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:0;
  flex:0 0 auto;
  overflow:hidden;
}

.dugout-zone-label{
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(220,232,245,.58);
  margin:0;
}

.dugout-zone .bench-container{
  width:100%;
  max-width:100%;
  min-height:44px;
  max-height:none;
}

.dugout-zone-reserves{
  flex:0 0 auto;
}

.dugout-zone-reserves .bench-container{
  flex:0 0 auto;
  min-height:96px;
  max-height:min(44dvh, 360px);
}

.dugout-zone-ko,
.dugout-zone-cas{
  min-height:72px;
}

.dugout-zone-ko .bench-container,
.dugout-zone-cas .bench-container{
  min-height:44px;
  max-height:min(20dvh, 140px);
}
.formation-dugout-head strong{
  font-size:.85rem;
  letter-spacing:.02em;
}

.formation-dugout-close{
  margin-top:0;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
}

.formation-dugout.is-compact-sheet{
  left:8px;
  right:8px;
  top:auto;
  bottom:8px;
  width:auto;
  min-width:0;
  max-width:none;
  max-height:min(78dvh, 620px);
}

body.ui-hidden .formation-dugout.is-compact-sheet{
  bottom:calc(102px + env(safe-area-inset-bottom, 0px));
  top:auto;
}

@media (max-width:720px){
  .formation-dugout{
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    min-width:0;
    max-width:none;
    min-height:180px;
    max-height:min(82dvh, 620px);
    border-radius:10px;
  }
  .formation-dugout.is-undocked,
  .formation-dugout.is-resized{
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  }
  body.ui-hidden .formation-dugout{
    bottom:calc(102px + env(safe-area-inset-bottom, 0px));
  }
  .bench-container .piece{
    width:calc(var(--cell) + 4px);
    height:calc(var(--cell) + 4px);
    font-size:.72em;
    border-radius:12px;
  }
  #bench-container{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-content:flex-start;
    gap:6px 8px;
    min-height:calc((var(--cell) + 4px) * 4 + 38px);
    max-height:calc((var(--cell) + 4px) * 4 + 38px);
    overflow-x:auto;
    overflow-y:hidden;
  }
  #bench-ko,
  #bench-cas{
    min-height:42px;
    max-height:108px;
  }
  .formation-dugout-counts{
    font-size:.68rem;
  }
  .dugout-zone{
    padding:5px;
  }
  .dugout-zone-label{
    margin-bottom:3px;
  }
  .formation-dugout-resize{
    width:22px;
    height:22px;
  }
}

@media (max-width:720px) and (pointer:fine){
  #bench-container{
    flex-direction:row;
    flex-wrap:wrap;
    align-content:flex-start;
    min-height:96px;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
  }
}

@media (max-width:900px) and (orientation:landscape){
  .formation-dugout{
    left:8px;
    right:8px;
    top:auto;
    bottom:8px;
    width:auto;
    min-width:0;
    max-width:none;
    max-height:min(70dvh, 520px);
  }
  body.ui-hidden .formation-dugout{
    bottom:calc(102px + env(safe-area-inset-bottom, 0px));
    top:auto;
  }
}

@media (max-width:1024px) and (pointer:coarse){
  .formation-dugout{
    left:8px;
    right:8px;
    top:auto;
    bottom:8px;
    width:auto;
    min-width:0;
    max-width:none;
    max-height:min(78dvh, 620px);
  }
  body.ui-hidden .formation-dugout{
    bottom:calc(102px + env(safe-area-inset-bottom, 0px));
    top:auto;
  }
}
/* Controls inside roster overlay (UI hidden) */
.roster-overlay-controls{
  display:grid;
  grid-template-columns: 1fr 100px;
  gap:6px 10px;
  margin:0 0 10px 0;
  font-size:.85rem;
}

.roster-overlay-controls select,
.roster-overlay-controls input[type="number"]{
  width:100px;
}

.roster-overlay-controls input[type="checkbox"]{
  transform:scale(1.15);
  transform-origin:left center;
}


/* -----------------------------
   Header bar
----------------------------- */

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-strong, #fff);
}




#appHeader{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  margin:10px 0 8px;
  border-radius:12px;
  width:100%;
  max-width:100%;
  min-width:0;
}


#infoBtn.ui-fab.info{
  width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center;
  font-weight:700; background:var(--panel-2); color:#fff;
  border:2px solid var(--header-accent, rgba(255,255,255,.15));     
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}


#infoBtn.ui-fab.info:focus-visible{ outline:2px solid var(--focus) }

.leftControls{ display:flex; align-items:center; gap:8px }

.leftControls{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
.leftControls .ui-fab{ margin:0 }          
.ui-fab{ flex:0 0 auto }                   

.brand{ display:flex; align-items:center; gap:12px; justify-content:center; min-width:0 }
.brand .logo{
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.brand__title{
  display:grid;
  gap:3px;
  margin:0;
  min-width:0;
  line-height:1;
}
.brand__eyebrow{
  font:700 .72rem/1 system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d3c29b;
}
.brand__name{
  display:block;
  font:800 clamp(1.25rem, 1rem + 1.2vw, 1.9rem)/.95 system-ui,sans-serif;
  letter-spacing:-.025em;
  color:#f5f8fa;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.auth{ display:flex; align-items:center; gap:10px; justify-self:end }
.auth .badge{ font-size:.875rem; opacity:.8; padding:2px 6px; border:1px solid var(--border); border-radius:6px }



#toggleUI.ui-fab,
#pitchLockBtn.ui-fab,
#modeQuickToggleBtn.ui-fab,
#topSideToggle.ui-fab{
  position:static; width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--panel-2); color:#fff;
  border:2px solid var(--header-accent, rgba(255,255,255,.15));     
}

#modeQuickToggleBtn.ui-fab,
#topSideToggle.ui-fab{
  width:36px;
  min-width:36px;
  padding:0;
  border-radius:50%;
}

#topSideToggle.ui-fab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:var(--g-br, 999px);
  font:700 11px/1 system-ui,sans-serif;
  white-space:nowrap;
}

.ui-assets-enabled #modeQuickToggleBtn.ui-fab.has-ui-icon{
  --ui-icon-size:1rem;
}

.ui-assets-enabled #modeQuickToggleBtn.ui-fab.has-ui-icon::before{
  opacity:1;
}

#pitchLockBtn.ui-fab.is-active{
  background:var(--header-accent, rgba(255,255,255,.24));
  border-color:var(--header-accent, rgba(255,255,255,.5));
  color:#081016;
  box-shadow:0 0 0 2px rgba(255,255,255,.16);
}

#modeQuickToggleBtn.ui-fab.is-active{
  background:color-mix(in srgb, var(--mode-accent) 82%, rgba(255,255,255,.24));
  border-color:var(--mode-accent);
  color:#081016;
  box-shadow:0 0 0 2px rgba(255,255,255,.16);
}


#toggleUI.ui-fab.is-floating{
  position:fixed;
  top: max(12px, env(safe-area-inset-top,0px) + 8px);
  right: calc(max(12px, (100vw - var(--content-max)) / 2 + 12px));
  z-index:12000;
  opacity:.28;
  transition:opacity var(--fast) linear;
}
#toggleUI.ui-fab.is-floating:hover,
#toggleUI.ui-fab.is-floating:focus-visible{ opacity:.85 }


@media (max-width: 720px){
  #toggleUI.ui-fab.is-floating{
    right: max(12px, env(safe-area-inset-right,0px) + 8px);
  }
}


body.ui-hidden #toggleUI.ui-fab.is-floating{
  right: max(12px, env(safe-area-inset-right,0px) + 8px);
}


body.modeO{ --header-accent: var(--ovO, var(--teamO)); }
body.modeD{ --header-accent: var(--ovD, var(--teamD)); }


/* -----------------------------
   Controls
----------------------------- */
.mode, .pal{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
select,button{
  background:#141a21; color:var(--ink);
  border-radius:5px; margin-top:5px; padding:2px 4px; border:0;
}
.logo-controls{
  display:grid;
  gap:8px;
}

.pitch-texture-control{
  display:grid;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

.pitch-texture-control select{
  width:100%;
  min-height:36px;
  margin-top:0;
}

.logo-controls .logo-row-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}

.logo-controls .logo-mode,
.logo-controls .logo-size,
.logo-controls .logo-opacity{
  display:grid;
  gap:4px;
  min-width:0;
}

.logo-controls .slider-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.logo-controls .slider-value{
  color:var(--muted);
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
}

.logo-controls .logo-mode select,
.logo-controls .logo-size input[type="range"],
.logo-controls .logo-opacity input[type="range"]{
  width:100%;
  min-width:0;
  margin-top:0;
}

.logo-controls .logo-fit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  white-space:nowrap;
}

.logo-controls .logo-fit input{
  margin:0;
}


.tool-group button:active,
.tool-group button.pressed,
.tool-overlay button:active,
.tool-overlay button.pressed{
  transform: translateY(1px);
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.04);
}



.tool-group button,
.tool-overlay button{
  background:linear-gradient(#1a222b,#141a21);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:8px 8px;
  font:600 13px/1 system-ui,sans-serif;
}
.tool-group button:hover,
.tool-overlay button:hover{ filter:saturate(1.05) brightness(1.05) }
.tool-group button:focus-visible,
.tool-overlay button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }

.tool-overlay .playbook-tool-btn.is-active,
.tool-overlay .sketch-mode-toggle.is-active{
  border-color:rgba(74,222,128,.96);
  background:linear-gradient(rgba(20,56,31,.96), rgba(12,37,21,.98));
  box-shadow:0 0 0 1px rgba(74,222,128,.34) inset, 0 0 0 1px rgba(74,222,128,.12);
  color:#fff;
}


#clear, #clearSketch{
  background:linear-gradient(#2a1416,#1a0f11);
  border-color:rgba(255,59,48,.35);
  color:#ffd6d6;
}
#btnResetDefaults{
  background:linear-gradient(#b22d2d,#8f1f1f);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}
#btnSave, #exportDownload{
  background:linear-gradient(#1e2a36,#161d24);
  border-color:rgba(96,170,255,.35);
}
#rotate, #btnCoords{
  background:linear-gradient(#1f2530,#151a22);
}


.tool-group button.active,
.tool-overlay button.active{
  box-shadow:0 0 0 3px rgba(255,59,48,.18);
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.player-visual-setting{
  display:grid;
  gap:4px;
  margin-top:6px;
  font-size:.82rem;
  color:var(--muted);
}

.player-visual-setting select{
  margin-top:0;
}

.tool-title{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:linear-gradient(#0f1a20,#0f1a20);
  z-index:1;
}
.tool-group{
  min-width:0;
}
.tool-group--trigger{
  backdrop-filter:none;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.tool-groups{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(132px, 1fr);
  grid-template-columns:none;
  gap:8px;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  padding-bottom:2px;
}
.tool-groups::-webkit-scrollbar{ display:none; }
.tool-group--trigger .tool-title{
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  box-shadow:var(--shadow-1);
  cursor:pointer;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tool-overlay-trigger{
  background:linear-gradient(180deg, rgba(16,24,32,.98), rgba(12,18,25,.95));
}
.tool-overlay-trigger::after{
  content:"\25B8";
  font-size:11px;
  opacity:.84;
}
.tool-overlay-trigger[aria-expanded="true"]::after{
  content:"\25BE";
}
.tool-overlay-layer{
  position:fixed;
  inset:0;
  z-index:12500;
  pointer-events:none;
}
.tool-overlay-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(5,8,12,.06), rgba(5,8,12,.18));
  opacity:.85;
  pointer-events:none;
}
.tool-overlay-layer[hidden]{
  display:none !important;
}
.tool-overlay{
  --tool-overlay-width:380px;
  position:fixed;
  left:12px;
  top:12px;
  width:min(var(--tool-overlay-width), calc(100vw - 24px));
  min-width:min(320px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:min(70vh, calc(100vh - 24px));
  display:flex;
  flex-direction:column;
  min-height:0;
  border:1px solid rgba(219,199,164,.2);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(25,32,40,.995), rgba(16,22,29,.985));
  box-shadow:0 28px 72px rgba(0,0,0,.62), 0 10px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter:blur(10px) saturate(1.08);
  overflow:hidden;
  pointer-events:auto;
}
.tool-overlay[hidden]{
  display:none !important;
}
.tool-overlay__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tool-overlay__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.tool-overlay__head--draggable{
  cursor:grab;
  touch-action:none;
}
.tool-overlay.is-dragging .tool-overlay__head--draggable{
  cursor:grabbing;
}
.tool-overlay.is-detached-panel .tool-overlay__head--draggable{
  cursor:grab;
}
.tool-overlay__title{
  margin:0;
  min-width:0;
  font:700 .96rem/1.1 system-ui,sans-serif;
  letter-spacing:.04em;
  color:#eef3f7;
}
.tool-overlay__body{
  display:grid;
  flex:1 1 auto;
  min-height:0;
  gap:12px;
  padding:14px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
}
.tool-overlay__close{
  justify-content:center;
  width:40px;
  min-width:40px;
  padding:0;
  position:relative;
  z-index:2;
}
.tool-overlay__pin{
  justify-content:center;
  width:40px;
  min-width:40px;
  padding:0;
}
.tool-overlay__reset{
  justify-content:center;
  width:40px;
  min-width:40px;
  padding:0;
}
.tool-overlay__reset:disabled{
  opacity:.42;
  cursor:default;
  filter:saturate(.6);
}
.tool-overlay.is-pinned .tool-overlay__pin{
  box-shadow:0 0 0 2px rgba(219,199,164,.28) inset;
  background:rgba(219,199,164,.12);
}
.tool-overlay.is-resizing{
  user-select:none;
  -webkit-user-select:none;
}
.tool-overlay__resize{
  position:absolute;
  left:auto;
  right:8px;
  bottom:8px;
  width:22px;
  height:22px;
  margin:0;
  border:0;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.18));
  cursor:ns-resize;
  touch-action:none;
  z-index:4;
  opacity:.9;
}
.tool-overlay__resize::before,
.tool-overlay__resize::after{
  content:"";
  position:absolute;
  border-radius:0 0 3px 0;
}
.tool-overlay__resize::before{
  inset:4px;
  border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
}
.tool-overlay__resize::after{
  display:none;
}
.tool-overlay.is-resizing .tool-overlay__resize,
.tool-overlay__resize:hover,
.tool-overlay__resize:focus-visible{
  opacity:1;
}
.tool-overlay__resize:focus-visible{
  outline:2px solid rgba(77,163,255,.9);
  outline-offset:1px;
}
body.is-tool-overlay-resizing,
body.is-tool-overlay-resizing *{
  user-select:none;
  -webkit-user-select:none;
}
.tool-overlay--focus{
  --tool-overlay-width:430px;
}
.tool-overlay--playbook-actions{
  --tool-overlay-width:430px;
}
.tool-overlay--focus .tool-overlay__body{
  max-height:min(76vh, calc(100vh - 32px));
}

body.is-logo-focus-mode #wrap{
  box-shadow:
    0 0 0 1px rgba(219,199,164,.24),
    0 20px 54px rgba(0,0,0,.46),
    0 0 0 9999px rgba(5,8,12,.24);
}

body.is-logo-focus-mode .tool-overlay--focus{
  box-shadow:
    0 24px 64px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(219,199,164,.18);
}

body.ui-hidden .tool-overlay-layer{
  display:none !important;
}


#teamO,#teamD{ border:2px solid transparent; border-radius:6px; outline:none; box-shadow:none }
#teamO{ border-color: var(--ovO, var(--o)); }
#teamD{ border-color: var(--ovD, var(--d)); }
#teamO.active,#teamD.active{ outline:none } 



.seg-toggle{
  display:inline-grid; 
  grid-auto-flow:column; 
  gap:0;
  border-radius:12px; background:var(--panel-2);
}
.seg-toggle button{
  padding:8px 12px; background:transparent; color:#cfd8dc; border:0;
  font:600 12px/1 system-ui,sans-serif;
}
.seg-toggle button + button{ border-left:1px solid rgba(255,255,255,.1) }


body.modeO{ --seg-accent: var(--ovO, var(--teamO)); }
body.modeD{ --seg-accent: var(--ovD, var(--teamD)); }

body.modeO #modeToggle button.active{
  background:var(--ovO, var(--teamO)); color:#081016; border-color:transparent;
}
body.modeD #modeToggle button.active{
  background:var(--ovD, var(--teamD)); color:#081016; border-color:transparent;
}


.seg-toggle button.active{ outline:none; box-shadow:none }

/* Mode selector: style locked (pro-only) buttons */
#toolMode .seg-toggle button.locked {
  opacity: 0.4;
  cursor: pointer;
  position: relative;
}
#toolMode .seg-toggle button.locked::after {
  content:"\\1F512";`r`n  margin-left: 4px;`r`n  font-size: 0.8em;
}



#topbar.panel{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:12px 16px;
  align-items:end;
}

#modeGroup.side-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px 16px;
  align-items:start;
  width:100%;
  min-width:0;
}
#modeGroup .side-controls-bar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

@media (min-width:721px){
  #modeGroup .side-controls-bar{
    justify-content:flex-start;
  }

  #modeGroup #modeToggle{
    display:none !important;
  }
}

#modeGroup .side-controls-bar__text{
  display:grid;
  gap:4px;
}
#modeGroup .side-controls-kicker{
  font:700 .78rem/1 system-ui,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#d7e0e8;
}
#modeGroup .side-controls-caption{
  color:var(--muted);
  font-size:.86rem;
}
#modeGroup .side-col{
  display:grid;
  gap:10px;
  min-width:0;
  padding:10px 12px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition:opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#modeGroup > .side-col.sideO{ grid-column:1; grid-row:2; min-width:0; }
#modeGroup > .side-col.sideD{ grid-column:2; grid-row:2; min-width:0; }
#modeGroup .side-col__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#modeGroup .side-col__eyebrow{
  font:700 .76rem/1 system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#e6eef5;
}
#modeGroup .side-col__meta{
  color:var(--muted);
  font-size:.78rem;
}
#modeGroup .side-field{
  display:grid;
  gap:6px;
  min-width:0;
}
#modeGroup .side-field__label{
  color:var(--muted);
  font-size:.78rem;
  text-transform:lowercase;
}
#modeGroup .mode-radios{
  margin-bottom:4px;
  display:none;
}

#modeGroup #modeToggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:min(100%, 380px);
  min-width:0;
}

#modeGroup #modeToggle button{ width:100%; min-width:0 }
#modeGroup select{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
#modeGroup select:disabled{ opacity:.45; filter:grayscale(40%); pointer-events:none }

body.modeD #modeGroup .side-col.sideD,
body.modeO #modeGroup .side-col.sideO{
  border-color:rgba(255,255,255,.2);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 12px 26px rgba(0,0,0,.2);
}
body.modeD #modeGroup .side-col.sideD .side-col__meta,
body.modeO #modeGroup .side-col.sideO .side-col__meta{
  color:#d7e0e8;
}
body.modeD #modeGroup .side-col.sideO,
body.modeO #modeGroup .side-col.sideD{
  opacity:.72;
}

#teamO{ border:2px solid var(--ovO, var(--teamO)); border-radius:6px; box-shadow:none }
#teamD{ border:2px solid var(--ovD, var(--teamD)); border-radius:6px; box-shadow:none }




@media (max-width:720px){
  .brand{
    justify-content:flex-start;
  }

  .brand__eyebrow{
    font-size:.68rem;
  }

  .brand__name{
    font-size:clamp(1.05rem, .96rem + 2.6vw, 1.35rem);
  }

  #modeGroup.side-controls{ grid-template-columns:1fr }
  #modeGroup .side-controls-bar{
    flex-direction:column;
    align-items:stretch;
    padding-inline:0;
    padding-top:0;
  }
  #modeGroup > .side-col.sideD,
  #modeGroup > .side-col.sideO{ grid-column:1; }
  #modeGroup > .side-col.sideO{ order:1; }
  #modeGroup > .side-col.sideD{ order:2; }
  #modeGroup > .side-col.sideO,
  #modeGroup > .side-col.sideD{ grid-row:auto; }
  #modeToggle{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
    justify-self:stretch;
  }
  #modeGroup .mode-radios{ display:none }
  #modeGroup .side-col{
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  #modeGroup .side-col__meta{ display:none }
  body.modeO #modeGroup .sideD{ display:none }
  body.modeD #modeGroup .sideO{ display:none }
  #tool1{ display:block }

  .tool-grid--two,
  .tool-grid--three{
    grid-template-columns:1fr;
  }

  .tool-groups{
    gap:6px;
    grid-auto-columns:minmax(118px, 1fr);
  }
  .tool-group--trigger .tool-title{
    min-height:42px;
    padding:9px 8px;
    font-size:.8rem;
    letter-spacing:.04em;
    border-radius:10px;
    gap:.4rem;
    justify-content:center;
    text-align:center;
  }
  .tool-overlay-trigger::after{
    display:none;
  }
  .ui-assets-enabled .tool-group--trigger .tool-title.has-ui-icon{
    --ui-icon-size:.82rem;
    --ui-icon-gap:.35rem;
  }
  .tool-group button{ width:100% }
  .tool-overlay{
    left:50% !important;
    right:auto !important;
    top:var(--tool-sheet-top, 120px) !important;
    bottom:auto !important;
    width:min(420px, calc(100vw - 28px)) !important;
    height:auto !important;
    min-width:0;
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - var(--tool-sheet-top, 120px) - var(--tool-sheet-bottom, 12px) - env(safe-area-inset-bottom, 0px)) !important;
    border:2px solid rgba(219,199,164,.34);
    border-radius:18px 18px 12px 12px;
    transform:translateX(-50%);
    box-shadow:0 -12px 30px rgba(0,0,0,.28), 0 28px 72px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 1px rgba(18,24,31,.72);
  }
  .tool-overlay--focus{
    top:var(--tool-sheet-top-focus, 96px) !important;
  }
  .tool-overlay__head{
    position:sticky;
    top:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(19,26,34,.98), rgba(16,22,29,.94));
    backdrop-filter:blur(8px);
  }
  .tool-overlay__body{
    padding:12px;
    overscroll-behavior-y:contain;
  }
  .tool-overlay__reset,
  .tool-overlay__resize{
    display:none;
  }
}

@media (max-width:560px){
  .tool-groups{
    grid-auto-columns:minmax(118px, 34vw);
    grid-template-columns:none;
  }
  .tool-group--trigger .tool-title{
    min-height:40px;
    padding:8px 9px;
    font-size:.78rem;
    letter-spacing:.03em;
  }
  .ui-assets-enabled .tool-group--trigger .tool-title.has-ui-icon{
    --ui-icon-size:.78rem;
    --ui-icon-gap:.3rem;
  }
}

@media (max-width:900px){
  .tool-overlay{
    left:50% !important;
    right:auto !important;
    top:var(--tool-sheet-top, 120px) !important;
    bottom:auto !important;
    width:min(420px, calc(100vw - 28px)) !important;
    height:auto !important;
    min-width:0;
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - var(--tool-sheet-top, 120px) - var(--tool-sheet-bottom, 12px) - env(safe-area-inset-bottom, 0px)) !important;
    border-radius:18px 18px 12px 12px;
    transform:translateX(-50%);
  }
  .tool-overlay__reset,
  .tool-overlay__resize{
    display:none;
  }
}

@media (min-width:721px){
  .tool-grid--stack-mobile{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}






.bar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-10);
  padding:10px;
  width:min(var(--content-max), 100vw - 2*var(--content-pad));
  margin:0 auto;
  margin-bottom: 12px;
}





.pal{
  display:grid;
  grid-template-columns:1fr;   
  gap:12px;
  width:min(var(--content-max), 100vw - 2*var(--content-pad));
  margin-inline:auto;
  box-sizing:border-box;
}



  .pal select, .pal button{ width:100% }





@media (min-width:721px){
  .tool-groups{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(132px, 1fr);
    grid-template-columns:none;
    gap:8px;
    overflow-x:auto;
    align-items:stretch;    
  }
  .tool-group{
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .tool-group > * + *{ margin-top:10px }  
}

.tool-group.tool-group--trigger{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}

.tool-group.tool-group--trigger > * + *{
  margin-top:0;
}


  
  .tool-group{
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:10px;
    box-shadow: var(--shadow-1);
  }
  .tool-title{
    font:700 12px/1 system-ui,sans-serif;
    letter-spacing:.08em; text-transform:uppercase;
    color:#cfd8dc;
    margin:0 0 8px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }

.tool-panel-body{
  display:grid;
  gap:12px;
}

.tool-section{
  display:grid;
  gap:10px;
  padding-top:2px;
}

.tool-section + .tool-section{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.tool-section__title{
  margin:0;
  font:700 .74rem/1 system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#aeb8c2;
}

.tool-section__note{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.45;
}

.playbook-library-list[hidden]{
  display:none;
}

.playbook-library-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.playbook-library-empty{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
}

.playbook-library-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(0,0,0,.18);
}

.playbook-library-name{
  min-width:0;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.playbook-library-meta{
  margin-top:2px;
  color:var(--muted);
  font-size:.76rem;
}

.playbook-library-actions{
  display:flex;
  gap:6px;
  align-items:center;
}

.playbook-library-actions button{
  min-width:0;
  padding:.42rem .58rem;
}

.playbook-export-quality{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:var(--ink);
  font:700 .82rem/1 system-ui,sans-serif;
}

.playbook-export-quality span{
  min-width:0;
  color:#d8e1e8;
}

.playbook-export-quality select{
  min-width:0;
  max-width:112px;
  padding:5px 22px 5px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(7,12,18,.78);
  color:#fff;
  font:700 .78rem/1 system-ui,sans-serif;
}

body.playbook-animation-exporting .piece.piece-icon-mode::before{
  image-rendering:pixelated !important;
  image-rendering:crisp-edges !important;
  filter:none !important;
}

.playbook-animation-export-cover[hidden]{
  display:none !important;
}

.playbook-animation-export-cover{
  position:absolute;
  inset:0;
  z-index:95;
  display:grid;
  place-items:center;
  padding:18px;
  pointer-events:auto;
  background:rgba(5,10,14,.38);
  backdrop-filter:blur(2px);
}

.playbook-animation-export-cover__box{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(360px, calc(100vw - 40px));
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(12,18,24,.92);
  box-shadow:0 18px 42px rgba(0,0,0,.42);
  color:#fff;
  font:700 .92rem/1.25 system-ui,sans-serif;
}

.playbook-animation-export-cover__box span{
  display:block;
  margin-top:3px;
  color:#c7d2dc;
  font:600 .76rem/1.25 system-ui,sans-serif;
}

.playbook-animation-export-cover__spinner{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--header-accent, #e7c881);
  animation:playbookExportSpin .85s linear infinite;
}

@keyframes playbookExportSpin{
  to{ transform:rotate(360deg); }
}

body.playbook-animation-redraw-icons .piece.piece-icon-mode::before,
body.playbook-animation-redraw-icons .playbook-overlay{
  opacity:0 !important;
}

body.playbook-animation-overlay-capture #stage > :not(#pitch),
body.playbook-animation-overlay-capture #pitch > :not(.playbook-overlay),
body.playbook-animation-overlay-capture .piece{
  opacity:0 !important;
}

body.playbook-animation-overlay-capture #pitch{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

body.playbook-animation-overlay-capture .playbook-overlay{
  opacity:1 !important;
}

.ghost-playbook-library-sheet[hidden]{
  display:none !important;
}

.ghost-playbook-library-sheet{
  width:min(760px, calc(100vw - 22px));
  max-height:min(42vh, 360px);
  display:grid;
  gap:8px;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,25,32,.96), rgba(11,16,22,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}

.ghost-playbook-library-sheet .playbook-library-list{
  margin-top:0;
}

.ghost-playbook-library-sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#edf3f7;
  font:800 .78rem/1 system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ghost-playbook-library-sheet__close{
  min-width:0;
  padding:.42rem .62rem;
}

.tool-grid{
  display:grid;
  gap:8px;
}

.tool-grid--two{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.tool-grid--three{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.tool-grid--stack-mobile{
  grid-template-columns:1fr;
}

.tool-section--danger .tool-section__title{
  color:#f0c2c2;
}

.tool-section--danger button{
  border-color:rgba(255,88,88,.28);
}

.preset-controls{
  display:grid;
  gap:8px;
}

.preset-controls label{
  color:var(--muted);
  font-size:.82rem;
}

.preset-row{
  display:grid;
  gap:8px;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}

.preset-row button{
  width:auto;
  min-width:0;
}


#toggleUI.ui-fab:active, #infoBtn.ui-fab:active, #pitchLockBtn.ui-fab:active,
.seg-toggle button:active{ transform:translateY(1px); box-shadow: inset 0 0 0 9999px rgba(255,255,255,.04) }





/* -----------------------------
   Board + Stage
----------------------------- */
.wrap{
  position:relative;
  width:calc(100vw - 24px); height:calc(100vh - 24px); height:calc(100dvh - 24px);
  margin:0 auto; border-radius:var(--r-12); overflow:hidden;
  touch-action:none; background:var(--panel); border:1px solid var(--border);
}



.stage{ position:absolute; left:0; top:0; transform-origin:0 0 }

.interaction-lock{
  position:absolute;
  inset:0;
  z-index:60;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  border:0;
  color:#fff;
  background:rgba(8,12,16,.58);
  font:700 14px/1.35 system-ui,sans-serif;
  text-align:center;
  cursor:pointer;
}

#wrap.interaction-locked .stage,
#wrap.interaction-locked #sketch{
  pointer-events:none;
}

#wrap.interaction-locked .interaction-lock{
  display:flex;
  pointer-events:auto;
}



.wrap{                   /* added */
  touch-action:none;
  -ms-touch-action:none;
}




body.ui-hidden{
  padding:0;
  gap:0;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
}
body.ui-hidden .bar{ display:none }
body.ui-hidden #wrap{
  position:fixed; inset:0;          
  width:100vw; height:100vh;
  height:100dvh;
  max-width:none; max-height:none;  
  margin:0; border:0; border-radius:0;
  overflow:hidden;                   
}
body.ui-hidden #modeGroup,
body.ui-hidden .tool-group{ display:none }

/* In UI-hidden mode, always hide the palette; roster uses the overlay instead */
body.ui-hidden .pal{ display:none }





/* -----------------------------
   Pitch grid + axes + guides
----------------------------- */
.pitch{
  position:relative; display:grid;
  grid-template-columns:repeat(15,var(--cell));
  grid-template-rows:repeat(26,var(--cell));
  gap:var(--gap); background:var(--grid); padding:var(--gap);
  border:3px solid #e6e6e6; border-radius:var(--r-8);
  box-shadow:0 10px 30px rgba(0,0,0,35);
  z-index:5; /* ensure grid + chips sit above watermark logo */
}

.sq{
  width:var(--cell); height:var(--cell);
  background:var(--pitch); position:relative; display:flex; align-items:center; justify-content:center;
}
.coord-label{
  position:absolute;
  left:3px;
  top:2px;
  z-index:2;
  pointer-events:none;
  font:600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.01em;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  opacity:0;
}
.pitch.show-coords .coord-label{
  opacity:.9;
}
.pitch .sq[data-c="0"], .pitch .sq[data-c="1"], .pitch .sq[data-c="2"], .pitch .sq[data-c="3"],
.pitch .sq[data-c="11"], .pitch .sq[data-c="12"], .pitch .sq[data-c="13"], .pitch .sq[data-c="14"]{ background:var(--wide) }
.pitch .sq[data-r="0"]{  background:var(--end-top) }
.pitch .sq[data-r="25"]{ background:var(--end-bottom) }


.sq::after{
  content:""; width:6px; height:6px; border-radius:2px; background:var(--hash); opacity:.22;
  position:absolute; inset:0; margin:auto;
}
.sq.kick-dot::after{
  content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px; border-radius:3px;
  background:rgba(255,255,255,.78); box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 0 10px rgba(255,255,255,.35);
  pointer-events:none; display:block;
}
.sq.drag-path-cell{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32), inset 0 0 18px rgba(105,188,255,.20);
}

.sq.drag-path-rush-cell{
  box-shadow:
    inset 0 0 0 2px rgba(255,196,82,.92),
    inset 0 0 18px rgba(255,120,72,.24);
}

.sq.occupied-resolution-anchor{
  box-shadow:
    inset 0 0 0 3px rgba(255,87,87,.95),
    inset 0 0 0 999px rgba(255,87,87,.14);
}

.sq.occupied-resolution-candidate{
  box-shadow:
    inset 0 0 0 3px rgba(77,214,175,.96),
    inset 0 0 0 999px rgba(77,214,175,.16),
    0 0 12px rgba(77,214,175,.28);
}

body[data-app-mode="playbook"] .sq.playbook-push-target{
  box-shadow:inset 0 0 0 3px rgba(255,214,10,.95), inset 0 0 0 999px rgba(255,214,10,.18);
}

body[data-app-mode="playbook"] .sq.playbook-push-candidate{
  box-shadow:
    inset 0 0 0 3px rgba(255,235,59,.98),
    inset 0 0 0 999px rgba(255,90,95,.28),
    0 0 14px rgba(255,90,95,.35);
}

body[data-app-mode="playbook"] .sq.playbook-push-candidate[data-playbook-candidate-type="occupied"]{
  box-shadow:
    inset 0 0 0 3px rgba(140,220,255,.98),
    inset 0 0 0 999px rgba(90,160,255,.26),
    0 0 14px rgba(90,160,255,.36);
}

body[data-app-mode="playbook"] .sq.playbook-push-candidate::before{
  content:attr(data-playbook-candidate-index);
  position:absolute;
  top:2px;
  right:3px;
  min-width:15px;
  height:15px;
  padding:0 3px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,15,20,.92);
  color:#fff7b0;
  font:700 10px/1 ui-monospace,monospace;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:4;
}

body[data-app-mode="playbook"] .sq.playbook-push-crowd-candidate{
  box-shadow:
    inset 0 0 0 3px rgba(255,90,95,.98),
    inset 0 0 0 999px rgba(255,214,10,.22),
    0 0 14px rgba(255,90,95,.32);
}

body[data-app-mode="playbook"] .sq.playbook-push-crowd-candidate::before{
  content:attr(data-playbook-candidate-index);
  position:absolute;
  top:2px;
  right:3px;
  min-width:15px;
  height:15px;
  padding:0 3px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,15,20,.92);
  color:#ffb3b8;
  font:700 10px/1 ui-monospace,monospace;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:4;
}

body[data-app-mode="playbook"] .sq.playbook-follow-up-candidate{
  box-shadow:inset 0 0 0 3px rgba(255,209,102,.96), inset 0 0 0 999px rgba(255,209,102,.18);
}

body[data-app-mode="playbook"] .sq.playbook-range-candidate{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.5),
    inset 0 0 0 999px rgba(77,163,255,.14);
}

body[data-app-mode="playbook"] .sq.playbook-range-quick{
  box-shadow:
    inset 0 0 0 2px rgba(134,239,172,.9),
    inset 0 0 0 999px rgba(88,214,141,.22);
}

body[data-app-mode="playbook"] .sq.playbook-range-short{
  box-shadow:
    inset 0 0 0 2px rgba(253,224,71,.92),
    inset 0 0 0 999px rgba(253,224,71,.22);
}

body[data-app-mode="playbook"] .sq.playbook-range-long{
  box-shadow:
    inset 0 0 0 2px rgba(251,146,60,.94),
    inset 0 0 0 999px rgba(251,146,60,.24);
}

body[data-app-mode="playbook"] .sq.playbook-range-bomb{
  box-shadow:
    inset 0 0 0 2px rgba(248,113,113,.95),
    inset 0 0 0 999px rgba(248,113,113,.24);
}

body[data-app-mode="playbook"] .sq.playbook-range-candidate::after{
  content:attr(data-playbook-range-label);
  position:absolute;
  left:3px;
  bottom:2px;
  max-width:calc(100% - 6px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0;
  background:transparent;
  color:rgba(255,255,255,.48);
  font:700 8px/1 ui-monospace,monospace;
  letter-spacing:.01em;
  pointer-events:none;
  z-index:4;
}

body[data-app-mode="playbook"] .sq.playbook-range-selected{
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.98),
    inset 0 0 0 999px rgba(77,163,255,.16),
    0 0 12px rgba(255,255,255,.28);
}

body[data-app-mode="playbook"] .sq.playbook-landing-candidate{
  box-shadow:
    inset 0 0 0 2px rgba(255,230,153,.9),
    inset 0 0 0 999px rgba(255,230,153,.18);
}

.sq.place-flash::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:6px;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.62);
  box-shadow:0 0 0 2px rgba(73,186,255,.26), 0 0 16px rgba(73,186,255,.32);
  animation:cellPlaceFlash .22s ease-out;
}

.axisX{
  position:absolute; left:0; right:0; top:-22px; display:flex; gap:var(--gap); padding-left:var(--gap);
  width:calc(15*var(--cell) + 16*var(--gap));
  font:11px/1 ui-monospace,monospace; color:var(--muted); justify-content:space-between;
}
.axisX .x{ width:var(--cell); text-align:center }
.axisY{
  position:absolute; top:0; bottom:0; left:-26px; display:flex; flex-direction:column; gap:var(--gap);
  height:calc(26*var(--cell) + 27*var(--gap));
  font:11px/var(--cell) ui-monospace,monospace; color:var(--muted); align-items:flex-end;
}
.axisY .y{ height:var(--cell) }

.guides{
  pointer-events:none; position:absolute; 
  left:var(--gap); 
  top:var(--gap); 
  right:var(--gap); 
  bottom:var(--gap); 
  z-index:3;
}

/* line above: .guides{ */
.pitch-image-layer,
.pitch-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--logo-rotate, 0deg));
  transform-origin:center center;

  width:var(--logo-size, 0px);
  height:var(--logo-size, 0px);

  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;

  opacity:var(--logo-opacity, 0.22);
  pointer-events:none !important;
  touch-action:none;
  user-select:none;
}

.pitch-texture{
  z-index:1;
}

.pitch-logo{
  z-index:2;
}

.pitch-image-layer.is-fit,
.pitch-logo.is-fit{
  left:0;
  top:0;
  transform:rotate(var(--logo-rotate, 0deg)); /* remove translate, keep rotation */
  width:100%;
  height:100%;
  background-position:center center;
  background-size:100% 100%; /* stretch to full pitch width/height */
}

.pitch-watermark{
  position:absolute;
  right:clamp(10px, 2.2vw, 18px);
  bottom:clamp(10px, 2.2vw, 18px);
  font:600 clamp(11px, 1.35vw, 14px)/1.1 "Segoe UI", "Trebuchet MS", "Arial", sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(248, 252, 255, .28);
  text-shadow:0 1px 2px rgba(0,0,0,.2);
  pointer-events:none;
  user-select:none;
  z-index:4;
}

.app-mode-badge{
  position:absolute;
  top:max(12px, env(safe-area-inset-top, 0px) + 8px);
  right:max(12px, env(safe-area-inset-right, 0px) + 8px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,12,17,.26);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  backdrop-filter:blur(4px);
  color:rgba(244,248,252,.7);
  font:600 clamp(11px, 1vw, 13px)/1 "Segoe UI", "Trebuchet MS", "Arial", sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  pointer-events:none;
  user-select:none;
  z-index:88;
}

body.ui-hidden .app-mode-badge{
  top:max(12px, env(safe-area-inset-top, 0px) + 8px);
  right:max(12px, env(safe-area-inset-right, 0px) + 8px);
}

.playbook-base-board-prompt{
  position:absolute;
  top:max(56px, env(safe-area-inset-top, 0px) + 48px);
  left:max(12px, env(safe-area-inset-left, 0px) + 8px);
  right:max(12px, env(safe-area-inset-right, 0px) + 8px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(9,13,19,.84);
  box-shadow:0 16px 32px rgba(0,0,0,.24);
  backdrop-filter:blur(8px);
  color:#f4f7fb;
  z-index:92;
}

.playbook-base-board-prompt[hidden],
.playbook-base-board-lock[hidden]{
  display:none !important;
}

.playbook-base-board-prompt__copy{
  min-width:0;
  flex:1 1 auto;
}

.playbook-base-board-prompt__text{
  margin:0;
  color:rgba(244,247,251,.92);
  font:600 clamp(12px, 1.15vw, 14px)/1.45 "Segoe UI", "Trebuchet MS", "Arial", sans-serif;
}

.playbook-base-board-prompt__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}

.playbook-base-board-prompt__actions button{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#f6fbff;
  font:700 12px/1 "Segoe UI", "Trebuchet MS", "Arial", sans-serif;
  letter-spacing:.04em;
}

.playbook-base-board-prompt__actions button:hover:not(:disabled){
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
}

.playbook-base-board-prompt__actions button:disabled{
  opacity:.45;
  cursor:default;
}

.playbook-base-board-prompt__actions button#playbookBaseBoardUseFormationBtn{
  background:rgba(38,118,255,.18);
  border-color:rgba(90,160,255,.34);
}

.playbook-base-board-lock{
  position:absolute;
  inset:0;
  background:rgba(6,10,16,.18);
  z-index:80;
  pointer-events:auto;
}

@media (max-width: 820px){
  .playbook-base-board-prompt{
    flex-direction:column;
    align-items:stretch;
  }

  .playbook-base-board-prompt__actions{
    justify-content:stretch;
    flex-wrap:wrap;
  }

  .playbook-base-board-prompt__actions button{
    flex:1 1 220px;
  }
}




.g{ position:absolute; opacity:.75 }



.g.h{ border-top:4px dashed var(--line); height:0; left:0; right:0; transform:translateY(-2px) }
.g.v{ border-left:3px dashed var(--line); width:0; top:0; bottom:0; transform:translateX(-2px) }


#pitch.port .g.v{                       
  top:    calc(var(--cell) + var(--gap));
  bottom: calc(var(--cell) + var(--gap));
}
#pitch.land .g.h{                       
  left:  calc(var(--cell) + var(--gap));
  right: calc(var(--cell) + var(--gap));
}


.sq::after{ display:none }


#pitch.port { aspect-ratio: 15 / 26; }   
#pitch.land { aspect-ratio: 26 / 15; }   



/* -----------------------------
   Pieces
----------------------------- */
.piece{
  position:relative;
  z-index:5;              /* chips above logo */
  font-size: 0.65em;

  width:calc(var(--cell) - 8px);
  height:calc(var(--cell) - 8px);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#081016;
  font-weight:700;
  letter-spacing:.02em;

  box-shadow:0 2px 0 rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.35);
  border:2px solid rgba(0,0,0,.35);

  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

.piece[data-side="O"]{ background:var(--o) }
.piece[data-side="D"]{ background:var(--d) }
.piece.sel{ outline:3px solid var(--sel); outline-offset:1px }

body[data-app-mode="playbook"] .piece.sel{
  outline-color:rgba(255,255,255,.96);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.28);
}

body[data-app-mode="playbook"] .piece.playbook-flow-actor{
  outline:3px solid rgba(255,209,102,.98);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,209,102,.24), 0 6px 18px rgba(0,0,0,.32);
}

body[data-app-mode="playbook"] .piece.playbook-flow-target{
  outline:3px solid rgba(77,163,255,.96);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(77,163,255,.2), 0 6px 18px rgba(0,0,0,.28);
}

body[data-app-mode="playbook"] .piece.playbook-flow-actor.playbook-flow-target{
  outline-color:rgba(185,242,255,.98);
  box-shadow:0 0 0 4px rgba(185,242,255,.24), 0 6px 18px rgba(0,0,0,.3);
}

.piece.piece-icon-mode{
  color:transparent !important;
  text-shadow:none;
}

.piece.piece-icon-mode::before{
  content:"";
  position:absolute;
  inset:0;
  clip-path:inset(
    var(--ffb-crop-top, 4.2%)
    var(--ffb-crop-right, 0%)
    var(--ffb-crop-bottom, 1.8%)
    var(--ffb-crop-left, 0%)
  );
  background-image:var(--ffb-url);
  background-repeat:no-repeat;
  background-size:
    calc(var(--ffb-cols, 1) * 100%)
    calc(var(--ffb-rows, 1) * 100%);
  background-position:
    calc((var(--ffb-col, 0) * 100%) / (var(--ffb-cols, 1) - 1))
    calc((var(--ffb-row, 0) * 100%) / (var(--ffb-rows, 1) - 1));
  transform:translateY(var(--ffb-offset-y, 0%)) rotate(var(--ffb-rotation, 0deg)) scale(calc(var(--ffb-scale, 1) * var(--ffb-export-scale, 1)));
  transform-origin:50% 50%;
  pointer-events:none;
  image-rendering:crisp-edges;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
}

.piece.piece-icon-plain{
  background-color:transparent !important;
  border-color:transparent !important;
  box-shadow:none;
}

.piece.piece-icon-plain.sel{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(30,167,255,.38), 0 6px 16px rgba(0,0,0,.35);
}

body[data-app-mode="playbook"] .piece.piece-icon-plain.playbook-flow-actor{
  outline-color:rgba(255,209,102,.98);
  box-shadow:0 0 0 3px rgba(255,209,102,.3), 0 6px 16px rgba(0,0,0,.35);
}

body[data-app-mode="playbook"] .piece.piece-icon-plain.playbook-flow-target{
  outline-color:rgba(125,211,252,.96);
  box-shadow:0 0 0 3px rgba(125,211,252,.26), 0 6px 16px rgba(0,0,0,.35);
}

.piece.piece-icon-mode.sel{
  outline:2px solid rgba(230,250,255,.92);
  outline-offset:2px;
  box-shadow:0 0 0 2px rgba(122,227,255,.42), 0 6px 14px rgba(0,0,0,.35);
}

body[data-app-mode="playbook"] .piece.piece-icon-mode.playbook-flow-actor{
  outline-color:rgba(255,226,153,.98);
  box-shadow:0 0 0 2px rgba(255,226,153,.38), 0 6px 14px rgba(0,0,0,.35);
}

body[data-app-mode="playbook"] .piece.piece-icon-mode.playbook-flow-target{
  outline-color:rgba(147,197,253,.98);
  box-shadow:0 0 0 2px rgba(147,197,253,.34), 0 6px 14px rgba(0,0,0,.35);
}

.piece.piece-icon-plain.used{
  opacity:.7;
}

.piece.piece-icon-mode.stun::after,
.piece.piece-icon-mode.prone::after,
.piece.piece-icon-mode.has-ball::after{
  right:-11px;
  top:-11px;
  width:12px;
  height:12px;
  z-index:9;
  text-shadow:0 1px 1px rgba(0,0,0,.9), 0 0 1px rgba(0,0,0,.95);
  -webkit-text-stroke:.35px rgba(0,0,0,.85);
}

.piece.piece-icon-mode.stun::after,
.piece.piece-icon-mode.prone::after{
  font:700 7px/12px ui-monospace,monospace;
}

.piece.piece-icon-mode .skill-overflow{
  right:-10px;
  top:-10px;
  bottom:auto;
  min-width:11px;
  height:11px;
  padding:0 2px;
  font:700 7px/10px ui-monospace,monospace;
  text-shadow:0 1px 1px rgba(0,0,0,.9), 0 0 1px rgba(0,0,0,.95);
  -webkit-text-stroke:.35px rgba(0,0,0,.85);
  z-index:9;
}





.piece.used{ opacity:.6 }
.piece.used[data-side="O"]{ box-shadow:0 0 0 4px var(--o), 0 0 14px rgba(255,255,255,.25) }
.piece.used[data-side="D"]{ box-shadow:0 0 0 4px var(--d), 0 0 14px rgba(255,255,255,.25) }
.piece > *{ pointer-events:none }
.piece .skill-bands{
  position:absolute;
  inset:-3px;
  width:calc(100% + 6px);
  height:calc(100% + 6px);
  pointer-events:none;
  overflow:visible;
  z-index:8;
}
.piece .skill-bands .skill-arc{
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}
.piece .skill-bands .skill-arc-shadow{
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}
.piece .skill-overflow{
  position:absolute;
  right:-6px;
  bottom:-6px;
  min-width:14px;
  height:14px;
  padding:0 3px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.6);
  background:#101820;
  color:#fff;
  font:700 9px/12px ui-monospace,monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  pointer-events:none;
}
.piece.placed-pop{
  animation:piecePlacePop .22s ease-out;
}

@keyframes piecePlacePop{
  0%   { transform:scale(.88); filter:brightness(1.18); }
  70%  { transform:scale(1.05); filter:brightness(1.08); }
  100% { transform:scale(1); filter:none; }
}

@keyframes cellPlaceFlash{
  from{ opacity:.95; transform:scale(.92); }
  to  { opacity:0; transform:scale(1.06); }
}




#pieceTip{
  position:fixed;
  z-index:10000;
  max-width:200px;
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:6px 8px;
  border-radius:4px;
  font-size:12px;
  line-height:1.3;
  pointer-events:none;
  display:none;
  box-shadow:0 4px 8px rgba(0,0,0,0.4);
}
#pieceTip .pt-name{
  font-weight:700;
  margin-bottom:4px;
}
#pieceTip .pt-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2px 8px;
}
#pieceTip .pt-skills{
  margin-top:4px;
  font-size:11px;
  color:#cfd8dc;
}



.piece.ball{
  color:transparent; background:radial-gradient(circle at 30% 30%,#d8a76a 0%,#b3783e 60%,#8a5525 100%);
  box-shadow:0 6px 0 rgba(0,0,0,.25), inset 0 6px 12px rgba(0,0,0,.25);
}
.piece.ball::before,.piece.ball::after{
  content:""; position:absolute; left:50%; top:50%; width:60%; height:2px;
  background:rgba(255,255,255,.55); border-radius:2px; transform:translate(-50%,-50%) rotate(25deg);
}
.piece.ball::after{ transform:translate(-50%,-50%) rotate(-25deg) }
.piece.has-ball::after{
  content:"";
  position:absolute;
  right:-8px;
  top:-7px;
  width:22px;
  height:14px;
  border-radius:50%;
  z-index:9;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.86) 45% 55%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.82) 3px 4px, transparent 4px 6px),
    radial-gradient(circle at 32% 28%, #f0bd7c 0%, #b87336 48%, #7a3f1d 100%);
  background-size:100% 100%, 8px 10px, 100% 100%;
  background-position:center, center, center;
  background-repeat:no-repeat;
  box-shadow:0 2px 0 rgba(0,0,0,.36), 0 0 0 1px rgba(38,18,6,.82);
  transform:rotate(-24deg);
}

.piece.piece-icon-mode.has-ball::after{
  right:-10px;
  top:-9px;
  width:20px;
  height:13px;
  border-radius:50%;
  font-size:0;
  line-height:0;
  text-shadow:none;
  -webkit-text-stroke:0;
}


.sq { position: relative; }

.sq .tz-o,
.sq .tz-d{
  position: absolute;
  inset: 2px;            
  border-radius: 6px;
  opacity: 0;            
  pointer-events: none;
  z-index: 3; /* above pitch logo (z=2), below pieces (z=5) */
}


.sq .tz-o { background: var(--teamO, #d9534f); }
.sq .tz-d { background: var(--teamD, #2aa1ff); }


.sq.has-o .tz-o { opacity: .40; }
.sq.has-d .tz-d { opacity: .40; }


.sq.has-o.has-d .tz-o { clip-path: polygon(0 0, 100% 0, 0 100%); }
.sq.has-o.has-d .tz-d { clip-path: polygon(100% 0, 100% 100%, 0 100%); }



.piece .prone-x{ position:absolute; inset:12%; pointer-events:none; display:none }
.piece.prone .prone-x{ display:block }
.piece .prone-x .bar{ position:absolute; left:50%; top:50%; height:100%; border-radius:3px; transform-origin:50% 50% }
.piece .prone-x .bar.white{ width:6px; background:#fff }
.piece .prone-x .bar.red{   width:3.5px; background:#d33 }
.piece .prone-x .b1{ transform:translate(-50%,-50%) rotate(45deg) }
.piece .prone-x .b2{ transform:translate(-50%,-50%) rotate(-45deg) }


.piece.stun::after{
  content:"S"; 
  position:absolute; 
  right:-6px; 
  top:-6px;
  width:16px; 
  height:16px; 
  border-radius:50%;
  font:700 10px/16px ui-monospace,monospace; 
  text-align:center;
  color:#fff;                    
  background:#d63c3c;           
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}


.piece.prone::after{
  content:"P";
  position:absolute;
  right:-6px; 
  top:-6px;
  width:16px; 
  height:16px; 
  border-radius:50%;
  font:700 10px/16px ui-monospace,monospace; 
  text-align:center;
  color:#111; 
  background:#ffd166; 
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}


.piece .prone-x{ display:none !important; }




.piece.down::before, .piece.down::after{ display:none !important }


/* line above: .piece.down::before, .piece.down::after{ display:none !important } */
.chip-star{
  background:#ffd700 !important;      /* star yellow */
  color:#000 !important;
  border:2px solid #000 !important;   /* solid black core border */
  font-weight:700;
  /* outer glow ring uses --starRing which we set in JS per side */
  box-shadow:
    0 0 0 3px var(--starRing, rgba(255,255,255,.25)),
    0 2px 8px rgba(0,0,0,.6),
    0 0 12px rgba(0,0,0,.4) !important;
}

/* Keep chip-star styling in chip mode, but remove star ring/chrome in icon modes. */
.piece.piece-icon-mode.chip-star{
  color:transparent !important;
}

/* Chip-backed icon mode: preserve normal chip backing, suppress star-specific yellow/ring. */
.piece.piece-icon-mode.chip-star:not(.piece-icon-plain)[data-side="O"]{
  background:var(--o) !important;
  border-color:rgba(0,0,0,.35) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.35) !important;
}

.piece.piece-icon-mode.chip-star:not(.piece-icon-plain)[data-side="D"]{
  background:var(--d) !important;
  border-color:rgba(0,0,0,.35) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.35) !important;
}

/* Plain icon mode: sprite-only, no chip backing/ring. */
.piece.piece-icon-plain.chip-star{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* In FFB modes, unresolved stars (no sprite) remain chips but look intentionally distinct. */
body[data-player-visual-mode="ffb-icons-plain"] .piece.chip-star:not(.piece-icon-mode),
body[data-player-visual-mode="ffb-icons-chip-backed"] .piece.chip-star:not(.piece-icon-mode){
  transform:scale(1.05);
  border-color:#f2dfa0 !important;
  box-shadow:0 0 0 2px rgba(242,223,160,.45), 0 3px 10px rgba(0,0,0,.45) !important;
}

/* star picker overlay */
.star-menu-wrap{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:grid;
  place-items:center;
  z-index:300000;
}
.star-menu{
  background:#0f141a;
  border:2px solid rgba(255,255,255,.12);
  border-radius:8px;
  box-shadow:0 24px 64px rgba(0,0,0,.8);
  padding:16px;
  min-width:260px;
  max-width:90vw;
  color:#fff;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.star-menu-title{
  font-size:14px;
  font-weight:700;
  text-align:center;
  margin-bottom:8px;
  color:#fff;
}
.star-menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-height:50vh;
  overflow-y:auto;
  margin-bottom:12px;
}
.star-btn{
  background:#1f2a33;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  padding:8px 6px;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:#fff;
  text-align:center;
}
.star-btn:active{
  background:#2c3a46;
}
.star-close{
  display:block;
  width:100%;
  background:#2c3a46;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  padding:8px 6px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  text-align:center;
}
.star-close:active{
  background:#3a4d5c;
}




/* -----------------------------
   Playbook overlay
----------------------------- */
.playbook-overlay{
  position:absolute;
  inset:0;
  z-index:45;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

.playbook-overlay[hidden]{
  display:none !important;
}

body[data-app-mode="playbook"] .playbook-overlay{
  display:block;
  touch-action:none;
  z-index:55;
}

body[data-app-mode="playbook"] #pitch{
  touch-action:none;
}

body[data-app-mode="playbook"] #pitch *{
  touch-action:none;
}

body.pitch-locked:not([data-app-mode="playbook"]) #wrap,
body.pitch-locked:not([data-app-mode="playbook"]) #stage,
body.pitch-locked:not([data-app-mode="playbook"]) #pitch,
body.pitch-locked:not([data-app-mode="playbook"]) #pitch *,
body.pitch-locked:not([data-app-mode="playbook"]) .playbook-overlay,
body.pitch-locked:not([data-app-mode="playbook"]) #sketch{
  touch-action:auto !important;
}

body[data-app-mode="playbook"].draw-active .playbook-overlay,
body[data-app-mode="playbook"] .playbook-overlay.is-interactive{
  pointer-events:auto;
  cursor:crosshair;
}

.playbook-annotation{
  vector-effect:non-scaling-stroke;
}

.playbook-hit-surface{
  fill:rgba(0,0,0,0);
  pointer-events:all;
}

.playbook-annotation__shape,
.playbook-annotation__text,
.playbook-selection-box,
.playbook-handle,
.playbook-arrow-head{
  vector-effect:non-scaling-stroke;
}

.playbook-annotation__shape,
.playbook-annotation__text,
.playbook-handle,
.playbook-arrow-head{
  pointer-events:all;
}

.playbook-action-bundle__origin,
.playbook-action-bundle__origin-backplate,
.playbook-action-bundle__origin-ring,
.playbook-action-bundle__origin-text,
.playbook-action-bundle__helper-text,
.playbook-action-bundle__label{
  pointer-events:all;
}

.playbook-overlay.is-edit-disabled .playbook-hit-surface,
.playbook-overlay.is-edit-disabled .playbook-annotation__shape,
.playbook-overlay.is-edit-disabled .playbook-annotation__text,
.playbook-overlay.is-edit-disabled .playbook-handle,
.playbook-overlay.is-edit-disabled .playbook-arrow-head,
.playbook-overlay.is-edit-disabled .playbook-action-bundle__origin,
.playbook-overlay.is-edit-disabled .playbook-action-bundle__origin-backplate,
.playbook-overlay.is-edit-disabled .playbook-action-bundle__origin-ring,
.playbook-overlay.is-edit-disabled .playbook-action-bundle__origin-text,
.playbook-overlay.is-edit-disabled .playbook-action-bundle__helper-text,
.playbook-overlay.is-edit-disabled .playbook-action-bundle__label{
  pointer-events:none !important;
}

.playbook-annotation.is-selected .playbook-annotation__shape,
.playbook-annotation.is-selected .playbook-annotation__text{
  filter:drop-shadow(0 0 6px rgba(255,255,255,.16));
}

.playbook-action-bundle.is-selected .playbook-action-bundle__origin,
.playbook-action-bundle.is-selected .playbook-action-bundle__origin-ring,
.playbook-action-bundle.is-selected .playbook-action-bundle__label{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.2));
}

.playbook-action-bundle__origin-text,
.playbook-action-bundle__helper-text,
.playbook-action-bundle__label{
  font-family: ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.01em;
}

.playbook-selection-box{
  fill:none;
  stroke:rgba(255,255,255,.86);
  stroke-width:1.5;
  stroke-dasharray:6 4;
  pointer-events:none;
}

.playbook-handle{
  fill:#fff;
  stroke:#111;
  stroke-width:1.5;
  cursor:pointer;
}

.playbook-handle.is-text{
  fill:#4ade80;
  stroke:rgba(11,15,20,.94);
  stroke-width:1.5;
}

body[data-app-mode="playbook"] .playbook-overlay[data-tool="delete"] .playbook-annotation__shape,
body[data-app-mode="playbook"] .playbook-overlay[data-tool="delete"] .playbook-annotation__text{
  cursor:not-allowed;
}

/* -----------------------------
   Sketch layer
----------------------------- */
.sketch{ position:absolute; left:0; top:0; z-index:20; pointer-events:none }
.draw-active .sketch{ pointer-events:auto; cursor:crosshair }

body[data-app-mode="formation"] [data-mode-scope="playbook"]{
  display:none !important;
}
#sketch.is-hidden{ opacity:0; pointer-events:none; transition:opacity var(--fast) var(--e) }
canvas#sketch{ opacity:85% }

.formation-text-overlay{
  position:absolute;
  top:0;
  left:0;
  z-index:55;
  pointer-events:none;
  overflow:visible;
}

.formation-text-selection-box{
  fill:none;
  stroke:rgba(255,255,255,.86);
  stroke-width:1.5;
  stroke-dasharray:6 4;
}

.formation-text-handle{
  fill:#4ade80;
  stroke:rgba(11,15,20,.94);
  stroke-width:1.5;
}


.draw-active .stage{
  box-shadow:inset 0 0 0 3px var(--sketch-accent,var(--accent)), inset 0 0 0 2px rgba(255,255,255,.15);
}
.draw-active .stage::after{
  content:"SKETCH"; position:absolute; z-index:25; top:8px; left:50%; transform:translateX(-50%);
  padding:4px 10px; border-radius:999px; font:700 12px/1 system-ui,sans-serif; letter-spacing:.08em;
  color:#fff; background:rgba(0,0,0,.6); pointer-events:none;
}


#hideSketch.active, #rotate.active{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px rgba(255,59,48,.18);
}

.ghost-btn.is-on{
  outline:2px solid var(--accent); box-shadow:0 0 0 3px rgba(255,59,48,.18);
}


.drag-proxy{
  position:fixed; z-index:17050; pointer-events:none;
  border:2px solid rgba(0,0,0,.35); border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.drag-badge{
  position:absolute; right:-8px; top:-8px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:#111; color:#fff;
  font:700 11px/18px ui-monospace,monospace; text-align:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.15);
}
.drag-trail{
  position:fixed; width:6px; height:6px; border-radius:50%;
  background:rgba(0,0,0,.55); box-shadow:0 0 0 2px rgba(255,255,255,.2);
  transform:translate(-50%,-50%); pointer-events:none; z-index:9999;
}


#wrap, #board, #pitch, #pitch *, #axes, #axes *, #sketch, .piece{
  user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-drag:none;
}
body.is-panning{ user-select:none }
body.is-panning #board{ cursor:grabbing }

#sketch {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 50;              
}

body[data-app-mode="playbook"] .sketch{
  pointer-events:none !important;
}

/* -----------------------------
   Ghost dock (UI hidden helpers)
   REPLACE ENTIRE BLOCK
----------------------------- */
.ghost-dock{
  
  --g-size:44px;
  --g-fs:12px;
  --g-gap:10px;
  --g-br:999px;
  --g-btn-bg:#222;
  --g-tab-bg:rgba(0,0,0,.25);

  position:fixed; left:0; right:0; bottom:0; transform:none;
  z-index:9999;
  display:none; 
  background:transparent; padding:0; gap:var(--g-gap);
}
.ghost-btn{
  inline-size:var(--g-size); block-size:var(--g-size);
  border-radius:var(--g-br);
  font:700 var(--g-fs)/1 system-ui,sans-serif;
  background:var(--g-btn-bg); color:#fff;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:var(--shadow-1);
}
.ui-hidden .ghost-dock{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(980px, calc(100vw - 28px));
  max-width:calc(100vw - 28px);
  padding:
    12px
    max(14px, env(safe-area-inset-right, 0px) + 14px)
    calc(10px + env(safe-area-inset-bottom, 0px))
    max(14px, env(safe-area-inset-left, 0px) + 14px);
  border:1px solid rgba(219,199,164,.13);
  border-bottom:0;
  border-radius:42px 42px 0 0 / 26px 26px 0 0;
  background:linear-gradient(180deg, rgba(25,33,42,.56), rgba(13,18,24,.34));
  box-shadow:0 -16px 46px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035) inset;
  backdrop-filter:saturate(1.18) blur(10px);
  overflow:hidden;
}

body.ui-hidden .ghost-dock.is-collapsed{
  gap:4px;
}

body.ui-hidden .ghost-dock.is-collapsed .ghost-row{
  display:none !important;
}


.side-toggle-btn{
  border:2px solid var(--ghost-accent,#fff);
  border-radius:var(--g-br);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 10px 20px rgba(0,0,0,.24);
}
.side-toggle-btn.is-O{ --ghost-accent: var(--ovO, var(--teamO)); }
.side-toggle-btn.is-D{ --ghost-accent: var(--ovD, var(--teamD)); }

.side-toggle-btn .side-letter{
  display:inline-block;
  line-height:1;
  transition:opacity .15s ease, transform .15s ease, color .15s ease;
}
.side-toggle-btn .side-letter.is-active{
  font-size:1.08em;
  font-weight:800;
  color:var(--ghost-accent, #fff);
  opacity:1;
}
.side-toggle-btn .side-letter.is-inactive{
  font-size:.86em;
  font-weight:650;
  color:rgba(255,255,255,.55);
  opacity:.9;
}
.side-toggle-btn .side-divider{
  display:inline-block;
  margin:0 1px;
  color:rgba(255,255,255,.7);
}


.ghost-tabs{
  display:inline-flex;
  gap:6px;
  background:var(--g-tab-bg);
  padding:4px;
  border-radius:var(--g-br);
  align-self:center;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-padding-inline:8px;
}
.ghost-tabs::-webkit-scrollbar{ display:none; }
.ghost-dock [hidden]{ display:none !important; }
.ghost-tabs button{
  flex:0 0 auto;
  min-inline-size:64px; padding:6px 10px;
  border-radius:var(--g-br);
  border:1px solid rgba(255,255,255,.15);
  background:#111; color:#fff; font:700 12px/1 system-ui,sans-serif;
}
.ghost-tabs button.active{ background:var(--header-accent,#fff); color:#081016; border-color:transparent }

#ghostDock[data-ghost-mode="playbook"] .ghost-tabs button[data-tab="player"]{ order:1; }
#ghostDock[data-ghost-mode="playbook"] .ghost-tabs button[data-tab="pitch"]{ order:2; }
#ghostDock[data-ghost-mode="playbook"] .ghost-tabs button[data-tab="sketch"]{ order:3; }
#ghostDock[data-ghost-mode="playbook"] .ghost-tabs button[data-tab="sequence"]{ order:4; }

.ghost-sheet{
  display:grid;
  gap:8px;
  align-self:center;
  width:min(980px, calc(100vw - 18px));
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(219,199,164,.18);
  background:rgba(10,16,22,.96);
  box-shadow:0 18px 42px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
}

.ghost-sheet[hidden]{
  display:none !important;
}

.ghost-sheet__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.ghost-sheet__copy{
  display:grid;
  gap:2px;
}

.ghost-sheet__copy strong{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
}

.ghost-sheet__copy span{
  font-size:.74rem;
  color:rgba(255,255,255,.68);
}

.ghost-sheet__body{
  max-block-size:min(42vh, 360px);
  overflow:auto;
  overscroll-behavior:contain;
  padding-inline-end:2px;
}

.ghost-btn--sheet-close{
  inline-size:auto;
  min-inline-size:72px;
  padding-inline:14px;
}

.ghost-btn.active{
  outline:2px solid rgba(242,228,188,.58);
  outline-offset:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, var(--shadow-1);
}

#ghostSaveFormation, #ghostLoadFormation{ border:2px solid var(--ghost-accent,#fff); border-radius:var(--g-br); box-shadow:none }
#ghostSaveFormation.is-O, #ghostLoadFormation.is-O{ --ghost-accent: var(--ovO, var(--teamO)); }
#ghostSaveFormation.is-D, #ghostLoadFormation.is-D{ --ghost-accent: var(--ovD, var(--teamD)); }



.ghost-row{
  display:flex;
  gap:8px;
  justify-content:flex-start;
  flex-wrap:nowrap;
  align-self:center;
  width:auto;
  max-width:calc(100vw - 16px);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  padding:2px 2px;
}
.ghost-row > *{
  flex:0 0 auto;
}
.ghost-row[hidden]{ display:none !important; }

.ghost-cluster{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.ghost-cluster--secondary{
  padding-inline-start:8px;
  border-inline-start:1px solid rgba(255,255,255,.1);
}

.ghost-cluster--danger{
  padding-inline-start:8px;
  border-inline-start:1px solid rgba(255,88,88,.2);
}

.ghost-row--session{
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:min(920px, calc(100vw - 18px));
  overflow:visible;
}

.ghost-row--session .ghost-cluster{
  flex-wrap:wrap;
  justify-content:center;
}

.ghost-row--playbook{
  justify-content:center;
  max-width:min(980px, calc(100vw - 18px));
  overflow:visible;
}

.ghost-playbook-stack{
  width:100%;
  min-width:0;
  display:grid;
  gap:8px;
}

.ghost-playbook-inline-row{
  width:100%;
  min-width:0;
  display:flex;
  gap:8px;
  align-items:stretch;
  justify-content:flex-start;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  padding:2px;
}

.ghost-playbook-inline-row > *{
  flex:0 0 auto;
}

.ghost-playbook-sketch-toggle{
  touch-action:manipulation;
}

.ghost-cluster--wrap{
  flex-wrap:wrap;
  width:100%;
  justify-content:center;
}

.ghost-playbook-inline-row--controls{
  padding-top:0;
  width:auto;
  max-width:100%;
  margin-inline:auto;
}

.ghost-playbook-inline-panels{
  width:100%;
  min-width:0;
  display:grid;
  gap:8px;
  justify-items:center;
}

.ghost-playbook-inline-panels[hidden]{
  display:none !important;
}

.ghost-btn--chip{
  inline-size:auto;
  min-inline-size:76px;
  padding-inline:14px;
  border-radius:999px;
}

.ghost-playbook-inline-row--chips{
  width:auto;
  max-width:100%;
  margin-inline:auto;
  align-items:center;
  justify-content:center;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-padding-inline:2px;
}

.ghost-playbook-inline-row--sequence{
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding-inline:6px;
  scroll-padding-inline:6px;
}

.ghost-playbook-inline-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.ghost-playbook-inline-group + .ghost-playbook-inline-group{
  padding-inline-start:8px;
  border-inline-start:1px solid rgba(255,255,255,.08);
}

.ghost-playbook-inline-row--sequence .ghost-playbook-inline-group{
  gap:6px;
}

.ghost-playbook-inline-row--sequence .ghost-playbook-inline-group + .ghost-playbook-inline-group{
  padding-inline-start:6px;
}

.ghost-playbook-inline-control{
  min-width:120px;
  display:grid;
  gap:6px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.84);
  font-size:.75rem;
}

.ghost-playbook-inline-control span{
  font-weight:700;
  white-space:nowrap;
}

.ghost-playbook-inline-control select{
  min-inline-size:120px;
}

.ghost-playbook-inline-control--scope-chip{
  min-width:auto;
  min-inline-size:0;
  min-height:var(--g-size);
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 12px 4px 14px;
  border-radius:999px;
  white-space:nowrap;
}

.ghost-playbook-inline-control--scope-chip span{
  font-size:.72rem;
  letter-spacing:.03em;
}

.ghost-playbook-inline-control--scope-chip select{
  min-inline-size:104px;
  block-size:32px;
  padding:0 28px 0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(13,18,24,.9);
  color:#edf3f7;
  font:700 .72rem/1 system-ui,sans-serif;
}

.ghost-playbook-inline-control--color{
  min-width:92px;
}

.ghost-playbook-inline-control--color input[type="color"]{
  inline-size:48px;
  block-size:32px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
}

.ghost-playbook-inline-control--range{
  min-width:176px;
}

.ghost-playbook-inline-control--range input[type="range"]{
  inline-size:144px;
}

.ghost-playbook-inline-control--toggle{
  min-width:max-content;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.ghost-playbook-inline-control--toggle input{
  margin:0;
}

.ghost-playbook-sketch-toggle.is-playbook-on,
.ghost-btn[data-playbook-tool].is-active,
.ghost-btn--playbook-chip.is-active{
  border-color:#59d98e;
  background:linear-gradient(180deg, rgba(17,46,31,.96), rgba(10,29,19,.98));
  box-shadow:0 0 0 1px rgba(89,217,142,.24) inset, 0 10px 22px rgba(0,0,0,.32);
}

.ghost-formation-sketch-toggle.is-formation-on,
.ghost-btn[data-formation-sketch-tool].is-active,
.ghost-btn--formation-chip.is-active{
  border-color:#59d98e;
  background:linear-gradient(180deg, rgba(17,46,31,.96), rgba(10,29,19,.98));
  box-shadow:0 0 0 1px rgba(89,217,142,.24) inset, 0 10px 22px rgba(0,0,0,.32);
}

.ghost-playbook-sketch-toggle.is-playbook-off{
  border-color:#f2545b;
  background:linear-gradient(180deg, rgba(61,20,25,.96), rgba(35,11,15,.98));
  box-shadow:0 0 0 1px rgba(242,84,91,.2) inset, 0 10px 22px rgba(0,0,0,.32);
}

.ghost-formation-sketch-toggle.is-formation-off{
  border-color:#f2545b;
  background:linear-gradient(180deg, rgba(61,20,25,.96), rgba(35,11,15,.98));
  box-shadow:0 0 0 1px rgba(242,84,91,.2) inset, 0 10px 22px rgba(0,0,0,.32);
}

.ghost-playbook-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:var(--g-size);
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(219,199,164,.18);
  background:linear-gradient(180deg, rgba(33,38,46,.94), rgba(18,22,28,.98));
  color:#edf3f7;
  font:700 .76rem/1.1 system-ui,sans-serif;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(0,0,0,.3);
}

.ghost-playbook-inline-row--sequence .ghost-playbook-status{
  padding-inline:12px;
  font-size:.72rem;
}

.ghost-playbook-disclosure{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}

.ghost-playbook-disclosure[open]{
  background:rgba(255,255,255,.06);
}

.ghost-playbook-disclosure summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font:700 .78rem/1.1 system-ui,sans-serif;
  letter-spacing:.04em;
  color:#fff;
}

.ghost-playbook-disclosure summary::-webkit-details-marker{
  display:none;
}

.ghost-playbook-settings{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  padding:0 12px 12px;
}

.ghost-playbook-setting{
  display:grid;
  gap:6px;
  font-size:.76rem;
  color:rgba(255,255,255,.8);
}

.ghost-playbook-setting span{
  font-weight:700;
}

.ghost-playbook-setting input[type="color"],
.ghost-playbook-setting input[type="number"],
.ghost-playbook-setting input[type="range"],
.ghost-playbook-setting select{
  width:100%;
  margin:0;
}

.ghost-playbook-setting--toggle{
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
}

.ghost-playbook-setting--toggle input{
  margin:0;
}

.ghost-playbook-sequence-list{
  max-width:none;
}


@media (max-width:900px){
  .ghost-dock{
    position:fixed; left:0; right:0; top:auto; bottom:0;
    transform:none;
    width:100vw;
    max-width:100vw;
    border-radius:30px 30px 0 0 / 20px 20px 0 0;
    background:linear-gradient(180deg, rgba(25,33,42,.54), rgba(13,18,24,.34));
    backdrop-filter:saturate(1.2) blur(8px);
    align-items:center;
    padding:
      8px
      max(8px, env(safe-area-inset-right, 0px) + 8px)
      calc(7px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px) + 8px);
    gap:8px;
    --g-size:40px;
    --g-fs:11px;
  }
  body.ui-hidden .ghost-dock{
    left:0;
    right:0;
    transform:none;
    width:100vw;
    max-width:100vw;
  }
  .ghost-tabs{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    align-self:stretch;
    width:100%;
    max-width:100%;
    overflow:visible;
    justify-content:stretch;
  }
  .ghost-tabs button{
    min-inline-size:0;
    inline-size:100%;
    padding:6px 8px;
    font-size:10px;
  }
  .ghost-tabs[data-ghost-count="4"]{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
  .ghost-row{
    align-self:stretch;
    width:100%;
    max-width:100%;
    justify-content:center;
    padding:4px 4px;
  }
  .ghost-row.is-overflowing{
    justify-content:flex-start;
  }

  .ghost-cluster{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }

  .ghost-cluster--secondary,
  .ghost-cluster--danger{
    padding-inline-start:0;
    border-inline-start:0;
  }

  .ghost-row--session{
    justify-content:center;
  }

  .ghost-sheet{
    width:100%;
    max-width:100%;
    padding:10px;
    border-radius:16px;
  }

  .ghost-sheet__body{
    max-block-size:min(38vh, 300px);
  }

  .ghost-playbook-settings{
    grid-template-columns:minmax(0, 1fr);
  }

  .ghost-playbook-inline-control{
    min-width:110px;
    padding:8px 10px;
  }

  .ghost-playbook-inline-control--scope-chip{
    padding-inline:10px;
    gap:6px;
  }

  .ghost-playbook-inline-control--scope-chip select{
    min-inline-size:96px;
  }

  .ghost-playbook-inline-control--range{
    min-width:160px;
  }

  .ghost-playbook-inline-control--range input[type="range"]{
    inline-size:128px;
  }

  body.ui-hidden .ghost-dock.is-collapsed{
    padding:
      6px
      max(8px, env(safe-area-inset-right, 0px) + 8px)
      calc(4px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px) + 8px);
  }
}



/* -----------------------------
   Toast
----------------------------- */
.toast{
  position:fixed; left:50%; top:var(--toast-top-offset); transform:translateX(-50%) translateY(-8px);
  background:var(--bg); color:var(--ink); border:1px solid #334; border-radius:var(--r-10);
  max-width:min(420px, calc(100vw - 24px));
  padding:8px 12px; font:13px/1 ui-sans-serif,system-ui; opacity:0; pointer-events:none; z-index:13000;
  box-shadow:0 8px 26px rgba(0,0,0,.38), 0 0 0 1px rgba(120,170,255,.16);
  transition:opacity .18s var(--e), transform .18s var(--e), box-shadow .22s var(--e);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.toast.toast-pop{
  animation:toastPop .34s ease-out;
}
@keyframes toastPop{
  0%{ box-shadow:0 0 0 0 rgba(106,171,255,.52), 0 8px 26px rgba(0,0,0,.38); }
  65%{ box-shadow:0 0 0 10px rgba(106,171,255,0), 0 10px 28px rgba(0,0,0,.42); }
  100%{ box-shadow:0 8px 26px rgba(0,0,0,.38), 0 0 0 1px rgba(120,170,255,.16); }
}


.toast-bar{
  position:fixed; right:12px; bottom:12px;
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px; border-radius:10px;
  background:rgba(20,24,30,.95); color:#fff; border:1px solid #334;
  box-shadow:var(--shadow-2); z-index:9999;
}
.toast-bar .actions{ display:flex; gap:6px; }
.toast-bar button{
  border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; border-radius:8px; padding:6px 10px; font-weight:600;
}
#resumeKeep{
  background:#fff;
  color:#111;
  border-color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
#resumeNew{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.toast-bar [id="resumeClose"]{ background:transparent; color:#fff; border-color:transparent; padding:0 6px; }
@media (max-width:720px){
  .toast-bar{ left:12px; right:12px; justify-content:space-between; }
}


.toast-bar{ pointer-events:auto; }
.toast-bar button{ cursor:pointer; }
#resumeClose{ width:28px; height:28px; line-height:28px; text-align:center; }


.toast-bar{ z-index:20000; pointer-events:auto }
.toast-bar button{ cursor:pointer }


.toast-bar[hidden]{ display:none !important; }

.update-banner{
  position:fixed;
  left:50%;
  top:max(12px, calc(env(safe-area-inset-top, 0px) + 12px));
  transform:translateX(-50%);
  z-index:20020;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(560px, calc(100vw - 24px));
  padding:10px 12px;
  border-radius:12px;
  background:rgba(20,24,30,.97);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.update-banner .actions{
  display:flex;
  gap:6px;
  margin-left:auto;
  flex:0 0 auto;
}

.update-banner button{
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:6px 10px;
  font-weight:600;
  cursor:pointer;
}

#updateReloadBtn{
  background:#fff;
  color:#111;
}

#updateLaterBtn{
  background:transparent;
  color:#fff;
}

.update-banner[hidden]{
  display:none !important;
}

@media (max-width:720px){
  .update-banner{
    align-items:flex-start;
    flex-direction:column;
  }

  .update-banner .actions{
    width:100%;
    margin-left:0;
  }

  .update-banner .actions button{
    flex:1 1 0;
  }
}


/* -----------------------------
   Context menu
----------------------------- */
.ctx{
  position:fixed; min-width:160px; max-height:70vh; overflow:auto;
  background:var(--panel-2); color:var(--ink); border:1px solid #334; border-radius:var(--r-10);
  padding:6px; box-shadow:var(--shadow-2); z-index:16000;
}
.ctx .grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:260px; margin-bottom:8px }
@media (min-width:560px){ .ctx .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }


.ctx .toggles{ display:flex; gap:8px; flex-wrap:wrap }
.ctx .grid + .toggles{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.15) }
.ctx .toggles button{ flex:1; min-width:0 }
.ctx.ctx--playbook{
  min-width:260px;
}
.ctx.ctx--playbook .ctx-playbook-toggles{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.ctx.ctx--playbook .ctx-playbook-toggles button:last-child{
  grid-column:1 / -1;
}


.ctx .stats{
  padding:10px 12px;
  margin:0 2px 8px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-10);
}
.ctx .stats .stat-title{
  font:800 12px/1 system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#cfd8dc;
  margin:0 0 8px;
}
.ctx .stats .stat-subtitle{
  font:600 11px/1.2 system-ui,sans-serif;
  letter-spacing:.04em;
  color:#9fb0bb;
  margin:-2px 0 8px;
}
.ctx .stat-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px 12px;
  text-align:center;
  align-items:center;
}
.ctx .stat-grid .hd{
  opacity:.75;
  font:700 11px/1 system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ctx .stat-grid .val{
  font:700 14px/1.1 ui-monospace,monospace;
}
.ctx .stat-grid .val.stat-up{
  color:#51d88a;
}
.ctx .stat-grid .val.stat-down{
  color:#ff6b6b;
}
.ctx .skills{
  margin-top:6px;
  font:12px/1.3 system-ui,sans-serif;
  color:#dfe7ea;
  opacity:.9;
}

.ctx .skills{ margin-top:6px; font:12px/1.3 system-ui,sans-serif; color:#dfe7ea; opacity:.9 }
.ctx .skills-line{
  margin-top:8px;
  font:12px/1.35 system-ui,sans-serif;
  color:#dfe7ea;
  opacity:.92;
}
.ctx .ctx-skills-line{
  margin-top:8px;
  font:12px/1.35 system-ui,sans-serif;
  color:#d7e1e6;
}
.ctx .ctx-skills-line strong{
  color:#f0f5f7;
  font-weight:800;
}
.ctx .ctx-gained-skill-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.ctx .skill-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  font:700 11px/1 system-ui,sans-serif;
  letter-spacing:.02em;
  color:#eef3f5;
  white-space:nowrap;
}
.ctx .skill-pill--default{
  background:#2f3944;
  border-color:rgba(255,255,255,.14);
}
.ctx .skill-pill--gained-primary{
  background:#5c6a75;
  border-color:rgba(220,232,239,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.ctx .skill-pill--gained-unknown{
  background:#5c6a75;
}
.ctx .skill-pill--gained-secondary{
  background:#8b7240;
  border-color:rgba(255,232,170,.18);
  color:#fff3d1;
}


.ctx .toggles .ctx-vsep{ flex:0 0 1px; align-self:stretch; background:rgba(255,255,255,.2) }

#ctxMenu .ctx-item{ display:block; width:100%; text-align:left; padding:6px 10px }
#ctxMenu .ctx-sep{ border:0; border-top:1px solid #ddd; margin:4px 0 }



/* -----------------------------
   Modal (export + generic)
----------------------------- */
.export-preview{position:relative; display:flex; align-items:center; justify-content:center}
.export-preview > img{display:block; max-width:100%; height:auto; image-rendering:auto}

#exportModal[hidden]{ display:none; }
#exportModal{
  position:fixed; inset:0; z-index:22000;
  background:rgba(0,0,0,.6);
  display:grid; place-items:center;
}
#exportModal .modal-box{
  width:min(920px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
max-height:calc(100dvh - 24px);
  background:var(--panel-2);
  border:1px solid #334;
  border-radius:var(--r-10);
  box-shadow:var(--shadow-2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#exportModal .modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
#exportModal .modal-head h2{
  margin:0;
}
#exportModal .modal-body{
  padding:12px;
  overflow:auto;
}
#exportModal .modal-body img{ max-height:100%; max-width:100%; width:auto; height:auto; }


/* -----------------------------
   Generic Modal
----------------------------- */

/* -----------------------------
   Tour overlay
----------------------------- */

/* overlay modal for star picker */
#star-picker{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  background:rgba(0,0,0,.6);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.star-picker-panel{
  background:#1a1f24;
  border:2px solid rgba(255,255,255,.2);
  border-radius:8px;
  min-width:260px;
  max-width:90vw;
  max-height:80vh;
  padding:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.8);
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.star-picker-title{
  font-size:16px;
  font-weight:600;
  text-align:center;
}
.star-picker-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-height:50vh;
  overflow-y:auto;
}
.star-btn{
  background:#2b323c;
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  padding:10px;
  font-size:13px;
  text-align:center;
  line-height:1.2;
  cursor:pointer;
}
.star-btn:hover{
  background:#39424f;
}
.star-close{
  background:#444c57;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  padding:6px 10px;
  color:#fff;
  font-size:13px;
  cursor:pointer;
}
.star-close:hover{
  background:#555f6e;
}


#tour[hidden]{ display:none !important; }
#tour{ position:fixed; inset:0; z-index:200000; }
#tour:not([hidden]){ display:block !important; }


.tour__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);           
}

.tour__spot{
  position:absolute; display:none; border:2px solid #fff; border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);
}


.tour__card{
  position:absolute; left:24px; top:24px;
  max-width:min(92vw,420px);
  background:#0f141a; color:#e8eef0; border:1px solid #334; border-radius:12px;
  padding:12px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.tour__ftr{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.tour__btn{ padding:8px 12px; border-radius:8px; background:#1b2430; color:#dfe7ea; border:1px solid #334; }
.tour__btn--accent{ background:#2563eb; border-color:#2563eb; color:#fff; }



#tour .tour__x{ display:none !important; }







#infoModal[hidden]{ display:none; }
#infoModal{ position:fixed; inset:0; z-index:2100; }
#infoModal .modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.60); }

#infoModal .modal__card{
  position:absolute; left:50%; top:8%;
  transform:translateX(-50%);
  width:min(920px,96vw);
  background:#0f141a; color:#cfd8dc;
  border:1px solid #334; border-radius:12px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

#infoModal .modal__header,
#infoModal .modal__footer{ padding:12px 16px; background:#0b0f12; }
.modal__header{ display:flex; align-items:center; gap:12px; }
.modal__close{ margin-left:auto; }


#infoModal .modal__body{ padding:16px; max-height:min(75vh,900px); overflow:auto; overscroll-behavior:contain; }


#infoModal .modal__close{
  margin-left:auto; font-size:22px; line-height:1;
  width:36px; height:36px; border-radius:8px;
}


#infoModal .modal__body kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em; padding:2px 6px;
  border:1px solid #556; border-bottom-width:2px; border-radius:4px; background:#121820;
}



html, body {
  height:auto;
  min-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
}




#wrap { overflow: hidden; }

#wrap{
  width:min(var(--content-max), 100vw - 2*var(--content-pad));
  margin-inline:auto;
}

body.pitch-wide-ui:not(.ui-hidden) #wrap{
  width:calc(100vw - 2*var(--content-pad));
  max-width:none;
}

@media (max-width:900px){
  #togglePitchWidth{
    display:none !important;
  }

  body.pitch-wide-ui:not(.ui-hidden) #wrap{
    width:min(var(--content-max), 100vw - 2*var(--content-pad));
  }
}



.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:1000; }
.modal .modal-box, .modal .modal__card{ width:min(92vw,860px); max-height:90vh; overflow:auto; }
.modal .modal-body img{ display:block; max-width:100%; height:auto; }


#exportModal .modal-box{
  max-width: min(96vw, 1200px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#exportModal .modal-body{
  flex: 1 1 auto;
  padding: 12px;
  overflow: auto;
  display: grid;
  place-items: center;
}
#exportModal .modal-body img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

#exportModal .modal-box{ height:min(90vh, 1200px); }   
#exportModal .modal-body{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
}
#exportModal .modal-body img{
  max-height:100%;
  max-width:100%;
  width:auto; height:auto;           
}



/* -----------------------------
   Legacy helpers off
----------------------------- */
#helper, #helperBar, .helper-bar, .helper-text{ display:none !important }



body.modeO .seg-toggle button.active,
body.modeD .seg-toggle button.active{ outline:none; }






.draw-active .stage{
  box-shadow:
    inset 0 0 0 3px var(--sketch-accent, var(--accent)),
    inset 0 0 0 2px rgba(255,255,255,.15);
}


/* -----------------------------
   Ghost Buttons
----------------------------- */

/* Ghost dock click effect */
#ghostDock button, .ghost-dock button{
  position:relative;
  transition:transform 110ms ease, box-shadow 140ms ease, filter 140ms ease, background-color 140ms ease;
  will-change:transform;
}
#ghostDock button:active, .ghost-dock button:active,
#ghostDock button.pressed, .ghost-dock button.pressed{
  transform:translateY(1px) scale(.94);
  filter:brightness(1.08);
  box-shadow:
    inset 0 0 0 9999px rgba(255,255,255,.08),
    0 0 0 2px rgba(70,177,255,.20),
    0 8px 18px rgba(0,0,0,.35);
}
#ghostDock button::after, .ghost-dock button::after{
  content:""; position:absolute; inset:0; border-radius:9999px; pointer-events:none;
  border:2px solid transparent;
}
#ghostDock button.clicked::after, .ghost-dock button.clicked::after{
  border-color:var(--header-accent, rgba(255,255,255,.42));
  animation:ghostRing .28s ease-out;
}
@keyframes ghostRing{
  from{ opacity:.88; transform:scale(.88) }
  to  { opacity:0; transform:scale(1.22) }
}
}







/* Ghost dock scroll when crowded */
@media (max-width:900px){
  .ghost-dock{ overflow:hidden; justify-content:center; }
}


#exportModal .modal-actions{
  display: flex;
  gap: 10px;
  align-items:center;
}
#exportModal .modal-actions--head{
  margin-left:auto;
}

#exportModal .modal-head .icon{
  margin-left:8px;
}
#exportModal .modal-head .modal-actions button{
  margin-top:0;
}

body.modal-ui-suppressed #infoBtn,
body.modal-ui-suppressed #toggleUI,
body.modal-ui-suppressed #pitchLockBtn{
  opacity:0 !important;
  pointer-events:none !important;
}


@media (max-width: 520px){
  #exportModal .modal-head{
    flex-wrap:wrap;
    row-gap:8px;
  }
  #exportModal .modal-actions{
    gap:8px;
    flex-wrap:wrap;
  }
  #exportModal .modal-actions--head{
    margin-left:0;
    width:100%;
  }
  #exportModal .modal-head .icon{
    margin-left:auto;
  }
}



/* Hide the standard bar when UI is hidden */
body.ui-hidden .bar { display: none }
/* In UI-hidden mode always hide the palette (roster uses overlay) */
body.ui-hidden .pal { display: none }




body.ui-hidden #wrap{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}



body.ui-hidden #wrap > *{
  margin-left:auto;
  margin-right:auto;
}

.leftControls{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
.leftControls .ui-fab{ margin:0; flex:0 0 auto }
.ui-fab{ flex:0 0 auto }


#toggleUI.ui-fab.is-floating,
#pitchLockBtn.ui-fab.is-floating,
#modeQuickToggleBtn.ui-fab.is-floating,
#topSideToggle.ui-fab.is-floating{
  position:fixed;
  top:max(12px, env(safe-area-inset-top, 0px) + 8px);
  z-index:12000;
  opacity:.28;
  transition:opacity var(--fast) linear;
}

#toggleUI.ui-fab.is-floating{
  left:max(56px, env(safe-area-inset-left, 0px) + 52px);
  right:auto;
}

#pitchLockBtn.ui-fab.is-floating{
  left:max(100px, env(safe-area-inset-left, 0px) + 96px);
  right:auto;
}

#modeQuickToggleBtn.ui-fab.is-floating{
  left:max(144px, env(safe-area-inset-left, 0px) + 140px);
  right:auto;
}

#topSideToggle.ui-fab.is-floating{
  left:max(188px, env(safe-area-inset-left, 0px) + 184px);
  right:auto;
}

#toggleUI.ui-fab.is-floating:hover,
#toggleUI.ui-fab.is-floating:focus-visible,
#pitchLockBtn.ui-fab.is-floating:hover,
#pitchLockBtn.ui-fab.is-floating:focus-visible,
#modeQuickToggleBtn.ui-fab.is-floating:hover,
#modeQuickToggleBtn.ui-fab.is-floating:focus-visible,
#topSideToggle.ui-fab.is-floating:hover,
#topSideToggle.ui-fab.is-floating:focus-visible{ opacity:.85 }

body.ui-hidden #infoBtn.ui-fab.info{
  display:none;
}

@media (max-width:900px){
  body.ui-hidden #toggleUI.ui-fab.is-floating,
  body.ui-hidden #pitchLockBtn.ui-fab.is-floating,
  body.ui-hidden #modeQuickToggleBtn.ui-fab.is-floating,
  body.ui-hidden #topSideToggle.ui-fab.is-floating,
  body.ui-hidden #toggleUI.ui-fab.is-sticky,
  body.ui-hidden #pitchLockBtn.ui-fab.is-sticky,
  body.ui-hidden #modeQuickToggleBtn.ui-fab.is-sticky,
  body.ui-hidden #topSideToggle.ui-fab.is-sticky{
    top:max(10px, env(safe-area-inset-top, 0px) + 6px);
  }

  body.ui-hidden #toggleUI.ui-fab.is-floating,
  body.ui-hidden #toggleUI.ui-fab.is-sticky{
    left:max(10px, env(safe-area-inset-left, 0px) + 6px);
  }

  body.ui-hidden #pitchLockBtn.ui-fab.is-floating,
  body.ui-hidden #pitchLockBtn.ui-fab.is-sticky{
    left:max(50px, env(safe-area-inset-left, 0px) + 46px);
  }

  body.ui-hidden #modeQuickToggleBtn.ui-fab.is-floating,
  body.ui-hidden #modeQuickToggleBtn.ui-fab.is-sticky{
    left:max(90px, env(safe-area-inset-left, 0px) + 86px);
  }

  body.ui-hidden #topSideToggle.ui-fab.is-floating,
  body.ui-hidden #topSideToggle.ui-fab.is-sticky{
    left:max(130px, env(safe-area-inset-left, 0px) + 126px);
    right:auto;
  }
}


body.ui-hidden .wrap{ height:100vh; height:100dvh; }

.fullscreen-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:max(6px, env(safe-area-inset-bottom, 0px));
  display:flex;
  justify-content:center;
  padding:0 12px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--fast) var(--e), transform var(--fast) var(--e), visibility var(--fast) var(--e);
  pointer-events:none;
  z-index:11000;
}

.fullscreen-footer__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  max-width:min(92vw, 760px);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(11, 15, 20, .45);
  backdrop-filter:blur(2px);
  color:rgba(232, 238, 240, .78);
  font-size:clamp(10px, 1.35vw, 12px);
  line-height:1.2;
  pointer-events:auto;
}

.fullscreen-footer__copy{
  white-space:nowrap;
}

.fullscreen-footer a{
  color:rgba(232, 238, 240, .84);
  text-decoration:underline;
  text-underline-offset:2px;
}

.fullscreen-footer a:hover,
.fullscreen-footer a:focus-visible{
  color:#fff;
}

.fullscreen-footer__support{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px 4px;
  border-radius:999px;
  background:#5F7FFF;
  color:#fff !important;
  border:1px solid #000;
  text-decoration:none !important;
  font-weight:800;
  text-shadow:0 1px 0 #000, 0 0 2px #000;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 6px 14px rgba(0,0,0,.22);
}

.fullscreen-footer__support::before{
  content:"💀";
  line-height:1;
  filter:drop-shadow(0 1px 0 #000);
}

.fullscreen-footer__support::after{
  content:"";
  inline-size:10px;
  block-size:10px;
  border-radius:50%;
  background:#FFDD00;
  border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

body:not(.ui-hidden) .fullscreen-footer{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media (max-width:900px){
  .fullscreen-footer{
    left:0;
    right:0;
    bottom:0;
    justify-content:stretch;
    padding:0;
    width:100vw;
  }

  .fullscreen-footer__inner{
    width:100vw;
    max-width:none;
    min-height:32px;
    justify-content:center;
    flex-wrap:nowrap;
    gap:6px;
    padding:
      4px
      max(8px, env(safe-area-inset-right, 0px) + 8px)
      calc(4px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px) + 8px);
    border-radius:0;
    font-size:10px;
    overflow:hidden;
  }

  .fullscreen-footer__copy,
  .fullscreen-footer a{
    flex:0 1 auto;
    min-width:0;
  }

  #appVersionFooter{
    font-size:10px;
  }

  .fullscreen-footer__support{
    padding-inline:8px;
  }
}

body[data-app-mode="playbook"] .fullscreen-footer__inner{
  pointer-events:none;
}

body[data-app-mode="playbook"] .fullscreen-footer__support{
  pointer-events:auto;
}


.topControls{
  top: max(8px, env(safe-area-inset-top,0px));
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px;
  z-index:12000;
  pointer-events:none;      
}

.topControls > *{
  pointer-events:auto;      
}


.leftControls{
  display:flex;
  align-items:center;
  gap:8px;
}

.leftControls{
  margin-right: 1em;
}

.leftControls .ui-fab{
  flex:0 0 auto;
  opacity:.9;
}
.leftControls .ui-fab:hover,
.leftControls .ui-fab:focus-visible{ opacity:1; }


.auth{
  display:flex;
  align-items:center;
  gap:8px;
}
.auth button,
.auth .badge{ font-size:.85rem; }


body.ui-hidden .topControls .auth{ display:none; }

body[data-mvp="1"] .topControls .auth,
body[data-mvp="1"] #modeRoster,
body[data-mvp="1"] #modePlays,
body[data-mvp="1"] #modeGame,
body[data-mvp="1"] #rosterOverlay,
body[data-mvp="1"] #rosterPanel{
  display:none !important;
}


#toggleUI.ui-fab {
  position: static;
}


#toggleUI.ui-fab.is-sticky,
#pitchLockBtn.ui-fab.is-sticky,
#modeQuickToggleBtn.ui-fab.is-sticky,
#topSideToggle.ui-fab.is-sticky {
  position: fixed;
  top:  max(12px, env(safe-area-inset-top, 0px) + 8px);
  z-index: 12000;
  right:auto;
}

#toggleUI.ui-fab.is-sticky{
  left:max(56px, env(safe-area-inset-left, 0px) + 52px);
}

#pitchLockBtn.ui-fab.is-sticky{
  left:max(100px, env(safe-area-inset-left, 0px) + 96px);
}

#modeQuickToggleBtn.ui-fab.is-sticky{
  left:max(144px, env(safe-area-inset-left, 0px) + 140px);
}

#topSideToggle.ui-fab.is-sticky{
  left:max(188px, env(safe-area-inset-left, 0px) + 184px);
  right:auto;
}

#infoBtn.ui-fab.info.is-sticky{
  position:fixed;
  top:max(12px, env(safe-area-inset-top, 0px) + 8px);
  left:max(12px, env(safe-area-inset-left,0px) + 8px);
  z-index:12000;
}

body.ui-hidden #toggleUI,
body.ui-hidden #pitchLockBtn,
body.ui-hidden #modeQuickToggleBtn,
body.ui-hidden #topSideToggle {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
body.ui-hidden #toggleUI:hover,
body.ui-hidden #pitchLockBtn:hover,
body.ui-hidden #modeQuickToggleBtn:hover,
body.ui-hidden #topSideToggle:hover {
  opacity: 0.85;
}

#returnTopBtn{ display:none; }

@media (max-width:720px){
  body:not(.ui-hidden) #returnTopBtn{
    display:inline-flex;
    position:fixed;
    right:max(14px, env(safe-area-inset-right, 0px) + 10px);
    bottom:max(52px, env(safe-area-inset-bottom, 0px) + 48px);
    z-index:12000;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    border:2px solid color-mix(in srgb, var(--mode-accent) 48%, rgba(255,255,255,.24));
    background:linear-gradient(180deg, rgba(27,35,44,.96), rgba(9,13,18,.98));
    color:#f4f8fb;
    box-shadow:0 12px 28px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb, var(--mode-accent) 20%, transparent) inset;
    font-size:20px;
    line-height:1;
    opacity:.88;
    transition:opacity .2s ease, transform .2s ease;
  }

  body:not(.ui-hidden) #returnTopBtn:hover,
  body:not(.ui-hidden) #returnTopBtn:focus-visible{
    opacity:1;
    transform:translateY(-2px);
    outline:2px solid color-mix(in srgb, var(--mode-accent) 62%, #ffffff 20%);
    outline-offset:2px;
  }
}



.side-col { position: relative; }


.side-guard{
  position:absolute; inset:0; display:none;
  cursor:pointer; 
}


body.modeD .side-col.sideO .side-guard{ display:block; }
body.modeO .side-col.sideD .side-guard{ display:block; }


/* line above: #exportModal .modal-body img{ max-height:100%; max-width:100%; width:auto; height:auto; } */
.auth-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.7);
  z-index: 200000;
}
.auth-loader[hidden] { display: none !important; }
.app-loading-curtain,
.app-busy-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(42, 189, 255, .14), transparent 32%),
    rgba(5, 9, 14, .92);
  color: var(--ink);
  z-index: 210000;
  padding: 24px;
}
.app-loading-curtain[hidden],
.app-busy-overlay[hidden] {
  display: none !important;
}
body:not(.app-loading) .app-loading-curtain {
  display: none;
}
.app-loading-curtain__panel,
.app-busy-overlay__panel {
  width: min(360px, 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-10);
  background: rgba(11, 17, 24, .94);
  box-shadow: var(--shadow-2);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-loading-curtain__text,
.app-busy-overlay__content {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.app-loading-curtain__text strong,
.app-busy-overlay__content strong {
  font-family: var(--ui-font);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.app-loading-curtain__text span,
.app-busy-overlay__content span {
  color: var(--muted);
  font-size: 13px;
}
.app-loading-curtain__spinner,
.app-busy-overlay__spinner {
  width: 34px;
  height: 34px;
  border-width: 4px;
  flex: 0 0 auto;
}
.app-busy-overlay {
  background: rgba(5, 9, 14, .62);
  z-index: 205000;
}
.app-busy-overlay__panel {
  width: min(400px, 100%);
}
.app-busy-overlay__bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  margin-top: 8px;
}
.app-busy-overlay__bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  animation: appBusyBar 1.1s ease-in-out infinite;
}
body.tourplay-import-busy {
  cursor: progress;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes appBusyBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(250%); }
}


.piece-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
  z-index: 15000;
  max-width: 160px;
}
.piece-tooltip.hidden {
  display: none;
}


@media (hover: hover) {
  .piece:not(.ball):hover {
    box-shadow: 0 0 0 2px var(--sel), 0 2px 8px rgba(0,0,0,.35);
  }
  .piece.piece-icon-mode:not(.ball):hover{
    transform:scale(1.02);
    filter:brightness(1.03);
  }
}


/* --- Roster Overlay (desktop float, mobile bottom-sheet) --- */
.roster-overlay{
  position: fixed;
  background: var(--panel-2);
  color: var(--ink);
  border-radius: var(--r-10);
  box-shadow: var(--shadow-2);
  padding: 12px;
  z-index: 15000; /* above ghost dock / menus */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.roster-overlay[hidden]{ display:none !important; }

.roster-overlay-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  touch-action:none;
}

.roster-overlay-actions{ display:flex; gap:6px; }

.roster-overlay-btn{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  padding: 4px 8px;
  cursor: pointer;
  color: var(--ink);
  font-size: .9rem;
}

.roster-overlay-content{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Only show/position overlay in roster mode + UI hidden */
@media (min-width: 768px){
  body.ui-hidden[data-app-mode="roster"] .roster-overlay{
    top: 10px;
    right: 10px;
    width: min(520px, 34vw);
    max-height: 90vh;
  }
}
@media (max-width: 767px){
  body.ui-hidden[data-app-mode="roster"] .roster-overlay{
    left: 0;
    right: 0;

    /* leave room for the ghost dock at the bottom */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);

    width: 100%;

    /* taller sheet, but not covering dock */
    max-height: 52vh;

    padding-bottom: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}


/* Table inside overlay */
.roster-overlay-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.roster-overlay-table th,
.roster-overlay-table td{
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.roster-overlay-table th{
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--panel-2);
  z-index: 1;
}
.roster-overlay-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.02);
}
.roster-overlay-table td:last-child{
  text-align: right;
}


/* Desktop: float right */
@media (min-width:768px){
  body.ui-hidden[data-app-mode="roster"] .roster-overlay{
    top:10px;
    right:10px;
    width:min(420px, 34vw);
    max-height:90vh;
  }
}

/* Mobile: bottom-sheet half screen */
@media (max-width:767px){
  body.ui-hidden[data-app-mode="roster"] .roster-overlay{
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:50vh;
    max-height:50vh;
    border-radius:16px 16px 0 0;
  }
}



/*Temporary Overrides
.auth{display:none;
}*/






@media (hover:none) and (pointer:coarse){
  .bench-container .piece{
    touch-action:none;
  }
}

/* Local formations + presets */
.preset-controls{
  display:grid;
  gap:6px;
  margin-top:4px;
}
.preset-controls label{
  font-size:.78rem;
  color:var(--muted);
}
.preset-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.preset-row select,
.preset-row button{
  margin-top:0;
}

.formation-load-modal[hidden]{
  display:none !important;
}
.formation-load-modal{
  position:fixed;
  inset:0;
  z-index:22000;
}
.formation-load-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
}
.formation-load-card{
  position:absolute;
  left:50%;
  top:10%;
  transform:translateX(-50%);
  width:min(680px, calc(100vw - 24px));
  max-height:calc(100vh - 48px);
  background:rgba(13,27,39,.96);
  border:1px solid #334;
  border-radius:12px;
  box-shadow:var(--shadow-2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.formation-load-header,
.formation-load-footer{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:rgba(8,20,30,.96);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.formation-load-footer{
  border-bottom:0;
  border-top:1px solid rgba(255,255,255,.1);
  justify-content:flex-end;
}
.formation-load-header h2{
  margin:0;
  font-size:1rem;
}
.formation-load-close{
  margin-left:auto;
  width:34px;
  height:34px;
  border-radius:8px;
  margin-top:0;
}
.formation-load-list{
  padding:12px;
  overflow:auto;
  display:grid;
  gap:8px;
}
.formation-load-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:8px 10px;
  background:rgba(255,255,255,.03);
}
.formation-load-name{
  font-weight:600;
}
.formation-load-created{
  color:var(--muted);
  font-size:.82rem;
  white-space:nowrap;
}
.formation-load-actions{
  display:flex;
  gap:6px;
}
.formation-load-actions button{
  margin-top:0;
}
.formation-load-actions .danger{
  border-color:rgba(255,59,48,.35);
  color:#ffd6d6;
  background:linear-gradient(#2a1416,#1a0f11);
}
.formation-load-empty{
  margin:0;
  padding:10px;
  color:var(--muted);
  text-align:center;
}

@media (max-width: 640px){
  .formation-load-card{
    top:8px;
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
  }
  .formation-load-item{
    grid-template-columns:1fr;
    gap:6px;
  }
  .formation-load-created{
    white-space:normal;
  }
}



.import-side-modal[hidden]{
  display:none !important;
}
.import-side-modal{
  position:fixed;
  inset:0;
  z-index:19500;
}
.import-side-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
}
.import-side-card{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(420px, calc(100vw - 24px));
  background:var(--panel-2);
  border:1px solid #334;
  border-radius:12px;
  box-shadow:var(--shadow-2);
  padding:14px;
}
.import-side-card h3{
  margin:0 0 8px;
}
.import-side-card p{
  margin:0 0 12px;
  color:var(--muted);
}
.import-side-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.import-side-actions button,
.import-side-cancel{
  margin-top:0;
}
.import-side-cancel{
  width:100%;
}
@media (min-width:560px){
  .import-side-actions{
    grid-template-columns:1fr 1fr;
  }
}


/* --- UI polish: settings collapse, import side CTA clarity, premium dugout --- */
.tool-panel-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  user-select:none;
}

.tool-panel-toggle:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}


.import-side-backdrop{
  background:rgba(5,8,11,.72);
}

.import-side-card{
  width:min(450px, calc(100vw - 22px));
  background:linear-gradient(180deg, rgba(30,36,43,.98), rgba(19,23,28,.97));
  border:1px solid rgba(213,223,235,.28);
  border-radius:14px;
  box-shadow:0 20px 54px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding:16px;
}

.import-side-card h3{
  font-size:1.04rem;
  color:#edf2f8;
}

.import-side-card p{
  margin:0 0 14px;
  color:#b9c4d0;
}

.import-side-actions{
  gap:10px;
}

.import-side-actions button{
  margin:0;
  min-height:52px;
  width:100%;
  font:700 .92rem/1.1 system-ui,sans-serif;
  letter-spacing:.01em;
  border-radius:10px;
  border:1px solid rgba(235,243,250,.26);
  color:#f2f6fb;
  background:linear-gradient(180deg, rgba(124,137,151,.34), rgba(71,81,92,.35));
  box-shadow:0 8px 16px rgba(0,0,0,.24);
}

.import-side-actions button[data-import-side="O"]{
  border-color:rgba(255,123,123,.54);
  background:linear-gradient(180deg, rgba(169,73,73,.6), rgba(110,52,52,.55));
}

.import-side-actions button[data-import-side="D"]{
  border-color:rgba(123,182,255,.56);
  background:linear-gradient(180deg, rgba(66,106,154,.66), rgba(48,78,119,.58));
}

.import-side-actions button:hover,
.import-side-actions button:focus-visible{
  filter:brightness(1.07);
}

.import-side-cancel{
  margin-top:10px;
  min-height:42px;
  border-radius:9px;
  border:1px solid rgba(227,235,245,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color:#d8e0e8;
}

.formation-dugout{
  width:min(420px, 34vw);
  padding:11px;
  border-radius:13px;
  border:1px solid rgba(201,212,224,.34);
  background:linear-gradient(180deg, rgba(31,36,42,.97), rgba(20,24,29,.95));
  box-shadow:0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(7px) saturate(1.06);
}

.formation-dugout-head{
  padding:2px 1px 1px;
}

.formation-dugout-head strong{
  font-size:.86rem;
  letter-spacing:.03em;
  color:#f0f4f8;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}

.formation-dugout-counts{
  font-size:.73rem;
  letter-spacing:.03em;
  color:rgba(235,240,246,.92);
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}

.dugout-zone{
  border:1px solid rgba(227,235,244,.18);
  background:linear-gradient(180deg, rgba(56,63,73,.42), rgba(35,40,47,.3));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}

.dugout-zone-label{
  letter-spacing:.09em;
  color:rgba(228,236,244,.78);
}

.formation-dugout-close{
  padding:5px 9px;
  border:1px solid rgba(224,232,241,.22);
  background:linear-gradient(180deg, rgba(120,131,145,.22), rgba(72,80,90,.2));
  color:#e8eef5;
}

@media (max-width:560px){
  .import-side-card{
    width:calc(100vw - 16px);
    padding:14px;
  }

  .import-side-actions button{
    min-height:54px;
    font-size:.95rem;
  }
}

/* --- Final UI asset integration --- */
body.ui-assets-enabled{
  background:
    var(--asset-bg-app) center/cover fixed no-repeat,
    radial-gradient(circle at top, rgba(255,255,255,.05), transparent 38%),
    linear-gradient(180deg, #0a0e13 0%, #0f151c 42%, #090d12 100%);
}

body.ui-assets-enabled .bar{
  background:
    linear-gradient(180deg, rgba(18,24,31,.96), rgba(10,14,20,.94)),
    var(--asset-bg-app) center/cover no-repeat;
  border-color:rgba(219,199,164,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}

body.ui-assets-enabled .tool-overlay.panel-art-shell,
body.ui-assets-enabled .formation-dugout.panel-art-shell,
body.ui-assets-enabled .import-side-card.panel-art-shell,
body.ui-assets-enabled .formation-load-card.panel-art-shell,
body.ui-assets-enabled .modal__card.panel-art-shell,
body.ui-assets-enabled .modal-box.panel-art-shell{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    var(--ui-panel-art-image);
  background-size:cover, cover;
  background-position:center;
  background-repeat:no-repeat;
  border-color:rgba(219,199,164,.22);
  box-shadow:0 18px 44px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.03) inset;
}

body.ui-assets-enabled .tool-overlay.panel-art-shell::after,
body.ui-assets-enabled .formation-dugout.panel-art-shell::after,
body.ui-assets-enabled .import-side-card.panel-art-shell::after,
body.ui-assets-enabled .formation-load-card.panel-art-shell::after,
body.ui-assets-enabled .modal__card.panel-art-shell::after,
body.ui-assets-enabled .modal-box.panel-art-shell::after,
body.ui-assets-enabled .fullscreen-footer__inner.panel-art-shell::after,
body.ui-assets-enabled .ghost-dock.panel-art-shell::after{
  opacity:.7;
}

body.ui-assets-enabled .ghost-dock.panel-art-shell::after{
  opacity:.18;
}

body.ui-assets-enabled .tool-title{
  background:
    linear-gradient(180deg, rgba(11,15,20,.88), rgba(11,15,20,.74)),
    var(--asset-bg-footer) center/cover no-repeat;
  color:#eff4f7;
  border-bottom-color:rgba(219,199,164,.18);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}

body.ui-assets-enabled .tool-title.has-ui-icon{
  gap:.55rem;
}

body.ui-assets-enabled .tool-group button,
body.ui-assets-enabled .tool-overlay button,
body.ui-assets-enabled .formation-load-footer button,
body.ui-assets-enabled .formation-load-actions button,
body.ui-assets-enabled .modal-actions button,
body.ui-assets-enabled .roster-overlay-btn{
  background:
    linear-gradient(180deg, rgba(73,82,95,.3), rgba(33,40,49,.42)),
    var(--asset-panel-texture) center/cover no-repeat;
  border-color:rgba(219,199,164,.18);
  color:#edf3f7;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}

body.ui-assets-enabled .tool-group button.has-ui-icon,
body.ui-assets-enabled .tool-overlay button.has-ui-icon,
body.ui-assets-enabled .formation-load-footer button.has-ui-icon,
body.ui-assets-enabled .formation-load-actions button.has-ui-icon,
body.ui-assets-enabled .modal-actions button.has-ui-icon,
body.ui-assets-enabled .roster-overlay-btn.has-ui-icon,
body.ui-assets-enabled .formation-dugout-close.has-ui-icon,
body.ui-assets-enabled .import-side-card button.has-ui-icon{
  justify-content:flex-start;
}

body.ui-assets-enabled .tool-group button:hover,
body.ui-assets-enabled .tool-group button:focus-visible,
body.ui-assets-enabled .tool-overlay button:hover,
body.ui-assets-enabled .tool-overlay button:focus-visible,
body.ui-assets-enabled .formation-load-footer button:hover,
body.ui-assets-enabled .formation-load-footer button:focus-visible,
body.ui-assets-enabled .modal-actions button:hover,
body.ui-assets-enabled .modal-actions button:focus-visible,
body.ui-assets-enabled .roster-overlay-btn:hover,
body.ui-assets-enabled .roster-overlay-btn:focus-visible,
body.ui-assets-enabled .formation-dugout-close:hover,
body.ui-assets-enabled .formation-dugout-close:focus-visible{
  border-color:rgba(219,199,164,.3);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

body.ui-assets-enabled .leftControls .ui-fab{
  background:
    linear-gradient(180deg, rgba(40,48,59,.94), rgba(15,20,27,.95)),
    var(--asset-panel-texture) center/cover no-repeat;
  color:#edf3f7;
  box-shadow:0 12px 28px rgba(0,0,0,.34);
}

body.ui-assets-enabled .leftControls .ui-fab:not(.side-toggle-btn){
  border-color:rgba(219,199,164,.18);
}

body.ui-assets-enabled .leftControls .ui-fab::before{
  opacity:.98;
}

body.ui-assets-enabled .ghost-dock{
  --header-accent:#d6c19a;
  --g-tab-bg:rgba(7,10,14,.74);
  --g-btn-bg:rgba(14,18,24,.94);
}

body.ui-assets-enabled .ghost-dock.panel-art-shell{
  background-image:
    linear-gradient(180deg, rgba(25,33,42,.56), rgba(13,18,24,.34)),
    var(--asset-panel-ghost-dock);
  background-size:cover, cover;
  background-repeat:no-repeat;
  background-position:center;
}

body.ui-assets-enabled .ghost-tabs{
  background:
    linear-gradient(180deg, rgba(10,14,19,.84), rgba(8,11,15,.78)),
    var(--asset-panel-texture) center/cover no-repeat;
  border:1px solid rgba(219,199,164,.14);
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}

body.ui-assets-enabled .ghost-tabs button{
  background:linear-gradient(180deg, rgba(42,49,59,.88), rgba(18,23,30,.92));
  border-color:rgba(219,199,164,.14);
}

body.ui-assets-enabled .ghost-tabs button.active{
  background:linear-gradient(180deg, #dcc8a1, #baa073);
  color:#11161c;
  box-shadow:0 10px 18px rgba(0,0,0,.22);
}

body.ui-assets-enabled .ghost-btn{
  color:#edf3f7;
  border-color:rgba(219,199,164,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.3);
}

body.ui-assets-enabled .ghost-playbook-sketch-toggle.is-playbook-on,
body.ui-assets-enabled .ghost-btn[data-playbook-tool].is-active,
body.ui-assets-enabled .ghost-btn--playbook-chip.is-active{
  border-color:#59d98e;
  box-shadow:0 0 0 1px rgba(89,217,142,.24) inset, 0 10px 22px rgba(0,0,0,.32);
}

body.ui-assets-enabled .ghost-formation-sketch-toggle.is-formation-on,
body.ui-assets-enabled .ghost-btn[data-formation-sketch-tool].is-active,
body.ui-assets-enabled .ghost-btn--formation-chip.is-active{
  border-color:#59d98e;
  box-shadow:0 0 0 1px rgba(89,217,142,.24) inset, 0 10px 22px rgba(0,0,0,.32);
}

body.ui-assets-enabled .ghost-playbook-sketch-toggle.is-playbook-off{
  border-color:#f2545b;
  box-shadow:0 0 0 1px rgba(242,84,91,.2) inset, 0 10px 22px rgba(0,0,0,.32);
}

body.ui-assets-enabled .ghost-formation-sketch-toggle.is-formation-off{
  border-color:#f2545b;
  box-shadow:0 0 0 1px rgba(242,84,91,.2) inset, 0 10px 22px rgba(0,0,0,.32);
}

body.ui-assets-enabled .ghost-btn.has-ui-icon:not(.ui-icon-only):not(.side-toggle-btn){
  inline-size:auto;
  min-inline-size:var(--g-size);
  padding:0 10px;
  gap:6px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.04em;
}

body.ui-assets-enabled .ghost-btn.has-ui-icon.ui-icon-only{
  inline-size:var(--g-size);
  padding:0;
  overflow:hidden;
}

body.ui-assets-enabled .ghost-btn.has-ui-icon::before{
  inline-size:.95rem;
  block-size:.95rem;
  flex-basis:.95rem;
}

body.ui-assets-enabled .formation-dugout-head strong.has-ui-icon{
  gap:.5rem;
}

body.ui-assets-enabled .formation-dugout-counts{
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    var(--asset-panel-texture) center/cover no-repeat;
  border-color:rgba(219,199,164,.16);
}

body.ui-assets-enabled .dugout-zone{
  background:
    linear-gradient(180deg, rgba(47,55,64,.36), rgba(27,33,40,.34)),
    var(--asset-panel-texture) center/cover no-repeat;
  border-color:rgba(219,199,164,.14);
}

body.ui-assets-enabled .fullscreen-footer__inner.panel-art-shell{
  background-image:
    var(--asset-bg-footer),
    var(--asset-panel-footer),
    linear-gradient(180deg, rgba(11,15,20,.74), rgba(11,15,20,.56));
  background-size:cover, cover, cover;
  background-repeat:no-repeat;
  background-position:center;
  border:1px solid rgba(219,199,164,.14);
  box-shadow:0 10px 20px rgba(0,0,0,.24);
}

body.ui-assets-enabled .fullscreen-footer__inner a.has-ui-icon{
  gap:.35rem;
  text-decoration:none;
}

body.ui-assets-enabled .fullscreen-footer__inner a.has-ui-icon::before{
  --ui-icon-size:.8rem;
  opacity:.75;
}

body.ui-assets-enabled .import-side-card button.has-ui-icon,
body.ui-assets-enabled .formation-load-footer button.has-ui-icon,
body.ui-assets-enabled .modal-actions button.has-ui-icon{
  gap:.55rem;
}

body.ui-assets-enabled .modal__close.ui-icon-only,
body.ui-assets-enabled .formation-load-close.ui-icon-only,
body.ui-assets-enabled .roster-overlay-btn.ui-icon-only{
  gap:0;
}

/* Mode accent pass: keep side colours Red/Blue, and let app mode tint the chrome. */
#modeQuickToggleBtn.ui-fab,
#modeQuickToggleBtn.ui-fab.is-floating,
#modeQuickToggleBtn.ui-fab.is-sticky,
body.ui-assets-enabled .leftControls #modeQuickToggleBtn.ui-fab{
  --quick-mode-accent:var(--mode-formation);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--quick-mode-accent) 30%, rgba(40,48,59,.94)), rgba(15,20,27,.95)),
    var(--asset-panel-texture) center/cover no-repeat;
  border-color:var(--quick-mode-accent);
  color:#edf3f7;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--quick-mode-accent) 35%, transparent) inset, 0 12px 28px rgba(0,0,0,.34);
}

body[data-app-mode="formation"] #modeQuickToggleBtn.ui-fab,
body[data-app-mode="formation"].ui-assets-enabled .leftControls #modeQuickToggleBtn.ui-fab{
  --quick-mode-accent:var(--mode-formation);
}

body[data-app-mode="playbook"] #modeQuickToggleBtn.ui-fab,
body[data-app-mode="playbook"].ui-assets-enabled .leftControls #modeQuickToggleBtn.ui-fab{
  --quick-mode-accent:var(--mode-playbook);
}

#modeQuickToggleBtn.ui-fab:hover,
#modeQuickToggleBtn.ui-fab:focus-visible,
#modeQuickToggleBtn.ui-fab.is-active{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--quick-mode-accent) 72%, #ffffff 8%), color-mix(in srgb, var(--quick-mode-accent) 86%, #111820 14%)),
    var(--asset-panel-texture) center/cover no-repeat;
  border-color:var(--quick-mode-accent);
  color:#071016;
  opacity:1;
}

body.ui-assets-enabled .bar,
body.ui-assets-enabled .tool-overlay.panel-art-shell,
body.ui-assets-enabled .formation-dugout.panel-art-shell,
body.ui-assets-enabled .import-side-card.panel-art-shell,
body.ui-assets-enabled .formation-load-card.panel-art-shell,
body.ui-assets-enabled .modal__card.panel-art-shell,
body.ui-assets-enabled .modal-box.panel-art-shell,
.playbook-panel,
#wrap{
  border-color:color-mix(in srgb, var(--mode-accent) 28%, rgba(219,199,164,.18));
  box-shadow:0 18px 44px rgba(0,0,0,.38), 0 0 0 1px color-mix(in srgb, var(--mode-accent) 16%, transparent) inset;
}

body.ui-assets-enabled .bar{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mode-accent) 9%, rgba(18,24,31,.96)), rgba(10,14,20,.94)),
    var(--asset-bg-app) center/cover no-repeat;
}

body.ui-assets-enabled .tool-group button,
body.ui-assets-enabled .tool-overlay button,
body.ui-assets-enabled .formation-load-footer button,
body.ui-assets-enabled .formation-load-actions button,
body.ui-assets-enabled .modal-actions button,
body.ui-assets-enabled .roster-overlay-btn{
  border-color:color-mix(in srgb, var(--mode-accent) 28%, rgba(219,199,164,.18));
  box-shadow:0 8px 18px rgba(0,0,0,.2), 0 0 0 1px color-mix(in srgb, var(--mode-accent) 10%, transparent) inset;
}

body.ui-assets-enabled .tool-title{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mode-accent) 10%, rgba(11,15,20,.88)), rgba(11,15,20,.74)),
    var(--asset-bg-footer) center/cover no-repeat;
  border-color:color-mix(in srgb, var(--mode-accent) 24%, rgba(219,199,164,.18));
}

body.ui-assets-enabled .ghost-dock.panel-art-shell{
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--mode-accent) 12%, rgba(25,33,42,.56)), rgba(13,18,24,.34)),
    var(--asset-panel-ghost-dock);
  border-color:color-mix(in srgb, var(--mode-accent) 24%, rgba(219,199,164,.13));
  box-shadow:0 -16px 46px rgba(0,0,0,.34), 0 0 0 1px color-mix(in srgb, var(--mode-accent) 20%, transparent) inset;
}

body.ui-assets-enabled .ghost-tabs{
  border-color:color-mix(in srgb, var(--mode-accent) 24%, rgba(219,199,164,.14));
  box-shadow:0 12px 24px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--mode-accent) 12%, transparent) inset;
}

#wrap{
  border:1px solid color-mix(in srgb, var(--mode-accent) 18%, rgba(255,255,255,.08));
  border-radius:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--mode-accent) 6%, rgba(9,13,18,.88)), rgba(9,13,18,.54));
}

.stage{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--mode-accent) 18%, transparent), 0 22px 58px rgba(0,0,0,.34);
}

@media (max-width:900px){
  body.ui-assets-enabled .ghost-btn.has-ui-icon:not(.ui-icon-only):not(.side-toggle-btn){
    padding:0 8px;
    gap:5px;
    font-size:9px;
  }

  body.ui-assets-enabled .ghost-tabs button{
    min-inline-size:0;
    padding-inline:4px;
  }
  body.ui-assets-enabled .ghost-tabs .has-ui-icon{
    --ui-icon-size:.78rem;
    --ui-icon-gap:.22rem;
  }
}

@media (max-width:900px){
  body{
    gap:0;
    padding:0;
  }

  .topControls,
  .bar,
  .pal,
  #wrap,
  #playbookPanel{
    width:100vw;
    max-width:100vw;
  }

  #topbar.panel{
    width:100%;
    max-width:100%;
  }

  .bar{
    border-left:0;
    border-right:0;
    border-radius:0;
    margin:0;
    padding:
      max(10px, env(safe-area-inset-top, 0px) + 6px)
      max(10px, env(safe-area-inset-right, 0px) + 10px)
      10px
      max(10px, env(safe-area-inset-left, 0px) + 10px);
  }

  .pal{
    padding-inline:max(8px, env(safe-area-inset-left, 0px) + 8px) max(8px, env(safe-area-inset-right, 0px) + 8px);
  }

  #wrap{
    margin-inline:0;
  }
}