/* V0.12 riverside pocha environment: background, depth, lighting and props. */
.night{
  background-color:#061225;
  background-image:url("assets/art-v012/environment-river-moon-v5.png");
  background-repeat:no-repeat;
  background-size:1600px auto;
  background-position:center -210px;
}
.night::before{
  content:"";
  position:absolute;
  z-index:2;
  left:218px;
  top:248px;
  width:82px;
  height:130px;
  opacity:.55;
  transform:perspective(150px) rotateX(54deg);
  transform-origin:50% 0;
  background:repeating-linear-gradient(180deg,#ffe49eaa 0 4px,transparent 4px 12px);
  clip-path:polygon(33% 0,67% 0,100% 100%,0 100%);
  filter:blur(1px) drop-shadow(0 0 12px #ffd98288);
}
.night::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#02071155 0 9%,transparent 25% 59%,#160a0755 78%),radial-gradient(ellipse at 50% 47%,transparent 40%,#02050b6f 100%);
}
.stars{z-index:1;opacity:.18;background-size:117px 83px}
.city{display:none}
.moon{
  z-index:4;
  left:205px;
  top:163px;
  width:98px;
  height:98px;
  background:radial-gradient(circle at 38% 34%,#fffbe6 0 16%,#ffe39a 42%,#efb94f 73%,#bf7627 100%);
  border:2px solid #fff4bd77;
  box-shadow:0 0 18px #fff5c9cc,0 0 52px #ffd36fbb,0 0 95px #ffad4866;
}
.moon::after{
  content:"";
  position:absolute;
  inset:13px;
  border-radius:50%;
  opacity:.14;
  background:radial-gradient(ellipse at 24% 64%,#a75f26 0 5px,transparent 12px),radial-gradient(ellipse at 72% 21%,#ad672b 0 7px,transparent 15px),radial-gradient(ellipse at 76% 77%,#a45e25 0 4px,transparent 10px),radial-gradient(ellipse at 43% 31%,#9f5821 0 3px,transparent 8px);
}

.stall{pointer-events:none}
.roof{
  height:112px;
  background:linear-gradient(180deg,#c54a31 0,#9d2e20 38%,#651a13 100%);
  border-bottom:5px solid #3b130f;
  box-shadow:inset 0 -12px 19px #3b100b66,inset 0 3px #f88c674d;
}
.roof::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  background:repeating-linear-gradient(105deg,transparent 0 76px,#ffb08b33 78px 81px,transparent 83px 156px);
}
.roof::after{
  content:"";
  position:absolute;
  left:52px;
  right:38px;
  bottom:-14px;
  height:16px;
  background:repeating-conic-gradient(from 45deg at 50% 0,#f0b05b 0 25%,#9e301f 0 50%,transparent 0 100%) 0 0/30px 18px;
  filter:drop-shadow(0 3px 2px #0008);
}
.lamps{
  left:375px;
  right:88px;
  top:80px;
  height:66px;
  background:
    radial-gradient(ellipse 16px 21px at 3% 49%,#fff4b8 0 37%,#f18a38 43% 60%,#702415 64%,transparent 68%),
    radial-gradient(ellipse 16px 21px at 25% 49%,#fff4b8 0 37%,#f18a38 43% 60%,#702415 64%,transparent 68%),
    radial-gradient(ellipse 16px 21px at 47% 49%,#fff4b8 0 37%,#f18a38 43% 60%,#702415 64%,transparent 68%),
    radial-gradient(ellipse 16px 21px at 69% 49%,#fff4b8 0 37%,#f18a38 43% 60%,#702415 64%,transparent 68%),
    radial-gradient(ellipse 16px 21px at 91% 49%,#fff4b8 0 37%,#f18a38 43% 60%,#702415 64%,transparent 68%);
  filter:drop-shadow(0 0 9px #ff9a45) drop-shadow(0 0 24px #ffae5a99);
}
.lamps::before{
  content:"";
  position:absolute;
  left:3%;right:9%;top:-13px;height:24px;
  border-top:2px solid #24100bcc;
  border-radius:50%;
}
.lamps::after{
  content:"";
  position:absolute;
  inset:-10px -20px -55px;
  opacity:.26;
  background:radial-gradient(ellipse at 3% 20%,#ffb45b 0,transparent 18%),radial-gradient(ellipse at 25% 20%,#ffb45b 0,transparent 18%),radial-gradient(ellipse at 47% 20%,#ffb45b 0,transparent 18%),radial-gradient(ellipse at 69% 20%,#ffb45b 0,transparent 18%),radial-gradient(ellipse at 91% 20%,#ffb45b 0,transparent 18%);
}

.backwall{
  z-index:4;
  left:140px;
  right:0;
  top:195px;
  height:62px;
  border-top:5px solid #4a2115;
  border-bottom:4px solid #34140d;
  background:linear-gradient(180deg,#b07144 0 8%,#724127 11% 49%,#4f291b 52% 100%);
  box-shadow:0 12px 22px #0007,inset 0 3px #e2a66d,inset 0 -8px 14px #1f0c0866;
}
.backwall::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.34;
  background:repeating-linear-gradient(92deg,transparent 0 95px,#2c130d 97px 100px,transparent 102px 188px),linear-gradient(180deg,transparent,#180a0755);
}
.service-floor{
  position:absolute;
  z-index:3;
  left:36px;
  right:0;
  top:257px;
  height:193px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 100%,#e58c4333 0,transparent 44%),
    repeating-linear-gradient(90deg,transparent 0 152px,#2a110b55 154px 157px,transparent 159px 307px),
    repeating-linear-gradient(180deg,#5c3021 0 44px,#47251a 45px 47px,#6b3825 48px 91px);
  box-shadow:inset 0 22px 38px #12070599,inset 0 -20px 35px #12070599;
  clip-path:polygon(6.5% 0,100% 0,100% 100%,0 100%);
}
.service-floor::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background:linear-gradient(102deg,transparent 10%,#ffc27455 24%,transparent 39%),linear-gradient(78deg,transparent 59%,#ffc27444 71%,transparent 84%);
}
.service-table{
  position:absolute;
  z-index:15;
  left:142px;
  right:0;
  top:190px;
  height:80px;
  border-radius:5px 0 0 7px;
  background:linear-gradient(180deg,#d18a55 0 7px,#8b4e2e 8px 25px,#62331f 27px 100%);
  border-top:4px solid #f1b272;
  border-bottom:6px solid #35150e;
  box-shadow:0 18px 25px #12070499,inset 0 -16px 22px #29100866;
}
.service-table::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  background:repeating-linear-gradient(92deg,transparent 0 128px,#34150d 130px 133px,transparent 135px 254px),linear-gradient(180deg,#ffffff22,transparent 22%);
}
.service-table::after{
  content:"";
  position:absolute;
  left:4%;right:3%;bottom:-12px;height:16px;
  border-radius:50%;
  background:#120604aa;
  filter:blur(7px);
}
.table-decor{
  position:absolute;
  z-index:17;
  top:158px;
  width:74px;
  height:44px;
  border-radius:4px 4px 9px 9px;
  background:linear-gradient(180deg,#f4e2bd 0 13px,#c99058 14px 100%);
  border:3px solid #56301e;
  box-shadow:0 8px 9px #0009;
}
.table-decor::before{
  content:"";
  position:absolute;
  left:8px;
  bottom:28px;
  width:13px;
  height:34px;
  border-radius:7px 7px 4px 4px;
  background:linear-gradient(90deg,#7a1d16,#e34d31 45%,#92271b);
  border:2px solid #41150f;
  box-shadow:19px 6px 0 -1px #e1a53f,38px -3px 0 -1px #b96a34;
}
.table-decor::after{
  content:"";
  position:absolute;
  left:11px;
  right:11px;
  top:5px;
  height:7px;
  border-radius:50%;
  background:#fff9e8;
  box-shadow:0 -8px 0 -2px #fff9e8;
}
.decor-left{left:505px}
.decor-right{right:48px;transform:scale(.9)}
.counter{
  z-index:6;
  background:linear-gradient(180deg,#bd7747 0 7px,#7a4329 8px 23px,#4a281c 24px 100%);
  border-top:3px solid #e5a46a;
  box-shadow:0 -15px 35px #000a,inset 0 5px #f2bd8144,inset 0 -18px 26px #190907aa;
}
.counter::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  background:repeating-linear-gradient(92deg,transparent 0 118px,#2a110c 120px 123px,transparent 125px 238px),linear-gradient(180deg,transparent,#19090666);
}

/* Keep the environment decorative and the game hit targets untouched. */
.night,.night *,.stall,.stall *{pointer-events:none}