/* https://raw.githubusercontent.com/cafeTechne/Final-Fantasy-CSS/refs/heads/master/FF6/ff6_style_sheet.css */
:root{
    --patterncolor1: rgb(110 ,123, 70);
    --patterncolor2: rgb(202, 194, 111);

    --outer-battle-window-color-0: #7c7874;
    --outer-battle-window-color-1: #c8c4c0;
    --outer-battle-window-color-2: #ccc9cc;
    --outer-battle-window-color-3: #c9c9cb;
    --outer-battle-window-color-4: #c2c1c5;
    --outer-battle-window-color-5: #71767e;
    --outer-battle-window-color-6: #6b6e87;

    --battle-window-top-gradient-color: #6c70a6;
    --background-color-blue:#21217c;
    --background-color-black:#181820;
    --battle-window-bottom-gradient-color: #040136;


    --dialogue-window-color-gradient:#6d6db3,#5554ad,#5352a8,#3f4791,#354783,#32348d,#32328a,#313188,#222279,#14156d,#02045a,#040233,#020234,#020134;
    --battle-window-border-radius: 5px;

    --br:5px;     /* border radius   */
    --bg:#6b6e87,#71767e,#c2c1c5,#c9c9cb,#ccc9cc,#c8c4c0,#7c7874,#c0bcb3;/*border gradient */
    --bgb: #6b6e87,#71767e,#c2c1c5,#c9c9cb,#ccc9cc,#c8c4c0,#7c7874,#c0bcb3,#020134;
    --f:25px;/* minimum font size */

    --highlighted-text: #edd758;
}

@font-face {
  font-family: "PixelifySans"; /* set name */
   src: url('/static/font/PixelifySans-VariableFont_wght.ttf');
}

@font-face {
  font-family: "Jersey10"; /* set name */
   src: url('/static/font/Jersey10-Regular.ttf');
}

html, body{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: "PixelifySans";
    color: #fff;
    padding: 5px;
    text-align:center;
    /*overflow: hidden;*/
    background:url("/static/img/bgmobile.webp");
    background-size: 15%;
}


.pattern{
  background-color: var(--patterncolor1);
  background-image: radial-gradient(circle, transparent 1rem, var(--patterncolor1) 1rem),
    linear-gradient(var(--patterncolor2) 0.5rem, transparent 0.5rem),
    linear-gradient(90deg, var(--patterncolor2) 0.5rem, transparent 0.5rem);
  background-size: 5rem 5rem;
  /* background-position: 5.25rem 5.25rem, 2.5rem 2.5rem, 2.5rem 2.5rem; */
  animation: patternshift 4s infinite;
  ;
}

.box{
   position: relative;
}

.grow{
    flex-grow: 1;
}

.column{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 6px;
}

.header{
    font-family: "Jersey10";
    font-size: 2.0rem;
    font-weight: 100;
    text-align: center;
}

form{
    width:100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.outer-dialogue-window {
    border-radius:var(--br);
    padding:calc(var(--br) + 5px);
    background:
      /*corners*/
      radial-gradient(farthest-side at bottom right,var(--bg)) top    left /var(--br) var(--br),
      radial-gradient(farthest-side at top    right,var(--bg)) bottom left /var(--br) var(--br),
      radial-gradient(farthest-side at bottom left ,var(--bg)) top    right/var(--br) var(--br),
      radial-gradient(farthest-side at top    left ,var(--bg)) bottom right/var(--br) var(--br),
      /* borders*/
      linear-gradient(to top   ,var(--bg)) top   /calc(100% - 2*var(--br)) var(--br),
      linear-gradient(to bottom,var(--bg)) bottom/calc(100% - 2*var(--br)) var(--br),
      linear-gradient(to right ,var(--bg)) right /var(--br) calc(100% - 2*var(--br)),
      linear-gradient(to left  ,var(--bg)) left  /var(--br) calc(100% - 2*var(--br));
    background-repeat:no-repeat;
    /*
    My first approach to solving this led to unmaintainable code. 
    As of now, I feel that my current gradients are "good enough" at 
    approximating the pixelated anti-aliasing of the original ui menu window.
    */

    box-sizing:border-box;
    display:inline-block;
    vertical-align:top;
    font-size:var(--f);
    border-width: 1px;
    text-shadow: 2px 1px #2d2a4b;
  }

  .inner-dialogue-window{
    background: linear-gradient(to bottom,var(--dialogue-window-color-gradient));
    padding: 5px;
    margin: -5px;
  }


.hide{
    display:none;
}
  





 .swipe-select { --w:320px; width:100%; max-width:var(--w); margin:0 auto; user-select:none; }
  .ss-viewport { position:relative; overflow:hidden; border-radius:10px; background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0) 50%); }
  .ss-track { display:flex; transition:transform .28s cubic-bezier(.2,.9,.2,1); will-change:transform; }
  .ss-slide { flex:0 0 100%; display:flex; align-items:center; justify-content:center; height:200px;  }
  
  .treeselectcontainer{width:100%; height:100%; display:flex;justify-content: center;}
  .treeselect{
    width:110px;
    height: 100%;
    transition: filter 250ms ease-in-out;
  }

  .treeselectfixed{
    height: 200px;
  }
  
  .oak{
    background:url('/static/img/sprites/oak.png');
    background-size: 640%;
    background-repeat: no-repeat;
  }
  
 .fir{
    background:url('/static/img/sprites/fir.png');
    background-size: 640%;
    background-repeat: no-repeat;
  }
  
   .birch{
    background:url('/static/img/sprites/birch.png');
    background-size: 640%;
    background-repeat: no-repeat;
  }
  
   .cherry{
    background:url('/static/img/sprites/cherry.png');
    background-size: 640%;
    background-repeat: no-repeat;
  }
  
   .palm{
    background:url('/static/img/sprites/palm.png');
    background-size: 640%;
    background-repeat: no-repeat;
  }

