:root{--bg: #0a0a0f;--panel: #141423;--text: #F4F7FF;--muted: #a7b1c8;--accent: #00E5FF;--accent-2: #FF2D95;--accent-3: #FFE600;--success: #03e27a;--danger: #ff4d4d;--btn: #2a3450;--quirk: #3c4475;--border: rgba(255, 255, 255, .35)}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(1200px 800px at 0% 0%,#141423,#0a0a0f 50%),#0a0a0f;color:var(--text);font-family:Archivo,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}.container{max-width:1200px;margin:0 auto;padding:16px}.title-wrap{text-align:center;margin:20px 0}.title .base{font-weight:800;font-size:clamp(28px,6vw,56px)}.title .enhanced{font-family:Permanent Marker;font-size:clamp(30px,8vw,70px);color:var(--accent-2);transform:rotate(-4deg);display:inline-block;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,0 0 22px rgba(255,45,149,.7)}.tagline{margin:.25rem 0 .5rem;opacity:.85}.panel,.card{background:linear-gradient(145deg,#ffffff0d,#0006);border:2px solid var(--border);border-radius:18px;padding:14px;margin-bottom:16px}.timer-bar{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.select{border:2px solid rgba(255,255,255,.22);border-radius:10px;background:#101427;color:var(--text);padding:8px 10px;font-weight:700}.time{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(18px,5vw,30px)}.time.ok{color:var(--success)}.time.warn{color:var(--accent-3)}.time.danger{color:var(--danger)}.button{cursor:pointer;border:none;border-radius:10px;padding:10px;font-weight:800;transform:scale(1);transition:transform .15s,box-shadow .15s}.button:disabled{cursor:not-allowed;opacity:.6}.button:active{transform:scale(.98)}.button.ghost{background:transparent;color:var(--text);border:2px solid rgba(255,255,.25)}.button.primary{background:linear-gradient(135deg,#ffe867,#ffca3a);color:#000}.button.primary:hover:not(:disabled){box-shadow:0 0 10px #ffe66799}.button.secondary{background:#4fa3ff;color:#000}.button.secondary:hover:not(:disabled){box-shadow:0 0 8px #4fa3ff99}.button.danger{background:linear-gradient(135deg,#ff7676,#ff4d4d);color:#fff}.button.danger:hover:not(:disabled){box-shadow:0 0 8px #ff4d4db3}.button.fullscreen{background:linear-gradient(135deg,#a777e3,#8a4de3);color:#fff}.button.fullscreen:hover:not(:disabled){box-shadow:0 0 8px #8a4de3b3}.button.hide-reveal{background:linear-gradient(135deg,#ff9a4f,#ff7221);color:#fff}.button.hide-reveal:hover:not(:disabled){box-shadow:0 0 8px #ff7221b3}.button.doorbell{background:linear-gradient(135deg,#78c2ff,#4facfe);color:#fff}.button.doorbell:hover:not(:disabled){box-shadow:0 0 8px #4facfeb3}.difficulty-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:0}.diff{border:2px solid rgba(255,255,255,.25);border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}.diff:hover{transform:scale(1.05)}.diff.easy,.diff.mid,.diff.hard{background:#ff2d95;color:#fff}.diff.easy:hover,.diff.mid:hover,.diff.hard:hover{box-shadow:0 0 10px #ff2d9599}.diff.surprise{background:var(--success);color:#000}.diff.surprise:hover{box-shadow:0 0 10px #03e27ab3}.diff.active{background:#00e5ff;color:#000;box-shadow:0 0 0 3px #00e5ff66 inset}.grid{display:grid;gap:16px}@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}.quirk{background:var(--quirk);border:2px dashed rgba(255,255,255,.34);border-radius:12px;padding:10px;margin:12px 0;min-height:64px;font-size:16px;line-height:1.35;transition:filter .3s ease-in-out}.quirk.hidden{filter:blur(5px)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-start;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .18s ease;overflow-y:auto;padding:40px 0}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-dialog{width:min(680px,92vw);background:#1b1b29;border:2px solid var(--border);border-radius:18px;box-shadow:0 10px 30px #0009;color:var(--text);transform:scale(.95);transition:transform .18s ease}.modal-overlay.open .modal-dialog{transform:scale(1)}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 8px}.modal-title{margin:0;font-weight:800;font-size:20px}.modal-body{padding:0 16px 16px;color:var(--muted);line-height:1.6}.modal-body ol{padding-left:20px}.modal-body li{margin-bottom:8px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 16px 16px}.modal-close{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--text);cursor:pointer;font-size:22px;line-height:1;padding:6px 10px;border-radius:10px}.modal-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.quirk{position:relative;overflow:hidden;transition:box-shadow .18s ease,background-color .18s ease,filter .3s ease}.quirk.spinning{filter:blur(2px) saturate(1.05)}.quirk.spinning:after{content:"";position:absolute;top:-45%;right:-45%;bottom:-45%;left:-45%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.09) 70% 76%,transparent 76% 100%);animation:pq-sweep .8s linear infinite;pointer-events:none}@keyframes pq-sweep{to{transform:rotate(360deg)}}.quirk.flash{box-shadow:0 0 0 2px #00e5ff59 inset,0 0 18px #00e5ff40;background:linear-gradient(145deg,#00e5ff0f,#00000040);animation:quirk-reveal-pop .4s ease-out}@keyframes quirk-reveal-pop{0%{transform:scale(.9);opacity:.5}50%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}@keyframes pq-surprise-glow{0%{box-shadow:0 0 8px 2px #03e27a66,0 0 0 2px #03e27a99 inset}33%{box-shadow:0 0 8px 2px #ff2d9566,0 0 0 2px #ff2d9599 inset}66%{box-shadow:0 0 8px 2px #00e5ff66,0 0 0 2px #00e5ff99 inset}to{box-shadow:0 0 8px 2px #03e27a66,0 0 0 2px #03e27a99 inset}}.quirk.surprise-spinning{filter:blur(2px) saturate(1.2);animation:pq-surprise-glow 1.5s ease-in-out infinite}.footer-credit{text-align:center;margin-top:32px;color:var(--muted);font-size:14px;opacity:.8}
