/* The play shell: loader, PLAY gate, lose panel, payload.
   Everything here sits above the game iframe and is driven by shell.js. */

.body-stage{background:#04050a}
.body-stage main{min-height:calc(100vh - 62px)}

.stage{
  max-width:1400px;margin:0 auto;
  padding:1rem clamp(.6rem,3vw,2rem) 2rem;
  display:flex;flex-direction:column;gap:.75rem;
}
.stage-head{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.stage-back{
  font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--ink-mute);
  padding:.45rem .7rem;border-radius:8px;border:1px solid var(--line);transition:.16s;
}
.stage-back:hover{color:var(--ink);border-color:var(--accent)}
.stage-title{text-align:center;display:flex;flex-direction:column;gap:.1rem;line-height:1.2}
.stage-studio{font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--ink-mute);text-transform:uppercase}
.stage-title b{font-size:15px;letter-spacing:.02em}
.stage-tools{display:flex;gap:.35rem}
.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  border-radius:8px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-dim);font-size:14px;transition:.16s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--accent)}
.icon-btn.off{opacity:.4}
.stage-note{
  text-align:center;font:500 11.5px/1 var(--mono);letter-spacing:.06em;
  color:var(--ink-mute);margin:0;
}

/* The frame owns the aspect ratio so the overlays can be absolutely placed
   against a box that exists before the game loads. */
.stage-frame{
  position:relative;width:100%;aspect-ratio:16/10;
  max-height:calc(100vh - 190px);
  border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(124,92,255,.10), transparent 60%),
    #05060c;
  border:1px solid var(--line);
  box-shadow:0 30px 90px -40px color-mix(in srgb,var(--accent) 70%,transparent),
             inset 0 0 0 1px rgba(255,255,255,.02);
}
.stage-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stage-frame:fullscreen,.stage-frame:-webkit-full-screen{
  aspect-ratio:auto;max-height:none;height:100%;width:100%;border-radius:0;border:0;
}

/* ------------------------------------------------------------- overlays  */
.ov{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:clamp(1rem,4vw,2.5rem);text-align:center;
  background:rgba(4,5,10,.94);
  backdrop-filter:blur(3px);
  transition:opacity .4s ease;
}
.ov[hidden]{display:none}
.ov.fade-out{opacity:0;pointer-events:none}

/* --- loader ------------------------------------------------------------ */
.load-title{
  font:700 11.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);margin:0;
}
.load-name{
  font-size:clamp(1.6rem,5.5vw,2.9rem);font-weight:850;letter-spacing:-.03em;margin:.2rem 0 1.4rem;
}
.bar{
  width:min(560px,86%);height:9px;border-radius:999px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line);position:relative;
}
.bar-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--hot));
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 80%,transparent);
  transition:width .18s linear;
}
/* Barber-pole shimmer travelling over the filled part. */
.bar-fill::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.16) 0 10px,transparent 10px 22px);
  animation:barber 1s linear infinite;
}
@keyframes barber{to{background-position:44px 0}}

.load-nums{
  display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  font:600 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink-dim);
}
.load-nums b{color:var(--ink)}
.load-pct{font:800 clamp(2rem,7vw,3.4rem)/1 var(--mono);letter-spacing:-.02em;color:var(--ink)}
.load-log{
  width:min(560px,86%);height:104px;overflow:hidden;text-align:left;
  border-radius:10px;border:1px solid var(--line-soft);background:#04050a;
  padding:.6rem .8rem;font:500 11.5px/1.75 var(--mono);color:var(--ink-mute);
}
.load-log div{opacity:0;animation:logline .35s forwards}
.load-log .ok{color:var(--ok)}
@keyframes logline{to{opacity:1}}

/* --- play gate --------------------------------------------------------- */
.gate-ready{
  font:700 11.5px/1 var(--mono);letter-spacing:.24em;color:var(--ok);
  text-transform:uppercase;
}
.btn-play{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 2.6rem;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--hot),var(--accent));color:#fff;
  font:800 17px/1 var(--sans);letter-spacing:.14em;
  box-shadow:0 18px 46px -18px color-mix(in srgb,var(--accent) 95%,transparent);
  animation:breathe 2.6s ease-in-out infinite;transition:transform .16s;
}
.btn-play:hover{transform:translateY(-2px) scale(1.02)}
.btn-play:active{transform:translateY(0) scale(.99)}
@keyframes breathe{50%{box-shadow:0 22px 60px -18px color-mix(in srgb,var(--hot) 95%,transparent)}}
.gate-controls{
  display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;
  font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-mute);
}
.key{
  padding:.3rem .5rem;border-radius:6px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-dim);
}

/* --- lose panel -------------------------------------------------------- */
.ov-lose{background:rgba(4,5,10,.82)}
.lose-card{
  max-width:520px;padding:2rem 1.8rem;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(22,10,18,.97),rgba(8,6,14,.97));
  border:1px solid rgba(255,45,149,.35);
  box-shadow:0 30px 80px -30px rgba(255,45,149,.6);
  animation:rise .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}}
.lose-glyph{font-size:2.2rem;line-height:1;margin-bottom:.6rem}
.lose-head{
  font:800 clamp(1.5rem,5vw,2.2rem)/1.1 var(--sans);letter-spacing:-.02em;
  color:#fff;margin:0 0 .6rem;
}
.lose-body{color:var(--ink-dim);font-size:14.5px;margin-bottom:1.3rem}
.lose-stats{
  display:flex;gap:1.6rem;justify-content:center;margin-bottom:1.5rem;
  padding:.9rem 0;border-block:1px solid rgba(255,255,255,.08);
}
.lose-stats div{display:flex;flex-direction:column;gap:.15rem}
.lose-stats b{font:800 1.35rem/1 var(--mono);color:#fff}
.lose-stats span{font:600 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink-mute);text-transform:uppercase}
.btn-continue{
  width:100%;padding:1rem;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--hot),var(--accent));color:#fff;
  font:800 15px/1 var(--sans);letter-spacing:.16em;
  box-shadow:0 16px 40px -16px rgba(255,45,149,.9);transition:transform .16s;
}
.btn-continue:hover{transform:translateY(-2px);filter:brightness(1.08)}
.lose-sub{
  margin:.9rem 0 0;font:500 11.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--ink-mute);
}
.lose-sub a{color:var(--ink-dim);text-decoration:underline}
.countdown{color:var(--hot)}

