/* ===== 诗人茶馆全屏场景 v4 ===== */
#teahouse{position:relative;height:100vh;min-height:600px;max-height:900px;overflow:hidden;padding:0;margin:0;contain:layout style paint}
#teahouse .section-header{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:20;text-align:center;pointer-events:none;background:rgba(254,249,240,0.9);padding:10px 28px;border-radius:24px;border:1px solid rgba(180,150,120,0.3);box-shadow:0 2px 16px rgba(28,25,20,0.08)}
#teahouse .section-title{color:var(--ink);font-size:30px;font-weight:800;font-family:var(--serif);letter-spacing:5px}
#teahouse .section-desc{color:var(--ink-light);font-family:var(--sans);font-size:15px}
#teahouse.section-alt{max-width:none;padding:0}
.teahouse-scene{position:absolute;inset:0;width:100%;height:100%;cursor:default;user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden}

/* === CSS Background (enhanced v5) === */
.teahouse-scene::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
/* Night sky — deep cosmic gradient with nebula glows */
.th-mode-night .teahouse-scene::before{
  background:
    /* Bright nebula glows */
    radial-gradient(ellipse 45% 25% at 20% 12%, rgba(60,40,120,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 35% 20% at 75% 25%, rgba(40,50,130,0.5) 0%, transparent 65%),
    radial-gradient(ellipse 55% 18% at 50% 45%, rgba(30,20,100,0.4) 0%, transparent 70%),
    radial-gradient(ellipse 30% 15% at 85% 65%, rgba(50,25,90,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 25% 12% at 10% 55%, rgba(25,35,100,0.3) 0%, transparent 55%),
    /* Deep cosmic gradient */
    linear-gradient(180deg,
      #010108 0%, #03041c 5%, #050a2a 15%, #080e35 30%,
      #0b1240 50%, #090d35 65%, #060a2a 80%, #03061a 95%, #010108 100%);
}
/* Smooth background transition */
.teahouse-scene::before{transition:background 1.5s ease-in-out}
/* Day sky — warm sunrise */
.th-mode-day .teahouse-scene::before{
  background:linear-gradient(180deg,
    #8db8e0 0%, #b0cde8 12%, #d4dcc8 28%, #f0e6d3 50%,
    #e8dcc0 65%, #dcd0b8 80%, #d0c8b0 92%, #c8bfa8 100%);
}
/* Dusk sky — orange-purple sunset */
.th-mode-dusk .teahouse-scene::before{
  background:linear-gradient(180deg,
    #1a1040 0%, #3a2060 8%, #6a3050 20%, #c05040 38%, #e88050 50%,
    #f0a060 62%, #d09060 75%, #887060 88%, #3a3040 100%);
}

/* Moon (night) — detailed with craters via box-shadow */
.teahouse-scene::after{content:'';position:absolute;z-index:1;pointer-events:none;border-radius:50%}
.th-mode-night .teahouse-scene::after{
  top:6%;right:15%;width:80px;height:80px;
  background:radial-gradient(circle at 38% 38%, #fffeed 0%, #f5f0d5 30%, #e8dca0 55%, #d5ca8e 75%, rgba(200,190,140,0.4) 100%);
  box-shadow:
    0 0 80px 30px rgba(255,250,230,0.18),
    0 0 160px 60px rgba(255,250,230,0.07),
    0 0 240px 100px rgba(255,250,230,0.03),
    /* crater shadows on surface */
    inset 15px 18px 3px -3px rgba(180,170,140,0.25),
    inset -8px 25px 2px -2px rgba(180,170,140,0.2),
    inset 28px 55px 2px -4px rgba(160,150,120,0.15),
    inset -18px 42px 1px -3px rgba(160,150,120,0.18);
  /* Use opacity-only animation on a wrapper for glow; keep shadow static to avoid repaint */
}
/* Moon glow uses a separate ring pseudo-element for compositor-only animation */

/* Sun glow (day) */
.th-mode-day .teahouse-scene::after{
  top:4%;right:12%;width:110px;height:110px;
  background:radial-gradient(circle, rgba(255,250,220,0.9) 0%, rgba(255,240,200,0.6) 25%, rgba(255,225,170,0.25) 55%, rgba(255,210,150,0) 100%);
  box-shadow:0 0 100px 40px rgba(255,240,200,0.25),0 0 200px 80px rgba(255,230,180,0.12);
  /* glow kept static to avoid box-shadow repaint */
}

/* === Scene Particles (petals day / fireflies night) === */
.th-particles{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.th-particle{position:absolute;pointer-events:none;animation:th-particle-fall linear infinite}
/* Day: falling petals */
.th-mode-day .th-particle{
  width:8px;height:8px;border-radius:50% 0 50% 0;
  background:rgba(220,180,180,0.7);
  box-shadow:0 0 4px rgba(220,160,160,0.3);
}
/* Night: fireflies */
.th-mode-night .th-particle{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,250,200,0.8);
  box-shadow:0 0 8px 3px rgba(255,240,150,0.5),0 0 16px 6px rgba(255,240,150,0.2);
}
@keyframes th-particle-fall{
  0%{transform:translate(0,0) rotate(0deg);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:0}
}

/* === Extra sky layer (Milky Way / clouds) === */
.th-sky-extra{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Milky Way band (night) */
.th-mode-night .th-sky-extra{
  background:
    radial-gradient(ellipse 60% 8% at 30% 20%, rgba(180,160,220,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 6% at 45% 28%, rgba(150,140,200,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 55% 7% at 55% 35%, rgba(160,150,210,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 5% at 70% 42%, rgba(140,130,190,0.04) 0%, transparent 70%);
}
/* Clouds (day) */
.th-mode-day .th-sky-extra{
  background:
    /* cloud 1 */
    radial-gradient(ellipse 120px 30px at 15% 18%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(ellipse 90px 22px at 12% 16%, rgba(255,255,255,0.55) 0%, transparent 100%),
    /* cloud 2 */
    radial-gradient(ellipse 140px 35px at 65% 12%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 100px 25px at 62% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
    /* cloud 3 */
    radial-gradient(ellipse 100px 28px at 40% 25%, rgba(255,255,255,0.35) 0%, transparent 100%),
    /* cloud 4 */
    radial-gradient(ellipse 160px 38px at 82% 22%, rgba(255,255,255,0.4) 0%, transparent 100%);
  animation:clouds-drift 30s linear infinite;
}
@keyframes clouds-drift{0%{transform:translateX(0)}100%{transform:translateX(-80px)}}

/* === Mountain layers (CSS clip-path) === */
.th-bg-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.th-bg-layer::before{content:'';position:absolute;bottom:0;left:0;right:0;height:35%;pointer-events:none}
.th-bg-layer::after{content:'';position:absolute;bottom:0;left:0;right:0;height:22%;pointer-events:none}
/* Night mountains — dark silhouettes */
.th-mode-night .th-bg-layer::before{
  background:linear-gradient(180deg, transparent 0%, rgba(8,12,28,0.5) 25%, rgba(6,10,22,0.75) 55%, rgba(4,8,18,0.9) 85%, rgba(3,6,14,0.95) 100%);
  clip-path:polygon(0% 100%,0% 62%,4% 52%,8% 58%,13% 44%,20% 55%,26% 38%,34% 50%,40% 32%,48% 45%,55% 28%,62% 42%,68% 25%,75% 40%,82% 30%,90% 42%,95% 35%,100% 48%,100% 100%);
}
.th-mode-night .th-bg-layer::after{
  background:linear-gradient(180deg, transparent 0%, rgba(4,8,16,0.45) 18%, rgba(3,6,12,0.85) 100%);
  clip-path:polygon(0% 100%,0% 75%,6% 66%,12% 73%,20% 60%,28% 68%,36% 54%,44% 63%,52% 50%,60% 60%,68% 46%,76% 56%,84% 48%,92% 58%,100% 50%,100% 100%);
}

/* Far mountains (night) */
.th-mountains-far{position:absolute;bottom:0;left:0;right:0;height:28%;z-index:1;pointer-events:none}
.th-mode-night .th-mountains-far{
  background:linear-gradient(180deg, transparent 0%, rgba(10,16,30,0.3) 40%, rgba(6,10,20,0.7) 100%);
  clip-path:polygon(0% 100%,0% 70%,3% 62%,8% 68%,15% 55%,22% 63%,30% 50%,38% 60%,45% 45%,53% 56%,60% 40%,68% 52%,75% 38%,83% 50%,90% 42%,96% 48%,100% 55%,100% 100%);
}

/* Near mountains (night) */
.th-mountains-near{position:absolute;bottom:0;left:0;right:0;height:18%;z-index:2;pointer-events:none}
.th-mode-night .th-mountains-near{
  background:linear-gradient(180deg, transparent 0%, rgba(4,6,14,0.5) 15%, rgba(2,4,10,0.9) 100%);
  clip-path:polygon(0% 100%,0% 82%,5% 76%,10% 80%,18% 70%,25% 76%,32% 66%,40% 74%,48% 62%,55% 72%,62% 58%,70% 68%,78% 54%,85% 64%,92% 56%,100% 65%,100% 100%);
}

/* Day mountains — ink-wash style (墨色山水) */
.th-mode-day .th-bg-layer::before{
  background:linear-gradient(180deg, transparent 0%, rgba(120,130,120,0.15) 25%, rgba(90,100,90,0.3) 55%, rgba(70,80,70,0.5) 85%, rgba(55,65,55,0.65) 100%);
  clip-path:polygon(0% 100%,0% 62%,4% 52%,8% 58%,13% 44%,20% 55%,26% 38%,34% 50%,40% 32%,48% 45%,55% 28%,62% 42%,68% 25%,75% 40%,82% 30%,90% 42%,95% 35%,100% 48%,100% 100%);
}
.th-mode-day .th-bg-layer::after{
  background:linear-gradient(180deg, transparent 0%, rgba(80,95,85,0.22) 18%, rgba(60,75,65,0.55) 100%);
  clip-path:polygon(0% 100%,0% 75%,6% 66%,12% 73%,20% 60%,28% 68%,36% 54%,44% 63%,52% 50%,60% 60%,68% 46%,76% 56%,84% 48%,92% 58%,100% 50%,100% 100%);
}
.th-mode-day .th-mountains-far{
  background:linear-gradient(180deg, transparent 0%, rgba(140,150,140,0.18) 40%, rgba(95,105,95,0.4) 100%);
  clip-path:polygon(0% 100%,0% 70%,3% 62%,8% 68%,15% 55%,22% 63%,30% 50%,38% 60%,45% 45%,53% 56%,60% 40%,68% 52%,75% 38%,83% 50%,90% 42%,96% 48%,100% 55%,100% 100%);
}
.th-mode-day .th-mountains-near{
  background:linear-gradient(180deg, transparent 0%, rgba(75,88,78,0.22) 15%, rgba(55,68,58,0.6) 100%);
  clip-path:polygon(0% 100%,0% 82%,5% 76%,10% 80%,18% 70%,25% 76%,32% 66%,40% 74%,48% 62%,55% 72%,62% 58%,70% 68%,78% 54%,85% 64%,92% 56%,100% 65%,100% 100%);
}

/* Ground layer (grass/floor) */
.th-ground{position:absolute;bottom:0;left:0;right:0;height:12%;z-index:3;pointer-events:none}
.th-mode-night .th-ground{
  background:linear-gradient(180deg, transparent 0%, rgba(8,12,8,0.3) 30%, rgba(10,14,10,0.7) 70%, rgba(6,10,6,0.9) 100%);
}
.th-mode-day .th-ground{
  background:linear-gradient(180deg, transparent 0%, rgba(140,155,135,0.15) 30%, rgba(115,130,110,0.4) 70%, rgba(95,110,90,0.55) 100%);
}

.teahouse-scene canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* --- Tea Table (beautified) --- */
/* Side tables (decorative background) */
.th-table-side{position:absolute;z-index:4;pointer-events:none;opacity:.55;transform:scale(.7)}
.th-table-side-l{bottom:22%;left:8%}
.th-table-side-r{bottom:22%;right:8%}
.th-table-side .th-table-surface{width:160px;height:80px;background:linear-gradient(180deg,#c8b898,#b8a888,#a89878);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.15)}
.th-table-side .th-table-wood{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:30px;height:16px;background:linear-gradient(180deg,#7a5a3a,#5a3a20);border-radius:0 0 5px 5px;box-shadow:0 3px 6px rgba(0,0,0,0.1)}
.th-table-side .th-teacup{position:absolute;top:-8px;font-size:14px}
.th-table-side-l .th-teacup{left:50%;transform:translateX(-50%)}
.th-table-side-r .th-teacup{right:50%;transform:translateX(50%)}
/* Side tables hidden on mobile */
@media(max-width:500px){.th-table-side{display:none}}

.th-table{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none}
.th-table-surface{width:220px;height:110px;background:linear-gradient(180deg,#d4c0a0,#c4b090,#b8a080,#a89070);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,0.2),inset 0 2px 0 rgba(255,255,255,0.2);position:relative}
.th-table-surface::after{content:'';position:absolute;top:6px;left:10px;right:10px;height:2px;background:rgba(255,255,255,0.2);border-radius:1px}
/* Table leg */
.th-table-wood{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);width:40px;height:20px;background:linear-gradient(180deg,#8b6b4a,#6b4b30);border-radius:0 0 6px 6px;box-shadow:0 4px 8px rgba(0,0,0,0.15)}
/* Teapot */
.th-teapot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.15));z-index:2;animation:teapot-steam 3s ease-in-out infinite}
@keyframes teapot-steam{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-5px)}}
.th-teacup{position:absolute;bottom:12px;font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15));z-index:1;transition:all .3s}
.th-teacup-l{left:22px}.th-teacup-r{right:22px}
.th-teacup-l.active{animation:cup-steam-l 2s ease-in-out infinite}
.th-teacup-r.active{animation:cup-steam-r 2s ease-in-out infinite}
@keyframes cup-steam-l{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes cup-steam-r{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(3deg)}}
/* Cushions */
.th-cushion{position:absolute;width:70px;height:20px;background:linear-gradient(180deg,#e8dcc8 0%,#d4c5b2 50%,#c9b896 100%);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.12),inset 0 2px 4px rgba(255,255,255,0.3)}
.th-cushion-l{bottom:-30px;left:-15px}.th-cushion-r{bottom:-30px;right:-15px}
.th-table-glow{position:absolute;inset:-35px;border-radius:50%;border:2px dashed rgba(196,30,58,0.25);animation:glow-pulse 1.5s ease-in-out infinite;pointer-events:none;display:none}
.th-table-glow.active{display:block}
@keyframes glow-pulse{0%,100%{border-color:rgba(196,30,58,0.15);transform:scale(1)}50%{border-color:rgba(196,30,58,0.45);transform:scale(1.06)}}

/* ===== Poet Actor ===== */
.poet-actor{position:absolute;z-index:10;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:filter .2s;pointer-events:auto;will-change:transform,left,top;transform:translateZ(0)}
.poet-actor:active{cursor:grabbing}
.poet-actor.dragging{filter:drop-shadow(0 8px 24px rgba(0,0,0,0.3));z-index:30;transition:none}
.poet-actor.seated{transition:left .4s cubic-bezier(.34,1.56,.64,1),top .4s cubic-bezier(.34,1.56,.64,1)}
.poet-actor.seated .pa-mat{display:none}

/* --- Mat --- */
.pa-mat{width:68px;height:16px;background:linear-gradient(135deg,#c9b896,#d4c5b2,#c9b896);border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,0.1);order:1}

/* --- Body (head INSIDE body — Q版 2:1 ratio: tiny body, big head) --- */
.pa-body{width:46px;height:40px;border-radius:50%;position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.12),inset 0 -5px 10px rgba(0,0,0,0.06);transition:transform .3s;order:0}
.pa-build-slim .pa-body{width:40px;height:36px}
.pa-build-athletic .pa-body{width:48px;height:38px}
.pa-build-stout .pa-body{width:54px;height:40px}
.pa-build-plump .pa-body{width:58px;height:40px}
.pa-build-tall-thin .pa-body{width:40px;height:44px}
.pa-robe-wide .pa-body{box-shadow:0 4px 14px rgba(0,0,0,0.1),inset 0 -6px 10px rgba(0,0,0,0.06)}
.pa-robe-narrow .pa-body{border-radius:42%}
.pa-robe-layered .pa-body{box-shadow:0 4px 10px rgba(0,0,0,0.12),0 0 0 3px rgba(255,255,255,0.2)}
.pa-robe-short .pa-body{height:34px;border-radius:45%}

/* --- Collar & Sash --- */
.pa-collar{width:18px;height:4px;background:rgba(255,255,255,0.9);border-radius:2px;position:absolute;top:-1px;left:50%;transform:translateX(-50%);z-index:2}
.pa-sash{width:100%;height:3px;position:absolute;bottom:10px;left:0;border-radius:2px;opacity:.85}

/* --- Arms (shorter for Q版 tiny body) --- */
.pa-arm{position:absolute;width:10px;height:24px;border-radius:5px 5px 8px 8px;top:4px;z-index:3;transform-origin:top center;transition:transform .4s ease-out}
.pa-arm-l{left:-10px;transform:rotate(15deg)}
.pa-arm-r{right:-10px;transform:rotate(-15deg)}
.pa-hand{width:8px;height:8px;border-radius:50%;background:rgba(255,220,190,0.85);position:absolute;bottom:-3px;left:1px}
/* Arm animation states */
.poet-actor.pa-wave .pa-arm-r{animation:pa-arm-wave .6s ease-in-out 2}
.poet-actor.pa-raise-l .pa-arm-l{transform:rotate(-60deg) translateY(-12px)}
.poet-actor.pa-raise-r .pa-arm-r{transform:rotate(60deg) translateY(-12px)}
.poet-actor.pa-toast .pa-arm-r{transform:rotate(50deg) translateY(-16px) translateX(-4px)}
.poet-actor.pa-point-fwd .pa-arm-r{transform:rotate(25deg) translateY(-8px) translateX(4px)}
.poet-actor.pa-both-arms-up .pa-arm-l{transform:rotate(-55deg) translateY(-14px)}
.poet-actor.pa-both-arms-up .pa-arm-r{transform:rotate(55deg) translateY(-14px)}
@keyframes pa-arm-wave{0%,100%{transform:rotate(-15deg)}30%{transform:rotate(35deg) translateY(-10px)}60%{transform:rotate(-20deg)}80%{transform:rotate(40deg) translateY(-14px)}}

/* --- Head (BIG for Q版 2:1 cuteness) --- */
.pa-head{width:72px;height:72px;border-radius:50%;position:absolute;top:-50px;left:50%;transform:translateX(-50%);box-shadow:0 3px 10px rgba(0,0,0,0.1);z-index:2}
/* Eyes: BIG sparkly Q版 — 35% of face width */
.pa-eyes-wrap{position:absolute;top:12px;left:0;right:0;height:24px;z-index:5}
.pa-eye{width:22px;height:25px;border-radius:50%;background:#fff;position:absolute;top:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,0.06)}
.pa-eye-l{left:8px}.pa-eye-r{right:8px}
.pa-iris{width:12px;height:13px;border-radius:50%;background:#1a1a1a;position:absolute;bottom:1px;left:5px}
.pa-shine{width:5px;height:6px;border-radius:50%;background:#fff;position:absolute;top:1px;right:2px}
.pa-shine2{width:3px;height:3px;border-radius:50%;background:#fff;position:absolute;top:7px;left:1px}
/* Eyebrows — soft arch for cute expression */
.pa-eye::before{content:'';position:absolute;top:-5px;left:-2px;width:24px;height:3px;background:rgba(0,0,0,0.22);border-radius:2px}
.pa-blink .pa-eye{animation:pa-blink-anim .15s ease-in-out}
@keyframes pa-blink-anim{0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.08)}}
/* Mouth — tiny cute dot */
.pa-mouth{width:7px;height:7px;border-radius:50%;background:rgba(210,140,140,0.85);position:absolute;top:28px;left:32px;z-index:5}
.pa-mouth-f{width:9px;height:6px;border-radius:6px;background:rgba(220,150,150,0.85);position:absolute;top:28px;left:31px;z-index:5}
.pa-speaking .pa-mouth{animation:mouth-talk .25s ease-in-out infinite}
@keyframes mouth-talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2.8)}}
/* Beard — repositioned for bigger head */
.pa-beard{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);z-index:4}
.pa-beard-flowing{width:44px;height:26px;border-radius:50%;background:rgba(200,200,200,0.6)}
.pa-beard-goatee{width:24px;height:18px;border-radius:0 0 50% 50%;background:rgba(180,180,180,0.6)}
.pa-beard-full{width:46px;height:24px;border-radius:50%;background:rgba(180,180,180,0.7);box-shadow:0 3px 0 rgba(160,160,160,0.3)}
.pa-beard-stubble{width:32px;height:11px;border-radius:50%;background:rgba(180,180,180,0.45)}
.pa-beard-none{display:none}
.pa-beard-mustache{width:28px;height:9px;border-radius:50%;background:rgba(170,170,170,0.55);margin-bottom:6px}
/* Cheeks — BIG round Q版 blush */
.pa-cheek{width:18px;height:10px;border-radius:50%;background:rgba(255,150,165,0.55);position:absolute;top:21px;z-index:1}
.pa-cheek-l{left:-3px}.pa-cheek-r{right:-3px}

/* --- Hats (scaled for 72px head) --- */
.pa-hat{position:absolute;z-index:3;left:50%;transform:translateX(-50%)}
.pa-hat-soft-cap{top:-14px;width:72px;height:16px;border-radius:5px;left:-0px;transform:none}
.pa-hat-top{width:22px;height:28px;border-radius:7px 7px 0 0;position:absolute;top:-26px;left:25px}
.pa-hat-knob{width:12px;height:12px;border-radius:50%;position:absolute;top:-32px;left:30px}
.pa-hat-tall-official{top:-36px;width:74px;height:34px;border-radius:4px 4px 2px 2px;left:-1px;transform:none}
.pa-hat-tall-official::after{content:'';position:absolute;top:-9px;left:12px;right:12px;height:11px;background:inherit;border-radius:3px 3px 0 0;opacity:.8}
.pa-hat-wide-scholar{top:-18px;width:82px;height:20px;border-radius:4px;left:-5px;transform:none}
.pa-hat-wide-scholar::after{content:'';position:absolute;top:-13px;left:14px;right:14px;height:24px;background:inherit;border-radius:7px 7px 0 0;opacity:.85}
.pa-hat-hood{top:-14px;width:74px;height:42px;border-radius:50% 50% 30% 30%;left:-1px;transform:none}
.pa-hat-hood::after{content:'';position:absolute;bottom:0;left:-5px;right:-5px;height:14px;background:inherit;border-radius:0 0 9px 9px}
.pa-hat-crown{top:-24px;width:78px;height:22px;border-radius:2px;border:2px solid rgba(255,215,0,0.3);left:-3px;transform:none}
.pa-hat-crown::after{content:'';position:absolute;top:-18px;left:24px;right:24px;height:20px;background:inherit;border-radius:2px}
.pa-hat-cloth-band{top:-6px;width:68px;height:8px;border-radius:3px;left:2px;transform:none}
.pa-hat-cloth-band::after{content:'';position:absolute;top:-10px;left:24px;right:24px;height:16px;background:inherit;border-radius:50%;opacity:.6}
.pa-hat-none{display:none}
/* === Hairstyles (visible around face, behind hat) === */
.pa-hair-wrap{position:absolute;inset:-10px -6px -6px -6px;z-index:1;pointer-events:none}
.pa-hair-side{position:absolute;top:2px;width:14px;height:28px;border-radius:7px;opacity:.7}
.pa-hair-side-l{left:-3px;background:inherit}.pa-hair-side-r{right:-3px;background:inherit}
.pa-hair-flowing .pa-hair-side{width:20px;height:36px;border-radius:8px;opacity:.8}
.pa-hair-flowing .pa-hair-side-l{left:-6px}.pa-hair-flowing .pa-hair-side-r{right:-6px}
.pa-hair-balding .pa-hair-side{width:8px;height:16px;border-radius:4px;opacity:.4;top:6px}
.pa-hair-balding .pa-hair-side-l{left:2px}.pa-hair-balding .pa-hair-side-r{right:2px}
.pa-hair-long .pa-hair-side{width:22px;height:42px;border-radius:9px;opacity:.85}
.pa-hair-long .pa-hair-side-l{left:-7px}.pa-hair-long .pa-hair-side-r{right:-7px}
.pa-hair-messy .pa-hair-side{width:18px;height:30px;border-radius:40% 50% 30% 60%;opacity:.75}
.pa-hair-messy .pa-hair-side-l{left:-5px}.pa-hair-messy .pa-hair-side-r{right:-5px}
.pa-hair-tied .pa-hair-side{width:10px;height:20px;border-radius:4px;opacity:.65;top:4px}
.pa-hair-tied .pa-hair-side-l{left:0px}.pa-hair-tied .pa-hair-side-r{right:0px}
/* Female full top hair */
.pa-hair-full{position:absolute;top:-8px;left:-2px;width:76px;height:24px;border-radius:13px 13px 0 0;z-index:1;opacity:.9}

/* --- Props & Accessories (repositioned for smaller body) --- */
.pa-prop{position:absolute;font-size:18px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.15));z-index:4;pointer-events:none}
.pa-prop-sword{right:-8px;top:4px}.pa-prop-book{right:-6px;top:6px}.pa-prop-cup{right:-5px;top:3px}
.pa-prop-spear{right:-10px;top:2px}.pa-prop-fan{right:-6px;top:5px}.pa-prop-hoe{right:-8px;top:3px}
.pa-prop-brush{right:-5px;top:5px}.pa-prop-pipa{right:-6px;top:5px}
.pa-prop-scroll{right:-6px;top:7px;font-size:15px}.pa-prop-staff{right:-10px;top:0px;font-size:18px}.pa-prop-flute{right:-3px;top:4px;font-size:15px}
.pa-accessory{position:absolute;z-index:3;pointer-events:none}
.pa-accessory-wine-gourd{right:-12px;bottom:4px;font-size:13px;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1))}
.pa-accessory-jade-pendant{left:-6px;bottom:6px;width:6px;height:10px;border-radius:50%;background:linear-gradient(135deg,#5b8c7e,#8bc4ae);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.pa-accessory-scroll{right:-6px;top:10px;width:6px;height:15px;border-radius:3px;background:linear-gradient(180deg,#f5ecd7,#e8dcc8);border:1px solid var(--border)}
.pa-accessory-fan-hold{right:-6px;top:7px;font-size:14px}
.pa-accessory-flower{right:-3px;top:-6px;font-size:12px}
.pa-accessory-none{display:none}

/* --- Name Label --- */
.pa-label{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:2px;z-index:1;order:2}
.pa-name{font-size:14px;font-weight:800;color:#fff;font-family:var(--serif);line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,0.5);letter-spacing:1px}
.pa-title{font-size:11px;color:rgba(255,255,255,0.8);font-family:var(--sans);text-shadow:0 1px 2px rgba(0,0,0,0.4)}

/* --- Legs (tiny for Q版) --- */
.pa-legs{position:absolute;bottom:-4px;left:4px;right:4px;z-index:0}
.pa-leg{width:16px;height:8px;border-radius:50%;position:absolute;bottom:0;opacity:.7}
.pa-leg-l{left:2px;transform:rotate(-22deg)}.pa-leg-r{right:2px;transform:rotate(22deg)}

/* --- Idle — cute bounce + head bob --- */
.poet-actor.idle .pa-body{animation:pa-bounce 2.8s ease-in-out infinite}
.poet-actor.idle .pa-head{animation:pa-head-bob 2.8s ease-in-out infinite}
@keyframes pa-bounce{0%,100%{transform:translateY(0) scaleY(1)}15%{transform:translateY(-7px) scaleY(0.94)}30%{transform:translateY(0) scaleY(1.03)}45%{transform:translateY(-3px) scaleY(0.97)}60%{transform:translateY(0) scaleY(1)}}
@keyframes pa-head-bob{0%,100%{transform:translateX(-50%) translateY(0)}15%{transform:translateX(-50%) translateY(-5px)}30%{transform:translateX(-50%) translateY(0)}45%{transform:translateX(-50%) translateY(-2px)}60%{transform:translateX(-50%) translateY(0)}}
.poet-actor.look-left .pa-iris{left:1px}.poet-actor.look-right .pa-iris{left:5px}
/* New idle: look-up (glance upward) */
.poet-actor.look-up .pa-iris{top:-1px;left:3px;transition:all .3s}
.poet-actor.look-up .pa-head{animation:pa-head-up .4s ease-out!important}
@keyframes pa-head-up{0%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(-8deg)}100%{transform:translateX(-50%) rotate(-5deg)}}
/* Blink (quick eye close) */
.poet-actor.blink .pa-eye{animation:pa-blink-anim .15s ease-in-out}
/* Seated sip-tea: arm raises to mouth */
.poet-actor.sip-tea .pa-arm-r{transform:rotate(55deg) translateY(-10px) translateX(-3px);transition:transform .4s ease-out}
.poet-actor.sip-tea .pa-head{animation:pa-sip-head 1.1s ease-in-out!important}
@keyframes pa-sip-head{0%,100%{transform:translateX(-50%) rotate(0)}40%{transform:translateX(-50%) rotate(-12deg)}70%{transform:translateX(-50%) rotate(-5deg)}}
/* Seated stretch: body elongates + arms reach up */
.poet-actor.stretch .pa-body{animation:pa-stretch-body 1.5s ease-in-out!important}
.poet-actor.stretch .pa-head{animation:pa-stretch-head 1.5s ease-in-out!important}
.poet-actor.stretch .pa-arm-l{transform:rotate(-35deg) translateY(-18px);transition:transform .5s ease-out}
.poet-actor.stretch .pa-arm-r{transform:rotate(35deg) translateY(-18px);transition:transform .5s ease-out}
@keyframes pa-stretch-body{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-10px) scaleY(1.08)}60%{transform:translateY(-6px) scaleY(1.04)}}
@keyframes pa-stretch-head{0%,100%{transform:translateX(-50%) translateY(0)}30%{transform:translateX(-50%) translateY(-8px)}60%{transform:translateX(-50%) translateY(-4px)}}

/* ===== STRONG Action Animations (use !important to override idle) ===== */
/* ===== ACTION ANIMATIONS v3 — Natural, Differentiated ===== */

/* 1. 抚须 — gentle sway + subtle head nod */
.poet-actor.action-stroke-beard .pa-body{animation:act-beard 1.2s ease-in-out!important}
.poet-actor.action-stroke-beard .pa-head{animation:act-beard-head 1.2s ease-in-out!important}
@keyframes act-beard{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-3px) rotate(-2deg)}35%{transform:translateY(-2px) rotate(-4deg)}55%{transform:translateY(0) rotate(-2deg)}75%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes act-beard-head{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(-50%) rotate(-5deg)}40%{transform:translateX(-50%) rotate(-8deg)}60%{transform:translateX(-50%) rotate(-3deg)}80%{transform:translateX(-50%) rotate(-6deg)}}

/* 2. 举杯 — arm swings up, body leans back slightly */
.poet-actor.action-raise-cup .pa-body{animation:act-cup .9s cubic-bezier(.34,1.56,.64,1)!important}
.poet-actor.action-raise-cup .pa-head{animation:act-cup-head .9s ease-out!important}
@keyframes act-cup{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-12deg)}50%{transform:translateY(-3px) rotate(-8deg)}75%{transform:translateY(-5px) rotate(-4deg)}}
@keyframes act-cup-head{0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(-50%) rotate(-15deg)}60%{transform:translateX(-50%) rotate(-5deg)}}

/* 3. 大笑 — body bounces erratically, head shakes */
.poet-actor.action-laugh .pa-body{animation:act-laugh 1.4s ease-in-out!important}
.poet-actor.action-laugh .pa-head{animation:act-laugh-head .9s ease-in-out!important}
@keyframes act-laugh{0%,100%{transform:translateY(0) rotate(0) scale(1)}6%{transform:translateY(-18px) rotate(-6deg) scale(1.06)}12%{transform:translateY(-2px) rotate(3deg) scale(1.02)}20%{transform:translateY(-12px) rotate(-4deg) scale(1.04)}28%{transform:translateY(0) rotate(2deg) scale(1)}38%{transform:translateY(-14px) rotate(-5deg) scale(1.05)}46%{transform:translateY(-4px) rotate(1deg) scale(1.01)}54%{transform:translateY(-8px) rotate(-3deg) scale(1.03)}65%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes act-laugh-head{0%,100%{transform:translateX(-50%) rotate(0)}15%{transform:translateX(-50%) rotate(-10deg)}30%{transform:translateX(-50%) rotate(8deg)}50%{transform:translateX(-50%) rotate(-5deg)}70%{transform:translateX(-50%) rotate(12deg)}85%{transform:translateX(-50%) rotate(0)}}

/* 4. 拱手/鞠躬 — deep bow with anticipation */
.poet-actor.action-bow .pa-body{animation:act-bow 1.1s cubic-bezier(.68,-.2,.265,1.2)!important}
.poet-actor.action-bow .pa-head{animation:act-bow-head 1.1s ease-out!important}
@keyframes act-bow{0%,100%{transform:rotate(0) translateY(0)}15%{transform:rotate(5deg) translateY(-6px)}40%{transform:rotate(-30deg) translateY(4px)}55%{transform:rotate(-28deg) translateY(6px)}70%{transform:rotate(-10deg) translateY(2px)}90%{transform:rotate(3deg) translateY(0)}}
@keyframes act-bow-head{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(-50%) rotate(5deg)}45%{transform:translateX(-50%) rotate(-20deg)}60%{transform:translateX(-50%) rotate(-15deg)}80%{transform:translateX(-50%) rotate(0)}}

/* 5. 沉思 — head tilts slowly, body stays almost still */
.poet-actor.action-think .pa-body{animation:act-think 1.5s ease-in-out!important}
.poet-actor.action-think .pa-head{animation:act-think-head 1.5s ease-in-out!important}
@keyframes act-think{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-3deg)}70%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes act-think-head{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-18deg)}55%{transform:translateX(-50%) rotate(-15deg)}75%{transform:translateX(-50%) rotate(-20deg)}}

/* 6. 叹息 — body deflates downward, head drops, slow recovery */
.poet-actor.action-sigh .pa-body{animation:act-sigh 1.6s ease-in-out!important}
.poet-actor.action-sigh .pa-head{animation:act-sigh-head 1.6s ease-in-out!important}
@keyframes act-sigh{0%,100%{transform:translateY(0) scaleY(1)}20%{transform:translateY(-4px) scaleY(1.04)}45%{transform:translateY(6px) scaleY(0.9)}70%{transform:translateY(2px) scaleY(0.95)}90%{transform:translateY(-2px) scaleY(1.02)}}
@keyframes act-sigh-head{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-5deg)}50%{transform:translateX(-50%) rotate(-20deg) translateY(4px)}75%{transform:translateX(-50%) rotate(-10deg) translateY(2px)}}

