/* /Views/Admin/DatabaseDashboard.cshtml.rz.scp.css */
/* Keep long Identity usernames readable without widening the page on phones. */
.user-name[b-mb2xie7j2f] {
    overflow-wrap: anywhere;
    min-width: 8rem;
}

/* Header buttons look like plain headings but keep the browser focus ring. */
.sort-button[b-mb2xie7j2f] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
}

/* Visible direction arrow; the empty alt text leaves announcing to aria-sort. */
th[aria-sort="ascending"] .sort-button[b-mb2xie7j2f]::after {
    content: " \25B2" / "";
}

th[aria-sort="descending"] .sort-button[b-mb2xie7j2f]::after {
    content: " \25BC" / "";
}
/* /Views/AdminOrderingGame/Index.cshtml.rz.scp.css */
/* Give the score distribution a readable caption while fitting narrow screens. */
.score-distribution[b-33cqrj5qao] {
    width: 100%;
    max-width: 24rem;
}
/* /Views/Categorization/Categorize.cshtml.rz.scp.css */
/*
    Survey Says - Categorization Form Styles
    Authors: Max Barker and Eli Parker
    Course: CS 3550
    Date: November 6, 2026

    Purpose:
    Shows existing categories as wrapping chips, spaces the sections apart,
    and puts the instructions form in its own panel.
    Shared tokens, .answers-panel and .answers-actions live in site.css.
*/

.categorize-page h2[b-vutr6w5ql3] {
    margin-block-start: 1.75rem;
}

/* Existing categories wrap as chips instead of a long bulleted list. */
.category-chips[b-vutr6w5ql3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin-block-end: 1.5rem;
}

.category-chips li[b-vutr6w5ql3] {
    background-color: var(--answers-accent-soft);
    color: var(--answers-accent);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-weight: 600;
}

.categorize-page[b-vutr6w5ql3]  .form-label {
    font-weight: 600;
}

/* The privacy note stands out from the form help text above it. */
.send-note[b-vutr6w5ql3] {
    border-inline-start: 0.25rem solid var(--answers-accent);
    padding-inline-start: 0.75rem;
    color: var(--bs-secondary-color);
}
/* /Views/Categorization/Index.cshtml.rz.scp.css */
/*
    Survey Says - Response Categorization Dashboard Styles
    Authors: Max Barker and Eli Parker
    Course: CS 3550
    Date: November 6, 2026

    Purpose:
    Right-aligns the totals for scanning and turns each table row into a
    labelled card on phones so the four columns never need sideways scrolling.
    Shared tokens, .answers-panel and .answers-actions live in site.css.
*/

/* Numbers line up by digit and sit under their right-aligned headers. */
.dashboard-table[b-9i8lv29weq] {
    font-variant-numeric: tabular-nums;
}

.dashboard-table td[b-9i8lv29weq],
.dashboard-table thead th:not(:first-child)[b-9i8lv29weq] {
    text-align: end;
}

.dashboard-table caption[b-9i8lv29weq] {
    caption-side: top;
    color: var(--bs-secondary-color);
}

.dashboard-table thead th[b-9i8lv29weq] {
    border-block-end: 2px solid var(--answers-accent);
}

.dashboard-table[b-9i8lv29weq]  a {
    font-weight: 600;
    text-underline-offset: 0.15em;
}

/* Phones: each question becomes a card. Every count gets its column name
   from data-label, and the header row stays available to screen readers
   (visually hidden rather than display: none). */
