@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=Outfit:wght@700;900&display=swap";:root{--primary:#f8c909;--secondary:#b61e33;--secondary-dark:#8e1728;--bg-dark:#040500;--text-dark:#040500;--text-light:#fff}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--primary);color:var(--text-dark);-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif;overflow-x:hidden}h1,h2,h3,h4,h5,h6{color:var(--text-dark);font-family:Outfit,sans-serif}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes flip-in{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.animate-pulse{animation:2s ease-in-out infinite pulse}.app-container{min-height:100vh;display:flex;position:relative;overflow-x:hidden}.main-content{flex-direction:column;flex:1;width:100%;transition:transform .3s;display:flex}.nav-header{z-index:50;background-color:#0000;justify-content:space-between;align-items:center;padding:20px 24px;display:flex;position:relative}.hamburger-btn{cursor:pointer;z-index:100;background:0 0;border:none;flex-direction:column;gap:6px;padding:5px;display:flex}.hamburger-line{background-color:var(--text-dark);border-radius:4px;width:28px;height:4px;transition:all .3s}.hamburger-btn.open .hamburger-line:first-child{transform:rotate(45deg)translate(8px,6px)}.hamburger-btn.open .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.open .hamburger-line:nth-child(3){transform:rotate(-45deg)translate(8px,-6px)}.sidebar-drawer{background-color:var(--bg-dark);z-index:90;flex-direction:column;gap:10px;width:280px;height:100%;padding-top:100px;transition:left .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;top:0;left:-300px;box-shadow:10px 0 30px #00000080}.sidebar-drawer.open{left:0}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:80;opacity:0;pointer-events:none;background-color:#0009;transition:opacity .3s;position:fixed;inset:0}.sidebar-overlay.open{opacity:1;pointer-events:all}.nav-item{color:var(--text-light);border-left:4px solid #0000;align-items:center;gap:15px;padding:18px 30px;font-family:Outfit,sans-serif;font-size:1.2rem;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover,.nav-item.active{border-left-color:var(--primary);color:var(--primary);background-color:#ffffff0d}.home-screen{flex-direction:column;flex:1;align-items:center;padding:20px;display:flex}.bottle-cap-wrapper{justify-content:center;align-items:center;width:260px;height:260px;margin:40px auto;display:flex;position:relative}.bottle-cap{background-color:var(--secondary);border:10px solid var(--secondary-dark);z-index:10;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:220px;height:220px;transition:transform .2s;display:flex;position:relative;box-shadow:0 10px 30px #0006}.bottle-cap:hover{transform:scale(1.05)}.bottle-cap-inner{background-color:var(--secondary);color:#fff;border:2px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:170px;height:170px;font-family:Outfit,sans-serif;font-size:100px;font-weight:900;display:flex}.bottle-cap-ridges{background:repeating-conic-gradient(from 0deg, var(--secondary-dark) 0deg 10deg, transparent 10deg 15deg);z-index:1;border-radius:50%;position:absolute;inset:0;transform:scale(1.15)}.menu-container{flex-direction:column;gap:20px;width:100%;max-width:500px;padding-bottom:50px;display:flex}.menu-item{background-color:var(--secondary);color:#fff;-webkit-user-select:none;user-select:none;border-radius:24px;align-items:center;padding:24px;text-decoration:none;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:0 8px #0003}.menu-item:active{transform:translateY(8px);box-shadow:0 0 #0003}.menu-icon{background-color:#0003;border-radius:14px;justify-content:center;align-items:center;width:50px;height:50px;margin-right:20px;display:flex}.menu-text{flex:1}.menu-title{letter-spacing:1px;font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:800}.menu-subtitle{color:#fffc;margin-top:4px;font-size:.85rem;font-weight:600}.play-screen{flex-direction:column;flex:1;align-items:center;padding:20px;display:flex}.play-header{justify-content:space-between;align-items:center;width:100%;max-width:600px;margin-bottom:20px;display:flex}.progress-text{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:900}.exit-btn{cursor:pointer;background:#0000001a;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.cap-area{perspective:1200px;justify-content:center;align-items:center;width:100%;min-height:320px;display:flex}.flip-cap-container{width:280px;height:280px;transform-style:preserve-3d;cursor:pointer;transition:transform .7s cubic-bezier(.4,.2,.2,1);position:relative}.flip-cap-container.flipped{cursor:default;transform:rotateY(180deg)}.cap-face{backface-visibility:hidden;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.cap-front{z-index:2;isolation:isolate;transform:rotateY(0)}.cap-back{background:radial-gradient(circle, #fff 0%, var(--primary) 100%);border:10px solid var(--secondary-dark);text-align:center;flex-direction:column;padding:30px;overflow:hidden;transform:rotateY(180deg);box-shadow:0 10px 30px #0006,inset 0 0 30px #0000000d}.question-text{color:var(--text-dark);font-size:1rem;font-weight:800;line-height:1.5}.options-slot{flex-direction:column;gap:15px;width:100%;max-width:500px;margin-bottom:40px;display:flex}.option-btn{cursor:pointer;text-align:left;background-color:#fff;border:none;border-radius:16px;align-items:center;padding:16px;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;transition:transform .1s,background-color .2s;display:flex;box-shadow:0 4px 10px #0000000d}.option-btn:hover:not(:disabled){background-color:#fcfcfc;transform:translateY(-2px)}.option-btn.correct{color:#fff;background-color:#10b981}.option-btn.incorrect{color:#fff;background-color:#ef4444}.option-letter{background-color:var(--primary);color:var(--text-dark);border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;margin-right:15px;font-weight:800;display:flex}.option-btn.correct .option-letter,.option-btn.incorrect .option-letter{color:#fff;background-color:#fff3}.next-action-row{justify-content:flex-end;width:100%;max-width:500px;padding-bottom:20px;display:flex}.next-btn{background-color:var(--bg-dark);color:#fff;cursor:pointer;border:none;border-radius:12px;align-items:center;gap:10px;padding:12px 24px;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:800;transition:transform .1s;display:flex;box-shadow:0 4px #0000004d}.next-btn:active{transform:translateY(4px);box-shadow:0 0}.user-profile-header{align-items:center;gap:15px;display:flex}.avatar-placeholder{background-color:var(--bg-dark);color:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.2rem;font-weight:800;display:flex}.username-header{font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:900}