*{box-sizing:border-box}body{margin:0;background:#eef3ef;color:#17231c;font-family:system-ui,-apple-system,Segoe UI,sans-serif}header{height:68px;background:#173d2b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100% - 1180px)/2));gap:16px}header strong{letter-spacing:1.5px}header small{display:block;color:#c8dfce;font-size:11px}.hero,main{max-width:1180px;margin:auto}.hero{padding:32px 18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}.hero h1{font-size:clamp(25px,4vw,38px);margin:0 0 8px}.hero p{margin:0;color:#5a6b60}.pill{background:#d8eadc;border-radius:20px;padding:9px 14px;font-size:13px}.layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr);gap:16px;padding:0 18px}.panel{background:white;border:1px solid #dce6de;border-radius:16px;padding:18px;box-shadow:0 5px 18px #1c39200b}.panel h2{margin:0 0 6px;font-size:19px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-title p,.admin p{margin:0;color:#66766b;font-size:13px}#world{height:420px;background:linear-gradient(#b9d8e8,#e2eee1);border-radius:12px;overflow:hidden;margin-top:14px}#world canvas{display:block;width:100%;height:100%}.world-note,.hint{font-size:12px;color:#718076;margin:10px 0 0}.side label{display:block;font-size:13px;margin:12px 0;color:#4e5f54}.side input{display:block;width:100%;padding:11px;border:1px solid #cbd8ce;border-radius:9px;margin-top:5px;font:inherit}.buttons{display:flex;gap:8px;margin-top:12px}button{border:0;background:#246b43;color:white;border-radius:9px;padding:10px 14px;font-weight:600;cursor:pointer}button.secondary{background:#e7eee8;color:#244431}button:disabled{opacity:.5;cursor:not-allowed}hr{border:0;border-top:1px solid #e6ece7;margin:20px 0}.feature{padding:10px 0;border-bottom:1px solid #edf1ed}.feature b,.feature span{display:block}.feature span{font-size:12px;color:#718076;margin-top:3px}.admin{margin:16px 18px 28px}.admin p{margin-top:8px}footer{text-align:center;padding:20px;color:#7b887e;font-size:12px}dialog{border:0;border-radius:14px;max-width:360px;box-shadow:0 10px 40px #0003}dialog::backdrop{background:#10201899}.dialog-inner{padding:8px}.dialog-inner h3{margin-top:4px}@media(max-width:760px){.layout{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}#world{height:330px}.panel-title{align-items:flex-start}} 

/* ===== STUDIO AVATAR ===== */

.avatar-panel {
  margin: 16px 18px;
}

.avatar-panel > p {
  color: #718076;
  font-size: 13px;
}

.avatar-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.8fr);
  gap: 20px;
  margin-top: 18px;
}

.avatar-preview {
  min-height: 340px;
  border-radius: 15px;
  background: linear-gradient(#b9d8e8, #e2eee1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

#avatarPreview canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
}

#avatarPreviewPlaceholder {
  color: #526b5a;
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.avatar-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.avatar-options label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4e5f54;
}

.avatar-options input,
.avatar-options select {
  display: block;
  width: 100%;
  padding: 11px;
  margin-top: 5px;
  border: 1px solid #cbd8ce;
  border-radius: 9px;
  background: white;
  font: inherit;
  color: #17231c;
}

.avatar-options button {
  width: 100%;
  margin-top: 4px;
  min-height: 43px;
}

#saveAvatar {
  background: #173d2b;
}

#avatarStatus {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Kontrol gerakan untuk HP */

.mobile-controls {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-controls > div {
  display: flex;
  gap: 5px;
}

.mobile-controls button {
  width: 48px;
  height: 43px;
  padding: 5px;
  touch-action: none;
}

@media (max-width: 760px) {
  .avatar-editor {
    grid-template-columns: 1fr;
  }

  .avatar-preview {
    min-height: 300px;
  }

  #avatarPreview canvas {
    min-height: 300px;
  }

  .mobile-controls {
    display: flex;
  }

  .avatar-panel {
    margin-top: 16px;
  }
}


/* =====================================
   DESA VIRTUAL - MODERN GAME LANDING
===================================== */

.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 30px 22px;
  color: white;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(8,25,22,.28), rgba(8,25,22,.88)),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2000&q=85") center/cover;
  transition: opacity .45s ease, visibility .45s ease;
}

.welcome-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 10%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}

.welcome-content, .welcome-bottom {
  position: relative;
  z-index: 1;
}

.welcome-content {
  width: min(620px, 100%);
}

.welcome-logo {
  font-size: clamp(23px, 5vw, 34px);
  font-weight: 900;
  letter-spacing: 5px;
  text-shadow: 0 3px 20px #0008;
}

