/* Shared approved night sky for Edgekin and Cozy. */
:root{
  --sky-top: #0f1633;
  --sky-mid: #1f2a55;
  --sky-low: #3a3f6e;
  /* The sky behind the page (html::before, html::after, body::before): the game's stars and a fog band along the bottom
     of the viewport. Fixed, under every block and the game panel, no pointer events, CSS only – no script, no frame
     loop; the animations are opacity and transform (the compositor's), off with reduced motion and in a hidden tab. */
  --star-r: .85px;                                 /* a star's radius; each star is .6–1.3 of it, a big one 1.65 */
  --stars-tile: 230px;                             /* stars repeat on three tiles: this, ×1.37, ×1.83 (6 stars each a layer) */
  --stars-fade-to: min(900px, 80%);                /* stars fade out down to here, as in the game (STARS.fadeToH, coverH) */
  --stars-twinkle: 5s;                             /* one twinkle of the second layer, as the game's MOTION.t.twinkle */
  --stars-dim: .15;                                /* its opacity at the faint end (MOTION.kf.twinkle.dim) */
  --stars-bright: .9;                              /* and at the bright end (MOTION.kf.twinkle.bright) */
  --fog-h: 170px;                                  /* height of the fog band at the bottom of the viewport */
  --fog-opacity: .45;
  --fog-brightness: .3;                            /* darker than the sky at the bottom: text over the fog loses no contrast */
  --fog-drift: 160s;                               /* the fog drifts one cloud tile in this time */
}
body,.sky-surface{background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-low) 100%) fixed;}
/* ── the sky behind the page (tokens above). Two star layers like the game's (client/styles/island.css .stars): one
   still, one twinkling; the gradients were drawn once from the game's STARS look (seeded, positions in % of the tile)
   and cycle through the three tile sizes of background-size. ── */
html::before, html::after, .sky-surface::before, .sky-surface::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-size: var(--stars-tile) var(--stars-tile), calc(var(--stars-tile) * 1.37) calc(var(--stars-tile) * 1.37),
    calc(var(--stars-tile) * 1.83) calc(var(--stars-tile) * 1.83);
  -webkit-mask-image: linear-gradient(#000, transparent var(--stars-fade-to));
  mask-image: linear-gradient(#000, transparent var(--stars-fade-to));
}
html::before, .sky-surface::before {
  background-image:
    radial-gradient(circle at 45.6% 55.5%, rgb(228 234 255 / 0.65) calc(var(--star-r) * 0.96), transparent calc(var(--star-r) * 0.96 + 1px)),
    radial-gradient(circle at 58.0% 21.0%, rgb(250 229 184 / 0.76) calc(var(--star-r) * 1.16), transparent calc(var(--star-r) * 1.16 + 1px)),
    radial-gradient(circle at 12.7% 31.9%, rgb(250 229 184 / 0.88) calc(var(--star-r) * 1.09), transparent calc(var(--star-r) * 1.09 + 1px)),
    radial-gradient(circle at 7.9% 94.4%, rgb(228 234 255 / 0.78) calc(var(--star-r) * 1.03), transparent calc(var(--star-r) * 1.03 + 1px)),
    radial-gradient(circle at 18.5% 5.4%, rgb(250 229 184 / 0.39) calc(var(--star-r) * 0.73), transparent calc(var(--star-r) * 0.73 + 1px)),
    radial-gradient(circle at 26.3% 6.8%, rgb(250 229 184 / 0.64) calc(var(--star-r) * 1.19), transparent calc(var(--star-r) * 1.19 + 1px)),
    radial-gradient(circle at 51.8% 62.9%, rgb(250 229 184 / 0.78) calc(var(--star-r) * 0.92), transparent calc(var(--star-r) * 0.92 + 1px)),
    radial-gradient(circle at 29.6% 95.8%, rgb(228 234 255 / 0.9) calc(var(--star-r) * 1.1), transparent calc(var(--star-r) * 1.1 + 1px)),
    radial-gradient(circle at 33.0% 25.1%, rgb(250 229 184 / 0.4) calc(var(--star-r) * 1.14), transparent calc(var(--star-r) * 1.14 + 1px)),
    radial-gradient(circle at 40.8% 81.9%, rgb(250 229 184 / 0.97) calc(var(--star-r) * 1.19), transparent calc(var(--star-r) * 1.19 + 1px)),
    radial-gradient(circle at 4.1% 23.3%, rgb(228 234 255 / 0.66) calc(var(--star-r) * 1.29), transparent calc(var(--star-r) * 1.29 + 1px)),
    radial-gradient(circle at 40.6% 10.7%, rgb(255 244 220 / 0.86) calc(var(--star-r) * 0.79), transparent calc(var(--star-r) * 0.79 + 1px)),
    radial-gradient(circle at 12.0% 34.6%, rgb(228 234 255 / 0.84) calc(var(--star-r) * 0.68), transparent calc(var(--star-r) * 0.68 + 1px)),
    radial-gradient(circle at 26.7% 13.3%, rgb(250 229 184 / 0.87) calc(var(--star-r) * 1.65), rgb(250 229 184 / .35) calc(var(--star-r) * 1.65 + 1px), transparent calc(var(--star-r) * 6.6)),
    radial-gradient(circle at 20.3% 55.5%, rgb(250 229 184 / 0.47) calc(var(--star-r) * 1.11), transparent calc(var(--star-r) * 1.11 + 1px)),
    radial-gradient(circle at 16.0% 63.2%, rgb(250 229 184 / 0.62) calc(var(--star-r) * 0.75), transparent calc(var(--star-r) * 0.75 + 1px)),
    radial-gradient(circle at 28.8% 93.3%, rgb(255 244 220 / 0.55) calc(var(--star-r) * 1.22), transparent calc(var(--star-r) * 1.22 + 1px)),
    radial-gradient(circle at 23.4% 40.3%, rgb(228 234 255 / 0.77) calc(var(--star-r) * 0.67), transparent calc(var(--star-r) * 0.67 + 1px));
}
html::after, .sky-surface::after {
  opacity: var(--stars-bright);
  animation: stars-twinkle var(--stars-twinkle) ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle at 95.0% 23.6%, rgb(250 229 184 / 0.85) calc(var(--star-r) * 0.83), transparent calc(var(--star-r) * 0.83 + 1px)),
    radial-gradient(circle at 31.3% 10.8%, rgb(250 229 184 / 0.73) calc(var(--star-r) * 0.77), transparent calc(var(--star-r) * 0.77 + 1px)),
    radial-gradient(circle at 59.3% 38.2%, rgb(250 229 184 / 0.97) calc(var(--star-r) * 0.94), transparent calc(var(--star-r) * 0.94 + 1px)),
    radial-gradient(circle at 56.9% 83.7%, rgb(250 229 184 / 0.45) calc(var(--star-r) * 1.24), transparent calc(var(--star-r) * 1.24 + 1px)),
    radial-gradient(circle at 79.2% 27.0%, rgb(250 229 184 / 0.83) calc(var(--star-r) * 1.26), transparent calc(var(--star-r) * 1.26 + 1px)),
    radial-gradient(circle at 22.1% 91.4%, rgb(228 234 255 / 0.74) calc(var(--star-r) * 0.9), transparent calc(var(--star-r) * 0.9 + 1px)),
    radial-gradient(circle at 13.6% 7.6%, rgb(228 234 255 / 0.5) calc(var(--star-r) * 1.09), transparent calc(var(--star-r) * 1.09 + 1px)),
    radial-gradient(circle at 27.6% 79.8%, rgb(255 244 220 / 0.54) calc(var(--star-r) * 0.72), transparent calc(var(--star-r) * 0.72 + 1px)),
    radial-gradient(circle at 70.3% 10.3%, rgb(250 229 184 / 0.71) calc(var(--star-r) * 1.2), transparent calc(var(--star-r) * 1.2 + 1px)),
    radial-gradient(circle at 60.5% 29.8%, rgb(228 234 255 / 0.48) calc(var(--star-r) * 0.61), transparent calc(var(--star-r) * 0.61 + 1px)),
    radial-gradient(circle at 28.8% 45.0%, rgb(250 229 184 / 0.46) calc(var(--star-r) * 0.86), transparent calc(var(--star-r) * 0.86 + 1px)),
    radial-gradient(circle at 56.6% 16.1%, rgb(250 229 184 / 0.93) calc(var(--star-r) * 1.29), transparent calc(var(--star-r) * 1.29 + 1px)),
    radial-gradient(circle at 64.4% 67.6%, rgb(255 244 220 / 0.44) calc(var(--star-r) * 0.62), transparent calc(var(--star-r) * 0.62 + 1px)),
    radial-gradient(circle at 5.6% 87.7%, rgb(255 244 220 / 0.98) calc(var(--star-r) * 1.65), rgb(250 229 184 / .35) calc(var(--star-r) * 1.65 + 1px), transparent calc(var(--star-r) * 6.6)),
    radial-gradient(circle at 6.0% 62.5%, rgb(250 229 184 / 0.82) calc(var(--star-r) * 0.82), transparent calc(var(--star-r) * 0.82 + 1px)),
    radial-gradient(circle at 95.9% 10.9%, rgb(250 229 184 / 0.83) calc(var(--star-r) * 1.23), transparent calc(var(--star-r) * 1.23 + 1px)),
    radial-gradient(circle at 71.8% 68.7%, rgb(255 244 220 / 0.94) calc(var(--star-r) * 0.85), transparent calc(var(--star-r) * 0.85 + 1px)),
    radial-gradient(circle at 67.0% 86.9%, rgb(228 234 255 / 0.62) calc(var(--star-r) * 1.15), transparent calc(var(--star-r) * 1.15 + 1px));
}
@keyframes stars-twinkle { from { opacity: var(--stars-dim); } to { opacity: var(--stars-bright); } }

