/* ============================================================
   Huboxel GAME runtime — title screen, pause, game chrome
   (loads alongside editor.css to reuse the play-HUD + studio styles)
   ============================================================ */
:root{
  --g-blue:#8FB6DC; --g-green:#9FCBB1; --g-pink:#D6A9C2;
}
html,body{ margin:0; height:100%; overflow:hidden; background:#0d0f13; font-family:"Nunito",system-ui,sans-serif; }
#viewport{ position:fixed; inset:0; }
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* status stubs hidden */
.game-hidden{ position:absolute!important; width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px; }

/* ---------------- TITLE SCREEN ---------------- */
.title{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(143,182,220,.22), transparent 60%),
    linear-gradient(180deg, rgba(13,15,19,.30), rgba(13,15,19,.62));
  backdrop-filter:blur(2px);
  transition:opacity .4s; padding:24px;
}
.title.hide{ opacity:0; pointer-events:none; }
.title-card{
  width:min(820px,94vw); max-height:90vh; overflow-y:auto;
  background:rgba(22,24,30,.74); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10); border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.5); padding:30px 30px 26px;
  color:#ECEDF1;
}
.title-brand{ display:flex; align-items:center; gap:12px; margin-bottom:5px; }
.title-mark{ width:34px; height:34px; border-radius:9px;
  background:conic-gradient(from 210deg,var(--g-blue),var(--g-green),var(--g-pink),var(--g-blue));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); position:relative; }
.title-mark::after{ content:""; position:absolute; inset:8px; border-radius:4px; background:#16181e; opacity:.85;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.title-brand h1{ font-family:"Quicksand",sans-serif; font-weight:700; font-size:24px; margin:0; letter-spacing:.01em; }
.title-brand .wname{ font-size:12.5px; color:#9aa0ad; font-weight:700; margin-top:1px; }
.title-sub{ font-size:13px; color:#a7adba; margin:3px 0 20px; line-height:1.5; }

.title-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#7b8290; margin:0 0 10px; }
.char-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; }
.char{
  text-align:left; cursor:pointer; padding:15px 13px; border-radius:14px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  transition:transform .12s, border-color .14s, background .14s; color:#ECEDF1;
}
.char:hover{ transform:translateY(-3px); border-color:var(--g-blue); background:rgba(143,182,220,.10); }
.char.sel{ border-color:var(--g-blue); background:rgba(143,182,220,.16); box-shadow:0 0 0 1px var(--g-blue); }
.char-ic{ width:38px;height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:11px;
  background:rgba(255,255,255,.07); color:var(--g-blue); }
.char-ic svg{ width:21px;height:21px; }
.char h4{ margin:0 0 4px; font-size:14px; font-weight:800; }
.char p{ margin:0; font-size:11px; color:#9aa0ad; line-height:1.35; }

.title-actions{ display:flex; align-items:center; gap:13px; margin-top:24px; flex-wrap:wrap; }
.play-cta{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:linear-gradient(180deg,var(--g-blue),#7BA6D2); color:#10202e; font-weight:900; font-size:15px;
  padding:14px 30px; border:none; border-radius:13px; box-shadow:0 8px 24px rgba(143,182,220,.34);
  transition:transform .1s, filter .12s;
}
.play-cta:hover{ filter:brightness(1.06); } .play-cta:active{ transform:translateY(1px); }
.play-cta svg{ width:17px;height:17px; }
.title-hint{ font-size:11.5px; color:#7b8290; }
.title-hint kbd{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); border-radius:5px; padding:1px 6px; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:#c6cbd6; }
.title-drop{ margin-top:14px; font-size:11px; color:#6b7280; display:flex; align-items:center; gap:7px; }
.title-drop svg{ width:14px;height:14px; }
.title.dragover .title-card{ border-color:var(--g-green); box-shadow:0 0 0 2px var(--g-green); }

/* ---------------- PAUSE OVERLAY ---------------- */
.pause{ position:fixed; inset:0; z-index:60; display:none; place-items:center;
  background:rgba(13,15,19,.6); backdrop-filter:blur(8px); }
.pause.show{ display:grid; }
.pause-card{ width:min(360px,90vw); background:rgba(22,24,30,.92); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:24px; text-align:center; color:#ECEDF1; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.pause-card h3{ font-family:"Quicksand",sans-serif; margin:0 0 4px; font-size:20px; }
.pause-card p{ margin:0 0 18px; color:#9aa0ad; font-size:12.5px; }
.pause-btns{ display:flex; flex-direction:column; gap:9px; }
.pbtn{ padding:12px; border-radius:11px; font-weight:800; font-size:13.5px; cursor:pointer; border:none; transition:filter .12s,background .12s; }
.pbtn.primary{ background:var(--g-blue); color:#10202e; }
.pbtn.ghost{ background:rgba(255,255,255,.07); color:#ECEDF1; border:1px solid rgba(255,255,255,.1); }
.pbtn:hover{ filter:brightness(1.08); }

/* ---------------- TOP-RIGHT game controls during play ---------------- */
.game-bar{ position:fixed; top:14px; right:14px; z-index:45; display:flex; gap:8px; }
.gbtn{ display:flex; align-items:center; gap:7px; cursor:pointer;
  background:rgba(22,24,30,.7); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1);
  color:#d6dae2; font-weight:700; font-size:12px; padding:8px 13px; border-radius:10px; }
.gbtn:hover{ color:#fff; } .gbtn svg{ width:13px;height:13px; }

/* boot loader */
.gloader{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:#0d0f13; transition:opacity .5s; }
.gloader.hide{ opacity:0; pointer-events:none; visibility:hidden; }
.gloader .ring{ width:46px;height:46px; border-radius:12px; animation:gspin 1.3s linear infinite;
  background:conic-gradient(from 0deg,var(--g-blue),var(--g-green),var(--g-pink),var(--g-blue)); position:relative; }
.gloader .ring::after{ content:""; position:absolute; inset:5px; border-radius:7px; background:#0d0f13; }
.gloader p{ position:absolute; bottom:38%; color:#7b8290; font-weight:700; font-size:12px; font-family:"Quicksand",sans-serif; }
@keyframes gspin{ to{ transform:rotate(360deg); } }

/* hide editor-only chrome that may sneak in */
.vp-toolbar,.vp-gizmo,.vp-readout,.vp-nav,.minimap{ display:none!important; }