/* 7. 点头 — quick, sharp nod */
.poet-actor.action-nod .pa-body{animation:act-nod .5s ease-in-out!important}
.poet-actor.action-nod .pa-head{animation:act-nod-head .5s ease-in-out!important}
@keyframes act-nod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-10deg)}60%{transform:translateY(2px) rotate(-2deg)}80%{transform:translateY(-3px) rotate(-4deg)}}
@keyframes act-nod-head{0%,100%{transform:translateX(-50%) rotate(0)}35%{transform:translateX(-50%) rotate(-15deg)}65%{transform:translateX(-50%) rotate(-5deg)}}

/* 8. 望/看 — body leans forward, head tilts */
.poet-actor.action-look .pa-body{animation:act-look .9s ease-out!important}
.poet-actor.action-look .pa-head{animation:act-look-head .9s ease-out!important}
@keyframes act-look{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-8px) rotate(-8deg)}70%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes act-look-head{0%,100%{transform:translateX(-50%) rotate(0)}35%{transform:translateX(-50%) rotate(-10deg)}65%{transform:translateX(-50%) rotate(-15deg)}}

/* 9. 指向 — body leans forward, one arm extends */
.poet-actor.action-point .pa-body{animation:act-point .7s cubic-bezier(.34,1.56,.64,1)!important}
.poet-actor.action-point .pa-head{animation:act-point-head .7s ease-out!important}
@keyframes act-point{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-15deg)}50%{transform:translateY(-6px) rotate(-18deg)}75%{transform:translateY(-3px) rotate(-8deg)}}
@keyframes act-point-head{0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(-50%) rotate(-10deg)}55%{transform:translateX(-50%) rotate(-5deg)}}

