/* add all special styles used for displaying the rules */

/* .rules: used for all elements loading rules (rules at main site, rules ingame, popup with rules extract 
   #rules: div with complete rules used at main site
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */
   

/* Asphalt for main headers */
@font-face {
  font-family: 'Asphalt';
  src: local('Asphalt'), local('Asphalt Black Regular'),
       url('/game-plugins/wispwood/1.0.13/fonts/Asphalt_Black_Regular.otf') format('opentype');
}

/* Overlock for second headers */
@font-face {
  font-family: 'Overlock-Bold';
  src: local('Overlock-Bold'), local('Overlock'),
       url('/game-plugins/wispwood/1.0.13/fonts/Overlock-BlackItalic.ttf') format('truetype');
}

/* Font for numbers */
@font-face {
  font-family: 'Merienda';
  src: local('Merienda'), 
       url('/game-plugins/wispwood/1.0.13/fonts/Merienda-Regular.ttf') format('truetype');
}

.rules { padding: 0.5em; text-shadow: none; }

.rules .cover {
  background: radial-gradient(
    ellipse at center,
    rgba(23, 69, 73, 1) 0%,
    rgba(23, 69, 73, 0.8) 40%,
    rgba(23, 69, 73, 0.4) 60%,
    rgba(23, 69, 73, 0) 72%
  );
}

.rules h1 {
  background-color: none;
  border: none;
  color: #174549;
  padding: 0px;
  font-size: 2.5em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-family: 'Asphalt',serif;
  text-transform: uppercase;
}
#panelRules h1 {font-size: 1.75em; }

