/* FunHaus · Pastel Sort. Tokens, header, buttons and footer match big-top/style.css and /assets/css/style.css. */
:root{--red:#C1272D;--red2:#9E1D23;--cream:#F4ECD8;--cream2:#FBF6EC;--navy:#1F3A5F;--navy2:#162B47;--gold:#D4A027;--ink:#2B2B2B;--pink:#F4A9C0;--sky:#A9CCE3;--butter:#F6E7A1;--mint:#A8D8C4;--gutter:16px;--max:1100px;--disp:"Shrikhand",Georgia,serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--stripe:repeating-linear-gradient(90deg,var(--red) 0 22px,var(--cream) 22px 44px);--line:#E6DAC0;--hdr:62px;--ground:#FBF6EC;--isokit-line:#E6DAC0;--isokit-ink:#2B2B2B;--isokit-paper:#FBF6EC}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.2;margin:0 0 .5em;color:var(--navy)}
p{margin:0 0 1em}
button{font:inherit}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font:700 .78rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 .6rem}
.rule{display:block;width:96px;height:10px;margin:1rem auto 1.2rem;border-radius:6px;background:var(--stripe);background-size:22px 100%}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.6rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:0}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}

/* header: awning stripe and scalloped edge (same as the main site) */
.site-header{position:sticky;top:0;z-index:50;background:var(--red);color:var(--cream)}
.site-header::before{content:"";display:block;height:6px;background:var(--stripe);background-size:22px 100%}
.site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:radial-gradient(circle at 12px 0,var(--red) 11px,transparent 12px) 0 0/24px 12px repeat-x;pointer-events:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px}
.back{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .2rem;color:var(--cream);text-decoration:none;font-weight:700;font-size:.98rem}
.back:hover{color:var(--butter);text-decoration:underline}
.site-header :focus-visible{outline-color:var(--butter)}
.logo{font:400 1.35rem/1 var(--disp);color:var(--cream);display:flex;align-items:center;gap:.5rem}
.logo svg{width:28px;height:28px}
.bar-btns{display:flex;gap:6px}
.pill{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;min-width:44px;padding:.3rem .8rem;border:2px solid var(--cream);border-radius:999px;background:transparent;color:var(--cream);font:700 .9rem/1 var(--sans);cursor:pointer}
.pill:hover{background:var(--red2)}
.sound[aria-pressed=true]{background:var(--cream);color:var(--red2)}
.sound-ico{font-size:1.05rem;line-height:1}
@media (max-width:439px){.logo{display:none}}

/* main site buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.8rem 1.6rem;border:3px solid var(--navy);border-radius:999px;color:var(--cream);background:var(--red);font:700 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--navy);transition:transform .2s,box-shadow .2s,background .2s;max-width:100%;text-align:center}
.btn:hover{background:var(--red2);transform:translateY(-2px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--navy)}
.btn.alt{background:var(--butter);color:var(--navy)}
.btn.alt:hover{background:var(--gold)}
.btn.ghost{background:var(--cream2);color:var(--navy)}
.btn.ghost:hover{background:#fff}

/* game controls: smaller cousins of .btn */
.ctl{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:44px;padding:.4rem .7rem;border:2px solid var(--navy);border-radius:999px;background:var(--cream2);color:var(--navy);font:700 .92rem/1.15 var(--sans);cursor:pointer;box-shadow:0 3px 0 var(--navy);touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-align:center}
.ctl:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.ctl[disabled]{opacity:.45;cursor:default;box-shadow:0 3px 0 var(--navy);transform:none}
.ctl.mini{min-height:44px;font-size:.85rem;padding:.3rem .8rem;box-shadow:0 2px 0 var(--navy)}
.linkish{background:none;border:0;padding:.5rem .4rem;min-height:44px;color:var(--red2);text-decoration:underline;font-weight:700;cursor:pointer}

