/* Holo Hotel - shared styles for the content pages (feature pages + /help/).
   Same palette and Volter face as the landing page so nothing looks like a different site.
   Font paths are relative to THIS file, so they work at any URL depth. */
@font-face{ font-family:"Volter"; src:url("../fonts/volter.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Volter"; src:url("../fonts/volter_bold.ttf") format("truetype"); font-weight:700 900; font-display:swap; }
:root{
  --bg:#0a1418; --bg2:#0e1c22; --panel:#0f2229; --line:#1c3d47;
  --text:#d6ecf2; --muted:#8fb3bf; --gold:#ffd23a; --hi:#e9f6a0;
  --ui:"Volter","Segoe UI",sans-serif; color-scheme:dark;
  --gold2:#ffb800; --glow:rgba(255,210,58,.35); --card:#0d2229; --card2:#11303a; --r:14px;
}
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none !important; transition:none !important; } }
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(47,107,125,.30) 0%, rgba(47,107,125,0) 62%),
    radial-gradient(900px 480px at 88% 34%, rgba(255,210,58,.06) 0%, rgba(255,210,58,0) 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%); background-attachment:fixed;
  color:var(--text); font:16px/1.65 var(--ui); min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:var(--hi)}
img{max-width:100%}
.wrap{max-width:900px; margin:0 auto; padding:14px 18px 44px}
.wrap.wide{max-width:1040px}

/* ---- site nav ---- */
.sitenav{display:flex; align-items:center; gap:14px; padding:8px 18px; margin:0 -18px 22px; flex-wrap:wrap;
  position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line)}
.sitenav .brand{flex:none; line-height:0}
.sitenav .brand img{width:118px; height:auto}
.sitenav .navlinks{display:flex; gap:6px; flex-wrap:wrap}
.sitenav .navlinks a{text-decoration:none; color:var(--text); font-size:14px; font-weight:700;
  padding:8px 13px; border-radius:9px; border:1px solid transparent}
