/*...........................................................

	variables

..........................*/

:root{
   --grey: #a6b7da;
	--text-shadow-color: 90deg 10% 29%;

   --size: 5svw;
   --height: calc(var(--size) / 2 + 0.5em);
   --curve-height: calc(var(--size) + 0.5em);
   --curve-radius: calc(var(--size) / 4);

   --popup-width: calc(100svw - 8 * var(--gap) - 1em);
   --popup-height: calc(var(--popup-width) * 0.5 - var(--gap));

   --ratio: 8;
   --battle-length: calc(var(--size) * var(--ratio));
   --cont-length: calc(var(--size) * var(--ratio) * 2.88);
   --cont-1: calc(var(--cont-length) / 4.75);
   --cont-2: calc(var(--cont-length) - var(--cont-1));

	--life-saving-drop-shadow:
		drop-shadow(2.8px 2.8px 1.1px rgba(0, 0, 0, 0.07))
		drop-shadow(4.3px 4.3px 2.8px rgba(0, 0, 0, 0.05));
	--simple-text-shadow:
		drop-shadow(0.033em 0.025em 0.02em rgb(0 0 0 / 0.14))
		drop-shadow(0.04em 0.03em 0.03em rgb(0 0 0 / 0.18));
}

/*...........................................................

	pop up disclaimer box

..........................*/

#disclaimer:target{
   display: block;
}

#disclaimer{
   display: none;
   position: fixed;
      top: var(--gap);
      left: var(--gap);
   z-index: 9999999999;
   height: calc(100svh - 0.75em - 2 * var(--gap));
   width: calc(100svw - 2 * var(--gap));
}

#disclaimer > div{
   display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
   text-align: center;
}

/*...........................................................

	basic styling

..........................*/

body{
   margin: var(--gap);
   margin-top: 5svw;
   min-height: 60svh;
   box-sizing: border-box;
   /*
   background-image: url("/background/gg13a.png"), url("/background/43.gif");
      background-size: auto 5svh, auto;
      background-repeat: space repeat-y, repeat;
   */
}

#s-m-t-tooltip{
   min-width: max-content;
}

footer{
   position: fixed;
      bottom: 0;
      left: calc(50svw - 31ch / 2);
}

/*.............................

	   shadows

..........................*/

main section{
   filter: var(--drop-shadow-medium);
}

.line span, #horror span{
   filter: var(--simple-text-shadow);
}

footer{
   filter: var(--drop-shadow-low);
}

.point,
.sticker{
   filter: var(--life-saving-drop-shadow);
}

:is(.point, .sticker):hover,
:is(.point, .sticker):focus{
   filter: var(--life-saving-drop-shadow) brightness(1.05) saturate(1.05);
}

:is(.point, .sticker),
:is(.point, .sticker):hover,
:is(.point, .sticker):focus{
   transition: filter .2s ease-out;
}

#snooze{
   box-shadow: var(--life-saving-box-shadow);
}

/*.............................

	   lines

..........................*/

.line{
   height: var(--height);
   width: auto;
   padding: 0 1.5em;
   padding-top: 0.25ch;
   box-sizing: border-box;
   display: flex;
      justify-content: center;
      align-items: center;
   background-color: var(--blue);
   border: var(--border-level-2);
   border-left: 0;
   border-right: 0;
   z-index: 5;
}

.line.vertical{
   width: var(--height);
   height: auto;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   letter-spacing: 0.12ch;
   padding: 0.5em 1em;
   align-self: stretch;
   transform: translateY(-0.17svw);
   border: var(--border-level-2);
   border-top: 0;
   border-bottom: 0;
}

.line span, #horror span{
   text-shadow: var(--text-shadow-white);
   font-weight: bold;
}

/*.............................

	points and stickers

..........................*/

