* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #0B0A12; color: #F2E6C8; font-family: "Noto Sans SC","Microsoft YaHei",sans-serif; overflow: hidden; user-select: none; touch-action: none; }
#stage { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1A1228 0%, #0B0A12 70%); }
#game { width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); background: #0B0A12; display: block; box-shadow: 0 0 80px rgba(194,59,46,0.25); }
.hidden { display: none !important; }
#hud { position: absolute; top: 10px; right: 14px; z-index: 20; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; background: rgba(8,6,12,0.55); border: 1px solid rgba(232,213,163,0.2); color: #E8D5A3; font-size: 16px; cursor: pointer; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 30; background: rgba(11,10,18,0.72); backdrop-filter: blur(6px); }
.title-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: saturate(1.15) brightness(0.5) contrast(1.08); transform: scale(1.05); animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.12) translate3d(-1.5%,-1%,0); } }
.title-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(194,59,46,0.18), transparent 55%), linear-gradient(180deg, rgba(11,10,18,0.2), rgba(11,10,18,0.85)); }
.title-card { position: relative; z-index: 2; text-align: center; padding: 36px 40px 28px; max-width: 620px; border-radius: 22px; background: linear-gradient(165deg, rgba(26,18,40,0.42), rgba(11,10,18,0.55)); border: 1px solid rgba(232,213,163,0.18); box-shadow: 0 30px 90px rgba(0,0,0,0.45); }
.title-kicker { font-size: 12px; letter-spacing: 4px; color: #E8D5A3; opacity: 0.85; margin-bottom: 10px; }
.game-title { font-family: "Cinzel","Noto Serif SC","Microsoft YaHei",serif; font-size: clamp(56px,11vw,96px); font-weight: 700; letter-spacing: 16px; background: linear-gradient(180deg,#FFF8E8 0%,#E8D5A3 35%,#B8862D 55%,#F2E0A8 72%,#8A5A18 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(90,50,10,0.85)) drop-shadow(0 10px 36px rgba(232,213,163,0.45)); line-height: 1.05; }
.game-sub { margin: 12px 0 16px; font-size: 15px; color: #d8c9a8; letter-spacing: 2px; }
.title-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.title-tags span { padding: 5px 12px; border-radius: 999px; font-size: 12px; background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.25); color: #E8D5A3; }
.title-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.btn-gold { padding: 14px 32px; border: none; border-radius: 14px; background: linear-gradient(135deg,#E8D5A3,#C9A24D); color: #1A1228; font-size: 16px; font-weight: 700; letter-spacing: 2px; cursor: pointer; box-shadow: 0 8px 28px rgba(232,213,163,0.35); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-ghost { padding: 14px 28px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(232,213,163,0.3); color: #E8D5A3; font-size: 15px; cursor: pointer; }
.diff-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.diff-label { font-size: 12px; color: #a8b3c7; margin-right: 4px; }
.diff-btn { padding: 6px 14px; border-radius: 999px; background: transparent; border: 1px solid rgba(232,213,163,0.25); color: #a8b3c7; font-size: 12px; cursor: pointer; }
.diff-btn.is-on { background: rgba(232,213,163,0.18); border-color: #E8D5A3; color: #F2E6C8; }
.panel { position: relative; z-index: 2; width: min(420px,90vw); padding: 32px 28px; border-radius: 20px; background: rgba(26,18,40,0.92); border: 1px solid rgba(232,213,163,0.22); box-shadow: 0 24px 80px rgba(0,0,0,0.55); text-align: center; }
.panel h2 { font-family: "Cinzel","Noto Serif SC",serif; font-size: 28px; letter-spacing: 4px; color: #E8D5A3; margin-bottom: 18px; }
.panel h2.danger { color: #ff8a7a; }
.panel h2.gold { color: #FFD76A; }
.how-list { list-style: none; text-align: left; margin: 0 0 16px; }
.how-list li { padding: 8px 0; border-bottom: 1px solid rgba(232,213,163,0.1); font-size: 14px; color: #d8c9a8; }
.how-list b { color: #E8D5A3; margin-right: 8px; }
.how-note { font-size: 12px; color: #a8b3c7; line-height: 1.6; margin-bottom: 10px; }
.pause-actions { display: flex; flex-direction: column; gap: 10px; }
.clear-stats { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 20px; }
.stat-row { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.05); font-size: 13px; color: #a8b3c7; }
.stat-row b { color: #F2E6C8; font-family: Consolas, monospace; }
.win-text { font-size: 14px; color: #d8c9a8; margin-bottom: 12px; line-height: 1.7; }
.touch-ui { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.t-left { position: absolute; left: 20px; bottom: 24px; pointer-events: auto; }
.t-stick { width: 120px; height: 120px; border-radius: 50%; background: rgba(232,213,163,0.1); border: 2px solid rgba(232,213,163,0.28); position: relative; }
.t-knob { width: 48px; height: 48px; border-radius: 50%; background: rgba(232,213,163,0.45); position: absolute; left: 36px; top: 36px; }
.t-right { position: absolute; right: 18px; bottom: 24px; display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; }
.t-btn { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(232,213,163,0.35); background: rgba(26,18,40,0.72); color: #E8D5A3; font-size: 16px; font-weight: 700; cursor: pointer; }
.t-jump { width: 72px; height: 72px; background: rgba(94,200,232,0.25); }
.t-atk { background: rgba(194,59,46,0.35); }

.t-btn:active { transform: scale(0.92); filter: brightness(1.3); }
.title-fx { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.35; mix-blend-mode:screen; pointer-events:none; }

.title-emblem { width: 88px; height: 88px; margin: 0 auto 8px; filter: drop-shadow(0 8px 24px rgba(232,213,163,0.4)); }

.panel { position: relative; overflow: hidden; }
.panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 56px;
  background: url(../assets/ui-banner.jpg) center/cover;
  opacity: 0.35; pointer-events: none;
}