/* ==========================================================================
   山海宠物园 · styles.css
   视觉基调：宣纸底 · 墨线 · 朱砂与鎏金点缀
   ========================================================================== */

:root{
  --paper:      #f6efe0;
  --paper-2:    #fffdf7;
  --paper-3:    #efe6d2;
  --ink:        #2e2619;
  --ink-2:      #6a5c48;
  --ink-3:      #9a8b74;
  --line:       #e2d5bb;
  --line-2:     #d3c2a2;
  --red:        #c0402c;
  --red-soft:   #f6e2dd;
  --gold:       #b8892f;
  --gold-soft:  #f7ecd2;
  --jade:       #4c7f6b;
  --jade-soft:  #e3efe9;
  --blue:       #3d6b8e;
  --shadow-sm:  0 2px 6px rgba(94,70,38,.07);
  --shadow:     0 8px 26px rgba(94,70,38,.11);
  --shadow-lg:  0 20px 60px rgba(94,70,38,.20);
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --font-serif: "Songti SC", "Noto Serif SC", "Hiragino Sans GB", "STSong", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -5%, #fdf8ee 0%, transparent 60%),
    radial-gradient(900px 500px at 95% 105%, #f2e8d4 0%, transparent 55%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button{ font-family: inherit; cursor: pointer; }
.hidden{ display:none !important; }

/* ------------------------------ 通用控件 ------------------------------ */
.btn{
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  transition: .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--gold); }
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity:.45; cursor: not-allowed; transform:none; box-shadow:none; }
.btn-primary{
  background: linear-gradient(180deg, #cf4c34, var(--red));
  border-color: #a83422; color: #fff9f2;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.btn-primary:hover{ border-color: #8f2a19; }
.btn-jade{ background: linear-gradient(180deg,#5b927c,var(--jade)); border-color:#3c6a58; color:#f4fbf7; }
.btn-line{ background: transparent; box-shadow:none; }
.btn-danger{ background: var(--red-soft); border-color: #e0b6ac; color: #932a17; }
.btn-sm{ padding: 6px 12px; font-size: 12.5px; }
.btn-xs{ padding: 4px 10px; font-size: 12px; border-radius: 8px; }

.input{
  width: 100%;
  border: 1px solid var(--line);
  background: #fffef9;
  color: var(--ink);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: .16s;
}
.input:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,137,47,.14); }
.input::placeholder{ color: #b6a894; }

.field{ margin-bottom: 14px; }
.field-label{ display:block; font-size:12.5px; font-weight:700; color: var(--ink-2); margin-bottom:6px; letter-spacing:.6px; }

/* ============================== 登录页 ============================== */
.screen{ height:100%; width:100%; }
.screen:not(.active){ display:none !important; }

.screen-login{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  max-width: 1180px;
  margin: 0 auto;
  height: 100%;
}
.login-art{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background:
    radial-gradient(700px 400px at 30% 20%, rgba(255,255,255,.85), transparent 70%),
    linear-gradient(160deg, #e8f0ea 0%, #f7f0e2 55%, #efe3c9 100%);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.login-art::before{
  content:"";
  position:absolute; inset:-10%;
  background:
    repeating-linear-gradient(115deg, rgba(184,137,47,.05) 0 1px, transparent 1px 22px);
  pointer-events:none;
}
.mountains{ position:absolute; left:0; right:0; bottom:0; width:100%; height:46%; pointer-events:none; }
.stage-m{ bottom: 17%; height: 44%; }
.login-art-inner{ position: relative; max-width: 430px; }
.seal{
  display:inline-flex; flex-direction:column; align-items:center;
  width: 54px; padding: 6px 0;
  background: var(--red); color: #fff6ec;
  font-family: var(--font-serif); font-size: 17px; line-height:1.05; letter-spacing:1px;
  border-radius: 6px; margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(192,64,44,.32);
}
.game-title{
  font-family: var(--font-serif);
  font-size: 44px; line-height:1.15; margin: 0 0 10px;
  letter-spacing: 3px; color: #2a2216;
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.game-sub{ margin:0 0 26px; color: var(--ink-2); font-size: 15px; letter-spacing:.8px; }
.login-quote{
  font-family: var(--font-serif);
  font-size: 16px; line-height:1.9; color: #4a4030;
  margin: 0; padding-left: 14px; border-left: 3px solid var(--gold);
}
.login-quote-src{ font-size:12px; color: var(--ink-3); margin: 6px 0 26px 17px; letter-spacing:.5px; }
.login-feats{ list-style:none; margin:0; padding:0; }
.login-feats li{
  position: relative; padding-left: 18px; margin-bottom: 9px;
  font-size: 13.5px; color: var(--ink-2);
}
.login-feats li::before{
  content:""; position:absolute; left:2px; top:8px;
  width:6px; height:6px; border-radius:50%; background: var(--gold);
}

.login-panel{
  display:flex; flex-direction:column;
  padding: 46px 48px;
  overflow-y: auto;
}
.login-mini-brand{ display:none; align-items:center; gap:10px; margin-bottom: 22px; }
.mini-title{ font-family: var(--font-serif); font-size: 20px; letter-spacing:2px; line-height:1.2; }
.mini-sub{ font-size:11px; color: var(--ink-3); margin-top:3px; }
.tabs{ display:flex; gap: 6px; padding: 5px; background: var(--paper-3); border-radius: 999px; margin-bottom: 26px; }
.tab{
  flex:1; border:none; background:transparent; color: var(--ink-2);
  padding: 9px 0; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing:1px;
  transition:.18s;
}
.tab.active{ background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow-sm); }
.login-body{ flex:1; }
.panel-title{ font-family: var(--font-serif); font-size: 20px; margin: 0 0 4px; letter-spacing:1.5px; }
.panel-desc{ font-size: 12.5px; color: var(--ink-3); margin: 0 0 18px; line-height:1.7; }

.roster-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr));
  gap: 9px; max-height: min(58vh, 470px); overflow-y: auto;
  padding: 4px 6px 4px 4px; margin-bottom: 16px;
  scrollbar-width: thin;
}
.roster-chip{
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 12px;
  padding: 11px 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-align:center;
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
  transition:.16s;
}
.roster-chip:hover{ border-color: var(--gold); background: var(--gold-soft); transform: translateY(-1px); }
.roster-chip small{ display:block; font-size:10.5px; color: var(--ink-3); font-weight:500; margin-top:3px; }
.roster-empty{
  grid-column: 1/-1; text-align:center; padding: 26px 10px;
  color: var(--ink-3); font-size: 13px; line-height:1.9;
  border: 1px dashed var(--line-2); border-radius: 12px; background: rgba(255,255,255,.5);
}
.login-foot{ display:flex; gap:10px; align-items:center; justify-content: space-between; margin-top:6px; }
.login-hint{ font-size:12px; color: var(--ink-3); line-height:1.7; }
.pwd-box{ background: var(--paper-3); border-radius:var(--r); padding: 18px; margin-bottom: 16px; }
.pwd-who{ font-family: var(--font-serif); font-size: 17px; margin-bottom: 12px; letter-spacing:1px; }
.pwd-err{ color: var(--red); font-size:12.5px; margin-top:8px; min-height: 16px; }
.pwd-hint{ font-size:12.5px; margin-top:10px; padding:8px 12px; border-radius:8px; line-height:1.6; }
.pwd-hint-def{ color: var(--ink-2); background: rgba(255,255,255,.65); border:1px dashed var(--line-2); }
.pwd-hint-def b{ color: var(--red); font-size:15px; letter-spacing:2px; font-family: var(--font-serif); }
.pwd-hint-mod{ color: var(--ink-3); }
.link-btn{ background:none; border:none; color: var(--red); font-size:12.5px; font-weight:600; padding:0; text-decoration: underline; }

/* ============================== 游戏主界面 ============================== */
.screen-game{ display:grid; grid-template-rows: auto 1fr auto; height:100%; }

.topbar{
  display:flex; align-items:center; gap: 20px;
  padding: 12px 20px;
  background: rgba(255,253,247,.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  z-index: 30;
  flex-wrap: wrap;
  row-gap: 10px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(160deg,#cf4c34,var(--red));
  color:#fff7ee; font-family: var(--font-serif); font-size: 19px;
  display:grid; place-items:center;
  box-shadow: 0 4px 12px rgba(192,64,44,.28);
}
.brand-name{ font-family: var(--font-serif); font-size: 16px; letter-spacing:2px; line-height:1.2; }
.brand-sub{ font-size: 10.5px; color: var(--ink-3); letter-spacing:1px; }

.hud{ display:flex; gap: 10px; flex: 1; flex-wrap: wrap; min-width: 0; }
.hud-item{
  display:flex; align-items:baseline; gap:6px;
  background: var(--paper-3); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; color: var(--ink-2);
  border: 1px solid transparent;
}
.hud-item b{ font-size: 16px; color: var(--red); font-family: var(--font-serif); letter-spacing:.5px; }
.hud-item.gold b{ color: var(--gold); }
.hud-item.jade b{ color: var(--jade); }
.hud-item.clickable{ cursor:pointer; }
.hud-item.clickable:hover{ border-color: var(--gold); }

.topnav{ display:flex; gap:6px; flex-wrap: wrap; justify-content:flex-end; flex-shrink: 0; }
.nav-btn{
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  transition: .16s;
  white-space: nowrap;
}
.nav-btn:hover{ color: var(--ink); border-color: var(--gold); background: var(--gold-soft); }
.nav-btn .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--red); margin-left:5px; vertical-align: 2px;
  animation: pulseDot 1.6s infinite;
}
.nav-ghost{ color: var(--ink-3); background: transparent; }
@keyframes pulseDot{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.75);} }

