:root{color-scheme:light;--dark:#21183d;--brown:#573023;--cream:#fff2d3;--gold:#f4be52;--pixel-shadow:3px 3px 0 #332148,-3px -3px 0 #332148;--panel-border:#774322}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#164b96;color:#281933;font-family:'Trebuchet MS','Hiragino Maru Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:700}.skip{position:fixed;left:1rem;top:-3rem;z-index:50;background:#fff;padding:.6rem}.skip:focus{top:1rem}.page-shell{width:100%;height:100vh;height:100dvh;max-width:2000px;margin:0 auto;display:grid;grid-template-rows:clamp(46px,5.6vh,64px) minmax(0,1fr) 22px;overflow:hidden;background:#1198eb url('assets/pixel-sky.webp') center center/cover no-repeat;box-shadow:0 0 0 3px #2b2252}.topbar{z-index:10;display:flex;align-items:center;gap:1vw;padding:0 2%;background:linear-gradient(180deg,#38284d,#201936);border-bottom:4px solid #e7ba52;box-shadow:0 3px 0 #553d7a;color:white;min-width:0}.brand{display:flex;align-items:center;gap:.4rem;white-space:nowrap;color:#fff3d9;text-decoration:none;font-weight:1000;font-size:clamp(14px,1.52vw,26px);letter-spacing:-1px;text-shadow:2px 2px #6d302d,-1px -1px #9e572b}.brand-icon{font-size:1.45em}.brand-gate{color:#b7ffe0}.brand-games{color:#badaff}.topbar nav{flex:1;display:flex;min-width:0;justify-content:space-evenly;align-items:stretch;height:100%;gap:.15vw}.topbar nav a{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font-size:clamp(10px,.91vw,16px);color:white;text-decoration:none;padding:0 .42vw;text-shadow:1px 2px #111;transition:background .15s}.topbar nav a:hover,.topbar nav a:focus-visible{background:#544080}.topbar nav a.active{background:linear-gradient(#4b8fe4,#1856bc);border:3px solid #fadd81;box-shadow:inset 0 0 0 2px #2c235b}.menu-toggle{display:none}main{display:grid;grid-template-rows:minmax(0,1.12fr) minmax(0,.72fr) minmax(0,.22fr);min-height:0;overflow:hidden;background:linear-gradient(90deg,rgba(17,57,79,.13),transparent 9%,transparent 91%,rgba(17,57,79,.13))}.hero{position:relative;min-height:0;overflow:hidden;isolation:isolate;background:#64c9f4}.hero>img{width:100%;height:100%;display:block;object-fit:fill;image-rendering:auto}.hotspot{position:absolute;z-index:2;display:block;border-radius:6px}.hotspot:hover,.hotspot:focus-visible{outline:3px dashed #fff5a9;outline-offset:2px;background:rgba(255,255,255,.09)}.information{display:grid;grid-template-columns:1.48fr 1fr .83fr;gap:clamp(6px,.7vw,14px);padding:clamp(4px,.48vw,9px) clamp(8px,2.6vw,50px);min-height:0;background:linear-gradient(180deg,rgba(26,71,58,.18),rgba(20,98,56,.17)),url('assets/pixel-sky.webp') center 72%/cover}.rpg-panel{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:clamp(4px,.45vw,9px);background:#fff1d3;border:clamp(3px,.32vw,6px) solid #fff4b9;outline:clamp(2px,.17vw,4px) solid #573025;box-shadow:0 0 0 5px #9d642e,5px 6px 0 rgba(27,24,53,.65),inset 0 0 0 2px #d39f5e; border-radius:9px}.panel-heading{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:5px;color:#fff2d4;margin:0 0 clamp(5px,.5vw,11px);padding:clamp(3px,.4vw,8px) clamp(7px,.7vw,16px);min-height:clamp(26px,3.6vh,48px);border:3px solid #e2ae62;background:linear-gradient(#63331f,#3c1d1b);box-shadow:inset 0 0 0 2px #a97645;font-size:clamp(12px,1.23vw,23px);text-shadow:2px 2px #1a1625;white-space:nowrap}.twinkle{color:#fbe272}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,.6vw,12px);flex:1;min-height:0}.game-card{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:2px solid #9c89a8;box-shadow:inset 0 0 0 2px #fff,2px 2px #c49a5f;background:#fff8ee;border-radius:7px;text-align:center}.game-art{position:relative;flex:1;min-height:0;overflow:hidden;background:#a6d8f6;border-bottom:2px solid #d6b68e}.game-art img{height:100%;width:100%;display:block;object-fit:cover;image-rendering:pixelated}.game-art.muted{display:flex;align-items:center;justify-content:center;background:linear-gradient(125deg,#a6b9ed,#ddd9f6)}.controller{font-size:clamp(26px,4vw,66px);filter:drop-shadow(3px 3px 0 #7888bf)}.status{position:absolute;top:5px;left:5px;display:inline-flex;align-items:center;border-radius:6px;padding:2px 7px;color:white;font-size:clamp(9px,.75vw,14px);border:2px solid white;text-shadow:1px 1px #3b2550;box-shadow:2px 2px #49385d;white-space:nowrap}.blue{background:#2487cf}.purple{background:#8c65c3}.gold{background:#d08d27}.game-info{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;min-height:clamp(35px,6.3vh,74px);padding:3px;gap:1px}.game-info strong{font-size:clamp(11px,1.13vw,19px);line-height:1.1;color:#301c25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-info small{color:#564252;font-size:clamp(9px,.73vw,13px);line-height:1.2}.panel-footnote{font-size:clamp(8px,.58vw,11px);color:#775c4c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:clamp(3px,.35vw,7px) 0 0}.x-feed{flex:1;min-height:0;overflow:hidden;background:#192637;border:3px solid #b5cce5;border-radius:7px;box-shadow:inset 0 0 0 2px #162031;padding:clamp(9px,.9vw,17px);color:white}.x-preview{display:flex;gap:clamp(6px,.8vw,15px);height:100%;align-items:center}.x-avatar{display:flex;align-items:center;justify-content:center;background:#fff5d9;border:3px solid #ba863c;border-radius:50%;width:clamp(34px,3.5vw,66px);height:clamp(34px,3.5vw,66px);font-size:clamp(18px,2.15vw,39px);flex-shrink:0}.x-preview strong{font-size:clamp(12px,1.12vw,21px)}.x-preview p{font-weight:500;font-size:clamp(10px,.82vw,15px);line-height:1.45;margin:.45rem 0}.x-muted{font-size:clamp(10px,.7vw,13px);color:#a4b6d3}.mini-link{font-size:12px;text-align:right;color:#483059;margin:3px}.archive-layout{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1.12fr) minmax(0,.58fr);gap:4px}.archive-layout img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;border:3px solid #dfb36c;border-radius:6px}.archive-layout p{min-height:0;overflow:hidden;margin:0;color:#472e37;text-align:center;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,.91vw,16px);line-height:1.3}.rpg-link{min-height:clamp(25px,4vh,50px);flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:.7em;margin:3px auto 0;width:95%;background:linear-gradient(#574982,#39245a);border:3px solid #e4bd73;border-radius:8px;color:white;text-decoration:none;text-shadow:1px 2px #1c112d;font-size:clamp(11px,1vw,18px);box-shadow:2px 2px #332148}.rpg-link:hover{filter:brightness(1.17)}.join{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(50px,11%) 1fr minmax(190px,27%);gap:clamp(3px,.6vw,12px);align-items:center;position:relative;overflow:hidden;margin:clamp(4px,.5vw,9px) clamp(12px,3.3vw,65px);padding:clamp(3px,.5vw,10px) clamp(8px,.85vw,20px);background:#fff3d7;border:4px solid #ffedb0;outline:3px solid #86572f;border-radius:16px;box-shadow:4px 5px 0 #442753,inset 0 0 0 2px #d8a46c}.join::before,.join::after{content:'✦';position:absolute;color:#efaa3b;font-size:clamp(10px,2vw,30px);top:6%;pointer-events:none}.join::before{left:16%}.join::after{right:27%}.join-bear{font-size:clamp(34px,5vw,90px);line-height:1;text-align:center;filter:drop-shadow(2px 3px 0 #b47a46)}.join-content{min-width:0;text-align:center}.join h2{color:#663032;margin:0 0 .3em;font-size:clamp(14px,1.85vw,31px);line-height:1.08;text-shadow:1px 2px #f4bd9a;white-space:nowrap}.steps{display:flex;justify-content:space-evenly;align-items:center;gap:clamp(2px,.3vw,8px);font-size:clamp(8px,.79vw,15px)}.steps b{color:#aa4f34;font-size:1.5em}.join-button{height:74%;min-height:34px;display:flex;align-items:center;justify-content:center;gap:.4em;background:linear-gradient(#ff90bc,#f74292 60%,#c91867);color:#fff;text-shadow:2px 2px #b12f5a;border:4px solid #fff0b9;outline:3px solid #a34d55;border-radius:30px;text-decoration:none;font-size:clamp(11px,1.48vw,25px);box-shadow:inset 0 3px #ffc5da,3px 4px 0 #65405d;white-space:nowrap}.join-button:hover{filter:brightness(1.08);transform:translateY(-1px)}footer{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 2%;background:#23173b;color:#dfd0f1;font-size:clamp(9px,.7vw,12px)}
@media(min-width:1100px) and (max-height:700px){main{grid-template-rows:minmax(0,1.06fr) minmax(0,.71fr) minmax(0,.23fr)}.panel-footnote{display:none}.game-info{min-height:32px}.panel-heading{min-height:25px}.join{margin-top:3px;margin-bottom:5px}}
@media(max-width:900px){.page-shell{height:auto;min-height:100dvh;overflow:visible;display:block}.topbar{height:57px;position:sticky;top:0}.brand{font-size:18px}.menu-toggle{display:block;margin-left:auto;background:#433672;border:2px solid #e7b968;color:white;padding:5px 12px;font-size:22px;border-radius:4px}.topbar nav{display:none;position:absolute;top:100%;left:0;right:0;background:#292042;height:auto;padding:8px;flex-direction:column;box-shadow:0 5px #a97e33}.topbar nav.open{display:flex}.topbar nav a{justify-content:start;font-size:15px;padding:12px}.topbar nav a.active{border-width:2px}main{display:block;overflow:visible}.hero{aspect-ratio:1672/465}.information{grid-template-columns:1fr 1fr;gap:15px;padding:20px}.games-panel{grid-column:1/-1;min-height:255px}.x-panel,.archive-panel{min-height:240px}.game-info strong{font-size:15px}.game-info small,.archive-layout p{font-size:12px}.panel-heading{font-size:17px;min-height:40px}.join{min-height:110px;grid-template-columns:70px 1fr 190px;margin:18px 25px;padding:12px}.join h2{font-size:20px}.steps{font-size:10px}.join-button{font-size:15px}footer{height:26px}}
@media(max-width:600px){.hero{aspect-ratio:1.68;}.hero>img{object-fit:cover;object-position:center;}.hotspot{display:none}.information{display:flex;flex-direction:column;padding:15px 14px;gap:16px}.games-panel{height:290px}.game-info{min-height:51px}.game-info strong{font-size:12px}.game-info small{font-size:10px}.panel-footnote{font-size:9px}.x-panel,.archive-panel{height:250px}.join{grid-template-columns:1fr;gap:9px;margin:15px;min-height:175px}.join-bear{display:none}.join h2{white-space:normal;font-size:19px}.steps{flex-wrap:wrap;font-size:10px}.join-button{height:47px;width:90%;justify-self:center;font-size:17px}.archive-layout{grid-template-rows:minmax(0,1fr) auto}.archive-layout p{padding:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v4: a readable, non-pixel headline over the baked pixel lettering. */
.hero-smooth-title{position:absolute;top:2.5%;left:43.7%;width:42%;height:31%;z-index:1;display:flex;align-items:center;justify-content:center;gap:.22em;isolation:isolate;white-space:nowrap;border:clamp(2px,.25vw,5px) solid #d1efff;border-radius:24px 9px 24px 9px;background:linear-gradient(180deg,#166dc5 0%,#194d9b 43%,#102969 100%);box-shadow:0 0 0 clamp(3px,.28vw,6px) #263b81,0 0 0 clamp(5px,.44vw,9px) #80d8ff,0 4px 13px #112c65aa,inset 0 4px 0 #a2e7ff;text-align:center;color:#fff9e4;font-family:'Hiragino Maru Gothic ProN','Yu Gothic','Meiryo',sans-serif;font-weight:900;font-size:clamp(15px,3.2vw,58px);letter-spacing:-.065em;line-height:1.05;text-shadow:2px 3px 0 #07164f,0 0 10px #009cfc}
.hero-smooth-title:before,.hero-smooth-title:after{content:'✦';position:absolute;font-size:clamp(10px,1.5vw,24px);color:#ffe77c;text-shadow:0 0 8px #fff0ae}.hero-smooth-title:before{left:2%;top:6%}.hero-smooth-title:after{right:2%;bottom:3%}
.hero-smooth-title strong{color:#ffe36d;font-weight:900;text-shadow:2px 3px 0 #07164f,0 0 9px #fb8f4e}
/* v4: consistently sized join panel */
main{grid-template-rows:minmax(0,1.05fr) minmax(0,.72fr) minmax(0,.26fr)}
.join{grid-template-columns:minmax(42px,8%) minmax(0,1fr) minmax(160px,24%);column-gap:clamp(5px,.75vw,13px);padding:clamp(3px,.52vw,9px) clamp(12px,1vw,22px);margin:clamp(5px,.7vw,12px) clamp(14px,3.3vw,60px);border-radius:13px}
.join-bear{display:flex;align-items:center;justify-content:center;min-width:0;height:100%}.join-bear span{font-size:clamp(28px,4.3vw,76px);line-height:1}
.join-content{display:grid;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:clamp(2px,.33vw,7px)}
.join h2{font-size:clamp(13px,1.65vw,27px);margin:0;letter-spacing:-.04em}
.steps{width:100%;font-size:clamp(8px,.74vw,13px);justify-content:center;gap:clamp(2px,.45vw,10px);white-space:nowrap}
.steps span{white-space:nowrap}.steps b{font-size:1.22em}
.join-button{height:auto;min-height:clamp(33px,6vh,68px);max-height:85%;padding:4px 6px;border-radius:35px;font-size:clamp(11px,1.37vw,22px)}
@media(max-width:900px){.hero-smooth-title{font-size:clamp(12px,3vw,27px);border-radius:13px 5px 13px 5px}.join{grid-template-columns:55px minmax(0,1fr) 160px;min-height:105px}.join h2{font-size:16px}.steps{font-size:9px}.join-button{font-size:13px}}
@media(max-width:600px){.hero-smooth-title{left:28%;top:8%;width:68%;height:25%;font-size:clamp(12px,4vw,23px);gap:.1em}.join{grid-template-columns:1fr;min-height:170px;padding:12px}.join-content{gap:8px}.join h2{font-size:19px}.steps{white-space:normal;flex-wrap:wrap;gap:5px;font-size:10px}.steps span{white-space:normal}.join-button{min-height:46px;font-size:16px}}

/* Ver.5: slogan is now painted directly into the hero artwork; no duplicate HTML overlay. */
.hero-smooth-title{display:none!important}

/* Ver.7: 絵に描かれている3つのカードと透明リンク枠を完全に一致させる。
   画像サイズ 1672 × 465 px の実測座標から変換した百分率を採用。
   存在しない「紹介」「エントリー」の透明リンクは撤去。 */
.hero .hotspot {top:77.65%;height:21.35%;border-radius:1%;}
.hero .hotspot-feature-one {left:9.53%;width:18.42%;}
.hero .hotspot-feature-two {left:28.84%;width:18.48%;}
.hero .hotspot-feature-three {left:48.50%;width:19.20%;}
.hero .hotspot:hover,.hero .hotspot:focus-visible {
  outline:2px solid #ffe7a2;outline-offset:-3px;
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 3px rgba(65,34,90,.58),inset 0 0 16px rgba(255,240,161,.15);
}
@media(max-width:600px){.hero .hotspot{display:none;}}