/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.screenshot-workspace { border: 1px solid #334155; border-radius: 20px; padding: clamp(16px, 3vw, 28px); background: #111b2c; }
.screenshot-drop { position: relative; border: 1px dashed #64748b; border-radius: 14px; padding: 30px 18px; text-align: center; background: #0a1323; }
.screenshot-drop.is-dragging { border-color: #6ee7b7; background: #102c2c; }
.screenshot-step { font-size: 11px; letter-spacing: .14em; color: #6ee7b7; margin-bottom: 12px; }
.screenshot-drop h2 { font-size: clamp(20px, 3vw, 25px); font-weight: 600; }
.screenshot-drop p:not(.screenshot-step), .screenshot-hint, .screenshot-footer { color: #94a3b8; font-size: 12px; margin: 10px 0; }
.screenshot-upload { display: inline-flex; align-items: center; min-height: 44px; margin-top: 15px; padding: 10px 20px; background: #e2e8f0; color: #0f172a; border-radius: 8px; font-weight: 600; cursor: pointer; }
.screenshot-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.screenshot-drop:focus-within { outline: 2px solid #6ee7b7; outline-offset: 3px; }
.screenshot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; margin: 14px 0 24px; }
.screenshot-card { min-width: 0; border: 1px solid #334155; border-radius: 10px; overflow: hidden; background: #0a1323; }
.screenshot-card img { width: 100%; height: 130px; object-fit: contain; }
.screenshot-actions { display: flex; align-items: center; padding-left: 12px; }
.screenshot-actions span { margin-right: auto; font-size: 12px; color: #94a3b8; }
.screenshot-actions button { min-width: 44px; min-height: 44px; }
.screenshot-actions button:disabled { opacity: .25; }
.screenshot-card input { width: 100%; min-height: 44px; padding: 8px; background: #172235; font-size: 12px; }
.screenshot-label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.screenshot-label span { color: #94a3b8; font-weight: 400; }
.screenshot-description { width: 100%; background: #0a1323; border: 1px solid #475569; border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical; }
.screenshot-description:focus { outline: 2px solid #6ee7b7; outline-offset: 2px; }
.screenshot-footer { display: flex; justify-content: space-between; gap: 10px; }
.screenshot-generate { width: 100%; min-height: 50px; margin-top: 12px; border-radius: 9px; background: #6ee7b7; color: #082f2b; font-weight: 700; cursor: pointer; }
.screenshot-generate:disabled { opacity: .45; cursor: default; }
.screenshot-error { color: #fda4af; font-size: 13px; margin-top: 10px; }
.game-viewport { position: relative; aspect-ratio: 16/9; max-height: 80dvh; }
.game-viewport[data-orientation="portrait"] { aspect-ratio: 390/844; max-width: 440px; margin: auto; }
.game-viewport[data-orientation="adaptive"] { height: min(72dvh, 720px); aspect-ratio: auto; }
.game-fullscreen { position: fixed; inset: 0; background: #000; z-index: 100; }
.game-fullscreen iframe { width: 100%; height: 100%; border: 0; }