/* Aubrey's coloring and letter-writing studio. Touch-first, cozy and accessible. */
.creative-main-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,560px);margin:2px auto 1px;}
.creative-entry {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:104px;border-radius:22px;border:3px solid #fff;box-shadow:0 6px 0 #bda6d2,0 11px 19px #8c679333;padding:10px 12px;color:#583678;transition:transform .15s;}
.creative-entry:active {transform:translateY(4px);}
.creative-entry>span {font-size:30px;line-height:1.1;}
.creative-entry>strong {font-size:clamp(16px,2.4vw,20px);line-height:1.1;font-weight:1000;}
.creative-entry>small {font-size:11px;font-weight:850;line-height:1.1;}
.creative-entry-color {background:linear-gradient(145deg,#fff1be,#ffd6e8);}
.creative-entry-trace {background:linear-gradient(145deg,#d8f4ff,#e8d7ff);}
.creative-view {flex-direction:column;gap:14px;background:linear-gradient(145deg,#fffbff,#f7efff 53%,#edfcff);border:4px solid white;border-radius:34px;padding:clamp(13px,2vw,25px);box-shadow:var(--shadow);min-height:650px;}
.creative-topline {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.creative-heading {display:flex;align-items:center;gap:11px;min-width:0;}
.creative-heading-icon {font-size:43px;line-height:1;display:grid;place-items:center;background:#fff2e2;border-radius:20px;padding:11px;}
.creative-heading h2 {color:#704496;margin:0;font-weight:1000;font-size:clamp(21px,3vw,30px);line-height:1.05;}
.creative-heading p {margin:5px 0 0;color:#9369a4;font-size:13px;font-weight:750;}
.art-toolbar {display:flex;align-items:center;justify-content:center;gap:15px;}
.art-icon-button {border:2px solid #f0d4ef;background:#fff;border-radius:16px;min-width:53px;min-height:48px;font-size:23px;color:#8b55ae;font-weight:900;}
.art-page-title {display:flex;min-width:190px;flex-direction:column;align-items:center;color:#75438e;}
.art-page-title strong {font-size:21px;font-weight:1000;line-height:1.12;text-align:center;}
.art-page-title span {font-size:12px;font-weight:800;color:#ad80b0;}
.art-selection,.letter-picker {display:flex;justify-content:flex-start;align-items:center;gap:8px;overflow-x:auto;padding:3px 1px 9px;scrollbar-width:thin;scrollbar-color:#caa3e2 transparent;overscroll-behavior-inline:contain;}
.art-page-chip {border:2px solid #e9d2ee;background:white;white-space:nowrap;min-height:46px;border-radius:16px;padding:9px 13px;font-size:13px;color:#80519e;font-weight:900;}
.art-page-chip.is-selected {background:#784eaf;color:#fff;border-color:#784eaf;}
.creative-instructions {align-self:center;text-align:center;background:white;padding:11px 17px;border-radius:20px;color:#9153a2;font-weight:900;font-size:clamp(14px,2.4vw,18px);box-shadow:0 5px 14px #bf9acd2d;}
.coloring-stage {width:min(100%,800px);align-self:center;padding:8px;background:#fff;border:4px solid #f7dfed;border-radius:24px;box-shadow:0 8px 17px #bd9cc437;}
#coloringCanvas {display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:17px;user-select:none;-webkit-user-select:none;touch-action:none;}
#coloringCanvas [data-fillable] {transition:fill .18s,stroke .18s;}
.art-palette {display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:2px;}
.paint-swatch {background:var(--swatch);border:4px solid white;outline:2px solid #ead6f2;border-radius:50%;width:clamp(44px,7vw,60px);height:clamp(44px,7vw,60px);display:grid;place-items:center;box-shadow:0 3px 7px #8b69a432;font-weight:1000;font-size:25px;color:#513668;text-shadow:0 1px #fff;}
.paint-swatch.is-selected {outline:5px solid #7c56b9;outline-offset:1px;transform:translateY(-2px);}
.creative-actions {display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center;}
.creative-tool {background:white;min-height:48px;border:2px solid #ecd4f3;border-radius:16px;padding:10px 16px;font-size:14px;font-weight:900;color:#764897;}
.creative-tool.is-selected {background:#794ab3;border-color:#794ab3;color:white;}
.creative-save {background:#ffdb78;border-color:#ffd060;color:#694371;}
.creative-bottom {text-align:center;color:#9d6aa5;font-size:13px;font-weight:850;margin:0;}
.trace-modes {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;}
.trace-mode {min-height:50px;border:2px solid #e6cfed;border-radius:17px;background:white;padding:12px 18px;color:#784994;font-weight:950;font-size:14px;}
.trace-mode.is-selected {background:#7f56ba;color:white;border-color:#7f56ba;}
.case-mode {background:#fff4df;}
.letter-picker {align-self:stretch;justify-content:flex-start;padding:9px 1px;}
.letter-chip {font-size:clamp(24px,4vw,31px);font-weight:1000;width:58px;min-width:58px;height:63px;border:3px solid white;border-radius:18px;background:#e9ddfa;color:#7950a6;box-shadow:0 5px 0 #cdb2e9;}
.letter-chip.is-selected {background:#ff79bd;color:#fff;box-shadow:0 5px 0 #d65a9e;}
.trace-instruction {display:flex;align-items:center;gap:14px;min-height:81px;border:3px solid #fff;background:#fef9ff;border-radius:22px;padding:11px 18px;box-shadow:0 4px 18px #966eab1f;}
#traceLetterLabel {font-size:53px;font-weight:1000;line-height:1;color:#af5bc3;text-align:center;min-width:58px;}
.trace-instruction>div {display:flex;flex-direction:column;flex:1;gap:3px;min-width:0;}
#traceExample {font-size:clamp(17px,2.5vw,22px);color:#673c8a;font-weight:1000;}
#traceHelp {font-size:13px;font-weight:750;color:#a17ca6;}
#traceListen {background:#e0f4ff;border:2px solid #cae6f9;padding:9px 15px;border-radius:15px;min-height:45px;font-weight:900;color:#5776a2;white-space:nowrap;}
.tracing-stage {align-self:center;position:relative;width:min(100%,480px);border:7px solid #f8dff1;border-radius:25px;background:#fff;box-shadow:0 9px 21px #c392ae2d;overflow:hidden;}
.tracing-stage>svg {display:block;width:100%;aspect-ratio:360/380;height:auto;touch-action:none;}
.trace-stars {position:absolute;top:8px;left:16px;pointer-events:none;color:#ffb443;font-size:24px;z-index:2;}
#traceTouch {cursor:crosshair;}
.trace-sticker {position:absolute;bottom:10px;left:9px;right:9px;text-align:center;opacity:0;pointer-events:none;border-radius:20px;padding:12px 10px;background:#fff3baeb;color:#7950a7;font-size:17px;font-weight:1000;transform:scale(.9);transition:opacity .25s,transform .25s;}
.trace-sticker.is-finished {opacity:1;transform:scale(1);}
.trace-magic-track {height:15px;background:#ecddf4;border-radius:30px;width:min(100%,480px);align-self:center;overflow:hidden;}
#traceProgressFill {display:block;height:100%;width:0;background:linear-gradient(90deg,#ff92c0,#bf7ce9,#79d9bc);border-radius:30px;transition:width .1s;}
.creative-parent-progress {border-top:2px dashed #e7d4ec;padding-top:14px;display:flex;flex-direction:column;gap:8px;}
.creative-parent-progress h3 {font-size:20px;color:#77418e;margin:0 0 7px;}
.creative-parent-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.creative-parent-tiles>div {border:2px solid #f0e0f2;background:#fff;border-radius:19px;display:flex;flex-direction:column;align-items:center;padding:16px;gap:4px;}
.creative-parent-tiles strong {font-size:29px;color:#7e4fa4;}
.creative-parent-tiles span,.creative-parent-progress small {font-size:11px;font-weight:800;color:#a474a4;text-align:center;}
@media(max-width:720px){
  .home-play-actions {width:100%;}
  .creative-view {padding:12px 10px;gap:12px;min-height:620px;border-radius:24px;}
  .creative-heading-icon {font-size:29px;padding:8px;border-radius:14px;}
  .creative-heading h2 {font-size:21px;}
  .creative-heading p {font-size:11px;}
  .creative-topline .plain-button {font-size:12px;padding:10px;}
  .art-page-title strong {font-size:18px;}
  .art-page-title {min-width:130px;}
  .art-icon-button {min-width:47px;min-height:47px;}
  .coloring-stage {padding:3px;border-width:3px;}
  .trace-instruction {padding:9px;gap:7px;}
  #traceLetterLabel {font-size:44px;min-width:46px;}
  #traceExample {font-size:15px;}
  #traceHelp {font-size:11px;}
  #traceListen {padding:8px 9px;font-size:12px;}
  .letter-chip {min-width:48px;width:48px;height:54px;}
  .trace-mode {padding:10px 12px;font-size:12px;}
  .creative-entry {min-height:98px;padding:10px 4px;}
  .creative-entry>strong {font-size:15px;}
  .creative-entry>small {font-size:10px;}
  .creative-parent-tiles>div {padding:9px;}
  .creative-parent-tiles strong {font-size:23px;}
}
@media(max-width:380px){
  .creative-main-actions {gap:7px;}
  .creative-entry>strong {font-size:14px;}
  .creative-tool {font-size:12px;padding:9px 12px;}
  .paint-swatch {width:42px;height:42px;}
}
@media(prefers-reduced-motion:reduce) {.creative-entry,#traceProgressFill,.trace-sticker{transition:none}}

/* Tap-to-spell name builder: no drag-and-drop required for little hands. */
.spell-stage {display:flex;flex-direction:column;align-items:center;gap:16px;border:4px solid #f5dff5;border-radius:25px;background:radial-gradient(circle at 50% 0%,#fff9da,#fef1ff 63%,#e9f8ff);padding:clamp(20px,4vw,40px) 10px;min-height:385px;text-align:center;}
.spell-stage[hidden] {display:none;}
.spell-hero {font-size:clamp(23px,4vw,31px);color:#864cad;}
.spell-slots {display:flex;gap:7px;justify-content:center;flex-wrap:wrap;}
.spell-slot {display:grid;place-items:center;width:clamp(43px,7.2vw,67px);height:clamp(54px,8vw,78px);border:3px dashed #c9a9df;border-radius:16px;background:white;color:#b69ac7;font-weight:1000;font-size:clamp(26px,5vw,38px);}
.spell-slot.is-filled {border:3px solid #ff8abf;color:#a156ae;background:#fff0f8;}
.spell-slot.is-next {border-color:#e6b855;animation:hintGlow 1s alternate infinite;}
.spell-prompt {font-size:clamp(18px,3vw,24px);font-weight:1000;color:#8c57a9;}
.spell-choices {display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.spell-letter {width:clamp(78px,15vw,107px);height:clamp(89px,15vw,112px);border-radius:22px;border:4px solid white;background:linear-gradient(#f5e9ff,#dabefa);font-size:clamp(39px,8vw,57px);font-weight:1000;color:#7b4baa;box-shadow:0 7px 0 #ba91d4;}
.spell-letter.is-gentle-wrong {background:#fff0df;}
.spell-letter.is-glowing {outline:5px solid #ffc95d;outline-offset:4px;}
.is-spelling #letterPicker,.is-spelling .tracing-stage,.is-spelling .trace-magic-track,.is-spelling #traceAgain,.is-spelling #traceHint,.is-spelling #traceNext,.is-spelling #caseToggle {display:none;}
@media(max-width:720px){.spell-stage{min-height:365px;}.spell-slot{width:43px;height:55px;}.spell-letter{width:82px;height:94px;}}