/* Colonists stylesheets */
/* Keep visual design grouped by interface area for easier editing. */

/* ===== Design tokens and base styles ===== */
:root {
    --bg:#101820;
    --panel:#182630;
    --panel2:#213642;
    --ink:#edf4f5;
    --muted:#a8bdc5;
    --accent:#e7b75b;
    --line:#36515d;
    --good:#70d6a1;
    --bad:#ff8585;
}


/* ===== Colonists slider ===== */
input[type="range"] {
    --slider-progress: 50%;

    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    height: 6px;
    padding: 0;
    border: 1px solid #29414c;
    border-radius: 999px;

    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--slider-progress),
        #0e1920 var(--slider-progress),
        #0e1920 100%
    );

    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}

/* // Thumb */
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;
    border-radius: 50%;

    background: var(--accent);
    border: 3px solid #182630;
    box-shadow: 0 0 0 1px #b99447;

    transition: transform .15s, box-shadow .15s;
}

input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;

    background: var(--accent);
    border: 3px solid #182630;
    box-shadow: 0 0 0 1px #b99447;

    transition: transform .15s, box-shadow .15s;
}

.slider-labels {
    position: relative;
    height: 18px;
    margin-top: 2px;
    margin-left: 7px;
    font-size: 12px;
    color: #8a9ba5;
}

.slider-labels span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.slider-labels span:first-child {
    transform: translateX(0);
}

.slider-labels span:last-child {
    transform: translateX(-100%);
}

/* // Hover and focus */
input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px #e7b75b30;
}

input[type="range"]:hover::-moz-range-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px #e7b75b30;
}

input[type="range"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
}

/* // Disabled */
input[type="range"]:disabled {
    opacity: .38;
    cursor: not-allowed;
}


