/* The web daily: the game screen looks like the app's (app/lib/ui/game_screen.dart, widgets.dart). Sizes in px are the app's points. */
@font-face{font-family:"FredokaW";src:url("/assets/fonts/fredoka-latin.woff2") format("woff2");font-weight:300 700;font-display:swap}
:root{--ink-app:#3a1477;--title:#6b1f55;--cream:#fff7ec}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the game screen ---- */
.play{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1000px;overflow:hidden;background:linear-gradient(#f7d6e2,#e9b9cc);color:var(--ink-app)}
.play-bg{position:absolute;inset:0;background:url("/assets/img/daily/bg-candy.webp") center/cover no-repeat}
.play-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 60%,rgba(74,24,64,.18) 100%)}
.play-col{position:relative;height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom))}
.play-head{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 52px}
.play-head .tbox{width:100%;display:flex;justify-content:center;overflow:hidden}
.play-title{margin:0;font:700 32px/1.2 FredokaW,system-ui,sans-serif;letter-spacing:1.28px;color:var(--title);white-space:nowrap;
  text-shadow:0 0 10px rgba(255,255,255,.9),0 2px 3px rgba(255,255,255,.7)}
.timer{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 18px;box-shadow:0 4px 0 rgba(40,8,100,.35);
  font:600 22px/1.2 FredokaW,system-ui,sans-serif;color:var(--ink-app);font-variant-numeric:tabular-nums}
.timer svg{width:20px;height:20px}
.stage{position:relative;flex:1;min-height:0;touch-action:none}
.stage canvas{position:absolute;left:0;top:0;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.play-foot{display:flex;align-items:center;padding:0 8px;gap:12px}
.play-foot .sp{flex:1}

/* the app's round candy button (CandyButton) */
.cbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#7d5deb 0,#5434c8 57%,#3b1f9e 95%);box-shadow:0 4px 0 #1a0a52,inset 0 2px 0 rgba(255,255,255,.4);
  color:#fff;text-decoration:none;font:700 27px/1 FredokaW,system-ui,sans-serif;text-shadow:0 2px 0 rgba(26,10,82,.5);
  transition:transform .12s cubic-bezier(.3,1.8,.5,1),box-shadow .12s;-webkit-tap-highlight-color:transparent}
