/* ぷりん研究所 — custard yellow + caramel brown */
:root{
  --bg:#fff7dc;
  --bg-2:#ffefb8;
  --card:#fffdf6;
  --custard:#ffd54a;
  --custard-deep:#f5b81c;
  --caramel:#9a5420;
  --caramel-dark:#5c300f;
  --ink:#3b230e;
  --muted:#7a5a3c;
  --line:#efd48a;
  --shadow:0 6px 0 rgba(92,48,15,.14);
  --radius:22px;
  --display:"Mochiy Pop One","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#21140a;--bg-2:#2c1b0d;--card:#331f0f;--custard:#ffd54a;--custard-deep:#f5b81c;
    --caramel:#e09a58;--caramel-dark:#2a1708;--ink:#fff1d4;--muted:#d6b893;--line:#5a3a1c;
    --shadow:0 6px 0 rgba(0,0,0,.35);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#21140a;--bg-2:#2c1b0d;--card:#331f0f;--custard:#ffd54a;--custard-deep:#f5b81c;
  --caramel:#e09a58;--caramel-dark:#2a1708;--ink:#fff1d4;--muted:#d6b893;--line:#5a3a1c;
  --shadow:0 6px 0 rgba(0,0,0,.35);color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:500;line-height:1.8;word-break:auto-phrase;
  background-image:radial-gradient(var(--bg-2) 2px,transparent 2.5px);background-size:28px 28px}
img{max-width:100%;height:auto;display:block}
a{color:var(--caramel)}
a:hover{color:var(--custard-deep)}
:focus-visible{outline:3px solid var(--custard-deep);outline-offset:3px;border-radius:6px}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header: caramel sauce dripping over the page ---------- */
.site-header{position:relative;background:#6b3712;color:#fff4d6;z-index:2}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand:hover{color:inherit}
.brand svg{width:40px;height:40px;flex:none}
.brand b{font-family:var(--display);font-weight:400;font-size:clamp(18px,4.6vw,22px);letter-spacing:.04em;line-height:1.1;display:block}
.brand small{display:block;font-size:10px;letter-spacing:.32em;opacity:.75;line-height:1.2}
.nav{display:flex;gap:4px;font-size:14px}
.nav a{color:#fff4d6;text-decoration:none;padding:6px 10px;border-radius:99px}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(255,213,74,.2);color:#ffe08a}
.drip{display:block;width:100%;height:22px;color:#6b3712;margin-top:-1px}

/* ---------- hero ---------- */
.hero{padding:28px 0 8px}
.hero .wrap{display:block}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,7.4vw,52px);line-height:1.25;margin:0 0 10px;color:var(--caramel)}
.hero h1 span{color:var(--custard-deep);-webkit-text-stroke:0}
.hero p{margin:0;color:var(--muted);font-size:clamp(14px,3.6vw,17px)}

/* ---------- section headings ---------- */
main{padding-bottom:48px}
.section{margin-top:36px}
.h2{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:400;font-size:clamp(20px,5vw,26px);color:var(--caramel);margin:0 0 16px;line-height:1.3}
.h2::before{content:"";width:14px;height:14px;border-radius:4px 4px 6px 6px;background:var(--custard);box-shadow:inset 0 4px 0 var(--caramel);flex:none}

/* ---------- game cards ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px;list-style:none;margin:0;padding:0}
.game-card{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.game-card:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(92,48,15,.16)}
.game-card .thumb{aspect-ratio:16/9;background:#140e2e;overflow:hidden}
.game-card .thumb img{width:100%;height:100%;object-fit:cover}
.game-card .body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.game-card h3{margin:0;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.35}
.game-card h3 a{color:var(--ink);text-decoration:none}
.game-card h3 a::after{content:"";position:absolute;inset:0}
.game-card{position:relative}
.game-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.tag{font-size:12px;padding:2px 10px;border-radius:99px;background:var(--bg-2);color:var(--caramel);border:1px solid var(--line);font-weight:800}
.game-card.soon{border-style:dashed;box-shadow:none;align-items:center;justify-content:center;text-align:center;min-height:240px;padding:24px;color:var(--muted)}
.game-card.soon:hover{transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:400;font-size:18px;
  padding:14px 28px;border-radius:99px;border:0;background:var(--custard);color:#4a2709;text-decoration:none;cursor:pointer;
  box-shadow:0 5px 0 var(--custard-deep),0 5px 0 2px rgba(92,48,15,.25);transition:transform .1s,box-shadow .1s;min-height:52px}
.btn:hover{color:#4a2709;transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--custard-deep)}
.btn.caramel{background:#8a4618;color:#fff4d6;box-shadow:0 5px 0 #5c300f}
.btn.caramel:hover{color:#fff4d6}

/* ---------- game detail page ---------- */
.breadcrumb{font-size:13px;color:var(--muted);margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li+li::before{content:"›";margin-right:6px}
.breadcrumb a{color:var(--muted)}
.game-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;margin-top:14px}
.game-hero .shot{border-radius:var(--radius);overflow:hidden;border:3px solid var(--line);box-shadow:var(--shadow);background:#140e2e;aspect-ratio:16/9}
.game-hero .shot img{width:100%;height:100%;object-fit:cover}
.game-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,8vw,48px);line-height:1.2;margin:0;color:var(--ink)}
.game-hero .en{margin:0 0 10px;font-size:12px;letter-spacing:.3em;color:var(--muted)}
.game-hero .lead{margin:0 0 18px}
.game-hero .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}