/* 10. 摇头 — only head moves, quick side-to-side */
.poet-actor.action-shake .pa-head{animation:act-shake .6s ease-in-out!important}
@keyframes act-shake{0%,100%{transform:translateX(-50%) rotate(0)}15%{transform:translateX(-55%) rotate(-14deg)}35%{transform:translateX(-45%) rotate(12deg)}55%{transform:translateX(-52%) rotate(-8deg)}75%{transform:translateX(-48%) rotate(6deg)}}

/* 11. 踱步 — body bounces side to side like walking */
.poet-actor.action-walk .pa-body{animation:act-walk 1s ease-in-out!important}
@keyframes act-walk{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-10px) rotate(-4deg)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(10px) rotate(4deg)}}

/* 12. 挥笔 — arm sweeps, body leans slightly forward */
.poet-actor.action-write .pa-body{animation:act-write 1s ease-in-out!important}
.poet-actor.action-write .pa-arm-r{animation:act-write-arm .4s ease-in-out 2!important}
@keyframes act-write{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(-5deg)}60%{transform:translateY(-3px) rotate(-2deg)}}
@keyframes act-write-arm{0%,100%{transform:rotate(15deg)}25%{transform:rotate(40deg) translateY(-8px)}50%{transform:rotate(10deg) translateY(-2px)}75%{transform:rotate(35deg) translateY(-6px)}}

