:root {
    color-scheme: dark;
    --bg: #0f111a;
    --card: #171a27;
    --card-alt: #1f2335;
    --accent: #6c5ce7;
    --accent-2: #00cec9;
    --text: #f5f6fa;
    --muted: #a4a7b5;
    --shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: radial-gradient(circle at top, #1d2033, var(--bg));
    color: var(--text);
    line-height: 1.6;
    overflow-anchor: none;
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.hero {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.3), rgba(0, 206, 201, 0.18));
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    right: 0;  /* Changed from -80px to 0 */
    top: -60px;
    width: 160px;  /* Reduced width */
    height: 160px; /* Reduced height */
    background: radial-gradient(circle, rgba(108, 92, 231, 0.35), transparent 70%);
    pointer-events: none;
    opacity: 0.7; /* Optional: make it more subtle */
}

/* CTA color tweak: slightly brighter and higher contrast */
.start-page__button {
    background: linear-gradient(135deg, #7f66ff, #00f0dd);
    color: #061226;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    border: none;
}
.start-page__button:hover { transform: translateY(-2px); }


.hero__badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    white-space: nowrap;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text);
    text-decoration: none;
}

.hero__badge--icon {
    padding: 8px 12px;
    border: none;
    cursor: pointer;
}

.hero__badge:hover {
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
    transform: translateY(-1px);
}

.hero__badge.is-active {
    background: rgba(108, 92, 231, 0.3);
}

/* Language Selector */
.language-selector {
    position: relative;
    display: inline-block;
}

.language-selector__toggle {
    cursor: pointer;
}

.language-selector__flag {
    font-size: 1.25rem;
    line-height: 1;
}

.language-selector__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--card);
    border-radius: 12px;
    padding: 8px;
    box-shadow: var(--shadow);
    z-index: 1000;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.language-selector__dropdown[hidden] {
    display: none;
}

.language-selector__option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.25rem;
    line-height: 1;
}

.language-selector__option:hover {
    background: rgba(108, 92, 231, 0.2);
    transform: translateX(-2px);
}

.language-selector__option--active {
    background: rgba(108, 92, 231, 0.3);
}

.language-selector__option-flag {
    display: block;
}


.hero h1 {
    margin: 20px 0 8px;
    font-size: clamp(1.6rem, 3vw, 3rem);
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero h1 span {
    color: var(--text);
}

.hero h1 span span {
    color: var(--accent-2);
}

.hero__title-short {
    display: none;
}

.hero p {
    margin: 0 0 24px;
    color: var(--muted);
}

.hero__info {
 /*   margin: 0 0 24px;  */
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(15, 17, 26, 0.65);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hero__info p {
    margin: 0;
    color: var(--muted);
}

.hero__info a {
    color: var(--accent-2);
    font-weight: 600;
}

.controls {
    display: grid;
    gap: 16px;
    background: var(--card);
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.controls__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

[hidden] {
    display: none !important;
}

.button {
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.button--secondary {
    background: var(--card-alt);
    color: var(--text);
}

.button--ghost {
    background: rgba(255, 255, 255, 0.08);
}

.button--danger {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: white;
}

.button--danger:hover {
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

.button.is-active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.8), rgba(0, 206, 201, 0.8));
}

.button--icon {
    padding: 12px;
    min-width: 48px;
    justify-content: center;
}

.button--icon i {
    margin: 0;
} 

.game-view {
    background: var(--card);
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    gap: 24px;
    justify-items: center;
    text-align: center;
    overflow-anchor: none;
}

.game-card {
    background: var(--card-alt);
    border-radius: 20px;
    padding: 28px;
    width: min(720px, 100%);
    display: grid;
    gap: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    /* Remove contain: layout as it can interfere with positioning */
    /* contain: layout; */
    grid-template-columns: 1fr;
}

.game-card__thumb-frame {
    display: block;
    width: min(300px, 100%);
    margin-inline: auto;
    transition: transform 0.2s ease;
    will-change: transform;
    position: relative;
    grid-row: 2;
    grid-column: 1;
}

.game-card__thumb-frame--dragging {
    transition: none;
}

.game-card__share {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    white-space: pre-line;
}

.game-card__progress {
    width: 100%;
    display: grid;
    gap: 8px;
    justify-items: center;
    grid-row: 1;
    grid-column: 1;
}

.game-card__progress-track {
    width: 100%;
    height: 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.game-card__progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 0.3s ease;
}

.game-card__progress-label {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.game-card__name {
    font-size: 1.2rem; /* Slightly smaller font size to accommodate longer titles */
    line-height: 1.4; /* Proper spacing between lines */
    text-overflow: ellipsis; /* Optional: Use ellipsis for text overflow */
    white-space: normal; /* Allow text to wrap to multiple lines */
    height: 4.0rem; /* Ensure enough space for two lines */
    overflow: hidden; /* Hide overflow text beyond two lines */
    display: -webkit-box; /* Enable webkit box for line clamping */
    -webkit-line-clamp: 2; /* Limit the text to two lines */
    -webkit-box-orient: vertical; /* Specify vertical orientation for the box */
    text-align: center; /* Center-align the text */
    margin: 0 auto; /* Keep title centered */
    grid-row: 3;
    grid-column: 1;
}

.game-card__name--expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: normal;
}

.game-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: contain;
    border-radius: 14px;
    margin-inline: auto;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 17, 26, 0.6);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.game-card__login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.game-card__login .button {
    justify-self: end;
}

.game-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.game-actions__note {
    width: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.game-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Updated Summary Bar Styles */
.summary-bar {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(0, 206, 201, 0.1));
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin-top: -8px; /* Bring it closer to the element above */
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.summary-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(108, 92, 231, 0.3) 20%, 
        rgba(108, 92, 231, 0.3) 80%, 
        transparent 100%
    );
    z-index: 2;
}

