:root {
    --bg-dark: #0a0b10;
    --primary: #00d2ff; /* Neon Blue */
    --primary-dim: rgba(0, 210, 255, 0.1);
    --secondary: #ffd700;
    --panel-bg: rgba(22, 27, 34, 0.95);
    --text-main: #e6edf3;
    --text-muted: #8b949e;
    
    --success: #4ade80;
    --danger: #f87171;
    --warning: #facc15;
    
    --metal: #9ca3af;
    --crystal: #79c0ff;
    --deuterium: #56d364;
    --dm: #d8b4fe;

    --font-tech: 'Rajdhani', sans-serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at 50% 0%, #1c2333 0%, #0b0e14 70%);
    color: var(--text-main);
    font-family: var(--font-body);
    margin: 0; padding: 15px;
    
    /* FIX IMPAGINAZIONE */
    min-height: 100vh;
    display: block; 
    height: auto;
    overflow-y: auto;
}

/* REMOVE SPINNERS */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.background-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 10% 20%, rgba(0, 210, 255, 0.1) 0%, transparent 20%); z-index: -1; pointer-events: none; }

.container { width: 95%; max-width: 1300px; margin: 0 auto; padding: 10px; padding-bottom: 40px; position: relative; }

/* HEADER AGGIORNATO */
.header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; gap: 15px;}
.header-left { display: flex; align-items: center; gap: 15px; } 
.header-right { display: flex; align-items: center; gap: 15px; }

.main-title { font-family: var(--font-tech); font-size: 2rem; font-weight: 700; margin: 0; text-shadow: 0 0 15px rgba(0, 210, 255, 0.4); }
.highlight { color: var(--primary); }
.v-tag { font-size: 0.5em; background: var(--primary-dim); border: 1px solid var(--primary); color: var(--primary); padding: 2px 5px; border-radius: 4px; vertical-align: middle; margin-left: 8px; }

.home-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(0, 210, 255, 0.1); border: 1px solid var(--primary); color: var(--primary); border-radius: 6px; font-size: 1rem; transition: 0.3s; text-decoration: none; box-shadow: 0 0 10px var(--primary-dim); }
.home-btn:hover { background: var(--primary); color: #000; box-shadow: 0 0 20px var(--primary); }

/* TASTO DONAZIONE */
.btn-donate-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 15px;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid #ffd700; color: #ffd700; 
    border-radius: 50px; text-decoration: none;
    font-family: var(--font-tech); font-weight: 700; font-size: 0.8rem;
    letter-spacing: 1px; transition: all 0.3s ease;
}
.btn-donate-header:hover {
    background: #ffd700; color: #000;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.lang-select { background: #000; border: 1px solid rgba(255,255,255,0.2); color: var(--text-muted); padding: 4px 8px; font-family: var(--font-tech); font-weight: 700; font-size: 0.85rem; border-radius: 4px; outline: none; cursor: pointer; transition: 0.3s; }
.lang-select:hover { border-color: var(--primary); color: white; box-shadow: 0 0 10px var(--primary-dim); }
.lang-select option { background-color: #000; color: white; }

/* TOP CONFIG ROW */
.top-dashboard-row { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 20px; align-items: stretch; }

.glass-panel { background: var(--panel-bg); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 10px; padding: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.panel-head h3 { margin: 0; font-family: var(--font-tech); font-size: 1.1rem; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; text-shadow: 0 0 5px var(--primary-dim); }
.compact-head { margin-bottom: 5px; }

/* CONFIG GRID */
.compact-grid { display: flex; flex-direction: column; gap: 10px; }
.grid-row-api { display: flex; gap: 10px; }
.grid-row-settings { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.grid-row-bonus { display: flex; justify-content: space-between; gap: 5px; background: rgba(255,255,255,0.03); padding: 5px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.05); }

.input-wrapper label { display: block; font-size: 0.65rem; color: var(--text-muted); margin-bottom: 2px; font-weight: 600; text-transform: uppercase; }
.input-cyber { background: #000; border: 1px solid rgba(255,255,255,0.2); color: var(--primary); padding: 6px; font-family: var(--font-tech); font-size: 0.95rem; border-radius: 4px; width: 100%; transition: 0.3s; font-weight: 600; }
.input-cyber:focus { box-shadow: 0 0 10px var(--primary-dim); outline: none; border-color: var(--primary); color: white; }
select.input-cyber option { background-color: #000; color: white; }
.input-sm { padding: 4px 6px; font-size: 0.85rem; height: 30px; }

/* MINI INPUTS */
.mini-group { display: flex; flex-direction: column; align-items: center; flex: 1; }
.info-tooltip-wrapper { position: relative; display: flex; align-items: center; gap: 4px; margin-bottom: 3px; cursor: help; }
.info-tooltip-wrapper label { font-size: 0.65rem; color: #aaa; margin: 0; white-space: nowrap; cursor: help; font-weight: 600; }
.info-trigger-tiny { font-size: 0.7rem; color: var(--text-muted); transition: 0.3s; }
.info-trigger-tiny:hover { color: var(--primary); text-shadow: 0 0 8px var(--primary); }

.info-tooltip-text {
    visibility: hidden; opacity: 0; width: 200px; background-color: #0d1117; color: #fff; text-align: center; border-radius: 6px; padding: 6px; position: absolute; z-index: 100; bottom: 130%; left: 50%; transform: translateX(-50%); font-size: 0.7rem; border: 1px solid var(--primary); box-shadow: 0 0 15px rgba(0, 210, 255, 0.3); font-family: var(--font-body); pointer-events: none; transition: 0.2s;
}
.info-tooltip-wrapper:hover .info-tooltip-text { visibility: visible; opacity: 1; }

.input-mini { width: 100%; max-width: 60px; background: #000; border: 1px solid #444; color: white; text-align: center; padding: 2px; border-radius: 3px; font-family: var(--font-tech); font-size: 0.85rem; transition: 0.3s; }
.input-mini:focus { border-color: var(--primary); box-shadow: 0 0 8px var(--primary-dim); outline: none; }

/* MINES GRID LAYOUT */
.mines-grid-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; align-items: stretch; }

.mine-card { display: flex; flex-direction: column; padding: 20px; transition: 0.3s; position: relative; overflow: hidden; border-top: 3px solid transparent; }
.mine-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

/* SPECIFIC BORDERS FOR RESOURCES */
.metal-card { border-top-color: var(--metal); background: linear-gradient(180deg, rgba(156, 163, 175, 0.05) 0%, rgba(22, 27, 34, 0.95) 100%); }
.crystal-card { border-top-color: var(--crystal); background: linear-gradient(180deg, rgba(121, 192, 255, 0.05) 0%, rgba(22, 27, 34, 0.95) 100%); }
.deut-card { border-top-color: var(--deuterium); background: linear-gradient(180deg, rgba(86, 211, 100, 0.05) 0%, rgba(22, 27, 34, 0.95) 100%); }

.mine-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mine-header h3 { font-size: 1.3rem; margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 700; font-family: var(--font-tech); text-transform: uppercase; }
.metal-card h3 { color: var(--metal); text-shadow: 0 0 10px rgba(156, 163, 175, 0.3); }
.crystal-card h3 { color: var(--crystal); text-shadow: 0 0 10px rgba(121, 192, 255, 0.3); }
.deut-card h3 { color: var(--deuterium); text-shadow: 0 0 10px rgba(86, 211, 100, 0.3); }

.level-input-wrapper { display: flex; align-items: center; gap: 8px; }
.level-input-wrapper label { font-size: 0.85rem; color: #aaa; font-weight: bold; }
.in-lvl { width: 70px; background: #000; border: 1px solid #555; color: white; padding: 6px; text-align: center; border-radius: 4px; font-family: var(--font-tech); font-size: 1.1rem; font-weight: bold; transition: 0.3s; }
.in-lvl:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 10px var(--primary-dim); }

.mine-stats { display: flex; flex-direction: column; gap: 10px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.stat-row:last-child { border-bottom: none; margin-top: 5px; }

/* COSTI SU 2 RIGHE - STILI */
.stat-row.top-align { align-items: flex-start; }
.cost-box { display: flex; flex-direction: column; text-align: right; gap: 2px; }
.c-met { color: var(--metal); font-weight: 700; font-family: var(--font-tech); font-size: 1rem; }
.c-cry { color: var(--crystal); font-weight: 700; font-family: var(--font-tech); font-size: 1rem; }

.lbl { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 3px; }
.val { font-family: var(--font-tech); font-weight: 600; color: #eee; font-size: 1rem; }
.highlight-green { color: var(--success); text-shadow: 0 0 5px rgba(74, 222, 128, 0.3); }

.roi-row { background: rgba(0, 210, 255, 0.05); padding: 10px; border-radius: 5px; border: 1px solid var(--primary-dim); margin-top: 5px; }
.big-neon { font-size: 1.5rem; color: var(--primary); text-shadow: 0 0 10px var(--primary); font-weight: 700; }

.bottom-actions { display: flex; justify-content: center; margin-top: 20px; }
.btn-reset { padding: 10px 25px; background: transparent; border: 1px solid var(--danger); color: var(--danger); border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.3s; font-family: var(--font-tech); letter-spacing: 1px; font-size: 0.9rem; }
.btn-reset:hover { background: var(--danger); color: white; box-shadow: 0 0 15px rgba(248, 113, 113, 0.3); }

/* COOKIE */
.cookie-banner { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 500px; background: #111; border: 1px solid var(--secondary); border-radius: 8px; padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; z-index: 100; transition: bottom 0.5s; }
.cookie-banner.show { bottom: 20px; }
.cookie-text { font-size: 0.8rem; color: #ccc; }
.cookie-btn { background: var(--secondary); color: #000; border: none; padding: 6px 15px; font-weight: bold; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }

@media (max-width: 900px) {
    .top-dashboard-row { grid-template-columns: 1fr; }
    .grid-row-settings { grid-template-columns: 1fr 1fr; }
    .mines-grid-layout { grid-template-columns: 1fr; }
}