/* Highlight question when an answer is dragged over it */
#qGrid button.drag-over {
  outline: 4px solid #ff9800;       /* strong orange */
  outline-offset: 3px;
  background-color: rgba(255, 152, 0, 0.15);
  box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.25);
}

/* Optional: clearer focus for tap / keyboard */
#qGrid button:focus-visible {
  outline: 4px solid #2196f3;       /* strong blue */
  outline-offset: 3px;
}


  :root{
    --bg:#0b0b0b; --paper: #fefbda; --ink:#f2f2f2; --muted:black;
    --accent: #008400; --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(3rem, 6vw, 5rem);
    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.4rem, 4vw, 3rem);   /* judul di antara logo dan avatar*/
    font-weight: bold;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 2px; 
    color: black;
}
  
/*block in the middle 8 */
.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}



/* Two-column layout: questions left, answers right */
  .ddWrap{display:grid; grid-template-columns: 1.1fr 0.90fr; gap:12px; align-items:start; }
  .ddCol{ background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:8px; }
  .ddCol h3{ margin:0 0 10px 0; font:700 16px/1.2 system-ui; letter-spacing:.35px; color: black;}
  .gridQ{ display:grid; gap:8px; }
  .gridA{ display:grid; gap:8px; } 
  @media (max-width: 860px){
    .ddWrap{ grid-template-columns:  1fr; }
  }
  
/* QUESTION DISPLAY */
.gridQ {
  display: grid;
  grid-template-columns: 1fr 1fr; /* phones */
  gap: 6px;
}
@media (min-width: 900px) {
.gridQ { grid-template-columns: 1fr 1fr 1fr; } /* desktop: 2 columns */
}

/*Setting number of colums
.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 */
}


.scoreCard {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  color: black;
}

.scoreRow {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  color: black;
}

/* Desktop / laptop */
@media (min-width: 861px){
  .gridQ,
  .gridA{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Phones */
@media (max-width: 860px){
  .gridQ,
  .gridA{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}





  /* 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:3px solid var(--accent); background: #00e100; color: black; 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
  }
.qbtn.attempt-1 { background-color: #fff3cd; color: black; }
.qbtn.attempt-2 { background-color: #ffe8a1; color: black;}
.qbtn.attempt-3,
.qbtn.failed    { background-color: #dd0000; }
.isHidden {
  display: none !important;
}

.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}
  }


  .abtn.dragging{ opacity:0.6; }
  /* Better touch behavior for mobile */
  .abtn{ touch-action:none; }
  .drag-ghost{
    position:fixed; left:0; top:0; z-index:9999;
    pointer-events:none;
    transform:translate(-9999px,-9999px);
    opacity:0.95;
  }
 
  /* Final result box */
  .final-result{
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    overflow: hidden;
    display:none;
  }
  .result-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(2px);
  }
  .result-logo{ height:34px; width:auto; display:block; } 
  .result-title{ line-height: 1.1; 
      color: black; font-size: clamp(1rem, 2vw, 1.9rem);
  }
  .result-brand{ font-weight:700; font-size: 14px; }
  .result-sub{ font-size: 12px; opacity: .85; }
  .result-badge{
    margin-left:auto;
    font-size:22px;
    line-height:1;
    color: black;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(0,0,0,.10);
  }
  .result-body{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: black;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(0,0,0,.08);
  }
  .result-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    font-size: 14px;
  }
  .result-actions{
    margin-top: 10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
.attemptBadge {
  font-size: 0.7em;
  color: #a00;
  margin-left: 6px;
}