.point{
   display: block;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.sticker{
   --size: 9.6svw;
   transform: translateY(-0.25ch);
}

.point, .sticker{
   width: var(--size);
   height: var(--size);
   z-index: 9;
}

/*...........................................................

	   connecting curves

..........................*/

.curve{
   display: block;
   width: var(--height);
   height: var(--curve-height);
   background-color: var(--aqua);
   box-sizing: border-box;
   border: var(--border-level-2);
}

.curve.vertical{
   width: var(--curve-height);
   height: var(--height);
   align-self: end;
}

/*.............................

	   curve left!!!

..........................*/

.curve.left{
   justify-self: start;
}

.curve.top.left{
   border-top-right-radius: var(--curve-radius);
}

.curve.bottom.left{
   border-bottom-right-radius: var(--curve-radius);
}

.curve.top.left + .line, 
.curve.top.left + .line + .point{
   transform: translateY(calc(var(--size) * -0.25));
}

.curve.bottom.left + .line, 
.curve.bottom.left + .line + .point{
   transform: translateY(calc(var(--size) * 0.25));
}

/*.............................

	   curve right!!!

..........................*/

.curve.right{
   justify-self: center;
}

.curve.top.right{
   border-top-left-radius: var(--curve-radius);
}

.curve.bottom.right{
   border-bottom-left-radius: var(--curve-radius);
}

.curve.top.right + .line, 
.curve.top.right + .line + .point{
   transform: translate(calc(var(--size) * -0.21), calc(var(--size) * -0.25));
}

.curve.bottom.right + .line, 
.curve.bottom.right + .line + .point{
   transform: translate(calc(var(--size) * -0.21), calc(var(--size) * 0.25));
}

/*...........................................................

	sections contain various grids........pray for me

..........................*/

main section{
   position: absolute;
   display: grid;
   grid-auto-flow: column;
      justify-content: start;
      align-items: center;
}

main > .point{
   position: absolute;
}

/*...........................

	the main line the longest one

..........................*/

#mainline{
   position: static;
   /* margin-top: 5svw; */
   grid-template-columns: [point-1] var(--size) [battle] var(--battle-length) [point-2] var(--size) [cont-1] var(--cont-1) [point-3] var(--size) [cont-2] var(--cont-2) [point-4] var(--size);
   grid-template-rows: repeat(2, var(--size));
}

/* first row */

#ut, #battle, #dust, #cont, #end, #mainline .padding{
   grid-row: 1;
}

#ut{ /* point */
	background-image: url("/stickers/yummy/yellow/M10_B.png");
   transform: scale(1.33) translate(1.75ch, -0.5ch);
}

#battle{ /* line */
   width: auto;
   background: var(--yellow);
   transform: translateX(1ch);
   background: linear-gradient(90deg, var(--yellow) 70%, var(--red) 95%);
}

#battle .sticker{
   --size: 7svw;
   transform: translateY(-2.5ch);
   margin-left: calc(var(--size) / -4);
   margin-right: 0.5svw;
}

#dust{ /* point */
   background-image: url("/stickers/dotty/3_autumn/B15_A.png");
   transform: scale(1.2);
}

#dust + .line{
   transform: translateX(-1ch);
}

#cont{ /* line */
   padding: 0 calc(1em + 1.5ch * var(--ratio));
   justify-content: space-between;
   background: linear-gradient(90deg, var(--purple) 20%, var(--pink) calc(50%), var(--blue) 90%);
   grid-column-start: cont-1;
   grid-column-end: point-4;
}

#end{ /* point */
   background-image: url("/stickers/dotty/1_spring/B04_A.png");
   transform: scale(1.66) translate(-1ch, -1ch);
}

/*..................

	second row

.................*/

#amnesia,
#memory,
#mainline .curve{
   grid-row: 2;
}

#mainline .curve{
   grid-column: point-2;
   background: var(--purple);
}

#memory{
   grid-column: cont-1;
   background: linear-gradient(90deg, var(--purple) 0%, var(--grey) 20%);
}

#amnesia{
   background-image: url("/stickers/cutie/1_spring/L18_A.png");
   grid-column: point-3;
   transform: scale(1.48) translate(-3.5ch, 1ch);
}

