@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url('res/images/cursor.png'), auto !important;
}

body {
  background: linear-gradient(180deg, #050510 0%, #0a0a1a 15%, #12102e 35%, #1e1845 55%, #2a2060 75%, #1a1535 90%, #0a0a15 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cinzel', serif;
  overflow: hidden;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#world {
  display: block;
  cursor: none !important;
}

#controls-hint {
  display: none;
}

#title {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #DAA520;
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 12px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 300;
  text-shadow: 0 0 30px rgba(218, 165, 32, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8);
}

#narration-subtitle {
  display: none;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #DAA520;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  z-index: 300;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#narration-subtitle.visible {
  display: block;
  opacity: 1;
}

#narration-subtitle.fading {
  opacity: 0;
}

#title.zoom-out {
  animation: titleZoomOut 2.5s ease-in forwards;
}

@keyframes titleZoomOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}

#toolbar-wrapper {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

#toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background: rgba(26, 21, 16, 0.9);
  padding: 16px 20px;
  border-radius: 8px;
  border: 2px solid #C2B280;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  pointer-events: auto;
}

.tool-btn {
  position: relative;
  background: rgba(194, 178, 128, 0.2);
  border: 2px solid #C2B280;
  color: #C2B280;
  padding: 14px 18px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-btn:hover {
  background: rgba(194, 178, 128, 0.4);
  transform: translateY(-2px);
}

.tool-btn.active {
  background: #C2B280;
  color: #1a1510;
  box-shadow: 0 0 15px rgba(194, 178, 128, 0.5);
}

.tool-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.keycap {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 28px;
  height: 28px;
}

.keycap img {
  width: 100%;
  height: 100%;
  display: block;
}

.keycap span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 13px;
  font-weight: 700;
  color: #000;
  line-height: 1;
  font-family: 'Cinzel', serif;
}

.tool-icon {
  width: 28px;
  height: 28px;
  /* Colorize black SVGs to #C2B280 */
  filter: invert(73%) sepia(12%) saturate(759%) hue-rotate(12deg) brightness(90%) contrast(87%);
}

.tool-btn.active .tool-icon {
  /* Active state: dark icon on light background */
  filter: invert(8%) sepia(10%) saturate(2000%) hue-rotate(12deg) brightness(30%) contrast(90%);
}

.tool-icon-gold {
  /* Gold #DAA520 */
  filter: invert(62%) sepia(73%) saturate(493%) hue-rotate(15deg) brightness(95%) contrast(92%);
}

.tool-tip {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1510;
  border: 1px solid #C2B280;
  border-radius: 6px;
  padding: 10px 14px;
  z-index: 50;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tool-tip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #C2B280;
}

.tool-tip .tip-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tool-tip .tip-icons svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #C2B280;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-tip .tip-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #A89060;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tool-btn:hover .tool-tip {
  opacity: 1;
}

#current-tool {
  order: -1;
  text-align: center;
  color: #1a1510;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 250;
}

#btn-play:not(:disabled):hover,
#btn-tutorial:hover {
  background: rgba(218, 165, 32, 0.4) !important;
  box-shadow: 0 0 15px rgba(218, 165, 32, 0.3);
  transform: scale(1.05);
}

#btn-play:not(:disabled):active,
#btn-tutorial:active {
  background: rgba(218, 165, 32, 0.6) !important;
  transform: scale(0.97);
  box-shadow: 0 0 8px rgba(218, 165, 32, 0.4);
}

.sand-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(194, 178, 128, 0.03) 100%);
  pointer-events: none;
}

@keyframes judge-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(218, 165, 32, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(218, 165, 32, 0.8), 0 0 40px rgba(218, 165, 32, 0.3); transform: scale(1.05); }
}

.judge-ready {
  animation: judge-glow 1.5s ease-in-out infinite;
}

