:root{
--wall:#C7AD87; --wall-dark:#A98D66; --plank:rgba(92,64,36,.13);
--paper:#F4EFE3; --paper-edge:#DCD2BC; --door-paper:#F1E9D6;
--ink:#2A2620; --ink-soft:#4A4034; --err:#8A2E1F;
--water:#1D6894; --water-deep:#0C3B58; --water-hi:#8CCBEA;
--sky-top:#B9CBC7; --sky-bot:#E5EBE3; --mtn-far:#93A69C; --mtn-near:#6A8073; --mist:rgba(255,255,255,.6);
--lattice:#5E4630; --moon:#EFE7CC; --moon-op:0;
--offer-bg:#5E4630; --offer-fg:#F4EDDC;
--floor:#7A5B3B; --floor-line:rgba(30,18,8,.4);
--tb-front:#EFE6D2; --tb-top:#DDD0B3; --tb-stripe:#5E4630; --tb-slot:#2A1F15; --tb-lip:#C9BB99; --tb-ink:#F4EDDC;
--bronze-lo:#4C3E2A; --bronze-mid:#6F5B3C; --bronze-hi:#A08A5E; --log-hi:#8A6844; --log-lo:#5E4630;
--focus:#1D6894;
color-scheme:light;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme='light']){
--wall:#33291F; --wall-dark:#241C15; --plank:rgba(0,0,0,.28);
--paper:#25221D; --paper-edge:#3A342B; --door-paper:#6B5638;
--ink:#ECE5D6; --ink-soft:#BDB19B; --err:#F2A390;
--water:#2A86BC; --water-deep:#082D45; --water-hi:#A6DCF5;
--sky-top:#0C1720; --sky-bot:#203039; --mtn-far:#2C3D3E; --mtn-near:#1B2828; --mist:rgba(170,195,205,.13);
--lattice:#18110B; --moon:#EDE5C8; --moon-op:.95;
--offer-bg:#4A3926; --offer-fg:#F1E7D2;
--floor:#2E2217; --floor-line:rgba(0,0,0,.5); --tb-front:#CDBF9F; --tb-top:#B8A985; --tb-stripe:#4A3926; --tb-slot:#120C07; --tb-lip:#8F7D5A; --tb-ink:#EADFC4;
--bronze-lo:#2E2519; --bronze-mid:#4E4029; --bronze-hi:#8A7248; --log-hi:#6A4F33; --log-lo:#3A2B1D;
--focus:#8CCBEA;
color-scheme:dark;
}
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%}
body{
margin:0; height:100%; overflow-x:hidden;
background-color:var(--wall);
background-image:repeating-linear-gradient(90deg, transparent 0 86px, var(--plank) 86px 88px);
color:var(--ink);
font-family:'Gowun Batang','Noto Serif KR','Nanum Myeongjo','AppleMyungjo','Batang',serif;
font-size:17px; line-height:1.7;
word-break:keep-all; overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
button{font:inherit; color:inherit}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#app{height:100%; max-width:460px; margin:0 auto; padding:0 18px; position:relative}
.screen{display:none; height:100%}
.screen.is-active{display:flex; flex-direction:column}
#stall{overflow-y:auto; overscroll-behavior:contain}
#gate{align-items:center; justify-content:center; text-align:center; gap:14px; padding:24px 0; overflow-y:auto; position:relative}
.plaque{
display:flex; flex-direction:column; align-items:center; gap:10px;
background:var(--lattice); color:var(--door-paper);
padding:16px 12px; font-size:30px; line-height:1; font-weight:700;
border-radius:2px; position:relative; margin-top:22px;
box-shadow:0 0 0 3px var(--wall), 0 0 0 5px var(--lattice), 0 8px 16px rgba(0,0,0,.25);
}
.plaque::before{content:''; position:absolute; left:50%; top:-26px; width:2px; height:21px; background:var(--lattice)}
.gate-title{font-size:26px; font-weight:700; margin:10px 0 0; line-height:1.3}
.gate-sub{margin:0; color:var(--ink-soft)}
.gates{display:flex; gap:22px; justify-content:center; margin:6px 0 0}
.gate-door{background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink); -webkit-tap-highlight-color:transparent}
.gate-label{font-weight:700; font-size:18px; line-height:1.3; margin-top:10px; letter-spacing:.1em}
.gate-desc{font-size:13px; color:var(--ink-soft); line-height:1.4}
.door-wrap{perspective:900px; display:block}
.door > span{display:block}
.door{
width:min(140px, 38vw); height:auto; aspect-ratio:164/222; background:var(--lattice); padding:9px; border-radius:2px;
display:grid; grid-template-rows:1.35fr 1fr; gap:9px; position:relative;
transform-origin:left center; transition:transform .65s cubic-bezier(.5,0,.3,1);
box-shadow:0 14px 28px rgba(0,0,0,.28);
}
.door.open{transform:rotateY(-72deg)}
.door-lattice{
background-color:var(--door-paper);
background-image:
linear-gradient(90deg, transparent calc(100% - 3px), var(--lattice) 0),
linear-gradient(0deg, transparent calc(100% - 3px), var(--lattice) 0);
background-size:25% 20%;
}
.door-panel{background:var(--wall-dark); box-shadow:inset 0 0 0 6px var(--lattice), inset 0 0 0 8px rgba(255,255,255,.08)}
.door-knob{position:absolute; right:16px; top:58%; width:9px; height:9px; border-radius:50%; background:var(--door-paper); opacity:.8}
.gate-note{font-size:14px; color:var(--ink-soft); max-width:21em; margin:4px 0 2px; line-height:1.6}
.invites{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; max-width:340px; margin:2px 0 0}
.invite{font-size:13.5px; line-height:1.35; padding:8px 10px; border-radius:14px; min-height:44px}
.invite-note{margin:0; font-size:13px; color:var(--ink-soft); max-width:22em; line-height:1.5}
.invite-copy{width:100%; max-width:340px; font:inherit; font-size:13px; padding:8px 10px; border:1.5px solid var(--ink-soft); border-radius:8px; background:var(--paper); color:var(--ink)}
.btn-primary{
font-weight:700; font-size:16px; background:var(--ink); color:var(--paper);
border:0; border-radius:999px; padding:12px 26px; min-height:46px; cursor:pointer; text-decoration:none;
display:inline-flex; align-items:center; justify-content:center;
}
.btn-quiet{
font-size:15px; background:transparent; border:1.5px solid currentColor; border-radius:999px;
padding:8px 16px; min-height:40px; cursor:pointer;
}
.bar{display:flex; justify-content:space-between; align-items:center; padding:14px 0 10px; flex:none}
.bar-name{font-weight:700; font-size:18px; letter-spacing:.24em}
.bar-name:focus{outline:none}
.hanja{font-size:14px; font-weight:400; letter-spacing:.08em}
.window{
position:relative; flex:none; height:clamp(104px, 19vh, 168px);
border:10px solid var(--lattice); border-radius:2px; overflow:hidden;
background:linear-gradient(var(--sky-top), var(--sky-bot));
box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.window svg{position:absolute; left:0; bottom:0; width:100%; height:100%}
.ridge-far{fill:var(--mtn-far)} .ridge-near{fill:var(--mtn-near)}
.moon{position:absolute; top:16%; right:20%; width:20px; height:20px; border-radius:50%; background:var(--moon); opacity:var(--moon-op); box-shadow:0 0 18px var(--moon)}
.mist{position:absolute; top:0; bottom:0; left:-12%; right:-12%; background:linear-gradient(180deg, transparent 38%, var(--mist) 68%, transparent 96%); animation:drift 60s linear infinite alternate}
@keyframes drift{from{transform:translateX(-5%)} to{transform:translateX(5%)}}
.bars{position:absolute; inset:0; background:repeating-linear-gradient(90deg, var(--lattice) 0 9px, transparent 9px 44px); background-position:18px 0}
.tabs{display:flex; gap:22px; margin:16px 2px 10px; flex:none}
.tab{background:none; border:0; padding:6px 0; color:var(--ink-soft); cursor:pointer; position:relative; font-size:16px}
.tab[aria-selected='true']{color:var(--ink); font-weight:700}
.tab[aria-selected='true']::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--ink)}
.paper{
position:relative; flex:1 0 auto; min-height:170px; display:flex;
background-color:var(--paper);
background-image:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .1 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
border-radius:3px;
box-shadow:0 1px 0 var(--paper-edge), 0 12px 26px rgba(40,25,10,.2);
}
.paper:has(textarea:focus-visible){box-shadow:0 0 0 2px var(--focus), 0 12px 26px rgba(40,25,10,.2)}
.paper > .panel{flex:1; display:flex; min-width:0}
textarea{
flex:1; width:100%; border:0; background:transparent; resize:none; outline:none;
color:var(--ink); font:inherit; font-size:18px; line-height:1.8; padding:20px 22px;
}
textarea::placeholder{color:var(--ink-soft); opacity:.85}
textarea.flushing::placeholder{color:transparent}
.voice{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:20px}
.blob{
--lvl:0; width:108px; height:108px; border-radius:50%; position:relative;
background:radial-gradient(circle, var(--ink) 0 26%, color-mix(in srgb, var(--ink) 35%, transparent) 48%, transparent 70%);
transform:scale(calc(.6 + var(--lvl) * 1.1)); transition:transform .06s linear;
}
.listening .blob::after{content:''; position:absolute; inset:-14px; border-radius:50%; border:1.5px solid var(--ink-soft); animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12); opacity:.4}}
.voice-time{margin:0; font-weight:700; font-variant-numeric:tabular-nums}
.voice-hint{margin:0; font-size:14px; color:var(--ink-soft); max-width:20em; line-height:1.6}
.voice-hint.err{color:var(--err)}
.done{padding:18px 16px}
.done-inner{margin:auto; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center}
.done-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; width:100%; max-width:340px}
.done-actions > *{flex:1 1 auto; white-space:nowrap; padding:10px 7px; min-height:44px; font-size:14px}
.roll{display:flex; flex-direction:column; align-items:center; gap:4px; padding:2px 10px; margin:0 0 10px; background:none; border:0; cursor:pointer; color:var(--ink); animation:rollpop .5s cubic-bezier(.2,.8,.3,1)}
.roll[hidden]{display:none}
.tbox{width:clamp(112px, 38vw, 150px); height:auto; overflow:visible}
.tbox #tbTip{transform-box:fill-box; transform-origin:50% 100%; animation:tipsway 3.2s ease-in-out infinite}
@keyframes tipsway{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)}}
.roll-label{font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:.04em}
@keyframes rollpop{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}
.sheet{
position:absolute; top:4px; left:50%; z-index:3; width:min(82%, 300px); margin-left:calc(min(82%, 300px) / -2);
padding:20px 20px 14px; text-align:center; color:#2E2A24; transform:rotate(-1.2deg); transform-origin:50% 60%;
background:radial-gradient(ellipse at 16% 10%, rgba(255,255,255,.95), transparent 58%), linear-gradient(172deg, #FFFFFF 0%, #F6F3EC 55%, #EEE9DE 100%);
border-radius:14px 18px 12px 20px / 12px 14px 18px 12px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.18);
}
.sheet::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:repeating-linear-gradient(98deg, transparent 0 22px, rgba(60,45,30,.04) 22px 24px, transparent 24px 52px), radial-gradient(circle at 82% 92%, rgba(60,45,30,.07), transparent 42%)}
.sheet > *{position:relative}
.sheet-head{margin:0 0 6px; font-size:12px; letter-spacing:.12em; color:#857B6A}
.sheet-text{margin:0 0 12px; font-family:'Nanum Pen Script','Gowun Batang',cursive; font-size:25px; line-height:1.35}
.sheet-actions{display:flex; gap:8px; justify-content:center}
.sheet .btn-quiet{color:#2E2A24; font-size:14px; min-height:38px; padding:6px 14px}
.offering{
flex:none; display:flex; flex-direction:column; gap:10px;
margin:12px 0 14px; padding:12px 14px; border-radius:3px;
background:var(--offer-bg); color:var(--offer-fg);
box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.offering-head{display:flex; align-items:center; gap:12px; width:100%; padding:0; background:none; border:0; color:inherit; text-align:left; cursor:pointer}
.offering-caret{margin-left:auto; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s; opacity:.8}
.offering-head[aria-expanded='true'] .offering-caret{transform:rotate(-135deg) translate(-2px,-2px)}
.offering-box{flex:none; width:38px; height:32px; position:relative; border-radius:2px; background:var(--offer-fg); box-shadow:inset 0 9px 0 rgba(0,0,0,.2)}
.offering-box::before{content:''; position:absolute; left:50%; top:3px; width:16px; height:3px; margin-left:-8px; border-radius:2px; background:var(--offer-bg)}
.offering-text{flex:1 1 auto; min-width:0}
.offering-name{display:block; margin:0; font-weight:700; font-size:16px; line-height:1.4; letter-spacing:.04em}
.offering-line{display:block; margin:1px 0 0; font-size:13px; line-height:1.45; opacity:.88}
.offering-tiers{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px}
.tier{
display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:46px; padding:5px 4px;
border-radius:8px; background:var(--offer-fg); color:var(--offer-bg); text-decoration:none; text-align:center; line-height:1.25;
transition:transform .1s;
}
.tier:active{transform:translateY(1px)}
.tier-name{font-size:12px; white-space:nowrap}
.tier-price{font-size:15px; font-weight:700; white-space:nowrap}
#stall.is-done .paper{min-height:0}
.flush{
align-self:center; flex:none; margin:16px 0 4px; background:none; border:0; padding:4px 10px; cursor:pointer;
display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink);
}
.flush-knob{
width:82px; height:82px; border-radius:50%; position:relative;
background:radial-gradient(circle at 35% 30%, var(--water-hi), var(--water) 55%, var(--water-deep));
box-shadow:inset 0 -6px 0 rgba(0,0,0,.18), 0 6px 0 var(--wall-dark), 0 10px 18px rgba(0,0,0,.25);
transition:transform .12s, box-shadow .12s, filter .2s, opacity .2s;
}
.flush-knob::after{content:''; position:absolute; inset:14px; border-radius:50%; border:2px solid rgba(255,255,255,.55)}
.flush:not(:disabled):active .flush-knob{transform:translateY(4px); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 var(--wall-dark), 0 4px 8px rgba(0,0,0,.25)}
.flush:disabled{cursor:default}
.flush:disabled .flush-knob{filter:grayscale(.85); opacity:.5}
.flush-label{font-weight:700; font-size:17px; letter-spacing:.06em}
.foot{flex:none; font-size:13px; color:var(--ink-soft); text-align:center; margin:4px 0 14px; line-height:1.55}
#stall.is-done .foot{display:none}
#flushLayer{position:fixed; inset:0; z-index:40; pointer-events:none; display:none; overflow:hidden}
#flushLayer.on{display:block}
.pit-dim{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 85%, rgba(14,9,5,.35), rgba(14,9,5,.72))}
.pit-floor{
position:absolute; left:0; right:0; bottom:0; height:max(34vh, 190px);
background-color:var(--floor);
background-image:
repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), var(--floor-line) calc(20% - 2px) 20%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28));
box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.pit-hole{
position:absolute; left:50%; top:24%; width:min(48vw, 210px); height:46%;
margin-left:calc(min(48vw, 210px) / -2);
background:radial-gradient(ellipse at 50% 30%, #241810 0%, #070402 72%);
box-shadow:inset 0 14px 22px rgba(0,0,0,.9), 0 0 0 4px rgba(0,0,0,.35);
border-radius:3px;
}
.pit-foot{
position:absolute; top:34%; height:44%; width:clamp(40px, 14vw, 64px); border-radius:4px;
background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.2)), repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 2px, transparent 2px 10px), var(--floor);
filter:brightness(1.14);
box-shadow:0 4px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.pit-foot.l{right:calc(50% + min(48vw, 210px) / 2 + 10px)}
.pit-foot.r{left:calc(50% + min(48vw, 210px) / 2 + 10px)}
.pit-smoke{position:absolute; width:60px; height:200px; pointer-events:none}
.pit-smoke svg{display:block; overflow:visible}
.piece{position:absolute; white-space:pre; will-change:transform,opacity}
.piece-round{position:absolute; border-radius:50%; will-change:transform,opacity}
.help{
position:fixed; inset:0; z-index:60; background:rgba(10,8,6,.45);
display:flex; align-items:flex-end; justify-content:center;
padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
}
.help-inner{background:var(--paper); color:var(--ink); max-width:420px; width:100%; border-radius:6px; padding:22px; box-shadow:0 18px 40px rgba(0,0,0,.35)}
.help-title{font-weight:700; font-size:18px; margin:0 0 6px}
.help-body{margin:0 0 16px; line-height:1.7}
.help-actions{display:flex; gap:10px; flex-wrap:wrap}
#bell{overflow-y:auto; overscroll-behavior:contain}
.bar-actions{display:flex; gap:8px}
.bell-stage{
flex:1 1 auto; min-height:220px; position:relative; margin:2px 0 0; padding:0;
background:none; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
-webkit-tap-highlight-color:transparent;
}
.bell-svg{width:100%; height:100%; max-height:400px; overflow:visible}
.ripples{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none}
.ring{position:absolute; left:0; top:0; border-radius:50%; border:1.5px solid var(--ink-soft); opacity:0}
.pv-wood{fill:var(--lattice)}
.rope{stroke:var(--ink-soft); stroke-width:2}
.log-end{fill:var(--log-lo); opacity:.8}
.bell-hook{fill:none; stroke:var(--bronze-lo); stroke-width:6; stroke-linecap:round}
.bell-dark{fill:var(--bronze-lo)}
.bell-line{stroke:var(--bronze-hi); stroke-width:1.6; fill:none; opacity:.7}
.bell-dot{fill:var(--bronze-hi); opacity:.75}
.bell-mouth{fill:#120c07; opacity:.6}
.bell-sheen{fill:#fff; opacity:.07}
.st-lo{stop-color:var(--bronze-lo)} .st-mid{stop-color:var(--bronze-mid)} .st-hi{stop-color:var(--bronze-hi)}
.st-loghi{stop-color:var(--log-hi)} .st-loglo{stop-color:var(--log-lo)}
#striker{transform-box:view-box; transform-origin:42px 24px}
#bellBody{transform-box:view-box; transform-origin:150px 36px}
.breath{flex:none; text-align:center; font-size:22px; font-weight:700; min-height:1.7em; margin:4px 0 0; transition:opacity .25s, color .6s}
.breath.exhale{color:var(--ink-soft)}
.bell-count{flex:none; text-align:center; font-size:14px; color:var(--ink-soft); margin:0 0 12px}
.timer{flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0 0 18px}
.seg{display:flex; border:1.5px solid var(--ink); border-radius:999px; overflow:hidden}
.seg button{background:transparent; border:0; padding:8px 14px; min-height:40px; cursor:pointer; font-size:15px; color:var(--ink)}
.seg button[aria-checked='true']{background:var(--ink); color:var(--paper); font-weight:700}
.timer-left{margin:0; font-weight:700; font-size:18px; font-variant-numeric:tabular-nums}
.auto-btn{flex:none; align-self:center; margin:0 0 10px; font-size:14px; min-height:38px; padding:6px 14px}
.auto-btn[aria-pressed='true']{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.auto-info{flex:none; margin:-4px 8px 8px; text-align:center; font-size:13px; color:var(--ink-soft); line-height:1.4}
.back-btn{flex:none; align-self:center; margin:0 0 14px; font-size:14px; min-height:38px; padding:6px 16px}
.lanterns{position:absolute; left:0; right:0; top:0; height:0; pointer-events:none; z-index:1}
.lanterns.has::before{content:''; position:absolute; left:0; right:0; top:0; height:6px; background:var(--lattice); opacity:.85}
.lantern{position:absolute; top:0; width:34px; margin-left:-17px; display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; animation:lnsway 4.2s ease-in-out infinite}
.ln-string{display:block; width:1.5px; background:var(--lattice)}
.lantern svg{display:block; width:34px; height:auto; filter:drop-shadow(0 0 7px rgba(255,160,80,.55)); animation:lnglow 3.1s ease-in-out infinite}
@keyframes lnsway{0%,100%{transform:rotate(-2.4deg)} 50%{transform:rotate(2.4deg)}}
@keyframes lnglow{0%,100%{opacity:.92} 50%{opacity:1}}
.candle{position:absolute; right:12px; bottom:-2px; width:24px; height:44px; z-index:3; pointer-events:none}
.candle[hidden]{display:none}
.candle-glow{position:absolute; left:50%; top:-10px; width:130px; height:130px; margin-left:-65px; border-radius:50%; background:radial-gradient(circle, rgba(255,198,116,.55), transparent 62%); animation:cglow 2.6s ease-in-out infinite}
.candle svg{position:relative; display:block; width:24px; height:44px; overflow:visible}
.candle .flame{transform-box:fill-box; transform-origin:50% 100%; animation:flick 1.3s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(0deg)} 30%{transform:scale(.94,1.08) rotate(2deg)} 60%{transform:scale(1.04,.95) rotate(-2deg)}}
@keyframes cglow{0%,100%{opacity:.8} 50%{opacity:1}}
#stall{position:relative}
#stall.warm::before{content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse at 88% 14%, rgba(255,176,96,.2), transparent 64%)}
.incense{position:absolute; right:6%; bottom:3%; width:54px; height:128px; pointer-events:none}
.incense[hidden]{display:none}
.inc-bowl{position:absolute; left:50%; bottom:0; width:50px; height:22px; margin-left:-25px}
.inc-stick{position:absolute; left:50%; bottom:20px; width:3px; height:72px; margin-left:-1.5px; border-radius:1px; background:linear-gradient(90deg, #7B5733, #4F3620)}
.inc-top{position:absolute; left:50%; bottom:92px; width:0; height:0}
.inc-ember{position:absolute; left:-2.5px; bottom:-2px; width:5px; height:5px; border-radius:50%; background:#FF8F3F; box-shadow:0 0 7px 2px rgba(255,140,60,.65); animation:ember 1.6s ease-in-out infinite}
.inc-smoke{position:absolute; left:-24px; bottom:3px; width:48px; height:104px; transform-origin:50% 100%; animation:wispsway 6s ease-in-out infinite}
.inc-smoke svg{display:block; overflow:visible; width:48px; height:104px}
.inc-smoke path{stroke-dasharray:1; animation:wispdraw 5s ease-out infinite}
.inc-ash{position:absolute; left:50%; bottom:20px; width:18px; height:6px; margin-left:-9px; border-radius:50% 50% 0 0; background:#8C8378; opacity:0; transition:opacity 1.2s}
.incense.ash .inc-top, .incense.ash .inc-stick{display:none}
.incense.ash .inc-ash{opacity:1}
@keyframes ember{0%,100%{opacity:.85; transform:scale(1)} 50%{opacity:1; transform:scale(1.3)}}
@keyframes wispdraw{0%{stroke-dashoffset:1; opacity:0} 20%{opacity:.8} 70%{stroke-dashoffset:0; opacity:.5} 100%{stroke-dashoffset:0; opacity:0}}
@keyframes wispsway{0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)}}
@media (max-height:620px){
.bell-stage{min-height:170px}
.door{width:min(118px, 34vw)}
.done{padding:10px 16px}
.roll{margin-bottom:6px}
.plaque{margin-top:16px; padding:12px 10px; font-size:26px; gap:8px}
#gate{gap:10px}
.window{height:84px; border-width:8px}
.tabs{margin:10px 2px 8px}
.flush{margin:10px 0 2px}
.flush-knob{width:66px; height:66px}
}
@media (prefers-reduced-motion: reduce){
.mist, .listening .blob::after, .roll, .tbox #tbTip, .lantern, .lantern svg, .candle .flame, .candle-glow, .inc-ember, .inc-smoke, .inc-smoke path{animation:none}
.door, .blob, .breath{transition:none}
}