/* rpx → px: 1rpx ≈ (100vw / 750) */
:root{
  --rpx: calc(100vw / 750);
}
*{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  -webkit-user-select:none; user-select:none;
}
img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }

.container{
  min-height:100vh;
  height:100vh;
  padding:calc(16 * var(--rpx));
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
.container.light{ background:#f7f8fa; color:#222; }
.container.dark{ background:#15202b; color:#eee; }

/* 工具栏 */
.toolbar{ display:flex; gap:calc(16 * var(--rpx)); margin-bottom:calc(16 * var(--rpx)); flex-wrap:wrap; flex-shrink:0; }
.tool-btn{
  padding:calc(10 * var(--rpx)) calc(22 * var(--rpx));
  border-radius:calc(12 * var(--rpx));
  border:1px solid #888;
  font-size:calc(26 * var(--rpx));
  cursor:pointer;
}
.tool-btn:active{ opacity:0.6; }
.end-btn{ color:#e64340; border-color:#e64340; }

/* 主体：垂直平铺占满剩余空间 */
.main-area{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:calc(16 * var(--rpx));
  min-height:0;
  position:relative;
}

/* 日夜切换浮钮 */
.day-toggle{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:calc(110 * var(--rpx));
  height:calc(110 * var(--rpx));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.9);
  box-shadow:0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.35);
  z-index:5;
  transition: box-shadow 0.3s ease;
  cursor:pointer;
}
.dark .day-toggle{ background:rgba(30,42,60,0.95); }
.day-toggle:active{ transform:translate(-50%,-50%) scale(0.92); }
.day-icon{ width:calc(70 * var(--rpx)); height:calc(70 * var(--rpx)); transition: transform 0.6s ease; }

.day-toggle.anim .day-icon{ animation: dayIconFlip 0.6s ease; }
.day-toggle.anim{ animation: dayGlow 0.6s ease; }
@keyframes dayIconFlip{
  0%   { transform:rotate(0deg) scale(1); }
  50%  { transform:rotate(180deg) scale(0.4); opacity:0.3; }
  100% { transform:rotate(360deg) scale(1); }
}
@keyframes dayGlow{
  0%,100%{ box-shadow:0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.35); }
  50%    { box-shadow:0 0 calc(60 * var(--rpx)) calc(20 * var(--rpx)) rgba(255,220,120,0.7); }
}
.night .day-toggle.anim{ animation: nightGlow 0.6s ease; }
@keyframes nightGlow{
  0%,100%{ box-shadow:0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.35); }
  50%    { box-shadow:0 0 calc(60 * var(--rpx)) calc(20 * var(--rpx)) rgba(120,160,255,0.7); }
}

/* 全屏一次性光过渡 */
.container.day-anim::before{
  content:''; position:fixed; inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,0.5), transparent 70%);
  pointer-events:none; z-index:998;
  animation: screenFlash 0.6s ease-out;
}
.container.night.day-anim::before{
  background:radial-gradient(circle at center, rgba(60,80,140,0.55), transparent 70%);
}
@keyframes screenFlash{
  0%{ opacity:0; } 40%{ opacity:1; } 100%{ opacity:0; }
}

/* 入夜蒙层 */
.container.night::after{
  content:''; position:fixed; inset:0;
  background:rgba(0,10,30,0.28);
  pointer-events:none; z-index:2;
}

/* 行容器 */
.res-row, .hp-row{
  width:88vw;
  margin:0 auto;
  display:flex;
  align-items:center;
  border-radius:calc(20 * var(--rpx));
  box-sizing:border-box;
}
.res-row{ flex:1; }
.hp-row{ flex:2; }

/* 红方翻转 */
.res-row.red-row,
.hp-row.red-row{ transform: rotate(180deg); }

