/* The lobby is a cabinet; the existing game screens remain untouched. */
body:has(#titleScreen.active #arcadeHub){background:linear-gradient(#0506104d,#05061091),url('/rad/tcg/arcade/haunted-arcade.webp') center top/cover fixed,var(--rd-bg-deep)}
body:has(#titleScreen.active #arcadeHub) #main{max-width:1180px;margin:0 auto;padding:22px 30px 48px}
#arcadeHub{position:relative;isolation:isolate}
/* Beveled cabinet canopy: luminous trim around recessed marquee glass. */
.arcade-marquee{position:relative;isolation:isolate;min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:36px 28px 34px;border:0;background:none;filter:drop-shadow(0 10px 12px #0009)}
.arcade-marquee::before,.arcade-marquee::after{content:'';position:absolute;pointer-events:none;z-index:-1;clip-path:polygon(5% 0,95% 0,100% 18%,97% 91%,92% 100%,8% 100%,3% 91%,0 18%)}
.arcade-marquee::before{inset:0;background:linear-gradient(125deg,#85edff 0%,#3e507d 9%,#15182f 28%,#ab47d8 56%,#ff72e9 78%,#342449 94%)}
.arcade-marquee::after{inset:3px 3px 9px;background:linear-gradient(175deg,#ffffff0d,transparent 38%),radial-gradient(ellipse at 65% 20%,#9724b62e,transparent 65%),repeating-linear-gradient(0deg,transparent 0 3px,#0002 3px 4px),linear-gradient(#101426ed,#070b18f5);box-shadow:inset 0 12px 20px #0008}
.arcade-marquee .micro{font:10px/1.5 monospace;letter-spacing:.22em;color:#c5c5e7;margin:0 0 8px}
.arcade-marquee h1{font:clamp(50px,7vw,88px)/.84 RD Horror,Impact,sans-serif;letter-spacing:.025em;margin:0;text-transform:uppercase;transform:rotate(-2deg);color:var(--rd-toxic);text-shadow:3px 4px #163817,0 0 24px #71f66633}
.arcade-marquee h1 span{display:block;font-size:1.14em;color:var(--rd-magenta);text-shadow:3px 4px #42124e,0 0 24px #ff4be344}
.arcade-marquee .arcade-tagline{margin:18px 0 0;color:#d2d6ee;font-size:13px;letter-spacing:.06em}
.arcade-cabinet{padding:22px;background:linear-gradient(130deg,#101321f7,#060d16f7);border:1px solid #505176;border-top:2px solid var(--rd-magenta);margin-top:18px;border-radius:10px;box-shadow:inset 0 0 0 5px #060910,0 0 22px #973dff22}
.arcade-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.arcade-section-heading h2{font:700 clamp(15px,2.3vw,23px)/1.2 monospace;letter-spacing:.13em;color:var(--rd-cyan);margin:0;text-shadow:0 0 14px #38e6ff50}
.arcade-section-heading>span{font:9px/1.4 monospace;letter-spacing:.14em;color:#a2b0cb}
.arcade-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.arcade-mode{--mode:var(--rd-cyan);position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--mode);border-radius:7px;background:#080f1c;box-shadow:0 0 10px color-mix(in srgb,var(--mode) 23%,transparent),inset 0 0 0 3px #040711;transition:transform .18s,box-shadow .18s}
.arcade-mode:hover{transform:translateY(-3px);box-shadow:0 0 22px color-mix(in srgb,var(--mode) 32%,transparent)}
.arcade-mode[data-mode=duos]{--mode:var(--rd-magenta)}.arcade-mode[data-mode=tournament]{--mode:var(--rd-gold)}.arcade-mode[data-mode=ai]{--mode:var(--rd-toxic)}
.arcade-mode-art{height:164px;position:relative;overflow:hidden;background:radial-gradient(ellipse,color-mix(in srgb,var(--mode) 18%,#091321),#04070e)}
/* Show only the illustration window: exclude printed title, side stats and frame. */
.arcade-mode-art img{position:absolute;top:0;left:-32.4%;width:142%;height:auto;max-width:none;transform:translateY(var(--mode-art-top,-14.5%));margin:0;filter:saturate(1.1);opacity:.93}
.arcade-mode[data-mode=tournament]{--mode-art-top:-22%}
.arcade-mode[data-mode=ai]{--mode-art-top:-17%}
.arcade-mode-art::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080f1c,transparent 65%)}
.arcade-mode-body{position:relative;display:flex;flex-direction:column;flex:1;text-align:center;padding:0 13px 14px;margin-top:-15px}
.arcade-mode h3{font:47px/1 RD Horror,Impact,sans-serif;color:var(--mode);margin:0 0 5px;text-shadow:0 0 15px color-mix(in srgb,var(--mode) 30%,transparent)}
.arcade-mode[data-mode=tournament] h3{font-size:29px;line-height:47px}
.arcade-mode strong{font:700 10px/1.5 monospace;letter-spacing:.07em;color:var(--mode);text-transform:uppercase}
.arcade-mode p{font:12px/1.5 Arial,sans-serif;color:#b8c9e1;margin:7px 0 15px;min-height:36px}
.arcade-mode .arcade-mode-cta{display:flex;justify-content:center;align-items:center;min-height:42px;margin-top:auto;padding:10px 5px;background:#0c1624;border:1px solid var(--mode);color:var(--mode);border-radius:4px;font:700 11px/1.3 Arial,sans-serif;letter-spacing:.05em;box-shadow:inset 0 0 10px color-mix(in srgb,var(--mode) 10%,transparent),0 0 8px color-mix(in srgb,var(--mode) 18%,transparent);cursor:pointer}
.arcade-mode-cta:hover{background:color-mix(in srgb,var(--mode) 15%,#0c1624)}
.arcade-mode .arcade-mode-cta+.arcade-mode-cta{margin-top:8px}
.arcade-prize{display:grid;grid-template-columns:150px 1fr auto;gap:22px;align-items:center;margin-top:20px;padding:18px 24px;border:1px solid #7565ff;border-radius:7px;background:linear-gradient(115deg,#13213c,#0c1020 45%,#151127);box-shadow:inset 0 0 0 3px #090d18,0 0 15px #7354ff26}
.arcade-prize img{width:130px;height:130px;object-fit:contain;transform:rotate(-8deg);filter:drop-shadow(0 0 10px #d644ff44)}
.arcade-prize h2{font:36px/1 RD Horror,Impact,sans-serif;letter-spacing:.02em;color:var(--rd-magenta);margin:0 0 7px}
.arcade-prize p{font-size:12px;color:#b8c9e1;margin:0}
.arcade-prize .btn{border-color:var(--rd-magenta);color:var(--rd-magenta);background:#23102b;font-size:11px;min-width:145px;justify-content:center}
.arcade-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.arcade-shortcuts a{padding:20px 12px;text-align:center;border:1px solid #2f4564;background:linear-gradient(145deg,#131c2ae8,#090f1de8);border-radius:5px;transition:border-color .15s}
.arcade-shortcuts a:hover{border-color:var(--rd-cyan)}
.arcade-shortcuts svg{width:28px;height:28px;display:block;margin:0 auto 10px;fill:none;stroke:var(--rd-cyan);stroke-width:1.5;filter:drop-shadow(0 0 5px #38e6ff66)}
.arcade-shortcuts strong{display:block;font:700 10px/1.4 monospace;text-transform:uppercase;letter-spacing:.04em;color:#dbe9ff}
.arcade-shortcuts small{display:block;color:#aab9d1;font:11px/1.5 Arial,sans-serif;margin-top:5px}
#titleScreen .hub-bottom{margin-top:28px}.arcade-page #titleScreen .mode-panel,.arcade-page #titleScreen .objective-panel{padding:24px}
/* Marketing shell uses the same materials without changing its content. */
body.home-page .hero-scene{background:linear-gradient(90deg,#080d19eb,#15102988),url('/rad/tcg/arcade/haunted-arcade.webp') center/cover;border-color:#6a438d}
body.home-page .hero-copy h1{font-family:RD Horror,Impact,sans-serif;font-weight:400;letter-spacing:.02em}
body.home-page .hero-copy h1 em{color:var(--rd-magenta)}
@media(min-width:1500px){body:has(#titleScreen.active #arcadeHub) #main{padding-top:32px}.arcade-marquee{min-height:290px}.arcade-mode-art{height:190px}}
@media(max-width:800px){body:has(#titleScreen.active #arcadeHub){background-attachment:scroll;background-size:auto 1000px;background-repeat:no-repeat}body:has(#titleScreen.active #arcadeHub) #main{padding:16px}.arcade-marquee{min-height:210px}.arcade-cabinet{padding:18px}.arcade-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.arcade-mode-art{height:150px}.arcade-prize{grid-template-columns:85px 1fr;gap:12px;padding:18px}.arcade-prize img{width:85px;height:110px;grid-row:1/3}.arcade-prize h2{font-size:30px}.arcade-prize .btn{grid-column:2;min-width:0;width:fit-content}.arcade-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.arcade-marquee{min-height:188px;padding:28px 14px 32px}.arcade-marquee h1{font-size:51px}.arcade-marquee .micro{font-size:8px;letter-spacing:.1em}.arcade-marquee .arcade-tagline{font-size:11px}.arcade-cabinet{padding:14px 12px}.arcade-section-heading>span{display:none}.arcade-section-heading h2{font-size:15px;letter-spacing:.09em}.arcade-modes{gap:12px}.arcade-mode-art{height:114px}.arcade-mode h3{font-size:38px}.arcade-mode[data-mode=tournament] h3{font-size:22px;line-height:38px}.arcade-mode p{font-size:11px;margin-bottom:11px}.arcade-mode-body{padding:0 9px 10px}.arcade-mode .arcade-mode-cta{font-size:10px;min-height:44px}.arcade-prize h2{font-size:25px}.arcade-prize p{font-size:11px}.arcade-shortcuts a{padding:15px 10px}}
@media(prefers-reduced-motion:reduce){.arcade-mode:hover{transform:none}}

/* Guest entry: a compact illuminated start button beneath the lobby logo. */
.arcade-signup{display:inline-flex;align-items:center;justify-content:center;gap:15px;margin-top:20px;min-height:46px;padding:0 16px;border:1px solid #fa72e8;border-radius:5px;background:linear-gradient(110deg,#38154d,#661457);color:#fff;font:800 13px/1.2 Arial,sans-serif;text-transform:uppercase;letter-spacing:.07em;box-shadow:inset 0 1px #ffffff26,0 0 16px #ee3cdf30;text-decoration:none}
.arcade-signup[hidden]{display:none}
.arcade-signup-start{padding-right:15px;border-right:1px solid #ef8ce35c;color:#83efff;font:700 9px/1.5 monospace;letter-spacing:.12em}
.arcade-signup svg{width:16px;height:16px;fill:none;stroke:#83efff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arcade-signup:hover{background:linear-gradient(110deg,#4c1b65,#841c71);border-color:#ffb1f3}
.arcade-signup:focus-visible{outline:2px solid #83efff;outline-offset:5px}
@media(max-width:440px){.arcade-signup{gap:11px;margin-top:17px;padding-inline:12px;font-size:12px}.arcade-signup-start{padding-right:11px;font-size:8px}}

/* Haunted CRT marquee: phosphor haze, a rolling scanline and electric trim. */
.arcade-marquee>h1,.arcade-marquee>p,.arcade-marquee>.arcade-signup{position:relative;z-index:1}
.arcade-marquee h1{animation:arcade-letter-shudder 6.7s steps(1,end) infinite;text-shadow:3px 4px #163817,0 0 12px #86ff7955,0 0 36px #71f66655}
.arcade-marquee h1 span{text-shadow:3px 4px #42124e,0 0 12px #ff4be366,0 0 36px #ff4be355}
.arcade-marquee::before{animation:arcade-electric-trim 7s linear infinite}
.arcade-marquee::after{background:repeating-linear-gradient(0deg,transparent 0 2px,#0004 2px 4px),radial-gradient(ellipse at center,#172139,#070b18 75%)}
.arcade-marquee-light{position:absolute;inset:3px 3px 9px;z-index:0;overflow:hidden;pointer-events:none;clip-path:polygon(5% 0,95% 0,100% 18%,97% 91%,92% 100%,8% 100%,3% 91%,0 18%);background:radial-gradient(ellipse at 38% 42%,#70ff762e,transparent 43%),radial-gradient(ellipse at 63% 67%,#db28fa3d,transparent 48%)}
.arcade-marquee-light::before{content:'';position:absolute;inset:-15%;background:radial-gradient(ellipse at 38% 42%,#4cff7970,transparent 34%),radial-gradient(ellipse at 63% 64%,#d026ff80,transparent 37%);animation:arcade-ghost-light 6s ease-in-out infinite alternate;mix-blend-mode:screen}
.arcade-marquee-light::after{content:'';position:absolute;left:0;right:0;top:-30%;height:26%;background:linear-gradient(transparent,#8cffe91c 65%,#b8fff04d 93%,transparent);mask-image:linear-gradient(90deg,#000 0%,#0009 16%,#000 23%,#0003 39%,#000c 44%,#000 58%,#0005 72%,#000 83%,#0008 100%);clip-path:polygon(0 0,100% 0,100% 98%,83% 96%,82% 99%,61% 94%,60% 98%,38% 95%,37% 100%,18% 96%,17% 99%,0 96%);animation:arcade-crt-roll 6s linear infinite;opacity:.65}
@keyframes arcade-ghost-light{0%{transform:translate(-6%,-3%) scale(.94);opacity:.4}60%{opacity:.9}100%{transform:translate(6%,4%) scale(1.12);opacity:.6}}
@keyframes arcade-crt-roll{0%{transform:translate(0,0) skewY(.3deg);opacity:.4}19%{transform:translate(-2px,125%) skewY(-.5deg);opacity:.7}20%{transform:translate(3px,119%) skewY(.8deg);opacity:.35}22%{transform:translate(-1px,146%) skewY(-.2deg);opacity:.65}44%{transform:translate(0,285%) skewY(.3deg)}45%{transform:translate(-3px,279%) skewY(-.7deg);opacity:.35}47%{transform:translate(2px,306%) skewY(.5deg);opacity:.8}65%{transform:translate(0,416%) skewY(-.2deg)}66%{transform:translate(3px,410%) skewY(.7deg);opacity:.45}69%{transform:translate(-2px,449%) skewY(-.4deg);opacity:.65}80%,100%{transform:translate(0,510%) skewY(.2deg);opacity:.4}}
@keyframes arcade-letter-shudder{0%,30%,34%,76%,80%,100%{transform:rotate(-2deg) translate(0,0)}31%{transform:rotate(-2deg) translate(-2px,1px) skewX(-1deg)}32%{transform:rotate(-2deg) translate(2px,-1px) skewX(1deg)}33%{transform:rotate(-2deg) translate(-1px,0)}77%{transform:rotate(-2deg) translate(1px,1px) skewX(.8deg)}78%{transform:rotate(-2deg) translate(-2px,-1px) skewX(-1deg)}79%{transform:rotate(-2deg) translate(1px,0)}}
@keyframes arcade-electric-trim{0%,68%,72%,100%{opacity:1}69%{opacity:.45}70%{opacity:.95}71%{opacity:.6}}
html.match-battery .arcade-marquee-light::after{animation:none;display:none}
html.match-effects-reduced .arcade-marquee::before,html.match-effects-reduced .arcade-marquee-light::before,html.match-effects-reduced .arcade-marquee-light::after,
html.match-effects-off .arcade-marquee::before,html.match-effects-off .arcade-marquee-light::before,html.match-effects-off .arcade-marquee-light::after{animation:none}
@media(prefers-reduced-motion:reduce){.arcade-marquee::before,.arcade-marquee-light::before,.arcade-marquee-light::after{animation:none}}

html.match-effects-reduced .arcade-marquee h1,html.match-effects-off .arcade-marquee h1{animation:none}
@media(prefers-reduced-motion:reduce){.arcade-marquee h1{animation:none}}