:root{--color-accent:#4ade80;--color-accent-hover:#22c55e;--color-error:#ef4444;--color-command:#8b8bcd;--color-bg-dark:#1a1a1a;--color-bg-card:#252525;--color-bg-user:#1e3a2f;--color-bg-intro:#1a2520;--color-bg-command:#1a1a2e;--color-border:#333;--color-border-light:#444;--color-border-user:#2d5a47;--color-border-intro:#2d4a3f;--color-border-command:#2d2d4a;--color-text:#e0e0e0;--color-text-muted:#888;--color-text-dim:#666;--color-text-faint:#555;--color-text-secondary:#9ca3af;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:15px;--spacing-xl:20px;--radius-sm:4px;--radius-md:8px;--transition-fast:.2s ease;--transition-normal:.3s ease}.app{flex-direction:column;height:100vh;display:flex}main{flex-direction:column;flex:1;display:flex;overflow:hidden}.loading-screen,.error-screen,.game-selector{text-align:center;height:100%;padding:var(--spacing-xl);flex-direction:column;justify-content:center;align-items:center;display:flex}header{justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-xl);border-bottom:1px solid var(--color-border);transition:padding var(--transition-normal);flex-shrink:0;width:100%;max-width:800px;margin:0 auto;display:flex}header.collapsed{padding:6px var(--spacing-xl)}@media (width<=600px){header,header.collapsed{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm);gap:var(--spacing-sm)}}header h1{transition:font-size var(--transition-normal);margin:0;font-size:1.25rem}header h1 a{color:var(--color-accent);transition:opacity var(--transition-fast);text-decoration:none}header h1 a:hover{opacity:.8}header.collapsed h1{font-size:1rem}header p{color:var(--color-text-muted);transition:font-size var(--transition-normal);margin:0;font-size:.875rem}header.collapsed p{font-size:.75rem}header p:before{content:"—";margin-right:var(--spacing-md);color:var(--color-text-faint)}.header-buttons{gap:var(--spacing-sm);margin-left:auto;display:flex}.toggle-button,.reset-button{border:1px solid var(--color-border-light);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast), color var(--transition-fast);background:0 0;font-size:.75rem}.toggle-button{color:var(--color-text-dim);padding:var(--spacing-xs) var(--spacing-sm)}.toggle-button:hover{border-color:var(--color-text-dim);color:var(--color-text-muted)}.toggle-button.active{border-color:var(--color-accent);color:var(--color-accent)}.toggle-icon{font-family:monospace;font-weight:700}.reset-button{color:var(--color-text-muted);padding:var(--spacing-xs) var(--spacing-md)}.reset-button:hover{border-color:var(--color-text-dim);color:var(--color-text)}header.collapsed .toggle-button,header.collapsed .reset-button,header.collapsed .info-button{padding:2px 6px;font-size:.7rem}.info-button{color:var(--color-text-dim);padding:var(--spacing-xs) var(--spacing-sm);min-width:24px;font-weight:700}.info-button:hover{border-color:var(--color-text-dim);color:var(--color-text-muted)}.modal-overlay{z-index:100;padding:var(--spacing-xl);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;max-width:500px;max-height:90vh;padding:var(--spacing-xl);position:relative;overflow-y:auto}.modal-close{top:var(--spacing-md);right:var(--spacing-md);color:var(--color-text-muted);cursor:pointer;padding:var(--spacing-xs);transition:color var(--transition-fast);background:0 0;border:none;font-size:1.5rem;line-height:1;position:absolute}.modal-close:hover{color:var(--color-text)}.modal-content h2{margin:0 0 var(--spacing-xl);color:var(--color-accent);font-size:1.25rem}.modal-content section{margin-bottom:var(--spacing-xl)}.modal-content section:last-child{margin-bottom:0}.modal-content h3{margin:0 0 var(--spacing-sm);color:var(--color-text);font-size:1rem}.modal-content p{color:var(--color-text-muted);margin:0;font-size:.875rem;line-height:1.6}.modal-content a{color:var(--color-accent);text-decoration:none}.modal-content a:hover{text-decoration:underline}.examples-list{margin:var(--spacing-sm) 0 0;padding-left:var(--spacing-xl);color:var(--color-text-secondary);font-size:.875rem;line-height:1.8}.examples-list li{color:var(--color-command);font-family:monospace}@media (width<=600px){.modal-overlay{padding:0}.modal-content{border:none;border-radius:0;max-width:none;height:100%;max-height:none}}.error-screen h1{color:var(--color-error)}.error-screen button{margin-top:var(--spacing-xl);padding:10px var(--spacing-xl);background:var(--color-accent);color:var(--color-bg-dark);border-radius:var(--radius-sm);cursor:pointer;border:none;font-family:inherit}.chat-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.messages{scrollbar-width:thin;scrollbar-color:var(--color-border) var(--color-bg-dark);flex:1;padding:10px 0;overflow-y:auto}.messages::-webkit-scrollbar{width:8px}.messages::-webkit-scrollbar-track{background:var(--color-bg-dark);border-radius:var(--radius-sm)}.messages::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-sm)}.messages::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}.message-group{display:contents}.message{max-width:760px;margin:0 auto var(--spacing-lg);padding:10px var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--color-border)}@media (width<=800px){.message{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}}@media (width<=600px){.message{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}}.message.user{background:var(--color-bg-user);border-color:var(--color-border-user)}.message.assistant{background:var(--color-bg-card)}.message.loading{opacity:.7}.message.command{background:var(--color-bg-command);border-color:var(--color-border-command);color:var(--color-command);font-family:monospace;font-size:.875rem}.message-content{white-space:pre-wrap;line-height:1.6}.game-intro-message{background:var(--color-bg-intro);border:1px solid var(--color-border-intro);padding:var(--spacing-lg);border-radius:var(--radius-md);max-width:760px;margin:0 auto var(--spacing-lg)}@media (width<=800px){.game-intro-message{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}}@media (width<=600px){.game-intro-message{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}}.game-intro-message pre{white-space:pre-wrap;color:var(--color-text-secondary);margin:0;font-size:.875rem;line-height:1.6}.tips-banner{max-width:760px;margin:0 auto var(--spacing-lg);padding:var(--spacing-lg);border-radius:var(--radius-md);opacity:1;background:linear-gradient(135deg,#2d2a1a 0%,#1a2520 100%);border:2px solid #d4a740;max-height:300px;transition:max-height .4s ease-out,opacity .3s ease-out,margin .4s ease-out,padding .4s ease-out,border-width .4s ease-out;overflow:hidden}.tips-banner.collapsed{opacity:0;border-width:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}@media (width<=800px){.tips-banner{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}}@media (width<=600px){.tips-banner{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}}.tips-banner-content{gap:var(--spacing-sm);flex-direction:column;display:flex}.tips-banner-header{align-items:center;gap:var(--spacing-sm);display:flex}.tips-banner-icon{font-size:1.25rem}.tips-banner-title{color:#f5d87a;font-size:1rem;font-weight:600}.tips-banner-description{color:var(--color-text-secondary);margin:0;font-size:.875rem;line-height:1.5}.tips-banner-examples{margin:var(--spacing-xs) 0 0;padding-left:var(--spacing-xl);list-style-type:none}.tips-banner-examples li{color:#d4a740;font-family:monospace;font-size:.875rem;line-height:1.8;position:relative}.tips-banner-examples li:before{content:">";color:#8b7030;position:absolute;left:-1.25rem}.input-form{padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--color-border);gap:10px;width:100%;max-width:800px;margin:0 auto;display:flex}@media (width<=600px){.input-form{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}}.input-form input{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:border-color var(--transition-fast);flex:1;font-family:inherit;font-size:1rem}.input-form input:focus{border-color:var(--color-accent);outline:none}.input-form input::placeholder{color:var(--color-text-dim)}.input-form button{padding:var(--spacing-md) var(--spacing-xl);background:var(--color-accent);color:var(--color-bg-dark);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast);border:none;font-family:inherit;font-size:1rem;font-weight:700}.input-form button:disabled{opacity:.5;cursor:not-allowed}.input-form button:hover:not(:disabled){background:var(--color-accent-hover)}.input-form button.loading{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}footer{text-align:center;padding:var(--spacing-md) var(--spacing-xl);color:var(--color-text-dim);width:100%;max-width:800px;margin:0 auto;font-size:.75rem}footer a{color:var(--color-accent);text-decoration:none}footer a:hover{text-decoration:underline}.game-selector h2{color:var(--color-accent);margin-bottom:30px;font-size:1.5rem}.game-list{gap:var(--spacing-md);flex-direction:column;width:100%;max-width:400px;display:flex}.game-option{padding:16px var(--spacing-xl);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast), background-color var(--transition-fast);text-align:left;flex-direction:column;align-items:flex-start;font-family:inherit;display:flex}.game-option:hover{border-color:var(--color-accent);background:var(--color-bg-user)}.game-name{color:var(--color-text);font-size:1.1rem;font-weight:500}.game-description{color:var(--color-text-muted);margin-top:var(--spacing-xs);font-size:.875rem}:root{color:#e0e0e0;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1a1a1a;font-family:Courier New,Courier,monospace;font-weight:400;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{flex-direction:column;min-height:100vh;display:flex}#root{flex-direction:column;flex:1;display:flex}