/* ========================================
   First-time tips (js/classlings-tips.js, js/tipsModel.js)
   Hop peeks in beside the thing a tip is about, with a speech bubble like the one on the pupils' home (white, a stepped
   ink outline, a pixel tail: shared/css/classlings-pupil.css) and the standard small gold OK. Nothing here moves: the
   bubble and the button are there from the first frame (only Hop moves, drawn by the script, and standing still with
   less motion or Pause). The tip takes no press from anything: only OK is a button, so every tap goes through the
   bubble and Hop to what is under them.
   ======================================== */

.cla-tip {
    --tip-px: 4px;
    --tip-ink: var(--cla-ink, #1e1b3a);
    --tip-page: var(--cla-page, #ffffff);
    /* Screen pixels to an art pixel for Hop: its canvas is 18 art pixels wide and 23 tall, with its feet hidden behind the edge it
       peeks over and room above its head for the hop. */
    --tip-s: 3;
    --tip-tail: calc(var(--tip-px) * 5);
    --tip-ring: 0 calc(var(--tip-px) * -1) 0 var(--tip-ink), 0 var(--tip-px) 0 var(--tip-ink),
        calc(var(--tip-px) * -1) 0 0 var(--tip-ink), var(--tip-px) 0 0 var(--tip-ink);
    /* The tail points at the speaker from low on the bubble: down and out to the side Hop is on. */
    --tip-tail-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%231e1b3a' d='M3 0h2v1h-2zM2 1h1v1h-1zM1 2h1v1h-1zM0 3h1v1h-1zM0 4h5v1h-5z'/%3E%3Cpath fill='%23ffffff' d='M3 1h2v1h-2zM2 2h3v1h-3zM1 3h4v1h-4z'/%3E%3C/svg%3E");
    position: fixed;
    z-index: 150;
    display: flex;
    align-items: flex-end;
    max-width: calc(100vw - 16px);
    margin: 0;
    padding: 0;
    color: var(--tip-ink);
    pointer-events: none;
    transition: none;
}

/* Hop at the left end, the bubble to its right (beside the Music button, at the left of the Showdown screen). */
.cla-tip[data-side="right"] {
    flex-direction: row-reverse;
}

.cla-tip-say {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /* Room for the tail on Hop's side, and for the base the bubble stands on (so it never touches the bar). */
    margin: 0 var(--tip-tail) calc(var(--tip-px) * 3 + 2px) 0;
    padding: 8px 10px 10px 16px;
    background: var(--tip-page);
    box-shadow: var(--tip-ring), 0 calc(var(--tip-px) * 3) 0 rgba(30, 27, 58, 0.3);
    font: 600 18px / 1.25 var(--cla-display, 'Fredoka', 'Atkinson Hyperlegible', system-ui, sans-serif);
    letter-spacing: 0.01em;
    transition: none;
}

.cla-tip[data-side="right"] .cla-tip-say {
    margin: 0 0 calc(var(--tip-px) * 3 + 2px) var(--tip-tail);
}

.cla-tip-say::after {
    content: '';
    position: absolute;
    left: 100%;
    bottom: calc(var(--tip-px) * 2);
    width: var(--tip-tail);
    height: var(--tip-tail);
    background: var(--tip-tail-art) 0 0 / 100% 100%;
    transform: scaleX(-1);
}

.cla-tip[data-side="right"] .cla-tip-say::after {
    left: auto;
    right: 100%;
    transform: none;
}

.cla-tip-words {
    flex: 1 1 auto;
    min-width: 0;
    /* How wide the words may be: the script picks the widest that leaves the cards uncovered (js/classlings-tips.js). */
    max-width: var(--tip-words, 26ch);
    text-wrap: balance;
}

.cla-tip-ok {
    flex: none;
    pointer-events: auto;
}

.cla-tip-hop {
    display: block;
    flex: none;
    width: calc(var(--tip-s) * 18px);
    height: calc(var(--tip-s) * 23px);
    image-rendering: pixelated;
    pointer-events: none;
}

/* A phone: a little less round the words. */
@media (max-width: 480px) {
    .cla-tip-say {
        gap: 8px;
        padding: 8px 8px 10px 12px;
    }
}