:root {
  --ring: #3b82f6;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    min-height: 100vh;
    background-image: linear-gradient(180deg, #f5f9ff 50%, #aec0d2 90%);
    padding:10px}
    
.avatar {
    width: clamp(3rem, 5vw, 4rem);
    height: 50px;
    border-radius: 50%; /* makes it perfectly round */
    object-fit: cover;  /* ensures it fills the circle without distortion */
    border: 2px solid #ccc; /* optional: adds a thin border */
    margin-top: 10px;
}

.header {
  background: transparent;
  display: flex;
  margin-top: 1px; ;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}


.header img {
    width: clamp(3rem, 6vw, 5rem);
    height: auto;
    border-radius: 50%;
}



.topTitle{
    font-size: clamp(1.6rem, 6vw, 3.5rem);
    font-weight: bold;
    text-align: center;
}

.title-bar{ 
    width: clamp(18rem, 80vw, 50rem);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    font-size: clamp(1.2rem, 4vw, 3rem);
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px; 
    color: black;
}


.info-bar{ 
    width: clamp(18rem, 80vw, 50rem);
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    font-size: clamp(1.2rem, 4vw, 3rem);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px; 
    color: black;
}

.pill{
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    padding:8px 12px;
    border:1px solid #d1d5db;
    border-radius:9999px;
    background:#fff}

.timer{
    width: clamp(18rem, 60vw, 30rem);
    font-size: clamp(1.6rem, 4vw, 2rem);
    border: 1px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;}

.user{
    width: clamp(18rem, 60vw, 30rem);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    border: 1px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;}



.collection{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}


 
.card{
    background:#fff;
    width: clamp(18rem, 80vw, 50rem);
    margin-left: auto;
    margin-right: auto;
    /*border:2px solid blue;     solid #e5e7eb;*/
    box-shadow:0 8px 10px grey;
    background-color: #f4f4f4;
    border-radius:12px;padding:16px;margin-bottom:16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);}
    
.field{
    display:flex;
    flex-direction: column;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    gap:8px; 
    margin-top: 10px;
}

.field2{
    display:flex;
    width: clamp(10rem, 80vw, 40rem);
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    margin-top: 10px;
}

.answer{
    width: clamp(10rem, 30vw, 20rem);
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    border:2px solid green; 
}

input[type="text"]{padding:10px 12px;border-radius:10px;border:1px solid #d1d5db;min-width:320px; 
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

input[type="text"]:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 4px rgba(59,130,246,.15)}

.row{
    display:flex;
    width: clamp(10rem,60vw, 50rem);
    border: 2px solid red;
    margin-left: auto;
    margin-right: auto;
    gap:12px;align-items:center;flex-wrap:wrap}
    
.rowform{display:flex;
    margin-top: 15px;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    gap:12px;align-items:center;flex-wrap:wrap;}
   
button,.btn{padding:10px 12px;
    border-radius:10px;border:1px solid #1f2937;
    background: #7171b9;
    width: 100px;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color:#fff;font-weight:500;cursor:pointer}
.btn:hover{
    background: #a2ccfb;
    color: black;
}
.btn-secondary{background: #5180b3; color:#111827;border:1px solid #d1d5db;text-decoration:none}
.btn-secondary:hover{background: #a2ccfb; color: black;}
.muted{
    font-size: clamp(1rem, 2.5vw, 1.4rem); 
    color:#6b7280}
.hint{
    font-size: clamp(1rem, 2.5vw, 1.4rem); 
    color:#6b7280}
.score{font-weight:700}
button[disabled]{opacity:.6;cursor:not-allowed}
.badge{display:inline-block;padding:6px 10px;border-radius:9999px;border:1px solid #d1d5db;background:#fff;margin-right:8px}

.button-holder {
    width: clamp(10rem,60vw, 40rem);
    margin-left: auto;
    margin-right: auto;
    display:grid;
    background: transparent;
    border: none;
    padding: 20px;
    cursor: pointer;
}

.button-bar {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 5px;
  margin-top: 100px;
  cursor: pointer;
}