:root{--bg: #14141f;--panel: #1d1d2b;--panel2: #262638;--line: #34344c;--text: #e8e8f0;--dim: #9a9ab0;--accent: #f5a043;--accent2: #5dbb46;font-family:Avenir Next,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{color:var(--text)}.app{display:flex;height:100vh;width:100vw;background:var(--bg);overflow:hidden}.canvas-wrap{position:relative;flex:1;overflow:hidden;background:repeating-conic-gradient(#181826,#181826 25%,#1a1a2a 0%,#1a1a2a 50%) 0 0/32px 32px}canvas{display:block;image-rendering:pixelated}.sidebar{width:300px;min-width:300px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto}.sidebar h1{font-size:19px;letter-spacing:2px;margin:0;padding:16px 16px 4px;color:var(--accent);text-transform:uppercase}.sidebar .sub{padding:0 16px 12px;font-size:11px;color:var(--dim);border-bottom:1px solid var(--line)}.controls{padding:10px 16px 20px;display:flex;flex-direction:column;gap:10px}.ctl label{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-bottom:3px}.ctl label b{color:var(--text);font-weight:600}.ctl input[type=range]{width:100%;accent-color:var(--accent);height:18px}.ctl select,.ctl input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:6px 8px;font-size:13px}.row{display:flex;gap:8px}.row>*{flex:1}.btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 10px;font-size:13px;cursor:pointer;font-weight:600;transition:filter .1s,transform .05s}.btn:hover{filter:brightness(1.25)}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(180deg,#f5a043,#d97e1e);border-color:#f5b063;color:#221302;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:12px}.btn.play{background:linear-gradient(180deg,#6ecf52,#3f9230);border-color:#8adf70;color:#06210a;font-size:16px;letter-spacing:2px;text-transform:uppercase;padding:14px}.seed-row{display:flex;gap:6px}.seed-row input{flex:1}.seed-row .btn{flex:0 0 auto;padding:6px 10px}.section-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-top:8px;border-bottom:1px solid var(--line);padding-bottom:3px}.hint{font-size:11px;color:var(--dim);line-height:1.5}.hud-top{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:10px;align-items:center;pointer-events:none;z-index:5}.hud-top>*{pointer-events:auto}.badge{background:#141420eb;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 4px 14px #00000080}.badge .dot{width:12px;height:12px;border-radius:3px;display:inline-block}.badge small{color:var(--dim);font-weight:500}.spacer{flex:1}.endturn{background:linear-gradient(180deg,#3f9cf3,#1d62b8);border:1px solid #6cb7ff;color:#fff;border-radius:10px;padding:10px 18px;font-weight:800;letter-spacing:1px;cursor:pointer;box-shadow:0 4px 14px #00000080}.endturn:hover{filter:brightness(1.15)}.hud-bottom{position:absolute;left:10px;bottom:10px;z-index:5;display:flex;gap:10px;align-items:flex-end;pointer-events:none}.info-card{background:#141420eb;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;min-width:170px;box-shadow:0 4px 14px #00000080}.info-card .title{font-weight:800;font-size:13px;margin-bottom:4px}.info-card .line{color:var(--dim);display:flex;justify-content:space-between;gap:12px}.info-card .line b{color:var(--text)}.popup{position:absolute;background:#181826f7;border:1px solid var(--line);border-radius:10px;padding:6px;z-index:10;box-shadow:0 8px 30px #0009;min-width:150px}.popup .item{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--text);font-size:13px;font-weight:600;padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left}.popup .item:hover:not(:disabled){background:var(--panel2)}.popup .item:disabled{color:#555;cursor:default}.popup .item .cost{margin-left:auto;color:var(--accent);font-weight:700}.popup .item canvas{image-rendering:pixelated}.popup .item .sub2{color:var(--dim);font-size:10px;font-weight:400}.banner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none}.banner .inner{font-size:44px;font-weight:900;letter-spacing:6px;text-transform:uppercase;padding:18px 60px;border-radius:14px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.55);animation:bannerIn 1.5s ease forwards;box-shadow:0 10px 50px #0009}@keyframes bannerIn{0%{transform:translate(-60vw) skew(-8deg);opacity:0}18%{transform:translate(0) skew(-8deg);opacity:1}82%{transform:translate(0) skew(-8deg);opacity:1}to{transform:translate(60vw) skew(-8deg);opacity:0}}.winner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a12d1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:30}.winner-overlay .big{font-size:54px;font-weight:900;letter-spacing:5px;text-transform:uppercase;text-shadow:0 4px 0 rgba(0,0,0,.6)}.toolbar-float{position:absolute;top:10px;right:10px;z-index:6;display:flex;gap:8px}.kbd-hint{position:absolute;bottom:10px;right:10px;z-index:5;font-size:11px;color:var(--dim);background:#141420d9;padding:6px 10px;border-radius:8px;border:1px solid var(--line)}