/* 13. 吟诵 — body sways rhythmically, arm raised */
.poet-actor.action-recite .pa-body{animation:act-recite 1.3s ease-in-out!important}
.poet-actor.action-recite .pa-head{animation:act-recite-head 1.3s ease-in-out!important}
@keyframes act-recite{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-14px) rotate(-5deg)}40%{transform:translateY(-6px) rotate(3deg)}60%{transform:translateY(-16px) rotate(-3deg)}80%{transform:translateY(-4px) rotate(2deg)}}
@keyframes act-recite-head{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(-50%) rotate(-8deg)}50%{transform:translateX(-50%) rotate(5deg)}75%{transform:translateX(-50%) rotate(-5deg)}}

/* 14. 品茶 — gentle sip, body leans forward slightly */
.poet-actor.action-sip .pa-body{animation:act-sip .8s ease-in-out!important}
.poet-actor.action-sip .pa-head{animation:act-sip-head .8s ease-in-out!important}
@keyframes act-sip{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-6px) rotate(-8deg)}65%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes act-sip-head{0%,100%{transform:translateX(-50%) rotate(0)}40%{transform:translateX(-50%) rotate(-12deg)}70%{transform:translateX(-50%) rotate(-5deg)}}

/* Click speech popup */
.pa-click-speech{position:absolute;top:-20px;left:50%;transform:translateX(-50%);z-index:60;background:#fff;border:2px solid var(--accent);border-radius:12px;padding:4px 12px;font-size:14px;font-family:var(--sans);font-weight:700;white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,0.15);animation:pa-bub-pop .4s ease-out;pointer-events:none}
@keyframes pa-bub-pop{0%{transform:translateX(-50%) scale(0);opacity:0}60%{transform:translateX(-50%) scale(1.15)}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* ===== PER-POET SPEECH BUBBLE (above head) ===== */
.pa-bubble{position:absolute;z-index:50;pointer-events:auto;user-select:text;-webkit-user-select:text;animation:pa-bub-in .3s ease-out}
.pa-bubble-inner{
  background:linear-gradient(180deg,rgba(254,249,240,0.97) 0%,rgba(250,243,230,0.95) 100%);
  border:1.5px solid var(--border-light);border-radius:16px;
  padding:14px 20px;font-size:16px;line-height:1.8;
  font-family:var(--serif);color:var(--ink);
  max-width:500px;min-width:180px;
  box-shadow:0 4px 16px rgba(28,25,20,0.06),inset 0 0 30px rgba(184,148,75,0.03);
  position:relative;word-break:break-word;
  /* Subtle paper fiber texture (on main element to avoid ::before conflict with arrow) */
  background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(184,148,75,0.02) 2px,rgba(184,148,75,0.02) 3px);
  background-color:#fff;
}
.pa-bubble-inner > *{position:relative;z-index:1}
/* TTS playing glow */
.pa-bubble.tts-playing .pa-bubble-inner{
  border-color:rgba(184,148,75,0.5);
  box-shadow:0 4px 16px rgba(28,25,20,0.06),0 0 20px rgba(184,148,75,0.12),0 0 40px rgba(184,148,75,0.06);
  transition:box-shadow .3s,border-color .3s;
}
/* Arrow default (center, used when both seated) */
.pa-bubble-inner::after{content:'';position:absolute;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff}
.pa-bubble-inner::before{content:'';position:absolute;bottom:-11px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid var(--border)}
/* Left poet → arrow points bottom-left (bubble extends RIGHT from poet) */
.pa-bubble-left .pa-bubble-inner::after{left:auto;right:24px;transform:none}
.pa-bubble-left .pa-bubble-inner::before{left:auto;right:23px;transform:none}
/* Right poet → arrow points bottom-right (bubble extends LEFT from poet) */
.pa-bubble-right .pa-bubble-inner::after{left:24px;right:auto;transform:none}
.pa-bubble-right .pa-bubble-inner::before{left:23px;right:auto;transform:none}
.pa-bubble.typing .pa-bubble-inner::after{content:'▌';display:inline;margin-left:2px;animation:pa-cursor .6s step-end infinite;opacity:.5;border:none;background:none;width:auto;height:auto;position:static}

/* Poet speaking: subtle continuous breathing */
.poet-actor.pa-speaking .pa-body{animation:pa-speak-breathe 1.5s ease-in-out infinite!important}
@keyframes pa-speak-breathe{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.04) scaleX(0.98)}}
/* Arm idle sway when speaking */
.poet-actor.pa-speaking .pa-arm-l{animation:pa-arm-idle-l 2s ease-in-out infinite!important}
.poet-actor.pa-speaking .pa-arm-r{animation:pa-arm-idle-r 2.2s ease-in-out infinite!important}
@keyframes pa-arm-idle-l{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(-25deg) translateY(-2px)}}
@keyframes pa-arm-idle-r{0%,100%{transform:rotate(15deg)}50%{transform:rotate(25deg) translateY(-2px)}}
@keyframes pa-cursor{0%,100%{opacity:.5}50%{opacity:0}}
@keyframes pa-bub-in{0%{opacity:0;transform:translateY(12px) scale(0.85)}40%{transform:translateY(-3px) scale(1.03)}70%{transform:translateY(1px) scale(0.99)}100%{opacity:1;transform:translateY(0) scale(1)}}
.pa-bubble-action{font-size:12px;color:var(--ink-lighter);font-family:var(--sans);font-weight:500;margin-top:4px;text-align:center}

