/* =====================================================================
   crate.css — the look of sky/crate.js.
   (it used to be written inside the script, as strings; same rules, now here)
   ===================================================================== */

.bottle-crate {
    cursor: pointer;
}
.bottle-crate .crate-art,
.bottle-crate>.art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.bottle-crate .necks {
    position: absolute;
    left: 8%;
    right: 8%;
    top: -34%;
    height: 50%;
}
.bottle-crate .neck {
    position: absolute;
    bottom: 0;
    width: 16%;
    transform-origin: 50% 100%;
}
.bottle-crate .neck svg {
    display: block;
    width: 100%;
}
.bottle-crate.has-new .neck {
    animation: neck-bob 3s ease-in-out infinite alternate;
}
@keyframes neck-bob {
    from {
        transform: rotate(var(--r)) translateY(0);
    }
    to {
        transform: rotate(calc(var(--r) * -.5)) translateY(-3px);
    }
}
.bottle-crate .crate-hint,
.pinboard .board-hint,
.letter-pile .lp-hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 36%);
    transform: translateX(-50%);
    white-space: nowrap;
    font-style: italic;
    font-size: .95rem;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.pinboard .board-hint {
    bottom: auto;
    top: calc(100% + 8px);
}
.bottle-crate:hover .crate-hint,
.bottle-crate:focus-visible .crate-hint,
.pinboard:hover .board-hint,
.pinboard:focus-visible .board-hint,
.letter-pile:hover .lp-hint,
.letter-pile:focus-visible .lp-hint {
    opacity: 1;
}
.bottle-crate .badge {
    position: absolute;
    right: -8px;
    top: -10px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #9a3b1f;
    color: #fff6dc;
    font: 14px/24px Georgia, serif;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.bottle-crate:not(.has-new) .badge {
    display: none;
}
/* the pinboard on the wall */
.pinboard {
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    border: 10px solid #5a3a24;
    border-radius: 3px;
    background: #b8875a radial-gradient(rgba(90, 55, 25, .35) 1px, transparent 1.5px) 0 0 / 7px 7px;
    box-shadow: 0 8px 14px rgba(0, 0, 0, .45), inset 0 0 18px rgba(60, 35, 15, .55);
}
.pinboard .pins {
    position: absolute;
    inset: 6%;
    z-index: 1;
}
.pinboard .pinned-note {
    position: absolute;
    width: 30%;
    aspect-ratio: 3 / 4;
    background: #efe3c6;
    overflow: hidden;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .4);
    display: grid;
    place-items: center;
}
.pinboard .pinned-note img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pinboard .pinned-note .mini,
.letter-pile .mini {
    padding: 8%;
    font-size: 7px;
    line-height: 1.3;
    color: #3a2716;
    overflow: hidden;
    height: 100%;
}
.pinboard .pinned-note::after,
.board-view .bv-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e0795a, #7a2a18);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
.pinboard .empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 10%;
    font-style: italic;
    font-size: .85rem;
    color: rgba(60, 35, 15, .75);
}
.pinboard.has-art {
    border: 0;
    background: none;
    box-shadow: none;
}
.pinboard>.art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
}
.pinboard.has-art:hover {
    box-shadow: none;
    filter: drop-shadow(0 0 10px rgba(255, 220, 150, .45));
}
.pinboard:not(.has-art):hover {
    box-shadow: 0 8px 14px rgba(0, 0, 0, .45), inset 0 0 18px rgba(60, 35, 15, .55), 0 0 18px rgba(255, 220, 150, .35);
}
/* the pile of letters on its little shelf */
.letter-pile {
    cursor: pointer;
    aspect-ratio: 200 / 120;
}
.letter-pile .lp-shelf {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18%;
}
.letter-pile .lp-shelf .placeholder,
.letter-pile .lp-shelf>.art {
    display: block;
    width: 100%;
    height: 100%;
}
.letter-pile .lp-stack {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    bottom: 13%;
}
.letter-pile .lp-sheet {
    position: absolute;
    bottom: 0;
    width: 44%;
    height: 94%;
    overflow: hidden;
    background: #efe3c6 var(--letter-art, none) center / cover;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .35), inset 0 0 10px rgba(120, 80, 30, .22);
    border-radius: 1px;
    transform-origin: 50% 100%;
    transition: transform .25s;
}
.letter-pile .lp-sheet img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
}
.letter-pile .lp-sheet::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 70%, rgba(120, 80, 30, .12));
}
.letter-pile:hover .lp-sheet.top {
    transform: translateY(-5%) rotate(-3deg) !important;
}
.letter-pile .lp-count {
    position: absolute;
    right: 6%;
    top: 8%;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: #3a2716;
    color: #f3e6c2;
    font: 13px/22px Georgia, serif;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.letter-pile.empty .lp-count,
.letter-pile.empty .lp-stack {
    display: none;
}
.letter-pile.empty {
    cursor: default;
}
/* taking a bottle out */
.uncork {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    background: radial-gradient(ellipse at 50% 45%, rgba(40, 30, 20, .6), rgba(10, 8, 6, .9) 75%);
    transition: opacity .4s, visibility 0s .4s;
    font-family: "IM Fell English", Georgia, serif;
    color: #3a2716;
}
.uncork.open {
    visibility: visible;
    opacity: 1;
    transition: opacity .4s;
}
.uncork .big-bottle {
    width: min(520px, 86vw);
    cursor: pointer;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5));
    transform: rotate(-8deg);
}
.uncork .big-bottle .b-cork {
    cursor: grab;
    transform-box: fill-box;
    transform-origin: center;
}
.uncork .u-hint {
    position: absolute;
    left: 50%;
    top: calc(50% + min(150px, 22vw));
    transform: translateX(-50%);
    white-space: nowrap;
    color: #f3e6c2;
    font-style: italic;
    font-size: 1.15rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
    transition: opacity .3s;
}
.uncork .u-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(460px, 86vw);
    max-height: 78vh;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    background: #efe3c6;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 0 40px rgba(120, 80, 30, .22);
}
.uncork.read .u-card {
    display: flex;
}
.uncork.read .big-bottle,
.uncork.read .u-hint {
    display: none;
}
.u-card .u-body {
    overflow: auto;
    min-height: 0;
}
.u-card .u-body img,
.pv-card img {
    display: block;
    width: 100%;
    height: auto;
}
.u-card .u-body .paper,
.bv-card .paper,
.pv-card .paper {
    padding: 28px 30px;
    line-height: 1.55;
}
.u-card .u-body .paper h2,
.bv-card .paper h2,
.pv-card .paper h2 {
    margin: 0 0 8px;
    font: normal 1.5rem "IM Fell English SC", Georgia, serif;
    color: #3a2716;
    text-shadow: none;
}
.u-card .u-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(110, 82, 54, .25);
}
.u-card .u-from,
.bv-card .bv-from,
.pv-card .pv-from {
    flex: 1 1 100%;
    font-style: italic;
    color: #6e5236;
}
.u-card .u-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
.crate-ui button.act {
    border: 0;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 999px;
    font: italic 1.02rem "IM Fell English", Georgia, serif;
    background: #3a2716;
    color: #f3e6c2;
}
.crate-ui button.act:hover {
    background: #9a3b1f;
}
.crate-ui button.act.soft {
    background: rgba(58, 39, 22, .12);
    color: #3a2716;
}
.crate-ui button.act.soft:hover {
    background: rgba(58, 39, 22, .24);
}
/* the whole board, up close */
.board-view {
    position: fixed;
    inset: 0;
    z-index: 8;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visibility 0s .4s;
    background: #b8875a radial-gradient(rgba(90, 55, 25, .35) 1px, transparent 1.5px) 0 0 / 9px 9px;
    font-family: "IM Fell English", Georgia, serif;
    box-shadow: inset 0 0 120px rgba(40, 20, 5, .6);
    overscroll-behavior: contain;
}
.board-view.open,
.pile-view.open {
    visibility: visible;
    opacity: 1;
    transition: opacity .4s;
}
.board-view .bv-top,
.pile-view .pv-top {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(rgba(90, 58, 36, .95), rgba(90, 58, 36, .0));
}
.board-view .bv-top h2,
.pile-view .pv-top h2 {
    margin: 0;
    flex: 1;
    font: normal 1.5rem "IM Fell English SC", Georgia, serif;
    color: #f3e6c2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.board-view .bv-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    padding: 10px 16px 80px;
}
.bv-card {
    position: relative;
    width: min(560px, 92vw);
    background: #efe3c6;
    color: #3a2716;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 0 40px rgba(120, 80, 30, .2);
}
.bv-card::before {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    top: -6px;
    z-index: 1;
}
.bv-card img {
    display: block;
    width: 100%;
    height: auto;
}
.bv-card .bv-from,
.pv-card .pv-from {
    display: block;
    padding: 8px 14px 10px;
    border-top: 1px solid rgba(110, 82, 54, .25);
}
.bv-card .bv-acts {
    position: absolute;
    right: -10px;
    top: -14px;
    z-index: 2;
}
.board-view .bv-empty,
.pile-view .pv-empty {
    color: #f3e6c2;
    font-style: italic;
    text-align: center;
    margin-top: 20vh;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* the pile, one letter at a time */
.pile-view {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visibility 0s .4s;
    background: radial-gradient(ellipse at 50% 40%, rgba(60, 42, 28, .82), rgba(14, 10, 7, .94) 80%);
    font-family: "IM Fell English", Georgia, serif;
    overscroll-behavior: contain;
}
.pile-view .pv-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 6px 60px 12px;
    touch-action: pan-y;
}
.pv-card {
    position: absolute;
    width: min(520px, calc(100vw - 120px));
    max-height: calc(100% - 20px);
    overflow: auto;
    background: #efe3c6;
    color: #3a2716;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .55), inset 0 0 40px rgba(120, 80, 30, .2);
}
.pv-card.under {
    transform: translate(6px, 8px) rotate(1.5deg) scale(.97);
    filter: brightness(.9);
}
.pile-view .pv-step {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    background: rgba(234, 220, 185, .92);
    color: #3a2716;
    font-size: 1.5rem;
    line-height: 46px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.pile-view .pv-step:hover {
    background: #eadcb9;
}
.pile-view .pv-step:disabled {
    opacity: .3;
    cursor: default;
}
.pile-view .pv-prev {
    left: 8px;
}
.pile-view .pv-next {
    right: 8px;
}
.pile-view .pv-foot {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 18px;
}
.pile-view .pv-foot:empty {
    display: none;
}
.pile-view .pv-count {
    color: #e8d9b4;
    font-style: italic;
}
.board-view .bv-close,
.pile-view .pv-close {
    border: 0;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 999px;
    font: italic 1.02rem "IM Fell English", Georgia, serif;
    background: #3a2716;
    color: #f3e6c2;
}
@media (max-width: 620px) {
    .pile-view .pv-stage {
        padding: 6px 10px 70px;
    }
    .pv-card {
        width: calc(100vw - 24px);
        max-height: calc(100% - 10px);
    }
    .pile-view .pv-step {
        top: auto;
        bottom: 12px;
        margin-top: 0;
    }
}
/* owner mode */
.owner-bar {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
    padding: 7px 8px 7px 14px;
    border-radius: 14px;
    background: #2a1d14;
    color: #f3e6c2;
    font: italic .95rem "IM Fell English", Georgia, serif;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.owner-bar b {
    font: normal .95rem "IM Fell English SC", Georgia, serif;
    letter-spacing: .03em;
    color: #e0b070;
}
.owner-bar button {
    border: 0;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 999px;
    font: italic .92rem "IM Fell English", Georgia, serif;
    background: #eadcb9;
    color: #3a2716;
}
.owner-bar button.quiet {
    background: none;
    color: #cdbb96;
    text-decoration: underline;
    padding: 5px 4px;
}
.owner-bar button:disabled {
    opacity: .45;
    cursor: default;
}
.publish {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(12, 9, 6, .72);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility 0s .3s;
}
.publish.open {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s;
}
.publish .pb-card {
    width: min(520px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 22px 24px;
    border-radius: 14px;
    background: #eadcb9;
    color: #3a2716;
    font-family: "IM Fell English", Georgia, serif;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
    line-height: 1.45;
}
.publish h2 {
    margin: 0 0 8px;
    font: normal 1.4rem "IM Fell English SC", Georgia, serif;
}
.publish ol {
    padding-left: 1.3em;
    margin: 8px 0 12px;
}
.publish code {
    font-size: .9em;
    background: rgba(110, 82, 54, .12);
    padding: 1px 5px;
    border-radius: 4px;
}
.publish .pb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.publish details {
    margin-top: 14px;
    border-top: 1px solid rgba(110, 82, 54, .25);
    padding-top: 10px;
}
.publish summary {
    cursor: pointer;
    font-style: italic;
    color: #6e5236;
}
.publish input {
    flex: 1;
    min-width: 180px;
    padding: 7px 10px;
    border: 1px solid rgba(110, 82, 54, .4);
    border-radius: 8px;
    background: #f6eed8;
    font: .95rem Georgia, serif;
}
.publish .pb-msg {
    font-style: italic;
    color: #9a3b1f;
    min-height: 1.3em;
}
body.crate-open .signpost {
    opacity: 0;
    pointer-events: none;
}