:root{font-family:Trebuchet MS,Segoe UI,sans-serif;color:#f2ead6;background:radial-gradient(circle at top,rgba(63,108,58,.45),transparent 38%),linear-gradient(180deg,#162314,#0c130d);color-scheme:dark;--panel: rgba(14, 19, 15, .88);--border: rgba(190, 173, 122, .28);--accent: #d5b265;--danger: #d36b6b}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100vh}body{background:radial-gradient(circle at top,rgba(63,108,58,.45),transparent 38%),linear-gradient(180deg,#162314,#0c130d)}#app{display:grid}.screen{display:grid;place-items:center;padding:16px}.panel{width:min(1100px,100%);background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 12px 30px #00000038}.auth-panel{width:min(480px,100%)}.select-panel{width:min(920px,100%)}.create-panel{width:min(1180px,100%)}.stack{display:flex;flex-direction:column;gap:12px}.grid{display:grid;gap:12px}.grid.two{grid-template-columns:1fr 1fr}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}label{display:flex;flex-direction:column;gap:6px;color:#d5ddca;font-size:14px}input,select,button{font:inherit}input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#ffffff0f;color:#f8f4e6}button,.upload-button{padding:12px 16px;border:0;border-radius:12px;background:linear-gradient(180deg,#d3b566,#947436);color:#17130c;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button.secondary,.upload-button.secondary{background:#ffffff14;color:#f5ecd5}button.danger{background:linear-gradient(180deg,#d36b6b,#8f3f3f);color:#fff3ef}button:disabled{opacity:.55;cursor:not-allowed}.error-line{min-height:20px;color:var(--danger)}.character-card{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:14px;border:1px solid var(--border);background:#ffffff0a}.character-card-preview{width:84px;height:84px;border-radius:14px;background:linear-gradient(45deg,rgba(255,255,255,.06) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.06) 75%),linear-gradient(45deg,rgba(255,255,255,.06) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.06) 75%),#ffffff08;background-size:18px 18px;background-position:0 0,9px 9px;display:grid;place-items:center;overflow:hidden}.character-card-preview img{max-width:100%;max-height:100%;image-rendering:pixelated}.character-card-meta{display:flex;flex-direction:column;gap:4px}.character-card-actions{display:flex;flex-direction:column;gap:8px}.editor-shell{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:16px}.editor-panel,.preview-panel{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#ffffff08}.editor-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:end}.draw-stage{display:grid;place-items:center;padding:10px;min-height:420px;border-radius:16px;background:linear-gradient(180deg,#ffffff0a,#ffffff05),#040705a6}#sprite-editor,#sprite-preview{width:min(100%,420px);aspect-ratio:1 / 1;image-rendering:pixelated;border-radius:14px;background:linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.07) 75%),linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.07) 75%),#ffffff08;background-size:24px 24px;background-position:0 0,12px 12px}#sprite-editor.show-grid{background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.08) 1px,transparent 1px);background-size:6.25% 6.25%}.preview-card{display:grid;place-items:center;min-height:260px;border-radius:16px;background:#040705a6;padding:12px}.game-shell{position:relative;width:100vw;height:100vh;overflow:hidden}#game-canvas{width:100vw;height:100vh}.hud{position:absolute;top:16px;left:16px;z-index:10;padding:14px;min-width:220px;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 32px #00000047}.minimap-shell{position:absolute;top:16px;right:16px;z-index:10;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 32px #00000047}.minimap-title{font-size:13px;font-weight:700;color:#efe0b8}#minimap{width:min(180px,34vw);height:auto;border-radius:12px}.chat-shell{position:absolute;left:16px;bottom:16px;z-index:10;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px}.messages{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:hidden}.message{background:#060a07d6;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px}.chat-form input{background:#060a07e0}.modal-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:#030604b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal-card{width:min(440px,100%);padding:20px;border-radius:18px;background:#0e130ff5;border:1px solid var(--border);box-shadow:0 18px 48px #0000005c}.modal-card h3{margin:0}.modal-card p{margin:0;color:#d5ddca;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:10px}canvas{display:block}@media(max-width:900px){.editor-shell{grid-template-columns:1fr}.character-card{grid-template-columns:1fr;justify-items:start}.character-card-actions{width:100%;flex-direction:row}}@media(max-width:720px){.screen{padding:10px}.panel{padding:14px}.grid.two,.section-heading{grid-template-columns:1fr;flex-direction:column;align-items:stretch}.draw-stage{min-height:320px}#sprite-editor,#sprite-preview{width:min(100%,320px)}.hud{top:10px;left:10px;min-width:0;padding:10px 12px}.minimap-shell{top:10px;right:10px;padding:10px}#minimap{width:min(132px,32vw)}.chat-shell{left:10px;right:10px;bottom:10px;width:auto}}