@import url('/pixelpote-personality.css');
/* Speech sits above the interface: light paper, dark ink and a strong outline. */
.pp-dialogue--contrast{--surface:#fff9ed;--ink:#24212d;--edge-light:#24212d;--shadow:#090b1266;border-width:4px;box-shadow:4px 5px 0 var(--shadow),inset 0 -3px 0 #ebdfc8}
.pp-dialogue--contrast::after{border-right-width:4px;border-bottom-width:4px}
.home-study-links .pixelpotes-link{width:min(100%,300px);font-size:28px;min-height:62px;display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;color:var(--accent);border-color:var(--edge-light)}
.pixelpotes-link svg{width:20px;height:20px;shape-rendering:crispEdges;fill:currentColor}
#vocabulary-dialog .study-pixelpote{display:flex;align-items:center;gap:6px;text-align:left;background:var(--surface);border:2px solid var(--edge);margin-top:16px;padding:6px 15px 6px 0;max-width:560px}
#vocabulary-dialog .study-pixelpote canvas{width:96px;height:96px;flex-shrink:0;image-rendering:pixelated}
#vocabulary-dialog .study-pixelpote p{font-family:'Fusion Pixel';font-size:24px;line-height:1.25;color:var(--ink);margin:0}
#vocabulary-dialog #quiz-finished .study-pixelpote{margin-inline:auto}

/* Float over the answered question without moving its controls. */
#vocabulary-dialog #answer-feedback{position:relative}
#vocabulary-dialog .study-pixelpote.study-pixelpote-overlay{position:absolute;z-index:5;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:grid;place-items:center;width:100%;max-width:none;box-sizing:border-box;gap:0;background:none;border:0;margin:0;padding:0;cursor:pointer;isolation:isolate}
#vocabulary-dialog .study-pixelpote-overlay canvas{display:block;width:min(100%,420px,54svh);height:auto;aspect-ratio:1;max-width:none;object-fit:contain;filter:drop-shadow(2px 2px 0 var(--shadow))}
#vocabulary-dialog .study-pixelpote-overlay p{position:absolute;bottom:calc(100% - var(--pp-head-top,7.4%) + 16px);left:50%;transform:translateX(-50%);width:440px;max-width:100%;min-width:0;font-size:26px;line-height:1.25;padding:10px 14px;text-align:center;overflow-wrap:anywhere}
#vocabulary-dialog .study-pixelpote-overlay p:empty{display:none}
#vocabulary-dialog .study-pixelpote-overlay p::after{left:calc(50% - 5px);bottom:-8px}
#vocabulary-dialog .study-pixelpote-overlay:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#vocabulary-dialog .study-pixelpote-overlay.is-departing{pointer-events:none;animation:study-pixel-depart .32s steps(1,end) forwards}
@keyframes study-pixel-depart{
  0%{opacity:1;clip-path:inset(0);transform:translateX(-50%)}
  25%{clip-path:polygon(0 0,100% 0,100% 28%,8% 28%,8% 44%,100% 44%,100% 70%,0 70%);transform:translateX(calc(-50% + 6px))}
  50%{opacity:.75;clip-path:polygon(0 15%,100% 15%,100% 34%,0 34%,0 60%,92% 60%,92% 83%,0 83%);transform:translateX(calc(-50% - 8px))}
  75%{opacity:.4;clip-path:polygon(6% 24%,90% 24%,90% 35%,6% 35%,6% 69%,80% 69%,80% 76%,6% 76%)}
  100%{opacity:0;clip-path:inset(50%)}
}
@media(max-width:600px){
 #vocabulary-dialog .study-pixelpote-overlay p{font-size:24px;padding:9px 12px}
}
@media(max-height:520px) and (orientation:landscape){#vocabulary-dialog .study-pixelpote-overlay canvas{width:min(100%,48svh)}}
@media(prefers-reduced-motion:reduce){#vocabulary-dialog .study-pixelpote-overlay.is-departing{animation:none;opacity:0}}