/* Rug Runner arcade cabinet (site/arcade_page.py). All shapes are CSS; the game draws itself in game.js. */
.rr [hidden]{display:none!important}
.rr-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rr-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start;padding-bottom:28px}
@media (min-width:1024px){.rr-layout{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:56px}}
.rr-head{padding-bottom:18px}
.rr-head h1{text-wrap:balance}

/* ---------- cabinet ---------- */
.rr{position:relative;width:100%;max-width:500px;margin:0 auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.rr-cab{position:relative;margin:0 14px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
/* side panels give the cabinet depth: the left catches the marquee light, the right sits in shadow */
.rr-cab::before,.rr-cab::after{content:"";position:absolute;top:26px;bottom:0;width:14px;z-index:0}
.rr-cab::before{left:-14px;background:linear-gradient(180deg,#2A1C07 0,#120D05 30%,#0B0D11 100%);clip-path:polygon(0 4%,100% 0,100% 100%,0 98%)}
.rr-cab::after{right:-14px;background:linear-gradient(180deg,#1A1206 0,#07090C 40%);clip-path:polygon(0 0,100% 4%,100% 98%,0 100%)}
.rr-top{position:relative;z-index:1;padding:0 6px}
.rr-marquee{position:relative;display:grid;justify-items:center;gap:4px;padding:14px 16px 10px;border-radius:14px 14px 4px 4px;
  background:radial-gradient(120% 140% at 50% 0,#4A300A 0,#221606 55%,#140E05 100%);border:2px solid #3A2708;
  box-shadow:0 0 0 2px #0B0D11,0 0 34px rgba(245,165,36,.28),inset 0 0 26px rgba(245,165,36,.22)}
.rr-marquee::after{content:"";position:absolute;inset:6px;border-radius:9px 9px 2px 2px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,210,122,.06) 0 2px,transparent 2px 8px)}
#rrMarquee{width:min(100%,330px);height:auto;aspect-ratio:42/8;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 0 8px rgba(245,165,36,.55))}
.rr-player{position:relative;z-index:1;font:700 12px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:#FFD27A;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-front{position:relative;z-index:1;background:linear-gradient(180deg,#1A212B 0,#121821 40%,#0E1218 100%);border:1px solid #232B36;border-top:0;border-radius:0 0 12px 12px;padding:14px 12px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 6px 0 0 rgba(245,165,36,.06)}
.rr-bezel{position:relative;padding:12px;border-radius:18px;background:linear-gradient(160deg,#05070A,#0B0F15 60%,#05070A);
  box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px #1A212B,inset 0 6px 18px rgba(0,0,0,.8),0 0 0 1px rgba(245,165,36,.22)}

/* ---------- screen and CRT ---------- */
.rr-screen{position:relative;aspect-ratio:216/240;border-radius:14px/16px;overflow:hidden;background:#090C11;isolation:isolate;
  box-shadow:0 0 0 1px #000,0 0 28px rgba(245,165,36,.14);cursor:pointer;outline:none}
.rr-playing .rr-screen,.rr-playing .rr-jump{touch-action:none}
#rrCanvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.rr-crt{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.5) 100%),
    linear-gradient(155deg,rgba(255,255,255,.07) 0,rgba(255,255,255,0) 32%);
  box-shadow:inset 0 0 40px rgba(245,165,36,.08),inset 0 0 6px rgba(0,0,0,.9);animation:rrFlicker 4s steps(1) infinite}
@keyframes rrFlicker{0%,100%{opacity:1}47%{opacity:.93}48%{opacity:1}83%{opacity:.96}84%{opacity:1}}
.rr-rm .rr-crt{animation:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),radial-gradient(120% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.38) 100%)}
.rr-rm .rr-marquee,.rr-rm #rrMarquee{filter:none}
@media (prefers-reduced-motion:reduce){.rr-crt{animation:none}}

/* ---------- HUD ---------- */
.rr-hud{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;padding:8px 10px 0;
  font:700 12px/1.25 var(--mono);color:#FFD27A;text-shadow:0 1px 0 #000,0 0 6px rgba(245,165,36,.5);pointer-events:none}
.rr-hud .rr-hr{color:#8E959E}
.rr-hud .rr-hr b{color:#ECEDEE}
.rr-pow{flex-basis:100%;display:flex;gap:6px;min-height:16px}
.rr-pw{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:rgba(5,7,10,.7);border:1px solid}
.rr-pw.chk{color:#F5A524;border-color:rgba(245,165,36,.6)}
.rr-pw.ex{color:#3FB950;border-color:rgba(63,185,80,.6)}

/* ---------- overlays (questions, ready, pause, death) ---------- */
.rr-ov{position:absolute;z-index:3;inset:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow-x:hidden;padding:12px;overflow:auto;background:rgba(9,12,17,.62);cursor:default}
.rr-ov.dead{background:rgba(9,12,17,.8)}
.rr-card{width:100%;min-width:0;max-width:340px;text-align:center;font:500 13px/1.45 var(--sans);color:var(--soft);outline:none}
.rr-card h2{margin:4px 0 10px;font:800 clamp(18px,5vw,22px)/1.15 var(--sans);color:var(--text);text-wrap:balance}
.rr-card p{margin:0 0 8px;text-wrap:pretty}
.rr-step{font:700 11px/1 var(--mono)!important;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}
.rr-step.bad{color:var(--down);font-size:13px!important;text-shadow:0 0 10px rgba(248,81,73,.5)}
.rr-intro{color:var(--soft)}
.rr-keys{font:500 12px/1.4 var(--mono);color:#FFD27A}
.rr-fine{font-size:11.5px!important;color:var(--faint)}
.rr-new{font:700 12px/1.3 var(--mono);color:var(--up);text-transform:uppercase;letter-spacing:1px}
.rr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border-radius:8px;border:2px solid #2A3340;background:#161B23;
  color:var(--text);font:700 13px/1 var(--mono);letter-spacing:.6px;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 #05070A}
.rr-btn:hover{border-color:#3C4654}
.rr-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #05070A}
.rr-btn.rr-go{background:var(--accent);border-color:#FFD27A;color:var(--ink);box-shadow:0 3px 0 #7A4A0E}
.rr-btn.big{min-height:46px;padding:10px 26px;font-size:15px;margin:4px 0 10px}
.rr-btn:focus-visible,.rr-pick:focus-visible,.rr-opt:focus-visible,.rr-link:focus-visible,.rr-guide:focus-visible,.rr-sb:focus-visible,.rr-jump:focus-visible{outline:2px solid #FFD27A;outline-offset:2px}
.rr-link{background:none;border:0;padding:4px;color:var(--accent);font:600 12px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rr-form{display:flex;align-items:center;gap:6px;margin:6px 0 8px;padding:4px 4px 4px 10px;border:2px solid #2A3340;border-radius:10px;background:#05070A}
.rr-form:focus-within{border-color:var(--accent)}
.rr-at{font:700 16px var(--mono);color:var(--accent)}
.rr-form input{flex:1;min-width:0;width:100%;background:transparent;border:0;outline:0;color:var(--text);font:700 16px var(--mono);padding:8px 0}
.rr-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 6px}
.rr-pick,.rr-opt{display:grid;justify-items:center;gap:3px;padding:8px 4px;border-radius:10px;border:2px solid #2A3340;background:#10141B;color:var(--text);cursor:pointer;font:inherit}
.rr-pick:hover,.rr-opt:hover{border-color:#4A515A}
.rr-pick.on,.rr-opt.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,165,36,.18)}
.rr-pick canvas{width:40px;height:48px;image-rendering:pixelated;image-rendering:crisp-edges}
.rr-pick b,.rr-opt b{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.4px}
.rr-pick span,.rr-opt span{font-size:11px;line-height:1.3;color:var(--muted);text-wrap:balance}
.rr-opts{display:grid;gap:6px;margin:4px 0 6px}
.rr-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.rr-opt{padding:10px 8px}
.rr-why{margin:8px 0 10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(248,81,73,.35);background:rgba(248,81,73,.07);text-align:left}
.rr-why p{font-size:12.5px;margin:0 0 6px}
.rr-got{color:var(--text)}
.rr-got b{color:#FF8A84}
.rr-guide{display:inline-block;color:var(--accent);font-weight:700;font-size:12.5px;text-underline-offset:3px}
.rr-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}

/* ---------- control deck ---------- */
.rr-deck{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:14px -12px 0;padding:16px 18px 18px;
  background:linear-gradient(180deg,#232B36 0,#161B23 55%,#10141B 100%);border-top:2px solid #2F3946;border-bottom:3px solid #05070A;
  border-radius:6px 6px 0 0;box-shadow:inset 0 10px 18px -10px rgba(255,255,255,.08),0 -1px 0 #05070A}
.rr-deck::before{content:"";position:absolute;left:0;right:0;top:-2px;height:4px;background:linear-gradient(90deg,transparent,rgba(245,165,36,.35),transparent)}
.rr-stick{position:relative;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#2A3340,#0B0F15 70%);box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.rr-stick::before{content:"";position:absolute;left:50%;bottom:50%;width:6px;height:26px;margin-left:-3px;border-radius:3px;background:linear-gradient(90deg,#5B636E,#9AA3AD,#4A515A)}
.rr-stick i{position:absolute;left:50%;top:-6px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FF8A84,#C9302C 60%,#7A1E1A);box-shadow:0 3px 4px rgba(0,0,0,.6)}
.rr-jump{justify-self:center;width:84px;height:84px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 40% 32%,#FFD27A 0,#F5A524 45%,#B8741A 100%);color:#1A1206;font:800 14px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;
  box-shadow:0 7px 0 #6B420C,0 10px 18px rgba(0,0,0,.6),0 0 22px rgba(245,165,36,.3),inset 0 -4px 8px rgba(122,74,14,.6);transition:transform .05s,box-shadow .05s}
.rr-jump.down,.rr-jump:active{transform:translateY(5px);box-shadow:0 2px 0 #6B420C,0 4px 10px rgba(0,0,0,.6),0 0 30px rgba(245,165,36,.45),inset 0 -2px 6px rgba(122,74,14,.6)}
.rr-small{display:grid;gap:8px}
.rr-sb{display:flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;border-radius:8px;border:1px solid #2A3340;background:#0B0F15;color:var(--muted);
  font:700 10.5px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 #05070A}
.rr-sb i{width:9px;height:9px;border-radius:50%;background:#4A515A;flex:none}
.rr-sb[aria-pressed="true"]{color:var(--text)}
.rr-sb[aria-pressed="true"] i{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.rr-door{display:flex;justify-content:center;gap:18px;margin:0 -12px;padding:14px 12px 16px;background:linear-gradient(180deg,#0E1218,#0A0D12);border-radius:0 0 12px 12px}
.rr-slot{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;background:#05070A;border:1px solid #1E2530;font:700 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#A86A12}
.rr-slot i{width:4px;height:16px;border-radius:2px;background:#F5A524;box-shadow:0 0 8px rgba(245,165,36,.8)}
.rr-rm .rr-slot i{box-shadow:none}

/* ---------- side column ---------- */
.rr-side h2{font:700 var(--fs-xl)/1.2 var(--sans);margin:0 0 12px;text-wrap:balance}
.rr-side h2+p{color:var(--muted);margin:-4px 0 14px;max-width:60ch}
.rr-list{display:grid;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.rr-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.rr-list canvas{width:36px;height:36px;image-rendering:pixelated;image-rendering:crisp-edges;background:#090C11;border-radius:8px;border:1px solid var(--line2);padding:4px;box-sizing:border-box}
.rr-list b{display:block;font-size:var(--fs-md);color:var(--text)}
.rr-list span{display:block;font-size:var(--fs-sm);color:var(--soft);text-wrap:pretty}
.rr-list a{color:var(--accent);font-weight:600;font-size:var(--fs-sm)}
.rr-ctas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:8px}
.rr-ctas .card{padding:16px 18px;text-decoration:none;display:grid;gap:4px}
.rr-ctas .card:hover{border-color:var(--line2)}
.rr-ctas b{font-size:var(--fs-md)}
.rr-ctas span{font-size:var(--fs-sm);color:var(--muted);text-wrap:pretty}
.rr-ctas em{font-style:normal;color:var(--accent);font-weight:700;font-size:var(--fs-sm);margin-top:4px}
.rr-foot{margin:22px 0 8px;font-size:var(--fs-sm);color:var(--muted);text-align:center;text-wrap:balance}

@media (max-width:420px){
  .rr-cab{margin:0 8px}
  .rr-cab::before,.rr-cab::after{width:8px}
  .rr-cab::before{left:-8px}.rr-cab::after{right:-8px}
  .rr-front{padding:10px 8px 0}
  .rr-bezel{padding:8px;border-radius:14px}
  .rr-deck{margin:10px -8px 0;padding:12px 12px 14px;gap:10px}
  .rr-door{margin:0 -8px}
  .rr-jump{width:76px;height:76px}
  .rr-stick{width:40px;height:40px}
  .rr-marquee{padding:10px 12px 8px}
  .rr-card{font-size:12.5px}
  .rr-btn{min-height:38px;padding:7px 12px}
}
.rr-nw{white-space:nowrap}
.rr-fine{text-wrap:balance}

/* 16px stops phones zooming in when the handle box is tapped */
.arcade input, #arcade input, .rr input { font-size: 16px !important; }