/* R47: the existing first-run/help owner, with the game's arcade visual language.
   Load after the immutable Pack333 first-run CSS; no CDN asset changes. */
#sk-r40r42-root { --r47-onboarding-scale:1.25; font-family:"Atkinson Hyperlegible Next",Arial,sans-serif; color:#f4f0df; }
#sk-r40r42-root .sk-r40r42-modal {
  display:flex; align-items:center; justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));
  background:radial-gradient(ellipse at 18% 0%,#17364a 0%,#091728 46%,#050a12 100%)!important;
  backdrop-filter:none; -webkit-backdrop-filter:none; overflow:auto; overscroll-behavior:contain;
  touch-action:pan-y!important; isolation:isolate; scrollbar-color:#a9bccb #091728;
}
#sk-r40r42-root .sk-r40r42-panel {
  flex:0 1 1180px; width:min(1180px,100%); min-width:0; max-height:none;
  padding:clamp(24px,3vw,48px); margin:auto; overflow:visible;
  border:1px solid #54616a!important; border-top:3px solid #f1c76b!important;
  border-radius:3px!important; background:#091728!important;
  box-shadow:0 24px 90px #0007!important; font-size:calc(17px * var(--r47-onboarding-scale));
  line-height:1.5; touch-action:pan-y!important;
}
#sk-r40r42-root .sk-r40r42-panel::before { display:none; }
#sk-r40r42-root .sk-r40r42-panel * { box-sizing:border-box; font-family:inherit; text-shadow:none!important; letter-spacing:normal; }
#sk-r40r42-root .sk-r40r42-title {
  margin:0 0 .45em; max-width:26ch; text-align:left; font-size:calc(clamp(26px,3.3vw,40px) * var(--r47-onboarding-scale));
  line-height:1.14; font-weight:750; color:#f4f0df!important; overflow-wrap:anywhere;
}
#sk-r40r42-root .sk-r40r42-subtitle { max-width:65ch; margin:0; text-align:left; color:#c4d2dc!important; font-size:1em; font-weight:400; line-height:1.5; }
#sk-r40r42-root .r47-onboarding-masthead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; border-bottom:1px solid #3d5263; padding-bottom:20px; margin-bottom:28px; }
#sk-r40r42-root .r47-onboarding-brand { font-size:calc(20px * var(--r47-onboarding-scale)); font-weight:800; color:#f4f0df; letter-spacing:.08em; line-height:1.2; }
#sk-r40r42-root .r47-onboarding-brand b { color:#f1c76b; }
#sk-r40r42-root .r47-onboarding-edition { color:#a9bccb; font-size:calc(12px * var(--r47-onboarding-scale)); font-weight:650; letter-spacing:.07em; }
#sk-r40r42-root .r47-onboarding-eyebrow { margin:0 0 .65em; font-size:calc(12px * var(--r47-onboarding-scale)); font-weight:700; letter-spacing:.08em; color:#58d8ed; }
#sk-r40r42-root .r47-onboarding-basics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:28px 0 0; padding:0; list-style:none; border-block:1px solid #3d5263; }
#sk-r40r42-root .r47-onboarding-basics li { min-width:0; padding:22px; border-left:1px solid #3d5263; background:linear-gradient(160deg,#112a3b,#091728 90%); }
#sk-r40r42-root .r47-onboarding-basics li:first-child { border-left:0; padding-left:0; background:none; }
#sk-r40r42-root .r47-onboarding-basics li:last-child { padding-right:0; }
#sk-r40r42-root .r47-onboarding-rule-head { display:flex; justify-content:space-between; align-items:center; color:#58d8ed; margin-bottom:14px; }
#sk-r40r42-root .r47-onboarding-rule-head svg { width:44px; height:44px; flex:none; }
#sk-r40r42-root .r47-onboarding-rule-head span { font-size:calc(18px * var(--r47-onboarding-scale)); color:#a9bccb; font-weight:600; }
#sk-r40r42-root .r47-onboarding-basics h2 { margin:0 0 .5em; font-size:1.08em; line-height:1.25; color:#f4f0df; font-weight:700; overflow-wrap:anywhere; }
#sk-r40r42-root .r47-onboarding-basics p { margin:0; color:#c4d2dc; font-size:.94em; line-height:1.55; overflow-wrap:anywhere; }
#sk-r40r42-root .sk-r40r42-kbd { display:inline; padding:0 .2em; margin:0; border:0; border-bottom:1px solid #7394ab; border-radius:0; background:none; color:#f4f0df; font-weight:700; white-space:normal; overflow-wrap:anywhere; }
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-actions { position:static; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:12px; margin:24px 0 0; padding:0!important; background:none; }
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn {
  width:auto; min-width:48px; min-height:54px; max-width:100%; padding:12px 24px;
  border:1px solid #a9bccb!important; border-radius:3px!important; color:#f4f0df;
  background:#142c42!important; box-shadow:none!important; font-size:1em; line-height:1.35; font-weight:650;
  text-transform:none; white-space:normal; overflow-wrap:anywhere; transform:none; touch-action:manipulation!important;
}
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn.r47-onboarding-primary,
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn.green,
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn.gold { background:linear-gradient(#ffe0a0,#f1c76b)!important; border-color:#f1c76b!important; color:#091728!important; font-weight:750; }
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn.r47-onboarding-tertiary { background:transparent!important; border-color:transparent!important; color:#c4d2dc; padding-inline:14px; text-decoration:underline; text-underline-offset:4px; }
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn:focus-visible { outline:3px solid #58d8ed!important; outline-offset:4px; }
#sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn:hover { filter:brightness(1.1); }
#sk-r40r42-root .r47-onboarding-note { margin:14px 0 0; color:#a9bccb; font-size:calc(14px * var(--r47-onboarding-scale)); line-height:1.5; }
#sk-r40r42-root .sk-r40r42-list { max-width:none; margin:24px 0; gap:0; grid-template-columns:1fr; }
#sk-r40r42-root .sk-r40r42-list li { border:0!important; border-bottom:1px solid #3d5263!important; border-radius:0; box-shadow:none; background:none!important; padding:12px 0; color:#c4d2dc; font-size:1em; line-height:1.55; }
/* R51: a visible continuation cue for the actual fullscreen scroll surface.
   Fixed positioning keeps it visible at the viewport edge without affecting
   scrollHeight. It cannot intercept swipes or cover a button's hit target. */
#sk-r40r42-root .r51-onboarding-scroll-cue {
  position:fixed; inset:auto 0 0; z-index:2147483647!important;
  display:flex; justify-content:center; align-items:flex-end;
  padding:24px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:linear-gradient(transparent,#050a12ee 70%); pointer-events:none!important;
  font-size:calc(16px * var(--r47-onboarding-scale)); line-height:1.35; text-align:center;
}
#sk-r40r42-root .r51-onboarding-scroll-cue[hidden] { display:none!important; }
#sk-r40r42-root .r51-onboarding-scroll-cue span {
  display:block; max-width:100%; padding:8px 16px; border:1px solid #f1c76b;
  border-radius:3px; background:#091728; color:#f4f0df; font-weight:650;
  box-shadow:0 4px 16px #0008; overflow-wrap:anywhere;
}
#sk-r40r42-root .r51-onboarding-scroll-cue b { color:#f1c76b; margin-right:.25em; }
/* Deliberately scroll at short heights or 200% text. Never shrink the text to fit. */
@media(max-width:900px) {
  #sk-r40r42-root .sk-r40r42-modal { padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
  #sk-r40r42-root .sk-r40r42-panel { padding:24px; }
  #sk-r40r42-root .r47-onboarding-masthead { margin-bottom:20px; padding-bottom:16px; }
  #sk-r40r42-root .r47-onboarding-basics { margin-top:22px; }
  #sk-r40r42-root .r47-onboarding-basics li { padding:16px; }
}
@media(max-width:660px) {
  #sk-r40r42-root .r47-onboarding-basics { grid-template-columns:1fr; }
  #sk-r40r42-root .r47-onboarding-basics li,
  #sk-r40r42-root .r47-onboarding-basics li:first-child,
  #sk-r40r42-root .r47-onboarding-basics li:last-child { padding:18px 0; border-left:0; border-top:1px solid #3d5263; background:none; }
  #sk-r40r42-root .r47-onboarding-basics li:first-child { border-top:0; }
  #sk-r40r42-root .r47-onboarding-rule-head { margin-bottom:8px; }
  #sk-r40r42-root .sk-r40r42-panel .sk-r40r42-btn { flex:1 1 100%; }
}
@media(max-height:620px) {
  #sk-r40r42-root .sk-r40r42-modal { align-items:flex-start; }
  #sk-r40r42-root .sk-r40r42-panel { flex:none; margin:0 auto; max-height:none; overflow:visible; }
}
@media(prefers-reduced-motion:reduce) {
  #sk-r40r42-root .sk-r40r42-panel *,#sk-r40r42-root .sk-r40r42-modal { animation:none!important; transition:none!important; }
}
