/* Biscuit and Marshmallow page styles. Shared tokens, top bar, menu and footer are in site.css. */
:root{
  --tile:#FFFFFF; --tile-line:#B9C5BD; --tile-ink:#27352F;
  --good:#6E9E6A; --good-line:#5A8A56; --near:#F3D9A4; --near-line:#D39A2F; --near-ink:#5A3F0B;
  --well:#E6ECE5; --bar:#3A68AE; --bar-today:#C07E14; --track:#E8EDE9; --star:#E0A526; --star-off:#D5DDD6;
  --biscuit:#D7772C; --mallow:#8C7A66; --ground-a:#C9E0AE; --ground-b:#B5D493; --lilac:#EEE7F7; --lilac-line:#B7A3D8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tile:#2B3633; --tile-line:#4A5853; --tile-ink:#E7ECE6;
    --good:#5E8F5A; --good-line:#86B882; --near:#6B5222; --near-line:#C9982F; --near-ink:#FBE7BD;
    --well:#1A2220; --bar:#6A92D8; --bar-today:#B37A1E; --track:#2A3431; --star:#E8B85A; --star-off:#3A4642;
    --biscuit:#F0A060; --mallow:#D8CCBC; --ground-a:#34482F; --ground-b:#3F5A38; --lilac:#3B3550; --lilac-line:#8676B3;
  }
}
:root[data-theme="dark"]{
  --tile:#2B3633; --tile-line:#4A5853; --tile-ink:#E7ECE6;
  --good:#5E8F5A; --good-line:#86B882; --near:#6B5222; --near-line:#C9982F; --near-ink:#FBE7BD;
  --well:#1A2220; --bar:#6A92D8; --bar-today:#B37A1E; --track:#2A3431; --star:#E8B85A; --star-off:#3A4642;
  --biscuit:#F0A060; --mallow:#D8CCBC; --ground-a:#34482F; --ground-b:#3F5A38; --lilac:#3B3550; --lilac-line:#8676B3;
}
.wrap>main{max-width:640px;width:100%;justify-self:center}
.wrap>.tag{max-width:640px;width:100%;justify-self:center;text-align:right}
@media (max-width:560px){.wrap>.tag{margin-bottom:0}}