* {
    box-sizing:border-box;
}
body {
    margin:0;
    min-height:100vh;
    background:radial-gradient(ellipse at top,#1c3541,#101820 70%);
    color:var(--ink);
    font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;
}
button,input,select {
    font:inherit;
}
button {
    border:1px solid #526d79;
    background:#294451;
    color:var(--ink);
    padding:9px 13px;
    border-radius:9px;
    cursor:pointer;
    transition:.15s;
}
button:hover:not(:disabled) {
    background:#3a5b68;
    transform:translateY(-1px);
}
button:disabled {
    opacity:.38;
    cursor:not-allowed;
}
.sound-toggle {
    min-width: 112px;
    white-space: nowrap;
}
input {
    background:#0e1920;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px;
    width:100%;
}

/* ===== Header and page layout ===== */
header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 22px;
    border-bottom:1px solid var(--line);
    background:#111d25dd;
    position:sticky;
    top:0;
    z-index:5;
    backdrop-filter:blur(12px);
}
.brand {
    font-size:1.45rem;
    font-weight:850;
    letter-spacing:.04em;
}
.brand span {
    color:var(--accent);
}
.sub {
    color:var(--muted);
    font-size:.85rem;
}
main {
    max-width:1500px;
    margin:auto;
    padding:18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:18px;
}
.panel {
    background:linear-gradient(145deg,#1b2c36,#15232b);
    border:1px solid var(--line);
    border-radius:15px;
    padding:15px;
    box-shadow:0 10px 28px #0002;
}
.panel h2,.panel h3 {
    margin:0 0 10px;
}
.setup {
    max-width:620px;
    margin:36px auto;
    padding:22px;
}
.setupgrid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.setupgrid2 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.muted {
    color:var(--muted);
}
.small {
    font-size:.84rem;
}
.hidden {
    display:none!important;
}

/* ===== Board and game pieces ===== */
#gameArea {
    min-width:0;
}
.board-area {
    position:relative;
    min-width:0;
}
.turn-timer {
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:5;
    padding:7px 11px;
    border:1px solid #668895;
    border-radius:9px;
    background:#101820eF;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    font-weight:700;
    box-shadow:0 4px 14px #0006;
    pointer-events:none;
}
.turn-timer.urgent {
    border-color:#ef7373;
    color:#ffb1a9;
}
.boardwrap {
    overflow:auto;
    background:#0e1a20;
    border:1px solid #29414c;
    border-radius:13px;
    padding:12px;
    min-height:500px;
    display:flex;
    justify-content:center;
    align-items:center;
}
#board {
    width:min(100%,850px);
    min-width:580px;
    height:auto;
    display:block;
}
.hex {
    stroke:#14242b;
    stroke-width:3;
    cursor:pointer;
    transition:filter .2s,stroke .2s,stroke-width .2s;
}
.hex:hover {
    filter:brightness(1.14);
}
.hex.hex-resource-highlight,
.hex.hex-resource-highlight:hover {
    stroke:#fff3a6;
    stroke-width:5;
    filter:brightness(1.28) drop-shadow(0 0 7px rgba(255,235,140,.9));
}
.robber-target {
    fill:transparent;
    stroke:transparent;
    pointer-events:all;
    cursor:pointer;
}
.robber-marker {
    pointer-events:none;
}
.robber-shadow {
    fill:#17242b;
    fill-opacity:.65;
    stroke:#d6bd8a;
    stroke-width:2;
}
.robber-icon {
    font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;
    font-size:30px;
    text-anchor:middle;
    dominant-baseline:middle;
}
.hex-label {
    font-weight:800;
    font-size:17px;
    fill:#17242b;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none;
}
.hex-num {
    font-size:11px;
    fill:#17242b;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none;
}
.hex-num.hex-num-highlight {
    fill:#e91111;
}
.road {
    stroke:#f1d6a0;
    stroke-width:8;
    stroke-linecap:round;
    pointer-events:none;
}
.settlement {
    stroke:#101820;
    stroke-width:2;
}
.port-connection-outline,
.port-connection {
    pointer-events:none;
    stroke-linecap:round;
}
.port-connection-outline {
    stroke:#4b3425;
    stroke-width:4;
}
.port-connection {
    stroke:#bd8955;
    stroke-width:2;
}
.port-marker {
    pointer-events:none;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.port-marker .port-sail-cloth {
    fill:#f5f3e8;
    stroke:#855b36;
    stroke-width:1.5;
    stroke-linejoin:round;
}
.port-marker.port-unlocked .port-sail-cloth {
    fill:#fffdf5;
    stroke-width:2;
}
.port-marker .port-sail-mast {
    stroke:#68472f;
    stroke-width:1.75;
    stroke-linecap:round;
}
.port-marker .port-pennant {
    fill:#e58b63;
    stroke:#68472f;
    stroke-width:.7;
}
.port-marker .port-hull {
    fill:#bd8955;
    stroke:#68472f;
    stroke-width:1;
    stroke-linejoin:round;
}
.port-resource,
.port-rate {
    font-weight:800;
    fill:#44301e;
    text-anchor:middle;
    dominant-baseline:middle;
    paint-order:stroke;
    stroke:#f5f3e8;
    stroke-width:.35px;
    stroke-linejoin:round;
}
.port-resource {
    font-size:10px;
}
.port-rate {
    font-size:9.5px;
}

/* ===== Sidebar, resources, and players ===== */
.side {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.resources {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;
    border:1px solid transparent;
    border-radius:11px;
}
.resources.over-discard-limit {
    border-color:#ef7373;
    box-shadow:0 0 0 1px #ef737330;
}
.resource {
    background:#102029;
    border:1px solid #2b4652;
    border-radius:10px;
    padding:8px 3px;
    text-align:center;
}
.resource .emoji {
    font-size:1.25rem;
}
.resource strong {
    display:block;
    font-size:1.15rem;
}
.resource small {
    color:var(--muted);
    font-size:.72rem;
}
.playerlist {
    display:flex;
    flex-direction:column;
    gap:7px;
}
.player {
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px;
    border-radius:9px;
    background:#102029;
    border:1px solid transparent;
}
.player.active {
    border-color:var(--accent);
    background:#3a3020;
}
.dot {
    width:12px;
    height:12px;
    border-radius:50%;
    flex:none;
}
.player .grow {
    flex:1;
}
.player b {
    display:block;
}
.actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}
.actions button {
    min-height:42px;
}
.log {
    max-height:190px;
    overflow:auto;
    display:flex;
    flex-direction:column-reverse;
    gap:6px;
}
.logitem {
    font-size:.82rem;
    color:#c6d6db;
    border-bottom:1px solid #263d47;
    padding-bottom:5px;
}
.status {
    padding:10px;
    border-radius:9px;
    background:#102029;
    border:1px solid #29414c;
}
.status.good {
    border-color:#397c5d;
}
.status.warn {
    border-color:#8a6c32;
}
.turnbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    flex-wrap:wrap;
}
.dice {
    font-size:1.3rem;
    font-weight:900;
    color:var(--accent);
}
.rules {
    color:var(--muted);
    font-size:.83rem;
}
.cost {
    color:var(--accent);
    font-size:.8rem;
}
.notice {
    padding:10px;
    border-radius:8px;
    background:#392d1d;
    color:#f5d69a;
    margin-top:10px;
    font-size:.85rem;
}

