body.dora-game { background:#eef7ed; color:#45636b; }body.dora-game .site-header,body.dora-game > footer { display:none; }body.dora-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.dr-shell { min-height:100dvh; padding:6px 0 18px; }.dr-shell * { box-sizing:border-box; letter-spacing:0; }.dr-shell h1,.dr-shell h2,.dr-shell h3,.dr-shell p { margin-top:0; }.dr-shell h2:focus { outline:none; }
.dr-shell button,.dr-shell .button,.dr-shell summary { min-width:48px; min-height:48px; font:inherit; line-height:1.35; border-radius:6px; }.dr-shell button { cursor:pointer; }.dr-shell button:disabled { cursor:default; }.dr-shell button:focus-visible,.dr-shell input:focus-visible,.dr-shell a:focus-visible,.dr-shell summary:focus-visible { outline:3px solid #aa8bc3; outline-offset:3px; }
.dr-shell .dr-primary { padding:10px 17px; color:white; background:#4d9596; border:2px solid #3b7e82; box-shadow:0 3px 0 #386c74; font-size:18px; font-weight:750; }.dr-primary:hover { background:#3b8387; }.dr-primary:disabled { opacity:.55; box-shadow:none; }.dr-shell .dr-secondary { padding:9px 13px; color:#557b7c; background:#fffdf2; border:2px solid #bfd0bc; font-size:16px; }.dr-secondary:disabled { opacity:.55; }
.dr-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; align-items:center; gap:10px; min-height:65px; padding-bottom:7px; }.dr-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 3px; }.dr-toolbar span { font-size:13px; }.dr-toolbar .dr-back { font-size:14px; padding:8px; color:#79384b; white-space:nowrap; }.dr-toolbar .dr-sound { padding:0; font-size:23px; }.dr-motion { display:flex; align-items:center; gap:5px; min-width:48px; min-height:48px; font-size:13px; }.dr-motion input { width:22px; height:22px; accent-color:#4d9596; }
.dr-intro { text-align:center; }.dr-intro > span { display:block; font-weight:700; color:#a38b64; margin:15px 0 9px; }.dr-intro h2 { font-size:33px; color:#598b82; margin:0 0 12px; }.dr-intro p { font-size:19px; line-height:1.5; max-width:840px; margin:0 auto 17px; }.dr-cover-image { display:block; width:100%; height:auto; }.dr-intro > .dr-cover-image { max-height:420px; object-fit:contain; margin:20px auto 12px; }.card-art .dr-cover-image { width:100%; height:100%; object-fit:cover; background:#e0edd2; }.dr-intro .dr-intro-note { font-size:15px; }
.dr-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:35px; padding:4px 0; }.dr-heading > span { font-size:15px; font-weight:750; color:#a28e68; }.dr-heading h2 { font-family:inherit; font-size:23px; color:#598b82; margin:0; }.dr-condition { min-height:86px; margin:4px 0 9px; padding:8px 12px; background:#fffdf2; border-left:4px solid #d7c28c; border-radius:4px; }.dr-condition p { font-size:18px; line-height:1.35; margin:0 0 5px; }.dr-condition > strong { display:block; font-size:19px; line-height:1.3; color:#5b7d7d; }.dr-question-hinted > strong { text-decoration:underline; text-decoration-color:#c9ac6d; text-underline-offset:4px; }
.dr-layout { display:grid; grid-template-columns:minmax(0,1fr) 205px; gap:16px; align-items:start; min-height:326px; }.dr-map-workspace { min-width:0; }.dr-map { padding:5px 13px 0; border:2px solid #d7c99d; border-left:7px solid #e7d9af; border-right:7px solid #e7d9af; border-radius:7px; background:#fff8df; box-shadow:0 3px 0 #dedbbd; }.dr-map-top { display:flex; align-items:center; justify-content:space-between; min-height:34px; gap:10px; margin-bottom:3px; }.dr-map-face { display:block; width:74px; height:35px; flex:none; }.dr-map-top > span { font-size:13px; font-weight:650; color:#9b9678; }.dr-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.dr-map-step { min-width:0; padding:5px 7px 0; border:2px solid #e0d8bb; border-radius:5px; background:#fffdf2; }.dr-step-label { display:flex; justify-content:space-between; gap:7px; align-items:center; min-height:20px; margin-bottom:3px; }.dr-step-label strong { font-size:13px; color:#9d9070; }.dr-step-label > span { font-size:11px; color:#89a78c; }.dr-shell .dr-slot { display:block; width:100%; min-height:56px; border:2px dashed #d9d5bc; background:#fffdf2; text-align:left; padding:6px 8px; font-size:17px; line-height:1.3; color:#526d73; }.dr-slot:disabled { opacity:1; border-style:solid; border-color:transparent; }.dr-empty-slot { color:#a4ab9c; font-size:15px; }.dr-step-note { min-height:29px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:12px; color:#7f9d85; padding:3px 0; line-height:1.3; }.dr-step-note strong { color:#60907c; font-size:15px; }.dr-step-active { border-color:#8ab5bb; box-shadow:0 0 0 2px #c4dcd7; }.dr-step-active .dr-step-label > span { color:#668f9e; font-weight:750; }.dr-step-done { border-color:#a9c69d; background:#f3f8e8; }.dr-step-hinted .dr-step-label strong { text-decoration:underline; text-decoration-color:#c9ac6d; text-underline-offset:3px; }
.dr-route-view { position:relative; height:81px; margin-top:2px; }.dr-route-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.dr-explorers { position:absolute; top:0; left:clamp(0px,calc(var(--route-position) - 55px),calc(100% - 110px)); width:110px; height:76px; display:flex; align-items:end; justify-content:center; gap:2px; }.dr-explorers .dr-dora { height:76px; width:48px; }.dr-explorers .dr-boots { height:68px; width:48px; }.dr-start-label,.dr-end-label { position:absolute; bottom:0; font-size:9px; color:#9eaa86; line-height:1; }.dr-start-label { left:5%; }.dr-end-label { right:7%; }
.dr-work-area { min-height:87px; display:flex; align-items:center; padding-top:9px; }.dr-tray { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; min-height:76px; align-content:start; }.dr-shell .dr-card { width:100%; min-height:76px; padding:7px 10px; border:2px solid #c4d0bf; border-radius:5px; background:#fffdf2; text-align:left; font-size:16px; line-height:1.3; color:#4b6973; box-shadow:0 2px 0 #d8dfd0; touch-action:manipulation; }.dr-card[draggable="true"] { cursor:grab; }.dr-shell .dr-selected { border-color:#609aa7; outline:3px solid #a5c5cb; outline-offset:1px; }.dr-tray-empty { grid-column:1/-1; text-align:center; padding:15px; color:#99a78e; border:1px dashed #bfd1b7; font-size:15px; }.dr-map-message { width:100%; text-align:center; font-size:17px; color:#7e9b86; }.dr-dragging { opacity:.65; outline:3px dashed #81aeb3; outline-offset:2px; }
.dr-calculation { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; width:100%; margin:0; padding:8px 0 2px; }.dr-calculation-label { font-size:14px; color:#8ba389; margin-right:4px; }.dr-number { font-size:29px; line-height:1.2; font-weight:750; min-width:30px; text-align:center; }.dr-equals { font-size:27px; line-height:1.2; }.dr-signs { display:flex; gap:5px; }.dr-shell .dr-sign { width:48px; height:50px; padding:0; border:2px solid #b4c8bc; background:#fffdf2; color:#64838b; font-size:29px; }.dr-shell .dr-sign-selected { border-color:#74a5b1; background:#e1eee6; box-shadow:0 0 0 2px #bad1ce; }.dr-answer-label { position:relative; display:block; }.dr-answer-label > span { position:absolute; top:-16px; left:0; width:100%; text-align:center; font-size:10px; color:#97a88f; line-height:1.2; }.dr-answer-label input { width:74px; height:52px; border:2px solid #92b3ac; border-radius:5px; background:white; text-align:center; font:inherit; font-size:28px; font-weight:750; color:#557c7d; }
.dr-friends { height:204px; display:flex; align-items:center; justify-content:center; gap:5px; }.dr-friends .dr-dora { width:85px; height:160px; }.dr-friends .dr-boots { width:85px; height:150px; }.dr-keypad { display:grid; grid-template-columns:repeat(3,minmax(48px,1fr)); gap:4px; }.dr-shell .dr-key { height:48px; padding:0; border:2px solid #bfd0b8; background:#fffdf2; color:#54787c; font-size:23px; font-weight:750; }.dr-key:hover { background:#f3ecd0; }.dr-sidebar h3 { font-family:inherit; font-size:13px; margin:7px 0 5px; color:#8b9e7f; }.dr-progress-flowers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }.dr-progress-flower { position:relative; height:48px; border:1px solid #d1dcc3; border-radius:4px; background:#f8fbf1; display:flex; justify-content:center; align-items:center; }.dr-progress-flower .dr-flower { width:35px; height:43px; }.dr-progress-flower > span:last-child { position:absolute; bottom:2px; right:4px; font-size:9px; line-height:1.1; color:#9fa98b; }.dr-flower-bud { width:13px; height:17px; border-radius:60% 40% 50% 50%; background:#dce8cc; border:1px solid #c4d5b5; }
.dr-feedback { display:flex; flex-direction:column; justify-content:center; min-height:94px; margin:9px 0 7px; padding:8px 12px; background:#fcfaf0; border-left:4px solid #c8b1d0; border-radius:4px; font-size:18px; line-height:1.4; }.dr-feedback strong { font-size:13px; margin-bottom:3px; color:#9a85ad; }.dr-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:57px; }.dr-tools { display:flex; justify-content:end; gap:8px; flex-wrap:wrap; }.dr-wait { font-size:18px; color:#8aa080; }.dr-selected-summary { display:none; }
.dr-help { width:min(660px,calc(100% - 28px)); max-height:90dvh; padding:22px; border:2px solid #adc6af; border-radius:8px; background:#fffdf2; color:#45636b; font-size:18px; line-height:1.5; }.dr-help::backdrop { background:#45636b55; }.dr-help h2 { font-size:25px; }
.dr-finish { text-align:center; }.dr-finish h2 { font-size:31px; color:#62967f; margin:16px 0 10px; }.dr-finish > p { font-size:19px; }.dr-garden { max-width:850px; margin:18px auto; position:relative; }.dr-garden-art { display:block; width:100%; height:auto; }.dr-garden-friends { position:absolute; left:7%; bottom:5%; height:58%; display:flex; align-items:end; gap:12px; }.dr-garden-friends .dr-dora { width:auto; height:100%; }.dr-garden-friends .dr-boots { width:auto; height:90%; }.dr-garden-friends .dr-map-face { width:110px; height:70px; margin-bottom:8px; }.dr-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }.dr-stats > div { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid #cbd7bd; border-radius:6px; background:#fffdf2; }.dr-stats strong { font-size:28px; color:#689d88; }.dr-stats span { font-size:14px; }.dr-finish-actions { display:flex; justify-content:center; gap:12px; margin:17px 0; }.dr-finish details { text-align:left; border-top:1px solid #c7d6bf; padding:9px 0; font-size:18px; line-height:1.5; }.dr-finish summary { padding:10px 0; font-weight:750; cursor:pointer; }.dr-bonus-options { display:flex; gap:10px; }.dr-bonus-feedback { min-height:54px; margin:10px 0; }
@keyframes dr-walk { from { left:clamp(0px,calc(var(--previous-position) - 55px),calc(100% - 110px)); } to { left:clamp(0px,calc(var(--route-position) - 55px),calc(100% - 110px)); } }@keyframes dr-walk-bob { 50% { transform:translateY(-3px); } }@keyframes dr-bloom { from { opacity:.4; transform:scale(.7); } to { opacity:1; transform:scale(1); } }@keyframes dr-wing { 50% { transform:scaleX(.65); } }
.dr-walking { animation:dr-walk .85s ease-in-out both; }.dr-walking > svg { animation:dr-walk-bob .28s ease-in-out 3; }.phase-ready .dr-flower-grown .dr-flower { animation:dr-bloom .65s ease both; }.dr-finish .dr-butterfly-wing { transform-box:fill-box; transform-origin:center; animation:dr-wing .7s ease-in-out 3; }.dr-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .dr-shell { padding-top:3px; }.dr-toolbar { min-height:60px; }.dr-condition { min-height:80px; }.dr-layout { min-height:310px; }.dr-feedback { min-height:86px; margin-top:7px; }.dr-route-view { height:72px; }.dr-explorers { height:67px; }.dr-explorers .dr-dora { height:67px; }.dr-explorers .dr-boots { height:60px; }.dr-map-top { min-height:30px; }.dr-map-face { height:30px; } }
@media (max-width:1000px) { .dr-toolbar { grid-template-columns:auto 1fr auto 48px; }.dr-motion { grid-column:1/-1; justify-self:end; }.dr-layout { grid-template-columns:minmax(0,1fr) 170px; gap:12px; }.dr-map { padding-left:9px; padding-right:9px; }.dr-slots { gap:9px; }.dr-map-step { padding-left:5px; padding-right:5px; }.dr-shell .dr-slot { font-size:16px; }.dr-shell .dr-card { font-size:15px; padding:7px; }.dr-friends .dr-dora,.dr-friends .dr-boots { width:72px; }.dr-controls { flex-wrap:wrap; } }
@media (max-width:760px) { .dr-play { display:flex; flex-direction:column; }.dr-heading { order:0; flex-direction:column; align-items:start; gap:4px; }.dr-heading h2 { font-size:23px; }.dr-heading > span { font-size:14px; }.dr-condition { order:1; min-height:0; }.dr-layout { display:contents; }.dr-map-workspace { order:2; }.dr-feedback { order:3; min-height:132px; }.dr-controls { order:4; }.dr-sidebar { order:5; display:grid; grid-template-columns:170px 1fr; gap:8px 14px; align-items:center; margin-top:18px; }.dr-keypad,.dr-friends { grid-row:1/3; }.dr-friends { height:180px; }.dr-sidebar h3 { grid-column:2; margin:0; align-self:end; }.dr-progress-flowers { grid-column:2; align-self:start; }.dr-work-area { min-height:100px; }.dr-tray { gap:8px; }.dr-shell .dr-card { min-height:94px; font-size:16px; }.dr-selected-summary { display:flex; flex-direction:column; gap:3px; position:sticky; top:5px; z-index:5; border:2px solid #729fa7; border-radius:6px; padding:8px 10px; margin-bottom:8px; background:#fffdf2; box-shadow:0 3px 0 #d0dac4; font-size:16px; line-height:1.35; }.dr-selected-summary > strong { font-size:12px; color:#80a4a7; } }
@media (max-width:600px) { body.dora-game #app { width:calc(100% - 14px); }.dr-toolbar { grid-template-columns:1fr auto 48px; gap:7px; min-height:0; }.dr-toolbar > div { grid-row:1; grid-column:1/3; }.dr-toolbar h1 { font-size:17px; }.dr-toolbar span { font-size:12px; }.dr-toolbar .dr-back { grid-row:2; }.dr-toolbar [data-dr-action="help"] { grid-row:2; grid-column:2; }.dr-toolbar .dr-sound { grid-row:2; grid-column:3; }.dr-motion { grid-row:1; grid-column:3; flex-direction:column; justify-content:center; justify-self:center; font-size:10px; margin:0; }.dr-motion input { width:26px; height:26px; }.dr-heading h2 { font-size:22px; }.dr-condition { padding:8px; }.dr-condition p { font-size:17px; line-height:1.4; }.dr-condition > strong { font-size:18px; }.dr-map { padding:4px 6px 0; border-left-width:4px; border-right-width:4px; }.dr-map-top { gap:5px; }.dr-map-top > span { font-size:10px; max-width:175px; text-align:right; }.dr-map-face { width:62px; height:33px; }.dr-slots { gap:6px; }.dr-map-step { padding:5px 4px 0; }.dr-step-label { flex-direction:column; align-items:start; gap:2px; min-height:31px; }.dr-step-label strong { font-size:12px; }.dr-step-label > span { font-size:10px; min-height:12px; }.dr-shell .dr-slot { font-size:16px; min-height:105px; padding:5px; }.dr-empty-slot { font-size:14px; }.dr-step-note { min-height:48px; font-size:11px; gap:2px 4px; }.dr-step-note strong { font-size:14px; }.dr-route-view { height:75px; }.dr-explorers { width:90px; height:70px; left:clamp(0px,calc(var(--route-position) - 45px),calc(100% - 90px)); }.dr-explorers .dr-dora { height:67px; width:40px; }.dr-explorers .dr-boots { height:61px; width:40px; }.dr-tray { grid-template-columns:1fr; gap:7px; }.dr-shell .dr-card { min-height:57px; font-size:17px; padding:9px; }.dr-work-area { min-height:82px; padding-top:10px; }.dr-calculation { gap:8px; padding-top:19px; }.dr-calculation-label { width:100%; font-size:13px; margin:0 0 2px; text-align:center; }.dr-number { font-size:27px; min-width:26px; }.dr-equals { font-size:25px; }.dr-signs { gap:4px; }.dr-answer-label input { width:64px; }.dr-feedback { min-height:155px; padding:9px; font-size:17px; }.dr-controls > .dr-primary { width:100%; }.dr-tools { justify-content:start; width:100%; }.dr-sidebar { grid-template-columns:155px 1fr; gap:8px; }.dr-friends .dr-dora,.dr-friends .dr-boots { width:65px; }.dr-progress-flowers { gap:3px; }.dr-progress-flower { height:45px; }.dr-progress-flower .dr-flower { width:29px; height:40px; }.dr-sidebar h3 { font-size:12px; }.dr-intro h2 { font-size:28px; }.dr-intro p { font-size:17px; }.dr-intro .dr-intro-note { font-size:14px; }.dr-finish h2 { font-size:28px; }.dr-finish > p { font-size:17px; }.dr-garden-friends { gap:5px; }.dr-garden-friends .dr-map-face { width:55px; height:35px; }.dr-stats { grid-template-columns:1fr; gap:7px; }.dr-stats > div { flex-direction:row; align-items:center; text-align:left; gap:12px; }.dr-stats strong { min-width:35px; }.dr-finish-actions { flex-direction:column; }.dr-finish details { font-size:17px; }.dr-bonus-options { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { .dr-shell * { animation:none!important; transition:none!important; } }
.dr-explorers { --explorer-half:55px; --explorer-width:110px; left:clamp(0px,calc(var(--route-position) - var(--explorer-half)),calc(100% - var(--explorer-width))); }
@media (max-width:600px) { .dr-explorers { --explorer-half:45px; --explorer-width:90px; } }
@keyframes dr-walk { from { left:clamp(0px,calc(var(--previous-position) - var(--explorer-half)),calc(100% - var(--explorer-width))); } to { left:clamp(0px,calc(var(--route-position) - var(--explorer-half)),calc(100% - var(--explorer-width))); } }
@media (max-width:600px) { .dr-shell .dr-slot { min-height:82px; }.dr-step-note { min-height:33px; }.dr-step-label { min-height:26px; }.dr-route-view { height:64px; }.dr-explorers { height:61px; }.dr-explorers .dr-dora { height:59px; }.dr-explorers .dr-boots { height:54px; }.dr-feedback { min-height:112px; }.dr-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }.dr-tools { width:auto; max-width:125px; justify-content:end; }.dr-tools .dr-secondary { padding:9px; } }