/* PyQuest — kesan hover (update 2). Dimuat paling akhir. Hanya pada peranti yang ada tetikus. */
.btn, .menu-card, .nav-link, .quiz-choice, .btn-correct, .btn-wrong, .language-switch button, .name-change, .menu-icon, .menu-arrow, .brand-mark, .choice-key {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nav-link { background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-position: 12px calc(100% - 4px); background-size: 0 3px; }
@media (hover: hover) and (pointer: fine) {
  /* Logo */
  .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
  /* Navigasi: garis kuning meluncur */
  .nav-link:hover:not(.active) { background-size: calc(100% - 24px) 3px; }
  .language-switch button:not(.selected):hover { background: #ffffff1f; color: #fff; }
  /* Butang */
  .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 3px 0 #16304a; }
  .btn-secondary:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--blue); color: var(--blue-d); box-shadow: 0 3px 0 #bcc3b8; }
  .btn-ghost:hover:not(:disabled) { transform: translateX(2px); }
  .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
  /* Kad aktiviti: anjakan dengan bayang keras seperti blok kod */
  .menu-card:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); border-color: var(--ink); background: #fff; }
  .menu-card:hover .menu-icon { background: var(--yellow); color: var(--ink); transform: rotate(-6deg); }
  .menu-card:hover .menu-arrow { transform: translateX(5px); color: var(--ink); }
  .menu-card:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--ink); }
  /* Puzzle: Betul / Salah */
  .btn-correct:hover { transform: translateY(-3px); box-shadow: 0 4px 0 #14583a; }
  .btn-wrong:hover { transform: translateY(-3px); box-shadow: 0 4px 0 #86261f; }
  .btn-correct:active, .btn-wrong:active { transform: translateY(0); box-shadow: none; }
  /* Kuiz: pilihan jawapan */
  .quiz-choice:hover:not(:disabled):not(.selected) { transform: translateX(5px); }
  .quiz-choice:hover:not(:disabled) .choice-key { background: var(--blue); border-color: var(--blue); color: #fff; }
  /* Lain-lain */
  .name-change:hover { color: var(--yellow); }
  .admin-puzzle-row:hover { border-color: var(--blue); }
  .spot-card .v-bad { transition: transform .15s ease; }
  .spot-card:hover .v-bad { transform: translateY(-2px); }
}

/* ===== Update 2: set puzzle, exit, admin, polish ===== */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:8px}
.set-card{position:relative;text-align:left;cursor:pointer;padding:26px 24px;border:2px solid var(--line);background:var(--panel);font:inherit;color:var(--text);display:flex;flex-direction:column;gap:6px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.set-card h3{margin:6px 0 0;font-family:var(--display);font-size:1.35rem;color:var(--ink)}
.set-card p{margin:0;color:var(--muted)}
.set-number{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--blue-l);color:var(--blue-d);font:700 1.3rem var(--display);transition:background .22s,color .22s,transform .22s}
.set-go{margin-top:12px;font-weight:700;color:var(--blue);transition:transform .22s}
.set-card:hover,.set-card:focus-visible{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 16px 34px rgba(23,32,51,.16);background:linear-gradient(180deg,#fff,var(--blue-l))}
.set-card:hover .set-number,.set-card:focus-visible .set-number{background:var(--blue);color:#fff;transform:rotate(-6deg) scale(1.08)}
.set-card:hover .set-go{transform:translateX(6px)}
.set-card:active{transform:translateY(-2px)}
.set-card:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.btn-exit{background:var(--red-l);color:var(--red);border:2px solid var(--red);font-weight:700;cursor:pointer;border-radius:10px;padding:10px 20px;transition:background .2s,color .2s,transform .2s}
.btn-exit:hover{background:var(--red);color:#fff;transform:translateY(-2px)}
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.admin-tab{border:2px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 16px;border-radius:999px;font:600 .9rem var(--font);cursor:pointer;transition:all .2s}
.admin-tab:hover{border-color:var(--blue);transform:translateY(-2px)}
.admin-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
.admin-login .text-input{margin-bottom:12px}
.result-card{animation:pq-rise .45s ease both}
.card{transition:box-shadow .25s ease,transform .25s ease}
@keyframes pq-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main>section{animation:pq-rise .35s ease both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Update 2: pilihan masa kuiz (per soalan) ===== */
.timed-options{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.timed-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.btn-timed{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px;border:2px solid var(--blue);background:var(--blue-l);color:var(--blue-d);border-radius:12px;cursor:pointer;font-family:var(--font);transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn-timed strong{font:700 1.4rem var(--display)}
.btn-timed small{font-size:.8rem;opacity:.85}
.btn-timed:hover:not(:disabled),.btn-timed:focus-visible{background:var(--blue);color:#fff;transform:translateY(-4px);box-shadow:0 10px 22px rgba(23,32,51,.18)}
.btn-timed:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:420px){.timed-buttons{gap:8px}.btn-timed strong{font-size:1.2rem}}

/* ===== Update 2: ular membelit tulisan PyQuest ===== */
.brand-text{position:relative;display:inline-block;padding:0 16px 0 10px;isolation:isolate}
.brand-word{position:relative;z-index:1;display:inline-block}
.snake-layer{position:absolute;left:0;top:50%;overflow:visible;pointer-events:none}
.snake-back{z-index:0}
.snake-front{z-index:2}
.snake-tongue{animation:snake-tongue 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
@keyframes snake-tongue{0%,62%,100%{opacity:0;transform:scaleX(.2)}68%,88%{opacity:1;transform:scaleX(1)}}
.brand:hover .snake-front{filter:drop-shadow(0 0 4px rgba(79,212,140,.7))}

/* ---- Hover tambahan (update 3): Info + admin ---- */
.info-chip, .info-acc summary, .admin-main-tab, .info-tile, .info-links a, .live-kpi, .live-card { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (hover: hover) and (pointer: fine) {
  .info-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
  .info-acc summary:hover { background: #f4f7fa; }
  .info-acc summary:hover:after { transform: scale(1.25); }
  .info-tile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); border-color: var(--ink); }
  .info-links a:hover { border-bottom-color: var(--yellow); }
  .admin-main-tab:hover:not(.active) { color: var(--ink); background: #ffffff80; }
  .live-kpi:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(23,32,51,.12); border-color: var(--blue); }
  .live-bar:hover .live-bar-fill { background: var(--blue); }
  .live-bar:hover .live-bar-val { color: var(--ink); }
}
.info-chip:focus-visible, .info-acc summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }