.elementor-125 .elementor-element.elementor-element-2bfd74a{--display:flex;}.elementor-125 .elementor-element.elementor-element-e72ede2{--spacer-size:250px;}.elementor-125 .elementor-element.elementor-element-379f0c7.elementor-element{--align-self:center;}.elementor-125 .elementor-element.elementor-element-5c9587f{--display:flex;}.elementor-125 .elementor-element.elementor-element-5c9587f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-125 .elementor-element.elementor-element-bf1cee8{--spacer-size:50px;}.elementor-125 .elementor-element.elementor-element-da09a4c{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--align-items:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-125 .elementor-element.elementor-element-1af4075{margin:0px 0100px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}@media(min-width:768px){.elementor-125 .elementor-element.elementor-element-2bfd74a{--content-width:70vw;}.elementor-125 .elementor-element.elementor-element-5c9587f{--width:68.336%;}}@media(max-width:1024px) and (min-width:768px){.elementor-125 .elementor-element.elementor-element-2bfd74a{--content-width:90%;}}@media(max-width:1024px){.elementor-125 .elementor-element.elementor-element-bf1cee8{--spacer-size:250px;}.elementor-125 .elementor-element.elementor-element-da09a4c{--grid-auto-flow:row;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-125 .elementor-element.elementor-element-1af4075{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:767px){.elementor-125 .elementor-element.elementor-element-da09a4c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-125 .elementor-element.elementor-element-1af4075{text-align:start;font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}/* Start custom CSS for html, class: .elementor-element-379f0c7 */:root {

  --game-cursor:
    url('/umg2026/wp-content/game/ui/kursori.png') 4 4,
    pointer;
}

.intro-already-seen #monster-bottom {

  transform:
    translateX(-50%) translateY(33%);
}

.object,
#dialogue-box,
.game-button,
#history-button,
#reset-button,
#ending-reset-button,
#return-frontpage {

  cursor: var(--game-cursor);
}

.object:hover,
#dialogue-box:hover,
.game-button:hover {

  cursor: var(--game-cursor) !important;
}

#game-wrapper {

  width: 100%;

  max-width: 1280px;

  margin: 0 auto;

  position: relative;

  transform: scale(0.8);

  transform-origin: top center;
}


#monster-top,
#monster-top-ani,
#monster-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 114%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

#monster-bottom {

  transform:
    translateX(-50%) translateY(33%);
}

#monster-top-ani {

  top: -6.5%;

  z-index: 15001;
}

#monster-top {

  top: -96.6%;

  z-index: 15000;
}

#monster-bottom {

  top: -74.8%;

  z-index: 14999;

  transition:
    transform 2.8s cubic-bezier(0.22,
      1,
      0.36,
      1);
}


#scene-image {

  display: block;

  width: 100%;

  height: auto;
}

#intro-fade {

  position: absolute;
  inset: 0;
  background: black;
  opacity: 0;
  pointer-events: none;
  z-index: 14000;
  transition:
    opacity 2.2s ease;
}


#intro-overlay {

  position: absolute;
  inset: 0;

  z-index: 16000;

  display: flex;

  align-items: center;
  justify-content: center;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 1.2s ease;
}

#intro-overlay.visible {

  opacity: 1;

  pointer-events: auto;
}

#intro-overlay.hidden {

  opacity: 0;

  pointer-events: none;
}

.intro-page {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  padding-top: 150px;

  gap: 18px;

  text-align: center;

  box-sizing: border-box;

  transition:
    opacity 0.8s ease;

  opacity: 1;
}

.intro-page .game-button {

  margin-top: 24px;
}

.hidden-page {
  opacity: 0;
  pointer-events: none;
}


.intro-title {
  color: #C2793B;

  font-family:
    "fayte-pixel-hard",
    monospace;

  font-size: 42px;

  letter-spacing: 0.08em;

  max-width: 400px;
}

