/* ==========================================================================
   The sticker book -- the camera icon on the desktop.
   Same window chrome as the other folders, so it lands in the center box at
   the same size. Loaded only by stickerbook.html.
   ========================================================================== */

td.windowbody#stickerbookBody {
    height: 420px;
    padding: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 22px),
        linear-gradient(160deg, #d9f2ff 0%, #e6dcff 45%, #ffe0f4 100%);
}

#sbook {
    height: 420px;
    box-sizing: border-box;
    padding: 6px 8px 6px;
    display: flex;
    flex-direction: column;
    font-family: 'W95FA';
}

/* ---- header ------------------------------------------------------------- */

.sb-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.sb-title {
    font-family: '2Credits';
    font-size: 17px;
    color: #d43ea0;
    text-shadow: 1px 1px 0 #fff;
    letter-spacing: 1px;
}

.sb-title img { width: 18px; vertical-align: -4px; }

.sb-count {
    margin-left: auto;
    font-family: 'ModernDOS';
    font-size: 11px;
    color: #5b4a9c;
    background: rgba(255,255,255,.7);
    padding: 1px 6px;
    box-shadow: inset -1px -1px #fff, inset 1px 1px #9a7fd0;
}

/* ---- tabs, like a real folder ------------------------------------------- */

.sb-tabs {
    display: flex;
    gap: 3px;
    margin: 5px 0 0;
    flex: none;
    position: relative;
    z-index: 2;
}

.sb-tab {
    font-family: 'W95FA';
    font-size: 11px;
    color: #3d2f6b;
    background: linear-gradient(#f3ecff, #ddd0f7);
    border: none;
    padding: 4px 9px 5px;
    cursor: url(cursor/cur905.gif), pointer;
    box-shadow: inset -2px 0 #9a7fd0, inset 2px 2px #fff;
    border-radius: 5px 5px 0 0;
}

.sb-tab:hover { background: linear-gradient(#fff, #eae0ff); }

.sb-tab.is-on {
    background: linear-gradient(#fffdf2, #fff7e8);
    color: #d43ea0;
    font-weight: bold;
    box-shadow: inset -2px 0 #9a7fd0, inset 2px 2px #fff, 0 2px 0 #fffdf2;
    padding-bottom: 7px;
}

/* ---- the page of stickers ----------------------------------------------- */

.sb-page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fffdf2;
    box-shadow: inset -2px -2px #fff, inset 2px 2px #9a7fd0;
    padding: 10px 8px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: #ff9ada #e9dcff;
}

.sb-sticker {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 3px;
    box-sizing: border-box;
    border: 1px solid #ffd6f2;
    box-shadow: 2px 2px 0 rgba(90, 40, 120, .18);
    cursor: url(cursor/cur905.gif), pointer;
    transition: transform .14s;
}

/* pasted-in-a-scrapbook tilt, without needing a class per sticker */
.sb-sticker:nth-child(4n+1) { transform: rotate(-4deg); }
.sb-sticker:nth-child(4n+2) { transform: rotate(2deg); }
.sb-sticker:nth-child(4n+3) { transform: rotate(-1deg); }
.sb-sticker:nth-child(4n)   { transform: rotate(5deg); }

.sb-sticker:hover { transform: rotate(0) scale(1.18); z-index: 3; }

.sb-sticker img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.sb-sticker.pop { animation: sbPop .5s ease; }

@keyframes sbPop {
    35% { transform: rotate(0) scale(1.45); }
    70% { transform: rotate(0) scale(.94); }
}

.sb-sticker.got { border-color: #ff9ada; box-shadow: 0 0 0 2px #ffe0f4, 2px 2px 0 rgba(90,40,120,.25); }

/* ---- footer ------------------------------------------------------------- */

.sb-bottom {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-family: 'ModernDOS';
    font-size: 11px;
    color: #5b4a9c;
}

#sbCaption { flex: 1; }
#sbCaption b { color: #d43ea0; }

.sb-bottom a {
    color: #3d2f6b;
    text-decoration: none;
    background: linear-gradient(#fff, #e9dcff);
    box-shadow: inset -2px -2px #9a7fd0, inset 2px 2px #fff;
    padding: 3px 8px;
}

.sb-bottom a:hover { color: #d43ea0; }
.sb-bottom a img { width: 14px; vertical-align: -3px; }