/* -----------------------------------------------------------------------------
   Global
----------------------------------------------------------------------------- */

html
{
    box-sizing: border-box;
}

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

body
{
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    position: relative;
    overflow-x: hidden;
}

/* -----------------------------------------------------------------------------
   Decorative top-left motif
----------------------------------------------------------------------------- */

body::before
{
    content: "";
    position: fixed;

    top: clamp(-140px, -7vw, -60px);
    left: clamp(-140px, -7vw, -60px);

    width: clamp(380px, 42vw, 820px);
    height: clamp(380px, 42vw, 820px);

    pointer-events: none;
    z-index: 0;
    border-radius: 50%;

    background:

        /* White disk carving the crescent */
        radial-gradient(
            circle at 65% 60%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 38%,
            rgba(255, 255, 255, 0.85) 42%,
            rgba(255, 255, 255, 0) 48%
        ),

        /* Lighter blue inner glow */
        radial-gradient(
            circle at 34% 42%,
            rgba(190, 225, 240, 0.95) 0%,
            rgba(150, 205, 230, 0.75) 24%,
            rgba(100, 160, 210, 0.40) 45%,
            rgba(100, 160, 210, 0) 68%
        ),

        /* Deeper blue outer shape */
        radial-gradient(
            circle at 38% 46%,
            rgba(70, 130, 180, 0.55) 0%,
            rgba(70, 130, 180, 0.35) 35%,
            rgba(70, 130, 180, 0.12) 58%,
            rgba(70, 130, 180, 0) 72%
        );

    opacity: 0.95;
}

body::after
{
    content: "";
    position: fixed;

    top: clamp(20px, 2vw, 45px);
    left: clamp(25px, 3vw, 70px);

    width: clamp(220px, 25vw, 500px);
    height: clamp(220px, 25vw, 500px);

    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(212, 175, 55, 0.25) 0%,
            rgba(212, 175, 55, 0.10) 22%,
            rgba(212, 175, 55, 0.00) 55%
        ),
        radial-gradient(
            circle at 62% 45%,
            rgba(212, 175, 55, 0.16) 0%,
            rgba(212, 175, 55, 0.06) 20%,
            rgba(212, 175, 55, 0.00) 52%
        );
}

/* -----------------------------------------------------------------------------
   Layout
----------------------------------------------------------------------------- */

main
{
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px 60px 20px;
}

nav
{
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 20px 0 20px;
}

