:root{
  --bg:#0f172a; --card:#1e293b; --card2:#25324a; --text:#f1f5f9; --sub:#94a3b8;
  --accent:#22d3ee; --danger:#f87171; --line:#334155;
  --c-warmup:#f59e0b; --c-individual:#3b82f6; --c-team:#22c55e;
  --c-conditioning:#ef4444; --c-water:#06b6d4; --c-custom:#a855f7;
  --safe-top:env(safe-area-inset-top); --safe-bottom:env(safe-area-inset-bottom);
}
/* Universal hide rule. Root-cause fix: every other ".hidden" rule in this file
   is scoped to a specific class combo (.screen.hidden, .overlay.hidden, etc.),
   so any element toggled with plain classList.add('hidden') that ISN'T one of
   those specific types was never actually hidden — it just kept rendering,
   stacked on top of/below whatever was supposed to replace it. This is the
   actual cause behind the calendar showing Month+Week+Day all at once, the
   Playbook and Coaches Thoughts list/detail levels overlapping, and several
   cards/buttons (Danger Zone, Delete Play, etc.) always being visible
   regardless of state. !important guarantees this always wins over any other
   display rule for the same element, regardless of selector order below. */
.hidden{display:none !important;}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; overscroll-behavior:none;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  /* Plain 100vh is the height of the LARGEST possible mobile viewport (address
     bar hidden), not what's actually visible right now. Since body clips
     overflow, whenever the browser chrome (address bar / toolbar) is showing
     — which on a phone is most of the time, and even more so in landscape —
     the extra height at the bottom (i.e. the bottom tab bar) gets clipped off
     below the fold. That's the "buttons missing on my phone" bug. --app-height
     is kept in sync with the real visible height by JS (see setAppHeight in
     app.js); 100dvh is a modern-browser fallback for before that JS runs. */
  height:100vh;
  height:100dvh;
  height:var(--app-height, 100dvh);
}
#app{flex:1; display:flex; flex-direction:row; min-height:0;}
#appMain{flex:1; display:flex; flex-direction:column; min-height:0; min-width:0;}

/* ---- Sidebar (desktop/tablet layout) ---- */
.sidebar{
  display:flex; flex-direction:column; width:230px; flex-shrink:0;
  background:var(--card); border-right:1px solid var(--line); padding:18px 12px;
  gap:2px;
}
.sidebar.hidden{display:none;}
.sidebar-brand{padding:0 8px 16px;}
.sidebar-brand .sb-team{font-size:15px; font-weight:800;}
.sidebar-brand .sb-role{margin-top:4px;}
.sb-logo{width:40px; height:40px; border-radius:10px; object-fit:cover; margin-bottom:8px; display:block;}
.sb-logo.hidden{display:none;}
.sidebar-nav{display:flex; flex-direction:column; gap:2px;}
.sidebar-divider{height:1px; background:var(--line); margin:14px 4px;}
.sidebarBtn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; color:var(--sub); border-radius:10px;
  padding:11px 10px; font-size:14px; font-weight:600;
}
.sidebarBtn .ic{font-size:18px; width:22px; text-align:center;}
.sidebarBtn.active{background:var(--card2); color:var(--accent);}
.sidebarBtn.secondary{font-size:13px; font-weight:600;}
.sidebar-signout{margin-top:auto;}

@media (max-width: 899px){
  .sidebar{display:none !important;}
}
@media (min-width: 900px){
  nav.tabbar{display:none !important;}
  .palette-wrap.hidden{display:none;}
}

/* ---- Dashboard (Home) ---- */
.dash-grid{display:flex; flex-direction:column; gap:14px;}
@media (min-width: 900px){
  .dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
}
.dash-card h2{display:flex; align-items:center; gap:6px;}
.dash-row{display:flex; align-items:center; justify-content:space-between; padding:9px 2px; border-bottom:1px solid var(--line); gap:8px;}
.dash-row:last-child{border-bottom:none;}
.dash-row .dr-label{font-size:13.5px; font-weight:600;}
.dash-row .dr-sub{font-size:11.5px; color:var(--sub); margin-top:1px;}
.dash-row .dr-meta{font-size:12px; color:var(--sub); text-align:right; white-space:nowrap;}
.dash-cta{margin-top:10px;}

