/** Doorway Online learning activities.
  * General style sheet
  * Copyright (c) Roger Spooner 2017
  * Based on features of Flash-based web site doorwayonline.org.uk
  */

/* ---------------------------------------------------------------------------
   Shared colour tokens.

   Named by semantic role, not by hex value. Individual activities may still
   hardcode Flash-faithful sprite / art-palette colours where the value
   carries no shared meaning.
--------------------------------------------------------------------------- */
:root {
    /* Text — descending contrast on a light background */
    --dw-color-text-primary: #222;         /* main dark body / heading text */
    --dw-color-text-strong: #333;          /* strong body text, borders on chrome */
    --dw-color-text-secondary: #444;       /* secondary body copy, captions */
    --dw-color-text-muted: #555;           /* subtitles, "info" notes */
    --dw-color-text-disabled: #bbb;        /* placeholder / silhouette / version chrome */

    /* Borders / dividers — descending weight */
    --dw-color-border-medium: #666;        /* input outlines, weight-1 dividers */
    --dw-color-border-neutral: #aaa;       /* text-input / toggle-btn defaults */
    --dw-color-border-muted: #888;         /* dashed phantom slots, tens-grid lines */
    --dw-color-border-light: #ccc;         /* subtle table row rules, grid lines */
    --dw-color-border-faint: #ddd;         /* very light dividers, scrollbar track */

    /* Focus ring — canonical accessible high-contrast blue */
    --dw-color-focus-ring: #0066cc;

    /* Feedback states */
    --dw-color-feedback-correct: #007700;  /* correct answer borders / text */
    --dw-color-feedback-wrong: #cc0000;    /* wrong answer / try-again */

    /* Shadows */
    --dw-color-shadow-strong: rgba(0, 0, 0, 0.35);  /* modal backdrop, drop-shadow */
    --dw-color-shadow-modal: rgba(0, 0, 0, 0.3);    /* modal-panel box-shadow */

    /* Buttons */
    --dw-color-button-default-bg: #ddeeee;      /* .main_button default */
    --dw-color-button-black-theme-bg: #002266;  /* .bg_theme_black .main_button */

    /* -------------------------------------------------------------------
       Spacing scale. Named by "how tight/loose", not by numeric value,
       because each token is used interchangeably across padding / margin
       / gap. Values in em (1em = 1/50th of activity width).
       ------------------------------------------------------------------- */
    --dw-space-tight:   0.2em;   /* smallest inter-element gap (fine gutters) */
    --dw-space-snug:    0.3em;   /* close-packed form controls, table cells */
    --dw-space-narrow:  0.4em;   /* inner padding for pills / small panels   */
    --dw-space-default: 0.5em;   /* canonical inter-element gap / screen pad */
    --dw-space-comfy:   0.6em;   /* padding for headings, chunkier tiles     */
    --dw-space-loose:   1em;     /* outer section padding, wide gap          */

    /* -------------------------------------------------------------------
       Font-size scale. Only three tiers are tokenized — values that
       have a coherent semantic role across activities. Body/reset (1em)
       and Flash-faithful sprite-ratio sizes are deliberately left inline.
       ------------------------------------------------------------------- */
    --dw-font-size-subheading: 1.2em;  /* h3-equivalent — options section titles, tables */
    --dw-font-size-large:      1.4em;  /* emphasised prompt / big numeric marker */
    --dw-font-size-heading:    1.5em;  /* h2-equivalent — banner + result titles */
}

div.doorway_application, div.doorway_fullscreen_div {
    font-family: "Jotter Primary", sans-serif;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Full Screen area */
div.doorway_fullscreen_div:-webkit-full-screen, div.doorway_fullscreen_div:-moz-full-screen, div.doorway_fullscreen_div:-ms-fullscreen, div.doorway_fullscreen_div:fullscreen {
    width: 100vw;
    height: 100vh;
}

/* Canvas sizing. Maintains 16:9 aspect by capping width via viewport height
   (177.78vh = vh × 16/9) and height via viewport width (56.25vw = vw × 9/16).
   Whichever dimension is smaller relative to 16:9 wins, so the canvas always
   fills as much of the viewport as 16:9 allows, with letterbox padding on the
   other axis. Browser zoom shrinks the CSS-px viewport, which both shrinks the
   canvas and triggers flow mode for welcome / options once the viewport is
   narrow enough that reflowing beats scaling down (see section 2). */
div.doorway_aspect_outer_div {
    width: 100%;
    height: 100%;
    max-width: 177.78vh;
    max-height: 56.25vw;
    position: relative;
}

div.doorway_aspect_div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    /* font-size should be changed by JavaScript to be relative to width,
       but vw (viewport width) will do so long as the window is not too wide.
       There seems to be no font-size measure that is relative to the parent
       container size. Font sizes are relative to the parent's font size.
     */
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
}

/* Paragraphs in Doorway are not prose. Simplify layout */
p, h1, h2, h3, h4 {
    margin: 0.1em;
	font-weight: normal;
}

p
{
	line-height: 1.5;	
}

h1, h2, h3, h4
{
	line-height: 1.2;
}

h1
{
	font-size: 2em;
}

h2
{
	font-size: var(--dw-font-size-heading);
}

h3
{
	font-size: var(--dw-font-size-subheading);
}


body, html {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

@font-face {
    font-family: "Jotter Primary";
    src: url("jotter-primary.ttf");
}

/* Main (brief) instructions to the end user */
#dwInstructionHeader {
    text-align: center;
    font-size: 200%;
}

.doorway_logo {
    position: absolute;
    width: 2em;
    top: 0.5em;
    right: 0.5em;
}

.doorway_logo a {
    display: block;
    width: 100%;
}

.doorway_logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Mouse feedback on the welcome-screen logo link — subtle opacity dip so
   hovering shows it's a link. Keyboard users already get the global
   :focus-visible dotted ring; the :focus-visible rule is kept for hover→focus
   parity in check_focus_styles.py. */