.cbtn:active{transform:translateY(4px) scale(.94);box-shadow:0 0 0 #1a0a52,inset 0 2px 0 rgba(255,255,255,.4)}
.cbtn img{width:32px;height:32px}
.cbtn svg{width:30px;height:30px;fill:#fff}
.cbtn.head{position:absolute;top:calc(14px + env(safe-area-inset-top));width:44px;height:44px;box-shadow:0 3px 0 #1a0a52,inset 0 2px 0 rgba(255,255,255,.4);z-index:3}
.cbtn.head img{width:28px;height:28px}
.cbtn.back{left:16px}.cbtn.help{right:16px}
.wd-lang{position:absolute;top:calc(70px + env(safe-area-inset-top));right:18px;z-index:6}
.play:has(#win-card:not([hidden])) .wd-lang{visibility:hidden}
/* the waitlist form in the win card: one compact row */
.card .wl{margin-top:12px}
.card .wl-title{font-size:15px;margin:0 0 7px;font-weight:600}
.card .wl .wl-row{flex-direction:row}
.card .wl input[type="email"]{width:0;flex:1;padding:9px 14px;font-size:15px}
.card .wl .btn{width:auto;padding:9px 14px;font-size:15px}
.card .wl-note{margin:6px 0 0;font:500 12.5px/1.3 FredokaW,system-ui,sans-serif;color:#7a6ca8}
.card .wl-msg{font:600 14px/1.3 FredokaW,system-ui,sans-serif}
.card .wl.done .wl-msg.ok{font-size:15px;padding:10px 12px}
@media(max-width:380px){.card .store-btn{min-width:122px;padding:7px 12px}.card .store-btn strong{font-size:17px}}
/* short phones: the taller win card starts below the jelly and scrolls instead of being cut at the top */
@media(max-height:740px){.veil{align-items:flex-start;overflow-y:auto;padding-top:66px}}
.cbtn.dim{opacity:.6}
.cbtn .n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 4px;border-radius:11px;background:#ffc93c;color:var(--ink-app);
  font:700 14px/22px FredokaW,system-ui,sans-serif;text-shadow:none;box-shadow:0 2px 0 rgba(0,0,0,.2)}

.toast{position:absolute;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translate(-50%,24px);opacity:0;pointer-events:none;z-index:4;
  background:#fff;border-radius:999px;padding:10px 18px;font:600 16px/1.2 FredokaW,system-ui,sans-serif;color:#2a1450;white-space:nowrap;
  box-shadow:0 4px 0 rgba(120,90,180,.45),0 6px 14px rgba(60,20,100,.18);transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- cards (the app's popups: cream card, glossy pills) ---- */
.veil{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(40,8,70,.28)}
.veil[hidden]{display:none}
.card{position:relative;width:100%;max-width:360px;background:var(--cream);border-radius:28px;padding:64px 22px 22px;text-align:center;color:var(--ink-app);
  box-shadow:0 10px 0 rgba(40,8,100,.35),0 18px 40px rgba(40,8,100,.25);font-family:FredokaW,system-ui,sans-serif}
.veil.in .card{animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{transform:scale(.8) translateY(20px);opacity:0}to{transform:none;opacity:1}}
.card .jelly{position:absolute;left:50%;top:-58px;width:104px;height:120px;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 6px 0 rgba(40,8,100,.18))}
.card h2{text-shadow:none;margin:0 0 6px;font:700 30px/1.15 FredokaW,system-ui,sans-serif;color:var(--ink-app)}
.card p{margin:6px 0;font:500 17px/1.35 FredokaW,system-ui,sans-serif}
.card .cnote{font-size:14px;color:#7a6ca8}
.card .sweet{font:700 46px/1.1 FredokaW,system-ui,sans-serif;background:linear-gradient(90deg,#ff4fa3,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 4px}
.wtime{font:700 22px/1.3 FredokaW,system-ui,sans-serif!important}
.streak{display:inline-flex;align-items:center;gap:6px;font-weight:600!important}
.streak img{width:22px;height:22px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  padding:11px 30px;font:700 20px/1.2 FredokaW,system-ui,sans-serif;color:#fff;background:linear-gradient(#ff7eb6,#ff4fa3);box-shadow:0 4px 0 #c0306f;
  transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.pill:active{transform:translateY(4px);box-shadow:0 0 0 #c0306f}
.pill.green{background:linear-gradient(#5fe38a,#2fc164);box-shadow:0 4px 0 #1f9d46}
.pill.green:active{box-shadow:0 0 0 #1f9d46}
.pill.small{font-size:16px;padding:7px 20px;background:linear-gradient(#b38cff,#7d54e8);box-shadow:0 3px 0 #4a2aa8}
.pill.small:active{box-shadow:0 0 0 #4a2aa8}
.pill.big{min-width:200px;font-size:22px;padding:13px 34px}
.card .x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(58,20,119,.08);color:var(--ink-app);font:700 20px/34px FredokaW,system-ui,sans-serif;cursor:pointer}
.stores{margin:16px -6px 0;padding:14px 10px 6px;border-top:2px dashed rgba(58,20,119,.14)}
.stores p{font-weight:600}
.store-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.store-btn{display:inline-flex;flex-direction:column;align-items:flex-start;min-width:140px;padding:8px 16px;border-radius:14px;background:#120632;color:#fff;text-decoration:none;
  line-height:1.15;box-shadow:0 4px 0 rgba(0,0,0,.3);font-family:FredokaW,system-ui,sans-serif}
.store-btn small{font-size:11px;font-weight:500;opacity:.85}
.store-btn strong{font-size:19px;font-weight:700}
.store-btn.soon small::after{content:""}

/* ---- below the game: the normal site look ---- */
.below{padding:34px 0 0}
.card [hidden],.veil[hidden]{display:none!important}
.play-head,.play-foot{position:relative;z-index:2}
/* this page loads only the small woff2 subset of Fredoka (site.css points "Fredoka" at the full 160 KB ttf) */
body{font-family:"FredokaW",system-ui,-apple-system,"Segoe UI",sans-serif}

/* ---- earlier puzzles ---- */
.archive{max-width:760px;margin:0 auto 34px;padding:0 4px}
.archive h2{margin:0 0 6px}
.archive h3{margin:20px 0 8px;font-size:1.05rem;color:#ffe9f5}
.arc-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.arc-day{position:relative;display:flex;align-items:center;justify-content:center;height:46px;border-radius:14px;background:#fff;color:var(--ink-app);text-decoration:none;font:700 17px/1 FredokaW,system-ui,sans-serif;
  box-shadow:0 3px 0 rgba(58,20,119,.18);transition:transform .12s cubic-bezier(.3,1.8,.5,1)}
.arc-day:hover{transform:translateY(-2px)}
.arc-day.done{background:linear-gradient(#c9f6d8,#9be9b6);box-shadow:0 3px 0 #4cb872}
.arc-day.today{background:linear-gradient(#ff7eb6,#ff4fa3);color:#fff;box-shadow:0 3px 0 #c0306f}
.arc-day.cur{outline:3px solid #7b2ff7;outline-offset:2px}
.arc-day i{position:absolute;right:4px;bottom:2px;font-style:normal;font-size:11px;color:#1f9d46}
.card .arclink,.card .jrlink{color:#6b3fd0;font-weight:600}

/* ?embed=1: the game alone inside a frame on a guide page */
.embed .cbtn.back,.embed .cbtn.help,.embed .wd-lang,.embed .below,.embed .site-footer,.embed .arcp,.embed .stores{display:none!important}
.embed .play{height:100vh;height:100svh;max-height:none;min-height:0}
#another{display:none}
.embed #another{display:inline-flex}

/* ---- the journey taster: level picker, stars ---- */
.card.picker{max-width:380px}
.lv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.lv{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:14px;background:#fff;color:var(--ink-app);text-decoration:none;
  box-shadow:0 3px 0 rgba(58,20,119,.2);font-family:FredokaW,system-ui,sans-serif;line-height:1.05}
.lv b{font-size:19px;font-weight:700}
.lv span{font-size:10px;letter-spacing:-1px;color:#f5a623;min-height:11px}
.lv.done{background:linear-gradient(#fff6d6,#ffe9a0);box-shadow:0 3px 0 #e0b84a}
.lv.next{background:linear-gradient(#ff7eb6,#ff4fa3);color:#fff;box-shadow:0 3px 0 #c0306f}
.lv.lock{background:#ece6f7;color:#9a8fc2;box-shadow:0 3px 0 rgba(58,20,119,.1)}
.lv.lock span{color:#9a8fc2;font-size:11px;letter-spacing:0}
.lv:not(.lock):hover{transform:translateY(-2px)}
.card .stars{font-size:34px;letter-spacing:3px;color:#f5a623;margin:2px 0 4px;text-shadow:0 2px 0 rgba(150,90,0,.25)}