/* ============================================================
   ROOT CELLAR GAMES, home page
   Dark room, bright games. The art does the talking.
   Self-contained on purpose: this file does not touch style.css,
   so the game pages and the wiki keep rendering as they are.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:        #0B0908;
  --bg-2:      #110E0B;
  --surface:   #17130F;
  --surface-2: #1F1912;
  --line:      #2A2219;
  --line-2:    #3E3326;

  --accent:    #F7A724;
  --accent-2:  #FFC65A;
  --accent-dim:#B87D1C;

  --text:      #F6F1E8;
  --text-2:    #B3A795;
  --text-3:    #7A6E60;

  --ink:       #140F07;   /* dark ink used on amber fills */

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  --wrap: 1240px;
  --radius: 14px;
  --radius-lg: 20px;

  --nav-h: 68px;
  --gutter: clamp(18px, 2.6vw, 44px);   /* page edge breathing room */
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ============================================================
   NAV
   ============================================================ */
/* Solid at every scroll position. It used to fade in from a gradient once
   you scrolled, which left the links sitting on bare artwork at the top of
   the page. One appearance, always. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(10,8,6,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* The bar spans the window, not the 1240px content column, so the logo is
   genuinely in the top left corner and the links in the top right at every
   width. The gutter grows with the viewport instead of being a fixed 20px. */
.nav-inner{
  display:flex; align-items:center; gap:24px;
  width:100%; padding-inline:var(--gutter);
}
.nav-logo{ flex:none; display:flex; align-items:center; }
.nav-logo img{ height:clamp(24px, 2.2vw, 32px); width:auto; display:block; }

.nav-links{
  margin-left:auto; flex:0 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(16px, 1.9vw, 30px);
}
.nav-links a{
  font-family:var(--display); font-weight:700;
  font-size:clamp(.7rem, .82vw, .78rem);
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-2);
  white-space:nowrap;
  transition:color .16s ease;
}
.nav-links a:hover{ color:var(--text); }

.nav-burger{ display:none; margin-left:auto; flex:none; padding:8px; margin-right:-8px; color:var(--text); }

@media (max-width:1040px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,8,6,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 20px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:.2s ease;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-burger{ display:block; }
}