.doorway_logo a:focus-visible {
    opacity: 0.75;
}
@media (hover: hover) {
    .doorway_logo a:hover {
        opacity: 0.75;
    }
}

.doorway_welcome {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	width: inherit;
	height: inherit;
}

/* div.welcome_image  is sized in each activity */

div.welcome_image img
{
    width: 100%;
    height: 100%;
}

.version_number
{
    /* color: darkgray; */
    position: absolute;
    bottom: 0.5em;
    left: 0;
    font-size: 60%;
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
}

.sub_title
{
    padding: var(--dw-space-loose);
}

.copyright_message
{
    /* auto top margin pushes the footer to the bottom of the flex-column welcome screen */
    margin: auto 0 0;
    padding: var(--dw-space-default) 0 var(--dw-space-tight);
    font-size: 65%;
    color: var(--dw-color-border-medium);
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.activity_description
{
  font-size: 60%;
  margin-top: 0;
}

/* Landmark wrapper — transparent to the flex layout of dwAspectDiv */
div.doorway_aspect_div > main {
    display: contents;
}

/** Teacher navigation features that should not detract from the game play */

#dwNavigationHeader {
    text-align: left;
    color: var(--dw-color-text-disabled);
    position: absolute;
    height: 1.2em;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 10;
}

/** Pop-up to tell the user they've done something right */
.well_done_message {
    position: absolute;
    /* height: 15%; */
    left: 40%;
    top: 45%;
    font-size: 150%;
    background-color: white;
    vertical-align: middle;
    border: 0.2em solid orange;
    border-radius: 0.5em;
}

.well_done_message p {
    margin-top: var(--dw-space-default);
    margin-bottom: var(--dw-space-default);
    padding-left: var(--dw-space-loose);
    padding-right: var(--dw-space-loose);
}

#dwWellDoneNextButton {
    left: 40em;
    top: 23em;
    width: 7em;
    height: 3.5em;
    position: absolute;
    border-radius: 25%;
}

#dwWellDoneNextButton img {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.hidden_panel, div#dwMainActivityArea .hidden_panel {
    display: none;
}

.shown_panel {
    display: inline-block;
}

/* Native `hidden` attribute. `showScreen()` toggles this on every top-level
 * screen wrapper (see doorway.js) alongside the .hidden_panel class. Uses
 * `!important` on purpose: activities carry ID-anchored rules such as
 * `#dwShoppingScreen.sm-screen { display: grid }` which naturally out-specify
 * the browser's UA `[hidden] { display: none }` rule. The semantic contract
 * of the `hidden` attribute is "this element is invisible/inactive", so an
 * !important is the right shape here — authors shouldn't be able to make a
 * `hidden` element visible without deliberately reaching for `.attr()` /
 * inline overrides. Note: an activity that *wants* to keep an element in
 * the layout (e.g. animated fade-out) should not use `hidden`.
 */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
 * Shared top-level activity/results screen wrapper.
 *
 * Applied to <div id="dwActivityScreen"> / <div id="dwResultsScreen"> (and
 * per-scene siblings) in every newer activity that uses the standard
 * flex-column stage. Per-activity CSS then only needs to declare what
 * genuinely varies (padding, gap, overflow, position, background).
 *
 * The `.hidden_panel` sibling has (0,2,0) specificity so it beats the bare
 * `.dw-activity-screen` rule — activities no longer need to redeclare
 * `.<slug>-screen.hidden_panel { display: none }` just to defeat the
 * `display: flex` above. Note: ID-anchored per-activity overrides
 * (e.g. `#dwShoppingScreen.sm-screen { display: grid }`) still need their
 * own ID-anchored hidden_panel rule — see supermarket.css. (The new
 * `[hidden]` rule further above wins over ID-anchored overrides too, so
 * activities that opt into native visibility don't need those.)
 * -------------------------------------------------------------------------- */
.dw-activity-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.dw-activity-screen.hidden_panel { display: none; }

/* Modifier: opt-in "layout passthrough" wrapper. Activities that add this
 * class to their `.dw-activity-screen` div let their inner layout wrapper
 * (e.g. `.aas-activity-layout`, `.sm-screen-body`) pick its own layout
 * mode (flex column, grid, block, whatever) without the shared
 * `display: flex` on the outer div fighting it. Combines with the standard
 * `[hidden]` rule above — a hidden wrapper is `display: none` regardless.
 *
 * Accessibility caveat: `display: contents` used to remove the element
 * from the a11y tree in older browsers; fixed in Chrome 89+, Firefox 63+,
 * Safari 11.1+. The wrapper carries no ARIA role, so exposure is
 * uninteresting either way — axe should catch any regression.
 */
.dw-activity-screen.dw-activity-screen--contents {
    display: contents;
}

button {
    font-size: 100%;
	flex-basis: max-content;
}

.teacher_button {
    border: 0.1em solid white;
    box-sizing: border-box;
    display: inline-block;
    padding: 0.1em;
    margin: 0.1em;
    height: 2em;
    width: 3em;
    border-radius: 0.5em;
}

.teacher_button img {
    width: 100%;
    height: 100%;
}

/* The form wrapper gets the absolute position; the inner div fills it. */
form.user_options {
    position: absolute;
    width: 100%;
    height: calc(100% - 1.5em);
    top: 1.5em;
    left: 0;
    overflow-y: auto;
}

/* Outer option groups: padding + left-aligned content for a consistent layout
   across activities. The body sets text-align:center for the activity area;
   inside an option group, all labels, radios, and helper text are left-aligned
   regardless. The page heading (.title_message) and the submit pencil button
   sit OUTSIDE the option groups and remain centred. */
form.user_options fieldset.options_group {
    padding: var(--dw-space-comfy) 1.5em 0.9em;
    text-align: left;
}

/* Inner control fieldsets (radio groups inside an options_group) — strip default
   fieldset border/padding so they sit cleanly in a CSS grid cell. */
form.user_options fieldset.options_group fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Sub-panel revealed by a radio toggle (typically wired via this.wireVisibleWhen).
   Bordered, light background to distinguish from the parent option group. */
.dw-scan-subpanel {
    margin-top: var(--dw-space-default);
    padding: var(--dw-space-default) 0.8em;
    border: 1px solid var(--dw-color-border-light);
    border-radius: 0.4em;
    background: #f8f8f8;
}

/* Italic info note inside a sub-panel (e.g. "Blocks are always used in scanning mode."). */
.dw-scan-note {
    margin: var(--dw-space-default) 0 0;
    font-size: 0.7em;
    font-style: italic;
    color: var(--dw-color-text-muted);
}

/* Scanning on/off row: Scanning label + On/Off radio pair, flowed inline. */
.dw-scan-onoff {
    display: flex;
    align-items: center;
    gap: var(--dw-space-snug);
    margin-top: var(--dw-space-narrow);
}

/* Switches cell inside the sub-panel: Two/One switch radios followed by the
   inline "Key: Space [and Enter]" hint (.dw-scan-keys-hint). Wraps to a new
   line on narrow viewports; the tighter row-gap keeps the hint associated
   with the buttons above rather than the Scan-delay row below. */
.dw-scan-switches-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dw-space-snug) var(--dw-space-default);
}

