*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#f7f3e9,#e8dcc6);min-height:100vh;color:#3c2e26;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(139,69,19,.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(160,82,45,.03) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(210,180,140,.03) 0%,transparent 50%);pointer-events:none;z-index:0}#header{text-align:center;padding:30px 0;color:#5d4037;position:relative;z-index:1}#header h1{font-size:2.2rem;font-weight:600;margin-bottom:8px;text-shadow:0 2px 4px rgba(93,64,55,.1);letter-spacing:-.02em}#header p{font-size:1rem;font-weight:400;opacity:.8;color:#8d6e63}#container{display:flex;height:calc(100vh - 140px);gap:24px;padding:0 24px 24px;position:relative;z-index:1}#left-panel{width:50%;display:flex;flex-direction:column;gap:16px}#editor-container{flex-grow:1;border-radius:16px;overflow:hidden;background:#ffffffe6;box-shadow:0 8px 32px #5d403714,0 2px 8px #5d40370a;border:1px solid rgba(139,69,19,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#editor{height:100%;border-radius:16px}#controls{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}#generate-btn{padding:8px 16px;border:none;background:linear-gradient(135deg,#8d6e63,#6d4c41);color:#fff;cursor:pointer;border-radius:10px;font-weight:500;font-size:12px;letter-spacing:.02em;box-shadow:0 3px 8px #5d403733,0 1px 3px #5d40371a;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}#generate-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #5d403740,0 2px 6px #5d403726;background:linear-gradient(135deg,#a1887f,#8d6e63)}#generate-btn:active{transform:translateY(0)}#think-btn{padding:8px 16px;border:none;background:linear-gradient(135deg,gold,#ffb300);color:#333;cursor:pointer;border-radius:10px;font-weight:600;font-size:12px;letter-spacing:.02em;box-shadow:0 3px 8px #ffc1074d,0 1px 3px #ffc10733;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}#think-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ffc10766,0 2px 6px #ffc1074d;background:linear-gradient(135deg,#ffed4e,gold)}#think-btn:active{transform:translateY(0)}#think-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;background:linear-gradient(135deg,#bdbdbd,#9e9e9e);box-shadow:none;color:#666}#refresh-btn{padding:8px 14px;border:2px solid #8d6e63;background:#8d6e631a;color:#5d4037;cursor:pointer;border-radius:10px;font-weight:500;font-size:12px;letter-spacing:.02em;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}#refresh-btn:hover{transform:translateY(-1px);background:#8d6e6333;border-color:#6d4c41;box-shadow:0 3px 8px #5d403726,0 1px 3px #5d403714}#refresh-btn:active{transform:translateY(0)}#refresh-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}#reset-btn{padding:8px 16px;border:2px solid #d7ccc8;background:#fffc;color:#5d4037;cursor:pointer;border-radius:10px;font-weight:500;font-size:12px;letter-spacing:.02em;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}#reset-btn:hover{transform:translateY(-1px);background:#fffffff2;border-color:#bcaaa4;box-shadow:0 3px 8px #5d40371a,0 1px 3px #5d40370d}#reset-btn:active{transform:translateY(0)}#live-editing-indicator{display:flex;align-items:center;padding:6px 10px;background:#fffc;border-radius:6px;border:1px solid rgba(139,69,19,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#live-status{font-size:11px;font-weight:500;color:#5d4037;display:flex;align-items:center;gap:3px}#live-status.disabled{color:#8d6e63;opacity:.6}#live-status.updating{color:#f57c00}#right-panel{width:50%;display:flex;flex-direction:column}#preview{width:100%;height:100%;border-radius:16px;border:3px solid #8d6e63;background:linear-gradient(to right,rgba(93,64,55,.2) 3px,transparent 3px),linear-gradient(to bottom,rgba(93,64,55,.2) 3px,transparent 3px),linear-gradient(to left,rgba(93,64,55,.2) 3px,transparent 3px),linear-gradient(to top,rgba(93,64,55,.2) 3px,transparent 3px),#fffffff2;background-size:20px 20px,20px 20px,20px 20px,20px 20px,100% 100%;background-position:top 12px right 12px,bottom 12px left 12px,bottom 12px right 12px,top 12px left 12px,center;background-repeat:no-repeat;box-shadow:0 8px 32px #5d40371f,0 2px 8px #5d403714,inset 0 0 0 2px #fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;transition:all .3s ease;position:relative}#preview:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(135deg,#a1887f,#8d6e63,#6d4c41);border-radius:19px;z-index:-1;opacity:.8}#preview:after{content:"🎮";position:absolute;top:8px;right:8px;font-size:16px;opacity:.6;pointer-events:none;z-index:10;background:#ffffffe6;border-radius:6px;padding:4px 6px;box-shadow:0 2px 8px #5d40371a}#preview:hover{box-shadow:0 12px 40px #5d40371f,0 4px 12px #5d403714}#preview[src=""],#preview:not([srcdoc]){background:linear-gradient(135deg,#f7f3e9,#e8dcc6),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='50' text-anchor='middle' dominant-baseline='middle' font-family='Inter' font-size='14' fill='%23666'%3ELoading...%3C/text%3E%3C/svg%3E") center/contain no-repeat}#preview.error{background:linear-gradient(135deg,#fdf2f2,#fecaca),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='50' text-anchor='middle' dominant-baseline='middle' font-family='Inter' font-size='12' fill='%23dc2626'%3EError loading game%3C/text%3E%3C/svg%3E") center/contain no-repeat}@media (max-width: 1200px){#preview{border-radius:12px}}@media (max-width: 768px){#preview{border-radius:8px;min-height:300px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#d7ccc84d;border-radius:4px}::-webkit-scrollbar-thumb{background:#8d6e6380;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#8d6e63b3}@media (max-width: 768px){#container{flex-direction:column;padding:0 16px 16px;gap:16px}#left-panel,#right-panel{width:100%;height:50%}#header h1{font-size:1.8rem}#controls{flex-direction:column;gap:12px}#generate-btn,#reset-btn,#think-btn,#refresh-btn{width:100%;max-width:200px}}