.panel{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4vw,28px);box-shadow:var(--shadow)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:12px 12px 16px 16px;
  background:var(--custard);box-shadow:inset 0 7px 0 #8a4618;color:#4a2709;font-family:var(--display);padding-top:6px;font-size:17px}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:20px}
.controls h3{margin:0 0 8px;font-size:16px;color:var(--caramel)}
.controls dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;font-size:15px}
.controls dt{font-weight:800;white-space:nowrap}
.controls dd{margin:0}
kbd{display:inline-block;font-family:var(--body);font-weight:800;font-size:13px;padding:1px 8px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);border-bottom-width:3px;color:var(--ink)}
.tips{margin:20px 0 0;padding:14px 18px;border-radius:16px;background:var(--bg-2);font-size:14px}
.tips b{color:var(--caramel)}

.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,460px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 14px;margin:0;list-style:none;overscroll-behavior-x:contain}
.gallery li{scroll-snap-align:start}
@media (min-width:900px){.gallery{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}}
.gallery figure{margin:0}
.gallery img{border-radius:16px;border:3px solid var(--line);aspect-ratio:16/9;object-fit:cover;width:100%;background:#140e2e}
.gallery figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.play-cta{text-align:center;margin-top:36px}
.play-cta p{color:var(--muted);font-size:13px;margin:10px 0 0}

/* ---------- share ---------- */
.share{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.share-label{font-weight:800;color:var(--caramel);margin-right:4px}
.share a,.share button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:99px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);font:800 14px var(--body);text-decoration:none;cursor:pointer;transition:background .15s}
.share a:hover,.share button:hover{background:var(--bg-2);color:var(--ink)}
.share svg{width:18px;height:18px;flex:none}
.share .x svg{color:var(--ink)}
.share .line svg{color:#06c755}
.share .fb svg{color:#1877f2}
.share [data-share="native"][hidden]{display:none}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#5c300f;color:#fff4d6;padding:10px 20px;border-radius:99px;font-weight:800;font-size:14px;transition:.25s;z-index:10}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- prose (privacy) ---------- */
.prose{max-width:760px}
.prose h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,6vw,36px);color:var(--caramel);line-height:1.3;margin:24px 0 8px}
.prose h2{font-size:18px;margin:32px 0 8px;padding-left:12px;border-left:6px solid var(--custard)}
.prose p,.prose li{font-size:15px}
.prose ul{padding-left:1.4em}
.prose .updated{color:var(--muted);font-size:13px;margin:0 0 20px}

/* ---------- footer ---------- */
.site-footer{background:#6b3712;color:#f3dcb5;padding:30px 0 calc(env(safe-area-inset-bottom,0px) + 26px);font-size:13px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.site-footer a{color:#ffe08a}
.site-footer small{opacity:.8}
.foot-drip{display:block;width:100%;height:22px;color:#6b3712;transform:scaleY(-1);margin-bottom:-1px}

@media (max-width:720px){
  .game-hero{grid-template-columns:1fr;gap:18px}
  .nav a{padding:6px 8px}
  .nav .hide-sm{display:none}
  .btn{width:100%}
}