/* PdPR 游戏共用样式：方块世界风 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  color: #2b2118; background: #bfe6ff; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen.on { display: flex; }
.bg { position: fixed; inset: 0; background-size: cover; background-position: center; z-index: -1; }

.btn {
  font: inherit; font-weight: 900; font-size: 24px; color: #fff; cursor: pointer;
  background: #43a047; border: 0; border-radius: 8px; padding: 14px 30px;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.25), 0 4px 0 #1b5e20, 0 8px 18px rgba(0,0,0,.25);
  text-shadow: 0 2px 0 rgba(0,0,0,.3); transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 1px 0 #1b5e20; }
.btn.orange { background: #fb8c00; box-shadow: inset 0 -6px 0 rgba(0,0,0,.25), 0 4px 0 #a65b00, 0 8px 18px rgba(0,0,0,.25); }
.btn.blue { background: #1e88e5; box-shadow: inset 0 -6px 0 rgba(0,0,0,.25), 0 4px 0 #0d47a1, 0 8px 18px rgba(0,0,0,.25); }
.btn.small { font-size: 18px; padding: 10px 18px; }
.btn[disabled] { filter: grayscale(.7); opacity: .7; }

.title-big {
  font-size: clamp(34px, 9vw, 64px); font-weight: 900; color: #fff; letter-spacing: 2px; text-align: center;
  text-shadow: 0 4px 0 #6d3d14, 3px 3px 0 #6d3d14, -3px 3px 0 #6d3d14, 3px -1px 0 #6d3d14, -3px -1px 0 #6d3d14, 0 10px 20px rgba(0,0,0,.35);
}
.panel {
  background: rgba(255, 250, 235, .94); border: 4px solid #7a4a1e; border-radius: 10px;
  box-shadow: inset 0 -5px 0 rgba(122,74,30,.25), 0 8px 20px rgba(0,0,0,.25);
}
.topbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(61, 40, 20, .82); color: #fff; font-weight: 800; font-size: 17px;
}
.topbar .pill { background: rgba(255,255,255,.16); border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
.topbar .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { height: 10px; background: rgba(0,0,0,.25); }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ff9f43); transition: width .4s; }

input.field {
  font: inherit; font-size: 22px; padding: 12px 14px; width: 100%; border: 3px solid #7a4a1e; border-radius: 8px;
  background: #fff; outline: none; user-select: text; -webkit-user-select: text;
}
input.field:focus { border-color: #fb8c00; }
label.lab { font-weight: 800; font-size: 18px; display: block; margin: 12px 0 6px; }

.confetti { position: fixed; top: -20px; width: 12px; height: 12px; z-index: 99; animation: fall linear forwards; pointer-events: none; }
@keyframes fall { to { top: 105vh; transform: rotate(720deg) translateX(40px); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-12px); } 40%,80% { transform: translateX(12px); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.shake { animation: shake .45s; }
.pop { animation: pop .35s ease-out; }
.stars { font-size: 44px; letter-spacing: 6px; }
.toast {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 50; pointer-events: none;
  font-size: 30px; font-weight: 900; color: #fff; padding: 10px 22px; border-radius: 10px; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.35); animation: pop .3s ease-out;
}
.toast.good { background: #43a047; } .toast.bad { background: #e53935; }