/* Daggerfall.lol — More Games module + game detail pages
   Loaded on the homepage (module) and on /games/<slug>/ (full page). */

/* ---------- shared small bits ---------- */
.game-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px;font:600 10px var(--serif);letter-spacing:.2em;color:#8c8478}
.game-crumb a{color:var(--gold);border-bottom:1px solid rgba(199,164,109,.45)}
.game-crumb a:hover{color:var(--gold-bright)}
.game-crumb span[aria-hidden]{color:#5e5648}

/* ---------- MORE GAMES module ---------- */
.more-games{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#12151f}
.more-games--inline{background:transparent;border-top:0;padding:52px 0 0}
.more-games__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:24px}
.more-games__head h2{margin:0;font:500 clamp(25px,2.7vw,36px)/1.2 var(--serif);color:#f2eadb;letter-spacing:-.02em}
.more-games__head h2 em{font-style:normal;color:var(--gold-bright)}
.more-games__note{max-width:360px;margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.more-games__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.mg-card{display:block;min-width:0;overflow:hidden;border:1px solid #574936;background:#171b26;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.mg-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 28px rgba(0,0,0,.45)}
.mg-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;background:#0b0e15}
.mg-card__body{display:block;padding:9px 10px 11px}
.mg-card__body b{display:block;font:500 12.5px/1.35 var(--serif);color:#e5dcc9}
.mg-card__body span{display:block;margin-top:5px;color:var(--gold);font:600 8px var(--serif);letter-spacing:.16em}
.mg-card--empty{border:1px dashed rgba(199,164,109,.22);background:rgba(255,255,255,.012);min-height:112px}
.more-games__credit{margin:18px 0 0;color:#8b867e;font-size:12px;line-height:1.75;max-width:900px}
.more-games__credit a{color:var(--gold);border-bottom:1px solid rgba(199,164,109,.4)}
.more-games__credit a:hover{color:var(--gold-bright)}

/* ---------- game detail page ---------- */
.game-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line);background:#11141d}
.game-hero__art{position:absolute;inset:0;z-index:-2;background:center 28%/cover no-repeat;filter:saturate(.8)}
.game-hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,11,17,.96) 0%,rgba(10,12,19,.88) 40%,rgba(10,12,19,.55) 100%),linear-gradient(0deg,rgba(13,16,23,.82),transparent 46%)}
.game-hero__inner{padding:58px 0 54px;max-width:760px}
.game-hero h1{margin:8px 0 16px;font:500 clamp(34px,5.2vw,60px)/1.1 var(--serif);letter-spacing:-.035em;color:#f4eee1}
.game-hero h1 em{font-style:normal;color:var(--gold-bright)}
.game-hero__lead{margin:0;max-width:600px;font-size:15px;line-height:1.85;color:#cdc5b8}
.game-hero__facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.game-hero__facts span{padding:7px 12px;border:1px solid var(--line);background:rgba(20,24,34,.72);color:#c6bdae;font:600 9px var(--serif);letter-spacing:.16em}
.game-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.game-play{background:radial-gradient(circle at 50% 4%,#222839,#12151e 62%);border-bottom:1px solid var(--line)}
.game-play__head{max-width:720px;margin-bottom:26px}
.game-play__head h2{margin:0 0 12px;font:500 clamp(28px,3.4vw,42px)/1.2 var(--serif);color:#f2eadb}
.game-play__head h2 em{font-style:normal;color:var(--gold-bright)}
.game-play__head p{margin:0;color:var(--muted);font-size:14px}
.player-poster--game{background:radial-gradient(circle at 50% 32%,#272d3f 0%,rgba(10,13,20,.96) 62%)}
.player-poster--game .player-poster__sigil{border-radius:50%}
.player-frame__status{display:block;color:#b9b2a4;font:400 11px var(--sans);letter-spacing:.02em;text-transform:none}
.player-frame__tools{display:flex;align-items:center;gap:16px}
.player-frame__fs{border:1px solid rgba(199,164,109,.4);background:transparent;color:#d0b98d;padding:7px 12px;font:600 9px var(--serif);letter-spacing:.14em;white-space:nowrap}
.player-frame__fs:hover{background:rgba(199,164,109,.12);color:var(--gold-bright)}
.player-frame__fs[hidden]{display:none}

.game-info{background:#141722;border-bottom:1px solid var(--line)}
.game-info__grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}
.game-info__grid h2{margin:0 0 16px;font:500 clamp(26px,3vw,38px)/1.2 var(--serif);color:#f2eadb}
.game-info__grid h2 em{font-style:normal;color:var(--gold-bright)}
.game-info__grid p{margin:0 0 15px;color:#c3bcae;font-size:14px;line-height:1.85}
.game-info__grid ol{margin:0;padding-left:20px;color:#c3bcae;font-size:14px;line-height:1.8}
.game-info__grid ol li{margin-bottom:11px}
.game-info__grid ol li strong{color:var(--gold-bright);font-weight:600}
.game-info__grid ol li::marker{color:var(--gold);font-family:var(--serif)}
.game-info__note{margin-top:20px;padding:13px 16px;border-left:2px solid var(--gold);background:rgba(199,164,109,.06);color:#a9a396;font-size:12.5px;line-height:1.75}

.game-gallery{background:#10131c}
.game-gallery__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.game-shot{margin:0;border:1px solid #4c4132;background:#141824;overflow:hidden;transition:border-color .2s}
.game-shot:hover{border-color:var(--gold)}
.game-shot img{width:100%;height:auto;display:block;background:#0b0e15}
.game-shot figcaption{padding:13px 16px 15px;color:#a9a396;font-size:12.5px;line-height:1.65}
.game-shot figcaption b{display:block;margin:5px 0 4px;color:#e2d9c6;font:500 15px var(--serif)}
.game-shot figcaption span{color:var(--gold);font:600 9px var(--serif);letter-spacing:.2em}
.game-gallery__credit{margin:20px 0 0;color:#8b867e;font-size:12px;line-height:1.75;max-width:900px}
.game-gallery__credit a{color:var(--gold);border-bottom:1px solid rgba(199,164,109,.4)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .more-games__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .game-info__grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:700px){
  .game-hero__inner{padding:44px 0 40px}
  .game-gallery__grid{grid-template-columns:1fr;gap:14px}
  .more-games__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .more-games__head{display:block}
  .more-games__note{margin-top:12px;max-width:none}
  .mg-card--empty{display:none}
  .player-frame__footer{flex-direction:column;align-items:flex-start}
  .player-frame__tools{width:100%;justify-content:space-between}
  /* On phones the game keeps playing inside the frame, just taller. */
  .player-frame__screen{aspect-ratio:auto;height:72vh;height:72svh;min-height:430px}
  .player-frame__bar{font-size:7.5px;letter-spacing:.1em;gap:8px;flex-wrap:nowrap}
  .player-frame__bar>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .player-frame__state{font-size:7.5px;letter-spacing:.1em;white-space:nowrap}
}
@media(max-width:420px){
  .mg-card__body{padding:8px 9px 10px}
  .mg-card__body b{font-size:11.5px}
  .game-hero__facts{gap:7px}
}