@media (max-width: 575.98px) {
    .dashboard-table thead[b-9i8lv29weq] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .dashboard-table[b-9i8lv29weq],
    .dashboard-table caption[b-9i8lv29weq],
    .dashboard-table tbody[b-9i8lv29weq],
    .dashboard-table tr[b-9i8lv29weq],
    .dashboard-table th[b-9i8lv29weq],
    .dashboard-table td[b-9i8lv29weq] {
        display: block;
    }

    /* Cards are already separated, so drop Bootstrap's row striping. */
    .dashboard-table[b-9i8lv29weq] {
        --bs-table-striped-bg: transparent;
    }

    .dashboard-table tr[b-9i8lv29weq] {
        background-color: var(--page-surface);
        border: 1px solid var(--page-border);
        border-inline-start: 0.3rem solid var(--answers-accent);
        border-radius: 0.75rem;
        margin-block-end: 0.75rem;
        overflow: hidden;
    }

    .dashboard-table td[b-9i8lv29weq] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .dashboard-table td[b-9i8lv29weq]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: start;
    }

    .dashboard-table tr > :last-child[b-9i8lv29weq] {
        border-block-end: 0;
    }
}
/* /Views/Categorization/Preview.cshtml.rz.scp.css */
/*
    Survey Says - Categorization Proposal Styles
    Authors: Max Barker and Eli Parker
    Course: CS 3550
    Date: November 6, 2026

    Purpose:
    Puts each proposed category in a card and marks new versus existing
    categories with colour, an icon, and the badge text, never colour alone.
    Shared tokens, .answers-panel and .answers-actions live in site.css.
*/

.proposal-group[b-awb6dp26kh] {
    margin-block-end: 1.25rem;
    border-inline-start-width: 0.4rem;
}

