/* Women's Health Snakes and Ladders: the "app" layout shared by all three pages, plus the board game.
   Every screen fills the window exactly. Nothing scrolls unless its content genuinely doesn't fit,
   and then only the middle part scrolls while the buttons stay in view at the bottom.
   Loaded after chrome.css and hub.css (CLEAR colours, fonts, header). */

/* ------------------------------------------------------------------ the window
   Helpline, header and one screen, filling the screen. The footer is left out (its links are in the menu). */
/* Pinned to the visible area (top to bottom), not the full screen height: on iPhone the browser's bottom bar floats
   over the page, and a 100vh/100dvh page would run underneath it and hide the buttons. */
html:has(body.sl-app){overflow:hidden;overscroll-behavior:none}
body.sl-app{position:fixed;top:0;right:0;bottom:0;left:0;height:auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--ck-lav),#fff 85%)}
.sl-app .ck-help{flex:none;height:30px;display:flex;align-items:center;font-size:.85rem}
.sl-app .ck-help .ck-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-app .ck-head{flex:none;position:relative}
.sl-app .ck-head .ck-wrap{min-height:60px}
.sl-app .ck-logo img{height:36px}
.sl-app .ck-round{width:44px;height:44px}
.sl-app .ck-round svg{width:22px;height:22px}
.sl-app .ck-top{display:none!important}
.sl-app .ck-a11yfab.in-head{position:static;width:44px;height:44px;border-width:3px;box-shadow:none;flex:none}
.sl-app .ck-a11yfab.in-head svg{width:24px;height:24px}
.sl-app .a11y{top:96px}
.sl-app main{flex:1;min-height:0;display:flex;flex-direction:column}

.sl-screen{flex:1;min-height:0;display:flex;flex-direction:column}
.sl-screen[hidden]{display:none}
.sl-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative}
/* shown only when there is more below the edge */
.sl-scroll::after{content:"";display:none}
.sl-scroll.has-more::after{display:block;position:sticky;bottom:0;height:56px;margin-top:-56px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),#fff 80%);text-align:center;padding-top:30px;box-sizing:border-box;
  content:"Scroll for more \2193";font-size:.85rem;font-weight:700;color:var(--ck-purple);letter-spacing:.03em}
.sl-inner{width:100%;max-width:1100px;margin:0 auto;padding:18px 24px;box-sizing:border-box}
.sl-bar{flex:none;background:#fff;border-top:1px solid #eceaf3;box-shadow:0 -4px 16px #3d2b960f;padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.sl-bar[hidden]{display:none}
.sl-bar .sl-inner{display:flex;gap:12px;justify-content:center;align-items:center;padding-top:0;padding-bottom:0}
.sl-bar .ck-btn{width:auto;flex:0 1 300px;min-height:52px;padding:12px 24px}
.sl-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1100px;margin:0 auto;padding:12px 24px 0;box-sizing:border-box}