.dw-scan-switches-cell .dw-scan-note {
    margin: 0;
}

/* Scan-delay cell: label + spinner side-by-side. Toggled via wireVisibleWhen
   on num_switches so it only shows in one-switch (auto-scan) mode. */
.dw-scan-delay-cell {
    display: flex;
    align-items: center;
    gap: var(--dw-space-comfy);
    margin-top: var(--dw-space-snug);
}

.dw-scan-delay-cell.hidden_panel {
    display: none;
}

.dw-scan-delay-cell > p {
    margin: 0;
}

/* Scan-back-button fieldset inside the sub-panel: legend + On/Off radios. */
.dw-scan-back-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dw-space-snug) var(--dw-space-default);
    margin-top: var(--dw-space-default);
}

div.user_options {
    width: 100%;
    height: 100%;
}

div.darkened_panel {
    background: white;
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0.01;
    top: 0;
}

/*div.user_options .user_options_form {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
}
*/

div.user_options .options_group {
    margin: var(--dw-space-default) var(--dw-space-loose);
    position: relative;
    text-align: left;
    justify-content: space-between;
}

div.user_options .options_group_title {
    text-align: left;
    margin: 0;
    padding: 0 var(--dw-space-default);
    font-size: 100%;
    font-weight: normal;
}

div.user_options .options_layout_grid tr td {
    text-align: center;
    margin: 0.1em;
    padding: 0.1em;
    position: relative;
}

.options_layout_grid p, .options_layout_grid td {
    margin: 0;
}

table.options_layout_grid {
    margin-top: -1em;
}

table {
    /* using tables should not change font size */
    font-size: 100%;
}

