/* 线上咖啡厅 · 一起自习
 * 一间画出来的咖啡店：白天是鼠尾草绿的墙和木头，晚上是墨蓝的墙和琥珀色的灯。
 * 窗外的天色跟着访客本地时间走（data-sky），和亮暗主题无关。
 * 页面有严格 CSP：不能写 style 属性，动态数值只通过 CSSOM 设置。 */

.study {
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", "Iowan Old Style", Georgia, serif;
  --amber: #E8A33D;
  --amber-ink: #2A1A08;
  --amber-soft: rgba(232, 163, 61, .16);
  /* 白天的店 */
  --wall: #CBD6C0; --wall-shade: #BCC8B0; --wains: #8B5E3C; --rail: #6E4A2F;
  --floor-a: #B98B63; --floor-b: #AE7F57; --floor-line: rgba(80, 48, 24, .18);
  --frame: #F3ECE1; --sill: #E6DCCB; --board: #77502F; --wood-dark: #5E3F27;
  --slate: #2E3A33; --chalk: #F1EFE6;
  --shade: #2F3B34; --bulb: #FFD889; --glow: rgba(255, 205, 120, .34);
  --counter: #6A4429; --counter-top: #A87650; --metal: #C7CDD0; --metal-dark: #8C959A;
  --skin: #F2C9A0; --hair: #3B2A22; --shirt: #2F4858; --apron: #EFE6D6;
  --plant: #5E8C5A; --plant-2: #79A86F; --pot: #C08A5A;
  --book-1: #3E5C76; --book-2: #B5523B; --book-3: #D9B44A; --book-4: #5E8C5A;
  --cat: #3A302B;
  --paper: #FBF6EE; --paper-ink: #3A2A1E; --paper-line: rgba(58, 42, 30, .14);
  --seat-tag: rgba(251, 246, 238, .94); --seat-tag-ink: #3A2A1E;
  background: var(--mk-bg);
}
:root[data-theme="dark"] .study {
  --wall: #283049; --wall-shade: #222941; --wains: #3A2A22; --rail: #2C1F19;
  --floor-a: #2D231D; --floor-b: #281F1A; --floor-line: rgba(0, 0, 0, .3);
  --frame: #3A2F2A; --sill: #44372F; --board: #4A3324; --wood-dark: #33241A;
  --slate: #1C2420; --chalk: #E9E5D8;
  --shade: #1A1F1C; --bulb: #FFD27A; --glow: rgba(255, 190, 90, .42);
  --counter: #3E2A1D; --counter-top: #5E4130; --metal: #8D969B; --metal-dark: #5E666B;
  --skin: #E3B48C; --hair: #241913; --shirt: #22374A; --apron: #D9CDB8;
  --plant: #3F6B45; --plant-2: #557F57; --pot: #8A5E3C;
  --book-1: #2E4A63; --book-2: #8F3F2E; --book-3: #A88935; --book-4: #3F6B45;
  --cat: #15110F;
  --paper: #2A2522; --paper-ink: #F1E7D8; --paper-line: rgba(241, 231, 216, .14);
  --seat-tag: rgba(28, 24, 22, .9); --seat-tag-ink: #F1E7D8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .study {
    --wall: #283049; --wall-shade: #222941; --wains: #3A2A22; --rail: #2C1F19;
    --floor-a: #2D231D; --floor-b: #281F1A; --floor-line: rgba(0, 0, 0, .3);
    --frame: #3A2F2A; --sill: #44372F; --board: #4A3324; --wood-dark: #33241A;
    --slate: #1C2420; --chalk: #E9E5D8;
    --shade: #1A1F1C; --bulb: #FFD27A; --glow: rgba(255, 190, 90, .42);
    --counter: #3E2A1D; --counter-top: #5E4130; --metal: #8D969B; --metal-dark: #5E666B;
    --skin: #E3B48C; --hair: #241913; --shirt: #22374A; --apron: #D9CDB8;
    --plant: #3F6B45; --plant-2: #557F57; --pot: #8A5E3C;
    --book-1: #2E4A63; --book-2: #8F3F2E; --book-3: #A88935; --book-4: #3F6B45;
    --cat: #15110F;
    --paper: #2A2522; --paper-ink: #F1E7D8; --paper-line: rgba(241, 231, 216, .14);
    --seat-tag: rgba(28, 24, 22, .9); --seat-tag-ink: #F1E7D8;
  }
}

