*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #3b3b3b 0, #141414 55%, #000 100%);
    color: #1f140a;
}

/* Outermost layout */
.sheet-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sheet {
    width: 1100px;
    max-width: 100%;
    background: #f3e0c7;
    background-image:
        radial-gradient(circle at top left, rgba(255,255,255,0.20) 0, transparent 55%),
        radial-gradient(circle at bottom right, rgba(0,0,0,0.15) 0, transparent 60%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
    padding: 20px 26px 26px;
    border: 6px double rgba(96, 68, 39, 0.85);
}

/* Header */
.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    border-bottom: 2px solid rgba(96,68,39,0.5);
    padding-bottom: 10px;
    gap: 12px;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-title {
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header-subtitle {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a5734;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.primary-btn,
.secondary-btn {
    font-family: inherit;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(96,68,39,0.9);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.12s ease-out;
}

.primary-btn {
    background: linear-gradient(135deg, #fdf6e8, #e8cfaa);
    color: #5b3b1f;
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.35);
    background: linear-gradient(135deg, #fffaf0, #ecd3af);
}

.primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.secondary-btn {
    background: linear-gradient(135deg, #f8f0e3, #e0c5a0);
    color: #4b3018;
}

.secondary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 7px rgba(0,0,0,0.35);
}

.secondary-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.secondary-btn.small-btn {
    padding: 5px 10px;
    font-size: 12px;
}

/* Identity row */
.identity-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.identity-fields {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.field-pair {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.field-pair.small {
    min-width: 110px;
}

.field-group {
    display: flex;
    gap: 8px;
}

.field-pair label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a5734;
    margin-bottom: 2px;
}

.field-pair input {
    border: 1px solid rgba(96,68,39,0.6);
    border-radius: 3px;
    background: rgba(255,255,255,0.6);
    padding: 4px 6px;
    font-size: 13px;
    color: #2b1b0d;
}

.field-pair input:focus {
    outline: 1px solid #b37a40;
    box-shadow: 0 0 0 2px rgba(179,122,64,0.25);
}

/* Portrait */
.portrait-box {
    width: 170px;
    flex: 0 0 auto;
}

.portrait-inner {
    border: 2px solid rgba(96,68,39,0.85);
    border-radius: 4px;
    background: rgba(255,255,255,0.8);
    height: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.portrait-placeholder {
    font-family: "Cormorant Garamond", serif;
    font-size: 14px;
    color: #a18156;
    text-align: center;
    padding: 4px;
}

.portrait-upload {
    margin-top: 6px;
}

.portrait-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a5734;
    cursor: pointer;
}

.portrait-upload-label input {
    display: none;
}

/* Panels */
.panel {
    border: 1px solid rgba(96,68,39,0.55);
    border-radius: 6px;
    padding: 10px 12px 12px;
    background: rgba(255,255,255,0.48);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.panel + .panel {
    margin-top: 12px;
}

.panel h2 {
    margin: 0 0 10px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #5a381b;
}

/* Main row: characteristics + derived */
.main-row {
    display: grid;
    grid-template-columns: 1.3fr 1.1fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* Characteristics block */
.char-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.char-row {
    display: grid;
    grid-template-columns: 0.6fr 1.1fr 0.7fr 0.7fr;
    align-items: center;
    gap: 4px;
}

.char-label {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #3b2412;
}

.char-main input {
    width: 100%;
    border-radius: 4px;
    border: 1px solid rgba(96,68,39,0.7);
    background: rgba(255,255,255,0.8);
    padding: 3px 4px;
    font-size: 14px;
    text-align: center;
}

.char-derived {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #7a5734;
}

.char-der-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.char-der-value {
    flex: 1;
    border-radius: 4px;
    border: 1px solid rgba(96,68,39,0.4);
    background: rgba(255,255,255,0.7);
    padding: 2px 4px;
    text-align: center;
    font-size: 12px;
    color: #2b1b0d;
}

.small-note {
    margin-top: 8px;
    font-size: 10px;
    color: #8b6841;
    line-height: 1.4;
}

/* Derived block */
.derived-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.derived-grid {
    display: grid;
    grid-auto-rows: auto;
    gap: 6px;
}

.derived-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: center;
    gap: 4px;
}

.derived-row .derived-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6a4525;
}

.derived-box {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.derived-box span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9a7449;
}

.derived-box input {
    border-radius: 4px;
    border: 1px solid rgba(96,68,39,0.7);
    background: rgba(255,255,255,0.9);
    padding: 3px 4px;
    font-size: 13px;
    text-align: center;
}

.derived-box.single {
    grid-column: span 2;
}

.derived-row.compact-two {
    grid-template-columns: 1fr 1fr;
}

.derived-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.derived-sub .derived-label {
    font-size: 11px;
}

.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a5734;
}

.checkbox-row input {
    margin-right: 2px;
}

/* Skills */
.skills-panel h2 {
    margin-bottom: 8px;
}

.skill-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.skill-points-display {
    font-size: 12px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.65);
    border-radius: 6px;
    border: 1px solid rgba(96,68,39,0.4);
    line-height: 1.4;
}

.skill-note {
    font-size: 10px;
    color: #8b6841;
    margin-top: 2px;
}

.skill-overbudget {
    color: #b00000;
    font-weight: 700;
}

.profession-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.profession-controls label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a5734;
}

.profession-controls select {
    border-radius: 4px;
    border: 1px solid rgba(96,68,39,0.6);
    background: rgba(255,255,255,0.9);
    padding: 3px 6px;
    font-size: 12px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 12px;
    font-size: 12px;
}

.skill-row {
    display: grid;
    grid-template-columns: 1.7fr 0.8fr;
    gap: 4px;
    align-items: center;
    margin-bottom: 2px;
    padding: 1px 3px;
    border-radius: 4px;
    transition: background 0.12s ease-out, box-shadow 0.12s ease-out;
}

.skill-row label {
    font-size: 11px;
    color: #3b2412;
}

.skill-row input {
    border-radius: 3px;
    border: 1px solid rgba(96,68,39,0.6);
    background: rgba(255,255,255,0.9);
    padding: 2px 3px;
    font-size: 11px;
    text-align: center;
}

/* Highlight occupation skills */
.skill-row.occ-skill-active {
    background: rgba(255,255,255,0.9);
    box-shadow: inset 0 0 0 1px rgba(179,122,64,0.6);
}

/* Combat */
.combat-panel h2 {
    margin-bottom: 8px;
}

.combat-grid {
    display: grid;
    gap: 6px;
    font-size: 12px;
}

/* Fit neatly within the page */
.combat-row {
    display: grid;
    grid-template-columns:
        1.4fr   /* Weapon */
        0.6fr   /* Skill */
        0.8fr   /* Damage */
        0.5fr   /* Attacks */
        0.6fr   /* Range */
        0.6fr   /* Ammo */
        0.5fr;  /* Malf */
    gap: 4px;
}

.combat-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7a5734;
}

.combat-row input {
    border-radius: 3px;
    border: 1px solid rgba(96,68,39,0.6);
    background: rgba(255,255,255,0.9);
    padding: 2px 3px;
    font-size: 11px;
}

/* Responsiveness */
@media (max-width: 960px) {
    .main-row {
        grid-template-columns: 1fr;
    }

    .identity-row {
        flex-direction: column;
    }

    .portrait-box {
        align-self: flex-start;
    }

    .skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sheet {
        padding: 14px;
    }

    .sheet-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions {
        justify-content: flex-start;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }

    .combat-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Print / PDF layout */
@media print {
    body {
        background: #ffffff;
    }

    .sheet-wrapper {
        padding: 0;
        box-shadow: none;
    }

    .sheet {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        border-radius: 0;
        border-width: 2px;
    }

    .no-print {
        display: none !important;
    }
}


/* ================================
   PRINT FIXES — FORCE EXACT LAYOUT
   ================================ */
@media print {

    /* Remove browser-imposed margins */
    @page {
        margin: 0.4in;     /* adjust if needed */
        size: letter portrait;
    }

    body {
        background: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        zoom: 0.92;  /* scales whole sheet to fit on one page */
    }

    .sheet-wrapper {
        padding: 0 !important;
        display: block !important;
    }

    .sheet {
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        transform: scale(1) !important;
        transform-origin: top left;
        page-break-inside: avoid;
    }

    /* FORCE TWO-COLUMN LAYOUT TO REMAIN EVEN WHEN PRINTING */
    .main-row {
        grid-template-columns: 1.3fr 1.1fr !important;
    }

    /* Prevent skills grid from collapsing */
    .skills-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Prevent browser from stacking the combat layout */
    .combat-row {
        grid-template-columns:
            1.4fr 0.6fr 0.8fr 0.5fr 0.6fr 0.6fr 0.5fr !important;
    }

    /* Hide UI buttons, upload controls, dropdowns, etc. */
    .no-print,
    button,
    select,
    input[type="file"] {
        display: none !important;
    }

    /* Make portrait show properly */
    .portrait-inner {
        height: 170px !important;
        border: 2px solid #444 !important;
        background: white !important;
    }

    /* Ensure character sheet fonts don't shrink weirdly */
    * {
        font-size: 95% !important;
    }
}