/* Hex Daily demo. Everything is sized in --u, one "pixel" of a 360px-wide stage, so the
   layout scales identically from 360px phones to the 480px desktop box. */
#stage{--ok:#3DDC97;--near:#FFC94D;--far:#2B2A3A;container-type:size;background:radial-gradient(120% 70% at 50% 0%,#20202d 0%,var(--panel) 55%)}
.hx{--u:calc(100cqw / 360);--th:calc(var(--u) * 26);--shade:rgba(12,12,17,.68);
  position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--u)*12) calc(var(--u)*12) calc(var(--u)*11);gap:calc(var(--u)*9);font-family:var(--display)}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.hx-top{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*18);font-size:calc(var(--u)*13);color:var(--mid);letter-spacing:.01em}
.hx-top b{color:var(--ink);font-weight:700}
.hx-top .acc{color:var(--accent);font-weight:700}
.pips{display:flex;gap:calc(var(--u)*5)}
.pips i{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;border:calc(var(--u)*1.5) solid var(--mid);opacity:.55;transition:background .3s,border-color .3s,opacity .3s,transform .3s}
.pips i.on{background:var(--accent);border-color:var(--accent);opacity:1;transform:scale(1.15)}

/* the split swatch */
.hx-sw{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*6);height:calc(var(--u)*94);flex:none;border-radius:calc(var(--u)*18);transition:gap .5s cubic-bezier(.6,0,.2,1),box-shadow .6s}
.sw{position:relative;border-radius:calc(var(--u)*6);overflow:hidden;transition:border-radius .5s,background-color .12s linear}
.sw.t{border-radius:calc(var(--u)*18) calc(var(--u)*6) calc(var(--u)*6) calc(var(--u)*18)}
.sw.m{border-radius:calc(var(--u)*6) calc(var(--u)*18) calc(var(--u)*18) calc(var(--u)*6)}
.sw::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 calc(var(--u)*-20) calc(var(--u)*30) rgba(0,0,0,.12);pointer-events:none}
.sw-lab{position:absolute;left:calc(var(--u)*8);bottom:calc(var(--u)*8);display:flex;flex-direction:column;gap:1px;padding:calc(var(--u)*4) calc(var(--u)*8);border-radius:calc(var(--u)*9);background:rgba(12,12,17,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;transition:opacity .4s}
.sw-lab small{font-size:calc(var(--u)*9.5);letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:600}
.sw-lab span{font-size:calc(var(--u)*15);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sw-q{position:absolute;right:calc(var(--u)*10);top:calc(var(--u)*2);font-size:calc(var(--u)*46);font-weight:700;color:#fff;opacity:.28;line-height:1.1;transition:opacity .4s,transform .4s}
.sw.t.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.94)}100%{transform:scale(1)}}
.hx-sw.solved{gap:0;box-shadow:0 0 calc(var(--u)*34) calc(var(--u)*4) var(--glow,transparent);animation:glow 1.6s ease-in-out infinite alternate}
.hx-sw.solved .sw{border-radius:calc(var(--u)*18)}
.hx-sw.solved .sw.t{border-radius:calc(var(--u)*18) 0 0 calc(var(--u)*18)}
.hx-sw.solved .sw.m{border-radius:0 calc(var(--u)*18) calc(var(--u)*18) 0}
.hx-sw.solved .sw.m .sw-lab,.hx-sw.solved .sw-q{opacity:0}
@keyframes glow{to{box-shadow:0 0 calc(var(--u)*50) calc(var(--u)*10) var(--glow,transparent)}}

