:root{
    --paper:#FFFBF2;
    --cream1:#FFF3DB;
    --cream2:#FFE3EC;
    --ink:#3A2E52;
    --name:#FF3D9A;
    --line:#3A2E52;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;}
  body{
    font-family:'Baloo Bhaijaan 2',sans-serif;color:var(--ink);
    background:linear-gradient(160deg,var(--cream1),var(--cream2));
    user-select:none;-webkit-user-select:none;touch-action:manipulation;
    display:flex;flex-direction:column;height:100dvh;
  }

  /* ---- Header ---- */
  header{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px 8px;gap:8px;
  }
  .title{font-size:clamp(20px,5.5vw,28px);font-weight:800;}
  .homebtn{text-decoration:none;background:#fff;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 0 #00000016;}
  .homebtn:active{transform:translateY(3px);box-shadow:0 1px 0 #00000016;}
  .title .nm{color:var(--name);}
  .nav{display:flex;align-items:center;gap:6px;}
  .nav button{
    border:none;cursor:pointer;font-family:inherit;font-weight:800;
    width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);
    font-size:22px;box-shadow:0 4px 0 #00000016;
  }
  .nav button:active{transform:translateY(3px);box-shadow:0 1px 0 #00000016;}
  .pic-name{
    font-size:clamp(16px,4.4vw,20px);font-weight:700;min-width:96px;text-align:center;
    display:flex;align-items:center;gap:5px;justify-content:center;
  }

  /* ---- Canvas ---- */
  #stage{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 16px;position:relative;overflow:hidden;}
  #paper{
    background:var(--paper);border-radius:26px;
    box-shadow:0 10px 30px #00000016, inset 0 0 0 4px #ffffff;
    width:min(92vw,440px);aspect-ratio:1/1;max-height:100%;
    display:flex;align-items:center;justify-content:center;padding:10px;position:relative;
  }
  #paper svg{width:100%;height:100%;display:block;}
  #refCard{
    position:absolute;top:10px;left:10px;z-index:8;
    background:#fff;border-radius:16px;padding:7px 7px 4px;
    box-shadow:0 6px 16px #00000022;text-align:center;
    width:clamp(68px,19vw,92px);
  }
  .reflabel{font-size:clamp(10px,2.8vw,12px);font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.2;}
  #refArt{width:100%;aspect-ratio:1/1;}
  #refArt svg{width:100%;height:100%;display:block;}
  .rg{fill:var(--paper);stroke:var(--line);stroke-width:3.2;stroke-linejoin:round;cursor:pointer;transition:fill .12s;}
  .rg:active{opacity:.85;}
  .deco{fill:var(--line);stroke:var(--line);stroke-width:3;stroke-linecap:round;pointer-events:none;}
  .eyewhite{fill:#fff;}

  /* ---- Palette ---- */
  .palette{
    display:flex;gap:10px;overflow-x:auto;padding:10px 16px;align-items:center;
    scrollbar-width:none;
  }
  .palette::-webkit-scrollbar{display:none;}
  .swatch{
    flex:0 0 auto;width:46px;height:46px;border-radius:50%;cursor:pointer;
    border:4px solid #fff;box-shadow:0 4px 0 #00000016;transition:transform .12s;
    position:relative;
  }
  .swatch:active{transform:scale(.92);}
  .swatch.on{transform:translateY(-6px) scale(1.12);box-shadow:0 8px 0 #00000016,0 0 0 3px var(--ink);}
  .swatch.erase{background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;}

  /* ---- Actions ---- */
  .actions{display:flex;gap:10px;padding:4px 16px 14px;justify-content:center;}
  .actions button{
    border:none;cursor:pointer;font-family:inherit;font-weight:800;
    font-size:clamp(15px,4vw,18px);color:var(--ink);background:#fff;
    border-radius:18px;padding:11px 22px;box-shadow:0 4px 0 #00000016;
    display:flex;align-items:center;gap:7px;
  }
  .actions button:active{transform:translateY(3px);box-shadow:0 1px 0 #00000016;}

  /* ---- Sparkle + celebrate ---- */
  .spark{position:absolute;font-size:26px;pointer-events:none;z-index:9;animation:sp .6s ease forwards;}
  @keyframes sp{0%{transform:scale(.4) translateY(0);opacity:1}100%{transform:scale(1.4) translateY(-44px);opacity:0}}
  .confetti{position:absolute;width:12px;height:12px;border-radius:3px;pointer-events:none;z-index:9;}
  #praise{
    position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.5);
    background:#fff;border-radius:26px;padding:14px 28px;z-index:12;
    font-size:clamp(24px,7vw,38px);font-weight:800;color:var(--name);
    box-shadow:0 10px 0 #00000016;opacity:0;pointer-events:none;white-space:nowrap;
  }
  #praise.show{animation:pr 1.6s ease forwards;}
  @keyframes pr{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}
    20%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(3deg)}
    35%{transform:translate(-50%,-50%) scale(1) rotate(0)}
    82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-62%) scale(.9)}
  }
  @media (prefers-reduced-motion: reduce){
    .spark,#praise.show{animation-duration:.01s;}
  }