/* ── RESET & BASE ──────────────────────────────────────────────────── */

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

html {
    background-color: #6aaa50;
}

body {
    min-height: 100vh;
    font-family: sans-serif;
}

/* ── CANVAS BACKGROUND ─────────────────────────────────────────────── */

#tri-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ── TOP NAV ───────────────────────────────────────────────────────── */

.top-nav {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
    display: inline-block;
}

.top-nav a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffd700;
}

#restart-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.9em;
    font-family: inherit;
    transition: all 0.3s ease;
}

#restart-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffd700;
}

@media (max-width: 1024px) {
    .top-nav {
        position: static;
        padding: 12px 0 0 12px;
    }
}

/* ── HEADING ───────────────────────────────────────────────────────── */

h1 {
    text-align: center;
    margin-top: 64px;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1rem, 5vw, 2.6rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fdf6e3;
    -webkit-text-stroke: 2px #2a5000;
    paint-order: stroke fill;
    text-shadow:
        2px  2px 0 #8bc34a,
        3px  3px 0 #7cb342,
        4px  4px 0 #6da030,
        5px  5px 0 #5e8d1e,
        6px  6px 0 #4f7a0c,
        7px  7px 0 #406700,
        8px  8px 0 #315400,
        9px  9px 0 #224100,
        10px 10px 20px rgba(0,0,0,0.5);
}

/* ── INSTRUCTIONS ──────────────────────────────────────────────────── */

.instructions-box {
    max-width: 680px;
    margin: 24px auto 28px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #3a6b00;
    border-radius: 10px;
    text-align: center;
    line-height: 1.7;
    font-size: 0.95rem;
    color: #1a2d00;
}

.blue-word { color: #1565c0; font-weight: bold; }
.red-word  { color: #c62828; font-weight: bold; }

/* ── SCENE ─────────────────────────────────────────────────────────── */

#scene {
    display: flex;
    align-items: stretch;
    max-width: 860px;
    min-width: min(560px, 100%);
    margin: 0 auto 60px;
    min-height: 300px;
    /* overflow: visible lets the boat slide onto the banks */
    overflow: visible;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

/* ── BANKS ─────────────────────────────────────────────────────────── */

.bank {
    flex: 0 0 min(200px, 26vw);
    background: linear-gradient(160deg, #4e8c2a 0%, #3d7020 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 10px;
    gap: 10px;
    position: relative;
    z-index: 0;
}

#left-bank {
    border-right: 3px solid #2a5000;
    border-radius: 14px 0 0 14px;
}

#right-bank {
    border-left: 3px solid #2a5000;
    border-radius: 0 14px 14px 0;
}

.bank-label {
    font-weight: bold;
    color: #d4edaa;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── RIVER ─────────────────────────────────────────────────────────── */

#river {
    flex: 1;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #0d47a1 0%, #1565c0 35%, #1976d2 70%, #42a5f5 100%);
    /* overflow: visible so the boat can extend onto the banks */
    overflow: visible;
}

/* Animated water stripes using background-position (no translateY overflow) */
#river::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px, transparent 18px,
        rgba(255, 255, 255, 0.07) 18px, rgba(255, 255, 255, 0.07) 21px
    );
    animation: river-flow 2.4s linear infinite;
    pointer-events: none;
}

@keyframes river-flow {
    from { background-position: 0 0; }
    to   { background-position: 0 21px; }
}

/* ── BOAT TRACK ────────────────────────────────────────────────────── */

#boat-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ── BOAT (positioning anchor only) ───────────────────────────────── */

#boat {
    position: absolute;
    left: -28px;   /* stern overlaps left bank by 28px */
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    cursor: default;
    user-select: none;
}

#boat.rowable { cursor: pointer; }

/* ── BOAT HULL (shape + flip) ──────────────────────────────────────── */

