/* ===== TRILANE — game stage styles (contained, not fullscreen) ===== */

.game-shell{ display:flex; flex-direction:column; align-items:center; }
.game-sub{ font-size:1.05rem; letter-spacing:.04em; color:var(--muted); text-align:center; margin-bottom:18px; }

/* the play area — fixed aspect, centered */
#stage{
  position:relative;
  width:100%;
  max-width:440px;
  aspect-ratio:9 / 16;
  margin:0 auto;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, #15183a 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, #1a0a24 0%, transparent 50%),
    var(--bg);
  box-shadow:0 0 60px rgba(0,240,255,.12), inset 0 0 100px rgba(0,0,0,.6);
  user-select:none;
}
#stage canvas{ display:block; touch-action:none; }

.overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(10,12,30,.82), rgba(5,6,15,.96));
  backdrop-filter:blur(3px); z-index:10; padding:20px;
  transition:opacity .35s ease;
}
.hidden{ opacity:0; pointer-events:none; }

#stage h1{
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(2.2rem,9vw,3.2rem); letter-spacing:.1em; line-height:.95;
  color:var(--player);
  text-shadow:0 0 18px var(--player-glow), 0 0 40px rgba(0,240,255,.5);
  margin-bottom:.15em;
}
#stage h1 .b{ color:var(--danger); text-shadow:0 0 18px var(--danger), 0 0 40px rgba(255,45,111,.5); }
.tag{ font-size:clamp(.72rem,3vw,.95rem); letter-spacing:.4em; text-transform:uppercase;
      color:var(--muted); margin-bottom:1.8em; padding-left:.4em; }

.btn{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.1em;
  color:var(--bg); background:var(--player); border:none; cursor:pointer;
  padding:.9em 2.4em; border-radius:2px; text-transform:uppercase;
  box-shadow:0 0 24px rgba(0,240,255,.55); transition:transform .12s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 0 40px rgba(0,240,255,.85); }
.btn:active{ transform:translateY(0) scale(.98); }

.how{ margin-top:2em; font-size:.85rem; letter-spacing:.06em; color:var(--dim); line-height:1.8; }
.how b{ color:#9fb0e8; font-weight:600; }

.go-title{ font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(1.8rem,7vw,2.8rem);
           letter-spacing:.1em; color:var(--danger);
           text-shadow:0 0 18px var(--danger),0 0 44px rgba(255,45,111,.5); margin-bottom:.3em; }
.score-row{ display:flex; gap:1.8em; margin:1.2em 0 1.8em; }
.score-box .lab{ font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:#6b76a6; }
.score-box .val{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:2rem; color:var(--text);
                 text-shadow:0 0 16px rgba(232,240,255,.4); }
.score-box .val.best{ color:var(--coin); text-shadow:0 0 16px rgba(255,210,63,.6); }
.score-box .val.coins{ color:var(--coin); text-shadow:0 0 16px rgba(255,210,63,.6); }

/* HUD */
#hud{ position:absolute; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between;
      padding:16px 18px; pointer-events:none; }
.hud-item{ font-family:'Orbitron',sans-serif; }
.hud-lab{ font-size:.6rem; letter-spacing:.3em; color:var(--dim); text-transform:uppercase; }
.hud-val{ font-size:1.5rem; font-weight:700; color:var(--text); line-height:1; margin-top:2px;
          text-shadow:0 0 14px rgba(232,240,255,.35); }
.hud-val.coins{ color:var(--coin); text-shadow:0 0 14px rgba(255,210,63,.5); }
#hud.hidden{ opacity:0; }

/* in-stage ad slot at game over */
.ad-slot{ margin-top:1.8em; width:min(300px,90%); height:50px; border:1px dashed #2a3157;
          border-radius:4px; display:flex; align-items:center; justify-content:center;
          color:#3c4470; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; }

/* share */
.share-wrap{ margin-top:1.6em; display:flex; flex-direction:column; align-items:center; position:relative; }
.share-lab{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); margin-bottom:.9em; }
.share-row{ display:flex; gap:.6em; align-items:center; }
.share-btn{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  height:42px; min-width:42px; padding:0 .85em;
  background:rgba(255,255,255,.05); border:1px solid #2a3157; border-radius:6px;
  color:#9fb0e8; cursor:pointer; font-family:'Orbitron',sans-serif; font-size:.78rem;
  letter-spacing:.06em; transition:transform .12s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.share-btn:hover{ transform:translateY(-2px); }
.share-btn:active{ transform:translateY(0); }
.share-btn.native{ background:var(--player); color:var(--bg); border-color:var(--player);
                   box-shadow:0 0 18px rgba(0,240,255,.4); }
.share-btn.native:hover{ box-shadow:0 0 28px rgba(0,240,255,.7); }
.share-btn.x:hover{ color:#fff; border-color:#fff; }
.share-btn.fb:hover{ color:#4267ff; border-color:#4267ff; }
.share-btn.copy:hover{ color:var(--coin); border-color:var(--coin); }
.share-toast{
  position:absolute; bottom:-2.2em; font-size:.74rem; letter-spacing:.1em; color:var(--coin);
  opacity:0; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.share-toast.show{ opacity:1; transform:translateY(0); }