:root{
    --bg:#0b0b0b; --paper: #fefbda; --ink:#f2f2f2; --muted:black;
    --accent:#29a19c; --wrong:#c14141; --ring:rgba(255,255,255,0.08);
    --ok:#0e1716; --okborder:#204d49; --oktext:#bff1ee;
  }
  *{box-sizing:border-box}
html, body{ height: 100%; margin: 0;}
body{
    min-height: 100vh;
    background: linear-gradient(180deg, #fff8e1 0%, #ffe0b2 100%);
    background-attachment: fixed; /* ensures it stays put while scrolling */
    color:var(--ink);
    font:16px system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  
  

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

.header img {
    width: clamp(4rem, 8vw, 6rem);
    height: auto;
}

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

.footer img {
    width: clamp(2rem, 4vw, 3rem);
    height: auto;
}


.title{ 
    font-size: clamp(1.6rem, 4vw, 3rem);   /* judul di antara logo dan avatar*/
    font-weight: bold;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 2px; 
    color: black;
}
  
  
.wrap{max-width:1100px;margin:0 auto;padding:12px 12px 28px}
  @media (min-width:768px){ .wrap{padding:16px 16px 40px} }

  /* Sticky top bar on mobile */
.scorebar{
    position:sticky; top:0; z-index:5; padding:8px 10px; color: white;
    background:linear-gradient(180deg, #008000, #0b0b0b 85%);
    backdrop-filter: blur(6px);
    display:flex; gap:10px; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--ring);
    border-radius: 14px;
  }
.pills{display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.pill{
    padding:3px 8px; background:#008e47; border:1px solid var(--ring);
    border-radius:999px; font-weight:700; font-size: clamp(0.9rem, 2vw, 1.2rem); color:white;
  }
.score{font-weight:700; font-size: clamp(0.9rem, 2vw, 1.2rem);}

.section{margin-top:14px}
.card{
    background: linear-gradient(180deg, #f2f2f2, #c5c5c5); 
    border:1px solid var(--ring);
    border-radius:16px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.32);
  }
.card h2{margin:0 0 6px 0; font-size:18px}
.meta{font-size:16px;color:var(--muted);margin-bottom:8px}

  /* Grids */

/* Questions */
.gridQ {
  display: grid;
  grid-template-columns: 1fr; /* phones */
  gap: 6px;
}
@media (min-width: 900px) {
.gridQ { grid-template-columns: 1fr 1fr; } /* desktop: 2 columns */
}

.gridA {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* phones */
  gap: 6px;
}
@media (min-width:600px) {
.gridA { grid-template-columns: repeat(3, 1fr); } /* small tablets */
}
@media (min-width:900px) {
.gridA { grid-template-columns: repeat(5, 1fr); } /* desktop: 5 columns */
}


  /* Buttons (tap-friendly) questions */
.btn{
    border:1px solid var(--ring); background:#008800; color:var(--ink);
    padding:12px; border-radius:12px; text-align:left; cursor:pointer;
    min-height:44px; /* mobile tap target */
    transition:transform .06s ease, border-color .15s ease, background .15s ease;
  }
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:2px solid var(--accent); outline-offset:2px}
.btn[disabled]{opacity:.6; cursor:not-allowed}

.qbtn.selected, .abtn.selected{outline:2px solid var(--accent); border-color:var(--accent)}
.qbtn.done, .abtn.done{background:var(--ok); border-color:var(--okborder); color:var(--oktext)}
.indexBadge{   /*round shape for number*/
    font:12px/1 monospace; color:#9aa; background: #005900; border:1px solid #1c1c1c;
    padding:2px 6px; border-radius:8px; margin-left:8px
  }

.controls{display:flex; gap:8px; justify-content:flex-end; margin-top:8px}
.ctl{
    border:1px solid var(--ring); background:#151515; color:#e9e9e9;
    padding:8px 10px; border-radius:12px; margin-left: 5px; cursor:pointer; min-height:35px;
  }
.ctl[disabled]{opacity:.5; cursor:not-allowed}

  /* Reduced motion preference */
  @media (prefers-reduced-motion: reduce){
  .btn, .ctl{transition:none}
  }