* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #140d09; }
body {
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
color: #f6e7d3;
-webkit-tap-highlight-color: transparent;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }
[hidden] { display: none !important; }
/* 加载层 */
.loading {
position: fixed; inset: 0; z-index: 20;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 40%, #3a2417, #140d09 70%);
transition: opacity .9s ease, visibility .9s;
}
.loading.done { opacity: 0; visibility: hidden; }
.loading-cup { font-size: 56px; animation: bob 1.6s ease-in-out infinite; }
.loading p { letter-spacing: .3em; color: #d9b98f; font-size: 14px; }
@keyframes bob { 50% { transform: translateY(-10px); } }
/* HUD */
.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud > * { pointer-events: auto; }
.brand { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; pointer-events: none; }
.brand h1 {
margin: 0; font-size: 26px; font-weight: 300; letter-spacing: .5em; padding-left: .5em;
text-shadow: 0 2px 18px rgba(255, 190, 110, .55);
}
.brand h1 span { color: #f6e7d3; font-weight: 300; }
#brand-sub { color: #ffcf8a; font-weight: 700; }
.wish-form label .fld { color: #e5c9a4; }
.brand p { margin: 6px 0 0; font-size: 12px; letter-spacing: .15em; color: #d9b98f; opacity: .85; }
/* 底部操作栏 */
.dock {
position: absolute; left: 50%; bottom: max(44px, calc(env(safe-area-inset-bottom) + 30px));
transform: translateX(-50%);
display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
width: max-content; max-width: calc(100% - 24px);
padding: 10px 12px; border-radius: 18px;
background: rgba(32, 20, 13, .55);
border: 1px solid rgba(255, 210, 150, .22);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.dock form { display: flex; gap: 6px; }
button, .btn-link {
background: linear-gradient(180deg, #d99a4e, #a8641f);
color: #fff8ec; border: 0; border-radius: 12px;
padding: 10px 16px; font-size: 14px; cursor: pointer;
text-decoration: none; display: inline-block; font-family: inherit;
box-shadow: 0 4px 14px rgba(168, 100, 31, .4);
transition: transform .15s, filter .15s;
}
button:hover, .btn-link:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-link.disabled { background: #6b5d52; pointer-events: none; box-shadow: none; opacity: .6; }
input {
width: 84px; padding: 10px; font-size: 14px; font-family: inherit;
color: #f6e7d3; background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 210, 150, .3); border-radius: 12px; outline: none;
}
input:focus { border-color: #ffcf8a; }
input::placeholder { color: #b89a78; }
.status { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 12px; color: #ffb39a; min-height: 16px; pointer-events: none; }
.notice { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; text-align: center; font-size: 11px; color: #a38b72; opacity: .8; pointer-events: none; }
/* 卡片面板 */
.card {
position: absolute; top: 50%; right: 4vw; transform: translateY(-50%);
width: min(340px, calc(100% - 32px));
padding: 26px 24px 22px; border-radius: 20px;
background: linear-gradient(160deg, rgba(255, 246, 228, .95), rgba(247, 226, 190, .93));
color: #4a3426; text-align: center;
border: 1px solid rgba(255, 255, 255, .6);
box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 190, 100, .25);
animation: pop .45s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes pop { from { opacity: 0; transform: translateY(-46%) scale(.9); } }
.card-close { position: absolute; top: 8px; right: 10px; padding: 0; width: 30px; height: 30px; font-size: 20px; line-height: 1; background: rgba(74, 52, 38, .12); color: #4a3426; box-shadow: none; border-radius: 50%; }
.card-no { font-size: 34px; font-weight: 800; color: #b5651d; letter-spacing: .05em; }
.card-msg { font-size: 17px; line-height: 1.7; margin: 14px 0; white-space: pre-wrap; word-break: break-word; max-height: 32vh; overflow: auto; }
.card-ig { display: block; margin-bottom: 14px; color: #8a4b14; font-weight: 600; text-decoration: none; word-break: break-all; }
.card-ig:hover { text-decoration: underline; }
.card-replies { margin: 0 0 14px; text-align: left; max-height: 24vh; overflow: auto; border-top: 1px dashed #d8b98a; padding-top: 10px; }
.card-reply { margin-bottom: 10px; background: rgba(181, 101, 29, .08); border-radius: 12px; padding: 8px 12px; }
.card-reply .who { font-size: 12px; color: #b5651d; font-weight: 700; }
.card-reply p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 640px) {
.brand h1 { font-size: 20px; }
.card { top: auto; bottom: 150px; right: 50%; transform: translateX(50%); animation: none; }
.dock { bottom: 40px; }
}
/* 等级 / 请喝咖啡 */
.level {
position: absolute; top: 74px; left: 16px; width: 190px;
padding: 12px 14px; border-radius: 16px;
background: rgba(32, 20, 13, .55); border: 1px solid rgba(255, 210, 150, .22);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-link.support { display: block; text-align: center; background: linear-gradient(180deg, #ffcf8a, #e08a2e); color: #3a2010; font-weight: 700; }
.market-list { display: grid; gap: 10px; margin-top: 12px; }
.market-btn { text-align: center; }
/* 面板:公告 / 相册 / 树洞 */
.panel {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(420px, calc(100% - 28px)); max-height: 72vh; overflow: auto;
padding: 22px 20px 18px; border-radius: 20px;
background: rgba(34, 22, 15, .88); color: #f6e7d3;
border: 1px solid rgba(255, 210, 150, .28);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.panel.wide { width: min(720px, calc(100% - 28px)); }
.panel h2 { margin: 0 0 6px; font-size: 18px; color: #ffcf8a; }
.panel-sub { margin: 0 0 12px; font-size: 12px; color: #c4a782; }
.panel-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; padding: 0; font-size: 20px; line-height: 1; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: none; }
.board-list { margin: 10px 0 0; padding-left: 18px; line-height: 1.9; font-size: 15px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block; }
.gallery-grid img.big { position: fixed; inset: 5vh 5vw; width: 90vw; height: 90vh; object-fit: contain; z-index: 50; background: rgba(0, 0, 0, .92); cursor: zoom-out; }
.gallery-grid figcaption { font-size: 12px; color: #c4a782; margin-top: 4px; }
@media (max-width: 640px) {
.level { top: 62px; left: 8px; width: 150px; padding: 8px 10px; }
.dock { gap: 6px; padding: 8px; }
.dock button, .dock .btn-link { padding: 8px 10px; font-size: 13px; }
}
/* 下单按钮 / 语言选择 */
.btn-link.order { display: block; text-align: center; margin-bottom: 8px; background: linear-gradient(180deg, #7bd88f, #2f9e4f); color: #0f2d18; font-weight: 700; }
.btn-link.support { margin-top: 0; }
.lang { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; display: flex; gap: 8px; align-items: center; }
.music-btn { padding: 8px 10px; font-size: 13px; white-space: nowrap; box-shadow: none; }
.lang select {
background: rgba(32, 20, 13, .6); color: #f6e7d3; font-family: inherit; font-size: 13px;
border: 1px solid rgba(255, 210, 150, .3); border-radius: 12px; padding: 8px 10px; outline: none;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lang select option { color: #222; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gt-hidden { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
/* 隐藏 Google 翻译自带的顶部横幅,不挤压页面 */
body { top: 0 !important; }
.skiptranslate > iframe.skiptranslate, iframe.goog-te-banner-frame { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
/* ---------- 手机端 ---------- */
@media (max-width: 640px) {
.brand { top: max(10px, env(safe-area-inset-top)); }
.brand h1 { font-size: 17px; letter-spacing: .3em; }
.brand p { display: none; }
.lang { top: max(8px, env(safe-area-inset-top)); right: 8px; flex-direction: column; align-items: flex-end; gap: 4px; }
.music-btn { padding: 5px 8px; font-size: 11px; min-height: 30px; }
.lang select { padding: 6px 8px; font-size: 12px; }
/* 等级条收成一行小卡,放左上(下移,避开上方店名标题) */
.level {
top: max(62px, calc(env(safe-area-inset-top) + 52px)); left: 8px; width: auto; max-width: 50vw;
padding: 8px 10px;
}
.level .btn-link { padding: 7px 10px; font-size: 12px; margin-bottom: 6px; }
/* 语言选择 + 音乐按钮:下移到店名下方,不再挡住标题 */
.lang { top: max(62px, calc(env(safe-area-inset-top) + 52px)); right: 12px; }
/* 底部操作栏:单行可左右滑动,不再堆叠占掉半屏 */
.dock {
width: calc(100% - 16px); max-width: none; left: 8px; right: 8px; transform: none;
bottom: max(50px, calc(env(safe-area-inset-bottom) + 44px));
gap: 8px; padding: 8px; border-radius: 16px;
flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
justify-content: flex-start; -webkit-overflow-scrolling: touch;
max-height: 64px; scrollbar-width: none;
}
.dock > * { flex: 0 0 auto; text-align: center; min-height: 40px; white-space: nowrap; }
.dock form { flex: 0 0 auto; display: flex; gap: 6px; }
.dock form input { flex: none; width: 76px; min-height: 40px; padding: 6px 8px; }
.dock button, .dock .btn-link { padding: 8px 12px; font-size: 13px; min-width: 0; }
.notice { font-size: 10px; bottom: max(4px, env(safe-area-inset-bottom)); }
.status { bottom: max(4px, env(safe-area-inset-bottom)); font-size: 11px; }
/* 卡片和面板:占满宽度,可滚动,留出底部操作栏 */
.card { left: 10px; right: 10px; width: auto; top: auto; bottom: 118px; transform: none; max-height: 60vh; overflow: auto; padding: 20px 16px 16px; }
.card-no { font-size: 28px; }
.card-msg { font-size: 15px; max-height: 18vh; }
.panel { width: calc(100% - 20px); max-height: 66vh; padding: 18px 14px 14px; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) and (max-height: 600px) {
.level { display: none; }
}
/* 横屏小高度:隐藏次要元素 */
@media (max-height: 480px) { .brand p, .notice { display: none; } }
/* 触屏设备:关闭悬停放大 */
@media (hover: none) { button:hover, .btn-link:hover { transform: none; filter: none; } }
/* 站内填写表单 */
.wish-form { display: grid; gap: 12px; margin-top: 12px; text-align: left; }
.wish-form label { display: grid; gap: 6px; font-size: 13px; color: #e5c9a4; }
.wish-form input, .wish-form textarea {
width: 100%; min-height: 42px; padding: 10px 12px; resize: vertical;
color: #fff7eb; background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 210, 150, .3); border-radius: 10px;
font: inherit; font-size: 16px; /* 防止 iPhone 聚焦时自动放大 */
}
.wish-form input:focus, .wish-form textarea:focus { border-color: #ffcf8a; outline: none; }
.wish-form button { width: 100%; min-height: 44px; }
.wish-form button:disabled { opacity: .55; cursor: wait; }
.form-status { min-height: 20px; margin: 0; color: #b9edbd; font-size: 13px; line-height: 1.6; text-align: center; }
.form-setup { padding: 14px; border-radius: 10px; background: rgba(255, 210, 150, .1); color: #ffcf8a; font-size: 14px; line-height: 1.7; }
.hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
@media (max-width: 640px) { .form-panel { max-height: 76vh; } }
/* 装修模式:在 就隐藏营业界面,不启动 3D 和提交 */
html.maintenance #scene, html.maintenance .hud, html.maintenance #loading { display: none !important; }
html.maintenance #maintenance { display: flex !important; }
.maintenance {
position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center;
padding: 24px; text-align: center;
background: radial-gradient(circle at 50% 35%, #3a2417, #100b0a 72%);
}
.maintenance-card {
width: min(440px, 100%); padding: 36px 24px; border-radius: 24px;
background: rgba(255, 246, 228, .08); border: 1px solid rgba(255, 210, 150, .25);
box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
.maintenance-icon { font-size: 52px; }
.maintenance h1 { margin: 16px 0 12px; color: #ffcf8a; font-size: 26px; font-weight: 500; letter-spacing: .15em; }
.maintenance p { color: #ead6bb; line-height: 1.8; }
.maintenance-en { font-size: 13px; opacity: .65; }