#boat-hull {
    /* Rowboat shape: flat stern on left, pointed bow on right */
    clip-path: polygon(0% 10%, 82% 0%, 100% 50%, 82% 100%, 0% 90%);
    background: linear-gradient(150deg,
        #c49060 0%,
        #a06830 40%,
        #7a4e20 75%,
        #5c3810 100%
    );
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
            drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
    width: min(220px, 32vw);
    min-height: min(112px, 16vw);
    padding: 10px min(50px, 7.5vw) 10px 12px;  /* extra right padding: bow area isn't usable */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s ease;
    transform-origin: center;
}

/* Flip: bow points left when docked on right bank */
#boat-hull.flipped {
    transform: scaleX(-1);
}

/* Counter-flip content so label/text read normally */
#boat-hull.flipped #boat-content {
    transform: scaleX(-1);
}

#boat.rowable:hover #boat-hull {
    background: linear-gradient(150deg,
        #d8a878 0%,
        #b87840 40%,
        #8a5e30 75%,
        #6c4820 100%
    );
}

/* ── BOAT CONTENT ──────────────────────────────────────────────────── */

#boat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: transform 0.45s ease;
    transform-origin: center;
}

.boat-label {
    font-size: 0.62rem;
    font-weight: bold;
    color: #fdf6e3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

.boat-hint {
    font-size: 0.58rem;
    color: #ffd700;
    font-style: italic;
    letter-spacing: 0.04em;
    white-space: nowrap;
    animation: hint-pulse 1.4s ease-in-out infinite;
}

.boat-hint.hidden { display: none; }

@keyframes hint-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ── PEOPLE AREAS (DROP ZONES) ─────────────────────────────────────── */

.people-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    min-width: 70px;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.15s, outline 0.15s;
}

.people-area.drag-over {
    background: rgba(255, 215, 0, 0.28);
    outline: 2px dashed #ffd700;
}

#boat-people {
    min-height: min(52px, 8.5vw);
    min-width: min(112px, 20vw);
    flex-wrap: nowrap;
}

/* ── PERSON TOKENS ─────────────────────────────────────────────────── */

.person {
    width: min(52px, 7vw);
    height: min(52px, 7vw);
    border-radius: 50%;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.person:hover {
    transform: scale(1.12);
    box-shadow: 0 5px 14px rgba(0,0,0,0.4);
}

.person.dragging {
    opacity: 0.35;
    cursor: grabbing;
}

.traveler { background: radial-gradient(circle at 35% 30%, #42a5f5, #1565c0); }
.cannibal { background: radial-gradient(circle at 35% 30%, #ef5350, #c62828); }

/* inactive bank: boat is on the other side */
.bank-inactive .person {
    opacity: 0.55;
    cursor: not-allowed;
}

.bank-inactive .person[draggable] {
    pointer-events: none;
}

/* ── OVERLAYS ──────────────────────────────────────────────────────── */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.overlay.hidden { display: none; }

.overlay-box {
    background: #fdf6e3;
    border: 4px solid #2a2000;
    border-radius: 18px;
    padding: 44px 52px;
    text-align: center;
    max-width: 380px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
}

.overlay-box p {
    font-size: 1rem;
    color: #3a2800;
    margin: 8px 0 0;
    line-height: 1.5;
}

#overlay-loss .overlay-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #c62828;
    text-shadow: 2px 2px 0 #7a0000;
}

#overlay-win .overlay-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #2e7d32;
    text-shadow: 2px 2px 0 #005000;
}

.overlay-restart {
    margin-top: 24px;
    padding: 12px 36px;
    background: #3a2000;
    color: #fdf6e3;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.overlay-restart:hover { background: #5a3400; }

/* ── RESPONSIVE SCALING ─────────────────────────────────────────────── */

/* Scale SVG icons proportionally with the person token (container: min(52px, 9vw)) */
.person svg {
    width: min(26px, 3.5vw);
    height: min(38px, 5.2vw);
}

/* Text/padding tweaks only needed at very small sizes */
@media (max-width: 560px) {
    h1 { margin-top: 16px; }

    .instructions-box {
        margin: 12px 8px 16px;
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .bank {
        padding: 10px 2vw;
        gap: 6px;
    }

    .bank-label { font-size: 0.55rem; }

    .people-area {
        gap: 4px;
        padding: 4px;
    }
}