* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fdcf5; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; color: #2c2c3c; user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --ink: #2c2c3c; --gold: #ffcf3f; --gold-d: #d99a1e; }

/* ---------- 顶部 ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s; }
body.in-pav #hud, body.in-pav #enterBtn { opacity: 0; pointer-events: none !important; }
body.in-pav #hud * { pointer-events: none !important; }
.topbar { position: absolute; top: calc(10px + var(--sat)); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; }
.me { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); border: 3px solid var(--ink); border-radius: 14px; padding: 5px 12px 5px 5px; box-shadow: 0 4px 0 rgba(0,0,0,.18); pointer-events: auto; }
.avatar { position: relative; width: 40px; height: 40px; background: #f6d2b0; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.avatar .hair { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: #5a3a22; }
.avatar .eye { position: absolute; top: 18px; width: 5px; height: 7px; background: #222; }
.avatar .eye.l { left: 10px; } .avatar .eye.r { right: 10px; }
.nick { font-weight: 900; font-size: 15px; line-height: 1.2; max-width: 9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #6a5a3a; margin-top: 2px; }
.lv-badge { background: var(--gold); border: 2px solid var(--ink); border-radius: 6px; padding: 0 5px; font-size: 11px; font-weight: 900; color: var(--ink); }
.lv-bar { width: 46px; height: 7px; border: 2px solid var(--ink); border-radius: 4px; background: #eee; overflow: hidden; }
.lv-bar i { display: block; height: 100%; width: 16%; background: linear-gradient(90deg, #ffd75e, #ff9a3c); transition: width .4s; }
.lv.max .lv-badge { background: linear-gradient(135deg, #ffe27a, #ff9a3c); }

.chip-btn { pointer-events: auto; border: 3px solid var(--ink); background: #fff; border-radius: 12px; font-weight: 900; font-size: 13px; padding: 8px 10px; box-shadow: 0 4px 0 rgba(0,0,0,.18); color: var(--ink); font-family: inherit; }
.chip-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }

/* ---------- 跑马灯 ---------- */
#marquee { position: absolute; top: calc(70px + var(--sat)); left: 10px; right: 10px; height: 32px; display: flex; align-items: center; background: rgba(44,44,60,.78); border-radius: 16px; overflow: hidden; border: 2px solid rgba(255,255,255,.5); }
.mq-icon { flex: none; height: 100%; display: flex; align-items: center; padding: 0 10px; background: var(--gold); color: var(--ink); font-weight: 900; font-size: 12px; border-radius: 14px 0 0 14px; }
.mq-track { position: relative; flex: 1; height: 100%; overflow: hidden; }
.mq-text { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; color: #fff; font-size: 13px; font-weight: 700; will-change: transform; }
.mq-text b { color: #ffd75e; }

/* ---------- 荣誉台卡片 ---------- */
#honorCard { position: absolute; top: calc(110px + var(--sat)); right: 10px; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #fff6d6, #ffe08a); border: 3px solid var(--ink); border-radius: 14px; padding: 5px 10px 5px 6px; box-shadow: 0 4px 0 rgba(0,0,0,.18); pointer-events: auto; max-width: 62%; }
#honorCard.self { background: linear-gradient(135deg, #ffe27a, #ff9a3c); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.04); } }
.trophy { width: 26px; height: 26px; flex: none; background:
  linear-gradient(#d99a1e,#d99a1e) 50% 100%/14px 4px no-repeat,
  linear-gradient(#f2b630,#f2b630) 50% 82%/4px 6px no-repeat,
  linear-gradient(#ffcf3f,#ffcf3f) 50% 10%/16px 12px no-repeat,
  linear-gradient(#ffcf3f,#ffcf3f) 15% 20%/4px 7px no-repeat,
  linear-gradient(#ffcf3f,#ffcf3f) 85% 20%/4px 7px no-repeat; }
.hc-title { font-size: 11px; font-weight: 800; color: #8a5a00; }
.hc-name { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-timer { font-size: 12px; font-weight: 900; background: var(--ink); color: #ffd75e; border-radius: 8px; padding: 2px 6px; }
.hc-timer:empty { display: none; }

/* ---------- 摇杆 ---------- */
#joy { position: absolute; left: 0; bottom: 0; width: 55%; height: 38%; pointer-events: auto; touch-action: none; }
.joy-base { position: absolute; left: calc(26px); bottom: calc(30px + var(--sab)); width: 124px; height: 124px; border-radius: 50%; background: rgba(255,255,255,.28); border: 3px solid rgba(255,255,255,.75); box-shadow: 0 0 0 3px rgba(44,44,60,.25) inset; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 16px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
#joy.active .joy-base { background: rgba(255,255,255,.4); }

#hint { position: absolute; left: 50%; bottom: calc(176px + var(--sab)); transform: translateX(-50%); background: rgba(44,44,60,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 12px; white-space: nowrap; transition: opacity .6s; }
#hint.hide { opacity: 0; }

/* ---------- 进馆按钮 ---------- */
#enterBtn { position: absolute; right: 16px; bottom: calc(46px + var(--sab)); display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 3px solid var(--ink); border-radius: 16px; background: var(--gold); box-shadow: 0 5px 0 var(--gold-d), 0 8px 14px rgba(0,0,0,.2); font-family: inherit; font-size: 16px; font-weight: 900; color: var(--ink); transform: scale(0); transform-origin: 80% 100%; transition: transform .22s cubic-bezier(.3,1.6,.5,1); pointer-events: none; max-width: 60%; }
#enterBtn.show { transform: scale(1); pointer-events: auto; }
#enterBtn:active { transform: scale(.96) translateY(3px); box-shadow: 0 2px 0 var(--gold-d); }
#enterBtn img { width: 52px; height: 52px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; object-fit: cover; }
#enterText { text-align: left; line-height: 1.25; }
#enterText small { display: block; font-size: 11px; font-weight: 700; color: #6a4a00; }

/* ---------- 提示 ---------- */
#toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.8); background: rgba(44,44,60,.88); color: #fff; font-weight: 800; font-size: 14px; padding: 10px 16px; border-radius: 14px; opacity: 0; transition: all .25s; pointer-events: none; text-align: center; max-width: 82%; }
#toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- 弹窗 ---------- */
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(30,40,60,.45); opacity: 0; pointer-events: none; transition: opacity .25s; padding: 20px; z-index: 20; }
.modal.show { opacity: 1; pointer-events: auto; }
.card { width: 100%; max-width: 360px; background: #fff; border: 4px solid var(--ink); border-radius: 22px; padding: 20px 18px; box-shadow: 0 8px 0 rgba(0,0,0,.2); text-align: center; transform: translateY(20px) scale(.95); transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.modal.show .card { transform: none; }
.card h2 { margin: 6px 0 6px; font-size: 20px; font-weight: 900; }
.card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 900; }
.card h3 small { display: block; font-size: 11px; color: #888; font-weight: 600; margin-top: 2px; }
.card p { margin: 6px 0 14px; font-size: 14px; line-height: 1.6; }
.muted { color: #777; font-size: 13px !important; }
.start-img { width: 170px; height: 170px; object-fit: contain; border-radius: 16px; }
.nick-row { display: flex; gap: 8px; margin: 10px 0 14px; }
.nick-row input { flex: 1; min-width: 0; border: 3px solid var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 800; font-family: inherit; outline: none; user-select: text; -webkit-user-select: text; }
.nick-row.small { margin: 0; flex: 1; max-width: 62%; }
.nick-row.small input { padding: 6px 8px; font-size: 14px; }
.btn { border: 3px solid var(--ink); border-radius: 14px; background: #fff; font-family: inherit; font-weight: 900; font-size: 14px; padding: 9px 14px; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.2); cursor: pointer; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.btn.primary { background: var(--gold); box-shadow: 0 4px 0 var(--gold-d); }
.btn.ghost { background: #f1f3f6; }
.btn.big { width: 100%; font-size: 17px; padding: 12px; margin-top: 6px; }
.cele-card { background: linear-gradient(180deg, #fff8dc, #fff); }
.cele-crown { width: 84px; height: 60px; margin: -6px auto 4px; background:
  linear-gradient(#e8453c,#e8453c) 50% 62%/12px 12px no-repeat,
  linear-gradient(#ffcf3f,#ffcf3f) 50% 100%/84px 26px no-repeat,
  linear-gradient(#ffcf3f,#ffcf3f) 0 0/16px 40px no-repeat,
  linear-gradient(#ffcf3f,#ffcf3f) 50% 0/16px 40px no-repeat,
  linear-gradient(#ffcf3f,#ffcf3f) 100% 0/16px 40px no-repeat; animation: bob 1.2s infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.cele-card .btn.ghost { margin-top: 10px; width: 100%; }

.test-card { text-align: left; }
.test-card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; font-size: 14px; font-weight: 700; }
.test-card .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.test-card .btns .btn { flex: 1 1 40%; }
.seg { display: flex; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; }
.seg button { border: 0; background: #fff; font-family: inherit; font-weight: 800; font-size: 12px; padding: 7px 8px; color: var(--ink); }
.seg button + button { border-left: 2px solid var(--ink); }
.seg button.on { background: var(--gold); }

/* ---------- 展馆页 ---------- */
.page { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(20px + var(--sat)) 24px calc(24px + var(--sab)); background: linear-gradient(180deg, #bfe9fb, #fff6dc); transform: translateY(100%); transition: transform .38s cubic-bezier(.3,1.2,.5,1); }
.page.show { transform: none; }
.pav-head { font-size: 26px; font-weight: 900; color: #fff; padding: 8px 22px; border-radius: 16px; border: 4px solid var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.2); background: #e8505b; }
#pavImg { width: min(78vw, 360px); height: min(78vw, 360px); object-fit: contain; margin: 18px 0 8px; border-radius: 24px; background: #fff; border: 4px solid var(--ink); }
.pav-desc { font-size: 15px; font-weight: 800; color: #6a5a3a; }
.pav-soon { margin: 14px 0 20px; font-size: 14px; font-weight: 700; color: #888; background: rgba(255,255,255,.7); padding: 8px 14px; border-radius: 12px; border: 2px dashed #bbb; }
.page .btn.big { max-width: 320px; }

/* ---------- 加载 ---------- */
#loading { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #9fdcf5; transition: opacity .5s; }
#loading.hide { opacity: 0; pointer-events: none; }
.ld-box { font-weight: 900; color: var(--ink); font-size: 16px; text-align: center; }
.ld-cubes { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.ld-cubes i { width: 18px; height: 18px; background: var(--gold); border: 3px solid var(--ink); border-radius: 4px; animation: hop .9s infinite; }
.ld-cubes i:nth-child(2) { animation-delay: .15s; background: #7fd0f0; }
.ld-cubes i:nth-child(3) { animation-delay: .3s; background: #8fcf55; }
@keyframes hop { 30% { transform: translateY(-10px); } 60% { transform: none; } }