:root {
    --font-ui: "IBM Plex Serif", Georgia, serif;
    --font-score: "IBM Plex Mono", monospace;
    --font-tile: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

    --palette-carmine: #bc002d;
    --palette-carmine-hover: #950024;
    --palette-carmine-active: #73001b;
    --palette-carmine-soft: #f7d9e0;
    --palette-sea-green: #00916e;
    --palette-sea-green-strong: #006b52;
    --palette-sea-green-soft: #d7f1e9;
    --palette-linen: #feefe5;
    --palette-amber: #ffcf00;
    --palette-amber-hover: #e5ba00;
    --palette-amber-soft: #fff3b5;
    --palette-lilac: #7d5ba6;
    --palette-lilac-hover: #67468f;
    --palette-lilac-soft: #ede6f4;
    --neutral-900: #1b1718;
    --neutral-700: #5f5759;
    --neutral-500: #8f8587;
    --neutral-400: #9d9695;
    --neutral-300: #cfc7c5;
    --neutral-200: #e6dfdc;
    --neutral-100: #f7f4f2;

    --cds-background: #fff;
    --cds-background-hover: var(--neutral-100);
    --cds-background-active: var(--neutral-200);
    --cds-background-selected: var(--palette-linen);
    --cds-background-selected-hover: #f7dfd0;
    --cds-background-brand: var(--palette-carmine);
    --cds-layer-01: var(--neutral-100);
    --cds-layer-hover-01: var(--palette-linen);
    --cds-layer-active-01: var(--neutral-200);
    --cds-layer-selected-01: var(--palette-linen);
    --cds-layer-selected-hover-01: #f7dfd0;
    --cds-layer-accent-01: var(--neutral-200);
    --cds-layer-accent-hover-01: var(--neutral-300);
    --cds-layer-02: #fff;
    --cds-layer-hover-02: var(--palette-linen);
    --cds-layer-active-02: var(--neutral-200);
    --cds-field-01: var(--neutral-100);
    --cds-field-02: #fff;
    --cds-field-hover-01: var(--palette-linen);
    --cds-field-hover-02: var(--neutral-100);
    --cds-border-subtle-00: var(--neutral-200);
    --cds-border-subtle-01: var(--neutral-300);
    --cds-border-subtle-02: var(--neutral-200);
    --cds-border-strong-01: var(--neutral-500);
    --cds-border-strong-02: var(--neutral-700);
    --cds-border-interactive: var(--palette-carmine);
    --cds-text-primary: var(--neutral-900);
    --cds-text-secondary: var(--neutral-700);
    --cds-text-helper: var(--neutral-700);
    --cds-text-placeholder: var(--neutral-500);
    --cds-text-disabled: var(--neutral-400);
    --cds-text-error: var(--palette-carmine-hover);
    --cds-text-on-color: #fff;
    --cds-link-primary: var(--palette-carmine);
    --cds-link-primary-hover: var(--palette-carmine-hover);
    --cds-link-visited: var(--palette-lilac);
    --cds-icon-primary: var(--neutral-900);
    --cds-icon-secondary: var(--neutral-700);
    --cds-icon-interactive: var(--palette-carmine);
    --cds-interactive: var(--palette-carmine);
    --cds-focus: var(--palette-lilac);
    --cds-focus-inset: #fff;
    --cds-highlight: var(--palette-linen);
    --cds-support-error: var(--palette-carmine-hover);
    --cds-support-error-inverse: var(--palette-carmine);
    --cds-support-success: var(--palette-sea-green);
    --cds-support-success-inverse: var(--palette-sea-green-soft);
    --cds-support-warning: var(--palette-amber);
    --cds-support-warning-inverse: var(--palette-amber);
    --cds-support-info: var(--palette-lilac);
    --cds-support-info-inverse: var(--palette-lilac);
    --cds-notification-background-error: var(--palette-carmine-soft);
    --cds-notification-background-success: var(--palette-sea-green-soft);
    --cds-notification-background-warning: var(--palette-amber-soft);
    --cds-notification-background-info: var(--palette-lilac-soft);
    --cds-button-primary: var(--palette-carmine);
    --cds-button-primary-hover: var(--palette-carmine-hover);
    --cds-button-primary-active: var(--palette-carmine-active);
    --cds-button-secondary: var(--neutral-900);
    --cds-button-secondary-hover: var(--neutral-700);
    --cds-button-secondary-active: #3f393b;
    --cds-button-tertiary: var(--palette-carmine);
    --cds-button-tertiary-hover: var(--palette-carmine-hover);
    --cds-button-tertiary-active: var(--palette-carmine-active);
    --cds-button-danger-primary: var(--palette-carmine-hover);
    --cds-button-danger-hover: var(--palette-carmine-active);
    --cds-button-danger-active: #590015;

    --game-accent: var(--palette-carmine);
    --game-accent-hover: var(--palette-carmine-hover);
    --game-success: var(--palette-sea-green);
    --game-success-strong: var(--palette-sea-green-strong);
    --game-bonus: var(--palette-amber);
    --game-danger: var(--palette-carmine-hover);
    --game-score: var(--palette-carmine-hover);
    --game-score-column: 5rem;
    --game-score-column-compact: 3.5rem;
    --game-row-height: 4rem;
    --game-row-height-compact: 3.25rem;
    --game-tile-size: 2.625rem;
    --game-tile-size-compact: 2rem;
    --game-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    background: var(--cds-background, #f4f4f4);
    overflow-anchor: none;
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    background: var(--cds-background, #f4f4f4);
    color: var(--cds-text-primary, #161616);
    font-family: var(--font-ui);
    font-weight: 300;
    overflow-anchor: none;
}

.site-banner {
    border-left: 0.25rem solid var(--palette-lilac);
    background: var(--palette-lilac-soft);
    padding: 1rem 1.25rem;
    color: var(--neutral-900);
    font-size: 1rem;
    line-height: 1.5;
}

.site-banner[data-kind="warning"] {
    border-left-color: var(--palette-amber);
    background: var(--palette-amber-soft);
}

.site-banner[data-kind="critical"] {
    border-left-color: var(--palette-carmine);
    background: var(--palette-carmine-soft);
}

html.is-resetting-scroll,
html.is-resetting-scroll body {
    overflow: hidden;
}

html.is-resetting-scroll body {
    position: fixed;
    inset: 0;
    width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

cds-accordion,
cds-accordion-item,
cds-button,
cds-icon-button,
cds-modal,
cds-modal-close-button,
cds-modal-footer-button,
cds-modal-heading,
cds-modal-label,
cds-overflow-menu,
cds-overflow-menu-body,
cds-overflow-menu-item,
cds-select,
cds-tag,
cds-text-input,
cds-tile,
cds-toast-notification {
    font-family: var(--font-ui);
}

cds-button::part(button),
cds-modal-close-button::part(button),
cds-modal-footer-button::part(button),
cds-tag::part(tag),
#historyToggleButton::part(title),
#leaderboardCalendarToggleButton::part(title) {
    font-family: var(--font-ui);
}

cds-button::part(button),
cds-modal-close-button::part(button),
cds-modal-footer-button::part(button),
#historyToggleButton::part(title),
#leaderboardCalendarToggleButton::part(title),
cds-modal-heading,
cds-modal-label,
cds-overflow-menu-item {
    font-weight: 300;
    text-transform: lowercase;
}

.score-number {
    font-family: var(--font-score);
}

button:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cds-focus, #7d5ba6);
    outline-offset: 2px;
}

cds-accordion:not(:defined),
cds-button:not(:defined),
cds-icon-button:not(:defined),
cds-modal:not(:defined),
cds-select:not(:defined),
cds-tag:not(:defined),
cds-text-input:not(:defined),
cds-overflow-menu:not(:defined),
cds-tile:not(:defined) {
    visibility: hidden;
}

.page-shell {
    display: flex;
    flex-direction: column;
    width: min(60rem, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 2rem;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-top: auto;
    border-top: 1px solid var(--neutral-300);
    padding: 1.25rem 0 0;
    color: var(--neutral-700);
    font-size: 0.875rem;
    line-height: 1.5;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a[aria-current="page"] {
    color: var(--palette-carmine);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer small {
    font-size: inherit;
}

.page-shell > :not(.site-footer):not([hidden]) {
    margin-bottom: 2.5rem;
}

.info-screen {
    display: grid;
    align-content: start;
    gap: 2rem;
}

.info-content {
    border-top: 0.25rem solid var(--palette-carmine);
    padding: 2rem 0;
}

.info-content h2 {
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.info-page {
    max-width: 40rem;
    color: var(--neutral-700);
    font-size: 1.25rem;
    line-height: 1.6;
}

.info-page a {
    color: var(--cds-link-primary);
}

.info-page h3 {
    margin: 1.75rem 0 0.5rem;
    color: var(--neutral-900);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.25;
}

.info-page p + p {
    margin-top: 1rem;
}

.home-screen,
.account-screen,
.game-screen {
    display: grid;
    gap: 2rem;
}

.leaderboard-screen {
    display: grid;
    gap: 1rem;
}

.gallery-screen {
    display: grid;
    gap: 1.5rem;
}

.account-header {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    border-top: 0.25rem solid var(--cds-text-primary, #161616);
    padding-top: 1.5rem;
}

.account-header h1 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.5rem;
    text-transform: lowercase;
}

.leaderboard-header-title {
    color: var(--cds-text-primary, #161616);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-transform: lowercase;
    white-space: nowrap;
}

.gallery-header-title {
    color: var(--cds-text-primary, #161616);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-transform: lowercase;
    white-space: nowrap;
}

.gallery-page-status {
    border-left: 0.25rem solid var(--game-accent);
    background: var(--cds-layer-01, #f4f4f4);
    padding: 1rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.gallery-sign-in {
    width: fit-content;
}

.gallery-content {
    display: grid;
    gap: 1.5rem;
}

.gallery-style-carousel {
    display: grid;
    grid-auto-columns: minmax(8rem, 10rem);
    grid-auto-flow: column;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0 0 0.75rem;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--neutral-300) transparent;
}

.gallery-style-choice {
    display: grid;
    min-width: 0;
    gap: 0.625rem;
    border: 0;
    border-top: 0.25rem solid var(--neutral-300);
    background: var(--cds-layer-01, #f4f4f4);
    padding: 0.5rem;
    color: var(--cds-text-primary, #161616);
    cursor: pointer;
    scroll-snap-align: start;
    text-align: left;
}

.gallery-style-choice:hover {
    background: var(--cds-layer-hover-01, #e8e8e8);
}

.gallery-style-choice.is-selected {
    border-top-color: var(--game-accent);
    background: var(--palette-linen);
}

.gallery-style-preview {
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #fff;
}

.gallery-style-preview svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-style-label {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
}

.gallery-options {
    display: flex;
    width: min(100%, 38rem);
    gap: 1.5rem;
    border: 0;
    margin: 0 auto;
    padding: 0;
}

.gallery-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--cds-text-primary, #161616);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.gallery-options input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--palette-carmine);
}

.gallery-artwork {
    width: min(100%, 38rem);
    margin: 0 auto;
    background: var(--cds-layer-01, #f4f4f4);
    box-shadow: 0 0.75rem 2.5rem rgb(27 23 24 / 12%);
}

.gallery-artwork svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
}

.gallery-actions {
    display: flex;
    width: min(100%, 38rem);
    min-height: 4rem;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin: 0 auto;
}

.gallery-actions p {
    flex: 1;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.leaderboard-date-controls {
    border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}

.leaderboard-day-nav {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    min-height: 2.75rem;
    align-items: center;
    border-bottom: 1px solid var(--cds-border-subtle-00, #e0e0e0);
    text-align: center;
}

.leaderboard-date {
    color: var(--cds-text-secondary, #525252);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.leaderboard-page-status {
    border-left: 0.25rem solid var(--game-accent);
    background: var(--cds-layer-01, #fff);
    padding: 1rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.leaderboard-table-wrap {
    overflow-x: auto;
}

.leaderboard-table {
    width: 100%;
    min-width: 48rem;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--cds-layer-01, #fff);
    text-align: left;
}

.leaderboard-col-rank {
    width: 5rem;
}

.leaderboard-col-score {
    width: 7rem;
}

.leaderboard-col-total {
    width: 10rem;
}

.leaderboard-table th,
.leaderboard-table td {
    border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    padding: 0.875rem 1rem;
    font-weight: 300;
}

.leaderboard-table thead th {
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-transform: lowercase;
    white-space: nowrap;
}

.leaderboard-table thead th:not(:nth-child(2)),
.leaderboard-table td:not(:nth-child(2)) {
    text-align: right;
}

.leaderboard-table tbody th,
.leaderboard-table tbody td {
    font-size: 1rem;
    line-height: 1.5rem;
}

.leaderboard-table tbody th {
    overflow: hidden;
    max-width: 16rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-table tbody tr.is-current-user > * {
    background: var(--palette-sea-green-soft);
    color: var(--game-success-strong);
}

.leaderboard-table tbody tr.is-current-user > :first-child {
    box-shadow: inset 0.25rem 0 0 var(--game-success);
}

.leaderboard-table tbody tr.is-outside-top > * {
    border-top: 0.25rem solid var(--cds-background, #fff);
}

.account-page-status {
    border-left: 0.25rem solid var(--game-accent);
    background: var(--cds-layer-01, #fff);
    padding: 1rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.account-page-content {
    display: grid;
    gap: 2rem;
}

.account-page-content[aria-busy="true"] {
    opacity: 0.65;
}

.account-identity {
    display: grid;
    gap: 0.5rem;
    border-top: 0.25rem solid var(--game-accent);
    background: var(--cds-layer-01, #fff);
    padding: 2rem;
}

.account-identity h2 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.5rem;
}

.account-identity p {
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.account-section {
    display: grid;
    gap: 0.75rem;
}

.account-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--cds-border-subtle-01, #c6c6c6);
}

.account-stat-grid > div {
    display: grid;
    min-height: 7rem;
    align-content: space-between;
    gap: 1rem;
    background: var(--cds-layer-01, #fff);
    padding: 1rem;
}

.account-stat-grid span,
.account-stats-table thead,
.account-details dt {
    color: var(--cds-text-secondary, #525252);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.account-stat-grid strong {
    color: var(--game-accent);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 300;
    line-height: 2.5rem;
}

.account-stat-grid strong.is-date {
    color: var(--cds-text-primary, #161616);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
}

.account-table-wrap {
    overflow-x: auto;
}

.account-stats-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cds-layer-01, #fff);
    text-align: left;
}

.account-stats-table th,
.account-stats-table td {
    border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    padding: 0.75rem 1rem;
}

.account-stats-table thead th:not(:first-child),
.account-stats-table td {
    text-align: right;
}

.account-stats-table tbody th,
.account-stats-table td {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.account-stats-table tbody th {
    font-weight: 300;
    text-transform: lowercase;
}

.account-stats-table td {
    font-variant-numeric: tabular-nums;
}

.account-details {
    margin: 0;
    background: var(--cds-layer-01, #fff);
}

.account-details > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr);
    gap: 1rem;
    border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    padding: 0.75rem 1rem;
}

.account-details dt,
.account-details dd {
    margin: 0;
}

.account-details dd {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.account-page-actions {
    display: flex;
    justify-content: flex-end;
}

.home-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.75fr);
    gap: 2rem;
    align-items: start;
    border-top: 0.25rem solid var(--cds-text-primary, #161616);
    padding-top: 1.5rem;
}

.brand-block {
    min-width: 0;
}

.metric-label,
.answer-label,
.history-summary {
    color: var(--cds-text-secondary, #525252);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.25rem;
    text-transform: lowercase;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1 {
    margin-top: 0.5rem;
    font-size: 4.5rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}

.brand-name {
    font-family: var(--font-ui);
    font-weight: 200;
}

.brand-subtitles {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
    color: var(--cds-text-secondary, #525252);
}

.brand-pronunciation {
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.25rem;
}

.brand-japanese {
    font-size: 1.125rem;
    letter-spacing: 0;
    line-height: 1.5rem;
}

.date-line {
    color: var(--cds-text-secondary, #525252);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.summary-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.home-tools {
    display: grid;
    gap: 1rem;
}

.home-icon-actions {
    display: flex;
    justify-content: flex-end;
    margin-inline-start: auto;
}

.account-menu > svg {
    color: var(--cds-icon-primary, #161616);
}

.account-menu .carbon-icon-alt {
    display: none;
}

.account-menu.is-authenticated .carbon-icon-primary {
    display: none;
}

.account-menu.is-authenticated .carbon-icon-alt {
    display: block;
}

.daily-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 1px;
    background: var(--cds-border-subtle-01, #c6c6c6);
}

.summary-tile {
    display: grid;
    min-width: 0;
    min-height: 11rem;
    align-content: start;
    background: var(--cds-layer-01, #fff);
    padding: 1.5rem;
}

.total-card {
    border-top: 0.25rem solid var(--game-accent);
}

.total-card .metric-label,
.leaderboard-card > .metric-label,
.leaderboard-toggle .metric-label,
.daily-card .daily-card-label {
    color: #000;
}

.summary-tile strong {
    display: block;
    margin-top: 0.5rem;
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.5rem;
}

.total-card strong {
    color: var(--game-accent);
    font-size: clamp(4.5rem, 13vw, 7rem);
    font-weight: 300;
    line-height: 0.95;
}

.leaderboard-card {
    gap: 0.75rem;
    border-top: 0.25rem solid var(--cds-border-strong-01, #8d8d8d);
}

.leaderboard-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.leaderboard-full-link {
    color: var(--cds-link-primary, #bc002d);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}

.leaderboard-full-link:hover {
    text-decoration: underline;
}

.leaderboard-toggle {
    display: none;
}

.leaderboard-content {
    display: grid;
    gap: 0.75rem;
}

.leaderboard-empty {
    text-transform: lowercase;
}

.leaderboard-list {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.leaderboard-list li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: baseline;
    border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    padding-top: 0.375rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.leaderboard-list li.is-current-user {
    border-left: 0.1875rem solid var(--game-success);
    background: var(--palette-sea-green-soft);
    padding-left: 0.375rem;
}

.leaderboard-list .leaderboard-empty {
    display: block;
}

.leaderboard-rank,
.leaderboard-score {
    color: var(--cds-text-primary, #161616);
    font-variant-numeric: tabular-nums;
}

.leaderboard-rank {
    font-weight: 300;
}

.leaderboard-score {
    font-weight: 600;
}

.leaderboard-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.difficulty-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--cds-border-subtle-01, #c6c6c6);
}

.daily-card {
    --difficulty-accent: transparent;
    display: grid;
    min-width: 0;
    min-height: 9rem;
    align-content: space-between;
    gap: 1rem;
    border: 0;
    border-top: 0.25rem solid var(--difficulty-accent);
    background: var(--cds-layer-01, #fff);
    color: var(--cds-text-primary, #161616);
    padding: 1rem;
    text-align: left;
    cursor: pointer;
}

.daily-card[data-difficulty="easy"] {
    --difficulty-accent: var(--game-success-strong);
}

.daily-card[data-difficulty="medium"] {
    --difficulty-accent: var(--palette-amber);
}

.daily-card[data-difficulty="hard"] {
    --difficulty-accent: var(--game-accent);
}

.daily-card:not(:disabled):hover {
    background: var(--cds-layer-hover-01, #e8e8e8);
}

.daily-card:disabled {
    color: var(--cds-text-disabled, #a8a8a8);
    cursor: not-allowed;
}

.daily-card-label,
.daily-card-meta {
    color: var(--cds-text-secondary, #525252);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.daily-card-state {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.daily-card-rows {
    display: grid;
    width: min(5.25rem, 44%);
    gap: 0.25rem;
}

.daily-card-row {
    display: block;
    width: 100%;
    height: 0.375rem;
    border: 1px solid var(--cds-border-strong-01, #8d8d8d);
    background: transparent;
}

.daily-card-row > span {
    display: block;
    width: 0;
    height: 100%;
}

.daily-card-rows.is-draft .daily-card-row.is-filled > span,
.daily-card-rows.is-complete .daily-card-row.is-filled > span {
    width: var(--row-fill);
}

.daily-card-rows.is-draft .daily-card-row.is-filled > span {
    background: var(--cds-support-info, #7d5ba6);
}

.daily-card-rows.is-complete .daily-card-row.is-filled {
    border-color: var(--game-success-strong);
}

.daily-card-rows.is-complete .daily-card-row.is-filled > span {
    background: var(--game-success-strong);
}

.daily-card-rows.is-complete .daily-card-row.is-non-scoring {
    border-color: var(--cds-border-strong-01, #8d8d8d);
}

.daily-card-rows.is-complete .daily-card-row.is-non-scoring > span {
    background: var(--cds-border-strong-01, #8d8d8d);
}

.daily-card .daily-card-score {
    color: var(--game-accent);
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.5rem;
    font-variant-numeric: tabular-nums;
}

.daily-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--game-accent);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.daily-card:not(:disabled):hover .daily-card-action-arrow {
    transform: translateX(0.25rem);
}

.daily-card-action-arrow {
    transition: transform 110ms var(--game-ease);
}

.daily-card-action-japanese {
    white-space: nowrap;
}

.history-panel {
    border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}

#historyToggleButton::part(title) {
    color: var(--cds-text-secondary, #525252);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.25rem;
    text-transform: lowercase;
}

.history-body {
    display: grid;
    gap: 1rem;
    padding: 0 0 1rem;
}

.history-month-nav {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    align-items: center;
}

.history-month-nav h2 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.75rem;
    text-align: center;
    text-transform: lowercase;
}

.history-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 0.25rem;
    row-gap: 1px;
    background: transparent;
}

.history-weekday {
    display: grid;
    min-height: 2rem;
    place-items: center;
    border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    background: transparent;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.75rem;
    font-weight: 300;
    text-transform: lowercase;
}

.history-day {
    width: 100%;
    max-width: none;
    min-height: 2.75rem;
    justify-content: center;
    border: 0;
    border-bottom: 1px solid var(--cds-border-subtle-00, #e0e0e0);
    padding: 0;
    background: transparent;
    color: var(--cds-text-secondary, #525252);
    cursor: pointer;
    transition:
        background-color 110ms var(--game-ease),
        color 110ms var(--game-ease),
        box-shadow 110ms var(--game-ease);
}

.history-day[data-intensity="0"]:not(.is-selected):hover {
    background: var(--cds-background-hover, #f4f4f4);
    color: var(--cds-text-primary, #161616);
}

.history-day.is-empty {
    border-bottom-color: transparent;
    background: transparent;
}

.history-day:disabled {
    border-bottom-color: var(--cds-border-subtle-00, #e0e0e0);
    background: transparent;
    color: var(--cds-text-disabled, #a8a8a8);
    cursor: default;
}

.history-day.is-today {
    box-shadow: inset 0 -2px 0 var(--game-accent);
    color: var(--game-accent);
}

.history-day.is-selected,
.history-day.is-selected[data-intensity] {
    background: var(--game-accent);
    color: var(--cds-text-on-color, #fff);
}

.history-day[data-intensity="1"] {
    background: var(--palette-sea-green-soft);
    color: var(--cds-text-primary, #161616);
}

.history-day[data-intensity="2"] {
    background: var(--game-success);
    color: var(--cds-text-primary, #161616);
}

.history-day[data-intensity="3"] {
    background: var(--game-success-strong);
    color: var(--cds-text-on-color, #fff);
}

.history-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1rem;
    text-transform: lowercase;
}

.history-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.history-legend-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.history-legend-swatch[data-intensity="1"] {
    background: var(--palette-sea-green-soft);
}

.history-legend-swatch[data-intensity="2"] {
    background: var(--game-success);
}

.history-legend-swatch[data-intensity="3"] {
    background: var(--game-success-strong);
}

.history-legend-swatch.is-selected {
    background: var(--game-accent);
}

.game-screen {
    position: relative;
    gap: 1rem;
}

.game-tutorial {
    position: absolute;
    z-index: 20;
    inset: 0;
    overflow: hidden;
    color: var(--game-accent);
    pointer-events: none;
    visibility: hidden;
}

.game-tutorial.is-visible,
.game-tutorial.is-dismissing {
    visibility: visible;
}

.game-tutorial-arrows {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#gameTutorialArrowPaths > path {
    --tutorial-visible-opacity: 0.8;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
    opacity: 0;
    vector-effect: non-scaling-stroke;
}

#tutorialArrowhead path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.25;
}

.game-tutorial-label {
    position: absolute;
    z-index: 2;
    margin: 0;
    color: var(--game-accent);
    font-family: var(--font-ui);
    font-size: clamp(0.875rem, 1.7vw, 1.125rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.25;
    opacity: 0;
    white-space: nowrap;
    text-shadow:
        0 0 0.2rem var(--cds-background),
        0 0 0.45rem var(--cds-background),
        0 0 0.8rem var(--cds-background);
}

.tutorial-drag-ghost {
    position: absolute;
    z-index: 5;
    margin: 0;
    color: var(--game-accent);
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.letter-tile.head.is-tutorial-demo-source {
    opacity: 0.22;
}

.game-tutorial [data-tutorial-step="1"] {
    --tutorial-delay: 0.15s;
}

.game-tutorial [data-tutorial-step="2"] {
    --tutorial-delay: 1.15s;
}

.game-tutorial [data-tutorial-step="3"] {
    --tutorial-delay: 2.15s;
}

.game-tutorial [data-tutorial-step="4"] {
    --tutorial-delay: 3.15s;
}

.game-tutorial [data-tutorial-step="5"] {
    --tutorial-delay: 4.15s;
}

.game-tutorial [data-tutorial-step="6"] {
    --tutorial-delay: 5.15s;
}

.game-tutorial.is-visible .game-tutorial-label,
.game-tutorial.is-visible #gameTutorialArrowPaths > path {
    animation: tutorialItemFade 480ms var(--game-ease) var(--tutorial-delay) both;
}

.game-tutorial [data-tutorial-exit-step="1"] {
    --tutorial-exit-delay: 0s;
}

.game-tutorial [data-tutorial-exit-step="2"] {
    --tutorial-exit-delay: 0.12s;
}

.game-tutorial [data-tutorial-exit-step="3"] {
    --tutorial-exit-delay: 0.24s;
}

.game-tutorial [data-tutorial-exit-step="4"] {
    --tutorial-exit-delay: 0.36s;
}

.game-tutorial [data-tutorial-exit-step="5"] {
    --tutorial-exit-delay: 0.48s;
}

.game-tutorial.is-dismissing .game-tutorial-label,
.game-tutorial.is-dismissing #gameTutorialArrowPaths > path {
    animation: tutorialItemFadeOut 900ms var(--game-ease) var(--tutorial-exit-delay) both;
}

@keyframes tutorialItemFade {
    from {
        opacity: 0;
    }

    to {
        opacity: var(--tutorial-visible-opacity, 1);
    }
}

@keyframes tutorialItemFadeOut {
    to {
        opacity: 0;
    }
}

.game-header {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
    padding-bottom: 1rem;
}

.game-title {
    min-width: 0;
}

.game-title h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 200;
    line-height: 2.5rem;
}

.header-actions {
    display: flex;
    align-items: center;
}

.letter-track {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 2px;
    background: transparent;
}

.game-screen.is-entering .track-dot { animation: none; }
.game-screen.is-entering .letter-tile.head { transition: none; }

.track-dot,
.share-pool-letter {
    display: grid;
    min-width: 0;
    aspect-ratio: 1;
    place-items: center;
    background: var(--cds-layer-accent-01, #e0e0e0);
    color: transparent;
    font-family: var(--font-tile);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.track-dot.is-played,
.share-pool-letter {
    background: var(--cds-icon-primary, #161616);
    color: var(--cds-text-on-color, #fff);
}

.track-dot.is-deemphasized {
    color: var(--cds-text-disabled, #a8a8a8);
    opacity: 0.5;
}

.track-dot.is-current {
    position: relative;
    z-index: 1;
    background: var(--game-accent);
    color: var(--cds-text-on-color, #fff);
    animation: currentPulse 1.1s var(--game-ease) infinite;
}

.track-dot.is-preview {
    color: var(--cds-text-secondary, #525252);
    animation: revealLetter 240ms var(--game-ease) both;
}

.letter-track.is-pool-arranged {
    grid-template-columns: repeat(var(--pool-columns, 23), minmax(0, 1fr));
    align-content: center;
    background: transparent;
}

.track-dot.is-pool-letter {
    grid-column: var(--pool-column);
    grid-row: var(--pool-row);
}

.track-dot.is-pool-letter,
.share-pool-letter {
    box-shadow: inset 0 -0.1875rem 0 var(--game-success);
}

.selected-letter-stage {
    display: grid;
    min-height: 4.5rem;
    max-height: 4.5rem;
    place-items: center;
}

.selected-letter-stage > * {
    grid-area: 1 / 1;
}

.completion-message {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--cds-text-secondary, #525252);
    font-family: var(--font-ui);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 200;
    line-height: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
}

.completion-japanese,
.completion-reading {
    color: inherit;
    font: inherit;
}

.game-screen.is-submitted .letter-tile.head {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
}

.game-screen.is-submitted:not(.is-scoring) .completion-message {
    animation: completionSettle 520ms var(--game-ease) 700ms both;
}

.letter-tile,
.slot-letter {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--cds-border-strong-01, #8d8d8d);
    border-radius: 0;
    background: var(--cds-layer-02, #f4f4f4);
    color: var(--cds-text-primary, #161616);
    box-shadow: inset 0 -0.1875rem 0 var(--game-accent);
    font-family: var(--font-tile);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.letter-tile.head {
    width: 3.5rem;
    color: var(--game-accent);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition:
        opacity 180ms var(--game-ease),
        transform 180ms var(--game-ease);
}

.letter-tile.head.is-unavailable {
    cursor: default;
    opacity: 0.4;
}

.letter-tile.head.is-dragging,
.slot-letter.is-dragging {
    opacity: 0.3;
}

.board {
    position: relative;
    display: grid;
    gap: 0.5rem;
}

.board-score-heading,
.slot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--game-score-column);
    gap: 1px;
}

.slot-row {
    position: relative;
}

.board-score-heading {
    position: absolute;
    inset-block-start: -1.75rem;
    inset-inline: 0;
    z-index: 1;
    min-height: 1.25rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.75rem;
    font-weight: 300;
    pointer-events: none;
    text-transform: lowercase;
}

.board-score-heading > span {
    display: flex;
    grid-column: 2;
    width: max-content;
    align-items: baseline;
    gap: 0.25rem;
    justify-self: end;
    padding-right: 1rem;
    white-space: nowrap;
}

.slot-row.is-playing {
    grid-template-columns: minmax(0, 1fr);
}

.slot-label {
    position: absolute;
    z-index: 4;
    inset-block-start: 0.375rem;
    inset-inline-start: 0.5rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 300;
    line-height: 1rem;
    opacity: 0.7;
    pointer-events: none;
}

.slot-word,
.slot-score {
    min-height: var(--game-row-height);
    border: 0;
    background: var(--cds-layer-01, #fff);
}

.slot-word {
    min-width: 0;
    border-left: 0.25rem solid transparent;
    padding: 0.625rem;
    cursor: default;
    transition: background-color 120ms var(--game-ease);
}

.slot-row.is-playing .slot-word {
    cursor: pointer;
}

.slot-score {
    display: grid;
    place-items: center end;
    padding-right: 1rem;
    color: var(--game-score);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    transition:
        transform 180ms var(--game-ease),
        background-color 180ms var(--game-ease);
}

.slot-row.is-playing .slot-score {
    display: none;
}

.slot-row.is-valid .slot-word {
    border-left-color: var(--game-success);
    background: var(--cds-notification-background-success, #defbe6);
}

.bonus-row .slot-word,
.bonus-row .slot-score {
    min-height: 2.5rem;
    border-left-color: var(--game-bonus);
    background: color-mix(in srgb, var(--palette-amber-soft) 42%, white);
}

.slot-row.is-invalid .slot-word {
    border-left-color: var(--cds-border-subtle-01, #c6c6c6);
}

.bonus-row .slot-word {
    display: grid;
    place-items: center;
    color: var(--cds-text-primary, #161616);
    font-size: 0.8125rem;
    font-weight: 300;
    text-transform: lowercase;
}

.bonus-row .slot-score {
    color: var(--cds-text-primary, #161616);
}

.bonus-label-content {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
}

.word-display {
    --row-tile-size: var(--game-tile-size);
    display: flex;
    min-height: calc(var(--game-tile-size) + 0.25rem);
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}

.word-display.is-empty {
    position: relative;
    justify-content: center;
}

.word-display.is-empty .insert-target {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: auto;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: transparent;
}

.row-shadow-tile {
    position: relative;
    z-index: 2;
    width: var(--game-tile-size);
    aspect-ratio: 1;
    border: 1px dashed var(--cds-border-strong-01, #8d8d8d);
    background: transparent;
    box-shadow: 2px 2px 0 var(--cds-border-subtle-01, #c6c6c6);
    opacity: 0.42;
    pointer-events: none;
    transition:
        opacity 120ms var(--game-ease),
        transform 120ms var(--game-ease),
        background-color 120ms var(--game-ease);
}

.word-display.is-empty .insert-target:hover + .row-shadow-tile,
.word-display.is-empty .insert-target:focus-visible + .row-shadow-tile,
.word-display.is-empty .insert-target.is-drop-target + .row-shadow-tile {
    border-color: var(--game-accent);
    border-style: solid;
    background: var(--cds-highlight, #feefe5);
    box-shadow: 2px 2px 0 var(--game-accent);
    opacity: 1;
    transform: scale(1.04);
}

.row-shadow-tile.is-tutorial-target {
    border-color: var(--game-accent);
    border-style: solid;
    background: var(--palette-carmine-soft);
    box-shadow: 2px 2px 0 var(--game-accent);
    opacity: 1;
    animation: tutorialTargetInvite 620ms var(--game-ease) both;
}

@keyframes tutorialTargetInvite {
    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.04);
    }
}

.word-display.is-empty .insert-target:focus-visible {
    outline: 2px solid var(--cds-focus, #7d5ba6);
    outline-offset: -2px;
}

.word-display.is-drop-target {
    outline: 2px solid var(--cds-focus, #7d5ba6);
    outline-offset: -2px;
    background: var(--cds-highlight, #feefe5);
}

.slot-letter {
    position: relative;
    width: var(--game-tile-size);
    min-height: 0;
    padding: 0;
    font-size: 1.5rem;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition:
        transform 180ms var(--game-ease),
        background-color 120ms var(--game-ease),
        color 120ms var(--game-ease);
}

.slot-letter:disabled {
    color: var(--cds-text-primary, #161616);
    cursor: default;
    opacity: 1;
}

.slot-letter.is-selected {
    z-index: 3;
    border: 2px solid var(--game-accent);
    background: var(--cds-highlight, #feefe5);
    color: var(--game-accent-hover);
    animation: selectedTilePulse 1.4s var(--game-ease) infinite;
    transform: translateY(-0.375rem) scale(1.08);
}

.slot-letter.is-dragging {
    transform: translateY(-0.25rem) scale(1.06);
}

.slot-row.is-valid .slot-letter {
    border-color: var(--game-success);
}

.slot-row.is-invalid .slot-letter {
    border-color: var(--cds-border-strong-01, #8d8d8d);
}

.pointer-drag-ghost {
    position: fixed;
    z-index: 9000;
    pointer-events: none;
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1.08);
    will-change: left, top;
}

.slot-letter.drag-image {
    z-index: 9000;
    pointer-events: none;
    opacity: 1;
    transform: scale(1.12);
}

.insert-target {
    --insert-target-width: 1.25rem;
    width: var(--insert-target-width);
    min-width: var(--insert-target-width);
    min-height: var(--game-tile-size);
    border: 0;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    background: transparent;
    padding: 0;
    transition:
        width 120ms var(--game-ease),
        min-width 120ms var(--game-ease),
        border-color 120ms var(--game-ease),
        background-color 120ms var(--game-ease),
        box-shadow 120ms var(--game-ease),
        opacity 120ms var(--game-ease);
}

.insert-target:not(:disabled) {
    cursor: pointer;
}

.slot-row.is-settling .insert-target {
    transition: none;
}

.insert-target.is-drop-target,
.insert-target:not(:disabled):hover,
.insert-target:focus-visible {
    border-color: var(--game-accent);
    background: var(--cds-highlight, #feefe5);
}

.word-display:not(.is-empty) > .insert-target.is-drop-target {
    --insert-target-width: var(--row-tile-size);
    border: 1px solid var(--game-accent);
    background: var(--cds-highlight, #feefe5);
    box-shadow: 2px 2px 0 var(--game-accent);
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) and (min-width: 48.01rem) {
    .slot-row.is-playing:hover .slot-word {
        background: var(--cds-highlight, #feefe5);
    }

    .slot-row.is-playing:hover .word-display:not(.is-empty) > .insert-target {
        --insert-target-width: var(--row-tile-size);
        border: 1px dashed var(--cds-border-strong-01, #8d8d8d);
        box-shadow: 2px 2px 0 var(--cds-border-subtle-01, #c6c6c6);
        opacity: 0.55;
    }

    .slot-row.is-playing:hover
        .word-display:not(.is-empty)
        > .insert-target.is-drop-target,
    .slot-row.is-playing:hover
        .word-display:not(.is-empty)
        > .insert-target:not(:disabled):hover,
    .slot-row.is-playing:hover
        .word-display:not(.is-empty)
        > .insert-target:focus-visible {
        --insert-target-width: var(--row-tile-size);
        border: 1px solid var(--game-accent);
        background: var(--cds-highlight, #feefe5);
        box-shadow: 2px 2px 0 var(--game-accent);
        opacity: 1;
    }
}

.slot-row.is-revealed .slot-score {
    animation: rowPop 420ms var(--game-ease) both;
}

.slot-row.is-revealed.is-valid .slot-score {
    animation: scoreWave 980ms var(--game-ease) both;
    animation-delay: calc(var(--row-score-delay, 0ms) + 70ms);
}

.slot-row.is-revealed.is-valid .slot-word {
    animation: rowCelebrate 980ms var(--game-ease) both;
}

.slot-row.is-revealed .insert-target {
    overflow: hidden;
    pointer-events: none;
    animation: insertTargetCollapse 420ms var(--game-ease) both;
}

.slot-row.is-revealed.is-invalid .slot-letter {
    border-color: var(--cds-border-subtle-01, #c6c6c6);
    background: var(--cds-layer-accent-01, #e0e0e0);
    color: var(--cds-text-disabled, #a8a8a8);
    box-shadow: none;
    animation: settleTile 520ms var(--game-ease) both;
}

.slot-row.is-revealed.is-valid .slot-letter {
    animation-name: tileReveal, tileWave;
    animation-duration: 980ms, 4000ms;
    animation-timing-function: var(--game-ease), var(--game-ease);
    animation-delay:
        calc(var(--wave-index, 0) * 70ms),
        calc(1500ms + (var(--wave-index, 0) * 70ms));
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

.game-footer {
    display: grid;
    gap: 1rem;
}

.game-screen.is-submitted .game-footer {
    gap: 0.5rem;
}

.total-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto var(--game-score-column);
    align-items: stretch;
    border-top: 1px solid var(--cds-border-strong-01, #8d8d8d);
    background: var(--cds-layer-01, #fff);
}

.footer-submit {
    grid-column: 2 / 4;
    grid-row: 1;
    min-width: 8rem;
    justify-self: end;
}

.game-screen:not(.is-submitted) .total-label,
.game-screen:not(.is-submitted) .total-row strong {
    display: none;
}

.moves-indicator {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    min-height: 3rem;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    font-weight: 300;
    text-transform: lowercase;
}

.move-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.swap-title-ja,
.swap-title-question {
    display: block;
}

.swap-title-ja {
    white-space: nowrap;
}

.swap-title-question {
    margin-top: 0.5rem;
}

.swap-modal-dots {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

.move-dot {
    position: relative;
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    color: var(--cds-icon-primary, #161616);
    transform: rotate(-7deg);
}

.move-dot::before {
    position: absolute;
    inset: 0;
    background: currentColor;
    clip-path: polygon(
        50% 0,
        72% 5%,
        89% 19%,
        98% 41%,
        94% 65%,
        79% 86%,
        56% 98%,
        31% 94%,
        12% 80%,
        2% 58%,
        5% 34%,
        20% 13%
    );
    content: "";
    opacity: 0.45;
    -webkit-mask: radial-gradient(circle at 50% 48%, transparent 0 42%, #000 47% 100%);
    mask: radial-gradient(circle at 50% 48%, transparent 0 42%, #000 47% 100%);
}

.move-dot.is-left::before {
    opacity: 1;
    -webkit-mask: none;
    mask: none;
}

.move-dot:nth-child(even) {
    transform: rotate(5deg) scale(0.94, 1.03);
}

.total-label,
.total-row strong {
    display: grid;
    min-height: 3rem;
    place-items: center;
}

.total-label {
    grid-column: 2;
    grid-row: 1;
    min-width: 5rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    font-weight: 300;
    text-transform: lowercase;
}

.total-label-content {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
}

.total-row strong {
    grid-column: 3;
    grid-row: 1;
    justify-items: end;
    padding-right: 1rem;
    color: var(--game-accent);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1;
}

.total-row.is-final strong span {
    color: transparent;
    background: linear-gradient(
        105deg,
        var(--game-accent-hover) 38%,
        var(--palette-amber) 48%,
        var(--game-accent-hover) 58%
    );
    background-position: 100% 0;
    background-size: 280% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: totalTextGlint 3.2s ease-in-out 650ms infinite;
}

.controls {
    display: grid;
    gap: 0.75rem;
}

.pool-word-list {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.share-pool-word {
    display: inline-flex;
    gap: 2px;
}

.share-pool-letter {
    width: 1.75rem;
    font-size: 1rem;
}

#shareModal cds-modal-header {
    overflow: visible;
}

#shareModal cds-modal-body-content {
    padding-inline-end: 0;
}

.result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--cds-border-subtle-01, #c6c6c6);
}

.result-actions cds-button {
    width: 100%;
}

.result-actions cds-button::part(button) {
    width: 100%;
    max-inline-size: none;
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 0.75rem;
    border: 0;
    border-top: 0.25rem solid var(--result-action-accent);
    padding: 0 1.5rem;
    background: var(--cds-layer-01, #fff);
    box-shadow: none;
    color: var(--cds-text-primary, #161616);
    font-weight: 300;
    text-transform: lowercase;
}

.result-actions .carbon-icon-primary {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 !important;
}

.result-actions cds-button::part(button):hover {
    background: var(--cds-layer-hover-01, #e8e8e8);
}

#resultHomeButton {
    --result-action-accent: var(--game-success-strong);
}

#shareButton {
    --result-action-accent: var(--game-accent);
}

.share-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 1.5rem;
    background: var(--cds-border-subtle-01, #c6c6c6);
}

.share-stats > div {
    min-width: 0;
    background: var(--cds-layer-02, #f4f4f4);
    padding: 1rem;
}

.share-stats strong {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-score);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 2.25rem;
}

.share-pool {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.share-pool .pool-word-list.is-message {
    display: block;
    border-left: 0.25rem solid var(--cds-support-info, #7d5ba6);
    background: var(--cds-notification-background-info, #ede6f4);
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.share-text {
    width: 100%;
    height: clamp(16rem, 40vh, 22rem);
    min-height: 16rem;
    resize: vertical;
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
    background: var(--cds-field-02, #fff);
    color: var(--cds-text-primary, #161616);
    padding: 1rem;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.help-content,
.settings-content,
.auth-form {
    display: grid;
    gap: 1rem;
}

.help-content {
    container-type: inline-size;
    gap: 0.75rem;
}

/* Carbon's fixed bottom fade also masks the final lines at the end of scrolling. */
#helpModal cds-modal-body {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.help-verse {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 0.75rem;
}

.help-detail {
    display: grid;
    gap: 0.5rem;
}

.help-content h3 {
    color: var(--cds-text-primary, #161616);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    text-transform: lowercase;
}

.help-content p {
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.help-score-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.help-score-table th,
.help-score-table td {
    border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    padding: 0.25rem 0.375rem;
    text-align: left;
}

.help-score-table th {
    font-weight: 300;
}

.help-score-table th:nth-child(3),
.help-score-table td:nth-child(3) {
    border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    padding-left: 0.5rem;
}

.help-score-table td:nth-child(even) {
    font-family: var(--font-score);
    text-align: right;
}

@container (max-width: 18rem) {
    .help-verse {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }
}

.public-name-settings,
.product-email-settings {
    display: grid;
    gap: 0.75rem;
    border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
    padding-top: 1rem;
}

.product-email-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cds-text-primary, #161616);
    cursor: pointer;
    font-size: 1rem;
}

.product-email-option input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--palette-carmine);
}

.product-email-settings > p {
    margin: 0;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.public-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.public-name-row strong {
    min-width: 0;
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 300;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-message {
    min-height: 1.25rem;
    color: var(--cds-text-secondary, #525252);
    font-size: 0.75rem;
    line-height: 1rem;
}

.game-message {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 9000;
    opacity: 0;
    transform: translateY(0.5rem);
    transition:
        opacity 140ms var(--game-ease),
        transform 140ms var(--game-ease);
}

.game-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.score-pop {
    animation: scorePulse 520ms var(--game-ease) both;
}

.moves-pop {
    animation: movesPulse 420ms var(--game-ease) both;
}

@keyframes scorePulse {
    50% {
        color: var(--game-accent);
        transform: scale(1.08);
    }
}

@keyframes completionSettle {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes totalTextGlint {
    0%,
    62% {
        background-position: 100% 0;
    }
    82%,
    100% {
        background-position: 0 0;
    }
}

@keyframes movesPulse {
    45% {
        color: var(--game-accent);
        transform: scale(1.12);
    }
}

@keyframes currentPulse {
    50% {
        background: var(--game-accent-hover);
    }
}

@keyframes selectedTilePulse {
    50% {
        transform: translateY(-0.5rem) scale(1.11);
    }
}

@keyframes revealLetter {
    from {
        opacity: 0.2;
        transform: translateY(0.125rem);
    }
}

@keyframes tileLand {
    0% {
        transform: translateY(-0.75rem) scale(0.9);
    }
    60% {
        background: var(--cds-highlight, #feefe5);
        transform: translateY(0.125rem) scale(1.08);
    }
}

.slot-letter.is-landing {
    animation: tileLand 360ms var(--game-ease) both;
}

@keyframes settleTile {
    65% {
        transform: translateY(-0.1875rem) scale(1.06);
    }
}

@keyframes tileReveal {
    24% {
        transform: translateY(-0.75rem) scale(1.15);
    }
    52% {
        transform: translateY(0.1875rem) scale(1.06);
    }
    100% {
        transform: translateY(0) scale(1.04);
    }
}

@keyframes tileWave {
    7% {
        transform: translateY(-0.625rem) scale(1.12);
    }
    14% {
        transform: translateY(0.125rem) scale(1.06);
    }
    22%,
    100% {
        transform: translateY(0) scale(1.04);
    }
}

@keyframes scoreWave {
    30% {
        color: var(--game-success);
        transform: translateY(-0.5rem) scale(1.3);
    }
    100% {
        color: var(--game-score);
        transform: translateY(0);
    }
}

@keyframes rowCelebrate {
    32% {
        background: var(--cds-highlight, #feefe5);
    }
    100% {
        background: var(--cds-notification-background-success, #defbe6);
    }
}

@keyframes insertTargetCollapse {
    to {
        width: 0;
        min-width: 0;
        border-width: 0;
        opacity: 0;
    }
}

@keyframes rowPop {
    60% {
        background: var(--cds-highlight, #feefe5);
        transform: translateY(-0.125rem);
    }
}

@media (max-width: 54rem) {
    .leaderboard-table-wrap {
        overflow-x: visible;
    }

    .leaderboard-table {
        min-width: 0;
    }

    .leaderboard-col-rank {
        width: 3.5rem;
    }

    .leaderboard-col-score {
        width: 5rem;
    }

    .leaderboard-col-total {
        width: 6.5rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding-inline: 0.75rem;
    }

    .leaderboard-table thead th {
        white-space: normal;
    }
}

@media (max-width: 48rem) {
    .page-shell {
        padding: 1rem;
    }

    .home-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .home-tools {
        display: block;
    }

    .home-icon-actions {
        justify-content: flex-end;
    }

    .game-header {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
    }

    .game-tutorial-label {
        font-size: 0.75rem;
        line-height: 1.15;
    }

    #gameTutorialArrowPaths > path {
        stroke-width: 3.25;
    }

    .board-score-heading,
    .slot-row {
        grid-template-columns: minmax(0, 1fr) var(--game-score-column-compact);
    }

    .slot-row {
        gap: 0;
        background: var(--cds-border-subtle-01, #c6c6c6);
    }

    .slot-row.is-playing {
        grid-template-columns: minmax(0, 1fr);
    }

    .slot-word,
    .slot-score {
        min-height: var(--game-row-height-compact);
    }

    .slot-word {
        padding: 0.375rem;
    }

    .word-display {
        --row-tile-size: var(--game-tile-size-compact);
    }

    .slot-letter {
        width: var(--game-tile-size-compact);
        font-size: 1.125rem;
    }

    .row-shadow-tile {
        width: var(--game-tile-size-compact);
    }

    .insert-target {
        --insert-target-width: 0.5rem;
        min-height: var(--game-tile-size-compact);
    }

    .total-row {
        grid-template-columns: minmax(0, 1fr) auto var(
                --game-score-column-compact
            );
    }
}

@media (max-width: 36rem) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-shell {
        width: 100%;
        padding: 0.75rem;
    }

    .home-screen {
        gap: 1.5rem;
    }

    .brand-block > .brand-name {
        font-size: 3rem;
    }

    .daily-summary,
    .difficulty-choices {
        grid-template-columns: 1fr;
    }

    .account-screen,
    .account-page-content {
        gap: 1.5rem;
    }

    .account-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-identity {
        padding: 1.5rem 1rem;
    }

    .account-details > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .account-page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .summary-tile {
        min-height: 8rem;
    }

    .leaderboard-card {
        min-height: 0;
        gap: 0;
        padding: 0;
    }

    .leaderboard-heading {
        align-items: center;
    }

    .leaderboard-desktop-label {
        display: none;
    }

    .leaderboard-toggle {
        display: flex;
        min-width: 0;
        flex: 1;
        min-height: 3rem;
        align-items: center;
        justify-content: space-between;
        border: 0;
        background: transparent;
        color: var(--cds-text-primary, #161616);
        padding: 0.75rem 1rem;
        cursor: pointer;
        text-align: left;
    }

    .leaderboard-toggle svg {
        width: 1rem;
        height: 1rem;
        transition: transform 110ms var(--game-ease);
    }

    .leaderboard-card.is-expanded .leaderboard-toggle svg {
        transform: rotate(180deg);
    }

    .leaderboard-content {
        display: none;
        padding: 0 1rem 1rem;
    }

    .leaderboard-full-link {
        padding: 0.75rem 1rem 0.75rem 0;
    }

    .leaderboard-screen {
        gap: 1rem;
    }

    .gallery-screen,
    .gallery-content {
        gap: 1rem;
    }

    .gallery-style-carousel {
        grid-auto-columns: 7.25rem;
        margin-inline: -0.75rem;
        padding-inline: 0.75rem;
    }

    .gallery-style-choice {
        padding: 0.375rem;
    }

    .gallery-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .gallery-actions cds-button,
    .gallery-actions cds-button::part(button) {
        width: 100%;
        max-inline-size: none;
    }

    .leaderboard-table-wrap {
        overflow-x: visible;
    }

    .leaderboard-table {
        min-width: 0;
    }

    .leaderboard-col-rank {
        width: 2.5rem;
    }

    .leaderboard-col-score {
        width: 2.75rem;
    }

    .leaderboard-col-total {
        width: 3.25rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.75rem 0.375rem;
    }

    .leaderboard-table thead th {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .leaderboard-table tbody th,
    .leaderboard-table tbody td {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .leaderboard-header-detail {
        display: none;
    }

    .leaderboard-card.is-expanded .leaderboard-content {
        display: grid;
    }

    .daily-card {
        min-height: 7rem;
    }

    .letter-track {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .letter-track.is-pool-arranged {
        grid-template-columns: repeat(var(--pool-mobile-columns, 12), minmax(0, 1fr));
    }

    .track-dot.is-pool-letter {
        grid-column: var(--pool-mobile-column);
        grid-row: var(--pool-mobile-row);
        font-size: 0.875rem;
    }

    .game-title h1 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .moves-indicator {
        gap: 0.5rem;
        padding-left: 0.5rem;
        font-size: 0.75rem;
    }

    .total-label {
        min-width: 3.75rem;
    }

    .total-row strong {
        padding-right: 0.5rem;
        font-size: 1.5rem;
    }

    .pool-word-list {
        column-gap: 0.75rem;
        row-gap: 0.5rem;
    }

    .share-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .share-stats > div {
        padding: 0.5rem;
    }

    .share-stats .metric-label {
        font-size: 0.875rem;
        line-height: 1.125rem;
    }

    .share-stats strong {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

@media (max-width: 25rem) {
    .share-stats .metric-label {
        font-size: 0.75rem;
    }

    .history-calendar {
        font-size: 0.75rem;
    }

    .slot-letter {
        width: 1.75rem;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .total-row.is-final strong span {
        color: var(--game-accent);
        background: none;
    }

    .game-screen.is-submitted:not(.is-scoring) .completion-message {
        animation-delay: 0ms;
    }
}