/*..................................................

	glitch diversion - domestic hell

...................................................*/

#cluster{
      top: 17.5svw;
      left: 19svw;
   grid-template-rows: repeat(4, var(--size));
   grid-template-columns: var(--size) auto var(--size);
}

#cluster .curve,
#mimo{
   grid-column: 1;
}

#rehab, 
#submit, 
#break,
#shenanigans{ /* line */
   grid-column: 2;
   width: calc(var(--size) * 3.5);
}

#cluster .curve.top, 
#rehab{ /* line */
   background-color: var(--blue);
}

#submit{ /* line */
   background-color: var(--green);
   width: calc(var(--size) * 4.5);
   margin-left: -0.2ch;
}

#cluster .curve.bottom.right, 
#break{ /* line */
   background-color: var(--red);
}

#snowdin, 
#stockholm, 
#seppuku,
#cluster .curve.bottom.left{ /* line */
   grid-column: 3;
   margin-left: calc(var(--size) * -1);
}

/*...........................

	points auahghg wahhh

..........................*/

#hell{ /* point */
   background-image: url("/stickers/dotty/1_spring/C25_A.png");
   grid-column: 1;
   grid-row: 2;
   transform: scale(1.55) translate(-0.1ch, -1ch);
}

#snowdin{ /* point */
   background-image: url("/stickers/cutie/4_winter/E05_A.png");
   transform: scale(1.33) translate(calc(var(--size) * -0.25), calc(var(--size) * -0.36));
}

#stockholm{ /* point */
   background-image: url("/stickers/cutie/2_summer/C14_A.png");
   grid-row: 2;
   transform: scale(1.1) translate(2ch, -0.1ch);
}

#seppuku{ /* point */
   background-image: url("/stickers/cutie/3_autumn/F02_A.png");
   grid-row: 3;
   transform: scale(1.22) translate(calc(var(--size) * -0.19), calc(var(--size) * 0.08));
}

/*................................

	mimo's playhouse

..........................*/

#shenanigans, 
#mimo, 
#cluster .curve.bottom.left{
   grid-row: 4;
}

#shenanigans, 
#cluster .curve.bottom.left{
   background: var(--orange);
}

#cluster .curve.bottom.left{
   grid-column: 3;
}

#shenanigans{
   --plus: calc(100% / 4);
   width: calc(var(--size) * 6);
   margin-left: calc(var(--size) * -1.5);
   grid-column-end: 3;
   grid-column-start: 1;
   background:
      linear-gradient(270deg,
      var(--orange) 0%,
      var(--yellow) 24%,
      var(--green) calc(25% + (var(--plus) * 1.3)),
      var(--aqua) calc(25% + (var(--plus) * 2.5)),
      var(--blue) calc(25% + (var(--plus) * 3))
      );
}

#mimo{ /* point */
   background-image: url("/stickers/yummy/orange/A04_A.png");
   margin-left: calc(var(--size) * -2.5);
   margin-top: 2.5ch;
   transform: scale(1.5) translateY(-0.3ch);
}

/*..................................................

	   FARMTALE!!!!!!!! BOKUMONO BOKUJO AHAHAHHH

...................................................*/

#farmtale{
      top: 24svw;
      left: 77svw;
   grid-template-columns: var(--size) calc(var(--cont-1) / 1.66) var(--size);
}

/* columns */

#bokumono, 
#farmtale .curve{
   grid-column: 1;
}

#farmtale .line{
   grid-column: 2;
}

#remember,
#forget{
   grid-column: 3;
}

/* rows */

#love, #remember{
   grid-row: 1;
}

#forget,
#loss,
#farmtale .curve.bottom{
   grid-row: 3;
   margin-top: -0.6ch;
}

:is(#love, #loss) span{
   transform: translateX(-1ch);
}

/* colors */

#love,
#farmtale .curve.top{
   background: var(--yellow);
}

#loss,
#farmtale .curve.bottom{
   background-color: var(--green);
}

