:root{font-family: 'Trebuchet MS',Arial,sans-serif;color:#fff4da;background:#07343e;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #ffdc75;outline-offset:3px}button:disabled{cursor:default;opacity:.65}[hidden]{display:none!important}#app{display:flex;justify-content:center;min-height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#17626a,#052c37 80%)}#stage{height:100dvh;max-height:1200px;aspect-ratio:3/4;position:relative;isolation:isolate;overflow:hidden;box-shadow:0 0 80px #0007;background:#e6bd7e;touch-action:none}canvas{width:100%;height:100%;display:block}.rail{flex:1;max-width:350px;padding:9vh 3vw;display:flex;flex-direction:column;justify-content:center;gap:22px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:bold;color:#76c5be;line-height:1.8}.rail h1{font-size:clamp(30px,3.2vw,60px);line-height:1.06;margin:0;letter-spacing:-2px}.rail h2{font-size:clamp(24px,2.5vw,42px);line-height:1.25;margin:0}.rail p{color:#a5c8c4;line-height:1.7;font-size:14px;margin:0}.rail .small{font-size:9px;letter-spacing:1.5px;line-height:2}.rail footer{font-size:10px;color:#78a7a6;margin-top:30px}.keys{font-size:33px;letter-spacing:8px;color:#ffd87c}.keys span{margin-left:44px}.note{border-top:1px solid #397079;border-bottom:1px solid #397079;padding:25px 0;line-height:2;color:#a5c8c4;font-size:12px}.note strong{font-size:10px;letter-spacing:1px}.right em{font-style:normal}#screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:#042b3659;backdrop-filter:blur(2px)}#screen:empty{display:none}.panel{width:100%;max-width:490px;max-height:94%;overflow:auto;background:linear-gradient(150deg,#0e4655f5,#062936fa);border:2px solid #4fb0b0;border-radius:25px;padding:25px;box-shadow:0 8px 0 #04212c,0 20px 50px #001b2670;text-align:center}.panel h2{font-size:26px;margin:4px 0 9px;color:#ffdf89}.panel p{color:#c6ded8;line-height:1.55;font-size:13px}.menu{background:linear-gradient(#07323e12,#062d38e6);border:0;box-shadow:none;padding:18px 30px;overflow:visible}.logo{width:100%;max-width:390px;filter:drop-shadow(0 8px 2px #0004);margin-bottom:0}.tag{font-weight:bold;font-size:14px!important;color:#fff5d8!important;letter-spacing:.3px}.hero-couple{height:140px;display:block;margin:5px auto 12px;filter:drop-shadow(0 8px 3px #0004)}.button{border:1px solid #579699;background:#164e5b;color:#fff2d7;padding:13px 16px;border-radius:13px;box-shadow:0 4px 0 #05212b;font-weight:bold;min-height:46px}.button:hover{filter:brightness(1.14);transform:translateY(-1px)}.primary{background:linear-gradient(#ff837c,#f45a62);border:2px solid #ffd5b5;color:#fff;box-shadow:0 5px 0 #a33447;text-shadow:0 1px #a43c43;font-size:20px}.wide{width:100%;margin:7px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.best{font-size:12px;letter-spacing:1px;color:#ffe19a;margin:18px 0 4px}.tiny{font-size:10px!important;color:#9fcac6!important}.back{float:left;border:0;background:#ffffff16;color:white;border-radius:8px;padding:8px 12px}.row{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 0;border-bottom:1px solid #ffffff18}.row img{width:52px;height:55px;object-fit:contain}.row div{flex:1}.row strong{display:block;font-size:14px}.row small{font-size:11px;color:#b6d5d0;line-height:1.5}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.stat{background:#ffffff0c;border:1px solid #3c6972;border-radius:12px;padding:12px;font-size:11px;color:#a9ccc6}.stat b{display:block;font-size:23px;color:#ffda7c;margin:4px}.outfit{background:#ffffff0a;border:1px solid #53747b;padding:10px;border-radius:13px}.outfit img{width:100%;height:115px;object-fit:contain}.outfit h3{font-size:14px;margin:4px}.pill{display:inline-block;background:#23665b;color:#d0ffcb;font-size:10px;padding:6px 9px;border-radius:20px;margin:5px}.locked{filter:grayscale(.9);opacity:.7}progress{width:100%;height:6px;accent-color:#f7cc65}.toggle{display:flex;justify-content:space-between;align-items:center;padding:17px 5px;border-bottom:1px solid #ffffff18;text-align:left}.toggle input{width:24px;height:24px;accent-color:#f97378}#hud{position:absolute;top:14px;left:12px;right:12px;display:flex;align-items:center;gap:7px}.hud-box{background:#072f3fe8;border:1px solid #6bb2af;border-radius:13px;padding:9px 12px;box-shadow:0 3px 0 #03232e;flex:1;font-size:10px;color:#9cc9c6}.hud-box b{font-size:19px;display:block;color:#fff0c7}.hud-box.hearts{flex:1.25;font-size:19px;white-space:nowrap;color:#ff7989}.pause{background:#073b4b;color:#fff0c7;border:2px solid #79bcb8;border-radius:12px;font-size:21px;width:43px;height:47px}#effects{position:absolute;top:82px;left:18px;right:18px;font-size:12px;pointer-events:none}.effect{display:inline-block;border-radius:18px;padding:7px 10px;margin:3px;background:#063949e8;border:1px solid #88c8d7}#festival{position:absolute;top:130px;left:12%;right:12%;background:#482052eb;border:2px solid #ffcf77;text-align:center;border-radius:14px;padding:10px;color:#ffe6a1;font-size:14px;font-weight:bold;pointer-events:none}#festival small{display:block;font-size:11px;color:white;margin-top:4px}#tutorial{position:absolute;top:26%;left:8%;right:8%;background:#063545f5;border:2px solid #ffdd8c;border-radius:18px;text-align:center;padding:20px;box-shadow:0 8px 20px #0004}#tutorial strong{display:block;font-size:21px;color:#ffdd8c;margin-bottom:8px}#tutorial p{font-size:13px;line-height:1.6}#tutorial button{font-size:11px;border:0;background:transparent;color:#bad5ce;text-decoration:underline;padding:12px}#toast{position:absolute;left:8%;right:8%;bottom:15%;text-align:center;background:#fff0ca;color:#133c44;border-radius:15px;font-weight:bold;font-size:13px;box-shadow:0 4px 20px #0004;opacity:0;transform:translateY(15px);transition:.25s;padding:0;pointer-events:none}#toast.visible{opacity:1;transform:translateY(0);padding:16px}#touch{position:absolute;bottom:12px;left:17%;right:17%;display:flex;gap:7px;opacity:.75}#touch button{flex:1;border:1px solid #b9e1d4;border-radius:12px;background:#063745c9;color:#fff;font-size:24px;padding:6px}#screen .sub{font-size:10px;letter-spacing:2px;color:#79c9c5}.storage-warning{font-size:11px;color:#ffe19a}@media(max-width:1050px){.rail{padding:5vh 2vw;max-width:240px}.rail.right{display:none}}@media(max-width:650px){.rail{display:none}#stage{height:100dvh;width:100vw;aspect-ratio:auto;max-height:none}.panel{padding:18px;max-width:440px}.menu{padding:15px 30px}.logo{max-width:290px}.hero-couple{height:110px}.grid{margin:10px 0}.button{padding:11px}#screen{padding:14px}.hud-box{padding:7px}.hud-box b{font-size:16px}#hud{top:max(10px,env(safe-area-inset-top))}#touch{bottom:max(10px,env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}