:root{
  --sun:#ef5a40; --sun-lo:#ff8566; --sun-hi:#e2492f;
  --moon:#11a597; --moon-lo:#2cc6b4; --moon-hi:#0c8a7d;
  --ink:#1f2630; --muted:#7b8696; --soft:#9aa4b2;
  --line:#e7ebef; --clue:#f3f5f7; --board:#ffffff;
  --bad:#e5484d;
  --cs:58px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Outfit",system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(120% 80% at 16% 0%, #fff3ee 0%, #ffffff00 42%),
    radial-gradient(120% 90% at 100% 100%, #e9f7f4 0%, #ffffff00 48%),
    linear-gradient(160deg,#f1f4f7,#e8edf1);
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:max(18px,env(safe-area-inset-top)) 16px env(safe-area-inset-bottom);
  user-select:none; -webkit-user-select:none;
}
.wrap{ width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:16px;}

/* header */
.top{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:6px;}
.brand .eyebrow{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:5px;}
.brand h1{ font-family:"Fraunces",serif; font-weight:600; font-size:40px; line-height:.95; letter-spacing:-.01em;}
.brand h1 .o{ color:var(--sun);} .brand h1 .i{ color:var(--moon);}
.timer{ text-align:right; font-variant-numeric:tabular-nums;}
.timer .t{ font-family:"Fraunces",serif; font-weight:600; font-size:22px; line-height:1; color:var(--ink);}
.timer .l{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); font-weight:600; margin-top:3px;}

/* difficulty segmented control */
.diff{ display:inline-flex; background:#fff; border:1px solid #e6e9ee; border-radius:999px; padding:4px;
  box-shadow:0 6px 16px -10px rgba(31,38,48,.3);}
.diff button{ border:0; background:transparent; font-family:"Outfit",sans-serif; font-weight:600; font-size:13px;
  color:var(--muted); padding:7px 18px; border-radius:999px; cursor:pointer; transition:color .15s, background .15s; letter-spacing:.01em;}
.diff button.on{ background:var(--ink); color:#fff;}

/* board */
.board-wrap{ position:relative; background:var(--board); border-radius:22px; padding:14px;
  box-shadow:0 1px 0 #fff inset, 0 30px 60px -22px rgba(31,38,48,.34), 0 6px 18px -10px rgba(31,38,48,.22);
  border:1px solid #eef1f4;}
.grid{ display:grid; grid-template-columns:repeat(6,var(--cs)); grid-template-rows:repeat(6,var(--cs)); gap:3px;
  background:var(--line); border-radius:12px; overflow:hidden; position:relative;}
.cell{ background:var(--board); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer;
  transition:background .15s;}
.cell.clue{ background:var(--clue); cursor:default;}
.cell.hintpop{ animation:hintpop .5s ease;}
@keyframes hintpop{ 0%{transform:scale(.4);opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1);opacity:1;} }
.cell .pc{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; animation:place .22s cubic-bezier(.2,1.3,.4,1);}
@keyframes place{ 0%{transform:scale(.3);opacity:0;} 100%{transform:scale(1);opacity:1;} }
.cell.bad{ background:#fdecec;}
.cell.clue.bad{ background:#fbe3e3;}
.cell.bad .pc svg{ filter:drop-shadow(0 0 0 transparent);}

/* constraint badges */
.badge{ position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; color:#586273;
  border:1px solid #e3e7ec; box-shadow:0 2px 5px rgba(31,38,48,.12); z-index:6;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; transform:translate(-50%,-50%);
  font-family:"Outfit",sans-serif; transition:color .15s, border-color .15s, background .15s;}
.badge.bad{ color:#fff; background:var(--bad); border-color:var(--bad);}

/* win glow sweep */
.glow{ position:absolute; inset:0; border-radius:12px; pointer-events:none; opacity:0; z-index:7;
  background:linear-gradient(115deg, #ffffff00 30%, #fff4ee99 48%, #e6faf699 56%, #ffffff00 74%);
  background-size:260% 100%; background-position:120% 0;}
.solved .glow{ opacity:1; animation:sweep 1s ease forwards;}
@keyframes sweep{ from{background-position:120% 0;} to{background-position:-60% 0;} }
.solved .cell .pc{ animation:settle .6s ease;}
@keyframes settle{ 0%{transform:scale(1);} 40%{transform:scale(1.1);} 100%{transform:scale(1);} }

/* controls */
.controls{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;}
.btn{ font-family:"Outfit",sans-serif; font-weight:600; font-size:13.5px; color:var(--ink);
  background:#fff; border:1px solid #e6e9ee; padding:10px 16px; border-radius:12px; cursor:pointer;
  box-shadow:0 6px 16px -12px rgba(31,38,48,.4); transition:transform .08s, border-color .15s, background .15s;
  display:inline-flex; align-items:center; gap:7px;}
.btn:hover{ border-color:#d4dae1;}
.btn:active{ transform:translateY(1px);}
.btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.btn.hint{ color:#0c8a7d;} .btn.hint svg{ stroke:#0c8a7d;}
.btn.primary{ background:var(--ink); color:#fff; border-color:var(--ink);}
.btn.icon{ padding:10px 12px;}
.btn:disabled{ opacity:.4; cursor:default;}

/* footer hint line */
.tip{ font-size:12px; color:var(--soft); text-align:center; line-height:1.5; max-width:340px;}

/* overlays */
.scrim{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:rgba(31,38,48,.34); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:24px;}
.scrim.show{ display:flex; animation:fade .3s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.panel{ width:100%; max-width:340px; text-align:center; background:#fff; border-radius:22px; padding:30px 26px 24px;
  box-shadow:0 30px 70px -20px rgba(31,38,48,.5); border:1px solid #eef1f4; animation:rise .35s cubic-bezier(.2,1,.4,1);}
@keyframes rise{ from{transform:translateY(12px);opacity:0;} to{transform:none;opacity:1;} }
.panel .cele{ display:flex; gap:12px; justify-content:center; margin-bottom:16px;}
.panel h2{ font-family:"Fraunces",serif; font-weight:600; font-size:28px; margin-bottom:6px;}
.panel .sub{ font-size:13.5px; color:var(--muted); line-height:1.55; margin-bottom:18px;}
.panel .timebox{ display:inline-flex; flex-direction:column; gap:2px; background:#f5f7f9; border-radius:14px; padding:12px 26px; margin-bottom:20px;}
.panel .timebox .v{ font-family:"Fraunces",serif; font-weight:700; font-size:30px; color:var(--ink); font-variant-numeric:tabular-nums;}
.panel .timebox .l{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); font-weight:600;}
.panel .btn.primary{ width:100%; justify-content:center; padding:13px;}

/* about */
.about-panel{ max-width:360px;}
.about-lead{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:2px 0 0;}
.howto{ text-align:left; font-size:13px; line-height:1.7; color:var(--muted); margin:14px 0 2px;}
.howto b{ color:var(--ink);}
.about-divider{ height:1px; margin:16px 0; background:linear-gradient(90deg,#0000,#0000001a,#0000);}
.about-credit{ font-size:13px; color:var(--ink); margin:0 0 2px;}
.about-credit strong{ color:var(--moon);}
.about-studio{ font-family:"Fraunces",serif; font-weight:700; font-size:16px; margin:0 0 9px;}
.about-meta{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin:0 0 5px;}
.about-copy{ font-size:11px; color:var(--soft); margin:0 0 18px;}
.about-close{ position:absolute; top:14px; right:16px; background:none; border:0; font-size:24px; line-height:1; color:var(--soft); cursor:pointer;}
.panel{ position:relative;}

@media (max-width:430px){
  :root{ --cs:50px; }
  .brand h1{ font-size:34px;}
  .wrap{ gap:14px;}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;} }

/* piece icons */
.pc .ic{ width:64%; height:64%; display:block; overflow:visible; }
.pc .ic.sun{ filter:drop-shadow(0 3px 4px rgba(226,73,47,.30)); }
.pc .ic.sq{ filter:drop-shadow(0 3px 4px rgba(12,138,125,.30)); }