/* Mandala Coloring: a calm indigo night under a bright picture, over the kit's shell. */
:root{
  --lacquer:#1C1638;--lacquer-hi:#2A2252;--ink:#FBF8FF;--ink-soft:#D5CCF0;--ink-dim:#A69CC8;
  --hair:rgba(255,214,120,.34);--brass:#FFD278;--brass-lo:#E7A53A;--brass-hi:#FFEBB8;--jade:#3BAA8C;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --line:#2B2350;
}
body{background:radial-gradient(120% 90% at 50% 40%,#3A2F6E 0%,#241C4A 55%,#17122F 100%) fixed #1C1638;font-size:19px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}

/* home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1.2em;text-align:center}
.lead{display:flex;flex-direction:column;align-items:center;gap:.4em}
#logo{width:min(24vh,150px);height:min(24vh,150px);animation:turn 60s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.home .title{font-family:var(--serif);font-size:clamp(2.4em,10.5vw,4.4em);font-weight:900;color:var(--brass);letter-spacing:.01em;
  text-shadow:0 3px 0 #7A4B0E,0 8px 22px rgba(0,0,0,.45)}
.tagline{margin:0;color:var(--ink);font-size:1.15em;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(23em,100%)}
.pill{font-family:var(--serif)}
.menu-col .pill{min-width:12em;min-height:54px}
.pill.alt{background:rgba(251,248,255,.94);color:#1C1638;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em;color:var(--brass-hi);font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:1.4em;padding:.5em 1em}
  .home .lead{flex:1 1 0;min-width:0}
  .home .menu-col{flex:none;width:min(23em,max(380px,54%));gap:.35em}
  .home .title{font-size:2.5em}
  #logo{width:min(30vh,110px);height:min(30vh,110px)}
  .menu-col .pill{min-height:48px}
  .tagline{font-size:1em}
}
@media (max-height:480px) and (max-width:700px){.home .title{font-size:2.1em}.home .tagline{font-size:.9em}}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}}
@media (max-height:300px){#logo{display:none}}

/* the game: bar, stage, colors, tools */
#game{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"bar" "stage" "colors" "tools";
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{grid-area:bar;padding:max(.4em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .3em max(.6em,env(safe-area-inset-left));gap:.6em}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px;border-color:var(--brass);
  background:radial-gradient(circle at 35% 30%,#4A3E86,var(--lacquer) 70%);box-shadow:0 0 0 3px rgba(28,22,56,.6),0 6px 14px rgba(0,0,0,.4)}
#game .bar .jewel:disabled{opacity:.4}
.left{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:.1em .4em;line-height:1.15;min-height:44px}
.left b{font:900 1em/1.15 var(--serif);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.left span{font:900 1.3em/1.15 var(--serif);color:var(--brass);font-variant-numeric:tabular-nums;transition:transform .15s;white-space:nowrap}
.left span.pop{transform:scale(1.15)}
.stage{grid-area:stage;position:relative;min-height:0;min-width:0;touch-action:none;overflow:hidden}
#art{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}
.colors{grid-area:colors;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:.35em max(6px,env(safe-area-inset-right)) .2em max(6px,env(safe-area-inset-left))}
.sw{min-width:44px;min-height:44px;aspect-ratio:1;max-height:60px;border-radius:50%;border:3px solid rgba(255,255,255,.5);padding:0;justify-self:center;width:100%;max-width:60px;
  box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .12s,border-color .12s}
.sw[aria-checked=true]{border:4px solid #fff;transform:scale(1.1);box-shadow:0 0 0 3px var(--brass),0 4px 12px rgba(0,0,0,.5)}
.sw:focus-visible,.tool:focus-visible,.left:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}
.tools{grid-area:tools;display:flex;gap:4px;padding:.2em max(6px,env(safe-area-inset-right)) max(.5em,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
.tool{flex:1 1 0;min-width:44px;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:14px;border:1px solid rgba(213,204,240,.25);background:rgba(28,22,56,.7);color:var(--ink);padding:.15em .2em;font:800 .72em/1.1 var(--sans)}
.tool svg{width:1.9em;height:1.9em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool[aria-pressed=true]{background:var(--brass);color:#2B1A00;border-color:#fff}
.tool:disabled{opacity:.4}
.tool .dots{display:flex;gap:2px;height:1.9em;align-items:center}
.tool .dots i{width:.55em;height:1.3em;border-radius:4px}
@media (max-width:389px){.colors{grid-template-columns:repeat(4,1fr);row-gap:4px}.sw{max-height:46px;max-width:none;aspect-ratio:auto;border-radius:14px}}

/* wide screens: tools on the left, colors on the right, the picture in the middle */
@media (min-aspect-ratio:1/1){
  #game{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar bar" "tools stage colors"}
  .tools{flex-direction:column;justify-content:center;padding:.3em .2em max(.4em,env(safe-area-inset-bottom)) max(.6em,env(safe-area-inset-left));width:5em}
  .tool{flex:0 0 auto;min-height:56px}
  .colors{grid-template-columns:repeat(2,auto);align-content:center;gap:8px;padding:.3em max(.6em,env(safe-area-inset-right)) .4em .3em}
  .sw{width:clamp(44px,8vh,64px);height:clamp(44px,8vh,64px);max-width:none;max-height:none}
  #game .bar{max-width:none}
}
@media (min-aspect-ratio:1/1) and (max-height:480px){
  #game .bar{padding-top:max(.2em,env(safe-area-inset-top));padding-bottom:.1em}
  #game .bar .jewel{width:44px;height:44px}
  .left{flex-direction:row;gap:.6em;align-items:baseline;justify-content:center}
  .tools{width:auto;gap:4px;padding-top:.1em}
  .tool{min-height:44px;width:48px;font-size:0}
  .tool span{display:none}
  .tool svg{width:24px;height:24px}
  .tool .dots{height:24px}.tool .dots i{width:6px;height:16px}
  .colors{gap:5px}
  .sw{width:44px;height:44px}
}

/* cards */
.card{background:var(--lacquer-hi)}
.card .actions{background:var(--lacquer-hi)}
.card .big{font:900 1.3em/1.3 var(--serif);text-align:center;margin:0 0 .4em;color:var(--brass-hi)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice{min-height:44px}
.card .row{color:var(--ink);font-weight:700}
.card .done-pic{display:block;width:min(46vh,220px);height:min(46vh,220px);margin:0 auto .3em;border-radius:50%;box-shadow:0 8px 30px rgba(0,0,0,.45);animation:bloom .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes bloom{from{transform:scale(.6) rotate(-40deg);opacity:0}}
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5em}
.pic{display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.4em .2em;border-radius:14px;border:1px solid rgba(213,204,240,.25);background:rgba(251,248,255,.06);color:var(--ink);font:800 .85em/1.15 var(--sans);min-height:44px}
.pic img{width:72px;height:72px;border-radius:50%}
.pic small{color:var(--ink-soft);font-weight:700}
.pic[aria-current=true]{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass)}
.pic:disabled{opacity:.45}
.pal{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.pal .dots{display:flex;gap:3px}
.pal .dots i{width:1.1em;height:1.6em;border-radius:5px;border:1px solid rgba(0,0,0,.25)}
.row[aria-pressed=true]{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass)}
.view-pic{display:block;width:min(52vh,300px);height:min(52vh,300px);margin:0 auto;border-radius:50%}
@media (max-height:480px){.card .done-pic{width:min(28vh,96px);height:min(28vh,96px);margin-bottom:0}.card[data-result] .big{font-size:1em;margin:.1em 0 0}.card[data-result] .note{margin:.1em 0 0}.view-pic{width:min(44vh,150px);height:min(44vh,150px)}.pic img{width:52px;height:52px}.pics{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}}
@media (max-height:420px){.card{font-size:.9em}.card .big{margin:0 0 .2em}}
.toast{pointer-events:none}
/* a short screen: the finished picture sits beside its words, the buttons stay in view */
@media (max-height:480px){
  .card[data-result]{display:grid;grid-template-columns:auto 1fr;column-gap:1em;align-items:center}
  .card[data-result] > h2,.card[data-result] > .actions{grid-column:1/-1}
  .card[data-result] > .done-pic{grid-row:2/4;grid-column:1}
  .card[data-result] > .big,.card[data-result] > .note{grid-column:2;text-align:left;align-self:end}
  .card[data-result] > .note{align-self:start}
}