@font-face {
  font-family: 'WarioWareInc';
  src: url('../webfonts/WarioWareInc.woff2') format('woff2'),
  url('../webfonts/WarioWareInc.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WarioWareIncV2';
  src: url('../webfonts/WarioWareIncV2.woff2') format('woff2'),
  url('../webfonts/WarioWareIncV2.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Lilita One';
  src: url('../webfonts/LilitaOne.woff2') format('woff2'),
  url('../webfonts/LilitaOne.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



:root {
  --wallpaper-primary: #dc57af;
  --wallpaper-secondary: #a80f75;
  --wallpaper-third: #fa7141;
  --game-speed: 500ms;

  --base-size: min(100vw, 600px);
  --inner-w-px: 502;
  --inner-h-px: 603;
  --width: calc(var(--base-size) * (var(--inner-w-px) / 1080));
  --height: calc(var(--base-size) * (var(--inner-h-px) / 1080));
  --depth: var(--width);
  --shaft-position: 100vh;
  --z-depth-ratio: clamp(1.2, 2 * (100vh / 100vw), 1.94);
  --m-p: 0.8;
}

body {
  background: #fcfdfe;
  display: flex;
  gap: 72px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 24px 12px;
  font-family: 'Lilita One';
  font-weight: normal;
  font-size: clamp(1.92rem, 2.4vw + 1.2rem, 2.7rem);
  margin: 0;
  padding: 0;
  min-height: 10vh;
  width: 100%;
  overflow: hidden;
}

img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; 
  touch-action: none;
}

.flex-grid {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.--background-checkerboard {
  background: conic-gradient(var(--wallpaper-primary) 90deg, var(--wallpaper-secondary) 90deg 180deg, var(--wallpaper-primary) 180deg 270deg, var(--wallpaper-secondary) 270deg);
  background-repeat: repeat;
  background-size: 60px 60px;
  background-position: top left;
}

.--background-checkerboard-animate {
  background: conic-gradient(var(--wallpaper-primary) 90deg, var(--wallpaper-secondary) 90deg 180deg, var(--wallpaper-primary) 180deg 270deg, var(--wallpaper-secondary) 270deg);
  background-repeat: repeat;
  background-size: 60px 60px;
  animation: scroll-diagonal 4s linear infinite;
}

@keyframes scroll-diagonal {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -60px -60px;
  }
}

.--background-grid {
  --s: 25vw;
  --_g: #0000 90deg, var(--wallpaper-primary) 0;
  background:
  conic-gradient(from 90deg at 2px 2px, var(--_g)),
  conic-gradient(from 90deg at 1px 1px, var(--_g)),
  var(--wallpaper-secondary);
  background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
}

.--background-tissue {
  --s: 20px; 
  --g: var(--s); 
  background:
  conic-gradient(at var(--s) calc(100% - var(--s)), #0000 270deg, var(--wallpaper-primary) 0) calc(var(--s) + var(--g)) 0,
  linear-gradient(var(--wallpaper-secondary) var(--s), #0000 0) 0 var(--g),
  conic-gradient(at var(--s) calc(100% - var(--s)), #0000 90deg, var(--wallpaper-secondary) 0 180deg, var(--wallpaper-primary) 0),
  var(--wallpaper-third);
  background-size: calc(2*(var(--s) + var(--g))) calc(2*(var(--s) + var(--g)));
}

.--background-shaft{
  background-image: url('../assets/imgs/str/shaft-cage.png');
  background-repeat: repeat-y; 
  background-size: 100vw 100vh;
  animation: simpleFadeIn 0.6s ease-out forwards, scrollShaft 3.4s linear infinite; 
}

.--background-shuriken {
  --s: 56px;
  --_c1: var(--wallpaper-primary) 99%, #0000 101%;
  --_c2: var(--wallpaper-secondary) 99%, #0000 101%;
  --r: calc(var(--s)*.866);
  --g0: radial-gradient(var(--s), var(--_c1));
  --g1: radial-gradient(var(--s), var(--_c2));
  --f: radial-gradient(var(--s) at calc(100% + var(--r)) 50%, var(--_c1));
  --p: radial-gradient(var(--s) at 100% 50%, var(--_c2));
  background:
  var(--f) 0 calc(-5*var(--s)/2),
  var(--f) calc(-2*var(--r)) calc(var(--s)/2),
  var(--p) 0 calc(-2*var(--s)),
  var(--g0) var(--r) calc(-5*var(--s)/2),
  var(--g1) var(--r) calc(5*var(--s)/2),
  radial-gradient(var(--s) at 100% 100%, var(--_c1)) 0 calc(-1*var(--s)),
  radial-gradient(var(--s) at 0% 50%, var(--_c1)) 0 calc(-4*var(--s)),
  var(--g1) calc(-1*var(--r)) calc(-7*var(--s)/2),
  var(--g0) calc(-1*var(--r)) calc(-5*var(--s)/2),
  var(--p) calc(-2*var(--r)) var(--s),
  var(--g0) calc(-1*var(--r)) calc(var(--s)/2),
  var(--g1) calc(-1*var(--r)) calc(var(--s)/-2),
  var(--g0) 0 calc(-1*var(--s)),
  var(--g1) var(--r) calc(var(--s)/-2),
  var(--g0) var(--r) calc(var(--s)/2)
  var(--wallpaper-secondary);
  background-size: calc(4*var(--r)) calc(6*var(--s));
}

.--background-fastfood {
  --s: 150px; 
  --l: var(--wallpaper-primary) 99%, #0000 101%;
  --p: var(--wallpaper-secondary) 99%, #0000 101%;
  --r: closest-corner at;
  background:
  radial-gradient(var(--r)-25% 25%, var(--p)),
  radial-gradient(var(--r)25% -25%, var(--p)),
  radial-gradient(var(--r)125% 75%, var(--p)),
  radial-gradient(var(--r)75% 125%, var(--p)),
  radial-gradient(var(--r)75% 75%, var(--l)),
  radial-gradient(var(--r)25% 25%, var(--l)) var(--wallpaper-secondary);
  background-size: var(--s) var(--s);
}

.--background-3D-boxes {
  --s: 65px;
  --_c: 75%, var(--wallpaper-third) 52.72deg, #0000 0;
  --_g1: conic-gradient(from -116.36deg at 25% var(--_c));
  --_g2: conic-gradient(from 63.43deg at 75% var(--_c));
  background:
  var(--_g1), var(--_g1) calc(3*var(--s)) calc(var(--s)/2),
  var(--_g2), var(--_g2) calc(3*var(--s)) calc(var(--s)/2),
  conic-gradient(
    var(--wallpaper-secondary) 63.43deg, var(--wallpaper-primary) 0 116.36deg,
    var(--wallpaper-secondary) 0 180deg, var(--wallpaper-primary) 0 243.43deg,
    var(--wallpaper-secondary) 0 296.15deg, var(--wallpaper-primary) 0);
  background-size: calc(2*var(--s)) var(--s);
}

.--background-arrows {
  --s: 100px;
  background:
  conic-gradient(#0000 75%, var(--wallpaper-primary) 0) 0 calc(var(--s)/4),
  conic-gradient(from 45deg, var(--wallpaper-primary) 25%, var(--wallpaper-secondary) 0);
  background-size: var(--s) var(--s);
}

.--background-water {
  --s: 10px; 
  --_s: 37.5% 12.5% at 62.5%;
  --_g: 34% 99%, #0000 101%;
  --g1: radial-gradient(var(--_s) 100%, #0000 32%, var(--wallpaper-primary) var(--_g));
  --g2: radial-gradient(var(--_s) 0, #0000 32%, var(--wallpaper-primary) var(--_g));
  --g3: radial-gradient(var(--_s) 100%, #0000 32%, var(--wallpaper-secondary) var(--_g));
  --g4: radial-gradient(var(--_s) 0, #0000 32%, var(--wallpaper-secondary) var(--_g));
  background:
  var(--g1),
  var(--g2) 0 calc(3*var(--s)),
  var(--g3) var(--s) calc(3*var(--s)),
  var(--g4) var(--s) calc(6*var(--s)),
  var(--g1) calc(2*var(--s)) calc(6*var(--s)),
  var(--g2) calc(2*var(--s)) calc(9*var(--s)),
  var(--g3) calc(3*var(--s)) calc(9*var(--s)),
  var(--g4) calc(3*var(--s)) 0,
  repeating-linear-gradient(var(--wallpaper-primary) 0 25%, var(--wallpaper-secondary) 0 50%);
  background-size: calc(4*var(--s)) calc(12*var(--s));
}

.structure-scene,
.--str-minigames-area {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  max-width: var(--base-size);
  margin: 0 auto;
  padding: 0px calc((100vw - var(--base-size))/2);
  overflow: hidden;
}

:root {

  --beat-pulse: 0; 
}

.structure-scene.upperfloor:after {
  content: '';
  position: absolute;
  inset: 0;

  background: radial-gradient(circle, rgb(2 0 255 / 0%) calc(65% - (var(--beat-pulse) * 20%)), rgb(154 171 233) 120%);
  pointer-events: none;
  z-index: 11;
}

.structure-scene.lowerfloor:after {
  content: '';
  position: absolute;
  inset: 0;

  background: radial-gradient(circle, rgb(2 0 255 / 0%) calc(30% - (var(--beat-pulse) * 15%)), #ffea3480 90%);
  pointer-events: none;
  z-index: 11;
}

.--str-minigames-area.hide .--mga-middle, .--str-minigames-area.hide .--mga-bottom{
  opacity: 0;
}

.structure-scene {

  background: #fcfdfe;
  opacity: calc(1 - var(--elevator-p, 0));
  transition: none;
  perspective: 1000px;
  z-index: 1;
}

.structure-scene.active {
  pointer-events: none;
}

.structure-scene.active .--st-wrapper {
  transition: transform calc(var(--game-speed) * 1.2);
  transform: translateZ(calc(var(--base-size) * var(--z-depth-ratio)));
  pointer-events: none;
}

.structure-scene.inshaft .--st-wrapper {
  transition: transform 2s;
  transition-delay: 1s;
  transform: translateZ(calc(var(--base-size) * var(--z-depth-ratio)));
  pointer-events: none;
  transition-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
}

.structure-scene.outshaft .--st-wrapper {
  transition: transform 2s;
  transition-delay: 0s;
  transform: translateZ(0px);
  pointer-events: none;
  transition-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
}

.structure-scene.shaft .--st-shaft {
  visibility: visible;
}

.structure-scene.inshaft .--st-shaft {
  transition: perspective 2s;
  transition-delay: 1s;
  visibility: visible;
  display: flex;
  perspective: calc(min(100vw, 500px) / 4);
}

.structure-scene.outshaft .--st-shaft {
  transition: perspective 2s;
  visibility: visible;
  display: flex;
  perspective: min(100vw, 500px);
}

.--st-wrapper {
  position: relative;
  z-index: 10;
  width: min(100vw, 562px);
  height: min(100vw, 562px);
  margin: 0 auto;
  transform: translateZ(0);
  will-change: transform;
}

.--st-roof {
  outline: 4px solid #fcfdfe;
  outline-offset: -2px;
  z-index: 2;
}

.--st-floor {
  z-index: 10;
}

.--roof {
  width: 100%;
  height: calc((100vh - var(--base-size)) / 2);
  min-height: 100px;
  background: #fcfdfe;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.--floor {
  width: 100%;
  height: calc((100vh - var(--base-size)) / 2);
  min-height: 100px;
  background: #fcfdfe;
}

.--st-shaft {
  visibility: hidden;
  justify-content: center;
  align-items: center;
  perspective: var(--base-size);
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(14, 20, 43, 1) 10%, rgba(34, 40, 66, 1) 30%, rgba(34, 40, 66, 1) 70%, rgba(14, 20, 43, 1) 90%, rgba(255, 255, 255, 1) 100%);
  transition-delay: 1s;
  transition: perspective 2s;
  transition-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
}

#elevatorCanvas {
  width: 100%;
  height: 100%;
  border: none;
  image-rendering: -webkit-optimize-contrast;
  position: relative;
  z-index: 1;
}

.scene {
  width: min(100vw, 562px);
  height: min(100vw, 562px);
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: translateY(var(--shaft-position));
  transition: transform 3s;
  transition-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
}

.cube {
  width: var(--width);
  height: var(--height);
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition-delay: 1s;
  transition: transform calc(var(--game-speed) * 4);
  transition-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
}

.wall {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: clamp(0.64rem, 0.8vw + 0.4rem, 0.9rem);
  background-size: contain;
  color: transparent;
}

.inner { transform: rotateY(180deg); }

.wall-front  { transform: rotateY(0deg) translateZ(calc(var(--depth) / 2)); }
.wall-back   { transform: rotateY(180deg) translateZ(calc(var(--depth) / 2)); }
.wall-right  { width: var(--depth); right: calc(var(--depth) / -2); transform: rotateY(90deg); }
.wall-left   { width: var(--depth); left: calc(var(--depth) / -2); transform: rotateY(-90deg); }
.wall-top    { height: var(--depth); top: calc(var(--depth) / -2); transform: rotateX(90deg); }
.wall-bottom { height: var(--depth); bottom: calc(var(--depth) / -2); transform: rotateX(-90deg); }

.wall-front .outer { background: unset; }
.wall-front .inner { background: unset; }

.wall-left .outer  { background-image: url(../assets/imgs/str/txt-shaft-outside.png); }
.wall-left .inner  { background-image: url(../assets/imgs/str/txt-shaft-wall.png); }

.wall-right .outer { background-image: url(../assets/imgs/str/txt-shaft-outside.png); }
.wall-right .inner { background-image: url(../assets/imgs/str/txt-shaft-wall.png); }

.wall-back .outer  { background-image: url(../assets/imgs/str/txt-shaft-outside.png); }
.wall-back .inner  { background-image: url(../assets/imgs/str/txt-shaft-wall.png); }

.wall-top .outer   { background-image: url(../assets/imgs/str/txt-shaft-top.png); }
.wall-top .inner   { background-image: url(../assets/imgs/str/txt-shaft-roof.png); }

.wall-bottom .outer { background-image: url(../assets/imgs/str/txt-shaft-top.png); }
.wall-bottom .inner { background-image: url(../assets/imgs/str/txt-shaft-floor.png); }

.--str-minigames-area {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.--mga-top {
  height: calc((100vh - var(--base-size)) / 2);
  min-height: 100px;
  color: white;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.--mga-middle {
  padding: 24px;
  display: flex;
  position: relative;
  pointer-events: none;
}

.--mga-bottom {
  height: calc((100vh - var(--base-size)) / 2);
  min-height: 100px;
}

.--str-game-id {
    position: absolute;
    top: -10px;
    left: calc(50% - 14px);
    font-size: clamp(1.067rem, 1.333vw + 0.667rem, 1.5rem);
    color: #ffffff;
    z-index: -3;
    /* font-family: Consolas; */
    text-transform: uppercase;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-radius: 50%;
    border: 0px solid #ffffff;
    text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
}

.--str-game {
  background: white;
  background-size: cover;
  border: 6px solid #fff;
  image-rendering: pixelated;
  cursor: crosshair;
  display: block;
  width: 100%;
  height: var(--base-size);
  max-height: calc(var(--base-size) - 48px);
  box-sizing: border-box;
  touch-action: none;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  -webkit-user-select: none;
  user-select: none;
  z-index: -2;
  pointer-events: all;
}

.--mga-middle::before{
  /*content: '';*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(1.24);
  background-image: url(../assets/imgs/str/shaft-game.png);
  background-size: 100%;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.56));
}

.--mga-middle::after{
  content: '';
  position: absolute;
  background: white;
width: 80px;
    height: 80px;
    top: -27px;
    left: calc(50% - 40px);
  border-radius: 25px 25px 0px 0px;
  background-size: 60%;
  background-position: center 12px;
  background-repeat: no-repeat;
  transform: translateY(100%);
  padding-bottom: 10px;
  z-index: -3;
  transition: transform 0.8s;
  transition-delay: calc(var(--game-speed) * 0.5);
  /*border: 4px solid #19212f;*/
}

.--mga-middle.gesture-touch::after{
  background-image: url(../assets/mgs/gesture-touch.png);
  transform: translateY(0%);
}

.--mga-middle.gesture-turn::after{
  background-image: url(../assets/mgs/gesture-turn.png);
  transform: translateY(0%);
}

.--mga-middle.gesture-move::after{
  background-image: url(../assets/mgs/gesture-move.png);
  transform: translateY(0%);
}

.--mga-middle.gesture-gyro::after{
  background-image: url(../assets/mgs/gesture-gyro.png);
  transform: translateY(0%);
}

.--mga-middle.gesture-shake::after{
  background-image: url(../assets/mgs/gesture-shake.png);
  transform: translateY(0%);
}

.--mga-middle.gesture-mic::after{
  background-image: url(../assets/mgs/gesture-mic.png);
  transform: translateY(0%);
}

.--str-minigames-area.endingScene .--mga-top, .--str-minigames-area.endingScene .--mga-bottom, .--str-minigames-area.endingScene .--mga-middle::after{
  opacity: 0 !important;
}

.--str-content {
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  height: stretch;
  gap: 12px;
  padding: 24px;
  position: relative;
}

.--str-leaderboard {
  background: #ffffff73;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 92px 24px;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  transform: translateY(-150%);
  opacity: 0;
  transition: opacity 0.8s, transform 0.8s;
  transition-delay: 0s;
  transition-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
  padding: 24px;
}

.--setbrd-header{
  font-family: 'Digital-7';
  background: #1f2638;
  border-radius: 6px;
  color: #ffffff;
  padding: 12px;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 6px rgb(255 255 255 / 90%), 0 0 12px rgb(255 255 255 / 70%);

}

.--setbrd-content{
 overflow: scroll;
}

.grp-btn-classic{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.grp-btn{
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.grp-btn-training{
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  display: none;
}


.grp-btn-multiplayer{
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  display: none;
}

.right-align {
  justify-content: end;
}

.grp-btn.one button{ 
 /*width: 50%;*/
}

.grp-btn.two button{
 /*width: 50%;*/
}

.start-button{
  font-family: 'Digital-7';
  border: 4px solid white;
  border-radius: 100px;
  margin-top: 0px !important;
  background: #c5cfd9;
  outline: 4px solid #6c757e;
  outline-offset: -8px;
  color: #3f4752;
  font-size: 2rem;
  padding: 8px;
}

#panel-list{
  margin: 24px 0px;
}

.panel-item{
  display:flex;
  align-items:center;
  width:100%;
  height:80px;
  padding:10px 15px;
  box-sizing:border-box;
  border-bottom:1px solid rgba(0,0,0,0.15);
}

.item-label{
  flex: 1;
  color: #ffffff;
  font-size: 2rem;
  font-family: 'Digital-7';
  text-align: left;
}

.checkbox input{
  display:none;
}

.checkbox{
  display: flex;
}

.checkmark{
  width:24px;
  height:24px;

  border-radius:6px;

  background:linear-gradient(#d9dde2,#b7bdc5);

  box-shadow:
  inset 0 2px 3px rgba(255,255,255,0.8),
  inset 0 -2px 3px rgba(0,0,0,0.3),
  0 2px 4px rgba(0,0,0,0.4);

  position:relative;
  display:inline-block;

  cursor:pointer;
}

.checkmark::after{
  content:"";

  position:absolute;
  left:6px;
  top:2px;

  width:8px;
  height:14px;

  border:solid white;
  border-width:0 3px 3px 0;

  transform:rotate(45deg);

  opacity:0;
}

.checkbox input:checked + .checkmark{

  background:linear-gradient(#49d86a,#1f9c42);
}

.checkbox input:checked + .checkmark::after{
  opacity:1;
}
.--str-minigames-area.shaft .--str-leaderboard,   .--str-minigames-area.settings .--str-settings-board {
  transform: translateY(0);
  transition-delay: 3s;
  opacity: 1;
}

.--game-logo{
  display: block;
  position: absolute;
  top: 0px;
  z-index: 12;
  width: 100%;
  max-width: 600px;
  height: 250px;
  background: url(../assets/imgs/elephant/title-screen.png);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center 48px;
  filter: drop-shadow(0px 12px 24px #bebebe);
}

#timer-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

#timer-notches {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  position: absolute;
  top: -85px;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: -1;
}

.beat-notch {
  background-image: url(../assets/imgs/str/bomb-middle.png);
  background-size: contain;
  position: relative;
  flex: 1;
}

.beat-notch:first-child,
.beat-notch:last-child {
  flex: 0 0 80px;
}

.beat-notch:not(:first-child):not(:last-child) {
  background-size: auto 100%;
  background-position: right bottom;
}

.beat-notch:first-child,
.beat-notch.beat-off:first-child {
  background-image: url(../assets/imgs/str/bomb-end.png);
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: cover;
}

.beat-notch.beat-off:last-child::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 10px;
  top: -25px;
  background-image: url(../assets/imgs/str/explosion-1.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.beat-notch.beat-off + .beat-notch:not(.beat-off) {
  background-image: url(../assets/imgs/str/bomb-end.png);
  background-repeat: no-repeat;
  background-position-x: right;
}

.beat-notch.beat-off + .beat-notch:not(.beat-off):not(:last-child)::after, .beat-notch:first-child:not(.beat-off)::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  background-image: url(../assets/imgs/str/bomb-fire-2.png);
  background-size: auto 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  animation: onFire 1s infinite;
}

.beat-notch.beat-off + .beat-notch:not(.beat-off):not(:last-child)::after, .beat-notch:first-child:not(.beat-off)::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  background-image: url(../assets/imgs/str/bomb-fire-2.png);
  background-size: auto 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  animation: onFire 1s infinite;
}

.beat-0 {
  background-image: url(../assets/imgs/str/bomb-start-on-fire.png);
  background-position-x: right;
  background-repeat: no-repeat;
  transform: scale(1.5) rotate(-10deg);
}

.beat-notch:not(.beat-off):not(:has(~ .beat-notch:not(.beat-off))) {
  background-image: url(../assets/imgs/str/bomb-start.png);
}

.beat-1{
  background-image: url(../assets/imgs/str/bomb-start-on-fire.png) !important;
  background-position-x: right;
  background-repeat: no-repeat;
  transform: scale(1.5) rotate(-10deg);
}

.beat-3::after {
  content: '3';
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
  transform: translateY(-20%);
  color: #ffffff;
}

.beat-2::after {
  content: '2';
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
  transform: translateY(-20%) scale(1.2);
  color: #ffcd33;
}

.beat-1::after {
  content: '1';
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
  transform: translateY(-20%);
  color:#ff1100;
}

.beat-1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  background-image: url(../assets/imgs/str/bomb-fire-3.png);
  background-size: auto 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  animation: onFire2 0.8s infinite;
}

.beat-off:not(.beat-notch:last-child) {
  opacity: 0;
  pointer-events: none;
}

#life-bar {
  display: none;
  justify-content: center;
}

.life-container {
  display: inline-block;
  opacity: 0;
  animation: fallDepth 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fallDepth {
  0% {
    opacity: 0;
    transform: scale(4);
    filter: blur(3px);
  }
  70% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

.life-icon {
  width: calc(var(--base-size) * 0.25);
  max-width: 100px;
  display: block;
  animation: wiggle 0.3s infinite;
}

.stamina-container {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 15px;
  background: rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  border-radius: 20px;
  z-index: 10000;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  overflow: hidden;
}

.hands-overlay.is-tutorial .stamina-container {
  display: none;
}

body.hide-eyes.no-stamina .stamina-container {
  display: none;
}

#stamina-bar {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #0A7F6A;
  overflow: hidden;
  transition: width 0.1s linear, background 0.3s;
}

.stamina-slowed #stamina-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
  animation: stamina-slowed 2s infinite;
} 

#status-ok {
  position: fixed;
  top: 40%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
  color: white;
  display: none;
  z-index: 10001;
  pointer-events: none;
}

#status-ok.active {
  display: block;
  animation: textZoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.hands-overlay.is-tutorial #status-ok {
  display: block !important;
  animation: textZoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.stamina-mid #stamina-bar { background: #E1B941; }
.stamina-low #stamina-bar { background: #EA4535; }

.btn-container{
  display: none;
}

.idlescreen .btn-container {
  display: flex;
  width: 70%;
  height: fit-content;
  background: linear-gradient(180deg, #f7fbfc 0%, #dbedf9 100%);
  border-radius: 20px;
  box-shadow: 0px 12px 24px hsl(0deg 0% 75% / 50%);
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0 auto;
  border: 2px solid #51658b;
  animation: bounce 1.8s infinite ease-in-out;
}

.icon-container {
  width: 45px;
  height: 45px;
  background-color: #4cefe5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 3px;
  margin-right: 0px;
}
.text {
  width: calc(100% - 45px);
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lilita One';
  font-weight: normal;
  font-size: clamp(1.92rem, 2.4vw + 1.2rem, 2.7rem);
  color: #e6eef5;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.icon-container svg {
  transition-duration: 1.5s;
  animation: arrow 1s linear infinite;
}

.--floor-number {
  display: flex;
  flex-direction: column;
  text-align: center;
  transform: translateY(40px);
  transition: transform calc(var(--game-speed) * 2) cubic-bezier(0.68, -0.55, 0.27, 1.55);
  font-size: 2rem;
}

.--floor-number.goingup {
  transform: translateY(0px);
}

.--floor-digit {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
  gap: 12px;
  position: relative;
}

.--floors-section{
  position: absolute;
  transform: translate(40%, 24px);
  top: 0;
  left: 50%;
  font-size: clamp(0.907rem, 1.133vw + 0.567rem, 1.275rem);
  color: #000000;
  text-shadow: none;
}

.--floor-digit{
  display: none;
}

.--floor-label {
  position: relative;
}

.--floor-label::after {
  content: '';
  position: absolute;
  right: 90px;
  top: -130px;
  height: 150px;
  width: 100vw;
  background: linear-gradient(180deg, #fcfdfe 0%, #fcfdfe 70%, #ffffff00 100%);
}

.--floor-label::before {
  content: '';
  position: absolute;
  right: 90px;
  bottom: -90px;
  height: 110px;
  width: 100vw;
  background: linear-gradient(0deg, #fcfdfe 0%, #fcfdfe 70%, #ffffff00 100%);
}

#catchphrase {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  opacity: 0;
  transition: transform calc(var(--game-speed) * 1.5) cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity calc(var(--game-speed) * 0.4);
  transform: translateY(calc((100vh / 2) - 21px));
  pointer-events: none;
}

#catchphrase.goingup {
  opacity: 1;
  transform: translateY(calc((80vh - var(--base-size)) / 4));
}

#catchphrase.speedup {
  opacity: 1;
  z-index: 9;
  transform: translateY(calc((100vh / 2) - 21px)) !important;
}

.wiggling-text {
  text-align: center;
}

.wiggling-char {
  display: inline-block;
  animation: wiggle 0.3s infinite;
  font-size: 2rem;
  margin: 2px;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
}

.hands-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, rgba(0,0,0,0) 20%, rgba(0,0,0,0.9) 100%);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  display: flex;
  justify-content: center;
}

.hands-overlay.is-tutorial {
  opacity: 1;
}

.hands-content {
  width: 100%;
  max-width: 600px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  perspective: 1000px;
  overflow: hidden;
}

.hand {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}

.hand.eating {
  animation: eatAction 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 2000 !important;
}

.hand-left, .hand-right {
  animation: wiggleHand 0.3s infinite ease-in-out;
  transition: all 0.2s ease-out;
}

.hand-left {
  background-image: url('../assets/imgs/str/str-left-hand.png');
  background-position: left center;
  translate: -100% 30%;
  rotate: -20deg;
  scale: 0.8;
}

.hand-right {
  background-image: url('../assets/imgs/str/str-right-hand.png');
  background-position: right center;
  translate: 100% 30%;
  rotate: 20deg;
  scale: 0.8;
}

body.hide-eyes .hands-overlay {
  transition-delay: 0s;
  opacity: 1;
}

body.blured-face::after {
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.9) 100%);
}

body.hide-eyes .hand {
  opacity: 1;
}

body.hide-eyes .hand-left {
  --start-x: -60%; --start-y: 20%;
  translate: -60% 20%;
  rotate: 0deg;
  scale: 3.5;
  filter: blur(2px) brightness(0.4);
}

body.hide-eyes .hand-right {
  --start-x: 60%; --start-y: 20%;
  translate: 60% 20%;
  rotate: 0deg;
  scale: 3.5;
  filter: blur(2px) brightness(0.4);
}
.horror-container {
  display: inline-block;
}

.horror-container .--st-elevator {
  z-index: 0;
}

.horror-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgb(2 0 255 / 20%) 0%, rgb(0 0 0) 90%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 11;
  opacity: calc(var(--m-p) * 1.2);
  transition: opacity 0.3s ease;
}

.horror-effect {
  filter:
  brightness(calc(1 - (var(--m-p) * 0.4)))
  contrast(calc(1 + (var(--m-p) * 0.2)))
  grayscale(calc(var(--m-p) * 0.5));
  transition: filter 0.3s ease;
}

.flash-hit {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgb(255 0 0 / 20%) 0%, rgb(0 0 0) 90%);
  z-index: 200;
  pointer-events: none;
  animation: flashAnim 0.4s ease-out forwards;
}

.model {
  --m-scale: 1;
  --m-shake-x: 0px;
  --m-shake-y: 0px;
}

.model::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: url(../assets/imgs/str/model-mackup.png) center no-repeat;
  background-size: contain;
  will-change: transform;
  transform: translate3d(var(--m-shake-x, 0), var(--m-shake-y, 0), var(--m-z, 0px)) scale(var(--m-scale, 1));
}

.model.is-down::after {
  background-image: url(../assets/imgs/str/model-mackup-down.png);
}

@keyframes eatAction {
  0% { 
    scale: 3.5; 
    translate: var(--start-x) var(--start-y); 
    filter: blur(2px) brightness(0.4); 
  }
  40% { 
    scale: 5; 
    translate: var(--start-x) 0%; 
    filter: blur(5px) brightness(0.2);
  }
  50% { translate: var(--start-x) -2%; }
  60% { translate: var(--start-x) 0%; }

  100% { 
    scale: 3.5; 
    translate: var(--start-x) var(--start-y); 
    filter: blur(2px) brightness(0.4); 
  }
}

@keyframes movingElavator {
  0%   { transform: scale(5) translateY(0px); }
  50%  { transform: scale(5) translateY(-5px); }
  80%  { transform: scale(5) translateY(0px); }
  100% { transform: scale(5) translateY(0px); }
}

@keyframes wiggleHand {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-2px, 1px) rotate(-0.5deg); }
  50%  { transform: translate(1px, -2px) rotate(0.5deg); }
  75%  { transform: translate(-1px, -1px) rotate(-0.5deg); }
}

@keyframes wiggle {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-1px, 2px) rotate(-1deg); }
  50%  { transform: translate(2px, -1px) rotate(1deg); }
  75%  { transform: translate(-2px, -2px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes onFire {
  0%   { background-image: url(../assets/imgs/str/bomb-fire-1.png); }
  33%  { background-image: url(../assets/imgs/str/bomb-fire-2.png); }
  66%  { background-image: url(../assets/imgs/str/bomb-fire-5.png); }
  100% { background-image: url(../assets/imgs/str/bomb-fire-6.png); }
}

@keyframes onFire2 {
  0%   { background-image: url(../assets/imgs/str/bomb-fire-3.png); }
  33%  { background-image: url(../assets/imgs/str/bomb-fire-4.png); }
  66%  { background-image: url(../assets/imgs/str/bomb-fire-7.png); }
  100% { background-image: url(../assets/imgs/str/bomb-fire-8.png); }
}

@keyframes onExplode {
  0%   { background-image: url(../assets/imgs/str/explosion-1.png); }
  50%  { background-image: url(../assets/imgs/str/explosion-2.png); }
  100% { background-image: url(../assets/imgs/str/explosion-1.png); }
}

@keyframes flashAnim {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes textZoomIn {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.1); 
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes arrow {
  0% {
    opacity: 0;
    margin-left: 0px;
  }
  100% {
    opacity: 1;
    margin-left: 10px;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
    box-shadow: 0px 12px 24px hsl(0deg 0% 75% / 50%);
  }

  25% {
    transform: translateY(-10px);
    box-shadow: 0px 20px 30px rgba(0,0,0,0.15);
  }

  50% {
    transform: translateY(0);
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  }

  70% {
    transform: translateY(-5px);
    box-shadow: 0px 16px 26px rgba(0,0,0,0.12);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0px 12px 24px hsl(0deg 0% 75% / 50%);
  }
}

@keyframes wave-progress {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes stamina-slowed {
  0% { left: 100%; }
  100% { left: -100%; }
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

@media screen and (min-width: 800px) {
  .--st-roof,
  .--st-floor {
    mix-blend-mode: darken;
  }
}

.--str-challenges{
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 24px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  max-width: 600px;
  margin: auto;
}

.--str-minigames-area.--str-quest .--str-challenges{
  display: flex;
}

.btn-standard{
  display: flex;
  height: 56px;
  background: linear-gradient(180deg, #f7fbfc 0%, #dbedf9 100%);
  border-radius: 20px;
  box-shadow: 0px 12px 24px hsl(0deg 0% 75% / 50%);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
  border: 2px solid #51658b;
}

.btn-text{
  font-size: clamp(1.92rem, 2.4vw + 1.2rem, 2.7rem);
  color: #e6eef5;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.gems-counter {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  color: #d1813b;
  display: flex;
  gap: 12px;
  background: #dce3ee;
  border-bottom: 4px solid #b4c3e0;
  z-index: 1;
}

.global-ui {
  position: absolute;
  bottom: 23px;
  left: 20px;
  padding: 8px 14px;
  border-radius: 20px;
  gap: 12px;
  background: #dce3ee;
  border-bottom: 4px solid #b4c3e0;
  display: none;
  z-index: 2;
}

body.equipped-item .global-ui{
  display: flex;
}

#inventory-slot {
  display: flex;
}

#inventory-slot img{
  width: 32px;
  height: 32px;
}

.equipped-anim {
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  0% { transform: scale(0); rotate: -20deg; }
  100% { transform: scale(1); rotate: 0deg; }
}

.gems-counter .img{
  width: 32px;
  height: 32px;
  background: url(../assets/imgs/str/candy_peanut.png) center / contain no-repeat;

}

.gems-counter span{
  margin: auto;
}

.quest-wrapper{
  display: none;
  flex-direction: column;
}

.quests-container {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  opacity: 1;
}

.quest-title{
  padding: 24px 0px;
  color: #ffffff;
  text-shadow: -3px -3px 0 #4776B9, 3px -3px 0 #4776B9, -3px 3px 0 #4776B9, 3px 3px 0 #4776B9;
}

.quest {
  padding: 24px;
  border: 3px solid #cacaca;
  border-radius: 0px;
  background: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  margin: 3px 0px;
  border-radius: 20px;
}

.quest-next-btn{
  display: flex;
  flex-direction: column;
}

.loading-bar::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(120deg, hsl(0deg 0% 100% / 60%) 0%, hsl(0deg 0% 100% / 60%) 50%, hsl(0deg 0% 100% / 60%) 100%);
  transform: rotate(25deg);
  animation: shine 0.7s infinite;
}

.streak-quest.shine{
  outline: 4px solid #4776B9;
  outline-offset: -4px;
  transform: scale(1.02);
  z-index: 1;
  transition: all 0.2s ease-in-out;
}

.quest.shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(120deg, hsl(0deg 0% 100% / 60%) 0%, hsl(0deg 0% 100% / 60%) 50%, hsl(0deg 0% 100% / 60%) 100%);
  transform: rotate(25deg);
  animation: shine 0.7s infinite;
}

.streak-quest.shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(120deg, hsl(0deg 0% 100% / 60%) 0%, hsl(0deg 0% 100% / 60%) 50%, hsl(0deg 0% 100% / 60%) 100%);
  transform: rotate(25deg);
  animation: shine 2.2s infinite;
}

.quest.shine{
  outline: 4px solid #4776B9;
  outline-offset: -4px;
  transform: scale(1.02);
  z-index: 1;
  transition: all 0.2s ease-in-out;
}

.quest-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.quest-info h3 {
  margin: 0;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.quest-info span {
  font-size: clamp(0.747rem, 0.933vw + 0.467rem, 1.05rem);
  color: #4776B9;
}

.progress-bar {
  width: 100%;
  height: 18px;
  background: #e6eef5;
  border-radius: 10px;
  overflow: hidden;
}

.progress.updating::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
  animation: wave-progress 0.8s infinite;
} 

.quest.remove {
  transform: scale(0.8);
  opacity: 0;
  margin-top: -100px;
  transition: all 0.2s ease-in;
  pointer-events: none;
}

.progress {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: var(--progress);
  background: #4776B9;
  border-radius: 10px;
  transition: width 0.6s ease;
}

.progress:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  height: 6px;
  border-radius: 20px;
  background: #558ddd;
}

.flying-peanut {
  position: fixed;
  width: 72px;
  height: 72px;

  background: url(../assets/imgs/str/candy_peanut.png) center / contain no-repeat;

  z-index: 1000;
  pointer-events: none;
  transition: all 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.quest.exit {
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.4s ease-in;
}

.quest.enter {
  transform: translateX(-100%);
  opacity: 0;
  animation: slideIn 0.4s forwards;
}

@keyframes slideIn {
  to { transform: translateX(0); opacity: 1; }
}

@keyframes counter-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.bump { animation: counter-bump 0.3s ease-out; }

button.flat-btn {
  font-family: 'Lilita One';
  font-weight: normal;
  appearance: button;
  background-color: #324783;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 19px;
  text-align: center;
  touch-action: manipulation;
  transform: translateZ(0);
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  margin-top: auto;
  transition: transform 0.1s;
}

button.flat-btn:after {
 background-clip: padding-box;
 background-color: #4776B9;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
 transition: bottom 0.1s;
}

button.flat-btn:active, button.flat-btn:hover {
  transform: translateY(2px);
}

button.flat-btn:active:after, button.flat-btn:hover:after {
  bottom: -8px;
}

.success-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%; 
  justify-content: end;
  margin-bottom: 12px;
  text-align: center;
}

.recap-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}