/* the fog band: the game's cloud tile, greyed like its fog of oblivion (island.css .fog) and dimmed below the sky's own
   brightness, so the footer over it keeps its contrast; soft at the top, one tile wider on the left so the drift loops
   without a seam; a fixed layer is clipped by the viewport and never makes a scrollbar */
body::before, .sky-clouds {
  --fog-tile: calc(var(--fog-h) * 941 / 455);      /* clouds.webp is 941 × 455 */
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--fog-tile)); right: 0; bottom: 0; height: var(--fog-h);
  background: url(/client/assets/sky/clouds.webp) 0 0 / var(--fog-tile) 100% repeat-x;
  filter: grayscale(.7) brightness(var(--fog-brightness)) hue-rotate(10deg);
  opacity: var(--fog-opacity);
  -webkit-mask-image: linear-gradient(transparent, #000 65%);
  mask-image: linear-gradient(transparent, #000 65%);
  animation: fog-drift var(--fog-drift) linear infinite;
}
@keyframes fog-drift { to { transform: translateX(var(--fog-tile)); } }

/* the page is a size container: with the game panel open it gets narrower, and its blocks reflow by its own width */

@media (prefers-reduced-motion:reduce){html::after,body::before,.sky-surface::after,.sky-clouds{animation:none}}
html:has(body.reduced-surroundings)::after,body.reduced-surroundings::before,.reduced-surroundings .sky-surface::after,.reduced-surroundings .sky-clouds{animation:none}
html:has(body.page-hidden)::after,body.page-hidden::before,.page-hidden .sky-surface::after,.page-hidden .sky-clouds{animation-play-state:paused}
@media print{html::before,html::after,body::before,.sky-surface::before,.sky-surface::after,.sky-clouds{display:none!important}}

/* Same page-edge kin on both sites; the figure comes from the client art. */
.kin-peek{position:fixed;right:0;width:var(--peek-size);aspect-ratio:1;border:0;padding:0;background:none;z-index:30;transform:translateX(110%) rotate(0deg);transform-origin:right center;transition:transform var(--peek-slide) var(--ease-hud);pointer-events:none;cursor:pointer;filter:drop-shadow(-4px 5px 10px #060b1e80)}
.kin-peek.peeking{transform:translateX(var(--peek-hidden)) rotate(var(--peek-tilt));pointer-events:auto}
.kin-peek .kinfig{pointer-events:none}
.kin-peek:focus-visible{outline:2px solid var(--cozy-accent,var(--gold-light));outline-offset:-20px;border-radius:50%}
.reduced-surroundings .kin-peek,body.page-hidden .kin-peek{visibility:hidden}
.kin-peek .kinfig{transform:scaleX(-1)}
.kin-peek .peek-lantern{inset:auto;left:47.75%;top:71%;width:37.5%;height:45%;object-fit:contain;transform:rotate(var(--peek-tilt));transform-origin:50% 0}
@media(prefers-reduced-motion:reduce){.kin-peek{display:none!important;transition:none}}

/* Cozy shares Edgekin’s type, board art and pictogram library. Static layout only;
   game motion comes from the shared MOTION group, carousel timing from demo config. */
:root{--cozy-bg:#101d36;--cozy-panel:#182c47;--cozy-text:#f5f1e7;--cozy-muted:#b8c7d5;--cozy-line:#39506b;--cozy-accent:#e5c380;--font-display:Philosopher,Georgia,serif;--font-ui:Nunito,system-ui,sans-serif;color-scheme:dark}
[hidden]{display:none!important}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;color:var(--cozy-text);font:500 16px/1.65 var(--font-ui);overflow-x:hidden}body[data-variant="mist"]{--cozy-bg:#e4eee9;--cozy-panel:#f3f5ed;--cozy-text:#203d43;--cozy-muted:#48666a;--cozy-line:#b1c6bf;--cozy-accent:#9c6726;color-scheme:light}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a{color:inherit;text-underline-offset:.22em}a:hover{color:var(--cozy-accent)}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cozy-accent);outline-offset:4px}button{color:inherit}h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15}h1{font-size:clamp(2rem,4vw,3.3rem);margin:12px 0 18px}h2{font-size:1.7rem}p{margin:0 0 1rem}.cozy-header,main,.cozy-footer{width:min(1180px,calc(100% - 48px));margin-inline:auto}.cozy-header{display:flex;align-items:center;gap:24px;padding-block:22px;border-bottom:1px solid var(--cozy-line)}.wordmark{display:inline-flex;align-items:center;gap:10px;font:700 24px var(--font-display);text-decoration:none}.cozy-header nav{display:flex;gap:24px;margin-left:auto}.cozy-header nav a{text-decoration:none;font-size:14px}.primary,.quiet,.icon-button,.book-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--cozy-line);background:transparent;border-radius:8px;padding:9px 16px;text-decoration:none;line-height:1.4}.primary{background:var(--cozy-accent);color:#182a38;border-color:transparent;font-weight:800}.quiet:hover,.icon-button:hover{background:var(--cozy-panel)}.icon-button{padding:8px}.ico{width:22px;height:22px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--cozy-accent)}.intro{max-width:850px;padding:42px 0 30px}.intro p{font-size:18px;color:var(--cozy-muted);max-width:74ch}.puzzle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.puzzle-card{min-width:0;border:1px solid var(--cozy-line);border-radius:14px;overflow:hidden;background:var(--cozy-panel)}.puzzle-heading{min-height:106px;display:flex;align-items:flex-start;gap:14px;padding:18px 22px 12px}.puzzle-heading h2{font-size:23px;margin:0 0 6px}.puzzle-heading h2 a{text-decoration:none}.puzzle-heading p{font-size:13px;line-height:1.5;color:var(--cozy-muted);margin:0;max-width:44ch}.puzzle-heading .icon-button{margin-left:auto;flex:none}.puzzle-stage{position:relative;min-height:360px;background:#101a30}.puzzle-root{height:400px;position:relative;overflow:hidden;color:#fbf6ec;--font-ui:Nunito,system-ui,sans-serif;--font-display:Philosopher,Georgia,serif}.puzzle-status{padding:20px;color:#c6d2df;font-size:14px}.puzzle-status[hidden]{display:none}.puzzle-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;font-size:12px}.puzzle-actions>span{margin-left:auto;color:var(--cozy-muted)}.puzzle-root .game-head{display:none}.puzzle-root .game-stage{height:100%;position:relative;display:flex;flex-direction:column;margin:auto}.puzzle-root .game-foot{font-size:12px;flex-wrap:wrap}.puzzle-root .game-foot p{margin:0}.puzzle-root .btn-ghost{background:transparent;border:1px solid #778093;border-radius:5px;padding:4px 9px;color:#f6f0e1}.puzzle-root .game-mid{min-height:0}.puzzle-root .game-floor{inset:0}.puzzle-root .notice{position:absolute;bottom:8px;z-index:12;max-width:95%;background:#312d2d}.large .puzzle-root{height:560px}.page-copy{max-width:780px;padding-block:30px}.page-copy h2{margin-top:30px}.page-copy p{color:var(--cozy-muted)}.world-links{border-top:1px solid var(--cozy-line);padding:24px 0 40px}.world-links a{display:inline-block;margin:0 24px 12px 0}.cozy-footer{display:flex;align-items:center;flex-wrap:wrap;gap:18px;padding:26px 0 36px;border-top:1px solid var(--cozy-line);font-size:13px}.cozy-footer>nav{display:flex;gap:16px;flex-wrap:wrap}.cozy-footer #langs{width:100%;font-size:12px}.cozy-footer [aria-disabled="true"]{opacity:.4;cursor:default}.cozy-carousel{padding:22px 26px;margin:18px 0;background:var(--cozy-panel);border-left:3px solid var(--cozy-accent)}.cozy-carousel p{max-width:65ch;margin:6px 0 12px}.carousel-controls{display:flex;align-items:center;gap:8px}.step{border:1px solid var(--cozy-line);background:transparent;color:inherit;border-radius:50%;width:28px;height:28px;padding:0}.step[aria-current="true"]{background:var(--cozy-accent);color:#182a38}.carousel-controls .quiet{font-size:12px;padding:5px 9px;margin-left:auto}.puzzle-dialog{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100dvh;margin:0;border:0;padding:24px 24px 20px;isolation:isolate;color:var(--cozy-text)}dialog::backdrop{background:#080f20b8}.expanded-layout{height:100%;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(180px,230px);gap:20px}.expanded-layout .cozy-carousel{margin:0}.expanded-layout [data-modal-board]{min-height:0}.expanded-layout .puzzle-card{height:100%;display:flex;flex-direction:column}.expanded-layout .puzzle-stage{flex:1;min-height:0}.expanded-layout .puzzle-root{height:100%}.edgekin-invitation{align-self:end;padding-bottom:20px}.edgekin-invitation h2{font-size:26px}.edgekin-invitation p{font-size:14px;color:var(--cozy-muted)}.preview-label{padding:6px 24px;background:#b6d7d6;color:#163f4c;text-align:center;font-size:12px}.island-view{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:26px;background:var(--cozy-panel);border-radius:14px}.island-view figure{margin:0;text-align:center}.island-view img{max-width:100%;max-height:360px;object-fit:contain}.choice-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.album,.portrait-gallery,.focus-tools,.first-move,.mechanic-notes{padding:25px 0}.kin-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.kin-entry{border:1px solid var(--cozy-line);border-radius:10px;background:var(--cozy-panel);padding:10px 4px 6px;color:inherit;min-width:0}.kin-entry img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}.kin-entry[aria-pressed="true"]{outline:2px solid var(--cozy-accent)}.kin-detail{margin-top:16px;color:var(--cozy-muted)}.portraits{grid-template-columns:repeat(6,minmax(0,1fr))}.chronicle-book{display:grid;grid-template-columns:300px 1fr;border-radius:14px;overflow:hidden;background:var(--cozy-panel)}.chronicle-book aside{padding:24px}.book-tab{display:block;text-align:left;width:100%;margin-bottom:10px}.book-tab[aria-current="true"]{border-color:var(--cozy-accent)}.chronicle-book aside p{font-size:12px;color:var(--cozy-muted)}.book-paper{padding:36px;color:var(--ink);box-shadow:none;border-radius:0;min-height:320px}.book-paper p{max-width:55ch}.book-paper>p:last-child{font-size:13px;border-top:1px solid #bdac8c;padding-top:18px}.browser-choice,.mechanic-notes>div{display:grid;grid-template-columns:1fr 1fr;gap:24px}.browser-choice article{padding:28px;background:var(--cozy-panel);border-radius:12px}.focus-tools label{display:block;margin-bottom:10px}.focus-tools input{accent-color:var(--cozy-accent)}.hide-story-cards .cozy-carousel{display:none}.reduced-surroundings .cozy-carousel{animation:none;transition:none}.pricing-page{width:min(1080px,calc(100% - 40px))!important;margin:auto!important}.pricing-page .pricing-plans{display:grid;grid-template-columns:1fr 1.4fr;gap:28px}.pricing-page .free-plan{order:-1}.pricing-page .pricing-plan{background:var(--cozy-panel);border:1px solid var(--cozy-line);border-radius:12px;box-shadow:none}.pricing-page .comparisons{display:block}.pricing-page .comparison{display:grid;grid-template-columns:1fr 2fr;gap:20px;border:0;border-bottom:1px solid var(--cozy-line);border-radius:0;background:transparent}.pricing-page .pricing-moon{display:none}.pricing-page .benefit-why{grid-column:2}.pricing-page .pricing-hero{padding-top:28px}.pricing-page .plan-price{font-size:32px}main.legal{max-width:840px;padding-block:35px}.legal-page{width:min(1000px,calc(100% - 40px));margin:auto}.legal-page footer{padding-block:28px}.legal-page header{padding-top:24px}
@media(max-width:1000px){.expanded-layout{grid-template-columns:220px 1fr}.edgekin-invitation{grid-column:1/-1;display:flex;align-items:center;gap:15px;padding:0}.edgekin-invitation h2{font-size:19px;margin:0}.edgekin-invitation p{margin:0}.expanded-layout{grid-template-rows:minmax(0,1fr) auto}.kin-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.puzzle-actions>span{width:100%;margin:0}}
@media(max-width:700px){.cozy-header,main,.cozy-footer{width:calc(100% - 28px)}.cozy-header{gap:12px;padding-block:14px;flex-wrap:wrap}.cozy-header nav{order:3;width:100%;justify-content:space-between;margin:0;gap:12px}.cozy-header>.primary{margin-left:auto;font-size:13px;padding:8px 12px}.intro{padding-top:28px}.intro p{font-size:16px}.puzzle-grid{grid-template-columns:1fr;gap:18px}.puzzle-root{height:360px}.large .puzzle-root{height:500px}.puzzle-heading{padding:16px}.puzzle-heading h2{font-size:22px}.expanded-layout{display:flex;flex-direction:column}.expanded-layout [data-modal-cards]{flex:none}.expanded-layout [data-modal-board]{flex:1;min-height:280px}.expanded-layout .puzzle-root{height:100%}.expanded-layout .cozy-carousel{padding:12px 14px}.expanded-layout .cozy-carousel p{font-size:13px;line-height:1.4;margin:3px 0 8px}.expanded-layout .puzzle-heading{padding:8px 14px}.expanded-layout .puzzle-heading p,.expanded-layout .puzzle-actions>span{display:none}.expanded-layout .puzzle-heading h2{font-size:19px}.puzzle-dialog{padding:10px}.expanded-layout .edgekin-invitation{display:flex;gap:8px;flex:none}.edgekin-invitation h2,.edgekin-invitation p{display:none}.edgekin-invitation .primary{width:100%}.island-view{grid-template-columns:1fr;padding:20px}.island-view figure{order:-1}.island-view img{height:220px}.chronicle-book{grid-template-columns:1fr}.chronicle-book aside{padding:20px}.chronicle-book .book-tab{display:inline-block;width:auto}.book-paper{padding:22px}.browser-choice,.mechanic-notes>div{grid-template-columns:1fr}.kin-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.portraits{grid-template-columns:repeat(3,minmax(0,1fr))}.cozy-footer{gap:14px}.cozy-footer #langs{gap:10px}.pricing-page .pricing-plans{grid-template-columns:1fr}.pricing-page .comparison{grid-template-columns:1fr}.pricing-page .benefit-why{grid-column:1}.detail-page .cozy-carousel{margin-inline:0;padding:18px}.puzzle-actions{padding:9px 14px}.preview-label{font-size:10px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.puzzle-card.outside-view *, .puzzle-card.outside-view *::before, .puzzle-card.outside-view *::after{animation-play-state:paused!important}

.modal-preview{position:absolute;left:24px;top:20px;color:var(--cozy-muted);font-size:12px}.pricing-page .pricing-plan,.pricing-page .plan-price{color:var(--cozy-text)}.pricing-page .plan-lead,.pricing-page .plan-price small,.pricing-page .free-features,.pricing-page .vip-perks p,.pricing-page .purchase-help{color:var(--cozy-muted)}.pricing-page .vip-perks .ico{color:var(--cozy-accent)}.pricing-page .pricing-status{color:#182a38}.pricing-page .pricing-test-warning{color:var(--cozy-text);background:var(--cozy-panel);border-color:var(--cozy-accent)}
@media(max-width:700px){.expanded-layout .puzzle-heading{min-height:0}}

/* The album uses the game's silhouettes, geometry and look decoration. */
.kin-family{margin:22px 0}.kin-family summary{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--cozy-line);cursor:pointer;list-style:none}.kin-family summary::-webkit-details-marker{display:none}.kin-family summary .ico{width:18px;height:18px}.kin-family[open] summary .ico{transform:rotate(90deg)}.kin-family h3{margin:0;font-size:25px}.kin-family summary>span{margin-left:auto;font-size:12px;color:var(--cozy-muted)}.kin-family .kin-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;padding-top:12px}.kin-entry{display:block;padding:6px 0;border:0;border-radius:8px;background:transparent;line-height:0}.kin-entry:hover{background:#dfbd6a0b}.kin-entry .collection-figure{display:block;aspect-ratio:1}.kin-entry img{height:100%;margin:0}.kin-entry[aria-pressed="true"]{outline:1px solid var(--cozy-accent);outline-offset:2px}.kin-detail{font-size:14px;max-width:70ch}.portraits{gap:16px}
/* An illustrated story strip, with quiet progress marks and one explicit rotation control. */
.cozy-carousel{padding:0;border:1px solid var(--cozy-line);border-radius:16px;overflow:hidden;background:linear-gradient(110deg,#21334e,#172941)}.story-slide{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:30px;min-height:196px;padding:22px 32px}.story-illustration{display:flex;justify-content:center;align-items:center;height:150px;min-width:0}.story-illustration>img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 8px 15px #080f2070)}.story-caption .eyebrow{font-size:10px;letter-spacing:.14em}.story-caption h2{font-size:25px;margin:8px 0 10px;line-height:1.2}.story-caption p{margin:0;color:var(--cozy-muted);font-size:15px;line-height:1.6;max-width:55ch}.story-companions{display:flex;align-items:center;justify-content:center;width:180px}.story-companions img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 6px 12px #080f2080)}.story-companions img+img{margin-left:-32px;translate:0 16px}.story-illustration>.story-book{width:180px;height:auto}.carousel-controls{padding:0 24px 16px;gap:18px}.carousel-steps{display:flex;gap:6px;align-items:center}.carousel-steps .step{width:34px;height:22px;padding:9px 0;background:transparent;border:0;border-radius:0}.carousel-steps .step::after{content:'';display:block;height:3px;border-radius:2px;background:var(--cozy-line)}.carousel-steps .step[aria-current="true"]{background:transparent}.carousel-steps .step[aria-current="true"]::after{background:var(--cozy-accent)}.carousel-controls .quiet{border:0;color:var(--cozy-muted);font-size:11px;padding:4px 0}.expanded-layout .story-slide{display:flex;flex-direction:column;gap:12px;padding:22px 20px;min-height:0}.expanded-layout .story-caption h2{font-size:23px}.expanded-layout .story-caption p{font-size:14px}.expanded-layout .carousel-controls{padding:0 18px 16px;gap:12px}.expanded-layout .carousel-steps .step{width:27px}
/* Tower overlays share the same coordinate system as the island, never as standalone buildings. */
.island-view{grid-template-columns:1.1fr 1fr;gap:40px;background:linear-gradient(130deg,#1b2e49,#111e35);padding:34px 42px}.island-view figure{display:flex;align-items:center;flex-direction:column;margin:0;background:radial-gradient(ellipse at 50% 40%,#e5c38014,transparent 65%)}.island-tower{position:relative;width:min(100%,235px);aspect-ratio:629/1393;margin:auto;isolation:isolate}.island-view .island-tower img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.island-tower .island-base{position:relative}.island-tower .island-layer{position:absolute;left:0;pointer-events:none}.island-view figcaption{font-size:12px;color:var(--cozy-muted);margin:16px 0 0}.island-marker{display:none;position:absolute;left:74%;white-space:nowrap;padding:3px 9px;background:#172940ed;border:1px solid #e5c38080;border-radius:6px;font-size:11px;color:var(--cozy-accent)}.island-marker[data-island-marker="watch"]{top:20%}.island-marker[data-island-marker="home"]{top:63%}.island-marker[data-island-marker="lantern"]{top:6%}.island-tower[data-focus="watch"] [data-island-marker="watch"],.island-tower[data-focus="home"] [data-island-marker="home"],.island-tower[data-focus="lantern"] [data-island-marker="lantern"]{display:block}.choice-row [aria-pressed="true"]{border-color:var(--cozy-accent);color:var(--cozy-accent)}
/* One footer owns product, cluster, legal and language navigation on every page. */
.cozy-footer{display:block;padding:48px 0 24px;margin-top:36px}.footer-columns{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:40px}.footer-brand .wordmark{font-size:25px;margin-bottom:18px}.footer-brand>p{font-size:14px;line-height:1.75;color:var(--cozy-muted);max-width:30ch;margin:0 0 22px}.footer-columns nav h2{font:800 11px/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;margin:4px 0 18px;color:var(--cozy-text)}.footer-columns nav a{display:block;text-decoration:none;font-size:13px;line-height:1.65;margin:0 0 10px;color:var(--cozy-muted)}.footer-columns nav a:hover{color:var(--cozy-accent)}.footer-brand #langs{display:flex;flex-wrap:wrap;gap:8px 14px;max-width:28ch;line-height:1.7}.footer-brand #langs span{font-size:11px}.footer-brand #langs [aria-current]{color:var(--cozy-accent)}.legal-page .cozy-footer{padding:38px 0 24px}.legal-page .footer-columns{gap:26px}
@media(max-width:1000px){.kin-family .kin-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.footer-columns{grid-template-columns:1.2fr 1fr;gap:30px 44px}.island-view{padding:26px;gap:20px}.island-tower{width:min(100%,200px)}.island-marker{left:66%}.expanded-layout .story-illustration{height:130px}.expanded-layout .story-illustration>img{width:120px;height:120px}}
@media(max-width:700px){.kin-family h3{font-size:22px}.kin-family .kin-grid{gap:6px}.kin-family summary{gap:8px}.kin-family summary>span{font-size:11px}.story-slide{grid-template-columns:90px minmax(0,1fr);gap:16px;padding:20px 16px;min-height:180px}.story-illustration{height:100px}.story-illustration>img{width:96px;height:96px}.story-companions{width:100px}.story-companions img{width:76px;height:76px}.story-companions img+img{margin-left:-40px;translate:0 12px}.story-illustration>.story-book{width:100px}.story-caption h2{font-size:21px}.story-caption p{font-size:13px}.detail-page .cozy-carousel{padding:0}.carousel-controls{padding:0 16px 12px}.expanded-layout .cozy-carousel{padding:0}.expanded-layout .story-slide{display:grid;grid-template-columns:66px minmax(0,1fr);padding:10px 14px;gap:10px;min-height:108px}.expanded-layout .story-caption .eyebrow{display:none}.expanded-layout .story-caption h2{font-size:18px;margin:0 0 5px}.expanded-layout .story-caption p{font-size:12px;line-height:1.4;margin:0}.expanded-layout .story-illustration{height:70px}.expanded-layout .story-illustration>img{width:68px;height:68px}.expanded-layout .story-illustration>.story-book{width:68px;height:auto}.expanded-layout .story-companions{width:66px}.expanded-layout .story-companions img{width:52px;height:52px}.expanded-layout .story-companions img+img{margin-left:-32px;translate:0 6px}.expanded-layout .carousel-controls{padding:0 14px 6px}.island-view{grid-template-columns:1fr;padding:24px 20px}.island-view figure{order:0}.island-tower{width:190px}.island-view h2{font-size:26px}.cozy-footer{padding:34px 0 22px}.footer-columns{grid-template-columns:1fr 1fr;gap:30px 20px}.footer-brand{grid-column:1/-1}.footer-brand>p{max-width:45ch}.footer-brand #langs{max-width:none}.footer-columns nav h2{font-size:10px}.footer-columns nav a{font-size:12px}.portraits{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Side-by-side panel: the same width limits and keyboard steps as edgekin.app. */
:root{--panel-min:320px;--panel-default:420px;--panel-max:min(960px,calc(100vw - 360px));--panel-step:16px;--panel-step-big:64px;--panel-handle:12px;--panel-w:clamp(var(--panel-min),var(--panel-user-w,var(--panel-default)),var(--panel-max))}
.cozy-site{container:cozy-page/inline-size;min-width:0}.edgekin-panel{position:fixed;inset:0 0 0 auto;z-index:40;width:var(--panel-w);height:100dvh;display:flex;flex-direction:column;background:var(--cozy-bg);color:var(--cozy-text);border:0;border-left:1px solid var(--cozy-line);transform:translateX(100%);visibility:hidden;transition:transform var(--t-hud) var(--ease-hud),visibility 0s var(--ease-zz) var(--t-hud)}.edgekin-panel.open{transform:none;visibility:visible;transition:transform var(--t-hud) var(--ease-hud)}.edgekin-panel>header{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--cozy-line)}.edgekin-panel>header h2{font-size:19px;margin:0 auto 0 0}.edgekin-panel>header .icon-button{padding:7px}.edgekin-panel iframe{width:100%;flex:1;min-height:0;border:0;background:var(--cozy-bg)}.edgekin-panel>p{font-size:12px;margin:8px 16px}.panel-resize{position:absolute;inset-block:0;inset-inline-start:calc(var(--panel-handle)/-2);width:var(--panel-handle);z-index:1;cursor:col-resize;touch-action:none}.panel-resize::after{content:'';position:absolute;inset-block:0;left:calc(50% - 1px);width:2px;background:transparent}.panel-resize:hover::after,.panel-resizing .panel-resize::after,.panel-resize:focus-visible::after{background:var(--cozy-accent)}.panel-resize:focus-visible{outline:none}.panel-resizing,.panel-resizing *{cursor:col-resize;user-select:none}.panel-resizing iframe{pointer-events:none}.panel-resizing .edgekin-panel,.panel-resizing body{transition:none}
@media(min-width:640px){body{transition:padding-inline-end var(--t-hud) var(--ease-hud)}body.panel-open{padding-inline-end:var(--panel-w)}}
@media(max-width:639px){:root{--panel-w:100%}html:has(>body.panel-open){overflow:hidden}.panel-resize{display:none}}
@container cozy-page (max-width:900px){.puzzle-grid{grid-template-columns:1fr}.cozy-header{gap:12px;flex-wrap:wrap}.cozy-header nav{order:3;width:100%;justify-content:space-between;margin:0;gap:12px}.cozy-header>.primary{margin-left:auto}.footer-columns{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.kin-family .kin-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.island-view,.browser-choice,.mechanic-notes>div{grid-template-columns:1fr}.chronicle-book{grid-template-columns:1fr}.island-view figure{order:0}.island-tower{width:190px}.portraits{grid-template-columns:repeat(3,minmax(0,1fr))}.pricing-page .pricing-plans{grid-template-columns:1fr}}
@container cozy-page (max-width:540px){.cozy-header,main,.cozy-footer{width:calc(100% - 28px)}.cozy-header nav{font-size:12px}.cozy-header>.primary{font-size:13px}.puzzle-root{height:360px}.story-slide{grid-template-columns:90px minmax(0,1fr);padding:20px 16px;gap:16px}.story-caption h2{font-size:21px}.story-caption p{font-size:13px}.story-illustration>img{width:90px;height:90px}.story-companions{width:90px}.story-companions img{width:70px;height:70px}.footer-columns{gap:24px 16px}.footer-brand>p{max-width:none}}

/* Separate comparison boards and keep other-game links in one browsable row. */
.detail-board{display:grid;gap:32px}
.footer-brand>p.footer-copyright{margin:22px 0 0;font-size:11px;color:var(--cozy-muted)}
.carousel-pause{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:auto;padding:10px;border:0;background:none;color:var(--cozy-muted)}
.carousel-pause:hover{color:var(--cozy-accent)}
.carousel-pause span{display:flex}.carousel-pause .ico{width:22px;height:22px}
.carousel-controls{gap:12px}.carousel-steps{flex:1;min-width:0}.carousel-steps .step{flex:1;max-width:34px;min-width:0;width:24px;height:44px;display:flex;align-items:center;padding:0}.carousel-steps .step::after{width:100%}
.story-caption .story-cta{margin-top:14px;font-size:13px}.expanded-layout .story-caption .story-cta{font-size:12px;padding:7px 12px}
.other-puzzles{margin-top:36px}.other-puzzles h2{font-size:23px;margin:0 0 18px}
.other-puzzle-row{display:grid;grid-template-columns:repeat(var(--other-games,5),minmax(0,1fr));gap:16px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x proximity}
.other-puzzle{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px;border:1px solid var(--cozy-line);border-radius:12px;background:var(--cozy-panel);text-decoration:none;text-align:center;font-size:14px;line-height:1.4;scroll-snap-align:start}
.other-puzzle img{width:80px;height:80px;object-fit:contain}.other-puzzle:hover{border-color:var(--cozy-accent)}
@media(max-width:700px){.other-puzzle-row{grid-template-columns:repeat(var(--other-games,5),136px);gap:12px}.other-puzzle{padding:16px 10px}.other-puzzle img{width:64px;height:64px}.expanded-layout .story-caption .story-cta{margin-top:8px;padding:5px 9px}.expanded-layout .story-slide{min-height:148px}}
@container cozy-page (max-width:700px){.other-puzzle-row{grid-template-columns:repeat(var(--other-games,5),136px);gap:12px}}

/* Keep every story's footprint in the deck, including its right-hand action. */
.story-deck{display:grid}.story-slide{grid-area:1/1;grid-template-columns:180px minmax(0,1fr) 128px}
.cozy-carousel .story-slide[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
.story-action{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.story-action .story-cta{margin:0;font-size:13px;padding:9px 12px;text-align:center}
.story-illustration>.story-island{width:auto;height:100%;aspect-ratio:629/1393;margin:0;flex:none;filter:drop-shadow(0 8px 15px #080f2070)}
.story-island img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.expanded-layout .story-slide{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:12px}
.expanded-layout .story-illustration{grid-column:1/-1;justify-self:center}
.expanded-layout .story-action .story-cta{font-size:12px;padding:8px}
@media(max-width:700px){.story-slide{grid-template-columns:56px minmax(0,1fr) 80px;gap:12px}.story-illustration{height:100px}.story-illustration>img{max-width:56px}.story-companions{width:56px}.story-companions img{width:50px;height:50px}.story-companions img+img{margin-left:-34px}.story-illustration>.story-book{width:56px}.story-action .story-cta{font-size:12px;padding:8px}.expanded-layout .story-slide{grid-template-columns:50px minmax(0,1fr) 78px;gap:8px}.expanded-layout .story-illustration{grid-column:auto;justify-self:stretch}.expanded-layout .story-action .story-cta{padding:7px;font-size:11px}}
@container cozy-page (max-width:540px){.story-slide{grid-template-columns:56px minmax(0,1fr) 80px;gap:12px}.story-illustration>img{max-width:56px}.story-companions{width:56px}.story-companions img{width:50px;height:50px}.story-companions img+img{margin-left:-34px}.story-illustration>.story-book{width:56px}.story-action .story-cta{font-size:12px;padding:8px}}

/* Chronicle examples use the game's own sign-field material and complete artwork. */
.book-paper [data-entry]{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;align-items:center;min-height:270px}
.book-paper h3{color:var(--ink-title)}.chronicle-art{height:240px;display:flex;align-items:center;justify-content:center;min-width:0}
.chronicle-art>.story-island{width:auto;height:100%;aspect-ratio:629/1393;margin:0}
.chronicle-kin{display:flex;align-items:center;justify-content:center;width:100%}.chronicle-kin img{width:120px;height:120px;object-fit:contain}.chronicle-kin img+img{margin-left:-55px;translate:0 30px}
@media(max-width:700px){.book-paper [data-entry]{grid-template-columns:minmax(0,1fr) 82px;gap:14px;min-height:230px}.chronicle-art{height:180px}.chronicle-kin{flex-direction:column}.chronicle-kin img{width:90px;height:90px}.chronicle-kin img+img{margin-left:0;margin-top:-16px;translate:0}}
@container cozy-page (max-width:900px){.book-paper [data-entry]{grid-template-columns:minmax(0,1fr) 100px;gap:16px}.chronicle-art{height:190px}.chronicle-kin{flex-direction:column}.chronicle-kin img{width:100px;height:100px}.chronicle-kin img+img{margin-left:0;margin-top:-20px;translate:0}}

/* Compact practice cards: one header, board and its own action row. */
.footer-puzzle-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;grid-auto-flow:column;grid-template-rows:repeat(7,auto)}
@container cozy-page (min-width:1600px){.cozy-header,main,.cozy-footer{width:min(1800px,calc(100% - 96px))}.puzzle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-columns{grid-template-columns:1.2fr 1.6fr 1.2fr .8fr}}
@container cozy-page (max-width:900px){.footer-puzzles{grid-column:1/-1}}
.puzzle-heading{min-height:0;align-items:center}.puzzle-heading>div{flex:1;min-width:0}.puzzle-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:6px}.puzzle-title h2{margin:0}.puzzle-title small{font-size:10px;color:var(--cozy-muted);opacity:.68;line-height:1.5}.puzzle-heading p{max-width:none}.puzzle-heading .icon-button{min-width:44px;min-height:44px}.puzzle-retry{padding:10px 18px}.puzzle-retry[hidden]{display:none}.puzzle-root .game-finish{display:none}.puzzle-root .game-foot{gap:6px 10px;min-height:60px;align-items:center}.puzzle-root .practice-tools{display:flex;align-items:center;gap:8px;margin-left:auto}.puzzle-root .practice-new,.puzzle-root .game-shuffle,.puzzle-root .logic-undo{width:44px;height:44px;min-width:44px;padding:10px;border:1px solid #e5c38060;background:#101d3680;box-shadow:none;border-radius:9px;color:var(--cozy-accent)}.puzzle-root .practice-new:hover,.puzzle-root .game-shuffle:hover,.puzzle-root .logic-undo:hover{background:#e5c38018}.puzzle-root .game-shuffle .game-action-label{display:none}.puzzle-root .game-action-mark{width:22px;height:22px}.puzzle-root .game-action-mark .ico{width:22px;height:22px}.puzzle-root .game-shuffle .game-action-mark{background:none;box-shadow:none;border:0}.practice-confirm{position:absolute;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;background:#080f20b8;color:var(--cozy-text);padding:16px;z-index:20;box-sizing:border-box;overflow:auto}.practice-confirm[open]{display:grid;place-items:center}.practice-confirm-content{width:min(100%,380px);border:1px solid var(--cozy-line);border-radius:14px;padding:22px;background:var(--cozy-panel);box-shadow:0 12px 36px #030a2355}.practice-confirm h2{font-size:23px;margin:0 0 10px}.practice-confirm p{font-size:14px;color:var(--cozy-muted);margin:0 0 18px}.practice-confirm-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}.practice-confirm-actions button{min-height:44px;padding:10px 14px}.puzzle-heading-actions{display:flex;gap:8px;flex:none}.puzzle-heading-actions button{padding:10px}
.tip{z-index:80}.puzzle-dialog>.tip{position:fixed}
/* Same stars as the game, a fixed sky behind the page rather than a tall canvas. */
.cozy-site{isolation:isolate}
@media(max-width:700px){.puzzle-title{gap:3px 8px}.puzzle-title small{font-size:9px}.expanded-layout .puzzle-title small{font-size:8px}.puzzle-root .game-foot{padding-inline:10px}.puzzle-root .game-foot .game-count{font-size:11px}.puzzle-heading p{display:block}.expanded-layout .puzzle-heading p{display:none}}
.puzzle-card{position:relative}.puzzle-card>.notice{position:absolute;left:14px;right:14px;bottom:12px;z-index:12;background:#f3e2be;color:#3f3224;box-shadow:0 4px 18px #030b2355}.puzzle-card>.notice-err{background:#f0d6c5;color:#682d22}

/* A short landscape window gives the expanded board the available height. */
@media(max-height:600px) and (min-aspect-ratio:1/1){
 .puzzle-dialog{padding:46px 12px 10px}.expanded-layout{display:block}.expanded-layout [data-modal-cards],.expanded-layout .edgekin-invitation{display:none}.expanded-layout [data-modal-board]{height:100%;min-height:0}.expanded-layout .puzzle-heading{padding:8px 12px}.expanded-layout .puzzle-heading p,.expanded-layout .puzzle-title small{display:none}.expanded-layout .puzzle-title{margin:0}
}

/* Loading keeps its footprint and exposes a complete, decoded field in one paint. */
.puzzle-stage .puzzle-status{position:absolute;inset:0;z-index:2;margin:0;pointer-events:none}
.puzzle-root:not([data-ready="true"]){visibility:hidden}

/* Phone cards grow with their width; scaled artwork and controls each keep their own room. */
.puzzle-stage{container-type:inline-size}
@container cozy-page (max-width:700px){
 .puzzle-card:not(.expanded-layout .puzzle-card) [data-board="masonry"]{height:calc(100cqw + 160px)}
 .puzzle-card:not(.expanded-layout .puzzle-card) [data-board="seal"]{height:calc(100cqw + 140px)}
 .puzzle-card:not(.expanded-layout .puzzle-card) [data-board="blueprint"]{height:calc(100cqw + 94px)}
 .puzzle-card:not(.expanded-layout .puzzle-card) [data-board="dispel"]{height:calc(100cqw + 40px)}
}
@container game-stage (max-width:479px){
 .puzzle-root.game-grid .game-body{--square-size:min(100cqw - 24px,100cqh - var(--rail-h) - var(--gap));}
 .puzzle-root.game-seal .game-body{--square-size:min(100cqw / var(--field-scale),(100cqh - var(--side-h) - var(--gap)) / var(--field-scale));}
 .puzzle-root.game-seal .game-mid{margin-bottom:calc(var(--square-size) * (var(--field-scale) - 1));}
 .puzzle-root.game-seal .game-body{--rail-h:var(--rune-size);}
 .puzzle-card:not(.expanded-layout .puzzle-card) .game-blueprint .game-body{--square-size:min(100cqw - 24px,100cqh / var(--field-scale));}
 .puzzle-card:not(.expanded-layout .puzzle-card) .game-dispel .game-body{--square-size:min(100cqw - 24px,100cqh * var(--cols,6) / var(--rows,7) * .96 / var(--field-share));}
}

/* Functional expansion entries use the existing island palette and type. */
.detail-board .puzzle-card[data-portrait] .puzzle-root{height:var(--cozy-portrait-px)}
.puzzle-dialog[open] .puzzle-card .puzzle-root{height:100%;min-height:0}
.puzzle-modes{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.puzzle-modes [aria-current=true],.sorting-choice [aria-pressed=true]{border-color:var(--cozy-accent);background:var(--cozy-panel);color:var(--cozy-accent)}
.pattern-entrance{margin-bottom:20px}.sorting-choice{margin-bottom:24px}.sorting-choice h2{margin-top:0}
.sorting-comparison{width:100%;max-width:780px;border-collapse:collapse;margin:18px 0;text-align:left;font-size:14px}
.sorting-comparison caption{text-align:left;font-weight:800;margin-bottom:8px}.sorting-comparison th,.sorting-comparison td{padding:10px;border-bottom:1px solid var(--cozy-line);vertical-align:top}
.pattern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--pattern-tile-px)),1fr));gap:24px;align-items:start}
.pattern-card{min-width:0;border-bottom:1px solid var(--cozy-line);padding-bottom:24px}.pattern-card h2{font-size:24px;margin:0 0 12px}
.pattern-card canvas{display:block;width:100%;height:auto;aspect-ratio:1;max-width:100%}.pattern-card>p{font-size:13px;color:var(--cozy-muted)}
.pattern-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.pattern-controls .primary{flex:1}.pattern-controls button,.pattern-controls a{font-size:13px;min-height:44px}
.pattern-solution{margin-top:16px}.pattern-solution p{font-size:13px;color:var(--cozy-muted);margin-top:8px}
.pattern-print-dialog{width:min(840px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:22px;border:1px solid var(--cozy-line);border-radius:12px;background:var(--cozy-bg);color:var(--cozy-text);overflow:auto}
.pattern-print-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.pattern-print-controls h2{margin:0 auto 0 0;font-size:24px}.pattern-print-controls label{font-size:13px}.pattern-print-controls input{accent-color:var(--cozy-accent)}
.pattern-print-help{font-size:13px;color:var(--cozy-muted);margin-top:14px}.pattern-print-viewport{width:100%;overflow:hidden}.pattern-print-pages{width:196mm;transform-origin:top left}
.pattern-print-sheet{width:180mm;margin:0 0 18px;padding:8mm;background:#fff;color:#1d252d;font:14px/1.5 Nunito,system-ui,sans-serif;box-sizing:content-box}
.pattern-print-sheet h2{font-size:24px;margin:0 0 12px}.pattern-print-sheet h3{font-size:18px;margin:16px 0 8px}.pattern-print-sheet canvas{display:block;margin:0;max-width:none;height:auto}
@page tangram-template{size:A4;margin:15mm}
@media print{
 html:has(body[data-print-pattern]){background:#fff!important;color-scheme:light}
 body[data-print-pattern]{page:tangram-template;background:#fff!important;color:#1d252d}
 body[data-print-pattern] .pattern-print-dialog::backdrop{display:none}
 body[data-print-pattern] .pattern-print-dialog{border-radius:0;box-shadow:none}

 body[data-print-pattern]>.cozy-site,body[data-print-pattern]>#tip,body[data-print-pattern]>.puzzle-dialog,body[data-print-pattern]>.edgekin-panel{display:none!important}
 body[data-print-pattern] .pattern-print-dialog{display:block!important;position:static;width:auto;max-width:none;height:auto;max-height:none;overflow:visible;border:0;margin:0;padding:0;background:#fff;color:#1d252d}
 body[data-print-pattern] .pattern-print-controls,body[data-print-pattern] .pattern-print-help{display:none!important}
 body[data-print-pattern] .pattern-print-viewport{height:auto!important;overflow:visible}
 body[data-print-pattern] .pattern-print-pages{transform:none!important;width:180mm}
 body[data-print-pattern] .pattern-print-sheet{page:tangram-template;width:180mm;padding:0;margin:0;break-inside:avoid;box-shadow:none}
 body[data-print-pattern] .pattern-answer-sheet{break-before:page}
}

/* D310 teaching examples reuse the existing type, palette and game art. */
.explore-example{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:32px;align-items:center;background:var(--cozy-panel);border:1px solid var(--cozy-line);border-radius:14px;padding:30px}.example-copy h2{margin:8px 0 16px}.example-copy p{color:var(--cozy-muted)}.example-copy .example-state{color:var(--cozy-text);border-left:2px solid var(--cozy-accent);padding-left:14px;min-height:3.3em}.example-note{font-size:14px;margin-bottom:0}.explore-example .quiet,.explore-picker .quiet{min-height:44px}.explore-example .choice-row{gap:10px}.shape-study{position:relative;aspect-ratio:1;max-width:330px;width:100%;margin:auto;background:var(--cozy-bg);border-radius:10px}.shape-piece,.shape-target{position:absolute;inset:0}.shape-target{background:var(--cozy-text);opacity:.3}.shape-piece{inset:0;background:url('/client/assets/games/cozy-expansion/tangram/material-gold.webp') center/cover,var(--cozy-accent)}.strategy-study{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;max-width:360px;margin:auto;align-items:end}.example-vessel{text-align:center}.example-vessel>span{display:block;margin-top:8px;font-weight:800;color:var(--cozy-muted)}.example-beads{display:flex;flex-direction:column-reverse;justify-content:flex-start;height:auto;aspect-ratio:1/4.25;border:2px solid var(--cozy-muted);border-top:0;border-radius:0 0 18px 18px;padding:3px}.example-beads img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}.explore-picker{padding:28px 0 10px}.explore-picker h2{margin:0 0 12px}.explore-picker p{color:var(--cozy-muted)}.explore-related{display:flex;flex-wrap:wrap;gap:12px 24px;margin-block:24px}.explore-related a{color:var(--cozy-accent)}
@container cozy-page (max-width:700px){.explore-example{grid-template-columns:1fr;gap:22px;padding:22px 18px}.shape-study{max-width:260px}.strategy-study{max-width:280px;gap:12px}.example-copy h2{font-size:26px}.example-copy .example-state{min-height:0}.explore-example .choice-row{margin-bottom:18px}}

.shape-piece{clip-path:polygon(12.5% 37.5%,62.5% 37.5%,87.5% 62.5%,37.5% 62.5%)}.shape-target{clip-path:polygon(85.355339% 67.67767%,50% 32.32233%,14.644661% 32.32233%,50% 67.67767%)}

.example-beads img{transform:scale(1.4)}

/* A narrow fullscreen story rail stacks its action below the caption. */
@media(min-width:701px){.expanded-layout .story-slide{grid-template-columns:minmax(0,1fr)}.expanded-layout .story-illustration{grid-column:auto}.expanded-layout .story-action{justify-content:flex-start;justify-self:stretch}}
/* Keep Korean headings readable without splitting a word between syllables. */
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3{word-break:keep-all}
/* D316 worked examples share the existing Explore panel and practice artwork. */
.cozy-lesson{background:var(--cozy-panel);border:1px solid var(--cozy-line);border-radius:14px;padding:30px;margin-bottom:28px}
.lesson-deck{display:grid}.lesson-step{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:32px;align-items:center}
.lesson-step[hidden]{display:grid!important;visibility:hidden;pointer-events:none}.lesson-step .choice-row{align-items:center;gap:10px}.lesson-step button{min-height:44px}
.guide-step,.lesson-caption{font-size:13px;color:var(--cozy-muted)}.guide-demo{min-height:300px;display:flex;align-items:center;justify-content:center;position:relative;padding:20px;min-width:0}.guide-demo-line{flex-direction:column;gap:18px}
.lesson-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:min(100%,300px);aspect-ratio:1;border:1px solid var(--cozy-line);padding:8px;background:var(--cozy-bg)}
.lesson-cell{display:flex;align-items:center;justify-content:center;border:1px solid var(--cozy-line);aspect-ratio:1;color:var(--cozy-muted);min-width:0}.lesson-cell.filled{background:url(/client/assets/games/masonry/block-2.webp) center/100% 100%;border-color:transparent}.lesson-cell.preview{outline:2px dashed var(--cozy-accent);outline-offset:-3px}.lesson-cell .ico{width:60%;height:60%}
.lesson-line{display:flex;align-items:center;gap:12px;width:100%}.lesson-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;flex:1}.lesson-row .filled{background:var(--cozy-accent)}.lesson-clue{display:flex;gap:8px;flex:none;font:700 26px var(--font-display)}.lesson-caption{text-align:center;margin:0}.lesson-piece{display:grid;grid-template-columns:repeat(2,42px);grid-auto-rows:42px;gap:3px}
.lesson-pile{position:relative;container-type:inline-size;width:100%;max-width:340px;height:240px}.lesson-tile{position:absolute;width:24%;top:110px}.lesson-tile img{width:100%;height:auto;display:block}.lesson-tile.cover{top:calc(110px - 22.5cqw)}.lesson-tile.blocked img{filter:brightness(.7) saturate(.85)}.lesson-tile span{display:block;text-align:center;font-size:13px;color:var(--cozy-muted)}.lesson-tile.selected{filter:drop-shadow(0 0 7px var(--cozy-accent))}
@container cozy-page (max-width:700px){.cozy-lesson{padding:22px 18px}.lesson-step{grid-template-columns:1fr;gap:16px}.guide-demo{min-height:220px;padding:8px}.lesson-line{flex-direction:column}.lesson-row{grid-template-columns:40px;flex:none}.lesson-clue{flex-direction:column;gap:3px}.lesson-pile{height:230px}}