/* Snakes and Ladders: the "choose how to play" page and the scenario role-play.
   Loaded after game.css, which sets up the fixed-window layout (.sl-screen, .sl-scroll, .sl-bar). */

/* ---------------------------------------------------------------- choose how to play */
.sl-land{max-width:1000px}
.sl-land .sl-sub{max-width:44em}
.sl-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sl-mode{position:relative;background:#fff;border-radius:30px;padding:26px 28px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center;box-shadow:0 2px 10px #3d2b960f;overflow:hidden;transition:transform .2s,box-shadow .2s}
.sl-mode::before{content:"";position:absolute;inset:0 0 auto 0;height:8px}
.sl-mode.m-board::before{background:var(--ck-pink)}
.sl-mode.m-role::before{background:var(--ck-purple)}
.sl-mode:hover{transform:translateY(-3px);box-shadow:0 14px 34px #3d2b9626}
.sl-mode .ck-circle{grid-row:1/3;width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sl-mode .ck-circle svg{width:40px;height:40px;fill:#fff}
.sl-mode.m-board .ck-circle{background:var(--ck-pink)}
.sl-mode.m-role .ck-circle{background:var(--ck-purple)}
.sl-mode h3{font-size:1.6rem;font-weight:600;margin:0;align-self:end}
.sl-mode.m-board h3{color:var(--ck-pink)}
.sl-mode.m-role h3{color:var(--ck-purple)}
.sl-mode .when{justify-self:start;align-self:start;background:var(--ck-lav);color:var(--ck-purple);font-weight:600;font-size:.9rem;border-radius:99px;padding:2px 12px;margin:6px 0 0}
.sl-mode p.what{grid-column:1/-1;font-size:1.05rem;line-height:1.6;margin:16px 0 18px}
.sl-mode .ck-btn{grid-column:1/-1;width:100%}
.sl-privacy{margin:18px 0 0;text-align:center;font-size:.98rem;color:var(--ck-slate)}

/* ---------------------------------------------------------------- role-play */
.rp-six{font-size:1.05rem;margin-top:6px}
.rp-top{align-items:center}
.rp-progress{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex:1;max-width:320px}
.rp-progress li{flex:1;height:8px;border-radius:99px;background:#3d2b9626;transition:background .3s}
.rp-progress li.done{background:var(--ck-mint)}
.rp-progress li.now{background:var(--ck-purple)}
.rp-count{margin:0 auto 0 4px;font-weight:600;color:var(--ck-purple);font-size:1rem;white-space:nowrap}

.rp-stage{display:block}
.rp-pane[hidden]{display:none}
.rp-stage.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}

/* the scene picture and the story */
.rp-artwrap{position:relative;margin-bottom:26px}
.rp-art{border-radius:24px;overflow:hidden;aspect-ratio:400/150;box-shadow:0 8px 24px #3d2b9626;max-height:30vh}
.rp-art svg{display:block;width:100%;height:100%}
.rp-tag{position:absolute;left:16px;bottom:-15px;background:#fff;color:var(--ck-purple);font-weight:600;font-size:.95rem;border-radius:99px;padding:6px 15px;box-shadow:0 2px 8px #0003;max-width:calc(100% - 32px)}
.rp-bubble{background:#fff;border-radius:6px 22px 22px 22px;padding:14px 18px;box-shadow:0 4px 18px #3d2b9619}
.rp-who{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.rp-who img{width:30px;height:auto;background:var(--ck-lav);border-radius:10px;padding:2px}
.rp-who p{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-pink)}
.rp-bubble>p{margin:0;font-size:1.12rem;line-height:1.6;color:var(--ck-ink)}

.rp-scene.in .rp-art{animation:rp-pop .4s ease-out}
.rp-scene.in .rp-bubble{animation:rp-rise .45s .1s ease-out both}
.rp-reflect.in>*{animation:rp-rise .4s ease-out both}
.rp-reflect.in>*:nth-child(2){animation-delay:.07s}.rp-reflect.in>*:nth-child(3){animation-delay:.14s}
@keyframes rp-pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes rp-rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* the question and the choices */
.rp-again{margin:0 0 12px;background:#fff;border-radius:16px;padding:10px 16px}
.rp-again summary{font-weight:600;color:var(--ck-purple);cursor:pointer;font-size:1rem}
.rp-again p{margin:8px 0 2px;font-size:1rem;line-height:1.6;color:var(--ck-ink)}
.rp-q{display:block;font-size:1.35rem;font-weight:600;line-height:1.35;color:var(--ck-purple);margin:0 0 4px}
.rp-hint{margin:0 0 14px;font-size:.98rem;color:var(--ck-slate)}
.rp-choices{display:flex;flex-direction:column;gap:10px}
.rp-choice{display:flex;align-items:center;gap:14px;text-align:left;font:500 1.1rem/1.45 var(--font);color:var(--ck-ink);background:#fff;border:2px solid #3d2b9640;border-radius:20px;padding:14px 16px;cursor:pointer;min-height:64px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.rp-choice .k{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ck-lav);color:var(--ck-purple);font-weight:700;display:grid;place-items:center;transition:background .15s,color .15s}
.rp-choice:hover{border-color:var(--ck-purple);background:#faf9ff;transform:translateY(-1px);box-shadow:0 6px 16px #3d2b9620}
.rp-choice:hover .k,.rp-choice:focus-visible .k{background:var(--ck-purple);color:#fff}
.rp-choice:active{transform:scale(.99)}
.rp-choice:focus-visible{outline:3px solid var(--ck-purple);outline-offset:2px}

/* after choosing */
.rp-reflect .lbl{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-slate);margin:0 0 6px}
.rp-yours{background:#fff;border-radius:20px;padding:14px 18px;border-left:6px solid var(--ck-purple);box-shadow:0 2px 10px #3d2b960f}
.rp-yours p:last-child{margin:0;font-size:1.15rem;line-height:1.55;font-weight:600;color:var(--ck-purple)}
.rp-ideas{margin-top:16px}
.rp-ideas ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rp-ideas li{background:var(--ck-mintbg);border-left:5px solid #2f9e78;border-radius:12px;padding:11px 14px;font-size:1.05rem;line-height:1.5}
.rp-think{margin-top:16px;background:#fff8e6;border-left:5px solid var(--ck-yellow);border-radius:12px;padding:12px 16px}
.rp-think p:last-child{margin:0;font-size:1.05rem;line-height:1.6}
.rp-feel{border:0;margin:0;padding:0;background:#fff;border-radius:24px;padding:20px 18px;box-shadow:0 2px 10px #3d2b960f}
.rp-feel legend{float:left;width:100%;font-size:1.25rem;font-weight:600;color:var(--ck-purple);padding:0;margin-bottom:14px}
.rp-faces{clear:both;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rp-face{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px 2px;border-radius:16px;font-size:.88rem;font-weight:500;color:var(--ck-body);text-align:center;border:2px solid transparent;touch-action:manipulation}
.rp-face input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.rp-face .f{width:100%;max-width:56px;height:auto;transition:transform .15s}
.rp-face:hover .f{transform:scale(1.1)}
.rp-face:has(input:checked){background:var(--ck-lav);border-color:var(--ck-purple);font-weight:700;color:var(--ck-purple)}
.rp-face:has(input:focus-visible){outline:3px solid var(--ck-purple);outline-offset:2px}

/* ---------------------------------------------------------------- the end */
.rp-endhead{display:flex;gap:22px;align-items:center;margin-bottom:6px}
.rp-endhead img{flex:none;width:90px;height:auto;background:#fff;border-radius:26px;padding:10px;box-shadow:0 2px 10px #3d2b960f}
.rp-endhead h2{margin:0 0 6px}
.rp-endhead .lead{margin:0}
.rp-other{margin:14px 0 0}
.rp-mood{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.rp-mood li{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;font-size:.85rem;font-weight:500;text-align:center;position:relative}
.rp-mood li::before{content:attr(data-n);position:absolute;top:-6px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ck-purple);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;z-index:1}
.rp-mood .f{width:52px;height:52px}
.rp-mood .none{width:52px;height:52px;border-radius:50%;background:var(--ck-lav);display:grid;place-items:center;font-size:1.4rem}
.rp-journey{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rp-journey li{border-radius:20px;padding:16px 18px;border-left:6px solid;background:#fff;box-shadow:0 2px 10px #3d2b960f}
.rp-journey li.snake{border-color:var(--ck-pink)}
.rp-journey li.ladder{border-color:#2f9e78;background:var(--ck-mintbg)}
.rp-journey .h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.rp-journey .tag{background:var(--ck-purple);color:#fff;font-size:.82rem;font-weight:600;border-radius:99px;padding:3px 12px}
.rp-journey .kind{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-slate)}
.rp-journey .sit{margin:0 0 6px;font-size:1rem;line-height:1.55;color:var(--ck-slate)}
.rp-journey .you{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ck-ink)}
.rp-micmsg{min-height:1.4em;margin:8px 0 0;font-size:.98rem;color:var(--ck-purple)}

/* ---------------------------------------------------------------- phones */
@media (max-width:640px){
  .sl-land .sl-title{font-size:1.5rem}
  .sl-land .sl-sub{display:none}
  .sl-land .sl-eyebrow{display:none}
  .sl-modes{grid-template-columns:1fr;gap:12px}
  .sl-mode{padding:16px 18px 16px;border-radius:24px;column-gap:14px}
  .sl-mode::before{height:6px}
  .sl-mode .ck-circle{width:56px;height:56px}
  .sl-mode .ck-circle svg{width:27px;height:27px}
  .sl-mode h3{font-size:1.3rem}
  .sl-mode .when{margin-top:4px;font-size:.82rem}
  .sl-mode p.what{font-size:.98rem;line-height:1.5;margin:10px 0 12px}
  .sl-mode .ck-btn{min-height:48px;padding:10px 16px}
  .sl-privacy{font-size:.88rem;margin-top:12px}

  .rp-progress{max-width:none}
  .rp-art{border-radius:18px;aspect-ratio:400/96}
  .rp-artwrap{margin-bottom:22px}
  .rp-tag{left:12px;font-size:.9rem}
  .rp-bubble{padding:10px 14px 12px;border-radius:6px 18px 18px 18px}
  .rp-bubble>p{font-size:1rem;line-height:1.5}
  .rp-who img{width:24px}
  .rp-who{margin-bottom:2px}
  .rp-q{font-size:1.2rem}
  .rp-choice{font-size:1.02rem;padding:12px 14px;border-radius:18px;min-height:58px}
  .rp-choice .k{width:32px;height:32px}
  .rp-ideas li,.rp-think p:last-child{font-size:1rem}
  .rp-yours p:last-child{font-size:1.08rem}
  .rp-feel{padding:16px 10px}
  .rp-faces{gap:2px}
  .rp-face{font-size:.74rem;padding:8px 0}
  .rp-endhead{gap:14px}
  .rp-endhead img{width:68px;padding:8px;border-radius:20px}
  .rp-mood li{width:60px}
  .rp-mood .f,.rp-mood .none{width:44px;height:44px}
}
@media (max-width:640px) and (max-height:800px){
  .sl-mode p.what{display:none}
  .sl-mode .ck-btn{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .rp-scene.in .rp-art,.rp-scene.in .rp-bubble,.rp-reflect.in>*{animation:none}
  .rp-face .f,.rp-progress li,.rp-choice{transition:none}
}
@media print{
  #screenPick,#screenIntro,#screenPlay,.rp-other{display:none!important}
  #endSum,#endDetail{display:block!important}
  .sl-thanks,#copyMsg{display:none!important}
}
@media (max-width:640px){
  #print{display:none}
}