:root { --rs-ink:#fffaf0; --rs-muted:rgba(255,250,240,.68); --rs-line:rgba(255,244,222,.16); --rs-warm:#e2c99d; }

html.rs-runtime-active, body.rs-runtime-active { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body.rs-runtime-active #app { width:100%; height:100%; }
body.rs-runtime-active .bg-image-layer, body.rs-runtime-active .noise-layer { display:none !important; }
body.rs-runtime-active #laxxm-support-widget { display:none !important; }
body.rs-runtime-active:has(.rs-runtime-shell) { background:radial-gradient(circle at 50% 30%,rgba(173,139,135,.2),transparent 26%),radial-gradient(circle at 50% 86%,rgba(110,91,119,.18),transparent 34%),linear-gradient(158deg,#151219,#281d2a 52%,#17131b); }
body.rs-runtime-active:has(.rs-runtime-shell)::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(17,13,20,.58),rgba(23,16,26,.72)),url('/assets/images/mini-games/recharge-style/play-background-desktop.png'); background-size:cover; background-position:center; background-repeat:no-repeat; }

.mini-test-home-card--ambient-choice .v2-card-bg { background:radial-gradient(circle at 50% 31%,rgba(242,214,162,.34),transparent 25%),linear-gradient(155deg,#1a151e,#302332); }
.mini-test-home-card--ambient-choice .v2-card-bg::before { inset:15% 18% 39%; border:0; border-radius:50%; transform:none; background:radial-gradient(circle,rgba(255,238,196,.95) 0 8%,rgba(226,185,133,.44) 31%,rgba(173,139,135,.13) 56%,transparent 72%); box-shadow:0 0 34px rgba(226,201,157,.34); }
.mini-test-home-card--ambient-choice .v2-card-bg::after { width:34%; height:1px; top:41%; left:33%; right:auto; border-radius:0; background:linear-gradient(90deg,transparent,rgba(255,246,222,.58),transparent); box-shadow:0 9px 18px rgba(255,233,192,.16); }
.mini-test-home-card--ambient-choice .mini-test-home-symbol { color:rgba(255,250,232,.92); text-shadow:0 0 18px rgba(255,226,170,.72); }
.mini-test-home-card--ambient-choice.v2-card--has-img .v2-card-img { object-fit:cover; }

.info-modal--recharge-style .mini-test-info-hero { background:radial-gradient(circle at 50% 45%,rgba(255,235,190,.5),transparent 18%),radial-gradient(circle at 50% 52%,rgba(211,172,135,.27),transparent 38%),linear-gradient(150deg,#18141c,#302434); }
.info-modal--recharge-style .mini-test-info-hero::before { content:''; position:absolute; inset:24% 32%; border:1px solid rgba(255,245,218,.24); border-radius:50%; box-shadow:0 0 32px rgba(232,199,145,.34),inset 0 0 18px rgba(255,244,216,.12); pointer-events:none; }
.info-modal--recharge-style .mini-test-info-hero::after { content:''; position:absolute; left:25%; right:25%; bottom:27%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,246,222,.5),transparent); pointer-events:none; }
.info-modal--recharge-style { overflow-x:hidden; }
.info-modal--recharge-style .info-modal-guide { margin:0 0 16px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.5; }
body:has(.info-modal--recharge-style) #laxxm-support-widget { display:none !important; }
.info-modal--recharge-style button { pointer-events:auto; touch-action:manipulation; }
.info-modal--recharge-style button > *, .info-modal--recharge-style .mini-test-info-hero > * { pointer-events:none; }
.info-modal--recharge-style .info-modal-hero:not(.is-image-fallback) img { width:100%; height:100%; object-fit:contain; }
.info-modal--recharge-style .info-modal-hero.is-image-fallback img { display:none; }
.info-modal--recharge-style .info-modal-hero.is-image-fallback [data-rs-modal-fallback] { color:rgba(255,250,232,.92); text-shadow:0 0 18px rgba(255,226,170,.72); }

.rs-runtime-shell, .rs-runtime-result, .rs-runtime-legacy { position:fixed; inset:0; z-index:20; color:var(--rs-ink); font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 50% 30%,rgba(173,139,135,.2),transparent 26%),radial-gradient(circle at 50% 86%,rgba(110,91,119,.18),transparent 34%),linear-gradient(158deg,#151219,#281d2a 52%,#17131b); }
.rs-runtime-shell { --rs-accent:var(--rs-warm); box-sizing:border-box; display:grid; grid-template-rows:52px minmax(120px,1fr) auto minmax(260px,38vh); gap:10px; width:min(100%,920px); height:100dvh; max-height:980px; margin:auto; padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); overflow:hidden; isolation:isolate; background:transparent; }
.rs-runtime-shell::before, .rs-runtime-shell::after { content:''; position:absolute; z-index:-1; pointer-events:none; }
.rs-runtime-shell::before { content:none; }
.rs-runtime-shell::after { width:70vw; height:70vw; max-width:700px; max-height:700px; left:50%; top:32%; border:1px solid rgba(255,245,222,.06); border-radius:50%; transform:translate(-50%,-50%); }

.rs-runtime-header { grid-row:1; display:flex; align-items:center; justify-content:space-between; min-height:44px; z-index:3; }
.rs-runtime-close { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:var(--rs-ink); background:rgba(12,10,15,.28); font-size:26px; line-height:1; cursor:pointer; pointer-events:auto; touch-action:manipulation; }
.rs-runtime-progress { display:flex; align-items:baseline; gap:5px; margin:0 4px 0 0; color:var(--rs-muted); font-size:13px; letter-spacing:.08em; }
.rs-runtime-progress strong { color:var(--rs-ink); font-size:17px; }

.rs-runtime-ambient { grid-row:2; align-self:center; justify-self:center; display:grid; place-items:center; position:relative; width:min(44vw,190px); aspect-ratio:1; }
.rs-runtime-orb { position:absolute; inset:13%; border-radius:50%; background:radial-gradient(circle at 42% 36%,rgba(255,249,226,.96) 0 3%,rgba(244,218,170,.7) 13%,rgba(194,157,138,.28) 38%,rgba(109,88,111,.08) 62%,transparent 72%); box-shadow:0 0 calc(18px + var(--rs-fill)*3px) rgba(226,201,157,calc(.14 + var(--rs-fill)*.035)); transform:scale(calc(.82 + var(--rs-fill)*.021)); transition:transform .28s ease,box-shadow .28s ease; }
.rs-runtime-orb::before { content:''; position:absolute; inset:5%; border:1px solid rgba(255,246,218,.13); border-radius:50%; }
.rs-runtime-orb i, .rs-runtime-orb span, .rs-runtime-orb b { position:absolute; display:block; border-radius:50%; pointer-events:none; }
.rs-runtime-orb i { width:12%; aspect-ratio:1; left:25%; top:29%; background:rgba(255,251,230,.65); filter:blur(2px); }
.rs-runtime-orb span { width:6%; aspect-ratio:1; right:27%; top:38%; background:rgba(255,238,198,.46); }
.rs-runtime-orb b { width:3%; aspect-ratio:1; left:47%; bottom:23%; background:rgba(255,245,222,.55); }
.rs-runtime-fill { position:absolute; inset:0; display:grid; place-items:center; }
.rs-runtime-fill i { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(255,245,222,.15); transform:rotate(calc(var(--i)*45deg)) translateY(calc(-1 * min(20vw,82px))); transition:background .2s ease,box-shadow .2s ease; }
.rs-runtime-fill i:nth-child(1){--i:0}.rs-runtime-fill i:nth-child(2){--i:1}.rs-runtime-fill i:nth-child(3){--i:2}.rs-runtime-fill i:nth-child(4){--i:3}.rs-runtime-fill i:nth-child(5){--i:4}.rs-runtime-fill i:nth-child(6){--i:5}.rs-runtime-fill i:nth-child(7){--i:6}.rs-runtime-fill i:nth-child(8){--i:7}
.rs-runtime-fill i.is-filled { background:rgba(255,238,198,.9); box-shadow:0 0 9px rgba(255,224,170,.72); }

.rs-runtime-copy { grid-row:3; align-self:end; text-align:center; min-height:74px; padding:0 6px; }
.rs-runtime-copy p { margin:0 0 6px; color:var(--rs-muted); font-size:clamp(12px,3.2vw,14px); line-height:1.35; }
.rs-runtime-copy h1 { max-width:680px; margin:0 auto; color:var(--rs-ink); font-size:clamp(20px,5.4vw,30px); line-height:1.22; letter-spacing:-.025em; outline:none; }

.rs-runtime-scenes { grid-row:4; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:9px; min-height:0; }
.rs-runtime-shell.is-final-choice .rs-runtime-scenes { grid-template-rows:1fr; align-self:stretch; }
.rs-runtime-scene { position:relative; display:grid; grid-template-rows:minmax(46px,1fr) auto; align-items:center; justify-items:center; gap:6px; min-width:0; min-height:44px; padding:12px 10px 13px; overflow:hidden; border:1px solid rgba(255,246,222,.15); border-radius:18px; color:var(--rs-ink); background:linear-gradient(160deg,rgba(255,250,235,.09),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.12); cursor:pointer; text-align:center; pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:border-color .18s ease,background .18s ease,transform .18s ease,opacity .18s ease; }
.rs-runtime-scene::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 25%,rgba(232,204,160,.08),transparent 50%); pointer-events:none; }
.rs-runtime-scene:hover { border-color:rgba(255,235,198,.34); background:linear-gradient(160deg,rgba(255,250,235,.13),rgba(255,255,255,.04)); }
.rs-runtime-scene:focus-visible, .rs-runtime-close:focus-visible, .rs-runtime-actions button:focus-visible, .rs-runtime-legacy button:focus-visible { outline:2px solid #f2d6a2; outline-offset:2px; }
.rs-runtime-scene:disabled { cursor:default; }
.rs-runtime-scene.is-selected { border-color:var(--rs-accent); background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rs-accent) 22%,transparent),rgba(255,255,255,.035)); transform:scale(.985); }
.rs-runtime-scene strong { position:relative; z-index:1; display:block; width:100%; color:inherit; font-size:clamp(13px,3.4vw,16px); font-weight:650; line-height:1.3; letter-spacing:-.018em; overflow:visible; white-space:normal; text-overflow:clip; pointer-events:none; }
.rs-runtime-scene__visual { position:relative; display:block; width:min(52%,68px); height:min(12vw,58px); min-height:42px; pointer-events:none; }
.rs-runtime-scene__visual i, .rs-runtime-scene__visual b, .rs-runtime-scene__visual em { position:absolute; display:block; pointer-events:none; }
.rs-runtime-scene__visual i { width:64%; height:54%; left:18%; bottom:8%; border:1px solid rgba(255,239,205,.35); border-radius:50% 50% 38% 38%; transform:rotate(-4deg); }
.rs-runtime-scene__visual b { width:10px; height:10px; left:20%; top:17%; border-radius:50%; background:rgba(255,237,199,.72); box-shadow:30px 12px 0 rgba(255,246,222,.25); }
.rs-runtime-scene__visual em { width:48%; height:1px; right:2%; bottom:22%; background:linear-gradient(90deg,transparent,rgba(255,240,207,.5)); transform:rotate(-8deg); }
.rs-runtime-scene[data-rs-scene-category="physical-activation"] .rs-runtime-scene__visual i { border-radius:3px; border-width:0 0 1px; transform:rotate(-12deg); }
.rs-runtime-scene[data-rs-scene-category="physical-activation"] .rs-runtime-scene__visual em { bottom:36%; transform:rotate(12deg); }
.rs-runtime-scene[data-rs-scene-category="co-present-connection"] .rs-runtime-scene__visual i { width:25%; left:20%; border-radius:4px 4px 10px 10px; box-shadow:26px 0 0 -1px rgba(255,255,255,.03),26px 0 0 0 rgba(255,239,205,.35); }
.rs-runtime-scene[data-rs-scene-category^="absorbing"] .rs-runtime-scene__visual i { inset:12% 22%; width:auto; height:auto; border-radius:50%; box-shadow:inset 0 0 16px rgba(255,232,192,.16); }
.rs-runtime-scene[data-rs-scene-category="familiar-routine"] .rs-runtime-scene__visual i { width:38%; left:31%; border-radius:4px 4px 14px 14px; }
.rs-runtime-scene[data-rs-scene-category="unfamiliar-environment"] .rs-runtime-scene__visual i { inset:8% 20%; width:auto; height:auto; border-radius:3px; transform:rotate(2deg); }
.rs-runtime-shell.is-absorbing .rs-runtime-orb { background:radial-gradient(circle,var(--rs-accent),rgba(226,201,157,.45) 28%,transparent 72%); animation:rs-absorb .26s ease both; }
.rs-runtime-shell.is-absorbing .rs-runtime-scene:not(.is-selected) { opacity:.45; }
@keyframes rs-absorb { 0%{transform:scale(calc(.82 + var(--rs-fill)*.021))} 55%{transform:scale(calc(.9 + var(--rs-fill)*.021))} 100%{transform:scale(calc(.84 + var(--rs-fill)*.021))} }

