@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@600;900&family=Poppins:wght@900&display=swap");:root{--pink:#ff499b;--purple:#8e24ff;--dark-purple:#0d002b;--transition-speed:1s;--transition-ease:cubic-bezier(0.4,0,0.2,1)}body{background-color:#0d002b}#create-root{background-image:url(https://res.cloudinary.com/dvxbn0z8p/image/upload/v1749146341/vibin/cx_30_bg_krfyju.png);background-position:100% 0;background-repeat:no-repeat;background-size:contain;background-color:var(--dark-purple);height:100vh;width:100vw;display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;color:#fff;font-family:Sofia Sans Semi Condensed,sans-serif}#create-header{display:none}#create-container{flex-grow:1;width:100%;display:flex;flex-direction:row;overflow:hidden;position:relative;padding:20px;gap:0;transition:gap var(--transition-speed) var(--transition-ease),padding var(--transition-speed) var(--transition-ease)}#create-root.brainstorm-view #create-container{padding:0}#create-root.editor-view #create-container{padding:0 20px 20px;gap:20px}#chat-area{flex-basis:100%;width:100%;transition:flex-basis var(--transition-speed) var(--transition-ease);display:flex;position:relative}#chat-area,#create-root.brainstorm-view #chat-area{overflow:hidden}#create-root.editor-view #chat-area{flex-basis:30%;flex-shrink:0;flex-grow:0;background-color:transparent;border-radius:0;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:hidden;gap:0;position:relative}#chat-area:before{content:"";position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(to bottom,var(--dark-purple) 0,rgba(13,0,43,0) 100%);z-index:10;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s var(--transition-ease),visibility 0s linear .4s}#create-root.editor-view #chat-area:before{opacity:1;visibility:visible;transition:opacity .4s var(--transition-ease) var(--transition-speed),visibility 0s linear var(--transition-speed)}#create-root.play-mode{background-color:#000;background-image:none}#create-root.play-mode #chat-area{display:none}#create-root.play-mode #game-area{flex-basis:100%;width:100%;margin:0 20px}#create-root.play-mode #create-container{padding:0 20px 20px;gap:0}.chat-wrapper{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden;z-index:1}.chat-wrapper:before{content:"";position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(180deg,#000 0,transparent);z-index:10;pointer-events:none;opacity:0;transition:opacity .3s ease-out}#chat-area:has(.object-panel) .chat-wrapper:before{opacity:1}#game-area{background-color:rgba(0,0,0,.3);border-radius:20px;overflow:hidden;flex-basis:0;opacity:0;transform:scale(.95);transition:opacity calc(var(--transition-speed) * .8) calc(var(--transition-speed) * .2) var(--transition-ease),transform calc(var(--transition-speed) * .8) calc(var(--transition-speed) * .2) var(--transition-ease),flex-basis var(--transition-speed) var(--transition-ease)}#create-root.editor-view #game-area{flex-basis:70%;opacity:1;transform:scale(1)}#app-header{padding:0 20px;background-color:transparent;flex-shrink:0;align-items:center;justify-content:space-between;position:relative;z-index:100;transition:opacity var(--transition-speed) var(--transition-ease),height var(--transition-speed) var(--transition-ease);height:0;opacity:0;display:flex}#app-header.visible{height:75px;opacity:1}.header-left{gap:1.25rem}.header-left,.header-right{display:flex;align-items:center;flex-shrink:0}.header-right{gap:1rem;margin-left:auto}.icon-button{border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease-out;flex-shrink:0}.icon-button img{width:20px;height:20px;object-fit:contain}#app-header .icon-button:hover{background-color:var(--pink)}#title-container{display:flex;align-items:center;gap:1rem;flex:1;min-width:0;justify-content:center;margin:0 2rem}#game-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}#game-title,.game-title-input{font-family:Poppins,sans-serif;font-weight:900;font-size:1.875rem;text-transform:uppercase;color:#fff;letter-spacing:.05em;text-align:center}.game-title-input{background:transparent;border:none;outline:none;width:100%;padding:0;margin:0;border-bottom:2px solid var(--pink);min-width:200px;max-width:600px}.char-counter{font-size:.875rem;color:#9ca3af;transition:color .2s ease-in-out}.char-counter.limit-reached{color:var(--pink)}#play-button{font-family:Poppins,sans-serif;font-weight:900;font-size:1.25rem;text-transform:uppercase;background-color:var(--pink);color:#fff;border:none;padding:10px 24px;border-radius:9999px;cursor:pointer;transition:background-color .2s}#play-button:hover:not(:disabled){background-color:#ff2b85}#play-button:disabled{opacity:.5;cursor:not-allowed;background-color:#ccc}#replay-button{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}#replay-button:hover:not(:disabled){transform:scale(1.1)}#replay-button:disabled{opacity:.5;cursor:not-allowed}.dropdown-menu{background-color:rgba(0,0,0,.8);border-radius:22px;padding:8px;min-width:300px;list-style:none;position:absolute;top:100%;left:0;margin-top:8px}.dropdown-item{color:#fff;font-size:1.2rem;line-height:1.5;padding:12px 16px;border-radius:18px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background-color .2s ease-out;white-space:nowrap}.dropdown-item img{width:20px;height:20px;object-fit:contain}.dropdown-divider,.dropdown-item:hover{background-color:var(--purple)}.dropdown-divider{height:1px;margin:8px 4px;opacity:.5;list-style:none}#chat-area::-webkit-scrollbar{width:6px}#chat-area::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:10px}#chat-area::-webkit-scrollbar-thumb{background:linear-gradient(45deg,var(--purple),var(--pink));border-radius:10px}#chat-area::-webkit-scrollbar-thumb:hover{background:linear-gradient(45deg,#c233ff,#ff72b8)}#chat-area{scrollbar-width:thin;scrollbar-color:var(--purple) rgba(0,0,0,.1)}.skeleton-loader{background:linear-gradient(90deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,.1));background-size:200% 100%;animation:skeleton-pulse 1.5s infinite;border-radius:4px}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{border-radius:4px;margin-bottom:8px}.skeleton-circular{border-radius:50%}.skeleton-rect{border-radius:8px}.chat-skeleton{height:100%;display:flex;flex-direction:column;padding:20px}.chat-messages-skeleton{flex:1;display:flex;flex-direction:column;gap:16px}.message-skeleton{display:flex;gap:12px;align-items:flex-start}.message-content-skeleton{flex:1;display:flex;flex-direction:column;gap:8px}.chat-input-skeleton{margin-top:20px}.game-shell-skeleton{width:100%;height:100%;padding:20px}.object-panel-skeleton{height:100%;padding:20px;display:flex;flex-direction:column}.object-panel-header-skeleton{margin-bottom:20px}.object-panel-content-skeleton{display:flex;flex-direction:column;gap:12px}.object-item-skeleton{border-radius:8px}#create-root.loading #chat-area,#create-root.loading #game-area{opacity:1}#create-root.loading #game-area>:not(.game-shell-skeleton),#create-root.loading .chat-wrapper>:not(.chat-skeleton){display:none}#game-title.updating{opacity:.7;transition:opacity .2s ease}.spinner-small{width:16px;height:16px;border:2px solid hsla(0,0%,100%,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.icon-button:disabled{opacity:.5;cursor:not-allowed}