/* Portrait racing cockpit, shared by local and room games. */
.f1scene.f1-pro{background:radial-gradient(ellipse at 50% 12%,#243a55 0,transparent 48%),linear-gradient(165deg,#101b2d,#080d17 65%);padding:62px 18px 28px;color:#f4f8ff;min-height:100%;isolation:isolate}
.f1-pro .f1grid,.f1-pro .f1glow{display:none}
.f1-pro .f1hud{gap:20px}.f1-pro .f1title{font-size:33px;letter-spacing:-1px;text-shadow:none}.f1-pro .f1title b{color:#ff4b52}.f1-pro .f1title small{font-size:9px;letter-spacing:4px;color:#91a5bf;margin-top:10px}
.f1-pro .f1stage{gap:20px;padding-top:16px}.f1-pro .f1gantry{position:relative;gap:clamp(7px,2.8vw,13px);padding:19px 16px;background:linear-gradient(#3a4656,#121b29 35%,#090e17);border:1px solid #526076;border-bottom:5px solid #070c14;border-radius:18px;box-shadow:0 18px 32px #0008,inset 0 2px #ffffff30}
.f1-pro .f1gantry:before,.f1-pro .f1gantry:after{content:'';position:absolute;top:35%;width:40px;height:10px;background:linear-gradient(#667487,#202c3b);z-index:-1}.f1-pro .f1gantry:before{right:100%}.f1-pro .f1gantry:after{left:100%}
.f1-pro .f1col{padding:5px;background:#05080e;border-radius:30px;gap:9px;transform:none}
.f1-pro .f1l{width:clamp(28px,8vw,39px);height:clamp(28px,8vw,39px);background:radial-gradient(circle at 35% 30%,#422326,#190d13 65%);border:1px solid #4a2a30;position:relative}
.f1-pro .f1l:after{content:'';position:absolute;inset:4px;border-radius:50%;background:radial-gradient(#ffffff20 1px,transparent 1.4px);background-size:5px 5px}
.f1-pro .f1l.on{background:radial-gradient(circle at 38% 30%,#ffc0a3,#ff343d 48%,#bc061b);box-shadow:0 0 22px #ff344baa,inset 0 2px 5px #fff8;border-color:#ff7b74}
.f1-pro .f1estado{min-height:64px;display:flex;flex-direction:column;justify-content:center;font-size:25px;letter-spacing:-.6px}.f1-pro .f1estado small{font-size:12px;color:#a8b7ca;font-weight:500;letter-spacing:0}
.f1-pro .f1estado.ok{font-size:49px;font-variant-numeric:tabular-nums}.f1-pro .f1estado.go{color:#79ffb3;font-size:49px;text-shadow:0 0 28px #49ff9940}
.f1-pro .f1btn{min-height:74px;border-radius:20px;background:linear-gradient(145deg,#ff6b65,#ed274c);border:1px solid #ff9b9570;box-shadow:0 7px 0 #841731,0 15px 35px #e629492b;font-size:20px;touch-action:manipulation;user-select:none}
.f1-pro[data-phase=go] .f1btn{background:linear-gradient(140deg,#a6ffcc,#34d991);color:#07382b;border-color:#bfffe2;box-shadow:0 7px 0 #11714f,0 10px 40px #3ae8a33a}
.f1-pro .f1btn:active{transform:translateY(4px);box-shadow:0 3px 0 #841731}.f1-pro .f1btn.wait{background:#243247;box-shadow:0 5px #121c2c}
.f1-rule{font-size:11px;color:#92a6bf;text-align:center}
.f1-pro .f1board{width:100%;box-sizing:border-box;gap:12px;margin:92px 0 0;padding:16px;border:1px solid #42557066;border-radius:22px;background:linear-gradient(140deg,#1c2b40e8,#101a2de8);backdrop-filter:blur(10px)}
.f1-pro .f1boardh{color:#91a8c6;letter-spacing:2px;font-size:9px}
.f1-pro .f1best{box-sizing:border-box;background:linear-gradient(120deg,#283e59,#172538);border:1px solid #4d70924d;border-radius:16px;padding:14px}.f1-pro .f1best .bt b{font-size:28px}.f1-pro .f1best .bt small{color:#9aafca;font-size:10px}.f1-pro .f1best .bp{color:#afffcf;background:#3fea9820}
.f1-pro .f1tab{border:0;background:#080f1c70;color:#a7bbd7;font-size:12px}.f1-pro .f1tab.on{background:#f64a61;color:white}
.f1-pro .f1row{border:1px solid #7898c018;background:#93b2e006;border-radius:12px;padding:12px 9px;gap:7px;font-size:12px}.f1-pro .f1row .ms{font-size:15px;min-width:67px}.f1-pro .f1row .gap{font-size:10px;color:#8dabc7}.f1-pro .f1row.yo{border-color:#60e7ab70;background:#36d89010}
.f1-pro .f1row:first-child{background:linear-gradient(100deg,#fbc3481a,#101d31);border-color:#fbc34850}
.f1-empty{font-size:12px;color:#a8bad2;text-align:center;padding:20px 6px;line-height:1.6}.f1-empty small{display:block;font-size:10px}
.f1-sound{position:absolute;top:18px;left:18px;background:#25354d;border:1px solid #52678570;color:#c6d5e9;border-radius:30px;padding:9px 12px;font-size:9px;font-weight:800;z-index:9}
.f1-circuit{position:absolute;top:450px;left:0;right:0;height:95px;overflow:hidden;z-index:0;pointer-events:none;background:linear-gradient(transparent,#24334960,transparent)}
.f1-track-lines{position:absolute;inset:25px 0;border-block:2px solid #64768b50;background:repeating-linear-gradient(90deg,transparent 0 45px,#a4b3c050 45px 78px,transparent 78px 116px) center/100% 2px no-repeat}
.f1-car{position:absolute;left:20%;top:30px;width:77px;height:35px;transition:transform .65s cubic-bezier(.2,.7,.3,1);filter:drop-shadow(0 6px 4px #0008)}
.f1-car b{position:absolute;inset:10px 0;background:linear-gradient(#ff9595,#ef304c 45%,#981126);clip-path:polygon(0 15%,65% 0,100% 40%,100% 60%,65% 100%,0 85%)}
.f1-car i,.f1-car em{position:absolute;top:0;width:13px;height:35px;background:linear-gradient(#030812 0 25%,#e63d52 25% 75%,#030812 75%);border-radius:4px}.f1-car i{left:9px}.f1-car em{right:14px}
.f1-finish{position:absolute;right:17%;top:19px;width:12px;height:61px;opacity:.5;background:conic-gradient(#fff 25%,#182538 0 50%,#fff 0 75%,#182538 0) 0 0/12px 12px}
.f1-pro[data-phase=ok] .f1-car{transform:translateX(310px)}.f1-pro[data-phase=nula] .f1-car{transform:translateX(-20px)}
.f1-pro .su-f1-par{margin-top:90px;width:100%}.f1-pro .su-f1-fila{background:#24364b80;border-radius:12px;padding:10px;margin-bottom:5px}.f1-pro .su-f1-ronda{font-size:11px;color:#a6bedb}
@media(max-width:360px){.f1scene.f1-pro{padding-inline:12px}.f1-pro .f1gantry{gap:6px;padding:14px 10px}.f1-pro .f1row .gap{display:none}}
@media(prefers-reduced-motion:reduce){.f1-pro *{transition:none!important;animation:none!important}}

.f1-pro .f1-circuit{position:relative;top:auto;left:auto;right:auto;width:calc(100% + 36px);height:78px;flex:none;margin:0 -18px}.f1-pro .f1board{margin-top:0}.f1-pro .su-f1-par{margin-top:0}

/* The scene must grow with the ranking inside the app scroll container. */
#jgBody:has(>.f1-pro){min-height:0;overflow-y:auto!important;overflow-x:hidden;touch-action:pan-y}
#jgBody>.f1scene.f1-pro{flex:0 0 auto;height:auto;min-height:100%;overflow:visible}