:root {
--arcade-bg: #05070A; --arcade-panel: #0A0E14; --neon-cyan: #00D2FF;
--neon-green: #00FF88;
--neon-pink: #FF49C5;
--neon-yellow: #FCED34;
} body.post-type-archive-beit_game,
body.single-beit_game {
background: var(--arcade-bg) !important;
} .beit-arcade {
--ink: #EAF2F7;
--ink-soft: #9FB3C0;
--line: rgba(255,255,255,.14);
--line-strong: rgba(255,255,255,.22);
--bg-alt: rgba(255,255,255,.04);
color: var(--ink);
}
.beit-arcade h1,
.beit-arcade h2,
.beit-arcade h3 { color: #fff; }
.beit-arcade .beit-lede { color: var(--ink-soft); }
.beit-arcade .beit-tag { color: var(--ink-soft); }
.beit-arcade .beit-tag a,
.beit-arcade .beit-game-back a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.beit-arcade .beit-tag a:hover,
.beit-arcade .beit-game-back a:hover { color: #fff; } .spill-shine {
background-image: linear-gradient(to right, #E85D04 0%, var(--neon-yellow) 33.3%, var(--neon-cyan) 66.6%, #E85D04 100%);
background-size: 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: spillShine 5s linear infinite;
filter: drop-shadow(0 0 15px rgba(232, 93, 4, 0.35));
display: inline-block;
}
@keyframes spillShine {
0%   { background-position: 0% center; }
100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
.spill-shine { animation: none; }
} .beit-arcade-section { padding-top: var(--space-8); }
.beit-game-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: stretch;
} .beit-game {
background: transparent;
isolation: isolate;
position: relative;
padding: var(--space-5);
border-radius: 58px 0 58px 58px;
display: flex;
flex-direction: column;
transition: transform .2s ease, filter .2s ease;
--neon: var(--neon-cyan);
}
.beit-game::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: 58px 0 58px 58px;
background: rgba(255,255,255,.045);
-webkit-mask: var(--notch-mask);
mask: var(--notch-mask);
}
.beit-game:nth-child(4n+1) { --neon: var(--neon-cyan); }
.beit-game:nth-child(4n+2) { --neon: var(--neon-green); }
.beit-game:nth-child(4n+3) { --neon: var(--neon-pink); }
.beit-game:nth-child(4n+4) { --neon: var(--neon-yellow); }
.beit-game:hover { transform: translateY(-4px); filter: drop-shadow(0 0 16px var(--neon)); }
.beit-game-thumb {
aspect-ratio: 4 / 3;
margin: 0 0 var(--space-3);
border: 1px solid var(--line);
background: #000;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.beit-game-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beit-game-thumb--ph span { font-size: 40px; color: var(--neon); text-shadow: 0 0 12px var(--neon); }
.beit-game-title { font-size: 22px; line-height: 1.2; margin: 0 0 var(--space-2); }
.beit-game-title a { color: #fff; text-decoration: none; }
.beit-game-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .beit-game-ex { color: var(--ink-soft); font-size: 18px; line-height: 1.55; margin: 0 0 var(--space-3); flex: 1; }
.beit-game-more {
font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 18px;
letter-spacing: .05em; color: var(--neon); text-shadow: 0 0 8px var(--neon);
margin-top: auto;
}
.beit-game-empty { max-width: 52ch; }
.beit-game-empty h2 { font-size: clamp(26px,3.6vw,40px); margin: 0 0 var(--space-3); }
.beit-game-empty p { color: var(--ink-soft); font-size: 19px; } .beit-arcade-head { padding: var(--space-8) 0 var(--space-6); }
.beit-arcade-head h1 { font-size: clamp(34px,5vw,56px); line-height: 1.05; margin: 0 0 var(--space-3); }
.beit-arcade-head .beit-lede { max-width: 65ch; margin: 0; font-size: 19px; }
.beit-crumb {
margin: 0 0 var(--space-4);
font-family: 'Figtree', sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: .12em;
}
.beit-crumb a { color: var(--ink-soft); text-decoration: none; transition: color .15s ease; }
.beit-crumb a:hover { color: #fff; } .beit-crumb-mk {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--accent);
color: #0A0D12;
font-weight: 800;
font-size: 18px;
line-height: 1;
margin-right: 10px;
vertical-align: -4px;
}
.beit-arcade-stage { padding-bottom: var(--space-10); } .beit-cabinet {
width: fit-content;
margin: 0 auto;
padding: 14px;
background: var(--arcade-panel);
border: 1px solid var(--line-strong);
border-radius: 10px;
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.6),
0 0 34px rgba(0,255,102,.10),
0 22px 44px -18px rgba(0,0,0,.85);
}
.beit-game-frame { width: min(82vw, 860px, calc(78vh * var(--game-ar, 1.3333)));
aspect-ratio: var(--game-ar-css, 4 / 3);
margin: 0 auto;
position: relative;
background: #000;
}
.beit-game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.beit-game-hint {
text-align: center;
margin: var(--space-4) 0 0;
color: rgba(255,255,255,.38);
font-size: 18px;
letter-spacing: .06em;
} .beit-game-about {
max-width: 760px;
margin: var(--space-8) auto 0;
}
.beit-game-h {
font-size: 18px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 var(--space-3);
font-family: 'Figtree', sans-serif;
font-weight: 700;
}
.beit-game-h::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--accent); margin-right: 10px; }
.beit-game-about p { color: var(--ink-soft); font-size: 18px; line-height: 1.7; max-width: 65ch; }
.beit-game-others { max-width: 920px; margin: var(--space-9) auto 0; } .beit-ad { margin: var(--space-5) 0; }
.beit-ad--landing { margin: 0 0 var(--space-6); }
.beit-ad--placeholder {
display: flex; align-items: center; justify-content: center;
border: 1px dashed rgba(255,255,255,.18);
border-radius: 4px;
color: rgba(255,255,255,.25);
font-family: 'Figtree', sans-serif; font-size: 18px; letter-spacing: .2em;
}
.beit-ad--landing.beit-ad--placeholder { min-height: 90px; }
.beit-ad--below.beit-ad--placeholder { min-height: 250px; margin-top: var(--space-9); } @media (max-width: 760px) {
.beit-game-grid { grid-template-columns: 1fr; }
.beit-cabinet { padding: 8px; }
.beit-game-frame { width: min(92vw, calc(78vh * var(--game-ar, 1.3333))); }
.beit-arcade-head { padding: var(--space-6) 0 var(--space-5); }
}