/* ---- Templates list & Documents list (shared simple card-list pattern) ---- */
.list-card-row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.list-card-row .lc-title{font-weight:700; font-size:14.5px;}
.list-card-row .lc-actions{display:flex; gap:6px; flex-shrink:0;}
header.topbar{
  padding:calc(14px + var(--safe-top)) 16px 12px; background:var(--card);
  border-bottom:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:20;
}
header.topbar h1{margin:0; font-size:18px; font-weight:700;}
header.topbar p{margin:2px 0 0; font-size:12px; color:var(--sub);}
header.topbar .role-badge{font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px; background:var(--card2); border:1px solid var(--line); color:var(--sub); text-transform:uppercase;}
header.topbar .role-badge.owner,header.topbar .role-badge.coach{color:var(--accent); border-color:var(--accent);}
.screen{flex:1; overflow-y:auto; min-height:0; padding:14px 16px 10px; -webkit-overflow-scrolling:touch;}
.screen.hidden{display:none;}

/* ---- Team switcher (top-right of the header) ---- */
.team-switch-wrap{position:relative;}
.team-switch-btn{
  display:flex; align-items:center; gap:8px; background:var(--card2); border:1px solid var(--line);
  border-radius:20px; padding:6px 10px; color:var(--text); font-size:13px; font-weight:700;
}
.team-switch-btn .tb-logo{width:20px; height:20px; border-radius:5px; object-fit:cover;}
.team-switch-btn .tb-logo.hidden{display:none;}
.team-switch-btn .chev{color:var(--sub); font-size:11px;}
.team-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:10px; width:220px; box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:30;
}
.team-dropdown.hidden{display:none;}
.team-dropdown-row{
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
  background:none; border:none; color:var(--text); border-radius:8px; padding:9px 8px; font-size:13.5px; font-weight:600;
}
.team-dropdown-row.on{background:var(--card2); color:var(--accent);}

.section-h{font-size:13px; color:var(--sub); text-transform:uppercase; letter-spacing:.03em; margin:16px 2px 8px; font-weight:700;}

nav.tabbar{
  display:flex; border-top:1px solid var(--line); background:var(--card);
  padding-bottom:var(--safe-bottom); flex-shrink:0;
}
nav.tabbar button{
  flex:1; background:none; border:none; color:var(--sub); font-size:11px;
  padding:8px 0 6px; display:flex; flex-direction:column; align-items:center; gap:2px;
}
nav.tabbar button .ic{font-size:20px;}
nav.tabbar button.active{color:var(--accent);}
nav.tabbar.hidden{display:none;}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px;}
.card h2{margin:0 0 10px; font-size:14px;}
label.field-label{display:block; font-size:12px; color:var(--sub); margin-bottom:6px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
input[type=text], input[type=email], input[type=password], input[type=time], textarea{
  width:100%; background:var(--card2); border:1px solid var(--line); color:var(--text);
  padding:11px 12px; border-radius:10px; font-size:16px; font-family:inherit;
}
textarea{resize:vertical; min-height:44px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:#03242b; border:none; border-radius:10px;
  padding:12px 16px; font-size:15px; font-weight:700; width:100%;
}
.btn.secondary{background:var(--card2); color:var(--text); border:1px solid var(--line);}
.btn.danger{background:var(--danger); color:#2a0a0a;}
.btn.small{padding:9px 12px; font-size:13px; width:auto;}
.btn:disabled{opacity:.5;}
.row{display:flex; gap:8px;}
.row > *{flex:1;}
.stack{display:flex; flex-direction:column; gap:8px;}
.center-col{flex:1; display:flex; flex-direction:column; justify-content:center; max-width:420px; margin:0 auto; width:100%;}
.link-btn{background:none; border:none; color:var(--accent); font-size:13px; font-weight:600; padding:8px 0;}
.link-btn.danger-text{color:var(--danger);}
.error-text{color:var(--danger); font-size:13px; margin:8px 0 0;}
.small-note{font-size:12px; color:var(--sub);}

.daychips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:2px;}
.daychip{
  flex-shrink:0; padding:9px 14px; border-radius:20px; background:var(--card2);
  border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--sub);
}
.daychip.on{background:var(--accent); color:#03242b; border-color:var(--accent);}
.daychip.default-chip{border-style:dashed;}
.daychip.default-chip.on{background:var(--c-custom); border-color:var(--c-custom); color:#fff;}

.day-setup-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px;}
.day-setup-card .dtitle{font-weight:700; font-size:15px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;}
.suggest-row{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0;}
.suggest{
  font-size:12px; padding:6px 10px; border-radius:14px; background:var(--card2);
  border:1px solid var(--line); color:var(--sub);
}
.suggest.active{background:rgba(34,211,238,.15); color:var(--accent); border-color:var(--accent);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.toggle-row .tlabel{font-size:14px; font-weight:600;}
.toggle-row .tsub{font-size:12px; color:var(--sub); margin-top:2px;}
.toggle{
  width:44px; height:26px; border-radius:14px; background:var(--card2); border:1px solid var(--line);
  position:relative; flex-shrink:0;
}
.toggle .knob{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--sub); transition:.15s;}
.toggle.on{background:rgba(34,211,238,.25); border-color:var(--accent);}
.toggle.on .knob{background:var(--accent); left:20px;}
.muted-note{font-size:11.5px; color:var(--sub); margin-top:6px;}

.day-toolbar{display:flex; justify-content:flex-end; gap:8px; margin:2px 0 8px;}
.icon-btn{
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:6px;
}

.viewer-banner{
  background:rgba(168,85,247,.12); border:1px solid var(--c-custom); color:#e9d5ff;
  border-radius:10px; padding:9px 12px; font-size:12.5px; margin-bottom:10px;
}

.cal-mode-row{display:flex; gap:8px; margin-bottom:10px;}
.cal-mode-row .modeBtn{flex:1; padding:9px; border-radius:10px; background:var(--card2); border:1px solid var(--line); color:var(--sub); font-weight:700; font-size:13px;}
.cal-mode-row .modeBtn.on{background:var(--accent); color:#03242b; border-color:var(--accent);}

.cal-nav-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px;}
.cal-nav-row .cal-nav-title{flex:1; text-align:center; font-weight:700; font-size:14.5px;}
.cal-nav-row .nav-btn{font-size:18px; font-weight:800; padding:6px 14px;}
#calTodayBtn{display:block; margin:2px auto 12px; }

.month-grid-header{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; color:var(--sub); font-weight:700; margin-bottom:4px;}
.month-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.month-cell{
  min-height:56px; border-radius:10px; background:var(--card); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:13px; font-weight:600; position:relative; padding:4px 2px;
}
.month-cell.other-month{opacity:.35;}
.month-cell.is-off{opacity:.4;}
.month-cell.is-today{border-color:var(--accent); border-width:2px;}
.month-cell .mc-date{font-size:13px; font-weight:700;}
.month-cell .mc-time{font-size:9.5px; font-weight:700; color:var(--sub);}
.month-cell .mc-focus{font-size:9px; font-weight:600; color:var(--accent); text-align:center; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 1px;}
.month-cell .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:1px;}
@media (min-width:900px){ .month-cell{min-height:76px;} .month-cell .mc-focus{font-size:10.5px;} }