/* guess rows */
.hx-rows{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*4.5);flex:none}
.row{display:grid;grid-template-columns:calc(var(--u)*27) calc(var(--u)*66) repeat(3,1fr) calc(var(--u)*42);gap:calc(var(--u)*5);height:calc(var(--u)*27);align-items:stretch;transition:opacity .3s}
.row>*{border-radius:calc(var(--u)*7);display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*12.5);font-variant-numeric:tabular-nums}
.row .chip{border:1px dashed var(--line)}
.row .hex{justify-content:flex-start;padding-left:calc(var(--u)*3);color:var(--mid);font-weight:600;letter-spacing:.02em}
.row .cell{border:1px dashed var(--line);gap:calc(var(--u)*5);font-weight:700}
.row .cell b{font-weight:600;opacity:.6;font-size:calc(var(--u)*10.5)}
.row .pct{justify-content:flex-end;color:var(--mid);font-weight:700}
.row.cur .chip{border:calc(var(--u)*2) solid var(--accent);box-shadow:0 0 calc(var(--u)*10) color-mix(in srgb,var(--accent) 45%,transparent)}
.row.cur .hex{color:var(--ink)}
.row.cur .cell{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.row.done .chip{border:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.row.done .hex{color:var(--ink)}
.row.done .pct{color:var(--ink)}
.cell.t-ok{background:var(--ok);color:#0B2A1D;border:none}
.cell.t-near{background:var(--near);color:#3A2600;border:none}
.cell.t-far,.cell.t-vfar{background:var(--far);color:var(--ink);border:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cell.flip{animation:flip .46s cubic-bezier(.3,.7,.4,1.25) both}
@keyframes flip{0%{transform:perspective(200px) rotateX(-90deg);opacity:.2}100%{transform:none;opacity:1}}
.pct.hot{color:var(--ok)!important}
.hx-legend{position:absolute;left:0;right:0;top:calc(var(--u)*31.5);height:calc(var(--u)*150);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*7);text-align:center;color:var(--mid);font-size:calc(var(--u)*12.5);line-height:1.3;pointer-events:none;transition:opacity .35s}
.hx-legend.gone{opacity:0}
.hx-rows.intro .row+.row{opacity:.22}
.hx-legend .lg{display:flex;gap:calc(var(--u)*6);flex-wrap:wrap;justify-content:center}
.hx-legend .lg span{display:inline-flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*3) calc(var(--u)*8);border-radius:calc(var(--u)*7);font-weight:700;font-size:calc(var(--u)*11.5)}
.hx-legend strong{color:var(--ink);font-size:calc(var(--u)*14)}

/* controls */
.hx-ctrl{display:grid;grid-template-columns:1fr calc(var(--u)*76);gap:calc(var(--u)*10);margin-top:auto;flex:none}
.sls{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.sl{display:grid;grid-template-columns:calc(var(--u)*14) 1fr calc(var(--u)*30);align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*34)}
.sl .k{font-weight:700;font-size:calc(var(--u)*14);color:var(--ink)}
.sl output{text-align:right;font-weight:600;font-size:calc(var(--u)*13.5);color:var(--mid);font-variant-numeric:tabular-nums}
.sl .tr{position:relative;display:block;height:calc(var(--u)*34)}
.sl .win{position:absolute;top:calc(var(--u)*30.5);height:calc(var(--u)*3);border-radius:99px;background:var(--ink);box-shadow:0 0 calc(var(--u)*6) rgba(255,255,255,.6);opacity:0;transition:opacity .4s,left .5s cubic-bezier(.3,.8,.3,1),width .5s cubic-bezier(.3,.8,.3,1);
  left:calc(var(--th)/2 + (100% - var(--th)) * var(--lo,0));width:calc((100% - var(--th)) * (var(--hi,1) - var(--lo,0)) + var(--u)*2)}
.sl .tr.narrow .win{opacity:.9}
.sl input{position:relative;-webkit-appearance:none;appearance:none;width:100%;height:calc(var(--u)*34);margin:0;background:transparent;cursor:pointer;touch-action:none;
  --rng:linear-gradient(90deg,var(--shade) 0 calc(var(--th)/2 + (100% - var(--th)) * var(--lo,0)),transparent 0 calc(var(--th)/2 + (100% - var(--th)) * var(--hi,1)),var(--shade) 0),linear-gradient(90deg,var(--c0,#000) calc(var(--th)/2),var(--c1,#fff) calc(100% - var(--th)/2))}
.sl input:focus{outline:none}
.sl input::-webkit-slider-runnable-track{height:calc(var(--u)*16);border-radius:99px;background:var(--rng);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sl input::-moz-range-track{height:calc(var(--u)*16);border-radius:99px;background:var(--rng);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--th);height:var(--th);margin-top:calc(var(--u)*-5);border-radius:50%;background:var(--tc,#888);border:calc(var(--u)*3) solid #fff;box-shadow:0 calc(var(--u)*2) calc(var(--u)*8) rgba(0,0,0,.55);transition:transform .15s}
.sl input::-moz-range-thumb{width:var(--th);height:var(--th);box-sizing:border-box;border-radius:50%;background:var(--tc,#888);border:calc(var(--u)*3) solid #fff;box-shadow:0 calc(var(--u)*2) calc(var(--u)*8) rgba(0,0,0,.55)}
.sl input:active::-webkit-slider-thumb,.sl input.held::-webkit-slider-thumb{transform:scale(1.18)}
.sl input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--u)*3) var(--accent),0 calc(var(--u)*2) calc(var(--u)*8) rgba(0,0,0,.55)}
.sl input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--u)*3) var(--accent)}
.sl input:disabled{cursor:default}
.guess{font:700 calc(var(--u)*17)/1 var(--display);border:none;border-radius:calc(var(--u)*16);background:var(--accent);color:var(--accent-ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*5);
  box-shadow:0 calc(var(--u)*5) 0 color-mix(in srgb,var(--accent) 55%,#000),0 calc(var(--u)*10) calc(var(--u)*24) color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .1s,box-shadow .1s,opacity .3s;margin-bottom:calc(var(--u)*5)}
.guess small{font-size:calc(var(--u)*11);font-weight:600;opacity:.7}
.guess:active,.guess.pressed{transform:translateY(calc(var(--u)*4));box-shadow:0 calc(var(--u)*1) 0 color-mix(in srgb,var(--accent) 55%,#000),0 calc(var(--u)*4) calc(var(--u)*12) color-mix(in srgb,var(--accent) 30%,transparent)}
.guess:focus-visible{outline:calc(var(--u)*3) solid var(--ink);outline-offset:calc(var(--u)*2)}
.guess:disabled{opacity:.45;cursor:default}

/* fx layers */
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.touch{position:absolute;left:0;top:0;width:calc(var(--u)*38);height:calc(var(--u)*38);margin:calc(var(--u)*-19) 0 0 calc(var(--u)*-19);border-radius:50%;background:rgba(255,255,255,.28);border:calc(var(--u)*2.5) solid rgba(255,255,255,.9);box-shadow:0 0 calc(var(--u)*18) rgba(255,255,255,.35);pointer-events:none;z-index:6;opacity:0;transition:opacity .18s,scale .14s}
.touch.on{opacity:1}
.touch.down{scale:.78;background:rgba(255,255,255,.45)}

/* results card (#cta, built by showCta) */
#cta.hx-end{--u:calc(100cqw / 360);justify-content:center;gap:0;padding:calc(var(--u)*22) calc(var(--u)*20) calc(var(--u)*16);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:7;font-family:var(--display)}
#cta.hx-end.show{animation:rise .55s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--u)*24))}to{opacity:1;transform:none}}
.hx-end .k{font-size:calc(var(--u)*12);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);font-weight:600}
#cta.hx-end h2{font:700 calc(var(--u)*34)/1.05 var(--display);margin:calc(var(--u)*6) 0 calc(var(--u)*10)}
.hx-end .ans{position:relative;width:calc(var(--u)*290);height:calc(var(--u)*46);border-radius:calc(var(--u)*14);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*8) 0 calc(var(--u)*14);margin-bottom:calc(var(--u)*12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 calc(var(--u)*8) calc(var(--u)*30) var(--glow,transparent)}
.hx-end .ans small{font-size:calc(var(--u)*10);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.hx-end .ans b{padding:calc(var(--u)*5) calc(var(--u)*10);border-radius:calc(var(--u)*9);background:rgba(12,12,17,.58);color:#fff;font-size:calc(var(--u)*15);font-variant-numeric:tabular-nums}
.hx-end .grid{display:flex;flex-direction:column;gap:calc(var(--u)*4);padding:calc(var(--u)*10) calc(var(--u)*16);border-radius:calc(var(--u)*14);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:calc(var(--u)*12)}
.hx-end .gr{display:flex;align-items:center;gap:calc(var(--u)*5);animation:pin .35s cubic-bezier(.3,1.5,.5,1) both}
.hx-end .gr i{width:calc(var(--u)*18);height:calc(var(--u)*18);border-radius:calc(var(--u)*4)}
.hx-end .gr i.t-ok{background:var(--ok)}.hx-end .gr i.t-near{background:var(--near)}.hx-end .gr i.t-far,.hx-end .gr i.t-vfar{background:#3A394C}
.hx-end .gr span{margin-left:calc(var(--u)*8);min-width:calc(var(--u)*38);text-align:right;font-weight:700;font-size:calc(var(--u)*13);color:var(--mid);font-variant-numeric:tabular-nums}
@keyframes pin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
#cta.hx-end p{font-size:calc(var(--u)*13.5);line-height:1.35;margin:0 0 calc(var(--u)*14);max-width:calc(var(--u)*290)}
#cta.hx-end .btn{font-size:calc(var(--u)*16);padding:calc(var(--u)*11) calc(var(--u)*18);border-radius:calc(var(--u)*12)}
#cta.hx-end .btn.main{width:calc(var(--u)*290)}
.hx-end .two{display:flex;gap:calc(var(--u)*10);margin-top:calc(var(--u)*10);width:calc(var(--u)*290)}
.hx-end .two .btn{flex:1;text-align:center;padding-left:0;padding-right:0}
.hx-end .copy.done{background:var(--ok);border-color:var(--ok);color:#0B2A1D}

@media (prefers-reduced-motion:reduce){.hx-sw.solved{box-shadow:0 0 calc(var(--u)*40) calc(var(--u)*6) var(--glow,transparent)}}