/* ============================================================
   COLOR & PLAY — Kids Zone styles
   ============================================================ */
.play-header{position:relative;overflow:hidden;padding:60px 0 36px;text-align:center;
  background:linear-gradient(180deg,#d7eefb,var(--navy));border-bottom:1px solid var(--line);}
.play-h1{font-size:clamp(44px,7vw,86px);margin:12px 0 14px;}
.play-sub{color:var(--mut);font-size:19px;max-width:600px;margin:0 auto;}

.studio{max-width:980px;}

/* page picker */
.page-picker{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:0 8px 26px rgba(11,26,58,.07);}
body:not(.theme-sky) .page-picker{background:var(--navy-card);}
.pp-label{font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--cyan-d);font-size:16px;white-space:nowrap;}
body:not(.theme-sky) .pp-label{color:var(--cyan-l);}
.pp-tabs{display:flex;gap:12px;flex-wrap:wrap;}
.pp-tab{display:flex;align-items:center;gap:10px;background:#f1f7fc;border:2px solid var(--line);
  border-radius:12px;padding:6px 14px 6px 6px;transition:all .15s;cursor:pointer;}
body:not(.theme-sky) .pp-tab{background:#0d1937;}
.pp-tab img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:8px;}
.pp-tab span{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:15px;color:var(--ink);}
.pp-tab:hover{transform:translateY(-2px);border-color:rgba(0,174,239,.5);}
.pp-tab.on{border-color:var(--cyan);background:rgba(0,174,239,.12);}
body:not(.theme-sky) .pp-tab.on{background:rgba(0,174,239,.16);}

/* toolbar */
.studio-tools{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(11,26,58,.08);margin-bottom:14px;}
body:not(.theme-sky) .studio-tools{background:var(--navy-card);}
.tool-group{display:flex;gap:8px;}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;background:#f1f7fc;border:2px solid transparent;
  border-radius:13px;padding:9px 14px;font-family:'Saira Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:13px;color:var(--ink);transition:all .14s;}
body:not(.theme-sky) .tool{background:#0d1937;color:var(--ink);}
.tool .tool-ico{font-size:22px;line-height:1;}
.tool:hover{transform:translateY(-2px);}
.tool.on{border-color:var(--cyan);background:rgba(0,174,239,.12);color:var(--cyan-d);}
body:not(.theme-sky) .tool.on{color:var(--cyan-l);}

.brush-sizes{display:flex;gap:6px;align-items:center;}
.brush-sizes.dim{opacity:.4;pointer-events:none;}
.bsize{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:#fff;
  font-family:'Saira Condensed',sans-serif;font-weight:800;color:var(--ink);font-size:15px;transition:all .14s;}
body:not(.theme-sky) .bsize{background:#0d1937;}
.bsize.on{border-color:var(--magenta);background:var(--magenta);color:#fff;}

.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;}
.sw{width:30px;height:30px;border-radius:9px;border:2px solid;cursor:pointer;transition:transform .12s;padding:0;}
.sw:hover{transform:scale(1.12);}
.sw.on{outline:3px solid var(--ink);outline-offset:2px;transform:scale(1.12);}

.tool-actions{display:flex;gap:8px;flex-wrap:wrap;}
.act{background:#f1f7fc;border:1px solid var(--line);border-radius:11px;padding:10px 15px;
  font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:14px;color:var(--ink);transition:all .14s;}
body:not(.theme-sky) .act{background:#0d1937;}
.act:hover{transform:translateY(-2px);}
.act-cyan{background:var(--cyan);color:#04263a;border-color:var(--cyan);}
.act-mag{background:var(--magenta);color:#fff;border-color:var(--magenta);}

/* sticker tray */
.sticker-tray{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px 16px;margin-bottom:18px;box-shadow:0 8px 26px rgba(11,26,58,.07);}
body:not(.theme-sky) .sticker-tray{background:var(--navy-card);}
.tray-label{font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--magenta);font-size:16px;white-space:nowrap;flex:none;}
.tray-items{display:flex;gap:10px;overflow-x:auto;padding:2px;}
.tray-sticker{flex:none;width:60px;height:60px;border-radius:12px;border:2px solid var(--line);background:#f1f7fc;
  display:flex;align-items:center;justify-content:center;padding:6px;transition:all .14s;cursor:grab;}
body:not(.theme-sky) .tray-sticker{background:#0d1937;}
.tray-sticker:hover{border-color:var(--cyan);transform:translateY(-3px) rotate(-4deg);}
.tray-sticker img{max-width:100%;max-height:100%;object-fit:contain;}

/* stage */
.stage-shell{text-align:center;}
.canvas-wrap{position:relative;width:100%;max-width:720px;margin:0 auto;aspect-ratio:1240/1287;
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 22px 60px rgba(11,26,58,.18);
  border:1px solid var(--line);touch-action:none;}
.color-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.lines-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;}
.canvas-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--mut);font-family:'Saira Condensed',sans-serif;font-style:italic;font-size:20px;background:#fff;}
.stage-hint{color:var(--mut);font-size:15px;margin:14px 0 0;font-style:italic;}

/* placed stickers */
.placed{position:absolute;touch-action:none;cursor:grab;}
.placed img{width:100%;height:auto;display:block;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));}
.placed.sel{outline:2px dashed var(--cyan);outline-offset:4px;border-radius:6px;}
.stk-del,.stk-handle{position:absolute;width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:15px;font-weight:700;border:2px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.3);cursor:pointer;}
.stk-del{top:-13px;right:-13px;background:var(--magenta);color:#fff;}
.stk-handle{bottom:-13px;right:-13px;background:var(--cyan);color:#04263a;cursor:nwse-resize;touch-action:none;}

/* drive prompt */
.play-drive{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:30px;margin-top:36px;}
.pd-h3{font-size:clamp(28px,3.4vw,42px);margin:0 0 8px;}
.pd-copy p{color:var(--mut);font-size:16px;margin:0;}
.pd-form{display:flex;flex-direction:column;gap:12px;}
.pd-row{display:flex;align-items:center;gap:10px;background:#f1f7fc;border:2px solid rgba(0,174,239,.4);
  border-radius:12px;padding:4px 14px;}
body:not(.theme-sky) .pd-row{background:#0a1531;}
.pd-pre{font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:800;color:var(--cyan);font-size:18px;white-space:nowrap;}
.pd-row input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font-size:16px;padding:11px 0;outline:none;}
.pd-row2{display:flex;gap:10px;}
.pd-name{flex:1;min-width:0;background:#f1f7fc;border:2px solid var(--line);border-radius:12px;
  color:var(--ink);font-size:16px;padding:12px 14px;outline:none;}
body:not(.theme-sky) .pd-name{background:#0a1531;}
.pd-name:focus,.pd-row:focus-within{border-color:var(--cyan);}
.pd-seewall{background:none;border:0;color:var(--mut);font-size:14px;text-align:left;padding:2px;}
.pd-seewall:hover{color:var(--cyan-d);}

@media(max-width:760px){
  .studio-tools{gap:12px;}
  .palette{grid-template-columns:repeat(8,1fr);}
  .play-drive{grid-template-columns:1fr;gap:20px;}
}


/* ============================================================
   FINISH CEREMONY + GALLERY WALL
   ============================================================ */
.finish-btn{display:block;margin:14px auto 0;border:0;border-radius:16px;padding:15px 28px;
  background:var(--magenta);color:#fff;font-family:'Saira Condensed',sans-serif;font-style:italic;
  font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:19px;cursor:pointer;
  box-shadow:var(--shadow-mag);transition:transform .14s, filter .14s;}
.finish-btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.08);}
.finish-btn:disabled{opacity:.5;cursor:default;transform:none;}

.ceremony{position:fixed;inset:0;z-index:90;background:rgba(7,15,36,.82);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;animation:cerFade .3s ease;}
@keyframes cerFade{from{opacity:0}to{opacity:1}}
.cer-car{position:relative;transition:transform 1.45s cubic-bezier(.6,-.08,.85,.5);}
.ceremony.drive .cer-car,.ceremony.done .cer-car{transform:translateX(160vw) rotate(1.5deg);}
.cer-frame{width:min(400px,68vw);background:#fff;border-radius:10px;padding:12px 12px 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);animation:cerPose .55s cubic-bezier(.2,1.5,.4,1);}
@keyframes cerPose{from{transform:scale(.5) rotate(-4deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.cer-frame img{width:100%;display:block;border-radius:4px;}
.cer-wheel{position:absolute;bottom:-30px;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #9aa3ae 0 26%, #15171f 27% 100%);
  border:4px solid #0a0d14;transform:scale(0);animation:wheelPop .35s .65s cubic-bezier(.2,1.6,.4,1) forwards;}
.cer-wheel.w1{left:12%;} .cer-wheel.w2{right:12%;}
.ceremony.drive .cer-wheel,.ceremony.done .cer-wheel{animation:wheelSpin .4s linear infinite;transform:scale(1);}
@keyframes wheelPop{to{transform:scale(1);}}
@keyframes wheelSpin{from{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(360deg)}}
.cer-vroom{position:absolute;left:-30px;top:38%;transform:rotate(-8deg);opacity:0;
  font-family:'Saira Condensed',sans-serif;font-style:italic;font-weight:900;font-size:34px;color:#ffd400;
  text-shadow:0 4px 18px rgba(0,0,0,.5);white-space:nowrap;}
.ceremony.drive .cer-vroom{opacity:1;transition:opacity .15s;}
.cer-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:none;}
.ceremony.drive .cer-confetti,.ceremony.done .cer-confetti{display:block;}
.cer-confetti span{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;
  animation:cerConf 2.6s linear infinite;}
@keyframes cerConf{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(105vh) rotate(540deg)}}
.cer-card{position:absolute;background:#fff;border-radius:20px;padding:30px 30px 26px;text-align:center;
  max-width:340px;width:calc(100% - 48px);box-shadow:0 24px 60px rgba(0,0,0,.4);
  animation:cerPose .5s cubic-bezier(.2,1.5,.4,1);}
body:not(.theme-sky) .cer-card{background:var(--navy-card);}
.cer-ico{font-size:42px;display:block;margin-bottom:4px;}
.cer-h3{font-size:34px;margin:0 0 6px;}
.cer-card p{color:var(--mut);font-size:16px;margin:0 0 18px;}
.cer-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.art-gallery{margin-top:26px;padding:20px 22px;border-radius:20px;background:var(--navy-card);
  border:1px solid var(--line);box-shadow:0 8px 26px rgba(11,26,58,.08);}
.ag-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.ag-h3{font-size:26px;margin:0;}
.ag-sub{color:var(--mut);font-size:14px;}
.ag-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;}
.ag-item{position:relative;flex:none;width:150px;margin:0;background:#fff;border-radius:8px;
  padding:7px 7px 6px;box-shadow:0 6px 18px rgba(11,26,58,.18);transform:rotate(-1.2deg);}
.ag-item:nth-child(2n){transform:rotate(1.4deg);}
.ag-item img{width:100%;display:block;border-radius:3px;}
.ag-item figcaption{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:12px;color:#3a4a66;text-align:center;padding-top:5px;}
.ag-del{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:0;
  background:#0b1530;color:#fff;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;}
.ag-item:hover .ag-del{opacity:1;}