/* =========================================================
   UI CONTROL PANEL (desktop/tablet)
   ========================================================= */
:root{
  --ui-nudge-x: 0px;
  --ui-nudge-y: 0px;

  --ui-perspective: 1200px;
  --ui-tilt-x: 0deg;
  --ui-tilt-y: 0deg;
  --ui-skew-x: 0deg;
  --ui-skew-y: 0deg;
  --ui-scale: 1.15;

  --ui-radius: 10px;
  --ui-shadow: 0 18px 40px rgba(0,0,0,.45);

  --bg:#0f1115;
  --panel:rgba(12,14,18,.94);
  --panel2:rgba(18,22,30,.95);
  --border:rgba(255,255,255,.10);
  --text:#c9d1d9;
  --white:#fff;
  --accent:#79c0ff;

  --mono:Consolas,"Cascadia Code","Segoe UI",monospace;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
}

.stage{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:var(--bg);
}

/* Background image: show all on desktop/tablet */
.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  object-position:center;
  background: var(--bg);
}

/* =========================================================
   PINNED WRAPPER (desktop/tablet)
   ========================================================= */
.screen-wrap{
  position:absolute;
  transform: translate(var(--ui-nudge-x), var(--ui-nudge-y));
  perspective: var(--ui-perspective);
  perspective-origin: 20% 20%;
  z-index: 3;
}

/* UI box */
.screen-ui{
  width:100%;
  height:100%;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--ui-radius);
  overflow:hidden;
  box-shadow: var(--ui-shadow);

  transform-origin: top left;
  transform:
    rotateX(var(--ui-tilt-x))
    rotateY(var(--ui-tilt-y))
    skewX(var(--ui-skew-x))
    skewY(var(--ui-skew-y))
    scale(var(--ui-scale));
}

/* Title bar */
.titlebar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background: var(--panel2);
  border-bottom:1px solid var(--border);
  font-size:13px;
  color: rgba(255,255,255,.88);
}

.dot{ width:10px; height:10px; border-radius:50%; }
.red{ background:#ff5f57; }
.yellow{ background:#febc2e; }
.green{ background:#28c840; }

.title{
  margin-left:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menu-btn{
  display:none; /* shown on mobile */
  margin-left:6px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font-family:var(--mono);
}

/* Layout */
.layout{
  display:grid;
  grid-template-columns: 220px 1fr;
  height: calc(100% - 38px);
  min-height:0;
}

/* Explorer */
.explorer{
  background:#0d1117;
  border-right:1px solid var(--border);
  padding:10px;
  overflow:auto;
  min-height:0;
}

.explorer-title{
  font-size:12px;
  opacity:.7;
  margin-bottom:8px;
}

.node{
  width:100%;
  background:none;
  border:1px solid transparent;
  text-align:left;
  padding:8px 10px;
  border-radius:6px;
  color:var(--text);
  cursor:pointer;
  user-select:none;
  font-family:var(--mono);
}
.node:hover{ background:rgba(255,255,255,.06); }
.node.active{
  background:rgba(121,192,255,.18);
  border-color:rgba(121,192,255,.22);
  color:var(--white);
}

.root{
  font-weight:700;
  color:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  gap:8px;
}
.caret{ width:14px; display:inline-block; text-align:center; }

.tree{ margin-top:6px; }

/* Editor */
.editor{
  padding:14px 16px;
  overflow:auto;
  min-height:0;
}

.breadcrumb{
  font-size:12px;
  opacity:.75;
  margin-bottom:10px;
}

.content{
  font-size:14px;
  line-height:1.55;
}
.content h1{ color:#fff; margin:0 0 10px; font-size:20px; }
.content h2{ color:#fff; margin:14px 0 8px; font-size:15px; }
.content p{ margin:0 0 10px; }
.content ul{ margin:0 0 10px 18px; }

/* Backdrop (mobile drawer) */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index: 9998;
}

/* =========================================================
   MOBILE MODE (<= 900px)
   - UI becomes full-screen app
   - Explorer becomes slide-in drawer
   - Background switches to cover for a cleaner phone look
   ========================================================= */
@media (max-width: 900px){
  .bg{
    object-fit: cover;          /* looks better on tall phones */
    object-position:center;
  }

  .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Screen wrap becomes full-screen, JS pinning will be ignored */
  .screen-wrap{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none;
    perspective: none;
    z-index: 9999;
  }

  .screen-ui{
    border-radius: 0;
    transform: none; /* no tilt on mobile */
    box-shadow: none;
  }

  /* Stack editor only (explorer hidden by default, becomes drawer) */
  .layout{
    grid-template-columns: 1fr;
  }

  .explorer{
    position: fixed;
    top: 38px;
    left: 0;
    width: 78vw;
    max-width: 320px;
    height: calc(100vh - 38px);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 9999;
    border-right:1px solid rgba(255,255,255,.12);
  }

  .explorer.open{
    transform: translateX(0);
  }

  .editor{
    padding: 14px;
  }

  .content{
    font-size: 15px;
  }
}
/* =========================================
   Desk Fade Overlay (Post-it Polish)
   ========================================= */
.stage::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 150px; /* tuned for current image */

  background: linear-gradient(
    to top,
    rgba(15, 17, 21, 0.96),
    rgba(15, 17, 21, 0.65),
    rgba(15, 17, 21, 0.0)
  );

  pointer-events: none;
  z-index: 2;
}