/* TeachersDeck — ClassIn edition (port round 1, build classin.1).
   Everything is scoped to html.ed-classin / html.board-single, so the Chrome-extension build is untouched. */

/* the ClassIn browser is shared on the board: no personal XP / badges there */
html.ed-classin .xp-pill, html.ed-classin .badge-chip{ display:none !important; }

/* ---- board mode: ONE widget fills the browser window ---- */
html.board-single, html.board-single body{ overflow:hidden; }
html.board-single .topbar, html.board-single .dock-wrap, html.board-single .edge-dock, html.board-single #dock-top,
html.board-single .app-tray-tab, html.board-single #app-tray, html.board-single #app-tray-backdrop{ display:none !important; }
html.board-single .widget.widget-board{ position:fixed !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; margin:0 !important; transform-origin:center center; z-index:20; resize:none; max-width:none; max-height:none; }
html.board-single .widget-board .widget-head, html.board-single .widget-board .widget-resize{ display:none !important; }
html.board-single .widget-board .widget-body{ flex:1 1 auto; min-height:0; }
/* a full-screen widget (DrawDeck) in board mode: the whole window, as the widget lays itself out — no centring or scaling */
html.board-single .widget.widget-full.widget-board-full{ position:fixed !important; inset:0 !important; width:auto !important; height:auto !important; max-width:none !important; transform:none !important; border-radius:0 !important; border:0 !important; margin:0 !important; z-index:20; }
html.board-single .widget-board-full .widget-head{ display:none !important; }
.board-missing{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font:600 22px/1.4 'Quicksand',system-ui,sans-serif; color:#fff; }
@media (prefers-reduced-motion: reduce){ html.board-deck #wall{ transition:none; } }

/* the little toolbar (fades away when idle; any pointer movement brings it back) */
#board-bar{ position:fixed; right:14px; bottom:14px; z-index:60; display:flex; gap:6px; padding:6px; border-radius:16px; background:rgba(14,18,26,.84); border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 24px rgba(0,0,0,.4); backdrop-filter:blur(6px); transition:opacity .45s ease; }
#board-bar.idle{ opacity:0; pointer-events:none; }
#board-bar button{ min-width:42px; height:42px; padding:0 12px; border:0; border-radius:11px; background:rgba(255,255,255,.08); color:#fff; font:600 14px/1 system-ui,sans-serif; cursor:pointer; }
#board-bar button:hover{ background:rgba(232,163,61,.35); } #board-bar button:focus-visible{ outline:2px solid #e8a33d; outline-offset:2px; }
html.board-ui-off #board-bar{ display:none; }

/* "time's up" cue: it is visible even when the chime isn't audible to remote students */
#board-cue{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; cursor:pointer; color:#fff; background:#dc4632; animation:boardFlash .9s ease-in-out 6; }
#board-cue b{ font:800 min(14vw,16vh)/1.05 'Quicksand',system-ui,sans-serif; text-shadow:0 4px 24px rgba(0,0,0,.35); } #board-cue span{ font:700 min(6vw,6vh)/1.2 'Quicksand',system-ui,sans-serif; opacity:.95; } #board-cue small{ font:600 18px system-ui,sans-serif; opacity:.85; }
@keyframes boardFlash{ 0%,100%{ background:#dc4632; } 50%{ background:#f09628; } }

/* the share-audio reminder */
#board-hint{ position:fixed; bottom:0; left:0; z-index:70; display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:calc(100vw - 270px); padding:6px 10px; border-radius:0 12px 0 0; background:rgba(14,18,26,.96); border:1px solid #e8a33d; border-left:0; border-bottom:0; color:#fff; font:500 12.5px/1.35 system-ui,sans-serif; }
#board-hint button{ height:28px; padding:0 10px; border:0; border-radius:8px; background:rgba(255,255,255,.12); color:#fff; font:600 12px system-ui,sans-serif; cursor:pointer; } #board-hint button.go{ background:#e8a33d; color:#231604; }
#board-hint button:hover{ filter:brightness(1.2); }
@media (max-width:560px){ #board-hint{ max-width:100vw; bottom:64px; border-radius:0 12px 12px 0; } }

@media (prefers-reduced-motion: reduce){ #board-cue{ animation:none; } #board-bar{ transition:none; } }