.welcome-logo span {
  color: #a9e8a9;
}

.welcome-tag {
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: 5px;
  color: #d5edda;
}

.welcome-content h1 {
  margin: 48px 0 14px;
  font-size: clamp(38px, 8vw, 68px);
  line-height: 1.04;
  letter-spacing: -2px;
  text-shadow: 0 4px 24px #0008;
}

.welcome-content h1 span {
  color: #b5efaa;
}

.welcome-content p {
  max-width: 460px;
  margin: 0 auto;
  color: #e0eee2;
  line-height: 1.7;
  font-size: 15px;
}

.enter-button {
  margin-top: 32px;
  min-width: 220px;
  padding: 17px 25px;
  border-radius: 40px;
  background: linear-gradient(135deg, #8cdb83, #3b9d61);
  color: #102b1b;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 8px 30px #0005;
}

.enter-button span {
  margin-left: 15px;
}

.enter-button:active {
  transform: scale(.97);
}

.welcome-caption {
  margin-top: 35px;
  font-size: 9px;
  letter-spacing: 3px;
  color: #d0e1d1;
}

.welcome-bottom {
  position: absolute;
  bottom: 20px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #d6e8d9;
}

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

/* =====================================
   FULLSCREEN GAME MODE
===================================== */

.game-mode {
  overflow: hidden !important;
  background: #101b17 !important;
}

.game-mode header,
.game-mode .hero,
.game-mode .side,
.game-mode .avatar-panel,
.game-mode .admin,
.game-mode footer {
  display: none !important;
}

.game-mode main {
  width: 100%;
  max-width: none;
  margin: 0;
}

.game-mode .layout {
  display: block;
  padding: 0;
  margin: 0;
}

.game-mode .world {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #b9d8e8;
}

.game-mode .panel-title {
  display: none;
}

.game-mode #world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
}

.game-mode #world canvas {
  width: 100%;
  height: 100%;
}

.game-mode .world-note {
  display: none;
}

.game-hud {
  display: none;
}

.game-mode .game-hud {
  display: flex;
  position: absolute;
  z-index: 120;
  top: max(12px, env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.game-location {
  padding: 10px 14px;
  border: 1px solid #ffffff35;
  border-radius: 13px;
  color: white;
  background: #102b22c9;
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.game-location small {
  display: block;
  margin-top: 4px;
  color: #c6e6ce;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
}

.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #79e89b;
}

.exit-game {
  pointer-events: auto;
  border: 1px solid #ffffff45;
  border-radius: 30px;
  padding: 10px 15px;
  color: white;
  background: #182d27d9;
  backdrop-filter: blur(10px);
}

.game-tip {
  display: none;
}

.game-mode .game-tip {
  display: block;
  position: absolute;
  z-index: 120;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 20px;
  color: white;
  background: #102b22b8;
  font-size: 9px;
  letter-spacing: 1px;
  pointer-events: none;
}

.game-mode .mobile-controls {
  position: absolute;
  z-index: 130;
  left: 20px;
  bottom: max(35px, env(safe-area-inset-bottom));
  display: flex;
  margin: 0;
}

.game-mode .mobile-controls button {
  width: 52px;
  height: 48px;
  border: 1px solid #ffffff55;
  border-radius: 14px;
  background: #173d2bd9;
  color: white;
  font-size: 19px;
  touch-action: none;
}

@media (orientation: portrait) and (max-width: 900px) {
  .game-mode::after {
    content: "Putar HP ke posisi mendatar untuk pengalaman bermain terbaik";
    position: fixed;
    z-index: 200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 15px;
    border-radius: 14px;
    background: #102b22e8;
    color: white;
    text-align: center;
    font-size: 13px;
    pointer-events: none;
  }
}

@media (max-width: 600px) {
  .welcome-bottom {
    font-size: 8px;
    letter-spacing: 1px;
  }
}

/* PERBAIKAN HALAMAN DEPAN DESA VIRTUAL */
body:not(.game-mode) .welcome-screen {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  min-height: min(75vh, 680px);
  height: auto !important;
  z-index: 1 !important;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 70px 24px;
}

body:not(.game-mode) .welcome-content {
  position: relative;
  z-index: 2;
  width: min(100%, 850px);
  margin: auto;
}

body:not(.game-mode) .welcome-bottom {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
}

body:not(.game-mode) .welcome-screen.welcome-hidden {
  display: none !important;
}

body.game-mode .welcome-screen {
  display: none !important;
}

@media (max-width: 600px) {
  body:not(.game-mode) .welcome-screen {
    min-height: 560px;
    padding: 65px 20px;
  }
}