div.user_options label.user_options_radio {
    border: 0.1em solid grey;
    margin: 0.1em;
    padding: 0.1em;
    border-radius: 0.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

input[type="radio"]:checked + label.user_options_radio {
    background-color: chartreuse;
}

/* Voice picker sits under the speech-mode radios. Hidden by default —
   .hidden_panel wins when set; .shown_panel switches us to flex so the
   label + <select> line up. Specificity (0,2,0) beats .hidden_panel. */
.dw_voice_picker {
    align-items: center;
    gap: var(--dw-space-default);
    margin: var(--dw-space-snug) 0.1em 0;
    padding: var(--dw-space-tight) var(--dw-space-narrow);
    flex-wrap: wrap;
}

.dw_voice_picker.shown_panel {
    display: flex;
}

.dw_voice_picker_label {
    font-weight: bold;
}

/* Override `div.user_options select { display: none }` above — the legacy
   pattern is custom spinners, but the voice picker uses a native <select>. */
div.user_options select.dw_voice_select,
.dw_voice_select {
    display: inline-block;
    font-size: inherit;
    padding: var(--dw-space-tight) var(--dw-space-snug);
    border-radius: 0.3em;
    border: 0.1em solid grey;
    max-width: 12em;
    /* Long voice names ("Microsoft Hazel Desktop - English (Great Britain)")
       overflow the row; truncate gracefully so the spinner doesn't blow out. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Voice-picker spinner row: lay out [<] <select> [>] inline so the buttons
   read as a familiar spinner widget. Scoped to .dw_voice_spinner so the
   numeric-spinner rows (scan_delay, max_questions) are unaffected. */
.dw_voice_picker .dw_voice_spinner {
    display: inline-flex;
    align-items: center;
    gap: var(--dw-space-tight);
}

input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

/* Three-line :focus / :focus-visible pattern (used here and in the global :focus
   rule below, the custom checkbox, and the toggle grid). The goal: keyboard
   users get the dotted outline, mouse users don't get a sticky ring after click.
   - Line 1 (:focus): fallback for browsers without :focus-visible support —
     iOS Safari < 15.4 (incl. the iOS 12 quirks already mitigated above).
     Always shows the ring whenever focus lands, like the old behaviour.
   - Line 2 (:focus:not(:focus-visible)): in modern browsers, suppress the ring
     when focus came from a non-keyboard source (mouse click, programmatic).
   - Line 3 (:focus-visible): in modern browsers, show the ring when the
     browser decides this is a keyboard / AT-driven focus. Outline matches the
     fallback so the visual is the same for keyboard users on either path. */
input[type="radio"]:focus + label {
    outline: 0.5vw dotted black;
    outline-offset: 0.1em;
}
input[type="radio"]:focus:not(:focus-visible) + label {
    outline: none;
}
input[type="radio"]:focus-visible + label {
    outline: 0.5vw dotted black;
    outline-offset: 0.1em;
}

/* Apple Safari on iOS 12 draws a dark background on the <input>s */
input
{
	background: transparent;
	border-style: none;
}

/* Apple Safari on iOS 12 doesn't seem to do keyboard navigation at all :-( */
/* input:focus
{
	border-style: auto;
}
*/

/* Global keyboard-focus ring. See the three-line pattern comment on the
   input[type="radio"] rule above for what each line does and why we keep the
   :focus fallback alongside :focus-visible. */
:focus
{
	outline: 0.5vw dotted black;
	outline-offset: 0.1em;
}
:focus:not(:focus-visible)
{
	outline: none;
}
:focus-visible
{
	outline: 0.5vw dotted black;
	outline-offset: 0.1em;
}

/* Switch-scan "you are here" ring. Rectangular orange ring around the
   scanned target's border-box, drawn with box-shadow so it paints outside
   the border and doesn't affect layout.

   Activities whose scanned target has a transparent silhouette (e.g. an
   SVG/PNG sprite) can opt into a shape-hugging drop-shadow chain by
   overriding this rule on a narrower selector — see moving-targets.css
   for the pattern. */
.scan_highlight {
    --scan-highlight-colour: #ff8800;
    --scan-highlight-thickness: 0.5em;
    box-shadow: 0 0 0 var(--scan-highlight-thickness) var(--scan-highlight-colour);
    /* position + z-index promote the ring holder above its siblings within
       its stacking context. box-shadow paints outside the border-box into
       sibling territory; without a stacking hoist an overlapping sibling's
       own background clips the ring visually even though the ring's z-layer
       would suggest otherwise. */
    position: relative;
    z-index: 1;
}

/* When switch scanning is active, the gold .scan_highlight ring on the
 * current scan target is the "you are here" cue — a dotted browser focus
 * outline on the same element after a scan-select .focus() would double up
 * on it. Suppress the outline only on the scan target itself, so users who
 * are still Tab-navigating (e.g. adjusting scan sub-options on the options
 * screen after enabling scanning) still see a focus ring on the element
 * they've Tabbed to.
 *
 * We only strip `outline`; `.scan_highlight` itself is drawn as
 * `box-shadow: … gold`, so leaving box-shadow untouched preserves the gold
 * ring. */
body.dw-scanning-active .scan_highlight:focus,
body.dw-scanning-active .scan_highlight:focus-visible {
    outline: none !important;
}
/* Hidden-input pattern: for radios/checkboxes the <input> is off-screen and
 * .scan_highlight sits on the adjacent visible label. Strip the outline
 * only when that label is the scan target — Tab-focused inputs whose label
 * isn't the current scan target still get their normal focus ring. */
body.dw-scanning-active input:focus + .scan_highlight,
body.dw-scanning-active input:focus-visible + .scan_highlight {
    outline: none !important;
}

@media (hover: hover) {
    input:hover,
button:hover,
label:hover,
option:hover {
    	background: rgb(128,128,128,0.2);
    }
}


div.user_options select {
    display: none;
}

/* Custom checkbox: <input class="dw-check-input"> immediately followed by <label class="dw-check-label"> */
input.dw-check-input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1.3em;
    height: 1.3em;
    margin: 0;
}

.dw-check-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--dw-space-narrow);
    padding: 0.15em var(--dw-space-snug) 0.15em 0.1em;
    cursor: pointer;
    user-select: none;
}

.dw-check-label::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    border: 0.13em solid var(--dw-color-text-muted);
    border-radius: 0.2em;
    background: white;
    transform: rotate(-1.5deg);
    flex-shrink: 0;
}

input.dw-check-input:checked + .dw-check-label::before {
    background: #d0f0d0;
    border-color: #2a6e2a;
}

input.dw-check-input:checked + .dw-check-label::after {
    content: '';
    position: absolute;
    left: 0.53em;
    top: calc(50% - 0.45em);
    width: 0.35em;
    height: 0.75em;
    border-right: 0.14em solid #2a5a2a;
    border-bottom: 0.14em solid #2a5a2a;
    transform: rotate(45deg);
}

/* Three-line :focus / :focus-visible pattern — see comment above the
   input[type="radio"] rule for the rationale. */
input.dw-check-input:focus + .dw-check-label::before {
    outline: 0.3vw dotted black;
    outline-offset: 0.15em;
}
input.dw-check-input:focus:not(:focus-visible) + .dw-check-label::before {
    outline: none;
}
input.dw-check-input:focus-visible + .dw-check-label::before {
    outline: 0.3vw dotted black;
    outline-offset: 0.15em;
}

/* Subtitle line below a dw-check-label — a sibling <span> linked via aria-describedby
   on the <input>, so screen readers read the main label and the description separately
   instead of one run-on accessible name. Indented to align with the label text. */
.dw-check-subtitle {
    display: block;
    padding-left: 1.7em;
    font-size: 0.7em;
    color: var(--dw-color-text-muted);
    line-height: 1.1;
    margin-top: -0.05em;
}

/* Toggle grid: multi-select item picker using visually-hidden checkboxes + styled labels.
   Use when selecting items from a set (e.g. which letters to practise).
   For named boolean settings, use dw-check-input / dw-check-label instead.

   Required structure — checkbox immediately followed by label as siblings:
     <div class="dw-toggle-grid">
       <input type="checkbox" name="..." value="x" id="item-x">
       <label for="item-x" class="dw-toggle-btn">x</label>
       ...
     </div>

   Size and font-family may be overridden per activity. */
.dw-toggle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dw-space-snug);
}

.dw-toggle-grid input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.dw-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    font-size: var(--dw-font-size-subheading);
    border: 2px solid var(--dw-color-border-neutral);
    border-radius: 0.3em;
    background: #f8f8f8;
    cursor: pointer;
    user-select: none;
}

@media (hover: hover) {
    .dw-toggle-btn:hover {
        background: #e0e8ff;
        border-color: #66a;
    }
}

/* Three-line :focus / :focus-visible pattern — see comment above the
   input[type="radio"] rule for the rationale. */