/* play area: fits the screen under the header */
.play{padding:13px 0 calc(4px + env(safe-area-inset-bottom))}
.play-in{display:flex;flex-direction:column;gap:5px;height:calc(100vh - var(--hdr) - 17px - env(safe-area-inset-bottom));height:calc(100dvh - var(--hdr) - 17px - env(safe-area-inset-bottom));min-height:430px;max-width:720px}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.topline h1{font-size:clamp(1.45rem,6.6vw,2rem);color:var(--red);margin:0;line-height:1}
.tabs{display:flex;border:2px solid var(--navy);border-radius:999px;overflow:hidden;background:var(--cream2);flex:none}
.tab{min-height:44px;min-width:44px;padding:0 .95rem;border:0;background:transparent;color:var(--navy);font:700 .92rem/1 var(--sans);cursor:pointer}
.tab[aria-pressed=true]{background:var(--navy);color:var(--cream2)}
.tabs .tab+.tab{border-left:2px solid var(--navy)}
.levels{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:1px 2px;scroll-snap-type:x proximity;flex:none}
.levels::-webkit-scrollbar{display:none}
.lv{position:relative;flex:1 0 44px;max-width:52px;width:44px;height:44px;min-width:44px;border:2px solid var(--navy);border-radius:50%;background:var(--cream2);color:var(--navy);font:700 1rem/1 var(--sans);cursor:pointer;scroll-snap-align:center;padding:0}
.lv[aria-pressed=true]{background:var(--navy);color:var(--cream2)}
.lv .tick{position:absolute;right:-2px;top:-3px;width:17px;height:17px;border-radius:50%;background:var(--gold);color:var(--ink);font:700 11px/17px var(--sans);border:1.5px solid var(--navy)}
.status{display:flex;align-items:baseline;gap:10px;min-height:26px;flex:none;white-space:nowrap}
.status p{margin:0;font-weight:700;color:var(--navy);font-size:.98rem;line-height:1.2}
.status .status-hops{font-weight:500;color:var(--ink)}
.board{position:relative;flex:1 1 auto;min-height:0;border-radius:22px;background:var(--ground);border:2px solid var(--line);touch-action:manipulation;overflow:hidden;transition:background .3s}
.board canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.jars{position:absolute;inset:0}
.jar-btn{position:absolute;border:0;margin:0;padding:0;background:transparent;border-radius:18px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.jar-btn:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.jar-btn[aria-disabled=true]{cursor:default}
.side{display:contents}
.note{margin:0;min-height:0;font-size:.9rem;line-height:1.35;color:var(--navy);text-align:center;flex:none}
.note:empty{display:none}
.controls{display:flex;gap:6px;flex:none;padding-bottom:4px}
.controls .ctl{flex:1 1 0;min-width:0;padding:.35rem .25rem;font-size:.88rem}
.solved{flex:none;text-align:center;background:var(--cream2);border:3px solid var(--navy);border-radius:20px;padding:.7rem .7rem .5rem;position:relative;overflow:hidden;box-shadow:0 4px 0 var(--navy)}
.solved::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--stripe);background-size:22px 100%}
.solved h2{font-size:1.6rem;margin:.25rem 0 0;color:var(--red)}
.solved p{margin:0 0 .3rem;font-size:.95rem;line-height:1.35}
.solved-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:.45rem 0 .2rem}
.solved-gate{margin:0!important}
.solved-msg{font-size:.88rem!important;color:var(--navy)}
.solved-msg:empty,.solved-gate:empty{display:none}

/* below the fold */
.about{padding:1.6rem 0 1rem;text-align:center}
.tagline{font-size:1.1rem;font-weight:700;color:var(--navy);margin:0 auto .5rem;max-width:30em}
.about-text{max-width:34em;margin:0 auto}
.more{background:var(--cream2);text-align:center;padding:3rem 0}
.more h2{font-size:clamp(1.6rem,6vw,2.4rem)}
.more-intro{max-width:30em;margin:0 auto 1.4rem}
.more-links{display:flex;flex-direction:column;align-items:center;gap:16px}
.more-links .btn{width:100%;max-width:340px}
.foot-gate{margin:1.4rem 0 0}
.foot{background:var(--red);color:var(--cream);padding:2.4rem 0 2rem;text-align:center;font-size:.95rem;position:relative;border-top:8px solid var(--navy)}
.foot ul{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.6rem}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:500}
.foot a:hover{color:var(--butter);text-decoration:underline}
.foot :focus-visible{outline-color:var(--butter)}
.foot small{display:block;letter-spacing:.1em;opacity:.95}

