/* A small invitation to play, beside the island. */
.companion-card{grid-column:1/-1;min-width:0;padding:18px 16px 16px;margin:0 0 25px;border:1px solid #cbd6c5;border-radius:13px;background:linear-gradient(145deg,#edf1e5,#f8f7f1 80%);color:var(--ink)}
.companion-card [hidden],.companion-card[hidden],.companion-guide[hidden],.companion-guide [hidden]{display:none!important}
.companion-card-heading{display:flex;gap:12px;align-items:flex-start}
.companion-paw{display:grid;place-items:center;flex:none;width:37px;height:37px;border-radius:50%;background:#dde7d5;color:#42654c}
.companion-paw svg{width:23px;height:23px;fill:currentColor}
.companion-card .eyebrow{font-size:9px;letter-spacing:1.7px;color:#52704f}
.companion-card h3{font:25px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.5px;margin:8px 0 0}
.companion-card .companion-intro{font-size:12px;line-height:1.6;color:#4c6659;margin:13px 0 15px}
.companion-steps{list-style:none;padding:0;margin:0 0 17px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.companion-steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;color:#586b5c;font-size:11px;line-height:1.35}
.companion-step-number{display:grid;place-items:center;width:24px;height:24px;border:1px solid #a6b69d;border-radius:50%;background:#f8f7f1;font-size:11px;font-weight:600}
.companion-steps li:before{content:'';position:absolute;top:12px;left:30px;right:0;height:1px;background:#c9d3c1}
.companion-steps li:last-child:before{display:none}
.companion-steps .is-current{font-weight:600;color:#173f3a}
.companion-steps .is-current .companion-step-number{border-color:#477155;box-shadow:0 0 0 3px #47715512}
.companion-steps .is-complete .companion-step-number{border-color:#477155;background:#477155;color:#fff}
.companion-step-status,.companion-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.companion-actions{display:flex;flex-wrap:wrap;gap:7px}
.companion-card button,.companion-guide button{min-height:44px;border-radius:8px;font-size:12px;line-height:1.25;padding:10px 12px;cursor:pointer}
.companion-card button:focus-visible,.companion-guide button:focus-visible{outline:3px solid #c77f45;outline-offset:3px}
.companion-card button:disabled,.companion-guide button:disabled{opacity:.55;cursor:default}
.companion-primary{flex-basis:100%;border:1px solid #173f3a;background:#173f3a;color:#fffef8;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.companion-primary:hover:not(:disabled){background:#27584e}
.companion-secondary{flex:1;border:1px solid #bdcbb6;background:#f8f7f1;color:#173f3a}
.companion-secondary:hover:not(:disabled){background:#e5ecdf}
.companion-card .companion-message{font-size:12px;line-height:1.5;color:#476253;margin:11px 0 0;min-height:18px;overflow-wrap:anywhere}
.companion-reward{margin-top:15px;padding-top:14px;border-top:1px solid #d3dccb}
.companion-reward-head{display:flex;gap:10px;align-items:center}
.companion-ball{display:inline-block;flex:none;width:29px;height:29px;border-radius:50%;border:1px solid #a66b43;background:linear-gradient(145deg,#eabb76 0 42%,#f6dfb2 43% 55%,#c47c54 56%);box-shadow:inset -4px -4px 0 #74402316}
.companion-ball-classic{border-color:#54816a;background:linear-gradient(145deg,#9db98c 0 42%,#f4ecd0 43% 55%,#638b71 56%)}
.companion-reward-title{font-size:12px;line-height:1.4;font-weight:600}
.companion-reward-head small{display:block;margin-top:2px;color:#506553;font-size:11px;line-height:1.4;font-weight:400}
.companion-progress{height:5px;margin:10px 0 0;border-radius:6px;background:#dce3d5;overflow:hidden}
.companion-progress:before{content:'';display:block;width:var(--companion-progress,0%);height:100%;background:#63835a;border-radius:inherit;transition:width .25s ease}
.companion-card .companion-reward-note{font-size:11px;line-height:1.45;color:#506553;margin:8px 0 0}
.companion-toys{display:flex;gap:8px;margin-top:11px}
.companion-toys button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:#f8f7f1;border:1px solid #bdcbb6;color:#173f3a}
.companion-toys button[aria-pressed=true]{border-color:#477155;background:#dfe9d6}
.companion-toys .companion-ball{width:17px;height:17px}
.companion-card .companion-storage-notice{font-size:11px;line-height:1.5;color:#7b481f;padding:10px;background:#f6ead7;border-radius:7px;margin:12px 0 0}
.companion-guide{position:absolute;bottom:115px;left:50%;transform:translateX(-50%);z-index:6;width:max-content;max-width:min(540px,calc(100% - 32px));padding:9px 10px 9px 14px;display:flex;align-items:center;gap:12px;border:1px solid #d4dfcc;border-radius:12px;background:#f8f7f1f7;box-shadow:0 5px 22px #173f3a22;color:#173f3a}
.companion-guide p{min-width:0;max-width:290px;font-size:12px;line-height:1.45;margin:0}
.companion-guide-actions{display:flex;gap:6px;flex:none}
.companion-guide button{white-space:normal;border:1px solid #bdcbb6;background:#f8f7f1;color:#173f3a}
.companion-guide .companion-guide-auto{background:#173f3a;color:#fffef8;border-color:#173f3a;max-width:140px}
.companion-guide button:hover:not(:disabled){background:#e5ecdf}
.companion-guide .companion-guide-auto:hover:not(:disabled){background:#27584e}
.companion-active .stage-top-note,.companion-active .stage-note,.companion-active .play-bubble{visibility:hidden}
.shared-view .companion-card,.shared-view .companion-guide{display:none}
@media(max-width:1100px){.companion-guide{bottom:118px;flex-direction:column;align-items:stretch;gap:7px;width:calc(100% - 32px);padding:10px 12px}.companion-guide p{max-width:none}.companion-guide-actions{justify-content:flex-end}.companion-guide .companion-guide-auto{max-width:none}}
@media(max-width:760px){.companion-card{margin:0 0 22px;padding:18px}.companion-card h3{font-size:27px}.companion-card .companion-intro,.companion-card .companion-message{font-size:13px}.companion-steps li{font-size:12px}.companion-card button{font-size:13px}.companion-guide{top:8px;bottom:auto;width:calc(100% - 20px);max-width:none;padding:8px 10px;gap:5px}.companion-guide p{font-size:12px}.companion-guide-actions{gap:6px}.companion-guide-actions button{padding:8px 11px}.companion-active .reset-button{visibility:hidden}}
@media(max-width:360px){.companion-card{padding:15px}.companion-card h3{font-size:25px}.companion-paw{width:32px;height:32px}.companion-card-heading{gap:10px}.companion-guide p{font-size:11px}.companion-guide-actions{justify-content:stretch}.companion-guide-actions .companion-guide-auto{flex:1}}
@media(prefers-reduced-motion:reduce){.companion-progress:before{transition:none}}

/* A short landscape stage needs its centre for the island, so the guide uses the sky. */
@media(min-width:761px) and (max-height:560px){.companion-guide{top:8px;bottom:auto;flex-direction:row;align-items:center;gap:10px}.companion-guide p{flex:1}.companion-active .scene-heading{visibility:hidden}}
@media(max-width:760px){.companion-guide[data-phase=throwing],.companion-guide[data-phase=chasing],.companion-guide[data-phase=returning]{flex-direction:row;align-items:center;gap:8px}.companion-guide[data-phase=throwing] p,.companion-guide[data-phase=chasing] p,.companion-guide[data-phase=returning] p{flex:1}}