/* student.css — Student view: read-only board, hand raise, overlays. */
/* ── Student mode — read-only canvas viewer ── */
body.student-mode header{display:none!important}
body.student-mode #hdr-float{display:none!important}
body.student-mode .kk-toolbar{display:none!important}
body.student-mode .add-menu{display:none!important}
body.student-mode .widget-grip{display:none!important}
body.student-mode .widget-close-btn{display:none!important}
body.student-mode .widget-op-btn{display:none!important}
body.student-mode .widget-edit-toggle{display:none!important}
body.student-mode .widget-head{display:none!important}
body.student-mode .widget .widget-body{padding-top:.75rem}
body.student-mode .widget{cursor:default!important;pointer-events:none}
body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.comprehension"]),
body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.classcheck"]),
body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.groupmaker"]),
body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.picker"]),
body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.attention"]),
body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.brainbreak"]),
body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.noise"]),body.student-mode .widget:has(.widget-eyebrow[data-i18n="widget.jungle"]){display:none!important}
/* Exception: the noise meter and the jungle always show in projector mode, even though they are hidden in student view.
   flex, like every widget (head + body that fills the rest): with block the body had no height and the jungle was empty.
   The projector window is the teacher's own, so its "Aktivera" button may be pressed there to start that computer's microphone. */
body.student-mode.projector-mode .widget:has(.widget-eyebrow[data-i18n="widget.noise"]),body.student-mode.projector-mode .widget:has(.widget-eyebrow[data-i18n="widget.jungle"]){display:flex!important}
body.student-mode.projector-mode .widget .nm-activate,body.student-mode.projector-mode .widget .jg-start-btn{pointer-events:auto;cursor:pointer}
/* Embeds (slides, YouTube, web pages, UR Play) stay interactive so each student
   can navigate them at their own pace — the rest of the board is locked. */
body.student-mode .widget iframe{pointer-events:auto}
/* Clickable tool tiles (Skolon tools / resources) stay tappable so students can
   open the linked tool in a new tab — re-enabled inside the otherwise-locked
   widget, the same way iframes are above. */
body.student-mode .widget .res-tile-inner{pointer-events:auto;cursor:pointer}
/* Flash cards: the student's set-pick buttons are the entry point into the
   review overlay — re-enabled inside the otherwise-locked widget. */
body.student-mode .widget .fc-set-pick{pointer-events:auto;cursor:pointer}
/* Checklist (student mode): each pupil checks their own items off — re-enabled inside the
   otherwise-locked widget, same pattern as fc-set-pick above. Without this the checkbox renders
   normally (sized by checklist.js's own --chk-ctrl-h) but is structurally unclickable, since it
   inherits pointer-events:none from the .widget rule and nothing here was re-enabling it. */
body.student-mode .widget .chk-box{pointer-events:auto;cursor:pointer}
body.student-mode .widget .chk-row--tap{pointer-events:auto;cursor:pointer}   /* whole row toggles for the pupil */
body.student-mode .widget-head .widget-close{display:none!important}
body.student-mode #view-planning{position:fixed!important;inset:0!important;clip-path:inset(0);-webkit-clip-path:inset(0)}
body.student-mode #kk-stage{position:absolute!important;inset:0!important}
/* Hide teacher-only widget controls in student mode */
body.student-mode .txt-ctrl{display:none!important}
body.student-mode .tt-tab-add{display:none!important}
body.student-mode .tt-tab-del{display:none!important}
body.student-mode .ag-add{display:none!important}
body.student-mode .res-tile-btn{display:none!important}
body.student-mode .res-tile-add{display:none!important}
body.student-mode .picker-btn-reset{display:none!important}
body.student-mode .traffic-edit-btn{display:none!important}
body.student-mode .traffic-sz-row{display:none!important}
body.student-mode .lqr-edit-btn{display:none!important}
body.student-mode .gif-edit-row{display:none!important}
body.student-mode .yt-change-btn{display:none!important}
body.student-mode .imgrow-cell-overlay{display:none!important}
/* Hairline flicker on weather/agenda borders in student/projector mode: both widgets sit under
   the present-mode scaler's non-integer scale() (ui-widget-style.js _applyPresentScale), and both
   have fractional container-query-sized content (weather-icon/temp clamp(...cqi...), agenda's
   showProgress bar ticking every 5s) sitting right above a 1px border — every repaint re-snaps
   that border to a slightly different sub-pixel line. A whole-stage will-change was tried and
   made things worse (it coupled every widget's repaint into one shared layer, so agenda's timer
   caused weather to repaint too). Promoting just these two widgets to their own small layer fixes
   the seam without that coupling. */
