.official-brand { min-height:100vh; background:var(--ui-bg); }
.official-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px clamp(20px,6vw,88px); border-bottom:1px solid var(--ui-line); }
.official-header nav { display:flex; align-items:center; gap:clamp(14px,3vw,38px); }
.official-header nav a,.official-footer>a:not(.logo) { color:var(--ui-ink); text-decoration:none; font-size:13px; font-weight:650; }
.official-header nav a:hover,.official-footer>a:hover { color:var(--ui-accent-strong); }
.official-signin { padding:11px 14px; border:1px solid var(--ui-line); border-radius:9px; }
.official-brand main { box-sizing:border-box; width:min(1440px,100%); margin:0 auto; padding:0 clamp(20px,6vw,88px); }
.official-hero { box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); gap:clamp(36px,7vw,100px); align-items:center; min-height:min(720px,calc(100vh - 90px)); padding:clamp(40px,5vh,70px) 0; }
.official-copy .eyebrow,.official-panel .eyebrow { color:var(--ui-accent-strong); font:700 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.15em; }
.official-copy h1 { margin:22px 0; font-size:clamp(50px,7vw,94px); line-height:.94; letter-spacing:-.075em; }
.official-copy h1 em { color:var(--ui-accent); font-style:normal; }
.official-lede { max-width:54ch; color:var(--ui-muted); font-size:clamp(16px,1.7vw,19px); line-height:1.7; }
.official-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:30px; }
.official-primary,.official-secondary { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 17px; border-radius:9px; font-size:13px; font-weight:750; text-decoration:none; transition:transform .18s ease,background-color .18s ease,border-color .18s ease; }
.official-primary { border:1px solid var(--ui-accent); background:var(--ui-accent); color:#171717; }
.official-secondary { border:1px solid var(--ui-line); color:var(--ui-ink); }
.official-primary:hover,.official-secondary:hover { transform:translateY(-2px); }
.official-panel { min-height:430px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; padding:clamp(22px,3vw,36px); border:1px solid #d9c8ae; background:repeating-linear-gradient(0deg,transparent 0 5px,#fff5e506 5px 6px),radial-gradient(ellipse at 82% 7%,#b94b2420,transparent 46%),#211d18; color:#f6eee2; box-shadow:8px 8px 0 color-mix(in srgb,var(--ui-accent) 22%,var(--ui-bg)); }
.official-panel::after { position:absolute; inset:9px; border:1px solid #d9c8ae70; content:""; pointer-events:none; }
.official-panel-meta { display:flex; justify-content:space-between; gap:12px; color:#e2d3bf; font:700 9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.11em; }
.official-game-mark { position:absolute; top:22%; right:12%; display:grid; place-items:center; width:clamp(104px,15vw,178px); aspect-ratio:1; border:1px solid #ff805280; border-radius:50%; color:#ff8052; }
.official-game-mark::before,.official-game-mark::after { position:absolute; inset:12%; border:1px solid #ff805245; border-radius:50%; content:""; }
.official-game-mark::after { inset:26%; }
.official-game-mark span { font-size:clamp(52px,8vw,88px); font-weight:850; letter-spacing:-.12em; transform:translateX(-.06em); }
.official-game-mark i { position:absolute; top:15%; right:17%; width:11px; height:11px; border-radius:50%; background:var(--ui-accent); }
.official-panel>div:last-of-type { position:relative; z-index:1; margin-top:170px; max-width:390px; }
.official-panel h2 { margin:7px 0 11px; font-size:clamp(30px,4vw,48px); line-height:1; letter-spacing:-.06em; }
.official-panel>div:last-of-type>p:last-child { color:#d6cabb; font-size:14px; line-height:1.65; }
.official-panel>a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:16px; border-top:1px solid #e7d7bf70; color:#ff9a72; font-size:12px; font-weight:750; text-decoration:none; }
.official-categories { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px 28px; padding:21px 0; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); color:var(--ui-accent-strong); font:700 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; }
.official-next { display:grid; grid-template-columns:1fr 1fr auto; gap:32px; align-items:center; padding:clamp(60px,8vw,110px) 0; }
.official-next .eyebrow { color:var(--ui-accent-strong); font:700 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.15em; }
.official-next h2 { margin:12px 0 0; font-size:clamp(36px,5vw,65px); line-height:.98; letter-spacing:-.06em; }
.official-next>p { max-width:44ch; color:var(--ui-muted); font-size:15px; line-height:1.7; }
.official-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px clamp(20px,6vw,88px); border-top:1px solid var(--ui-line); color:var(--ui-muted); font-size:12px; }
.official-footer .logo { font-size:18px; }
.official-brand :is(a,button):focus-visible { outline:3px solid var(--ui-accent-strong); outline-offset:4px; }
@media(max-width:800px) { .official-hero { grid-template-columns:1fr; min-height:0; padding:58px 0; } .official-panel { min-height:390px; } .official-next { grid-template-columns:1fr; gap:12px; } .official-next .official-primary { justify-self:start; } }
@media(max-width:520px) { .official-header { align-items:flex-start; flex-direction:column; } .official-header nav { width:100%; justify-content:space-between; gap:8px; } .official-header nav a { font-size:12px; } .official-brand main { padding:0 20px; } .official-hero { gap:30px; padding:45px 0; } .official-copy h1 { font-size:clamp(48px,14vw,72px); } .official-panel { min-height:360px; } .official-panel>div:last-of-type { margin-top:145px; } .official-categories { justify-content:flex-start; gap:10px 18px; } .official-footer { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .official-primary,.official-secondary { transition:none; } .official-primary:hover,.official-secondary:hover { transform:none; } }