/* 洪荒之野 — 纯文字老页游风格 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"SimSun","FangSong","Noto Serif SC","KaiTi","Microsoft YaHei",serif;
  background:#1a1814; color:#d4c8a8; font-size:15px; line-height:1.8;
  overflow:hidden; height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* === Top Bar === */
#topbar{
  position:fixed;top:0;left:0;right:0;height:38px;
  background:linear-gradient(180deg,#2a2418,#1e1b12);
  display:flex;align-items:center;padding:0 12px;
  font-size:12px;z-index:50;gap:12px;
  border-bottom:1px solid #5a4a30;
}
#topbar span{white-space:nowrap}
#tb-name{color:#ffaa00;font-weight:bold;font-size:13px}
#tb-shells{color:#ddaa44}
#tb-stones{color:#cc88cc}

/* === Map Container === */
#map-container{
  position:fixed;top:38px;left:0;right:0;bottom:96px;
  overflow-y:auto;padding:16px 14px;
  background:linear-gradient(180deg,#1e1b15 0%,#1a1812 50%,#171510 100%);
}
#map-grid{max-width:480px;margin:0 auto}

/* === Area Header === */
.area-header{
  text-align:center;padding:12px 8px;margin-bottom:12px;
  border-bottom:1px solid #5a4a30;
}
.area-name{
  font-size:24px;font-weight:bold;color:#ffaa00;
  text-shadow:0 0 8px rgba(200,160,0,0.3);
  letter-spacing:4px;
}
.area-desc{
  font-size:13px;color:#998866;margin-top:6px;
  line-height:1.8;max-width:360px;margin-left:auto;margin-right:auto;
}

/* === Minimap Panel === */
#minimap-panel{
  position:fixed;top:42px;right:8px;z-index:45;
  background:#1a1814;border:1px solid #3a3428;
  border-radius:4px;padding:6px 8px;
  max-width:240px;opacity:0.92;
}
#minimap-grid{overflow:hidden}
.minimap-toggle{
  background:none;border:1px solid #3a3428;
  color:#aa9;font-size:11px;cursor:pointer;
  padding:2px 6px;border-radius:2px;
}

