/* =========================================================
   VINTAGE JUNGLE THEME
   The three main colors are set from the Site Editor
   (they live in js/content.js). Everything else is derived.
   ========================================================= */
:root {
  --green: #1e4a32;
  --gold:  #c9a44c;
  --wood:  #6b4423;

  --green-deep:  color-mix(in srgb, var(--green) 35%, #050a07);
  --green-dark:  color-mix(in srgb, var(--green) 60%, #050a07);
  --green-light: color-mix(in srgb, var(--green) 70%, #9fc28a);
  --gold-light:  color-mix(in srgb, var(--gold) 65%, #fff4cf);
  --gold-dark:   color-mix(in srgb, var(--gold) 60%, #2a1a08);
  --wood-dark:   color-mix(in srgb, var(--wood) 55%, #120a04);
  --wood-light:  color-mix(in srgb, var(--wood) 70%, #d8a46a);
  --cream:       #efe3c4;
  --cream-dim:   #b9ad8e;
  --ink:         #33251a;

  --ar: 1.7778;           /* game aspect ratio, set from content.js */
  --chrome: 178px;        /* space used by header, bar and footer */

  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --serif: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  overflow-x: hidden;
  background-color: var(--green-deep);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in srgb, var(--green) 55%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
  background-attachment: fixed;
}

/* Film-grain overlay for an aged feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--gold-light); }

/* ---------------- Background jungle ---------------- */
.foliage { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.foliage span {
  position: absolute;
  background: var(--green-light);
  -webkit-mask: var(--shape) center bottom / contain no-repeat;
          mask: var(--shape) center bottom / contain no-repeat;
}
.foliage .f1, .foliage .f2 { display: none; }
/* Vines hanging from the top of the screen */
.foliage .f3,
.foliage .f4 { top: 0; -webkit-mask-position: left top; mask-position: left top; }
.foliage .f3 { --shape: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 560%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M41.8,-12.0 L41.1,-4.0 L41.0,4.0 L41.4,12.0 L42.4,20.0 L43.8,28.0 L45.8,36.0 L48.2,44.0 L51.0,52.0 L54.1,60.0 L57.4,68.0 L60.9,76.0 L64.4,84.0 L67.9,92.0 L71.4,100.0 L74.6,108.0 L77.6,116.0 L80.2,124.0 L82.4,132.0 L84.2,140.0 L85.5,148.0 L86.2,156.0 L86.4,164.0 L86.0,172.0 L85.1,180.0 L83.7,188.0 L81.8,196.0 L79.4,204.0 L76.7,212.0 L73.6,220.0 L70.3,228.0 L66.8,236.0 L63.3,244.0 L59.8,252.0 L56.3,260.0 L53.1,268.0 L50.1,276.0 L47.4,284.0 L45.1,292.0 L43.3,300.0 L42.0,308.0 L41.2,316.0 L41.0,324.0 L41.3,332.0 L42.1,340.0 L43.5,348.0 L45.4,356.0 L47.7,364.0 L50.4,372.0 L53.4,380.0 L56.7,388.0 L60.2,396.0 L63.7,404.0 L67.3,412.0 L70.7,420.0 L74.0,428.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2259.4%22 cy=%2219.0%22 rx=%2220.0%22 ry=%2211.0%22 transform=%22rotate%2823.7 59.4 19.0%29%22/%3E%3Cellipse cx=%2231.3%22 cy=%2241.6%22 rx=%2216.1%22 ry=%228.9%22 transform=%22rotate%28155.6 31.3 41.6%29%22/%3E%3Cellipse cx=%2269.5%22 cy=%2266.0%22 rx=%2217.2%22 ry=%229.4%22 transform=%22rotate%2844.6 69.5 66.0%29%22/%3E%3Cellipse cx=%2252.8%22 cy=%2288.5%22 rx=%2212.9%22 ry=%227.1%22 transform=%22rotate%28144.3 52.8 88.5%29%22/%3E%3Cellipse cx=%2286.8%22 cy=%22112.7%22 rx=%2213.6%22 ry=%227.5%22 transform=%22rotate%2836.1 86.8 112.7%29%22/%3E%3Cellipse cx=%2268.4%22 cy=%22137.5%22 rx=%2215.6%22 ry=%228.6%22 transform=%22rotate%28133.3 68.4 137.5%29%22/%3E%3Cellipse cx=%2297.7%22 cy=%22160.5%22 rx=%2212.8%22 ry=%227.0%22 transform=%22rotate%2829.7 97.7 160.5%29%22/%3E%3Cellipse cx=%2269.6%22 cy=%22186.0%22 rx=%2217.3%22 ry=%229.5%22 transform=%22rotate%28151.4 69.6 186.0%29%22/%3E%3Cellipse cx=%2290.1%22 cy=%22208.2%22 rx=%2211.9%22 ry=%226.5%22 transform=%22rotate%2842.1 90.1 208.2%29%22/%3E%3Cellipse cx=%2260.0%22 cy=%22232.0%22 rx=%2211.5%22 ry=%226.3%22 transform=%22rotate%28147.8 60.0 232.0%29%22/%3E%3Cellipse cx=%2269.8%22 cy=%22255.9%22 rx=%2211.1%22 ry=%226.1%22 transform=%22rotate%2823.0 69.8 255.9%29%22/%3E%3Cellipse cx=%2236.2%22 cy=%22281.4%22 rx=%2215.5%22 ry=%228.5%22 transform=%22rotate%28138.0 36.2 281.4%29%22/%3E%3Cellipse cx=%2253.3%22 cy=%22303.9%22 rx=%2211.1%22 ry=%226.1%22 transform=%22rotate%2846.6 53.3 303.9%29%22/%3E%3Cellipse cx=%2227.7%22 cy=%22329.2%22 rx=%2214.7%22 ry=%228.1%22 transform=%22rotate%28139.9 27.7 329.2%29%22/%3E%3Cellipse cx=%2256.9%22 cy=%22353.2%22 rx=%2214.9%22 ry=%228.2%22 transform=%22rotate%2835.9 56.9 353.2%29%22/%3E%3Cellipse cx=%2238.8%22 cy=%22376.5%22 rx=%2212.9%22 ry=%227.1%22 transform=%22rotate%28137.9 38.8 376.5%29%22/%3E%3Cellipse cx=%2272.8%22 cy=%22400.9%22 rx=%2214.0%22 ry=%227.7%22 transform=%22rotate%2839.6 72.8 400.9%29%22/%3E%3Cellipse cx=%2258.3%22 cy=%22424.8%22 rx=%2213.7%22 ry=%227.6%22 transform=%22rotate%28154.4 58.3 424.8%29%22/%3E%3Cellipse cx=%2274.0%22 cy=%22438.0%22 rx=%2210.0%22 ry=%2216.0%22 transform=%22rotate%280.0 74.0 438.0%29%22/%3E%3Cpath d=%22M228.8,-12.0 L230.0,-4.0 L231.1,4.0 L232.2,12.0 L233.1,20.0 L234.0,28.0 L234.8,36.0 L235.4,44.0 L235.9,52.0 L236.3,60.0 L236.5,68.0 L236.6,76.0 L236.6,84.0 L236.4,92.0 L236.1,100.0 L235.6,108.0 L235.0,116.0 L234.3,124.0 L233.5,132.0 L232.6,140.0 L231.6,148.0 L230.5,156.0 L229.3,164.0 L228.0,172.0 L226.8,180.0 L225.4,188.0 L224.1,196.0 L222.8,204.0 L221.5,212.0 L220.2,220.0 L218.9,228.0 L217.7,236.0 L216.6,244.0 L215.6,252.0 L214.6,260.0 L213.8,268.0 L213.0,276.0 L212.4,284.0 L211.9,292.0 L211.6,300.0 L211.4,308.0 L211.3,316.0 L211.4,324.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22245.7%22 cy=%2217.3%22 rx=%2215.0%22 ry=%228.3%22 transform=%22rotate%2837.5 245.7 17.3%29%22/%3E%3Cellipse cx=%22223.6%22 cy=%2240.3%22 rx=%2212.4%22 ry=%226.8%22 transform=%22rotate%28149.3 223.6 40.3%29%22/%3E%3Cellipse cx=%22249.4%22 cy=%2265.1%22 rx=%2214.6%22 ry=%228.0%22 transform=%22rotate%2830.4 249.4 65.1%29%22/%3E%3Cellipse cx=%22220.7%22 cy=%2290.2%22 rx=%2217.6%22 ry=%229.7%22 transform=%22rotate%28144.5 220.7 90.2%29%22/%3E%3Cellipse cx=%22247.9%22 cy=%22112.8%22 rx=%2213.6%22 ry=%227.5%22 transform=%22rotate%2834.5 247.9 112.8%29%22/%3E%3Cellipse cx=%22219.2%22 cy=%22137.6%22 rx=%2215.9%22 ry=%228.7%22 transform=%22rotate%28134.4 219.2 137.6%29%22/%3E%3Cellipse cx=%22246.0%22 cy=%22162.0%22 rx=%2217.2%22 ry=%229.5%22 transform=%22rotate%2823.5 246.0 162.0%29%22/%3E%3Cellipse cx=%22213.0%22 cy=%22185.4%22 rx=%2215.3%22 ry=%228.4%22 transform=%22rotate%28153.3 213.0 185.4%29%22/%3E%3Cellipse cx=%22232.0%22 cy=%22207.6%22 rx=%2210.3%22 ry=%225.6%22 transform=%22rotate%2841.9 232.0 207.6%29%22/%3E%3Cellipse cx=%22208.1%22 cy=%22232.2%22 rx=%2212.0%22 ry=%226.6%22 transform=%22rotate%28146.9 208.1 232.2%29%22/%3E%3Cellipse cx=%22224.2%22 cy=%22255.3%22 rx=%229.6%22 ry=%225.3%22 transform=%22rotate%2824.1 224.2 255.3%29%22/%3E%3Cellipse cx=%22203.9%22 cy=%22279.6%22 rx=%2210.2%22 ry=%225.6%22 transform=%22rotate%28155.9 203.9 279.6%29%22/%3E%3Cellipse cx=%22220.5%22 cy=%22303.5%22 rx=%229.9%22 ry=%225.5%22 transform=%22rotate%2841.1 220.5 303.5%29%22/%3E%3Cellipse cx=%22211.4%22 cy=%22334.0%22 rx=%2210.0%22 ry=%2216.0%22 transform=%22rotate%280.0 211.4 334.0%29%22/%3E%3Cpath d=%22M412.8,-12.0 L411.0,-4.0 L409.1,4.0 L407.4,12.0 L405.7,20.0 L404.1,28.0 L402.7,36.0 L401.4,44.0 L400.2,52.0 L399.2,60.0 L398.5,68.0 L397.9,76.0 L397.5,84.0 L397.4,92.0 L397.5,100.0 L397.7,108.0 L398.2,116.0 L398.9,124.0 L399.9,132.0 L400.9,140.0 L402.2,148.0 L403.6,156.0 L405.1,164.0 L406.8,172.0 L408.5,180.0 L410.3,188.0 L412.1,196.0 L414.0,204.0 L415.8,212.0 L417.6,220.0 L419.3,228.0 L420.9,236.0 L422.4,244.0 L423.8,252.0 L425.0,260.0 L426.1,268.0 L427.0,276.0 L427.6,284.0 L428.1,292.0 L428.4,300.0 L428.4,308.0 L428.2,316.0 L427.8,324.0 L427.2,332.0 L426.4,340.0 L425.4,348.0 L424.2,356.0 L422.9,364.0 L421.4,372.0 L419.8,380.0 L418.1,388.0 L416.3,396.0 L414.5,404.0 L412.7,412.0 L410.8,420.0 L409.0,428.0 L407.3,436.0 L405.6,444.0 L404.0,452.0 L402.6,460.0 L401.3,468.0 L400.1,476.0 L399.2,484.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22424.4%22 cy=%2218.6%22 rx=%2218.9%22 ry=%2210.4%22 transform=%22rotate%2825.6 424.4 18.6%29%22/%3E%3Cellipse cx=%22386.2%22 cy=%2242.4%22 rx=%2218.4%22 ry=%2210.1%22 transform=%22rotate%28152.1 386.2 42.4%29%22/%3E%3Cellipse cx=%22416.2%22 cy=%2266.6%22 rx=%2218.9%22 ry=%2210.4%22 transform=%22rotate%2823.9 416.2 66.6%29%22/%3E%3Cellipse cx=%22380.3%22 cy=%2290.7%22 rx=%2219.2%22 ry=%2210.6%22 transform=%22rotate%28135.2 380.3 90.7%29%22/%3E%3Cellipse cx=%22410.7%22 cy=%22113.0%22 rx=%2214.4%22 ry=%227.9%22 transform=%22rotate%2837.7 410.7 113.0%29%22/%3E%3Cellipse cx=%22383.4%22 cy=%22138.4%22 rx=%2218.3%22 ry=%2210.1%22 transform=%22rotate%28141.2 383.4 138.4%29%22/%3E%3Cellipse cx=%22419.8%22 cy=%22162.3%22 rx=%2218.0%22 ry=%229.9%22 transform=%22rotate%2836.1 419.8 162.3%29%22/%3E%3Cellipse cx=%22396.4%22 cy=%22184.7%22 rx=%2213.4%22 ry=%227.4%22 transform=%22rotate%28140.6 396.4 184.7%29%22/%3E%3Cellipse cx=%22425.0%22 cy=%22208.3%22 rx=%2212.3%22 ry=%226.7%22 transform=%22rotate%2824.9 425.0 208.3%29%22/%3E%3Cellipse cx=%22408.7%22 cy=%22232.1%22 rx=%2211.8%22 ry=%226.5%22 transform=%22rotate%28149.5 408.7 232.1%29%22/%3E%3Cellipse cx=%22439.2%22 cy=%22258.0%22 rx=%2217.1%22 ry=%229.4%22 transform=%22rotate%2826.9 439.2 258.0%29%22/%3E%3Cellipse cx=%22417.3%22 cy=%22279.7%22 rx=%2210.7%22 ry=%225.9%22 transform=%22rotate%28156.7 417.3 279.7%29%22/%3E%3Cellipse cx=%22440.5%22 cy=%22304.7%22 rx=%2213.5%22 ry=%227.4%22 transform=%22rotate%2832.7 440.5 304.7%29%22/%3E%3Cellipse cx=%22417.5%22 cy=%22328.0%22 rx=%2211.4%22 ry=%226.3%22 transform=%22rotate%28147.3 417.5 328.0%29%22/%3E%3Cellipse cx=%22438.6%22 cy=%22353.1%22 rx=%2214.7%22 ry=%228.1%22 transform=%22rotate%2833.9 438.6 353.1%29%22/%3E%3Cellipse cx=%22410.6%22 cy=%22376.2%22 rx=%2212.0%22 ry=%226.6%22 transform=%22rotate%28134.3 410.6 376.2%29%22/%3E%3Cellipse cx=%22429.4%22 cy=%22401.1%22 rx=%2214.6%22 ry=%228.0%22 transform=%22rotate%2823.8 429.4 401.1%29%22/%3E%3Cellipse cx=%22400.1%22 cy=%22424.2%22 rx=%2211.9%22 ry=%226.5%22 transform=%22rotate%28153.1 400.1 424.2%29%22/%3E%3Cellipse cx=%22414.2%22 cy=%22447.4%22 rx=%229.6%22 ry=%225.3%22 transform=%22rotate%2840.6 414.2 447.4%29%22/%3E%3Cellipse cx=%22388.9%22 cy=%22472.8%22 rx=%2213.7%22 ry=%227.6%22 transform=%22rotate%28148.1 388.9 472.8%29%22/%3E%3Cellipse cx=%22399.2%22 cy=%22494.0%22 rx=%2210.0%22 ry=%2216.0%22 transform=%22rotate%280.0 399.2 494.0%29%22/%3E%3Cpath d=%22M562.8,-12.0 L563.5,-4.0 L564.3,4.0 L565.4,12.0 L566.6,20.0 L567.9,28.0 L569.3,36.0 L570.9,44.0 L572.5,52.0 L574.2,60.0 L576.0,68.0 L577.7,76.0 L579.5,84.0 L581.3,92.0 L583.0,100.0 L584.7,108.0 L586.4,116.0 L587.9,124.0 L589.4,132.0 L590.7,140.0 L591.9,148.0 L592.9,156.0 L593.8,164.0 L594.5,172.0 L595.1,180.0 L595.4,188.0 L595.6,196.0 L595.6,204.0 L595.3,212.0 L595.0,220.0 L594.4,228.0 L593.6,236.0 L592.7,244.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22578.8%22 cy=%2217.2%22 rx=%2214.9%22 ry=%228.2%22 transform=%22rotate%2833.9 578.8 17.2%29%22/%3E%3Cellipse cx=%22551.6%22 cy=%2242.9%22 rx=%2219.7%22 ry=%2210.8%22 transform=%22rotate%28153.5 551.6 42.9%29%22/%3E%3Cellipse cx=%22591.1%22 cy=%2266.6%22 rx=%2218.8%22 ry=%2210.4%22 transform=%22rotate%2833.9 591.1 66.6%29%22/%3E%3Cellipse cx=%22566.2%22 cy=%2289.2%22 rx=%2214.8%22 ry=%228.1%22 transform=%22rotate%28150.5 566.2 89.2%29%22/%3E%3Cellipse cx=%22597.5%22 cy=%22113.0%22 rx=%2214.2%22 ry=%227.8%22 transform=%22rotate%2830.0 597.5 113.0%29%22/%3E%3Cellipse cx=%22577.5%22 cy=%22136.6%22 rx=%2213.1%22 ry=%227.2%22 transform=%22rotate%28136.5 577.5 136.6%29%22/%3E%3Cellipse cx=%22604.1%22 cy=%22160.4%22 rx=%2212.4%22 ry=%226.8%22 transform=%22rotate%2846.7 604.1 160.4%29%22/%3E%3Cellipse cx=%22581.2%22 cy=%22185.4%22 rx=%2215.4%22 ry=%228.5%22 transform=%22rotate%28148.0 581.2 185.4%29%22/%3E%3Cellipse cx=%22606.5%22 cy=%22208.2%22 rx=%2212.1%22 ry=%226.7%22 transform=%22rotate%2831.1 606.5 208.2%29%22/%3E%3Cellipse cx=%22586.0%22 cy=%22231.3%22 rx=%229.3%22 ry=%225.1%22 transform=%22rotate%28139.5 586.0 231.3%29%22/%3E%3Cellipse cx=%22592.7%22 cy=%22254.0%22 rx=%2210.0%22 ry=%2216.0%22 transform=%22rotate%280.0 592.7 254.0%29%22/%3E%3C/g%3E%3C/svg%3E"); width: 520px; height: 455px; left: 0; opacity: .15; }
.foliage .f4 { --shape: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 560 480%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M59.4,-12.0 L61.2,-4.0 L63.0,4.0 L64.7,12.0 L66.2,20.0 L67.6,28.0 L68.8,36.0 L69.8,44.0 L70.5,52.0 L70.9,60.0 L71.1,68.0 L71.0,76.0 L70.6,84.0 L70.0,92.0 L69.1,100.0 L67.9,108.0 L66.6,116.0 L65.0,124.0 L63.4,132.0 L61.6,140.0 L59.8,148.0 L57.9,156.0 L56.1,164.0 L54.4,172.0 L52.7,180.0 L51.2,188.0 L49.8,196.0 L48.7,204.0 L47.8,212.0 L47.2,220.0 L46.8,228.0 L46.7,236.0 L46.9,244.0 L47.3,252.0 L48.0,260.0 L49.0,268.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2279.5%22 cy=%2217.8%22 rx=%2216.5%22 ry=%229.1%22 transform=%22rotate%2844.6 79.5 17.8%29%22/%3E%3Cellipse cx=%2257.2%22 cy=%2240.5%22 rx=%2212.9%22 ry=%227.1%22 transform=%22rotate%28146.3 57.2 40.5%29%22/%3E%3Cellipse cx=%2285.7%22 cy=%2265.7%22 rx=%2216.4%22 ry=%229.0%22 transform=%22rotate%2824.0 85.7 65.7%29%22/%3E%3Cellipse cx=%2257.9%22 cy=%2289.0%22 rx=%2214.2%22 ry=%227.8%22 transform=%22rotate%28149.9 57.9 89.0%29%22/%3E%3Cellipse cx=%2280.7%22 cy=%22113.0%22 rx=%2214.2%22 ry=%227.8%22 transform=%22rotate%2840.4 80.7 113.0%29%22/%3E%3Cellipse cx=%2252.8%22 cy=%22136.1%22 rx=%2211.8%22 ry=%226.5%22 transform=%22rotate%28138.7 52.8 136.1%29%22/%3E%3Cellipse cx=%2267.9%22 cy=%22159.9%22 rx=%2211.1%22 ry=%226.1%22 transform=%22rotate%2835.2 67.9 159.9%29%22/%3E%3Cellipse cx=%2238.6%22 cy=%22185.5%22 rx=%2215.6%22 ry=%228.6%22 transform=%22rotate%28147.2 38.6 185.5%29%22/%3E%3Cellipse cx=%2261.4%22 cy=%22209.0%22 rx=%2214.2%22 ry=%227.8%22 transform=%22rotate%2832.2 61.4 209.0%29%22/%3E%3Cellipse cx=%2234.7%22 cy=%22232.7%22 rx=%2213.4%22 ry=%227.4%22 transform=%22rotate%28135.4 34.7 232.7%29%22/%3E%3Cellipse cx=%2256.7%22 cy=%22255.6%22 rx=%2210.4%22 ry=%225.7%22 transform=%22rotate%2839.2 56.7 255.6%29%22/%3E%3Cellipse cx=%2249.0%22 cy=%22278.0%22 rx=%2210.0%22 ry=%2216.0%22 transform=%22rotate%280.0 49.0 278.0%29%22/%3E%3Cpath d=%22M292.6,-12.0 L293.0,-4.0 L293.1,4.0 L293.2,12.0 L293.1,20.0 L292.8,28.0 L292.4,36.0 L291.9,44.0 L291.2,52.0 L290.4,60.0 L289.6,68.0 L288.6,76.0 L287.5,84.0 L286.3,92.0 L285.1,100.0 L283.9,108.0 L282.6,116.0 L281.3,124.0 L280.0,132.0 L278.8,140.0 L277.6,148.0 L276.4,156.0 L275.3,164.0 L274.3,172.0 L273.3,180.0 L272.5,188.0 L271.8,196.0 L271.3,204.0 L270.8,212.0 L270.5,220.0 L270.4,228.0 L270.4,236.0 L270.5,244.0 L270.8,252.0 L271.2,260.0 L271.8,268.0 L272.5,276.0 L273.3,284.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22306.5%22 cy=%2217.2%22 rx=%2214.8%22 ry=%228.2%22 transform=%22rotate%2842.4 306.5 17.2%29%22/%3E%3Cellipse cx=%22280.0%22 cy=%2240.8%22 rx=%2213.8%22 ry=%227.6%22 transform=%22rotate%28154.3 280.0 40.8%29%22/%3E%3Cellipse cx=%22307.0%22 cy=%2266.4%22 rx=%2218.4%22 ry=%2210.1%22 transform=%22rotate%2824.3 307.0 66.4%29%22/%3E%3Cellipse cx=%22274.7%22 cy=%2289.0%22 rx=%2214.3%22 ry=%227.8%22 transform=%22rotate%28144.8 274.7 89.0%29%22/%3E%3Cellipse cx=%22294.1%22 cy=%22112.0%22 rx=%2211.4%22 ry=%226.3%22 transform=%22rotate%2833.2 294.1 112.0%29%22/%3E%3Cellipse cx=%22264.8%22 cy=%22137.9%22 rx=%2216.9%22 ry=%229.3%22 transform=%22rotate%28135.7 264.8 137.9%29%22/%3E%3Cellipse cx=%22289.3%22 cy=%22161.0%22 rx=%2214.3%22 ry=%227.9%22 transform=%22rotate%2825.9 289.3 161.0%29%22/%3E%3Cellipse cx=%22261.0%22 cy=%22184.8%22 rx=%2213.7%22 ry=%227.6%22 transform=%22rotate%28154.5 261.0 184.8%29%22/%3E%3Cellipse cx=%22281.2%22 cy=%22207.8%22 rx=%2211.0%22 ry=%226.0%22 transform=%22rotate%2823.2 281.2 207.8%29%22/%3E%3Cellipse cx=%22261.5%22 cy=%22231.5%22 rx=%229.9%22 ry=%225.4%22 transform=%22rotate%28146.0 261.5 231.5%29%22/%3E%3Cellipse cx=%22279.0%22 cy=%22255.2%22 rx=%229.1%22 ry=%225.0%22 transform=%22rotate%2825.0 279.0 255.2%29%22/%3E%3Cellipse cx=%22262.3%22 cy=%22280.0%22 rx=%2211.3%22 ry=%226.2%22 transform=%22rotate%28155.1 262.3 280.0%29%22/%3E%3Cellipse cx=%22273.3%22 cy=%22294.0%22 rx=%2210.0%22 ry=%2216.0%22 transform=%22rotate%280.0 273.3 294.0%29%22/%3E%3Cpath d=%22M480.9,-12.0 L479.0,-4.0 L477.2,4.0 L475.5,12.0 L473.9,20.0 L472.5,28.0 L471.2,36.0 L470.1,44.0 L469.1,52.0 L468.4,60.0 L467.8,68.0 L467.5,76.0 L467.4,84.0 L467.5,92.0 L467.8,100.0 L468.3,108.0 L469.0,116.0 L469.9,124.0 L470.9,132.0 L472.2,140.0 L473.6,148.0 L475.2,156.0 L476.8,164.0 L478.6,172.0 L480.5,180.0 L482.5,188.0 L484.5,196.0 L486.6,204.0 L488.6,212.0 L490.7,220.0 L492.7,228.0 L494.7,236.0 L496.6,244.0 L498.4,252.0 L500.0,260.0 L501.6,268.0 L503.0,276.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22488.1%22 cy=%2216.9%22 rx=%2214.0%22 ry=%227.7%22 transform=%22rotate%2837.6 488.1 16.9%29%22/%3E%3Cellipse cx=%22453.6%22 cy=%2242.8%22 rx=%2219.5%22 ry=%2210.7%22 transform=%22rotate%28134.3 453.6 42.8%29%22/%3E%3Cellipse cx=%22482.7%22 cy=%2265.6%22 rx=%2216.0%22 ry=%228.8%22 transform=%22rotate%2837.6 482.7 65.6%29%22/%3E%3Cellipse cx=%22456.1%22 cy=%2288.4%22 rx=%2212.6%22 ry=%226.9%22 transform=%22rotate%28139.4 456.1 88.4%29%22/%3E%3Cellipse cx=%22484.5%22 cy=%22114.3%22 rx=%2218.0%22 ry=%229.9%22 transform=%22rotate%2847.0 484.5 114.3%29%22/%3E%3Cellipse cx=%22460.5%22 cy=%22136.1%22 rx=%2211.6%22 ry=%226.4%22 transform=%22rotate%28149.9 460.5 136.1%29%22/%3E%3Cellipse cx=%22490.0%22 cy=%22161.8%22 rx=%2216.5%22 ry=%229.1%22 transform=%22rotate%2828.7 490.0 161.8%29%22/%3E%3Cellipse cx=%22468.1%22 cy=%22184.8%22 rx=%2213.8%22 ry=%227.6%22 transform=%22rotate%28134.0 468.1 184.8%29%22/%3E%3Cellipse cx=%22497.2%22 cy=%22208.2%22 rx=%2211.9%22 ry=%226.5%22 transform=%22rotate%2839.2 497.2 208.2%29%22/%3E%3Cellipse cx=%22481.3%22 cy=%22232.4%22 rx=%2212.7%22 ry=%227.0%22 transform=%22rotate%28151.6 481.3 232.4%29%22/%3E%3Cellipse cx=%22506.8%22 cy=%22255.3%22 rx=%229.4%22 ry=%225.2%22 transform=%22rotate%2831.3 506.8 255.3%29%22/%3E%3Cellipse cx=%22503.0%22 cy=%22286.0%22 rx=%2210.0%22 ry=%2216.0%22 transform=%22rotate%280.0 503.0 286.0%29%22/%3E%3C/g%3E%3C/svg%3E"); width: 460px; height: 394px; right: 0; opacity: .13; transform: scaleX(-1); }

/* ---------------- Header & tabs ---------------- */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}
.site-header::after {          /* thin double gold rule */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}
.brand .logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .08em;
  color: var(--gold);
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.brand-tag {
  font-style: italic;
  font-size: 15px;
  color: var(--cream-dim);
  line-height: 1.2;
}

.tabs { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; }
.tabs a {
  display: block;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
  padding: 8px 12px;
  opacity: .75;
  transition: color .2s, opacity .2s;
}
.tabs a:hover { color: var(--gold-light); opacity: 1; }
.tabs a[aria-current="page"] {
  color: var(--gold);
  opacity: 1;
  background:
    linear-gradient(var(--gold), var(--gold)) center bottom 3px / 18px 1px no-repeat;
}

/* ---------------- Main ---------------- */
main {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 16px 10px;
}

/* ---------------- Thin gold frame (shared) ---------------- */
.frame {
  position: relative;
  padding: 4px;
  border-radius: 2px;
  background: linear-gradient(135deg,
    var(--gold-light) 0%, var(--gold) 20%, var(--gold-dark) 42%,
    var(--gold-light) 60%, var(--gold) 78%, var(--gold-dark) 100%);
  box-shadow:
    0 22px 55px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.4),
    0 0 40px color-mix(in srgb, var(--gold) 12%, transparent);
}
.fillet {                       /* dark hairline gap inside the gold */
  position: relative;
  padding: 2px;
  background: #0a0f0b;
}
.corner {
  position: absolute;
  width: 38px; height: 38px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%0A%3Cpath d='M0 0 H62 V6 H6 V62 H0 Z'/%3E%0A%3Cpath d='M12 12 H40 V15 H15 V40 H12 Z'/%3E%0A%3Ccircle cx='13.5' cy='13.5' r='5'/%3E%0A%3Cpath d='M22 22 C 40 22 52 30 56 44 C 44 40 32 34 22 22 Z'/%3E%0A%3Cpath d='M22 22 C 22 40 30 52 44 56 C 40 44 34 32 22 22 Z'/%3E%0A%3Cpath d='M66 3 L74 3 L70 9 Z'/%3E%3Cpath d='M3 66 L3 74 L9 70 Z'/%3E%0A%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%0A%3Cpath d='M0 0 H62 V6 H6 V62 H0 Z'/%3E%0A%3Cpath d='M12 12 H40 V15 H15 V40 H12 Z'/%3E%0A%3Ccircle cx='13.5' cy='13.5' r='5'/%3E%0A%3Cpath d='M22 22 C 40 22 52 30 56 44 C 44 40 32 34 22 22 Z'/%3E%0A%3Cpath d='M22 22 C 22 40 30 52 44 56 C 40 44 34 32 22 22 Z'/%3E%0A%3Cpath d='M66 3 L74 3 L70 9 Z'/%3E%3Cpath d='M3 66 L3 74 L9 70 Z'/%3E%0A%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.corner.tl { top: -11px; left: -11px; }
.corner.tr { top: -11px; right: -11px; transform: scaleX(-1); }
.corner.bl { bottom: -11px; left: -11px; transform: scaleY(-1); }
.corner.br { bottom: -11px; right: -11px; transform: scale(-1,-1); }

/* ---------------- Game stage ---------------- */
.stage {
  width: min(100%, 1720px, calc((100vh - var(--chrome)) * var(--ar)));
  width: min(100%, 1720px, calc((100dvh - var(--chrome)) * var(--ar)));
  min-width: min(100%, 320px);
}
.screen {
  position: relative;
  aspect-ratio: var(--ar);
  width: 100%;
  background: #000;
  overflow: hidden;
}
.screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Cover screen shown before the game starts */
.cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-deep);
}
.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55) 100%);
}
.cover .btn-play { position: relative; z-index: 1; }

.game-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
}
.game-bar .btn { margin-left: auto; }   /* stays on the right even with no hint */
.hint {
  font-style: italic;
  font-size: 16px;
  color: var(--cream-dim);
}

/* Brass plaque buttons */
.btn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #2b1d0c;
  padding: 9px 16px;
  border: 1px solid var(--gold-dark);
  border-radius: 2px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transition: filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-play {
  font-size: clamp(13px, 1.6vw, 18px);
  padding: .9em 2.2em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(0,0,0,.35), 0 0 0 5px var(--gold-dark), 0 10px 30px rgba(0,0,0,.6);
}

/* ---------------- Fullscreen fallback (iPhone) ---------------- */
body.is-fullscreen { overflow: hidden; }
.screen.pseudo-fs {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
}
.exit-fs {
  display: none;
  position: fixed;
  z-index: 300;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
}
body.is-fullscreen .exit-fs { display: block; }
.exit-fs {
  font-size: 9px;
  padding: 5px 9px;
  opacity: .5;
  transition: opacity .2s;
}
.exit-fs:hover, .exit-fs:focus-visible, .exit-fs:active { opacity: 1; }

/* While the game is fullscreen, hide all site UI */
body.is-fullscreen .site-header,
body.is-fullscreen .site-footer,
body.is-fullscreen .foliage,
body.is-fullscreen .game-bar,
body.is-fullscreen .corner { display: none !important; }
body.is-fullscreen::after { display: none; }
body.is-fullscreen main { z-index: 200; }
.screen.pseudo-fs { background: #000; }

/* Real fullscreen (desktop, Android): fill the whole screen */
.screen:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; background: #000; }
.screen:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; background: #000; }

/* Fullscreen: the game gets the whole screen */
.screen.pseudo-fs,
.screen:fullscreen,
.screen:-webkit-full-screen {
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 18%, transparent 82%, rgba(0,0,0,.55)),
    radial-gradient(ellipse at center, var(--green-dark) 0%, var(--green-deep) 55%, #040806 100%);
}


/* Upright phone in fullscreen with a widescreen game: suggest turning it */
@media (orientation: portrait) {
  html[data-wide] .screen.pseudo-fs::after,
  html[data-wide] .screen:fullscreen::after {
    content: "\21BB  Turn your phone sideways for a bigger view";
    position: absolute;
    left: 16px; right: 16px;
    bottom: max(28px, env(safe-area-inset-bottom));
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--cream-dim);
    pointer-events: none;
  }
}

/* ---------------- Content pages (parchment) ---------------- */
.page { width: 100%; max-width: 860px; }
.parchment {
  color: var(--ink);
  padding: 44px 52px;
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(ellipse at center, transparent 55%, rgba(120,85,40,.28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .15  0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.parchment h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: .08em;
  text-align: center;
  color: var(--green-dark);
  line-height: 1.25;
}
.parchment h1::after {          /* ornamental divider */
  content: "";
  display: block;
  width: 220px;
  max-width: 70%;
  height: 12px;
  margin: 14px auto 26px;
  background:
    linear-gradient(var(--gold-dark), var(--gold-dark)) left center / 42% 1px no-repeat,
    linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 42% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0 L18 6 L12 12 L6 6 Z' fill='%23a07f30'/%3E%3C/svg%3E") center / 24px 12px no-repeat;
}
.parchment h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wood-dark);
  margin: 28px 0 8px;
}
.parchment p { margin-bottom: 14px; }
.parchment ul { list-style: none; margin: 0 0 14px; }
.parchment li { padding-left: 26px; position: relative; margin-bottom: 4px; }
.parchment li::before {
  content: "❧";
  position: absolute;
  left: 0;
  color: var(--gold-dark);
}
.parchment a { color: var(--green-dark); text-decoration-color: var(--gold-dark); text-underline-offset: 3px; }
.parchment a:hover { color: var(--wood-dark); }

.about-photo {
  margin: 4px 0 22px;
  border: 6px solid var(--wood-dark);
  outline: 1px solid var(--gold-dark);
  outline-offset: -3px;
  box-shadow: 0 6px 18px rgba(60,40,15,.35);
}
.about-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.log-entry { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed rgba(120,85,40,.35); }
.log-entry:last-child { border-bottom: 0; margin-bottom: 0; }
.log-date { font-family: var(--display); font-size: 12px; letter-spacing: .16em; color: var(--gold-dark); }
.log-entry h2 { margin-top: 2px; }

.link-list li { font-size: 22px; }

/* ---------------- Age check page ---------------- */
.gate { width: 100%; max-width: 560px; }
.gate-card {
  text-align: center;
  padding: 42px 40px 38px;
  color: var(--cream);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--green) 70%, transparent), transparent 75%),
    var(--green-deep);
}
.gate-logo { width: 76px; height: 76px; margin: 0 auto 12px; object-fit: contain; }
.gate-title {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.gate-heading {
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: .05em;
  line-height: 1.3;
  color: var(--cream);
}
.gate-heading::after {
  content: "";
  display: block;
  width: 200px;
  max-width: 70%;
  height: 12px;
  margin: 14px auto 0;
  background:
    linear-gradient(var(--gold-dark), var(--gold-dark)) left center / 42% 1px no-repeat,
    linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 42% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0 L18 6 L12 12 L6 6 Z' fill='%23c9a44c'/%3E%3C/svg%3E") center / 24px 12px no-repeat;
}
.gate-sub { font-style: italic; color: var(--cream-dim); margin-top: 14px; }
#gateForm { margin-top: 24px; }
.dob {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 10px;
  margin-bottom: 20px;
}
.dob select {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--cream);
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--gold-dark);
  border-radius: 2px;
  cursor: pointer;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a44c' stroke-width='1.6'/%3E%3C/svg%3E") right 11px center / 12px 8px no-repeat,
    rgba(0,0,0,.35);
}
.dob select:hover { border-color: var(--gold); }
.dob select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.dob select option { color: #1d150a; background: #f4ecd8; }
.gate-error {
  font-style: italic;
  color: #f2c09a;
  margin: -6px 0 16px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------- Footer ---------------- */
.site-footer {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 10px 16px 14px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 55%, transparent);
}

/* ---------------- Small screens ---------------- */
@media (max-width: 760px) {
  body { font-size: 18px; }
  .site-header {
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 8px;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  .brand { justify-content: center; }
  .brand .logo { width: 32px; height: 32px; }
  .brand-title { font-size: 16px; }
  .brand-tag { display: none; }
  .tabs { justify-content: center; }
  .tabs a { padding: 12px 10px; font-size: 10px; }   /* comfy tap targets */
  main { padding: 26px 10px 12px; }
  .frame { padding: 3px; }
  .corner { width: 28px; height: 28px; }
  .corner.tl, .corner.tr { top: -8px; }
  .corner.bl, .corner.br { bottom: -8px; }
  .corner.tl, .corner.bl { left: -8px; }
  .corner.tr, .corner.br { right: -8px; }
  .game-bar { justify-content: center; }
  .game-bar .btn { margin: 0 auto; }
  .hint { display: none; }
  .btn { padding: 13px 18px; }
  .parchment { padding: 30px 20px; }
  .parchment h1 { font-size: 22px; }
  .foliage .f3 { width: 280px; height: 245px; opacity: .1; }
  .foliage .f4 { display: none; }
  .gate-card { padding: 32px 18px 28px; }
  .gate-heading { font-size: 20px; }
  .dob { gap: 6px; }
  .dob select { font-size: 17px; padding: 11px 24px 11px 9px; background-position: right 8px center, 0 0; }
    }

/* Phone held sideways: give the game almost the whole screen */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --chrome: 106px; }
  .site-header { flex-direction: row; padding: 4px 16px; }
  .brand-tag { display: none; }
  .brand .logo { width: 26px; height: 26px; }
  .tabs a { padding: 8px; }
  main { padding: 8px 12px 6px; }
  .frame { padding: 3px; }
  .corner { width: 24px; height: 24px; }
  .game-bar { margin-top: 6px; }
  .btn { padding: 7px 12px; }
  .site-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}