/* game-of-thrones.css -- loaded only by /game-of-thrones. Split out of fanpages.css. */

.got-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, #131920 0%, #0b0e13 48%, #05070a 100%);
}

.got-sky::before {                     /* map hatching, and a cold wind */
  content: ""; position: absolute; inset: -10%;
  background-image:
    repeating-linear-gradient(72deg, rgba(185,194,204,.045) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(-72deg, rgba(185,194,204,.035) 0 1px, transparent 1px 78px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 88%);
}

.got-sky > * { position: absolute; inset: 0; display: block; }

/* winter is coming, and then it does */
.got-snow {
  background-repeat: repeat;
  animation: got-fall linear infinite;
}

.got-snow--far {
  background-size: 300px 300px;
  background-image:
    radial-gradient(1.4px 1.4px at 30px 40px,   rgba(226,238,250,.55), transparent),
    radial-gradient(1.2px 1.2px at 140px 90px,  rgba(226,238,250,.45), transparent),
    radial-gradient(1.6px 1.6px at 230px 30px,  rgba(226,238,250,.5),  transparent),
    radial-gradient(1.2px 1.2px at 80px 190px,  rgba(226,238,250,.4),  transparent),
    radial-gradient(1.4px 1.4px at 200px 240px, rgba(226,238,250,.5),  transparent),
    radial-gradient(1.2px 1.2px at 270px 160px, rgba(226,238,250,.38), transparent);
  animation-duration: 26s; opacity: .55;
}

.got-snow--near {
  background-size: 420px 420px;
  background-image:
    radial-gradient(2.6px 2.6px at 60px 70px,   rgba(240,248,255,.75), transparent),
    radial-gradient(2.2px 2.2px at 220px 160px, rgba(240,248,255,.6),  transparent),
    radial-gradient(2.8px 2.8px at 350px 60px,  rgba(240,248,255,.7),  transparent),
    radial-gradient(2.2px 2.2px at 120px 320px, rgba(240,248,255,.55), transparent),
    radial-gradient(2.4px 2.4px at 300px 380px, rgba(240,248,255,.65), transparent);
  animation-duration: 15s; opacity: .5;
  filter: blur(.4px);
}

/* the Wall: seven hundred feet of ice across the north */
.got-wall {
  inset: 0 0 auto 0; height: 34%;
  background:
    linear-gradient(180deg, transparent 0 46%, rgba(150,190,220,.10) 46% 100%),
    repeating-linear-gradient(90deg, rgba(200,226,244,.05) 0 2px, transparent 2px 46px);
  mask-image: linear-gradient(180deg, transparent 0, #000 55%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%, #000 88%, transparent 100%);
}

/* Winterfell to the north, King's Landing to the south */
.got-skyline { inset: auto 0 0 0; height: 42%; opacity: .5; }

.got-skyline svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.gs-north { fill: #0b0f14; stroke: #8fa4b8; stroke-width: 2; stroke-linejoin: round; }

.gs-north path:nth-child(2) { fill: none; }

.gs-south { fill: #140a0a; stroke: #b8834a; stroke-width: 2; stroke-linejoin: round; }

.gs-south circle { fill: #1a0e0a; }

/* the hero: the map, with Ice laid out underneath it.
   NB the width has to be set via .fan-art--got .got-sword, not .got-sword:
   .fan-art-fig svg is (0,1,1) and would otherwise win and blow the sword up
   to full width, which squashes the map out of the row entirely. */
.fan-art--got .got-parch { width: 100%; }

.fan-art--got .got-sword { width: 100%; height: auto; margin-top: -0.2rem; }

.gsw-blade path { fill: #9fb0c0; stroke: #5f7182; stroke-width: 2.4; stroke-linejoin: round; }

.gsw-blade path:nth-child(2) { fill: none; stroke: #d8e4ee; stroke-width: 2; opacity: .5; }

.gsw-ripple { fill: none; stroke: #4a5b6b; stroke-width: 2; opacity: .8; }

.gsw-hilt { fill: #6f5a34; stroke: #c9a24a; stroke-width: 2.4; stroke-linejoin: round; }

.gsw-hilt circle { fill: #c9a24a; }

.fan-art--got .got-sword { filter: drop-shadow(0 0 14px rgba(180,205,230,.28)); }

.got-parch {
  position: relative; padding: 1.2rem; border: 1px solid var(--line); border-radius: 4px;
  background:
    repeating-linear-gradient(46deg, rgba(185,194,204,.04) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, rgba(20,26,34,.9), rgba(10,13,18,.9));
}

.got-parch svg { display: block; width: 100%; height: auto; color: #b9c2cc; }

.got-seat { cursor: default; }

.got-seat circle { transition: r .3s, fill .3s; }

.got-seat:hover circle { r: 5.4; fill: #fff; }

.got-seat text {
  font-family: "JetBrains Mono", monospace; font-size: 5.4px;
  letter-spacing: .4px; fill: rgba(220,232,244,.75);
}

.got-seat:hover text { fill: #fff; }