*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	background: #3E0703;
  }
  
  body{
	font-family: 'Source Code Pro', monospace;
    background: #3E0703;
	/* background: black ; */
	color: #FFF0C4;
  }
  
  a{
	color: #FFF0C4;
  }
  .yellow{
	color: #FFF0C4;
  }
  .correct{
	color: #8C1007;
  }
	.wrong{
	color: #660B05;
	text-decoration: underline;
  }
  .current{
	color: #FFF0C4;
  }
  .center{
	text-align: center;
  }
  .if{
	display: inline-flex;
  }
  /* Utility: prevent text selection for logo/mark */
  .no-select{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .box {
	max-width: 900px;
	padding: 0 30px;
  }
  
  #heading{
	align-self: left;
	margin-top: 50px;
	font-size: 2.2rem;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 800;
	text-transform: capitalize;
	letter-spacing: 0.03em;
	color: #FFF0C4;
	display: inline-block;
  }
  .limits-box{
	text-align: right;
	margin: 0 35px 0 0 ;
	font-size: 15px;
  }
  
  .stats{
	margin: 10px auto 20px auto;
  }
  
  .details{
	font-size: 6rem;
 	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .stat-block{
	padding: 0 30px;
	min-width: 250px;
  }
  
  @media(max-width: 600px){
	.details{
	  font-size: 5rem;
	}
	.stat-block{
	  min-width: 0;
	}
  }
  
  .stat-name{
	font-size: 1rem;
	position: relative;
	top: 45px;
	right: 5px;
  }
  
  .text-display{
	margin: 0 0 22px 0;
	font-size: 21px;
	text-align: left;
	min-height: 200px;
  }
  
  input:focus, textarea:focus, select:focus, a:focus{
	outline: 0 ;
  }
  a:focus,a:hover{
	color: #8C1007;
	text-decoration: none;
  }
  
  footer{
	padding: 20px;
	font-size: 15px;
  }

  /* minimal footer */
  .app-footer{
    margin-top: 0.5rem;
    padding-bottom: 1.5rem;
    color: #FFF0C4;
    opacity: 0.85;
  }
  .app-footer .footer-link{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFF0C4;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .app-footer .footer-link:hover{
    background: rgba(255, 240, 196, 0.18);
    color: #3E0703;
    box-shadow: 0 0 0 1px rgba(255,240,196,0.35);
  }
  .app-footer .footer-link:focus-visible{
    outline: none;
    background: rgba(255, 240, 196, 0.24);
    color: #3E0703;
    box-shadow: 0 0 0 2px #FFF0C4;
  }
  .app-footer .footer-link:active{
    background: #FFF0C4;
    color: #3E0703;
    box-shadow: 0 0 0 2px #FFF0C4 inset;
  }
  
  .restart-button{
	padding: 1rem;
  }
  
  /* shadcn-inspired buttons */
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(102,11,5,0.6);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    color: #FFF0C4;
    box-shadow: 0 10px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
  }
  .btn .btn-label{ letter-spacing: 0.01em; }
  .btn i{ font-size: 0.95rem; }
  .btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); }
  .btn:active{ transform: translateY(0); box-shadow: 0 10px 20px rgba(0,0,0,0.45); }
  .btn:focus-visible{ outline: 2px solid #FFF0C4; outline-offset: 2px; }

  .btn-primary{ background: linear-gradient(180deg, #8C1007, #660B05); border-color: rgba(102,11,5,0.85); color: #FFF0C4; }
  .btn-primary:hover{ background: linear-gradient(180deg, #A31308, #731108); }
  .btn-primary:active{ background: linear-gradient(180deg, #7F0F06, #5A0D05); }

  .btn-secondary{ background: transparent; border-color: #FFF0C4; color: #FFF0C4; }
  .btn-secondary:hover{ background: rgba(255,240,196,0.14); border-color: #FFF0C4; }
  .btn-secondary:active{ background: rgba(255,240,196,0.22); }

  /* keep text area and paragraph styling intact */
  .text-display, textarea{ font-family: 'Source Code Pro', monospace; }

  textarea{
	background: #3E0703;
	border: solid, #660B05;
	border-width: 2px;
	border-radius: 10px;
	color: #FFF0C4;
	padding: 10px;
	font-size: 1.2rem;
	resize: none;
	text-align: center;
	margin-bottom: 15px;
  }

  .restartText{
	font-weight: 500;
	font-size: 1.5rem;
	background-color:rgba(0, 255, 255, 0.31);
	border-radius: 10px ;
	margin: 5px;
	padding: 5px;
  }