.game-main{
  display:grid; grid-template-columns: minmax(0,1fr) 348px;
  gap: 16px; padding: 16px 20px; min-height: 0; overflow: hidden;
}

/* ------------------------------ 舞台 ------------------------------ */
.stage-card{ display:flex; flex-direction:column; min-height: 0; gap: 12px; }
.stage{
  position: relative;
  flex: 1; min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, #e9f1f4 0%, #f6f0e3 52%, #efe3ca 100%);
  display: flex; align-items: flex-end; justify-content: center;
}
.stage-sky{
  position:absolute; inset:0;
  background: radial-gradient(620px 300px at 78% 8%, rgba(255,246,214,.85), transparent 65%);
}
.stage-hill{
  position:absolute; left:-12%; right:-12%; bottom: 20%; height: 46%;
  background: radial-gradient(ellipse at 50% 100%, #cfe0c8 0%, #d9e6d2 45%, transparent 72%);
  filter: blur(1px);
}
.stage-ground{
  position:absolute; left:0; right:0; bottom:0; height: 21%;
  background: linear-gradient(180deg, #e6d6b6 0%, #dcc9a4 100%);
  border-top: 1px solid rgba(150,120,70,.18);
}
.stage-ground::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 12% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px),
                    radial-gradient(circle at 42% 70%, rgba(160,130,80,.16) 0 2px, transparent 3px),
                    radial-gradient(circle at 74% 26%, rgba(255,255,255,.45) 0 2px, transparent 3px);
  background-size: 120px 60px, 90px 50px, 150px 70px;
  opacity:.7;
}
.cloud{
  position:absolute; background: #fff; border-radius: 999px;
  filter: blur(0.4px); opacity:.72;
  box-shadow: 26px 8px 0 -4px #fff, -26px 6px 0 -6px #fff;
}
.cloud.c1{ width: 90px; height: 26px; top: 12%; left: 8%; animation: drift 46s linear infinite; }
.cloud.c2{ width: 130px; height: 32px; top: 24%; right: 12%; opacity:.55; animation: drift 62s linear infinite reverse; }
.cloud.c3{ width: 70px; height: 20px; top: 6%; right: 38%; opacity:.45; animation: drift 78s linear infinite; }
@keyframes drift{ from{ transform: translateX(-30px); } to{ transform: translateX(30px); } }

