/* One persistent illustrated street; the camera follows the investor. */
body.tutorial-opening-active {overflow:hidden}
body.tutorial-market-pending #market-cards .stock-card {opacity:0!important;pointer-events:none}
body.tutorial-market-dealing #market-cards {overflow:hidden}
.ri-opening {position:fixed;inset:0;z-index:10000;overflow:hidden;background:#f2e7cc;color:#1c1b18;font-family:Body,Poppins,Arial,sans-serif;isolation:isolate}
.ri-opening * {box-sizing:border-box}
.ri-opening-header {position:absolute;top:max(17px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;gap:20px;z-index:8}
.ri-opening-brand {font-family:Display,Poppins,Arial,sans-serif;font-size:23px;font-weight:700;letter-spacing:-.6px;line-height:.89;padding-bottom:8px;border-bottom:5px solid #f4d774}
.ri-opening button {font:700 14px/1.2 Body,Poppins,Arial,sans-serif;color:#1c1b18;cursor:pointer;transition:background .15s,translate .15s}
.ri-opening button:focus-visible {outline:3px solid #705580;outline-offset:5px}
/* The button is focused for assistive technology on load; show its focus ring
   when keyboard navigation begins rather than as a permanent second border. */
body[data-theme="playful-print"] .ri-opening-begin[data-auto-focus]:focus-visible {outline:none}
.ri-opening-header-actions {display:flex;align-items:center;gap:8px}
.ri-opening-layout,.ri-opening-sound {display:grid;place-items:center;width:44px;height:44px;padding:8px;border:2px solid #1c1b18;border-radius:9px;background:#fffdf7;box-shadow:2px 3px 0 #1c1b18}
.ri-opening-layout svg,.ri-opening-sound svg {display:block;width:100%;height:100%}
.ri-opening-layout:hover,.ri-opening-sound:hover {background:#f4d774}
.ri-opening-layout[hidden],.ri-opening-sound[hidden] {display:none}
.ri-opening-skip {min-height:44px;padding:9px 12px;border:2px solid #1c1b18;border-radius:9px;background:#fffdf7;box-shadow:2px 3px 0 #1c1b18}
.ri-opening-skip:hover {background:#f4d774}
.ri-opening-copy {position:absolute;top:clamp(96px,13vh,146px);left:6%;right:6%;z-index:6;text-align:center;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .28s ease,translate .28s ease,visibility 0s linear .28s;pointer-events:none}
.ri-opening-copy h1,.ri-opening-copy h2 {display:block;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:#1c1b18;font-family:Display,Poppins,Arial,sans-serif;font-size:clamp(28px,4vw,51px);font-weight:700;letter-spacing:-1.5px;line-height:1.1;text-wrap:balance}
.ri-opening-copy p {font-size:clamp(14px,1.8vw,19px);line-height:1.5;margin:13px 0 0;text-wrap:balance}
.ri-opening-gift-copy h1 {display:inline-block;background:#fffdf7;border:3px solid #1c1b18;border-radius:4px;padding:10px 16px;box-shadow:4px 4px 0 #1c1b18;transform:rotate(-.8deg)}
.ri-opening-market-copy h2 {font-size:clamp(29px,4.7vw,57px);background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;padding:0!important}
.ri-opening-market-copy del {text-decoration-color:#bd493d;text-decoration-thickness:4px;color:#766d5e}
.ri-opening[data-copy="gift"] .ri-opening-gift-copy,.ri-opening[data-copy="market"] .ri-opening-market-copy {opacity:1;visibility:visible;translate:0 0;transition:opacity .4s ease .28s,translate .4s ease .28s,visibility 0s linear .28s}
.ri-opening[data-phase="entering"] .ri-opening-copy {opacity:0;visibility:hidden;translate:0 -14px;transition:opacity .4s ease,translate .65s ease,visibility 0s linear .4s}
.ri-opening-stage {position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ri-opening-world {position:absolute;left:0;top:0;width:1960px;height:600px;transform-origin:0 0}
.ri-opening-ground {position:absolute;left:-220px;top:500px;width:2310px;height:4px;border-radius:50%;background:#1c1b18;transform:rotate(-.15deg)}
.ri-opening-grandma {position:absolute;left:330px;top:158px;width:210px;height:342px;transform:rotate(.3deg);transform-origin:center bottom}
.ri-opening-grandma-cutout {position:absolute;left:0;top:0;width:135.6px;height:272px;overflow:hidden}
.ri-opening-grandma-image {position:absolute;left:-270.8px;top:-44.8px;width:501.6px!important;height:501.6px!important;max-width:none!important}
.ri-opening-grandma-leg {position:absolute;top:264px;width:7px;height:79px;background:#1c1b18;border-radius:5px;transform-origin:50% 0}
.ri-opening-grandma-leg.leg-left {left:49px;rotate:8deg}
.ri-opening-grandma-leg.leg-right {left:87px;rotate:-7deg}
.ri-opening-grandma-arm {position:absolute;left:11px;top:159px;width:7px;height:74px;background:#1c1b18;border-radius:5px;rotate:53deg;transform-origin:50% 0}
.ri-opening-purse-cutout {position:absolute;left:142px;top:202px;width:56.8px;height:78px;overflow:hidden;rotate:-1deg}
.ri-opening-purse-image {position:absolute;left:-412px;top:-247.6px;width:501.6px!important;height:501.6px!important;max-width:none!important}
.ri-opening-investor {position:absolute;left:0;top:265px;width:96px;height:235px;transform-origin:50% 100%;z-index:4;will-change:transform}
.ri-opening-investor-cutout {position:absolute;left:0;top:0;width:81px;height:165px;overflow:hidden;transform-origin:50% 100%}
.ri-opening-investor-image {position:absolute;left:50%;bottom:-10px;width:263px!important;height:235px!important;max-width:none!important;object-fit:contain;transform:translateX(-50%);transform-origin:50% 100%}
.ri-opening-leg {position:absolute;top:158px;width:7px;height:78px;background:#1c1b18;border-radius:5px;transform-origin:50% 0}
.ri-opening-investor .leg-left {left:22px;rotate:9deg}
.ri-opening-investor .leg-right {left:57px;rotate:-9deg}
.ri-opening-arm {position:absolute;top:84px;width:6px;height:64px;background:#1c1b18;border-radius:5px;transform-origin:50% 0}
.ri-opening-investor .arm-left {left:8px;rotate:18deg}
.ri-opening-investor .arm-right {left:74px;rotate:-61deg;height:52px}
.ri-opening-investor.is-walking .leg-left {animation:ri-opening-leg-left .5s ease-in-out infinite alternate}
.ri-opening-investor.is-walking .leg-right {animation:ri-opening-leg-right .5s ease-in-out infinite alternate}
.ri-opening-investor.is-walking .arm-left {animation:ri-opening-arm .5s ease-in-out infinite alternate}
.ri-opening-investor.is-walking .ri-opening-investor-image {animation:ri-opening-investor-walk .5s ease-in-out infinite alternate}
.ri-opening-coin {position:absolute;left:0;top:0;z-index:5;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border:3px solid #1c1b18;border-radius:50%;background:#f4d774;color:#1c1b18;font:700 21px/1 Arial,sans-serif;transform-origin:50% 50%;box-shadow:inset 0 0 0 3px #d5ac47,1px 2px 0 #1c1b18;will-change:transform}
.ri-opening-exchange {position:absolute;left:1060px;top:88px;width:480px;height:412px;z-index:2}
.ri-opening-exchange-image {position:absolute;inset:0;width:480px!important;height:412px!important;max-width:none!important}
.ri-opening-balloon {position:absolute;inset:0;width:480px!important;height:412px!important;max-width:none!important;pointer-events:none;animation:ri-balloon-sway 1.4s ease-in-out infinite alternate;animation-play-state:paused}
.ri-opening-balloon.balloon-green {animation-delay:-.2s}
.ri-opening-balloon.balloon-gold {animation-delay:-.55s}
.ri-opening-balloon.balloon-plum {animation-delay:-.85s}
.ri-opening-balloon.balloon-blue {animation-delay:-1.1s}
.ri-opening[data-phase="journey"] .ri-opening-balloon,.ri-opening[data-phase="market"] .ri-opening-balloon {animation-play-state:running}
.ri-opening[data-phase="entering"] .ri-opening-balloon {animation:ri-balloon-fly 1.65s ease-in forwards}
.ri-opening[data-phase="entering"] .balloon-gold {animation-delay:.06s}
.ri-opening[data-phase="entering"] .balloon-plum {animation-delay:.12s}
.ri-opening[data-phase="entering"] .balloon-blue {animation-delay:.18s}
.ri-opening-exchange-sign {position:absolute;left:7%;right:7%;top:29%;height:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fffdf7;text-align:center;transform:rotate(.3deg);font-family:Display,Poppins,Arial,sans-serif;font-weight:700;line-height:1}
.ri-opening-exchange-sign>span {font-size:22px;letter-spacing:1.1px}
.ri-opening-exchange-sign>strong {font-size:25px;font-weight:700;white-space:nowrap}
.ri-opening-exchange-sign del {color:#f6d7c7;text-decoration-color:#1c1b18;text-decoration-thickness:3px}
.ri-opening-footer {position:absolute;left:16px;right:16px;bottom:max(27px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:13px;z-index:9;text-align:center}
.ri-opening-footer p {margin:0;font-size:14px;line-height:1.4;min-height:20px;color:#5e594c}
.ri-opening-enter,.ri-opening-begin {min-height:48px;padding:11px 20px;border:3px solid #1c1b18;border-radius:999px;background:#f8dc73;box-shadow:none;font-size:17px!important;font-weight:500!important;display:flex;gap:17px;align-items:center;justify-content:center}
.ri-opening-begin,.ri-opening-enter {position:absolute;z-index:9;transform:translateX(-50%);white-space:nowrap}
.ri-opening :is(.ri-opening-begin,.ri-opening-enter):active:not(:disabled) {transform:translateX(-50%) translateY(2px)}
.ri-opening-enter[hidden],.ri-opening-begin[hidden] {display:none}
.ri-opening-space-hint {position:absolute;z-index:9;display:none;align-items:center;justify-content:center;gap:7px;margin:0;transform:translateX(-50%);white-space:nowrap;color:#5e594c;font:500 13px/1.4 Body,Poppins,Arial,sans-serif;pointer-events:none;animation:ri-space-hint-float 2.4s ease-in-out infinite}
.ri-opening[data-phase="ready"] .ri-opening-space-hint {display:flex}
.ri-opening-space-hint kbd {display:inline-block;min-width:88px;padding:3px 12px;border:2px solid #5e594c;border-radius:5px;background:#fffdf7;color:#1c1b18;box-shadow:0 3px 0 #9b927e;font:inherit;text-align:center;animation:ri-space-key-press 2.4s ease-in-out infinite}
@keyframes ri-space-hint-float {0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes ri-space-key-press {0%,35%,70%,100%{transform:translateY(0);box-shadow:0 3px 0 #9b927e}45%,58%{transform:translateY(3px);box-shadow:0 0 0 #9b927e}}
.ri-opening-enter>span,.ri-opening-begin>span {font-size:25px;line-height:1}
.ri-opening-enter:hover:not(:disabled),.ri-opening-begin:hover:not(:disabled) {background:#f9e594;translate:0 -1px}
.ri-opening-enter:disabled,.ri-opening-begin:disabled {cursor:default;opacity:1}
.ri-opening[data-phase="entering"] .ri-opening-footer,.ri-opening[data-phase="entering"] .ri-opening-brand {opacity:0;transition:opacity .55s ease;pointer-events:none}
.ri-opening[data-phase="loading"] .ri-opening-stage {opacity:0}
.ri-opening[data-phase="ready"] .ri-opening-stage,.ri-opening[data-phase="journey"] .ri-opening-stage {opacity:1;transition:opacity .45s ease}
@keyframes ri-opening-leg-left {from{rotate:24deg}to{rotate:-22deg}}
@keyframes ri-opening-leg-right {from{rotate:-22deg}to{rotate:24deg}}
@keyframes ri-opening-arm {from{rotate:-20deg}to{rotate:24deg}}
@keyframes ri-opening-bob {from{translate:0 -1px;rotate:-1deg}to{translate:0 2px;rotate:1deg}}
@keyframes ri-opening-investor-walk {from{transform:translateX(-50%) translateY(0) rotate(-3deg)}to{transform:translateX(-50%) translateY(-4px) rotate(3deg)}}
@keyframes ri-balloon-sway {from{transform:translate(-3px,1px)}to{transform:translate(4px,-4px)}}
@keyframes ri-balloon-fly {from{transform:translate(0,0);opacity:1}to{transform:translate(24px,-520px);opacity:0}}
@media(max-width:600px) {
  .ri-opening-header {left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
  .ri-opening-brand {font-size:20px}
  .ri-opening-copy {left:5%;right:5%;top:105px}
  .ri-opening-copy h1,.ri-opening-copy h2 {font-size:29px;letter-spacing:-1px}
  .ri-opening-gift-copy h1 {font-size:27px;padding:10px 12px}
  .ri-opening-copy p {font-size:14px;margin-top:13px}
  .ri-opening-market-copy h2 {font-size:34px}
  .ri-opening-footer {bottom:max(25px,env(safe-area-inset-bottom))}
  .ri-opening-footer p {font-size:12px}
}
@media(max-width:360px) {
  .ri-opening-header {left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));gap:6px}
  .ri-opening-header-actions {gap:4px}
  .ri-opening-skip {padding-inline:8px}
  .ri-opening-brand {font-size:17px}
}
@media(max-height:550px) {
  .ri-opening-header {top:12px}
  .ri-opening-brand {font-size:17px}
  .ri-opening-copy {top:76px}
  .ri-opening-copy h1,.ri-opening-copy h2 {font-size:25px}
  .ri-opening-gift-copy h1 {padding:6px 11px}
  .ri-opening-copy p {margin-top:8px;font-size:12px}
  .ri-opening-footer {bottom:15px;gap:7px}
  .ri-opening-footer p {font-size:11px}
  .ri-opening-enter,.ri-opening-begin {min-height:44px;font-size:14px!important;padding:8px 14px}
}
@media(prefers-reduced-motion:reduce) {
  .ri-opening *, .ri-opening *::before,.ri-opening *::after {animation:none!important;transition:none!important}
}

/* Doodle street: each piece shares the approved drawing's 1200 × 700 frame. */
.ri-opening-street,.ri-opening-exchange {position:absolute;left:470px;top:-50px;width:1200px;height:700px;max-width:none}
.ri-opening-street {left:-2000px;z-index:1;width:4070px}
.ri-opening-home {position:absolute;left:-2000px;top:-50px;width:6000px;height:700px;z-index:3;pointer-events:none}
.ri-opening-exchange {z-index:2}
/* Keep the distant high-rise to the right of the responsive exchange. */
.ri-opening-exchange::before {content:'';position:absolute;left:990px;top:0;width:350px;height:700px;background:url('assets/intro-doodle-highrise.svg') no-repeat center/contain;z-index:-1;pointer-events:none}
.ri-opening[data-phase="market"] .ri-opening-world {transition:transform .4s ease}
.ri-opening-bubble {position:absolute;left:50%;z-index:7;transform:translate(-50%,-100%);width:max-content;max-width:min(380px,calc(100% - 32px));margin:0;padding:12px 16px;border:3px solid #242223;border-radius:13px;background:#fffdf7;color:#242223;font:600 clamp(17px,2vw,21px)/1.3 Body,Poppins,Arial,sans-serif;text-align:center;box-shadow:2px 3px 0 #242223;transition:opacity .25s ease;pointer-events:none}
.ri-opening-bubble::after {content:'';position:absolute;left:calc(50% - var(--speech-tail-offset,0px));bottom:-12px;width:16px;height:16px;background:#fffdf7;border-right:3px solid #242223;border-bottom:3px solid #242223;transform:translateX(-50%) rotate(45deg)}
.ri-opening-bubble[data-kind="objective"] {transform:none;max-width:none;padding:16px 17px;border:4px solid #242223;border-radius:10px;background:#f4d774;color:#1c1b18;box-shadow:5px 6px 0 #242223;font-size:clamp(16px,2vw,21px);font-weight:700;line-height:1.25;text-align:left;overflow:auto;pointer-events:auto}
.ri-opening-goal-title {display:block;margin:0 0 10px;color:#1c1b18;font:700 clamp(23px,3.1vw,34px)/1.05 Display,Poppins,Arial,sans-serif;letter-spacing:-.02em;text-align:center}
.ri-opening-bubble[data-kind="objective"] ul {margin:0;padding:0 0 0 1.1em}
.ri-opening-bubble[data-kind="objective"] li+li {margin-top:.55em}
.ri-opening-bubble[data-kind="objective"]::after {display:none}
@media(max-width:500px) {.ri-opening-bubble[data-kind="objective"] {padding:12px 12px;font-size:16px}.ri-opening-goal-title {font-size:23px}}
.ri-opening-bubble[hidden] {display:none}
.ri-opening[data-phase="entering"] .ri-opening-bubble {opacity:0}
.ri-opening-entry-veil {position:fixed;inset:0;z-index:20;background:#eae7dc;opacity:0;pointer-events:none}
.ri-opening-exchange-image,.ri-opening-balloon {width:1200px!important;height:700px!important}
.ri-opening-investor {top:315px;width:220.5px;height:273px}
.ri-opening-investor-image {left:0;bottom:0;width:220.5px!important;height:273px!important;transform:none;object-fit:contain}
.ri-opening-investor.is-facing-left .ri-opening-investor-image {scale:-1 1}
.ri-opening-investor.is-looking .ri-opening-investor-image {transform:rotate(-4deg)}
.ri-opening-investor.is-walking .ri-opening-investor-image {animation:ri-doodle-investor-walk .5s ease-in-out infinite alternate}
.ri-opening-coin {width:78px;height:78px;border:0;border-radius:0;background:none;box-shadow:none}
.ri-opening-grandma {left:0;top:197px;width:230px;height:391px;z-index:4;object-fit:contain;transform-origin:82px 100%;will-change:transform}
.ri-opening-grandma[hidden] {display:none}
.ri-opening-grandma.is-walking {animation:ri-grandma-walk .5s ease-in-out infinite alternate}
@keyframes ri-grandma-walk {from{translate:0 0;rotate:-2deg}to{translate:0 -4px;rotate:2deg}}
@keyframes ri-doodle-investor-walk {from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-4px) rotate(3deg)}}