body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; } #main-container { position: relative; width: 513px; display: flex; flex-direction: column; align-items: center; } #drop-area { position: relative; border: 3px dashed #ccc; border-radius: 10px; width: 513px; height: 393px; margin: 20px auto 10px; padding: 100px; box-sizing: border-box; transition: border-color 0.2s ease; } #drop-area.highlight { border-color: purple; border-width: 3px; } #drop-message { margin-bottom: 10px; font-weight: bold; } #mainCanvas { position: absolute; top: 15px; left: 15px; } #message-area { width: 100%; text-align: center; margin-top: 10px; } #fileInput { display: none; } #main-container:has(#downloadBtn:hover) .grid-frame, #main-container:has(#downloadBtn:hover) .text-input-frame, #main-container:has(#downloadBtn:hover) .rules-frame, #main-container:has(#downloadBtn:hover) .clear-button, #main-container:has(#downloadBtn:hover) .item-toggle, #main-container:has(#downloadBtn:hover) .level-input-frame { border-style: none; opacity: 0; transition: opacity 0.1s ease; } .clear-button, .item-toggle, .level-input-frame { transition: opacity 0.1s ease; } #downloadBtn { display: none; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 10px 0; z-index: 10; } #downloadBtn:hover { background-color: #45a049; } #warnings { color: red; margin-top: 10px; } #new-mode { position: relative; width: 480px; height: 360px; display: none; } #newModeCanvas { position: absolute; top: 0; left: 0; width: 480px; height: 360px; } #grid-frames { position: absolute; top: 14px; left: 14px; width: 480px; height: 360px; pointer-events: none; } .grid-frame { position: absolute; width: 98px; height: 47px; border: 2px dashed #666; box-sizing: border-box; pointer-events: auto; cursor: pointer; transition: border-color 0.2s ease; z-index: 9; } .grid-frame:hover { border: 2px solid #ff0000; } .grid-frame:nth-child(1) { left: 17px; top: 95px; } .grid-frame:nth-child(2) { left: 121px; top: 95px; } .grid-frame:nth-child(3) { left: 17px; top: 157px; } .grid-frame:nth-child(4) { left: 121px; top: 157px; } .grid-frame:nth-child(5) { left: 17px; top: 219px; } .grid-frame:nth-child(6) { left: 121px; top: 219px; } .grid-frame:nth-child(7) { left: 263px; top: 95px; } .grid-frame:nth-child(8) { left: 367px; top: 95px; } .grid-frame:nth-child(9) { left: 263px; top: 157px; } .grid-frame:nth-child(10) { left: 367px; top: 157px; } .grid-frame:nth-child(11) { left: 263px; top: 219px; } .grid-frame:nth-child(12) { left: 367px; top: 219px; } .grid-frame[data-drag="true"] { cursor: move; } .grid-frame.dragging { border: 2px dashed #ff0000; background-color: rgba(255, 255, 255, 0.2); } .grid-frame.drop-target { border: 2px solid #00ff00; background-color: rgba(0, 255, 0, 0.1); } .modal { display: none; position: fixed; left: 0; top: -3px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1000; } .modal-content { background-color: rgba(254, 254, 254, 0.9); margin: 30px auto 2%; padding: 0; border: 1px solid #888; width: fit-content; max-height: 90vh; overflow-y: auto; z-index: 1001; } .modal-background { background-image: url('data/modal-bg.png'); background-repeat: no-repeat; background-position: center; min-width: 480px; min-height: 360px; padding: 0; display: flex; justify-content: center; align-items: center; } #image-grid { display: grid; grid-template-columns: repeat(14, 31px); gap: 0px; justify-content: center; margin: -5px 0 0 0; padding: 0; background-color: rgba(255, 255, 255, 0.5); } .style-popup { display: none; position: fixed; background-color: white; border: 1px solid #ccc; border-radius: 4px; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1002; } .style-popup-top, .style-popup-bottom { transform: translateX(-50%); } .style-popup-left, .style-popup-right { transform: translateY(-50%); } .style-option { display: block; padding: 5px; margin: 5px 0; cursor: pointer; border: 2px solid transparent; } .style-option:hover { background-color: #fff; border: 2px solid red; } .style-option canvas { image-rendering: pixelated; } .text-input-frame { position: absolute; width: 180px; height: 25px; border: 2px dashed #666; box-sizing: border-box; pointer-events: auto; cursor: pointer; z-index: 9; background: transparent; transition: border-color 0.2s ease; } .text-input-frame:hover { border: 2px solid #ff0000; } .text-input-frame.active { border: 2px solid #4CAF50; background: rgba(255, 255, 255, 0.9); } .text-input-field { position: absolute; width: 100%; height: 100%; font-family: "MS PGothic", "ＭＳ Ｐゴシック"; font-size: 17px; padding: 2px 25px 2px 4px; border: none; background: none; color: #000; outline: none; display: none; } .submit-button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: #4CAF50; color: white; border: none; cursor: pointer; display: none; font-size: 12px; line-height: 1; padding: 0; opacity: 0.8; } .submit-button:hover { opacity: 1; } .error-message { position: absolute; bottom: 100%; left: 30px; width: 100px; color: #ff0000; font-size: 14px; font-weight: bold; padding: 2px 4px; background: rgba(255, 255, 255, 1); display: none; z-index: 20; margin-bottom: 2px; } .text-input-frame:nth-child(13) { left: 28px; top: 54px; } .text-input-frame:nth-child(14) { left: 274px; top: 54px; } .rules-frame { position: absolute; left: 177px; top: 5px; width: 128px; height: 38px; border: 2px dashed #666; box-sizing: border-box; pointer-events: auto; cursor: pointer; transition: border-color 0.2s ease; z-index: 9; } .rules-frame:hover { border: 2px solid #ff0000; } .rules-popup { display: none; position: absolute; left: 175px; top: 45px; background-color: white; border: 1px solid #ccc; border-radius: 4px; padding: 2px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1002; width: 134px; box-sizing: border-box; pointer-events: auto; } .rules-grid { display: flex; flex-direction: column; gap: 2px; width: 100%; pointer-events: auto; } .rules-popup canvas { width: 124px; height: 38px; cursor: pointer; border: 2px solid transparent; margin: 2px 0; display: block; pointer-events: auto; } .rules-popup canvas:hover { border: 2px solid #ff0000; } .item-toggle { position: absolute; width: 28px; height: 14px; cursor: pointer; z-index: 10; } .item-toggle::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #ccc; border-radius: 7px; opacity: 0.8; transition: background-color 0.3s; z-index: 11; } .item-toggle.active::before { background-color: #44dd44; } .item-toggle::after { content: ''; position: absolute; width: 12px; height: 12px; background-color: white; border-radius: 50%; top: 1px; left: 2px; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 12; } .item-toggle.active::after { transform: translateX(12px); background-image: url('data/item.png'); background-repeat: no-repeat; background-position: center; } .clear-button { width: 20px; height: 20px; background-color: #dd4444; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; color: white; font-size: 14px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 13; position: absolute; right: 36px; top: -8px; opacity: 0; } .clear-button:hover { transform: scale(1.1); transition: all 0.2s ease; opacity: 1 !important; } .clear-button:active { transform: scale(0.95); opacity: 1; } .grid-frame:hover .clear-button { opacity: 0.7; } .level-input-frame { position: absolute; width: 54px; height: 23px; border: 2px dashed #666; box-sizing: border-box; pointer-events: auto; cursor: pointer; background: transparent; transition: border-color 0.2s ease; z-index: 9; } .level-input-frame:hover { border: 2px solid #ff0000; } .level-input-frame.active { border: 2px solid #4CAF50; background: rgba(255, 255, 255, 0.9); } .level-input-field { position: absolute; width: 100%; height: 100%; font-family: "MS PGothic", "ＭＳ Ｐゴシック"; font-size: 14px; padding: 1px 18px 1px 4px; border: none; background: none; color: #000; outline: none; display: none; } .level-submit-button { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: #4CAF50; color: white; border: none; cursor: pointer; display: none; font-size: 12px; line-height: 1; padding: 0; opacity: 0.8; } .level-submit-button:hover { opacity: 1; } .level-error-message { position: absolute; bottom: 100%; left: 0; width: 100%; color: #ff0000; font-size: 14px; font-weight: bold; padding: 2px 4px; background: rgba(255, 255, 255, 1); display: none; z-index: 20; margin-bottom: 2px; } .level-input-frame[data-level-index="0"] { left: calc(17px + 44px); top: calc(95px + 24px); } .level-input-frame[data-level-index="1"] { left: calc(121px + 44px); top: calc(95px + 24px); } .level-input-frame[data-level-index="2"] { left: calc(17px + 44px); top: calc(157px + 24px); } .level-input-frame[data-level-index="3"] { left: calc(121px + 44px); top: calc(157px + 24px); } .level-input-frame[data-level-index="4"] { left: calc(17px + 44px); top: calc(219px + 24px); } .level-input-frame[data-level-index="5"] { left: calc(121px + 44px); top: calc(219px + 24px); } .level-input-frame[data-level-index="6"] { left: calc(263px + 44px); top: calc(95px + 24px); } .level-input-frame[data-level-index="7"] { left: calc(367px + 44px); top: calc(95px + 24px); } .level-input-frame[data-level-index="8"] { left: calc(263px + 44px); top: calc(157px + 24px); } .level-input-frame[data-level-index="9"] { left: calc(367px + 44px); top: calc(157px + 24px); } .level-input-frame[data-level-index="10"] { left: calc(263px + 44px); top: calc(219px + 24px); } .level-input-frame[data-level-index="11"] { left: calc(367px + 44px); top: calc(219px + 24px); }