/* Drone Front site oyuncağı — taktik harita */
.toy-dronefront { container-type: size; position: relative; width: 100%; height: 100%; min-height: 300px; color: var(--paper, #f4ead8); font-family: var(--font, system-ui, sans-serif); user-select: none; -webkit-user-select: none; }
.toy-dronefront .df-panel { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; border: 1px solid rgba(53, 214, 200, .42); background: #06101c; box-shadow: 0 0 28px rgba(53, 214, 200, .14), inset 0 0 40px rgba(53, 214, 200, .06); }
.toy-dronefront .df-stage { position: absolute; inset: 0; outline: none; cursor: crosshair; touch-action: manipulation; }
.toy-dronefront .df-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--world, #35d6c8); }
.toy-dronefront .df-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.toy-dronefront .df-hud { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.toy-dronefront .df-chips { display: flex; flex-wrap: nowrap; gap: 6px; }
.toy-dronefront .df-s { display: none; }
.toy-dronefront .df-chip { white-space: nowrap; }
.toy-dronefront .df-chip { display: flex; gap: 6px; align-items: baseline; padding: 4px 8px; border: 1px solid rgba(53, 214, 200, .38); border-radius: 3px; background: rgba(5, 14, 26, .82); font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 234, 216, .75); }
.toy-dronefront .df-v { font-size: 12px; color: var(--world, #35d6c8); letter-spacing: .06em; }
.toy-dronefront .df-reset, .toy-dronefront .df-again { pointer-events: auto; cursor: pointer; font: inherit; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--world, #35d6c8); background: rgba(5, 14, 26, .82); border: 1px solid rgba(53, 214, 200, .5); border-radius: 3px; padding: 6px 10px; min-height: 30px; }
.toy-dronefront .df-reset:hover, .toy-dronefront .df-again:hover { background: rgba(53, 214, 200, .18); }
.toy-dronefront .df-reset:focus-visible, .toy-dronefront .df-again:focus-visible { outline: 2px solid var(--paper, #f4ead8); outline-offset: 2px; }
.toy-dronefront .df-hint { position: absolute; left: 8px; bottom: 22px; max-width: calc(100% - 16px); padding: 4px 8px; border: 1px solid rgba(244, 234, 216, .2); border-radius: 3px; background: rgba(5, 14, 26, .82); font-size: 12px; letter-spacing: .04em; pointer-events: none; }
.toy-dronefront .df-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 16px 24px; border: 1px solid var(--world, #35d6c8); border-radius: 6px; background: rgba(5, 14, 26, .9); box-shadow: 0 0 30px rgba(53, 214, 200, .35); animation: df-in .4s ease-out; }
.toy-dronefront .df-win[hidden] { display: none; }
.toy-dronefront .df-win-t { font-family: var(--mono, monospace); font-size: clamp(18px, 4.6vw, 26px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--world, #35d6c8); text-shadow: 0 0 14px var(--world, #35d6c8); }
.toy-dronefront .df-win-s { margin: 6px 0 12px; font-size: 13px; color: rgba(244, 234, 216, .8); }
.toy-dronefront .df-note { position: absolute; right: 8px; bottom: 6px; font-size: 10px; letter-spacing: .06em; color: var(--muted, #9a968c); opacity: .85; pointer-events: none; }
@keyframes df-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .toy-dronefront .df-win { animation: none; } }
@container (max-width: 480px) {
  .toy-dronefront .df-l { display: none; }
  .toy-dronefront .df-s { display: inline; }
  .toy-dronefront .df-chips { gap: 4px; }
  .toy-dronefront .df-chip { padding: 4px 6px; gap: 4px; }
  .toy-dronefront .df-reset { padding: 6px 8px; }
}