* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #9fd6ff; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

#game { position: fixed; inset: 0; }
#canvas { display: block; width: 100%; height: 100%; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#title-tag {
  position: absolute; top: 16px; left: 18px;
  font-weight: 800; letter-spacing: 2px; font-size: 18px;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
#controls {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(20,28,40,.5); color: #eaf3ff; padding: 8px 16px;
  border-radius: 20px; font-size: 13px; white-space: nowrap;
  backdrop-filter: blur(6px);
}
#room-code-tag {
  position: absolute; top: 50px; right: 16px;
  background: rgba(20,28,40,.65); color: #ffe15a;
  padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 700;
  backdrop-filter: blur(6px); letter-spacing: 0.05em;
  pointer-events: none;
}
#controls b { color: #ffe15a; }
#prompt {
  position: absolute; bottom: 66px; left: 50%; transform: translateX(-50%);
  background: rgba(255,225,90,.95); color: #1a1a1a; font-weight: 700;
  padding: 10px 20px; border-radius: 12px; font-size: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Overlays */
#start-overlay, #level-panel, #map-overlay, #course-finish, #shop-panel, #adv-over, #no-lives, #coinroom-menu, #mg-result, #admin-panel, #online-panel, #pause-confirm, #creator-panel, #creator-code-panel, #monthly-set-panel, #community-panel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,20,35,.55); backdrop-filter: blur(4px); z-index: 20;
}
#on-name, #on-code {
  width: 80%; padding: 11px 14px; margin: 5px 0; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #fff; font-size: 16px; text-align: center; outline: none;
}
#on-status { color: #9fefc0; font-size: 14px; margin: 12px 0 2px; min-height: 20px; font-weight: 600; }
.mg-sub { display: block; font-size: 12px; font-weight: 500; opacity: 0.8; margin-top: 3px; }
#admin-input {
  width: 80%; padding: 11px 14px; margin: 6px 0 4px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #fff; font-size: 16px; text-align: center; outline: none;
}
#admin-error { color: #ff7a7a; font-size: 13px; min-height: 18px; margin-bottom: 6px; }
#admin-controls .lp-buttons { gap: 6px; }
.panel {
  background: linear-gradient(160deg, #1b2740, #0e1626);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  padding: 34px 42px; text-align: center; color: #eaf3ff;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); max-width: 460px;
}
.panel h1 { font-size: 40px; letter-spacing: 1px; margin-bottom: 6px; }
.panel .sub { color: #9fb4d0; margin-bottom: 22px; font-size: 15px; }
.panel .tip { color: #7d90ad; font-size: 12px; margin-top: 18px; line-height: 1.5; }

.btn {
  pointer-events: auto; cursor: pointer; border: none; border-radius: 12px;
  background: #2c3e5c; color: #eaf3ff; font-weight: 700; font-size: 15px;
  padding: 11px 20px; margin: 5px; transition: transform .08s, background .15s;
}
.btn:hover { background: #38517a; transform: translateY(-2px); }
.btn.big { background: #ffe15a; color: #1a1a1a; font-size: 18px; padding: 14px 30px; }
.btn.big:hover { background: #fff08a; }

/* World map */
.map-panel {
  background: linear-gradient(160deg, #16223a, #0c1320);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  padding: 22px 26px; text-align: center; color: #eaf3ff;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.map-panel h2 { font-size: 26px; margin-bottom: 2px; }
.map-panel .sub { color: #9fb4d0; font-size: 13px; margin-bottom: 12px; }
#map-canvas {
  border-radius: 12px; cursor: pointer; display: block; margin: 0 auto;
  background: #3f7a34; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
}
#map-legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  margin: 12px 0 6px; max-width: 560px;
}
.legend-row {
  pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid transparent; border-radius: 9px;
  padding: 7px 10px; color: #eaf3ff; font-size: 13px; text-align: left;
  transition: background .12s;
}
.legend-row:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.legend-row.sel { border-color: #ffe15a; background: rgba(255,225,90,.14); }
.legend-row.locked { color: #6f7d90; cursor: default; }
.legend-row .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(0,0,0,.3); }
.legend-row .lvnum { font-weight: 800; width: 14px; }
.legend-row .lvname { flex: 1; }
.legend-row .lvstate { opacity: .8; }
.map-buttons { display: flex; gap: 8px; justify-content: center; }

.lp-buttons { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Coin counter — always visible in-game (top-right) */
#coin-counter {
  position: absolute; top: 14px; right: 16px; z-index: 15;
  background: rgba(20,28,40,.6); color: #ffe15a; font-weight: 800; font-size: 20px;
  padding: 7px 15px; border-radius: 16px; font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
/* Cosmic coin counter — top-right, below coin counter */
#cosm-counter {
  position: fixed; top: 56px; right: 16px; z-index: 15;
  background: rgba(20,10,40,.7); color: #cc88ff; font-weight: 800; font-size: 16px;
  padding: 5px 13px; border-radius: 14px; font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 12px rgba(140,0,255,.35);
}
/* Lives counter — top-left, below the title */
#lives-counter {
  position: absolute; top: 46px; left: 18px; z-index: 15;
  background: rgba(20,28,40,.6); color: #fff; font-weight: 700; font-size: 15px;
  padding: 6px 12px; border-radius: 16px; letter-spacing: 1px;
}
/* Active potion timers (below the lives counter, top-left) */
#potion-hud {
  position: absolute; top: 76px; left: 18px; z-index: 15;
  display: flex; gap: 6px;
}
#potion-hud span {
  background: rgba(20,28,40,.6); color: #ffe15a; font-weight: 700; font-size: 14px;
  padding: 4px 9px; border-radius: 12px; font-variant-numeric: tabular-nums;
}

/* Adventure distance readout */
#adv-dist {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  background: rgba(20,28,40,.6); color: #b39bff; font-weight: 800; font-size: 26px;
  padding: 6px 20px; border-radius: 16px; font-variant-numeric: tabular-nums;
}

/* ---- Front menu (over the live 3D scene) ---- */
#menu {
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, rgba(10,20,35,0) 40%, rgba(10,20,35,.35) 100%);
}
#menu-title {
  margin-top: 7vh; font-size: clamp(46px, 9vw, 108px); font-weight: 900;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', system-ui, sans-serif;
  color: #1a1a1a; letter-spacing: 1px;
  text-shadow: 0 3px 0 rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.25);
}
#menu-title span { color: #ffe000; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.3); }
#menu-steps { margin-top: auto; margin-bottom: 12vh; display: flex; flex-direction: column; align-items: center; }
.menu-step { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.menu-btn { pointer-events: auto; min-width: 260px; }
.btn.big.menu-btn { font-size: 22px; padding: 16px 34px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
#m-name, #m-code {
  width: 260px; padding: 12px 14px; margin-bottom: 4px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.9);
  color: #1a1a1a; font-size: 17px; text-align: center; outline: none; font-weight: 600;
}
#m-join-status { color: #ffd24d; font-weight: 700; min-height: 20px; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---- Lobby (waiting room) ---- */
#lobby-hud { position: absolute; inset: 0; pointer-events: none; z-index: 16; }
#lobby-code {
  position: absolute; top: 16px; right: 16px; pointer-events: none;
  background: rgba(20,28,40,.72); color: #ffe15a; font-weight: 800; font-size: 20px;
  padding: 10px 18px; border-radius: 14px; letter-spacing: 1px;
}
#lobby-center { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
#lobby-title { color: #fff; font-weight: 800; font-size: 20px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
#lobby-info { color: #9fefc0; font-weight: 700; font-size: 15px; margin-top: 4px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
#lobby-bottom { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#lobby-bottom .btn { pointer-events: auto; }
#lobby-wait { color: #eaf3ff; font-weight: 700; background: rgba(20,28,40,.6); padding: 10px 20px; border-radius: 12px; }

