/* patternchooser.css */


/* ---- Tab sizing controls ---- */
:root {
    --tab-scale: 0.7; /* 0.5 = 50%, bump to taste */
    --tab-h: calc(100px * var(--tab-scale));
    --tab-overlap: 1.0; /* how much of the tab height overlaps the paper */
    --tab-tilt: -1.2deg;       /* angle of active tab “bend” */
    --tab-hover-lift: -0.03;   /* how high tab raises on hover (in % of height) */
    --tab-active-lift: -0.05;  /* lift when selected (in % of height) */
    --tab-shadow: 0 5px 10px rgba(0,0,0,0.25); /* global drop shadow tone */
    --card-w: 320px;            /* default */
    --card-ratio: 735/685;      /* matches your card_bg.png */
    --btn-h: 40px;              /* image button height */
    --face-pad: 10px;           /* tweak me to nudge everything left/right */
    --pc-main-background: url('../Images/paper_doodles.png') center/1024px auto repeat;
    --pc-banner-width: 100vw;     /* Banner Size */
    --saved-label-width: 100%    /* Label size */
}

body { margin: 0; padding: 0; font-family: 'Patrick Hand', 'system-ui', 'sans-serif';
    background-image: url('../Images/desk_bg.jpg'); }

/* Make sure the sheet centers inside the padded wrapper */
.pc-wrapper {
    min-height: 100vh;
    padding: 24px 32px;
    box-sizing: border-box;
    position: relative;
}

/* Header */
/* Header spacing adjusts because it's now inside the sheet */
.pc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(12px, 2vw, 20px);
}
.pc-title { font-size: 40px; letter-spacing: 1px; }



.pc-nav::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(rgba(0,0,0,0.05), transparent);
    border-radius: 0 0 4px 4px;
    pointer-events: none;
}

.pc-nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    border-radius: 3px; background: #e2d7b8;
}

/* Top-right nav tabs (image version) */
.pc-nav {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-end; /* right-align if you want; can switch to center if preferred */
    position: relative;
    padding-bottom: 6px;
    transform: translateY(calc(var(--tab-h) * var(--tab-overlap) * -1));
    z-index: 10;               /* sit above the paper */
    overflow: visible;
}

.pc-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    border-radius: 3px;
    background: #e2d7b8;
}

/* Image tabs */
.pc-nav-img{
    /* native PNG size is ~219×100; we scale from that */
    width:  calc(219px * var(--tab-scale));
    height: calc(100px * var(--tab-scale));

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-block;

    /* make sure corners actually show through */
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;

    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
    transition: transform .12s ease, filter .12s ease;

    /* Unified transform pipeline using CSS vars */
    --raise: 0px;
    --tilt:  0deg;
    transform: translateY(var(--raise)) rotate(var(--tilt));

}

.pc-nav-img:hover {
    transform: translateY(calc(var(--tab-hover-lift) * var(--tab-scale) * 100px));
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)) brightness(1.05);
}

.pc-nav-img:active{
    --raise: 0px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)) brightness(.98);
}

/* Active tab: small upward bend + a hair higher */
.pc-nav-img.is-active {
    transform: translateY(calc(var(--tab-active-lift) * var(--tab-scale) * 100px)) rotate(var(--tab-tilt));
    filter: var(--tab-shadow) brightness(1.08);
}

/* Individual images */
.pc-tab-simple   { background-image: url('../Images/tabs/tab_simple.png'); }
.pc-tab-similar  { background-image: url('../Images/tabs/tab_similar.png'); }
.pc-tab-contrast { background-image: url('../Images/tabs/tab_contrast.png'); }
.pc-tab-credits  { background-image: url('../Images/tabs/tab_credits.png'); }
/* Simple tab switches to this art when it's just a Deck tab */
.pc-tab-deck     { background-image: url('../Images/tabs/tab_deck.png'); }

