.admin-controls{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.admin-controls>h2{font-size:10px;color:var(--muted);letter-spacing:.7px;margin:0 10px 9px}
body:not([data-owner="true"]) .admin-controls{display:none}
.admin-controls .owner-admin-link{display:block;margin:8px 10px 0;font-size:11px;color:var(--accent)}
.mobile-bottom-nav{display:none}
.mobile-header-actions,#mobile-filter-toggle{display:none}
#admin-console{display:block;width:100%;height:calc(100dvh - 120px);min-height:420px;border:1px solid var(--line);border-radius:14px;background:#111219}
body[data-active-page="admin"] .page-footer,body[data-active-page="admin"] #add-event{display:none}
@media(max-width:700px){#admin-console{height:calc(100dvh - 220px - env(safe-area-inset-bottom));min-height:350px}.sidebar .admin-controls nav{flex-wrap:wrap}}
.mobile-sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:560px;max-height:calc(100dvh - 36px);padding:0;border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;background:var(--bg);color:var(--text);overflow:hidden;box-shadow:0 -12px 48px #0004}
.mobile-sheet::backdrop{background:#08091088;backdrop-filter:blur(3px)}
.sheet-handle{display:flex;width:100%;height:29px;align-items:center;justify-content:center;cursor:grab;touch-action:none;border-radius:22px 22px 0 0;flex-shrink:0}
.sheet-handle:active{cursor:grabbing}
.sheet-handle>span{display:block;width:40px;height:4px;background:var(--muted);opacity:.65;border-radius:5px}
.sheet-heading{display:flex;align-items:center;justify-content:space-between;padding:0 16px 8px;gap:10px;flex-shrink:0}
.sheet-heading h2{font-size:17px;font-weight:700}
.sheet-close{width:36px;height:36px;font-size:25px;border-radius:10px;color:var(--muted)}
.mobile-sheet[open]{display:flex;flex-direction:column}
#mobile-checklist-sheet{max-height:78dvh}
.sheet-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;padding:0 16px calc(20px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
#mobile-checklist-sheet .agenda{border:0;margin:0;border-radius:0;background:none}
#mobile-checklist-sheet .checklist-section{padding:0}
#mobile-checklist-sheet .agenda .section-title{position:absolute;right:57px;top:29px;margin:0}
#mobile-checklist-sheet .agenda .section-title h3{display:none}
#mobile-checklist-sheet #add-content{width:36px;height:36px}
#mobile-checklist-sheet #content-checklist{display:block;max-height:none;overflow:visible}
#mobile-checklist-sheet .checklist-group{padding:16px 0}
#mobile-checklist-sheet .checklist-group-heading h4{font-size:12px}
#mobile-checklist-sheet .content-row{min-height:44px;padding:7px 2px;gap:10px}
#mobile-checklist-sheet .content-row>span:last-child{font-size:12px}
#mobile-checklist-sheet .content-row .game-icon{width:28px;height:28px}
#mobile-checklist-sheet #content-week-label{font-size:11px;margin:0 0 12px}
.settings-label{font-size:12px;color:var(--muted);font-weight:500;margin:8px 0 12px}
#mobile-theme-slot .theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px;border:0;padding:0}
#mobile-theme-slot .theme-picker button{display:flex;flex-direction:column;gap:10px;min-height:85px;border:1px solid var(--line);border-radius:12px;font-size:12px}
#mobile-theme-slot .theme-picker button[aria-pressed=true]{border-color:var(--accent)}
#mobile-theme-slot .theme-picker svg{width:23px;height:23px}
@media(max-width:700px){
 html{height:100%;overflow:hidden}
 body{height:100dvh;overflow:hidden;padding-bottom:0}
 .app-shell{display:flex;flex-direction:column;height:calc(100dvh - 76px - env(safe-area-inset-bottom));min-height:0}
 .app-shell>.sidebar{flex:none;height:auto}
 .app-shell>main{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0}
 body[data-active-page="calendar"] .page-footer{display:none}
 .sidebar .desktop-navigation{display:none}
 .sidebar{padding:10px 12px 5px}
 .sidebar .brand{padding-bottom:5px}
 .admin-controls{margin-top:4px;padding:7px 8px;border:1px dashed var(--line);border-radius:9px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
 .admin-controls>h2{font-size:9px;margin:0 4px 0 0;color:var(--muted)}
 .sidebar .admin-controls nav{display:flex;gap:3px;margin:0}
 .sidebar .admin-controls .nav-item{min-height:28px;padding:4px;font-size:10px;gap:3px}
 .sidebar .admin-controls .nav-item>span:first-child{font-size:13px}
 .sidebar .admin-controls .owner-admin-link{position:static;margin:0 0 0 auto;padding:4px 0;min-height:28px;display:flex;align-items:center;font-size:9px}
 .topbar-right>.theme-picker{display:none}
 .mobile-bottom-nav{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:0;padding:6px 6px calc(7px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -6px 24px #0001}
 .mobile-nav-group{display:flex;align-items:center;justify-content:space-around;min-width:0;gap:0}
 .mobile-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:9px;letter-spacing:-.4px;min-width:0;min-height:55px;flex:1;padding:4px 0;border-radius:10px;white-space:nowrap}
 .mobile-bottom-nav button svg{width:21px;height:21px;flex-shrink:0}
 .mobile-bottom-nav button.active,.mobile-bottom-nav button[aria-expanded=true]{color:var(--accent)}
 .mobile-bottom-nav .mobile-checklist-button{width:56px;height:56px;min-height:56px;justify-self:center;flex:none;gap:5px;background:var(--accent);color:var(--theme-ink);border-radius:16px;box-shadow:0 4px 15px color-mix(in srgb,var(--accent) 20%,transparent)}
 .mobile-bottom-nav .mobile-checklist-button[aria-expanded=true]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
 .mobile-bottom-nav .mobile-checklist-button svg{width:24px;height:24px}
 #calendar-page .calendar-panel{height:var(--mobile-calendar-space,60svh)}
 .page-footer{padding-bottom:12px}
 #toast{bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.mobile-sheet{scroll-behavior:auto}}
/* Keep touch controls comfortably sized without enlarging the date row. */
.calendar-toolbar .view-switch{background:transparent;justify-content:flex-end}
.calendar-toolbar .view-switch button{border:0;box-shadow:none}
.version-calendar .timeline-game-gutter{
 position:sticky;left:0;z-index:5;width:54px;height:48px;background:var(--bg);
}
:root .version-calendar .timeline-game-gutter>button.timeline-game-label{
 position:relative;left:auto;appearance:none;-webkit-appearance:none;
 border:0;box-shadow:none;background:transparent;-webkit-tap-highlight-color:transparent;
}
.version-calendar button.timeline-game-label:not(:focus-visible){outline:none}
/* The icon is the image itself, without a separate tile or pale outline.
   Keep the sticky gutter opaque so horizontally scrolling labels stay behind it. */
:root .version-calendar .timeline-game-label .game-icon,
:root .version-calendar .timeline-game-label:hover .game-icon{
 background:transparent;border:0;box-shadow:none;outline:none;
}
:root .version-calendar .timeline-game-label .game-icon img{
 background:transparent;border:0;box-shadow:none;border-radius:7px;
 clip-path:inset(0 round 7px);
}
.version-calendar .timeline-game-label:focus-visible{outline:none}
.version-calendar .timeline-game-label:focus-visible .game-icon{
 outline:2px solid var(--accent);outline-offset:3px;
}
@media(max-width:700px){
 .calendar-sticky .calendar-toolbar{padding:6px 8px;gap:4px}
 .calendar-toolbar .month-nav{width:100%;gap:4px}
 .calendar-toolbar .month-nav h2{font-size:14px;flex:1;min-width:0;white-space:normal}
 .calendar-toolbar .month-nav>button{min-width:44px;min-height:30px;height:30px;font-size:20px}
 .calendar-toolbar .month-nav>.today-button{font-size:12px;padding:0 8px}
 .calendar-toolbar .view-switch{width:100%;display:flex;justify-content:flex-end;gap:6px;background:transparent;padding:0}
 .calendar-toolbar .view-switch button{flex:0 0 auto;min-width:44px;min-height:32px;font-size:13px;padding:4px 10px;border:0;border-radius:0;background:transparent}
 .calendar-sticky .filterbar{padding:0 8px 6px}
 .calendar-sticky #type-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;width:100%}
 .calendar-sticky #type-filters button{min-height:30px;padding:2px;font-size:11px;gap:3px;justify-content:center}
 .calendar-sticky #type-filters .type-icon{width:15px;height:15px}
 .calendar-sticky .search-wrap{display:none}
 .calendar-scroll>.calendar-dates{
  position:sticky;top:0;z-index:20;overflow:visible;max-width:none;
  background:var(--bg);scroll-behavior:auto;
 }
}
/* Mobile chrome stays compact; controls retain their readable touch sizes. */
@media(max-width:700px){
 .app-shell>.sidebar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0;padding:0 10px;border-bottom:1px solid var(--line)}
 .sidebar .brand{padding:0;min-height:48px;gap:6px}
 .sidebar .brand-symbol{font-size:25px}
 .sidebar .brand>span:last-child{font-size:17px}
 .sidebar .brand small,.sidebar .brand .admin-mode-label{display:none}
 .mobile-header-actions{display:flex;align-items:center;gap:4px}
 #mobile-admin-toggle{display:none;min-height:44px;padding:0 8px;color:var(--accent);font-size:12px;white-space:nowrap}
 body[data-owner="true"] #mobile-admin-toggle{display:block}
 #mobile-add-slot #add-event{min-height:44px;padding:0 8px;border-radius:0;font-size:12px;background:transparent;color:var(--accent);gap:3px}
 #mobile-add-slot #add-event>span{font-size:18px}
 .sidebar .admin-controls{grid-column:1/-1;border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding:0 0 4px}
 .sidebar .admin-controls:not(.mobile-admin-open){display:none}
 .sidebar .admin-controls>h2{display:none}
 .sidebar .admin-controls nav{width:100%;justify-content:flex-end;gap:6px}
 .sidebar .admin-controls .nav-item{min-height:44px;font-size:12px;padding:4px 8px}
 .mobile-sheet .owner-signin{display:block;min-height:44px;padding:12px 0;font-size:12px}
 body[data-active-page="calendar"] .topbar{display:none}
 #calendar-page{padding-top:2px}
 .calendar-sticky .calendar-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;padding:0 6px}
 .calendar-toolbar .month-nav{grid-column:1/-1;min-height:34px}
 .calendar-toolbar .view-switch{grid-column:2;grid-row:2;width:auto;gap:2px}
 .calendar-toolbar .view-switch button{padding:4px 8px}
 #mobile-filter-toggle{display:flex;align-items:center;gap:5px;grid-column:1;grid-row:2;min-width:0;min-height:32px;padding:0 6px;color:var(--muted);font-size:12px;text-align:left}
 #mobile-filter-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #mobile-filter-toggle[aria-expanded=true]{color:var(--accent)}
 #mobile-filter-toggle[aria-expanded=true]>span:last-child{transform:rotate(180deg)}
 .calendar-panel:not(.mobile-filters-open) .filterbar{display:none}
 .calendar-panel.mobile-filters-open .filterbar{padding:0 6px 4px}
}

/* Confirmation at the standalone app's root; colors follow the selected theme. */
dialog.mobile-exit-confirm{max-width:360px;padding:24px;background:var(--bg);color:var(--text);border:1px solid var(--line)}
.mobile-exit-confirm h2{margin:0 0 12px;font-size:19px}
.mobile-exit-confirm p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.mobile-exit-confirm>div{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.mobile-exit-confirm button{padding:9px 15px;border-radius:8px;font-size:14px;color:var(--text);border:1px solid var(--line)}
.mobile-exit-confirm [data-exit-confirm]{color:var(--bg);background:var(--accent);border-color:var(--accent)}