/* The chosen direction: one speech bubble and unboxed painted choices. */
body[data-view=close] .merchant-framing{transform:translateX(-5%) scale(.91);transform-origin:52% 88%}
.speech-bubble{position:absolute;--bubble-width:min(640px,46vw);left:52%;top:22%;width:var(--bubble-width);min-height:160px;padding:36px calc(var(--bubble-width)*.085) 40px calc(var(--bubble-width)*.26);box-sizing:border-box;background:url('/outputs/veluwe-shop-dialogue-ui-v05/speech-bubble.png') center/100% 100% no-repeat;pointer-events:auto;display:flex;flex-direction:column;justify-content:center;text-align:center;filter:drop-shadow(0 2px 1px #71503918);opacity:0;transition:opacity 350ms ease 450ms}
body[data-view=close] .speech-bubble{opacity:1}
.speech-bubble .dialogue-text{font:clamp(21px,1.9vw,29px)/1.3 Georgia,serif;color:var(--forest);margin:0;min-height:0;overflow-wrap:break-word}
.speech-bubble .fact-source{position:absolute;right:36px;bottom:22px;display:block;margin:0;font:23px/1 Georgia,serif;text-decoration:none;opacity:.75}
.speech-bubble .reward{position:relative;margin:10px 0 0;padding:0;border:0;background:none}
.speech-bubble .reward-code{display:flex;justify-content:center;gap:10px;padding:0}
.speech-bubble .reward-code code{font:700 16px/1.3 system-ui,sans-serif;color:var(--blue)}
.speech-bubble .reward-code button{padding:0;background:none;color:var(--blue);font:22px/1 Georgia,serif}
.conversation .replies{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);width:min(1080px,calc(100% - 66px));display:flex;justify-content:center;align-items:center;gap:6px;pointer-events:none;opacity:0;transition:opacity 350ms ease 450ms}
body[data-view=close] .conversation .replies{opacity:1}
:is(.conversation .replies,.berry-shelf__actions) .reply.fox-button{position:relative;display:block;flex:1 1 0;width:auto;max-width:330px;min-width:0;min-height:0;height:auto;aspect-ratio:400/140;padding:0;margin:0;border:0;background:transparent;color:var(--paper);clip-path:none;isolation:isolate;pointer-events:auto;overflow:visible}
:is(.conversation .replies,.berry-shelf__actions) .reply.fox-button::before{content:none}
.conversation .replies .reply.fox-button:last-child:nth-child(odd){grid-column:auto;width:auto;justify-self:auto}
:is(.conversation,.berry-shelf__actions) .reply .fox-button__art{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
:is(.conversation,.berry-shelf__actions) .reply .reply-label{position:absolute;inset:15% 12% 21%;display:flex;align-items:center;justify-content:center;margin:0;padding:0;z-index:1;min-width:0;font:clamp(18px,1.75vw,25px)/1.15 Georgia,serif;text-align:center;color:var(--paper);white-space:normal;overflow-wrap:normal;hyphens:none;pointer-events:none}
:is(.conversation,.berry-shelf__actions) .reply .fox-button__fallback{inset:15% 3% 21%;background:var(--blue);color:var(--paper);clip-path:polygon(5% 10%,14% 3%,84% 0,98% 15%,100% 72%,94% 96%,12% 100%,0 79%,1% 28%);border-radius:0}
:is(.conversation,.berry-shelf__actions) .reply:hover .fox-button__fallback,:is(.conversation,.berry-shelf__actions) .reply:focus-visible .fox-button__fallback{background:var(--orange)}
:is(.conversation,.berry-shelf__actions) .reply:hover,:is(.conversation,.berry-shelf__actions) .reply:focus-visible{background:transparent;color:var(--paper)}
:is(.conversation,.berry-shelf__actions) .reply:focus-visible{outline:2px solid var(--orange);outline-offset:-11px;border-radius:40px}
:is(.conversation,.berry-shelf) .return-button{top:28px;left:28px;display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;clip-path:polygon(49% 0,79% 6%,98% 32%,100% 61%,81% 92%,48% 100%,15% 90%,0 61%,5% 27%,25% 6%);background:var(--paper);color:var(--forest);font:32px/1 Georgia,serif;transform:none;transition:opacity 300ms ease}
@media(min-width:1500px){.speech-bubble{top:23%;left:auto;right:2%}.conversation .replies{bottom:35px}}
@media(max-width:1000px) and (min-width:701px){.speech-bubble{--bubble-width:50vw;left:48%;top:23%;min-height:155px}.speech-bubble .dialogue-text{font-size:22px}.conversation .replies{width:calc(100% - 34px);gap:0}:is(.conversation,.berry-shelf__actions) .reply .reply-label{font-size:18px}}
@media(max-width:700px){
  body[data-view=close] .merchant-framing{transform:translateX(-2.5%) scale(.77);transform-origin:52% 85%}
  .speech-bubble{--bubble-width:min(440px,94vw);left:auto;right:6px;top:14%;min-height:140px;padding:34px calc(var(--bubble-width)*.085) 38px calc(var(--bubble-width)*.26)}
  .speech-bubble .dialogue-text{font-size:20px;line-height:1.25}
  .conversation .replies{bottom:18px;width:calc(100% - 20px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 5px;align-items:center;justify-items:center}
  :is(.conversation .replies,.berry-shelf__actions) .reply.fox-button{width:100%;max-width:310px;aspect-ratio:3.2/1;grid-column:auto}
  .conversation .replies .reply.fox-button:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 3px)}
  :is(.conversation,.berry-shelf__actions) .reply .reply-label{inset:14% 10% 19%;font-size:16px;line-height:1.05}
  :is(.conversation,.berry-shelf) .return-button{top:20px;left:20px;width:48px;height:48px;font-size:29px}
  .speech-bubble .reward-code code{font-size:13px}
}
@media(max-width:430px){.speech-bubble{top:13%;right:4px}:is(.conversation,.berry-shelf__actions) .reply .reply-label{font-size:15px}}
@media(prefers-reduced-motion:reduce){.speech-bubble,.conversation .replies{transition:none}}

/* Keep the chosen row compact and the keyboard focus free of extra panels. */
:is(.conversation .replies,.berry-shelf__actions) .reply.fox-button{max-width:280px}
:is(.conversation,.berry-shelf__actions) .reply:focus-visible{outline:none}
:is(.conversation,.berry-shelf__actions) .reply:focus-visible .reply-label{text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){:is(.conversation,.berry-shelf) .return-button{top:88px;left:18px}:is(.conversation .replies,.berry-shelf__actions) .reply.fox-button{max-width:310px}}
@media(max-width:430px){:is(.conversation,.berry-shelf__actions) .reply .reply-label{font-size:16px}}

@media(max-width:700px){.speech-bubble .reward-code code{font-size:15px}}

/* Leave the shared language controls accessible above the shop back arrow. */
@media(min-width:701px){:is(.conversation,.berry-shelf) .return-button{top:98px}}