*{box-sizing:border-box}html{background:#1b1c21;color:#444;font-family:'Merriweather Sans',Arial,'Noto Sans JP','Yu Gothic',sans-serif}body{margin:0}h1,p{margin:0}
.first-view{display:grid;place-items:center;width:100%;min-height:94svh;padding:2.5rem 1rem 3rem;background:linear-gradient(to bottom,#fff,#fff 50%,#dfeff9)}
.hero-content{width:min(100%,1200px);text-align:center}.logo{display:block;width:min(35svh,85%);height:auto;margin:0 auto;object-fit:contain}
.lead{color:#444;font-size:1rem;line-height:1.8;margin:.8rem 0 .6rem}.key-visual{display:block;width:100%;height:40svh;object-fit:contain}
.anniversary{display:inline-block;font-family:'M PLUS 1','Arial Black',sans-serif;font-weight:900;font-size:clamp(1.8rem,6.5vw,2.5rem);line-height:1.5;color:#a17b18}
@supports(background-clip:text){.anniversary{background:radial-gradient(circle,#cdcd50,#cbc348,#c9b941,#c7b03b,#c4a635,#c1a134,#bd9b32,#ba9631,#b69433,#b29134,#ae8f36,#aa8c37);background-size:200% 200%;background-clip:text;-webkit-background-clip:text;color:transparent;filter:saturate(2);animation:gold 7s infinite}}
@keyframes gold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.app-footer{display:grid;gap:1rem;background:#1b1c21;color:#999;padding:2rem 1rem;text-align:center}.social-links{display:flex;align-items:center;justify-content:center;gap:2rem;list-style:none;padding:0;margin:0}
.social-links a{display:flex;align-items:center;justify-content:center;color:#999;min-width:44px;min-height:44px;text-decoration:none}.social-links svg{height:32px;width:36px}.social-links a:hover{color:#eee}.social-links .pr{font-size:.875rem}a:focus-visible{outline:2px solid #7dcfff;outline-offset:4px;border-radius:3px}.copyright{font-size:.875rem;line-height:1.8}
@media(min-width:768px){.key-visual{height:45svh}.social-links{gap:3rem}.copyright{font-size:1rem}}
@media(min-width:1200px){.lead{font-size:1.4rem}.lead br{display:none}}
@media(prefers-reduced-motion:reduce){.anniversary{animation:none}}

.language-switch{position:absolute;right:clamp(1rem,3vw,3rem);top:1rem;display:inline-flex;border:1px solid #334956;border-radius:9px;background:#11232e;overflow:hidden;z-index:1}
.language-switch a{display:grid;place-items:center;min-height:44px;min-width:44px;padding:8px;color:#a9becb;font:700 14px Arial,sans-serif;text-decoration:none}
.language-switch a[aria-current="page"]{color:#edc777;background:#edc77718;box-shadow:inset 0 -2px #edc777}
.language-switch a:hover{background:#ffffff12}.first-view{padding-top:5rem}
.arena-link{margin:1.5rem auto 0;width:min(440px,90%)}.arena-link a{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:60px;padding:1rem 1.5rem;border:3px solid transparent;border-radius:.75rem;background-image:linear-gradient(white,white),linear-gradient(to right bottom,#00f7ff,#ff00ff);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 0 2px #00000020;color:#444;font-size:1.25rem;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s}
.arena-link a:hover{transform:translateY(-2px);box-shadow:0 4px 16px #25495e25}
.spin-offs{width:100%;background:#20232c;color:#f4f5f9;padding:clamp(2rem,4vw,4rem) clamp(1rem,3vw,3rem) 2rem}
.spin-header{margin-bottom:1.75rem}
.spin-header h2{font-size:clamp(1.35rem,2.2vw,2rem);margin:0 0 .5rem;font-weight:600}
.spin-header p{font-size:1rem;color:#b4bac8;line-height:1.6}
.game-track{display:grid;grid-template-columns:minmax(0,1fr);column-gap:1.5rem;row-gap:2rem}
.game-card{min-width:0;display:flex;flex-direction:column;gap:.75rem;color:inherit;text-decoration:none;border-radius:12px}
.game-image{position:relative;aspect-ratio:16/9;background:#11141c;overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px #ffffff0a;transition:box-shadow .2s,transform .2s}
.game-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.game-card:hover .game-image{box-shadow:0 0 0 2px #adbdcf;transform:translateY(-2px)}
.game-card:focus-visible{outline:2px solid #7dcfff;outline-offset:6px;border-radius:12px}
.game-placeholder{position:absolute;inset:0;background:linear-gradient(135deg,#2d3654,#161a2b);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:1.25rem}
.game-placeholder strong{font-size:clamp(1.1rem,2vw,1.5rem);overflow-wrap:anywhere}
.game-placeholder span{font-size:.875rem;color:#b1b7c8}
.game-caption{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:0 .125rem}
.game-caption h3{font-size:1rem;line-height:1.5;overflow-wrap:anywhere;margin:0;font-weight:600}
.platforms{display:flex;flex-wrap:wrap;gap:.375rem}
.platforms span{display:inline-flex;align-items:center;border-radius:4px;padding:.125rem .5rem;background:#ffffff0a;color:#b8c1d1;font-size:.875rem;line-height:1.5}
.external-note{text-align:right;font-size:.875rem;color:#aeb4c1;margin:2rem 0 0}
@media(min-width:620px){.game-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.game-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1440px){.game-track{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){.spin-header p{font-size:.875rem}.lead{font-size:clamp(.85rem,3.7vw,1rem)}}
@media(prefers-reduced-motion:reduce){.game-image,.arena-link a{transition:none}}

.key-visual-wrap{position:relative}
.service-notice{position:absolute;z-index:1;top:.25rem;left:50%;transform:translateX(-50%);width:100%;max-width:1050px;padding:0 .5rem;color:#707070;font-size:.875rem;font-weight:400;line-height:1.7;text-align:center;text-wrap:pretty;text-shadow:0 1px 3px #fff,0 0 8px #fff,0 0 14px #fff}

/* Keep automatically hidden games out of the grid. */
.game-card[hidden], .spin-offs[hidden] { display: none; }

.language-switch .dictionary-link{border-left:1px solid #334956;color:#edc777}
.dictionary-link svg{width:22px;height:22px}