/* ============================================================
   Squad Reward — Figma-style Prototype Player
   A presentation shell around the existing prototype engine:
   a device frame on a canvas backdrop + director panel.
   ============================================================ */
:root{
  --bg:#15130f; --panel:#1b1813; --panel-2:#211d17; --line:#302a22;
  --ink:#f0e9d8; --muted:#9a8e79; --faint:#6f6553; --gold:#c9a45c; --gold-deep:#a5824b;
}
html,body.player{height:100%;}
body.player{
  margin:0; background:var(--bg);
  background-image:radial-gradient(#2a251d 1.15px, transparent 1.15px);
  background-size:26px 26px;
  font-family:'DM Sans',system-ui,sans-serif; color:var(--ink);
  display:grid; grid-template-columns:264px 1fr; overflow:hidden;
}

/* ---------- Director panel ---------- */
#director{
  height:100vh; overflow-y:auto; background:rgba(20,18,14,.86);
  border-right:1px solid var(--line); padding:18px 14px 40px; backdrop-filter:blur(6px);
}
#director .brand{display:flex;align-items:center;gap:10px;padding:4px 6px 16px;border-bottom:1px solid var(--line);margin-bottom:14px;}
#director .brand h1{font-family:'Playfair Display',serif;font-size:15px;font-weight:500;letter-spacing:.2px;}
#director .brand span{font-style:italic;color:var(--gold);}
#director .grp{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin:16px 6px 7px;font-weight:600;}
#director button.nav{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:8px;color:var(--ink);
  font-size:12px;padding:8px 10px;margin-bottom:2px;font-family:inherit;transition:background .12s,border-color .12s;
}
#director button.nav:hover{background:var(--panel-2);}
#director button.nav.active{background:var(--panel-2);border-color:var(--gold);color:var(--gold);}
#director button.nav .code{color:var(--faint);font-variant-numeric:tabular-nums;min-width:26px;}
#director button.nav.active .code{color:var(--gold);}
#director button.scn{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  font-size:12px;padding:9px 11px;margin-bottom:6px;font-family:inherit;transition:border-color .12s,transform .06s;
}
#director button.scn:hover{border-color:var(--gold);}
#director button.scn:active{transform:translateY(1px);}
#director button.scn .em{font-size:14px;}

/* ---------- Stage / viewport ---------- */
#viewport{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;position:relative;}
#pagename{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  background:rgba(27,24,19,.8);border:1px solid var(--line);border-radius:20px;padding:6px 16px;
  font-weight:600;min-height:29px;display:flex;align-items:center;
}

/* Device frame — the iframe IS the phone viewport, so all the engine's
   fixed-position loaders/modals/confetti stay contained inside it. */
#device{
  /* true iPhone proportion: 14px bezel + 392×852 screen ≈ iPhone 15 Pro (393×852).
     Sized by height; width follows the aspect ratio, so it never goes wide/squat. */
  position:relative;height:min(852px,92vh);aspect-ratio:393/852;width:auto;
  background:#0b0a08;border-radius:54px;padding:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.5),inset 0 0 0 2px #2a2620;
  flex-shrink:0;
}
#device .screen-inner{
  width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0f0e0b;
  display:flex;flex-direction:column;
}
#device iframe#screen{flex:1;width:100%;border:0;display:block;background:#0f0e0b;min-height:0;}

/* iOS status bar */
#statusbar{
  flex-shrink:0;height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:#0f0e0b;color:#F0E9D8;position:relative;z-index:5;
}
#statusbar .time{font-size:14.5px;font-weight:600;letter-spacing:.2px;font-variant-numeric:tabular-nums;}
#statusbar .island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:104px;height:24px;background:#000;border-radius:14px;}
#statusbar .sys{display:flex;align-items:center;gap:6px;}
#statusbar .sys svg{display:block;}

/* Safari-style bottom bar */
#browserbar{flex-shrink:0;background:#161310;border-top:1px solid #29241d;padding:9px 12px 11px;display:flex;flex-direction:column;gap:9px;}
#browserbar .urlbar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#26221c;border-radius:12px;padding:9px 12px;font-size:12.5px;color:#cfc4ad;
}
#browserbar .urlbar .host{color:#e7ddc8;letter-spacing:.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#browserbar .urlbar .host span{color:#9a8e79;}
#browserbar .urlbar .ic{flex-shrink:0;}
#browserbar .btabs{display:flex;align-items:center;justify-content:space-between;padding:0 12px;}
#browserbar .btabs svg{width:23px;height:23px;display:block;}

/* Controls */
#controls{display:flex;align-items:center;gap:10px;}
#controls button{
  cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-size:14px;width:44px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:border-color .12s,transform .06s;
}
#controls button:hover{border-color:var(--gold);}
#controls button:active{transform:translateY(1px);}
#controls .lbl{font-size:11px;color:var(--muted);padding:0 6px;}

@media (max-width:820px){ body.player{grid-template-columns:1fr;} #director{display:none;} }