:root{--bg:#0f1428;--bg2:#1b2237;--card:#232c46;--line:#33405f;--text:#e8edf7;--muted:#93a0bd;--primary:#ffd166;--green:#7bd88f}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(1100px 640px at 70% -10%,#1d2a4d 0%,var(--bg) 55%);color:var(--text);font-family:'Thonburi','Leelawadee UI',system-ui,sans-serif;min-height:100vh}
header{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:#0c1020}
.brand{display:flex;gap:10px;align-items:center;margin-right:auto}
.logo{font-size:34px}
h1{font-size:20px}.sub{color:var(--muted);font-size:12px}
.badge{font-size:13px;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
main{max-width:760px;margin:0 auto;padding:18px 14px 60px}
.step{margin:18px 0}
.step h2{font-size:18px;margin-bottom:10px}
.step .n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#1b1602;align-items:center;justify-content:center;font-size:15px;margin-right:6px}
.step.locked{opacity:.45;pointer-events:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kcard{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:16px 12px;text-align:center;cursor:pointer;font-family:inherit;color:var(--text);transition:transform .12s,border-color .12s}
.kcard .em{display:block;font-size:46px;margin-bottom:6px}
.kcard .nm{font-size:16px}
.kcard .ds{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.kcard:active{transform:scale(.97)}
.kcard.picked{border-color:var(--primary);background:#2e3355;box-shadow:0 0 0 3px #ffd16633}
.hint{color:var(--muted);font-size:13px;margin-bottom:8px}
#btn-go{width:100%;font-size:22px;padding:18px;border:0;border-radius:999px;background:var(--primary);color:#1b1602;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 10px 30px #ffd16633}
#btn-go:disabled{opacity:.4;cursor:default;box-shadow:none}
.summary{color:var(--muted);font-size:13px;text-align:center;margin-top:10px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:18px}
.fun{display:flex;gap:10px;align-items:center;font-size:15px;margin:10px 0}
#p-emoji{font-size:30px;animation:spin 1.6s ease-in-out infinite}
@keyframes spin{50%{transform:rotate(18deg) scale(1.15)}}
.bar{height:12px;border-radius:999px;background:var(--card);overflow:hidden;border:1px solid var(--line)}
#p-fill{height:100%;width:4%;background:linear-gradient(90deg,#ffd166,#7bd88f);border-radius:999px;transition:width .6s}
#p-log{margin-top:12px;background:#0b0f1e;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;max-height:180px;overflow:auto;color:var(--muted);font-family:Menlo,monospace;white-space:pre-wrap}
.result{text-align:center}
video{width:100%;border-radius:14px;background:#000;margin:12px 0}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.actions button,.actions .btn{font-size:16px;padding:12px 22px;border-radius:999px;border:0;background:var(--card);color:var(--text);font-family:inherit;cursor:pointer;text-decoration:none}
.actions .primary{background:var(--primary);color:#1b1602;font-weight:800}
#err{position:fixed;inset:0;background:#060911dd;display:flex;align-items:center;justify-content:center;padding:16px;z-index:9}
.errcard{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center;max-width:420px}
.errcard button{margin-top:14px;font-size:15px;padding:10px 24px;border:0;border-radius:999px;background:var(--primary);font-family:inherit}
[hidden]{display:none!important}
.step h2 .tag{font-size:12px;color:var(--muted);font-weight:400;margin-left:6px}
.step .hint{margin-bottom:8px}