.proposal-group h2[b-awb6dp26kh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.category-badge[b-awb6dp26kh] {
    border: 1px solid currentColor;
    font-size: 0.8rem;
}

/* The icon is decorative: the "/ ''" alt text hides it from screen
   readers, which already hear "New category" or "Existing category". */
.category-badge[b-awb6dp26kh]::before {
    margin-inline-end: 0.35em;
}

.is-new[b-awb6dp26kh] {
    border-inline-start-color: var(--answers-new);
}

.is-new .category-badge[b-awb6dp26kh] {
    background-color: var(--answers-new-soft);
    color: var(--answers-new);
}

.is-new .category-badge[b-awb6dp26kh]::before {
    content: "+" / "";
}

.is-existing[b-awb6dp26kh] {
    border-inline-start-color: var(--answers-accent);
}

.is-existing .category-badge[b-awb6dp26kh] {
    background-color: var(--answers-accent-soft);
    color: var(--answers-accent);
}

.is-existing .category-badge[b-awb6dp26kh]::before {
    content: "\2713" / "";
}
/* /Views/Demographics/Edit.cshtml.rz.scp.css */
/* Nine custom improvements; layout columns still use Bootstrap Flexbox. */
.demographics-page[b-toz808vhoe] {
    --editor-accent: light-dark(#21604f, #77c9ab);
    --editor-intro: light-dark(#edf6f2, #1e352f);
    --editor-control: light-dark(#ffffff, #1b222d);
    --editor-error: light-dark(#a12635, #ffb6b9);
    --editor-focus: light-dark(#075ac8, #82bbff);
    overflow-wrap: anywhere;
}

/* 1. A themed introduction with an accent border and heading hierarchy. */
.demographics-intro[b-toz808vhoe] {
    background-color: var(--editor-intro);
    border-inline-start: 0.3rem solid var(--editor-accent);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-block-end: 1.5rem;
}

.demographics-intro h1[b-toz808vhoe] {
    font-size: 1.8rem;
    margin-block-end: 1rem;
}

.demographics-intro p:last-child[b-toz808vhoe] {
    margin-block-end: 0;
}

/* 2. Readable privacy links in either theme. */
.demographics-intro[b-toz808vhoe]  a {
    color: var(--bs-link-color);
    text-underline-offset: 0.15em;
}

.demographics-intro[b-toz808vhoe]  a:hover {
    color: var(--bs-link-hover-color);
}

/* 3. Rounded, theme-aware panels with room around their contents. */
.demographics-editor fieldset[b-toz808vhoe] {
    background-color: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    min-inline-size: 0;
}

/* 4. Section headings separated from the questions below. */
.demographics-editor legend[b-toz808vhoe] {
    color: var(--editor-accent);
    font-size: 1.15rem;
    font-weight: 700;
    border-block-end: 1px solid var(--page-border);
    padding-block-end: 0.75rem;
    margin-block-end: 1rem;
}

/* 5. Consistent label spacing; reserve two lines in paired columns.
   Labels can still grow for large text or longer translations. */
.demographics-page[b-toz808vhoe]  .demographics-editor .form-label {
    display: flex;
    align-items: flex-end;
    font-weight: 600;
    line-height: 1.5;
    margin-block-end: 0.5rem;
}

@media (min-width: 768px) {
    .demographics-page[b-toz808vhoe]  .demographics-editor .row .form-label {
        min-block-size: 3em;
    }
}

/* 6. Matching, touch-friendly input and select surfaces. */
.demographics-page[b-toz808vhoe]  .demographics-editor .form-control,
.demographics-page[b-toz808vhoe]  .demographics-editor .form-select {
    min-block-size: 2.75rem;
    background-color: var(--editor-control);
    color: var(--page-text);
    border-color: var(--page-border);
}

@media (prefers-color-scheme: dark) {
    .demographics-page[b-toz808vhoe]  .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b7c0cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

/* 7. A visible keyboard focus indicator on controls and actions. */
.demographics-page[b-toz808vhoe]  :focus-visible {
    outline: 3px solid var(--editor-focus);
    outline-offset: 3px;
}

/* 8. Reserve a line for each field's message; longer messages can expand.
   Bootstrap's text-danger utility uses !important, so this override must too. */
.demographics-page[b-toz808vhoe]  .demographics-editor [data-valmsg-for] {
    display: block;
    min-block-size: 1.5em;
    line-height: 1.5;
    margin-block-start: 0.25rem;
}

.demographics-page[b-toz808vhoe]  .demographics-editor .text-danger {
    color: var(--editor-error) !important;
}

/* 9. A clear boundary between questions and the form actions. */
.demographics-actions[b-toz808vhoe] {
    border-block-start: 1px solid var(--page-border);
    padding-block: 1.25rem;
}

.demographics-page[b-toz808vhoe]  .demographics-actions .btn-outline-secondary {
    --bs-btn-color: var(--page-text);
    --bs-btn-border-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--page-text);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--page-text);
    --bs-btn-active-color: var(--page-text);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--page-text);
}
/* /Views/Encyclopedia/SpinOrSpell.cshtml.rz.scp.css */
/* Spin and Spell - visual styling plus responsive Grid/Flex layout (mobile-first). */

#game-shell[b-ifvye4h037] {
    /* These values follow color-scheme from the site-wide theme. */
    --game-background: light-dark(#eef2f8, #151b24);
    --game-surface: light-dark(#ffffff, #232b37);
    --game-text: light-dark(#18283f, #eff2f7);
    --game-border: light-dark(#c6d1e0, #485466);
    --game-header-background: light-dark(#18283f, #111720);
    --game-header-text: #ffffff;
    --game-header-overlay: light-dark(rgb(24 40 63 / 85%), rgb(10 14 20 / 82%));
    --game-accent: light-dark(#21604f, #77c9ab);
    --game-tile-background: light-dark(#edf6f2, #1e352f);
    --game-button-background: light-dark(#21604f, #2d735d);
    --game-button-text: #ffffff;
    --game-button-hover: light-dark(#174537, #398a70);
    --game-error-background: light-dark(#fff0f0, #47272a);
    --game-error-text: light-dark(#8b2323, #ffb6b9);
    --game-focus: light-dark(#075ac8, #82bbff);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "board"
        "letters"
        "wheel"
        "solve"
        "status"
        "leaders"
        "log"
        "ad"
        "footer";
    gap: 1rem;
    background-color: var(--game-background);
    color: var(--game-text);
    padding: 1rem;
    border-radius: 1rem;
}

#app-header[b-ifvye4h037] { grid-area: header; }
#phrase-board[b-ifvye4h037] { grid-area: board; }
#letter-bank[b-ifvye4h037] { grid-area: letters; }
#wheel-panel[b-ifvye4h037] { grid-area: wheel; }
#turn-actions[b-ifvye4h037] { grid-area: solve; }
#player-status[b-ifvye4h037] { grid-area: status; }
#leaderboard[b-ifvye4h037] { grid-area: leaders; }
#game-log[b-ifvye4h037] { grid-area: log; }
#ad-panel[b-ifvye4h037] { grid-area: ad; }
#game-footer[b-ifvye4h037] { grid-area: footer; }

.game-panel[b-ifvye4h037] {
    background-color: var(--game-surface);
    border: 1px solid var(--game-border);
    border-radius: 0.75rem;
    padding: 1rem;
}

#app-header[b-ifvye4h037] {
    background-color: var(--game-header-background);
    background-image:
        linear-gradient(var(--game-header-overlay), var(--game-header-overlay)),
        url('/images/SpinOrSpell/marquee-accent.png');
    background-position: center;
    background-size: cover;
    color: var(--game-header-text);
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#app-header > div:last-child[b-ifvye4h037] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#app-header .marquee-accent[b-ifvye4h037] {
    display: none;
}

#app-header p[b-ifvye4h037] {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

#game-title[b-ifvye4h037] {
    color: var(--game-header-text);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0;
}

#phrase-category[b-ifvye4h037] {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

#phrase-board > div[b-ifvye4h037] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.phrase-word[b-ifvye4h037] {
    display: flex;
    gap: 0.12rem;
}

.phrase-tile[b-ifvye4h037] {
    display: inline-block;
    box-sizing: border-box;
    width: 1.25rem;
    border: 1px solid var(--game-accent);
    border-bottom-width: 3px;
    border-radius: 0.25rem;
    background-color: var(--game-tile-background);
    color: var(--game-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8rem;
    text-align: center;
}

#game-message[b-ifvye4h037] {
    margin-top: 1rem;
    padding: 1rem;
    border-left: 4px solid var(--game-accent);
    border-radius: 0.25rem;
    background-color: var(--game-tile-background);
}

#game-message blockquote[b-ifvye4h037] {
    margin: 0;
}

#game-message p[b-ifvye4h037] {
    margin-bottom: 0.5rem;
}

#game-message footer[b-ifvye4h037] {
    font-size: 0.875rem;
    font-style: italic;
}

#game-shell button[b-ifvye4h037] {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--game-button-background);
    border-radius: 0.5rem;
    background-color: var(--game-button-background);
    color: var(--game-button-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#game-shell button:hover:not(:disabled)[b-ifvye4h037] {
    background-color: var(--game-button-hover);
    border-color: var(--game-button-hover);
}

#game-shell button:focus-visible[b-ifvye4h037] {
    outline: 3px solid var(--game-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--game-surface);
}

#game-shell button:disabled[b-ifvye4h037] {
    cursor: not-allowed;
    opacity: 1;
}

.letter-options[b-ifvye4h037],
.vowel-options[b-ifvye4h037] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.letter-options br[b-ifvye4h037] {
    display: none;
}

#letter-bank button.selected[b-ifvye4h037] {
    background-color: var(--game-tile-background);
    color: var(--game-accent);
    border-color: var(--game-accent);
}

#letter-bank button.selected[b-ifvye4h037]::after {
    content: " \2713";
}

#letter-bank button.incorrect[b-ifvye4h037] {
    background-color: var(--game-error-background);
    color: var(--game-error-text);
    border-color: var(--game-error-text);
    border-style: dashed;
}

#letter-bank button.incorrect[b-ifvye4h037]::after {
    content: " \00d7";
}

#wheel-panel[b-ifvye4h037] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#wheel-panel > div[b-ifvye4h037] {
    align-self: stretch;
    margin: 1rem 0;
}

#wheel-panel > div > span[b-ifvye4h037] {
    display: block;
    color: var(--game-accent);
    font-size: 1.5rem;
    line-height: 1;
}

#wheel-image[b-ifvye4h037] {
    display: block;
    width: 18rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#wheel-panel > p[b-ifvye4h037] {
    margin: 1rem 0;
}

