matrix-engine-wgpu/public/css/style.css

Networking implemented - based on kurento openvidu server. fix arcball camera,instanced draws added also effect pipeline blend with instancing option.Normalmap added, Fixed shadows casting vs camera/video texture, webGPU powered pwa application. Crazy fas

@font-face {
  font-family: stormfaze;
  src: url(../../public/res/fonts/stormfaze.ttf),
    url(../res/fonts/stormfaze.ttf);
}

@font-face {
  font-family: wargames;
  src: url(../../public/res/fonts/wargames.ttf);
}

html,
body {
  color: white;
  background-color: #95003d;
  font-family: "stormfaze";
  font-size: 14px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100dvh;
  text-align: center;

  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.575);

  cursor: url(../res/icons/default.png) 0 0, auto;
}

div {
  cursor: url(../res/icons/default.png) 0 0, auto;
}

.meBody {
  font-family: stormfaze;
  cursor: url(../res/icons/default.png) 0 0, auto;
}

.noselection {
  -webkit-touch-callout: none;
  /* Safari */
  user-select: none;
  /* standard syntax */
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
}

*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* This one works! */
*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(102, 102, 102);
  border-radius: 8px;
}

body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 9px;
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6);
}


textarea:focus,
input:focus {
  outline: none;
}

a {
  font-family: stormfaze;
  color: #0080ff;
}

button {
  font-family: stormfaze;
}

iframe {
  border: none;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#matrix-editor {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
}

.debugBox {
  position: absolute;
  left: 5px;
  bottom: 0;
  font-size: 12px;
  width: 200px;
  height: 15px;
  background-color: black;
  color: lime;
}

.textEditor {
  font-size: 10px;
  width: 100%;
  max-width: 850px !important;
  min-width: 550px !important;
}

.header {
  text-shadow: 0px 0px 14px #ffd52e;
  background-color: black;
  color: rgb(255, 255, 255);
}

textarea {
  -webkit-box-shadow: inset 0px 0px 22px 2px rgba(0, 255, 30, 1);
  -moz-box-shadow: inset 0px 0px 22px 2px rgba(0, 255, 30, 1);
  box-shadow: inset 0px 0px 22px 1px rgba(0, 255, 30, 1);
  background-color: black;
  color: lime;
}

.textureCanvas2d {
  display: none;
  position: absolute;
  left: -3000px;
  top: 0px;
  width: 512px;
  height: 512px;
}

/** Style for UI system hud controls */

.matrixTagHolder {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  background-color: black;
  color: #0080ff;
  font-family: stormfaze;
}

span {
  width: 100px;
}

.mLightInput {
  width: 150px;
  font-size: 26px;
}

.mLightCom {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  border: solid #0c2540 3px;
}

.timeLine {
  display: flex;
  position: absolute;
  left: 5%;
  top: 85%;
  width: 90%;
  flex-direction: column;
}


.timeLineSlider {
  display: flex;
  flex-direction: row;
}

.timeLineSlider,
p {
  background: rgba(12, 122, 22, 0.5);
  width: 100%;
  margin: 5px 5px 5px 5px;
}

/* For animation Line */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: #00ffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 24px;
  background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
  border: 2px solid #00ffff;
  border-radius: 12px;
  box-shadow: 0 0 10px #00ffff44, 0 0 20px #00ffff22 inset;
  /* cursor: pointer; */
  transition: all 0.25s ease-in-out;
  display: inline-block;
  text-align: center;
}

.btn:hover {
  background: #00ffff78;
  box-shadow: 0 0 20px #00ffffaa, 0 0 30px #00ffff55 inset;
  color: #ffffff;
  transform: scale(1.05);
}

.btn3 {}

.btn3:hover {
  background: #5d5d5d81;
  box-shadow: 0 0 20px #00ffffaa, 0 0 30px #00ffff55 inset;
  color: #ffffff;
  transform: scale(1.02);
}

.btn span::before {
  content: '▶ ';
  color: #00ffffaa;
}

.fancy-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #00ffff;
  letter-spacing: 1px;
  text-shadow: 0 0 4px #00ffffaa;
  padding: 2px 6px;
  background-color: #111111cc;
  border: 1px solid #00ffff66;
  border-radius: 6px;
  box-shadow: 0 0 6px #00ffff33;
  display: inline-block;
  user-select: none;
}

.fancy-title {
  width: 100%;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #00ffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  text-shadow: 0 0 4px #00ffffaa, 0 0 8px #00ffff55;
  border: none;
  padding: 8px 16px;
  display: inline-block;
  user-select: none;
}

