*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary-color: #ff6b9d;--secondary-color: #c44dff;--success-color: #00e676;--warning-color: #ffeb3b;--bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-bg: rgba(255, 255, 255, .15);--text-color: #ffffff;--text-secondary: #e0e0e0;--border-color: rgba(255, 255, 255, .3);--shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);--glow: 0 0 20px rgba(255, 107, 157, .5);--border-radius: 24px;--transition: all .4s cubic-bezier(.175, .885, .32, 1.275)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-color);color:var(--text-color);min-height:100vh;overflow-x:hidden}.app-container{max-width:90vw;margin:0 auto;padding:12px;display:grid;grid-template-columns:1fr 300px;grid-template-rows:1fr auto;gap:12px;min-height:90vh;transition:grid-template-columns .3s ease}.app-container.panel-left{grid-template-columns:300px 1fr}.app-container.panel-left .game-area{grid-column:2;grid-row:1}.app-container.panel-left .control-panel{grid-column:1;grid-row:1}.toggle-panel-position{position:absolute;top:10px;right:10px;width:40px;height:40px;border:none;background:var(--card-bg);color:var(--text-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:var(--shadow);transition:var(--transition);z-index:100}.toggle-panel-position:hover{background:var(--primary-color);color:#fff;transform:rotate(90deg)}.toggle-panel-position:active{transform:rotate(90deg) scale(.95)}.header{text-align:center;padding:12px;background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-color);margin-bottom:2px}.header h1{font-size:1.8rem;background:linear-gradient(135deg,#ff6b9d,#ff8a80,#c44dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;font-weight:800;text-shadow:0 4px 20px rgba(255,107,157,.3)}.subtitle{color:var(--text-secondary);font-size:1rem;font-weight:500}.game-area{grid-column:1;grid-row:1;background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 72px;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color)}.nose-match-game-area,.nose-dodge-game-area,.nose-hunt-game-area{padding:12px 16px;justify-content:center;height:min(720px,calc(100vh - 24px));max-height:720px;overflow-y:auto}.nose-match-playfield,.nose-dodge-playfield,.nose-hunt-playfield{display:flex;align-items:center;justify-content:center;gap:16px}.nose-match-playfield,.nose-dodge-playfield{align-items:flex-start}.nose-match-stage,.nose-dodge-stage,.nose-hunt-stage{position:relative}.nose-dodge-stage{width:540px;height:540px;flex:0 0 540px}.nose-match-stage{width:560px;height:560px;flex:0 0 560px}.nose-hunt-playfield{width:100%;justify-content:center}.nose-hunt-stage{width:min(100%,1400px);padding:0 56px}.next-item-panel,.nose-dodge-side-guide{flex:0 0 210px;width:210px}.nose-dodge-side-guide{padding:12px;border-radius:18px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px #ffffff0f}.next-item-panel h3,.nose-dodge-side-guide h3{font-size:1rem;margin-bottom:10px;color:var(--text-color)}.next-item-stop-btn{width:100%;margin-top:10px;padding:10px 8px;font-size:.92rem;gap:8px}.nose-dodge-side-guide .direction-guide{max-width:none;margin:0;gap:10px}.nose-dodge-side-guide .guide-item{font-size:.9rem;line-height:1.4}.theme-logo-column{position:absolute;top:24px;bottom:24px;z-index:40;display:flex;flex-direction:column;gap:10px;align-items:center;overflow-y:auto;scrollbar-width:thin}.theme-logo-column-left{left:6px}.theme-logo-column-right{right:6px}.theme-logo-option{width:56px;aspect-ratio:1;padding:6px;border-radius:8px;border:2px solid rgba(255,255,255,.38);background:#ffffff24;cursor:pointer;transition:var(--transition)}.theme-logo-option img{width:100%;height:100%;object-fit:contain}.theme-logo-option:hover:not(.is-disabled){border-color:#ff6b9d;background:#ff6b9d3d;transform:translateY(-2px)}.theme-logo-option.active{border-color:#00e676;box-shadow:0 0 16px #00e6768c}.theme-logo-option.is-disabled{filter:grayscale(1) brightness(.75);opacity:.55;cursor:not-allowed}.nose-status{position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:50;padding:12px 20px;border-radius:20px;border:2px solid rgba(255,107,157,.6);background:#ff6b9d33;color:#fff;font-size:1rem;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #ff6b9d4d}.video-container{position:relative;width:90%;max-width:1180px;aspect-ratio:4/3;background:#0000004d;border-radius:var(--border-radius);overflow:hidden;margin:12px auto;box-shadow:0 10px 10px #0006}.video-container video,.video-container canvas,.video-container .avatar-overlay{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.video-container video{transform:scaleX(-1)}.video-container canvas{z-index:10}.video-container .privacy-canvas{z-index:15;display:none;pointer-events:none}.video-container .privacy-canvas.active{display:block}.avatar-overlay{display:none;z-index:5}.avatar-overlay.active{display:flex;align-items:center;justify-content:center}#avatarImage{max-width:80%;max-height:80%;object-fit:contain;z-index:10}.movement-path{position:absolute;width:50px;height:50px;opacity:0;transform:translate(-50%,-50%);transition:opacity .3s ease;z-index:20;pointer-events:none}.movement-path.active{opacity:1}.movement-path.nose-anchor{border:3px dashed rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 20px #ffffff4d}.movement-path.target-ellipse{border:3px dashed rgba(255,107,157,.9);border-radius:50%;box-shadow:0 0 30px #ff6b9d66}.target-circle{position:absolute;width:30px;height:30px;border:4px solid #ff6b9d;border-radius:50%;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s ease;z-index:25;pointer-events:none;background:#ff6b9d33;box-shadow:0 0 25px #ff6b9d80;overflow:visible}.target-circle.active{opacity:1;animation:jellyBounce 2s ease-in-out infinite}.target-circle:before,.target-circle:after{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:50%;opacity:0;pointer-events:none}.target-circle:before{border:2px solid rgba(255,196,61,.95);box-shadow:0 0 24px #ffc43d8c}.target-circle:after{top:-16px;right:-16px;bottom:-16px;left:-16px;border:2px solid rgba(255,255,255,.7)}.target-circle.hit{opacity:1;animation:targetCircleBurst .26s cubic-bezier(.18,.88,.32,1.2) forwards}.target-circle.hit:before{animation:targetCircleBurstRing .26s ease-out forwards}.target-circle.hit:after{animation:targetCircleBurstRing .26s ease-out 30ms forwards}.target-circle.rpg-target{border:none;background:transparent;box-shadow:none;animation:none}.target-circle.rpg-target .rpg-target-sprite{width:100%;height:100%;background-repeat:no-repeat;display:block;transform-origin:center center;transform:scale(1)}@keyframes targetCircleBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1);box-shadow:0 0 25px #ff6b9d80}45%{opacity:1;transform:translate(-50%,-50%) scale(1.28);filter:brightness(1.45);box-shadow:0 0 38px #ffc43dd9}to{opacity:0;transform:translate(-50%,-50%) scale(1.9);filter:brightness(1.2);box-shadow:0 0 #ffc43d00}}@keyframes targetCircleBurstRing{0%{opacity:0;transform:scale(.72)}20%{opacity:1}to{opacity:0;transform:scale(1.7)}}.real-mode-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;border-radius:var(--border-radius);pointer-events:none;opacity:0;transition:opacity .3s ease}.real-mode-overlay.active{opacity:1}.score-display{position:absolute;left:50%;bottom:12px;transform:translate(-50%);z-index:30;width:calc(100% - 24px);display:flex;justify-content:center;gap:12px}.score-item{display:flex;flex-direction:column;align-items:center;background:#fff3;padding:6px 18px;border-radius:20px;border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 25px #0003;transition:var(--transition)}.score-item:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 12px 35px #ff6b9d4d}.score-label{font-size:1rem;color:var(--text-secondary);margin-bottom:2px;font-weight:600;letter-spacing:.5px}.score-value{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#ff6b9d,#c44dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.control-panel{grid-column:2;grid-row:1;background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:14px;align-self:start;height:min(720px,calc(100vh - 24px));max-height:720px;overflow-y:auto;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-color)}.panel-section{border-bottom:1px solid var(--border-color);padding-bottom:12px}.panel-section:last-child{border-bottom:none;padding-bottom:0}.panel-section h3{font-size:1rem;margin-bottom:10px;color:var(--text-color)}.next-item-preview{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-radius:18px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px #ffffff0f}.next-item-canvas{width:100%;height:auto;aspect-ratio:1;flex:none;border-radius:18px;background:linear-gradient(135deg,#ffffff29,#ffffff0a);border:1px solid rgba(255,255,255,.16)}.next-item-meta{min-width:0}.next-item-name{margin:0 0 6px;font-size:1rem;font-weight:700;color:var(--text-color)}.next-item-hint{margin:0;font-size:.85rem;line-height:1.5;color:var(--text-secondary)}.mode-buttons{display:flex;gap:6px}.mode-btn{flex:1;padding:6px;border:2px solid rgba(255,255,255,.3);background:#ffffff1a;color:var(--text-color);border-radius:20px;cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mode-btn:hover{border-color:#ff6b9d;background:#ff6b9d33;transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px #ff6b9d4d}.mode-btn.active{border-color:#ff6b9d;background:#ff6b9d4d;box-shadow:0 8px 25px #ff6b9d66}.mode-icon{font-size:1.8rem}.avatar-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}.avatar-option{aspect-ratio:1;border:2px solid rgba(255,255,255,.3);background:#ffffff1a;border-radius:16px;cursor:pointer;padding:5px;transition:var(--transition);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.avatar-option:hover{border-color:#ff6b9d;background:#ff6b9d33;transform:translateY(-3px) scale(1.05);box-shadow:0 8px 20px #ff6b9d4d}.avatar-option.active{border-color:#00e676;background:#00e67633;box-shadow:0 0 20px #00e67666}.avatar-option img{width:100%;height:100%;object-fit:contain}.custom-avatar{text-align:center}.custom-avatar-label{display:inline-block;padding:8px 14px;border:2px dashed rgba(255,255,255,.4);border-radius:16px;cursor:pointer;transition:var(--transition);color:var(--text-secondary);background:#ffffff1a}.custom-avatar-label:hover{border-color:#ff6b9d;color:#ff6b9d;background:#ff6b9d33;transform:translateY(-2px);box-shadow:0 8px 20px #ff6b9d4d}.music-control{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.music-control select,.video-effect-control select{width:100%;padding:10px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);border-radius:8px;font-size:.9rem}.video-effect-control{display:flex;flex-direction:column;gap:8px}.video-effect-hint{color:var(--text-secondary);font-size:.85rem;line-height:1.4}.preview-btn{padding:8px 14px;background:#ff6b9d33;border:2px solid rgba(255,107,157,.6);color:#ff6b9d;border-radius:16px;cursor:pointer;transition:var(--transition);font-weight:600}.preview-btn:hover{background:#ff6b9d66;transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px #ff6b9d66}.volume-control{display:flex;align-items:center;gap:10px}.volume-control input[type=range]{flex:1;-webkit-appearance:none;height:6px;background:var(--border-color);border-radius:3px;cursor:pointer}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--primary-color);border-radius:50%;cursor:pointer}#volumeValue{min-width:40px;text-align:right;color:var(--text-secondary)}.game-controls{display:flex;flex-direction:column;gap:8px}.primary-btn,.secondary-btn{padding:12px 16px;border:none;border-radius:16px;font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:12px}.primary-btn{background:linear-gradient(135deg,#ff6b9d,#c44dff);color:#fff;box-shadow:0 8px 25px #ff6b9d66}.primary-btn:hover:not(:disabled){transform:translateY(-4px) scale(1.05);box-shadow:0 12px 35px #ff6b9d80}.secondary-btn{background:#ffffff26;border:2px solid rgba(255,255,255,.3);color:var(--text-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.secondary-btn:hover:not(:disabled){background:#ffffff40;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.primary-btn:disabled,.secondary-btn:disabled{opacity:.5;cursor:not-allowed}.btn-icon{font-size:1.2rem}.instructions{grid-column:1 / -1;background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:24px 32px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-color)}.instructions h3{margin-bottom:20px;text-align:center;font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,#ff6b9d,#c44dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.direction-guide{display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto}.guide-item{display:flex;align-items:flex-start;color:var(--text-secondary)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:1000}.modal.active{display:flex}.modal-content{background:var(--card-bg);padding:40px;border-radius:30px;text-align:center;max-width:450px;width:90%;animation:modalSlide .4s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(255,255,255,.2);box-shadow:0 20px 60px #00000080}@keyframes modalSlide{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-content h2{margin-bottom:20px;font-size:1.8rem;background:linear-gradient(135deg,#ff6b9d,#c44dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-content p{color:var(--text-secondary);margin-bottom:20px}.face-detector-instructions{text-align:left;background:#0003;padding:20px;border-radius:8px;margin-bottom:20px}.face-detector-instructions h3{font-size:1rem;color:var(--primary-color);margin-bottom:12px}.face-detector-instructions ol{margin-left:20px;margin-bottom:15px}.face-detector-instructions li{margin-bottom:10px;line-height:1.6}.face-detector-instructions code{background:#0006;padding:2px 8px;border-radius:4px;font-family:Monaco,Consolas,monospace;color:var(--success-color);word-break:break-all;display:block;margin:5px 0}.face-detector-instructions .note{color:var(--warning-color);font-size:.9rem;margin-bottom:10px}.face-detector-instructions .keyboard-hint{font-size:.85rem;color:var(--text-secondary)}.face-detector-instructions .keyboard-hint code{display:inline;margin:0 2px}.modal-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px}.final-score{margin:35px 0}.final-score p{font-size:1rem;margin-bottom:12px;color:var(--text-secondary)}#finalScore{font-size:4.5rem;font-weight:800;background:linear-gradient(135deg,#ff6b9d,#c44dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-stats{background:#ffffff1a;padding:20px;border-radius:20px;margin-bottom:24px;border:1px solid rgba(255,255,255,.2)}.game-stats p{margin:8px 0;font-size:1rem}.game-stats span{color:#ff6b9d;font-weight:700}.game-over-actions{display:flex;gap:12px;margin-top:24px}.game-over-actions .primary-btn,.game-over-actions .secondary-btn{flex:1;width:100%}@media(max-width:900px){.app-container{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}.game-area,.app-container.panel-left .game-area{grid-column:1;grid-row:1;padding:12px 48px;height:auto;max-height:none}.control-panel,.app-container.panel-left .control-panel{grid-column:1;grid-row:2;height:auto;max-height:none}.instructions{grid-column:1;grid-row:3}.score-display{gap:12px}.score-item{padding:6px 12px}.theme-logo-option{width:48px;border-radius:8px}}@media(max-width:1180px){.nose-match-layout,.nose-dodge-layout,.nose-hunt-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}.nose-match-layout .nose-match-game-area,.nose-dodge-layout .nose-dodge-game-area,.nose-hunt-layout .nose-hunt-game-area{grid-column:1;grid-row:1;height:auto;max-height:none}.nose-match-layout .control-panel,.nose-dodge-layout .control-panel,.nose-hunt-layout .control-panel{grid-column:1;grid-row:2;height:auto;max-height:none}.nose-dodge-playfield{flex-direction:column;align-items:center}.nose-hunt-stage{padding:0 48px}.nose-dodge-side-guide{width:min(540px,100%);flex:none}}@media(max-width:480px){.header h1{font-size:1rem}.nose-status{font-size:.78rem;white-space:normal;text-align:center;max-width:calc(100% - 24px)}.direction-guide{gap:10px}.game-area,.app-container.panel-left .game-area{padding:12px 40px}.nose-dodge-playfield{gap:12px}.nose-hunt-stage{padding:0 40px}.nose-dodge-stage{width:100%;height:auto;aspect-ratio:1;flex:none}.nose-dodge-side-guide h3{font-size:.92rem}.nose-dodge-side-guide{width:100%;padding:12px 10px}.nose-dodge-side-guide .guide-item{font-size:.8rem}.theme-logo-column-left{left:8px}.theme-logo-column-right{right:8px}.theme-logo-option{width:48px;border-radius:6px;padding:4px}.next-item-name{font-size:.92rem}}.game-area.active{border:2px solid var(--primary-color)}@keyframes scorePop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.score-pop{animation:scorePop .3s ease}@keyframes correctFlash{0%{box-shadow:0 0 40px #00e67680}to{box-shadow:none}}@keyframes wrongFlash{0%{box-shadow:0 0 40px #ff6b9d80}to{box-shadow:none}}.feedback-correct{animation:correctFlash .6s ease}.feedback-wrong{animation:wrongFlash .6s ease}@keyframes jellyBounce{0%,to{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.15,.85)}50%{transform:translate(-50%,-50%) scale(.95,1.05)}75%{transform:translate(-50%,-50%) scale(1.05,.95)}}@keyframes jellyButton{0%,to{transform:scale(1)}30%{transform:scale(1.15,.85)}60%{transform:scale(.95,1.05)}}.primary-btn:active:not(:disabled){animation:jellyButton .4s ease}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #ff6b9d80,0 0 40px #c44dff4d}50%{box-shadow:0 0 30px #ff6b9db3,0 0 60px #c44dff80}}.target-circle.active:hover{animation:jellyBounce 2s ease-in-out infinite,pulseGlow 2s ease-in-out infinite}@keyframes floating{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.score-item:hover .score-value{animation:floating 1s ease-in-out infinite}@keyframes wobble{0%,to{transform:translate(0)}15%{transform:translate(-10px) rotate(-3deg)}30%{transform:translate(10px) rotate(3deg)}45%{transform:translate(-10px) rotate(-3deg)}60%{transform:translate(10px) rotate(3deg)}}.avatar-option:hover{animation:wobble .5s ease}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}body{background-size:200% 200%;animation:gradientShift 15s ease infinite}.home-game-link{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;text-decoration:none;position:absolute}.home-game-desc{margin:0;color:#fff;font-size:clamp(16px,1.2vw,16px);text-align:left;white-space:pre-line;text-shadow:0 1px 6px rgba(0,0,0,.7);background:#00000040;border-radius:6px;padding:3px 10px}