#wheel-panel > p > strong[b-ifvye4h037] {
    color: var(--game-accent);
    font-size: 1.5rem;
}

#ad-panel[b-ifvye4h037] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#ad-panel > img[b-ifvye4h037] {
    display: block;
    width: 18rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1rem;
}

#player-status[b-ifvye4h037] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#player-status > .game-panel[b-ifvye4h037] {
    flex: 1 1 16rem;
}

#scoreboard > div[b-ifvye4h037] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.score-card[b-ifvye4h037] {
    flex: 1 1 5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--game-border);
    border-left-width: 5px;
    border-radius: 0.5rem;
    background-color: var(--game-background);
}

.score-card h3[b-ifvye4h037] {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.score-card p[b-ifvye4h037] {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.score-card.active[b-ifvye4h037] {
    border-color: var(--game-accent);
    background-color: var(--game-tile-background);
}

.score-card.active h3[b-ifvye4h037] {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

#current-player[b-ifvye4h037] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#current-player > div:first-child[b-ifvye4h037] {
    flex-shrink: 0;
    width: 3rem;
    border-radius: 50%;
    background-color: var(--game-button-background);
    color: var(--game-button-text);
    font-weight: 800;
    line-height: 3rem;
    text-align: center;
}

.turn-status[b-ifvye4h037] {
    color: var(--game-accent);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.wheel-result strong[b-ifvye4h037] {
    font-size: 1.25rem;
}

.turn-instruction[b-ifvye4h037] {
    padding: 0.75rem;
    margin-bottom: 0;
    border-left: 4px solid var(--game-accent);
    background-color: var(--game-tile-background);
}

#turn-actions[b-ifvye4h037] {
    border-top: 4px solid var(--game-accent);
    background-color: var(--game-tile-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#turn-actions > p:first-child[b-ifvye4h037] {
    color: var(--game-accent);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#leaderboard table[b-ifvye4h037] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

#leaderboard th[b-ifvye4h037],
#leaderboard td[b-ifvye4h037] {
    padding: 0.625rem 0.375rem;
    border-bottom: 1px solid var(--game-border);
    text-align: left;
}

#leaderboard thead[b-ifvye4h037] {
    background-color: var(--game-header-background);
    color: var(--game-header-text);
}

#leaderboard tbody tr:nth-child(odd)[b-ifvye4h037] {
    background-color: var(--game-background);
}

#leaderboard tbody tr:first-child[b-ifvye4h037] {
    font-weight: 700;
}

