/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f5f0f7;
    color: #333;
    padding: 1.5rem;
}

/* ===== SCREEN-ONLY UI ===== */
.screen-ui {
    max-width: 960px;
    margin: 0 auto 2rem;
    text-align: center;
}

.screen-ui h1 {
    font-size: 2rem;
    color: #5d4037;
    margin-bottom: 0.5rem;
}

.screen-ui .subtitle {
    color: #6d4c41;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.screen-ui .summary {
    display: inline-block;
    background: #fff9c4;
    border-radius: 0.75rem;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    color: #5d4037;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.print-btn {
    display: inline-block;
    background: #7b1fa2;
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.print-btn:hover {
    background: #6a1b9a;
}

/* ===== PAGE / GRID ===== */
.print-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0;
    max-width: 10in;
    margin: 0 auto 2rem;
    background: #fff;
    padding: 0;
    page-break-after: always;
    /* 10in x 7.5in printable area on letter paper */
}

.print-page:last-child {
    page-break-after: avoid;
}

/* ===== CARD BASE ===== */
.card {
    width: 2.5in;
    height: 3.5in;
    border: 2px dashed #aaa;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 0.2in 0.18in 0.15in;
    position: relative;
    overflow: hidden;
    font-size: 9.5pt;
    line-height: 1.3;
}

/* ===== WATERMARK ===== */
.card::after {
    content: "R&R";
    position: absolute;
    bottom: 0.35in;
    right: 0.15in;
    font-size: 22pt;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.04);
    letter-spacing: 2px;
    pointer-events: none;
    transform: rotate(-15deg);
}

/* ===== CARD HEADER ===== */
.card-header {
    text-align: center;
    margin-bottom: 0.06in;
    flex-shrink: 0;
}

.card-type {
    font-size: 6.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.02in;
}

.card-stars {
    font-size: 10pt;
    line-height: 1;
    margin-bottom: 0.02in;
}

.card-reward {
    font-size: 8pt;
    font-weight: 700;
    border-radius: 6px;
    display: inline-block;
    padding: 1px 8px;
    margin-bottom: 0.04in;
}

/* ===== CARD BODY ===== */
.card-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.04in 0.05in;
}

.card-body p {
    font-size: 10pt;
    line-height: 1.35;
    font-weight: 500;
}

/* ===== CARD FOOTER ===== */
.card-footer {
    text-align: center;
    font-size: 7.5pt;
    color: rgba(0,0,0,0.35);
    flex-shrink: 0;
    padding-top: 0.03in;
}

/* ===== TASK COLOR SCHEMES ===== */

/* Easy — all pink */
.card-easy {
    background: linear-gradient(180deg, #f8bbd0 0%, #f48fb1 100%);
}
.card-easy .card-type { color: #880e4f; }
.card-easy .card-reward { background: rgba(255,255,255,0.5); color: #880e4f; }
.card-easy .card-body p { color: #4a0028; }
.card-easy .card-footer { color: rgba(74,0,40,0.35); }
.card-easy::after { color: rgba(136, 14, 79, 0.06); }

/* Medium — pink top, white bottom */
.card-medium {
    background: linear-gradient(180deg, #f8bbd0 0%, #f8bbd0 40%, #fff5f8 60%, #ffffff 100%);
}
.card-medium .card-type { color: #880e4f; }
.card-medium .card-reward { background: rgba(136,14,79,0.12); color: #880e4f; }
.card-medium .card-body p { color: #333; }
.card-medium .card-footer { color: rgba(0,0,0,0.3); }
.card-medium::after { color: rgba(136, 14, 79, 0.06); }

/* Hard — pink top, purple bottom */
.card-hard {
    background: linear-gradient(180deg, #f8bbd0 0%, #ce93d8 50%, #ab47bc 100%);
}
.card-hard .card-type { color: #4a0028; }
.card-hard .card-reward { background: rgba(255,255,255,0.35); color: #4a148c; }
.card-hard .card-body p { color: #1a0033; }
.card-hard .card-footer { color: rgba(255,255,255,0.35); }
.card-hard::after { color: rgba(74, 20, 140, 0.07); }

/* Extreme — all purple */
.card-extreme {
    background: linear-gradient(180deg, #ab47bc 0%, #7b1fa2 50%, #6a1b9a 100%);
}
.card-extreme .card-type { color: #f3e5f5; }
.card-extreme .card-stars { filter: brightness(1.2); }
.card-extreme .card-reward { background: rgba(255,255,255,0.2); color: #fff; }
.card-extreme .card-body p { color: #fff; }
.card-extreme .card-footer { color: rgba(255,255,255,0.3); }
.card-extreme::after { color: rgba(255, 255, 255, 0.06); }

/* Power-Up — gold/sparkle */
.card-powerup {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe082 30%, #ffd54f 60%, #ffca28 100%);
    border-color: #f9a825;
}
.card-powerup .card-type { color: #e65100; }
.card-powerup .card-reward { background: rgba(230,81,0,0.12); color: #bf360c; }
.card-powerup .card-body p { color: #3e2723; }
.card-powerup .card-footer { color: rgba(62,39,35,0.35); }
.card-powerup::after { color: rgba(230, 81, 0, 0.06); }

.powerup-name {
    font-size: 12pt;
    font-weight: 800;
    color: #bf360c;
    margin-bottom: 0.06in;
    text-align: center;
}

.powerup-icon {
    font-size: 16pt;
    text-align: center;
    margin-bottom: 0.04in;
}

.card-powerup .card-body {
    flex-direction: column;
}

.card-powerup .card-body p {
    font-size: 9pt;
    line-height: 1.35;
}

/* ===== DECORATIVE ELEMENTS ===== */
.deco-top-left {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 8pt;
    opacity: 0.3;
    pointer-events: none;
}

.deco-top-right {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 8pt;
    opacity: 0.3;
    pointer-events: none;
}

.deco-bottom-left {
    position: absolute;
    bottom: 3px;
    left: 5px;
    font-size: 8pt;
    opacity: 0.25;
    pointer-events: none;
}

.deco-bottom-right {
    position: absolute;
    bottom: 3px;
    right: 5px;
    font-size: 8pt;
    opacity: 0.25;
    pointer-events: none;
}

/* ===== SECTION DIVIDERS (screen only) ===== */
.section-label {
    max-width: 10in;
    margin: 1.5rem auto 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #5d4037;
    padding: 0.4rem 0;
    border-bottom: 2px solid #d7ccc8;
}

/* ===== EMPTY CARD (grid filler) ===== */
.card-empty {
    border-color: transparent !important;
    background: transparent !important;
}
.card-empty::after {
    display: none;
}

/* ===== PRINT STYLES ===== */
@media print {
    @page {
        size: letter;
        margin: 0.5in;
    }

    body {
        background: #fff;
        padding: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .screen-ui,
    .section-label {
        display: none !important;
    }

    .print-page {
        margin: 0;
        padding: 0;
        page-break-inside: avoid;
        page-break-after: always;
    }

    .print-page:last-child {
        page-break-after: avoid;
    }

    .card {
        border: 1.5px dashed #999;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}