*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Comic Sans MS,Comic Sans,cursive,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;background:#000}.app{width:100vw;height:100vh;overflow:hidden}.jam-session{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;cursor:crosshair;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.jam-canvas{max-width:100%;max-height:100%;display:block;box-shadow:0 0 50px #ffffff4d}.escape-progress{position:fixed;bottom:40px;left:50%;transform:translate(-50%);width:400px;background:#000c;border:4px solid #FFF;border-radius:20px;padding:20px;text-align:center}.escape-progress-bar{height:20px;background:linear-gradient(90deg,red,#ff7f00,#ff0,#0f0,#00f,indigo,#9400d3);border-radius:10px;transition:width .1s linear;box-shadow:0 0 20px #ffffff80}.escape-progress-text{color:#fff;font-size:18px;font-weight:700;margin-top:10px;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ff1493,#00ced1,gold);display:flex;align-items:center;justify-content:center;animation:rainbow-shift 10s ease infinite}@keyframes rainbow-shift{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(30deg)}}.modal-content{background:#fff;border:8px solid #000;border-radius:20px;padding:60px;max-width:600px;text-align:center;box-shadow:0 0 0 4px #fff,0 0 0 8px #000,0 20px 60px #00000080;animation:modal-bounce .5s ease-out}@keyframes modal-bounce{0%{transform:scale(.5) rotate(-5deg);opacity:0}50%{transform:scale(1.05) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.modal-title{font-size:64px;font-weight:700;color:#ff1493;text-shadow:4px 4px 0 #000,-2px -2px 0 #00CED1;margin-bottom:20px;animation:title-wiggle 2s ease-in-out infinite}@keyframes title-wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.modal-subtitle{font-size:24px;color:#333;margin-bottom:30px;font-weight:700}.modal-description{font-size:20px;color:#666;margin-bottom:40px;line-height:1.6}.modal-description p{margin-bottom:10px}.modal-button{font-family:Comic Sans MS,cursive;font-size:24px;font-weight:700;padding:20px 40px;margin:10px;border:4px solid #000;border-radius:15px;cursor:pointer;transition:all .2s;box-shadow:0 6px #000,0 8px 20px #0000004d;text-transform:uppercase}.modal-button:hover{transform:translateY(-2px);box-shadow:0 8px #000,0 12px 25px #0006}.modal-button:active{transform:translateY(2px);box-shadow:0 4px #000,0 6px 15px #0000004d}.modal-button.primary{background:linear-gradient(180deg,gold,orange);color:#000}.modal-button.primary:hover{background:linear-gradient(180deg,#ffe55c,#ffb733)}.modal-button{background:linear-gradient(180deg,#00ced1,#008b8b);color:#fff}.modal-hint{margin-top:30px;font-size:14px;color:#999;font-style:italic}.modal-actions{display:flex;flex-direction:column;gap:15px;margin-top:30px}.session-info{background:#f0f0f0;border:4px solid #000;border-radius:10px;padding:20px;margin:20px 0;font-size:18px}.session-info p{margin:5px 0;font-weight:700}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}
