:root{
      --bg0:#0b0a08;
      --bg1:#12100c;
      --wood:#1b140d;
      --stone:#141210;
      --ink:#efe7d7;
      --muted:#c9bfae;
      --dim:#a69b88;
      --amber:#d8a657;
      --gold:#b88b3a;
      --green:#2f5b4a;
      --line:rgba(255,231,215,.10);
      --shadow: 0 16px 48px rgba(0,0,0,.55);
      --radius: 18px;
      --max: 1080px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(1200px 800px at 20% 10%, rgba(216,166,87,.14), transparent 65%),
        radial-gradient(900px 600px at 85% 25%, rgba(47,91,74,.16), transparent 60%),
        radial-gradient(1100px 900px at 50% 90%, rgba(184,139,58,.08), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 35%, #0a0907);
      font-family: var(--sans);
      line-height:1.55;
      overflow-x:hidden;
    }

    /* Subtle “tavern” texture */
    body::before{
      content:"";
      position:fixed; inset:0;
      background:
        repeating-linear-gradient( 90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px),
        repeating-linear-gradient( 0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px);
      opacity:.08;
      pointer-events:none;
      mix-blend-mode: overlay;
    }

    /* Candle flicker overlay (animated) */
    .flicker{
      position:fixed; inset:-40px;
      background: radial-gradient(600px 320px at var(--fx, 35%) var(--fy, 20%), rgba(216,166,87,.18), transparent 70%);
      filter: blur(10px);
      opacity:.75;
      pointer-events:none;
      mix-blend-mode: screen;
      animation: flicker 5.5s ease-in-out infinite;
      transform: translateZ(0);
    }
    @keyframes flicker{
      0%{ opacity:.55; filter: blur(10px); }
      30%{ opacity:.78; filter: blur(12px); }
      60%{ opacity:.62; filter: blur(9px); }
      100%{ opacity:.55; filter: blur(10px); }
    }

    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }

    /* Top Nav */
    header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(10,9,7,.72), rgba(10,9,7,.35));
      border-bottom:1px solid var(--line);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 220px;
    }
    .sigil{
      width:36px; height:36px; border-radius:12px;
      background:
        radial-gradient(circle at 30% 30%, rgba(216,166,87,.25), transparent 55%),
        linear-gradient(135deg, rgba(47,91,74,.45), rgba(184,139,58,.35));
      border:1px solid rgba(216,166,87,.25);
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
      position:relative;
      overflow:hidden;
    }
    .sigil::after{
      content:"DG";
      position:absolute; inset:0;
      display:grid; place-items:center;
      font-family: var(--serif);
      letter-spacing:.06em;
      color:rgba(239,231,215,.9);
      font-weight:700;
      font-size:14px;
      text-shadow: 0 2px 10px rgba(0,0,0,.6);
    }
    .brand h1{
      margin:0;
      font-size:14px;
      letter-spacing:.18em;
      text-transform: uppercase;
      color: rgba(239,231,215,.92);
    }
    .brand span{
      display:block;
      font-size:12px;
      color: rgba(201,191,174,.8);
      letter-spacing:.02em;
      margin-top:2px;
    }

    nav ul{
      list-style:none;
      display:flex;
      gap:16px;
      padding:0;
      margin:0;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    nav a{
      font-size:13px;
      color: rgba(239,231,215,.82);
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid transparent;
      transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
      outline:none;
    }
    nav a:hover, nav a:focus{
      background: rgba(216,166,87,.10);
      border-color: rgba(216,166,87,.18);
      color: rgba(239,231,215,.95);
      transform: translateY(-1px);
    }

    .nav-actions{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      min-width: 220px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      border-radius: 14px;
      padding:10px 12px;
      border: 1px solid rgba(216,166,87,.22);
      background:
        radial-gradient(120px 60px at 30% 0%, rgba(216,166,87,.18), transparent 60%),
        linear-gradient(180deg, rgba(27,20,13,.78), rgba(20,18,16,.72));
      color: rgba(239,231,215,.92);
      box-shadow: 0 12px 22px rgba(0,0,0,.35);
      cursor:pointer;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
      font-size:13px;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(216,166,87,.34); }
    .btn:active{ transform: translateY(0px); }
    .btn small{ color: rgba(201,191,174,.8); font-family: var(--mono); font-size:11px; }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius: 999px;
      background: rgba(47,91,74,.14);
      border: 1px solid rgba(47,91,74,.22);
      color: rgba(239,231,215,.86);
      font-size:12px;
      user-select:none;
      white-space:nowrap;
    }

    /* Hero */
    .hero{
      position:relative;
      padding: 78px 0 46px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 22px;
      align-items:stretch;
    }
    .card{
      background:
        radial-gradient(800px 300px at 20% 0%, rgba(216,166,87,.11), transparent 70%),
        linear-gradient(180deg, rgba(27,20,13,.72), rgba(20,18,16,.70));
      border: 1px solid rgba(255,231,215,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(500px 220px at 90% 20%, rgba(47,91,74,.16), transparent 70%);
      pointer-events:none;
    }
    .hero-main{ padding: 28px; }
    .hero h2{
      margin:0 0 10px;
      font-family: var(--serif);
      font-size: 44px;
      letter-spacing: .02em;
      line-height: 1.05;
    }
    .hero .tagline{
      margin:0 0 18px;
      color: rgba(201,191,174,.90);
      font-size: 16px;
      max-width: 60ch;
    }
    .hero .lead{
      margin:0;
      color: rgba(239,231,215,.88);
      font-size: 14px;
      max-width: 78ch;
    }

    .hero-meta{
      padding: 22px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .hero-meta h3{
      margin:0;
      font-size: 14px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(239,231,215,.82);
    }
    .hero-meta p{
      margin:0;
      font-size: 13px;
      color: rgba(201,191,174,.86);
    }

    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(216,166,87,.35), transparent);
      margin: 18px 0;
    }

    /* Sections */
    section{
      padding: 28px 0;
    }
    .section-title{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:14px;
      margin-bottom: 12px;
    }
    .section-title h3{
      margin:0;
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing:.01em;
    }
    .section-title .hint{
      color: rgba(201,191,174,.78);
      font-size: 12px;
      font-family: var(--mono);
      letter-spacing:.02em;
    }

    .grid-2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .panel{
      padding: 18px;
    }
    .panel p{
      margin:0;
      color: rgba(239,231,215,.86);
      font-size: 14px;
    }
    .panel p + p{ margin-top: 10px; color: rgba(201,191,174,.86); }

    /* Games grid */
    .games{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .chip{
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,231,215,.10);
      background:
        radial-gradient(200px 80px at 20% 0%, rgba(216,166,87,.12), transparent 60%),
        linear-gradient(180deg, rgba(20,18,16,.52), rgba(20,18,16,.32));
      box-shadow: 0 10px 18px rgba(0,0,0,.22);
    }
    .chip strong{
      display:block;
      font-size: 14px;
      font-weight: 700;
      letter-spacing:.01em;
    }
    .chip span{
      display:block;
      margin-top:4px;
      font-size: 12px;
      color: rgba(201,191,174,.82);
    }

    /* Values list */
    .values{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .value{
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(47,91,74,.22);
      background: linear-gradient(180deg, rgba(47,91,74,.14), rgba(20,18,16,.30));
    }
    .value b{
      display:block;
      font-size: 13px;
      letter-spacing:.02em;
      margin-bottom: 4px;
    }
    .value i{
      display:block;
      color: rgba(201,191,174,.85);
      font-style: normal;
      font-size: 13px;
    }

    /* Tavern quotes */
    .quotes{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    blockquote{
      margin:0;
      padding: 16px 16px 16px 18px;
      border-left: 3px solid rgba(216,166,87,.45);
      background: rgba(20,18,16,.40);
      border-radius: 14px;
      border: 1px solid rgba(255,231,215,.08);
      color: rgba(239,231,215,.88);
    }
    blockquote footer{
      margin-top:8px;
      color: rgba(201,191,174,.75);
      font-size: 12px;
      font-family: var(--mono);
    }

    /* Footer */
    footer.site{
      padding: 26px 0 40px;
      color: rgba(201,191,174,.75);
      font-size: 12px;
      border-top: 1px solid var(--line);
      margin-top: 10px;
    }
    .foot{
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      align-items:center;
    }
    .foot em{ font-style:normal; color: rgba(239,231,215,.82); }

    /* Small screens */
    @media (max-width: 860px){
      .hero-grid{ grid-template-columns: 1fr; }
      .nav{ flex-wrap:wrap; }
      .brand, .nav-actions{ min-width: unset; width:100%; justify-content:space-between; }
      nav ul{ justify-content:flex-start; }
      .games{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-2{ grid-template-columns: 1fr; }
      .values{ grid-template-columns: 1fr; }
      .hero h2{ font-size: 38px; }
    }
    @media (max-width: 520px){
      .games{ grid-template-columns: 1fr; }
      .hero h2{ font-size: 34px; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .flicker{ animation:none; }
      nav a, .btn{ transition:none; }
      html:focus-within{ scroll-behavior:auto; }
    }
	/* Image Gallery */
	.gallery{
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 12px;
	}
	.gallery a{
	  cursor: zoom-in;
	}

	.gallery a:hover img{
	  transform: scale(1.02);
	  box-shadow: 0 16px 34px rgba(0,0,0,.55);
	}

	.gallery img{
	  transition: transform .2s ease, box-shadow .2s ease;
	  max-height: 250px;
	  max-width: 250px;
	  width: auto;
	  height: auto;
	  object-fit: contain;
	  border-radius: 14px;
	  box-shadow: 0 12px 26px rgba(0,0,0,.45);
	}

	.gallery-btn{
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  background: rgba(20,18,16,.75);
	  border: 1px solid rgba(216,166,87,.35);
	  color: var(--ink);
	  font-size: 20px;
	  width: 38px;
	  height: 38px;
	  border-radius: 50%;
	  cursor: pointer;
	  display: grid;
	  place-items: center;
	  box-shadow: 0 8px 16px rgba(0,0,0,.4);
	  transition: transform .15s ease, background .15s ease;
	}

	.gallery-btn:hover{
	  background: rgba(216,166,87,.25);
	  transform: translateY(-50%) scale(1.05);
	}

	.gallery-btn.left{ left: 6px; }
	.gallery-btn.right{ right: 6px; }