/* =====================================================================
   arcade.css  -  ALL the shared styling for the Reaper Man Arcade
   Change something here once and every page (arcade index, category
   pages and every game page) updates.

   PART 1 below is your original layout styling, copied over unchanged
   and in the same order (the order matters, later rules override earlier
   ones). PART 2 (at the bottom) is new: game page, locked/unlocked gate,
   breadcrumbs and the plain link lists.
   ===================================================================== */

/* ===== PART 1 - YOUR ORIGINAL LAYOUT STYLES ===== */

/* --- original style block 1 of 5 --- */
:root{color-scheme:dark;--bg:#101014;--panel:#19191f;--panel2:#22222b;--text:#f6f6f8;--muted:#a6a6b3;--red:#e11d2e;--red2:#b30000;--border:#30303a;--radius:15px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}
.layout{min-height:100vh}.sidebar{position:fixed;z-index:20;left:0;top:0;bottom:0;width:246px;background:#141418;border-right:1px solid var(--border);padding:22px 14px;overflow:auto}.brand{display:flex;align-items:center;gap:10px;padding:0 9px 24px;font-weight:900;font-size:18px;letter-spacing:-.5px}.brand-mark{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--red2));border-radius:11px;font-size:20px}.nav-label{margin:15px 10px 7px;color:#777783;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.nav-link{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:#c7c7d0;padding:10px 12px;border-radius:10px;text-align:left;margin:2px 0}.nav-link:hover,.nav-link.active{background:#2a171b;color:#fff}.nav-link.active{box-shadow:inset 3px 0 var(--red)}.nav-icon{width:20px;text-align:center}.main{margin-left:246px;min-width:0}.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:14px;padding:14px 28px;background:rgba(16,16,20,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(48,48,58,.8)}.menu-btn{display:block;flex:0 0 auto;border:1px solid var(--border);background:var(--panel);color:white;border-radius:10px;padding:9px 12px;border-color:rgba(226,43,58,.55);transition:background .18s,border-color .18s}.menu-btn:hover{background:#2a1015;border-color:#e22b3a}.sidebar{transition:transform .22s, width .22s}.sidebar.collapsed{transform:translateX(-100%)}.main{transition:margin-left .22s}.main.sidebar-collapsed{margin-left:0}.search-wrap{position:relative;max-width:650px;flex:1}.search-wrap span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}.search{width:100%;padding:12px 15px 12px 43px;background:#202027;border:1px solid #33333e;border-radius:999px;color:white;outline:none}.search:focus{border-color:var(--red)}.top-badge{color:#ff9ba4;font-size:12px;font-weight:800;white-space:nowrap}.content{max-width:1600px;margin:0 auto;padding:27px 28px 60px}.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:235px;padding:32px;border-radius:22px;background:radial-gradient(ellipse at 80% 20%,#6e101d 0,transparent 42%),linear-gradient(120deg,#291015,#17171f 70%);border:1px solid #4a2028;margin-bottom:32px}.hero:after{content:"☠";position:absolute;right:7%;font-size:clamp(100px,18vw,210px);color:rgba(255,255,255,.055);transform:rotate(-12deg);pointer-events:none}.hero-copy{position:relative;z-index:1;max-width:620px}.eyebrow{color:#ff7d88;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:1.6px}.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-1.7px;margin:10px 0}.hero p{color:#d1c2c6;max-width:520px;margin:0 0 20px}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:11px 16px;font-weight:800}.primary-btn{background:var(--red);color:white}.primary-btn:hover{background:#f02c3c}.secondary-btn{background:#292932;color:white;border:1px solid var(--border)}.section{margin:32px 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.section h2{font-size:21px;letter-spacing:-.4px;margin:0}.section-sub{color:var(--muted);font-size:13px;margin-top:3px}.view-all{color:#ff7d88;font-weight:800;font-size:13px;white-space:nowrap}.game-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}.game-row{display:flex;gap:13px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 13px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#5a3037 transparent}.game-row::-webkit-scrollbar{height:6px}.game-row::-webkit-scrollbar-thumb{background:#5a3037;border-radius:99px}.game-row .game-card{flex:0 0 190px;scroll-snap-align:start}.game-row .thumb-wrap{aspect-ratio:16/10}.game-row .featured-card{grid-column:auto;grid-row:auto}.game-row .featured-card .thumb-wrap{aspect-ratio:16/10}.game-row .game-name{font-size:14px}.game-grid.featured-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.game-card{min-width:0;background:var(--panel);border:1px solid #292932;border-radius:var(--radius);overflow:hidden;transition:transform .18s,border-color .18s}.game-card:hover{transform:translateY(-3px);border-color:#6c3039}.thumb-wrap{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#292932,#19191f);overflow:hidden}.thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}.game-card:hover .thumb{transform:scale(1.04)}.thumb-placeholder{height:100%;display:grid;place-items:center;font-size:38px;color:#686875}.game-card .game-info{padding:11px 12px 13px}.game-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-meta{font-size:12px;color:var(--muted);margin-top:4px;text-transform:capitalize}.featured-card{grid-column:span 2;grid-row:span 2}.featured-card .thumb-wrap{aspect-ratio:1.5}.featured-card .game-name{font-size:19px}
.category-carousel-wrap{position:relative;margin:12px 0 30px}
.category-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:3px 2px 13px;scrollbar-width:thin;scrollbar-color:#5a3037 transparent}
.category-carousel::-webkit-scrollbar{height:6px}.category-carousel::-webkit-scrollbar-thumb{background:#5a3037;border-radius:99px}
.category-tile{flex:0 0 142px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:15px;background:linear-gradient(145deg,#25252e,#19191f);border:1px solid #34343e;border-radius:15px;scroll-snap-align:start;transition:transform .18s,border-color .18s,background .18s}
.category-tile:hover,.category-tile:focus-visible{transform:translateY(-2px);border-color:#9d2937;background:linear-gradient(145deg,#351a21,#202027);outline:none}
.category-tile-icon{font-size:25px;line-height:1}
/* Recolor every game-category icon red, including emoji icons */
.category-tile-icon,#category-nav .nav-icon{filter:grayscale(1) brightness(0) saturate(100%) invert(18%) sepia(91%) saturate(5900%) hue-rotate(338deg) brightness(96%) contrast(108%)}#category-nav .nav-link{color:#e22b3a}.category-tile-name{font-size:13px;line-height:1.25;font-weight:800;color:#e22b3a}.category-carousel-controls{display:flex;gap:7px}
.carousel-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--panel2);color:#fff;font-size:18px;display:grid;place-items:center}.carousel-arrow:hover{border-color:var(--red);background:#351a21}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}.tag-chip{background:#202027;border:1px solid #363640;border-radius:999px;color:#d6d6df;padding:7px 12px;font-size:12px}.tag-chip.active,.tag-chip:hover{background:#421820;border-color:#8b2632;color:white}.load-row{text-align:center;padding:25px 0}.empty{padding:40px 20px;text-align:center;border:1px dashed var(--border);border-radius:16px;color:var(--muted)}.footer{border-top:1px solid var(--border);padding:25px 0;color:#858591;font-size:12px}.notice{padding:12px 15px;background:#2a2115;border:1px solid #6d4d20;border-radius:10px;color:#f5d59a;margin-bottom:20px;font-size:13px}
@media(max-width:1250px){.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.game-grid.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:transform .22s;box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:15px 0 50px #0008}.sidebar.collapsed{transform:translateX(-100%)}.main{margin-left:0}.main.sidebar-collapsed{margin-left:0}.topbar{padding:12px 16px}.content{padding:20px 16px 45px}.game-grid,.game-grid.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.featured-card{grid-column:span 2;grid-row:span 1}}
@media(max-width:560px){.category-tile{flex-basis:124px;min-height:105px;padding:12px}.category-carousel-wrap{margin-bottom:24px}.topbar{gap:9px}.top-badge{display:none}.content{padding:15px 12px 35px}.hero{padding:23px 20px;min-height:230px}.hero:after{right:-15%;font-size:150px}.hero h1{font-size:34px}.game-grid,.game-grid.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.featured-card{grid-column:span 2}.featured-card .thumb-wrap{aspect-ratio:16/9}.game-card .game-info{padding:9px}.game-name{font-size:13px}.section h2{font-size:19px}.section{margin:25px 0}.brand{font-size:16px}}
#social-links{width:min(900px,92%);margin:38px auto 0;padding:28px 18px 36px;border-top:1px solid rgba(226,43,58,.25);position:relative;z-index:2;text-align:center;color:#f4f0f2}
#social-links h2{font-size:clamp(1.25rem,3vw,1.8rem);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
#social-links .social-copy{color:#948b91;font-size:.88rem;margin:0 0 22px}
#social-links .social-grid{display:flex;justify-content:center;align-items:center;gap:clamp(2px,1.2vw,12px);flex-wrap:nowrap;width:100%;min-width:0}
#social-links .social-link{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;width:auto;min-width:0;height:auto;aspect-ratio:1;padding:0;border:0;border-radius:0;background:transparent;color:#ff354d;text-decoration:none;transition:color .18s ease,transform .18s ease}
#social-links .social-link:hover,#social-links .social-link:focus-visible{color:#fff;transform:translateY(-3px);outline:none}
#social-links .platform-icon{display:block;width:min(100%,clamp(10px,4vw,32px));height:auto;aspect-ratio:1;flex:0 1 auto;min-width:0;fill:currentColor;color:currentColor;transition:filter .18s ease}
#social-links .social-link:hover .platform-icon,#social-links .social-link:focus-visible .platform-icon{filter:drop-shadow(0 0 6px rgba(255,53,77,.8))}
#social-links .social-link:focus-visible{outline:2px solid #ff354d;outline-offset:5px;border-radius:3px}
@media(prefers-reduced-motion:reduce){#social-links .social-link{transition:none}}
@media(max-width:900px){#social-links{width:100%;padding-left:8px;padding-right:8px}}

/* --- original style block 2 of 5 --- */
/* Match the main Reaper Man site's exact typography stack and core palette. Layout and game behavior remain unchanged. */
:root{color-scheme:dark;--bg:#000;--panel:#09090c;--panel2:#111116;--text:#f4f1f4;--muted:#aaa5ad;--red:#e22b3a;--red2:#a60020;--border:rgba(226,43,58,.35)}
html,body{background:#000!important;color:#f4f1f4!important}
body,body *,body *::before,body *::after{font-family:'Orbitron','Audiowide','Eurostile',sans-serif!important}
.sidebar{background:rgba(3,3,5,.98)!important;border-right:1px solid rgba(226,43,58,.3)!important}
.topbar{background:rgba(0,0,0,.94)!important;border-bottom:1px solid rgba(226,43,58,.35)!important}
.brand,.hero h1,.section h2{color:#f4f1f4!important;text-shadow:0 0 8px rgba(255,0,30,.14)!important;letter-spacing:.06em;text-transform:uppercase}
.brand-mark{background:radial-gradient(circle at 35% 28%,#ffb0b0 0%,#ff2424 25%,#a00000 62%,#260000 100%)!important;box-shadow:0 0 9px rgba(255,0,0,.45)!important;border:1px solid #ff5555!important}
.nav-label{color:#e22b3a!important;text-shadow:0 0 7px rgba(255,0,0,.35)!important}
.nav-link{color:#ff2929!important;font-family:'Orbitron','Audiowide',sans-serif!important;font-weight:800!important;letter-spacing:.055em!important;text-shadow:0 0 2px #ff7777,0 0 7px rgba(255,0,0,.65)!important}
.nav-link:hover,.nav-link.active{background:linear-gradient(90deg,rgba(226,43,58,.2),rgba(30,0,5,.45))!important;color:#fff!important}
.nav-link.active{box-shadow:inset 3px 0 #e22b3a!important}
.search{background:#08080b!important;border-color:rgba(226,43,58,.4)!important;color:#f4f1f4!important}
.search:focus{border-color:#e22b3a!important;box-shadow:0 0 0 2px rgba(255,0,30,.12)!important}
.top-badge,.eyebrow,.view-all{color:#e22b3a!important;text-shadow:0 0 8px rgba(255,0,0,.28)!important}
.hero{background:radial-gradient(ellipse at 80% 20%,rgba(110,16,29,.65) 0,transparent 42%),linear-gradient(120deg,#170508,#030305 70%)!important;border-color:rgba(226,43,58,.42)!important}
.hero p,.section-sub{color:#aaa5ad!important}
.primary-btn{background:#b8162d!important;color:#fff!important;border:1px solid #e22b3a!important;box-shadow:0 0 12px rgba(226,43,58,.15)!important}
.primary-btn:hover{background:#d51b36!important;box-shadow:0 0 16px rgba(255,0,30,.25)!important}
.secondary-btn,.carousel-arrow{background:#09090c!important;color:#f4f1f4!important;border-color:rgba(226,43,58,.35)!important}
.carousel-arrow:hover{border-color:#e22b3a!important;background:#1b070a!important}
.game-card{background:#070709!important;border-color:rgba(226,43,58,.24)!important}
.game-card:hover{border-color:#e22b3a!important;box-shadow:0 0 16px rgba(255,0,30,.12)!important}
.thumb-wrap{background:linear-gradient(135deg,#18070b,#050505 65%,#151012)!important}
.game-meta,.footer{color:#8e858b!important}
.game-row,.category-carousel{scrollbar-color:#7b1523 transparent!important}
.game-row::-webkit-scrollbar-thumb,.category-carousel::-webkit-scrollbar-thumb{background:#7b1523!important}
.category-tile{background:linear-gradient(145deg,#18080b,#050505 70%,#101010)!important;border-color:rgba(226,43,58,.3)!important}
.category-tile:hover,.category-tile:focus-visible{border-color:#e22b3a!important;background:linear-gradient(145deg,#2a0b11,#09090c)!important;box-shadow:0 0 14px rgba(255,0,30,.12)!important}
.tag-chip{background:#09090c!important;border-color:rgba(226,43,58,.3)!important;color:#e9dfe4!important}
.tag-chip.active,.tag-chip:hover{background:#351016!important;border-color:#e22b3a!important;color:#fff!important}
.notice{background:#180b0e!important;border-color:rgba(226,43,58,.5)!important;color:#f4d7dc!important}
.empty{border-color:rgba(226,43,58,.35)!important;color:#aaa5ad!important}
.footer{border-top-color:rgba(226,43,58,.25)!important}
@media(prefers-reduced-motion:no-preference){.primary-btn,.game-card,.category-tile{transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}}
/* Softer text glow while preserving the existing red/black styling. */
.brand,.hero h1,.section h2{ text-shadow:0 0 3px rgba(255,0,30,.07)!important; }
.nav-label{ text-shadow:0 0 3px rgba(255,0,0,.12)!important; }
.nav-link{ text-shadow:0 0 1px rgba(255,119,119,.45),0 0 3px rgba(255,0,0,.22)!important; }
/* Red scrollbar for the side navigation menu */
.sidebar{scrollbar-width:thin!important;scrollbar-color:#e22b3a #09090c!important}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-track{background:#09090c}
.sidebar::-webkit-scrollbar-thumb{background:#e22b3a;border-radius:99px;border:1px solid #09090c}
.sidebar::-webkit-scrollbar-thumb:hover{background:#ff354d}
.top-badge,.eyebrow,.view-all{ text-shadow:0 0 3px rgba(255,0,0,.10)!important; }

/* --- original style block 3 of 5 --- */

/* Reaper Man quick links across the top of the Arcade page. */
.top-nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.5vw,20px);flex:0 1 auto;min-width:0;white-space:nowrap}
.top-nav-links a{color:#ff2929;text-decoration:none;font-family:'Orbitron','Audiowide',sans-serif;font-size:clamp(10px,.9vw,13px);font-weight:800;letter-spacing:.035em;text-shadow:0 0 1px rgba(255,119,119,.35),0 0 3px rgba(255,0,0,.16);transition:color .18s,text-shadow .18s}
.top-nav-links a:hover,.top-nav-links a:focus-visible{color:#fff;text-shadow:0 0 3px rgba(255,0,0,.28);outline:none}
@media(max-width:1050px){.topbar{flex-wrap:wrap}.top-nav-links{order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;padding:2px 0 4px}.search-wrap{min-width:120px}}
@media(max-width:520px){.top-nav-links{gap:15px}.top-nav-links a{font-size:10px}.top-nav-links a:first-child{white-space:normal;min-width:110px}}


/* Reaper Man Arcade ad placement placeholder */
.ad-section{width:min(100%,1100px);box-sizing:border-box;margin:18px auto 22px;padding:0 0 2px;text-align:center}
.ad-section-label{display:block;margin:0 0 7px;color:#8d858b;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.ad-section-slot{min-height:100px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:18px;border:1px dashed rgba(226,43,58,.42);border-radius:12px;background:linear-gradient(135deg,rgba(226,43,58,.055),rgba(10,10,13,.72));color:#aaa1a7;font-size:13px}
.ad-section-slot strong{display:block;color:#ff354d;font-size:clamp(13px,1.5vw,17px);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.ad-section-slot span{display:block;font-size:12px;color:#8d858b}
@media(max-width:600px){.ad-section{margin:12px auto 16px}.ad-section-slot{min-height:90px;padding:14px}}
.ad-section-slot.ad-section-loaded{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:stretch}
.arcade-ad-card{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;max-width:100%;text-align:left;flex:1 1 260px}
.arcade-ad-card img,.arcade-ad-card video{display:block;width:min(220px,42%);max-height:150px;object-fit:contain;border-radius:8px;background:#080808}
.arcade-ad-details{min-width:0}
.arcade-ad-details strong{display:block;color:#ff354d;font-size:clamp(13px,1.5vw,17px);letter-spacing:.04em;margin-bottom:5px}
.arcade-ad-details span{display:block;font-size:12px;color:#b6adb3;overflow-wrap:anywhere}
.arcade-ad-link{display:inline-block;margin-top:9px;padding:7px 11px;border-radius:7px;background:#e11d2e;color:white;font-size:12px;font-weight:800}
.arcade-ad-link:hover{background:#f02c3c}
@media(max-width:600px){.arcade-ad-card{flex-basis:100%}.arcade-ad-card img,.arcade-ad-card video{width:34%;max-height:110px}}



/* Reaper Man Arcade rotating ad banner (overrides older ad rules) */
.ad-section{width:min(100%,728px);margin:18px auto 22px;padding:0;text-align:center}
.ad-section-label{display:block;margin:0 0 6px;color:#8d858b;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.ad-section-slot,.ad-section-slot.ad-section-loaded{position:relative;display:block;width:100%;aspect-ratio:728/90;min-height:90px;padding:0;overflow:hidden;border:1px solid rgba(226,43,58,.42);border-radius:10px;background:#050507;color:#aaa1a7;font-size:13px}
.ad-section-slot>div:not(.arcade-ad-card){height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ad-section-slot{touch-action:pan-y}
.arcade-ad-card{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ad-section-slot>div:not(.arcade-ad-card) strong{color:#ff354d;letter-spacing:.08em;text-transform:uppercase}
.arcade-ad-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:none;padding:6px 12px;text-align:left;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.arcade-ad-card.is-active{opacity:1;visibility:visible}
.arcade-ad-card>img,.arcade-ad-card>video{height:100%;width:auto;max-width:36%;max-height:none;object-fit:contain;border-radius:6px;background:#080808;flex:0 0 auto}
.arcade-ad-embed{position:relative;height:100%;aspect-ratio:16/9;max-width:42%;border-radius:6px;overflow:hidden;background:#080808;flex:0 0 auto}
.arcade-ad-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.arcade-ad-details{min-width:0;flex:1 1 auto}
.arcade-ad-details strong{display:block;margin:0;color:#ff354d;font-size:clamp(12px,1.6vw,16px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arcade-ad-details span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.25;color:#b6adb3}
.arcade-ad-link{display:inline-block;margin-top:5px;padding:4px 10px;border-radius:6px;background:#e11d2e;color:#fff;font-size:11px;font-weight:800}
.arcade-ad-link:hover{background:#f02c3c}
.arcade-ad-youtube-thumb{position:relative;display:block;height:100%;width:auto;max-width:36%;aspect-ratio:16/9;flex:0 0 auto;border-radius:6px;overflow:hidden;background:#080808;text-decoration:none}
.arcade-ad-youtube-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.arcade-ad-youtube-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:30px;border-radius:9px;background:#e11d2e;color:#fff;font-size:15px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.45);transition:transform .18s,background .18s}
.arcade-ad-youtube-thumb:hover .arcade-ad-youtube-play{transform:translate(-50%,-50%) scale(1.08);background:#f02c3c}
.arcade-ad-dots{display:flex;justify-content:center;gap:7px;margin-top:8px}
.arcade-ad-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid #e22b3a;background:transparent}
.arcade-ad-dot.is-active{background:#e22b3a}
@media(max-width:600px){.ad-section{width:min(100%,320px)}.ad-section-slot,.ad-section-slot.ad-section-loaded{aspect-ratio:320/100;min-height:100px}.arcade-ad-card{gap:8px;padding:5px 8px}.arcade-ad-youtube-thumb{max-width:34%}.arcade-ad-details span{-webkit-line-clamp:1}}
@media(prefers-reduced-motion:reduce){.arcade-ad-card{transition:none}}

/* Spotify player inside the sidebar */
.spotify-side-player{margin:22px 2px 8px;padding:12px 10px 10px;border:1px solid rgba(226,43,58,.35);border-radius:12px;background:linear-gradient(145deg,#120609,#050505 75%);box-shadow:0 0 14px rgba(226,43,58,.08)}
.spotify-side-heading{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:#f4f1f4;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.spotify-side-dot{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;background:#1ed760;color:#050505;font-size:14px;font-family:Arial,sans-serif!important;font-weight:900}
.spotify-side-player iframe{display:block;width:100%;height:680px;min-height:680px;border:0;border-radius:9px;background:#121212;overflow:hidden}
@media(max-width:900px){.spotify-side-player iframe{height:600px;min-height:600px}}
.spotify-side-link{display:block;margin-top:8px;text-align:center;color:#1ed760;font-size:10px;font-weight:800;letter-spacing:.04em}
.spotify-side-link:hover{color:#fff}
@media(max-width:900px){.spotify-side-player{margin-top:18px}}

/* --- original style block 4 of 5 --- */
/* Show the full Spotify embed inside the narrow sidebar */
.spotify-side-player{margin:22px 0 8px!important;padding:8px 6px 10px!important;overflow:hidden!important}
.spotify-side-player iframe{
  width:260px!important;
  max-width:none!important;
  height:795px!important;
  min-height:0!important;
  transform:scale(.78);
  transform-origin:top left;
  margin-bottom:-175px; /* removes the empty space left behind by scaling */
}
@media(max-width:900px){
  .spotify-side-player iframe{height:795px!important;min-height:0!important}
}

/* --- original style block 5 of 5 --- */
/* Reaper Man Music/Lyrics navigation rail, adapted to Arcade's existing links. */
:root{--arcade-rail:76px;--rail-blood:#ff2929;--rail-ash:#c5bbc0;--rail-line:rgba(211,29,52,.45)}
@media (min-width:821px){
  body{padding-left:var(--arcade-rail)!important}
  .sidebar,.sidebar.open,.sidebar.collapsed{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:var(--arcade-rail)!important;height:auto!important;max-height:none!important;
    z-index:20!important;transform:none!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:flex-start!important;gap:0!important;
    padding:14px 0!important;overflow:hidden!important;
    background:linear-gradient(90deg,#000 70%,transparent)!important;
    border-right:1px solid var(--rail-line)!important;border-top:0!important;
    box-shadow:none!important;transition:none!important
  }
  .sidebar .brand{
    display:block!important;flex:0 0 auto!important;width:100%!important;
    padding:0 0 18px!important;margin:0!important;text-align:center!important;
    font:900 .8rem 'Orbitron',sans-serif!important;letter-spacing:0!important;
    color:var(--rail-blood)!important;white-space:nowrap!important
  }
  .sidebar .brand-mark{
    display:block!important;width:auto!important;height:auto!important;flex:none!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
    background:none!important;color:var(--rail-blood)!important;
    font:900 .8rem 'Orbitron',sans-serif!important;line-height:1.4!important
  }
  .sidebar .brand>span:last-child{display:none!important}
  .sidebar nav{
    flex:1 1 auto!important;min-height:0!important;width:100%!important;min-width:0!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:flex-start!important;gap:2px!important;padding:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:none!important
  }
  .sidebar nav::-webkit-scrollbar{display:none!important}
  .sidebar .nav-label{display:none!important}
  .sidebar .nav-link{
    display:block!important;flex:0 0 auto!important;width:auto!important;max-width:none!important;
    min-height:0!important;min-width:0!important;margin:0!important;
    writing-mode:vertical-rl!important;transform:rotate(180deg)!important;
    padding:9px 10px!important;border:0!important;border-left:2px solid transparent!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
    color:var(--rail-ash)!important;font:700 .72rem 'Orbitron',sans-serif!important;
    letter-spacing:.12em!important;line-height:1.2!important;text-align:left!important;
    text-decoration:none!important;white-space:nowrap!important;overflow-wrap:normal!important;
    text-shadow:none!important
  }
  .sidebar .nav-link .nav-icon{display:none!important}
  .sidebar .nav-link:hover,.sidebar .nav-link:focus-visible,.sidebar .nav-link.active{
    color:var(--rail-blood)!important;border-left-color:var(--rail-blood)!important;
    background:transparent!important;box-shadow:none!important;text-shadow:none!important
  }
  #category-nav{width:100%!important;min-width:0!important;display:flex!important;flex:0 0 auto!important;flex-direction:column!important;align-items:center!important;gap:2px!important}
  #category-nav .nav-link{color:var(--rail-ash)!important}
  #category-nav .nav-link:hover,#category-nav .nav-link:focus-visible,#category-nav .nav-link.active{color:var(--rail-blood)!important;border-left-color:var(--rail-blood)!important}
  .spotify-side-player{display:none!important}
  .main,.main.sidebar-collapsed{margin-left:0!important;min-width:0!important;transition:none!important}
  .menu-btn{display:none!important}
}
@media (max-width:820px){
  body{padding-left:0!important;padding-bottom:58px!important}
  .sidebar,.sidebar.open,.sidebar.collapsed{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;height:56px!important;max-height:56px!important;transform:none!important;
    z-index:30!important;display:flex!important;flex-direction:row!important;align-items:center!important;
    justify-content:flex-start!important;gap:0!important;padding:0 8px!important;overflow:hidden!important;
    background:#000!important;border-right:0!important;border-top:1px solid var(--rail-line)!important;
    box-shadow:none!important;transition:none!important
  }
  .sidebar .brand{
    display:block!important;flex:0 0 auto!important;width:auto!important;
    margin:0!important;padding:0 12px 0 2px!important;text-align:center!important;
    font:900 .8rem 'Orbitron',sans-serif!important;letter-spacing:0!important;color:var(--rail-blood)!important
  }
  .sidebar .brand-mark{display:block!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--rail-blood)!important;font:900 .8rem 'Orbitron',sans-serif!important;line-height:1.4!important}
  .sidebar .brand>span:last-child,.sidebar .spotify-side-player{display:none!important}
  .sidebar nav{
    flex:1 1 auto!important;min-width:0!important;width:auto!important;height:56px!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
    gap:0!important;padding:0!important;overflow-x:auto!important;overflow-y:hidden!important;
    white-space:nowrap!important;scrollbar-width:none!important
  }
  .sidebar nav::-webkit-scrollbar{display:none!important}
  .sidebar .nav-label{display:none!important}
  .sidebar .nav-link{
    display:block!important;flex:0 0 auto!important;width:auto!important;max-width:none!important;
    min-width:0!important;min-height:0!important;height:auto!important;margin:0!important;
    writing-mode:horizontal-tb!important;transform:none!important;white-space:nowrap!important;
    padding:8px 7px!important;border:0!important;border-bottom:2px solid transparent!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
    color:var(--rail-ash)!important;font:700 .62rem 'Orbitron',sans-serif!important;
    letter-spacing:.04em!important;line-height:1.2!important;text-align:center!important;
    text-shadow:none!important
  }
  .sidebar .nav-link .nav-icon{display:none!important}
  .sidebar .nav-link:hover,.sidebar .nav-link:focus-visible,.sidebar .nav-link.active{
    color:var(--rail-blood)!important;background:transparent!important;box-shadow:none!important
  }
  .sidebar .nav-link.active{border-bottom-color:var(--rail-blood)!important}
  #category-nav{display:flex!important;flex:0 0 auto!important;flex-direction:row!important;align-items:center!important;width:max-content!important;min-width:max-content!important;gap:0!important}
  #category-nav .nav-link{flex:0 0 auto!important;color:var(--rail-ash)!important}
  #category-nav .nav-link:hover,#category-nav .nav-link:focus-visible,#category-nav .nav-link.active{color:var(--rail-blood)!important}
  #category-nav .nav-link.active{border-bottom-color:var(--rail-blood)!important}
  .main,.main.sidebar-collapsed{margin-left:0!important;min-width:0!important}
  .menu-btn{display:none!important}
}
@media(prefers-reduced-motion:reduce){.sidebar,.sidebar *{scroll-behavior:auto!important;transition:none!important}}


/* =====================================================================
   PART 2 - NEW STYLES FOR GAME PAGES, CATEGORY PAGES AND THE GATE
   (Everything above this line is your original layout, moved here
   unchanged and in the same order. Everything below is new.)
   ===================================================================== */

/* ---- Breadcrumbs: Home > Arcade > Category > Game ---- */
.breadcrumbs{font-size:12px;margin:0 0 16px}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li+li::before{content:"\203A";margin-right:6px;color:#7b1523}
.breadcrumbs a{color:#e22b3a}
.breadcrumbs a:hover,.breadcrumbs a:focus-visible{color:#fff;outline:none}
.breadcrumbs [aria-current]{color:#aaa5ad}

/* ---- Game header: thumbnail + title + description ---- */
.game-head{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:center;margin-bottom:24px;padding:20px;border:1px solid rgba(226,43,58,.42);border-radius:22px;background:radial-gradient(ellipse at 85% 10%,rgba(110,16,29,.55) 0,transparent 45%),linear-gradient(120deg,#170508,#030305 70%)}
.game-thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid rgba(226,43,58,.35);background:#050505}
.game-head h1,.page-title{margin:6px 0 10px;font-size:clamp(26px,3.4vw,40px);line-height:1.08;letter-spacing:.04em;text-transform:uppercase;color:#f4f1f4}
.game-desc,.category-intro{margin:0;color:#d1c2c6;max-width:640px;line-height:1.6}
.category-intro{margin-bottom:6px;max-width:760px}

/* ---- Play area: game on the left, video on the right (stacked on phones) ---- */
.play-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.video-col{order:-1}                      /* phones: video first, game below it */
@media(min-width:1100px){
  .play-layout{grid-template-columns:minmax(0,1fr) 340px}
  .video-col{order:0;position:sticky;top:84px}   /* desktop: video stays in view while you scroll */
}

/* ---- The game box and its LOCKED / UNLOCKED look ---- */
.game-area{position:relative;overflow:hidden;border:1px solid rgba(226,43,58,.35);border-radius:14px;background:#050507}
.game-frame{display:block;width:100%;height:760px;border:0;background:#050505}
.gate-overlay{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;align-items:flex-start;padding:16px;background:rgba(0,0,0,.84);backdrop-filter:blur(3px)}
.gate-message{position:sticky;top:34vh;margin-top:70px;max-width:320px;text-align:center}
.gate-icon{font-size:44px;line-height:1;margin-bottom:10px}
.gate-message strong{display:block;color:#ff354d;font-size:clamp(15px,2vw,20px);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.gate-message span{display:block;color:#d1c2c6;font-size:13px;line-height:1.5}
/* LOCKED: dark cover is on, game cannot be clicked */
.game-area.is-locked .gate-overlay{display:flex}
.game-area.is-locked .game-frame{pointer-events:none}
/* UNLOCKED: cover disappears, border glows red */
.game-area.is-unlocked .gate-overlay{display:none}
.game-area.is-unlocked{border-color:#e22b3a;box-shadow:0 0 18px rgba(226,43,58,.25)}

/* ---- Video card ---- */
.video-card{padding:12px;border:1px solid rgba(226,43,58,.35);border-radius:14px;background:linear-gradient(145deg,#18080b,#050505 70%,#101010)}
.video-card h2{margin:0 0 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#e22b3a}
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gate-note{margin:10px 2px 0;font-size:12px;line-height:1.45;color:#ff9ba4}
.gate-note.is-unlocked{color:#7dffa0}
.gate-note.is-failed{color:#ffd37d}

/* ---- Text blocks under the game (how to play, links) ---- */
.game-text{margin:26px 0;padding:20px;border:1px solid rgba(226,43,58,.25);border-radius:14px;background:#070709}
.game-text h2{margin:0 0 10px;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:#f4f1f4}
.game-text p{margin:0;color:#d1c2c6;line-height:1.7}
.game-links{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.plain-links{list-style:none;margin:0;padding:0;columns:3 220px;column-gap:20px}
.plain-links li{break-inside:avoid;padding:4px 0;font-size:13px}
.plain-links a{color:#ff2929}
.plain-links a:hover,.plain-links a:focus-visible{color:#fff;outline:none}
.plain-links .muted{color:#8e858b}

/* ---- Plain link list at the bottom of the arcade index (the Google-friendly fallback) ---- */
.static-list{width:min(1100px,92%);margin:30px auto 10px;padding:22px 0;border-top:1px solid rgba(226,43,58,.25)}
.static-list h2{margin:0 0 6px;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#f4f1f4}
.static-list h3{margin:22px 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#e22b3a}
.static-list p{margin:0 0 12px;color:#8e858b;font-size:12px}

/* ---- Framed game box (the look from the demo): glowing outer panel, red title bar, bordered inner box ----
   Used by the master game page for every NEW game. Add class "has-frame" to the .game-area and wrap the
   iframe in .game-box with a .game-title bar above it (the master page already does this).
   Games that draw their own title bar (like Reaper Skate) simply leave "has-frame" off. */
.game-area.has-frame{padding:18px;background:#050505;box-shadow:0 0 22px rgba(226,43,58,.14)}
.game-area.has-frame.is-unlocked{box-shadow:0 0 18px rgba(226,43,58,.25)}
.game-area.has-frame .game-box{border:2px solid #b30000;background:#080808}
.game-area.has-frame .game-title{margin:0;padding:10px 14px;background:#b30000;color:#fff;font:bold 18px/1.45 Verdana,Arial,sans-serif;text-transform:uppercase}
.game-area.has-frame .game-frame{background:#080808}
@media(max-width:560px){.game-area.has-frame{padding:6px}}

@media(max-width:700px){
  .game-head{grid-template-columns:1fr;padding:14px}
  .game-frame{height:640px}
  .gate-message{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){.gate-overlay{backdrop-filter:none}}

/* ---- Global Top 10 leaderboard (filled in by leaderboard.js) ----
   Desktop: sits under the video in the right column and stays in view with it.
   Phones: video first, then the game, then the leaderboard under the game. */
.leaderboard-card{margin-top:14px;padding:12px;border:1px solid rgba(226,43,58,.35);border-radius:14px;background:linear-gradient(145deg,#18080b,#050505 70%,#101010)}
.leaderboard-card h2{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#e22b3a}
.leaderboard-list{margin:0;padding:0;list-style:none;counter-reset:lb}
.leaderboard-list li{counter-increment:lb;display:flex;align-items:center;gap:8px;padding:5px 6px;border-bottom:1px solid rgba(226,43,58,.14);font-size:13px}
.leaderboard-list li:last-child{border-bottom:0}
.leaderboard-list li::before{content:counter(lb);flex:0 0 22px;color:#8e858b;font:700 11px 'Orbitron',sans-serif;text-align:right}
.leaderboard-list li:nth-child(1)::before{color:#d4af37}
.leaderboard-list li:nth-child(2)::before{color:#c9ccd8}
.leaderboard-list li:nth-child(3)::before{color:#c27c4a}
.leaderboard-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f4f1f4}
.leaderboard-list b{color:#ff6868;font-variant-numeric:tabular-nums}
.leaderboard-list li.is-you{background:rgba(226,43,58,.16);border-radius:6px}
.leaderboard-list li.leaderboard-empty{color:#aaa5ad;justify-content:center;padding:12px 6px}
.leaderboard-list li.leaderboard-empty::before{content:none}
@media(max-width:1099px){
  .video-col{display:contents}            /* lets the video and leaderboard sit apart on phones */
  .video-card{order:-1}
  .leaderboard-card{order:1;margin-top:0}
}
@media(min-width:1100px){
  .video-col{max-height:calc(100vh - 100px);overflow-y:auto}
}

/* The "enter your name" box that pops up over the bottom of the game when a run ends */
.score-prompt{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;padding:12px 14px;border:1px solid #e22b3a;border-radius:12px;background:rgba(8,3,5,.95);box-shadow:0 8px 30px rgba(0,0,0,.6)}
.score-prompt[hidden],.score-prompt [hidden]{display:none}
.score-prompt-title{margin:0 0 8px;color:#f4f1f4;font-size:14px}
.score-prompt-title b{color:#ff6868}
.score-prompt-row{display:flex;flex-wrap:wrap;gap:8px}
.score-prompt-name{flex:1 1 160px;min-width:0;padding:9px 10px;border:1px solid #555;border-radius:8px;background:#111;color:#fff}
.score-prompt-name:focus{outline:2px solid #e22b3a;outline-offset:1px}
.score-prompt-send,.score-prompt-skip{padding:9px 14px;border-radius:8px;font-weight:700}
.score-prompt-send{border:1px solid #ff4a4a;background:#b30000;color:#fff}
.score-prompt-send:hover{background:#e00000}
.score-prompt-send:disabled{opacity:.6;cursor:wait}
.score-prompt-skip{border:1px solid #444;background:#1a1a1f;color:#d1c2c6}
.score-prompt-msg{margin:6px 0 0;font-size:13px;color:#ff9ba4}
.score-prompt-msg:empty{display:none}
.score-prompt-msg.is-good{color:#7dffa0}