body.student-mode .widget[data-widget-key="widget.weather"],
body.student-mode .widget[data-widget-key="widget.agenda"]{transform:translateZ(0);backface-visibility:hidden}
body.student-mode [contenteditable]{pointer-events:none;cursor:default;user-select:none;outline:none}
/* Allow tab switching in tabbed text — tabs are read-only navigation */
body.student-mode .tt-tab-bar .tt-tab{pointer-events:auto;cursor:pointer}
/* Tabbed text widgets keep their tab bar visible in student mode: the bar lives inside
   .widget-head (hidden above), so re-show the head when it holds a tab bar, then hide the
   toolbar row inside it. Tabs are read-only navigation for the student. */
body.student-mode .widget .widget-head:has(.tt-tab-bar-head){display:flex!important;cursor:default}
body.student-mode .widget .txt-tool-row{display:none!important}
/* Read-only text bodies: the widget switches contenteditable off for students, and these
   rules re-enable pointer events so the text can be scrolled and selected — never edited. */
body.student-mode .widget .text-body-rich,
body.student-mode .widget .tt-content{pointer-events:auto;cursor:default}
/* Allow links in text widgets — students can click to open */
body.student-mode .widget a[href]{pointer-events:auto;cursor:pointer}
body.student-mode .widget a[href]:hover{text-decoration:underline}
body.student-mode .widget .asg-stu-text,
body.student-mode .widget .asg-choice-opt,
body.student-mode .widget .asg-open-one{pointer-events:auto;cursor:pointer}
body.student-mode .widget .asg-stu-text{cursor:text}
/* Lesson planner: students tap a plan card to read it (opens the read-only modal),
   same re-enable-inside-a-locked-widget pattern as .res-tile-inner above. The board
   stays non-draggable; only the cards/buttons inside the planner body are tappable.
   Two selectors: the .lessonplanner class is added by addLessonPlanner, and the
   data-widget-key attribute selector covers any widget restored before that ran. */
body.student-mode .widget.lessonplanner .lpw-card,
body.student-mode .widget.lessonplanner .lpw-btn,
body.student-mode .widget[data-widget-key="widget.lessonplanner"] .lpw-card,
body.student-mode .widget[data-widget-key="widget.lessonplanner"] .lpw-btn{pointer-events:auto;cursor:pointer}
/* Learn the clock: every pupil practises on their own screen — they can drag the hands, switch mode and
   check answers. Nothing they do is saved or sent anywhere (scheduleSave ignores student mode). */
body.student-mode .widget[data-widget-key="widget.learnclock"] .lk-svg,
body.student-mode .widget[data-widget-key="widget.learnclock"] .lk-hand,
body.student-mode .widget[data-widget-key="widget.learnclock"] .lk-mode,
body.student-mode .widget[data-widget-key="widget.learnclock"] .lk-btn{pointer-events:auto}
body.student-mode .widget[data-widget-key="widget.learnclock"] .lk-mode,
body.student-mode .widget[data-widget-key="widget.learnclock"] .lk-btn{cursor:pointer}
body.student-mode .widget[data-widget-key="widget.learnclock"] .lk-hand{cursor:grab}
/* Board switcher: students tap a board row to navigate to it (same
   re-enable-inside-a-locked-widget pattern as the lesson planner above). */
body.student-mode .widget.boardswitcher .bsw-item,
body.student-mode .widget[data-widget-key="widget.boardswitcher"] .bsw-item{pointer-events:auto;cursor:pointer}
body.student-mode .widget.boardswitcher .bsw-item[disabled],
body.student-mode .widget[data-widget-key="widget.boardswitcher"] .bsw-item[disabled]{cursor:default}
body.student-mode .tt-tab-lbl{pointer-events:none}
/* Make widget eyebrow title-only (no interactive cursor) */
body.student-mode .widget-eyebrow{cursor:default;pointer-events:none;user-select:none}
/* Widget title shown to students must stay one line, not wrap word-per-line in a
   narrow widget (e.g. the default 300px-wide flashcards box) — safe to force here
   since students never edit it anyway (see pointer-events:none just above); the
   teacher-facing (non-student-mode) eyebrow is left free to wrap while renaming. */
