:root{--bg:#0f172a;--bg-mid:#1e293b;--bg-card:#ffffff0d;--bg-card-hover:#ffffff17;--bg-glass:#ffffff12;--border:#ffffff17;--border-focus:#06b6d480;--text:#f8fafc;--text-muted:#f8fafc8c;--text-dim:#f8fafc4d;--primary:#3b82f6;--primary-dark:#2563eb;--primary-glow:#3b82f659;--primary-subtle:#3b82f61f;--cyan:#06b6d4;--cyan-glow:#06b6d44d;--cyan-subtle:#06b6d41a;--slate:#64748b;--success:#34d399;--danger:#f87171;--radius:16px;--radius-sm:10px;--radius-xs:6px;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-display:"Space Grotesk", var(--font);--transition:.2s ease}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100dvh;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}.app{background:var(--bg);background-image:radial-gradient(70% 40% at 50% 0,#3b82f61a,#0000),radial-gradient(50% 30% at 80% 100%,#06b6d40f,#0000);flex-direction:column;width:100%;height:100dvh;display:flex;position:relative}.slide{flex-direction:column;width:100%;height:100%;padding:24px;animation:.3s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.btn{border-radius:var(--radius-sm);font-size:15px;font-weight:600;font-family:var(--font-display);cursor:pointer;letter-spacing:.5px;min-height:52px;transition:all var(--transition);white-space:nowrap;border:none;padding:14px 28px;position:relative}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;box-shadow:0 4px 20px var(--primary-glow);font-weight:700}.btn-primary:hover:not(:disabled){box-shadow:0 6px 30px var(--primary-glow);transform:translateY(-1px)}.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border-focus)}.btn-ghost{color:var(--text-muted);letter-spacing:.5px;background:0 0;border:none;min-height:40px;padding:10px 16px;font-size:14px}.btn-ghost:hover{color:var(--text)}.btn-large{border-radius:var(--radius);min-height:58px;padding:18px 48px;font-size:17px}.slide-actions{flex-direction:row;flex-shrink:0;align-items:center;gap:12px;padding-top:16px;display:flex}.slide-actions.center{justify-content:center}.slide-actions.right{justify-content:flex-end}.slide-team-select{justify-content:center;align-items:center;gap:32px}.team-title{font-family:var(--font-display);letter-spacing:6px;color:var(--text);font-size:28px;font-weight:300}.team-step-label{font-family:var(--font-display);letter-spacing:4px;color:var(--cyan);font-size:13px;font-weight:600}.team-grid{grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:500px;max-height:70vh;padding:4px;display:grid;overflow-y:auto}.btn-team{background:var(--bg-card);color:var(--text);font-family:var(--font-display);border-radius:var(--radius-sm);border:1px solid var(--border);min-height:56px;transition:all var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;justify-content:flex-start;align-items:center;gap:12px;padding:14px 16px;display:flex}.btn-team:hover{background:var(--primary-subtle);border-color:var(--primary);box-shadow:0 0 24px var(--primary-glow)}.team-number{letter-spacing:1px;opacity:.5;flex-shrink:0;font-size:22px;font-weight:700}.team-name{letter-spacing:.5px;font-size:14px;font-weight:600;line-height:1.3}.subteam-buttons{gap:20px;width:100%;max-width:520px;display:flex}.btn-subteam{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-display);flex-direction:column;flex:1;align-items:center;gap:10px;padding:28px 20px;display:flex}.btn-subteam:hover:not(.full):not(:disabled){background:var(--primary-subtle);border-color:var(--primary);box-shadow:0 0 30px var(--primary-glow);transform:translateY(-2px)}.btn-subteam.full{opacity:.4;cursor:not-allowed}.subteam-letter{letter-spacing:1px;text-align:center;font-size:16px;font-weight:700;line-height:1.3}.subteam-count{color:var(--text-muted);letter-spacing:1px;font-size:13px}.subteam-full{letter-spacing:2px;color:var(--danger);background:#f871711a;border-radius:4px;padding:3px 8px;font-size:10px}.team-confirm{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.confirm-label{letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;font-size:13px}.confirm-team{font-family:var(--font-display);letter-spacing:2px;background:linear-gradient(135deg, var(--primary), var(--cyan));-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;font-size:clamp(28px,8vw,56px);font-weight:800;line-height:1.1}.confirm-subteam{font-family:var(--font-display);letter-spacing:4px;color:var(--cyan);font-size:22px;font-weight:400}.confirm-question{color:var(--text-muted);letter-spacing:2px;margin-top:8px;font-size:15px}.confirm-buttons{justify-content:center;gap:16px;margin-top:8px;display:flex}.confirm-buttons .btn{justify-content:center;min-width:140px}.slide-lobby{justify-content:center;align-items:center;gap:28px}.slide-lobby h1{font-family:var(--font-display);letter-spacing:6px;background:linear-gradient(135deg, var(--primary), var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:38px;font-weight:700}.lobby-counter{text-align:center}.counter-big{font-family:var(--font-display);color:var(--text);font-size:72px;font-weight:800;line-height:1}.lobby-counter p{color:var(--text-muted);letter-spacing:3px;margin-top:8px;font-size:12px}.lobby-dots{gap:12px;display:flex}.lobby-dot{background:var(--bg-card);border:2px solid var(--border);border-radius:50%;width:18px;height:18px;transition:all .4s}.lobby-dot.active{background:var(--primary);border-color:var(--primary);box-shadow:0 0 12px var(--primary-glow)}.lobby-dot.you{box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--primary), 0 0 20px var(--primary-glow)}.lobby-team-badge{flex-direction:column;align-items:center;gap:4px;display:flex}.lobby-team-number{font-family:var(--font-display);letter-spacing:6px;background:linear-gradient(135deg, var(--primary), var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:36px;font-weight:800}.lobby-team-group{font-family:var(--font-display);letter-spacing:4px;color:var(--cyan);font-size:14px;font-weight:600}.lobby-leader-badge{background:var(--primary-subtle);color:var(--primary);letter-spacing:2px;vertical-align:middle;border:1px solid #3b82f64d;border-radius:4px;margin-left:8px;padding:2px 8px;font-size:10px;font-weight:700;display:inline-block}.lobby-role{color:var(--text-muted);font-size:15px}.lobby-role strong{color:var(--text);font-weight:600}.lobby-wait{color:var(--text-dim);letter-spacing:1px;font-size:13px}.btn-leave{opacity:.5;margin-top:8px;font-size:12px}.btn-leave:hover{opacity:1;color:var(--danger,#f87171)}.exit-button{color:#ffffff8c;cursor:pointer;z-index:100;-webkit-tap-highlight-color:transparent;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:18px;font-weight:400;transition:all .15s;display:flex;position:fixed;top:16px;right:16px}.exit-button:hover,.exit-button:active{color:var(--danger);background:#f8717126;border-color:#f8717166}.exit-confirm-overlay{-webkit-backdrop-filter:blur(6px);z-index:200;background:#000000bf;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.exit-confirm-dialog{background:var(--bg-mid);text-align:center;border:1px solid #ffffff14;border-radius:16px;width:100%;max-width:480px;padding:32px 28px;box-shadow:0 20px 60px #0009}.exit-confirm-dialog h2{letter-spacing:3px;color:var(--text);margin-bottom:12px;font-size:18px;font-weight:600}.exit-confirm-dialog p{color:var(--text-muted);margin-bottom:24px;font-size:14px;line-height:1.5}.exit-confirm-buttons{justify-content:center;gap:12px;display:flex}.exit-confirm-buttons .btn{flex:1;max-width:180px}.btn-danger{color:var(--danger);background:#f8717126;border:1px solid #f8717166}.btn-danger:hover:not(:disabled){background:#f8717147}.slide-drawing{gap:0;padding:12px}.drawing-header{flex-shrink:0;align-items:center;gap:12px;padding:4px 4px 10px;display:flex}.slot-label{font-family:var(--font-display);color:var(--cyan);letter-spacing:2px;font-size:15px;font-weight:700}.area-hint{color:var(--text-muted);font-size:13px}.drawing-layout{flex:1;gap:12px;min-height:0;display:flex}.canvas-container{border:2px solid var(--border);border-radius:var(--radius);background:#fff;flex:1;min-height:0;overflow:hidden}.canvas-container canvas{touch-action:none;width:100%;height:100%;display:block}.toolbar{flex-direction:column;flex-shrink:0;align-items:stretch;gap:10px;width:156px;display:flex}.toolbar-section{flex-direction:column;gap:6px;display:flex}.toolbar-label{letter-spacing:2px;color:var(--text-dim);text-align:center;font-size:9px;font-weight:700}.tools-grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.tool-btn{border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--bg-card);height:44px;color:var(--text-muted);cursor:pointer;transition:all var(--transition);justify-content:center;align-items:center;padding:0;display:flex}.tool-btn:hover{border-color:var(--border-focus);color:var(--text);background:var(--bg-card-hover)}.tool-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 0 14px var(--primary-glow)}.size-buttons{gap:5px;display:flex}.size-btn{border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--bg-card);height:36px;color:var(--text-muted);cursor:pointer;font-family:var(--font-display);letter-spacing:1px;transition:all var(--transition);flex:1;font-size:12px;font-weight:700}.size-btn:hover{border-color:var(--border-focus);color:var(--text)}.size-btn.active{background:var(--cyan-subtle);color:var(--cyan);border-color:var(--cyan)}.history-buttons{gap:5px;display:flex}.history-buttons .tool-btn{flex:1}.color-palette{grid-template-columns:repeat(4,1fr);justify-items:center;gap:5px;display:grid}.color-btn{cursor:pointer;width:32px;height:32px;transition:transform var(--transition);border:2px solid #0000;border-radius:50%;outline:none}.color-btn:hover{transform:scale(1.12)}.color-btn.active{border-color:var(--cyan);box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--cyan)}.toolbar-spacer{flex:1}.toolbar-btn{letter-spacing:1px;text-align:center;justify-content:center;min-height:44px;padding:11px 8px;font-size:12px}.slide-prompt{gap:12px}.prompt-layout{flex:1;gap:16px;min-height:0;display:flex}.prompt-preview{border:2px solid var(--border);border-radius:var(--radius);background:#fff;flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.prompt-preview img{object-fit:contain;width:100%;height:100%}.prompt-input-area{flex-direction:column;flex:1;gap:0;display:flex}.prompt-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;flex:1;gap:12px;padding:20px;display:flex}.prompt-box-header{justify-content:space-between;align-items:center;display:flex}.prompt-box h2{font-family:var(--font-display);color:var(--cyan);letter-spacing:2px;font-size:14px;font-weight:600}.attempt-badge-sm{background:var(--primary-subtle);color:var(--primary);letter-spacing:.5px;font-size:11px;font-weight:700;font-family:var(--font-display);border:1px solid #3b82f64d;border-radius:20px;padding:3px 10px}.prompt-hint{color:var(--text-muted);font-size:13px}.prompt-box textarea{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);resize:none;font-size:16px;font-family:var(--font);min-height:120px;transition:border-color var(--transition);background:#ffffff0a;flex:1;padding:14px}.prompt-box textarea::placeholder{color:var(--text-dim)}.prompt-box textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subtle);outline:none}.slide-image-preview{align-items:stretch;gap:16px}.preview-header{flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.preview-header h2{font-family:var(--font-display);letter-spacing:3px;color:var(--cyan);font-size:16px;font-weight:600}.attempt-badge{background:var(--primary-subtle);color:var(--primary);letter-spacing:1px;font-size:12px;font-weight:700;font-family:var(--font-display);border:1px solid #3b82f64d;border-radius:20px;padding:4px 14px}.preview-image-container{border:2px solid var(--border);border-radius:var(--radius);background:var(--bg-card);flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.preview-image-container img{object-fit:contain;width:100%;height:100%}.slide-gallery{gap:14px;padding:16px 20px}.gallery-header{flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.gallery-header h1{font-family:var(--font-display);letter-spacing:4px;background:linear-gradient(135deg, var(--primary), var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:700}.gallery-count{color:var(--text-muted);letter-spacing:2px;font-size:13px}.gallery-grid-6{flex-direction:column;flex:1;gap:10px;min-height:0;display:flex}.gallery-row{flex:1;grid-template-columns:repeat(3,1fr);gap:10px;min-height:0;display:grid}.gallery-card{flex-direction:column;gap:6px;min-height:0;display:flex}.gallery-image{border-radius:var(--radius-sm);flex:1;justify-content:center;align-items:center;min-height:0;transition:all .3s;display:flex;overflow:hidden}.gallery-image.filled{border:2px solid var(--primary);background:var(--bg-card);box-shadow:0 4px 20px var(--primary-subtle)}.gallery-image.empty{background:#ffffff05;border:2px dashed #ffffff1f}.gallery-image img{object-fit:cover;width:100%;height:100%}.empty-placeholder{text-align:center;color:var(--text-dim);pointer-events:none}.empty-icon{opacity:.25;font-size:28px;line-height:1;display:block}.empty-placeholder p{letter-spacing:1.5px;margin-top:6px;font-size:10px}.gallery-card-footer{flex-shrink:0;justify-content:center;align-items:center;display:flex}.gallery-label{background:var(--bg-card);color:var(--text-muted);border-radius:var(--radius-xs);font-family:var(--font-display);letter-spacing:1.5px;border:1px solid var(--border);padding:3px 10px;font-size:10px;font-weight:600}.slide-mix{gap:12px}.mix-preview-header{flex-shrink:0}.mix-preview-header h2{font-family:var(--font-display);letter-spacing:4px;color:var(--cyan);margin-bottom:4px;font-size:16px;font-weight:700}.mix-preview-hint{color:var(--text-muted);font-size:13px}.mix-image-container{border:2px solid var(--primary);border-radius:var(--radius);background:var(--bg-card);min-height:0;box-shadow:0 8px 40px var(--primary-subtle);flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.mix-image-container img{object-fit:contain;width:100%;height:100%}.mix-preview-meta{align-items:center;gap:12px;display:flex}.mix-prompt-grid{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;display:grid}.mix-prompt-thumb{aspect-ratio:16/9;background:var(--bg-card);border:1px solid #ffffff14;border-radius:6px;overflow:hidden}.mix-prompt-thumb img{object-fit:cover;width:100%;height:100%}.mix-prompt-thumb-empty{background:var(--bg-card);width:100%;height:100%}.slide-waiting{justify-content:center;align-items:center}.waiting-box{background:var(--bg-card);border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;flex-direction:column;align-items:center;gap:12px;padding:56px 72px;display:flex}.waiting-box:before{content:"";background:var(--primary);border-radius:50%;width:36px;height:36px;margin-bottom:8px;animation:2s ease-in-out infinite pulse;display:block}@keyframes pulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;box-shadow:0 0 30px var(--primary-glow);transform:scale(1)}}.waiting-box h1{font-family:var(--font-display);letter-spacing:6px;background:linear-gradient(135deg, var(--primary), var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:44px;font-weight:800}.waiting-box h2{font-family:var(--font-display);letter-spacing:3px;color:var(--text-muted);font-size:20px;font-weight:400}.waiting-box p{color:var(--text-dim);letter-spacing:2px;font-size:13px}.slide-thankyou{justify-content:center;align-items:center;gap:32px}.thankyou-content{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.thankyou-banner{background:var(--bg-card);border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;max-width:80%;padding:48px 72px}.thankyou-banner h1{font-family:var(--font-display);letter-spacing:6px;background:linear-gradient(135deg, var(--primary), var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:48px;font-weight:700}.thankyou-banner h2{font-family:var(--font-display);letter-spacing:3px;color:var(--text-muted);margin-top:16px;font-size:16px;font-weight:400}.error-banner{z-index:200;border:1px solid var(--danger);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1e293bf7;flex-direction:column;gap:12px;min-width:320px;max-width:480px;padding:16px 20px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000080}.error-banner-content{align-items:flex-start;gap:10px;display:flex}.error-icon{color:var(--danger);flex-shrink:0;font-size:18px}.error-message{color:var(--text);font-size:14px;line-height:1.5}.error-actions{justify-content:flex-end;gap:8px;display:flex}.loading-overlay{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172ae0;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-content{text-align:center;color:var(--text)}.loading-content p{font-family:var(--font-display);letter-spacing:2px;color:var(--text-muted);margin-top:24px;font-size:15px;font-weight:500}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:48px;height:48px;margin:0 auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.display-featured{background:#000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.5s fadeIn;display:flex;position:relative}.display-featured img{object-fit:contain;max-width:95%;max-height:90%}.display-featured-label{border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000bf;border:1px solid #ffffff1a;gap:16px;padding:12px 32px;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.display-featured-label span{font-family:var(--font-display);color:#fff;letter-spacing:3px;font-size:20px;font-weight:600}.display-mosaic{background:var(--bg);box-sizing:border-box;background-image:radial-gradient(70% 40% at 50% 0,#3b82f614,#0000);flex-direction:column;gap:14px;width:100vw;height:100vh;padding:20px 20px 16px;display:flex}.display-title{font-family:var(--font-display);color:var(--text);text-align:center;letter-spacing:8px;flex-shrink:0;font-size:20px;font-weight:300}.display-grid-12{flex:1;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(4,1fr);gap:10px;min-height:0;display:grid}.display-team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;transition:all .4s;display:flex;position:relative;overflow:hidden}.display-team-card.filled{border-color:#3b82f64d}.display-team-card img{object-fit:cover;flex:1;width:100%;height:100%}.display-team-placeholder{color:var(--text-dim);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.display-team-placeholder span{font-family:var(--font-display);letter-spacing:3px;font-size:clamp(14px,1.8vw,24px);font-weight:700}.display-team-label{color:#fff;font-family:var(--font-display);letter-spacing:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;background:#000000bf;border-radius:4px;padding:3px 10px;font-size:clamp(8px,.8vw,12px);font-weight:600;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}