@font-face{font-family:Fredoka;src:url(assets/fonts/Fredoka.ttf) format("truetype");font-weight:300 700;font-display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#ffd6ec;font-family:Fredoka,"Trebuchet MS",sans-serif;color:#5a2d1a;touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#splash{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:50;transition:opacity .6s}
#splash img{width:min(70vw,60vh);opacity:0;animation:lf 2.6s ease forwards}
@keyframes lf{0%{opacity:0;transform:scale(.94)}30%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}
.scr{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(5vh,env(safe-area-inset-top)) 16px max(4vh,env(safe-area-inset-bottom));z-index:5}
.tbox{text-align:center;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-1deg)}}
.logo{display:flex;flex-direction:column;line-height:.9;font-weight:700}
.logo span{-webkit-text-stroke:2px #7a2e4a;paint-order:stroke fill}
.l1{font-size:min(17vw,13vh);color:#fff;text-shadow:0 5px 0 #ff5fa8,0 9px 0 #7a2e4a,0 14px 18px #0005}
.l2{font-size:min(14vw,10.5vh);color:#ffe066;text-shadow:0 5px 0 #ff9a3c,0 9px 0 #7a2e4a,0 14px 18px #0005;margin-top:4px}
.by{margin-top:14px;font-weight:600;font-size:min(4.6vw,3.4vh);letter-spacing:2px;color:#fff;background:#7a2e4acc;display:inline-block;padding:4px 14px;border-radius:20px}
.tbtns{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,80vw)}
.row{display:flex;gap:10px;width:100%}
button{font-family:inherit;cursor:pointer;border:none}
.big{font-size:30px;font-weight:700;color:#fff;background:linear-gradient(#ff7fbf,#ff4f9a);border-radius:26px;padding:12px 0;width:100%;box-shadow:0 6px 0 #b8306e,0 10px 18px #0004;-webkit-text-stroke:1px #b8306e;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
.big:active,.mid:active{transform:translateY(4px);box-shadow:0 2px 0 #b8306e}
.mid{flex:1;font-size:20px;font-weight:600;color:#7a2e4a;background:linear-gradient(#fff,#ffe3f1);border-radius:20px;padding:10px 0;box-shadow:0 5px 0 #e59cc0}
.site{display:block;text-align:center;width:100%;font-size:18px;font-weight:600;color:#fff;background:#6a4fd6;border-radius:18px;padding:9px 0;text-decoration:none;box-shadow:0 5px 0 #3f2b93}
#hud{position:fixed;inset:0;pointer-events:none;z-index:6}
#hud>*,#hud .hr>*{pointer-events:auto}
.ib{width:52px;height:52px;border-radius:16px;background:#fff center/62% no-repeat;box-shadow:0 4px 0 #e59cc0,0 6px 10px #0003}
.ib:active{transform:translateY(3px)}
#hBack{position:absolute;left:10px;top:max(10px,env(safe-area-inset-top))}
.hr{position:absolute;right:10px;top:max(10px,env(safe-area-inset-top));display:flex;gap:8px;align-items:center}
#coins{display:flex;align-items:center;gap:6px;background:#fffd;border-radius:18px;padding:6px 12px 6px 6px;font-weight:700;font-size:20px;box-shadow:0 3px 0 #e59cc0}
.coin{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6b0,#ffc93c 45%,#e08a00);border:2px solid #a85d00;display:inline-block}
#placeName{position:absolute;left:72px;top:max(18px,calc(env(safe-area-inset-top) + 8px));font-weight:700;font-size:20px;color:#fff;-webkit-text-stroke:1px #7a2e4a;text-shadow:0 2px 0 #7a2e4a;pointer-events:none!important}
#miniBtn{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:auto;padding:10px 26px;font-size:22px}
#tip{position:fixed;left:50%;transform:translateX(-50%);top:78px;z-index:7;background:#fffe;color:#7a2e4a;font-weight:600;font-size:18px;padding:8px 16px;border-radius:16px;box-shadow:0 4px 10px #0003;pointer-events:none;text-align:center;max-width:90vw}
#modal{position:fixed;inset:0;background:#0007;z-index:20;display:flex;align-items:center;justify-content:center;padding:12px}
.card{background:#fff8fc;border-radius:26px;padding:16px;width:min(560px,100%);max-height:92vh;overflow:auto;box-shadow:0 8px 0 #e59cc0;text-align:center;touch-action:pan-y}
.card h2{margin:4px 0 10px;font-size:28px;color:#ff4f9a}
.tog{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:600;padding:10px 6px;border-bottom:2px dashed #f6cde2}
.sw{width:64px;height:34px;border-radius:20px;background:#ccc;position:relative;transition:.2s}
.sw:after{content:"";position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#fff;transition:.2s}
.sw.on{background:#4fcf7a}.sw.on:after{left:34px}
.mb{margin-top:10px;width:100%;font-size:20px;font-weight:600;border-radius:18px;padding:11px 0;color:#fff;background:#ff6fae;box-shadow:0 4px 0 #b8306e}
.mb.alt{background:#6a4fd6;box-shadow:0 4px 0 #3f2b93;display:block;text-decoration:none}
.mb.gray{background:#b9a3ae;box-shadow:0 4px 0 #8a7480}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;font-size:17px;font-weight:600;border-radius:14px;padding:8px 0;background:#ffe3f1;color:#7a2e4a}
.tabs button.on{background:#ff6fae;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.it{background:#fff;border-radius:18px;padding:8px;box-shadow:0 3px 0 #f2c1da;display:flex;flex-direction:column;align-items:center;gap:4px}
.it img{width:96px;height:96px;object-fit:contain}
.it b{font-size:15px}
.it button{width:100%;border-radius:12px;padding:6px 0;font-size:16px;font-weight:600;color:#fff;background:#4fcf7a;display:flex;align-items:center;justify-content:center;gap:4px}
.it button .coin{width:18px;height:18px}
.it button.no{background:#c9b7c0}
.it button.own{background:#fff;color:#4fcf7a;border:2px solid #4fcf7a}
textarea,input[type=text]{width:100%;font-family:inherit;font-size:18px;border-radius:14px;border:2px solid #f2c1da;padding:10px;margin-top:8px;user-select:text;-webkit-user-select:text}
textarea{height:120px;resize:none}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:#7a2e4a;color:#fff;font-weight:600;font-size:19px;padding:9px 18px;border-radius:18px;opacity:0;transition:.3s;z-index:30;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (orientation:landscape) and (max-height:500px){.scr{flex-direction:row;padding:3vh 5vw}.l1{font-size:15vh}.l2{font-size:12vh}.tbtns{width:min(300px,38vw)}.big{font-size:24px;padding:9px 0}.mid{font-size:17px;padding:8px 0}.site{font-size:16px;padding:7px 0}.ib{width:44px;height:44px}#tip{top:60px}}
.srow{display:flex;justify-content:space-between;align-items:center;padding:8px 6px;font-size:21px;font-weight:600;border-bottom:2px dashed #ffd0e6}
.ver{margin-top:12px;font-size:13px;color:#a07a8a}
.inp{display:block;width:100%;box-sizing:border-box;margin-top:8px;font:inherit;font-size:18px;padding:10px;border-radius:14px;border:2px solid #ffb3d9;background:#fff}
.cbar,.earn{display:inline-flex;align-items:center;gap:6px;font-size:22px;font-weight:700;color:#c98a1e;margin-bottom:8px}
.earn{font-size:40px}.earn .coin{width:40px;height:40px}
.hint{font-size:15px;color:#a07a8a}
.card h3{margin:10px 0 6px;color:#7a2e4a}
.card p{font-size:18px}
.ib{background:#ff6fae;box-shadow:0 4px 0 #b8306e,0 6px 10px #0003;display:flex;align-items:center;justify-content:center;padding:0}
.ib svg{width:64%;height:64%;display:block}
@media (max-width:480px){#placeName{display:none}}
#miniBtn{left:auto;right:12px;transform:none;font-size:18px;padding:8px 16px;white-space:nowrap;border-radius:20px;transform-origin:right bottom}
body.inmini #tip{top:116px;font-size:16px;padding:6px 14px;white-space:nowrap}
@media (orientation:landscape) and (max-height:500px){body.inmini #tip{top:102px}}
/* v2.0.3 title layout: room for the waving kids in landscape, soft glow behind the logo */
#title .tbox{position:relative}
#title .tbox::before{content:'';position:absolute;left:50%;top:45%;width:120%;height:150%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,0));z-index:-1;pointer-events:none}
@media (orientation:landscape) and (max-height:500px){#title.scr{padding:3vh 3.5vw}#title .l1{font-size:12.5vh}#title .l2{font-size:10vh}#title .tbtns{width:min(250px,30vw)}}
/* v2.0.3: slow gentle logo float; Play glows instead of shaking */
#title .tbox{animation:tfloat 9s ease-in-out infinite}
@keyframes tfloat{50%{transform:translateY(-4px)}}
#title .big{animation:neon 2.8s ease-in-out infinite;transform:none}
@keyframes neon{0%,100%{box-shadow:0 6px 0 #b8306e,0 10px 18px #0004,0 0 8px 2px rgba(255,80,200,.35)}50%{box-shadow:0 6px 0 #b8306e,0 10px 18px #0004,0 0 22px 7px rgba(255,60,190,.75)}}