/* CSS Document */
    :root{
      --bg:#0b0c10;
      --panel:#11131a;
      --panel2:#0f1117;
      --text:#e9e5dc;
      --muted:#b6b0a4;
      --line:rgba(233,229,220,.16);
      --btn:#e9e5dc;
      --btnText:#0b0c10;
      --shadow:rgba(0,0,0,.55);
      --radius:18px;
      --max:980px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
      line-height:1.45;
      position:relative;
      isolation:isolate;
    }

    /* fixed full-screen background image (edges) + subtle tint */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-2;
      pointer-events:none;
      background:
        radial-gradient(1200px 800px at 60% 10%, rgba(120,90,150,.12), transparent 55%),
        radial-gradient(900px 650px at 20% 40%, rgba(40,120,120,.10), transparent 55%),
        url("/images/unseenlands/background.webp") center / cover no-repeat;
    }

    /* prefer webp if present (optional) */
    @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)){
      body::before{
        background:
          radial-gradient(1200px 800px at 60% 10%, rgba(120,90,150,.12), transparent 55%),
          radial-gradient(900px 650px at 20% 40%, rgba(40,120,120,.10), transparent 55%),
          image-set(
            url("/images/unseenlands/background.webp") type("image/webp") 1x ) center / cover no-repeat;
      }
    }

    /* center-safe vignette so panels/text stay readable */
    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:
        radial-gradient(900px 600px at 50% 50%,
          rgba(0,0,0,0.90) 0%,
          rgba(0,0,0,0.72) 38%,
          rgba(0,0,0,0.40) 62%,
          rgba(0,0,0,0.18) 80%,
          rgba(0,0,0,0.10) 100%);
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 64px; position:relative; z-index:1}

    .hero{
      margin:18px auto 0;
      padding:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 18px 45px var(--shadow);
      overflow:hidden;
    }
    .hero img{
      width:100%;
      height:auto;
      display:block;
      border-radius:14px;
      border:1px solid rgba(233,229,220,.14);
      background:#000;
    }

    .page-title{margin:16px 0 0;text-align:center;font-size:28px;font-weight:650;letter-spacing:.02em}

    .ornate{
      margin:16px 0 10px;
      position:relative;
      height:18px;
      opacity:.9;
    }
    .ornate:before,
    .ornate:after{
      content:"";
      position:absolute;
      top:50%;
      width:48%;
      height:1px;
      background:linear-gradient(90deg, transparent, var(--line));
    }
    .ornate:before{left:0; transform:translateY(-50%)}
    .ornate:after{right:0; transform:translateY(-50%) scaleX(-1)}
    .ornate i{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:30px;
      height:30px;
      border-radius:999px;
      border:1px solid rgba(233,229,220,.10);
      background:rgba(15,17,23,.25);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    .ornate i:before,
    .ornate i:after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:10px;
      height:10px;
      border-radius:999px;
      border:1px solid rgba(233,229,220,.22);
    }

    .intro{
      padding:2px 2px 6px;
      color:var(--muted);
      max-width:78ch;
      font-size:16px;
      margin:0 auto;
    }
    .intro p{margin:0 0 12px}
    .intro p:last-child{margin-bottom:0}

    .games{
      margin:22px 0 0;
      display:grid;
      grid-template-columns: 1fr;
      gap:16px;
    }
    .card{
      display:grid;
      grid-template-columns: 240px 1fr;
      gap:16px;
      padding:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 18px 45px var(--shadow);
      overflow:hidden;
    }
    .thumb{
      width:100%;
      height:150px;
      border-radius:14px;
      object-fit:cover;
      border:1px solid rgba(233,229,220,.14);
      background:var(--panel2);
    }
    .meta h2{
      margin:0;
      font-size:22px;
      font-weight:650;
      letter-spacing:.01em;
    }
    .meta .byline{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
      font-style:italic;
    }
    .meta p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:15px;
      max-width:70ch;
    }
    .row{
      margin-top:14px;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .btn{
      appearance:none;
      border:0;
      border-radius:999px;
      background:var(--btn);
      color:var(--btnText);
      font-weight:650;
      letter-spacing:.02em;
      padding:10px 14px;
      cursor:pointer;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .btn:active{transform:translateY(1px)}
    .btn.secondary{
      background:transparent;
      color:var(--text);
      border:1px solid var(--line);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      color:var(--muted);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      background:rgba(0,0,0,.18);
    }
    .disabled{
      opacity:.62;
      filter:saturate(.8);
    }
    .disabled .btn{
      cursor:not-allowed;
      opacity:.55;
      pointer-events:none;
    }

    .foot{
      margin:22px 0 0;
      color:rgba(233,229,220,.45);
      font-size:13px;
      letter-spacing:.02em;
    }
    .sitefoot{
      margin:26px 0 0;
      padding-top:14px;
      border-top:1px solid var(--line);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .sitefoot .links{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
    }
    .sitefoot a{
      color:rgba(233,229,220,.55);
      text-decoration:none;
      border-bottom:1px solid rgba(233,229,220,.18);
    }
    .sitefoot a:hover{
      color:rgba(233,229,220,.75);
      border-bottom-color:rgba(233,229,220,.35);
    }

    @media (max-width: 780px){
      .card{grid-template-columns:1fr}
      .thumb{height:170px}
    }