/* ===== History Panel (left side) ===== */
.th-history{position:absolute;left:8px;top:80px;bottom:80px;width:200px;z-index:25;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto}
.th-history-title{font-size:13px;font-weight:700;color:#fff;font-family:var(--sans);padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.15);flex-shrink:0;letter-spacing:2px;text-align:center}
.th-history-body{flex:1;overflow-y:auto;padding:8px 10px}
.th-history-body::-webkit-scrollbar{width:3px}
.th-history-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:2px}
.th-hist-line{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;padding:6px 10px;background:rgba(255,255,255,0.08);border-radius:8px;animation:pa-bub-in .3s ease-out}
.th-hist-speaker{font-size:11px;font-weight:700;color:var(--gold-light);font-family:var(--sans);letter-spacing:1px}
.th-hist-text{font-size:12px;color:rgba(255,255,255,0.85);font-family:var(--sans);font-weight:500;line-height:1.5;word-break:break-word}

/* ===== Poet Selector (top right) ===== */
.th-selector{position:absolute;right:12px;top:70px;z-index:25;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);padding:6px 12px;border-radius:20px}
.th-sel-label{font-size:12px;color:rgba(255,255,255,0.7);font-family:var(--sans);white-space:nowrap}
.th-sel-vs{font-size:13px;color:rgba(255,255,255,0.5);font-family:var(--serif)}
.th-selector select{padding:4px 8px;border-radius:10px;border:1px solid rgba(255,255,255,0.3);background:rgba(0,0,0,0.3);color:#fff;font-size:13px;font-family:var(--sans);outline:none;max-width:100px}
.th-selector select option{background:#333;color:#fff}
.th-selector .th-btn{padding:4px 12px;font-size:12px}

/* --- Post-dialogue hint --- */
.th-post-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;background:rgba(0,0,0,0.7);color:#fff;font-size:15px;font-family:var(--sans);font-weight:700;padding:10px 20px;border-radius:20px;pointer-events:none;animation:th-post-in .4s ease-out;transition:opacity .5s;letter-spacing:1px}
@keyframes th-post-in{from{opacity:0;transform:translate(-50%,-50%) translateY(10px)}to{opacity:1;transform:translate(-50%,-50%) translateY(0)}}

/* --- Guide --- */
.th-guide{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);z-index:15;display:flex;flex-direction:column;align-items:center;gap:8px;animation:th-guide-bounce 2s ease-in-out infinite;pointer-events:none}
.th-guide-text{font-size:15px;color:#fff;font-family:var(--sans);font-weight:700;background:rgba(0,0,0,0.45);padding:8px 22px;border-radius:20px;text-shadow:0 1px 2px rgba(0,0,0,0.3);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.1)}
/* Hand gesture icon */
.th-guide-hand{font-size:28px;animation:th-hand-point 1.5s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
@keyframes th-hand-point{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-8px) rotate(-5deg)}60%{transform:translateY(2px) rotate(3deg)}}
.th-guide-arrow{font-size:18px;color:var(--red);animation:th-arrow-pulse 1.5s ease-in-out infinite}
@keyframes th-arrow-pulse{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}
@keyframes th-guide-bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.th-guide.hidden{display:none}
/* Cushion squash on seat */
.th-cushion{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.th-cushion.squashed{transform:scaleX(1.25) scaleY(0.6)}

/* --- Action Buttons --- */
.th-actions{position:absolute;bottom:16px;right:20px;z-index:25;display:flex;gap:8px}
.th-btn{padding:7px 18px;border:1px solid rgba(180,150,120,0.4);border-radius:20px;background:rgba(28,25,20,0.5);font-size:13px;font-family:var(--serif);font-weight:600;color:#fff;cursor:pointer;transition:all .2s;white-space:nowrap;letter-spacing:1px}
.th-btn:hover{background:rgba(196,30,58,0.75);border-color:rgba(196,30,58,0.5);transform:translateY(-1px)}
.th-btn-accent{background:var(--accent);border-color:var(--accent)}
.th-btn-accent:hover{background:var(--ink);border-color:var(--ink)}

/* --- Speak-for --- */
.th-speak-for{position:absolute;z-index:55;display:flex;gap:8px;align-items:center;animation:th-sf-in .25s ease-out;background:rgba(0,0,0,0.55);padding:10px 14px;border-radius:28px;backdrop-filter:blur(4px)}
@keyframes th-sf-in{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.th-speak-for input{padding:10px 18px;border:2px solid rgba(255,255,255,0.4);border-radius:22px;font-size:16px;font-family:var(--serif);width:240px;outline:none;background:rgba(255,255,255,0.92);color:var(--ink)}
.th-speak-for input:focus{border-color:#fff;background:#fff}
.th-speak-for input::placeholder{color:var(--ink-lighter);font-size:14px}
.th-speak-for button{padding:10px 18px;background:var(--red);color:#fff;border:none;border-radius:22px;font-size:15px;font-family:var(--serif);font-weight:600;cursor:pointer;white-space:nowrap;min-width:56px;transition:all .2s}
.th-speak-for button:hover{background:var(--ink);transform:scale(1.05)}
.th-speak-for button:last-child{background:transparent;border:1px solid rgba(255,255,255,0.4);min-width:36px;padding:10px 12px}
.th-speak-for button:last-child:hover{background:rgba(255,255,255,0.15)}
/* Mic button — override generic button styles, match input/send height */
.th-speak-for .th-mic-btn{width:40px;height:40px;min-width:0;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.08);font-size:18px;font-family:inherit;font-weight:400;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center}
.th-speak-for .th-mic-btn:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.6);transform:scale(1.06)}
.th-speak-for .th-mic-btn.th-mic-recording{background:rgba(196,30,58,0.75);border-color:rgba(255,60,80,0.7);box-shadow:0 0 0 0 rgba(220,50,60,0.5);animation:th-mic-pulse 1.2s ease-in-out infinite}
.th-speak-for .th-mic-btn.th-mic-processing{background:rgba(184,148,75,0.4);border-color:rgba(184,148,75,0.5);animation:th-mic-spin .8s linear infinite}
.th-speak-for .th-mic-btn.th-mic-hidden{display:none}
@media(max-width:500px){.th-speak-for input{width:160px;font-size:15px;padding:10px 14px}.th-speak-for button{padding:10px 14px;font-size:14px}}

/* --- Topic Exploration Input --- */
.th-topic-wrap{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:50;display:none;gap:8px;align-items:center;background:rgba(0,0,0,0.7);padding:8px 16px;border-radius:24px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);animation:th-topic-in .3s ease-out}
.th-topic-wrap.th-topic-active{display:flex}
.th-topic-label{color:rgba(255,255,255,0.9);font-size:14px;font-family:var(--sans);white-space:nowrap}
.th-topic-input{padding:8px 14px;border:2px solid var(--gold);border-radius:20px;font-size:14px;font-family:var(--sans);width:180px;outline:none;background:rgba(255,255,255,0.9);color:var(--ink)}
.th-topic-input:focus{border-color:var(--accent)}
.th-topic-input::placeholder{color:#999}
.th-topic-go{padding:8px 16px;background:var(--gold);color:#fff;border:none;border-radius:20px;font-size:13px;font-family:var(--sans);font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s}
.th-topic-go:hover{background:var(--accent)}
@keyframes th-topic-in{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* --- Skip hint --- */
.th-skip-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:30;color:rgba(255,255,255,0.5);font-size:12px;font-family:var(--sans);pointer-events:none;animation:th-post-in .4s ease-out;letter-spacing:1px}

/* --- Sparkle --- */
.th-sparkle{position:absolute;pointer-events:none;z-index:50;animation:th-sparkle-fly 1s ease-out forwards}
@keyframes th-sparkle-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}

/* --- Mini Poet hide on teahouse --- */
body.on-teahouse #miniPoet{display:none!important}

/* ===== Lanterns (CSS-only, glow on night/dusk) ===== */
.th-lantern{position:absolute;z-index:6;pointer-events:none;font-size:32px;filter:drop-shadow(0 0 8px rgba(255,200,100,0.5));transition:filter .8s,opacity .8s}
.th-lantern-l1{top:10%;left:6%}.th-lantern-l2{top:20%;left:4%}
.th-lantern-r1{top:10%;right:6%}.th-lantern-r2{top:20%;right:4%}
.th-mode-day .th-lantern{filter:drop-shadow(0 0 0px transparent);opacity:.4}
.th-mode-dusk .th-lantern{filter:drop-shadow(0 0 12px rgba(255,160,60,0.7))}

/* Lantern sway animation */
@keyframes lantern-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.th-lantern-l1,.th-lantern-r2{animation:lantern-sway 4s ease-in-out infinite;transform-origin:top center}
.th-lantern-l2,.th-lantern-r1{animation:lantern-sway 3.5s ease-in-out .8s infinite;transform-origin:top center}

/* ===== Tea smoke wisps from teapot (enhanced multi-stream) ===== */
.th-teapot::after{
  content:'';position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:20px;height:30px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.35) 0%, transparent 70%);
  border-radius:50%;
  animation:tea-steam 2.2s ease-out infinite;
  pointer-events:none;
  /* Extra wisps via box-shadow (offset, blurred, semi-transparent) */
  box-shadow:
    7px -6px 0 -5px rgba(255,255,255,0.18),
    -8px -10px 0 -4px rgba(255,255,255,0.14),
    2px -16px 0 -3px rgba(255,255,255,0.1);
}
/* Second steam pulse via table-surface pseudo */
.th-table-surface::before{
  content:'';position:absolute;top:-20px;left:calc(50% - 3px);
  width:14px;height:22px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, transparent 70%);
  border-radius:50%;z-index:1;pointer-events:none;
  animation:tea-steam2 2.8s ease-out .8s infinite;
}
@keyframes tea-steam{
  0%{opacity:0;transform:translateX(-50%) translateY(0) scale(0.7) rotate(0deg)}
  25%{opacity:.55;transform:translateX(-52%) translateY(-10px) scale(1.1) rotate(-3deg)}
  55%{opacity:.3;transform:translateX(-48%) translateY(-22px) scale(1.4) rotate(2deg)}
  100%{opacity:0;transform:translateX(-50%) translateY(-38px) scale(1.8) rotate(0deg)}
}
@keyframes tea-steam2{
  0%{opacity:0;transform:translateX(-50%) translateY(0) scale(0.6)}
  30%{opacity:.4;transform:translateX(-45%) translateY(-14px) scale(1)}
  60%{opacity:.2;transform:translateX(-55%) translateY(-28px) scale(1.3)}
  100%{opacity:0;transform:translateX(-50%) translateY(-42px) scale(1.6)}
}

