/* "How to play" pop-up (js/guide.js) */
.howlink{margin-top:4px; background:none; border:1px solid var(--line); color:var(--text); border-radius:999px; padding:10px 20px; font:700 16px var(--body); cursor:pointer; display:inline-flex; gap:8px; align-items:center}
.howlink:hover{border-color:var(--glow); color:var(--glow)}
body.gd-open{overflow:hidden}
.gd-overlay{position:fixed; inset:0; z-index:90; background:rgba(8,5,14,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:clamp(8px,3vw,32px); opacity:0; transition:opacity .2s}
.gd-overlay.in{opacity:1}
.gd-panel{width:min(1040px,100%); height:min(92vh,100%); background:var(--ground-2); border:1px solid var(--line); border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.55); display:flex; flex-direction:column; overflow:hidden; transform:translateY(16px) scale(.98); transition:transform .25s}
.gd-overlay.in .gd-panel{transform:none}
.gd-head{flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 24px 8px}
.gd-head h2{font-family:var(--script); font-weight:400; font-size:clamp(36px,4vw,50px); line-height:1; margin:2px 0 0; color:var(--glow)}
.gd-x{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:26px; line-height:1; cursor:pointer}
.gd-x:hover{border-color:var(--glow)}
.gd-nav{flex:none; display:flex; gap:8px; padding:4px 24px 14px; overflow-x:auto; border-bottom:1px solid var(--line)}
.gd-nav button{flex:none; background:var(--surface); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:7px 14px; font:700 14px var(--body); cursor:pointer}
.gd-nav button:hover{border-color:var(--glow)}
.gd-body{overflow-y:auto; overscroll-behavior:contain; padding:20px 24px 28px; display:grid; gap:18px; scroll-behavior:smooth}
.gd-intro{font-size:19px; margin:0; color:var(--text)}
.gd-need{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.gd-need div{background:var(--surface); border-radius:16px; padding:12px 14px; display:grid; gap:2px}
.gd-need span{color:var(--muted); font-size:14px}
.gd-part{display:flex; align-items:baseline; gap:12px; margin-top:14px; padding-bottom:6px; border-bottom:2px solid var(--line)}
.gd-part span{font:700 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--red)}
.gd-part h3{margin:0; font-size:26px}
.gd-step{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:22px; align-items:center; background:var(--ground); border:1px solid var(--line); border-radius:20px; padding:18px}
.gd-shead{display:flex; gap:12px; align-items:center; margin-bottom:8px}
.gd-num{flex:none; width:38px; height:38px; border-radius:50%; background:var(--vinyl); color:#fff; display:grid; place-items:center; font-weight:800; font-size:18px}
.gd-shead h4{margin:0; font-size:20px; line-height:1.15}
.gd-who{display:inline-block; margin-top:4px; font:700 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:6px; background:rgba(255,231,163,.14); color:var(--glow)}
.gd-who.tv{background:rgba(155,93,229,.18); color:#d7c2ff}.gd-who.all{background:rgba(47,191,113,.16); color:#8ff0b8}.gd-who.everyone{background:rgba(239,62,92,.16); color:#ffb3c0}
.gd-stext p{margin:0 0 8px; color:#e3dbef; font-size:16px}
.gd-tip{background:var(--surface); border-left:3px solid #F2C94C; border-radius:8px; padding:8px 10px; font-size:14px!important}
.gd-pics{display:flex; gap:14px; justify-content:center; align-items:flex-start; flex-wrap:wrap}
.gd-fig{margin:0; display:grid; gap:6px; justify-items:center}
.gd-fig figcaption{font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center}
.gd-tvfig{flex:1 1 360px; max-width:640px; width:100%}
.gd-phfig{flex:0 0 auto; width:clamp(120px,15vw,168px)}
.gd-tv,.gd-ph{position:relative; width:100%; overflow:hidden; background:var(--ground); pointer-events:none; user-select:none}
.gd-tv{aspect-ratio:16/9; border:6px solid #0b0812; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px var(--line)}
.gd-ph{aspect-ratio:390/760; border:5px solid #0b0812; border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px var(--line)}
.gd-sc{position:absolute; top:0; left:0; transform-origin:0 0; background:radial-gradient(1200px 600px at 50% -10%, #2a1025 0%, var(--ground) 60%); overflow:hidden}
.gd-sc .wrap{max-width:none; padding-block:14px 20px}
.gd-sc .phoneapp{padding-block:10px}
.gd-sc input{pointer-events:none}
.gd-ways{display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:10px; width:100%}
.gd-way{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; gap:2px}
.gd-way span{font-size:26px}.gd-way small{color:var(--muted); font-size:13px}
.gd-cats{display:grid; gap:7px; margin-top:6px}
.gd-cat{display:flex; gap:10px; align-items:center}
.gd-cat i{flex:none; width:26px; height:26px; border-radius:7px}
.gd-cat b{display:block; font-size:15px}.gd-cat span{color:var(--muted); font-size:13px}
.gd-tips{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.gd-tips div{background:var(--ground); border:1px solid var(--line); border-radius:16px; padding:14px}
.gd-tips h5{margin:0 0 4px; font-size:16px}.gd-tips p{margin:0; color:var(--muted); font-size:14px}
.gd-cheat{background:var(--surface); border-radius:16px; padding:14px 16px}
.gd-cheat span{font:700 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--glow)}
.gd-cheat p{margin:4px 0 0; font-weight:700}
.gd-foot{display:flex; justify-content:center; padding-top:6px}
@media (max-width:760px){
  .gd-step{grid-template-columns:1fr; padding:14px}
  .gd-head,.gd-nav,.gd-body{padding-inline:14px}
  .gd-panel{height:100%; border-radius:18px}
}
@media (prefers-reduced-motion:reduce){.gd-overlay,.gd-panel{transition:none}.gd-sc .vinyl{animation:none}}