.rules .description { color: #174549; text-align: center; font-size: clamp(1.2em, 2vw, 1.5em ) }

.rules h2 {
  color: #174549;
  font-size: 1.5em;
  text-align: left;
  font-family: 'Overlock-Bold',sans-serif;
  border: none;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  font-weight: 600;
}
#panelRules h2 {font-size: 1.5em; }


.rules h3 {
  color: #174549;
  font-size: 1.2em;
  text-align: left;
  font-family: 'Overlock-Bold',sans-serif;
  border: none;
  margin-bottom: 0.5em;
  font-weight: 550;
  font-style: bold;
}
#panelRules h3 {font-size: 1.3em; }

.rules .solorules h1, .rules .solorules h2, .rules .solorules h3 {color: #510823; }

.rules em { font-size: 1.2em; font-family: 'Overlock-Bold',sans-serif; color: #174549; font-weight: 500; font-style: normal;}
.rules b { font-size: 1.1em; font-family: 'Overlock-Bold',sans-serif; color: #174549; font-weight: 600; font-style: bold;}

/* sidebar or not sidebar */ 
#panelRules .nosidebar { display:none; }
.rules .sidebaronly { display:none; }
#panelRules .sidebaronly { display:inherit; }

/* links */
.rules a:link, .rules a:visited {color: #0F2F3A;}
.rules a:hover {color: #0F2F3A99 !important;}
.rules a:active {color: #0F2F3A;}
.rules .solorules a:link, .rules .solorules a:visited  {color: #510823; }
.rules .solorules a:hover {color: #51082399; }
.rules .solorules a:active   {color: #510823; }

/* content */
.rules .content { font-family: 'Overlock-Bold'; color: #0F2F3A; text-align: center; }
.rules .content p {font-size: 1.3em;}
.rules .content .solocontent {  color: #510823; }
.rules .solocontent a:link, .rules .solocontent a:visited, .rules .solocontent, .rules .solocontent a:active {color: #510823; }
.rules .content a:link, .rules .content a:visited {color: #0F2F3A;}
.rules .content a:hover {color: #0F2F3A99;}
.rules .content a:active {color: #0F2F3A;}
.rules .solocontent a:link, .rules .solocontent a:visited  {color: #510823; }
.rules .solocontent a:hover {color: #51082399; }
.rules .solocontent a:active   {color: #510823; }


/* customized list - teal numbers, white circle, teal border*/
#rules ol.custlist {list-style: none; counter-reset: li}
#rules .custlist li::before {content: counter(li); color: #174549; font-size: 1.5em; font-family: 'Merienda',serif; font-weight: bold; display: inline-block; width: 1.5em;  height:1.5em; text-align:center;  background-color: #EBEFB9; border-radius: 50%; padding:0.1em; padding-top: 0em; margin-right: 0.5em; border: 3px solid #174549; }
#rules .custlist li {counter-increment: li; margin-top: 0.5em;}

.rules ul {
  margin: 1em 0em 1em 2em;
  list-style-image: url('/game-plugins/wispwood/1.0.13/images/rules/list_icon_u.webp');
}

.rules p.right {text-align: right;}

/* images */
.rules .inlinepic {height:2em; width: auto; float: none;}

.rules .setup {float: right; margin-left: 1em; width: clamp(15em,60%,35em); border-radius: 0.5em; }

.rules .gridguide {float: right; margin-left: 1em; width: clamp(3em,20vw,18em); margin-right: -1em; }
.rules .firefly_tokens {float: left; margin-right: 1em; width: 5em; } 

.rules .goalcard { border-radius: 0.5em; border: 3px solid #0F2F3A; background-color: #22666BAA; padding: 0.5em; margin-bottom: 1em;}
.rules .goalcardimg {float: left; margin-right: 1em; width: 50%; border-radius: 0.5em;}


.rules .basicturn1 {float: right; margin-left: 2em; width: 30%; margin-top: clamp(-8em,-5vw,0em); margin-right: clamp(-1em,1vw,3em);}

.rules .basicturnimgs {float: right; width: clamp(10em,50%,40em)}
.rules .basicturn2 {float: left; margin-left: 1em; width: 45%; margin-right: -0em;}
.rules .basicturn3 {margin-left: -0.5em; width: 50%; }
.rules .basicturn4 {float: none; margin-left: 10%; width: 80%; margin-top: -0em;}


.rules .basicturn5 {float: right; margin-left: 1em; width: clamp(15em,40%,40em); margin-top: -0em;}

.rules .gridsizes {float: left; margin: 1em 1em 0em 0em; }
    .rules .gridsizes table tr, .rules .gridsizes table td {
        background-color: #6F9190;
        border: 3px solid #0F2F3A;
        font-family: 'Overlock-Bold',serif;
        padding: 0.5em;
        color: #98D6D3;
    }

.rules .witch {float: left; margin-right: 1em; width: 5em; margin-top: -0em;}

.rules .halfwidth {float: left; width: 48%; margin:0.5em; }

.rules .catforstart img {float: right; margin-left: 1em; width: 50%; margin-top: -0em;}

.rules .maydealnewwisps {float: right; margin-left: 1em; width: clamp(16em,40%,40%); margin-top: -0em;}
#panelRules .maydealnewwisps {display: none;}
.rules .discardpile {float: left; margin-right: 1em; width: 8em; margin-top: -0em;}
#panelRules .discardpile {display: none;}

.rules .taketreetiles {float: left; width: 5em; margin-right: 1em;}
.rules .makecatready {float: left; width: 5em; margin-right: 1em;}
.rules .roundend {float: right; margin-left: 1em; width: clamp(15em,35%,35%); margin-top: clamp(-2em,-2vw,0em);}
#panelRules .roundend {display: none;}
.rules .catspaw {float: right; margin-left: 1em; width: 8em;}
.rules .round123 {float: right; margin-left: -0em; width: clamp(15em,35%,35%); }

.rules .scoring {width: 90%}

.rules .witchgoal {float: right; width:clamp(10em,18%,12em); border-radius:0.5em; margin-right: clamp(0em,6%,4em); margin-left: clamp(0.5em,3%,2em);}

.rules .header_icon {float: left; height:3em; margin-top: -1em;}

.rules .tileimg {float: right;  width: clamp(4em,15%,11em);} 
#panelRules .tileimg {display: none;} 
.rules .subchapter.jacks .tileimg { rotate: 30deg; margin-right: 6%;}
.rules .subchapter.witches .tileimg { rotate: -20deg; margin-right: clamp(0.2em,12%,8em); margin-left: clamp(0.5em,4%,3em); margin-top: -2em;}
.rules .subchapter.orbs .tileimg { margin-right: clamp(0.1em,10%,5em); margin-left: clamp(1em,5%,5em)}
.rules .subchapter.hearts .tileimg { rotate: -20deg; margin-right: clamp(2em,15%,8em); margin-left: 3em; margin-top: -5em;}
.rules .subchapter.trees .tileimg { rotate: 20deg; margin-right: 3em; margin-left: 3em; margin-top: clamp(-6em,-6vw,-1em);}

.rules .checkershirecat {float:left; width:clamp(11em,40%,40%); margin-right: 1em;}

.rules .soloscore {float:right; width:clamp(4em,10%,5em); margin-left: 1em; margin-top: clamp(-4em, -4vw,-1em);}

.rules .solo_fireflies {float:right; width:clamp(15em,30%,20em); margin-left: 1em; text-align: center; font-family: 'Overlock-Bold',sans-serif; color: #510823;}

/* examples box */
.rules .example {
    background-color: #22666BAA;
    border-radius: 1em;
    font-family: 'Overlock-Bold',serif;
    border: 3px solid #0F2F3A;
    padding: 0.5em ;
    float: right;
    margin: 0.5em;
    width: 60%;
    font-style: italic;
    color: #F4F69E;
    color: #98D6D3;
}
.rules .example p { line-height: 1em;  }
/* don't display examples in the sidebar */
#panelRules .example {
    display: none;
}
.rules .example img {
    float: left;
    width: 60%;
    margin-right: 1em;
}

.rules .example.scoringexample {width: 100%;}
.rules .example.scoringexample img {width:60%}
.rules .example.scoringexample p {margin-bottom: 1em;}

.rules .example.scoring_witches {width:100%}
.rules .example.scoring_witches img {width:clamp(11em,40%,40%)}
.rules .example.scoring_witches p {margin-bottom: 1em;}

.rules .note {background-color: #22666B55; overflow:auto; padding: 0.3em; border-radius: 0.2em; }

.rules .example.solo_scoringexample {width: 100%;}
.rules .example.solo_scoringexample img {width:100%; margin-bottom: -3em; margin-top: -0.5em;}
.rules .example.solo_scoringexample p {float: right; width: 50%;}


/* flex boxes */
.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; clear: both;}
@media (max-width: 768px) {
    .rules .flex.mobile { flex-direction: column; /* columns below each other */ gap: 0em; /* remove gap in coolumn layout */ }
}
#panelRules .flex.mobile { flex-direction: column; /* columns below each other */ gap: 0em; /* remove gap in coolumn layout */ }

.rules .flexbox {flex: 1 1 30%; background-color: #22666B77; padding: 1%; border-radius: 0.3em;  box-shadow: 0 2px 2px 0 #0F2F3A, 0 2px 2px 0 #0F2F3A;}
.rules .column { flex: 1; /* equal width columns */ }
.rules .column.wide { flex: 2; /* wider column */ }

.rules .flex.introlights {width:clamp(20em, 80%, 70em); text-align:center; margin-left: calc((100% - clamp(20em, 80%, 99%))/2); margin-top:4em; }
.rules .flex.introlights .flexbox {flex: 1 ; background-color: transparent; padding: 1%;  box-shadow: none; }
.rules .flex.introlights .flexbox img {width: clamp(6em, 90%, 8em);}
.rules .flex.introlights .flexbox p {font-size: clamp(0.8em, 1.5vw, 1em ) }
.rules .flex.introlights .flexbox p em {font-size: clamp(1.2em, 2.5vw, 1.5em ) }
.rules .flex.introlights .flexbox.jacks img { rotate: 30deg;  margin-top: -3rem; margin-bottom: 2rem;}
.rules .flex.introlights .flexbox.witches img { rotate: 8deg; margin-top: -1rem; margin-bottom: 1rem;}
.rules .flex.introlights .flexbox.hearts img { rotate: -20deg; margin-top: -1rem; margin-bottom: 1rem;}
.rules .flex.introlights .flexbox.orbs img { rotate: -35deg; margin-top: -3rem; margin-bottom: 2rem;}


.rules .flex.catswitch {width:clamp(12em,35%,35%); float:right; text-align:center; gap: 0em;}
.rules .flex.catswitch .flexbox {flex: 5 1 30%; background-color: transparent; padding: 1%;  box-shadow: none;}
.rules .flex.catswitch .flexbox.middle {flex: 1 4 10%; }

.rules .flex.catchoice {}
.rules .flex.catchoice .flexbox {flex: 5 1 40%; background-color: transparent; padding: 1%;  box-shadow: none; padding-top:2em;}
.rules .flex.catchoice .flexbox.middle {flex: 1 4 10%; padding-top:0em;}


@media (max-width: 768px) {
    .rules .flex.usefulterms { flex-direction: column; /* columns below each other */ }
}
#panelRules .flex.usefulterms { flex-direction: column; /* columns below each other */ }
.rules .flex.usefulterms .flexbox {flex:1; }
.rules .flex.usefulterms .flexbox img {float:right; height:clamp(10em,70%,10em); margin-left: 1em; border-radius:0.5em;}