.dw-toggle-grid input[type="checkbox"]:focus + .dw-toggle-btn {
    outline: 0.2em solid var(--dw-color-focus-ring);
    outline-offset: 0.1em;
}
.dw-toggle-grid input[type="checkbox"]:focus:not(:focus-visible) + .dw-toggle-btn {
    outline: none;
}
.dw-toggle-grid input[type="checkbox"]:focus-visible + .dw-toggle-btn {
    outline: 0.2em solid var(--dw-color-focus-ring);
    outline-offset: 0.1em;
}

.dw-toggle-grid input[type="checkbox"]:checked + .dw-toggle-btn {
    background: #4488cc;
    color: #fff;
    border-color: #226;
    font-weight: bold;
}

.dw-toggle-grid input[type="checkbox"]:disabled + .dw-toggle-btn {
    opacity: 0.5;
    cursor: not-allowed;
}

div.user_options .spinner_display {
    display: inline-block;
    border: 1px solid var(--dw-color-text-disabled);
    border-radius: 0.5em;
    margin: 0.1em;
    padding: var(--dw-space-tight);
    font-size: 100%;
    min-width: 3em;
}


.button_div, button {
    border: 0.1em solid grey;
    padding: var(--dw-space-tight);
    border-radius: 0.5em;
    background: none;
    min-width: 1.5em;
    font-family: inherit;
    display: inline-block;
}

.main_button {
    /* font-size: 120%; */
    background: var(--dw-color-button-default-bg);
	color: black;
    padding-left: var(--dw-space-narrow);
	padding-right: var(--dw-space-narrow);
    margin: 0.1em;
    border-radius: 0.5em;
    font-family: Jotter Primary, sans-serif;
	width: max-content;
	height: max-content;
	align-self: center;
	font-size: var(--dw-font-size-subheading);
}

.pencil_btn {
    background: url(./pencil-right.svg) no-repeat center / 100% 100%;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: #000;
    font-family: 'Jotter Primary', sans-serif;
    /* --label-scale is set by Doorway._fitPencilLabels() when the label would
       otherwise overflow the pencil body zone (nib excluded). Only font-size
       scales — width, height, and padding are held constant via
       calc(N / var(--label-scale, 1)) so the pencil visual stays at its design
       size and the nib zone stays reserved regardless of label length. */
    font-size: calc(var(--dw-font-size-large) * var(--label-scale, 1));
    width: calc(5em / var(--label-scale, 1));
    /* Two overrides so the fixed width above is actually honoured:
       - min-width: 0 kills the flex-item default of `auto` (= min-content),
         which would let a long label stretch the button past its `width`.
       - flex-basis: auto reverts the project-wide `button { flex-basis:
         max-content }` (see line ~361), which would otherwise dominate width. */
    min-width: 0;
    flex-basis: auto;
    height: calc(1.85em / var(--label-scale, 1));
    padding: 0 calc(1.4em / var(--label-scale, 1)) 0 calc(var(--dw-space-narrow) / var(--label-scale, 1));
    line-height: calc(1.85em / var(--label-scale, 1));
    text-align: center;
    white-space: nowrap;
    /* SVG background uses preserveAspectRatio=none, so don't let flex parents stretch us */
    align-self: center;
    flex-shrink: 0;
}
/* Use the same background shorthand as .pencil_btn so the global
   button:hover rule (line 467) doesn't reset position/size/repeat. */
@media (hover: hover) {
    .pencil_btn:hover {
        background: url(./pencil-right-hover.svg) no-repeat center / 100% 100%;
    }
}
.pencil_btn[data-pencil-dir="left"] {
    background-image: url(./pencil-left.svg);
    padding: 0 calc(var(--dw-space-narrow) / var(--label-scale, 1)) 0 calc(1.4em / var(--label-scale, 1));
}
@media (hover: hover) {
    .pencil_btn[data-pencil-dir="left"]:hover {
        background: url(./pencil-left-hover.svg) no-repeat center / 100% 100%;
    }
}
.pencil_btn:disabled,
.pencil_btn[disabled] {
    opacity: 0.4;
}

.bg_theme_black .main_button
{
    background: var(--dw-color-button-black-theme-bg);
	color: white;
}

table.score_sheet {
    font-size: 90%;
    margin-left: auto;
    margin-right: auto;
}

td.score_sheet_results, th.score_sheet_results {
    border-bottom: 0.1em solid darkgrey;
}

td.score_sheet_star, th.score_sheet_star, .score_sheet_star img {
    border: hidden;
    width: 1.6em;
    height: 1.6em;
}

.version_embed, .version_embed embed {
    color: var(--dw-color-text-disabled);
    display: block;
    width: 300px;
    height: 50px;
}

input.two_divs_check[type="checkbox"] ~ .checked_on,
input.two_divs_check[type="checkbox"] ~ label .checked_on
{
    display: inline-block;
}

input.two_divs_check[type="checkbox"]:checked ~ .checked_off,
input.two_divs_check[type="checkbox"]:checked ~ label .checked_off
{
    display: none;
}

input.two_divs_check[type="checkbox"]:not(:checked) ~ .checked_on,
input.two_divs_check[type="checkbox"]:not(:checked) ~ label .checked_on
{
    display: none;
}

input.two_divs_check[type="checkbox"]:not(:checked) ~ .checked_off,
input.two_divs_check[type="checkbox"]:not(:checked) ~ label .checked_off
{
    display: inline-block;
}

