/* Type Racer — flat 2D side-scroller */

.game-mode-type-racer .game-danger-line,
.game-mode-type-racer .game-base-line,
.game-mode-type-racer .game-hud-lives,
.game-mode-type-racer .game-prompt {
    display: none !important;
}

.game-mode-type-racer .game-arena {
    min-height: clamp(360px, 62vh, 520px);
    overflow: hidden;
    border-radius: 14px;
    background: #87ceeb;
    border: 1px solid #cbd5e1;
}

.game-mode-type-racer .game-stage-dock .game-input {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 1.05rem;
}

/* Scene */
.tr-scene {
    --tr-scroll: 0px;
    --tr-speed: 1;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Sky */
.tr-sky {
    position: absolute;
    inset: 0 0 32%;
    background: linear-gradient(180deg, #38bdf8 0%, #bae6fd 55%, #e0f2fe 100%);
}

.tr-clouds {
    position: absolute;
    left: 0;
    right: 0;
    top: 8%;
    height: 22%;
    opacity: 0.85;
    background:
        radial-gradient(ellipse 36px 14px at 10% 50%, #fff, transparent),
        radial-gradient(ellipse 48px 16px at 14% 55%, #fff, transparent),
        radial-gradient(ellipse 30px 12px at 35% 40%, #fff, transparent),
        radial-gradient(ellipse 42px 14px at 38% 48%, #fff, transparent),
        radial-gradient(ellipse 36px 14px at 60% 55%, #fff, transparent),
        radial-gradient(ellipse 50px 16px at 65% 45%, #fff, transparent),
        radial-gradient(ellipse 32px 12px at 85% 50%, #fff, transparent),
        radial-gradient(ellipse 44px 14px at 88% 42%, #fff, transparent);
    background-repeat: repeat-x;
    background-size: 420px 100%;
    background-position: calc(var(--tr-scroll) * -0.15) 0;
}

/* Building skyline — scrolls with road */
.tr-city {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32%;
    height: 30%;
    background-repeat: repeat-x;
    pointer-events: none;
}

.tr-city-back {
    opacity: 0.55;
    background-image:
        linear-gradient(#64748b, #64748b),
        linear-gradient(#475569, #475569),
        linear-gradient(#64748b, #64748b),
        linear-gradient(#334155, #334155),
        linear-gradient(#64748b, #64748b);
    background-size: 50px 55%, 70px 70%, 45px 45%, 60px 80%, 55px 60%;
    background-position:
        calc(var(--tr-scroll) * -0.25) 100%,
        calc(var(--tr-scroll) * -0.25 + 80px) 100%,
        calc(var(--tr-scroll) * -0.25 + 160px) 100%,
        calc(var(--tr-scroll) * -0.25 + 240px) 100%,
        calc(var(--tr-scroll) * -0.25 + 320px) 100%;
    background-repeat: repeat-x;
}

.tr-city-front {
    background-image:
        linear-gradient(#78716c, #78716c),
        linear-gradient(#57534e, #57534e),
        linear-gradient(#a8a29e, #a8a29e),
        linear-gradient(#44403c, #44403c);
    background-size: 65px 75%, 40px 50%, 55px 65%, 48px 55%;
    background-position:
        calc(var(--tr-scroll) * -0.45) 100%,
        calc(var(--tr-scroll) * -0.45 + 100px) 100%,
        calc(var(--tr-scroll) * -0.45 + 200px) 100%,
        calc(var(--tr-scroll) * -0.45 + 280px) 100%;
    background-repeat: repeat-x;
}

.tr-city-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 18px,
        rgba(251, 191, 36, 0.5) 18px,
        rgba(251, 191, 36, 0.5) 22px,
        transparent 22px,
        transparent 55px
    );
    background-position: calc(var(--tr-scroll) * -0.45) 30%;
    opacity: 0.6;
}

/* Ground & road */
.tr-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
}

.tr-sidewalk {
    position: absolute;
    inset: 0 0 48% 0;
    background: #94a3b8;
    border-top: 2px solid #64748b;
}

.tr-road {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    background: #475569;
    border-top: 3px solid #fbbf24;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 40px,
        rgba(255, 255, 255, 0.92) 40px,
        rgba(255, 255, 255, 0.92) 64px,
        transparent 64px,
        transparent 120px
    );
    background-position: calc(var(--tr-scroll) * -1) 50%;
    background-size: 120px 4px;
    background-repeat: repeat-x;
}

/* Four race cars — inside .tr-road area */
.tr-race-cars {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: 2;
    pointer-events: none;
}

.tr-race-car {
    position: absolute;
    left: 5%;
    width: 52px;
    height: 22px;
    transition: left 0.08s linear;
}

.tr-live-car.is-boosting {
    animation: tr-car-boost 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-race-car.is-boosting {
    transition: left 0.05s linear;
}

.tr-race-car.is-boosting .tr-race-car-shape {
    animation: tr-car-boost 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-race-car.is-you.is-boosting .tr-race-car-shape {
    animation: tr-car-boost-strong 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-race-car[data-lane="0"] { bottom: calc(78% - 11px); }
.tr-race-car[data-lane="1"] { bottom: calc(54% - 11px); }
.tr-race-car[data-lane="2"] { bottom: calc(30% - 11px); }
.tr-race-car[data-lane="3"] { bottom: 4px; }

.tr-race-car-label {
    position: absolute;
    left: 0;
    top: -13px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.tr-race-car.is-you .tr-race-car-label {
    color: #dc2626;
}

.tr-race-car.is-leading .tr-race-car-label {
    color: #b45309;
}

.tr-race-car-shape {
    position: absolute;
    inset: 0;
}

.tr-race-car-body {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 36px;
    height: 12px;
    background: var(--car-color, #64748b);
    border-radius: 3px 8px 3px 3px;
    border: 2px solid rgba(0, 0, 0, 0.2);
}

.tr-race-car-cabin {
    position: absolute;
    left: 20px;
    bottom: 14px;
    width: 18px;
    height: 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px 6px 2px 2px;
}

.tr-race-car-wheel {
    position: absolute;
    bottom: 1px;
    width: 10px;
    height: 10px;
    background: #1e293b;
    border: 2px solid #475569;
    border-radius: 50%;
}

.tr-race-car-wheel-f { left: 8px; }
.tr-race-car-wheel-r { left: 30px; }

.tr-scene.is-moving .tr-race-car-wheel {
    animation: tr-wheel-spin calc(0.35s / var(--tr-speed, 1)) linear infinite;
}

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

.tr-scene.is-boost .tr-race-car-wheel {
    animation-duration: calc(0.22s / var(--tr-speed, 1));
}

.tr-scene.is-boost .tr-race-car-body {
    filter: brightness(1.12);
}

@keyframes tr-car-boost {
    0% { transform: translateX(0); }
    45% { transform: translateX(10px); }
    100% { transform: translateX(2px); }
}

@keyframes tr-car-boost-strong {
    0% { transform: translateX(0) scale(1); }
    40% { transform: translateX(20px) scale(1.05); }
    100% { transform: translateX(5px) scale(1); }
}

.tr-race-car.is-finished {
    opacity: 0.75;
}

.tr-race-car.is-leading .tr-race-car-body {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.85);
}

/* HUD */
.tr-hud {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.65rem;
    gap: 0.4rem;
}

/* Live race lobby (simulated) */
.tr-live-race {
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
}

.tr-live-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.tr-live-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: tr-live-pulse 1.4s ease-out infinite;
}

@keyframes tr-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.tr-live-count {
    margin-left: auto;
    font-weight: 600;
    color: #64748b;
    text-transform: none;
    letter-spacing: 0;
}

.tr-live-rows {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.tr-live-row {
    display: grid;
    grid-template-columns: 1.1rem 3.6rem 1fr 2.4rem;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #334155;
}

.tr-live-row.is-you {
    font-weight: 700;
    color: #0f172a;
}

.tr-live-row.is-you .tr-live-name {
    color: #dc2626;
}

.tr-live-row.is-leading .tr-live-rank {
    color: #ca8a04;
}

.tr-live-row.is-finished .tr-live-name {
    opacity: 0.65;
}

.tr-live-rank {
    font-weight: 800;
    color: #94a3b8;
    text-align: center;
}

.tr-live-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-live-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: visible;
}

.tr-live-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #93c5fd, #3b82f6);
    transition: width 0.12s linear;
}

.tr-live-row.is-you .tr-live-fill {
    background: linear-gradient(90deg, #fca5a5, #ef4444);
}

.tr-live-car {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 8px;
    margin: -4px 0 0 -7px;
    background: var(--car-color, #64748b);
    border-radius: 3px 5px 2px 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: left 0.12s linear;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tr-live-car::after {
    content: '';
    position: absolute;
    right: 1px;
    top: -3px;
    width: 5px;
    height: 4px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 2px 3px 0 0;
}

.tr-live-words {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #64748b;
    font-weight: 600;
}

.tr-live-row.is-you .tr-live-words {
    color: #b91c1c;
}

.tr-passage-panel {
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
    max-height: 9rem;
    overflow-y: auto;
}

.tr-passage {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: clamp(0.88rem, 2vw, 1.02rem);
    line-height: 1.7;
    color: #64748b;
    word-break: break-word;
}

.tr-word {
    display: inline;
    border-radius: 3px;
    padding: 0.04rem 0.08rem;
}

.tr-word.is-done {
    color: #16a34a;
}

.tr-word.is-current {
    color: #0f172a;
    background: #bfdbfe;
    box-shadow: 0 0 0 1px #3b82f6;
}

.tr-word.is-current.is-awaiting-space {
    background: #bbf7d0;
    box-shadow: 0 0 0 1px #22c55e;
}

.tr-space {
    display: inline;
    border-radius: 3px;
    padding: 0 0.12rem;
}

.tr-space.is-next {
    background: #fde047;
    box-shadow: 0 0 0 2px #eab308;
    animation: tr-space-pulse 0.85s ease-in-out infinite;
}

@keyframes tr-space-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.tr-word.is-error {
    background: #fecaca;
    color: #991b1b;
}

/* Below-game panels — TypeRacer-style light UI */
.tr-below-panel {
    --tr-page-bg: #ececec;
    --tr-page-surface: #fff;
    --tr-page-border: #c8c8c8;
    --tr-page-text: #333;
    --tr-page-sub: #666;
    --tr-page-link: #105cb6;
    --tr-page-accent: #2a7f2a;
    --tr-page-gold: #b8860b;
    margin-top: 1.25rem;
    padding: 1.1rem 1.35rem 1.35rem;
    background: var(--tr-page-bg);
    border: 1px solid var(--tr-page-border);
    border-radius: 3px;
    color: var(--tr-page-text);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.tr-below-panel.hidden {
    display: none;
}

/* Account CTA */
.tr-account-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    margin-bottom: 1.1rem;
    padding: 0.85rem 1rem;
    background: #fef9e8;
    border: 1px solid #e8d9a8;
    border-radius: 3px;
}

.tr-account-banner-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #444;
}

.tr-account-cta-btn {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    background: linear-gradient(#fefefe, #e8e8e8);
    border: 1px solid #aaa;
    border-radius: 3px;
    color: #222;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tr-account-cta-btn:hover {
    background: linear-gradient(#fff, #f0f0f0);
    text-decoration: none;
}

/* Race results */
.tr-end-title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 400;
    color: #222;
}

.tr-standings {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.tr-standing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #d8d8d8;
    font-size: 0.98rem;
}

.tr-standing:last-child {
    border-bottom: none;
}

.tr-standing-name {
    font-weight: 600;
    color: #222;
}

.tr-standing-name.is-you {
    color: var(--tr-page-link);
}

.tr-standing-you-tag {
    font-weight: 400;
    color: var(--tr-page-sub);
    font-size: 0.9em;
}

.tr-standing-place {
    text-align: right;
    white-space: nowrap;
    color: var(--tr-page-sub);
}

.tr-standing.is-first .tr-standing-place {
    color: var(--tr-page-accent);
    font-weight: 700;
}

.tr-standing-wpm {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 4.5rem;
}

.tr-results-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0.75rem 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d0d0d0;
}

.tr-btn-link {
    color: var(--tr-page-link);
    font-size: 0.95rem;
    text-decoration: underline;
}

.tr-btn-link:hover {
    color: #0a3d7a;
}

.tr-btn-race {
    padding: 0.35rem 0.85rem;
    background: linear-gradient(#fefefe, #e4e4e4);
    border: 1px solid #999;
    border-radius: 3px;
    color: #222;
    font-family: inherit;
    font-size: 0.92rem;
    cursor: pointer;
}

.tr-btn-race:hover {
    background: linear-gradient(#fff, #efefef);
}

.tr-race-summary {
    font-size: 0.92rem;
    line-height: 1.55;
}

.tr-race-quote-label {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: #444;
}

.tr-race-text-snippet {
    margin: 0 0 1rem;
    padding: 0.65rem 0.75rem;
    background: var(--tr-page-surface);
    border: 1px solid #ddd;
    border-radius: 2px;
    color: #444;
    font-style: italic;
}

.tr-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem 1.25rem;
    margin: 0;
}

.tr-stats-grid > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
}

.tr-stats-grid dt {
    margin: 0;
    font-weight: 700;
    color: #444;
}

.tr-stats-grid dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: #222;
}

/* Leaderboard panel */
.tr-leaderboard-panel {
    margin-top: 0.75rem;
}

.tr-lb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.35rem;
}

.tr-lb-toolbar h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 400;
    color: #222;
}

.tr-lb-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
}

.tr-lb-refresh {
    padding: 0.2rem 0.55rem;
    background: linear-gradient(#fefefe, #e4e4e4);
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 0.8rem;
    cursor: pointer;
    color: #333;
}

.tr-lb-refresh:hover {
    background: #f5f5f5;
}

.tr-lb-auto {
    color: var(--tr-page-sub);
}

.tr-lb-sub {
    margin: 0 0 0.35rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    color: var(--tr-page-sub);
}

.tr-lb-full-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    color: var(--tr-page-link);
    text-decoration: none;
}

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

.tr-lb-you {
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.75rem;
    background: #e8f4e8;
    border: 1px solid #b8d4b8;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    color: #2a5a2a;
}

.tr-lb-you strong {
    color: #1a4a1a;
}

.tr-lb-note,
.tr-lb-empty {
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.75rem;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    color: #555;
}

.tr-lb-note a {
    color: var(--tr-page-link);
    font-weight: 600;
    text-decoration: none;
}

.tr-lb-note a:hover {
    text-decoration: underline;
}

.tr-leaderboard-body {
    overflow-x: auto;
    background: var(--tr-page-surface);
    border: 1px solid #bbb;
    border-radius: 2px;
}

.tr-lb-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    color: #333;
}

.tr-lb-table th,
.tr-lb-table td {
    padding: 0.45rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

.tr-lb-table thead th {
    background: #f0f0f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #555;
    border-bottom: 1px solid #ccc;
}

.tr-lb-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.tr-lb-table tbody tr:hover {
    background: #f3f8ff;
}

.tr-lb-table tr.is-me {
    background: #fff8dc !important;
}

.tr-lb-table tr:last-child td {
    border-bottom: none;
}

.tr-lb-table .col-rank {
    width: 2rem;
    text-align: center;
    font-weight: 700;
    color: #888;
}

.tr-lb-name {
    color: var(--tr-page-link);
    text-decoration: none;
    font-weight: 600;
}

.tr-lb-name:hover {
    text-decoration: underline;
}

.tr-lb-user {
    font-weight: 400;
    color: #777;
}

.tr-lb-wpm {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tr-lb-when {
    color: #666;
    font-size: 0.82rem;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .tr-standing {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }

    .tr-standing-place {
        grid-column: 2;
        grid-row: 1;
    }

    .tr-standing-wpm {
        grid-column: 2;
        grid-row: 2;
    }
}

.script-tamil .tr-passage {
    font-family: 'Noto Sans Tamil', 'Latha', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    .tr-race-car-wheel,
    .tr-live-pulse {
        animation: none !important;
    }
}