/* Stylesheet map: reset/base, sky layers, overlays, controls, loader, responsive tweaks */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#060e2a;--dim-label-fill:rgba(232,244,220,0.98);--dim-label-stroke:rgba(88,116,82,0.36);--dim-pill-bg:rgba(8,3,18,0.72);--dim-pill-border:rgba(255,175,70,0.24);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--chrome-top:#0e2a5a;--chrome-bottom:#4c2a3a}
html,body{width:100%;height:100%;min-height:100dvh;background:transparent;overflow:hidden;font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation}
canvas{display:block;cursor:grab;position:fixed;inset:0;z-index:1;width:100%;height:100%}
canvas:active{cursor:grabbing}

/* Sky background environment */
#sky-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky-layer{position:absolute;inset:0;transition:opacity 1.35s cubic-bezier(.28,.72,.3,1)}
#sky-back{opacity:0}
@keyframes twinkle{0%,100%{opacity:.88}50%{opacity:.18}}
.star{animation:twinkle 3.8s ease-in-out infinite}
.star.sa{animation-duration:2.9s}
.star.sb{animation-duration:4.6s;animation-delay:.85s}
.star.sc{animation-duration:6.3s;animation-delay:2.2s}
@keyframes dayCloudDriftA{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes dayCloudDriftB{0%,100%{transform:translateX(0)}50%{transform:translateX(-16px)}}
@keyframes dayCloudDriftC{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
@keyframes daySunHaloPulse{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
@keyframes daySunCorePulse{0%,100%{opacity:.98}50%{opacity:1}}
.day-sun{transform-origin:center}
.day-sun-halo,.day-sun-aura{animation:daySunHaloPulse 16s ease-in-out infinite;transform-origin:center}
.day-sun-core{animation:daySunCorePulse 12s ease-in-out infinite;transform-origin:center}
.day-cloud{animation:dayCloudDriftA 28s ease-in-out infinite;transform-origin:center;opacity:.96}
.day-cloud.d2{animation:dayCloudDriftB 34s ease-in-out infinite}
.day-cloud.d3{animation:dayCloudDriftC 31s ease-in-out infinite}
.day-cloud.d4{animation:dayCloudDriftA 39s ease-in-out infinite}

/* Brand label */
#label{position:fixed;top:calc(14px + var(--safe-top));left:50%;transform:translateX(-50%);z-index:20;pointer-events:none;text-align:center}
#label .name{font-size:13px;font-weight:400;color:rgba(220,230,255,0.92);letter-spacing:0.22em;text-transform:uppercase;white-space:nowrap;transition:color .8s ease}
#label .sub{font-size:10px;color:rgba(180,200,240,0.65);font-weight:300;margin-top:5px;letter-spacing:0.18em;text-transform:uppercase;transition:color .8s ease}
#drag-hint-top{display:inline-block;margin-top:16px;padding:6px 18px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,190,110,.7);background:rgba(8,3,18,.68);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,175,70,.18);border-radius:100px;box-shadow:0 2px 20px rgba(0,0,0,.45);opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s ease}
#drag-hint-top::before,#drag-hint-top::after{content:'*';font-size:7px;color:rgba(255,175,70,.42);margin:0 5px;vertical-align:middle}
#drag-hint-top.hidden{opacity:0;transform:translateY(-6px)}

/* Palette panel */
#palette-panel{position:fixed;bottom:calc(78px + var(--safe-bottom));left:50%;transform:translateX(-50%);z-index:20;pointer-events:auto;background:rgba(8,3,18,.76);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,175,70,.18);border-radius:20px;padding:10px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 2px 24px rgba(0,0,0,.50)}
.pal-row{display:flex;align-items:center;gap:7px}
.pal-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,210,150,.85);font-weight:300;flex-shrink:0}
.pal-swatches{display:flex;gap:4px}
.pal-sw{width:18px;height:18px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;padding:0;flex-shrink:0}
.pal-sw:hover{transform:scale(1.18)}
.pal-sw.active{border-color:rgba(255,205,120,.9);box-shadow:0 0 0 1px rgba(255,205,120,.4)}

#cta-slot{position:relative;width:184px;height:30px;flex:0 0 184px;overflow:hidden;border-radius:999px;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
#drag-hint-inline{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,190,110,.72);background:rgba(8,3,18,.76);border:1px solid rgba(255,175,70,.20);border-radius:999px;box-shadow:0 2px 18px rgba(0,0,0,.42);opacity:1;transform:translateY(0);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
#drag-hint-inline::before,#drag-hint-inline::after{content:'*';font-size:7px;color:rgba(255,175,70,.46);margin:0 5px;vertical-align:middle}
#drag-hint-inline.hidden{opacity:0;transform:translateY(-2px)}

#buy-cta-ui{position:absolute;inset:0;width:100%;max-width:none;padding:0 12px;opacity:0;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;height:30px;background:rgba(8,3,18,.80);border:1px solid rgba(255,175,70,.34);border-radius:999px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 2px 20px rgba(0,0,0,.48),0 0 0 1px rgba(255,175,70,.08) inset;text-decoration:none;clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .5s ease-out,opacity .28s ease .05s,background .16s ease,border-color .16s ease;will-change:opacity,clip-path,transform;isolation:isolate;contain:paint}
#buy-cta-ui::after{content:'';position:absolute;top:-10%;left:-32%;width:78px;height:120%;background:radial-gradient(circle at center,rgba(255,190,120,.28) 0%,rgba(255,150,60,.09) 40%,rgba(255,150,60,0) 74%);filter:blur(10px);opacity:0;pointer-events:none;animation:ctaGlowPass 5.8s ease-in-out 2.2s infinite}
#buy-cta-ui.visible{opacity:1;pointer-events:auto;clip-path:inset(0 0 0 0 round 999px);animation:ctaPulse 5.4s ease-in-out 3s infinite}
#buy-cta-ui:hover{background:rgba(26,10,4,.84);border-color:rgba(255,175,70,.62)}
#buy-cta-ui:active{transform:scale(.98)}
.buy-cta-label{font-size:10.8px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,224,176,.97);white-space:nowrap;opacity:0;transform:scale(.9) translateY(2px);will-change:opacity,transform}
#buy-cta-ui.visible .buy-cta-label{animation:ctaPop .68s cubic-bezier(.34,1.56,.64,1) .2s forwards}
@keyframes ctaPop{0%{opacity:0;transform:scale(.9) translateY(2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ctaGlowPass{0%{transform:translateX(-150%);opacity:0}20%{opacity:.32}58%{opacity:.14}100%{transform:translateX(320%);opacity:0}}
@keyframes ctaPulse{0%,74%,100%{box-shadow:0 2px 24px rgba(0,0,0,.52),0 0 0 1px rgba(255,175,70,.08) inset}86%{box-shadow:0 2px 24px rgba(0,0,0,.52),0 0 12px rgba(255,132,48,.16),0 0 0 1px rgba(255,125,40,.10) inset}}

#spec-overlay{--sep:0;position:fixed;inset:0;z-index:18;pointer-events:none;opacity:0;transition:opacity .24s ease}
#spec-overlay.visible{opacity:1}
#dim-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dim-main{stroke:rgba(255,220,176,.84);stroke-width:1.3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,170,90,.34))}
.dim-cap{stroke:rgba(255,194,124,.78);stroke-width:1.08;stroke-linecap:round}
.dim-label{font-family:'Space Grotesk','Inter',sans-serif;fill:var(--dim-label-fill);font-size:11.5px;font-weight:700;letter-spacing:.062em;text-transform:uppercase;paint-order:fill;stroke:none;text-rendering:geometricPrecision;dominant-baseline:middle;alignment-baseline:middle}
.dim-pill{fill:var(--dim-pill-bg);stroke:var(--dim-pill-border);stroke-width:1.05;filter:drop-shadow(0 2px 10px rgba(0,0,0,.44))}

/* Bottom control bar */
#ui{position:fixed;bottom:calc(18px + var(--safe-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:20;background:rgba(8,3,18,.76);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,175,70,.28);border-radius:100px;padding:7px 14px;box-shadow:0 2px 22px rgba(0,0,0,.50),0 0 0 1px rgba(255,175,70,.06) inset;white-space:nowrap;overflow:hidden}
.hint{font-size:11px;color:rgba(255,190,110,.6);font-weight:300;padding:0 4px}
.hint::before,.hint::after{content:'*';font-size:7px;color:rgba(255,175,70,.45);margin:0 3px;vertical-align:middle}
.sep{display:flex;align-items:center;justify-content:center;width:12px;height:14px;margin:0 1px;flex-shrink:0}
.btn{width:30px;height:30px;border:1px solid rgba(255,182,98,.22);background:radial-gradient(circle at 50% 30%,rgba(255,176,92,.13),rgba(13,4,24,.12));border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,color .18s,box-shadow .22s,transform .12s;color:rgba(255,210,145,.78);box-shadow:0 0 0 1px rgba(255,170,80,.05) inset;flex-shrink:0}
.btn:not(.active){text-shadow:none}
.btn:hover{background:radial-gradient(circle at 50% 22%,rgba(255,190,120,.26),rgba(18,6,28,.14));border-color:rgba(255,192,120,.34);box-shadow:0 0 10px rgba(255,150,70,.22),0 0 0 1px rgba(255,182,100,.12) inset}
.btn:active{background:rgba(255,175,70,.24);transform:scale(.96)}
.btn.active{background:rgba(255,175,70,.2);color:rgba(255,224,178,.97);border-color:rgba(255,196,124,.42);box-shadow:0 0 8px rgba(255,170,80,.14),0 0 0 1px rgba(255,184,96,.13) inset}
#btn-flame{color:rgba(255,182,126,.78)}
#btn-flame.active{color:#ff8c42;filter:drop-shadow(0 0 4px rgba(255,100,30,.55));background:rgba(255,100,30,.16)}
#btn-magnet{color:rgba(255,192,136,.84)}
#btn-magnet svg{transition:transform .2s ease,filter .2s ease}
#btn-magnet.active{color:#7edfd2;filter:drop-shadow(0 0 3px rgba(80,220,190,.5));background:rgba(50,200,175,.16)}
#btn-magnet.active svg{transform:scale(1.06);filter:drop-shadow(0 0 3px rgba(92,232,202,.40))}
#ui,#palette-panel,#buy-cta-ui{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;backface-visibility:hidden}
#ui svg,#palette-panel svg,.btn svg{shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}
#sky-front,#sky-back,#spec-overlay{will-change:opacity}

/* Loader */
#loader{position:fixed;inset:0;background:#0a0520;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:100;transition:opacity .5s ease}
#loader.fade{opacity:0;pointer-events:none}
.l-name{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,200,140,.85);font-weight:300}
.l-bar-bg{width:100px;height:1px;background:rgba(255,175,70,.18)}
.l-bar{height:1px;background:#4a7a42;width:0%;transition:width .08s linear}

/* Palette bump + CTA responsive tweaks */
@keyframes palBump{0%,100%{transform:translateX(-50%) scale(1)}38%{transform:translateX(-50%) scale(1.028)}68%{transform:translateX(-50%) scale(.985)}}
#palette-panel.bump{animation:palBump .65s cubic-bezier(.34,1.56,.64,1)}

@media (max-width:640px){
  #cta-slot{width:160px;flex-basis:160px}
  #buy-cta-ui{padding:0 10px}
  .buy-cta-label{font-size:9.8px}
  .dim-label{font-size:10.5px}
}

@media (pointer:coarse){
  #ui,#palette-panel,#buy-cta-ui{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  #drag-hint-top{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .btn{width:32px;height:32px}
  #buy-cta-ui{clip-path:none;transform:scaleX(.001);transform-origin:left center;transition:transform .5s ease-out,opacity .28s ease .05s,background .16s ease,border-color .16s ease}
  #buy-cta-ui.visible{transform:scaleX(1)}
  #buy-cta-ui.visible:active{transform:scaleX(.985)}
  #buy-cta-ui::after{display:none}
}

html.low-end #ui,
html.low-end #palette-panel,
html.low-end #buy-cta-ui,
html.low-end #drag-hint-top{backdrop-filter:none;-webkit-backdrop-filter:none}
html.low-end #buy-cta-ui,
html.low-end #buy-cta-ui.visible{animation:none}


html.ios #ui,
html.ios #palette-panel,
html.ios #buy-cta-ui,
html.ios #drag-hint-top{backdrop-filter:none;-webkit-backdrop-filter:none}
html.ios #buy-cta-ui::after{display:none}
html.ios #buy-cta-ui{clip-path:none;transform:none;transition:opacity .24s ease,background .16s ease,border-color .16s ease;isolation:auto;contain:none;will-change:auto;animation:none;box-shadow:0 1px 12px rgba(0,0,0,.34),0 0 0 1px rgba(255,175,70,.08) inset}
html.ios #buy-cta-ui.visible{opacity:1;animation:none}
html.ios #buy-cta-ui.visible:active{transform:none}

html.ios #drag-hint-inline{display:flex;transform:none;transition:opacity .18s ease;backface-visibility:hidden}
html.ios #drag-hint-inline.hidden{transform:none}