.btn2 {
  cursor: pointer;
  background: #d93434;
  background-image: -webkit-linear-gradient(top, orangered, #0a027a);
  background-image: -moz-linear-gradient(top, orangered, #0a027a);
  background-image: -ms-linear-gradient(top, orangered, #0a027a);
  background-image: -o-linear-gradient(top, orangered, #0a027a);
  background-image: linear-gradient(to bottom, orangered, #0a027a);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 0px 0px 14px #ffd52e;
  -webkit-box-shadow: 0px 1px 26px #666666;
  -moz-box-shadow: 0px 1px 26px #666666;
  box-shadow: 0px 1px 26px #666666;
  color: #ffffff;
  font-size: 13px;
  padding: 4px 8px 4px 8px;
  text-decoration: none;
}

.btn2:hover {
  background: #0a027a;
  background-image: -webkit-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -moz-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -ms-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -o-linear-gradient(top, #0a027a, #6e34d9);
  background-image: linear-gradient(to bottom, #0a027a, #6e34d9);
  text-decoration: none;
}

#blocker {
  z-index: 2;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;

  background: linear-gradient(291deg, #2960bb, #b22710, #b22710);
  background-size: 600% 600%;

  -webkit-animation: bganim 10s ease infinite;
  -moz-animation: bganim 10s ease infinite;
  -o-animation: bganim 10s ease infinite;
  animation: bganim 10s ease infinite;
}

#messageBox {
  font-size: large;
  padding: 10%;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}

#msgBox {
  z-index: 10;
  text-shadow: 0px 4px 4px #282828;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  background: rgb(2, 0, 36);
  /* background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 81, 121, 0.8463760504201681) 34%, rgba(0, 212, 255, 1) 100%); */
}

.msg-box {
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  translate: -50%;
  border-radius: 6px !important;
  font-size: 15px !important;
  width: 300px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;

  &.error {
    /* background-color: rgb(93, 4, 5); */
    color: rgb(255, 0, 30);
  }

  &.success {
    /* background-color: rgb(220, 14, 14); */
    color: rgb(32, 255, 84);
    text-align: center;
    margin-left: -150px;
    z-index: 20;
  }
}

.canPlay {
  border: solid limegreen 1px;
}

.canNotPlay {
  border: unset;
}


.myTheme1 {
  background: rgb(235, 1, 110);
  background: radial-gradient(circle, rgb(255, 73, 179) 7%, rgba(0, 144, 224, 0.9332107843137255) 57%, rgba(0, 212, 255, 1) 85%);
}

.stroke {

  text-shadow: 0px 4px 4px #282828;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.animate1 {
  text-shadow: 0px 4px 4px #282828;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;

  background: linear-gradient(270deg, #8e8e8e, #65757a);
  background-size: 50% 50%;

  -webkit-animation: AnimationName 2s ease infinite;
  -moz-animation: AnimationName 2s ease infinite;
  animation: AnimationName 2s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}


.bganim1 {
  background: linear-gradient(291deg, #2960bb, #b22710, #b22710);
  background-size: 600% 600%;

  -webkit-animation: bganim 10s ease infinite;
  -moz-animation: bganim 10s ease infinite;
  -o-animation: bganim 10s ease infinite;
  animation: bganim 10s ease infinite;
}

@-webkit-keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

@-moz-keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

@-o-keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

@keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  /* You can adjust */
  height: 32px;
}

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

/* Force span to fill the label exactly */
.sliderSwitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #111;
  border-radius: 34px;
  border: 2px solid #00ffee;
  box-shadow: 0 0 10px #00ffee55;
  transition: all 0.4s ease;
  overflow: hidden;
  z-index: 1;
}

/* The circle inside the slider */
.sliderSwitch::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 4px;
  bottom: 4px;
  background-color: #00bbff;
  border-radius: 50%;
  transition: transform 0.4s ease;
  z-index: 2;
  box-shadow: 0 0 10px #00bbff;
}

/* ON state */
.switch input:checked+.sliderSwitch {
  background-color: #002233;
  border-color: #00ffee;
  box-shadow: 0 0 12px #00ffee;
}

.switch input:checked+.sliderSwitch::before {
  transform: translateX(28px);
  background-color: #00ffee;
  box-shadow: 0 0 10px #00ffee;
}

select {
  appearance: none;
  /* Remove default arrow */
  background-color: #111;
  color: #00ffee;
  border: 2px solid #00ffee55;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 16px;
  font-family: 'Orbitron', sans-serif;
  /* Optional futuristic font */
  box-shadow: 0 0 8px #00ffee33;
  outline: none;
  transition: 0.3s ease;
  cursor: pointer;
}

select:hover {
  border-color: #00ffee;
  box-shadow: 0 0 12px #00ffeeaa;
}

select:focus {
  border-color: #00ff88;
  box-shadow: 0 0 16px #00ff88aa;
}

option {
  background-color: #111;
  color: #00ffee;
  padding: 6px;
  font-family: 'Orbitron', sans-serif;
}

#jambTable {
  position: absolute;
  display: flex;
  top: 15%;
  left: 2%;
  width: 370px;
  transform: scale(1);
  /* translate(-50%, -50%) */
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #0ff;
  padding: 15px;
  border-radius: 12px;
  transform-origin: center center;
  transition: transform 0.4s ease, opacity 0.3s ease;
  font-family: 'Orbitron', sans-serif;
}

/* Visible state */
#jambTable.show {
  display: flex;
  transform: scale(1);
  /* translate(-50%, -50%) */
  opacity: 1;
}

/* Hidden state */
#jambTable.hide {
  transform: scale(0);
  /* translate(-50%, -50%) */
  opacity: 0;
  pointer-events: none;
}

#dragHandler {
  width: 100%;
  height: 20px;
  background: #333;
  cursor: move;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0.8;
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

#matrix-net {
  position: absolute;
  right: 0;
  display: none;
  overflow: hidden;
  top: 0;
  height: 100%;
  width: 30vw;
  font-family: stormfaze;
  background-color: crimson;
}