.pet-slot{
  position: relative;
  height: min(66%, 380px);
  aspect-ratio: 1 / 1;
  width: auto;
  margin-bottom: 12%;
  z-index: 3;
  display:grid; place-items:center;
  cursor: pointer;
}
.pet-svg{
  width: 100%; height: 100%; overflow: visible;
  animation: breathe 3.6s ease-in-out infinite;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 10px 18px rgba(80,60,30,.16));
}
/* --- 3D 画布 --- */
.pet-canvas{
  display: block; width: 100%; height: 100%;
  animation: fadeIn .5s ease;
  touch-action: none;
}
.pet-slot.is-3d{ height: min(72%, 420px); }
.pet-img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.dex-big{ width: 140px; height: 140px; margin: 0 auto 10px; }
@keyframes breathe{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-5px) scale(1.018); }
}
.pet-svg .eye{ animation: blink 5.2s infinite; transform-box: fill-box; transform-origin: center; }
.pet-svg .eye.e2{ animation-delay: .04s; }
@keyframes blink{ 0%,92%,100%{ transform: scaleY(1); } 95%{ transform: scaleY(.08); } }
.pet-svg .tailfan{ transform-origin: 100px 152px; animation: sway 3.8s ease-in-out infinite; }
@keyframes sway{ 0%,100%{ transform: rotate(-3deg);} 50%{ transform: rotate(3deg);} }
.pet-svg .wing{ animation: flap 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 100% 60%; }
.pet-svg .wing.r{ animation-name: flapR; transform-origin: 0% 60%; }
@keyframes flap{ 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-7deg);} }
@keyframes flapR{ 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(7deg);} }