body.student-mode .widget-eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ── Student hand-raise pill ── */
.shf-bar{position:fixed;bottom:clamp(.55rem,2.4vmin,1.25rem);left:50%;transform:translateX(-50%);z-index:99999;display:inline-flex;align-items:center;gap:clamp(.4rem,1.6vmin,.75rem);padding:clamp(.4rem,1.4vmin,.625rem) clamp(.7rem,2.6vmin,1.25rem) clamp(.4rem,1.4vmin,.625rem) clamp(.4rem,1.6vmin,.75rem);background:rgba(240,244,246,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:9999px;box-shadow:0 .25rem 1.25rem rgba(0,0,0,.18);pointer-events:auto;white-space:nowrap;transition:border-radius .35s,background .35s,padding .35s,min-width .35s;overflow:visible}
/* Expanded when live results are shown */
.shf-bar.shf-live{flex-direction:column;align-items:stretch;border-radius:1.25rem;padding:1rem 1.25rem .875rem;min-width:min(88vw,22rem);background:rgba(15,25,30,.9);gap:.875rem;white-space:normal}
.shf-live-section{display:flex;flex-direction:column;gap:.5rem;animation:shf-slide-in .3s ease}
@keyframes shf-slide-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.shf-live-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.shf-live-q{flex:1;font-size:.875rem;font-weight:600;color:#fff;line-height:1.3}
.shf-live-count{font-size:.6875rem;color:rgba(255,255,255,.45);white-space:nowrap}
.shf-divider{height:1px;background:rgba(255,255,255,.12);margin:0 -.25rem}
/* Hand-raise row inside expanded bar */
.shf-hand-row{display:flex;align-items:center;gap:.75rem}
/* Student read-only hand list */
.shf-hand-list{display:flex;flex-direction:column;gap:.3rem;width:100%}
.shf-hand-list:empty{display:none}
.shf-hl-row{display:flex;align-items:center;gap:.5rem;padding:.25rem .1rem}
.shf-hl-name{flex:1;font-size:.8rem;font-weight:500;font-family:"Poppins",sans-serif;color:#1f2937;min-width:0;word-break:break-word;line-height:1.25}
.shf-hl-icon{font-size:.9rem;flex-shrink:0}
/* Expand bar pill to card when list is present */
.shf-bar:has(.shf-hand-list:not(:empty)){border-radius:1.1rem;padding:.6rem .85rem;flex-direction:column;align-items:stretch;white-space:normal;background:rgba(240,244,246,.97)}
.shf-bar.shf-live .shf-btn{background:rgba(255,255,255,.15);box-shadow:none}
.shf-bar.shf-live .shf-btn:hover{background:rgba(255,255,255,.25)}
.shf-bar.shf-live .shf-btn.shf-raised{background:#52b788}
.shf-bar.shf-live .shf-label{color:rgba(255,255,255,.75)}
.shf-bar.shf-live .shf-bar.shf-raised .shf-label{color:#52b788}
.cc-live-waiting{font-size:.8125rem;color:rgba(255,255,255,.5);text-align:center;padding:.375rem 0}
.shf-revote-btn{width:100%;padding:.4375rem 0;border-radius:99px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.65);font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s;margin-top:.25rem}
.shf-revote-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.shf-btn{position:relative;width:clamp(2.1rem,6vmin,2.8rem);height:clamp(2.1rem,6vmin,2.8rem);border-radius:50%;border:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.14);cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .15s,box-shadow .15s;flex-shrink:0}
.shf-btn:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,.18)}
/* Skolon Menu Button in the student FAB row — same fix as the teacher header
   (never touch the `background` shorthand, it holds the actual logo image),
   just resized/rounded to match the other circular shf-btn icons here. */
#shf-hand-row .skolon-menu-button,
#shf-hand-row a.skolon-menu-button{
  width:clamp(2.1rem,6vmin,2.8rem)!important;
  height:clamp(2.1rem,6vmin,2.8rem)!important;
  border:none!important;
  border-radius:50%!important;
  box-shadow:0 1px 4px rgba(0,0,0,.14)!important;
  background-size:60%!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform .15s,box-shadow .15s;
}
#shf-hand-row .skolon-menu-button:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,.18)!important}
/* Skolon's dropdown opens downward from the button by default — fine for the
   teacher header (near the top), but the student FAB row sits at the very
   bottom of the screen, so "downward" pushes it off-screen. Flip it to open
   upward instead, anchored to the button's own bottom edge. */
