/* Slime Squares pages: the game's soft-jelly palette (cream paper, warm brown ink, serif titles, peach primary, pastel slimes). */
body.sg{--cream:#fbf7ee;--surface:#fffdf8;--sunk:#f3ecdd;--ink:#4a3b38;--ink-2:#76675f;--peach:#fbb98c;--peach-deep:#e6824b;--peach-ink:#4a2a18;--mint:#cfeedf;--mint-ink:#2c6a53;--lip:#e0d3bd;--edge:#efe4d0;
--line:var(--edge);--muted:var(--ink-2);--paper:var(--cream);--paper-2:var(--sunk);--card:var(--surface);--accent:var(--mint-ink);
--pink:#f5adc1;--orange:#fbb98c;--purple:#c7b1ef;--blue:#95c8f1;
--serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
background:var(--cream);color:var(--ink)}
.sg .nav a[aria-current=page]{background:var(--ink);color:var(--cream)}
.sg .pulse,.sg .pulse:after{background:#6cc79f;border-color:#6cc79f}
.sg .pulse:after{background:none}
.sg h1,.sg h2,.sg h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.sg a:focus-visible,.sg button:focus-visible{outline:3px solid var(--peach-deep);outline-offset:3px;border-radius:12px}

/* Buttons echo the game's soft, pressable buttons */
.sg-btn{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(#fcc7a1,var(--peach));color:var(--peach-ink);border-radius:999px;font-weight:700;font-size:17px;padding:15px 28px;box-shadow:inset 0 1px 0 #fff8,0 4px 0 #e39a6c,0 14px 26px -12px #c9774699;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.sg-btn:hover{transform:translateY(-2px)}
.sg-btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff8,0 1px 0 #e39a6c}
.sg-link{font-weight:600;color:var(--mint-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:#9fd8bd;transition:color .2s,text-decoration-color .2s}
.sg-link:hover{color:var(--ink);text-decoration-color:var(--peach-deep)}
.sg-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint-ink);margin:0 0 20px}

/* Hero */
.sg-hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,84px) 0 clamp(64px,8vw,110px)}
.sg-hero:before{content:'';position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(40% 50% at 80% 40%,#ffe6d3 0,transparent 70%),radial-gradient(32% 42% at 10% 16%,#ddf3e8 0,transparent 70%);pointer-events:none}
.sg-hero .wrap{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.sg-hero h1{font-size:clamp(64px,8.6vw,124px);line-height:.9;letter-spacing:-.03em;margin:0 0 24px;font-weight:600}
.sg-hero h1 em{font-style:normal;color:var(--peach-deep)}
.sg-lead{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--ink-2);max-width:32ch;margin:0 0 32px}
.sg-cta{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.sg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.sg-chips span{font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--edge);color:var(--ink-2)}
.sg-soon{display:block;margin-top:18px;color:var(--ink-2);font-size:15px}
.sg-visual{position:relative}
.sg-cover{margin:0;border-radius:32px;overflow:hidden;box-shadow:0 0 0 1px var(--edge),0 40px 70px -40px rgba(138,111,74,.55);aspect-ratio:14/9;background:var(--sunk)}
.sg-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.sg-visual:hover .sg-cover img{transform:scale(1.03)}
.sg-visual .phone{position:absolute;left:0;bottom:0;width:clamp(120px,26%,190px);transform:rotate(-5deg);box-shadow:0 30px 50px -24px rgba(74,59,56,.5);animation:float 7s ease-in-out infinite}
.sg-visual .phone img{aspect-ratio:390/700}
@keyframes float{50%{transform:rotate(-4deg) translateY(-8px)}}

/* Sections */
.sg-section{padding:clamp(64px,8vw,112px) 0}
.sg-section h2{font-size:clamp(38px,5vw,62px);line-height:1;margin:0 0 18px}
.sg-section p{color:var(--ink-2);line-height:1.6}
.sg-band{background:var(--sunk);border-block:1px solid var(--edge)}
.sg-card{background:var(--surface);border-radius:28px;box-shadow:0 0 0 1px var(--edge),0 4px 0 var(--lip),0 14px 30px #8a6f4a17}

/* Try it */
.sg-play{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center}
.sg-rules{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
.sg-rules li{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;transition:transform .3s var(--ease)}
.sg-rules li:hover{transform:translateX(6px)}
.sg-rules b{flex:none;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font:600 22px var(--serif);color:var(--ink);box-shadow:inset 0 2px 0 #ffffffa6,0 3px 0 #0000001a}
.sg-rules li:nth-child(1) b{background:var(--orange)}.sg-rules li:nth-child(2) b{background:var(--blue)}.sg-rules li:nth-child(3) b{background:var(--purple)}.sg-rules li:nth-child(4) b{background:var(--pink)}
.sg-rules strong{display:block;font:600 19px/1.3 var(--serif);margin-bottom:2px}.sg-rules span{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.sg-device{width:370px;max-width:100%}
.sg-phone{border-radius:50px;padding:11px;background:#3d3230;box-shadow:0 0 0 2px #5a4b47 inset,0 40px 70px -30px rgba(74,59,56,.6)}
.sg-phone-screen{position:relative;aspect-ratio:390/844;border-radius:40px;overflow:hidden;background:var(--cream)}
.sg-phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--cream)}
.sg-launch{position:absolute;inset:0;display:block;padding:0;border:0;background:none;cursor:pointer;font-family:inherit;color:var(--ink)}
.sg-launch img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.sg-launch:hover img{transform:scale(1.02)}
.sg-launch .sg-launch-ui{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:130px 20px 30px;background:linear-gradient(rgba(251,247,238,0),var(--cream) 50%)}
.sg-launch .sg-launch-ui small{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.sg-launch .sg-btn{pointer-events:none}
.sg-open{display:block;text-align:center;margin-top:20px;font-size:15px}

/* Gallery */
.sg-gallery-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.sg-gallery-head p{margin:0;max-width:42ch}
.sg-gallery{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 26px;scrollbar-width:thin}
.sg-gallery .phone{scroll-snap-align:start;background:var(--surface);border-color:var(--edge)}
.sg-gallery .phone img{aspect-ratio:390/780}
.sg-gallery .phone:nth-child(even){margin-top:30px}

/* Example + features */
.sg-example{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,6vw,72px);align-items:center;padding:clamp(24px,4vw,52px)}
.sg-board{width:min(100%,320px)}.sg-board img{display:block;width:100%;height:auto}
.sg-note{font-size:14px!important;margin:12px 0 0}
.sg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px 0 0}
.sg-facts div{padding:18px 20px;border-radius:20px;background:var(--sunk)}
.sg-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint-ink);margin-bottom:4px}
.sg-facts dd{margin:0;font:600 18px/1.3 var(--serif)}
.sg-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.sg-features .sg-card{padding:24px 26px;transition:transform .4s var(--ease)}
.sg-features .sg-card:hover{transform:translateY(-4px)}
.sg-features h3{font-size:23px;margin:0 0 8px}.sg-features p{margin:0;font-size:16px}
.sg-features .dot{display:block;width:34px;height:34px;border-radius:12px;margin-bottom:18px;background:var(--c);box-shadow:inset 0 2px 0 #fff9,0 3px 0 #0000001a}
.sg-langs{margin-top:22px;font-size:15px}

/* End */
.sg-end{text-align:center;padding-bottom:clamp(72px,9vw,120px);background:linear-gradient(var(--cream),var(--sunk))}
.sg-end p{max-width:46ch;margin:0 auto 30px}
.sg-end .sg-cta{justify-content:center}
.sg-end img{display:block;width:min(100%,560px);height:auto;margin:0 auto 34px;border-radius:28px;box-shadow:0 0 0 1px var(--edge),0 30px 50px -34px rgba(138,111,74,.5)}
.sg-end-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* Content pages (how it is built) on the game palette. */
.sg .eyebrow,.sg .small-label{color:var(--mint-ink)}
.sg .lead{color:var(--ink)}
.sg .about-copy p+p,.sg .detail-grid p,.sg .game-body p{color:var(--ink-2)}
.sg .page-intro h1,.sg .about-grid h2,.sg .game-body h2,.sg .game-details h2,.sg .section-heading h2,.sg .detail-grid h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em}
.sg .inline-link:hover{color:var(--peach-deep)}

/* Rules and guide pages (how-to-play, ja) */
.sg-guide{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(28px,6vw,80px);padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line)}
.sg-guide h2{font-size:clamp(34px,4vw,52px);line-height:1;margin:0}
.sg-guide p,.sg-guide li{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:62ch}
.sg-guide p{margin:0 0 18px}
.sg-guide-flat{border-top:0;padding:0}
.sg-rule-list,.sg-step-list{list-style:none;margin:0;padding:0;display:grid;gap:44px}
.sg-rule-list h3{display:flex;align-items:center;gap:12px;font-size:24px;margin:0 0 10px;line-height:1.2;color:var(--ink)}
.sg-rule-list h3 b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--peach);color:var(--peach-ink);font-size:16px;flex:none}
.sg-figs{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0 0}
.sg-figs-wide{gap:28px;margin-top:28px}
.sg-fig{margin:0;display:grid;gap:10px;justify-items:start;align-content:start}
.sg-fig figcaption{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:26ch}
.sg-fig.is-no figcaption{color:#a3342e}
.sg-fig.is-ok figcaption{color:var(--mint-ink)}
.sg-grid{display:block;max-width:100%;height:auto;filter:drop-shadow(0 4px 0 var(--lip))}
.sg-step-list li{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.sg-step-list .sg-figs{margin:0}
.sg-steps{margin:0 0 44px}
.sg-tips{margin:0;padding-left:20px;display:grid;gap:12px}
.sg-faq{display:grid;gap:12px}
.sg-faq details{padding:18px 22px}
.sg-faq summary{cursor:pointer;font-weight:600;font-size:18px;color:var(--ink)}
.sg-faq details p{margin:12px 0 0}
/* Slime boards use SVG filters; skip painting guide sections until they are near the viewport. */
.sg-slimes-page .sg-guide{content-visibility:auto;contain-intrinsic-size:auto 1200px}
.sg-numbered{list-style:decimal}
.sg-numbered+p,.sg-rule-list+p{margin-top:28px}
.sg-puzzles{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;align-items:start}
.sg-puzzle{padding:18px;display:grid;gap:12px;justify-items:start;align-content:start}
.sg-puzzle h3{margin:0;font-size:20px;color:var(--ink)}
.sg-puzzle summary{cursor:pointer;font-weight:600;color:var(--mint-ink)}
.sg-puzzle details[open] summary{margin-bottom:12px}
/* Daily Square pages (generated by the game repository's daily:pages script) */
.sg-today{padding:26px 28px;display:grid;gap:10px;justify-items:start;margin:0 0 22px}
.sg-today p{margin:0}
.sg-today-number{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--ink)}
.sg-today-meta{font-size:17px;font-weight:600;color:var(--ink-2)}
.sg-today .sg-cta{margin:10px 0 4px}
.sg-today-next{font-size:15px;color:var(--ink-2)}
.sg-today-next time{font-family:"Geist Mono",ui-monospace,monospace;color:var(--ink)}
.sg-daily-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sg-daily-list a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding:12px 16px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--edge),0 2px 0 var(--lip);transition:transform .2s,box-shadow .2s}
.sg-daily-list a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--peach),0 3px 0 var(--lip)}
.sg-daily-list b{grid-row:span 2;font-family:var(--serif);font-size:22px;color:var(--ink)}
.sg-daily-list span{font-size:14px;color:var(--ink-2)}
.sg-daily-answer .sg-figs{margin-top:16px}
.sg-daily-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}