/* defining images */

#bokumono{
   grid-row: 2;
   transform: scale(1.5) translateY(-0.6ch);
   background-image: url("/stickers/yummy/yellow/A02_A.png");
}

#remember{
   transform: translate(calc(var(--size) * -0.78), calc(var(--size) * -0.3));
   background-image: url("/stickers/cutie/3_autumn/T17_A.png");
}

#forget{
   transform: scale(1.4) translate(calc(var(--size) * -0.22), calc(var(--size) * 0.05));
   background-image: url("/stickers/yummy/orange/B03_A.png");
}

/*..................................................

	   underswap...............

...................................................*/

#swap{
      top: 14svw;
      left: 111svw;
   grid-template-rows: var(--size) calc(var(--size) * 2.5) var(--size);
}

#swap .curve,
#konpeito{
   grid-row: 1;
}

#konpeito{
   grid-column: 2;
   background-image: url("/stickers/yummy/blue/D03_A.png");
   transform: scale(1.55);
}

#swap .line{
   grid-row: 2;
}

#slaughter,
#swap .right{
   background-color: var(--purple);
}
 
#slaughter{
   grid-column: 1;
}

#spare{
   grid-column: 3;
   justify-self: end;
}

#spare,
#swap .left{
   background-color: var(--aqua);
}

#disaster, #darling{
   grid-row: 3;
}

#disaster{
   background-image: url("/stickers/yummy/blue/T02.png");
   grid-column: 1;
   justify-self: start;
   transform: scale(1.2) rotate(-5deg) translate(-0.75ch, -0.25ch);
}

#darling{
   background-image: url("/stickers/cutie/1_spring/B14.png");
   grid-column: 3;
   justify-self: end;
   transform: scale(1.3) rotate(5deg) translate(0.8ch, -2ch);
}

/*...........................................................

	horrotale... it's a ring... IT'S A CYCLE!!!!!!!!

..........................*/

#horror{
      top: 19svw;
      left: 137svw;
   grid-auto-flow: row;
}

#horror .point{
   background-image: url("/stickers/dotty/3_autumn/B07_A.png");
   transform: scale(1.4) translate(100%, 255%);
}

/* making a circle!! looks like a rattle hehe */

.ring{
   width: calc(var(--size) * 2.44);
   height: calc(var(--size) * 2.22);
   border: var(--height) solid var(--red);
   border-radius: 100%;
   outline: var(--border-level-2);
}

.ring::before,
.ring::after{
   content: "";
   z-index: -1;
   display: inline-block;
   position: absolute;
   border: var(--height) solid var(--black);
   border-radius: 100%;
}

.ring::before{
   display: none;
   top: 4.82svw;
   left: -0.18svw;
   width: calc(var(--size) * 2.44 + 0.32svw);
   height: calc(var(--size) * 2.22 + 0.32svw);
}

.ring::after{
   top: 5.15svw;
   left: 0.15svw;
   width: calc(var(--size) * 2.44 - 0.3svw);
   height: calc(var(--size) * 2.22 - 0.3svw);
}

/* moving the text around AHHHHHHH */

#horror span.normal{
   display: block;
   width: 23ch;
   transform: translateY(-4.1ch);
}

#horror .circular-text span{
   height: calc(var(--height) * 2.75);
   position: absolute;
   width: 1ch;
   left: 0;
   top: 0;
   transform-origin: bottom center;
}

#horror .circular-text{
   --degrees: 6.5deg;
   position: relative;
   transform: rotate(-78deg) translate(17.2svw, -10.8svw);
}

/* cursed. absolutely cursed. rotates each letter */

.circular-text span:nth-child(1){ transform: rotate(calc(var(--degrees) * 1)); }
.circular-text span:nth-child(2){ transform: rotate(calc(var(--degrees) * 2)); }
.circular-text span:nth-child(3) { transform: rotate(calc(var(--degrees) * 3)); }
.circular-text span:nth-child(4) { transform: rotate(calc(var(--degrees) * 4)); }
.circular-text span:nth-child(5) { transform: rotate(calc(var(--degrees) * 5)); }
.circular-text span:nth-child(6) { transform: rotate(calc(var(--degrees) * 6)); }
.circular-text span:nth-child(7) { transform: rotate(calc(var(--degrees) * 7)); }
.circular-text span:nth-child(8) { transform: rotate(calc(var(--degrees) * 8)); }
.circular-text span:nth-child(9) { transform: rotate(calc(var(--degrees) * 9)); }
.circular-text span:nth-child(10) { transform: rotate(calc(var(--degrees) * 10)); }

.circular-text span:nth-child(11){ transform: rotate(calc(var(--degrees) * 11)); }
.circular-text span:nth-child(12){ transform: rotate(calc(var(--degrees) * 12)); }
.circular-text span:nth-child(13) { transform: rotate(calc(var(--degrees) * 13)); }
.circular-text span:nth-child(14) { transform: rotate(calc(var(--degrees) * 14)); }
.circular-text span:nth-child(15) { transform: rotate(calc(var(--degrees) * 15)); }
.circular-text span:nth-child(16) { transform: rotate(calc(var(--degrees) * 16)); }
.circular-text span:nth-child(17) { transform: rotate(calc(var(--degrees) * 17)); }
.circular-text span:nth-child(18) { transform: rotate(calc(var(--degrees) * 18)); }
.circular-text span:nth-child(19) { transform: rotate(calc(var(--degrees) * 19)); }
.circular-text span:nth-child(20) { transform: rotate(calc(var(--degrees) * 20)); }

.circular-text span:nth-child(21) { transform: rotate(calc(var(--degrees) * 21)); }
.circular-text span:nth-child(22){ transform: rotate(calc(var(--degrees) * 22)); }
.circular-text span:nth-child(23) { transform: rotate(calc(var(--degrees) * 23)); }
.circular-text span:nth-child(24) { transform: rotate(calc(var(--degrees) * 24)); }

/*...........................................................

	   misc points aughghg wahhh

..........................*/

.fail{ /* point */
   background-image: url("/stickers/yummy/yellow/M12.png");
}

.fail:first-of-type{
   top: 10svw;
   left: 16svw;
   transform: rotate(40deg);
}

.fail:nth-of-type(2){
   top: 15.25svw;
   left: 12.5svw;
   transform: rotate(220deg);
}

.fail:nth-of-type(3){
   top: 21.5svw;
   left: 13.5svw;
   transform: rotate(150deg);
}

#fell{
   --size: 6svw;
   background-image: url("/stickers/dotty/3_autumn/B28_A.png");
   transform: scale(1.1) rotate(-9deg);
      top: 22svw;
      left: 5.5svw;
}

#green{
   --size: 14svw;
   height: calc(var(--size) / 1.9);
   background-image: url("/stickers/dotty/1_spring/E03_A.png");
   transform: rotate(10deg);
      top: 23svw;
      left: 57svw;
}

#outspare{
   --size: 7.25svw;
   height: calc(var(--size) / 1.8);
   background-image: url("/stickers/cutie/2_summer/V18_A.png");
   transform: scale(1.1) rotate(-25deg);
      top: 33.5svw;
      left: 50svw;
}

#shift{
   --size: 10svw;
   height: calc(var(--size) / 1.5);
   transform: rotate(-7deg);
   background-image: url("/stickers/yummy/pink/G02_A.png");
      top: 12svw;
      left: 95svw;
}

#dr{
   --size: 7svw;
   height: calc(var(--size) / 1.2);
   transform: scale(1.25) rotate(5deg);
   background-image: url("/stickers/cutie/3_autumn/C02_A.png");
      top: 15svw;
      left: 133svw; 
}

#outer{
   --size: 9svw;
   width: calc(var(--size) / 1.3);
   transform: rotate(12deg);
   background-image: url("/stickers/cutie/2_summer/K08_A.png");
   /* puts it near underswap */
      /*top: 12.5svw;
      left: 98svw; */
   /* puts it near horrortale */
      top: 13svw;
      left: 152svw; 
}

