body{margin:0;font-family:sans-serif;background:url('../img/bg.png') no-repeat center/cover;color:#fff;overflow-x:hidden;overflow-y:auto}
.game-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;max-width:500px;margin:0 auto;padding:30px 16px}
.game-card{background:rgba(0,0,0,0.6);border-radius:8px;overflow:hidden;text-align:center;transition:transform .2s}
.game-card:hover{transform:translateY(-4px)}
.game-card a{color:#fff;text-decoration:none;display:block;padding:16px 8px}
.game-thumb{width:100%;max-width:120px;height:auto;margin:0 auto 8px}
@media(max-width:400px){.site-header h1{font-size:1.8rem}.game-list{gap:12px;padding:20px 8px}.game-card a{padding:12px 4px;font-size:1rem}}
body.auth-page{overflow:auto!important;display:flex;justify-content:center;align-items:center;padding:20px;background:url('../img/bg.png') no-repeat center/cover;min-height:100vh;box-sizing:border-box}
.auth-page .login-form,.auth-page .register-form{width:100%;max-width:360px;background:rgba(0,0,0,0.6);padding:24px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.4);color:#fff}
.auth-page .login-form input,.auth-page .register-form input{width:100%;padding:12px;margin-bottom:16px;border:1px solid #fff;border-radius:6px;background:rgba(255,255,255,0.2);color:#fff;font-size:1rem;box-sizing:border-box}
.auth-page .login-form input::placeholder,.auth-page .register-form input::placeholder{color:rgba(255,255,255,0.7)}
.auth-page .login-form button,.auth-page .register-form button{width:100%;padding:14px;background:#ff8fa3;border:none;border-radius:6px;color:#fff;font-size:1.1rem;font-weight:bold;cursor:pointer;box-shadow:0 4px 0 #e04868;transition:transform .1s,box-shadow .1s}
.auth-page .login-form button:active,.auth-page .register-form button:active{transform:translateY(2px);box-shadow:0 2px 0 #e04868}
@media(max-width:360px){.auth-page .login-form,.auth-page .register-form{padding:16px}.auth-page .login-form button,.auth-page .register-form button{padding:12px;font-size:1rem}}
.site-footer{background:#111;color:#aaa;font-size:.9rem;padding:16px 0;text-align:center}
.site-footer .footer-list{list-style:none;display:inline-flex;gap:12px;margin:8px 0 0;padding:0}
.site-footer .footer-list li a{color:#aaa;text-decoration:none}
.site-footer .footer-list li a:hover{color:#fff}
.container{max-width:960px;margin:0 auto;padding:0 16px}
.site-header{background:#222;color:#fff;display:flex;justify-content:center;padding:4px 0}
.site-header .container{display:flex;justify-content:space-between;align-items:center;max-width:960px;width:100%;padding:0 20px}
.header-left,.header-center,.header-right{display:flex;align-items:center;gap:12px}
.site-logo{height:64px;width:auto;filter:drop-shadow(0 0 6px rgba(0,153,255,0.5))}
.guest-info{display:flex;align-items:center;gap:8px;font-size:.95rem}
#guest-form{display:flex;gap:6px}
.nav-list{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.nav-item a{padding:6px 12px;background:rgba(255,255,255,0.1);border-radius:4px;text-decoration:none;color:#fff;font-weight:bold}
.nav-item a:hover{background:rgba(255,255,255,0.3)}
@media(max-width:360px){.nav-item a{padding:4px 8px;font-size:.8rem}}
#guest-edit-btn{background:linear-gradient(45deg,#00e5ff,#0066ff);border:none;border-radius:4px;padding:6px 12px;color:#fff;font-weight:bold;box-shadow:0 0 8px rgba(0,229,255,0.7),0 0 16px rgba(0,102,255,0.5);cursor:pointer;transition:transform .1s,box-shadow .2s;position:relative;overflow:hidden}
#guest-edit-btn::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(255,255,255,0.3),transparent 60%);transform:translateX(-100%) translateY(-100%);transition:transform .4s ease}
#guest-edit-btn:hover{transform:translateY(-2px);box-shadow:0 0 12px rgba(0,229,255,0.9),0 0 24px rgba(0,102,255,0.7)}
#guest-edit-btn:hover::before{transform:translateX(0) translateY(0)}
.btn-start{display:inline-block;background:linear-gradient(45deg,#ff0066,#ffcc00);color:#fff;font-weight:bold;font-size:1.1rem;padding:10px 20px;border:none;border-radius:4px;text-decoration:none;text-align:center;box-shadow:0 0 8px rgba(255,0,102,0.7),0 0 16px rgba(255,204,0,0.6);position:relative;overflow:hidden;transition:transform .1s,box-shadow .2s}
.btn-start::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(255,255,255,0.4),transparent 70%);transform:translate(-100%,-100%);transition:transform .5s ease}
.btn-start:hover{transform:translateY(-2px);box-shadow:0 0 12px rgba(255,0,102,0.9),0 0 24px rgba(255,204,0,0.8)}
.btn-start:hover::before{transform:translate(0,0)}
.btn-start{display:block;width:fit-content;margin:30px auto 0}
.how-to-use,.btn-start{text-align:center}
.user-icon{width:32px;height:32px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px}
.site-header .nav-list li a{color:#fff;font-size:1.1rem;font-weight:bold;padding:.4rem .6rem;text-decoration:none}
.site-header .nav-list li a:hover{color:#ffd54f;text-decoration:none}
@media(max-width:600px){.site-footer .footer-list{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 0}.site-footer .footer-list li a{font-size:1.1rem;padding:.6rem 0;display:block}}
.site-logo{height:100px;width:auto}
@media(max-width:600px){.site-logo{height:85px}}

/* 画面全体を基本100%高にする */
html, body {
  height: 100%;
}

/* ヒーローセクションをビューポート全高に */
.hero-wrapper {
  min-height: 100vh;
  /* 必要なら余白を調整 */
  padding-top: 3rem;
  padding-bottom: 3rem;
}





.site-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
html, body {
  position: relative;
  min-height: 100%;
}

@media (max-width: 576px) {
  .site-footer {
    position: static;  /* または relative でもOK */
  }
}