/* ===== Sit-down ripple (enhanced) ===== */
@keyframes cushion-bounce{
  0%{transform:scale(1)}30%{transform:scale(1.25)}50%{transform:scale(0.9)}70%{transform:scale(1.08)}100%{transform:scale(1)}
}
.poet-actor.just-seated .pa-body{animation:pa-seat-bounce .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pa-seat-bounce{0%{transform:translateY(-20px) scale(0.8)}60%{transform:translateY(4px) scale(1.05)}100%{transform:translateY(0) scale(1)}}

/* Table glow pulse on dialogue */
.th-table-glow.active{display:block;animation:glow-pulse 1.5s ease-in-out infinite}

/* ===== Responsive ===== */
/* Tablet (501px-1024px) — comfortable touch targets, scaled scene */
@media(min-width:501px) and (max-width:1024px){
  .th-table-surface{width:200px;height:100px}
  .poet-actor{transform:scale(.88);min-width:80px}
  .pa-bubble-inner{max-width:360px;font-size:15px;padding:11px 18px}
  .th-history{width:160px;left:6px}
  .th-selector{right:6px;top:65px;gap:6px}
  .th-selector select{max-width:90px;font-size:13px;min-height:44px}
  .th-btn{padding:8px 18px;font-size:14px;min-height:44px}
  #teahouse .section-title{font-size:28px}
  #teahouse .section-desc{font-size:14px}
  /* Speak-for on tablet */
  .th-speak-for input{width:200px;font-size:16px}
  .th-speak-for button{padding:11px 18px;font-size:15px;min-height:44px}
  /* Poet selector touch-friendly */
  .th-selector select{min-height:44px}
}

@media(max-width:1024px){
  .th-table-surface{width:180px;height:90px}
  .pa-bubble-inner{max-width:320px;font-size:14px;padding:10px 16px}
  .th-history{width:150px;left:4px}
  .th-selector{right:4px;top:60px;padding:4px 8px;gap:4px}
  .th-selector select{max-width:70px;font-size:11px}
  #teahouse .section-header{padding:8px 20px}
  #teahouse .section-title{font-size:26px}
}
@media(max-width:500px){
  #teahouse{min-height:480px;max-height:600px}
  .th-table-surface{width:140px;height:70px}
  .th-table{bottom:18%}
  .poet-actor{transform:scale(.72);min-width:80px;min-height:120px}
  /* Larger touch target via pseudo-element (invisible hit area) */
  .poet-actor::after{content:'';position:absolute;inset:-35px;z-index:0}
  .poet-actor:active{transform:scale(.78)}
  /* Mobile tap-to-seat glow */
  .poet-actor:not(.seated) .pa-mat{box-shadow:0 0 18px rgba(255,200,100,0.5)}
  .pa-bubble-inner{max-width:240px;font-size:13px;padding:8px 12px;min-width:120px}
  .pa-name{font-size:12px}
  .th-guide-text{font-size:13px;padding:4px 12px}
  .th-btn{padding:6px 14px;font-size:12px;min-height:44px}
  .th-history{width:110px;left:2px;top:60px;bottom:60px;font-size:10px}
  .th-hist-text{font-size:11px}
  .th-selector{right:2px;top:50px;flex-wrap:wrap;max-width:140px}
  .th-selector select{max-width:80px;font-size:13px;min-height:44px}
  #teahouse .section-header{padding:8px 18px;border-radius:20px}
  #teahouse .section-title{font-size:24px;letter-spacing:3px}
  #teahouse .section-desc{font-size:13px}
  /* Mobile: tap-to-seat hint */
  .th-guide-mobile{display:block;text-align:center;padding:4px;font-size:11px;color:rgba(255,255,255,0.55);font-family:var(--sans)}
}

/* Action badge — floats above poet during animation */
.pa-action-badge{
  position:absolute;top:-45px;left:50%;transform:translateX(-50%);
  z-index:55;background:rgba(28,25,20,0.85);color:#fff;
  padding:3px 10px;border-radius:10px;font-size:11px;
  font-family:var(--serif);white-space:nowrap;pointer-events:none;
  animation:pa-badge-pop .8s ease-out forwards;
  letter-spacing:1px;
}
@keyframes pa-badge-pop{
  0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.5)}
  25%{opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.1)}
  50%{transform:translateX(-50%) translateY(-10px) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.9)}
}
/* Desktop: hide mobile hint */
.th-guide-mobile{display:none}
/* === Extra: Poet selector enhanced === */
.th-sel-avatar-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1px solid rgba(255,255,255,0.3)}
/* === Extra: Time-of-day indicator === */
.th-time-badge{position:absolute;top:75px;left:12px;z-index:20;font-size:15px;font-family:var(--sans);color:rgba(255,255,255,0.85);background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);padding:6px 12px;border-radius:14px;pointer-events:none;letter-spacing:2px}
/* === Teapot pour — SVG arc stream + mirror tilt === */
/* JS draws SVG path with class th-pour-arc; CSS handles stroke-dashoffset draw animation */
.th-pour-arc {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: pour-arc-draw .45s ease-out forwards;
}
@keyframes pour-arc-draw {
  to { stroke-dashoffset: 0; }
}
/* Teapot tilt — JS sets per-cup: tilt-l (clockwise for left cup) / tilt-r (ccw for right cup) */
.th-teapot.pouring{animation:teapot-tilt-l .5s ease-in-out infinite}
/* Left cup (spout on LEFT, no mirror): counter-clockwise tilt tips spout into cup */
@keyframes teapot-tilt-l{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}30%{transform:translate(-50%,-50%) rotate(-15deg)}65%{transform:translate(-50%,-50%) rotate(-4deg)}}
/* Right cup (spout RIGHT after mirror): clockwise tilt + scaleX(-1) tips mirrored spout into cup */
@keyframes teapot-tilt-r{0%,100%{transform:translate(-50%,-50%) scaleX(-1) rotate(0deg)}30%{transform:translate(-50%,-50%) scaleX(-1) rotate(15deg)}65%{transform:translate(-50%,-50%) scaleX(-1) rotate(4deg)}}

