/* gogoscoreboard.com/dashboard — dashboard + tile chrome (D1) Rides site.css tokens (--bg --panel --line --text --text-dim --accent --pill-bg --pill-ink) via [data-theme] on . Light theme = the bento look (white tiles, soft shadows, 24px radius); dark theme = panel-plus-border. Performance rules: transform/opacity-only animation, no backdrop-filter. */ :root{ --t-radius: 24px; --tile-bg: var(--panel); --tile-line: var(--line); --tile-sh: 0 1px 2px rgba(0,0,0,.22); --tile-sh-2: 0 4px 16px rgba(0,0,0,.32); --tile-sh-3: 0 8px 16px rgba(0,0,0,.35), 0 30px 70px rgba(0,0,0,.5); --dash-red: #FF453A; --ease: cubic-bezier(.19,1,.22,1); } [data-theme="light"]{ --tile-bg: #ffffff; --tile-line: rgba(29,29,31,.06); --tile-sh: 0 1px 2px rgba(29,29,31,.04), 0 6px 20px rgba(29,29,31,.05); --tile-sh-2: 0 2px 4px rgba(29,29,31,.05), 0 18px 44px rgba(29,29,31,.11); --tile-sh-3: 0 8px 16px rgba(29,29,31,.14), 0 30px 70px rgba(29,29,31,.28); } body.dash-body{ overflow-x: hidden; } .dash-wrap{ max-width: 1280px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 28px); } .dash-noscript{ border: 1.5px dashed var(--line); border-radius: var(--t-radius); padding: 24px; color: var(--text-dim); text-align: center; } .dash-noscript a{ color: var(--accent); } /* ================= Top bar ================= */ .dashbar{ position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); } .db-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; min-height: 56px; } .db-mark{ display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font-size: 16px; letter-spacing: -.01em; flex: none; } .db-mark b{ font-weight: 900; } .db-mark img{ width: 30px; height: 30px; border-radius: 9px; display: block; } .db-mark .lg-light{ display: none; } [data-theme="light"] .db-mark .lg-dark{ display: none; } [data-theme="light"] .db-mark .lg-light{ display: block; } /* layout switcher (name → dropdown menu) */ .db-layoutwrap{ position: relative; display: flex; min-width: 0; } .db-layoutname{ display: inline-flex; align-items: center; gap: 6px; max-width: 34vw; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-dim); border: 1px solid transparent; border-left: 1px solid var(--line); border-radius: 0 10px 10px 0; padding: 6px 10px 6px 12px; cursor: pointer; white-space: nowrap; background: none; } .db-layoutname:hover{ color: var(--text); } .db-ln-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-ln-caret{ flex: none; color: var(--text-dim); } .db-layoutname[aria-expanded="true"]{ color: var(--text); background: var(--tile-bg); border-color: var(--line); border-radius: 10px; } .db-menu{ position: absolute; top: calc(100% + 8px); left: 0; z-index: 80; width: min(320px, calc(100vw - 24px)); background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--tile-sh-3); padding: 8px; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); max-height: min(72vh, 560px); overflow-y: auto; } .db-menu.open{ opacity: 1; transform: none; pointer-events: auto; } .lm-sec{ font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: 8px 8px 5px; } .lm-list{ display: flex; flex-direction: column; gap: 2px; } .lm-layout{ display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); } .lm-layout:hover{ background: var(--tile-bg); } .lm-layout.on{ background: var(--tile-bg); } .lm-check{ width: 14px; flex: none; color: var(--accent); font-weight: 900; } .lm-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-count{ flex: none; font-size: 11px; font-weight: 800; color: var(--text-dim); background: var(--tile-bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .lm-layout.on .lm-count{ background: var(--bg); } .lm-actions{ display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 4px; border-top: 1px solid var(--line); margin-top: 6px; } .lm-actions.lm-backupline{ border-top: 0; margin-top: 0; padding-top: 0; } .lm-act{ font: inherit; font-size: 12px; font-weight: 700; color: var(--text); background: var(--tile-bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; } .lm-act:hover{ border-color: var(--accent); } .lm-danger{ color: var(--dash-red); } .lm-danger:hover{ border-color: var(--dash-red); } .lm-presets{ display: flex; flex-direction: column; gap: 4px; } .lm-preset{ display: block; width: 100%; text-align: left; cursor: pointer; background: var(--tile-bg); border: 1px solid var(--tile-line); border-radius: 12px; padding: 9px 12px; font: inherit; color: var(--text); transition: transform .18s var(--ease), border-color .18s; } .lm-preset:hover{ transform: translateY(-1px); border-color: var(--accent); } .lm-preset b{ display: block; font-size: 13px; font-weight: 800; letter-spacing: -.01em; } .lm-preset span{ display: block; font-size: 11px; color: var(--text-dim); line-height: 1.35; } .lm-foot{ font-size: 11px; color: var(--text-dim); line-height: 1.45; padding: 8px 8px 4px; } .db-actions{ margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .db-display{ width: auto; padding: 0 12px; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); } .db-display:hover{ color: var(--text); } .db-add{ display: inline-flex; align-items: center; gap: 7px; background: var(--pill-bg); color: var(--pill-ink); font: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .2s var(--ease); } .db-add:hover{ transform: translateY(-1px); } .db-btn{ width: 38px; height: 38px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--tile-bg); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 15px; line-height: 1; } .db-btn:hover{ border-color: var(--accent); } .db-btn:disabled{ opacity: .38; cursor: default; } .db-btn:disabled:hover{ border-color: var(--line); } .db-reset{ width: auto; padding: 0 13px; font-size: 13px; font-weight: 700; color: var(--text-dim); gap: 7px; } .db-reset:hover{ color: var(--text); } /* two-line label — "Reset" + what it actually does, so it doesn't read teacher-only */ .db-reset .t{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; } .db-reset .t b{ font-weight: 700; } .db-reset .t small{ font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; } .db-vol{ width: 74px; accent-color: var(--accent); } .db-time{ font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ================= Grid + tile chrome ================= */ .dash{ padding: clamp(14px, 2.5vh, 26px) clamp(12px, 3vw, 28px) 40px; } .grid{ display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: row dense; gap: 14px; } .empty-note{ grid-column: 1 / -1; text-align: center; color: var(--text-dim); border: 1.5px dashed var(--line); border-radius: var(--t-radius); padding: clamp(28px, 5vh, 56px) clamp(16px, 4vw, 40px); font-size: 14px; } .empty-note b{ color: var(--text); } .es-h{ font-size: clamp(18px, 3vw, 24px); font-weight: 800; letter-spacing: -.02em; color: var(--text); } .es-sub{ font-size: 13px; color: var(--text-dim); margin-top: 6px; } .es-presets{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 22px auto 0; max-width: 900px; } .es-card{ display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; background: var(--tile-bg); border: 1px solid var(--tile-line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--tile-sh); color: var(--text); font: inherit; transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; } .es-card:hover{ transform: translateY(-3px); box-shadow: var(--tile-sh-2); border-color: var(--accent); } .es-card-h{ font-size: 15px; font-weight: 800; letter-spacing: -.01em; } .es-card-t{ font-size: 12px; color: var(--text-dim); } .es-card-w{ font-size: 10.5px; color: var(--text-dim); opacity: .8; margin-top: 3px; line-height: 1.4; } .es-build{ margin-top: 22px; } .es-free{ font-size: 12px; color: var(--text-dim); margin-top: 16px; } /* ================= Share modal ================= */ .share-modal{ position: fixed; inset: 0; z-index: 120; display: none; } .share-modal.open{ display: block; } .sm-scrim{ position: absolute; inset: 0; background: rgba(0,0,0,.42); } .sm-card{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 28px)); background: var(--bg); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--tile-sh-3); padding: 20px 22px 22px; } .sm-h{ display: flex; align-items: center; gap: 10px; } .sm-h b{ font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .sm-x{ margin-left: auto; width: 30px; height: 30px; border-radius: 10px; border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 15px; } .sm-x:hover{ background: var(--tile-bg); color: var(--text); } .sm-sub{ font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 8px 0 14px; } .sm-url{ width: 100%; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .sm-row{ display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .sm-note{ font-size: 11px; color: var(--text-dim); flex: 1; min-width: 140px; line-height: 1.4; } .widget{ position: relative; background: var(--tile-bg); border: 1px solid var(--tile-line); border-radius: var(--t-radius); box-shadow: var(--tile-sh); display: flex; flex-direction: column; overflow: hidden; min-height: 236px; transition: box-shadow .3s var(--ease); animation: tile-pop .4s var(--ease); } @keyframes tile-pop{ from{ opacity: 0; transform: scale(.96) translateY(10px); } to{ opacity: 1; transform: none; } } .widget:hover{ box-shadow: var(--tile-sh-2); } .widget[data-size="s"]{ grid-column: span 3; } .widget[data-size="m"]{ grid-column: span 6; min-height: 280px; } .widget[data-size="l"]{ grid-column: span 12; min-height: 330px; } .w-head{ display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; flex: none; } .w-head:active{ cursor: grabbing; } .w-grip{ color: var(--text-dim); flex: none; opacity: .6; } .w-dot{ width: 8px; height: 8px; border-radius: 3px; flex: none; } .w-name{ font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w-btns{ margin-left: auto; display: flex; gap: 4px; flex: none; } .w-btn{ width: 26px; height: 26px; border-radius: 8px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--text-dim); font: inherit; font-size: 11px; font-weight: 800; transition: background .15s, color .15s; } .w-btn:hover{ background: var(--bg); color: var(--text); } .w-btn.x:hover{ background: rgba(255,69,58,.14); color: var(--dash-red); } .w-body{ flex: 1; display: flex; flex-direction: column; padding: 2px 16px 16px; min-height: 0; } /* drag states */ .widget.ph{ opacity: .35; box-shadow: none; } .widget.ph::after{ content: ""; position: absolute; inset: 0; border: 2px dashed var(--text-dim); opacity: .5; border-radius: var(--t-radius); } .ghost{ position: fixed; left: 0; top: 0; z-index: 300; margin: 0; pointer-events: none; opacity: .94; box-shadow: var(--tile-sh-3) !important; transform-origin: 20% 10%; animation: none; } body.dragging, body.dragging *{ cursor: grabbing !important; } /* fullscreen (two-path: native + CSS fallback) */ .widget.fs-fallback{ position: fixed; inset: 0; z-index: 250; border-radius: 0; min-height: 0; } .widget:fullscreen{ background: var(--tile-bg); } .widget.is-full{ border-radius: 0; box-shadow: none; } .widget.is-full .w-head{ padding: 18px 22px; cursor: default; } .widget.is-full .w-grip{ visibility: hidden; } .widget.is-full .w-body{ padding: 0 clamp(18px, 4vw, 60px) clamp(18px, 4vh, 44px); justify-content: center; } .widget.is-full .w-btn{ width: 34px; height: 34px; font-size: 13px; } /* ================= Shared widget primitives ================= */ .num{ font-variant-numeric: tabular-nums; } .hint{ font-size: 11px; color: var(--text-dim); } .fld{ background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); min-width: 0; } .fld:focus{ outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } textarea.fld{ resize: vertical; line-height: 1.45; } .act{ background: var(--pill-bg); color: var(--pill-ink); border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; padding: 8px 16px; border-radius: 999px; flex: none; transition: transform .2s var(--ease), opacity .2s; } .act:hover{ transform: translateY(-1px); } .act:active{ transform: scale(.96); } .act.lite{ background: transparent; color: var(--text-dim); border: 1px solid var(--line); } .act.lite:hover{ color: var(--text); border-color: var(--accent); } .act:disabled{ opacity: .4; pointer-events: none; } .seg{ display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex: none; } .seg button{ font: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 0; background: none; color: var(--text-dim); cursor: pointer; } .seg button.on{ background: var(--text); color: var(--bg); } /* ================= Add-widget drawer ================= */ .scrim{ position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.38); opacity: 0; pointer-events: none; transition: opacity .3s; } .scrim.open{ opacity: 1; pointer-events: auto; } .drawer{ position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(400px, calc(100vw - 18px)); background: var(--bg); border-left: 1px solid var(--line); box-shadow: -8px 0 40px rgba(0,0,0,.25); transform: translateX(102%); visibility: hidden; /* closed drawer must not be clickable or tabbable */ transition: transform .38s var(--ease), visibility 0s linear .38s; display: flex; flex-direction: column; } .drawer.open{ transform: none; visibility: visible; transition: transform .38s var(--ease); } .dw-head{ display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; flex: none; } .dw-head h3{ font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--text); } .dw-close{ margin-left: auto; width: 30px; height: 30px; border-radius: 10px; border: 0; background: none; display: grid; place-items: center; color: var(--text-dim); cursor: pointer; } .dw-close:hover{ background: var(--tile-bg); color: var(--text); } .dw-list{ flex: 1; overflow-y: auto; padding: 2px 20px 30px; } .dw-cat{ font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 7px; margin: 18px 0 8px; } .dw-cat i{ width: 8px; height: 8px; border-radius: 3px; flex: none; } .dw-item{ width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-line); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--tile-sh); color: var(--text); font: inherit; transition: transform .25s var(--ease), box-shadow .25s; } .dw-item:hover:not(.soon){ transform: translateY(-2px); box-shadow: var(--tile-sh-2); } .dw-ico{ width: 34px; height: 34px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; color: var(--text); flex: none; } .dw-txt{ flex: 1; min-width: 0; } .dw-txt b{ display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; } .dw-txt span{ display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.4; } .dw-state{ flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--accent); } .dw-item.added .dw-state{ color: var(--text-dim); } .dw-item.soon{ background: transparent; box-shadow: none; border: 1px dashed var(--line); cursor: default; } .dw-item.soon .dw-ico{ color: var(--text-dim); } .dw-item.soon .dw-txt b{ color: var(--text-dim); } .dw-item.soon .dw-state{ font-size: 9px; background: var(--text); color: var(--bg); padding: 3px 8px; border-radius: 999px; } .dw-hint{ font-size: 11.5px; color: var(--text-dim); line-height: 1.5; padding: 4px 4px 6px; } /* ================= Toast ================= */ .toast{ position: fixed; left: 50%; bottom: 26px; z-index: 400; transform: translate(-50%, 16px); background: var(--text); color: var(--bg); font-size: 13px; font-weight: 600; letter-spacing: -.01em; padding: 10px 20px; border-radius: 999px; box-shadow: var(--tile-sh-2); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); max-width: calc(100vw - 32px); text-align: center; } .toast.on{ opacity: 1; transform: translate(-50%, 0); } .dash-foot{ padding: 10px clamp(12px, 3vw, 28px) 34px; text-align: center; font-size: 12px; color: var(--text-dim); } .dash-foot a{ color: var(--text-dim); } /* ================= Responsive ================= */ @media (max-width: 1024px){ .grid{ grid-template-columns: repeat(2, 1fr); } .widget[data-size="s"]{ grid-column: span 1; } .widget[data-size="m"], .widget[data-size="l"]{ grid-column: span 2; } } @media (max-width: 900px){ .db-display .t{ display: none; } .db-display{ width: 38px; padding: 0; justify-content: center; } } @media (max-width: 820px){ .db-reset .t{ display: none; } .db-reset{ width: 38px; padding: 0; color: var(--text); } } @media (max-width: 700px){ .db-vol{ display: none; } } @media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } .widget[data-size="s"], .widget[data-size="m"], .widget[data-size="l"]{ grid-column: span 1; } .db-add .t{ display: none; } .db-add{ width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 12px; } .db-layoutname{ max-width: 40vw; } .db-row{ gap: 7px; } .db-actions{ gap: 6px; } .db-menu{ position: fixed; left: 8px; right: 8px; top: 60px; width: auto; } } /* ================= Reduced motion ================= */ @media (prefers-reduced-motion: reduce){ .widget, .toast, .drawer, .scrim, .db-add, .act{ transition: none !important; } .widget{ animation: none; } *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ══════════ W1c — shared team identity (Okabe-Ito + shapes) ══════════ Rendered by widgets/identity.js glyphHtml(): --ti is the team color, --ti-ink its light-theme-legible variant; --ti-edge is a hairline SVG stroke that keeps pale shapes visible on white and dark ones on dark. Loaded by BOTH the dashboard and the display mirror (this stylesheet). */ .ti-glyph{ display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; color: var(--ti, var(--accent)); --ti-edge: rgba(255,255,255,.30); } [data-theme="light"] .ti-glyph{ color: var(--ti-ink, var(--ti, var(--accent))); --ti-edge: rgba(29,29,31,.25); } .ti-glyph svg{ display: block; } /* the visual-signals top-bar toggle (and any future .db-btn latch) */ .db-btn.on{ border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* ══════════ W1c — visual signals ("loud gym" cues) ══════════ Full-viewport twins of the semantic sound signals, played by dashboard/vfx.js on the control page AND the display mirror. WCAG: every cue ≤3 flashes/second; only opacity (plus a transform on the sweep/wipe bars) ever animates; reduced motion collapses every cue to the .static 500ms edge border. Cues never intercept the pointer. */ .vfx{ position: fixed; inset: 0; z-index: 380; pointer-events: none; } /* whistle — double WHITE edge blink (a dark hairline keeps it visible on the light theme) */ .vfx-whistle{ box-shadow: inset 0 0 0 7px rgba(255,255,255,.96), inset 0 0 0 10px rgba(0,0,0,.5), inset 0 0 110px rgba(255,255,255,.55); opacity: 0; animation: vfx-blink2 .95s linear forwards; } @keyframes vfx-blink2{ 0%,100%{ opacity: 0; } 10%,28%{ opacity: 1; } 40%,52%{ opacity: 0; } 64%,84%{ opacity: 1; } } /* horn — triple AMBER edge pulse */ .vfx-horn{ box-shadow: inset 0 0 0 9px #F5A623, inset 0 0 130px rgba(245,166,35,.55); opacity: 0; animation: vfx-pulse3 1.4s linear forwards; } @keyframes vfx-pulse3{ 0%,100%{ opacity: 0; } 7%,19%{ opacity: 1; } 29%{ opacity: .12; } 39%,51%{ opacity: 1; } 61%{ opacity: .12; } 71%,87%{ opacity: 1; } } /* buzzer — RED edge + a red bar sweeping down the screen once */ .vfx-buzzer{ box-shadow: inset 0 0 0 8px rgba(255,69,58,.95), inset 0 0 130px rgba(255,69,58,.5); opacity: 0; animation: vfx-hold 1s linear forwards; } .vfx-buzzer::after{ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; background: rgba(255,69,58,.9); animation: vfx-sweep 1s linear forwards; } @keyframes vfx-hold{ 0%{ opacity: 0; } 10%,80%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes vfx-sweep{ from{ transform: translateY(0); } to{ transform: translateY(calc(100vh + 32px)); } } /* rotate — one full-screen wipe in the next station's color (else accent) */ .vfx-rotate .vfx-wipe{ position: absolute; inset: 0; display: block; background: var(--vfx-c, var(--accent)); opacity: .88; transform: translateX(-103%); animation: vfx-wipe 1s cubic-bezier(.4,0,.2,1) forwards; } @keyframes vfx-wipe{ from{ transform: translateX(-103%); } to{ transform: translateX(103%); } } /* tick — tiny corner pip (ticks are frequent; keep it subtle) */ .vfx-tick::after{ content: ""; position: absolute; right: 18px; bottom: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); opacity: 0; animation: vfx-pip .36s ease-out forwards; } @keyframes vfx-pip{ 0%{ opacity: 0; } 25%,70%{ opacity: .95; } 100%{ opacity: 0; } } /* reduced motion — every cue becomes a STATIC 500ms edge border (vfx.js adds .static and removes the node after 500ms; no keyframes run) */ .vfx.static{ animation: none; opacity: 1; } .vfx.static.vfx-whistle{ box-shadow: inset 0 0 0 8px rgba(255,255,255,.96), inset 0 0 0 11px rgba(0,0,0,.5); } .vfx.static.vfx-horn{ box-shadow: inset 0 0 0 8px #F5A623; } .vfx.static.vfx-buzzer{ box-shadow: inset 0 0 0 8px rgba(255,69,58,.95); } .vfx.static.vfx-buzzer::after{ display: none; } .vfx.static.vfx-rotate{ box-shadow: inset 0 0 0 8px var(--vfx-c, var(--accent)); } .vfx.static.vfx-rotate .vfx-wipe{ display: none; } .vfx.static.vfx-tick::after{ animation: none; opacity: .9; }