* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; background:#87CEEB; font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif; user-select:none; touch-action: none; }
#canvas { display:block; position:fixed; top:0; left:0; width: 100vw; height: 100vh; }

#topbar { position:fixed; top:0; left:0; right:0; z-index:10; background:linear-gradient(180deg,rgba(20,40,20,0.88),rgba(20,40,20,0.6)); padding:10px 18px; display:flex; align-items:center; gap:16px; border-bottom:2px solid rgba(255,215,0,0.3); backdrop-filter:blur(4px); flex-wrap: wrap; }
#title-text { font-size:20px; font-weight:900; color:#FFD700; text-shadow:0 0 12px rgba(255,215,0,0.5); white-space:nowrap; }
#mission-box { flex:1; min-width:200px; background:rgba(0,0,0,0.35); border:1px solid rgba(255,215,0,0.3); border-radius:10px; padding:7px 14px; cursor:pointer; transition:background 0.2s; }
#mission-box:hover { background:rgba(0,0,0,0.5); }
#mission-header { display:flex; justify-content:space-between; align-items:center; }
#mission-title { font-size:13px; font-weight:800; color:#FFD700; }
#mission-chevron { color:#FFD700; font-size:12px; transition:transform 0.3s; }
#mission-box.open #mission-chevron { transform: rotate(180deg); }
#mission-detail { display:none; border-top:1px dashed rgba(255,215,0,0.3); margin-top:6px; padding-top:6px; }
#mission-box.open #mission-detail { display:block; }
#mission-desc  { font-size:11px; color:rgba(255,255,255,0.85); margin-bottom:4px; line-height:1.4;}
#mission-status { display:flex; flex-direction:column; gap:4px; }
.mc { font-size:11px; color:rgba(255,255,255,0.6); }
.mc.done { color:#5CFF5C; font-weight:bold; }

#hotbar-wrapper { position:fixed; bottom:0; left:0; right:0; z-index:20; display:flex; flex-direction:column; align-items:center; padding:8px 0 14px; pointer-events:none; background:linear-gradient(transparent, rgba(0,0,0,0.55)); }
#hotbar-label { color:#FFD700; font-size:11px; font-weight:700; text-shadow:1px 1px 2px #000; margin-bottom:5px; pointer-events:none; }
#hotbar-row { display:flex; align-items:center; gap:8px; pointer-events:auto; }
#hotbar-container { display:flex; gap:4px; background:rgba(0,0,0,0.55); padding:6px; border-radius:10px; border:2px solid rgba(255,255,255,0.2); backdrop-filter:blur(4px); }
.hotbar-slot { width:44px; height:44px; background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.3); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:transform 0.1s; }
.hotbar-slot:hover { background:rgba(255,255,255,0.2); }
.hotbar-slot.active { border-color:#FFD700; background:rgba(255,215,0,0.2); transform:scale(1.1); z-index:2; box-shadow:0 0 12px rgba(255,215,0,0.5); }
.slot-num { position:absolute; top:2px; left:4px; font-size:10px; color:rgba(255,255,255,0.7); font-weight:bold; }
.slot-icon { font-size:20px; text-shadow:1px 1px 2px #000; }
.slot-swatch { width:20px; height:20px; border-radius:4px; border:1px solid rgba(255,255,255,0.5); box-shadow:1px 1px 3px rgba(0,0,0,0.5); }
#hotbar-actions { display:flex; gap:5px; background:rgba(0,0,0,0.55); padding:6px; border-radius:10px; border:2px solid rgba(255,255,255,0.2); }
.action-btn { width:40px; height:40px; background:rgba(255,255,255,0.12); border:none; border-radius:8px; font-size:18px; cursor:pointer; transition:0.15s; display:flex; align-items:center; justify-content:center; }
.action-btn:hover { background:rgba(255,215,0,0.3); transform:scale(1.1); }
.action-btn:active { transform:scale(0.93); }

#inventory-overlay { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50; background:rgba(20,30,20,0.95); border:3px solid #4caf50; border-radius:12px; padding:20px; display:none; flex-direction:column; gap:15px; width:90%; max-width:500px; box-shadow:0 10px 40px rgba(0,0,0,0.8); max-height:85vh; overflow-y:auto; }
.inv-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:10px; }
.inv-header h2 { color:#FFD700; font-size:18px; }
.close-btn { background:none; border:none; color:#fff; font-size:24px; cursor:pointer; padding:0 10px;}
.inv-hotbar-preview { background:rgba(255,215,0,0.1); padding:12px; border-radius:8px; border:1px solid rgba(255,215,0,0.3); display:flex; flex-direction:column; align-items:center; }
.inv-hotbar-preview h3 { color:#FFD700; font-size:13px; margin-bottom:4px; }
.inv-hotbar-preview p { color:rgba(255,255,255,0.6); font-size:11px; margin-bottom:10px; }
.inv-category { margin-bottom:5px; }
.inv-category h3 { color:rgba(255,255,255,0.8); font-size:13px; margin-bottom:8px; border-left:3px solid #4caf50; padding-left:8px; }
.inv-grid { display:flex; flex-wrap:wrap; gap:8px; }
.inv-item { display:flex; align-items:center; gap:6px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.2); padding:6px 10px; border-radius:6px; cursor:pointer; color:#fff; font-size:12px; transition:0.1s; }
.inv-item:hover { background:rgba(255,215,0,0.2); border-color:#FFD700; }
.btn-clear-slot { margin-top:8px; background:#C0392B; color:#fff; border:none; padding:6px 12px; border-radius:6px; font-size:11px; font-weight:bold; cursor:pointer; }



#hint { position:fixed; bottom:95px; left:50%; transform:translateX(-50%); z-index:10; background:rgba(0,0,0,0.65); border:1px solid rgba(255,215,0,0.3); color:#FFD700; padding:6px 18px; border-radius:20px; font-size:11px; white-space:nowrap; pointer-events:none; font-weight:600;}
#toast-container { position:fixed; bottom:120px; right:20px; z-index:30; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast-msg { background:rgba(0,0,0,0.88); color:#fff; padding:12px 20px; border-radius:12px; font-size:14px; font-weight:700; border:1px solid rgba(255,215,0,0.4); text-align: left; animation: slideInRight 0.3s forwards, fadeOut 0.5s 4s forwards; max-width: 300px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
@keyframes slideInRight { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

#message-log-overlay { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:60; background:rgba(20,30,20,0.95); border:3px solid #a8d0e6; border-radius:12px; padding:20px; display:none; flex-direction:column; gap:15px; width:90%; max-width:500px; box-shadow:0 10px 40px rgba(0,0,0,0.8); max-height:85vh; overflow-y:auto; }
.message-log-content { display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding-right:5px; }
.log-item { background:rgba(255,255,255,0.1); padding:10px; border-radius:8px; font-size:13px; color:#fff; border-left:3px solid #a8d0e6; line-height:1.4; }
.log-time { font-size:10px; color:rgba(255,255,255,0.5); margin-bottom:4px; }

.mission-step { background: rgba(0,0,0,0.3); border-radius: 6px; margin-bottom: 4px; border: 1px solid rgba(255,255,255,0.1); transition: 0.2s; }
.mission-step:hover { background: rgba(0,0,0,0.4); }
.mission-step.done { border-color: rgba(92, 255, 92, 0.3); opacity: 0.7; }
.mission-step.done .step-title { text-decoration: line-through; }
.step-header { padding: 6px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.step-num { font-size: 14px; }
.step-title { font-size: 12px; color: #fff; font-weight: bold; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-body { display: none; padding: 0 10px 10px 32px; font-size: 11px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.mission-step.active { background: rgba(0,0,0,0.5); border-color: rgba(255,215,0,0.4); opacity: 1; }
.mission-step.active .step-body { display: block; }
#carry-indicator { position:fixed; top:90px; left:50%; transform:translateX(-50%); z-index:20; background:rgba(255,215,0,0.22); border:2px solid #FFD700; border-radius:20px; padding:6px 18px; color:#FFD700; font-size:13px; font-weight:800; display:none; backdrop-filter:blur(4px); animation:pulse 1s ease-in-out infinite; white-space: nowrap;}
@keyframes pulse { 0%,100%{box-shadow:0 0 8px rgba(255,215,0,0.4);} 50%{box-shadow:0 0 20px rgba(255,215,0,0.8);} }

#map-overlay { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50; background:rgba(8,18,8,0.96); border:2px solid #FFD700; border-radius:18px; padding:22px; display:none; backdrop-filter:blur(10px); box-shadow:0 0 40px rgba(0,0,0,0.8); max-width: 90vw; max-height: 90vh; overflow: auto;}
#map-overlay h3 { color:#FFD700; font-size:15px; text-align:center; margin-bottom:4px; }
#map-overlay p  { color:rgba(255,255,255,0.55); font-size:11px; text-align:center; margin-bottom:12px; }
#map-grid { display:grid; gap:3px; justify-content: center; }
.mc-cell { width:30px; height:30px; border-radius:5px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid rgba(255,255,255,0.15); transition:transform 0.1s, filter 0.1s; }
.mc-cell.active  { background:#27AE60; cursor:default; }
.mc-cell.visible { background:#E67E22; }
.mc-cell.visible:hover { transform:scale(1.12); filter:brightness(1.2); }
.mc-cell.hidden  { background:#1a2a1a; cursor:default; }
#map-close { display:block; margin:14px auto 0; padding:8px 28px; background:#FFD700; color:#000; border:none; border-radius:8px; font-size:14px; font-weight:800; cursor:pointer; }

#mission-clear { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:40; background:linear-gradient(135deg,#0d2b12,#1a5c28); border:3px solid #FFD700; border-radius:24px; padding:36px 44px; text-align:center; color:#fff; display:none; box-shadow:0 0 60px rgba(255,215,0,0.3); animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1); width: 90%; max-width: 400px;}
@keyframes popIn { from{transform:translate(-50%,-50%) scale(0.5);opacity:0;} to{transform:translate(-50%,-50%) scale(1);opacity:1;} }
#mission-clear .mc-star { font-size:48px; margin-bottom:8px; }
#mission-clear h2 { font-size:30px; color:#FFD700; margin-bottom:10px; }
#mission-clear p  { font-size:15px; opacity:0.9; line-height:1.6; margin-bottom:22px; }
#mission-clear button { padding:12px 30px; background:#FFD700; color:#000; border:none; border-radius:10px; font-size:16px; font-weight:900; cursor:pointer; }

#opening-overlay { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:100; background:linear-gradient(135deg,#0d2b12,#1a5c28); border:3px solid #FFD700; border-radius:24px; padding:40px 30px; text-align:center; color:#fff; box-shadow:0 0 60px rgba(255,215,0,0.3); width: 90%; max-width: 400px; display:flex; flex-direction:column; gap:20px; transition: opacity 0.5s; }
#opening-emoji { font-size:60px; margin-bottom:10px; animation: float 2s infinite ease-in-out; }
#opening-text { font-size:16px; line-height:1.6; min-height:80px; word-break: keep-all; }
#opening-btn { padding:12px 30px; background:#FFD700; color:#000; border:none; border-radius:10px; font-size:16px; font-weight:900; cursor:pointer; transition: transform 0.1s; }
#opening-btn:active { transform: scale(0.95); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

#creature-report { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:60; background:linear-gradient(135deg,#1f3b24,#0d1a10); border:3px solid #4caf50; border-radius:20px; padding:24px; color:#fff; box-shadow:0 15px 50px rgba(0,0,0,0.8); display:none; flex-direction:column; gap:12px; width:90%; max-width:420px; animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1); cursor:pointer;}
.cr-title { font-size:22px; color:#FFD700; font-weight:900; text-align:center; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:8px; }
.cr-row { font-size:13px; line-height:1.5; background:rgba(0,0,0,0.4); padding:10px; border-radius:8px; word-break:keep-all; }
.cr-row span.lbl { font-weight:bold; color:#a8e6a0; margin-right:6px; }
.cr-hint { font-size:14px; font-weight:bold; color:#FFD700; text-align:center; margin-top:8px; background:rgba(255,215,0,0.15); padding:12px; border-radius:12px; border:1px solid rgba(255,215,0,0.3); word-break:keep-all;}

#grandma-popup { position:fixed; top:15%; left:50%; transform:translateX(-50%); z-index:70; background:rgba(20,10,0,0.9); border:2px solid #FFD700; border-radius:16px; padding:20px; color:#fff; text-align:center; font-size:16px; line-height:1.6; display:none; animation: slideDown 0.4s ease-out; width:90%; max-width: 450px;}
@keyframes slideDown { from{transform:translateX(-50%) translateY(-100px); opacity:0;} to{transform:translateX(-50%) translateY(0); opacity:1;} }

#phase-transition { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:60; background:linear-gradient(135deg,#0a192f,#203a43); border:3px solid #4caf50; border-radius:24px; padding:40px 30px; text-align:center; color:#fff; box-shadow:0 0 60px rgba(76,175,80,0.4); width:90%; max-width:400px; display:none; flex-direction:column; gap:16px; animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
#pt-emoji { font-size:60px; margin-bottom:10px; animation:float 2s infinite ease-in-out; }
#pt-text { font-size:18px; font-weight:bold; line-height:1.6; word-break:keep-all; }

/* iOS Safari: 캔버스 위에 고정 UI가 가려지는 문제 방지 */
#hotbar-wrapper, #topbar {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* iOS 홈 바/노치 안전 영역 */
#hotbar-wrapper {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* 태블릿 (iPad) */
@media (max-width: 1024px) and (min-width: 601px) {
  .hotbar-slot { width: 38px; height: 38px; }
  .slot-icon { font-size: 16px; }
  .action-btn { width: 34px; height: 34px; font-size: 15px; }
  #hotbar-container { gap: 3px; padding: 5px; }
  #hotbar-actions { gap: 3px; padding: 5px; }
  #hotbar-row { gap: 5px; }
  #hint { bottom: 88px; }
}

/* 모바일 (phone) */
@media (max-width: 600px) {
  #topbar { padding: 5px 10px; gap: 8px; }
  #title-text { font-size: 16px; }
  #hotbar-label { font-size: 12px; }
  .hotbar-slot { width: 34px; height: 34px; }
  .slot-icon { font-size: 16px; }
  .action-btn { width: 32px; height: 32px; font-size: 14px; }
  #hotbar-container { gap: 2px; padding: 4px; }
  #hotbar-actions { gap: 2px; padding: 4px; }
  #hint { font-size: 9px; bottom: 75px; }
  .mc-cell { width: 24px; height: 24px; font-size: 10px; }
}

/* Hotbar Glow Animation */
@keyframes toolGlow {
  0% { box-shadow: 0 0 5px #ffd700, inset 0 0 5px #ffd700; border-color: #ffd700; }
  50% { box-shadow: 0 0 20px #ffd700, inset 0 0 10px #ffd700; border-color: #ffffff; transform: scale(1.05); }
  100% { box-shadow: 0 0 5px #ffd700, inset 0 0 5px #ffd700; border-color: #ffd700; }
}
.slot-glowing {
  animation: toolGlow 1.2s infinite alternate !important;
  border-color: #ffd700 !important;
}

/* Ecological Popup */
#eco-popup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(255, 255, 255, 0.95);
  border: 6px solid #4CAF50;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  color: #333;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 2000;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
  display: none;
}
#eco-popup.show {
  display: block;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
#eco-emoji { font-size: 80px; margin-bottom: 20px; }
#eco-text { font-size: 28px; line-height: 1.4; color: #1b5e20; }

#mobile-cam-controls {
  position: fixed;
  right: 20px;
  bottom: 120px; /* inventory UI 바로 위 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}
.cam-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #3498DB;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  color: #3498DB;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.cam-btn small { font-size: 11px; font-weight: bold; }
.cam-btn:active { background: #3498DB; color: white; transform: scale(0.95); }

/* 수호대 도감 오버레이 */
#guardian-book-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30,30,40,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000; display: none; flex-direction: column;
  color: white; overflow-y: auto; padding: 20px;
}
.guardian-book-content {
  display: flex; gap: 20px; max-width: 900px; margin: 0 auto; width: 100%;
  flex-direction: row;
}
@media (max-width: 768px) {
  .guardian-book-content { flex-direction: column; }
}
.guardian-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px; flex: 1; align-content: start;
}
.guardian-card {
  background: rgba(255,255,255,0.1); border-radius: 12px;
  padding: 15px; text-align: center; cursor: pointer;
  transition: all 0.2s; border: 2px solid transparent;
}
.guardian-card:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.guardian-card.active { border-color: #f2c94c; background: rgba(242,201,76,0.2); }
.guardian-card .emoji { font-size: 40px; margin-bottom: 5px; transition: all 0.3s; }
.guardian-card .name { font-size: 13px; font-weight: bold; }

/* 상태별 필터 */
.guardian-card[data-state="0"] .emoji { filter: grayscale(100%) opacity(0.3); }
.guardian-card[data-state="0"] .name { color: #888; }
.guardian-card[data-state="1"] .emoji { filter: grayscale(50%) opacity(0.8); }

.guardian-detail {
  flex: 1; background: rgba(255,255,255,0.05); border-radius: 16px;
  padding: 24px; min-width: 300px; border: 1px solid rgba(255,255,255,0.1);
}
#gd-emoji { font-size: 72px; text-align: center; margin-bottom: 10px; }
#gd-name { text-align: center; font-size: 24px; color: #fff; margin: 0 0 5px 0; }
#gd-title { text-align: center; font-size: 14px; color: #f2c94c; margin-bottom: 20px; }
#gd-story { font-size: 15px; line-height: 1.6; color: #ddd; margin-bottom: 15px; }
#gd-personality { font-size: 14px; line-height: 1.5; color: #bbb; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; }