.pc-nav-btn {
    padding: 10px 14px 9px;
    border-radius: 10px;
    border: 2px solid #c7b78d;
    background: linear-gradient(#fff5c9, #ffe39a);
    color: #2c2c2c;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Patrick Hand', system-ui, sans-serif;
    box-shadow: 0 3px 0 rgba(0,0,0,0.12);
    transform: translateY(0);
    transition: transform .08s ease, box-shadow .08s ease, background .12s ease, filter .12s ease;
}
.pc-nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.18);
    background: linear-gradient(#fff7cf, #ffeaad);
    filter: saturate(1.1);
}
.pc-nav-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}
/* Active tab sits “on top” */
.pc-nav-btn.is-active {
    background: linear-gradient(#fff9d8, #ffeeb6);
    border-color: #bcae86;
    box-shadow: 0 5px 10px rgba(0,0,0,0.18);
}
/* Main layout */
/* Keep the 3-column layout inside the sheet */
.pc-main{
    display:grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    position: relative;
}
/* Make the welcome state an overlay that doesn't affect layout */
#emptyState {
    /*position: absolute;
    top: 12px;
    left: 12px;
    right: 330px;   !* 300px scrapbook + 18px gap + a little padding *!
    pointer-events: none;*/
}

.pc-main-cards{
    grid-column: 1 / 2;
    display:flex;
    flex-wrap:wrap;
    gap: 16px;
    align-content:flex-start;
    justify-content:flex-start;
}
.pc-main-cards:empty{ display:none; }

/* Panels already live in the left column */
.pc-main-panel {
    grid-column: 1 / 2;
}

/* Right column: scrapbook stays on the right, always */
.pc-saved{
    grid-column: 2 / 3;
    width:100%;
    align-self: flex-start;

}




/* Panels that live in the main column (Similar / Contrast) */
.pc-main-panel {
    grid-column: 1 / 2;
    min-height: 260px;
    padding: 16px;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
    box-shadow: none;/*0 3px 8px rgba(0, 0, 0, 0.18);*/
    display: none; /* JS will switch this on/off */
}

/* Soft paper overlay so text and cards are readable on the doodle background */
.pc-panel-inner {
    background: rgba(255, 248, 232, 0.5);
    border-radius: 16px;
    padding: 16px;
}

/* Use your new textures */
.pc-main-panel-similar {
    background-image: none;
}

.pc-main-panel-contrast {
    background-image: none;
}

