/* home.css — homepage gate + tutorial passport */

#home{
  position:fixed; inset:0; z-index:40;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(20px, 4vh, 40px);
  padding:24px;
  pointer-events:none;
}
body.home #home{ display:flex; }
body.home #nav,
body.home #stage-write,
body.home #rot,
body.home #shape,
body.home #read-actions,
body.home #read-guide,
body.home #plain-stage,
body.home #ctrls{ display:none !important; }

#home-logo{ display:block; width:auto; height:clamp(96px, 18vw, 148px); }

#home-enter{
  pointer-events:auto;
  appearance:none; cursor:pointer;
  font:700 12px/1 'Space Mono', monospace;
  letter-spacing:0.14em; text-transform:lowercase;
  color:#000; background:transparent;
  border:1.5px solid #000; border-radius:0;
  padding:14px 22px;
  transition:background .15s, color .15s, opacity .4s;
  opacity:0; animation:home-cta-in .6s ease .9s forwards;
}
#home-enter:hover{ background:#000; color:#fff; }
#home-enter:focus-visible{ outline:2px solid #000; outline-offset:3px; }

.home-link{
  pointer-events:auto;
  appearance:none; cursor:pointer;
  font:400 10px/1 'Space Mono', monospace;
  letter-spacing:0.1em; text-transform:lowercase;
  color:rgba(0,0,0,0.45); background:transparent; border:none;
  padding:4px 8px;
  opacity:0; animation:home-cta-in .6s ease 1.1s forwards;
}
.home-link:hover{ color:#000; text-decoration:underline; }
a.home-link{ text-decoration:none; }
.home-links{
  pointer-events:auto;
  display:flex; flex-wrap:wrap; gap:8px 18px;
  justify-content:center; align-items:center;
}
.home-links .home-link{ opacity:0; animation:home-cta-in .6s ease 1.1s forwards; }

.gate-foot{
  font:400 10px/1.5 Helvetica,Arial,sans-serif;
  color:rgba(0,0,0,0.4); margin:16px 0 0;
  letter-spacing:0.04em;
}

@keyframes home-cta-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ── gate modal ─────────────────────────────────────────── */
#pp-gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:auto;
}
#pp-gate[hidden]{ display:none !important; }

.gate-card{
  position:relative;
  width:min(440px, 100%);
  max-height:min(88vh, 640px);
  overflow:auto;
  background:#fff;
  border:1.5px solid #000;
  padding:22px 20px 18px;
  scrollbar-width:thin;
}

.gate-x{
  position:absolute; top:8px; right:10px;
  appearance:none; border:none; background:transparent;
  font:400 22px/1 Helvetica,Arial,sans-serif;
  color:rgba(0,0,0,0.35); cursor:pointer; padding:4px 8px;
}
.gate-x:hover{ color:#000; }

.gate-msg{
  font:400 10px/1.4 'Space Mono', monospace;
  letter-spacing:0.06em; text-transform:lowercase;
  color:rgba(0,0,0,0.5); min-height:0; margin:0 0 8px;
}
.gate-msg.warn{ color:#000; }
.gate-msg:empty{ display:none; }

#pp-gate h3{
  font:700 14px/1.2 'Space Mono', monospace;
  letter-spacing:0.12em; text-transform:lowercase;
  margin:0 0 12px; color:#000;
}
#pp-gate h4{
  font:700 10px/1.2 'Space Mono', monospace;
  letter-spacing:0.1em; text-transform:lowercase;
  margin:0 0 6px; color:#000;
}

.gate-body{
  font:400 12px/1.55 Helvetica,Arial,sans-serif;
  color:rgba(0,0,0,0.72); margin:0 0 12px;
}
.gate-body strong{ color:#000; font-weight:600; }
.gate-strong{
  font:700 12px/1.45 'Space Mono', monospace;
  letter-spacing:0.04em; color:#000;
  margin:14px 0 0; padding-top:12px;
  border-top:1px solid rgba(0,0,0,0.12);
}

.gate-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-bottom:8px;
}
.gate-cols > div{
  border:1px solid rgba(0,0,0,0.14);
  padding:12px 10px;
}
.gate-cols p{
  font:400 11px/1.5 Helvetica,Arial,sans-serif;
  color:rgba(0,0,0,0.65); margin:0;
}
@media (max-width:480px){
  .gate-cols{ grid-template-columns:1fr; }
}

.gate-flow{
  margin:0 0 16px; padding-left:18px;
  font:400 12px/1.7 Helvetica,Arial,sans-serif;
  color:rgba(0,0,0,0.72);
}
.gate-flow li{ margin-bottom:2px; }

.gate-acts{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.gate-acts button, .gate-nav button, #pp-gate .p-btns button{
  flex:1; min-width:110px;
  appearance:none; cursor:pointer;
  font:400 11px/1 'Space Mono', monospace;
  letter-spacing:0.08em; text-transform:lowercase;
  border:1px solid rgba(0,0,0,0.2);
  background:#fff; color:rgba(0,0,0,0.7);
  padding:10px 12px;
}
.gate-acts button:hover, .gate-nav button:hover, #pp-gate .p-btns button:hover{
  background:#000; color:#fff; border-color:#000;
}
.gate-ghost{
  flex:1 1 100% !important;
  border:none !important; background:transparent !important;
  color:rgba(0,0,0,0.45) !important;
  text-decoration:underline; padding:6px !important;
}
.gate-ghost:hover{ color:#000 !important; background:transparent !important; }

.gate-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:18px; padding-top:12px;
  border-top:1px solid rgba(0,0,0,0.1);
}
.gate-nav button{ flex:0 0 auto; min-width:72px; }
.gate-dots{ display:flex; gap:5px; justify-content:center; flex:1; }
.gate-dot{
  width:6px; height:6px; border-radius:0;
  background:rgba(0,0,0,0.15);
}
.gate-dot.on{ background:#000; }

#pp-gate .p-row{ margin-bottom:8px; }
#pp-gate input[type=text],
#pp-gate input[type=password]{
  width:100%; box-sizing:border-box;
  font:400 12px/1.4 Helvetica,Arial,sans-serif;
  border:1px solid rgba(0,0,0,0.18); border-radius:0;
  padding:10px 9px; color:rgba(0,0,0,0.8); background:#fafafa; outline:none;
}
#pp-gate .p-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }