:root {
    --bg-dark: #0d1117;
    --card-bg: #161b22;
    --shiny-gold: #f1e05a;
    --accent-sv: #3b82f6;
    --type-fire: #ff4422; --type-water: #3399ff; --type-grass: #77cc55;
    --type-electric: #ffcc33; --type-ice: #66ccff; --type-fighting: #bb5544;
    --type-poison: #aa5599; --type-ground: #ddbb55; --type-flying: #8899ff;
    --type-psychic: #ff5599; --type-bug: #aabb22; --type-rock: #bbaa66;
    --type-ghost: #6666bb; --type-dragon: #7766ee; --type-dark: #775544;
    --type-steel: #aaaabb; --type-fairy: #ee99ee; --type-normal: #aaaa99;
}

body { background: var(--bg-dark); color: white; font-family: 'Segoe UI', sans-serif; margin: 0; scroll-behavior: smooth; }

.tool-header { background: linear-gradient(135deg, #a01c1c 0%, #4a1ca0 100%); padding: 30px; text-align: center; border-bottom: 4px solid var(--shiny-gold); }
.header-actions { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 15px; }

.save-controls { display: flex; gap: 10px; }
.btn-save, .btn-load { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: 0.2s; }
.btn-save:hover, .btn-load:hover { border-color: var(--shiny-gold); color: var(--shiny-gold); }

.btn-new-hunt { background: var(--shiny-gold); color: #000; border: none; padding: 12px 25px; border-radius: 50px; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(241, 224, 90, 0.4); }
.btn-new-hunt:hover { transform: scale(1.05); background: #fff; }

.section-title { text-align: center; margin: 40px 0 20px; font-size: 1.8rem; text-transform: uppercase; letter-spacing: 2px; }
.title-shiny { color: var(--shiny-gold); }
.section-divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, #30363d, transparent); margin: 50px 0; }

.hunt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; padding: 0 20px; max-width: 1400px; margin: 0 auto; }

/* Card Style */
.session-card { background: var(--card-bg); border: 2px solid #30363d; border-radius: 20px; padding: 25px; display: flex; flex-direction: column; min-height: 520px; transition: 0.4s ease; position: relative; }
.poke-img { width: 120px; height: 120px; object-fit: contain; margin: 0 auto; }
.pokedex-id { text-align: center; color: #8b949e; font-family: monospace; font-size: 0.8rem; }
h3 { text-align: center; text-transform: capitalize; margin: 5px 0 10px; font-size: 1.3rem; }

.type-container { display: flex; gap: 6px; justify-content: center; align-items: center; margin-bottom: 15px; }
.type-badge { font-size: 0.65rem; font-weight: bold; padding: 4px 10px; border-radius: 5px; color: white; text-transform: uppercase; }

.counter-box { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 12px; text-align: center; margin-bottom: 15px; }
.count-display { font-size: 2.5rem; font-weight: bold; display: block; }
.btn-ctrl { background: #30363d; color: white; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; }

.sandwich-container { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; margin-bottom: 15px; }
.sw-row { background: #0d1117; padding: 10px; border-radius: 10px; border-left: 4px solid #444; }
.sw-label { font-size: 0.65rem; color: var(--shiny-gold); font-weight: bold; margin-bottom: 5px; text-align: center; }
.sw-icons { display: flex; justify-content: center; gap: 10px; }
.ing-icon { width: 28px; height: 28px; object-fit: contain; }

.btn-caught { width: 100%; background: none; border: 2px solid var(--shiny-gold); color: var(--shiny-gold); padding: 12px; border-radius: 10px; cursor: pointer; font-weight: bold; margin-top: auto; }

/* Collezione */
.caught-mode .session-card { min-height: auto; padding: 15px; border-color: var(--shiny-gold); transform: scale(0.95); opacity: 0.9; }
.caught-mode .counter-box, .caught-mode .sandwich-container, .caught-mode .btn-caught { display: none; }
.caught-mode .poke-img { width: 80px; height: 80px; }
.masuda-stat { text-align: center; font-size: 0.8rem; color: var(--shiny-gold); background: rgba(241, 224, 90, 0.1); padding: 8px; border-radius: 8px; margin-top: 10px; font-weight: bold; display: none; }
.caught-mode .masuda-stat.is-masuda { display: block; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(4px); }
.modal.hidden { display: none; }
.modal-content { background: #1c2128; padding: 35px; border-radius: 20px; width: 340px; border: 2px solid var(--accent-sv); position: relative; }
.btn-close-modal { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #8b949e; font-size: 1.8rem; cursor: pointer; line-height: 1; }
.btn-close-modal:hover { color: #fff; }

.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; color: #8b949e; font-size: 0.85rem; font-weight: 600; }
.modal-content input, .modal-content select { width: 100%; padding: 12px; background: #0d1117; border: 2px solid #30363d; border-radius: 10px; color: #fff; outline: none; box-sizing: border-box; }
.btn-confirm-modal { width: 100%; background: var(--accent-sv); color: white; border: none; padding: 14px; border-radius: 10px; font-weight: bold; cursor: pointer; }

.tool-footer { text-align: center; padding: 50px 0; }
.btn-back-hub { color: #8b949e; text-decoration: none; border: 1px solid #30363d; padding: 10px 20px; border-radius: 8px; }

.btn-delete-card {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 68, 34, 0.1);
    color: #ff4422;
    border: 1px solid rgba(255, 68, 34, 0.2);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    z-index: 5;
}

.btn-delete-card:hover {
    background: #ff4422;
    color: white;
    transform: scale(1.1);
}