/* ??? secret zone page (template-skyland-secret.php), 1.0.6.9. Stefan's secret-locked / secret-open mockups. */
@font-face{font-family:"Press Start 2P";src:url("../fonts/PressStart2P-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"VT323";src:url("../fonts/VT323-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.sky-secret{
  --navy:#101a33;--navy2:#162040;--navy3:#1c2a4a;--lime:#d4ff3a;--cream:#f3ecd9;--muted:#8a93b0;--path:#3a4a72;
  --px:"Press Start 2P",ui-monospace,monospace;--vt:"VT323",ui-monospace,monospace;
  color:var(--cream);padding-bottom:48px;
  background:url("../img/skyland/stars-tile.png") repeat,radial-gradient(ellipse 900px 520px at 50% 34%,#1a2748 0%,transparent 70%),linear-gradient(180deg,#0c1428 0%,var(--navy) 40%,#0e1830 100%);
}
.sky-secret *,.sky-secret *::before,.sky-secret *::after{box-sizing:border-box}
.sky-secret p,.sky-secret h1,.sky-secret h2,.sky-secret h3{margin:0}
body.sig-theme .sky-secret h1,body.sig-theme .sky-secret h2,body.sig-theme .sky-secret h3{font-weight:400;letter-spacing:0;color:inherit}
.sz-wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}
body.sig-theme .sky-secret a.sz-crumb{display:inline-block;margin:28px 0 18px;font-family:var(--px);font-size:9px;line-height:1.4;color:var(--muted);text-decoration:none}
body.sig-theme .sky-secret a.sz-crumb:hover,body.sig-theme .sky-secret a.sz-crumb:focus-visible{color:var(--lime)}
.sky-secret .pix-icon{display:block;flex:none}
.sky-secret .pix-icon .o{fill:#0a1020}.sky-secret .pix-icon .c{fill:#f3ecd9}.sky-secret .pix-icon .d{fill:#c4b896}
.sky-secret .pix-icon .l{fill:#d4ff3a}.sky-secret .pix-icon .n{fill:#24365e}.sky-secret .pix-icon .m{fill:#8a93b0}

/* Locked stage */
.sz-stage{position:relative;display:grid;grid-template-columns:420px 1fr;align-items:center;gap:30px;min-height:520px;padding:40px 60px 40px 30px;
  border:3px dotted rgba(212,255,58,.5);background:repeating-linear-gradient(135deg,#0a1124 0 8px,#0c142b 8px 16px);box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.sz-door{position:relative;display:flex;align-items:center;justify-content:center;height:440px}
.sz-door::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(212,255,58,.18) 0%,rgba(212,255,58,0) 55%)}
.sz-door .pix-icon{position:relative;max-width:100%;height:auto;filter:drop-shadow(0 10px 0 rgba(0,0,0,.4))}
.sz-door .pix-icon .m{fill:#3a4a72}.sz-door .pix-icon .n{fill:#1c2a4a}.sz-door .pix-icon .o{fill:#0a1020}.sz-door .pix-icon .d{fill:#4a5a84}.sz-door .pix-icon .c{fill:#8a93b0}
.sz-kicker{font-family:var(--px);font-size:9px;line-height:1.4;color:var(--muted);letter-spacing:1px;margin-bottom:16px!important}
body.sig-theme .sky-secret .sz-title{font-family:var(--px);font-size:34px;line-height:1.4;color:var(--lime);letter-spacing:4px;text-shadow:0 0 18px rgba(212,255,58,.35);margin-bottom:16px}
.sz-line{font-family:var(--vt);font-size:26px;line-height:1.2;color:var(--cream);margin-bottom:24px!important}
.sz-label{display:block;font-family:var(--px);font-size:9px;line-height:1.4;color:var(--lime);margin:0 0 10px}
.sz-row{display:flex;gap:10px;max-width:560px;height:56px}
.sz-input{position:relative;flex:1;min-width:0;display:flex;align-items:center;background:#0a1020;border:3px solid var(--path);box-shadow:inset 0 0 0 2px #0a1020,inset 0 0 0 4px rgba(58,74,114,.5)}
.sz-input:focus-within{border-color:var(--lime)}
.sz-input .pix-icon{margin:0 8px 0 12px;width:44px;height:auto}
.sz-input .pix-icon .l{fill:var(--lime)}.sz-input .pix-icon .c{fill:var(--cream)}.sz-input .pix-icon .n{fill:#0a1020}
body.sig-theme #page .sky-secret .sz-input input[type=password],body.sig-theme .sky-secret .sz-input input[type=password]{flex:1;min-width:0;width:auto!important;height:100%!important;margin:0!important;padding:0 8px 0 0!important;background:transparent!important;border:0!important;border-radius:0!important;outline:none;box-shadow:none!important;color:var(--lime)!important;font:400 24px/1 var(--vt)!important;letter-spacing:6px}
.sz-input input::placeholder{color:#5f6a8c;letter-spacing:2px}
body.sig-theme #page .sky-secret button.sz-open,body.sig-theme .sky-secret button.sz-open{height:100%;margin:0;padding:0 26px!important;border:0!important;border-radius:0!important;cursor:pointer;background:var(--lime)!important;color:var(--navy)!important;font:400 12px/1 var(--px)!important;box-shadow:0 4px 0 #8aa61f}
body.sig-theme #page .sky-secret button.sz-open:hover,body.sig-theme #page .sky-secret button.sz-open:focus-visible{outline:2px solid var(--cream);background:var(--lime)!important;color:var(--navy)!important;border-color:transparent!important}
.sz-wrong{font-family:var(--vt);font-size:20px;line-height:1.25;color:#ffb3a6;margin-top:14px!important;max-width:560px}
.sz-small{font-family:var(--vt);font-size:20px;line-height:1.3;color:var(--muted);margin-top:22px!important;max-width:560px}
body.sig-theme .sky-secret .sz-small a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

/* Unlocked */
.sz-welcome{display:flex;align-items:center;gap:30px;padding:26px 36px;margin-bottom:32px;border:3px solid var(--lime);background:linear-gradient(180deg,#1b2a52,#152240);box-shadow:0 0 0 3px rgba(212,255,58,.2),0 0 40px rgba(212,255,58,.18)}
.sz-welcome .pix-icon{filter:drop-shadow(0 0 14px rgba(212,255,58,.45))}
.sz-welcome .pix-icon .m{fill:#3a4a72}.sz-welcome .pix-icon .n{fill:#24365e}.sz-welcome .pix-icon .d{fill:rgba(212,255,58,.35)}
body.sig-theme .sky-secret .sz-welcome h1{font-family:var(--px);font-size:24px;line-height:1.5;color:var(--lime);text-shadow:0 0 16px rgba(212,255,58,.35);margin-bottom:10px}
.sz-welcome p{font-family:var(--vt);font-size:24px;color:var(--cream)}
.sz-content .inv{border:3px solid var(--path);background:var(--navy2);margin:0 0 28px}
.sz-content .inv-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:#0d1630;border-bottom:3px solid var(--path)}
body.sig-theme .sz-content .inv-head h2{font-family:var(--px);font-size:12px;line-height:1.5;color:var(--lime);margin:0}
.sz-content .inv-head span{font-family:var(--vt);font-size:18px;color:var(--muted)}
.sz-content .items{display:grid;gap:18px;padding:20px}
.sz-content .items.stories{grid-template-columns:repeat(2,1fr)}
.sz-content .items.walls{grid-template-columns:1fr 2fr}
.sz-content .item{display:flex;flex-direction:column;gap:10px;padding:16px;background:#111a36;border:2px solid #2c3a62}
.sz-content .item:hover,.sz-content .item:focus-within{border-color:var(--lime)}
.sz-content .item.row{flex-direction:row;align-items:center;gap:16px}
.sz-content .slot{flex:none;width:84px;height:84px;background:#0b1328 url("../img/skyland/svg/scroll-fill.svg") center/56px 56px no-repeat;border:2px dashed #2c3a62}
body.sig-theme .sz-content .item h3{font-family:var(--sig-f,"Bricolage Grotesque",sans-serif);font-size:16px;font-weight:700;line-height:1.3;color:var(--cream);margin:0 0 4px}
.sz-content .item .meta{font-family:var(--vt);font-size:17px;line-height:1.2;color:var(--muted);margin:0 0 10px}
body.sig-theme .sz-content a.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--px);font-size:8px;line-height:1.2;padding:9px 12px;text-decoration:none;background:var(--lime);color:var(--navy);box-shadow:0 3px 0 #8aa61f}
body.sig-theme .sz-content a.btn.ghost{background:transparent;color:var(--lime);border:2px solid var(--lime);box-shadow:none}
body.sig-theme .sz-content a.btn:hover,body.sig-theme .sz-content a.btn:focus-visible{outline:2px solid var(--cream)}
body.sig-theme .sz-content a.btn.dl::before{content:"";width:11px;height:12px;background:url("../img/skyland/svg/arrow-fill.svg") center/contain no-repeat}
.sz-content .wp-frame{display:flex;align-items:center;justify-content:center;height:330px;background:#0b1328;border:2px dashed #2c3a62}
.sz-content .wp-frame img{display:block;border:3px solid var(--cream);box-shadow:5px 6px 0 rgba(0,0,0,.4);object-fit:cover;max-width:100%}
.sz-content .wp-frame img.phone{width:142px;height:307px}
.sz-content .wp-frame img.pc{width:480px;height:270px}
/* Full stories */
.sz-content .story{padding:4px 28px 28px;border-top:3px solid var(--path)}
body.sig-theme .sz-content .story h3{font-family:var(--px);font-size:14px;line-height:1.6;color:var(--lime);margin:24px 0 6px}
.sz-content .story .meta{font-family:var(--vt);font-size:18px;color:var(--muted);margin:0 0 16px}
body.sig-theme .sz-content .story .meta a{color:var(--lime)}
.sz-content .story p{font-family:var(--sig-f,"Bricolage Grotesque",sans-serif);font-size:17px;line-height:1.65;color:var(--cream);margin:0 0 1em;max-width:720px}
.sz-content .story .top{font-family:var(--px);font-size:8px;line-height:1.4}
body.sig-theme .sz-content .story .top a{color:var(--muted);text-decoration:none}

@media (max-width:899px){
  .sz-wrap{width:calc(100% - 32px)}
  .sz-stage{grid-template-columns:1fr;min-height:0;padding:24px 18px 28px;gap:12px;text-align:center}
  .sz-door{height:auto}
  .sz-door .pix-icon{width:144px;height:200px}
  body.sig-theme .sky-secret .sz-title{font-size:24px}
  .sz-line{font-size:20px}
  .sz-row{height:52px;margin:0 auto}
  .sz-form,.sz-wrong,.sz-small{margin-left:auto;margin-right:auto}
  .sz-small,.sz-wrong{font-size:18px}
  .sz-welcome{flex-direction:column;text-align:center;gap:14px;padding:20px 16px}
  body.sig-theme .sky-secret .sz-welcome h1{font-size:15px}
  .sz-welcome p{font-size:20px}
  .sz-content .items.stories,.sz-content .items.walls{grid-template-columns:1fr}
  .sz-content .story{padding:4px 16px 20px}
  .sz-content .wp-frame{height:auto;padding:16px}
  .sz-content .wp-frame img.pc{width:100%;height:auto;aspect-ratio:16/9}
}
@media (max-width:420px){
  .sz-row{flex-direction:column;height:auto}
  .sky-secret .sz-input{flex:0 0 52px;height:52px}
  body.sig-theme #page .sky-secret button.sz-open{height:48px}
  .sz-input .pix-icon{width:36px}
}