#leaderboard th:last-child[b-ifvye4h037],
#leaderboard td:last-child[b-ifvye4h037] {
    text-align: right;
    white-space: nowrap;
}

.round-progress[b-ifvye4h037] {
    margin: 1rem 0 0;
    color: var(--game-accent);
    font-weight: 700;
}

#game-log ol[b-ifvye4h037] {
    padding-left: 1.5rem;
    margin-bottom: 0;
}

#game-log li[b-ifvye4h037] {
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--game-border);
    line-height: 1.5;
}

#game-log li[b-ifvye4h037]::marker {
    color: var(--game-accent);
    font-weight: 700;
}

#game-log li:last-child[b-ifvye4h037] {
    border-bottom: 0;
}

#game-footer[b-ifvye4h037] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

/* Tablet: 576px and wider */
@media (min-width: 576px) {
    #game-shell[b-ifvye4h037] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "header  header"
            "board   board"
            "wheel   letters"
            "solve   solve"
            "status  status"
            "leaders log"
            "ad      log"
            "footer  footer";
    }

    #game-footer[b-ifvye4h037] {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Monitor: 992px and wider */
@media (min-width: 992px) {
    #game-shell[b-ifvye4h037] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas:
            "header  header  header"
            "wheel   board   status"
            "wheel   letters status"
            "solve   letters leaders"
            "log     log     ad"
            "footer  footer  footer";
    }

    .game-panel h2[b-ifvye4h037] {
        font-size: 1.5rem;
    }

    .phrase-tile[b-ifvye4h037] {
        width: 1.75rem;
        font-size: 1.25rem;
        line-height: 2.25rem;
    }

    #player-status[b-ifvye4h037] {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    #player-status > .game-panel[b-ifvye4h037] {
        flex: 0 0 auto;
    }

    #player-status > #current-player[b-ifvye4h037] {
        flex-grow: 1;
        align-items: flex-start;
    }

    .score-card[b-ifvye4h037] {
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    #game-log ol[b-ifvye4h037] {
        columns: 2;
        column-gap: 2.5rem;
    }

    #game-log li[b-ifvye4h037] {
        break-inside: avoid;
    }
}