input.two_divs_check[type="checkbox"]
{
    width: 100%;
    height: 2em;
	margin: 0;
    position: absolute;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

label.two_divs_check
{
	display:inline-block;
}

fieldset.invisible_fieldset
{
	border: none;
	padding: 0;
}

fieldset.invisible_fieldset legend
{
	display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   Welcome / Options screen layout — three orthogonal body classes + landmark
   page chrome.

   Structure (HTML): the per-activity HTML has page-level <header> and <footer>
   as siblings of <main>, inside the aspect-div wrapper. Because they're not
   nested inside <main>/<article>/<aside>/<nav>/<section>, both get their
   implicit ARIA roles (banner + contentinfo) automatically — they show up as
   real navigable landmarks for screen reader users.

       <div id="dwAspectDiv">
         <nav>…</nav>                              <!-- navigation landmark -->
         <header class="dw-screen-header">         <!-- banner landmark -->
           <a class="doorway_logo">…</a>           <!-- visible on welcome -->
           <h1 class="title_message">Options</h1>  <!-- visible on options -->
         </header>
         <main>                                    <!-- main landmark -->
           <div id="dwWelcomeScreen">…</div>
           <form id="dwUserOptions">…</form>
           <div id="dwActivityScreen">…</div>
           <div id="dwResultsScreen">…</div>
         </main>
         <footer class="dw-app-footer">            <!-- contentinfo landmark -->
           <div class="dw-action-footer">…buttons…</div>
           <p class="copyright_message">©…</p>
         </footer>
       </div>

   `Doorway.showScreen()` (in doorway.js) manages three body classes. Flow
   mode is the DEFAULT — the aspect-locked behaviour is now the opt-out:

     dw-aspect-locked  — opt out of flow mode back to the 16:9 letterbox + JS-
                         driven em font. Set on:
                         (a) the activity and results screens always (their
                             gameplay layouts are em-positioned and need the
                             stable stage), and
                         (b) every screen on un-migrated activities (those
                             missing the page-level <footer.dw-app-footer>),
                             so they keep working unchanged until migrated.

     dw-screen-welcome — welcome-only chrome (centred body group, corner
                         logo visible in the header, enter visible in footer).

     dw-screen-options — options-only chrome (title visible in the header,
                         home + start visible in the footer).

   Per-activity stylesheets should override the *body* of an option group or
   the welcome illustration — anything inside `.dw-welcome-body` or inside
   an `<fieldset>`. Page chrome (header, footer, action buttons) is shared.
   ============================================================================ */


/* ---- 1. dw-flow-mode: shared layout primitives ---------------------------- */

/* Only html is the scroll container — keep body's overflow visible so it
   doesn't form its own scroll context (which would break position:sticky on
   the page-level <footer>). */
html:not(.dw-aspect-locked) {
    overflow: auto;
    height: auto;
    min-height: 100%;
    /* Reserve scrollbar space up-front whether or not content overflows.
       Without this, when content grows past the viewport the vertical
       scrollbar appears and steals ~15 px of horizontal space, but layouts
       sized for the pre-scrollbar width then induce a horizontal scrollbar
       too — endless oscillation at "just-overflowing" viewports. */
    scrollbar-gutter: stable;
    /* Reserve viewport edges for the absolute nav header (top) and the sticky
       page footer (bottom) when the browser auto-scrolls a focused element
       into view. Without this, scroll-margin on focusable elements isn't
       enough — the browser considers them "in view" even when they're behind
       the sticky footer. scroll-padding actually shrinks the scrollport for
       scroll-into-view calculations. */
    scroll-padding-top: 3em;
    scroll-padding-bottom: 6em;
}
html:not(.dw-aspect-locked) body {
    overflow: visible;
    height: auto;
    min-height: 100%;
}

body:not(.dw-aspect-locked) div.doorway_application,
body:not(.dw-aspect-locked) div.doorway_fullscreen_div {
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
}

/* Flow-mode canvas is a fixed-width text column (rem-based, like accessible
   web sites: gov.uk, NHS.uk, WebAIM). On viewports wider than the column,
   the canvas sits centred with whitespace on either side; on viewports
   narrower than the column it shrinks to fit. Text and layout dimensions
   are rem-based on welcome/options screens, so browser zoom and the
   browser's default-font-size setting both physically grow the content
   in the standard accessible way. */
body:not(.dw-aspect-locked) div.doorway_aspect_outer_div {
    max-width: 60rem;
    max-height: none;
    height: auto;
    min-height: 100vh;
}

/* Aspect-div fills the column and uses a column-flex so the chrome stacks
   naturally:
       <nav>   (absolute, doesn't take flex space)
       <header.dw-screen-header>
       <main>                   (flex: 1, grows to fill)
       <footer.dw-app-footer>   (sticky, see section 2)
   Font size clamps between 1rem on narrow viewports and 2rem on wide ones,
   with a fluid term that takes over between (hits the ceiling around
   ~2400 CSS-px wide). Rem floor and ceiling are what let browser zoom keep
   physically growing text — vw shrinks under zoom but the rem bounds
   catch it, so net effect is "smaller on small screens, larger on wide
   screens, and zoom-grows-text on top of either". Same accessible-web
   pattern gov.uk uses, with a viewport-responsive twist that doesn't
   fight zoom. Tuned via the side-by-side comparison in
   scripts/clamp_compare.spec.js — D in that comparison (16–32 px).
   doorway.js:onResize clears the inline font-size in flow mode so this
   rule wins. */
body:not(.dw-aspect-locked) div.doorway_aspect_div {
    position: static;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    box-sizing: border-box;
    font-size: clamp(1rem, 0.5rem + 1vw, 2rem);
}

/* Override base `display: contents` on main so it participates in the column
   layout (main is the flex item that grows between header and footer). */
body:not(.dw-aspect-locked) div.doorway_aspect_div > main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
}

/* Page footer is the contentinfo landmark; sticks to viewport bottom in flow
   mode (see section 2). Header / main / footer all sized to their content
   or grown to fill, via the flex column. */
body:not(.dw-aspect-locked) .dw-screen-header,
body:not(.dw-aspect-locked) footer.dw-app-footer {
    flex: 0 0 auto;
}

/* Options form: base CSS makes it absolute + 100% to fill the activity-
   screen letterbox. In flow mode let it lay out naturally inside main. */
body:not(.dw-aspect-locked) form#dwUserOptions.user_options {
    position: static;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    overflow: visible;
}
body:not(.dw-aspect-locked) #dwUserOptions .user_options {
    height: auto;
    overflow: visible;
}
body:not(.dw-aspect-locked) #dwUserOptions fieldset.options_group {
    /* Base CSS gives this a fixed 18em height + flex:1 for the letterbox —
       neither makes sense once the page can scroll. */
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
}

