/* ======================================================================
   DRIVE SLOW RALLY (v1, Oct 2026) — the game inside the Arcade console's
   screen; on phones/tablets it takes the whole screen in landscape.
   ====================================================================== */
.rally{position:absolute;inset:0;z-index:5;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.rally__canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}
.rally__touch,.rally__exit,.rally__rotate,.rally__skip{display:none}

/* name entry / voucher */
.rally__entry{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:min(92%,380px);display:grid;gap:8px;
  padding:14px 16px;border:2px solid #3df07a;border-radius:6px;background:rgba(4,10,6,.94);color:#c8ffd6;
  font:700 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;box-shadow:0 0 24px rgba(61,240,122,.25)}
.rally__entry[hidden]{display:none}
.rally__entry-title{margin:0;color:#ffcf3a;font-size:14px}
.rally__entry-title b{margin-left:6px;color:#fff}
.rally__entry-sub{margin:0;color:#9df5b4;font-weight:600;letter-spacing:.02em}
.rally__entry label{display:grid;gap:4px;color:#3df07a}
.rally__entry label[hidden]{display:none}
.rally__entry small{color:#86c99a;font-weight:500;letter-spacing:.02em}
.rally__entry input{min-height:40px;padding:0 10px;border:1px solid #3df07a;border-radius:4px;background:#000;color:#fff;font:inherit;font-size:16px;text-transform:uppercase}
.rally__entry input[type=email]{text-transform:none}
.rally__entry-actions{display:flex;gap:8px}
.rally__entry button{flex:1;min-height:42px;border:1px solid #3df07a;border-radius:4px;background:#103a1d;color:#c8ffd6;font:inherit;cursor:pointer}
.rally__entry button[type=submit]{background:#2fbf5a;color:#04130a}
.rally__entry button:disabled{opacity:.5}
.rally__entry-msg{margin:0;min-height:1.3em;color:#ffcf3a;word-break:break-word}

/* ---- phones / tablets: full screen, landscape, on-screen pedals ---- */
html.rally-full,html.rally-full body{overflow:hidden!important}
html.rally-full .rally{position:fixed;inset:0;z-index:10000}
html.rally-full .rally__canvas{width:100vw;height:100vh;height:100dvh}
html.rally-full .rally__exit{display:flex;position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:3;
  width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:18px}
.rally.is-touch .rally__touch{display:flex;position:absolute;inset:auto 0 0 0;z-index:2;justify-content:space-between;align-items:flex-end;
  padding:0 max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));pointer-events:none}
/* touch controls: a vintage 16-bit pad — D-pad left, A/B face buttons right */
.rally__pad{position:relative;pointer-events:auto;padding:14px;border-radius:46% 46% 40% 40%/50% 50% 42% 42%;
  background:radial-gradient(120% 90% at 40% 25%,rgba(92,92,104,.78),rgba(38,38,46,.82) 70%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -6px 10px rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.5)}
.rally__pad button{touch-action:none;-webkit-tap-highlight-color:transparent;font:900 18px/1 'Arial Black',Impact,sans-serif;cursor:pointer}
.rally__dpad{--s:clamp(40px,8.5vw,58px);position:relative;display:grid;grid-template-columns:repeat(3,var(--s));grid-template-rows:repeat(3,var(--s));
  filter:drop-shadow(0 3px 0 #0b0b0f) drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.rally__dpad::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.35) 55%,transparent 72%);z-index:-1}
.rally__dpad button,.rally__arm,.rally__hub{background:linear-gradient(#3a3a42,#24242a);border:0;color:transparent}
.rally__arm--up{grid-area:1/2;border-radius:7px 7px 0 0}
.rally__arm--down{grid-area:3/2;border-radius:0 0 7px 7px}
.rally__hub{grid-area:2/2;background:radial-gradient(circle at 50% 50%,#1c1c21 0 30%,#2c2c33 32%)}
.rally__dpad button{position:relative;padding:0;margin:0}
.rally__dpad button[data-k=left]{grid-area:2/1;border-radius:7px 0 0 7px}
.rally__dpad button[data-k=right]{grid-area:2/3;border-radius:0 7px 7px 0}
.rally__dpad i,.rally__arm::after{position:absolute;left:50%;top:50%;width:0;height:0;border:7px solid transparent;transform:translate(-50%,-50%)}
.rally__dpad button[data-k=left] i{border-right:10px solid #8b8b96;border-left-width:0}
.rally__dpad button[data-k=right] i{border-left:10px solid #8b8b96;border-right-width:0}
.rally__arm{position:relative}
.rally__arm--up::after{content:"";border-bottom:10px solid #5e5e68;border-top-width:0}
.rally__arm--down::after{content:"";border-top:10px solid #5e5e68;border-bottom-width:0}
.rally__dpad button.is-down{background:linear-gradient(#1d1d22,#2a2a31);transform:translateY(2px)}
.rally__dpad button.is-down i{border-left-color:#3df07a;border-right-color:#3df07a}
.rally__ab{display:flex;align-items:flex-end;gap:clamp(14px,3vw,22px);transform:rotate(-18deg);padding:4px 6px}
.rally__ab-cell{display:flex;flex-direction:column;align-items:center;gap:6px}
.rally__ab-cell--a{transform:translateY(-22px)}
.rally__ab-cell em{font:800 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#c7c7d2;font-style:normal;text-shadow:0 1px 0 #000}
.rally__ab button{width:clamp(58px,12vw,82px);height:clamp(58px,12vw,82px);border-radius:50%;border:0;color:rgba(0,0,0,.45);
  font-size:clamp(18px,3.4vw,24px);
  box-shadow:inset 0 3px 2px rgba(255,255,255,.45),inset 0 -5px 6px rgba(0,0,0,.35),0 4px 0 #120c14,0 7px 8px rgba(0,0,0,.55)}
.rally__ab button[data-k=gas]{background:radial-gradient(circle at 38% 32%,#ff8a7a,#d8321f 60%,#9d1d10)}
.rally__ab button[data-k=brake]{background:radial-gradient(circle at 38% 32%,#b9a6ff,#6a4fd0 60%,#3f2c8e)}
.rally__ab button.is-down{transform:translateY(3px);box-shadow:inset 0 2px 2px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.4),0 1px 0 #120c14,0 2px 3px rgba(0,0,0,.5)}
@media (orientation:portrait){
  html.rally-full .rally__rotate{display:flex;position:absolute;inset:0;z-index:6;align-items:center;justify-content:center;background:#05080a;color:#c8ffd6;text-align:center;padding:24px}
  html.rally-full .rally__rotate div{display:grid;gap:12px;font:700 13px/1.5 ui-monospace,Menlo,monospace}
  html.rally-full .rally__rotate b{color:#ffcf3a;font-size:18px;letter-spacing:.1em}
  html.rally-full .rally__rotate div::before{content:"⟳";font-size:52px;color:#3df07a;animation:rally-rot 1.6s ease-in-out infinite}
}
@keyframes rally-rot{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(90deg)}}

html.rally-full .rally__skip{display:flex;position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:3;
  height:40px;padding:0 14px;align-items:center;border:1px solid rgba(255,255,255,.5);border-radius:20px;background:rgba(0,0,0,.5);color:#fff;font:700 13px/1 ui-monospace,Menlo,monospace}
.rally__pad--pedals{padding:26px 16px 18px 12px;border-radius:40% 46% 46% 40%/46% 50% 50% 46%}
.rally__pad--pedals .rally__ab{transform:rotate(-18deg) translateY(4px)}
@media (max-height:420px){.rally__dpad{--s:clamp(36px,10vh,50px)}.rally__ab button{width:clamp(52px,15vh,70px);height:clamp(52px,15vh,70px)}}
/* v4: the 3D layer under the HUD */
.rally__gl{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.rally__canvas{position:relative;z-index:1;background:transparent!important}

/* v5: the 3D is drawn at the console's 224 lines and scaled up blocky */
.rally__gl{image-rendering:pixelated;image-rendering:crisp-edges}
/* the voucher on screen after a new #1 */
.rally__voucher{display:grid;gap:6px;padding:10px;border:2px dashed #ffcf3a;border-radius:6px;background:rgba(255,207,58,.08)}
.rally__voucher[hidden]{display:none}
.rally__voucher-head{margin:0;color:#ffcf3a;font-weight:800;letter-spacing:.08em}
.rally__voucher-row{display:flex;gap:8px;align-items:center}
.rally__voucher-row code{flex:1;padding:8px 10px;border-radius:4px;background:#000;color:#fff;font:800 18px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-align:center;user-select:all;-webkit-user-select:all}
.rally__voucher-row button{flex:none;min-height:38px;padding:0 12px}
.rally__voucher-sub{margin:0;color:#c8ffd6;font-weight:500;letter-spacing:.02em}
.rally__voucher-sub a{color:#ffcf3a}
.rally__entry button[hidden]{display:none}

/* ======================================================================
   v6: phones — the picture and the controller never overlap.
   Upright: screen on top, controller body underneath (handheld style).
   Sideways: screen in the middle, D-pad on the left, A/B on the right.
   ====================================================================== */
.rally__view{position:absolute;inset:0}
.rally__view .rally__canvas{width:100%;height:100%}
html.rally-full .rally__view .rally__canvas{width:100%;height:100%}
.rally__rotate{display:none!important}
/* inside the TV on the page, no on-screen pad — tap the screen to go full screen */
.rally.is-touch .rally__touch{display:none}
.rally__sys{display:none}

html.rally-full .rally.is-touch{display:grid;background:
  radial-gradient(140% 70% at 50% 0%,#3b3b44 0%,#25252c 55%,#18181d 100%)}
html.rally-full .rally.is-touch .rally__view{position:relative;inset:auto;background:#000;overflow:hidden;
  box-shadow:0 0 0 3px #0c0c10,0 0 0 5px #45454f,inset 0 0 18px rgba(0,0,0,.6)}
html.rally-full .rally.is-touch .rally__touch{display:flex;position:static;inset:auto;padding:0;pointer-events:none}
html.rally-full .rally.is-touch .rally__sys{display:flex;pointer-events:auto;gap:18px;justify-content:center}
.rally__sys span{display:flex;flex-direction:column;align-items:center;gap:5px}
.rally__sys em{font:800 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;color:#a9a9b6;font-style:normal;text-shadow:0 1px 0 #000}
html.rally-full .rally.is-touch .rally__sys button{display:block;position:static;width:46px;height:14px;padding:0;border:0;border-radius:8px;
  background:linear-gradient(#55555f,#2c2c33);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 #0b0b0f,0 3px 5px rgba(0,0,0,.5);
  transform:rotate(-24deg);color:transparent;font-size:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.rally-full .rally.is-touch .rally__sys button:active{transform:rotate(-24deg) translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 0 #0b0b0f}
/* the pads drop their floating bubbles: they sit on the controller body now */
html.rally-full .rally.is-touch .rally__pad{background:none;box-shadow:none}

/* ---- upright ---- */
@media (orientation:portrait){
  html.rally-full .rally.is-touch{grid-template-rows:auto 1fr;grid-template-columns:100%;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  html.rally-full .rally.is-touch .rally__view{width:100%;aspect-ratio:320/224;max-height:58dvh;justify-self:center}
  html.rally-full .rally.is-touch .rally__touch{flex-wrap:wrap;align-content:center;justify-content:space-between;align-items:center;
    row-gap:clamp(18px,5dvh,44px);padding:12px clamp(6px,3vw,20px) max(14px,env(safe-area-inset-bottom))}
  html.rally-full .rally.is-touch .rally__sys{order:-1;flex:1 0 100%}
  html.rally-full .rally.is-touch .rally__dpad{--s:clamp(44px,14vw,64px)}
  html.rally-full .rally.is-touch .rally__ab button{width:clamp(58px,17vw,84px);height:clamp(58px,17vw,84px)}
  html.rally-full .rally.is-touch .rally__touch::before{content:"DRIVE SLOW";order:-2;flex:1 0 100%;text-align:center;
    font:900 italic 13px/1 'Arial Black',Impact,sans-serif;letter-spacing:.3em;color:#6d6d79;text-shadow:0 1px 0 rgba(255,255,255,.08),0 -1px 0 #000}
}
/* ---- sideways ---- */
@media (orientation:landscape){
  html.rally-full .rally.is-touch{--side:clamp(150px,22vw,230px);grid-template-columns:var(--side) minmax(0,1fr) var(--side);grid-template-rows:100%;
    padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  html.rally-full .rally.is-touch .rally__view{grid-column:2;grid-row:1;width:100%;height:100%;max-width:calc(100dvh * 1.6);justify-self:center}
  html.rally-full .rally.is-touch .rally__touch{display:contents}
  html.rally-full .rally.is-touch .rally__pad--steer{grid-column:1;grid-row:1;align-self:center;justify-self:center;margin-top:12dvh}
  html.rally-full .rally.is-touch .rally__pad--pedals{grid-column:3;grid-row:1;align-self:center;justify-self:center;margin-top:12dvh}
  html.rally-full .rally.is-touch .rally__sys{grid-column:1/4;grid-row:1;align-self:start;justify-content:space-between;
    padding:max(12px,env(safe-area-inset-top)) 0 0;width:100%;pointer-events:none}
  html.rally-full .rally.is-touch .rally__sys span{pointer-events:auto;width:var(--side)}
  html.rally-full .rally.is-touch .rally__dpad{--s:clamp(36px,min(12dvh,calc(var(--side) / 3.8)),56px)}
  html.rally-full .rally.is-touch .rally__ab button{width:clamp(48px,min(17dvh,calc(var(--side) / 2.9)),78px);height:clamp(48px,min(17dvh,calc(var(--side) / 2.9)),78px)}
}
/* v6 sizing: both pads side by side when upright; nothing spills when sideways */
html.rally-full .rally.is-touch .rally__pad{padding:8px}
html.rally-full .rally.is-touch .rally__pad--pedals .rally__ab{transform:rotate(-18deg) translateY(6px);gap:12px}
@media (orientation:portrait){
  html.rally-full .rally.is-touch .rally__dpad{--s:clamp(40px,12vw,62px)}
  html.rally-full .rally.is-touch .rally__ab button{width:clamp(54px,16vw,84px);height:clamp(54px,16vw,84px)}
  html.rally-full .rally.is-touch .rally__ab-cell--a{transform:translateY(-18px)}
}
@media (orientation:landscape){
  html.rally-full .rally.is-touch .rally__ab button{width:clamp(46px,min(16dvh,calc(var(--side) / 3.3)),74px);height:clamp(46px,min(16dvh,calc(var(--side) / 3.3)),74px)}
}
/* the arcade page: no double-tap zoom when tapping the console or the game */
html{touch-action:manipulation}
html.rally-full .rally.is-touch .rally__sys span{gap:13px}