.sitenav .navlinks a:hover{background:var(--panel); border-color:var(--line)}
.sitenav .navlinks a.on{background:var(--panel); border-color:var(--line); color:var(--gold)}
.sitenav .play{margin-left:auto; text-decoration:none; font-weight:700; font-size:13px; color:#5a3d00;
  background:linear-gradient(180deg,#ffe27a,var(--gold)); border:1px solid #7a4d00; border-bottom-width:3px; border-radius:9px; padding:8px 17px; white-space:nowrap;
  transition:transform .12s, filter .12s}
.sitenav .play:hover{filter:brightness(1.07); transform:translateY(-1px)}
.sitenav .play .short{display:none}
.sitenav .searchlink{display:none; flex:none; color:var(--text); padding:8px; border-radius:9px; border:1px solid transparent; line-height:0}
.sitenav .searchlink:hover{background:var(--panel); border-color:var(--line)}

/* ---- text ---- */
.crumb{font-size:12.5px; color:var(--muted); margin:0 0 12px}
.crumb a{color:var(--muted)}
h1{font-size:clamp(24px,4.4vw,36px); margin:0 0 10px; line-height:1.18; font-weight:900;
  background:linear-gradient(180deg,#fff6bf 0%,#ffd23a 55%,#f0a800 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #6b4300) drop-shadow(0 8px 18px rgba(255,184,0,.18))}
.lede{color:var(--muted); margin:0 0 26px; font-size:15.5px; max-width:66ch}
/* the gradient headline is transparent text over a gradient; a browser that cannot clip a background to text would show NOTHING, so it gets plain gold instead */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ h1{color:var(--gold); background:none; filter:none} }
h2{font-size:clamp(17px,2.6vw,21px); margin:36px 0 10px; color:var(--gold); scroll-margin-top:70px}
h2::before{content:""; display:inline-block; width:9px; height:9px; margin-right:10px; background:var(--gold); box-shadow:0 0 9px var(--glow); vertical-align:middle; transform:translateY(-1px)}
.cards h2::before,.related h2::before,.faq h2::before,.hits h2::before{display:none}
h3{font-size:15px; margin:22px 0 6px}
p{margin:0 0 12px; max-width:70ch}
ul,ol{margin:0 0 14px; padding-left:22px; max-width:70ch}
li{margin:0 0 7px}

ol.steps{list-style:none; counter-reset:s; padding:0; margin:0 0 18px}
ol.steps > li{counter-increment:s; position:relative; padding:0 0 0 42px; margin:0 0 14px}
ol.steps > li::before{content:counter(s); position:absolute; left:0; top:0; width:29px; height:29px;
  border-radius:8px; background:linear-gradient(180deg,#ffe27a,var(--gold)); border:1px solid #7a4d00; border-bottom-width:3px; color:#4a3000;
  font-size:14px; font-weight:900; display:grid; place-items:center}

kbd{font:inherit; font-size:12.5px; font-weight:700; background:#132b33; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:6px; padding:1px 7px; white-space:nowrap}
code{font:13px/1.5 ui-monospace,Menlo,monospace; background:#0b1a20; border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; color:var(--hi)}
.btnref{font-weight:700; color:var(--gold)}

.note,.warn{border:1px solid var(--line); background:linear-gradient(180deg,#15333d,var(--panel)); border-radius:12px;
  padding:13px 16px; margin:0 0 16px; font-size:14.5px; max-width:70ch; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.note{border-left:4px solid #3b82f6}
.warn{border-left:4px solid #e0a33a}
.note strong,.warn strong{color:var(--hi)}

/* ---- real in-game art showcases ---- */
.shots{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin:0 0 20px; padding:0; list-style:none}
.shot{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 10px; text-align:center; margin:0}
/* Game art is shown at ITS OWN NATIVE SIZE - never enlarged. These are the real room sprites (base + layers
   composited into one PNG), not the 17-48px catalogue thumbnails; blowing those up is what looked pixelated.
   width/height are written on each <img> as the exact source pixel size, so the browser does no scaling at all.
   The stage is a fixed-height light panel because this art is drawn for the catalogue and room floors - dark
   badges and dark clothing vanish on the near-black page - and a fixed height keeps every tile aligned. */
.shot .art{display:flex; align-items:center; justify-content:center; height:144px; margin-bottom:10px;
  background:linear-gradient(180deg,#f4f9fb 0%,#dbeaef 100%);
  border:1px solid #b9d2da; border-radius:9px; overflow:hidden}
.shot .art img{image-rendering:pixelated; display:block; max-width:100%}
.shot span{display:block; font-size:12.5px; color:var(--muted); line-height:1.4}
.badgestrip{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 20px; padding:0; list-style:none}
.badgestrip li{margin:0; background:linear-gradient(180deg,#f4f9fb 0%,#dbeaef 100%);
  border:1px solid #b9d2da; border-radius:9px; padding:8px; line-height:0}
.badgestrip img{image-rendering:pixelated; height:44px; width:auto; display:block}

/* ---- card grids (hubs) ---- */
.cards{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards li{margin:0}
.cards a{display:block; height:100%; background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line);
  border-radius:var(--r); padding:16px; text-decoration:none; color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:border-color .18s, transform .18s, box-shadow .18s}
.cards a:hover{border-color:rgba(255,210,58,.55); transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.45), 0 0 28px rgba(255,210,58,.09)}
.cards a:focus-visible,.pager a:focus-visible,.sitenav .play:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.cards h2,.cards h3{margin:0 0 5px; font-size:15px; color:var(--gold)}
.cards p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.5; max-width:none}

/* ---- related links + pager ---- */
.related{background:linear-gradient(180deg,#15333d,var(--panel)); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:30px 0 0}
.related strong{display:block; font-size:13px; color:var(--muted); font-weight:400; margin:0 0 7px}
.related ul{margin:0; padding-left:18px}
.pager{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin:32px 0 0;
  border-top:1px solid var(--line); padding-top:16px; font-size:14px}
.pager a{text-decoration:none; font-weight:700; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:rgba(15,34,41,.85);
  transition:border-color .15s, background .15s, transform .15s}
.pager a:hover{border-color:var(--gold); background:#173a45; transform:translateY(-2px)}

/* ---- FAQ ---- */
.faq{margin:0 0 8px}
.faq details{background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:0 0 10px; transition:border-color .15s}
.faq details:hover,.faq details[open]{border-color:#2f6b7d}
.faq summary{cursor:pointer; font-weight:700; color:var(--text); list-style:none; display:flex; gap:11px; align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:#173a45; color:var(--gold); font-weight:900; font-size:15px; line-height:1}
.faq details[open] summary::before{content:"\2212"}
.faq details[open] summary{color:var(--gold); margin-bottom:8px}
.faq p{margin:0; font-size:14.5px}

/* ---- footer ---- */
.sitefoot{margin:44px auto 0; border-top:1px solid var(--line); padding-top:22px}
.footcols{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.footcols strong{display:block; font-size:13px; color:var(--gold); margin:0 0 8px}
.footcols ul{list-style:none; margin:0; padding:0}
.footcols li{margin:0 0 5px}
.footcols a{color:var(--muted); text-decoration:none; font-size:13.5px}
.footcols a:hover{color:var(--hi); text-decoration:underline}
.sitefoot .copy{text-align:center; color:var(--muted); font-size:12.5px; margin:26px 0 0; max-width:none}

/* ---- site search ---- */
.sitesearch{position:relative; flex:1 1 190px; min-width:150px; max-width:280px; margin:0}
.sitesearch input{width:100%; box-sizing:border-box; font:13px/1.4 var(--ui); color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:9px 12px}
.sitesearch input::placeholder{color:#6d8d99}
.sitesearch input:focus{outline:none; border-color:#2f6b7d; background:#123039}
.qres{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; max-height:60vh; overflow:auto;
  background:#0d2027; border:1px solid #2f6b7d; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.55); padding:5px}
.qres a{display:block; text-decoration:none; padding:8px 10px; border-radius:7px; color:var(--text)}
.qres a b{display:block; font-size:13.5px; color:var(--gold); font-weight:700}
.qres a span{display:block; font-size:12px; color:var(--muted); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qres a:hover, .qres a.sel{background:#173a45}
.qres .none{padding:10px; font-size:13px; color:var(--muted)}
/* results page */
.hits{list-style:none; margin:18px 0 0; padding:0}
.hits li{margin:0 0 12px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:13px 15px}
.hits a{font-size:15.5px; font-weight:700; text-decoration:none; color:var(--gold)}
.hits a:hover{text-decoration:underline}
.hits p{margin:4px 0 0; font-size:13.5px; color:var(--muted)}
.hits .u{font-size:12px; color:#6d8d99; margin-top:3px}

/* ---- phones: ONE compact sticky row (logo, the two menus, a search icon, play) instead of four stacked rows that covered a quarter of the screen ---- */
@media (max-width:640px){
  .wrap{padding-left:14px; padding-right:14px}
  .sitenav{flex-wrap:nowrap; gap:4px; margin:0 -14px 18px; padding:6px 12px}
  .sitenav .brand img{width:72px}
  .sitenav .navlinks{flex-wrap:nowrap; gap:0}
  .sitenav .navlinks a,.sitenav .navlinks button{font-size:12px; padding:6px 4px}
  .sitenav .navdrop .ndtoggle{display:none}          /* the dropdowns are switched off on touch screens (navmenu.js), so the caret would promise something that does not happen */
  .sitenav .sitesearch{display:none}
  .sitenav .searchlink{display:inline-block; padding:6px}
  .sitenav .play{padding:7px 9px; font-size:12px; margin-left:auto}
  .sitenav .play .long{display:none}
  .sitenav .play .short{display:inline}
  h2{margin-top:30px}
}