.footer {
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.footer span {
    color: var(--text);
    font-weight: 600;
}

.footer .site-version {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0.9;
}

.summary-bar__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.summary-card {
    background: rgba(23, 26, 39, 0.7);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 
                0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 
                0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(108, 92, 231, 0.2);
}

.summary-card__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.summary-card__label i {
    font-size: 1rem;
    line-height: 1;
    color: var(--accent);
}

.summary-card__label-text {
    display: inline;
}

.summary-card__value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Score card specific styling */
.summary-bar__grid .summary-card:nth-child(2) {
    background: linear-gradient(135deg, 
        rgba(108, 92, 231, 0.15), 
        rgba(0, 206, 201, 0.1));
    border-color: rgba(108, 92, 231, 0.2);
}

.summary-bar__grid .summary-card:nth-child(2) .summary-card__value {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.summary-lists {
    display: grid;
    gap: 16px;
}

.summary-lists__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.summary-list {
    background: var(--card);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.summary-list__title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.summary-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.summary-list__item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(15, 17, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.summary-list__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 8/3;
  object-fit: cover;

  /* start hidden — animate into view when the image finishes loading */
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 260ms cubic-bezier(.2,.9,.2,1), transform 260ms cubic-bezier(.2,.9,.2,1);
}

.summary-list__thumb.is-loaded {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.input {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 17, 26, 0.6);
    color: var(--text);
    padding: 10px 16px;
    font-family: inherit;
    min-width: 200px;
}

.input::placeholder {
    color: var(--muted);
}

/* layout for the Steam high-score sync form */
.sync-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.75rem;
    width: 100%; /* ensure the row spans the card so its contents truly center */
}

.sync-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sync-form .input {
    flex: 1 1 200px;
    min-width: 200px;
}

.sync-form button {
    flex: 0 0 auto;
}

/* enforce consistent height among row items */
.sync-row .button,
.sync-row .input {
    height: 2.6rem;
}

/* ensure vertical centering inside elements */
.sync-row .button {
    line-height: 2.6rem;
    padding: 0 1.25rem;
    /* small upward nudge to align with adjacent input field */
}

/* extra minor adjustment for the Steam sync button specifically */
.sync-row #syncSteamBtn {
    margin-top: -0.15rem;
}
.sync-row .input {
    line-height: 1.4rem;
    padding: 0 1rem;
}

.sync-row .input {
    padding: 0 1rem;
}

.sync-row .button {
    padding: 0 1.25rem;
}

.download-notice {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.download-notice--success {
    background: rgba(87, 219, 140, 0.2);
}

/* Critical Error Display */
.critical-error {
    margin: 20px 0;
    padding: 24px;
    border-radius: 14px;
    background: rgba(231, 76, 60, 0.15);
    border: 2px solid rgba(231, 76, 60, 0.3);
    color: var(--text);
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.critical-error__icon {
    font-size: 2rem;
    color: #e74c3c;
    flex-shrink: 0;
}

.critical-error__content {
    flex: 1;
}

.critical-error__title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

.critical-error__message {
    margin: 0 0 12px;
    line-height: 1.6;
    color: var(--text);
}

.critical-error__details {
    margin-top: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 0.9rem;
}

.critical-error__details summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 8px;
    user-select: none;
}

.critical-error__details summary:hover {
    color: var(--accent-2);
}

.critical-error__details p {
    margin: 8px 0 0;
    color: var(--muted);
    font-family: 'Courier New', monospace;
    word-break: break-word;
}

.critical-error__details code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .critical-error {
        flex-direction: column;
        padding: 16px;
    }
    
    .critical-error__icon {
        font-size: 1.5rem;
    }
}

.footer {
    text-align: center;
    color: var(--muted);
}

.footer a {
    color: var(--accent-2);
}

/* Start Page Styles */
.start-page {
    background: var(--card);
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    gap: 24px;
    justify-items: center;
}

.start-page__card {
    background: var(--card-alt);
    border-radius: 20px;
    /* 10px top/bottom padding per design request; horizontal padding unchanged */
    padding: 10px 32px;
    width: min(600px, 100%);
    max-width: 100%;
    display: grid;
    gap: 24px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    text-align: center;
    box-sizing: border-box;
}

.start-page__title {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.3;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.start-page__subtitle {
    margin: -12px 0 0;
    font-size: 1rem;
    color: var(--muted);
    font-weight: 500;
}

/* Challenge Code CSS removed (feature deprecated) */

.start-page__slider-container {
    display: grid;
    gap: 16px;
    padding: 20px 0;
}

.start-page__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    cursor: pointer;
}

.start-page__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.start-page__slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(108, 92, 231, 0.6);
}