/* --- the payload ------------------------------------------------------- */
/* Fixed, not absolute: it must cover the whole document, and it is the element
   we hand to requestFullscreen(). */
#payload{
  position:fixed;inset:0;z-index:99999;background:#000;
  display:flex;align-items:center;justify-content:center;
}
#payload[hidden]{display:none}
#payload iframe{width:100%;height:100%;border:0}
.payload-hint{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:100000;padding:.4rem .8rem;border-radius:8px;
  background:rgba(0,0,0,.6);color:rgba(255,255,255,.55);
  font:600 11px/1 var(--mono);letter-spacing:.1em;
  animation:fadehint 1s 5s forwards;
}
@keyframes fadehint{to{opacity:0}}

@media (max-width:640px){
  .stage-frame{aspect-ratio:4/3;max-height:calc(100vh - 210px)}
  .stage-title b{font-size:13px}
}

/* --- countdown badge on CONTINUE / RESTART ----------------------------- */
.btn-continue{display:flex;align-items:center;justify-content:center;gap:.7rem}
.btn-continue .cd{
  min-width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(0,0,0,.32);font:800 16px/1 var(--mono);
}
.btn-continue .cd.tick{animation:cdpop .4s ease-out}
@keyframes cdpop{from{transform:scale(1.5);background:rgba(255,255,255,.35)}}

/* --- the fake crash ---------------------------------------------------- */
/* Styled as an OS error window, not as part of the game: the joke only lands
   if it reads as the build failing rather than as a defeat screen. */
.ov-crash{background:rgba(2,3,7,.93)}
.crash-box{
  width:min(620px,94%);border-radius:10px;overflow:hidden;text-align:left;
  background:#11131c;border:1px solid #2a2f45;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  animation:rise .35s cubic-bezier(.2,.9,.3,1) both;
}
.crash-bar{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;
  background:#1b1f2e;border-bottom:1px solid #2a2f45;
  font:600 12px/1 var(--mono);color:var(--ink-dim);
}
.crash-dot{
  width:10px;height:10px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 10px var(--danger);flex:none;
}
.crash-body{padding:1.1rem}
.crash-msg{
  font:700 13.5px/1.5 var(--mono);color:#ff8b96;margin:0 0 .8rem;
  word-break:break-word;
}
.crash-trace{
  margin:0 0 .9rem;padding:.75rem .85rem;border-radius:8px;overflow-x:auto;
  background:#05060c;border:1px solid #222741;
  font:500 11.5px/1.7 var(--mono);color:#8b90ad;white-space:pre;
}
.crash-note{margin:0;font-size:12px;color:var(--ink-mute)}
.crash-actions{padding:0 1.1rem 1.1rem}
.btn-restart{
  background:linear-gradient(135deg,#ff4d5e,#ffb020);
  box-shadow:0 16px 40px -16px rgba(255,77,94,.9);
}
.crash-actions .lose-sub{text-align:center}

/* --- stage icons -------------------------------------------------------- */
.icon-btn svg{
  width:17px;height:17px;display:block;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.icon-btn .spk{fill:currentColor;stroke:none}
.icon-btn .slash{opacity:0;transition:opacity .15s}
.icon-btn.off .slash{opacity:1}
.icon-btn.off .wave,.icon-btn.off .wave2{opacity:.2}

/* --- leaderboard placing on the ending ---------------------------------- */
.rank-row{
  margin:0 0 .8rem;padding:.55rem .8rem;border-radius:9px;
  background:rgba(255,210,60,.10);border:1px solid rgba(255,210,60,.32);
  font:600 13px/1.4 var(--mono);color:#ffd23b;text-align:center;
}
.rank-row b{font-size:17px}
.initials{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin:0 0 1rem;
}
.initials label{
  font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
}
.initials input{
  width:92px;padding:.45rem .4rem;text-align:center;
  border-radius:8px;border:1px solid var(--line);background:var(--bg);
  color:#ffd23b;font:800 20px/1 var(--mono);letter-spacing:.24em;
  text-transform:uppercase;
}
.initials input:focus{
  outline:none;border-color:#ffd23b;
  box-shadow:0 0 0 3px rgba(255,210,60,.22);
}
.ini-done{font:700 12px/1 var(--mono);letter-spacing:.1em;color:var(--ok)}

/* --- phones -------------------------------------------------------------- */
/* A coarse pointer means the on-screen pad is showing inside the frame, so the
   picture needs the height and the surrounding chrome does not. */
@media (pointer: coarse) {
  .stage{padding-top:.4rem;gap:.4rem}
  .stage-frame{aspect-ratio:auto;height:calc(100vh - 150px);max-height:none}
  .stage-note{display:none}
  .btn-play{padding:1.1rem 2.2rem}
}
@media (pointer: coarse) and (orientation: portrait) {
  /* Every game renders 960x600; portrait wastes most of it. */
  .stage-frame::after{
    content:"↻ turn your phone sideways";
    position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
    z-index:6;padding:.4rem .8rem;border-radius:8px;
    background:rgba(6,7,13,.82);border:1px solid var(--line);
    font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink-dim);
    pointer-events:none;
  }
}