/* Pointer-lock hint */
#lock-hint {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); z-index: 16;
  background: rgba(255,225,90,.95); color: #1a1a1a; font-weight: 700;
  padding: 9px 18px; border-radius: 12px; font-size: 15px; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Shop section header + skin swatch */
.shop-hdr { color: #ffe15a; font-weight: 800; font-size: 15px; margin: 14px 0 2px; text-align: left; }
.skin-swatch { border-radius: 6px !important; box-shadow: 0 0 0 2px rgba(0,0,0,.3); }
.skin-equip { background: #35d07f !important; color: #04240f !important; }
.skin-buy { background: #ffe15a; color: #1a1a1a; }

/* Potion shop */
#shop-coins {
  color: #ffe15a; font-weight: 800; font-size: 22px; margin-bottom: 14px;
}
#shop-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
#admin-controls .lp-buttons { max-height: 66vh; overflow-y: auto; }
.shop-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,.06); border: 1px solid transparent;
  border-radius: 12px; padding: 10px 14px; color: #eaf3ff;
}
.shop-row.owned { border-color: #35d07f; background: rgba(53,208,127,.1); }
.shop-row .pot-icon { font-size: 30px; flex: 0 0 auto; }
.shop-row .pot-info { flex: 1; display: flex; flex-direction: column; }
.shop-row .pot-desc { color: #9fb4d0; font-size: 12px; margin-top: 2px; }
.shop-row .pot-owned { color: #35d07f; font-weight: 700; font-size: 14px; }
.shop-row .pot-buy { background: #ffe15a; color: #1a1a1a; }
.shop-row .pot-buy:hover:not(:disabled) { background: #fff08a; }
.shop-row .pot-buy:disabled { background: #3a4658; color: #7d90ad; cursor: not-allowed; }

/* Cosmic Shop */
.shop-hdr.cosmic-hdr { color: #cc88ff; margin-top: 20px; }
.vip-badge { font-size: 11px; font-weight: 700; background: rgba(180,60,255,.25); color: #cc88ff; border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.vip-badge.locked { color: #7d7d9a; background: rgba(100,100,140,.15); }
.shop-sub { color: #8899bb; font-size: 12px; margin: 2px 0 6px; text-align: left; }
.shop-cosm-bal { color: #cc88ff; font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.shop-row.cosmic-owned { border-color: #cc44ff; background: rgba(180,60,255,.12); }
.shop-row .pet-buy { background: linear-gradient(135deg, #8822cc, #cc44ff); color: #fff; border: none; }
.shop-row .pet-buy:hover:not(:disabled) { background: linear-gradient(135deg, #aa44ee, #dd66ff); }
.shop-row .pet-buy:disabled { background: #3a4658; color: #7d90ad; cursor: not-allowed; }
.shop-row .pet-equip { background: linear-gradient(135deg, #6600aa, #aa33ee); color: #fff; border: none; }
.shop-row .pet-equip:hover { background: linear-gradient(135deg, #8811cc, #cc44ff); }

/* Course HUD */
#course-hud { position: absolute; inset: 0; pointer-events: none; }
#course-title {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(20,28,40,.55); color: #fff; font-weight: 800; letter-spacing: 1px;
  padding: 8px 20px; border-radius: 14px; font-size: 17px;
}
#course-timer {
  position: absolute; top: 58px; right: 16px;
  background: rgba(20,28,40,.55); color: #eaf3ff; font-weight: 800;
  padding: 7px 15px; border-radius: 14px; font-size: 18px; font-variant-numeric: tabular-nums;
}
#course-controls {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(20,28,40,.5); color: #eaf3ff; padding: 8px 16px;
  border-radius: 20px; font-size: 13px; white-space: nowrap;
}
#course-controls b { color: #ffe15a; }
#course-leave {
  position: absolute; top: 14px; left: 18px; pointer-events: auto;
}
#course-menu {
  position: absolute; top: 54px; left: 18px; pointer-events: auto;
}
.btn.small { font-size: 13px; padding: 8px 14px; }

/* Toast */
#toast {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(46,160,80,.95); color: #fff; font-weight: 700;
  padding: 12px 24px; border-radius: 12px; font-size: 16px; z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

#loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #9fd6ff; color: #1b3a5c; font-size: 20px; font-weight: 700; z-index: 40;
}

.hidden { display: none !important; }

/* Chat */
#chat-box {
  position: fixed;
  bottom: 60px;
  left: 16px;
  width: 280px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#chat-messages {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
}
#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.chat-msg {
  background: rgba(20,28,40,0.72);
  color: #eaf3ff;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  word-break: break-word;
  line-height: 1.4;
  animation: chat-fade-in 0.15s ease;
}
.chat-msg .chat-name { font-weight: 700; color: #ffe15a; margin-right: 2px; }
.chat-vip { font-weight: 700; color: #ffd700; font-size: .72em; vertical-align: middle; background: rgba(255,215,0,.18); border: 1px solid rgba(255,215,0,.4); border-radius: 4px; padding: 1px 5px; margin-right: 4px; letter-spacing: .04em; }
.chat-creator { color: #ffd700 !important; text-shadow: 0 0 6px #ffd700, 0 0 16px rgba(255,215,0,.8), 0 0 32px rgba(255,200,0,.5); }
@keyframes chat-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#chat-input-row {
  display: flex;
  gap: 4px;
}
#chat-input {
  flex: 1;
  background: rgba(20,28,40,0.72);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #eaf3ff;
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  backdrop-filter: blur(4px);
}
#chat-input::placeholder { color: rgba(200,220,255,0.45); }
#chat-input:focus { border-color: rgba(255,225,90,0.6); }
#chat-input:disabled { opacity: 0.4; cursor: not-allowed; }
#chat-send {
  background: rgba(20,28,40,0.72);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #ffe15a;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.1s;
}
#chat-send:hover { background: rgba(255,225,90,0.2); }