/* PIKA77 / Playground index — graphite, tangerine, chalk. */
:root{color-scheme:dark;--bg:#181b20;--panel:#22262d;--light:#f1eee5;--muted:#b9b9b1;--orange:#ff9b52;--line:#454950;--sidebar:212px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;padding-left:var(--sidebar);background:var(--bg);color:var(--light);font-family:'Trebuchet MS',Arial,sans-serif;line-height:1.7}h1,h2,h3,p,figure,ul{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}input,button{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.container{width:min(1240px,calc(100% - 80px));margin-inline:auto}.skip{position:absolute;top:-100px;background:var(--orange);color:#171717;padding:12px;z-index:100}.skip:focus{top:8px}.edition{background:var(--orange);color:#242326;font:10px/1.5 monospace;letter-spacing:1px;padding:10px 0}.edition .container{display:flex;justify-content:space-between;gap:16px}.brand-row{display:flex;align-items:center;gap:24px;min-height:104px}.brand-row>a{flex-shrink:0}.brand-row img{width:150px;height:72px;object-fit:contain}.brand-caption{font:10px/1.7 monospace;letter-spacing:.8px;color:var(--muted)}.access{margin-left:auto;display:flex;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border:1px solid var(--orange);background:var(--orange);color:#242326;font-size:12px;font-weight:800;border-radius:4px;transition:background .2s}.button:hover{background:#ffc395}.button.secondary{color:var(--light);background:transparent;border-color:#7b7e82}.button.secondary:hover{background:var(--panel)}.masthead nav{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar);margin:0;border-right:1px solid var(--line);background:#121419;padding:140px 16px 30px;overflow-y:auto}.masthead nav:before{content:'PIKA77 / INDEX';position:absolute;top:52px;left:26px;font:800 18px/1.5 monospace;letter-spacing:-1px;color:var(--orange)}.masthead ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}.masthead li a{padding:12px 14px;display:block;font-size:12px;border-left:2px solid transparent}.masthead li a:hover{background:var(--panel)}.masthead li a[aria-current]{background:var(--panel);color:var(--orange);border-color:var(--orange)}#menuToggle{display:none}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-block:32px 55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-copy{position:relative;padding:28px 0}.eyebrow{font:10px/1.6 monospace;letter-spacing:1.6px;text-transform:uppercase;display:block;color:var(--orange);margin-bottom:20px}h1{font-size:clamp(32px,3.2vw,48px);font-weight:800;line-height:1.13;letter-spacing:-1.9px;max-width:740px;overflow-wrap:anywhere;margin-bottom:24px}.lead{font-size:15px;line-height:1.8;color:var(--muted);max-width:650px}.hero figure{background:var(--panel);padding:12px;border:1px solid var(--line);transform:rotate(1deg)}.hero figure>img{width:100%;max-height:530px;object-fit:contain}.hero figcaption{padding:12px 2px 2px;font:10px/1.5 monospace;text-transform:uppercase;letter-spacing:1px;color:var(--orange)}.hero-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.hero-links a{padding:11px 18px;border:1px solid var(--line);font-size:12px;font-weight:700;border-radius:4px}.hero-links a:first-child{background:var(--light);color:#222}.hero-links a:hover{border-color:var(--orange)}.section{padding:52px 0}.section+.section{border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;gap:20px;margin-bottom:30px}.section-heading:before{content:'';width:12px;height:12px;border:3px solid var(--orange);transform:rotate(45deg);flex-shrink:0}h2{font-size:29px;line-height:1.25;letter-spacing:-.9px}h3{font-size:18px;line-height:1.4}.story{display:grid;grid-template-columns:220px 1fr;gap:18px 38px}.story>.eyebrow{grid-column:1/-1;margin:0}.story>h2{grid-column:1/-1;font-size:38px;max-width:760px;margin-bottom:10px}.story>h3{color:var(--orange);font-size:16px;border-top:1px solid var(--line);padding-top:18px}.story>p{font-size:15px;color:var(--muted);max-width:780px}.story>p:first-of-type,.story>.note{grid-column:1/-1}.story .note{font-size:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:10px}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.category-grid>a{background:var(--panel);position:relative;padding:14px;border:1px solid var(--line);border-radius:6px}.category-grid>a:hover{border-color:var(--orange)}.category-number{font:12px monospace;color:var(--orange)}.category-grid img{width:100%;aspect-ratio:1.2;object-fit:cover;margin-block:12px}.category-grid h3{font-size:14px}.catalog-tools{display:flex;gap:16px;align-items:center;margin-bottom:26px;padding:18px;background:var(--orange);color:#242326;border-radius:6px}.catalog-tools label{font-size:12px;font-weight:800}.catalog-tools input{flex:1;min-width:90px;padding:11px 14px;background:#fff6eb;color:#171717;border:1px solid #955b32;border-radius:4px;font-size:14px}.catalog-tools span{font:12px monospace;min-width:76px}.game-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 16px}.game-tile{display:block;position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel);transition:border-color .2s}.game-tile[hidden]{display:none}.game-tile:hover{border-color:var(--orange)}.game-tile img{width:100%;aspect-ratio:4/3;object-fit:cover}.game-tile span{padding:12px;display:block;font-size:12px;font-weight:700;overflow-wrap:anywhere}.text-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.text-card{padding:22px 0;border-top:2px solid var(--orange)}.text-card h3{font-size:16px;margin-bottom:12px}.text-card p{font-size:14px;color:var(--muted)}.download-box{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:36px}.download-box p{margin:14px 0 22px;color:var(--muted);font-size:14px}.download-box ol{padding-left:20px;color:var(--muted);font-size:14px}.download-box li{margin-bottom:10px}.download-steps{border-left:1px solid var(--line);padding-left:30px}details{border-block-start:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--orange)}details p{color:var(--muted);font-size:14px;max-width:850px;padding-top:18px}footer{background:#121419;padding:46px 0 24px;margin-top:40px;border-top:1px solid var(--line)}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}.footer-main img{width:150px;height:70px;object-fit:contain;margin-bottom:18px}.footer-main p{color:var(--muted);font-size:12px;max-width:350px}.footer-main h2{color:var(--orange);font:12px monospace;margin-bottom:18px;text-transform:uppercase}.footer-main a{display:block;font-size:12px;line-height:2.3}.footer-main a:hover{color:var(--orange)}.footer-bottom{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:26px}.mobile-access{display:none}
@media(min-width:1550px){.hero{gap:70px}.game-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1150px){:root{--sidebar:170px}.container{width:calc(100% - 44px)}.brand-caption{display:none}.masthead nav{padding-inline:10px}.masthead nav:before{left:20px;font-size:15px}.hero{gap:24px}h1{font-size:37px}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story{grid-template-columns:170px 1fr;gap:18px 24px}}
@media(max-width:760px){body{padding-left:0;padding-bottom:78px}.container{width:calc(100% - 32px)}.edition{font-size:8px;letter-spacing:.4px}.edition span{display:none}.brand-row{min-height:86px;gap:12px}.brand-row img{width:90px;height:60px}.access{gap:6px}.access .button{padding:8px 12px;min-height:38px;font-size:11px}#menuToggle{display:block;background:transparent;border:0;color:var(--light);font-size:11px;padding:6px 0 6px 8px}.masthead nav{position:static;width:calc(100% - 32px);padding:0;border:0;background:transparent;margin-inline:auto;overflow:visible}.masthead nav:before{display:none}.masthead ul{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding-bottom:12px}.masthead ul.open{display:grid}.masthead li a{font-size:11px;padding:10px 8px}.hero{grid-template-columns:1fr;padding-block:28px 36px;gap:20px}.hero-copy{padding:0}.hero h1{font-size:35px;letter-spacing:-1.3px}.hero figure{transform:none;padding:8px;max-width:540px;width:100%;justify-self:center}.hero figure>img{max-height:400px}.lead{font-size:14px}.section{padding:38px 0}h2{font-size:25px}.story{display:block}.story>*{margin-bottom:18px}.story>h2{font-size:30px;margin-bottom:20px}.story>h3{padding-top:16px;margin-top:24px}.story .note{padding-top:18px}.category-grid{gap:14px}.catalog-tools{flex-wrap:wrap;gap:10px;padding:14px}.catalog-tools label{flex-basis:100%}.catalog-tools input{width:55%}.catalog-tools span{font-size:10px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}.game-tile span{padding:9px;font-size:11px}.text-grid{grid-template-columns:1fr 1fr;gap:18px}.text-card p{font-size:13px}.download-box{grid-template-columns:1fr;padding:24px;gap:24px}.download-steps{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}.footer-main{grid-template-columns:1fr 1fr;gap:28px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:12px}.mobile-access{display:grid;grid-template-columns:1fr 1fr 1.2fr;position:fixed;bottom:0;left:0;right:0;z-index:50;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#121419;border-top:1px solid var(--line)}.mobile-access a{padding:11px 5px;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:4px;text-align:center}.mobile-access a:nth-child(2){background:var(--orange);color:#202125;border-color:var(--orange)}.mobile-access a:last-child{background:var(--light);color:#202125}}
@media(max-width:380px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.access .button{padding:8px 9px}.hero h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}