.intro-text {
  color: white;

  font-family:
    "Wittgenstein",
    serif;

  font-size: 18px;

  line-height: 1.8;

  max-width: 400px;

  margin: 0 auto;
}

.intro-active #intro-fade {

  opacity: 1;
}

.intro-active #monster-bottom {

  transform: translateX(-50%);
}

.hotspot {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.333%;
  cursor: default;
  z-index: 1;
}

.disabled-forward {

  pointer-events: none;

  opacity: 0;

}

#objects-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.object {
  position: absolute;
  pointer-events: auto;
  z-index: 10;
  -webkit-user-drag: none;
}

.object-inner {
  position: relative;
  display: block;
  width: 100%;
  pointer-events: none;
}

.object-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.object,
.object img {

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  -webkit-user-drag: none;
}

#click-left {
  left: 0;
}

#click-left:hover {
  cursor: url('https://graphic.fi/umg2026/wp-content/game/ui/nuoliVasen.png') 16 16, pointer;
}

#click-forward {
  left: 33.333%;
}

#click-forward:hover {
  cursor: url('https://graphic.fi/umg2026/wp-content/game/ui/nuoliYlos.png') 16 16, pointer;
}

#click-right {
  right: 0;
}

#click-right:hover {
  cursor: url('https://graphic.fi/umg2026/wp-content/game/ui/nuoliOikea.png') 16 16, pointer;
}

#dialogue-box {
  position: absolute;
  bottom: 230px;
  left: 50%;
  transform: translateX(-50%);
  height: 150px;
  width: 60%;
  padding: 16px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: none;
  z-index: 20;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#dialogue-end-indicator,
#dialogue-advance-indicator {

  position: absolute;

  right: 12px;
  bottom: 12px;

  width: 32px;
  height: 32px;

  image-rendering: pixelated;

  opacity: 0.9;

  pointer-events: none;
}


#dialogue-speaker {
  height: 28px;
  font-family: "fayte-pixel-hard", monospace;
  font-size: 24px;
  margin-bottom: 8px;
  margin-top: -8px;
  opacity: 0.8;
}

#dialogue-text {
  font-family: "Wittgenstein", serif;
  font-size: 18px;
  line-height: 1.4;
}

#dialogue-history-panel {

  position: absolute;

  top: 10%;
  left: 50%;

  transform: translateX(-50%);


  width: 50%;
  height: 65%;

  background: rgba(0, 0, 0, 0.95);

  color: white;

  overflow-y: auto;

  padding: 20px;

  box-sizing: border-box;

  z-index: 20000;

  pointer-events: auto;
  display: none;

}

#dialogue-history-content {
  font-family: "Wittgenstein", serif;

  white-space: pre-wrap;

  line-height: 1.5;

}




#tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: Silver;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 16px;
  white-space: nowrap;
  z-index: 25;
  font-family: "Wittgenstein", serif;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.shake {
  animation: shake 0.6s;
}

@keyframes shake {
  0% {
    transform: translate(0px, 0px);
  }

  20% {
    transform: translate(-5px, 3px);
  }

  40% {
    transform: translate(5px, -3px);
  }

  60% {
    transform: translate(-4px, -2px);
  }

  80% {
    transform: translate(4px, 2px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#ending-overlay {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 4s ease;
  z-index: 9998;

}

#ending-overlay.active {
  opacity: 1;
}

#ending-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: SlateGray;
  opacity: 0;
  transition: opacity 1.5s ease;
  z-index: 9999;
  pointer-events: none;
  padding: 0 10%;
  box-sizing: border-box;
  font-family: "Wittgenstein", serif;
  font-size: 2rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  transform: translateY(-10%);
}

#ending-text.visible {
  opacity: 1;
}

.ending-lock .click-zone,
.ending-lock #click-forward,
.ending-lock #click-left,
.ending-lock #click-right {

  pointer-events: none;
}

#credits-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
  z-index: 10000;
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