/* ============================================================
   BUTTONS + STICKERS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:800; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 26px; border-radius:4px;
  border:1px solid var(--line-2); color:var(--text);
  background:rgba(20,16,12,.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--accent); color:#fff; }
.btn .arw{ transition:transform .16s ease; }
.btn:hover .arw{ transform:translateX(3px); }

.btn-primary{
  background:linear-gradient(135deg,var(--accent-2) 0%, var(--accent) 55%, #DE8A10 100%);
  color:var(--ink); border-color:transparent;
  box-shadow:0 10px 30px rgba(247,167,36,.22);
}
.btn-primary:hover{ color:var(--ink); box-shadow:0 16px 40px rgba(247,167,36,.32); }

/* the chunky angled badges */
.stickers{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.sticker{
  display:inline-block;
  font-family:var(--display); font-weight:900; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.15;
  padding:11px 20px; border-radius:10px;
  border:3px solid #120D06;
  box-shadow:0 6px 0 #120D06, 0 14px 26px rgba(0,0,0,.45);
  transform:rotate(-2.2deg);
  transition:transform .16s ease;
}
.sticker:nth-child(even){ transform:rotate(1.8deg); }
.sticker:hover{ transform:rotate(0) translateY(-2px); }
.sticker b{ display:block; font-size:.66rem; letter-spacing:.14em; opacity:.72; font-weight:800; }
.sticker.amber{ background:linear-gradient(180deg,#FFD067,#F7A724); color:#17100A; }
.sticker.green{ background:linear-gradient(180deg,#A8DC86,#72B254); color:#12200B; }
.sticker.plain{ background:linear-gradient(180deg,#F3EDE3,#D9D0C2); color:#15110C; }

/* ============================================================
   THE ACCORDION, four games on one screen
   Every panel is a link to its Steam page. One panel is open at a
   time: it runs its trailer and carries all of its copy. The closed
   ones stand as lit spines with the name set vertically, so the
   screen is full and there is only ever one block of text on it.

   Adding a game is one more .pan in the markup. Nothing here counts
   the panels, so five or six work the same way; past about seven the
   spines get too narrow to read and the overflow belongs in a
   "More games" panel instead.

   Below 900px, and on any device without a hover pointer, the whole
   thing stacks into full width rows with every panel open.
   ============================================================ */
.acc{
  position:relative;
  display:flex; min-height:100svh;
  background:var(--bg);
}
/* The art runs under the nav rather than starting below it. The nav carries
   its own gradient, so nothing is lost and the top of the screen is picture
   instead of a flat black band. */
.pan-body, .pan-spine{ padding-bottom:38px; }

.pan{
  position:relative; isolation:isolate; overflow:hidden;
  flex:1 1 0; min-width:0;
  text-decoration:none;
  border-right:1px solid rgba(0,0,0,.65);
  transition:flex .55s cubic-bezier(.2,.75,.2,1);
}
.pan:last-of-type{ border-right:0; }
.pan.is-open{ flex:3.1 1 0; }

.pan-bg{ position:absolute; inset:0; z-index:-2; }
.pan-bg img, .pan-bg video{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.75,.2,1), opacity .5s ease;
  transform:scale(1.07);
}
.pan-bg video{ position:absolute; inset:0; opacity:0; }
.pan-bg video.playing{ opacity:1; }
.pan.is-open .pan-bg img, .pan.is-open .pan-bg video{ transform:scale(1); }

/* dark at the bottom so the copy always reads. Closed panels sit back
   a stop further so the open one is clearly the lit one. */
.pan::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,6,5,.5) 0%, rgba(8,6,5,.14) 32%, rgba(8,6,5,.76) 70%, rgba(8,6,5,.98) 100%),
    linear-gradient(180deg, rgba(8,6,5,.42), rgba(8,6,5,.42));
  transition:opacity .45s ease;
}
.pan.is-open::before{ opacity:.8; }

/* ---- the closed spine ---- */
.pan-spine{
  position:absolute; left:0; bottom:0; z-index:1;
  display:flex; align-items:center; gap:16px;
  padding:26px 22px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  transition:opacity .3s ease;
}
.pan-spine b{
  font-family:var(--display); font-weight:700; font-size:.6rem;
  letter-spacing:.22em; color:var(--accent);
}
.pan-spine span{
  font-family:var(--display); font-weight:800;
  font-size:clamp(.95rem, 1.25vw, 1.2rem); letter-spacing:.02em;
  white-space:nowrap; color:var(--text);
  text-shadow:0 2px 14px rgba(8,6,5,.95);
}
.pan.is-open .pan-spine{ opacity:0; }

/* ---- the open body ---- */
.pan-body{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:30px 30px 38px;
  display:flex; flex-direction:column; align-items:flex-start;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .4s ease .08s, transform .45s cubic-bezier(.2,.75,.2,1) .08s;
}
.pan.is-open .pan-body{ opacity:1; transform:none; pointer-events:auto; }

.pan-when{
  font-family:var(--display); font-weight:700; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin-bottom:14px; text-shadow:0 2px 10px rgba(8,6,5,.9);
}
.pan-mark{
  width:100%; max-width:270px; height:auto; margin-bottom:16px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.65));
}
.pan-title{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem,3vw,2.6rem); line-height:.95; letter-spacing:-.02em;
  color:var(--text); margin-bottom:16px; text-shadow:0 8px 24px rgba(0,0,0,.7);
}
.pan-line{
  color:#E7DFD2; font-size:1.02rem; line-height:1.5; margin-bottom:12px;
  max-width:46ch; text-shadow:0 2px 12px rgba(8,6,5,.95);
}
.pan-meta{
  font-family:var(--display); font-weight:600; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  margin-bottom:22px; text-shadow:0 2px 8px rgba(8,6,5,.9);
}
.pan-meta span{ opacity:.5; margin:0 4px; }

