:root{--bp-bg: #1b3a5e;--bp-grid-major: rgba(255, 255, 255, .3);--bp-grid-minor: rgba(255, 255, 255, .1);--bp-lines: #ffffff;--bp-text: #e0e0e0;--color-ncr: #ff4444;--color-ok: #00ff00;--color-hold: #ffd700;--font-tech: "Courier New", Courier, monospace;--cell-size: 38px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{background-color:var(--bp-bg);background-image:linear-gradient(var(--bp-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--bp-grid-major) 1px,transparent 1px),linear-gradient(var(--bp-grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--bp-grid-minor) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-1px -1px;color:var(--bp-text);font-family:var(--font-tech);display:flex;align-items:center;justify-content:center}.app-container{display:flex;flex-direction:column;width:98vw;height:98vh;padding:10px;border:4px solid var(--bp-lines);background:#1b3a5ef2;box-shadow:0 0 30px #00000080;position:relative}.app-header{display:grid;grid-template-columns:1fr auto 1fr;width:100%;border-bottom:2px solid var(--bp-lines);padding-bottom:10px;align-items:center;flex-shrink:0}.tech-stat{display:flex;flex-direction:column;font-size:.8rem;border:1px solid var(--bp-lines);padding:4px 8px;background:#0003;white-space:nowrap}.tech-stat label{opacity:.7;font-size:.6rem;text-transform:uppercase}.tech-stat span{font-size:1.2rem;font-weight:700;color:var(--color-hold);letter-spacing:2px}.btn-reset{background:transparent;color:var(--bp-lines);border:2px solid var(--bp-lines);width:50px;height:50px;display:grid;place-items:center;cursor:pointer;transition:all .2s;border-radius:50%;justify-self:center}.btn-reset:active{background:#ffffff1a;transform:rotate(-2deg)}.btn-reset svg{width:28px;height:28px;fill:currentColor}.layer-selector{display:flex;width:100%;border-bottom:1px solid var(--bp-lines);flex-shrink:0;overflow-x:auto}.layer-btn{background:transparent;color:var(--bp-text);border:1px solid var(--bp-lines);border-bottom:none;padding:8px 12px;margin-right:4px;font-family:var(--font-tech);font-size:.75rem;cursor:pointer;opacity:.6;white-space:nowrap}.layer-btn:hover{opacity:.8}.layer-btn.active{opacity:1;background:var(--bp-lines);color:var(--bp-bg);font-weight:700}.drawing-board{flex-grow:1;width:100%;padding:10px;background:#0003;border:1px dashed var(--bp-lines);overflow:hidden;display:flex;justify-content:center;align-items:center;margin:10px 0;position:relative}.grid{display:grid;gap:0;border:1px solid var(--bp-lines);transition:width .1s,height .1s}.cell{width:var(--cell-size);height:var(--cell-size);background-color:transparent;border:1px solid rgba(255,255,255,.2);display:flex;justify-content:center;align-items:center;font-weight:700;font-size:calc(var(--cell-size) * .6);cursor:crosshair;position:relative;padding:0;color:inherit;font-family:inherit}.cell:not(.revealed){background-image:linear-gradient(135deg,rgba(255,255,255,.05) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.05) 75%,transparent 75%,transparent);background-size:10px 10px}.cell:hover:not(.revealed){background-color:#ffffff1a}.cell.revealed{background-color:#0000001a;border-color:#ffffff1a;cursor:default}.cell[data-val="1"]{color:#64b5f6}.cell[data-val="2"]{color:#81c784}.cell[data-val="3"]{color:#e57373}.cell[data-val="4"]{color:#ba68c8}.cell[data-val="5"]{color:#ffb74d}.cell.mine{background-color:#f443;border:1px solid var(--color-ncr);color:var(--color-ncr)}.cell.exploded{background-color:var(--color-ncr)!important;color:#fff!important;animation:flash .2s}.cell.flagged:after{content:"HOLD";font-size:calc(var(--cell-size) * .35);color:var(--bp-bg);background:var(--color-hold);padding:2px;transform:rotate(-15deg);border:1px solid white;white-space:nowrap}.cell.mine-icon:after{content:"NCR";font-size:calc(var(--cell-size) * .4);font-weight:700}.drawing-info{width:100%;display:flex;justify-content:space-between;border-top:2px solid var(--bp-lines);padding-top:5px;font-size:.7rem;text-transform:uppercase;flex-shrink:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:#e0e0e0;color:#222;border:4px double #222;padding:20px;width:min(300px,90vw);box-shadow:10px 10px #00000080;font-family:var(--font-tech);transform:rotate(-1deg)}.stamp-box{border:3px solid;padding:10px;text-align:center;text-transform:uppercase;font-weight:700;font-size:1.5rem;margin-bottom:20px;transform:rotate(-2deg)}.stamp-fail{border-color:#d32f2f;color:#d32f2f}.stamp-pass{border-color:#388e3c;color:#388e3c}.dialog-btn{background:#333;color:#fff;border:none;padding:10px 20px;font-family:var(--font-tech);cursor:pointer;width:100%}.dialog-btn.secondary{background:transparent;color:#333;border:1px solid #333;margin-top:8px}.input-group{margin-bottom:12px}.input-group label{display:block;margin-bottom:5px}.input-group input{width:100%;padding:5px;font-family:var(--font-tech);background:#eee;border:1px solid #333}.modal h3{margin-top:0;text-align:center;text-transform:uppercase}@keyframes flash{0%{opacity:0}50%{opacity:1}to{opacity:0}}@media(max-width:500px){.app-container{padding:5px;border-width:2px}.drawing-info{font-size:.5rem}.tech-stat span{font-size:1rem}.layer-btn{padding:6px 8px;font-size:.65rem}}
