/********************************************/
/********************************************/
/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
/********************************************/
/********************************************/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
:root{
  --bg1:#0f1117; --bg2:#151a22;
  --glass: rgba(255,255,255,.06);
  --glass-stroke: rgba(255,255,255,.12);
  --text:#e8edf5; --muted:#a9b4c8;
  --accent:#86a8ff;

  --ok:#34d399; --warn:#fbbf24; --bad:#ff6b6b;

  --round:18px;
  --shadow-1: 0 12px 30px rgba(0,0,0,.35);
  --shadow-2: 0 4px 14px rgba(0,0,0,.35) inset;
}

/* ========= LAYOUT ========= */
html,body{height:100%;margin:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 20% 0%, #10131a 0, transparent 50%),
    linear-gradient(140deg, var(--bg1), var(--bg2));
  display:grid; place-items:center;
}
.container{
  width:min(1100px, 94vw);
  display:grid; gap:14px;
  grid-template-rows:auto 1fr auto;
}

/* ========= TOP BAR ========= */
.toolbar{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:14px 16px;
  border-radius: var(--round);
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1);
}
.left, .right{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.hint{color:var(--muted); font-size:14px}
.badge{
  font-weight:900; letter-spacing:.2px;
  padding:8px 14px; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border:1px solid var(--glass-stroke);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Buttons */
.btn{
  border:1px solid var(--glass-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  color:var(--text); padding:9px 14px; border-radius:12px;
  cursor:pointer; transition:transform .06s ease, filter .15s;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.btn:hover{ filter: brightness(1.08) }
.btn:active{ transform: translateY(1px) }
.btn--accent{ background: linear-gradient(180deg, rgba(134,168,255,.35), rgba(134,168,255,.15)) }

/* Switch */
.switch{display:inline-flex; align-items:center; gap:10px; color:var(--text)}
.switch input{
  appearance:none; width:46px; height:28px; border-radius:999px; position:relative;
  background: rgba(255,255,255,.08); border:1px solid var(--glass-stroke);
  outline:none; cursor:pointer; transition:.2s; backdrop-filter: blur(4px);
}
.switch input::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#0f1218; border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  transition:left .2s, background .2s;
}
.switch input:checked{ background: rgba(134,168,255,.35) }
.switch input:checked::after{ left:23px; background: var(--accent) }

/* ========= CANVAS CARD ========= */
.card{
  position:relative; overflow:hidden;
  border-radius: calc(var(--round) + 6px);
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-1);
}
.inner{
  position:relative; margin:14px; border-radius: var(--round);
  background: #0c0f15;
  box-shadow: var(--shadow-2), 0 1px 0 rgba(255,255,255,.03) inset;
  overflow:hidden;
}
canvas{display:block; width:100%; height:66vh; min-height:420px}

/* Overlay score */
.overlay{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.big{
  font-size: clamp(40px, 10vw, 110px);
  font-weight:900; letter-spacing:.5px;
  color: var(--accent);
  text-shadow: 0 3px 14px rgba(0,0,0,.45);
	opacity:0.1;
}

/* Legend + Tip */
.legend{
  position:absolute; left:14px; bottom:14px; font-size:12px; color:var(--muted);
  background: rgba(255,255,255,.07); padding:6px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}
.tip{
  text-align:center; color:var(--muted); font-size:13px;
  padding:10px 14px; border-radius: var(--round);
  background: var(--glass); border:1px solid var(--glass-stroke);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-1);
}

/* Accessibility */
.btn:focus-visible, .switch input:focus-visible{ outline:2px dashed var(--accent); outline-offset:3px }
	
/*Dev*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap");
.dev {
	font-family: "Poppins", sans-serif;
	position: fixed;
	font-size: clamp(8px, 3vw, 14px);
	bottom: 1vw;
	left: 1vw;
	padding: 1em;
	color: #111;
	background-color: white;
	border-radius: 25px;
	cursor: pointer;
	z-index: 100;
	a {
		text-decoration: none;
		font-weight: bold;
		color: #111;
		transition: ease all 0.3s;
		&:hover {
			color: #ef5350;
			text-decoration: underline;
		}
	}
	span {
		display: inline-block;
		transition: ease all 0.3s;
		color: #ef5350;
		&:hover {
			transform: scale(1.2);
		}
	}
}