:root{
    --gold:#e8c37a;
    --gold-dim:rgba(232,195,122,.55);
    --ink:rgba(6,8,20,.72);
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;background:#05060f}
  body{font-family:'Zen Kaku Gothic New',sans-serif;color:#e9e4d8}
  #gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

  .title{
    position:fixed;top:22px;left:22px;z-index:5;pointer-events:none;
  }
  .title img{
    display:block;width:clamp(190px,32vmin,320px);height:auto;
    /* dark logo on a night sky — lift it with a soft light halo */
    filter:drop-shadow(0 0 1px rgba(255,255,255,.85))
           drop-shadow(0 0 16px rgba(255,240,210,.5));
  }

  #soundBtn{
    position:fixed;top:20px;z-index:6;
    background:var(--ink);border:1px solid rgba(232,195,122,.35);color:var(--gold);
    height:42px;border-radius:999px;cursor:pointer;
    backdrop-filter:blur(6px);transition:border-color .2s;
    right:20px;width:42px;
    display:flex;align-items:center;justify-content:center;padding:0;
  }
  #soundBtn:hover{border-color:var(--gold)}
  #soundBtn .icon-off{display:none}
  #soundBtn.muted .icon-on{display:none}
  #soundBtn.muted .icon-off{display:block}

  .panel{
    position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
    z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;
    pointer-events:none;
  }
  .hint{font-size:11px;letter-spacing:.3em;color:rgba(233,228,216,.5)}
  .back-link{
    pointer-events:auto;font-size:12px;letter-spacing:.12em;
    color:rgba(233,228,216,.6);text-decoration:none;
    border-bottom:1px solid rgba(233,228,216,.3);padding-bottom:1px;
    transition:color .2s,border-color .2s;
    display:inline-flex;align-items:center;gap:4px;
  }
  .back-link .back-arrow{
    width:12px;height:12px;background:currentColor;
    -webkit-mask:url(../img/icon_back_arrow.svg) no-repeat center/contain;
    mask:url(../img/icon_back_arrow.svg) no-repeat center/contain;
  }
  .back-link:hover{color:var(--gold);border-color:var(--gold)}
  .footer{
    font-size:10px;letter-spacing:.06em;color:rgba(233,228,216,.45);
    text-align:center;padding:2px 12px 0;
  }
  .footer .sp-br{display:none}
  .btns{display:flex;gap:12px;pointer-events:auto;padding:0 12px;flex-wrap:wrap;justify-content:center}
  .btn{
    font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;color:#efe7d3;
    background:var(--ink);border:1px solid rgba(232,195,122,.4);
    border-radius:999px;padding:13px 26px;font-size:16px;letter-spacing:.24em;
    cursor:pointer;backdrop-filter:blur(8px);
    transition:transform .12s,border-color .2s,box-shadow .2s,opacity .3s;
    text-indent:.24em;
  }
  .btn:hover{border-color:var(--gold);box-shadow:0 0 22px rgba(232,195,122,.18)}
  .btn:active{transform:scale(.95)}
  .btn:disabled{opacity:.35;cursor:default;box-shadow:none}
  .btn.big{
    letter-spacing: 0.35em;
    border-color:var(--gold);color:var(--gold);font-size:17px;padding:14px 30px;
    box-shadow:0 0 26px rgba(232,195,122,.22), inset 0 0 14px rgba(232,195,122,.08);
  }
  .btn.big .btn-txt{
    display:block;width:180px;aspect-ratio:717/193;
    background:currentColor;
    -webkit-mask:url(../img/txt_button.svg) no-repeat center/contain;
    mask:url(../img/txt_button.svg) no-repeat center/contain;
  }

  @media (max-width:560px){
    .btn{padding:11px 16px;font-size:14px;letter-spacing:.14em;text-indent:.14em}
    .btn.big{padding:12px 18px;font-size:15px}
    .btn.big .btn-txt{width:150px}
    .footer .sp-br{display:inline}
    .btns{gap:8px}
    .title{top:14px;left:14px}
  }
  @media (prefers-reduced-motion:reduce){ #gl{transition:none!important} }