/* Spielhalle 4.0: dunkle Spielbühne im Look des Sicherheits-Studios. Liegt über games.css und ändert nur die Darstellung. */
.game-board.arena{--cy:#5fe4ff;--am:#ffd16a;--ok:#3cf0a8;--bad:#ff5468;--ink:#eaf6ff;--dim:#8fb3c9;position:relative;isolation:isolate;overflow:clip;border:0;border-radius:24px;padding:24px 26px;color:var(--ink);background:radial-gradient(120% 80% at 50% -10%,#173a5c 0%,#0b1d33 45%,#050c18 100%);box-shadow:0 26px 70px #04101e55,inset 0 0 0 1px #5fe4ff22}
.arena-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.arena-floor{position:absolute;left:-30%;right:-30%;bottom:-10%;height:55%;transform:perspective(600px) rotateX(64deg);transform-origin:bottom;background-image:linear-gradient(#5fe4ff30 1px,transparent 1px),linear-gradient(90deg,#5fe4ff30 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to top,#000 10%,transparent 85%);animation:arena-grid 7s linear infinite}
@keyframes arena-grid{to{background-position:0 52px}}
.arena-beam{position:absolute;top:-25%;width:36%;height:120%;filter:blur(20px);mix-blend-mode:screen;opacity:.45;transform-origin:top center}
.arena-beam.b1{left:0;background:linear-gradient(180deg,#bff4ff4d,transparent 70%);animation:arena-sweep 10s ease-in-out infinite}
.arena-beam.b2{right:0;background:linear-gradient(180deg,#ffe3a04d,transparent 70%);animation:arena-sweep 12s ease-in-out infinite reverse}
@keyframes arena-sweep{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-10deg)}}
.arena-fx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* Kopf, Steuerung, Fortschritt */
.arena .game-board-head{border:0;padding:0;margin:0 0 14px}
.arena .game-eyebrow{color:var(--cy);letter-spacing:2.5px;font-weight:800}
.arena .game-board-head h2{color:#fff;font-size:clamp(24px,2.8vw,34px);text-shadow:0 0 24px #5fe4ff44}
.arena .game-points{background:#ffd16a22;color:var(--am);border:1px solid #ffd16a66;box-shadow:0 0 18px #ffd16a22}
.arena .game-controls{border-color:#5fe4ff26;color:var(--dim)}
.arena .game-listen,.arena .game-sound{background:#0b1d33cc;color:var(--ink);border:1px solid #5fe4ff55;border-radius:30px}
.arena .game-voice-state{color:var(--dim)}
.arena .game-meter>div{height:10px;background:#0f2640;border:1px solid #5fe4ff26}
.arena .game-fill{background:linear-gradient(90deg,#1c8f6b,#3cf0a8);box-shadow:0 0 14px #3cf0a888}
.arena .game-count{color:var(--ok);font-variant-numeric:tabular-nums}
.arena .game-short{color:#cfe6f5;font-size:17px}
.arena .game-feedback{color:#cfe6f5}
.arena .game-feedback.positive{background:#0b3f31cc;border:1.5px solid var(--ok);color:#dfffee;backdrop-filter:blur(6px)}
.arena .game-feedback.gentle{background:#3a1d0ccc;border:1.5px solid #ffb35a;color:#ffe9cf;backdrop-filter:blur(6px)}
.arena .game-primary{background:linear-gradient(180deg,#ffe08f,#ffc44d);color:#132430;box-shadow:0 0 0 2px #ffd16a,0 8px 30px #ffd16a55,0 5px 0 #c48d22;font-size:17px;border-radius:14px}
.arena .game-board-footer{border-color:#5fe4ff26;color:var(--dim)}
.arena .game-board-footer button{background:#0b1d33cc;color:var(--ink);border:1px solid #5fe4ff44}
.arena .game-board-footer a,.arena .game-board-footer summary{color:var(--cy)}

/* Reaktionen der Bühne */
.arena.arena-ok::after,.arena.arena-bad::after,.arena.arena-won::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;animation:arena-flash .7s ease-out both}
.arena.arena-ok::after{background:radial-gradient(60% 60% at 50% 55%,#3cf0a840,transparent 70%)}
.arena.arena-bad::after{background:repeating-linear-gradient(0deg,#ff546816 0 3px,transparent 3px 7px)}
.arena.arena-won::after{background:radial-gradient(70% 70% at 50% 40%,#ffd16a40,transparent 70%);animation-duration:1.4s}
@keyframes arena-flash{from{opacity:1}to{opacity:0}}
.arena-shake{animation:arena-shake .45s ease-out}
@keyframes arena-shake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}

/* Memory: 3D-Wenden mit Holo-Rückseite */
.arena .memory-grid{perspective:1200px}
.arena .memory-card{border:0;background:transparent;box-shadow:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.arena .memory-cover{background:linear-gradient(135deg,#0f2a46,#0b1d33);box-shadow:inset 0 0 0 1.5px #5fe4ff66,0 10px 30px #0006;overflow:hidden}
.arena .memory-cover::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,#5fe4ff00,#5fe4ff33,#ffd16a2a,#3cf0a82a,#5fe4ff00);animation:arena-spin 6s linear infinite;opacity:.8}
.arena .memory-cover::after{content:'';position:absolute;inset:8px;border-radius:11px;border:1px dashed #5fe4ff55}
.arena .memory-cover>*{position:relative;z-index:1}
@keyframes arena-spin{to{transform:rotate(360deg)}}
.arena .memory-card:hover:not(.flipped):not(.matched){transform:translateY(-4px) rotateX(6deg)}
.arena .memory-card:hover:not(.flipped):not(.matched) .memory-cover{box-shadow:inset 0 0 0 2px var(--cy),0 0 30px #5fe4ff55}
.arena .memory-face{background:linear-gradient(160deg,#f6fbff,#dfeef7);box-shadow:inset 0 0 0 2px #5fe4ff88}
.arena .memory-card.flipped,.arena .memory-card.matched{transform:rotateY(180deg)}
.arena .memory-card.matched .memory-face{background:linear-gradient(160deg,#e9fff4,#c9f5df);box-shadow:inset 0 0 0 3px var(--ok),0 0 30px #3cf0a877}
.arena .memory-card.matched{box-shadow:none}

/* Bildkarten sortieren: fliegende Karte, leuchtende Körbe */
.arena .sort-card{background:linear-gradient(160deg,#f6fbff,#e3eef6);border:0;box-shadow:0 0 0 2px #5fe4ff88,0 20px 50px #0008;color:#0b1d33;animation:arena-cardin .6s cubic-bezier(.16,1,.3,1) both}
@keyframes arena-cardin{from{opacity:0;transform:perspective(800px) translateZ(-300px) rotateX(20deg)}to{opacity:1;transform:none}}
.arena .sort-card-tag{color:#2a6f8e}
.arena .sort-card.sorted{box-shadow:0 0 0 3px var(--ok),0 0 40px #3cf0a877;background:linear-gradient(160deg,#effff7,#d1f6e4);animation:none;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s}
.arena .sort-card.sorted.go{transform:translateX(-58%) scale(.72) rotate(-6deg)}
.arena .sort-card.sorted.stop{transform:translateX(58%) scale(.72) rotate(6deg)}
.arena .sort-bucket{background:#0b1d33cc;border:2px dashed #5fe4ff66;color:var(--ink);transition:all .25s}
.arena .bucket-go>span{color:var(--ok)}.arena .bucket-stop>span{color:var(--am)}
.arena .sort-bucket:hover:not(:disabled),.arena .sort-bucket.drop-ready{border-style:solid;border-color:var(--cy);box-shadow:0 0 30px #5fe4ff44;background:#103050}
.arena .sort-bucket.got{border-style:solid;border-color:var(--ok);background:#0b3f31;box-shadow:0 0 40px #3cf0a866;opacity:1}
.arena .sort-bucket:disabled:not(.got){opacity:.4}
.arena .card-listen{background:#0b1d33;color:var(--ink);border:1px solid #5fe4ff66}
.arena .sort-stack-done{color:#fff}

/* Gefahren entdecken und Unterschiede finden: Scanner-Puls und Zielmarken */
.arena .scene-comparison figure{border:0;box-shadow:0 0 0 1.5px #5fe4ff55,0 16px 40px #0007;background:#0b1d33}
.arena .scene-comparison figcaption{background:#0f2640;color:var(--cy);letter-spacing:1.5px}
.arena .scene-comparison.two-scenes figure:last-child figcaption{background:#3a2a08;color:var(--am)}
.arena .scene-hit-area{overflow:hidden}
.arena .scene-hit-area::after{content:'';position:absolute;left:0;right:0;height:22%;top:-22%;pointer-events:none;background:linear-gradient(180deg,transparent,#5fe4ff22,transparent);animation:arena-scanline 4.5s linear infinite}
@keyframes arena-scanline{to{top:100%}}
.arena-ping{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid var(--cy);pointer-events:none;z-index:3;animation:arena-ping .85s ease-out forwards}
.arena-ping.miss{border-color:var(--bad)}
@keyframes arena-ping{to{transform:scale(5);opacity:0}}
.arena .scene-zone.found{border:0;box-shadow:none}
.arena .scene-zone.found::before{content:'';position:absolute;inset:-6px;border-radius:10px;background:linear-gradient(var(--ok),var(--ok)) top left/16px 3px no-repeat,linear-gradient(var(--ok),var(--ok)) top left/3px 16px no-repeat,linear-gradient(var(--ok),var(--ok)) top right/16px 3px no-repeat,linear-gradient(var(--ok),var(--ok)) top right/3px 16px no-repeat,linear-gradient(var(--ok),var(--ok)) bottom left/16px 3px no-repeat,linear-gradient(var(--ok),var(--ok)) bottom left/3px 16px no-repeat,linear-gradient(var(--ok),var(--ok)) bottom right/16px 3px no-repeat,linear-gradient(var(--ok),var(--ok)) bottom right/3px 16px no-repeat;filter:drop-shadow(0 0 6px #3cf0a8);animation:arena-lockon .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes arena-lockon{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}
.arena .scene-zone.found>span{background:var(--ok);color:#03261b;border-color:#03261b;box-shadow:0 0 14px #3cf0a8}
.arena .inspection-tile{background:linear-gradient(160deg,#0f2a46,#0b1d33);border:0;box-shadow:inset 0 0 0 1.5px #5fe4ff55;color:var(--ink)}
.arena .inspection-tile:hover:not(.found){box-shadow:inset 0 0 0 2px var(--cy),0 0 26px #5fe4ff44}
.arena .inspection-tile.found{background:linear-gradient(160deg,#0f6a4e,#0b3f31);box-shadow:inset 0 0 0 2.5px var(--ok),0 0 34px #3cf0a866}
.arena .inspection-tile.found i{color:var(--ok)}
.arena .game-region-alternative summary{color:var(--cy)}
.arena .game-region-alternative button{background:#0b1d33;color:var(--ink);border:1px solid #5fe4ff55}

/* Reihenfolge als Prozesskette */
.arena .game-order-list{position:relative;gap:12px}
.arena .game-order-list::before{content:'';position:absolute;left:30px;top:20px;bottom:20px;width:3px;background:linear-gradient(#5fe4ff55,#5fe4ff22);border-radius:3px}
.arena .game-order-item{position:relative;background:linear-gradient(135deg,#0f2a46,#0b1d33);border:0;box-shadow:inset 0 0 0 1.5px #5fe4ff55;color:var(--ink);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.arena .game-order-item:hover{box-shadow:inset 0 0 0 2px var(--cy),0 0 24px #5fe4ff33}
.arena .order-number{background:#0b1d33;color:var(--cy);border:2px solid var(--cy);box-shadow:0 0 12px #5fe4ff55;position:relative;z-index:1}
.arena .game-order-item [data-read]{color:var(--cy)}
.arena .order-moves button{background:#0b1d33;color:var(--ink);border:1px solid #5fe4ff66}
.arena .game-order-list.solved .game-order-item{background:linear-gradient(135deg,#0f6a4e,#0b3f31);animation:arena-chain .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.arena .game-order-list.solved .order-number{border-color:var(--ok);color:var(--ok);box-shadow:0 0 16px #3cf0a8}
.arena .game-order-list.solved::before{background:linear-gradient(var(--ok),var(--ok));box-shadow:0 0 12px #3cf0a8}
@keyframes arena-chain{0%{box-shadow:inset 0 0 0 1.5px #5fe4ff55}50%{box-shadow:inset 0 0 0 3px var(--ok),0 0 40px #3cf0a888;transform:translateX(6px)}100%{box-shadow:inset 0 0 0 2px var(--ok),0 0 20px #3cf0a844;transform:none}}

/* Siegerbildschirm als kleine Show */
.arena .game-win{color:var(--ink)}
.arena .game-win h2{color:#fff;font-size:clamp(28px,3.5vw,42px);background:linear-gradient(90deg,#fff,#bff4ff 40%,#ffd16a);-webkit-background-clip:text;background-clip:text;color:transparent}
.arena .win-medallion{position:relative;background:radial-gradient(circle,#ffe7a8,#ffc44d);box-shadow:0 0 0 6px #0b1d33,0 0 0 9px var(--am),0 0 60px #ffd16a99}
.arena .win-ring{position:absolute;inset:-22px;border-radius:50%;border:2px dashed #5fe4ff88;animation:arena-spin 9s linear infinite}
.arena .game-earned{color:var(--am);font-size:22px;font-weight:800;text-shadow:0 0 18px #ffd16a66}
.arena .game-reward-track span{background:#0b1d33;border:1px solid #5fe4ff44;color:var(--ink)}

/* Üben-Übersicht im gleichen Look */
.game-tile{transition:transform .25s,box-shadow .25s}
.game-tile:hover{transform:translateY(-4px);box-shadow:0 0 0 2px #5fe4ff,0 18px 40px #0b1d3333}

/* Ruhig bei „Bewegung reduzieren“ */
.arena-calm *,.arena-calm *::before,.arena-calm *::after,.arena-calm::after{animation:none!important;transition:none!important}

@media(max-width:760px){.game-board.arena{padding:18px 14px;border-radius:18px}.arena .game-order-list::before{left:24px}}

/* ===== Spielehalle (Übersicht): Neon-Schild, Hauptattraktion, Filter, Spielautomaten ===== */
.arcade{--cy:#5fe4ff;--am:#ffd16a;--ok:#3cf0a8;--red:#ff6b5e;--vio:#b38cff;--mint:#3cf0a8;--blue:#6aa8ff;--ink:#eaf6ff;--dim:#8fb3c9;max-width:1180px;margin:0 auto;color:var(--ink)}
.arcade-kicker{margin:0 0 8px;font-size:12px;letter-spacing:3px;font-weight:800;color:var(--cy)}
.arcade-hero{position:relative;isolation:isolate;overflow:clip;border-radius:28px;padding:44px 40px 36px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:end;background:radial-gradient(110% 90% at 30% -10%,#1b4670 0%,#0b1d33 45%,#050c18 100%);box-shadow:0 26px 70px #04101e55,inset 0 0 0 1px #5fe4ff26}
.arcade-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.arcade-floor{position:absolute;left:-30%;right:-30%;bottom:-18%;height:70%;transform:perspective(600px) rotateX(64deg);transform-origin:bottom;background-image:linear-gradient(#5fe4ff38 1px,transparent 1px),linear-gradient(90deg,#5fe4ff38 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to top,#000 10%,transparent 85%);animation:arena-grid 6s linear infinite}
.arcade-beam{position:absolute;top:-30%;width:30%;height:140%;filter:blur(22px);mix-blend-mode:screen;opacity:.5;transform-origin:top center}
.arcade-beam.b1{left:2%;background:linear-gradient(180deg,#5fe4ff55,transparent 70%);animation:arena-sweep 9s ease-in-out infinite}
.arcade-beam.b2{left:38%;background:linear-gradient(180deg,#ff6bd055,transparent 70%);animation:arena-sweep 12s ease-in-out infinite reverse}
.arcade-beam.b3{right:2%;background:linear-gradient(180deg,#ffd16a55,transparent 70%);animation:arena-sweep 10s ease-in-out infinite}
.arcade-neon{margin:0;font-size:clamp(46px,8vw,104px);line-height:.95;font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 0 6px #fff,0 0 18px var(--cy),0 0 42px var(--cy),0 0 80px #5fe4ff88;animation:arcade-flicker 6s infinite}
@keyframes arcade-flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55;text-shadow:none}}
.arcade-sub{margin:14px 0 0;font-size:19px;color:#cfe6f5;font-weight:600}
.arcade-hud{display:flex;gap:14px}
.arcade-panel{min-width:170px;padding:16px 20px;border-radius:18px;background:#071526cc;border:1px solid #5fe4ff44;box-shadow:0 0 30px #5fe4ff1f;backdrop-filter:blur(6px)}
.arcade-panel small{display:block;font-size:11px;letter-spacing:2px;font-weight:800;color:var(--dim)}
.arcade-panel strong{display:block;margin-top:4px;font-size:42px;line-height:1;font-weight:900;color:var(--am);text-shadow:0 0 18px #ffd16a77;font-variant-numeric:tabular-nums}
.arcade-panel strong span{font-size:22px;color:var(--dim);text-shadow:none}
.arcade-bar{display:block;height:8px;margin-top:10px;border-radius:6px;background:#0f2640;overflow:hidden}
.arcade-bar b{display:block;height:100%;background:linear-gradient(90deg,#1c8f6b,#3cf0a8);box-shadow:0 0 12px #3cf0a8}
.arcade-feature{position:relative;margin:22px 0 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#0f2a46,#081627);box-shadow:inset 0 0 0 1.5px #ffd16a66,0 0 50px #ffd16a1f}
.arcade-feature::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,#ffd16a0d 0 18px,transparent 18px 36px)}
.arcade-feature-copy{position:relative;padding:30px 32px}
.arcade-feature-copy .arcade-kicker{color:var(--am)}
.arcade-feature h2{margin:0 0 8px;font-size:clamp(28px,3vw,40px);color:#fff}
.arcade-feature p{margin:0 0 18px;font-size:17px;color:#cfe6f5;line-height:1.55}
.arcade-lamps{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.arcade-lamps span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#0b1d33;border:2px solid #5fe4ff55;color:var(--dim);font-weight:900;font-size:18px}
.arcade-lamps span.lit{background:radial-gradient(circle,#7dffd0,#1c8f6b);border-color:var(--ok);color:#03261b;box-shadow:0 0 18px #3cf0a8aa}
.arcade-start{display:inline-flex;align-items:center;gap:12px;padding:18px 30px;border-radius:16px;text-decoration:none;font-weight:900;font-size:21px;color:#132430;background:linear-gradient(180deg,#ffe08f,#ffc44d);box-shadow:0 0 0 2px #ffd16a,0 10px 36px #ffd16a66,0 6px 0 #c48d22;animation:qs-breathe 2.4s ease-in-out infinite}
.arcade-start:active{transform:translateY(3px);box-shadow:0 0 0 2px #ffd16a,0 3px 0 #c48d22}
.arcade-feature-art{position:relative;min-height:260px}
.arcade-feature-art>*{margin:0;height:100%}
.arcade-feature-art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1) contrast(1.05)}
.arcade-feature-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#081627 0%,transparent 35%),linear-gradient(0deg,#081627aa,transparent 40%);pointer-events:none}
.arcade-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;padding:16px 18px;border-radius:18px;background:#0b1d33;box-shadow:inset 0 0 0 1px #5fe4ff26}
.arcade-badges .arcade-kicker{margin:0 8px 0 0}
.arcade-badges>span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:30px;background:#102b48;border:1px solid #ffd16a66;color:var(--ink);font-weight:700;font-size:14px;box-shadow:0 0 14px #ffd16a22}
.arcade-badges>span .game-icon{width:30px;height:30px;border-radius:50%;overflow:hidden}
.arcade-badges .hint{border:0;background:none;box-shadow:none;color:var(--dim)}
.arcade-filter{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
.arcade-filter button{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:30px;border:1.5px solid #5fe4ff44;background:#0b1d33;color:var(--ink);font:800 15px Manrope,system-ui;cursor:pointer;transition:all .2s}
.arcade-filter button b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:#ffffff14;font-size:12px}
.arcade-filter button:hover{border-color:var(--cy)}
.arcade-filter button.on{background:var(--cy);color:#06233a;border-color:var(--cy);box-shadow:0 0 22px #5fe4ff66}
.arcade-zone{margin:26px 0 0}
.arcade-zone-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #5fe4ff33}
.arcade-zone-head h2{margin:0;font-size:22px;color:#14343c}
.arcade-zone-head span{color:#5a7279;font-weight:700;font-size:14px}
.arcade-zone-head a{margin-left:auto;font-weight:800;font-size:14px;color:#1a7ea0;text-decoration:none}
.arcade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.arcade-cab{--c:var(--cy);position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,#112b47,#071526);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent),0 14px 30px #0b1d3333;transition:transform .25s,box-shadow .25s;overflow:hidden}
.arcade-cab.t-am{--c:var(--am)}.arcade-cab.t-red{--c:var(--red)}.arcade-cab.t-vio{--c:var(--vio)}.arcade-cab.t-mint{--c:var(--mint)}.arcade-cab.t-blue{--c:var(--blue)}
.arcade-cab::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--c);box-shadow:0 0 18px var(--c)}
.arcade-cab:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 2px var(--c),0 0 34px color-mix(in srgb,var(--c) 45%,transparent),0 20px 40px #0b1d3355}
.arcade-cab-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.arcade-type{font-size:11px;letter-spacing:1.6px;font-weight:900;text-transform:uppercase;color:var(--c)}
.arcade-badge{font-size:12px;font-weight:900;padding:4px 10px;border-radius:20px;background:#3cf0a822;color:var(--ok);border:1px solid #3cf0a866}
.arcade-badge.pts{background:#ffd16a22;color:var(--am);border-color:#ffd16a66}
.arcade-screen{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#050c18;box-shadow:inset 0 0 0 1px #ffffff14}
.arcade-screen .game-icon{width:100%;height:100%;display:block}
.arcade-screen .game-icon img,.arcade-screen .game-icon svg{width:100%;height:100%;object-fit:cover}
.arcade-screen i{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff08 0 2px,transparent 2px 4px),linear-gradient(180deg,transparent 60%,#050c18aa)}
.arcade-cab h3{margin:0;font-size:18px;line-height:1.3;color:#fff;min-height:2.6em}
.arcade-play{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;color:var(--c)}
.arcade-play b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c);color:#06233a;box-shadow:0 0 16px var(--c);transition:transform .2s}
.arcade-cab:hover .arcade-play b{transform:scale(1.15)}
.arcade-cab.won .arcade-screen::after{content:"\2713";position:absolute;top:8px;right:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ok);color:#03261b;font-weight:900;box-shadow:0 0 14px #3cf0a8}
.arcade-note{margin:26px 0 0;font-size:13px;color:#5a7279}
@media(max-width:900px){.arcade-hero{grid-template-columns:1fr;padding:32px 22px 26px}.arcade-hud{flex-wrap:wrap}.arcade-panel{flex:1;min-width:140px}.arcade-feature{grid-template-columns:1fr}.arcade-feature-art{min-height:180px;order:-1}.arcade-feature-art::after{background:linear-gradient(0deg,#081627 0%,transparent 60%)}}
@media(max-width:560px){.arcade-hero{border-radius:20px}.arcade-neon{letter-spacing:2px}.arcade-panel strong{font-size:34px}.arcade-feature-copy{padding:22px 18px}.arcade-start{width:100%;justify-content:center}.arcade-grid{grid-template-columns:1fr 1fr;gap:10px}.arcade-cab{padding:10px;gap:8px;border-radius:16px}.arcade-cab h3{font-size:15px}.arcade-play{font-size:13px}.arcade-play b{width:30px;height:30px}.arcade-filter button{padding:9px 13px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.arcade *{animation:none!important;transition:none!important}}