:root { --ink:#111316; --paper:#f5f1e8; --yellow:#f5c400; --red:#ed4b36; --blue:#61c7d8; --muted:#8b8d88; --line:#2d3032; --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--paper); background:var(--ink); font-family:'Rajdhani','DotGothic16',sans-serif; letter-spacing:.04em; } a { color:inherit; } img { display:block; max-width:100%; } button, a { -webkit-tap-highlight-color:transparent; } button:focus-visible, a:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.site-header { position:fixed; z-index:10; top:0; width:100%; background:rgba(17,19,22,.87); border-bottom:1px solid rgba(245,196,0,.3); backdrop-filter:blur(12px); } .nav-wrap { max-width:var(--max); margin:auto; padding:18px 28px; display:flex; justify-content:space-between; align-items:center; } .brand { text-decoration:none; font-weight:700; font-size:1.2rem; } .brand small { color:var(--yellow); margin-left:8px; } .site-nav { display:flex; gap:22px; font-size:.83rem; } .site-nav a { text-decoration:none; color:#d6d3cb; } .site-nav a:hover { color:var(--yellow); } .menu-toggle { display:none; background:none; color:var(--paper); border:1px solid var(--muted); padding:7px 10px; }
.hero { min-height:780px; padding:150px 28px 90px; position:relative; overflow:hidden; display:flex; align-items:center; background:linear-gradient(115deg,rgba(17,19,22,.98) 0%,rgba(17,19,22,.74) 46%,rgba(17,19,22,.18)), url('../assets/images/hero/hero.png') center/cover; } .hero:after { content:''; position:absolute; inset:auto 0 0; height:20px; background:repeating-linear-gradient(-45deg,var(--yellow) 0 20px,var(--ink) 20px 40px); opacity:.85; } .hero-inner { max-width:var(--max); width:100%; margin:auto; position:relative; z-index:1; } .eyebrow { color:var(--yellow); font-size:.9rem; letter-spacing:.24em; } h1 { margin:14px 0 18px; font-size:clamp(4rem,12vw,9rem); line-height:.82; letter-spacing:-.07em; text-shadow:7px 7px 0 var(--red); } h1 span { display:block; font-size:.28em; letter-spacing:.28em; color:var(--paper); text-shadow:none; margin-top:24px; } .copy { max-width:540px; font-size:clamp(1.25rem,2.2vw,1.8rem); font-weight:600; } .hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0; } .tag { border:1px solid var(--yellow); color:var(--yellow); padding:6px 10px; font-size:.75rem; } .scroll-cue { display:inline-block; margin-top:28px; font-size:.75rem; color:var(--muted); animation:bob 1.8s ease-in-out infinite; } @keyframes bob { 50% { transform:translateY(7px); } }
section { padding:112px 28px; } .section-inner { max-width:var(--max); margin:auto; } .section-kicker { color:var(--red); font-size:.8rem; letter-spacing:.23em; } h2 { font-size:clamp(2.3rem,5vw,4.5rem); line-height:1; margin:12px 0 34px; color:var(--yellow); } h2 span { display:block; color:var(--paper); font-size:.32em; letter-spacing:.2em; margin-top:12px; } .about { background:var(--paper); color:var(--ink); } .about h2, .how h2 { color:var(--ink); } .about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; } .about-lead { font-size:clamp(1.35rem,2.5vw,2.1rem); font-weight:700; line-height:1.55; } .about-copy { color:#52504b; line-height:1.9; } .stamp { border:3px solid var(--ink); padding:22px; transform:rotate(-3deg); font-weight:700; box-shadow:10px 10px 0 var(--red); } .stamp strong { font-size:2rem; display:block; }
.features { background:#202326; } .card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .feature-card { min-height:220px; padding:26px 20px; border:1px solid #42464a; background:linear-gradient(145deg,#2c3033,#191b1d); } .feature-card:nth-child(even) { border-top:4px solid var(--yellow); } .feature-card:nth-child(odd) { border-top:4px solid var(--red); } .card-num { color:var(--muted); font-size:.8rem; } .feature-card h3 { font-size:1.7rem; color:var(--yellow); margin:32px 0 10px; } .feature-card p { color:#c9c8c1; line-height:1.7; margin:0; }
.screenshots { background:var(--ink); } .gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; } .shot { position:relative; overflow:hidden; cursor:zoom-in; border:1px solid #46494a; background:#2c3033; } .shot:nth-child(1), .shot:nth-child(4) { grid-column:span 7; } .shot:nth-child(2), .shot:nth-child(3), .shot:nth-child(5), .shot:nth-child(6) { grid-column:span 5; } .shot img { width:100%; height:230px; object-fit:cover; transition:transform .35s; } .shot:hover img { transform:scale(1.05); } .shot figcaption { position:absolute; bottom:0; left:0; padding:9px 12px; background:rgba(17,19,22,.85); color:var(--yellow); font-size:.78rem; }
.characters { background:var(--paper); color:var(--ink); } .characters h2 { color:var(--ink); } .character-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .character { overflow:hidden; border:1px solid #bab6ab; background:#e8e3d7; } .character-art { height:250px; display:grid; place-items:center; background:linear-gradient(135deg,#25292c 50%,#e9c400 50%); color:var(--paper); font-size:4rem; font-weight:700; } .character:nth-child(2) .character-art { background:linear-gradient(135deg,#ed4b36 50%,#e8e3d7 50%); } .character:nth-child(3) .character-art { background:linear-gradient(135deg,#61c7d8 50%,#25292c 50%); } .character-body { padding:20px; } .character-body h3 { margin:0 0 8px; font-size:1.7rem; } .character-body p { margin:0; color:#5f5b55; line-height:1.6; }
.how { background:var(--yellow); color:var(--ink); } .controls { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; } .control { border:2px solid var(--ink); padding:20px; min-height:140px; } .keys { display:flex; gap:4px; margin-bottom:24px; } kbd { min-width:38px; text-align:center; padding:8px 7px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-weight:700; } .control strong { display:block; font-size:1.2rem; } .control small { color:#504617; }
.stages { background:#202326; } .stage-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .stage { position:relative; min-height:360px; overflow:hidden; border:1px solid #515559; } .stage img { width:100%; height:100%; min-height:360px; object-fit:cover; filter:saturate(.75); } .stage-overlay { position:absolute; inset:auto 0 0; padding:24px; background:linear-gradient(transparent,rgba(17,19,22,.95)); } .stage-overlay h3 { color:var(--yellow); font-size:2rem; margin:36px 0 0; }
.event { background:var(--red); } .event-panel { border:2px solid var(--paper); padding:30px; display:flex; align-items:center; justify-content:space-between; gap:30px; } .event-panel h2 { color:var(--paper); margin-bottom:0; } .event-status { padding:14px 18px; border:2px solid var(--yellow); color:var(--yellow); font-size:1.25rem; white-space:nowrap; }
.info { background:var(--paper); color:var(--ink); } .info h2 { color:var(--ink); } .info-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; } .specs { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #bcb8ac; } .spec { padding:16px 0; border-bottom:1px solid #bcb8ac; } .spec label { display:block; color:#77736c; font-size:.72rem; margin-bottom:5px; } .creator-box { border-left:5px solid var(--red); padding:20px 26px; background:#e9e3d7; } .socials { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; } .socials a { padding:9px 13px; border:1px solid var(--ink); text-decoration:none; font-size:.8rem; } .socials .is-disabled { opacity:.42; cursor:not-allowed; }
footer { padding:42px 28px; background:var(--ink); color:var(--muted); font-size:.8rem; } .footer-inner { max-width:var(--max); margin:auto; display:flex; justify-content:space-between; gap:20px; }
dialog { border:0; padding:0; background:#111; max-width:min(92vw,1100px); } dialog::backdrop { background:rgba(0,0,0,.85); } dialog img { max-height:85vh; width:auto; } .dialog-close { position:absolute; top:10px; right:10px; border:1px solid white; color:white; background:#111; padding:8px 12px; cursor:pointer; }
@media (max-width:800px) { .nav-wrap { padding:14px 18px; } .menu-toggle { display:block; } .site-nav { display:none; position:absolute; top:58px; left:0; right:0; padding:18px; background:var(--ink); flex-direction:column; } .site-nav.is-open { display:flex; } .hero { min-height:700px; padding:120px 20px 80px; background-position:62% center; } section { padding:78px 20px; } .about-grid, .info-grid { grid-template-columns:1fr; gap:34px; } .card-grid { grid-template-columns:1fr 1fr; } .gallery { grid-template-columns:1fr 1fr; } .shot, .shot:nth-child(1), .shot:nth-child(2), .shot:nth-child(3), .shot:nth-child(4), .shot:nth-child(5), .shot:nth-child(6) { grid-column:span 1; } .shot img { height:180px; } .character-grid, .controls, .stage-grid { grid-template-columns:1fr; } .stage, .stage img { min-height:270px; } .event-panel { flex-direction:column; align-items:flex-start; } .footer-inner { flex-direction:column; } }
@media (max-width:420px) { h1 { font-size:3.8rem; } .card-grid { grid-template-columns:1fr; } .specs { grid-template-columns:1fr; } }
.character-body { position:relative; z-index:1; background:#f5f1e8; border-top:3px solid var(--yellow); color:#111316; }
.character-body h3 { color:#111316; text-shadow:1px 1px 0 rgba(245,196,0,.55); }
.character-body p { color:#33373a; font-weight:600; }