.week-agenda-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.week-agenda-card.is-today{border-color:var(--accent);}
.week-agenda-card.is-off{opacity:.5;}
.week-agenda-card .wac-date{font-weight:700; font-size:14.5px;}
.week-agenda-card .wac-sub{font-size:12px; color:var(--sub); margin-top:2px;}
.week-agenda-card .wac-meta{font-size:12px; color:var(--sub); text-align:right; white-space:nowrap;}

.motivation-card{
  background:linear-gradient(135deg, rgba(34,211,238,.10), rgba(168,85,247,.08));
  border:1px solid var(--accent); border-radius:12px; padding:12px; margin-bottom:14px;
}
.motivation-card textarea{background:rgba(0,0,0,.15); border-color:var(--accent); min-height:56px;}

.back-link-row{margin-bottom:8px;}

.summary{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px; color:var(--sub); gap:8px;}
.summary b{color:var(--text);}
.progressbar{height:8px; border-radius:5px; background:var(--card2); overflow:hidden; margin-bottom:14px;}
.progressbar > div{height:100%; background:var(--accent); border-radius:5px;}
.progressbar.over > div{background:var(--danger);}

#timeline{display:flex; flex-direction:column; gap:8px; padding-bottom:8px;}
.block{
  display:flex; align-items:flex-start; gap:10px; border-radius:12px; padding:10px 12px;
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--type-color, var(--accent));
  position:relative;
}
.block .handle{font-size:18px; color:var(--sub); padding:4px 6px; touch-action:none; cursor:grab;}
.block .info{flex:1; min-width:0; cursor:pointer;}
.block .info .lbl{font-weight:700; font-size:14.5px;}
.block .info .meta{font-size:12px; color:var(--sub); margin-top:1px;}
.block .entries{margin-top:6px; display:flex; flex-direction:column; gap:2px;}
.block .entries .erow{font-size:12px; color:var(--text); background:var(--card2); border-radius:6px; padding:4px 7px;}
.block .entries .erow b{color:var(--accent); font-weight:700;}
.entry-coaches{font-size:11.5px; font-weight:700; color:#e9d5ff; margin-top:3px;}
.block .durval{font-size:13px; font-weight:700; color:var(--sub); white-space:nowrap; margin-top:2px;}
.block .del{background:none; border:none; color:var(--sub); font-size:18px; padding:4px 2px;}
.empty-hint{
  text-align:center; color:var(--sub); font-size:13px; padding:30px 10px; border:1.5px dashed var(--line);
  border-radius:14px;
}
#dropIndicator{height:36px; border-radius:10px; border:2px dashed var(--accent); background:rgba(34,211,238,.08); display:none;}

.palette-wrap{border-top:1px solid var(--line); background:var(--card); flex-shrink:0; padding:10px 12px calc(8px + var(--safe-bottom));}
.palette-wrap.hidden{display:none;}
.palette-title{font-size:11px; color:var(--sub); text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px 2px; font-weight:700;}
.palette{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;}
.chip{
  flex-shrink:0; display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:12px;
  color:#fff; font-weight:700; font-size:13px; touch-action:none; user-select:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.ghost{
  position:fixed; z-index:999; pointer-events:none; padding:10px 14px; border-radius:12px;
  color:#fff; font-weight:700; font-size:13px; opacity:.92; transform:translate(-50%,-50%) scale(1.05);
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; z-index:500;}
.overlay.hidden{display:none;}
.sheet{background:var(--card); width:100%; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + var(--safe-bottom)); max-height:78vh; overflow-y:auto; position:relative;}
.sheet h3{margin:0 0 12px;}
.close-x{position:absolute; top:10px; right:14px; background:none; border:none; color:var(--sub); font-size:22px; z-index:2;}
.divider{height:1px; background:var(--line); margin:14px 0;}