/* minmax(0,1fr): the story fold-out scrolls sideways, so it mustn't widen the card past the screen */
.sheet{position:relative;background:var(--sheet);border-radius:6px;box-shadow:0 1px 0 var(--rule),0 18px 40px -22px var(--shadow);padding:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.wrap>main{min-width:0}
@media (max-width:560px){.sheet{padding:18px 14px;gap:16px}}
/* Biscuit and Marshmallow peek over the top of the card (drawn behind it) */
.title-peek{position:absolute;z-index:-1;top:-31px;left:34px;width:112px}
.title-peek svg{display:block;width:100%;height:auto;overflow:visible}
.titlebar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.titlebar h2{font:400 clamp(24px,3.4vw,30px)/1.15 "Young Serif",Georgia,serif;margin:0}
.titlebar .bk{color:var(--biscuit)}
.titlebar .mm{color:var(--mallow)}
.titlebar small{color:var(--ink-soft);font-size:14px}
details.how{font-size:15px;color:var(--ink-soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0}
details.how summary{cursor:pointer;color:var(--ink);font-weight:700;list-style:none}
details.how summary::-webkit-details-marker{display:none}
details.how summary::before{content:"+ ";color:var(--ochre)}
details.how[open] summary::before{content:"– "}
details.how ol{margin:8px 0 4px;padding-left:20px}
details.how b[class^="k-"]{padding:0 6px;border-radius:4px;border:1.5px solid}
/* How-to pictures: mini tiles in the game's colors */
details.how li{margin:3px 0 12px}
.howpic{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:8px 0 2px}
.mt{width:26px;height:26px;box-sizing:border-box;display:grid;place-items:center;border-radius:5px;border:1.5px solid var(--tile-line);border-bottom-width:2.5px;background:var(--tile);color:var(--tile-ink);font:400 15px/1 "Young Serif",Georgia,serif;font-style:normal}
.mt.g{background:var(--good);border-color:var(--good-line);color:#fff}
.mt.a{background:var(--lilac);border-color:var(--lilac-line)}
.mt.a svg{width:96%;height:96%;overflow:visible}
.mwords{display:grid;grid-template-columns:repeat(7,26px);gap:4px}
.mwords .br{grid-row:2;margin:1px 2px 0;padding-top:2px;border:1.5px solid var(--ok);border-top:0;border-radius:0 0 6px 6px;text-align:center;font:700 11px/1.2 Karla,sans-serif;letter-spacing:.08em;color:var(--ok)}
.mcap{font-size:13px;line-height:1.3;color:var(--ink-soft)}
.mgrid{display:grid;grid-template-columns:repeat(3,26px);gap:4px;padding:6px;border-radius:8px;background:var(--well)}
.mgrid.five{grid-template-columns:repeat(5,26px)}
.mt.h{visibility:hidden}
.mt.y{background:var(--near);border-color:var(--near-line);color:var(--near-ink)}
/* How-to-play pop-up pictures (the layout is in site.css) */
.hz-arc{position:absolute;left:0;top:-15px;width:100%;height:16px;color:var(--cobalt);overflow:visible}
.hz-grid{display:grid;grid-template-columns:repeat(3,26px);gap:4px}
/* The swap picture plays the swap: T and C trade places (two tiles and their gaps apart) and turn green.
   With reduced motion it stays a still "before → after" pair. */
@media (prefers-reduced-motion:no-preference){
  .hz-swap .hz-arrow,.hz-swap .hz-after{display:none}
  .hz-swap .hz-row{transform:scale(1.15)}
  dialog[open] .hz-swap .hz-s1{animation:hzSwapR .55s .7s ease-in-out both}
  dialog[open] .hz-swap .hz-s2{animation:hzSwapL .55s .7s ease-in-out both}
  dialog[open] .hz-swap .hz-arc{animation:hzFade .3s 1.25s both}
}
@keyframes hzSwapR{50%{transform:translate(30px,-8px)}to{transform:translateX(60px);background:var(--good);border-color:var(--good-line);color:#fff}}
@keyframes hzSwapL{50%{transform:translate(-30px,8px)}to{transform:translateX(-60px);background:var(--good);border-color:var(--good-line);color:#fff}}
@keyframes hzFade{to{opacity:0}}
.hz-hug{position:relative}
.hz-hug::after{content:"♥";position:absolute;top:-14px;left:50%;transform:translateX(-50%);color:#E0607E;font:13px/1 Karla,sans-serif}
.hz-stars{display:grid;gap:5px;font:500 13px/1.2 Karla,sans-serif;color:var(--ink-soft)}
.hz-stars>span{display:flex;gap:6px;align-items:center}
.hz-stars b{width:50px;color:var(--star);letter-spacing:1px;font-size:15px}
.hz-stars i{font-style:normal;color:var(--star-off)}
.mt.a.pk{box-shadow:0 0 0 2px var(--cobalt)}
.mboard{position:relative;flex:none;margin-left:14px}
.mswap{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--cobalt);pointer-events:none}
.howpic .mcap{flex:1 1 180px;max-width:32ch}
.mcap b{color:var(--ink)}
/* The "Stuck?" tips at the end of How to play */
.stuck{margin:4px 0 6px;padding:10px 14px;border-radius:10px;background:var(--well);border-left:4px solid var(--ochre)}
.stuck b{color:var(--ink)}
.stuck ul{margin:4px 0 0;padding-left:18px}
details.how .stuck li{margin:3px 0}
.mstar{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--well);font-size:13px;color:var(--ink-soft)}
.mstar .s{color:var(--star);letter-spacing:1px}
.mstar .off{color:var(--star-off)}
.k-g{background:var(--good);border-color:var(--good-line);color:#fff}
.k-y{background:var(--near);border-color:var(--near-line);color:var(--near-ink)}
.k-w{background:var(--tile);border-color:var(--tile-line);color:var(--tile-ink)}

/* Swaps and stars */
.status{display:flex;align-items:center;justify-content:space-between;gap:12px}
.moves{margin:0;display:flex;align-items:baseline;gap:8px}
.moves .lbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.moves b{font:400 28px/1 "Young Serif",Georgia,serif;font-variant-numeric:tabular-nums}
.moves .par{font-size:14px;color:var(--ink-soft)}
.stars{margin:0;display:flex;gap:4px}
.stars svg,.result-stars svg{width:26px;height:26px;display:block}
.star-on{fill:var(--star);stroke:color-mix(in srgb,var(--star) 70%,#000);transition:fill .3s}
.star-off{fill:var(--star-off);stroke:var(--star-off)}
.stars .lost{animation:starDrop .5s ease}
@keyframes starDrop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-12deg)}100%{transform:none}}

/* Board: its shape changes by weekday (5 to 9 columns). Tiles shrink to fit: --main is the card's width,
   --chrome the card's and board's side padding. */
.board{--cols:5;--gap:clamp(5px,1.4vw,8px);--main:min(100vw - 32px,640px);--chrome:84px;--s:min(66px,calc((var(--main) - var(--chrome) - (var(--cols) - 1) * var(--gap)) / var(--cols)));display:grid;grid-template-columns:repeat(var(--cols),var(--s));grid-auto-rows:var(--s);gap:var(--gap);justify-content:center;padding:14px;margin:0 auto;border-radius:14px;background:var(--well);touch-action:none;user-select:none;-webkit-user-select:none}
@media (max-width:560px){.board{--chrome:44px;padding:8px}.board.wide{--gap:4px;--chrome:24px;margin-inline:-10px}}
.hole{border-radius:8px}
.tile{position:relative;width:100%;height:100%;padding:0;margin:0;display:grid;place-items:center;border-radius:9px;border:2px solid var(--tile-line);border-bottom-width:4px;background:var(--tile);color:var(--tile-ink);font:400 calc(var(--s)*.5)/1 "Young Serif",Georgia,serif;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background-color .25s,border-color .25s,color .25s,box-shadow .15s}
.tile.g{background:var(--good);border-color:var(--good-line);color:#fff;cursor:default}
.tile.y{background:var(--near);border-color:var(--near-line);color:var(--near-ink)}
/* Animals never change color */
/* Biscuit, Marshmallow and the yarn sit on lilac tiles: clearly tiles you can move, in a color no letter ever takes */
.tile.animal{background:var(--lilac);border-color:var(--lilac-line)}
.tile.animal svg{width:94%;height:94%;overflow:visible;pointer-events:none}
.tile:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;z-index:2}
.tile.picked{box-shadow:0 0 0 3px var(--cobalt);transform:translateY(-3px)}
.tile.lifted{opacity:.3}
.tile.target{box-shadow:0 0 0 3px var(--ochre)}
.tile.nope{animation:nope .35s ease}
@keyframes nope{25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.ghost{position:fixed;z-index:30;pointer-events:none;margin:0;transform:scale(1.08) rotate(-3deg);box-shadow:0 14px 28px -8px rgba(0,0,0,.35);opacity:.95}
.tile.dance{animation:dance .9s ease both}
@keyframes dance{0%{transform:none}30%{transform:translateY(-14px) rotate(-5deg)}55%{transform:translateY(2px)}75%{transform:translateY(-4px) rotate(3deg)}100%{transform:none}}
.tile.hug{animation:hug 1.2s ease both}
@keyframes hug{0%{transform:none}25%{transform:translateY(-10px) scale(1.15)}50%{transform:scale(1.2)}75%{transform:translateY(-4px) scale(1.1)}100%{transform:none}}
.heart{position:absolute;z-index:3;width:30px;height:30px;pointer-events:none;animation:floatUp 1.8s ease-out forwards}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.2)}}
.msg{margin:-6px 0 0;min-height:24px;text-align:center;font-size:15px;color:var(--ink-soft)}
.msg.nudge{justify-self:center;max-width:46ch;padding:10px 14px;border-radius:10px;background:var(--lilac);border:1.5px solid var(--lilac-line);color:var(--ink);font-weight:700}
.board.last-swap .tile.animal{box-shadow:0 0 0 3px var(--lilac-line);animation:bob 1.2s ease-in-out 3}
.board.last-swap .tile.animal.picked{box-shadow:0 0 0 3px var(--cobalt);animation:none}

/* Result */
.result{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start;border-top:1px solid var(--rule);padding-top:22px}
@media (max-width:560px){.result{grid-template-columns:1fr;justify-items:center;text-align:center}}
.result .pic{width:190px;background:var(--plate);border-radius:4px;padding:8px;box-shadow:0 2px 10px var(--shadow);transform:rotate(-1.2deg)}
.result .pic svg{display:block;width:100%;height:auto}
.result.won .pic svg{animation:popin .8s cubic-bezier(.3,1.6,.5,1) both}
.result .hearts{animation:bob 2.4s ease-in-out infinite}
@keyframes popin{0%{transform:scale(.4) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.result h3{font:400 22px/1.25 "Young Serif",Georgia,serif;margin:0 0 6px}
.result .verdict{font:700 26px/1.1 Caveat,cursive;color:var(--ochre);margin:0 0 6px}
.result .verdict:focus{outline:none}
.result-stars{display:flex;gap:4px;margin:0 0 8px}
.result-stars svg{width:30px;height:30px}
@media (max-width:560px){.result-stars{justify-content:center}}
.result p{margin:0 0 10px;max-width:60ch}
.stats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink-soft);margin:6px 0 14px}
.stats b{color:var(--ink);font-size:18px;font-family:"Young Serif",Georgia,serif;font-weight:400;margin-right:1px}
.dist{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px;max-width:380px}
.dist-title{font:700 12px/1 Karla,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 8px}
.dist li{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft)}
.dist .track{background:var(--track);border-radius:4px;height:22px;position:relative}
.dist .bar{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0;background:var(--bar);transition:width .6s cubic-bezier(.3,1,.5,1)}
.dist li.today .bar{background:var(--bar-today)}
.dist li.today .lbl{color:var(--ink);font-weight:700}
.dist .val{position:absolute;top:50%;transform:translateY(-50%);font:700 13px/1 Karla,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dist .dtag{font-weight:400;color:var(--ink-soft)}
@media (max-width:560px){.stats{justify-content:center}.dist,.dist-title{margin-inline:auto}.dist{text-align:left}}
.actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:560px){.actions{justify-content:center}}
.btn{font:700 15px/1 Karla,sans-serif;padding:11px 18px;border-radius:999px;border:1.5px solid var(--cobalt);color:var(--cobalt);background:transparent;text-decoration:none;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.next{font-size:14px;color:var(--ink-soft);margin-top:12px}
.both-done{margin:12px 0 0;font-weight:700;color:var(--ok)}

/* Ground strip along the bottom of the card */
.ground{margin:0 -28px -28px;border-radius:0 0 6px 6px;overflow:hidden;line-height:0}
.ground svg{display:block;width:100%;height:auto}
.ground .g1{fill:var(--ground-a)}
.ground .g2{fill:var(--ground-b)}
@media (max-width:560px){.ground{margin:0 -14px -18px}}

/* Account: the "Sign in to save stats" link and note. The sign-in dialog itself is in site.css. */
.modes{display:flex;margin:-8px 0 -6px}
.modes:not(:has(.acct-btn:not([hidden]))){display:none}
.acct-btn{display:inline-flex;align-items:center;gap:7px;font:700 14px/1.2 Karla,sans-serif;color:var(--cobalt);background:none;border:0;padding:4px 0;cursor:pointer}
.acct-btn svg{width:18px;height:18px;flex:none}
.acct-btn:hover{text-decoration:underline}
.acct-btn:focus-visible,.linkish:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
.acct-note{font-size:14px;color:var(--ink-soft);margin:-4px 0 14px !important}
.linkish{font:inherit;color:var(--cobalt);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* The story: storybook plates. They keep their own painted skies and cream frames in dark mode too.
   Wide screens: two columns beside the game, scrolling with the page. Narrower: a fold-out under the title. */
.sb-plate{margin:0;background:#FBF7EE;padding:9px 9px 5px;border-radius:4px;box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.sb-plate svg{display:block;width:100%;height:auto;border-radius:2px}
.sb-plate figcaption{font:700 19px/1.15 Caveat,cursive;color:#4A5A52;text-align:center;margin:6px 2px 3px;text-wrap:balance}
.sb-plate .n{display:inline-block;width:22px;height:22px;margin-right:5px;border-radius:50%;background:#B35A1F;color:#fff;font:700 13px/22px Karla,sans-serif;text-align:center;vertical-align:2px}
.sb-col{display:none;position:absolute;top:112px;z-index:0;width:min(236px,calc((100vw - 640px) / 2 - 64px));gap:24px}
.sb-col.l{left:max(16px,calc((100vw - 640px) / 2 - 290px))}
.sb-col.r{right:max(16px,calc((100vw - 640px) / 2 - 290px))}
.sb-col.l .sb-plate:nth-child(1){transform:rotate(-2deg)}
.sb-col.l .sb-plate:nth-child(2){transform:rotate(1.5deg)}
.sb-col.r .sb-plate:nth-child(1){transform:rotate(1.8deg)}
.sb-col.r .sb-plate:nth-child(2){transform:rotate(-1.4deg)}
.sb-col.l .sb-plate:nth-child(3){transform:rotate(-1.2deg)}
.sb-col.r .sb-plate:nth-child(3){transform:rotate(1.6deg)}
.sb-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 14px;margin:0 -4px}
.sb-strip .sb-plate{flex:0 0 min(64%,240px);scroll-snap-align:center}
.sb-strip figcaption{font-size:17px}
/* Sits right on top of "How to play", sharing its top border (the card's gap is 20px, 16px on phones) */
.story-book{border-bottom:0;margin-bottom:-20px}
@media (max-width:560px){.story-book{margin-bottom:-16px}}
@media (min-width:1180px){.sb-col{display:grid}.story-book{display:none}}
/* Wide screens: keep the card at least as tall as the story columns beside it, so on short boards the
   footer still starts below the panels. The columns grow with their width (the same width as above). */
@media (min-width:1180px){.wrap>main{min-height:calc(1.84 * min(236px,(100vw - 640px) / 2 - 64px) + 345px)}}
@media (prefers-reduced-motion:reduce){.sb-col .sb-plate{transform:none!important}}

canvas#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}
@media (prefers-reduced-motion:reduce){.tile.dance,.tile.hug,.tile.nope,.board.last-swap .tile.animal,.stars .lost,.heart,.result.won .pic svg,.result .hearts{animation:none}.heart{display:none}.result .pic,.ghost{transform:none}}