#trial-timer {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #DAA520;
  font-family: 'Cinzel', serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 4px;
  text-shadow: 0 2px 20px rgba(218, 165, 32, 0.5), 0 0 40px rgba(218, 165, 32, 0.2);
  pointer-events: none;
  z-index: 50;
}

/* Back buttons */
#btn-back-to-menu:hover,
#btn-back-to-levels:hover {
  background: rgba(168, 144, 96, 0.15) !important;
  border-color: #DAA520 !important;
  color: #DAA520 !important;
}
#btn-back-to-menu:active,
#btn-back-to-levels:active {
  transform: scale(0.96);
}

/* Level select pyramid */
.level-row { display:flex; justify-content:center; gap:20px; margin-bottom:20px; position:relative; z-index:1; }

.level-gem {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; padding:8px;
  font-family:'Cinzel',serif;
}

.gem-diamond {
  width:70px; height:70px;
  background: linear-gradient(135deg, #8B6914 0%, #DAA520 40%, #F5D060 60%, #DAA520 80%, #8B6914 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: transform 0.2s ease, filter 0.2s ease;
  position:relative;
}
.level-gem:hover .gem-diamond { transform: scale(1.15); filter: brightness(1.3); }

.gem-diamond.locked {
  background: linear-gradient(135deg, #2a2520 0%, #3a3530 40%, #4a4540 60%, #3a3530 80%, #2a2520 100%);
}

.gem-name {
  color:#A89060; font-size:11px; text-transform:uppercase; letter-spacing:1px;
  max-width:90px; text-align:center; line-height:1.4;
}
.level-gem.locked .gem-name { color:#4a4540; }

.gem-lock {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:24px; height:24px; fill:#5a5550;
}

/* First level shining effect */
.gem-diamond.gem-first {
  animation: gem-shine 2s ease-in-out infinite;
}
@keyframes gem-shine {
  0%,100% { filter: drop-shadow(0 0 6px rgba(218,165,32,0.6)); }
  50% { filter: drop-shadow(0 0 18px rgba(218,165,32,1)) drop-shadow(0 0 30px rgba(218,165,32,0.4)); }
}

/* Completed gem */
.gem-diamond.completed {
  background: linear-gradient(135deg, #5a9614 0%, #8AC520 40%, #B5E560 60%, #8AC520 80%, #5a9614 100%);
}

/* Tutorial popup */
#tutorial-popup {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#tutorial-popup.popup-fade-in {
  opacity: 1;
}

@keyframes popup-flash {
  0%   { background: rgba(50, 40, 20, 0.95); border-color: #DAA520; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(218, 165, 32, 0.6); }
  50%  { background: rgba(26, 21, 16, 0.9);  border-color: #C2B280; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); }
  100% { background: rgba(50, 40, 20, 0.95); border-color: #DAA520; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(218, 165, 32, 0.6); }
}

#tutorial-popup.popup-fade-in .popup-content {
  animation: popup-flash 0.4s ease 2;
}

.popup-content {
  background: rgba(26, 21, 16, 0.9);
  border: 2px solid #C2B280;
  border-radius: 8px;
  padding: 12px 18px;
  color: #C2B280;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  max-width: 280px;
}

.popup-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Arrow points DOWN toward target (popup is above) */
.popup-arrow.arrow-top {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #C2B280;
}

/* Arrow points UP toward target (popup is below) */
.popup-arrow.arrow-bottom {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #C2B280;
}

/* Arrow points RIGHT toward target (popup is left) */
.popup-arrow.arrow-left {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #C2B280;
}

/* Arrow points LEFT toward target (popup is right) */
.popup-arrow.arrow-right {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #C2B280;
}

.popup-instruction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.popup-drag-icon-v {
  width: 24px;
  height: 48px;
  animation: popup-drag-sweep-v 1.5s ease-in-out infinite;
}

@keyframes popup-drag-sweep-v {
  0%, 100% { opacity: 0.5; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}