.step0{
    background-position: 0% center;
}
.step1{
    background-position: 16.88% center;
}
.step2{
    background-position: 33.76% center;
  }
.step3{
background-position: 50.64% center;
}
.step4{
background-position: 66.22% center;
}
.step5{
    background-position: 84.4% center;
  }


  .ss-slide img { width:100%; height:100%; object-fit:cover; display:block; }
  .ss-indicators { display:flex; justify-content:center; gap:8px; padding:10px 0; }
  /* .ss-dot { width:10px; height:10px; border-radius:999px; background:#ccc; opacity:.6; cursor:pointer; }
  .ss-dot[aria-current="true"] { background:#ff8; opacity:1; transform:scale(1.1); } */
  .ss-controls { position:absolute; inset:0; pointer-events:none; }
  .ss-btn { pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .35);
    border: 0;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: "Jersey10";
    font-size: 2.7rem;}
  .ss-prev { left:8px; } .ss-next { right:8px; }
  .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }





.smallbm{
    margin-bottom: 5px;
}
#name{
    position: relative;
    background: var(--background-color-blue);
    color: #fff;
    font-size: 1em;
    text-align: center;
    font-family: "PixelifySans";
    caret-color: #fff;
    caret-shape: underscore;
    border-radius:var(--br);
    border: 2px solid rgb(202,201,204);
    margin-bottom: 10px;
}

.submit{
    border: 2px solid rgb(202,201,204);
    background: rgb(110 ,123, 70);
    padding: 3px 10px;
    border: 2px solid rgb(202,201,204);
    font-family: "Jersey10";
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    margin-bottom: 5px;
    border-radius:var(--br);
}



.glowOn{
    filter: brightness(1000);
}

.shrinkanimation{
    animation: treegrow 500ms;
    animation-timing-function: steps(5);
    animation-direction: reverse;
    animation-fill-mode: forwards;
}


.aligncenter{
    display: flex;
    align-items: center;
    justify-content: center;
}


#water{
      border: 2px solid rgb(202,201,204);
    background: rgb(110 ,123, 70);
    padding: 8px 15px;
    border: 2px solid rgb(202,201,204);
    font-family: "Jersey10";
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    border-radius:var(--br);
}

.buttoncontainer{
    transition: all 200ms ease-in-out;
}
.disabled{
    pointer-events: none;
    opacity: 0;
    
}


.layer{
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width: 100%;
  z-index: 24;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

#cookie_lvl1{
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
}

#popup_ad{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(12px);
    z-index: 2;
}

.adcontainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.ad{
  max-width:100%;
  background: white;
  padding: 20px;
  color: black;
}
.ad img{
  width:100%;
  max-width: 50vw;
}

.popup{
  max-width:100%;
  background: white;
  padding: 20px;
  color: black;
}

.buttons{
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

button, .button{
  background: red;
  box-shadow: 2px 2px 4px black;
  color: white;
  padding: 5px 10px;
  cursor: pointer;;
}

button#yes, button#skip{
  background:lightgreen;
}

button#skip.inactive{
  cursor: default;
  background: lightgrey;
}

@keyframes patternshift {
  0%   {background-position: 5.25rem 5.25rem, 2.5rem 2.5rem, 2.5rem 2.5rem;}
  100% {background-position: 10.25rem 5.25rem, 2.5rem 2.5rem, 2.5rem 2.5rem;}
}


@keyframes treegrow {
  0%   {background-position: -1% center;}
  100% {background-position: 84.4% center;}
}


.choices{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.row{
  display:flex;
  align-items: center;
  padding: 5px 10px;
  background: rgba( 122, 122, 122, 0.1);
  gap: 5px;
}

.displaynone{
  display:none;
}
  /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
#slidein{
  z-index:2;
  pointer-events:none;
}

.sliderad{
  position: relative;
  align-self: flex-end;
  transition: 300ms ease-in-out;
  padding: 10px;
  width: 100%;
    background: white;
}

.sliderad img{
  width:100%
}

.sliderad .close{
  position: absolute;
  top:-10px;
  right: 5px;
  cursor: pointer;
  color: blue;
  background:white;
  padding: 3px;
  pointer-events:all;
}

.sliderstart{
  margin-top:160vh;
}