/* === Compass === */
.compass{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:4px;max-width:280px;margin:0 auto 12px;
}
.compass-cell{
  padding:8px 4px;background:#2a2418;
  border:1px solid #3a3428;border-radius:3px;
  cursor:pointer;color:#d4c8a8;font-size:13px;
  text-align:center;line-height:1.4;
  transition:all 0.15s;
}
.compass-cell:hover{background:#3a3020;border-color:#886630}
.compass-cell:active{transform:scale(0.96)}
.compass-open{border-color:#5a6040}
.compass-building{border-color:#886630;background:#2a2018}
.compass-building:hover{background:#3a2818;border-color:#aa8844}
.compass-blocked{border-color:#553030;color:#665;cursor:not-allowed}
.compass-here{background:#3a3020;border-color:#886630;cursor:default;font-weight:bold}
.compass-blank{background:transparent;border:none}
.dir-name{font-size:9px;color:#887766;display:block;line-height:1.2;margin-top:1px}

/* === Location Info === */
.location-info{
  text-align:center;padding:6px;margin-bottom:10px;
  font-size:11px;color:#776644;
}
.loc-label{color:#998866;font-size:10px}
.loc-coords{color:#665533}

/* === Section Boxes === */
.section-box{
  padding:10px;margin-bottom:8px;border-radius:4px;
}
.section-npc{background:#1e1c18;border:1px solid #3a3020}
.section-player{background:#1a1c18;border:1px solid #3a4a30}
.section-building{background:#1e1a18;border:1px solid #4a3a20}
.section-echo{background:#181a1c;border:1px solid #2a3040}
.section-title{
  font-size:12px;color:#887744;margin-bottom:6px;
  letter-spacing:2px;
}

/* === NPC Entry === */
.npc-entry{
  padding:6px 8px;font-size:13px;cursor:pointer;
  border-radius:2px;transition:background 0.1s;
  line-height:1.8;
}
.npc-entry:hover{background:#2a2418}
.npc-name{color:#cc8844;font-weight:bold}
.npc-title{color:#665544;font-size:11px}

/* === Player Entry === */
.player-entry{
  padding:4px 8px;font-size:13px;color:#6a8a5a;
  line-height:1.8;
}

/* === Empty Hint === */
.empty-hint{
  font-size:12px;color:#554433;font-style:italic;
  padding:4px 8px;line-height:1.7;
}

/* === Building === */
.building-hint{
  font-size:12px;color:#998866;padding:4px 0;line-height:1.7;
}
.enter-btn{
  display:block;width:100%;margin:6px 0;padding:10px 16px;
  background:#2a2010;border:1px solid #886630;color:#ffaa00;
  font-size:14px;cursor:pointer;border-radius:3px;
  font-family:inherit;text-align:center;letter-spacing:2px;
  transition:all 0.15s;
}
.enter-btn:hover{background:#3a2818;border-color:#aa8844;color:#ffcc44}
.enter-btn:active{transform:scale(0.97)}

/* === Echo Text === */
.echo-text{
  font-size:12px;color:#556688;font-style:italic;
  line-height:1.8;padding:2px 0;
}

/* === Dialogue === */
.dialogue-box{
  text-align:center;padding:16px 0;
}
.dialogue-npc{
  font-size:22px;font-weight:bold;color:#ffaa00;
  letter-spacing:4px;margin-bottom:4px;
}
.dialogue-title{font-size:13px;color:#887744}
.dialogue-line{
  width:60px;height:1px;background:#5a4a30;
  margin:12px auto;
}
.dialogue-text{
  font-size:15px;color:#d4c8a8;line-height:2;
  max-width:360px;margin:0 auto 16px;
  text-align:left;text-indent:2em;
}

/* === Chat Panel === */
#chat-panel{
  position:fixed;bottom:0;left:0;right:0;height:96px;
  background:#1e1b12;display:flex;z-index:50;
  border-top:1px solid #3a3428;
}
#chat-msgs{
  flex:1;overflow-y:auto;padding:6px 10px;
  font-size:11px;line-height:1.6;
}
#chat-msgs .msg{margin-bottom:2px;word-break:break-all}
#chat-msgs .msg .sender{color:#aa9;margin-right:4px}

/* === Quick Bar === */
#quick-bar{
  position:fixed;bottom:96px;left:0;right:0;z-index:50;
  display:flex;gap:3px;padding:5px 6px;background:#1e1b12;
  border-top:1px solid #2a2418;overflow-x:auto;
}
#quick-bar button{
  padding:6px 10px;background:#2a2418;
  border:1px solid #3a3428;color:#d4c8a8;
  border-radius:3px;font-size:11px;white-space:nowrap;
  cursor:pointer;font-family:inherit;
  transition:all 0.1s;
}
#quick-bar button:hover{background:#3a3020;border-color:#886630}
#quick-bar button:active{background:#4a3a28;color:#ffaa00}

/* === Chat Input === */
#chat-input{
  flex:1;background:#1a1814;border:1px solid #3a3428;
  color:#d4c8a8;padding:6px 10px;font-size:12px;
  font-family:inherit;border-radius:2px;
}
#chat-input:focus{outline:none;border-color:#886630}
#chat-chan{
  background:#1a1814;border:1px solid #3a3428;
  color:#aa9;font-size:11px;font-family:inherit;
}

/* === Modal === */
#modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);
  z-index:60;display:none;
}
#modal-overlay.show{display:block}
#modal-content{
  position:fixed;top:44px;left:8px;right:8px;bottom:8px;
  background:#1e1b15;border-radius:6px;z-index:61;
  overflow-y:auto;padding:16px;display:none;
  border:1px solid #3a3428;
}
#modal-content.show{display:block}
#modal-close{
  float:right;background:none;border:none;
  color:#aa9;font-size:22px;cursor:pointer;
  line-height:1;
}
#modal-body{clear:both;padding-top:4px}

/* === Modal Title === */
.modal-title{
  font-size:20px;color:#ffaa00;margin-bottom:12px;
  letter-spacing:3px;text-align:center;
  border-bottom:1px solid #3a3020;padding-bottom:8px;
}

/* === Profile Card === */
.profile-card{
  background:#1e1c18;border:1px solid #3a3020;
  border-radius:4px;overflow:hidden;
}
.pf-row{
  display:flex;justify-content:space-between;
  padding:8px 12px;font-size:13px;
  border-bottom:1px solid #2a2418;
}
.pf-row:last-child{border-bottom:none}
.pf-row span:first-child{color:#887744}

/* === Farm Plot === */
.farm-plot{
  padding:10px 6px;background:#2a2420;
  border:1px solid #3a3028;border-radius:4px;
  text-align:center;font-size:13px;cursor:pointer;
  transition:all 0.1s;
}
.farm-plot:hover{background:#3a3028}
.plot-actions{margin-top:6px}
.plot-actions button{
  padding:4px 10px;background:#886630;color:#fff;
  border:none;border-radius:2px;font-size:10px;
  cursor:pointer;font-family:inherit;
}

/* === Pet Card === */
.pet-card{
  padding:10px;margin-bottom:6px;
  background:#1e1c18;border:1px solid #3a3020;
  border-radius:4px;font-size:13px;line-height:1.6;
}

/* === Tab Button === */
.tab-btn{
  padding:6px 14px;background:#2a2418;
  border:1px solid #3a3428;color:#d4c8a8;
  border-radius:3px;font-size:11px;cursor:pointer;
  font-family:inherit;transition:all 0.1s;
}
.tab-btn:hover{background:#3a3020;border-color:#886630;color:#ffaa00}
.tab-btn:active{transform:scale(0.96)}

/* === Mini Button === */
.mini-btn{
  padding:3px 8px;background:#2a2418;
  border:1px solid #3a3428;color:#d4c8a8;
  border-radius:2px;font-size:10px;cursor:pointer;
  font-family:inherit;transition:all 0.1s;
}
.mini-btn:hover{background:#3a3020;border-color:#886630}
.mini-btn:active{color:#ffaa00}

/* === Path Button (prologue) === */
.path-btn{
  display:block;width:100%;margin:6px 0;padding:12px;
  background:#2a2418;border:1px solid #5a4a30;
  border-radius:4px;cursor:pointer;color:#d4c8a8;
  font-family:inherit;line-height:1.6;
  transition:all 0.15s;text-align:left;
}
.path-btn:hover{background:#3a3020;border-color:#886630}
.path-btn:active{transform:scale(0.97)}
.path-btn b{display:block;font-size:15px;margin-bottom:2px}
.path-btn small{display:block;font-size:10px;color:#998866}

/* === Prologue Box === */
.prologue-box{
  text-align:center;max-width:380px;margin:auto;
  padding:20px;
}
.prose{
  font-size:14px;color:#aa9;margin:8px 0;
  line-height:2;text-indent:2em;text-align:left;
}

/* === Leaderboard Row === */
.lb-row{
  display:flex;justify-content:space-between;
  padding:6px 8px;font-size:12px;
  border-bottom:1px solid #2a2418;
  line-height:1.6;
}

/* === Chapter Card === */
.chapter-card{
  padding:10px;margin:6px 0;cursor:pointer;
  background:#1e1c18;border:1px solid #3a3020;
  border-radius:4px;font-size:13px;line-height:1.7;
  transition:all 0.1s;
}
.chapter-card:hover{background:#2a2418;border-color:#886630}

/* === Story Text === */
.story-text{
  font-size:15px;color:#d4c8a8;line-height:2.2;
  max-width:400px;margin:0 auto;text-indent:2em;
  white-space:pre-line;
}

/* === Toast === */
.toast{
  position:fixed;top:50px;left:50%;transform:translateX(-50%);
  background:#2a2010;color:#ffaa00;padding:8px 20px;
  border:1px solid #886630;border-radius:3px;
  font-size:13px;z-index:100;font-family:inherit;
  white-space:pre-line;text-align:center;
  animation:fadeInOut 4s ease;max-width:320px;
  line-height:1.7;
}
@keyframes fadeInOut{0%,100%{opacity:0}10%,90%{opacity:1}}

/* === Splash (Login) === */
#splash{
  position:fixed;inset:0;background:#1a1814;
  display:flex;align-items:center;justify-content:center;
  z-index:200;
  background-image:radial-gradient(ellipse at center,#2a2418 0%,#1a1814 70%);
}
#splash.hidden{display:none}
#splash .splash-box{text-align:center}
#splash .splash-icon{font-size:64px;margin-bottom:12px}
#splash .splash-title{
  font-size:32px;color:#ffaa00;font-weight:bold;
  margin-bottom:8px;letter-spacing:8px;
}
#splash .splash-subtitle{
  font-size:13px;color:#887744;margin-bottom:20px;
  letter-spacing:4px;
}
#splash input{
  display:block;width:220px;margin:6px auto;
  padding:10px 12px;background:#2a2418;
  border:1px solid #3a3428;color:#d4c8a8;
  border-radius:3px;font-size:14px;text-align:center;
  font-family:inherit;
}
#splash input:focus{outline:none;border-color:#886630}
#splash button{
  padding:10px 40px;background:#886630;color:#fff;
  border:none;border-radius:3px;font-size:14px;
  cursor:pointer;margin-top:8px;font-family:inherit;
  letter-spacing:2px;transition:all 0.15s;
}
#splash button:hover{background:#aa7744}
#splash button:active{transform:scale(0.96)}
#splash button:disabled{opacity:0.5;cursor:not-allowed}
#splash a,#splash .splash-link{
  color:#886630;font-size:12px;cursor:pointer;
  margin-top:12px;display:block;
}

/* === D-Pad (Mobile) === */
#dpad{
  display:none;position:fixed;bottom:200px;left:50%;
  transform:translateX(-50%);z-index:55;
  grid-template-columns:48px 48px 48px;
  grid-template-rows:48px 48px 48px;
  gap:4px;
}
#dpad button{
  background:#2a2418;border:1px solid #3a3428;
  color:#d4c8a8;font-size:18px;cursor:pointer;
  border-radius:4px;font-family:inherit;
  transition:all 0.1s;
}
#dpad button:hover{background:#3a3020}
#dpad button:active{background:#4a3a28;color:#ffaa00;transform:scale(0.92)}

/* === Mobile Chat Popup === */
#chat-popup{
  display:none;position:fixed;bottom:96px;left:0;right:0;
  height:50%;background:#1e1b12;z-index:70;
  border-top:1px solid #3a3428;flex-direction:column;
}
#chat-popup-msgs{
  flex:1;overflow-y:auto;padding:6px 10px;
  font-size:12px;line-height:1.6;
}
#chat-popup-input{
  flex:1;background:#1a1814;border:1px solid #3a3428;
  color:#d4c8a8;padding:8px 10px;font-size:13px;
  font-family:inherit;border-radius:2px;
}

/* === Season Themes === */
body.spring #map-container{background:linear-gradient(180deg,#1e2418 0%,#1a1e12 50%,#171a10 100%)}
body.summer #map-container{background:linear-gradient(180deg,#242018 0%,#1e1c14 50%,#1a1812 100%)}
body.autumn #map-container{background:linear-gradient(180deg,#241e14 0%,#1e1a12 50%,#1a1610 100%)}
body.winter #map-container{background:linear-gradient(180deg,#181a20 0%,#16181e 50%,#14161a 100%)}

/* === Responsive === */
@media(max-width:768px){
  #map-container{bottom:80px}
  #chat-panel{height:80px;flex-direction:column}
  #quick-bar{bottom:80px;gap:2px;padding:4px 4px}
  #quick-bar button{padding:5px 7px;font-size:10px}
  #dpad{display:grid}
  #chat-msgs{display:none}
}
@media(min-width:769px){
  #dpad{display:none}
  #chat-msgs{display:block;flex:1}
  #chat-panel{height:96px}
  #map-container{bottom:144px}
  #quick-bar{bottom:96px}
}
/* === Layer indicator === */
.layer-indicator{
  text-align:center;padding:4px 8px;margin-bottom:8px;
  background:#2a2018;border:1px solid #5a4a20;
  border-radius:3px;font-size:12px;color:#aa8844;
}

/* === Spirit track hint === */
.spirit-track-hint{
  text-align:center;padding:6px 10px;margin-bottom:8px;
  background:linear-gradient(90deg,transparent,#1a1028,transparent);
  border:1px solid #3a2050;border-radius:3px;
  font-size:12px;color:#aa88ff;letter-spacing:1px;
  animation:pulse 3s ease infinite;
}
@keyframes pulse{0%,100%{opacity:0.7}50%{opacity:1}}

/* === Tutorial hint === */
.tutorial-hint{
  text-align:center;padding:6px 10px;margin-bottom:8px;
  background:linear-gradient(90deg,transparent,#2a2010,transparent);
  border:1px solid #5a4020;border-radius:3px;
  font-size:12px;color:#ddaa44;
}

/* === Spirit glow on direction === */
.spirit-glow{
  border-color:#aa88ff!important;
  box-shadow:0 0 8px rgba(170,136,255,0.3);
  animation:pulseGlow 2s ease infinite;
}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 4px rgba(170,136,255,0.2)}50%{box-shadow:0 0 12px rgba(170,136,255,0.5)}}

/* === Active tutorial step glow === */
.compass-cell.tutorial-glow{
  border-color:#ddaa44!important;
  box-shadow:0 0 8px rgba(220,170,68,0.4);
}

@media(min-width:1024px){
  #map-grid{max-width:520px}
  #modal-content{left:50%;right:auto;width:500px;margin-left:-250px}
}

/* === Modal body larger for story text === */
@media(min-width:769px){
  #modal-content{padding:20px}
  .story-text{max-width:440px}
}