:root {
    --background-color: #0d1117; /* Dark blue/purple */
    --container-bg: #161b22; /* Slightly transparent container */
    --primary-text: #c9d1d9; /* Light grey text */
    --highlight-text: #f0f6fc; /* White */
    --level-color: #f0e68c; /* Khaki/Gold for level */
    --hp-bar-fill: #e63946; /* Red */
    --hp-bar-bg: #4d0000; /* Dark Red */
    --stamina-bar-fill: #2a9d8f; /* Blue */
    --stamina-bar-bg: #002b80; /* Dark Blue */
    --xp-bar-fill: #4361ee; /* Purple */
    --xp-bar-bg: #001566; /* Dark Purple */
    --bar-overlay: rgba(255, 255, 255, 0.05);
    --stat-name-color: #a0a0c0; /* Light purple/grey */
    --stat-value-color: #ffffff; /* White */
    --border-color: rgba(44, 123, 191, 0.5); /* Medium Purple border */
	--border-radius: 10px;
    --button-bg: #21262d;
	--button-hover: #30363d;
    --button-hover-bg: #6a6aaf;
    --button-active-bg: #3a3a6a;
    --button-text: #f0f6fc;
	
--glow: #00ffe0;
--accent: #58a6ff;


    --hp-bar-fill: linear-gradient(90deg, #e63946, #ff6b6b);
    --stamina-bar-fill: linear-gradient(90deg, #2a9d8f, #52e1c4);
    --xp-bar-fill: linear-gradient(90deg, #4361ee, #5f8ef1);


    --font-primary: 'Lato', sans-serif;
    --font-accent: 'Orbitron', sans-serif; /* Techy/Game font */
	
	    --font-main: 'Lato', sans-serif;
		--font-display: 'Orbitron', sans-serif;
}


*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-primary);background-color:var(--background-color);color:var(--primary-text);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);overflow-y:auto}
.stats-container{background-color:var(--container-bg);border:2px solid var(--border-color);border-radius:15px;padding:20px;width:100%;max-width:450px;box-shadow:0 0 20px #9370db4d;backdrop-filter:blur(5px);display:flex;flex-direction:column;gap:18px}
.player-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:10px}
#player-name{font-family:var(--font-accent);font-size:1.8em;color:var(--highlight-text);text-shadow:0 0 5px var(--highlight-text)}
.level-display{font-family:var(--font-accent);font-size:1.5em;color:var(--level-color);background-color:#0000004d;padding:5px 10px;border-radius:5px;text-shadow:0 0 8px var(--level-color)}
.level-display span:first-child{font-size:.8em;margin-right:2px}
.stat-bar,.xp-bar{display:grid;grid-template-columns:60px 1fr 80px;align-items:center;gap:10px;margin-bottom:5px}
.stat-label{font-family:var(--font-accent);font-size:.9em;color:var(--stat-name-color);text-align:right;font-weight:700}
.bar-container{position:relative;height:20px;background-color:var(--hp-bar-bg);border-radius:10px;overflow:hidden;border:1px solid #00000080;box-shadow:inset 0 1px 3px #00000080}
.hp-bar .bar-container{background-color:var(--hp-bar-bg)}
.stamina-bar .bar-container{background-color:var(--stamina-bar-bg)}
.xp-bar .bar-container{background-color:var(--xp-bar-bg)}
.bar-fill{position:absolute;top:0;left:0;height:100%;width:100%;border-radius:10px 0 0 10px;transition:width .5s ease-out;box-shadow:0 0 8px #ffffff80}
.hp-bar .bar-fill{background:linear-gradient(to right,var(--hp-bar-fill),darken(var(--hp-bar-fill),15%))}
.stamina-bar .bar-fill{background:linear-gradient(to right,var(--stamina-bar-fill),darken(var(--stamina-bar-fill),15%))}
.xp-bar .bar-fill{background:linear-gradient(to right,var(--xp-bar-fill),darken(var(--xp-bar-fill),15%))}
.bar-overlay{position:absolute;top:0;left:0;height:50%;width:100%;background:linear-gradient(to bottom,#fff3,#fff0);border-radius:10px 10px 0 0}
.stat-value{font-family:var(--font-accent);font-size:.8em;color:var(--highlight-text);text-align:center;background-color:#0003;padding:3px 0;border-radius:3px}
.core-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;padding:15px;background-color:#0003;border-radius:10px;}
.stat-item{display:flex;justify-content:space-between;align-items:center;padding:8px 5px;border-bottom:1px dashed #9370db4d}
.stat-item:last-child{border-bottom:none}
.stat-name{font-size:1em;color:var(--stat-name-color);font-weight:700;text-transform: capitalize;}
.stat-num{font-family:var(--font-accent);font-size:1.2em;color:var(--stat-value-color);font-weight:700;background-color:#0000004d;padding:2px 8px;border-radius:4px;min-width:40px;text-align:right}
.stat-points{text-align:center;font-size:1.1em;margin-top:10px;color:var(--level-color);font-weight:700}
#available-points{font-family:var(--font-accent);background-color:#0000004d;padding:2px 8px;border-radius:4px}
.controls{padding-top:15px;border-top:1px solid #ffffff0d;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.action-button{font-family:var(--font-accent);background-color:var(--button-bg);color:var(--button-text);border:1px solid var(--border-color);border-radius:5px;padding:8px 12px;cursor:pointer;font-size:.9em;transition:background-color .2s ease,transform .1s ease;box-shadow:0 2px 4px #0000004d;margin-bottom:5px}
.action-button:hover{background-color:var(--button-hover-bg)}
.action-button:active{background-color:var(--button-active-bg);transform:scale(0.98)}
.action-button[data-stat]{min-width:40px;margin-right:5px}
.controls hr{width:100%;border:none;border-top:1px dashed var(--border-color);margin:10px 0}
@media (max-width: 400px) {
body{padding:10px}
.stats-container{padding:15px;gap:15px}
#player-name{font-size:1.5em}
.level-display{font-size:1.3em}
.stat-bar,.xp-bar{grid-template-columns:50px 1fr 70px;gap:8px}
.stat-label{font-size:.8em}
.stat-value{font-size:.75em}
.core-stats{grid-template-columns:1fr;gap:10px;padding:10px}
.stat-item{padding:6px 3px}
.stat-name{font-size:.9em}
.stat-num{font-size:1.1em}
.controls{gap:8px}
.action-button{padding:6px 10px;font-size:.8em}
}


/* New */
.bar-container{background-color:#2e3440;border-radius:var(--border-radius);overflow:hidden;position:relative;height:20px}
.bar-fill{height:100%;width:0;transition:width .3s ease-in-out}
.hp-bar .bar-fill{background-color:var(--hp-bar-fill)}
.stamina-bar .bar-fill{background-color:var(--stamina-bar-fill)}
.xp-bar .bar-fill{background-color:var(--xp-bar-fill)}
.controls button{background-color:var(--button-bg);color:var(--button-text);border:none;padding:8px 12px;border-radius:var(--border-radius);font-weight:700;cursor:pointer;transition:background .2s;font-family:var(--font-display)}
.controls button:hover{background-color:var(--button-hover)}
.controls hr{border:0;height:1px;background:#444c56;margin:10px 0}


/* New 333 */

#player-name{margin:0;font-size:1.6rem;text-shadow:0 0 3px #fff3}
.bar-fill{height:100%;width:0;transition:width .5s ease;background-size:200% 100%;animation:fillBar 1.5s ease-in-out}
.hp-bar .bar-fill{background:var(--hp-bar-fill)}
.stamina-bar .bar-fill{background:var(--stamina-bar-fill)}
.xp-bar .bar-fill{background:var(--xp-bar-fill)}
@keyframes fillBar {
0%{width:0}
}

.stat-num{font-size:1rem}
.stat-points{font-size:1rem;color:var(--highlight-text)}
.controls button{background-color:var(--button-bg);color:var(--button-text);padding:10px 14px;border-radius:var(--border-radius);font-weight:700;cursor:pointer;transition:all .25s ease;font-family:var(--font-display);letter-spacing:.5px}
.controls button:hover{background-color:var(--button-hover);}
.controls hr{border:0;height:1px;background:#ffffff0d;margin:10px 0}

#gain-xp{
  padding: 10px 35px;
  border: 1px solid #ffffff1a;
}

/* Old is Gold */

:root {

--hp-bar-fill: #d74343;
--hp-bar-fill:  linear-gradient(90deg, #8c0909, #d74343);

  --stamina-bar-fill: #3b77d0;
  --stamina-bar-fill: linear-gradient(90deg, #1607ca, #435ad7);
    --xp-bar-fill: #cc99ff;
    --xp-bar-fill: linear-gradient(90deg, #c9f, #f15f96);
    --xp-bar-fill: linear-gradient(90deg, #7817d9, #af5ff1);
	--xp-bar-fill: linear-gradient(90deg, #7817d9, #f15f96);	
		--xp-bar-fill: linear-gradient(90deg, #c9f, #f15f96);	
		--xp-bar-fill: linear-gradient(90deg, #5f76f1, #65ccff);
		--xp-bar-fill: linear-gradient(90deg, #0cae1e, #65ff7d);
		--xp-bar-fill: linear-gradient(90deg, #056411, #08c125);
		
}


.stat-points{text-align:center;font-size:1.1em;margin-top:10px;color:var(--level-color);font-weight:700}
.core-stats{border:1px solid var(--border-color)}
.stats-container{background-color:#1a1a2ecc}
.stat-num{font-size:1.2em}
#player-name{text-shadow:0 0 4px var(--glow);text-shadow:0 0 5px var(--highlight-text)}
.controls button{padding:2px 12px}
#gain-xp{background-color:#05488fad;border:1px solid #70a4dbf7}
#gain-xp:hover{background-color:#0660bfad}
#gain-xp:active{background-image:linear-gradient(#0000001f 0 0);transform:translateY(2px)}

/*
.controls button:hover{background-color:#30363d;border-color:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.03)}
*/

.stat-name-input{font-size:1.2rem;padding:2px;border:1px solid #ccc;border-radius:4px;width:100px}


/* Smooth fade-out animation for stats */
.fade-out{opacity:0;transform:translateY(-10px);transition:opacity 1s ease-out,transform 1s ease-out}


/* Toast container styling with animation */
.toast{position:fixed;top:20px;right:20px;background-color:#0ab11c52;color:#fff;padding:12px 24px;border-radius:8px;font-size:16px;opacity:0;transform:translateY(-20px);transition:opacity .5s ease-out,transform .5s ease-out}
.toast-visible{opacity:1;transform:translateY(0)}
.toast-info{background-color:#2196F3}
.toast-error{background-color:#f44336}
.toast-success{box-shadow:0 4px 6px #0000001a}


.bottom-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.bottom-controls .action-button,.bottom-controls label{flex:1 1 100px;text-align:center;padding:8px 12px;border-radius:6px;background-color:#2c3e50;color:#fff;border:none;transition:background-color .2s ease}
.bottom-controls .action-button:hover,.bottom-controls label:hover{background-color:#2b4db573;cursor:pointer}
#close, #close2{background-color:#8f0b0b}
#close:hover, #close2:hover{background-color:#b82b2b}

#close2 {position: relative;top: 4px;}

.bottom-controls{display:none}
.editstats{display:none;}


.mt15{margin-top:15px;}
.mb15{margin-bottom:15px;}


.stats-container {
  position: relative;
  background: rgba(0, 0, 0, 0.6); /* Optional background */
  border: 1px solid rgba(0, 153, 255, 0.3); /* subtle blue border */
  box-shadow:
    0 0 15px rgba(0, 153, 255, 0.4),
    0 0 40px rgba(0, 153, 255, 0.6),
    inset 0 0 10px rgba(0, 153, 255, 0.2);
  border-radius: 10px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(85, 193, 247, 0.82);
}

.stats-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5%;
  width: 110%;
  height: 100%;
  background: radial-gradient(
    ellipse at left center,
    rgba(0, 153, 255, 0.5) 0%,
    transparent 60%
  ),
  radial-gradient(
    ellipse at right center,
    rgba(0, 153, 255, 0.5) 0%,
    transparent 60%
  );
  z-index: -1;
  pointer-events: none;
}