/* ========================================
   Swashbuckled Companion
   ======================================== */

:root {
    --background: #1b1b1b;
    --card: #2b241b;
    --card-light: #3a3024;

    --accent: #d4af37;
    --accent-hover: #e4c65a;

    --danger: #a53030;
    --danger-hover: #c54343;

    --text: #f2e8d5;
    --muted: #c8b48b;

    --border: #70542d;

    --radius: 12px;
    --shadow: 0 6px 20px rgba(0,0,0,.35);
}

*{
    box-sizing:border-box;
}

body{

    margin:0;
    padding:30px;

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

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    line-height:1.5;
}


/* ==========================
   Header
   ========================== */

header{

    text-align:center;
    margin-bottom:30px;
}

header h1{

    margin:0;
    color:var(--accent);

    font-size:2.5rem;
}


/* ==========================
   Main
   ========================== */

main{

    max-width:1100px;
    margin:auto;
}


/* ==========================
   Cards
   ========================== */

.card{

    background:var(--card);

    border:2px solid var(--border);

    border-radius:var(--radius);

    padding:20px;

    margin-bottom:25px;

    box-shadow:var(--shadow);
}

.card h2{

    margin-top:0;

    color:var(--accent);

    border-bottom:1px solid var(--border);

    padding-bottom:8px;
}


/* ==========================
   Layout Grids
   ========================== */

.ledger-grid,
.route-grid,
.stats-grid{

    display:grid;

    gap:18px;
}

.ledger-grid{

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));
}

.route-grid{

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));
}

.stats-grid{

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));
}


/* ==========================
   Labels
   ========================== */

label{

    display:block;

    margin-bottom:6px;

    color:var(--muted);

    font-weight:bold;
}


/* ==========================
   Inputs
   ========================== */

input,
select,
textarea{

    width:100%;

    padding:10px;

    border-radius:8px;

    border:1px solid var(--border);

    background:var(--card-light);

    color:var(--text);

    font-size:1rem;
}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 8px rgba(212,175,55,.35);
}

textarea{

    resize:vertical;

    margin-top:5px;
}


/* ==========================
   Display Boxes
   ========================== */

.display-value{

    background:#17120d;

    border:1px solid var(--border);

    border-radius:8px;

    padding:10px;

    min-height:44px;

    display:flex;

    align-items:center;

    font-size:1.15rem;

    font-weight:bold;

    color:var(--accent);
}

#treasureLocations{
    white-space: pre-line;
    display:block;
}


/* ==========================
   Buttons
   ========================== */

.button-row{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;
}

button{

    padding:12px 22px;

    border:none;

    border-radius:8px;

    background:var(--accent);

    color:#222;

    font-weight:bold;

    font-size:1rem;

    cursor:pointer;

    transition:
        background .2s,
        transform .1s;
}

button:hover{

    background:var(--accent-hover);
}

button:active{

    transform:scale(.98);
}

button.danger{

    background:var(--danger);

    color:white;
}

button.danger:hover{

    background:var(--danger-hover);
}


/* ==========================
   History
   ========================== */

#historyContainer{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.history-entry{

    background:#201912;

    border-left:6px solid var(--accent);

    border-radius:8px;

    padding:15px;
}

.history-entry h3{

    margin-top:0;

    color:var(--accent);
}

.history-entry.sunk{

    border-left-color:var(--danger);
}

.placeholder{

    color:var(--muted);

    font-style:italic;
}


/* ==========================
   Footer
   ========================== */

footer{

    margin-top:40px;

    text-align:center;

    color:var(--muted);

    font-size:.9rem;
}


/* ==========================
   Mobile
   ========================== */

@media (max-width:700px){

    body{

        padding:15px;
    }

    header h1{

        font-size:2rem;
    }

    .button-row{

        flex-direction:column;
    }

    button{

        width:100%;
    }

}