/* Full-screen classroom workspace; tablets keep the desktop side panel. */
#clock-fullscreen-modal.clock-workspace {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: #f3f8f7; color: #173c3d; animation: none; font-family: 'Sarabun', sans-serif;
    height: 100dvh; overflow: hidden; letter-spacing: 0;
}
#clock-fullscreen-modal.clock-workspace.hidden { display: none; }
#clock-fullscreen-modal.clock-workspace:fullscreen { width: 100%; height: 100%; }
#clock-fullscreen-modal.clock-workspace:-webkit-full-screen { width: 100%; height: 100%; }
.clock-fullscreen-status { position: absolute; top: 78px; left: 16px; right: 16px; z-index: 10040; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 10px 14px; border: 1px solid #edd49a; border-radius: 8px; background: #fff6df; color: #785a1d; font-size: 13px; }
.clock-workspace *, .clock-workspace *::before, .clock-workspace *::after { box-sizing: border-box; }
.clock-workspace button, .clock-workspace input, .clock-workspace select { font: inherit; letter-spacing: 0; }
.clock-workspace button { cursor: pointer; }
.clock-workspace button:disabled { cursor: default; opacity: .45; }
.clock-workspace :is(button, input, select):focus-visible { outline: 3px solid #247dc7; outline-offset: 3px; }
.clock-workspace-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex: 0 0 auto; padding: max(16px, env(safe-area-inset-top)) 24px 16px;
    background: #fff; border-bottom: 1px solid #dbe8e5;
}
.clock-workspace-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.clock-workspace-brand img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
.clock-workspace-brand span { display: block; color: #548179; font-size: 11px; font-weight: 700; }
.clock-workspace-brand h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.clock-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.clock-workspace .clock-icon-button {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px;
    width: 42px; height: 42px; padding: 0; border: 1px solid #d4e2de; border-radius: 8px;
    color: #416860; background: #fff; font-size: 16px; box-shadow: none;
}
.clock-workspace .clock-icon-button:hover:not(:disabled), .clock-workspace .clock-icon-button.is-open { background: #e3f3ed; color: #075d50; border-color: #b4d8cd; }
.clock-workspace .clock-close-button:hover { background: #fff0f0; color: #b33547; border-color: #ebc5cb; }
.clock-workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; flex: 1; min-height: 0; }
.clock-workspace.clock-tools-hidden .clock-workspace-body { grid-template-columns: minmax(0, 1fr); }
#clock-fullscreen-modal.clock-workspace .clock-fullscreen-content {
    width: auto; min-width: 0; min-height: 0; max-height: none; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 32px; overflow: auto; border: 0; border-radius: 0; background: transparent;
    box-shadow: none; backdrop-filter: none; color: #173c3d; text-shadow: none; container-type: inline-size;
}
.clock-view-switch { display: inline-flex; flex-shrink: 0; padding: 4px; gap: 4px; background: #e5eeeb; border-radius: 8px; max-width: 100%; }
.clock-view-switch button { padding: 10px 16px; border: 0; border-radius: 6px; background: transparent; color: #526c65; font-size: 14px; font-weight: 700; white-space: nowrap; }
.clock-view-switch button i { margin-right: 5px; }
.clock-view-switch button[aria-pressed="true"] { background: #fff; color: #086957; box-shadow: 0 1px 4px #183e3512; }
.clock-time-stage { flex: 1; width: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 28px 0; }
.clock-live-view { width: 100%; min-width: 0; }
.clock-stage-label { display: block; color: #5a766d; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
#clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { display: block; color: #123f3c; font-size: 88px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; text-shadow: none; white-space: nowrap; }
#clock-fullscreen-modal.clock-workspace .clock-fullscreen-date { display: block; margin-top: 20px; font-size: 17px; color: #62776f; line-height: 1.7; font-weight: 400; text-shadow: none; }
.clock-countdown-view { display: none; width: 100%; min-width: 0; }
.clock-workspace.clock-view-timer .clock-live-view { display: none; }
.clock-workspace.clock-view-timer .clock-countdown-view { display: block; }
#clock-fullscreen-modal.clock-workspace .clock-timer-display {
    display: block; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
    box-shadow: none; color: #145b76; font-size: 112px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.clock-workspace .clock-timer-progress { display: block; width: min(100%, 640px); height: 6px; border: 0; border-radius: 3px; margin: 24px auto; overflow: hidden; background: #dbe7e4; accent-color: #188d78; }
.clock-timer-progress::-webkit-progress-bar { background: #dbe7e4; border-radius: 3px; }
.clock-timer-progress::-webkit-progress-value { background: #188d78; border-radius: 3px; transition: width .25s linear; }
.clock-timer-progress::-moz-progress-bar { background: #188d78; border-radius: 3px; }
.clock-workspace .clock-main-actions, .clock-workspace .clock-panel-actions { display: flex; justify-content: center; align-items: center; gap: 8px; }
.clock-workspace .clock-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 10px 18px; border: 1px solid #096b59; border-radius: 8px; color: #fff; background: #096b59; font-size: 14px; font-weight: 700; }
.clock-workspace .clock-primary-button:hover { background: #075345; }
.clock-panel-actions .clock-primary-button { flex: 1; }
#clock-fullscreen-modal.clock-workspace.clock-timer-warning .clock-timer-display { color: #a2620a; }
#clock-fullscreen-modal.clock-workspace.clock-timer-finished .clock-timer-display { color: #b8354b; }
.clock-workspace.clock-timer-finished #clock-timer-heading { color: #b8354b; }
#clock-fullscreen-modal.clock-workspace .clock-control-panel {
    position: static; top: auto; left: auto; width: auto; min-width: 0; max-height: none;
    border: 0; border-left: 1px solid #dbe8e5; border-radius: 0; padding: 24px;
    background: #fff; color: #173c3d; backdrop-filter: none; box-shadow: none; overflow-y: auto;
}
#clock-fullscreen-modal.clock-workspace .clock-control-panel.hidden { display: none; }
.clock-workspace .clock-control-section + .clock-control-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e2ebe8; }
.clock-workspace .clock-control-title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: #1e443e; font-size: 15px; font-weight: 700; line-height: 1.5; }
.clock-workspace .clock-control-title i { color: #168879; }
.clock-workspace .clock-control-section:nth-child(2) .clock-control-title i { color: #317cba; }
.clock-workspace .clock-control-section:nth-child(3) .clock-control-title i { color: #c2821d; }
.clock-workspace .clock-timer-form { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); align-items: end; gap: 8px; margin-bottom: 12px; }
.clock-workspace .clock-timer-form label { display: grid; gap: 7px; color: #667d74; font-size: 12px; font-weight: 600; }
.clock-workspace .clock-timer-form input { width: 100%; height: 60px; padding: 8px; background: #f6f9f8; border: 1px solid #d5e2dc; border-radius: 8px; color: #173c3d; text-align: center; font-size: 28px; font-weight: 700; }
.clock-input-separator { align-self: end; padding-bottom: 15px; color: #84978f; font-size: 24px; text-align: center; }
.clock-workspace .clock-timer-form input:disabled { color: #657b73; background: #edf2f0; }
.clock-workspace .clock-timer-panel-status { margin: 10px 0 16px; min-height: 18px; color: #61776e; font-size: 12px; font-weight: 400; }
.clock-workspace .clock-preset-list { gap: 8px; }
.clock-workspace .clock-preset-button { display: grid; grid-template-columns: 20px 1fr; gap: 2px 7px; text-align: left; justify-items: start; min-height: 58px; padding: 9px; border-radius: 8px; border: 1px solid #dbe6ee; background: #f1f7fb; color: #255a79; font-size: 12px; font-weight: 600; }
.clock-workspace .clock-preset-button i { color: #4384b0; grid-row: span 2; align-self: center; font-size: 16px; }
.clock-workspace .clock-preset-button b { color: #657e8f; font-size: 11px; font-weight: 400; }
.clock-workspace .clock-preset-button:hover { transform: none; background: #dfedf7; border-color: #7cacd0; }
.clock-workspace .clock-tool-grid button { padding: 10px 8px; min-height: 48px; border-radius: 8px; background: #f4f8f6; color: #234f43; border: 1px solid #dce8e1; font-size: 12px; font-weight: 600; justify-content: flex-start; }
.clock-workspace .clock-tool-grid button i { color: #368467; font-size: 16px; width: 19px; }
.clock-workspace .clock-tool-grid button:nth-child(2) { background: #fff8e8; color: #805e1e; border-color: #f0e2bd; }
.clock-workspace .clock-tool-grid button:nth-child(2) i { color: #b78120; }
.clock-workspace .clock-tool-grid button:hover { transform: none; background: #e4f0eb; border-color: #7db79f; }
.clock-workspace .clock-tool-grid button:nth-child(2):hover { background: #ffecb5; border-color: #d2ac4d; }
.clock-workspace .clock-random-room-row { margin: 0 0 12px; }
.clock-workspace .clock-random-room-row label, .clock-workspace .clock-field-label { display: block; font-size: 12px; font-weight: 600; color: #61776e; }
.clock-workspace .clock-field-label { margin: 12px 0 6px; }
.clock-workspace :is(.clock-random-room-row select, .clock-sound-select, .clock-announcement-form input) { width: 100%; height: 42px; padding: 8px 10px; border: 1px solid #d5e2dc; border-radius: 8px; background: #fff; color: #244c40; font-size: 13px; font-weight: 400; }
.clock-workspace .clock-announcement-form { grid-template-columns: minmax(0, 1fr) 36px 36px; gap: 6px; margin: 0; }
.clock-workspace .clock-announcement-form button { width: 36px; height: 42px; border-radius: 8px; background: #e3f2ed; color: #16785e; border: 1px solid #d1e5dc; font-size: 13px; }
.clock-workspace .clock-announcement-form button:last-child { background: #f8faf9; color: #64776e; border-color: #d5e2dc; }
.clock-workspace .clock-announcement-form input::placeholder { color: #86968f; }
#clock-fullscreen-modal.clock-workspace .clock-announcement-display { width: 100%; max-width: 640px; margin: 24px 0 0; border: 0; border-left: 3px solid #d0a44e; border-radius: 0; padding: 12px 16px; background: #fff5dc; color: #795720; font-size: 16px; font-weight: 600; line-height: 1.6; }
#clock-fullscreen-modal.clock-workspace .clock-classroom-layer { width: 100%; max-width: 760px; margin: auto 0; }
.clock-workspace .clock-fullscreen-content:has(.clock-classroom-layer:not(.hidden)) .clock-time-stage { display: none; }
.clock-workspace .clock-fullscreen-content:has(.clock-classroom-layer:not(.hidden)) .clock-tool-return { display: inline-flex; align-items: center; gap: 8px; }
.clock-workspace .clock-tool-return { padding: 10px 14px; border: 1px solid #cedfd7; border-radius: 8px; color: #326452; background: #fff; font-size: 13px; margin-top: 18px; }
.clock-workspace .clock-team-card, .clock-workspace .clock-breathing-card, .clock-workspace .clock-random-card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 20px 0; color: #173c3d; }
.clock-workspace .clock-team-header { font-size: 16px; color: #2c5247; }
.clock-workspace .clock-team-header button { background: #fff; border: 1px solid #d5e2dc; color: #597165; border-radius: 6px; }
.clock-workspace .clock-team-grid-display { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.clock-workspace .clock-team-box { background: #fff; border: 1px solid #d8e5df; border-radius: 8px; padding: 18px 12px; }
.clock-workspace .clock-team-box strong { color: #597569; font-size: 14px; }
.clock-workspace .clock-team-box b { color: #166951; font-size: 40px; }
.clock-workspace .clock-team-box:nth-child(2) b { color: #267cac; }
.clock-workspace .clock-team-box:nth-child(3) b { color: #b57d16; }
.clock-workspace .clock-team-box:nth-child(4) b { color: #b24969; }
.clock-workspace .clock-team-box button { background: #edf4f1; color: #275442; border-radius: 6px; width: 40px; height: 40px; }
.clock-workspace .clock-random-card::before, .clock-workspace .clock-random-orbit { display: none; }
#clock-fullscreen-modal.clock-workspace.clock-random-active .clock-fullscreen-content { padding: 16px 24px; }
#clock-fullscreen-modal.clock-workspace .clock-classroom-layer.clock-random-mode { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 14px 0 0; }
#clock-fullscreen-modal.clock-workspace .clock-random-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; gap: 6px; height: 100%; min-height: 0; padding: 0; overflow: visible; }
#clock-fullscreen-modal.clock-workspace .clock-random-stage { width: 100%; height: auto; min-height: 0; margin: 0; aspect-ratio: auto; overflow: hidden; }
.clock-workspace .clock-random-photo-wrap { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
#clock-fullscreen-modal.clock-workspace .clock-random-photo { width: auto; height: 100%; max-width: 100%; min-height: 0; aspect-ratio: 3 / 4; object-fit: contain; border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
#clock-fullscreen-modal.clock-workspace .clock-random-name { font-size: 32px; color: #173c3d; line-height: 1.4; overflow-wrap: anywhere; }
#clock-fullscreen-modal.clock-workspace .clock-random-kicker, #clock-fullscreen-modal.clock-workspace .clock-random-room { color: #627b70; font-size: 14px; }
.clock-workspace .clock-random-again { background: #096b59; color: #fff; border-radius: 8px; box-shadow: none; font-size: 14px; }
.clock-workspace .clock-random-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.clock-workspace .clock-random-actions .clock-random-again { margin: 0; min-height: 40px; padding: 8px 14px; }
.clock-workspace .clock-random-enlarge { display: none; }
.clock-workspace .is-revealed .clock-random-enlarge { display: inline-flex; background: #e1efea; color: #1b6956; }
.clock-workspace .clock-random-spotlight { position: absolute; inset: 0; z-index: 10035; display: block; background: #edf5f1; padding: max(64px, calc(env(safe-area-inset-top) + 56px)) 24px max(20px, env(safe-area-inset-bottom)); pointer-events: auto; overflow: auto; animation: clockWinnerEnter .25s ease-out both; }
.clock-workspace .clock-spotlight-toolbar { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: flex; gap: 8px; }
.clock-workspace .clock-random-spotlight-rays, .clock-workspace .clock-random-spark { display: none; }
.clock-workspace .clock-random-spotlight-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 320px; gap: 12px; animation: none; }
.clock-workspace .clock-random-spotlight-card img { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.clock-workspace .clock-random-spotlight-card .clock-spotlight-info { display: flex; flex-direction: column; min-width: 0; width: 100%; max-width: 1200px; border-radius: 0; background: transparent; border: 0; color: #173c3d; padding: 0; gap: 4px; box-shadow: none; backdrop-filter: none; text-align: center; }
.clock-workspace .clock-random-spotlight-card strong { width: 100%; font-size: 40px; line-height: 1.3; overflow-wrap: anywhere; }
.clock-workspace .clock-random-spotlight-card small, .clock-workspace .clock-random-spotlight-card span { color: #527769; font-size: 18px; }
.clock-workspace .clock-random-spotlight-card .clock-spotlight-actions { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.clock-workspace .clock-spotlight-actions .clock-tool-return { margin: 0; }
@keyframes clockWinnerEnter { from { opacity: 0; } to { opacity: 1; } }
.clock-workspace .clock-breathing-circle { width: 160px; height: 160px; background: #d5eee5; color: #1b6551; border: 1px solid #b3d8ca; box-shadow: none; }
.clock-workspace .clock-breathing-circle span { color: #1b6551; font-size: 18px; }
.clock-workspace .clock-breathing-card p, .clock-workspace .clock-breathing-card b { color: #517464; font-size: 16px; }
@media (min-width: 768px) and (max-width: 1100px) {
    .clock-workspace-body { grid-template-columns: minmax(0, 1fr) 300px; }
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-content { padding: 24px 20px; }
    #clock-fullscreen-modal.clock-workspace .clock-control-panel { padding: 20px; }
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { font-size: 64px; }
    #clock-fullscreen-modal.clock-workspace .clock-timer-display { font-size: 80px; }
    .clock-view-switch button { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 767px) {
    .clock-workspace-header { padding: max(12px, env(safe-area-inset-top)) 14px 12px; gap: 8px; }
    .clock-workspace-brand { gap: 8px; }
    .clock-workspace-brand img { width: 30px; height: 30px; }
    .clock-workspace-brand span { font-size: 10px; }
    .clock-workspace-brand h2 { font-size: 13px; }
    .clock-header-actions { gap: 6px; }
    .clock-workspace-header .clock-icon-button { width: 36px; height: 40px; flex-basis: 36px; }
    .clock-workspace-body, .clock-workspace.clock-tools-hidden .clock-workspace-body { display: block; overflow: auto; }
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-content { min-height: 300px; padding: 20px 16px; overflow: visible; }
    .clock-time-stage { min-height: 216px; padding: 24px 0 8px; }
    .clock-stage-label { font-size: 13px; margin-bottom: 10px; }
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { font-size: 48px; }
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-date { font-size: 13px; margin-top: 12px; }
    #clock-fullscreen-modal.clock-workspace .clock-timer-display { font-size: 64px; }
    .clock-view-switch button { padding: 9px 12px; font-size: 13px; }
    #clock-fullscreen-modal.clock-workspace .clock-control-panel { border-left: 0; border-top: 1px solid #dbe8e5; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); overflow: visible; }
    .clock-workspace .clock-timer-progress { margin: 16px 0; }
    .clock-workspace .clock-countdown-view { max-width: 100%; }
    .clock-workspace.clock-tools-hidden .clock-fullscreen-content { min-height: calc(100dvh - 80px); }
    #clock-fullscreen-modal.clock-workspace .clock-random-name { font-size: 20px; }
    #clock-fullscreen-modal.clock-workspace.clock-random-active .clock-fullscreen-content { height: max(520px, calc(100dvh - 90px)); padding: 16px; }
    .clock-workspace .clock-random-spotlight { padding-left: 12px; padding-right: 12px; }
    .clock-workspace .clock-random-spotlight-card { gap: 10px; }
    .clock-workspace .clock-random-spotlight-card strong { font-size: 24px; }
    .clock-workspace .clock-random-spotlight-card small, .clock-workspace .clock-random-spotlight-card span { font-size: 14px; }
    #clock-fullscreen-modal.clock-workspace .clock-announcement-display { font-size: 14px; margin-top: 18px; }
}
/* Size the digits to their available stage, including when the tool panel is hidden. */
@container (min-width: 480px) {
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { font-size: 112px; }
    #clock-fullscreen-modal.clock-workspace .clock-timer-display { font-size: 144px; }
}
@container (min-width: 600px) {
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { font-size: 144px; }
    #clock-fullscreen-modal.clock-workspace .clock-timer-display { font-size: 176px; }
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-date { font-size: 22px; }
}
@container (min-width: 800px) {
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { font-size: 184px; }
    #clock-fullscreen-modal.clock-workspace .clock-timer-display { font-size: 224px; }
}
@container (min-width: 1100px) {
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { font-size: 240px; }
    #clock-fullscreen-modal.clock-workspace .clock-timer-display { font-size: 304px; }
}
@container (min-width: 1500px) {
    #clock-fullscreen-modal.clock-workspace .clock-fullscreen-time { font-size: 320px; }
    #clock-fullscreen-modal.clock-workspace .clock-timer-display { font-size: 400px; }
}
@media (prefers-reduced-motion: reduce) {
    .clock-workspace *, .clock-workspace *::before, .clock-workspace *::after { animation: none !important; transition: none !important; }
}