html,body{height:100%;margin:0;background:#fff;overflow:hidden;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}#app{position:fixed;inset:0}h1{font-family:system-ui;font-size:1.5rem;color:#330800}#overlay{position:fixed;inset:0;background:#fffdf8;color:#111;display:grid;place-items:center;z-index:10;transition:opacity .8s ease}#overlay-inner{position:relative;overflow:hidden;text-align:center;max-width:60vw;padding:95px 170px;background:#fff4e9;border-radius:2px;box-shadow:1px 2px 2px #5111002e;box-sizing:border-box}#overlay-inner:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");background-size:820px 820px;mix-blend-mode:luminosity;opacity:.5}.logo{font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:22px;margin-bottom:12px;display:flex;justify-content:center;padding:10px}.logo img{width:150px;height:auto;display:block;margin-bottom:20px}.intro{opacity:.8;line-height:1.4;margin-bottom:24px}#joystick{position:fixed;left:16px;bottom:16px;width:0;height:0;z-index:5;touch-action:none;display:none}.joy-base,.joy-stick{position:absolute;border-radius:999px;pointer-events:none}.joy-base{width:140px;height:140px;margin-left:-70px;margin-top:-70px;background:#0000000f;border:2px solid rgba(0,0,0,.12)}.joy-stick{width:70px;height:70px;margin-left:-35px;margin-top:-35px;background:#0003}@media (pointer: coarse){#joystick{display:block}}#hint{position:fixed;right:12px;bottom:12px;padding:6px 10px;background:#0000000f;color:#222;border-radius:8px;font-size:12px;z-index:4;-webkit-user-select:none;user-select:none;opacity:.3}.cta{border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#511100;position:relative;transition:color .25s ease;filter:drop-shadow(0 0px 4px #fff4e9);background-color:#fff4e9;border-radius:2px}.cta:active{transform:scale(.97)}.cta:focus,.cta:focus-visible{outline:none}.hover-underline-animation{position:relative;display:inline-block;padding-bottom:3px;background-image:linear-gradient(105deg,#330800,#511100 45%,#330800);background-size:220% 100%;background-position:0% 50%;animation:textShine 5s ease-in-out infinite alternate;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0px 3px #fff4e9)}.hover-underline-animation:before{content:"";position:absolute;width:100%;transform:scaleX(0);height:1px;bottom:0;left:0;background-color:currentColor;transform-origin:bottom right;transition:transform .25s ease-out}.cta:hover .hover-underline-animation:before{transform:scaleX(1);transform-origin:bottom left}.cta[disabled]{opacity:.4;cursor:default;pointer-events:none}@keyframes textShine{0%{background-position:0% 50%}to{background-position:100% 50%}}#hud{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:30;pointer-events:none}#hud button{pointer-events:auto}#hud-sound{width:48px;height:48px;border-radius:999px;border:none;padding:0;display:grid;place-items:center;background:#fff4e9;box-shadow:1px 2px 2px #0000002e;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}#hud-sound:active{transform:scale(.94)}#hud-sound img{width:26px;height:26px}#hud-info{width:48px;height:48px;border-radius:999px;border:none;padding:0;display:grid;place-items:center;background:#fff4e9;box-shadow:1px 2px 2px #0000002e;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}#hud-info:active{transform:scale(.94)}#hud-info img{width:30px;height:30px}.hud-slots{display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(-12px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}.hud-slots.visible{opacity:1;transform:translateY(0);pointer-events:auto}.dev-reset-btn{position:fixed;left:16px;top:16px;z-index:30;padding:8px 14px;border-radius:999px;border:none;background:#141211d9;color:#fff4e9;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;box-shadow:0 12px 26px #00000047;opacity:.7;transition:opacity .2s ease,transform .2s ease}.dev-reset-btn:hover{opacity:1;transform:translateY(-2px)}.dev-reset-btn:active{transform:translateY(0) scale(.95)}.hud-slot{width:35px;height:35px;border-radius:5px;border:2px solid rgba(255,255,255,.75);background:#0000001a;transition:transform .3s ease,background-color .3s ease,box-shadow .3s ease,border-color .3s ease;transform:scale(1);pointer-events:none}.hud-slot.filled{border-color:transparent;box-shadow:1px 2px 2px #00000047}.hud-slot.pop{animation:slotPop .45s ease}.hud-slot.selected{box-shadow:0 0 0 2px #fffc,0 8px 18px #00000040;transform:scale(1.05)}@keyframes slotPop{0%{transform:scale(1)}35%{transform:scale(1.5)}60%{transform:scale(.96)}to{transform:scale(1)}}#tutorial-modal{position:fixed;inset:0;background:#00000073;display:none;align-items:center;justify-content:center;z-index:9;padding:24px}#tutorial-modal.open{display:flex}.tutorial-modal-content{background:#fff4e9;color:#511100;border-radius:5px;padding:28px;max-width:min(360px,90vw);width:100%;box-shadow:0 18px 36px #00000047;transform:scale(.9);opacity:0;transition:transform .25s ease,opacity .25s ease;position:relative}#tutorial-modal.open .tutorial-modal-content{transform:scale(1);opacity:1}.tutorial-modal-title{margin:0 0 14px;font-size:25px;letter-spacing:.05em;text-transform:uppercase;text-align:center}.tutorial-modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:999px;border:none;background:#51110014;color:#511100;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s ease,transform .2s ease}.tutorial-modal-close:active{transform:scale(.92)}.tutorial-task-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.tutorial-task-list li{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}.tutorial-task-list li:before{content:"";width:12px;height:12px;border-radius:999px;border:2px solid #511100;background:transparent;flex-shrink:0}.tutorial-task-list li.done{opacity:.55;text-decoration:line-through}.tutorial-task-list li.done:before{background:#511100}#gather-btn{position:fixed;bottom:18%;left:50%;transform:translate(-50%);z-index:6;pointer-events:auto;transition:opacity .2s ease,transform .2s ease;padding:15px}#gather-btn .cta-label{display:inline-flex;align-items:center;text-align:start!important;gap:12px}.gather-flower-preview{width:26px;height:26px;border-radius:4px;box-shadow:1px 2px 2px #0000002e;opacity:0;transition:opacity .2s ease,background-color .2s ease}#gather-btn .gather-texts{display:flex;flex-direction:column;align-items:flex-start;text-align:start!important;gap:2px;line-height:1.05}#gather-btn .flower-name{font-weight:100;letter-spacing:.05em;text-transform:uppercase;text-align:start!important;font-size:12px;margin-top:3px}#gather-btn.hidden{opacity:0;pointer-events:none;transform:translate(-50%) translateY(15px)}#fountain-btn{position:fixed;bottom:20%;left:50%;transform:translate(-50%);z-index:6;pointer-events:auto;transition:opacity .2s ease,transform .2s ease;padding:15px 15px 10px}#fountain-btn.hidden{opacity:0;pointer-events:none;transform:translate(-50%) translateY(15px)}#tutorial-hint{position:fixed;bottom:10%;left:50%;transform:translate(-50%,12px) scale(1);padding:14px 32px;border-radius:2px;background:#fff4e9f5;color:#511100;font-size:18px;font-weight:650;letter-spacing:.04em;opacity:0;transition:opacity .25s ease,transform .38s ease;pointer-events:none;z-index:7;text-align:center;display:inline-flex;align-items:center;justify-content:center;width:min(360px,calc(100vw - 40px));min-width:220px;max-width:calc(100vw - 40px);white-space:normal;box-shadow:1px 2px 2px #0000002e}#tutorial-hint.visible{opacity:1;transform:translate(-50%) scale(1)}#tutorial-hint.closing{opacity:0;transform:translate(calc(-50% + var(--hint-target-x, 0px)),calc(12px + var(--hint-target-y, 0px))) scale(.45)}@media (max-width: 768px){#overlay{padding:24px 16px}#overlay-inner{padding:48px 32px;max-width:90vw;width:100%;margin:0 auto}.logo{font-size:18px;padding:8px}.logo img{width:120px;margin-bottom:12px}.intro{font-size:.95rem}#joystick{left:12px;bottom:12px}#hint{right:10px;bottom:10px;padding:6px 8px;font-size:11px}#hud{top:12px;right:12px;gap:8px}#hud-sound,#hud-info{width:42px;height:42px}#hud-sound img{width:22px;height:22px}#hud-info img{width:24px;height:24px}.hud-slots{gap:6px}.hud-slot{width:30px;height:30px}.dev-reset-btn{top:12px;left:12px;padding:6px 12px;font-size:11px}.cta{font-size:12px;letter-spacing:.08em;padding:10px 18px;border-radius:4px}.hover-underline-animation{animation:none;background-image:none;background-size:auto;background-position:initial;-webkit-text-fill-color:currentColor;color:#511100}.hover-underline-animation:before{transform:scaleX(1)}#gather-btn,#fountain-btn{bottom:11%;width:min(360px,calc(100% - 32px));padding:12px 16px}#gather-btn .cta-label{gap:8px}#gather-btn .gather-texts{line-height:1.15}#gather-btn .flower-name{font-size:11px}.gather-flower-preview{width:22px;height:22px}#tutorial-modal{padding:16px}.tutorial-modal-content{padding:22px 18px;border-radius:4px;max-width:min(320px,calc(100vw - 32px))}.tutorial-modal-title{font-size:20px}.tutorial-task-list li{font-size:14px}.tutorial-modal-close{width:32px;height:32px}#tutorial-hint{padding:12px 18px;font-size:15px;letter-spacing:.02em}}@media (max-width: 480px){#overlay-inner{padding:36px 22px}.logo{letter-spacing:.12em}.logo img{width:100px}#hud{gap:6px}#hud-sound,#hud-info{width:38px;height:38px}#hud-sound img,#hud-info img{width:20px;height:20px}.hud-slot{width:28px;height:28px}#gather-btn,#fountain-btn{bottom:15%;padding:10px 14px;width:min(320px,calc(60% - 24px))}#gather-btn .flower-name{font-size:12px}.gather-flower-preview{width:28px;height:28px}.cta{font-size:14px;letter-spacing:.06em;padding:10px 16px}#tutorial-modal{padding:12px}.tutorial-modal-content{padding:20px 16px}#tutorial-hint{width:calc(100vw - 28px);min-width:auto;font-size:14px;padding:10px 14px}}