.start-page__slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.start-page__slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(108, 92, 231, 0.6);
}

.start-page__value {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.start-page__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 500;
}

.start-page__caption {
    margin: 0;
    padding: 16px 20px;
    background: rgba(108, 92, 231, 0.15);
    border-radius: 14px;
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 500;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(108, 92, 231, 0.2);
    transition: all 0.3s ease;
}

.start-page__button {
    font-size: 1.1rem;
    padding: 16px 32px;
    margin-top: 8px;
}

/* Start button: full/short label support */
.start-page__button .start-btn__label--short { display: none; }
.start-page__button .start-btn__label--full { display: inline; }
@media (max-width: 480px) {
    .start-page__button { padding: 12px 18px; font-size: 1rem; }
    .start-page__button .start-btn__label--full { display: none; }
    .start-page__button .start-btn__label--short { display: inline; }
}

/* Game Count Selection Section */
.start-page__game-count-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(108, 92, 231, 0.2);
}

.start-page__game-count-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 16px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.start-page__game-count-options {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.game-count-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 24px;
    background: rgba(108, 92, 231, 0.1);
    border: 2px solid rgba(108, 92, 231, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.game-count-option:hover {
    border-color: rgba(108, 92, 231, 0.5);
    transform: translateY(-2px);
}

.game-count-option--active {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    border-color: #6c5ce7;
}

.game-count-option__number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.game-count-option--active .game-count-option__number {
    color: white;
}

.game-count-option__label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-count-option--active .game-count-option__label {
    color: rgba(255, 255, 255, 0.9);
}

.start-page__categories-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(108, 92, 231, 0.2);
}

.start-page__categories-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px 0;
    text-align: center;
}

.start-page__categories-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    text-align: center;
    transition: color 0.3s ease;
}

.start-page__categories-subtitle--error {
    color: #ff4757;
    font-weight: 600;
}

.start-page__categories-subtitle--warning {
    color: #f39c12;
    font-weight: 600;
}

.start-page__categories-subtitle--success {
    color: #2ecc71;
    font-weight: 600;
}

.start-page__categories {
    /* category UI removed — reserved for future server-side features */
    display: block;
}

