/* Aventuria Life Tracker — mobile-first styling. */

:root {
    --bg: #150c28;
    --bg-2: #1f1440;
    --panel: #271a52;
    --panel-2: #2f2064;
    --text: #f2ecff;
    --muted: #b3a6d9;
    --primary: #7c5cff;
    --primary-d: #5f3fe0;
    --player: #3ba776;
    --player-d: #2c855c;
    --enemy: #d1495b;
    --enemy-d: #b0374a;
    --danger: #e5484d;
    --radius: 14px;
    --card-w: 132px; /* 66 x 2 */
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 800px at 50% -10%, var(--bg-2), var(--bg));
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}

.view {
    min-height: 100vh;
    min-height: 100dvh;
}

.hidden {
    display: none !important;
}

/* ---------- Buttons ---------- */

.btn {
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: var(--panel-2);
    transition: transform .05s ease, filter .15s ease;
    touch-action: manipulation;
}

.btn:active {
    transform: translateY(1px) scale(.98);
}

.btn:hover {
    filter: brightness(1.08);
}

.btn-primary   { background: var(--primary); }
.btn-secondary { background: var(--panel-2); }
.btn-player    { background: var(--player); }
.btn-enemy     { background: var(--enemy); }
.btn-danger    { background: var(--danger); }
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--muted);
}

/* ---------- Lobby ---------- */

#lobby {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lobby-card {
    width: 100%;
    max-width: 380px;
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.lobby-card h1 {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.1;
}

.lobby-card h1 span {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 6px;
}

.tagline {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 22px;
}

.gameid-input {
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .35em;
    padding: 14px 10px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, .12);
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.gameid-input:focus {
    border-color: var(--primary);
}

.lobby-buttons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.lobby-buttons .btn {
    flex: 1;
    padding: 14px;
}

.message {
    min-height: 20px;
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.message.error   { color: #ff8f8f; }
.message.success { color: #7fe3ac; }

/* ---------- Game header ---------- */

.game-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: rgba(21, 12, 40, .9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.game-id-block {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.game-id-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--muted);
}

.game-id-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .18em;
}

.game-time-block {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.game-time-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.header-actions .btn {
    padding: 10px 14px;
    font-size: 14px;
}

/* ---------- Board ---------- */

.board {
    display: grid;
    grid-template-columns: 1fr; /* players on top, enemies below, on every screen */
    gap: 20px;
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.column-title {
    margin: 4px 0 12px;
    font-size: 16px;
    letter-spacing: .04em;
}

.board-column[data-type="player"] .column-title { color: var(--player); }
.board-column[data-type="enemy"]  .column-title { color: var(--enemy); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
    gap: 14px;
    align-content: start;
}

.empty-hint {
    color: var(--muted);
    font-size: 13px;
    opacity: .7;
    margin: 6px 2px;
}

/* ---------- Card ---------- */

.card {
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: grab;
}

/* Drag & drop states (SortableJS). */
.card-chosen {
    cursor: grabbing;
}

.card-ghost {
    opacity: .35;
}

.card-drag {
    cursor: grabbing;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    transform: scale(1.03);
}

.card-face {
    position: relative;
    width: 100%;
    aspect-ratio: 66 / 91; /* standard playing-card ratio */
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* Coloured fallback shown until/unless an image is picked. Use the
   background-image longhand so it does not reset background-size/repeat
   (a `background:` shorthand here would make picked images render unscaled). */
.card--player .card-face {
    background-image: linear-gradient(160deg, var(--player), var(--player-d));
}

.card--enemy .card-face {
    background-image: linear-gradient(160deg, var(--enemy), var(--enemy-d));
}

/* Dead card: kept on the board but clearly darkened. */
.card--dead {
    opacity: .55;
    filter: grayscale(.7) brightness(.6);
}

.card--dead .card-face::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.card-name {
    width: 100%;
    /* Taller dark area (bigger top padding), name lifted up (bigger bottom padding). */
    padding: 30px 8px 14px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 30%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-remove:hover {
    background: var(--danger);
}

/* Life row: [−] value [+] */
.life-row {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 6px;
}

.life-btn {
    height: 44px;
    border: none;
    border-radius: 9px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: var(--panel-2);
    touch-action: manipulation;
    user-select: none;
}

.life-btn:active {
    transform: scale(.94);
}

.life-btn.minus { background: #4a3a7a; }
.life-btn.plus  { background: #4a3a7a; }

.life-value {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.life-value.dead {
    color: var(--enemy);
}

/* ---------- Modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

.modal {
    width: 100%;
    max-width: 340px;
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.modal h3 {
    margin: 0 0 16px;
    font-size: 20px;
}

.field {
    display: block;
    margin-bottom: 14px;
}

.field span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .12);
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.field input:focus {
    border-color: var(--primary);
}

.field input::placeholder {
    color: var(--muted);
    opacity: .6;
}

/* Image picker inside the add-card modal. */
.image-picker {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
}

.image-tile {
    flex: 0 0 auto;
    width: 58px;
    aspect-ratio: 66 / 91;
    border-radius: 8px;
    border: 2px solid transparent;
    background-color: var(--panel-2);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.image-tile.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(124, 92, 255, .35);
}

.image-tile.none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    line-height: 1.1;
}

.image-picker-empty {
    font-size: 13px;
    color: var(--muted);
    opacity: .7;
    padding: 6px 2px;
}

.confirm-text {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 18px;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--panel-2);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    z-index: 200;
    max-width: 90vw;
    text-align: center;
}

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

@media (max-width: 560px) {
    :root { --card-w: 120px; }

    .game-id-value { font-size: 22px; }
}