/* The Playfellow glass site: layout for pages, built on tokens.css and components.css (the app's own files, copied by the asset script).
   Logical properties only, so Arabic (dir="rtl") mirrors itself. Motion respects prefers-reduced-motion. */
body.site{overflow:auto;height:auto;min-height:100vh}
body.site::before{position:fixed}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px));padding-block:var(--s-5)}
.small{font-size:13px}.faint{color:var(--ink-3)}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:100;background:var(--lime);color:#05061c;padding:.6em 1em;border-radius:10px;font-weight:600}.skip:focus{top:8px}
a{color:var(--cyan)}a:hover{color:#fff}
.bar{position:sticky;top:12px;z-index:50;margin:12px max(12px,env(safe-area-inset-left,0px)) 0;border-radius:var(--r-l)}
.bar-in{display:flex;align-items:center;gap:var(--s-4);padding:10px var(--s-5);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 21px var(--font-display);color:var(--ink);text-decoration:none}
.brand img{border-radius:10px;box-shadow:var(--glow-violet)}
.links{display:flex;gap:var(--s-2);flex:1;flex-wrap:wrap}
.links a{color:var(--ink-2);text-decoration:none;padding:6px 12px;border-radius:var(--r-pill);font-weight:500;transition:background var(--t-fast),color var(--t-fast)}
.links a:hover,.links a[aria-current]{background:rgba(255,255,255,.09);color:#fff}
.links a[aria-current]{box-shadow:inset 0 0 0 1px rgba(67,227,255,.4)}
.seg-link{border:1px solid var(--glass-line);border-radius:var(--r-pill);padding:6px 14px;text-decoration:none;color:var(--ink)}
.adults{white-space:nowrap}
main{position:relative}
.hero2{padding-top:var(--s-6)}
.hero2 .hero{min-height:420px}
.hero .copy h1{font-size:clamp(34px,5vw,60px)}
.pagehead{padding-top:var(--s-7)}.pagehead h1{margin-bottom:var(--s-3)}.lead{font-size:1.15em;max-width:46em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4)}
.card-s{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-5)}.card-s h3{margin:0}
.no{font:700 13px var(--font-display);color:var(--cyan);letter-spacing:.08em}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-5);align-items:stretch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media(max-width:860px){.split,.two{grid-template-columns:1fr}}
.shot{min-height:300px;border-radius:var(--r-l);background-size:cover;background-position:center;border:1px solid var(--glass-line);box-shadow:var(--glow-violet)}
.shot.tall{min-height:420px}
.cast{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4)}
.cast figure,.strip figure{margin:0;overflow:hidden;display:grid}
.cast img,.strip img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4)}
.strip img{aspect-ratio:16/10}
figcaption{padding:var(--s-3) var(--s-4);font:600 16px var(--font-display)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-6);flex-wrap:wrap}
.steps2{display:grid;gap:var(--s-4)}
.step2{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:var(--s-5);align-items:center;overflow:hidden;padding:0}
.step2>div:last-child{padding:var(--s-5)}
.step2 img{width:100%;height:100%;object-fit:cover;display:block;min-height:180px}
@media(max-width:700px){.step2{grid-template-columns:1fr}}
.gamegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-4)}
.game{padding:var(--s-4);display:grid;gap:var(--s-2);align-content:start}.game img{width:100%;height:auto;border-radius:14px;border:1px solid var(--glass-line)}.game h3{margin:var(--s-2) 0 0}
.toggle{margin-bottom:var(--s-5)}.toggle button small{opacity:.8;margin-inline-start:6px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4);align-items:stretch}
.plan{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);position:relative}.plan .buy{margin-top:auto}.plan ul{flex:1}
.plan.pop{box-shadow:var(--glow-cyan),0 18px 50px rgba(0,0,0,.45)}.pophead{position:absolute;top:-14px;inset-inline-start:var(--s-6)}
.plan h3{font-size:28px;margin:0}
.price{margin:0;font-variant-numeric:tabular-nums}.price b{font:700 44px var(--font-display);background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.plan ul{margin:0;padding-inline-start:1.2em;color:var(--ink-2)}.plan li{margin-block:.35em}
.notes{color:var(--ink-2);margin-top:var(--s-5)}#sandbox{margin-top:var(--s-4)}
.qa{padding:var(--s-4) var(--s-5);margin-block:var(--s-3)}.qa summary{cursor:pointer;font-weight:600}.qa p{margin:var(--s-3) 0 0}
.prose{max-width:820px}.prose h2{margin-top:var(--s-6)}.prose h2:first-child{margin-top:0}.prose li{margin-block:.4em;color:var(--ink-2)}.prose p{color:var(--ink-2)}
.contact{display:grid;gap:var(--s-3)}.contact img{width:100%;height:auto;border-radius:14px}.mono{font-family:ui-monospace,Consolas,monospace;direction:ltr;text-align:start}
ul.inline{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);padding:0;list-style:none}
.status{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:center;padding-top:var(--s-7)}
@media(max-width:860px){.status{grid-template-columns:1fr}}
.foot{margin-top:var(--s-7);border-top:1px solid var(--glass-line);background:rgba(4,6,26,.6);backdrop-filter:blur(14px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-5)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h3{font:700 14px var(--font-display);letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.foot a:not(.brand){display:block;color:var(--ink-2);text-decoration:none;margin-block:6px}.foot a:hover{color:#fff}
img{max-width:100%}
@media (prefers-reduced-motion:no-preference){.glass.card-s,.glass.plan,.glass.game{transition:transform var(--t-med) var(--ease),box-shadow var(--t-med)}.glass.card-s:hover,.glass.plan:hover,.glass.game:hover{transform:translateY(-4px)}}