@charset "UTF-8";
@font-face{font-family:Prompt;font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/Prompt-Regular.ttf') format('truetype')}
@font-face{font-family:Prompt;font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/Prompt-SemiBold.ttf') format('truetype')}
@font-face{font-family:Prompt;font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/Prompt-Bold.ttf') format('truetype')}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:Prompt,"Leelawadee UI",Tahoma,sans-serif;background:#17103e;color:#fff;font-synthesis:none}
button,input,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #d99b22;outline-offset:3px}
button:disabled{cursor:wait;opacity:.65}
[hidden]{display:none!important}
#festival{position:fixed;inset:0;overflow:hidden;isolation:isolate}
.scenery{position:absolute;top:0;left:50%;width:max(100%,177.777778dvh);height:100%;transform:translateX(-50%);pointer-events:none}
.background{display:block;width:100%;height:100%}
.foreground{position:absolute;top:0;left:50%;transform:translateX(-50%);width:max(100%,177.777778dvh);height:100%;z-index:7;pointer-events:none}
.button-caption{font-family:Prompt,sans-serif;font-size:64px;font-weight:700;fill:#602588;stroke:#fff;stroke-width:7px;paint-order:stroke fill;stroke-linejoin:round}
/* One GIF only. Water strokes never sample or duplicate the scene. */
.water{position:absolute;left:0;right:0;top:67%;height:8%;overflow:hidden;mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.water svg{width:120%;height:100%;margin-left:-10%;overflow:visible}
.wave{fill:none;stroke-width:1.4;animation:current 12s ease-in-out infinite alternate;transform-origin:center}
.wave-near{stroke:#f6d89c;opacity:.15}
.wave-far{stroke:#110d42;stroke-width:3;opacity:.23;animation-delay:-6s;animation-duration:17s}
@keyframes current{from{transform:translate(-18px,-2px) scaleX(.99)}to{transform:translate(18px,2px) scaleX(1.01)}}
.heading{position:absolute;top:3.3%;left:13%;width:74%;pointer-events:none}
.heading svg{display:block;width:100%;height:auto;overflow:visible}
.heading .heading-portrait{display:none}
.counter{position:absolute;top:28%;right:4%;margin:0;display:flex;align-items:baseline;gap:8px;font-size:clamp(12px,1.4vw,25px);color:#fff;text-shadow:0 1px 2px #17102e,0 2px 4px #17102e}
.counter strong{font-size:clamp(32px,4.4vw,72px);font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums}
#river{position:absolute;inset:0;pointer-events:none}
.krathong{position:absolute;left:0;top:0;color:#fff;pointer-events:none;will-change:transform,opacity}
.krathong[inert]{pointer-events:none}
.vessel-button{display:block;width:100%;height:100%;padding:0;border:0;background:none;pointer-events:auto}
.krathong[inert] *{pointer-events:none!important}
.vessel{position:relative;display:block;width:100%;height:100%;transform-origin:50% 85%}
.krathong img{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #17102e66)}
.wake{position:absolute;left:10%;width:80%;height:9%;bottom:7%;border:1px solid #dacba84d;border-radius:50%;transform:scaleX(1.1);background:#17102e1f}
.wish-card{position:absolute;bottom:calc(100% + 8px);width:max-content;max-width:min(180px,calc(100vw - 16px));padding:8px 10px;border-radius:12px;background:rgb(255 255 255 / .84);color:#24202b;font-size:clamp(11px,1vw,14px);line-height:1.6;text-align:left;box-shadow:0 2px 8px #19112d22;pointer-events:auto;overflow-wrap:anywhere}
.wish-text{margin:0;max-height:min(21dvh,160px);overflow:auto;white-space:pre-wrap;overscroll-behavior:contain}
.wish-name{display:block;margin-top:4px;max-height:3.2em;overflow:auto}
.close-wish{position:absolute;right:0;top:-20px;width:28px;height:28px;border:1px solid #ddd;border-radius:50%;background:#fffffff2;color:#30223e;font-size:20px;line-height:1;box-shadow:0 2px 4px #0002}
.action{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max(27.083333vw,48.148148dvh);max-width:95vw;height:14dvh;min-height:48px;border:0;padding:0;background:none;z-index:5;border-radius:50% 50% 15% 15%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#status{position:absolute;bottom:max(2px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);font-size:clamp(9px,2.4vw,12px);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fffaf4ed;color:#21172c;border-radius:10px;padding:2px 8px;z-index:8;text-align:center;margin:0;pointer-events:none}
#status:empty{display:none}
#preview{position:absolute;z-index:7;text-align:center;pointer-events:none}
#preview-art{display:block;width:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #22173e)}
.preview-wish{position:relative;left:50%;transform:translateX(-50%);width:var(--card-width,140px);max-height:16dvh;overflow:auto;overflow-wrap:anywhere;background:#fffdf3f2;color:#31213b;border-radius:12px;padding:8px 10px;font-size:13px;pointer-events:auto}
.preview-wish p{margin:3px 0 0;white-space:pre-wrap}
.preview-tools{position:relative;left:50%;transform:translateX(-50%);width:var(--card-width,140px);display:flex;flex-wrap:wrap;justify-content:center;gap:4px;pointer-events:auto}
.preview-tools button{border:1px solid #ddd0e0;border-radius:20px;background:#fffdf5;color:#52255d;padding:6px 14px;min-height:40px;font-size:12px}
dialog{color-scheme:light;width:min(520px,calc(100% - 28px));max-height:90dvh;padding:26px;border:0;border-radius:16px;background:#fff;color:#111;box-shadow:0 15px 80px #160c35a6;overscroll-behavior:contain}
dialog::backdrop{background:#130d37a8}
.close{position:absolute;right:8px;top:8px;background:#f4f4f4;color:#333;border:0;border-radius:50%;width:36px;height:36px;font-size:25px}
h2{font-size:21px;margin:0 32px 10px 0}
.intro{font-size:12px;line-height:1.65;margin:0 0 20px}
form{display:grid;gap:8px}
form label,legend{font-size:14px;font-weight:600}
input,textarea{border:1px solid #d5d5dc;background:#fff;border-radius:7px;width:100%;padding:10px 12px;color:#111;min-height:44px}
dialog label,dialog legend,dialog h2,dialog .intro{color:#111}dialog input::placeholder,dialog textarea::placeholder{color:#555;opacity:1}
textarea{resize:vertical;max-height:180px}
small{color:#a22d2d;font-size:11px;line-height:1.5;margin-bottom:9px}
fieldset{border:0;padding:0;margin:3px 0 0;min-width:0}
.selection-art{display:block;margin:0 auto 8px;width:120px;height:120px;object-fit:contain}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,96px),1fr));grid-auto-rows:1fr;gap:8px}
.choice{position:relative;cursor:pointer;display:flex;min-width:0;height:100%}
.choice input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0}
.choice span{display:grid;grid-template-rows:64px auto;align-content:start;gap:6px;width:100%;height:100%;border:2px solid #e4e0e5;border-radius:9px;padding:8px 6px;text-align:center;background:#fafafa;color:#111}
.choice img{display:block;width:100%;height:64px;object-fit:contain}
.choice b{display:block;font-size:11px;font-weight:400;line-height:1.6;overflow-wrap:anywhere}
.choice input:checked+span{border-color:#ad5a91;background:#fff3fc}
.choice input:focus-visible+span{outline:3px solid #cc951c;outline-offset:2px}
.form-submit{border:0;border-radius:25px;background:#f2bd46;color:#412614;min-height:46px;font-weight:700;margin-top:5px}
#form-error{font-size:12px;color:#a32330;margin:0}
#form-error:empty{display:none}
@media(orientation:portrait){
 .heading{top:10.5%;left:2%;width:96%}
 .heading .heading-landscape{display:none}.heading .heading-portrait{display:block}
 .counter{top:2%;right:auto;left:50%;transform:translateX(-50%);font-size:clamp(11px,2.8vw,20px);gap:5px;white-space:nowrap}
 .counter strong{font-size:clamp(33px,8vw,60px)}
 .preview-wish{font-size:12px}
}
@media(max-height:520px) and (orientation:landscape){
 .heading{top:2%;left:13%;width:74%}
 .counter{top:34%;font-size:11px}.counter strong{font-size:29px}
 .preview-wish{font-size:10px;max-height:16dvh}
 .preview-tools button{font-size:10px;padding:3px 9px;min-height:32px}
 #status{font-size:11px}dialog{max-height:94dvh;padding:20px}
 .selection-art{width:85px;height:85px}
}
@media(min-width:1100px) and (orientation:landscape){.heading{left:24%;width:52%}.counter{right:7.5%}}
@media(prefers-reduced-motion:reduce){.wave{animation:none}.krathong{will-change:auto}}