:root{--red:#e63946;--blue:#00a8ff;--dark:#0c1020;--panel:#151a2e;--gold:#ffc857;--text:#f8f9ff;--muted:#cbd2e6;--white:#fff;--green:#39d98a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#080b16,#141a30 55%,#090d19);color:var(--text);line-height:1.6}.demo-banner{background:#d00000;color:white;text-align:center;font-weight:900;padding:10px 16px;letter-spacing:.5px;position:sticky;top:0;z-index:50}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 5vw;background:rgba(12,16,32,.94);backdrop-filter:blur(8px);position:sticky;top:42px;z-index:40;border-bottom:1px solid rgba(255,255,255,.1)}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:900;font-size:1.1rem}.brand img{width:72px;height:48px;object-fit:cover;border-radius:8px}.links{display:flex;flex-wrap:wrap;gap:10px}.links a{color:white;text-decoration:none;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08)}.links a:hover,.links a.active{background:var(--red)}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:55px 5vw}.hero h1{font-size:clamp(2.2rem,6vw,5rem);line-height:.95;margin:0}.hero h1 span{color:var(--gold)}.hero p{font-size:1.15rem;color:var(--muted)}.hero img{width:100%;border-radius:26px;box-shadow:0 0 45px rgba(0,168,255,.35)}.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.btn,button.btn{display:inline-block;background:var(--red);color:white;text-decoration:none;font-weight:800;padding:13px 18px;border-radius:14px;border:0;cursor:pointer;font-size:1rem}.btn.alt{background:var(--blue);color:#06111f}.btn.gold{background:var(--gold);color:#111}.wrap{padding:28px 5vw}.section{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:26px;margin-bottom:26px}.notice{border-left:7px solid var(--gold);background:rgba(255,200,87,.12)}.story{max-width:980px;margin:auto}.story p{white-space:pre-line}.story h2,.story h3{margin-top:26px}h2{font-size:2rem;margin-top:0}h3{color:var(--gold)}.lead{font-size:1.15rem;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.card{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px}.card p{color:var(--muted)}.mini-card{border-top:4px solid var(--blue)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.photo-grid img{width:100%;height:240px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.13);cursor:pointer;transition:.15s}.photo-grid img:hover{transform:scale(1.02);box-shadow:0 0 22px rgba(0,168,255,.35)}.taglist{columns:2;column-gap:35px;padding-left:20px}.taglist li{break-inside:avoid;margin:4px 0}.pill-list{display:flex;flex-wrap:wrap;gap:10px}.pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 12px}.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.big{font-size:1.3rem;font-weight:900}.footer{text-align:center;color:var(--muted);padding:30px 5vw;border-top:1px solid rgba(255,255,255,.1)}.search{width:100%;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:#fff;color:#111;font-size:1rem;margin-bottom:16px}.game-output{margin-top:14px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;font-weight:800}.mini-game-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.select,input[type=text]{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.22);font-size:1rem}.dice-roll{font-size:3rem;font-weight:900;color:var(--gold);text-align:center;margin:15px 0}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:99;padding:22px}.lightbox.open{display:flex}.lightbox img{max-width:96vw;max-height:88vh;border-radius:16px;box-shadow:0 0 40px rgba(0,0,0,.8)}.lightbox button{position:fixed;top:18px;right:22px;border:0;border-radius:999px;background:white;color:#111;font-size:28px;width:48px;height:48px;cursor:pointer}.callout{border-left:5px solid var(--green);background:rgba(57,217,138,.12)}@media(max-width:800px){.hero{grid-template-columns:1fr}.nav{position:relative;top:0;display:block}.links{margin-top:10px}.taglist{columns:1}.hero img{order:-1}.brand img{width:58px;height:40px}}