/* Help Section */
.start-page__help {
    margin-top: 32px;
    padding: 24px;
    background: rgba(108, 92, 231, 0.08);
    border-radius: 14px;
    border: 1px solid rgba(108, 92, 231, 0.15);
    text-align: left;
    width: 100%;
}

.start-page__help-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 16px 0;
    text-align: center;
}

.start-page__help p {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.7;
    margin: 0;
}

/* Ensure the top paragraph inside the start-card has no extra top margin so
   padding-top on the card controls the vertical gap precisely */
.start-page__daily-info p {
    margin-top: 0;
} 

.start-page__help a {
    color: var(--accent-2);
    text-decoration: none;
    font-weight: 500;
}

.start-page__help a:hover {
    text-decoration: underline;
}

/* ----- Daily list previews on the start page ----- */
.start-page__yesterday {
    margin-top: 20px;
    color: var(--muted);
}

.start-page__yesterday h3 {
    font-size: 1rem;
    margin: 12px 0;
    color: var(--text);
}

.daily-preview-grid {
    display: grid;
    gap: 8px;
    /* Force 4 capsules per row on all displays; tiles resize responsively but not below 96px */
    grid-template-columns: repeat(4, minmax(96px, 1fr)); /* 4-column responsive grid */
    align-items: start;
    margin-bottom: 12px;
    width: 100%;
}

.daily-preview__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-alt);
    border: 1px solid rgba(255,255,255,0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    aspect-ratio: 2.58 / 1;
}

.daily-preview__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.daily-preview__thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Toggle button for full/compact preview */
.daily-preview__toggle {
    display: inline-block;
    margin-left: 12px;
    margin-bottom: 12px; /* extra spacing underneath the toggle */
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--muted);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.daily-preview__toggle:hover { background: rgba(255,255,255,0.02); color: var(--text); transform: translateY(-1px); }

/* Collapsed = single-row visible (no scrollbar). Expanded = scrollable list with max-height. */
.daily-preview-grid.collapsed {
    max-height: var(--daily-preview-collapsed-height, 80px);
    overflow: hidden;
    transition: max-height 220ms ease;
}
..daily-preview-grid.expanded {
    max-height: var(--daily-preview-expanded-height, 320px);
    overflow-y: auto;
    transition: max-height 220ms ease;
    -webkit-overflow-scrolling: touch;

    /* Reserve gutter for scrollbar so it doesn't overlap the last column (fixes Firefox) */
    scrollbar-gutter: stable;
    /* Fallback padding for overlay/embedded scrollbars on some platforms */
    padding-inline-end: 12px;
}
.daily-preview-grid.expanded:focus { outline: none; }

/* Small, unobtrusive scrollbar for expanded preview */
.daily-preview-grid.expanded::-webkit-scrollbar { width: 10px; height: 8px; }
.daily-preview-grid.expanded::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.04); border-radius: 8px; }
.daily-preview-grid.expanded::-webkit-scrollbar-track { background: transparent; }

.previous-lists {
    margin-top: 6px;
}

.previous-lists__links {
    display: flex;
    gap: 10px;
    justify-content: center; /* center the date links */
    /* Keep the weekday links on a single line; JS will swap to short labels when needed */
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    margin-top: 8px;
    overflow: visible;
}

/* Refresh countdown moved under the previous-list links */
.previous-lists__refresh {
    margin-top: 14px; /* spacing between dates and countdown */
    margin-bottom: 0; /* ensure card padding controls distance to card bottom */
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}
.previous-lists__refresh .start-page__daily-date {
    display: inline-block;
    vertical-align: middle;
}

.previous-list__link {
    color: var(--muted);
    background: transparent;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.03);
    font-size: 0.9rem;
    white-space: nowrap;
}

.previous-list__link:hover {
    color: var(--text);
    background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(0,206,201,0.06));
    transform: translateY(-2px);
}

.previous-list__label--short { display: none; }
.previous-list__label--full { display: inline; }

/* When container has --short class, hide full labels and show short labels */
.previous-lists__links.previous-lists--short .previous-list__label--full { display: none; }
.previous-lists__links.previous-lists--short .previous-list__label--short { display: inline; }

/* When short labels are active reduce padding to help signs fit */
.previous-lists__links.previous-lists--short .previous-list__link { padding: 4px 8px; font-size: 0.88rem; }