@-webkit-keyframes showByVetical {
  0% {
    background-color: rgba(155, 101, 10, 0.95);
    height: 75px;
  }

  50% {
    background-color: rgba(238, 65, 13, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgb(200, 54, 9);
    height: 100vh;
    opacity: 1;
  }
}

/* Standard syntax */
@keyframes showByVetical {
  0% {
    background-color: rgba(155, 101, 10, 0.95);
    height: 75px;
  }

  50% {
    background-color: rgba(224, 64, 43, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgb(200, 54, 9);
    height: 100vh;
    opacity: 1;
  }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hideByVetical {
  0% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 100vh;
  }

  50% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgba(0, 0, 0, 0.95);
    height: 35px;
    opacity: 0.2;
  }
}

/* Standard syntax */
@keyframes hideByVetical {
  0% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 100vh;
  }

  50% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgba(0, 0, 0, 0.95);
    height: 40px;
    opacity: 0.2;
  }
}

.show-by-vertical {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: showByVetical;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: showByVetical;
  animation-duration: 1.2s;
}

.hide-by-vertical {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: hideByVetical;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: hideByVetical;
  animation-duration: 1.2s;
}

/*
new dom effect from

*/

.buttonMatrix {
  all: unset;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}

.buttonMatrix::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: 10px;
  background: linear-gradient(-135deg,
      rgba(5, 5, 5, 0.5),
      transparent 20%,
      transparent 100%);
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
}

.buttonMatrix .button-outer {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  transition: box-shadow 300ms ease;
  will-change: box-shadow;
  box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
    0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}

.buttonMatrix:hover .button-outer {
  box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
}

.button-inner {
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  padding: 1em 1em;
  background-image: linear-gradient(135deg,
      rgba(230, 230, 230, 1),
      rgba(180, 180, 180, 1));
  transition: box-shadow 300ms ease, clip-path 250ms ease,
    background-image 250ms ease, transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 7px);
  box-shadow:
    /* 1 */
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 2 */
    -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    /* 3 */
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 4 */
    0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    /* 5 */
    0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
    /* 6 */
    0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */
    -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}

.buttonMatrix:hover .button-inner {
  clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 8px);
  box-shadow:
    /* 1 */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    /* 2 */
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    /* 3 */
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    /* 4 */
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    /* 5 */
    0 0 0 0 inset rgba(255, 255, 255, 1),
    /* 6 */
    0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */
    -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}