/* dialogs (palette, album) */
.dlg{border:3px solid var(--navy);border-radius:20px;padding:16px;width:min(calc(100vw - 16px),460px);max-height:calc(100dvh - 24px);background:var(--cream2);color:var(--ink);box-shadow:0 6px 0 var(--navy)}
.dlg-wide{width:min(calc(100vw - 16px),560px)}
.dlg::backdrop{background:rgba(22,43,71,.5)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.4rem}
.dlg-head h2{margin:0;font-size:1.5rem}
.pal-list{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:10px}
.pal{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:44px;padding:.6rem .8rem;border:2px solid var(--line);border-radius:16px;background:#FFFDF8;color:var(--ink);text-align:left;cursor:pointer}
.pal[aria-pressed=true]{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.pal[aria-disabled=true]{cursor:default;opacity:.85}
.pal strong{color:var(--navy);font-size:1rem}
.pal small{font-size:.86rem;line-height:1.3}
.pal canvas{width:100%;max-width:300px;height:34px}
.switch{display:flex;align-items:center;gap:.6rem;min-height:44px;font-weight:700;color:var(--navy);cursor:pointer}
.switch input{width:24px;height:24px;margin:0;accent-color:var(--red)}
.album-days{margin:0 0 .5rem;font-weight:500}
.album-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .7rem}
.album-tabs .tab{border:2px solid var(--navy);border-radius:999px;padding:0 .7rem;font-size:.86rem;background:var(--cream2)}
.album-tabs .tab[aria-pressed=true]{background:var(--navy);color:var(--cream2)}
.month-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:.4rem}
.month-nav h3{margin:0;font:700 1rem/1.2 var(--sans);color:var(--navy)}
.cal-head,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal-head span{text-align:center;font:700 .75rem/1.6 var(--sans);color:var(--navy)}
.cal{list-style:none;margin:0;padding:0}
.cal li{min-width:0}
.cal .isokit-slot{display:block;width:100%;aspect-ratio:1;min-height:44px;padding:1px;border-radius:9px;border:1.5px solid var(--line);background:var(--cream2);color:var(--ink);font:inherit}
.cal .isokit-slot.is-empty{border-style:dashed}
.cal .isokit-slot canvas{display:block;width:100%;height:100%}
.cal .gap{visibility:hidden}
.isokit-slot{cursor:pointer}
.isokit-slot.is-shut{border-style:dotted;opacity:.7}
.isokit-album-big h2{font-size:1.3rem;margin:.6rem 0 .2rem}
.isokit-album-big p{margin:0 0 .8rem}
.isokit-album-big button{min-height:44px;border:2px solid var(--navy);border-radius:999px;background:var(--cream2);color:var(--navy);font:700 .92rem/1 var(--sans);padding:0 1.1rem;cursor:pointer}
dialog.isokit-dlg{border:3px solid var(--navy);box-shadow:0 6px 0 var(--navy)}

/* the kit's email gate, in FunHaus dress */
dialog.isokit-gate{background:var(--cream2);color:var(--ink);border:3px solid var(--navy);border-radius:22px;padding:26px 18px 18px;box-shadow:0 8px 0 var(--red);overflow:hidden;width:min(calc(100vw - 16px),460px);max-height:calc(100dvh - 24px)}
dialog.isokit-gate::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,#D4A027 0 18px,#F4ECD8 18px 36px)}
dialog.isokit-gate::backdrop{background:rgba(22,43,71,.55)}
.isokit-gate h2{font-size:clamp(1.35rem,6vw,1.75rem);margin:0 0 .5rem;color:var(--navy)}
.isokit-eyebrow{font:700 .78rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 .4rem}
.isokit-body{font-size:.98rem;line-height:1.5}
.isokit-gate label[for]{display:block;font-weight:700;color:var(--navy);margin:0 0 .3rem}
.isokit-gate input[type=email]{border:3px solid var(--navy);border-radius:14px;background:#fff;color:var(--ink);font-family:var(--sans)}
.isokit-gate input[type=email]:focus{outline:3px solid var(--gold);outline-offset:2px}
.isokit-opt{font-size:.95rem;line-height:1.4;cursor:pointer}
.isokit-opt input{accent-color:var(--red)}
.isokit-send,.isokit-dl{border:3px solid var(--navy);border-radius:999px;background:var(--red);color:var(--cream);font:700 1rem/1.2 var(--sans);padding:.6rem 1.2rem;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--navy)}
.isokit-send[disabled]{opacity:.75;cursor:wait}
.isokit-notnow,.isokit-gate button[type=button]:not(.isokit-other){border:2px solid var(--navy);border-radius:999px;background:var(--cream2);color:var(--navy);font:700 .95rem/1.2 var(--sans);padding:.5rem 1.1rem;cursor:pointer}
.isokit-other{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;font-size:.92rem}
.isokit-msg{color:var(--red2);font-weight:700;margin:.6rem 0 0}
.isokit-msg:empty{display:none}
.isokit-small{color:#4a4a4a;line-height:1.45;margin:.9rem 0 0}
.isokit-small a{color:var(--red2)}

/* landscape phones: jars on one row, controls beside the board */
@media (orientation:landscape) and (max-height:520px){
  .play{padding-top:14px}
  .play-in{display:grid;grid-template-columns:1fr 136px;grid-template-rows:auto auto auto minmax(190px,1fr);column-gap:10px;row-gap:4px;height:auto;min-height:calc(100dvh - var(--hdr) - 24px);max-width:none}
  .topline,.levels,.status{grid-column:1/-1}
  .topline h1{font-size:1.4rem}
  .board{grid-column:1;grid-row:4}
  .side{grid-column:2;grid-row:4;display:flex;flex-direction:column;gap:6px;min-height:0}
  .controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .controls .ctl{font-size:.82rem}
  .solved{padding:.5rem}
  .solved-btns{grid-template-columns:1fr}
  .solved h2{font-size:1.3rem}
  .note{text-align:left}
}
@media (min-width:700px){
  :root{--gutter:24px}
  .bar{min-height:64px}
  :root{--hdr:70px}
  .more-links{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .more-links .btn{width:auto;min-width:220px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn:hover,.btn:active,.ctl:active{transition:none;transform:none}
  .board{transition:none}
}