/* ===== Action notifications ===== */
.game-notice {
    display:block;
    margin:0 0 12px;
    padding:12px 14px;
    border:1px solid;
    border-radius:11px;
    font-weight:650;
    box-shadow:0 8px 24px #0002;
    animation:noticeIn .18s ease-out;
}
.game-notice.error {
    background:#481f25;
    border-color:#d94b5b;
    color:#ffdadd;
}
.game-notice.success {
    background:#183e30;
    border-color:#3bb982;
    color:#d3ffeb;
}
.game-notice.info {
    background:#19354a;
    border-color:#459bd4;
    color:#d8efff;
}
.game-notice.warning {
    background:#49391d;
    border-color:#c99a3d;
    color:#ffe9b0;
}
@keyframes noticeIn {
    from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}
}

/* ===== Responsive layouts ===== */
@media(max-width:1000px) {
main
{
grid-template-columns:1fr
}
.side
{
display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.side .wide
{
grid-column:1/-1
}
}
@media(max-width:600px) {
header
{
padding:12px
}
.setupgrid
{
grid-template-columns:1fr
}

.full
{
grid-column:auto
}
main
{
padding:10px
}
.side
{
display:flex
}
.boardwrap
{
min-height:350px;
    padding:4px
}
.brand
{
font-size:1.2rem
}
}

/* ===== Additional component styles ===== */
.full {
    grid-column:1/-1;
}
.room-visibility {
    min-width: 0;
    margin: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.room-visibility legend {
    padding: 0 5px;
    font-weight: 700;
}
.visibility-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.visibility-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border: 1px solid #344d58;
    border-radius: 9px;
    background: #101c23a8;
    cursor: pointer;
}
.visibility-option input {
    width: auto;
    margin: 4px 0 0;
    accent-color: var(--accent);
}
.visibility-option strong,
.visibility-option small {
    display: block;
}
.visibility-option small {
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.35;
}


/* ===== Separate page layouts ===== */
body:has(#setup) {
    min-height: 100vh;
}
body:has(#setup) .setup {
    width: min(620px, calc(100% - 28px));
}
body:has(#game) main {
    display: grid;
}

main.lobby-layout {
    max-width: 1160px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 20px;
    padding: 32px 22px;
}
.lobby-welcome,
.lobby-discovery {
    padding: 24px;
}
.lobby-welcome h1 {
    max-width: 470px;
    margin: 8px 0 10px;
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    line-height: 1.08;
}
.lobby-welcome > p {
    margin: 0 0 22px;
}
.eyebrow {
    color: var(--accent);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .13em;
}
.lobby-name,
.lobby-join > label {
    display: block;
    font-weight: 700;
}
.lobby-name input {
    margin-top: 6px;
}
.lobby-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}
.primary-action {
    background: linear-gradient(135deg, #507d6b, #315c50);
    border-color: #83bca2;
    font-weight: 750;
}
.secondary-action {
    background: #1b2c36;
}
.lobby-join {
    margin-top: 23px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.lobby-join-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    margin-top: 7px;
}
.lobby-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lobby-section-heading h2 {
    margin: 4px 0 0;
}
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border: 1px solid #33564c;
    border-radius: 999px;
    color: #a7d7bd;
    font-size: .78rem;
}
.live-indicator span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #70d49c;
    box-shadow: 0 0 10px #70d49c88;
}
.lobby-discovery > p {
    margin: 9px 0 17px;
}
.public-room-list {
    display: grid;
    gap: 10px;
}
.public-room-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid #344d58;
    border-radius: 11px;
    background: #101c23a8;
}
.public-room-details {
    min-width: 0;
}
.public-room-details h3,
.public-room-details p {
    margin: 0;
}
.public-room-details p {
    margin: 3px 0;
    color: var(--muted);
    font-size: .88rem;
}
.public-room-details > span {
    display: block;
    overflow-wrap: anywhere;
}
.public-room-join {
    flex: 0 0 auto;
    border-color: #638c98;
    font-weight: 700;
}
.room-list-empty {
    padding: 22px 14px;
    border: 1px dashed #3d5660;
    border-radius: 11px;
    color: var(--muted);
    text-align: center;
}
@media(max-width:760px) {
    main.lobby-layout {
        grid-template-columns: 1fr;
        padding: 20px 14px;
    }
}
@media(max-width:600px) {
    .setupgrid2,
    .visibility-options {
        grid-template-columns: 1fr;
    }
}