/* Large monitor: 1399px and wider */
@media (min-width: 1399px) {
    #game-shell[b-ifvye4h037] {
        gap: 1.25rem;
    }

    #game-title[b-ifvye4h037] {
        font-size: 2.5rem;
    }
}

/* Widescreen: 1800px and wider; the negative margins break out of Bootstrap's 1320px container */
@media (min-width: 1800px) {
    #game-shell[b-ifvye4h037] {
        margin-inline: calc(50% - 50vw + 2rem);
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "header  header  header  header"
            "wheel   board   status  leaders"
            "wheel   letters status  log"
            "solve   letters ad      log"
            "footer  footer  footer  footer";
    }

    .phrase-tile[b-ifvye4h037] {
        width: 2rem;
        font-size: 1.4rem;
        line-height: 2.5rem;
    }

    #game-log ol[b-ifvye4h037] {
        columns: auto;
    }
}
/* /Views/Encyclopedia/SpinOrSpellStyleOnly.cshtml.rz.scp.css */
/* Spin and Spell - visual styling only (no Grid or Flex). */

#game-shell[b-94h24luvgq] {
    /* These values follow color-scheme from the site-wide theme. */
    --game-background: light-dark(#eef2f8, #151b24);
    --game-surface: light-dark(#ffffff, #232b37);
    --game-text: light-dark(#18283f, #eff2f7);
    --game-border: light-dark(#c6d1e0, #485466);
    --game-header-background: light-dark(#18283f, #111720);
    --game-header-text: #ffffff;
    --game-header-overlay: light-dark(rgb(24 40 63 / 85%), rgb(10 14 20 / 82%));
    --game-accent: light-dark(#21604f, #77c9ab);
    --game-tile-background: light-dark(#edf6f2, #1e352f);
    --game-button-background: light-dark(#21604f, #2d735d);
    --game-button-text: #ffffff;
    --game-button-hover: light-dark(#174537, #398a70);
    --game-error-background: light-dark(#fff0f0, #47272a);
    --game-error-text: light-dark(#8b2323, #ffb6b9);
    --game-focus: light-dark(#075ac8, #82bbff);

    background-color: var(--game-background);
    color: var(--game-text);
    padding: 1rem;
    border-radius: 1rem;
}

.game-panel[b-94h24luvgq] {
    background-color: var(--game-surface);
    border: 1px solid var(--game-border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

#app-header[b-94h24luvgq] {
    background-color: var(--game-header-background);
    background-image:
        linear-gradient(var(--game-header-overlay), var(--game-header-overlay)),
        url('/images/SpinOrSpell/marquee-accent.png');
    background-position: center;
    background-size: cover;
    color: var(--game-header-text);
    padding: 1.5rem;
}

#app-header .marquee-accent[b-94h24luvgq] {
    display: none;
}

#app-header p[b-94h24luvgq] {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

#game-title[b-94h24luvgq] {
    color: var(--game-header-text);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

#phrase-category[b-94h24luvgq] {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.phrase-word[b-94h24luvgq] {
    display: inline-block;
    max-width: 100%;
    margin: 0 0.5rem 0.75rem 0;
    font-size: 0;
    vertical-align: top;
}

.phrase-tile[b-94h24luvgq] {
    display: inline-block;
    box-sizing: border-box;
    width: 1.25rem;
    margin: 0.1rem 0.06rem;
    border: 1px solid var(--game-accent);
    border-bottom-width: 3px;
    border-radius: 0.25rem;
    background-color: var(--game-tile-background);
    color: var(--game-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8rem;
    text-align: center;
}

#game-message[b-94h24luvgq] {
    margin-top: 0.5rem;
    padding: 1rem;
    border-left: 4px solid var(--game-accent);
    border-radius: 0.25rem;
    background-color: var(--game-tile-background);
}

#game-message blockquote[b-94h24luvgq] {
    margin: 0;
}

#game-message p[b-94h24luvgq] {
    margin-bottom: 0.5rem;
}

#game-message footer[b-94h24luvgq] {
    font-size: 0.875rem;
    font-style: italic;
}

#game-shell button[b-94h24luvgq] {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--game-button-background);
    border-radius: 0.5rem;
    background-color: var(--game-button-background);
    color: var(--game-button-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#game-shell button:hover:not(:disabled)[b-94h24luvgq] {
    background-color: var(--game-button-hover);
    border-color: var(--game-button-hover);
}

#game-shell button:focus-visible[b-94h24luvgq] {
    outline: 3px solid var(--game-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--game-surface);
}

#game-shell button:disabled[b-94h24luvgq] {
    cursor: not-allowed;
    opacity: 1;
}

#letter-bank button[b-94h24luvgq] {
    margin: 0.25rem 0.125rem;
}

#letter-bank button.selected[b-94h24luvgq] {
    background-color: var(--game-tile-background);
    color: var(--game-accent);
    border-color: var(--game-accent);
}

#letter-bank button.selected[b-94h24luvgq]::after {
    content: " \2713";
}

#letter-bank button.incorrect[b-94h24luvgq] {
    background-color: var(--game-error-background);
    color: var(--game-error-text);
    border-color: var(--game-error-text);
    border-style: dashed;
}

#letter-bank button.incorrect[b-94h24luvgq]::after {
    content: " \00d7";
}

