/* Nope Games / Pipjam — games.studionope.com
   Look: Sunrise Valley (games/pipjam-ios/docs/direction/v2/DIRECTION-V2.md §7).
   Fonts are self-hosted OFL files (assets/fonts/OFL.txt). Nothing loads from a third party. */

@font-face{font-family:"Baloo 2";src:url("/assets/fonts/Baloo2-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/assets/fonts/Nunito-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/assets/fonts/Nunito-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* sky, noon */
  --sky-top:#3FB4E6; --sky-mid:#8FDCEB; --sky-low:#FFE8C2;
  /* hills, noon */
  --hill-far:#A8DCD8; --hill-mid:#6CC4AE; --hill-near:#3FA388; --hill-fore:#23715F; --hill-deep:#14483E;
  /* sandstone arcade */
  --stone:#FBE6CF; --stone-shade:#E9B99C; --stone-side:#D79A82; --cornice:#FF7B5C; --cornice-lip:#D9573D; --niche:#2E8D88; --niche-deep:#1F6F6B;
  /* sand path */
  --sand:#FFF1D2; --sand-low:#F8E2B6;
  /* ui */
  --gold:#FFC93C; --gold-lip:#D99A14; --cream:#FFF7EA; --ink:#0F4643; --ink-soft:#2F5F5B; --lip:#0F5E66;
  /* dusk & night */
  --dusk-top:#26285E; --dusk-mid:#8A4E8C; --dusk-low:#FF8A66; --night-top:#08122E; --night-mid:#16244E; --night-low:#2C3E72;
  --lantern:#FFC56A; --moon-text:#FFE3C8;
  /* jellies */
  --j-tangerine:#FF8A4C; --j-sun:#FFC93C; --j-rose:#F2638F; --j-violet:#7E6CF2; --j-blue:#3D7BF0;

  --display:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --text:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,40px);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--sand);color:var(--ink);font:700 1.0625rem/1.6 var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{width:min(100% - 2*var(--gutter), var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:14px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:0 0 0 6px var(--ink);border-radius:12px}

/* A placeholder that must be filled before publishing. Deliberately loud. */
.ph{background:#FFE36E;color:#5A3A00;border:1.5px dashed #B07A00;border-radius:6px;padding:0 .3em;font-weight:800;white-space:nowrap}

/* Game title treatment: white Baloo with a teal lip, as in "Sorted!" and "Level 35" */
.lipped{color:#fff;text-shadow:0 .055em 0 var(--lip),0 .11em .18em rgba(15,70,67,.28)}
.lipped--night{text-shadow:0 .055em 0 rgba(10,16,48,.75),0 .11em .2em rgba(10,16,48,.45)}

/* ---------- header ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:20;padding-block:14px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.35rem/1 var(--display);color:#fff;text-shadow:0 2px 0 var(--lip)}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.top nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.top nav a{display:block;white-space:nowrap;padding:8px 14px;border-radius:999px;font-weight:800;font-size:.98rem;text-decoration:none;color:var(--ink);background:rgba(255,247,234,.0);transition:background-color .2s}
.top nav a:hover{background:rgba(255,247,234,.65)}
@media (max-width:560px){.top nav .hide-sm{display:none}.top nav a{padding:8px 10px;font-size:.94rem}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 26px;border-radius:999px;font:800 1.08rem/1.1 var(--text);text-decoration:none;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .12s ease}
.btn--cream{background:var(--cream);color:var(--ink);box-shadow:0 5px 0 #C9B48E,0 10px 18px -8px rgba(15,70,67,.5)}
.btn--cream:hover{transform:translateY(-1px)}
.btn--cream:active{transform:translateY(4px);box-shadow:0 1px 0 #C9B48E}

/* "Coming soon" store slot. Not Apple's badge (see README: swap on launch day). */
.store-soon{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:10px 24px 10px 14px;border-radius:999px;background:var(--gold);color:#4A2E00;box-shadow:0 6px 0 var(--gold-lip),0 14px 22px -10px rgba(120,70,0,.55);font:800 1rem/1.15 var(--text)}
.store-soon .dot{flex:none;width:34px;height:34px;border-radius:50%;background:#fff6d6;display:grid;place-items:center;box-shadow:inset 0 -3px 0 #F2D27A}
.store-soon .dot svg{width:18px;height:18px}
.store-soon b{display:block;font-size:1.18rem;font-family:var(--display);line-height:1}
.store-soon small{display:block;font-size:.82rem;font-weight:800;opacity:.78}

/* ---------- jellies (CSS-drawn, after the game's Sortling) ---------- */
.jelly{--c:var(--j-tangerine);--s:64px;display:block;flex:none;position:relative;width:var(--s);height:calc(var(--s)*.86);border-radius:46% 46% 40% 40%/52% 52% 44% 44%;
  background:
    radial-gradient(ellipse 26% 16% at 31% 22%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 60% 40% at 38% 26%,rgba(255,255,255,.35),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,color-mix(in oklab,var(--c),#fff 20%) 0%,var(--c) 52%,color-mix(in oklab,var(--c),#000 16%) 100%);
  box-shadow:inset 0 calc(var(--s)*-.07) 0 color-mix(in oklab,var(--c),#000 20%),inset 0 calc(var(--s)*.03) 0 rgba(255,255,255,.4)}
.jelly::before{content:"";position:absolute;left:10%;right:10%;top:52%;height:16%;
  background:radial-gradient(circle at 12% 50%,rgba(255,110,120,.55),transparent 60%) left/30% 100% no-repeat,radial-gradient(circle at 88% 50%,rgba(255,110,120,.55),transparent 60%) right/30% 100% no-repeat}
.jelly::after{content:"";position:absolute;left:50%;top:60%;width:22%;height:12%;transform:translateX(-50%);background:#5B2A14;border-radius:0 0 999px 999px}
.jelly i{position:absolute;top:30%;width:22%;height:28%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 18%,transparent 20%),radial-gradient(circle at 62% 66%,rgba(255,255,255,.6) 0 8%,transparent 10%),#1C1530;box-shadow:0 0 0 calc(var(--s)*.045) #fff}
.jelly i:first-child{left:22%}
.jelly i:last-child{right:22%}
.jelly--happy i{height:22%;top:34%;background:none;box-shadow:none;border:calc(var(--s)*.05) solid transparent;border-top-color:#1C1530;border-radius:50%}
.jelly--happy::after{height:16%;width:28%}
.jelly--sleepy{--c:#C9D7D4}
.jelly--sleepy i{height:4%;top:42%;background:#3A4A48;box-shadow:none;border-radius:999px}
.jelly--sleepy::after{width:10%;height:6%;border-radius:999px;background:#6E807D}
.shadow-blob{position:absolute;left:8%;right:8%;bottom:-8px;height:12px;border-radius:50%;background:rgba(15,70,67,.28);filter:blur(3px)}

/* ---------- phone ---------- */
.phone{position:relative;width:var(--pw,300px);aspect-ratio:886/1920;border-radius:calc(var(--pw,300px)*.15);padding:calc(var(--pw,300px)*.032);
  background:linear-gradient(145deg,#2D6B67,#0E3533 55%,#0A2725);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 30px 50px -22px rgba(8,40,40,.65),0 8px 0 -2px #0A2725}
.phone > video,.phone > img,.phone picture,.phone picture img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--pw,300px)*.12);background:#9FD8E6}
.phone--shot{aspect-ratio:1320/2868}

/* ---------- valley hills (SVG) ---------- */
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;pointer-events:none}
.hills .far{fill:var(--hill-far)} .hills .mid{fill:var(--hill-mid)} .hills .near{fill:var(--hill-near)} .hills .fore{fill:var(--hill-fore)}

/* ---------- simple pages (root, 404) ---------- */
.scene{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:110px var(--gutter) 200px;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-low) 100%)}
.scene--night{background:linear-gradient(180deg,var(--night-top),var(--night-mid) 55%,var(--night-low));
  --hill-far:#3E4E7E;--hill-mid:#2E4A6C;--hill-near:#1F3E58;--hill-fore:#12283E}
.sun{position:absolute;top:12%;right:12%;width:clamp(90px,14vw,170px);aspect-ratio:1;border-radius:50%;background:#FFF6D8;box-shadow:0 0 0 18px rgba(255,227,160,.35),0 0 90px 40px rgba(255,227,160,.55)}
.moon{position:absolute;top:14%;right:14%;width:clamp(60px,9vw,110px);aspect-ratio:1;border-radius:50%;background:#F3F1E6;box-shadow:0 0 70px 20px rgba(159,180,255,.35)}
.cloud{position:absolute;width:var(--w,150px);height:calc(var(--w,150px)*.34);border-radius:999px;background:#fff;box-shadow:inset 0 -6px 0 #D6F1F4}
.cloud::before,.cloud::after{content:"";position:absolute;bottom:40%;border-radius:50%;background:#fff}
.cloud::before{left:18%;width:38%;aspect-ratio:1}
.cloud::after{left:44%;width:30%;aspect-ratio:1;bottom:46%}
.stars{position:absolute;inset:0 0 40% 0;background-image:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff 98%,transparent),radial-gradient(1px 1px at 22% 42%,#fff 98%,transparent),radial-gradient(2px 2px at 35% 12%,#fff 98%,transparent),
  radial-gradient(1px 1px at 48% 30%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 61% 8%,#fff 98%,transparent),radial-gradient(1px 1px at 70% 46%,#fff 98%,transparent),
  radial-gradient(2px 2px at 82% 26%,#fff 98%,transparent),radial-gradient(1px 1px at 92% 52%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 6% 58%,#fff 98%,transparent),
  radial-gradient(1px 1px at 56% 58%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 40% 66%,#fff 98%,transparent);opacity:.85}
.card-plain{position:relative;z-index:2;max-width:560px;text-align:center;display:grid;justify-items:center;gap:18px}
.card-plain h1{font-size:clamp(3rem,9vw,5.5rem)}
.card-plain p{font-size:1.15rem;max-width:42ch}
.scene--night .card-plain p{color:var(--moon-text)}
.game-tile{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;text-align:left;text-decoration:none;background:var(--cream);color:var(--ink);padding:16px 34px 16px 16px;border-radius:62px;
  box-shadow:0 7px 0 #C9B48E,0 22px 30px -16px rgba(15,70,67,.6);transition:transform .15s ease}
.game-tile:hover{transform:translateY(-3px)}
.game-tile img{width:92px;height:92px;border-radius:50%;object-fit:cover} /* circle concentric with the tile's 62px end: 16px padding all round */
.game-tile b{display:block;font:800 2rem/1 var(--display)}
.game-tile span{display:block;font-weight:800;color:var(--ink-soft);font-size:.98rem;margin-top:4px}
.game-tile{min-height:124px}
.game-tile em{white-space:nowrap;display:inline-block;margin-top:8px;font-style:normal;font-size:.85rem;font-weight:800;background:var(--gold);color:#4A2E00;padding:3px 12px;border-radius:999px}
.mini-foot{position:absolute;z-index:3;left:0;right:0;bottom:12px;text-shadow:0 1px 3px rgba(5,40,35,.7);text-align:center;color:#E8F6F0;font-weight:700;font-size:.92rem;padding-inline:var(--gutter)}
.mini-foot a{color:#fff}

/* ---------- legal pages (privacy, support) ---------- */
.legal-hero{position:relative;overflow:hidden;padding:110px 0 clamp(90px,12vw,150px);background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 60%,var(--sky-low))}
.legal-hero h1{font-size:clamp(2.4rem,6vw,4rem);max-width:16ch;position:relative;z-index:2}
.legal-hero .meta{position:relative;z-index:2;margin-top:12px;font-weight:800;color:var(--ink)}
.legal-body{background:var(--hill-fore);padding:0 0 64px}
.legal-card{background:var(--cream);border-radius:28px;max-width:780px;margin:0 auto;padding:clamp(22px,5vw,52px);box-shadow:0 8px 0 #C9B48E,0 30px 50px -30px rgba(0,0,0,.5);position:relative;top:-40px}
.legal-card > p:first-child,.legal-card > .meta + p{font-size:1.1rem}
.legal-card h2{font-size:clamp(1.45rem,3vw,1.8rem);margin:40px 0 10px;color:var(--ink)}
.legal-card p,.legal-card li{line-height:1.65;max-width:68ch}
.legal-card p + p{margin-top:14px}
.legal-card ul{padding-left:22px;margin:12px 0}
.legal-card li{margin:8px 0}
.legal-card li::marker{color:var(--cornice)}
.legal-card a{color:#0B6E69;text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-card strong{font-weight:800}
.legal-card .legal-foot{margin-top:40px;padding-top:18px;border-top:2px dashed var(--stone-shade);color:var(--ink-soft);font-size:.95rem}
.legal-card .meta{color:var(--ink-soft)}

/* ---------- site footer ---------- */
.foot{background:var(--night-top);color:#DCE4F5;padding:44px 0 40px;font-size:.98rem}
.foot .wrap{display:grid;gap:22px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.foot-brand{display:flex;align-items:center;gap:12px;font-weight:800;color:#fff}
.foot-brand img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.foot ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.foot a{color:#fff;text-decoration-thickness:2px;text-underline-offset:4px}
.foot small{display:block;color:#AEB9D6;font-size:.88rem;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* narrow phones: keep the tile one pill high so the round icon stays concentric with its 62px end */
@media (max-width:480px){.game-tile .xs-hide{display:none}.game-tile{gap:14px;padding-right:26px}.game-tile b{font-size:1.75rem}}
/* the text stack stays shorter than the 92px icon, so the tile is always exactly 124px high (16px all round) */
.game-tile > span{line-height:1.15}
.game-tile b{font-size:1.8rem;line-height:1}
.game-tile span span{font-size:.92rem;line-height:1.2;margin-top:4px}
.game-tile em{margin-top:7px;line-height:1.25;padding:3px 12px}
.game-tile{width:max-content;max-width:100%}
.game-tile span span{white-space:nowrap}
@media (max-width:360px){.game-tile{border-radius:54px;min-height:108px;gap:12px;padding-right:20px}.game-tile img{width:76px;height:76px}.game-tile b{font-size:1.55rem}.game-tile span span{font-size:.82rem}}
.game-tile .xs-hide{display:inline;margin:0;font-size:inherit;color:inherit;white-space:inherit}
@media (max-width:480px){.game-tile .xs-hide{display:none}}
@media (max-width:360px){.game-tile em{margin-top:5px;font-size:.8rem;padding:2px 10px}.game-tile span span{margin-top:3px}}