/* ===== Trading system ===== */

.trade-entry {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:10px;
}

.trade-open-btn {
    width:100%;
    background:linear-gradient(135deg,#365967,#294451);
    border-color:#668895;
    font-weight:750;
    padding:12px;
}

.trade-open-btn span {
    color:var(--accent);
    font-size:1.2rem;
    margin-right:6px;
}

.trade-panel {
    width:min(600px, 100%);
    max-height:min(80vh, calc(100% - 32px));
    overflow-y:auto;
    padding:14px;
    background:linear-gradient(145deg,#1b2c36,#15232b);
    border:1px solid var(--line);
    border-radius:13px;
    box-shadow:0 18px 48px #000b;
}

.trade-overlay {
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:#071118a8;
    border-radius:13px;
}

.discard-overlay {
    z-index:11;
}

.discard-panel {
    width:min(440px, 100%);
    max-height:min(80vh, calc(100% - 32px));
    overflow-y:auto;
    padding:18px;
    background:linear-gradient(145deg,#1b2c36,#15232b);
    border:1px solid var(--accent);
    border-radius:13px;
    box-shadow:0 18px 48px #000b;
}

.discard-panel h3 {
    margin:0;
}

.discard-panel > p {
    margin:6px 0 14px;
    color:var(--muted);
}

.discard-options {
    display:flex;
    flex-direction:column;
    gap:7px;
}

.discard-option,
.discard-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.discard-option {
    padding:8px 10px;
    background:#102029;
    border:1px solid #29414c;
    border-radius:8px;
}

.discard-option-controls {
    display:flex;
    align-items:center;
    gap:8px;
}

.discard-option-controls button {
    min-width:32px;
    padding:3px 8px;
}

.discard-option-controls strong {
    min-width:18px;
    text-align:center;
}

.discard-footer {
    margin-top:14px;
    flex-wrap:wrap;
}

.discard-footer span {
    color:var(--muted);
    font-size:.88rem;
}

.trade-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:15px;
}

.trade-header h3 {
    margin:0;
}

.trade-close-btn {
    padding:5px 10px;
}

.trade-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.trade-column {
    min-width:0;
    background:#102029;
    border:1px solid #2b4652;
    border-radius:10px;
    padding:9px;
}

.trade-column h4 {
    margin:0 0 2px;
    font-size:.95rem;
}

.trade-cards {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:10px;
}

.trade-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    background:#1b303b;
    border:1px solid #36515d;
    border-radius:8px;
    padding:6px;
}

.trade-card-info {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    font-size:.82rem;
}

.trade-card-info .emoji {
    font-size:1.2rem;
}

.trade-card-controls {
    display:flex;
    align-items:center;
    gap:4px;
}

.trade-card-controls button {
    padding:3px 8px;
    min-width:27px;
    border-radius:6px;
}

.trade-card-controls strong {
    min-width:15px;
    text-align:center;
}

.trade-summary {
    margin-top:12px;
    padding:10px;
    border-radius:9px;
    background:#102029;
    border:1px solid #29414c;
    color:var(--muted);
    font-size:.83rem;
}

.trade-port-hint {
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid #29414c;
    color:var(--accent);
    font-size:.86rem;
}

.trade-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
}

