@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--bg-top: #1c2532;--bg-mid: #10161f;--bg-bottom: #0a0d14;--panel: #1b2331;--panel-border: #0f121b;--tile: #2b8f4f;--tile-border: #1d5f35;--tile-text: #dcf5df;--hint-bg: #222d3d;--hint-border: #141b26;--hint-input: #151d2a;--hint-input-border: #0f1521;--safe: #2f9f5b;--mid: #be9b2f;--danger: #bf404f;--accent-blue: #2f7ccf;--accent-red: #bf404f;--ink: #ecf3ff;--muted: #aeb8cc}*{box-sizing:border-box}html,body,#root{margin:0;min-width:320px;min-height:100%}body{font-family:"Press Start 2P",monospace;color:var(--ink);image-rendering:pixelated;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale}.pixel-text{font-family:"Press Start 2P",monospace;image-rendering:pixelated;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale}.pixel-border{image-rendering:pixelated;box-shadow:inset -4px -4px #00000073,inset 4px 4px #ffffff1a}.pixel-button{font-family:"Press Start 2P",monospace;image-rendering:pixelated;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;transition:all .1s;box-shadow:inset -4px -4px #00000080,inset 4px 4px #ffffff2e}.pixel-button:hover{transform:translate(2px,2px);box-shadow:inset -2px -2px #00000080,inset 2px 2px #ffffff29}.pixel-button:active{transform:translate(3px,3px);box-shadow:inset -1px -1px #00000080,inset 1px 1px #ffffff1a}.board-wrapper{--grid-preview-size: 428px;--board-cell-size: 72px;--board-cell-gap: 6px;width:min(100%,980px);display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}.board-title-wrap{text-align:center;text-transform:uppercase}.board-title{margin:0;font-size:clamp(1.35rem,3.2vw,2.25rem);color:#ffd34f;letter-spacing:.08em;text-shadow:4px 4px 0 #101216}.board-subtitle{margin:.5rem 0 0;color:var(--muted);font-size:.66rem;letter-spacing:.11em}.upload-input-hidden{display:none}.image-paste-help{margin:0;color:var(--muted);font-size:.52rem;line-height:1.6;text-align:center}.image-preview-panel{width:fit-content;max-width:100%;align-self:center;display:flex;justify-content:center;padding:1rem;border:4px solid var(--panel-border);background:linear-gradient(180deg,#263248,#1a2232)}.image-preview-shell{position:relative;width:fit-content;max-width:100%}.image-preview-frame{border:4px solid #0f1521;background:#131b28;display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;position:relative;overflow:hidden;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}.image-preview-frame.is-empty{padding:.75rem}.image-preview-frame.has-image{padding:0}.image-preview-frame.drag-over{border-color:#ffd34f;background:#1a2a3b;box-shadow:inset -3px -3px #00000059,inset 3px 3px #ffffff14,0 0 0 3px #ffd34f33}.image-preview{display:block;width:auto;height:auto;object-fit:contain;max-width:min(var(--grid-preview-size),calc(100vw - 64px));max-height:min(var(--grid-preview-size),calc(100vw - 64px))}.image-close-button{position:absolute;top:0;right:0;transform:translate(50%,-50%);width:34px;height:34px;min-width:34px;padding:0;border:3px solid #5f1118;background:linear-gradient(180deg,#c94959,#8f2d39);color:#ffeef0;font-size:.72rem;display:flex;align-items:center;justify-content:center;line-height:1;z-index:3}.image-close-button:hover{transform:translate(50%,-50%);box-shadow:inset -4px -4px #00000080,inset 4px 4px #ffffff2e}.image-panel-controls{position:static;display:flex;flex-direction:column;align-items:center;gap:.35rem;z-index:2;pointer-events:none;background:#0a101a8f;border:2px solid rgba(220,234,255,.2);padding:.55rem .8rem}.image-paste-help{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}.image-cta{color:#f2f7ff;font-size:.72rem;letter-spacing:.06em}.image-paste-note{margin-top:.35rem;color:var(--muted);font-size:.46rem;line-height:1.55}.board-panel{width:fit-content;max-width:100%;align-self:center;display:flex;justify-content:center;padding:1rem;border:4px solid var(--panel-border);background:linear-gradient(180deg,#263248,#1a2232)}.convert-row{display:flex;justify-content:center;align-items:center;gap:.75rem;width:100%}.convert-button{background:linear-gradient(180deg,#d18d35,#9e6423);min-width:260px}.convert-button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}.convert-status{min-height:1.1rem;font-size:.52rem;color:#ffdca1;letter-spacing:.03em;text-align:center}.board-grid-fixed{position:relative;display:grid;grid-template-columns:repeat(6,var(--board-cell-size));grid-template-rows:repeat(6,var(--board-cell-size));gap:var(--board-cell-gap)}.cell{width:var(--board-cell-size);height:var(--board-cell-size);display:flex;justify-content:center;align-items:center}.game-cell-option-wrap{width:100%;height:100%;border:4px solid var(--tile-border);border-radius:0;background:var(--tile);box-shadow:inset -4px -4px #0006,inset 4px 4px #ffffff1a;padding:2px;box-sizing:border-box}.game-cell-option-wrap.show-options{background:#9f7e2a;border-color:#7d661f}.game-cell-option-wrap.hidden-cell{background:linear-gradient(180deg,#263248,#1a2232);border-color:#1a2232;box-shadow:none;cursor:pointer}.game-cell-option-wrap.fixed-voltorb{background:#8f2d39;border-color:#5f1118}.fixed-cell-value{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;color:#f7fbff;font-size:clamp(.8rem,calc(var(--board-cell-size) * .36),1.6rem);line-height:1}.fixed-cell-voltorb{width:clamp(16px,calc(var(--board-cell-size) * .56),44px);height:clamp(16px,calc(var(--board-cell-size) * .56),44px);image-rendering:pixelated;image-rendering:crisp-edges;display:block}.cell-option-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px}.cell-option-button{width:100%;height:100%;min-width:0;border:2px solid #172332;background:#24394e;color:#f4f8ff;font-family:"Press Start 2P",monospace;font-size:clamp(.34rem,calc(var(--board-cell-size) * .12),.72rem);line-height:1;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;cursor:pointer}.cell-option-button:disabled{cursor:not-allowed}.cell-option-voltorb{width:clamp(9px,calc(var(--board-cell-size) * .18),16px);height:clamp(9px,calc(var(--board-cell-size) * .18),16px);image-rendering:pixelated;image-rendering:crisp-edges;display:block}.hint-input{width:100%;height:100%;min-width:0;text-align:right;border:3px solid var(--hint-input-border);border-radius:0;background:var(--hint-input);color:#f4f8ff;font-size:.66rem;font-family:"Press Start 2P",monospace;padding:0 3px 0 0}.hint-slot{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;padding:0}.hint-slot>*{min-width:0;height:100%}.hint-volt-row{position:relative;width:100%;height:100%}.hint-voltorb-icon{position:absolute;left:6px;top:50%;transform:translateY(-50%);z-index:2;width:calc(100% - 6px);height:calc(100% - 6px);max-width:18px;max-height:18px;image-rendering:pixelated;image-rendering:crisp-edges;display:block;pointer-events:none}.hint-volt-row .hint-input{position:relative;z-index:1}.hint-input::placeholder{color:#9baccc}.hint-input.error{border-color:#d53f55}.grid-action-button{width:100%;height:100%;min-width:0;padding:.15rem .2rem;border-width:2px;font-size:clamp(.34rem,calc(var(--board-cell-size) * .009),.58rem);line-height:1;display:flex;align-items:center;justify-content:center;justify-self:stretch;align-self:stretch;text-transform:none;letter-spacing:0;box-sizing:border-box;isolation:isolate}.undo-icon{font-size:clamp(.72rem,calc(var(--board-cell-size) * .25),1.18rem);font-weight:800;line-height:1;display:inline-block;transform:translateY(-1.5px)}.control-button.grid-action-button{width:100%;min-width:0;max-width:100%;padding:0;border-width:2px;height:calc((var(--board-cell-size) - 8px) / 2);max-height:calc((var(--board-cell-size) - 8px) / 2);flex:0 0 calc((var(--board-cell-size) - 8px) / 2);min-height:0;line-height:1;box-sizing:border-box;overflow:hidden}.grid-action-slot{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:0;width:100%;height:100%;padding:2px 0;box-sizing:border-box;overflow:hidden}.grid-action-button:focus,.grid-action-button:focus-visible{outline:none}.control-button{padding:.8rem 1rem;border:4px solid #0c1422;border-radius:0;cursor:pointer;color:#f7fbff;font-size:.62rem;letter-spacing:.03em;text-transform:uppercase;min-width:180px}.start-button{background:linear-gradient(180deg,var(--accent-blue),#285f9f)}.start-button.grid-action-button{font-size:clamp(.66rem,calc(var(--board-cell-size) * .24),1.02rem);font-weight:600;line-height:1;padding:0}.start-symbol{display:inline-block;line-height:1;transform:translate(1px,-2.5px)}.undo-button{background:linear-gradient(180deg,var(--accent-red),#93313f)}.control-button.pixel-button{border-radius:0}.board-help{text-align:center;color:var(--muted);font-size:.55rem;line-height:1.7;max-width:720px}.loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;border:4px solid rgba(255,255,255,.2);border-top:4px solid #ffe168;border-radius:50%;width:34px;height:34px;animation:spin .95s linear infinite}.center-toast-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none}.center-toast{padding:.65rem .85rem;border:3px solid rgba(15,21,33,.95);background:#0a101aeb;color:#ffe9b1;font-size:.62rem;letter-spacing:.02em;text-align:center;width:min(340px,calc(100% - 24px));box-shadow:inset -4px -4px #0000008c,inset 4px 4px #ffffff14,0 12px 26px #00000073}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@media (max-width: 900px){.board-wrapper{--grid-preview-size: 366px;--board-cell-size: 62px;--board-cell-gap: 5px}.hint-input{font-size:.58rem}.grid-action-button{font-size:clamp(.32rem,calc(var(--board-cell-size) * .0086),.52rem)}}@media (max-width: 640px){.board-wrapper{--grid-preview-size: 304px;--board-cell-size: 54px;--board-cell-gap: 4px;width:100%;padding:.6rem;gap:.8rem}.image-preview-panel{padding:.6rem}.image-preview-frame{border-width:3px}.image-preview{max-width:min(var(--grid-preview-size),calc(100vw - 40px));max-height:min(var(--grid-preview-size),calc(100vw - 40px))}.image-panel-controls{gap:.35rem;padding:.45rem .6rem}.image-close-button{width:30px;height:30px;min-width:30px;font-size:.62rem}.image-cta{font-size:.56rem}.image-paste-note{font-size:.4rem}.board-panel{padding:.6rem}.game-cell-option-wrap{border-width:3px}.cell-option-button{border-width:1px;font-size:clamp(.3rem,calc(var(--board-cell-size) * .1),.54rem)}.hint-input{border-width:2px;font-size:.5rem}.hint-voltorb-icon{width:10px;height:10px}.control-button{min-width:150px;font-size:.54rem}.grid-action-button{font-size:clamp(.3rem,calc(var(--board-cell-size) * .008),.44rem);border-width:2px}.convert-button{min-width:210px}.board-help{font-size:.48rem}}.tooltip{position:absolute;z-index:9999;background:#1a2232;color:#f0f6ff;font-size:.56rem;line-height:1.7;padding:.6rem .7rem;border-radius:0;border:3px solid #0f1520;box-shadow:inset -3px -3px #00000059,inset 3px 3px #ffffff1a;pointer-events:none;white-space:nowrap;transition:opacity .1s ease-in-out;font-family:"Press Start 2P",monospace}.app-shell{min-height:100vh;width:100%;overflow-x:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"topAd" "main" "bottomAd";background:radial-gradient(circle at 15% 20%,rgba(88,130,255,.18),transparent 40%),radial-gradient(circle at 85% 80%,rgba(40,216,149,.14),transparent 45%),linear-gradient(180deg,#1c2532,#10161f 55%,#0a0d14)}.app-main{grid-area:main;min-width:0;display:flex;justify-content:center;align-items:center;padding:1.25rem}.ad-rail{width:100%;display:flex;align-items:center;justify-content:center;padding:.8rem 1rem}.ad-rail-left{grid-area:topAd}.ad-rail-right{grid-area:bottomAd}.ad-card{width:min(96vw,720px);height:88px;border:4px solid #12151f;border-radius:0;background:linear-gradient(180deg,#242e3d,#1a202d);box-shadow:inset -4px -4px #00000073,inset 4px 4px #ffffff14;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#8d98ad;font-family:"Press Start 2P",monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;text-align:center;gap:.65rem}.ad-card span{font-size:.54rem}@media (min-width: 980px){.app-shell{grid-template-columns:clamp(140px,16vw,220px) minmax(0,1fr) clamp(140px,16vw,220px);grid-template-rows:1fr;grid-template-areas:"leftAd main rightAd"}.ad-rail{width:100%;padding:1rem}.ad-rail-left{grid-area:leftAd}.ad-rail-right{grid-area:rightAd}.ad-card{width:100%;max-width:190px;height:560px;gap:.75rem}}