/* 互动动画 */
.pet-slot.anim-eat .pet-svg{ animation: eatBounce .5s ease; }
@keyframes eatBounce{ 0%{transform:scale(1)} 30%{transform:scale(1.12,.9) translateY(4px)} 60%{transform:scale(.95,1.06) translateY(-6px)} 100%{transform:scale(1)} }
.pet-slot.anim-bath .pet-svg{ animation: shakeIt .6s ease; }
@keyframes shakeIt{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-5deg) scale(.98)} 45%{transform:rotate(5deg)} 70%{transform:rotate(-3deg)} }
.pet-slot.anim-play .pet-svg{ animation: jumpIt .62s cubic-bezier(.3,1.4,.4,1); }
@keyframes jumpIt{ 0%{transform:translateY(0)} 35%{transform:translateY(-26px) scale(1.04)} 70%{transform:translateY(2px) scale(.97,1.03)} 100%{transform:translateY(0)} }
.pet-slot.anim-talk .pet-svg{ animation: nodIt .5s ease; }
@keyframes nodIt{ 0%,100%{transform:rotate(0)} 40%{transform:rotate(2.5deg)} 70%{transform:rotate(-2deg)} }
.pet-slot.anim-level .pet-svg{ animation: popIt .8s ease; }
@keyframes popIt{ 0%{transform:scale(1)} 40%{transform:scale(1.16)} 100%{transform:scale(1)} }

