/* Oopsie Doodles: page list and the tap-to-color pad */
#doodles-screen{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#fff6fb 0%,#eef7ff 50%,#fff4dc 100%);display:flex;flex-direction:column}
.dd-top{position:absolute;left:12px;top:max(10px,env(safe-area-inset-top));z-index:5}
.dd-title{margin:max(14px,env(safe-area-inset-top)) 0 0;text-align:center;font:700 clamp(20px,3.4vw,32px)/1.2 Poppins,system-ui,sans-serif;color:#2a2350;padding:0 120px}
.dd-list{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,42vw),1fr));gap:18px;padding:18px max(16px,3vw) 30px;align-content:start}
.dd-card{border:0;border-radius:20px;background:#fff;padding:10px 10px 12px;cursor:pointer;box-shadow:0 6px 18px rgba(42,35,80,.14);display:flex;flex-direction:column;gap:8px;align-items:center;transition:transform .15s}
.dd-card:hover{transform:translateY(-3px)}
.dd-card img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:12px;background:#fff;pointer-events:none}
.dd-card span{font:700 15px/1.2 Poppins,system-ui,sans-serif;color:#2a2350}
.dd-card:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.dd-pad{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}
.dd-pad[hidden]{display:none}
.dd-stage{flex:1;min-height:0;min-width:0;width:100%;display:flex;align-items:center;justify-content:center}
.dd-paper{position:relative;flex:0 0 auto;background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(42,35,80,.16);overflow:hidden;touch-action:manipulation}
.dd-canvas,.dd-lines{position:absolute;inset:0;width:100%;height:100%;display:block}
.dd-canvas{cursor:pointer}
.dd-lines{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.dd-box{flex:0 0 auto;width:min(100%,980px);background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(42,35,80,.12);padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.dd-crayons{display:grid;grid-template-columns:repeat(16,1fr);align-items:end;gap:2px}
.dd-crayons.dd-skin{grid-template-columns:repeat(4,minmax(0,62px)) 1fr;margin-top:2px}

.dd-crayon{border:0;background:transparent;padding:0;height:66px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;transition:transform .15s;-webkit-tap-highlight-color:transparent}
.dd-crayon svg{width:100%;max-width:38px;height:62px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.dd-crayon.on{transform:translateY(-10px) scale(1.08)}
.dd-crayon.on svg{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.dd-crayon:focus-visible{outline:3px solid #1f6dff;outline-offset:1px;border-radius:6px}
.dd-tools{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.dd-tool{border:0;border-radius:999px;background:#f1ecff;color:#2a2350;font:700 13px/1 Poppins,system-ui,sans-serif;padding:8px 12px;min-height:40px;display:flex;align-items:center;gap:6px;cursor:pointer}
.dd-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dd-tool:hover{background:#e4dbff}
.dd-tool:focus-visible{outline:3px solid #1f6dff;outline-offset:2px}
html.calm .dd-crayon,html.calm .dd-card{transition:none}
@media (max-width:640px){
  .dd-title{padding:0 12px;font-size:17px;margin-top:calc(max(10px,env(safe-area-inset-top)) + 54px)}
  .dd-crayons{grid-template-columns:repeat(8,1fr);row-gap:0}
  .dd-crayon{height:52px}.dd-crayon svg{height:48px;max-width:32px}.dd-crayons.dd-skin{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
  .dd-tool span{display:none}.dd-tool{padding:8px 10px}
}
@media (orientation:landscape) and (max-height:520px){
  .dd-pad{flex-direction:row;align-items:stretch}
  .dd-box{width:auto;flex:0 0 190px;overflow:auto}
  .dd-crayons{grid-template-columns:repeat(4,1fr)}
  .dd-crayons.dd-skin{grid-template-columns:repeat(4,1fr)}
  .dd-tools{grid-column:1/-1;justify-content:center}
}
@media (orientation:landscape) and (max-height:520px){.dd-title{display:none}.dd-pad{padding-top:calc(max(10px,env(safe-area-inset-top)) + 52px)}}
.dd-sec{grid-column:1/-1;margin:6px 4px -6px;font:700 18px/1.2 Poppins,system-ui,sans-serif;color:#7b2ff7}
.dd-game img{object-fit:cover}

/* ---------- Oopsie Doodles Art Studio (her room + her five stations) ---------- */
#doodles-screen.dd-in-studio{background:#f3dcc4}
.ds-studio{position:absolute;inset:0;overflow:hidden;z-index:1;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ds-studio[hidden]{display:none}
.ds-studio.ds-pan{touch-action:none;cursor:grab}
.ds-room{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0}
.ds-bg{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.ds-station{position:absolute;border:0;padding:0;margin:0;background:transparent;pointer-events:none;-webkit-tap-highlight-color:transparent}
.ds-station img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;transform-origin:50% 100%;transition:transform .22s ease,filter .22s ease}
.ds-station.hover img,.ds-station:focus-visible img{transform:translateY(-6px) scale(1.03);filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px rgba(255,205,70,.95))}
.ds-station:focus{outline:none}
.ds-station.bounce img{animation:ds-bounce .32s ease}
@keyframes ds-bounce{0%{transform:scale(1)}35%{transform:translateY(-14px) scale(1.05)}70%{transform:translateY(0) scale(.97)}100%{transform:scale(1)}}
.ds-label{position:absolute;transform:translateX(-50%);white-space:nowrap;pointer-events:none;background:rgba(255,255,255,.92);color:#5b21b6;font:700 21px/1 Poppins,system-ui,sans-serif;padding:7px 16px;border-radius:999px;box-shadow:0 3px 10px rgba(91,33,182,.22)}
html.calm .ds-station img{transition:none}
html.calm .ds-station.bounce img{animation:none}
#doodles-screen.dd-in-studio .dd-top{z-index:6}
/* Activity Pages placeholder */
.dd-soon{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.dd-soon[hidden]{display:none}
.dd-soon-card{background:#fff;border-radius:22px;box-shadow:0 6px 18px rgba(42,35,80,.14);padding:18px 22px 22px;text-align:center;max-width:520px;width:100%}
.dd-soon-card img{width:100%;height:auto;display:block}
.dd-soon-card p{margin:10px 0 0;font:700 clamp(18px,3vw,24px)/1.3 Poppins,system-ui,sans-serif;color:#2a2350}
.ds-arrow{position:absolute;top:60%;z-index:4;width:44px;height:44px;margin:-22px 0 0}
.ds-arrow.l{left:max(10px,env(safe-area-inset-left))}.ds-arrow.r{right:max(10px,env(safe-area-inset-right))}
.ds-arrow[hidden]{display:none}