#wheel-panel[b-94h24luvgq] {
    text-align: center;
}

#wheel-panel > div[b-94h24luvgq] {
    margin: 1rem auto;
}

#wheel-panel > div > span[b-94h24luvgq] {
    display: block;
    color: var(--game-accent);
    font-size: 1.5rem;
    line-height: 1;
}

#wheel-image[b-94h24luvgq] {
    display: block;
    width: 18rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#wheel-panel > p[b-94h24luvgq] {
    margin: 1rem 0;
}

#wheel-panel > p > strong[b-94h24luvgq] {
    color: var(--game-accent);
    font-size: 1.5rem;
}

#ad-panel[b-94h24luvgq] {
    text-align: center;
}

#ad-panel > img[b-94h24luvgq] {
    display: block;
    width: 18rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1rem;
}

.score-card[b-94h24luvgq] {
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border: 1px solid var(--game-border);
    border-left-width: 5px;
    border-radius: 0.5rem;
    background-color: var(--game-background);
}

.score-card h3[b-94h24luvgq] {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.score-card p[b-94h24luvgq] {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.score-card.active[b-94h24luvgq] {
    border-color: var(--game-accent);
    background-color: var(--game-tile-background);
}

.score-card.active h3[b-94h24luvgq] {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

#current-player > div:first-child[b-94h24luvgq] {
    width: 3rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background-color: var(--game-button-background);
    color: var(--game-button-text);
    font-weight: 800;
    line-height: 3rem;
    text-align: center;
}

.turn-status[b-94h24luvgq] {
    color: var(--game-accent);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.wheel-result strong[b-94h24luvgq] {
    font-size: 1.25rem;
}

.turn-instruction[b-94h24luvgq] {
    padding: 0.75rem;
    margin-bottom: 0;
    border-left: 4px solid var(--game-accent);
    background-color: var(--game-tile-background);
}

#turn-actions[b-94h24luvgq] {
    border-top: 4px solid var(--game-accent);
    background-color: var(--game-tile-background);
    text-align: center;
}

#turn-actions > p:first-child[b-94h24luvgq] {
    color: var(--game-accent);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#leaderboard table[b-94h24luvgq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

#leaderboard th[b-94h24luvgq],
#leaderboard td[b-94h24luvgq] {
    padding: 0.625rem 0.375rem;
    border-bottom: 1px solid var(--game-border);
    text-align: left;
}

#leaderboard thead[b-94h24luvgq] {
    background-color: var(--game-header-background);
    color: var(--game-header-text);
}

#leaderboard tbody tr:nth-child(odd)[b-94h24luvgq] {
    background-color: var(--game-background);
}

#leaderboard tbody tr:first-child[b-94h24luvgq] {
    font-weight: 700;
}

#leaderboard th:last-child[b-94h24luvgq],
#leaderboard td:last-child[b-94h24luvgq] {
    text-align: right;
    white-space: nowrap;
}

