:root{--ink:#eef7ff;--muted:#aab8cc;--line:rgba(147,197,253,.16);--panel:rgba(8,22,42,.84);--navy:#05101f;--cyan:#46ddf5;--lime:#b9ff58;--violet:#b9a0ff;--gold:#ffd166}
*{box-sizing:border-box}
html{min-height:100%;background:#030a14}
body{min-height:100vh;margin:0;color:var(--ink);font-family:"Tahoma","Arial",sans-serif;background:radial-gradient(circle at 78% 12%,rgba(34,211,238,.13),transparent 24rem),radial-gradient(circle at 15% 75%,rgba(139,92,246,.12),transparent 28rem),linear-gradient(145deg,#030914,#071426 55%,#03101c);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(5,16,31,.3),rgba(5,16,31,.91)),url("/functions-ruins-background.webp") center/cover no-repeat;opacity:.48;z-index:-2}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(#c8f7ff 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,#000,transparent 75%);z-index:-1}
.portal-shell{width:min(1420px,calc(100% - 32px));margin:auto;padding:18px 0 30px}
.portal-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:28px 34px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(11,29,54,.94),rgba(6,18,35,.86));box-shadow:0 28px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.04)}
.brand-mark{width:74px;height:74px;display:grid;place-items:center;border-radius:22px;border:1px solid rgba(70,221,245,.45);font:700 42px/1 serif;color:#a8f5ff;background:linear-gradient(145deg,rgba(34,211,238,.14),rgba(139,92,246,.18))}
.eyebrow{margin:0 0 8px;color:#5ee8f5;font-weight:800;letter-spacing:.04em}
.portal-title h1{margin:0;font-size:clamp(2rem,4vw,3.6rem);line-height:1.08}.portal-title>p:last-child{margin:10px 0 0;color:var(--muted);font-size:1.05rem;font-weight:700}
.availability{min-width:190px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:center;padding:18px 22px;border:1px solid rgba(255,209,102,.28);border-radius:20px;background:rgba(255,209,102,.06)}
.availability span{grid-row:1/3;font-size:1.6rem}.availability strong{font-size:1.28rem;color:#fff5ce}.availability small{color:var(--muted);font-weight:700}
.portal-grid{display:grid;grid-template-columns:300px 1fr;gap:22px;margin-top:22px}
.guide-card{position:relative;min-height:620px;overflow:hidden;border:1px solid rgba(185,160,255,.28);border-radius:28px;background:linear-gradient(180deg,rgba(27,26,83,.82),rgba(7,14,35,.94));box-shadow:0 24px 55px rgba(0,0,0,.35)}
.guide-card img{position:absolute;z-index:1;top:0;left:50%;width:108%;height:68%;object-fit:contain;object-position:top center;transform:translateX(-50%);filter:drop-shadow(0 24px 32px rgba(0,0,0,.45))}
.guide-glow{position:absolute;inset:5% 0 auto;height:48%;background:radial-gradient(circle,rgba(74,222,245,.18),transparent 62%)}
.guide-message{position:absolute;z-index:2;inset:auto 22px 28px;padding:22px;border-radius:22px;background:rgba(6,15,36,.78);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.guide-message p{margin:0;color:#c4b5fd;font-weight:900}.guide-message h2{margin:8px 0 10px;font-size:1.45rem}.guide-message span{color:var(--muted);line-height:1.8;font-weight:600}
.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.game-card{--accent:var(--cyan);position:relative;display:flex;min-height:300px;flex-direction:column;padding:24px;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:26px;color:inherit;text-decoration:none;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,rgba(6,20,38,.93)),rgba(5,15,31,.94));box-shadow:0 18px 45px rgba(0,0,0,.26);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.game-card:hover,.game-card:focus-visible{outline:none;transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 24px 55px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--accent) 11%,transparent)}
.game-card.lime{--accent:var(--lime)}.game-card.violet{--accent:var(--violet)}.game-card.gold{--accent:var(--gold)}
.card-top{display:flex;align-items:center;justify-content:space-between}.card-top b{padding:7px 14px;border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);border-radius:99px;color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.card-icon{display:grid;width:54px;height:54px;place-items:center;border-radius:17px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 23%,transparent);color:var(--accent);font:700 30px/1 serif}
.game-card>p{margin:20px 0 8px;color:var(--accent);font-weight:900}.game-card h2{margin:0 0 12px;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.35}.description{color:var(--muted);font-weight:700;line-height:1.85}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}.card-bottom small{color:#8795aa;font-weight:700}.card-bottom strong{white-space:nowrap;color:var(--accent)}
.featured:after{content:"";position:absolute;inset:8px;border-radius:20px;border:1px dashed color-mix(in srgb,var(--accent) 12%,transparent);pointer-events:none}
.new-ribbon{position:absolute;top:20px;left:20px;padding:6px 10px;border-radius:99px;background:var(--accent);color:#081321;font-size:.72rem;font-weight:900;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 38%,transparent)}
footer{text-align:center;margin-top:22px;padding:15px;color:#7f91aa;font-weight:700}
@media(max-width:960px){.portal-grid{grid-template-columns:1fr}.guide-card{min-height:330px}.guide-card img{left:16%;width:42%;height:100%;object-position:center}.guide-message{right:42%;left:22px;top:38px;bottom:auto}.portal-head{grid-template-columns:auto 1fr}.availability{grid-column:1/-1}}
@media(max-width:700px){.portal-shell{width:min(100% - 20px,620px);padding-top:10px}.portal-head{grid-template-columns:1fr;padding:22px;text-align:center}.brand-mark{margin:auto}.availability{min-width:0}.games-grid{grid-template-columns:1fr}.game-card{min-height:280px;padding:20px}.guide-card{min-height:500px}.guide-card img{left:50%;width:92%;height:65%;object-position:top center}.guide-message{inset:auto 15px 18px}.portal-title h1{font-size:2.15rem}.card-bottom{align-items:flex-start;flex-direction:column-reverse}.new-ribbon{top:88px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}