.trade-actions button {
    font-size:.84rem;
    padding:10px 5px;
}

.trade-send-btn {
    background:#315e4a;
    border-color:#4b9b70;
}

.trade-send-btn:hover:not(:disabled) {
    background:#39785a;
}

.trade-footnote {
    margin-top:10px;
    text-align:center;
}

.trade-progress > p {
    margin:0 0 12px;
    color:var(--muted);
}

.trade-response-list {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:12px;
}

.trade-response {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 10px;
    background:#102029;
    border:1px solid #29414c;
    border-radius:8px;
}

.trade-response strong {
    font-size:.82rem;
}

.trade-response .pending {
    color:var(--muted);
}

.trade-response .accepted {
    color:var(--good);
}

.trade-response .denied,
.trade-response .failed {
    color:var(--bad);
}

/* ===== Incoming trade notifications ===== */

.incoming-trades {
    position:absolute;
    top:12px;
    right:12px;
    z-index:11;
    width:min(340px,calc(100vw - 24px));
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
}

.incoming-trade {
    pointer-events:auto;
    background:linear-gradient(145deg,#213642,#152630);
    border:1px solid #56717d;
    border-radius:13px;
    padding:13px;
    box-shadow:0 12px 35px #0008;
    animation:noticeIn .2s ease-out;
}

.incoming-trade-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.incoming-trade-header strong {
    font-size:.95rem;
}

.incoming-trade-tag {
    font-size:.68rem;
    color:var(--accent);
    border:1px solid #806d43;
    padding:3px 6px;
    border-radius:5px;
}

.incoming-trade-resources {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.incoming-trade-side {
    background:#102029;
    border:1px solid #2b4652;
    border-radius:8px;
    padding:8px;
}

.incoming-trade-side small {
    display:block;
    color:var(--muted);
    margin-bottom:5px;
}

.incoming-trade-side strong {
    display:block;
    font-size:.85rem;
    margin:3px 0;
}

.incoming-trade-buttons {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
}

.incoming-trade-buttons button {
    padding:8px;
    font-size:.85rem;
}

.incoming-trade-buttons .accept {
    background:#285c43;
    border-color:#4b9b70;
}

.incoming-trade-buttons .deny {
    background:#49272c;
    border-color:#96505a;
}

.incoming-trade-buttons button:disabled {
    opacity:.25;
    cursor:not-allowed;
    transform:none;
}

@media(max-width:600px) {
    .trade-columns {
        grid-template-columns:1fr;
    }

    .incoming-trades {
        top:8px;
        right:8px;
    }
}