@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --bg:#0c0a12;
  --panel:#171421;
  --panel2:#211b2d;
  --line:#51445f;
  --gold:#f7d51d;
  --pink:#ff4fa3;
  --cyan:#35e6ff;
  --green:#64f58d;
  --text:#f7f0ff;
  --muted:#a99eb6;
  --shadow:#05040a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:VT323,monospace;font-size:20px;letter-spacing:.5px;overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}
a{color:inherit}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.055;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#fff 4px);mix-blend-mode:screen}
.topbar{min-height:82px;border-bottom:4px solid #08070c;background:#11101a;display:flex;align-items:center;gap:24px;padding:12px 18px;box-shadow:0 5px 0 #05040a;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:190px}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--gold);color:#171421;font-family:"Press Start 2P";font-size:12px;border:3px solid #fff29a;box-shadow:4px 4px 0 #000}
.brand strong,.brand small{display:block;font-family:"Press Start 2P";line-height:1.4}
.brand strong{font-size:13px;color:var(--gold)}
.brand small{font-size:7px;color:#d7ccdf}
.game-title{flex:1;text-align:center;font-family:"Press Start 2P";font-size:14px;color:#fff;letter-spacing:1px;text-shadow:3px 3px 0 #000}
.coin{color:var(--gold);text-shadow:none}
.blink{animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
.top-actions{display:flex;gap:8px}
.pixel-btn,.mini-btn,.tool{border:0;cursor:pointer;background:#292333;box-shadow:3px 3px 0 #07060b, inset 2px 2px 0 #51445f,inset -2px -2px 0 #100d16;transition:transform .05s,filter .1s}
.pixel-btn:hover,.mini-btn:hover,.tool:hover{filter:brightness(1.2)}
.pixel-btn:active,.mini-btn:active,.tool:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #07060b}
.pixel-btn{padding:12px 14px;font-family:"Press Start 2P";font-size:9px}
.pixel-btn.primary{background:var(--gold);color:#171421;box-shadow:3px 3px 0 #07060b,inset 2px 2px 0 #fff29a,inset -2px -2px 0 #9d8200}
.game-workspace{display:grid;grid-template-columns:230px minmax(360px,1fr) 340px;gap:12px;padding:14px;max-width:1600px;margin:auto}
.panel{background:var(--panel);border:3px solid #07060b;box-shadow:inset 0 0 0 2px var(--line),5px 5px 0 #05040a;min-width:0}
.panel-title{font-family:"Press Start 2P";font-size:9px;color:var(--gold);padding:11px;border-bottom:2px solid var(--line);text-shadow:2px 2px #000}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:9px}
.tool{min-height:60px;padding:7px 3px;font-family:"Press Start 2P";font-size:7px}
.tool span{display:block;font-family:VT323;font-size:25px;line-height:25px;color:var(--cyan)}
.tool.active{background:#382e49;outline:2px solid var(--pink);outline-offset:-4px}
.palette-title{margin-top:4px}
.color-stage{position:relative;display:grid;place-items:center;padding:12px;background:#100d17}
#colorWheel{width:190px;height:190px;image-rendering:auto;cursor:crosshair;border-radius:50%;box-shadow:0 0 0 4px #05040a,0 0 0 6px #6c5c78}
.wheel-crosshair{position:absolute;width:12px;height:12px;border:2px solid white;box-shadow:0 0 0 1px #000;border-radius:50%;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%)}
.color-readout{display:flex;gap:9px;align-items:center;padding:8px 10px;border-top:2px solid var(--line)}
#color{width:44px;height:35px;padding:0;border:3px solid #07060b;background:none;cursor:pointer}
.color-readout b{display:block;font-family:"Press Start 2P";font-size:9px;color:#fff}
.color-readout small{color:var(--muted);font-size:15px}
.value-control{padding:7px 10px}
.value-control label{display:flex;justify-content:space-between;font-size:15px;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--gold)}
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:9px}
.swatch{aspect-ratio:1;border:2px solid #05040a;cursor:pointer;box-shadow:inset 1px 1px rgba(255,255,255,.25)}
.swatch:hover{transform:scale(1.08);z-index:2}
.keys{border-top:2px solid var(--line);margin-top:5px;padding-bottom:8px}
.keys .panel-title{border:0}
.keys p{margin:3px 8px;font-size:15px;color:var(--muted)}
kbd{display:inline-block;background:#0b0910;color:var(--cyan);border:1px solid #5a4b68;padding:0 4px;margin:0 2px;font-family:VT323}
.editor-panel{display:flex;flex-direction:column;min-height:620px}
.editor-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:2px solid var(--line)}
.frame-name{font-family:"Press Start 2P";font-size:11px;color:var(--pink)}
.size-label{font-size:17px;color:var(--muted);margin-top:5px}
.zoom-control{display:flex;align-items:center;gap:8px;color:var(--cyan)}
.mini-btn{font-family:"Press Start 2P";font-size:7px;padding:8px 9px}
.mini-btn.danger{color:#ff6d89}
.canvas-wrap{flex:1;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:auto;background-color:#0e0b15;background-image:linear-gradient(45deg,#15111d 25%,transparent 25%),linear-gradient(-45deg,#15111d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#15111d 75%),linear-gradient(-45deg,transparent 75%,#15111d 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;padding:24px}
#pixelCanvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;background:transparent;box-shadow:0 0 0 5px #05040a,0 0 0 7px var(--cyan);touch-action:none}
.statusbar{display:flex;justify-content:space-between;border-top:2px solid var(--line);padding:6px 10px;color:var(--green);font-size:16px}
.right-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.preview-card{padding-bottom:10px}
.preview-screen{margin:12px;background:#08070b;border:4px solid #05040a;box-shadow:inset 0 0 0 2px #4c3f58;display:flex;align-items:center;justify-content:center;aspect-ratio:1;position:relative;overflow:hidden;background-image:radial-gradient(#2b2333 1px,transparent 1px);background-size:8px 8px}
#previewCanvas{width:min(100%,256px);height:min(100%,256px);image-rendering:pixelated;image-rendering:crisp-edges}
.preview-controls{display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.preview-controls label{font-size:17px;color:var(--muted)}
#fps{width:52px;background:#0b0910;border:2px solid var(--line);color:var(--text);padding:3px 5px}
.frames-card{flex:1;min-height:280px}
.frames-title{display:flex;justify-content:space-between}
.frames-title span:last-child{color:var(--cyan)}
.frame-actions{display:flex;gap:5px;padding:8px;border-bottom:2px solid var(--line)}
.frames-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:8px;max-height:360px;overflow:auto}
.frame-thumb{background:#0b0910;border:2px solid #3d3248;padding:3px;cursor:pointer;position:relative}
.frame-thumb.active{border-color:var(--pink);box-shadow:0 0 0 2px #000,0 0 8px rgba(255,79,163,.45)}
.frame-thumb canvas{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;background-image:linear-gradient(45deg,#15111d 25%,transparent 25%),linear-gradient(-45deg,#15111d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#15111d 75%),linear-gradient(-45deg,transparent 75%,#15111d 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}
.frame-number{font-size:14px;text-align:center;color:var(--muted)}
.project-card{padding-bottom:10px}
.size-fields{display:flex;align-items:center;gap:5px;padding:10px}
.size-fields label{font-size:15px;color:var(--muted)}
.size-fields input{width:55px;background:#0b0910;border:2px solid var(--line);color:var(--text);padding:4px}
.faq{max-width:1600px;margin:4px auto 0;padding:0 14px 18px}
.faq details{background:#15111e;border:2px solid #40334a;margin-top:8px;box-shadow:3px 3px #05040a}
.faq summary{cursor:pointer;padding:11px 13px;font-family:"Press Start 2P";font-size:8px;color:var(--gold)}
.faq p{padding:0 13px 10px;margin:0;color:#c7bdce}
footer{text-align:center;border-top:3px solid #07060b;padding:18px;color:#82768d;font-family:"Press Start 2P";font-size:7px}
footer a{color:var(--gold);text-decoration:none}
.modal{position:fixed;inset:0;background:rgba(3,2,7,.86);display:grid;place-items:center;padding:18px;z-index:200}
.modal.hidden{display:none}
.modal-box{width:min(900px,100%);background:#171421;border:4px solid #07060b;box-shadow:8px 8px 0 #000,inset 0 0 0 2px var(--line);padding:14px}
.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--line);padding-bottom:10px}
.eyebrow{font-family:"Press Start 2P";font-size:7px;color:var(--cyan)}
.modal h2{font-family:"Press Start 2P";font-size:15px;margin:7px 0;color:var(--gold)}
.close-btn{font-size:30px;background:none;border:0;cursor:pointer;color:var(--pink)}
.import-layout{display:grid;grid-template-columns:1fr 260px;gap:14px;padding-top:14px}
.sheet-preview-wrap{min-height:350px;background:#0b0910;border:3px solid #07060b;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px}
#sheetPreview{max-width:100%;max-height:480px;image-rendering:pixelated}
.import-controls{display:flex;flex-direction:column;gap:12px}
.import-controls label{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.import-controls input[type=number]{width:85px;background:#0b0910;color:#fff;border:2px solid var(--line);padding:6px}
.import-controls .check{justify-content:flex-start;gap:8px;color:#ddd}
#sheetInfo{color:var(--cyan);margin:0;font-size:17px}
@media(max-width:1100px){
 .game-workspace{grid-template-columns:210px minmax(300px,1fr)}
 .right-stack{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr 1fr}
 .preview-card,.frames-card,.project-card{min-width:0}
}
@media(max-width:760px){
 .topbar{flex-wrap:wrap}.game-title{order:3;flex-basis:100%}.top-actions{margin-left:auto}.brand{min-width:auto}
 .game-workspace{grid-template-columns:1fr;padding:9px}.left-panel{order:2}.editor-panel{order:1;min-height:520px}
 .right-stack{order:3;display:flex}.canvas-wrap{min-height:400px}.import-layout{grid-template-columns:1fr}
 .sheet-preview-wrap{min-height:220px}
}
@media(max-width:480px){
 .top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}.pixel-btn{padding:10px 5px;font-size:7px}
 .game-title{font-size:10px}.color-stage{padding:8px}
}


.export-box{width:min(980px,100%)}
.export-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;padding-top:14px}
.export-preview-wrap{min-height:330px;background:#0b0910;border:3px solid #07060b;display:flex;align-items:center;justify-content:center;overflow:auto;padding:18px;background-image:linear-gradient(45deg,#15111d 25%,transparent 25%),linear-gradient(-45deg,#15111d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#15111d 75%),linear-gradient(-45deg,transparent 75%,#15111d 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
#exportPreview{max-width:100%;max-height:480px;image-rendering:pixelated;border:2px solid #51445f}
.export-controls{display:flex;flex-direction:column;gap:13px}
.layout-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.layout-fields label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:15px}
.layout-fields input{width:100%;background:#0b0910;color:#fff;border:2px solid var(--line);padding:7px}
.export-stats{background:#0d0a13;border:2px solid var(--line);padding:8px 10px}
.export-stats p{display:flex;justify-content:space-between;margin:4px 0;color:var(--muted);font-size:16px}
.export-stats b{color:var(--cyan)}
.export-warning{min-height:20px;margin:0;color:#ff9f43;font-size:17px}
@media(max-width:760px){.export-layout{grid-template-columns:1fr}.export-preview-wrap{min-height:220px}}