/* 前衛ポップ: 黒の太線+ハードシャドウ+ミント/ライム/イエロー/ピンクのタイル。ロゴは寝ねこ。 */
:root{
  --bg:#fff6e6; --card:#fffdf7; --ink:#0d0a0a; --sub:#3b322e; --line:#0d0a0a; --shadow:#0d0a0a;
  --mint:#59aef2; --lime:#ffc62e; --yellow:#ffa3ba; --pink:#ff8fa3; --navy:#3b2b26;
  --bar:#59aef2; --barink:#241f20; --hero-ink:#241f20;
  --display:"Zen Kaku Gothic New","Hiragino Sans",sans-serif; --en:"Inter Tight","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#1d1b1a;--card:#2a2725;--ink:#fffaf1;--sub:#e0d6ca;--line:#fff6e6;--shadow:#fff6e6;--hero-ink:#fff6e6;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1d1b1a;--card:#2a2725;--ink:#fffaf1;--sub:#e0d6ca;--line:#fff6e6;--shadow:#fff6e6;--hero-ink:#fff6e6;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--display);font-weight:500;line-height:1.7}
.in{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
/* ticker */
.ticker{background:var(--bar);color:var(--barink);border-bottom:2.5px solid #241f20;overflow:hidden;white-space:nowrap;font:900 13px/1 var(--en);letter-spacing:.14em;padding:10px 0}
.ticker div{display:inline-block;animation:tk 28s linear infinite}
@keyframes tk{to{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none}}
/* header */
header{border-bottom:2.5px solid var(--line)}
header .in{display:flex;align-items:center;justify-content:space-between;padding-block:12px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 18px var(--display);letter-spacing:.02em}
.brand svg{width:44px;height:auto;fill:var(--ink)}
nav.top{display:flex;align-items:center;gap:6px;font:800 12px var(--en);letter-spacing:.1em}
nav.top a{text-decoration:none;padding:6px 10px}
nav.top a.pill{background:var(--ink);color:var(--bg);border-radius:99px;padding:8px 16px}
@media(max-width:520px){nav.top a:not(.pill){display:none}}
/* hero */
.hero{padding-block:40px 28px;display:grid;gap:22px;grid-template-columns:1.1fr .9fr;align-items:center}
@media(max-width:760px){.hero{grid-template-columns:1fr}}
.hero .kick{font:900 12px var(--en);letter-spacing:.2em;display:inline-block;background:var(--card);color:#241f20;border:2.5px solid #241f20;padding:4px 12px;border-radius:99px;transform:rotate(-2deg)}
.hero h1{font:900 clamp(44px,9vw,88px)/1.02 var(--display);margin:16px 0 14px;letter-spacing:-.02em;text-wrap:balance}
.hero h1 mark{background:var(--yellow);color:#241f20;padding:0 .12em;box-shadow:4px 4px 0 var(--shadow);border:2.5px solid #241f20;display:inline-block;transform:rotate(1.5deg)}
.hero p{margin:0;max-width:26em;color:var(--sub);font-weight:700;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{font:900 13px var(--en);letter-spacing:.06em;border:2.5px solid var(--line);border-radius:99px;padding:5px 14px;background:var(--card)}
.chips span:nth-child(1){background:var(--yellow);color:#241f20;border-color:#241f20}
.stage{position:relative;background:#f6dab8;border:2.5px solid #241f20;border-radius:22px;box-shadow:8px 8px 0 var(--shadow);aspect-ratio:1/.82;display:grid;place-items:center;overflow:hidden}
.stage .cat{position:relative;width:70%;height:auto;fill:#0d0a0a;margin-top:10%}
.stage svg.room{position:absolute;inset:0;width:100%;height:100%}
.stage i{position:absolute;font:900 13px var(--en);letter-spacing:.14em;background:#fff;color:#241f20;border:2.5px solid #241f20;border-radius:99px;padding:3px 12px;font-style:normal}
.stage i:nth-of-type(1){top:16px;left:16px;transform:rotate(-4deg)}
.stage i:nth-of-type(2){bottom:16px;right:16px;background:var(--yellow);transform:rotate(3deg)}
.stage b.x{position:absolute;right:-26px;top:-26px;width:90px;height:90px;border-radius:50%;background:var(--lime);border:2.5px solid #241f20}
.stage em.x{position:absolute;left:-16px;bottom:30px;width:56px;height:56px;background:var(--yellow);border:2.5px solid #241f20;transform:rotate(18deg)}
/* jump */
.jump{display:flex;gap:10px;flex-wrap:wrap;padding-block:6px 4px}
.jump a{font:800 14px var(--display);text-decoration:none;border:2.5px solid var(--line);border-radius:99px;padding:7px 16px;background:var(--card);box-shadow:3px 3px 0 var(--shadow);transition:transform .12s,box-shadow .12s}
.jump a:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow)}
/* categories */
.cat{padding-top:46px}
.cat-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2.5px solid var(--line);padding-bottom:10px;margin-bottom:20px}
.cat-en{font:900 12px var(--en);letter-spacing:.16em;background:var(--yellow);color:#241f20;border:2.5px solid #241f20;padding:2px 10px;border-radius:6px}
.cat-head h2{margin:0;font:900 26px/1.2 var(--display)}
.cat-n{margin-left:auto;font:800 12px var(--en);letter-spacing:.14em;color:var(--sub)}
.games{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.games{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.games{grid-template-columns:repeat(4,minmax(0,1fr))}}
a.game{display:flex;flex-direction:column;background:var(--card);border:2.5px solid var(--line);border-radius:16px;box-shadow:5px 5px 0 var(--shadow);text-decoration:none;overflow:hidden;transition:transform .12s,box-shadow .12s}
a.game:hover{--c:var(--yellow);transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--shadow)}
a.game:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
a.game:focus-visible,.jump a:focus-visible,nav.top a:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.tile{background:var(--c);border-bottom:2.5px solid var(--line);display:grid;place-items:center;padding:14px;aspect-ratio:16/10}
.tile svg{width:min(64%,86px);height:auto;filter:drop-shadow(3px 3px 0 rgba(17,17,17,.9))}
.body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.body h3{margin:0;font:900 15px/1.35 var(--display)}
.body p{margin:0;color:var(--sub);font-weight:700;font-size:12.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.go{margin-top:auto;padding-top:6px;font:900 11px var(--en);letter-spacing:.16em;display:flex;justify-content:space-between}
.go i{font-style:normal;transition:transform .12s}
a.game:hover .go i{transform:translateX(4px)}
/* about */
.about{margin-top:64px;background:var(--navy);color:#fff;border-top:2.5px solid #241f20}
.about .in{padding-block:44px;display:grid;gap:22px;grid-template-columns:1fr 1fr}
@media(max-width:700px){.about .in{grid-template-columns:1fr}}
.about h2{margin:0;font:900 clamp(28px,5vw,44px)/1.15 var(--display);text-wrap:balance}
.about p{margin:0 0 14px;font-weight:700;color:#ffffff;font-size:14.5px}
.sns{display:flex;flex-wrap:wrap;gap:10px}
.sns a{font:900 13px var(--en);letter-spacing:.1em;text-decoration:none;background:#fff6e6;color:#241f20;border:2.5px solid #241f20;border-radius:99px;padding:8px 18px;box-shadow:3px 3px 0 #241f20}
.sns a:hover{background:var(--yellow)}
footer{background:#241f20;color:#fff6e6;font:700 12px var(--en);letter-spacing:.08em}
footer .in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:18px}
footer nav{display:flex;gap:16px}

/* ねこ要素 */
:root{--paw-c:#241f20}
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23ffa3ba' stroke='%23241f20' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='18' cy='23' rx='8' ry='7'/%3E%3Cellipse cx='7' cy='15' rx='3.2' ry='4' transform='rotate(-20 7 15)'/%3E%3Cellipse cx='14' cy='8' rx='3.2' ry='4.2' transform='rotate(-6 14 8)'/%3E%3Cellipse cx='22' cy='8' rx='3.2' ry='4.2' transform='rotate(6 22 8)'/%3E%3Cellipse cx='29' cy='15' rx='3.2' ry='4' transform='rotate(20 29 15)'/%3E%3C/g%3E%3C/svg%3E") 18 18,auto}
a,button,.stage{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23ffa3ba' stroke='%23241f20' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='18' cy='23' rx='8.5' ry='7.5'/%3E%3Cellipse cx='6.5' cy='15' rx='3.4' ry='4.2' transform='rotate(-20 6.5 15)'/%3E%3Cellipse cx='13.5' cy='7.5' rx='3.4' ry='4.4' transform='rotate(-6 13.5 7.5)'/%3E%3Cellipse cx='22.5' cy='7.5' rx='3.4' ry='4.4' transform='rotate(6 22.5 7.5)'/%3E%3Cellipse cx='29.5' cy='15' rx='3.4' ry='4.2' transform='rotate(20 29.5 15)'/%3E%3C/g%3E%3C/svg%3E") 18 18,pointer}
body::before{content:"";position:fixed;inset:-80px;z-index:-1;pointer-events:none;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23241f20' fill-opacity='.07'%3E%3Cg transform='translate(40 50) rotate(-18)'%3E%3Cellipse cx='0' cy='6' rx='9' ry='8'/%3E%3Ccircle cx='-12' cy='-6' r='3.6'/%3E%3Ccircle cx='-4' cy='-14' r='3.8'/%3E%3Ccircle cx='5' cy='-14' r='3.8'/%3E%3Ccircle cx='13' cy='-6' r='3.6'/%3E%3C/g%3E%3Cg transform='translate(150 150) rotate(14) scale(1.2)'%3E%3Cellipse cx='0' cy='6' rx='9' ry='8'/%3E%3Ccircle cx='-12' cy='-6' r='3.6'/%3E%3Ccircle cx='-4' cy='-14' r='3.8'/%3E%3Ccircle cx='5' cy='-14' r='3.8'/%3E%3Ccircle cx='13' cy='-6' r='3.6'/%3E%3C/g%3E%3Ccircle cx='110' cy='95' r='2.4'/%3E%3Ccircle cx='200' cy='40' r='2.4'/%3E%3Ccircle cx='20' cy='190' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  animation:drift 60s linear infinite}
@keyframes drift{to{background-position:220px 220px}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before{filter:invert(1)}}
:root[data-theme="dark"] body::before{filter:invert(1)}
.paw{position:fixed;z-index:50;pointer-events:none;width:26px;height:26px;margin:-13px 0 0 -13px;animation:pawf 1.3s ease-out forwards}
@keyframes pawf{0%{opacity:0;transform:var(--t) scale(.5)}15%{opacity:.9;transform:var(--t) scale(1)}100%{opacity:0;transform:var(--t) scale(.9)}}
.hero .stage{cursor:pointer;user-select:none}
.say{position:absolute;left:50%;top:14%;transform:translateX(-50%) scale(.6);background:#fff;color:#241f20;border:2.5px solid #241f20;border-radius:16px;padding:6px 14px;font:900 15px var(--display);opacity:0;pointer-events:none;white-space:nowrap;box-shadow:3px 3px 0 #241f20}
.say::after{content:"";position:absolute;left:50%;bottom:-9px;width:12px;height:12px;background:#fff;border-right:2.5px solid #241f20;border-bottom:2.5px solid #241f20;transform:translateX(-50%) rotate(45deg)}
.say.on{animation:pop 1.6s ease forwards}
@keyframes pop{0%{opacity:0;transform:translateX(-50%) scale(.5)}12%{opacity:1;transform:translateX(-50%) scale(1.08)}22%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(1)}}
.stage .cat{transform-origin:50% 90%}
.stage.poke .cat{animation:wob .6s ease}
@keyframes wob{0%,100%{transform:none}25%{transform:scale(1.04,.94) rotate(-1.5deg)}60%{transform:scale(.98,1.04) rotate(1deg)}}
.stage .zz{position:absolute;font:900 20px var(--en);color:#241f20;animation:zz 3.2s ease-in infinite;opacity:0}
.stage .zz:nth-of-type(1){left:62%;top:30%}
.stage .zz:nth-of-type(2){left:70%;top:24%;animation-delay:1.1s;font-size:26px}
.stage .zz:nth-of-type(3){left:78%;top:16%;animation-delay:2.2s;font-size:32px}
@keyframes zz{0%{opacity:0;transform:translateY(10px)}25%{opacity:1}100%{opacity:0;transform:translateY(-22px) rotate(8deg)}}
.stage .whisk{position:absolute;width:60px;height:2.5px;background:#241f20;left:10%;top:56%}
/* ねこ耳カード */
a.game{position:relative;isolation:isolate;overflow:visible}
a.game::before,a.game::after{content:"";position:absolute;top:-11px;width:26px;height:26px;background:var(--c);border:2.5px solid var(--line);z-index:-1;transition:transform .2s}
a.game::before{left:16px;transform:rotate(45deg) skew(8deg,8deg);border-radius:4px 0 0 0}
a.game::after{right:16px;transform:rotate(45deg) skew(-8deg,-8deg);border-radius:0 4px 0 0}
a.game:hover::before{transform:rotate(38deg) skew(8deg,8deg) translateY(-3px)}
a.game:hover::after{transform:rotate(52deg) skew(-8deg,-8deg) translateY(-3px)}
.tile{border-radius:13px 13px 0 0}
.go i{display:inline-block}
a.game:hover .go i{animation:none}
/* 帯 */
.ticker{background:#241f20;color:#fff6e6;border-bottom:2.5px solid #241f20}
.ticker div{display:inline-flex;align-items:center;gap:22px;animation:tk 36s linear infinite}
.ticker svg{width:34px;height:auto;fill:var(--yellow);flex:none}
.ticker .pw{width:15px;fill:var(--yellow)}
.ticker b{font-weight:900;color:var(--yellow)}
/* about: ねこ耳が出る */
.about{position:relative;margin-top:84px}
.about::before,.about::after{content:"";position:absolute;top:-40px;width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:40px solid var(--navy)}
.about::before{left:12%;transform:rotate(-8deg)}.about::after{left:calc(12% + 90px);transform:rotate(8deg)}
.about .eyes{position:absolute;top:-6px;left:calc(12% + 20px);display:flex;gap:40px}

.page{background:var(--card);border:2.5px solid var(--line);border-radius:18px;box-shadow:6px 6px 0 var(--shadow);padding:26px 22px;margin:34px 0 10px}
.page h1{font:900 clamp(26px,5vw,36px)/1.2 var(--display);margin:0 0 16px}
.page h2{font:900 17px var(--display);margin:28px 0 6px;display:inline-block;background:var(--yellow);border:2.5px solid var(--line);border-radius:8px;padding:1px 12px;color:#0d0a0a}
.page p,.page li{font-size:14.5px;font-weight:700;line-height:1.85}
.page .date{color:var(--sub);font-size:13px;margin:0 0 14px}
.page a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--yellow)}
.page table{width:100%;border-collapse:collapse}
.page th,.page td{padding:14px 8px;border-bottom:2px solid var(--line);text-align:left;vertical-align:top;font-size:14.5px}
.page th{width:7.5em;color:var(--sub);white-space:nowrap;font-weight:900}
.page tr:last-child th,.page tr:last-child td{border-bottom:0}
.page .back{margin-top:26px}