/* v35: 一枚の茶室に人物とすべての操作を重ねる表示。 */
:root { color-scheme:dark; --ink:#fff7e7; --gold:#e6c57d; --muted:#d1c4ad; --line:#dec58e44; --view-height:100dvh; --view-top:0px; --keyboard-gap:0px; --footer-height:86px; }
.tea-page { position:fixed; inset:0; overflow:hidden; min-height:0; padding:0; background:#000; color:var(--ink); }
.tea-main { max-width:none; margin:0; padding:0; }
.tea-stage { position:fixed; top:var(--view-top); left:0; width:100%; height:var(--view-height); display:block; overflow:hidden; border:0; border-radius:0; box-shadow:none; isolation:isolate; background:#000; }
.tea-stage::before { display:none; }
.tea-room { position:absolute; inset:0; z-index:-3; background:linear-gradient(90deg,#0005,transparent 55%,#0004),url("../../images/event/golden-tea-room-v35.png") center / cover no-repeat; opacity:.74; transform:scale(1.04); animation:room-drift 26s ease-in-out infinite alternate; }
.tea-stage::after { content:""; position:absolute; z-index:5; inset:0; pointer-events:none; background:linear-gradient(#0009,transparent 25%,transparent 58%,#0009 78%,#000e),radial-gradient(ellipse at 48% 44%,transparent 38%,#0008 100%); }
.tea-top { position:fixed; z-index:20; top:var(--view-top); left:0; right:0; min-height:0; padding:24px 3.5vw; display:flex; justify-content:space-between; align-items:start; gap:20px; pointer-events:none; border:0; background:linear-gradient(#000a,transparent); text-shadow:0 2px 9px #000; }
.tea-top > * { pointer-events:auto; }
.tea-brand { color:var(--ink); font-size:19px; letter-spacing:.1em; } .tea-brand small { font:10px "Yu Gothic",sans-serif; letter-spacing:.22em; color:var(--muted); margin-top:8px; }
.tea-crest { border-color:#e6c57d80; color:var(--gold); }
.tea-clock { position:absolute; left:50%; transform:translateX(-50%); font-size:11px; text-shadow:0 2px 8px #000,0 0 24px #000; }
.tea-clock strong { font-size:30px; } .tea-clock small { color:#e0ceb0; font-size:10px; }
.tea-clock.ending strong,.tea-clock.ending small { color:#ffbc90; }
.tea-heading { position:fixed; z-index:8; top:calc(var(--view-top) + 108px); left:4vw; right:4vw; display:block; margin:0; pointer-events:none; text-shadow:0 3px 12px #000; }
.eyebrow { font-size:10px; letter-spacing:.24em; color:var(--gold); }
h1 { font-size:clamp(22px,2.2vw,34px); letter-spacing:.15em; } h1 span { color:#ebd6b3; font-size:.56em; padding:0 12px; }
.tea-heading > p { margin:12px 0 0; font-size:11px; color:var(--muted); }
.tea-stage-caption { z-index:8; left:auto; right:4vw; top:112px; color:#e7d3ad; text-shadow:0 2px 6px #000; }
.live-dot { width:5px; height:5px; background:#e5c479; box-shadow:0 0 15px #ffcc6a; }
.tea-cast { position:absolute; inset:0; z-index:2; height:auto; display:block; padding:0; pointer-events:none; }
.tea-person { --lift:0%; --zoom:1.02; position:absolute; z-index:1; left:62%; top:13%; width:36%; height:74%; max-width:none; border:0; background:none; padding:0; color:var(--ink); pointer-events:none; transition:left .85s cubic-bezier(.2,.7,.2,1),top .85s cubic-bezier(.2,.7,.2,1),width .85s cubic-bezier(.2,.7,.2,1),height .85s cubic-bezier(.2,.7,.2,1); }
.tea-person.active { --lift:-7%; --zoom:1.38; z-index:3; left:-3%; top:0; width:72%; height:112%; }
.tea-person,.tea-person.active { z-index:auto; }
.tea-person-visual { z-index:1; } .tea-person.active .tea-person-visual { z-index:3; }
.tea-person[data-speaker=hideyoshi] { --lift:-10%; } .tea-person.active[data-speaker=hideyoshi] { --lift:-26%; }
.tea-person.active[data-speaker=ieyasu] { --lift:-14%; } .tea-person.active[data-speaker=yodo] { --lift:-2%; }
.tea-person-visual { display:block; position:absolute; inset:0; transform-origin:50% 50%; filter:brightness(.76) saturate(.82) drop-shadow(0 12px 22px #0009); transition:filter .6s; animation:companion-breathe 6s ease-in-out infinite; }
.tea-person.active .tea-person-visual { filter:drop-shadow(0 0 32px #0009); animation:hero-breathe 7s ease-in-out infinite; }
.tea-person img,.tea-person.active img,.tea-person:not(.active) img,.tea-person.speaking img { display:block; width:100%; height:100%; object-fit:contain; object-position:50% 0; transform-origin:50% 0; transform:translateY(var(--lift)) scale(var(--zoom)); pointer-events:none; filter:none; animation:none; }
.tea-person .tea-live-portrait { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; object-position:50% 0; transform-origin:50% 0; transform:translateY(var(--lift)) scale(var(--zoom)); pointer-events:none; }
.tea-person .tea-live-portrait[hidden] { display:none; }
.tea-person img.portrait-rendered { opacity:0; }
.tea-page.is-listening .tea-person.active .tea-person-visual { animation:listening-lean 3s ease-in-out infinite; }
@keyframes listening-lean { 50% { transform:rotate(-.6deg) translateY(2px) scale(1.012); } }
.tea-person-label { z-index:9; left:50%; top:63%; bottom:auto; transform:translateX(-50%); padding:8px 17px; border:1px solid #dcc38c50; border-radius:30px; background:#0008; backdrop-filter:blur(8px); white-space:nowrap; font-family:"Yu Mincho",serif; font-size:15px; text-shadow:0 1px 6px #000; pointer-events:auto; }
.tea-person-label small,.tea-person.active .tea-person-label small { color:#e5c98f; font:10px "Yu Gothic",sans-serif; margin-right:8px; }
.tea-person.active .tea-person-label { top:60%; left:52%; border-color:#f2d49d85; background:#0008; color:var(--ink); }
.tea-person .tea-person-label:hover { background:#25190aca; border-color:#f6d992; }
.tea-person.next-target .tea-person-label::after { content:" · 次のお相手"; color:#f3d99d; font-size:10px; }
.tea-person.speaking .tea-person-visual { filter:brightness(1.07) drop-shadow(0 0 24px #e8b35530); animation:speaker-nod 1.9s ease-in-out infinite; }
.tea-person:not(.active).speaking .tea-person-visual { animation:companion-join 2.4s ease-in-out infinite; }
.tea-person.speaking .tea-person-label { border-color:#e5bd76; box-shadow:0 0 22px #eeb05022; }
.tea-person.reacting .tea-person-visual { animation:happy-bounce .65s ease-in-out; }
.tea-stage.consulting { box-shadow:none; } .tea-stage.consulting .tea-person-visual { animation:consult-nod 2.8s ease-in-out infinite; } .tea-stage.consulting .tea-person:not(.active) .tea-person-visual { animation-delay:1.4s; }
.tea-dialogue { position:fixed; z-index:12; left:5vw; right:5vw; bottom:calc(var(--keyboard-gap) + var(--footer-height) + 8px); pointer-events:none; text-shadow:0 2px 6px #000,0 0 22px #000; }
.tea-dialogue::before { content:""; position:absolute; z-index:-1; inset:-40px -6vw -20px; background:linear-gradient(transparent,#0009 36%,#000a); pointer-events:none; }
.tea-speech { position:static; max-width:1000px; margin:auto; padding:0; border:0; border-radius:0; box-shadow:none; background:none; text-align:center; color:#fffaf0; pointer-events:auto; }
.tea-speaker { justify-content:center; gap:14px; color:#dac39d; font-size:11px; }
#speakerName { color:#ffdf9c; font-size:22px; letter-spacing:.15em; } #voiceWave { color:#efc56d; margin-left:0; letter-spacing:3px; }
.tea-page.is-speaking #voiceWave { visibility:visible; animation:voice-wave .5s infinite alternate; }
.tea-speech p { font-size:clamp(17px,1.55vw,23px); line-height:1.9; margin:8px 0 0; min-height:1.9em; max-height:7.6em; overflow-y:auto; scrollbar-width:thin; }
.tea-status { margin:5px auto; max-width:900px; min-height:0; font-size:11px; color:#ffdab4; line-height:1.7; } .tea-status:empty { display:none; }
.tea-actions { gap:9px; margin-top:17px; pointer-events:auto; }
.tea-button { border:1px solid #edd19b38; background:#0006; color:var(--ink); border-radius:30px; min-height:39px; padding:9px 16px; font-size:12px; font-weight:500; backdrop-filter:blur(8px); transition:background .2s,border-color .2s; }
.tea-button:hover:not(:disabled) { background:#6e4c2460; border-color:#eac78c90; } .tea-button.quiet { background:#0005; border-color:#edd19b38; }
.tea-button.primary { background:linear-gradient(135deg,#e8cf95,#ae8440); color:#201506; border-color:#e6c786; font-weight:700; text-shadow:none; } .tea-button.primary:hover:not(:disabled) { background:linear-gradient(135deg,#f7e3b8,#d6ac61); }
.tea-bottom { z-index:18; bottom:var(--keyboard-gap); gap:24px; padding:13px 4vw calc(19px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,#000b); border:0; }
.tea-composer { max-width:1100px; } .tea-composer input { border:1px solid #e2c28b40; border-radius:30px; background:#0008; padding:13px 20px; font-size:15px; color:var(--ink); backdrop-filter:blur(10px); } .tea-composer input::placeholder { color:#d2c4ac; }
.tea-mode { color:#ebd6b5; text-shadow:0 2px 8px #000; }
.tea-mode-menu { bottom:calc(100% + 16px); width:min(290px,calc(100vw - 28px)); max-height:calc(var(--view-height) - 140px); overflow:auto; background:#100e0bec; border:1px solid #bc9b6170; border-radius:12px; box-shadow:0 12px 45px #0008; backdrop-filter:blur(18px); }
.tea-mode-menu strong { color:var(--gold); } .tea-mode-menu button,.tea-mode-menu a { color:var(--ink); } .tea-mode-menu button:hover,.tea-mode-menu button[aria-current=true] { background:#a6813c2c; } .tea-mode-menu p { color:#bdb09b; } .tea-mode-menu a { border-color:var(--line); }
.tea-dialog { color:var(--ink); background:#100f0def; border:1px solid #c3a36c7a; border-radius:18px; max-height:calc(var(--view-height) - 30px); box-shadow:0 24px 100px #0009; backdrop-filter:blur(24px); }
.tea-dialog::backdrop { background:#0008; backdrop-filter:blur(7px); } .tea-dialog label { color:#e1c99f; font-weight:500; }
.tea-dialog input,.tea-dialog select { border-color:#c5ac7755; border-radius:8px; background:#0006; color:var(--ink); } .tea-dialog select option { background:#181410; } .tea-dialog-link { color:#c5b391; } .tea-error { color:#ffad95; } .tea-history article strong { color:#e6c589; }
.tea-effects { z-index:6; }
.tea-particle { top:auto; color:#efd597; font-size:21px; text-shadow:0 0 12px #efb94366; animation:gold-drift var(--particle-duration,3s) ease-out forwards; }
.tea-particle.petal { color:#ffd6ce; font-size:19px; animation:petal-drift var(--particle-duration,3.6s) ease-out forwards; }
.tea-particle.spark { width:4px; height:4px; border-radius:50%; background:#fff1c6; box-shadow:0 0 9px 2px #f6c97470; animation:spark-rise var(--particle-duration,2.3s) ease-out forwards; }
.tea-reaction { position:absolute; z-index:7; left:51%; top:29%; color:#ffe5a5; font-family:"Yu Mincho",serif; font-size:clamp(26px,4vw,52px); text-shadow:0 0 16px #d29c3355,0 2px 5px #000; pointer-events:none; opacity:0; }
.tea-reaction.show { animation:reaction-pop 1.6s ease-out forwards; }
.tea-atmosphere { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.tea-atmosphere i { position:absolute; width:3px; height:3px; border-radius:50%; background:#ffe8b2; box-shadow:0 0 14px #f7c265; opacity:0; left:calc(6% + var(--i)*8%); top:80%; animation:ambient-rise 12s linear infinite; animation-delay:calc(var(--i)*-1.1s); }
.tea-atmosphere i:nth-child(1) { --i:0; } .tea-atmosphere i:nth-child(2) { --i:1; } .tea-atmosphere i:nth-child(3) { --i:2; } .tea-atmosphere i:nth-child(4) { --i:3; } .tea-atmosphere i:nth-child(5) { --i:4; } .tea-atmosphere i:nth-child(6) { --i:5; } .tea-atmosphere i:nth-child(7) { --i:6; } .tea-atmosphere i:nth-child(8) { --i:7; } .tea-atmosphere i:nth-child(9) { --i:8; } .tea-atmosphere i:nth-child(10) { --i:9; } .tea-atmosphere i:nth-child(11) { --i:10; } .tea-atmosphere i:nth-child(12) { --i:11; }
.rec { color:#ffbbaa !important; background:#802b2366 !important; }
@keyframes room-drift { to { transform:scale(1.09) translateX(-.6%); } }
@keyframes hero-breathe { 50% { transform:translateY(-5px) rotate(.25deg); } }
@keyframes companion-breathe { 50% { transform:translateY(-4px) rotate(-.4deg); } }
@keyframes speaker-nod { 50% { transform:translateY(3px) rotate(.5deg); } }
@keyframes companion-join { 50% { transform:translate(-12px,-4px) rotate(-1deg) scale(1.035); } }
@keyframes happy-bounce { 40% { transform:translateY(-12px) rotate(-1deg); } 75% { transform:translateY(2px) rotate(.4deg); } }
@keyframes consult-nod { 40% { transform:rotate(-1deg) translateY(3px); } }
@keyframes voice-wave { to { opacity:.35; } }
@keyframes gold-drift { 0% { transform:translate(0,0) rotate(0); opacity:0; } 20% { opacity:.9; } to { transform:translate(var(--drift,60px),48vh) rotate(150deg); opacity:0; } }
@keyframes petal-drift { 0% { transform:translate(0,0) rotate(-30deg); opacity:0; } 20% { opacity:.85; } to { transform:translate(var(--drift,90px),52vh) rotate(200deg); opacity:0; } }
@keyframes spark-rise { 0% { transform:translate(0,0) scale(.4); opacity:0; } 20% { opacity:.8; } to { transform:translate(var(--drift,40px),-38vh) scale(.1); opacity:0; } }
@keyframes ambient-rise { 15% { opacity:.5; } 85% { opacity:.2; } to { transform:translate(40px,-65vh); opacity:0; } }
@keyframes reaction-pop { 0% { opacity:0; transform:translateY(12px) scale(.6) rotate(-12deg); } 15%,65% { opacity:1; transform:translateY(0) scale(1) rotate(5deg); } 100% { opacity:0; transform:translateY(-24px) scale(1.1); } }
.tea-page.motion-off *, .tea-page.motion-off *::before,.tea-page.motion-off *::after { animation:none !important; transition:none !important; }
.tea-page.motion-off .tea-atmosphere,.tea-page.motion-off .tea-effects,.tea-page.motion-off .tea-reaction { display:none; }
@media(max-width:760px) {
 .tea-top { display:grid; grid-template-columns:1fr auto; padding:16px 16px 0; gap:12px; }
 .tea-brand { font-size:15px; gap:8px; letter-spacing:.05em; } .tea-brand small { font-size:8px; letter-spacing:.08em; margin-top:7px; } .tea-crest { width:33px; height:33px; font-size:18px; }
 .tea-clock { position:static; transform:none; width:112px; margin-left:0; gap:4px; font-size:9px; } .tea-clock strong { font-size:23px; } .tea-clock small { font-size:9px; }
 .tea-top > button { grid-column:2; justify-self:end; min-height:30px; padding:6px 11px; font-size:10px; }
 .tea-heading { top:calc(var(--view-top) + 100px); left:19px; right:auto; } .tea-heading .eyebrow { font-size:8px; letter-spacing:.14em; margin-bottom:8px; }
 h1 { font-size:22px; letter-spacing:.05em; } h1 span { padding:0 6px; } .tea-heading > p { margin-top:8px; font-size:10px; }
 .tea-stage-caption { right:17px; top:186px; font-size:9px; gap:6px; }
 .tea-person { left:52%; top:21%; width:58%; height:57%; --zoom:1.03; }
 .tea-person.active { left:-31%; top:10%; width:135%; height:93%; --zoom:1.15; --lift:-2%; }
 .tea-person.active[data-speaker=nene],.tea-person.active[data-speaker=yodo] { left:-38%; width:128%; }
 .tea-person.active[data-speaker=hideyoshi] { --lift:-18%; } .tea-person.active[data-speaker=ieyasu] { --lift:-10%; } .tea-person.active[data-speaker=yodo] { --lift:1%; }
 .tea-person-label { top:51%; left:45%; padding:6px 10px; font-size:12px; } .tea-person.active .tea-person-label { left:51%; top:56%; }
 .tea-person-label small,.tea-person.active .tea-person-label small { font-size:9px; margin-right:5px; } .tea-person.next-target .tea-person-label::after { font-size:8px; }
 .tea-dialogue { left:18px; right:18px; bottom:calc(var(--keyboard-gap) + var(--footer-height) + 4px); }
 .tea-speech p { font-size:16px; line-height:1.75; max-height:7em; margin-top:7px; } #speakerName { font-size:18px; } .tea-speaker { gap:10px; font-size:9px; } #voiceWave { letter-spacing:1px; }
 .tea-status { font-size:10px; line-height:1.5; margin:5px 0; } .tea-actions { gap:5px; margin-top:10px; } .tea-actions .tea-button { padding:6px 9px; min-height:32px; font-size:10px; }
 .tea-bottom { display:block; padding:8px 13px calc(7px + env(safe-area-inset-bottom)); } .tea-composer { gap:6px; } .tea-composer input { font-size:16px; padding:11px 14px; } .tea-composer .primary { padding:8px 14px; font-size:11px; } .tea-composer .quiet { padding:8px 12px; }
 .tea-mode { width:max-content; margin-left:auto; } .tea-mode summary { padding:10px 2px 3px; font-size:10px; } .tea-mode-menu { bottom:calc(100% + 12px); }
 .tea-reaction { left:69%; top:34%; }
}
@media(max-width:370px) { .tea-actions { gap:4px; } .tea-actions .tea-button { padding:6px 7px; font-size:9px; } .tea-speech p { font-size:15px; } }
@media(max-height:540px) {
 .tea-top { padding-top:10px; } .tea-heading { top:calc(var(--view-top) + 67px); } .tea-heading .eyebrow,.tea-brand small,.tea-heading > p { display:none; }
 .tea-stage-caption { top:85px; } .tea-speech p { max-height:3.5em; font-size:15px; line-height:1.6; } .tea-actions { margin-top:7px; }
 .tea-person.active { top:-16%; height:145%; width:68%; left:-6%; } .tea-person:not(.active) { left:63%; top:7%; width:32%; height:99%; }
 .tea-person-label { font-size:11px; } .tea-person.active .tea-person-label { top:53%; } .tea-dialogue { left:4vw; right:4vw; } .tea-status { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .tea-atmosphere,.tea-effects,.tea-reaction { display:none; } }