/* Two-column activity-options layout inside an .options_group fieldset.
   Reflows to flex-wrap on the options screen (flow mode) so cells stack
   at narrow widths / high zoom. Add .dw-options-grid-span-all on any cell
   that should span both columns at wide widths. */
.dw-options-activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: var(--dw-space-loose);
    align-items: start;
}
.dw-options-grid-span-all {
    grid-column: 1 / -1;
}

body.dw-screen-options .dw-options-activity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dw-space-loose) 2.5em;
    justify-content: center;
    align-items: flex-start;
}
/* Every direct child of the grid wrapper is treated as a cell — sized to its
   content, shrinkable to 0 under squeeze so its inline content wraps rather
   than overflowing. If you add a non-cell direct child (a decorative divider,
   a caption), wrap it in its own cell or it will inherit these flex properties
   on the options screen. */
body.dw-screen-options .dw-options-activity-grid > fieldset,
body.dw-screen-options .dw-options-activity-grid > div {
    flex: 0 1 auto;
    min-width: 0;
}
body.dw-screen-options .dw-options-activity-grid > .dw-options-grid-span-all {
    grid-column: auto;
    flex-basis: 100%;
}

/* Tab-focus autoscroll: keep focused elements out of the absolute-positioned
   nav header (top) and the sticky page footer (bottom). */
body:not(.dw-aspect-locked) :focus-visible {
    scroll-margin-top: 4em;
    scroll-margin-bottom: 6em;
}

/* Programmatic focus on the tabindex="-1" headings used for SPA route-change
   announcements (see Doorway.showScreen). The focus move is for screen-reader
   users — sighted users didn't navigate there with Tab, so suppress the
   visible focus ring. SRs still announce the heading on focus. */
.title_message[tabindex="-1"]:focus,
.sr-only[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus {
    outline: none;
}


/* ---- 2. dw-app-footer: sticky page footer + overflow fade ---------------- */

/* Page <footer> sticks to the viewport bottom in flow mode so the action area
   and copyright stay reachable as the user scrolls. Once they reach the
   natural bottom of the page, the footer settles into place.
   On the activity screen (no flow mode) the footer is hidden entirely (see
   section 5 visibility rules). */
body:not(.dw-aspect-locked) footer.dw-app-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75em 0 var(--dw-space-comfy);
    background: white;
    z-index: 5;
}

/* The action buttons row — flex so the home + start pencils sit side-by-side
   centred, and wrap to two rows when there's not enough width.
   The horizontal gap uses clamp() to give roughly one-button-width (6em)
   breathing space on desktop, squeezing down to 1em at high zoom. The 0.5em
   vertical gap kicks in only when buttons wrap to two rows. */
body:not(.dw-aspect-locked) .dw-action-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--dw-space-default) clamp(var(--dw-space-loose), 8vw, 6em);
}

/* Copyright sits below the action area inside the same sticky footer. */
body:not(.dw-aspect-locked) footer.dw-app-footer .copyright_message {
    margin: var(--dw-space-comfy) 0 0;
    text-align: center;
    font-size: 0.7em;
    color: var(--dw-color-border-medium);
}

/* Fade above the footer's top edge, signalling "there's content scrolled
   behind here." `dw-has-overflow` body class is toggled by doorway.js based
   on scroll position. */
body:not(.dw-aspect-locked) footer.dw-app-footer::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 2.5em;
    pointer-events: none;
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.2s ease;
}
body:not(.dw-aspect-locked).dw-has-overflow footer.dw-app-footer::before {
    opacity: 1;
}
/* Reduced motion: keep the fade itself (it conveys "more content below" — not
   purely decorative), but make it appear/disappear instantly. */
@media (prefers-reduced-motion: reduce) {
    body:not(.dw-aspect-locked) footer.dw-app-footer::before {
        transition: none;
    }
}

/* Short or narrow viewport: release stickiness so the footer doesn't eat too
   much vertical space. Two triggers:
     - max-width: 22em  — buttons start to crowd the viewport edges.
     - max-height: 30em — footer becomes ~20%+ of viewport. At 30em (480px),
                          a typical 4-5em footer is 13-17% of the viewport;
                          anything shorter and it dominates. Roughly equals
                          150% browser zoom on a 720-tall window. */
@media (max-width: 22em), (max-height: 30em) {
    body:not(.dw-aspect-locked) footer.dw-app-footer {
        position: static;
    }
    body:not(.dw-aspect-locked) footer.dw-app-footer::before {
        display: none;
    }
}


/* ---- 3. dw-screen-header: shared page header (banner landmark) ---------- */

/* 3-col grid: [nav-slot] | [title centred] | [logo right-aligned].
   Both title and logo elements live in the markup, but only the
   screen-relevant ones are visible — see section 5 visibility rules.

   nav-slot is 11em wide to fit three teacher buttons (settings, fullscreen,
   audio) at 3em each + margins + breathing room. The audio button is JS-
   injected so it isn't visible in the source HTML — keep the slot wide
   enough to cover all three or the title will overlap the rightmost one
   at high zoom. */
