: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}.container.fullscreen-mode{max-width:min(1720px,96vw);min-height:calc(100dvh - clamp(24px,3vh,36px));margin-block:clamp(12px,1.5vh,18px);padding:clamp(18px,2.4vh,32px) clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.4vh,18px)}.container.fullscreen-mode .title-wrap{margin:0}.container.fullscreen-mode .title .base{font-size:clamp(40px,4.6vw,78px)}.container.fullscreen-mode .title .enhanced{font-size:clamp(44px,5.4vw,96px)}.container.fullscreen-mode .tagline{font-size:clamp(18px,1.6vw,24px);margin:.35rem 0 .8rem}.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}.container.fullscreen-mode .panel,.container.fullscreen-mode .card{border-radius:24px;padding:clamp(16px,1.7vh,24px);margin-bottom:0}.timer-bar{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.container.fullscreen-mode .timer-bar{gap:clamp(5px,.7vw,14px);flex-wrap:nowrap}.select{border:2px solid rgba(255,255,255,.22);border-radius:10px;background:#101427;color:var(--text);padding:8px 10px;font-weight:700}.container.fullscreen-mode .select{min-height:54px;padding:10px clamp(6px,1vw,14px);font-size:clamp(14px,1.6vw,25px);flex-shrink:1;min-width:0}.time{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(18px,5vw,30px)}.container.fullscreen-mode .time{font-size:clamp(34px,3.6vw,60px)}.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}.container.fullscreen-mode .button{min-height:54px;border-radius:14px;padding:12px clamp(8px,1vw,16px);font-size:clamp(14px,1.4vw,24px);flex-shrink:1;min-width:0;white-space:nowrap}.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}.guest-actions{display:flex;gap:8px;flex-wrap:wrap}.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}.container.fullscreen-mode .grid{gap:clamp(14px,1.3vw,22px)}@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}.container.fullscreen-mode .guest-head{gap:14px!important}.container.fullscreen-mode .guest-head h3{font-size:clamp(24px,1.9vw,34px)}.container.fullscreen-mode .difficulty-row{gap:clamp(5px,.7vw,12px);flex-wrap:nowrap}.container.fullscreen-mode .guest-actions{flex-wrap:nowrap;align-items:stretch}.container.fullscreen-mode .guest-actions .button{display:flex;align-items:center;flex:1 1 0;justify-content:center;min-width:0;padding:10px 12px;font-size:clamp(14px,.95vw,18px);white-space:nowrap}.container.fullscreen-mode .diff{border-radius:14px;padding:10px clamp(8px,1vw,16px);font-size:clamp(14px,1.3vw,22px);flex-shrink:1;min-width:0}.container.fullscreen-mode .quirk{min-height:clamp(128px,16vh,184px);padding:clamp(14px,1.6vh,20px);font-size:clamp(25px,1.9vw,34px);line-height:1.4}.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}.container.fullscreen-mode .footer-credit{margin-top:0;font-size:clamp(16px,1.1vw,20px)}@media(min-width:900px){.container.fullscreen-mode .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}