nav a
{
    display: inline-block;
    margin-right: 18px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover,
nav a:focus
{
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Home page
----------------------------------------------------------------------------- */

.home-page
{
    position: relative;
    z-index: 1;
}

.hero-box
{
    background-color: rgba(255, 255, 255, 0.94);
    border: 1px solid #e6dcc2;
    border-radius: 18px;
    padding: 34px 34px 28px 34px;
    margin-bottom: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.hero-content
{
    max-width: 760px;
}

.site-kicker
{
    margin: 0 0 10px 0;
    font-size: 0.92rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4d6480;
}

.hero-box h1
{
    margin: 0 0 16px 0;
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: bold;
}

.hero-text
{
    margin: 0 0 12px 0;
}

.home-section
{
    margin-bottom: 34px;
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid #f0e7d2;
    border-radius: 14px;
    padding: 24px 24px 20px 24px;
}

.home-section h2
{
    margin: 0 0 16px 0;
    font-size: 1.35rem;
    line-height: 1.2;
    border-bottom: 1px solid #eadfbf;
    padding-bottom: 8px;
}

.home-section p
{
    margin: 0 0 12px 0;
}

.tool-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.tool-card
{
    background-color: #ffffff;
    border: 1px solid #e7dec7;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.tool-card h3
{
    margin: 0 0 12px 0;
    font-size: 1.12rem;
}

.tool-card p
{
    margin: 0 0 12px 0;
}

.tool-link
{
    margin-top: 10px;
}

.tool-link a
{
    color: #1f4f8f;
    text-decoration: none;
    font-weight: bold;
}

.tool-link a:hover,
.tool-link a:focus
{
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Generic content helpers
----------------------------------------------------------------------------- */

a
{
    color: #1f4f8f;
}

a:hover,
a:focus
{
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */

@media (max-width: 700px)
{
    main
    {
        padding: 20px 14px 40px 14px;
    }

    nav
    {
        padding: 14px 14px 0 14px;
    }

    nav a
    {
        margin-right: 12px;
        margin-bottom: 8px;
    }

    .hero-box
    {
        padding: 24px 20px;
    }

    .hero-box h1
    {
        font-size: 1.85rem;
    }

    .home-section
    {
        padding: 18px 16px;
    }
}

/* -----------------------------------------------------------------------------
   Tool pages
----------------------------------------------------------------------------- */

.tool-page
{
    position: relative;
    z-index: 1;
}

.tool-header
{
    margin-bottom: 28px;
}

.tool-header h1
{
    margin: 0 0 14px 0;
    font-size: 2rem;
    line-height: 1.2;
}

.tool-header p
{
    max-width: 760px;
}


/* -----------------------------------------------------------------------------
   Generator form
----------------------------------------------------------------------------- */

.generator-form
{
    max-width: 720px;

    background-color: rgba(255, 255, 255, 0.95);

    border: 1px solid #e7dec7;
    border-radius: 14px;

    padding: 26px;

    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);
}

.form-group
{
    margin: 0 0 24px 0;
}

fieldset.form-group
{
    padding: 0;
    border: 0;
}

.form-group > label,
.form-group legend
{
    display: block;

    margin-bottom: 9px;

    font-weight: bold;
    font-size: 1rem;
}


/* -----------------------------------------------------------------------------
   Radio buttons
----------------------------------------------------------------------------- */

.radio-group
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.radio-group label
{
    cursor: pointer;
}

.radio-group input
{
    margin-right: 6px;
}


/* -----------------------------------------------------------------------------
   Inputs
----------------------------------------------------------------------------- */

.generator-form input[type="number"],
.generator-form select
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;

    background-color: #ffffff;
    color: #000000;

    border: 1px solid #bcbcbc;
    border-radius: 6px;

    padding: 9px 11px;
}

.generator-form input[type="number"]
{
    width: 100px;
}

.generator-form select
{
    min-width: 210px;
}


/* -----------------------------------------------------------------------------
   Help text
----------------------------------------------------------------------------- */

.form-help
{
    margin: 7px 0 0 0;

    color: #666666;

    font-size: 0.88rem;
}


/* -----------------------------------------------------------------------------
   Form actions
----------------------------------------------------------------------------- */

.form-actions
{
    padding-top: 4px;
}

.form-actions button
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;

    padding: 10px 22px;

    color: #ffffff;
    background-color: #315f8c;

    border: 1px solid #274f76;
    border-radius: 7px;

    cursor: pointer;
}

.form-actions button:hover,
.form-actions button:focus
{
    background-color: #274f76;
}


/* -----------------------------------------------------------------------------
   Results
----------------------------------------------------------------------------- */

.generator-results
{
    max-width: 900px;

    margin-top: 30px;
}

.generator-results:empty
{
    display: none;
}

/* -----------------------------------------------------------------------------
   Slider
----------------------------------------------------------------------------- */

.slider-row
{
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 430px;
}

.slider-row input[type="range"]
{
    flex: 1;
    height: 7px;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;

    --slider-color: #4f9b5f;
    --slider-background: #d9d9d9;

    background:
        linear-gradient(
            to right,
            var(--slider-color) 0%,
            var(--slider-color) var(--slider-progress),
            var(--slider-background) var(--slider-progress),
            var(--slider-background) 100%
        );
}

/* Chrome / Edge / Safari */
.slider-row input[type="range"]::-webkit-slider-thumb
{
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;

    border-radius: 50%;
    border: 2px solid #ffffff;

    background-color: var(--slider-color);

    box-shadow: 0 0 0 1px var(--slider-color);
}

/* Firefox */
.slider-row input[type="range"]::-moz-range-thumb
{
    width: 18px;
    height: 18px;

    border-radius: 50%;
    border: 2px solid #ffffff;

    background-color: var(--slider-color);

    box-shadow: 0 0 0 1px var(--slider-color);
}


/* Percentage indicator */

.slider-value
{
    display: inline-block;
    min-width: 62px;

    padding: 5px 9px;

    border-radius: 6px;

    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
}

.slider-low
{
    color: #21642d;
    background-color: #e5f4e8;
    border: 1px solid #4f9b5f;
}

.slider-medium
{
    color: #885300;
    background-color: #fff1d6;
    border: 1px solid #d69528;
}

.slider-high
{
    color: #8b1e1e;
    background-color: #f9dddd;
    border: 1px solid #c84b4b;
}

/* -----------------------------------------------------------------------------
   Generator results
----------------------------------------------------------------------------- */

.generator-results
{
    max-width: 900px;
    margin-top: 32px;

    background-color: #ffffff;

    border: 1px solid #e7dec7;
    border-radius: 14px;

    padding: 24px;

    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);
}


.results-toolbar
{
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 18px;
}


.results-toolbar h2
{
    margin: 0;

    font-size: 1.35rem;
}


.print-button
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;

    padding: 8px 16px;

    color: #315f8c;
    background-color: #ffffff;

    border: 1px solid #315f8c;
    border-radius: 6px;

    cursor: pointer;
}


.print-button:hover,
.print-button:focus
{
    color: #ffffff;
    background-color: #315f8c;
}


/* -----------------------------------------------------------------------------
   Results summary
----------------------------------------------------------------------------- */

.results-summary
{
    display: flex;
    flex-wrap: wrap;

    gap: 8px 28px;

    margin-bottom: 20px;
    padding-bottom: 14px;

    border-bottom: 1px solid #eadfbf;

    font-size: 0.92rem;
}


/* -----------------------------------------------------------------------------
   Results table
----------------------------------------------------------------------------- */

.results-table
{
    width: 100%;

    border-collapse: collapse;

    font-size: 0.95rem;
}


.results-table th
{
    padding: 9px 10px;

    text-align: left;

    border-bottom: 2px solid #d8cba8;
}


.results-table td
{
    padding: 9px 10px;

    vertical-align: top;

    border-bottom: 1px solid #ececec;
}


.results-table tbody tr:last-child td
{
    border-bottom: 0;
}


.result-number
{
    width: 50px;

    color: #777777;

    text-align: right;
}


.result-type
{
    width: 100px;

    font-weight: bold;

    color: #315f8c;
}

.result-quantity
{
    width: 60px;
    text-align: center;
    font-weight: bold;
}

/* -----------------------------------------------------------------------------
   Printing
----------------------------------------------------------------------------- */

@media print
{
    @page
    {
        margin: 15mm;
    }

    body
    {
        background: #ffffff;
        color: #000000;

        font-size: 11pt;
    }

    body::before,
    body::after,
    nav,
    .tool-header,
    .generator-form,
    .results-toolbar .print-button
    {
        display: none !important;
    }

    main
    {
        max-width: none;

        margin: 0;
        padding: 0;
    }

    .generator-results
    {
        max-width: none;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .results-toolbar
    {
        margin-bottom: 12mm;
    }

    .results-table
    {
        width: 100%;

        font-size: 10pt;
    }

    .results-table thead
    {
        display: table-header-group;
    }

    .results-table tr
    {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .results-table th,
    .results-table td
    {
        padding: 5px 7px;
    }

    .result-type
    {
        color: #000000;
    }
    .spellbook-details
    {
        border-left: 1px solid #999999;
    }

    .spell-source
    {
        color: #000000;
    }

    .spellbook-level
    {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* -----------------------------------------------------------------------------
   Spellbooks
----------------------------------------------------------------------------- */

.spellbook-details
{
    margin-top: 8px;
    padding-left: 14px;

    border-left: 2px solid #e7dec7;

    line-height: 1.6;
}

.spellbook-level
{
    margin: 3px 0;
}

.spell-source
{
    font-size: 0.9em;
    color: #666666;
}


/* -----------------------------------------------------------------------------
   Magic Tricks
----------------------------------------------------------------------------- */

.magic-trick
{
    margin-top: 7px;
    padding-left: 14px;

    font-size: 0.95em;
}

.magic-trick strong
{
    color: #885300;
}