@media print{.site-header,.site-footer,.sg-end{display:none}.sg-puzzle details:not([open]){display:none}}
.sg-yomi{margin:-6px 0 14px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;color:var(--ink-2)}
:lang(ja){line-break:strict;word-break:auto-phrase}
.sg :lang(ja) h2,.sg :lang(ja) h3,.sg:lang(ja) h2,.sg:lang(ja) h3{letter-spacing:0;line-height:1.25}
@media(max-width:900px){
  .sg-guide{grid-template-columns:1fr;gap:22px}
  .sg-step-list li{grid-template-columns:1fr;gap:16px}
}
@media(max-width:900px){
  .sg-hero .wrap,.sg-play,.sg-example{grid-template-columns:minmax(0,1fr)}
  .sg-play>div:last-child{justify-self:center}
  .sg-example .sg-board{justify-self:center}
  .sg-facts,.sg-features{grid-template-columns:1fr 1fr}
  .sg-gallery{grid-template-columns:repeat(5,minmax(170px,44%))}
  .sg-gallery-head{flex-direction:column;align-items:start}
}
@media(max-width:520px){
  .sg-btn{font-size:16px;padding:14px 22px}
  .sg-facts,.sg-features{grid-template-columns:1fr}
  .sg-gallery{grid-template-columns:repeat(5,64%)}
}
@media(prefers-reduced-motion:reduce){.sg-visual .phone{animation:none}}