/* Asobitsubu: editorial arcade shell. The native games above .site-content
   retain their own rendering and controls. */
:root{--pp-bg:#f3f1e9;--pp-paper:#fffdf7;--pp-ink:#172624;--pp-muted:#65716b;--pp-line:#172624;--pp-accent:#ff653e;--pp-blue:#2447df}
html{scroll-behavior:smooth}
body:not(:has(> #game-native)),.site-content{background:var(--pp-bg)!important;color:var(--pp-ink)!important;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif!important}
body:not(:has(> #game-native))::before{content:"ASOBITSUBU  /  BROWSER ARCADE";display:block;padding:7px 4vw;background:var(--pp-ink);color:#f8f6ed;font:700 10px/1.3 Georgia,serif;letter-spacing:.2em;text-align:right}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--pp-blue)!important;outline-offset:3px}

/* Shared editorial pages */
body:not(:has(> #game-native)) > .site-header,body > .site-content .site-header{max-width:1260px!important;width:min(100% - 40px,1260px)!important;margin:0 auto!important;padding:24px 0 20px!important;border-bottom:2px solid var(--pp-line)!important;background:transparent!important}
.site-header .brand,.site-content .site-header .brand{color:var(--pp-ink)!important;font-weight:900!important;letter-spacing:-.04em!important}
.brand-mark,.site-content .brand-mark{width:48px!important;height:48px!important;flex-basis:48px!important;border:2px solid var(--pp-line)!important;border-radius:6px!important;background:var(--pp-accent)!important;color:var(--pp-ink)!important;box-shadow:4px 4px 0 var(--pp-line)!important;transform:rotate(-4deg)}
.brand-name{font-size:23px!important}.brand-sub,.site-content .brand small{font-family:Georgia,serif!important;font-size:9px!important;letter-spacing:.18em!important;color:var(--pp-muted)!important}
.header-note,.site-nav a{color:var(--pp-ink)!important;font-weight:800!important}
body:not(:has(> #game-native)) > main,body > .site-content .site-main{max-width:1260px!important;width:min(100% - 40px,1260px)!important;margin:0 auto!important;padding:27px 0 80px!important}
.breadcrumb,.site-content .breadcrumb{color:var(--pp-muted)!important;font-size:11px!important;letter-spacing:.06em!important}
.breadcrumb a,.site-content .breadcrumb a{color:var(--pp-ink)!important}
main:has(> .article-hero),.site-content .site-main:has(> .article-hero){display:grid!important;grid-template-columns:minmax(220px,31%) minmax(0,1fr)!important;column-gap:clamp(28px,5vw,78px)!important;align-items:start!important}
main:has(> .article-hero) > .breadcrumb,.site-content .site-main:has(> .article-hero) > .breadcrumb{grid-column:1/-1!important;margin:0 0 30px!important}
.article-hero,.site-content .article-hero{grid-column:1!important;position:sticky!important;top:24px!important;margin:0!important;padding:25px 0 30px!important;background:transparent!important;border:0!important;border-top:7px solid var(--pp-accent)!important;border-radius:0!important;box-shadow:none!important;color:var(--pp-ink)!important}
.article-hero::before,.site-content .article-hero::before{content:"FIELD GUIDE  /  01";display:block;margin:0 0 25px;font:700 10px/1.3 Georgia,serif;letter-spacing:.18em;color:var(--pp-blue)}
.article-hero .eyebrow,.site-content .article-hero .eyebrow{background:none!important;padding:0!important;border-radius:0!important;color:var(--pp-muted)!important;font:700 10px/1.4 Georgia,serif!important;letter-spacing:.16em!important}
.article-hero h1,.site-content .article-hero h1{font-size:clamp(28px,3.1vw,45px)!important;line-height:1.3!important;letter-spacing:-.055em!important;color:var(--pp-ink)!important;margin:18px 0!important;overflow-wrap:anywhere}
.article-hero .lead,.site-content .article-hero .lead{font-size:13px!important;line-height:1.9!important;color:var(--pp-muted)!important}
.article-actions,.site-content .article-actions{gap:8px!important}.action-link,.site-content .action-link{border:1px solid var(--pp-line)!important;border-radius:4px!important;background:var(--pp-paper)!important;color:var(--pp-ink)!important;box-shadow:3px 3px 0 var(--pp-line)!important;font-weight:800!important}.action-link.primary,.site-content .action-link.primary{background:var(--pp-accent)!important;color:var(--pp-ink)!important}
.article-body,.site-content .article-body{grid-column:2!important;margin:0!important;padding:clamp(22px,3vw,44px)!important;background:var(--pp-paper)!important;border:1.5px solid var(--pp-line)!important;border-radius:0!important;box-shadow:7px 7px 0 var(--pp-line)!important;color:var(--pp-ink)!important;min-width:0!important}
.article-body::before,.site-content .article-body::before{content:"READ THE GUIDE";display:block;margin-bottom:22px;color:var(--pp-blue);font:700 11px/1.2 Georgia,serif;letter-spacing:.2em}
.article-body p,.site-content .article-body p{color:#394743!important;line-height:1.95!important}
.article-body h2,.site-content .article-body h2{font-size:clamp(19px,2vw,25px)!important;line-height:1.5!important;letter-spacing:-.03em!important;margin-top:40px!important;padding:0 0 10px!important;border-bottom:2px solid var(--pp-line)!important;color:var(--pp-ink)!important}
.article-body h2:first-child,.site-content .article-body h2:first-child{margin-top:0!important}.article-body h3,.site-content .article-body h3{color:var(--pp-ink)!important}
.article-body a,.site-content .article-body a{color:var(--pp-blue)!important;text-decoration-thickness:1.5px!important}
.article-body th,.site-content .article-body th{background:#e7edea!important;color:var(--pp-ink)!important}.article-body th,.article-body td,.site-content .article-body th,.site-content .article-body td{border-color:#b8c2bc!important}
.reading-note{margin:0 0 30px;padding:16px 18px;border-left:5px solid var(--pp-accent);background:#edf2e9}.reading-note span{display:block;color:var(--pp-blue);font:700 10px/1.3 Georgia,serif;letter-spacing:.17em}.reading-note p{margin:6px 0 0!important;font-size:13px!important}
.core-intro{margin:0 0 30px;padding:0 0 23px;border-bottom:1px solid #bcc7bf}.article-body .core-intro p,.site-content .article-body .core-intro p{margin:0 0 14px!important;color:var(--pp-ink)!important;font-size:clamp(15px,1.4vw,18px)!important;line-height:1.85!important}.article-body .core-intro p:first-child,.site-content .article-body .core-intro p:first-child{font-weight:800!important;letter-spacing:-.02em}.article-body .core-intro p:last-child,.site-content .article-body .core-intro p:last-child{margin-bottom:0!important;color:#45524c!important;font-size:14px!important;font-weight:400!important}
.related,.site-content .related{grid-column:2!important;margin:26px 0 0!important;padding:22px!important;border:1.5px solid var(--pp-line)!important;border-radius:0!important;background:#e8ece5!important;box-shadow:none!important}.related-links a,.site-content .related-links a{border:1px solid var(--pp-line)!important;border-radius:3px!important;background:var(--pp-paper)!important;color:var(--pp-ink)!important}
.site-footer,.site-content .site-footer,body > footer{max-width:1260px!important;width:min(100% - 40px,1260px)!important;margin:0 auto!important;padding:20px 0 40px!important;border-top:2px solid var(--pp-line)!important;color:var(--pp-muted)!important}

/* Directory front page: one strong hero followed by an indexed gallery. */
body:has(.page-home) .site-header,body:has(#game-grid) .site-header{max-width:1260px!important;width:min(100% - 40px,1260px)!important;margin:auto!important;padding:24px 0 20px!important;border-bottom:2px solid var(--pp-line)}
body:has(#game-grid) main{max-width:1260px!important;width:min(100% - 40px,1260px)!important;padding:28px 0 80px!important}
body:has(#game-grid) .hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);gap:20px;min-height:390px;margin:0 0 40px!important;padding:clamp(26px,4vw,55px)!important;border:2px solid var(--pp-line)!important;border-radius:0!important;background:var(--pp-accent)!important;box-shadow:9px 9px 0 var(--pp-line)!important}
body:has(#game-grid) .hero::before{content:"AS / 01";grid-column:2;grid-row:1;position:static;width:auto;height:auto;align-self:end;justify-self:end;background:none;color:var(--pp-ink);border-radius:0;font:700 clamp(48px,9vw,140px)/1 Georgia,serif;letter-spacing:-.1em;white-space:nowrap}
body:has(#game-grid) .hero::after{content:"A SMALL ARCADE FOR CURIOUS MINDS";position:absolute;right:45px;top:45px;width:150px;height:auto;background:none;border-radius:0;font:700 10px/1.5 Georgia,serif;letter-spacing:.16em;text-align:right}
body:has(#game-grid) .hero-inner{grid-column:1;grid-row:1;max-width:740px!important}.hero .eyebrow{padding:5px 0!important;background:none!important;color:var(--pp-ink)!important;font:700 11px/1.3 Georgia,serif!important;letter-spacing:.2em!important}.hero .eyebrow::before{content:"●";color:var(--pp-ink)}
body:has(#game-grid) .hero h1{font-size:clamp(38px,5.6vw,78px)!important;line-height:1.18!important;letter-spacing:-.08em!important;color:var(--pp-ink)!important}.hero h1 em{color:var(--pp-paper)!important;text-shadow:2px 2px 0 var(--pp-ink)}
body:has(#game-grid) .hero p{color:#303b31!important;font-size:14px!important;max-width:540px!important}.hero-stats{margin-top:26px!important}.stat{border:1px solid var(--pp-line)!important;border-radius:3px!important;background:var(--pp-paper)!important;color:var(--pp-ink)!important}
.toolbar{margin:42px 0 17px!important;align-items:end!important}.section-title{font-size:clamp(24px,3vw,38px)!important;letter-spacing:-.06em!important;color:var(--pp-ink)!important}.section-title small{font-size:11px!important;letter-spacing:.04em!important}.search input{border:1.5px solid var(--pp-line)!important;border-radius:2px!important;background:var(--pp-paper)!important;box-shadow:3px 3px 0 var(--pp-line)!important}
.filter{border:1px solid var(--pp-line)!important;border-radius:2px!important;background:var(--pp-paper)!important;color:var(--pp-ink)!important}.filter[aria-pressed="true"]{background:var(--pp-blue)!important;color:white!important;border-color:var(--pp-blue)!important}
.genre-hubs{margin:8px 0 28px!important}.genre-hubs>span{color:var(--pp-muted)!important}.genre-hubs a,.genre-links a{border:1px solid var(--pp-line)!important;border-radius:2px!important;background:#e9eee7!important;color:var(--pp-ink)!important}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;counter-reset:game}.game-card{counter-increment:game;border:1.5px solid var(--pp-line)!important;border-radius:0!important;background:var(--pp-paper)!important;box-shadow:4px 4px 0 var(--pp-line)!important;padding:12px!important;transition:transform .16s,box-shadow .16s!important}.game-card:hover{transform:translate(-3px,-3px)!important;box-shadow:7px 7px 0 var(--pp-line)!important}.game-card::before{content:counter(game,decimal-leading-zero);position:absolute;z-index:2;top:18px;left:18px;padding:4px 7px;background:var(--pp-paper);border:1px solid var(--pp-line);font:700 11px/1 Georgia,serif}.card-art{height:145px!important;border-radius:0!important;filter:saturate(.8)}.card-art::before,.card-art::after{display:none}.card-mark{font-family:Georgia,"Hiragino Mincho ProN",serif!important;font-size:65px!important;color:var(--pp-ink)!important;text-shadow:2px 2px 0 #fff8!important}.card-category{color:var(--pp-blue)!important}.card-title{color:var(--pp-ink)!important;font-size:17px!important}.card-desc{color:var(--pp-muted)!important}.card-cta{border-color:#b6c0b9!important;color:var(--pp-ink)!important}.card-cta span:last-child{border:1px solid var(--pp-line);border-radius:2px!important;background:var(--pp-accent)!important}
.bottom-note{border:1.5px solid var(--pp-line)!important;border-radius:0!important;background:#e8ede6!important;color:var(--pp-muted)!important}.bottom-note h2{color:var(--pp-ink)!important}
@media(max-width:900px){main:has(> .article-hero),.site-content .site-main:has(> .article-hero){grid-template-columns:1fr!important}.article-hero,.site-content .article-hero,.article-body,.site-content .article-body,.related,.site-content .related{grid-column:1!important}.article-hero,.site-content .article-hero{position:static!important;padding-bottom:20px!important}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){body:not(:has(> #game-native)) > .site-header,body > .site-content .site-header,body:not(:has(> #game-native)) > main,body > .site-content .site-main,body:has(#game-grid) .site-header,body:has(#game-grid) main,.site-footer,.site-content .site-footer,body > footer{width:min(100% - 28px,1260px)!important}.site-header .brand,.site-content .brand{font-size:14px!important}.brand-mark,.site-content .brand-mark{width:39px!important;height:39px!important;flex-basis:39px!important}.site-nav{font-size:10px!important}body:has(#game-grid) .hero{grid-template-columns:1fr!important;min-height:0!important;padding:25px!important}body:has(#game-grid) .hero::before,body:has(#game-grid) .hero::after{display:none!important}body:has(#game-grid) .hero h1{font-size:clamp(34px,9vw,54px)!important}.grid{gap:12px!important}.game-card{padding:9px!important}.card-art{height:105px!important}.card-mark{font-size:47px!important}.card-title{font-size:14px!important}.article-body,.site-content .article-body{padding:20px!important;box-shadow:4px 4px 0 var(--pp-line)!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.game-card{transition:none!important}}