/* Media-query fallback: on very narrow viewports force short labels */
@media (max-width: 420px) {
    .previous-lists__links { gap: 6px; }
    .previous-list__label--full { display: none; }
    .previous-list__label--short { display: inline; }
    .previous-list__link { padding: 4px 8px; }
}

/* Responsive grid: keep 4 columns on all viewports (tiles will resize responsively) */
@media (max-width: 480px) {
    .daily-preview-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 481px) and (max-width: 767px) {
    .daily-preview-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .daily-preview-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
    /* Keep 4 columns even on very wide viewports */
    .daily-preview-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Storage Notice */
.start-page__storage-notice {
    margin-top: 16px;
    padding: 16px 20px;
    background: rgba(0, 206, 201, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(0, 206, 201, 0.15);
    display: flex;
    flex-direction: row;     /* icon and text on the same line */
    align-items: center;     /* vertically center icon and text */
    justify-content: center; /* keep group centered in the box */
    gap: 24px;               /* fixed 24px gap between icon and text */
    width: 100%;
    flex-wrap: wrap;         /* allow wrapping if space is constrained */
}

.start-page__storage-notice i {
    color: var(--accent-2);
    font-size: 1.25rem; /* standard icon size for inline layout */
    margin: 0;          /* no extra top margin when inline */
    flex: 0 0 auto;
}

.start-page__storage-notice p {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.45;      /* slightly tighter for compactness */
    flex: 1 1 auto;         /* allow text to shrink/grow */
    min-width: 0;           /* enable truncation/wrapping inside flex */
    text-align: left;       /* keep text to the right of the icon */
    word-break: break-word; /* avoid overflow on long email/URLs */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .start-page__storage-notice {
        padding: 10px 12px;
        gap: 12px;           /* reduced fixed gap on narrow screens */
    }
    .start-page__storage-notice i {
        font-size: 1.05rem;
    }
    .start-page__storage-notice p {
        font-size: 0.82rem;  /* smaller text for phones */
    }
}

@media (max-width: 360px) {
    .start-page__storage-notice p {
        font-size: 0.76rem;  /* extra-small phones */
    }
}

/* FIXED Loading indicator for game images - covers only thumbnail */
.game-card__loading {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    aspect-ratio: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 100;
    background: rgba(23, 26, 39, 0.9);
    border-radius: 14px;
}

/* Catalog-loading indicator for background lazy-load of full gamesMinimal */
.catalog-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 12px;
}

.catalog-loading__spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.catalog-loading__text {
    color: var(--muted);
    font-size: 0.95rem;
}


.game-card__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.game-card__loading-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Dim the game card when loading */
.game-card--loading .game-card__thumb-frame {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.game-card--loading .game-card__name {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Default: show long info, hide short info (desktop/large screens) */
.hero__info-long { display: block; }
.hero__info-short { display: none; }

@media (max-width: 720px) {
    .hero,
    .controls {
        padding: 20px;
    }

    .page {
        padding: 24px 16px 48px;
        gap: 24px;
    }

    .hero__badge {
        padding: 6px 10px;
    }

    .game-view {
        padding: 24px;
    }

    .game-card {
        padding: 20px;
    }

    .game-card__thumb {
        width: 100%;
    }

    .game-card__loading {
        width: 100%;
        max-width: 100%;
    }

    .controls__buttons {
        flex-direction: column;
    }

    .game-actions {
        gap: 8px;
    }

    .game-actions .button {
        padding: 10px 12px;
    }

    .button__text--hide-sm {
        display: none;
    }

    .hero__title-long {
        display: none;
    }
    
    .start-page__categories {
        gap: 6px;
    }
    
    /* category tag sizing removed for compact pages */
    .start-page__categories-title { font-size: 1.1rem; }
    .start-page__categories-subtitle { font-size: 0.9rem; }
    
    /* Challenge section mobile adjustments removed (feature deprecated) */

    .hero__title-short {
        display: inline;
    }

    .hero__info-long { display: none; }
    .hero__info-short { display: inline; }

    .game-card__login {
        grid-template-columns: 1fr;
        align-items: stretch;
        justify-items: stretch;
    }

    .controls__buttons .button,
    .game-card__login .button {
        width: 100%;
        justify-content: center;
    }

    .download-notice {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .summary-bar {
        padding: 10px 12px;
        margin-top: -6px;
        border-radius: 12px;
    }
    
    .summary-bar::before {
        left: 12px;
        right: 12px;
    }
    
    .summary-bar__grid {
        gap: 10px;
    }
    
    .summary-card {
        padding: 10px 6px;
        gap: 4px;
    }

    .summary-card__label {
        font-size: 0.65rem;
        gap: 4px;
    }

    .summary-card__label-text {
        display: inline;
    }
    
    .summary-card__value {
        font-size: 1.1rem;
    }
    
    .summary-card__label .fa-gauge-high {
        display: inline-block !important;
    }

    .footer {
        font-size: 0.55rem;
    }

    .start-page {
        padding: 24px;
    }

    .start-page__card {
        /* reduce vertical padding to match 10px top/bottom requirement */
        padding: 10px 20px;
    }

    .start-page__title {
        font-size: 1.3rem;
    }

    .start-page__value {
        font-size: 2.5rem;
    }

    .start-page__caption {
        font-size: 0.95rem;
        padding: 14px 16px;
        min-height: 50px;
    }
    
    /* Additional mobile adjustments for challenge section removed (feature deprecated) */
}

@media (max-width: 480px) {

    .hero {
        padding: 18px;
    }

    .hero h1 {
        font-size: clamp(1.1rem, 5vw, 1.6rem);
        white-space: normal;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .hero__badges {
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }

    .game-card__name {
        font-size: 1.5rem;
    }

    .input {
        min-width: 0;
        width: 100%;
    }

    .game-actions {
        flex-wrap: wrap;
    }

    .summary-list__items {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
    
    .summary-bar__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .summary-card__label-text {
        display: none;
    }
    
    .summary-card__label i {
        font-size: 1rem;
    }
    
    .summary-card__value {
        font-size: 1rem;
    }

    .game-card__name--expanded {
        -webkit-line-clamp: unset;
        line-clamp: unset;
    }
    
    .game-count-option {
        min-width: 90px;
        padding: 12px 20px;
    }
    
    .game-count-option__number {
        font-size: 1.5rem;
    }
    
    .game-count-option__label {
        font-size: 0.75rem;
    }
    
    /* Small device optimizations */
    .start-page__card {
        padding: 10px 14px;
    }
    
    /* Challenge section mobile styles removed (feature deprecated) */
    
}

@media (max-width: 360px) {
    .page {
        padding: 20px 12px 40px;
    }

    .game-view {
        padding: 20px;
    }

    .game-card {
        padding: 16px;
    }
    
    /* Extra small device adjustments */
    .start-page__card {
        padding: 10px 10px;
    }
    
    /* Extra-small device adjustments for challenge section removed (feature deprecated) */
    
    /* category tag mobile sizing removed */
    

    .hero__badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .button {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .summary-bar {
        padding: 8px 10px;
    }
    
    .summary-bar__grid {
        gap: 6px;
    }
    
    .summary-card {
        padding: 8px 4px;
    }

    .summary-card__value {
        font-size: 0.95rem;
    }
}

/* Fix button states for mobile/desktop */
.button,
.hero__badge,
.language-selector__option {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure consistent transition timing (preserves existing transition properties) */
.hero__badge,
.language-selector__option {
    transition: all 0.2s ease;
}

/* Active state fixes */
.button:active,
.hero__badge:active,
.language-selector__option:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
}

/* Specific button fixes */
#notPlayedBtn:active,
#playedBtn:active,
#prevBtn:active,
#resetBtn:active,
#shareBtn:active,
#downloadBtn:active,
#startGameBtn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
}



/* Focus accessibility */
.button:focus,
.hero__badge:focus,
.language-selector__option:focus {
    outline: none; /* Remove default outline; :focus-visible provides accessible alternative */
}

.button:focus-visible,
.hero__badge:focus-visible,
.language-selector__option:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* Touch active states */
.button.touch-active,
.hero__badge.touch-active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
}

/* Confetti effect for high score */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100
/* Confetti effect for high score */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.9;
    animation: confetti-fall 4s linear infinite;
}
@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0); }
    100% { transform: translateY(100vh) rotate(720deg); }
}