/* Hideaway Realm Games studio site. Rules: studio-web/stilus/STILUS.md (Mia, WEBST1 = B, Szilárd TG 16339).
   System fonts, pixel headings on <canvas> (js/pixel.js), stepped corners, no rounded corners, no network. */
:root{
  --night:#0b0e22; --night2:#141a3a; --panel:#1a2148; --line:#2c3670;
  --teal:#3ee6c4; --teal-d:#1a9c86; --amber:#ffb84d;
  --pink:#ff5c8a; --text:#e9ecff; --muted:#a9b0dd;
  --px:4px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--night);color:var(--text);font:16px/1.6 "Ubuntu Sans","Ubuntu","Noto Sans",system-ui,sans-serif}
a{color:inherit}
a:hover{color:var(--teal)}
.mono{font-family:"Ubuntu Sans Mono","Ubuntu Mono",monospace;letter-spacing:.04em}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:#2a1600;padding:6px 12px;z-index:9}
.skip:focus{left:8px}
canvas.pxt{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* stepped "pixel" corners (STILUS.md 3) */
.step{clip-path:polygon(0 var(--px),var(--px) var(--px),var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)))}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(11,14,34,.92);border-bottom:var(--px) solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{font-size:14px}
.links{display:flex;gap:22px;margin-left:auto}
.links a{text-decoration:none;color:var(--muted);font-size:14px}
.links a:hover{color:var(--teal)}
.lang{display:flex;border:2px solid var(--line)}
.lang a,.lang span{padding:2px 8px;font-size:12px;text-decoration:none}
.lang .on{background:var(--teal);color:var(--night)}
.lang a{color:var(--muted)}
.lang a:hover{color:var(--teal)}

/* buttons (STILUS.md 4) */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;font-weight:700;text-decoration:none;border:0;font-size:16px;font-family:inherit;
  box-shadow:inset calc(-1*var(--px)) calc(-1*var(--px)) 0 rgba(0,0,0,.35),inset var(--px) var(--px) 0 rgba(255,255,255,.25);transition:transform .08s}
