/* ========================================
   Opening a box (shared/js/classlings/boxOpening.js), over the whole screen, on the pupil's home
   and in the locker. The room is the whole screen: night, then a gold sunburst once the box bursts.
   The card beside it (below it on a phone or a tall screen) says what's happening and, once it's
   open, what was inside, with "Make it my champion" or "Wear it". The tokens, the toy buttons and
   the lettering come from shared/css/classlings-pupil.css (.cla-pupil).
   ======================================== */

html.box-open-on, html.box-open-on body { overflow: hidden; }

.cla-pupil.box-open {
    position: fixed;
    inset: 0;
    z-index: 2000;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "stage" "card";
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4) var(--s-4);
    background: #2a2d5c;
    overflow: hidden;
}

/* The room fills the screen, under everything else. */
.box-open .bo-room {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.box-open .bo-room:focus-visible { outline: 4px solid #ffffff; outline-offset: -8px; }

.box-open .bo-top { grid-area: top; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.box-open .bo-gap { flex: 1; }

/* What's happening, and what was inside. */
.box-open .bo-card {
    grid-area: card;
    position: relative;
    justify-self: center;
    width: min(560px, 100%);
    display: grid;
    padding: var(--s-4) var(--s-5) var(--s-3);
    text-align: center;
    background: var(--page);
    border: var(--edge) solid var(--ink);
    border-radius: var(--r-xl);
    box-shadow: var(--float);
}
.box-open .bo-card > div { display: grid; justify-items: center; gap: var(--s-2); }
.box-open .bo-card > [hidden] { display: none; }
.box-open .bo-title { font: 700 var(--t-m) / 1.1 var(--display); text-wrap: balance; }
.box-open .bo-lede, .box-open .bo-more, .box-open .bo-meta, .box-open .bo-note, .box-open .bo-problem-text { color: var(--ink-2); text-wrap: balance; }
.box-open .bo-more { font-size: var(--t-small); }
.box-open .bo-problem-text { font: 600 var(--t-ui) / 1.3 var(--display); color: var(--ink); }
.box-open .bo-note.is-bad { color: var(--vermilion-deep); font-weight: 700; }

/* A pip for each tap. */
.box-open .bo-pips { display: flex; gap: var(--s-3); padding: var(--s-1) 0 var(--s-2); }
.box-open .bo-pips i { width: 22px; height: 22px; border: var(--edge) solid var(--ink); border-radius: 50%; background: var(--page); box-shadow: 0 3px 0 var(--ink); }
.box-open .bo-pips i.on { background: var(--gold); }

/* The reveal: a ribbon, its name in the lettering, what it is, and the count going up. */
.box-open .bo-ribbon {
    padding: 6px 26px;
    font: 700 var(--t-small) / 1 var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--gold);
    border: var(--edge) solid var(--ink);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.box-open .bo-name { margin-top: var(--s-1); }
.box-open .bo-name.is-text { font: 700 var(--t-l) / 1.05 var(--display); }
.box-open .bo-found {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 14px;
    font: 600 var(--t-ui-s) / 1.2 var(--display);
    background: var(--gold-tint);
    border: var(--edge) solid var(--ink);
    border-radius: 999px;
}
.box-open .bo-found b { display: inline-block; font-size: var(--t-label); font-variant-numeric: tabular-nums; }
.box-open .bo-found b.tick { animation: bo-tick 0.5s; }
@keyframes bo-tick { 40% { transform: scale(1.6); color: var(--gold-deep); } }

.box-open .bo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.box-open .bo-actions .btn { min-width: 0; white-space: normal; text-align: center; }
.box-open .bo-actions .btn[hidden] { display: none; }
/* "Make it my champion" and "Wear it" turn into a tick and "Your champion" or "Wearing it" in the same place. The button is
   as wide as the wider of its two sets of words from the start (an unseen copy of the done words, data-done, holds the room),
   so pressing it never changes its row, the card's height or where "Next box" and "Done" stand. */
.box-open .bo-actions .bo-keep { flex-direction: column; }
.box-open .bo-actions .bo-keep::after {
    content: attr(data-done);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    padding-inline-start: 38px; /* the tick (22 px and its 4 px rings) and the gap beside it */
}
.box-open .bo-kept { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }

/* A wide screen: the card stands beside the room's box, the box in the space it leaves. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
    .cla-pupil.box-open {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas: "top top" "stage card";
        padding: var(--s-4) var(--gutter) var(--gutter);
    }
    .box-open .bo-card { align-self: center; width: 100%; }
}

/* A school laptop's short page (1366 x 540 to 600): everything a little closer. */
@media (min-width: 900px) and (max-height: 620px) {
    .box-open .bo-card { padding: var(--s-3) var(--s-4) var(--s-2); }
    .box-open .bo-title { font-size: var(--t-s); }
    .box-open .bo-actions .btn.is-big { min-height: var(--tap); font-size: var(--t-ui); padding: 0 var(--s-4); }
}

/* A phone. */
@media (max-width: 600px) {
    .cla-pupil.box-open { padding: var(--s-2) var(--s-3) var(--s-3); gap: var(--s-2); }
    .box-open .bo-card { padding: var(--s-3) var(--s-3) var(--s-2); border-radius: var(--r-l); }
    .box-open .bo-title { font-size: var(--t-s); }
    .box-open .bo-actions { gap: var(--s-2); }
    .box-open .bo-actions .btn.is-big { min-height: var(--tap); padding: 0 var(--s-4); font-size: var(--t-ui); }
    .box-open .bo-top { gap: var(--s-2); }
    .box-open .bo-top .btn { padding: 0 var(--s-3); }
}

/* A big board: drawn bigger. */
@media (min-width: 1700px) and (min-height: 1000px) {
    .cla-pupil.box-open { grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); }
    .box-open .bo-title { font-size: var(--t-l); }
    .box-open .bo-lede, .box-open .bo-meta { font-size: var(--t-ui); }
}

@media (prefers-reduced-motion: reduce) {
    .box-open .bo-found b.tick { animation: none; }
}