.pan-go{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:800; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  padding:13px 22px; border-radius:4px;
  border:1px solid var(--line-2); color:var(--text);
  background:rgba(20,16,12,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.pan.is-open:hover .pan-go{
  background:linear-gradient(135deg,var(--accent-2) 0%, var(--accent) 55%, #DE8A10 100%);
  color:var(--ink); border-color:transparent; transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(247,167,36,.24);
}
.pan-go .arw{ transition:transform .2s ease; }
.pan.is-open:hover .pan-go .arw{ transform:translateX(3px); }

.pan:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }

/* Driftholm's trailer carries burned-in captions in its lower third. Crop
   them away rather than trying to lay out around them. */
#driftholm .pan-bg video{ transform:scale(1.34); transform-origin:50% 0%; }
#driftholm.is-open .pan-bg video{ transform:scale(1.3); transform-origin:50% 0%; }

/* Patchy is a strip along the bottom of a desktop, so the middle of its frame
   is empty sky. Pull the crop down to where the lake actually is. */
#patchy .pan-bg img, #patchy .pan-bg video{ object-position:50% 97%; }

/* scroll cue, pinned to the accordion rather than any one panel */
.cue{
  position:absolute; right:var(--gutter); bottom:16px; z-index:3;
  font-family:var(--display); font-weight:700; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-3);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  pointer-events:none; text-shadow:0 2px 10px rgba(8,6,5,.95);
}
.cue span{ width:1px; height:24px; background:linear-gradient(180deg,var(--text-3),transparent); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .cue span{ animation:none; } }

/* ---- stacked: narrow screens, and anything without a hover pointer ---- */
@media (max-width:900px), (hover:none){
  .acc{ flex-direction:column; min-height:auto; }
  .pan, .pan.is-open{
    flex:none; min-height:min(62svh,560px);
    display:flex; flex-direction:column; justify-content:flex-end;
    border-right:0; border-bottom:1px solid rgba(0,0,0,.65);
  }
  .pan:last-of-type{ border-bottom:0; }
  .pan-spine{ display:none; }
  .pan-body{
    position:relative; opacity:1; transform:none; pointer-events:auto;
    margin-top:auto; padding:26px 22px 32px;
  }
  .pan-bg img, .pan-bg video{ transform:scale(1); }
  #driftholm .pan-bg video{ transform:scale(1.3); transform-origin:50% 0%; }
  .pan-mark{ max-width:240px; }
  .cue{ display:none; }
}
@media (max-width:900px){
  .pan-line{ font-size:.97rem; }
}
@media (prefers-reduced-motion:reduce){
  .pan, .pan-body, .pan-bg img, .pan-bg video{ transition:none; }
}

/* ============================================================
   NEWS, pulled live from Steam
   ============================================================ */
.news{ background:var(--bg-2); border-top:1px solid var(--line); padding:clamp(64px,9vw,110px) 0; }

.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.sec-head h2{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.6rem); letter-spacing:-.01em;
}
.sec-head a{
  font-family:var(--display); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.sec-head a:hover{ color:var(--accent-2); }

.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:660px){ .news-grid{ grid-template-columns:1fr; } }

.post{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.post:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 18px 44px rgba(0,0,0,.5); }
.post-img{ aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--surface-2); }
.post-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.post-kicker{
  display:flex; gap:10px; align-items:center; margin-bottom:10px;
  font-family:var(--display); font-weight:700; font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}
.post-kicker .tag{ color:var(--accent); }
.post h3{
  font-family:var(--display); font-weight:800; font-size:1.06rem; line-height:1.3;
  margin-bottom:10px;
}
.post p{ color:var(--text-2); font-size:.93rem; flex:1; }
.post .more{
  margin-top:16px; font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}

.news-msg{
  grid-column:1 / -1; text-align:center; color:var(--text-3);
  border:1px dashed var(--line-2); border-radius:var(--radius-lg); padding:44px 20px;
  font-size:.95rem;
}
.news-msg a{ color:var(--accent); }

.skel{ border-color:var(--line); }
.skel .post-img, .skel .bar{
  background:linear-gradient(90deg,var(--surface-2) 25%,#241D16 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:shim 1.3s linear infinite;
}
.skel .bar{ height:11px; border-radius:6px; margin-bottom:10px; }
.skel .bar.s{ width:55%; }
@keyframes shim{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion:reduce){ .skel .post-img, .skel .bar{ animation:none; } }

/* ============================================================
   FOOTER
   Three columns pushed to the edges, then one thin bar with the
   studio mark sitting next to the copyright line.
   ============================================================ */
.foot{ background:var(--bg); border-top:1px solid var(--line); padding:44px 0 22px; }

.foot-cols{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px 48px; }
.foot-col h4{
  font-family:var(--display); font-weight:700; font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-bottom:11px;
}
.foot-col a{
  display:block; color:var(--text-2); font-size:.88rem; line-height:1.5;
  padding:3px 0; transition:color .16s ease;
}
.foot-col a:hover{ color:var(--accent); }

.foot-bar{
  display:flex; align-items:center; gap:10px 20px; flex-wrap:wrap;
  margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--text-3); font-size:.8rem;
}
.foot-mark{ display:block; flex:none; }
.foot-mark img{ height:26px; width:auto; opacity:.85; transition:opacity .16s ease; }
.foot-mark:hover img{ opacity:1; }
.foot-where{ margin-left:auto; }

@media (max-width:620px){
  .foot-cols{ gap:24px 36px; }
  .foot-where{ margin-left:0; width:100%; }
}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }