/* Shared office materials. Layout and behavior remain in each panel's own rules. */
:root {
  --glass-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: var(--glass-font);
  --glass-ink: #192534;
  --glass-secondary: #46586b;
  --glass-muted: #405164;
  --glass-accent: #075ed4;
  --glass-success: #237449;
  --glass-danger: #b52c3c;
  --glass-line: rgba(50, 73, 100, .19);
  --glass-edge: rgba(255, 255, 255, .8);
  --glass-pane: rgba(239, 245, 251, .70);
  --glass-float: rgba(235, 244, 253, .48);
  --glass-field: rgba(255, 255, 255, .62);
  --glass-row: rgba(255, 255, 255, .36);
  --glass-hover: rgba(255, 255, 255, .78);
  --glass-selected: rgba(21, 108, 231, .11);
  --glass-shadow: 0 24px 72px -20px rgba(5, 20, 42, .35), 0 4px 16px rgba(5, 20, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .75);
  --glass-scrim: rgba(25, 39, 59, .13);
  --reports-page: #e4ecf5;
  --reports-background: radial-gradient(ellipse at 8% 0%, rgba(85,152,228,.18), transparent 48%), radial-gradient(ellipse at 94% 55%, rgba(161,135,210,.13), transparent 50%), var(--reports-page);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --glass-ink: #f1f5fc;
  --glass-secondary: #c5d0e0;
  --glass-muted: #a6b6ca;
  --glass-accent: #8cbdff;
  --glass-success: #8bd3a8;
  --glass-danger: #ff9eaa;
  --glass-line: rgba(186, 207, 237, .2);
  --glass-edge: rgba(225, 238, 255, .5);
  --glass-pane: rgba(20, 29, 43, .66);
  --glass-float: rgba(20, 29, 43, .26);
  --glass-field: rgba(9, 20, 37, .46);
  --glass-row: rgba(158, 190, 237, .07);
  --glass-hover: rgba(175, 203, 245, .14);
  --glass-selected: rgba(87, 156, 255, .18);
  --glass-shadow: 0 24px 72px -16px rgba(0, 5, 16, .65), 0 4px 16px rgba(0, 5, 16, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
  --glass-scrim: rgba(4, 10, 21, .26);
  --reports-page: #101a2b;
  color-scheme: dark;
}
html body { font-family: var(--glass-font); color: var(--glass-ink); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
input[type="date"], select { color-scheme: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 1px solid var(--glass-accent); outline-offset: -2px; }
html :is(input, textarea, select):focus-visible { outline: none; border-color: var(--glass-accent); }
html #work-tabs button:focus-visible { outline: none; }
::selection { background: var(--glass-selected); }
* { scrollbar-width: thin; scrollbar-color: var(--glass-line) transparent; }

/* A light rim and one blur per surface; rows never add another blur. */
html :is(#hud, #xp, #chat, #feedback, .hint-pop, #hint-text, #vo-who, #load) {
  color: var(--glass-ink); background: var(--glass-float);
  border: 1px solid var(--glass-edge); border-radius: 22px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  font-family: var(--glass-font);
}
html :is(#work-panel, #tracker-panel, #desk-panel, #board-panel, #reports-panel, .modal-panel,
  #arcade-panel, #celebration, #levelup, #challenge, #screenview-frame) {
  color: var(--glass-ink); background: var(--glass-pane);
  border: 1px solid var(--glass-edge); border-radius: 28px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
  font-family: var(--glass-font);
}
html .overlay:not(#picker):not(#pin) {
  background: var(--glass-scrim); color: var(--glass-ink);
  font-family: var(--glass-font); padding: 24px;
}
html :is(#tracker-panel, #desk-panel, #board-panel) { padding: 26px; width: min(800px, 94vw); max-height: 88vh; }
html :is(#tracker-header, #desk-header, #board-header, #reports-header) {
  border-color: var(--glass-line); padding-bottom: 16px; margin-bottom: 8px;
}
html :is(#tracker-header, #desk-header, #board-header, #reports-header) h2,
html .modal-panel h2 { color: var(--glass-ink); font-size: 25px; font-weight: 650; letter-spacing: -.7px; }
html .overlay p { color: var(--glass-secondary); }
html :is(.tracker-hint, #desk-date) { font-size: 12px; letter-spacing: 0; color: var(--glass-muted); }
html :is(#tracker-close, #desk-close, #board-close) { border-radius: 10px; padding: 7px 9px; }

html :is(.tracker-btn, .hud-project-btn, .board-tab, .modal-panel button, .visitor-go, .pin-go) {
  color: var(--glass-ink); background: var(--glass-row); border: 1px solid var(--glass-line);
  border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  font-family: var(--glass-font); font-size: 13px; line-height: 1.3; font-weight: 550;
  padding: 8px 13px; transition: background .16s, border-color .16s, transform .16s;
}
html :is(.tracker-btn, .hud-project-btn, .board-tab, .modal-panel button, .visitor-go, .pin-go):hover {
  background: var(--glass-hover); border-color: var(--glass-accent); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
html :is(.tracker-btn, .board-tab, .modal-panel button):active { transform: scale(.98); }
/* Match the generic button rule's specificity: padding must not collapse SVGs. */
html button.hud-project-btn { padding: 0; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; }
html button.hud-project-btn svg { width: 13px; height: 13px; flex: none; fill: currentColor; }
html .hud-project-row { font-size: 13px; gap: 7px; }
html .hud-project-name { flex: 1; min-width: 0; }
html .hud-project-elapsed { flex: none; font-variant-numeric: tabular-nums; }
html :is(.tracker-btn-danger, .tracker-btn.danger, .hud-project-btn.danger) { color: var(--glass-danger); border-color: var(--glass-danger); }
html :is(.board-tab.active, .board-tab.on, .tracker-btn-primary, .pin-go, .visitor-go) {
  background: #0867e8; color: #fff; border-color: rgba(255,255,255,.2);
}
html :is(.pin-go, .visitor-go):hover { background: #075bcc; color: #fff; }
html :is(.tracker-input, .modal-field input, .modal-field select, .modal-field textarea,
 #chat-input, #tracker-search, .visitor-name, .pin-input, .desk-add-input, .desk-add-select, .music-search) {
  background: var(--glass-field); color: var(--glass-ink); border: 1px solid var(--glass-line);
  border-radius: 10px; font-family: var(--glass-font); box-shadow: inset 0 1px 3px rgba(0,0,0,.025);
}
html :is(#tracker-search, .modal-field input, .modal-field select, .modal-field textarea) { padding: 10px 12px; font-size: 14px; }
html input::placeholder, html textarea::placeholder { color: var(--glass-muted); opacity: 1; }
html :is(.modal-field label, .modal-intro, .worklist-note) { font-size: 14px; line-height: 1.5; }
html :is(#chat-menu, .desk-due-menu) { background: var(--glass-pane); border: 1px solid var(--glass-edge); border-radius: 16px; box-shadow: var(--glass-shadow); }
html :is(.tracker-folder, .tracker-category, .tracker-task, .tracker-recent-row, .board-ticket, #desk-clock) { border-radius: 12px; border-width: 1px; }
html #tracker-hero { padding: 12px 2px 18px; border-color: var(--glass-line); }
html .tracker-hero-lab { font-size: 11px; letter-spacing: 1px; font-weight: 600; color: var(--glass-muted); }
html #tracker-hero-total { font-size: 44px; line-height: 1.2; font-weight: 600; letter-spacing: -2px; color: var(--glass-ink); }
html .tracker-hero-fig { color: var(--glass-secondary); font-variant-numeric: tabular-nums; }
html #tracker-footer { padding-top: 16px; border-color: var(--glass-line); gap: 10px; }
html .tracker-recent-row { padding: 9px 12px; margin-bottom: 5px; background: var(--glass-row); border-color: var(--glass-line); }
html .tracker-folder-head { background: var(--glass-row); border: 1px solid var(--glass-line); border-radius: 12px; padding: 12px; }
html .tracker-folder-name { font-size: 16px; font-weight: 600; }
html :is(.tracker-category-head, .tracker-task-head, .tracker-line-row) { border-color: var(--glass-line); border-radius: 8px; }
html :is(.tracker-folder-head, .tracker-category-head, .tracker-task-head):hover { background: var(--glass-hover); }
html :is(.tracker-task-name, .tracker-line-name, .tracker-recent-name) { font-size: 14px; }
html :is(.desk-section-head, .desk-section h3, .board-section-title) { font-size: 12px; letter-spacing: .5px; font-weight: 650; }
html :is(#desk-clock-line, .desk-task-title) { font-size: 16px; }
html :is(#desk-clock-sub, .desk-running) { font-size: 13px; }
html :is(.desk-task, .desk-plate-row, .desk-ongoing-row) { border-radius: 10px; }

html #hud { top: 20px; left: 20px; width: 285px; padding: 16px 18px; font-size: 13px; line-height: 1.5; }
html #hud-title { font-size: 15px; color: var(--glass-ink); text-transform: none; letter-spacing: -.2px; font-weight: 650; border: 0; margin-bottom: 4px; }
html #hud-hint { font-size: 11px; color: var(--glass-muted); line-height: 1.7; }
html #hud-discord { font-size: 11px; margin-top: 7px; }
html #hud.dim, html #xp.dim { opacity: .58; }
html #chat.dim { opacity: .65; }
html #chat { left: 20px; bottom: 64px; width: min(345px, calc(100vw - 40px)); padding: 12px 16px; }
html #chat-channel { color: var(--glass-ink); font-size: 11px; font-weight: 650; letter-spacing: 1.2px; border-color: var(--glass-line); padding-bottom: 9px; }
html #chat-log { font-size: 13px; line-height: 1.5; }
html #chat-input { font-size: 13px; padding: 9px 11px; margin-top: 8px; }
html #xp { top: 20px; right: 20px; width: 268px; padding: 15px 17px; font-size: 13px; }
html #xp-level { color: var(--glass-ink); font-size: 14px; font-weight: 650; }
html #xp-bar { background: var(--glass-line); border: 0; height: 5px; border-radius: 10px; margin-top: 10px; }
html #xp-fill { background: linear-gradient(90deg, #387cf4, #6aaeff); border-radius: inherit; }
html :is(.xp-quest-title, .xp-quest-name) { font-size: 12px; }
html :is(.xp-quest-note, .xp-section-label, #xp-all) { font-size: 11px; }
html #feedback { right: 20px; bottom: 64px; width: 44px; height: 44px; border-radius: 50%; }
html #feedback svg { width: 19px; height: 19px; }
html #game #hint-text { bottom: 14px; max-width: calc(100vw - 40px); padding: 10px 18px; font-size: 11px; border-radius: 50px; white-space: normal; text-align: center; }
html #game #hint-text b { font-weight: 650; }
html #game :is(#where, #fps, #build) { display: none; }
html[data-design] #game :is(#where, #fps, #build) { display: block; }
/* The frame counter is always on now (2026-10-08, Hugo: "have the fps counter in one corner"), in the one free
   corner — bottom right, under the feedback button. Red when the browser isn't using the graphics card. */
html #game #fps { display: block; left: auto; right: 20px; bottom: 20px; z-index: 4; padding: 4px 11px; border-radius: 50px;
  max-width: min(320px, calc(100vw - 40px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 11px/1.5 var(--glass-font); color: var(--glass-muted); background: var(--glass-float);
  border: 1px solid var(--glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html #game #fps b { color: var(--glass-ink); font-weight: 650; }
html #game #fps.slow b, html #game #fps.soft { color: var(--glass-danger); }
html #game #fps.soft { border-color: var(--glass-danger); }
/* "The office is running slowly" — GraphicsNotice.ts. Bottom right, above the feedback button. */
html #gfx-notice { position: fixed; right: 20px; bottom: 120px; z-index: 6; width: min(320px, calc(100vw - 40px));
  box-sizing: border-box; padding: 14px 16px 15px; border-radius: 18px; font: 13px/1.45 var(--glass-font);
  color: var(--glass-ink); background: var(--glass-pane); border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); }
html #gfx-notice[hidden] { display: none; }
html #gfx-notice .gfx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
html #gfx-notice .gfx-title { margin: 0; font-weight: 650; }
html #gfx-notice .gfx-fps { color: var(--glass-danger); }
html #gfx-notice p { margin: 7px 0 0; }
html #gfx-notice .gfx-head p { margin: 0; }
html #gfx-notice .gfx-close { background: none; border: 0; padding: 0 2px; margin: -3px -4px 0 0; color: var(--glass-muted);
  font-size: 19px; line-height: 1; cursor: pointer; }
html #gfx-notice .gfx-close:hover { color: var(--glass-ink); }
html #gfx-notice .gfx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html #gfx-notice .gfx-actions .tracker-btn { font-size: 12px; padding: 7px 12px; }
/* "Stuck? Back to the entrance" — a HUD button under Share my screen (it started as a small link and wasn't found). */
html #hud-entrance { pointer-events: auto; display: block; width: 100%; margin-top: 6px; }
html #hud-entrance[hidden] { display: none; }
html #vo-who { top: 170px !important; bottom: auto !important; left: 20px !important; font-size: 12px !important; padding: 9px 14px !important; }
html #vo-who[data-connected="false"] { color: var(--glass-danger); border-color: var(--glass-danger); }

/* Sign-in is part of the same material family, with a quiet sky behind it. */
html :is(#picker, #pin) {
  font-family: var(--glass-font); color: var(--glass-ink);
  background: radial-gradient(ellipse at 15% 25%, rgba(123,184,239,.4), transparent 55%),
    radial-gradient(ellipse at 82% 85%, rgba(175,157,223,.3), transparent 50%), #dce7f2;
}
html[data-theme="dark"] :is(#picker, #pin) {
  background: radial-gradient(ellipse at 15% 25%, rgba(47,89,144,.35), transparent 55%),
    radial-gradient(ellipse at 82% 85%, rgba(104,78,137,.24), transparent 50%), #101a2b;
}
html :is(#picker, #pin) h1 { color: var(--glass-ink); font-size: clamp(28px,4vw,44px); font-weight: 600; letter-spacing: -.9px; text-indent: 0; }
html .overlay .title-sub { color: var(--glass-muted); font-size: 11px; letter-spacing: 3px; text-indent: 0; margin-top: -10px; }
html .overlay .title-foot { color: var(--glass-muted); }
html :is(.char-card, #pin-card, .visitor-bar) { background: var(--glass-float); color: var(--glass-ink); border: 1px solid var(--glass-edge); border-radius: 24px; box-shadow: var(--glass-shadow); }
html .char-card { width: 128px; padding: 24px 12px 20px; }
html .char-card:hover { background: var(--glass-hover); border-color: var(--glass-accent); transform: translateY(-4px); }
html :is(.char-card .name, #pin-who) { color: var(--glass-ink); }
html :is(.visitor-note, .pin-note, .pin-link, .char-note) { color: var(--glass-muted); }
html :is(#pin-error, #picker-error) { color: var(--glass-danger); }

@media (max-width: 700px) {
  html .overlay:not(#picker):not(#pin) { padding: 10px; }
  html :is(#tracker-panel, #desk-panel, #board-panel) { padding: 18px; width: 100%; max-height: 94dvh; border-radius: 22px; }
  html :is(#tracker-header, #desk-header, #board-header) { flex-wrap: wrap; gap: 8px; }
  html #hud { top: 12px; left: 12px; width: 200px; padding: 12px; }
  html #xp { top: 12px; right: 12px; width: 180px; padding: 12px; }
  html #chat { left: 12px; bottom: 96px; width: min(290px, calc(100vw - 76px)); }
  html #feedback { right: 12px; bottom: 96px; }
  html #game #fps { right: 12px; bottom: 60px; }
  html #gfx-notice { right: 12px; bottom: 150px; width: calc(100vw - 24px); }
  html #game #hint-text { bottom: 12px; width: calc(100vw - 24px); }
  html .tracker-recent-row { flex-wrap: wrap; gap: 5px; }
  html #picker { overflow: auto; justify-content: flex-start; padding-top: 50px; }
  html #picker-buttons { gap: 10px; }
  html .char-card { width: 100px; padding: 15px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html :is(button, .char-card, #hud, #xp, #chat) { transition: none; animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-pane: #edf3fa; --glass-float: #edf3fa; --glass-edge: #8a9cb2; }
  :root[data-theme="dark"] { --glass-pane: #1b293e; --glass-float: #1b293e; --glass-edge: #93a7c4; }
  html :is(#hud, #xp, #chat, #tracker-panel, #desk-panel, #board-panel, .modal-panel) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html #tracker-close { color: var(--glass-muted); background: var(--glass-row); border: 1px solid var(--glass-line); cursor: pointer; font: 12px var(--glass-font); }
html #tracker-close:hover { background: var(--glass-hover); color: var(--glass-ink); }

html #vo-who { z-index: 5 !important; max-width: 285px !important; border-radius: 18px !important; }
html .xp-quest { font-size: 12px; line-height: 1.4; margin-bottom: 7px; }
html .xp-group { font-size: 10px; margin-top: 12px; }
html .desk-line { font-size: 14px; padding: 8px 2px; align-items: center; gap: 9px; }
html :is(.desk-due, button.desk-due) { font: 11px var(--glass-font); padding: 4px 7px; border-radius: 7px; border-color: var(--glass-line); }
html .desk-due.late { border-color: color-mix(in srgb, var(--glass-danger) 35%, transparent); background: color-mix(in srgb, var(--glass-danger) 6%, transparent); }
html .desk-bucket-head { font-size: 11px; font-weight: 600; letter-spacing: 1px; padding-bottom: 6px; }
html .desk-bucket-head.overdue { border-color: color-mix(in srgb, var(--glass-danger) 25%, transparent); }
html :is(.desk-start, .desk-due-item) { font: 12px var(--glass-font); border-radius: 9px; padding: 6px 10px; }
html #desk-add :is(input, select) { font-size: 12px; border-radius: 9px; padding: 8px; border-color: var(--glass-line); }
html .desk-check { border-radius: 6px; border-color: var(--glass-line); }
html :is(.desk-calendar-head, .desk-section-head) { color: var(--glass-muted); }
html .tracker-recent-row { padding: 6px 12px; }
html .overlay :is(input:not([type="checkbox"]):not([type="range"]), select, textarea) {
  font-family: var(--glass-font); border-radius: 10px; border-width: 1px; border-color: var(--glass-line);
}
html input[type="date"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236782a4' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='14' height='13' rx='3'/%3E%3Cpath d='M6.5 2.5v4m7-4v4M3 9h14M7 12h1m4 0h1m-6 3h1'/%3E%3C/svg%3E") center / contain no-repeat;
}
html #hud-status { color: var(--glass-secondary); font-size: 12px; }
html .music-panel {
  background: var(--glass-pane); color: var(--glass-ink); border: 1px solid var(--glass-edge);
  border-radius: 28px; box-shadow: var(--glass-shadow);
  backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
}
html #music-header h2 { color: var(--glass-ink); font-size: 25px; font-weight: 650; letter-spacing: -.7px; }
html #board-count { font-size: 13px; }
html .board-ticket-body { font-size: 14px; }
html .board-ticket { padding: 12px; }
html #board-notice { color: var(--glass-danger); background: color-mix(in srgb, var(--glass-danger) 8%, transparent); border-color: var(--glass-danger); border-radius: 10px; }
/* Clear optical shell, including a CSS fallback when SVG refraction is unavailable.
   Several inset highlights give the rounded rim thickness without covering content. */
html :is(#hud, #xp, #chat, #feedback, #hint-text, #vo-who, #load, .hint-pop,
 #work-panel, #tracker-panel, #desk-panel, #board-panel, #reports-panel, .modal-panel, .music-panel,
 #arcade-panel, #celebration, #levelup, #challenge, #screenview-frame, .char-card, #pin-card, .visitor-bar) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.09), transparent 38%, rgba(210,231,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(222,240,255,.28),
    0 8px 28px -8px rgba(4,12,25,.3), 0 1px 3px rgba(4,12,25,.1);
}
html [data-liquid-glass] {
  backdrop-filter: var(--liquid-filter) saturate(155%) !important;
  -webkit-backdrop-filter: var(--liquid-filter) saturate(155%) !important;
}
html[data-theme="dark"] :is(#hud, #xp, #chat, #feedback, #hint-text, #vo-who, #load, .hint-pop,
 #work-panel, #tracker-panel, #desk-panel, #board-panel, #reports-panel, .modal-panel, .music-panel,
 #arcade-panel, #celebration, #levelup, #challenge, #screenview-frame, .char-card, #pin-card, .visitor-bar) {
  background-image: linear-gradient(145deg, rgba(229,242,255,.055), transparent 38%, rgba(145,196,245,.025));
  text-shadow: 0 1px 3px rgba(0,8,20,.3);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html [data-liquid-glass] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-image: none; }
}

/* Reading panels show scenery through their glass, without other HUD text behind it. */
body:has(.overlay:not(.hidden)) :is(#hud, #xp, #chat, #feedback, #hint-text, #vo-who) { visibility: hidden; }

body:has(#reports:not(.hidden)) #tracker-panel,
body:has(.overlay:not(.hidden) > .modal-panel) :is(#tracker-panel, #desk-panel, #board-panel) { visibility: hidden; }
html #arcade-header h2 { color: var(--glass-ink); font: 650 25px var(--glass-font); letter-spacing: -.7px; text-shadow: none; }
html :is(#arcade-record, #arcade-close) { color: var(--glass-secondary); font-family: var(--glass-font); }

html .visitor-bar .name { color: var(--glass-ink); }

html .xp-quest-worth { color: var(--glass-success); }
html .music-station { color: var(--glass-ink); background: var(--glass-row); border-color: var(--glass-line); border-radius: 12px; font-size: 14px; padding: 11px 13px; }
html .music-station-name { color: var(--glass-ink); font-weight: 550; }
html .music-station:hover { background: var(--glass-hover); border-color: var(--glass-accent); }
html .music-station.playing { background: var(--glass-selected); border-color: var(--glass-accent); }
html #tv-header h2 { font-size: 25px; font-weight: 650; letter-spacing: -.7px; }
html #arcade-score { color: var(--glass-accent); font-family: var(--glass-font); font-size: 14px; }
html #arcade-controls { color: var(--glass-secondary); font-family: var(--glass-font); font-size: 12px; }
@media (max-width: 700px) {
  html .desk-line { flex-wrap: wrap; row-gap: 6px; padding: 10px 2px; }
  html .desk-line .desk-title { flex: 1 0 calc(100% - 36px); white-space: normal; overflow-wrap: anywhere; }
  html .desk-line .desk-crumb { max-width: 45%; }
}

/* Only the ambient HUD fades. Keyboard focus wakes it too. */
html :is(#hud, #xp, #chat):focus-within { opacity: 1; }
html :is(.tracker-folder-head, .tracker-recent-row, .board-ticket, #desk-clock) { border-radius: 16px; }
html :is(#tracker-search, #chat-input, .music-station) { border-radius: 14px; }
html #reports-frame { border-radius: 0 0 27px 27px; }

/* One work window, with the existing data panels as its two tab pages. */
html :is(#work-panel, #board-panel, #reports-panel, .modal-panel, .music-panel) { --glass-backdrop-blur: 8; }
#work-menu { z-index: 20; }
html #work-panel { display: flex; flex-direction: column; width: min(800px, 94vw); height: 88dvh; padding: 26px; min-height: 0; }
#work-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
#work-header h2 { margin: 0; font-size: 25px; font-weight: 650; letter-spacing: -.7px; }
#work-tabs { display: flex; align-self: flex-start; gap: 4px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass-row); }
#work-tabs button { padding: 9px 23px; border: 0; border-radius: 999px; background: transparent; color: var(--glass-secondary); font-size: 14px; font-weight: 550; cursor: pointer; }
#work-tabs button[aria-selected="true"] { background: var(--glass-selected); color: var(--glass-accent); box-shadow: inset 0 1px 0 var(--glass-edge); }
#work-tabs button:hover { background: var(--glass-hover); }
#work-content { display: flex; flex: 1; min-height: 0; }
.work-view { display: flex; flex: 1; min-height: 0; min-width: 0; }
.work-view.hidden { display: none; }
html #work-panel :is(#desk-panel, #tracker-panel) { flex: 1; width: 100%; max-height: none; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#work-panel :is(#tracker-header, #desk-close, #desk-header h2) { display: none; }
html #work-panel #desk-header { padding: 0; margin: 0 0 12px; border: 0; }
body:has(#reports:not(.hidden)) #work-panel,
body:has(.overlay:not(.hidden) > .modal-panel) #work-panel { visibility: hidden; }
@media (max-width: 700px) {
  html #work-panel { width: 100%; height: 94dvh; padding: 18px; border-radius: 22px; }
  #work-header { margin-bottom: 12px; }
  #work-tabs { margin-bottom: 14px; }
  #work-tabs button { padding: 9px 18px; }
}

/* Keep the separate glass header, without a rule or gap above the blue page. */
html #reports-header { border-bottom: 0; margin-bottom: 0; padding: 10px 14px 16px; }

/* The 3D pool table (client/src/world3d/Pool3d.ts). The arcade panel steps
   aside to a corner card — the table in the hall IS the game — and lets the
   mouse straight through to the world everywhere it isn't. */
html #arcade.world { background: none !important; pointer-events: none; padding: 0 !important; align-items: flex-start !important; justify-content: flex-start !important; }
html #arcade.world #arcade-panel { pointer-events: auto; position: fixed; top: 16px; left: 16px; width: auto; max-width: min(440px, calc(100vw - 32px)); padding: 14px 18px 12px; gap: 8px; align-items: stretch; border-radius: 22px; }
html #arcade.world #arcade-canvas { display: none !important; }
html #arcade.world #arcade-header { gap: 14px; }
html #arcade.world #arcade-header h2 { font-size: 19px; }
html #arcade.world #arcade-record { font-size: 12px; text-align: left; }
html #arcade.world #arcade-modes { gap: 6px; flex-wrap: wrap; }
html #arcade.world .arcade-mode { font-family: var(--glass-font); font-size: 13px; padding: 5px 12px; border-radius: 999px; }
html #arcade.world .arcade-mode:disabled { opacity: .45; cursor: not-allowed; }
html #arcade.world #arcade-foot { flex-direction: column; gap: 2px; }
/* NOT position: fixed — the card's backdrop-filter makes IT the containing block for
   anything fixed inside it, so "fixed to the screen" would land on top of the card. */
html #arcade.world #arcade-controls { font-size: 11.5px; line-height: 1.45; }
html #arcade.world #arcade-message { position: static; transform: none; min-width: 0; padding: 12px 14px; margin-top: 4px; }
html #arcade.world #arcade-message { background: var(--glass-row, rgba(255,255,255,.5)); border: 1px solid var(--glass-line, rgba(0,0,0,.08)); border-radius: 16px; box-shadow: none; gap: 6px; }
html #arcade.world #arcade-message b { color: var(--glass-ink); font: 650 18px var(--glass-font); letter-spacing: -.3px; text-shadow: none; }
html #arcade.world #arcade-message span { color: var(--glass-secondary); font: 500 13px var(--glass-font); }
html #arcade.world #arcade-lobby { width: min(400px, 86vw); padding: 8px 2px; }

.pool3d-power { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 23; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 14px; background: rgba(16, 20, 32, .66); color: #e9edf7; font: 700 11px var(--glass-font, system-ui); pointer-events: none; }
.pool3d-power div { position: relative; width: 20px; height: 36vh; border-radius: 8px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.pool3d-power i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, #5fd38d, #f2c200 60%, #e8553f); }
.pool3d-power b { font-size: 12px; }
.pool3d-note { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 23; padding: 9px 18px; border-radius: 999px; background: rgba(248, 250, 255, .86); color: #1d2433; font: 650 15px var(--glass-font, system-ui); box-shadow: 0 6px 20px rgba(10, 14, 30, .22); pointer-events: none; }
.pool3d-hint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 23; padding: 10px 18px; border-radius: 14px; background: rgba(16, 20, 32, .7); color: #f3f5fb; font: 650 15px var(--glass-font, system-ui); pointer-events: none; }
:is(.pool3d-power, .pool3d-note, .pool3d-hint)[hidden] { display: none; }

/* Beer pong's card (BeerPong3d.ts): top left, like the pool table's corner card. */
.bp-card { position: fixed; top: 16px; left: 16px; z-index: 22; width: min(360px, calc(100vw - 32px)); padding: 14px 18px 12px; border-radius: 22px; background: rgba(16, 20, 32, .78); color: #f1f3f9; font: 500 13px var(--glass-font, system-ui); box-shadow: 0 10px 30px rgba(8, 10, 20, .3); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 8px; }
.bp-card[hidden] { display: none; }
.bp-card h3 { margin: 0; font-size: 18px; font-weight: 700; }
.bp-card p { margin: 0; font-size: 14px; line-height: 1.35; }
.bp-card small { opacity: .62; font-size: 11.5px; line-height: 1.35; }
.bp-card .bp-score { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; opacity: .9; }
.bp-card .bp-score b { font-size: 17px; color: #ffcf6b; }
.bp-card .bp-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-card button { font: 600 13px var(--glass-font, system-ui); padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: inherit; cursor: pointer; }
.bp-card button:hover { background: rgba(255,255,255,.2); }
.bp-card button.primary { background: #f2c14e; color: #1d2433; border-color: #f2c14e; }

/* Playing any game: every other UI steps aside and only the chat stays (Hugo,
   2026-10-09). The class comes from client/src/ui/InGame.ts. Each game's own
   card, power meter and notes (#arcade, .bp-card, .pool3d-*) are deliberately
   not here; anything new that floats over the office belongs in this list. */
body.in-game :is(#hud, #xp, #hint, #celebration, #confetti, #challenge, #levelup, #worklist, #feedback,
  #screenview, #vo-who, #hall-board-count, #interaction-prompt, #gfx-notice,
  #where, #fps, #build, #hint-text, #season-veil) { display: none !important; }