@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600;700&display=swap');*{box-sizing:border-box}html,body,#app,.screen{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Mitr",system-ui,sans-serif;color:#283e55}button{font:inherit;cursor:pointer}.screen{position:fixed;inset:0;background:url('assets/art-studio-bg.png') center/cover no-repeat}.hidden{display:none!important}.intro{display:grid;place-items:center;padding:12px}.intro:after{content:"";position:absolute;inset:0;background:#40546b33}.intro-card{z-index:1;width:min(600px,92vw);max-height:calc(100dvh - 26px);padding:clamp(15px,3vh,34px);text-align:center;background:#fffaf0f2;border:5px solid #fff;border-radius:38px;box-shadow:0 12px 0 #98572d,0 22px 50px #44251177}.palette{font-size:clamp(55px,12vh,100px);line-height:1;animation:tilt 2s ease-in-out infinite}.intro-card>p{margin:4px;color:#d05b3f;font-weight:700}.intro h1{margin:3px;font-size:clamp(34px,6.5vh,60px);line-height:1.08;color:#315c83}.rules{display:flex;justify-content:center;gap:15px;margin:14px auto 20px;font-size:clamp(14px,2.2vh,19px)}.rules span{padding:9px 13px;background:#fff;border-radius:16px;box-shadow:0 4px #d7c2aa}.dot{display:inline-block;width:21px;height:21px;border-radius:50%;vertical-align:-4px}.green{background:#33b963}.red{background:#ef4c4c}.primary{border:0;border-radius:20px;padding:clamp(9px,1.8vh,14px) 44px;background:linear-gradient(#ffd84a,#f7a51d);color:#654000;font-size:clamp(18px,2.8vh,23px);font-weight:700;box-shadow:0 7px 0 #c8750d}.hud{position:absolute;z-index:20;top:max(9px,env(safe-area-inset-top));left:11px;right:11px;height:66px;display:grid;grid-template-columns:1fr minmax(230px,1.2fr) 1fr;align-items:center;gap:16px;padding:8px 15px;background:#fffaf2ed;border:3px solid #fff;border-radius:22px;box-shadow:0 6px 0 #8d5a35}.brand{font-size:clamp(15px,1.7vw,23px);font-weight:700}.progress{text-align:center}.progress>div{height:9px;margin-top:4px;border-radius:7px;background:#ded8cf;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ef4c4c,#ffd13d,#33b963);transition:.4s}.stats{display:flex;align-items:center;justify-content:flex-end;gap:9px;font-size:20px}.stats button{width:40px;height:40px;border:2px solid #dfcdbb;border-radius:12px;background:#fff;box-shadow:0 3px #b8997e}.mission{position:absolute;z-index:10;top:93px;left:50%;transform:translateX(-50%);width:min(680px,91vw);padding:8px 20px 10px;text-align:center;background:#fffaf1f1;border:4px solid #fff;border-radius:24px;box-shadow:0 6px 0 #d29542}.mission strong{display:block;font-size:clamp(20px,2.4vw,30px)}.mission div{display:flex;justify-content:center;gap:25px}.green-text{color:#15964a}.red-text{color:#dc3939}.numbers{position:absolute;z-index:5;top:215px;left:7%;right:7%;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,2vw,28px)}.number-card{position:relative;aspect-ratio:1/.88;border:5px solid #fff;border-radius:28px;background:linear-gradient(145deg,#fffdf7,#f5e9d7);box-shadow:0 10px 0 #a46b40,0 16px 22px #52341d45;color:#284562;font-size:clamp(39px,5vw,76px);font-weight:700;transition:.2s;overflow:hidden}.number-card:before{content:"";position:absolute;inset:0;background:var(--paint,transparent);opacity:.82;transform:translateY(105%);transition:.35s}.number-card.painted:before{transform:translateY(0)}.number-card span{position:relative;z-index:1;padding:3px 9px;border-radius:15px;background:#ffffffdd}.number-card:hover{transform:translateY(-5px)}.paint-tools{position:absolute;z-index:10;bottom:3%;left:50%;transform:translateX(-50%);display:flex;gap:clamp(20px,5vw,75px)}.paint{position:relative;width:clamp(140px,17vw,230px);height:clamp(90px,11vh,120px);display:grid;grid-template-columns:58px 1fr;grid-template-rows:1fr 1fr;align-items:center;border:5px solid #fff;border-radius:24px;background:#fffaf1;box-shadow:0 8px 0 #8d5935;color:#31485f}.paint i{grid-row:1/3;width:50px;height:62px;margin-left:7px;border-radius:8px 8px 18px 18px;background:var(--paint);box-shadow:inset 0 9px #ffffff55,0 5px #68442c}.paint span{align-self:end;font-size:clamp(18px,2vw,26px);font-weight:700}.paint small{align-self:start}.paint.selected{outline:7px solid #ffd341;transform:translateY(-6px)}.green-paint{--paint:#35bc66}.red-paint{--paint:#ef5050}.toast{position:absolute;z-index:40;left:50%;top:52%;transform:translate(-50%,-50%) scale(.7);opacity:0;padding:13px 28px;border-radius:28px;background:#fff;font-size:30px;font-weight:700}.toast.show{animation:toast .85s}.modal{position:fixed;z-index:99;inset:0;display:grid;place-items:center;padding:20px;background:#263e5b99;backdrop-filter:blur(7px)}.modal-card{width:min(550px,92vw);padding:32px;text-align:center;background:#fffaf0;border:5px solid #fff;border-radius:35px;box-shadow:0 12px 0 #8d5a35}.modal-card>div{font-size:75px}.modal h2{margin:0;font-size:clamp(35px,5vw,59px);color:#315e84}.modal p{font-size:20px}@keyframes tilt{50%{transform:rotate(7deg) translateY(-6px)}}@keyframes toast{20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:720px){.hud{height:57px;grid-template-columns:1fr 1fr}.brand span{display:none}.progress{position:absolute;left:24%;right:24%;top:6px;font-size:13px}.stats button{width:34px;height:34px}.mission{top:78px}.mission div{gap:9px;font-size:13px}.numbers{top:185px;left:3%;right:3%;gap:7px}.number-card{border-width:3px;border-radius:16px;font-size:30px}.paint-tools{bottom:2%;gap:14px}.paint{width:135px;height:82px;grid-template-columns:48px 1fr;border-radius:18px}.paint i{width:40px;height:53px}.paint small{font-size:10px}.rules{flex-direction:column;gap:6px}}@media(max-height:620px){.intro-card{padding:9px 24px}.palette{font-size:48px}.intro h1{font-size:30px}.rules{margin:6px auto 12px}.hud{height:54px}.mission{top:75px;padding:5px 15px}.numbers{top:162px}.number-card{max-height:125px}.paint-tools{bottom:1%}.paint{height:75px}.paint i{height:46px}}