@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@600;700;800&display=swap');

:root { --ink:#fff8e9; --muted:#bcb9c8; --night:#11111c; --plum:#271b3c; --violet:#876bff; --rose:#ff7c9c; --lime:#c5f065; --gold:#ffc454; --line:rgba(255,248,233,.15); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--night); font-family:"Space Grotesk",sans-serif; font-size:16px; line-height:1.55; }
body::before { content:""; position:fixed; inset:0; z-index:-3; background:radial-gradient(circle at 85% 0%,#48305e 0,transparent 31rem),radial-gradient(circle at 0% 55%,#193d4b 0,transparent 36rem),#11111c; }
a { color:inherit; text-decoration:none; } .site-header { width:min(1200px,calc(100% - 48px)); margin:auto; min-height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:5px; align-items:center; font:800 14px/1 "Unbounded",sans-serif; letter-spacing:-1px; transform:rotate(-2deg); } .brand span:nth-child(1){color:var(--lime)} .brand span:nth-child(2){color:var(--gold)} .brand span:nth-child(3){color:var(--rose)}
nav { display:flex; gap:28px; font-size:14px; font-weight:600; } nav a { color:var(--muted); padding:8px 0; border-bottom:2px solid transparent; } nav a:hover,nav a.active { color:var(--ink); border-color:var(--lime); }
.hero,.page-hero,.section,.cta-strip { width:min(1200px,calc(100% - 48px)); margin-left:auto; margin-right:auto; }.hero { min-height:680px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:45px; padding:58px 0 80px; }.eyebrow { margin:0 0 13px; color:var(--lime); font:500 11px/1.3 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.hero h1,.page-hero h1 { margin:0; max-width:720px; font:700 clamp(46px,7vw,90px)/.98 "Unbounded",sans-serif; letter-spacing:-.07em; }.hero h1 em,.page-hero h1 em { color:var(--rose); font-style:normal; }.lede { color:var(--muted); max-width:620px; font-size:19px; line-height:1.55; }.hero-copy .lede { margin:29px 0 32px; }.actions { display:flex; flex-wrap:wrap; gap:13px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:47px; padding:11px 18px; border:1px solid var(--line); font-size:14px; font-weight:700; transition:transform .18s,background .18s; }.button:hover { transform:translateY(-3px); }.button.primary { background:var(--lime); color:#19221d; border-color:var(--lime); }.button.primary span { font-size:21px; line-height:0; }.button.quiet { background:rgba(255,255,255,.06); }
.hero-stage { position:relative; min-height:490px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,#39264e,#1d3445 64%,#121e2c); box-shadow:18px 18px 0 rgba(0,0,0,.18); }.hero-stage::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.035) 19px 20px); mix-blend-mode:overlay; }.rift { position:absolute; border-radius:50%; filter:blur(2px); opacity:.7; }.rift-one { width:300px;height:300px; background:radial-gradient(circle,#ed8baa 0 7%,#9f75ff 25%,transparent 67%); top:-130px;right:-75px; }.rift-two { width:190px;height:190px; background:radial-gradient(circle,#c5f065,transparent 60%); bottom:-90px;left:-75px; }.hero-card { position:absolute; z-index:2; width:180px; height:250px; padding:18px; display:flex; flex-direction:column; color:#fffbef; border:3px solid #f8c45f; border-radius:11px; background:linear-gradient(145deg,#943c66,#342057 43%,#162e49); box-shadow:10px 13px 0 rgba(0,0,0,.27); }.hero-card::before { content:""; position:absolute; inset:43px 16px 58px; border-radius:6px; background:radial-gradient(circle at 50% 24%,#d4f171 0 12%,#cc6b9a 13% 31%,#583d9f 32% 65%,#102840 66%); opacity:.9; }.hero-card strong,.hero-card small,.hero-card b { position:relative; z-index:1; }.card-type { color:#fff2c5;font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }.hero-card strong { margin-top:auto; font-size:20px; }.hero-card small { color:#ddd5ea; }.hero-card b { position:absolute; right:13px; bottom:13px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#312111; background:var(--lime); }.card-left{bottom:55px;left:55px;transform:rotate(-9deg)}.card-right{top:68px;right:40px;transform:rotate(9deg);border-color:#88dbec;background:linear-gradient(145deg,#3d7795,#2f2461 43%,#142938)}
.lane-board { position:absolute; z-index:1; left:31%;right:14%;bottom:74px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px; transform:skewY(-10deg) rotate(-3deg); }.lane-board i { height:130px; border:1px solid rgba(197,240,101,.48);background:linear-gradient(rgba(197,240,101,.24),transparent);}.stage-caption { position:absolute;z-index:3;right:21px;bottom:16px;margin:0;color:#faf2dd;font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.13em; }
.section { padding:90px 0; }.play-intro { border-top:1px solid var(--line); }.section-heading { display:flex; align-items:end; justify-content:space-between; }.section h2,.cta-strip p { margin:0; font:600 clamp(29px,4vw,50px)/1.1 "Unbounded",sans-serif;letter-spacing:-.06em; }.pillar-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:48px 0 28px; }.pillar-grid article { padding:26px 24px 28px;border-top:2px solid var(--line);background:rgba(0,0,0,.10); }.pillar-grid article:nth-child(1){border-color:var(--lime)}.pillar-grid article:nth-child(2){border-color:var(--gold)}.pillar-grid article:nth-child(3){border-color:var(--rose)}.number { color:var(--muted);font:12px "DM Mono",monospace;}.pillar-grid h3{margin:30px 0 10px;font-size:23px;line-height:1.1}.pillar-grid p{color:var(--muted);margin:0}.text-link{font-weight:700;color:var(--lime)}.text-link span{font-size:20px}
.lore-callout { position:relative;display:grid;grid-template-columns:.65fr 1.15fr .8fr;align-items:center;gap:44px;margin-bottom:55px;padding:56px;overflow:hidden;background:#2d2140;border:1px solid rgba(255,255,255,.14) }.lore-callout .lede{margin:13px 0 26px}.lore-orb{position:relative;width:170px;height:170px;margin:auto;border-radius:50%;background:radial-gradient(circle,#f8d184 0 8%,#f15b96 23%,#6542bc 50%,transparent 69%);filter:drop-shadow(0 0 20px #f171b0)}.lore-orb i{position:absolute;border:1px solid rgba(255,245,211,.6);border-radius:50%;inset:17px;transform:rotate(35deg) scaleY(.33)}.lore-orb i:nth-child(2){transform:rotate(-30deg) scaleY(.48);inset:28px}.lore-orb i:nth-child(3){inset:0}.signal-card{min-height:180px;padding:22px;border:1px solid rgba(255,255,255,.25);background:rgba(17,17,28,.4)}.signal-label{margin:0 0 28px;color:var(--gold);font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.12em}.signal-card h3{margin:0 0 8px;font-size:19px;line-height:1.1}.signal-card p:last-child{margin:0;color:var(--muted);font-size:14px}.loading{color:var(--muted)}
.page-hero { padding:78px 0 65px; }.page-hero .lede { margin:29px 0 0; }.rules-hero{background:linear-gradient(100deg,transparent,rgba(197,240,101,.05))}.lore-hero{background:linear-gradient(100deg,transparent,rgba(255,124,156,.07))}.rules-layout{display:grid;grid-template-columns:210px 1fr;gap:9%;align-items:start;border-top:1px solid var(--line)}.rule-nav{position:sticky;top:18px;display:grid;gap:5px;padding-top:10px}.rule-nav a{padding:8px 0;color:var(--muted);font-size:14px;border-bottom:1px solid var(--line)}.rule-nav a:hover{color:var(--lime)}.rules-content{display:grid;gap:0}.rules-content article{padding:42px 0;border-bottom:1px solid var(--line)}.rules-content h2{font:600 clamp(28px,3.5vw,42px)/1.06 "Unbounded",sans-serif;letter-spacing:-.06em;margin:0 0 17px}.rules-content article>p:not(.eyebrow){max-width:680px;color:var(--muted);font-size:18px}.element-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.element-row span{padding:5px 9px;border:1px solid var(--line);font:11px "DM Mono",monospace}.element-row span:nth-child(1){color:#ff9b71}.element-row span:nth-child(2){color:#8edcfb}.element-row span:nth-child(3){color:#c9d575}.element-row span:nth-child(4){color:#cf9df5}.element-row span:nth-child(5){color:#fee899}.element-row span:nth-child(6){color:#e78cbd}.turn-list{list-style:none;margin:29px 0 0;padding:0;max-width:720px;counter-reset:turn}.turn-list li{display:grid;grid-template-columns:175px 1fr;gap:17px;padding:15px 0;border-top:1px solid var(--line)}.turn-list li::before{counter-increment:turn;content:"0" counter(turn);font:11px "DM Mono",monospace;color:var(--lime)}.turn-list b{grid-column:1;font-size:17px}.turn-list span{grid-column:2;grid-row:1;color:var(--muted)}.mini-board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:25px;max-width:650px}.mini-board span{height:90px;display:flex;align-items:end;padding:8px;border:1px solid rgba(197,240,101,.45);background:linear-gradient(to top,rgba(197,240,101,.27),transparent);font:11px "DM Mono",monospace;color:var(--lime)}.glossary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.glossary-grid article{padding:17px!important;border:1px solid var(--line)!important;background:rgba(255,255,255,.03)}.glossary-grid h3{margin:0 0 6px;font-size:18px}.glossary-grid p{margin:0;color:var(--muted);font-size:14px}.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:42px 0;border-top:1px solid var(--line)}.cta-strip p{font-size:25px}
.archive{border-top:1px solid var(--line)}.archive-bar{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:35px}.filter-set{display:flex;gap:6px;flex-wrap:wrap}.filter-set button{padding:9px 12px;color:var(--muted);background:transparent;border:1px solid var(--line);font:600 12px "Space Grotesk",sans-serif;cursor:pointer}.filter-set button:hover,.filter-set button.selected{background:var(--lime);border-color:var(--lime);color:#14231c}.lore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lore-card{position:relative;display:flex;min-height:260px;flex-direction:column;padding:24px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,rgba(69,51,92,.75),rgba(16,36,50,.8));transition:transform .2s,border-color .2s}.lore-card:hover{transform:translateY(-5px);border-color:var(--lime)}.lore-card.has-art::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,13,24,.94) 9%,rgba(14,13,24,.15)),var(--art) center/cover;opacity:.8}.lore-card>*{position:relative}.kind-label{margin:0 0 auto;color:var(--lime);font:10px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase}.lore-card h3{margin:65px 0 8px;font:600 23px/1.08 "Unbounded",sans-serif;letter-spacing:-.06em}.lore-card .summary{margin:0;color:#ddd9e3;font-size:14px}.tag-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:13px}.tag-list span{font:10px "DM Mono",monospace;color:var(--gold)}.compact{padding-top:25px}.compact .lede{margin:15px 0 0}.entry-detail{margin-top:18px!important;font-size:15px!important}.entry-detail summary{cursor:pointer;color:var(--lime);font-weight:700}.entry-detail p{color:var(--muted)}
footer{width:min(1200px,calc(100% - 48px));margin:0 auto;padding:23px 0 32px;display:flex;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:12px}footer p{margin:0}footer span{color:var(--rose)}footer a{color:var(--lime)}
@media (max-width:800px){.site-header{min-height:80px}.hero{grid-template-columns:1fr;padding-top:45px}.hero-stage{min-height:380px}.hero-card{transform:scale(.78)!important}.card-left{left:10px;bottom:15px}.card-right{right:5px;top:28px}.lane-board{left:23%;right:5%;bottom:36px}.lore-callout{grid-template-columns:1fr;padding:38px 28px;gap:25px}.lore-orb{margin:0}.pillar-grid,.lore-grid{grid-template-columns:1fr}.rules-layout{grid-template-columns:1fr;gap:20px}.rule-nav{position:relative;top:0;display:flex;overflow:auto;padding-bottom:10px}.rule-nav a{flex:none;margin-right:15px}.archive-bar,.cta-strip{align-items:start;flex-direction:column}.glossary-grid{grid-template-columns:1fr}.turn-list li{grid-template-columns:30px 1fr}.turn-list li::before{grid-column:1;grid-row:1}.turn-list b,.turn-list span{grid-column:2}.turn-list span{grid-row:2}.page-hero{padding-top:54px}.section{padding:60px 0}}
@media (max-width:520px){.site-header,.hero,.page-hero,.section,.cta-strip,footer{width:min(100% - 30px,1200px)}.site-header nav{gap:13px;font-size:12px}.brand{font-size:11px}.hero h1,.page-hero h1{font-size:43px}.lede{font-size:17px}.hero-stage{margin-top:5px}.hero-card{width:150px;height:210px}.hero-card strong{font-size:17px}.section h2{font-size:31px}}