/* Card list inside panels */
.pc-panel-cards {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Panel headings/text */
.pc-panel-title {
    font-family: var(--pc-heading-font, system-ui, sans-serif);
    font-size: 1.2rem;
    margin: 0 0 4px;
}

.pc-panel-subtitle {
    margin: 0 0 8px;
    font-size: 0.95rem;
    opacity: 0.85;
}




.pc-saved{ width:100%; }
.pc-saved-label{ text-align:center; opacity:.8; margin:0 0 8px; font-family:"Patrick Hand"; }
.pc-saved-card {
    position: relative;
    width: var(--saved-label-width);
    margin: 8px 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.pc-saved-card-img {
    display: block;
    width: 100%;
    height: auto;
}

.pc-saved-card-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    font-family: "Patrick Hand", cursive; /* matches buttons & titles */
    font-size: clamp(14px, 1.9vw, 20px);  /* shrinks on smaller screens */
    line-height: 1.15;
    color: #e0e0e0;
    cursor: pointer;

    /* allow multi-line text and break long words if needed */
    white-space: normal;
    word-wrap: break-word;
}

.pc-saved-card-remove {
    position: absolute;
    top: 4px;
    right: 8px;
    border: none;
    background: transparent;
    font-family: "Patrick Hand", cursive;
    font-size: 20px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 0;
}

.pc-saved-card-remove:hover {
    transform: scale(1.1);
}



/* Badges showing where a saved card came from */
.pc-saved-card-badge {
    position: absolute;
    top: 4px;
    left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    font-family: "Patrick Hand", cursive;
    font-size: 11px;
    background: #90e0b8; /* Similar = soft green */
    color: #103322;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.pc-saved-card-badge.is-contrast {
    background: #ffb3b3; /* Contrast = soft red */
    color: #521616;
}







/* Empty-state message */
.pc-empty {
    grid-column: 1 / 2;      /* <-- PUT THIS BACK HERE */
    font-family:"Kalam", cursive;
    font-size: 18px;
    opacity: 0.8;
    padding: 18px;
    background: #fffef8;
    border: 1px dashed #d9cfb8;
    border-radius: 12px;
    margin:12px;
}



/* slight fanned look via data-index if you want later */
/* Add one of these classes to any .pc-nav-btn to recolor */
.pc-tab-blue  { background: linear-gradient(#e8f2ff, #cfe5ff); border-color:#a9bada; }
.pc-tab-green { background: linear-gradient(#ebf9e8, #cff2c6); border-color:#a9c2a2; }
.pc-tab-pink  { background: linear-gradient(#ffeaf4, #ffd1e6); border-color:#d7abc1; }

/* Keep hover/active feeling consistent */
.pc-tab-blue:hover  { background: linear-gradient(#f1f7ff, #dbecff); }
.pc-tab-green:hover { background: linear-gradient(#f1fbef, #daf6d3); }
.pc-tab-pink:hover  { background: linear-gradient(#fff0f7, #ffd9eb); }
/* Logo bottom-left */
.pc-logo-link { position: fixed; left: 18px; bottom: 18px; }
.pc-logo { height: 40px; opacity: 0.9; }




/* Banner = doodle paper + logo + tape */
.pc-banner {
    /* keep header alignment happy */
    display: inline-block;
    width: var(--pc-banner-width);
    height: auto;
    /*width: min(560px, 44vw);*/
}

.pc-paper {
    position: relative;
    padding: clamp(10px, 2.2vw, 18px);
    border-radius: 12px;
    /* the slight handmade tilt */
    transform: rotate(-2deg);
    /*box-shadow: 0 6px 14px rgba(0,0,0,0.18);*/
}

.pc-logo-img {
    display: block;
    width: 100%;
    height: auto;
    /* subtle lift so it feels printed-on but crisp */
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
    image-rendering: auto;
}

/* Tape sits on top-left, slightly skewed */
.pc-tape {
    position: absolute;
    top: 8%;
    left: 20%;
    width: clamp(80px, 22%, 140px);
    opacity: 1;              /* your 80% */
    transform: rotate(-6deg);
    pointer-events: none;       /* never intercept clicks */
}



.pc-card-close {
    position: absolute;
    top: -24px;               /* sits on top of the tape */
    left: 100%;
    transform: translateX(-50%);
    z-index: 4;               /* above tape */

    border: none;
    background: transparent;
    padding: 0;

    font-family: "Patrick Hand", cursive;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;

    /* DARKER, STRONGER SHADOW */
    text-shadow:
            0 0 4px rgba(0,0,0,0.9),
            0 0 10px rgba(0,0,0,0.8),
            1px 1px 3px rgba(0,0,0,0.75);
    cursor: pointer;
}

.pc-card-close:hover {
    transform: translateX(-50%) scale(1.1);
}

.pc-card {
    position: relative;
    width: var(--card-w);
    aspect-ratio: var(--card-ratio);
    height: auto;
    margin: 12px;
    border-radius: 0;
    background: transparent;
    box-shadow: 0 8px 14px rgba(0,0,0,.12);
    perspective: 1000px;
    cursor: pointer; /* so it feels clickable */
}

/* Selected state */
.pc-card.is-selected::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 6px;
    border: 3px solid #fff7b0;
    box-shadow:
            0 0 0 3px rgba(255, 165, 0, 0.85),
            0 10px 18px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.pc-card.is-selected {
    transform: translateY(-4px);
}



/* Full scrapbook sheet sitting on the desk */
/* Scrapbook sheet */
.pc-canvas {
    background: var(--pc-main-background);
    border-radius: 16px;
    padding: clamp(14px, 2.2vw, 24px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(0,0,0,0.08);

    /* NEW: rock-solid centering + sensible width bounds */
    width: clamp(960px, 90vw, 1280px);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 28px;

    box-sizing: border-box;
    position: relative;
    min-height: 72vh;
    overflow: visible;
    position: relative;
}

/* base = flat */
.pc-nav-img {
    --raise: 0px;
    --tilt:  0deg;
    transform: translateY(var(--raise)) rotate(var(--tilt));
    transition: transform .12s ease, filter .12s ease;
}

/* hover = tiny lift (optional if you already have it) */
.pc-nav-img:hover { --raise: calc(var(--tab-scale) * 100px * var(--tab-hover-lift)); }

/* active = lifted + tilted */
.pc-nav-img.is-active {
    --raise: calc(var(--tab-scale) * 100px * var(--tab-active-lift));
    --tilt:  var(--tab-tilt);
}

/* explicit reset when not active/hovered */
.pc-nav-img:not(.is-active):not(:hover) {
    --raise: 0px;
    --tilt:  0deg;
}

/* just in case focus styles stick visually on click */
.pc-nav-img:focus { outline: none; }






/* ==== CARD v2 (image-card + flip) ==== */
/* ==== CARD (square corners, true size) ==== */
.pc-card{
    position: relative;
    width: var(--card-w);
    aspect-ratio: var(--card-ratio);
    height: auto;
    margin: 12px;
    border-radius: 0;                 /* keep the square frame intact */
    background: transparent;
    box-shadow: 0 8px 14px rgba(0,0,0,.12);
    perspective: 1000px;
}
.pc-card-inner{
    position: relative; width:100%; height:100%;
    transform-style: preserve-3d; transition: transform .5s ease; z-index:2;
}
.pc-card.is-flipped .pc-card-inner{ transform: rotateY(180deg); }

.pc-face{
    position:absolute; inset:0;
    border-radius:0; backface-visibility:hidden;
    background: url("../Images/cards/card_bg.png") center/100% 100% no-repeat;
    padding: var(--face-pad) var(--face-pad) calc(var(--btn-h) + 24px);
    box-sizing: border-box;
}
.pc-face.back{ transform: rotateY(180deg); }





/* Title/body */
.pc-card-title{
    font-family:"Patrick Hand", cursive;
    font-size: clamp(28px, calc(var(--card-w)/12), 44px);
    line-height: .95; margin: 0 0 6px; color:#1d2a38;
}
.pc-card-body{
    font-family:"Kalam", cursive;
    font-size: clamp(16px, calc(var(--card-w)/26), 22px);
    line-height: 1.35; color:#2c2c2c; margin: 4px 0 10px;
}
.pc-card-body strong {
    font-weight: 700;
}

.pc-card-body br + strong {
    display: inline-block;
    margin-top: 6px;
}

.pc-card-fig{ margin:-30px 0 10px; padding:15px; border:0; background:transparent; }
.pc-card-img{ display:block; width:50%; height:auto; margin: auto; }

/* Press and Hold diagram runs a bit tall, so trim it down a bit */
.pc-card-img-shrink-a-tiny-bit {
    width:45%;
}
.pc-card-img-grow-a-tiny-bit {
    width:55%;
}
.pc-card-img-grow-by-half {
    width: 75%;
}
.pc-card-img-shrink-by-35 {
    width: 36%;
}


/* Button strip INSIDE the card */
.pc-card-tape{
    position:absolute; top:-29px; left:30%;
    width: clamp(70px, calc(var(--card-w)/2), 110px);
    opacity:.8; transform: rotate(-4deg); z-index:3; pointer-events:none;
}
/* action bar hugs the left; no right edge */
.pc-card-actions{
    position: absolute;
    left: var(--face-pad);
    right: auto;                 /* stop stretching */
    bottom: 12px;
    width: max-content;          /* shrink-wrap the two buttons */
    display: flex;
    justify-content: flex-start; /* ⟵ makes them sit left */
    gap: 10px;
}

.pc-card-label {
    display: inline-block;

    /* Let it expand but stop before full width */
    max-width: 90%;       /* Or 100% if inside a padded container */
    width: auto;

    /* Allow multiline */
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;

    /* Padding for multi-line comfort */
    padding-top: 10px;
    padding-bottom: 10px;

    /* Keep the × in the corner aligned */
    position: relative;
}

.pc-card-label .delete-btn {
    position: absolute;
    right: 6px;
    top: 6px;
}


.pc-imgbtn{ border:0; padding:0; background:transparent; cursor:pointer; }
.pc-imgbtn>img{ display:block; height: var(--btn-h); }




/* Modal overlay for Credits */
/* ===== Credits Modal (final) ===== */
#pc-modal{
    position: fixed; inset: 0; display: none; z-index: 4000;   /* above tabs/desk */
}
#pc-modal.is-open{ display:block; }

#pc-modal .pc-modal-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.40);
}

#pc-modal .pc-modal-dialog{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(560px, 92vw);
    max-height: min(80vh, 600px);
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding:20px; border-radius:12px;
    background:#fffef8 url("../Images/paper_doodles.png") 0 0/1024px auto repeat;
    border:2px solid #c19a2c; box-shadow:0 12px 28px rgba(0,0,0,.35);
    font-family:"Kalam", cursive;
}
#pc-modal .pc-modal-dialog h2{
    margin:0 0 8px; font-family:"Patrick Hand", cursive; font-size:32px;
}
.pc-modal h3 { margin: 0 0 8px; }
.pc-modal p { margin: 0 0 12px; line-height: 1.35; }
.pc-modal .pc-modal-actions { display: flex; justify-content: flex-end; }
.pc-modal .pc-modal-close { padding: 8px 12px; border-radius: 10px; border: 1px solid #d6c9af; background:#fff; cursor:pointer; }
.pc-modal-close{
    margin-top:12px; padding:8px 14px; font-family:"Patrick Hand";
    border:1px solid #c19a2c; background:#fff; cursor:pointer;
}

/* optional: prevent background scroll while open */
body.modal-open{ overflow:hidden; }





/* Tiny toast message for feedback (no blocking alert boxes) */
.pc-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.85);
    color: #fffef0;
    font-family: "Patrick Hand", cursive;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 5000;
}

.pc-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}










/* Responsiveness */

@media (max-width: 900px) {
    /* Keep two columns; just let the grid squeeze naturally */
    .pc-main {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 12px;
    }

    :root {
        --tab-scale: 0.55;
        --tab-overlap: 0.9;
    }

    /* Scrapbook + cards keep their default positions; no reordering */
    .pc-main-cards { flex-wrap: wrap; }
}

/* Mobile: reduce overlap a bit so tabs don't crowd */
/* Mobile: smaller tabs and keep them on the paper */
@media (max-width: 700px){
    :root {
        --tab-scale: 0.55;   /* shrink the tabs */
        --tab-overlap: 0.3;  /* reduce how much they “sit” above the paper */
    }

    .pc-nav {
        transform: translateY(calc(var(--tab-h) * var(--tab-overlap) * -1));   /* no lift on tiny screens */
        padding-bottom: 4px;       /* small buffer under the tabs */
        justify-content: center;   /* optional: center them on mobile */
    }
}

/* Desktop stays two columns. On portrait/phone: single column, cards vertical */
@media (max-width: 680px) {
    :root{ --card-w: 92vw;
           --saved-label-width: 75%;
    }
    .pc-empty {
        font-size: 15px;
        padding: 12px;
        line-height: 1.4;
    }

    /* Keep two columns even on small screens */
    .pc-main {
        grid-template-columns: minmax(0, 1fr) 240px;
    }

    .pc-main-cards {
        flex-direction: column;
        align-items: flex-start;  /* cards can still stack inside their column */
    }

    /* Don’t reorder scrapbook */
    .pc-saved {
        order: 0;
    }
}

/* Optional: tighten at small widths */
@media (max-width: 560px) {
}

@media (max-width: 480px) {
    :root {
        --tab-scale: 0.45;
        --tab-overlap: 0.9;
        --pc-banner-width: 75vw;
        --saved-label-width: 100%;
    }
    .pc-empty {
        font-size: 12px;
        padding: 15px;
        line-height: 2;
    }

    /*.pc-banner { width: 400px; }*/
}