.round-progress[b-94h24luvgq] {
    margin: 1rem 0 0;
    color: var(--game-accent);
    font-weight: 700;
}

#game-log ol[b-94h24luvgq] {
    padding-left: 1.5rem;
    margin-bottom: 0;
}

#game-log li[b-94h24luvgq] {
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--game-border);
    line-height: 1.5;
}

#game-log li[b-94h24luvgq]::marker {
    color: var(--game-accent);
    font-weight: 700;
}

#game-log li:last-child[b-94h24luvgq] {
    border-bottom: 0;
}

#game-footer[b-94h24luvgq] {
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

#game-footer > span[b-94h24luvgq] {
    display: block;
}

#game-footer > span + span[b-94h24luvgq] {
    margin-top: 0.5rem;
}
/* /Views/OrderingGame/Index.cshtml.rz.scp.css */
/* Keep category names and native keyboard controls usable on narrow screens. */
#game-form .list-group-item[b-rxppjhvjw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.category-name[b-rxppjhvjw4] {
    flex: 1 1 10rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.ordering-controls[b-rxppjhvjw4] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
/* /Views/OrderingGame/Leaderboard.cshtml.rz.scp.css */
/* Keep long Identity usernames readable without widening the page on phones. */
.player-name[b-ngdtsl8hf8] {
    overflow-wrap: anywhere;
    min-width: 8rem;
}
/* /Views/Responses/Create.cshtml.rz.scp.css */
/*
    Survey Says - Response Form Styles
    Authors: Max Barker and Eli Parker
    Course: CS 3550
    Date: November 6, 2026

    Purpose:
    Highlights the question being answered above the response box.
    Shared tokens, .answers-panel and .answers-actions live in site.css.
*/

.question-callout[b-rkgwc54pci] {
    background-color: var(--answers-accent-soft);
    border-inline-start: 0.3rem solid var(--answers-accent);
}

.question-callout h2[b-rkgwc54pci] {
    color: var(--answers-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: 0.25rem;
}

.question-callout p[b-rkgwc54pci] {
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

.respond-page[b-rkgwc54pci]  .form-label {
    font-weight: 600;
}
/* /Views/Responses/Index.cshtml.rz.scp.css */
/*
    Survey Says - Answer Questions Styles
    Authors: Max Barker and Eli Parker
    Course: CS 3550
    Date: November 6, 2026

    Purpose:
    Makes each whole question row a large, clearly clickable target.
    Shared tokens, .answers-panel and .answers-actions live in site.css.
*/

/* The link fills its row, so the full row (at least 44px tall) is clickable. */
.question-list .list-group-item[b-o6cf1mpmf7] {
    padding: 0;
}

.question-list[b-o6cf1mpmf7]  a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 2.75rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    text-decoration: none;
}

.question-list[b-o6cf1mpmf7]  a:hover {
    background-color: var(--answers-accent-soft);
    text-decoration: underline;
}

/* Decorative arrow; the "/ ''" alt text keeps screen readers quiet. */
.question-list[b-o6cf1mpmf7]  a::after {
    content: "\2192" / "";
    color: var(--answers-accent);
}
/* /Views/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand[b-7xbm306efb] {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

a[b-7xbm306efb] {
  color: var(--bs-link-color);
}

a:hover[b-7xbm306efb] {
  color: var(--bs-link-hover-color);
}

.btn-primary[b-7xbm306efb] {
  color: #fff;
  background-color: light-dark(#1b6ec2, #3c72b4);
  border-color: light-dark(#1861ac, #6193d5);
}

.nav-pills .nav-link.active[b-7xbm306efb], .nav-pills .show > .nav-link[b-7xbm306efb] {
  color: #fff;
  background-color: light-dark(#1b6ec2, #3c72b4);
  border-color: light-dark(#1861ac, #6193d5);
}

.border-top[b-7xbm306efb] {
  border-top: 1px solid #e5e5e5;
}
.border-bottom[b-7xbm306efb] {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow[b-7xbm306efb] {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy[b-7xbm306efb] {
  font-size: 1rem;
  line-height: inherit;
}

.footer[b-7xbm306efb] {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}