.sl-title{font-size:clamp(1.5rem,2.4vw + .8rem,2.4rem);line-height:1.15;font-weight:700;color:var(--ck-purple);margin:0 0 6px}
.sl-sub{font-size:1.1rem;line-height:1.55;margin:0 0 16px}
.sl-eyebrow{font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-pink);margin:0 0 6px}
.sl-link{background:none;border:0;padding:8px 2px;font:500 1rem var(--font);color:var(--ck-purple);text-decoration:underline;text-underline-offset:4px;cursor:pointer;white-space:nowrap}
.sl-switch{margin:12px 0 0;font-size:1rem}
.sl-switch a{color:var(--ck-purple);text-underline-offset:4px;font-weight:500}
.sl-loading{text-align:center;font-size:1.15rem}
.ck-btn.line{background:#fff;color:var(--ck-purple);border-color:var(--ck-purple)}
.ck-btn.line:hover{background:var(--ck-lav)}
.ck-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.ck-btn,.sl-link{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ------------------------------------------------------------------ choose a character */
.sl-chars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:900px;margin:0 auto}
.sl-char{background:#fff;border-radius:28px;padding:20px 22px;box-shadow:0 2px 10px #3d2b960f;display:grid;grid-template-columns:104px 1fr;column-gap:18px;align-items:center}
.sl-char img{grid-row:1/3;width:104px;height:auto}
.sl-char h3{font-size:1.6rem;color:var(--ck-purple);margin:0 0 4px;align-self:end}
.sl-char p{font-size:1rem;line-height:1.55;margin:0;align-self:start}
.sl-char .ck-btn{grid-column:1/-1;margin-top:14px;width:100%}
.sl-how{max-width:900px;margin:16px auto 0;background:#fff;border-radius:20px;padding:12px 20px}
.sl-how summary{font-weight:600;font-size:1.05rem;color:var(--ck-purple);cursor:pointer}
.sl-how li{font-size:1rem;line-height:1.6;margin:6px 0}

/* the character's story */
.sl-intro{display:grid;grid-template-columns:170px 1fr;gap:32px;align-items:start;max-width:900px;margin:0 auto}
.sl-intro img{width:100%;height:auto;background:#fff;border-radius:28px;padding:14px;box-shadow:0 2px 10px #3d2b960f}
.sl-intro h2{font-size:clamp(1.6rem,2.4vw + .8rem,2.4rem);color:var(--ck-purple);margin:0 0 12px}
.sl-intro p{font-size:1.1rem;line-height:1.7;margin:0 0 12px}

/* ------------------------------------------------------------------ the board game */
.sl-who{display:flex;align-items:center;gap:12px;min-width:0}
.sl-who img{width:36px;height:auto;flex:none;background:#fff;border-radius:12px;padding:2px;box-shadow:0 1px 6px #3d2b9626}
.sl-who p{margin:0}
.sl-who .name{font-weight:700;color:var(--ck-purple);font-size:1.1rem;line-height:1.2}
.sl-who .where{font-size:.95rem;color:var(--ck-slate);line-height:1.2}

.sl-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px 24px;container-type:size}
.sl-board{position:relative;width:100%;aspect-ratio:var(--cols)/var(--rows);background:#fff;border:3px solid var(--ck-purple);border-radius:16px;overflow:hidden;box-shadow:0 10px 28px #3d2b9626}
@supports (width:1cqw){.sl-board{width:min(100cqw,calc(100cqh * var(--cols) / var(--rows)))}}
.sl-squares{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr)}
.sl-sq{position:relative;border:1px solid #3d2b961f;background:#fff}
.sl-sq:nth-child(odd){background:var(--ck-lav)}
.sl-sq .num{position:absolute;top:3px;left:4px;z-index:2;font-size:clamp(.6rem,1.5vw,.9rem);font-weight:600;color:var(--ck-ink);background:#ffffffd9;border-radius:6px;padding:0 4px;line-height:1.5}
.sl-sq.is-end{background:var(--ck-mint)}
.sl-sq.is-end::after{content:"Finish";position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:clamp(.5rem,1.1vw,.8rem);font-weight:700;color:var(--ck-purple)}
.sl-sq.here{box-shadow:inset 0 0 0 3px var(--ck-pink)}
.sl-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.sl-ladder line{stroke:#5a4630;stroke-width:7;stroke-linecap:round}
.sl-ladder line.rung{stroke-width:5}
.sl-snake path{fill:none;stroke-width:13;stroke-linecap:round;opacity:.92}
.sl-token{position:absolute;width:12.5%;height:20%;display:flex;align-items:center;justify-content:center;transition:left .2s ease,top .2s ease,opacity .2s;opacity:0;z-index:3}
.sl-token img{width:62%;height:auto;max-height:85%;object-fit:contain;background:#fff;border:3px solid var(--ck-pink);border-radius:50%;padding:3px;box-shadow:0 3px 8px #0003}

.sl-rollrow{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
.sl-rolled{margin:0;font-weight:600;font-size:1.1rem;color:var(--ck-ink);min-width:9em}
.sl-die{flex:none;width:52px;height:52px;background:#fff;border:3px solid var(--ck-purple);border-radius:12px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:6px;gap:1px}
.sl-die .pip{width:9px;height:9px;border-radius:50%;background:var(--ck-purple);align-self:center;justify-self:center}
.sl-die[data-n="1"] .pip:nth-child(1){grid-area:2/2}
.sl-die[data-n="2"] .pip:nth-child(1){grid-area:1/1}.sl-die[data-n="2"] .pip:nth-child(2){grid-area:3/3}
.sl-die[data-n="3"] .pip:nth-child(1){grid-area:1/1}.sl-die[data-n="3"] .pip:nth-child(2){grid-area:2/2}.sl-die[data-n="3"] .pip:nth-child(3){grid-area:3/3}
.sl-die[data-n="4"] .pip:nth-child(1){grid-area:1/1}.sl-die[data-n="4"] .pip:nth-child(2){grid-area:1/3}.sl-die[data-n="4"] .pip:nth-child(3){grid-area:3/1}.sl-die[data-n="4"] .pip:nth-child(4){grid-area:3/3}
.sl-die[data-n="5"] .pip:nth-child(1){grid-area:1/1}.sl-die[data-n="5"] .pip:nth-child(2){grid-area:1/3}.sl-die[data-n="5"] .pip:nth-child(3){grid-area:2/2}.sl-die[data-n="5"] .pip:nth-child(4){grid-area:3/1}.sl-die[data-n="5"] .pip:nth-child(5){grid-area:3/3}
.sl-die[data-n="6"] .pip:nth-child(1){grid-area:1/1}.sl-die[data-n="6"] .pip:nth-child(2){grid-area:2/1}.sl-die[data-n="6"] .pip:nth-child(3){grid-area:3/1}.sl-die[data-n="6"] .pip:nth-child(4){grid-area:1/3}.sl-die[data-n="6"] .pip:nth-child(5){grid-area:2/3}.sl-die[data-n="6"] .pip:nth-child(6){grid-area:3/3}

/* the scenario card: a sheet that slides up on phones, a window in the middle on bigger screens */
.sl-card{position:fixed;z-index:65;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border-radius:28px;border:3px solid;padding:24px 26px 26px;box-shadow:0 20px 60px #0005;animation:sl-pop .22s ease-out}
.sl-card.snake{background:#fdf1f5;border-color:var(--ck-pink)}
.sl-card.ladder{background:var(--ck-mintbg);border-color:#2f9e78}
.sl-card[hidden]{display:none}
.sl-card .kind{font-size:1.25rem;font-weight:700;margin:0 0 10px}
.sl-card.snake .kind{color:#a8305f}
.sl-card.ladder .kind{color:#1f7a5b}
.sl-card .text{font-size:1.1rem;line-height:1.65;margin:0 0 14px;color:var(--ck-ink)}
.sl-card .q{font-size:1.15rem;font-weight:600;color:var(--ck-purple);margin:0 0 10px}
.sl-card .opts{display:flex;flex-direction:column;gap:8px}
.sl-opt{font:500 1.05rem var(--font);text-align:left;background:#fff;color:var(--ck-ink);border:2px solid #3d2b9640;border-radius:12px;padding:12px 14px;cursor:pointer;min-height:48px;touch-action:manipulation}
.sl-opt:hover:not(:disabled){border-color:var(--ck-purple)}
.sl-opt:disabled{cursor:default;opacity:.6}
.sl-opt.chosen{opacity:1;border-color:var(--ck-purple);background:var(--ck-purple);color:#fff}
.sl-card .think{margin:14px 0;background:#fff;border-radius:14px;padding:12px 14px}
.sl-card .think p{margin:0;font-size:1.02rem;line-height:1.6}
.sl-card .think .lbl{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-slate);margin:0 0 4px}
.sl-card .ck-btn{width:100%}
.sl-backdrop{display:none}
body.sl-sheet-open .sl-backdrop{display:block;position:fixed;inset:0;z-index:64;background:#1f243380}
body.sl-sheet-open .ck-a11yfab{display:none}
@keyframes sl-pop{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes sl-up{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}

/* the end */
.sl-end{max-width:820px;margin:0 auto}
.sl-end h2{font-size:clamp(1.7rem,2.4vw + .8rem,2.6rem);color:var(--ck-purple);margin:0 0 10px}
.sl-end .lead{font-size:1.25rem;line-height:1.55;color:var(--ck-ink);margin:0 0 10px}
.sl-end p{font-size:1.1rem;line-height:1.65}
.sl-end h3{font-size:1.35rem;margin:26px 0 12px}
.sl-journey,.sl-helped{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sl-journey li{border-radius:18px;padding:16px 18px;border-left:6px solid}
.sl-journey li.snake{background:#fdf1f5;border-color:var(--ck-pink)}
.sl-journey li.ladder{background:var(--ck-mintbg);border-color:#2f9e78}
.sl-journey .tag{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sl-journey p{margin:6px 0 0;font-size:1.02rem;line-height:1.6}
.sl-journey .you{color:var(--ck-ink)}
.sl-helped li{background:var(--ck-mintbg);border-left:6px solid #2f9e78;border-radius:18px;padding:14px 18px;font-size:1.02rem;line-height:1.6}
.sl-thanks{margin-top:22px;font-weight:600}

/* ------------------------------------------------------------------ phones */
@media (max-width:640px){
  .sl-app .ck-help .ck-wrap,.sl-app .ck-head .ck-wrap{padding:0 14px}
  .sl-inner{padding:14px 16px}
  .sl-top{padding:10px 16px 0}
  .sl-bar{padding-top:8px}
  .sl-bar .sl-inner{gap:10px}
  .sl-bar .ck-btn{flex:1 1 0;min-height:50px;padding:10px 14px;font-size:1.05rem}
  .sl-sub{font-size:.98rem;line-height:1.45;margin-bottom:10px}
  .sl-title{font-size:1.45rem}

  .sl-chars{grid-template-columns:1fr;gap:10px}
  .sl-char{grid-template-columns:64px 1fr;column-gap:12px;padding:12px 14px;border-radius:20px}
  .sl-char img{width:64px}
  .sl-char h3{font-size:1.2rem}
  .sl-char p{font-size:.9rem;line-height:1.4}
  .sl-char .ck-btn{margin-top:8px;min-height:44px;padding:8px 14px}
  .sl-how{margin-top:10px;padding:8px 14px}
  .sl-how summary{font-size:.98rem}
  .sl-switch{font-size:.92rem;margin-top:8px}

  .sl-intro{grid-template-columns:1fr;gap:8px;justify-items:start}
  .sl-intro img{width:84px;padding:8px;border-radius:20px}
  .sl-intro h2{font-size:1.5rem;margin-bottom:6px}
  .sl-intro p{font-size:1.02rem;line-height:1.6;margin-bottom:8px}

  .sl-stage{padding:8px 12px}
  .sl-board{border-radius:12px;border-width:2px}
  .sl-sq .num{top:2px;left:2px;font-size:.6rem;padding:0 3px;border-radius:4px}
  .sl-sq.is-end::after{font-size:.5rem;bottom:2px}
  .sl-token img{border-width:2px;padding:1px;width:78%}
  .sl-rollrow{gap:12px}
  .sl-rolled{display:none}
  .sl-who .name{font-size:1rem}

  /* the card becomes a sheet at the bottom */
  .sl-card{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:84vh;max-height:84dvh;border-radius:22px 22px 0 0;border-width:3px 0 0;
    padding:18px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px #0004;animation:sl-up .25s ease-out}
  .sl-card::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:#0002;margin:-4px auto 12px}
  .sl-card .kind{font-size:1.1rem}
  .sl-card .text{font-size:1rem;line-height:1.55;margin-bottom:12px}
  .sl-card .q{font-size:1.05rem}
  .sl-opt{font-size:1rem;padding:11px 14px}
  .sl-end h3{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .sl-token{transition:none}
  .sl-card{animation:none}
}
@media print{
  html:has(body.sl-app){overflow:visible}
  body.sl-app{position:static;height:auto;overflow:visible;display:block}
  .sl-scroll{overflow:visible}
  .sl-bar,.sl-top,.ck-help,.ck-head,.ck-menu,.ck-a11yfab{display:none!important}
}

/* iPhone Safari 26+: the browser's floating bottom bar covers the page, so leave a gap for it (set in shell.js).
   The safe-area padding on the button bar is part of that gap, so it is dropped here. */
html.ios-float body.sl-app{bottom:var(--ios-gap,0)}
html.ios-float .sl-bar{padding-bottom:10px}
@media (max-width:640px){
  html.ios-float .sl-card{bottom:var(--ios-gap,0);max-height:calc(100vh - var(--ios-gap,0px) - 24px);border-radius:22px 22px 0 0}
}

/* short windows (a phone held sideways): give the game the height back */
@media (max-height:520px){
  .sl-app .ck-help{display:none}
  .sl-app .ck-head .ck-wrap{min-height:48px}
  .sl-app .ck-logo img{height:30px}
  .sl-app .ck-round,.sl-app .ck-a11yfab.in-head{width:38px;height:38px}
  .sl-app .a11y{top:56px}
  .sl-top{padding-top:6px}
  .sl-bar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .sl-bar .ck-btn{min-height:44px;padding-top:6px;padding-bottom:6px}
  .sl-stage{padding-top:4px;padding-bottom:4px}
}