.entry-row{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px;}
.entry-row .erow-top{display:flex; gap:8px; margin-bottom:6px;}
.entry-row input{margin-bottom:0;}
.entry-row .rm{flex:0 0 auto; background:none; border:none; color:var(--danger); font-size:18px; padding:0 4px;}

.option-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--card2);
  border:1px solid var(--line); color:var(--text); border-radius:12px; padding:13px 14px; font-size:14.5px;
  font-weight:600; margin-bottom:9px;
}
.option-btn.danger{color:var(--danger);}
.option-btn .oic{font-size:18px;}

.check-row{display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line);}
.check-row input{width:19px; height:19px; flex:0 0 auto;}

.share-scope-row{display:flex; gap:8px; margin-bottom:14px;}
.share-scope-row button{flex:1; padding:11px; border-radius:10px; background:var(--card2); border:1px solid var(--line); color:var(--sub); font-weight:700; font-size:13.5px;}
.share-scope-row button.on{background:var(--accent); color:#03242b; border-color:var(--accent);}

.roster-row{display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--line); gap:8px;}
.roster-row .rname{font-size:14px; font-weight:600;}
.roster-row .remail{font-size:12px; color:var(--sub);}
.role-pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--card2); border:1px solid var(--line); text-transform:uppercase;}
.role-pill.owner,.role-pill.coach{color:var(--accent); border-color:var(--accent);}
.invite-code{font-size:26px; font-weight:800; letter-spacing:.12em; text-align:center; background:var(--card2); border:1px dashed var(--accent); border-radius:10px; padding:14px; margin:10px 0;}

