:root{--paper:#fff8e7;--ink:#3b2a1a;--red:#c8432b;--son:#b5302a;--son-sang:#d9483b;--son-dam:#7a1b15;--vang:#e2ad45;--giay:#f4e7c8;--giay-vien:#d3b98a;--jade:#3e9b7a;--night:#1b2440;--van-giay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .16 .34 0 0 0 -.1'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .16' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .24 .9 0 0 0 -.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23a%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23b%29'/%3E%3C/svg%3E");--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--kb:0px;--stick:116px;--ctl-h:168px;font-family:"Baloo 2",system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;color:var(--ink);overscroll-behavior:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:#10172e;margin:0;overflow:hidden}body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:fixed;inset:0}#game{position:fixed;inset:0}#game,#game canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button{font:inherit;background:var(--red);color:#fff;cursor:pointer;touch-action:manipulation;border:0;border-radius:12px;padding:8px 14px;font-weight:700}button.ghost{color:var(--ink);border:2px solid var(--ink);background:0 0}button:disabled{opacity:.4;cursor:default}input,select{font:inherit;color:var(--ink);background:#fff;border:2px solid #d9c49a;border-radius:10px;padding:6px 10px;font-size:16px}#lobby{--bg:url(/bg/lang-dem.webp);z-index:10;padding:calc(var(--sat) + 12px) calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px);overscroll-behavior:contain;background-color:#10172e;background-image:radial-gradient(130% 85% at 50% 48%, transparent 38%, #080d1fd9 100%), linear-gradient(180deg, #0a1027c7 0%, #0a102770 24%, transparent 46%, transparent 68%, #0a1027b3 100%), var(--bg);background-position:50%;background-size:cover;place-items:center;display:grid;position:fixed;inset:0;overflow-y:auto}#lobby[data-time=ngay]{--bg:url(/bg/lang-ngay.webp);background-image:radial-gradient(130% 85% at 50% 48%, transparent 40%, #24180acc 100%), linear-gradient(180deg, #2a1c0ccc 0%, #2a1c0c66 24%, transparent 46%, transparent 70%, #2a1c0c99 100%), var(--bg)}@media (orientation:portrait){#lobby{--bg:url(/bg/lang-dem-doc.webp)}#lobby[data-time=ngay]{--bg:url(/bg/lang-ngay-doc.webp)}}.lobby-sky{pointer-events:none;position:fixed;inset:0;overflow:hidden}.lobby-sky .defs{position:absolute}.moonlight{left:50%;top:calc(var(--sat) - 18vmin);aspect-ratio:1;background:radial-gradient(circle,#fff1c24d 0%,#fff1c21c 32%,#0000 62%);width:min(130vw,980px);position:absolute;transform:translate(-50%)}#lobby[data-time=ngay] .moonlight{background:radial-gradient(circle,#fff6d840 0%,#0000 58%)}.lantern{transform-origin:50% 0;width:clamp(28px,6.5vmin,50px);animation:4.6s ease-in-out infinite alternate den-dua;position:absolute;top:0}.lantern:before{content:"";width:2px;height:var(--day,40px);background:#24180e;margin:0 auto;display:block}.lantern svg{filter:drop-shadow(0 0 10px #ff8a3dcc)drop-shadow(0 0 26px #ff5a2a80);width:100%;display:block}.lantern.l1{left:max(3.5%, calc(var(--sal) + 6px));--day:calc(var(--sat) + 14px)}.lantern.l2{right:max(3.5%, calc(var(--sar) + 6px));--day:calc(var(--sat) + 52px);animation-duration:5.4s;animation-delay:-2.2s}#lobby[data-time=ngay] .lantern svg{filter:drop-shadow(0 4px 6px #0006)}@keyframes den-dua{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}.fireflies i{left:var(--x);top:var(--y);opacity:0;width:5px;height:5px;animation:dom-dom var(--t) ease-in-out var(--d) infinite;background:#fff7a8;border-radius:50%;position:absolute;box-shadow:0 0 8px 3px #ffe55c99}#lobby[data-time=ngay] .fireflies{display:none}@keyframes dom-dom{0%{opacity:0;transform:translate(0)}20%{opacity:.95}50%{opacity:.25;transform:translate(18px,-26px)}72%{opacity:.85}to{opacity:0;transform:translate(-12px,-50px)}}.lobby-wrap{justify-items:center;gap:clamp(8px,2vh,18px);width:min(440px,100%);display:grid;position:relative}.lobby-brand{text-align:center;justify-items:center;display:grid}.lobby-brand .logo{--logo-h:clamp(72px, 22vh, 230px);width:100%;margin:0;line-height:0}.lobby-brand .logo img{height:auto;width:min(100%, 380px, calc(var(--logo-h) * 986 / 626));filter:drop-shadow(0 6px 14px #000a);margin:0 auto;display:block}.lobby-brand .byline{letter-spacing:.08em;color:#f7e6bf;text-shadow:0 1px 2px #000c,0 0 10px #000a;align-items:center;gap:10px;margin:0;font-size:.85rem;font-weight:500;display:flex}.lobby-brand .byline:before,.lobby-brand .byline:after{content:"";opacity:.55;background:currentColor;width:22px;height:1px}.lobby-brand .sub{color:#fcefd2;text-shadow:0 1px 3px #000e,0 0 12px #000b;margin:2px 0 0;font-size:1rem;line-height:1.3}.lobby-card{width:100%;color:var(--ink);background:var(--van-giay), radial-gradient(120% 70% at 50% 0%, #fdf5e0 0%, transparent 70%), linear-gradient(172deg, #f8ecd0 0%, #efdeb8 100%);border-radius:10px 14px 12px 16px/14px 10px 16px 12px;gap:12px;padding:18px 18px 12px;display:grid;position:relative;box-shadow:0 0 0 1px #9c7a4788,0 0 0 5px #f2e3bfcc,0 0 0 6px #8d6a3a77,0 24px 50px #000b}.lobby-card:before{content:"";pointer-events:none;border:1.5px solid #a5814d55;border-radius:7px 10px 8px 12px/10px 7px 12px 8px;position:absolute;inset:6px}.lobby-card .seal{z-index:1;background:var(--son);color:#fbe9d0;letter-spacing:.04em;text-align:center;width:46px;height:46px;box-shadow:inset 0 0 0 2px var(--son), inset 0 0 0 3.5px #fbe9d0cc, 0 3px 8px #0006;border-radius:7px;place-items:center;font-size:12.5px;font-weight:700;line-height:1.02;display:grid;position:absolute;top:-14px;right:-10px;transform:rotate(9deg)}.lobby-card .field{gap:3px;font-size:.95rem;font-weight:700;display:grid}#lobby #name,#lobby #code{border:2px solid var(--giay-vien);background:#fffcf3;border-radius:12px;height:46px;padding:0 14px;font-weight:600;box-shadow:inset 0 2px 3px #b8955a33}#lobby #name::placeholder,#lobby #code::placeholder{color:#a48c66;font-weight:500}#lobby #name:focus,#lobby #code:focus{border-color:var(--son);outline:3px solid #b5302a2e}.dress{grid-template-columns:108px minmax(0,1fr);grid-template-areas:"pv seg""pv sw""pv nm";align-items:center;gap:8px 14px;display:grid}.dress-preview{background:radial-gradient(42% 9% at 50% 93%,#5a3d2266,#0000 100%),radial-gradient(circle at 50% 42%,#fff8e2 0%,#f3e1b8 55%,#e3c793 100%);border-radius:54px 54px 14px 14px;grid-area:pv;place-items:end center;height:132px;margin:0;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #c4a167,inset 0 0 0 5px #f6ead0,inset 0 0 0 6px #c4a16788,inset 0 -12px 18px #a37f4a40}.dress-preview img{object-fit:contain;object-position:50% 100%;width:100%;height:120px;margin-bottom:6px}.dress-fallback{margin-bottom:14px;line-height:0}.dress-fallback svg{width:92px;height:92px;display:block}.seg{background:#e6d1a4;border-radius:999px;grid-area:seg;grid-auto-columns:1fr;grid-auto-flow:column;justify-self:start;gap:3px;padding:3px;display:inline-grid;box-shadow:inset 0 1px 3px #8a6a3d55}.seg label{cursor:pointer;position:relative}.seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg span{text-align:center;color:#6b5233;border-radius:999px;min-width:64px;padding:5px 16px;font-weight:700;display:block}.seg input:checked+span{background:var(--son);color:#fff6e6;box-shadow:0 2px 0 var(--son-dam)}.seg input:focus-visible+span{outline:2px solid var(--son);outline-offset:2px}.outfits{grid-area:sw;grid-template-columns:repeat(4,minmax(0,46px));gap:6px;display:grid}.outfits .swatch{aspect-ratio:1;border:2px solid var(--giay-vien);background:#fffaf0;border-radius:12px;place-items:center;width:100%;padding:0;display:grid;position:relative;overflow:hidden;box-shadow:0 2px #d9c49a}.outfits .swatch img{object-fit:cover;object-position:50% 4%;width:100%;height:100%}.outfits .swatch i{border-radius:50%;width:22px;height:22px;box-shadow:0 0 0 2px #fff}.outfits .swatch.on{border-color:var(--son);background:#ffe9e3;box-shadow:0 0 0 2px #b5302a55}.dress-name{color:#5a3f22;grid-area:nm;margin:0;font-size:.95rem;font-weight:700;line-height:1.25}.lobby-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"create create""or or""code join";gap:8px;display:grid}.lobby-actions:has(#play-bots){grid-template-areas:"create bots""or or""code join"}.lobby-actions:before{content:"hoặc vào làng của bạn bè";text-align:center;color:#8a6d45;background:linear-gradient(#c9ad78,#c9ad78) 0/16% 1px no-repeat,linear-gradient(#c9ad78,#c9ad78) 100%/16% 1px no-repeat;grid-area:or;font-size:.82rem;font-weight:500;line-height:1.2}#lobby #create{grid-area:create}#lobby #play-bots{grid-area:bots}#lobby #code{text-align:center;text-transform:uppercase;letter-spacing:.14em;grid-area:code;width:auto;min-width:0}#lobby #code::placeholder{letter-spacing:normal;text-transform:none}#lobby #join{grid-area:join}#lobby .lobby-actions button{border-radius:14px;min-height:48px;padding:6px 12px;font-size:1.05rem;line-height:1.15}#lobby #create,#lobby #join{background:linear-gradient(180deg, var(--son-sang), var(--son));color:#fff6e6;text-shadow:0 1px #0005;box-shadow:inset 0 1px 0 #ffffff4d, inset 0 -2px 0 #0000002a, 0 3px 0 var(--son-dam), 0 6px 14px #5a120d55}#lobby #play-bots{color:var(--son);border:2px solid var(--son);background:#fffaf0;box-shadow:0 3px #c9ad78,0 6px 12px #5a3d2222}#lobby .lobby-actions button:not(:disabled):active{box-shadow:inset 0 1px 0 #fff3, 0 1px 0 var(--son-dam);transform:translateY(2px)}#lobby .lobby-actions button:focus-visible{outline:3px solid var(--vang);outline-offset:2px}#lobby.busy .lobby-actions button{cursor:progress}.error{color:var(--son);margin:0}#lobby .error{text-align:center;min-height:1.3em;font-size:.92rem;font-weight:600;line-height:1.3}@media (max-height:700px){.lobby-brand .logo{--logo-h:clamp(64px, 19vh, 150px)}.lobby-card{gap:10px;padding:16px 16px 10px}}@media (max-height:600px){#lobby{padding-top:calc(var(--sat) + 8px);padding-bottom:calc(var(--sab) + 8px)}.lobby-wrap{gap:10px}.lobby-brand .logo{--logo-h:clamp(60px, 15vh, 110px)}.lobby-brand .sub,.lobby-actions:before{display:none}.lobby-actions{grid-template-areas:"create create""code join"}.lobby-actions:has(#play-bots){grid-template-areas:"create bots""code join"}.dress-preview{height:116px}.dress-preview img{height:106px}#lobby .error:empty{display:none}}@media (orientation:landscape) and (max-height:560px){#lobby{padding-top:calc(var(--sat) + 8px);padding-bottom:calc(var(--sab) + 8px)}.lobby-wrap{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;gap:16px;width:min(880px,100%)}.lobby-brand .logo{--logo-h:clamp(70px, 40vh, 190px)}.lobby-brand .logo img{width:min(100%, 300px, calc(var(--logo-h) * 986 / 626))}.lobby-brand .sub{font-size:.9rem}.lobby-card{grid-template-columns:150px minmax(0,1fr);grid-template-areas:"dress name""dress actions""dress error";align-items:start;gap:10px 16px;padding:14px 14px 10px}.lobby-card .field{grid-area:name}.lobby-card .dress{grid-area:dress}.lobby-card .lobby-actions{grid-area:actions}.lobby-card .error{grid-area:error}.dress{grid-template-columns:1fr;grid-template-areas:"pv""seg""sw""nm";justify-items:center;gap:6px}.dress-preview{border-radius:48px 48px 12px 12px;width:100%;height:100px}.dress-preview img{height:92px;margin-bottom:4px}.dress-fallback svg{width:72px;height:72px}.seg{justify-self:center}.seg span{min-width:56px;padding:4px 12px}.outfits{grid-template-columns:repeat(4,32px);gap:5px}.outfits .swatch{border-radius:9px}.outfits .swatch i{width:16px;height:16px}.dress-name{text-align:center;font-size:.85rem}.lobby-actions:before{display:none}.lobby-actions{grid-template-areas:"create create""code join"}.lobby-actions:has(#play-bots){grid-template-areas:"create bots""code join"}#lobby .lobby-actions button{min-height:46px;font-size:.98rem}}@media (prefers-reduced-motion:reduce){.lantern,.fireflies i,#act-btn{animation:none!important}.fireflies i{opacity:.6}}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}#hud>*{pointer-events:auto}#phase{top:calc(var(--sat) + 12px);background:var(--van-giay), var(--paper);border-radius:999px;padding:6px 18px;font-weight:700;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0003}#role-card{top:calc(var(--sat) + 12px);left:calc(var(--sal) + 12px);background:var(--van-giay), var(--paper);border-radius:16px;width:260px;padding:12px;position:absolute;box-shadow:0 4px 12px #0003}#role-card h3{color:var(--red);margin:0 0 4px}#actions{bottom:calc(var(--sab) + 12px);flex-wrap:wrap;justify-content:center;gap:6px;max-width:70vw;display:flex;position:absolute;left:50%;transform:translate(-50%)}#actions .box{background:var(--van-giay), var(--paper);border-radius:16px;gap:6px;padding:10px;display:grid;box-shadow:0 4px 12px #0003}#actions .targets{flex-wrap:wrap;gap:6px;max-width:64vw;max-height:220px;display:flex;overflow-y:auto}#actions{max-width:min(760px,92vw)}.pcard{width:76px;color:var(--ink);background:#fff;border:2px solid #e2cfa4;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 4px;font-size:13px;font-weight:600;transition:transform .1s,border-color .1s;display:flex;position:relative}.pcard:hover{border-color:var(--red);transform:translateY(-2px)}.pcard.on{border-color:var(--red);background:#ffe9e3;box-shadow:0 0 0 2px #c8432b55}.pcard .ico{width:46px;height:46px;display:block}.pcard .ico svg{width:100%;height:100%;display:block}.pcard .nm{text-overflow:ellipsis;white-space:nowrap;max-width:70px;overflow:hidden}.pcard .badge{background:var(--red);color:#fff;text-align:center;border-radius:11px;min-width:22px;height:22px;padding:0 5px;font-size:13px;line-height:22px;position:absolute;top:-6px;right:-6px}@media (max-width:640px){.pcard{width:62px;font-size:12px}.pcard .ico{width:38px;height:38px}#chat{width:min(260px,60vw)}#chat-log{height:110px}}#chat{right:calc(var(--sar) + 12px);bottom:calc(var(--sab) + 12px);background:var(--van-giay), #fff8e7ee;border-radius:16px;width:min(320px,45vw);padding:8px;position:absolute;box-shadow:0 4px 12px #0003}#chat-log{overscroll-behavior:contain;align-content:end;gap:2px;height:180px;font-size:14px;display:grid;overflow-y:auto}#chat-log .foxes{color:#b8501f}#chat-log .ghosts{color:#6a6fb5;font-style:italic}#chat-log .system{color:var(--jade);font-weight:700}#chat-form{gap:4px;margin-top:6px;display:flex}#chat-input{flex:1;min-width:0}#toast{top:calc(var(--sat) + 60px);background:var(--night);color:#fff;opacity:0;pointer-events:none;border-radius:12px;padding:6px 14px;transition:opacity .3s;position:absolute;left:50%;transform:translate(-50%)}#toast.show{opacity:1}#curse{top:calc(var(--sat) + 60px);right:calc(var(--sar) + 12px);color:#fff;background:#3b2a5a;border-radius:12px;max-width:320px;padding:8px 12px;font-weight:700;position:absolute;box-shadow:0 4px 12px #0003}#mute{top:calc(var(--sat) + 12px);right:calc(var(--sar) + 12px);background:var(--paper);color:var(--ink);padding:6px 10px;position:absolute}.toggle{align-items:center;gap:6px;font-size:15px;display:flex}.pcard.off{color:#85735b;cursor:not-allowed;background:#ece3d0;border-style:dashed;border-color:#d3c5a6}.pcard.off:hover{border-color:#d3c5a6;transform:none}.pcard.off .ico{filter:grayscale();opacity:.5}.pcard.off.dead .ico{opacity:.32}.pcard.off.dead .nm{text-decoration:line-through;text-decoration-thickness:1px}.pcard .why{text-align:center;color:#85735b;max-width:70px;font-size:11px;font-weight:700;line-height:1.15}.pcard.off.ma{border-color:#c8432b88}.pcard.off.ma .why{color:var(--red)}.pcard.off.lanh .why{color:var(--jade)}.pcard.on.off{box-shadow:none}#popups{z-index:20;pointer-events:none;flex-direction:column;gap:8px;width:min(400px,100vw - 32px);display:flex;position:fixed;top:108px;left:50%;transform:translate(-50%)}.popup{background:var(--paper);color:var(--ink);border:3px solid var(--red);pointer-events:auto;border-radius:18px;align-items:center;gap:12px;padding:12px 44px 14px 12px;transition:opacity .2s,transform .2s;animation:.25s ease-out popup-in;display:flex;position:relative;box-shadow:0 10px 30px #0005,inset 0 0 0 3px #fff8e7,inset 0 0 0 4px #c8432b33}.popup.leaving{opacity:0;transform:translateY(-8px)}.popup-ico{background:#fbe7c6;border:2px solid #e2cfa4;border-radius:50%;flex:none;place-items:center;width:46px;height:46px;font-size:26px;line-height:1;display:grid}.popup.good .popup-ico{background:#d8efe4;border-color:#3e9b7a66}.popup.bad .popup-ico{background:#ffd9cf;border-color:#c8432b66}.popup-body{gap:2px;min-width:0;display:grid}.popup-title{color:var(--red);font-size:17px;line-height:1.2}.popup-text{overflow-wrap:anywhere;margin:0;font-size:15px;line-height:1.35}.popup.bad .popup-text{font-weight:700}.popup-close{border-radius:50%;place-items:center;width:28px;height:28px;padding:0;font-size:20px;line-height:1;display:grid;position:absolute;top:8px;right:8px}.popup-close:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.popup-timer{background:var(--red);opacity:.35;transform-origin:0;height:3px;animation:popup-life var(--life,5s) linear forwards;border-radius:2px;position:absolute;bottom:6px;left:16px;right:16px}.popup.paused .popup-timer{animation-play-state:paused}@keyframes popup-in{0%{opacity:0;transform:translateY(-12px)scale(.97)}}@keyframes popup-life{to{transform:scaleX(0)}}@media (max-width:640px){#popups{top:88px}.popup{gap:10px;padding:10px 40px 12px 10px}.popup-ico{width:38px;height:38px;font-size:21px}.popup-title{font-size:15px}.popup-text{font-size:14px}}@media (prefers-reduced-motion:reduce){.popup{transition:none;animation:none}.popup.leaving{transform:none}}.bot-controls{box-shadow:inset 0 0 0 1px var(--giay-vien);background:#f3e6c8;border-radius:12px;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:6px 8px;display:flex}.bot-controls b,.bot-controls strong,.bot-controls output{font-weight:700}.bot-controls button{min-height:36px;color:var(--son);border:2px solid var(--son);box-shadow:0 2px 0 var(--giay-vien);background:#fffaf0;border-radius:10px;padding:4px 12px}.bot-controls button:not(:disabled):active{box-shadow:none;transform:translateY(1px)}.bot-controls select,.bot-controls input:not([type=checkbox]):not([type=radio]){min-height:36px;padding:2px 8px}#stick,#act-btn,#chat-toggle,#chat-peek{display:none}html.touch #hud button{touch-action:manipulation}html.touch #phase{top:calc(var(--sat) + 8px);max-width:calc(100% - 128px - var(--sal) - var(--sar));text-align:center;padding:4px 14px;font-size:14px;line-height:1.3}html.touch #mute{top:calc(var(--sat) + 6px);right:calc(var(--sar) + 8px);border-radius:50%;width:44px;height:44px;padding:0}html.touch #hud:has(#role-card:not([hidden])) #phase{left:auto;right:calc(var(--sar) + 60px);max-width:calc(100% - min(220px, 42%) - 84px - var(--sal) - var(--sar));transform:none}html.touch #role-card{top:calc(var(--sat) + 8px);left:calc(var(--sal) + 8px);z-index:1;width:auto;max-width:min(300px, calc(100% - 16px - var(--sal) - var(--sar)));cursor:pointer;padding:6px 12px;font-size:14px;line-height:1.35}html.touch #role-card:not(.open){max-width:min(220px,42%)}html.touch #role-card:not(.open)>:not(h3){display:none}html.touch #role-card h3{white-space:nowrap;text-overflow:ellipsis;align-items:baseline;gap:6px;margin:0;font-size:15px;display:flex;overflow:hidden}html.touch #role-card h3:after{content:"▾";opacity:.7;font-size:12px}html.touch #role-card.open h3{white-space:normal;margin-bottom:4px}html.touch #role-card.open h3:after{content:"▴"}html.touch #curse{top:calc(var(--sat) + 56px);right:calc(var(--sar) + 8px);max-width:48%;padding:6px 10px;font-size:13px}html.touch #toast{top:calc(var(--sat) + 100px);text-align:center;max-width:calc(100% - 32px)}html.touch .toggle input{width:22px;height:22px}html.touch #actions{left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);max-width:none;bottom:calc(var(--sab) + var(--ctl-h));max-height:calc(100% - var(--sat) - var(--sab) - var(--ctl-h) - 104px);overscroll-behavior:contain;flex-flow:column;align-items:stretch;overflow-y:auto;transform:none}html.touch #actions .box{flex-shrink:0;padding:8px 10px}html.touch #actions .box>b:first-child{cursor:pointer;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px;line-height:1.3;display:flex}html.touch #actions .box>b:first-child:after{content:"▾";color:var(--son);flex:none}html.touch #actions.min .box>b:first-child:after{content:"▴"}html.touch #actions.min .box>:not(:first-child){display:none}html.touch #actions .targets{max-width:none;max-height:min(30vh,240px)}html.touch #actions .box>button{min-height:44px}html.touch #chat{display:none}html.touch #chat.open{z-index:2;left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);width:auto;bottom:max(calc(var(--kb) + 8px), calc(var(--sab) + var(--ctl-h)));background:var(--van-giay), var(--paper);display:block;box-shadow:0 6px 18px #0005}html.touch #hud:has(#chat.open) #actions{bottom:calc(max(calc(var(--kb) + 8px), calc(var(--sab) + var(--ctl-h))) + var(--chat-h,0px) + 6px);max-height:calc(100% - var(--sat) - 104px - max(calc(var(--kb) + 8px), calc(var(--sab) + var(--ctl-h))) - var(--chat-h,0px))}html.touch #hud:has(#chat.open) #actions .box>:not(:first-child){display:none}html.touch #chat-log{height:auto;min-height:56px;max-height:max(72px, min(34vh, 260px, calc(100vh - var(--kb) - var(--sat) - 150px)));font-size:15px}html.touch #chat-form select,html.touch #chat-form input{min-height:42px}html.touch #chat-toggle{right:calc(var(--sar) + 28px);bottom:calc(var(--sab) + 108px);background:var(--van-giay), var(--paper);width:52px;height:52px;color:var(--ink);box-shadow:0 4px 12px #0005, inset 0 0 0 2px var(--giay-vien);border-radius:50%;place-items:center;padding:0;display:grid;position:absolute}html.touch #chat-toggle.on{background:var(--son);color:#fff6e6;box-shadow:0 4px 12px #0005, inset 0 0 0 2px var(--vang)}#chat-toggle svg{width:26px;height:26px}#chat-toggle .badge{background:var(--son);color:#fff;text-align:center;min-width:22px;height:22px;box-shadow:0 0 0 2px var(--paper);border-radius:11px;padding:0 5px;font-size:13px;line-height:22px;position:absolute;top:-4px;right:-4px}#hud>#chat-peek{pointer-events:none}html.touch #chat-peek{-webkit-line-clamp:2;right:calc(var(--sar) + 90px);bottom:calc(var(--sab) + 112px);opacity:0;background:#fff8e7f2;border-radius:14px 14px 4px;-webkit-box-orient:vertical;max-width:min(60vw,320px);padding:6px 12px;font-size:14px;line-height:1.3;transition:opacity .25s,transform .25s;display:-webkit-box;position:absolute;overflow:hidden;transform:translateY(6px);box-shadow:0 4px 12px #0004}html.touch #chat-peek.show{opacity:1;transform:none}html.touch #chat-peek.system{color:var(--jade);font-weight:700}html.touch #chat-peek.ghosts{color:#6a6fb5;font-style:italic}html.touch #stick:not([hidden]){left:calc(var(--sal) + 4px);bottom:calc(var(--sab) + 4px);width:calc(var(--stick) + 44px);height:calc(var(--stick) + 44px);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:block;position:absolute}.stick-base{width:var(--stick);height:var(--stick);background:radial-gradient(circle,#fff8e726 0%,#fff8e71a 58%,#fff8e74d 100%);border:3px solid #fff8e7b3;border-radius:50%;position:absolute;bottom:22px;left:22px;box-shadow:0 4px 14px #0004,inset 0 0 18px #0003}.stick-base:before{content:"";background:linear-gradient(#fff8e7aa,#fff8e7aa) 50% 0/3px 10px no-repeat,linear-gradient(#fff8e7aa,#fff8e7aa) 50% 100%/3px 10px no-repeat,linear-gradient(#fff8e7aa,#fff8e7aa) 0/10px 3px no-repeat,linear-gradient(#fff8e7aa,#fff8e7aa) 100%/10px 3px no-repeat;border-radius:50%;position:absolute;inset:8px}.stick-knob{background:radial-gradient(circle at 35% 30%, #ffd9bf 0%, var(--son-sang) 40%, var(--son) 72%, var(--son-dam) 100%);border-radius:50%;width:54px;height:54px;margin:-27px 0 0 -27px;transition:transform .14s ease-out;position:absolute;top:50%;left:50%;box-shadow:0 4px 10px #0006,inset 0 -3px #0003,inset 0 0 0 2px #f6c35a99}#stick.on .stick-knob{transition:none}#stick.on .stick-base{background:radial-gradient(circle,#fff8e740 0%,#fff8e726 58%,#fff8e766 100%);border-color:#fff8e7}html.touch #act-btn:not([hidden]){right:calc(var(--sar) + 16px);bottom:calc(var(--sab) + 18px);color:#fff6e6;text-shadow:0 1px #0006;background:radial-gradient(circle at 35% 30%, var(--son-sang) 0%, var(--son) 62%, var(--son-dam) 100%);width:76px;height:76px;box-shadow:0 4px 0 #5a120d, 0 8px 18px #0006, inset 0 0 0 3px var(--vang);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:50%;align-content:center;place-items:center;gap:1px;padding:0;font-size:13px;line-height:1.05;animation:1.8s ease-in-out infinite nut-moi;display:grid;position:absolute}#act-btn svg{width:28px;height:28px}#act-btn.press{box-shadow:0 1px 0 #5a120d, 0 4px 10px #0006, inset 0 0 0 3px var(--vang);transform:translateY(3px)}@keyframes nut-moi{50%{box-shadow:0 4px 0 #5a120d, 0 0 0 9px #f6c35a40, inset 0 0 0 3px var(--vang)}}html.touch.kb-open #stick,html.touch.kb-open #act-btn{display:none}@media (orientation:landscape){html.touch #actions{left:calc(var(--sal) + var(--stick) + 52px);right:calc(var(--sar) + 104px);bottom:calc(var(--sab) + 8px);max-height:calc(100% - var(--sat) - var(--sab) - 56px)}html.touch #actions .targets{max-height:none}html.touch #hud:has(#stick[hidden]) #actions{left:calc(var(--sal) + 8px)}html.touch #chat.open{left:auto;right:calc(var(--sar) + 104px);width:min(380px,52vw);bottom:max(calc(var(--kb) + 8px), calc(var(--sab) + 8px))}html.touch #chat-log{max-height:max(56px, min(48vh, 240px, calc(100vh - var(--kb) - var(--sat) - 110px)))}html.touch #hud:has(#chat.open) #actions{display:none}}#story{background:var(--night);color:#ffe9b8;border-radius:999px;justify-self:center;margin:4px 0 2px;padding:4px 16px;font-size:.95rem;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 2px #e8c77a66,0 4px 12px #1b244033}#story:hover,#story:focus-visible{transform:translateY(-1px);box-shadow:0 0 0 2px #e8c77a,0 6px 16px #1b244055}@media (max-height:700px){#story{margin:2px 0 0;padding:2px 12px;font-size:.85rem}}#story-book{--sb-accent:var(--night);z-index:60;padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));background:radial-gradient(1px 1px at 12% 18%,#fff9 50%,#0000 51%),radial-gradient(1px 1px at 78% 12%,#fff8 50%,#0000 51%),radial-gradient(1.5px 1.5px at 64% 32%,#fff7 50%,#0000 51%),radial-gradient(1px 1px at 30% 72%,#fff6 50%,#0000 51%),radial-gradient(1px 1px at 90% 80%,#fff7 50%,#0000 51%),radial-gradient(at 50% 20%,#2e3a6b 0%,#18203f 55%,#0b0f22 100%);place-items:center;animation:.3s sb-fade-in;display:grid;position:fixed;inset:0}.sb-book{width:100%;max-width:560px;height:100%;max-height:920px;color:var(--ink);background:radial-gradient(circle at 20% 30%, #f3e6c455 0 2px, transparent 3px) 0 0 / 23px 29px, radial-gradient(circle at 70% 60%, #e9d8ad44 0 1px, transparent 2px) 0 0 / 17px 19px, linear-gradient(180deg, #fffaf0, var(--paper) 40%, #f8ecd0);border-radius:18px;outline:none;grid-template-rows:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;box-shadow:0 24px 60px #000a,inset 0 0 0 2px #fff,inset 0 0 0 5px #e8d6a8,inset 0 0 50px #d9c49a66}.sb-book[data-tone=ma]{--sb-accent:#6b4fa3}.sb-book[data-tone=village]{--sb-accent:var(--jade)}.sb-book[data-tone=ghost]{--sb-accent:#6a6fb5}.sb-top{justify-content:space-between;align-items:center;gap:8px;padding:10px 12px 6px 16px;display:flex}.sb-brand{color:var(--red);white-space:nowrap;font-weight:700}.sb-count{opacity:.65;font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:600}.sb-tools{align-items:center;gap:6px;display:flex}.sb-icon{width:36px;height:36px;color:var(--ink);background:#fff;border:2px solid #e2cfa4;border-radius:50%;place-items:center;padding:0;font-size:1rem;line-height:1;display:grid}.sb-icon:hover{border-color:var(--red)}.sb-skip{background:var(--night);padding:6px 12px;font-size:.9rem}.sb-spread{flex-direction:column;min-height:0;padding:0 14px;display:flex}.sb-art{aspect-ratio:3/2;background:#1b2440;border-radius:14px;flex:none;margin:0;position:relative;overflow:hidden;box-shadow:0 6px 18px #3b2a1a40,0 0 0 3px #fff}.sb-art img{object-fit:cover;width:100%;height:100%;display:block}.sb-text{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:10px 4px 18px;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 18px),#0000);mask-image:linear-gradient(#000 calc(100% - 18px),#0000)}.sb-kicker{letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--sb-accent);border-radius:999px;align-self:flex-start;margin:0 0 2px;padding:1px 10px;font-size:.78rem;font-weight:700;display:inline-block}#sb-title{color:var(--red);margin:2px 0 6px;font-size:clamp(1.35rem,2.6vw + .6rem,2.1rem);line-height:1.15}.sb-story{margin:0 0 10px;font-size:1.02rem;line-height:1.55}.sb-rule{border:2px solid #ecdcb4;border-left:5px solid var(--red);background:#fffdf6;border-radius:12px;margin:0 0 8px;padding:8px 12px;font-size:.95rem;line-height:1.45}.sb-rule b{background:var(--red);color:#fff;letter-spacing:.03em;vertical-align:1px;border-radius:6px;margin-right:6px;padding:0 8px;font-size:.8rem;display:inline-block}.sb-note{opacity:.8;margin:0;font-size:.86rem;line-height:1.4}.sb-note:before{content:"✦ ";color:var(--sb-accent)}.sb-cta:empty{display:none}.sb-cta{text-align:center;margin-top:12px}.sb-go{border-radius:999px;padding:10px 26px;font-size:1.1rem;box-shadow:0 6px 16px #c8432b55}.sb-nav{justify-content:space-between;align-items:center;gap:8px;padding:8px 12px 12px;display:flex}.sb-prev,.sb-next{border-radius:50%;flex:none;place-items:center;width:44px;height:44px;padding:0;font-size:1rem;display:grid;box-shadow:0 4px 10px #c8432b44}.sb-dots{flex-wrap:wrap;flex:1;justify-content:center;gap:4px;display:flex}.sb-dot{width:12px;height:12px;box-shadow:none;background:#e0cc9f;border:0;border-radius:6px;padding:0;transition:width .2s,background .2s}.sb-dot.on{background:var(--red);width:26px}.sb-dot:hover{background:#c9a96a}.sb-dot.on:hover{background:var(--red)}.sb-tap{background:var(--night);color:#ffe9b8;border-radius:999px;padding:8px 18px;animation:1.4s ease-in-out infinite sb-pulse;position:absolute;bottom:72px;left:50%;transform:translate(-50%);box-shadow:0 6px 18px #0006}@media (min-aspect-ratio:5/4){.sb-book{max-width:1180px;max-height:720px}.sb-spread{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);padding:0;display:grid;position:relative}.sb-spread:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#b8a07022 35%,#8a6d3a33 50%,#b8a07022 65%,#0000);width:26px;position:absolute;top:0;bottom:0;left:55.6%;transform:translate(-50%)}.sb-art{aspect-ratio:auto;background:0 0;place-self:center;width:auto;max-width:calc(100% - 28px);height:auto;max-height:calc(100% - 8px);margin:0 14px 0 18px}.sb-art img{aspect-ratio:3/2;width:auto;max-width:100%;height:auto;max-height:100%}.sb-text{flex-direction:column;justify-content:safe center;padding:6px 22px 18px 26px;display:flex}}@media (min-aspect-ratio:5/4) and (min-height:600px){.sb-story{font-size:1.08rem}}@media (max-height:500px){.sb-top{padding:6px 10px 4px 14px}.sb-icon{width:30px;height:30px;font-size:.9rem}.sb-skip{padding:4px 10px;font-size:.85rem}.sb-nav{padding:4px 10px 8px}.sb-prev,.sb-next{width:36px;height:36px}.sb-dot{width:10px;height:10px}.sb-dot.on{width:20px}#sb-title{margin-bottom:4px;font-size:1.3rem}.sb-story{margin-bottom:8px;font-size:.95rem;line-height:1.45}.sb-rule{padding:6px 10px;font-size:.88rem}.sb-note{font-size:.8rem}.sb-tap{bottom:52px}}@media (max-width:400px){.sb-top{padding-left:12px}.sb-brand{font-size:.95rem}.sb-count{display:none}.sb-spread{padding:0 10px}.sb-dot{width:10px;height:10px}.sb-dot.on{width:20px}.sb-dots{gap:3px}}.sb-spread.turn-next .sb-text{animation:.42s cubic-bezier(.2,.7,.2,1) sb-slide-next}.sb-spread.turn-prev .sb-text{animation:.42s cubic-bezier(.2,.7,.2,1) sb-slide-prev}.sb-spread.turn-next .sb-art img,.sb-spread.turn-prev .sb-art img{animation:.5s sb-art-in}@media (min-aspect-ratio:5/4){.sb-spread{perspective:1600px}.sb-spread.turn-next .sb-text{transform-origin:0;animation:.55s cubic-bezier(.2,.7,.2,1) sb-flip-next}.sb-spread.turn-prev .sb-art{transform-origin:100%;animation:.55s cubic-bezier(.2,.7,.2,1) sb-flip-prev}.sb-spread.turn-prev .sb-text{animation:.4s sb-fade-in}}@keyframes sb-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sb-art-in{0%{opacity:.25;transform:scale(1.03)}to{opacity:1;transform:none}}@keyframes sb-slide-next{0%{opacity:0;transform:translate(28px)}to{opacity:1;transform:none}}@keyframes sb-slide-prev{0%{opacity:0;transform:translate(-28px)}to{opacity:1;transform:none}}@keyframes sb-flip-next{0%{opacity:.2;transform:rotateY(-70deg);box-shadow:-30px 0 40px -20px #3b2a1a55}to{opacity:1;box-shadow:none;transform:none}}@keyframes sb-flip-prev{0%{opacity:.2;transform:rotateY(70deg)}to{opacity:1;transform:none}}@keyframes sb-pulse{50%{transform:translate(-50%)scale(1.06)}}@media (prefers-reduced-motion:reduce){#story-book,.sb-spread.turn-next .sb-text,.sb-spread.turn-prev .sb-text,.sb-spread.turn-next .sb-art,.sb-spread.turn-prev .sb-art,.sb-spread.turn-next .sb-art img,.sb-spread.turn-prev .sb-art img{animation:.2s sb-fade-in;transform:none}.sb-tap{animation:none}}