:root{--wine:#641838;--wine2:#8f294d;--cream:#f7f1e7;--paper:#fffdf8;--ink:#271b1f;--muted:#826f74;--gold:#c99847;--green:#2e8b66;--red:#ce4658;--shadow:0 18px 50px rgba(59,19,35,.14)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}.topbar{height:78px;background:rgba(255,253,248,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(100,24,56,.1);display:flex;align-items:center;padding:0 4vw;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--wine);font-family:'Playfair Display';font-size:22px;font-weight:800}.brandmark{width:38px;height:38px;border-radius:12px 12px 18px 18px;background:var(--wine);color:white;display:grid;place-items:center;font-size:24px;box-shadow:0 7px 16px #64183836}.room-badge{margin:auto;background:#f0e2d7;border-radius:30px;padding:8px 10px 8px 17px;color:var(--muted);font-size:11px;letter-spacing:1.5px}.room-badge b{color:var(--wine);font-size:14px;letter-spacing:2px;margin:0 7px}.room-badge button{border:0;background:white;border-radius:50%;width:28px;height:28px;color:var(--wine);cursor:pointer}.online{margin-left:auto;font-size:12px;color:#6f7e74;display:flex;align-items:center;gap:7px}.online i,.live-dot{width:8px;height:8px;background:#52b788;border-radius:50%;box-shadow:0 0 0 4px #52b78820}.offline i{background:#d35d6e}.screen{min-height:calc(100vh - 78px)}.home{display:grid;grid-template-columns:1.1fr .8fr;gap:7vw;align-items:center;max-width:1180px;margin:auto;padding:56px 32px}.hero-copy{position:relative}.hero-copy:before{content:'🍇';position:absolute;font-size:240px;opacity:.035;left:-110px;top:-100px;transform:rotate(-20deg)}.eyebrow,.panel-title span{font-size:11px;letter-spacing:2.4px;font-weight:800;color:var(--gold)}h1{font-family:'Playfair Display';font-size:clamp(55px,7vw,96px);line-height:.94;letter-spacing:-3px;margin:20px 0 26px;color:#332126}h1 em{color:var(--wine);font-style:italic}.hero-copy>p{font-size:18px;line-height:1.65;color:var(--muted);max-width:570px}.feature-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:13px;font-weight:700;color:#645359}.join-card{background:rgba(255,253,248,.95);border:1px solid #fff;border-radius:28px;padding:40px;box-shadow:var(--shadow);position:relative;text-align:center}.glass-icon{font-size:42px;width:74px;height:74px;display:grid;place-items:center;margin:-76px auto 12px;background:var(--wine);border-radius:50%;box-shadow:0 10px 25px #64183840}.join-card h2,.lobby-card h2,.result-card h2{font-family:'Playfair Display';font-size:29px;margin:13px 0 7px}.join-card>p{color:var(--muted);margin:0 0 28px}.join-card label{display:block;text-align:left;font-size:10px;font-weight:800;letter-spacing:1.5px;color:#745f66;margin:15px 0 7px}.join-card input{width:100%;border:1.5px solid #e3d9d2;border-radius:12px;background:#fbf8f2;padding:15px;font:600 15px 'DM Sans';outline:0;margin-top:7px;text-transform:none}.join-card input:focus{border-color:var(--wine);box-shadow:0 0 0 4px #64183810}.primary,.secondary{width:100%;border:0;border-radius:12px;padding:16px 20px;font:700 14px 'DM Sans';cursor:pointer;transition:.2s}.primary{color:white;background:linear-gradient(135deg,var(--wine),var(--wine2));box-shadow:0 9px 20px #64183832;margin-top:15px}.primary:hover{transform:translateY(-2px);box-shadow:0 13px 25px #64183844}.primary span{float:right}.secondary{color:var(--wine);background:#f3e9e2}.separator{display:flex;align-items:center;color:#b5a7aa;font-size:11px;margin:18px 0}.separator:before,.separator:after{content:'';height:1px;background:#e6dcda;flex:1}.separator span{padding:0 12px}.game{display:grid;grid-template-columns:225px 1fr 285px;max-height:calc(100vh - 78px)}.players-panel,.chat-panel{background:rgba(255,253,248,.76);padding:25px 20px;overflow:auto}.players-panel{border-right:1px solid #e5dad2}.chat-panel{border-left:1px solid #e5dad2;display:flex;flex-direction:column}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.panel-title b{font-size:11px;background:#eadbd2;color:var(--wine);padding:4px 8px;border-radius:20px}.player{display:grid;grid-template-columns:39px 1fr auto;gap:10px;align-items:center;padding:9px 0}.avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:800;background:linear-gradient(135deg,#af5c75,#64203a)}.player-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player small{display:block;color:var(--muted);font-size:10px}.score{font:800 12px 'DM Sans';color:var(--gold)}.answered{box-shadow:0 0 0 3px #46a77a42}.stage{padding:28px clamp(20px,4vw,64px);overflow:auto}.progress{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;max-width:650px;margin:0 auto 24px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:1.2px}.progress>div{height:4px;background:#dfd3cc;border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;background:var(--wine);border-radius:4px}.lobby-card,.quiz-card,.result-card,.leaderboard{max-width:650px;margin:5vh auto;background:var(--paper);border-radius:28px;padding:38px;box-shadow:var(--shadow);text-align:center;border:1px solid white}.lobby-card .code{font:800 42px 'DM Sans';letter-spacing:8px;color:var(--wine);background:#f5ebe4;border:1px dashed #cba9b4;padding:16px;border-radius:16px;margin:25px 0 12px}.lobby-card p,.result-card p{color:var(--muted);line-height:1.6}.lobby-card .primary{max-width:310px}.quiz-card{padding:25px 25px 30px}.category{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:2px}.quiz-card h2{font-family:'Playfair Display';font-size:clamp(25px,3vw,34px);line-height:1.2;margin:14px auto 24px;max-width:520px}.answer-stack{position:relative;min-height:245px}.answer-card{position:absolute;inset:0;background:linear-gradient(155deg,#fff 0%,#f5e9df 100%);border:1px solid #eaded7;border-radius:22px;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 13px 32px #45102318;transition:transform .35s,opacity .35s;touch-action:pan-y;cursor:grab}.answer-card:active{cursor:grabbing}.answer-card .letter{width:48px;height:48px;border:2px solid var(--wine);color:var(--wine);display:grid;place-items:center;border-radius:50%;font:800 20px 'Playfair Display';margin-bottom:18px}.answer-card strong{font-size:22px}.answer-card small{margin-top:12px;color:var(--muted)}.swipe-left{transform:translateX(-130%) rotate(-15deg)!important;opacity:0}.swipe-right{transform:translateX(130%) rotate(15deg)!important;opacity:0}.swipe-actions{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:25px}.swipe-actions button{width:59px;height:59px;border-radius:50%;border:1px solid #eadcd5;background:white;box-shadow:0 8px 22px #43112618;font-size:22px;cursor:pointer}.swipe-actions button:nth-child(2){width:auto;border-radius:30px;padding:0 24px;background:var(--wine);color:white;font:700 13px 'DM Sans'}.waiting{padding:75px 20px}.waiting .spinner{width:64px;height:64px;margin:auto;border:3px solid #eaded7;border-top-color:var(--wine);border-radius:50%;animation:spin 1s linear infinite}.waiting h2{font-family:'Playfair Display';font-size:30px}.result-icon{font-size:60px;animation:pop .55s cubic-bezier(.2,1.5,.5,1)}.result-card.success{box-shadow:0 18px 50px #2e8b6622}.result-card.fail{box-shadow:0 18px 50px #ce465822}.correct-answer{background:#ecf7f1;color:var(--green);padding:13px;border-radius:12px;font-weight:800}.leaderboard h2{font-family:'Playfair Display';font-size:34px}.podium{margin:25px 0}.rank{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #eee3dc;text-align:left}.rank:first-child{background:#fff7df;border-radius:14px;border:1px solid #ead497}.rank b:last-child{color:var(--wine)}.messages{flex:1;overflow:auto}.system-message{text-align:center;background:#f2e8df;color:#8b727b;font-size:11px;padding:10px;border-radius:10px;margin-bottom:18px}.message{margin:12px 0;font-size:12px;line-height:1.4}.message b{color:var(--wine);display:block;font-size:11px}.chat-panel form{display:flex;gap:7px;margin-top:15px}.chat-panel input{min-width:0;flex:1;padding:12px;border:1px solid #e3d7d0;border-radius:12px;background:white;outline:0}.chat-panel button{width:42px;border:0;border-radius:12px;background:var(--wine);color:white}.hidden{display:none!important}.mode-title{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--muted);margin:25px 0 10px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}.mode-card{border:1.5px solid #e3d7d0;background:#fbf8f2;border-radius:15px;padding:17px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);cursor:pointer;font-family:'DM Sans'}.mode-card>span{font-size:28px}.mode-card b{font-size:13px}.mode-card small{font-size:10px;color:var(--muted)}.mode-card.selected{border-color:var(--wine);background:#f5e8e8;box-shadow:0 0 0 3px #64183812}.selected-mode{background:#f5e8e8;color:var(--wine);font-weight:800;border-radius:12px;padding:13px;margin:20px 0}.custom-editor{max-width:650px;margin:2vh auto;background:var(--paper);border-radius:28px;padding:34px 38px;box-shadow:var(--shadow);border:1px solid white}.custom-editor h2{font-family:'Playfair Display';font-size:31px;margin:10px 0 6px}.custom-editor>p{color:var(--muted);font-size:13px;margin-bottom:25px}.custom-editor label{display:block;font-size:10px;font-weight:800;letter-spacing:1.3px;color:#745f66;margin:17px 0 8px}.custom-editor label>span{font-weight:500;letter-spacing:0;color:var(--muted)}.custom-editor #customPrompt,.custom-editor textarea{width:100%;border:1.5px solid #e3d9d2;border-radius:12px;background:#fbf8f2;padding:14px;font:600 14px 'DM Sans';outline:0;margin-top:7px}.custom-editor textarea{min-height:78px;resize:vertical}.custom-editor input:focus,.custom-editor textarea:focus{border-color:var(--wine);box-shadow:0 0 0 4px #64183810}.editor-heading{display:flex;justify-content:space-between;margin:22px 0 8px;font-size:10px;font-weight:800;letter-spacing:1.3px;color:#745f66}.editor-heading small{font-weight:500;letter-spacing:0;color:var(--muted)}.option-field{display:grid;grid-template-columns:24px 32px 1fr 32px;gap:8px;align-items:center;margin:8px 0}.option-field>span{width:29px;height:29px;border-radius:50%;background:#f0e2d7;color:var(--wine);display:grid;place-items:center;font-weight:800;font-size:12px}.option-field .option-text{width:100%;border:1.5px solid #e3d9d2;border-radius:12px;background:#fbf8f2;padding:12px;font:600 14px 'DM Sans';outline:0}.option-field input[type=radio]{accent-color:var(--wine);width:18px;height:18px}.option-field button{border:0;background:transparent;color:#a58e95;font-size:22px;cursor:pointer}.add-option{border:1px dashed #cba9b4;background:transparent;color:var(--wine);border-radius:10px;padding:10px 14px;font:700 12px 'DM Sans';cursor:pointer;margin-top:5px}.result-actions{display:grid;grid-template-columns:.65fr 1.35fr;gap:10px}.result-actions .primary,.result-actions .secondary{margin-top:15px}#toast{position:fixed;z-index:20;bottom:25px;left:50%;transform:translate(-50%,20px);background:#2e2025;color:white;padding:12px 18px;border-radius:12px;opacity:0;transition:.25s;pointer-events:none;font-size:13px}#toast.show{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;pointer-events:none;z-index:12}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{0%{transform:scale(.1) rotate(-20deg)}100%{transform:scale(1)}}@media(max-width:900px){.home{grid-template-columns:1fr;max-width:620px;text-align:center;padding-top:70px}.hero-copy>p{margin:auto}.feature-row{justify-content:center}.join-card{margin-top:35px}.game{grid-template-columns:1fr;max-height:none}.players-panel{border:0;border-bottom:1px solid #e5dad2;padding:14px 20px}.players-panel #players{display:flex;overflow:auto;gap:18px}.player{min-width:125px}.chat-panel{border:0;border-top:1px solid #e5dad2;min-height:330px}.stage{min-height:650px}.progress{margin-top:6px}}@media(max-width:540px){.topbar{height:65px;padding:0 15px}.brand>span:last-child{display:none}.online span{display:none}.room-badge{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.screen{min-height:calc(100vh - 65px)}.home{padding:52px 17px}.hero-copy h1{font-size:54px;letter-spacing:-2px}.hero-copy>p{font-size:15px}.feature-row{font-size:11px;gap:9px}.join-card{padding:30px 20px}.game{display:block}.stage{padding:20px 13px;min-height:610px}.lobby-card,.quiz-card,.result-card,.leaderboard{padding:24px 17px;margin:18px auto;border-radius:22px}.quiz-card h2{font-size:25px}.answer-stack{min-height:250px}.answer-card{padding:20px}.answer-card strong{font-size:19px}.players-panel{overflow:hidden}.chat-panel{padding:22px 16px}.progress{grid-template-columns:auto 1fr}.progress b{grid-column:1/-1;text-align:center}.glass-icon{margin-top:-65px}.mode-grid{grid-template-columns:1fr}.custom-editor{padding:24px 17px;margin:18px auto;border-radius:22px}.option-field{grid-template-columns:22px 28px 1fr 25px}.editor-heading small{display:none}.result-actions{grid-template-columns:1fr}}