.team-switch{display:flex; gap:8px; overflow-x:auto; margin-bottom:12px;}
.team-switch button{flex-shrink:0; padding:8px 14px; border-radius:20px; background:var(--card2); border:1px solid var(--line); color:var(--sub); font-size:13px; font-weight:700;}
.team-switch button.on{background:var(--accent); border-color:var(--accent); color:#03242b;}

.paywall-badge{font-size:11px; background:var(--c-custom); color:#fff; padding:2px 8px; border-radius:10px; font-weight:700; margin-left:6px;}

#toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); opacity:0;
  background:#0b1220; color:var(--text); border:1px solid var(--line); padding:10px 16px; border-radius:10px;
  font-size:13.5px; z-index:900; transition:.2s; pointer-events:none; max-width:85%; text-align:center;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

#printArea{display:none;}
/* Table matches the coaches' Word-doc practice plan layout: Time / Activity / Coaches / Emphasis.
   Also visible on-screen if #printArea is ever shown outside of @media print (it isn't by default). */
.pp-table{width:100%; border-collapse:collapse; font-family:Calibri, Arial, sans-serif; margin-top:4px;}
.pp-table th, .pp-table td{border:1px solid #000; padding:5px 8px; vertical-align:top; font-size:12.5px;}
.pp-table thead th{background:#d9d9d9; font-weight:700; text-align:left;}
.pp-td-time{width:60px; white-space:nowrap; font-weight:700;}
.pp-td-activity{width:34%;}
.pp-td-coaches{width:18%;}
.pp-row-sub .pp-td-activity{padding-left:20px; font-style:italic;}
@media print{
  body > *:not(#printArea){display:none !important;}
  #printArea{display:block !important; position:static; color:#000; background:#fff; padding:0;}
  .pp-day{page-break-after:always; padding:10px 0;}
  .pp-day:last-child{page-break-after:auto;}
  .pp-title{font-size:20px; font-weight:800; margin:0 0 2px;}
  .pp-sub{font-size:13px; color:#444; margin:0 0 10px;}
  .pp-table th, .pp-table td{border-color:#333;}
}

/* On-screen coaches/emphasis summary shown under a block in the plan builder */
.meta-extra{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.coaches-badge{font-size:11.5px; background:var(--c-custom); color:#fff; padding:1px 8px; border-radius:10px; font-weight:600;}
.emphasis-note{font-size:12px; color:var(--sub); font-style:italic;}

/* ---- Team logo upload (Setup) ---- */
.logo-row{display:flex; align-items:center; gap:12px;}
.setup-logo-preview{width:52px; height:52px; border-radius:12px; object-fit:cover; border:1px solid var(--line);}
.setup-logo-preview.hidden{display:none;}
.logo-row input[type=file]{flex:1; font-size:12px; color:var(--sub);}

/* ---- Schedule Periods ---- */
.period-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; cursor:pointer;}
.period-card .pc-title{font-weight:700; font-size:14.5px;}
.period-card .pc-range{font-size:12px; color:var(--sub); margin-top:2px;}
.period-card .pc-days{font-size:12px; color:var(--sub); margin-top:4px;}
.period-day-row{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line);}
.period-day-row:last-child{border-bottom:none;}
.period-day-row .pd-label{width:70px; font-size:13px; font-weight:700; flex-shrink:0;}
.period-day-row input[type=text]{margin-bottom:0;}

/* ---- Scouting report viewer ---- */
.report-body-view{white-space:pre-wrap; font-size:14px; line-height:1.55; background:var(--card2); border-radius:10px; padding:12px; margin-top:6px;}

/* ---- Playbook / Play editor ---- */
.pb-detail-title-row{display:flex; align-items:center; justify-content:space-between;}
.play-editor-sheet{max-height:92vh; position:relative;}
.play-name-input{
  width:100%; font-size:16px; font-weight:800; border:none; background:none; color:var(--text);
  padding:0 28px 10px 0; margin-bottom:8px; border-bottom:1px solid var(--line);
}
.formation-row{display:flex; gap:8px; margin-bottom:10px;}
.formation-row select{
  flex:1; background:var(--card2); border:1px solid var(--line); color:var(--text);
  padding:9px 10px; border-radius:10px; font-size:13px;
}
.formation-row .btn{width:auto; white-space:nowrap;}
.play-toolbar{display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap;}
.play-toolbar .tool-btn{font-size:12.5px; padding:8px 10px;}
.play-toolbar .tool-btn.active{background:var(--accent); color:#03242b; border-color:var(--accent);}
.play-canvas-wrap{position:relative;}
#playCanvas{
  width:100%; max-width:100%; height:auto; aspect-ratio:600/380; background:#0d3b1f;
  border-radius:12px; border:1px solid var(--line); touch-action:none; display:block;
}
.play-context-menu{
  position:absolute; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:4px; z-index:50; display:flex; flex-direction:column; box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.play-context-menu.hidden{display:none;}
.play-context-menu button{
  padding:9px 14px; background:none; border:none; color:var(--text); text-align:left;
  font-size:13px; border-radius:6px; white-space:nowrap;
}
.play-controls{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.play-controls .btn{width:auto; flex:1;}

.dc-tabs{flex-wrap:wrap; margin-top:10px;}
.dc-tabs .btn{width:auto;}
.dc-tab.on, .dc-subtab.on, .dc-viewmode.on{background:var(--accent); color:#03242b; border-color:var(--accent);}
.dc-position-row{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px;}
.dc-position-row .dc-pos-label{font-weight:700; margin-bottom:6px;}
.dc-position-row .dc-pos-names{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
#dcCanvas{
  width:100%; max-width:100%; height:auto; aspect-ratio:600/380; background:#0d3b1f;
  border-radius:12px; border:1px solid var(--line); touch-action:none; display:block; margin-top:10px;
}

.mc-event{font-size:9px; color:#fbbf24; line-height:1.1; margin-top:1px;}

#threadsList .list-card-row, #threadPostsList .post-row{margin-bottom:8px;}
.post-row{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px;}
.post-row .post-meta{font-size:11px; color:var(--sub); margin-top:4px;}

::-webkit-scrollbar{display:none;}