*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Arial,sans-serif;background:linear-gradient(135deg,#0f766e,#1e3a8a);color:#0f172a;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;color:#fff}
.topbar h1{margin:0;font-size:1.4rem}
button{font:inherit;padding:10px 18px;border:0;border-radius:10px;background:#e2e8f0;cursor:pointer}
button:hover{filter:brightness(.95)}
button.primary{background:#f59e0b;color:#111;font-weight:700}
.tools button{background:rgba(255,255,255,.2);color:#fff;margin-left:6px}
main{max-width:900px;margin:0 auto;padding:10px 20px 40px}
.screen{display:none;background:#fff;border-radius:18px;padding:24px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.screen.active{display:block}
.sub{color:#475569}
input{font:inherit;padding:10px 14px;border:2px solid #cbd5e1;border-radius:10px;width:100%;max-width:360px;margin:6px 0}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.status{font-size:.85rem;color:#64748b}
.hud{display:flex;justify-content:space-between;font-size:1.1rem}
.timerbar{height:12px;background:#e2e8f0;border-radius:8px;overflow:hidden;margin:10px 0 4px}
#timerFill{height:100%;width:100%;background:#22c55e;transition:width .25s linear,background .3s}
.timertext{font-size:1.6rem;font-weight:800}
.board{display:flex;flex-direction:column;align-items:center;gap:18px;margin:18px 0}
.card{padding:22px 26px;border-radius:16px;font-size:1.25rem;font-weight:700;min-width:200px;box-shadow:0 4px 12px rgba(0,0,0,.15);user-select:none}
.card.question{background:#dbeafe;border:3px solid #3b82f6;max-width:560px}
.pair-zone{border:3px dashed #94a3b8;border-radius:16px;padding:16px 40px;color:#94a3b8}
.pair-zone.over{border-color:#f59e0b;color:#f59e0b}
.answers{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.card.answer{background:#fef3c7;border:3px solid #f59e0b;cursor:grab;transition:transform .15s}
.card.answer:hover{transform:translateY(-4px) rotate(-1deg)}
.card.correct{background:#bbf7d0!important;border-color:#16a34a!important}
.card.wrong{background:#fecaca!important;border-color:#dc2626!important;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.hint{color:#64748b;font-size:.85rem}
.big{font-size:2rem}
.boardlist{text-align:left;max-width:420px;margin:12px auto;padding-left:30px;font-size:1.1rem}
.boardlist li{padding:6px 0;border-bottom:1px solid #e2e8f0}
.boardlist span{float:right;font-weight:700}
.qform{display:flex;flex-direction:column;align-items:center}
table{width:100%;border-collapse:collapse;margin:14px 0;text-align:left;font-size:.95rem}
th,td{padding:8px;border-bottom:1px solid #e2e8f0}
td button{padding:4px 10px;margin-right:4px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}
[hidden]{display:none!important}
.card img{display:block;max-width:100%;max-height:180px;margin:10px auto 0;border-radius:10px;object-fit:contain}
.card.answer img{max-height:140px}
label.file{display:block;font-size:.9rem;color:#475569;margin:4px 0}
label.file input{max-width:260px;border:0}
td img{height:32px;border-radius:4px;margin-right:4px}
/* ---- Admin form (rapi & elegan) ---- */
#admin{text-align:left}
#admin h2{text-align:center}
.qform{align-items:stretch;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:22px;margin:16px 0 24px;gap:16px;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.form-title{margin:0;font-size:1.1rem;color:#0f172a}
.field{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;border-top:4px solid #3b82f6}
.field.benar{border-top-color:#16a34a}
.field.salah{border-top-color:#dc2626}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lbl{font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#475569}
.field input[type=text],.field input:not([type]){max-width:none;width:100%;margin:0;padding:11px 14px;border:1.5px solid #cbd5e1;border-radius:10px;background:#f8fafc;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus{outline:none;border-color:#0f766e;background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.18)}
.upload{position:relative}
.tile{display:flex;align-items:center;justify-content:center;min-height:84px;border:2px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#64748b;cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s;text-align:center;font-size:.9rem;margin:0}
.tile:hover{border-color:#0f766e;background:#f0fdfa;color:#0f766e}
.tile .ph small{display:block;opacity:.7}
.tile .prev{max-width:100%;max-height:150px;object-fit:contain;display:block}
.upload .rm{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border-radius:50%;background:rgba(15,23,42,.75);color:#fff;line-height:1}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.actions .primary{min-width:150px;box-shadow:0 2px 6px rgba(245,158,11,.4)}
#qTable{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(15,23,42,.08)}
#qTable th{background:#f1f5f9;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#475569}
#qTable tbody tr:hover{background:#f8fafc}
#btnBackHome2{display:block;margin:0 auto}
@media(max-width:640px){.duo{grid-template-columns:1fr}.qform{padding:14px}}
/* ---- Tema ceria ---- */
body{background:linear-gradient(135deg,#7c3aed 0%,#ec4899 45%,#f59e0b 100%) fixed;position:relative;overflow-x:hidden}
body::before,body::after{content:"\1F48A  \1F9B7  \1F9EA  \1F489  \1F52C  \1FA7A  \2795  \2B50";position:fixed;left:0;right:0;font-size:2.2rem;letter-spacing:1.5rem;white-space:nowrap;opacity:.18;pointer-events:none;animation:drift 40s linear infinite}
body::before{top:12%}
body::after{bottom:8%;animation-direction:reverse}
@keyframes drift{from{transform:translateX(-30%)}to{transform:translateX(0)}}
main,.topbar{position:relative;z-index:1}
.topbar h1{font-size:1.6rem;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.screen{border:4px solid #fff;box-shadow:0 12px 0 rgba(0,0,0,.12),0 18px 40px rgba(0,0,0,.25)}
#home h2,#result h2{font-size:1.9rem;background:linear-gradient(90deg,#7c3aed,#ec4899,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:4px}
#home input{border-color:#c4b5fd;text-align:center;font-size:1.1rem}
#home input:focus{outline:none;border-color:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.2)}
button{transition:transform .12s,box-shadow .12s}
button:hover{transform:translateY(-2px)}
button:active{transform:translateY(1px)}
#btnStart{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:1.2rem;padding:14px 34px;box-shadow:0 5px 0 #15803d;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
#btnBoard{background:#fde68a;box-shadow:0 4px 0 #f59e0b}
#btnAdmin{background:#e9d5ff;box-shadow:0 4px 0 #a855f7}
#btnAgain{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px 0 #15803d}
/* sesi soal */
#game{background:linear-gradient(180deg,#fff 0%,#fdf4ff 100%)}
.hud span{background:#ede9fe;color:#5b21b6;padding:6px 16px;border-radius:999px;font-weight:600}
.hud b{font-size:1.2em}
#score{color:#db2777}
.timerbar{height:16px;background:#f3e8ff;border:2px solid #e9d5ff}
#timerFill{background:linear-gradient(90deg,#22c55e,#84cc16)}
.timertext{color:#7c3aed}
.card.question{background:linear-gradient(135deg,#bae6fd,#c4b5fd);border-color:#6366f1;color:#1e1b4b;font-size:1.4rem;box-shadow:0 6px 0 #6366f1}
.pair-zone{border-color:#f472b6;color:#ec4899;background:#fdf2f8;font-weight:600}
.card.answer{box-shadow:0 6px 0 rgba(0,0,0,.15);font-size:1.3rem;min-width:220px}
.card.answer:nth-child(1){background:linear-gradient(135deg,#fecdd3,#fda4af);border-color:#f43f5e;color:#881337}
.card.answer:nth-child(2){background:linear-gradient(135deg,#a7f3d0,#67e8f9);border-color:#0891b2;color:#134e4a}
.card.answer:hover{transform:translateY(-6px) scale(1.04) rotate(-1.5deg)}
.card.correct{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.12)}}
.hint{color:#a855f7;font-weight:600}
/* ---- Pengaturan admin ---- */
.settings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.set-item{background:#f8fafc;border:1px solid #e2e8f0;border-top:4px solid #0f766e;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.set-item.danger{border-top-color:#dc2626}
.set-item small{color:#64748b}
.set-row{display:flex;gap:10px}
.set-row input{margin:0;max-width:120px;text-align:center}
.btn-danger{background:#fee2e2;color:#b91c1c;font-weight:700;border:1.5px solid #fca5a5}
.btn-danger:hover{background:#dc2626;color:#fff}
@media(max-width:640px){.settings{grid-template-columns:1fr}}