.rs-runtime-result { overflow-y:auto; overscroll-behavior:contain; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
.rs-runtime-result .rs-runtime-header { position:sticky; top:0; z-index:2; width:min(100%,760px); margin:0 auto; padding:0 2px; backdrop-filter:blur(10px); }
.rs-runtime-result article { width:min(100%,720px); margin:4px auto 0; padding:8px 0 36px; text-align:center; }
.rs-runtime-result-image { width:min(72vw,360px); aspect-ratio:1122/1402; margin:0 auto 18px; overflow:hidden; border:1px solid rgba(255,244,222,.14); border-radius:22px; background:rgba(255,255,255,.035); box-shadow:0 16px 44px rgba(0,0,0,.22); }
.rs-runtime-result-image img { display:block; width:100%; height:100%; object-fit:contain; }
.rs-runtime-result-symbol { --rs-result-color:#d9c49e; position:relative; width:min(48vw,210px); aspect-ratio:1; margin:0 auto 18px; border-radius:50%; background:radial-gradient(circle at 43% 38%,rgba(255,255,255,.8) 0 3%,var(--rs-result-color) 12%,color-mix(in srgb,var(--rs-result-color) 30%,transparent) 42%,transparent 70%); box-shadow:0 0 42px color-mix(in srgb,var(--rs-result-color) 30%,transparent); }
.rs-runtime-result-symbol[data-rs-result-symbol="quiet-well"]{--rs-result-color:#8190b6}.rs-runtime-result-symbol[data-rs-result-symbol="motion-spark"]{--rs-result-color:#85c899}.rs-runtime-result-symbol[data-rs-result-symbol="warm-circle"]{--rs-result-color:#f0ad94}.rs-runtime-result-symbol[data-rs-result-symbol="flow-dive"]{--rs-result-color:#9a82c7}.rs-runtime-result-symbol[data-rs-result-symbol="familiar-rhythm"]{--rs-result-color:#d8c3a5}.rs-runtime-result-symbol[data-rs-result-symbol="new-spark"]{--rs-result-color:#70ceca}
.rs-runtime-result-symbol i, .rs-runtime-result-symbol span, .rs-runtime-result-symbol b { position:absolute; display:block; pointer-events:none; }
.rs-runtime-result-symbol i { inset:23%; border:1px solid rgba(255,255,255,.36); border-radius:50%; }
.rs-runtime-result-symbol span { width:23%; height:1px; left:16%; bottom:30%; background:rgba(255,255,255,.45); transform:rotate(16deg); }
.rs-runtime-result-symbol b { width:8px; height:8px; right:22%; top:30%; border-radius:50%; background:rgba(255,255,255,.72); }
.rs-runtime-result__eyebrow { margin:0 0 8px; color:rgba(255,241,212,.62); font-size:12px; letter-spacing:.13em; }
.rs-runtime-result h1 { margin:0; color:var(--rs-ink); font-size:clamp(27px,7vw,42px); line-height:1.15; letter-spacing:-.035em; outline:none; }
.rs-runtime-result__summary { margin:14px auto 0; color:#f5dfb8; font-size:clamp(16px,4vw,19px); line-height:1.5; font-weight:650; }
.rs-runtime-result__body { margin:18px auto 0; color:rgba(255,250,240,.78); font-size:15px; line-height:1.75; text-align:left; }
.rs-runtime-result__details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0 0; text-align:left; }
.rs-runtime-result__details section { padding:16px; border:1px solid rgba(255,244,222,.12); border-radius:15px; background:rgba(255,255,255,.045); }
.rs-runtime-result__details h2 { margin:0 0 8px; color:#f3d7a6; font-size:12px; }
.rs-runtime-result__details p { margin:0; color:rgba(255,250,240,.72); font-size:13px; line-height:1.6; }
.rs-runtime-result__share-line { margin:18px 0 0; color:rgba(255,248,230,.82); font-size:14px; }
.rs-runtime-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:22px 0 0; }
.rs-runtime-actions button, .rs-runtime-legacy button { min-height:48px; padding:11px 14px; border:1px solid rgba(255,244,222,.16); border-radius:13px; color:var(--rs-ink); background:rgba(255,255,255,.07); font:inherit; cursor:pointer; pointer-events:auto; touch-action:manipulation; }
.rs-runtime-actions button:last-of-type { grid-column:1/-1; }
.rs-runtime-actions button > *, .rs-runtime-close > *, .rs-runtime-scene > * { pointer-events:none; }
.rs-runtime-toast { min-height:22px; margin:10px 0 0; color:#f3d7a6; opacity:0; transition:opacity .18s ease; }
.rs-runtime-toast.is-visible { opacity:1; }

.rs-runtime-legacy { display:grid; place-items:center; padding:24px; }
.rs-runtime-legacy section { width:min(100%,460px); padding:28px; border:1px solid rgba(255,244,222,.14); border-radius:22px; background:rgba(17,13,20,.66); text-align:center; }
.rs-runtime-legacy h1 { margin:8px 0 14px; font-size:28px; }
.rs-runtime-legacy p { color:var(--rs-muted); line-height:1.6; }
.rs-runtime-legacy button { width:100%; margin-top:9px; }

@media (max-width:560px) {
  .info-modal--recharge-style { max-height:calc(100dvh - 12px); padding-bottom:12px; }
  .info-modal--recharge-style .info-modal-hero { max-height:112px; margin-bottom:6px; }
  .info-modal--recharge-style .info-modal-title { margin-bottom:4px; font-size:18px; line-height:1.2; }
  .info-modal--recharge-style .info-modal-desc, .info-modal--recharge-style .info-modal-guide { margin-bottom:6px; font-size:11px; line-height:1.35; }
  .info-modal--recharge-style .info-modal-start { padding:10px 14px; font-size:13px; }
  .rs-runtime-shell { grid-template-rows:48px minmax(105px,.75fr) auto minmax(250px,40vh); gap:7px; padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); }
  .rs-runtime-ambient { width:min(41vw,160px); }
  .rs-runtime-scene { border-radius:15px; padding:9px 8px 11px; }
  .rs-runtime-scene__visual { width:min(48%,62px); height:46px; min-height:38px; }
  .rs-runtime-result__details { grid-template-columns:1fr; }
}

@media (orientation:portrait) and (max-width:1024px) {
  body.rs-runtime-active:has(.rs-runtime-shell)::before { background-image:linear-gradient(rgba(17,13,20,.58),rgba(23,16,26,.72)),url('/assets/images/mini-games/recharge-style/play-background-mobile.png'); }
}

@media (orientation:landscape) and (max-height:500px) {
  .info-modal--recharge-style { max-height:calc(100dvh - 10px); padding-bottom:8px; }
  .info-modal--recharge-style .info-modal-hero { max-height:54px; margin-bottom:3px; }
  .info-modal--recharge-style .info-modal-cat { margin:0 0 2px; }
  .info-modal--recharge-style .info-modal-title { margin-bottom:2px; font-size:15px; line-height:1.12; }
  .info-modal--recharge-style .info-modal-desc, .info-modal--recharge-style .info-modal-guide { margin-bottom:2px; font-size:9px; line-height:1.18; }
  .info-modal--recharge-style .info-modal-start { min-height:44px; padding:6px 10px; font-size:11px; }
  .rs-runtime-shell { grid-template-columns:minmax(178px,31%) minmax(0,1fr); grid-template-rows:48px minmax(0,1fr); gap:6px 14px; width:100%; max-width:1100px; padding:6px max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left)); }
  .rs-runtime-header { grid-column:1; grid-row:1; }
  .rs-runtime-ambient { grid-column:1; grid-row:2; align-self:start; width:min(19vh,74px); margin:0 auto; transform:translateY(-2px); }
  .rs-runtime-fill i { transform:rotate(calc(var(--i)*45deg)) translateY(-34px); }
  .rs-runtime-copy { grid-column:1; grid-row:2; align-self:end; min-height:0; padding:0 2px 7px; }
  .rs-runtime-copy p { margin-bottom:3px; font-size:10px; }
  .rs-runtime-copy h1 { font-size:clamp(15px,2.3vw,21px); }
  .rs-runtime-scenes, .rs-runtime-shell.is-final-choice .rs-runtime-scenes { grid-column:2; grid-row:1/3; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; }
  .rs-runtime-shell.is-final-choice .rs-runtime-scenes { align-self:stretch; }
  .rs-runtime-scene { grid-template-rows:minmax(30px,1fr) auto; gap:2px; border-radius:12px; padding:6px 8px 7px; }
  .rs-runtime-scene__visual { width:48px; height:34px; min-height:30px; }
  .rs-runtime-scene strong { font-size:clamp(11px,1.8vw,14px); line-height:1.22; }
}

@media (min-width:900px) and (min-height:700px) {
  .rs-runtime-shell { margin:auto; border-left:1px solid rgba(255,255,255,.04); border-right:1px solid rgba(255,255,255,.04); }
  .rs-runtime-scenes { min-height:300px; }
  .rs-runtime-scene__visual { height:64px; }
}

@media (prefers-reduced-motion:reduce) {
  .rs-runtime-orb, .rs-runtime-scene, .rs-runtime-toast { transition:none !important; animation:none !important; }
  .rs-runtime-shell.is-absorbing .rs-runtime-orb { animation:none; }
}