*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;width:100%;height:100%;overflow:hidden;}
body{font-family:Tahoma,Arial,sans-serif;background:#8ed0ff;color:#111;touch-action:none;user-select:none;}
.app{height:100vh;height:100dvh;display:grid;grid-template-rows:1fr auto;background:linear-gradient(180deg,#eaf8ff 0%,#9bd9ff 100%);}
.draw-area{position:relative;min-height:0;padding:clamp(8px,2.4vw,18px);display:flex;align-items:center;justify-content:center;}
canvas{display:block;width:100%;height:100%;background:#fffdf7;border:clamp(4px,1vw,8px) solid #2f7fc9;border-radius:clamp(18px,3vw,34px);box-shadow:0 12px 28px rgba(0,60,120,.28), inset 0 0 0 3px rgba(255,255,255,.6);touch-action:none;cursor:crosshair;}
.kid-panel{padding:8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));background:linear-gradient(180deg,#7ec8ff,#3d98ee);border-top:4px solid rgba(255,255,255,.72);box-shadow:0 -8px 22px rgba(0,70,140,.2);}
.colors,.tools{display:flex;justify-content:center;align-items:center;gap:clamp(7px,1.9vw,16px);padding:5px 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.colors::-webkit-scrollbar,.tools::-webkit-scrollbar{display:none;}
.color{flex:0 0 auto;width:clamp(42px,8vw,76px);height:clamp(42px,8vw,76px);border-radius:999px;border:5px solid rgba(255,255,255,.92);background:var(--c);box-shadow:0 6px 0 rgba(0,0,0,.18), inset 0 5px 10px rgba(255,255,255,.35), inset 0 -5px 10px rgba(0,0,0,.18);cursor:pointer;}
.color.white{box-shadow:0 6px 0 rgba(0,0,0,.18), inset 0 0 0 3px #ddd;}
.color.active{outline:5px solid #ffe66b;transform:translateY(-3px) scale(1.06);}
.tool{flex:0 0 auto;width:clamp(58px,11vw,96px);height:clamp(58px,11vw,96px);border-radius:clamp(16px,3vw,28px);border:5px solid rgba(255,255,255,.95);background:linear-gradient(180deg,#ffffff,#e2f2ff);box-shadow:0 7px 0 rgba(0,58,120,.28), inset 0 4px 9px rgba(255,255,255,.95), inset 0 -4px 8px rgba(0,70,150,.13);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.tool svg{width:72%;height:72%;fill:#264b72;stroke:#264b72;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
.tool.active{background:linear-gradient(180deg,#fff4a3,#ffca46);transform:translateY(-4px);box-shadow:0 9px 0 rgba(135,83,0,.35), inset 0 4px 9px rgba(255,255,255,.9);}
.tool.action{background:linear-gradient(180deg,#ddffd8,#7fed80);}
.tool.danger{background:linear-gradient(180deg,#ffe0e0,#ff8a8a);}
.tool:active,.color:active,.confirm-btn:active{transform:scale(.94);}
.save-spark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);font-size:min(34vw,170px);color:#ffd21f;text-shadow:0 0 12px #fff,0 8px 18px rgba(0,0,0,.18);opacity:0;pointer-events:none;z-index:4;}
.save-spark.show{animation:sparkPop .65s ease-out;}
@keyframes sparkPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-20deg);}35%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(8deg);}100%{opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(18deg);}}
.confirm{display:none;position:fixed;inset:0;background:rgba(0,42,85,.38);backdrop-filter:blur(2px);z-index:20;align-items:center;justify-content:center;padding:20px;}
.confirm.show{display:flex;}
.confirm-card{width:min(460px,86vw);border-radius:36px;padding:28px;background:linear-gradient(180deg,#ffffff,#dff2ff);box-shadow:0 18px 40px rgba(0,0,0,.28);border:6px solid rgba(255,255,255,.9);text-align:center;}
.confirm-icon{font-size:min(24vw,120px);font-weight:900;color:#2975c7;line-height:1;text-shadow:0 5px 0 rgba(0,0,0,.12);}
.confirm-actions{display:flex;justify-content:center;gap:clamp(24px,8vw,54px);margin-top:24px;}
.confirm-btn{width:clamp(88px,24vw,132px);height:clamp(88px,24vw,132px);border-radius:999px;border:7px solid #fff;font-size:clamp(54px,14vw,88px);font-weight:900;color:#fff;box-shadow:0 9px 0 rgba(0,0,0,.22);cursor:pointer;line-height:1;}
.confirm-btn.yes{background:#18bf5b;}.confirm-btn.no{background:#ff3d4f;}
@media(max-height:560px){.color{width:40px;height:40px;border-width:4px}.tool{width:54px;height:54px;border-width:4px}.kid-panel{padding-top:4px}.colors,.tools{padding:3px 0}}