/* 红蓝色调 */
.light .red-row{ background:#ffbcbc; }
.dark .red-row{ background:#422727; }
.light .blue-row{ background:#a9d1ff; }
.dark .blue-row{ background:#223b54; }

/* 资源行左 50% */
.res-row .res-left{ width:50%; height:100%; display:flex; align-items:stretch; }
.res-row .res-sel{
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:calc(8 * var(--rpx));
  border-radius:calc(12 * var(--rpx));
  margin:calc(6 * var(--rpx));
  opacity:0.5;
  border:2px solid transparent;
  transition: all 0.15s ease;
  cursor:pointer;
}
.res-row .res-sel.active{
  opacity:1;
  border-color:rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.08);
}
.light .res-row .res-sel.active{
  border-color:rgba(0,0,0,0.35);
  background:rgba(0,0,0,0.05);
}
.res-row .res-sel:active{ opacity:0.7; }
.res-row .res-icon{ width:calc(56 * var(--rpx)); height:calc(56 * var(--rpx)); }
.res-row .res-num{ font-size:calc(64 * var(--rpx)); font-weight:bold; }
.res-row .res-btn{
  width:25%; height:100%;
  text-align:center;
  font-size:calc(80 * var(--rpx));
  font-weight:bold; line-height:1;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  cursor:pointer;
}
.res-row .res-btn::before{
  content:''; position:absolute;
  top:50%; left:0; transform:translateY(-50%);
  width:1px; height:50%;
  background:rgba(128,128,128,0.3);
}
.res-row .res-btn:active{ opacity:0.4; }

/* 血量行 */
.hp-row{ position:relative; overflow:hidden; }
.hp-row .hp-half{
  width:50%; height:100%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.hp-row .hp-half:active{ background:rgba(255,255,255,0.08); }
.hp-row .hp-symbol{
  font-size:calc(110 * var(--rpx));
  font-weight:bold; line-height:1;
  opacity:0.6;
}
.hp-row .hp-half-sub .hp-symbol{ margin-right:calc(120 * var(--rpx)); }
.hp-row .hp-half-add .hp-symbol{ margin-left:calc(120 * var(--rpx)); }
.hp-row .hp-center-overlay{
  position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hp-row .hp-icon{
  width:calc(80 * var(--rpx));
  height:calc(80 * var(--rpx));
  margin-right:calc(20 * var(--rpx));
}
.hp-row .hp-value{
  min-width:calc(140 * var(--rpx));
  text-align:center;
  font-size:calc(110 * var(--rpx));
  font-weight:bold;
}

/* 弹窗 */
.modal-mask{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  z-index:999;
}
.modal-mask[hidden]{ display:none; }
.modal-content{
  width:85vw; max-height:75vh;
  border-radius:calc(20 * var(--rpx));
  padding:calc(32 * var(--rpx));
  box-sizing:border-box;
  display:flex; flex-direction:column;
}
.light .modal-content{ background:#fff; }
.dark .modal-content{ background:#202c3c; color:#fff; }
.modal-title{
  text-align:center;
  font-size:calc(36 * var(--rpx));
  font-weight:bold;
  margin-bottom:calc(20 * var(--rpx));
}

.record-scroll{
  max-height:50vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.record-item{
  padding:calc(16 * var(--rpx)) 0;
  border-bottom:1px solid #8884;
}
.rec-time{ font-size:calc(24 * var(--rpx)); opacity:0.7; margin-right:calc(20 * var(--rpx)); }
.rec-desc{ font-size:calc(28 * var(--rpx)); }
.empty-tip{ text-align:center; opacity:0.5; padding:calc(40 * var(--rpx)) 0; }

.modal-btn{
  margin-top:calc(20 * var(--rpx));
  padding:calc(16 * var(--rpx));
  border-radius:calc(10 * var(--rpx));
  border:0;
  font-size:calc(30 * var(--rpx));
  cursor:pointer;
  background:#f0f0f0;
  color:#222;
}
.modal-btn.primary{ background:#3377ff; color:#fff; }
.dark .modal-btn{ background:#3a4a63; color:#eee; }
.dark .modal-btn.primary{ background:#3377ff; color:#fff; }
.modal-btn:active{ opacity:0.75; }

/* 骰子 */
.dice-modal{ text-align:center; }
.dice-select{
  display:flex; justify-content:center;
  gap:calc(30 * var(--rpx));
  margin:calc(30 * var(--rpx)) 0;
}
.dice-select span{
  padding:calc(12 * var(--rpx)) calc(24 * var(--rpx));
  border:1px solid #777;
  border-radius:calc(10 * var(--rpx));
  cursor:pointer;
}
.dice-select span.active{ background:#3377ff; color:#fff; border-color:#3377ff; }
.dice-box{
  width:calc(240 * var(--rpx));
  height:calc(240 * var(--rpx));
  margin:calc(30 * var(--rpx)) auto;
  border-radius:calc(24 * var(--rpx));
  display:flex; align-items:center; justify-content:center;
}
.light .dice-box{ background:#eef2ff; }
.dark .dice-box{ background:#2c4266; }
.dice-num{ font-size:calc(140 * var(--rpx)); font-weight:bold; }
@keyframes diceShake{
  0%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(0.9) rotate(180deg); opacity:0.5; }
  100%{ transform:scale(1) rotate(360deg); }
}
.dice-box.rolling{ animation:diceShake 0.35s ease-out; }