#shf-hand-row .skolon-menu-button-dropdown{
  top:auto!important;
  bottom:100%!important;
  margin-bottom:.5rem;
}
.shf-btn:active{transform:scale(.94)}
.shf-btn.shf-raised{background:#52b788;box-shadow:0 0 0 3px rgba(82,183,136,.3)}
.shf-icon{font-size:clamp(1.1rem,3.1vmin,1.45rem);line-height:1;display:block;transition:transform .2s}
.shf-btn.shf-raised .shf-icon{transform:translateY(-2px)}
.shf-label{font-family:"Poppins",sans-serif;font-size:clamp(.72rem,2.1vmin,.875rem);font-weight:600;color:#374151;user-select:none}
.shf-bar.shf-dormant #student-hand-btn,.shf-bar.shf-dormant #stu-chat-btn:not(.shf-chat-live){opacity:.38;filter:saturate(0);pointer-events:none}
#shf-board-name{font-size:.72rem;font-weight:700;color:#374151;white-space:nowrap;letter-spacing:.02em;padding:0 .15rem;user-select:none;max-width:12rem;overflow:hidden;text-overflow:ellipsis}
#shf-offline-lbl{display:none;font-size:.64rem;font-weight:700;color:#9ca3af;white-space:nowrap;letter-spacing:.02em;padding:0 .1rem;user-select:none}
.shf-bar.shf-dormant #shf-offline-lbl{display:inline}
.shf-bar.shf-raised .shf-label{color:#52b788}
#student-hand-fab{display:flex!important}
/* Student identity — small icon button top-right, opens a name + logout menu */
.student-top-right{position:fixed;top:clamp(2.25rem,4vmin,3rem);right:clamp(.55rem,2.4vmin,1rem);z-index:99998;display:flex;align-items:center;gap:.5rem}
.student-boards-btn{display:flex;align-items:center;justify-content:center;width:clamp(2.25rem,6.5vmin,2.75rem);height:clamp(2.25rem,6.5vmin,2.75rem);border-radius:var(--r-full);background:rgba(240,244,246,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 .25rem 1rem rgba(0,0,0,.15);color:var(--font,#333);text-decoration:none;transition:background .12s}
.student-boards-btn:hover{background:rgba(220,232,234,.95)}
.student-boards-btn .material-icons-outlined{font-size:clamp(1.1rem,3.2vmin,1.35rem)}
.student-id-chip{display:grid;place-items:center;border:none;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;transition:transform .15s,opacity .15s;overflow:visible}
.student-id-chip:hover{transform:scale(1.06);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.student-id-chip:active{transform:scale(.95)}
.student-id-chip .material-icons-outlined{font-size:clamp(1.35rem,3.9vmin,1.6rem)}
.sic-menu-overlay{position:fixed;inset:0;z-index:99999}
.stu-bm-overlay{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;background:rgba(10,30,36,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:1rem;animation:stu-bm-fade .16s ease}
.stu-bm-panel{background:#f6fafb;border-radius:1.5rem;width:min(94vw,48rem);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 1.75rem 4.5rem rgba(0,0,0,.35);overflow:hidden;font-family:"Poppins",sans-serif;animation:stu-bm-pop .2s cubic-bezier(.3,.8,.4,1)}
@keyframes stu-bm-fade{from{opacity:0}to{opacity:1}}
@keyframes stu-bm-pop{from{opacity:0;transform:translateY(.75rem) scale(.98)}to{opacity:1;transform:none}}
.stu-bm-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.125rem;background:#fff;border-bottom:1px solid #e6eef0;flex-shrink:0}
.stu-bm-head-ic{width:2.25rem;height:2.25rem;border-radius:.75rem;background:#e6f6f8;color:#29b0bb;display:grid;place-items:center;flex-shrink:0}
.stu-bm-head-ic .material-icons-outlined{font-size:1.25rem}
.stu-bm-title{flex:1;font-weight:700;font-size:1.0625rem;color:#1a1a1a}
.stu-bm-close{appearance:none;border:none;background:#f0f4f5;cursor:pointer;width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;color:#546365;transition:background .12s}
.stu-bm-close:hover{background:#e2eaec}
.stu-bm-close .material-icons-outlined{font-size:1.2rem}
.stu-boards-list{overflow-y:auto;padding:1rem 1.125rem 1.25rem;display:flex;flex-direction:column;gap:1.25rem}
.stu-boards-msg{text-align:center;padding:2.5rem 1rem;color:#8a9a9d;font-size:.9rem}
.stu-bm-group-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.625rem;min-width:0}
.stu-bm-group-h>.material-icons-outlined{font-size:1.25rem;color:#29b0bb;flex-shrink:0}
.stu-bm-group-name{font-weight:700;font-size:.9375rem;color:#1a1a1a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stu-bm-group-teacher{font-size:.75rem;color:#7d8f92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stu-bm-group-count{margin-left:auto;flex-shrink:0;font-size:.6875rem;font-weight:700;color:#1d7d86;background:#e1f3f5;border-radius:999px;padding:.125rem .5rem}
.stu-bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.875rem}
.stu-bm-card{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;background:#fff;border:2px solid #e3ebed;border-radius:1rem;padding:.4rem .4rem .55rem;gap:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .12s,box-shadow .12s,border-color .12s}
.stu-bm-card:hover{transform:translateY(-2px);border-color:#9fd8de;box-shadow:0 .5rem 1.25rem rgba(41,176,187,.18)}
.stu-bm-card:active{transform:none}
.stu-bm-card:focus-visible{outline:3px solid #29b0bb;outline-offset:2px}
.stu-bm-card.is-active{border-color:#29b0bb;box-shadow:0 0 0 3px rgba(41,176,187,.2)}
.stu-bm-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:.65rem;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.stu-bm-here{position:absolute;left:.4rem;bottom:.4rem;display:inline-flex;align-items:center;gap:.25rem;background:#fff;color:#1d7d86;font-size:.6875rem;font-weight:700;border-radius:999px;padding:.15rem .5rem .15rem .3rem;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.stu-bm-here .material-icons-outlined{font-size:.9rem;color:#29b0bb}
.stu-bm-name{padding:0 .3rem;font-size:.8125rem;font-weight:600;line-height:1.3;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.stu-bm-card.is-active .stu-bm-name{color:#1d7d86}
@media(max-width:480px){.stu-bm-panel{width:100%;max-height:92vh;border-radius:1.25rem}.stu-bm-grid{grid-template-columns:repeat(2,1fr);gap:.625rem}}
.sic-menu{position:fixed;z-index:100000;background:#fff;border-radius:1rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.18);padding:.75rem;font-family:"Poppins",sans-serif;min-width:min(70vw,12rem);animation:shf-slide-in .2s ease}
.sic-menu-name{font-size:.8125rem;font-weight:600;color:#374151;padding:.25rem .5rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #eef1f3;margin-bottom:.5rem}
.sic-menu-nav{display:flex;flex-direction:column;gap:.125rem;padding:.25rem 0 .5rem;border-bottom:1px solid #eef1f3;margin-bottom:.5rem}
.sic-menu-nav-link{display:flex;align-items:center;gap:.5rem;padding:.4375rem .5rem;border-radius:.5rem;text-decoration:none;color:#374151;font-size:.8125rem;font-weight:500;transition:background .12s}
.sic-menu-nav-link:hover{background:#f0f4f5}
.sic-menu-nav-link .material-icons-outlined{font-size:1.125rem;color:#39b0bb}
.sic-menu-logout{display:inline-flex;align-items:center;gap:.375rem;border:none;background:rgba(0,0,0,.06);color:#4b5563;border-radius:9999px;padding:.4375rem .875rem;cursor:pointer;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;transition:background .15s,color .15s}
.sic-menu-logout:hover{background:#e6797a;color:#fff}
.sic-menu-logout .material-icons-outlined{font-size:1rem}
.sic-lang-row{display:flex;gap:.25rem;padding:.25rem .25rem .5rem;flex-wrap:wrap;border-bottom:1px solid #eef1f3;margin-bottom:.5rem}
.sic-lang-btn{border:none;background:transparent;font-size:1.3rem;padding:.2rem .3rem;border-radius:.4rem;cursor:pointer;line-height:1;opacity:.5;transition:background .1s,opacity .1s}
.sic-lang-btn:hover{background:rgba(0,0,0,.07);opacity:1}
.sic-lang-btn.is-active{background:rgba(0,0,0,.09);opacity:1;outline:2px solid rgba(0,0,0,.18);outline-offset:-1px}
/* Prompt shown only when the board can't scale down and stay legible. */
#student-too-small{display:none;position:fixed;inset:0;z-index:99997;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;background:var(--bg,#eef4f5);text-align:center;padding:1.5rem;font-family:"Poppins",sans-serif}
#student-too-small .material-icons-outlined{font-size:2.75rem;color:var(--main,#39b0bb)}
#student-too-small h2{font-size:1.1rem;font-weight:600;margin:0;color:#1a1a1a}
#student-too-small p{font-size:.9rem;color:#6b7280;margin:0;max-width:20rem;line-height:1.4}
/* Attention / "focus on the teacher" — full-screen student overlay (see
   _showAttentionOverlay). Sits above the board, hand FAB and identity chip. */
#student-attention-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;background:linear-gradient(140deg,#39b0bb 0%,#1c7a83 65%,#155e66 100%);color:#fff;text-align:center;padding:2rem;font-family:"Poppins",sans-serif;animation:sao-in .35s ease both}
@keyframes sao-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes sao-out{from{opacity:1}to{opacity:0}}
.sao-beacon{position:relative;width:clamp(7rem,22vmin,11rem);height:clamp(7rem,22vmin,11rem);display:grid;place-items:center}
.sao-beacon .sao-ring{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.16);animation:sao-pulse 2.4s ease-out infinite}
.sao-beacon .sao-ring:nth-child(2){animation-delay:.8s}
.sao-beacon .sao-ring:nth-child(3){animation-delay:1.6s}
@keyframes sao-pulse{0%{transform:scale(.5);opacity:.6}70%{opacity:0}100%{transform:scale(1.65);opacity:0}}
.sao-core{position:relative;width:clamp(5rem,15vmin,7.5rem);height:clamp(5rem,15vmin,7.5rem);border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;box-shadow:0 .5rem 2rem rgba(0,0,0,.28);animation:sao-bob 3s ease-in-out infinite}
@keyframes sao-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.sao-core .material-icons-outlined{font-size:clamp(2.6rem,8vmin,4rem);color:#fff}
#student-attention-overlay h1{font-size:clamp(1.6rem,5.5vmin,2.8rem);font-weight:700;margin:0;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.2)}
@media (prefers-reduced-motion:reduce){#student-attention-overlay,.sao-core,.sao-beacon .sao-ring{animation:none!important}}
/* ── Brain Break overlay ── */
#brain-break-overlay{position:fixed;inset:0;z-index:2147483500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;background:linear-gradient(140deg,#39b0bb 0%,#2d7a84 100%);color:#fff;text-align:center;padding:2rem;font-family:"Poppins",sans-serif;animation:bbo-in .35s cubic-bezier(.22,1,.36,1) both}
@keyframes bbo-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes bbo-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.96)}}
/* ── Emoji blast overlay ── */
.emoji-blast-container{position:fixed;inset:0;z-index:99850;pointer-events:none;overflow:hidden}
.emoji-blast-particle{position:absolute;bottom:-80px;transform:translateX(-50%);animation:emoji-float-up var(--ef-dur,2s) ease-out var(--ef-delay,0s) forwards}
@keyframes emoji-float-up{0%{transform:translateX(-50%) scale(0) rotate(0deg);opacity:1}15%{transform:translateX(-50%) scale(1.3) rotate(-5deg);opacity:1}100%{transform:translateX(calc(-50% + var(--ef-drift,0px))) translateY(-110vh) scale(.7) rotate(var(--ef-rot,15deg));opacity:0}}
.bbo-emoji{font-size:clamp(4rem,14vmin,8rem);line-height:1;filter:drop-shadow(0 4px 16px rgba(0,0,0,.3));animation:bbo-bob 1.8s ease-in-out infinite}
@keyframes bbo-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
.bbo-title{font-size:clamp(1.4rem,5vmin,2.6rem);font-weight:800;margin:0;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.25);max-width:30rem;line-height:1.25}
.bbo-sub{font-size:clamp(.9rem,2.5vmin,1.2rem);font-weight:500;margin:0;opacity:.9}
.bbo-timer-wrap{position:relative;width:clamp(5rem,14vmin,7rem);height:clamp(5rem,14vmin,7rem);display:grid;place-items:center}
.bbo-ring{width:100%;height:100%;transform:rotate(-90deg)}
.bbo-ring-bg{fill:none;stroke:rgba(255,255,255,.25);stroke-width:5}
.bbo-ring-fg{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.bbo-seconds{position:absolute;font-size:clamp(1.3rem,5vmin,2rem);font-weight:800;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.3)}
/* Brain break widget styles */
.bb-btn{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;border:none;border-radius:999px;background:linear-gradient(135deg,#ff7b2e,#e63946);color:#fff;font-family:"Poppins",sans-serif;font-weight:700;font-size:clamp(.78rem,3.8cqi,1.4rem);padding:clamp(.42rem,2.1cqi,.9rem);cursor:pointer;transition:filter .15s,transform .1s;box-shadow:0 2px 10px rgba(230,57,70,.35)}
.bb-btn:hover{filter:brightness(1.08)}
.bb-btn:active{transform:scale(.97)}
.bb-btn--on{background:linear-gradient(135deg,#555,#333)}
.bb-status{font-size:clamp(.72rem,3.5cqi,1.05rem);color:var(--font-sub);min-height:1.4em;display:flex;align-items:center;gap:.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-status--on{color:#e63946;font-weight:600}
.bb-dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#e63946;animation:bb-pulse 1.4s ease-in-out infinite;flex-shrink:0}
@keyframes bb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
.bb-act-sel,.bb-dur-sel,.bb-custom{font:inherit;font-size:clamp(.72rem,3.2cqi,1rem);border:1px solid var(--border);border-radius:var(--r-md);padding:.3rem .5rem;background:var(--bg);color:var(--font);cursor:pointer}
.bb-rnd{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--font-sub);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:.3rem}
.bb-rnd:hover{background:var(--hover)}
@media (prefers-reduced-motion:reduce){.bbo-emoji,.bbo-ring-fg,.bb-dot{animation:none!important}}
/* Projector mode — hide interactive student controls, show fullscreen button */
body.projector-mode #student-hand-fab,
body.projector-mode #student-top-right{display:none!important}
.projector-fs-btn{position:fixed;bottom:1rem;right:1rem;z-index:99999;width:2.75rem;height:2.75rem;border:none;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s}
body.projector-mode:hover .projector-fs-btn{opacity:1}
.projector-fs-btn .material-icons-outlined{font-size:1.4rem}
/* Projector drag-hint modal */
@keyframes pdh-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes pdh-out{to{opacity:0;transform:scale(.96)}}
.projector-drag-hint{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);animation:pdh-in .25s ease both}
.pdh-card{background:#fff;border-radius:1.5rem;padding:2.5rem 2rem;text-align:center;max-width:23rem;width:90%;display:flex;flex-direction:column;align-items:center;gap:1rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.3)}
.pdh-icon{width:4.5rem;height:4.5rem;background:#ebf7f8;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pdh-icon .material-icons-outlined{font-size:2.2rem;color:#39b0bb;animation:pdh-bob 1.8s ease-in-out infinite}
@keyframes pdh-bob{0%,100%{transform:translate(0,0)}25%{transform:translate(6px,-4px)}75%{transform:translate(-6px,4px)}}
.pdh-title{font-size:1.15rem;font-weight:700;color:#1a1a1a;margin:0;line-height:1.3}
.pdh-sub{font-size:.85rem;color:#6b7280;margin:0;line-height:1.55}
.pdh-done{border:none;background:#39b0bb;color:#fff;border-radius:99px;padding:.65rem 1.6rem;font-family:"Poppins",sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;margin-top:.25rem}
.pdh-done:hover{background:#2f9aa5}
/* ── Kahoot header button (desktop teacher) ── */
.hdr-kahoot-btn{display:inline-flex;align-items:center;gap:.375rem;height:2rem;padding:0 .75rem;border-radius:var(--r-full);border:1px solid #46178f;background:transparent;color:#46178f;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .12s,color .12s;flex-shrink:0;white-space:nowrap}
.hdr-kahoot-btn:hover{background:#46178f;color:#fff}
.hdr-kahoot--on{background:#e74c3c!important;border-color:#e74c3c!important;color:#fff!important}
.hdr-kahoot-flyout{background:#fff;border-radius:1rem;padding:1rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.2);min-width:200px;display:flex;flex-direction:column;gap:.6rem}
/* ── Kahoot student overlay ── */
#student-kahoot-overlay{position:fixed;inset:0;z-index:2147483001;display:flex;align-items:center;justify-content:center;background:rgba(70,23,143,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:sko-in .35s cubic-bezier(.34,1.56,.64,1) both;font-family:"Poppins",-apple-system,sans-serif}
@keyframes sko-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes sko-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.94)}}
.sko-card{display:flex;flex-direction:column;align-items:center;gap:1rem;background:#fff;border-radius:1.75rem;padding:clamp(2rem,6vmin,3rem) clamp(2rem,8vmin,4rem);box-shadow:0 1.5rem 4rem rgba(0,0,0,.35);max-width:28rem;width:90vw;text-align:center}
.sko-logo-wrap{width:clamp(3rem,10vmin,4.5rem);height:clamp(3rem,10vmin,4.5rem)}
.sko-logo-svg{width:100%;height:100%}
.sko-label{margin:0;font-size:clamp(.9rem,2.5vmin,1.1rem);font-weight:600;color:#46178f;letter-spacing:.04em;text-transform:uppercase}
.sko-pin-wrap{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:#f3eeff;border-radius:1rem;padding:.75rem 2rem}
.sko-pin-lbl{font-size:.75rem;font-weight:700;color:#8b6ac9;letter-spacing:.1em;text-transform:uppercase}
.sko-pin{font-size:clamp(2rem,8vmin,3.5rem);font-weight:800;color:#46178f;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.sko-name-hint{margin:0;font-size:.9rem;color:#555}
.sko-name-hint strong{color:#46178f}
.sko-join-btn{display:inline-block;background:#46178f;color:#fff;font-family:inherit;font-weight:700;font-size:clamp(1rem,3.5vmin,1.25rem);padding:.85rem 2.5rem;border-radius:9999px;text-decoration:none;box-shadow:0 .4rem 1.2rem rgba(70,23,143,.4);transition:transform .12s,box-shadow .12s;cursor:pointer}
.sko-join-btn:hover{transform:translateY(-2px);box-shadow:0 .6rem 1.6rem rgba(70,23,143,.5)}
.sko-join-btn:active{transform:translateY(0)}
/* ── Kahoot teacher bar button ── */
.tm-kahoot{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;border:none;border-radius:.85rem;background:#46178f;color:#fff;font-family:inherit;font-weight:600;font-size:.95rem;padding:.72rem .6rem;cursor:pointer;box-shadow:0 2px 10px rgba(70,23,143,.35)}
.tm-kahoot:active{transform:translateY(1px)}
.tm-kahoot--on{background:#e74c3c;box-shadow:0 2px 12px rgba(231,76,60,.45)}
.tm-kahoot-icon{width:1.25rem;height:1.25rem;flex-shrink:0}
/* Kahoot PIN flyout */
.tm-kahoot-flyout{position:absolute;bottom:calc(100% + .5rem);left:0;right:0;background:#fff;border-radius:1rem;padding:1rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.2);display:flex;flex-direction:column;gap:.6rem;z-index:10}
.tmkf-label{font-size:.8rem;font-weight:700;color:#46178f;letter-spacing:.06em;text-transform:uppercase}
.tmkf-input{border:2px solid #46178f;border-radius:.6rem;padding:.55rem .75rem;font-size:1.6rem;font-weight:700;letter-spacing:.12em;font-family:inherit;color:#1a1a1a;text-align:center;outline:none;width:100%;box-sizing:border-box}
.tmkf-input:focus{border-color:#8b6ac9;box-shadow:0 0 0 3px rgba(70,23,143,.15)}
.tmkf-actions{display:flex;gap:.5rem}
.tmkf-cancel{flex:1;border:1.5px solid #d1d5db;background:transparent;border-radius:.6rem;padding:.5rem;font-family:inherit;font-size:.9rem;cursor:pointer;color:#555}
.tmkf-start{flex:2;border:none;background:#46178f;color:#fff;border-radius:.6rem;padding:.5rem 1rem;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.tmkf-start:active{transform:translateY(1px)}
/* Attention widget (teacher) */
.attn-btn{width:100%;flex:1;min-height:2.75rem;display:flex;align-items:center;justify-content:center;gap:clamp(.4rem,2.5cqi,1.1rem);border:none;border-radius:clamp(.85rem,3.5cqi,1.6rem);background:var(--main);color:#fff;font-family:inherit;font-weight:700;font-size:clamp(1rem,6.5cqi,2.9rem);line-height:1.15;padding:clamp(.7rem,3cqi,1.6rem) clamp(.9rem,4cqi,2rem);cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;box-shadow:0 .25rem .9rem rgba(57,176,187,.35)}
.attn-btn:hover{transform:translateY(-1px)}
.attn-btn:active{transform:translateY(0)}
.attn-btn .material-icons-outlined{font-size:clamp(1.25rem,9cqi,3.6rem)}
.attn-btn--on{background:#e6797a;box-shadow:0 .25rem .9rem rgba(230,121,122,.4);animation:attn-glow 2s ease-in-out infinite}
@keyframes attn-glow{0%,100%{box-shadow:0 .25rem .9rem rgba(230,121,122,.4)}50%{box-shadow:0 .25rem 1.4rem rgba(230,121,122,.7)}}
.attn-status{font-size:clamp(.85rem,4.2cqi,1.9rem);color:var(--font-sub);text-align:center;display:flex;align-items:center;justify-content:center;gap:.4rem}
.attn-status--on{color:#e6797a;font-weight:600}
.attn-dot{width:clamp(.5rem,2.6cqi,1.1rem);height:clamp(.5rem,2.6cqi,1.1rem);border-radius:50%;background:#e6797a;animation:attn-blink 1.1s ease-in-out infinite}
@keyframes attn-blink{0%,100%{opacity:1}50%{opacity:.25}}
.attn-msg-row{display:flex;flex-direction:column;gap:.25rem;font-size:clamp(.72rem,3.4cqi,1.5rem);color:var(--font-sub);font-weight:600;margin-top:auto}
.attn-msg-select{font-family:inherit;font-size:clamp(.82rem,4.2cqi,1.8rem);font-weight:500;color:var(--font);padding:clamp(.4rem,2cqi,1rem) clamp(.5rem,2.5cqi,1.1rem);border:1px solid var(--border);border-radius:.6rem;background:rgba(0,0,0,.03);cursor:pointer}
/* Three student layouts, chosen in _enterStudentMode / _studentFit:
   1. Phone (body.student-mobile): the simplified vertical card list.
   2. Desktop/Chromebook: the real board, scaled to fit — 1366×768 shows fine.
   3. Desktop with a genuinely tiny window (.board-too-small): "enlarge" prompt.
   The board always scales (see _studentFit), so #2 covers most small screens. */
/* 1. Phone */
body.student-mode.student-mobile #kk-scene{display:none!important}
body.student-mode.student-mobile #kk-stage{display:none}
body.student-mode.student-mobile #student-mobile-list{display:flex!important;position:fixed;inset:0;z-index:90000;background:var(--bg)}
body.student-mode.student-mobile #student-too-small{display:none!important}
/* Opt-in override — student tapped "Visa hela tavlan" (see student-ui.js
   _setStudentForceBoard). Higher specificity than the rules above, so it wins
   regardless of source order; #kk-scene needs !important to beat its own. */
body.student-mode.student-mobile.student-force-board #kk-scene{display:block!important}
body.student-mode.student-mobile.student-force-board #kk-stage{display:block}
body.student-mode.student-mobile.student-force-board #student-mobile-list{display:none!important}

/* arrows between the boards shared with the pupil */
.shf-arrow{flex:0 0 auto}
.shf-board-count{font-size:.68rem;font-weight:700;color:#6b7a84;background:rgba(0,0,0,.06);border-radius:999px;padding:.1rem .5rem;white-space:nowrap;user-select:none}
.stu-bm-grid{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}