.btn:hover{transform:translate(0,-2px)}
.btn-amber{background:var(--amber);color:#2a1600}
.btn-amber:hover{color:#2a1600}
.btn-teal{background:var(--teal);color:#05221d}
.btn-teal:hover{color:#05221d}
.btn-ghost{background:var(--panel);color:var(--text)}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#070917 0%,#141a3a 70%,#1d1f4d 100%)}
#sky{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:150px}
.kicker{color:var(--teal);font-size:13px;margin:0 0 14px}
.intro-title{font-size:24px;line-height:1.3;margin:26px 0 0;color:var(--amber)}
.hero p.lead{font-size:18px;color:var(--text);max-width:34em;margin:10px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.frame{position:relative;background:var(--panel);padding:12px;--px:8px}
.frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.frame .tag{position:absolute;z-index:1;left:24px;top:24px;background:var(--amber);color:#2a1600;font-size:12px;padding:3px 10px;font-weight:700;--px:2px}
.frame .cap{display:flex;justify-content:space-between;align-items:center;padding:10px 4px 0;font-size:13px;color:var(--muted)}
#ground{position:absolute;left:0;right:0;bottom:0;width:100%;height:140px;image-rendering:pixelated}

/* sections */
section{padding:72px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.sec-head p{margin:0;color:var(--muted);max-width:30em}

/* game tiles (STILUS.md 5) */
.tiles{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
.tile{background:var(--panel);--px:8px;display:flex;flex-direction:column}
.tile .art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.tile .art img{width:100%;height:100%;object-fit:cover;display:block}
.tile .art .logo{position:absolute;left:4%;bottom:6%;width:44%;height:auto;object-fit:contain;filter:drop-shadow(0 4px 8px #000)}
.chip{display:inline-block;font-size:11px;padding:3px 8px;font-weight:700;--px:2px}
.chip.done{background:var(--teal);color:#05221d}
.chip.wip{background:var(--pink);color:#1a0610}
.tile .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.tile h3{margin:0;font-size:22px}
.tile p{margin:0;color:var(--muted)}
.tile p b{color:var(--text)}
.tile p.ai{font-size:13px}
.tile p.site a{color:var(--teal)}
.buy{display:flex;flex-wrap:wrap;gap:10px}
.why{font-size:13px;color:var(--muted);border-left:var(--px) solid var(--amber);padding:6px 12px;background:rgba(255,184,77,.06)}
.yt{display:flex;gap:14px;align-items:center;text-decoration:none;background:var(--night2);padding:10px;--px:4px}
.yt .thumb{position:relative;width:132px;flex:none;aspect-ratio:16/9;background:#000 center/cover}
.yt .thumb::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-10px 0 0 -7px;border-left:18px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;filter:drop-shadow(2px 2px 0 #000)}
.yt span{font-size:14px;color:var(--muted)}
.yt b{color:var(--text)}
.yt .ph{font-size:11px;color:var(--pink)}
.wip-col{display:flex;flex-direction:column}
.wip-tile{border:var(--px) dashed var(--line);--px:4px}
.wip-tile .art{background:repeating-linear-gradient(45deg,#151b3e 0 16px,#18204a 16px 32px)}
.wip-tile .body{align-items:flex-start}
.wip-tile p{font-size:14px}

/* community (STILUS.md 8) */
.community{background:linear-gradient(180deg,var(--night) 0%,#10163a 100%)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card .btn{align-self:flex-start}
.btn[disabled]{cursor:not-allowed;opacity:.55}
.btn[disabled]:hover{transform:none}
.closing{margin:32px 0 0;font-size:17px;color:var(--text);text-align:center}
.card{background:var(--panel);padding:22px;--px:6px;display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:15px}
.stars{display:flex;gap:6px}
.stars i{width:22px;height:22px;background:var(--amber);clip-path:polygon(50% 0,62% 36%,100% 36%,69% 58%,80% 100%,50% 74%,20% 100%,31% 58%,0 36%,38% 36%)}
.stars i.off{background:var(--line)}
.bar{height:16px;background:var(--night2);position:relative}
.bar b{position:absolute;inset:0 auto 0 0;background:var(--teal)}
.bar.pink b{background:var(--pink)}
.ph{font-size:11px;color:var(--pink)}

/* feedback strip */
.about{background:var(--night2);border-top:var(--px) solid var(--line);border-bottom:var(--px) solid var(--line)}
.about .wrap{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
.about p{margin:0;font-size:17px;max-width:46em}

/* legal pages (privacy, imprint) */
.legal{padding:56px 0 72px}
.legal .wrap{max-width:820px}
.legal .draft{background:var(--panel);border-left:var(--px) solid var(--pink);padding:12px 16px;font-size:15px;margin:22px 0 28px;color:var(--muted)}
.legal .draft b{color:var(--text)}
.legal .meta{color:var(--muted);font-size:15px;margin:6px 0 24px}
.legal h2{font-size:20px;margin:34px 0 8px;color:var(--amber)}
.legal p,.legal li{color:#d6daf5}
.legal ul{padding-left:22px}
.legal .box{background:var(--panel);padding:16px 20px;margin:14px 0;--px:6px}
.legal .box b{color:var(--text)}
.legal .ph{font-size:.82em}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0}
.legal dt{color:var(--muted)}
.legal dd{margin:0}

footer{padding:36px 0 48px;color:var(--muted);font-size:14px;border-top:var(--px) solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
footer a{color:var(--muted)}

@media (max-width:1100px){
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .wrap{padding:0 16px}
  .links{display:none}
  .lang{margin-left:auto}
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:40px;padding-bottom:120px}
  .hero p.lead{font-size:17px}
  .tiles,.cards{grid-template-columns:1fr}
  .about .wrap{grid-template-columns:1fr}
  section{padding:52px 0}
  #ground{height:100px}
  .frame .cap span:last-child{display:none}
  .btn{padding:11px 16px}
  .legal dl{grid-template-columns:1fr;gap:2px}
  .legal dd{margin-bottom:10px}
}