@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.container{width:100%}.block{display:block}.flex{display:flex}.table{display:table}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--primary:#f54291;--secondary:#40c4d4;--tertiary:#ff912d;--gradient-start:#40c4d4;--gradient-mid:#f54291;--gradient-end:#ff912d;--charcoal:#2c2a35;--rose:#f54291;--orange:#ff912d;--turquoise:#40c4d4}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(180deg,var(--gradient-start)0%,var(--gradient-mid)50%,var(--gradient-end)100%);color:#333;min-height:100vh;font-family:Poppins,system-ui,-apple-system,sans-serif}.waiting-turn-message{text-align:center;background:#fffffff2;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex;box-shadow:0 8px 32px #0000001a}.waiting-avatar{margin-bottom:24px}.avatar-placeholder{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:36px;font-weight:700;animation:2s ease-in-out infinite pulse;display:flex;box-shadow:0 4px 16px #f542914d}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 4px 16px #f542914d}50%{transform:scale(1.05);box-shadow:0 8px 24px #f5429180}}.waiting-turn-message h3{color:var(--primary);margin-bottom:12px;font-size:24px;font-weight:700}.waiting-turn-message p{color:#666;margin-bottom:8px;font-size:16px}.waiting-turn-message .waiting-hint{color:#999;margin-top:16px;font-size:14px;font-style:italic}.waiting-turn-message strong{color:var(--primary);font-weight:600}.waiting-spinner{border:4px solid #f5429133;border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;margin-top:32px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.game-container{flex-direction:column;min-height:100vh;display:flex}.game-header,.mode-selection-header,.matchmaking-header,.private-header,.compte-header,.lobby-header{-webkit-backdrop-filter:blur(12px)!important;z-index:1000!important;background:linear-gradient(90deg,#40c4d4d9,#ff912dd9,#f54291d9)!important;border:1px solid #ffffff14!important;border-radius:0 0 16px 16px!important;width:100%!important;padding:15px 0!important;position:fixed!important;top:0!important;left:0!important;right:0!important;box-shadow:0 12px 40px #00000047!important}.header-content{justify-content:space-between;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:0 20px;display:flex}.logo-link{align-items:center;text-decoration:none;transition:transform .3s;display:flex}.logo-link:hover{transform:scale(1.05)}.header-logo{object-fit:cover;background:var(--turquoise);border-radius:50%;width:60px;height:60px;padding:5px;transition:transform .3s,box-shadow .3s;display:block;box-shadow:0 3px 15px #40c4d44d}.header-logo:hover{box-shadow:0 5px 25px #40c4d480}.header-title-section{text-align:center;flex:1}.game-header h1{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:24px;font-weight:700}.header-subtitle{color:#666;margin-top:4px;font-size:14px}.game-content,.matchmaking-content,.private-content,.compte-content,.lobby-content{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:100px 24px 32px}.game-grid{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px;display:grid}@media (max-width:1024px){.game-grid{grid-template-columns:1fr}}.step-viewer-card,.step-input-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:24px;transition:transform .3s,box-shadow .3s;overflow:hidden;box-shadow:0 8px 32px #0000001a}.step-viewer-card:hover,.step-input-card:hover{transform:translateY(-4px);box-shadow:0 12px 48px #00000026}.card-header{background:linear-gradient(135deg,#40c4d41a,#f542911a);border-bottom:2px solid #f5429133;padding:24px}.card-header h2{color:var(--primary);margin:0 0 8px;font-size:20px;font-weight:700}.card-header p{color:#666;margin:0;font-size:14px}.card-body{padding:24px}.submit-section{text-align:center}.btn-submit{background:linear-gradient(135deg,var(--gradient-mid),var(--gradient-end));color:#fff;cursor:pointer;border:none;border-radius:50px;padding:16px 48px;font-size:18px;font-weight:700;transition:all .3s;box-shadow:0 4px 16px #f542914d}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #f5429166}.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.waiting-message{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.waiting-message .spinner{border:4px solid #f5429133;border-top-color:var(--primary);border-radius:50%;width:48px;height:48px;margin-bottom:24px;animation:1s linear infinite spin}.waiting-message p{color:#666;margin:8px 0;font-size:16px}.waiting-message p:first-of-type{color:var(--primary);font-size:18px;font-weight:600}.welcome-message{text-align:center;background:linear-gradient(135deg,#40c4d41a,#f542911a);border-radius:16px;padding:60px 20px}.welcome-message p{color:#666;font-size:16px;line-height:1.6}.error-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:32px;display:flex}.btn-primary{background:linear-gradient(135deg,var(--gradient-mid),var(--gradient-end));color:#fff;cursor:pointer;border:none;border-radius:50px;padding:12px 32px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #f5429166}.user-menu-container{z-index:1001;position:relative}.user-menu-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;color:#f2f2f2;background:#ffffff40;border:2px solid #fff6;border-radius:12px;align-items:center;gap:10px;padding:8px 12px;font-family:Roboto,sans-serif;font-weight:500;transition:all .3s;box-shadow:0 2px 10px #00000026;display:flex!important}.user-menu-button:hover{color:var(--orange);background:#ffffff59;border-color:#fff9;transform:translateY(-1px);box-shadow:0 4px 15px #0003}.user-menu-trigger{cursor:pointer;background:#fff3;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .3s;display:flex;overflow:hidden}.user-menu-trigger:hover{border-color:var(--primary);transform:scale(1.05)}.user-avatar{background:linear-gradient(135deg,var(--rose,#f54291),var(--orange,#ff912d));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;overflow:hidden}.user-avatar-img{object-fit:cover;width:100%;height:100%}.user-avatar-initials{color:#fff;font-family:Poppins,sans-serif;font-size:14px;font-weight:700}.user-avatar-placeholder{color:#fff;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));justify-content:center;align-items:center;width:100%;height:100%;font-size:18px;font-weight:700;display:flex}.user-menu-name{text-overflow:ellipsis;white-space:nowrap;color:#f2f2f2;max-width:120px;font-size:14px;font-weight:600;overflow:hidden}.user-menu-arrow{flex-shrink:0;width:16px;height:16px;transition:transform .3s}.user-menu-arrow.open{transform:rotate(180deg)}.user-menu-dropdown{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background:#fffffff2;border:2px solid #ffffff4d;border-radius:16px;min-width:240px;animation:.2s slideDown;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 40px #0003}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-menu-header{align-items:center;gap:12px;padding:16px;display:flex}.user-menu-header-avatar{background:linear-gradient(135deg,var(--rose,#f54291),var(--orange,#ff912d));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;overflow:hidden}.user-menu-header-avatar-img{object-fit:cover;width:100%;height:100%}.user-menu-header-avatar-initials{color:#fff;font-family:Poppins,sans-serif;font-size:20px;font-weight:700}.user-menu-header-info{flex:1;min-width:0}.user-menu-header-name{color:var(--charcoal,#2c2a35);text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;font-size:16px;font-weight:700;overflow:hidden}.user-menu-header-email{color:#2c2a3599;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.user-menu-divider{background:#2c2a351a;height:1px;margin:8px 0}.user-menu-items{padding:8px 0}.user-menu-item{color:var(--charcoal,#2c2a35);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:12px 16px;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex!important}.user-menu-item:hover{color:var(--rose,#f54291);background:#f542911a}.user-menu-item svg{color:currentColor;flex-shrink:0;width:20px;height:20px}.user-menu-item-danger{color:#ff4757}.user-menu-item-danger:hover{color:#ff4757;background:#ff47571a}@media (max-width:768px){.user-menu-name{display:none}.user-menu-dropdown{left:auto;right:0}}.canvas-wrapper{width:100%;margin-bottom:20px;position:relative}.drawing-canvas{cursor:crosshair;touch-action:none;background:#fff;border-radius:12px;width:100%;height:400px;box-shadow:0 4px 16px #0000001a}.temp-canvas{pointer-events:none;border-radius:12px;width:100%;height:400px;position:absolute;top:0;left:0}.drawing-tools-enhanced{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:16px;padding:20px;box-shadow:0 4px 20px #0000001a}.tools-section{border-bottom:2px solid #0000000d;margin-bottom:24px;padding-bottom:20px}.tools-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.section-label{color:var(--primary);text-transform:uppercase;letter-spacing:1px;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;font-weight:700;display:flex}.tool-group{flex-wrap:wrap;gap:8px;display:flex}.tool-btn{cursor:pointer;background:#fff;border:2px solid #0000001a;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;transition:all .3s;display:flex;box-shadow:0 2px 8px #0000000d}.tool-btn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.tool-btn.active{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));border-color:var(--primary);color:#fff;transform:scale(1.05);box-shadow:0 4px 16px #f5429166}.color-grid{grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:12px;display:grid}.color-btn{aspect-ratio:1;cursor:pointer;border:3px solid #0000;border-radius:8px;width:100%;transition:all .2s;box-shadow:0 2px 6px #00000026}.color-btn:hover{transform:scale(1.15);box-shadow:0 4px 12px #00000040}.color-btn.active{border-color:var(--primary);transform:scale(1.2);box-shadow:0 0 0 3px #f542914d}.color-picker-toggle{cursor:pointer;background:linear-gradient(135deg,#ff6b6b,#ffd54f,#69f0ae,#80deea,#ba68c8);border:2px solid #fff;border-radius:8px;width:36px;height:36px;font-size:18px;transition:transform .2s;box-shadow:0 2px 8px #0003}.color-picker-toggle:hover{transform:scale(1.1)}.custom-color-picker{background:#ffffff80;border-radius:12px;justify-content:center;align-items:center;margin-bottom:12px;padding:12px;display:flex}.color-input{border:3px solid var(--primary);cursor:pointer;border-radius:12px;width:100%;height:60px;box-shadow:0 4px 12px #0000001a}.current-color-display{background:#fffc;border-radius:12px;align-items:center;gap:12px;padding:12px;display:flex;box-shadow:inset 0 2px 6px #0000000d}.current-color-preview{border:3px solid var(--primary);border-radius:8px;width:40px;height:40px;box-shadow:0 2px 8px #00000026}.current-color-code{color:#333;font-family:Courier New,monospace;font-size:14px;font-weight:700}.brush-size-group{align-items:center;gap:16px;display:flex}.brush-slider{cursor:pointer;-webkit-appearance:none;background:linear-gradient(90deg,#f5429133,#f54291cc);border-radius:4px;outline:none;flex:1;height:8px}.brush-slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));cursor:pointer;border-radius:50%;width:24px;height:24px;transition:transform .2s;box-shadow:0 2px 8px #f5429166}.brush-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.brush-slider::-moz-range-thumb{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));cursor:pointer;border:none;border-radius:50%;width:24px;height:24px;transition:transform .2s;box-shadow:0 2px 8px #f5429166}.brush-slider::-moz-range-thumb:hover{transform:scale(1.2)}.brush-preview{background:#fff;border-radius:12px;justify-content:center;align-items:center;gap:12px;min-width:100px;padding:8px 16px;display:flex;box-shadow:0 2px 8px #0000001a}.brush-dot{border-radius:50%;transition:all .2s;box-shadow:0 2px 6px #0003}.brush-size-label{color:var(--primary);text-align:center;min-width:40px;font-size:14px;font-weight:700}.action-group{flex-wrap:wrap;gap:8px;display:flex}.action-btn{cursor:pointer;color:#333;background:#fff;border:2px solid #0000001a;border-radius:12px;flex:1;min-width:100px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .3s;box-shadow:0 2px 8px #0000000d}.action-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn.btn-clear{color:#fff;background:linear-gradient(135deg,#ff6b6b,#ff1744);border-color:#0000}.action-btn.btn-clear:hover{background:linear-gradient(135deg,#ff1744,#c62828);transform:translateY(-2px);box-shadow:0 4px 16px #ff174466}.color-picker-button{cursor:pointer;background:#fff;border:2px solid #0000001a;border-radius:12px;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:14px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 2px 8px #0000000d}.color-picker-button:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 16px #00000026}.color-preview-circle{border:3px solid #f0f0f0;border-radius:50%;flex-shrink:0;width:32px;height:32px;box-shadow:0 2px 6px #00000026}.color-value{color:#333;letter-spacing:.5px;flex:1;font-family:Courier New,monospace}.color-picker-icon{opacity:.7;font-size:20px;transition:all .2s}.color-picker-button:hover .color-picker-icon{opacity:1;transform:scale(1.1)}.drawing-canvas.eyedropper-cursor{cursor:crosshair}@media (max-width:768px){.drawing-canvas,.temp-canvas{height:300px}.color-grid{grid-template-columns:repeat(6,1fr)}.tool-btn{width:44px;height:44px;font-size:18px}.action-btn{min-width:80px;padding:10px 16px;font-size:13px}.color-picker-button{padding:10px 14px;font-size:13px}.color-preview-circle{width:28px;height:28px}}.mode-selection-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#fffffff2;padding:16px 24px;position:sticky;top:0;box-shadow:0 2px 20px #0000001a}.mode-selection-header .user-menu-container{z-index:1001;position:relative}.mode-selection-content{flex:1;justify-content:center;align-items:center;min-height:calc(100vh - 80px);padding:40px 24px;display:flex}.mode-selection-content .container{width:100%;max-width:1200px;margin:0 auto}.mode-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:inherit;text-align:center;background:#fffffff2;border:2px solid #0000;border-radius:24px;flex-direction:column;align-items:center;padding:40px 32px;text-decoration:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #00000026}.mode-card:before{content:"";background:linear-gradient(90deg,var(--gradient-start),var(--gradient-mid),var(--gradient-end));height:4px;transition:transform .3s;position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.mode-card:hover:before{transform:scaleX(1)}.card-icon{border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin-bottom:24px;transition:all .3s;display:flex;position:relative}.card-icon svg{width:80px;height:80px;transition:all .3s}.mode-card:hover .card-icon svg{transform:scale(1.1)}.card-title{color:var(--primary);margin-bottom:16px;font-size:28px;font-weight:700;line-height:1.2}.card-description{color:#666;flex:1;margin-bottom:24px;font-size:16px;line-height:1.6}.feature-badge{color:var(--primary);background:linear-gradient(135deg,#40c4d41a,#f542911a);border:1px solid #f5429133;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .3s}.mode-card:hover .feature-badge{background:linear-gradient(135deg,#40c4d433,#f5429133);transform:translateY(-2px);box-shadow:0 4px 12px #f5429133}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in-up:nth-child(2){animation-delay:.1s}@media (max-width:768px){.mode-selection-content{padding:24px 16px}.page-title{font-size:36px}.page-subtitle{font-size:18px}.mode-cards{grid-template-columns:1fr;gap:24px}.mode-card{padding:32px 24px}.card-icon{width:80px;height:80px}.card-icon svg{width:60px;height:60px}.card-title{font-size:24px}.card-description{font-size:15px}}.matchmaking-container{background:linear-gradient(180deg,var(--gradient-start)0%,var(--gradient-mid)50%,var(--gradient-end)100%);flex-direction:column;min-height:100vh;display:flex}.matchmaking-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#fffffff2;padding:16px 24px;position:sticky;top:0;box-shadow:0 2px 20px #0000001a}.matchmaking-content{flex:1;justify-content:center;align-items:center;min-height:calc(100vh - 80px);padding:40px 24px;display:flex}.matchmaking-content .container{width:100%;max-width:600px;margin:0 auto}.matchmaking-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#fffffff2;border:2px solid #ffffff4d;border-radius:24px;padding:48px 40px;box-shadow:0 8px 32px #00000026}.loading-animation{justify-content:center;margin-bottom:32px;display:flex}.loading-animation .spinner{border:5px solid #f5429133;border-top-color:var(--primary);border-radius:50%;width:64px;height:64px;animation:1s linear infinite spin}.matchmaking-card .page-title{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:36px;font-weight:700}.matchmaking-card .subtitle{color:#666;margin-bottom:32px;font-size:18px;line-height:1.6}.searching-info{background:linear-gradient(135deg,#40c4d41a,#f542911a);border-radius:16px;flex-direction:column;gap:20px;margin:32px 0;padding:24px;display:flex}.info-item{color:var(--primary);justify-content:center;align-items:center;gap:12px;font-size:16px;font-weight:600;display:flex}.info-item svg{width:24px;height:24px;color:var(--gradient-start)}.info-item span{color:#333}.cancel-section{border-top:2px solid #0000000d;margin-top:32px;padding-top:24px}.btn-cancel{color:#666;cursor:pointer;background:#fffc;border:2px solid #0000001a;border-radius:50px;padding:12px 32px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.btn-cancel:hover{color:var(--primary);border-color:var(--primary);background:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #f5429133}.private-game-container{background:linear-gradient(180deg,var(--gradient-start)0%,var(--gradient-mid)50%,var(--gradient-end)100%);flex-direction:column;min-height:100vh;display:flex}.private-content{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:100px 24px 40px;display:flex}.private-content .container{width:100%;max-width:600px;margin:0 auto}.private-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:2px solid #ffffff4d;border-radius:24px;padding:48px 40px;box-shadow:0 8px 32px #00000026}.private-card-header{text-align:center;margin-bottom:32px}.card-icon-private-page{width:100px;height:100px;color:var(--primary);background:linear-gradient(135deg,#f5429133,#ff912d33);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 24px;display:flex}.card-icon-private-page svg{width:80px;height:80px}.private-card .page-title{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:36px;font-weight:700}.subtitle{color:#666;font-size:18px;line-height:1.6}.private-card-body{flex-direction:column;gap:24px;display:flex}.error-message{color:#dc2626;background:#dc26261a;border:2px solid #dc26264d;border-radius:12px;align-items:center;gap:12px;padding:16px;font-size:14px;font-weight:600;display:flex}.error-message svg{flex-shrink:0;width:20px;height:20px}.error-message p{color:#dc2626;margin:0}@media (max-width:768px){.matchmaking-card,.private-card{padding:32px 24px}.matchmaking-card .page-title,.private-card .page-title{font-size:28px}.subtitle{font-size:16px}.searching-info{padding:20px}.info-item{font-size:14px}.card-icon-private-page{width:80px;height:80px}.card-icon-private-page svg{width:60px;height:60px}}.lobby-container{background:linear-gradient(180deg,var(--gradient-start)0%,var(--gradient-mid)50%,var(--gradient-end)100%);flex-direction:column;min-height:100vh;display:flex}.lobby-content{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:100px 24px 40px;display:flex}.lobby-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:2px solid #ffffff4d;border-radius:24px;width:100%;max-width:600px;margin:0 auto;padding:48px 40px;box-shadow:0 8px 32px #00000026}.room-code-section{text-align:center;background:linear-gradient(135deg,#40c4d414,#f5429114);border:2px solid #f5429126;border-radius:20px;margin-bottom:40px;padding:32px;position:relative;overflow:hidden}.room-code-section:before{content:"";background:linear-gradient(90deg,var(--gradient-start),var(--gradient-mid),var(--gradient-end));border-radius:20px 20px 0 0;height:4px;position:absolute;top:0;left:0;right:0}.room-code-section h2{color:var(--primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:24px;font-size:18px;font-weight:700}.room-code-display{flex-direction:column;align-items:center;gap:20px;margin-bottom:20px;display:flex}.room-code{letter-spacing:12px;text-transform:uppercase;background:#fff;background-image:linear-gradient(white,white),linear-gradient(135deg,var(--gradient-start),var(--gradient-mid),var(--gradient-end));color:var(--primary);background-origin:border-box;background-clip:padding-box,border-box;border:3px solid #0000;border-radius:16px;padding:24px 40px;font-family:Courier New,monospace;font-size:56px;font-weight:900;transition:all .3s;display:inline-block;position:relative;box-shadow:0 8px 24px #f5429126}.room-code:hover{transform:scale(1.02);box-shadow:0 12px 32px #f5429140}.btn-copy{background:linear-gradient(135deg,var(--gradient-mid),var(--gradient-end));color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:12px;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:700;transition:all .3s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #f542914d}.btn-copy:before{content:"";background:#ffffff4d;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn-copy:hover:before{width:300px;height:300px}.btn-copy:hover{transform:translateY(-2px);box-shadow:0 8px 24px #f5429166}.btn-copy:active{transform:translateY(0);box-shadow:0 4px 12px #f542914d}.room-code-hint{color:#666;background:#fff9;border:1px solid #f542911a;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin:0;padding:12px 20px;font-size:14px;font-style:italic;display:flex}.room-code-hint:before{content:"💡";font-size:16px;font-style:normal}.players-section{margin-bottom:32px}.players-section h2{color:var(--primary);margin-bottom:20px;font-size:20px;font-weight:700}.players-list{flex-direction:column;gap:12px;display:flex}.player-item{background:#fffc;border:2px solid #0000000d;border-radius:12px;align-items:center;gap:16px;padding:16px;transition:all .3s;display:flex}.player-item:hover{border-color:var(--primary);background:#fff;transform:translate(4px)}.player-item.current{border-color:var(--primary);background:linear-gradient(135deg,#40c4d41a,#f542911a)}.player-item.creator{border-color:var(--tertiary);background:linear-gradient(135deg,#ff912d1a,#f542911a)}.player-item.empty{opacity:.5}.player-avatar{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;font-weight:700;display:flex}.player-item.creator .player-avatar{background:linear-gradient(135deg,var(--tertiary),var(--gradient-mid));font-size:24px}.player-name{color:#333;flex:1;font-size:16px;font-weight:600}.player-badge{background:linear-gradient(135deg,var(--tertiary),var(--gradient-mid));color:#fff;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:600}.game-info-section{background:linear-gradient(135deg,#40c4d41a,#f542911a);border-radius:12px;margin-bottom:32px;padding:20px}.info-item{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.info-label{color:#666;font-size:14px;font-weight:600}.info-value{color:var(--primary);font-size:16px;font-weight:700}.info-hint{color:#999;text-align:center;margin:8px 0 0;font-size:12px}.lobby-actions{flex-direction:column;gap:16px;display:flex}.btn-start{cursor:pointer;background:linear-gradient(135deg,var(--gradient-mid),var(--gradient-end));color:#fff;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:16px 24px;font-size:16px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 16px #f542914d}.btn-start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #f5429166}.btn-start:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-leave{border:2px solid var(--primary);cursor:pointer;width:100%;color:var(--primary);background:#fff;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .3s}.btn-leave:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #f542914d}.waiting-message{background:#40c4d41a;border-radius:12px;justify-content:center;align-items:center;gap:12px;margin-bottom:16px;padding:20px;display:flex}.waiting-message p{color:var(--gradient-start);margin:0;font-size:14px;font-weight:600}.loading-screen,.error-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:40px 24px;display:flex}.loading-screen .spinner{border:5px solid #f5429133;border-top-color:var(--primary);border-radius:50%;width:64px;height:64px;margin-bottom:24px;animation:1s linear infinite spin}.loading-screen p{color:#fff;font-size:18px;font-weight:600}.error-screen{background:#fffffff2;border-radius:24px;max-width:600px;margin:0 auto;padding:48px}.error-screen h1{color:var(--primary);margin-bottom:16px;font-size:32px;font-weight:700}.error-screen p{color:#666;margin-bottom:32px;font-size:16px}.lobby-header h1{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid));-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;flex:1;margin:0;font-size:24px;font-weight:700}@media (max-width:768px){.lobby-card{padding:32px 24px}.room-code-section{padding:24px 16px}.room-code{letter-spacing:8px;padding:20px 24px;font-size:36px}.btn-copy{width:100%;padding:12px 24px}.room-code-display{flex-direction:column;gap:16px}.room-code-section h2{font-size:16px}.room-code-hint{font-size:13px}}.form-group{margin-bottom:24px}.form-group label{color:var(--primary);align-items:center;gap:8px;margin-bottom:8px;font-size:14px;font-weight:600;display:flex}.form-group label svg{width:18px;height:18px;color:var(--gradient-start)}.input-field{background:#fff;border:2px solid #0000001a;border-radius:12px;width:100%;padding:14px 18px;font-family:inherit;font-size:16px;transition:all .3s}.input-field:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px #f542911a}.input-field::placeholder{color:#999}.create-section,.join-section{margin-bottom:24px}.section-header{margin-bottom:16px}.section-header h2{color:var(--primary);margin-bottom:8px;font-size:20px;font-weight:700}.section-header p{color:#666;margin:0;font-size:14px}.btn-primary{cursor:pointer;background:linear-gradient(135deg,var(--gradient-mid),var(--gradient-end));color:#fff;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:16px 24px;font-size:16px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 16px #f542914d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #f5429166}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary svg{width:20px;height:20px}.btn-secondary{border:2px solid var(--primary);cursor:pointer;color:var(--primary);background:#fff;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:120px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .3s;display:flex}.btn-secondary:hover:not(:disabled){background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #f542914d}.btn-secondary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary svg{width:18px;height:18px}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}.divider{text-align:center;color:#999;align-items:center;margin:32px 0;font-size:14px;font-weight:600;display:flex}.divider:before,.divider:after{content:"";border-bottom:2px solid #0000001a;flex:1}.divider span{padding:0 16px}.code-input-group{align-items:stretch;gap:12px;display:flex}.input-code{letter-spacing:8px;text-align:center;text-transform:uppercase;background:#fff;border:2px solid #0000001a;border-radius:12px;flex:1;padding:14px 18px;font-family:Courier New,monospace;font-size:24px;font-weight:700;transition:all .3s}.input-code:focus{border-color:var(--primary);letter-spacing:12px;outline:none;box-shadow:0 0 0 4px #f542911a}.input-code::placeholder{letter-spacing:4px;color:#999}.back-link{text-align:center;border-top:2px solid #0000000d;margin-top:32px;padding-top:24px}.back-link a{color:#666;align-items:center;gap:8px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.back-link a:hover{color:var(--primary);transform:translate(-4px)}.back-link a svg{width:18px;height:18px;transition:transform .3s}.back-link a:hover svg{transform:translate(-4px)}@media (max-width:768px){.code-input-group{flex-direction:column}.btn-secondary{width:100%}.input-code{letter-spacing:6px;font-size:20px}.input-code:focus{letter-spacing:8px}}.mode-selection-container{background:linear-gradient(180deg,var(--gradient-start)0%,var(--gradient-mid)50%,var(--gradient-end)100%);flex-direction:column;min-height:100vh;display:flex}.mode-selection-content{flex:1;padding:100px 20px 40px}.mode-selection-intro{text-align:center;margin-bottom:48px}.page-title{color:#fff;text-shadow:0 3px 30px #0006,0 2px 10px #0000004d;margin-bottom:16px;font-family:Poppins,sans-serif;font-size:48px;font-weight:800;line-height:1.2}.page-subtitle{color:#ffffffe6;text-shadow:0 1px 10px #00000026;font-size:20px;font-weight:400}.mode-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;max-width:900px;margin:0 auto;display:grid}.mode-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:inherit;text-align:center;background:#fffffff2;border:2px solid #ffffff4d;border-radius:24px;flex-direction:column;align-items:center;padding:40px;text-decoration:none;transition:all .3s;display:flex;box-shadow:0 8px 32px #0000001a}.mode-card:hover{border-color:#f5429166;transform:translateY(-8px);box-shadow:0 16px 48px #0003}.card-icon{border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin-bottom:24px;transition:transform .3s;display:flex}.mode-card:hover .card-icon{transform:scale(1.1)}.card-icon-multi{color:var(--turquoise);background:linear-gradient(135deg,#40c4d433,#40c4d466)}.card-icon-private{color:var(--rose);background:linear-gradient(135deg,#f5429133,#f5429166)}.card-title{color:var(--charcoal);margin-bottom:12px;font-family:Poppins,sans-serif;font-size:28px;font-weight:700}.card-description{color:#2c2a35b3;margin-bottom:20px;font-size:16px;line-height:1.6}.card-features{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:auto;display:flex}.feature-badge{color:var(--rose);background:#f542911a;border:1px solid #f5429133;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:600}.fade-in{animation:.6s ease-in fadeIn}.fade-in-up{animation:.6s ease-out fadeInUp}@media (max-width:768px){.page-title{font-size:32px}.page-subtitle{font-size:16px}.mode-cards{grid-template-columns:1fr;gap:24px}.mode-card{padding:32px 24px}}.results-page{background:linear-gradient(180deg,var(--gradient-start)0%,var(--gradient-mid)50%,var(--gradient-end)100%);min-height:100vh;padding:100px 24px 60px;position:relative;overflow-x:hidden}.results-header{text-align:center;margin-bottom:60px;padding:40px 20px;position:relative}.zigzag-header-decoration{background:repeating-linear-gradient(45deg,var(--primary),var(--primary)20px,var(--secondary)20px,var(--secondary)40px);opacity:.3;height:20px;position:absolute;top:0;left:0;right:0;transform:skewY(-2deg)}.results-header-content{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:24px;padding:40px 32px;position:relative;box-shadow:0 8px 32px #0000001a}.results-title{justify-content:center;gap:8px;margin-bottom:16px;font-size:64px;font-weight:900;line-height:1;display:flex}.zigzag-text{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid),var(--gradient-end));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:2s ease-in-out infinite zigzag-bounce;display:inline-block}.zigzag-text:nth-child(2){animation-delay:.3s}@keyframes zigzag-bounce{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-10px)rotate(-2deg)}75%{transform:translateY(10px)rotate(2deg)}}.results-subtitle{color:var(--primary);margin-bottom:12px;font-size:32px;font-weight:700}.results-description{color:#666;margin:0;font-size:18px}.results-container{max-width:1200px;margin:0 auto}.zigzag-timeline{flex-direction:column;gap:40px;padding:40px 0;display:flex;position:relative}.zigzag-step-wrapper{flex-direction:column;align-items:center;animation:.6s ease-out both fadeInUp;display:flex;position:relative}.zigzag-step-wrapper:first-child{animation-delay:.1s}.zigzag-step-wrapper:nth-child(2){animation-delay:.2s}.zigzag-step-wrapper:nth-child(3){animation-delay:.3s}.zigzag-step-wrapper:nth-child(4){animation-delay:.4s}.zigzag-step-wrapper:nth-child(5){animation-delay:.5s}.zigzag-step-wrapper:nth-child(6){animation-delay:.6s}.zigzag-step-wrapper:nth-child(7){animation-delay:.7s}.zigzag-step-wrapper:nth-child(8){animation-delay:.8s}.zigzag-step-wrapper:nth-child(9){animation-delay:.9s}.zigzag-step-wrapper:nth-child(10){animation-delay:1s}.zigzag-step-wrapper:nth-child(odd){align-items:flex-start}.zigzag-step-wrapper:nth-child(2n){align-items:flex-end}.zigzag-connector{z-index:0;color:#f5429166;width:100px;height:80px;position:absolute;top:100%}.zigzag-connector-right{left:50%;transform:translate(-50%)}.zigzag-connector-left{right:50%;transform:translate(50%)}.zigzag-line{stroke-dasharray:200;stroke-dashoffset:200px;width:100%;height:100%;animation:1s ease-out forwards drawLine}@keyframes drawLine{to{stroke-dashoffset:0}}.zigzag-step-card{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa padding-box padding-box;border:3px solid #0000;border-radius:24px;width:100%;max-width:600px;padding:32px;transition:all .3s;position:relative;box-shadow:0 8px 32px #00000026}.zigzag-step-card:before{content:"";background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid),var(--gradient-end));z-index:-1;opacity:0;border-radius:24px;transition:opacity .3s;position:absolute;inset:-3px}.zigzag-step-card:hover{transform:translateY(-8px)scale(1.02);box-shadow:0 16px 48px #0003}.zigzag-step-card:hover:before{opacity:1}.zigzag-step-number{background:linear-gradient(135deg,var(--gradient-mid),var(--gradient-end));color:#fff;border:4px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:900;display:flex;position:absolute;top:-20px;left:32px;box-shadow:0 4px 16px #f5429166}.zigzag-step-header{border-bottom:2px solid #f5429133;margin-bottom:20px;padding-bottom:16px}.zigzag-step-type{color:var(--primary);text-transform:uppercase;letter-spacing:1px;font-size:18px;font-weight:700}.zigzag-step-content{min-height:100px}.zigzag-step-content .viewer-text{color:#333;border-left:4px solid var(--secondary);background:#40c4d41a;border-radius:12px;padding:16px;font-size:16px;line-height:1.6}.zigzag-step-content .viewer-drawing{text-align:center}.zigzag-step-content .viewer-image{border-radius:12px;max-width:100%;height:auto;box-shadow:0 4px 16px #0000001a}.zigzag-step-content .viewer-audio{text-align:center;background:#f542911a;border-radius:12px;padding:20px}.zigzag-step-content .audio-player{width:100%;margin-top:12px}.zigzag-no-steps{text-align:center;background:#fffffff2;border-radius:24px;padding:60px 20px;box-shadow:0 8px 32px #0000001a}.zigzag-no-steps p{color:#666;font-size:18px}.results-footer{border-top:2px solid #ffffff4d;justify-content:center;gap:24px;margin-top:60px;padding-top:40px;display:flex}.btn-zigzag{transition:all .3s;position:relative;overflow:hidden}.btn-zigzag:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn-zigzag:hover:before{left:100%}.btn-secondary{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#fff3;border:2px solid #fff6;border-radius:50px;padding:12px 32px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.btn-secondary:hover{background:#ffffff4d;border-color:#fff9;transform:translateY(-2px);box-shadow:0 8px 24px #0003}@media (max-width:768px){.results-title{font-size:48px}.results-subtitle{font-size:24px}.zigzag-step-card{max-width:100%;padding:24px}.zigzag-connector{display:none}.zigzag-step-wrapper{align-items:center!important}.results-footer{flex-direction:column;align-items:center}.btn-primary,.btn-secondary{width:100%;max-width:300px}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}