/* AMSites Traffic Racer — game frontend Colors/fonts come from --amsites-tr-* custom properties printed in by Appearance_Settings::print_css_variables(). Edit the palette from wp-admin > Traffic Racer > Appearance, not here. */ .amsites-tr-root { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; margin: 0 auto; background: var(--amsites-tr-bg, #1A1C20); border-radius: var(--amsites-tr-radius, 10px); overflow: hidden; font-family: var(--amsites-tr-font-body, sans-serif); color: var(--amsites-tr-text, #EDEFF2); user-select: none; touch-action: none; } .amsites-tr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .amsites-tr-ui { position: absolute; inset: 0; pointer-events: none; /* individual children opt back in */ } .amsites-tr-ui * { box-sizing: border-box; } .amsites-tr-ui button, .amsites-tr-ui a, .amsites-tr-ui input, .amsites-tr-ui select { pointer-events: auto; } /* ---------- Shared screen/panel look ---------- */ .tr-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(180deg, rgba(26,28,32,.55), rgba(26,28,32,.85)); pointer-events: auto; padding: 24px; text-align: center; } .tr-title { font-family: var(--amsites-tr-font-display, sans-serif); font-weight: 700; font-size: clamp(28px, 6vw, 48px); color: var(--amsites-tr-primary, #FF8A34); margin: 0; } .tr-btn { font-family: var(--amsites-tr-font-body, sans-serif); font-weight: 600; font-size: 16px; color: #111; background: var(--amsites-tr-primary, #FF8A34); border: 0; border-radius: var(--amsites-tr-radius, 10px); padding: 12px 28px; cursor: pointer; min-width: 180px; } .tr-btn:hover { filter: brightness(1.08); } .tr-btn.tr-btn-secondary { background: var(--amsites-tr-surface, #24272D); color: var(--amsites-tr-text, #EDEFF2); border: 1px solid var(--amsites-tr-text-muted, #9AA0AA); } .tr-btn:disabled { opacity: .45; cursor: not-allowed; } .tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; width: 100%; max-width: 640px; } .tr-tile { background: var(--amsites-tr-surface, #24272D); border-radius: var(--amsites-tr-radius, 10px); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; border: 2px solid transparent; } .tr-tile.is-selected { border-color: var(--amsites-tr-accent, #3FD6C8); } .tr-tile.is-locked { opacity: .5; cursor: not-allowed; } .tr-tile-name { font-family: var(--amsites-tr-font-display, sans-serif); font-weight: 600; } .tr-tile-price { font-size: 12px; color: var(--amsites-tr-text-muted, #9AA0AA); } /* ---------- HUD (during a run) ---------- */ .tr-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--amsites-tr-font-display, sans-serif); } .tr-hud-topleft, .tr-hud-topright { position: absolute; top: 12px; display: flex; flex-direction: column; gap: 4px; } .tr-hud-topleft { left: 14px; } .tr-hud-topright { right: 14px; text-align: right; } .tr-hud-label { font-size: 11px; font-family: var(--amsites-tr-font-body, sans-serif); color: var(--amsites-tr-text-muted, #9AA0AA); } .tr-hud-value { font-size: 22px; font-weight: 700; color: var(--amsites-tr-accent, #3FD6C8); } .tr-hud-value.tr-hud-value-up { color: var(--amsites-tr-success, #3FD68C); } .tr-hud-pause { position: absolute; top: 10px; right: 10px; pointer-events: auto; background: rgba(0,0,0,.35); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; } /* ---------- Touch controls (mobile/tablet) ---------- */ .tr-touch-steer { position: absolute; inset: 0 0 90px 0; pointer-events: auto; } .tr-pedals { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 16px; pointer-events: none; } .tr-pedal { pointer-events: auto; width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; } .tr-pedal:active { background: rgba(255,138,52,.55); } /* Hide touch pedals on devices that clearly have a keyboard/mouse only. */ @media (hover: hover) and (pointer: fine) { .tr-pedals { display: none; } } .tr-keyboard-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--amsites-tr-text-muted, #9AA0AA); } @media (hover: none) { .tr-keyboard-hint { display: none; } } /* ---------- Result screen breakdown ---------- */ .tr-result-table { width: 100%; max-width: 420px; background: var(--amsites-tr-surface, #24272D); border-radius: var(--amsites-tr-radius, 10px); padding: 16px 20px; font-size: 14px; } .tr-result-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .tr-result-row:last-child { border-bottom: 0; font-weight: 700; color: var(--amsites-tr-success, #3FD68C); } .tr-ad-slot { pointer-events: auto; max-width: 100%; margin: 8px 0; }