/* === Tea droplet particles === */
.th-tea-drop{position:absolute;width:3px;height:6px;background:linear-gradient(180deg,rgba(180,150,105,0.85),rgba(200,170,125,0.2));border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;z-index:4;pointer-events:none;animation:tea-drop-fall .45s ease-in forwards}
@keyframes tea-drop-fall{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.6;transform:translateY(16px) scale(.7)}100%{opacity:0;transform:translateY(30px) scale(.2)}}

/* === Cup ripple ring on tea landing === */
.th-cup-ripple{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;border:1.5px solid rgba(200,170,130,0.7);z-index:2;pointer-events:none;animation:cup-ripple .5s ease-out forwards}
@keyframes cup-ripple{0%{width:6px;height:6px;opacity:.8;border-width:1.5px}100%{width:28px;height:10px;opacity:0;border-width:.3px}}

/* === Voice Input Mic Button === */
.th-mic-btn{
  width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08);color:#fff;font-size:18px;
  cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;line-height:1;backdrop-filter:blur(4px);
}
.th-mic-btn:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.6);transform:scale(1.06)}
/* Recording state — red pulse */
.th-mic-btn.th-mic-recording{
  background:rgba(196,30,58,0.75);border-color:rgba(255,60,80,0.7);
  animation:th-mic-pulse 1.2s ease-in-out infinite;
}
.th-mic-btn.th-mic-recording::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  background:rgba(220,50,60,0.15);z-index:-1;
  animation:th-mic-pulse-ring 1.2s ease-in-out infinite;
}
@keyframes th-mic-pulse-ring{
  0%{opacity:0.6;transform:scale(0.8)}
  100%{opacity:0;transform:scale(2.2)}
}
/* Processing state — gentle spin */
.th-mic-btn.th-mic-processing{
  background:rgba(184,148,75,0.4);border-color:rgba(184,148,75,0.5);
  animation:th-mic-spin .8s linear infinite;
}
@keyframes th-mic-spin{
  0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}
}
/* Hidden when unsupported */
.th-mic-btn.th-mic-hidden{display:none}
/* Mobile sizing */
@media(max-width:500px){
  .th-mic-btn{width:34px;height:34px;font-size:16px}
}