#credits-content {
  position: absolute;
  top: 100%;
  left: 50%;

  width: 100%;

  max-width: 700px;

  padding: 0 80px;

  box-sizing: border-box;

  margin: 0 auto;

  transform: translateX(-50%) translateY(0);

  text-align: center;

  box-sizing: border-box;
}

.credit-section {

  margin-bottom: 5vh;
}

#credits-content p {
  font-family: "Wittgenstein", serif;
  font-size: 18px;
  line-height: 1.4;
}

#credits-content h1 {
  color: #C2793B;
  font-family: "fayte-pixel-hard", monospace;
  font-size: 32;
  line-height: 1.8;
}

@keyframes credits-scroll {

  from {
    transform:
      translateX(-50%) translateY(0);
  }

  to {
    transform:
      translateX(-50%) translateY(calc(-100% - 40vh));
  }
}

#ending-menu {

  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 350px;
  box-sizing: border-box;
  display: none;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: white;
  transform: translateY(0%);
  z-index: 11000;
  opacity: 0;
  transition:
    opacity 6s ease,
    transform 4s ease;
}

#ending-menu.visible {

  opacity: 1;
  visibility: visible;
}

#ending-buttons {

  display: flex;

  flex-direction: row;

  justify-content: center;

  gap: 20px;

  margin-top: 30px;
}

#ending-menu p {
  font-family: "Wittgenstein", serif;
  font-size: 18px;
  line-height: 1.4;
}

#ending-menu h1 {
  color: #C2793B;
  font-family: "fayte-pixel-hard", monospace;
  font-size: 32;
  line-height: 1.8;
}



#history-button,
#reset-button {

  position: relative;

  z-index: 16001;
}


.game-button {
  background: #0E0909 !important;
  color: #C2793B !important;

  border: none !important;
  outline: none !important;

  padding: 8px 20px;
  cursor: pointer;

  font-family: "Typographer Rotunda", serif;
  font-size: 18px;
  letter-spacing: 1px;

  image-rendering: pixelated;

  box-shadow:
    0 0 0 2px #995A25,
    0 0 0 4px #0E0909,
    inset 0 0 0 1px rgba(194, 121, 59, 0.15);

  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    color 0.14s ease,
    background 0.14s ease;

  -webkit-tap-highlight-color: transparent;
}

.game-button:hover,
.game-button:focus,
.game-button:active {
  color: #E2AB73 !important;
  background: #0E0909 !important;

  box-shadow:
    0 0 0 2px #C2793B,
    0 0 0 4px #0E0909,
    inset 0 0 12px rgba(194, 121, 59, 0.24),
    inset 0 0 2px rgba(255, 220, 180, 0.12);
}

.game-button:hover {
  transform: translateY(-1px);

  text-shadow:
    0 0 4px rgba(194, 121, 59, 0.35);
}

.game-button:active {
  transform: translateY(2px) scale(0.985);

  background: #140d0d !important;
}

#hud-bar {
  position: relative;
  width: 100%;
  margin-top: 10px;
  z-index: 16000;
  display: grid;
  grid-template-columns:
    1fr auto 1fr;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 1s ease;
}

#hud-bar.visible {
  opacity: 1;
  pointer-events: auto;
}

#hud-left {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding-left: 20px;
}

#guide-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 17000;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.3s ease;
}

#guide-overlay.visible {

  opacity: 1;

  pointer-events: auto;
}

#guide-image {

  width: 400px;

  max-width: 80%;

  height: auto;

  image-rendering: pixelated;

  transform: translateY(-74px);
}

#compass {

  display: block;
  width: 160px;
  height: auto;
  user-select: none;
  pointer-events: none;
  justify-self: center;


}

#inventory {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 4px;
  color: Silver;
  font-size: 12px;
  position: relative;
  z-index: 16001;
  justify-self: end;
  margin-right: 20px;
}/* End custom CSS */