@font-face { font-family: 'Sahel'; src: url('https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/Sahel.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sahel'; src: url('https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/Sahel-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; }
.gama-editor-container { font-family: 'Sahel', Tahoma, sans-serif !important; background-color: #09090b; color: #f4f4f5; direction: rtl; height: 85vh; min-height: 600px; position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; user-select: none; -webkit-tap-highlight-color: transparent; line-height: 1.5; box-sizing: border-box; margin: 20px 0; }
.gama-editor-container * { box-sizing: border-box; }
.gama-editor-container .no-scrollbar::-webkit-scrollbar { display: none; }
.gama-editor-container .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.gama-editor-container input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; touch-action: none; }
.gama-editor-container input[type=range]:focus { outline: none; }
.gama-editor-container input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 28px; width: 28px; border-radius: 50%; background: #ffffff; cursor: pointer; margin-top: -11px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); border: 4px solid #18181b; transition: transform 0.1s, background 0.1s; }
.gama-editor-container input[type=range]::-webkit-slider-thumb:active { transform: scale(1.15); background: #3b82f6; border-color: #ffffff; }
.gama-editor-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: #3f3f46; border-radius: 3px; }
.gama-editor-container input[type=range].mini-slider::-webkit-slider-thumb { height: 20px; width: 20px; margin-top: -7px; border-width: 2px; }
.gama-editor-container .hidden-element { display: none !important; }
.gama-editor-container #canvas-wrapper { cursor: pointer; touch-action: none; }
.gama-editor-container .loader { border: 3px solid rgba(255,255,255,0.1); border-left-color: #3b82f6; border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.gama-editor-container .bg-checkered { background-color: #09090b; background-image: linear-gradient(45deg, #121214 25%, transparent 25%), linear-gradient(-45deg, #121214 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #121214 75%), linear-gradient(-45deg, transparent 75%, #121214 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
.gama-editor-container .tool-btn.active { color: #3b82f6; }
.gama-editor-container .tool-btn.active .icon-wrapper { background-color: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); }
.gama-editor-container #crop-overlay { position: absolute; overflow: hidden; pointer-events: none; }
.gama-editor-container #crop-box { position: absolute; border: 2px solid #3b82f6; pointer-events: auto; box-shadow: 0 0 0 9999px rgba(0,0,0,0.65); }
.gama-editor-container .crop-handle { position: absolute; width: 20px; height: 20px; background: #ffffff; border: 3px solid #3b82f6; border-radius: 50%; pointer-events: auto; z-index: 10; }
.gama-editor-container .crop-handle.nw { top: -10px; left: -10px; cursor: nwse-resize; }
.gama-editor-container .crop-handle.ne { top: -10px; right: -10px; cursor: nesw-resize; }
.gama-editor-container .crop-handle.sw { bottom: -10px; left: -10px; cursor: nesw-resize; }
.gama-editor-container .crop-handle.se { bottom: -10px; right: -10px; cursor: nwse-resize; }
.gama-editor-container .custom-input { background: #18181b; border: 1px solid #3f3f46; color: #fff; border-radius: 8px; outline: none; transition: border-color 0.2s; }
.gama-editor-container .custom-input:focus { border-color: #3b82f6; }
.gama-editor-container .resize-input { text-align: center; padding: 6px; width: 100%; font-family: monospace; }
.gama-editor-container .filename-input { padding: 6px 8px; width: 100%; font-size: 12px; }
@media (min-width: 640px) { .gama-editor-container .filename-input { width: 130px; font-size: 13px; } }