.buttonMatrix .button-inner span {
  position: relative;
  z-index: 4;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(135deg,
      rgba(25, 25, 25, 1),
      rgba(75, 75, 75, 1));
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 250ms ease;
  /* display: block; */
  will-change: transform;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.buttonMatrix:hover .button-inner span {
  transform: scale(0.975);
}

.buttonMatrix:active .button-inner {
  transform: scale(0.975);
}

.loader {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  background-image: url('../res/textures/rpg/logo.png');
  vertical-align: middle;
  flex-flow: column-reverse;
  text-align: center;
  align-items: anchor-center;
}

.progress-container {
  width: 80%;
  max-width: 600px;
  opacity: 0.5;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #ff2b2b;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  position: relative;
  margin-bottom: 7%;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff2b2b, #ffcc00, #00ff88);
  background-size: 300% 100%;
  animation: gradientShift 2s infinite linear;
  box-shadow: 0 0 20px #ff0000;
  transition: width 0.2s ease-out;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.counter {
  margin-top: 20px;
  font-size: 24px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #ff0000;
}

.invertoryItem {
  width: 50px;
  height: auto;
}


@-webkit-keyframes showByRight {
  0% {
    /* background-color: rgba(155, 101, 10, 0.95); */
    right: -52%;
  }

  100% {
    /* background-color: rgb(200, 54, 9); */
    right: -4%;
    opacity: 1;
  }
}

/* Standard syntax */
@keyframes showByRight {
  0% {
    /* background-color: rgba(155, 101, 10, 0.95); */
    right: -52%;
  }

  100% {
    /* background-color: rgb(200, 54, 9); */
    right: -4%;
    opacity: 1;
  }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hideByRight {
  0% {
    /* background-color: rgba(255, 166, 11, 0.95); */
    right: -4%;
  }

  100% {
    /* background-color: rgba(0, 0, 0, 0.95); */
    right: -52%;
    opacity: 0.6;
  }
}

/* Standard syntax */
@keyframes hideByRight {
  0% {
    right: -4%;
  }

  100% {
    /* background-color: rgba(0, 0, 0, 0.95); */
    right: -52%;
    opacity: 0.6;
  }
}

.show-by-right {
  -webkit-scrollbar {
    width: 25px;
  }

  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: showByRight;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: showByRight;
  animation-duration: 1.2s;
}

.hide-by-right {
  -webkit-scrollbar {
    width: 25px;
  }

  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: hideByRight;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: hideByRight;
  animation-duration: 1.2s;
}

.vertical-text {
  writing-mode: vertical-lr;
  /* or vertical-lr */
  text-orientation: upright;
}


.itemDOM {
  z-index: 2;
  width: 100px;
  background: black;
  height: 100%;

  transition: transform 0.3s ease;
  transform-origin: center center;

}

.itemDOM:hover {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0) !important;
  transform: scale(1.10);
}

#leaderboard {
  z-index: 2;
	font-family: 'stormfaze';
	background: darkslategray;
	position: absolute;
	border-radius: 4px;
	top: 5%;
	left: 15%;
	width: 70%;
	padding: 10px 10px 10px 10px;
	/* box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; */

	-webkit-box-shadow: 1px 1px 43px -15px #de961f;

	font-size: large;
	@media screen and (max-width: 700px) {
		width: 97.5%;
		left: 1%;
		font-size: small;
	}

	@media screen and (max-width: 500px) {
		width: 94%;
		top: 0;
		left: 0;
		font-size: small;
		height: 100vh;
	}
}

#myAccountLoginForm {
	width: unset;
	position: absolute;
	width: 30vw;
	left: 35%;
	padding: 10px;
	margin: 0;
	top: 20%;
	/* height: 57%; */
	background: darkslategrey;

	@media screen and (max-width: 1000px) {
		width: 45%;
		left: 28%;
	}

	@media screen and (max-width: 600px) {
		width: 95%;
		left: 0;
	}
}


.sceneContainerItem {
  -webkit-text-stroke-width: 2;
  -webkit-text-stroke-color:rgba(150, 150, 150, 0.93);
  border-bottom: solid #00ff88;
}

.sceneContainerItem:hover {
  color: lime;
}

.scenePropItem {
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color:rgba(0, 144, 224, 0.93);
  border-bottom: solid #00ff88;
}

.scenePropItem:hover {
  color: lime;
}

.inputEditor {
  font-family: "stormfaze";
  width: 90%;
  padding: 4px 8px;
  font-size: 13px;

  background: #2b2b2b;
  color: #e6e6e6;
  border: 1px solid #444;
  border-radius: 4px;

  outline: none;
  transition: border 0.2s, background 0.2s;
}

/* Hover + Focus */
.inputEditor:hover {
  border-color: #666;
}

.inputEditor:focus {
  background: #3a3a3a;
  border-color: #888;
}

/* NATIVE ARROWS — scale + gray theme */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: auto !important;
  background: #444;
  border-radius: 4px;

  /* 🔥 make arrows visually bigger */
  transform: scale(1.5);
  margin: 0 2px;

  /* gray color filtering */
  filter: grayscale(100%) brightness(1.4);
}

/* HOVER effect on arrows */
input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:hover::-webkit-outer-spin-button {
  background: #555;
  filter: grayscale(100%) brightness(1.8);
}



.top-item {
  position: relative;
}

.top-btn {
  padding: 8px 12px;
  background: #3a3a3a;
  border: 1px solid #555;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.top-btn:hover {
  background: #4a4a4a;
  border-color: #777;
}

.dropdown {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  min-width: 160px;
  background: #2f2f2f;
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
  z-index: 99999;
}

.drop-item {
  padding: 10px 14px;
  border-bottom: 1px solid #444;
  cursor: pointer;
}

.drop-item:last-child {
  border-bottom: none;
}

.drop-item:hover {
  background: #444;
}