: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{display:flex;flex-direction:column;height:100vh}main{flex:1;display:flex;flex-direction:column;overflow:hidden}.loading-screen,.error-screen,.game-selector{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:var(--spacing-xl)}header{display:flex;align-items:center;justify-content: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;max-width:800px;margin:0 auto;width:100%}header.collapsed{padding:6px var(--spacing-xl)}@media(max-width:600px){header,header.collapsed{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm);gap:var(--spacing-sm)}}header h1{margin:0;font-size:1.25rem;transition:font-size var(--transition-normal)}header h1 a{color:var(--color-accent);text-decoration:none;transition:opacity var(--transition-fast)}header h1 a:hover{opacity:.8}header.collapsed h1{font-size:1rem}header p{margin:0;color:var(--color-text-muted);font-size:.875rem;transition:font-size var(--transition-normal)}header.collapsed p{font-size:.75rem}header p:before{content:"—";margin-right:var(--spacing-md);color:var(--color-text-faint)}.header-buttons{display:flex;gap:var(--spacing-sm);margin-left:auto}.toggle-button,.reset-button{background:transparent;border:1px solid var(--color-border-light);border-radius:var(--radius-sm);font-size:.75rem;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.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);font-weight:700;min-width:24px}.info-button:hover{border-color:var(--color-text-dim);color:var(--color-text-muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--spacing-xl)}.modal-content{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;padding:var(--spacing-xl);position:relative}.modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:transparent;border:none;color:var(--color-text-muted);font-size:1.5rem;cursor:pointer;padding:var(--spacing-xs);line-height:1;transition:color var(--transition-fast)}.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{margin:0;color:var(--color-text-muted);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{font-family:monospace;color:var(--color-command)}@media(max-width:600px){.modal-overlay{padding:0}.modal-content{max-width:none;max-height:none;height:100%;border-radius:0;border: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:none;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit}.chat-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.messages{flex:1;overflow-y:auto;padding:10px 0;scrollbar-width:thin;scrollbar-color:var(--color-border) var(--color-bg-dark)}.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(max-width:800px){.message{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}}@media(max-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);font-family:monospace;font-size:.875rem;color:var(--color-command)}.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(max-width:800px){.game-intro-message{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}}@media(max-width:600px){.game-intro-message{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}}.game-intro-message pre{margin:0;white-space:pre-wrap;font-size:.875rem;line-height:1.6;color:var(--color-text-secondary)}.tips-banner{max-width:760px;margin:0 auto var(--spacing-lg);padding:var(--spacing-lg);background:linear-gradient(135deg,#2d2a1a,#1a2520);border:2px solid #d4a740;border-radius:var(--radius-md);overflow:hidden;max-height:300px;opacity:1;transition:max-height .4s ease-out,opacity .3s ease-out,margin .4s ease-out,padding .4s ease-out,border-width .4s ease-out}.tips-banner.collapsed{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}@media(max-width:800px){.tips-banner{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}}@media(max-width:600px){.tips-banner{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}}.tips-banner-content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.tips-banner-header{display:flex;align-items:center;gap:var(--spacing-sm)}.tips-banner-icon{font-size:1.25rem}.tips-banner-title{font-weight:600;font-size:1rem;color:#f5d87a}.tips-banner-description{margin:0;font-size:.875rem;color:var(--color-text-secondary);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{position:relative;font-family:monospace;font-size:.875rem;color:#d4a740;line-height:1.8}.tips-banner-examples li:before{content:">";position:absolute;left:-1.25rem;color:#8b7030}.input-form{display:flex;gap:10px;padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--color-border);max-width:800px;margin:0 auto;width:100%}@media(max-width:600px){.input-form{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}}.input-form input{flex:1;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);font-family:inherit;font-size:1rem;transition:border-color var(--transition-fast)}.input-form input:focus{outline:none;border-color:var(--color-accent)}.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:none;border-radius:var(--radius-md);cursor:pointer;font-family:inherit;font-size:1rem;font-weight:700;transition:background-color var(--transition-fast)}.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:pulse 1.2s ease-in-out infinite}@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);font-size:.75rem;color:var(--color-text-dim);max-width:800px;margin:0 auto;width:100%}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{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:400px}.game-option{display:flex;flex-direction:column;align-items:flex-start;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;font-family:inherit}.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);font-size:.875rem;margin-top:var(--spacing-xs)}:root{font-family:Courier New,Courier,monospace;line-height:1.5;font-weight:400;color:#e0e0e0;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;display:flex;flex-direction:column}#root{flex:1;display:flex;flex-direction:column}