body{margin:0;padding:0;overflow:hidden;background:#000;height:100vh}#app{width:100vw;height:100vh;display:flex}#game-container{width:100%;height:100vh;display:grid;grid-template-columns:300px 1fr auto;grid-template-rows:1fr 80px;grid-template-areas:"left-sidebar main right-sidebar" "left-sidebar command command"}#sidebar{grid-area:left-sidebar;background:#000;border-right:1px solid #444444;padding:20px;overflow-y:auto}#command-palette{grid-area:right-sidebar;background:#000;border-left:1px solid #444444;padding:20px;overflow-y:auto}#grid-container{grid-area:main;display:grid;grid-template-columns:repeat(100,1fr);background-color:#232323;gap:1px;padding:1px;aspect-ratio:1;margin:auto;height:min(calc(100vh - 80px),calc(100vw - 620px));width:min(calc(100vh - 80px),calc(100vw - 620px));position:relative}#command-wrapper{grid-area:command;display:flex;align-items:center;gap:20px;background:#000;padding:20px;border-top:1px solid #444444}.grid-cell{background-color:#000;aspect-ratio:1;position:relative}#sidebar{position:fixed;left:0;top:0;height:100vh;background:#000;padding:20px;color:#18ff27;font-family:monospace;display:flex;flex-direction:column;width:260px;border-right:1px solid #444444;box-sizing:border-box;z-index:1001}.ship-info{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.ship-name{font-size:24px;font-weight:700}.ship-stats{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:16px;margin:5px 0}.health-blocks{display:flex;gap:2px;flex-wrap:wrap;max-width:220px}.health-block{width:16px;height:16px;background-color:#444;border:1px solid #18FF27}.health-block.active{background-color:#18ff27}.score{font-size:18px;margin-top:10px}.command-history{margin-top:20px;flex:1;overflow-y:auto;min-height:0;border-top:1px solid #444444;padding-top:20px;display:flex;flex-direction:column}.command-entry{font-size:14px;margin-bottom:4px;word-wrap:break-word;line-height:1.4}.restart-button{margin-top:20px;padding:8px 16px;background-color:#18ff27;color:#000;border:none;border-radius:4px;font-family:monospace;font-size:14px;cursor:pointer;transition:background-color .2s;width:100%;position:relative;z-index:1001}.restart-button:hover{background-color:#0fd71e}#command-header{display:flex;flex-direction:column;gap:4px;width:200px}.command-title{color:#18ff27;font-family:monospace;font-size:16px;font-weight:700}.command-help-text{color:#888;font-family:monospace;font-size:12px}#command-input-wrapper{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #444444;border-radius:4px;flex:1}#command-label{color:#18ff27;font-family:monospace;font-size:16px}#command-input{background:transparent;border:none;color:#18ff27;font-family:monospace;font-size:16px;padding:0;flex:1;caret-color:#18ff27}#command-input::placeholder{color:#18ff27;opacity:.5}#command-input:focus{outline:none}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}#command-input:after{content:"|";animation:blink 1s step-end infinite}#command-palette{grid-area:right-sidebar;background:#000;padding:20px;color:#18ff27;font-family:monospace;overflow-y:auto;border-left:1px solid #444444;display:flex;flex-direction:column;min-width:fit-content}.submarine-status{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #444444}.submarine-status h3{margin:0 0 10px;font-size:16px;color:#18ff27}.help-content{display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto}.help-content h3{margin:0 0 10px;font-size:16px;color:#18ff27}.help-entry{display:flex;flex-direction:column;gap:4px;word-wrap:break-word}.help-command{color:#18ff27;font-size:14px}.help-description{color:#888;font-size:12px;line-height:1.4}.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:1000;padding:20px;overflow:auto}.modal-text{color:#18ff27;font-family:monospace;font-size:24px;font-weight:700;text-transform:uppercase;text-shadow:0 0 10px #18FF27;text-align:center;white-space:pre-line;margin:0}.modal-description{color:#18ff27;font-family:monospace;font-size:12px;text-align:center;max-width:100%;line-height:1;white-space:pre;margin:0}.modal-button{padding:10px 20px;background:#18ff27;color:#000;border:none;border-radius:4px;font-family:monospace;font-size:16px;cursor:pointer;transition:background-color .2s;margin-top:10px}.modal-button:hover{background:#0fd71e}
