.vitesse-perfect-lap { --vpl-ink:#0b0d0e; --vpl-paper:#f7f4ed; --vpl-bronze:#c6a86a; --vpl-rule:rgba(247,244,237,.2); max-width:1440px; margin:clamp(3rem,8vw,8rem) auto; padding:0 clamp(1.25rem,3vw,3rem); color:var(--vpl-paper); }
.vitesse-perfect-lap__heading { display:grid; grid-template-columns:1fr auto; align-items:end; gap:.6rem 2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--vpl-rule); }
.vitesse-perfect-lap__heading p, .vitesse-perfect-lap__heading > span { margin:0; color:var(--vpl-bronze); font-family:Arial,sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.vitesse-perfect-lap__heading h2 { grid-column:1; margin:0; color:#fff; font-family:Georgia,'Times New Roman',serif; font-size:clamp(3.5rem,7vw,7.8rem); line-height:.82; letter-spacing:-.07em; }
.vitesse-perfect-lap__heading > span { max-width:30ch; color:rgba(255,255,255,.72); line-height:1.55; letter-spacing:.09em; }
.vitesse-perfect-lap__courses { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:1.5rem; border:1px solid var(--vpl-rule); background:var(--vpl-rule); }
.vitesse-perfect-lap__courses button { display:grid; grid-template-columns:auto 1fr; gap:.05rem .65rem; min-height:86px; padding:1rem; border:0; border-radius:0; background:#151819; color:#fff; text-align:left; cursor:pointer; }
.vitesse-perfect-lap__courses button span { grid-row:1 / 3; color:var(--vpl-bronze); font:700 .7rem Arial,sans-serif; letter-spacing:.1em; }
.vitesse-perfect-lap__courses button strong { font:700 .78rem Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.vitesse-perfect-lap__courses button small { color:rgba(255,255,255,.62); font:400 .78rem Arial,sans-serif; }
.vitesse-perfect-lap__courses button:hover, .vitesse-perfect-lap__courses button:focus-visible, .vitesse-perfect-lap__courses button.is-selected { background:var(--vpl-bronze); outline:0; }
.vitesse-perfect-lap__courses button.is-selected span, .vitesse-perfect-lap__courses button.is-selected small { color:#fff; }
.vitesse-perfect-lap__game-shell { position:relative; margin-top:1px; overflow:hidden; border:1px solid var(--vpl-rule); background:#121516; touch-action:none; overscroll-behavior:none; }
.vitesse-perfect-lap__canvas { display:block; width:100%; height:auto; background:#121516; }
.vitesse-perfect-lap__hud { position:absolute; z-index:2; top:1rem; left:1rem; display:flex; border:1px solid rgba(247,244,237,.2); background:rgba(6,7,8,.72); backdrop-filter:blur(8px); }
.vitesse-perfect-lap__hud div { display:grid; gap:.3rem; min-width:96px; padding:.7rem .8rem; }
.vitesse-perfect-lap__hud span { color:var(--vpl-bronze); font:700 .58rem Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.vitesse-perfect-lap__hud strong { color:#fff; font:700 .85rem Arial,sans-serif; }
.vitesse-perfect-lap__briefing { position:absolute; z-index:3; top:50%; left:50%; display:grid; justify-items:center; gap:.75rem; width:min(80%,470px); padding:1.6rem; border-left:3px solid var(--vpl-bronze); background:rgba(8,9,10,.88); text-align:center; transform:translate(-50%,-50%); }
.vitesse-perfect-lap__briefing.is-hidden { opacity:0; pointer-events:none; }
.vitesse-perfect-lap__briefing strong { font:700 clamp(2rem,4vw,3.7rem) Georgia,'Times New Roman',serif; line-height:.86; letter-spacing:-.05em; }
.vitesse-perfect-lap__briefing span { color:rgba(255,255,255,.76); font:700 .7rem Arial,sans-serif; letter-spacing:.08em; line-height:1.55; text-transform:uppercase; }
.vitesse-perfect-lap__briefing button, .vitesse-perfect-lap__apex { border:1px solid var(--vpl-bronze); border-radius:0; background:var(--vpl-bronze); color:#fff; font:700 .72rem Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.vitesse-perfect-lap__briefing button { min-height:52px; padding:0 1.2rem; }
.vitesse-perfect-lap__rotate { display:none; }
.vitesse-perfect-lap__apex { position:absolute; z-index:4; right:1rem; bottom:1rem; min-width:190px; min-height:70px; box-shadow:0 14px 32px rgba(0,0,0,.24); touch-action:manipulation; transition:transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease; }
.vitesse-perfect-lap__apex:disabled { opacity:.36; cursor:not-allowed; }
.vitesse-perfect-lap__apex:not(:disabled):active { transform:translateY(2px); }
.vitesse-perfect-lap__apex.is-ready { background:#e0bd76; border-color:#fff; box-shadow:0 0 0 4px rgba(198,168,106,.2), 0 16px 42px rgba(198,168,106,.38); transform:scale(1.045); }
.vitesse-perfect-lap__footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:.9rem; }
.vitesse-perfect-lap__footer p { margin:0; color:rgba(255,255,255,.62); font-size:.82rem; line-height:1.5; }
.vitesse-perfect-lap__footer button { border:0; background:transparent; color:#fff; font:700 .68rem Arial,sans-serif; letter-spacing:.12em; text-decoration:underline; text-underline-offset:.35em; text-transform:uppercase; cursor:pointer; }
.vitesse-perfect-lap:fullscreen { width:100vw; height:100svh; margin:0; padding:0; background:#0b0d0e; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__heading { display:flex; align-items:center; justify-content:space-between; min-height:34px; padding:.45rem .8rem; border:0; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__heading p, .vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__heading > span { display:none; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__heading h2 { margin:0; font-size:1.65rem; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__courses { grid-template-columns:repeat(3,1fr); margin:0; border-right:0; border-left:0; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__courses button { min-height:42px; padding:.38rem .65rem; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__courses button small { display:none; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__game-shell { height:calc(100svh - 77px); min-height:0; margin:0; border:0; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__canvas { width:100%; height:100%; min-height:0; object-fit:fill; }
.vitesse-perfect-lap:fullscreen .vitesse-perfect-lap__footer { display:none; }
body.vitesse-perfect-lap-playing { overflow:hidden!important; height:100vh!important; overscroll-behavior:none; }
@media (max-width:700px) { .vitesse-perfect-lap__heading { grid-template-columns:1fr; } .vitesse-perfect-lap__heading h2 { grid-column:auto; } .vitesse-perfect-lap__courses { grid-template-columns:1fr; } .vitesse-perfect-lap__hud { top:.6rem; left:.6rem; right:.6rem; justify-content:stretch; } .vitesse-perfect-lap__hud div { flex:1; min-width:0; padding:.5rem; } .vitesse-perfect-lap__hud strong { font-size:.72rem; } .vitesse-perfect-lap__canvas { min-height:440px; object-fit:cover; } .vitesse-perfect-lap__apex { right:.65rem; bottom:.65rem; left:.65rem; width:calc(100% - 1.3rem); } .vitesse-perfect-lap__footer { display:block; } .vitesse-perfect-lap__footer button { margin-top:.8rem; } }
@media (pointer:coarse) and (orientation:portrait) { .vitesse-perfect-lap__game-shell { min-height:430px; } .vitesse-perfect-lap__canvas, .vitesse-perfect-lap__hud, .vitesse-perfect-lap__briefing, .vitesse-perfect-lap__apex { opacity:.12; pointer-events:none; } .vitesse-perfect-lap__rotate { position:absolute; z-index:8; inset:0; display:grid; align-content:center; justify-items:center; gap:.7rem; padding:2rem; background:rgba(7,8,9,.9); text-align:center; } .vitesse-perfect-lap__rotate strong { color:#fff; font:700 clamp(2.2rem,11vw,4rem) Georgia,'Times New Roman',serif; line-height:.88; letter-spacing:-.06em; } .vitesse-perfect-lap__rotate span { max-width:28ch; color:var(--vpl-bronze); font:700 .7rem Arial,sans-serif; letter-spacing:.1em; line-height:1.5; text-transform:uppercase; } }
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) { .vitesse-perfect-lap { min-height:100svh; margin:0; padding:0; display:grid; grid-template-rows:auto auto 1fr; background:#0b0d0e; } .vitesse-perfect-lap__heading { display:flex; align-items:center; justify-content:space-between; min-height:34px; padding:.45rem .8rem; border:0; } .vitesse-perfect-lap__heading p, .vitesse-perfect-lap__heading > span { display:none; } .vitesse-perfect-lap__heading h2 { margin:0; font-size:1.65rem; } .vitesse-perfect-lap__courses { grid-template-columns:repeat(3,1fr); margin:0; border-right:0; border-left:0; } .vitesse-perfect-lap__courses button { min-height:42px; padding:.38rem .65rem; } .vitesse-perfect-lap__courses button small { display:none; } .vitesse-perfect-lap__game-shell { min-height:0; height:calc(100svh - 77px); border:0; } .vitesse-perfect-lap__canvas { width:100%; height:100%; min-height:0; object-fit:fill; } .vitesse-perfect-lap__hud { top:.4rem; left:.4rem; right:auto; } .vitesse-perfect-lap__hud div { min-width:68px; padding:.38rem .48rem; } .vitesse-perfect-lap__hud div:last-child { display:none; } .vitesse-perfect-lap__hud span { font-size:.48rem; } .vitesse-perfect-lap__hud strong { font-size:.62rem; } .vitesse-perfect-lap__briefing { padding:1rem; } .vitesse-perfect-lap__briefing strong { font-size:1.8rem; } .vitesse-perfect-lap__briefing span { font-size:.58rem; } .vitesse-perfect-lap__briefing button { min-height:42px; } .vitesse-perfect-lap__apex { right:.45rem; bottom:.45rem; left:auto; width:170px; min-width:0; min-height:52px; font-size:.6rem; } .vitesse-perfect-lap__footer { display:none; } }
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) { body:has(.vitesse-perfect-lap) .site-header, body:has(.vitesse-perfect-lap) .site-footer, body:has(.vitesse-perfect-lap) .page-header, body:has(.vitesse-perfect-lap) .entry-header { display:none!important; } body:has(.vitesse-perfect-lap) .site-main, body:has(.vitesse-perfect-lap) .entry-content { margin:0!important; padding:0!important; } }