#cross{
   --size: 7svw;
   height: calc(var(--size) / 1.2);
   transform: scale(1.25) rotate(5deg);
   background-image: url("/stickers/yummy/orange/G03.png");
      top: 21svw;
      left: 164svw;
}

#sweet{
   --size: 9svw;
   width: calc(var(--size) / 1.5);
   transform: scale(1.1) rotate(5deg);
   background-image: url("/stickers/dotty/1_spring/B12_A.png");
      top: 34svw;
      left: 171svw;
}

/*...................................................................

	                  pop up modal!!!!

................................................................*/

#starrysky.active,
#snooze.active{
   display: block;
}
 
#starrysky{
   display:none;
   position:fixed;
   top:0;
   left:0;
   width:100vmax;
   height:100vmax;
   background-color: var(--black);
   opacity:.5;
   filter:alpha(opacity=50);
   z-index:99;
}
 
#snooze{
   z-index: 999;
   display:none;
   position:fixed;
      top: 0;
      left: calc(var(--gap) * 4);
   margin: var(--gap) auto;
   width: var(--popup-width);
   height: var(--popup-height);
}

#snooze.texture.blue{
   padding: 2.5svw;
   background-image: url("/background/03.png");
      background-size: 2.5svw;
}

#snooze > div{
   padding: 0 var(--gap)!important;
   overflow: hidden;
}

#snooze > div > section:target{
   display: grid;
}

/*...........................................

	lining everything up ahhh

..........................*/

#snooze > div > section{
  display:none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--gap);
  grid-template-areas: 'img h2'
                     'img p';
      grid-template-columns: 40% 1fr;
      grid-template-rows: 2em 1fr;
   gap: var(--gap);
   --back-position: 0.75em;
      background-position: 0 calc(100% - var(--back-position));
      background-repeat: no-repeat;
      background-size: 2em;
}

#snooze > div > section > img:first-of-type{
   grid-area: img;
   align-self: center;
}

#snooze img{
   max-width: 100%;
   max-height: 100%;
}

#snooze h2{
   grid-area: h2;
   margin: 0 auto;
   text-align: center;
}

#snooze .hugme{
   grid-area: p;
   height: calc(100% - 1em);
}

h3{
   text-align: center;
}

#snooze .hugme img{
   max-height: calc(100% - var(--gap));
}

/*...........................................

	button to close the modal

..........................*/

button.back{
   display: block;
   margin: 1em auto;
   padding: 0 1em;
   padding-top: 0.25em;
   border: var(--border-level-3);
      border-radius: var(--border-radius-level-2);
   font-size: 0.9em;
   font-weight: bold;
   background: var(--blue-bg);
}

/*..........................

	the table within (slams guitar)

..........................*/

#snooze table{
   width: 100%;
   text-align: center;
   vertical-align: middle;
}

#snooze th{
   font-variant: small-caps;
   font-size: 1.2em;
   letter-spacing: 0.066em;
}

#snooze td[rowspan="3"]{
   width: 50%;
}

#snooze td[rowspan="3"] span{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

#snooze td[rowspan="3"] span:not(:last-child){
   margin-bottom: 1ch;
}

/*..........................

	styling individual boxes/sections

..........................*/

#love-box{
   background-image: url("/stickers/dotty/1_spring/B08.png");
}

#snow-box, #seppuku-box, 
#memory-box,
#dust-box, #bernadette-box,
#cross-box{
   grid-template-areas: 'h2 h2' 'img p'!important;
}

:is(#snow-box, #cross-box){
   grid-template-rows: 3.5em 1fr!important;
}

:is(#snow-box, #cross-box) h2{
   max-width: 38ch;
}

:is(#snow-box, #cross-box, #bernadette-box, #dust-box,) img{
   max-height: calc(100% - 3em);
   margin: 0 auto;
   transform: translateY(-1.5em);
}