/* 窗外天色（JS 按本地时间设 data-sky） */
.study { --sky1: #8EC5E8; --sky2: #DDEFF7; --sun: #FFE7A3; --cloud: rgba(255, 255, 255, .9); --city: #6F8597; --star-o: 0; --sun-o: 1; --cloud-o: 1; --lights-o: 0; }
.study[data-sky="dawn"] { --sky1: #9FBFE0; --sky2: #F7C9A6; --sun: #FFD6A0; --city: #7D7E98; --lights-o: .4; }
.study[data-sky="dusk"] { --sky1: #4F4A86; --sky2: #F2A65A; --sun: #FFB36B; --city: #3D3A5C; --cloud: rgba(255, 214, 180, .7); --lights-o: .9; }
.study[data-sky="night"] { --sky1: #0E1630; --sky2: #2A3561; --sun: #F3EBCF; --city: #10162B; --star-o: 1; --cloud-o: 0; --lights-o: 1; }

/* ---------------- 通用 ---------------- */
.study main { overflow-x: clip; }
.study h1, .study h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .01em; }
.mk-header { position: sticky; }
.bean-crease { stroke: rgba(255, 255, 255, .55); }

.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--amber); color: var(--amber-ink);
  font: 700 16px/1 var(--mk-font); cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 8px 22px -10px rgba(232, 163, 61, .9);
  transition: transform .25s var(--mk-ease), box-shadow .25s, filter .2s;
}
.go svg { width: 18px; height: 18px; }
.go:hover { transform: translateY(-1px); filter: brightness(1.05); }
.go:active { transform: scale(.97); }
.go:focus-visible, .card-btn:focus-visible, .seat:focus-visible, .drink-pick:focus-visible, .door-btn:focus-visible, .presets button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.go.wide { width: 100%; }
.go:disabled { opacity: .6; cursor: wait; }

/* 头部：会员卡按钮 */
.card-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px;
  border: 1px solid var(--mk-border); border-radius: 999px; background: var(--mk-surface);
  color: var(--mk-text); font: 600 13px/1 var(--mk-font); cursor: pointer;
  transition: border-color .2s, transform .25s var(--mk-ease);
}
.card-btn:hover { border-color: var(--amber); }
.card-btn .lv { font-family: var(--serif); font-weight: 700; }
.card-btn .beans { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 7px; border-radius: 999px; background: var(--amber-soft); color: var(--mk-text); }
.card-btn .beans svg { width: 15px; height: 15px; color: #6B4226; }
.card-btn .beans b { font-variant-numeric: tabular-nums; }
.card-btn.gain { animation: gain .6s var(--mk-ease); }
@keyframes gain { 35% { transform: scale(1.08); border-color: var(--amber); } }
#soundTop[aria-pressed="true"] { color: var(--amber); }
@media (max-width: 520px) { .card-btn .lv { display: none; } .card-btn { padding-left: 6px; } }

/* ================= 门口 ================= */
.door { position: fixed; inset: 0; z-index: 80; display: grid; background: #0E1630; overflow: hidden; }
.study[data-sky="day"] .door { background: #8EC5E8; } .study[data-sky="dawn"] .door { background: #C7B9D6; } .study[data-sky="dusk"] .door { background: #5A4A84; }
.door[hidden] { display: none; }
.door-art { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 56.5% 78%; }
.door .d-sky { fill: #0E1630; }
.study[data-sky="day"] .door .d-sky { fill: #8EC5E8; }
.study[data-sky="dawn"] .door .d-sky { fill: #C7B9D6; }
.study[data-sky="dusk"] .door .d-sky { fill: #5A4A84; }
.door .d-stars circle { fill: #FFF6D8; opacity: var(--star-o); }
.door .d-moon { fill: var(--sun); }
.door .d-wall { fill: #3C2C25; }
.door .d-roof { fill: #2A1E19; }
.door .d-sign { fill: #1E2622; stroke: #E8A33D; stroke-width: 2; }
.door .d-sign-t { fill: #F6E7C8; font: 700 20px var(--serif); letter-spacing: .2em; }
.door .d-awning path { fill: #EFE6D6; }
.door .d-awning .stripe { fill: #2F5D4A; }
.door .d-win { fill: #FFC86B; }
.door .d-mullion { stroke: #3C2C25; stroke-width: 6; fill: none; }
.door .d-people circle, .door .d-people path { fill: rgba(70, 40, 20, .55); }
.door .d-door-frame rect { fill: #2A1E19; }
.door .d-door-frame rect { transition: fill .6s .2s; }
.door.opening .d-door-frame rect { fill: #FFD27A; }
.door .d-door rect:first-child { fill: #5E3F27; }
.door .d-door { transform-box: fill-box; transform-origin: left center; transition: transform 1s cubic-bezier(.6, 0, .3, 1); }
.door .d-door-glass { fill: #FFC86B; opacity: .85; }
.door .d-knob { fill: #E8A33D; }
.door .d-bell { fill: #E8A33D; transform-box: fill-box; transform-origin: 50% 0; }
.door .d-ground { fill: #241913; }
.door.opening .d-door { transform: perspective(600px) rotateY(-75deg); }
.door.opening .d-bell { animation: bell .5s ease-in-out 3; }
.door.opening .door-art { animation: walkin 1.25s .45s cubic-bezier(.7, 0, .3, 1) forwards; }
.door.opening .door-copy { opacity: 0; transform: translateY(12px); }
.door.gone { opacity: 0; transition: opacity .45s .1s; pointer-events: none; }
@keyframes bell { 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }
@keyframes walkin { to { transform: scale(5.5); filter: brightness(1.6); } }
.door-copy {
  position: relative; align-self: start; justify-self: center; margin-top: max(8vh, 40px);
  display: grid; justify-items: center; gap: 12px; padding: 0 20px; text-align: center; color: #FBF1DE;
  transition: opacity .35s, transform .35s;
}
.door-copy h1 { margin: 0; font-size: clamp(26px, 4.4vw, 44px); line-height: 1.25; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.door-copy p { margin: 0; font-size: 15px; opacity: .85; }
.door-meter { width: 180px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.door-meter i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .4s ease-out; }
.door-btn {
  margin-top: 8px; height: 54px; padding: 0 34px; border-radius: 999px; border: 0;
  background: var(--amber); color: var(--amber-ink); font: 700 17px/1 var(--serif); letter-spacing: .12em; cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(232, 163, 61, .9); animation: breathe 2.6s ease-in-out infinite;
}
.door-btn:disabled { opacity: .55; animation: none; cursor: progress; }
.door-skip { border: 0; background: none; color: rgba(251, 241, 222, .6); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@keyframes breathe { 50% { transform: scale(1.04); box-shadow: 0 12px 38px -8px rgba(232, 163, 61, 1); } }

/* ================= 店里 ================= */
.cafe { position: relative; }
.wall { position: relative; height: clamp(230px, 33vw, 440px); background: var(--wall); overflow: hidden; isolation: isolate; }
.wall-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wall-art .w-wall { fill: var(--wall); transition: fill .6s; }
.wall-art .w-wains { fill: var(--wains); }
.wall-art .w-rail { fill: var(--rail); }
.wall-art .panel { fill: none; stroke: var(--rail); stroke-width: 3; opacity: .55; }
.wall-art .sky1 { stop-color: var(--sky1); }
.wall-art .sky2 { stop-color: var(--sky2); }
.wall-art .glow1 { stop-color: var(--glow); }
.wall-art .glow2 { stop-color: rgba(255, 200, 110, 0); }
.wall-art .w-stars circle { fill: #FFF6D8; opacity: var(--star-o); }
.wall-art .w-stars circle:nth-child(odd) { animation: twinkle 3.4s ease-in-out infinite; }
.wall-art .w-stars circle:nth-child(3n) { animation-delay: -1.7s; }
@keyframes twinkle { 50% { opacity: calc(var(--star-o) * .25); } }
.wall-art .w-sun { fill: var(--sun); opacity: var(--sun-o); }
.study[data-sky="night"] .w-sun { transform: translate(10px, -12px) scale(.7); transform-box: fill-box; transform-origin: center; }
.wall-art .w-clouds path { fill: var(--cloud); opacity: var(--cloud-o); animation: drift 60s linear infinite alternate; }
.wall-art .w-clouds path + path { animation-duration: 80s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translateX(46px); } }
.wall-art .w-city { fill: var(--city); }
.wall-art .w-lights rect { fill: #FFD27A; opacity: var(--lights-o); }
.wall-art .w-frame { fill: none; stroke: var(--frame); stroke-width: 12; }
.wall-art .w-mullion { stroke: var(--frame); stroke-width: 7; }
.wall-art .w-sill { fill: var(--sill); }
.wall-art .w-plant .pot { fill: var(--pot); }
.wall-art .w-plant .leaf { fill: var(--plant-2); }
.wall-art .w-cat path { fill: var(--cat); }
.wall-art .w-cat .tail { fill: none; stroke: var(--cat); stroke-width: 6; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 100%; animation: tail 4s ease-in-out infinite; }
@keyframes tail { 50% { transform: rotate(-14deg); } }
.wall-art .w-shelf .board { fill: var(--board); }
.wall-art .books rect:nth-child(1) { fill: var(--book-1); } .wall-art .books rect:nth-child(2) { fill: var(--book-3); }
.wall-art .books rect:nth-child(3) { fill: var(--book-2); } .wall-art .books rect:nth-child(4) { fill: var(--book-4); }
.wall-art .jars rect { fill: rgba(255, 255, 255, .35); stroke: rgba(255, 255, 255, .6); stroke-width: 2; }
.wall-art .beans-in-jar ellipse { fill: #4A2C1E; }
.wall-art .cups-on-shelf path { fill: var(--frame); }
.wall-art .w-hang path { stroke: var(--plant); stroke-width: 3; }
.wall-art .w-hang circle { fill: var(--plant-2); }
.wall-art .w-board .frame { fill: var(--board); }
.wall-art .w-board .slate { fill: var(--slate); }
.wall-art .w-board text { fill: var(--chalk); font-family: var(--serif); }
.wall-art .chalk-h { font-size: 18px; letter-spacing: .4em; opacity: .7; }
.wall-art .chalk-n { font-size: 26px; font-weight: 700; }
.wall-art .chalk { font-size: 16px; opacity: .9; }
.wall-art .chalk.sm { font-size: 13px; opacity: .7; }
.wall-art .lamp path:first-child { stroke: var(--shade); stroke-width: 2; }
.wall-art .lamp .shade { fill: var(--shade); }
.wall-art .lamp .bulb { fill: var(--bulb); }
.wall-art .lamp .halo { mix-blend-mode: screen; animation: flicker 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wall-art .lamp + .lamp .halo { animation-delay: -3s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 50% { opacity: .78; } 53% { opacity: .95; } }
.wall-art .w-counter { fill: var(--counter); }
.wall-art .w-counter-top { fill: var(--counter-top); }
.wall-art .m-body { fill: var(--metal); } .wall-art .m-top { fill: var(--metal-dark); }
.wall-art .m-dial { fill: var(--frame); stroke: var(--metal-dark); stroke-width: 3; }
.wall-art .m-head { fill: var(--metal-dark); }
.wall-art .m-steam path { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.wall-art .m-steam.puff path { animation: puff 2.4s ease-out; }
.wall-art .m-steam.puff path + path { animation-delay: .35s; }
@keyframes puff { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } }
.wall-art .b-body { fill: var(--shirt); }
.wall-art .b-apron { fill: var(--apron); }
.wall-art .b-head { fill: var(--skin); }
.wall-art .b-hair { fill: var(--hair); }
.wall-art .b-eyes circle { fill: #2A1A10; transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.wall-art .b-smile { fill: none; stroke: #7A3E2A; stroke-width: 2.4; stroke-linecap: round; }
.wall-art .b-cheek { fill: #F19C88; opacity: .5; }
.wall-art .w-barista { transform-box: fill-box; transform-origin: 50% 100%; }
.wall-art .w-barista.nod { animation: nod .7s var(--mk-ease); }
@keyframes nod { 40% { transform: translateY(4px) rotate(-2deg); } }
.wall-art .w-paper { mix-blend-mode: multiply; pointer-events: none; }
.wall-art .w-rain line { stroke: rgba(225, 235, 255, .55); stroke-width: 1.4; stroke-linecap: round; animation: rain .7s linear infinite; }
@keyframes rain { from { transform: translate(0, -260px); } to { transform: translate(-30px, 260px); } }
/* 你专注的时候，店里的灯稍微暗一点 */
.study.focusing .wall-art .w-wall { fill: var(--wall-shade); }

.wall-top { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px max(16px, env(safe-area-inset-left)) 0; }
.live {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--seat-tag); color: var(--seat-tag-ink); font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4); backdrop-filter: blur(8px);
}
.live i { width: 8px; height: 8px; border-radius: 50%; background: #3FB971; box-shadow: 0 0 0 0 rgba(63, 185, 113, .6); animation: live 2s infinite; }
.live.off i { background: #A8A29E; animation: none; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(63, 185, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 185, 113, 0); } }
.rooms { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.rooms[hidden] { display: none; }
.rooms a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--seat-tag); color: var(--seat-tag-ink); font-size: 13px; font-weight: 600; text-decoration: none; opacity: .85;
}
.rooms a b { font-size: 11.5px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--mk-surface-3); color: var(--mk-muted); }
.rooms a.has-people b { background: var(--amber-soft); color: var(--seat-tag-ink); }
.rooms a[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--amber); }

/* 店员的气泡 */
.bubble {
  position: absolute; z-index: 3; left: 0; top: 0; max-width: min(260px, 64vw); padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--paper); color: var(--paper-ink); font: 500 14px/1.5 var(--serif);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); transform-origin: 100% 100%;
  opacity: 0; transform: translate(var(--bx, 0), var(--by, 0)) scale(.8); transition: opacity .3s, transform .35s var(--mk-ease); pointer-events: none;
}
.bubble.on { opacity: 1; transform: translate(var(--bx, 0), var(--by, 0)) scale(1); }
.barista-hit { position: absolute; z-index: 2; left: 0; top: 0; width: 80px; height: 120px; border: 0; background: none; cursor: pointer; border-radius: 40px; }
.barista-hit:focus-visible { outline: 3px solid var(--amber); }

/* ---------------- 地板和座位 ---------------- */
.floor {
  position: relative; padding: 20px max(16px, env(safe-area-inset-left)) 28px;
  background:
    repeating-linear-gradient(90deg, transparent 0 158px, var(--floor-line) 158px 160px),
    repeating-linear-gradient(0deg, var(--floor-a) 0 34px, var(--floor-b) 34px 36px, var(--floor-a) 36px 70px);
  overflow: hidden;
}
.floor::before { content: ""; position: absolute; inset: 0 0 auto; height: 40px; background: linear-gradient(rgba(0, 0, 0, .22), transparent); pointer-events: none; }
.floor-head { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.floor-head h2 { margin: 0; font-size: 18px; color: #FBF1DE; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.cheers { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--seat-tag); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .5); }
.cheers button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; font-size: 19px; line-height: 1; cursor: pointer; transition: transform .25s var(--mk-ease), background .2s; }
.cheers button:hover { background: var(--amber-soft); transform: translateY(-2px) scale(1.12); }
.cheers button:active { transform: scale(.9); }
.cheers.cooling button { opacity: .45; }
.cheers .to { display: none; align-items: center; gap: 6px; padding: 0 4px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--seat-tag-ink); white-space: nowrap; }
.cheers.targeted .to { display: inline-flex; }
.cheers .to button { width: 24px; height: 24px; font-size: 12px; }

.tables { position: relative; max-width: 1200px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px 10px; }
.seat {
  position: relative; display: block; height: 176px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; animation: sit .7s var(--mk-ease) both;
}
@media (min-width: 521px) { .tables > :nth-child(even) { transform: translateY(14px); } }
@keyframes sit { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.seat .chair { position: absolute; left: 50%; top: 8px; width: 110px; height: 84px; margin-left: -55px; }
.seat .chair .c-back { fill: var(--wood-dark); }
.seat .avatar { position: absolute; left: 50%; top: 22px; margin-left: -29px; width: 58px; height: 58px; font-size: 30px; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.seat .tbl { position: absolute; left: 50%; top: 66px; width: 128px; height: 74px; margin-left: -64px; }
.seat .tbl .t-top { fill: var(--counter-top); }
.seat .tbl .t-top-edge { fill: var(--counter); }
.seat .tbl .t-leg { fill: var(--counter); }
.seat .tbl .t-foot { fill: rgba(0, 0, 0, .25); }
.seat .mug { position: absolute; left: 50%; top: 76px; margin-left: 10px; width: 20px; height: 16px; border-radius: 3px 3px 8px 8px; background: var(--frame); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
.seat .mug::after { content: ""; position: absolute; right: -6px; top: 3px; width: 6px; height: 7px; border: 2px solid var(--frame); border-left: 0; border-radius: 0 5px 5px 0; }
.seat .book { position: absolute; left: 50%; top: 82px; margin-left: -34px; width: 30px; height: 10px; border-radius: 2px; background: var(--book-1); transform: rotate(-6deg); box-shadow: 0 3px 0 var(--chalk); }
.seat .steam { position: absolute; left: 50%; top: 52px; margin-left: 12px; width: 18px; height: 24px; opacity: 0; pointer-events: none; }
.seat .steam i { position: absolute; bottom: 0; width: 4px; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, .8); filter: blur(1.5px); animation: steam 2.6s ease-in-out infinite; }
.seat .steam i:nth-child(1) { left: 0; } .seat .steam i:nth-child(2) { left: 7px; animation-delay: .8s; } .seat .steam i:nth-child(3) { left: 14px; animation-delay: 1.6s; }
.seat.focus .steam { opacity: 1; }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px) scaleY(.6); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-14px) scaleY(1.2) translateX(3px); } }
.seat .tag {
  position: absolute; left: 6px; right: 6px; top: 124px; display: grid; justify-items: center; gap: 1px; padding: 6px 6px 7px; border-radius: 10px;
  background: var(--seat-tag); color: var(--seat-tag-ink); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .55);
}
.seat .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.25 var(--serif); }
.seat .st { font-size: 11.5px; line-height: 1.3; opacity: .72; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seat.focus .st { opacity: 1; color: #B7791F; font-weight: 600; }
:root[data-theme="dark"] .seat.focus .st { color: var(--amber); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seat.focus .st { color: var(--amber); } }
.seat .ring { position: absolute; left: 50%; top: 17px; width: 68px; height: 68px; margin-left: -34px; opacity: 0; transform: rotate(-90deg); }
.seat .ring circle { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 201; }
.seat.focus .ring { opacity: 1; }
.seat .you { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; padding: 2px 8px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); font-size: 11px; font-weight: 800; }
.seat .vn { position: absolute; top: 2px; right: 2px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: #FBF1DE; opacity: .8; }
.seat:hover .avatar, .seat:focus-visible .avatar { transform: translateY(-4px); }
.seat .avatar { transition: transform .3s var(--mk-ease); }
.seat.break .avatar { transform: rotate(-8deg); }
.seat.is-me .tag { box-shadow: 0 0 0 2px var(--amber), 0 6px 16px -10px rgba(0, 0, 0, .55); }
.seat.picked .tag { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--amber); }
.seat.cheered .avatar { animation: cheered .8s var(--mk-ease); }
@keyframes cheered { 30% { transform: translateY(-10px) rotate(-8deg) scale(1.1); } 60% { transform: translateY(0) rotate(6deg); } }
.seat.empty { cursor: default; animation: none; opacity: .55; }
.seat.empty .tag { background: transparent; box-shadow: none; color: #FBF1DE; display: none; }
.seat.empty.invite .tag { display: grid; }
.seat.empty .nm { font-weight: 500; font-size: 12px; opacity: .8; }
.seat.empty.invite { cursor: pointer; opacity: .8; }
.floor-tip { position: relative; max-width: 1200px; margin: 18px auto 0; font-size: 13px; color: #FBF1DE; opacity: .85; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.more-people { grid-column: 1 / -1; justify-self: center; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--seat-tag); color: var(--seat-tag-ink); font-size: 13px; font-weight: 600; }

/* 头像底色 */
.avatar { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; font-size: 26px; line-height: 1; background: var(--av, var(--mk-surface-3)); flex: none; }
.avatar.big { width: 58px; height: 58px; font-size: 30px; cursor: pointer; transition: transform .3s var(--mk-ease); }
.avatar.big:hover { transform: rotate(-8deg) scale(1.06); }
.av0 { --av: #FDE7D3; } .av1 { --av: #E5DBFF; } .av2 { --av: #D3F9D8; } .av3 { --av: #FFE3E3; }
.av4 { --av: #D0EBFF; } .av5 { --av: #FFF3BF; } .av6 { --av: #E3FAFC; } .av7 { --av: #F3D9FA; }
.av8 { --av: #FFE8CC; } .av9 { --av: #E6FCF5; } .av10 { --av: #EDF2FF; } .av11 { --av: #FFF0F6; }

/* 飘起来的表情 */
.floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float { position: absolute; font-size: 28px; line-height: 1; animation: float 2.4s cubic-bezier(.2, .7, .3, 1) both; }
.float.fixed { position: fixed; z-index: 90; }
@keyframes float { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 15% { opacity: 1; transform: translateY(-10px) scale(1.15); } 100% { opacity: 0; transform: translateY(-120px) scale(1) rotate(12deg); } }

/* ================= 我的桌子 ================= */
.desk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; padding-top: 28px; padding-bottom: 12px; }
@media (max-width: 900px) { .desk { grid-template-columns: 1fr; } }
.brew, .stamp-card, .me-row > div, .day { border-radius: 22px; background: var(--mk-surface); border: 1px solid var(--mk-border); }
.brew { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 26px; align-items: center; padding: 22px 26px 22px 14px; }
@media (max-width: 560px) { .brew { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 18px 16px 22px; } }
.cup-wrap { position: relative; width: 240px; }
.mug-svg { display: block; width: 240px; height: 220px; overflow: visible; }
.mug-svg .saucer { fill: var(--frame); stroke: var(--paper-line); stroke-width: 1.5; }
.mug-svg .saucer-in { fill: rgba(0, 0, 0, .05); }
.mug-svg .saucer-shadow { fill: rgba(0, 0, 0, .08); }
.mug-svg .cup-body { fill: #FBF7F0; stroke: rgba(58, 42, 30, .12); stroke-width: 1.5; }
.mug-svg .handle-edge { stroke: rgba(58, 42, 30, .16); stroke-width: 17; stroke-linecap: round; }
.mug-svg .handle { stroke: #FBF7F0; stroke-width: 14; stroke-linecap: round; }
.mug-svg .cup-rim { fill: #FBF7F0; stroke: rgba(58, 42, 30, .12); stroke-width: 1.5; }
.mug-svg .cup-mouth { fill: #EDE4D6; }
.mug-svg .cup-empty { fill: #EDE4D6; }
.mug-svg .liquid { fill: var(--drink, #8A5A3B); transition: fill .6s; }
.mug-svg .crema { fill: var(--crema, #C89B6D); transition: fill .6s; }
.mug-svg #liquid { transition: transform 1s cubic-bezier(.3, .7, .3, 1); }
.mug-svg .art { fill: #F8EEDF; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .8s .3s, transform .8s .3s var(--mk-ease); transform: scale(.4) rotate(-20deg); }
.mug-svg.full .art { opacity: .95; transform: scale(1) rotate(0); }
.mug-svg .steam path { fill: none; stroke: var(--mk-muted); stroke-width: 5; stroke-linecap: round; opacity: 0; }
.cup-wrap.running .mug-svg .steam path { animation: cupsteam 3.2s ease-in-out infinite; }
.cup-wrap.running .mug-svg .steam path:nth-child(2) { animation-delay: 1.1s; }
.cup-wrap.running .mug-svg .steam path:nth-child(3) { animation-delay: 2.1s; }
@keyframes cupsteam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .35; } 100% { opacity: 0; transform: translateY(-18px); } }
.cup-time { position: absolute; left: 0; right: 14px; top: 92px; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.cup-time b { font: 700 40px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: #FFF8EC; text-shadow: 0 2px 10px rgba(40, 20, 8, .45); letter-spacing: .02em; }
.cup-time span { font-size: 12px; font-weight: 600; color: #FFF8EC; text-shadow: 0 1px 6px rgba(40, 20, 8, .6); }
.cup-wrap.ink .cup-time b, .cup-wrap.ink .cup-time span { color: #6B5443; text-shadow: none; }
.wall-art .w-rain { transition: opacity .8s; }
.brew.done .cup-wrap { animation: done 1s var(--mk-ease); }
@keyframes done { 30% { transform: translateY(-8px) rotate(-2deg); } 60% { transform: translateY(0) rotate(1deg); } }

.brew-side { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 560px) { .brew-side { justify-items: center; } }
.brew-label { margin: 0; font: 700 22px/1.35 var(--serif); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .presets { justify-content: center; } }
.presets button {
  display: grid; gap: 2px; justify-items: center; min-width: 58px; padding: 9px 10px 8px; border-radius: 14px;
  border: 1px solid var(--mk-border); background: var(--mk-surface-2); color: var(--mk-text); cursor: pointer;
  font: 700 17px/1 var(--serif); font-variant-numeric: lining-nums; transition: border-color .2s, background .2s, transform .2s var(--mk-ease);
}
.presets button small { font: 500 11px/1.2 var(--mk-font); color: var(--mk-muted); }
.presets button[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-soft); }
.presets button:hover { transform: translateY(-1px); }
.presets button .gift { color: #B7791F; }
.presets.locked button:not([aria-pressed="true"]) { opacity: .45; }
.t-acts { display: flex; gap: 10px; align-items: center; }
.drink-line { margin: 0; font-size: 13.5px; color: var(--mk-muted); }
.drink-pick { border: 0; padding: 0 2px; background: none; color: var(--mk-text); font: 700 14px var(--serif); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }

/* 集点卡 */
.stamp-card {
  position: relative; padding: 22px 22px 18px; display: grid; gap: 14px; align-content: start;
  background: var(--paper); color: var(--paper-ink); border-color: var(--paper-line);
  background-image: radial-gradient(circle at 0 50%, var(--mk-bg) 0 9px, transparent 10px), radial-gradient(circle at 100% 50%, var(--mk-bg) 0 9px, transparent 10px);
}
.sc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sc-head h2 { margin: 0; font-size: 20px; }
.sc-head p { margin: 4px 0 0; font-size: 13.5px; opacity: .75; }
.sc-left { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--paper-line); font-size: 12px; font-weight: 600; opacity: .85; }
.stamps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.stamp { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--paper-line); display: grid; place-items: center; font: 600 12px var(--serif); color: var(--paper-ink); opacity: .9; }
.stamp span { opacity: .45; }
.stamp.half { border-style: solid; border-color: rgba(232, 163, 61, .55); }
.stamp.half::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(rgba(232, 163, 61, .35) var(--p, 0%), transparent 0); }
.stamp.on { border: 0; }
.stamp.on span { display: none; }
.stamp.on::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%23B5523B' stroke-width='2.5'/%3E%3Cpath d='M12 17h13v4a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6zM25 18h2a2.5 2.5 0 0 1 0 5h-2' fill='none' stroke='%23B5523B' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M16 10c0 2 2 2 2 4M21 10c0 2 2 2 2 4' fill='none' stroke='%23B5523B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transform: rotate(var(--r, -8deg)); opacity: .9;
}
.stamp.thunk::after { animation: thunk .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes thunk { 0% { transform: scale(1.8) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(var(--r, -8deg)); opacity: .9; } }
.sc-now { margin: -4px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }
.stamp-card.ready { box-shadow: 0 0 0 2px var(--amber), 0 18px 40px -20px rgba(232, 163, 61, .9); }
.rw-note { margin: 0; font-size: 13px; opacity: .75; }
.rw-note.ok { color: #2F855A; opacity: 1; font-weight: 600; }
.rw-note.warn { color: #B7791F; opacity: 1; }
:root[data-theme="dark"] .rw-note.ok { color: #68D391; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rw-note.ok { color: #68D391; } }
.receipt {
  display: grid; gap: 8px; padding: 14px 14px 18px; border-radius: 4px; background: #FFFDF8; color: #2A2018;
  font-family: var(--mk-mono); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
  -webkit-mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) -6px 0 / 12px 100% repeat-x;
  mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) -6px 0 / 12px 100% repeat-x;
  animation: print .9s cubic-bezier(.3, .7, .3, 1) both;
}
.receipt[hidden] { display: none; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.rc-h { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px dashed rgba(0, 0, 0, .2); text-align: center; font: 700 13px var(--serif); letter-spacing: .08em; }
.rw-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.rw-row span { opacity: .65; }
.rw-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.receipt .mk-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.rw-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* 我是谁 + 声音 */
.me-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .me-row { grid-template-columns: 1fr; } }
.who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; padding: 18px 20px; }
.who .fld { grid-column: 1 / -1; }
.who-name { display: grid; gap: 2px; min-width: 0; }
.who-name b { font: 700 18px/1.3 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-name span { font-size: 12.5px; color: var(--mk-muted); }
.fld { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; color: var(--mk-muted); }
.fld.sw { grid-template-columns: auto 1fr; cursor: pointer; }
.sound { display: grid; gap: 12px; padding: 18px 20px; }
.snd-h { display: flex; justify-content: space-between; align-items: center; }
.snd-h b { font: 700 16px var(--serif); }
#soundBtn[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-soft); }
.mixer { display: grid; gap: 8px; }
.mix { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; color: var(--mk-muted); }
.mix input { width: 100%; accent-color: var(--amber); }

.day { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; padding: 18px 22px; }
.day > div { display: grid; gap: 2px; }
.day b { font: 700 24px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.day span { font-size: 12.5px; color: var(--mk-muted); }
.day .mk-btn { margin-left: auto; }

.s-faq { padding-top: 36px; padding-bottom: 56px; }
.faq-h { margin: 0; font-size: clamp(22px, 3vw, 28px); }
.qa-list dd { line-height: 1.75; }

/* ================= 会员卡 ================= */
.sheet-ov { position: fixed; inset: 0; z-index: 60; background: rgba(10, 8, 6, .45); backdrop-filter: blur(3px); animation: fade .25s; }
.sheet-ov[hidden], .sheet[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; z-index: 61; right: 16px; top: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; border-radius: 24px; background: var(--mk-surface); border: 1px solid var(--mk-border);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); overflow: hidden; animation: slidein .4s var(--mk-ease);
}
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
@media (max-width: 560px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; animation-name: slideup; }
  @keyframes slideup { from { transform: translateY(40px); opacity: 0; } }
}
.member {
  position: relative; margin: 16px; padding: 18px 20px 16px; border-radius: 18px; color: #FBF1DE;
  background: linear-gradient(135deg, #3B2A22 0%, #5E3F27 55%, #8B5E3C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 14px 30px -18px rgba(0, 0, 0, .7);
}
.member::after { content: ""; position: absolute; right: 18px; bottom: 50px; width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(232, 163, 61, .4); }
.m-top { display: flex; justify-content: space-between; font-size: 12px; opacity: .8; padding-right: 30px; }
.m-no { font-variant-numeric: tabular-nums; }
.member h2 { margin: 14px 0 0; font-size: 30px; }
.m-name { margin: 2px 0 0; font: 500 14px var(--serif); opacity: .85; }
.m-bar { margin-top: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.m-bar i { display: block; height: 100%; width: 0; background: var(--amber); border-radius: 3px; transition: width .8s var(--mk-ease); }
.m-meta { margin-top: 8px; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; opacity: .9; }
.m-beans { display: inline-flex; align-items: center; gap: 4px; }
.m-beans svg { width: 14px; height: 14px; color: var(--amber); }
.m-beans b { font-variant-numeric: tabular-nums; }
.sheet-x { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FBF1DE; cursor: pointer; display: grid; place-items: center; }
.sheet-x svg { width: 16px; height: 16px; }
.tabs { display: flex; gap: 4px; margin: 0 16px; padding: 4px; border-radius: 999px; background: var(--mk-surface-2); }
.tabs button { flex: 1; height: 34px; border: 0; border-radius: 999px; background: none; color: var(--mk-muted); font: 600 13.5px var(--mk-font); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--mk-surface); color: var(--mk-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.tabs button b { font-size: 11.5px; color: var(--mk-muted); }
.tab-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
.tab-body[hidden] { display: none; }
.pane-tip { margin: 0 0 12px; font-size: 13px; color: var(--mk-muted); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.drink {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 16px;
  border: 1px solid var(--mk-border); background: var(--mk-surface-2); color: var(--mk-text); cursor: pointer; font: inherit;
  transition: border-color .2s, transform .25s var(--mk-ease);
}
.drink:hover { transform: translateY(-2px); border-color: var(--mk-border-strong); }
.drink svg { width: 46px; height: 40px; }
.drink .d-cup { fill: #FBF7F0; stroke: rgba(0, 0, 0, .12); }
.drink .d-in { fill: var(--drink); }
.drink b { font: 700 14px var(--serif); }
.drink small { font-size: 11.5px; color: var(--mk-muted); display: inline-flex; align-items: center; gap: 3px; }
.drink small svg { width: 12px; height: 12px; color: #6B4226; }
.drink.locked .d-in { fill: var(--mk-surface-3); }
.drink.locked b { color: var(--mk-muted); }
.drink.poor { cursor: not-allowed; opacity: .6; }
.drink.current { border-color: var(--amber); background: var(--amber-soft); }
.drink.just { animation: unlock .8s var(--mk-ease); }
@keyframes unlock { 30% { transform: scale(1.08) rotate(-2deg); } }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.badge { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 16px; background: var(--mk-surface-2); border: 1px solid var(--mk-border); text-align: center; }
.badge .e { font-size: 30px; line-height: 1; filter: grayscale(1) opacity(.35); }
.badge b { font: 700 13.5px var(--serif); }
.badge span { font-size: 11.5px; line-height: 1.4; color: var(--mk-muted); }
.badge.got { border-color: rgba(232, 163, 61, .5); }
.badge.got .e { filter: none; }
.log { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; font-size: 14px; }
.log dt { color: var(--mk-muted); }
.log dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* 弹出的小卡片：豆子、徽章、升级 */
.pop { position: fixed; z-index: 95; left: 50%; top: 76px; display: grid; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.pop > div {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 18px;
  background: var(--paper); color: var(--paper-ink); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); border: 1px solid var(--paper-line);
  animation: popin .5s var(--mk-ease) both;
}
.pop > div.out { animation: popout .4s ease-in forwards; }
.pop .e { font-size: 30px; line-height: 1; }
.pop b { display: block; font: 700 15px var(--serif); }
.pop span { font-size: 12.5px; opacity: .75; }
@keyframes popin { from { opacity: 0; transform: translateY(-14px) scale(.92); } }
@keyframes popout { to { opacity: 0; transform: translateY(-10px) scale(.95); } }
.bean-fly { position: fixed; z-index: 96; width: 18px; height: 18px; color: #6B4226; pointer-events: none; }

/* ================= 沉浸模式 ================= */
.zen { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, #2A3561, #0E1630 70%); color: #FBF1DE; }
.zen[hidden] { display: none; }
.zen-in { display: grid; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.zen-room { font: 500 14px var(--serif); opacity: .7; }
.zen .cup-wrap { transform: scale(1.45); margin: 50px 0 60px; }
@media (max-height: 640px) { .zen .cup-wrap { transform: scale(1.1); margin: 16px 0 24px; } }
.zen .mug-svg .saucer, .zen .mug-svg .saucer-in { opacity: .9; }
.zen .mk-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #FBF1DE; }
.zen-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
body.zen-on { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .study *, .study *::before, .study *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .wall-art .w-rain { display: none; }
}

/* 窄屏头部：按钮挨近一点，给会员卡和喇叭让位 */
@media (max-width: 520px) { .study .mk-actions { gap: 6px; } }
@media (max-width: 360px) { .study .mk-brand > span:not(.mk-brand-icon) { display: none; } }

/* 手机：三张桌子一排，座位整体缩小 */
@media (max-width: 520px) {
  .tables { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; }
  .seat { zoom: .8; }
  .floor-head h2 { font-size: 16px; }
  .cheers button { width: 34px; height: 34px; font-size: 17px; }
}
@media (max-width: 699px) { .wall { height: 196px; } .wall-top { padding-top: 10px; } .live { height: 28px; font-size: 12px; } }
.receipt .mk-btn--primary { background: var(--amber); color: var(--amber-ink); border-color: transparent; box-shadow: none; }