/* 死亡状态 */
.stage.dead{ background: linear-gradient(180deg,#dfe2e4 0%,#e8e6df 55%,#dcd7cb 100%); }
.stage.dead .pet-svg,
.stage.dead .pet-canvas{
  filter: grayscale(1) brightness(.94) drop-shadow(0 8px 14px rgba(60,60,60,.15));
  animation: none; opacity: .82;
}
.stage.dead .stage-hill{ background: radial-gradient(ellipse at 50% 100%, #c9cfc9 0%, #d4d9d2 45%, transparent 72%); }
.stage.dead .cloud{ opacity:.35; }
.stage.dead .stage-ground{ filter: grayscale(1); }

/* 对话框 */
.speech{
  position:absolute; top: 7%; left: 50%; transform: translateX(-50%);
  max-width: 78%;
  background: #fffdf6;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  padding: 10px 18px;
  font-family: var(--font-serif);
  font-size: 15px; color: #3b3122; letter-spacing: 1px;
  box-shadow: var(--shadow);
  z-index: 6;
  animation: speechIn .3s ease;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.speech::after{
  content:""; position:absolute; bottom:-9px; left:50%; margin-left:-8px;
  width:14px; height:14px; background:#fffdf6;
  border-right:1.5px solid var(--line-2); border-bottom:1.5px solid var(--line-2);
  transform: rotate(45deg);
}
@keyframes speechIn{ from{ opacity:0; transform: translate(-50%, 8px) scale(.94);} to{ opacity:1; transform: translate(-50%,0) scale(1);} }

.float-layer{ position:absolute; inset:0; pointer-events:none; z-index: 8; }
.float-text{
  position:absolute; left:50%; top:38%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 700;
  color: var(--jade);
  text-shadow: 0 2px 0 rgba(255,255,255,.85);
  animation: floatUp 1.15s ease-out forwards;
  white-space: nowrap;
}
.float-text.bad{ color: var(--red); }
.float-text.gold{ color: var(--gold); }
@keyframes floatUp{
  0%{ opacity:0; transform: translate(-50%, 10px) scale(.8); }
  22%{ opacity:1; transform: translate(-50%, -6px) scale(1.05); }
  100%{ opacity:0; transform: translate(-50%, -58px) scale(1); }
}

.stage-nameplate{
  position:absolute; bottom: 2.5%; left: 50%; transform: translateX(-50%);
  display:flex; align-items:center; gap: 10px;
  background: rgba(255,253,247,.82);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12.5px; color: var(--ink-2);
  backdrop-filter: blur(6px);
  z-index: 5;
}
.stage-nameplate .np-name{ font-family: var(--font-serif); font-size: 15px; color: var(--ink); letter-spacing:1px; }
.stage-nameplate .np-lv{
  background: linear-gradient(180deg,#f3d999,var(--gold)); color:#4a3407;
  font-weight:800; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  letter-spacing:.5px;
}

/* 操作条 */
.action-bar{ display:flex; gap: 10px; }
.act-btn{
  flex:1;
  display:flex; align-items:center; gap: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--r);
  padding: 11px 14px;
  text-align: left;
  transition:.16s;
  box-shadow: var(--shadow-sm);
}
.act-btn:hover:not(:disabled){ border-color: var(--gold); background: #fffdf2; transform: translateY(-2px); box-shadow: var(--shadow); }
.act-btn:disabled{ opacity:.45; cursor:not-allowed; }
.act-ico{
  width: 32px; height: 32px; border-radius: 10px;
  display:grid; place-items:center;
  font-family: var(--font-serif); font-size: 15px; font-weight:700;
  background: var(--gold-soft); color: var(--gold);
  flex-shrink:0;
}
.act-btn[data-act="bath"] .act-ico{ background:#e4eff5; color: var(--blue); }
.act-btn[data-act="play"] .act-ico{ background: var(--jade-soft); color: var(--jade); }
.act-btn[data-act="talk"] .act-ico{ background: var(--red-soft); color: var(--red); }
.act-btn[data-act="rebirth"] .act-ico{ background:#eceae4; color:#6d6355; }
.act-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.act-title{ font-size: 13.5px; font-weight: 700; color: var(--ink); }
.act-sub{ font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

/* ------------------------------ 侧栏 ------------------------------ */
.side{ display:flex; flex-direction:column; gap: 12px; overflow-y: auto; padding-right: 2px; }
.card{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.pet-head{ display:flex; align-items:center; gap: 12px; }
.pet-head-avatar{
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--paper-3); display:grid; place-items:center; flex-shrink:0;
  overflow: hidden;
}
.pet-head-avatar svg{ width: 100%; height: 100%; }
.ph-main{ min-width:0; flex:1; }
.ph-name{ font-family: var(--font-serif); font-size: 17px; letter-spacing:1px; display:flex; align-items:center; gap:6px; }
.ph-species{ font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.badges{ display:flex; gap:5px; flex-wrap: wrap; margin-top: 6px; }
.badge{
  font-size: 10.5px; font-weight:700; padding: 2px 8px; border-radius: 999px;
  letter-spacing:.6px;
}
.badge-gold{ background: var(--gold-soft); color: #8a6316; }
.badge-jade{ background: var(--jade-soft); color: #2f6150; }
.badge-red{ background: var(--red-soft); color: #932a17; }
.badge-gray{ background: #ece9e1; color: #7b7263; }

.stats{ display:flex; flex-direction:column; gap: 12px; }
.stat-row{ display:grid; grid-template-columns: 58px 1fr 40px; align-items:center; gap: 10px; }
.stat-label{ font-size: 12px; color: var(--ink-2); letter-spacing:.6px; }
.bar{ height: 9px; border-radius: 999px; background: #eee7d8; overflow:hidden; position:relative; }
.bar .fill{
  height:100%; border-radius:999px;
  transition: width .45s cubic-bezier(.2,.8,.3,1), background .3s;
  background: linear-gradient(90deg,#7fb79f,var(--jade));
}
.bar .fill.lv2{ background: linear-gradient(90deg,#e6c477,var(--gold)); }
.bar .fill.lv3{ background: linear-gradient(90deg,#e0785f,var(--red)); }
.stat-num{ font-size: 12px; font-weight:700; color: var(--ink-2); text-align:right; font-variant-numeric: tabular-nums; }

.growth-box{ border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px; }
.growth-top{ display:flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.growth-top .gl{ font-size:12px; color: var(--ink-2); }
.growth-top .gv{ font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.growth-top .gv b{ color: var(--gold); font-size: 13px; }

.tips-card{ background: linear-gradient(180deg,#fffdf5,#fdf7e6); border-color: #ecdfbf; }
.tips-title{ font-size: 11.5px; font-weight:800; color: var(--gold); letter-spacing: 2px; margin-bottom: 8px; }
.tip-item{ font-size: 12px; color: var(--ink-2); line-height: 1.75; padding-left: 12px; position: relative; }
.tip-item::before{ content:"·"; position:absolute; left:0; color: var(--gold); font-weight:800; }

/* ------------------------------ 日志条 ------------------------------ */
.logbar{
  display:flex; align-items:center; gap: 12px;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255,253,247,.7);
}
.logbar-label{
  font-size: 11px; font-weight:800; letter-spacing:2px; color: var(--ink-3);
  flex-shrink:0; padding-right: 12px; border-right: 1px solid var(--line);
}
.log-scroll{ display:flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.log-scroll::-webkit-scrollbar{ display:none; }
.log-item{
  flex-shrink:0;
  font-size: 11.5px; color: var(--ink-2);
  background: var(--paper-3);
  border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.log-item .lt{ color: var(--ink-3); margin-right: 6px; font-variant-numeric: tabular-nums; }
.log-item.good{ background: var(--jade-soft); color: #2f6150; }
.log-item.bad{ background: var(--red-soft); color: #932a17; }
.log-item.warn{ background: #fdf0d8; color: #8a6316; }
.log-item.level{ background: var(--gold-soft); color: #7a5712; font-weight:700; }

/* ============================== 弹窗 ============================== */
.modal-root{ position: fixed; inset:0; z-index: 100; }
.modal-mask{
  position:absolute; inset:0;
  background: rgba(48,38,24,.34);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  animation: fadeIn .18s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal{
  width: min(700px, 100%);
  max-height: 88vh;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display:flex; flex-direction: column;
  animation: modalIn .24s cubic-bezier(.2,.9,.3,1.1);
  overflow: hidden;
}
.modal.wide{ width: min(900px, 100%); }
.modal.narrow{ width: min(460px, 100%); }
@keyframes modalIn{ from{ opacity:0; transform: translateY(14px) scale(.97);} to{ opacity:1; transform:none;} }
.modal-head{
  display:flex; align-items:center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,#fffdf7,#fbf6ea);
}
.modal-title{ font-family: var(--font-serif); font-size: 17px; letter-spacing:1.5px; }
.modal-close{
  border:none; background: transparent; color: var(--ink-3);
  font-size: 20px; line-height:1; padding: 4px 8px; border-radius: 8px;
}
.modal-close:hover{ background: var(--paper-3); color: var(--ink); }
.modal-body{ padding: 20px; overflow-y: auto; flex:1; }
.modal-foot{ padding: 14px 20px; border-top: 1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; background:#fdf9f0; }

/* 抽卡 */
.draw-info{ display:flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.draw-stat{
  flex:1; min-width: 120px;
  background: var(--paper-3); border-radius: var(--r-sm); padding: 10px 14px;
}
.draw-stat .ds-k{ font-size: 11px; color: var(--ink-3); }
.draw-stat .ds-v{ font-size: 15px; font-weight:800; color: var(--ink); margin-top: 2px; }
.draw-actions{ display:flex; gap: 10px; margin-bottom: 6px; }

.pull-grid{ display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; }
.pull-card{
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  text-align: center;
  background: #fffef9;
  transition:.18s;
  animation: cardIn .42s cubic-bezier(.2,.9,.3,1.2) backwards;
  position: relative;
  overflow: hidden;
}
@keyframes cardIn{ from{ opacity:0; transform: translateY(16px) scale(.9);} to{ opacity:1; transform:none;} }
.pull-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.pull-card .pc-avatar{ width: 92px; height: 92px; margin: 0 auto 6px; }
.pull-card .pc-avatar svg{ width:100%; height:100%; }
.pc-name{ font-family: var(--font-serif); font-size: 15px; letter-spacing:1px; }
.pc-from{ font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height:1.5; }
.pc-own{
  position:absolute; top:8px; right:8px;
  font-size: 10px; background: #ece9e1; color:#7b7263;
  padding: 1px 7px; border-radius: 999px;
}
.pc-btn{ margin-top: 8px; width:100%; }
.rarity-tag{ display:inline-block; font-size:10.5px; font-weight:800; padding: 1px 8px; border-radius:999px; margin-bottom: 4px; letter-spacing:1px; }
.pull-card.r-常{ border-color: #ddd6c8; }
.pull-card.r-灵{ border-color: #a9cabb; box-shadow: 0 0 0 3px rgba(76,127,107,.07); }
.pull-card.r-瑞{ border-color: #e0c88c; box-shadow: 0 0 0 3px rgba(184,137,47,.10); }
.pull-card.r-神{ border-color: #e2ab9c; box-shadow: 0 0 0 3px rgba(192,64,44,.12); }
.pull-card.r-神::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% -10%, rgba(255,214,120,.5), transparent 62%);
}
.dex-desc{ font-size: 12px; color: var(--ink-2); line-height: 1.9; font-family: var(--font-serif); }

/* 商店 */
.shop-tabs{ display:flex; gap:6px; padding:4px; background: var(--paper-3); border-radius:999px; margin-bottom:16px; }
.shop-tab{ flex:1; border:none; background:transparent; padding:8px; border-radius:999px; font-size:13px; font-weight:700; color: var(--ink-2); }
.shop-tab.active{ background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow-sm); }
.shop-list{ display:flex; flex-direction:column; gap: 8px; }
.shop-item{
  display:flex; align-items:center; gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  background: #fffef9;
  transition:.16s;
}
.shop-item:hover{ border-color: var(--line-2); background:#fffdf2; }
.si-main{ flex:1; min-width:0; }
.si-title{ font-size: 13.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.si-note{ font-size: 11.5px; color: var(--ink-3); margin-top:2px; }
.si-pts{ font-family: var(--font-serif); font-size: 17px; font-weight:800; min-width: 46px; text-align:right; }
.si-pts.add{ color: var(--jade); }
.si-pts.sub{ color: var(--red); }
.si-badge{ font-size: 9.5px; font-weight:800; padding: 1px 6px; border-radius: 999px; background: #ece9e1; color:#7b7263; }
.si-badge.custom{ background: var(--gold-soft); color:#8a6316; }
.shop-custom{
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.shop-custom-title{ font-size: 12.5px; font-weight:800; color: var(--ink-2); margin-bottom: 10px; letter-spacing:.5px; }
.form-row{ display:flex; gap: 10px; }
.form-row > *{ flex:1; }
.form-hint{ font-size: 11.5px; color: var(--ink-3); margin-top: 8px; line-height:1.7; }

/* 排行榜 */
.rank-list{ display:flex; flex-direction:column; gap:7px; }
.rank-row{
  display:grid; grid-template-columns: 34px 1fr 88px 62px 60px;
  align-items:center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: #fffef9;
  border: 1px solid var(--line);
  font-size: 13px;
}
.rank-row.me{ border-color: var(--gold); background: #fffcf0; box-shadow: 0 0 0 3px rgba(184,137,47,.10); }
.rank-no{
  width: 26px; height: 26px; border-radius: 8px; display:grid; place-items:center;
  font-weight:800; font-size:12px; background: var(--paper-3); color: var(--ink-2);
}
.rank-no.top1{ background: linear-gradient(180deg,#f6dfa4,#e2b955); color:#5a4008; }
.rank-no.top2{ background: linear-gradient(180deg,#e6e6e6,#c9c9c9); color:#4a4a4a; }
.rank-no.top3{ background: linear-gradient(180deg,#f0d3b4,#d9a878); color:#5c3a1c; }
.rank-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-pet{ font-size: 11.5px; color: var(--ink-3); font-weight:400; }
.rank-lv{ font-size: 12px; color: var(--ink-2); text-align:center; }
.rank-lv b{ color: var(--gold); font-size: 14px; font-family: var(--font-serif); }
.rank-pts{ font-size: 13px; font-weight:800; color: var(--red); text-align:right; font-variant-numeric: tabular-nums; }
.rank-state{ font-size: 11px; text-align:right; color: var(--ink-3); }
.rank-head{ display:grid; grid-template-columns: 34px 1fr 88px 62px 60px; gap:10px; padding: 0 14px 8px; font-size: 11px; color: var(--ink-3); letter-spacing:1px; }

/* 图鉴 */
.dex-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 10px; }
.dex-cell{
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px; text-align:center; background:#fffef9;
}
.dex-cell .pc-avatar{ width: 74px; height: 74px; margin: 0 auto 4px; }
.dex-cell .pc-avatar svg{ width:100%; height:100%; }
.dex-cell.locked{ background: #f4f1e9; }
.dex-cell.locked .pc-avatar{ filter: grayscale(1) opacity(.22); }
.dex-cell.locked .pc-name{ color: var(--ink-3); }
.dex-count{ font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* 家长后台 */
.pd-tabs{ display:flex; gap:6px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.pd-tab{
  border:none; background:transparent; padding: 9px 16px;
  font-size: 13px; font-weight:700; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pd-tab.active{ color: var(--red); border-bottom-color: var(--red); }
.pend-item{
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; margin-bottom: 9px; background:#fffef9;
}
.pend-head{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.pend-who{ font-weight:700; font-size: 13.5px; }
.pend-pts{ font-family: var(--font-serif); font-size: 16px; font-weight:800; }
.pend-pts.add{ color: var(--jade); } .pend-pts.sub{ color: var(--red); }
.pend-reason{ font-size:12.5px; color: var(--ink-2); margin: 6px 0 4px; line-height:1.7; }
.pend-time{ font-size: 11px; color: var(--ink-3); }
.pend-btns{ display:flex; gap: 8px; margin-top: 10px; }
.empty-tip{ text-align:center; color: var(--ink-3); font-size: 13px; padding: 30px 0; line-height:2; }

.table{ width:100%; border-collapse: collapse; font-size: 12.5px; }
.table th{
  text-align:left; font-size: 11px; color: var(--ink-3); letter-spacing:1px;
  padding: 8px 6px; border-bottom: 1px solid var(--line); font-weight: 700;
  white-space: nowrap;
}
.table td{ padding: 9px 6px; border-bottom: 1px solid #f0eadd; vertical-align: middle; }
.table tr:last-child td{ border-bottom: none; }
.table .num{ font-variant-numeric: tabular-nums; font-weight:700; }
.table .ops{ display:flex; gap: 5px; flex-wrap: wrap; }

/* 档案 */
.pf-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; }
.pf-item{ background: var(--paper-3); border-radius: var(--r-sm); padding: 12px; }
.pf-k{ font-size: 11px; color: var(--ink-3); letter-spacing:.5px; }
.pf-v{ font-family: var(--font-serif); font-size: 19px; font-weight:800; margin-top: 3px; }
.pf-v small{ font-size: 11px; font-weight:500; color: var(--ink-3); margin-left: 3px; font-family: var(--font-sans); }

/* Toast */
.toast-root{
  position: fixed; right: 24px; bottom: 24px;
  z-index: 300; display:flex; flex-direction: column; gap: 8px; align-items:flex-end;
  pointer-events: none;
}
.toast{
  background: rgba(44,36,24,.92); color: #fdf7e9;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13px; letter-spacing:.5px;
  box-shadow: var(--shadow);
  animation: toastIn .24s ease, toastOut .3s ease 2.1s forwards;
  max-width: 80vw;
}
.toast.ok{ background: rgba(58,104,86,.94); }
.toast.err{ background: rgba(160,52,36,.94); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(12px) scale(.95);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform: translateY(-8px);} }

/* 横幅告警 */
.banner{
  display:flex; align-items:center; gap:10px;
  padding: 9px 16px; border-radius: var(--r-sm);
  font-size: 12.5px; margin-bottom: 12px;
  border: 1px solid #edc9a5; background: #fdf1e0; color: #8a4a17;
}
.banner.danger{ border-color:#e9b8ae; background: #fbe8e4; color:#96290f; font-weight:700; }
.banner.calm{ border-color:#c9dcd2; background: var(--jade-soft); color:#2f6150; }

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width: 1080px){
  .game-main{ grid-template-columns: 1fr; overflow-y: auto; }
  .side{ flex-direction: row; flex-wrap: wrap; }
  .side > .card{ flex: 1 1 260px; }
  .stage{ min-height: 380px; }
}
@media (max-width: 860px){
  body{ overflow: auto; }
  .screen-login{ grid-template-columns: 1fr; height: 100%; }
  .login-art{ display:none; }
  .login-panel{ padding: 28px 20px; }
  .login-mini-brand{ display:flex; }
  .login-body{ flex: 0 1 auto; }

  .screen-game{ display: block; height: auto; min-height: 100%; }
  .topbar{ position: sticky; top: 0; padding: 10px 12px; gap: 8px; row-gap: 8px; }
  .brand{ order: 1; }
  .hud{ order: 2; flex: 1 1 auto; justify-content: flex-end; gap: 6px; }
  .hud-item{ padding: 4px 10px; font-size: 11px; }
  .hud-item b{ font-size: 14px; }
  .topnav{ order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .topnav::-webkit-scrollbar{ display:none; }
  .nav-btn{ flex-shrink: 0; padding: 7px 12px; font-size: 12.5px; }

  .game-main{ display: block; padding: 12px 12px 64px; overflow: visible; }
  .stage-card{ gap: 10px; }
  .stage{ height: 54vh; min-height: 320px; }
  .side{ display: block; margin-top: 12px; }
  .side > .card{ margin-bottom: 10px; }
  .action-bar{ flex-wrap: wrap; }
  .act-btn{ flex: 1 1 46%; }
  .logbar{ position: sticky; bottom: 0; background: rgba(255,253,247,.94); }
  .rank-row, .rank-head{ grid-template-columns: 30px 1fr 56px 56px; }
  .rank-state{ display:none; }
}
@media (max-width: 480px){
  .stage-nameplate{ font-size: 11px; padding: 5px 10px; gap: 6px; }
  .stage-nameplate .np-from{ display: none; }
  .brand-name{ font-size: 14px; }
  .brand-sub{ font-size: 10px; }
}

/* ============================== 新手引导 ============================== */
.ob-root{ position:fixed; inset:0; z-index: 300; }
.ob-root.hidden{ display:none; }
.ob-mask{
  position:absolute; inset:0; background: rgba(46,38,25,.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
}
.ob-card{
  width:min(440px, 94vw); background: var(--paper-2);
  border:1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(46,38,25,.35);
  padding: 22px 26px 24px; text-align:center;
  animation: ob-pop .28s cubic-bezier(.2,1.4,.4,1);
}
@keyframes ob-pop{ from{ transform: scale(.9) translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.ob-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.ob-seal{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background: var(--red); color:#fff8ee; border-radius:7px;
  font-family: var(--font-serif); font-size:15px; font-weight:700; line-height:1;
}
.ob-count{ font-size:12px; color: var(--ink-3); letter-spacing:1px; }
.ob-mark{
  width:72px; height:72px; margin: 6px auto 14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--red-soft); color: var(--red);
  border: 2px solid var(--red); border-radius: 16px;
  font-family: var(--font-serif); font-size: 34px; font-weight:700;
  box-shadow: 0 6px 18px rgba(192,64,44,.18);
}
.ob-title{ font-family: var(--font-serif); font-size: 20px; margin: 0 0 10px; color: var(--ink); letter-spacing:1px; }
.ob-body{ font-size: 13.5px; line-height: 1.9; color: var(--ink-2); margin: 0 0 16px; text-align:left; }
.ob-body b{ color: var(--red); }
.ob-warn{ color: var(--red); font-weight:600; }
.ob-dots{ display:flex; gap:7px; justify-content:center; margin-bottom: 16px; }
.ob-dots i{ width:8px; height:8px; border-radius:50%; background: var(--paper-3); border:1px solid var(--line-2); transition: all .2s; }
.ob-dots i.on{ background: var(--red); border-color: var(--red); transform: scale(1.25); }
.ob-dots i.done{ background: var(--line-2); }
.ob-btns{ display:flex; gap:10px; }
@media (max-width: 480px){
  .ob-card{ padding: 18px 18px 20px; }
  .ob-mark{ width:60px; height:60px; font-size:28px; }
  .ob-body{ font-size: 12.5px; }
}