.recap-title {
  padding: 24px 0px;
  font-size: clamp(1.28rem, 1.6vw + 0.8rem, 1.8rem);
  color: #5e9bc6;
  display: flex;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}

@keyframes btn-shine-bg {
  0% { background-position: 200% center; }
  25% { background-position: -100% center; }
  100% { background-position: -100% center; }
}

.btn-shine:after {
  background-image: linear-gradient(120deg, hsl(0deg 0% 100% / 60%) 0%, hsl(0deg 0% 100% / 60%) 50%, hsl(0deg 0% 100% / 60%) 100%);
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  animation: btn-shine-bg 3s ease-in-out infinite !important;
}

.shop-actions{
  width: 100%;
}

.sketch-wrapper {
  position: relative;
  width: 100%;
  margin: auto;
  opacity: 0; 
  max-width: 350px;
}

.recap-image {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
  
}

.sketch-wrapper.show {
  opacity: 1; 
  animation: wiggle 5s infinite;
}

.sketch-wrapper.show .recap-image {

  animation: character-landing 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes character-landing {
  0% {

    opacity: 0;
    transform: scale(3) translateY(-100px);
  }
  10% {

    opacity: 1;
  }
  60% {

    transform: scale(0.95) translateY(0);
  }
  100% {

    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.recap-stats-grid {
  display: flex;
  gap: 12px;
}

.stat-card {
  border-radius: 20px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.stat-label {
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  padding: 8px 4px;
  color: #ffffff;
}

.stat-value {
  font-size: clamp(1.067rem, 1.333vw + 0.667rem, 1.5rem);
  background: white;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
}

.stat-card.peanuts { --accent-color: #A81975; }
.stat-card.average { --accent-color: #4776B9; }
.stat-card.timer   { --accent-color: #2F806A; }

.stat-card.peanuts { background: var(--accent-color); }
.stat-card.peanuts .stat-value { color: var(--accent-color); }

.stat-card.average { background: var(--accent-color); }
.stat-card.average .stat-value { color: var(--accent-color); }

.stat-card.timer { background: var(--accent-color); }
.stat-card.timer .stat-value { color: var(--accent-color); }

.recap-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-150px);
  animation: letter-drop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes letter-drop {
  0% { opacity: 0; transform: translateY(-150px); }
  60% { opacity: 1; transform: translateY(10px); }
  80% { transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

.stat-card {
 position: relative;
 opacity: 0;
 transform: scale(2); 
 pointer-events: none;
}

.stat-card.landed::before,
.stat-card.landed::after {
  content: "";
  position: absolute;
  inset: -2px; 
  border-radius: inherit;
  border: 4px solid var(--accent-color);
  opacity: 0;
  z-index: -1; 
  pointer-events: none;
}

.stat-card.landed {
  animation: impact-drop 0.4s ease-out forwards;
}

.stat-card.landed::before {
  animation: shockwave 0.8s ease-out 0.2s forwards; 
}

.stat-card.landed::after {
  animation: shockwave 1s ease-out 0.4s forwards; 
}

@keyframes impact-drop {
  0% { opacity: 0; transform: scale(2.5); }
  70% { transform: scale(0.9); } 
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shockwave {
  0% {
    transform: scale(1);
    opacity: 0.8;
    border-width: 10px;
  }
  100% {
    transform: scale(1.2); 
    opacity: 0;
    border-width: 10px;
  }
}

.continue-btn {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.pop-in {
  animation: btnPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes btnPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.fade-out {
  animation: fadeOut 0.2s ease forwards;
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.success-wrapper, .quest-wrapper {
  transition: opacity 0.4s ease;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.slide-out-left {
  animation: slideOutLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-out-down {
  animation: slideOutDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-up {
  animation: slideInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideOutLeft {
  from { 
    opacity: 1; 
    transform: translateX(0); 
  }
  to { 
    opacity: 0; 
    transform: translateX(-100px); 
  }
}

@keyframes slideOutDown {
  from { 
    opacity: 1; 
    transform: translateY(0); 
  }
  to { 
    opacity: 0; 
    transform: translateY(100px); 
  }
}

@keyframes slideInRight {
  from { 
    opacity: 0; 
    transform: translateX(100px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

@keyframes slideInUp {
  from { 
    opacity: 0; 
    transform: translateY(100px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.fade-out-total {
  animation: fadeOutTotal 0.4s ease forwards;
}

@keyframes fadeOutTotal {
  to { opacity: 0; transform: scale(1.05); }
}

.leaderboard-wrapper {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.score-row {
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 15px 25px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  font-size: clamp(1.28rem, 1.6vw + 0.8rem, 1.8rem);
  color: white;
  margin-bottom: 10px;
  border: 2px solid transparent;
}

.score-row.highlight {
  border-color: #FFC801;
  background: rgba(255, 200, 1, 0.2);
  transform: scale(1.05);
}

.new-record-badge {
  background: #FFC801;
  color: #000;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.5);
}

.new-record-anim {
  animation: recordPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
  recordGlow 1.5s infinite alternate;
}

@keyframes recordPop {
  to { opacity: 1; transform: scale(1.2) rotate(-5deg); }
}

@keyframes recordGlow {
  from { box-shadow: 0 0 10px #FFC801; }
  to { box-shadow: 0 0 30px #FFC801; }
}

.streak-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.flame-container {
  position: relative;
  width: 150px;
  height: 180px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 20px rgba(255, 123, 0, 0.6));
}

.flame-main {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 140px;
  background: linear-gradient(to top, #FF4D00, #FFC801);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  animation: flicker 0.6s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.streak-number {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(2.667rem, 3.333vw + 1.667rem, 3.75rem);
  font-weight: 900;
  color: white;
  text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.ignite {
  animation: igniteFlame 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes flicker {
  0% { transform: translateX(-50%) scale(1); border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%; }
  100% { transform: translateX(-50%) scale(1.05) rotate(1deg); border-radius: 45% 45% 20% 20% / 65% 65% 35% 35%; }
}

@keyframes igniteFlame {
  0% { transform: translateX(-50%) scale(0); opacity: 0; }
  100% { transform: translateX(-50%) scale(1.2); opacity: 1; } 
}

.streak-text { font-size: clamp(1.707rem, 2.133vw + 1.067rem, 2.4rem); font-weight: 900; margin-top: 10px; color: #FFC801; }

.shop-wrapper, .mngames-wrapper, .score-wrapper {
  flex-direction: column;
  overflow: auto;
  margin-left: -24px;
  margin-right: -24px;
  width: calc(100% + 48px);
}

.score-wrapper{
  padding-bottom: 24px;
  padding-top: 96px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 6%, black 10%, black 90%, transparent 100%);
}

.shop-header, .mngames-header, .score-header{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.shop-title, .mngames-title, .score-title{
  width: 100%;
  text-align: center;
  color: #ffffff;
  text-shadow: -3px -3px 0 #4776B9, 3px -3px 0 #4776B9, -3px 3px 0 #4776B9, 3px 3px 0 #4776B9;
}

.shop-descr, .mngames-descr, .score-descr{
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  text-align: left;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.shop-grid, .mngames-grid{
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 24px;
  gap: 0;
  scrollbar-width: none;
  box-sizing: border-box;
}

.score-grid{
  padding: 20px 24px;
}

.shop-item, .mngames-item{
  padding: 24px;
  border: 3px solid #cacaca;
  position: relative;
  
  gap: 12px;
  scroll-snap-align: center;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  max-height: max-content;
}

.item-wrapper{
  display: flex;
  width: 100%;
  gap: 24px;
}

.btn-wrapper{
  display: flex;
  width: 100%;
  gap: 12px;
  margin-top: auto;
}

.item-name{
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  text-align: left;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.item-info{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-icon{
  width: 60px;
  height: 60px;
}

.item-icon img{
  width: 60px;
  height: 60px;
  filter: drop-shadow(2px 4px 3px #bbbbbb);
  border-radius: 10px;
}

.item-desc{
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  color: #4776B9;
  text-align: left;
  max-height: 60px;
  min-height: 60px;
  overflow: auto;
}

.buy-btn, .mng-btn{
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.buy-btn .span{
  margin: auto 0;
}

.buy-btn .img{
  width: 24px;
  height: 24px;
  background: var(--color);
  -webkit-mask: url(../assets/imgs/str/peanut-icon.png) center / contain no-repeat;
  mask: url(../assets/imgs/str/peanut-icon.png) center / contain no-repeat;
}

.buy-btn.locked, .mng-btn.locked, .flat-color-disable{
  filter: grayscale(1);
}

.start-button, .continue-btn{
  width: calc(100% - 0px);
  position: sticky;
  bottom: 24px;
}

button.square-btn{
  width: 50px;
  padding: 13px 0px;
}

body.equipped-item .start-button, body.equipped-item .continue-btn, body.equipped-item .training-button{
  transition: width 0.5s;
  width: calc(100% - 72px);
  margin-left: auto !important;
}

.--str-buttons-menu{
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.shop-column, .mngames-column {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-snap-align: center;
  box-sizing: border-box;
  padding: 0 4px;
}

.mng-btn.btn-remove { filter: grayscale(1); }
.mng-btn.btn-add { }

.flat-color-green{
  background-color: #1e5244 !important;
}

.flat-color-green:after{
  background-color: #2f806a !important;
}

.flat-color-purple{
  background-color: #673AB7 !important;
}

.flat-color-purple:after{
  background-color: #9575CD !important;
}

.flat-color-red{
  background-color: #6b1b19 !important;
}

.flat-color-red:after{
  background-color: #d93834 !important;
}

.flat-color-yellow{
  background-color: #846f2e !important;
}

.flat-color-yellow:after{
  background-color: #ccac4a !important;
}

.flat-color-orange{
  background-color: #b7541d !important;
}

.flat-color-orange:after{
  background-color: #f3984c !important;
}

.flat-color-grey{
  background-color: #b4c3e0 !important;
  color: #252525 !important;
}

.flat-color-grey:after{
  background-color: #dce3ee !important;
}

.flat-color-transparent{
  background-color: transparent !important;
}

.flat-color-transparent:after{
  background-color: transparent !important;
}

.flat-color-transparent .wiggling-char{
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem) !important;
}

#finger-feedback {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; 
  z-index: 999999999999999999999999999999999; 
  will-change: transform, opacity;
  opacity: 0; 
  display: none;
  transform-origin: top left;
  transform: translate(var(--x, -200vw), var(--y, -200vh)) rotate(-15deg);
}

#finger-feedback img {
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 90%, transparent 100%);
  height: 100vh; 
  width: auto;   
  opacity: 0.9;
  display: block;
}

.finger-active {
  display: block !important;
  
  animation: finger-land 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.finger-exit {
  animation: finger-leave 0.2s ease-in forwards;
}

@keyframes finger-land {
  0% {

    transform: translate(var(--x), var(--y)) rotate(-15deg) scale(1.8);
    opacity: 0;
  }
  100% {
    transform: translate(var(--x), var(--y)) rotate(-15deg) scale(1);
    opacity: 1;
  }
}

@keyframes finger-leave {
  0% {
    transform: translate(var(--x), var(--y)) rotate(-15deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) rotate(-12deg) translateY(-20vh) scale(1.1);
    opacity: 0;
  }
}

@keyframes sekFadeUp {
  0% { 
    opacity: 0; 
    transform: translateY(50px) scale(0.95); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.sek-card-tab {
  position: fixed;
  left: -50px;
  bottom: 60px;
  transform: translateY(-50%) rotate(-20deg);
  width: 110px;
  height: 115px;
  background: #fdfdfd; 
  border-radius: 16px;
  
  box-shadow: 6px 6px 15px rgba(0,0,0,0.25), inset -2px 0 5px rgba(0,0,0,0.02);
  cursor: pointer;
  z-index: 999;

  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27), left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27);

  display: flex;
  flex-direction: column;
  overflow: hidden; 
  border: 1px solid #dcdcdc;
}

.sek-card-tab:hover {
  left: -20px; 
  transform: translateY(-50%) rotate(3deg) scale(1.05);
}

.sek-card-tab.hidden {
  left: -150px;
  pointer-events: none;
}

@keyframes sekCardFocusPop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-12px) scale(1.05) rotateZ(-3deg); } 
  70% { transform: translateY(-12px) scale(1.05) rotateZ(2deg); }  
  100% { transform: translateY(0) scale(1) rotateZ(0deg); }        
}

.sek-focus-active {
  animation: sekCardFocusPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sekTypeKeystroke {
  0% { transform: scale(1); }
  50% { transform: scale(0.97) translateY(2px); } 
  100% { transform: scale(1) translateY(0); }
}

.sek-keystroke-active {
  animation: sekTypeKeystroke 0.1s ease-out; 
}

.sek-tab-header {
  height: 32px;
  width: 100%;
  background: #4776b9; 
  border-bottom: 2px solid rgba(0,0,0,0.1);
}

.sek-tab-body {
  padding: 12px 8px 12px 25px; 
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
}

.sek-tab-avatar {
  width: 26px;
  height: 30px;
  background: #e0e4e8;
  border-radius: 4px;
}

.sek-tab-line {
  height: 5px;
  background: #e0e4e8;
  border-radius: 3px;
  width: 100%;
}
.sek-tab-line.short {
  width: 50%;
}

.sek-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgb(0 0 0 / 75%);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000001;
}
.sek-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@keyframes sekColorSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.sek-card-rotator {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; 
}

.sek-spin-active {
  animation: sekColorSpin 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes sekCardPunch {
  0% { transform: scale(1); }
  20% { transform: scale(0.95) rotateX(-4deg); } 
  50% { transform: scale(1.05) rotateX(6deg); }  
  100% { transform: scale(1) rotateX(0deg); }
}

.sek-punch-active {
  animation: sekCardPunch 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes sekAutographPop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; filter: brightness(2); }
  60% { transform: scale(1.3) rotate(5deg); opacity: 1; filter: brightness(1.2); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

.sek-autograph.sek-pop-active {
  animation: sekAutographPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: center; 
}

.sek-modal-container {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  padding: 24px;
  box-sizing: border-box;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.sek-player-modal .sek-modal-container {
  transform: translate(-40vw, 0) scale(0.3);
}

.sek-classic-modal .sek-modal-container {
  transform: translateY(60px) scale(0.9);
}

.sek-modal-overlay.active .sek-modal-container {
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}

.sek-modal-overlay.active .sek-hand-thumb{
  pointer-events: auto;
}

.sek-card-area {
  flex: 1 1 auto;       
  width: 100%;
  max-width: 420px;     
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
}

.sek-editor-panel {
  flex: 0 0 280px;      
  width: 100%;
  color: #fff;
  max-width: 250px;
  box-sizing: border-box;
}

.sek-editor-panel h3 {
  margin-top: 0;
  border-bottom: 1px solid #323d4f;
  padding-bottom: 10px;
  color: #e6cd5b;
}
.sek-editor-section {
  margin-bottom: 20px;

}
.sek-editor-section label {
  display: block;
  font-size: clamp(0.64rem, 0.8vw + 0.4rem, 0.9rem);
  text-transform: uppercase;
  color: #8fa0b7;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.sek-editor-input {

  font-family: 'Lilita One';
  font-weight: normal;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1.125rem);
  letter-spacing: .8px;
  line-height: 20px;

  padding: 13px 19px;
  box-sizing: border-box;
  border-radius: 16px;
  outline: none;
  width: 100%;

  background-color: #dce3ee;
  color: #252525;

  border: 2px solid #dce3ee;
  border-bottom-width: 0; 
  box-shadow: 0 4px 0 0 #b4c3e0;

  transform: translateZ(0);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}

.sek-editor-input:focus {
  transform: translateY(1px);
  box-shadow: 0 3px 0 0 #b4c3e0; 
}

.sek-select-wrapper {
  position: relative;
  width: 100%;
}

.sek-autograph-select {

  font-family: 'Lilita One';
  font-weight: normal;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1.125rem);
  letter-spacing: .8px;
  line-height: 20px;

  padding: 13px 40px 13px 19px;
  box-sizing: border-box;
  border-radius: 16px;
  outline: none;
  width: 100%;
  cursor: pointer;

  background-color: #dce3ee;
  color: #252525;

  border: 2px solid #dce3ee;
  border-bottom-width: 0;
  box-shadow: 0 4px 0 0 #b4c3e0;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  transform: translateZ(0);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s, background-image 0.1s;
}

.sek-select-icon {
  position: absolute;
  right: 20px;
  top: 55%;
  transform: translateY(-50%); 
  color: #252525;               
  font-size: clamp(0.853rem, 1.067vw + 0.533rem, 1.2rem);

  pointer-events: none; 

  transition: color 0.1s, transform 0.1s;
}

.sek-autograph-select:focus {
  border-color: #dce3ee;
  box-shadow: 0 4px 0 0 #bda84a;
  transform: translateY(1px);
  box-shadow: 0 3px 0 0 #b4c3e0;
}

.sek-autograph-select:focus ~ .sek-select-icon {
  transform: translateY(calc(-50% + 1px)); 
}

.sek-autograph-select option {
  background-color: #b4c3e0; 
  color: #252525;
  text-transform: none; 
  font-family: sans-serif; 
}

.sek-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sek-color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
}
.sek-color-dot:hover { transform: scale(1.15); }
.sek-color-dot.selected { border-color: #fff; transform: scale(1.1); }

.sek-save-btn{
  width: 100%;
}

@media (max-width: 768px) {

  .sek-modal-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; 
    padding-top: 10px;
  }

  .sek-editor-section{

  }

  .sek-card-area {
    width: 100%;
    max-width: 85vw; 
    margin-top: 0 !important;
    order: -1;
  }

  .sek-editor-area {
    margin-top: auto;
    width: 100%;
  }

  .sek-editor-panel {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%; 
  }
}

.sek-modal-overlay .sek-scene {
  opacity: 0;
}


.sek-scene {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 420 / 260;
  perspective: 1000px;
  cursor: pointer;
  margin: 0 auto;
  box-sizing: border-box;
}

.sek-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border: 3px solid #cacaca;
  background: white;
}

.sek-flip-to-back { animation: sekFlipBack 0.5s cubic-bezier(0.4, 0.2, 0.2, 1) forwards; }
.sek-flip-to-front { animation: sekFlipFront 0.5s cubic-bezier(0.4, 0.2, 0.2, 1) forwards; }

@keyframes sekFlipBack {
  0% { transform: translateZ(0) rotateY(0deg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
  50% { transform: translateZ(40px) rotateY(90deg); box-shadow: 0 20px 30px rgba(0,0,0,0.4); }
  100% { transform: translateZ(0) rotateY(180deg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
}

@keyframes sekFlipFront {
  0% { transform: translateZ(0) rotateY(180deg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
  50% { transform: translateZ(40px) rotateY(90deg); box-shadow: 0 20px 30px rgba(0,0,0,0.4); }
  100% { transform: translateZ(0) rotateY(0deg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
}

.sek-card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
  border-radius: 16px;
  background-color: #fdfdfd;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.08);
  box-sizing: border-box;
}

.sek-card-back {
  transform: rotateY(180deg) translateZ(1px);
  background-image: url(../assets/imgs/str/klinik-logo.png);
  background-position: center;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  background-repeat: no-repeat;
  justify-content: end;
  align-items: center;
}

.sek-header {
  background-color: #4776b9;
  color: white;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sek-logo-square {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background-color: white;
  color: #4776b9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  border-radius: 4px;
}

.sek-header h1 {
  margin: 0;
  font-size: clamp(0.64rem, 0.8vw + 0.4rem, 0.9rem);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sek-body {
  display: flex;
  padding: 4% 5%;
  gap: 5%;
  flex-grow: 1;
  align-items: flex-start;
}

.sek-qr-wrapper {
  width: 22%;
  max-width: 85px;
  aspect-ratio: 1;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.sek-qr-wrapper img, .sek-qr-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}

.sek-info-block {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  text-align: left;
}

.sek-row {
  display: flex;
  flex-direction: column;
}

.sek-label {
  font-weight: normal;
  font-size: clamp(0.747rem, 0.933vw + 0.467rem, 1.05rem);
  text-align: left;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.sek-value {
  font-size: clamp(0.747rem, 0.933vw + 0.467rem, 1.05rem);
  font-weight: normal;
  color: #4776B9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input[type="text"].sek-input-name {
  border: none;
  border-bottom: 1px dashed #bdc3c7;
  background: transparent;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  font-weight: normal;
  color: #4776B9;
  font-family: inherit;
  padding: 2px 0;
  width: 100%;
  outline: none;
}
input[type="text"].sek-input-name:focus {
  border-bottom: 1px solid #477689;
}

.sek-sub-grid {
  display: flex;
  gap: 12px;
}

.sek-footer {
  position: absolute;
  
  top: 25%; 
  right: 1%; 
  
  height: auto; 
}

.sek-autograph {
  opacity: 0.85;
  user-select: none;

  width: 180%; 
  max-width: 200px; 
  min-width: 100px;  
}

.sek-autograph img {
  width: 100%;
  height: auto;
  display: block; 
}

.sek-chip {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 12%;
  max-width: 45px;
  aspect-ratio: 45 / 35;
}

.sek-chip img{
  width: 100%;
  height: auto;
}

.sek-back-logo {
  text-align: center;
  opacity: 1;
  user-select: none;
  padding: 24px;
}
.sek-back-logo .sek-logo-square {
  width: 50px;
  height: 50px;
  font-size: clamp(2.133rem, 2.667vw + 1.333rem, 3rem);
  margin: 0 auto 5px auto;
  background-color: #2c3e50;
  color: #f3f3f3;
}
.sek-back-logo h2 {
  color: #d0d4d6;
  font-size: clamp(1.067rem, 1.333vw + 0.667rem, 1.5rem);
  margin: 0;
  letter-spacing: 2px;
  font-family: monospace;
}

.score-leaderboard {
  width: 100%;
  border-top: 1px dashed #bdc3c7;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  color: #4776B9;
}

.leaderboard-item {
  display: flex;
  width: 100%;
  
  border-bottom: 1px solid rgba(71, 118, 185, 0.2); 
}

.patient-row {
  padding: 16px 0px;
  color: #4776b9;
  width: 100%;
  display: flex;
  align-items: center; 
  gap: 12px;
}

.patient-id-card {
  flex: 0 0 60px; 
  aspect-ratio: 420 / 260;
  border: 3px solid #cacaca;
  border-radius: 8px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(71, 118, 185, 1) 70%);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: center;
  transform: rotate(-14deg) scale(0.8);
}

.leaderboard-item.smash-record-row {
  position: relative;
  z-index: 50; 

  animation: 
  smashIn3D 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes smashIn3D {
  0% {
    opacity: 0;
    transform: scale(0.2);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  40% {
    opacity: 1;
    
    transform: scale(1.3);
    box-shadow: 0 30px 40px rgba(0,0,0,0.6); 
  }
  80% {

    transform: scale(0.95);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  100% {

    transform: scale(1);
  }
}

@keyframes goldPulseSmash {
  from {
    box-shadow: 0 0 5px rgba(230, 205, 91, 0.2);
    border-color: rgba(230, 205, 91, 0.5) !important;
  }
  to {
    box-shadow: 0 0 25px rgba(230, 205, 91, 1);
    border-color: #e6cd5b !important;
  }
}

.leaderboard-item.current-player-row {
  outline: 3px solid #e6cd5b;
  outline-offset: 6px;
  border-radius: 8px;
  background: #faf5de;
  position: relative;
  z-index: 10;
}

.leaderboard-item.current-player-row::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 14px;
  pointer-events: none;
}

.current-player-row .patient-rank {
  color: #e6cd5b;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 12px rgba(230,205,91,0.8);
}

.patient-info {
  text-align: left;
  flex: 1 1 auto; 
  min-width: 0;   
}

.patient-name {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patient-nationality {
}

.score-floor {
  flex: 0 0 80px; 
  text-align: center;
}

.end-floor {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  margin: auto;
}

.patient-rank {
  flex: 0 0 50px; 
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  font-size: clamp(1.173rem, 1.467vw + 0.733rem, 1.65rem);
}

.sek-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 19, 26, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999; 

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.sek-dialog-overlay.sek-dialog-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sek-dialog-box {
  background-color: #ffffff;
  width: calc(100% - 48px);
  max-width: 460px;
  border-radius: 24px;
  padding: 24px;
  box-sizing: border-box;
  border: 3px solid #4776B9;
  border-bottom-width: 0;
  box-shadow: 0 7px 0 0 #324783;

  transform: scale(0.8) translateY(20px);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sek-dialog-active .sek-dialog-box {
  transform: scale(1) translateY(0);
}

.sek-dialog-header h2 {
  font-family: 'Lilita One';
  color: #4776B9;;
  margin: 0 0 16px 0;
  font-size: clamp(1.067rem, 1.333vw + 0.667rem, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sek-dialog-body {
  color: #000000;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1.125rem);
  line-height: 22px;
  margin-bottom: 24px;
}

.sek-dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sek-dialog-btn {
  font-family: 'Lilita One';
  font-size: clamp(0.747rem, 0.933vw + 0.467rem, 1.05rem);
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer !important;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  pointer-events: auto !important;
  transition: transform 0.1s, box-shadow 0.1s;
}

.sek-dialog-btn-primary {
  background-color: #e6cd5b;
  color: #0f131a;
  border: 2px solid #ffffff;
  border-bottom-width: 0;
  box-shadow: 0 4px 0 0 #bda84a;
}
.sek-dialog-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #bda84a;
}

.sek-dialog-btn-secondary {
  background-color: #1e2530;
  color: #ffffff;
  border: 2px solid #4776B9;
  border-bottom-width: 0;
  box-shadow: 0 4px 0 0 #121720;
}
.sek-dialog-btn-secondary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #121720;
}

.sek-dialog-btn-danger {
  background-color: #eb5757;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-bottom-width: 0;
  box-shadow: 0 4px 0 0 #ad3636;
}
.sek-dialog-btn-danger:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #ad3636;
}

@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

.skeleton-box {
  background: #eef2f5; 
  
  background-image: linear-gradient(to right, #eef2f5 0%, #a7a7a754 20%, #eef2f5 40%, #eef2f5 100%);
  background-repeat: no-repeat;
  background-size: 800px 100%; 
  animation: shimmer 1.5s infinite linear forwards;
  border-radius: 4px;
}

.skel-card { width: 60px; height: 38px; border-radius: 8px; }
.skel-name { height: 18px; margin-bottom: 8px; }
.skel-country {  height: 12px; }
.skel-score { width: 50px; height: 24px; margin: 0 auto; }
.skel-rank { width: 30px; height: 28px; margin-left: auto; }

@keyframes itemPopIn {
  0% { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.leaderboard-item.animate-entry {
  opacity: 0; 
  
  animation: itemPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.sek-hand-thumb {
  cursor: pointer;
  transition: transform 0.2s, border 0.2s, box-shadow 0.2s, height 0.2s;
}

.sek-hand-thumb:hover {
  box-shadow: inherit 0px 0px 0px 0px;
  height: 99px;
}

.sek-hand-thumb.selected {
 background: rgb(71, 118, 185) !important;
 box-shadow: rgb(50, 71, 131) 0px 4px 0px 0px !important;
}

.fast-in-char {
  display: inline-block;
  opacity: 0;

  animation: 
  dashIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
  wiggle 0.3s infinite alternate;

  animation-delay: 
  var(--enter-delay), 
  calc(var(--enter-delay) + var(--wiggle-delay)) !important;
}

@keyframes dashIn {
  0% {
    transform: translateX(-50vw) skewX(30deg); 
    opacity: 0;
  }
  100% {
    transform: translateX(0) skewX(0);
    opacity: 1;
  }
}

.cartoon-dash-out {

  animation: dashOutRight 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
}

@keyframes dashOutRight {
  0% { 
    transform: translateX(0) skewX(0); 
    opacity: 1; 
  }
  20% { 

    transform: translateX(-20px) skewX(-10deg); 
  }
  100% { 

    transform: translateX(100vw) skewX(-30deg); 
    opacity: 0; 
  }
}

@media (max-height: 800px) {
  .sketch-wrapper {
    max-width: 250px;
  }

  .shop-header, .score-header, .mngames-title, .mngames-descr{
    display: none;
  }

  #minigames-filters{
    margin: 12px 0px;
  }
}

.share-carousel-container::-webkit-scrollbar { display: none; }
.share-carousel-container { scrollbar-width: none; -ms-overflow-style: none; }
@keyframes popIn { 
  0% { transform: scale(0.85); opacity: 0; } 
  100% { transform: scale(1); opacity: 1; } 
}
.format-btn {
  background: rgba(255,255,255,0.1); color: white; border: none;
  padding: 8px 16px; border-radius: 20px; font-family: inherit; font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  cursor: pointer; transition: all 0.2s ease;
}
.format-btn:hover { background: rgba(255,255,255,0.2); }
.format-btn.active { background: rgba(255,255,255,0.3); box-shadow: 0 0 10px rgba(255,255,255,0.2);}

.patient-id-card-top{
  cursor: pointer; 
  margin-top: 12px;
  font-size: clamp(0.853rem, 1.067vw + 0.533rem, 1.2rem);
  opacity: 0.6;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.patient-id-card-top:first-child{
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  cursor: pointer; margin-top: 12px; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.mngames-header .format-btn {
  background: rgb(113 113 113);
}

.mngames-header .format-btn.active { background: rgb(71 71 71); }

.tag-new:before{
  content: 'New !';
  position: absolute;
  background: #d93834;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  transform: rotate(-12deg);
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1.125rem);
  animation: pulse-tag 1s ease-out infinite;
}

.shop-item.tag-new:before{
  top: -12px;
  left: -12px;
}

.flat-btn.tag-new:before{
  top: -24px;
  left: -24px;
}

@keyframes pulse-tag {
  0% {
    transform: rotate(-12deg) scale(1.0);
  }
  50% {
    transform: rotate(-12deg) scale(1.1);
  }
  100% {
    transform: rotate(-12deg) scale(1.0);
  }
}

.multiplayer-wrapper{
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin-left: -24px;
  margin-right: -24px;
  color: black;
  width: calc(100% + 48px);
}

.multiplayer-header{
  margin-bottom: 48px;
}

.multiplayer-title{
  width: 100%;
  text-align: center;
  color: #ffffff;
  text-shadow: -3px -3px 0 #2f806a, 3px -3px 0 #2f806a, -3px 3px 0 #2f806a, 3px 3px 0 #2f806a;
}

.multiplayer-descr{
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  text-align: center;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.multiplayer-grid{
  width: calc(100% - 48px);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.multiplayer-card{
  padding: 24px;
  border: 3px solid #cacaca;
  position: relative;
  gap: 12px;
  scroll-snap-align: center;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.multiplayer-card-img{
  width: 60%;
}

.multiplayer-card-title{
  text-align: center;
  color: #2f806a;
  text-shadow: -4px -4px 0 rgb(255 255 255 / 80%), 4px -4px 0 rgb(255 255 255 / 80%), -4px 4px 0 rgb(255 255 255 / 80%), 4px 4px 0 rgb(255 255 255 / 80%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.multiplayer-bottom-btn{
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.multiplayer-action-btn{
  width: 100%;
}

.multiplayer-card-descr{
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  color: #2f806a;
  text-align: center;
}

.multiplayer-card-input{
  width: 100%;
  display: flex;
  gap: 12px;
}

.multiplayer-img-container{
  position: relative;
}


/* --- Le Plateau Principal --- */
.multiplayer-board {
  top: 0px;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  padding: 0px 24px;
  container-type: inline-size;
  width: calc(100% - 48px);
  height: calc((100vh - var(--base-size)) / 2);
  min-height: 100px;
  max-width: 600px;
  color: white;
  z-index: 12;
  position: absolute;
}

.multiplayer-players{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.multiplayer-code{
  margin: auto;
}

/* --- La Colonne (Wrapper) --- */
.card-wrapper {
  /* Si <= 4 colonnes : prend 25% max. 
     Si > 4 colonnes : rétrécit équitablement (ex: 12.5% pour 8 colonnes) */
     flex: 1 1 0;
     max-width: 25%;
     min-width: 0; /* Obligatoire pour autoriser le rétrécissement sous le contenu */
     display: flex;
     justify-content: center;
     position: relative;
     margin-top: auto;
     transition: z-index 0s;
   }

/* Astuce : ramène la carte au premier plan quand on la survole */
.card-wrapper:hover {
  z-index: 10;
}

/* Modification du badge existant */
.multiplayer-id-card {
  position: relative; /* Requis pour positionner la pastille et la couronne */
  width: 24cqi;
  aspect-ratio: 420 / 260;
  border: 3px solid #cacaca;
  border-radius: 8px;
  background: linear-gradient(0deg, #ffffff 0%, #ffffff 70%, #4776b9 70%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate(-14deg) scale(1.1);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  container-type: inline-size;
}

/* Pastille d'état (haut à droite) */
.card-status-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
  border: 2px solid #cacaca;
}

.card-status-badge.status-ready {
  background-color: #2f806a;
  color: #ffffff;
}

.card-status-badge.status-not-ready {
  background-color: #ffffff;
  color: #000000;
}

.card-host-crown {
  position: absolute;
  top: -12px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #cacaca;
}


.remote-finger {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999999999;
  will-change: transform, opacity;
  opacity: 0;
  transform-origin: top left;
  transform: translate(var(--x, -200vw), var(--y, -200vh)) rotate(-15deg);
  transition: transform 0.08s linear, opacity 0.2s ease;
}

.remote-finger.finger-active {
  opacity: 1;
}

.remote-finger.finger-exit {
  opacity: 0;
}

.remote-finger img {
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 90%, transparent 100%);
  height: 100vh;
  width: auto;
  opacity: 0.5;
  display: block;
}

/* --- Le Texte --- */
.multiplayer-name {
  font-size: 18cqi;
  color: #252525d6 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  margin-top: 14%;
}

@keyframes slideInDiagonal {
  0% {
    opacity: 0;
    transform: translate(-80px, 80px) rotate(-14deg) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(-14deg) scale(1.1);
  }
}

.card-enter {
  animation: slideInDiagonal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes slideOutDiagonal {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(-14deg) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-80px, 80px) rotate(-14deg) scale(0.6);
  }
}

.card-exit {
  animation: slideOutDiagonal 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.card-status-badge.status-playing {
  background-color: #fff;
  color: #000;
}
.card-status-badge.status-won {
  background-color: #2f806a;
  color: white;
}
.card-status-badge.status-lost {
  background-color: #d93834;
  color: white;
}

.card-winner-badge {
  position: absolute;
  top: -12px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #cacaca;
  display: none;
}

/* Lévitation perpétuelle de toute la carte dans le salon */
@keyframes card-levitate {
  0%, 100% { transform: translateY(0px) rotate(-14deg); }
  50% { transform: translateY(-8px) rotate(-14deg); }
}
.card-levitate {
  animation: card-levitate 2s ease-in-out infinite;
}

/* Animation Victoire sur la carte (Gros rebond) */
@keyframes card-win-bounce {
  0% { transform: scale(1) rotate(-14deg); }
  30% { transform: scale(1.12) rotate(2deg); }
  60% { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(-14deg); }
}
.anim-card-win {
  animation: card-win-bounce 0.5s ease-in-out;
  animation-delay: 1s;
}

/* Animation Défaite sur la carte (Secousse horizontale) */
@keyframes card-lose-shake {
  0%, 100% { transform: translateX(0) rotate(-14deg); }
  20%, 60% { transform: translateX(-6px) rotate(-2deg); }
  40%, 80% { transform: translateX(6px) rotate(2deg); }
}
.anim-card-lose {
  animation: card-lose-shake 0.4s ease-in-out;
  animation-delay: 1s;
}

/* Style du texte flottant au-dessus de la carte */
.floating-status-text {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 18px;
  pointer-events: none;
  z-index: 30;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
  animation: float-up-fade 1.5s forwards ease-out;
}

@keyframes float-up-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.5); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1.2); }
  80% { opacity: 1; transform: translateX(-50%) translateY(-25px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-35px) scale(0.8); }
}

.text-win { color: #2f806a; } 
.text-lose { color: #d93834; }


/* --- Conteneur global de l'interrupteur --- */
.flat-switch-container {
  flex: 1; /* Prend 100% de l'espace restant */
  position: relative;
  margin-top: auto;
  cursor: pointer;
  display: block;
  min-width: 120px; /* Assure une largeur minimale correcte */
  height: 46px; /* Hauteur standard de tes boutons */
  user-select: none;
  -webkit-user-select: none;
}

/* Cache la vraie checkbox */
.flat-switch-container input[type="checkbox"] {
  display: none;
}

/* --- Le "Rail" (Fond creusé) --- */
.flat-switch-track {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  bottom: 4px;
  background-color: #1a2542;
  border-radius: 16px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
  z-index: 0;
  overflow: hidden;
}

/* Texte incrusté dans le rail pour plus de clarté */
.track-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Lilita One';
  font-size: 1rem;
  color: #ffffff44; /* Blanc transparent */
  z-index: 0;
}
.text-bg-on { left: 15%; }
.text-bg-off { right: 15%; }

/* --- Le Curseur 3D (Reprend ton Flat-Btn) --- */
.flat-switch-thumb {
  position: absolute;
  top: -4px;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  font-family: 'Lilita One';
  font-weight: normal;
  background-color: #7a7a7a;
  border-radius: 16px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-size: clamp(0.96rem, 1.2vw + 0.6rem, 1.35rem);
  letter-spacing: .8px;
  line-height: 20px;
  padding: 13px 0;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
  box-shadow: 0 4px 0 0 #474747;
}

/* Le relief 3D sous le curseur */
.flat-switch-thumb:after {
  background-clip: padding-box;
  background-color: #5c5c5c;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  transition: bottom 0.1s, background-color 0.2s;
}

/* --- BASCULE SUR L'ÉTAT ON --- */
.flat-switch-container input:checked ~ .flat-switch-thumb {
  transform: translateX(100%); /* Fait glisser le bouton sur la droite */
  background-color: #324783; /* Ton bleu officiel */
  box-shadow: 0 4px 0 0 #374482;
}

.flat-switch-container input:checked ~ .flat-switch-thumb:after {
  background-color: #4776b9;

}

/* --- EFFET DE CLIC (Maintien de ton effet d'enfoncement 3D) --- */
/* Clic quand OFF */
.flat-switch-container:active input:not(:checked) ~ .flat-switch-thumb {
  transform: translateY(2px);
}
/* Clic quand ON (combine la glissade et l'enfoncement) */
.flat-switch-container:active input:checked ~ .flat-switch-thumb {
  transform: translateX(100%) translateY(2px);
}

/* --- GESTION DES TEXTES DU BOUTON --- */
.flat-switch-thumb .text-on { display: none; }
.flat-switch-thumb .text-off { display: inline-block; }

.flat-switch-container input:checked ~ .flat-switch-thumb .text-on { display: inline-block; }
.flat-switch-container input:checked ~ .flat-switch-thumb .text-off { display: none; }