body:not(.dw-aspect-locked) .dw-screen-header {
    display: grid;
    grid-template-columns: 11em minmax(0, 1fr) 7em;
    grid-template-rows: auto;
    align-items: center;
    gap: var(--dw-space-default);
    margin: 0 0 var(--dw-space-default) 0;
    padding: 0.25em var(--dw-space-default);
    min-height: 2.5em;
    width: 100%;
}
body:not(.dw-aspect-locked) .dw-screen-header .title_message {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: center;
    font-size: 1.95em;
    line-height: 1.2;
    min-width: 0;
}
body:not(.dw-aspect-locked) .dw-screen-header .doorway_logo {
    /* Override base .doorway_logo absolute positioning. */
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: auto;
    height: 2em;
    margin: 0;
    justify-self: end;
}
body:not(.dw-aspect-locked) .dw-screen-header .doorway_logo img {
    height: 100%;
    width: auto;
    display: block;
}


/* ---- 4. dw-screen-welcome: welcome-only layout --------------------------- */

/* Welcome screen container fills its slot inside main, lays out as a flex
   column so the body group can centre in spare vertical space. */
body.dw-screen-welcome #dwWelcomeScreen.doorway_welcome {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 0 auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Welcome body: title stack flush above illustration, subtitle flush below.
   `safe center` centres the trio vertically when there's room, but falls back
   to top-alignment whenever content would overflow — so on a tall monitor it
   sits in the middle (balanced top/bottom) and on a short viewport it pins to
   the top instead of pushing the title off the page. */
body.dw-screen-welcome #dwWelcomeScreen > .dw-welcome-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: var(--dw-space-loose) 0;
}

/* Title stack: small "Doorway" brand label + h1 title, stacked tight. */
body.dw-screen-welcome .dw-welcome-titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    line-height: 1.1;
}
body.dw-screen-welcome .dw-welcome-titles .title_message {
    margin: 0 0 0.1em 0;
    font-size: 1.95em;
}

/* Small "Doorway" brand label sitting above the welcome title.
   Sized via the project's "major third" type scale (ratio 1.25): each step is
   1.25× the previous. Consolidate other text-sizing decisions onto this
   scale as we standardise — the steps at 2dp are:
       0.51em  0.64em  0.80em  1.00em  1.25em  1.56em  1.95em  2.44em  3.05em
   See https://www.modularscale.com/?1&em&1.25 for reference. */
body.dw-screen-welcome .dw-app-label {
    margin: 0;
    font-size: 1.56em;
    font-weight: normal;
    color: var(--dw-color-text-muted);
    letter-spacing: 0.04em;
}

/* Welcome subtitle (top-aligned just below the illustration; OPTIONAL —
   activities can omit the <p class="sub_title"> entirely). */
body.dw-screen-welcome #dwWelcomeScreen .sub_title {
    margin: var(--dw-space-default) 0 0 0;
    padding: 0 var(--dw-space-loose);
    text-align: center;
}


/* ---- 5. Per-screen visibility of header / footer contents ---------------- */

/* Header content: logo only on welcome, title only on options. */
.dw-screen-header .doorway_logo,
.dw-screen-header .title_message {
    display: none;
}
body.dw-screen-welcome .dw-screen-header .doorway_logo {
    display: block;
}
body.dw-screen-options .dw-screen-header .title_message {
    display: block;
}

/* Action buttons: enter on welcome, home + start on options. */
.dw-action-footer #dwEnterButton,
.dw-action-footer #dwHomeButton,
.dw-action-footer #dwSubmitUserOptions {
    display: none;
}
body.dw-screen-welcome .dw-action-footer #dwEnterButton {
    display: inline-block;
}
body.dw-screen-options .dw-action-footer #dwHomeButton,
body.dw-screen-options .dw-action-footer #dwSubmitUserOptions {
    display: inline-block;
}

/* Copyright: visible on welcome (as a brand anchor on the landing screen);
   hidden on options where it's redundant noise next to the action buttons. */
body.dw-screen-options footer.dw-app-footer .copyright_message {
    display: none;
}

/* Activity & results screens: hide the page chrome entirely. */
/* Activity & results screens (aspect-locked): hide the page chrome entirely. */
body.dw-aspect-locked .dw-screen-header,
body.dw-aspect-locked footer.dw-app-footer {
    display: none;
}

/* ---------------------------------------------------------------------------
   Scan-status HUD (see activities/shared/scan-hud.js).

   Persistent low-prominence chip showing the current scan settings. A
   restoration of the Flash-era `scanInfoText` / `scanModeText` TextFields
   that were dropped in the HTML5 port. Position is per-activity — the four
   variants below match the Flash originals rather than standardising a
   single corner.

   Font weight / colour / size are deliberately low-prominence: this is a
   status readout, not primary UI. Matches the Flash chip visually (~10–12px
   sans-serif, dark grey on the stage background, no border or fill).
--------------------------------------------------------------------------- */
.dw-scan-hud {
    position: absolute;
    font-family: sans-serif;
    font-size: 0.6em;             /* ~12px at the default 1em = 20px */
    color: #333;
    background: transparent;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;         /* purely informational — never a click target */
    z-index: 5;                   /* above stage art, below modals/wellDone */
}

.dw-scan-hud--top-right {
    top: 0.35em;                   /* Flash-faithful on the activity screen */
    right: 3em;                    /* clear of the top-right nav icons */
}

.dw-scan-hud--top-centre-right {
    top: 0.35em;
    left: 62%;                     /* Flash x≈510–585 in 800px stage */
}

.dw-scan-hud--bottom-right {
    bottom: 0.35em;
    right: 0.6em;
}

.dw-scan-hud--bottom-left {
    bottom: 0.35em;
    left: 0.6em;
}

/* Options screen: hide the chip. The Accessibility fieldset already
   exposes scanning state, the tall options form scrolls the chip off,
   and the shared options UI has diverged enough from Flash that we
   don't chase parity here. */
body.dw-screen-options .dw-scan-hud {
    display: none;
}

/* Welcome screen: the doorway_logo sits in the top-right grid slot, so
   shift top-position variants below it to avoid overlap. */
body.dw-screen-welcome .dw-scan-hud--top-right,
body.dw-screen-welcome .dw-scan-hud--top-centre-right {
    top: 5em;
    right: 0.6em;                  /* below-the-logo → free to hug the edge */
}